) => {
return (
- {props.label && }
(props: SelectProps) => {
/>
-
diff --git a/packages/actify/src/components/Select/select.module.css b/packages/actify/src/components/Select/select.module.css
index 6e38443..8d2689a 100644
--- a/packages/actify/src/components/Select/select.module.css
+++ b/packages/actify/src/components/Select/select.module.css
@@ -1,335 +1,12 @@
-.outlined-select {
- --_bottom-space: var(--md-outlined-field-bottom-space, 16px);
- --_content-color: var(
- --md-outlined-field-content-color,
- var(--md-sys-color-on-surface, #1d1b20)
- );
- --_content-font: var(
- --md-outlined-field-content-font,
- var(
- --md-sys-typescale-body-large-font,
- var(--md-ref-typeface-plain, Roboto)
- )
- );
- --_content-line-height: var(
- --md-outlined-field-content-line-height,
- var(--md-sys-typescale-body-large-line-height, 1.5rem)
- );
- --_content-size: var(
- --md-outlined-field-content-size,
- var(--md-sys-typescale-body-large-size, 1rem)
- );
- --_content-space: var(--md-outlined-field-content-space, 16px);
- --_content-weight: var(
- --md-outlined-field-content-weight,
- var(
- --md-sys-typescale-body-large-weight,
- var(--md-ref-typeface-weight-regular, 400)
- )
- );
- --_disabled-content-color: var(
- --md-outlined-field-disabled-content-color,
- var(--md-sys-color-on-surface, #1d1b20)
- );
- --_disabled-content-opacity: var(
- --md-outlined-field-disabled-content-opacity,
- 0.38
- );
- --_disabled-label-text-color: var(
- --md-outlined-field-disabled-label-text-color,
- var(--md-sys-color-on-surface, #1d1b20)
- );
- --_disabled-label-text-opacity: var(
- --md-outlined-field-disabled-label-text-opacity,
- 0.38
- );
- --_disabled-leading-content-color: var(
- --md-outlined-field-disabled-leading-content-color,
- var(--md-sys-color-on-surface, #1d1b20)
- );
- --_disabled-leading-content-opacity: var(
- --md-outlined-field-disabled-leading-content-opacity,
- 0.38
- );
- --_disabled-outline-color: var(
- --md-outlined-field-disabled-outline-color,
- var(--md-sys-color-on-surface, #1d1b20)
- );
- --_disabled-outline-opacity: var(
- --md-outlined-field-disabled-outline-opacity,
- 0.12
- );
- --_disabled-outline-width: var(
- --md-outlined-field-disabled-outline-width,
- 1px
- );
- --_disabled-supporting-text-color: var(
- --md-outlined-field-disabled-supporting-text-color,
- var(--md-sys-color-on-surface, #1d1b20)
- );
- --_disabled-supporting-text-opacity: var(
- --md-outlined-field-disabled-supporting-text-opacity,
- 0.38
- );
- --_disabled-trailing-content-color: var(
- --md-outlined-field-disabled-trailing-content-color,
- var(--md-sys-color-on-surface, #1d1b20)
- );
- --_disabled-trailing-content-opacity: var(
- --md-outlined-field-disabled-trailing-content-opacity,
- 0.38
- );
- --_error-content-color: var(
- --md-outlined-field-error-content-color,
- var(--md-sys-color-on-surface, #1d1b20)
- );
- --_error-focus-content-color: var(
- --md-outlined-field-error-focus-content-color,
- var(--md-sys-color-on-surface, #1d1b20)
- );
- --_error-focus-label-text-color: var(
- --md-outlined-field-error-focus-label-text-color,
- var(--md-sys-color-error, #b3261e)
- );
- --_error-focus-leading-content-color: var(
- --md-outlined-field-error-focus-leading-content-color,
- var(--md-sys-color-on-surface-variant, #49454f)
- );
- --_error-focus-outline-color: var(
- --md-outlined-field-error-focus-outline-color,
- var(--md-sys-color-error, #b3261e)
- );
- --_error-focus-supporting-text-color: var(
- --md-outlined-field-error-focus-supporting-text-color,
- var(--md-sys-color-error, #b3261e)
- );
- --_error-focus-trailing-content-color: var(
- --md-outlined-field-error-focus-trailing-content-color,
- var(--md-sys-color-error, #b3261e)
- );
- --_error-hover-content-color: var(
- --md-outlined-field-error-hover-content-color,
- var(--md-sys-color-on-surface, #1d1b20)
- );
- --_error-hover-label-text-color: var(
- --md-outlined-field-error-hover-label-text-color,
- var(--md-sys-color-on-error-container, #410e0b)
- );
- --_error-hover-leading-content-color: var(
- --md-outlined-field-error-hover-leading-content-color,
- var(--md-sys-color-on-surface-variant, #49454f)
- );
- --_error-hover-outline-color: var(
- --md-outlined-field-error-hover-outline-color,
- var(--md-sys-color-on-error-container, #410e0b)
- );
- --_error-hover-supporting-text-color: var(
- --md-outlined-field-error-hover-supporting-text-color,
- var(--md-sys-color-error, #b3261e)
- );
- --_error-hover-trailing-content-color: var(
- --md-outlined-field-error-hover-trailing-content-color,
- var(--md-sys-color-on-error-container, #410e0b)
- );
- --_error-label-text-color: var(
- --md-outlined-field-error-label-text-color,
- var(--md-sys-color-error, #b3261e)
- );
- --_error-leading-content-color: var(
- --md-outlined-field-error-leading-content-color,
- var(--md-sys-color-on-surface-variant, #49454f)
- );
- --_error-outline-color: var(
- --md-outlined-field-error-outline-color,
- var(--md-sys-color-error, #b3261e)
- );
- --_error-supporting-text-color: var(
- --md-outlined-field-error-supporting-text-color,
- var(--md-sys-color-error, #b3261e)
- );
- --_error-trailing-content-color: var(
- --md-outlined-field-error-trailing-content-color,
- var(--md-sys-color-error, #b3261e)
- );
- --_focus-content-color: var(
- --md-outlined-field-focus-content-color,
- var(--md-sys-color-on-surface, #1d1b20)
- );
- --_focus-label-text-color: var(
- --md-outlined-field-focus-label-text-color,
- var(--md-sys-color-primary, #6750a4)
- );
- --_focus-leading-content-color: var(
- --md-outlined-field-focus-leading-content-color,
- var(--md-sys-color-on-surface-variant, #49454f)
- );
- --_focus-outline-color: var(
- --md-outlined-field-focus-outline-color,
- var(--md-sys-color-primary, #6750a4)
- );
- --_focus-outline-width: var(--md-outlined-field-focus-outline-width, 3px);
- --_focus-supporting-text-color: var(
- --md-outlined-field-focus-supporting-text-color,
- var(--md-sys-color-on-surface-variant, #49454f)
- );
- --_focus-trailing-content-color: var(
- --md-outlined-field-focus-trailing-content-color,
- var(--md-sys-color-on-surface-variant, #49454f)
- );
- --_hover-content-color: var(
- --md-outlined-field-hover-content-color,
- var(--md-sys-color-on-surface, #1d1b20)
- );
- --_hover-label-text-color: var(
- --md-outlined-field-hover-label-text-color,
- var(--md-sys-color-on-surface, #1d1b20)
- );
- --_hover-leading-content-color: var(
- --md-outlined-field-hover-leading-content-color,
- var(--md-sys-color-on-surface-variant, #49454f)
- );
- --_hover-outline-color: var(
- --md-outlined-field-hover-outline-color,
- var(--md-sys-color-on-surface, #1d1b20)
- );
- --_hover-outline-width: var(--md-outlined-field-hover-outline-width, 1px);
- --_hover-supporting-text-color: var(
- --md-outlined-field-hover-supporting-text-color,
- var(--md-sys-color-on-surface-variant, #49454f)
- );
- --_hover-trailing-content-color: var(
- --md-outlined-field-hover-trailing-content-color,
- var(--md-sys-color-on-surface-variant, #49454f)
- );
- --_label-text-color: var(
- --md-outlined-field-label-text-color,
- var(--md-sys-color-on-surface-variant, #49454f)
- );
- --_label-text-font: var(
- --md-outlined-field-label-text-font,
- var(
- --md-sys-typescale-body-large-font,
- var(--md-ref-typeface-plain, Roboto)
- )
- );
- --_label-text-line-height: var(
- --md-outlined-field-label-text-line-height,
- var(--md-sys-typescale-body-large-line-height, 1.5rem)
- );
- --_label-text-padding-bottom: var(
- --md-outlined-field-label-text-padding-bottom,
- 8px
- );
- --_label-text-populated-line-height: var(
- --md-outlined-field-label-text-populated-line-height,
- var(--md-sys-typescale-body-small-line-height, 1rem)
- );
- --_label-text-populated-size: var(
- --md-outlined-field-label-text-populated-size,
- var(--md-sys-typescale-body-small-size, 0.75rem)
- );
- --_label-text-size: var(
- --md-outlined-field-label-text-size,
- var(--md-sys-typescale-body-large-size, 1rem)
- );
- --_label-text-weight: var(
- --md-outlined-field-label-text-weight,
- var(
- --md-sys-typescale-body-large-weight,
- var(--md-ref-typeface-weight-regular, 400)
- )
- );
- --_leading-content-color: var(
- --md-outlined-field-leading-content-color,
- var(--md-sys-color-on-surface-variant, #49454f)
- );
- --_leading-space: var(--md-outlined-field-leading-space, 16px);
- --_outline-color: var(
- --md-outlined-field-outline-color,
- var(--md-sys-color-outline, #79747e)
- );
- --_outline-label-padding: var(--md-outlined-field-outline-label-padding, 4px);
- --_outline-width: var(--md-outlined-field-outline-width, 1px);
- --_supporting-text-color: var(
- --md-outlined-field-supporting-text-color,
- var(--md-sys-color-on-surface-variant, #49454f)
- );
- --_supporting-text-font: var(
- --md-outlined-field-supporting-text-font,
- var(
- --md-sys-typescale-body-small-font,
- var(--md-ref-typeface-plain, Roboto)
- )
- );
- --_supporting-text-leading-space: var(
- --md-outlined-field-supporting-text-leading-space,
- 16px
- );
- --_supporting-text-line-height: var(
- --md-outlined-field-supporting-text-line-height,
- var(--md-sys-typescale-body-small-line-height, 1rem)
- );
- --_supporting-text-size: var(
- --md-outlined-field-supporting-text-size,
- var(--md-sys-typescale-body-small-size, 0.75rem)
- );
- --_supporting-text-top-space: var(
- --md-outlined-field-supporting-text-top-space,
- 4px
- );
- --_supporting-text-trailing-space: var(
- --md-outlined-field-supporting-text-trailing-space,
- 16px
- );
- --_supporting-text-weight: var(
- --md-outlined-field-supporting-text-weight,
- var(
- --md-sys-typescale-body-small-weight,
- var(--md-ref-typeface-weight-regular, 400)
- )
- );
- --_top-space: var(--md-outlined-field-top-space, 16px);
- --_trailing-content-color: var(
- --md-outlined-field-trailing-content-color,
- var(--md-sys-color-on-surface-variant, #49454f)
- );
- --_trailing-space: var(--md-outlined-field-trailing-space, 16px);
- --_with-leading-content-leading-space: var(
- --md-outlined-field-with-leading-content-leading-space,
- 12px
- );
- --_with-trailing-content-trailing-space: var(
- --md-outlined-field-with-trailing-content-trailing-space,
- 12px
- );
- --_container-shape-start-start: var(
- --md-outlined-field-container-shape-start-start,
- var(
- --md-outlined-field-container-shape,
- var(--md-sys-shape-corner-extra-small, 4px)
- )
- );
- --_container-shape-start-end: var(
- --md-outlined-field-container-shape-start-end,
- var(
- --md-outlined-field-container-shape,
- var(--md-sys-shape-corner-extra-small, 4px)
- )
- );
- --_container-shape-end-end: var(
- --md-outlined-field-container-shape-end-end,
- var(
- --md-outlined-field-container-shape,
- var(--md-sys-shape-corner-extra-small, 4px)
- )
- );
- --_container-shape-end-start: var(
- --md-outlined-field-container-shape-end-start,
- var(
- --md-outlined-field-container-shape,
- var(--md-sys-shape-corner-extra-small, 4px)
- )
- );
+.select {
+ width: 100%;
+ height: 56px;
+ outline: none;
+ min-width: inherit;
+ max-width: inherit;
+ display: flex;
+ position: relative;
+ flex-direction: column;
}
.filled-select {
display: inline-flex;
@@ -1408,16 +1085,7 @@
--_text-field-trailing-icon-color
);
}
-.select {
- width: 100%;
- height: 56px;
- outline: none;
- min-width: inherit;
- max-width: inherit;
- display: flex;
- position: relative;
- flex-direction: column;
-}
+
.select-option {
display: flex;
--md-ripple-hover-color: var(