npm - @veeqo/ui - Versions diffs - 10.0.1-beta.1 → 10.1.0 - Mend

@veeqo/ui 10.0.1-beta.1 → 10.1.0

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 (288) hide show

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

package/dist/components/SelectDropdown/ListItemSection/styled.cjs.map 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,~~cAAA~~,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,cAAA,EAAA,CAAA,CAAA,CAAA,uDAAA,EAAAC,WAAK,CAAC,KAAK,CAAC,EAAE;AAGhB,MAAM,aAAa,GAAGD,uBAAM,CAACE,2BAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,cAAA,EACzBD,WAAK,CAAC,KAAK,CAAC,IAAI;;;;;"}

package/dist/components/SelectDropdown/ListItemSection/styled.js 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--1xxb78p" }) `display:flex;flex-direction:row;align-items:center;gap:${theme.sizes.sm};`;
-const StyledSection = styled(Section).withConfig({ displayName: "vui--StyledSection", componentId: "vui--1rci0y7" }) `border-radius:${theme.sizes.base};`;
+const InfoContainer = styled.div.withConfig({ displayName: "vui--InfoContainer", componentId: "vui--1q1w6zs" }) `display:flex;flex-direction:row;align-items:center;gap:${theme.sizes.sm};`;
+const StyledSection = styled(Section).withConfig({ displayName: "vui--StyledSection", componentId: "vui--6na2yk" }) `border-radius:${theme.sizes.base};`;
 export { InfoContainer, StyledSection };
 //# sourceMappingURL=styled.js.map

package/dist/components/SelectDropdown/ListItemSection/styled.js.map 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,~~cAAA~~,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,cAAA,EAAA,CAAA,CAAA,CAAA,uDAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE;AAGhB,MAAM,aAAa,GAAG,MAAM,CAAC,OAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,cAAA,EACzB,KAAK,CAAC,KAAK,CAAC,IAAI;;;;"}

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

@@ -13,16 +13,16 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-const StyledListBox = styled__default.default(reactAriaComponents.ListBox).withConfig({ displayName: "vui--StyledListBox", componentId: "vui--1yki6jj" }) `overflow-y:scroll;max-height:300px;padding:${index.theme.sizes.sm};scroll-padding:${index.theme.sizes.xs} 0;&[data-empty]{display:flex;align-items:center;justify-content:center;}`;
-const StyledDropdown = styled__default.default(Dropdown.Dropdown).withConfig({ displayName: "vui--StyledDropdown", componentId: "vui--1y837ee" }) `padding:0;`;
+const StyledListBox = styled__default.default(reactAriaComponents.ListBox).withConfig({ displayName: "vui--StyledListBox", componentId: "vui--1fqdcy1" }) `overflow-y:scroll;max-height:300px;padding:${index.theme.sizes.sm};scroll-padding:${index.theme.sizes.xs} 0;&[data-empty]{display:flex;align-items:center;justify-content:center;}`;
+const StyledDropdown = styled__default.default(Dropdown.Dropdown).withConfig({ displayName: "vui--StyledDropdown", componentId: "vui--to2qbd" }) `padding:0;`;
 // Create a styled button that uses the base input styles and the dropdown indicator styles
 // to replicate the `<Select>` component's appearance.
-const StyledSelectButton = styled__default.default.button.withConfig({ displayName: "vui--StyledSelectButton", componentId: "vui--1048pyr" }) `${inputStyles.inputFullStyles} ${styled$1.dropdownIndicatorStyles}`;
-const StyledSearch = styled__default.default(Search.Search).withConfig({ displayName: "vui--StyledSearch", componentId: "vui--18mma9h" }) `margin:${index.theme.sizes.sm};`;
-const Separator = styled__default.default.hr.withConfig({ displayName: "vui--Separator", componentId: "vui--1dp7yp3" }) `height:1px;background:${index.theme.colors.neutral.grey.base};border:none;margin:0 0;width:100%;`;
+const StyledSelectButton = styled__default.default.button.withConfig({ displayName: "vui--StyledSelectButton", componentId: "vui--bwmo8j" }) `${inputStyles.inputFullStyles} ${styled$1.dropdownIndicatorStyles}`;
+const StyledSearch = styled__default.default(Search.Search).withConfig({ displayName: "vui--StyledSearch", componentId: "vui--68uxvn" }) `margin:${index.theme.sizes.sm};`;
+const Separator = styled__default.default.hr.withConfig({ displayName: "vui--Separator", componentId: "vui--1yelizc" }) `height:1px;background:${index.theme.colors.neutral.grey.base};border:none;margin:0 0;width:100%;`;
 const CTAButton = styled__default.default(Button.Button).attrs({
     variant: 'flat',
-}).withConfig({ displayName: "vui--CTAButton", componentId: "vui--no46x0" }) `justify-content:start;padding-left:${index.theme.sizes.xs};margin:${index.theme.sizes.sm} ${index.theme.sizes.xs};border-radius:${index.theme.radius.base};font-size:14px;svg{width:${index.theme.sizes.md};height:${index.theme.sizes.md};}`;
+}).withConfig({ displayName: "vui--CTAButton", componentId: "vui--fe7n0c" }) `justify-content:start;padding-left:${index.theme.sizes.xs};margin:${index.theme.sizes.sm} ${index.theme.sizes.xs};border-radius:${index.theme.radius.base};font-size:14px;svg{width:${index.theme.sizes.md};height:${index.theme.sizes.md};}`;
 exports.CTAButton = CTAButton;
 exports.Separator = Separator;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"styled.cjs","sources":["../../../src/components/SelectDropdown/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { ListBox } from 'react-aria-components';\nimport { theme } from '../../theme';\nimport { inputFullStyles } from '../../utils/forms/inputStyles';\nimport { Button } from '../Button';\nimport { Dropdown } from '../Dropdown';\nimport { Search } from '../Search';\nimport { dropdownIndicatorStyles } from '../Select/styled';\n\nexport const StyledListBox = styled(ListBox)`\n overflow-y: scroll;\n max-height: 300px;\n padding: ${theme.sizes.sm};\n scroll-padding: ${theme.sizes.xs} 0;\n\n &[data-empty] {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n`;\n\nexport const StyledDropdown = styled(Dropdown)`\n padding: 0;\n`;\n\n// Create a styled button that uses the base input styles and the dropdown indicator styles\n// to replicate the `<Select>` component's appearance.\nexport const StyledSelectButton = styled.button`\n ${inputFullStyles}\n ${dropdownIndicatorStyles}\n`;\n\nexport const StyledSearch = styled(Search)`\n margin: ${theme.sizes.sm};\n`;\n\nexport const Separator = styled.hr`\n height: 1px;\n background: ${theme.colors.neutral.grey.base};\n border: none;\n margin: 0 0;\n width: 100%;\n`;\n\nexport const CTAButton = styled(Button).attrs({\n variant: 'flat',\n})`\n justify-content: start;\n padding-left: ${theme.sizes.xs};\n margin: ${theme.sizes.sm} ${theme.sizes.xs};\n border-radius: ${theme.radius.base};\n font-size: 14px;\n svg {\n width: ${theme.sizes.md};\n height: ${theme.sizes.md};\n }\n`;\n"],"names":["styled","ListBox","theme","Dropdown","inputFullStyles","dropdownIndicatorStyles","Search","Button"],"mappings":";;;;;;;;;;;;;;;MASa,aAAa,GAAGA,uBAAM,CAACC,2BAAO,CAAC,CAG/B,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,2CAAA,EAAAC,WAAK,CAAC,KAAK,CAAC,EAAE,CACP,gBAAA,EAAAA,WAAK,CAAC,KAAK,CAAC,EAAE,CAAA,yEAAA;MASrB,cAAc,GAAGF,uBAAM,CAACG,iBAAQ,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,~~cAAA~~,EAAA,CAAA,CAAA,CAAA,UAAA;AAI9C;AACA;AACO,MAAM,kBAAkB,GAAGH,uBAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,yBAAA,EAAA,WAAA,EAAA,~~cAAA~~,EAAA,CAAA,CAAA,CAAA,EAC3CI,2BAAe,CAAA,CAAA,EACfC,gCAAuB,CAAA;AAGpB,MAAM,YAAY,GAAGL,uBAAM,CAACM,aAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,~~cAAA~~,EAAA,CAAA,CAAA,CAAA,OAAA,EAC9BJ,WAAK,CAAC,KAAK,CAAC,EAAE;AAGb,MAAA,SAAS,GAAGF,uBAAM,CAAC,EAAE,CAElB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,sBAAA,EAAAE,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AAMjC,MAAA,SAAS,GAAGF,uBAAM,CAACO,aAAM,CAAC,CAAC,KAAK,CAAC;AAC5C,IAAA,OAAO,EAAE,MAAM;AAChB,CAAA,CAAC,iHAEgBL,WAAK,CAAC,KAAK,CAAC,EAAE,CACpB,QAAA,EAAAA,WAAK,CAAC,KAAK,CAAC,EAAE,CAAA,CAAA,EAAIA,WAAK,CAAC,KAAK,CAAC,EAAE,CACzB,eAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,IAAI,CAAA,0BAAA,EAGvBA,WAAK,CAAC,KAAK,CAAC,EAAE,WACbA,WAAK,CAAC,KAAK,CAAC,EAAE;;;;;;;;;"}
1	+ {"version":3,"file":"styled.cjs","sources":["../../../src/components/SelectDropdown/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { ListBox } from 'react-aria-components';\nimport { theme } from '../../theme';\nimport { inputFullStyles } from '../../utils/forms/inputStyles';\nimport { Button } from '../Button';\nimport { Dropdown } from '../Dropdown';\nimport { Search } from '../Search';\nimport { dropdownIndicatorStyles } from '../Select/styled';\n\nexport const StyledListBox = styled(ListBox)`\n overflow-y: scroll;\n max-height: 300px;\n padding: ${theme.sizes.sm};\n scroll-padding: ${theme.sizes.xs} 0;\n\n &[data-empty] {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n`;\n\nexport const StyledDropdown = styled(Dropdown)`\n padding: 0;\n`;\n\n// Create a styled button that uses the base input styles and the dropdown indicator styles\n// to replicate the `<Select>` component's appearance.\nexport const StyledSelectButton = styled.button`\n ${inputFullStyles}\n ${dropdownIndicatorStyles}\n`;\n\nexport const StyledSearch = styled(Search)`\n margin: ${theme.sizes.sm};\n`;\n\nexport const Separator = styled.hr`\n height: 1px;\n background: ${theme.colors.neutral.grey.base};\n border: none;\n margin: 0 0;\n width: 100%;\n`;\n\nexport const CTAButton = styled(Button).attrs({\n variant: 'flat',\n})`\n justify-content: start;\n padding-left: ${theme.sizes.xs};\n margin: ${theme.sizes.sm} ${theme.sizes.xs};\n border-radius: ${theme.radius.base};\n font-size: 14px;\n svg {\n width: ${theme.sizes.md};\n height: ${theme.sizes.md};\n }\n`;\n"],"names":["styled","ListBox","theme","Dropdown","inputFullStyles","dropdownIndicatorStyles","Search","Button"],"mappings":";;;;;;;;;;;;;;;MASa,aAAa,GAAGA,uBAAM,CAACC,2BAAO,CAAC,CAG/B,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,2CAAA,EAAAC,WAAK,CAAC,KAAK,CAAC,EAAE,CACP,gBAAA,EAAAA,WAAK,CAAC,KAAK,CAAC,EAAE,CAAA,yEAAA;MASrB,cAAc,GAAGF,uBAAM,CAACG,iBAAQ,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,UAAA;AAI9C;AACA;AACO,MAAM,kBAAkB,GAAGH,uBAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,yBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,EAC3CI,2BAAe,CAAA,CAAA,EACfC,gCAAuB,CAAA;AAGpB,MAAM,YAAY,GAAGL,uBAAM,CAACM,aAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,OAAA,EAC9BJ,WAAK,CAAC,KAAK,CAAC,EAAE;AAGb,MAAA,SAAS,GAAGF,uBAAM,CAAC,EAAE,CAElB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,sBAAA,EAAAE,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AAMjC,MAAA,SAAS,GAAGF,uBAAM,CAACO,aAAM,CAAC,CAAC,KAAK,CAAC;AAC5C,IAAA,OAAO,EAAE,MAAM;AAChB,CAAA,CAAC,iHAEgBL,WAAK,CAAC,KAAK,CAAC,EAAE,CACpB,QAAA,EAAAA,WAAK,CAAC,KAAK,CAAC,EAAE,CAAA,CAAA,EAAIA,WAAK,CAAC,KAAK,CAAC,EAAE,CACzB,eAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,IAAI,CAAA,0BAAA,EAGvBA,WAAK,CAAC,KAAK,CAAC,EAAE,WACbA,WAAK,CAAC,KAAK,CAAC,EAAE;;;;;;;;;"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"styled.js","sources":["../../../src/components/SelectDropdown/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { ListBox } from 'react-aria-components';\nimport { theme } from '../../theme';\nimport { inputFullStyles } from '../../utils/forms/inputStyles';\nimport { Button } from '../Button';\nimport { Dropdown } from '../Dropdown';\nimport { Search } from '../Search';\nimport { dropdownIndicatorStyles } from '../Select/styled';\n\nexport const StyledListBox = styled(ListBox)`\n overflow-y: scroll;\n max-height: 300px;\n padding: ${theme.sizes.sm};\n scroll-padding: ${theme.sizes.xs} 0;\n\n &[data-empty] {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n`;\n\nexport const StyledDropdown = styled(Dropdown)`\n padding: 0;\n`;\n\n// Create a styled button that uses the base input styles and the dropdown indicator styles\n// to replicate the `<Select>` component's appearance.\nexport const StyledSelectButton = styled.button`\n ${inputFullStyles}\n ${dropdownIndicatorStyles}\n`;\n\nexport const StyledSearch = styled(Search)`\n margin: ${theme.sizes.sm};\n`;\n\nexport const Separator = styled.hr`\n height: 1px;\n background: ${theme.colors.neutral.grey.base};\n border: none;\n margin: 0 0;\n width: 100%;\n`;\n\nexport const CTAButton = styled(Button).attrs({\n variant: 'flat',\n})`\n justify-content: start;\n padding-left: ${theme.sizes.xs};\n margin: ${theme.sizes.sm} ${theme.sizes.xs};\n border-radius: ${theme.radius.base};\n font-size: 14px;\n svg {\n width: ${theme.sizes.md};\n height: ${theme.sizes.md};\n }\n`;\n"],"names":[],"mappings":";;;;;;;;;MASa,aAAa,GAAG,MAAM,CAAC,OAAO,CAAC,CAG/B,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,2CAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE,CACP,gBAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,yEAAA;MASrB,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,~~cAAA~~,EAAA,CAAA,CAAA,CAAA,UAAA;AAI9C;AACA;AACO,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,yBAAA,EAAA,WAAA,EAAA,~~cAAA~~,EAAA,CAAA,CAAA,CAAA,EAC3C,eAAe,CAAA,CAAA,EACf,uBAAuB,CAAA;AAGpB,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,~~cAAA~~,EAAA,CAAA,CAAA,CAAA,OAAA,EAC9B,KAAK,CAAC,KAAK,CAAC,EAAE;AAGb,MAAA,SAAS,GAAG,MAAM,CAAC,EAAE,CAElB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,sBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AAMjC,MAAA,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC;AAC5C,IAAA,OAAO,EAAE,MAAM;AAChB,CAAA,CAAC,iHAEgB,KAAK,CAAC,KAAK,CAAC,EAAE,CACpB,QAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,CAAA,EAAI,KAAK,CAAC,KAAK,CAAC,EAAE,CACzB,eAAA,EAAA,KAAK,CAAC,MAAM,CAAC,IAAI,CAAA,0BAAA,EAGvB,KAAK,CAAC,KAAK,CAAC,EAAE,WACb,KAAK,CAAC,KAAK,CAAC,EAAE;;;;"}
1	+ {"version":3,"file":"styled.js","sources":["../../../src/components/SelectDropdown/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { ListBox } from 'react-aria-components';\nimport { theme } from '../../theme';\nimport { inputFullStyles } from '../../utils/forms/inputStyles';\nimport { Button } from '../Button';\nimport { Dropdown } from '../Dropdown';\nimport { Search } from '../Search';\nimport { dropdownIndicatorStyles } from '../Select/styled';\n\nexport const StyledListBox = styled(ListBox)`\n overflow-y: scroll;\n max-height: 300px;\n padding: ${theme.sizes.sm};\n scroll-padding: ${theme.sizes.xs} 0;\n\n &[data-empty] {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n`;\n\nexport const StyledDropdown = styled(Dropdown)`\n padding: 0;\n`;\n\n// Create a styled button that uses the base input styles and the dropdown indicator styles\n// to replicate the `<Select>` component's appearance.\nexport const StyledSelectButton = styled.button`\n ${inputFullStyles}\n ${dropdownIndicatorStyles}\n`;\n\nexport const StyledSearch = styled(Search)`\n margin: ${theme.sizes.sm};\n`;\n\nexport const Separator = styled.hr`\n height: 1px;\n background: ${theme.colors.neutral.grey.base};\n border: none;\n margin: 0 0;\n width: 100%;\n`;\n\nexport const CTAButton = styled(Button).attrs({\n variant: 'flat',\n})`\n justify-content: start;\n padding-left: ${theme.sizes.xs};\n margin: ${theme.sizes.sm} ${theme.sizes.xs};\n border-radius: ${theme.radius.base};\n font-size: 14px;\n svg {\n width: ${theme.sizes.md};\n height: ${theme.sizes.md};\n }\n`;\n"],"names":[],"mappings":";;;;;;;;;MASa,aAAa,GAAG,MAAM,CAAC,OAAO,CAAC,CAG/B,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,2CAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE,CACP,gBAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,yEAAA;MASrB,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,UAAA;AAI9C;AACA;AACO,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,yBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,EAC3C,eAAe,CAAA,CAAA,EACf,uBAAuB,CAAA;AAGpB,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,OAAA,EAC9B,KAAK,CAAC,KAAK,CAAC,EAAE;AAGb,MAAA,SAAS,GAAG,MAAM,CAAC,EAAE,CAElB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,sBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AAMjC,MAAA,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC;AAC5C,IAAA,OAAO,EAAE,MAAM;AAChB,CAAA,CAAC,iHAEgB,KAAK,CAAC,KAAK,CAAC,EAAE,CACpB,QAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,CAAA,EAAI,KAAK,CAAC,KAAK,CAAC,EAAE,CACzB,eAAA,EAAA,KAAK,CAAC,MAAM,CAAC,IAAI,CAAA,0BAAA,EAGvB,KAAK,CAAC,KAAK,CAAC,EAAE,WACb,KAAK,CAAC,KAAK,CAAC,EAAE;;;;"}

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

