@veeqo/ui 12.0.2 → 12.1.0

package/dist/components/TextField/TextField.cjs

@@ -28,11 +28,18 @@ const TextField = React.forwardRef(({ id, className, disabled = false, hasError,
         }
         onChange(newValue);
     }, [onChange, type]);
-    const componentId = id !== null && id !== undefined ? id : generateId.generateId('textfield');
+    const componentId = React.useMemo(() => id !== null && id !== undefined ? id : generateId.generateId('textfield'), [id]);
+    const ariaDescribedBy = React.useMemo(() => {
+        if (hasError)
+            return `${componentId}-error`;
+        if (disabled)
+            return `${componentId}-disabled`;
+        return undefined;
+    }, [hasError, componentId, disabled]);
     if (type === 'text' && multiline) {
-        return (React__default.default.createElement(styled.Textarea, { className: className, disabled: disabled, hasError: hasError, id: componentId, name: name, onChange: handleChange, placeholder: placeholder, value: value, ref: ref, spellCheck: spellCheck, ...otherProps }));
+        return (React__default.default.createElement(styled.Textarea, { className: className, disabled: disabled, hasError: hasError, id: componentId, name: name, onChange: handleChange, placeholder: placeholder, value: value, ref: ref, spellCheck: spellCheck, "aria-describedby": ariaDescribedBy, ...otherProps }));
     }
-    return (React__default.default.createElement(styled.Input, { className: className, disabled: disabled, hasError: hasError, id: componentId, compact: size === 'sm', name: name, "aria-label": name, onChange: handleChange, placeholder: placeholder, type: type, value: value, ref: ref, spellCheck: spellCheck, ...otherProps }));
+    return (React__default.default.createElement(styled.Input, { className: className, disabled: disabled, hasError: hasError, id: componentId, compact: size === 'sm', name: name, "aria-label": name, onChange: handleChange, placeholder: placeholder, type: type, value: value, ref: ref, spellCheck: spellCheck, "aria-describedby": ariaDescribedBy, ...otherProps }));
 });
 
 exports.TextField = TextField;

