@veeqo/ui 10.0.0-beta.1 → 10.0.0-beta.3

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/Card/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { motion } from 'framer-motion';\nimport { Shadows } from '../../theme/modules/shadows';\nimport { colors } from '../../theme/modules/colors';\nimport { sizes } from '../../theme/modules/sizes';\nimport { radius } from '../../theme/modules/radius';\nimport { text } from '../../theme/modules/text';\n\nconst { grey } = colors.neutral;\n\nexport type CardElevation = 0 | 1 | 2 | 3 | 4;\n\nconst elevationShadowMap = {\n  0: 'none',\n  1: Shadows.sm,\n  2: Shadows.base,\n  3: Shadows.md,\n  4: Shadows.lg,\n};\n\nconst accents = {\n  info: colors.secondary.blue.base,\n  success: colors.secondary.green.base,\n  error: colors.secondary.red.base,\n};\n\nexport const Footer = styled.footer`\n  margin-top: ${sizes.base};\n  padding: ${sizes.md};\n  z-index: 2;\n`;\n\nexport const Section = styled.section`\n  padding-right: ${sizes.md};\n  padding-left: ${sizes.md};\n  margin-top: ${sizes.md};\n  margin-bottom: ${sizes.md};\n\n  font-family: ${text.body.fontFamily};\n  font-size: ${text.body.fontSize};\n  font-weight: ${text.body.fontWeight};\n  line-height: ${text.body.lineHeight};\n  color: ${text.body.color};\n\n  & + & {\n    border-top: ${sizes.line} solid ${grey.base};\n    padding-top: ${sizes.md};\n  }\n`;\n\nexport const FullBleed = styled.div`\n  margin-left: -${sizes.md};\n  margin-right: -${sizes.md};\n`;\n\nexport const Body = styled(motion.div)`\n  overflow-y: hidden;\n\n  &:not(:first-child) > ${Section}:first-child {\n    margin-top: 0;\n  }\n`;\n\nexport interface SurfaceProps {\n  elevation?: CardElevation;\n  accent?: keyof typeof accents;\n}\n\nexport const Surface = styled.div<SurfaceProps>`\n  position: relative;\n  width: 100%;\n  background-color: white;\n  border: ${sizes.line} solid ${grey.base};\n  box-shadow: ${(props) =>\n    props.elevation !== undefined ? elevationShadowMap[props.elevation] : Shadows.sm};\n  border-radius: ${radius.md};\n  overflow: hidden;\n  box-sizing: border-box;\n\n  ${({ accent }) =>\n    accent &&\n    `\n    &::after {\n      content: \"\";\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      height: ${sizes.xs};\n      background-color: ${accents[accent]};\n    }\n  `}\n`;\n"],"names":[],"mappings":";;;;;;;;AAQA,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,CAAC,OAAO;AAI/B,MAAM,kBAAkB,GAAG;AACzB,IAAA,CAAC,EAAE,MAAM;IACT,CAAC,EAAE,OAAO,CAAC,EAAE;IACb,CAAC,EAAE,OAAO,CAAC,IAAI;IACf,CAAC,EAAE,OAAO,CAAC,EAAE;IACb,CAAC,EAAE,OAAO,CAAC,EAAE;CACd;AAED,MAAM,OAAO,GAAG;AACd,IAAA,IAAI,EAAE,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;AAChC,IAAA,OAAO,EAAE,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI;AACpC,IAAA,KAAK,EAAE,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI;CACjC;AAEY,MAAA,MAAM,GAAG,MAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,WAAA,EACnB,KAAK,CAAC,IAAI,CACb,SAAA,EAAA,KAAK,CAAC,EAAE;AAId,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,cAAA,EAClB,KAAK,CAAC,EAAE,CAAA,cAAA,EACT,KAAK,CAAC,EAAE,CACV,YAAA,EAAA,KAAK,CAAC,EAAE,CACL,eAAA,EAAA,KAAK,CAAC,EAAE,CAAA,aAAA,EAEV,IAAI,CAAC,IAAI,CAAC,UAAU,CAAA,WAAA,EACtB,IAAI,CAAC,IAAI,CAAC,QAAQ,CAChB,aAAA,EAAA,IAAI,CAAC,IAAI,CAAC,UAAU,CACpB,aAAA,EAAA,IAAI,CAAC,IAAI,CAAC,UAAU,UAC1B,IAAI,CAAC,IAAI,CAAC,KAAK,CAAA,kBAAA,EAGR,KAAK,CAAC,IAAI,CAAU,OAAA,EAAA,IAAI,CAAC,IAAI,CAC5B,aAAA,EAAA,KAAK,CAAC,EAAE;AAId,MAAA,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,aAAA,EACjB,KAAK,CAAC,EAAE,CACP,eAAA,EAAA,KAAK,CAAC,EAAE;AAGpB,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAGZ,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,uCAAA,EAAA,OAAO;AAUpB,MAAA,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2DAAA,EAIrB,KAAK,CAAC,IAAI,CAAA,OAAA,EAAU,IAAI,CAAC,IAAI,CACzB,YAAA,EAAA,CAAC,KAAK,KAClB,KAAK,CAAC,SAAS,KAAK,SAAS,GAAG,kBAAkB,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC,EAAE,CACjE,eAAA,EAAA,MAAM,CAAC,EAAE,CAIxB,uCAAA,EAAA,CAAC,EAAE,MAAM,EAAE,KACX,MAAM;AACN,IAAA;;;;;;;AAOY,cAAA,EAAA,KAAK,CAAC,EAAE,CAAA;0BACE,OAAO,CAAC,MAAM,CAAC,CAAA;;AAEtC,EAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/Card/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { motion } from 'framer-motion';\nimport { Shadows } from '../../theme/modules/shadows';\nimport { colors } from '../../theme/modules/colors';\nimport { sizes } from '../../theme/modules/sizes';\nimport { radius } from '../../theme/modules/radius';\nimport { text } from '../../theme/modules/text';\n\nconst { grey } = colors.neutral;\n\nexport type CardElevation = 0 | 1 | 2 | 3 | 4;\n\nconst elevationShadowMap = {\n  0: 'none',\n  1: Shadows.sm,\n  2: Shadows.base,\n  3: Shadows.md,\n  4: Shadows.lg,\n};\n\nconst accents = {\n  info: colors.secondary.blue.base,\n  success: colors.secondary.green.base,\n  error: colors.secondary.red.base,\n};\n\nexport const Footer = styled.footer`\n  margin-top: ${sizes.base};\n  padding: ${sizes.md};\n  z-index: 2;\n`;\n\nexport const Section = styled.section`\n  padding-right: ${sizes.md};\n  padding-left: ${sizes.md};\n  margin-top: ${sizes.md};\n  margin-bottom: ${sizes.md};\n\n  font-family: ${text.body.fontFamily};\n  font-size: ${text.body.fontSize};\n  font-weight: ${text.body.fontWeight};\n  line-height: ${text.body.lineHeight};\n  color: ${text.body.color};\n\n  & + & {\n    border-top: ${sizes.line} solid ${grey.base};\n    padding-top: ${sizes.md};\n  }\n`;\n\nexport const FullBleed = styled.div`\n  margin-left: -${sizes.md};\n  margin-right: -${sizes.md};\n`;\n\nexport const Body = styled(motion.div)`\n  overflow-y: hidden;\n\n  &:not(:first-child) > ${Section}:first-child {\n    margin-top: 0;\n  }\n`;\n\nexport interface SurfaceProps {\n  elevation?: CardElevation;\n  accent?: keyof typeof accents;\n}\n\nexport const Surface = styled.div<SurfaceProps>`\n  position: relative;\n  width: 100%;\n  background-color: white;\n  border: ${sizes.line} solid ${grey.base};\n  box-shadow: ${(props) =>\n    props.elevation !== undefined ? elevationShadowMap[props.elevation] : Shadows.sm};\n  border-radius: ${radius.md};\n  overflow: hidden;\n  box-sizing: border-box;\n\n  ${({ accent }) =>\n    accent &&\n    `\n    &::after {\n      content: \"\";\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      height: ${sizes.xs};\n      background-color: ${accents[accent]};\n    }\n  `}\n`;\n"],"names":[],"mappings":";;;;;;;;AAQA,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,CAAC,OAAO;AAI/B,MAAM,kBAAkB,GAAG;AACzB,IAAA,CAAC,EAAE,MAAM;IACT,CAAC,EAAE,OAAO,CAAC,EAAE;IACb,CAAC,EAAE,OAAO,CAAC,IAAI;IACf,CAAC,EAAE,OAAO,CAAC,EAAE;IACb,CAAC,EAAE,OAAO,CAAC,EAAE;CACd;AAED,MAAM,OAAO,GAAG;AACd,IAAA,IAAI,EAAE,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;AAChC,IAAA,OAAO,EAAE,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI;AACpC,IAAA,KAAK,EAAE,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI;CACjC;AAEY,MAAA,MAAM,GAAG,MAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,WAAA,EACnB,KAAK,CAAC,IAAI,CACb,SAAA,EAAA,KAAK,CAAC,EAAE;AAId,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,cAAA,EAClB,KAAK,CAAC,EAAE,CAAA,cAAA,EACT,KAAK,CAAC,EAAE,CACV,YAAA,EAAA,KAAK,CAAC,EAAE,CACL,eAAA,EAAA,KAAK,CAAC,EAAE,CAAA,aAAA,EAEV,IAAI,CAAC,IAAI,CAAC,UAAU,CAAA,WAAA,EACtB,IAAI,CAAC,IAAI,CAAC,QAAQ,CAChB,aAAA,EAAA,IAAI,CAAC,IAAI,CAAC,UAAU,CACpB,aAAA,EAAA,IAAI,CAAC,IAAI,CAAC,UAAU,UAC1B,IAAI,CAAC,IAAI,CAAC,KAAK,CAAA,kBAAA,EAGR,KAAK,CAAC,IAAI,CAAU,OAAA,EAAA,IAAI,CAAC,IAAI,CAC5B,aAAA,EAAA,KAAK,CAAC,EAAE;AAId,MAAA,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,aAAA,EACjB,KAAK,CAAC,EAAE,CACP,eAAA,EAAA,KAAK,CAAC,EAAE;AAGpB,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAGZ,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,uCAAA,EAAA,OAAO;AAUpB,MAAA,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2DAAA,EAIrB,KAAK,CAAC,IAAI,CAAA,OAAA,EAAU,IAAI,CAAC,IAAI,CACzB,YAAA,EAAA,CAAC,KAAK,KAClB,KAAK,CAAC,SAAS,KAAK,SAAS,GAAG,kBAAkB,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC,EAAE,CACjE,eAAA,EAAA,MAAM,CAAC,EAAE,CAIxB,uCAAA,EAAA,CAAC,EAAE,MAAM,EAAE,KACX,MAAM;AACN,IAAA;;;;;;;AAOY,cAAA,EAAA,KAAK,CAAC,EAAE,CAAA;0BACE,OAAO,CAAC,MAAM,CAAC,CAAA;;AAEtC,EAAA,CAAA,CAAA;;;;"}

