npm - @veeqo/ui - Versions diffs - 9.9.3 → 10.0.0-beta.1 - Mend

@veeqo/ui 9.9.3 → 10.0.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (308) hide show

package/dist/components/Pagination/styled.js CHANGED Viewed

@@ -4,9 +4,9 @@ import { Stack } from '../Stack/Stack.js';
 import { Button } from '../Button/Button.js';
 import { TextField } from '../TextField/index.js';
-const PageLimitContainer = styled(Stack).withConfig({ displayName: "vui--PageLimitContainer", componentId: "vui--11yg0z2" }) `width:${theme.sizes.lg};height:30px;background-color:${theme.colors.neutral.grey.light};border:1px solid ${theme.colors.neutral.grey.base};border-radius:${theme.sizes.xs};`;
-const PaginationButton = styled(Button).withConfig({ displayName: "vui--PaginationButton", componentId: "vui--1xoa6c5" }) `color:${theme.colors.neutral.ink.base};width:32px;height:32px;svg{width:24px;height:24px;}`;
-const PageInput = styled(TextField).withConfig({ displayName: "vui--PageInput", componentId: "vui--vpfeol" }) `&[type='number']{width:5.5ch;}`;
+const PageLimitContainer = styled(Stack).withConfig({ displayName: "vui--PageLimitContainer", componentId: "vui--1psd9g8" }) `width:${theme.sizes.lg};height:30px;background-color:${theme.colors.neutral.grey.light};border:1px solid ${theme.colors.neutral.grey.base};border-radius:${theme.sizes.xs};`;
+const PaginationButton = styled(Button).withConfig({ displayName: "vui--PaginationButton", componentId: "vui--oolvks" }) `color:${theme.colors.neutral.ink.base};width:32px;height:32px;svg{width:24px;height:24px;}`;
+const PageInput = styled(TextField).withConfig({ displayName: "vui--PageInput", componentId: "vui--jjraff" }) `&[type='number']{width:5.5ch;}`;
 export { PageInput, PageLimitContainer, PaginationButton };
 //# sourceMappingURL=styled.js.map

package/dist/components/Pagination/styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styled.js","sources":["../../../src/components/Pagination/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\nimport { Stack } from '../Stack';\nimport { Button } from '../Button';\nimport { TextField } from '../TextField';\n\nexport const PageLimitContainer = styled(Stack)`\n width: ${theme.sizes.lg};\n height: 30px;\n background-color: ${theme.colors.neutral.grey.light};\n\n border: 1px solid ${theme.colors.neutral.grey.base};\n border-radius: ${theme.sizes.xs};\n`;\n\nexport const PaginationButton = styled(Button)`\n color: ${theme.colors.neutral.ink.base};\n width: 32px;\n height: 32px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n`;\n\nexport const PageInput = styled(TextField)`\n &[type='number'] {\n width: 5.5ch;\n }\n`;\n"],"names":[],"mappings":";;;;;;AAMa,MAAA,kBAAkB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,yBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EACpC,KAAK,CAAC,KAAK,CAAC,EAAE,iCAEH,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,kBAAA,EAE/B,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,kBACjC,KAAK,CAAC,KAAK,CAAC,EAAE;AAGpB,MAAA,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,~~cAAA~~,EAAA,CAAA,CAAA,CAAA,MAAA,EACnC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;MAU3B,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,8BAAA;;;;"}
1	+ {"version":3,"file":"styled.js","sources":["../../../src/components/Pagination/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\nimport { Stack } from '../Stack';\nimport { Button } from '../Button';\nimport { TextField } from '../TextField';\n\nexport const PageLimitContainer = styled(Stack)`\n width: ${theme.sizes.lg};\n height: 30px;\n background-color: ${theme.colors.neutral.grey.light};\n\n border: 1px solid ${theme.colors.neutral.grey.base};\n border-radius: ${theme.sizes.xs};\n`;\n\nexport const PaginationButton = styled(Button)`\n color: ${theme.colors.neutral.ink.base};\n width: 32px;\n height: 32px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n`;\n\nexport const PageInput = styled(TextField)`\n &[type='number'] {\n width: 5.5ch;\n }\n`;\n"],"names":[],"mappings":";;;;;;AAMa,MAAA,kBAAkB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,yBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EACpC,KAAK,CAAC,KAAK,CAAC,EAAE,iCAEH,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,kBAAA,EAE/B,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,kBACjC,KAAK,CAAC,KAAK,CAAC,EAAE;AAGpB,MAAA,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EACnC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;MAU3B,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,8BAAA;;;;"}

package/dist/components/Popover/styled.cjs CHANGED Viewed