package/dist/components/TextField/TextField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.cjs","sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import React, { useCallback, ChangeEvent, forwardRef } from 'react';\nimport { TextFieldProps } from './types';\nimport { generateId } from '../../utils/generateId';\n\nimport { Input, Textarea } from './styled';\n\nconst NUMBER_REGEX = /^-?[0-9]*\\.?[0-9]+$/;\n\nexport const TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n  (\n    {\n      id,\n      className,\n      disabled = false,\n      hasError,\n      multiline = false,\n      spellCheck = false,\n      name,\n      onChange,\n      placeholder,\n      size = 'base',\n      type = 'text',\n      value,\n      ...otherProps\n    }: TextFieldProps,\n    ref,\n  ) => {\n    const handleChange = useCallback(\n      (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n        if (!onChange) return;\n        const newValue = event.currentTarget.value;\n\n        if (newValue === '') {\n          onChange(newValue);\n          return;\n        }\n\n        if (type !== 'number') {\n          onChange(newValue);\n          return;\n        }\n\n        const reg = new RegExp(NUMBER_REGEX);\n        if (!reg.test(newValue)) {\n          return;\n        }\n\n        onChange(newValue);\n      },\n      [onChange, type],\n    );\n\n    const componentId = id ?? generateId('textfield');\n\n    if (type === 'text' && multiline) {\n      return (\n        <Textarea\n          className={className}\n          disabled={disabled}\n          hasError={hasError}\n          id={componentId}\n          name={name}\n          onChange={handleChange}\n          placeholder={placeholder}\n          value={value}\n          ref={ref}\n          spellCheck={spellCheck}\n          {...otherProps}\n        />\n      );\n    }\n\n    return (\n      <Input\n        className={className}\n        disabled={disabled}\n        hasError={hasError}\n        id={componentId}\n        compact={size === 'sm'}\n        name={name}\n        aria-label={name}\n        onChange={handleChange}\n        placeholder={placeholder}\n        type={type}\n        value={value}\n        ref={ref}\n        spellCheck={spellCheck}\n        {...otherProps}\n      />\n    );\n  },\n);\n"],"names":["forwardRef","useCallback","generateId","React","Textarea","Input"],"mappings":";;;;;;;;;;AAMA,MAAM,YAAY,GAAG,qBAAqB;MAE7B,SAAS,GAAGA,gBAAU,CACjC,CACE,EACE,EAAE,EACF,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,UAAU,GAAG,KAAK,EAClB,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,IAAI,GAAG,MAAM,EACb,IAAI,GAAG,MAAM,EACb,KAAK,EACL,GAAG,UAAU,EACE,EACjB,GAAG,KACD;AACF,IAAA,MAAM,YAAY,GAAGC,iBAAW,CAC9B,CAAC,KAA0D,KAAI;AAC7D,QAAA,IAAI,CAAC,QAAQ;YAAE;AACf,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,aAAa,CAAC,KAAK;QAE1C,IAAI,QAAQ,KAAK,EAAE,EAAE;YACnB,QAAQ,CAAC,QAAQ,CAAC;YAClB;AACD;QAED,IAAI,IAAI,KAAK,QAAQ,EAAE;YACrB,QAAQ,CAAC,QAAQ,CAAC;YAClB;AACD;AAED,QAAA,MAAM,GAAG,GAAG,IAAI,MAAM,CAAC,YAAY,CAAC;AACpC,QAAA,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE;YACvB;AACD;QAED,QAAQ,CAAC,QAAQ,CAAC;AACpB,KAAC,EACD,CAAC,QAAQ,EAAE,IAAI,CAAC,CACjB;AAED,IAAA,MAAM,WAAW,GAAG,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,SAAA,GAAF,EAAE,GAAIC,qBAAU,CAAC,WAAW,CAAC;AAEjD,IAAA,IAAI,IAAI,KAAK,MAAM,IAAI,SAAS,EAAE;QAChC,QACEC,qCAACC,eAAQ,EAAA,EACP,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,WAAW,EACf,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,YAAY,EACtB,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,EAClB,GAAA,UAAU,EACd,CAAA;AAEL;IAED,QACED,sBAAC,CAAA,aAAA,CAAAE,YAAK,EACJ,EAAA,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,WAAW,EACf,OAAO,EAAE,IAAI,KAAK,IAAI,EACtB,IAAI,EAAE,IAAI,EACE,YAAA,EAAA,IAAI,EAChB,QAAQ,EAAE,YAAY,EACtB,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,EAClB,GAAA,UAAU,EACd,CAAA;AAEN,CAAC;;;;"}
+{"version":3,"file":"TextField.cjs","sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import React, { useCallback, ChangeEvent, forwardRef, useMemo } from 'react';\nimport { TextFieldProps } from './types';\nimport { generateId } from '../../utils/generateId';\n\nimport { Input, Textarea } from './styled';\n\nconst NUMBER_REGEX = /^-?[0-9]*\\.?[0-9]+$/;\n\nexport const TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n  (\n    {\n      id,\n      className,\n      disabled = false,\n      hasError,\n      multiline = false,\n      spellCheck = false,\n      name,\n      onChange,\n      placeholder,\n      size = 'base',\n      type = 'text',\n      value,\n      ...otherProps\n    }: TextFieldProps,\n    ref,\n  ) => {\n    const handleChange = useCallback(\n      (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n        if (!onChange) return;\n        const newValue = event.currentTarget.value;\n\n        if (newValue === '') {\n          onChange(newValue);\n          return;\n        }\n\n        if (type !== 'number') {\n          onChange(newValue);\n          return;\n        }\n\n        const reg = new RegExp(NUMBER_REGEX);\n        if (!reg.test(newValue)) {\n          return;\n        }\n\n        onChange(newValue);\n      },\n      [onChange, type],\n    );\n\n    const componentId = useMemo(() => id ?? generateId('textfield'), [id]);\n    const ariaDescribedBy = useMemo(() => {\n      if (hasError) return `${componentId}-error`;\n      if (disabled) return `${componentId}-disabled`;\n      return undefined;\n    }, [hasError, componentId, disabled]);\n\n    if (type === 'text' && multiline) {\n      return (\n        <Textarea\n          className={className}\n          disabled={disabled}\n          hasError={hasError}\n          id={componentId}\n          name={name}\n          onChange={handleChange}\n          placeholder={placeholder}\n          value={value}\n          ref={ref}\n          spellCheck={spellCheck}\n          aria-describedby={ariaDescribedBy}\n          {...otherProps}\n        />\n      );\n    }\n\n    return (\n      <Input\n        className={className}\n        disabled={disabled}\n        hasError={hasError}\n        id={componentId}\n        compact={size === 'sm'}\n        name={name}\n        aria-label={name}\n        onChange={handleChange}\n        placeholder={placeholder}\n        type={type}\n        value={value}\n        ref={ref}\n        spellCheck={spellCheck}\n        aria-describedby={ariaDescribedBy}\n        {...otherProps}\n      />\n    );\n  },\n);\n"],"names":["forwardRef","useCallback","useMemo","generateId","React","Textarea","Input"],"mappings":";;;;;;;;;;AAMA,MAAM,YAAY,GAAG,qBAAqB;MAE7B,SAAS,GAAGA,gBAAU,CACjC,CACE,EACE,EAAE,EACF,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,UAAU,GAAG,KAAK,EAClB,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,IAAI,GAAG,MAAM,EACb,IAAI,GAAG,MAAM,EACb,KAAK,EACL,GAAG,UAAU,EACE,EACjB,GAAG,KACD;AACF,IAAA,MAAM,YAAY,GAAGC,iBAAW,CAC9B,CAAC,KAA0D,KAAI;AAC7D,QAAA,IAAI,CAAC,QAAQ;YAAE;AACf,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,aAAa,CAAC,KAAK;QAE1C,IAAI,QAAQ,KAAK,EAAE,EAAE;YACnB,QAAQ,CAAC,QAAQ,CAAC;YAClB;AACD;QAED,IAAI,IAAI,KAAK,QAAQ,EAAE;YACrB,QAAQ,CAAC,QAAQ,CAAC;YAClB;AACD;AAED,QAAA,MAAM,GAAG,GAAG,IAAI,MAAM,CAAC,YAAY,CAAC;AACpC,QAAA,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE;YACvB;AACD;QAED,QAAQ,CAAC,QAAQ,CAAC;AACpB,KAAC,EACD,CAAC,QAAQ,EAAE,IAAI,CAAC,CACjB;IAED,MAAM,WAAW,GAAGC,aAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,SAAA,GAAF,EAAE,GAAIC,qBAAU,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AACtE,IAAA,MAAM,eAAe,GAAGD,aAAO,CAAC,MAAK;AACnC,QAAA,IAAI,QAAQ;YAAE,OAAO,CAAA,EAAG,WAAW,CAAA,MAAA,CAAQ;AAC3C,QAAA,IAAI,QAAQ;YAAE,OAAO,CAAA,EAAG,WAAW,CAAA,SAAA,CAAW;AAC9C,QAAA,OAAO,SAAS;KACjB,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,QAAQ,CAAC,CAAC;AAErC,IAAA,IAAI,IAAI,KAAK,MAAM,IAAI,SAAS,EAAE;QAChC,QACEE,qCAACC,eAAQ,EAAA,EACP,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,WAAW,EACf,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,YAAY,EACtB,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,EAAA,kBAAA,EACJ,eAAe,EAC7B,GAAA,UAAU,EACd,CAAA;AAEL;AAED,IAAA,QACED,sBAAA,CAAA,aAAA,CAACE,YAAK,EAAA,EACJ,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,WAAW,EACf,OAAO,EAAE,IAAI,KAAK,IAAI,EACtB,IAAI,EAAE,IAAI,EAAA,YAAA,EACE,IAAI,EAChB,QAAQ,EAAE,YAAY,EACtB,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,EAAA,kBAAA,EACJ,eAAe,EAAA,GAC7B,UAAU,EAAA,CACd;AAEN,CAAC;;;;"}

package/dist/components/TextField/TextField.js

@@ -1,4 +1,4 @@
-import React__default, { forwardRef, useCallback } from 'react';
+import React__default, { forwardRef, useCallback, useMemo } from 'react';
 import { generateId } from '../../utils/generateId.js';
 import { Textarea, Input } from './styled.js';
 
@@ -22,11 +22,18 @@ const TextField = forwardRef(({ id, className, disabled = false, hasError, multi
         }
         onChange(newValue);
     }, [onChange, type]);
-    const componentId = id !== null && id !== undefined ? id : generateId('textfield');
+    const componentId = useMemo(() => id !== null && id !== undefined ? id : generateId('textfield'), [id]);
+    const ariaDescribedBy = useMemo(() => {
+        if (hasError)
+            return `${componentId}-error`;
+        if (disabled)
+            return `${componentId}-disabled`;
+        return undefined;
+    }, [hasError, componentId, disabled]);
     if (type === 'text' && multiline) {
-        return (React__default.createElement(Textarea, { className: className, disabled: disabled, hasError: hasError, id: componentId, name: name, onChange: handleChange, placeholder: placeholder, value: value, ref: ref, spellCheck: spellCheck, ...otherProps }));
+        return (React__default.createElement(Textarea, { className: className, disabled: disabled, hasError: hasError, id: componentId, name: name, onChange: handleChange, placeholder: placeholder, value: value, ref: ref, spellCheck: spellCheck, "aria-describedby": ariaDescribedBy, ...otherProps }));
     }
