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

@veeqo/ui 9.9.3 → 10.0.0-beta.1

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

Files changed (308) hide show

package/dist/components/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 { theme } from 'Theme';\nimport { ListBox } from 'react-aria-components';\nimport { Button } from '../Button';\nimport { Dropdown } from '../Dropdown';\nimport { Search } from '../Search';\nimport { DropdownProps } from '../Dropdown/types';\n\nexport const StyledListBox = styled(ListBox)`\n overflow-y: scroll;\n max-height: 300px;\n padding: ${theme.sizes.sm};\n scroll-padding: ${theme.sizes.xs} 0;\n\n &[data-empty] {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n`;\n\nexport const StyledDropdown: React.FC<DropdownProps & { hasError: boolean }> = styled(\n Dropdown,\n).attrs<{ hasError: boolean }>((props) => ({\n ctaProps: {\n ...props.ctaProps,\n style: {\n padding: theme.sizes[3],\n border: `1px solid ${props.hasError ? theme.colors.secondary.red.base : 'none'}`,\n },\n contentStyles: {\n justifyContent: 'space-between',\n flex: 1,\n },\n },\n}))`\n padding: 0;\n`;\n\nexport const StyledSearch = styled(Search)`\n margin: ${theme.sizes.sm};\n`;\n\nexport const Separator = styled.hr`\n height: 1px;\n background: ${theme.colors.neutral.grey.base};\n border: none;\n margin: 0 0;\n width: 100%;\n`;\n\nexport const CTAButton = styled(Button).attrs({\n variant: 'flat',\n})`\n justify-content: start;\n padding-left: ${theme.sizes.xs};\n margin: ${theme.sizes.sm} ${theme.sizes.xs};\n border-radius: ${theme.radius.base};\n font-size: 14px;\n svg {\n width: ${theme.sizes.md};\n height: ${theme.sizes.md};\n }\n`;\n"],"names":[],"mappings":";;;;;;;MAQa,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;AASrB,MAAA,cAAc,GAAoD,MAAM,CACnF,QAAQ,CACT,CAAC,KAAK,CAAwB,CAAC,KAAK,MAAM;AACzC,IAAA,QAAQ,EAAE;QACR,GAAG,KAAK,CAAC,QAAQ;AACjB,QAAA,KAAK,EAAE;AACL,YAAA,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;YACvB,MAAM,EAAE,aAAa,KAAK,CAAC,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,GAAG,MAAM,CAAE,CAAA;AACjF,SAAA;AACD,QAAA,aAAa,EAAE;AACb,YAAA,cAAc,EAAE,eAAe;AAC/B,YAAA,IAAI,EAAE,CAAC;AACR,SAAA;AACF,KAAA;CACF,CAAC,CAAC;AAII,MAAM,YAAY,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,~~kHAEgB~~,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 { theme } from 'Theme';\nimport { ListBox } from 'react-aria-components';\nimport { Button } from '../Button';\nimport { Dropdown } from '../Dropdown';\nimport { Search } from '../Search';\nimport { DropdownProps } from '../Dropdown/types';\n\nexport const StyledListBox = styled(ListBox)`\n overflow-y: scroll;\n max-height: 300px;\n padding: ${theme.sizes.sm};\n scroll-padding: ${theme.sizes.xs} 0;\n\n &[data-empty] {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n`;\n\nexport const StyledDropdown: React.FC<DropdownProps & { hasError: boolean }> = styled(\n Dropdown,\n).attrs<{ hasError: boolean }>((props) => ({\n ctaProps: {\n ...props.ctaProps,\n style: {\n padding: theme.sizes[3],\n border: `1px solid ${props.hasError ? theme.colors.secondary.red.base : 'none'}`,\n },\n contentStyles: {\n justifyContent: 'space-between',\n flex: 1,\n },\n },\n}))`\n padding: 0;\n`;\n\nexport const StyledSearch = styled(Search)`\n margin: ${theme.sizes.sm};\n`;\n\nexport const Separator = styled.hr`\n height: 1px;\n background: ${theme.colors.neutral.grey.base};\n border: none;\n margin: 0 0;\n width: 100%;\n`;\n\nexport const CTAButton = styled(Button).attrs({\n variant: 'flat',\n})`\n justify-content: start;\n padding-left: ${theme.sizes.xs};\n margin: ${theme.sizes.sm} ${theme.sizes.xs};\n border-radius: ${theme.radius.base};\n font-size: 14px;\n svg {\n width: ${theme.sizes.md};\n height: ${theme.sizes.md};\n }\n`;\n"],"names":[],"mappings":";;;;;;;MAQa,aAAa,GAAG,MAAM,CAAC,OAAO,CAAC,CAG/B,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2CAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE,CACP,gBAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,yEAAA;AASrB,MAAA,cAAc,GAAoD,MAAM,CACnF,QAAQ,CACT,CAAC,KAAK,CAAwB,CAAC,KAAK,MAAM;AACzC,IAAA,QAAQ,EAAE;QACR,GAAG,KAAK,CAAC,QAAQ;AACjB,QAAA,KAAK,EAAE;AACL,YAAA,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;YACvB,MAAM,EAAE,aAAa,KAAK,CAAC,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,GAAG,MAAM,CAAE,CAAA;AACjF,SAAA;AACD,QAAA,aAAa,EAAE;AACb,YAAA,cAAc,EAAE,eAAe;AAC/B,YAAA,IAAI,EAAE,CAAC;AACR,SAAA;AACF,KAAA;CACF,CAAC,CAAC;AAII,MAAM,YAAY,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,aAAA,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--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};`;
+const ShortcutKeysContainer = styled__default.default.div.withConfig({ displayName: "vui--ShortcutKeysContainer", componentId: "vui--jhvnbb" }) `--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--y1tr49" }) `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.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--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};`;
+const ShortcutKeysContainer = styled.div.withConfig({ displayName: "vui--ShortcutKeysContainer", componentId: "vui--jhvnbb" }) `--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--y1tr49" }) `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/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--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 TableHeader = styled__default.default.thead.withConfig({ displayName: "vui--TableHeader", componentId: "vui--1qepc31" }) `background-color:white;`;
+const TableBody = styled__default.default.tbody.withConfig({ displayName: "vui--TableBody", componentId: "vui--g9tnvb" }) `&&& tr:hover td{background-color:${blue.lightest};}`;
+const TableRow = styled__default.default.tr.withConfig({ displayName: "vui--TableRow", componentId: "vui--50l9ot" }) ``;
+const TableCell = styled__default.default.td.withConfig({ displayName: "vui--TableCell", componentId: "vui--1o4t01c" }) `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--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 &&
+}).withConfig({ displayName: "vui--TableHeaderCell", componentId: "vui--k7q8ax" }) `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--25ejag" }) `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,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;;;;;;;;;"}
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,iIAGlB,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--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 TableHeader = styled.thead.withConfig({ displayName: "vui--TableHeader", componentId: "vui--1qepc31" }) `background-color:white;`;
+const TableBody = styled.tbody.withConfig({ displayName: "vui--TableBody", componentId: "vui--g9tnvb" }) `&&& tr:hover td{background-color:${blue.lightest};}`;
+const TableRow = styled.tr.withConfig({ displayName: "vui--TableRow", componentId: "vui--50l9ot" }) ``;
+const TableCell = styled.td.withConfig({ displayName: "vui--TableCell", componentId: "vui--1o4t01c" }) `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--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 &&
+}).withConfig({ displayName: "vui--TableHeaderCell", componentId: "vui--k7q8ax" }) `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--25ejag" }) `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,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;;;;"}
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,iIAGlB,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--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 = '' }) => `
+})).withConfig({ displayName: "vui--Skeleton", componentId: "vui--ol9a89" }) `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 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--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 = '' }) => `
+})).withConfig({ displayName: "vui--Skeleton", componentId: "vui--ol9a89" }) `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/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--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;`;
+const SliderContainer = styled__default.default.div.withConfig({ displayName: "vui--SliderContainer", componentId: "vui--s5qrf0" }) `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--pvw1wx" }) `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--19twtgm" }) `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--1vb0w08" }) `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,~~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;;;;;;;"}
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,aAAA,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,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;;;;;;;"}

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--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;`;
+const SliderContainer = styled.div.withConfig({ displayName: "vui--SliderContainer", componentId: "vui--s5qrf0" }) `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--pvw1wx" }) `background:${theme.colors.neutral.grey.base};height:${TRACK_HEIGHT}px;border-radius:20px;`;
+const SliderDiv = styled.div.withConfig({ displayName: "vui--SliderDiv", componentId: "vui--19twtgm" }) `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--1vb0w08" }) `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,~~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;;;;"}
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,aAAA,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,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;;;;"}

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

