@veeqo/ui 10.0.1 → 10.2.0

package/dist/components/ShortcutKeys/styled.cjs

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

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

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

package/dist/components/ShortcutKeys/styled.js

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

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

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

package/dist/components/SimpleTable/styled.cjs

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

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

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

package/dist/components/SimpleTable/styled.js

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

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

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

package/dist/components/Skeleton/Skeleton.cjs

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

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

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

package/dist/components/Skeleton/Skeleton.js

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

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

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

package/dist/components/Slider/styled.cjs

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

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

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

package/dist/components/Slider/styled.js

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

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

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

package/dist/components/Stack/Stack.cjs

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

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

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

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

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

package/dist/components/Stack/Stack.js

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

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

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

package/dist/components/Stepper/styled.cjs

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

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

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

package/dist/components/Stepper/styled.js

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

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

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

package/dist/components/Tag/Tag.cjs

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

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

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

package/dist/components/Tag/Tag.js

@@ -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--i7kdk5" }) `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--1rdo7hk" }) `display:inline-flex;flex-direction:row;justify-content:center;align-items:center;border-radius:4px;padding:4px 8px;${({ backgroundColor, color }) => `
     color: ${color !== null && color !== undefined ? color : colors.neutral.ink.base};
     background-color: ${backgroundColor !== null && backgroundColor !== undefined ? backgroundColor : colors.neutral.grey.base};
   `}`;

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

@@ -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,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;;;;"}
+{"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;;;;"}

package/dist/components/Text/Text.cjs

@@ -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--mv83np" }) `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--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') &&
     `
     cursor: pointer;
     background-color: transparent;

package/dist/components/Text/Text.js

@@ -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--mv83np" }) `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--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') &&
     `
     cursor: pointer;
     background-color: transparent;

package/dist/components/TextField/styled.cjs

@@ -8,8 +8,8 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const Input = styled__default.default.input.withConfig({ displayName: "vui--Input", componentId: "vui--ectso6" }) `${inputStyles.inputFullStyles} width:100%;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type='number']{-moz-appearance:textfield;min-width:8ch;text-align:right;}`;
-const Textarea = styled__default.default.textarea.withConfig({ displayName: "vui--Textarea", componentId: "vui--bp8kpm" }) `${inputStyles.inputFullStyles} padding-block:${index.theme.sizes[2]};`;
+const Input = styled__default.default.input.withConfig({ displayName: "vui--Input", componentId: "vui--3jt15a" }) `${inputStyles.inputFullStyles} width:100%;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type='number']{-moz-appearance:textfield;min-width:8ch;text-align:right;}`;
+const Textarea = styled__default.default.textarea.withConfig({ displayName: "vui--Textarea", componentId: "vui--1k04ik" }) `${inputStyles.inputFullStyles} padding-block:${index.theme.sizes[2]};`;
 
 exports.Input = Input;
 exports.Textarea = Textarea;

package/dist/components/TextField/styled.js

@@ -2,8 +2,8 @@ import styled from 'styled-components';
 import { inputFullStyles } from '../../utils/forms/inputStyles.js';
 import { theme } from '../../theme/index.js';
 
-const Input = styled.input.withConfig({ displayName: "vui--Input", componentId: "vui--ectso6" }) `${inputFullStyles} width:100%;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type='number']{-moz-appearance:textfield;min-width:8ch;text-align:right;}`;
-const Textarea = styled.textarea.withConfig({ displayName: "vui--Textarea", componentId: "vui--bp8kpm" }) `${inputFullStyles} padding-block:${theme.sizes[2]};`;
+const Input = styled.input.withConfig({ displayName: "vui--Input", componentId: "vui--3jt15a" }) `${inputFullStyles} width:100%;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type='number']{-moz-appearance:textfield;min-width:8ch;text-align:right;}`;
+const Textarea = styled.textarea.withConfig({ displayName: "vui--Textarea", componentId: "vui--1k04ik" }) `${inputFullStyles} padding-block:${theme.sizes[2]};`;
 
 export { Input, Textarea };
 //# sourceMappingURL=styled.js.map

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

@@ -12,11 +12,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--1gcg8jn" }) `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--1sz012c" }) `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--17e8s7e" }) `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--tg3v7a" }) `flex-grow:1;`;
-const StyledText = styled__default.default(Text.Text).withConfig({ displayName: "vui--StyledText", componentId: "vui--1aoeeaz" }) `color:white;font-size:16px;`;
+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;`;
 
 exports.ContentStack = ContentStack;
 exports.IconWrap = IconWrap;

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

@@ -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,cAAA,EAAA,CAAA,CAAA,CAAA,2BAAA;;;;;;;;"}
+{"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;;;;;;;;"}

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

@@ -6,11 +6,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--1gcg8jn" }) `position:fixed;bottom:24px;width:100%;pointer-events:none;z-index:${theme.layers.tooltip};`;
-const Toast = styled(Stack).withConfig({ displayName: "vui--Toast", componentId: "vui--1sz012c" }) `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--17e8s7e" }) `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--tg3v7a" }) `flex-grow:1;`;
-const StyledText = styled(Text).withConfig({ displayName: "vui--StyledText", componentId: "vui--1aoeeaz" }) `color:white;font-size:16px;`;
+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;`;
 
 export { ContentStack, IconWrap, StyledText, Toast, ToastsLayoutContainer };
 //# sourceMappingURL=styled.js.map