@veeqo/ui 10.0.1 → 10.2.0

package/dist/components/Popover/styled.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
-const PopoverDialog = styled.dialog.withConfig({ displayName: "vui--PopoverDialog", componentId: "vui--8d0dnm" }) `z-index:${({ zIndex }) => zIndex + 1};padding:0;margin:0;border:none;background:transparent;`;
-const Backdrop = styled.div.withConfig({ displayName: "vui--Backdrop", componentId: "vui--1o6lfkt" }) `position:fixed;top:0;right:0;bottom:0;left:0;z-index:${({ zIndex }) => zIndex};`;
+const PopoverDialog = styled.dialog.withConfig({ displayName: "vui--PopoverDialog", componentId: "vui--kmoo2l" }) `z-index:${({ zIndex }) => zIndex + 1};padding:0;margin:0;border:none;background:transparent;`;
+const Backdrop = styled.div.withConfig({ displayName: "vui--Backdrop", componentId: "vui--9esryp" }) `position:fixed;top:0;right:0;bottom:0;left:0;z-index:${({ zIndex }) => zIndex};`;
 
 export { Backdrop, PopoverDialog };
 //# sourceMappingURL=styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/Popover/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { BackdropProps } from './types';\n\nexport const PopoverDialog = styled.dialog<{ zIndex: number }>`\n  z-index: ${({ zIndex }) => zIndex + 1};\n\n  // Remove browser default styling of HTML Dialog.\n  padding: 0;\n  margin: 0;\n  border: none;\n  background: transparent;\n`;\n\nexport const Backdrop = styled.div<Pick<BackdropProps, 'zIndex'>>`\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: ${({ zIndex }) => zIndex};\n`;\n"],"names":[],"mappings":";;AAGa,MAAA,aAAa,GAAG,MAAM,CAAC,MAAM,CAC7B,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,QAAA,EAAA,CAAC,EAAE,MAAM,EAAE,KAAK,MAAM,GAAG,CAAC;AAS1B,MAAA,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,qDAAA,EAMrB,CAAC,EAAE,MAAM,EAAE,KAAK,MAAM;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/Popover/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { BackdropProps } from './types';\n\nexport const PopoverDialog = styled.dialog<{ zIndex: number }>`\n  z-index: ${({ zIndex }) => zIndex + 1};\n\n  // Remove browser default styling of HTML Dialog.\n  padding: 0;\n  margin: 0;\n  border: none;\n  background: transparent;\n`;\n\nexport const Backdrop = styled.div<Pick<BackdropProps, 'zIndex'>>`\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: ${({ zIndex }) => zIndex};\n`;\n"],"names":[],"mappings":";;AAGa,MAAA,aAAa,GAAG,MAAM,CAAC,MAAM,CAC7B,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,QAAA,EAAA,CAAC,EAAE,MAAM,EAAE,KAAK,MAAM,GAAG,CAAC;AAS1B,MAAA,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,qDAAA,EAMrB,CAAC,EAAE,MAAM,EAAE,KAAK,MAAM;;;;"}

package/dist/components/Radio/Radio.cjs

