@veeqo/ui 10.0.1 → 10.2.0

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

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

package/dist/components/Choice/Choice.cjs

@@ -18,7 +18,7 @@ const generateClassNames = (prefix) => ({
     tooltip: prefix ? 'choice__tooltip' : undefined,
     error: prefix ? 'choice__error' : undefined,
 });
-const Choice = ({ id, className, label, hint, tooltip, tooltipContent, error, bordered, Badge, Accessory, Footer, children, disabled = false, labelVariant = 'body', inputPosition = 'left', }) => {
+const Choice = ({ htmlFor, className, label, hint, tooltip, tooltipContent, error, bordered, Badge, Accessory, Footer, children, disabled = false, labelVariant = 'body', inputPosition = 'left', }) => {
     const classNames = generateClassNames(className);
     const contentMarkup = (React__default.default.createElement(styled.RootLayout, null,
         inputPosition === 'left' && (React__default.default.createElement(styled.InputLayout, { align: Accessory ? 'center' : 'top' }, children)),
@@ -26,17 +26,17 @@ const Choice = ({ id, className, label, hint, tooltip, tooltipContent, error, bo
         label || hint || error || Badge || Footer ? (React__default.default.createElement(styled.TextLayout, null,
             React__default.default.createElement(Stack.Stack, { direction: "horizontal", alignY: "center", spacing: "sm" },
                 Badge,
-                label && (React__default.default.createElement(Text.Text, { variant: labelVariant, className: classNames.label }, label)),
+                label && (React__default.default.createElement(Text.Text, { as: "label", htmlFor: htmlFor, variant: labelVariant, className: classNames.label }, label)),
                 (tooltip || tooltipContent) && (React__default.default.createElement(styled.BlockTooltip, { text: tooltip, content: tooltipContent, className: classNames.tooltip },
                     React__default.default.createElement(HelpIcon.HelpIcon, { "data-testid": "tooltip-help", name: "help", width: index.theme.sizes.base, color: index.theme.colors.neutral.ink.lightest })))),
-            hint && React__default.default.createElement(styled.HintText, { className: classNames.hint }, hint),
-            error && React__default.default.createElement(styled.ErrorText, { className: classNames.error }, error),
+            hint && (React__default.default.createElement(Text.Text, { id: `hint-${htmlFor}`, variant: "hintText", className: classNames.hint }, hint)),
+            error && (React__default.default.createElement(Text.Text, { variant: "error", className: classNames.error }, error)),
             Footer)) : null,
         inputPosition === 'right' && (React__default.default.createElement(styled.InputLayout, { align: Accessory ? 'center' : 'top' }, children))));
     if (bordered) {
-        return (React__default.default.createElement(styled.BorderedWrapper, { disabled: disabled, htmlFor: id, className: className }, contentMarkup));
+        return (React__default.default.createElement(styled.BorderedWrapper, { disabled: disabled, className: className }, contentMarkup));
     }
-    return (React__default.default.createElement(styled.Wrapper, { disabled: disabled, htmlFor: id, className: className }, contentMarkup));
+    return (React__default.default.createElement(styled.Wrapper, { disabled: disabled, className: className }, contentMarkup));
 };
 
 exports.Choice = Choice;

package/dist/components/Choice/Choice.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Choice.cjs","sources":["../../../src/components/Choice/Choice.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { Stack } from '../Stack';\nimport { theme } from '../../theme';\n\nimport {\n  Wrapper,\n  BorderedWrapper,\n  RootLayout,\n  InputLayout,\n  AccessoryLayout,\n  TextLayout,\n  HintText,\n  ErrorText,\n  BlockTooltip,\n} from './components/styled';\nimport { HelpIcon } from '../../icons/HelpIcon';\nimport { Text } from '../Text';\nimport { TextVariant } from '../Text/types';\n\nexport interface ForwardedChoiceProps {\n  className?: string;\n  disabled?: boolean;\n  label?: ReactNode;\n  hint?: ReactNode;\n  tooltip?: string;\n  tooltipContent?: ReactNode;\n  error?: ReactNode;\n  bordered?: boolean;\n  Badge?: ReactNode;\n  Accessory?: ReactNode;\n  Footer?: ReactNode;\n  inputPosition?: 'left' | 'right';\n  labelVariant?: TextVariant;\n}\n\nexport interface ChoiceProps extends ForwardedChoiceProps {\n  id: string;\n  children: ReactNode;\n}\n\nconst generateClassNames = (prefix?: string): any => ({\n  hint: prefix ? 'choice__hint' : undefined,\n  label: prefix ? 'choice__label' : undefined,\n  tooltip: prefix ? 'choice__tooltip' : undefined,\n  error: prefix ? 'choice__error' : undefined,\n});\n\nexport const Choice = ({\n  id,\n  className,\n  label,\n  hint,\n  tooltip,\n  tooltipContent,\n  error,\n  bordered,\n  Badge,\n  Accessory,\n  Footer,\n  children,\n  disabled = false,\n  labelVariant = 'body',\n  inputPosition = 'left',\n}: ChoiceProps) => {\n  const classNames = generateClassNames(className);\n\n  const contentMarkup = (\n    <RootLayout>\n      {inputPosition === 'left' && (\n        <InputLayout align={Accessory ? 'center' : 'top'}>{children}</InputLayout>\n      )}\n      {Accessory && <AccessoryLayout>{Accessory}</AccessoryLayout>}\n      {label || hint || error || Badge || Footer ? (\n        <TextLayout>\n          <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"sm\">\n            {Badge}\n            {label && (\n              <Text variant={labelVariant} className={classNames.label}>\n                {label}\n              </Text>\n            )}\n            {(tooltip || tooltipContent) && (\n              <BlockTooltip text={tooltip} content={tooltipContent} className={classNames.tooltip}>\n                <HelpIcon\n                  data-testid=\"tooltip-help\"\n                  name=\"help\"\n                  width={theme.sizes.base}\n                  color={theme.colors.neutral.ink.lightest}\n                />\n              </BlockTooltip>\n            )}\n          </Stack>\n          {hint && <HintText className={classNames.hint}>{hint}</HintText>}\n          {error && <ErrorText className={classNames.error}>{error}</ErrorText>}\n          {Footer}\n        </TextLayout>\n      ) : null}\n      {inputPosition === 'right' && (\n        <InputLayout align={Accessory ? 'center' : 'top'}>{children}</InputLayout>\n      )}\n    </RootLayout>\n  );\n\n  if (bordered) {\n    return (\n      <BorderedWrapper disabled={disabled} htmlFor={id} className={className}>\n        {contentMarkup}\n      </BorderedWrapper>\n    );\n  }\n\n  return (\n    <Wrapper disabled={disabled} htmlFor={id} className={className}>\n      {contentMarkup}\n    </Wrapper>\n  );\n};\n"],"names":["React","RootLayout","InputLayout","AccessoryLayout","TextLayout","Stack","Text","BlockTooltip","HelpIcon","theme","HintText","ErrorText","BorderedWrapper","Wrapper"],"mappings":"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"}
+{"version":3,"file":"Choice.cjs","sources":["../../../src/components/Choice/Choice.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { Stack } from '../Stack';\nimport { theme } from '../../theme';\n\nimport {\n  Wrapper,\n  BorderedWrapper,\n  RootLayout,\n  InputLayout,\n  AccessoryLayout,\n  TextLayout,\n  BlockTooltip,\n} from './components/styled';\nimport { HelpIcon } from '../../icons/HelpIcon';\nimport { Text } from '../Text';\nimport { TextVariant } from '../Text/types';\n\nexport interface ForwardedChoiceProps {\n  className?: string;\n  disabled?: boolean;\n  label?: ReactNode;\n  hint?: ReactNode;\n  tooltip?: string;\n  tooltipContent?: ReactNode;\n  error?: ReactNode;\n  bordered?: boolean;\n  Badge?: ReactNode;\n  Accessory?: ReactNode;\n  Footer?: ReactNode;\n  inputPosition?: 'left' | 'right';\n  labelVariant?: TextVariant;\n}\n\nexport interface ChoiceProps extends ForwardedChoiceProps {\n  htmlFor: string;\n  children: ReactNode;\n}\n\nconst generateClassNames = (prefix?: string): any => ({\n  hint: prefix ? 'choice__hint' : undefined,\n  label: prefix ? 'choice__label' : undefined,\n  tooltip: prefix ? 'choice__tooltip' : undefined,\n  error: prefix ? 'choice__error' : undefined,\n});\n\nexport const Choice = ({\n  htmlFor,\n  className,\n  label,\n  hint,\n  tooltip,\n  tooltipContent,\n  error,\n  bordered,\n  Badge,\n  Accessory,\n  Footer,\n  children,\n  disabled = false,\n  labelVariant = 'body',\n  inputPosition = 'left',\n}: ChoiceProps) => {\n  const classNames = generateClassNames(className);\n\n  const contentMarkup = (\n    <RootLayout>\n      {inputPosition === 'left' && (\n        <InputLayout align={Accessory ? 'center' : 'top'}>{children}</InputLayout>\n      )}\n      {Accessory && <AccessoryLayout>{Accessory}</AccessoryLayout>}\n      {label || hint || error || Badge || Footer ? (\n        <TextLayout>\n          <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"sm\">\n            {Badge}\n            {label && (\n              <Text\n                as=\"label\"\n                htmlFor={htmlFor}\n                variant={labelVariant}\n                className={classNames.label}\n              >\n                {label}\n              </Text>\n            )}\n            {(tooltip || tooltipContent) && (\n              <BlockTooltip text={tooltip} content={tooltipContent} className={classNames.tooltip}>\n                <HelpIcon\n                  data-testid=\"tooltip-help\"\n                  name=\"help\"\n                  width={theme.sizes.base}\n                  color={theme.colors.neutral.ink.lightest}\n                />\n              </BlockTooltip>\n            )}\n          </Stack>\n          {hint && (\n            <Text id={`hint-${htmlFor}`} variant=\"hintText\" className={classNames.hint}>\n              {hint}\n            </Text>\n          )}\n          {error && (\n            <Text variant=\"error\" className={classNames.error}>\n              {error}\n            </Text>\n          )}\n          {Footer}\n        </TextLayout>\n      ) : null}\n      {inputPosition === 'right' && (\n        <InputLayout align={Accessory ? 'center' : 'top'}>{children}</InputLayout>\n      )}\n    </RootLayout>\n  );\n\n  if (bordered) {\n    return (\n      <BorderedWrapper disabled={disabled} className={className}>\n        {contentMarkup}\n      </BorderedWrapper>\n    );\n  }\n\n  return (\n    <Wrapper disabled={disabled} className={className}>\n      {contentMarkup}\n    </Wrapper>\n  );\n};\n"],"names":["React","RootLayout","InputLayout","AccessoryLayout","TextLayout","Stack","Text","BlockTooltip","HelpIcon","theme","BorderedWrapper","Wrapper"],"mappings":";;;;;;;;;;;;;;AAsCA,MAAM,kBAAkB,GAAG,CAAC,MAAe,MAAW;IACpD,IAAI,EAAE,MAAM,GAAG,cAAc,GAAG,SAAS;IACzC,KAAK,EAAE,MAAM,GAAG,eAAe,GAAG,SAAS;IAC3C,OAAO,EAAE,MAAM,GAAG,iBAAiB,GAAG,SAAS;IAC/C,KAAK,EAAE,MAAM,GAAG,eAAe,GAAG,SAAS;AAC5C,CAAA,CAAC;AAEW,MAAA,MAAM,GAAG,CAAC,EACrB,OAAO,EACP,SAAS,EACT,KAAK,EACL,IAAI,EACJ,OAAO,EACP,cAAc,EACd,KAAK,EACL,QAAQ,EACR,KAAK,EACL,SAAS,EACT,MAAM,EACN,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,YAAY,GAAG,MAAM,EACrB,aAAa,GAAG,MAAM,GACV,KAAI;AAChB,IAAA,MAAM,UAAU,GAAG,kBAAkB,CAAC,SAAS,CAAC;AAEhD,IAAA,MAAM,aAAa,IACjBA,sBAAA,CAAA,aAAA,CAACC,iBAAU,EAAA,IAAA;QACR,aAAa,KAAK,MAAM,KACvBD,qCAACE,kBAAW,EAAA,EAAC,KAAK,EAAE,SAAS,GAAG,QAAQ,GAAG,KAAK,EAAA,EAAG,QAAQ,CAAe,CAC3E;AACA,QAAA,SAAS,IAAIF,sBAAA,CAAA,aAAA,CAACG,sBAAe,EAAA,IAAA,EAAE,SAAS,CAAmB;AAC3D,QAAA,KAAK,IAAI,IAAI,IAAI,KAAK,IAAI,KAAK,IAAI,MAAM,IACxCH,qCAACI,iBAAU,EAAA,IAAA;AACT,YAAAJ,sBAAA,CAAA,aAAA,CAACK,WAAK,EAAA,EAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAA;gBACvD,KAAK;gBACL,KAAK,KACJL,sBAAA,CAAA,aAAA,CAACM,SAAI,EAAA,EACH,EAAE,EAAC,OAAO,EACV,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,YAAY,EACrB,SAAS,EAAE,UAAU,CAAC,KAAK,EAAA,EAE1B,KAAK,CACD,CACR;gBACA,CAAC,OAAO,IAAI,cAAc,MACzBN,sBAAA,CAAA,aAAA,CAACO,mBAAY,EAAC,EAAA,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,UAAU,CAAC,OAAO,EAAA;AACjF,oBAAAP,sBAAA,CAAA,aAAA,CAACQ,iBAAQ,EAAA,EAAA,aAAA,EACK,cAAc,EAC1B,IAAI,EAAC,MAAM,EACX,KAAK,EAAEC,WAAK,CAAC,KAAK,CAAC,IAAI,EACvB,KAAK,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,EACxC,CAAA,CACW,CAChB,CACK;YACP,IAAI,KACHT,sBAAC,CAAA,aAAA,CAAAM,SAAI,IAAC,EAAE,EAAE,CAAQ,KAAA,EAAA,OAAO,CAAE,CAAA,EAAE,OAAO,EAAC,UAAU,EAAC,SAAS,EAAE,UAAU,CAAC,IAAI,EAAA,EACvE,IAAI,CACA,CACR;AACA,YAAA,KAAK,KACJN,sBAAA,CAAA,aAAA,CAACM,SAAI,EAAA,EAAC,OAAO,EAAC,OAAO,EAAC,SAAS,EAAE,UAAU,CAAC,KAAK,EAC9C,EAAA,KAAK,CACD,CACR;AACA,YAAA,MAAM,CACI,IACX,IAAI;QACP,aAAa,KAAK,OAAO,KACxBN,sBAAA,CAAA,aAAA,CAACE,kBAAW,EAAC,EAAA,KAAK,EAAE,SAAS,GAAG,QAAQ,GAAG,KAAK,EAAA,EAAG,QAAQ,CAAe,CAC3E,CACU,CACd;AAED,IAAA,IAAI,QAAQ,EAAE;AACZ,QAAA,QACEF,sBAAA,CAAA,aAAA,CAACU,sBAAe,EAAA,EAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAA,EACtD,aAAa,CACE;AAErB;AAED,IAAA,QACEV,sBAAA,CAAA,aAAA,CAACW,cAAO,EAAA,EAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAA,EAC9C,aAAa,CACN;AAEd;;;;"}

package/dist/components/Choice/Choice.d.ts

@@ -16,7 +16,7 @@ export interface ForwardedChoiceProps {
     labelVariant?: TextVariant;
 }
 export interface ChoiceProps extends ForwardedChoiceProps {
-    id: string;
+    htmlFor: string;
     children: ReactNode;
 }
-export declare const Choice: ({ id, className, label, hint, tooltip, tooltipContent, error, bordered, Badge, Accessory, Footer, children, disabled, labelVariant, inputPosition, }: ChoiceProps) => React.JSX.Element;
+export declare const Choice: ({ htmlFor, className, label, hint, tooltip, tooltipContent, error, bordered, Badge, Accessory, Footer, children, disabled, labelVariant, inputPosition, }: ChoiceProps) => React.JSX.Element;

package/dist/components/Choice/Choice.js

@@ -2,7 +2,7 @@ import React__default from 'react';
 import { Stack } from '../Stack/Stack.js';
 import '../Stack/types.js';
 import { theme } from '../../theme/index.js';
-import { RootLayout, InputLayout, AccessoryLayout, TextLayout, BlockTooltip, HintText, ErrorText, BorderedWrapper, Wrapper } from './components/styled.js';
+import { RootLayout, InputLayout, AccessoryLayout, TextLayout, BlockTooltip, BorderedWrapper, Wrapper } from './components/styled.js';
 import { HelpIcon } from '../../icons/HelpIcon.js';
 import { Text } from '../Text/Text.js';
 
@@ -12,7 +12,7 @@ const generateClassNames = (prefix) => ({
     tooltip: prefix ? 'choice__tooltip' : undefined,
     error: prefix ? 'choice__error' : undefined,
 });
-const Choice = ({ id, className, label, hint, tooltip, tooltipContent, error, bordered, Badge, Accessory, Footer, children, disabled = false, labelVariant = 'body', inputPosition = 'left', }) => {
+const Choice = ({ htmlFor, className, label, hint, tooltip, tooltipContent, error, bordered, Badge, Accessory, Footer, children, disabled = false, labelVariant = 'body', inputPosition = 'left', }) => {
     const classNames = generateClassNames(className);
     const contentMarkup = (React__default.createElement(RootLayout, null,
         inputPosition === 'left' && (React__default.createElement(InputLayout, { align: Accessory ? 'center' : 'top' }, children)),
@@ -20,17 +20,17 @@ const Choice = ({ id, className, label, hint, tooltip, tooltipContent, error, bo
         label || hint || error || Badge || Footer ? (React__default.createElement(TextLayout, null,
             React__default.createElement(Stack, { direction: "horizontal", alignY: "center", spacing: "sm" },
                 Badge,
-                label && (React__default.createElement(Text, { variant: labelVariant, className: classNames.label }, label)),
+                label && (React__default.createElement(Text, { as: "label", htmlFor: htmlFor, variant: labelVariant, className: classNames.label }, label)),
                 (tooltip || tooltipContent) && (React__default.createElement(BlockTooltip, { text: tooltip, content: tooltipContent, className: classNames.tooltip },
                     React__default.createElement(HelpIcon, { "data-testid": "tooltip-help", name: "help", width: theme.sizes.base, color: theme.colors.neutral.ink.lightest })))),
-            hint && React__default.createElement(HintText, { className: classNames.hint }, hint),
-            error && React__default.createElement(ErrorText, { className: classNames.error }, error),
+            hint && (React__default.createElement(Text, { id: `hint-${htmlFor}`, variant: "hintText", className: classNames.hint }, hint)),
+            error && (React__default.createElement(Text, { variant: "error", className: classNames.error }, error)),
             Footer)) : null,
         inputPosition === 'right' && (React__default.createElement(InputLayout, { align: Accessory ? 'center' : 'top' }, children))));
     if (bordered) {
-        return (React__default.createElement(BorderedWrapper, { disabled: disabled, htmlFor: id, className: className }, contentMarkup));
+        return (React__default.createElement(BorderedWrapper, { disabled: disabled, className: className }, contentMarkup));
     }
-    return (React__default.createElement(Wrapper, { disabled: disabled, htmlFor: id, className: className }, contentMarkup));
+    return (React__default.createElement(Wrapper, { disabled: disabled, className: className }, contentMarkup));
 };
 
 export { Choice };

package/dist/components/Choice/Choice.js.map

@@ -1 +1 @@
-{"version":3,"file":"Choice.js","sources":["../../../src/components/Choice/Choice.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { Stack } from '../Stack';\nimport { theme } from '../../theme';\n\nimport {\n  Wrapper,\n  BorderedWrapper,\n  RootLayout,\n  InputLayout,\n  AccessoryLayout,\n  TextLayout,\n  HintText,\n  ErrorText,\n  BlockTooltip,\n} from './components/styled';\nimport { HelpIcon } from '../../icons/HelpIcon';\nimport { Text } from '../Text';\nimport { TextVariant } from '../Text/types';\n\nexport interface ForwardedChoiceProps {\n  className?: string;\n  disabled?: boolean;\n  label?: ReactNode;\n  hint?: ReactNode;\n  tooltip?: string;\n  tooltipContent?: ReactNode;\n  error?: ReactNode;\n  bordered?: boolean;\n  Badge?: ReactNode;\n  Accessory?: ReactNode;\n  Footer?: ReactNode;\n  inputPosition?: 'left' | 'right';\n  labelVariant?: TextVariant;\n}\n\nexport interface ChoiceProps extends ForwardedChoiceProps {\n  id: string;\n  children: ReactNode;\n}\n\nconst generateClassNames = (prefix?: string): any => ({\n  hint: prefix ? 'choice__hint' : undefined,\n  label: prefix ? 'choice__label' : undefined,\n  tooltip: prefix ? 'choice__tooltip' : undefined,\n  error: prefix ? 'choice__error' : undefined,\n});\n\nexport const Choice = ({\n  id,\n  className,\n  label,\n  hint,\n  tooltip,\n  tooltipContent,\n  error,\n  bordered,\n  Badge,\n  Accessory,\n  Footer,\n  children,\n  disabled = false,\n  labelVariant = 'body',\n  inputPosition = 'left',\n}: ChoiceProps) => {\n  const classNames = generateClassNames(className);\n\n  const contentMarkup = (\n    <RootLayout>\n      {inputPosition === 'left' && (\n        <InputLayout align={Accessory ? 'center' : 'top'}>{children}</InputLayout>\n      )}\n      {Accessory && <AccessoryLayout>{Accessory}</AccessoryLayout>}\n      {label || hint || error || Badge || Footer ? (\n        <TextLayout>\n          <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"sm\">\n            {Badge}\n            {label && (\n              <Text variant={labelVariant} className={classNames.label}>\n                {label}\n              </Text>\n            )}\n            {(tooltip || tooltipContent) && (\n              <BlockTooltip text={tooltip} content={tooltipContent} className={classNames.tooltip}>\n                <HelpIcon\n                  data-testid=\"tooltip-help\"\n                  name=\"help\"\n                  width={theme.sizes.base}\n                  color={theme.colors.neutral.ink.lightest}\n                />\n              </BlockTooltip>\n            )}\n          </Stack>\n          {hint && <HintText className={classNames.hint}>{hint}</HintText>}\n          {error && <ErrorText className={classNames.error}>{error}</ErrorText>}\n          {Footer}\n        </TextLayout>\n      ) : null}\n      {inputPosition === 'right' && (\n        <InputLayout align={Accessory ? 'center' : 'top'}>{children}</InputLayout>\n      )}\n    </RootLayout>\n  );\n\n  if (bordered) {\n    return (\n      <BorderedWrapper disabled={disabled} htmlFor={id} className={className}>\n        {contentMarkup}\n      </BorderedWrapper>\n    );\n  }\n\n  return (\n    <Wrapper disabled={disabled} htmlFor={id} className={className}>\n      {contentMarkup}\n    </Wrapper>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"Choice.js","sources":["../../../src/components/Choice/Choice.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { Stack } from '../Stack';\nimport { theme } from '../../theme';\n\nimport {\n  Wrapper,\n  BorderedWrapper,\n  RootLayout,\n  InputLayout,\n  AccessoryLayout,\n  TextLayout,\n  BlockTooltip,\n} from './components/styled';\nimport { HelpIcon } from '../../icons/HelpIcon';\nimport { Text } from '../Text';\nimport { TextVariant } from '../Text/types';\n\nexport interface ForwardedChoiceProps {\n  className?: string;\n  disabled?: boolean;\n  label?: ReactNode;\n  hint?: ReactNode;\n  tooltip?: string;\n  tooltipContent?: ReactNode;\n  error?: ReactNode;\n  bordered?: boolean;\n  Badge?: ReactNode;\n  Accessory?: ReactNode;\n  Footer?: ReactNode;\n  inputPosition?: 'left' | 'right';\n  labelVariant?: TextVariant;\n}\n\nexport interface ChoiceProps extends ForwardedChoiceProps {\n  htmlFor: string;\n  children: ReactNode;\n}\n\nconst generateClassNames = (prefix?: string): any => ({\n  hint: prefix ? 'choice__hint' : undefined,\n  label: prefix ? 'choice__label' : undefined,\n  tooltip: prefix ? 'choice__tooltip' : undefined,\n  error: prefix ? 'choice__error' : undefined,\n});\n\nexport const Choice = ({\n  htmlFor,\n  className,\n  label,\n  hint,\n  tooltip,\n  tooltipContent,\n  error,\n  bordered,\n  Badge,\n  Accessory,\n  Footer,\n  children,\n  disabled = false,\n  labelVariant = 'body',\n  inputPosition = 'left',\n}: ChoiceProps) => {\n  const classNames = generateClassNames(className);\n\n  const contentMarkup = (\n    <RootLayout>\n      {inputPosition === 'left' && (\n        <InputLayout align={Accessory ? 'center' : 'top'}>{children}</InputLayout>\n      )}\n      {Accessory && <AccessoryLayout>{Accessory}</AccessoryLayout>}\n      {label || hint || error || Badge || Footer ? (\n        <TextLayout>\n          <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"sm\">\n            {Badge}\n            {label && (\n              <Text\n                as=\"label\"\n                htmlFor={htmlFor}\n                variant={labelVariant}\n                className={classNames.label}\n              >\n                {label}\n              </Text>\n            )}\n            {(tooltip || tooltipContent) && (\n              <BlockTooltip text={tooltip} content={tooltipContent} className={classNames.tooltip}>\n                <HelpIcon\n                  data-testid=\"tooltip-help\"\n                  name=\"help\"\n                  width={theme.sizes.base}\n                  color={theme.colors.neutral.ink.lightest}\n                />\n              </BlockTooltip>\n            )}\n          </Stack>\n          {hint && (\n            <Text id={`hint-${htmlFor}`} variant=\"hintText\" className={classNames.hint}>\n              {hint}\n            </Text>\n          )}\n          {error && (\n            <Text variant=\"error\" className={classNames.error}>\n              {error}\n            </Text>\n          )}\n          {Footer}\n        </TextLayout>\n      ) : null}\n      {inputPosition === 'right' && (\n        <InputLayout align={Accessory ? 'center' : 'top'}>{children}</InputLayout>\n      )}\n    </RootLayout>\n  );\n\n  if (bordered) {\n    return (\n      <BorderedWrapper disabled={disabled} className={className}>\n        {contentMarkup}\n      </BorderedWrapper>\n    );\n  }\n\n  return (\n    <Wrapper disabled={disabled} className={className}>\n      {contentMarkup}\n    </Wrapper>\n  );\n};\n"],"names":["React"],"mappings":"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"}

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

@@ -12,21 +12,17 @@ const alignMap = {
     top: 'flex-start',
     center: 'center',
 };
-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;}`;
+const RootLayout = styled__default.default.div.withConfig({ displayName: "vui--RootLayout", componentId: "vui--11nf17l" }) `display:flex;align-items:center;& > * + *{margin-left:${index.theme.sizes.base};}`;
+const InputLayout = styled__default.default.div.withConfig({ displayName: "vui--InputLayout", componentId: "vui--1yac6kr" }) `align-self:stretch;display:flex;align-items:${(props) => alignMap[props.align]};`;
+const AccessoryLayout = styled__default.default.div.withConfig({ displayName: "vui--AccessoryLayout", componentId: "vui--qbgrc7" }) `align-self:center;display:flex;align-items:center;`;
+const TextLayout = styled__default.default.div.withConfig({ displayName: "vui--TextLayout", componentId: "vui--1uu3ed5" }) `flex:1;& > * + *{margin-top:${index.theme.sizes.sm};}`;
+const Wrapper = styled__default.default.label.withConfig({ displayName: "vui--Wrapper", componentId: "vui--taq5r4" }) `box-sizing:border-box;&:hover{cursor:${(props) => (props.disabled ? 'default' : 'pointer')};}`;
+const BorderedWrapper = styled__default.default(Wrapper).withConfig({ displayName: "vui--BorderedWrapper", componentId: "vui--f5wv6j" }) `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--1n3z4wy" }) `display:block;&-hoverable{display:block;}`;
 
 exports.AccessoryLayout = AccessoryLayout;
 exports.BlockTooltip = BlockTooltip;
 exports.BorderedWrapper = BorderedWrapper;
-exports.ErrorText = ErrorText;
-exports.HintText = HintText;
 exports.InputLayout = InputLayout;
 exports.RootLayout = RootLayout;
 exports.TextLayout = TextLayout;

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,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;;;;;;;;;;;;"}
+{"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 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,OAAO,GAAGD,uBAAM,CAAC,KAAK,CAIrB,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,qCAAA,EAAA,CAAC,KAAK,MAAM,KAAK,CAAC,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC,CAAA,EAAA;AAIpD,MAAA,eAAe,GAAGA,uBAAM,CAAC,OAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,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.d.ts

@@ -5,8 +5,6 @@ export interface InputLayoutProps {
 export declare const InputLayout: import("styled-components").StyledComponent<"div", any, InputLayoutProps, never>;
 export declare const AccessoryLayout: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TextLayout: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const HintText: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ErrorText: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Wrapper: import("styled-components").StyledComponent<"label", any, {
     disabled: boolean;
 }, never>;

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

@@ -6,15 +6,13 @@ const alignMap = {
     top: 'flex-start',
     center: 'center',
 };
-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;}`;
+const RootLayout = styled.div.withConfig({ displayName: "vui--RootLayout", componentId: "vui--11nf17l" }) `display:flex;align-items:center;& > * + *{margin-left:${theme.sizes.base};}`;
+const InputLayout = styled.div.withConfig({ displayName: "vui--InputLayout", componentId: "vui--1yac6kr" }) `align-self:stretch;display:flex;align-items:${(props) => alignMap[props.align]};`;
+const AccessoryLayout = styled.div.withConfig({ displayName: "vui--AccessoryLayout", componentId: "vui--qbgrc7" }) `align-self:center;display:flex;align-items:center;`;
+const TextLayout = styled.div.withConfig({ displayName: "vui--TextLayout", componentId: "vui--1uu3ed5" }) `flex:1;& > * + *{margin-top:${theme.sizes.sm};}`;
+const Wrapper = styled.label.withConfig({ displayName: "vui--Wrapper", componentId: "vui--taq5r4" }) `box-sizing:border-box;&:hover{cursor:${(props) => (props.disabled ? 'default' : 'pointer')};}`;
+const BorderedWrapper = styled(Wrapper).withConfig({ displayName: "vui--BorderedWrapper", componentId: "vui--f5wv6j" }) `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--1n3z4wy" }) `display:block;&-hoverable{display:block;}`;
 
-export { AccessoryLayout, BlockTooltip, BorderedWrapper, ErrorText, HintText, InputLayout, RootLayout, TextLayout, Wrapper };
+export { AccessoryLayout, BlockTooltip, BorderedWrapper, 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,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;;;;"}
+{"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 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,OAAO,GAAG,MAAM,CAAC,KAAK,CAIrB,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,qCAAA,EAAA,CAAC,KAAK,MAAM,KAAK,CAAC,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC,CAAA,EAAA;AAIpD,MAAA,eAAe,GAAG,MAAM,CAAC,OAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,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/ChoiceList.cjs

@@ -39,10 +39,11 @@ class ChoiceList extends React.Component {
         };
     }
     render() {
-        const { allowMultiple, options, selected, title, disabled, bordered } = this.props;
+        const { allowMultiple, options, selected, title, disabled, bordered, accessorySlot } = this.props;
         const InputComponent = allowMultiple ? Checkbox.Checkbox : Radio.Radio;
         return (React__default.default.createElement(styled.Fieldset, { disabled: disabled },
             title && React__default.default.createElement(styled.Legend, null, title),
+            accessorySlot,
             options.map((option) => (React__default.default.createElement(InputComponent, { key: option.value, bordered: bordered, checked: selected.includes(option.value), onChange: (checked) => this.handleChange(option.value, checked), ...option })))));
     }
 }

package/dist/components/ChoiceList/ChoiceList.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChoiceList.cjs","sources":["../../../src/components/ChoiceList/ChoiceList.tsx"],"sourcesContent":["import React, { Component, ReactNode } from 'react';\nimport { Radio } from '../Radio';\nimport { Checkbox } from '../Checkbox';\n\nimport { Fieldset, Legend } from './styled';\n\n/* TODO: - Implement error prop */\n\ntype ChoiceListOptionValue = string | number;\n\nexport interface ChoiceListOption {\n  value: ChoiceListOptionValue;\n  name?: string;\n  label: string;\n  hint?: string;\n  disabled?: boolean;\n  Badge?: ReactNode;\n  Accessory?: ReactNode;\n  Footer?: ReactNode;\n}\n\nexport interface ChoiceListProps {\n  options: ChoiceListOption[];\n  selected: ChoiceListOptionValue[];\n  title?: string;\n  allowMultiple?: boolean;\n  disabled?: boolean;\n  bordered?: boolean;\n  error?: string;\n  onChange: (selected: ChoiceListOptionValue[]) => void;\n}\n\nexport class ChoiceList extends Component<ChoiceListProps> {\n  handleChange = (value: ChoiceListOptionValue, checked: boolean) => {\n    const { allowMultiple } = this.props;\n\n    if (allowMultiple) {\n      this.handleChangeMultiple(value, checked);\n      return;\n    }\n\n    this.handleChangeSingle(value, checked);\n  };\n\n  handleChangeSingle = (value: ChoiceListOptionValue, checked: boolean) => {\n    const { onChange } = this.props;\n\n    if (checked) {\n      onChange([value]);\n    }\n  };\n\n  handleChangeMultiple = (value: ChoiceListOptionValue, checked: boolean) => {\n    const { selected, onChange } = this.props;\n    let newSelected = [];\n\n    if (checked) {\n      newSelected = [...selected, value];\n    } else {\n      newSelected = selected.filter((selectedValue) => selectedValue !== value);\n    }\n\n    onChange(newSelected);\n  };\n\n  render() {\n    const { allowMultiple, options, selected, title, disabled, bordered } = this.props;\n\n    const InputComponent = allowMultiple ? Checkbox : Radio;\n\n    return (\n      <Fieldset disabled={disabled}>\n        {title && <Legend>{title}</Legend>}\n        {options.map((option) => (\n          <InputComponent\n            key={option.value}\n            bordered={bordered}\n            checked={selected.includes(option.value)}\n            onChange={(checked: boolean) => this.handleChange(option.value, checked)}\n            {...option}\n          />\n        ))}\n      </Fieldset>\n    );\n  }\n}\n"],"names":["Component","Checkbox","Radio","React","Fieldset","Legend"],"mappings":";;;;;;;;;;;AAgCM,MAAO,UAAW,SAAQA,eAA0B,CAAA;AAA1D,IAAA,WAAA,GAAA;;AACE,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,KAA4B,EAAE,OAAgB,KAAI;AAChE,YAAA,MAAM,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC,KAAK;AAEpC,YAAA,IAAI,aAAa,EAAE;AACjB,gBAAA,IAAI,CAAC,oBAAoB,CAAC,KAAK,EAAE,OAAO,CAAC;gBACzC;AACD;AAED,YAAA,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,OAAO,CAAC;AACzC,SAAC;AAED,QAAA,IAAA,CAAA,kBAAkB,GAAG,CAAC,KAA4B,EAAE,OAAgB,KAAI;AACtE,YAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK;AAE/B,YAAA,IAAI,OAAO,EAAE;AACX,gBAAA,QAAQ,CAAC,CAAC,KAAK,CAAC,CAAC;AAClB;AACH,SAAC;AAED,QAAA,IAAA,CAAA,oBAAoB,GAAG,CAAC,KAA4B,EAAE,OAAgB,KAAI;YACxE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK;YACzC,IAAI,WAAW,GAAG,EAAE;AAEpB,YAAA,IAAI,OAAO,EAAE;AACX,gBAAA,WAAW,GAAG,CAAC,GAAG,QAAQ,EAAE,KAAK,CAAC;AACnC;AAAM,iBAAA;AACL,gBAAA,WAAW,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,aAAa,KAAK,aAAa,KAAK,KAAK,CAAC;AAC1E;YAED,QAAQ,CAAC,WAAW,CAAC;AACvB,SAAC;;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,EAAE,aAAa,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK;QAElF,MAAM,cAAc,GAAG,aAAa,GAAGC,iBAAQ,GAAGC,WAAK;AAEvD,QAAA,QACEC,sBAAC,CAAA,aAAA,CAAAC,eAAQ,EAAC,EAAA,QAAQ,EAAE,QAAQ,EAAA;AACzB,YAAA,KAAK,IAAID,sBAAA,CAAA,aAAA,CAACE,aAAM,EAAA,IAAA,EAAE,KAAK,CAAU;YACjC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MAClBF,sBAAC,CAAA,aAAA,CAAA,cAAc,EACb,EAAA,GAAG,EAAE,MAAM,CAAC,KAAK,EACjB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,QAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,EACxC,QAAQ,EAAE,CAAC,OAAgB,KAAK,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,EAAA,GACpE,MAAM,EAAA,CACV,CACH,CAAC,CACO;;AAGhB;;;;"}
+{"version":3,"file":"ChoiceList.cjs","sources":["../../../src/components/ChoiceList/ChoiceList.tsx"],"sourcesContent":["import React, { Component, ReactNode } from 'react';\nimport { Radio } from '../Radio';\nimport { Checkbox } from '../Checkbox';\n\nimport { Fieldset, Legend } from './styled';\n\n/* TODO: - Implement error prop */\n\ntype ChoiceListOptionValue = string | number;\n\nexport interface ChoiceListOption {\n  id?: string;\n  value: ChoiceListOptionValue;\n  name?: string;\n  label: string;\n  hint?: string;\n  disabled?: boolean;\n  Badge?: ReactNode;\n  Accessory?: ReactNode;\n  Footer?: ReactNode;\n}\n\nexport interface ChoiceListProps {\n  options: ChoiceListOption[];\n  selected: ChoiceListOptionValue[];\n  title?: string;\n  accessorySlot?: ReactNode;\n  allowMultiple?: boolean;\n  disabled?: boolean;\n  bordered?: boolean;\n  error?: string;\n  onChange: (selected: ChoiceListOptionValue[]) => void;\n}\n\nexport class ChoiceList extends Component<ChoiceListProps> {\n  handleChange = (value: ChoiceListOptionValue, checked: boolean) => {\n    const { allowMultiple } = this.props;\n\n    if (allowMultiple) {\n      this.handleChangeMultiple(value, checked);\n      return;\n    }\n\n    this.handleChangeSingle(value, checked);\n  };\n\n  handleChangeSingle = (value: ChoiceListOptionValue, checked: boolean) => {\n    const { onChange } = this.props;\n\n    if (checked) {\n      onChange([value]);\n    }\n  };\n\n  handleChangeMultiple = (value: ChoiceListOptionValue, checked: boolean) => {\n    const { selected, onChange } = this.props;\n    let newSelected = [];\n\n    if (checked) {\n      newSelected = [...selected, value];\n    } else {\n      newSelected = selected.filter((selectedValue) => selectedValue !== value);\n    }\n\n    onChange(newSelected);\n  };\n\n  render() {\n    const { allowMultiple, options, selected, title, disabled, bordered, accessorySlot } =\n      this.props;\n\n    const InputComponent = allowMultiple ? Checkbox : Radio;\n\n    return (\n      <Fieldset disabled={disabled}>\n        {title && <Legend>{title}</Legend>}\n        {accessorySlot}\n        {options.map((option) => (\n          <InputComponent\n            key={option.value}\n            bordered={bordered}\n            checked={selected.includes(option.value)}\n            onChange={(checked: boolean) => this.handleChange(option.value, checked)}\n            {...option}\n          />\n        ))}\n      </Fieldset>\n    );\n  }\n}\n"],"names":["Component","Checkbox","Radio","React","Fieldset","Legend"],"mappings":";;;;;;;;;;;AAkCM,MAAO,UAAW,SAAQA,eAA0B,CAAA;AAA1D,IAAA,WAAA,GAAA;;AACE,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,KAA4B,EAAE,OAAgB,KAAI;AAChE,YAAA,MAAM,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC,KAAK;AAEpC,YAAA,IAAI,aAAa,EAAE;AACjB,gBAAA,IAAI,CAAC,oBAAoB,CAAC,KAAK,EAAE,OAAO,CAAC;gBACzC;AACD;AAED,YAAA,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,OAAO,CAAC;AACzC,SAAC;AAED,QAAA,IAAA,CAAA,kBAAkB,GAAG,CAAC,KAA4B,EAAE,OAAgB,KAAI;AACtE,YAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK;AAE/B,YAAA,IAAI,OAAO,EAAE;AACX,gBAAA,QAAQ,CAAC,CAAC,KAAK,CAAC,CAAC;AAClB;AACH,SAAC;AAED,QAAA,IAAA,CAAA,oBAAoB,GAAG,CAAC,KAA4B,EAAE,OAAgB,KAAI;YACxE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK;YACzC,IAAI,WAAW,GAAG,EAAE;AAEpB,YAAA,IAAI,OAAO,EAAE;AACX,gBAAA,WAAW,GAAG,CAAC,GAAG,QAAQ,EAAE,KAAK,CAAC;AACnC;AAAM,iBAAA;AACL,gBAAA,WAAW,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,aAAa,KAAK,aAAa,KAAK,KAAK,CAAC;AAC1E;YAED,QAAQ,CAAC,WAAW,CAAC;AACvB,SAAC;;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,EAAE,aAAa,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,aAAa,EAAE,GAClF,IAAI,CAAC,KAAK;QAEZ,MAAM,cAAc,GAAG,aAAa,GAAGC,iBAAQ,GAAGC,WAAK;AAEvD,QAAA,QACEC,sBAAC,CAAA,aAAA,CAAAC,eAAQ,EAAC,EAAA,QAAQ,EAAE,QAAQ,EAAA;AACzB,YAAA,KAAK,IAAID,sBAAA,CAAA,aAAA,CAACE,aAAM,EAAA,IAAA,EAAE,KAAK,CAAU;YACjC,aAAa;YACb,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MAClBF,sBAAC,CAAA,aAAA,CAAA,cAAc,EACb,EAAA,GAAG,EAAE,MAAM,CAAC,KAAK,EACjB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,QAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,EACxC,QAAQ,EAAE,CAAC,OAAgB,KAAK,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,EAAA,GACpE,MAAM,EAAA,CACV,CACH,CAAC,CACO;;AAGhB;;;;"}

package/dist/components/ChoiceList/ChoiceList.d.ts

@@ -1,6 +1,7 @@
 import React, { Component, ReactNode } from 'react';
 type ChoiceListOptionValue = string | number;
 export interface ChoiceListOption {
+    id?: string;
     value: ChoiceListOptionValue;
     name?: string;
     label: string;
@@ -14,6 +15,7 @@ export interface ChoiceListProps {
     options: ChoiceListOption[];
     selected: ChoiceListOptionValue[];
     title?: string;
+    accessorySlot?: ReactNode;
     allowMultiple?: boolean;
     disabled?: boolean;
     bordered?: boolean;

package/dist/components/ChoiceList/ChoiceList.js

@@ -33,10 +33,11 @@ class ChoiceList extends Component {
         };
     }
     render() {
-        const { allowMultiple, options, selected, title, disabled, bordered } = this.props;
+        const { allowMultiple, options, selected, title, disabled, bordered, accessorySlot } = this.props;
         const InputComponent = allowMultiple ? Checkbox : Radio;
         return (React__default.createElement(Fieldset, { disabled: disabled },
             title && React__default.createElement(Legend, null, title),
+            accessorySlot,
             options.map((option) => (React__default.createElement(InputComponent, { key: option.value, bordered: bordered, checked: selected.includes(option.value), onChange: (checked) => this.handleChange(option.value, checked), ...option })))));
     }
 }

package/dist/components/ChoiceList/ChoiceList.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChoiceList.js","sources":["../../../src/components/ChoiceList/ChoiceList.tsx"],"sourcesContent":["import React, { Component, ReactNode } from 'react';\nimport { Radio } from '../Radio';\nimport { Checkbox } from '../Checkbox';\n\nimport { Fieldset, Legend } from './styled';\n\n/* TODO: - Implement error prop */\n\ntype ChoiceListOptionValue = string | number;\n\nexport interface ChoiceListOption {\n  value: ChoiceListOptionValue;\n  name?: string;\n  label: string;\n  hint?: string;\n  disabled?: boolean;\n  Badge?: ReactNode;\n  Accessory?: ReactNode;\n  Footer?: ReactNode;\n}\n\nexport interface ChoiceListProps {\n  options: ChoiceListOption[];\n  selected: ChoiceListOptionValue[];\n  title?: string;\n  allowMultiple?: boolean;\n  disabled?: boolean;\n  bordered?: boolean;\n  error?: string;\n  onChange: (selected: ChoiceListOptionValue[]) => void;\n}\n\nexport class ChoiceList extends Component<ChoiceListProps> {\n  handleChange = (value: ChoiceListOptionValue, checked: boolean) => {\n    const { allowMultiple } = this.props;\n\n    if (allowMultiple) {\n      this.handleChangeMultiple(value, checked);\n      return;\n    }\n\n    this.handleChangeSingle(value, checked);\n  };\n\n  handleChangeSingle = (value: ChoiceListOptionValue, checked: boolean) => {\n    const { onChange } = this.props;\n\n    if (checked) {\n      onChange([value]);\n    }\n  };\n\n  handleChangeMultiple = (value: ChoiceListOptionValue, checked: boolean) => {\n    const { selected, onChange } = this.props;\n    let newSelected = [];\n\n    if (checked) {\n      newSelected = [...selected, value];\n    } else {\n      newSelected = selected.filter((selectedValue) => selectedValue !== value);\n    }\n\n    onChange(newSelected);\n  };\n\n  render() {\n    const { allowMultiple, options, selected, title, disabled, bordered } = this.props;\n\n    const InputComponent = allowMultiple ? Checkbox : Radio;\n\n    return (\n      <Fieldset disabled={disabled}>\n        {title && <Legend>{title}</Legend>}\n        {options.map((option) => (\n          <InputComponent\n            key={option.value}\n            bordered={bordered}\n            checked={selected.includes(option.value)}\n            onChange={(checked: boolean) => this.handleChange(option.value, checked)}\n            {...option}\n          />\n        ))}\n      </Fieldset>\n    );\n  }\n}\n"],"names":["React"],"mappings":";;;;;AAgCM,MAAO,UAAW,SAAQ,SAA0B,CAAA;AAA1D,IAAA,WAAA,GAAA;;AACE,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,KAA4B,EAAE,OAAgB,KAAI;AAChE,YAAA,MAAM,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC,KAAK;AAEpC,YAAA,IAAI,aAAa,EAAE;AACjB,gBAAA,IAAI,CAAC,oBAAoB,CAAC,KAAK,EAAE,OAAO,CAAC;gBACzC;AACD;AAED,YAAA,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,OAAO,CAAC;AACzC,SAAC;AAED,QAAA,IAAA,CAAA,kBAAkB,GAAG,CAAC,KAA4B,EAAE,OAAgB,KAAI;AACtE,YAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK;AAE/B,YAAA,IAAI,OAAO,EAAE;AACX,gBAAA,QAAQ,CAAC,CAAC,KAAK,CAAC,CAAC;AAClB;AACH,SAAC;AAED,QAAA,IAAA,CAAA,oBAAoB,GAAG,CAAC,KAA4B,EAAE,OAAgB,KAAI;YACxE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK;YACzC,IAAI,WAAW,GAAG,EAAE;AAEpB,YAAA,IAAI,OAAO,EAAE;AACX,gBAAA,WAAW,GAAG,CAAC,GAAG,QAAQ,EAAE,KAAK,CAAC;AACnC;AAAM,iBAAA;AACL,gBAAA,WAAW,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,aAAa,KAAK,aAAa,KAAK,KAAK,CAAC;AAC1E;YAED,QAAQ,CAAC,WAAW,CAAC;AACvB,SAAC;;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,EAAE,aAAa,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK;QAElF,MAAM,cAAc,GAAG,aAAa,GAAG,QAAQ,GAAG,KAAK;AAEvD,QAAA,QACEA,cAAC,CAAA,aAAA,CAAA,QAAQ,EAAC,EAAA,QAAQ,EAAE,QAAQ,EAAA;AACzB,YAAA,KAAK,IAAIA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,IAAA,EAAE,KAAK,CAAU;YACjC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MAClBA,cAAC,CAAA,aAAA,CAAA,cAAc,EACb,EAAA,GAAG,EAAE,MAAM,CAAC,KAAK,EACjB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,QAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,EACxC,QAAQ,EAAE,CAAC,OAAgB,KAAK,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,EAAA,GACpE,MAAM,EAAA,CACV,CACH,CAAC,CACO;;AAGhB;;;;"}
+{"version":3,"file":"ChoiceList.js","sources":["../../../src/components/ChoiceList/ChoiceList.tsx"],"sourcesContent":["import React, { Component, ReactNode } from 'react';\nimport { Radio } from '../Radio';\nimport { Checkbox } from '../Checkbox';\n\nimport { Fieldset, Legend } from './styled';\n\n/* TODO: - Implement error prop */\n\ntype ChoiceListOptionValue = string | number;\n\nexport interface ChoiceListOption {\n  id?: string;\n  value: ChoiceListOptionValue;\n  name?: string;\n  label: string;\n  hint?: string;\n  disabled?: boolean;\n  Badge?: ReactNode;\n  Accessory?: ReactNode;\n  Footer?: ReactNode;\n}\n\nexport interface ChoiceListProps {\n  options: ChoiceListOption[];\n  selected: ChoiceListOptionValue[];\n  title?: string;\n  accessorySlot?: ReactNode;\n  allowMultiple?: boolean;\n  disabled?: boolean;\n  bordered?: boolean;\n  error?: string;\n  onChange: (selected: ChoiceListOptionValue[]) => void;\n}\n\nexport class ChoiceList extends Component<ChoiceListProps> {\n  handleChange = (value: ChoiceListOptionValue, checked: boolean) => {\n    const { allowMultiple } = this.props;\n\n    if (allowMultiple) {\n      this.handleChangeMultiple(value, checked);\n      return;\n    }\n\n    this.handleChangeSingle(value, checked);\n  };\n\n  handleChangeSingle = (value: ChoiceListOptionValue, checked: boolean) => {\n    const { onChange } = this.props;\n\n    if (checked) {\n      onChange([value]);\n    }\n  };\n\n  handleChangeMultiple = (value: ChoiceListOptionValue, checked: boolean) => {\n    const { selected, onChange } = this.props;\n    let newSelected = [];\n\n    if (checked) {\n      newSelected = [...selected, value];\n    } else {\n      newSelected = selected.filter((selectedValue) => selectedValue !== value);\n    }\n\n    onChange(newSelected);\n  };\n\n  render() {\n    const { allowMultiple, options, selected, title, disabled, bordered, accessorySlot } =\n      this.props;\n\n    const InputComponent = allowMultiple ? Checkbox : Radio;\n\n    return (\n      <Fieldset disabled={disabled}>\n        {title && <Legend>{title}</Legend>}\n        {accessorySlot}\n        {options.map((option) => (\n          <InputComponent\n            key={option.value}\n            bordered={bordered}\n            checked={selected.includes(option.value)}\n            onChange={(checked: boolean) => this.handleChange(option.value, checked)}\n            {...option}\n          />\n        ))}\n      </Fieldset>\n    );\n  }\n}\n"],"names":["React"],"mappings":";;;;;AAkCM,MAAO,UAAW,SAAQ,SAA0B,CAAA;AAA1D,IAAA,WAAA,GAAA;;AACE,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,KAA4B,EAAE,OAAgB,KAAI;AAChE,YAAA,MAAM,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC,KAAK;AAEpC,YAAA,IAAI,aAAa,EAAE;AACjB,gBAAA,IAAI,CAAC,oBAAoB,CAAC,KAAK,EAAE,OAAO,CAAC;gBACzC;AACD;AAED,YAAA,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,OAAO,CAAC;AACzC,SAAC;AAED,QAAA,IAAA,CAAA,kBAAkB,GAAG,CAAC,KAA4B,EAAE,OAAgB,KAAI;AACtE,YAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK;AAE/B,YAAA,IAAI,OAAO,EAAE;AACX,gBAAA,QAAQ,CAAC,CAAC,KAAK,CAAC,CAAC;AAClB;AACH,SAAC;AAED,QAAA,IAAA,CAAA,oBAAoB,GAAG,CAAC,KAA4B,EAAE,OAAgB,KAAI;YACxE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK;YACzC,IAAI,WAAW,GAAG,EAAE;AAEpB,YAAA,IAAI,OAAO,EAAE;AACX,gBAAA,WAAW,GAAG,CAAC,GAAG,QAAQ,EAAE,KAAK,CAAC;AACnC;AAAM,iBAAA;AACL,gBAAA,WAAW,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,aAAa,KAAK,aAAa,KAAK,KAAK,CAAC;AAC1E;YAED,QAAQ,CAAC,WAAW,CAAC;AACvB,SAAC;;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,EAAE,aAAa,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,aAAa,EAAE,GAClF,IAAI,CAAC,KAAK;QAEZ,MAAM,cAAc,GAAG,aAAa,GAAG,QAAQ,GAAG,KAAK;AAEvD,QAAA,QACEA,cAAC,CAAA,aAAA,CAAA,QAAQ,EAAC,EAAA,QAAQ,EAAE,QAAQ,EAAA;AACzB,YAAA,KAAK,IAAIA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,IAAA,EAAE,KAAK,CAAU;YACjC,aAAa;YACb,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MAClBA,cAAC,CAAA,aAAA,CAAA,cAAc,EACb,EAAA,GAAG,EAAE,MAAM,CAAC,KAAK,EACjB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,QAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,EACxC,QAAQ,EAAE,CAAC,OAAgB,KAAK,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,EAAA,GACpE,MAAM,EAAA,CACV,CACH,CAAC,CACO;;AAGhB;;;;"}

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--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};`;
+const Fieldset = styled__default.default.fieldset.withConfig({ displayName: "vui--Fieldset", componentId: "vui--bygv6o" }) `padding:0;display:flex;flex-direction:column;border:0;& > * + *{margin-top:16px;}`;
+const Legend = styled__default.default.legend.withConfig({ displayName: "vui--Legend", componentId: "vui--18baj4v" }) `font-family:${index.theme.text.inputLabel.fontFamily};font-size:${index.theme.text.inputLabel.fontSize};font-style:${index.theme.text.inputLabel.fontStyle};font-weight:${index.theme.text.inputLabel.fontWeight};line-height:${index.theme.text.inputLabel.lineHeight};text-decoration:${index.theme.text.inputLabel.textDecoration};color:${index.theme.text.inputLabel.color};`;
 
 exports.Fieldset = Fieldset;
 exports.Legend = Legend;

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

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

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

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

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

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--19w75dt" }) `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--e6p1xr" }) `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 '../../icons/SuccessIcon';\nimport { sizes } from '../../theme/modules/sizes';\nimport { Button } from '../Button';\nimport { ClipboardIcon } from '../../icons/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;;;;"}
+{"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 '../../icons/SuccessIcon';\nimport { sizes } from '../../theme/modules/sizes';\nimport { Button } from '../Button';\nimport { ClipboardIcon } from '../../icons/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;;;;"}

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--19w75dt" }) `padding:1px;height:unset;span{height:${sizes.base};width:${sizes.base};top:unset;}`;
+const XSButton = styled(Button).withConfig({ displayName: "vui--XSButton", componentId: "vui--e6p1xr" }) `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 '../../icons/SuccessIcon';\nimport { sizes } from '../../theme/modules/sizes';\nimport { Button } from '../Button';\nimport { ClipboardIcon } from '../../icons/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;;;;"}
+{"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 '../../icons/SuccessIcon';\nimport { sizes } from '../../theme/modules/sizes';\nimport { Button } from '../Button';\nimport { ClipboardIcon } from '../../icons/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;;;;"}

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

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

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

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