@@ -12,7 +12,7 @@ var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 /**
  * Layout component.
  */
-const Stack = styled__default.default.div.withConfig({ displayName: "vui--Stack", componentId: "vui--1mxdupo" }) `display:flex;${(props) => {
+const Stack = styled__default.default.div.withConfig({ displayName: "vui--Stack", componentId: "vui--ikbqaf" }) `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,~~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;;;;"}
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;;;;"}

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

@@ -6,7 +6,7 @@ import { Text } from '../Text/Text.js';
 /**
  * Layout component.
  */
-const Stack = styled.div.withConfig({ displayName: "vui--Stack", componentId: "vui--1mxdupo" }) `display:flex;${(props) => {
+const Stack = styled.div.withConfig({ displayName: "vui--Stack", componentId: "vui--ikbqaf" }) `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,~~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;;;;"}
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;;;;"}

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

@@ -6,12 +6,12 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-const Container = styled__default.default.div.withConfig({ displayName: "vui--Container", componentId: "vui--1y4bw67" }) `box-sizing:border-box;display:inline-flex;flex-direction:column;height:${({ size }) => (size === 'sm' ? '32px' : '40px')};border-radius:4px;${({ size }) => size === 'sm'
+const Container = styled__default.default.div.withConfig({ displayName: "vui--Container", componentId: "vui--1kqph75" }) `box-sizing:border-box;display:inline-flex;flex-direction:column;height:${({ size }) => (size === 'sm' ? '32px' : '40px')};border-radius:4px;${({ size }) => size === 'sm'
     ? `svg { width: 14px !important; height: 14px !important; };
       > button { padding: 0 6px };`
     : ''};& > *:first-child{border-bottom-width:0;}& > *:active,& > *:focus{border-width:1px;}& > *:active + *,& > *:focus + *{border-top-width:0;}& > *:focus,& > *:active{z-index:5;}& > *:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit;}& > *:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;}`;
-const StepButton = styled__default.default.button.withConfig({ displayName: "vui--StepButton", componentId: "vui--z17r9v" }) `appearance:none;flex:1;border:0;display:flex;justify-content:center;align-items:center;padding:0 8px;background-color:white;border:1px solid #959fa8;&:hover{cursor:pointer;background-color:#fafafb;}&:active:not(:disabled){background-color:#fafafb;border-color:#0079d1;box-shadow:0 0 0 4px #80bce8;}&:focus{box-shadow:0 0 0 4px #80bce8;outline:0;}&:disabled{background-color:#f2f3f5;border-color:#959fa8;color:#637381;cursor:not-allowed;}`;
+const StepButton = styled__default.default.button.withConfig({ displayName: "vui--StepButton", componentId: "vui--1myicuk" }) `appearance:none;flex:1;border:0;display:flex;justify-content:center;align-items:center;padding:0 8px;background-color:white;border:1px solid #959fa8;&:hover{cursor:pointer;background-color:#fafafb;}&:active:not(:disabled){background-color:#fafafb;border-color:#0079d1;box-shadow:0 0 0 4px #80bce8;}&:focus{box-shadow:0 0 0 4px #80bce8;outline:0;}&:disabled{background-color:#f2f3f5;border-color:#959fa8;color:#637381;cursor:not-allowed;}`;
 exports.Container = Container;
 exports.StepButton = StepButton;

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

@@ -1,11 +1,11 @@
 import styled from 'styled-components';