@@ -7,8 +7,8 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-const ShortcutKeysContainer = styled__default.default.div.withConfig({ displayName: "vui--ShortcutKeysContainer", componentId: "vui--1lr0ae8" }) `--kbdTextColor:${(props) => (props.$inverse ? '#ffffff' : '')};box-sizing:border-box;display:flex;align-items:center;gap:4px;color:var(--kbdTextColor, ${index.theme.colors.neutral.ink.base});font-family:${index.theme.text.bodySmall.fontFamily};font-style:${index.theme.text.bodySmall.fontStyle};font-size:${index.theme.text.bodySmall.fontSize};line-height:${index.theme.text.bodySmall.lineHeight};font-weight:${index.theme.text.bodySmall.fontWeight};text-decoration:${index.theme.text.bodySmall.textDecoration};letter-spacing:${index.theme.text.bodySmall.letterSpacing};`;
-const Kbd = styled__default.default.kbd.withConfig({ displayName: "vui--Kbd", componentId: "vui--1igoyn5" }) `box-sizing:border-box;color:var(--kbdTextColor, ${index.theme.colors.neutral.ink.base});display:grid;place-items:center;text-transform:capitalize;border:1px solid var(--kbdTextColor, ${index.theme.colors.neutral.ink.base});border-radius:3px;padding:1px 3px;font-size:inherit;line-height:inherit;min-width:20px;font-family:${index.theme.text.bodySmall.fontFamily};font-style:${index.theme.text.bodySmall.fontStyle};`;
+const ShortcutKeysContainer = styled__default.default.div.withConfig({ displayName: "vui--ShortcutKeysContainer", componentId: "vui--t1odf6" }) `--kbdTextColor:${(props) => (props.$inverse ? '#ffffff' : '')};box-sizing:border-box;display:flex;align-items:center;gap:4px;color:var(--kbdTextColor, ${index.theme.colors.neutral.ink.base});font-family:${index.theme.text.bodySmall.fontFamily};font-style:${index.theme.text.bodySmall.fontStyle};font-size:${index.theme.text.bodySmall.fontSize};line-height:${index.theme.text.bodySmall.lineHeight};font-weight:${index.theme.text.bodySmall.fontWeight};text-decoration:${index.theme.text.bodySmall.textDecoration};letter-spacing:${index.theme.text.bodySmall.letterSpacing};`;
+const Kbd = styled__default.default.kbd.withConfig({ displayName: "vui--Kbd", componentId: "vui--651mmm" }) `box-sizing:border-box;color:var(--kbdTextColor, ${index.theme.colors.neutral.ink.base});display:grid;place-items:center;text-transform:capitalize;border:1px solid var(--kbdTextColor, ${index.theme.colors.neutral.ink.base});border-radius:3px;padding:1px 3px;font-size:inherit;line-height:inherit;min-width:20px;font-family:${index.theme.text.bodySmall.fontFamily};font-style:${index.theme.text.bodySmall.fontStyle};`;
 exports.Kbd = Kbd;
 exports.ShortcutKeysContainer = ShortcutKeysContainer;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"styled.cjs","sources":["../../../src/components/ShortcutKeys/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { theme } from '../../theme';\nimport { ShortcutKeysContainerProps } from './types';\n\nexport const ShortcutKeysContainer = styled.div<ShortcutKeysContainerProps>`\n // If the inverse prop is passed, set the variable --kbdTextColor to the inverse color\n --kbdTextColor: ${(props) => (props.$inverse ? '#ffffff' : '')};\n box-sizing: border-box;\n display: flex;\n align-items: center;\n gap: 4px;\n color: var(--kbdTextColor, ${theme.colors.neutral.ink.base});\n font-family: ${theme.text.bodySmall.fontFamily};\n font-style: ${theme.text.bodySmall.fontStyle};\n font-size: ${theme.text.bodySmall.fontSize};\n line-height: ${theme.text.bodySmall.lineHeight};\n font-weight: ${theme.text.bodySmall.fontWeight};\n text-decoration: ${theme.text.bodySmall.textDecoration};\n letter-spacing: ${theme.text.bodySmall.letterSpacing};\n`;\n\nexport const Kbd = styled.kbd`\n box-sizing: border-box;\n color: var(--kbdTextColor, ${theme.colors.neutral.ink.base});\n display: grid;\n place-items: center;\n text-transform: capitalize;\n border: 1px solid var(--kbdTextColor, ${theme.colors.neutral.ink.base});\n border-radius: 3px;\n padding: 1px 3px;\n font-size: inherit;\n line-height: inherit;\n min-width: 20px;\n font-family: ${theme.text.bodySmall.fontFamily};\n font-style: ${theme.text.bodySmall.fontStyle};\n`;\n"],"names":["styled","theme"],"mappings":";;;;;;;;;MAKa,qBAAqB,GAAGA,uBAAM,CAAC,GAAG,~~0GAE3B~~,CAAC,KAAK,MAAM,KAAK,CAAC,QAAQ,GAAG,SAAS,GAAG,EAAE,CAAC,CAKjC,yFAAA,EAAAC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA,cAAA,EAC3CA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAChC,YAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,cAC/BA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAA,aAAA,EAC3BA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAC/B,aAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,oBAC3BA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,cAAc,CAAA,gBAAA,EACpCA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,aAAa,CAAA,CAAA;MAGzC,GAAG,GAAGD,uBAAM,CAAC,GAAG,~~yHAEEC~~,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAIlB,iGAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA,qGAAA,EAMtDA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAChC,YAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS;;;;;"}
1	+ {"version":3,"file":"styled.cjs","sources":["../../../src/components/ShortcutKeys/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { theme } from '../../theme';\nimport { ShortcutKeysContainerProps } from './types';\n\nexport const ShortcutKeysContainer = styled.div<ShortcutKeysContainerProps>`\n // If the inverse prop is passed, set the variable --kbdTextColor to the inverse color\n --kbdTextColor: ${(props) => (props.$inverse ? '#ffffff' : '')};\n box-sizing: border-box;\n display: flex;\n align-items: center;\n gap: 4px;\n color: var(--kbdTextColor, ${theme.colors.neutral.ink.base});\n font-family: ${theme.text.bodySmall.fontFamily};\n font-style: ${theme.text.bodySmall.fontStyle};\n font-size: ${theme.text.bodySmall.fontSize};\n line-height: ${theme.text.bodySmall.lineHeight};\n font-weight: ${theme.text.bodySmall.fontWeight};\n text-decoration: ${theme.text.bodySmall.textDecoration};\n letter-spacing: ${theme.text.bodySmall.letterSpacing};\n`;\n\nexport const Kbd = styled.kbd`\n box-sizing: border-box;\n color: var(--kbdTextColor, ${theme.colors.neutral.ink.base});\n display: grid;\n place-items: center;\n text-transform: capitalize;\n border: 1px solid var(--kbdTextColor, ${theme.colors.neutral.ink.base});\n border-radius: 3px;\n padding: 1px 3px;\n font-size: inherit;\n line-height: inherit;\n min-width: 20px;\n font-family: ${theme.text.bodySmall.fontFamily};\n font-style: ${theme.text.bodySmall.fontStyle};\n`;\n"],"names":["styled","theme"],"mappings":";;;;;;;;;MAKa,qBAAqB,GAAGA,uBAAM,CAAC,GAAG,yGAE3B,CAAC,KAAK,MAAM,KAAK,CAAC,QAAQ,GAAG,SAAS,GAAG,EAAE,CAAC,CAKjC,yFAAA,EAAAC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA,cAAA,EAC3CA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAChC,YAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,cAC/BA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAA,aAAA,EAC3BA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAC/B,aAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,oBAC3BA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,cAAc,CAAA,gBAAA,EACpCA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,aAAa,CAAA,CAAA;MAGzC,GAAG,GAAGD,uBAAM,CAAC,GAAG,wHAEEC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAIlB,iGAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA,qGAAA,EAMtDA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAChC,YAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS;;;;;"}

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

@@ -1,8 +1,8 @@
 import styled from 'styled-components';
 import { theme } from '../../theme/index.js';
-const ShortcutKeysContainer = styled.div.withConfig({ displayName: "vui--ShortcutKeysContainer", componentId: "vui--1lr0ae8" }) `--kbdTextColor:${(props) => (props.$inverse ? '#ffffff' : '')};box-sizing:border-box;display:flex;align-items:center;gap:4px;color:var(--kbdTextColor, ${theme.colors.neutral.ink.base});font-family:${theme.text.bodySmall.fontFamily};font-style:${theme.text.bodySmall.fontStyle};font-size:${theme.text.bodySmall.fontSize};line-height:${theme.text.bodySmall.lineHeight};font-weight:${theme.text.bodySmall.fontWeight};text-decoration:${theme.text.bodySmall.textDecoration};letter-spacing:${theme.text.bodySmall.letterSpacing};`;
-const Kbd = styled.kbd.withConfig({ displayName: "vui--Kbd", componentId: "vui--1igoyn5" }) `box-sizing:border-box;color:var(--kbdTextColor, ${theme.colors.neutral.ink.base});display:grid;place-items:center;text-transform:capitalize;border:1px solid var(--kbdTextColor, ${theme.colors.neutral.ink.base});border-radius:3px;padding:1px 3px;font-size:inherit;line-height:inherit;min-width:20px;font-family:${theme.text.bodySmall.fontFamily};font-style:${theme.text.bodySmall.fontStyle};`;
+const ShortcutKeysContainer = styled.div.withConfig({ displayName: "vui--ShortcutKeysContainer", componentId: "vui--t1odf6" }) `--kbdTextColor:${(props) => (props.$inverse ? '#ffffff' : '')};box-sizing:border-box;display:flex;align-items:center;gap:4px;color:var(--kbdTextColor, ${theme.colors.neutral.ink.base});font-family:${theme.text.bodySmall.fontFamily};font-style:${theme.text.bodySmall.fontStyle};font-size:${theme.text.bodySmall.fontSize};line-height:${theme.text.bodySmall.lineHeight};font-weight:${theme.text.bodySmall.fontWeight};text-decoration:${theme.text.bodySmall.textDecoration};letter-spacing:${theme.text.bodySmall.letterSpacing};`;
+const Kbd = styled.kbd.withConfig({ displayName: "vui--Kbd", componentId: "vui--651mmm" }) `box-sizing:border-box;color:var(--kbdTextColor, ${theme.colors.neutral.ink.base});display:grid;place-items:center;text-transform:capitalize;border:1px solid var(--kbdTextColor, ${theme.colors.neutral.ink.base});border-radius:3px;padding:1px 3px;font-size:inherit;line-height:inherit;min-width:20px;font-family:${theme.text.bodySmall.fontFamily};font-style:${theme.text.bodySmall.fontStyle};`;
 export { Kbd, ShortcutKeysContainer };
 //# sourceMappingURL=styled.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"styled.js","sources":["../../../src/components/ShortcutKeys/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { theme } from '../../theme';\nimport { ShortcutKeysContainerProps } from './types';\n\nexport const ShortcutKeysContainer = styled.div<ShortcutKeysContainerProps>`\n // If the inverse prop is passed, set the variable --kbdTextColor to the inverse color\n --kbdTextColor: ${(props) => (props.$inverse ? '#ffffff' : '')};\n box-sizing: border-box;\n display: flex;\n align-items: center;\n gap: 4px;\n color: var(--kbdTextColor, ${theme.colors.neutral.ink.base});\n font-family: ${theme.text.bodySmall.fontFamily};\n font-style: ${theme.text.bodySmall.fontStyle};\n font-size: ${theme.text.bodySmall.fontSize};\n line-height: ${theme.text.bodySmall.lineHeight};\n font-weight: ${theme.text.bodySmall.fontWeight};\n text-decoration: ${theme.text.bodySmall.textDecoration};\n letter-spacing: ${theme.text.bodySmall.letterSpacing};\n`;\n\nexport const Kbd = styled.kbd`\n box-sizing: border-box;\n color: var(--kbdTextColor, ${theme.colors.neutral.ink.base});\n display: grid;\n place-items: center;\n text-transform: capitalize;\n border: 1px solid var(--kbdTextColor, ${theme.colors.neutral.ink.base});\n border-radius: 3px;\n padding: 1px 3px;\n font-size: inherit;\n line-height: inherit;\n min-width: 20px;\n font-family: ${theme.text.bodySmall.fontFamily};\n font-style: ${theme.text.bodySmall.fontStyle};\n`;\n"],"names":[],"mappings":";;;MAKa,qBAAqB,GAAG,MAAM,CAAC,GAAG,~~0GAE3B~~,CAAC,KAAK,MAAM,KAAK,CAAC,QAAQ,GAAG,SAAS,GAAG,EAAE,CAAC,CAKjC,yFAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA,cAAA,EAC3C,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAChC,YAAA,EAAA,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,cAC/B,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAA,aAAA,EAC3B,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAC/B,aAAA,EAAA,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,oBAC3B,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,cAAc,CAAA,gBAAA,EACpC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,aAAa,CAAA,CAAA;MAGzC,GAAG,GAAG,MAAM,CAAC,GAAG,~~yHAEE~~,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAIlB,iGAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA,qGAAA,EAMtD,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAChC,YAAA,EAAA,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS;;;;"}
