npm - @veeqo/ui - Versions diffs - 9.10.3 → 10.0.0-beta.2 - Mend

@veeqo/ui 9.10.3 → 10.0.0-beta.2

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

Files changed (466) hide show

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -12,7 +12,7 @@ var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 /**
  * Layout component.
  */
-const Stack = styled__default.default.div.withConfig({ displayName: "vui--Stack", componentId: "vui--1mxdupo" }) `display:flex;${(props) => {
+const Stack = styled__default.default.div.withConfig({ displayName: "vui--Stack", componentId: "vui--3cm6ee" }) `display:flex;${(props) => {
     const { direction = 'vertical', alignX = 'start', alignY = 'start', spacing = 'base' } = props;
     let alignItems;
     let justifyContent;

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

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

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

@@ -6,7 +6,7 @@ import { Text } from '../Text/Text.js';
 /**
  * Layout component.
  */
-const Stack = styled.div.withConfig({ displayName: "vui--Stack", componentId: "vui--1mxdupo" }) `display:flex;${(props) => {
+const Stack = styled.div.withConfig({ displayName: "vui--Stack", componentId: "vui--3cm6ee" }) `display:flex;${(props) => {
     const { direction = 'vertical', alignX = 'start', alignY = 'start', spacing = 'base' } = props;
     let alignItems;
     let justifyContent;

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

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

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

@@ -3,18 +3,23 @@
 var React = require('react');
 var index = require('../../theme/index.cjs');
 var styled = require('./styled.cjs');
-var DownArrowIcon = require('../../tempIcons/DownArrowIcon.cjs');
-var UpArrowIcon = require('../../tempIcons/UpArrowIcon.cjs');
+require('../../theme/modules/sizes.cjs');
+var MinusIcon = require('../../tempIcons/MinusIcon.cjs');
+var PlusIcon = require('../../tempIcons/PlusIcon.cjs');
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-const Stepper = ({ onIncrement, onDecrement, disabled = false, size }) => (React__default.default.createElement(styled.Container, { size: size },
-    React__default.default.createElement(styled.StepButton, { type: "button", onClick: onIncrement, disabled: disabled },
-        React__default.default.createElement(UpArrowIcon.UpArrowIcon, { height: index.theme.sizes.base, width: index.theme.sizes.base, color: index.theme.colors.neutral.ink.base })),
-    React__default.default.createElement(styled.StepButton, { type: "button", onClick: onDecrement, disabled: disabled },
-        React__default.default.createElement(DownArrowIcon.DownArrowIcon, { height: index.theme.sizes.base, width: index.theme.sizes.base, color: index.theme.colors.neutral.ink.base }))));
+const Stepper = ({ onIncrement, onDecrement, disabled, hasError, size }) => {
+    const compact = size === 'sm';
+    return (React__default.default.createElement(styled.ContainerStack, { hasError: hasError, disabled: disabled, direction: "horizontal", alignY: "center", spacing: "none" },
+        React__default.default.createElement(styled.StepButton, { type: "button", "aria-label": "Decrement", onClick: onDecrement, disabled: disabled, compact: compact },
+            React__default.default.createElement(MinusIcon.MinusIcon, { height: index.theme.sizes.base, width: index.theme.sizes.base, color: index.theme.colors.neutral.ink.base })),
+        React__default.default.createElement(styled.StepperDivider, { compact: compact }),
+        React__default.default.createElement(styled.StepButton, { type: "button", "aria-label": "Increment", onClick: onIncrement, disabled: disabled, compact: compact },
+            React__default.default.createElement(PlusIcon.PlusIcon, { height: index.theme.sizes.base, width: index.theme.sizes.base, color: index.theme.colors.neutral.ink.base }))));
+};
 exports.Stepper = Stepper;
 //# sourceMappingURL=Stepper.cjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Stepper.cjs","sources":["../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import React from 'react';\nimport { theme } from '../../theme';\n\nimport { ~~Container,~~ ~~StepButton~~ } from '~~./styled~~';\nimport { ~~DownArrowIcon~~ } from '~~../../tempIcons/DownArrowIcon~~';\nimport { ~~UpArrowIcon~~ } from '../../tempIcons~~/UpArrowIcon~~';\~~nimport { ComponentSize } from '../types';\~~n\nexport interface StepperProps {\n onIncrement: () => void;\n onDecrement: () => void;\n disabled?: boolean;\n size?: ComponentSize;\n}\n\nexport const Stepper = ({ onIncrement, onDecrement, disabled ~~= false~~, size }: StepperProps) => (\n ~~<Container~~ size={~~size~~}>\n <StepButton type=\"button\" onClick={~~onIncrement~~} disabled={disabled}>\n <~~UpArrowIcon~~\n height={theme.sizes.base}\n width={theme.sizes.base}\n color={theme.colors.neutral.ink.base}\n />\n </StepButton>\n <StepButton type=\"button\" onClick={~~onDecrement~~} disabled={disabled}>\n <~~DownArrowIcon~~\n height={theme.sizes.base}\n width={theme.sizes.base}\n color={theme.colors.neutral.ink.base}\n />\n </StepButton>\n </~~Container~~>\n);\n"],"names":["React","~~Container~~","StepButton","~~UpArrowIcon~~","theme","~~DownArrowIcon~~"],"mappings":"~~;;;;;;;;;;;;~~AAea,MAAA,OAAO,GAAG,CAAC,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,~~GAAG~~,~~KAAK~~,EAAE,IAAI,EAAgB,~~MACxFA~~,~~sBAAA~~,~~CAAA~~,~~aAAA~~,~~CAACC~~,~~gBAAS~~,EAAA,~~EAAC~~,~~IAAI~~,EAAE,~~IAAI~~,EAAA;~~AACnB~~,~~IAAAD~~,sBAAA,CAAA,aAAA,CAACE,iBAAU,EAAA,~~EAAC,~~IAAI,EAAC,QAAQ,~~EAAC~~,OAAO,EAAE,WAAW,~~EAAE~~,QAAQ,EAAE,QAAQ,EAAA;~~AAChE~~,~~QAAAF~~,sBAAA,CAAA,aAAA,CAACG,~~uBAAW~~,EAAA,~~EACV~~,MAAM,EAAEC,WAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAEA,WAAK,CAAC,KAAK,CAAC,IAAI,EACvB,KAAK,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,GACpC,CACS;AACb,~~IAAAJ~~,sBAAA,CAAA,aAAA,CAACE,iBAAU,EAAA,~~EAAC,~~IAAI,EAAC,QAAQ,~~EAAC~~,OAAO,EAAE,WAAW,~~EAAE~~,QAAQ,EAAE,QAAQ,EAAA;~~AAChE~~,~~QAAAF~~,sBAAA,CAAA,aAAA,~~CAACK~~,~~2BAAa~~,EAAA,~~EACZ~~,MAAM,~~EAAED~~,WAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAEA,WAAK,CAAC,KAAK,CAAC,IAAI,EACvB,KAAK,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAA,CACpC,CACS,~~CACH~~;;;;"}
1	+ {"version":3,"file":"Stepper.cjs","sources":["../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import React from 'react';\nimport { theme } from '../../theme';\nimport { ComponentSize } from '../types';\n\nimport { ContainerStack, StepButton, StepperDivider } from './styled';\nimport { MinusIcon, PlusIcon } from '../../tempIcons';\n\nexport interface StepperProps {\n onIncrement: () => void;\n onDecrement: () => void;\n disabled?: boolean;\n hasError?: boolean;\n size?: ComponentSize;\n}\n\nexport const Stepper = ({ onIncrement, onDecrement, disabled, hasError, size }: StepperProps) => {\n const compact = size === 'sm';\n\n return (\n <ContainerStack\n hasError={hasError}\n disabled={disabled}\n direction=\"horizontal\"\n alignY=\"center\"\n spacing=\"none\"\n >\n <StepButton\n type=\"button\"\n aria-label=\"Decrement\"\n onClick={onDecrement}\n disabled={disabled}\n compact={compact}\n >\n <MinusIcon\n height={theme.sizes.base}\n width={theme.sizes.base}\n color={theme.colors.neutral.ink.base}\n />\n </StepButton>\n <StepperDivider compact={compact} />\n <StepButton\n type=\"button\"\n aria-label=\"Increment\"\n onClick={onIncrement}\n disabled={disabled}\n compact={compact}\n >\n <PlusIcon\n height={theme.sizes.base}\n width={theme.sizes.base}\n color={theme.colors.neutral.ink.base}\n />\n </StepButton>\n </ContainerStack>\n );\n};\n"],"names":["React","ContainerStack","StepButton","MinusIcon","theme","StepperDivider","PlusIcon"],"mappings":";;;;;;;;;;;;;AAea,MAAA,OAAO,GAAG,CAAC,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAgB,KAAI;AAC9F,IAAA,MAAM,OAAO,GAAG,IAAI,KAAK,IAAI;IAE7B,QACEA,qCAACC,qBAAc,EAAA,EACb,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAC,YAAY,EACtB,MAAM,EAAC,QAAQ,EACf,OAAO,EAAC,MAAM,EAAA;AAEd,QAAAD,sBAAA,CAAA,aAAA,CAACE,iBAAU,EACT,EAAA,IAAI,EAAC,QAAQ,EAAA,YAAA,EACF,WAAW,EACtB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAAA;AAEhB,YAAAF,sBAAA,CAAA,aAAA,CAACG,mBAAS,EAAA,EACR,MAAM,EAAEC,WAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAEA,WAAK,CAAC,KAAK,CAAC,IAAI,EACvB,KAAK,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,GACpC,CACS;AACb,QAAAJ,sBAAA,CAAA,aAAA,CAACK,qBAAc,EAAA,EAAC,OAAO,EAAE,OAAO,EAAI,CAAA;AACpC,QAAAL,sBAAA,CAAA,aAAA,CAACE,iBAAU,EACT,EAAA,IAAI,EAAC,QAAQ,EAAA,YAAA,EACF,WAAW,EACtB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAAA;AAEhB,YAAAF,sBAAA,CAAA,aAAA,CAACM,iBAAQ,EAAA,EACP,MAAM,EAAEF,WAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAEA,WAAK,CAAC,KAAK,CAAC,IAAI,EACvB,KAAK,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAA,CACpC,CACS,CACE;AAErB;;;;"}

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

@@ -4,6 +4,7 @@ export interface StepperProps {
     onIncrement: () => void;
     onDecrement: () => void;
     disabled?: boolean;
+    hasError?: boolean;
     size?: ComponentSize;
 }
-export declare const Stepper: ({ onIncrement, onDecrement, disabled, size }: StepperProps) => React.JSX.Element;
+export declare const Stepper: ({ onIncrement, onDecrement, disabled, hasError, size }: StepperProps) => React.JSX.Element;

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

@@ -1,14 +1,19 @@
 import React__default from 'react';
 import { theme } from '../../theme/index.js';
-import { Container, StepButton } from './styled.js';
-import { DownArrowIcon } from '../../tempIcons/DownArrowIcon.js';
-import { UpArrowIcon } from '../../tempIcons/UpArrowIcon.js';
+import { ContainerStack, StepButton, StepperDivider } from './styled.js';
+import '../../theme/modules/sizes.js';
+import { MinusIcon } from '../../tempIcons/MinusIcon.js';
+import { PlusIcon } from '../../tempIcons/PlusIcon.js';
-const Stepper = ({ onIncrement, onDecrement, disabled = false, size }) => (React__default.createElement(Container, { size: size },
-    React__default.createElement(StepButton, { type: "button", onClick: onIncrement, disabled: disabled },
-        React__default.createElement(UpArrowIcon, { height: theme.sizes.base, width: theme.sizes.base, color: theme.colors.neutral.ink.base })),
-    React__default.createElement(StepButton, { type: "button", onClick: onDecrement, disabled: disabled },
-        React__default.createElement(DownArrowIcon, { height: theme.sizes.base, width: theme.sizes.base, color: theme.colors.neutral.ink.base }))));
+const Stepper = ({ onIncrement, onDecrement, disabled, hasError, size }) => {
+    const compact = size === 'sm';
+    return (React__default.createElement(ContainerStack, { hasError: hasError, disabled: disabled, direction: "horizontal", alignY: "center", spacing: "none" },
+        React__default.createElement(StepButton, { type: "button", "aria-label": "Decrement", onClick: onDecrement, disabled: disabled, compact: compact },
+            React__default.createElement(MinusIcon, { height: theme.sizes.base, width: theme.sizes.base, color: theme.colors.neutral.ink.base })),
+        React__default.createElement(StepperDivider, { compact: compact }),
+        React__default.createElement(StepButton, { type: "button", "aria-label": "Increment", onClick: onIncrement, disabled: disabled, compact: compact },
+            React__default.createElement(PlusIcon, { height: theme.sizes.base, width: theme.sizes.base, color: theme.colors.neutral.ink.base }))));
+};
 export { Stepper };
 //# sourceMappingURL=Stepper.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Stepper.js","sources":["../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import React from 'react';\nimport { theme } from '../../theme';\n\nimport { ~~Container,~~ ~~StepButton~~ } from '~~./styled~~';\nimport { ~~DownArrowIcon~~ } from '~~../../tempIcons/DownArrowIcon~~';\nimport { ~~UpArrowIcon~~ } from '../../tempIcons~~/UpArrowIcon~~';\~~nimport { ComponentSize } from '../types';\~~n\nexport interface StepperProps {\n onIncrement: () => void;\n onDecrement: () => void;\n disabled?: boolean;\n size?: ComponentSize;\n}\n\nexport const Stepper = ({ onIncrement, onDecrement, disabled ~~= false~~, size }: StepperProps) => (\n ~~<Container~~ size={~~size~~}>\n <StepButton type=\"button\" onClick={~~onIncrement~~} disabled={disabled}>\n <~~UpArrowIcon~~\n height={theme.sizes.base}\n width={theme.sizes.base}\n color={theme.colors.neutral.ink.base}\n />\n </StepButton>\n <StepButton type=\"button\" onClick={~~onDecrement~~} disabled={disabled}>\n <~~DownArrowIcon~~\n height={theme.sizes.base}\n width={theme.sizes.base}\n color={theme.colors.neutral.ink.base}\n />\n </StepButton>\n </~~Container~~>\n);\n"],"names":["React"],"mappings":"~~;;;;;;~~AAea,MAAA,OAAO,GAAG,CAAC,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,~~GAAG~~,~~KAAK~~,EAAE,IAAI,EAAgB,~~MACxFA~~,~~cAAA~~,~~CAAA~~,~~aAAA~~,~~CAAC~~,~~SAAS~~,EAAA,~~EAAC~~,~~IAAI~~,EAAE,~~IAAI~~,EAAA;~~AACnB~~,~~IAAAA~~,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,~~EAAC,~~IAAI,EAAC,QAAQ,~~EAAC~~,OAAO,EAAE,WAAW,~~EAAE~~,QAAQ,EAAE,QAAQ,EAAA;~~AAChE~~,~~QAAAA~~,cAAA,CAAA,aAAA,CAAC,~~WAAW~~,EAAA,~~EACV~~,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACvB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,GACpC,CACS;AACb,~~IAAAA~~,cAAA,CAAA,aAAA,CAAC,~~UAAU~~,EAAA,EAAC,IAAI,EAAC,QAAQ,~~EAAC~~,OAAO,EAAE,WAAW,~~EAAE~~,QAAQ,EAAE,QAAQ,EAAA;~~AAChE~~,~~QAAAA~~,cAAA,CAAA,aAAA,CAAC,~~aAAa~~,EAAA,~~EACZ~~,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACvB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAA,CACpC,CACS,~~CACH~~;;;;"}
1	+ {"version":3,"file":"Stepper.js","sources":["../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import React from 'react';\nimport { theme } from '../../theme';\nimport { ComponentSize } from '../types';\n\nimport { ContainerStack, StepButton, StepperDivider } from './styled';\nimport { MinusIcon, PlusIcon } from '../../tempIcons';\n\nexport interface StepperProps {\n onIncrement: () => void;\n onDecrement: () => void;\n disabled?: boolean;\n hasError?: boolean;\n size?: ComponentSize;\n}\n\nexport const Stepper = ({ onIncrement, onDecrement, disabled, hasError, size }: StepperProps) => {\n const compact = size === 'sm';\n\n return (\n <ContainerStack\n hasError={hasError}\n disabled={disabled}\n direction=\"horizontal\"\n alignY=\"center\"\n spacing=\"none\"\n >\n <StepButton\n type=\"button\"\n aria-label=\"Decrement\"\n onClick={onDecrement}\n disabled={disabled}\n compact={compact}\n >\n <MinusIcon\n height={theme.sizes.base}\n width={theme.sizes.base}\n color={theme.colors.neutral.ink.base}\n />\n </StepButton>\n <StepperDivider compact={compact} />\n <StepButton\n type=\"button\"\n aria-label=\"Increment\"\n onClick={onIncrement}\n disabled={disabled}\n compact={compact}\n >\n <PlusIcon\n height={theme.sizes.base}\n width={theme.sizes.base}\n color={theme.colors.neutral.ink.base}\n />\n </StepButton>\n </ContainerStack>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;AAea,MAAA,OAAO,GAAG,CAAC,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAgB,KAAI;AAC9F,IAAA,MAAM,OAAO,GAAG,IAAI,KAAK,IAAI;IAE7B,QACEA,6BAAC,cAAc,EAAA,EACb,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAC,YAAY,EACtB,MAAM,EAAC,QAAQ,EACf,OAAO,EAAC,MAAM,EAAA;AAEd,QAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,EACT,EAAA,IAAI,EAAC,QAAQ,EAAA,YAAA,EACF,WAAW,EACtB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAAA;AAEhB,YAAAA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACR,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACvB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,GACpC,CACS;AACb,QAAAA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EAAC,OAAO,EAAE,OAAO,EAAI,CAAA;AACpC,QAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,EACT,EAAA,IAAI,EAAC,QAAQ,EAAA,YAAA,EACF,WAAW,EACtB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAAA;AAEhB,YAAAA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EACP,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACvB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAA,CACpC,CACS,CACE;AAErB;;;;"}

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

@@ -1,18 +1,20 @@
 'use strict';
 var styled = require('styled-components');
+var index = require('../../theme/index.cjs');
+var inputStyles = require('../../utils/forms/inputStyles.cjs');
+var Stack = require('../Stack/Stack.cjs');
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-const Container = styled__default.default.div.withConfig({ displayName: "vui--Container", componentId: "vui--1y4bw67" }) `box-sizing:border-box;display:inline-flex;flex-direction:column;height:${({ size }) => (size === 'sm' ? '32px' : '40px')};border-radius:4px;${({ size }) => size === 'sm'
-    ? `svg { width: 14px !important; height: 14px !important; };
+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:1px solid var(--border-color);border-radius:${radius.base};`;
+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:${({ compact }) => (compact ? index.theme.sizes[8] : index.theme.sizes[10])};width:${({ compact }) => (compact ? index.theme.sizes[8] : index.theme.sizes[10])};&:hover{background-color:${neutral.grey.light};}${inputStyles.inputFocusStyles}`;
+const StepperDivider = styled__default.default.div.withConfig({ displayName: "vui--StepperDivider", componentId: "vui--d6utag" }) `width:1px;background-color:${neutral.ink.lightest};height:${({ compact }) => (compact ? index.theme.sizes[4] : index.theme.sizes[6])};`;
-      > button { padding: 0 6px };`
-    : ''};& > *:first-child{border-bottom-width:0;}& > *:active,& > *:focus{border-width:1px;}& > *:active + *,& > *:focus + *{border-top-width:0;}& > *:focus,& > *:active{z-index:5;}& > *:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit;}& > *:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;}`;
-const StepButton = styled__default.default.button.withConfig({ displayName: "vui--StepButton", componentId: "vui--z17r9v" }) `appearance:none;flex:1;border:0;display:flex;justify-content:center;align-items:center;padding:0 8px;background-color:white;border:1px solid #959fa8;&:hover{cursor:pointer;background-color:#fafafb;}&:active:not(:disabled){background-color:#fafafb;border-color:#0079d1;box-shadow:0 0 0 4px #80bce8;}&:focus{box-shadow:0 0 0 4px #80bce8;outline:0;}&:disabled{background-color:#f2f3f5;border-color:#959fa8;color:#637381;cursor:not-allowed;}`;
-exports.Container = Container;
+exports.ContainerStack = ContainerStack;
 exports.StepButton = StepButton;
+exports.StepperDivider = StepperDivider;
 //# sourceMappingURL=styled.cjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"styled.cjs","sources":["../../../src/components/Stepper/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { ~~ComponentSize~~ } from '~~../types~~';\~~n\nexport~~ ~~const~~ ~~Container~~ = ~~styled.div<~~{ ~~size?:~~ ~~ComponentSize~~ }~~>`\n box-sizing:~~ ~~border-box~~;\n ~~display~~: ~~inline-flex;\~~n ~~flex-direction:~~ ~~column~~;\n ~~height~~: ${({ ~~size~~ }) => (~~size~~ ~~=== 'sm'~~ ? ~~'32px'~~ : '~~40px~~')};\n border-~~radius~~: ~~4px;\n\n~~ ${({ ~~size~~ }) ~~=>\n size~~ ~~===~~ ~~'sm'\n~~ ? ~~`svg~~ ~~{ width~~: ~~14px !important; height: 14px !important;~~ };\n\n ~~> button { padding: 0 6px };`\n : ''};\n\n~~ ~~& > :first~~-~~child~~ ~~{\n~~ border-~~bottom-width: 0~~;\n ~~}\n\n &~~ ~~> :active,\n & > :focus {\n border~~-~~width: 1px~~;\n ~~}\n\n & > :active + ,\n & > :focus + * {\n border~~-~~top-width~~: 0;\n ~~}\n\n & > :focus,\n & > :active {\n z-index~~: ~~5;\n }\n\n &~~ > :first-child {\n border-~~top-left-radius: inherit~~;\n border-~~top-right-~~radius: ~~inherit;\n }\n\n & > :last-child~~ {~~\n border-bottom-left-~~radius~~: inherit~~;\n ~~border-bottom-right-radius: inherit;\n }\n~~`;\n\nexport const StepButton = styled.button`\n appearance: none;\n ~~flex: 1;\n~~ border: 0;\n\n ~~display~~: ~~flex~~;\n ~~justify~~-~~content~~: ~~center~~;\n ~~align-items~~: ~~center~~;\n ~~padding~~: 0 ~~8px;\n background-color~~: ~~white~~;\n\n ~~border~~: ~~1px~~ ~~solid~~ ~~#959fa8~~;\n\n &:hover {\n ~~cursor: pointer;\n~~ background-color: ~~#fafafb~~;\n }\n\n ~~&:active:not(:disabled)~~ {~~\n background-color: #fafafb;\n border-color: #0079d1;\n box-shadow: 0 0 0 4px #80bce8;\n~~ }\n\n ~~&:focus {~~\~~n box-shadow:~~ 0 0 0 ~~4px~~ ~~#80bce8;\~~n ~~outline~~: 0;\n ~~}\n\n &:disabled {\n~~ background-color: ~~#f2f3f5~~;\n ~~border-color~~: ~~#959fa8;\n color:~~ ~~#637381;\n cursor~~: ~~not-allowed~~;\n ~~}\n~~`;\n"],"names":["styled"],"mappings":"~~;;;;;;;;AAGa~~,~~MAAA~~,SAAS,GAAGA,uBAAM,CAAC,~~GAAG~~,~~CAAA,~~UAAA,CAAA,EAAA,WAAA,EAAA,~~gBAAA~~,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,~~uEAAA~~,~~EAIvB~~,CAAC,EAAE,~~IAAI~~,EAAE,MAAM,IAAI,KAAK,IAAI,GAAG,~~MAAM~~,GAAG,MAAM,CAAC,CAAA,~~mBAAA~~,~~EAGvD~~,CAAC,EAAE,~~IAAI~~,EAAE,~~KACT~~,IAAI,KAAK;~~AACP~~,~~MAAE~~,CAAA~~;;AAE2B~~,~~kCAAA;MAC3B~~,~~EAAE~~,CAAA,~~uVAAA;MAgCG~~,~~UAAU~~,GAAGA,~~uBAAM~~,CAAC,~~MAAM;;;;;~~"}
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 { InputProps } from '../types';\n\nconst {\n colors: { neutral, secondary },\n radius,\n} = theme;\n\nexport const ContainerStack = styled(Stack)<InputProps>`\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: 1px solid var(--border-color);\n border-radius: ${radius.base};\n`;\n\nexport const StepButton = styled.button<Pick<InputProps, 'compact'>>`\n appearance: none;\n border: 0;\n background-color: transparent;\n border-radius: ${radius.base};\n cursor: pointer;\n\n height: ${({ compact }) => (compact ? theme.sizes[8] : theme.sizes[10])};\n width: ${({ compact }) => (compact ? theme.sizes[8] : theme.sizes[10])};\n\n &:hover {\n background-color: ${neutral.grey.light};\n }\n\n ${inputFocusStyles}\n`;\n\nexport const StepperDivider = styled.div<Pick<InputProps, 'compact'>>`\n width: 1px;\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;AAEF,MAAM,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,CAC/D,gBAAA,EAAA,CAAC,EAAE,QAAQ,EAAE,MAAM,QAAQ,GAAG,SAAS,CAAC,GAAG,CAAC,IAAI,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAMzE,uIAAA,EAAA,MAAM,CAAC,IAAI;AAGjB,MAAA,UAAU,GAAGD,uBAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,oEAAA,EAIpB,MAAM,CAAC,IAAI,CAGlB,uBAAA,EAAA,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,GAAGD,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAGA,WAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAA,OAAA,EAC9D,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,GAAGA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAGA,WAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAGhD,0BAAA,EAAA,OAAO,CAAC,IAAI,CAAC,KAAK,CAGtC,EAAA,EAAAG,4BAAgB;AAGP,MAAA,cAAc,GAAGF,uBAAM,CAAC,GAAG,CAElB,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2BAAA,EAAA,OAAO,CAAC,GAAG,CAAC,QAAQ,CAC9B,QAAA,EAAA,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,GAAGD,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAGA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;;;;;;"}

package/dist/components/Stepper/styled.d.ts CHANGED Viewed

@@ -1,5 +1,4 @@
-import { ComponentSize } from '../types';
-export declare const Container: import("styled-components").StyledComponent<"div", any, {
-    size?: ComponentSize | undefined;
-}, never>;
-export declare const StepButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+import { InputProps } from '../types';
+export declare const ContainerStack: import("styled-components").StyledComponent<"div", any, import("../Stack/types").StackProps & InputProps, never>;
+export declare const StepButton: import("styled-components").StyledComponent<"button", any, Pick<InputProps, "compact">, never>;
+export declare const StepperDivider: import("styled-components").StyledComponent<"div", any, Pick<InputProps, "compact">, never>;

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

@@ -1,11 +1,12 @@
 import styled from 'styled-components';
+import { theme } from '../../theme/index.js';
+import { inputFocusStyles } from '../../utils/forms/inputStyles.js';
+import { Stack } from '../Stack/Stack.js';
-const Container = styled.div.withConfig({ displayName: "vui--Container", componentId: "vui--1y4bw67" }) `box-sizing:border-box;display:inline-flex;flex-direction:column;height:${({ size }) => (size === 'sm' ? '32px' : '40px')};border-radius:4px;${({ size }) => size === 'sm'
-    ? `svg { width: 14px !important; height: 14px !important; };
+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:1px solid var(--border-color);border-radius:${radius.base};`;
+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:${({ compact }) => (compact ? theme.sizes[8] : theme.sizes[10])};width:${({ compact }) => (compact ? theme.sizes[8] : theme.sizes[10])};&:hover{background-color:${neutral.grey.light};}${inputFocusStyles}`;
+const StepperDivider = styled.div.withConfig({ displayName: "vui--StepperDivider", componentId: "vui--d6utag" }) `width:1px;background-color:${neutral.ink.lightest};height:${({ compact }) => (compact ? theme.sizes[4] : theme.sizes[6])};`;
-      > button { padding: 0 6px };`
-    : ''};& > *:first-child{border-bottom-width:0;}& > *:active,& > *:focus{border-width:1px;}& > *:active + *,& > *:focus + *{border-top-width:0;}& > *:focus,& > *:active{z-index:5;}& > *:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit;}& > *:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;}`;
-const StepButton = styled.button.withConfig({ displayName: "vui--StepButton", componentId: "vui--z17r9v" }) `appearance:none;flex:1;border:0;display:flex;justify-content:center;align-items:center;padding:0 8px;background-color:white;border:1px solid #959fa8;&:hover{cursor:pointer;background-color:#fafafb;}&:active:not(:disabled){background-color:#fafafb;border-color:#0079d1;box-shadow:0 0 0 4px #80bce8;}&:focus{box-shadow:0 0 0 4px #80bce8;outline:0;}&:disabled{background-color:#f2f3f5;border-color:#959fa8;color:#637381;cursor:not-allowed;}`;
-export { Container, StepButton };
+export { ContainerStack, StepButton, StepperDivider };
 //# sourceMappingURL=styled.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"styled.js","sources":["../../../src/components/Stepper/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { ~~ComponentSize~~ } from '~~../types~~';\~~n\nexport~~ ~~const~~ ~~Container~~ = ~~styled.div<~~{ ~~size?:~~ ~~ComponentSize~~ }~~>`\n box-sizing:~~ ~~border-box~~;\n ~~display~~: ~~inline-flex;\~~n ~~flex-direction:~~ ~~column~~;\n ~~height~~: ${({ ~~size~~ }) => (~~size~~ ~~=== 'sm'~~ ? ~~'32px'~~ : '~~40px~~')};\n border-~~radius~~: ~~4px;\n\n~~ ${({ ~~size~~ }) ~~=>\n size~~ ~~===~~ ~~'sm'\n~~ ? ~~`svg~~ ~~{ width~~: ~~14px !important; height: 14px !important;~~ };\n\n ~~> button { padding: 0 6px };`\n : ''};\n\n~~ ~~& > :first~~-~~child~~ ~~{\n~~ border-~~bottom-width: 0~~;\n ~~}\n\n &~~ ~~> :active,\n & > :focus {\n border~~-~~width: 1px~~;\n ~~}\n\n & > :active + ,\n & > :focus + * {\n border~~-~~top-width~~: 0;\n ~~}\n\n & > :focus,\n & > :active {\n z-index~~: ~~5;\n }\n\n &~~ > :first-child {\n border-~~top-left-radius: inherit~~;\n border-~~top-right-~~radius: ~~inherit;\n }\n\n & > :last-child~~ {~~\n border-bottom-left-~~radius~~: inherit~~;\n ~~border-bottom-right-radius: inherit;\n }\n~~`;\n\nexport const StepButton = styled.button`\n appearance: none;\n ~~flex: 1;\n~~ border: 0;\n\n ~~display~~: ~~flex~~;\n ~~justify~~-~~content~~: ~~center~~;\n ~~align-items~~: ~~center~~;\n ~~padding~~: 0 ~~8px;\n background-color~~: ~~white~~;\n\n ~~border~~: ~~1px~~ ~~solid~~ ~~#959fa8~~;\n\n &:hover {\n ~~cursor: pointer;\n~~ background-color: ~~#fafafb~~;\n }\n\n ~~&:active:not(:disabled)~~ {~~\n background-color: #fafafb;\n border-color: #0079d1;\n box-shadow: 0 0 0 4px #80bce8;\n~~ }\n\n ~~&:focus {~~\~~n box-shadow:~~ 0 0 0 ~~4px~~ ~~#80bce8;\~~n ~~outline~~: 0;\n ~~}\n\n &:disabled {\n~~ background-color: ~~#f2f3f5~~;\n ~~border-color~~: ~~#959fa8;\n color:~~ ~~#637381;\n cursor~~: ~~not-allowed~~;\n ~~}\n~~`;\n"],"names":[],"mappings":"~~;;AAGa~~,~~MAAA~~,SAAS,GAAG,MAAM,~~CAAC~~,GAAG,~~CAAA~~,UAAA,CAAA,EAAA,WAAA,EAAA,~~gBAAA~~,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,~~uEAAA~~,~~EAIvB~~,CAAC,EAAE,~~IAAI~~,EAAE,MAAM,IAAI,KAAK,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC,CAAA,~~mBAAA~~,~~EAGvD~~,CAAC,EAAE,~~IAAI~~,EAAE,~~KACT~~,IAAI,KAAK;~~AACP~~,~~MAAE~~,CAAA~~;;AAE2B~~,~~kCAAA;MAC3B~~,~~EAAE~~,CAAA,~~uVAAA;MAgCG~~,~~UAAU~~,GAAG,MAAM,CAAC,~~MAAM~~;;;;"}
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 { InputProps } from '../types';\n\nconst {\n colors: { neutral, secondary },\n radius,\n} = theme;\n\nexport const ContainerStack = styled(Stack)<InputProps>`\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: 1px solid var(--border-color);\n border-radius: ${radius.base};\n`;\n\nexport const StepButton = styled.button<Pick<InputProps, 'compact'>>`\n appearance: none;\n border: 0;\n background-color: transparent;\n border-radius: ${radius.base};\n cursor: pointer;\n\n height: ${({ compact }) => (compact ? theme.sizes[8] : theme.sizes[10])};\n width: ${({ compact }) => (compact ? theme.sizes[8] : theme.sizes[10])};\n\n &:hover {\n background-color: ${neutral.grey.light};\n }\n\n ${inputFocusStyles}\n`;\n\nexport const StepperDivider = styled.div<Pick<InputProps, 'compact'>>`\n width: 1px;\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;AAEF,MAAM,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,CAC/D,gBAAA,EAAA,CAAC,EAAE,QAAQ,EAAE,MAAM,QAAQ,GAAG,SAAS,CAAC,GAAG,CAAC,IAAI,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAMzE,uIAAA,EAAA,MAAM,CAAC,IAAI;AAGjB,MAAA,UAAU,GAAG,MAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,oEAAA,EAIpB,MAAM,CAAC,IAAI,CAGlB,uBAAA,EAAA,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAA,OAAA,EAC9D,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAGhD,0BAAA,EAAA,OAAO,CAAC,IAAI,CAAC,KAAK,CAGtC,EAAA,EAAA,gBAAgB;AAGP,MAAA,cAAc,GAAG,MAAM,CAAC,GAAG,CAElB,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2BAAA,EAAA,OAAO,CAAC,GAAG,CAAC,QAAQ,CAC9B,QAAA,EAAA,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;;;;"}

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

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

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

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

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

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import { colors } from '../../theme/modules/colors.js';
 import { BaseContainer } from '../BaseContainer/BaseContainer.js';
-const Tag = styled(BaseContainer).withConfig({ displayName: "vui--Tag", componentId: "vui--1rdo7hk" }) `display:inline-flex;flex-direction:row;justify-content:center;align-items:center;border-radius:4px;padding:4px 8px;${({ backgroundColor, color }) => `
+const Tag = styled(BaseContainer).withConfig({ displayName: "vui--Tag", componentId: "vui--i7kdk5" }) `display:inline-flex;flex-direction:row;justify-content:center;align-items:center;border-radius:4px;padding:4px 8px;${({ backgroundColor, color }) => `
     color: ${color !== null && color !== undefined ? color : colors.neutral.ink.base};
     background-color: ${backgroundColor !== null && backgroundColor !== undefined ? backgroundColor : colors.neutral.grey.base};
   `}`;

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

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

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

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

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

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

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

@@ -33,7 +33,7 @@ const TextField = React.forwardRef(({ id, className, disabled = false, hasError,
     if (type === 'text' && multiline) {
         return (React__default.default.createElement(styled.Textarea, { className: className, disabled: disabled, hasError: hasError, id: componentId, name: name, onChange: handleChange, placeholder: placeholder, value: value, ref: ref, spellCheck: spellCheck, ...otherProps }));
     }
-    return (React__default.default.createElement(styled.Input, { className: className, disabled: disabled, hasError: hasError, id: componentId, inputSize: size, name: name, "aria-label": name, onChange: handleChange, placeholder: placeholder, type: type, value: value, ref: ref, spellCheck: spellCheck, ...otherProps }));
+    return (React__default.default.createElement(styled.Input, { className: className, disabled: disabled, hasError: hasError, id: componentId, compact: size === 'sm', name: name, "aria-label": name, onChange: handleChange, placeholder: placeholder, type: type, value: value, ref: ref, spellCheck: spellCheck, ...otherProps }));
 });
 exports.TextField = TextField;