-const Container = styled.div.withConfig({ displayName: "vui--Container", componentId: "vui--1y4bw67" }) `box-sizing:border-box;display:inline-flex;flex-direction:column;height:${({ size }) => (size === 'sm' ? '32px' : '40px')};border-radius:4px;${({ size }) => size === 'sm'
+const Container = styled.div.withConfig({ displayName: "vui--Container", componentId: "vui--1kqph75" }) `box-sizing:border-box;display:inline-flex;flex-direction:column;height:${({ size }) => (size === 'sm' ? '32px' : '40px')};border-radius:4px;${({ size }) => size === 'sm'
     ? `svg { width: 14px !important; height: 14px !important; };
       > button { padding: 0 6px };`
     : ''};& > *:first-child{border-bottom-width:0;}& > *:active,& > *:focus{border-width:1px;}& > *:active + *,& > *:focus + *{border-top-width:0;}& > *:focus,& > *:active{z-index:5;}& > *:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit;}& > *:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;}`;
-const StepButton = styled.button.withConfig({ displayName: "vui--StepButton", componentId: "vui--z17r9v" }) `appearance:none;flex:1;border:0;display:flex;justify-content:center;align-items:center;padding:0 8px;background-color:white;border:1px solid #959fa8;&:hover{cursor:pointer;background-color:#fafafb;}&:active:not(:disabled){background-color:#fafafb;border-color:#0079d1;box-shadow:0 0 0 4px #80bce8;}&:focus{box-shadow:0 0 0 4px #80bce8;outline:0;}&:disabled{background-color:#f2f3f5;border-color:#959fa8;color:#637381;cursor:not-allowed;}`;
+const StepButton = styled.button.withConfig({ displayName: "vui--StepButton", componentId: "vui--1myicuk" }) `appearance:none;flex:1;border:0;display:flex;justify-content:center;align-items:center;padding:0 8px;background-color:white;border:1px solid #959fa8;&:hover{cursor:pointer;background-color:#fafafb;}&:active:not(:disabled){background-color:#fafafb;border-color:#0079d1;box-shadow:0 0 0 4px #80bce8;}&:focus{box-shadow:0 0 0 4px #80bce8;outline:0;}&:disabled{background-color:#f2f3f5;border-color:#959fa8;color:#637381;cursor:not-allowed;}`;
 export { Container, StepButton };
 //# sourceMappingURL=styled.js.map

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--1rdo7hk" }) `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--qsag0v" }) `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,~~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;;;;"}
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;;;;"}

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

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import { colors } from '../../theme/modules/colors.js';
 import { BaseContainer } from '../BaseContainer/BaseContainer.js';
-const Tag = styled(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 }) => `
+const Tag = styled(BaseContainer).withConfig({ displayName: "vui--Tag", componentId: "vui--qsag0v" }) `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.neutral.ink.base};
     background-color: ${backgroundColor !== null && backgroundColor !== undefined ? backgroundColor : colors.neutral.grey.base};
   `}`;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Tag.js","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":[],"mappings":";;;;AAUa,MAAA,GAAG,GAAG,MAAM,CAAC,aAAa,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,GAAI,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;wBACrB,eAAe,KAAA,IAAA,IAAf,eAAe,KAAA,SAAA,GAAf,eAAe,GAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;AAChE,EAAA,CAAA,CAAA;;;;"}
1	+ {"version":3,"file":"Tag.js","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":[],"mappings":";;;;AAUa,MAAA,GAAG,GAAG,MAAM,CAAC,aAAa,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,GAAI,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;wBACrB,eAAe,KAAA,IAAA,IAAf,eAAe,KAAA,SAAA,GAAf,eAAe,GAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;AAChE,EAAA,CAAA,CAAA;;;;"}

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

@@ -11,7 +11,7 @@ var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 const { text, colors, fontFamily } = index.theme;
 const Text = styled__default.default.span.attrs(({ as, variant }) => ({
     as: utils.getComponentOverride(as, variant),
-})).withConfig({ displayName: "vui--Text", componentId: "vui--p74sf8" }) `box-sizing:border-box;display:inline-block;margin:0;padding:0;font-style:normal;font-weight:normal;font-size:12px;font-family:${fontFamily};line-height:16px;color:#37424d;${({ variant }) => (variant === 'button' || variant === 'buttonSmall') &&
+})).withConfig({ displayName: "vui--Text", componentId: "vui--m0sc57" }) `box-sizing:border-box;display:inline-block;margin:0;padding:0;font-style:normal;font-weight:normal;font-size:12px;font-family:${fontFamily};line-height:16px;color:#37424d;${({ variant }) => (variant === 'button' || variant === 'buttonSmall') &&
     `
     cursor: pointer;
     background-color: transparent;

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

@@ -5,7 +5,7 @@ import { theme } from '../../theme/index.js';
 const { text, colors, fontFamily } = theme;
 const Text = styled.span.attrs(({ as, variant }) => ({
     as: getComponentOverride(as, variant),
-})).withConfig({ displayName: "vui--Text", componentId: "vui--p74sf8" }) `box-sizing:border-box;display:inline-block;margin:0;padding:0;font-style:normal;font-weight:normal;font-size:12px;font-family:${fontFamily};line-height:16px;color:#37424d;${({ variant }) => (variant === 'button' || variant === 'buttonSmall') &&
+})).withConfig({ displayName: "vui--Text", componentId: "vui--m0sc57" }) `box-sizing:border-box;display:inline-block;margin:0;padding:0;font-style:normal;font-weight:normal;font-size:12px;font-family:${fontFamily};line-height:16px;color:#37424d;${({ variant }) => (variant === 'button' || variant === 'buttonSmall') &&
     `
     cursor: pointer;
     background-color: transparent;

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

@@ -18,7 +18,7 @@ const pseudoStates = ({ hasError, inputSize }) => styled.css `&{--outline-size:$
       box-shadow: 0 0 0 var(--outline-size) #F7BCBC;
     }
   `}`;
