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/CardHeader/styled.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import styled from 'styled-components';
 import { sizes } from '../../theme/modules/sizes.js';
-const Header = styled.header.withConfig({ displayName: "vui--Header", componentId: "vui--oa1a54" }) `padding-top:${sizes.md};padding-right:${sizes.md};padding-left:${sizes.md};margin-bottom:${sizes.md};& > * + *{margin-top:${sizes.xs};}`;
-const HeaderGrid = styled.div.withConfig({ displayName: "vui--HeaderGrid", componentId: "vui--129vg5d" }) `/*${sizes.base}*/display:flex;justify-content:flex-end;align-items:center;& > *:first-child{flex:1;}`;
+const Header = styled.header.withConfig({ displayName: "vui--Header", componentId: "vui--buz2z6" }) `padding-top:${sizes.md};padding-right:${sizes.md};padding-left:${sizes.md};margin-bottom:${sizes.md};& > * + *{margin-top:${sizes.xs};}`;
+const HeaderGrid = styled.div.withConfig({ displayName: "vui--HeaderGrid", componentId: "vui--9e0ja4" }) `/*${sizes.base}*/display:flex;justify-content:flex-end;align-items:center;& > *:first-child{flex:1;}`;
 export { Header, HeaderGrid };
 //# sourceMappingURL=styled.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"styled.js","sources":["../../../src/components/CardHeader/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { sizes } from '../../theme/modules/sizes';\n\nexport const Header = styled.header`\n padding-top: ${sizes.md};\n padding-right: ${sizes.md};\n padding-left: ${sizes.md};\n margin-bottom: ${sizes.md};\n\n & > * + * {\n margin-top: ${sizes.xs};\n }\n`;\n\nexport const HeaderGrid = styled.div`\n /* display: grid;\n grid-auto-flow: column;\n grid-template-columns: 1fr;\n grid-auto-columns: max-content;\n column-gap: ${sizes.base};\n align-items: center; /\n\n display: flex;\n justify-content: flex-end;\n align-items: center;\n\n & > :first-child {\n flex: 1;\n }\n`;\n"],"names":[],"mappings":";;;AAGO,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,YAAA,EAClB,KAAK,CAAC,EAAE,CAAA,eAAA,EACN,KAAK,CAAC,EAAE,CAAA,cAAA,EACT,KAAK,CAAC,EAAE,CAAA,eAAA,EACP,KAAK,CAAC,EAAE,CAAA,sBAAA,EAGT,KAAK,CAAC,EAAE,CAAA,EAAA;AAInB,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,~~cAAA~~,EAAA,CAAA,CAAA,CAAA,EAAA,EAKpB,KAAK,CAAC,IAAI,CAAA,qFAAA;;;;"}
1	+ {"version":3,"file":"styled.js","sources":["../../../src/components/CardHeader/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { sizes } from '../../theme/modules/sizes';\n\nexport const Header = styled.header`\n padding-top: ${sizes.md};\n padding-right: ${sizes.md};\n padding-left: ${sizes.md};\n margin-bottom: ${sizes.md};\n\n & > * + * {\n margin-top: ${sizes.xs};\n }\n`;\n\nexport const HeaderGrid = styled.div`\n /* display: grid;\n grid-auto-flow: column;\n grid-template-columns: 1fr;\n grid-auto-columns: max-content;\n column-gap: ${sizes.base};\n align-items: center; /\n\n display: flex;\n justify-content: flex-end;\n align-items: center;\n\n & > :first-child {\n flex: 1;\n }\n`;\n"],"names":[],"mappings":";;;AAGO,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,YAAA,EAClB,KAAK,CAAC,EAAE,CAAA,eAAA,EACN,KAAK,CAAC,EAAE,CAAA,cAAA,EACT,KAAK,CAAC,EAAE,CAAA,eAAA,EACP,KAAK,CAAC,EAAE,CAAA,sBAAA,EAGT,KAAK,CAAC,EAAE,CAAA,EAAA;AAInB,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,EAAA,EAKpB,KAAK,CAAC,IAAI,CAAA,qFAAA;;;;"}

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

@@ -8,7 +8,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 const { colors, sizes, radius } = index.theme;
-const Input = styled__default.default.input.withConfig({ displayName: "vui--Input", componentId: "vui--hippn5" }) `appearance:none;width:18px;height:18px;background-color:transparent;border:2px solid ${colors.neutral.ink.lightest};border-radius:${radius.base};cursor:pointer;flex-shrink:0;transition:box-shadow 0.1s,background-color 0.1s;&:checked{background-color:${colors.secondary.blue.base};border-color:${colors.secondary.blue.base};background-image:url("data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='white' /></svg>");background-repeat:no-repeat;background-size:${sizes[4]};background-position:center;}&:hover{border-color:${colors.secondary.blue.base};}&:active{border-color:${colors.secondary.blue.base};}&:focus{box-shadow:0 0 0 4px ${colors.secondary.blue.light};outline:0;}&:indeterminate{background-color:${colors.secondary.blue.base};border-color:${colors.secondary.blue.base};background-image:url("data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='white'/></svg>");background-repeat:no-repeat;background-size:${sizes[4]};background-position:center;}&:disabled{box-shadow:none;background-color:${colors.neutral.grey.base};border-color:${colors.neutral.grey.base};color:${colors.neutral.ink.light};cursor:default;}&:checked:disabled{background-image:url("data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='%23637381' /></svg>");}&:indeterminate:disabled{background-image:url("data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='%23637381'/></svg>");}`;
+const Input = styled__default.default.input.withConfig({ displayName: "vui--Input", componentId: "vui--1gsese6" }) `appearance:none;width:18px;height:18px;background-color:transparent;border:2px solid ${colors.neutral.ink.lightest};border-radius:${radius.base};cursor:pointer;flex-shrink:0;transition:box-shadow 0.1s,background-color 0.1s;&:checked{background-color:${colors.secondary.blue.base};border-color:${colors.secondary.blue.base};background-image:url("data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='white' /></svg>");background-repeat:no-repeat;background-size:${sizes[4]};background-position:center;}&:hover{border-color:${colors.secondary.blue.base};}&:active{border-color:${colors.secondary.blue.base};}&:focus{box-shadow:0 0 0 4px ${colors.secondary.blue.light};outline:0;}&:indeterminate{background-color:${colors.secondary.blue.base};border-color:${colors.secondary.blue.base};background-image:url("data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='white'/></svg>");background-repeat:no-repeat;background-size:${sizes[4]};background-position:center;}&:disabled{box-shadow:none;background-color:${colors.neutral.grey.base};border-color:${colors.neutral.grey.base};color:${colors.neutral.ink.light};cursor:default;}&:checked:disabled{background-image:url("data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='%23637381' /></svg>");}&:indeterminate:disabled{background-image:url("data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='%23637381'/></svg>");}`;
 exports.Input = Input;
 //# sourceMappingURL=styled.cjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"styled.cjs","sources":["../../../src/components/Checkbox/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { theme } from '../../theme';\n\nconst { colors, sizes, radius } = theme;\n\nexport const Input = styled.input`\n appearance: none;\n width: 18px;\n height: 18px;\n background-color: transparent;\n border: 2px solid ${colors.neutral.ink.lightest};\n border-radius: ${radius.base};\n cursor: pointer;\n flex-shrink: 0;\n\n transition:\n box-shadow 0.1s,\n background-color 0.1s;\n\n &:checked {\n background-color: ${colors.secondary.blue.base};\n border-color: ${colors.secondary.blue.base};\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='white' /></svg>\");\n background-repeat: no-repeat;\n background-size: ${sizes[4]};\n background-position: center;\n }\n\n &:hover {\n border-color: ${colors.secondary.blue.base};\n }\n\n &:active {\n border-color: ${colors.secondary.blue.base};\n }\n\n &:focus {\n box-shadow: 0 0 0 4px ${colors.secondary.blue.light};\n outline: 0;\n }\n\n &:indeterminate {\n background-color: ${colors.secondary.blue.base};\n border-color: ${colors.secondary.blue.base};\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='white'/></svg>\");\n background-repeat: no-repeat;\n background-size: ${sizes[4]};\n background-position: center;\n }\n\n &:disabled {\n box-shadow: none;\n background-color: ${colors.neutral.grey.base};\n border-color: ${colors.neutral.grey.base};\n color: ${colors.neutral.ink.light};\n cursor: default;\n }\n\n &:checked:disabled {\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='%23637381' /></svg>\");\n }\n\n &:indeterminate:disabled {\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='%23637381'/></svg>\");\n }\n`;\n"],"names":["theme","styled"],"mappings":";;;;;;;;;AAIA,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAGA,WAAK;AAE1B,MAAA,KAAK,GAAGC,uBAAM,CAAC,KAAK,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,~~aAAA~~,EAAA,CAAA,CAAA,CAAA,qFAAA,EAKX,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAC9B,eAAA,EAAA,MAAM,CAAC,IAAI,6GASN,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAC9B,cAAA,EAAA,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,uUAAA,EAGvB,KAAK,CAAC,CAAC,CAAC,qDAKX,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,wBAAA,EAI1B,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAIlB,+BAAA,EAAA,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,6CAAA,EAK/B,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAC9B,cAAA,EAAA,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,2PAAA,EAGvB,KAAK,CAAC,CAAC,CAAC,CAAA,yEAAA,EAMP,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAC5B,cAAA,EAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,OAAA,EAC/B,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAA,miBAAA;;;;"}
1	+ {"version":3,"file":"styled.cjs","sources":["../../../src/components/Checkbox/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { theme } from '../../theme';\n\nconst { colors, sizes, radius } = theme;\n\nexport const Input = styled.input`\n appearance: none;\n width: 18px;\n height: 18px;\n background-color: transparent;\n border: 2px solid ${colors.neutral.ink.lightest};\n border-radius: ${radius.base};\n cursor: pointer;\n flex-shrink: 0;\n\n transition:\n box-shadow 0.1s,\n background-color 0.1s;\n\n &:checked {\n background-color: ${colors.secondary.blue.base};\n border-color: ${colors.secondary.blue.base};\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='white' /></svg>\");\n background-repeat: no-repeat;\n background-size: ${sizes[4]};\n background-position: center;\n }\n\n &:hover {\n border-color: ${colors.secondary.blue.base};\n }\n\n &:active {\n border-color: ${colors.secondary.blue.base};\n }\n\n &:focus {\n box-shadow: 0 0 0 4px ${colors.secondary.blue.light};\n outline: 0;\n }\n\n &:indeterminate {\n background-color: ${colors.secondary.blue.base};\n border-color: ${colors.secondary.blue.base};\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='white'/></svg>\");\n background-repeat: no-repeat;\n background-size: ${sizes[4]};\n background-position: center;\n }\n\n &:disabled {\n box-shadow: none;\n background-color: ${colors.neutral.grey.base};\n border-color: ${colors.neutral.grey.base};\n color: ${colors.neutral.ink.light};\n cursor: default;\n }\n\n &:checked:disabled {\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='%23637381' /></svg>\");\n }\n\n &:indeterminate:disabled {\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='%23637381'/></svg>\");\n }\n`;\n"],"names":["theme","styled"],"mappings":";;;;;;;;;AAIA,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAGA,WAAK;AAE1B,MAAA,KAAK,GAAGC,uBAAM,CAAC,KAAK,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,qFAAA,EAKX,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAC9B,eAAA,EAAA,MAAM,CAAC,IAAI,6GASN,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAC9B,cAAA,EAAA,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,uUAAA,EAGvB,KAAK,CAAC,CAAC,CAAC,qDAKX,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,wBAAA,EAI1B,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAIlB,+BAAA,EAAA,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,6CAAA,EAK/B,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAC9B,cAAA,EAAA,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,2PAAA,EAGvB,KAAK,CAAC,CAAC,CAAC,CAAA,yEAAA,EAMP,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAC5B,cAAA,EAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,OAAA,EAC/B,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAA,miBAAA;;;;"}

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

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import { theme } from '../../theme/index.js';
 const { colors, sizes, radius } = theme;
-const Input = styled.input.withConfig({ displayName: "vui--Input", componentId: "vui--hippn5" }) `appearance:none;width:18px;height:18px;background-color:transparent;border:2px solid ${colors.neutral.ink.lightest};border-radius:${radius.base};cursor:pointer;flex-shrink:0;transition:box-shadow 0.1s,background-color 0.1s;&:checked{background-color:${colors.secondary.blue.base};border-color:${colors.secondary.blue.base};background-image:url("data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='white' /></svg>");background-repeat:no-repeat;background-size:${sizes[4]};background-position:center;}&:hover{border-color:${colors.secondary.blue.base};}&:active{border-color:${colors.secondary.blue.base};}&:focus{box-shadow:0 0 0 4px ${colors.secondary.blue.light};outline:0;}&:indeterminate{background-color:${colors.secondary.blue.base};border-color:${colors.secondary.blue.base};background-image:url("data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='white'/></svg>");background-repeat:no-repeat;background-size:${sizes[4]};background-position:center;}&:disabled{box-shadow:none;background-color:${colors.neutral.grey.base};border-color:${colors.neutral.grey.base};color:${colors.neutral.ink.light};cursor:default;}&:checked:disabled{background-image:url("data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='%23637381' /></svg>");}&:indeterminate:disabled{background-image:url("data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='%23637381'/></svg>");}`;
+const Input = styled.input.withConfig({ displayName: "vui--Input", componentId: "vui--1gsese6" }) `appearance:none;width:18px;height:18px;background-color:transparent;border:2px solid ${colors.neutral.ink.lightest};border-radius:${radius.base};cursor:pointer;flex-shrink:0;transition:box-shadow 0.1s,background-color 0.1s;&:checked{background-color:${colors.secondary.blue.base};border-color:${colors.secondary.blue.base};background-image:url("data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='white' /></svg>");background-repeat:no-repeat;background-size:${sizes[4]};background-position:center;}&:hover{border-color:${colors.secondary.blue.base};}&:active{border-color:${colors.secondary.blue.base};}&:focus{box-shadow:0 0 0 4px ${colors.secondary.blue.light};outline:0;}&:indeterminate{background-color:${colors.secondary.blue.base};border-color:${colors.secondary.blue.base};background-image:url("data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='white'/></svg>");background-repeat:no-repeat;background-size:${sizes[4]};background-position:center;}&:disabled{box-shadow:none;background-color:${colors.neutral.grey.base};border-color:${colors.neutral.grey.base};color:${colors.neutral.ink.light};cursor:default;}&:checked:disabled{background-image:url("data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='%23637381' /></svg>");}&:indeterminate:disabled{background-image:url("data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='%23637381'/></svg>");}`;
 export { Input };
 //# sourceMappingURL=styled.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"styled.js","sources":["../../../src/components/Checkbox/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { theme } from '../../theme';\n\nconst { colors, sizes, radius } = theme;\n\nexport const Input = styled.input`\n appearance: none;\n width: 18px;\n height: 18px;\n background-color: transparent;\n border: 2px solid ${colors.neutral.ink.lightest};\n border-radius: ${radius.base};\n cursor: pointer;\n flex-shrink: 0;\n\n transition:\n box-shadow 0.1s,\n background-color 0.1s;\n\n &:checked {\n background-color: ${colors.secondary.blue.base};\n border-color: ${colors.secondary.blue.base};\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='white' /></svg>\");\n background-repeat: no-repeat;\n background-size: ${sizes[4]};\n background-position: center;\n }\n\n &:hover {\n border-color: ${colors.secondary.blue.base};\n }\n\n &:active {\n border-color: ${colors.secondary.blue.base};\n }\n\n &:focus {\n box-shadow: 0 0 0 4px ${colors.secondary.blue.light};\n outline: 0;\n }\n\n &:indeterminate {\n background-color: ${colors.secondary.blue.base};\n border-color: ${colors.secondary.blue.base};\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='white'/></svg>\");\n background-repeat: no-repeat;\n background-size: ${sizes[4]};\n background-position: center;\n }\n\n &:disabled {\n box-shadow: none;\n background-color: ${colors.neutral.grey.base};\n border-color: ${colors.neutral.grey.base};\n color: ${colors.neutral.ink.light};\n cursor: default;\n }\n\n &:checked:disabled {\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='%23637381' /></svg>\");\n }\n\n &:indeterminate:disabled {\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='%23637381'/></svg>\");\n }\n`;\n"],"names":[],"mappings":";;;AAIA,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK;AAE1B,MAAA,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,~~aAAA~~,EAAA,CAAA,CAAA,CAAA,qFAAA,EAKX,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAC9B,eAAA,EAAA,MAAM,CAAC,IAAI,6GASN,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAC9B,cAAA,EAAA,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,uUAAA,EAGvB,KAAK,CAAC,CAAC,CAAC,qDAKX,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,wBAAA,EAI1B,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAIlB,+BAAA,EAAA,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,6CAAA,EAK/B,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAC9B,cAAA,EAAA,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,2PAAA,EAGvB,KAAK,CAAC,CAAC,CAAC,CAAA,yEAAA,EAMP,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAC5B,cAAA,EAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,OAAA,EAC/B,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAA,miBAAA;;;;"}
