@veeqo/ui 10.0.0-beta.1 → 10.0.0-beta.3

package/dist/components/Search/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/Search/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { TextField } from '../TextField';\nimport { BaseContainer } from '../BaseContainer';\nimport { Loader } from '../Loader';\n\nconst Input = styled(TextField)`\n  flex-grow: 2;\n  margin-top: 0;\n  margin-bottom: 0;\n`;\n\nconst IconContainer = styled.div`\n  position: absolute;\n`;\n\nconst Container = styled(BaseContainer)<{ iconPosition: 'left' | 'right' }>`\n  position: relative;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  border-radius: 0.25rem;\n\n  ${({ iconPosition }) => {\n    let padding = 'padding-right: 2.5rem;';\n    let position = 'right: 0.5rem;';\n\n    if (iconPosition === 'left') {\n      padding = 'padding-left: 2.5rem';\n      position = 'left: 0.5rem;';\n    }\n\n    return `\n      & ${Input} {\n        ${padding}\n      }\n\n      & ${IconContainer} {\n        ${position}\n      }\n    `;\n  }}\n`;\n\nexport { Container, Input, IconContainer, Loader };\n"],"names":[],"mappings":";;;;;AAMA,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC;AAM/B,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG;AAIhC,MAAM,SAAS,GAAG,MAAM,CAAC,aAAa,CAAC,CAOnC,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,mGAAA,EAAA,CAAC,EAAE,YAAY,EAAE,KAAI;IACrB,IAAI,OAAO,GAAG,wBAAwB;IACtC,IAAI,QAAQ,GAAG,gBAAgB;IAE/B,IAAI,YAAY,KAAK,MAAM,EAAE;QAC3B,OAAO,GAAG,sBAAsB;QAChC,QAAQ,GAAG,eAAe;AAC3B;IAED,OAAO;UACD,KAAK,CAAA;UACL,OAAO;;;UAGP,aAAa,CAAA;UACb,QAAQ;;KAEb;AACH,CAAC;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/Search/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { TextField } from '../TextField';\nimport { BaseContainer } from '../BaseContainer';\nimport { Loader } from '../Loader';\n\nconst Input = styled(TextField)`\n  flex-grow: 2;\n  margin-top: 0;\n  margin-bottom: 0;\n`;\n\nconst IconContainer = styled.div`\n  position: absolute;\n`;\n\nconst Container = styled(BaseContainer)<{ iconPosition: 'left' | 'right' }>`\n  position: relative;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  border-radius: 0.25rem;\n\n  ${({ iconPosition }) => {\n    let padding = 'padding-right: 2.5rem;';\n    let position = 'right: 0.5rem;';\n\n    if (iconPosition === 'left') {\n      padding = 'padding-left: 2.5rem';\n      position = 'left: 0.5rem;';\n    }\n\n    return `\n      & ${Input} {\n        ${padding}\n      }\n\n      & ${IconContainer} {\n        ${position}\n      }\n    `;\n  }}\n`;\n\nexport { Container, Input, IconContainer, Loader };\n"],"names":[],"mappings":";;;;;AAMA,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC;AAM/B,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG;AAIhC,MAAM,SAAS,GAAG,MAAM,CAAC,aAAa,CAAC,CAOnC,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,mGAAA,EAAA,CAAC,EAAE,YAAY,EAAE,KAAI;IACrB,IAAI,OAAO,GAAG,wBAAwB;IACtC,IAAI,QAAQ,GAAG,gBAAgB;IAE/B,IAAI,YAAY,KAAK,MAAM,EAAE;QAC3B,OAAO,GAAG,sBAAsB;QAChC,QAAQ,GAAG,eAAe;AAC3B;IAED,OAAO;UACD,KAAK,CAAA;UACL,OAAO;;;UAGP,aAAa,CAAA;UACb,QAAQ;;KAEb;AACH,CAAC;;;;"}

package/dist/components/SegmentedControl/styled.cjs

@@ -11,7 +11,7 @@ var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 const buttonBackgroundColor = index.theme.colors.neutral.grey.lightest;
 const buttonBorderColor = index.theme.colors.neutral.grey.dark;
 const activeButtonColor = index.theme.colors.secondary.blue.dark;
-const SegmentedControlContainer = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--SegmentedControlContainer", componentId: "vui--mxpi9o" }) `display:flex;flex-direction:row;> button{border-radius:0;box-shadow:none;:active{background-color:${buttonBackgroundColor};border-color:${buttonBorderColor};box-shadow:none;}:focus{box-shadow:0 0 0 4px ${index.theme.colors.secondary.blue.light};outline:0;z-index:1;}}> .veeqo-components-active-button{:active{background-color:${activeButtonColor};border-color:${activeButtonColor};}}> button:not(:first-child){border-left:none;}> .veeqo-components-active-button + button{border-left:1px solid ${index.theme.colors.neutral.grey.dark};}> button:first-child{border-radius:20px 0px 0px 20px;}> button:last-child{border-radius:0px 20px 20px 0px;}`;
+const SegmentedControlContainer = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--SegmentedControlContainer", componentId: "vui--1j15fxp" }) `display:flex;flex-direction:row;> button{border-radius:0;box-shadow:none;:active{background-color:${buttonBackgroundColor};border-color:${buttonBorderColor};box-shadow:none;}:focus{box-shadow:0 0 0 4px ${index.theme.colors.secondary.blue.light};outline:0;z-index:1;}}> .veeqo-components-active-button{:active{background-color:${activeButtonColor};border-color:${activeButtonColor};}}> button:not(:first-child){border-left:none;}> .veeqo-components-active-button + button{border-left:1px solid ${index.theme.colors.neutral.grey.dark};}> button:first-child{border-radius:20px 0px 0px 20px;}> button:last-child{border-radius:0px 20px 20px 0px;}`;
 
 exports.SegmentedControlContainer = SegmentedControlContainer;
 //# sourceMappingURL=styled.cjs.map

package/dist/components/SegmentedControl/styled.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/SegmentedControl/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\n\nimport { BaseContainer } from '../BaseContainer';\n\nconst buttonBackgroundColor = theme.colors.neutral.grey.lightest;\nconst buttonBorderColor = theme.colors.neutral.grey.dark;\n\nconst activeButtonColor = theme.colors.secondary.blue.dark;\n\nexport const SegmentedControlContainer = styled(BaseContainer)`\n  display: flex;\n  flex-direction: row;\n\n  > button {\n    border-radius: 0;\n    box-shadow: none;\n\n    :active {\n      background-color: ${buttonBackgroundColor};\n      border-color: ${buttonBorderColor};\n      box-shadow: none;\n    }\n\n    :focus {\n      box-shadow: 0 0 0 4px ${theme.colors.secondary.blue.light};\n      outline: 0;\n      z-index: 1;\n    }\n  }\n\n  > .veeqo-components-active-button {\n    :active {\n      background-color: ${activeButtonColor};\n      border-color: ${activeButtonColor};\n    }\n  }\n\n  > button:not(:first-child) {\n    border-left: none;\n  }\n\n  > .veeqo-components-active-button + button {\n    border-left: 1px solid ${theme.colors.neutral.grey.dark};\n  }\n\n  > button:first-child {\n    border-radius: 20px 0px 0px 20px;\n  }\n\n  > button:last-child {\n    border-radius: 0px 20px 20px 0px;\n  }\n`;\n"],"names":["theme","styled","BaseContainer"],"mappings":";;;;;;;;;;AAKA,MAAM,qBAAqB,GAAGA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;AAChE,MAAM,iBAAiB,GAAGA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AAExD,MAAM,iBAAiB,GAAGA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;AAE7C,MAAA,yBAAyB,GAAGC,uBAAM,CAACC,2BAAa,CAAC,CASpC,UAAA,CAAA,EAAA,WAAA,EAAA,gCAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,kGAAA,EAAA,qBAAqB,iBACzB,iBAAiB,CAAA,8CAAA,EAKTF,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,kFAAA,EAQrC,iBAAiB,CAAA,cAAA,EACrB,iBAAiB,CASV,iHAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/SegmentedControl/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\n\nimport { BaseContainer } from '../BaseContainer';\n\nconst buttonBackgroundColor = theme.colors.neutral.grey.lightest;\nconst buttonBorderColor = theme.colors.neutral.grey.dark;\n\nconst activeButtonColor = theme.colors.secondary.blue.dark;\n\nexport const SegmentedControlContainer = styled(BaseContainer)`\n  display: flex;\n  flex-direction: row;\n\n  > button {\n    border-radius: 0;\n    box-shadow: none;\n\n    :active {\n      background-color: ${buttonBackgroundColor};\n      border-color: ${buttonBorderColor};\n      box-shadow: none;\n    }\n\n    :focus {\n      box-shadow: 0 0 0 4px ${theme.colors.secondary.blue.light};\n      outline: 0;\n      z-index: 1;\n    }\n  }\n\n  > .veeqo-components-active-button {\n    :active {\n      background-color: ${activeButtonColor};\n      border-color: ${activeButtonColor};\n    }\n  }\n\n  > button:not(:first-child) {\n    border-left: none;\n  }\n\n  > .veeqo-components-active-button + button {\n    border-left: 1px solid ${theme.colors.neutral.grey.dark};\n  }\n\n  > button:first-child {\n    border-radius: 20px 0px 0px 20px;\n  }\n\n  > button:last-child {\n    border-radius: 0px 20px 20px 0px;\n  }\n`;\n"],"names":["theme","styled","BaseContainer"],"mappings":";;;;;;;;;;AAKA,MAAM,qBAAqB,GAAGA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;AAChE,MAAM,iBAAiB,GAAGA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AAExD,MAAM,iBAAiB,GAAGA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;AAE7C,MAAA,yBAAyB,GAAGC,uBAAM,CAACC,2BAAa,CAAC,CASpC,UAAA,CAAA,EAAA,WAAA,EAAA,gCAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,kGAAA,EAAA,qBAAqB,iBACzB,iBAAiB,CAAA,8CAAA,EAKTF,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,kFAAA,EAQrC,iBAAiB,CAAA,cAAA,EACrB,iBAAiB,CASV,iHAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;;;;"}

package/dist/components/SegmentedControl/styled.js

@@ -5,7 +5,7 @@ import { BaseContainer } from '../BaseContainer/BaseContainer.js';
 const buttonBackgroundColor = theme.colors.neutral.grey.lightest;
 const buttonBorderColor = theme.colors.neutral.grey.dark;
 const activeButtonColor = theme.colors.secondary.blue.dark;
-const SegmentedControlContainer = styled(BaseContainer).withConfig({ displayName: "vui--SegmentedControlContainer", componentId: "vui--mxpi9o" }) `display:flex;flex-direction:row;> button{border-radius:0;box-shadow:none;:active{background-color:${buttonBackgroundColor};border-color:${buttonBorderColor};box-shadow:none;}:focus{box-shadow:0 0 0 4px ${theme.colors.secondary.blue.light};outline:0;z-index:1;}}> .veeqo-components-active-button{:active{background-color:${activeButtonColor};border-color:${activeButtonColor};}}> button:not(:first-child){border-left:none;}> .veeqo-components-active-button + button{border-left:1px solid ${theme.colors.neutral.grey.dark};}> button:first-child{border-radius:20px 0px 0px 20px;}> button:last-child{border-radius:0px 20px 20px 0px;}`;
+const SegmentedControlContainer = styled(BaseContainer).withConfig({ displayName: "vui--SegmentedControlContainer", componentId: "vui--1j15fxp" }) `display:flex;flex-direction:row;> button{border-radius:0;box-shadow:none;:active{background-color:${buttonBackgroundColor};border-color:${buttonBorderColor};box-shadow:none;}:focus{box-shadow:0 0 0 4px ${theme.colors.secondary.blue.light};outline:0;z-index:1;}}> .veeqo-components-active-button{:active{background-color:${activeButtonColor};border-color:${activeButtonColor};}}> button:not(:first-child){border-left:none;}> .veeqo-components-active-button + button{border-left:1px solid ${theme.colors.neutral.grey.dark};}> button:first-child{border-radius:20px 0px 0px 20px;}> button:last-child{border-radius:0px 20px 20px 0px;}`;
 
 export { SegmentedControlContainer };
 //# sourceMappingURL=styled.js.map