package/dist/components/CardHeader/styled.cjs

@@ -7,8 +7,8 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const Header = styled__default.default.header.withConfig({ displayName: "vui--Header", componentId: "vui--13im4do" }) `padding-top:${sizes.sizes.md};padding-right:${sizes.sizes.md};padding-left:${sizes.sizes.md};margin-bottom:${sizes.sizes.md};& > * + *{margin-top:${sizes.sizes.xs};}`;
-const HeaderGrid = styled__default.default.div.withConfig({ displayName: "vui--HeaderGrid", componentId: "vui--1orvtgl" }) `/*${sizes.sizes.base}*/display:flex;justify-content:flex-end;align-items:center;& > *:first-child{flex:1;}`;
+const Header = styled__default.default.header.withConfig({ displayName: "vui--Header", componentId: "vui--buz2z6" }) `padding-top:${sizes.sizes.md};padding-right:${sizes.sizes.md};padding-left:${sizes.sizes.md};margin-bottom:${sizes.sizes.md};& > * + *{margin-top:${sizes.sizes.xs};}`;
+const HeaderGrid = styled__default.default.div.withConfig({ displayName: "vui--HeaderGrid", componentId: "vui--9e0ja4" }) `/*${sizes.sizes.base}*/display:flex;justify-content:flex-end;align-items:center;& > *:first-child{flex:1;}`;
 
 exports.Header = Header;
 exports.HeaderGrid = HeaderGrid;

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

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","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":["styled","sizes"],"mappings":";;;;;;;;;AAGO,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,EAAE,CAAA,eAAA,EACNA,WAAK,CAAC,EAAE,CAAA,cAAA,EACTA,WAAK,CAAC,EAAE,CAAA,eAAA,EACPA,WAAK,CAAC,EAAE,CAAA,sBAAA,EAGTA,WAAK,CAAC,EAAE,CAAA,EAAA;AAInB,MAAM,UAAU,GAAGD,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,EAAA,EAKpBC,WAAK,CAAC,IAAI,CAAA,qFAAA;;;;;"}
+{"version":3,"file":"styled.cjs","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":["styled","sizes"],"mappings":";;;;;;;;;AAGO,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,EAAE,CAAA,eAAA,EACNA,WAAK,CAAC,EAAE,CAAA,cAAA,EACTA,WAAK,CAAC,EAAE,CAAA,eAAA,EACPA,WAAK,CAAC,EAAE,CAAA,sBAAA,EAGTA,WAAK,CAAC,EAAE,CAAA,EAAA;AAInB,MAAM,UAAU,GAAGD,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,EAAA,EAKpBC,WAAK,CAAC,IAAI,CAAA,qFAAA;;;;;"}