-const Input = styled__default.default.input.withConfig({ displayName: "vui--Input", componentId: "vui--3jt15a" }) `font-family:${index.theme.fontFamily};box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:0 12px;border-radius:4px;border:1px solid #959fa8;color:#1b2126;${({ inputSize }) => {
+const Input = styled__default.default.input.withConfig({ displayName: "vui--Input", componentId: "vui--1o6oill" }) `font-family:${index.theme.fontFamily};box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:0 12px;border-radius:4px;border:1px solid #959fa8;color:#1b2126;${({ inputSize }) => {
     let height = '40px';
     let fontSize = '14px';
     if (inputSize === 'sm') {
@@ -30,7 +30,7 @@ const Input = styled__default.default.input.withConfig({ displayName: "vui--Inpu
       font-size: ${fontSize};
     `;
 }} ${pseudoStates} &::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type='number']{-moz-appearance:textfield;width:8ch;text-align:right;}`;
-const Textarea = styled__default.default.textarea.withConfig({ displayName: "vui--Textarea", componentId: "vui--1k04ik" }) `box-sizing:border-box;width:100%;padding:8px;border-radius:4px;border:1px solid #959fa8;color:#1b2126;${pseudoStates}`;
+const Textarea = styled__default.default.textarea.withConfig({ displayName: "vui--Textarea", componentId: "vui--1jp908v" }) `box-sizing:border-box;width:100%;padding:8px;border-radius:4px;border:1px solid #959fa8;color:#1b2126;${pseudoStates}`;
 exports.Input = Input;
 exports.Textarea = Textarea;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"styled.cjs","sources":["../../../src/components/TextField/styled.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { theme } from '../../theme';\n\ninterface InputProps {\n hasError: boolean;\n inputSize: 'sm' \| 'base';\n}\n\nconst pseudoStates = ({ hasError, inputSize }: InputProps) => css`\n & {\n --outline-size: ${inputSize === 'sm' ? '2px' : '4px'};\n }\n\n &:focus {\n border-color: #0079d1;\n box-shadow: 0 0 0 var(--outline-size) #80bce8;\n outline: 0;\n }\n\n &:invalid {\n border-color: #eb5757;\n box-shadow: 0 0 0 var(--outline-size) #f7bcbc;\n }\n\n &:disabled {\n box-shadow: none;\n background-color: #f2f3f5;\n border-color: #959fa8;\n color: #637381;\n }\n\n ${hasError &&\n `\n &,\n &:focus {\n border-color: #EB5757;\n }\n\n &:focus {\n box-shadow: 0 0 0 var(--outline-size) #F7BCBC;\n }\n `}\n`;\n\nexport const Input = styled.input<any>`\n font-family: ${theme.fontFamily};\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 12px;\n border-radius: 4px;\n border: 1px solid #959fa8;\n color: #1b2126;\n\n ${({ inputSize }) => {\n let height = '40px';\n let fontSize = '14px';\n\n if (inputSize === 'sm') {\n height = '32px';\n fontSize = '12px';\n }\n\n return `\n height: ${height};\n font-size: ${fontSize};\n `;\n }}\n\n ${pseudoStates}\n\n /* Hide number arrows/spinners */\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n &[type='number'] {\n -moz-appearance: textfield;\n width: 8ch;\n text-align: right;\n }\n`;\n\nexport const Textarea = styled.textarea<any>`\n box-sizing: border-box;\n width: 100%;\n padding: 8px;\n border-radius: 4px;\n border: 1px solid #959fa8;\n color: #1b2126;\n\n ${pseudoStates}\n`;\n"],"names":["css","styled","theme"],"mappings":";;;;;;;;;AAQA,MAAM,YAAY,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAc,KAAKA,UAAG,qBAE3C,SAAS,KAAK,IAAI,GAAG,KAAK,GAAG,KAAK,CAAA,0PAAA,EAqBpD,QAAQ;AACV,IAAA;;;;;;;;;AASC,EAAA,CAAA,CAAA,CACF;AAEY,MAAA,KAAK,GAAGC,uBAAM,CAAC,KAAK,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,~~aAAA~~,EAAA,CAAA,CAAA,CAAA,YAAA,EAChBC,WAAK,CAAC,UAAU,CAU7B,sJAAA,EAAA,CAAC,EAAE,SAAS,EAAE,KAAI;IAClB,IAAI,MAAM,GAAG,MAAM;IACnB,IAAI,QAAQ,GAAG,MAAM;IAErB,IAAI,SAAS,KAAK,IAAI,EAAE;QACtB,MAAM,GAAG,MAAM;QACf,QAAQ,GAAG,MAAM;AAClB;IAED,OAAO;gBACK,MAAM,CAAA;mBACH,QAAQ,CAAA;KACtB;AACH,CAAC,CAAA,CAAA,EAEC,YAAY,CAAA,oKAAA;AAeH,MAAA,QAAQ,GAAGD,uBAAM,CAAC,QAAQ,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,~~aAAA~~,EAAA,CAAA,CAAA,CAAA,sGAAA,EAQnC,YAAY,CAAA;;;;;"}
1	+ {"version":3,"file":"styled.cjs","sources":["../../../src/components/TextField/styled.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { theme } from '../../theme';\n\ninterface InputProps {\n hasError: boolean;\n inputSize: 'sm' \| 'base';\n}\n\nconst pseudoStates = ({ hasError, inputSize }: InputProps) => css`\n & {\n --outline-size: ${inputSize === 'sm' ? '2px' : '4px'};\n }\n\n &:focus {\n border-color: #0079d1;\n box-shadow: 0 0 0 var(--outline-size) #80bce8;\n outline: 0;\n }\n\n &:invalid {\n border-color: #eb5757;\n box-shadow: 0 0 0 var(--outline-size) #f7bcbc;\n }\n\n &:disabled {\n box-shadow: none;\n background-color: #f2f3f5;\n border-color: #959fa8;\n color: #637381;\n }\n\n ${hasError &&\n `\n &,\n &:focus {\n border-color: #EB5757;\n }\n\n &:focus {\n box-shadow: 0 0 0 var(--outline-size) #F7BCBC;\n }\n `}\n`;\n\nexport const Input = styled.input<any>`\n font-family: ${theme.fontFamily};\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 12px;\n border-radius: 4px;\n border: 1px solid #959fa8;\n color: #1b2126;\n\n ${({ inputSize }) => {\n let height = '40px';\n let fontSize = '14px';\n\n if (inputSize === 'sm') {\n height = '32px';\n fontSize = '12px';\n }\n\n return `\n height: ${height};\n font-size: ${fontSize};\n `;\n }}\n\n ${pseudoStates}\n\n /* Hide number arrows/spinners */\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n &[type='number'] {\n -moz-appearance: textfield;\n width: 8ch;\n text-align: right;\n }\n`;\n\nexport const Textarea = styled.textarea<any>`\n box-sizing: border-box;\n width: 100%;\n padding: 8px;\n border-radius: 4px;\n border: 1px solid #959fa8;\n color: #1b2126;\n\n ${pseudoStates}\n`;\n"],"names":["css","styled","theme"],"mappings":";;;;;;;;;AAQA,MAAM,YAAY,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAc,KAAKA,UAAG,qBAE3C,SAAS,KAAK,IAAI,GAAG,KAAK,GAAG,KAAK,CAAA,0PAAA,EAqBpD,QAAQ;AACV,IAAA;;;;;;;;;AASC,EAAA,CAAA,CAAA,CACF;AAEY,MAAA,KAAK,GAAGC,uBAAM,CAAC,KAAK,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,YAAA,EAChBC,WAAK,CAAC,UAAU,CAU7B,sJAAA,EAAA,CAAC,EAAE,SAAS,EAAE,KAAI;IAClB,IAAI,MAAM,GAAG,MAAM;IACnB,IAAI,QAAQ,GAAG,MAAM;IAErB,IAAI,SAAS,KAAK,IAAI,EAAE;QACtB,MAAM,GAAG,MAAM;QACf,QAAQ,GAAG,MAAM;AAClB;IAED,OAAO;gBACK,MAAM,CAAA;mBACH,QAAQ,CAAA;KACtB;AACH,CAAC,CAAA,CAAA,EAEC,YAAY,CAAA,oKAAA;AAeH,MAAA,QAAQ,GAAGD,uBAAM,CAAC,QAAQ,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,sGAAA,EAQnC,YAAY,CAAA;;;;;"}

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

@@ -12,7 +12,7 @@ const pseudoStates = ({ hasError, inputSize }) => css `&{--outline-size:${inputS
       box-shadow: 0 0 0 var(--outline-size) #F7BCBC;
     }
   `}`;
-const Input = styled.input.withConfig({ displayName: "vui--Input", componentId: "vui--3jt15a" }) `font-family:${theme.fontFamily};box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:0 12px;border-radius:4px;border:1px solid #959fa8;color:#1b2126;${({ inputSize }) => {
+const Input = styled.input.withConfig({ displayName: "vui--Input", componentId: "vui--1o6oill" }) `font-family:${theme.fontFamily};box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:0 12px;border-radius:4px;border:1px solid #959fa8;color:#1b2126;${({ inputSize }) => {
     let height = '40px';
     let fontSize = '14px';
     if (inputSize === 'sm') {
@@ -24,7 +24,7 @@ const Input = styled.input.withConfig({ displayName: "vui--Input", componentId:
       font-size: ${fontSize};
     `;
 }} ${pseudoStates} &::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type='number']{-moz-appearance:textfield;width:8ch;text-align:right;}`;
-const Textarea = styled.textarea.withConfig({ displayName: "vui--Textarea", componentId: "vui--1k04ik" }) `box-sizing:border-box;width:100%;padding:8px;border-radius:4px;border:1px solid #959fa8;color:#1b2126;${pseudoStates}`;
+const Textarea = styled.textarea.withConfig({ displayName: "vui--Textarea", componentId: "vui--1jp908v" }) `box-sizing:border-box;width:100%;padding:8px;border-radius:4px;border:1px solid #959fa8;color:#1b2126;${pseudoStates}`;
 export { Input, Textarea };
 //# sourceMappingURL=styled.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"styled.js","sources":["../../../src/components/TextField/styled.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { theme } from '../../theme';\n\ninterface InputProps {\n hasError: boolean;\n inputSize: 'sm' \| 'base';\n}\n\nconst pseudoStates = ({ hasError, inputSize }: InputProps) => css`\n & {\n --outline-size: ${inputSize === 'sm' ? '2px' : '4px'};\n }\n\n &:focus {\n border-color: #0079d1;\n box-shadow: 0 0 0 var(--outline-size) #80bce8;\n outline: 0;\n }\n\n &:invalid {\n border-color: #eb5757;\n box-shadow: 0 0 0 var(--outline-size) #f7bcbc;\n }\n\n &:disabled {\n box-shadow: none;\n background-color: #f2f3f5;\n border-color: #959fa8;\n color: #637381;\n }\n\n ${hasError &&\n `\n &,\n &:focus {\n border-color: #EB5757;\n }\n\n &:focus {\n box-shadow: 0 0 0 var(--outline-size) #F7BCBC;\n }\n `}\n`;\n\nexport const Input = styled.input<any>`\n font-family: ${theme.fontFamily};\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 12px;\n border-radius: 4px;\n border: 1px solid #959fa8;\n color: #1b2126;\n\n ${({ inputSize }) => {\n let height = '40px';\n let fontSize = '14px';\n\n if (inputSize === 'sm') {\n height = '32px';\n fontSize = '12px';\n }\n\n return `\n height: ${height};\n font-size: ${fontSize};\n `;\n }}\n\n ${pseudoStates}\n\n /* Hide number arrows/spinners */\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n &[type='number'] {\n -moz-appearance: textfield;\n width: 8ch;\n text-align: right;\n }\n`;\n\nexport const Textarea = styled.textarea<any>`\n box-sizing: border-box;\n width: 100%;\n padding: 8px;\n border-radius: 4px;\n border: 1px solid #959fa8;\n color: #1b2126;\n\n ${pseudoStates}\n`;\n"],"names":[],"mappings":";;;AAQA,MAAM,YAAY,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAc,KAAK,GAAG,qBAE3C,SAAS,KAAK,IAAI,GAAG,KAAK,GAAG,KAAK,CAAA,0PAAA,EAqBpD,QAAQ;AACV,IAAA;;;;;;;;;AASC,EAAA,CAAA,CAAA,CACF;AAEY,MAAA,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,~~aAAA~~,EAAA,CAAA,CAAA,CAAA,YAAA,EAChB,KAAK,CAAC,UAAU,CAU7B,sJAAA,EAAA,CAAC,EAAE,SAAS,EAAE,KAAI;IAClB,IAAI,MAAM,GAAG,MAAM;IACnB,IAAI,QAAQ,GAAG,MAAM;IAErB,IAAI,SAAS,KAAK,IAAI,EAAE;QACtB,MAAM,GAAG,MAAM;QACf,QAAQ,GAAG,MAAM;AAClB;IAED,OAAO;gBACK,MAAM,CAAA;mBACH,QAAQ,CAAA;KACtB;AACH,CAAC,CAAA,CAAA,EAEC,YAAY,CAAA,oKAAA;AAeH,MAAA,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,~~aAAA~~,EAAA,CAAA,CAAA,CAAA,sGAAA,EAQnC,YAAY,CAAA;;;;"}