package/dist/components/SegmentedControl/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/SegmentedControl/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\n\nimport { BaseContainer } from '../BaseContainer';\n\nconst buttonBackgroundColor = theme.colors.neutral.grey.lightest;\nconst buttonBorderColor = theme.colors.neutral.grey.dark;\n\nconst activeButtonColor = theme.colors.secondary.blue.dark;\n\nexport const SegmentedControlContainer = styled(BaseContainer)`\n  display: flex;\n  flex-direction: row;\n\n  > button {\n    border-radius: 0;\n    box-shadow: none;\n\n    :active {\n      background-color: ${buttonBackgroundColor};\n      border-color: ${buttonBorderColor};\n      box-shadow: none;\n    }\n\n    :focus {\n      box-shadow: 0 0 0 4px ${theme.colors.secondary.blue.light};\n      outline: 0;\n      z-index: 1;\n    }\n  }\n\n  > .veeqo-components-active-button {\n    :active {\n      background-color: ${activeButtonColor};\n      border-color: ${activeButtonColor};\n    }\n  }\n\n  > button:not(:first-child) {\n    border-left: none;\n  }\n\n  > .veeqo-components-active-button + button {\n    border-left: 1px solid ${theme.colors.neutral.grey.dark};\n  }\n\n  > button:first-child {\n    border-radius: 20px 0px 0px 20px;\n  }\n\n  > button:last-child {\n    border-radius: 0px 20px 20px 0px;\n  }\n`;\n"],"names":[],"mappings":";;;;AAKA,MAAM,qBAAqB,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;AAChE,MAAM,iBAAiB,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AAExD,MAAM,iBAAiB,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;AAE7C,MAAA,yBAAyB,GAAG,MAAM,CAAC,aAAa,CAAC,CASpC,UAAA,CAAA,EAAA,WAAA,EAAA,gCAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,kGAAA,EAAA,qBAAqB,iBACzB,iBAAiB,CAAA,8CAAA,EAKT,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,kFAAA,EAQrC,iBAAiB,CAAA,cAAA,EACrB,iBAAiB,CASV,iHAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/SegmentedControl/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\n\nimport { BaseContainer } from '../BaseContainer';\n\nconst buttonBackgroundColor = theme.colors.neutral.grey.lightest;\nconst buttonBorderColor = theme.colors.neutral.grey.dark;\n\nconst activeButtonColor = theme.colors.secondary.blue.dark;\n\nexport const SegmentedControlContainer = styled(BaseContainer)`\n  display: flex;\n  flex-direction: row;\n\n  > button {\n    border-radius: 0;\n    box-shadow: none;\n\n    :active {\n      background-color: ${buttonBackgroundColor};\n      border-color: ${buttonBorderColor};\n      box-shadow: none;\n    }\n\n    :focus {\n      box-shadow: 0 0 0 4px ${theme.colors.secondary.blue.light};\n      outline: 0;\n      z-index: 1;\n    }\n  }\n\n  > .veeqo-components-active-button {\n    :active {\n      background-color: ${activeButtonColor};\n      border-color: ${activeButtonColor};\n    }\n  }\n\n  > button:not(:first-child) {\n    border-left: none;\n  }\n\n  > .veeqo-components-active-button + button {\n    border-left: 1px solid ${theme.colors.neutral.grey.dark};\n  }\n\n  > button:first-child {\n    border-radius: 20px 0px 0px 20px;\n  }\n\n  > button:last-child {\n    border-radius: 0px 20px 20px 0px;\n  }\n`;\n"],"names":[],"mappings":";;;;AAKA,MAAM,qBAAqB,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;AAChE,MAAM,iBAAiB,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AAExD,MAAM,iBAAiB,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;AAE7C,MAAA,yBAAyB,GAAG,MAAM,CAAC,aAAa,CAAC,CASpC,UAAA,CAAA,EAAA,WAAA,EAAA,gCAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,kGAAA,EAAA,qBAAqB,iBACzB,iBAAiB,CAAA,8CAAA,EAKT,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,kFAAA,EAQrC,iBAAiB,CAAA,cAAA,EACrB,iBAAiB,CASV,iHAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;;;;"}

package/dist/components/Select/Select.cjs