-    return (React__default.createElement(Input, { className: className, disabled: disabled, hasError: hasError, id: componentId, compact: size === 'sm', name: name, "aria-label": name, onChange: handleChange, placeholder: placeholder, type: type, value: value, ref: ref, spellCheck: spellCheck, ...otherProps }));
+    return (React__default.createElement(Input, { className: className, disabled: disabled, hasError: hasError, id: componentId, compact: size === 'sm', name: name, "aria-label": name, onChange: handleChange, placeholder: placeholder, type: type, value: value, ref: ref, spellCheck: spellCheck, "aria-describedby": ariaDescribedBy, ...otherProps }));
 });
 
 export { TextField };

package/dist/components/TextField/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import React, { useCallback, ChangeEvent, forwardRef } from 'react';\nimport { TextFieldProps } from './types';\nimport { generateId } from '../../utils/generateId';\n\nimport { Input, Textarea } from './styled';\n\nconst NUMBER_REGEX = /^-?[0-9]*\\.?[0-9]+$/;\n\nexport const TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n  (\n    {\n      id,\n      className,\n      disabled = false,\n      hasError,\n      multiline = false,\n      spellCheck = false,\n      name,\n      onChange,\n      placeholder,\n      size = 'base',\n      type = 'text',\n      value,\n      ...otherProps\n    }: TextFieldProps,\n    ref,\n  ) => {\n    const handleChange = useCallback(\n      (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n        if (!onChange) return;\n        const newValue = event.currentTarget.value;\n\n        if (newValue === '') {\n          onChange(newValue);\n          return;\n        }\n\n        if (type !== 'number') {\n          onChange(newValue);\n          return;\n        }\n\n        const reg = new RegExp(NUMBER_REGEX);\n        if (!reg.test(newValue)) {\n          return;\n        }\n\n        onChange(newValue);\n      },\n      [onChange, type],\n    );\n\n    const componentId = id ?? generateId('textfield');\n\n    if (type === 'text' && multiline) {\n      return (\n        <Textarea\n          className={className}\n          disabled={disabled}\n          hasError={hasError}\n          id={componentId}\n          name={name}\n          onChange={handleChange}\n          placeholder={placeholder}\n          value={value}\n          ref={ref}\n          spellCheck={spellCheck}\n          {...otherProps}\n        />\n      );\n    }\n\n    return (\n      <Input\n        className={className}\n        disabled={disabled}\n        hasError={hasError}\n        id={componentId}\n        compact={size === 'sm'}\n        name={name}\n        aria-label={name}\n        onChange={handleChange}\n        placeholder={placeholder}\n        type={type}\n        value={value}\n        ref={ref}\n        spellCheck={spellCheck}\n        {...otherProps}\n      />\n    );\n  },\n);\n"],"names":["React"],"mappings":";;;;AAMA,MAAM,YAAY,GAAG,qBAAqB;MAE7B,SAAS,GAAG,UAAU,CACjC,CACE,EACE,EAAE,EACF,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,UAAU,GAAG,KAAK,EAClB,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,IAAI,GAAG,MAAM,EACb,IAAI,GAAG,MAAM,EACb,KAAK,EACL,GAAG,UAAU,EACE,EACjB,GAAG,KACD;AACF,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,KAA0D,KAAI;AAC7D,QAAA,IAAI,CAAC,QAAQ;YAAE;AACf,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,aAAa,CAAC,KAAK;QAE1C,IAAI,QAAQ,KAAK,EAAE,EAAE;YACnB,QAAQ,CAAC,QAAQ,CAAC;YAClB;AACD;QAED,IAAI,IAAI,KAAK,QAAQ,EAAE;YACrB,QAAQ,CAAC,QAAQ,CAAC;YAClB;AACD;AAED,QAAA,MAAM,GAAG,GAAG,IAAI,MAAM,CAAC,YAAY,CAAC;AACpC,QAAA,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE;YACvB;AACD;QAED,QAAQ,CAAC,QAAQ,CAAC;AACpB,KAAC,EACD,CAAC,QAAQ,EAAE,IAAI,CAAC,CACjB;AAED,IAAA,MAAM,WAAW,GAAG,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,SAAA,GAAF,EAAE,GAAI,UAAU,CAAC,WAAW,CAAC;AAEjD,IAAA,IAAI,IAAI,KAAK,MAAM,IAAI,SAAS,EAAE;QAChC,QACEA,6BAAC,QAAQ,EAAA,EACP,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,WAAW,EACf,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,YAAY,EACtB,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,EAClB,GAAA,UAAU,EACd,CAAA;AAEL;IAED,QACEA,cAAC,CAAA,aAAA,CAAA,KAAK,EACJ,EAAA,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,WAAW,EACf,OAAO,EAAE,IAAI,KAAK,IAAI,EACtB,IAAI,EAAE,IAAI,EACE,YAAA,EAAA,IAAI,EAChB,QAAQ,EAAE,YAAY,EACtB,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,EAClB,GAAA,UAAU,EACd,CAAA;AAEN,CAAC;;;;"}
+{"version":3,"file":"TextField.js","sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import React, { useCallback, ChangeEvent, forwardRef, useMemo } from 'react';\nimport { TextFieldProps } from './types';\nimport { generateId } from '../../utils/generateId';\n\nimport { Input, Textarea } from './styled';\n\nconst NUMBER_REGEX = /^-?[0-9]*\\.?[0-9]+$/;\n\nexport const TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n  (\n    {\n      id,\n      className,\n      disabled = false,\n      hasError,\n      multiline = false,\n      spellCheck = false,\n      name,\n      onChange,\n      placeholder,\n      size = 'base',\n      type = 'text',\n      value,\n      ...otherProps\n    }: TextFieldProps,\n    ref,\n  ) => {\n    const handleChange = useCallback(\n      (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n        if (!onChange) return;\n        const newValue = event.currentTarget.value;\n\n        if (newValue === '') {\n          onChange(newValue);\n          return;\n        }\n\n        if (type !== 'number') {\n          onChange(newValue);\n          return;\n        }\n\n        const reg = new RegExp(NUMBER_REGEX);\n        if (!reg.test(newValue)) {\n          return;\n        }\n\n        onChange(newValue);\n      },\n      [onChange, type],\n    );\n\n    const componentId = useMemo(() => id ?? generateId('textfield'), [id]);\n    const ariaDescribedBy = useMemo(() => {\n      if (hasError) return `${componentId}-error`;\n      if (disabled) return `${componentId}-disabled`;\n      return undefined;\n    }, [hasError, componentId, disabled]);\n\n    if (type === 'text' && multiline) {\n      return (\n        <Textarea\n          className={className}\n          disabled={disabled}\n          hasError={hasError}\n          id={componentId}\n          name={name}\n          onChange={handleChange}\n          placeholder={placeholder}\n          value={value}\n          ref={ref}\n          spellCheck={spellCheck}\n          aria-describedby={ariaDescribedBy}\n          {...otherProps}\n        />\n      );\n    }\n\n    return (\n      <Input\n        className={className}\n        disabled={disabled}\n        hasError={hasError}\n        id={componentId}\n        compact={size === 'sm'}\n        name={name}\n        aria-label={name}\n        onChange={handleChange}\n        placeholder={placeholder}\n        type={type}\n        value={value}\n        ref={ref}\n        spellCheck={spellCheck}\n        aria-describedby={ariaDescribedBy}\n        {...otherProps}\n      />\n    );\n  },\n);\n"],"names":["React"],"mappings":";;;;AAMA,MAAM,YAAY,GAAG,qBAAqB;MAE7B,SAAS,GAAG,UAAU,CACjC,CACE,EACE,EAAE,EACF,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,UAAU,GAAG,KAAK,EAClB,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,IAAI,GAAG,MAAM,EACb,IAAI,GAAG,MAAM,EACb,KAAK,EACL,GAAG,UAAU,EACE,EACjB,GAAG,KACD;AACF,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,KAA0D,KAAI;AAC7D,QAAA,IAAI,CAAC,QAAQ;YAAE;AACf,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,aAAa,CAAC,KAAK;QAE1C,IAAI,QAAQ,KAAK,EAAE,EAAE;YACnB,QAAQ,CAAC,QAAQ,CAAC;YAClB;AACD;QAED,IAAI,IAAI,KAAK,QAAQ,EAAE;YACrB,QAAQ,CAAC,QAAQ,CAAC;YAClB;AACD;AAED,QAAA,MAAM,GAAG,GAAG,IAAI,MAAM,CAAC,YAAY,CAAC;AACpC,QAAA,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE;YACvB;AACD;QAED,QAAQ,CAAC,QAAQ,CAAC;AACpB,KAAC,EACD,CAAC,QAAQ,EAAE,IAAI,CAAC,CACjB;IAED,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,SAAA,GAAF,EAAE,GAAI,UAAU,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AACtE,IAAA,MAAM,eAAe,GAAG,OAAO,CAAC,MAAK;AACnC,QAAA,IAAI,QAAQ;YAAE,OAAO,CAAA,EAAG,WAAW,CAAA,MAAA,CAAQ;AAC3C,QAAA,IAAI,QAAQ;YAAE,OAAO,CAAA,EAAG,WAAW,CAAA,SAAA,CAAW;AAC9C,QAAA,OAAO,SAAS;KACjB,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,QAAQ,CAAC,CAAC;AAErC,IAAA,IAAI,IAAI,KAAK,MAAM,IAAI,SAAS,EAAE;QAChC,QACEA,6BAAC,QAAQ,EAAA,EACP,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,WAAW,EACf,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,YAAY,EACtB,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,EAAA,kBAAA,EACJ,eAAe,EAC7B,GAAA,UAAU,EACd,CAAA;AAEL;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EACJ,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,WAAW,EACf,OAAO,EAAE,IAAI,KAAK,IAAI,EACtB,IAAI,EAAE,IAAI,EAAA,YAAA,EACE,IAAI,EAChB,QAAQ,EAAE,YAAY,EACtB,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,EAAA,kBAAA,EACJ,eAAe,EAAA,GAC7B,UAAU,EAAA,CACd;AAEN,CAAC;;;;"}

