@veeqo/ui 10.1.0 → 10.2.0

package/dist/components/Checkbox/Checkbox.cjs

@@ -9,8 +9,8 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const Checkbox = ({ checked, indeterminate, value, name, disabled, ariaLabel, className, onChange, ...otherProps }) => {
-    const id = React.useMemo(() => generateId.generateId('checkbox'), []);
+const Checkbox = ({ id, checked, indeterminate, value, name, hint, disabled, ariaLabel, className, onChange, ...otherProps }) => {
+    const componentId = React.useMemo(() => id !== null && id !== undefined ? id : generateId.generateId('checkbox'), [id]);
     const checkboxRef = React.useRef(null);
     const handleChange = React.useCallback((e) => {
         onChange(e.currentTarget.checked, value);
@@ -24,8 +24,9 @@ const Checkbox = ({ checked, indeterminate, value, name, disabled, ariaLabel, cl
         }
         checkboxRef.current.indeterminate = false;
     }, [indeterminate]);
-    return (React__default.default.createElement(Choice.Choice, { id: id, disabled: disabled, className: className, ...otherProps },
-        React__default.default.createElement(styled.Input, { ref: checkboxRef, id: id, type: "checkbox", checked: checked, value: value, name: name, disabled: disabled, "aria-label": ariaLabel, onChange: handleChange })));
+    const ariaDescribedBy = hint ? `hint-${componentId}` : undefined;
+    return (React__default.default.createElement(Choice.Choice, { htmlFor: componentId, disabled: disabled, className: className, hint: hint, ...otherProps },
+        React__default.default.createElement(styled.Input, { ref: checkboxRef, id: componentId, type: "checkbox", checked: checked, value: value, name: name, disabled: disabled, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, onChange: handleChange })));
 };
 
 exports.Checkbox = Checkbox;

package/dist/components/Checkbox/Checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.cjs","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { Input } from './styled';\nimport { generateId } from '../../utils/generateId';\n\nexport type CheckboxValue = string | number;\n\nexport interface CheckboxProps extends ForwardedChoiceProps {\n  checked: boolean;\n  indeterminate?: boolean;\n  value?: CheckboxValue;\n  name?: string;\n  disabled?: boolean;\n  ariaLabel?: string;\n  onChange: (checked: boolean, value?: CheckboxValue) => void;\n  className?: string;\n}\n\nexport const Checkbox = ({\n  checked,\n  indeterminate,\n  value,\n  name,\n  disabled,\n  ariaLabel,\n  className,\n  onChange,\n  ...otherProps\n}: CheckboxProps) => {\n  const id = useMemo(() => generateId('checkbox'), []);\n  const checkboxRef = useRef<HTMLInputElement>(null);\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      onChange(e.currentTarget.checked, value);\n    },\n    [onChange, value],\n  );\n\n  useEffect(() => {\n    if (!checkboxRef.current) return;\n    if (indeterminate === true) {\n      checkboxRef.current.indeterminate = true;\n      return;\n    }\n    checkboxRef.current.indeterminate = false;\n  }, [indeterminate]);\n\n  return (\n    <Choice id={id} disabled={disabled} className={className} {...otherProps}>\n      <Input\n        ref={checkboxRef}\n        id={id}\n        type=\"checkbox\"\n        checked={checked}\n        value={value}\n        name={name}\n        disabled={disabled}\n        aria-label={ariaLabel}\n        onChange={handleChange}\n      />\n    </Choice>\n  );\n};\n"],"names":["useMemo","generateId","useRef","useCallback","useEffect","React","Choice","Input"],"mappings":";;;;;;;;;;;AAkBa,MAAA,QAAQ,GAAG,CAAC,EACvB,OAAO,EACP,aAAa,EACb,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,SAAS,EACT,QAAQ,EACR,GAAG,UAAU,EACC,KAAI;AAClB,IAAA,MAAM,EAAE,GAAGA,aAAO,CAAC,MAAMC,qBAAU,CAAC,UAAU,CAAC,EAAE,EAAE,CAAC;AACpD,IAAA,MAAM,WAAW,GAAGC,YAAM,CAAmB,IAAI,CAAC;AAElD,IAAA,MAAM,YAAY,GAAGC,iBAAW,CAC9B,CAAC,CAAsC,KAAI;QACzC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;AAC1C,KAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;IAEDC,eAAS,CAAC,MAAK;QACb,IAAI,CAAC,WAAW,CAAC,OAAO;YAAE;QAC1B,IAAI,aAAa,KAAK,IAAI,EAAE;AAC1B,YAAA,WAAW,CAAC,OAAO,CAAC,aAAa,GAAG,IAAI;YACxC;AACD;AACD,QAAA,WAAW,CAAC,OAAO,CAAC,aAAa,GAAG,KAAK;AAC3C,KAAC,EAAE,CAAC,aAAa,CAAC,CAAC;AAEnB,IAAA,QACEC,sBAAC,CAAA,aAAA,CAAAC,aAAM,EAAC,EAAA,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,KAAM,UAAU,EAAA;AACtE,QAAAD,sBAAA,CAAA,aAAA,CAACE,YAAK,EACJ,EAAA,GAAG,EAAE,WAAW,EAChB,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EACN,YAAA,EAAA,SAAS,EACrB,QAAQ,EAAE,YAAY,EACtB,CAAA,CACK;AAEb;;;;"}
+{"version":3,"file":"Checkbox.cjs","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useMemo } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { Input } from './styled';\nimport { generateId } from '../../utils/generateId';\n\nexport type CheckboxValue = string | number;\n\nexport interface CheckboxProps extends ForwardedChoiceProps {\n  id?: string;\n  checked: boolean;\n  indeterminate?: boolean;\n  value?: CheckboxValue;\n  name?: string;\n  disabled?: boolean;\n  ariaLabel?: string;\n  onChange: (checked: boolean, value?: CheckboxValue) => void;\n  className?: string;\n}\n\nexport const Checkbox = ({\n  id,\n  checked,\n  indeterminate,\n  value,\n  name,\n  hint,\n  disabled,\n  ariaLabel,\n  className,\n  onChange,\n  ...otherProps\n}: CheckboxProps) => {\n  const componentId = useMemo(() => id ?? generateId('checkbox'), [id]);\n  const checkboxRef = useRef<HTMLInputElement>(null);\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      onChange(e.currentTarget.checked, value);\n    },\n    [onChange, value],\n  );\n\n  useEffect(() => {\n    if (!checkboxRef.current) return;\n    if (indeterminate === true) {\n      checkboxRef.current.indeterminate = true;\n      return;\n    }\n    checkboxRef.current.indeterminate = false;\n  }, [indeterminate]);\n\n  const ariaDescribedBy = hint ? `hint-${componentId}` : undefined;\n\n  return (\n    <Choice\n      htmlFor={componentId}\n      disabled={disabled}\n      className={className}\n      hint={hint}\n      {...otherProps}\n    >\n      <Input\n        ref={checkboxRef}\n        id={componentId}\n        type=\"checkbox\"\n        checked={checked}\n        value={value}\n        name={name}\n        disabled={disabled}\n        aria-label={ariaLabel}\n        aria-describedby={ariaDescribedBy}\n        onChange={handleChange}\n      />\n    </Choice>\n  );\n};\n"],"names":["useMemo","generateId","useRef","useCallback","useEffect","React","Choice","Input"],"mappings":";;;;;;;;;;;AAmBO,MAAM,QAAQ,GAAG,CAAC,EACvB,EAAE,EACF,OAAO,EACP,aAAa,EACb,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,SAAS,EACT,QAAQ,EACR,GAAG,UAAU,EACC,KAAI;IAClB,MAAM,WAAW,GAAGA,aAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,SAAA,GAAF,EAAE,GAAIC,qBAAU,CAAC,UAAU,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AACrE,IAAA,MAAM,WAAW,GAAGC,YAAM,CAAmB,IAAI,CAAC;AAElD,IAAA,MAAM,YAAY,GAAGC,iBAAW,CAC9B,CAAC,CAAsC,KAAI;QACzC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;AAC1C,KAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;IAEDC,eAAS,CAAC,MAAK;QACb,IAAI,CAAC,WAAW,CAAC,OAAO;YAAE;QAC1B,IAAI,aAAa,KAAK,IAAI,EAAE;AAC1B,YAAA,WAAW,CAAC,OAAO,CAAC,aAAa,GAAG,IAAI;YACxC;AACD;AACD,QAAA,WAAW,CAAC,OAAO,CAAC,aAAa,GAAG,KAAK;AAC3C,KAAC,EAAE,CAAC,aAAa,CAAC,CAAC;AAEnB,IAAA,MAAM,eAAe,GAAG,IAAI,GAAG,CAAQ,KAAA,EAAA,WAAW,CAAE,CAAA,GAAG,SAAS;IAEhE,QACEC,qCAACC,aAAM,EAAA,EACL,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,KACN,UAAU,EAAA;AAEd,QAAAD,sBAAA,CAAA,aAAA,CAACE,YAAK,EACJ,EAAA,GAAG,EAAE,WAAW,EAChB,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EACN,YAAA,EAAA,SAAS,EACH,kBAAA,EAAA,eAAe,EACjC,QAAQ,EAAE,YAAY,EACtB,CAAA,CACK;AAEb;;;;"}