1	+ {"version":3,"file":"styled.js","sources":["../../../src/components/ShortcutKeys/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { theme } from '../../theme';\nimport { ShortcutKeysContainerProps } from './types';\n\nexport const ShortcutKeysContainer = styled.div<ShortcutKeysContainerProps>`\n // If the inverse prop is passed, set the variable --kbdTextColor to the inverse color\n --kbdTextColor: ${(props) => (props.$inverse ? '#ffffff' : '')};\n box-sizing: border-box;\n display: flex;\n align-items: center;\n gap: 4px;\n color: var(--kbdTextColor, ${theme.colors.neutral.ink.base});\n font-family: ${theme.text.bodySmall.fontFamily};\n font-style: ${theme.text.bodySmall.fontStyle};\n font-size: ${theme.text.bodySmall.fontSize};\n line-height: ${theme.text.bodySmall.lineHeight};\n font-weight: ${theme.text.bodySmall.fontWeight};\n text-decoration: ${theme.text.bodySmall.textDecoration};\n letter-spacing: ${theme.text.bodySmall.letterSpacing};\n`;\n\nexport const Kbd = styled.kbd`\n box-sizing: border-box;\n color: var(--kbdTextColor, ${theme.colors.neutral.ink.base});\n display: grid;\n place-items: center;\n text-transform: capitalize;\n border: 1px solid var(--kbdTextColor, ${theme.colors.neutral.ink.base});\n border-radius: 3px;\n padding: 1px 3px;\n font-size: inherit;\n line-height: inherit;\n min-width: 20px;\n font-family: ${theme.text.bodySmall.fontFamily};\n font-style: ${theme.text.bodySmall.fontStyle};\n`;\n"],"names":[],"mappings":";;;MAKa,qBAAqB,GAAG,MAAM,CAAC,GAAG,yGAE3B,CAAC,KAAK,MAAM,KAAK,CAAC,QAAQ,GAAG,SAAS,GAAG,EAAE,CAAC,CAKjC,yFAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA,cAAA,EAC3C,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAChC,YAAA,EAAA,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,cAC/B,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAA,aAAA,EAC3B,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAC/B,aAAA,EAAA,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,oBAC3B,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,cAAc,CAAA,gBAAA,EACpC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,aAAa,CAAA,CAAA;MAGzC,GAAG,GAAG,MAAM,CAAC,GAAG,wHAEE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAIlB,iGAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA,qGAAA,EAMtD,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAChC,YAAA,EAAA,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS;;;;"}

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

@@ -11,14 +11,14 @@ var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 const { blue } = colors.colors.secondary;
 const { grey } = colors.colors.neutral;
-const TableHeader = styled__default.default.thead.withConfig({ displayName: "vui--TableHeader", componentId: "vui--ywyw8k" }) `background-color:white;`;
-const TableBody = styled__default.default.tbody.withConfig({ displayName: "vui--TableBody", componentId: "vui--1s5upxk" }) `&&& tr:hover td{background-color:${blue.lightest};}`;
-const TableRow = styled__default.default.tr.withConfig({ displayName: "vui--TableRow", componentId: "vui--1k7o6gv" }) ``;
-const TableCell = styled__default.default.td.withConfig({ displayName: "vui--TableCell", componentId: "vui--g09uve" }) `position:relative;padding:1.25rem 1rem;text-align:${({ align }) => align || 'left'};background-color:white;font-family:${text.text.bodySmall.fontFamily};font-size:${text.text.bodySmall.fontSize};font-weight:${text.text.bodySmall.fontWeight};color:${text.text.bodySmall.color};line-height:${sizes.sizes.base};& > *{vertical-align:middle;}`;
+const TableHeader = styled__default.default.thead.withConfig({ displayName: "vui--TableHeader", componentId: "vui--o0sot" }) `background-color:white;`;
+const TableBody = styled__default.default.tbody.withConfig({ displayName: "vui--TableBody", componentId: "vui--nuzcgp" }) `&&& tr:hover td{background-color:${blue.lightest};}`;
+const TableRow = styled__default.default.tr.withConfig({ displayName: "vui--TableRow", componentId: "vui--1uhgfx1" }) ``;
+const TableCell = styled__default.default.td.withConfig({ displayName: "vui--TableCell", componentId: "vui--s41x8b" }) `position:relative;padding:1.25rem 1rem;text-align:${({ align }) => align || 'left'};background-color:white;font-family:${text.text.bodySmall.fontFamily};font-size:${text.text.bodySmall.fontSize};font-weight:${text.text.bodySmall.fontWeight};color:${text.text.bodySmall.color};line-height:${sizes.sizes.base};& > *{vertical-align:middle;}`;
 const TableHeaderCell = styled__default.default(TableCell).attrs({
     as: 'th',
-}).withConfig({ displayName: "vui--TableHeaderCell", componentId: "vui--9r7e5k" }) `border-bottom:1px solid ${grey.dark};font-family:${text.text.bodySmallBold.fontFamily};font-size:${text.text.bodySmallBold.fontSize};font-weight:${text.text.bodySmallBold.fontWeight};color:${text.text.bodySmallBold.color};`;
-const Table = styled__default.default.table.withConfig({ displayName: "vui--Table", componentId: "vui--1197r12" }) `width:100%;border-spacing:0;${({ striped }) => striped &&
+}).withConfig({ displayName: "vui--TableHeaderCell", componentId: "vui--2nps2x" }) `border-bottom:1px solid ${grey.dark};font-family:${text.text.bodySmallBold.fontFamily};font-size:${text.text.bodySmallBold.fontSize};font-weight:${text.text.bodySmallBold.fontWeight};color:${text.text.bodySmallBold.color};`;
+const Table = styled__default.default.table.withConfig({ displayName: "vui--Table", componentId: "vui--lcbl46" }) `width:100%;border-spacing:0;${({ striped }) => striped &&
     `
    & ${TableBody} tr:nth-child(even) td {
      background-color: ${grey.lightest};

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

	@@ -1 +1 @@
1	- {"version":3,"file":"styled.cjs","sources":["../../../src/components/SimpleTable/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { sizes } from '../../theme/modules/sizes';\nimport { text } from '../../theme/modules/text';\nimport { colors } from '../../theme/modules/colors';\n\nconst { blue } = colors.secondary;\nconst { grey } = colors.neutral;\n\ntype TableProps = {\n striped?: boolean;\n};\n\nexport const TableHeader = styled.thead`\n background-color: white;\n`;\n\nexport const TableBody = styled.tbody`\n &&& tr:hover td {\n background-color: ${blue.lightest};\n }\n`;\n\nexport const TableRow = styled.tr``;\n\nexport type TableCellProps = {\n align?: 'left' \| 'right' \| 'center';\n};\n\nexport const TableCell = styled.td<TableCellProps>`\n position: relative;\n padding: 1.25rem 1rem;\n text-align: ${({ align }) => align \|\| 'left'};\n background-color: white;\n\n font-family: ${text.bodySmall.fontFamily};\n font-size: ${text.bodySmall.fontSize};\n font-weight: ${text.bodySmall.fontWeight};\n color: ${text.bodySmall.color};\n line-height: ${sizes.base};\n\n & > * {\n vertical-align: middle;\n }\n`;\n\nexport const TableHeaderCell = styled(TableCell).attrs({\n as: 'th',\n})`\n border-bottom: 1px solid ${grey.dark};\n\n font-family: ${text.bodySmallBold.fontFamily};\n font-size: ${text.bodySmallBold.fontSize};\n font-weight: ${text.bodySmallBold.fontWeight};\n color: ${text.bodySmallBold.color};\n`;\n\nexport const Table = styled.table<TableProps>`\n width: 100%;\n border-spacing: 0;\n\n ${({ striped }) =>\n striped &&\n `\n & ${TableBody} tr:nth-child(even) td {\n background-color: ${grey.lightest};\n }\n `}\n`;\n"],"names":["colors","styled","text","sizes"],"mappings":";;;;;;;;;;;AAKA,MAAM,EAAE,IAAI,EAAE,GAAGA,aAAM,CAAC,SAAS;AACjC,MAAM,EAAE,IAAI,EAAE,GAAGA,aAAM,CAAC,OAAO;MAMlB,WAAW,GAAGC,uBAAM,CAAC,KAAK;AAIhC,MAAM,SAAS,GAAGA,uBAAM,CAAC,KAAK,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,~~cAAA~~,EAAA,CAAA,CAAA,CAAA,iCAAA,EAEb,IAAI,CAAC,QAAQ,CAAA,EAAA;MAIxB,QAAQ,GAAGA,uBAAM,CAAC,EAAE;MAMpB,SAAS,GAAGA,uBAAM,CAAC,EAAE,gIAGlB,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,MAAM,CAAA,oCAAA,EAG7BC,SAAI,CAAC,SAAS,CAAC,UAAU,CAC3B,WAAA,EAAAA,SAAI,CAAC,SAAS,CAAC,QAAQ,CACrB,aAAA,EAAAA,SAAI,CAAC,SAAS,CAAC,UAAU,UAC/BA,SAAI,CAAC,SAAS,CAAC,KAAK,gBACdC,WAAK,CAAC,IAAI,CAAA,8BAAA;AAOd,MAAA,eAAe,GAAGF,uBAAM,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC;AACrD,IAAA,EAAE,EAAE,IAAI;AACT,CAAA,CAAC,CAC2B,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,wBAAA,EAAA,IAAI,CAAC,IAAI,CAErB,aAAA,EAAAC,SAAI,CAAC,aAAa,CAAC,UAAU,CAC/B,WAAA,EAAAA,SAAI,CAAC,aAAa,CAAC,QAAQ,CACzB,aAAA,EAAAA,SAAI,CAAC,aAAa,CAAC,UAAU,CACnC,OAAA,EAAAA,SAAI,CAAC,aAAa,CAAC,KAAK;AAG5B,MAAM,KAAK,GAAGD,uBAAM,CAAC,KAAK,CAI7B,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,~~cAAA~~,EAAA,CAAA,CAAA,CAAA,4BAAA,EAAA,CAAC,EAAE,OAAO,EAAE,KACZ,OAAO;AACP,IAAA;OACG,SAAS,CAAA;AACS,uBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;AAEpC,CAAA,CAAA,CAAA;;;;;;;;;"}
1	+ {"version":3,"file":"styled.cjs","sources":["../../../src/components/SimpleTable/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { sizes } from '../../theme/modules/sizes';\nimport { text } from '../../theme/modules/text';\nimport { colors } from '../../theme/modules/colors';\n\nconst { blue } = colors.secondary;\nconst { grey } = colors.neutral;\n\ntype TableProps = {\n striped?: boolean;\n};\n\nexport const TableHeader = styled.thead`\n background-color: white;\n`;\n\nexport const TableBody = styled.tbody`\n &&& tr:hover td {\n background-color: ${blue.lightest};\n }\n`;\n\nexport const TableRow = styled.tr``;\n\nexport type TableCellProps = {\n align?: 'left' \| 'right' \| 'center';\n};\n\nexport const TableCell = styled.td<TableCellProps>`\n position: relative;\n padding: 1.25rem 1rem;\n text-align: ${({ align }) => align \|\| 'left'};\n background-color: white;\n\n font-family: ${text.bodySmall.fontFamily};\n font-size: ${text.bodySmall.fontSize};\n font-weight: ${text.bodySmall.fontWeight};\n color: ${text.bodySmall.color};\n line-height: ${sizes.base};\n\n & > * {\n vertical-align: middle;\n }\n`;\n\nexport const TableHeaderCell = styled(TableCell).attrs({\n as: 'th',\n})`\n border-bottom: 1px solid ${grey.dark};\n\n font-family: ${text.bodySmallBold.fontFamily};\n font-size: ${text.bodySmallBold.fontSize};\n font-weight: ${text.bodySmallBold.fontWeight};\n color: ${text.bodySmallBold.color};\n`;\n\nexport const Table = styled.table<TableProps>`\n width: 100%;\n border-spacing: 0;\n\n ${({ striped }) =>\n striped &&\n `\n & ${TableBody} tr:nth-child(even) td {\n background-color: ${grey.lightest};\n }\n `}\n`;\n"],"names":["colors","styled","text","sizes"],"mappings":";;;;;;;;;;;AAKA,MAAM,EAAE,IAAI,EAAE,GAAGA,aAAM,CAAC,SAAS;AACjC,MAAM,EAAE,IAAI,EAAE,GAAGA,aAAM,CAAC,OAAO;MAMlB,WAAW,GAAGC,uBAAM,CAAC,KAAK;AAIhC,MAAM,SAAS,GAAGA,uBAAM,CAAC,KAAK,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iCAAA,EAEb,IAAI,CAAC,QAAQ,CAAA,EAAA;MAIxB,QAAQ,GAAGA,uBAAM,CAAC,EAAE;MAMpB,SAAS,GAAGA,uBAAM,CAAC,EAAE,gIAGlB,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,MAAM,CAAA,oCAAA,EAG7BC,SAAI,CAAC,SAAS,CAAC,UAAU,CAC3B,WAAA,EAAAA,SAAI,CAAC,SAAS,CAAC,QAAQ,CACrB,aAAA,EAAAA,SAAI,CAAC,SAAS,CAAC,UAAU,UAC/BA,SAAI,CAAC,SAAS,CAAC,KAAK,gBACdC,WAAK,CAAC,IAAI,CAAA,8BAAA;AAOd,MAAA,eAAe,GAAGF,uBAAM,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC;AACrD,IAAA,EAAE,EAAE,IAAI;AACT,CAAA,CAAC,CAC2B,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,wBAAA,EAAA,IAAI,CAAC,IAAI,CAErB,aAAA,EAAAC,SAAI,CAAC,aAAa,CAAC,UAAU,CAC/B,WAAA,EAAAA,SAAI,CAAC,aAAa,CAAC,QAAQ,CACzB,aAAA,EAAAA,SAAI,CAAC,aAAa,CAAC,UAAU,CACnC,OAAA,EAAAA,SAAI,CAAC,aAAa,CAAC,KAAK;AAG5B,MAAM,KAAK,GAAGD,uBAAM,CAAC,KAAK,CAI7B,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,4BAAA,EAAA,CAAC,EAAE,OAAO,EAAE,KACZ,OAAO;AACP,IAAA;OACG,SAAS,CAAA;AACS,uBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;AAEpC,CAAA,CAAA,CAAA;;;;;;;;;"}

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

@@ -5,14 +5,14 @@ import { colors } from '../../theme/modules/colors.js';
 const { blue } = colors.secondary;
 const { grey } = colors.neutral;
-const TableHeader = styled.thead.withConfig({ displayName: "vui--TableHeader", componentId: "vui--ywyw8k" }) `background-color:white;`;
-const TableBody = styled.tbody.withConfig({ displayName: "vui--TableBody", componentId: "vui--1s5upxk" }) `&&& tr:hover td{background-color:${blue.lightest};}`;
-const TableRow = styled.tr.withConfig({ displayName: "vui--TableRow", componentId: "vui--1k7o6gv" }) ``;
-const TableCell = styled.td.withConfig({ displayName: "vui--TableCell", componentId: "vui--g09uve" }) `position:relative;padding:1.25rem 1rem;text-align:${({ align }) => align || 'left'};background-color:white;font-family:${text.bodySmall.fontFamily};font-size:${text.bodySmall.fontSize};font-weight:${text.bodySmall.fontWeight};color:${text.bodySmall.color};line-height:${sizes.base};& > *{vertical-align:middle;}`;
+const TableHeader = styled.thead.withConfig({ displayName: "vui--TableHeader", componentId: "vui--o0sot" }) `background-color:white;`;
+const TableBody = styled.tbody.withConfig({ displayName: "vui--TableBody", componentId: "vui--nuzcgp" }) `&&& tr:hover td{background-color:${blue.lightest};}`;
+const TableRow = styled.tr.withConfig({ displayName: "vui--TableRow", componentId: "vui--1uhgfx1" }) ``;
+const TableCell = styled.td.withConfig({ displayName: "vui--TableCell", componentId: "vui--s41x8b" }) `position:relative;padding:1.25rem 1rem;text-align:${({ align }) => align || 'left'};background-color:white;font-family:${text.bodySmall.fontFamily};font-size:${text.bodySmall.fontSize};font-weight:${text.bodySmall.fontWeight};color:${text.bodySmall.color};line-height:${sizes.base};& > *{vertical-align:middle;}`;
 const TableHeaderCell = styled(TableCell).attrs({
     as: 'th',
-}).withConfig({ displayName: "vui--TableHeaderCell", componentId: "vui--9r7e5k" }) `border-bottom:1px solid ${grey.dark};font-family:${text.bodySmallBold.fontFamily};font-size:${text.bodySmallBold.fontSize};font-weight:${text.bodySmallBold.fontWeight};color:${text.bodySmallBold.color};`;
-const Table = styled.table.withConfig({ displayName: "vui--Table", componentId: "vui--1197r12" }) `width:100%;border-spacing:0;${({ striped }) => striped &&
+}).withConfig({ displayName: "vui--TableHeaderCell", componentId: "vui--2nps2x" }) `border-bottom:1px solid ${grey.dark};font-family:${text.bodySmallBold.fontFamily};font-size:${text.bodySmallBold.fontSize};font-weight:${text.bodySmallBold.fontWeight};color:${text.bodySmallBold.color};`;
+const Table = styled.table.withConfig({ displayName: "vui--Table", componentId: "vui--lcbl46" }) `width:100%;border-spacing:0;${({ striped }) => striped &&
     `
    & ${TableBody} tr:nth-child(even) td {
      background-color: ${grey.lightest};

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

	@@ -1 +1 @@
1	- {"version":3,"file":"styled.js","sources":["../../../src/components/SimpleTable/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { sizes } from '../../theme/modules/sizes';\nimport { text } from '../../theme/modules/text';\nimport { colors } from '../../theme/modules/colors';\n\nconst { blue } = colors.secondary;\nconst { grey } = colors.neutral;\n\ntype TableProps = {\n striped?: boolean;\n};\n\nexport const TableHeader = styled.thead`\n background-color: white;\n`;\n\nexport const TableBody = styled.tbody`\n &&& tr:hover td {\n background-color: ${blue.lightest};\n }\n`;\n\nexport const TableRow = styled.tr``;\n\nexport type TableCellProps = {\n align?: 'left' \| 'right' \| 'center';\n};\n\nexport const TableCell = styled.td<TableCellProps>`\n position: relative;\n padding: 1.25rem 1rem;\n text-align: ${({ align }) => align \|\| 'left'};\n background-color: white;\n\n font-family: ${text.bodySmall.fontFamily};\n font-size: ${text.bodySmall.fontSize};\n font-weight: ${text.bodySmall.fontWeight};\n color: ${text.bodySmall.color};\n line-height: ${sizes.base};\n\n & > * {\n vertical-align: middle;\n }\n`;\n\nexport const TableHeaderCell = styled(TableCell).attrs({\n as: 'th',\n})`\n border-bottom: 1px solid ${grey.dark};\n\n font-family: ${text.bodySmallBold.fontFamily};\n font-size: ${text.bodySmallBold.fontSize};\n font-weight: ${text.bodySmallBold.fontWeight};\n color: ${text.bodySmallBold.color};\n`;\n\nexport const Table = styled.table<TableProps>`\n width: 100%;\n border-spacing: 0;\n\n ${({ striped }) =>\n striped &&\n `\n & ${TableBody} tr:nth-child(even) td {\n background-color: ${grey.lightest};\n }\n `}\n`;\n"],"names":[],"mappings":";;;;;AAKA,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,CAAC,SAAS;AACjC,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,CAAC,OAAO;MAMlB,WAAW,GAAG,MAAM,CAAC,KAAK;AAIhC,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,~~cAAA~~,EAAA,CAAA,CAAA,CAAA,iCAAA,EAEb,IAAI,CAAC,QAAQ,CAAA,EAAA;MAIxB,QAAQ,GAAG,MAAM,CAAC,EAAE;MAMpB,SAAS,GAAG,MAAM,CAAC,EAAE,gIAGlB,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,MAAM,CAAA,oCAAA,EAG7B,IAAI,CAAC,SAAS,CAAC,UAAU,CAC3B,WAAA,EAAA,IAAI,CAAC,SAAS,CAAC,QAAQ,CACrB,aAAA,EAAA,IAAI,CAAC,SAAS,CAAC,UAAU,UAC/B,IAAI,CAAC,SAAS,CAAC,KAAK,gBACd,KAAK,CAAC,IAAI,CAAA,8BAAA;AAOd,MAAA,eAAe,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC;AACrD,IAAA,EAAE,EAAE,IAAI;AACT,CAAA,CAAC,CAC2B,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,wBAAA,EAAA,IAAI,CAAC,IAAI,CAErB,aAAA,EAAA,IAAI,CAAC,aAAa,CAAC,UAAU,CAC/B,WAAA,EAAA,IAAI,CAAC,aAAa,CAAC,QAAQ,CACzB,aAAA,EAAA,IAAI,CAAC,aAAa,CAAC,UAAU,CACnC,OAAA,EAAA,IAAI,CAAC,aAAa,CAAC,KAAK;AAG5B,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAI7B,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,~~cAAA~~,EAAA,CAAA,CAAA,CAAA,4BAAA,EAAA,CAAC,EAAE,OAAO,EAAE,KACZ,OAAO;AACP,IAAA;OACG,SAAS,CAAA;AACS,uBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;AAEpC,CAAA,CAAA,CAAA;;;;"}
1	+ {"version":3,"file":"styled.js","sources":["../../../src/components/SimpleTable/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { sizes } from '../../theme/modules/sizes';\nimport { text } from '../../theme/modules/text';\nimport { colors } from '../../theme/modules/colors';\n\nconst { blue } = colors.secondary;\nconst { grey } = colors.neutral;\n\ntype TableProps = {\n striped?: boolean;\n};\n\nexport const TableHeader = styled.thead`\n background-color: white;\n`;\n\nexport const TableBody = styled.tbody`\n &&& tr:hover td {\n background-color: ${blue.lightest};\n }\n`;\n\nexport const TableRow = styled.tr``;\n\nexport type TableCellProps = {\n align?: 'left' \| 'right' \| 'center';\n};\n\nexport const TableCell = styled.td<TableCellProps>`\n position: relative;\n padding: 1.25rem 1rem;\n text-align: ${({ align }) => align \|\| 'left'};\n background-color: white;\n\n font-family: ${text.bodySmall.fontFamily};\n font-size: ${text.bodySmall.fontSize};\n font-weight: ${text.bodySmall.fontWeight};\n color: ${text.bodySmall.color};\n line-height: ${sizes.base};\n\n & > * {\n vertical-align: middle;\n }\n`;\n\nexport const TableHeaderCell = styled(TableCell).attrs({\n as: 'th',\n})`\n border-bottom: 1px solid ${grey.dark};\n\n font-family: ${text.bodySmallBold.fontFamily};\n font-size: ${text.bodySmallBold.fontSize};\n font-weight: ${text.bodySmallBold.fontWeight};\n color: ${text.bodySmallBold.color};\n`;\n\nexport const Table = styled.table<TableProps>`\n width: 100%;\n border-spacing: 0;\n\n ${({ striped }) =>\n striped &&\n `\n & ${TableBody} tr:nth-child(even) td {\n background-color: ${grey.lightest};\n }\n `}\n`;\n"],"names":[],"mappings":";;;;;AAKA,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,CAAC,SAAS;AACjC,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,CAAC,OAAO;MAMlB,WAAW,GAAG,MAAM,CAAC,KAAK;AAIhC,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iCAAA,EAEb,IAAI,CAAC,QAAQ,CAAA,EAAA;MAIxB,QAAQ,GAAG,MAAM,CAAC,EAAE;MAMpB,SAAS,GAAG,MAAM,CAAC,EAAE,gIAGlB,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,MAAM,CAAA,oCAAA,EAG7B,IAAI,CAAC,SAAS,CAAC,UAAU,CAC3B,WAAA,EAAA,IAAI,CAAC,SAAS,CAAC,QAAQ,CACrB,aAAA,EAAA,IAAI,CAAC,SAAS,CAAC,UAAU,UAC/B,IAAI,CAAC,SAAS,CAAC,KAAK,gBACd,KAAK,CAAC,IAAI,CAAA,8BAAA;AAOd,MAAA,eAAe,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC;AACrD,IAAA,EAAE,EAAE,IAAI;AACT,CAAA,CAAC,CAC2B,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,wBAAA,EAAA,IAAI,CAAC,IAAI,CAErB,aAAA,EAAA,IAAI,CAAC,aAAa,CAAC,UAAU,CAC/B,WAAA,EAAA,IAAI,CAAC,aAAa,CAAC,QAAQ,CACzB,aAAA,EAAA,IAAI,CAAC,aAAa,CAAC,UAAU,CACnC,OAAA,EAAA,IAAI,CAAC,aAAa,CAAC,KAAK;AAG5B,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAI7B,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,4BAAA,EAAA,CAAC,EAAE,OAAO,EAAE,KACZ,OAAO;AACP,IAAA;OACG,SAAS,CAAA;AACS,uBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;AAEpC,CAAA,CAAA,CAAA;;;;"}

package/dist/components/Skeleton/Skeleton.cjs CHANGED Viewed

@@ -9,7 +9,7 @@ var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 const Skeleton = styled__default.default(BaseContainer.BaseContainer).attrs(() => ({
     'aria-hidden': true,
-})).withConfig({ displayName: "vui--Skeleton", componentId: "vui--1kq38pu" }) `display:block;background:#f6f7f8;background:linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);background-size:2500px 104px;cursor:progress;border-radius:4px;${({ width = '', height = '' }) => `
+})).withConfig({ displayName: "vui--Skeleton", componentId: "vui--7bl1ak" }) `display:block;background:#f6f7f8;background:linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);background-size:2500px 104px;cursor:progress;border-radius:4px;${({ width = '', height = '' }) => `
     width: ${width || '100%'};
     min-width: ${width};
     height: ${height || '20px'};