1	+ {"version":3,"file":"styled.js","sources":["../../../src/components/TextField/styled.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { theme } from '../../theme';\n\ninterface InputProps {\n hasError: boolean;\n inputSize: 'sm' \| 'base';\n}\n\nconst pseudoStates = ({ hasError, inputSize }: InputProps) => css`\n & {\n --outline-size: ${inputSize === 'sm' ? '2px' : '4px'};\n }\n\n &:focus {\n border-color: #0079d1;\n box-shadow: 0 0 0 var(--outline-size) #80bce8;\n outline: 0;\n }\n\n &:invalid {\n border-color: #eb5757;\n box-shadow: 0 0 0 var(--outline-size) #f7bcbc;\n }\n\n &:disabled {\n box-shadow: none;\n background-color: #f2f3f5;\n border-color: #959fa8;\n color: #637381;\n }\n\n ${hasError &&\n `\n &,\n &:focus {\n border-color: #EB5757;\n }\n\n &:focus {\n box-shadow: 0 0 0 var(--outline-size) #F7BCBC;\n }\n `}\n`;\n\nexport const Input = styled.input<any>`\n font-family: ${theme.fontFamily};\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 12px;\n border-radius: 4px;\n border: 1px solid #959fa8;\n color: #1b2126;\n\n ${({ inputSize }) => {\n let height = '40px';\n let fontSize = '14px';\n\n if (inputSize === 'sm') {\n height = '32px';\n fontSize = '12px';\n }\n\n return `\n height: ${height};\n font-size: ${fontSize};\n `;\n }}\n\n ${pseudoStates}\n\n /* Hide number arrows/spinners */\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n &[type='number'] {\n -moz-appearance: textfield;\n width: 8ch;\n text-align: right;\n }\n`;\n\nexport const Textarea = styled.textarea<any>`\n box-sizing: border-box;\n width: 100%;\n padding: 8px;\n border-radius: 4px;\n border: 1px solid #959fa8;\n color: #1b2126;\n\n ${pseudoStates}\n`;\n"],"names":[],"mappings":";;;AAQA,MAAM,YAAY,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAc,KAAK,GAAG,qBAE3C,SAAS,KAAK,IAAI,GAAG,KAAK,GAAG,KAAK,CAAA,0PAAA,EAqBpD,QAAQ;AACV,IAAA;;;;;;;;;AASC,EAAA,CAAA,CAAA,CACF;AAEY,MAAA,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,YAAA,EAChB,KAAK,CAAC,UAAU,CAU7B,sJAAA,EAAA,CAAC,EAAE,SAAS,EAAE,KAAI;IAClB,IAAI,MAAM,GAAG,MAAM;IACnB,IAAI,QAAQ,GAAG,MAAM;IAErB,IAAI,SAAS,KAAK,IAAI,EAAE;QACtB,MAAM,GAAG,MAAM;QACf,QAAQ,GAAG,MAAM;AAClB;IAED,OAAO;gBACK,MAAM,CAAA;mBACH,QAAQ,CAAA;KACtB;AACH,CAAC,CAAA,CAAA,EAEC,YAAY,CAAA,oKAAA;AAeH,MAAA,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,sGAAA,EAQnC,YAAY,CAAA;;;;"}

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