@@ -14,7 +14,7 @@ const Select = withLabels.withLabels(React.forwardRef(({ className, options, val
             return;
         onChange(e.currentTarget.value);
     }, [onChange]);
-    return (React__default.default.createElement(styled.SelectInput, { className: className, sizeVariant: size, value: value !== null && value !== undefined ? value : undefined, onChange: handleChange, disabled: disabled, hasError: hasError, ref: ref, ...otherProps }, !!options &&
+    return (React__default.default.createElement(styled.SelectInput, { className: className, compact: size === 'sm', value: value !== null && value !== undefined ? value : undefined, onChange: handleChange, disabled: disabled, hasError: hasError, ref: ref, ...otherProps }, !!options &&
         options.map((option) => (React__default.default.createElement("option", { key: option.label, value: option.value, disabled: option.disabled, hidden: option.hidden }, option.label)))));
 }));
 Select.displayName = 'Select';

package/dist/components/Select/Select.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.cjs","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import React, { ChangeEvent, forwardRef, useCallback } from 'react';\n\nimport { SelectInput } from './styled';\nimport { withLabels } from '../../hoc';\n\nexport type SelectOption = {\n  label: string;\n  value: string;\n  disabled?: boolean;\n  hidden?: boolean;\n};\n\nexport interface SelectProps\n  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size' | 'onChange'> {\n  id?: string;\n  className?: string;\n  options: Array<SelectOption>;\n  value?: string;\n  size?: 'sm' | 'base';\n  disabled?: boolean;\n  hasError?: boolean;\n  onChange?: (value: string) => void;\n}\n\nexport const Select = withLabels(\n  forwardRef<HTMLSelectElement, SelectProps>(\n    (\n      { className, options, value, onChange, size, disabled, hasError, ...otherProps }: SelectProps,\n      ref,\n    ) => {\n      const handleChange = useCallback(\n        (e: ChangeEvent<HTMLSelectElement>) => {\n          if (!onChange) return;\n          onChange(e.currentTarget.value);\n        },\n        [onChange],\n      );\n\n      return (\n        <SelectInput\n          className={className}\n          sizeVariant={size}\n          value={value ?? undefined}\n          onChange={handleChange}\n          disabled={disabled}\n          hasError={hasError}\n          ref={ref}\n          {...otherProps}\n        >\n          {!!options &&\n            options.map((option) => (\n              <option\n                key={option.label}\n                value={option.value}\n                disabled={option.disabled}\n                hidden={option.hidden}\n              >\n                {option.label}\n              </option>\n            ))}\n        </SelectInput>\n      );\n    },\n  ),\n);\n\nSelect.displayName = 'Select';\n"],"names":["withLabels","forwardRef","useCallback","React","SelectInput"],"mappings":";;;;;;;;;;AAwBO,MAAM,MAAM,GAAGA,qBAAU,CAC9BC,gBAAU,CACR,CACE,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAe,EAC7F,GAAG,KACD;AACF,IAAA,MAAM,YAAY,GAAGC,iBAAW,CAC9B,CAAC,CAAiC,KAAI;AACpC,QAAA,IAAI,CAAC,QAAQ;YAAE;AACf,QAAA,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC;AACjC,KAAC,EACD,CAAC,QAAQ,CAAC,CACX;AAED,IAAA,QACEC,sBAAC,CAAA,aAAA,CAAAC,kBAAW,IACV,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,IAAI,EACjB,KAAK,EAAE,KAAK,aAAL,KAAK,KAAA,SAAA,GAAL,KAAK,GAAI,SAAS,EACzB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EAAA,GACJ,UAAU,EAEb,EAAA,CAAC,CAAC,OAAO;AACR,QAAA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACjBD,iDACE,GAAG,EAAE,MAAM,CAAC,KAAK,EACjB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,MAAM,EAAE,MAAM,CAAC,MAAM,EAEpB,EAAA,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACQ;AAElB,CAAC,CACF;AAGH,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}
+{"version":3,"file":"Select.cjs","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import React, { ChangeEvent, forwardRef, useCallback } from 'react';\n\nimport { SelectInput } from './styled';\nimport { withLabels } from '../../hoc';\n\nexport type SelectOption = {\n  label: string;\n  value: string;\n  disabled?: boolean;\n  hidden?: boolean;\n};\n\nexport interface SelectProps\n  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size' | 'onChange'> {\n  id?: string;\n  className?: string;\n  options: Array<SelectOption>;\n  value?: string;\n  size?: 'sm' | 'base';\n  disabled?: boolean;\n  hasError?: boolean;\n  onChange?: (value: string) => void;\n}\n\nexport const Select = withLabels(\n  forwardRef<HTMLSelectElement, SelectProps>(\n    (\n      { className, options, value, onChange, size, disabled, hasError, ...otherProps }: SelectProps,\n      ref,\n    ) => {\n      const handleChange = useCallback(\n        (e: ChangeEvent<HTMLSelectElement>) => {\n          if (!onChange) return;\n          onChange(e.currentTarget.value);\n        },\n        [onChange],\n      );\n\n      return (\n        <SelectInput\n          className={className}\n          compact={size === 'sm'}\n          value={value ?? undefined}\n          onChange={handleChange}\n          disabled={disabled}\n          hasError={hasError}\n          ref={ref}\n          {...otherProps}\n        >\n          {!!options &&\n            options.map((option) => (\n              <option\n                key={option.label}\n                value={option.value}\n                disabled={option.disabled}\n                hidden={option.hidden}\n              >\n                {option.label}\n              </option>\n            ))}\n        </SelectInput>\n      );\n    },\n  ),\n);\n\nSelect.displayName = 'Select';\n"],"names":["withLabels","forwardRef","useCallback","React","SelectInput"],"mappings":";;;;;;;;;;AAwBO,MAAM,MAAM,GAAGA,qBAAU,CAC9BC,gBAAU,CACR,CACE,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAe,EAC7F,GAAG,KACD;AACF,IAAA,MAAM,YAAY,GAAGC,iBAAW,CAC9B,CAAC,CAAiC,KAAI;AACpC,QAAA,IAAI,CAAC,QAAQ;YAAE;AACf,QAAA,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC;AACjC,KAAC,EACD,CAAC,QAAQ,CAAC,CACX;IAED,QACEC,qCAACC,kBAAW,EAAA,EACV,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,IAAI,KAAK,IAAI,EACtB,KAAK,EAAE,KAAK,KAAL,IAAA,IAAA,KAAK,iBAAL,KAAK,GAAI,SAAS,EACzB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EAAA,GACJ,UAAU,EAEb,EAAA,CAAC,CAAC,OAAO;AACR,QAAA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACjBD,iDACE,GAAG,EAAE,MAAM,CAAC,KAAK,EACjB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,MAAM,EAAE,MAAM,CAAC,MAAM,EAEpB,EAAA,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACQ;AAElB,CAAC,CACF;AAGH,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}

package/dist/components/Select/Select.js

@@ -8,7 +8,7 @@ const Select = withLabels(forwardRef(({ className, options, value, onChange, siz
             return;
         onChange(e.currentTarget.value);
     }, [onChange]);
-    return (React__default.createElement(SelectInput, { className: className, sizeVariant: size, value: value !== null && value !== undefined ? value : undefined, onChange: handleChange, disabled: disabled, hasError: hasError, ref: ref, ...otherProps }, !!options &&
+    return (React__default.createElement(SelectInput, { className: className, compact: size === 'sm', value: value !== null && value !== undefined ? value : undefined, onChange: handleChange, disabled: disabled, hasError: hasError, ref: ref, ...otherProps }, !!options &&
         options.map((option) => (React__default.createElement("option", { key: option.label, value: option.value, disabled: option.disabled, hidden: option.hidden }, option.label)))));
 }));
 Select.displayName = 'Select';

package/dist/components/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import React, { ChangeEvent, forwardRef, useCallback } from 'react';\n\nimport { SelectInput } from './styled';\nimport { withLabels } from '../../hoc';\n\nexport type SelectOption = {\n  label: string;\n  value: string;\n  disabled?: boolean;\n  hidden?: boolean;\n};\n\nexport interface SelectProps\n  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size' | 'onChange'> {\n  id?: string;\n  className?: string;\n  options: Array<SelectOption>;\n  value?: string;\n  size?: 'sm' | 'base';\n  disabled?: boolean;\n  hasError?: boolean;\n  onChange?: (value: string) => void;\n}\n\nexport const Select = withLabels(\n  forwardRef<HTMLSelectElement, SelectProps>(\n    (\n      { className, options, value, onChange, size, disabled, hasError, ...otherProps }: SelectProps,\n      ref,\n    ) => {\n      const handleChange = useCallback(\n        (e: ChangeEvent<HTMLSelectElement>) => {\n          if (!onChange) return;\n          onChange(e.currentTarget.value);\n        },\n        [onChange],\n      );\n\n      return (\n        <SelectInput\n          className={className}\n          sizeVariant={size}\n          value={value ?? undefined}\n          onChange={handleChange}\n          disabled={disabled}\n          hasError={hasError}\n          ref={ref}\n          {...otherProps}\n        >\n          {!!options &&\n            options.map((option) => (\n              <option\n                key={option.label}\n                value={option.value}\n                disabled={option.disabled}\n                hidden={option.hidden}\n              >\n                {option.label}\n              </option>\n            ))}\n        </SelectInput>\n      );\n    },\n  ),\n);\n\nSelect.displayName = 'Select';\n"],"names":["React"],"mappings":";;;;AAwBO,MAAM,MAAM,GAAG,UAAU,CAC9B,UAAU,CACR,CACE,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAe,EAC7F,GAAG,KACD;AACF,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAiC,KAAI;AACpC,QAAA,IAAI,CAAC,QAAQ;YAAE;AACf,QAAA,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC;AACjC,KAAC,EACD,CAAC,QAAQ,CAAC,CACX;AAED,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,WAAW,IACV,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,IAAI,EACjB,KAAK,EAAE,KAAK,aAAL,KAAK,KAAA,SAAA,GAAL,KAAK,GAAI,SAAS,EACzB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EAAA,GACJ,UAAU,EAEb,EAAA,CAAC,CAAC,OAAO;AACR,QAAA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACjBA,yCACE,GAAG,EAAE,MAAM,CAAC,KAAK,EACjB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,MAAM,EAAE,MAAM,CAAC,MAAM,EAEpB,EAAA,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACQ;AAElB,CAAC,CACF;AAGH,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}
+{"version":3,"file":"Select.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import React, { ChangeEvent, forwardRef, useCallback } from 'react';\n\nimport { SelectInput } from './styled';\nimport { withLabels } from '../../hoc';\n\nexport type SelectOption = {\n  label: string;\n  value: string;\n  disabled?: boolean;\n  hidden?: boolean;\n};\n\nexport interface SelectProps\n  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size' | 'onChange'> {\n  id?: string;\n  className?: string;\n  options: Array<SelectOption>;\n  value?: string;\n  size?: 'sm' | 'base';\n  disabled?: boolean;\n  hasError?: boolean;\n  onChange?: (value: string) => void;\n}\n\nexport const Select = withLabels(\n  forwardRef<HTMLSelectElement, SelectProps>(\n    (\n      { className, options, value, onChange, size, disabled, hasError, ...otherProps }: SelectProps,\n      ref,\n    ) => {\n      const handleChange = useCallback(\n        (e: ChangeEvent<HTMLSelectElement>) => {\n          if (!onChange) return;\n          onChange(e.currentTarget.value);\n        },\n        [onChange],\n      );\n\n      return (\n        <SelectInput\n          className={className}\n          compact={size === 'sm'}\n          value={value ?? undefined}\n          onChange={handleChange}\n          disabled={disabled}\n          hasError={hasError}\n          ref={ref}\n          {...otherProps}\n        >\n          {!!options &&\n            options.map((option) => (\n              <option\n                key={option.label}\n                value={option.value}\n                disabled={option.disabled}\n                hidden={option.hidden}\n              >\n                {option.label}\n              </option>\n            ))}\n        </SelectInput>\n      );\n    },\n  ),\n);\n\nSelect.displayName = 'Select';\n"],"names":["React"],"mappings":";;;;AAwBO,MAAM,MAAM,GAAG,UAAU,CAC9B,UAAU,CACR,CACE,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAe,EAC7F,GAAG,KACD;AACF,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAiC,KAAI;AACpC,QAAA,IAAI,CAAC,QAAQ;YAAE;AACf,QAAA,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC;AACjC,KAAC,EACD,CAAC,QAAQ,CAAC,CACX;IAED,QACEA,6BAAC,WAAW,EAAA,EACV,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,IAAI,KAAK,IAAI,EACtB,KAAK,EAAE,KAAK,KAAL,IAAA,IAAA,KAAK,iBAAL,KAAK,GAAI,SAAS,EACzB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EAAA,GACJ,UAAU,EAEb,EAAA,CAAC,CAAC,OAAO;AACR,QAAA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACjBA,yCACE,GAAG,EAAE,MAAM,CAAC,KAAK,EACjB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,MAAM,EAAE,MAAM,CAAC,MAAM,EAEpB,EAAA,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACQ;AAElB,CAAC,CACF;AAGH,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}

package/dist/components/Select/styled.cjs

@@ -1,23 +1,16 @@
 'use strict';
 
 var styled = require('styled-components');
+var inputStyles = require('../../utils/forms/inputStyles.cjs');
+var index = require('../../theme/index.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const SelectInput = styled__default.default.select.withConfig({ displayName: "vui--SelectInput", componentId: "vui--1h93380" }) `box-sizing:border-box;appearance:none;display:flex;align-items:center;justify-content:center;padding:0 2.5rem 0 0.5rem;border-radius:4px;background-color:white;border:1px solid #959fa8;color:#1b2126;background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0.5em top 50%,0 0;${({ sizeVariant }) => {
-    let height = '40px';
-    let fontSize = '14px';
-    if (sizeVariant === 'sm') {
-        height = '32px';
-        fontSize = '12px';
-    }
-    return `
-      height: ${height};
-      font-size: ${fontSize};
-    `;
-}} &:focus{border-color:#0079d1;box-shadow:0 0 0 4px #80bce8;outline:0;}&:invalid{border-color:#eb5757;box-shadow:0 0 0 4px #f7bcbc;outline:0;}&:disabled{box-shadow:none;background-color:#f2f3f5;border-color:#959fa8;color:#637381;cursor:not-allowed;}`;
+const dropdownIndicatorStyles = styled.css `--padding-right:2.25rem;padding-right:var(--padding-right);background-image:url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0.75rem top 50%,0 0;`;
+const SelectInput = styled__default.default.select.withConfig({ displayName: "vui--SelectInput", componentId: "vui--vw6n0o" }) `${inputStyles.inputFullStyles} ${dropdownIndicatorStyles} &:has(option:disabled:checked){color:${index.theme.colors.neutral.ink.light};}`;
 
 exports.SelectInput = SelectInput;
+exports.dropdownIndicatorStyles = dropdownIndicatorStyles;
 //# sourceMappingURL=styled.cjs.map

package/dist/components/Select/styled.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/Select/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const SelectInput = styled.select<any>`\n  box-sizing: border-box;\n  appearance: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 2.5rem 0 0.5rem;\n  border-radius: 4px;\n  background-color: white;\n  border: 1px solid #959fa8;\n  color: #1b2126;\n  background-image: url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position:\n    right 0.5em top 50%,\n    0 0;\n\n  ${({ sizeVariant }) => {\n    let height = '40px';\n    let fontSize = '14px';\n\n    if (sizeVariant === 'sm') {\n      height = '32px';\n      fontSize = '12px';\n    }\n\n    return `\n      height: ${height};\n      font-size: ${fontSize};\n    `;\n  }}\n\n  &:focus {\n    border-color: #0079d1;\n    box-shadow: 0 0 0 4px #80bce8;\n    outline: 0;\n  }\n\n  &:invalid {\n    border-color: #eb5757;\n    box-shadow: 0 0 0 4px #f7bcbc;\n    outline: 0;\n  }\n\n  &:disabled {\n    box-shadow: none;\n    background-color: #f2f3f5;\n    border-color: #959fa8;\n    color: #637381;\n    cursor: not-allowed;\n  }\n`;\n"],"names":["styled"],"mappings":";;;;;;;;AAEO,MAAM,WAAW,GAAGA,uBAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,ogBAAA,EAiBpC,CAAC,EAAE,WAAW,EAAE,KAAI;IACpB,IAAI,MAAM,GAAG,MAAM;IACnB,IAAI,QAAQ,GAAG,MAAM;IAErB,IAAI,WAAW,KAAK,IAAI,EAAE;QACxB,MAAM,GAAG,MAAM;QACf,QAAQ,GAAG,MAAM;AAClB;IAED,OAAO;gBACK,MAAM,CAAA;mBACH,QAAQ,CAAA;KACtB;AACH,CAAC;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/Select/styled.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { inputFullStyles } from '../../utils/forms/inputStyles';\nimport { theme } from '../../theme';\n\nexport const dropdownIndicatorStyles = css`\n  --padding-right: 2.25rem;\n\n  padding-right: var(--padding-right);\n  background-image: url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position:\n    right 0.75rem top 50%,\n    0 0;\n`;\n\nexport const SelectInput = styled.select<any>`\n  ${inputFullStyles}\n  ${dropdownIndicatorStyles}\n\n  /* Simulate placeholder styles when a disabled option is selected */\n  &:has(option:disabled:checked) {\n    color: ${theme.colors.neutral.ink.light};\n  }\n`;\n"],"names":["css","styled","inputFullStyles","theme"],"mappings":";;;;;;;;;;AAIa,MAAA,uBAAuB,GAAGA,UAAG;MAW7B,WAAW,GAAGC,uBAAM,CAAC,MAAM,CACpC,UAAA,CAAA,EAAA,WAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,EAAAC,2BAAe,CACf,CAAA,EAAA,uBAAuB,yCAIdC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAA,EAAA;;;;;"}

package/dist/components/Select/styled.d.ts

@@ -1 +1,2 @@
+export declare const dropdownIndicatorStyles: import("styled-components").FlattenSimpleInterpolation;
 export declare const SelectInput: import("styled-components").StyledComponent<"select", any, any, never>;

package/dist/components/Select/styled.js

@@ -1,17 +1,9 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
+import { inputFullStyles } from '../../utils/forms/inputStyles.js';
+import { theme } from '../../theme/index.js';
 
-const SelectInput = styled.select.withConfig({ displayName: "vui--SelectInput", componentId: "vui--1h93380" }) `box-sizing:border-box;appearance:none;display:flex;align-items:center;justify-content:center;padding:0 2.5rem 0 0.5rem;border-radius:4px;background-color:white;border:1px solid #959fa8;color:#1b2126;background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0.5em top 50%,0 0;${({ sizeVariant }) => {
-    let height = '40px';
-    let fontSize = '14px';
-    if (sizeVariant === 'sm') {
-        height = '32px';
-        fontSize = '12px';
-    }
-    return `
-      height: ${height};
-      font-size: ${fontSize};
-    `;
-}} &:focus{border-color:#0079d1;box-shadow:0 0 0 4px #80bce8;outline:0;}&:invalid{border-color:#eb5757;box-shadow:0 0 0 4px #f7bcbc;outline:0;}&:disabled{box-shadow:none;background-color:#f2f3f5;border-color:#959fa8;color:#637381;cursor:not-allowed;}`;
+const dropdownIndicatorStyles = css `--padding-right:2.25rem;padding-right:var(--padding-right);background-image:url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0.75rem top 50%,0 0;`;
+const SelectInput = styled.select.withConfig({ displayName: "vui--SelectInput", componentId: "vui--vw6n0o" }) `${inputFullStyles} ${dropdownIndicatorStyles} &:has(option:disabled:checked){color:${theme.colors.neutral.ink.light};}`;
 
-export { SelectInput };
+export { SelectInput, dropdownIndicatorStyles };
 //# sourceMappingURL=styled.js.map

package/dist/components/Select/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/Select/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const SelectInput = styled.select<any>`\n  box-sizing: border-box;\n  appearance: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 2.5rem 0 0.5rem;\n  border-radius: 4px;\n  background-color: white;\n  border: 1px solid #959fa8;\n  color: #1b2126;\n  background-image: url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position:\n    right 0.5em top 50%,\n    0 0;\n\n  ${({ sizeVariant }) => {\n    let height = '40px';\n    let fontSize = '14px';\n\n    if (sizeVariant === 'sm') {\n      height = '32px';\n      fontSize = '12px';\n    }\n\n    return `\n      height: ${height};\n      font-size: ${fontSize};\n    `;\n  }}\n\n  &:focus {\n    border-color: #0079d1;\n    box-shadow: 0 0 0 4px #80bce8;\n    outline: 0;\n  }\n\n  &:invalid {\n    border-color: #eb5757;\n    box-shadow: 0 0 0 4px #f7bcbc;\n    outline: 0;\n  }\n\n  &:disabled {\n    box-shadow: none;\n    background-color: #f2f3f5;\n    border-color: #959fa8;\n    color: #637381;\n    cursor: not-allowed;\n  }\n`;\n"],"names":[],"mappings":";;AAEO,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,ogBAAA,EAiBpC,CAAC,EAAE,WAAW,EAAE,KAAI;IACpB,IAAI,MAAM,GAAG,MAAM;IACnB,IAAI,QAAQ,GAAG,MAAM;IAErB,IAAI,WAAW,KAAK,IAAI,EAAE;QACxB,MAAM,GAAG,MAAM;QACf,QAAQ,GAAG,MAAM;AAClB;IAED,OAAO;gBACK,MAAM,CAAA;mBACH,QAAQ,CAAA;KACtB;AACH,CAAC;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/Select/styled.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { inputFullStyles } from '../../utils/forms/inputStyles';\nimport { theme } from '../../theme';\n\nexport const dropdownIndicatorStyles = css`\n  --padding-right: 2.25rem;\n\n  padding-right: var(--padding-right);\n  background-image: url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position:\n    right 0.75rem top 50%,\n    0 0;\n`;\n\nexport const SelectInput = styled.select<any>`\n  ${inputFullStyles}\n  ${dropdownIndicatorStyles}\n\n  /* Simulate placeholder styles when a disabled option is selected */\n  &:has(option:disabled:checked) {\n    color: ${theme.colors.neutral.ink.light};\n  }\n`;\n"],"names":[],"mappings":";;;;AAIa,MAAA,uBAAuB,GAAG,GAAG;MAW7B,WAAW,GAAG,MAAM,CAAC,MAAM,CACpC,UAAA,CAAA,EAAA,WAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,EAAA,eAAe,CACf,CAAA,EAAA,uBAAuB,yCAId,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAA,EAAA;;;;"}

package/dist/components/SelectDropdown/ListItem/styled.cjs

@@ -15,21 +15,21 @@ const colourStatesMap = {
     pressed: '#E3F0FA',
     disabled: index.theme.colors.neutral.grey.light,
 };
-const StyledListItem = styled__default.default(reactAriaComponents.ListBoxItem).withConfig({ displayName: "vui--StyledListItem", componentId: "vui--yavsc2" }) `border-radius:${index.theme.radius.base};cursor:pointer;background-color:${({ appearance = 'primary' }) => appearance === 'primary' ? 'white' : index.theme.colors.neutral.grey.lightest};text-decoration:none;&[data-hovered] > div{background-color:${colourStatesMap.hovered};}&[data-pressed] > div{background-color:${colourStatesMap.pressed};}&[data-focused]{outline:0;}&[data-focus-visible] > div{outline:solid ${index.theme.sizes.xs} ${index.theme.colors.secondary.blue.light};z-index:1;position:relative;}&[data-dragging]{background-color:${index.theme.colors.neutral.grey.base};border-color:${index.theme.colors.secondary.blue.base};}&[data-drop-target]{background-color:${index.theme.colors.secondary.green.base};border-color:${index.theme.colors.secondary.green.base};}&[data-disabled]{cursor:not-allowed;background-color:${colourStatesMap.disabled};opacity:0.75;}& > div{padding:${index.theme.sizes.sm};border-radius:${index.theme.radius.base};}`;
-styled__default.default(reactAriaComponents.ListBox).withConfig({ displayName: "vui--StyledListBox", componentId: "vui--1ejdbz1" }) `.react-aria-DropIndicator[data-drop-target]{outline:2px solid ${index.theme.colors.secondary.blue.base};}width:100%;`;
+const StyledListItem = styled__default.default(reactAriaComponents.ListBoxItem).withConfig({ displayName: "vui--StyledListItem", componentId: "vui--fgks50" }) `border-radius:${index.theme.radius.base};cursor:pointer;background-color:${({ appearance = 'primary' }) => appearance === 'primary' ? 'white' : index.theme.colors.neutral.grey.lightest};text-decoration:none;&[data-hovered] > div{background-color:${colourStatesMap.hovered};}&[data-pressed] > div{background-color:${colourStatesMap.pressed};}&[data-focused]{outline:0;}&[data-focus-visible] > div{outline:solid ${index.theme.sizes.xs} ${index.theme.colors.secondary.blue.light};z-index:1;position:relative;}&[data-dragging]{background-color:${index.theme.colors.neutral.grey.base};border-color:${index.theme.colors.secondary.blue.base};}&[data-drop-target]{background-color:${index.theme.colors.secondary.green.base};border-color:${index.theme.colors.secondary.green.base};}&[data-disabled]{cursor:not-allowed;background-color:${colourStatesMap.disabled};opacity:0.75;}& > div{padding:${index.theme.sizes.sm};border-radius:${index.theme.radius.base};}`;
+styled__default.default(reactAriaComponents.ListBox).withConfig({ displayName: "vui--StyledListBox", componentId: "vui--1wm6khh" }) `.react-aria-DropIndicator[data-drop-target]{outline:2px solid ${index.theme.colors.secondary.blue.base};}width:100%;`;
 const LinkIcon = styled__default.default(ArrowUpIcon.ArrowUpIcon).attrs({
     width: index.theme.sizes.md,
     height: index.theme.sizes.md,
-}).withConfig({ displayName: "vui--LinkIcon", componentId: "vui--v71fmp" }) `transform:rotate(90deg);color:${index.theme.colors.neutral.ink.base};`;
+}).withConfig({ displayName: "vui--LinkIcon", componentId: "vui--asg6dc" }) `transform:rotate(90deg);color:${index.theme.colors.neutral.ink.base};`;
 const HorizontalContainer = styled__default.default(Stack.Stack).attrs({
     direction: 'horizontal',
     alignY: 'center',
-}).withConfig({ displayName: "vui--HorizontalContainer", componentId: "vui--wvywcl" }) `width:100%;`;
+}).withConfig({ displayName: "vui--HorizontalContainer", componentId: "vui--g6yll3" }) `width:100%;`;
 const VerticalContainer = styled__default.default(Stack.Stack).attrs({
     spacing: 'xs',
-}).withConfig({ displayName: "vui--VerticalContainer", componentId: "vui--y15xnh" }) `width:100%;`;
-const InfoContainer = styled__default.default.div.withConfig({ displayName: "vui--InfoContainer", componentId: "vui--15w3s8y" }) `display:grid;grid-template-columns:${({ hasItemInfoSlot, hasEndInfoSlot }) => hasItemInfoSlot && hasEndInfoSlot ? 'auto 1fr 1fr' : 'auto 1fr'};gap:${index.theme.sizes.sm};width:100%;align-items:center;min-width:0;flex:1;> *:last-child{justify-self:${({ hasEndInfoSlot }) => (hasEndInfoSlot ? 'end' : 'start')};}`;
-const ItemInfoContainer = styled__default.default.div.withConfig({ displayName: "vui--ItemInfoContainer", componentId: "vui--dgqagr" }) `display:flex;flex-direction:row;gap:8px;align-items:center;`;
+}).withConfig({ displayName: "vui--VerticalContainer", componentId: "vui--16ralr7" }) `width:100%;`;
+const InfoContainer = styled__default.default.div.withConfig({ displayName: "vui--InfoContainer", componentId: "vui--1i42fx6" }) `display:grid;grid-template-columns:${({ hasItemInfoSlot, hasEndInfoSlot }) => hasItemInfoSlot && hasEndInfoSlot ? 'auto 1fr 1fr' : 'auto 1fr'};gap:${index.theme.sizes.sm};width:100%;align-items:center;min-width:0;flex:1;> *:last-child{justify-self:${({ hasEndInfoSlot }) => (hasEndInfoSlot ? 'end' : 'start')};}`;
+const ItemInfoContainer = styled__default.default.div.withConfig({ displayName: "vui--ItemInfoContainer", componentId: "vui--15510pk" }) `display:flex;flex-direction:row;gap:8px;align-items:center;`;
 
 exports.HorizontalContainer = HorizontalContainer;
 exports.InfoContainer = InfoContainer;