1	+ {"version":3,"file":"styled.js","sources":["../../../src/components/Checkbox/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { theme } from '../../theme';\n\nconst { colors, sizes, radius } = theme;\n\nexport const Input = styled.input`\n appearance: none;\n width: 18px;\n height: 18px;\n background-color: transparent;\n border: 2px solid ${colors.neutral.ink.lightest};\n border-radius: ${radius.base};\n cursor: pointer;\n flex-shrink: 0;\n\n transition:\n box-shadow 0.1s,\n background-color 0.1s;\n\n &:checked {\n background-color: ${colors.secondary.blue.base};\n border-color: ${colors.secondary.blue.base};\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='white' /></svg>\");\n background-repeat: no-repeat;\n background-size: ${sizes[4]};\n background-position: center;\n }\n\n &:hover {\n border-color: ${colors.secondary.blue.base};\n }\n\n &:active {\n border-color: ${colors.secondary.blue.base};\n }\n\n &:focus {\n box-shadow: 0 0 0 4px ${colors.secondary.blue.light};\n outline: 0;\n }\n\n &:indeterminate {\n background-color: ${colors.secondary.blue.base};\n border-color: ${colors.secondary.blue.base};\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='white'/></svg>\");\n background-repeat: no-repeat;\n background-size: ${sizes[4]};\n background-position: center;\n }\n\n &:disabled {\n box-shadow: none;\n background-color: ${colors.neutral.grey.base};\n border-color: ${colors.neutral.grey.base};\n color: ${colors.neutral.ink.light};\n cursor: default;\n }\n\n &:checked:disabled {\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='%23637381' /></svg>\");\n }\n\n &:indeterminate:disabled {\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='%23637381'/></svg>\");\n }\n`;\n"],"names":[],"mappings":";;;AAIA,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK;AAE1B,MAAA,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,qFAAA,EAKX,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAC9B,eAAA,EAAA,MAAM,CAAC,IAAI,6GASN,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAC9B,cAAA,EAAA,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,uUAAA,EAGvB,KAAK,CAAC,CAAC,CAAC,qDAKX,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,wBAAA,EAI1B,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAIlB,+BAAA,EAAA,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,6CAAA,EAK/B,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAC9B,cAAA,EAAA,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,2PAAA,EAGvB,KAAK,CAAC,CAAC,CAAC,CAAA,yEAAA,EAMP,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAC5B,cAAA,EAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,OAAA,EAC/B,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAA,miBAAA;;;;"}

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

@@ -12,15 +12,15 @@ const alignMap = {
     top: 'flex-start',
     center: 'center',
 };
-const RootLayout = styled__default.default.div.withConfig({ displayName: "vui--RootLayout", componentId: "vui--11nf17l" }) `display:flex;align-items:center;& > * + *{margin-left:${index.theme.sizes.base};}`;
-const InputLayout = styled__default.default.div.withConfig({ displayName: "vui--InputLayout", componentId: "vui--1yac6kr" }) `align-self:stretch;display:flex;align-items:${(props) => alignMap[props.align]};`;
-const AccessoryLayout = styled__default.default.div.withConfig({ displayName: "vui--AccessoryLayout", componentId: "vui--qbgrc7" }) `align-self:center;display:flex;align-items:center;`;
-const TextLayout = styled__default.default.div.withConfig({ displayName: "vui--TextLayout", componentId: "vui--1uu3ed5" }) `flex:1;& > * + *{margin-top:${index.theme.sizes.sm};}`;
-const HintText = styled__default.default.div.withConfig({ displayName: "vui--HintText", componentId: "vui--lz8nl" }) `font-family:${index.theme.fontFamily};font-size:${index.theme.sizes[3]};line-height:${index.theme.sizes[4]};color:${index.theme.colors.neutral.ink.light};`;
-const ErrorText = styled__default.default.div.withConfig({ displayName: "vui--ErrorText", componentId: "vui--piugtf" }) `font-family:${index.theme.text.error.fontFamily};font-size:${index.theme.text.error.fontSize};font-weight:${index.theme.text.error.fontWeight};line-height:${index.theme.text.error.lineHeight};color:${index.theme.text.error.color};`;
-const Wrapper = styled__default.default.label.withConfig({ displayName: "vui--Wrapper", componentId: "vui--2wdtq1" }) `box-sizing:border-box;&:hover{cursor:${(props) => (props.disabled ? 'default' : 'pointer')};}`;
-const BorderedWrapper = styled__default.default(Wrapper).withConfig({ displayName: "vui--BorderedWrapper", componentId: "vui--1an42ms" }) `border:2px solid ${index.theme.colors.neutral.grey.dark};border-radius:${index.theme.radius.md};padding:${index.theme.sizes.base} 0.75rem;&:hover{border-color:${index.theme.colors.secondary.blue.base};}`;
-const BlockTooltip = styled__default.default(Tooltip.Tooltip).withConfig({ displayName: "vui--BlockTooltip", componentId: "vui--1ifrill" }) `display:block;&-hoverable{display:block;}`;
+const RootLayout = styled__default.default.div.withConfig({ displayName: "vui--RootLayout", componentId: "vui--1hqfkl1" }) `display:flex;align-items:center;& > * + *{margin-left:${index.theme.sizes.base};}`;
+const InputLayout = styled__default.default.div.withConfig({ displayName: "vui--InputLayout", componentId: "vui--16amzmr" }) `align-self:stretch;display:flex;align-items:${(props) => alignMap[props.align]};`;
+const AccessoryLayout = styled__default.default.div.withConfig({ displayName: "vui--AccessoryLayout", componentId: "vui--1mrja9t" }) `align-self:center;display:flex;align-items:center;`;
+const TextLayout = styled__default.default.div.withConfig({ displayName: "vui--TextLayout", componentId: "vui--1v0a766" }) `flex:1;& > * + *{margin-top:${index.theme.sizes.sm};}`;
+const HintText = styled__default.default.div.withConfig({ displayName: "vui--HintText", componentId: "vui--j2tynh" }) `font-family:${index.theme.fontFamily};font-size:${index.theme.sizes[3]};line-height:${index.theme.sizes[4]};color:${index.theme.colors.neutral.ink.light};`;
+const ErrorText = styled__default.default.div.withConfig({ displayName: "vui--ErrorText", componentId: "vui--xvisw5" }) `font-family:${index.theme.text.error.fontFamily};font-size:${index.theme.text.error.fontSize};font-weight:${index.theme.text.error.fontWeight};line-height:${index.theme.text.error.lineHeight};color:${index.theme.text.error.color};`;
+const Wrapper = styled__default.default.label.withConfig({ displayName: "vui--Wrapper", componentId: "vui--1lwtegd" }) `box-sizing:border-box;&:hover{cursor:${(props) => (props.disabled ? 'default' : 'pointer')};}`;
+const BorderedWrapper = styled__default.default(Wrapper).withConfig({ displayName: "vui--BorderedWrapper", componentId: "vui--esoay9" }) `border:2px solid ${index.theme.colors.neutral.grey.dark};border-radius:${index.theme.radius.md};padding:${index.theme.sizes.base} 0.75rem;&:hover{border-color:${index.theme.colors.secondary.blue.base};}`;
+const BlockTooltip = styled__default.default(Tooltip.Tooltip).withConfig({ displayName: "vui--BlockTooltip", componentId: "vui--13quusr" }) `display:block;&-hoverable{display:block;}`;
 exports.AccessoryLayout = AccessoryLayout;
 exports.BlockTooltip = BlockTooltip;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"styled.cjs","sources":["../../../../src/components/Choice/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Tooltip } from '../../Tooltip';\nimport { theme } from '../../../theme';\n\nconst alignMap = {\n top: 'flex-start',\n center: 'center',\n};\n\nexport const RootLayout = styled.div`\n display: flex;\n align-items: center;\n\n & > * + * {\n margin-left: ${theme.sizes.base};\n }\n`;\n\nexport interface InputLayoutProps {\n align: 'top' \| 'center';\n}\n\nexport const InputLayout = styled.div<InputLayoutProps>`\n align-self: stretch;\n display: flex;\n align-items: ${(props) => alignMap[props.align]};\n`;\n\nexport const AccessoryLayout = styled.div`\n align-self: center;\n display: flex;\n align-items: center;\n`;\n\nexport const TextLayout = styled.div`\n flex: 1;\n\n & > * + * {\n margin-top: ${theme.sizes.sm};\n }\n`;\n\nexport const HintText = styled.div`\n font-family: ${theme.fontFamily};\n font-size: ${theme.sizes[3]};\n line-height: ${theme.sizes[4]};\n color: ${theme.colors.neutral.ink.light};\n`;\n\nexport const ErrorText = styled.div`\n font-family: ${theme.text.error.fontFamily};\n font-size: ${theme.text.error.fontSize};\n font-weight: ${theme.text.error.fontWeight};\n line-height: ${theme.text.error.lineHeight};\n color: ${theme.text.error.color};\n`;\n\nexport const Wrapper = styled.label<{ disabled: boolean }>`\n box-sizing: border-box;\n\n &:hover {\n cursor: ${(props) => (props.disabled ? 'default' : 'pointer')};\n }\n`;\n\nexport const BorderedWrapper = styled(Wrapper)`\n border: 2px solid ${theme.colors.neutral.grey.dark};\n border-radius: ${theme.radius.md};\n padding: ${theme.sizes.base} 0.75rem;\n\n &:hover {\n border-color: ${theme.colors.secondary.blue.base};\n }\n`;\n\nexport const BlockTooltip = styled(Tooltip)`\n /* Tooltip uses inline-block containers which add more height when\n the child component is an inline element (e.g. Glyph or an SVG),\n so we need to set to block to preserve the height and fix alignment. */\n display: block;\n &-hoverable {\n display: block;\n }\n`;\n"],"names":["styled","theme","Tooltip"],"mappings":";;;;;;;;;;AAIA,MAAM,QAAQ,GAAG;AACf,IAAA,GAAG,EAAE,YAAY;AACjB,IAAA,MAAM,EAAE,QAAQ;CACjB;AAEM,MAAM,UAAU,GAAGA,uBAAM,CAAC,GAAG,CAKjB,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,sDAAA,EAAAC,WAAK,CAAC,KAAK,CAAC,IAAI;MAQtB,WAAW,GAAGD,uBAAM,CAAC,GAAG,6HAGpB,CAAC,KAAK,KAAK,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC;MAGpC,eAAe,GAAGA,uBAAM,CAAC,GAAG;AAMlC,MAAM,UAAU,GAAGA,uBAAM,CAAC,GAAG,CAIlB,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,4BAAA,EAAAC,WAAK,CAAC,KAAK,CAAC,EAAE;AAInB,MAAA,QAAQ,GAAGD,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,~~YAAA~~,EAAA,CAAA,CAAA,CAAA,YAAA,EACjBC,WAAK,CAAC,UAAU,CAClB,WAAA,EAAAA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CACZ,aAAA,EAAAA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC,UACpBA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK;MAG5B,SAAS,GAAGD,uBAAM,CAAC,GAAG,CAClB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,YAAA,EAAAC,WAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAC7B,WAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAA,aAAA,EACvBA,WAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAC3B,aAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAA,OAAA,EACjCA,WAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAA,CAAA;AAGpB,MAAA,OAAO,GAAGD,uBAAM,CAAC,KAAK,CAIrB,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,~~aAAA~~,EAAA,CAAA,CAAA,CAAA,qCAAA,EAAA,CAAC,KAAK,MAAM,KAAK,CAAC,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC,CAAA,EAAA;AAIpD,MAAA,eAAe,GAAGA,uBAAM,CAAC,OAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,~~cAAA~~,EAAA,CAAA,CAAA,CAAA,iBAAA,EACxBC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CACjC,eAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,EAAE,CAAA,SAAA,EACrBA,WAAK,CAAC,KAAK,CAAC,IAAI,CAAA,8BAAA,EAGTA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;MAIvC,YAAY,GAAGD,uBAAM,CAACE,eAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,yCAAA;;;;;;;;;;;;"}
1	+ {"version":3,"file":"styled.cjs","sources":["../../../../src/components/Choice/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Tooltip } from '../../Tooltip';\nimport { theme } from '../../../theme';\n\nconst alignMap = {\n top: 'flex-start',\n center: 'center',\n};\n\nexport const RootLayout = styled.div`\n display: flex;\n align-items: center;\n\n & > * + * {\n margin-left: ${theme.sizes.base};\n }\n`;\n\nexport interface InputLayoutProps {\n align: 'top' \| 'center';\n}\n\nexport const InputLayout = styled.div<InputLayoutProps>`\n align-self: stretch;\n display: flex;\n align-items: ${(props) => alignMap[props.align]};\n`;\n\nexport const AccessoryLayout = styled.div`\n align-self: center;\n display: flex;\n align-items: center;\n`;\n\nexport const TextLayout = styled.div`\n flex: 1;\n\n & > * + * {\n margin-top: ${theme.sizes.sm};\n }\n`;\n\nexport const HintText = styled.div`\n font-family: ${theme.fontFamily};\n font-size: ${theme.sizes[3]};\n line-height: ${theme.sizes[4]};\n color: ${theme.colors.neutral.ink.light};\n`;\n\nexport const ErrorText = styled.div`\n font-family: ${theme.text.error.fontFamily};\n font-size: ${theme.text.error.fontSize};\n font-weight: ${theme.text.error.fontWeight};\n line-height: ${theme.text.error.lineHeight};\n color: ${theme.text.error.color};\n`;\n\nexport const Wrapper = styled.label<{ disabled: boolean }>`\n box-sizing: border-box;\n\n &:hover {\n cursor: ${(props) => (props.disabled ? 'default' : 'pointer')};\n }\n`;\n\nexport const BorderedWrapper = styled(Wrapper)`\n border: 2px solid ${theme.colors.neutral.grey.dark};\n border-radius: ${theme.radius.md};\n padding: ${theme.sizes.base} 0.75rem;\n\n &:hover {\n border-color: ${theme.colors.secondary.blue.base};\n }\n`;\n\nexport const BlockTooltip = styled(Tooltip)`\n /* Tooltip uses inline-block containers which add more height when\n the child component is an inline element (e.g. Glyph or an SVG),\n so we need to set to block to preserve the height and fix alignment. */\n display: block;\n &-hoverable {\n display: block;\n }\n`;\n"],"names":["styled","theme","Tooltip"],"mappings":";;;;;;;;;;AAIA,MAAM,QAAQ,GAAG;AACf,IAAA,GAAG,EAAE,YAAY;AACjB,IAAA,MAAM,EAAE,QAAQ;CACjB;AAEM,MAAM,UAAU,GAAGA,uBAAM,CAAC,GAAG,CAKjB,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,sDAAA,EAAAC,WAAK,CAAC,KAAK,CAAC,IAAI;MAQtB,WAAW,GAAGD,uBAAM,CAAC,GAAG,6HAGpB,CAAC,KAAK,KAAK,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC;MAGpC,eAAe,GAAGA,uBAAM,CAAC,GAAG;AAMlC,MAAM,UAAU,GAAGA,uBAAM,CAAC,GAAG,CAIlB,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,4BAAA,EAAAC,WAAK,CAAC,KAAK,CAAC,EAAE;AAInB,MAAA,QAAQ,GAAGD,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,YAAA,EACjBC,WAAK,CAAC,UAAU,CAClB,WAAA,EAAAA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CACZ,aAAA,EAAAA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC,UACpBA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK;MAG5B,SAAS,GAAGD,uBAAM,CAAC,GAAG,CAClB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,YAAA,EAAAC,WAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAC7B,WAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAA,aAAA,EACvBA,WAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAC3B,aAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAA,OAAA,EACjCA,WAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAA,CAAA;AAGpB,MAAA,OAAO,GAAGD,uBAAM,CAAC,KAAK,CAIrB,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,qCAAA,EAAA,CAAC,KAAK,MAAM,KAAK,CAAC,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC,CAAA,EAAA;AAIpD,MAAA,eAAe,GAAGA,uBAAM,CAAC,OAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EACxBC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CACjC,eAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,EAAE,CAAA,SAAA,EACrBA,WAAK,CAAC,KAAK,CAAC,IAAI,CAAA,8BAAA,EAGTA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;MAIvC,YAAY,GAAGD,uBAAM,CAACE,eAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,yCAAA;;;;;;;;;;;;"}

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

