@veeqo/ui 15.6.0 → 15.7.1

package/dist/components/Radio/Radio.d.ts

@@ -2,13 +2,21 @@ import React, { AriaAttributes, ReactNode } from 'react';
 import { ForwardedChoiceProps } from '../Choice';
 type RadioValue = string | number;
 export interface RadioProps extends ForwardedChoiceProps, Pick<AriaAttributes, 'aria-label'> {
+    /** Unique identifier for the radio input */
     id?: string;
+    /** Additional CSS class name */
     className?: string;
+    /** Whether the radio is selected */
     checked: boolean;
+    /** The value associated with this radio option */
     value?: RadioValue;
+    /** Whether the radio is disabled and non-interactive */
     disabled?: boolean;
+    /** Name attribute for grouping related radio inputs */
     name?: string;
+    /** Callback fired when the radio selection changes */
     onChange: (checked: boolean, value?: RadioValue) => void;
+    /** Content rendered inside the radio input element */
     children?: ReactNode;
 }
 export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/Radio/Radio.js

@@ -3,13 +3,13 @@ import { Choice } from '../Choice/Choice.js';
 import { generateId } from '../../utils/generateId.js';
 import styles from './Radio.module.scss.js';
 
-const Radio = forwardRef(({ checked, value, name, hint, disabled, onChange, id, children, 'aria-label': ariaLabel, ...otherProps }, ref) => {
+const Radio = forwardRef(({ checked, value, name, hint, disabled, onChange, id, children, 'aria-label': ariaLabel, error, ...otherProps }, ref) => {
     const handleChange = useCallback((e) => {
         onChange(e.currentTarget.checked, value);
     }, [onChange, value]);
     const componentId = useMemo(() => id !== null && id !== void 0 ? id : generateId('radio'), [id]);
     const ariaDescribedBy = hint ? `hint-${componentId}` : undefined;
-    return (React__default.createElement(Choice, { htmlFor: componentId, disabled: disabled, hint: hint, ...otherProps },
+    return (React__default.createElement(Choice, { htmlFor: componentId, disabled: disabled, hint: hint, error: error, ...otherProps },
         React__default.createElement("input", { className: styles.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, useMemo } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { generateId } from '../../utils/generateId';\n\nimport styles from './Radio.module.scss';\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          className={styles.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":";;;;;AAmBO,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,IAAA,CAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;IAED,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,MAAA,GAAF,EAAE,GAAI,UAAU,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AAClE,IAAA,MAAM,eAAe,GAAG,IAAI,GAAG,CAAA,KAAA,EAAQ,WAAW,CAAA,CAAE,GAAG,SAAS;AAEhE,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,KAAM,UAAU,EAAA;AAC1E,QAAAA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,SAAS,EAAE,MAAM,CAAC,KAAK,EACvB,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,EAAA,CACjC;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 { generateId } from '../../utils/generateId';\n\nimport styles from './Radio.module.scss';\n\ntype RadioValue = string | number;\n\nexport interface RadioProps extends ForwardedChoiceProps, Pick<AriaAttributes, 'aria-label'> {\n  /** Unique identifier for the radio input */\n  id?: string;\n  /** Additional CSS class name */\n  className?: string;\n  /** Whether the radio is selected */\n  checked: boolean;\n  /** The value associated with this radio option */\n  value?: RadioValue;\n  /** Whether the radio is disabled and non-interactive */\n  disabled?: boolean;\n  /** Name attribute for grouping related radio inputs */\n  name?: string;\n  /** Callback fired when the radio selection changes */\n  onChange: (checked: boolean, value?: RadioValue) => void;\n  /** Content rendered inside the radio input element */\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      error,\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} error={error} {...otherProps}>\n        <input\n          className={styles.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":";;;;;AA2BO,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,KAAK,EACL,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,IAAA,CAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;IAED,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,MAAA,GAAF,EAAE,GAAI,UAAU,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AAClE,IAAA,MAAM,eAAe,GAAG,IAAI,GAAG,CAAA,KAAA,EAAQ,WAAW,CAAA,CAAE,GAAG,SAAS;IAEhE,QACEA,6BAAC,MAAM,EAAA,EAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,KAAM,UAAU,EAAA;AACxF,QAAAA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,SAAS,EAAE,MAAM,CAAC,KAAK,EACvB,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,EAAA,CACjC;QACD,QAAQ,CACF;AAEb,CAAC;;;;"}

package/dist/components/Radio/Radio.module.scss.cjs

@@ -2,8 +2,8 @@
 
 var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
 
-___$insertStyle("._input_1ycnq_1 {\n  appearance: none;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  width: 18px;\n  height: 18px;\n  margin: 3px;\n  background-color: transparent;\n  border: 2px solid var(--colors-neutral-ink-light);\n  border-radius: 50%;\n  outline: none;\n  cursor: pointer;\n  transition: box-shadow 0.1s;\n}\n._input_1ycnq_1:checked {\n  position: relative;\n  border-color: var(--colors-secondary-blue-base);\n}\n._input_1ycnq_1:checked::before {\n  content: \"\";\n  width: 10px;\n  height: 10px;\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  background-color: var(--colors-secondary-blue-base);\n  border-radius: 50%;\n}\n._input_1ycnq_1:hover {\n  border-color: var(--colors-secondary-blue-base);\n}\n._input_1ycnq_1:active {\n  border-color: var(--colors-secondary-blue-base);\n}\n._input_1ycnq_1:focus {\n  box-shadow: 0 0 0 var(--sizes-xs) var(--colors-secondary-blue-light);\n  outline: 0;\n}\n._input_1ycnq_1:disabled {\n  box-shadow: none;\n  background-color: var(--colors-neutral-grey-base);\n  border-color: var(--colors-neutral-ink-lightest);\n  cursor: default;\n}\n._input_1ycnq_1:disabled::before {\n  background-color: var(--colors-neutral-ink-light);\n}");
-var styles = {"input":"_input_1ycnq_1"};
+___$insertStyle("._input_17v2n_1 {\n  appearance: none;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  width: 18px;\n  height: 18px;\n  margin: 3px;\n  background-color: transparent;\n  border: 2px solid var(--choice-error-border, var(--colors-neutral-ink-light));\n  border-radius: 50%;\n  outline: none;\n  cursor: pointer;\n  transition: box-shadow 0.1s;\n}\n._input_17v2n_1:checked {\n  position: relative;\n  border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n}\n._input_17v2n_1:checked::before {\n  content: \"\";\n  width: 10px;\n  height: 10px;\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  background-color: var(--choice-error-bg, var(--colors-secondary-blue-base));\n  border-radius: 50%;\n}\n._input_17v2n_1:hover {\n  border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n}\n._input_17v2n_1:active {\n  border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n}\n._input_17v2n_1:focus {\n  box-shadow: 0 0 0 var(--sizes-xs) var(--choice-error-focus, var(--colors-secondary-blue-light));\n  outline: 0;\n}\n._input_17v2n_1:disabled {\n  box-shadow: none;\n  background-color: var(--colors-neutral-grey-base);\n  border-color: var(--colors-neutral-ink-lightest);\n  cursor: default;\n}\n._input_17v2n_1:disabled::before {\n  background-color: var(--colors-neutral-ink-light);\n}");
+var styles = {"input":"_input_17v2n_1"};
 
 module.exports = styles;
 //# sourceMappingURL=Radio.module.scss.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.module.scss.cjs","sources":["../../../src/components/Radio/Radio.module.scss"],"sourcesContent":[".input {\n  appearance: none;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  width: 18px;\n  height: 18px;\n  margin: 3px;\n  background-color: transparent;\n  border: 2px solid var(--colors-neutral-ink-light);\n  border-radius: 50%;\n  outline: none;\n  cursor: pointer;\n\n  transition: box-shadow 0.1s;\n\n  &:checked {\n    position: relative;\n    border-color: var(--colors-secondary-blue-base);\n  }\n\n  &:checked::before {\n    content: '';\n    width: 10px;\n    height: 10px;\n    position: absolute;\n    top: 2px;\n    left: 2px;\n    background-color: var(--colors-secondary-blue-base);\n    border-radius: 50%;\n  }\n\n  &:hover {\n    border-color: var(--colors-secondary-blue-base);\n  }\n\n  &:active {\n    border-color: var(--colors-secondary-blue-base);\n  }\n\n  &:focus {\n    box-shadow: 0 0 0 var(--sizes-xs) var(--colors-secondary-blue-light);\n    outline: 0;\n  }\n\n  &:disabled {\n    box-shadow: none;\n    background-color: var(--colors-neutral-grey-base);\n    border-color: var(--colors-neutral-ink-lightest);\n    cursor: default;\n  }\n\n  &:disabled::before {\n    background-color: var(--colors-neutral-ink-light);\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,uqCAAA;AACA,aAAA,CAAA,OAAA,CAAA,gBAAA;;;;"}
+{"version":3,"file":"Radio.module.scss.cjs","sources":["../../../src/components/Radio/Radio.module.scss"],"sourcesContent":[".input {\n  appearance: none;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  width: 18px;\n  height: 18px;\n  margin: 3px;\n  background-color: transparent;\n  border: 2px solid var(--choice-error-border, var(--colors-neutral-ink-light));\n  border-radius: 50%;\n  outline: none;\n  cursor: pointer;\n\n  transition: box-shadow 0.1s;\n\n  &:checked {\n    position: relative;\n    border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n  }\n\n  &:checked::before {\n    content: '';\n    width: 10px;\n    height: 10px;\n    position: absolute;\n    top: 2px;\n    left: 2px;\n    background-color: var(--choice-error-bg, var(--colors-secondary-blue-base));\n    border-radius: 50%;\n  }\n\n  &:hover {\n    border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n  }\n\n  &:active {\n    border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n  }\n\n  &:focus {\n    box-shadow: 0 0 0 var(--sizes-xs) var(--choice-error-focus, var(--colors-secondary-blue-light));\n    outline: 0;\n  }\n\n  &:disabled {\n    box-shadow: none;\n    background-color: var(--colors-neutral-grey-base);\n    border-color: var(--colors-neutral-ink-lightest);\n    cursor: default;\n  }\n\n  &:disabled::before {\n    background-color: var(--colors-neutral-ink-light);\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,00CAAA;AACA,aAAA,CAAA,OAAA,CAAA,gBAAA;;;;"}

package/dist/components/Radio/Radio.module.scss.js

@@ -1,7 +1,7 @@
 import insertStyle from '../../_virtual/____insertStyle.js';
 
-insertStyle("._input_1ycnq_1 {\n  appearance: none;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  width: 18px;\n  height: 18px;\n  margin: 3px;\n  background-color: transparent;\n  border: 2px solid var(--colors-neutral-ink-light);\n  border-radius: 50%;\n  outline: none;\n  cursor: pointer;\n  transition: box-shadow 0.1s;\n}\n._input_1ycnq_1:checked {\n  position: relative;\n  border-color: var(--colors-secondary-blue-base);\n}\n._input_1ycnq_1:checked::before {\n  content: \"\";\n  width: 10px;\n  height: 10px;\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  background-color: var(--colors-secondary-blue-base);\n  border-radius: 50%;\n}\n._input_1ycnq_1:hover {\n  border-color: var(--colors-secondary-blue-base);\n}\n._input_1ycnq_1:active {\n  border-color: var(--colors-secondary-blue-base);\n}\n._input_1ycnq_1:focus {\n  box-shadow: 0 0 0 var(--sizes-xs) var(--colors-secondary-blue-light);\n  outline: 0;\n}\n._input_1ycnq_1:disabled {\n  box-shadow: none;\n  background-color: var(--colors-neutral-grey-base);\n  border-color: var(--colors-neutral-ink-lightest);\n  cursor: default;\n}\n._input_1ycnq_1:disabled::before {\n  background-color: var(--colors-neutral-ink-light);\n}");
-var styles = {"input":"_input_1ycnq_1"};
+insertStyle("._input_17v2n_1 {\n  appearance: none;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  width: 18px;\n  height: 18px;\n  margin: 3px;\n  background-color: transparent;\n  border: 2px solid var(--choice-error-border, var(--colors-neutral-ink-light));\n  border-radius: 50%;\n  outline: none;\n  cursor: pointer;\n  transition: box-shadow 0.1s;\n}\n._input_17v2n_1:checked {\n  position: relative;\n  border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n}\n._input_17v2n_1:checked::before {\n  content: \"\";\n  width: 10px;\n  height: 10px;\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  background-color: var(--choice-error-bg, var(--colors-secondary-blue-base));\n  border-radius: 50%;\n}\n._input_17v2n_1:hover {\n  border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n}\n._input_17v2n_1:active {\n  border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n}\n._input_17v2n_1:focus {\n  box-shadow: 0 0 0 var(--sizes-xs) var(--choice-error-focus, var(--colors-secondary-blue-light));\n  outline: 0;\n}\n._input_17v2n_1:disabled {\n  box-shadow: none;\n  background-color: var(--colors-neutral-grey-base);\n  border-color: var(--colors-neutral-ink-lightest);\n  cursor: default;\n}\n._input_17v2n_1:disabled::before {\n  background-color: var(--colors-neutral-ink-light);\n}");
+var styles = {"input":"_input_17v2n_1"};
 
 export { styles as default };
 //# sourceMappingURL=Radio.module.scss.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.module.scss.js","sources":["../../../src/components/Radio/Radio.module.scss"],"sourcesContent":[".input {\n  appearance: none;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  width: 18px;\n  height: 18px;\n  margin: 3px;\n  background-color: transparent;\n  border: 2px solid var(--colors-neutral-ink-light);\n  border-radius: 50%;\n  outline: none;\n  cursor: pointer;\n\n  transition: box-shadow 0.1s;\n\n  &:checked {\n    position: relative;\n    border-color: var(--colors-secondary-blue-base);\n  }\n\n  &:checked::before {\n    content: '';\n    width: 10px;\n    height: 10px;\n    position: absolute;\n    top: 2px;\n    left: 2px;\n    background-color: var(--colors-secondary-blue-base);\n    border-radius: 50%;\n  }\n\n  &:hover {\n    border-color: var(--colors-secondary-blue-base);\n  }\n\n  &:active {\n    border-color: var(--colors-secondary-blue-base);\n  }\n\n  &:focus {\n    box-shadow: 0 0 0 var(--sizes-xs) var(--colors-secondary-blue-light);\n    outline: 0;\n  }\n\n  &:disabled {\n    box-shadow: none;\n    background-color: var(--colors-neutral-grey-base);\n    border-color: var(--colors-neutral-ink-lightest);\n    cursor: default;\n  }\n\n  &:disabled::before {\n    background-color: var(--colors-neutral-ink-light);\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,uqCAAA;AACA,aAAA,CAAA,OAAA,CAAA,gBAAA;;;;"}
+{"version":3,"file":"Radio.module.scss.js","sources":["../../../src/components/Radio/Radio.module.scss"],"sourcesContent":[".input {\n  appearance: none;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  width: 18px;\n  height: 18px;\n  margin: 3px;\n  background-color: transparent;\n  border: 2px solid var(--choice-error-border, var(--colors-neutral-ink-light));\n  border-radius: 50%;\n  outline: none;\n  cursor: pointer;\n\n  transition: box-shadow 0.1s;\n\n  &:checked {\n    position: relative;\n    border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n  }\n\n  &:checked::before {\n    content: '';\n    width: 10px;\n    height: 10px;\n    position: absolute;\n    top: 2px;\n    left: 2px;\n    background-color: var(--choice-error-bg, var(--colors-secondary-blue-base));\n    border-radius: 50%;\n  }\n\n  &:hover {\n    border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n  }\n\n  &:active {\n    border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n  }\n\n  &:focus {\n    box-shadow: 0 0 0 var(--sizes-xs) var(--choice-error-focus, var(--colors-secondary-blue-light));\n    outline: 0;\n  }\n\n  &:disabled {\n    box-shadow: none;\n    background-color: var(--colors-neutral-grey-base);\n    border-color: var(--colors-neutral-ink-lightest);\n    cursor: default;\n  }\n\n  &:disabled::before {\n    background-color: var(--colors-neutral-ink-light);\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,00CAAA;AACA,aAAA,CAAA,OAAA,CAAA,gBAAA;;;;"}

package/dist/components/Stack/types.d.ts

@@ -21,6 +21,9 @@ export declare const sizeScale: SizeScale;
 export declare const sizeAliases: SizeScale;
 declare const sizes: SizeScale;
 export type Size = keyof typeof sizes;
+/**
+ * @deprecated Stack is deprecated and will be removed in a future release. Replaced by `FlexCol` and `FlexRow`.
+ */
 export type StackProps = {
     /**
      * Direction of component

package/dist/components/View/types.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"types.cjs","sources":["../../../src/components/View/types.ts"],"sourcesContent":["import { ReactElement } from 'react';\nimport { ColourPalette } from '../../theme/modules/colors';\n\nexport type ViewId = string;\n\nexport enum ViewTypes {\n  saved = 'saved',\n  fixed = 'fixed',\n  draft = 'draft',\n}\n\nexport interface ViewProps {\n  /** ClassName to override styles on outer root element */\n  className?: string;\n\n  /** Colour palette for the view */\n  colourPalette?: ColourPalette;\n\n  /** customTextColour - Custom Rest State colour */\n  customTextColour?: string;\n\n  /** Flag to toggle active state styles on the Tab */\n  active?: boolean;\n\n  /** View name, eg.: Jade's view */\n  name: string;\n\n  /** IconSlot for passing */\n  iconSlot?: ReactElement;\n\n  /** View's unique identifier */\n  id: ViewId;\n\n  /** View type */\n  type?: keyof typeof ViewTypes;\n\n  /** Number or string value to show near view label */\n  count?: number | string;\n\n  /** Event handler for when View component is clicked (should get activated) */\n  onClick: (id: ViewId) => void;\n\n  /** Event handler for when user clicks the delete/cross icon */\n  onDelete?: (id: ViewId) => void;\n\n  /** Event handler for when user clicks to edit the view */\n  onEdit?: (id: ViewId) => void;\n\n  /** Class name for e2e testing */\n  e2eClassName?: string;\n}\n"],"names":["ViewTypes"],"mappings":";;AAKYA;AAAZ,CAAA,UAAY,SAAS,EAAA;AACnB,IAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACjB,CAAC,EAJWA,iBAAS,KAATA,iBAAS,GAAA,EAAA,CAAA,CAAA;;"}
+{"version":3,"file":"types.cjs","sources":["../../../src/components/View/types.ts"],"sourcesContent":["import { ReactElement } from 'react';\nimport { ColourPalette } from '../../theme/modules/colors';\n\nexport type ViewId = string;\n\nexport enum ViewTypes {\n  saved = 'saved',\n  fixed = 'fixed',\n  draft = 'draft',\n}\n\n/**\n * @deprecated View is deprecated and will be removed in a future release. Use the `ViewTab` component instead.\n */\nexport interface ViewProps {\n  /** ClassName to override styles on outer root element */\n  className?: string;\n\n  /** Colour palette for the view */\n  colourPalette?: ColourPalette;\n\n  /** customTextColour - Custom Rest State colour */\n  customTextColour?: string;\n\n  /** Flag to toggle active state styles on the Tab */\n  active?: boolean;\n\n  /** View name, eg.: Jade's view */\n  name: string;\n\n  /** IconSlot for passing */\n  iconSlot?: ReactElement;\n\n  /** View's unique identifier */\n  id: ViewId;\n\n  /** View type */\n  type?: keyof typeof ViewTypes;\n\n  /** Number or string value to show near view label */\n  count?: number | string;\n\n  /** Event handler for when View component is clicked (should get activated) */\n  onClick: (id: ViewId) => void;\n\n  /** Event handler for when user clicks the delete/cross icon */\n  onDelete?: (id: ViewId) => void;\n\n  /** Event handler for when user clicks to edit the view */\n  onEdit?: (id: ViewId) => void;\n\n  /** Class name for e2e testing */\n  e2eClassName?: string;\n}\n"],"names":["ViewTypes"],"mappings":";;AAKYA;AAAZ,CAAA,UAAY,SAAS,EAAA;AACnB,IAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACjB,CAAC,EAJWA,iBAAS,KAATA,iBAAS,GAAA,EAAA,CAAA,CAAA;;"}

package/dist/components/View/types.d.ts

@@ -6,6 +6,9 @@ export declare enum ViewTypes {
     fixed = "fixed",
     draft = "draft"
 }
+/**
+ * @deprecated View is deprecated and will be removed in a future release. Use the `ViewTab` component instead.
+ */
 export interface ViewProps {
     /** ClassName to override styles on outer root element */
     className?: string;

package/dist/components/View/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../src/components/View/types.ts"],"sourcesContent":["import { ReactElement } from 'react';\nimport { ColourPalette } from '../../theme/modules/colors';\n\nexport type ViewId = string;\n\nexport enum ViewTypes {\n  saved = 'saved',\n  fixed = 'fixed',\n  draft = 'draft',\n}\n\nexport interface ViewProps {\n  /** ClassName to override styles on outer root element */\n  className?: string;\n\n  /** Colour palette for the view */\n  colourPalette?: ColourPalette;\n\n  /** customTextColour - Custom Rest State colour */\n  customTextColour?: string;\n\n  /** Flag to toggle active state styles on the Tab */\n  active?: boolean;\n\n  /** View name, eg.: Jade's view */\n  name: string;\n\n  /** IconSlot for passing */\n  iconSlot?: ReactElement;\n\n  /** View's unique identifier */\n  id: ViewId;\n\n  /** View type */\n  type?: keyof typeof ViewTypes;\n\n  /** Number or string value to show near view label */\n  count?: number | string;\n\n  /** Event handler for when View component is clicked (should get activated) */\n  onClick: (id: ViewId) => void;\n\n  /** Event handler for when user clicks the delete/cross icon */\n  onDelete?: (id: ViewId) => void;\n\n  /** Event handler for when user clicks to edit the view */\n  onEdit?: (id: ViewId) => void;\n\n  /** Class name for e2e testing */\n  e2eClassName?: string;\n}\n"],"names":[],"mappings":"IAKY;AAAZ,CAAA,UAAY,SAAS,EAAA;AACnB,IAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACjB,CAAC,EAJW,SAAS,KAAT,SAAS,GAAA,EAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"types.js","sources":["../../../src/components/View/types.ts"],"sourcesContent":["import { ReactElement } from 'react';\nimport { ColourPalette } from '../../theme/modules/colors';\n\nexport type ViewId = string;\n\nexport enum ViewTypes {\n  saved = 'saved',\n  fixed = 'fixed',\n  draft = 'draft',\n}\n\n/**\n * @deprecated View is deprecated and will be removed in a future release. Use the `ViewTab` component instead.\n */\nexport interface ViewProps {\n  /** ClassName to override styles on outer root element */\n  className?: string;\n\n  /** Colour palette for the view */\n  colourPalette?: ColourPalette;\n\n  /** customTextColour - Custom Rest State colour */\n  customTextColour?: string;\n\n  /** Flag to toggle active state styles on the Tab */\n  active?: boolean;\n\n  /** View name, eg.: Jade's view */\n  name: string;\n\n  /** IconSlot for passing */\n  iconSlot?: ReactElement;\n\n  /** View's unique identifier */\n  id: ViewId;\n\n  /** View type */\n  type?: keyof typeof ViewTypes;\n\n  /** Number or string value to show near view label */\n  count?: number | string;\n\n  /** Event handler for when View component is clicked (should get activated) */\n  onClick: (id: ViewId) => void;\n\n  /** Event handler for when user clicks the delete/cross icon */\n  onDelete?: (id: ViewId) => void;\n\n  /** Event handler for when user clicks to edit the view */\n  onEdit?: (id: ViewId) => void;\n\n  /** Class name for e2e testing */\n  e2eClassName?: string;\n}\n"],"names":[],"mappings":"IAKY;AAAZ,CAAA,UAAY,SAAS,EAAA;AACnB,IAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACjB,CAAC,EAJW,SAAS,KAAT,SAAS,GAAA,EAAA,CAAA,CAAA;;;;"}

package/dist/hoc/withLabels/withLabels.cjs

@@ -28,11 +28,8 @@ const withLabels = (Component) => {
                     React__default.default.createElement(HelpIcon.ReactComponent, { "data-testid": "tooltip-help", width: index.theme.sizes.base, height: index.theme.sizes.base, color: index.theme.colors.neutral.ink.light })))),
             hint && (React__default.default.createElement(Text.Text, { variant: "hintText", as: "span", className: withLabels_module.hint, id: `${componentId}-hint` }, hint)),
             React__default.default.createElement(Component, { ref: ref, id: componentId, hasError: !!error, disabled: !!disabledMessage, disabledMessage: disabledMessage, ...otherProps }),
-            error && (React__default.default.createElement(MiniAlert.MiniAlert, { id: `${componentId}-error`, variant: "error", isBold: false, role: "alert", 
-                // Overcomplicated but title only accepts string & titleSlot skips <Text> wrapper (wrong font size).
-                // Use both with typeof to get correct sizing for strings and support JSX errors.
-                title: typeof error === 'string' ? error : undefined, titleSlot: typeof error !== 'string' ? error : undefined })),
-            disabledMessage && (React__default.default.createElement(MiniAlert.MiniAlert, { id: `${componentId}-disabled`, isBold: false, title: typeof disabledMessage === 'string' ? disabledMessage : undefined, titleSlot: typeof disabledMessage !== 'string' ? disabledMessage : undefined }))));
+            error && (React__default.default.createElement(MiniAlert.MiniAlert, { id: `${componentId}-error`, variant: "error", isBold: false, role: "alert", title: error })),
+            disabledMessage && (React__default.default.createElement(MiniAlert.MiniAlert, { id: `${componentId}-disabled`, isBold: false, title: disabledMessage }))));
     });
     ComponentWithLabels.displayName = `withLabels(${Component.displayName || Component.name || 'Component'})`;
     return ComponentWithLabels;

package/dist/hoc/withLabels/withLabels.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"withLabels.cjs","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, forwardRef, ReactNode } from 'react';\n\nimport { FlexCol } from '../../components/Flex/FlexCol';\nimport { FlexRow } from '../../components/Flex/FlexRow';\nimport { MiniAlert } from '../../components/Alerts/MiniAlert';\nimport { Text } from '../../components/Text';\nimport { useId } from '../../hooks/useId';\nimport { HelpIcon } from '../../icons';\nimport { theme } from '../../theme';\n\nimport { BlockTooltip } from './BlockTooltip';\nimport styles from './withLabels.module.scss';\n\nexport interface WithLabelsProps {\n  id?: string;\n  label?: ReactNode;\n  hint?: ReactNode;\n  error?: ReactNode;\n  disabledMessage?: ReactNode;\n  tooltip?: string;\n  tooltipContent?: ReactNode;\n}\n\n// eslint-disable-next-line @typescript-eslint/comma-dangle -- comma is required so TS knows this is a generic, not JSX\nexport const withLabels = <P, R = unknown>(Component: ComponentType<P>) => {\n  const ComponentWithLabels = forwardRef<R, P & WithLabelsProps>(\n    ({ label, hint, error, disabledMessage, tooltip, tooltipContent, id, ...otherProps }, ref) => {\n      const componentId = useId({ id, prefix: Component.name });\n\n      if (!label)\n        return (\n          <Component\n            ref={ref}\n            id={componentId}\n            hasError={!!error}\n            disabled={!!disabledMessage}\n            disabledMessage={disabledMessage}\n            {...(otherProps as P)}\n          />\n        );\n\n      return (\n        <FlexCol className={styles.rootStack}>\n          <FlexRow>\n            <Text variant=\"inputLabel\" id={`${componentId}-label`} htmlFor={componentId}>\n              {label}\n            </Text>\n            {(tooltip || tooltipContent) && (\n              <BlockTooltip text={tooltip} content={tooltipContent}>\n                <HelpIcon\n                  data-testid=\"tooltip-help\"\n                  width={theme.sizes.base}\n                  height={theme.sizes.base}\n                  color={theme.colors.neutral.ink.light}\n                />\n              </BlockTooltip>\n            )}\n          </FlexRow>\n          {hint && (\n            <Text variant=\"hintText\" as=\"span\" className={styles.hint} id={`${componentId}-hint`}>\n              {hint}\n            </Text>\n          )}\n          <Component\n            ref={ref}\n            id={componentId}\n            hasError={!!error}\n            disabled={!!disabledMessage}\n            disabledMessage={disabledMessage}\n            {...(otherProps as P)}\n          />\n          {error && (\n            <MiniAlert\n              id={`${componentId}-error`}\n              variant=\"error\"\n              isBold={false}\n              role=\"alert\"\n              // Overcomplicated but title only accepts string & titleSlot skips <Text> wrapper (wrong font size).\n              // Use both with typeof to get correct sizing for strings and support JSX errors.\n              title={typeof error === 'string' ? error : undefined}\n              titleSlot={typeof error !== 'string' ? error : undefined}\n            />\n          )}\n          {disabledMessage && (\n            <MiniAlert\n              id={`${componentId}-disabled`}\n              isBold={false}\n              title={typeof disabledMessage === 'string' ? disabledMessage : undefined}\n              titleSlot={typeof disabledMessage !== 'string' ? disabledMessage : undefined}\n            />\n          )}\n        </FlexCol>\n      );\n    },\n  );\n\n  ComponentWithLabels.displayName = `withLabels(${Component.displayName || Component.name || 'Component'})`;\n\n  return ComponentWithLabels;\n};\n"],"names":["forwardRef","useId","React","FlexCol","styles","FlexRow","Text","BlockTooltip","HelpIcon","theme","MiniAlert"],"mappings":"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"}
+{"version":3,"file":"withLabels.cjs","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, forwardRef, ReactNode } from 'react';\n\nimport { FlexCol } from '../../components/Flex/FlexCol';\nimport { FlexRow } from '../../components/Flex/FlexRow';\nimport { MiniAlert } from '../../components/Alerts/MiniAlert';\nimport { Text } from '../../components/Text';\nimport { useId } from '../../hooks/useId';\nimport { HelpIcon } from '../../icons';\nimport { theme } from '../../theme';\n\nimport { BlockTooltip } from './BlockTooltip';\nimport styles from './withLabels.module.scss';\n\nexport interface WithLabelsProps {\n  id?: string;\n  label?: ReactNode;\n  hint?: ReactNode;\n  error?: ReactNode;\n  disabledMessage?: ReactNode;\n  tooltip?: string;\n  tooltipContent?: ReactNode;\n}\n\n// eslint-disable-next-line @typescript-eslint/comma-dangle -- comma is required so TS knows this is a generic, not JSX\nexport const withLabels = <P, R = unknown>(Component: ComponentType<P>) => {\n  const ComponentWithLabels = forwardRef<R, P & WithLabelsProps>(\n    ({ label, hint, error, disabledMessage, tooltip, tooltipContent, id, ...otherProps }, ref) => {\n      const componentId = useId({ id, prefix: Component.name });\n\n      if (!label)\n        return (\n          <Component\n            ref={ref}\n            id={componentId}\n            hasError={!!error}\n            disabled={!!disabledMessage}\n            disabledMessage={disabledMessage}\n            {...(otherProps as P)}\n          />\n        );\n\n      return (\n        <FlexCol className={styles.rootStack}>\n          <FlexRow>\n            <Text variant=\"inputLabel\" id={`${componentId}-label`} htmlFor={componentId}>\n              {label}\n            </Text>\n            {(tooltip || tooltipContent) && (\n              <BlockTooltip text={tooltip} content={tooltipContent}>\n                <HelpIcon\n                  data-testid=\"tooltip-help\"\n                  width={theme.sizes.base}\n                  height={theme.sizes.base}\n                  color={theme.colors.neutral.ink.light}\n                />\n              </BlockTooltip>\n            )}\n          </FlexRow>\n          {hint && (\n            <Text variant=\"hintText\" as=\"span\" className={styles.hint} id={`${componentId}-hint`}>\n              {hint}\n            </Text>\n          )}\n          <Component\n            ref={ref}\n            id={componentId}\n            hasError={!!error}\n            disabled={!!disabledMessage}\n            disabledMessage={disabledMessage}\n            {...(otherProps as P)}\n          />\n          {error && (\n            <MiniAlert\n              id={`${componentId}-error`}\n              variant=\"error\"\n              isBold={false}\n              role=\"alert\"\n              title={error}\n            />\n          )}\n          {disabledMessage && (\n            <MiniAlert\n              id={`${componentId}-disabled`}\n              isBold={false}\n              title={disabledMessage}\n            />\n          )}\n        </FlexCol>\n      );\n    },\n  );\n\n  ComponentWithLabels.displayName = `withLabels(${Component.displayName || Component.name || 'Component'})`;\n\n  return ComponentWithLabels;\n};\n"],"names":["forwardRef","useId","React","FlexCol","styles","FlexRow","Text","BlockTooltip","HelpIcon","theme","MiniAlert"],"mappings":";;;;;;;;;;;;;;;;;AAuBA;AACO,MAAM,UAAU,GAAG,CAAiB,SAA2B,KAAI;IACxE,MAAM,mBAAmB,GAAGA,gBAAU,CACpC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,eAAe,EAAE,OAAO,EAAE,cAAc,EAAE,EAAE,EAAE,GAAG,UAAU,EAAE,EAAE,GAAG,KAAI;AAC3F,QAAA,MAAM,WAAW,GAAGC,WAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,CAAC,IAAI,EAAE,CAAC;AAEzD,QAAA,IAAI,CAAC,KAAK;AACR,YAAA,QACEC,sBAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACR,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,WAAW,EACf,QAAQ,EAAE,CAAC,CAAC,KAAK,EACjB,QAAQ,EAAE,CAAC,CAAC,eAAe,EAC3B,eAAe,EAAE,eAAe,EAAA,GAC3B,UAAgB,EAAA,CACrB;QAGN,QACEA,qCAACC,eAAO,EAAA,EAAC,SAAS,EAAEC,iBAAM,CAAC,SAAS,EAAA;AAClC,YAAAF,sBAAA,CAAA,aAAA,CAACG,eAAO,EAAA,IAAA;AACN,gBAAAH,sBAAA,CAAA,aAAA,CAACI,SAAI,EAAA,EAAC,OAAO,EAAC,YAAY,EAAC,EAAE,EAAE,CAAA,EAAG,WAAW,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAA,EACxE,KAAK,CACD;AACN,gBAAA,CAAC,OAAO,IAAI,cAAc,MACzBJ,sBAAA,CAAA,aAAA,CAACK,yBAAY,EAAA,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAA;AAClD,oBAAAL,sBAAA,CAAA,aAAA,CAACM,uBAAQ,EAAA,EAAA,aAAA,EACK,cAAc,EAC1B,KAAK,EAAEC,WAAK,CAAC,KAAK,CAAC,IAAI,EACvB,MAAM,EAAEA,WAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,EAAA,CACrC,CACW,CAChB,CACO;YACT,IAAI,KACHP,sBAAA,CAAA,aAAA,CAACI,SAAI,EAAA,EAAC,OAAO,EAAC,UAAU,EAAC,EAAE,EAAC,MAAM,EAAC,SAAS,EAAEF,iBAAM,CAAC,IAAI,EAAE,EAAE,EAAE,CAAA,EAAG,WAAW,CAAA,KAAA,CAAO,EAAA,EACjF,IAAI,CACA,CACR;YACDF,sBAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACR,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,WAAW,EACf,QAAQ,EAAE,CAAC,CAAC,KAAK,EACjB,QAAQ,EAAE,CAAC,CAAC,eAAe,EAC3B,eAAe,EAAE,eAAe,EAAA,GAC3B,UAAgB,EAAA,CACrB;YACD,KAAK,KACJA,sBAAA,CAAA,aAAA,CAACQ,mBAAS,EAAA,EACR,EAAE,EAAE,CAAA,EAAG,WAAW,CAAA,MAAA,CAAQ,EAC1B,OAAO,EAAC,OAAO,EACf,MAAM,EAAE,KAAK,EACb,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,EAAA,CACZ,CACH;YACA,eAAe,KACdR,sBAAA,CAAA,aAAA,CAACQ,mBAAS,IACR,EAAE,EAAE,CAAA,EAAG,WAAW,CAAA,SAAA,CAAW,EAC7B,MAAM,EAAE,KAAK,EACb,KAAK,EAAE,eAAe,EAAA,CACtB,CACH,CACO;AAEd,IAAA,CAAC,CACF;AAED,IAAA,mBAAmB,CAAC,WAAW,GAAG,CAAA,WAAA,EAAc,SAAS,CAAC,WAAW,IAAI,SAAS,CAAC,IAAI,IAAI,WAAW,GAAG;AAEzG,IAAA,OAAO,mBAAmB;AAC5B;;;;"}

package/dist/hoc/withLabels/withLabels.js

@@ -22,11 +22,8 @@ const withLabels = (Component) => {
                     React__default.createElement(HelpIcon, { "data-testid": "tooltip-help", width: theme.sizes.base, height: theme.sizes.base, color: theme.colors.neutral.ink.light })))),
             hint && (React__default.createElement(Text, { variant: "hintText", as: "span", className: labelStyles.hint, id: `${componentId}-hint` }, hint)),
             React__default.createElement(Component, { ref: ref, id: componentId, hasError: !!error, disabled: !!disabledMessage, disabledMessage: disabledMessage, ...otherProps }),