@@ -11,11 +11,11 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-const ToastsLayoutContainer = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--ToastsLayoutContainer", componentId: "vui--1iztsl9" }) `position:fixed;bottom:24px;width:100%;pointer-events:none;z-index:${index.theme.layers.tooltip};`;
-const Toast = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--Toast", componentId: "vui--1o64628" }) `background-color:${index.theme.colors.neutral.ink.dark};padding:12px 24px 12px 12px;box-shadow:${index.theme.shadows.lg};border-radius:${index.theme.radius.md};pointer-events:auto;z-index:40;min-width:${({ minWidth }) => minWidth};max-width:80vw;&.veeqo-components-toast-enter{transform:translateY(12px);opacity:0;}&.veeqo-components-toast-enter-active{transform:translateY(0);opacity:1;transition:500ms ease;}&.veeqo-components-toast-exit{transform:${({ last }) => (last ? 'translateY(0)' : 'translateX(0)')};opacity:1;}&.veeqo-components-toast-exit-active{transform:${({ last }) => (last ? 'translateY(12px)' : 'translateX(12px)')};opacity:0;transition:500ms ease;}`;
-const IconWrap = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--IconWrap", componentId: "vui--1nmtetq" }) `display:flex;flex-direction:row;align-items:center;justify-content:center;height:40px;width:40px;border-radius:${index.theme.radius.md};background-color:${({ color }) => color};color:#fff;svg{width:${sizes.sizes.md};height:${sizes.sizes.md};}`;
-const ContentStack = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--ContentStack", componentId: "vui--fvpujj" }) `flex-grow:1;`;
-const StyledText = styled__default.default(Text.Text).withConfig({ displayName: "vui--StyledText", componentId: "vui--ppieao" }) `color:white;font-size:16px;`;
+const ToastsLayoutContainer = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--ToastsLayoutContainer", componentId: "vui--qrqt2g" }) `position:fixed;bottom:24px;width:100%;pointer-events:none;z-index:${index.theme.layers.tooltip};`;
+const Toast = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--Toast", componentId: "vui--f5gjtj" }) `background-color:${index.theme.colors.neutral.ink.dark};padding:12px 24px 12px 12px;box-shadow:${index.theme.shadows.lg};border-radius:${index.theme.radius.md};pointer-events:auto;z-index:40;min-width:${({ minWidth }) => minWidth};max-width:80vw;&.veeqo-components-toast-enter{transform:translateY(12px);opacity:0;}&.veeqo-components-toast-enter-active{transform:translateY(0);opacity:1;transition:500ms ease;}&.veeqo-components-toast-exit{transform:${({ last }) => (last ? 'translateY(0)' : 'translateX(0)')};opacity:1;}&.veeqo-components-toast-exit-active{transform:${({ last }) => (last ? 'translateY(12px)' : 'translateX(12px)')};opacity:0;transition:500ms ease;}`;
+const IconWrap = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--IconWrap", componentId: "vui--n3gc7q" }) `display:flex;flex-direction:row;align-items:center;justify-content:center;height:40px;width:40px;border-radius:${index.theme.radius.md};background-color:${({ color }) => color};color:#fff;svg{width:${sizes.sizes.md};height:${sizes.sizes.md};}`;
+const ContentStack = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--ContentStack", componentId: "vui--12f8l37" }) `flex-grow:1;`;
+const StyledText = styled__default.default(Text.Text).withConfig({ displayName: "vui--StyledText", componentId: "vui--1qgwlso" }) `color:white;font-size:16px;`;
 exports.ContentStack = ContentStack;
 exports.IconWrap = IconWrap;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"styled.cjs","sources":["../../../../src/components/ToastsLayout/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { Stack } from '../../Stack';\nimport { BaseContainer } from '../../BaseContainer';\nimport { Text } from '../../Text';\nimport { theme } from '../../../theme';\nimport { sizes } from '../../../theme/modules/sizes';\n\nexport const ToastsLayoutContainer = styled(Stack)`\n position: fixed;\n bottom: 24px;\n width: 100%;\n pointer-events: none;\n z-index: ${theme.layers.tooltip};\n`;\n\nexport const Toast = styled(Stack)<{\n minWidth: number \| string;\n last: boolean;\n}>`\n background-color: ${theme.colors.neutral.ink.dark};\n padding: 12px 24px 12px 12px;\n box-shadow: ${theme.shadows.lg};\n border-radius: ${theme.radius.md};\n pointer-events: auto;\n z-index: 40;\n min-width: ${({ minWidth }) => minWidth};\n max-width: 80vw;\n\n &.veeqo-components-toast-enter {\n transform: translateY(12px);\n opacity: 0;\n }\n\n &.veeqo-components-toast-enter-active {\n transform: translateY(0);\n opacity: 1;\n transition: 500ms ease;\n }\n\n &.veeqo-components-toast-exit {\n transform: ${({ last }) => (last ? 'translateY(0)' : 'translateX(0)')};\n opacity: 1;\n }\n\n &.veeqo-components-toast-exit-active {\n transform: ${({ last }) => (last ? 'translateY(12px)' : 'translateX(12px)')};\n opacity: 0;\n transition: 500ms ease;\n }\n`;\n\nexport const IconWrap = styled(BaseContainer)<{ color: string }>`\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n height: 40px;\n width: 40px;\n border-radius: ${theme.radius.md};\n background-color: ${({ color }) => color};\n color: #fff;\n\n svg {\n width: ${sizes.md};\n height: ${sizes.md};\n }\n`;\n\nexport const ContentStack = styled(Stack)`\n flex-grow: 1;\n`;\n\nexport const StyledText = styled(Text)`\n color: white;\n font-size: 16px;\n`;\n"],"names":["styled","Stack","theme","BaseContainer","sizes","Text"],"mappings":";;;;;;;;;;;;;AAQO,MAAM,qBAAqB,GAAGA,uBAAM,CAACC,WAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,4BAAA,EAAA,WAAA,EAAA,~~cAAA~~,EAAA,CAAA,CAAA,CAAA,kEAAA,EAKrCC,WAAK,CAAC,MAAM,CAAC,OAAO;AAGpB,MAAA,KAAK,GAAGF,uBAAM,CAACC,WAAK,CAAC,CAIZ,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,~~cAAA~~,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAAC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAEnC,wCAAA,EAAAA,WAAK,CAAC,OAAO,CAAC,EAAE,CAAA,eAAA,EACbA,WAAK,CAAC,MAAM,CAAC,EAAE,6CAGnB,CAAC,EAAE,QAAQ,EAAE,KAAK,QAAQ,CAexB,4NAAA,EAAA,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,GAAG,eAAe,GAAG,eAAe,CAAC,CAAA,2DAAA,EAKxD,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;AAMxE,MAAM,QAAQ,GAAGF,uBAAM,CAACG,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,~~cAAA~~,EAAA,CAAA,CAAA,CAAA,+GAAA,EAO1BD,WAAK,CAAC,MAAM,CAAC,EAAE,CACZ,kBAAA,EAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAI7B,sBAAA,EAAAE,WAAK,CAAC,EAAE,CACP,QAAA,EAAAA,WAAK,CAAC,EAAE;MAIT,YAAY,GAAGJ,uBAAM,CAACC,WAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,~~aAAA~~,EAAA,CAAA,CAAA,CAAA,YAAA;MAI5B,UAAU,GAAGD,uBAAM,CAACK,SAAI,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,~~aAAA~~,EAAA,CAAA,CAAA,CAAA,2BAAA;;;;;;;;"}