@@ -6,8 +6,8 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-const PopoverDialog = styled__default.default.dialog.withConfig({ displayName: "vui--PopoverDialog", componentId: "vui--kmoo2l" }) `z-index:${({ zIndex }) => zIndex + 1};padding:0;margin:0;border:none;background:transparent;`;
-const Backdrop = styled__default.default.div.withConfig({ displayName: "vui--Backdrop", componentId: "vui--9esryp" }) `position:fixed;top:0;right:0;bottom:0;left:0;z-index:${({ zIndex }) => zIndex};`;
+const PopoverDialog = styled__default.default.dialog.withConfig({ displayName: "vui--PopoverDialog", componentId: "vui--cg48a2" }) `z-index:${({ zIndex }) => zIndex + 1};padding:0;margin:0;border:none;background:transparent;`;
+const Backdrop = styled__default.default.div.withConfig({ displayName: "vui--Backdrop", componentId: "vui--49or9l" }) `position:fixed;top:0;right:0;bottom:0;left:0;z-index:${({ zIndex }) => zIndex};`;
 exports.Backdrop = Backdrop;
 exports.PopoverDialog = PopoverDialog;

package/dist/components/Popover/styled.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
-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};`;
+const PopoverDialog = styled.dialog.withConfig({ displayName: "vui--PopoverDialog", componentId: "vui--cg48a2" }) `z-index:${({ zIndex }) => zIndex + 1};padding:0;margin:0;border:none;background:transparent;`;
+const Backdrop = styled.div.withConfig({ displayName: "vui--Backdrop", componentId: "vui--49or9l" }) `position:fixed;top:0;right:0;bottom:0;left:0;z-index:${({ zIndex }) => zIndex};`;
 export { Backdrop, PopoverDialog };
 //# sourceMappingURL=styled.js.map

package/dist/components/PriceInput/styled.cjs CHANGED Viewed

@@ -11,10 +11,10 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-const StyledTextField = styled__default.default(index.TextField).withConfig({ displayName: "vui--StyledTextField", componentId: "vui--8gyz01" }) `color:${index$1.theme.colors.neutral.ink.dark};width:100%;&:focus{box-shadow:none;border-color:none;border-right-width:0;border-color:${index$1.theme.colors.neutral.ink.lightest};}`;
-const PrefixContainer = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--PrefixContainer", componentId: "vui--fsc9el" }) `user-select:none;border:1px solid ${index$1.theme.colors.neutral.ink.lightest};border-radius:4px;display:flex;align-items:center;justify-content:center;width:${({ size }) => (size === 'sm' ? '30px' : '36px')};background-color:${({ disabled }) => (disabled ? index$1.theme.colors.neutral.grey.light : 'white')};flex-shrink:0;${({ size }) => (size === 'sm' ? '> span { font-size: 12px }' : '')};&:active{z-index:0;border-right-width:0;+ input{z-index:0;border-left-width:1px;}}`;
-const PrefixText = styled__default.default(Text.Text).withConfig({ displayName: "vui--PrefixText", componentId: "vui--w81sf" }) `font-size:14px;`;
-const PriceInputGroup = styled__default.default(index$2.InputGroup).withConfig({ displayName: "vui--PriceInputGroup", componentId: "vui--jpuoo1" }) `display:inline-flex;border-radius:4px;min-width:125px;width:100%;${({ hasError }) => hasError &&
+const StyledTextField = styled__default.default(index.TextField).withConfig({ displayName: "vui--StyledTextField", componentId: "vui--bdxre8" }) `color:${index$1.theme.colors.neutral.ink.dark};width:100%;&:focus{box-shadow:none;border-color:none;border-right-width:0;border-color:${index$1.theme.colors.neutral.ink.lightest};}`;
+const PrefixContainer = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--PrefixContainer", componentId: "vui--1pz53n4" }) `user-select:none;border:1px solid ${index$1.theme.colors.neutral.ink.lightest};border-radius:4px;display:flex;align-items:center;justify-content:center;width:${({ size }) => (size === 'sm' ? '30px' : '36px')};background-color:${({ disabled }) => (disabled ? index$1.theme.colors.neutral.grey.light : 'white')};flex-shrink:0;${({ size }) => (size === 'sm' ? '> span { font-size: 12px }' : '')};&:active{z-index:0;border-right-width:0;+ input{z-index:0;border-left-width:1px;}}`;
+const PrefixText = styled__default.default(Text.Text).withConfig({ displayName: "vui--PrefixText", componentId: "vui--1n3xr2g" }) `font-size:14px;`;
+const PriceInputGroup = styled__default.default(index$2.InputGroup).withConfig({ displayName: "vui--PriceInputGroup", componentId: "vui--1sahwox" }) `display:inline-flex;border-radius:4px;min-width:125px;width:100%;${({ hasError }) => hasError &&
     `
     box-shadow: 0 0 0 4px ${index$1.theme.colors.secondary.red.light};

package/dist/components/PriceInput/styled.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styled.cjs","sources":["../../../src/components/PriceInput/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { TextField } from '../TextField';\nimport { BaseContainer } from '../BaseContainer';\nimport { Text } from '../Text';\nimport { InputGroup } from '../InputGroup';\nimport { ComponentSize } from '../types';\nimport { theme } from '../../theme';\n\nexport const StyledTextField = styled(TextField)`\n color: ${theme.colors.neutral.ink.dark};\n width: 100%;\n\n &:focus {\n box-shadow: none;\n border-color: none;\n border-right-width: 0;\n border-color: ${theme.colors.neutral.ink.lightest};\n }\n`;\n\nexport const PrefixContainer = styled(BaseContainer)<{ disabled: boolean; size?: ComponentSize }>`\n user-select: none;\n border: 1px solid ${theme.colors.neutral.ink.lightest};\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n width: ${({ size }) => (size === 'sm' ? '30px' : '36px')};\n background-color: ${({ disabled }) => (disabled ? theme.colors.neutral.grey.light : 'white')};\n flex-shrink: 0;\n\n ${({ size }) => (size === 'sm' ? '> span { font-size: 12px }' : '')};\n\n &:active {\n z-index: 0;\n border-right-width: 0;\n\n + input {\n z-index: 0;\n border-left-width: 1px;\n }\n }\n`;\n\nexport const PrefixText = styled(Text)`\n font-size: 14px;\n`;\n\nexport const PriceInputGroup = styled(InputGroup)<{ hasError?: boolean }>`\n display: inline-flex;\n border-radius: 4px;\n min-width: 125px;\n width: 100%;\n\n ${({ hasError }) =>\n hasError &&\n `\n box-shadow: 0 0 0 4px ${theme.colors.secondary.red.light};\n\n > * {\n border-top-color: ${theme.colors.secondary.red.base};\n border-bottom-color: ${theme.colors.secondary.red.base};\n }\n\n > :first-child {\n border-left-color: ${theme.colors.secondary.red.base};\n }\n\n > div:last-child {\n > button:first-child {\n border-top-color: ${theme.colors.secondary.red.base};\n border-right-color: ${theme.colors.secondary.red.base};\n }\n\n > button:last-child {\n border-right-color: ${theme.colors.secondary.red.base};\n border-bottom-color: ${theme.colors.secondary.red.base};\n }\n }\n `}\n\n &:focus-within {\n outline: 0;\n box-shadow: ${({ hasError }) =>\n hasError ? '' : `0 0 0 4px ${theme.colors.secondary.blue.light}`};\n }\n\n &:focus-within > {\n border-top-color: ${({ hasError }) =>\n hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n border-bottom-color: ${({ hasError }) =>\n hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n }\n\n &:focus-within > *:first-child {\n border-left-color: ${({ hasError }) =>\n hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n }\n\n &:focus-within > div:last-child {\n > button:first-child {\n border-top-color: ${({ hasError }) =>\n hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n border-right-color: ${({ hasError }) =>\n hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n }\n\n > button:last-child {\n border-right-color: ${({ hasError }) =>\n hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n border-bottom-color: ${({ hasError }) =>\n hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n }\n }\n`;\n"],"names":["styled","TextField","theme","BaseContainer","Text","InputGroup"],"mappings":";;;;;;;;;;;;;AASO,MAAM,eAAe,GAAGA,uBAAM,CAACC,eAAS,CAAC,CACrC,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAAAC,aAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAOpB,wFAAA,EAAAA,aAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ;AAIxC,MAAA,eAAe,GAAGF,uBAAM,CAACG,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,~~aAAA~~,EAAA,CAAA,CAAA,CAAA,kCAAA,EAE9BD,aAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,mFAK5C,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,KAAK,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC,CACpC,kBAAA,EAAA,CAAC,EAAE,QAAQ,EAAE,MAAM,QAAQ,GAAGA,aAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,CAAA,eAAA,EAG1F,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,KAAK,IAAI,GAAG,4BAA4B,GAAG,EAAE,CAAC;MAaxD,UAAU,GAAGF,uBAAM,CAACI,SAAI,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,~~YAAA~~,EAAA,CAAA,CAAA,CAAA,eAAA;AAIzB,MAAA,eAAe,GAAGJ,uBAAM,CAACK,kBAAU,CAAC,CAM7C,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,~~aAAA~~,EAAA,CAAA,CAAA,CAAA,iEAAA,EAAA,CAAC,EAAE,QAAQ,EAAE,KACb,QAAQ;AACR,IAAA;AACwB,0BAAA,EAAAH,aAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAA;;;AAGlC,wBAAA,EAAAA,aAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;AAC5B,2BAAA,EAAAA,aAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;;;;AAIjC,yBAAA,EAAAA,aAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;;;;;AAK9B,0BAAA,EAAAA,aAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;AAC7B,4BAAA,EAAAA,aAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;;;;AAI/B,4BAAA,EAAAA,aAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;AAC9B,6BAAA,EAAAA,aAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;;;AAG3D,EAAA,CAAA,CAAA,qCAAA,EAIe,CAAC,EAAE,QAAQ,EAAE,KACzB,QAAQ,GAAG,EAAE,GAAG,CAAA,UAAA,EAAaA,aAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,CAAE,CAI9C,sCAAA,EAAA,CAAC,EAAE,QAAQ,EAAE,KAC/B,QAAQ,GAAGA,aAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,GAAGA,aAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,qBAAA,EACxD,CAAC,EAAE,QAAQ,EAAE,KAClC,QAAQ,GAAGA,aAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,GAAGA,aAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,mDAAA,EAI1D,CAAC,EAAE,QAAQ,EAAE,KAChC,QAAQ,GAAGA,aAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,GAAGA,aAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,wEAAA,EAKzD,CAAC,EAAE,QAAQ,EAAE,KAC/B,QAAQ,GAAGA,aAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,GAAGA,aAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,oBAAA,EACzD,CAAC,EAAE,QAAQ,EAAE,KACjC,QAAQ,GAAGA,aAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,GAAGA,aAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,4CAIzD,CAAC,EAAE,QAAQ,EAAE,KACjC,QAAQ,GAAGA,aAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,GAAGA,aAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,wBACxD,CAAC,EAAE,QAAQ,EAAE,KAClC,QAAQ,GAAGA,aAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,GAAGA,aAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;;;;;;;"}
1	+ {"version":3,"file":"styled.cjs","sources":["../../../src/components/PriceInput/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { TextField } from '../TextField';\nimport { BaseContainer } from '../BaseContainer';\nimport { Text } from '../Text';\nimport { InputGroup } from '../InputGroup';\nimport { ComponentSize } from '../types';\nimport { theme } from '../../theme';\n\nexport const StyledTextField = styled(TextField)`\n color: ${theme.colors.neutral.ink.dark};\n width: 100%;\n\n &:focus {\n box-shadow: none;\n border-color: none;\n border-right-width: 0;\n border-color: ${theme.colors.neutral.ink.lightest};\n }\n`;\n\nexport const PrefixContainer = styled(BaseContainer)<{ disabled: boolean; size?: ComponentSize }>`\n user-select: none;\n border: 1px solid ${theme.colors.neutral.ink.lightest};\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n width: ${({ size }) => (size === 'sm' ? '30px' : '36px')};\n background-color: ${({ disabled }) => (disabled ? theme.colors.neutral.grey.light : 'white')};\n flex-shrink: 0;\n\n ${({ size }) => (size === 'sm' ? '> span { font-size: 12px }' : '')};\n\n &:active {\n z-index: 0;\n border-right-width: 0;\n\n + input {\n z-index: 0;\n border-left-width: 1px;\n }\n }\n`;\n\nexport const PrefixText = styled(Text)`\n font-size: 14px;\n`;\n\nexport const PriceInputGroup = styled(InputGroup)<{ hasError?: boolean }>`\n display: inline-flex;\n border-radius: 4px;\n min-width: 125px;\n width: 100%;\n\n ${({ hasError }) =>\n hasError &&\n `\n box-shadow: 0 0 0 4px ${theme.colors.secondary.red.light};\n\n > * {\n border-top-color: ${theme.colors.secondary.red.base};\n border-bottom-color: ${theme.colors.secondary.red.base};\n }\n\n > :first-child {\n border-left-color: ${theme.colors.secondary.red.base};\n }\n\n > div:last-child {\n > button:first-child {\n border-top-color: ${theme.colors.secondary.red.base};\n border-right-color: ${theme.colors.secondary.red.base};\n }\n\n > button:last-child {\n border-right-color: ${theme.colors.secondary.red.base};\n border-bottom-color: ${theme.colors.secondary.red.base};\n }\n }\n `}\n\n &:focus-within {\n outline: 0;\n box-shadow: ${({ hasError }) =>\n hasError ? '' : `0 0 0 4px ${theme.colors.secondary.blue.light}`};\n }\n\n &:focus-within > {\n border-top-color: ${({ hasError }) =>\n hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n border-bottom-color: ${({ hasError }) =>\n hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n }\n\n &:focus-within > *:first-child {\n border-left-color: ${({ hasError }) =>\n hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n }\n\n &:focus-within > div:last-child {\n > button:first-child {\n border-top-color: ${({ hasError }) =>\n hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n border-right-color: ${({ hasError }) =>\n hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n }\n\n > button:last-child {\n border-right-color: ${({ hasError }) =>\n hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n border-bottom-color: ${({ hasError }) =>\n hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n }\n }\n`;\n"],"names":["styled","TextField","theme","BaseContainer","Text","InputGroup"],"mappings":"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"}

package/dist/components/PriceInput/styled.js CHANGED Viewed

@@ -5,10 +5,10 @@ import { Text } from '../Text/Text.js';
 import { InputGroup } from '../InputGroup/index.js';
 import { theme } from '../../theme/index.js';
-const StyledTextField = styled(TextField).withConfig({ displayName: "vui--StyledTextField", componentId: "vui--8gyz01" }) `color:${theme.colors.neutral.ink.dark};width:100%;&:focus{box-shadow:none;border-color:none;border-right-width:0;border-color:${theme.colors.neutral.ink.lightest};}`;
-const PrefixContainer = styled(BaseContainer).withConfig({ displayName: "vui--PrefixContainer", componentId: "vui--fsc9el" }) `user-select:none;border:1px solid ${theme.colors.neutral.ink.lightest};border-radius:4px;display:flex;align-items:center;justify-content:center;width:${({ size }) => (size === 'sm' ? '30px' : '36px')};background-color:${({ disabled }) => (disabled ? theme.colors.neutral.grey.light : 'white')};flex-shrink:0;${({ size }) => (size === 'sm' ? '> span { font-size: 12px }' : '')};&:active{z-index:0;border-right-width:0;+ input{z-index:0;border-left-width:1px;}}`;
-const PrefixText = styled(Text).withConfig({ displayName: "vui--PrefixText", componentId: "vui--w81sf" }) `font-size:14px;`;
-const PriceInputGroup = styled(InputGroup).withConfig({ displayName: "vui--PriceInputGroup", componentId: "vui--jpuoo1" }) `display:inline-flex;border-radius:4px;min-width:125px;width:100%;${({ hasError }) => hasError &&
+const StyledTextField = styled(TextField).withConfig({ displayName: "vui--StyledTextField", componentId: "vui--bdxre8" }) `color:${theme.colors.neutral.ink.dark};width:100%;&:focus{box-shadow:none;border-color:none;border-right-width:0;border-color:${theme.colors.neutral.ink.lightest};}`;
+const PrefixContainer = styled(BaseContainer).withConfig({ displayName: "vui--PrefixContainer", componentId: "vui--1pz53n4" }) `user-select:none;border:1px solid ${theme.colors.neutral.ink.lightest};border-radius:4px;display:flex;align-items:center;justify-content:center;width:${({ size }) => (size === 'sm' ? '30px' : '36px')};background-color:${({ disabled }) => (disabled ? theme.colors.neutral.grey.light : 'white')};flex-shrink:0;${({ size }) => (size === 'sm' ? '> span { font-size: 12px }' : '')};&:active{z-index:0;border-right-width:0;+ input{z-index:0;border-left-width:1px;}}`;
+const PrefixText = styled(Text).withConfig({ displayName: "vui--PrefixText", componentId: "vui--1n3xr2g" }) `font-size:14px;`;
+const PriceInputGroup = styled(InputGroup).withConfig({ displayName: "vui--PriceInputGroup", componentId: "vui--1sahwox" }) `display:inline-flex;border-radius:4px;min-width:125px;width:100%;${({ hasError }) => hasError &&
     `
     box-shadow: 0 0 0 4px ${theme.colors.secondary.red.light};

package/dist/components/PriceInput/styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styled.js","sources":["../../../src/components/PriceInput/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { TextField } from '../TextField';\nimport { BaseContainer } from '../BaseContainer';\nimport { Text } from '../Text';\nimport { InputGroup } from '../InputGroup';\nimport { ComponentSize } from '../types';\nimport { theme } from '../../theme';\n\nexport const StyledTextField = styled(TextField)`\n color: ${theme.colors.neutral.ink.dark};\n width: 100%;\n\n &:focus {\n box-shadow: none;\n border-color: none;\n border-right-width: 0;\n border-color: ${theme.colors.neutral.ink.lightest};\n }\n`;\n\nexport const PrefixContainer = styled(BaseContainer)<{ disabled: boolean; size?: ComponentSize }>`\n user-select: none;\n border: 1px solid ${theme.colors.neutral.ink.lightest};\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n width: ${({ size }) => (size === 'sm' ? '30px' : '36px')};\n background-color: ${({ disabled }) => (disabled ? theme.colors.neutral.grey.light : 'white')};\n flex-shrink: 0;\n\n ${({ size }) => (size === 'sm' ? '> span { font-size: 12px }' : '')};\n\n &:active {\n z-index: 0;\n border-right-width: 0;\n\n + input {\n z-index: 0;\n border-left-width: 1px;\n }\n }\n`;\n\nexport const PrefixText = styled(Text)`\n font-size: 14px;\n`;\n\nexport const PriceInputGroup = styled(InputGroup)<{ hasError?: boolean }>`\n display: inline-flex;\n border-radius: 4px;\n min-width: 125px;\n width: 100%;\n\n ${({ hasError }) =>\n hasError &&\n `\n box-shadow: 0 0 0 4px ${theme.colors.secondary.red.light};\n\n > * {\n border-top-color: ${theme.colors.secondary.red.base};\n border-bottom-color: ${theme.colors.secondary.red.base};\n }\n\n > :first-child {\n border-left-color: ${theme.colors.secondary.red.base};\n }\n\n > div:last-child {\n > button:first-child {\n border-top-color: ${theme.colors.secondary.red.base};\n border-right-color: ${theme.colors.secondary.red.base};\n }\n\n > button:last-child {\n border-right-color: ${theme.colors.secondary.red.base};\n border-bottom-color: ${theme.colors.secondary.red.base};\n }\n }\n `}\n\n &:focus-within {\n outline: 0;\n box-shadow: ${({ hasError }) =>\n hasError ? '' : `0 0 0 4px ${theme.colors.secondary.blue.light}`};\n }\n\n &:focus-within > {\n border-top-color: ${({ hasError }) =>\n hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n border-bottom-color: ${({ hasError }) =>\n hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n }\n\n &:focus-within > *:first-child {\n border-left-color: ${({ hasError }) =>\n hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n }\n\n &:focus-within > div:last-child {\n > button:first-child {\n border-top-color: ${({ hasError }) =>\n hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n border-right-color: ${({ hasError }) =>\n hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n }\n\n > button:last-child {\n border-right-color: ${({ hasError }) =>\n hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n border-bottom-color: ${({ hasError }) =>\n hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n }\n }\n`;\n"],"names":[],"mappings":";;;;;;;AASO,MAAM,eAAe,GAAG,MAAM,CAAC,SAAS,CAAC,CACrC,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAOpB,wFAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ;AAIxC,MAAA,eAAe,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,~~aAAA~~,EAAA,CAAA,CAAA,CAAA,kCAAA,EAE9B,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,mFAK5C,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,KAAK,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC,CACpC,kBAAA,EAAA,CAAC,EAAE,QAAQ,EAAE,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,CAAA,eAAA,EAG1F,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,KAAK,IAAI,GAAG,4BAA4B,GAAG,EAAE,CAAC;MAaxD,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,~~YAAA~~,EAAA,CAAA,CAAA,CAAA,eAAA;AAIzB,MAAA,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC,CAM7C,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,~~aAAA~~,EAAA,CAAA,CAAA,CAAA,iEAAA,EAAA,CAAC,EAAE,QAAQ,EAAE,KACb,QAAQ;AACR,IAAA;AACwB,0BAAA,EAAA,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAA;;;AAGlC,wBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;AAC5B,2BAAA,EAAA,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;;;;AAIjC,yBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;;;;;AAK9B,0BAAA,EAAA,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;AAC7B,4BAAA,EAAA,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;;;;AAI/B,4BAAA,EAAA,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;AAC9B,6BAAA,EAAA,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;;;AAG3D,EAAA,CAAA,CAAA,qCAAA,EAIe,CAAC,EAAE,QAAQ,EAAE,KACzB,QAAQ,GAAG,EAAE,GAAG,CAAA,UAAA,EAAa,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,CAAE,CAI9C,sCAAA,EAAA,CAAC,EAAE,QAAQ,EAAE,KAC/B,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,qBAAA,EACxD,CAAC,EAAE,QAAQ,EAAE,KAClC,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,mDAAA,EAI1D,CAAC,EAAE,QAAQ,EAAE,KAChC,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,wEAAA,EAKzD,CAAC,EAAE,QAAQ,EAAE,KAC/B,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,oBAAA,EACzD,CAAC,EAAE,QAAQ,EAAE,KACjC,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,4CAIzD,CAAC,EAAE,QAAQ,EAAE,KACjC,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,wBACxD,CAAC,EAAE,QAAQ,EAAE,KAClC,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;;;;"}
1	+ {"version":3,"file":"styled.js","sources":["../../../src/components/PriceInput/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { TextField } from '../TextField';\nimport { BaseContainer } from '../BaseContainer';\nimport { Text } from '../Text';\nimport { InputGroup } from '../InputGroup';\nimport { ComponentSize } from '../types';\nimport { theme } from '../../theme';\n\nexport const StyledTextField = styled(TextField)`\n color: ${theme.colors.neutral.ink.dark};\n width: 100%;\n\n &:focus {\n box-shadow: none;\n border-color: none;\n border-right-width: 0;\n border-color: ${theme.colors.neutral.ink.lightest};\n }\n`;\n\nexport const PrefixContainer = styled(BaseContainer)<{ disabled: boolean; size?: ComponentSize }>`\n user-select: none;\n border: 1px solid ${theme.colors.neutral.ink.lightest};\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n width: ${({ size }) => (size === 'sm' ? '30px' : '36px')};\n background-color: ${({ disabled }) => (disabled ? theme.colors.neutral.grey.light : 'white')};\n flex-shrink: 0;\n\n ${({ size }) => (size === 'sm' ? '> span { font-size: 12px }' : '')};\n\n &:active {\n z-index: 0;\n border-right-width: 0;\n\n + input {\n z-index: 0;\n border-left-width: 1px;\n }\n }\n`;\n\nexport const PrefixText = styled(Text)`\n font-size: 14px;\n`;\n\nexport const PriceInputGroup = styled(InputGroup)<{ hasError?: boolean }>`\n display: inline-flex;\n border-radius: 4px;\n min-width: 125px;\n width: 100%;\n\n ${({ hasError }) =>\n hasError &&\n `\n box-shadow: 0 0 0 4px ${theme.colors.secondary.red.light};\n\n > * {\n border-top-color: ${theme.colors.secondary.red.base};\n border-bottom-color: ${theme.colors.secondary.red.base};\n }\n\n > :first-child {\n border-left-color: ${theme.colors.secondary.red.base};\n }\n\n > div:last-child {\n > button:first-child {\n border-top-color: ${theme.colors.secondary.red.base};\n border-right-color: ${theme.colors.secondary.red.base};\n }\n\n > button:last-child {\n border-right-color: ${theme.colors.secondary.red.base};\n border-bottom-color: ${theme.colors.secondary.red.base};\n }\n }\n `}\n\n &:focus-within {\n outline: 0;\n box-shadow: ${({ hasError }) =>\n hasError ? '' : `0 0 0 4px ${theme.colors.secondary.blue.light}`};\n }\n\n &:focus-within > {\n border-top-color: ${({ hasError }) =>\n hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n border-bottom-color: ${({ hasError }) =>\n hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n }\n\n &:focus-within > *:first-child {\n border-left-color: ${({ hasError }) =>\n hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n }\n\n &:focus-within > div:last-child {\n > button:first-child {\n border-top-color: ${({ hasError }) =>\n hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n border-right-color: ${({ hasError }) =>\n hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n }\n\n > button:last-child {\n border-right-color: ${({ hasError }) =>\n hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n border-bottom-color: ${({ hasError }) =>\n hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n }\n }\n`;\n"],"names":[],"mappings":"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"}

package/dist/components/Radio/styled.cjs CHANGED Viewed

@@ -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--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;}`;
+const Input = styled__default.default.input.withConfig({ displayName: "vui--Input", componentId: "vui--14lc9u" }) `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 CHANGED Viewed

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
-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;}`;
+const Input = styled.input.withConfig({ displayName: "vui--Input", componentId: "vui--14lc9u" }) `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 CHANGED Viewed

@@ -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--ejkp56" }) `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--o1yf2n" }) `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 CHANGED Viewed

@@ -1,7 +1,7 @@
 import React__default from 'react';
 import styled from 'styled-components';
-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;`;
+const ScreenReaderOnlyElement = styled.span.withConfig({ displayName: "vui--ScreenReaderOnlyElement", componentId: "vui--o1yf2n" }) `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/Search/styled.cjs CHANGED Viewed

@@ -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--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 }) => {
+const Input = styled__default.default(index.TextField).withConfig({ displayName: "vui--Input", componentId: "vui--1jvzatv" }) `flex-grow:2;margin-top:0;margin-bottom:0;`;
+const IconContainer = styled__default.default.div.withConfig({ displayName: "vui--IconContainer", componentId: "vui--12eib7v" }) `position:absolute;`;
+const Container = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--g7dno3" }) `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.cjs.map CHANGED Viewed

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

package/dist/components/Search/styled.js CHANGED Viewed

@@ -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--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 }) => {
+const Input = styled(TextField).withConfig({ displayName: "vui--Input", componentId: "vui--1jvzatv" }) `flex-grow:2;margin-top:0;margin-bottom:0;`;
+const IconContainer = styled.div.withConfig({ displayName: "vui--IconContainer", componentId: "vui--12eib7v" }) `position:absolute;`;
+const Container = styled(BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--g7dno3" }) `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.map CHANGED Viewed

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

package/dist/components/SegmentedControl/styled.cjs CHANGED Viewed

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

package/dist/components/SegmentedControl/styled.js CHANGED Viewed

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

package/dist/components/Select/styled.cjs CHANGED Viewed

@@ -6,7 +6,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-const SelectInput = styled__default.default.select.withConfig({ displayName: "vui--SelectInput", componentId: "vui--1v4mu6a" }) `box-sizing:border-box;appearance:none;display:flex;align-items:center;justify-content:center;padding:0 2.5rem 0 0.5rem;border-radius:4px;background-color:white;border:1px solid #959fa8;color:#1b2126;background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0.5em top 50%,0 0;${({ sizeVariant }) => {
+const SelectInput = styled__default.default.select.withConfig({ displayName: "vui--SelectInput", componentId: "vui--1h93380" }) `box-sizing:border-box;appearance:none;display:flex;align-items:center;justify-content:center;padding:0 2.5rem 0 0.5rem;border-radius:4px;background-color:white;border:1px solid #959fa8;color:#1b2126;background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0.5em top 50%,0 0;${({ sizeVariant }) => {
     let height = '40px';
     let fontSize = '14px';
     if (sizeVariant === 'sm') {

package/dist/components/Select/styled.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
-const SelectInput = styled.select.withConfig({ displayName: "vui--SelectInput", componentId: "vui--1v4mu6a" }) `box-sizing:border-box;appearance:none;display:flex;align-items:center;justify-content:center;padding:0 2.5rem 0 0.5rem;border-radius:4px;background-color:white;border:1px solid #959fa8;color:#1b2126;background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0.5em top 50%,0 0;${({ sizeVariant }) => {
+const SelectInput = styled.select.withConfig({ displayName: "vui--SelectInput", componentId: "vui--1h93380" }) `box-sizing:border-box;appearance:none;display:flex;align-items:center;justify-content:center;padding:0 2.5rem 0 0.5rem;border-radius:4px;background-color:white;border:1px solid #959fa8;color:#1b2126;background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0.5em top 50%,0 0;${({ sizeVariant }) => {
     let height = '40px';
     let fontSize = '14px';
     if (sizeVariant === 'sm') {

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

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

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

	@@ -1 +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 '../../../tempIcons/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;;;;;;;;;"}
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 '../../../tempIcons/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":"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"}

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

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

package/dist/components/SelectDropdown/ListItem/styled.js.map CHANGED Viewed

	@@ -1 +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 '../../../tempIcons/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;;;;"}
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 '../../../tempIcons/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;;;;"}

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

@@ -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--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};`;
+const InfoContainer = styled__default.default.div.withConfig({ displayName: "vui--InfoContainer", componentId: "vui--699bks" }) `display:flex;flex-direction:row;align-items:center;gap:${index.theme.sizes.sm};`;
+const StyledSection = styled__default.default(reactAriaComponents.Section).withConfig({ displayName: "vui--StyledSection", componentId: "vui--y61rg1" }) `border-radius:${index.theme.sizes.base};`;
 exports.InfoContainer = InfoContainer;
 exports.StyledSection = StyledSection;

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

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

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

@@ -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--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};`;
+const InfoContainer = styled.div.withConfig({ displayName: "vui--InfoContainer", componentId: "vui--699bks" }) `display:flex;flex-direction:row;align-items:center;gap:${theme.sizes.sm};`;
+const StyledSection = styled(Section).withConfig({ displayName: "vui--StyledSection", componentId: "vui--y61rg1" }) `border-radius:${theme.sizes.base};`;
 export { InfoContainer, StyledSection };
 //# sourceMappingURL=styled.js.map

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

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

package/dist/components/SelectDropdown/styled.cjs CHANGED Viewed

@@ -11,7 +11,7 @@ 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--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 StyledListBox = styled__default.default(reactAriaComponents.ListBox).withConfig({ displayName: "vui--StyledListBox", componentId: "vui--8u3k3v" }) `overflow-y:scroll;max-height:300px;padding:${index.theme.sizes.sm};scroll-padding:${index.theme.sizes.xs} 0;&[data-empty]{display:flex;align-items:center;justify-content:center;}`;
 const StyledDropdown = styled__default.default(Dropdown.Dropdown).attrs((props) => ({
     ctaProps: {
         ...props.ctaProps,
@@ -24,12 +24,12 @@ const StyledDropdown = styled__default.default(Dropdown.Dropdown).attrs((props)
             flex: 1,
         },
     },
-})).withConfig({ displayName: "vui--StyledDropdown", componentId: "vui--to2qbd" }) `padding:0;`;
-const StyledSearch = styled__default.default(Search.Search).withConfig({ displayName: "vui--StyledSearch", componentId: "vui--122i7bz" }) `margin:${index.theme.sizes.sm};`;
-const Separator = styled__default.default.hr.withConfig({ displayName: "vui--Separator", componentId: "vui--1vuemb8" }) `height:1px;background:${index.theme.colors.neutral.grey.base};border:none;margin:0 0;width:100%;`;
+})).withConfig({ displayName: "vui--StyledDropdown", componentId: "vui--1au29pg" }) `padding:0;`;
+const StyledSearch = styled__default.default(Search.Search).withConfig({ displayName: "vui--StyledSearch", componentId: "vui--1mbksln" }) `margin:${index.theme.sizes.sm};`;
+const Separator = styled__default.default.hr.withConfig({ displayName: "vui--Separator", componentId: "vui--y8yx6s" }) `height:1px;background:${index.theme.colors.neutral.grey.base};border:none;margin:0 0;width:100%;`;
 const CTAButton = styled__default.default(Button.Button).attrs({
     variant: 'flat',
-}).withConfig({ displayName: "vui--CTAButton", componentId: "vui--1udm7tz" }) `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--jmck4k" }) `justify-content:start;padding-left:${index.theme.sizes.xs};margin:${index.theme.sizes.sm} ${index.theme.sizes.xs};border-radius:${index.theme.radius.base};font-size:14px;svg{width:${index.theme.sizes.md};height:${index.theme.sizes.md};}`;
 exports.CTAButton = CTAButton;
 exports.Separator = Separator;

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

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

package/dist/components/SelectDropdown/styled.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { Button } from '../Button/Button.js';
 import { Dropdown } from '../Dropdown/Dropdown.js';
 import { Search } from '../Search/Search.js';
-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 StyledListBox = styled(ListBox).withConfig({ displayName: "vui--StyledListBox", componentId: "vui--8u3k3v" }) `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).attrs((props) => ({
     ctaProps: {
         ...props.ctaProps,
@@ -18,12 +18,12 @@ const StyledDropdown = styled(Dropdown).attrs((props) => ({
             flex: 1,
         },
     },
-})).withConfig({ displayName: "vui--StyledDropdown", componentId: "vui--to2qbd" }) `padding:0;`;
-const StyledSearch = styled(Search).withConfig({ displayName: "vui--StyledSearch", componentId: "vui--122i7bz" }) `margin:${theme.sizes.sm};`;
-const Separator = styled.hr.withConfig({ displayName: "vui--Separator", componentId: "vui--1vuemb8" }) `height:1px;background:${theme.colors.neutral.grey.base};border:none;margin:0 0;width:100%;`;
+})).withConfig({ displayName: "vui--StyledDropdown", componentId: "vui--1au29pg" }) `padding:0;`;
+const StyledSearch = styled(Search).withConfig({ displayName: "vui--StyledSearch", componentId: "vui--1mbksln" }) `margin:${theme.sizes.sm};`;
+const Separator = styled.hr.withConfig({ displayName: "vui--Separator", componentId: "vui--y8yx6s" }) `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--1udm7tz" }) `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--jmck4k" }) `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 };
 //# sourceMappingURL=styled.js.map