package/dist/hoc/withLabels/styled.cjs

@@ -15,9 +15,11 @@ const RootStack = styled__default.default(Stack.Stack).withConfig({ displayName:
 const Label = styled__default.default.label.withConfig({ displayName: "vui--Label", componentId: "vui--s2tcx4" }) `${utils.getTextStyles(index.theme.text.inputLabel)} display:block;`;
 const Hint = styled__default.default.span.withConfig({ displayName: "vui--Hint", componentId: "vui--630olw" }) `${utils.getTextStyles(index.theme.text.hintText)} display:block;margin-top:${index.theme.sizes.xs};font-size:0.875rem;line-height:${index.theme.sizes[5]};`;
 const Error = styled__default.default.span.withConfig({ displayName: "vui--Error", componentId: "vui--1kipfxt" }) `${utils.getTextStyles(index.theme.text.error)} display:block;font-weight:normal;`;
-const BlockTooltip = styled__default.default(Tooltip.Tooltip).withConfig({ displayName: "vui--BlockTooltip", componentId: "vui--1haf85r" }) `display:block;&-hoverable{display:flex;}`;
+const Disabled = styled__default.default.span.withConfig({ displayName: "vui--Disabled", componentId: "vui--baqbh4" }) `${utils.getTextStyles(index.theme.text.bodyBold)} display:block;`;
+const BlockTooltip = styled__default.default(Tooltip.Tooltip).withConfig({ displayName: "vui--BlockTooltip", componentId: "vui--3phidg" }) `display:block;&-hoverable{display:flex;}`;
 
 exports.BlockTooltip = BlockTooltip;
+exports.Disabled = Disabled;
 exports.Error = Error;
 exports.Hint = Hint;
 exports.Label = Label;

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

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/hoc/withLabels/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Stack } from '../../components/Stack';\nimport { Tooltip } from '../../components/Tooltip';\nimport { getTextStyles, theme } from '../../theme';\n\nexport const RootStack = styled(Stack)`\n  position: relative;\n\n  & > * + * {\n    margin-top: ${theme.sizes.sm};\n  }\n`;\n\nexport const Label = styled.label`\n  ${getTextStyles(theme.text.inputLabel)}\n  display: block;\n`;\n\nexport const Hint = styled.span`\n  ${getTextStyles(theme.text.hintText)}\n  display: block;\n  margin-top: ${theme.sizes.xs};\n  font-size: 0.875rem;\n  line-height: ${theme.sizes[5]};\n`;\n\nexport const Error = styled.span`\n  ${getTextStyles(theme.text.error)}\n  display: block;\n  font-weight: normal;\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: flex;\n  }\n`;\n"],"names":["styled","Stack","theme","getTextStyles","Tooltip"],"mappings":";;;;;;;;;;;;;AAKO,MAAM,SAAS,GAAGA,uBAAM,CAACC,WAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,uCAAA,EAIpBC,WAAK,CAAC,KAAK,CAAC,EAAE;AAInB,MAAA,KAAK,GAAGF,uBAAM,CAAC,KAAK,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,EAC7BG,mBAAa,CAACD,WAAK,CAAC,IAAI,CAAC,UAAU,CAAC;AAIjC,MAAM,IAAI,GAAGF,uBAAM,CAAC,IAAI,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,EAC3BG,mBAAa,CAACD,WAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA,0BAAA,EAEtBA,WAAK,CAAC,KAAK,CAAC,EAAE,CAAA,gCAAA,EAEbA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AAGlB,MAAA,KAAK,GAAGF,uBAAM,CAAC,IAAI,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,EAC5BG,mBAAa,CAACD,WAAK,CAAC,IAAI,CAAC,KAAK,CAAC;MAKtB,YAAY,GAAGF,uBAAM,CAACI,eAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,wCAAA;;;;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/hoc/withLabels/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Stack } from '../../components/Stack';\nimport { Tooltip } from '../../components/Tooltip';\nimport { getTextStyles, theme } from '../../theme';\n\nexport const RootStack = styled(Stack)`\n  position: relative;\n\n  & > * + * {\n    margin-top: ${theme.sizes.sm};\n  }\n`;\n\nexport const Label = styled.label`\n  ${getTextStyles(theme.text.inputLabel)}\n  display: block;\n`;\n\nexport const Hint = styled.span`\n  ${getTextStyles(theme.text.hintText)}\n  display: block;\n  margin-top: ${theme.sizes.xs};\n  font-size: 0.875rem;\n  line-height: ${theme.sizes[5]};\n`;\n\nexport const Error = styled.span`\n  ${getTextStyles(theme.text.error)}\n  display: block;\n  font-weight: normal;\n`;\n\nexport const Disabled = styled.span`\n  ${getTextStyles(theme.text.bodyBold)}\n  display: block;\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: flex;\n  }\n`;\n"],"names":["styled","Stack","theme","getTextStyles","Tooltip"],"mappings":";;;;;;;;;;;;;AAKO,MAAM,SAAS,GAAGA,uBAAM,CAACC,WAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,uCAAA,EAIpBC,WAAK,CAAC,KAAK,CAAC,EAAE;AAInB,MAAA,KAAK,GAAGF,uBAAM,CAAC,KAAK,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,EAC7BG,mBAAa,CAACD,WAAK,CAAC,IAAI,CAAC,UAAU,CAAC;AAIjC,MAAM,IAAI,GAAGF,uBAAM,CAAC,IAAI,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,EAC3BG,mBAAa,CAACD,WAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA,0BAAA,EAEtBA,WAAK,CAAC,KAAK,CAAC,EAAE,CAAA,gCAAA,EAEbA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AAGlB,MAAA,KAAK,GAAGF,uBAAM,CAAC,IAAI,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,EAC5BG,mBAAa,CAACD,WAAK,CAAC,IAAI,CAAC,KAAK,CAAC;AAKtB,MAAA,QAAQ,GAAGF,uBAAM,CAAC,IAAI,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,EAC/BG,mBAAa,CAACD,WAAK,CAAC,IAAI,CAAC,QAAQ,CAAC;MAIzB,YAAY,GAAGF,uBAAM,CAACI,eAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,wCAAA;;;;;;;;;"}