@@ -6,15 +6,15 @@ const alignMap = {
     top: 'flex-start',
     center: 'center',
 };
-const RootLayout = styled.div.withConfig({ displayName: "vui--RootLayout", componentId: "vui--11nf17l" }) `display:flex;align-items:center;& > * + *{margin-left:${theme.sizes.base};}`;
-const InputLayout = styled.div.withConfig({ displayName: "vui--InputLayout", componentId: "vui--1yac6kr" }) `align-self:stretch;display:flex;align-items:${(props) => alignMap[props.align]};`;
-const AccessoryLayout = styled.div.withConfig({ displayName: "vui--AccessoryLayout", componentId: "vui--qbgrc7" }) `align-self:center;display:flex;align-items:center;`;
-const TextLayout = styled.div.withConfig({ displayName: "vui--TextLayout", componentId: "vui--1uu3ed5" }) `flex:1;& > * + *{margin-top:${theme.sizes.sm};}`;
-const HintText = styled.div.withConfig({ displayName: "vui--HintText", componentId: "vui--lz8nl" }) `font-family:${theme.fontFamily};font-size:${theme.sizes[3]};line-height:${theme.sizes[4]};color:${theme.colors.neutral.ink.light};`;
-const ErrorText = styled.div.withConfig({ displayName: "vui--ErrorText", componentId: "vui--piugtf" }) `font-family:${theme.text.error.fontFamily};font-size:${theme.text.error.fontSize};font-weight:${theme.text.error.fontWeight};line-height:${theme.text.error.lineHeight};color:${theme.text.error.color};`;
-const Wrapper = styled.label.withConfig({ displayName: "vui--Wrapper", componentId: "vui--2wdtq1" }) `box-sizing:border-box;&:hover{cursor:${(props) => (props.disabled ? 'default' : 'pointer')};}`;
-const BorderedWrapper = styled(Wrapper).withConfig({ displayName: "vui--BorderedWrapper", componentId: "vui--1an42ms" }) `border:2px solid ${theme.colors.neutral.grey.dark};border-radius:${theme.radius.md};padding:${theme.sizes.base} 0.75rem;&:hover{border-color:${theme.colors.secondary.blue.base};}`;
-const BlockTooltip = styled(Tooltip).withConfig({ displayName: "vui--BlockTooltip", componentId: "vui--1ifrill" }) `display:block;&-hoverable{display:block;}`;
+const RootLayout = styled.div.withConfig({ displayName: "vui--RootLayout", componentId: "vui--1hqfkl1" }) `display:flex;align-items:center;& > * + *{margin-left:${theme.sizes.base};}`;
+const InputLayout = styled.div.withConfig({ displayName: "vui--InputLayout", componentId: "vui--16amzmr" }) `align-self:stretch;display:flex;align-items:${(props) => alignMap[props.align]};`;
+const AccessoryLayout = styled.div.withConfig({ displayName: "vui--AccessoryLayout", componentId: "vui--1mrja9t" }) `align-self:center;display:flex;align-items:center;`;
+const TextLayout = styled.div.withConfig({ displayName: "vui--TextLayout", componentId: "vui--1v0a766" }) `flex:1;& > * + *{margin-top:${theme.sizes.sm};}`;
+const HintText = styled.div.withConfig({ displayName: "vui--HintText", componentId: "vui--j2tynh" }) `font-family:${theme.fontFamily};font-size:${theme.sizes[3]};line-height:${theme.sizes[4]};color:${theme.colors.neutral.ink.light};`;
+const ErrorText = styled.div.withConfig({ displayName: "vui--ErrorText", componentId: "vui--xvisw5" }) `font-family:${theme.text.error.fontFamily};font-size:${theme.text.error.fontSize};font-weight:${theme.text.error.fontWeight};line-height:${theme.text.error.lineHeight};color:${theme.text.error.color};`;
+const Wrapper = styled.label.withConfig({ displayName: "vui--Wrapper", componentId: "vui--1lwtegd" }) `box-sizing:border-box;&:hover{cursor:${(props) => (props.disabled ? 'default' : 'pointer')};}`;
+const BorderedWrapper = styled(Wrapper).withConfig({ displayName: "vui--BorderedWrapper", componentId: "vui--esoay9" }) `border:2px solid ${theme.colors.neutral.grey.dark};border-radius:${theme.radius.md};padding:${theme.sizes.base} 0.75rem;&:hover{border-color:${theme.colors.secondary.blue.base};}`;
+const BlockTooltip = styled(Tooltip).withConfig({ displayName: "vui--BlockTooltip", componentId: "vui--13quusr" }) `display:block;&-hoverable{display:block;}`;
 export { AccessoryLayout, BlockTooltip, BorderedWrapper, ErrorText, HintText, InputLayout, RootLayout, TextLayout, Wrapper };
 //# sourceMappingURL=styled.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"styled.js","sources":["../../../../src/components/Choice/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Tooltip } from '../../Tooltip';\nimport { theme } from '../../../theme';\n\nconst alignMap = {\n top: 'flex-start',\n center: 'center',\n};\n\nexport const RootLayout = styled.div`\n display: flex;\n align-items: center;\n\n & > * + * {\n margin-left: ${theme.sizes.base};\n }\n`;\n\nexport interface InputLayoutProps {\n align: 'top' \| 'center';\n}\n\nexport const InputLayout = styled.div<InputLayoutProps>`\n align-self: stretch;\n display: flex;\n align-items: ${(props) => alignMap[props.align]};\n`;\n\nexport const AccessoryLayout = styled.div`\n align-self: center;\n display: flex;\n align-items: center;\n`;\n\nexport const TextLayout = styled.div`\n flex: 1;\n\n & > * + * {\n margin-top: ${theme.sizes.sm};\n }\n`;\n\nexport const HintText = styled.div`\n font-family: ${theme.fontFamily};\n font-size: ${theme.sizes[3]};\n line-height: ${theme.sizes[4]};\n color: ${theme.colors.neutral.ink.light};\n`;\n\nexport const ErrorText = styled.div`\n font-family: ${theme.text.error.fontFamily};\n font-size: ${theme.text.error.fontSize};\n font-weight: ${theme.text.error.fontWeight};\n line-height: ${theme.text.error.lineHeight};\n color: ${theme.text.error.color};\n`;\n\nexport const Wrapper = styled.label<{ disabled: boolean }>`\n box-sizing: border-box;\n\n &:hover {\n cursor: ${(props) => (props.disabled ? 'default' : 'pointer')};\n }\n`;\n\nexport const BorderedWrapper = styled(Wrapper)`\n border: 2px solid ${theme.colors.neutral.grey.dark};\n border-radius: ${theme.radius.md};\n padding: ${theme.sizes.base} 0.75rem;\n\n &:hover {\n border-color: ${theme.colors.secondary.blue.base};\n }\n`;\n\nexport const BlockTooltip = styled(Tooltip)`\n /* Tooltip uses inline-block containers which add more height when\n the child component is an inline element (e.g. Glyph or an SVG),\n so we need to set to block to preserve the height and fix alignment. */\n display: block;\n &-hoverable {\n display: block;\n }\n`;\n"],"names":[],"mappings":";;;;AAIA,MAAM,QAAQ,GAAG;AACf,IAAA,GAAG,EAAE,YAAY;AACjB,IAAA,MAAM,EAAE,QAAQ;CACjB;AAEM,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAKjB,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,sDAAA,EAAA,KAAK,CAAC,KAAK,CAAC,IAAI;MAQtB,WAAW,GAAG,MAAM,CAAC,GAAG,6HAGpB,CAAC,KAAK,KAAK,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC;MAGpC,eAAe,GAAG,MAAM,CAAC,GAAG;AAMlC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAIlB,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,4BAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE;AAInB,MAAA,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,~~YAAA~~,EAAA,CAAA,CAAA,CAAA,YAAA,EACjB,KAAK,CAAC,UAAU,CAClB,WAAA,EAAA,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CACZ,aAAA,EAAA,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,UACpB,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK;MAG5B,SAAS,GAAG,MAAM,CAAC,GAAG,CAClB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,YAAA,EAAA,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAC7B,WAAA,EAAA,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAA,aAAA,EACvB,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAC3B,aAAA,EAAA,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAA,OAAA,EACjC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAA,CAAA;AAGpB,MAAA,OAAO,GAAG,MAAM,CAAC,KAAK,CAIrB,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,~~aAAA~~,EAAA,CAAA,CAAA,CAAA,qCAAA,EAAA,CAAC,KAAK,MAAM,KAAK,CAAC,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC,CAAA,EAAA;AAIpD,MAAA,eAAe,GAAG,MAAM,CAAC,OAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,~~cAAA~~,EAAA,CAAA,CAAA,CAAA,iBAAA,EACxB,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CACjC,eAAA,EAAA,KAAK,CAAC,MAAM,CAAC,EAAE,CAAA,SAAA,EACrB,KAAK,CAAC,KAAK,CAAC,IAAI,CAAA,8BAAA,EAGT,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;MAIvC,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,yCAAA;;;;"}
1	+ {"version":3,"file":"styled.js","sources":["../../../../src/components/Choice/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Tooltip } from '../../Tooltip';\nimport { theme } from '../../../theme';\n\nconst alignMap = {\n top: 'flex-start',\n center: 'center',\n};\n\nexport const RootLayout = styled.div`\n display: flex;\n align-items: center;\n\n & > * + * {\n margin-left: ${theme.sizes.base};\n }\n`;\n\nexport interface InputLayoutProps {\n align: 'top' \| 'center';\n}\n\nexport const InputLayout = styled.div<InputLayoutProps>`\n align-self: stretch;\n display: flex;\n align-items: ${(props) => alignMap[props.align]};\n`;\n\nexport const AccessoryLayout = styled.div`\n align-self: center;\n display: flex;\n align-items: center;\n`;\n\nexport const TextLayout = styled.div`\n flex: 1;\n\n & > * + * {\n margin-top: ${theme.sizes.sm};\n }\n`;\n\nexport const HintText = styled.div`\n font-family: ${theme.fontFamily};\n font-size: ${theme.sizes[3]};\n line-height: ${theme.sizes[4]};\n color: ${theme.colors.neutral.ink.light};\n`;\n\nexport const ErrorText = styled.div`\n font-family: ${theme.text.error.fontFamily};\n font-size: ${theme.text.error.fontSize};\n font-weight: ${theme.text.error.fontWeight};\n line-height: ${theme.text.error.lineHeight};\n color: ${theme.text.error.color};\n`;\n\nexport const Wrapper = styled.label<{ disabled: boolean }>`\n box-sizing: border-box;\n\n &:hover {\n cursor: ${(props) => (props.disabled ? 'default' : 'pointer')};\n }\n`;\n\nexport const BorderedWrapper = styled(Wrapper)`\n border: 2px solid ${theme.colors.neutral.grey.dark};\n border-radius: ${theme.radius.md};\n padding: ${theme.sizes.base} 0.75rem;\n\n &:hover {\n border-color: ${theme.colors.secondary.blue.base};\n }\n`;\n\nexport const BlockTooltip = styled(Tooltip)`\n /* Tooltip uses inline-block containers which add more height when\n the child component is an inline element (e.g. Glyph or an SVG),\n so we need to set to block to preserve the height and fix alignment. */\n display: block;\n &-hoverable {\n display: block;\n }\n`;\n"],"names":[],"mappings":";;;;AAIA,MAAM,QAAQ,GAAG;AACf,IAAA,GAAG,EAAE,YAAY;AACjB,IAAA,MAAM,EAAE,QAAQ;CACjB;AAEM,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAKjB,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,sDAAA,EAAA,KAAK,CAAC,KAAK,CAAC,IAAI;MAQtB,WAAW,GAAG,MAAM,CAAC,GAAG,6HAGpB,CAAC,KAAK,KAAK,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC;MAGpC,eAAe,GAAG,MAAM,CAAC,GAAG;AAMlC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAIlB,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,4BAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE;AAInB,MAAA,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,YAAA,EACjB,KAAK,CAAC,UAAU,CAClB,WAAA,EAAA,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CACZ,aAAA,EAAA,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,UACpB,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK;MAG5B,SAAS,GAAG,MAAM,CAAC,GAAG,CAClB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,YAAA,EAAA,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAC7B,WAAA,EAAA,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAA,aAAA,EACvB,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAC3B,aAAA,EAAA,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAA,OAAA,EACjC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAA,CAAA;AAGpB,MAAA,OAAO,GAAG,MAAM,CAAC,KAAK,CAIrB,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,qCAAA,EAAA,CAAC,KAAK,MAAM,KAAK,CAAC,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC,CAAA,EAAA;AAIpD,MAAA,eAAe,GAAG,MAAM,CAAC,OAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EACxB,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CACjC,eAAA,EAAA,KAAK,CAAC,MAAM,CAAC,EAAE,CAAA,SAAA,EACrB,KAAK,CAAC,KAAK,CAAC,IAAI,CAAA,8BAAA,EAGT,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;MAIvC,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,yCAAA;;;;"}

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