1	+ {"version":3,"file":"styled.cjs","sources":["../../../../src/components/ToastsLayout/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { Stack } from '../../Stack';\nimport { BaseContainer } from '../../BaseContainer';\nimport { Text } from '../../Text';\nimport { theme } from '../../../theme';\nimport { sizes } from '../../../theme/modules/sizes';\n\nexport const ToastsLayoutContainer = styled(Stack)`\n position: fixed;\n bottom: 24px;\n width: 100%;\n pointer-events: none;\n z-index: ${theme.layers.tooltip};\n`;\n\nexport const Toast = styled(Stack)<{\n minWidth: number \| string;\n last: boolean;\n}>`\n background-color: ${theme.colors.neutral.ink.dark};\n padding: 12px 24px 12px 12px;\n box-shadow: ${theme.shadows.lg};\n border-radius: ${theme.radius.md};\n pointer-events: auto;\n z-index: 40;\n min-width: ${({ minWidth }) => minWidth};\n max-width: 80vw;\n\n &.veeqo-components-toast-enter {\n transform: translateY(12px);\n opacity: 0;\n }\n\n &.veeqo-components-toast-enter-active {\n transform: translateY(0);\n opacity: 1;\n transition: 500ms ease;\n }\n\n &.veeqo-components-toast-exit {\n transform: ${({ last }) => (last ? 'translateY(0)' : 'translateX(0)')};\n opacity: 1;\n }\n\n &.veeqo-components-toast-exit-active {\n transform: ${({ last }) => (last ? 'translateY(12px)' : 'translateX(12px)')};\n opacity: 0;\n transition: 500ms ease;\n }\n`;\n\nexport const IconWrap = styled(BaseContainer)<{ color: string }>`\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n height: 40px;\n width: 40px;\n border-radius: ${theme.radius.md};\n background-color: ${({ color }) => color};\n color: #fff;\n\n svg {\n width: ${sizes.md};\n height: ${sizes.md};\n }\n`;\n\nexport const ContentStack = styled(Stack)`\n flex-grow: 1;\n`;\n\nexport const StyledText = styled(Text)`\n color: white;\n font-size: 16px;\n`;\n"],"names":["styled","Stack","theme","BaseContainer","sizes","Text"],"mappings":";;;;;;;;;;;;;AAQO,MAAM,qBAAqB,GAAGA,uBAAM,CAACC,WAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,4BAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,kEAAA,EAKrCC,WAAK,CAAC,MAAM,CAAC,OAAO;AAGpB,MAAA,KAAK,GAAGF,uBAAM,CAACC,WAAK,CAAC,CAIZ,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAAC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAEnC,wCAAA,EAAAA,WAAK,CAAC,OAAO,CAAC,EAAE,CAAA,eAAA,EACbA,WAAK,CAAC,MAAM,CAAC,EAAE,6CAGnB,CAAC,EAAE,QAAQ,EAAE,KAAK,QAAQ,CAexB,4NAAA,EAAA,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,GAAG,eAAe,GAAG,eAAe,CAAC,CAAA,2DAAA,EAKxD,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;AAMxE,MAAM,QAAQ,GAAGF,uBAAM,CAACG,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,+GAAA,EAO1BD,WAAK,CAAC,MAAM,CAAC,EAAE,CACZ,kBAAA,EAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAI7B,sBAAA,EAAAE,WAAK,CAAC,EAAE,CACP,QAAA,EAAAA,WAAK,CAAC,EAAE;MAIT,YAAY,GAAGJ,uBAAM,CAACC,WAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,YAAA;MAI5B,UAAU,GAAGD,uBAAM,CAACK,SAAI,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,2BAAA;;;;;;;;"}

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

@@ -5,11 +5,11 @@ import { Text } from '../../Text/Text.js';
 import { theme } from '../../../theme/index.js';
 import { sizes } from '../../../theme/modules/sizes.js';