package/dist/components/Checkbox/Checkbox.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { ForwardedChoiceProps } from '../Choice';
 export type CheckboxValue = string | number;
 export interface CheckboxProps extends ForwardedChoiceProps {
+    id?: string;
     checked: boolean;
     indeterminate?: boolean;
     value?: CheckboxValue;
@@ -11,4 +12,4 @@ export interface CheckboxProps extends ForwardedChoiceProps {
     onChange: (checked: boolean, value?: CheckboxValue) => void;
     className?: string;
 }
-export declare const Checkbox: ({ checked, indeterminate, value, name, disabled, ariaLabel, className, onChange, ...otherProps }: CheckboxProps) => React.JSX.Element;
+export declare const Checkbox: ({ id, checked, indeterminate, value, name, hint, disabled, ariaLabel, className, onChange, ...otherProps }: CheckboxProps) => React.JSX.Element;

package/dist/components/Checkbox/Checkbox.js

@@ -3,8 +3,8 @@ import { Choice } from '../Choice/Choice.js';
 import { Input } from './styled.js';
 import { generateId } from '../../utils/generateId.js';
 
-const Checkbox = ({ checked, indeterminate, value, name, disabled, ariaLabel, className, onChange, ...otherProps }) => {
-    const id = useMemo(() => generateId('checkbox'), []);
+const Checkbox = ({ id, checked, indeterminate, value, name, hint, disabled, ariaLabel, className, onChange, ...otherProps }) => {
+    const componentId = useMemo(() => id !== null && id !== undefined ? id : generateId('checkbox'), [id]);
     const checkboxRef = useRef(null);
     const handleChange = useCallback((e) => {
         onChange(e.currentTarget.checked, value);
@@ -18,8 +18,9 @@ const Checkbox = ({ checked, indeterminate, value, name, disabled, ariaLabel, cl
         }
         checkboxRef.current.indeterminate = false;
     }, [indeterminate]);
-    return (React__default.createElement(Choice, { id: id, disabled: disabled, className: className, ...otherProps },
-        React__default.createElement(Input, { ref: checkboxRef, id: id, type: "checkbox", checked: checked, value: value, name: name, disabled: disabled, "aria-label": ariaLabel, onChange: handleChange })));
+    const ariaDescribedBy = hint ? `hint-${componentId}` : undefined;
+    return (React__default.createElement(Choice, { htmlFor: componentId, disabled: disabled, className: className, hint: hint, ...otherProps },
+        React__default.createElement(Input, { ref: checkboxRef, id: componentId, type: "checkbox", checked: checked, value: value, name: name, disabled: disabled, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, onChange: handleChange })));
 };
 
 export { Checkbox };

package/dist/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { Input } from './styled';\nimport { generateId } from '../../utils/generateId';\n\nexport type CheckboxValue = string | number;\n\nexport interface CheckboxProps extends ForwardedChoiceProps {\n  checked: boolean;\n  indeterminate?: boolean;\n  value?: CheckboxValue;\n  name?: string;\n  disabled?: boolean;\n  ariaLabel?: string;\n  onChange: (checked: boolean, value?: CheckboxValue) => void;\n  className?: string;\n}\n\nexport const Checkbox = ({\n  checked,\n  indeterminate,\n  value,\n  name,\n  disabled,\n  ariaLabel,\n  className,\n  onChange,\n  ...otherProps\n}: CheckboxProps) => {\n  const id = useMemo(() => generateId('checkbox'), []);\n  const checkboxRef = useRef<HTMLInputElement>(null);\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      onChange(e.currentTarget.checked, value);\n    },\n    [onChange, value],\n  );\n\n  useEffect(() => {\n    if (!checkboxRef.current) return;\n    if (indeterminate === true) {\n      checkboxRef.current.indeterminate = true;\n      return;\n    }\n    checkboxRef.current.indeterminate = false;\n  }, [indeterminate]);\n\n  return (\n    <Choice id={id} disabled={disabled} className={className} {...otherProps}>\n      <Input\n        ref={checkboxRef}\n        id={id}\n        type=\"checkbox\"\n        checked={checked}\n        value={value}\n        name={name}\n        disabled={disabled}\n        aria-label={ariaLabel}\n        onChange={handleChange}\n      />\n    </Choice>\n  );\n};\n"],"names":["React"],"mappings":";;;;;AAkBa,MAAA,QAAQ,GAAG,CAAC,EACvB,OAAO,EACP,aAAa,EACb,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,SAAS,EACT,QAAQ,EACR,GAAG,UAAU,EACC,KAAI;AAClB,IAAA,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,UAAU,CAAC,UAAU,CAAC,EAAE,EAAE,CAAC;AACpD,IAAA,MAAM,WAAW,GAAG,MAAM,CAAmB,IAAI,CAAC;AAElD,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAsC,KAAI;QACzC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;AAC1C,KAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;IAED,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,WAAW,CAAC,OAAO;YAAE;QAC1B,IAAI,aAAa,KAAK,IAAI,EAAE;AAC1B,YAAA,WAAW,CAAC,OAAO,CAAC,aAAa,GAAG,IAAI;YACxC;AACD;AACD,QAAA,WAAW,CAAC,OAAO,CAAC,aAAa,GAAG,KAAK;AAC3C,KAAC,EAAE,CAAC,aAAa,CAAC,CAAC;AAEnB,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,MAAM,EAAC,EAAA,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,KAAM,UAAU,EAAA;AACtE,QAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EACJ,EAAA,GAAG,EAAE,WAAW,EAChB,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EACN,YAAA,EAAA,SAAS,EACrB,QAAQ,EAAE,YAAY,EACtB,CAAA,CACK;AAEb;;;;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useMemo } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { Input } from './styled';\nimport { generateId } from '../../utils/generateId';\n\nexport type CheckboxValue = string | number;\n\nexport interface CheckboxProps extends ForwardedChoiceProps {\n  id?: string;\n  checked: boolean;\n  indeterminate?: boolean;\n  value?: CheckboxValue;\n  name?: string;\n  disabled?: boolean;\n  ariaLabel?: string;\n  onChange: (checked: boolean, value?: CheckboxValue) => void;\n  className?: string;\n}\n\nexport const Checkbox = ({\n  id,\n  checked,\n  indeterminate,\n  value,\n  name,\n  hint,\n  disabled,\n  ariaLabel,\n  className,\n  onChange,\n  ...otherProps\n}: CheckboxProps) => {\n  const componentId = useMemo(() => id ?? generateId('checkbox'), [id]);\n  const checkboxRef = useRef<HTMLInputElement>(null);\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      onChange(e.currentTarget.checked, value);\n    },\n    [onChange, value],\n  );\n\n  useEffect(() => {\n    if (!checkboxRef.current) return;\n    if (indeterminate === true) {\n      checkboxRef.current.indeterminate = true;\n      return;\n    }\n    checkboxRef.current.indeterminate = false;\n  }, [indeterminate]);\n\n  const ariaDescribedBy = hint ? `hint-${componentId}` : undefined;\n\n  return (\n    <Choice\n      htmlFor={componentId}\n      disabled={disabled}\n      className={className}\n      hint={hint}\n      {...otherProps}\n    >\n      <Input\n        ref={checkboxRef}\n        id={componentId}\n        type=\"checkbox\"\n        checked={checked}\n        value={value}\n        name={name}\n        disabled={disabled}\n        aria-label={ariaLabel}\n        aria-describedby={ariaDescribedBy}\n        onChange={handleChange}\n      />\n    </Choice>\n  );\n};\n"],"names":["React"],"mappings":";;;;;AAmBO,MAAM,QAAQ,GAAG,CAAC,EACvB,EAAE,EACF,OAAO,EACP,aAAa,EACb,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,SAAS,EACT,QAAQ,EACR,GAAG,UAAU,EACC,KAAI;IAClB,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,SAAA,GAAF,EAAE,GAAI,UAAU,CAAC,UAAU,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AACrE,IAAA,MAAM,WAAW,GAAG,MAAM,CAAmB,IAAI,CAAC;AAElD,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAsC,KAAI;QACzC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;AAC1C,KAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;IAED,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,WAAW,CAAC,OAAO;YAAE;QAC1B,IAAI,aAAa,KAAK,IAAI,EAAE;AAC1B,YAAA,WAAW,CAAC,OAAO,CAAC,aAAa,GAAG,IAAI;YACxC;AACD;AACD,QAAA,WAAW,CAAC,OAAO,CAAC,aAAa,GAAG,KAAK;AAC3C,KAAC,EAAE,CAAC,aAAa,CAAC,CAAC;AAEnB,IAAA,MAAM,eAAe,GAAG,IAAI,GAAG,CAAQ,KAAA,EAAA,WAAW,CAAE,CAAA,GAAG,SAAS;IAEhE,QACEA,6BAAC,MAAM,EAAA,EACL,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,KACN,UAAU,EAAA;AAEd,QAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EACJ,EAAA,GAAG,EAAE,WAAW,EAChB,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EACN,YAAA,EAAA,SAAS,EACH,kBAAA,EAAA,eAAe,EACjC,QAAQ,EAAE,YAAY,EACtB,CAAA,CACK;AAEb;;;;"}

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":"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"}

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