package/dist/components/CardHeader/styled.js

@@ -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--13im4do" }) `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--1orvtgl" }) `/*${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

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

@@ -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--bq2l9d" }) `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

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

@@ -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--bq2l9d" }) `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

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

@@ -12,15 +12,15 @@ const alignMap = {
     top: 'flex-start',
     center: 'center',
 };
-const RootLayout = styled__default.default.div.withConfig({ displayName: "vui--RootLayout", componentId: "vui--3b6yzv" }) `display:flex;align-items:center;& > * + *{margin-left:${index.theme.sizes.base};}`;
-const InputLayout = styled__default.default.div.withConfig({ displayName: "vui--InputLayout", componentId: "vui--8ngm7b" }) `align-self:stretch;display:flex;align-items:${(props) => alignMap[props.align]};`;
-const AccessoryLayout = styled__default.default.div.withConfig({ displayName: "vui--AccessoryLayout", componentId: "vui--1cu5xjr" }) `align-self:center;display:flex;align-items:center;`;
-const TextLayout = styled__default.default.div.withConfig({ displayName: "vui--TextLayout", componentId: "vui--1na6cp4" }) `flex:1;& > * + *{margin-top:${index.theme.sizes.sm};}`;
-const HintText = styled__default.default.div.withConfig({ displayName: "vui--HintText", componentId: "vui--1bctk32" }) `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--1x2dicy" }) `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--19rnaoe" }) `box-sizing:border-box;&:hover{cursor:${(props) => (props.disabled ? 'default' : 'pointer')};}`;
-const BorderedWrapper = styled__default.default(Wrapper).withConfig({ displayName: "vui--BorderedWrapper", componentId: "vui--mk2qjd" }) `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--17swyyl" }) `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