package/dist/components/Skeleton/Skeleton.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Skeleton.cjs","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { BaseContainer } from '../BaseContainer';\n\nexport type SkeletonProps = {\n width?: string;\n height?: string;\n};\n\nexport const Skeleton = styled(BaseContainer).attrs(() => ({\n 'aria-hidden': true,\n}))<SkeletonProps>`\n // General\n display: block;\n background: #f6f7f8;\n background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);\n background-size: 2500px 104px;\n\n cursor: progress;\n\n // Sizing\n\n border-radius: 4px;\n ${({ width = '', height = '' }) => `\n width: ${width \|\| '100%'};\n min-width: ${width};\n height: ${height \|\| '20px'};\n min-height: ${height};\n `};\n\n // Animation\n\n @media (prefers-reduced-motion: no-preference) {\n animation-duration: 2s;\n animation-fill-mode: forwards;\n animation-iteration-count: infinite;\n animation-name: placeHolderShimmer;\n animation-timing-function: linear;\n }\n\n @keyframes placeHolderShimmer {\n 0% {\n background-position: -1080px 0;\n }\n 100% {\n background-position: 1080px 0;\n }\n }\n`;\n\nSkeleton.displayName = 'Skeleton';\n"],"names":["styled","BaseContainer"],"mappings":";;;;;;;;;AAQO,MAAM,QAAQ,GAAGA,uBAAM,CAACC,2BAAa,CAAC,CAAC,KAAK,CAAC,OAAO;AACzD,IAAA,aAAa,EAAE,IAAI;AACpB,CAAA,CAAC,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,~~cAAA~~,EAAA,CAAA,CAAA,CAAA,2KAAA,EAYC,CAAC,EAAE,KAAK,GAAG,EAAE,EAAE,MAAM,GAAG,EAAE,EAAE,KAAK;AACxB,WAAA,EAAA,KAAK,IAAI,MAAM,CAAA;iBACX,KAAK,CAAA;AACR,YAAA,EAAA,MAAM,IAAI,MAAM,CAAA;kBACZ,MAAM,CAAA;AACrB,EAAA,CAAA,CAAA,8SAAA;AAsBH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
1	+ {"version":3,"file":"Skeleton.cjs","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { BaseContainer } from '../BaseContainer';\n\nexport type SkeletonProps = {\n width?: string;\n height?: string;\n};\n\nexport const Skeleton = styled(BaseContainer).attrs(() => ({\n 'aria-hidden': true,\n}))<SkeletonProps>`\n // General\n display: block;\n background: #f6f7f8;\n background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);\n background-size: 2500px 104px;\n\n cursor: progress;\n\n // Sizing\n\n border-radius: 4px;\n ${({ width = '', height = '' }) => `\n width: ${width \|\| '100%'};\n min-width: ${width};\n height: ${height \|\| '20px'};\n min-height: ${height};\n `};\n\n // Animation\n\n @media (prefers-reduced-motion: no-preference) {\n animation-duration: 2s;\n animation-fill-mode: forwards;\n animation-iteration-count: infinite;\n animation-name: placeHolderShimmer;\n animation-timing-function: linear;\n }\n\n @keyframes placeHolderShimmer {\n 0% {\n background-position: -1080px 0;\n }\n 100% {\n background-position: 1080px 0;\n }\n }\n`;\n\nSkeleton.displayName = 'Skeleton';\n"],"names":["styled","BaseContainer"],"mappings":";;;;;;;;;AAQO,MAAM,QAAQ,GAAGA,uBAAM,CAACC,2BAAa,CAAC,CAAC,KAAK,CAAC,OAAO;AACzD,IAAA,aAAa,EAAE,IAAI;AACpB,CAAA,CAAC,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2KAAA,EAYC,CAAC,EAAE,KAAK,GAAG,EAAE,EAAE,MAAM,GAAG,EAAE,EAAE,KAAK;AACxB,WAAA,EAAA,KAAK,IAAI,MAAM,CAAA;iBACX,KAAK,CAAA;AACR,YAAA,EAAA,MAAM,IAAI,MAAM,CAAA;kBACZ,MAAM,CAAA;AACrB,EAAA,CAAA,CAAA,8SAAA;AAsBH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}

package/dist/components/Skeleton/Skeleton.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { BaseContainer } from '../BaseContainer/BaseContainer.js';
 const Skeleton = styled(BaseContainer).attrs(() => ({
     'aria-hidden': true,
-})).withConfig({ displayName: "vui--Skeleton", componentId: "vui--1kq38pu" }) `display:block;background:#f6f7f8;background:linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);background-size:2500px 104px;cursor:progress;border-radius:4px;${({ width = '', height = '' }) => `
+})).withConfig({ displayName: "vui--Skeleton", componentId: "vui--7bl1ak" }) `display:block;background:#f6f7f8;background:linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);background-size:2500px 104px;cursor:progress;border-radius:4px;${({ width = '', height = '' }) => `
     width: ${width || '100%'};
     min-width: ${width};
     height: ${height || '20px'};