-            error && (React__default.createElement(MiniAlert, { id: `${componentId}-error`, variant: "error", isBold: false, role: "alert", 
-                // Overcomplicated but title only accepts string & titleSlot skips <Text> wrapper (wrong font size).
-                // Use both with typeof to get correct sizing for strings and support JSX errors.
-                title: typeof error === 'string' ? error : undefined, titleSlot: typeof error !== 'string' ? error : undefined })),
-            disabledMessage && (React__default.createElement(MiniAlert, { id: `${componentId}-disabled`, isBold: false, title: typeof disabledMessage === 'string' ? disabledMessage : undefined, titleSlot: typeof disabledMessage !== 'string' ? disabledMessage : undefined }))));
+            error && (React__default.createElement(MiniAlert, { id: `${componentId}-error`, variant: "error", isBold: false, role: "alert", title: error })),
+            disabledMessage && (React__default.createElement(MiniAlert, { id: `${componentId}-disabled`, isBold: false, title: disabledMessage }))));
     });
     ComponentWithLabels.displayName = `withLabels(${Component.displayName || Component.name || 'Component'})`;
     return ComponentWithLabels;

package/dist/hoc/withLabels/withLabels.js.map

@@ -1 +1 @@
-{"version":3,"file":"withLabels.js","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, forwardRef, ReactNode } from 'react';\n\nimport { FlexCol } from '../../components/Flex/FlexCol';\nimport { FlexRow } from '../../components/Flex/FlexRow';\nimport { MiniAlert } from '../../components/Alerts/MiniAlert';\nimport { Text } from '../../components/Text';\nimport { useId } from '../../hooks/useId';\nimport { HelpIcon } from '../../icons';\nimport { theme } from '../../theme';\n\nimport { BlockTooltip } from './BlockTooltip';\nimport styles from './withLabels.module.scss';\n\nexport interface WithLabelsProps {\n  id?: string;\n  label?: ReactNode;\n  hint?: ReactNode;\n  error?: ReactNode;\n  disabledMessage?: ReactNode;\n  tooltip?: string;\n  tooltipContent?: ReactNode;\n}\n\n// eslint-disable-next-line @typescript-eslint/comma-dangle -- comma is required so TS knows this is a generic, not JSX\nexport const withLabels = <P, R = unknown>(Component: ComponentType<P>) => {\n  const ComponentWithLabels = forwardRef<R, P & WithLabelsProps>(\n    ({ label, hint, error, disabledMessage, tooltip, tooltipContent, id, ...otherProps }, ref) => {\n      const componentId = useId({ id, prefix: Component.name });\n\n      if (!label)\n        return (\n          <Component\n            ref={ref}\n            id={componentId}\n            hasError={!!error}\n            disabled={!!disabledMessage}\n            disabledMessage={disabledMessage}\n            {...(otherProps as P)}\n          />\n        );\n\n      return (\n        <FlexCol className={styles.rootStack}>\n          <FlexRow>\n            <Text variant=\"inputLabel\" id={`${componentId}-label`} htmlFor={componentId}>\n              {label}\n            </Text>\n            {(tooltip || tooltipContent) && (\n              <BlockTooltip text={tooltip} content={tooltipContent}>\n                <HelpIcon\n                  data-testid=\"tooltip-help\"\n                  width={theme.sizes.base}\n                  height={theme.sizes.base}\n                  color={theme.colors.neutral.ink.light}\n                />\n              </BlockTooltip>\n            )}\n          </FlexRow>\n          {hint && (\n            <Text variant=\"hintText\" as=\"span\" className={styles.hint} id={`${componentId}-hint`}>\n              {hint}\n            </Text>\n          )}\n          <Component\n            ref={ref}\n            id={componentId}\n            hasError={!!error}\n            disabled={!!disabledMessage}\n            disabledMessage={disabledMessage}\n            {...(otherProps as P)}\n          />\n          {error && (\n            <MiniAlert\n              id={`${componentId}-error`}\n              variant=\"error\"\n              isBold={false}\n              role=\"alert\"\n              // Overcomplicated but title only accepts string & titleSlot skips <Text> wrapper (wrong font size).\n              // Use both with typeof to get correct sizing for strings and support JSX errors.\n              title={typeof error === 'string' ? error : undefined}\n              titleSlot={typeof error !== 'string' ? error : undefined}\n            />\n          )}\n          {disabledMessage && (\n            <MiniAlert\n              id={`${componentId}-disabled`}\n              isBold={false}\n              title={typeof disabledMessage === 'string' ? disabledMessage : undefined}\n              titleSlot={typeof disabledMessage !== 'string' ? disabledMessage : undefined}\n            />\n          )}\n        </FlexCol>\n      );\n    },\n  );\n\n  ComponentWithLabels.displayName = `withLabels(${Component.displayName || Component.name || 'Component'})`;\n\n  return ComponentWithLabels;\n};\n"],"names":["React","styles"],"mappings":"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"}
+{"version":3,"file":"withLabels.js","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, forwardRef, ReactNode } from 'react';\n\nimport { FlexCol } from '../../components/Flex/FlexCol';\nimport { FlexRow } from '../../components/Flex/FlexRow';\nimport { MiniAlert } from '../../components/Alerts/MiniAlert';\nimport { Text } from '../../components/Text';\nimport { useId } from '../../hooks/useId';\nimport { HelpIcon } from '../../icons';\nimport { theme } from '../../theme';\n\nimport { BlockTooltip } from './BlockTooltip';\nimport styles from './withLabels.module.scss';\n\nexport interface WithLabelsProps {\n  id?: string;\n  label?: ReactNode;\n  hint?: ReactNode;\n  error?: ReactNode;\n  disabledMessage?: ReactNode;\n  tooltip?: string;\n  tooltipContent?: ReactNode;\n}\n\n// eslint-disable-next-line @typescript-eslint/comma-dangle -- comma is required so TS knows this is a generic, not JSX\nexport const withLabels = <P, R = unknown>(Component: ComponentType<P>) => {\n  const ComponentWithLabels = forwardRef<R, P & WithLabelsProps>(\n    ({ label, hint, error, disabledMessage, tooltip, tooltipContent, id, ...otherProps }, ref) => {\n      const componentId = useId({ id, prefix: Component.name });\n\n      if (!label)\n        return (\n          <Component\n            ref={ref}\n            id={componentId}\n            hasError={!!error}\n            disabled={!!disabledMessage}\n            disabledMessage={disabledMessage}\n            {...(otherProps as P)}\n          />\n        );\n\n      return (\n        <FlexCol className={styles.rootStack}>\n          <FlexRow>\n            <Text variant=\"inputLabel\" id={`${componentId}-label`} htmlFor={componentId}>\n              {label}\n            </Text>\n            {(tooltip || tooltipContent) && (\n              <BlockTooltip text={tooltip} content={tooltipContent}>\n                <HelpIcon\n                  data-testid=\"tooltip-help\"\n                  width={theme.sizes.base}\n                  height={theme.sizes.base}\n                  color={theme.colors.neutral.ink.light}\n                />\n              </BlockTooltip>\n            )}\n          </FlexRow>\n          {hint && (\n            <Text variant=\"hintText\" as=\"span\" className={styles.hint} id={`${componentId}-hint`}>\n              {hint}\n            </Text>\n          )}\n          <Component\n            ref={ref}\n            id={componentId}\n            hasError={!!error}\n            disabled={!!disabledMessage}\n            disabledMessage={disabledMessage}\n            {...(otherProps as P)}\n          />\n          {error && (\n            <MiniAlert\n              id={`${componentId}-error`}\n              variant=\"error\"\n              isBold={false}\n              role=\"alert\"\n              title={error}\n            />\n          )}\n          {disabledMessage && (\n            <MiniAlert\n              id={`${componentId}-disabled`}\n              isBold={false}\n              title={disabledMessage}\n            />\n          )}\n        </FlexCol>\n      );\n    },\n  );\n\n  ComponentWithLabels.displayName = `withLabels(${Component.displayName || Component.name || 'Component'})`;\n\n  return ComponentWithLabels;\n};\n"],"names":["React","styles"],"mappings":";;;;;;;;;;;AAuBA;AACO,MAAM,UAAU,GAAG,CAAiB,SAA2B,KAAI;IACxE,MAAM,mBAAmB,GAAG,UAAU,CACpC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,eAAe,EAAE,OAAO,EAAE,cAAc,EAAE,EAAE,EAAE,GAAG,UAAU,EAAE,EAAE,GAAG,KAAI;AAC3F,QAAA,MAAM,WAAW,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,CAAC,IAAI,EAAE,CAAC;AAEzD,QAAA,IAAI,CAAC,KAAK;AACR,YAAA,QACEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACR,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,WAAW,EACf,QAAQ,EAAE,CAAC,CAAC,KAAK,EACjB,QAAQ,EAAE,CAAC,CAAC,eAAe,EAC3B,eAAe,EAAE,eAAe,EAAA,GAC3B,UAAgB,EAAA,CACrB;QAGN,QACEA,6BAAC,OAAO,EAAA,EAAC,SAAS,EAAEC,WAAM,CAAC,SAAS,EAAA;AAClC,YAAAD,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,IAAA;AACN,gBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,YAAY,EAAC,EAAE,EAAE,CAAA,EAAG,WAAW,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAA,EACxE,KAAK,CACD;AACN,gBAAA,CAAC,OAAO,IAAI,cAAc,MACzBA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAA;AAClD,oBAAAA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EAAA,aAAA,EACK,cAAc,EAC1B,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACvB,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,EAAA,CACrC,CACW,CAChB,CACO;YACT,IAAI,KACHA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,UAAU,EAAC,EAAE,EAAC,MAAM,EAAC,SAAS,EAAEC,WAAM,CAAC,IAAI,EAAE,EAAE,EAAE,CAAA,EAAG,WAAW,CAAA,KAAA,CAAO,EAAA,EACjF,IAAI,CACA,CACR;YACDD,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACR,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,WAAW,EACf,QAAQ,EAAE,CAAC,CAAC,KAAK,EACjB,QAAQ,EAAE,CAAC,CAAC,eAAe,EAC3B,eAAe,EAAE,eAAe,EAAA,GAC3B,UAAgB,EAAA,CACrB;YACD,KAAK,KACJA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACR,EAAE,EAAE,CAAA,EAAG,WAAW,CAAA,MAAA,CAAQ,EAC1B,OAAO,EAAC,OAAO,EACf,MAAM,EAAE,KAAK,EACb,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,EAAA,CACZ,CACH;YACA,eAAe,KACdA,cAAA,CAAA,aAAA,CAAC,SAAS,IACR,EAAE,EAAE,CAAA,EAAG,WAAW,CAAA,SAAA,CAAW,EAC7B,MAAM,EAAE,KAAK,EACb,KAAK,EAAE,eAAe,EAAA,CACtB,CACH,CACO;AAEd,IAAA,CAAC,CACF;AAED,IAAA,mBAAmB,CAAC,WAAW,GAAG,CAAA,WAAA,EAAc,SAAS,CAAC,WAAW,IAAI,SAAS,CAAC,IAAI,IAAI,WAAW,GAAG;AAEzG,IAAA,OAAO,mBAAmB;AAC5B;;;;"}