@@ -7,8 +7,8 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-const Fieldset = styled__default.default.fieldset.withConfig({ displayName: "vui--Fieldset", componentId: "vui--bygv6o" }) `padding:0;display:flex;flex-direction:column;border:0;& > * + *{margin-top:16px;}`;
-const Legend = styled__default.default.legend.withConfig({ displayName: "vui--Legend", componentId: "vui--18baj4v" }) `font-family:${index.theme.text.inputLabel.fontFamily};font-size:${index.theme.text.inputLabel.fontSize};font-style:${index.theme.text.inputLabel.fontStyle};font-weight:${index.theme.text.inputLabel.fontWeight};line-height:${index.theme.text.inputLabel.lineHeight};text-decoration:${index.theme.text.inputLabel.textDecoration};color:${index.theme.text.inputLabel.color};`;
+const Fieldset = styled__default.default.fieldset.withConfig({ displayName: "vui--Fieldset", componentId: "vui--1ohs7n7" }) `padding:0;display:flex;flex-direction:column;border:0;& > * + *{margin-top:16px;}`;
+const Legend = styled__default.default.legend.withConfig({ displayName: "vui--Legend", componentId: "vui--m6kmhk" }) `font-family:${index.theme.text.inputLabel.fontFamily};font-size:${index.theme.text.inputLabel.fontSize};font-style:${index.theme.text.inputLabel.fontStyle};font-weight:${index.theme.text.inputLabel.fontWeight};line-height:${index.theme.text.inputLabel.lineHeight};text-decoration:${index.theme.text.inputLabel.textDecoration};color:${index.theme.text.inputLabel.color};`;
 exports.Fieldset = Fieldset;
 exports.Legend = Legend;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"styled.cjs","sources":["../../../src/components/ChoiceList/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\n\nexport const Fieldset = styled.fieldset`\n padding: 0;\n display: flex;\n flex-direction: column;\n border: 0;\n\n & > * + * {\n margin-top: 16px;\n }\n`;\n\nexport const Legend = styled.legend`\n font-family: ${theme.text.inputLabel.fontFamily};\n font-size: ${theme.text.inputLabel.fontSize};\n font-style: ${theme.text.inputLabel.fontStyle};\n font-weight: ${theme.text.inputLabel.fontWeight};\n line-height: ${theme.text.inputLabel.lineHeight};\n text-decoration: ${theme.text.inputLabel.textDecoration};\n color: ${theme.text.inputLabel.color};\n`;\n"],"names":["styled","theme"],"mappings":";;;;;;;;;MAGa,QAAQ,GAAGA,uBAAM,CAAC,QAAQ;AAWhC,MAAM,MAAM,GAAGA,uBAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,~~cAAA~~,EAAA,CAAA,CAAA,CAAA,YAAA,EAClBC,WAAK,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAClC,WAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAC7B,YAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAA,aAAA,EAC9BA,WAAK,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAAA,aAAA,EAChCA,WAAK,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAC5B,iBAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,UAAU,CAAC,cAAc,CAC9C,OAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK;;;;;"}
1	+ {"version":3,"file":"styled.cjs","sources":["../../../src/components/ChoiceList/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\n\nexport const Fieldset = styled.fieldset`\n padding: 0;\n display: flex;\n flex-direction: column;\n border: 0;\n\n & > * + * {\n margin-top: 16px;\n }\n`;\n\nexport const Legend = styled.legend`\n font-family: ${theme.text.inputLabel.fontFamily};\n font-size: ${theme.text.inputLabel.fontSize};\n font-style: ${theme.text.inputLabel.fontStyle};\n font-weight: ${theme.text.inputLabel.fontWeight};\n line-height: ${theme.text.inputLabel.lineHeight};\n text-decoration: ${theme.text.inputLabel.textDecoration};\n color: ${theme.text.inputLabel.color};\n`;\n"],"names":["styled","theme"],"mappings":";;;;;;;;;MAGa,QAAQ,GAAGA,uBAAM,CAAC,QAAQ;AAWhC,MAAM,MAAM,GAAGA,uBAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,YAAA,EAClBC,WAAK,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAClC,WAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAC7B,YAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAA,aAAA,EAC9BA,WAAK,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAAA,aAAA,EAChCA,WAAK,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAC5B,iBAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,UAAU,CAAC,cAAc,CAC9C,OAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK;;;;;"}

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

@@ -1,8 +1,8 @@
 import styled from 'styled-components';
 import { theme } from '../../theme/index.js';
-const Fieldset = styled.fieldset.withConfig({ displayName: "vui--Fieldset", componentId: "vui--bygv6o" }) `padding:0;display:flex;flex-direction:column;border:0;& > * + *{margin-top:16px;}`;
-const Legend = styled.legend.withConfig({ displayName: "vui--Legend", componentId: "vui--18baj4v" }) `font-family:${theme.text.inputLabel.fontFamily};font-size:${theme.text.inputLabel.fontSize};font-style:${theme.text.inputLabel.fontStyle};font-weight:${theme.text.inputLabel.fontWeight};line-height:${theme.text.inputLabel.lineHeight};text-decoration:${theme.text.inputLabel.textDecoration};color:${theme.text.inputLabel.color};`;
+const Fieldset = styled.fieldset.withConfig({ displayName: "vui--Fieldset", componentId: "vui--1ohs7n7" }) `padding:0;display:flex;flex-direction:column;border:0;& > * + *{margin-top:16px;}`;
+const Legend = styled.legend.withConfig({ displayName: "vui--Legend", componentId: "vui--m6kmhk" }) `font-family:${theme.text.inputLabel.fontFamily};font-size:${theme.text.inputLabel.fontSize};font-style:${theme.text.inputLabel.fontStyle};font-weight:${theme.text.inputLabel.fontWeight};line-height:${theme.text.inputLabel.lineHeight};text-decoration:${theme.text.inputLabel.textDecoration};color:${theme.text.inputLabel.color};`;
 export { Fieldset, Legend };
 //# sourceMappingURL=styled.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"styled.js","sources":["../../../src/components/ChoiceList/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\n\nexport const Fieldset = styled.fieldset`\n padding: 0;\n display: flex;\n flex-direction: column;\n border: 0;\n\n & > * + * {\n margin-top: 16px;\n }\n`;\n\nexport const Legend = styled.legend`\n font-family: ${theme.text.inputLabel.fontFamily};\n font-size: ${theme.text.inputLabel.fontSize};\n font-style: ${theme.text.inputLabel.fontStyle};\n font-weight: ${theme.text.inputLabel.fontWeight};\n line-height: ${theme.text.inputLabel.lineHeight};\n text-decoration: ${theme.text.inputLabel.textDecoration};\n color: ${theme.text.inputLabel.color};\n`;\n"],"names":[],"mappings":";;;MAGa,QAAQ,GAAG,MAAM,CAAC,QAAQ;AAWhC,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,~~cAAA~~,EAAA,CAAA,CAAA,CAAA,YAAA,EAClB,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAClC,WAAA,EAAA,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAC7B,YAAA,EAAA,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAA,aAAA,EAC9B,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAAA,aAAA,EAChC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAC5B,iBAAA,EAAA,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,cAAc,CAC9C,OAAA,EAAA,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK;;;;"}
1	+ {"version":3,"file":"styled.js","sources":["../../../src/components/ChoiceList/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\n\nexport const Fieldset = styled.fieldset`\n padding: 0;\n display: flex;\n flex-direction: column;\n border: 0;\n\n & > * + * {\n margin-top: 16px;\n }\n`;\n\nexport const Legend = styled.legend`\n font-family: ${theme.text.inputLabel.fontFamily};\n font-size: ${theme.text.inputLabel.fontSize};\n font-style: ${theme.text.inputLabel.fontStyle};\n font-weight: ${theme.text.inputLabel.fontWeight};\n line-height: ${theme.text.inputLabel.lineHeight};\n text-decoration: ${theme.text.inputLabel.textDecoration};\n color: ${theme.text.inputLabel.color};\n`;\n"],"names":[],"mappings":";;;MAGa,QAAQ,GAAG,MAAM,CAAC,QAAQ;AAWhC,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,YAAA,EAClB,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAClC,WAAA,EAAA,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAC7B,YAAA,EAAA,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAA,aAAA,EAC9B,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAAA,aAAA,EAChC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAC5B,iBAAA,EAAA,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,cAAc,CAC9C,OAAA,EAAA,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK;;;;"}

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

@@ -19,7 +19,7 @@ const iconSizes = { width: sizes.sizes.base, height: sizes.sizes.base };
  * Created in here to fix orders table sizes. Bad pattern to use in main button component, as
  * touch target is below A11y guidelines.
  */
-const XSButton = styled__default.default(Button.Button).withConfig({ displayName: "vui--XSButton", componentId: "vui--e6p1xr" }) `padding:1px;height:unset;span{height:${sizes.sizes.base};width:${sizes.sizes.base};top:unset;}`;
+const XSButton = styled__default.default(Button.Button).withConfig({ displayName: "vui--XSButton", componentId: "vui--19w75dt" }) `padding:1px;height:unset;span{height:${sizes.sizes.base};width:${sizes.sizes.base};top:unset;}`;
 /**
  * A dynamic button to facilitate copying text to a users' keyboard when clicked.
  */

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CopyToClipboard.cjs","sources":["../../../src/components/CopyToClipboard/CopyToClipboard.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\n\nimport styled from 'styled-components';\nimport { Tooltip } from '../Tooltip';\nimport { colors } from '../../theme/modules/colors';\nimport { SuccessIcon } from '../../tempIcons/SuccessIcon';\nimport { sizes } from '../../theme/modules/sizes';\nimport { Button } from '../Button';\nimport { ClipboardIcon } from '../../tempIcons/ClipboardIcon';\n\nexport interface CopyToClipboardProps {\n className?: string;\n text: string;\n onCopy?: () => void;\n}\n\nconst iconSizes = { width: sizes.base, height: sizes.base };\n\n/*\n Created in here to fix orders table sizes. Bad pattern to use in main button component, as\n * touch target is below A11y guidelines.\n /\nconst XSButton = styled(Button)`\n padding: 1px;\n height: unset;\n\n span {\n height: ${sizes.base};\n width: ${sizes.base};\n top: unset;\n }\n`;\n\n/\n A dynamic button to facilitate copying text to a users' keyboard when clicked.\n */\nexport const CopyToClipboard = ({ className, text, onCopy }: CopyToClipboardProps) => {\n const [copied, setCopied] = React.useState(false);\n\n const handleCopy = useCallback(() => {\n navigator.clipboard.writeText(text);\n if (onCopy) onCopy();\n setCopied(true);\n setTimeout(() => setCopied(false), 2500);\n }, [onCopy, text]);\n\n return (\n <Tooltip text={copied ? 'Copied!' : 'Copy to clipboard'}>\n <XSButton\n variant=\"flat\"\n size=\"sm\"\n className={className}\n aria-label={`${copied ? 'Copied' : 'Copy'} \"${text}\" to clipboard`}\n iconSlot={\n copied ? (\n <SuccessIcon color={colors.secondary.green.base} {...iconSizes} />\n ) : (\n <ClipboardIcon color={colors.secondary.blue.base} {...iconSizes} />\n )\n }\n onClick={handleCopy}\n />\n </Tooltip>\n );\n};\n"],"names":["sizes","styled","Button","React","useCallback","Tooltip","SuccessIcon","colors","ClipboardIcon"],"mappings":";;;;;;;;;;;;;;;;AAgBA,MAAM,SAAS,GAAG,EAAE,KAAK,EAAEA,WAAK,CAAC,IAAI,EAAE,MAAM,EAAEA,WAAK,CAAC,IAAI,EAAE;AAE3D;;;AAGG;AACH,MAAM,QAAQ,GAAGC,uBAAM,CAACC,aAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,~~aAAA~~,EAAA,CAAA,CAAA,CAAA,qCAAA,EAKjBF,WAAK,CAAC,IAAI,CACX,OAAA,EAAAA,WAAK,CAAC,IAAI,cAGtB;AAED;;AAEG;AACI,MAAM,eAAe,GAAG,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAwB,KAAI;AACnF,IAAA,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAGG,sBAAK,CAAC,QAAQ,CAAC,KAAK,CAAC;AAEjD,IAAA,MAAM,UAAU,GAAGC,iBAAW,CAAC,MAAK;AAClC,QAAA,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC;AACnC,QAAA,IAAI,MAAM;AAAE,YAAA,MAAM,EAAE;QACpB,SAAS,CAAC,IAAI,CAAC;QACf,UAAU,CAAC,MAAM,SAAS,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC;AAC1C,KAAC,EAAE,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;AAElB,IAAA,QACED,sBAAA,CAAA,aAAA,CAACE,eAAO,EAAA,EAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,mBAAmB,EAAA;AACrD,QAAAF,sBAAA,CAAA,aAAA,CAAC,QAAQ,EACP,EAAA,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,IAAI,EACT,SAAS,EAAE,SAAS,EACR,YAAA,EAAA,CAAA,EAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAA,EAAA,EAAK,IAAI,CAAgB,cAAA,CAAA,EAClE,QAAQ,EACN,MAAM,IACJA,sBAAA,CAAA,aAAA,CAACG,uBAAW,EAAC,EAAA,KAAK,EAAEC,aAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,EAAM,GAAA,SAAS,EAAI,CAAA,KAElEJ,sBAAA,CAAA,aAAA,CAACK,2BAAa,EAAC,EAAA,KAAK,EAAED,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAM,GAAA,SAAS,EAAI,CAAA,CACpE,EAEH,OAAO,EAAE,UAAU,EACnB,CAAA,CACM;AAEd;;;;"}
1	+ {"version":3,"file":"CopyToClipboard.cjs","sources":["../../../src/components/CopyToClipboard/CopyToClipboard.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\n\nimport styled from 'styled-components';\nimport { Tooltip } from '../Tooltip';\nimport { colors } from '../../theme/modules/colors';\nimport { SuccessIcon } from '../../tempIcons/SuccessIcon';\nimport { sizes } from '../../theme/modules/sizes';\nimport { Button } from '../Button';\nimport { ClipboardIcon } from '../../tempIcons/ClipboardIcon';\n\nexport interface CopyToClipboardProps {\n className?: string;\n text: string;\n onCopy?: () => void;\n}\n\nconst iconSizes = { width: sizes.base, height: sizes.base };\n\n/*\n Created in here to fix orders table sizes. Bad pattern to use in main button component, as\n * touch target is below A11y guidelines.\n /\nconst XSButton = styled(Button)`\n padding: 1px;\n height: unset;\n\n span {\n height: ${sizes.base};\n width: ${sizes.base};\n top: unset;\n }\n`;\n\n/\n A dynamic button to facilitate copying text to a users' keyboard when clicked.\n */\nexport const CopyToClipboard = ({ className, text, onCopy }: CopyToClipboardProps) => {\n const [copied, setCopied] = React.useState(false);\n\n const handleCopy = useCallback(() => {\n navigator.clipboard.writeText(text);\n if (onCopy) onCopy();\n setCopied(true);\n setTimeout(() => setCopied(false), 2500);\n }, [onCopy, text]);\n\n return (\n <Tooltip text={copied ? 'Copied!' : 'Copy to clipboard'}>\n <XSButton\n variant=\"flat\"\n size=\"sm\"\n className={className}\n aria-label={`${copied ? 'Copied' : 'Copy'} \"${text}\" to clipboard`}\n iconSlot={\n copied ? (\n <SuccessIcon color={colors.secondary.green.base} {...iconSizes} />\n ) : (\n <ClipboardIcon color={colors.secondary.blue.base} {...iconSizes} />\n )\n }\n onClick={handleCopy}\n />\n </Tooltip>\n );\n};\n"],"names":["sizes","styled","Button","React","useCallback","Tooltip","SuccessIcon","colors","ClipboardIcon"],"mappings":";;;;;;;;;;;;;;;;AAgBA,MAAM,SAAS,GAAG,EAAE,KAAK,EAAEA,WAAK,CAAC,IAAI,EAAE,MAAM,EAAEA,WAAK,CAAC,IAAI,EAAE;AAE3D;;;AAGG;AACH,MAAM,QAAQ,GAAGC,uBAAM,CAACC,aAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,qCAAA,EAKjBF,WAAK,CAAC,IAAI,CACX,OAAA,EAAAA,WAAK,CAAC,IAAI,cAGtB;AAED;;AAEG;AACI,MAAM,eAAe,GAAG,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAwB,KAAI;AACnF,IAAA,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAGG,sBAAK,CAAC,QAAQ,CAAC,KAAK,CAAC;AAEjD,IAAA,MAAM,UAAU,GAAGC,iBAAW,CAAC,MAAK;AAClC,QAAA,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC;AACnC,QAAA,IAAI,MAAM;AAAE,YAAA,MAAM,EAAE;QACpB,SAAS,CAAC,IAAI,CAAC;QACf,UAAU,CAAC,MAAM,SAAS,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC;AAC1C,KAAC,EAAE,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;AAElB,IAAA,QACED,sBAAA,CAAA,aAAA,CAACE,eAAO,EAAA,EAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,mBAAmB,EAAA;AACrD,QAAAF,sBAAA,CAAA,aAAA,CAAC,QAAQ,EACP,EAAA,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,IAAI,EACT,SAAS,EAAE,SAAS,EACR,YAAA,EAAA,CAAA,EAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAA,EAAA,EAAK,IAAI,CAAgB,cAAA,CAAA,EAClE,QAAQ,EACN,MAAM,IACJA,sBAAA,CAAA,aAAA,CAACG,uBAAW,EAAC,EAAA,KAAK,EAAEC,aAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,EAAM,GAAA,SAAS,EAAI,CAAA,KAElEJ,sBAAA,CAAA,aAAA,CAACK,2BAAa,EAAC,EAAA,KAAK,EAAED,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAM,GAAA,SAAS,EAAI,CAAA,CACpE,EAEH,OAAO,EAAE,UAAU,EACnB,CAAA,CACM;AAEd;;;;"}

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