package/dist/components/Skeleton/Skeleton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Skeleton.js","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { BaseContainer } from '../BaseContainer';\n\nexport type SkeletonProps = {\n width?: string;\n height?: string;\n};\n\nexport const Skeleton = styled(BaseContainer).attrs(() => ({\n 'aria-hidden': true,\n}))<SkeletonProps>`\n // General\n display: block;\n background: #f6f7f8;\n background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);\n background-size: 2500px 104px;\n\n cursor: progress;\n\n // Sizing\n\n border-radius: 4px;\n ${({ width = '', height = '' }) => `\n width: ${width \|\| '100%'};\n min-width: ${width};\n height: ${height \|\| '20px'};\n min-height: ${height};\n `};\n\n // Animation\n\n @media (prefers-reduced-motion: no-preference) {\n animation-duration: 2s;\n animation-fill-mode: forwards;\n animation-iteration-count: infinite;\n animation-name: placeHolderShimmer;\n animation-timing-function: linear;\n }\n\n @keyframes placeHolderShimmer {\n 0% {\n background-position: -1080px 0;\n }\n 100% {\n background-position: 1080px 0;\n }\n }\n`;\n\nSkeleton.displayName = 'Skeleton';\n"],"names":[],"mappings":";;;AAQO,MAAM,QAAQ,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC,KAAK,CAAC,OAAO;AACzD,IAAA,aAAa,EAAE,IAAI;AACpB,CAAA,CAAC,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,~~cAAA~~,EAAA,CAAA,CAAA,CAAA,2KAAA,EAYC,CAAC,EAAE,KAAK,GAAG,EAAE,EAAE,MAAM,GAAG,EAAE,EAAE,KAAK;AACxB,WAAA,EAAA,KAAK,IAAI,MAAM,CAAA;iBACX,KAAK,CAAA;AACR,YAAA,EAAA,MAAM,IAAI,MAAM,CAAA;kBACZ,MAAM,CAAA;AACrB,EAAA,CAAA,CAAA,8SAAA;AAsBH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
1	+ {"version":3,"file":"Skeleton.js","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { BaseContainer } from '../BaseContainer';\n\nexport type SkeletonProps = {\n width?: string;\n height?: string;\n};\n\nexport const Skeleton = styled(BaseContainer).attrs(() => ({\n 'aria-hidden': true,\n}))<SkeletonProps>`\n // General\n display: block;\n background: #f6f7f8;\n background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);\n background-size: 2500px 104px;\n\n cursor: progress;\n\n // Sizing\n\n border-radius: 4px;\n ${({ width = '', height = '' }) => `\n width: ${width \|\| '100%'};\n min-width: ${width};\n height: ${height \|\| '20px'};\n min-height: ${height};\n `};\n\n // Animation\n\n @media (prefers-reduced-motion: no-preference) {\n animation-duration: 2s;\n animation-fill-mode: forwards;\n animation-iteration-count: infinite;\n animation-name: placeHolderShimmer;\n animation-timing-function: linear;\n }\n\n @keyframes placeHolderShimmer {\n 0% {\n background-position: -1080px 0;\n }\n 100% {\n background-position: 1080px 0;\n }\n }\n`;\n\nSkeleton.displayName = 'Skeleton';\n"],"names":[],"mappings":";;;AAQO,MAAM,QAAQ,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC,KAAK,CAAC,OAAO;AACzD,IAAA,aAAa,EAAE,IAAI;AACpB,CAAA,CAAC,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2KAAA,EAYC,CAAC,EAAE,KAAK,GAAG,EAAE,EAAE,MAAM,GAAG,EAAE,EAAE,KAAK;AACxB,WAAA,EAAA,KAAK,IAAI,MAAM,CAAA;iBACX,KAAK,CAAA;AACR,YAAA,EAAA,MAAM,IAAI,MAAM,CAAA;kBACZ,MAAM,CAAA;AACrB,EAAA,CAAA,CAAA,8SAAA;AAsBH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}

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

@@ -11,10 +11,10 @@ const TRACK_HEIGHT = 4;
 const BORDER_SIZE = 4;
 const SLIDER_SIZE = 12;
 const ADDITIONAL_PADDING = 2;
-const SliderContainer = styled__default.default.div.withConfig({ displayName: "vui--SliderContainer", componentId: "vui--9x50b3" }) `min-width:128px;display:inline-block;position:relative;padding:${SLIDER_SIZE / 2 + ADDITIONAL_PADDING}px 0px;`;
-const SliderTrack = styled__default.default.div.withConfig({ displayName: "vui--SliderTrack", componentId: "vui--17fqinw" }) `background:${index.theme.colors.neutral.grey.base};height:${TRACK_HEIGHT}px;border-radius:20px;`;
-const SliderDiv = styled__default.default.div.withConfig({ displayName: "vui--SliderDiv", componentId: "vui--szfd61" }) `position:absolute;top:-${(SLIDER_SIZE - TRACK_HEIGHT) / 2 - ADDITIONAL_PADDING * 2}px;left:${(props) => `${props.left}%`};width:${SLIDER_SIZE}px;height:${SLIDER_SIZE}px;background:white;border:${BORDER_SIZE}px solid ${index.theme.colors.secondary.blue.base};border-radius:50%;touch-action:none;cursor:pointer;margin-left:-${SLIDER_SIZE}px;&:active,&:focus,&:focus-visible,&:focus-within{box-shadow:0 0 0 4px ${index.theme.colors.secondary.blue.light};}`;
-const SliderRange = styled__default.default(SliderTrack).withConfig({ displayName: "vui--SliderRange", componentId: "vui--1uwjsq6" }) `position:relative;width:${(props) => `${props.width}%`};left:${(props) => `${props.left}%`};background:${index.theme.colors.secondary.blue.light};bottom:${TRACK_HEIGHT}px;border-radius:0;`;
+const SliderContainer = styled__default.default.div.withConfig({ displayName: "vui--SliderContainer", componentId: "vui--103oce3" }) `min-width:128px;display:inline-block;position:relative;padding:${SLIDER_SIZE / 2 + ADDITIONAL_PADDING}px 0px;`;
+const SliderTrack = styled__default.default.div.withConfig({ displayName: "vui--SliderTrack", componentId: "vui--1ctzbzj" }) `background:${index.theme.colors.neutral.grey.base};height:${TRACK_HEIGHT}px;border-radius:20px;`;
+const SliderDiv = styled__default.default.div.withConfig({ displayName: "vui--SliderDiv", componentId: "vui--1tltjvk" }) `position:absolute;top:-${(SLIDER_SIZE - TRACK_HEIGHT) / 2 - ADDITIONAL_PADDING * 2}px;left:${(props) => `${props.left}%`};width:${SLIDER_SIZE}px;height:${SLIDER_SIZE}px;background:white;border:${BORDER_SIZE}px solid ${index.theme.colors.secondary.blue.base};border-radius:50%;touch-action:none;cursor:pointer;margin-left:-${SLIDER_SIZE}px;&:active,&:focus,&:focus-visible,&:focus-within{box-shadow:0 0 0 4px ${index.theme.colors.secondary.blue.light};}`;
+const SliderRange = styled__default.default(SliderTrack).withConfig({ displayName: "vui--SliderRange", componentId: "vui--t3v3py" }) `position:relative;width:${(props) => `${props.width}%`};left:${(props) => `${props.left}%`};background:${index.theme.colors.secondary.blue.light};bottom:${TRACK_HEIGHT}px;border-radius:0;`;
 exports.SliderContainer = SliderContainer;
 exports.SliderDiv = SliderDiv;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"styled.cjs","sources":["../../../src/components/Slider/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\nimport { SliderPropTypes, SliderRangePropTypes } from './types';\n\nconst TRACK_HEIGHT = 4;\nconst BORDER_SIZE = 4;\nconst SLIDER_SIZE = 12;\nconst ADDITIONAL_PADDING = 2;\n\nconst SliderContainer = styled.div`\n min-width: 128px;\n display: inline-block;\n position: relative;\n padding: ${SLIDER_SIZE / 2 + ADDITIONAL_PADDING}px 0px;\n`;\n\nconst SliderTrack = styled.div`\n background: ${theme.colors.neutral.grey.base};\n height: ${TRACK_HEIGHT}px;\n border-radius: 20px;\n`;\n\nconst SliderDiv = styled.div<SliderPropTypes>`\n position: absolute;\n top: -${(SLIDER_SIZE - TRACK_HEIGHT) / 2 - ADDITIONAL_PADDING * 2}px;\n left: ${(props) => `${props.left}%`};\n width: ${SLIDER_SIZE}px;\n height: ${SLIDER_SIZE}px;\n background: white;\n border: ${BORDER_SIZE}px solid ${theme.colors.secondary.blue.base};\n border-radius: 50%;\n touch-action: none;\n cursor: pointer;\n margin-left: -${SLIDER_SIZE}px;\n\n &:active,\n &:focus,\n &:focus-visible,\n &:focus-within {\n box-shadow: 0 0 0 4px ${theme.colors.secondary.blue.light};\n }\n`;\n\nconst SliderRange = styled(SliderTrack)<SliderRangePropTypes>`\n position: relative;\n width: ${(props) => `${props.width}%`};\n left: ${(props) => `${props.left}%`};\n background: ${theme.colors.secondary.blue.light};\n bottom: ${TRACK_HEIGHT}px;\n border-radius: 0;\n`;\n\nexport { SliderContainer, SliderTrack, SliderRange, SliderDiv };\n"],"names":["styled","theme"],"mappings":";;;;;;;;;AAIA,MAAM,YAAY,GAAG,CAAC;AACtB,MAAM,WAAW,GAAG,CAAC;AACrB,MAAM,WAAW,GAAG,EAAE;AACtB,MAAM,kBAAkB,GAAG,CAAC;AAE5B,MAAM,eAAe,GAAGA,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,~~aAAA~~,EAAA,CAAA,CAAA,CAAA,+DAAA,EAIrB,WAAW,GAAG,CAAC,GAAG,kBAAkB,CAAA,OAAA;AAGjD,MAAM,WAAW,GAAGA,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,WAAA,EACdC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAClC,QAAA,EAAA,YAAY;AAIlB,MAAA,SAAS,GAAGD,uBAAM,CAAC,GAAG,CAElB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,~~aAAA~~,EAAA,CAAA,CAAA,CAAA,uBAAA,EAAA,CAAC,WAAW,GAAG,YAAY,IAAI,CAAC,GAAG,kBAAkB,GAAG,CAAC,CAAA,QAAA,EACzD,CAAC,KAAK,KAAK,CAAA,EAAG,KAAK,CAAC,IAAI,CAAA,CAAA,CAAG,UAC1B,WAAW,CAAA,UAAA,EACV,WAAW,CAAA,2BAAA,EAEX,WAAW,CAAA,SAAA,EAAYC,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,iEAAA,EAIjD,WAAW,CAAA,wEAAA,EAMDA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,EAAA;AAI7D,MAAM,WAAW,GAAGD,uBAAM,CAAC,WAAW,CAAC,~~yGAE5B~~,CAAC,KAAK,KAAK,CAAG,EAAA,KAAK,CAAC,KAAK,CAAA,CAAA,CAAG,SAC7B,CAAC,KAAK,KAAK,CAAG,EAAA,KAAK,CAAC,IAAI,CAAA,CAAA,CAAG,eACrBC,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CACrC,QAAA,EAAA,YAAY;;;;;;;"}
1	+ {"version":3,"file":"styled.cjs","sources":["../../../src/components/Slider/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\nimport { SliderPropTypes, SliderRangePropTypes } from './types';\n\nconst TRACK_HEIGHT = 4;\nconst BORDER_SIZE = 4;\nconst SLIDER_SIZE = 12;\nconst ADDITIONAL_PADDING = 2;\n\nconst SliderContainer = styled.div`\n min-width: 128px;\n display: inline-block;\n position: relative;\n padding: ${SLIDER_SIZE / 2 + ADDITIONAL_PADDING}px 0px;\n`;\n\nconst SliderTrack = styled.div`\n background: ${theme.colors.neutral.grey.base};\n height: ${TRACK_HEIGHT}px;\n border-radius: 20px;\n`;\n\nconst SliderDiv = styled.div<SliderPropTypes>`\n position: absolute;\n top: -${(SLIDER_SIZE - TRACK_HEIGHT) / 2 - ADDITIONAL_PADDING * 2}px;\n left: ${(props) => `${props.left}%`};\n width: ${SLIDER_SIZE}px;\n height: ${SLIDER_SIZE}px;\n background: white;\n border: ${BORDER_SIZE}px solid ${theme.colors.secondary.blue.base};\n border-radius: 50%;\n touch-action: none;\n cursor: pointer;\n margin-left: -${SLIDER_SIZE}px;\n\n &:active,\n &:focus,\n &:focus-visible,\n &:focus-within {\n box-shadow: 0 0 0 4px ${theme.colors.secondary.blue.light};\n }\n`;\n\nconst SliderRange = styled(SliderTrack)<SliderRangePropTypes>`\n position: relative;\n width: ${(props) => `${props.width}%`};\n left: ${(props) => `${props.left}%`};\n background: ${theme.colors.secondary.blue.light};\n bottom: ${TRACK_HEIGHT}px;\n border-radius: 0;\n`;\n\nexport { SliderContainer, SliderTrack, SliderRange, SliderDiv };\n"],"names":["styled","theme"],"mappings":";;;;;;;;;AAIA,MAAM,YAAY,GAAG,CAAC;AACtB,MAAM,WAAW,GAAG,CAAC;AACrB,MAAM,WAAW,GAAG,EAAE;AACtB,MAAM,kBAAkB,GAAG,CAAC;AAE5B,MAAM,eAAe,GAAGA,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,+DAAA,EAIrB,WAAW,GAAG,CAAC,GAAG,kBAAkB,CAAA,OAAA;AAGjD,MAAM,WAAW,GAAGA,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,WAAA,EACdC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAClC,QAAA,EAAA,YAAY;AAIlB,MAAA,SAAS,GAAGD,uBAAM,CAAC,GAAG,CAElB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,uBAAA,EAAA,CAAC,WAAW,GAAG,YAAY,IAAI,CAAC,GAAG,kBAAkB,GAAG,CAAC,CAAA,QAAA,EACzD,CAAC,KAAK,KAAK,CAAA,EAAG,KAAK,CAAC,IAAI,CAAA,CAAA,CAAG,UAC1B,WAAW,CAAA,UAAA,EACV,WAAW,CAAA,2BAAA,EAEX,WAAW,CAAA,SAAA,EAAYC,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,iEAAA,EAIjD,WAAW,CAAA,wEAAA,EAMDA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,EAAA;AAI7D,MAAM,WAAW,GAAGD,uBAAM,CAAC,WAAW,CAAC,wGAE5B,CAAC,KAAK,KAAK,CAAG,EAAA,KAAK,CAAC,KAAK,CAAA,CAAA,CAAG,SAC7B,CAAC,KAAK,KAAK,CAAG,EAAA,KAAK,CAAC,IAAI,CAAA,CAAA,CAAG,eACrBC,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CACrC,QAAA,EAAA,YAAY;;;;;;;"}

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

@@ -5,10 +5,10 @@ const TRACK_HEIGHT = 4;
 const BORDER_SIZE = 4;
 const SLIDER_SIZE = 12;
 const ADDITIONAL_PADDING = 2;