-const ToastsLayoutContainer = styled(Stack).withConfig({ displayName: "vui--ToastsLayoutContainer", componentId: "vui--1iztsl9" }) `position:fixed;bottom:24px;width:100%;pointer-events:none;z-index:${theme.layers.tooltip};`;
-const Toast = styled(Stack).withConfig({ displayName: "vui--Toast", componentId: "vui--1o64628" }) `background-color:${theme.colors.neutral.ink.dark};padding:12px 24px 12px 12px;box-shadow:${theme.shadows.lg};border-radius:${theme.radius.md};pointer-events:auto;z-index:40;min-width:${({ minWidth }) => minWidth};max-width:80vw;&.veeqo-components-toast-enter{transform:translateY(12px);opacity:0;}&.veeqo-components-toast-enter-active{transform:translateY(0);opacity:1;transition:500ms ease;}&.veeqo-components-toast-exit{transform:${({ last }) => (last ? 'translateY(0)' : 'translateX(0)')};opacity:1;}&.veeqo-components-toast-exit-active{transform:${({ last }) => (last ? 'translateY(12px)' : 'translateX(12px)')};opacity:0;transition:500ms ease;}`;
-const IconWrap = styled(BaseContainer).withConfig({ displayName: "vui--IconWrap", componentId: "vui--1nmtetq" }) `display:flex;flex-direction:row;align-items:center;justify-content:center;height:40px;width:40px;border-radius:${theme.radius.md};background-color:${({ color }) => color};color:#fff;svg{width:${sizes.md};height:${sizes.md};}`;
-const ContentStack = styled(Stack).withConfig({ displayName: "vui--ContentStack", componentId: "vui--fvpujj" }) `flex-grow:1;`;
-const StyledText = styled(Text).withConfig({ displayName: "vui--StyledText", componentId: "vui--ppieao" }) `color:white;font-size:16px;`;
+const ToastsLayoutContainer = styled(Stack).withConfig({ displayName: "vui--ToastsLayoutContainer", componentId: "vui--qrqt2g" }) `position:fixed;bottom:24px;width:100%;pointer-events:none;z-index:${theme.layers.tooltip};`;
+const Toast = styled(Stack).withConfig({ displayName: "vui--Toast", componentId: "vui--f5gjtj" }) `background-color:${theme.colors.neutral.ink.dark};padding:12px 24px 12px 12px;box-shadow:${theme.shadows.lg};border-radius:${theme.radius.md};pointer-events:auto;z-index:40;min-width:${({ minWidth }) => minWidth};max-width:80vw;&.veeqo-components-toast-enter{transform:translateY(12px);opacity:0;}&.veeqo-components-toast-enter-active{transform:translateY(0);opacity:1;transition:500ms ease;}&.veeqo-components-toast-exit{transform:${({ last }) => (last ? 'translateY(0)' : 'translateX(0)')};opacity:1;}&.veeqo-components-toast-exit-active{transform:${({ last }) => (last ? 'translateY(12px)' : 'translateX(12px)')};opacity:0;transition:500ms ease;}`;
+const IconWrap = styled(BaseContainer).withConfig({ displayName: "vui--IconWrap", componentId: "vui--n3gc7q" }) `display:flex;flex-direction:row;align-items:center;justify-content:center;height:40px;width:40px;border-radius:${theme.radius.md};background-color:${({ color }) => color};color:#fff;svg{width:${sizes.md};height:${sizes.md};}`;
+const ContentStack = styled(Stack).withConfig({ displayName: "vui--ContentStack", componentId: "vui--12f8l37" }) `flex-grow:1;`;
+const StyledText = styled(Text).withConfig({ displayName: "vui--StyledText", componentId: "vui--1qgwlso" }) `color:white;font-size:16px;`;
 export { ContentStack, IconWrap, StyledText, Toast, ToastsLayoutContainer };
 //# sourceMappingURL=styled.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"styled.js","sources":["../../../../src/components/ToastsLayout/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { Stack } from '../../Stack';\nimport { BaseContainer } from '../../BaseContainer';\nimport { Text } from '../../Text';\nimport { theme } from '../../../theme';\nimport { sizes } from '../../../theme/modules/sizes';\n\nexport const ToastsLayoutContainer = styled(Stack)`\n position: fixed;\n bottom: 24px;\n width: 100%;\n pointer-events: none;\n z-index: ${theme.layers.tooltip};\n`;\n\nexport const Toast = styled(Stack)<{\n minWidth: number \| string;\n last: boolean;\n}>`\n background-color: ${theme.colors.neutral.ink.dark};\n padding: 12px 24px 12px 12px;\n box-shadow: ${theme.shadows.lg};\n border-radius: ${theme.radius.md};\n pointer-events: auto;\n z-index: 40;\n min-width: ${({ minWidth }) => minWidth};\n max-width: 80vw;\n\n &.veeqo-components-toast-enter {\n transform: translateY(12px);\n opacity: 0;\n }\n\n &.veeqo-components-toast-enter-active {\n transform: translateY(0);\n opacity: 1;\n transition: 500ms ease;\n }\n\n &.veeqo-components-toast-exit {\n transform: ${({ last }) => (last ? 'translateY(0)' : 'translateX(0)')};\n opacity: 1;\n }\n\n &.veeqo-components-toast-exit-active {\n transform: ${({ last }) => (last ? 'translateY(12px)' : 'translateX(12px)')};\n opacity: 0;\n transition: 500ms ease;\n }\n`;\n\nexport const IconWrap = styled(BaseContainer)<{ color: string }>`\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n height: 40px;\n width: 40px;\n border-radius: ${theme.radius.md};\n background-color: ${({ color }) => color};\n color: #fff;\n\n svg {\n width: ${sizes.md};\n height: ${sizes.md};\n }\n`;\n\nexport const ContentStack = styled(Stack)`\n flex-grow: 1;\n`;\n\nexport const StyledText = styled(Text)`\n color: white;\n font-size: 16px;\n`;\n"],"names":[],"mappings":";;;;;;;AAQO,MAAM,qBAAqB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,4BAAA,EAAA,WAAA,EAAA,~~cAAA~~,EAAA,CAAA,CAAA,CAAA,kEAAA,EAKrC,KAAK,CAAC,MAAM,CAAC,OAAO;AAGpB,MAAA,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAIZ,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,~~cAAA~~,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAEnC,wCAAA,EAAA,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA,eAAA,EACb,KAAK,CAAC,MAAM,CAAC,EAAE,6CAGnB,CAAC,EAAE,QAAQ,EAAE,KAAK,QAAQ,CAexB,4NAAA,EAAA,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,GAAG,eAAe,GAAG,eAAe,CAAC,CAAA,2DAAA,EAKxD,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;AAMxE,MAAM,QAAQ,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,~~cAAA~~,EAAA,CAAA,CAAA,CAAA,+GAAA,EAO1B,KAAK,CAAC,MAAM,CAAC,EAAE,CACZ,kBAAA,EAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAI7B,sBAAA,EAAA,KAAK,CAAC,EAAE,CACP,QAAA,EAAA,KAAK,CAAC,EAAE;MAIT,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,~~aAAA~~,EAAA,CAAA,CAAA,CAAA,YAAA;MAI5B,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,~~aAAA~~,EAAA,CAAA,CAAA,CAAA,2BAAA;;;;"}
1	+ {"version":3,"file":"styled.js","sources":["../../../../src/components/ToastsLayout/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { Stack } from '../../Stack';\nimport { BaseContainer } from '../../BaseContainer';\nimport { Text } from '../../Text';\nimport { theme } from '../../../theme';\nimport { sizes } from '../../../theme/modules/sizes';\n\nexport const ToastsLayoutContainer = styled(Stack)`\n position: fixed;\n bottom: 24px;\n width: 100%;\n pointer-events: none;\n z-index: ${theme.layers.tooltip};\n`;\n\nexport const Toast = styled(Stack)<{\n minWidth: number \| string;\n last: boolean;\n}>`\n background-color: ${theme.colors.neutral.ink.dark};\n padding: 12px 24px 12px 12px;\n box-shadow: ${theme.shadows.lg};\n border-radius: ${theme.radius.md};\n pointer-events: auto;\n z-index: 40;\n min-width: ${({ minWidth }) => minWidth};\n max-width: 80vw;\n\n &.veeqo-components-toast-enter {\n transform: translateY(12px);\n opacity: 0;\n }\n\n &.veeqo-components-toast-enter-active {\n transform: translateY(0);\n opacity: 1;\n transition: 500ms ease;\n }\n\n &.veeqo-components-toast-exit {\n transform: ${({ last }) => (last ? 'translateY(0)' : 'translateX(0)')};\n opacity: 1;\n }\n\n &.veeqo-components-toast-exit-active {\n transform: ${({ last }) => (last ? 'translateY(12px)' : 'translateX(12px)')};\n opacity: 0;\n transition: 500ms ease;\n }\n`;\n\nexport const IconWrap = styled(BaseContainer)<{ color: string }>`\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n height: 40px;\n width: 40px;\n border-radius: ${theme.radius.md};\n background-color: ${({ color }) => color};\n color: #fff;\n\n svg {\n width: ${sizes.md};\n height: ${sizes.md};\n }\n`;\n\nexport const ContentStack = styled(Stack)`\n flex-grow: 1;\n`;\n\nexport const StyledText = styled(Text)`\n color: white;\n font-size: 16px;\n`;\n"],"names":[],"mappings":";;;;;;;AAQO,MAAM,qBAAqB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,4BAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,kEAAA,EAKrC,KAAK,CAAC,MAAM,CAAC,OAAO;AAGpB,MAAA,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAIZ,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAEnC,wCAAA,EAAA,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA,eAAA,EACb,KAAK,CAAC,MAAM,CAAC,EAAE,6CAGnB,CAAC,EAAE,QAAQ,EAAE,KAAK,QAAQ,CAexB,4NAAA,EAAA,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,GAAG,eAAe,GAAG,eAAe,CAAC,CAAA,2DAAA,EAKxD,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;AAMxE,MAAM,QAAQ,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,+GAAA,EAO1B,KAAK,CAAC,MAAM,CAAC,EAAE,CACZ,kBAAA,EAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAI7B,sBAAA,EAAA,KAAK,CAAC,EAAE,CACP,QAAA,EAAA,KAAK,CAAC,EAAE;MAIT,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,YAAA;MAI5B,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,2BAAA;;;;"}