package/dist/components/SelectDropdown/ListItem/styled.js

@@ -9,21 +9,21 @@ const colourStatesMap = {
     pressed: '#E3F0FA',
     disabled: theme.colors.neutral.grey.light,
 };
-const StyledListItem = styled(ListBoxItem).withConfig({ displayName: "vui--StyledListItem", componentId: "vui--yavsc2" }) `border-radius:${theme.radius.base};cursor:pointer;background-color:${({ appearance = 'primary' }) => appearance === 'primary' ? 'white' : theme.colors.neutral.grey.lightest};text-decoration:none;&[data-hovered] > div{background-color:${colourStatesMap.hovered};}&[data-pressed] > div{background-color:${colourStatesMap.pressed};}&[data-focused]{outline:0;}&[data-focus-visible] > div{outline:solid ${theme.sizes.xs} ${theme.colors.secondary.blue.light};z-index:1;position:relative;}&[data-dragging]{background-color:${theme.colors.neutral.grey.base};border-color:${theme.colors.secondary.blue.base};}&[data-drop-target]{background-color:${theme.colors.secondary.green.base};border-color:${theme.colors.secondary.green.base};}&[data-disabled]{cursor:not-allowed;background-color:${colourStatesMap.disabled};opacity:0.75;}& > div{padding:${theme.sizes.sm};border-radius:${theme.radius.base};}`;
-styled(ListBox).withConfig({ displayName: "vui--StyledListBox", componentId: "vui--1ejdbz1" }) `.react-aria-DropIndicator[data-drop-target]{outline:2px solid ${theme.colors.secondary.blue.base};}width:100%;`;
+const StyledListItem = styled(ListBoxItem).withConfig({ displayName: "vui--StyledListItem", componentId: "vui--fgks50" }) `border-radius:${theme.radius.base};cursor:pointer;background-color:${({ appearance = 'primary' }) => appearance === 'primary' ? 'white' : theme.colors.neutral.grey.lightest};text-decoration:none;&[data-hovered] > div{background-color:${colourStatesMap.hovered};}&[data-pressed] > div{background-color:${colourStatesMap.pressed};}&[data-focused]{outline:0;}&[data-focus-visible] > div{outline:solid ${theme.sizes.xs} ${theme.colors.secondary.blue.light};z-index:1;position:relative;}&[data-dragging]{background-color:${theme.colors.neutral.grey.base};border-color:${theme.colors.secondary.blue.base};}&[data-drop-target]{background-color:${theme.colors.secondary.green.base};border-color:${theme.colors.secondary.green.base};}&[data-disabled]{cursor:not-allowed;background-color:${colourStatesMap.disabled};opacity:0.75;}& > div{padding:${theme.sizes.sm};border-radius:${theme.radius.base};}`;
+styled(ListBox).withConfig({ displayName: "vui--StyledListBox", componentId: "vui--1wm6khh" }) `.react-aria-DropIndicator[data-drop-target]{outline:2px solid ${theme.colors.secondary.blue.base};}width:100%;`;
 const LinkIcon = styled(ArrowUpIcon).attrs({
     width: theme.sizes.md,
     height: theme.sizes.md,
-}).withConfig({ displayName: "vui--LinkIcon", componentId: "vui--v71fmp" }) `transform:rotate(90deg);color:${theme.colors.neutral.ink.base};`;
+}).withConfig({ displayName: "vui--LinkIcon", componentId: "vui--asg6dc" }) `transform:rotate(90deg);color:${theme.colors.neutral.ink.base};`;
 const HorizontalContainer = styled(Stack).attrs({
     direction: 'horizontal',
     alignY: 'center',
-}).withConfig({ displayName: "vui--HorizontalContainer", componentId: "vui--wvywcl" }) `width:100%;`;
+}).withConfig({ displayName: "vui--HorizontalContainer", componentId: "vui--g6yll3" }) `width:100%;`;
 const VerticalContainer = styled(Stack).attrs({
     spacing: 'xs',
-}).withConfig({ displayName: "vui--VerticalContainer", componentId: "vui--y15xnh" }) `width:100%;`;
-const InfoContainer = styled.div.withConfig({ displayName: "vui--InfoContainer", componentId: "vui--15w3s8y" }) `display:grid;grid-template-columns:${({ hasItemInfoSlot, hasEndInfoSlot }) => hasItemInfoSlot && hasEndInfoSlot ? 'auto 1fr 1fr' : 'auto 1fr'};gap:${theme.sizes.sm};width:100%;align-items:center;min-width:0;flex:1;> *:last-child{justify-self:${({ hasEndInfoSlot }) => (hasEndInfoSlot ? 'end' : 'start')};}`;
-const ItemInfoContainer = styled.div.withConfig({ displayName: "vui--ItemInfoContainer", componentId: "vui--dgqagr" }) `display:flex;flex-direction:row;gap:8px;align-items:center;`;
+}).withConfig({ displayName: "vui--VerticalContainer", componentId: "vui--16ralr7" }) `width:100%;`;
+const InfoContainer = styled.div.withConfig({ displayName: "vui--InfoContainer", componentId: "vui--1i42fx6" }) `display:grid;grid-template-columns:${({ hasItemInfoSlot, hasEndInfoSlot }) => hasItemInfoSlot && hasEndInfoSlot ? 'auto 1fr 1fr' : 'auto 1fr'};gap:${theme.sizes.sm};width:100%;align-items:center;min-width:0;flex:1;> *:last-child{justify-self:${({ hasEndInfoSlot }) => (hasEndInfoSlot ? 'end' : 'start')};}`;
+const ItemInfoContainer = styled.div.withConfig({ displayName: "vui--ItemInfoContainer", componentId: "vui--15510pk" }) `display:flex;flex-direction:row;gap:8px;align-items:center;`;
 
 export { HorizontalContainer, InfoContainer, ItemInfoContainer, LinkIcon, StyledListItem, VerticalContainer };
 //# sourceMappingURL=styled.js.map