package/dist/hoc/withLabels/styled.d.ts

@@ -2,4 +2,5 @@ export declare const RootStack: import("styled-components").StyledComponent<"div
 export declare const Label: import("styled-components").StyledComponent<"label", any, {}, never>;
 export declare const Hint: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const Error: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const Disabled: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const BlockTooltip: import("styled-components").StyledComponent<({ children, text, content, config, reversed, className, withTriangle, initialShouldShow, useReactPortal, }: import("../../components/Tooltip/types").TooltipProps) => JSX.Element | null, any, {}, never>;

package/dist/hoc/withLabels/styled.js

@@ -9,7 +9,8 @@ const RootStack = styled(Stack).withConfig({ displayName: "vui--RootStack", comp
 const Label = styled.label.withConfig({ displayName: "vui--Label", componentId: "vui--s2tcx4" }) `${getTextStyles(theme.text.inputLabel)} display:block;`;
 const Hint = styled.span.withConfig({ displayName: "vui--Hint", componentId: "vui--630olw" }) `${getTextStyles(theme.text.hintText)} display:block;margin-top:${theme.sizes.xs};font-size:0.875rem;line-height:${theme.sizes[5]};`;
 const Error = styled.span.withConfig({ displayName: "vui--Error", componentId: "vui--1kipfxt" }) `${getTextStyles(theme.text.error)} display:block;font-weight:normal;`;
-const BlockTooltip = styled(Tooltip).withConfig({ displayName: "vui--BlockTooltip", componentId: "vui--1haf85r" }) `display:block;&-hoverable{display:flex;}`;
+const Disabled = styled.span.withConfig({ displayName: "vui--Disabled", componentId: "vui--baqbh4" }) `${getTextStyles(theme.text.bodyBold)} display:block;`;
+const BlockTooltip = styled(Tooltip).withConfig({ displayName: "vui--BlockTooltip", componentId: "vui--3phidg" }) `display:block;&-hoverable{display:flex;}`;
 
-export { BlockTooltip, Error, Hint, Label, RootStack };
+export { BlockTooltip, Disabled, Error, Hint, Label, RootStack };
 //# sourceMappingURL=styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/hoc/withLabels/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Stack } from '../../components/Stack';\nimport { Tooltip } from '../../components/Tooltip';\nimport { getTextStyles, theme } from '../../theme';\n\nexport const RootStack = styled(Stack)`\n  position: relative;\n\n  & > * + * {\n    margin-top: ${theme.sizes.sm};\n  }\n`;\n\nexport const Label = styled.label`\n  ${getTextStyles(theme.text.inputLabel)}\n  display: block;\n`;\n\nexport const Hint = styled.span`\n  ${getTextStyles(theme.text.hintText)}\n  display: block;\n  margin-top: ${theme.sizes.xs};\n  font-size: 0.875rem;\n  line-height: ${theme.sizes[5]};\n`;\n\nexport const Error = styled.span`\n  ${getTextStyles(theme.text.error)}\n  display: block;\n  font-weight: normal;\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: flex;\n  }\n`;\n"],"names":[],"mappings":";;;;;;;AAKO,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,uCAAA,EAIpB,KAAK,CAAC,KAAK,CAAC,EAAE;AAInB,MAAA,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,EAC7B,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC;AAIjC,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,EAC3B,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA,0BAAA,EAEtB,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,gCAAA,EAEb,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AAGlB,MAAA,KAAK,GAAG,MAAM,CAAC,IAAI,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,EAC5B,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC;MAKtB,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,wCAAA;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/hoc/withLabels/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Stack } from '../../components/Stack';\nimport { Tooltip } from '../../components/Tooltip';\nimport { getTextStyles, theme } from '../../theme';\n\nexport const RootStack = styled(Stack)`\n  position: relative;\n\n  & > * + * {\n    margin-top: ${theme.sizes.sm};\n  }\n`;\n\nexport const Label = styled.label`\n  ${getTextStyles(theme.text.inputLabel)}\n  display: block;\n`;\n\nexport const Hint = styled.span`\n  ${getTextStyles(theme.text.hintText)}\n  display: block;\n  margin-top: ${theme.sizes.xs};\n  font-size: 0.875rem;\n  line-height: ${theme.sizes[5]};\n`;\n\nexport const Error = styled.span`\n  ${getTextStyles(theme.text.error)}\n  display: block;\n  font-weight: normal;\n`;\n\nexport const Disabled = styled.span`\n  ${getTextStyles(theme.text.bodyBold)}\n  display: block;\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: flex;\n  }\n`;\n"],"names":[],"mappings":";;;;;;;AAKO,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,uCAAA,EAIpB,KAAK,CAAC,KAAK,CAAC,EAAE;AAInB,MAAA,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,EAC7B,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC;AAIjC,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,EAC3B,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA,0BAAA,EAEtB,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,gCAAA,EAEb,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AAGlB,MAAA,KAAK,GAAG,MAAM,CAAC,IAAI,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,EAC5B,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC;AAKtB,MAAA,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,EAC/B,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC;MAIzB,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,wCAAA;;;;"}

package/dist/hoc/withLabels/withLabels.cjs

@@ -3,31 +3,35 @@
 var React = require('react');
 var CriticalIcon = require('../../icons/design-system/components/CriticalIcon.cjs');
 var HelpIcon = require('../../icons/design-system/components/HelpIcon.cjs');
+var LockIcon = require('../../icons/design-system/components/LockIcon.cjs');
 var index = require('../../theme/index.cjs');
-var Stack = require('../../components/Stack/Stack.cjs');
-require('../../components/Stack/types.cjs');
 var styled = require('./styled.cjs');
 var useId = require('../../hooks/useId.cjs');
+var Stack = require('../../components/Stack/Stack.cjs');
+require('../../components/Stack/types.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 function withLabels(Component) {
-    return ({ label, hint, error, tooltip, tooltipContent, id, ...otherProps }) => {
+    return ({ label, hint, error, disabledMessage, tooltip, tooltipContent, id, ...otherProps }) => {
         const componentId = useId.useId({ id, prefix: Component.name });
         if (!label)
-            return React__default.default.createElement(Component, { id: componentId, hasError: !!error, ...otherProps });
+            return (React__default.default.createElement(Component, { id: componentId, hasError: !!error, disabled: !!disabledMessage, ...otherProps }));
         return (React__default.default.createElement(styled.RootStack, { spacing: "sm", alignX: "stretch" },
             React__default.default.createElement(Stack.Stack, { direction: "horizontal", alignY: "center", spacing: "sm" },
                 React__default.default.createElement(styled.Label, { id: `${componentId}-label`, htmlFor: componentId }, label),
                 (tooltip || tooltipContent) && (React__default.default.createElement(styled.BlockTooltip, { text: tooltip, content: tooltipContent },
                     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(styled.Hint, { id: `${componentId}-hint` }, hint),
-            React__default.default.createElement(Component, { id: componentId, hasError: !!error, ...otherProps }),
-            error && (React__default.default.createElement(Stack.Stack, { direction: "horizontal", alignY: "center", spacing: "xs" },
+            React__default.default.createElement(Component, { id: componentId, hasError: !!error, disabled: !!disabledMessage, ...otherProps }),
+            error && (React__default.default.createElement(Stack.Stack, { id: `${componentId}-error`, direction: "horizontal", alignY: "center", spacing: "xs" },
                 React__default.default.createElement(CriticalIcon.ReactComponent, { width: 16, height: 16, color: index.theme.colors.secondary.red.base }),
-                React__default.default.createElement(styled.Error, null, error)))));
+                React__default.default.createElement(styled.Error, null, error))),
+            disabledMessage && (React__default.default.createElement(Stack.Stack, { id: `${componentId}-disabled`, direction: "horizontal", alignY: "center", spacing: "xs" },
+                React__default.default.createElement(LockIcon.ReactComponent, { width: 16, height: 16, color: index.theme.colors.neutral.ink.light }),
+                React__default.default.createElement(styled.Disabled, null, disabledMessage)))));
     };
 }
 

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

@@ -1 +1 @@
-{"version":3,"file":"withLabels.cjs","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, FC, ReactNode } from 'react';\nimport { CriticalIcon, HelpIcon } from '../../icons';\nimport { theme } from '../../theme';\nimport { Stack } from '../../components/Stack';\n\nimport { RootStack, Label, Hint, Error, BlockTooltip } from './styled';\nimport { useId } from '../../hooks/useId';\n\nexport interface WithLabelsProps {\n  id?: string;\n  label?: ReactNode;\n  hint?: ReactNode;\n  error?: ReactNode;\n  tooltip?: string;\n  tooltipContent?: ReactNode;\n}\n\nexport function withLabels<P>(Component: ComponentType<P>): FC<P & WithLabelsProps> {\n  return ({ label, hint, error, tooltip, tooltipContent, id, ...otherProps }) => {\n    const componentId = useId({ id, prefix: Component.name });\n\n    if (!label) return <Component id={componentId} hasError={!!error} {...(otherProps as P)} />;\n\n    return (\n      <RootStack spacing=\"sm\" alignX=\"stretch\">\n        <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"sm\">\n          <Label id={`${componentId}-label`} htmlFor={componentId}>\n            {label}\n          </Label>\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        </Stack>\n        {hint && <Hint id={`${componentId}-hint`}>{hint}</Hint>}\n        <Component id={componentId} hasError={!!error} {...(otherProps as P)} />\n        {error && (\n          <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"xs\">\n            <CriticalIcon width={16} height={16} color={theme.colors.secondary.red.base} />\n            <Error>{error}</Error>\n          </Stack>\n        )}\n      </RootStack>\n    );\n  };\n}\n"],"names":["useId","React","RootStack","Stack","Label","BlockTooltip","HelpIcon","theme","Hint","CriticalIcon","Error"],"mappings":";;;;;;;;;;;;;;;AAiBM,SAAU,UAAU,CAAI,SAA2B,EAAA;AACvD,IAAA,OAAO,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,cAAc,EAAE,EAAE,EAAE,GAAG,UAAU,EAAE,KAAI;AAC5E,QAAA,MAAM,WAAW,GAAGA,WAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,CAAC,IAAI,EAAE,CAAC;AAEzD,QAAA,IAAI,CAAC,KAAK;AAAE,YAAA,OAAOC,sBAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAO,GAAA,UAAgB,GAAI;QAE3F,QACEA,sBAAC,CAAA,aAAA,CAAAC,gBAAS,EAAC,EAAA,OAAO,EAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAA;AACtC,YAAAD,sBAAA,CAAA,aAAA,CAACE,WAAK,EAAA,EAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAA;AACxD,gBAAAF,sBAAA,CAAA,aAAA,CAACG,YAAK,EAAA,EAAC,EAAE,EAAE,CAAG,EAAA,WAAW,CAAQ,MAAA,CAAA,EAAE,OAAO,EAAE,WAAW,EAAA,EACpD,KAAK,CACA;AACP,gBAAA,CAAC,OAAO,IAAI,cAAc,MACzBH,sBAAA,CAAA,aAAA,CAACI,mBAAY,EAAA,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAA;AAClD,oBAAAJ,sBAAA,CAAA,aAAA,CAACK,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,EACrC,CAAA,CACW,CAChB,CACK;YACP,IAAI,IAAIN,sBAAC,CAAA,aAAA,CAAAO,WAAI,EAAC,EAAA,EAAE,EAAE,CAAA,EAAG,WAAW,CAAA,KAAA,CAAO,EAAG,EAAA,IAAI,CAAQ;AACvD,YAAAP,sBAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAA,GAAO,UAAgB,EAAI,CAAA;AACvE,YAAA,KAAK,KACJA,sBAAC,CAAA,aAAA,CAAAE,WAAK,IAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAA;gBACxDF,sBAAC,CAAA,aAAA,CAAAQ,2BAAY,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAEF,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EAAI,CAAA;gBAC/EN,sBAAC,CAAA,aAAA,CAAAS,YAAK,QAAE,KAAK,CAAS,CAChB,CACT,CACS;AAEhB,KAAC;AACH;;;;"}
+{"version":3,"file":"withLabels.cjs","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, FC, ReactNode } from 'react';\nimport { CriticalIcon, HelpIcon, LockIcon } from '../../icons';\nimport { theme } from '../../theme';\n\nimport { RootStack, Label, Hint, Error, BlockTooltip, Disabled } from './styled';\nimport { useId } from '../../hooks/useId';\nimport { Stack } from '../../components/Stack';\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\nexport function withLabels<P>(Component: ComponentType<P>): FC<P & WithLabelsProps> {\n  return ({ label, hint, error, disabledMessage, tooltip, tooltipContent, id, ...otherProps }) => {\n    const componentId = useId({ id, prefix: Component.name });\n\n    if (!label)\n      return (\n        <Component\n          id={componentId}\n          hasError={!!error}\n          disabled={!!disabledMessage}\n          {...(otherProps as P)}\n        />\n      );\n\n    return (\n      <RootStack spacing=\"sm\" alignX=\"stretch\">\n        <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"sm\">\n          <Label id={`${componentId}-label`} htmlFor={componentId}>\n            {label}\n          </Label>\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        </Stack>\n        {hint && <Hint id={`${componentId}-hint`}>{hint}</Hint>}\n        <Component\n          id={componentId}\n          hasError={!!error}\n          disabled={!!disabledMessage}\n          {...(otherProps as P)}\n        />\n        {error && (\n          <Stack id={`${componentId}-error`} direction=\"horizontal\" alignY=\"center\" spacing=\"xs\">\n            <CriticalIcon width={16} height={16} color={theme.colors.secondary.red.base} />\n            <Error>{error}</Error>\n          </Stack>\n        )}\n        {disabledMessage && (\n          <Stack id={`${componentId}-disabled`} direction=\"horizontal\" alignY=\"center\" spacing=\"xs\">\n            <LockIcon width={16} height={16} color={theme.colors.neutral.ink.light} />\n            <Disabled>{disabledMessage}</Disabled>\n          </Stack>\n        )}\n      </RootStack>\n    );\n  };\n}\n"],"names":["useId","React","RootStack","Stack","Label","BlockTooltip","HelpIcon","theme","Hint","CriticalIcon","Error","LockIcon","Disabled"],"mappings":"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"}

package/dist/hoc/withLabels/withLabels.d.ts

@@ -4,6 +4,7 @@ export interface WithLabelsProps {
     label?: ReactNode;
     hint?: ReactNode;
     error?: ReactNode;
+    disabledMessage?: ReactNode;
     tooltip?: string;
     tooltipContent?: ReactNode;
 }

package/dist/hoc/withLabels/withLabels.js

@@ -1,27 +1,31 @@
 import React__default from 'react';
 import { ReactComponent as CriticalIcon } from '../../icons/design-system/components/CriticalIcon.js';
 import { ReactComponent as HelpIcon } from '../../icons/design-system/components/HelpIcon.js';
+import { ReactComponent as LockIcon } from '../../icons/design-system/components/LockIcon.js';
 import { theme } from '../../theme/index.js';
+import { RootStack, Label, BlockTooltip, Hint, Error, Disabled } from './styled.js';
+import { useId } from '../../hooks/useId.js';
 import { Stack } from '../../components/Stack/Stack.js';
 import '../../components/Stack/types.js';
-import { RootStack, Label, BlockTooltip, Hint, Error } from './styled.js';
-import { useId } from '../../hooks/useId.js';
 
 function withLabels(Component) {
-    return ({ label, hint, error, tooltip, tooltipContent, id, ...otherProps }) => {
+    return ({ label, hint, error, disabledMessage, tooltip, tooltipContent, id, ...otherProps }) => {
         const componentId = useId({ id, prefix: Component.name });
         if (!label)
-            return React__default.createElement(Component, { id: componentId, hasError: !!error, ...otherProps });
+            return (React__default.createElement(Component, { id: componentId, hasError: !!error, disabled: !!disabledMessage, ...otherProps }));
         return (React__default.createElement(RootStack, { spacing: "sm", alignX: "stretch" },
             React__default.createElement(Stack, { direction: "horizontal", alignY: "center", spacing: "sm" },
                 React__default.createElement(Label, { id: `${componentId}-label`, htmlFor: componentId }, label),
                 (tooltip || tooltipContent) && (React__default.createElement(BlockTooltip, { text: tooltip, content: tooltipContent },
                     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(Hint, { id: `${componentId}-hint` }, hint),
-            React__default.createElement(Component, { id: componentId, hasError: !!error, ...otherProps }),
-            error && (React__default.createElement(Stack, { direction: "horizontal", alignY: "center", spacing: "xs" },
+            React__default.createElement(Component, { id: componentId, hasError: !!error, disabled: !!disabledMessage, ...otherProps }),
+            error && (React__default.createElement(Stack, { id: `${componentId}-error`, direction: "horizontal", alignY: "center", spacing: "xs" },
                 React__default.createElement(CriticalIcon, { width: 16, height: 16, color: theme.colors.secondary.red.base }),
-                React__default.createElement(Error, null, error)))));
+                React__default.createElement(Error, null, error))),
+            disabledMessage && (React__default.createElement(Stack, { id: `${componentId}-disabled`, direction: "horizontal", alignY: "center", spacing: "xs" },
+                React__default.createElement(LockIcon, { width: 16, height: 16, color: theme.colors.neutral.ink.light }),
+                React__default.createElement(Disabled, null, disabledMessage)))));
     };
 }
 

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

@@ -1 +1 @@
-{"version":3,"file":"withLabels.js","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, FC, ReactNode } from 'react';\nimport { CriticalIcon, HelpIcon } from '../../icons';\nimport { theme } from '../../theme';\nimport { Stack } from '../../components/Stack';\n\nimport { RootStack, Label, Hint, Error, BlockTooltip } from './styled';\nimport { useId } from '../../hooks/useId';\n\nexport interface WithLabelsProps {\n  id?: string;\n  label?: ReactNode;\n  hint?: ReactNode;\n  error?: ReactNode;\n  tooltip?: string;\n  tooltipContent?: ReactNode;\n}\n\nexport function withLabels<P>(Component: ComponentType<P>): FC<P & WithLabelsProps> {\n  return ({ label, hint, error, tooltip, tooltipContent, id, ...otherProps }) => {\n    const componentId = useId({ id, prefix: Component.name });\n\n    if (!label) return <Component id={componentId} hasError={!!error} {...(otherProps as P)} />;\n\n    return (\n      <RootStack spacing=\"sm\" alignX=\"stretch\">\n        <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"sm\">\n          <Label id={`${componentId}-label`} htmlFor={componentId}>\n            {label}\n          </Label>\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        </Stack>\n        {hint && <Hint id={`${componentId}-hint`}>{hint}</Hint>}\n        <Component id={componentId} hasError={!!error} {...(otherProps as P)} />\n        {error && (\n          <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"xs\">\n            <CriticalIcon width={16} height={16} color={theme.colors.secondary.red.base} />\n            <Error>{error}</Error>\n          </Stack>\n        )}\n      </RootStack>\n    );\n  };\n}\n"],"names":["React"],"mappings":";;;;;;;;;AAiBM,SAAU,UAAU,CAAI,SAA2B,EAAA;AACvD,IAAA,OAAO,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,cAAc,EAAE,EAAE,EAAE,GAAG,UAAU,EAAE,KAAI;AAC5E,QAAA,MAAM,WAAW,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,CAAC,IAAI,EAAE,CAAC;AAEzD,QAAA,IAAI,CAAC,KAAK;AAAE,YAAA,OAAOA,cAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAO,GAAA,UAAgB,GAAI;QAE3F,QACEA,cAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,OAAO,EAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAA;AACtC,YAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAA;AACxD,gBAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,EAAE,EAAE,CAAG,EAAA,WAAW,CAAQ,MAAA,CAAA,EAAE,OAAO,EAAE,WAAW,EAAA,EACpD,KAAK,CACA;AACP,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,EACrC,CAAA,CACW,CAChB,CACK;YACP,IAAI,IAAIA,cAAC,CAAA,aAAA,CAAA,IAAI,EAAC,EAAA,EAAE,EAAE,CAAA,EAAG,WAAW,CAAA,KAAA,CAAO,EAAG,EAAA,IAAI,CAAQ;AACvD,YAAAA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAA,GAAO,UAAgB,EAAI,CAAA;AACvE,YAAA,KAAK,KACJA,cAAC,CAAA,aAAA,CAAA,KAAK,IAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAA;gBACxDA,cAAC,CAAA,aAAA,CAAA,YAAY,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EAAI,CAAA;gBAC/EA,cAAC,CAAA,aAAA,CAAA,KAAK,QAAE,KAAK,CAAS,CAChB,CACT,CACS;AAEhB,KAAC;AACH;;;;"}
+{"version":3,"file":"withLabels.js","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, FC, ReactNode } from 'react';\nimport { CriticalIcon, HelpIcon, LockIcon } from '../../icons';\nimport { theme } from '../../theme';\n\nimport { RootStack, Label, Hint, Error, BlockTooltip, Disabled } from './styled';\nimport { useId } from '../../hooks/useId';\nimport { Stack } from '../../components/Stack';\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\nexport function withLabels<P>(Component: ComponentType<P>): FC<P & WithLabelsProps> {\n  return ({ label, hint, error, disabledMessage, tooltip, tooltipContent, id, ...otherProps }) => {\n    const componentId = useId({ id, prefix: Component.name });\n\n    if (!label)\n      return (\n        <Component\n          id={componentId}\n          hasError={!!error}\n          disabled={!!disabledMessage}\n          {...(otherProps as P)}\n        />\n      );\n\n    return (\n      <RootStack spacing=\"sm\" alignX=\"stretch\">\n        <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"sm\">\n          <Label id={`${componentId}-label`} htmlFor={componentId}>\n            {label}\n          </Label>\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        </Stack>\n        {hint && <Hint id={`${componentId}-hint`}>{hint}</Hint>}\n        <Component\n          id={componentId}\n          hasError={!!error}\n          disabled={!!disabledMessage}\n          {...(otherProps as P)}\n        />\n        {error && (\n          <Stack id={`${componentId}-error`} direction=\"horizontal\" alignY=\"center\" spacing=\"xs\">\n            <CriticalIcon width={16} height={16} color={theme.colors.secondary.red.base} />\n            <Error>{error}</Error>\n          </Stack>\n        )}\n        {disabledMessage && (\n          <Stack id={`${componentId}-disabled`} direction=\"horizontal\" alignY=\"center\" spacing=\"xs\">\n            <LockIcon width={16} height={16} color={theme.colors.neutral.ink.light} />\n            <Disabled>{disabledMessage}</Disabled>\n          </Stack>\n        )}\n      </RootStack>\n    );\n  };\n}\n"],"names":["React"],"mappings":"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"}

package/package.json

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