@@ -9,13 +9,14 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const Radio = React.forwardRef(({ checked, value, name, disabled, onChange, id, children, 'aria-label': ariaLabel, ...otherProps }, ref) => {
+const Radio = React.forwardRef(({ checked, value, name, hint, disabled, onChange, id, children, 'aria-label': ariaLabel, ...otherProps }, ref) => {
     const handleChange = React.useCallback((e) => {
         onChange(e.currentTarget.checked, value);
     }, [onChange, value]);
-    const componentId = id !== null && id !== undefined ? id : generateId.generateId('radio');
-    return (React__default.default.createElement(Choice.Choice, { id: componentId, disabled: disabled, ...otherProps },
-        React__default.default.createElement(styled.Input, { id: componentId, type: "radio", checked: checked, value: value, name: name, disabled: disabled, onChange: handleChange, ref: ref, "aria-label": ariaLabel }),
+    const componentId = React.useMemo(() => id !== null && id !== undefined ? id : generateId.generateId('radio'), [id]);
+    const ariaDescribedBy = hint ? `hint-${componentId}` : undefined;
+    return (React__default.default.createElement(Choice.Choice, { htmlFor: componentId, disabled: disabled, hint: hint, ...otherProps },
+        React__default.default.createElement(styled.Input, { id: componentId, type: "radio", checked: checked, value: value, name: name, disabled: disabled, onChange: handleChange, ref: ref, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy }),
         children));
 });
 

package/dist/components/Radio/Radio.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.cjs","sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import React, { AriaAttributes, ReactNode, forwardRef, useCallback } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { Input } from './styled';\nimport { generateId } from '../../utils/generateId';\n\ntype RadioValue = string | number;\n\nexport interface RadioProps extends ForwardedChoiceProps, Pick<AriaAttributes, 'aria-label'> {\n  id?: string;\n  className?: string;\n  checked: boolean;\n  value?: RadioValue;\n  disabled?: boolean;\n  name?: string;\n  onChange: (checked: boolean, value?: RadioValue) => void;\n  children?: ReactNode;\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n  (\n    {\n      checked,\n      value,\n      name,\n      disabled,\n      onChange,\n      id,\n      children,\n      'aria-label': ariaLabel,\n      ...otherProps\n    }: RadioProps,\n    ref,\n  ) => {\n    const handleChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        onChange(e.currentTarget.checked, value);\n      },\n      [onChange, value],\n    );\n\n    const componentId = id ?? generateId('radio');\n\n    return (\n      <Choice id={componentId} disabled={disabled} {...otherProps}>\n        <Input\n          id={componentId}\n          type=\"radio\"\n          checked={checked}\n          value={value}\n          name={name}\n          disabled={disabled}\n          onChange={handleChange}\n          ref={ref}\n          aria-label={ariaLabel}\n        />\n        {children}\n      </Choice>\n    );\n  },\n);\n"],"names":["forwardRef","useCallback","generateId","React","Choice","Input"],"mappings":";;;;;;;;;;;AAkBO,MAAM,KAAK,GAAGA,gBAAU,CAC7B,CACE,EACE,OAAO,EACP,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,EAAE,EACF,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,GAAG,UAAU,EACF,EACb,GAAG,KACD;AACF,IAAA,MAAM,YAAY,GAAGC,iBAAW,CAC9B,CAAC,CAAsC,KAAI;QACzC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;AAC1C,KAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;AAED,IAAA,MAAM,WAAW,GAAG,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,SAAA,GAAF,EAAE,GAAIC,qBAAU,CAAC,OAAO,CAAC;AAE7C,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,aAAM,EAAA,EAAC,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAA,GAAM,UAAU,EAAA;AACzD,QAAAD,sBAAA,CAAA,aAAA,CAACE,YAAK,EAAA,EACJ,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,YAAY,EACtB,GAAG,EAAE,GAAG,EAAA,YAAA,EACI,SAAS,EACrB,CAAA;QACD,QAAQ,CACF;AAEb,CAAC;;;;"}
+{"version":3,"file":"Radio.cjs","sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import React, { AriaAttributes, ReactNode, forwardRef, useCallback, useMemo } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { Input } from './styled';\nimport { generateId } from '../../utils/generateId';\n\ntype RadioValue = string | number;\n\nexport interface RadioProps extends ForwardedChoiceProps, Pick<AriaAttributes, 'aria-label'> {\n  id?: string;\n  className?: string;\n  checked: boolean;\n  value?: RadioValue;\n  disabled?: boolean;\n  name?: string;\n  onChange: (checked: boolean, value?: RadioValue) => void;\n  children?: ReactNode;\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n  (\n    {\n      checked,\n      value,\n      name,\n      hint,\n      disabled,\n      onChange,\n      id,\n      children,\n      'aria-label': ariaLabel,\n      ...otherProps\n    }: RadioProps,\n    ref,\n  ) => {\n    const handleChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        onChange(e.currentTarget.checked, value);\n      },\n      [onChange, value],\n    );\n\n    const componentId = useMemo(() => id ?? generateId('radio'), [id]);\n    const ariaDescribedBy = hint ? `hint-${componentId}` : undefined;\n\n    return (\n      <Choice htmlFor={componentId} disabled={disabled} hint={hint} {...otherProps}>\n        <Input\n          id={componentId}\n          type=\"radio\"\n          checked={checked}\n          value={value}\n          name={name}\n          disabled={disabled}\n          onChange={handleChange}\n          ref={ref}\n          aria-label={ariaLabel}\n          aria-describedby={ariaDescribedBy}\n        />\n        {children}\n      </Choice>\n    );\n  },\n);\n"],"names":["forwardRef","useCallback","useMemo","generateId","React","Choice","Input"],"mappings":";;;;;;;;;;;AAkBO,MAAM,KAAK,GAAGA,gBAAU,CAC7B,CACE,EACE,OAAO,EACP,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,EAAE,EACF,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,GAAG,UAAU,EACF,EACb,GAAG,KACD;AACF,IAAA,MAAM,YAAY,GAAGC,iBAAW,CAC9B,CAAC,CAAsC,KAAI;QACzC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;AAC1C,KAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;IAED,MAAM,WAAW,GAAGC,aAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,SAAA,GAAF,EAAE,GAAIC,qBAAU,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AAClE,IAAA,MAAM,eAAe,GAAG,IAAI,GAAG,CAAQ,KAAA,EAAA,WAAW,CAAE,CAAA,GAAG,SAAS;AAEhE,IAAA,QACEC,sBAAC,CAAA,aAAA,CAAAC,aAAM,EAAC,EAAA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,KAAM,UAAU,EAAA;AAC1E,QAAAD,sBAAA,CAAA,aAAA,CAACE,YAAK,EACJ,EAAA,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,YAAY,EACtB,GAAG,EAAE,GAAG,gBACI,SAAS,EAAA,kBAAA,EACH,eAAe,EACjC,CAAA;QACD,QAAQ,CACF;AAEb,CAAC;;;;"}

package/dist/components/Radio/Radio.js

@@ -1,15 +1,16 @@
-import React__default, { forwardRef, useCallback } from 'react';
+import React__default, { forwardRef, useCallback, useMemo } from 'react';
 import { Choice } from '../Choice/Choice.js';
 import { Input } from './styled.js';
 import { generateId } from '../../utils/generateId.js';
 
-const Radio = forwardRef(({ checked, value, name, disabled, onChange, id, children, 'aria-label': ariaLabel, ...otherProps }, ref) => {
+const Radio = forwardRef(({ checked, value, name, hint, disabled, onChange, id, children, 'aria-label': ariaLabel, ...otherProps }, ref) => {
     const handleChange = useCallback((e) => {
         onChange(e.currentTarget.checked, value);
     }, [onChange, value]);
-    const componentId = id !== null && id !== undefined ? id : generateId('radio');
-    return (React__default.createElement(Choice, { id: componentId, disabled: disabled, ...otherProps },
-        React__default.createElement(Input, { id: componentId, type: "radio", checked: checked, value: value, name: name, disabled: disabled, onChange: handleChange, ref: ref, "aria-label": ariaLabel }),
+    const componentId = useMemo(() => id !== null && id !== undefined ? id : generateId('radio'), [id]);
+    const ariaDescribedBy = hint ? `hint-${componentId}` : undefined;
+    return (React__default.createElement(Choice, { htmlFor: componentId, disabled: disabled, hint: hint, ...otherProps },
+        React__default.createElement(Input, { id: componentId, type: "radio", checked: checked, value: value, name: name, disabled: disabled, onChange: handleChange, ref: ref, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy }),
         children));
 });
 

package/dist/components/Radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import React, { AriaAttributes, ReactNode, forwardRef, useCallback } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { Input } from './styled';\nimport { generateId } from '../../utils/generateId';\n\ntype RadioValue = string | number;\n\nexport interface RadioProps extends ForwardedChoiceProps, Pick<AriaAttributes, 'aria-label'> {\n  id?: string;\n  className?: string;\n  checked: boolean;\n  value?: RadioValue;\n  disabled?: boolean;\n  name?: string;\n  onChange: (checked: boolean, value?: RadioValue) => void;\n  children?: ReactNode;\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n  (\n    {\n      checked,\n      value,\n      name,\n      disabled,\n      onChange,\n      id,\n      children,\n      'aria-label': ariaLabel,\n      ...otherProps\n    }: RadioProps,\n    ref,\n  ) => {\n    const handleChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        onChange(e.currentTarget.checked, value);\n      },\n      [onChange, value],\n    );\n\n    const componentId = id ?? generateId('radio');\n\n    return (\n      <Choice id={componentId} disabled={disabled} {...otherProps}>\n        <Input\n          id={componentId}\n          type=\"radio\"\n          checked={checked}\n          value={value}\n          name={name}\n          disabled={disabled}\n          onChange={handleChange}\n          ref={ref}\n          aria-label={ariaLabel}\n        />\n        {children}\n      </Choice>\n    );\n  },\n);\n"],"names":["React"],"mappings":";;;;;AAkBO,MAAM,KAAK,GAAG,UAAU,CAC7B,CACE,EACE,OAAO,EACP,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,EAAE,EACF,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,GAAG,UAAU,EACF,EACb,GAAG,KACD;AACF,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAsC,KAAI;QACzC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;AAC1C,KAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;AAED,IAAA,MAAM,WAAW,GAAG,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,SAAA,GAAF,EAAE,GAAI,UAAU,CAAC,OAAO,CAAC;AAE7C,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAA,GAAM,UAAU,EAAA;AACzD,QAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EACJ,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,YAAY,EACtB,GAAG,EAAE,GAAG,EAAA,YAAA,EACI,SAAS,EACrB,CAAA;QACD,QAAQ,CACF;AAEb,CAAC;;;;"}
+{"version":3,"file":"Radio.js","sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import React, { AriaAttributes, ReactNode, forwardRef, useCallback, useMemo } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { Input } from './styled';\nimport { generateId } from '../../utils/generateId';\n\ntype RadioValue = string | number;\n\nexport interface RadioProps extends ForwardedChoiceProps, Pick<AriaAttributes, 'aria-label'> {\n  id?: string;\n  className?: string;\n  checked: boolean;\n  value?: RadioValue;\n  disabled?: boolean;\n  name?: string;\n  onChange: (checked: boolean, value?: RadioValue) => void;\n  children?: ReactNode;\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n  (\n    {\n      checked,\n      value,\n      name,\n      hint,\n      disabled,\n      onChange,\n      id,\n      children,\n      'aria-label': ariaLabel,\n      ...otherProps\n    }: RadioProps,\n    ref,\n  ) => {\n    const handleChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        onChange(e.currentTarget.checked, value);\n      },\n      [onChange, value],\n    );\n\n    const componentId = useMemo(() => id ?? generateId('radio'), [id]);\n    const ariaDescribedBy = hint ? `hint-${componentId}` : undefined;\n\n    return (\n      <Choice htmlFor={componentId} disabled={disabled} hint={hint} {...otherProps}>\n        <Input\n          id={componentId}\n          type=\"radio\"\n          checked={checked}\n          value={value}\n          name={name}\n          disabled={disabled}\n          onChange={handleChange}\n          ref={ref}\n          aria-label={ariaLabel}\n          aria-describedby={ariaDescribedBy}\n        />\n        {children}\n      </Choice>\n    );\n  },\n);\n"],"names":["React"],"mappings":";;;;;AAkBO,MAAM,KAAK,GAAG,UAAU,CAC7B,CACE,EACE,OAAO,EACP,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,EAAE,EACF,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,GAAG,UAAU,EACF,EACb,GAAG,KACD;AACF,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAsC,KAAI;QACzC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;AAC1C,KAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;IAED,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,SAAA,GAAF,EAAE,GAAI,UAAU,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AAClE,IAAA,MAAM,eAAe,GAAG,IAAI,GAAG,CAAQ,KAAA,EAAA,WAAW,CAAE,CAAA,GAAG,SAAS;AAEhE,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,MAAM,EAAC,EAAA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,KAAM,UAAU,EAAA;AAC1E,QAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EACJ,EAAA,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,YAAY,EACtB,GAAG,EAAE,GAAG,gBACI,SAAS,EAAA,kBAAA,EACH,eAAe,EACjC,CAAA;QACD,QAAQ,CACF;AAEb,CAAC;;;;"}

package/dist/components/Radio/styled.cjs

@@ -6,7 +6,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const Input = styled__default.default.input.withConfig({ displayName: "vui--Input", componentId: "vui--42oeoe" }) `appearance:none;box-sizing:border-box;flex-shrink:0;width:18px;height:18px;margin:3px;background-color:transparent;border:2px solid #637381;border-radius:50%;outline:none;cursor:pointer;flex-shrink:0;transition:box-shadow 0.1s;&:checked{position:relative;border-color:#0079d1;}&:checked::before{content:'';width:10px;height:10px;position:absolute;top:2px;left:2px;background-color:#0079d1;border-radius:50%;}&:hover{border-color:#0079d1;}&:active{border-color:#0079d1;}&:focus{box-shadow:0 0 0 4px #80bce8;outline:0;}&:disabled{box-shadow:none;background-color:#dfe3e8;border-color:#959fa8;cursor:default;}&:disabled::before{background-color:#637381;}`;
+const Input = styled__default.default.input.withConfig({ displayName: "vui--Input", componentId: "vui--1e1oks4" }) `appearance:none;box-sizing:border-box;flex-shrink:0;width:18px;height:18px;margin:3px;background-color:transparent;border:2px solid #637381;border-radius:50%;outline:none;cursor:pointer;flex-shrink:0;transition:box-shadow 0.1s;&:checked{position:relative;border-color:#0079d1;}&:checked::before{content:'';width:10px;height:10px;position:absolute;top:2px;left:2px;background-color:#0079d1;border-radius:50%;}&:hover{border-color:#0079d1;}&:active{border-color:#0079d1;}&:focus{box-shadow:0 0 0 4px #80bce8;outline:0;}&:disabled{box-shadow:none;background-color:#dfe3e8;border-color:#959fa8;cursor:default;}&:disabled::before{background-color:#637381;}`;
 
 exports.Input = Input;
 //# sourceMappingURL=styled.cjs.map

package/dist/components/Radio/styled.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-const Input = styled.input.withConfig({ displayName: "vui--Input", componentId: "vui--42oeoe" }) `appearance:none;box-sizing:border-box;flex-shrink:0;width:18px;height:18px;margin:3px;background-color:transparent;border:2px solid #637381;border-radius:50%;outline:none;cursor:pointer;flex-shrink:0;transition:box-shadow 0.1s;&:checked{position:relative;border-color:#0079d1;}&:checked::before{content:'';width:10px;height:10px;position:absolute;top:2px;left:2px;background-color:#0079d1;border-radius:50%;}&:hover{border-color:#0079d1;}&:active{border-color:#0079d1;}&:focus{box-shadow:0 0 0 4px #80bce8;outline:0;}&:disabled{box-shadow:none;background-color:#dfe3e8;border-color:#959fa8;cursor:default;}&:disabled::before{background-color:#637381;}`;
+const Input = styled.input.withConfig({ displayName: "vui--Input", componentId: "vui--1e1oks4" }) `appearance:none;box-sizing:border-box;flex-shrink:0;width:18px;height:18px;margin:3px;background-color:transparent;border:2px solid #637381;border-radius:50%;outline:none;cursor:pointer;flex-shrink:0;transition:box-shadow 0.1s;&:checked{position:relative;border-color:#0079d1;}&:checked::before{content:'';width:10px;height:10px;position:absolute;top:2px;left:2px;background-color:#0079d1;border-radius:50%;}&:hover{border-color:#0079d1;}&:active{border-color:#0079d1;}&:focus{box-shadow:0 0 0 4px #80bce8;outline:0;}&:disabled{box-shadow:none;background-color:#dfe3e8;border-color:#959fa8;cursor:default;}&:disabled::before{background-color:#637381;}`;
 
 export { Input };
 //# sourceMappingURL=styled.js.map

package/dist/components/ScreenReaderOnly/ScreenReaderOnly.cjs

@@ -8,7 +8,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const ScreenReaderOnlyElement = styled__default.default.span.withConfig({ displayName: "vui--ScreenReaderOnlyElement", componentId: "vui--149jcz9" }) `position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;`;
+const ScreenReaderOnlyElement = styled__default.default.span.withConfig({ displayName: "vui--ScreenReaderOnlyElement", componentId: "vui--ejkp56" }) `position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;`;
 /**
  * The `ScreenReaderOnly` component is used to render content that is only visible to screen readers and assistive technologies. This component can be useful for providing additional context or information to users who rely on screen readers, while keeping the content visually hidden from sighted users.
  *  * **This is not a replacement for `aria-label`.**

package/dist/components/ScreenReaderOnly/ScreenReaderOnly.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScreenReaderOnly.cjs","sources":["../../../src/components/ScreenReaderOnly/ScreenReaderOnly.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport styled from 'styled-components';\n\ntype ScreenReaderOnlyProps = {\n  children: ReactNode;\n};\n\nconst ScreenReaderOnlyElement = styled.span`\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n`;\n/**\n * The `ScreenReaderOnly` component is used to render content that is only visible to screen readers and assistive technologies. This component can be useful for providing additional context or information to users who rely on screen readers, while keeping the content visually hidden from sighted users.\n *  * **This is not a replacement for `aria-label`.**\n *\n * Note: aria-label is intended for interactive elements or for elements made interactive via other ARIA declarations when there's no visible text in the DOM to serve as a label.\n *\n * In general, screen reader-only content should be reserved for information that is apparent visually but not apparent to blind screen reader users.\n *\n * **Example use cases:**\n * - Adding instructional cues and indicators\n * - Search input that is clearly a search bar to sighted users (search icon, etc.). A hidden, associated `<label>` element with \"Search orders\"\n * - Skip to links to take the user to the main content (still need to be visibile when focused)\n * - Breadcrumb navigation, making it clear with a \"you are here\" screen reader text\n */\nexport const ScreenReaderOnly = ({ children }: ScreenReaderOnlyProps) => {\n  return <ScreenReaderOnlyElement>{children}</ScreenReaderOnlyElement>;\n};\n"],"names":["styled","React"],"mappings":";;;;;;;;;;AAOA,MAAM,uBAAuB,GAAGA,uBAAM,CAAC,IAAI,2NAU1C;AACD;;;;;;;;;;;;;AAaG;MACU,gBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAyB,KAAI;AACtE,IAAA,OAAOC,sBAAC,CAAA,aAAA,CAAA,uBAAuB,EAAE,IAAA,EAAA,QAAQ,CAA2B;AACtE;;;;"}
+{"version":3,"file":"ScreenReaderOnly.cjs","sources":["../../../src/components/ScreenReaderOnly/ScreenReaderOnly.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport styled from 'styled-components';\n\ntype ScreenReaderOnlyProps = {\n  children: ReactNode;\n};\n\nconst ScreenReaderOnlyElement = styled.span`\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n`;\n/**\n * The `ScreenReaderOnly` component is used to render content that is only visible to screen readers and assistive technologies. This component can be useful for providing additional context or information to users who rely on screen readers, while keeping the content visually hidden from sighted users.\n *  * **This is not a replacement for `aria-label`.**\n *\n * Note: aria-label is intended for interactive elements or for elements made interactive via other ARIA declarations when there's no visible text in the DOM to serve as a label.\n *\n * In general, screen reader-only content should be reserved for information that is apparent visually but not apparent to blind screen reader users.\n *\n * **Example use cases:**\n * - Adding instructional cues and indicators\n * - Search input that is clearly a search bar to sighted users (search icon, etc.). A hidden, associated `<label>` element with \"Search orders\"\n * - Skip to links to take the user to the main content (still need to be visibile when focused)\n * - Breadcrumb navigation, making it clear with a \"you are here\" screen reader text\n */\nexport const ScreenReaderOnly = ({ children }: ScreenReaderOnlyProps) => {\n  return <ScreenReaderOnlyElement>{children}</ScreenReaderOnlyElement>;\n};\n"],"names":["styled","React"],"mappings":";;;;;;;;;;AAOA,MAAM,uBAAuB,GAAGA,uBAAM,CAAC,IAAI,0NAU1C;AACD;;;;;;;;;;;;;AAaG;MACU,gBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAyB,KAAI;AACtE,IAAA,OAAOC,sBAAC,CAAA,aAAA,CAAA,uBAAuB,EAAE,IAAA,EAAA,QAAQ,CAA2B;AACtE;;;;"}

package/dist/components/ScreenReaderOnly/ScreenReaderOnly.js

@@ -1,7 +1,7 @@
 import React__default from 'react';
 import styled from 'styled-components';
 
-const ScreenReaderOnlyElement = styled.span.withConfig({ displayName: "vui--ScreenReaderOnlyElement", componentId: "vui--149jcz9" }) `position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;`;
+const ScreenReaderOnlyElement = styled.span.withConfig({ displayName: "vui--ScreenReaderOnlyElement", componentId: "vui--ejkp56" }) `position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;`;
 /**
  * The `ScreenReaderOnly` component is used to render content that is only visible to screen readers and assistive technologies. This component can be useful for providing additional context or information to users who rely on screen readers, while keeping the content visually hidden from sighted users.
  *  * **This is not a replacement for `aria-label`.**

package/dist/components/ScreenReaderOnly/ScreenReaderOnly.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScreenReaderOnly.js","sources":["../../../src/components/ScreenReaderOnly/ScreenReaderOnly.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport styled from 'styled-components';\n\ntype ScreenReaderOnlyProps = {\n  children: ReactNode;\n};\n\nconst ScreenReaderOnlyElement = styled.span`\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n`;\n/**\n * The `ScreenReaderOnly` component is used to render content that is only visible to screen readers and assistive technologies. This component can be useful for providing additional context or information to users who rely on screen readers, while keeping the content visually hidden from sighted users.\n *  * **This is not a replacement for `aria-label`.**\n *\n * Note: aria-label is intended for interactive elements or for elements made interactive via other ARIA declarations when there's no visible text in the DOM to serve as a label.\n *\n * In general, screen reader-only content should be reserved for information that is apparent visually but not apparent to blind screen reader users.\n *\n * **Example use cases:**\n * - Adding instructional cues and indicators\n * - Search input that is clearly a search bar to sighted users (search icon, etc.). A hidden, associated `<label>` element with \"Search orders\"\n * - Skip to links to take the user to the main content (still need to be visibile when focused)\n * - Breadcrumb navigation, making it clear with a \"you are here\" screen reader text\n */\nexport const ScreenReaderOnly = ({ children }: ScreenReaderOnlyProps) => {\n  return <ScreenReaderOnlyElement>{children}</ScreenReaderOnlyElement>;\n};\n"],"names":["React"],"mappings":";;;AAOA,MAAM,uBAAuB,GAAG,MAAM,CAAC,IAAI,2NAU1C;AACD;;;;;;;;;;;;;AAaG;MACU,gBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAyB,KAAI;AACtE,IAAA,OAAOA,cAAC,CAAA,aAAA,CAAA,uBAAuB,EAAE,IAAA,EAAA,QAAQ,CAA2B;AACtE;;;;"}
+{"version":3,"file":"ScreenReaderOnly.js","sources":["../../../src/components/ScreenReaderOnly/ScreenReaderOnly.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport styled from 'styled-components';\n\ntype ScreenReaderOnlyProps = {\n  children: ReactNode;\n};\n\nconst ScreenReaderOnlyElement = styled.span`\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n`;\n/**\n * The `ScreenReaderOnly` component is used to render content that is only visible to screen readers and assistive technologies. This component can be useful for providing additional context or information to users who rely on screen readers, while keeping the content visually hidden from sighted users.\n *  * **This is not a replacement for `aria-label`.**\n *\n * Note: aria-label is intended for interactive elements or for elements made interactive via other ARIA declarations when there's no visible text in the DOM to serve as a label.\n *\n * In general, screen reader-only content should be reserved for information that is apparent visually but not apparent to blind screen reader users.\n *\n * **Example use cases:**\n * - Adding instructional cues and indicators\n * - Search input that is clearly a search bar to sighted users (search icon, etc.). A hidden, associated `<label>` element with \"Search orders\"\n * - Skip to links to take the user to the main content (still need to be visibile when focused)\n * - Breadcrumb navigation, making it clear with a \"you are here\" screen reader text\n */\nexport const ScreenReaderOnly = ({ children }: ScreenReaderOnlyProps) => {\n  return <ScreenReaderOnlyElement>{children}</ScreenReaderOnlyElement>;\n};\n"],"names":["React"],"mappings":";;;AAOA,MAAM,uBAAuB,GAAG,MAAM,CAAC,IAAI,0NAU1C;AACD;;;;;;;;;;;;;AAaG;MACU,gBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAyB,KAAI;AACtE,IAAA,OAAOA,cAAC,CAAA,aAAA,CAAA,uBAAuB,EAAE,IAAA,EAAA,QAAQ,CAA2B;AACtE;;;;"}

package/dist/components/Search/styled.cjs

@@ -9,9 +9,9 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const Input = styled__default.default(index.TextField).withConfig({ displayName: "vui--Input", componentId: "vui--1ckzslk" }) `flex-grow:2;margin-top:0;margin-bottom:0;`;
-const IconContainer = styled__default.default.div.withConfig({ displayName: "vui--IconContainer", componentId: "vui--1bii5gv" }) `position:absolute;`;
-const Container = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--18p3qd0" }) `position:relative;display:flex;justify-content:flex-start;align-items:center;border-radius:0.25rem;${({ iconPosition }) => {
+const Input = styled__default.default(index.TextField).withConfig({ displayName: "vui--Input", componentId: "vui--je6y84" }) `flex-grow:2;margin-top:0;margin-bottom:0;`;
+const IconContainer = styled__default.default.div.withConfig({ displayName: "vui--IconContainer", componentId: "vui--113gfe8" }) `position:absolute;`;
+const Container = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--18q9h8i" }) `position:relative;display:flex;justify-content:flex-start;align-items:center;border-radius:0.25rem;${({ iconPosition }) => {
     let padding = 'padding-right: 2.5rem;';
     let position = 'right: 0.5rem;';
     if (iconPosition === 'left') {

package/dist/components/Search/styled.js

@@ -3,9 +3,9 @@ import { TextField } from '../TextField/index.js';
 import { BaseContainer } from '../BaseContainer/BaseContainer.js';
 import 'react';
 
-const Input = styled(TextField).withConfig({ displayName: "vui--Input", componentId: "vui--1ckzslk" }) `flex-grow:2;margin-top:0;margin-bottom:0;`;
-const IconContainer = styled.div.withConfig({ displayName: "vui--IconContainer", componentId: "vui--1bii5gv" }) `position:absolute;`;
-const Container = styled(BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--18p3qd0" }) `position:relative;display:flex;justify-content:flex-start;align-items:center;border-radius:0.25rem;${({ iconPosition }) => {
+const Input = styled(TextField).withConfig({ displayName: "vui--Input", componentId: "vui--je6y84" }) `flex-grow:2;margin-top:0;margin-bottom:0;`;
+const IconContainer = styled.div.withConfig({ displayName: "vui--IconContainer", componentId: "vui--113gfe8" }) `position:absolute;`;
+const Container = styled(BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--18q9h8i" }) `position:relative;display:flex;justify-content:flex-start;align-items:center;border-radius:0.25rem;${({ iconPosition }) => {
     let padding = 'padding-right: 2.5rem;';
     let position = 'right: 0.5rem;';
     if (iconPosition === 'left') {

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--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;}`;
+const SegmentedControlContainer = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--SegmentedControlContainer", componentId: "vui--s4yyqq" }) `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,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;;;;"}
+{"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;;;;"}

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--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;}`;
+const SegmentedControlContainer = styled(BaseContainer).withConfig({ displayName: "vui--SegmentedControlContainer", componentId: "vui--s4yyqq" }) `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,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;;;;"}
+{"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;;;;"}

package/dist/components/Select/styled.cjs

@@ -9,7 +9,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
 const dropdownIndicatorStyles = styled.css `--padding-right:${index.theme.sizes[9]};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 ${index.theme.sizes[3]} 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};}`;
+const SelectInput = styled__default.default.select.withConfig({ displayName: "vui--SelectInput", componentId: "vui--1v4mu6a" }) `${inputStyles.inputFullStyles} ${dropdownIndicatorStyles} &:has(option:disabled:checked){color:${index.theme.colors.neutral.ink.light};}`;
 
 exports.SelectInput = SelectInput;
 exports.dropdownIndicatorStyles = dropdownIndicatorStyles;

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

@@ -1 +1 @@
-{"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: ${theme.sizes[9]};\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 ${theme.sizes[3]} 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","theme","styled","inputFullStyles"],"mappings":";;;;;;;;;;MAIa,uBAAuB,GAAGA,UAAG,CACrB,CAAA,gBAAA,EAAAC,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA,+UAAA,EAMvBA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC;MAIb,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,yCAIdF,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAA,EAAA;;;;;"}
+{"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: ${theme.sizes[9]};\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 ${theme.sizes[3]} 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","theme","styled","inputFullStyles"],"mappings":";;;;;;;;;;MAIa,uBAAuB,GAAGA,UAAG,CACrB,CAAA,gBAAA,EAAAC,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA,+UAAA,EAMvBA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC;MAIb,WAAW,GAAGC,uBAAM,CAAC,MAAM,CACpC,UAAA,CAAA,EAAA,WAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,EAAAC,2BAAe,CACf,CAAA,EAAA,uBAAuB,yCAIdF,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAA,EAAA;;;;;"}

package/dist/components/Select/styled.js

@@ -3,7 +3,7 @@ import { inputFullStyles } from '../../utils/forms/inputStyles.js';
 import { theme } from '../../theme/index.js';
 
 const dropdownIndicatorStyles = css `--padding-right:${theme.sizes[9]};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 ${theme.sizes[3]} 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};}`;
+const SelectInput = styled.select.withConfig({ displayName: "vui--SelectInput", componentId: "vui--1v4mu6a" }) `${inputFullStyles} ${dropdownIndicatorStyles} &:has(option:disabled:checked){color:${theme.colors.neutral.ink.light};}`;
 
 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, { css } from 'styled-components';\nimport { inputFullStyles } from '../../utils/forms/inputStyles';\nimport { theme } from '../../theme';\n\nexport const dropdownIndicatorStyles = css`\n  --padding-right: ${theme.sizes[9]};\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 ${theme.sizes[3]} 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":";;;;MAIa,uBAAuB,GAAG,GAAG,CACrB,CAAA,gBAAA,EAAA,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA,+UAAA,EAMvB,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;MAIb,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;;;;"}
+{"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: ${theme.sizes[9]};\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 ${theme.sizes[3]} 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":";;;;MAIa,uBAAuB,GAAG,GAAG,CACrB,CAAA,gBAAA,EAAA,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA,+UAAA,EAMvB,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;MAIb,WAAW,GAAG,MAAM,CAAC,MAAM,CACpC,UAAA,CAAA,EAAA,WAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,cAAA,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

@@ -16,21 +16,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--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 StyledListItem = styled__default.default(reactAriaComponents.ListBoxItem).withConfig({ displayName: "vui--StyledListItem", componentId: "vui--16fm0j" }) `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--6npxd" }) `.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--asg6dc" }) `transform:rotate(90deg);color:${index.theme.colors.neutral.ink.base};`;
+}).withConfig({ displayName: "vui--LinkIcon", componentId: "vui--14ybt8l" }) `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--g6yll3" }) `width:100%;`;
+}).withConfig({ displayName: "vui--HorizontalContainer", componentId: "vui--11udtca" }) `width:100%;`;
 const VerticalContainer = styled__default.default(Stack.Stack).attrs({
     spacing: 'xs',
-}).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;`;
+}).withConfig({ displayName: "vui--VerticalContainer", componentId: "vui--1tl5q7x" }) `width:100%;`;
+const InfoContainer = styled__default.default.div.withConfig({ displayName: "vui--InfoContainer", componentId: "vui--i2xz7h" }) `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--1gj2fqj" }) `display:flex;flex-direction:row;gap:8px;align-items:center;`;
 
 exports.HorizontalContainer = HorizontalContainer;
 exports.InfoContainer = InfoContainer;

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

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../../src/components/SelectDropdown/ListItem/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from 'Theme';\nimport { ListBox, ListBoxItem } from 'react-aria-components';\nimport { ArrowUpIcon } from '../../../icons/ArrowUpIcon';\nimport { Stack } from '../../Stack';\n\nconst colourStatesMap = {\n  hovered: '#F0F7FC',\n  pressed: '#E3F0FA',\n  disabled: theme.colors.neutral.grey.light,\n};\n\nexport const StyledListItem = styled(ListBoxItem)<{\n  appearance?: 'primary' | 'secondary';\n}>`\n  border-radius: ${theme.radius.base};\n  cursor: pointer;\n  background-color: ${({ appearance = 'primary' }) =>\n    appearance === 'primary' ? 'white' : theme.colors.neutral.grey.lightest};\n  text-decoration: none;\n\n  &[data-hovered] > div {\n    background-color: ${colourStatesMap.hovered};\n  }\n\n  &[data-pressed] > div {\n    background-color: ${colourStatesMap.pressed};\n  }\n\n  &[data-focused] {\n    outline: 0;\n  }\n\n  &[data-focus-visible] > div {\n    outline: solid ${theme.sizes.xs} ${theme.colors.secondary.blue.light};\n    z-index: 1;\n    position: relative;\n  }\n\n  &[data-dragging] {\n    background-color: ${theme.colors.neutral.grey.base};\n    border-color: ${theme.colors.secondary.blue.base};\n  }\n  &[data-drop-target] {\n    background-color: ${theme.colors.secondary.green.base};\n    border-color: ${theme.colors.secondary.green.base};\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    background-color: ${colourStatesMap.disabled};\n    opacity: 0.75;\n  }\n\n  & > div {\n    padding: ${theme.sizes.sm};\n    border-radius: ${theme.radius.base};\n  }\n`;\n\nexport const StyledListBox = styled(ListBox)`\n  .react-aria-DropIndicator[data-drop-target] {\n    outline: 2px solid ${theme.colors.secondary.blue.base};\n  }\n\n  width: 100%;\n`;\n\nexport const LinkIcon = styled(ArrowUpIcon).attrs({\n  width: theme.sizes.md,\n  height: theme.sizes.md,\n})`\n  transform: rotate(90deg);\n  color: ${theme.colors.neutral.ink.base};\n`;\n\nexport const HorizontalContainer = styled(Stack).attrs({\n  direction: 'horizontal',\n  alignY: 'center',\n})`\n  width: 100%;\n`;\n\nexport const VerticalContainer = styled(Stack).attrs({\n  spacing: 'xs',\n})`\n  width: 100%;\n`;\n\nexport const InfoContainer = styled.div<{\n  hasItemInfoSlot: boolean;\n  hasEndInfoSlot: boolean;\n}>`\n  display: grid;\n  grid-template-columns: ${({ hasItemInfoSlot, hasEndInfoSlot }) =>\n    hasItemInfoSlot && hasEndInfoSlot ? 'auto 1fr 1fr' : 'auto 1fr'};\n  gap: ${theme.sizes.sm};\n  width: 100%;\n  align-items: center;\n  min-width: 0;\n  flex: 1;\n\n  > *:last-child {\n    justify-self: ${({ hasEndInfoSlot }) => (hasEndInfoSlot ? 'end' : 'start')};\n  }\n`;\n\nexport const ItemInfoContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n`;\n"],"names":["theme","styled","ListBoxItem","ListBox","ArrowUpIcon","Stack"],"mappings":";;;;;;;;;;;;;AAMA,MAAM,eAAe,GAAG;AACtB,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK;CAC1C;AAEM,MAAM,cAAc,GAAGC,uBAAM,CAACC,+BAAW,CAAC,CAG9B,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,cAAA,EAAAF,WAAK,CAAC,MAAM,CAAC,IAAI,CAEd,iCAAA,EAAA,CAAC,EAAE,UAAU,GAAG,SAAS,EAAE,KAC7C,UAAU,KAAK,SAAS,GAAG,OAAO,GAAGA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA,6DAAA,EAInD,eAAe,CAAC,OAAO,CAAA,yCAAA,EAIvB,eAAe,CAAC,OAAO,CAAA,uEAAA,EAQ1BA,WAAK,CAAC,KAAK,CAAC,EAAE,CAAA,CAAA,EAAIA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,gEAAA,EAMhDA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,cAAA,EAClCA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,uCAAA,EAG5BA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAA,cAAA,EACrCA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAA,uDAAA,EAK7B,eAAe,CAAC,QAAQ,CAAA,+BAAA,EAKjCA,WAAK,CAAC,KAAK,CAAC,EAAE,CAAA,eAAA,EACRA,WAAK,CAAC,MAAM,CAAC,IAAI,CAAA,EAAA;AAITC,uBAAM,CAACE,2BAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,8DAAA,EAEnBH,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;AAM5C,MAAA,QAAQ,GAAGC,uBAAM,CAACG,uBAAW,CAAC,CAAC,KAAK,CAAC;AAChD,IAAA,KAAK,EAAEJ,WAAK,CAAC,KAAK,CAAC,EAAE;AACrB,IAAA,MAAM,EAAEA,WAAK,CAAC,KAAK,CAAC,EAAE;CACvB,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,8BAAA,EAESA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA,CAAA;AAG3B,MAAA,mBAAmB,GAAGC,uBAAM,CAACI,WAAK,CAAC,CAAC,KAAK,CAAC;AACrD,IAAA,SAAS,EAAE,YAAY;AACvB,IAAA,MAAM,EAAE,QAAQ;AACjB,CAAA,CAAC;AAIW,MAAA,iBAAiB,GAAGJ,uBAAM,CAACI,WAAK,CAAC,CAAC,KAAK,CAAC;AACnD,IAAA,OAAO,EAAE,IAAI;AACd,CAAA,CAAC;AAIW,MAAA,aAAa,GAAGJ,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,mCAAA,EAKZ,CAAC,EAAE,eAAe,EAAE,cAAc,EAAE,KAC3D,eAAe,IAAI,cAAc,GAAG,cAAc,GAAG,UAAU,CAC1D,KAAA,EAAAD,WAAK,CAAC,KAAK,CAAC,EAAE,iFAOH,CAAC,EAAE,cAAc,EAAE,MAAM,cAAc,GAAG,KAAK,GAAG,OAAO,CAAC,CAAA,EAAA;MAIjE,iBAAiB,GAAGC,uBAAM,CAAC,GAAG;;;;;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../../src/components/SelectDropdown/ListItem/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from 'Theme';\nimport { ListBox, ListBoxItem } from 'react-aria-components';\nimport { ArrowUpIcon } from '../../../icons/ArrowUpIcon';\nimport { Stack } from '../../Stack';\n\nconst colourStatesMap = {\n  hovered: '#F0F7FC',\n  pressed: '#E3F0FA',\n  disabled: theme.colors.neutral.grey.light,\n};\n\nexport const StyledListItem = styled(ListBoxItem)<{\n  appearance?: 'primary' | 'secondary';\n}>`\n  border-radius: ${theme.radius.base};\n  cursor: pointer;\n  background-color: ${({ appearance = 'primary' }) =>\n    appearance === 'primary' ? 'white' : theme.colors.neutral.grey.lightest};\n  text-decoration: none;\n\n  &[data-hovered] > div {\n    background-color: ${colourStatesMap.hovered};\n  }\n\n  &[data-pressed] > div {\n    background-color: ${colourStatesMap.pressed};\n  }\n\n  &[data-focused] {\n    outline: 0;\n  }\n\n  &[data-focus-visible] > div {\n    outline: solid ${theme.sizes.xs} ${theme.colors.secondary.blue.light};\n    z-index: 1;\n    position: relative;\n  }\n\n  &[data-dragging] {\n    background-color: ${theme.colors.neutral.grey.base};\n    border-color: ${theme.colors.secondary.blue.base};\n  }\n  &[data-drop-target] {\n    background-color: ${theme.colors.secondary.green.base};\n    border-color: ${theme.colors.secondary.green.base};\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    background-color: ${colourStatesMap.disabled};\n    opacity: 0.75;\n  }\n\n  & > div {\n    padding: ${theme.sizes.sm};\n    border-radius: ${theme.radius.base};\n  }\n`;\n\nexport const StyledListBox = styled(ListBox)`\n  .react-aria-DropIndicator[data-drop-target] {\n    outline: 2px solid ${theme.colors.secondary.blue.base};\n  }\n\n  width: 100%;\n`;\n\nexport const LinkIcon = styled(ArrowUpIcon).attrs({\n  width: theme.sizes.md,\n  height: theme.sizes.md,\n})`\n  transform: rotate(90deg);\n  color: ${theme.colors.neutral.ink.base};\n`;\n\nexport const HorizontalContainer = styled(Stack).attrs({\n  direction: 'horizontal',\n  alignY: 'center',\n})`\n  width: 100%;\n`;\n\nexport const VerticalContainer = styled(Stack).attrs({\n  spacing: 'xs',\n})`\n  width: 100%;\n`;\n\nexport const InfoContainer = styled.div<{\n  hasItemInfoSlot: boolean;\n  hasEndInfoSlot: boolean;\n}>`\n  display: grid;\n  grid-template-columns: ${({ hasItemInfoSlot, hasEndInfoSlot }) =>\n    hasItemInfoSlot && hasEndInfoSlot ? 'auto 1fr 1fr' : 'auto 1fr'};\n  gap: ${theme.sizes.sm};\n  width: 100%;\n  align-items: center;\n  min-width: 0;\n  flex: 1;\n\n  > *:last-child {\n    justify-self: ${({ hasEndInfoSlot }) => (hasEndInfoSlot ? 'end' : 'start')};\n  }\n`;\n\nexport const ItemInfoContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n`;\n"],"names":["theme","styled","ListBoxItem","ListBox","ArrowUpIcon","Stack"],"mappings":";;;;;;;;;;;;;AAMA,MAAM,eAAe,GAAG;AACtB,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK;CAC1C;AAEM,MAAM,cAAc,GAAGC,uBAAM,CAACC,+BAAW,CAAC,CAG9B,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,cAAA,EAAAF,WAAK,CAAC,MAAM,CAAC,IAAI,CAEd,iCAAA,EAAA,CAAC,EAAE,UAAU,GAAG,SAAS,EAAE,KAC7C,UAAU,KAAK,SAAS,GAAG,OAAO,GAAGA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA,6DAAA,EAInD,eAAe,CAAC,OAAO,CAAA,yCAAA,EAIvB,eAAe,CAAC,OAAO,CAAA,uEAAA,EAQ1BA,WAAK,CAAC,KAAK,CAAC,EAAE,CAAA,CAAA,EAAIA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,gEAAA,EAMhDA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,cAAA,EAClCA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,uCAAA,EAG5BA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAA,cAAA,EACrCA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAA,uDAAA,EAK7B,eAAe,CAAC,QAAQ,CAAA,+BAAA,EAKjCA,WAAK,CAAC,KAAK,CAAC,EAAE,CAAA,eAAA,EACRA,WAAK,CAAC,MAAM,CAAC,IAAI,CAAA,EAAA;AAITC,uBAAM,CAACE,2BAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,YAAA,EAAA,CAAA,CAAA,CAAA,8DAAA,EAEnBH,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;AAM5C,MAAA,QAAQ,GAAGC,uBAAM,CAACG,uBAAW,CAAC,CAAC,KAAK,CAAC;AAChD,IAAA,KAAK,EAAEJ,WAAK,CAAC,KAAK,CAAC,EAAE;AACrB,IAAA,MAAM,EAAEA,WAAK,CAAC,KAAK,CAAC,EAAE;CACvB,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,8BAAA,EAESA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA,CAAA;AAG3B,MAAA,mBAAmB,GAAGC,uBAAM,CAACI,WAAK,CAAC,CAAC,KAAK,CAAC;AACrD,IAAA,SAAS,EAAE,YAAY;AACvB,IAAA,MAAM,EAAE,QAAQ;AACjB,CAAA,CAAC;AAIW,MAAA,iBAAiB,GAAGJ,uBAAM,CAACI,WAAK,CAAC,CAAC,KAAK,CAAC;AACnD,IAAA,OAAO,EAAE,IAAI;AACd,CAAA,CAAC;AAIW,MAAA,aAAa,GAAGJ,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,mCAAA,EAKZ,CAAC,EAAE,eAAe,EAAE,cAAc,EAAE,KAC3D,eAAe,IAAI,cAAc,GAAG,cAAc,GAAG,UAAU,CAC1D,KAAA,EAAAD,WAAK,CAAC,KAAK,CAAC,EAAE,iFAOH,CAAC,EAAE,cAAc,EAAE,MAAM,cAAc,GAAG,KAAK,GAAG,OAAO,CAAC,CAAA,EAAA;MAIjE,iBAAiB,GAAGC,uBAAM,CAAC,GAAG;;;;;;;;;"}

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

@@ -10,21 +10,21 @@ const colourStatesMap = {
     pressed: '#E3F0FA',
     disabled: theme.colors.neutral.grey.light,
 };
-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 StyledListItem = styled(ListBoxItem).withConfig({ displayName: "vui--StyledListItem", componentId: "vui--16fm0j" }) `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--6npxd" }) `.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--asg6dc" }) `transform:rotate(90deg);color:${theme.colors.neutral.ink.base};`;
+}).withConfig({ displayName: "vui--LinkIcon", componentId: "vui--14ybt8l" }) `transform:rotate(90deg);color:${theme.colors.neutral.ink.base};`;
 const HorizontalContainer = styled(Stack).attrs({
     direction: 'horizontal',
     alignY: 'center',
-}).withConfig({ displayName: "vui--HorizontalContainer", componentId: "vui--g6yll3" }) `width:100%;`;
+}).withConfig({ displayName: "vui--HorizontalContainer", componentId: "vui--11udtca" }) `width:100%;`;
 const VerticalContainer = styled(Stack).attrs({
     spacing: 'xs',
-}).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;`;
+}).withConfig({ displayName: "vui--VerticalContainer", componentId: "vui--1tl5q7x" }) `width:100%;`;
+const InfoContainer = styled.div.withConfig({ displayName: "vui--InfoContainer", componentId: "vui--i2xz7h" }) `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--1gj2fqj" }) `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/ListItem/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../../src/components/SelectDropdown/ListItem/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from 'Theme';\nimport { ListBox, ListBoxItem } from 'react-aria-components';\nimport { ArrowUpIcon } from '../../../icons/ArrowUpIcon';\nimport { Stack } from '../../Stack';\n\nconst colourStatesMap = {\n  hovered: '#F0F7FC',\n  pressed: '#E3F0FA',\n  disabled: theme.colors.neutral.grey.light,\n};\n\nexport const StyledListItem = styled(ListBoxItem)<{\n  appearance?: 'primary' | 'secondary';\n}>`\n  border-radius: ${theme.radius.base};\n  cursor: pointer;\n  background-color: ${({ appearance = 'primary' }) =>\n    appearance === 'primary' ? 'white' : theme.colors.neutral.grey.lightest};\n  text-decoration: none;\n\n  &[data-hovered] > div {\n    background-color: ${colourStatesMap.hovered};\n  }\n\n  &[data-pressed] > div {\n    background-color: ${colourStatesMap.pressed};\n  }\n\n  &[data-focused] {\n    outline: 0;\n  }\n\n  &[data-focus-visible] > div {\n    outline: solid ${theme.sizes.xs} ${theme.colors.secondary.blue.light};\n    z-index: 1;\n    position: relative;\n  }\n\n  &[data-dragging] {\n    background-color: ${theme.colors.neutral.grey.base};\n    border-color: ${theme.colors.secondary.blue.base};\n  }\n  &[data-drop-target] {\n    background-color: ${theme.colors.secondary.green.base};\n    border-color: ${theme.colors.secondary.green.base};\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    background-color: ${colourStatesMap.disabled};\n    opacity: 0.75;\n  }\n\n  & > div {\n    padding: ${theme.sizes.sm};\n    border-radius: ${theme.radius.base};\n  }\n`;\n\nexport const StyledListBox = styled(ListBox)`\n  .react-aria-DropIndicator[data-drop-target] {\n    outline: 2px solid ${theme.colors.secondary.blue.base};\n  }\n\n  width: 100%;\n`;\n\nexport const LinkIcon = styled(ArrowUpIcon).attrs({\n  width: theme.sizes.md,\n  height: theme.sizes.md,\n})`\n  transform: rotate(90deg);\n  color: ${theme.colors.neutral.ink.base};\n`;\n\nexport const HorizontalContainer = styled(Stack).attrs({\n  direction: 'horizontal',\n  alignY: 'center',\n})`\n  width: 100%;\n`;\n\nexport const VerticalContainer = styled(Stack).attrs({\n  spacing: 'xs',\n})`\n  width: 100%;\n`;\n\nexport const InfoContainer = styled.div<{\n  hasItemInfoSlot: boolean;\n  hasEndInfoSlot: boolean;\n}>`\n  display: grid;\n  grid-template-columns: ${({ hasItemInfoSlot, hasEndInfoSlot }) =>\n    hasItemInfoSlot && hasEndInfoSlot ? 'auto 1fr 1fr' : 'auto 1fr'};\n  gap: ${theme.sizes.sm};\n  width: 100%;\n  align-items: center;\n  min-width: 0;\n  flex: 1;\n\n  > *:last-child {\n    justify-self: ${({ hasEndInfoSlot }) => (hasEndInfoSlot ? 'end' : 'start')};\n  }\n`;\n\nexport const ItemInfoContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n`;\n"],"names":[],"mappings":";;;;;;;AAMA,MAAM,eAAe,GAAG;AACtB,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK;CAC1C;AAEM,MAAM,cAAc,GAAG,MAAM,CAAC,WAAW,CAAC,CAG9B,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,cAAA,EAAA,KAAK,CAAC,MAAM,CAAC,IAAI,CAEd,iCAAA,EAAA,CAAC,EAAE,UAAU,GAAG,SAAS,EAAE,KAC7C,UAAU,KAAK,SAAS,GAAG,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA,6DAAA,EAInD,eAAe,CAAC,OAAO,CAAA,yCAAA,EAIvB,eAAe,CAAC,OAAO,CAAA,uEAAA,EAQ1B,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,CAAA,EAAI,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,gEAAA,EAMhD,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,cAAA,EAClC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,uCAAA,EAG5B,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAA,cAAA,EACrC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAA,uDAAA,EAK7B,eAAe,CAAC,QAAQ,CAAA,+BAAA,EAKjC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,eAAA,EACR,KAAK,CAAC,MAAM,CAAC,IAAI,CAAA,EAAA;AAIT,MAAM,CAAC,OAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,8DAAA,EAEnB,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;AAM5C,MAAA,QAAQ,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC,KAAK,CAAC;AAChD,IAAA,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE;AACrB,IAAA,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE;CACvB,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,8BAAA,EAES,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA,CAAA;AAG3B,MAAA,mBAAmB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;AACrD,IAAA,SAAS,EAAE,YAAY;AACvB,IAAA,MAAM,EAAE,QAAQ;AACjB,CAAA,CAAC;AAIW,MAAA,iBAAiB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;AACnD,IAAA,OAAO,EAAE,IAAI;AACd,CAAA,CAAC;AAIW,MAAA,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,mCAAA,EAKZ,CAAC,EAAE,eAAe,EAAE,cAAc,EAAE,KAC3D,eAAe,IAAI,cAAc,GAAG,cAAc,GAAG,UAAU,CAC1D,KAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE,iFAOH,CAAC,EAAE,cAAc,EAAE,MAAM,cAAc,GAAG,KAAK,GAAG,OAAO,CAAC,CAAA,EAAA;MAIjE,iBAAiB,GAAG,MAAM,CAAC,GAAG;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../../src/components/SelectDropdown/ListItem/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from 'Theme';\nimport { ListBox, ListBoxItem } from 'react-aria-components';\nimport { ArrowUpIcon } from '../../../icons/ArrowUpIcon';\nimport { Stack } from '../../Stack';\n\nconst colourStatesMap = {\n  hovered: '#F0F7FC',\n  pressed: '#E3F0FA',\n  disabled: theme.colors.neutral.grey.light,\n};\n\nexport const StyledListItem = styled(ListBoxItem)<{\n  appearance?: 'primary' | 'secondary';\n}>`\n  border-radius: ${theme.radius.base};\n  cursor: pointer;\n  background-color: ${({ appearance = 'primary' }) =>\n    appearance === 'primary' ? 'white' : theme.colors.neutral.grey.lightest};\n  text-decoration: none;\n\n  &[data-hovered] > div {\n    background-color: ${colourStatesMap.hovered};\n  }\n\n  &[data-pressed] > div {\n    background-color: ${colourStatesMap.pressed};\n  }\n\n  &[data-focused] {\n    outline: 0;\n  }\n\n  &[data-focus-visible] > div {\n    outline: solid ${theme.sizes.xs} ${theme.colors.secondary.blue.light};\n    z-index: 1;\n    position: relative;\n  }\n\n  &[data-dragging] {\n    background-color: ${theme.colors.neutral.grey.base};\n    border-color: ${theme.colors.secondary.blue.base};\n  }\n  &[data-drop-target] {\n    background-color: ${theme.colors.secondary.green.base};\n    border-color: ${theme.colors.secondary.green.base};\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    background-color: ${colourStatesMap.disabled};\n    opacity: 0.75;\n  }\n\n  & > div {\n    padding: ${theme.sizes.sm};\n    border-radius: ${theme.radius.base};\n  }\n`;\n\nexport const StyledListBox = styled(ListBox)`\n  .react-aria-DropIndicator[data-drop-target] {\n    outline: 2px solid ${theme.colors.secondary.blue.base};\n  }\n\n  width: 100%;\n`;\n\nexport const LinkIcon = styled(ArrowUpIcon).attrs({\n  width: theme.sizes.md,\n  height: theme.sizes.md,\n})`\n  transform: rotate(90deg);\n  color: ${theme.colors.neutral.ink.base};\n`;\n\nexport const HorizontalContainer = styled(Stack).attrs({\n  direction: 'horizontal',\n  alignY: 'center',\n})`\n  width: 100%;\n`;\n\nexport const VerticalContainer = styled(Stack).attrs({\n  spacing: 'xs',\n})`\n  width: 100%;\n`;\n\nexport const InfoContainer = styled.div<{\n  hasItemInfoSlot: boolean;\n  hasEndInfoSlot: boolean;\n}>`\n  display: grid;\n  grid-template-columns: ${({ hasItemInfoSlot, hasEndInfoSlot }) =>\n    hasItemInfoSlot && hasEndInfoSlot ? 'auto 1fr 1fr' : 'auto 1fr'};\n  gap: ${theme.sizes.sm};\n  width: 100%;\n  align-items: center;\n  min-width: 0;\n  flex: 1;\n\n  > *:last-child {\n    justify-self: ${({ hasEndInfoSlot }) => (hasEndInfoSlot ? 'end' : 'start')};\n  }\n`;\n\nexport const ItemInfoContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n`;\n"],"names":[],"mappings":";;;;;;;AAMA,MAAM,eAAe,GAAG;AACtB,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK;CAC1C;AAEM,MAAM,cAAc,GAAG,MAAM,CAAC,WAAW,CAAC,CAG9B,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,cAAA,EAAA,KAAK,CAAC,MAAM,CAAC,IAAI,CAEd,iCAAA,EAAA,CAAC,EAAE,UAAU,GAAG,SAAS,EAAE,KAC7C,UAAU,KAAK,SAAS,GAAG,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA,6DAAA,EAInD,eAAe,CAAC,OAAO,CAAA,yCAAA,EAIvB,eAAe,CAAC,OAAO,CAAA,uEAAA,EAQ1B,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,CAAA,EAAI,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,gEAAA,EAMhD,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,cAAA,EAClC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,uCAAA,EAG5B,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAA,cAAA,EACrC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAA,uDAAA,EAK7B,eAAe,CAAC,QAAQ,CAAA,+BAAA,EAKjC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,eAAA,EACR,KAAK,CAAC,MAAM,CAAC,IAAI,CAAA,EAAA;AAIT,MAAM,CAAC,OAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,YAAA,EAAA,CAAA,CAAA,CAAA,8DAAA,EAEnB,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;AAM5C,MAAA,QAAQ,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC,KAAK,CAAC;AAChD,IAAA,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE;AACrB,IAAA,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE;CACvB,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,8BAAA,EAES,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA,CAAA;AAG3B,MAAA,mBAAmB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;AACrD,IAAA,SAAS,EAAE,YAAY;AACvB,IAAA,MAAM,EAAE,QAAQ;AACjB,CAAA,CAAC;AAIW,MAAA,iBAAiB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;AACnD,IAAA,OAAO,EAAE,IAAI;AACd,CAAA,CAAC;AAIW,MAAA,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,mCAAA,EAKZ,CAAC,EAAE,eAAe,EAAE,cAAc,EAAE,KAC3D,eAAe,IAAI,cAAc,GAAG,cAAc,GAAG,UAAU,CAC1D,KAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE,iFAOH,CAAC,EAAE,cAAc,EAAE,MAAM,cAAc,GAAG,KAAK,GAAG,OAAO,CAAC,CAAA,EAAA;MAIjE,iBAAiB,GAAG,MAAM,CAAC,GAAG;;;;"}

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--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};`;
+const InfoContainer = styled__default.default.div.withConfig({ displayName: "vui--InfoContainer", componentId: "vui--1q1w6zs" }) `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--6na2yk" }) `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,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;;;;;"}
+{"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,aAAA,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--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};`;
+const InfoContainer = styled.div.withConfig({ displayName: "vui--InfoContainer", componentId: "vui--1q1w6zs" }) `display:flex;flex-direction:row;align-items:center;gap:${theme.sizes.sm};`;
+const StyledSection = styled(Section).withConfig({ displayName: "vui--StyledSection", componentId: "vui--6na2yk" }) `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,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;;;;"}
+{"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,aAAA,EAAA,CAAA,CAAA,CAAA,cAAA,EACzB,KAAK,CAAC,KAAK,CAAC,IAAI;;;;"}

package/dist/components/SelectDropdown/styled.cjs

@@ -13,16 +13,16 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-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;`;
+const StyledListBox = styled__default.default(reactAriaComponents.ListBox).withConfig({ displayName: "vui--StyledListBox", componentId: "vui--1fqdcy1" }) `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--to2qbd" }) `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 StyledSelectButton = styled__default.default.button.withConfig({ displayName: "vui--StyledSelectButton", componentId: "vui--bwmo8j" }) `${inputStyles.inputFullStyles} ${styled$1.dropdownIndicatorStyles}`;
+const StyledSearch = styled__default.default(Search.Search).withConfig({ displayName: "vui--StyledSearch", componentId: "vui--68uxvn" }) `margin:${index.theme.sizes.sm};`;
+const Separator = styled__default.default.hr.withConfig({ displayName: "vui--Separator", componentId: "vui--1yelizc" }) `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--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};}`;
+}).withConfig({ displayName: "vui--CTAButton", componentId: "vui--fe7n0c" }) `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;

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 { 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;;;;;;;;;"}
+{"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,aAAA,EAAA,CAAA,CAAA,CAAA,UAAA;AAI9C;AACA;AACO,MAAM,kBAAkB,GAAGH,uBAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,yBAAA,EAAA,WAAA,EAAA,aAAA,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,aAAA,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;;;;;;;;;"}

package/dist/components/SelectDropdown/styled.js

@@ -7,16 +7,16 @@ import { Dropdown } from '../Dropdown/Dropdown.js';
 import { Search } from '../Search/Search.js';
 import { dropdownIndicatorStyles } from '../Select/styled.js';
 
-const StyledListBox = styled(ListBox).withConfig({ displayName: "vui--StyledListBox", componentId: "vui--1yki6jj" }) `overflow-y:scroll;max-height:300px;padding:${theme.sizes.sm};scroll-padding:${theme.sizes.xs} 0;&[data-empty]{display:flex;align-items:center;justify-content:center;}`;
-const StyledDropdown = styled(Dropdown).withConfig({ displayName: "vui--StyledDropdown", componentId: "vui--1y837ee" }) `padding:0;`;
+const StyledListBox = styled(ListBox).withConfig({ displayName: "vui--StyledListBox", componentId: "vui--1fqdcy1" }) `overflow-y:scroll;max-height:300px;padding:${theme.sizes.sm};scroll-padding:${theme.sizes.xs} 0;&[data-empty]{display:flex;align-items:center;justify-content:center;}`;
+const StyledDropdown = styled(Dropdown).withConfig({ displayName: "vui--StyledDropdown", componentId: "vui--to2qbd" }) `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.button.withConfig({ displayName: "vui--StyledSelectButton", componentId: "vui--1048pyr" }) `${inputFullStyles} ${dropdownIndicatorStyles}`;
-const StyledSearch = styled(Search).withConfig({ displayName: "vui--StyledSearch", componentId: "vui--18mma9h" }) `margin:${theme.sizes.sm};`;
-const Separator = styled.hr.withConfig({ displayName: "vui--Separator", componentId: "vui--1dp7yp3" }) `height:1px;background:${theme.colors.neutral.grey.base};border:none;margin:0 0;width:100%;`;
+const StyledSelectButton = styled.button.withConfig({ displayName: "vui--StyledSelectButton", componentId: "vui--bwmo8j" }) `${inputFullStyles} ${dropdownIndicatorStyles}`;
+const StyledSearch = styled(Search).withConfig({ displayName: "vui--StyledSearch", componentId: "vui--68uxvn" }) `margin:${theme.sizes.sm};`;
+const Separator = styled.hr.withConfig({ displayName: "vui--Separator", componentId: "vui--1yelizc" }) `height:1px;background:${theme.colors.neutral.grey.base};border:none;margin:0 0;width:100%;`;
 const CTAButton = styled(Button).attrs({
     variant: 'flat',
-}).withConfig({ displayName: "vui--CTAButton", componentId: "vui--no46x0" }) `justify-content:start;padding-left:${theme.sizes.xs};margin:${theme.sizes.sm} ${theme.sizes.xs};border-radius:${theme.radius.base};font-size:14px;svg{width:${theme.sizes.md};height:${theme.sizes.md};}`;
+}).withConfig({ displayName: "vui--CTAButton", componentId: "vui--fe7n0c" }) `justify-content:start;padding-left:${theme.sizes.xs};margin:${theme.sizes.sm} ${theme.sizes.xs};border-radius:${theme.radius.base};font-size:14px;svg{width:${theme.sizes.md};height:${theme.sizes.md};}`;
 
 export { CTAButton, Separator, StyledDropdown, StyledListBox, StyledSearch, StyledSelectButton };
 //# sourceMappingURL=styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","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":[],"mappings":";;;;;;;;;MASa,aAAa,GAAG,MAAM,CAAC,OAAO,CAAC,CAG/B,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,2CAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE,CACP,gBAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,yEAAA;MASrB,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,UAAA;AAI9C;AACA;AACO,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,yBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,EAC3C,eAAe,CAAA,CAAA,EACf,uBAAuB,CAAA;AAGpB,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,OAAA,EAC9B,KAAK,CAAC,KAAK,CAAC,EAAE;AAGb,MAAA,SAAS,GAAG,MAAM,CAAC,EAAE,CAElB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,sBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AAMjC,MAAA,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC;AAC5C,IAAA,OAAO,EAAE,MAAM;AAChB,CAAA,CAAC,iHAEgB,KAAK,CAAC,KAAK,CAAC,EAAE,CACpB,QAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,CAAA,EAAI,KAAK,CAAC,KAAK,CAAC,EAAE,CACzB,eAAA,EAAA,KAAK,CAAC,MAAM,CAAC,IAAI,CAAA,0BAAA,EAGvB,KAAK,CAAC,KAAK,CAAC,EAAE,WACb,KAAK,CAAC,KAAK,CAAC,EAAE;;;;"}
+{"version":3,"file":"styled.js","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":[],"mappings":";;;;;;;;;MASa,aAAa,GAAG,MAAM,CAAC,OAAO,CAAC,CAG/B,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,2CAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE,CACP,gBAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,yEAAA;MASrB,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,UAAA;AAI9C;AACA;AACO,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,yBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,EAC3C,eAAe,CAAA,CAAA,EACf,uBAAuB,CAAA;AAGpB,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,OAAA,EAC9B,KAAK,CAAC,KAAK,CAAC,EAAE;AAGb,MAAA,SAAS,GAAG,MAAM,CAAC,EAAE,CAElB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,sBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AAMjC,MAAA,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC;AAC5C,IAAA,OAAO,EAAE,MAAM;AAChB,CAAA,CAAC,iHAEgB,KAAK,CAAC,KAAK,CAAC,EAAE,CACpB,QAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,CAAA,EAAI,KAAK,CAAC,KAAK,CAAC,EAAE,CACzB,eAAA,EAAA,KAAK,CAAC,MAAM,CAAC,IAAI,CAAA,0BAAA,EAGvB,KAAK,CAAC,KAAK,CAAC,EAAE,WACb,KAAK,CAAC,KAAK,CAAC,EAAE;;;;"}