@@ -12,7 +12,7 @@ const iconSizes = { width: sizes.base, height: sizes.base };
  * Created in here to fix orders table sizes. Bad pattern to use in main button component, as
  * touch target is below A11y guidelines.
  */
-const XSButton = styled(Button).withConfig({ displayName: "vui--XSButton", componentId: "vui--e6p1xr" }) `padding:1px;height:unset;span{height:${sizes.base};width:${sizes.base};top:unset;}`;
+const XSButton = styled(Button).withConfig({ displayName: "vui--XSButton", componentId: "vui--19w75dt" }) `padding:1px;height:unset;span{height:${sizes.base};width:${sizes.base};top:unset;}`;
 /**
  * A dynamic button to facilitate copying text to a users' keyboard when clicked.
  */

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CopyToClipboard.js","sources":["../../../src/components/CopyToClipboard/CopyToClipboard.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\n\nimport styled from 'styled-components';\nimport { Tooltip } from '../Tooltip';\nimport { colors } from '../../theme/modules/colors';\nimport { SuccessIcon } from '../../tempIcons/SuccessIcon';\nimport { sizes } from '../../theme/modules/sizes';\nimport { Button } from '../Button';\nimport { ClipboardIcon } from '../../tempIcons/ClipboardIcon';\n\nexport interface CopyToClipboardProps {\n className?: string;\n text: string;\n onCopy?: () => void;\n}\n\nconst iconSizes = { width: sizes.base, height: sizes.base };\n\n/*\n Created in here to fix orders table sizes. Bad pattern to use in main button component, as\n * touch target is below A11y guidelines.\n /\nconst XSButton = styled(Button)`\n padding: 1px;\n height: unset;\n\n span {\n height: ${sizes.base};\n width: ${sizes.base};\n top: unset;\n }\n`;\n\n/\n A dynamic button to facilitate copying text to a users' keyboard when clicked.\n */\nexport const CopyToClipboard = ({ className, text, onCopy }: CopyToClipboardProps) => {\n const [copied, setCopied] = React.useState(false);\n\n const handleCopy = useCallback(() => {\n navigator.clipboard.writeText(text);\n if (onCopy) onCopy();\n setCopied(true);\n setTimeout(() => setCopied(false), 2500);\n }, [onCopy, text]);\n\n return (\n <Tooltip text={copied ? 'Copied!' : 'Copy to clipboard'}>\n <XSButton\n variant=\"flat\"\n size=\"sm\"\n className={className}\n aria-label={`${copied ? 'Copied' : 'Copy'} \"${text}\" to clipboard`}\n iconSlot={\n copied ? (\n <SuccessIcon color={colors.secondary.green.base} {...iconSizes} />\n ) : (\n <ClipboardIcon color={colors.secondary.blue.base} {...iconSizes} />\n )\n }\n onClick={handleCopy}\n />\n </Tooltip>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;AAgBA,MAAM,SAAS,GAAG,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,IAAI,EAAE;AAE3D;;;AAGG;AACH,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,~~aAAA~~,EAAA,CAAA,CAAA,CAAA,qCAAA,EAKjB,KAAK,CAAC,IAAI,CACX,OAAA,EAAA,KAAK,CAAC,IAAI,cAGtB;AAED;;AAEG;AACI,MAAM,eAAe,GAAG,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAwB,KAAI;AACnF,IAAA,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAGA,cAAK,CAAC,QAAQ,CAAC,KAAK,CAAC;AAEjD,IAAA,MAAM,UAAU,GAAG,WAAW,CAAC,MAAK;AAClC,QAAA,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC;AACnC,QAAA,IAAI,MAAM;AAAE,YAAA,MAAM,EAAE;QACpB,SAAS,CAAC,IAAI,CAAC;QACf,UAAU,CAAC,MAAM,SAAS,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC;AAC1C,KAAC,EAAE,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;AAElB,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,mBAAmB,EAAA;AACrD,QAAAA,cAAA,CAAA,aAAA,CAAC,QAAQ,EACP,EAAA,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,IAAI,EACT,SAAS,EAAE,SAAS,EACR,YAAA,EAAA,CAAA,EAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAA,EAAA,EAAK,IAAI,CAAgB,cAAA,CAAA,EAClE,QAAQ,EACN,MAAM,IACJA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAC,EAAA,KAAK,EAAE,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,EAAM,GAAA,SAAS,EAAI,CAAA,KAElEA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAC,EAAA,KAAK,EAAE,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAM,GAAA,SAAS,EAAI,CAAA,CACpE,EAEH,OAAO,EAAE,UAAU,EACnB,CAAA,CACM;AAEd;;;;"}
1	+ {"version":3,"file":"CopyToClipboard.js","sources":["../../../src/components/CopyToClipboard/CopyToClipboard.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\n\nimport styled from 'styled-components';\nimport { Tooltip } from '../Tooltip';\nimport { colors } from '../../theme/modules/colors';\nimport { SuccessIcon } from '../../tempIcons/SuccessIcon';\nimport { sizes } from '../../theme/modules/sizes';\nimport { Button } from '../Button';\nimport { ClipboardIcon } from '../../tempIcons/ClipboardIcon';\n\nexport interface CopyToClipboardProps {\n className?: string;\n text: string;\n onCopy?: () => void;\n}\n\nconst iconSizes = { width: sizes.base, height: sizes.base };\n\n/*\n Created in here to fix orders table sizes. Bad pattern to use in main button component, as\n * touch target is below A11y guidelines.\n /\nconst XSButton = styled(Button)`\n padding: 1px;\n height: unset;\n\n span {\n height: ${sizes.base};\n width: ${sizes.base};\n top: unset;\n }\n`;\n\n/\n A dynamic button to facilitate copying text to a users' keyboard when clicked.\n */\nexport const CopyToClipboard = ({ className, text, onCopy }: CopyToClipboardProps) => {\n const [copied, setCopied] = React.useState(false);\n\n const handleCopy = useCallback(() => {\n navigator.clipboard.writeText(text);\n if (onCopy) onCopy();\n setCopied(true);\n setTimeout(() => setCopied(false), 2500);\n }, [onCopy, text]);\n\n return (\n <Tooltip text={copied ? 'Copied!' : 'Copy to clipboard'}>\n <XSButton\n variant=\"flat\"\n size=\"sm\"\n className={className}\n aria-label={`${copied ? 'Copied' : 'Copy'} \"${text}\" to clipboard`}\n iconSlot={\n copied ? (\n <SuccessIcon color={colors.secondary.green.base} {...iconSizes} />\n ) : (\n <ClipboardIcon color={colors.secondary.blue.base} {...iconSizes} />\n )\n }\n onClick={handleCopy}\n />\n </Tooltip>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;AAgBA,MAAM,SAAS,GAAG,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,IAAI,EAAE;AAE3D;;;AAGG;AACH,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,qCAAA,EAKjB,KAAK,CAAC,IAAI,CACX,OAAA,EAAA,KAAK,CAAC,IAAI,cAGtB;AAED;;AAEG;AACI,MAAM,eAAe,GAAG,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAwB,KAAI;AACnF,IAAA,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAGA,cAAK,CAAC,QAAQ,CAAC,KAAK,CAAC;AAEjD,IAAA,MAAM,UAAU,GAAG,WAAW,CAAC,MAAK;AAClC,QAAA,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC;AACnC,QAAA,IAAI,MAAM;AAAE,YAAA,MAAM,EAAE;QACpB,SAAS,CAAC,IAAI,CAAC;QACf,UAAU,CAAC,MAAM,SAAS,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC;AAC1C,KAAC,EAAE,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;AAElB,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,mBAAmB,EAAA;AACrD,QAAAA,cAAA,CAAA,aAAA,CAAC,QAAQ,EACP,EAAA,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,IAAI,EACT,SAAS,EAAE,SAAS,EACR,YAAA,EAAA,CAAA,EAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAA,EAAA,EAAK,IAAI,CAAgB,cAAA,CAAA,EAClE,QAAQ,EACN,MAAM,IACJA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAC,EAAA,KAAK,EAAE,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,EAAM,GAAA,SAAS,EAAI,CAAA,KAElEA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAC,EAAA,KAAK,EAAE,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAM,GAAA,SAAS,EAAI,CAAA,CACpE,EAEH,OAAO,EAAE,UAAU,EACnB,CAAA,CACM;AAEd;;;;"}

package/dist/components/DataTable/components/ActionBar.cjs CHANGED Viewed

@@ -11,8 +11,8 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-const Container = styled__default.default.div.withConfig({ displayName: "vui--Container", componentId: "vui--1feqxrw" }) `display:grid;grid-template-columns:auto 1fr;align-items:center;position:absolute;top:0;left:0;right:0;z-index:50;height:${constants.headerCellHeight};background-color:white;`;
-const Content = styled__default.default.div.withConfig({ displayName: "vui--Content", componentId: "vui--dbz7t3" }) `width:100%;height:100%;display:flex;align-items:center;padding:0 0.5rem;border-bottom:1px solid ${index.theme.colors.neutral.grey.base};& > *{flex:1;}`;
+const Container = styled__default.default.div.withConfig({ displayName: "vui--Container", componentId: "vui--1qrfauk" }) `display:grid;grid-template-columns:auto 1fr;align-items:center;position:absolute;top:0;left:0;right:0;z-index:50;height:${constants.headerCellHeight};background-color:white;`;
+const Content = styled__default.default.div.withConfig({ displayName: "vui--Content", componentId: "vui--fy6vxi" }) `width:100%;height:100%;display:flex;align-items:center;padding:0 0.5rem;border-bottom:1px solid ${index.theme.colors.neutral.grey.base};& > *{flex:1;}`;
 function ActionBar({ selectionColumn, intersectionTargetRef, containerRef, children, }) {
     var _a;
     const [isSticky, setIsSticky] = React.useState(false);

package/dist/components/DataTable/components/ActionBar.js CHANGED Viewed

@@ -4,8 +4,8 @@ import { theme } from '../../../theme/index.js';
 import { renderHeader } from '../renderers/renderHeader.js';
 import { headerCellHeight } from '../constants.js';
-const Container = styled.div.withConfig({ displayName: "vui--Container", componentId: "vui--1feqxrw" }) `display:grid;grid-template-columns:auto 1fr;align-items:center;position:absolute;top:0;left:0;right:0;z-index:50;height:${headerCellHeight};background-color:white;`;
-const Content = styled.div.withConfig({ displayName: "vui--Content", componentId: "vui--dbz7t3" }) `width:100%;height:100%;display:flex;align-items:center;padding:0 0.5rem;border-bottom:1px solid ${theme.colors.neutral.grey.base};& > *{flex:1;}`;
+const Container = styled.div.withConfig({ displayName: "vui--Container", componentId: "vui--1qrfauk" }) `display:grid;grid-template-columns:auto 1fr;align-items:center;position:absolute;top:0;left:0;right:0;z-index:50;height:${headerCellHeight};background-color:white;`;
+const Content = styled.div.withConfig({ displayName: "vui--Content", componentId: "vui--fy6vxi" }) `width:100%;height:100%;display:flex;align-items:center;padding:0 0.5rem;border-bottom:1px solid ${theme.colors.neutral.grey.base};& > *{flex:1;}`;
 function ActionBar({ selectionColumn, intersectionTargetRef, containerRef, children, }) {
     var _a;
     const [isSticky, setIsSticky] = useState(false);

package/dist/components/DataTable/components/Cell.cjs CHANGED Viewed

@@ -11,7 +11,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-const Cell = styled__default.default.td.withConfig({ displayName: "vui--Cell", componentId: "vui--1oz46st" }) `display:flex;align-items:center;justify-content:${({ align = 'left' }) => alignmentToFlex.alignmentToFlex(align)};background-color:white;padding-bottom:var(--density);padding-top:var(--density);padding-left:${({ spacing = constants.defaultCellSpacing }) => index.theme.sizes[spacing]};padding-right:${({ spacing = constants.defaultCellSpacing }) => index.theme.sizes[spacing]};color:${index.theme.text.bodySmall.color};font-family:${index.theme.text.bodySmall.fontFamily};font-size:${index.theme.text.bodySmall.fontSize};font-style:${index.theme.text.bodySmall.fontStyle};font-weight:${index.theme.text.bodySmall.fontWeight};line-height:${index.theme.text.bodySmall.lineHeight};grid-column-end:${({ span = 1 }) => `span ${span}`};tfoot &{min-height:${constants.footerCellHeight};border-top:1px solid ${index.theme.colors.secondary.blue.base};background-color:${index.theme.colors.neutral.grey.lightest};}`;
+const Cell = styled__default.default.td.withConfig({ displayName: "vui--Cell", componentId: "vui--i59hqc" }) `display:flex;align-items:center;justify-content:${({ align = 'left' }) => alignmentToFlex.alignmentToFlex(align)};background-color:white;padding-bottom:var(--density);padding-top:var(--density);padding-left:${({ spacing = constants.defaultCellSpacing }) => index.theme.sizes[spacing]};padding-right:${({ spacing = constants.defaultCellSpacing }) => index.theme.sizes[spacing]};color:${index.theme.text.bodySmall.color};font-family:${index.theme.text.bodySmall.fontFamily};font-size:${index.theme.text.bodySmall.fontSize};font-style:${index.theme.text.bodySmall.fontStyle};font-weight:${index.theme.text.bodySmall.fontWeight};line-height:${index.theme.text.bodySmall.lineHeight};grid-column-end:${({ span = 1 }) => `span ${span}`};tfoot &{min-height:${constants.footerCellHeight};border-top:1px solid ${index.theme.colors.secondary.blue.base};background-color:${index.theme.colors.neutral.grey.lightest};}`;
 exports.Cell = Cell;
 //# sourceMappingURL=Cell.cjs.map

package/dist/components/DataTable/components/Cell.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Cell.cjs","sources":["../../../../src/components/DataTable/components/Cell.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { ColumnAlignment, ColumnSpacing } from '../types';\nimport { alignmentToFlex } from '../utils';\nimport { defaultCellSpacing, footerCellHeight } from '../constants';\n\nexport interface CellProps {\n align?: ColumnAlignment;\n spacing?: ColumnSpacing;\n span?: number;\n}\n\nexport const Cell = styled.td<CellProps>`\n display: flex;\n align-items: center;\n justify-content: ${({ align = 'left' }) => alignmentToFlex(align)};\n\n /* Styling /\n background-color: white;\n padding-bottom: var(--density);\n padding-top: var(--density);\n padding-left: ${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};\n padding-right: ${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};\n\n / Content /\n color: ${theme.text.bodySmall.color};\n font-family: ${theme.text.bodySmall.fontFamily};\n font-size: ${theme.text.bodySmall.fontSize};\n font-style: ${theme.text.bodySmall.fontStyle};\n font-weight: ${theme.text.bodySmall.fontWeight};\n line-height: ${theme.text.bodySmall.lineHeight};\n\n / Grid */\n grid-column-end: ${({ span = 1 }) => `span ${span}`};\n\n tfoot & {\n min-height: ${footerCellHeight};\n border-top: 1px solid ${theme.colors.secondary.blue.base};\n background-color: ${theme.colors.neutral.grey.lightest};\n }\n`;\n"],"names":["styled","alignmentToFlex","defaultCellSpacing","theme","footerCellHeight"],"mappings":";;;;;;;;;;;;;AAYO,MAAM,IAAI,GAAGA,uBAAM,CAAC,EAAE,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,~~cAAA~~,EAAA,CAAA,CAAA,CAAA,gDAAA,EAGR,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,KAAKC,+BAAe,CAAC,KAAK,CAAC,iGAMjD,CAAC,EAAE,OAAO,GAAGC,4BAAkB,EAAE,KAAKC,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CACzD,eAAA,EAAA,CAAC,EAAE,OAAO,GAAGD,4BAAkB,EAAE,KAAKC,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA,OAAA,EAGlEA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CACpB,aAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAA,WAAA,EACjCA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAA,YAAA,EAC5BA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAC7B,aAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAA,aAAA,EAC/BA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAG3B,iBAAA,EAAA,CAAC,EAAE,IAAI,GAAG,CAAC,EAAE,KAAK,CAAA,KAAA,EAAQ,IAAI,CAAA,CAAE,CAGnC,oBAAA,EAAAC,0BAAgB,CACN,sBAAA,EAAAD,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,kBAAA,EACpCA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;;;;"}
1	+ {"version":3,"file":"Cell.cjs","sources":["../../../../src/components/DataTable/components/Cell.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { ColumnAlignment, ColumnSpacing } from '../types';\nimport { alignmentToFlex } from '../utils';\nimport { defaultCellSpacing, footerCellHeight } from '../constants';\n\nexport interface CellProps {\n align?: ColumnAlignment;\n spacing?: ColumnSpacing;\n span?: number;\n}\n\nexport const Cell = styled.td<CellProps>`\n display: flex;\n align-items: center;\n justify-content: ${({ align = 'left' }) => alignmentToFlex(align)};\n\n /* Styling /\n background-color: white;\n padding-bottom: var(--density);\n padding-top: var(--density);\n padding-left: ${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};\n padding-right: ${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};\n\n / Content /\n color: ${theme.text.bodySmall.color};\n font-family: ${theme.text.bodySmall.fontFamily};\n font-size: ${theme.text.bodySmall.fontSize};\n font-style: ${theme.text.bodySmall.fontStyle};\n font-weight: ${theme.text.bodySmall.fontWeight};\n line-height: ${theme.text.bodySmall.lineHeight};\n\n / Grid */\n grid-column-end: ${({ span = 1 }) => `span ${span}`};\n\n tfoot & {\n min-height: ${footerCellHeight};\n border-top: 1px solid ${theme.colors.secondary.blue.base};\n background-color: ${theme.colors.neutral.grey.lightest};\n }\n`;\n"],"names":["styled","alignmentToFlex","defaultCellSpacing","theme","footerCellHeight"],"mappings":";;;;;;;;;;;;;AAYO,MAAM,IAAI,GAAGA,uBAAM,CAAC,EAAE,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,gDAAA,EAGR,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,KAAKC,+BAAe,CAAC,KAAK,CAAC,iGAMjD,CAAC,EAAE,OAAO,GAAGC,4BAAkB,EAAE,KAAKC,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CACzD,eAAA,EAAA,CAAC,EAAE,OAAO,GAAGD,4BAAkB,EAAE,KAAKC,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA,OAAA,EAGlEA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CACpB,aAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAA,WAAA,EACjCA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAA,YAAA,EAC5BA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAC7B,aAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAA,aAAA,EAC/BA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAG3B,iBAAA,EAAA,CAAC,EAAE,IAAI,GAAG,CAAC,EAAE,KAAK,CAAA,KAAA,EAAQ,IAAI,CAAA,CAAE,CAGnC,oBAAA,EAAAC,0BAAgB,CACN,sBAAA,EAAAD,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,kBAAA,EACpCA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;;;;"}

package/dist/components/DataTable/components/Cell.js CHANGED Viewed

@@ -5,7 +5,7 @@ import '../types.js';
 import 'react';
 import { defaultCellSpacing, footerCellHeight } from '../constants.js';
-const Cell = styled.td.withConfig({ displayName: "vui--Cell", componentId: "vui--1oz46st" }) `display:flex;align-items:center;justify-content:${({ align = 'left' }) => alignmentToFlex(align)};background-color:white;padding-bottom:var(--density);padding-top:var(--density);padding-left:${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};padding-right:${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};color:${theme.text.bodySmall.color};font-family:${theme.text.bodySmall.fontFamily};font-size:${theme.text.bodySmall.fontSize};font-style:${theme.text.bodySmall.fontStyle};font-weight:${theme.text.bodySmall.fontWeight};line-height:${theme.text.bodySmall.lineHeight};grid-column-end:${({ span = 1 }) => `span ${span}`};tfoot &{min-height:${footerCellHeight};border-top:1px solid ${theme.colors.secondary.blue.base};background-color:${theme.colors.neutral.grey.lightest};}`;
+const Cell = styled.td.withConfig({ displayName: "vui--Cell", componentId: "vui--i59hqc" }) `display:flex;align-items:center;justify-content:${({ align = 'left' }) => alignmentToFlex(align)};background-color:white;padding-bottom:var(--density);padding-top:var(--density);padding-left:${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};padding-right:${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};color:${theme.text.bodySmall.color};font-family:${theme.text.bodySmall.fontFamily};font-size:${theme.text.bodySmall.fontSize};font-style:${theme.text.bodySmall.fontStyle};font-weight:${theme.text.bodySmall.fontWeight};line-height:${theme.text.bodySmall.lineHeight};grid-column-end:${({ span = 1 }) => `span ${span}`};tfoot &{min-height:${footerCellHeight};border-top:1px solid ${theme.colors.secondary.blue.base};background-color:${theme.colors.neutral.grey.lightest};}`;
 export { Cell };
 //# sourceMappingURL=Cell.js.map

package/dist/components/DataTable/components/Cell.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Cell.js","sources":["../../../../src/components/DataTable/components/Cell.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { ColumnAlignment, ColumnSpacing } from '../types';\nimport { alignmentToFlex } from '../utils';\nimport { defaultCellSpacing, footerCellHeight } from '../constants';\n\nexport interface CellProps {\n align?: ColumnAlignment;\n spacing?: ColumnSpacing;\n span?: number;\n}\n\nexport const Cell = styled.td<CellProps>`\n display: flex;\n align-items: center;\n justify-content: ${({ align = 'left' }) => alignmentToFlex(align)};\n\n /* Styling /\n background-color: white;\n padding-bottom: var(--density);\n padding-top: var(--density);\n padding-left: ${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};\n padding-right: ${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};\n\n / Content /\n color: ${theme.text.bodySmall.color};\n font-family: ${theme.text.bodySmall.fontFamily};\n font-size: ${theme.text.bodySmall.fontSize};\n font-style: ${theme.text.bodySmall.fontStyle};\n font-weight: ${theme.text.bodySmall.fontWeight};\n line-height: ${theme.text.bodySmall.lineHeight};\n\n / Grid */\n grid-column-end: ${({ span = 1 }) => `span ${span}`};\n\n tfoot & {\n min-height: ${footerCellHeight};\n border-top: 1px solid ${theme.colors.secondary.blue.base};\n background-color: ${theme.colors.neutral.grey.lightest};\n }\n`;\n"],"names":[],"mappings":";;;;;;;AAYO,MAAM,IAAI,GAAG,MAAM,CAAC,EAAE,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,~~cAAA~~,EAAA,CAAA,CAAA,CAAA,gDAAA,EAGR,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,KAAK,eAAe,CAAC,KAAK,CAAC,iGAMjD,CAAC,EAAE,OAAO,GAAG,kBAAkB,EAAE,KAAK,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CACzD,eAAA,EAAA,CAAC,EAAE,OAAO,GAAG,kBAAkB,EAAE,KAAK,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA,OAAA,EAGlE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CACpB,aAAA,EAAA,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAA,WAAA,EACjC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAA,YAAA,EAC5B,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAC7B,aAAA,EAAA,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAA,aAAA,EAC/B,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAG3B,iBAAA,EAAA,CAAC,EAAE,IAAI,GAAG,CAAC,EAAE,KAAK,CAAA,KAAA,EAAQ,IAAI,CAAA,CAAE,CAGnC,oBAAA,EAAA,gBAAgB,CACN,sBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,kBAAA,EACpC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;;;;"}
1	+ {"version":3,"file":"Cell.js","sources":["../../../../src/components/DataTable/components/Cell.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { ColumnAlignment, ColumnSpacing } from '../types';\nimport { alignmentToFlex } from '../utils';\nimport { defaultCellSpacing, footerCellHeight } from '../constants';\n\nexport interface CellProps {\n align?: ColumnAlignment;\n spacing?: ColumnSpacing;\n span?: number;\n}\n\nexport const Cell = styled.td<CellProps>`\n display: flex;\n align-items: center;\n justify-content: ${({ align = 'left' }) => alignmentToFlex(align)};\n\n /* Styling /\n background-color: white;\n padding-bottom: var(--density);\n padding-top: var(--density);\n padding-left: ${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};\n padding-right: ${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};\n\n / Content /\n color: ${theme.text.bodySmall.color};\n font-family: ${theme.text.bodySmall.fontFamily};\n font-size: ${theme.text.bodySmall.fontSize};\n font-style: ${theme.text.bodySmall.fontStyle};\n font-weight: ${theme.text.bodySmall.fontWeight};\n line-height: ${theme.text.bodySmall.lineHeight};\n\n / Grid */\n grid-column-end: ${({ span = 1 }) => `span ${span}`};\n\n tfoot & {\n min-height: ${footerCellHeight};\n border-top: 1px solid ${theme.colors.secondary.blue.base};\n background-color: ${theme.colors.neutral.grey.lightest};\n }\n`;\n"],"names":[],"mappings":";;;;;;;AAYO,MAAM,IAAI,GAAG,MAAM,CAAC,EAAE,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,gDAAA,EAGR,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,KAAK,eAAe,CAAC,KAAK,CAAC,iGAMjD,CAAC,EAAE,OAAO,GAAG,kBAAkB,EAAE,KAAK,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CACzD,eAAA,EAAA,CAAC,EAAE,OAAO,GAAG,kBAAkB,EAAE,KAAK,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA,OAAA,EAGlE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CACpB,aAAA,EAAA,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAA,WAAA,EACjC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAA,YAAA,EAC5B,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAC7B,aAAA,EAAA,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAA,aAAA,EAC/B,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAG3B,iBAAA,EAAA,CAAC,EAAE,IAAI,GAAG,CAAC,EAAE,KAAK,CAAA,KAAA,EAAQ,IAAI,CAAA,CAAE,CAGnC,oBAAA,EAAA,gBAAgB,CACN,sBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,kBAAA,EACpC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;;;;"}

package/dist/components/DataTable/components/ColumnDivider.cjs CHANGED Viewed

@@ -9,7 +9,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-const ResizerBar = styled__default.default.div.withConfig({ displayName: "vui--ResizerBar", componentId: "vui--115ilx" }) `position:absolute;right:0;top:37.5%;width:1px;background:${index.theme.colors.neutral.grey.dark};min-height:25%;cursor:col-resize;user-select:none;&::before{content:'';position:absolute;top:-150%;left:0;width:12px;min-height:400%;z-index:1;transform:translateX(-6px);}`;
+const ResizerBar = styled__default.default.div.withConfig({ displayName: "vui--ResizerBar", componentId: "vui--1od95ba" }) `position:absolute;right:0;top:37.5%;width:1px;background:${index.theme.colors.neutral.grey.dark};min-height:25%;cursor:col-resize;user-select:none;&::before{content:'';position:absolute;top:-150%;left:0;width:12px;min-height:400%;z-index:1;transform:translateX(-6px);}`;
 const ColumnDivider = ({ columnId, setColumnWidth, minWidth }) => {
     const ref = React.createRef();
     const padding = 24;

package/dist/components/DataTable/components/ColumnDivider.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColumnDivider.cjs","sources":["../../../../src/components/DataTable/components/ColumnDivider.tsx"],"sourcesContent":["import React, { createRef } from 'react';\nimport styled from 'styled-components';\nimport { ColumnId, ColumnWidthHandler } from '../types';\nimport { theme } from '../../../theme';\n\nexport type ColumnDividerProps = {\n columnId: ColumnId;\n setColumnWidth?: ColumnWidthHandler;\n minWidth?: number;\n};\n\nexport type CalculateWidthProps = {\n event: MouseEvent;\n};\n\nexport const ResizerBar = styled.div`\n position: absolute;\n right: 0;\n top: 37.5%;\n width: 1px;\n background: ${theme.colors.neutral.grey.dark};\n min-height: 25%;\n cursor: col-resize;\n user-select: none;\n\n &::before {\n content: '';\n position: absolute;\n top: -150%;\n left: 0;\n width: 12px;\n min-height: 400%;\n z-index: 1;\n transform: translateX(-6px);\n }\n`;\n\nexport const ColumnDivider = ({ columnId, setColumnWidth, minWidth }: ColumnDividerProps) => {\n const ref = createRef<HTMLDivElement>();\n const padding = 24;\n\n const mouseMove = (event: MouseEvent) => {\n const { minTranslate, dragDivider, dragInitX } = window.tableHeaders;\n const translate = Math.max(event.clientX - (dragInitX \|\| 0), minTranslate \|\| 0);\n\n dragDivider!.parentElement!.parentElement!.classList.add('hideHeaderDetails');\n dragDivider!.style.transform = `translateX(${translate}px)`;\n };\n\n const minTranslate = () => {\n const { parentElement } = window.tableHeaders.dragDivider!;\n const contentWidth = parentElement!\n .querySelector('.headerContent')!\n .getBoundingClientRect().width;\n\n const currWidth = parentElement!.getBoundingClientRect().width;\n\n return contentWidth - currWidth + padding;\n };\n\n const calculateWidth = ({ event }: CalculateWidthProps) => {\n const { dragInitX, dragDivider } = window.tableHeaders;\n const { parentElement } = dragDivider!;\n const initWidth = parentElement?.getBoundingClientRect().width;\n const contentWidth = parentElement!\n .querySelector('.headerContent')!\n .getBoundingClientRect().width;\n\n const finalWidth = minWidth && contentWidth < minWidth ? minWidth : contentWidth;\n\n const deltaX = (event.clientX \|\| 0) - (dragInitX \|\| 0);\n\n return Math.max((initWidth \|\| 0) + deltaX, finalWidth + padding);\n };\n\n const mouseUp = (event: MouseEvent) => {\n window.removeEventListener('mouseup', mouseUp);\n window.removeEventListener('dragend', mouseUp);\n window.removeEventListener('mousemove', mouseMove);\n window.removeEventListener('drag', mouseMove);\n setColumnWidth?.({ columnId, width: calculateWidth({ event }) });\n if (window.tableHeaders) {\n window.tableHeaders.dragDivider!.style.transform = 'translateX(0)';\n window.tableHeaders.dragDivider!.parentElement!.style.justifyContent = '';\n window.tableHeaders.dragInitX = undefined;\n window.tableHeaders.minTranslate = undefined;\n window.tableHeaders.dragDivider!.parentElement!.parentElement!.classList.remove(\n 'hideHeaderDetails',\n );\n }\n };\n\n const trackMouseStart: React.MouseEventHandler<HTMLDivElement> = (event) => {\n if (event.button !== 0 && event.type !== 'dragstart') return;\n window.tableHeaders = {\n dragInitX: event.clientX, // Using global prop instead of react prop for performance\n dragDivider: ref.current,\n };\n window.tableHeaders.minTranslate = minTranslate();\n\n window.addEventListener('mouseup', mouseUp);\n window.addEventListener('dragend', mouseUp);\n window.addEventListener('mousemove', mouseMove);\n window.addEventListener('drag', mouseMove);\n };\n\n return (\n <ResizerBar\n ref={ref}\n className=\"th-divider\"\n onMouseDown={trackMouseStart}\n onDragStart={trackMouseStart}\n />\n );\n};\n"],"names":["styled","theme","createRef","React"],"mappings":";;;;;;;;;;;AAea,MAAA,UAAU,GAAGA,uBAAM,CAAC,GAAG,CAKpB,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,~~aAAA~~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"}
1	+ {"version":3,"file":"ColumnDivider.cjs","sources":["../../../../src/components/DataTable/components/ColumnDivider.tsx"],"sourcesContent":["import React, { createRef } from 'react';\nimport styled from 'styled-components';\nimport { ColumnId, ColumnWidthHandler } from '../types';\nimport { theme } from '../../../theme';\n\nexport type ColumnDividerProps = {\n columnId: ColumnId;\n setColumnWidth?: ColumnWidthHandler;\n minWidth?: number;\n};\n\nexport type CalculateWidthProps = {\n event: MouseEvent;\n};\n\nexport const ResizerBar = styled.div`\n position: absolute;\n right: 0;\n top: 37.5%;\n width: 1px;\n background: ${theme.colors.neutral.grey.dark};\n min-height: 25%;\n cursor: col-resize;\n user-select: none;\n\n &::before {\n content: '';\n position: absolute;\n top: -150%;\n left: 0;\n width: 12px;\n min-height: 400%;\n z-index: 1;\n transform: translateX(-6px);\n }\n`;\n\nexport const ColumnDivider = ({ columnId, setColumnWidth, minWidth }: ColumnDividerProps) => {\n const ref = createRef<HTMLDivElement>();\n const padding = 24;\n\n const mouseMove = (event: MouseEvent) => {\n const { minTranslate, dragDivider, dragInitX } = window.tableHeaders;\n const translate = Math.max(event.clientX - (dragInitX \|\| 0), minTranslate \|\| 0);\n\n dragDivider!.parentElement!.parentElement!.classList.add('hideHeaderDetails');\n dragDivider!.style.transform = `translateX(${translate}px)`;\n };\n\n const minTranslate = () => {\n const { parentElement } = window.tableHeaders.dragDivider!;\n const contentWidth = parentElement!\n .querySelector('.headerContent')!\n .getBoundingClientRect().width;\n\n const currWidth = parentElement!.getBoundingClientRect().width;\n\n return contentWidth - currWidth + padding;\n };\n\n const calculateWidth = ({ event }: CalculateWidthProps) => {\n const { dragInitX, dragDivider } = window.tableHeaders;\n const { parentElement } = dragDivider!;\n const initWidth = parentElement?.getBoundingClientRect().width;\n const contentWidth = parentElement!\n .querySelector('.headerContent')!\n .getBoundingClientRect().width;\n\n const finalWidth = minWidth && contentWidth < minWidth ? minWidth : contentWidth;\n\n const deltaX = (event.clientX \|\| 0) - (dragInitX \|\| 0);\n\n return Math.max((initWidth \|\| 0) + deltaX, finalWidth + padding);\n };\n\n const mouseUp = (event: MouseEvent) => {\n window.removeEventListener('mouseup', mouseUp);\n window.removeEventListener('dragend', mouseUp);\n window.removeEventListener('mousemove', mouseMove);\n window.removeEventListener('drag', mouseMove);\n setColumnWidth?.({ columnId, width: calculateWidth({ event }) });\n if (window.tableHeaders) {\n window.tableHeaders.dragDivider!.style.transform = 'translateX(0)';\n window.tableHeaders.dragDivider!.parentElement!.style.justifyContent = '';\n window.tableHeaders.dragInitX = undefined;\n window.tableHeaders.minTranslate = undefined;\n window.tableHeaders.dragDivider!.parentElement!.parentElement!.classList.remove(\n 'hideHeaderDetails',\n );\n }\n };\n\n const trackMouseStart: React.MouseEventHandler<HTMLDivElement> = (event) => {\n if (event.button !== 0 && event.type !== 'dragstart') return;\n window.tableHeaders = {\n dragInitX: event.clientX, // Using global prop instead of react prop for performance\n dragDivider: ref.current,\n };\n window.tableHeaders.minTranslate = minTranslate();\n\n window.addEventListener('mouseup', mouseUp);\n window.addEventListener('dragend', mouseUp);\n window.addEventListener('mousemove', mouseMove);\n window.addEventListener('drag', mouseMove);\n };\n\n return (\n <ResizerBar\n ref={ref}\n className=\"th-divider\"\n onMouseDown={trackMouseStart}\n onDragStart={trackMouseStart}\n />\n );\n};\n"],"names":["styled","theme","createRef","React"],"mappings":"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"}

package/dist/components/DataTable/components/ColumnDivider.js CHANGED Viewed

@@ -2,7 +2,7 @@ import React__default, { createRef } from 'react';
 import styled from 'styled-components';
 import { theme } from '../../../theme/index.js';
-const ResizerBar = styled.div.withConfig({ displayName: "vui--ResizerBar", componentId: "vui--115ilx" }) `position:absolute;right:0;top:37.5%;width:1px;background:${theme.colors.neutral.grey.dark};min-height:25%;cursor:col-resize;user-select:none;&::before{content:'';position:absolute;top:-150%;left:0;width:12px;min-height:400%;z-index:1;transform:translateX(-6px);}`;
+const ResizerBar = styled.div.withConfig({ displayName: "vui--ResizerBar", componentId: "vui--1od95ba" }) `position:absolute;right:0;top:37.5%;width:1px;background:${theme.colors.neutral.grey.dark};min-height:25%;cursor:col-resize;user-select:none;&::before{content:'';position:absolute;top:-150%;left:0;width:12px;min-height:400%;z-index:1;transform:translateX(-6px);}`;
 const ColumnDivider = ({ columnId, setColumnWidth, minWidth }) => {
     const ref = createRef();
     const padding = 24;

package/dist/components/DataTable/components/ColumnDivider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColumnDivider.js","sources":["../../../../src/components/DataTable/components/ColumnDivider.tsx"],"sourcesContent":["import React, { createRef } from 'react';\nimport styled from 'styled-components';\nimport { ColumnId, ColumnWidthHandler } from '../types';\nimport { theme } from '../../../theme';\n\nexport type ColumnDividerProps = {\n columnId: ColumnId;\n setColumnWidth?: ColumnWidthHandler;\n minWidth?: number;\n};\n\nexport type CalculateWidthProps = {\n event: MouseEvent;\n};\n\nexport const ResizerBar = styled.div`\n position: absolute;\n right: 0;\n top: 37.5%;\n width: 1px;\n background: ${theme.colors.neutral.grey.dark};\n min-height: 25%;\n cursor: col-resize;\n user-select: none;\n\n &::before {\n content: '';\n position: absolute;\n top: -150%;\n left: 0;\n width: 12px;\n min-height: 400%;\n z-index: 1;\n transform: translateX(-6px);\n }\n`;\n\nexport const ColumnDivider = ({ columnId, setColumnWidth, minWidth }: ColumnDividerProps) => {\n const ref = createRef<HTMLDivElement>();\n const padding = 24;\n\n const mouseMove = (event: MouseEvent) => {\n const { minTranslate, dragDivider, dragInitX } = window.tableHeaders;\n const translate = Math.max(event.clientX - (dragInitX \|\| 0), minTranslate \|\| 0);\n\n dragDivider!.parentElement!.parentElement!.classList.add('hideHeaderDetails');\n dragDivider!.style.transform = `translateX(${translate}px)`;\n };\n\n const minTranslate = () => {\n const { parentElement } = window.tableHeaders.dragDivider!;\n const contentWidth = parentElement!\n .querySelector('.headerContent')!\n .getBoundingClientRect().width;\n\n const currWidth = parentElement!.getBoundingClientRect().width;\n\n return contentWidth - currWidth + padding;\n };\n\n const calculateWidth = ({ event }: CalculateWidthProps) => {\n const { dragInitX, dragDivider } = window.tableHeaders;\n const { parentElement } = dragDivider!;\n const initWidth = parentElement?.getBoundingClientRect().width;\n const contentWidth = parentElement!\n .querySelector('.headerContent')!\n .getBoundingClientRect().width;\n\n const finalWidth = minWidth && contentWidth < minWidth ? minWidth : contentWidth;\n\n const deltaX = (event.clientX \|\| 0) - (dragInitX \|\| 0);\n\n return Math.max((initWidth \|\| 0) + deltaX, finalWidth + padding);\n };\n\n const mouseUp = (event: MouseEvent) => {\n window.removeEventListener('mouseup', mouseUp);\n window.removeEventListener('dragend', mouseUp);\n window.removeEventListener('mousemove', mouseMove);\n window.removeEventListener('drag', mouseMove);\n setColumnWidth?.({ columnId, width: calculateWidth({ event }) });\n if (window.tableHeaders) {\n window.tableHeaders.dragDivider!.style.transform = 'translateX(0)';\n window.tableHeaders.dragDivider!.parentElement!.style.justifyContent = '';\n window.tableHeaders.dragInitX = undefined;\n window.tableHeaders.minTranslate = undefined;\n window.tableHeaders.dragDivider!.parentElement!.parentElement!.classList.remove(\n 'hideHeaderDetails',\n );\n }\n };\n\n const trackMouseStart: React.MouseEventHandler<HTMLDivElement> = (event) => {\n if (event.button !== 0 && event.type !== 'dragstart') return;\n window.tableHeaders = {\n dragInitX: event.clientX, // Using global prop instead of react prop for performance\n dragDivider: ref.current,\n };\n window.tableHeaders.minTranslate = minTranslate();\n\n window.addEventListener('mouseup', mouseUp);\n window.addEventListener('dragend', mouseUp);\n window.addEventListener('mousemove', mouseMove);\n window.addEventListener('drag', mouseMove);\n };\n\n return (\n <ResizerBar\n ref={ref}\n className=\"th-divider\"\n onMouseDown={trackMouseStart}\n onDragStart={trackMouseStart}\n />\n );\n};\n"],"names":["React"],"mappings":";;;;AAea,MAAA,UAAU,GAAG,MAAM,CAAC,GAAG,CAKpB,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,~~aAAA~~,EAAA,CAAA,CAAA,CAAA,yDAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AAiBvC,MAAM,aAAa,GAAG,CAAC,EAAE,QAAQ,EAAE,cAAc,EAAE,QAAQ,EAAsB,KAAI;AAC1F,IAAA,MAAM,GAAG,GAAG,SAAS,EAAkB;IACvC,MAAM,OAAO,GAAG,EAAE;AAElB,IAAA,MAAM,SAAS,GAAG,CAAC,KAAiB,KAAI;QACtC,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,YAAY;QACpE,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,IAAI,SAAS,IAAI,CAAC,CAAC,EAAE,YAAY,IAAI,CAAC,CAAC;QAE/E,WAAY,CAAC,aAAc,CAAC,aAAc,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC;QAC7E,WAAY,CAAC,KAAK,CAAC,SAAS,GAAG,CAAc,WAAA,EAAA,SAAS,KAAK;AAC7D,KAAC;IAED,MAAM,YAAY,GAAG,MAAK;QACxB,MAAM,EAAE,aAAa,EAAE,GAAG,MAAM,CAAC,YAAY,CAAC,WAAY;QAC1D,MAAM,YAAY,GAAG;aAClB,aAAa,CAAC,gBAAgB;aAC9B,qBAAqB,EAAE,CAAC,KAAK;QAEhC,MAAM,SAAS,GAAG,aAAc,CAAC,qBAAqB,EAAE,CAAC,KAAK;AAE9D,QAAA,OAAO,YAAY,GAAG,SAAS,GAAG,OAAO;AAC3C,KAAC;AAED,IAAA,MAAM,cAAc,GAAG,CAAC,EAAE,KAAK,EAAuB,KAAI;QACxD,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,MAAM,CAAC,YAAY;AACtD,QAAA,MAAM,EAAE,aAAa,EAAE,GAAG,WAAY;QACtC,MAAM,SAAS,GAAG,aAAa,KAAb,IAAA,IAAA,aAAa,KAAb,SAAA,GAAA,SAAA,GAAA,aAAa,CAAE,qBAAqB,EAAG,CAAA,KAAK;QAC9D,MAAM,YAAY,GAAG;aAClB,aAAa,CAAC,gBAAgB;aAC9B,qBAAqB,EAAE,CAAC,KAAK;AAEhC,QAAA,MAAM,UAAU,GAAG,QAAQ,IAAI,YAAY,GAAG,QAAQ,GAAG,QAAQ,GAAG,YAAY;AAEhF,QAAA,MAAM,MAAM,GAAG,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,KAAK,SAAS,IAAI,CAAC,CAAC;AAEtD,QAAA,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,SAAS,IAAI,CAAC,IAAI,MAAM,EAAE,UAAU,GAAG,OAAO,CAAC;AAClE,KAAC;AAED,IAAA,MAAM,OAAO,GAAG,CAAC,KAAiB,KAAI;AACpC,QAAA,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,OAAO,CAAC;AAC9C,QAAA,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,OAAO,CAAC;AAC9C,QAAA,MAAM,CAAC,mBAAmB,CAAC,WAAW,EAAE,SAAS,CAAC;AAClD,QAAA,MAAM,CAAC,mBAAmB,CAAC,MAAM,EAAE,SAAS,CAAC;AAC7C,QAAA,cAAc,aAAd,cAAc,KAAA,SAAA,GAAA,SAAA,GAAd,cAAc,CAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,cAAc,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC;QAChE,IAAI,MAAM,CAAC,YAAY,EAAE;YACvB,MAAM,CAAC,YAAY,CAAC,WAAY,CAAC,KAAK,CAAC,SAAS,GAAG,eAAe;AAClE,YAAA,MAAM,CAAC,YAAY,CAAC,WAAY,CAAC,aAAc,CAAC,KAAK,CAAC,cAAc,GAAG,EAAE;AACzE,YAAA,MAAM,CAAC,YAAY,CAAC,SAAS,GAAG,SAAS;AACzC,YAAA,MAAM,CAAC,YAAY,CAAC,YAAY,GAAG,SAAS;AAC5C,YAAA,MAAM,CAAC,YAAY,CAAC,WAAY,CAAC,aAAc,CAAC,aAAc,CAAC,SAAS,CAAC,MAAM,CAC7E,mBAAmB,CACpB;AACF;AACH,KAAC;AAED,IAAA,MAAM,eAAe,GAA4C,CAAC,KAAK,KAAI;QACzE,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,WAAW;YAAE;QACtD,MAAM,CAAC,YAAY,GAAG;YACpB,SAAS,EAAE,KAAK,CAAC,OAAO;YACxB,WAAW,EAAE,GAAG,CAAC,OAAO;SACzB;AACD,QAAA,MAAM,CAAC,YAAY,CAAC,YAAY,GAAG,YAAY,EAAE;AAEjD,QAAA,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,OAAO,CAAC;AAC3C,QAAA,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,OAAO,CAAC;AAC3C,QAAA,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,SAAS,CAAC;AAC/C,QAAA,MAAM,CAAC,gBAAgB,CAAC,MAAM,EAAE,SAAS,CAAC;AAC5C,KAAC;IAED,QACEA,6BAAC,UAAU,EAAA,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAC,YAAY,EACtB,WAAW,EAAE,eAAe,EAC5B,WAAW,EAAE,eAAe,EAC5B,CAAA;AAEN;;;;"}
1	+ {"version":3,"file":"ColumnDivider.js","sources":["../../../../src/components/DataTable/components/ColumnDivider.tsx"],"sourcesContent":["import React, { createRef } from 'react';\nimport styled from 'styled-components';\nimport { ColumnId, ColumnWidthHandler } from '../types';\nimport { theme } from '../../../theme';\n\nexport type ColumnDividerProps = {\n columnId: ColumnId;\n setColumnWidth?: ColumnWidthHandler;\n minWidth?: number;\n};\n\nexport type CalculateWidthProps = {\n event: MouseEvent;\n};\n\nexport const ResizerBar = styled.div`\n position: absolute;\n right: 0;\n top: 37.5%;\n width: 1px;\n background: ${theme.colors.neutral.grey.dark};\n min-height: 25%;\n cursor: col-resize;\n user-select: none;\n\n &::before {\n content: '';\n position: absolute;\n top: -150%;\n left: 0;\n width: 12px;\n min-height: 400%;\n z-index: 1;\n transform: translateX(-6px);\n }\n`;\n\nexport const ColumnDivider = ({ columnId, setColumnWidth, minWidth }: ColumnDividerProps) => {\n const ref = createRef<HTMLDivElement>();\n const padding = 24;\n\n const mouseMove = (event: MouseEvent) => {\n const { minTranslate, dragDivider, dragInitX } = window.tableHeaders;\n const translate = Math.max(event.clientX - (dragInitX \|\| 0), minTranslate \|\| 0);\n\n dragDivider!.parentElement!.parentElement!.classList.add('hideHeaderDetails');\n dragDivider!.style.transform = `translateX(${translate}px)`;\n };\n\n const minTranslate = () => {\n const { parentElement } = window.tableHeaders.dragDivider!;\n const contentWidth = parentElement!\n .querySelector('.headerContent')!\n .getBoundingClientRect().width;\n\n const currWidth = parentElement!.getBoundingClientRect().width;\n\n return contentWidth - currWidth + padding;\n };\n\n const calculateWidth = ({ event }: CalculateWidthProps) => {\n const { dragInitX, dragDivider } = window.tableHeaders;\n const { parentElement } = dragDivider!;\n const initWidth = parentElement?.getBoundingClientRect().width;\n const contentWidth = parentElement!\n .querySelector('.headerContent')!\n .getBoundingClientRect().width;\n\n const finalWidth = minWidth && contentWidth < minWidth ? minWidth : contentWidth;\n\n const deltaX = (event.clientX \|\| 0) - (dragInitX \|\| 0);\n\n return Math.max((initWidth \|\| 0) + deltaX, finalWidth + padding);\n };\n\n const mouseUp = (event: MouseEvent) => {\n window.removeEventListener('mouseup', mouseUp);\n window.removeEventListener('dragend', mouseUp);\n window.removeEventListener('mousemove', mouseMove);\n window.removeEventListener('drag', mouseMove);\n setColumnWidth?.({ columnId, width: calculateWidth({ event }) });\n if (window.tableHeaders) {\n window.tableHeaders.dragDivider!.style.transform = 'translateX(0)';\n window.tableHeaders.dragDivider!.parentElement!.style.justifyContent = '';\n window.tableHeaders.dragInitX = undefined;\n window.tableHeaders.minTranslate = undefined;\n window.tableHeaders.dragDivider!.parentElement!.parentElement!.classList.remove(\n 'hideHeaderDetails',\n );\n }\n };\n\n const trackMouseStart: React.MouseEventHandler<HTMLDivElement> = (event) => {\n if (event.button !== 0 && event.type !== 'dragstart') return;\n window.tableHeaders = {\n dragInitX: event.clientX, // Using global prop instead of react prop for performance\n dragDivider: ref.current,\n };\n window.tableHeaders.minTranslate = minTranslate();\n\n window.addEventListener('mouseup', mouseUp);\n window.addEventListener('dragend', mouseUp);\n window.addEventListener('mousemove', mouseMove);\n window.addEventListener('drag', mouseMove);\n };\n\n return (\n <ResizerBar\n ref={ref}\n className=\"th-divider\"\n onMouseDown={trackMouseStart}\n onDragStart={trackMouseStart}\n />\n );\n};\n"],"names":["React"],"mappings":"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"}

package/dist/components/DataTable/components/ColumnHeader.cjs CHANGED Viewed

@@ -7,12 +7,12 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-const SortIndicator = styled__default.default.div.withConfig({ displayName: "vui--SortIndicator", componentId: "vui--o7masx" }) `width:20px;height:20px;display:flex;align-items:center;justify-content:center;background-color:white;color:${index.theme.colors.neutral.ink.lightest};`;
-const HeaderContent = styled__default.default.span.withConfig({ displayName: "vui--HeaderContent", componentId: "vui--vlccds" }) `display:flex;height:28px;align-items:center;gap:4px;white-space:nowrap;color:${index.theme.text.headingTable.color};font-family:${index.theme.text.headingTable.fontFamily};font-size:${index.theme.text.headingTable.fontSize};font-style:${index.theme.text.headingTable.fontStyle};font-weight:${index.theme.text.headingTable.fontWeight};line-height:${index.theme.text.headingTable.lineHeight};`;
+const SortIndicator = styled__default.default.div.withConfig({ displayName: "vui--SortIndicator", componentId: "vui--1itlaj6" }) `width:20px;height:20px;display:flex;align-items:center;justify-content:center;background-color:white;color:${index.theme.colors.neutral.ink.lightest};`;
+const HeaderContent = styled__default.default.span.withConfig({ displayName: "vui--HeaderContent", componentId: "vui--1bvlb4j" }) `display:flex;height:28px;align-items:center;gap:4px;white-space:nowrap;color:${index.theme.text.headingTable.color};font-family:${index.theme.text.headingTable.fontFamily};font-size:${index.theme.text.headingTable.fontSize};font-style:${index.theme.text.headingTable.fontStyle};font-weight:${index.theme.text.headingTable.fontWeight};line-height:${index.theme.text.headingTable.lineHeight};`;
 const ClickableHeaderContent = styled__default.default(HeaderContent).attrs(() => ({
     as: 'button',
     type: 'button',
-})).withConfig({ displayName: "vui--ClickableHeaderContent", componentId: "vui--xbox8h" }) `appearance:none;padding:0;border:0;border-radius:4px;background-color:transparent;&:not(:disabled):hover{cursor:pointer;}&:hover ${SortIndicator}{background-color:${index.theme.colors.neutral.grey.light};color:${index.theme.colors.neutral.ink.base};}&:focus-visible{outline:0;box-shadow:0px 0px 0px 2px ${index.theme.colors.secondary.blue.light};}`;
+})).withConfig({ displayName: "vui--ClickableHeaderContent", componentId: "vui--mrmldg" }) `appearance:none;padding:0;border:0;border-radius:4px;background-color:transparent;&:not(:disabled):hover{cursor:pointer;}&:hover ${SortIndicator}{background-color:${index.theme.colors.neutral.grey.light};color:${index.theme.colors.neutral.ink.base};}&:focus-visible{outline:0;box-shadow:0px 0px 0px 2px ${index.theme.colors.secondary.blue.light};}`;
 exports.ClickableHeaderContent = ClickableHeaderContent;
 exports.HeaderContent = HeaderContent;

package/dist/components/DataTable/components/ColumnHeader.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColumnHeader.cjs","sources":["../../../../src/components/DataTable/components/ColumnHeader.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nexport const SortIndicator = styled.div`\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: white;\n color: ${theme.colors.neutral.ink.lightest};\n`;\n\nexport const HeaderContent = styled.span`\n display: flex;\n height: 28px;\n align-items: center;\n gap: 4px;\n white-space: nowrap;\n\n color: ${theme.text.headingTable.color};\n font-family: ${theme.text.headingTable.fontFamily};\n font-size: ${theme.text.headingTable.fontSize};\n font-style: ${theme.text.headingTable.fontStyle};\n font-weight: ${theme.text.headingTable.fontWeight};\n line-height: ${theme.text.headingTable.lineHeight};\n`;\n\nexport const ClickableHeaderContent = styled(HeaderContent).attrs(() => ({\n as: 'button',\n type: 'button',\n}))`\n appearance: none;\n padding: 0;\n border: 0;\n border-radius: 4px;\n background-color: transparent;\n\n &:not(:disabled):hover {\n cursor: pointer;\n }\n\n &:hover ${SortIndicator} {\n background-color: ${theme.colors.neutral.grey.light};\n color: ${theme.colors.neutral.ink.base};\n }\n\n &:focus-visible {\n outline: 0;\n box-shadow: 0px 0px 0px 2px ${theme.colors.secondary.blue.light};\n }\n`;\n"],"names":["styled","theme"],"mappings":";;;;;;;;;AAGa,MAAA,aAAa,GAAGA,uBAAM,CAAC,GAAG,CAO5B,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,~~aAAA~~,EAAA,CAAA,CAAA,CAAA,2GAAA,EAAAC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ;AAG/B,MAAA,aAAa,GAAGD,uBAAM,CAAC,IAAI,CAO7B,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,~~aAAA~~,EAAA,CAAA,CAAA,CAAA,6EAAA,EAAAC,WAAK,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAA,aAAA,EACvBA,WAAK,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAA,WAAA,EACpCA,WAAK,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAC/B,YAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,CAChC,aAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAA,aAAA,EAClCA,WAAK,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAA,CAAA;AAG5C,MAAM,sBAAsB,GAAGD,uBAAM,CAAC,aAAa,CAAC,CAAC,KAAK,CAAC,OAAO;AACvE,IAAA,EAAE,EAAE,QAAQ;AACZ,IAAA,IAAI,EAAE,QAAQ;AACf,CAAA,CAAC,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,6BAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iIAAA,EAWS,aAAa,CAAA,kBAAA,EACDC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,OAAA,EAC1CA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,0DAKRA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;;;;;;"}
1	+ {"version":3,"file":"ColumnHeader.cjs","sources":["../../../../src/components/DataTable/components/ColumnHeader.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nexport const SortIndicator = styled.div`\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: white;\n color: ${theme.colors.neutral.ink.lightest};\n`;\n\nexport const HeaderContent = styled.span`\n display: flex;\n height: 28px;\n align-items: center;\n gap: 4px;\n white-space: nowrap;\n\n color: ${theme.text.headingTable.color};\n font-family: ${theme.text.headingTable.fontFamily};\n font-size: ${theme.text.headingTable.fontSize};\n font-style: ${theme.text.headingTable.fontStyle};\n font-weight: ${theme.text.headingTable.fontWeight};\n line-height: ${theme.text.headingTable.lineHeight};\n`;\n\nexport const ClickableHeaderContent = styled(HeaderContent).attrs(() => ({\n as: 'button',\n type: 'button',\n}))`\n appearance: none;\n padding: 0;\n border: 0;\n border-radius: 4px;\n background-color: transparent;\n\n &:not(:disabled):hover {\n cursor: pointer;\n }\n\n &:hover ${SortIndicator} {\n background-color: ${theme.colors.neutral.grey.light};\n color: ${theme.colors.neutral.ink.base};\n }\n\n &:focus-visible {\n outline: 0;\n box-shadow: 0px 0px 0px 2px ${theme.colors.secondary.blue.light};\n }\n`;\n"],"names":["styled","theme"],"mappings":";;;;;;;;;AAGa,MAAA,aAAa,GAAGA,uBAAM,CAAC,GAAG,CAO5B,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,2GAAA,EAAAC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ;AAG/B,MAAA,aAAa,GAAGD,uBAAM,CAAC,IAAI,CAO7B,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,6EAAA,EAAAC,WAAK,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAA,aAAA,EACvBA,WAAK,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAA,WAAA,EACpCA,WAAK,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAC/B,YAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,CAChC,aAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAA,aAAA,EAClCA,WAAK,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAA,CAAA;AAG5C,MAAM,sBAAsB,GAAGD,uBAAM,CAAC,aAAa,CAAC,CAAC,KAAK,CAAC,OAAO;AACvE,IAAA,EAAE,EAAE,QAAQ;AACZ,IAAA,IAAI,EAAE,QAAQ;AACf,CAAA,CAAC,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,6BAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iIAAA,EAWS,aAAa,CAAA,kBAAA,EACDC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,OAAA,EAC1CA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,0DAKRA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;;;;;;"}

package/dist/components/DataTable/components/ColumnHeader.js CHANGED Viewed

@@ -1,12 +1,12 @@
 import styled from 'styled-components';
 import { theme } from '../../../theme/index.js';
-const SortIndicator = styled.div.withConfig({ displayName: "vui--SortIndicator", componentId: "vui--o7masx" }) `width:20px;height:20px;display:flex;align-items:center;justify-content:center;background-color:white;color:${theme.colors.neutral.ink.lightest};`;
-const HeaderContent = styled.span.withConfig({ displayName: "vui--HeaderContent", componentId: "vui--vlccds" }) `display:flex;height:28px;align-items:center;gap:4px;white-space:nowrap;color:${theme.text.headingTable.color};font-family:${theme.text.headingTable.fontFamily};font-size:${theme.text.headingTable.fontSize};font-style:${theme.text.headingTable.fontStyle};font-weight:${theme.text.headingTable.fontWeight};line-height:${theme.text.headingTable.lineHeight};`;
+const SortIndicator = styled.div.withConfig({ displayName: "vui--SortIndicator", componentId: "vui--1itlaj6" }) `width:20px;height:20px;display:flex;align-items:center;justify-content:center;background-color:white;color:${theme.colors.neutral.ink.lightest};`;
+const HeaderContent = styled.span.withConfig({ displayName: "vui--HeaderContent", componentId: "vui--1bvlb4j" }) `display:flex;height:28px;align-items:center;gap:4px;white-space:nowrap;color:${theme.text.headingTable.color};font-family:${theme.text.headingTable.fontFamily};font-size:${theme.text.headingTable.fontSize};font-style:${theme.text.headingTable.fontStyle};font-weight:${theme.text.headingTable.fontWeight};line-height:${theme.text.headingTable.lineHeight};`;
 const ClickableHeaderContent = styled(HeaderContent).attrs(() => ({
     as: 'button',
     type: 'button',
-})).withConfig({ displayName: "vui--ClickableHeaderContent", componentId: "vui--xbox8h" }) `appearance:none;padding:0;border:0;border-radius:4px;background-color:transparent;&:not(:disabled):hover{cursor:pointer;}&:hover ${SortIndicator}{background-color:${theme.colors.neutral.grey.light};color:${theme.colors.neutral.ink.base};}&:focus-visible{outline:0;box-shadow:0px 0px 0px 2px ${theme.colors.secondary.blue.light};}`;
+})).withConfig({ displayName: "vui--ClickableHeaderContent", componentId: "vui--mrmldg" }) `appearance:none;padding:0;border:0;border-radius:4px;background-color:transparent;&:not(:disabled):hover{cursor:pointer;}&:hover ${SortIndicator}{background-color:${theme.colors.neutral.grey.light};color:${theme.colors.neutral.ink.base};}&:focus-visible{outline:0;box-shadow:0px 0px 0px 2px ${theme.colors.secondary.blue.light};}`;
 export { ClickableHeaderContent, HeaderContent, SortIndicator };
 //# sourceMappingURL=ColumnHeader.js.map