package/dist/components/SelectDropdown/ListItemSection/styled.cjs

@@ -8,8 +8,8 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const InfoContainer = styled__default.default.div.withConfig({ displayName: "vui--InfoContainer", componentId: "vui--699bks" }) `display:flex;flex-direction:row;align-items:center;gap:${index.theme.sizes.sm};`;
-const StyledSection = styled__default.default(reactAriaComponents.Section).withConfig({ displayName: "vui--StyledSection", componentId: "vui--y61rg1" }) `border-radius:${index.theme.sizes.base};`;
+const InfoContainer = styled__default.default.div.withConfig({ displayName: "vui--InfoContainer", componentId: "vui--1xxb78p" }) `display:flex;flex-direction:row;align-items:center;gap:${index.theme.sizes.sm};`;
+const StyledSection = styled__default.default(reactAriaComponents.Section).withConfig({ displayName: "vui--StyledSection", componentId: "vui--1rci0y7" }) `border-radius:${index.theme.sizes.base};`;
 
 exports.InfoContainer = InfoContainer;
 exports.StyledSection = StyledSection;

package/dist/components/SelectDropdown/ListItemSection/styled.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../../src/components/SelectDropdown/ListItemSection/styled.ts"],"sourcesContent":["import { Section } from 'react-aria-components';\nimport styled from 'styled-components';\nimport { theme } from 'Theme';\n\nexport const InfoContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: ${theme.sizes.sm};\n`;\n\nexport const StyledSection = styled(Section)`\n  border-radius: ${theme.sizes.base};\n`;\n"],"names":["styled","theme","Section"],"mappings":";;;;;;;;;;AAIO,MAAM,aAAa,GAAGA,uBAAM,CAAC,GAAG,CAI9B,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,uDAAA,EAAAC,WAAK,CAAC,KAAK,CAAC,EAAE;AAGhB,MAAM,aAAa,GAAGD,uBAAM,CAACE,2BAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,cAAA,EACzBD,WAAK,CAAC,KAAK,CAAC,IAAI;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../../src/components/SelectDropdown/ListItemSection/styled.ts"],"sourcesContent":["import { Section } from 'react-aria-components';\nimport styled from 'styled-components';\nimport { theme } from 'Theme';\n\nexport const InfoContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: ${theme.sizes.sm};\n`;\n\nexport const StyledSection = styled(Section)`\n  border-radius: ${theme.sizes.base};\n`;\n"],"names":["styled","theme","Section"],"mappings":";;;;;;;;;;AAIO,MAAM,aAAa,GAAGA,uBAAM,CAAC,GAAG,CAI9B,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,uDAAA,EAAAC,WAAK,CAAC,KAAK,CAAC,EAAE;AAGhB,MAAM,aAAa,GAAGD,uBAAM,CAACE,2BAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,cAAA,EACzBD,WAAK,CAAC,KAAK,CAAC,IAAI;;;;;"}

package/dist/components/SelectDropdown/ListItemSection/styled.js

@@ -2,8 +2,8 @@ import { Section } from 'react-aria-components';
 import styled from 'styled-components';
 import { theme } from '../../../theme/index.js';
 
-const InfoContainer = styled.div.withConfig({ displayName: "vui--InfoContainer", componentId: "vui--699bks" }) `display:flex;flex-direction:row;align-items:center;gap:${theme.sizes.sm};`;
-const StyledSection = styled(Section).withConfig({ displayName: "vui--StyledSection", componentId: "vui--y61rg1" }) `border-radius:${theme.sizes.base};`;
+const InfoContainer = styled.div.withConfig({ displayName: "vui--InfoContainer", componentId: "vui--1xxb78p" }) `display:flex;flex-direction:row;align-items:center;gap:${theme.sizes.sm};`;
+const StyledSection = styled(Section).withConfig({ displayName: "vui--StyledSection", componentId: "vui--1rci0y7" }) `border-radius:${theme.sizes.base};`;
 
 export { InfoContainer, StyledSection };
 //# sourceMappingURL=styled.js.map

package/dist/components/SelectDropdown/ListItemSection/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../../src/components/SelectDropdown/ListItemSection/styled.ts"],"sourcesContent":["import { Section } from 'react-aria-components';\nimport styled from 'styled-components';\nimport { theme } from 'Theme';\n\nexport const InfoContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: ${theme.sizes.sm};\n`;\n\nexport const StyledSection = styled(Section)`\n  border-radius: ${theme.sizes.base};\n`;\n"],"names":[],"mappings":";;;;AAIO,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAI9B,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,uDAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE;AAGhB,MAAM,aAAa,GAAG,MAAM,CAAC,OAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,cAAA,EACzB,KAAK,CAAC,KAAK,CAAC,IAAI;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../../src/components/SelectDropdown/ListItemSection/styled.ts"],"sourcesContent":["import { Section } from 'react-aria-components';\nimport styled from 'styled-components';\nimport { theme } from 'Theme';\n\nexport const InfoContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: ${theme.sizes.sm};\n`;\n\nexport const StyledSection = styled(Section)`\n  border-radius: ${theme.sizes.base};\n`;\n"],"names":[],"mappings":";;;;AAIO,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAI9B,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,uDAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE;AAGhB,MAAM,aAAa,GAAG,MAAM,CAAC,OAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,cAAA,EACzB,KAAK,CAAC,KAAK,CAAC,IAAI;;;;"}

package/dist/components/SelectDropdown/SelectDropdown.cjs