@@ -16,17 +16,13 @@ const RootLayout = styled__default.default.div.withConfig({ displayName: "vui--R
 const InputLayout = styled__default.default.div.withConfig({ displayName: "vui--InputLayout", componentId: "vui--1yac6kr" }) `align-self:stretch;display:flex;align-items:${(props) => alignMap[props.align]};`;
 const AccessoryLayout = styled__default.default.div.withConfig({ displayName: "vui--AccessoryLayout", componentId: "vui--qbgrc7" }) `align-self:center;display:flex;align-items:center;`;
 const TextLayout = styled__default.default.div.withConfig({ displayName: "vui--TextLayout", componentId: "vui--1uu3ed5" }) `flex:1;& > * + *{margin-top:${index.theme.sizes.sm};}`;
-const HintText = styled__default.default.div.withConfig({ displayName: "vui--HintText", componentId: "vui--lz8nl" }) `font-family:${index.theme.fontFamily};font-size:${index.theme.sizes[3]};line-height:${index.theme.sizes[4]};color:${index.theme.colors.neutral.ink.light};`;
-const ErrorText = styled__default.default.div.withConfig({ displayName: "vui--ErrorText", componentId: "vui--piugtf" }) `font-family:${index.theme.text.error.fontFamily};font-size:${index.theme.text.error.fontSize};font-weight:${index.theme.text.error.fontWeight};line-height:${index.theme.text.error.lineHeight};color:${index.theme.text.error.color};`;
-const Wrapper = styled__default.default.label.withConfig({ displayName: "vui--Wrapper", componentId: "vui--2wdtq1" }) `box-sizing:border-box;&:hover{cursor:${(props) => (props.disabled ? 'default' : 'pointer')};}`;
-const BorderedWrapper = styled__default.default(Wrapper).withConfig({ displayName: "vui--BorderedWrapper", componentId: "vui--1an42ms" }) `border:2px solid ${index.theme.colors.neutral.grey.dark};border-radius:${index.theme.radius.md};padding:${index.theme.sizes.base} 0.75rem;&:hover{border-color:${index.theme.colors.secondary.blue.base};}`;
-const BlockTooltip = styled__default.default(Tooltip.Tooltip).withConfig({ displayName: "vui--BlockTooltip", componentId: "vui--1ifrill" }) `display:block;&-hoverable{display:block;}`;
+const 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,YAAA,EAAA,CAAA,CAAA,CAAA,YAAA,EACjBC,WAAK,CAAC,UAAU,CAClB,WAAA,EAAAA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CACZ,aAAA,EAAAA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC,UACpBA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK;MAG5B,SAAS,GAAGD,uBAAM,CAAC,GAAG,CAClB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,YAAA,EAAAC,WAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAC7B,WAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAA,aAAA,EACvBA,WAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAC3B,aAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAA,OAAA,EACjCA,WAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAA,CAAA;AAGpB,MAAA,OAAO,GAAGD,uBAAM,CAAC,KAAK,CAIrB,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,qCAAA,EAAA,CAAC,KAAK,MAAM,KAAK,CAAC,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC,CAAA,EAAA;AAIpD,MAAA,eAAe,GAAGA,uBAAM,CAAC,OAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EACxBC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CACjC,eAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,EAAE,CAAA,SAAA,EACrBA,WAAK,CAAC,KAAK,CAAC,IAAI,CAAA,8BAAA,EAGTA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;MAIvC,YAAY,GAAGD,uBAAM,CAACE,eAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,yCAAA;;;;;;;;;;;;"}
+{"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

@@ -10,11 +10,9 @@ const RootLayout = styled.div.withConfig({ displayName: "vui--RootLayout", compo
 const InputLayout = styled.div.withConfig({ displayName: "vui--InputLayout", componentId: "vui--1yac6kr" }) `align-self:stretch;display:flex;align-items:${(props) => alignMap[props.align]};`;
 const AccessoryLayout = styled.div.withConfig({ displayName: "vui--AccessoryLayout", componentId: "vui--qbgrc7" }) `align-self:center;display:flex;align-items:center;`;
 const TextLayout = styled.div.withConfig({ displayName: "vui--TextLayout", componentId: "vui--1uu3ed5" }) `flex:1;& > * + *{margin-top:${theme.sizes.sm};}`;
-const HintText = styled.div.withConfig({ displayName: "vui--HintText", componentId: "vui--lz8nl" }) `font-family:${theme.fontFamily};font-size:${theme.sizes[3]};line-height:${theme.sizes[4]};color:${theme.colors.neutral.ink.light};`;
-const ErrorText = styled.div.withConfig({ displayName: "vui--ErrorText", componentId: "vui--piugtf" }) `font-family:${theme.text.error.fontFamily};font-size:${theme.text.error.fontSize};font-weight:${theme.text.error.fontWeight};line-height:${theme.text.error.lineHeight};color:${theme.text.error.color};`;
-const Wrapper = styled.label.withConfig({ displayName: "vui--Wrapper", componentId: "vui--2wdtq1" }) `box-sizing:border-box;&:hover{cursor:${(props) => (props.disabled ? 'default' : 'pointer')};}`;
-const BorderedWrapper = styled(Wrapper).withConfig({ displayName: "vui--BorderedWrapper", componentId: "vui--1an42ms" }) `border:2px solid ${theme.colors.neutral.grey.dark};border-radius:${theme.radius.md};padding:${theme.sizes.base} 0.75rem;&:hover{border-color:${theme.colors.secondary.blue.base};}`;
-const BlockTooltip = styled(Tooltip).withConfig({ displayName: "vui--BlockTooltip", componentId: "vui--1ifrill" }) `display:block;&-hoverable{display:block;}`;
+const 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,YAAA,EAAA,CAAA,CAAA,CAAA,YAAA,EACjB,KAAK,CAAC,UAAU,CAClB,WAAA,EAAA,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CACZ,aAAA,EAAA,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,UACpB,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK;MAG5B,SAAS,GAAG,MAAM,CAAC,GAAG,CAClB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,YAAA,EAAA,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAC7B,WAAA,EAAA,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAA,aAAA,EACvB,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAC3B,aAAA,EAAA,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAA,OAAA,EACjC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAA,CAAA;AAGpB,MAAA,OAAO,GAAG,MAAM,CAAC,KAAK,CAIrB,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,qCAAA,EAAA,CAAC,KAAK,MAAM,KAAK,CAAC,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC,CAAA,EAAA;AAIpD,MAAA,eAAe,GAAG,MAAM,CAAC,OAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EACxB,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CACjC,eAAA,EAAA,KAAK,CAAC,MAAM,CAAC,EAAE,CAAA,SAAA,EACrB,KAAK,CAAC,KAAK,CAAC,IAAI,CAAA,8BAAA,EAGT,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;MAIvC,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,yCAAA;;;;"}
+{"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/Radio/Radio.cjs

@@ -9,13 +9,14 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const Radio = React.forwardRef(({ checked, value, name, disabled, onChange, id, children, 'aria-label': ariaLabel, ...otherProps }, ref) => {
+const Radio = React.forwardRef(({ checked, value, name, hint, disabled, onChange, id, children, 'aria-label': ariaLabel, ...otherProps }, ref) => {
     const handleChange = React.useCallback((e) => {
         onChange(e.currentTarget.checked, value);
     }, [onChange, value]);
-    const componentId = id !== null && id !== undefined ? id : generateId.generateId('radio');
-    return (React__default.default.createElement(Choice.Choice, { id: componentId, disabled: disabled, ...otherProps },
-        React__default.default.createElement(styled.Input, { id: componentId, type: "radio", checked: checked, value: value, name: name, disabled: disabled, onChange: handleChange, ref: ref, "aria-label": ariaLabel }),
+    const componentId = React.useMemo(() => id !== null && id !== undefined ? id : generateId.generateId('radio'), [id]);
+    const ariaDescribedBy = hint ? `hint-${componentId}` : undefined;
+    return (React__default.default.createElement(Choice.Choice, { htmlFor: componentId, disabled: disabled, hint: hint, ...otherProps },
+        React__default.default.createElement(styled.Input, { id: componentId, type: "radio", checked: checked, value: value, name: name, disabled: disabled, onChange: handleChange, ref: ref, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy }),
         children));
 });
 

package/dist/components/Radio/Radio.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.cjs","sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import React, { AriaAttributes, ReactNode, forwardRef, useCallback } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { Input } from './styled';\nimport { generateId } from '../../utils/generateId';\n\ntype RadioValue = string | number;\n\nexport interface RadioProps extends ForwardedChoiceProps, Pick<AriaAttributes, 'aria-label'> {\n  id?: string;\n  className?: string;\n  checked: boolean;\n  value?: RadioValue;\n  disabled?: boolean;\n  name?: string;\n  onChange: (checked: boolean, value?: RadioValue) => void;\n  children?: ReactNode;\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n  (\n    {\n      checked,\n      value,\n      name,\n      disabled,\n      onChange,\n      id,\n      children,\n      'aria-label': ariaLabel,\n      ...otherProps\n    }: RadioProps,\n    ref,\n  ) => {\n    const handleChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        onChange(e.currentTarget.checked, value);\n      },\n      [onChange, value],\n    );\n\n    const componentId = id ?? generateId('radio');\n\n    return (\n      <Choice id={componentId} disabled={disabled} {...otherProps}>\n        <Input\n          id={componentId}\n          type=\"radio\"\n          checked={checked}\n          value={value}\n          name={name}\n          disabled={disabled}\n          onChange={handleChange}\n          ref={ref}\n          aria-label={ariaLabel}\n        />\n        {children}\n      </Choice>\n    );\n  },\n);\n"],"names":["forwardRef","useCallback","generateId","React","Choice","Input"],"mappings":";;;;;;;;;;;AAkBO,MAAM,KAAK,GAAGA,gBAAU,CAC7B,CACE,EACE,OAAO,EACP,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,EAAE,EACF,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,GAAG,UAAU,EACF,EACb,GAAG,KACD;AACF,IAAA,MAAM,YAAY,GAAGC,iBAAW,CAC9B,CAAC,CAAsC,KAAI;QACzC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;AAC1C,KAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;AAED,IAAA,MAAM,WAAW,GAAG,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,SAAA,GAAF,EAAE,GAAIC,qBAAU,CAAC,OAAO,CAAC;AAE7C,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,aAAM,EAAA,EAAC,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAA,GAAM,UAAU,EAAA;AACzD,QAAAD,sBAAA,CAAA,aAAA,CAACE,YAAK,EAAA,EACJ,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,YAAY,EACtB,GAAG,EAAE,GAAG,EAAA,YAAA,EACI,SAAS,EACrB,CAAA;QACD,QAAQ,CACF;AAEb,CAAC;;;;"}
+{"version":3,"file":"Radio.cjs","sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import React, { AriaAttributes, ReactNode, forwardRef, useCallback, useMemo } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { Input } from './styled';\nimport { generateId } from '../../utils/generateId';\n\ntype RadioValue = string | number;\n\nexport interface RadioProps extends ForwardedChoiceProps, Pick<AriaAttributes, 'aria-label'> {\n  id?: string;\n  className?: string;\n  checked: boolean;\n  value?: RadioValue;\n  disabled?: boolean;\n  name?: string;\n  onChange: (checked: boolean, value?: RadioValue) => void;\n  children?: ReactNode;\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n  (\n    {\n      checked,\n      value,\n      name,\n      hint,\n      disabled,\n      onChange,\n      id,\n      children,\n      'aria-label': ariaLabel,\n      ...otherProps\n    }: RadioProps,\n    ref,\n  ) => {\n    const handleChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        onChange(e.currentTarget.checked, value);\n      },\n      [onChange, value],\n    );\n\n    const componentId = useMemo(() => id ?? generateId('radio'), [id]);\n    const ariaDescribedBy = hint ? `hint-${componentId}` : undefined;\n\n    return (\n      <Choice htmlFor={componentId} disabled={disabled} hint={hint} {...otherProps}>\n        <Input\n          id={componentId}\n          type=\"radio\"\n          checked={checked}\n          value={value}\n          name={name}\n          disabled={disabled}\n          onChange={handleChange}\n          ref={ref}\n          aria-label={ariaLabel}\n          aria-describedby={ariaDescribedBy}\n        />\n        {children}\n      </Choice>\n    );\n  },\n);\n"],"names":["forwardRef","useCallback","useMemo","generateId","React","Choice","Input"],"mappings":";;;;;;;;;;;AAkBO,MAAM,KAAK,GAAGA,gBAAU,CAC7B,CACE,EACE,OAAO,EACP,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,EAAE,EACF,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,GAAG,UAAU,EACF,EACb,GAAG,KACD;AACF,IAAA,MAAM,YAAY,GAAGC,iBAAW,CAC9B,CAAC,CAAsC,KAAI;QACzC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;AAC1C,KAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;IAED,MAAM,WAAW,GAAGC,aAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,SAAA,GAAF,EAAE,GAAIC,qBAAU,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AAClE,IAAA,MAAM,eAAe,GAAG,IAAI,GAAG,CAAQ,KAAA,EAAA,WAAW,CAAE,CAAA,GAAG,SAAS;AAEhE,IAAA,QACEC,sBAAC,CAAA,aAAA,CAAAC,aAAM,EAAC,EAAA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,KAAM,UAAU,EAAA;AAC1E,QAAAD,sBAAA,CAAA,aAAA,CAACE,YAAK,EACJ,EAAA,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,YAAY,EACtB,GAAG,EAAE,GAAG,gBACI,SAAS,EAAA,kBAAA,EACH,eAAe,EACjC,CAAA;QACD,QAAQ,CACF;AAEb,CAAC;;;;"}

package/dist/components/Radio/Radio.js

@@ -1,15 +1,16 @@
-import React__default, { forwardRef, useCallback } from 'react';
+import React__default, { forwardRef, useCallback, useMemo } from 'react';
 import { Choice } from '../Choice/Choice.js';
 import { Input } from './styled.js';
 import { generateId } from '../../utils/generateId.js';
 
-const Radio = forwardRef(({ checked, value, name, disabled, onChange, id, children, 'aria-label': ariaLabel, ...otherProps }, ref) => {
+const Radio = forwardRef(({ checked, value, name, hint, disabled, onChange, id, children, 'aria-label': ariaLabel, ...otherProps }, ref) => {
     const handleChange = useCallback((e) => {
         onChange(e.currentTarget.checked, value);
     }, [onChange, value]);
-    const componentId = id !== null && id !== undefined ? id : generateId('radio');
-    return (React__default.createElement(Choice, { id: componentId, disabled: disabled, ...otherProps },
-        React__default.createElement(Input, { id: componentId, type: "radio", checked: checked, value: value, name: name, disabled: disabled, onChange: handleChange, ref: ref, "aria-label": ariaLabel }),
+    const componentId = useMemo(() => id !== null && id !== undefined ? id : generateId('radio'), [id]);
+    const ariaDescribedBy = hint ? `hint-${componentId}` : undefined;
+    return (React__default.createElement(Choice, { htmlFor: componentId, disabled: disabled, hint: hint, ...otherProps },
+        React__default.createElement(Input, { id: componentId, type: "radio", checked: checked, value: value, name: name, disabled: disabled, onChange: handleChange, ref: ref, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy }),
         children));
 });
 

package/dist/components/Radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import React, { AriaAttributes, ReactNode, forwardRef, useCallback } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { Input } from './styled';\nimport { generateId } from '../../utils/generateId';\n\ntype RadioValue = string | number;\n\nexport interface RadioProps extends ForwardedChoiceProps, Pick<AriaAttributes, 'aria-label'> {\n  id?: string;\n  className?: string;\n  checked: boolean;\n  value?: RadioValue;\n  disabled?: boolean;\n  name?: string;\n  onChange: (checked: boolean, value?: RadioValue) => void;\n  children?: ReactNode;\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n  (\n    {\n      checked,\n      value,\n      name,\n      disabled,\n      onChange,\n      id,\n      children,\n      'aria-label': ariaLabel,\n      ...otherProps\n    }: RadioProps,\n    ref,\n  ) => {\n    const handleChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        onChange(e.currentTarget.checked, value);\n      },\n      [onChange, value],\n    );\n\n    const componentId = id ?? generateId('radio');\n\n    return (\n      <Choice id={componentId} disabled={disabled} {...otherProps}>\n        <Input\n          id={componentId}\n          type=\"radio\"\n          checked={checked}\n          value={value}\n          name={name}\n          disabled={disabled}\n          onChange={handleChange}\n          ref={ref}\n          aria-label={ariaLabel}\n        />\n        {children}\n      </Choice>\n    );\n  },\n);\n"],"names":["React"],"mappings":";;;;;AAkBO,MAAM,KAAK,GAAG,UAAU,CAC7B,CACE,EACE,OAAO,EACP,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,EAAE,EACF,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,GAAG,UAAU,EACF,EACb,GAAG,KACD;AACF,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAsC,KAAI;QACzC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;AAC1C,KAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;AAED,IAAA,MAAM,WAAW,GAAG,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,SAAA,GAAF,EAAE,GAAI,UAAU,CAAC,OAAO,CAAC;AAE7C,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAA,GAAM,UAAU,EAAA;AACzD,QAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EACJ,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,YAAY,EACtB,GAAG,EAAE,GAAG,EAAA,YAAA,EACI,SAAS,EACrB,CAAA;QACD,QAAQ,CACF;AAEb,CAAC;;;;"}
+{"version":3,"file":"Radio.js","sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import React, { AriaAttributes, ReactNode, forwardRef, useCallback, useMemo } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { Input } from './styled';\nimport { generateId } from '../../utils/generateId';\n\ntype RadioValue = string | number;\n\nexport interface RadioProps extends ForwardedChoiceProps, Pick<AriaAttributes, 'aria-label'> {\n  id?: string;\n  className?: string;\n  checked: boolean;\n  value?: RadioValue;\n  disabled?: boolean;\n  name?: string;\n  onChange: (checked: boolean, value?: RadioValue) => void;\n  children?: ReactNode;\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n  (\n    {\n      checked,\n      value,\n      name,\n      hint,\n      disabled,\n      onChange,\n      id,\n      children,\n      'aria-label': ariaLabel,\n      ...otherProps\n    }: RadioProps,\n    ref,\n  ) => {\n    const handleChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        onChange(e.currentTarget.checked, value);\n      },\n      [onChange, value],\n    );\n\n    const componentId = useMemo(() => id ?? generateId('radio'), [id]);\n    const ariaDescribedBy = hint ? `hint-${componentId}` : undefined;\n\n    return (\n      <Choice htmlFor={componentId} disabled={disabled} hint={hint} {...otherProps}>\n        <Input\n          id={componentId}\n          type=\"radio\"\n          checked={checked}\n          value={value}\n          name={name}\n          disabled={disabled}\n          onChange={handleChange}\n          ref={ref}\n          aria-label={ariaLabel}\n          aria-describedby={ariaDescribedBy}\n        />\n        {children}\n      </Choice>\n    );\n  },\n);\n"],"names":["React"],"mappings":";;;;;AAkBO,MAAM,KAAK,GAAG,UAAU,CAC7B,CACE,EACE,OAAO,EACP,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,EAAE,EACF,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,GAAG,UAAU,EACF,EACb,GAAG,KACD;AACF,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAsC,KAAI;QACzC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;AAC1C,KAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;IAED,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,SAAA,GAAF,EAAE,GAAI,UAAU,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AAClE,IAAA,MAAM,eAAe,GAAG,IAAI,GAAG,CAAQ,KAAA,EAAA,WAAW,CAAE,CAAA,GAAG,SAAS;AAEhE,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,MAAM,EAAC,EAAA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,KAAM,UAAU,EAAA;AAC1E,QAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EACJ,EAAA,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,YAAY,EACtB,GAAG,EAAE,GAAG,gBACI,SAAS,EAAA,kBAAA,EACH,eAAe,EACjC,CAAA;QACD,QAAQ,CACF;AAEb,CAAC;;;;"}

package/dist/components/Toggle/Toggle.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 var React = require('react');
+var generateId = require('../../utils/generateId.cjs');
 var styled = require('./styled.cjs');
 var Choice = require('../Choice/Choice.cjs');
 
@@ -11,11 +12,14 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 /**
  * A toggle switch component, use-cases should provide a label, wrap with a custom one or pass in an aria-label.
  */
-const Toggle = React.forwardRef(({ id = 'testid', className, name, switched, small, onClick = () => { }, disabled, ariaLabel, inputPosition = 'right', ...choiceProps }, ref) => (React__default.default.createElement(Choice.Choice, { id: id, inputPosition: inputPosition, ...choiceProps },
-    React__default.default.createElement(styled.Wrapper, { className: className, disabled: disabled },
-        React__default.default.createElement(styled.Switch, { small: small, disabled: disabled, className: className },
-            React__default.default.createElement(styled.Input, { id: id, role: "switch", type: "checkbox", name: name, "aria-label": ariaLabel, checked: !!switched, onChange: (e) => (disabled ? undefined : onClick(e)), disabled: disabled, ref: ref }),
-            React__default.default.createElement(styled.Slider, { switched: switched, disabled: disabled }))))));
+const Toggle = React.forwardRef(({ id, className, name, switched, small, onClick = () => { }, disabled, ariaLabel, inputPosition = 'right', ...choiceProps }, ref) => {
+    const componentId = React.useMemo(() => id !== null && id !== undefined ? id : generateId.generateId('toggle'), [id]);
+    return (React__default.default.createElement(Choice.Choice, { htmlFor: componentId, inputPosition: inputPosition, ...choiceProps },
+        React__default.default.createElement(styled.Wrapper, { className: className, disabled: disabled },
+            React__default.default.createElement(styled.Switch, { small: small, disabled: disabled, className: className },
+                React__default.default.createElement(styled.Input, { id: componentId, role: "switch", type: "checkbox", name: name, "aria-label": ariaLabel, checked: !!switched, onChange: (e) => (disabled ? undefined : onClick(e)), disabled: disabled, ref: ref }),
+                React__default.default.createElement(styled.Slider, { switched: switched, disabled: disabled })))));
+});
 
 exports.Toggle = Toggle;
 //# sourceMappingURL=Toggle.cjs.map

package/dist/components/Toggle/Toggle.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.cjs","sources":["../../../src/components/Toggle/Toggle.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { ToggleProps } from './types';\nimport { Input, Slider, Switch, Wrapper } from './styled';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\n\n/**\n * A toggle switch component, use-cases should provide a label, wrap with a custom one or pass in an aria-label.\n */\nexport const Toggle = forwardRef<HTMLInputElement, ToggleProps>(\n  (\n    {\n      id = 'testid',\n      className,\n      name,\n      switched,\n      small,\n      onClick = () => {},\n      disabled,\n      ariaLabel,\n      inputPosition = 'right',\n      ...choiceProps\n    }: ToggleProps,\n    ref,\n  ) => (\n    <Choice id={id} inputPosition={inputPosition} {...(choiceProps as ForwardedChoiceProps)}>\n      <Wrapper className={className} disabled={disabled}>\n        <Switch small={small} disabled={disabled} className={className}>\n          <Input\n            id={id}\n            role=\"switch\"\n            type=\"checkbox\"\n            name={name}\n            aria-label={ariaLabel}\n            checked={!!switched}\n            onChange={(e) => (disabled ? undefined : onClick(e))}\n            disabled={disabled}\n            ref={ref}\n          />\n          <Slider switched={switched} disabled={disabled} />\n        </Switch>\n      </Wrapper>\n    </Choice>\n  ),\n);\n"],"names":["forwardRef","React","Choice","Wrapper","Switch","Input","Slider"],"mappings":";;;;;;;;;;AAMA;;AAEG;AACU,MAAA,MAAM,GAAGA,gBAAU,CAC9B,CACE,EACE,EAAE,GAAG,QAAQ,EACb,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,OAAO,GAAG,MAAK,GAAG,EAClB,QAAQ,EACR,SAAS,EACT,aAAa,GAAG,OAAO,EACvB,GAAG,WAAW,EACF,EACd,GAAG,MAEHC,sBAAA,CAAA,aAAA,CAACC,aAAM,EAAA,EAAC,EAAE,EAAE,EAAE,EAAE,aAAa,EAAE,aAAa,EAAA,GAAO,WAAoC,EAAA;IACrFD,sBAAC,CAAA,aAAA,CAAAE,cAAO,IAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAA;AAC/C,QAAAF,sBAAA,CAAA,aAAA,CAACG,aAAM,EAAA,EAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAA;YAC5DH,sBAAC,CAAA,aAAA,CAAAI,YAAK,EACJ,EAAA,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,EACE,YAAA,EAAA,SAAS,EACrB,OAAO,EAAE,CAAC,CAAC,QAAQ,EACnB,QAAQ,EAAE,CAAC,CAAC,MAAM,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,EACpD,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EACR,CAAA;AACF,YAAAJ,sBAAA,CAAA,aAAA,CAACK,aAAM,EAAA,EAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAC3C,CACD,CACH,CACV;;;;"}
+{"version":3,"file":"Toggle.cjs","sources":["../../../src/components/Toggle/Toggle.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\n\nimport { generateId } from '../../utils/generateId';\nimport { ToggleProps } from './types';\nimport { Input, Slider, Switch, Wrapper } from './styled';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\n\n/**\n * A toggle switch component, use-cases should provide a label, wrap with a custom one or pass in an aria-label.\n */\nexport const Toggle = forwardRef<HTMLInputElement, ToggleProps>(\n  (\n    {\n      id,\n      className,\n      name,\n      switched,\n      small,\n      onClick = () => {},\n      disabled,\n      ariaLabel,\n      inputPosition = 'right',\n      ...choiceProps\n    }: ToggleProps,\n    ref,\n  ) => {\n    const componentId = useMemo(() => id ?? generateId('toggle'), [id]);\n    return (\n      <Choice\n        htmlFor={componentId}\n        inputPosition={inputPosition}\n        {...(choiceProps as ForwardedChoiceProps)}\n      >\n        <Wrapper className={className} disabled={disabled}>\n          <Switch small={small} disabled={disabled} className={className}>\n            <Input\n              id={componentId}\n              role=\"switch\"\n              type=\"checkbox\"\n              name={name}\n              aria-label={ariaLabel}\n              checked={!!switched}\n              onChange={(e) => (disabled ? undefined : onClick(e))}\n              disabled={disabled}\n              ref={ref}\n            />\n            <Slider switched={switched} disabled={disabled} />\n          </Switch>\n        </Wrapper>\n      </Choice>\n    );\n  },\n);\n"],"names":["forwardRef","useMemo","generateId","React","Choice","Wrapper","Switch","Input","Slider"],"mappings":";;;;;;;;;;;AAOA;;AAEG;AACU,MAAA,MAAM,GAAGA,gBAAU,CAC9B,CACE,EACE,EAAE,EACF,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,OAAO,GAAG,MAAO,GAAC,EAClB,QAAQ,EACR,SAAS,EACT,aAAa,GAAG,OAAO,EACvB,GAAG,WAAW,EACF,EACd,GAAG,KACD;IACF,MAAM,WAAW,GAAGC,aAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,SAAA,GAAF,EAAE,GAAIC,qBAAU,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AACnE,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,aAAM,EAAA,EACL,OAAO,EAAE,WAAW,EACpB,aAAa,EAAE,aAAa,EAAA,GACvB,WAAoC,EAAA;QAEzCD,sBAAC,CAAA,aAAA,CAAAE,cAAO,IAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAA;AAC/C,YAAAF,sBAAA,CAAA,aAAA,CAACG,aAAM,EAAA,EAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAA;gBAC5DH,sBAAC,CAAA,aAAA,CAAAI,YAAK,EACJ,EAAA,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,EACE,YAAA,EAAA,SAAS,EACrB,OAAO,EAAE,CAAC,CAAC,QAAQ,EACnB,QAAQ,EAAE,CAAC,CAAC,MAAM,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,EACpD,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EACR,CAAA;AACF,gBAAAJ,sBAAA,CAAA,aAAA,CAACK,aAAM,EAAA,EAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAI,CAAA,CAC3C,CACD,CACH;AAEb,CAAC;;;;"}

package/dist/components/Toggle/Toggle.js

@@ -1,15 +1,19 @@
-import React__default, { forwardRef } from 'react';
+import React__default, { forwardRef, useMemo } from 'react';
+import { generateId } from '../../utils/generateId.js';
 import { Wrapper, Switch, Input, Slider } from './styled.js';
 import { Choice } from '../Choice/Choice.js';
 
 /**
  * A toggle switch component, use-cases should provide a label, wrap with a custom one or pass in an aria-label.
  */
-const Toggle = forwardRef(({ id = 'testid', className, name, switched, small, onClick = () => { }, disabled, ariaLabel, inputPosition = 'right', ...choiceProps }, ref) => (React__default.createElement(Choice, { id: id, inputPosition: inputPosition, ...choiceProps },
-    React__default.createElement(Wrapper, { className: className, disabled: disabled },
-        React__default.createElement(Switch, { small: small, disabled: disabled, className: className },
-            React__default.createElement(Input, { id: id, role: "switch", type: "checkbox", name: name, "aria-label": ariaLabel, checked: !!switched, onChange: (e) => (disabled ? undefined : onClick(e)), disabled: disabled, ref: ref }),
-            React__default.createElement(Slider, { switched: switched, disabled: disabled }))))));
+const Toggle = forwardRef(({ id, className, name, switched, small, onClick = () => { }, disabled, ariaLabel, inputPosition = 'right', ...choiceProps }, ref) => {
+    const componentId = useMemo(() => id !== null && id !== undefined ? id : generateId('toggle'), [id]);
+    return (React__default.createElement(Choice, { htmlFor: componentId, inputPosition: inputPosition, ...choiceProps },
+        React__default.createElement(Wrapper, { className: className, disabled: disabled },
+            React__default.createElement(Switch, { small: small, disabled: disabled, className: className },
+                React__default.createElement(Input, { id: componentId, role: "switch", type: "checkbox", name: name, "aria-label": ariaLabel, checked: !!switched, onChange: (e) => (disabled ? undefined : onClick(e)), disabled: disabled, ref: ref }),
+                React__default.createElement(Slider, { switched: switched, disabled: disabled })))));
+});
 
 export { Toggle };
 //# sourceMappingURL=Toggle.js.map

package/dist/components/Toggle/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","sources":["../../../src/components/Toggle/Toggle.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { ToggleProps } from './types';\nimport { Input, Slider, Switch, Wrapper } from './styled';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\n\n/**\n * A toggle switch component, use-cases should provide a label, wrap with a custom one or pass in an aria-label.\n */\nexport const Toggle = forwardRef<HTMLInputElement, ToggleProps>(\n  (\n    {\n      id = 'testid',\n      className,\n      name,\n      switched,\n      small,\n      onClick = () => {},\n      disabled,\n      ariaLabel,\n      inputPosition = 'right',\n      ...choiceProps\n    }: ToggleProps,\n    ref,\n  ) => (\n    <Choice id={id} inputPosition={inputPosition} {...(choiceProps as ForwardedChoiceProps)}>\n      <Wrapper className={className} disabled={disabled}>\n        <Switch small={small} disabled={disabled} className={className}>\n          <Input\n            id={id}\n            role=\"switch\"\n            type=\"checkbox\"\n            name={name}\n            aria-label={ariaLabel}\n            checked={!!switched}\n            onChange={(e) => (disabled ? undefined : onClick(e))}\n            disabled={disabled}\n            ref={ref}\n          />\n          <Slider switched={switched} disabled={disabled} />\n        </Switch>\n      </Wrapper>\n    </Choice>\n  ),\n);\n"],"names":["React"],"mappings":";;;;AAMA;;AAEG;AACU,MAAA,MAAM,GAAG,UAAU,CAC9B,CACE,EACE,EAAE,GAAG,QAAQ,EACb,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,OAAO,GAAG,MAAK,GAAG,EAClB,QAAQ,EACR,SAAS,EACT,aAAa,GAAG,OAAO,EACvB,GAAG,WAAW,EACF,EACd,GAAG,MAEHA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,EAAE,EAAE,EAAE,EAAE,aAAa,EAAE,aAAa,EAAA,GAAO,WAAoC,EAAA;IACrFA,cAAC,CAAA,aAAA,CAAA,OAAO,IAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAA;AAC/C,QAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAA;YAC5DA,cAAC,CAAA,aAAA,CAAA,KAAK,EACJ,EAAA,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,EACE,YAAA,EAAA,SAAS,EACrB,OAAO,EAAE,CAAC,CAAC,QAAQ,EACnB,QAAQ,EAAE,CAAC,CAAC,MAAM,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,EACpD,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EACR,CAAA;AACF,YAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAC3C,CACD,CACH,CACV;;;;"}
+{"version":3,"file":"Toggle.js","sources":["../../../src/components/Toggle/Toggle.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\n\nimport { generateId } from '../../utils/generateId';\nimport { ToggleProps } from './types';\nimport { Input, Slider, Switch, Wrapper } from './styled';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\n\n/**\n * A toggle switch component, use-cases should provide a label, wrap with a custom one or pass in an aria-label.\n */\nexport const Toggle = forwardRef<HTMLInputElement, ToggleProps>(\n  (\n    {\n      id,\n      className,\n      name,\n      switched,\n      small,\n      onClick = () => {},\n      disabled,\n      ariaLabel,\n      inputPosition = 'right',\n      ...choiceProps\n    }: ToggleProps,\n    ref,\n  ) => {\n    const componentId = useMemo(() => id ?? generateId('toggle'), [id]);\n    return (\n      <Choice\n        htmlFor={componentId}\n        inputPosition={inputPosition}\n        {...(choiceProps as ForwardedChoiceProps)}\n      >\n        <Wrapper className={className} disabled={disabled}>\n          <Switch small={small} disabled={disabled} className={className}>\n            <Input\n              id={componentId}\n              role=\"switch\"\n              type=\"checkbox\"\n              name={name}\n              aria-label={ariaLabel}\n              checked={!!switched}\n              onChange={(e) => (disabled ? undefined : onClick(e))}\n              disabled={disabled}\n              ref={ref}\n            />\n            <Slider switched={switched} disabled={disabled} />\n          </Switch>\n        </Wrapper>\n      </Choice>\n    );\n  },\n);\n"],"names":["React"],"mappings":";;;;;AAOA;;AAEG;AACU,MAAA,MAAM,GAAG,UAAU,CAC9B,CACE,EACE,EAAE,EACF,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,OAAO,GAAG,MAAO,GAAC,EAClB,QAAQ,EACR,SAAS,EACT,aAAa,GAAG,OAAO,EACvB,GAAG,WAAW,EACF,EACd,GAAG,KACD;IACF,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,SAAA,GAAF,EAAE,GAAI,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AACnE,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAE,WAAW,EACpB,aAAa,EAAE,aAAa,EAAA,GACvB,WAAoC,EAAA;QAEzCA,cAAC,CAAA,aAAA,CAAA,OAAO,IAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAA;AAC/C,YAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAA;gBAC5DA,cAAC,CAAA,aAAA,CAAA,KAAK,EACJ,EAAA,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,EACE,YAAA,EAAA,SAAS,EACrB,OAAO,EAAE,CAAC,CAAC,QAAQ,EACnB,QAAQ,EAAE,CAAC,CAAC,MAAM,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,EACpD,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EACR,CAAA;AACF,gBAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAI,CAAA,CAC3C,CACD,CACH;AAEb,CAAC;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veeqo/ui",
-  "version": "10.1.0",
+  "version": "10.2.0",
   "description": "New optimised component library for Veeqo.",
   "author": "Robert Wealthall",
   "license": "ISC",