-const SliderContainer = styled.div.withConfig({ displayName: "vui--SliderContainer", componentId: "vui--9x50b3" }) `min-width:128px;display:inline-block;position:relative;padding:${SLIDER_SIZE / 2 + ADDITIONAL_PADDING}px 0px;`;
-const SliderTrack = styled.div.withConfig({ displayName: "vui--SliderTrack", componentId: "vui--17fqinw" }) `background:${theme.colors.neutral.grey.base};height:${TRACK_HEIGHT}px;border-radius:20px;`;
-const SliderDiv = styled.div.withConfig({ displayName: "vui--SliderDiv", componentId: "vui--szfd61" }) `position:absolute;top:-${(SLIDER_SIZE - TRACK_HEIGHT) / 2 - ADDITIONAL_PADDING * 2}px;left:${(props) => `${props.left}%`};width:${SLIDER_SIZE}px;height:${SLIDER_SIZE}px;background:white;border:${BORDER_SIZE}px solid ${theme.colors.secondary.blue.base};border-radius:50%;touch-action:none;cursor:pointer;margin-left:-${SLIDER_SIZE}px;&:active,&:focus,&:focus-visible,&:focus-within{box-shadow:0 0 0 4px ${theme.colors.secondary.blue.light};}`;
-const SliderRange = styled(SliderTrack).withConfig({ displayName: "vui--SliderRange", componentId: "vui--1uwjsq6" }) `position:relative;width:${(props) => `${props.width}%`};left:${(props) => `${props.left}%`};background:${theme.colors.secondary.blue.light};bottom:${TRACK_HEIGHT}px;border-radius:0;`;
+const SliderContainer = styled.div.withConfig({ displayName: "vui--SliderContainer", componentId: "vui--103oce3" }) `min-width:128px;display:inline-block;position:relative;padding:${SLIDER_SIZE / 2 + ADDITIONAL_PADDING}px 0px;`;
+const SliderTrack = styled.div.withConfig({ displayName: "vui--SliderTrack", componentId: "vui--1ctzbzj" }) `background:${theme.colors.neutral.grey.base};height:${TRACK_HEIGHT}px;border-radius:20px;`;
+const SliderDiv = styled.div.withConfig({ displayName: "vui--SliderDiv", componentId: "vui--1tltjvk" }) `position:absolute;top:-${(SLIDER_SIZE - TRACK_HEIGHT) / 2 - ADDITIONAL_PADDING * 2}px;left:${(props) => `${props.left}%`};width:${SLIDER_SIZE}px;height:${SLIDER_SIZE}px;background:white;border:${BORDER_SIZE}px solid ${theme.colors.secondary.blue.base};border-radius:50%;touch-action:none;cursor:pointer;margin-left:-${SLIDER_SIZE}px;&:active,&:focus,&:focus-visible,&:focus-within{box-shadow:0 0 0 4px ${theme.colors.secondary.blue.light};}`;
+const SliderRange = styled(SliderTrack).withConfig({ displayName: "vui--SliderRange", componentId: "vui--t3v3py" }) `position:relative;width:${(props) => `${props.width}%`};left:${(props) => `${props.left}%`};background:${theme.colors.secondary.blue.light};bottom:${TRACK_HEIGHT}px;border-radius:0;`;
 export { SliderContainer, SliderDiv, SliderRange, SliderTrack };
 //# sourceMappingURL=styled.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"styled.js","sources":["../../../src/components/Slider/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\nimport { SliderPropTypes, SliderRangePropTypes } from './types';\n\nconst TRACK_HEIGHT = 4;\nconst BORDER_SIZE = 4;\nconst SLIDER_SIZE = 12;\nconst ADDITIONAL_PADDING = 2;\n\nconst SliderContainer = styled.div`\n min-width: 128px;\n display: inline-block;\n position: relative;\n padding: ${SLIDER_SIZE / 2 + ADDITIONAL_PADDING}px 0px;\n`;\n\nconst SliderTrack = styled.div`\n background: ${theme.colors.neutral.grey.base};\n height: ${TRACK_HEIGHT}px;\n border-radius: 20px;\n`;\n\nconst SliderDiv = styled.div<SliderPropTypes>`\n position: absolute;\n top: -${(SLIDER_SIZE - TRACK_HEIGHT) / 2 - ADDITIONAL_PADDING * 2}px;\n left: ${(props) => `${props.left}%`};\n width: ${SLIDER_SIZE}px;\n height: ${SLIDER_SIZE}px;\n background: white;\n border: ${BORDER_SIZE}px solid ${theme.colors.secondary.blue.base};\n border-radius: 50%;\n touch-action: none;\n cursor: pointer;\n margin-left: -${SLIDER_SIZE}px;\n\n &:active,\n &:focus,\n &:focus-visible,\n &:focus-within {\n box-shadow: 0 0 0 4px ${theme.colors.secondary.blue.light};\n }\n`;\n\nconst SliderRange = styled(SliderTrack)<SliderRangePropTypes>`\n position: relative;\n width: ${(props) => `${props.width}%`};\n left: ${(props) => `${props.left}%`};\n background: ${theme.colors.secondary.blue.light};\n bottom: ${TRACK_HEIGHT}px;\n border-radius: 0;\n`;\n\nexport { SliderContainer, SliderTrack, SliderRange, SliderDiv };\n"],"names":[],"mappings":";;;AAIA,MAAM,YAAY,GAAG,CAAC;AACtB,MAAM,WAAW,GAAG,CAAC;AACrB,MAAM,WAAW,GAAG,EAAE;AACtB,MAAM,kBAAkB,GAAG,CAAC;AAE5B,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,~~aAAA~~,EAAA,CAAA,CAAA,CAAA,+DAAA,EAIrB,WAAW,GAAG,CAAC,GAAG,kBAAkB,CAAA,OAAA;AAGjD,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,WAAA,EACd,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAClC,QAAA,EAAA,YAAY;AAIlB,MAAA,SAAS,GAAG,MAAM,CAAC,GAAG,CAElB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,~~aAAA~~,EAAA,CAAA,CAAA,CAAA,uBAAA,EAAA,CAAC,WAAW,GAAG,YAAY,IAAI,CAAC,GAAG,kBAAkB,GAAG,CAAC,CAAA,QAAA,EACzD,CAAC,KAAK,KAAK,CAAA,EAAG,KAAK,CAAC,IAAI,CAAA,CAAA,CAAG,UAC1B,WAAW,CAAA,UAAA,EACV,WAAW,CAAA,2BAAA,EAEX,WAAW,CAAA,SAAA,EAAY,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,iEAAA,EAIjD,WAAW,CAAA,wEAAA,EAMD,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,EAAA;AAI7D,MAAM,WAAW,GAAG,MAAM,CAAC,WAAW,CAAC,~~yGAE5B~~,CAAC,KAAK,KAAK,CAAG,EAAA,KAAK,CAAC,KAAK,CAAA,CAAA,CAAG,SAC7B,CAAC,KAAK,KAAK,CAAG,EAAA,KAAK,CAAC,IAAI,CAAA,CAAA,CAAG,eACrB,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CACrC,QAAA,EAAA,YAAY;;;;"}
1	+ {"version":3,"file":"styled.js","sources":["../../../src/components/Slider/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\nimport { SliderPropTypes, SliderRangePropTypes } from './types';\n\nconst TRACK_HEIGHT = 4;\nconst BORDER_SIZE = 4;\nconst SLIDER_SIZE = 12;\nconst ADDITIONAL_PADDING = 2;\n\nconst SliderContainer = styled.div`\n min-width: 128px;\n display: inline-block;\n position: relative;\n padding: ${SLIDER_SIZE / 2 + ADDITIONAL_PADDING}px 0px;\n`;\n\nconst SliderTrack = styled.div`\n background: ${theme.colors.neutral.grey.base};\n height: ${TRACK_HEIGHT}px;\n border-radius: 20px;\n`;\n\nconst SliderDiv = styled.div<SliderPropTypes>`\n position: absolute;\n top: -${(SLIDER_SIZE - TRACK_HEIGHT) / 2 - ADDITIONAL_PADDING * 2}px;\n left: ${(props) => `${props.left}%`};\n width: ${SLIDER_SIZE}px;\n height: ${SLIDER_SIZE}px;\n background: white;\n border: ${BORDER_SIZE}px solid ${theme.colors.secondary.blue.base};\n border-radius: 50%;\n touch-action: none;\n cursor: pointer;\n margin-left: -${SLIDER_SIZE}px;\n\n &:active,\n &:focus,\n &:focus-visible,\n &:focus-within {\n box-shadow: 0 0 0 4px ${theme.colors.secondary.blue.light};\n }\n`;\n\nconst SliderRange = styled(SliderTrack)<SliderRangePropTypes>`\n position: relative;\n width: ${(props) => `${props.width}%`};\n left: ${(props) => `${props.left}%`};\n background: ${theme.colors.secondary.blue.light};\n bottom: ${TRACK_HEIGHT}px;\n border-radius: 0;\n`;\n\nexport { SliderContainer, SliderTrack, SliderRange, SliderDiv };\n"],"names":[],"mappings":";;;AAIA,MAAM,YAAY,GAAG,CAAC;AACtB,MAAM,WAAW,GAAG,CAAC;AACrB,MAAM,WAAW,GAAG,EAAE;AACtB,MAAM,kBAAkB,GAAG,CAAC;AAE5B,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,+DAAA,EAIrB,WAAW,GAAG,CAAC,GAAG,kBAAkB,CAAA,OAAA;AAGjD,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,WAAA,EACd,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAClC,QAAA,EAAA,YAAY;AAIlB,MAAA,SAAS,GAAG,MAAM,CAAC,GAAG,CAElB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,uBAAA,EAAA,CAAC,WAAW,GAAG,YAAY,IAAI,CAAC,GAAG,kBAAkB,GAAG,CAAC,CAAA,QAAA,EACzD,CAAC,KAAK,KAAK,CAAA,EAAG,KAAK,CAAC,IAAI,CAAA,CAAA,CAAG,UAC1B,WAAW,CAAA,UAAA,EACV,WAAW,CAAA,2BAAA,EAEX,WAAW,CAAA,SAAA,EAAY,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,iEAAA,EAIjD,WAAW,CAAA,wEAAA,EAMD,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,EAAA;AAI7D,MAAM,WAAW,GAAG,MAAM,CAAC,WAAW,CAAC,wGAE5B,CAAC,KAAK,KAAK,CAAG,EAAA,KAAK,CAAC,KAAK,CAAA,CAAA,CAAG,SAC7B,CAAC,KAAK,KAAK,CAAG,EAAA,KAAK,CAAC,IAAI,CAAA,CAAA,CAAG,eACrB,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CACrC,QAAA,EAAA,YAAY;;;;"}

package/dist/components/Stack/Stack.cjs CHANGED Viewed

@@ -10,9 +10,10 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 /**
+ * @deprecated Replaced by {@link FlexCol} and {@link FlexRow}.
  * Layout component.
  */