@@ -14,7 +14,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const SelectDropdown = ({ id, className, placeholder = 'Select item', multiple = false, compact = false, hasError = false, options, value, actions, isLoading = false, searchValue, emptyStateSlot, onSearchChange, onChange, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...otherProps }) => {
+const SelectDropdown = ({ id, className, placeholder = 'Select item', multiple = false, compact = false, hasError = false, disabled, options, value, actions, isLoading = false, searchValue, emptyStateSlot, onSearchChange, onChange, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...otherProps }) => {
     const hasSection = options.flatMap((option) => option).some((item) => 'items' in item);
     const classNames = utils.generateClassNames(className);
     const [isSelectOpen, setIsSelectOpen] = React.useState(false);
@@ -29,13 +29,8 @@ const SelectDropdown = ({ id, className, placeholder = 'Select item', multiple =
             return;
         setIsSelectOpen(false);
     }, [options, hasSection, onChange, multiple]);
-    return (React__default.default.createElement(styled.StyledDropdown, { id: `select-dropdown-${id}`, className: buildClassnames.buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.popover, className]), shouldShow: isSelectOpen, setShouldShow: setIsSelectOpen, useAnchorWidth: true, hasError: hasError, ctaProps: {
-            className: buildClassnames.buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.button, className]),
-            children: (React__default.default.createElement(SelectedOption.SelectedOption, { placeholder: placeholder, options: selectedValues, selectionMode: selectionMode })),
-            size: compact ? 'sm' : 'base',
-            variant: hasError ? 'destructive' : 'default',
-            type: 'button',
-        } },
+    return (React__default.default.createElement(styled.StyledDropdown, { id: `select-dropdown-${id}`, className: buildClassnames.buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.popover, className]), shouldShow: isSelectOpen, setShouldShow: setIsSelectOpen, useAnchorWidth: true, disabled: disabled, renderCta: (buttonProps, anchorRef) => (React__default.default.createElement(styled.StyledSelectButton, { ...buttonProps, hasError: hasError, compact: compact, type: "button", ref: anchorRef, className: buildClassnames.buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.button, className]) },
+            React__default.default.createElement(SelectedOption.SelectedOption, { placeholder: placeholder, options: selectedValues, selectionMode: selectionMode }))) },
         onSearchChange && (React__default.default.createElement(React__default.default.Fragment, null,
             React__default.default.createElement(styled.StyledSearch, { value: searchValue, onChange: onSearchChange }),
             React__default.default.createElement(styled.Separator, null))),

package/dist/components/SelectDropdown/SelectDropdown.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SelectDropdown.cjs","sources":["../../../src/components/SelectDropdown/SelectDropdown.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport { Key, Selection } from 'react-aria-components';\n\nimport { buildClassnames } from '../../utils';\nimport { SelectedOption } from './components/SelectedOption';\nimport { generateClassNames, getValuesFromKeys } from './utils';\nimport { CTAButton, Separator, StyledDropdown, StyledListBox, StyledSearch } from './styled';\nimport { SelectDropdownItem, SelectDropdownProps } from './types';\nimport { ListItemSection, ListItemSectionProps } from './ListItemSection/ListItemSection';\nimport { ListItem } from './ListItem';\nimport { ListItemProps } from './ListItem/types';\nimport { SelectDropdownState } from './components/SelectDropdownState';\n\nexport const SelectDropdown = ({\n  id,\n  className,\n  placeholder = 'Select item',\n  multiple = false,\n  compact = false,\n  hasError = false,\n  options,\n  value,\n  actions,\n  isLoading = false,\n  searchValue,\n  emptyStateSlot,\n  onSearchChange,\n  onChange,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...otherProps\n}: SelectDropdownProps) => {\n  const hasSection = options.flatMap((option) => option).some((item) => 'items' in item);\n  const classNames = generateClassNames(className);\n\n  const [isSelectOpen, setIsSelectOpen] = useState(false);\n  const [selectedValues, setSelectedValues] = useState<SelectDropdownItem[]>(\n    getValuesFromKeys(options, hasSection, value),\n  );\n  const selectionMode = multiple ? 'multiple' : 'single';\n\n  const onSelectionChange = useCallback(\n    (keys: Selection) => {\n      const selectedKeys = Array.from(keys) as Key[];\n      const newSelectedValues = getValuesFromKeys(options, hasSection, selectedKeys);\n      setSelectedValues(newSelectedValues);\n      onChange(newSelectedValues);\n\n      if (multiple) return;\n      setIsSelectOpen(false);\n    },\n    [options, hasSection, onChange, multiple],\n  );\n\n  return (\n    <StyledDropdown\n      id={`select-dropdown-${id}`}\n      className={buildClassnames([classNames?.popover, className])}\n      shouldShow={isSelectOpen}\n      setShouldShow={setIsSelectOpen}\n      useAnchorWidth\n      hasError={hasError}\n      ctaProps={{\n        className: buildClassnames([classNames?.button, className]),\n        children: (\n          <SelectedOption\n            placeholder={placeholder}\n            options={selectedValues}\n            selectionMode={selectionMode}\n          />\n        ),\n        size: compact ? 'sm' : 'base',\n        variant: hasError ? 'destructive' : 'default',\n        type: 'button',\n      }}\n    >\n      {onSearchChange && (\n        <>\n          <StyledSearch value={searchValue} onChange={onSearchChange} />\n          <Separator />\n        </>\n      )}\n      <StyledListBox\n        className={buildClassnames([classNames?.optionsContainer, className])}\n        aria-labelledby={ariaLabelledBy ?? `${id}-label`}\n        aria-describedby={ariaDescribedBy ?? `${id}-hint`}\n        selectionMode={selectionMode}\n        items={options}\n        onSelectionChange={onSelectionChange}\n        selectedKeys={selectedValues.map((selectedValue) => selectedValue.id) as Key[]}\n        renderEmptyState={() => (\n          <SelectDropdownState isLoading={isLoading} emptyStateSlot={emptyStateSlot} />\n        )}\n        {...otherProps}\n      >\n        {(item) =>\n          hasSection ? (\n            <ListItemSection {...(item as ListItemSectionProps)} />\n          ) : (\n            <ListItem {...(item as ListItemProps)} />\n          )\n        }\n      </StyledListBox>\n      {actions?.map(({ label, ...props }) => (\n        <>\n          <Separator key={`seperator-${label}`} />\n          <CTAButton key={label} {...props} />\n        </>\n      ))}\n    </StyledDropdown>\n  );\n};\n"],"names":["generateClassNames","useState","getValuesFromKeys","useCallback","React","StyledDropdown","buildClassnames","SelectedOption","StyledSearch","Separator","StyledListBox","SelectDropdownState","ListItemSection","ListItem","CTAButton"],"mappings":"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"}
+{"version":3,"file":"SelectDropdown.cjs","sources":["../../../src/components/SelectDropdown/SelectDropdown.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport { Key, Selection } from 'react-aria-components';\n\nimport { buildClassnames } from '../../utils';\nimport { SelectedOption } from './components/SelectedOption';\nimport { generateClassNames, getValuesFromKeys } from './utils';\nimport {\n  CTAButton,\n  Separator,\n  StyledDropdown,\n  StyledSelectButton,\n  StyledListBox,\n  StyledSearch,\n} from './styled';\nimport { SelectDropdownItem, SelectDropdownProps } from './types';\nimport { ListItemSection, ListItemSectionProps } from './ListItemSection/ListItemSection';\nimport { ListItem } from './ListItem';\nimport { ListItemProps } from './ListItem/types';\nimport { SelectDropdownState } from './components/SelectDropdownState';\n\nexport const SelectDropdown = ({\n  id,\n  className,\n  placeholder = 'Select item',\n  multiple = false,\n  compact = false,\n  hasError = false,\n  disabled,\n  options,\n  value,\n  actions,\n  isLoading = false,\n  searchValue,\n  emptyStateSlot,\n  onSearchChange,\n  onChange,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...otherProps\n}: SelectDropdownProps) => {\n  const hasSection = options.flatMap((option) => option).some((item) => 'items' in item);\n  const classNames = generateClassNames(className);\n\n  const [isSelectOpen, setIsSelectOpen] = useState(false);\n  const [selectedValues, setSelectedValues] = useState<SelectDropdownItem[]>(\n    getValuesFromKeys(options, hasSection, value),\n  );\n  const selectionMode = multiple ? 'multiple' : 'single';\n\n  const onSelectionChange = useCallback(\n    (keys: Selection) => {\n      const selectedKeys = Array.from(keys) as Key[];\n      const newSelectedValues = getValuesFromKeys(options, hasSection, selectedKeys);\n      setSelectedValues(newSelectedValues);\n      onChange(newSelectedValues);\n\n      if (multiple) return;\n      setIsSelectOpen(false);\n    },\n    [options, hasSection, onChange, multiple],\n  );\n\n  return (\n    <StyledDropdown\n      id={`select-dropdown-${id}`}\n      className={buildClassnames([classNames?.popover, className])}\n      shouldShow={isSelectOpen}\n      setShouldShow={setIsSelectOpen}\n      useAnchorWidth\n      disabled={disabled}\n      renderCta={(buttonProps, anchorRef) => (\n        <StyledSelectButton\n          {...buttonProps}\n          hasError={hasError}\n          compact={compact}\n          type=\"button\"\n          ref={anchorRef}\n          className={buildClassnames([classNames?.button, className])}\n        >\n          <SelectedOption\n            placeholder={placeholder}\n            options={selectedValues}\n            selectionMode={selectionMode}\n          />\n        </StyledSelectButton>\n      )}\n    >\n      {onSearchChange && (\n        <>\n          <StyledSearch value={searchValue} onChange={onSearchChange} />\n          <Separator />\n        </>\n      )}\n      <StyledListBox\n        className={buildClassnames([classNames?.optionsContainer, className])}\n        aria-labelledby={ariaLabelledBy ?? `${id}-label`}\n        aria-describedby={ariaDescribedBy ?? `${id}-hint`}\n        selectionMode={selectionMode}\n        items={options}\n        onSelectionChange={onSelectionChange}\n        selectedKeys={selectedValues.map((selectedValue) => selectedValue.id) as Key[]}\n        renderEmptyState={() => (\n          <SelectDropdownState isLoading={isLoading} emptyStateSlot={emptyStateSlot} />\n        )}\n        {...otherProps}\n      >\n        {(item) =>\n          hasSection ? (\n            <ListItemSection {...(item as ListItemSectionProps)} />\n          ) : (\n            <ListItem {...(item as ListItemProps)} />\n          )\n        }\n      </StyledListBox>\n      {actions?.map(({ label, ...props }) => (\n        <>\n          <Separator key={`seperator-${label}`} />\n          <CTAButton key={label} {...props} />\n        </>\n      ))}\n    </StyledDropdown>\n  );\n};\n"],"names":["generateClassNames","useState","getValuesFromKeys","useCallback","React","StyledDropdown","buildClassnames","StyledSelectButton","SelectedOption","StyledSearch","Separator","StyledListBox","SelectDropdownState","ListItemSection","ListItem","CTAButton"],"mappings":"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"}

package/dist/components/SelectDropdown/SelectDropdown.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { SelectDropdownProps } from './types';
-export declare const SelectDropdown: ({ id, className, placeholder, multiple, compact, hasError, options, value, actions, isLoading, searchValue, emptyStateSlot, onSearchChange, onChange, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...otherProps }: SelectDropdownProps) => React.JSX.Element;
+export declare const SelectDropdown: ({ id, className, placeholder, multiple, compact, hasError, disabled, options, value, actions, isLoading, searchValue, emptyStateSlot, onSearchChange, onChange, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...otherProps }: SelectDropdownProps) => React.JSX.Element;

package/dist/components/SelectDropdown/SelectDropdown.js

@@ -3,12 +3,12 @@ import { buildClassnames } from '../../utils/buildClassnames.js';
 import 'uid/secure';
 import { SelectedOption } from './components/SelectedOption.js';
 import { getValuesFromKeys, generateClassNames } from './utils.js';
-import { StyledDropdown, StyledSearch, Separator, StyledListBox, CTAButton } from './styled.js';
+import { StyledDropdown, StyledSelectButton, StyledSearch, Separator, StyledListBox, CTAButton } from './styled.js';
 import { ListItemSection } from './ListItemSection/ListItemSection.js';
 import { ListItem } from './ListItem/ListItem.js';
 import { SelectDropdownState } from './components/SelectDropdownState.js';
 