package/dist/utils/forms/form.module.scss.cjs

@@ -2,8 +2,8 @@
 
 var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
 
-___$insertStyle("._fullStyles_4dcpo_1 {\n  --outline-size: var(--sizes-xs);\n  --border-color: var(--colors-neutral-ink-lightest);\n  --shadow-color: var(--colors-secondary-blue-light);\n}\n._fullStyles_4dcpo_1:disabled, ._fullStyles_4dcpo_1[data-disabled] {\n  opacity: 1;\n  box-shadow: none;\n  background-color: var(--colors-neutral-grey-light);\n  cursor: not-allowed;\n}\n._fullStyles_4dcpo_1._compact_4dcpo_12 {\n  --outline-size: 2px;\n  min-height: var(--sizes-8);\n}\n._fullStyles_4dcpo_1._error_4dcpo_16 {\n  --border-color: var(--colors-secondary-red-base);\n  --shadow-color: var(--colors-secondary-red-light);\n}\n._fullStyles_4dcpo_1:focus {\n  border-color: var(--border-color);\n  box-shadow: 0 0 0 var(--outline-size) var(--shadow-color);\n  outline: 0;\n}\n._fullStyles_4dcpo_1::placeholder {\n  font-family: var(--text-placeholder-font-family);\n  font-style: var(--text-placeholder-font-style);\n  font-weight: var(--text-placeholder-font-weight);\n  font-size: var(--text-placeholder-font-size);\n  line-height: var(--text-placeholder-line-height);\n  color: var(--text-placeholder-color);\n  text-decoration: var(--text-placeholder-text-decoration);\n  letter-spacing: var(--text-placeholder-letter-spacing);\n}\n._fullStyles_4dcpo_1:invalid {\n  box-shadow: 0 0 0 var(--outline-size) var(--border-color);\n  border-color: var(--colors-secondary-red-base);\n}\n\n._base_4dcpo_40 {\n  font-family: var(--text-body-font-family);\n  font-style: var(--text-body-font-style);\n  font-weight: var(--text-body-font-weight);\n  font-size: var(--text-body-font-size);\n  line-height: var(--text-body-line-height);\n  color: var(--text-body-color);\n  text-decoration: var(--text-body-text-decoration);\n  letter-spacing: var(--text-body-letter-spacing);\n  appearance: none;\n  box-sizing: border-box;\n  background-color: white;\n  text-align: left;\n  min-height: var(--sizes-10);\n  padding-inline: var(--sizes-3);\n  border-radius: var(--radius-base);\n  border: 1px solid var(--border-color);\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  /* When inside an InputGroup, reduce inline padding to bring content closer together */\n}\n._base_4dcpo_40._inputGroup_4dcpo_62:first-child {\n  padding-right: calc(var(--sizes-3) - var(--sizes-1));\n}\n._base_4dcpo_40._inputGroup_4dcpo_62:last-child {\n  padding-left: var(--sizes-2);\n}\n._base_4dcpo_40._inputGroup_4dcpo_62:not(:first-child):not(:last-child) {\n  padding-inline: var(--sizes-2);\n}\n\n/** InputGroup styles from the InputGroup component */\n._inputGroup_4dcpo_62 {\n  display: flex;\n  /* Remove inline margins from all children */\n  /* Bring in-focus and active children to the front to maintain outlines */\n  /* Remove inline borders for children in the middle */\n  /* Remove right border radius from first child */\n  /* Remove left border radius from last child */\n}\n._inputGroup_4dcpo_62 > * {\n  margin-left: 0;\n  margin-right: 0;\n  box-shadow: none;\n}\n._inputGroup_4dcpo_62 > *:focus, ._inputGroup_4dcpo_62 > *:active {\n  z-index: 5;\n}\n._inputGroup_4dcpo_62 > *:not(:first-child):not(:last-child) {\n  border-radius: 0 !important;\n  border-inline: 0 !important;\n}\n._inputGroup_4dcpo_62 > *:first-child {\n  border-top-right-radius: 0 !important;\n  border-bottom-right-radius: 0 !important;\n  border-right: 0 !important;\n}\n._inputGroup_4dcpo_62 > *:last-child {\n  border-top-left-radius: 0 !important;\n  border-bottom-left-radius: 0 !important;\n  border-left: 0 !important;\n}");
-var formStyles = {"fullStyles":"_fullStyles_4dcpo_1","compact":"_compact_4dcpo_12","error":"_error_4dcpo_16","base":"_base_4dcpo_40","inputGroup":"_inputGroup_4dcpo_62"};
+___$insertStyle("._fullStyles_1x1rs_1 {\n  --outline-size: var(--sizes-xs);\n  --border-color: var(--colors-neutral-ink-lightest);\n  --shadow-color: var(--colors-secondary-blue-light);\n}\n._fullStyles_1x1rs_1:disabled, ._fullStyles_1x1rs_1[data-disabled] {\n  opacity: 1;\n  box-shadow: none;\n  background-color: var(--colors-neutral-grey-light);\n  cursor: not-allowed;\n}\n._fullStyles_1x1rs_1._compact_1x1rs_12 {\n  --outline-size: 2px;\n  min-height: var(--sizes-8);\n}\n._fullStyles_1x1rs_1._error_1x1rs_16 {\n  --border-color: var(--colors-secondary-red-base);\n  --shadow-color: var(--colors-secondary-red-light);\n}\n._fullStyles_1x1rs_1:focus {\n  border-color: var(--border-color);\n  box-shadow: 0 0 0 var(--outline-size) var(--shadow-color);\n  outline: 0;\n}\n._fullStyles_1x1rs_1::placeholder {\n  font-family: var(--text-placeholder-font-family);\n  font-style: var(--text-placeholder-font-style);\n  font-weight: var(--text-placeholder-font-weight);\n  font-size: var(--text-placeholder-font-size);\n  line-height: var(--text-placeholder-line-height);\n  color: var(--text-placeholder-color);\n  text-decoration: var(--text-placeholder-text-decoration);\n  letter-spacing: var(--text-placeholder-letter-spacing);\n}\n._fullStyles_1x1rs_1:invalid {\n  box-shadow: 0 0 0 var(--outline-size) var(--shadow-color);\n  border-color: var(--colors-secondary-red-base);\n}\n\n._base_1x1rs_40 {\n  font-family: var(--text-body-font-family);\n  font-style: var(--text-body-font-style);\n  font-weight: var(--text-body-font-weight);\n  font-size: var(--text-body-font-size);\n  line-height: var(--text-body-line-height);\n  color: var(--text-body-color);\n  text-decoration: var(--text-body-text-decoration);\n  letter-spacing: var(--text-body-letter-spacing);\n  appearance: none;\n  box-sizing: border-box;\n  background-color: white;\n  text-align: left;\n  min-height: var(--sizes-10);\n  padding-inline: var(--sizes-3);\n  border-radius: var(--radius-base);\n  border: 1px solid var(--border-color);\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  /* When inside an InputGroup, reduce inline padding to bring content closer together */\n}\n._base_1x1rs_40._inputGroup_1x1rs_62:first-child {\n  padding-right: calc(var(--sizes-3) - var(--sizes-1));\n}\n._base_1x1rs_40._inputGroup_1x1rs_62:last-child {\n  padding-left: var(--sizes-2);\n}\n._base_1x1rs_40._inputGroup_1x1rs_62:not(:first-child):not(:last-child) {\n  padding-inline: var(--sizes-2);\n}\n\n/** InputGroup styles from the InputGroup component */\n._inputGroup_1x1rs_62 {\n  display: flex;\n  /* Remove inline margins from all children */\n  /* Bring in-focus and active children to the front to maintain outlines */\n  /* Remove inline borders for children in the middle */\n  /* Remove right border radius from first child */\n  /* Remove left border radius from last child */\n}\n._inputGroup_1x1rs_62 > * {\n  margin-left: 0;\n  margin-right: 0;\n  box-shadow: none;\n}\n._inputGroup_1x1rs_62 > *:focus, ._inputGroup_1x1rs_62 > *:active {\n  z-index: 5;\n}\n._inputGroup_1x1rs_62 > *:not(:first-child):not(:last-child) {\n  border-radius: 0 !important;\n  border-inline: 0 !important;\n}\n._inputGroup_1x1rs_62 > *:first-child {\n  border-top-right-radius: 0 !important;\n  border-bottom-right-radius: 0 !important;\n  border-right: 0 !important;\n}\n._inputGroup_1x1rs_62 > *:last-child {\n  border-top-left-radius: 0 !important;\n  border-bottom-left-radius: 0 !important;\n  border-left: 0 !important;\n}");
+var formStyles = {"fullStyles":"_fullStyles_1x1rs_1","compact":"_compact_1x1rs_12","error":"_error_1x1rs_16","base":"_base_1x1rs_40","inputGroup":"_inputGroup_1x1rs_62"};
 
 module.exports = formStyles;
 //# sourceMappingURL=form.module.scss.cjs.map