-const Stack = styled__default.default.div.withConfig({ displayName: "vui--Stack", componentId: "vui--3cm6ee" }) `display:flex;${(props) => {
+const Stack = styled__default.default.div.withConfig({ displayName: "vui--Stack", componentId: "vui--1mxdupo" }) `display:flex;${(props) => {
     const { direction = 'vertical', alignX = 'start', alignY = 'start', spacing = 'base' } = props;
     let alignItems;
     let justifyContent;

package/dist/components/Stack/Stack.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Stack.cjs","sources":["../../../src/components/Stack/Stack.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport { StackProps } from './types';\nimport { Alignments } from './Alignments';\n\nimport { theme } from '../../theme';\nimport { Text } from '../Text';\n\n/*\n Layout component.\n /\nexport const Stack = styled.div<StackProps>`\n display: flex;\n\n ${(props) => {\n const { direction = 'vertical', alignX = 'start', alignY = 'start', spacing = 'base' } = props;\n\n let alignItems;\n let justifyContent;\n let flexDirection;\n let itemFlex;\n let marginTop = '';\n let marginLeft = '';\n\n if (direction === 'vertical') {\n alignItems = alignX && Alignments[alignX];\n justifyContent = alignY && Alignments[alignY];\n marginTop = theme.sizes[spacing];\n flexDirection = 'column';\n } else {\n alignItems = alignY && Alignments[alignY];\n justifyContent = alignX && Alignments[alignX];\n marginLeft = theme.sizes[spacing];\n flexDirection = 'row';\n }\n\n // These options result in 'justify-content: stretch' which doesn't exist,\n // so instead we set the flex of child elements\n if (\n (direction === 'vertical' && alignY === 'stretch') \|\|\n (direction === 'horizontal' && alignX === 'stretch')\n ) {\n itemFlex = 1;\n }\n\n return `\n align-items: ${alignItems};\n justify-content: ${justifyContent};\n flex-direction: ${flexDirection};\n\n & > {\n flex: ${itemFlex};\n }\n\n & > * + ,\n // Increase specificity to overwrite Text's Margin: 0\n && > + ${Text} {\n margin-top: ${marginTop};\n margin-left: ${marginLeft};\n }\n `;\n }}\n`;\n\nStack.displayName = 'Stack';\n"],"names":["styled","Alignments","theme","Text"],"mappings":";;;;;;;;;;;AAQA~~;;AAEG~~;AACU,MAAA,KAAK,GAAGA,uBAAM,CAAC,GAAG,CAG3B,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,~~aAAA~~,EAAA,CAAA,CAAA,CAAA,aAAA,EAAA,CAAC,KAAK,KAAI;AACV,IAAA,MAAM,EAAE,SAAS,GAAG,UAAU,EAAE,MAAM,GAAG,OAAO,EAAE,MAAM,GAAG,OAAO,EAAE,OAAO,GAAG,MAAM,EAAE,GAAG,KAAK;AAE9F,IAAA,IAAI,UAAU;AACd,IAAA,IAAI,cAAc;AAClB,IAAA,IAAI,aAAa;AACjB,IAAA,IAAI,QAAQ;IACZ,IAAI,SAAS,GAAG,EAAE;IAClB,IAAI,UAAU,GAAG,EAAE;IAEnB,IAAI,SAAS,KAAK,UAAU,EAAE;AAC5B,QAAA,UAAU,GAAG,MAAM,IAAIC,qBAAU,CAAC,MAAM,CAAC;AACzC,QAAA,cAAc,GAAG,MAAM,IAAIA,qBAAU,CAAC,MAAM,CAAC;AAC7C,QAAA,SAAS,GAAGC,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC;QAChC,aAAa,GAAG,QAAQ;AACzB;AAAM,SAAA;AACL,QAAA,UAAU,GAAG,MAAM,IAAID,qBAAU,CAAC,MAAM,CAAC;AACzC,QAAA,cAAc,GAAG,MAAM,IAAIA,qBAAU,CAAC,MAAM,CAAC;AAC7C,QAAA,UAAU,GAAGC,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC;QACjC,aAAa,GAAG,KAAK;AACtB;;;IAID,IACE,CAAC,SAAS,KAAK,UAAU,IAAI,MAAM,KAAK,SAAS;SAChD,SAAS,KAAK,YAAY,IAAI,MAAM,KAAK,SAAS,CAAC,EACpD;QACA,QAAQ,GAAG,CAAC;AACb;IAED,OAAO;qBACU,UAAU,CAAA;yBACN,cAAc,CAAA;wBACf,aAAa,CAAA;;;gBAGrB,QAAQ,CAAA;;;;;iBAKPC,SAAI,CAAA;sBACC,SAAS,CAAA;uBACR,UAAU,CAAA;;KAE5B;AACH,CAAC;AAGH,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}
1	+ {"version":3,"file":"Stack.cjs","sources":["../../../src/components/Stack/Stack.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport { StackProps } from './types';\nimport { Alignments } from './Alignments';\n\nimport { theme } from '../../theme';\nimport { Text } from '../Text';\n\n/*\n @deprecated Replaced by {@link FlexCol} and {@link FlexRow}.\n * Layout component.\n /\nexport const Stack = styled.div<StackProps>`\n display: flex;\n\n ${(props) => {\n const { direction = 'vertical', alignX = 'start', alignY = 'start', spacing = 'base' } = props;\n\n let alignItems;\n let justifyContent;\n let flexDirection;\n let itemFlex;\n let marginTop = '';\n let marginLeft = '';\n\n if (direction === 'vertical') {\n alignItems = alignX && Alignments[alignX];\n justifyContent = alignY && Alignments[alignY];\n marginTop = theme.sizes[spacing];\n flexDirection = 'column';\n } else {\n alignItems = alignY && Alignments[alignY];\n justifyContent = alignX && Alignments[alignX];\n marginLeft = theme.sizes[spacing];\n flexDirection = 'row';\n }\n\n // These options result in 'justify-content: stretch' which doesn't exist,\n // so instead we set the flex of child elements\n if (\n (direction === 'vertical' && alignY === 'stretch') \|\|\n (direction === 'horizontal' && alignX === 'stretch')\n ) {\n itemFlex = 1;\n }\n\n return `\n align-items: ${alignItems};\n justify-content: ${justifyContent};\n flex-direction: ${flexDirection};\n\n & > {\n flex: ${itemFlex};\n }\n\n & > * + ,\n // Increase specificity to overwrite Text's Margin: 0\n && > + ${Text} {\n margin-top: ${marginTop};\n margin-left: ${marginLeft};\n }\n `;\n }}\n`;\n\nStack.displayName = 'Stack';\n"],"names":["styled","Alignments","theme","Text"],"mappings":";;;;;;;;;;;AAQA;;;AAGG;AACU,MAAA,KAAK,GAAGA,uBAAM,CAAC,GAAG,CAG3B,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,aAAA,EAAA,CAAC,KAAK,KAAI;AACV,IAAA,MAAM,EAAE,SAAS,GAAG,UAAU,EAAE,MAAM,GAAG,OAAO,EAAE,MAAM,GAAG,OAAO,EAAE,OAAO,GAAG,MAAM,EAAE,GAAG,KAAK;AAE9F,IAAA,IAAI,UAAU;AACd,IAAA,IAAI,cAAc;AAClB,IAAA,IAAI,aAAa;AACjB,IAAA,IAAI,QAAQ;IACZ,IAAI,SAAS,GAAG,EAAE;IAClB,IAAI,UAAU,GAAG,EAAE;IAEnB,IAAI,SAAS,KAAK,UAAU,EAAE;AAC5B,QAAA,UAAU,GAAG,MAAM,IAAIC,qBAAU,CAAC,MAAM,CAAC;AACzC,QAAA,cAAc,GAAG,MAAM,IAAIA,qBAAU,CAAC,MAAM,CAAC;AAC7C,QAAA,SAAS,GAAGC,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC;QAChC,aAAa,GAAG,QAAQ;AACzB;AAAM,SAAA;AACL,QAAA,UAAU,GAAG,MAAM,IAAID,qBAAU,CAAC,MAAM,CAAC;AACzC,QAAA,cAAc,GAAG,MAAM,IAAIA,qBAAU,CAAC,MAAM,CAAC;AAC7C,QAAA,UAAU,GAAGC,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC;QACjC,aAAa,GAAG,KAAK;AACtB;;;IAID,IACE,CAAC,SAAS,KAAK,UAAU,IAAI,MAAM,KAAK,SAAS;SAChD,SAAS,KAAK,YAAY,IAAI,MAAM,KAAK,SAAS,CAAC,EACpD;QACA,QAAQ,GAAG,CAAC;AACb;IAED,OAAO;qBACU,UAAU,CAAA;yBACN,cAAc,CAAA;wBACf,aAAa,CAAA;;;gBAGrB,QAAQ,CAAA;;;;;iBAKPC,SAAI,CAAA;sBACC,SAAS,CAAA;uBACR,UAAU,CAAA;;KAE5B;AACH,CAAC;AAGH,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}

package/dist/components/Stack/Stack.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import { StackProps } from './types';
 /**
+ * @deprecated Replaced by {@link FlexCol} and {@link FlexRow}.
  * Layout component.
  */
 export declare const Stack: import("styled-components").StyledComponent<"div", any, StackProps, never>;

package/dist/components/Stack/Stack.js CHANGED Viewed

@@ -4,9 +4,10 @@ import { theme } from '../../theme/index.js';
 import { Text } from '../Text/Text.js';
 /**
+ * @deprecated Replaced by {@link FlexCol} and {@link FlexRow}.
  * Layout component.
  */
-const Stack = styled.div.withConfig({ displayName: "vui--Stack", componentId: "vui--3cm6ee" }) `display:flex;${(props) => {
+const Stack = styled.div.withConfig({ displayName: "vui--Stack", componentId: "vui--1mxdupo" }) `display:flex;${(props) => {
     const { direction = 'vertical', alignX = 'start', alignY = 'start', spacing = 'base' } = props;
     let alignItems;
     let justifyContent;

package/dist/components/Stack/Stack.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Stack.js","sources":["../../../src/components/Stack/Stack.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport { StackProps } from './types';\nimport { Alignments } from './Alignments';\n\nimport { theme } from '../../theme';\nimport { Text } from '../Text';\n\n/*\n Layout component.\n /\nexport const Stack = styled.div<StackProps>`\n display: flex;\n\n ${(props) => {\n const { direction = 'vertical', alignX = 'start', alignY = 'start', spacing = 'base' } = props;\n\n let alignItems;\n let justifyContent;\n let flexDirection;\n let itemFlex;\n let marginTop = '';\n let marginLeft = '';\n\n if (direction === 'vertical') {\n alignItems = alignX && Alignments[alignX];\n justifyContent = alignY && Alignments[alignY];\n marginTop = theme.sizes[spacing];\n flexDirection = 'column';\n } else {\n alignItems = alignY && Alignments[alignY];\n justifyContent = alignX && Alignments[alignX];\n marginLeft = theme.sizes[spacing];\n flexDirection = 'row';\n }\n\n // These options result in 'justify-content: stretch' which doesn't exist,\n // so instead we set the flex of child elements\n if (\n (direction === 'vertical' && alignY === 'stretch') \|\|\n (direction === 'horizontal' && alignX === 'stretch')\n ) {\n itemFlex = 1;\n }\n\n return `\n align-items: ${alignItems};\n justify-content: ${justifyContent};\n flex-direction: ${flexDirection};\n\n & > {\n flex: ${itemFlex};\n }\n\n & > * + ,\n // Increase specificity to overwrite Text's Margin: 0\n && > + ${Text} {\n margin-top: ${marginTop};\n margin-left: ${marginLeft};\n }\n `;\n }}\n`;\n\nStack.displayName = 'Stack';\n"],"names":[],"mappings":";;;;;AAQA~~;;AAEG~~;AACU,MAAA,KAAK,GAAG,MAAM,CAAC,GAAG,CAG3B,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,~~aAAA~~,EAAA,CAAA,CAAA,CAAA,aAAA,EAAA,CAAC,KAAK,KAAI;AACV,IAAA,MAAM,EAAE,SAAS,GAAG,UAAU,EAAE,MAAM,GAAG,OAAO,EAAE,MAAM,GAAG,OAAO,EAAE,OAAO,GAAG,MAAM,EAAE,GAAG,KAAK;AAE9F,IAAA,IAAI,UAAU;AACd,IAAA,IAAI,cAAc;AAClB,IAAA,IAAI,aAAa;AACjB,IAAA,IAAI,QAAQ;IACZ,IAAI,SAAS,GAAG,EAAE;IAClB,IAAI,UAAU,GAAG,EAAE;IAEnB,IAAI,SAAS,KAAK,UAAU,EAAE;AAC5B,QAAA,UAAU,GAAG,MAAM,IAAI,UAAU,CAAC,MAAM,CAAC;AACzC,QAAA,cAAc,GAAG,MAAM,IAAI,UAAU,CAAC,MAAM,CAAC;AAC7C,QAAA,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC;QAChC,aAAa,GAAG,QAAQ;AACzB;AAAM,SAAA;AACL,QAAA,UAAU,GAAG,MAAM,IAAI,UAAU,CAAC,MAAM,CAAC;AACzC,QAAA,cAAc,GAAG,MAAM,IAAI,UAAU,CAAC,MAAM,CAAC;AAC7C,QAAA,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC;QACjC,aAAa,GAAG,KAAK;AACtB;;;IAID,IACE,CAAC,SAAS,KAAK,UAAU,IAAI,MAAM,KAAK,SAAS;SAChD,SAAS,KAAK,YAAY,IAAI,MAAM,KAAK,SAAS,CAAC,EACpD;QACA,QAAQ,GAAG,CAAC;AACb;IAED,OAAO;qBACU,UAAU,CAAA;yBACN,cAAc,CAAA;wBACf,aAAa,CAAA;;;gBAGrB,QAAQ,CAAA;;;;;iBAKP,IAAI,CAAA;sBACC,SAAS,CAAA;uBACR,UAAU,CAAA;;KAE5B;AACH,CAAC;AAGH,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}
1	+ {"version":3,"file":"Stack.js","sources":["../../../src/components/Stack/Stack.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport { StackProps } from './types';\nimport { Alignments } from './Alignments';\n\nimport { theme } from '../../theme';\nimport { Text } from '../Text';\n\n/*\n @deprecated Replaced by {@link FlexCol} and {@link FlexRow}.\n * Layout component.\n /\nexport const Stack = styled.div<StackProps>`\n display: flex;\n\n ${(props) => {\n const { direction = 'vertical', alignX = 'start', alignY = 'start', spacing = 'base' } = props;\n\n let alignItems;\n let justifyContent;\n let flexDirection;\n let itemFlex;\n let marginTop = '';\n let marginLeft = '';\n\n if (direction === 'vertical') {\n alignItems = alignX && Alignments[alignX];\n justifyContent = alignY && Alignments[alignY];\n marginTop = theme.sizes[spacing];\n flexDirection = 'column';\n } else {\n alignItems = alignY && Alignments[alignY];\n justifyContent = alignX && Alignments[alignX];\n marginLeft = theme.sizes[spacing];\n flexDirection = 'row';\n }\n\n // These options result in 'justify-content: stretch' which doesn't exist,\n // so instead we set the flex of child elements\n if (\n (direction === 'vertical' && alignY === 'stretch') \|\|\n (direction === 'horizontal' && alignX === 'stretch')\n ) {\n itemFlex = 1;\n }\n\n return `\n align-items: ${alignItems};\n justify-content: ${justifyContent};\n flex-direction: ${flexDirection};\n\n & > {\n flex: ${itemFlex};\n }\n\n & > * + ,\n // Increase specificity to overwrite Text's Margin: 0\n && > + ${Text} {\n margin-top: ${marginTop};\n margin-left: ${marginLeft};\n }\n `;\n }}\n`;\n\nStack.displayName = 'Stack';\n"],"names":[],"mappings":";;;;;AAQA;;;AAGG;AACU,MAAA,KAAK,GAAG,MAAM,CAAC,GAAG,CAG3B,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,aAAA,EAAA,CAAC,KAAK,KAAI;AACV,IAAA,MAAM,EAAE,SAAS,GAAG,UAAU,EAAE,MAAM,GAAG,OAAO,EAAE,MAAM,GAAG,OAAO,EAAE,OAAO,GAAG,MAAM,EAAE,GAAG,KAAK;AAE9F,IAAA,IAAI,UAAU;AACd,IAAA,IAAI,cAAc;AAClB,IAAA,IAAI,aAAa;AACjB,IAAA,IAAI,QAAQ;IACZ,IAAI,SAAS,GAAG,EAAE;IAClB,IAAI,UAAU,GAAG,EAAE;IAEnB,IAAI,SAAS,KAAK,UAAU,EAAE;AAC5B,QAAA,UAAU,GAAG,MAAM,IAAI,UAAU,CAAC,MAAM,CAAC;AACzC,QAAA,cAAc,GAAG,MAAM,IAAI,UAAU,CAAC,MAAM,CAAC;AAC7C,QAAA,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC;QAChC,aAAa,GAAG,QAAQ;AACzB;AAAM,SAAA;AACL,QAAA,UAAU,GAAG,MAAM,IAAI,UAAU,CAAC,MAAM,CAAC;AACzC,QAAA,cAAc,GAAG,MAAM,IAAI,UAAU,CAAC,MAAM,CAAC;AAC7C,QAAA,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC;QACjC,aAAa,GAAG,KAAK;AACtB;;;IAID,IACE,CAAC,SAAS,KAAK,UAAU,IAAI,MAAM,KAAK,SAAS;SAChD,SAAS,KAAK,YAAY,IAAI,MAAM,KAAK,SAAS,CAAC,EACpD;QACA,QAAQ,GAAG,CAAC;AACb;IAED,OAAO;qBACU,UAAU,CAAA;yBACN,cAAc,CAAA;wBACf,aAAa,CAAA;;;gBAGrB,QAAQ,CAAA;;;;;iBAKP,IAAI,CAAA;sBACC,SAAS,CAAA;uBACR,UAAU,CAAA;;KAE5B;AACH,CAAC;AAGH,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}

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

@@ -11,9 +11,9 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 const { colors: { neutral, secondary }, radius, } = index.theme;
-const ContainerStack = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--ContainerStack", componentId: "vui--1ldy6v3" }) `--background-color:${({ disabled }) => (disabled ? neutral.grey.light : 'white')};--border-color:${({ hasError }) => (hasError ? secondary.red.base : neutral.ink.lightest)};box-sizing:border-box;display:inline-flex;background-color:var(--background-color);border:${index.theme.sizes.line} solid var(--border-color);border-radius:${radius.base};height:${({ compact }) => (compact ? index.theme.sizes[8] : index.theme.sizes[10])};`;
-const StepButton = styled__default.default.button.withConfig({ displayName: "vui--StepButton", componentId: "vui--231424" }) `appearance:none;border:0;background-color:transparent;border-radius:${radius.base};cursor:pointer;height:100%;aspect-ratio:1;&:hover{background-color:${neutral.grey.light};}${inputStyles.inputFocusStyles}`;
-const StepperDivider = styled__default.default.div.withConfig({ displayName: "vui--StepperDivider", componentId: "vui--d6utag" }) `width:${index.theme.sizes.line};background-color:${neutral.ink.lightest};height:${({ compact }) => (compact ? index.theme.sizes[4] : index.theme.sizes[6])};`;
+const ContainerStack = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--ContainerStack", componentId: "vui--7zcmtq" }) `--background-color:${({ disabled }) => (disabled ? neutral.grey.light : 'white')};--border-color:${({ hasError }) => (hasError ? secondary.red.base : neutral.ink.lightest)};box-sizing:border-box;display:inline-flex;background-color:var(--background-color);border:${index.theme.sizes.line} solid var(--border-color);border-radius:${radius.base};height:${({ compact }) => (compact ? index.theme.sizes[8] : index.theme.sizes[10])};`;
+const StepButton = styled__default.default.button.withConfig({ displayName: "vui--StepButton", componentId: "vui--z17r9v" }) `appearance:none;border:0;background-color:transparent;border-radius:${radius.base};cursor:pointer;height:100%;aspect-ratio:1;&:hover{background-color:${neutral.grey.light};}${inputStyles.inputFocusStyles}`;
+const StepperDivider = styled__default.default.div.withConfig({ displayName: "vui--StepperDivider", componentId: "vui--1vucank" }) `width:${index.theme.sizes.line};background-color:${neutral.ink.lightest};height:${({ compact }) => (compact ? index.theme.sizes[4] : index.theme.sizes[6])};`;
 exports.ContainerStack = ContainerStack;
 exports.StepButton = StepButton;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"styled.cjs","sources":["../../../src/components/Stepper/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\nimport { inputFocusStyles } from '../../utils/forms/inputStyles';\nimport { Stack } from '../Stack';\nimport { FormComponentProps } from '../types';\n\nconst {\n colors: { neutral, secondary },\n radius,\n} = theme;\n\nexport const ContainerStack = styled(Stack)<FormComponentProps>`\n --background-color: ${({ disabled }) => (disabled ? neutral.grey.light : 'white')};\n --border-color: ${({ hasError }) => (hasError ? secondary.red.base : neutral.ink.lightest)};\n\n box-sizing: border-box;\n display: inline-flex;\n background-color: var(--background-color);\n border: ${theme.sizes.line} solid var(--border-color);\n border-radius: ${radius.base};\n\n height: ${({ compact }) => (compact ? theme.sizes[8] : theme.sizes[10])};\n`;\n\nexport const StepButton = styled.button`\n appearance: none;\n border: 0;\n background-color: transparent;\n border-radius: ${radius.base};\n cursor: pointer;\n\n height: 100%;\n aspect-ratio: 1;\n\n &:hover {\n background-color: ${neutral.grey.light};\n }\n\n ${inputFocusStyles}\n`;\n\nexport const StepperDivider = styled.div<Pick<FormComponentProps, 'compact'>>`\n width: ${theme.sizes.line};\n background-color: ${neutral.ink.lightest};\n height: ${({ compact }) => (compact ? theme.sizes[4] : theme.sizes[6])};\n`;\n"],"names":["theme","styled","Stack","inputFocusStyles"],"mappings":";;;;;;;;;;;;AAMA,MAAM,EACJ,MAAM,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,EAC9B,MAAM,GACP,GAAGA,WAAK;MAEI,cAAc,GAAGC,uBAAM,CAACC,WAAK,CAAC,CACnB,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,~~cAAA~~,EAAA,CAAA,CAAA,CAAA,mBAAA,EAAA,CAAC,EAAE,QAAQ,EAAE,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,CAAA,gBAAA,EAC/D,CAAC,EAAE,QAAQ,EAAE,MAAM,QAAQ,GAAG,SAAS,CAAC,GAAG,CAAC,IAAI,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,8FAKhFF,WAAK,CAAC,KAAK,CAAC,IAAI,4CACT,MAAM,CAAC,IAAI,CAElB,QAAA,EAAA,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,GAAGA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAGA,WAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAA,CAAA;MAG5D,UAAU,GAAGC,uBAAM,CAAC,MAAM,mJAIpB,MAAM,CAAC,IAAI,CAON,oEAAA,EAAA,OAAO,CAAC,IAAI,CAAC,KAAK,CAGtC,EAAA,EAAAE,4BAAgB;MAGP,cAAc,GAAGF,uBAAM,CAAC,GAAG,CAC7B,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,~~aAAA~~,EAAA,CAAA,CAAA,CAAA,MAAA,EAAAD,WAAK,CAAC,KAAK,CAAC,IAAI,CAAA,kBAAA,EACL,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,QAAA,EAC9B,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,GAAGA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAGA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA,CAAA;;;;;;"}
1	+ {"version":3,"file":"styled.cjs","sources":["../../../src/components/Stepper/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\nimport { inputFocusStyles } from '../../utils/forms/inputStyles';\nimport { Stack } from '../Stack';\nimport { FormComponentProps } from '../types';\n\nconst {\n colors: { neutral, secondary },\n radius,\n} = theme;\n\nexport const ContainerStack = styled(Stack)<FormComponentProps>`\n --background-color: ${({ disabled }) => (disabled ? neutral.grey.light : 'white')};\n --border-color: ${({ hasError }) => (hasError ? secondary.red.base : neutral.ink.lightest)};\n\n box-sizing: border-box;\n display: inline-flex;\n background-color: var(--background-color);\n border: ${theme.sizes.line} solid var(--border-color);\n border-radius: ${radius.base};\n\n height: ${({ compact }) => (compact ? theme.sizes[8] : theme.sizes[10])};\n`;\n\nexport const StepButton = styled.button`\n appearance: none;\n border: 0;\n background-color: transparent;\n border-radius: ${radius.base};\n cursor: pointer;\n\n height: 100%;\n aspect-ratio: 1;\n\n &:hover {\n background-color: ${neutral.grey.light};\n }\n\n ${inputFocusStyles}\n`;\n\nexport const StepperDivider = styled.div<Pick<FormComponentProps, 'compact'>>`\n width: ${theme.sizes.line};\n background-color: ${neutral.ink.lightest};\n height: ${({ compact }) => (compact ? theme.sizes[4] : theme.sizes[6])};\n`;\n"],"names":["theme","styled","Stack","inputFocusStyles"],"mappings":";;;;;;;;;;;;AAMA,MAAM,EACJ,MAAM,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,EAC9B,MAAM,GACP,GAAGA,WAAK;MAEI,cAAc,GAAGC,uBAAM,CAACC,WAAK,CAAC,CACnB,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,mBAAA,EAAA,CAAC,EAAE,QAAQ,EAAE,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,CAAA,gBAAA,EAC/D,CAAC,EAAE,QAAQ,EAAE,MAAM,QAAQ,GAAG,SAAS,CAAC,GAAG,CAAC,IAAI,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,8FAKhFF,WAAK,CAAC,KAAK,CAAC,IAAI,4CACT,MAAM,CAAC,IAAI,CAElB,QAAA,EAAA,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,GAAGA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAGA,WAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAA,CAAA;MAG5D,UAAU,GAAGC,uBAAM,CAAC,MAAM,mJAIpB,MAAM,CAAC,IAAI,CAON,oEAAA,EAAA,OAAO,CAAC,IAAI,CAAC,KAAK,CAGtC,EAAA,EAAAE,4BAAgB;MAGP,cAAc,GAAGF,uBAAM,CAAC,GAAG,CAC7B,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAAAD,WAAK,CAAC,KAAK,CAAC,IAAI,CAAA,kBAAA,EACL,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,QAAA,EAC9B,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,GAAGA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAGA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA,CAAA;;;;;;"}

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

@@ -5,9 +5,9 @@ import { Stack } from '../Stack/Stack.js';
 import '../Stack/types.js';
 const { colors: { neutral, secondary }, radius, } = theme;
-const ContainerStack = styled(Stack).withConfig({ displayName: "vui--ContainerStack", componentId: "vui--1ldy6v3" }) `--background-color:${({ disabled }) => (disabled ? neutral.grey.light : 'white')};--border-color:${({ hasError }) => (hasError ? secondary.red.base : neutral.ink.lightest)};box-sizing:border-box;display:inline-flex;background-color:var(--background-color);border:${theme.sizes.line} solid var(--border-color);border-radius:${radius.base};height:${({ compact }) => (compact ? theme.sizes[8] : theme.sizes[10])};`;
-const StepButton = styled.button.withConfig({ displayName: "vui--StepButton", componentId: "vui--231424" }) `appearance:none;border:0;background-color:transparent;border-radius:${radius.base};cursor:pointer;height:100%;aspect-ratio:1;&:hover{background-color:${neutral.grey.light};}${inputFocusStyles}`;
-const StepperDivider = styled.div.withConfig({ displayName: "vui--StepperDivider", componentId: "vui--d6utag" }) `width:${theme.sizes.line};background-color:${neutral.ink.lightest};height:${({ compact }) => (compact ? theme.sizes[4] : theme.sizes[6])};`;
+const ContainerStack = styled(Stack).withConfig({ displayName: "vui--ContainerStack", componentId: "vui--7zcmtq" }) `--background-color:${({ disabled }) => (disabled ? neutral.grey.light : 'white')};--border-color:${({ hasError }) => (hasError ? secondary.red.base : neutral.ink.lightest)};box-sizing:border-box;display:inline-flex;background-color:var(--background-color);border:${theme.sizes.line} solid var(--border-color);border-radius:${radius.base};height:${({ compact }) => (compact ? theme.sizes[8] : theme.sizes[10])};`;
+const StepButton = styled.button.withConfig({ displayName: "vui--StepButton", componentId: "vui--z17r9v" }) `appearance:none;border:0;background-color:transparent;border-radius:${radius.base};cursor:pointer;height:100%;aspect-ratio:1;&:hover{background-color:${neutral.grey.light};}${inputFocusStyles}`;
+const StepperDivider = styled.div.withConfig({ displayName: "vui--StepperDivider", componentId: "vui--1vucank" }) `width:${theme.sizes.line};background-color:${neutral.ink.lightest};height:${({ compact }) => (compact ? theme.sizes[4] : theme.sizes[6])};`;
 export { ContainerStack, StepButton, StepperDivider };
 //# sourceMappingURL=styled.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"styled.js","sources":["../../../src/components/Stepper/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\nimport { inputFocusStyles } from '../../utils/forms/inputStyles';\nimport { Stack } from '../Stack';\nimport { FormComponentProps } from '../types';\n\nconst {\n colors: { neutral, secondary },\n radius,\n} = theme;\n\nexport const ContainerStack = styled(Stack)<FormComponentProps>`\n --background-color: ${({ disabled }) => (disabled ? neutral.grey.light : 'white')};\n --border-color: ${({ hasError }) => (hasError ? secondary.red.base : neutral.ink.lightest)};\n\n box-sizing: border-box;\n display: inline-flex;\n background-color: var(--background-color);\n border: ${theme.sizes.line} solid var(--border-color);\n border-radius: ${radius.base};\n\n height: ${({ compact }) => (compact ? theme.sizes[8] : theme.sizes[10])};\n`;\n\nexport const StepButton = styled.button`\n appearance: none;\n border: 0;\n background-color: transparent;\n border-radius: ${radius.base};\n cursor: pointer;\n\n height: 100%;\n aspect-ratio: 1;\n\n &:hover {\n background-color: ${neutral.grey.light};\n }\n\n ${inputFocusStyles}\n`;\n\nexport const StepperDivider = styled.div<Pick<FormComponentProps, 'compact'>>`\n width: ${theme.sizes.line};\n background-color: ${neutral.ink.lightest};\n height: ${({ compact }) => (compact ? theme.sizes[4] : theme.sizes[6])};\n`;\n"],"names":[],"mappings":";;;;;;AAMA,MAAM,EACJ,MAAM,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,EAC9B,MAAM,GACP,GAAG,KAAK;MAEI,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,CACnB,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,~~cAAA~~,EAAA,CAAA,CAAA,CAAA,mBAAA,EAAA,CAAC,EAAE,QAAQ,EAAE,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,CAAA,gBAAA,EAC/D,CAAC,EAAE,QAAQ,EAAE,MAAM,QAAQ,GAAG,SAAS,CAAC,GAAG,CAAC,IAAI,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,8FAKhF,KAAK,CAAC,KAAK,CAAC,IAAI,4CACT,MAAM,CAAC,IAAI,CAElB,QAAA,EAAA,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAA,CAAA;MAG5D,UAAU,GAAG,MAAM,CAAC,MAAM,mJAIpB,MAAM,CAAC,IAAI,CAON,oEAAA,EAAA,OAAO,CAAC,IAAI,CAAC,KAAK,CAGtC,EAAA,EAAA,gBAAgB;MAGP,cAAc,GAAG,MAAM,CAAC,GAAG,CAC7B,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,~~aAAA~~,EAAA,CAAA,CAAA,CAAA,MAAA,EAAA,KAAK,CAAC,KAAK,CAAC,IAAI,CAAA,kBAAA,EACL,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,QAAA,EAC9B,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA,CAAA;;;;"}
1	+ {"version":3,"file":"styled.js","sources":["../../../src/components/Stepper/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\nimport { inputFocusStyles } from '../../utils/forms/inputStyles';\nimport { Stack } from '../Stack';\nimport { FormComponentProps } from '../types';\n\nconst {\n colors: { neutral, secondary },\n radius,\n} = theme;\n\nexport const ContainerStack = styled(Stack)<FormComponentProps>`\n --background-color: ${({ disabled }) => (disabled ? neutral.grey.light : 'white')};\n --border-color: ${({ hasError }) => (hasError ? secondary.red.base : neutral.ink.lightest)};\n\n box-sizing: border-box;\n display: inline-flex;\n background-color: var(--background-color);\n border: ${theme.sizes.line} solid var(--border-color);\n border-radius: ${radius.base};\n\n height: ${({ compact }) => (compact ? theme.sizes[8] : theme.sizes[10])};\n`;\n\nexport const StepButton = styled.button`\n appearance: none;\n border: 0;\n background-color: transparent;\n border-radius: ${radius.base};\n cursor: pointer;\n\n height: 100%;\n aspect-ratio: 1;\n\n &:hover {\n background-color: ${neutral.grey.light};\n }\n\n ${inputFocusStyles}\n`;\n\nexport const StepperDivider = styled.div<Pick<FormComponentProps, 'compact'>>`\n width: ${theme.sizes.line};\n background-color: ${neutral.ink.lightest};\n height: ${({ compact }) => (compact ? theme.sizes[4] : theme.sizes[6])};\n`;\n"],"names":[],"mappings":";;;;;;AAMA,MAAM,EACJ,MAAM,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,EAC9B,MAAM,GACP,GAAG,KAAK;MAEI,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,CACnB,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,mBAAA,EAAA,CAAC,EAAE,QAAQ,EAAE,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,CAAA,gBAAA,EAC/D,CAAC,EAAE,QAAQ,EAAE,MAAM,QAAQ,GAAG,SAAS,CAAC,GAAG,CAAC,IAAI,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,8FAKhF,KAAK,CAAC,KAAK,CAAC,IAAI,4CACT,MAAM,CAAC,IAAI,CAElB,QAAA,EAAA,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAA,CAAA;MAG5D,UAAU,GAAG,MAAM,CAAC,MAAM,mJAIpB,MAAM,CAAC,IAAI,CAON,oEAAA,EAAA,OAAO,CAAC,IAAI,CAAC,KAAK,CAGtC,EAAA,EAAA,gBAAgB;MAGP,cAAc,GAAG,MAAM,CAAC,GAAG,CAC7B,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAAA,KAAK,CAAC,KAAK,CAAC,IAAI,CAAA,kBAAA,EACL,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,QAAA,EAC9B,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA,CAAA;;;;"}

package/dist/components/Tag/Tag.cjs CHANGED Viewed

@@ -8,7 +8,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-const Tag = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Tag", componentId: "vui--i7kdk5" }) `display:inline-flex;flex-direction:row;justify-content:center;align-items:center;border-radius:4px;padding:4px 8px;${({ backgroundColor, color }) => `
+const Tag = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Tag", componentId: "vui--1rdo7hk" }) `display:inline-flex;flex-direction:row;justify-content:center;align-items:center;border-radius:4px;padding:4px 8px;${({ backgroundColor, color }) => `
     color: ${color !== null && color !== undefined ? color : colors.colors.neutral.ink.base};
     background-color: ${backgroundColor !== null && backgroundColor !== undefined ? backgroundColor : colors.colors.neutral.grey.base};
   `}`;

package/dist/components/Tag/Tag.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tag.cjs","sources":["../../../src/components/Tag/Tag.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { colors } from '../../theme/modules/colors';\nimport { BaseContainer } from '../BaseContainer';\n\nexport interface TagProps {\n backgroundColor?: string;\n color?: string;\n}\n\nexport const Tag = styled(BaseContainer)<TagProps>`\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n border-radius: 4px;\n padding: 4px 8px;\n\n ${({ backgroundColor, color }) => `\n color: ${color ?? colors.neutral.ink.base};\n background-color: ${backgroundColor ?? colors.neutral.grey.base};\n `}\n`;\n"],"names":["styled","BaseContainer","colors"],"mappings":";;;;;;;;;;AAUa,MAAA,GAAG,GAAGA,uBAAM,CAACC,2BAAa,CAAC,CAQpC,UAAA,CAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,~~aAAA~~,EAAA,CAAA,CAAA,CAAA,mHAAA,EAAA,CAAC,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK;aACvB,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,SAAA,GAAL,KAAK,GAAIC,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;wBACrB,eAAe,KAAA,IAAA,IAAf,eAAe,KAAA,SAAA,GAAf,eAAe,GAAIA,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;AAChE,EAAA,CAAA,CAAA;;;;"}
1	+ {"version":3,"file":"Tag.cjs","sources":["../../../src/components/Tag/Tag.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { colors } from '../../theme/modules/colors';\nimport { BaseContainer } from '../BaseContainer';\n\nexport interface TagProps {\n backgroundColor?: string;\n color?: string;\n}\n\nexport const Tag = styled(BaseContainer)<TagProps>`\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n border-radius: 4px;\n padding: 4px 8px;\n\n ${({ backgroundColor, color }) => `\n color: ${color ?? colors.neutral.ink.base};\n background-color: ${backgroundColor ?? colors.neutral.grey.base};\n `}\n`;\n"],"names":["styled","BaseContainer","colors"],"mappings":";;;;;;;;;;AAUa,MAAA,GAAG,GAAGA,uBAAM,CAACC,2BAAa,CAAC,CAQpC,UAAA,CAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,mHAAA,EAAA,CAAC,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK;aACvB,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,SAAA,GAAL,KAAK,GAAIC,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;wBACrB,eAAe,KAAA,IAAA,IAAf,eAAe,KAAA,SAAA,GAAf,eAAe,GAAIA,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;AAChE,EAAA,CAAA,CAAA;;;;"}