-const SelectDropdown = ({ id, className, placeholder = 'Select item', multiple = false, compact = false, hasError = false, options, value, actions, isLoading = false, searchValue, emptyStateSlot, onSearchChange, onChange, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...otherProps }) => {
+const SelectDropdown = ({ id, className, placeholder = 'Select item', multiple = false, compact = false, hasError = false, disabled, options, value, actions, isLoading = false, searchValue, emptyStateSlot, onSearchChange, onChange, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...otherProps }) => {
     const hasSection = options.flatMap((option) => option).some((item) => 'items' in item);
     const classNames = generateClassNames(className);
     const [isSelectOpen, setIsSelectOpen] = useState(false);
@@ -23,13 +23,8 @@ const SelectDropdown = ({ id, className, placeholder = 'Select item', multiple =
             return;
         setIsSelectOpen(false);
     }, [options, hasSection, onChange, multiple]);
-    return (React__default.createElement(StyledDropdown, { id: `select-dropdown-${id}`, className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.popover, className]), shouldShow: isSelectOpen, setShouldShow: setIsSelectOpen, useAnchorWidth: true, hasError: hasError, ctaProps: {
-            className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.button, className]),
-            children: (React__default.createElement(SelectedOption, { placeholder: placeholder, options: selectedValues, selectionMode: selectionMode })),
-            size: compact ? 'sm' : 'base',
-            variant: hasError ? 'destructive' : 'default',
-            type: 'button',
-        } },
+    return (React__default.createElement(StyledDropdown, { id: `select-dropdown-${id}`, className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.popover, className]), shouldShow: isSelectOpen, setShouldShow: setIsSelectOpen, useAnchorWidth: true, disabled: disabled, renderCta: (buttonProps, anchorRef) => (React__default.createElement(StyledSelectButton, { ...buttonProps, hasError: hasError, compact: compact, type: "button", ref: anchorRef, className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.button, className]) },
+            React__default.createElement(SelectedOption, { placeholder: placeholder, options: selectedValues, selectionMode: selectionMode }))) },
         onSearchChange && (React__default.createElement(React__default.Fragment, null,
             React__default.createElement(StyledSearch, { value: searchValue, onChange: onSearchChange }),
             React__default.createElement(Separator, null))),