package/dist/utils/forms/form.module.scss.js

@@ -1,7 +1,7 @@
 import insertStyle from '../../_virtual/____insertStyle.js';
 
-insertStyle("._fullStyles_4dcpo_1 {\n  --outline-size: var(--sizes-xs);\n  --border-color: var(--colors-neutral-ink-lightest);\n  --shadow-color: var(--colors-secondary-blue-light);\n}\n._fullStyles_4dcpo_1:disabled, ._fullStyles_4dcpo_1[data-disabled] {\n  opacity: 1;\n  box-shadow: none;\n  background-color: var(--colors-neutral-grey-light);\n  cursor: not-allowed;\n}\n._fullStyles_4dcpo_1._compact_4dcpo_12 {\n  --outline-size: 2px;\n  min-height: var(--sizes-8);\n}\n._fullStyles_4dcpo_1._error_4dcpo_16 {\n  --border-color: var(--colors-secondary-red-base);\n  --shadow-color: var(--colors-secondary-red-light);\n}\n._fullStyles_4dcpo_1:focus {\n  border-color: var(--border-color);\n  box-shadow: 0 0 0 var(--outline-size) var(--shadow-color);\n  outline: 0;\n}\n._fullStyles_4dcpo_1::placeholder {\n  font-family: var(--text-placeholder-font-family);\n  font-style: var(--text-placeholder-font-style);\n  font-weight: var(--text-placeholder-font-weight);\n  font-size: var(--text-placeholder-font-size);\n  line-height: var(--text-placeholder-line-height);\n  color: var(--text-placeholder-color);\n  text-decoration: var(--text-placeholder-text-decoration);\n  letter-spacing: var(--text-placeholder-letter-spacing);\n}\n._fullStyles_4dcpo_1:invalid {\n  box-shadow: 0 0 0 var(--outline-size) var(--border-color);\n  border-color: var(--colors-secondary-red-base);\n}\n\n._base_4dcpo_40 {\n  font-family: var(--text-body-font-family);\n  font-style: var(--text-body-font-style);\n  font-weight: var(--text-body-font-weight);\n  font-size: var(--text-body-font-size);\n  line-height: var(--text-body-line-height);\n  color: var(--text-body-color);\n  text-decoration: var(--text-body-text-decoration);\n  letter-spacing: var(--text-body-letter-spacing);\n  appearance: none;\n  box-sizing: border-box;\n  background-color: white;\n  text-align: left;\n  min-height: var(--sizes-10);\n  padding-inline: var(--sizes-3);\n  border-radius: var(--radius-base);\n  border: 1px solid var(--border-color);\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  /* When inside an InputGroup, reduce inline padding to bring content closer together */\n}\n._base_4dcpo_40._inputGroup_4dcpo_62:first-child {\n  padding-right: calc(var(--sizes-3) - var(--sizes-1));\n}\n._base_4dcpo_40._inputGroup_4dcpo_62:last-child {\n  padding-left: var(--sizes-2);\n}\n._base_4dcpo_40._inputGroup_4dcpo_62:not(:first-child):not(:last-child) {\n  padding-inline: var(--sizes-2);\n}\n\n/** InputGroup styles from the InputGroup component */\n._inputGroup_4dcpo_62 {\n  display: flex;\n  /* Remove inline margins from all children */\n  /* Bring in-focus and active children to the front to maintain outlines */\n  /* Remove inline borders for children in the middle */\n  /* Remove right border radius from first child */\n  /* Remove left border radius from last child */\n}\n._inputGroup_4dcpo_62 > * {\n  margin-left: 0;\n  margin-right: 0;\n  box-shadow: none;\n}\n._inputGroup_4dcpo_62 > *:focus, ._inputGroup_4dcpo_62 > *:active {\n  z-index: 5;\n}\n._inputGroup_4dcpo_62 > *:not(:first-child):not(:last-child) {\n  border-radius: 0 !important;\n  border-inline: 0 !important;\n}\n._inputGroup_4dcpo_62 > *:first-child {\n  border-top-right-radius: 0 !important;\n  border-bottom-right-radius: 0 !important;\n  border-right: 0 !important;\n}\n._inputGroup_4dcpo_62 > *:last-child {\n  border-top-left-radius: 0 !important;\n  border-bottom-left-radius: 0 !important;\n  border-left: 0 !important;\n}");
-var formStyles = {"fullStyles":"_fullStyles_4dcpo_1","compact":"_compact_4dcpo_12","error":"_error_4dcpo_16","base":"_base_4dcpo_40","inputGroup":"_inputGroup_4dcpo_62"};
+insertStyle("._fullStyles_1x1rs_1 {\n  --outline-size: var(--sizes-xs);\n  --border-color: var(--colors-neutral-ink-lightest);\n  --shadow-color: var(--colors-secondary-blue-light);\n}\n._fullStyles_1x1rs_1:disabled, ._fullStyles_1x1rs_1[data-disabled] {\n  opacity: 1;\n  box-shadow: none;\n  background-color: var(--colors-neutral-grey-light);\n  cursor: not-allowed;\n}\n._fullStyles_1x1rs_1._compact_1x1rs_12 {\n  --outline-size: 2px;\n  min-height: var(--sizes-8);\n}\n._fullStyles_1x1rs_1._error_1x1rs_16 {\n  --border-color: var(--colors-secondary-red-base);\n  --shadow-color: var(--colors-secondary-red-light);\n}\n._fullStyles_1x1rs_1:focus {\n  border-color: var(--border-color);\n  box-shadow: 0 0 0 var(--outline-size) var(--shadow-color);\n  outline: 0;\n}\n._fullStyles_1x1rs_1::placeholder {\n  font-family: var(--text-placeholder-font-family);\n  font-style: var(--text-placeholder-font-style);\n  font-weight: var(--text-placeholder-font-weight);\n  font-size: var(--text-placeholder-font-size);\n  line-height: var(--text-placeholder-line-height);\n  color: var(--text-placeholder-color);\n  text-decoration: var(--text-placeholder-text-decoration);\n  letter-spacing: var(--text-placeholder-letter-spacing);\n}\n._fullStyles_1x1rs_1:invalid {\n  box-shadow: 0 0 0 var(--outline-size) var(--shadow-color);\n  border-color: var(--colors-secondary-red-base);\n}\n\n._base_1x1rs_40 {\n  font-family: var(--text-body-font-family);\n  font-style: var(--text-body-font-style);\n  font-weight: var(--text-body-font-weight);\n  font-size: var(--text-body-font-size);\n  line-height: var(--text-body-line-height);\n  color: var(--text-body-color);\n  text-decoration: var(--text-body-text-decoration);\n  letter-spacing: var(--text-body-letter-spacing);\n  appearance: none;\n  box-sizing: border-box;\n  background-color: white;\n  text-align: left;\n  min-height: var(--sizes-10);\n  padding-inline: var(--sizes-3);\n  border-radius: var(--radius-base);\n  border: 1px solid var(--border-color);\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  /* When inside an InputGroup, reduce inline padding to bring content closer together */\n}\n._base_1x1rs_40._inputGroup_1x1rs_62:first-child {\n  padding-right: calc(var(--sizes-3) - var(--sizes-1));\n}\n._base_1x1rs_40._inputGroup_1x1rs_62:last-child {\n  padding-left: var(--sizes-2);\n}\n._base_1x1rs_40._inputGroup_1x1rs_62:not(:first-child):not(:last-child) {\n  padding-inline: var(--sizes-2);\n}\n\n/** InputGroup styles from the InputGroup component */\n._inputGroup_1x1rs_62 {\n  display: flex;\n  /* Remove inline margins from all children */\n  /* Bring in-focus and active children to the front to maintain outlines */\n  /* Remove inline borders for children in the middle */\n  /* Remove right border radius from first child */\n  /* Remove left border radius from last child */\n}\n._inputGroup_1x1rs_62 > * {\n  margin-left: 0;\n  margin-right: 0;\n  box-shadow: none;\n}\n._inputGroup_1x1rs_62 > *:focus, ._inputGroup_1x1rs_62 > *:active {\n  z-index: 5;\n}\n._inputGroup_1x1rs_62 > *:not(:first-child):not(:last-child) {\n  border-radius: 0 !important;\n  border-inline: 0 !important;\n}\n._inputGroup_1x1rs_62 > *:first-child {\n  border-top-right-radius: 0 !important;\n  border-bottom-right-radius: 0 !important;\n  border-right: 0 !important;\n}\n._inputGroup_1x1rs_62 > *:last-child {\n  border-top-left-radius: 0 !important;\n  border-bottom-left-radius: 0 !important;\n  border-left: 0 !important;\n}");
+var formStyles = {"fullStyles":"_fullStyles_1x1rs_1","compact":"_compact_1x1rs_12","error":"_error_1x1rs_16","base":"_base_1x1rs_40","inputGroup":"_inputGroup_1x1rs_62"};
 
 export { formStyles as default };
 //# sourceMappingURL=form.module.scss.js.map

package/package.json

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

package/dist/components/Action/styles/base.module.scss.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"base.module.scss.cjs","sources":["../../../../src/components/Action/styles/base.module.scss"],"sourcesContent":[".reset {\n  appearance: none;\n  border: 0;\n  background-color: transparent;\n  padding: unset;\n  font: inherit;\n  text-decoration: none;\n  text-align: start;\n  color: inherit;\n\n  &:hover {\n    cursor: pointer;\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,mPAAA;AACA,iBAAA,CAAA,OAAA,CAAA,gBAAA;;;;"}

package/dist/components/Action/styles/base.module.scss.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"base.module.scss.js","sources":["../../../../src/components/Action/styles/base.module.scss"],"sourcesContent":[".reset {\n  appearance: none;\n  border: 0;\n  background-color: transparent;\n  padding: unset;\n  font: inherit;\n  text-decoration: none;\n  text-align: start;\n  color: inherit;\n\n  &:hover {\n    cursor: pointer;\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,mPAAA;AACA,iBAAA,CAAA,OAAA,CAAA,gBAAA;;;;"}