@@ -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,aAAA,EAAA,CAAA,CAAA,CAAA,sDAAA,EAAAC,WAAK,CAAC,KAAK,CAAC,IAAI;MAQtB,WAAW,GAAGD,uBAAM,CAAC,GAAG,4HAGpB,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,cAAA,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,cAAA,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;;;;;;;;;;;;"}
+{"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

@@ -6,15 +6,15 @@ const alignMap = {
     top: 'flex-start',
     center: 'center',
 };
-const RootLayout = styled.div.withConfig({ displayName: "vui--RootLayout", componentId: "vui--3b6yzv" }) `display:flex;align-items:center;& > * + *{margin-left:${theme.sizes.base};}`;
-const InputLayout = styled.div.withConfig({ displayName: "vui--InputLayout", componentId: "vui--8ngm7b" }) `align-self:stretch;display:flex;align-items:${(props) => alignMap[props.align]};`;
-const AccessoryLayout = styled.div.withConfig({ displayName: "vui--AccessoryLayout", componentId: "vui--1cu5xjr" }) `align-self:center;display:flex;align-items:center;`;
-const TextLayout = styled.div.withConfig({ displayName: "vui--TextLayout", componentId: "vui--1na6cp4" }) `flex:1;& > * + *{margin-top:${theme.sizes.sm};}`;
-const HintText = styled.div.withConfig({ displayName: "vui--HintText", componentId: "vui--1bctk32" }) `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--1x2dicy" }) `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--19rnaoe" }) `box-sizing:border-box;&:hover{cursor:${(props) => (props.disabled ? 'default' : 'pointer')};}`;
-const BorderedWrapper = styled(Wrapper).withConfig({ displayName: "vui--BorderedWrapper", componentId: "vui--mk2qjd" }) `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--17swyyl" }) `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

@@ -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,aAAA,EAAA,CAAA,CAAA,CAAA,sDAAA,EAAA,KAAK,CAAC,KAAK,CAAC,IAAI;MAQtB,WAAW,GAAG,MAAM,CAAC,GAAG,4HAGpB,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,cAAA,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,cAAA,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;;;;"}
+{"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

@@ -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--z1f13i" }) `padding:0;display:flex;flex-direction:column;border:0;& > * + *{margin-top:16px;}`;
-const Legend = styled__default.default.legend.withConfig({ displayName: "vui--Legend", componentId: "vui--snr02n" }) `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.js

@@ -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--z1f13i" }) `padding:0;display:flex;flex-direction:column;border:0;& > * + *{margin-top:16px;}`;
-const Legend = styled.legend.withConfig({ displayName: "vui--Legend", componentId: "vui--snr02n" }) `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/CopyToClipboard/CopyToClipboard.cjs

@@ -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--n9oowl" }) `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

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

@@ -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--n9oowl" }) `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

@@ -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;;;;"}
+{"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/DataGrid/DataGrid.cjs

@@ -6,7 +6,6 @@ require('../../hooks/useFocusVisible.cjs');
 require('uid/secure');
 var useDragToScroll = require('../../hooks/useDragToScroll.cjs');
 require('lodash.throttle');
-var ColumnMapper = require('./utils/ColumnMapper.cjs');
 var getAriaRoles = require('./utils/getAriaRoles.cjs');
 var Columns = require('./components/Columns/Columns.cjs');
 var Header = require('./components/Header/Header.cjs');
@@ -14,11 +13,12 @@ var Body = require('./components/Body/Body.cjs');
 var Footer = require('./components/Footer/Footer.cjs');
 var GridContainer = require('./components/GridContainer/GridContainer.cjs');
 var useSortingState = require('./hooks/useSortingState.cjs');
+var useSelectionState = require('./hooks/useSelectionState.cjs');
 var usePinnedColumnLayout = require('./hooks/usePinnedColumnLayout.cjs');
 var useKeyboardNavigation = require('./hooks/useKeyboardNavigation.cjs');
-var useSelectionState = require('./hooks/useSelectionState.cjs');
-var constants = require('./constants.cjs');
-var SelectionColumnDefinition = require('./columns/SelectionColumnDefinition.cjs');
+var useColumnState = require('./hooks/useColumnState.cjs');
+var useColumnWidthState = require('./hooks/useColumnWidthState.cjs');
+var useExpandedState = require('./hooks/useExpandedState.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -42,14 +42,17 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
  *
  * *Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.*
  */
-const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resizeMode = 'off', containerStyle, enableKeyboardNavigation = false, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, onSelectionChanged, 'aria-label': ariaLabel, }) => {
+const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resizeMode = 'off', containerStyle, enableKeyboardNavigation = false, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, onSelectionChanged, rowGrouping, columnWidths, onColumnsResized, 'aria-label': ariaLabel, }) => {
+    /**
+     * Refs to the table and table container. Used for keyboard navigation and drag-to-scroll.
+     */
     const containerRef = React.useRef(null);
     const tableRef = React.useRef(null);
     const showFooter = React.useMemo(() => columns.some((column) => column.renderFooter), [columns]);
-    const ariaRoles = React.useMemo(() => getAriaRoles.getAriaRoles(enableKeyboardNavigation), [enableKeyboardNavigation]);
+    const ariaRoles = React.useMemo(() => getAriaRoles.getAriaRoles({ enableKeyboardNavigation, rowGrouping }), [enableKeyboardNavigation, rowGrouping]);
     const enableColumnResizing = React.useMemo(() => resizeMode !== 'off', [resizeMode]);
     /**
-     * Hooks to handle state for selection and sorting.
+     * Hooks to handle state for selection, sorting, and expanded/collapsed.
      */
     const { enableRowSelection, enableMultiRowSelection, rowSelection, onRowSelectionChange } = useSelectionState.useSelectionState({
         selectionMode,
@@ -58,55 +61,22 @@ const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resiz
         onSelectionChanged,
     });
     const { enableSorting, enableMultiRemove, enableSortingRemoval, manualSorting, sorting, onSortingChange, } = useSortingState.useSortingState({ columns, sortState, onSortChanged });
+    const { expanded, onExpandedChange, enableExpanding, getRowCanExpand, getSubRows } = useExpandedState.useExpandedState(rowGrouping);
     /**
-     * Mapping of column definitions.
+     * Hooks to setup column state, including visibility, ordering, pinning, and width(s).
      */
-    const columnMapper = React.useRef(new ColumnMapper.ColumnMapper());
-    const mappedColumnDefinitions = React.useMemo(() => {
-        const mappedColumns = columns.map((column) => columnMapper.current.mapColumnDefinition(column));
-        if (enableRowSelection) {
-            mappedColumns.unshift(SelectionColumnDefinition.SelectionColumnDefinition);
-        }
-        return mappedColumns;
-    }, [columns, enableRowSelection]);
-    /**
-     * Stable references for column states (visibility, order, pinning).
-     */
-    // Column render order - the order of the array indicates the order on screen.
-    const columnOrder = React.useMemo(() => {
-        if (!columnOrdering || columnOrdering.length === 0) {
-            return undefined;
-        }
-        // If we have a custom column order, we need to make sure the selection column always appears first.
-        if (enableRowSelection) {
-            return ['selection', ...columnOrdering];
-        }
-        return columnOrdering;
-    }, [columnOrdering, enableRowSelection]);
-    // Column visibiilty - record of column ID's to visibility, where false/no value = hidden.
-    const columnVisibility = React.useMemo(() => {
-        // We can't have no columns visible - if the array is empty we show them all.
-        if (!hiddenColumns || hiddenColumns.length === columns.length) {
-            return undefined;
-        }
-        return columns.reduce((acc, column) => ({
-            ...acc,
-            [column.id]: !hiddenColumns.includes(column.id),
-        }), {});
-    }, [hiddenColumns, columns]);
-    // Pinned columns
-    const columnPinning = React.useMemo(() => {
-        var _a, _b;
-        let left = (_a = pinnedColumns === null || pinnedColumns === undefined ? undefined : pinnedColumns.left) !== null && _a !== undefined ? _a : [];
-        // If we have any left-pinned columns, we need to include the selection column as it should appear first.
-        if (enableRowSelection && left.length > 0) {
-            left = [constants.SELECTION_COLUMN_ID, ...left];
-        }
-        return {
-            left,
-            right: (_b = pinnedColumns === null || pinnedColumns === undefined ? undefined : pinnedColumns.right) !== null && _b !== undefined ? _b : [],
-        };
-    }, [pinnedColumns, enableRowSelection]);
+    const { mappedColumnDefinitions, columnOrder, columnVisibility, columnPinning } = useColumnState.useColumnState({
+        columns,
+        hiddenColumns,
+        columnOrdering,
+        pinnedColumns,
+        enableRowSelection: !!enableRowSelection,
+    });
+    const { columnSizing, onColumnSizingChange } = useColumnWidthState.useColumnWidthState({
+        mappedColumnDefinitions,
+        columnWidths,
+        onColumnsResized,
+    });
     /**
      * Setup the TanStack table, including mapped column definitions, row data, and any additional state such as
      * column visibility and ordering.
@@ -117,6 +87,7 @@ const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resiz
         // Column settings
         columnResizeMode: resizeMode === 'off' ? undefined : resizeMode,
         enableColumnResizing,
+        onColumnSizingChange,
         // Row model
         getRowId,
         getCoreRowModel: reactTable.getCoreRowModel(),
@@ -132,6 +103,12 @@ const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resiz
         enableRowSelection,
         enableMultiRowSelection,
         onRowSelectionChange,
+        // Row grouping
+        getSubRows,
+        getRowCanExpand,
+        onExpandedChange,
+        enableExpanding,
+        getExpandedRowModel: enableExpanding ? reactTable.getExpandedRowModel() : undefined,
         // Inject external table state
         state: {
             columnOrder,
@@ -139,6 +116,8 @@ const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resiz
             columnPinning,
             sorting,
             rowSelection,
+            expanded,
+            columnSizing,
         },
     });
     /**

package/dist/components/DataGrid/DataGrid.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DataGrid.cjs","sources":["../../../src/components/DataGrid/DataGrid.tsx"],"sourcesContent":["import React, { useMemo, useRef } from 'react';\nimport { getCoreRowModel, useReactTable } from '@tanstack/react-table';\n\nimport { useDragToScroll } from '../../hooks';\n\nimport { DataGridProps } from './types';\nimport { ColumnMapper, getAriaRoles } from './utils';\nimport { GridContainer, Header, Body, Footer, Columns } from './components';\nimport { MemoizedBody } from './components/Body';\n\nimport { usePinnedColumnLayout, useSortingState, useKeyboardNavigation } from './hooks';\n\nimport { useSelectionState } from './hooks/useSelectionState';\nimport { SELECTION_COLUMN_ID } from './constants';\nimport { SelectionColumnDefinition } from './columns';\n\n/**\n * [WIP]\n *\n * A DataGrid component which renders data in a two-dimensional format, with columns and rows. Unlike the `DataTable`\n * component, the `DataGrid` supports both flat and hierarchical (tree) data.\n *\n * Under the hood, it uses [TanStack Table](http://tanstack.com/table/) for table management, and aims to replicate functionality\n * available in major third party grid components such as CloudScape's Table component, AgGrid, etc.\n *\n * Supported features include:\n * - Pinning, resizing (incl. smooth resizing), reordering, and hiding of columns\n * - Selection (single and multiple) and disabling of rows.\n * - Rendering of arbitrarily nested data, expanding/collapsing, and custom full-width 'group' rows.\n * - In-built keyboard navigation with arrow keys, and drag to scroll.\n * - Configurable density.\n *\n * *Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.*\n */\nexport const DataGrid = ({\n  density = 'base',\n  striped = true,\n  borderMode = 'full',\n  resizeMode = 'off',\n  containerStyle,\n  enableKeyboardNavigation = false,\n\n  columns,\n  hiddenColumns,\n  columnOrdering,\n  pinnedColumns,\n\n  data,\n  getRowId,\n\n  sortState,\n  onSortChanged,\n\n  selectionMode,\n  selectedRows,\n  disabledRows,\n  onSelectionChanged,\n\n  'aria-label': ariaLabel,\n}: DataGridProps) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const tableRef = useRef<HTMLTableElement>(null);\n\n  const showFooter = useMemo(() => columns.some((column) => column.renderFooter), [columns]);\n  const ariaRoles = useMemo(\n    () => getAriaRoles(enableKeyboardNavigation),\n    [enableKeyboardNavigation],\n  );\n  const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);\n\n  /**\n   * Hooks to handle state for selection and sorting.\n   */\n\n  const { enableRowSelection, enableMultiRowSelection, rowSelection, onRowSelectionChange } =\n    useSelectionState({\n      selectionMode,\n      selectedRows,\n      disabledRows,\n      onSelectionChanged,\n    });\n\n  const {\n    enableSorting,\n    enableMultiRemove,\n    enableSortingRemoval,\n    manualSorting,\n    sorting,\n    onSortingChange,\n  } = useSortingState({ columns, sortState, onSortChanged });\n\n  /**\n   * Mapping of column definitions.\n   */\n  const columnMapper = useRef(new ColumnMapper());\n  const mappedColumnDefinitions = useMemo(() => {\n    const mappedColumns = columns.map((column) => columnMapper.current.mapColumnDefinition(column));\n\n    if (enableRowSelection) {\n      mappedColumns.unshift(SelectionColumnDefinition);\n    }\n\n    return mappedColumns;\n  }, [columns, enableRowSelection]);\n\n  /**\n   * Stable references for column states (visibility, order, pinning).\n   */\n\n  // Column render order - the order of the array indicates the order on screen.\n  const columnOrder = useMemo(() => {\n    if (!columnOrdering || columnOrdering.length === 0) {\n      return undefined;\n    }\n\n    // If we have a custom column order, we need to make sure the selection column always appears first.\n    if (enableRowSelection) {\n      return ['selection', ...columnOrdering];\n    }\n\n    return columnOrdering;\n  }, [columnOrdering, enableRowSelection]);\n\n  // Column visibiilty - record of column ID's to visibility, where false/no value = hidden.\n  const columnVisibility = useMemo(() => {\n    // We can't have no columns visible - if the array is empty we show them all.\n    if (!hiddenColumns || hiddenColumns.length === columns.length) {\n      return undefined;\n    }\n\n    return columns.reduce(\n      (acc, column) => ({\n        ...acc,\n        [column.id]: !hiddenColumns.includes(column.id),\n      }),\n      {},\n    );\n  }, [hiddenColumns, columns]);\n\n  // Pinned columns\n  const columnPinning = useMemo(() => {\n    let left = pinnedColumns?.left ?? [];\n\n    // If we have any left-pinned columns, we need to include the selection column as it should appear first.\n    if (enableRowSelection && left.length > 0) {\n      left = [SELECTION_COLUMN_ID, ...left];\n    }\n\n    return {\n      left,\n      right: pinnedColumns?.right ?? [],\n    };\n  }, [pinnedColumns, enableRowSelection]);\n\n  /**\n   * Setup the TanStack table, including mapped column definitions, row data, and any additional state such as\n   * column visibility and ordering.\n   */\n  const table = useReactTable<any>({\n    data,\n    columns: mappedColumnDefinitions,\n\n    // Column settings\n    columnResizeMode: resizeMode === 'off' ? undefined : resizeMode,\n    enableColumnResizing,\n\n    // Row model\n    getRowId,\n    getCoreRowModel: getCoreRowModel(),\n\n    // Sorting\n    enableSorting,\n    enableSortingRemoval,\n    enableMultiRemove,\n    manualSorting,\n    onSortingChange,\n\n    // Pinning\n    enableColumnPinning: columnPinning.left.length + columnPinning.right.length > 0,\n\n    // Selection\n    enableRowSelection,\n    enableMultiRowSelection,\n    onRowSelectionChange,\n\n    // Inject external table state\n    state: {\n      columnOrder,\n      columnVisibility,\n      columnPinning,\n      sorting,\n      rowSelection,\n    },\n  });\n\n  /**\n   * Pinned column layout\n   */\n  const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n\n  /**\n   * Other hooks\n   */\n  useDragToScroll({ targetRef: containerRef, ignoreClassName: 'data-grid-column-resizer' });\n  useKeyboardNavigation({ tableRef, enableKeyboardNavigation });\n\n  return (\n    <GridContainer\n      containerRef={containerRef}\n      tableRef={tableRef}\n      borderMode={borderMode}\n      containerStyles={{ ...containerStyle, ...pinnedColumnLayoutStyles }}\n      ariaRoles={ariaRoles}\n      enableResizeableColumns={enableColumnResizing}\n      density={density}\n      table={table}\n      aria-label={ariaLabel}\n    >\n      {/* Columns */}\n      {enableColumnResizing && <Columns table={table} />}\n\n      {/* Header */}\n      <Header table={table} />\n\n      {/* Body */}\n      {table.getState().columnSizingInfo.isResizingColumn ? (\n        <MemoizedBody table={table} ariaRoles={ariaRoles} striped={striped} />\n      ) : (\n        <Body table={table} ariaRoles={ariaRoles} striped={striped} />\n      )}\n\n      {/* Footer */}\n      {showFooter && <Footer table={table} ariaRoles={ariaRoles} />}\n    </GridContainer>\n  );\n};\n"],"names":["useRef","useMemo","getAriaRoles","useSelectionState","useSortingState","ColumnMapper","SelectionColumnDefinition","SELECTION_COLUMN_ID","useReactTable","getCoreRowModel","usePinnedColumnLayout","useDragToScroll","useKeyboardNavigation","React","GridContainer","Columns","Header","MemoizedBody","Body","Footer"],"mappings":"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"}
+{"version":3,"file":"DataGrid.cjs","sources":["../../../src/components/DataGrid/DataGrid.tsx"],"sourcesContent":["import React, { useMemo, useRef } from 'react';\nimport { getCoreRowModel, getExpandedRowModel, useReactTable } from '@tanstack/react-table';\n\nimport { useDragToScroll } from '../../hooks';\n\nimport { DataGridProps } from './types';\nimport { getAriaRoles } from './utils';\nimport { GridContainer, Header, Body, Footer, Columns } from './components';\nimport { MemoizedBody } from './components/Body';\n\nimport {\n  usePinnedColumnLayout,\n  useSortingState,\n  useKeyboardNavigation,\n  useColumnState,\n  useExpandedState,\n  useColumnWidthState,\n  useSelectionState,\n} from './hooks';\n\n/**\n * [WIP]\n *\n * A DataGrid component which renders data in a two-dimensional format, with columns and rows. Unlike the `DataTable`\n * component, the `DataGrid` supports both flat and hierarchical (tree) data.\n *\n * Under the hood, it uses [TanStack Table](http://tanstack.com/table/) for table management, and aims to replicate functionality\n * available in major third party grid components such as CloudScape's Table component, AgGrid, etc.\n *\n * Supported features include:\n * - Pinning, resizing (incl. smooth resizing), reordering, and hiding of columns\n * - Selection (single and multiple) and disabling of rows.\n * - Rendering of arbitrarily nested data, expanding/collapsing, and custom full-width 'group' rows.\n * - In-built keyboard navigation with arrow keys, and drag to scroll.\n * - Configurable density.\n *\n * *Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.*\n */\nexport const DataGrid = ({\n  density = 'base',\n  striped = true,\n  borderMode = 'full',\n  resizeMode = 'off',\n  containerStyle,\n  enableKeyboardNavigation = false,\n\n  columns,\n  hiddenColumns,\n  columnOrdering,\n  pinnedColumns,\n\n  data,\n  getRowId,\n\n  sortState,\n  onSortChanged,\n\n  selectionMode,\n  selectedRows,\n  disabledRows,\n  onSelectionChanged,\n\n  rowGrouping,\n\n  columnWidths,\n  onColumnsResized,\n\n  'aria-label': ariaLabel,\n}: DataGridProps) => {\n  /**\n   * Refs to the table and table container. Used for keyboard navigation and drag-to-scroll.\n   */\n  const containerRef = useRef<HTMLDivElement>(null);\n  const tableRef = useRef<HTMLTableElement>(null);\n\n  const showFooter = useMemo(() => columns.some((column) => column.renderFooter), [columns]);\n  const ariaRoles = useMemo(\n    () => getAriaRoles({ enableKeyboardNavigation, rowGrouping }),\n    [enableKeyboardNavigation, rowGrouping],\n  );\n  const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);\n\n  /**\n   * Hooks to handle state for selection, sorting, and expanded/collapsed.\n   */\n  const { enableRowSelection, enableMultiRowSelection, rowSelection, onRowSelectionChange } =\n    useSelectionState({\n      selectionMode,\n      selectedRows,\n      disabledRows,\n      onSelectionChanged,\n    });\n\n  const {\n    enableSorting,\n    enableMultiRemove,\n    enableSortingRemoval,\n    manualSorting,\n    sorting,\n    onSortingChange,\n  } = useSortingState({ columns, sortState, onSortChanged });\n\n  const { expanded, onExpandedChange, enableExpanding, getRowCanExpand, getSubRows } =\n    useExpandedState(rowGrouping);\n\n  /**\n   * Hooks to setup column state, including visibility, ordering, pinning, and width(s).\n   */\n  const { mappedColumnDefinitions, columnOrder, columnVisibility, columnPinning } = useColumnState({\n    columns,\n    hiddenColumns,\n    columnOrdering,\n    pinnedColumns,\n    enableRowSelection: !!enableRowSelection,\n  });\n\n  const { columnSizing, onColumnSizingChange } = useColumnWidthState({\n    mappedColumnDefinitions,\n    columnWidths,\n    onColumnsResized,\n  });\n\n  /**\n   * Setup the TanStack table, including mapped column definitions, row data, and any additional state such as\n   * column visibility and ordering.\n   */\n  const table = useReactTable<any>({\n    data,\n    columns: mappedColumnDefinitions,\n\n    // Column settings\n    columnResizeMode: resizeMode === 'off' ? undefined : resizeMode,\n    enableColumnResizing,\n    onColumnSizingChange,\n\n    // Row model\n    getRowId,\n    getCoreRowModel: getCoreRowModel(),\n\n    // Sorting\n    enableSorting,\n    enableSortingRemoval,\n    enableMultiRemove,\n    manualSorting,\n    onSortingChange,\n\n    // Pinning\n    enableColumnPinning: columnPinning.left.length + columnPinning.right.length > 0,\n\n    // Selection\n    enableRowSelection,\n    enableMultiRowSelection,\n    onRowSelectionChange,\n\n    // Row grouping\n    getSubRows,\n    getRowCanExpand,\n    onExpandedChange,\n    enableExpanding,\n    getExpandedRowModel: enableExpanding ? getExpandedRowModel() : undefined,\n\n    // Inject external table state\n    state: {\n      columnOrder,\n      columnVisibility,\n      columnPinning,\n      sorting,\n      rowSelection,\n      expanded,\n      columnSizing,\n    },\n  });\n\n  /**\n   * Pinned column layout\n   */\n  const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n\n  /**\n   * Other hooks\n   */\n  useDragToScroll({ targetRef: containerRef, ignoreClassName: 'data-grid-column-resizer' });\n  useKeyboardNavigation({ tableRef, enableKeyboardNavigation });\n\n  return (\n    <GridContainer\n      containerRef={containerRef}\n      tableRef={tableRef}\n      borderMode={borderMode}\n      containerStyles={{ ...containerStyle, ...pinnedColumnLayoutStyles }}\n      ariaRoles={ariaRoles}\n      enableResizeableColumns={enableColumnResizing}\n      density={density}\n      table={table}\n      aria-label={ariaLabel}\n    >\n      {/* Columns */}\n      {enableColumnResizing && <Columns table={table} />}\n\n      {/* Header */}\n      <Header table={table} />\n\n      {/* Body */}\n      {table.getState().columnSizingInfo.isResizingColumn ? (\n        <MemoizedBody table={table} ariaRoles={ariaRoles} striped={striped} />\n      ) : (\n        <Body table={table} ariaRoles={ariaRoles} striped={striped} />\n      )}\n\n      {/* Footer */}\n      {showFooter && <Footer table={table} ariaRoles={ariaRoles} />}\n    </GridContainer>\n  );\n};\n"],"names":["useRef","useMemo","getAriaRoles","useSelectionState","useSortingState","useExpandedState","useColumnState","useColumnWidthState","useReactTable","getCoreRowModel","getExpandedRowModel","usePinnedColumnLayout","useDragToScroll","useKeyboardNavigation","React","GridContainer","Columns","Header","MemoizedBody","Body","Footer"],"mappings":"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"}

package/dist/components/DataGrid/DataGrid.d.ts

@@ -18,4 +18,4 @@ import { DataGridProps } from './types';
  *
  * *Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.*
  */
-export declare const DataGrid: ({ density, striped, borderMode, resizeMode, containerStyle, enableKeyboardNavigation, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, onSelectionChanged, "aria-label": ariaLabel, }: DataGridProps) => React.JSX.Element;
+export declare const DataGrid: ({ density, striped, borderMode, resizeMode, containerStyle, enableKeyboardNavigation, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, onSelectionChanged, rowGrouping, columnWidths, onColumnsResized, "aria-label": ariaLabel, }: DataGridProps) => React.JSX.Element;