package/dist/components/SelectDropdown/SelectDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectDropdown.js","sources":["../../../src/components/SelectDropdown/SelectDropdown.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport { Key, Selection } from 'react-aria-components';\n\nimport { buildClassnames } from '../../utils';\nimport { SelectedOption } from './components/SelectedOption';\nimport { generateClassNames, getValuesFromKeys } from './utils';\nimport { CTAButton, Separator, StyledDropdown, StyledListBox, StyledSearch } from './styled';\nimport { SelectDropdownItem, SelectDropdownProps } from './types';\nimport { ListItemSection, ListItemSectionProps } from './ListItemSection/ListItemSection';\nimport { ListItem } from './ListItem';\nimport { ListItemProps } from './ListItem/types';\nimport { SelectDropdownState } from './components/SelectDropdownState';\n\nexport const SelectDropdown = ({\n  id,\n  className,\n  placeholder = 'Select item',\n  multiple = false,\n  compact = false,\n  hasError = false,\n  options,\n  value,\n  actions,\n  isLoading = false,\n  searchValue,\n  emptyStateSlot,\n  onSearchChange,\n  onChange,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...otherProps\n}: SelectDropdownProps) => {\n  const hasSection = options.flatMap((option) => option).some((item) => 'items' in item);\n  const classNames = generateClassNames(className);\n\n  const [isSelectOpen, setIsSelectOpen] = useState(false);\n  const [selectedValues, setSelectedValues] = useState<SelectDropdownItem[]>(\n    getValuesFromKeys(options, hasSection, value),\n  );\n  const selectionMode = multiple ? 'multiple' : 'single';\n\n  const onSelectionChange = useCallback(\n    (keys: Selection) => {\n      const selectedKeys = Array.from(keys) as Key[];\n      const newSelectedValues = getValuesFromKeys(options, hasSection, selectedKeys);\n      setSelectedValues(newSelectedValues);\n      onChange(newSelectedValues);\n\n      if (multiple) return;\n      setIsSelectOpen(false);\n    },\n    [options, hasSection, onChange, multiple],\n  );\n\n  return (\n    <StyledDropdown\n      id={`select-dropdown-${id}`}\n      className={buildClassnames([classNames?.popover, className])}\n      shouldShow={isSelectOpen}\n      setShouldShow={setIsSelectOpen}\n      useAnchorWidth\n      hasError={hasError}\n      ctaProps={{\n        className: buildClassnames([classNames?.button, className]),\n        children: (\n          <SelectedOption\n            placeholder={placeholder}\n            options={selectedValues}\n            selectionMode={selectionMode}\n          />\n        ),\n        size: compact ? 'sm' : 'base',\n        variant: hasError ? 'destructive' : 'default',\n        type: 'button',\n      }}\n    >\n      {onSearchChange && (\n        <>\n          <StyledSearch value={searchValue} onChange={onSearchChange} />\n          <Separator />\n        </>\n      )}\n      <StyledListBox\n        className={buildClassnames([classNames?.optionsContainer, className])}\n        aria-labelledby={ariaLabelledBy ?? `${id}-label`}\n        aria-describedby={ariaDescribedBy ?? `${id}-hint`}\n        selectionMode={selectionMode}\n        items={options}\n        onSelectionChange={onSelectionChange}\n        selectedKeys={selectedValues.map((selectedValue) => selectedValue.id) as Key[]}\n        renderEmptyState={() => (\n          <SelectDropdownState isLoading={isLoading} emptyStateSlot={emptyStateSlot} />\n        )}\n        {...otherProps}\n      >\n        {(item) =>\n          hasSection ? (\n            <ListItemSection {...(item as ListItemSectionProps)} />\n          ) : (\n            <ListItem {...(item as ListItemProps)} />\n          )\n        }\n      </StyledListBox>\n      {actions?.map(({ label, ...props }) => (\n        <>\n          <Separator key={`seperator-${label}`} />\n          <CTAButton key={label} {...props} />\n        </>\n      ))}\n    </StyledDropdown>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"SelectDropdown.js","sources":["../../../src/components/SelectDropdown/SelectDropdown.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport { Key, Selection } from 'react-aria-components';\n\nimport { buildClassnames } from '../../utils';\nimport { SelectedOption } from './components/SelectedOption';\nimport { generateClassNames, getValuesFromKeys } from './utils';\nimport {\n  CTAButton,\n  Separator,\n  StyledDropdown,\n  StyledSelectButton,\n  StyledListBox,\n  StyledSearch,\n} from './styled';\nimport { SelectDropdownItem, SelectDropdownProps } from './types';\nimport { ListItemSection, ListItemSectionProps } from './ListItemSection/ListItemSection';\nimport { ListItem } from './ListItem';\nimport { ListItemProps } from './ListItem/types';\nimport { SelectDropdownState } from './components/SelectDropdownState';\n\nexport const SelectDropdown = ({\n  id,\n  className,\n  placeholder = 'Select item',\n  multiple = false,\n  compact = false,\n  hasError = false,\n  disabled,\n  options,\n  value,\n  actions,\n  isLoading = false,\n  searchValue,\n  emptyStateSlot,\n  onSearchChange,\n  onChange,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...otherProps\n}: SelectDropdownProps) => {\n  const hasSection = options.flatMap((option) => option).some((item) => 'items' in item);\n  const classNames = generateClassNames(className);\n\n  const [isSelectOpen, setIsSelectOpen] = useState(false);\n  const [selectedValues, setSelectedValues] = useState<SelectDropdownItem[]>(\n    getValuesFromKeys(options, hasSection, value),\n  );\n  const selectionMode = multiple ? 'multiple' : 'single';\n\n  const onSelectionChange = useCallback(\n    (keys: Selection) => {\n      const selectedKeys = Array.from(keys) as Key[];\n      const newSelectedValues = getValuesFromKeys(options, hasSection, selectedKeys);\n      setSelectedValues(newSelectedValues);\n      onChange(newSelectedValues);\n\n      if (multiple) return;\n      setIsSelectOpen(false);\n    },\n    [options, hasSection, onChange, multiple],\n  );\n\n  return (\n    <StyledDropdown\n      id={`select-dropdown-${id}`}\n      className={buildClassnames([classNames?.popover, className])}\n      shouldShow={isSelectOpen}\n      setShouldShow={setIsSelectOpen}\n      useAnchorWidth\n      disabled={disabled}\n      renderCta={(buttonProps, anchorRef) => (\n        <StyledSelectButton\n          {...buttonProps}\n          hasError={hasError}\n          compact={compact}\n          type=\"button\"\n          ref={anchorRef}\n          className={buildClassnames([classNames?.button, className])}\n        >\n          <SelectedOption\n            placeholder={placeholder}\n            options={selectedValues}\n            selectionMode={selectionMode}\n          />\n        </StyledSelectButton>\n      )}\n    >\n      {onSearchChange && (\n        <>\n          <StyledSearch value={searchValue} onChange={onSearchChange} />\n          <Separator />\n        </>\n      )}\n      <StyledListBox\n        className={buildClassnames([classNames?.optionsContainer, className])}\n        aria-labelledby={ariaLabelledBy ?? `${id}-label`}\n        aria-describedby={ariaDescribedBy ?? `${id}-hint`}\n        selectionMode={selectionMode}\n        items={options}\n        onSelectionChange={onSelectionChange}\n        selectedKeys={selectedValues.map((selectedValue) => selectedValue.id) as Key[]}\n        renderEmptyState={() => (\n          <SelectDropdownState isLoading={isLoading} emptyStateSlot={emptyStateSlot} />\n        )}\n        {...otherProps}\n      >\n        {(item) =>\n          hasSection ? (\n            <ListItemSection {...(item as ListItemSectionProps)} />\n          ) : (\n            <ListItem {...(item as ListItemProps)} />\n          )\n        }\n      </StyledListBox>\n      {actions?.map(({ label, ...props }) => (\n        <>\n          <Separator key={`seperator-${label}`} />\n          <CTAButton key={label} {...props} />\n        </>\n      ))}\n    </StyledDropdown>\n  );\n};\n"],"names":["React"],"mappings":"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"}

package/dist/components/SelectDropdown/index.d.ts

@@ -10,6 +10,7 @@ export declare const SelectDropdown: import("react").FC<{
     multiple?: boolean | undefined;
     compact?: boolean | undefined;
     hasError?: boolean | undefined;
+    disabled?: boolean | undefined;
     options: import("./types").SelectDropdownItem[];
     emptyStateSlot?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     isLoading?: boolean | undefined;

package/dist/components/SelectDropdown/styled.cjs

@@ -1,39 +1,33 @@
 'use strict';
 
 var styled = require('styled-components');
-var index = require('../../theme/index.cjs');
 var reactAriaComponents = require('react-aria-components');
+var index = require('../../theme/index.cjs');
+var inputStyles = require('../../utils/forms/inputStyles.cjs');
 var Button = require('../Button/Button.cjs');
 var Dropdown = require('../Dropdown/Dropdown.cjs');
 var Search = require('../Search/Search.cjs');
+var styled$1 = require('../Select/styled.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const StyledListBox = styled__default.default(reactAriaComponents.ListBox).withConfig({ displayName: "vui--StyledListBox", componentId: "vui--8u3k3v" }) `overflow-y:scroll;max-height:300px;padding:${index.theme.sizes.sm};scroll-padding:${index.theme.sizes.xs} 0;&[data-empty]{display:flex;align-items:center;justify-content:center;}`;
-const StyledDropdown = styled__default.default(Dropdown.Dropdown).attrs((props) => ({
-    ctaProps: {
-        ...props.ctaProps,
-        style: {
-            padding: index.theme.sizes[3],
-            border: `1px solid ${props.hasError ? index.theme.colors.secondary.red.base : 'none'}`,
-        },
-        contentStyles: {
-            justifyContent: 'space-between',
-            flex: 1,
-        },
-    },
-})).withConfig({ displayName: "vui--StyledDropdown", componentId: "vui--1au29pg" }) `padding:0;`;
-const StyledSearch = styled__default.default(Search.Search).withConfig({ displayName: "vui--StyledSearch", componentId: "vui--1mbksln" }) `margin:${index.theme.sizes.sm};`;
-const Separator = styled__default.default.hr.withConfig({ displayName: "vui--Separator", componentId: "vui--y8yx6s" }) `height:1px;background:${index.theme.colors.neutral.grey.base};border:none;margin:0 0;width:100%;`;
+const StyledListBox = styled__default.default(reactAriaComponents.ListBox).withConfig({ displayName: "vui--StyledListBox", componentId: "vui--1yki6jj" }) `overflow-y:scroll;max-height:300px;padding:${index.theme.sizes.sm};scroll-padding:${index.theme.sizes.xs} 0;&[data-empty]{display:flex;align-items:center;justify-content:center;}`;
+const StyledDropdown = styled__default.default(Dropdown.Dropdown).withConfig({ displayName: "vui--StyledDropdown", componentId: "vui--1y837ee" }) `padding:0;`;
+// Create a styled button that uses the base input styles and the dropdown indicator styles
+// to replicate the `<Select>` component's appearance.
+const StyledSelectButton = styled__default.default.button.withConfig({ displayName: "vui--StyledSelectButton", componentId: "vui--1048pyr" }) `${inputStyles.inputFullStyles} ${styled$1.dropdownIndicatorStyles}`;
+const StyledSearch = styled__default.default(Search.Search).withConfig({ displayName: "vui--StyledSearch", componentId: "vui--18mma9h" }) `margin:${index.theme.sizes.sm};`;
+const Separator = styled__default.default.hr.withConfig({ displayName: "vui--Separator", componentId: "vui--1dp7yp3" }) `height:1px;background:${index.theme.colors.neutral.grey.base};border:none;margin:0 0;width:100%;`;
 const CTAButton = styled__default.default(Button.Button).attrs({
     variant: 'flat',
-}).withConfig({ displayName: "vui--CTAButton", componentId: "vui--jmck4k" }) `justify-content:start;padding-left:${index.theme.sizes.xs};margin:${index.theme.sizes.sm} ${index.theme.sizes.xs};border-radius:${index.theme.radius.base};font-size:14px;svg{width:${index.theme.sizes.md};height:${index.theme.sizes.md};}`;
+}).withConfig({ displayName: "vui--CTAButton", componentId: "vui--no46x0" }) `justify-content:start;padding-left:${index.theme.sizes.xs};margin:${index.theme.sizes.sm} ${index.theme.sizes.xs};border-radius:${index.theme.radius.base};font-size:14px;svg{width:${index.theme.sizes.md};height:${index.theme.sizes.md};}`;
 
 exports.CTAButton = CTAButton;
 exports.Separator = Separator;
 exports.StyledDropdown = StyledDropdown;
 exports.StyledListBox = StyledListBox;
 exports.StyledSearch = StyledSearch;
+exports.StyledSelectButton = StyledSelectButton;
 //# sourceMappingURL=styled.cjs.map

package/dist/components/SelectDropdown/styled.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/SelectDropdown/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from 'Theme';\nimport { ListBox } from 'react-aria-components';\nimport { Button } from '../Button';\nimport { Dropdown } from '../Dropdown';\nimport { Search } from '../Search';\nimport { DropdownProps } from '../Dropdown/types';\n\nexport const StyledListBox = styled(ListBox)`\n  overflow-y: scroll;\n  max-height: 300px;\n  padding: ${theme.sizes.sm};\n  scroll-padding: ${theme.sizes.xs} 0;\n\n  &[data-empty] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n`;\n\nexport const StyledDropdown: React.FC<DropdownProps & { hasError: boolean }> = styled(\n  Dropdown,\n).attrs<{ hasError: boolean }>((props) => ({\n  ctaProps: {\n    ...props.ctaProps,\n    style: {\n      padding: theme.sizes[3],\n      border: `1px solid ${props.hasError ? theme.colors.secondary.red.base : 'none'}`,\n    },\n    contentStyles: {\n      justifyContent: 'space-between',\n      flex: 1,\n    },\n  },\n}))`\n  padding: 0;\n`;\n\nexport const StyledSearch = styled(Search)`\n  margin: ${theme.sizes.sm};\n`;\n\nexport const Separator = styled.hr`\n  height: 1px;\n  background: ${theme.colors.neutral.grey.base};\n  border: none;\n  margin: 0 0;\n  width: 100%;\n`;\n\nexport const CTAButton = styled(Button).attrs({\n  variant: 'flat',\n})`\n  justify-content: start;\n  padding-left: ${theme.sizes.xs};\n  margin: ${theme.sizes.sm} ${theme.sizes.xs};\n  border-radius: ${theme.radius.base};\n  font-size: 14px;\n  svg {\n    width: ${theme.sizes.md};\n    height: ${theme.sizes.md};\n  }\n`;\n"],"names":["styled","ListBox","theme","Dropdown","Search","Button"],"mappings":";;;;;;;;;;;;;MAQa,aAAa,GAAGA,uBAAM,CAACC,2BAAO,CAAC,CAG/B,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2CAAA,EAAAC,WAAK,CAAC,KAAK,CAAC,EAAE,CACP,gBAAA,EAAAA,WAAK,CAAC,KAAK,CAAC,EAAE,CAAA,yEAAA;AASrB,MAAA,cAAc,GAAoDF,uBAAM,CACnFG,iBAAQ,CACT,CAAC,KAAK,CAAwB,CAAC,KAAK,MAAM;AACzC,IAAA,QAAQ,EAAE;QACR,GAAG,KAAK,CAAC,QAAQ;AACjB,QAAA,KAAK,EAAE;AACL,YAAA,OAAO,EAAED,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC;YACvB,MAAM,EAAE,aAAa,KAAK,CAAC,QAAQ,GAAGA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,GAAG,MAAM,CAAE,CAAA;AACjF,SAAA;AACD,QAAA,aAAa,EAAE;AACb,YAAA,cAAc,EAAE,eAAe;AAC/B,YAAA,IAAI,EAAE,CAAC;AACR,SAAA;AACF,KAAA;CACF,CAAC,CAAC;AAII,MAAM,YAAY,GAAGF,uBAAM,CAACI,aAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,OAAA,EAC9BF,WAAK,CAAC,KAAK,CAAC,EAAE;AAGb,MAAA,SAAS,GAAGF,uBAAM,CAAC,EAAE,CAElB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,sBAAA,EAAAE,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AAMjC,MAAA,SAAS,GAAGF,uBAAM,CAACK,aAAM,CAAC,CAAC,KAAK,CAAC;AAC5C,IAAA,OAAO,EAAE,MAAM;AAChB,CAAA,CAAC,iHAEgBH,WAAK,CAAC,KAAK,CAAC,EAAE,CACpB,QAAA,EAAAA,WAAK,CAAC,KAAK,CAAC,EAAE,CAAA,CAAA,EAAIA,WAAK,CAAC,KAAK,CAAC,EAAE,CACzB,eAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,IAAI,CAAA,0BAAA,EAGvBA,WAAK,CAAC,KAAK,CAAC,EAAE,WACbA,WAAK,CAAC,KAAK,CAAC,EAAE;;;;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/SelectDropdown/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { ListBox } from 'react-aria-components';\nimport { theme } from '../../theme';\nimport { inputFullStyles } from '../../utils/forms/inputStyles';\nimport { Button } from '../Button';\nimport { Dropdown } from '../Dropdown';\nimport { Search } from '../Search';\nimport { dropdownIndicatorStyles } from '../Select/styled';\n\nexport const StyledListBox = styled(ListBox)`\n  overflow-y: scroll;\n  max-height: 300px;\n  padding: ${theme.sizes.sm};\n  scroll-padding: ${theme.sizes.xs} 0;\n\n  &[data-empty] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n`;\n\nexport const StyledDropdown = styled(Dropdown)`\n  padding: 0;\n`;\n\n// Create a styled button that uses the base input styles and the dropdown indicator styles\n// to replicate the `<Select>` component's appearance.\nexport const StyledSelectButton = styled.button`\n  ${inputFullStyles}\n  ${dropdownIndicatorStyles}\n`;\n\nexport const StyledSearch = styled(Search)`\n  margin: ${theme.sizes.sm};\n`;\n\nexport const Separator = styled.hr`\n  height: 1px;\n  background: ${theme.colors.neutral.grey.base};\n  border: none;\n  margin: 0 0;\n  width: 100%;\n`;\n\nexport const CTAButton = styled(Button).attrs({\n  variant: 'flat',\n})`\n  justify-content: start;\n  padding-left: ${theme.sizes.xs};\n  margin: ${theme.sizes.sm} ${theme.sizes.xs};\n  border-radius: ${theme.radius.base};\n  font-size: 14px;\n  svg {\n    width: ${theme.sizes.md};\n    height: ${theme.sizes.md};\n  }\n`;\n"],"names":["styled","ListBox","theme","Dropdown","inputFullStyles","dropdownIndicatorStyles","Search","Button"],"mappings":";;;;;;;;;;;;;;;MASa,aAAa,GAAGA,uBAAM,CAACC,2BAAO,CAAC,CAG/B,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,2CAAA,EAAAC,WAAK,CAAC,KAAK,CAAC,EAAE,CACP,gBAAA,EAAAA,WAAK,CAAC,KAAK,CAAC,EAAE,CAAA,yEAAA;MASrB,cAAc,GAAGF,uBAAM,CAACG,iBAAQ,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,UAAA;AAI9C;AACA;AACO,MAAM,kBAAkB,GAAGH,uBAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,yBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,EAC3CI,2BAAe,CAAA,CAAA,EACfC,gCAAuB,CAAA;AAGpB,MAAM,YAAY,GAAGL,uBAAM,CAACM,aAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,OAAA,EAC9BJ,WAAK,CAAC,KAAK,CAAC,EAAE;AAGb,MAAA,SAAS,GAAGF,uBAAM,CAAC,EAAE,CAElB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,sBAAA,EAAAE,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AAMjC,MAAA,SAAS,GAAGF,uBAAM,CAACO,aAAM,CAAC,CAAC,KAAK,CAAC;AAC5C,IAAA,OAAO,EAAE,MAAM;AAChB,CAAA,CAAC,iHAEgBL,WAAK,CAAC,KAAK,CAAC,EAAE,CACpB,QAAA,EAAAA,WAAK,CAAC,KAAK,CAAC,EAAE,CAAA,CAAA,EAAIA,WAAK,CAAC,KAAK,CAAC,EAAE,CACzB,eAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,IAAI,CAAA,0BAAA,EAGvBA,WAAK,CAAC,KAAK,CAAC,EAAE,WACbA,WAAK,CAAC,KAAK,CAAC,EAAE;;;;;;;;;"}