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

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';\nimport { ComponentSize } from '../types';\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 = ComponentSize.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        inputSize={size}\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","ComponentSize","useCallback","generateId","React","Textarea","Input"],"mappings":";;;;;;;;;;;AAOA,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,GAAGC,mBAAa,CAAC,IAAI,EACzB,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,SAAS,EAAE,IAAI,EACf,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,EAClB,GAAA,UAAU,EACd,CAAA;AAEN,CAAC;;;;"}
+{"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';\nimport { ComponentSize } from '../types';\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 = ComponentSize.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","ComponentSize","useCallback","generateId","React","Textarea","Input"],"mappings":";;;;;;;;;;;AAOA,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,GAAGC,mBAAa,CAAC,IAAI,EACzB,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;;;;"}

package/dist/components/TextField/TextField.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { ComponentSize } from '../types';
 export declare const TextField: React.ForwardRefExoticComponent<{
     form?: string | undefined;
     slot?: string | undefined;
@@ -298,6 +299,6 @@ export declare const TextField: React.ForwardRefExoticComponent<{
     type?: import("./types").TextFieldType | undefined;
     onChange?: ((value: string) => void) | undefined;
     hasError?: boolean | undefined;
-    size?: "base" | "sm" | undefined;
+    size?: ComponentSize | undefined;
     multiline?: boolean | undefined;
 } & React.RefAttributes<HTMLInputElement>>;

package/dist/components/TextField/TextField.js

@@ -27,7 +27,7 @@ const TextField = forwardRef(({ id, className, disabled = false, hasError, multi
     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(Input, { className: className, disabled: disabled, hasError: hasError, id: componentId, inputSize: size, 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, ...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';\nimport { ComponentSize } from '../types';\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 = ComponentSize.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        inputSize={size}\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":";;;;;AAOA,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,aAAa,CAAC,IAAI,EACzB,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,SAAS,EAAE,IAAI,EACf,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,EAClB,GAAA,UAAU,EACd,CAAA;AAEN,CAAC;;;;"}
+{"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';\nimport { ComponentSize } from '../types';\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 = ComponentSize.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":";;;;;AAOA,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,aAAa,CAAC,IAAI,EACzB,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;;;;"}

package/dist/components/TextField/index.d.ts

@@ -298,6 +298,6 @@ export declare const TextField: import("react").FC<{
     type?: import("./types").TextFieldType | undefined;
     onChange?: ((value: string) => void) | undefined;
     hasError?: boolean | undefined;
-    size?: "base" | "sm" | undefined;
+    size?: import("../types").ComponentSize | undefined;
     multiline?: boolean | undefined;
 } & import("react").RefAttributes<HTMLInputElement> & import("../../hoc/withLabels/withLabels").WithLabelsProps>;

package/dist/components/TextField/styled.cjs

@@ -1,36 +1,15 @@
 'use strict';
 
 var styled = require('styled-components');
+var inputStyles = require('../../utils/forms/inputStyles.cjs');
 var index = require('../../theme/index.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const pseudoStates = ({ hasError, inputSize }) => styled.css `&{--outline-size:${inputSize === 'sm' ? '2px' : '4px'};}&:focus{border-color:#0079d1;box-shadow:0 0 0 var(--outline-size)#80bce8;outline:0;}&:invalid{border-color:#eb5757;box-shadow:0 0 0 var(--outline-size)#f7bcbc;}&:disabled{box-shadow:none;background-color:#f2f3f5;border-color:#959fa8;color:#637381;}${hasError &&
-    `
-    &,
-    &:focus {
-      border-color: #EB5757;
-    }
-
-    &:focus {
-      box-shadow: 0 0 0 var(--outline-size) #F7BCBC;
-    }
-  `}`;
-const Input = styled__default.default.input.withConfig({ displayName: "vui--Input", componentId: "vui--1o6oill" }) `font-family:${index.theme.fontFamily};box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:0 12px;border-radius:4px;border:1px solid #959fa8;color:#1b2126;${({ inputSize }) => {
-    let height = '40px';
-    let fontSize = '14px';
-    if (inputSize === 'sm') {
-        height = '32px';
-        fontSize = '12px';
-    }
-    return `
-      height: ${height};
-      font-size: ${fontSize};
-    `;
-}} ${pseudoStates} &::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type='number']{-moz-appearance:textfield;width:8ch;text-align:right;}`;
-const Textarea = styled__default.default.textarea.withConfig({ displayName: "vui--Textarea", componentId: "vui--1jp908v" }) `box-sizing:border-box;width:100%;padding:8px;border-radius:4px;border:1px solid #959fa8;color:#1b2126;${pseudoStates}`;
+const Input = styled__default.default.input.withConfig({ displayName: "vui--Input", componentId: "vui--ectso6" }) `${inputStyles.inputFullStyles} &::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type='number']{-moz-appearance:textfield;width:8ch;text-align:right;}`;
+const Textarea = styled__default.default.textarea.withConfig({ displayName: "vui--Textarea", componentId: "vui--bp8kpm" }) `${inputStyles.inputFullStyles} padding-block:${index.theme.sizes[2]};`;
 
 exports.Input = Input;
 exports.Textarea = Textarea;

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

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/TextField/styled.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { theme } from '../../theme';\n\ninterface InputProps {\n  hasError: boolean;\n  inputSize: 'sm' | 'base';\n}\n\nconst pseudoStates = ({ hasError, inputSize }: InputProps) => css`\n  & {\n    --outline-size: ${inputSize === 'sm' ? '2px' : '4px'};\n  }\n\n  &:focus {\n    border-color: #0079d1;\n    box-shadow: 0 0 0 var(--outline-size) #80bce8;\n    outline: 0;\n  }\n\n  &:invalid {\n    border-color: #eb5757;\n    box-shadow: 0 0 0 var(--outline-size) #f7bcbc;\n  }\n\n  &:disabled {\n    box-shadow: none;\n    background-color: #f2f3f5;\n    border-color: #959fa8;\n    color: #637381;\n  }\n\n  ${hasError &&\n  `\n    &,\n    &:focus {\n      border-color: #EB5757;\n    }\n\n    &:focus {\n      box-shadow: 0 0 0 var(--outline-size) #F7BCBC;\n    }\n  `}\n`;\n\nexport const Input = styled.input<any>`\n  font-family: ${theme.fontFamily};\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 12px;\n  border-radius: 4px;\n  border: 1px solid #959fa8;\n  color: #1b2126;\n\n  ${({ inputSize }) => {\n    let height = '40px';\n    let fontSize = '14px';\n\n    if (inputSize === 'sm') {\n      height = '32px';\n      fontSize = '12px';\n    }\n\n    return `\n      height: ${height};\n      font-size: ${fontSize};\n    `;\n  }}\n\n  ${pseudoStates}\n\n  /* Hide number arrows/spinners */\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &[type='number'] {\n    -moz-appearance: textfield;\n    width: 8ch;\n    text-align: right;\n  }\n`;\n\nexport const Textarea = styled.textarea<any>`\n  box-sizing: border-box;\n  width: 100%;\n  padding: 8px;\n  border-radius: 4px;\n  border: 1px solid #959fa8;\n  color: #1b2126;\n\n  ${pseudoStates}\n`;\n"],"names":["css","styled","theme"],"mappings":";;;;;;;;;AAQA,MAAM,YAAY,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAc,KAAKA,UAAG,qBAE3C,SAAS,KAAK,IAAI,GAAG,KAAK,GAAG,KAAK,CAAA,0PAAA,EAqBpD,QAAQ;AACV,IAAA;;;;;;;;;AASC,EAAA,CAAA,CAAA,CACF;AAEY,MAAA,KAAK,GAAGC,uBAAM,CAAC,KAAK,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,YAAA,EAChBC,WAAK,CAAC,UAAU,CAU7B,sJAAA,EAAA,CAAC,EAAE,SAAS,EAAE,KAAI;IAClB,IAAI,MAAM,GAAG,MAAM;IACnB,IAAI,QAAQ,GAAG,MAAM;IAErB,IAAI,SAAS,KAAK,IAAI,EAAE;QACtB,MAAM,GAAG,MAAM;QACf,QAAQ,GAAG,MAAM;AAClB;IAED,OAAO;gBACK,MAAM,CAAA;mBACH,QAAQ,CAAA;KACtB;AACH,CAAC,CAAA,CAAA,EAEC,YAAY,CAAA,oKAAA;AAeH,MAAA,QAAQ,GAAGD,uBAAM,CAAC,QAAQ,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,sGAAA,EAQnC,YAAY,CAAA;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/TextField/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { inputFullStyles } from '../../utils/forms/inputStyles';\nimport { theme } from '../../theme';\n\nexport const Input = styled.input<any>`\n  ${inputFullStyles}\n\n  /* Hide number arrows/spinners */\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &[type='number'] {\n    -moz-appearance: textfield;\n    width: 8ch;\n    text-align: right;\n  }\n`;\n\nexport const Textarea = styled.textarea<any>`\n  ${inputFullStyles}\n\n  padding-block: ${theme.sizes[2]};\n`;\n"],"names":["styled","inputFullStyles","theme"],"mappings":";;;;;;;;;;AAIa,MAAA,KAAK,GAAGA,uBAAM,CAAC,KAAK,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,EAC7BC,2BAAe,CAAA,oKAAA;AAeN,MAAA,QAAQ,GAAGD,uBAAM,CAAC,QAAQ,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,EACnCC,2BAAe,CAAA,eAAA,EAEAC,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC;;;;;"}

package/dist/components/TextField/styled.js

@@ -1,30 +1,9 @@
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
+import { inputFullStyles } from '../../utils/forms/inputStyles.js';
 import { theme } from '../../theme/index.js';
 
-const pseudoStates = ({ hasError, inputSize }) => css `&{--outline-size:${inputSize === 'sm' ? '2px' : '4px'};}&:focus{border-color:#0079d1;box-shadow:0 0 0 var(--outline-size)#80bce8;outline:0;}&:invalid{border-color:#eb5757;box-shadow:0 0 0 var(--outline-size)#f7bcbc;}&:disabled{box-shadow:none;background-color:#f2f3f5;border-color:#959fa8;color:#637381;}${hasError &&
-    `
-    &,
-    &:focus {
-      border-color: #EB5757;
-    }
-
-    &:focus {
-      box-shadow: 0 0 0 var(--outline-size) #F7BCBC;
-    }
-  `}`;
-const Input = styled.input.withConfig({ displayName: "vui--Input", componentId: "vui--1o6oill" }) `font-family:${theme.fontFamily};box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:0 12px;border-radius:4px;border:1px solid #959fa8;color:#1b2126;${({ inputSize }) => {
-    let height = '40px';
-    let fontSize = '14px';
-    if (inputSize === 'sm') {
-        height = '32px';
-        fontSize = '12px';
-    }
-    return `
-      height: ${height};
-      font-size: ${fontSize};
-    `;
-}} ${pseudoStates} &::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type='number']{-moz-appearance:textfield;width:8ch;text-align:right;}`;
-const Textarea = styled.textarea.withConfig({ displayName: "vui--Textarea", componentId: "vui--1jp908v" }) `box-sizing:border-box;width:100%;padding:8px;border-radius:4px;border:1px solid #959fa8;color:#1b2126;${pseudoStates}`;
+const Input = styled.input.withConfig({ displayName: "vui--Input", componentId: "vui--ectso6" }) `${inputFullStyles} &::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type='number']{-moz-appearance:textfield;width:8ch;text-align:right;}`;
+const Textarea = styled.textarea.withConfig({ displayName: "vui--Textarea", componentId: "vui--bp8kpm" }) `${inputFullStyles} padding-block:${theme.sizes[2]};`;
 
 export { Input, Textarea };
 //# sourceMappingURL=styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/TextField/styled.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { theme } from '../../theme';\n\ninterface InputProps {\n  hasError: boolean;\n  inputSize: 'sm' | 'base';\n}\n\nconst pseudoStates = ({ hasError, inputSize }: InputProps) => css`\n  & {\n    --outline-size: ${inputSize === 'sm' ? '2px' : '4px'};\n  }\n\n  &:focus {\n    border-color: #0079d1;\n    box-shadow: 0 0 0 var(--outline-size) #80bce8;\n    outline: 0;\n  }\n\n  &:invalid {\n    border-color: #eb5757;\n    box-shadow: 0 0 0 var(--outline-size) #f7bcbc;\n  }\n\n  &:disabled {\n    box-shadow: none;\n    background-color: #f2f3f5;\n    border-color: #959fa8;\n    color: #637381;\n  }\n\n  ${hasError &&\n  `\n    &,\n    &:focus {\n      border-color: #EB5757;\n    }\n\n    &:focus {\n      box-shadow: 0 0 0 var(--outline-size) #F7BCBC;\n    }\n  `}\n`;\n\nexport const Input = styled.input<any>`\n  font-family: ${theme.fontFamily};\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 12px;\n  border-radius: 4px;\n  border: 1px solid #959fa8;\n  color: #1b2126;\n\n  ${({ inputSize }) => {\n    let height = '40px';\n    let fontSize = '14px';\n\n    if (inputSize === 'sm') {\n      height = '32px';\n      fontSize = '12px';\n    }\n\n    return `\n      height: ${height};\n      font-size: ${fontSize};\n    `;\n  }}\n\n  ${pseudoStates}\n\n  /* Hide number arrows/spinners */\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &[type='number'] {\n    -moz-appearance: textfield;\n    width: 8ch;\n    text-align: right;\n  }\n`;\n\nexport const Textarea = styled.textarea<any>`\n  box-sizing: border-box;\n  width: 100%;\n  padding: 8px;\n  border-radius: 4px;\n  border: 1px solid #959fa8;\n  color: #1b2126;\n\n  ${pseudoStates}\n`;\n"],"names":[],"mappings":";;;AAQA,MAAM,YAAY,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAc,KAAK,GAAG,qBAE3C,SAAS,KAAK,IAAI,GAAG,KAAK,GAAG,KAAK,CAAA,0PAAA,EAqBpD,QAAQ;AACV,IAAA;;;;;;;;;AASC,EAAA,CAAA,CAAA,CACF;AAEY,MAAA,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,YAAA,EAChB,KAAK,CAAC,UAAU,CAU7B,sJAAA,EAAA,CAAC,EAAE,SAAS,EAAE,KAAI;IAClB,IAAI,MAAM,GAAG,MAAM;IACnB,IAAI,QAAQ,GAAG,MAAM;IAErB,IAAI,SAAS,KAAK,IAAI,EAAE;QACtB,MAAM,GAAG,MAAM;QACf,QAAQ,GAAG,MAAM;AAClB;IAED,OAAO;gBACK,MAAM,CAAA;mBACH,QAAQ,CAAA;KACtB;AACH,CAAC,CAAA,CAAA,EAEC,YAAY,CAAA,oKAAA;AAeH,MAAA,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,sGAAA,EAQnC,YAAY,CAAA;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/TextField/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { inputFullStyles } from '../../utils/forms/inputStyles';\nimport { theme } from '../../theme';\n\nexport const Input = styled.input<any>`\n  ${inputFullStyles}\n\n  /* Hide number arrows/spinners */\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &[type='number'] {\n    -moz-appearance: textfield;\n    width: 8ch;\n    text-align: right;\n  }\n`;\n\nexport const Textarea = styled.textarea<any>`\n  ${inputFullStyles}\n\n  padding-block: ${theme.sizes[2]};\n`;\n"],"names":[],"mappings":";;;;AAIa,MAAA,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,EAC7B,eAAe,CAAA,oKAAA;AAeN,MAAA,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,EACnC,eAAe,CAAA,eAAA,EAEA,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;;;;"}

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { ComponentSize } from '../types';
 export type TextFieldType = 'text' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'url' | 'date' | 'datetime-local' | 'month' | 'time' | 'week' | 'currency';
 export declare const textFieldTypes: readonly ["text", "email", "number", "password", "search", "tel", "url", "date", "datetime-local", "month", "time", "week", "currency"];
 type CommonAttributes = Omit<React.InputHTMLAttributes<HTMLInputElement> & React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange' | 'size'>;
@@ -7,7 +8,7 @@ export type TextFieldProps = CommonAttributes & {
     type?: TextFieldType;
     onChange?: (value: string) => void;
     hasError?: boolean;
-    size?: 'base' | 'sm';
+    size?: ComponentSize;
     multiline?: boolean;
 };
 export {};

package/dist/components/ToastsLayout/components/styled.cjs

@@ -11,11 +11,11 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const ToastsLayoutContainer = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--ToastsLayoutContainer", componentId: "vui--qrqt2g" }) `position:fixed;bottom:24px;width:100%;pointer-events:none;z-index:${index.theme.layers.tooltip};`;
-const Toast = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--Toast", componentId: "vui--f5gjtj" }) `background-color:${index.theme.colors.neutral.ink.dark};padding:12px 24px 12px 12px;box-shadow:${index.theme.shadows.lg};border-radius:${index.theme.radius.md};pointer-events:auto;z-index:40;min-width:${({ minWidth }) => minWidth};max-width:80vw;&.veeqo-components-toast-enter{transform:translateY(12px);opacity:0;}&.veeqo-components-toast-enter-active{transform:translateY(0);opacity:1;transition:500ms ease;}&.veeqo-components-toast-exit{transform:${({ last }) => (last ? 'translateY(0)' : 'translateX(0)')};opacity:1;}&.veeqo-components-toast-exit-active{transform:${({ last }) => (last ? 'translateY(12px)' : 'translateX(12px)')};opacity:0;transition:500ms ease;}`;
-const IconWrap = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--IconWrap", componentId: "vui--n3gc7q" }) `display:flex;flex-direction:row;align-items:center;justify-content:center;height:40px;width:40px;border-radius:${index.theme.radius.md};background-color:${({ color }) => color};color:#fff;svg{width:${sizes.sizes.md};height:${sizes.sizes.md};}`;
-const ContentStack = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--ContentStack", componentId: "vui--12f8l37" }) `flex-grow:1;`;
-const StyledText = styled__default.default(Text.Text).withConfig({ displayName: "vui--StyledText", componentId: "vui--1qgwlso" }) `color:white;font-size:16px;`;
+const ToastsLayoutContainer = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--ToastsLayoutContainer", componentId: "vui--1gcg8jn" }) `position:fixed;bottom:24px;width:100%;pointer-events:none;z-index:${index.theme.layers.tooltip};`;
+const Toast = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--Toast", componentId: "vui--1sz012c" }) `background-color:${index.theme.colors.neutral.ink.dark};padding:12px 24px 12px 12px;box-shadow:${index.theme.shadows.lg};border-radius:${index.theme.radius.md};pointer-events:auto;z-index:40;min-width:${({ minWidth }) => minWidth};max-width:80vw;&.veeqo-components-toast-enter{transform:translateY(12px);opacity:0;}&.veeqo-components-toast-enter-active{transform:translateY(0);opacity:1;transition:500ms ease;}&.veeqo-components-toast-exit{transform:${({ last }) => (last ? 'translateY(0)' : 'translateX(0)')};opacity:1;}&.veeqo-components-toast-exit-active{transform:${({ last }) => (last ? 'translateY(12px)' : 'translateX(12px)')};opacity:0;transition:500ms ease;}`;
+const IconWrap = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--IconWrap", componentId: "vui--17e8s7e" }) `display:flex;flex-direction:row;align-items:center;justify-content:center;height:40px;width:40px;border-radius:${index.theme.radius.md};background-color:${({ color }) => color};color:#fff;svg{width:${sizes.sizes.md};height:${sizes.sizes.md};}`;
+const ContentStack = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--ContentStack", componentId: "vui--tg3v7a" }) `flex-grow:1;`;
+const StyledText = styled__default.default(Text.Text).withConfig({ displayName: "vui--StyledText", componentId: "vui--1aoeeaz" }) `color:white;font-size:16px;`;
 
 exports.ContentStack = ContentStack;
 exports.IconWrap = IconWrap;

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

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../../src/components/ToastsLayout/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { Stack } from '../../Stack';\nimport { BaseContainer } from '../../BaseContainer';\nimport { Text } from '../../Text';\nimport { theme } from '../../../theme';\nimport { sizes } from '../../../theme/modules/sizes';\n\nexport const ToastsLayoutContainer = styled(Stack)`\n  position: fixed;\n  bottom: 24px;\n  width: 100%;\n  pointer-events: none;\n  z-index: ${theme.layers.tooltip};\n`;\n\nexport const Toast = styled(Stack)<{\n  minWidth: number | string;\n  last: boolean;\n}>`\n  background-color: ${theme.colors.neutral.ink.dark};\n  padding: 12px 24px 12px 12px;\n  box-shadow: ${theme.shadows.lg};\n  border-radius: ${theme.radius.md};\n  pointer-events: auto;\n  z-index: 40;\n  min-width: ${({ minWidth }) => minWidth};\n  max-width: 80vw;\n\n  &.veeqo-components-toast-enter {\n    transform: translateY(12px);\n    opacity: 0;\n  }\n\n  &.veeqo-components-toast-enter-active {\n    transform: translateY(0);\n    opacity: 1;\n    transition: 500ms ease;\n  }\n\n  &.veeqo-components-toast-exit {\n    transform: ${({ last }) => (last ? 'translateY(0)' : 'translateX(0)')};\n    opacity: 1;\n  }\n\n  &.veeqo-components-toast-exit-active {\n    transform: ${({ last }) => (last ? 'translateY(12px)' : 'translateX(12px)')};\n    opacity: 0;\n    transition: 500ms ease;\n  }\n`;\n\nexport const IconWrap = styled(BaseContainer)<{ color: string }>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  height: 40px;\n  width: 40px;\n  border-radius: ${theme.radius.md};\n  background-color: ${({ color }) => color};\n  color: #fff;\n\n  svg {\n    width: ${sizes.md};\n    height: ${sizes.md};\n  }\n`;\n\nexport const ContentStack = styled(Stack)`\n  flex-grow: 1;\n`;\n\nexport const StyledText = styled(Text)`\n  color: white;\n  font-size: 16px;\n`;\n"],"names":["styled","Stack","theme","BaseContainer","sizes","Text"],"mappings":";;;;;;;;;;;;;AAQO,MAAM,qBAAqB,GAAGA,uBAAM,CAACC,WAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,4BAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,kEAAA,EAKrCC,WAAK,CAAC,MAAM,CAAC,OAAO;AAGpB,MAAA,KAAK,GAAGF,uBAAM,CAACC,WAAK,CAAC,CAIZ,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAAC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAEnC,wCAAA,EAAAA,WAAK,CAAC,OAAO,CAAC,EAAE,CAAA,eAAA,EACbA,WAAK,CAAC,MAAM,CAAC,EAAE,6CAGnB,CAAC,EAAE,QAAQ,EAAE,KAAK,QAAQ,CAexB,4NAAA,EAAA,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,GAAG,eAAe,GAAG,eAAe,CAAC,CAAA,2DAAA,EAKxD,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;AAMxE,MAAM,QAAQ,GAAGF,uBAAM,CAACG,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,+GAAA,EAO1BD,WAAK,CAAC,MAAM,CAAC,EAAE,CACZ,kBAAA,EAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAI7B,sBAAA,EAAAE,WAAK,CAAC,EAAE,CACP,QAAA,EAAAA,WAAK,CAAC,EAAE;MAIT,YAAY,GAAGJ,uBAAM,CAACC,WAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,YAAA;MAI5B,UAAU,GAAGD,uBAAM,CAACK,SAAI,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,2BAAA;;;;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../../src/components/ToastsLayout/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { Stack } from '../../Stack';\nimport { BaseContainer } from '../../BaseContainer';\nimport { Text } from '../../Text';\nimport { theme } from '../../../theme';\nimport { sizes } from '../../../theme/modules/sizes';\n\nexport const ToastsLayoutContainer = styled(Stack)`\n  position: fixed;\n  bottom: 24px;\n  width: 100%;\n  pointer-events: none;\n  z-index: ${theme.layers.tooltip};\n`;\n\nexport const Toast = styled(Stack)<{\n  minWidth: number | string;\n  last: boolean;\n}>`\n  background-color: ${theme.colors.neutral.ink.dark};\n  padding: 12px 24px 12px 12px;\n  box-shadow: ${theme.shadows.lg};\n  border-radius: ${theme.radius.md};\n  pointer-events: auto;\n  z-index: 40;\n  min-width: ${({ minWidth }) => minWidth};\n  max-width: 80vw;\n\n  &.veeqo-components-toast-enter {\n    transform: translateY(12px);\n    opacity: 0;\n  }\n\n  &.veeqo-components-toast-enter-active {\n    transform: translateY(0);\n    opacity: 1;\n    transition: 500ms ease;\n  }\n\n  &.veeqo-components-toast-exit {\n    transform: ${({ last }) => (last ? 'translateY(0)' : 'translateX(0)')};\n    opacity: 1;\n  }\n\n  &.veeqo-components-toast-exit-active {\n    transform: ${({ last }) => (last ? 'translateY(12px)' : 'translateX(12px)')};\n    opacity: 0;\n    transition: 500ms ease;\n  }\n`;\n\nexport const IconWrap = styled(BaseContainer)<{ color: string }>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  height: 40px;\n  width: 40px;\n  border-radius: ${theme.radius.md};\n  background-color: ${({ color }) => color};\n  color: #fff;\n\n  svg {\n    width: ${sizes.md};\n    height: ${sizes.md};\n  }\n`;\n\nexport const ContentStack = styled(Stack)`\n  flex-grow: 1;\n`;\n\nexport const StyledText = styled(Text)`\n  color: white;\n  font-size: 16px;\n`;\n"],"names":["styled","Stack","theme","BaseContainer","sizes","Text"],"mappings":";;;;;;;;;;;;;AAQO,MAAM,qBAAqB,GAAGA,uBAAM,CAACC,WAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,4BAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,kEAAA,EAKrCC,WAAK,CAAC,MAAM,CAAC,OAAO;AAGpB,MAAA,KAAK,GAAGF,uBAAM,CAACC,WAAK,CAAC,CAIZ,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAAC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAEnC,wCAAA,EAAAA,WAAK,CAAC,OAAO,CAAC,EAAE,CAAA,eAAA,EACbA,WAAK,CAAC,MAAM,CAAC,EAAE,6CAGnB,CAAC,EAAE,QAAQ,EAAE,KAAK,QAAQ,CAexB,4NAAA,EAAA,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,GAAG,eAAe,GAAG,eAAe,CAAC,CAAA,2DAAA,EAKxD,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;AAMxE,MAAM,QAAQ,GAAGF,uBAAM,CAACG,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,+GAAA,EAO1BD,WAAK,CAAC,MAAM,CAAC,EAAE,CACZ,kBAAA,EAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAI7B,sBAAA,EAAAE,WAAK,CAAC,EAAE,CACP,QAAA,EAAAA,WAAK,CAAC,EAAE;MAIT,YAAY,GAAGJ,uBAAM,CAACC,WAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,YAAA;MAI5B,UAAU,GAAGD,uBAAM,CAACK,SAAI,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,2BAAA;;;;;;;;"}

package/dist/components/ToastsLayout/components/styled.js

@@ -5,11 +5,11 @@ import { Text } from '../../Text/Text.js';
 import { theme } from '../../../theme/index.js';
 import { sizes } from '../../../theme/modules/sizes.js';
 
-const ToastsLayoutContainer = styled(Stack).withConfig({ displayName: "vui--ToastsLayoutContainer", componentId: "vui--qrqt2g" }) `position:fixed;bottom:24px;width:100%;pointer-events:none;z-index:${theme.layers.tooltip};`;
-const Toast = styled(Stack).withConfig({ displayName: "vui--Toast", componentId: "vui--f5gjtj" }) `background-color:${theme.colors.neutral.ink.dark};padding:12px 24px 12px 12px;box-shadow:${theme.shadows.lg};border-radius:${theme.radius.md};pointer-events:auto;z-index:40;min-width:${({ minWidth }) => minWidth};max-width:80vw;&.veeqo-components-toast-enter{transform:translateY(12px);opacity:0;}&.veeqo-components-toast-enter-active{transform:translateY(0);opacity:1;transition:500ms ease;}&.veeqo-components-toast-exit{transform:${({ last }) => (last ? 'translateY(0)' : 'translateX(0)')};opacity:1;}&.veeqo-components-toast-exit-active{transform:${({ last }) => (last ? 'translateY(12px)' : 'translateX(12px)')};opacity:0;transition:500ms ease;}`;
-const IconWrap = styled(BaseContainer).withConfig({ displayName: "vui--IconWrap", componentId: "vui--n3gc7q" }) `display:flex;flex-direction:row;align-items:center;justify-content:center;height:40px;width:40px;border-radius:${theme.radius.md};background-color:${({ color }) => color};color:#fff;svg{width:${sizes.md};height:${sizes.md};}`;
-const ContentStack = styled(Stack).withConfig({ displayName: "vui--ContentStack", componentId: "vui--12f8l37" }) `flex-grow:1;`;
-const StyledText = styled(Text).withConfig({ displayName: "vui--StyledText", componentId: "vui--1qgwlso" }) `color:white;font-size:16px;`;
+const ToastsLayoutContainer = styled(Stack).withConfig({ displayName: "vui--ToastsLayoutContainer", componentId: "vui--1gcg8jn" }) `position:fixed;bottom:24px;width:100%;pointer-events:none;z-index:${theme.layers.tooltip};`;
+const Toast = styled(Stack).withConfig({ displayName: "vui--Toast", componentId: "vui--1sz012c" }) `background-color:${theme.colors.neutral.ink.dark};padding:12px 24px 12px 12px;box-shadow:${theme.shadows.lg};border-radius:${theme.radius.md};pointer-events:auto;z-index:40;min-width:${({ minWidth }) => minWidth};max-width:80vw;&.veeqo-components-toast-enter{transform:translateY(12px);opacity:0;}&.veeqo-components-toast-enter-active{transform:translateY(0);opacity:1;transition:500ms ease;}&.veeqo-components-toast-exit{transform:${({ last }) => (last ? 'translateY(0)' : 'translateX(0)')};opacity:1;}&.veeqo-components-toast-exit-active{transform:${({ last }) => (last ? 'translateY(12px)' : 'translateX(12px)')};opacity:0;transition:500ms ease;}`;
+const IconWrap = styled(BaseContainer).withConfig({ displayName: "vui--IconWrap", componentId: "vui--17e8s7e" }) `display:flex;flex-direction:row;align-items:center;justify-content:center;height:40px;width:40px;border-radius:${theme.radius.md};background-color:${({ color }) => color};color:#fff;svg{width:${sizes.md};height:${sizes.md};}`;
+const ContentStack = styled(Stack).withConfig({ displayName: "vui--ContentStack", componentId: "vui--tg3v7a" }) `flex-grow:1;`;
+const StyledText = styled(Text).withConfig({ displayName: "vui--StyledText", componentId: "vui--1aoeeaz" }) `color:white;font-size:16px;`;
 
 export { ContentStack, IconWrap, StyledText, Toast, ToastsLayoutContainer };
 //# sourceMappingURL=styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../../src/components/ToastsLayout/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { Stack } from '../../Stack';\nimport { BaseContainer } from '../../BaseContainer';\nimport { Text } from '../../Text';\nimport { theme } from '../../../theme';\nimport { sizes } from '../../../theme/modules/sizes';\n\nexport const ToastsLayoutContainer = styled(Stack)`\n  position: fixed;\n  bottom: 24px;\n  width: 100%;\n  pointer-events: none;\n  z-index: ${theme.layers.tooltip};\n`;\n\nexport const Toast = styled(Stack)<{\n  minWidth: number | string;\n  last: boolean;\n}>`\n  background-color: ${theme.colors.neutral.ink.dark};\n  padding: 12px 24px 12px 12px;\n  box-shadow: ${theme.shadows.lg};\n  border-radius: ${theme.radius.md};\n  pointer-events: auto;\n  z-index: 40;\n  min-width: ${({ minWidth }) => minWidth};\n  max-width: 80vw;\n\n  &.veeqo-components-toast-enter {\n    transform: translateY(12px);\n    opacity: 0;\n  }\n\n  &.veeqo-components-toast-enter-active {\n    transform: translateY(0);\n    opacity: 1;\n    transition: 500ms ease;\n  }\n\n  &.veeqo-components-toast-exit {\n    transform: ${({ last }) => (last ? 'translateY(0)' : 'translateX(0)')};\n    opacity: 1;\n  }\n\n  &.veeqo-components-toast-exit-active {\n    transform: ${({ last }) => (last ? 'translateY(12px)' : 'translateX(12px)')};\n    opacity: 0;\n    transition: 500ms ease;\n  }\n`;\n\nexport const IconWrap = styled(BaseContainer)<{ color: string }>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  height: 40px;\n  width: 40px;\n  border-radius: ${theme.radius.md};\n  background-color: ${({ color }) => color};\n  color: #fff;\n\n  svg {\n    width: ${sizes.md};\n    height: ${sizes.md};\n  }\n`;\n\nexport const ContentStack = styled(Stack)`\n  flex-grow: 1;\n`;\n\nexport const StyledText = styled(Text)`\n  color: white;\n  font-size: 16px;\n`;\n"],"names":[],"mappings":";;;;;;;AAQO,MAAM,qBAAqB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,4BAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,kEAAA,EAKrC,KAAK,CAAC,MAAM,CAAC,OAAO;AAGpB,MAAA,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAIZ,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAEnC,wCAAA,EAAA,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA,eAAA,EACb,KAAK,CAAC,MAAM,CAAC,EAAE,6CAGnB,CAAC,EAAE,QAAQ,EAAE,KAAK,QAAQ,CAexB,4NAAA,EAAA,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,GAAG,eAAe,GAAG,eAAe,CAAC,CAAA,2DAAA,EAKxD,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;AAMxE,MAAM,QAAQ,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,+GAAA,EAO1B,KAAK,CAAC,MAAM,CAAC,EAAE,CACZ,kBAAA,EAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAI7B,sBAAA,EAAA,KAAK,CAAC,EAAE,CACP,QAAA,EAAA,KAAK,CAAC,EAAE;MAIT,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,YAAA;MAI5B,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,2BAAA;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../../src/components/ToastsLayout/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { Stack } from '../../Stack';\nimport { BaseContainer } from '../../BaseContainer';\nimport { Text } from '../../Text';\nimport { theme } from '../../../theme';\nimport { sizes } from '../../../theme/modules/sizes';\n\nexport const ToastsLayoutContainer = styled(Stack)`\n  position: fixed;\n  bottom: 24px;\n  width: 100%;\n  pointer-events: none;\n  z-index: ${theme.layers.tooltip};\n`;\n\nexport const Toast = styled(Stack)<{\n  minWidth: number | string;\n  last: boolean;\n}>`\n  background-color: ${theme.colors.neutral.ink.dark};\n  padding: 12px 24px 12px 12px;\n  box-shadow: ${theme.shadows.lg};\n  border-radius: ${theme.radius.md};\n  pointer-events: auto;\n  z-index: 40;\n  min-width: ${({ minWidth }) => minWidth};\n  max-width: 80vw;\n\n  &.veeqo-components-toast-enter {\n    transform: translateY(12px);\n    opacity: 0;\n  }\n\n  &.veeqo-components-toast-enter-active {\n    transform: translateY(0);\n    opacity: 1;\n    transition: 500ms ease;\n  }\n\n  &.veeqo-components-toast-exit {\n    transform: ${({ last }) => (last ? 'translateY(0)' : 'translateX(0)')};\n    opacity: 1;\n  }\n\n  &.veeqo-components-toast-exit-active {\n    transform: ${({ last }) => (last ? 'translateY(12px)' : 'translateX(12px)')};\n    opacity: 0;\n    transition: 500ms ease;\n  }\n`;\n\nexport const IconWrap = styled(BaseContainer)<{ color: string }>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  height: 40px;\n  width: 40px;\n  border-radius: ${theme.radius.md};\n  background-color: ${({ color }) => color};\n  color: #fff;\n\n  svg {\n    width: ${sizes.md};\n    height: ${sizes.md};\n  }\n`;\n\nexport const ContentStack = styled(Stack)`\n  flex-grow: 1;\n`;\n\nexport const StyledText = styled(Text)`\n  color: white;\n  font-size: 16px;\n`;\n"],"names":[],"mappings":";;;;;;;AAQO,MAAM,qBAAqB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,4BAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,kEAAA,EAKrC,KAAK,CAAC,MAAM,CAAC,OAAO;AAGpB,MAAA,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAIZ,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAEnC,wCAAA,EAAA,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA,eAAA,EACb,KAAK,CAAC,MAAM,CAAC,EAAE,6CAGnB,CAAC,EAAE,QAAQ,EAAE,KAAK,QAAQ,CAexB,4NAAA,EAAA,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,GAAG,eAAe,GAAG,eAAe,CAAC,CAAA,2DAAA,EAKxD,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;AAMxE,MAAM,QAAQ,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,+GAAA,EAO1B,KAAK,CAAC,MAAM,CAAC,EAAE,CACZ,kBAAA,EAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAI7B,sBAAA,EAAA,KAAK,CAAC,EAAE,CACP,QAAA,EAAA,KAAK,CAAC,EAAE;MAIT,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,YAAA;MAI5B,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,2BAAA;;;;"}

package/dist/components/Toggle/styled.cjs

@@ -8,10 +8,10 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const Slider = styled__default.default.span.withConfig({ displayName: "vui--Slider", componentId: "vui--10ka3tn" }) `content:'';position:absolute;top:0;left:0;right:0;bottom:0;border-radius:18px;background-color:#cdd1d5;-webkit-transition:0.3s;transition:0.3s;&:after{content:'';position:absolute;border-radius:50%;background-color:${({ disabled, switched }) => disabled && switched ? index.theme.colors.secondary.blue.lightest : 'white'};-webkit-transition:0.3s;transition:0.3s;}`;
-const Input = styled__default.default.input.withConfig({ displayName: "vui--Input", componentId: "vui--1f7rwsl" }) `width:100%;height:100%;border-radius:${index.theme.radius.base};z-index:2;margin:0;cursor:${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};&:focus-visible + ${Slider}{box-shadow:0 0 0 4px ${index.theme.colors.brand.blue.light};}&:checked + ${Slider}{background-color:#0079d1;}&:disabled + ${Slider}{background-color:${index.theme.colors.neutral.grey.base};}&:checked:disabled + ${Slider}{background-color:${index.theme.colors.secondary.blue.light};}`;
-const Switch = styled__default.default.span.withConfig({ displayName: "vui--Switch", componentId: "vui--16c93z6" }) `display:flex;position:relative;height:${({ small }) => (small ? '28px' : '36px')};width:${({ small }) => (small ? '56px' : '72px')};z-index:1;input{position:absolute;opacity:0;}${Slider}:after{height:${({ small }) => (small ? '22px' : '28px')};width:${({ small }) => (small ? '22px' : '28px')};left:${({ small }) => (small ? '3px' : '4px')};bottom:${({ small }) => (small ? '3px' : '4px')};}${Input}:checked + ${Slider}{&:after,svg{-webkit-transform:translateX(${({ small }) => (small ? '28px' : '36px')});-ms-transform:translateX(${({ small }) => (small ? '28px' : '36px')});transform:translateX(${({ small }) => (small ? '28px' : '36px')});}}`;
-const Wrapper = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Wrapper", componentId: "vui--13u3unt" }) `display:inline-block;user-select:none;`;
+const Slider = styled__default.default.span.withConfig({ displayName: "vui--Slider", componentId: "vui--1lpbm63" }) `content:'';position:absolute;top:0;left:0;right:0;bottom:0;border-radius:18px;background-color:#cdd1d5;-webkit-transition:0.3s;transition:0.3s;&:after{content:'';position:absolute;border-radius:50%;background-color:${({ disabled, switched }) => disabled && switched ? index.theme.colors.secondary.blue.lightest : 'white'};-webkit-transition:0.3s;transition:0.3s;}`;
+const Input = styled__default.default.input.withConfig({ displayName: "vui--Input", componentId: "vui--wwolwa" }) `width:100%;height:100%;border-radius:${index.theme.radius.base};z-index:2;margin:0;cursor:${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};&:focus-visible + ${Slider}{box-shadow:0 0 0 4px ${index.theme.colors.brand.blue.light};}&:checked + ${Slider}{background-color:#0079d1;}&:disabled + ${Slider}{background-color:${index.theme.colors.neutral.grey.base};}&:checked:disabled + ${Slider}{background-color:${index.theme.colors.secondary.blue.light};}`;
+const Switch = styled__default.default.span.withConfig({ displayName: "vui--Switch", componentId: "vui--1g5erfv" }) `display:flex;position:relative;height:${({ small }) => (small ? '28px' : '36px')};width:${({ small }) => (small ? '56px' : '72px')};z-index:1;input{position:absolute;opacity:0;}${Slider}:after{height:${({ small }) => (small ? '22px' : '28px')};width:${({ small }) => (small ? '22px' : '28px')};left:${({ small }) => (small ? '3px' : '4px')};bottom:${({ small }) => (small ? '3px' : '4px')};}${Input}:checked + ${Slider}{&:after,svg{-webkit-transform:translateX(${({ small }) => (small ? '28px' : '36px')});-ms-transform:translateX(${({ small }) => (small ? '28px' : '36px')});transform:translateX(${({ small }) => (small ? '28px' : '36px')});}}`;
+const Wrapper = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Wrapper", componentId: "vui--smi5gh" }) `display:inline-block;user-select:none;`;
 
 exports.Input = Input;
 exports.Slider = Slider;

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

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/Toggle/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { ToggleProps } from './types';\nimport { BaseContainer } from '../BaseContainer';\nimport { theme } from '../../theme';\n\nconst Slider = styled.span<{ switched?: boolean; disabled?: boolean }>`\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: 18px;\n  background-color: #cdd1d5;\n  -webkit-transition: 0.3s;\n  transition: 0.3s;\n\n  &:after {\n    content: '';\n    position: absolute;\n    border-radius: 50%;\n    background-color: ${({ disabled, switched }) =>\n      disabled && switched ? theme.colors.secondary.blue.lightest : 'white'};\n    -webkit-transition: 0.3s;\n    transition: 0.3s;\n  }\n`;\n\nconst Input = styled.input`\n  width: 100%;\n  height: 100%;\n  border-radius: ${theme.radius.base};\n  z-index: 2;\n  margin: 0;\n\n  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};\n\n  &:focus-visible + ${Slider} {\n    box-shadow: 0 0 0 4px ${theme.colors.brand.blue.light};\n  }\n\n  &:checked + ${Slider} {\n    background-color: #0079d1;\n  }\n\n  &:disabled + ${Slider} {\n    background-color: ${theme.colors.neutral.grey.base};\n  }\n\n  &:checked:disabled + ${Slider} {\n    background-color: ${theme.colors.secondary.blue.light};\n  }\n`;\n\nconst Switch = styled.span<ToggleProps>`\n  display: flex;\n  position: relative;\n  height: ${({ small }) => (small ? '28px' : '36px')};\n  width: ${({ small }) => (small ? '56px' : '72px')};\n  z-index: 1;\n\n  input {\n    position: absolute;\n    opacity: 0;\n  }\n\n  // configure size and animation\n  ${Slider}:after {\n    height: ${({ small }) => (small ? '22px' : '28px')};\n    width: ${({ small }) => (small ? '22px' : '28px')};\n    left: ${({ small }) => (small ? '3px' : '4px')};\n    bottom: ${({ small }) => (small ? '3px' : '4px')};\n  }\n\n  ${Input}:checked + ${Slider} {\n    &:after,\n    svg {\n      -webkit-transform: translateX(${({ small }) => (small ? '28px' : '36px')});\n      -ms-transform: translateX(${({ small }) => (small ? '28px' : '36px')});\n      transform: translateX(${({ small }) => (small ? '28px' : '36px')});\n    }\n  }\n`;\n\nconst Wrapper = styled(BaseContainer)<{ disabled?: boolean }>`\n  display: inline-block;\n  user-select: none;\n`;\n\nexport { Switch, Slider, Input, Wrapper };\n"],"names":["styled","theme","BaseContainer"],"mappings":";;;;;;;;;;AAMA,MAAM,MAAM,GAAGA,uBAAM,CAAC,IAAI,CAgBF,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,uNAAA,EAAA,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KACzC,QAAQ,IAAI,QAAQ,GAAGC,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,GAAG,OAAO;AAM3E,MAAM,KAAK,GAAGD,uBAAM,CAAC,KAAK,CAGP,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,qCAAA,EAAAC,WAAK,CAAC,MAAM,CAAC,IAAI,CAIxB,2BAAA,EAAA,CAAC,EAAE,QAAQ,EAAE,MAAM,QAAQ,GAAG,aAAa,GAAG,SAAS,CAAC,CAAA,mBAAA,EAE9C,MAAM,CACA,sBAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAA,cAAA,EAGzC,MAAM,CAAA,wCAAA,EAIL,MAAM,CAAA,kBAAA,EACCA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAG7B,uBAAA,EAAA,MAAM,qBACPA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;AAIzD,MAAM,MAAM,GAAGD,uBAAM,CAAC,IAAI,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,sCAAA,EAGd,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CACzC,OAAA,EAAA,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CAAA,8CAAA,EAS/C,MAAM,CAAA,cAAA,EACI,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,UACzC,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CACzC,MAAA,EAAA,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC,WACpC,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC,CAGhD,EAAA,EAAA,KAAK,cAAc,MAAM,CAAA,0CAAA,EAGS,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CAC5C,2BAAA,EAAA,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CAAA,uBAAA,EAC5C,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;AAKtE,MAAM,OAAO,GAAGA,uBAAM,CAACE,2BAAa,CAAC;;;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/Toggle/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { ToggleProps } from './types';\nimport { BaseContainer } from '../BaseContainer';\nimport { theme } from '../../theme';\n\nconst Slider = styled.span<{ switched?: boolean; disabled?: boolean }>`\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: 18px;\n  background-color: #cdd1d5;\n  -webkit-transition: 0.3s;\n  transition: 0.3s;\n\n  &:after {\n    content: '';\n    position: absolute;\n    border-radius: 50%;\n    background-color: ${({ disabled, switched }) =>\n      disabled && switched ? theme.colors.secondary.blue.lightest : 'white'};\n    -webkit-transition: 0.3s;\n    transition: 0.3s;\n  }\n`;\n\nconst Input = styled.input`\n  width: 100%;\n  height: 100%;\n  border-radius: ${theme.radius.base};\n  z-index: 2;\n  margin: 0;\n\n  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};\n\n  &:focus-visible + ${Slider} {\n    box-shadow: 0 0 0 4px ${theme.colors.brand.blue.light};\n  }\n\n  &:checked + ${Slider} {\n    background-color: #0079d1;\n  }\n\n  &:disabled + ${Slider} {\n    background-color: ${theme.colors.neutral.grey.base};\n  }\n\n  &:checked:disabled + ${Slider} {\n    background-color: ${theme.colors.secondary.blue.light};\n  }\n`;\n\nconst Switch = styled.span<ToggleProps>`\n  display: flex;\n  position: relative;\n  height: ${({ small }) => (small ? '28px' : '36px')};\n  width: ${({ small }) => (small ? '56px' : '72px')};\n  z-index: 1;\n\n  input {\n    position: absolute;\n    opacity: 0;\n  }\n\n  // configure size and animation\n  ${Slider}:after {\n    height: ${({ small }) => (small ? '22px' : '28px')};\n    width: ${({ small }) => (small ? '22px' : '28px')};\n    left: ${({ small }) => (small ? '3px' : '4px')};\n    bottom: ${({ small }) => (small ? '3px' : '4px')};\n  }\n\n  ${Input}:checked + ${Slider} {\n    &:after,\n    svg {\n      -webkit-transform: translateX(${({ small }) => (small ? '28px' : '36px')});\n      -ms-transform: translateX(${({ small }) => (small ? '28px' : '36px')});\n      transform: translateX(${({ small }) => (small ? '28px' : '36px')});\n    }\n  }\n`;\n\nconst Wrapper = styled(BaseContainer)<{ disabled?: boolean }>`\n  display: inline-block;\n  user-select: none;\n`;\n\nexport { Switch, Slider, Input, Wrapper };\n"],"names":["styled","theme","BaseContainer"],"mappings":";;;;;;;;;;AAMA,MAAM,MAAM,GAAGA,uBAAM,CAAC,IAAI,CAgBF,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,uNAAA,EAAA,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KACzC,QAAQ,IAAI,QAAQ,GAAGC,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,GAAG,OAAO;AAM3E,MAAM,KAAK,GAAGD,uBAAM,CAAC,KAAK,CAGP,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,qCAAA,EAAAC,WAAK,CAAC,MAAM,CAAC,IAAI,CAIxB,2BAAA,EAAA,CAAC,EAAE,QAAQ,EAAE,MAAM,QAAQ,GAAG,aAAa,GAAG,SAAS,CAAC,CAAA,mBAAA,EAE9C,MAAM,CACA,sBAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAA,cAAA,EAGzC,MAAM,CAAA,wCAAA,EAIL,MAAM,CAAA,kBAAA,EACCA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAG7B,uBAAA,EAAA,MAAM,qBACPA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;AAIzD,MAAM,MAAM,GAAGD,uBAAM,CAAC,IAAI,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,sCAAA,EAGd,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CACzC,OAAA,EAAA,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CAAA,8CAAA,EAS/C,MAAM,CAAA,cAAA,EACI,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,UACzC,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CACzC,MAAA,EAAA,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC,WACpC,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC,CAGhD,EAAA,EAAA,KAAK,cAAc,MAAM,CAAA,0CAAA,EAGS,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CAC5C,2BAAA,EAAA,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CAAA,uBAAA,EAC5C,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;AAKtE,MAAM,OAAO,GAAGA,uBAAM,CAACE,2BAAa,CAAC;;;;;;;"}

package/dist/components/Toggle/styled.js

@@ -2,10 +2,10 @@ import styled from 'styled-components';
 import { BaseContainer } from '../BaseContainer/BaseContainer.js';
 import { theme } from '../../theme/index.js';
 
-const Slider = styled.span.withConfig({ displayName: "vui--Slider", componentId: "vui--10ka3tn" }) `content:'';position:absolute;top:0;left:0;right:0;bottom:0;border-radius:18px;background-color:#cdd1d5;-webkit-transition:0.3s;transition:0.3s;&:after{content:'';position:absolute;border-radius:50%;background-color:${({ disabled, switched }) => disabled && switched ? theme.colors.secondary.blue.lightest : 'white'};-webkit-transition:0.3s;transition:0.3s;}`;
-const Input = styled.input.withConfig({ displayName: "vui--Input", componentId: "vui--1f7rwsl" }) `width:100%;height:100%;border-radius:${theme.radius.base};z-index:2;margin:0;cursor:${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};&:focus-visible + ${Slider}{box-shadow:0 0 0 4px ${theme.colors.brand.blue.light};}&:checked + ${Slider}{background-color:#0079d1;}&:disabled + ${Slider}{background-color:${theme.colors.neutral.grey.base};}&:checked:disabled + ${Slider}{background-color:${theme.colors.secondary.blue.light};}`;
-const Switch = styled.span.withConfig({ displayName: "vui--Switch", componentId: "vui--16c93z6" }) `display:flex;position:relative;height:${({ small }) => (small ? '28px' : '36px')};width:${({ small }) => (small ? '56px' : '72px')};z-index:1;input{position:absolute;opacity:0;}${Slider}:after{height:${({ small }) => (small ? '22px' : '28px')};width:${({ small }) => (small ? '22px' : '28px')};left:${({ small }) => (small ? '3px' : '4px')};bottom:${({ small }) => (small ? '3px' : '4px')};}${Input}:checked + ${Slider}{&:after,svg{-webkit-transform:translateX(${({ small }) => (small ? '28px' : '36px')});-ms-transform:translateX(${({ small }) => (small ? '28px' : '36px')});transform:translateX(${({ small }) => (small ? '28px' : '36px')});}}`;
-const Wrapper = styled(BaseContainer).withConfig({ displayName: "vui--Wrapper", componentId: "vui--13u3unt" }) `display:inline-block;user-select:none;`;
+const Slider = styled.span.withConfig({ displayName: "vui--Slider", componentId: "vui--1lpbm63" }) `content:'';position:absolute;top:0;left:0;right:0;bottom:0;border-radius:18px;background-color:#cdd1d5;-webkit-transition:0.3s;transition:0.3s;&:after{content:'';position:absolute;border-radius:50%;background-color:${({ disabled, switched }) => disabled && switched ? theme.colors.secondary.blue.lightest : 'white'};-webkit-transition:0.3s;transition:0.3s;}`;
+const Input = styled.input.withConfig({ displayName: "vui--Input", componentId: "vui--wwolwa" }) `width:100%;height:100%;border-radius:${theme.radius.base};z-index:2;margin:0;cursor:${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};&:focus-visible + ${Slider}{box-shadow:0 0 0 4px ${theme.colors.brand.blue.light};}&:checked + ${Slider}{background-color:#0079d1;}&:disabled + ${Slider}{background-color:${theme.colors.neutral.grey.base};}&:checked:disabled + ${Slider}{background-color:${theme.colors.secondary.blue.light};}`;
+const Switch = styled.span.withConfig({ displayName: "vui--Switch", componentId: "vui--1g5erfv" }) `display:flex;position:relative;height:${({ small }) => (small ? '28px' : '36px')};width:${({ small }) => (small ? '56px' : '72px')};z-index:1;input{position:absolute;opacity:0;}${Slider}:after{height:${({ small }) => (small ? '22px' : '28px')};width:${({ small }) => (small ? '22px' : '28px')};left:${({ small }) => (small ? '3px' : '4px')};bottom:${({ small }) => (small ? '3px' : '4px')};}${Input}:checked + ${Slider}{&:after,svg{-webkit-transform:translateX(${({ small }) => (small ? '28px' : '36px')});-ms-transform:translateX(${({ small }) => (small ? '28px' : '36px')});transform:translateX(${({ small }) => (small ? '28px' : '36px')});}}`;
+const Wrapper = styled(BaseContainer).withConfig({ displayName: "vui--Wrapper", componentId: "vui--smi5gh" }) `display:inline-block;user-select:none;`;
 
 export { Input, Slider, Switch, Wrapper };
 //# sourceMappingURL=styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/Toggle/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { ToggleProps } from './types';\nimport { BaseContainer } from '../BaseContainer';\nimport { theme } from '../../theme';\n\nconst Slider = styled.span<{ switched?: boolean; disabled?: boolean }>`\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: 18px;\n  background-color: #cdd1d5;\n  -webkit-transition: 0.3s;\n  transition: 0.3s;\n\n  &:after {\n    content: '';\n    position: absolute;\n    border-radius: 50%;\n    background-color: ${({ disabled, switched }) =>\n      disabled && switched ? theme.colors.secondary.blue.lightest : 'white'};\n    -webkit-transition: 0.3s;\n    transition: 0.3s;\n  }\n`;\n\nconst Input = styled.input`\n  width: 100%;\n  height: 100%;\n  border-radius: ${theme.radius.base};\n  z-index: 2;\n  margin: 0;\n\n  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};\n\n  &:focus-visible + ${Slider} {\n    box-shadow: 0 0 0 4px ${theme.colors.brand.blue.light};\n  }\n\n  &:checked + ${Slider} {\n    background-color: #0079d1;\n  }\n\n  &:disabled + ${Slider} {\n    background-color: ${theme.colors.neutral.grey.base};\n  }\n\n  &:checked:disabled + ${Slider} {\n    background-color: ${theme.colors.secondary.blue.light};\n  }\n`;\n\nconst Switch = styled.span<ToggleProps>`\n  display: flex;\n  position: relative;\n  height: ${({ small }) => (small ? '28px' : '36px')};\n  width: ${({ small }) => (small ? '56px' : '72px')};\n  z-index: 1;\n\n  input {\n    position: absolute;\n    opacity: 0;\n  }\n\n  // configure size and animation\n  ${Slider}:after {\n    height: ${({ small }) => (small ? '22px' : '28px')};\n    width: ${({ small }) => (small ? '22px' : '28px')};\n    left: ${({ small }) => (small ? '3px' : '4px')};\n    bottom: ${({ small }) => (small ? '3px' : '4px')};\n  }\n\n  ${Input}:checked + ${Slider} {\n    &:after,\n    svg {\n      -webkit-transform: translateX(${({ small }) => (small ? '28px' : '36px')});\n      -ms-transform: translateX(${({ small }) => (small ? '28px' : '36px')});\n      transform: translateX(${({ small }) => (small ? '28px' : '36px')});\n    }\n  }\n`;\n\nconst Wrapper = styled(BaseContainer)<{ disabled?: boolean }>`\n  display: inline-block;\n  user-select: none;\n`;\n\nexport { Switch, Slider, Input, Wrapper };\n"],"names":[],"mappings":";;;;AAMA,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAgBF,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,uNAAA,EAAA,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KACzC,QAAQ,IAAI,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,GAAG,OAAO;AAM3E,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAGP,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,qCAAA,EAAA,KAAK,CAAC,MAAM,CAAC,IAAI,CAIxB,2BAAA,EAAA,CAAC,EAAE,QAAQ,EAAE,MAAM,QAAQ,GAAG,aAAa,GAAG,SAAS,CAAC,CAAA,mBAAA,EAE9C,MAAM,CACA,sBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAA,cAAA,EAGzC,MAAM,CAAA,wCAAA,EAIL,MAAM,CAAA,kBAAA,EACC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAG7B,uBAAA,EAAA,MAAM,qBACP,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;AAIzD,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,sCAAA,EAGd,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CACzC,OAAA,EAAA,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CAAA,8CAAA,EAS/C,MAAM,CAAA,cAAA,EACI,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,UACzC,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CACzC,MAAA,EAAA,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC,WACpC,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC,CAGhD,EAAA,EAAA,KAAK,cAAc,MAAM,CAAA,0CAAA,EAGS,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CAC5C,2BAAA,EAAA,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CAAA,uBAAA,EAC5C,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;AAKtE,MAAM,OAAO,GAAG,MAAM,CAAC,aAAa,CAAC;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/Toggle/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { ToggleProps } from './types';\nimport { BaseContainer } from '../BaseContainer';\nimport { theme } from '../../theme';\n\nconst Slider = styled.span<{ switched?: boolean; disabled?: boolean }>`\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: 18px;\n  background-color: #cdd1d5;\n  -webkit-transition: 0.3s;\n  transition: 0.3s;\n\n  &:after {\n    content: '';\n    position: absolute;\n    border-radius: 50%;\n    background-color: ${({ disabled, switched }) =>\n      disabled && switched ? theme.colors.secondary.blue.lightest : 'white'};\n    -webkit-transition: 0.3s;\n    transition: 0.3s;\n  }\n`;\n\nconst Input = styled.input`\n  width: 100%;\n  height: 100%;\n  border-radius: ${theme.radius.base};\n  z-index: 2;\n  margin: 0;\n\n  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};\n\n  &:focus-visible + ${Slider} {\n    box-shadow: 0 0 0 4px ${theme.colors.brand.blue.light};\n  }\n\n  &:checked + ${Slider} {\n    background-color: #0079d1;\n  }\n\n  &:disabled + ${Slider} {\n    background-color: ${theme.colors.neutral.grey.base};\n  }\n\n  &:checked:disabled + ${Slider} {\n    background-color: ${theme.colors.secondary.blue.light};\n  }\n`;\n\nconst Switch = styled.span<ToggleProps>`\n  display: flex;\n  position: relative;\n  height: ${({ small }) => (small ? '28px' : '36px')};\n  width: ${({ small }) => (small ? '56px' : '72px')};\n  z-index: 1;\n\n  input {\n    position: absolute;\n    opacity: 0;\n  }\n\n  // configure size and animation\n  ${Slider}:after {\n    height: ${({ small }) => (small ? '22px' : '28px')};\n    width: ${({ small }) => (small ? '22px' : '28px')};\n    left: ${({ small }) => (small ? '3px' : '4px')};\n    bottom: ${({ small }) => (small ? '3px' : '4px')};\n  }\n\n  ${Input}:checked + ${Slider} {\n    &:after,\n    svg {\n      -webkit-transform: translateX(${({ small }) => (small ? '28px' : '36px')});\n      -ms-transform: translateX(${({ small }) => (small ? '28px' : '36px')});\n      transform: translateX(${({ small }) => (small ? '28px' : '36px')});\n    }\n  }\n`;\n\nconst Wrapper = styled(BaseContainer)<{ disabled?: boolean }>`\n  display: inline-block;\n  user-select: none;\n`;\n\nexport { Switch, Slider, Input, Wrapper };\n"],"names":[],"mappings":";;;;AAMA,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAgBF,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,uNAAA,EAAA,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KACzC,QAAQ,IAAI,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,GAAG,OAAO;AAM3E,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAGP,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,qCAAA,EAAA,KAAK,CAAC,MAAM,CAAC,IAAI,CAIxB,2BAAA,EAAA,CAAC,EAAE,QAAQ,EAAE,MAAM,QAAQ,GAAG,aAAa,GAAG,SAAS,CAAC,CAAA,mBAAA,EAE9C,MAAM,CACA,sBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAA,cAAA,EAGzC,MAAM,CAAA,wCAAA,EAIL,MAAM,CAAA,kBAAA,EACC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAG7B,uBAAA,EAAA,MAAM,qBACP,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;AAIzD,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,sCAAA,EAGd,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CACzC,OAAA,EAAA,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CAAA,8CAAA,EAS/C,MAAM,CAAA,cAAA,EACI,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,UACzC,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CACzC,MAAA,EAAA,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC,WACpC,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC,CAGhD,EAAA,EAAA,KAAK,cAAc,MAAM,CAAA,0CAAA,EAGS,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CAC5C,2BAAA,EAAA,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CAAA,uBAAA,EAC5C,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;AAKtE,MAAM,OAAO,GAAG,MAAM,CAAC,aAAa,CAAC;;;;"}

package/dist/components/ToggleButton/styled.cjs

@@ -7,7 +7,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const StyledButton = styled__default.default.button.withConfig({ displayName: "vui--StyledButton", componentId: "vui--xt3hiw" }) `user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-family:${index.theme.fontFamily};font-weight:400;border:1px solid;box-shadow:0 1px 3px rgba(55, 66, 77, 0.15);${({ size, checked }) => {
+const StyledButton = styled__default.default.button.withConfig({ displayName: "vui--StyledButton", componentId: "vui--2wt2qd" }) `user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-family:${index.theme.fontFamily};font-weight:400;border:1px solid;box-shadow:0 1px 3px rgba(55, 66, 77, 0.15);${({ size, checked }) => {
     let height = '40px';
     let paddingLeft = '24px';
     let paddingRight = '24px';

package/dist/components/ToggleButton/styled.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { theme } from '../../theme/index.js';
 
-const StyledButton = styled.button.withConfig({ displayName: "vui--StyledButton", componentId: "vui--xt3hiw" }) `user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-family:${theme.fontFamily};font-weight:400;border:1px solid;box-shadow:0 1px 3px rgba(55, 66, 77, 0.15);${({ size, checked }) => {
+const StyledButton = styled.button.withConfig({ displayName: "vui--StyledButton", componentId: "vui--2wt2qd" }) `user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-family:${theme.fontFamily};font-weight:400;border:1px solid;box-shadow:0 1px 3px rgba(55, 66, 77, 0.15);${({ size, checked }) => {
     let height = '40px';
     let paddingLeft = '24px';
     let paddingRight = '24px';

package/dist/components/Tooltip/components/styled.cjs

@@ -8,15 +8,15 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const Container = styled__default.default.div.withConfig({ displayName: "vui--Container", componentId: "vui--t7r6of" }) `display:inline-block;`;
-const Triangle = styled__default.default.div.withConfig({ displayName: "vui--Triangle", componentId: "vui--18xnftt" }) `background-color:${index.theme.colors.neutral.ink.dark};height:16px;width:16px;position:absolute;transform:rotate(45deg);z-index:${index.theme.layers.tooltip};`;
+const Container = styled__default.default.div.withConfig({ displayName: "vui--Container", componentId: "vui--xoiqij" }) `display:inline-block;`;
+const Triangle = styled__default.default.div.withConfig({ displayName: "vui--Triangle", componentId: "vui--16f4d0n" }) `background-color:${index.theme.colors.neutral.ink.dark};height:16px;width:16px;position:absolute;transform:rotate(45deg);z-index:${index.theme.layers.tooltip};`;
 const Tip = styled__default.default(framerMotion.motion.div).attrs({
     initial: { opacity: 0 },
     animate: { opacity: 1 },
     exit: { opacity: 0 },
     transition: { duration: 0.15 },
-}).withConfig({ displayName: "vui--Tip", componentId: "vui--hap6gu" }) `width:max-content;pointer-events:none;will-change:opacity,transform;&[data-popper-placement^='top-start'] > #veeqo-components-triangle{left:8px;bottom:0px;}&[data-popper-placement^='top-end'] > #veeqo-components-triangle{right:8px;bottom:0px;}&[data-popper-placement^='bottom-start'] > #veeqo-components-triangle{left:8px;top:-4px;}&[data-popper-placement^='bottom-end'] > #veeqo-components-triangle{right:8px;top:-4px;}`;
-const Wrap = styled__default.default(Container).withConfig({ displayName: "vui--Wrap", componentId: "vui--1xvencu" }) `padding:${index.theme.sizes.base} ${index.theme.sizes[5]};overflow:hidden;z-index:10;min-width:${({ tipMinWidth }) => tipMinWidth}px;max-width:${({ tipMaxWidth }) => tipMaxWidth}px;color:#fff;border-radius:${index.theme.sizes.sm};box-shadow:${index.theme.shadows.base};background:${index.theme.colors.neutral.ink.dark};`;
+}).withConfig({ displayName: "vui--Tip", componentId: "vui--j2ddij" }) `width:max-content;pointer-events:none;will-change:opacity,transform;&[data-popper-placement^='top-start'] > #veeqo-components-triangle{left:8px;bottom:0px;}&[data-popper-placement^='top-end'] > #veeqo-components-triangle{right:8px;bottom:0px;}&[data-popper-placement^='bottom-start'] > #veeqo-components-triangle{left:8px;top:-4px;}&[data-popper-placement^='bottom-end'] > #veeqo-components-triangle{right:8px;top:-4px;}`;
+const Wrap = styled__default.default(Container).withConfig({ displayName: "vui--Wrap", componentId: "vui--1mtkjub" }) `padding:${index.theme.sizes.base} ${index.theme.sizes[5]};overflow:hidden;z-index:10;min-width:${({ tipMinWidth }) => tipMinWidth}px;max-width:${({ tipMaxWidth }) => tipMaxWidth}px;color:#fff;border-radius:${index.theme.sizes.sm};box-shadow:${index.theme.shadows.base};background:${index.theme.colors.neutral.ink.dark};`;
 
 exports.Container = Container;
 exports.Tip = Tip;

package/dist/components/Tooltip/components/styled.js

@@ -2,15 +2,15 @@ import styled from 'styled-components';
 import { motion } from 'framer-motion';
 import { theme } from '../../../theme/index.js';
 
-const Container = styled.div.withConfig({ displayName: "vui--Container", componentId: "vui--t7r6of" }) `display:inline-block;`;
-const Triangle = styled.div.withConfig({ displayName: "vui--Triangle", componentId: "vui--18xnftt" }) `background-color:${theme.colors.neutral.ink.dark};height:16px;width:16px;position:absolute;transform:rotate(45deg);z-index:${theme.layers.tooltip};`;
+const Container = styled.div.withConfig({ displayName: "vui--Container", componentId: "vui--xoiqij" }) `display:inline-block;`;
+const Triangle = styled.div.withConfig({ displayName: "vui--Triangle", componentId: "vui--16f4d0n" }) `background-color:${theme.colors.neutral.ink.dark};height:16px;width:16px;position:absolute;transform:rotate(45deg);z-index:${theme.layers.tooltip};`;
 const Tip = styled(motion.div).attrs({
     initial: { opacity: 0 },
     animate: { opacity: 1 },
     exit: { opacity: 0 },
     transition: { duration: 0.15 },
-}).withConfig({ displayName: "vui--Tip", componentId: "vui--hap6gu" }) `width:max-content;pointer-events:none;will-change:opacity,transform;&[data-popper-placement^='top-start'] > #veeqo-components-triangle{left:8px;bottom:0px;}&[data-popper-placement^='top-end'] > #veeqo-components-triangle{right:8px;bottom:0px;}&[data-popper-placement^='bottom-start'] > #veeqo-components-triangle{left:8px;top:-4px;}&[data-popper-placement^='bottom-end'] > #veeqo-components-triangle{right:8px;top:-4px;}`;
-const Wrap = styled(Container).withConfig({ displayName: "vui--Wrap", componentId: "vui--1xvencu" }) `padding:${theme.sizes.base} ${theme.sizes[5]};overflow:hidden;z-index:10;min-width:${({ tipMinWidth }) => tipMinWidth}px;max-width:${({ tipMaxWidth }) => tipMaxWidth}px;color:#fff;border-radius:${theme.sizes.sm};box-shadow:${theme.shadows.base};background:${theme.colors.neutral.ink.dark};`;
+}).withConfig({ displayName: "vui--Tip", componentId: "vui--j2ddij" }) `width:max-content;pointer-events:none;will-change:opacity,transform;&[data-popper-placement^='top-start'] > #veeqo-components-triangle{left:8px;bottom:0px;}&[data-popper-placement^='top-end'] > #veeqo-components-triangle{right:8px;bottom:0px;}&[data-popper-placement^='bottom-start'] > #veeqo-components-triangle{left:8px;top:-4px;}&[data-popper-placement^='bottom-end'] > #veeqo-components-triangle{right:8px;top:-4px;}`;
+const Wrap = styled(Container).withConfig({ displayName: "vui--Wrap", componentId: "vui--1mtkjub" }) `padding:${theme.sizes.base} ${theme.sizes[5]};overflow:hidden;z-index:10;min-width:${({ tipMinWidth }) => tipMinWidth}px;max-width:${({ tipMaxWidth }) => tipMaxWidth}px;color:#fff;border-radius:${theme.sizes.sm};box-shadow:${theme.shadows.base};background:${theme.colors.neutral.ink.dark};`;
 
 export { Container, Tip, Triangle, Wrap };
 //# sourceMappingURL=styled.js.map

package/dist/components/UploadFile/UploadFile.cjs

@@ -12,7 +12,6 @@ var styled = require('../../hoc/withLabels/styled.cjs');
 var Stack = require('../Stack/Stack.cjs');
 var UploadFileErrors = require('./components/UploadFileErrors/UploadFileErrors.cjs');
 var UploadedFile = require('./components/UploadedFile/UploadedFile.cjs');
-var sizes = require('../../theme/modules/sizes.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -126,16 +125,14 @@ const UploadFile = React.forwardRef(({ id, name, maxBytes = 1000000, format = co
             ref === null || ref === undefined ? undefined : ref.removeEventListener('cancel', resetSelection);
         };
     }, [onInputChange, resetSelection]);
-    return (React__default.default.createElement(styled.RootStack, { spacing: "sm", alignX: "stretch" },
-        React__default.default.createElement(styled.Label, { htmlFor: id },
-            label,
-            React__default.default.createElement(Stack.Stack, { spacing: 3, alignX: "stretch", style: { paddingTop: sizes.sizes.sm } },
-                React__default.default.createElement(styled.Hint, null,
-                    React__default.default.createElement("div", null, acceptedTypesCopy),
-                    React__default.default.createElement("div", null, maxSizeCopy)),
-                React__default.default.createElement(styled$1.DropZoneContainer, { onDrop: onDrop, onDragEnter: onDragEnter, onDragOver: onDragOver, onDragLeave: onDragLeave },
-                    React__default.default.createElement(UploadCopy.UploadCopy, null),
-                    React__default.default.createElement("input", { ref: inputRef, id: id, type: "file", accept: acceptedTypesForInputEl, name: name, required: required, disabled: disabled, ...otherProps })))),
+    return (React__default.default.createElement(styled.RootStack, { spacing: "xs", alignX: "stretch" },
+        React__default.default.createElement(styled.Label, { htmlFor: id }, label),
+        React__default.default.createElement(styled.Hint, null,
+            React__default.default.createElement("div", null, acceptedTypesCopy),
+            React__default.default.createElement("div", null, maxSizeCopy)),
+        React__default.default.createElement(styled$1.DropZoneContainer, { onDrop: onDrop, onDragEnter: onDragEnter, onDragOver: onDragOver, onDragLeave: onDragLeave },
+            React__default.default.createElement(UploadCopy.UploadCopy, null),
+            React__default.default.createElement("input", { ref: inputRef, id: id, type: "file", accept: acceptedTypesForInputEl, name: name, required: required, disabled: disabled, ...otherProps })),
         React__default.default.createElement(Stack.Stack, { alignX: "stretch", spacing: "sm" },
             React__default.default.createElement(UploadedFile.UploadedFile, { file: file, resetSelection: resetSelection, disabled: disabled }),
             React__default.default.createElement(UploadFileErrors.UploadFileErrors, { acceptedTypesCopy: isInvalidFormat ? acceptedTypesCopy : undefined, maxSizeCopy: isOverMaxSize ? maxSizeCopy : undefined }))));

package/dist/components/UploadFile/UploadFile.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"UploadFile.cjs","sources":["../../../src/components/UploadFile/UploadFile.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useState,\n  DragEvent,\n  forwardRef,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport { DropZoneContainer } from './styled';\nimport { InputState, FileSizeUnit } from './constants';\nimport { UploadCopy } from './components/UploadCopy/UploadCopy';\nimport { setInputElFile } from './utils/setInputElFile/setInputElFile';\nimport { getFileSizeString, getTypePropForInputEl, getValidTypesString } from './utils';\nimport { UploadFileProps } from './types';\nimport { Hint, Label, RootStack } from '../../hoc/withLabels/styled';\nimport { Stack } from '../Stack';\nimport { UploadFileErrors } from './components/UploadFileErrors/UploadFileErrors';\nimport { UploadedFile } from './components/UploadedFile/UploadedFile';\nimport { sizes } from '../../theme/modules/sizes';\n\nexport const UploadFile = forwardRef<HTMLInputElement, UploadFileProps>(\n  (\n    {\n      id,\n      name,\n      maxBytes = 1000000,\n      format = FileSizeUnit.MB,\n      fileTypes,\n      label = 'Upload file',\n      required,\n      disabled,\n      ...otherProps\n    }: UploadFileProps,\n    outerRef,\n  ) => {\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    useImperativeHandle(outerRef, () => inputRef.current!, []);\n\n    const [file, setFile] = useState<File>();\n    const [errorState, setErrorState] = useState(InputState.VALID);\n\n    const isInvalidFormat =\n      errorState === InputState.INVALID_FORMAT || errorState === InputState.INVALID_FORMAT_AND_SIZE;\n    const isOverMaxSize =\n      errorState === InputState.INVALID_SIZE || errorState === InputState.INVALID_FORMAT_AND_SIZE;\n\n    // Computed properties based on params\n    const maxSizeCopy = getFileSizeString({ maxBytes, format });\n    const acceptedTypesCopy = getValidTypesString({ fileTypes });\n    const acceptedTypesForInputEl = getTypePropForInputEl({ fileTypes });\n\n    const clearFileSelection = () => {\n      if (inputRef.current?.value) inputRef.current.value = '';\n    };\n\n    // Tracks error states within the input element itself, using preset\n    // error messages and assigns these to the input component based on the file\n    const setInputValidation = ({\n      overMaxSize,\n      invalidFormat,\n    }: {\n      overMaxSize?: boolean;\n      invalidFormat?: boolean;\n    }) => {\n      let error = InputState.VALID;\n      if (invalidFormat && !overMaxSize) {\n        error = InputState.INVALID_FORMAT;\n      } else if (!invalidFormat && overMaxSize) {\n        error = InputState.INVALID_SIZE;\n      } else if (invalidFormat && overMaxSize) {\n        error = InputState.INVALID_FORMAT_AND_SIZE;\n      }\n      inputRef.current?.setCustomValidity(error);\n      setErrorState(error);\n    };\n\n    // Processes file and updates the UI appropriately:\n    const updateFiles = useCallback(\n      (files: FileList) => {\n        if (!files.length) {\n          setInputValidation({ invalidFormat: true });\n          return;\n        }\n\n        const [newFile] = files;\n        const hasExceededMaxSize = newFile.size > maxBytes;\n\n        const [, extension] = newFile.type.split('/');\n        const isTypeValid = fileTypes.find((validType) => validType.substring(1) === extension);\n        const hasInvalidFormat = !isTypeValid;\n\n        if (hasExceededMaxSize || hasInvalidFormat) {\n          // Empty the inputRef's read-only fileList by clearing the value attribute,\n          // since we have an invalid input.\n          clearFileSelection();\n        } else {\n          // Update the files attribute of the input el, with the new file(s)\n          setInputElFile({ fileList: files, elementId: id });\n        }\n        setInputValidation({\n          invalidFormat: hasInvalidFormat,\n          overMaxSize: hasExceededMaxSize,\n        });\n        setFile(newFile);\n      },\n      [fileTypes, id, maxBytes],\n    );\n\n    // For focussing of input el and updating drop UI\n    const onDragEnter = (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      inputRef.current?.focus();\n    };\n\n    // For unfocussing of input el and updating drop UI\n    const onDragLeave = (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      inputRef.current?.blur();\n    };\n\n    // Prevents default browser behaviour\n    const onDragOver = (event: DragEvent<HTMLElement>) => event.preventDefault();\n\n    // Process file when dropped into eligible area\n    const onDrop = (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      // Prevent reactions on dragging events that do not contain files\n      if (!event.dataTransfer.files.length) return;\n      updateFiles(event.dataTransfer.files);\n    };\n\n    // Removes input el's files, clears errors and removes file from react component\n    const resetSelection = useCallback(() => {\n      clearFileSelection();\n      setFile(undefined);\n      setInputValidation({\n        invalidFormat: false,\n        overMaxSize: false,\n      });\n    }, []);\n\n    // Updates UI based on a native file input change. Attached via useEffect below\n    const onInputChange = useCallback(() => {\n      const files = inputRef?.current?.files;\n      if (files?.length && files?.length > 0) updateFiles(files);\n      else resetSelection();\n    }, [resetSelection, updateFiles]);\n\n    useEffect(() => {\n      const ref = inputRef?.current;\n      ref?.addEventListener('change', onInputChange);\n      ref?.addEventListener('cancel', resetSelection);\n\n      return () => {\n        ref?.removeEventListener('change', onInputChange);\n        ref?.removeEventListener('cancel', resetSelection);\n      };\n    }, [onInputChange, resetSelection]);\n\n    return (\n      <RootStack spacing=\"sm\" alignX=\"stretch\">\n        <Label htmlFor={id}>\n          {label}\n          <Stack spacing={3} alignX=\"stretch\" style={{ paddingTop: sizes.sm }}>\n            <Hint>\n              <div>{acceptedTypesCopy}</div>\n              <div>{maxSizeCopy}</div>\n            </Hint>\n            <DropZoneContainer\n              onDrop={onDrop}\n              onDragEnter={onDragEnter}\n              onDragOver={onDragOver}\n              onDragLeave={onDragLeave}\n            >\n              <UploadCopy />\n              <input\n                ref={inputRef}\n                id={id}\n                type=\"file\"\n                accept={acceptedTypesForInputEl}\n                name={name}\n                required={required}\n                disabled={disabled}\n                {...otherProps}\n              />\n            </DropZoneContainer>\n          </Stack>\n        </Label>\n        <Stack alignX=\"stretch\" spacing=\"sm\">\n          <UploadedFile file={file} resetSelection={resetSelection} disabled={disabled} />\n          <UploadFileErrors\n            acceptedTypesCopy={isInvalidFormat ? acceptedTypesCopy : undefined}\n            maxSizeCopy={isOverMaxSize ? maxSizeCopy : undefined}\n          />\n        </Stack>\n      </RootStack>\n    );\n  },\n);\n"],"names":["forwardRef","FileSizeUnit","useRef","useImperativeHandle","useState","InputState","getFileSizeString","getValidTypesString","getTypePropForInputEl","useCallback","setInputElFile","useEffect","React","RootStack","Label","Stack","sizes","Hint","DropZoneContainer","UploadCopy","UploadedFile","UploadFileErrors"],"mappings":"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"}
+{"version":3,"file":"UploadFile.cjs","sources":["../../../src/components/UploadFile/UploadFile.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useState,\n  DragEvent,\n  forwardRef,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport { DropZoneContainer } from './styled';\nimport { InputState, FileSizeUnit } from './constants';\nimport { UploadCopy } from './components/UploadCopy/UploadCopy';\nimport { setInputElFile } from './utils/setInputElFile/setInputElFile';\nimport { getFileSizeString, getTypePropForInputEl, getValidTypesString } from './utils';\nimport { UploadFileProps } from './types';\nimport { Hint, Label, RootStack } from '../../hoc/withLabels/styled';\nimport { Stack } from '../Stack';\nimport { UploadFileErrors } from './components/UploadFileErrors/UploadFileErrors';\nimport { UploadedFile } from './components/UploadedFile/UploadedFile';\n\nexport const UploadFile = forwardRef<HTMLInputElement, UploadFileProps>(\n  (\n    {\n      id,\n      name,\n      maxBytes = 1000000,\n      format = FileSizeUnit.MB,\n      fileTypes,\n      label = 'Upload file',\n      required,\n      disabled,\n      ...otherProps\n    }: UploadFileProps,\n    outerRef,\n  ) => {\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    useImperativeHandle(outerRef, () => inputRef.current!, []);\n\n    const [file, setFile] = useState<File>();\n    const [errorState, setErrorState] = useState(InputState.VALID);\n\n    const isInvalidFormat =\n      errorState === InputState.INVALID_FORMAT || errorState === InputState.INVALID_FORMAT_AND_SIZE;\n    const isOverMaxSize =\n      errorState === InputState.INVALID_SIZE || errorState === InputState.INVALID_FORMAT_AND_SIZE;\n\n    // Computed properties based on params\n    const maxSizeCopy = getFileSizeString({ maxBytes, format });\n    const acceptedTypesCopy = getValidTypesString({ fileTypes });\n    const acceptedTypesForInputEl = getTypePropForInputEl({ fileTypes });\n\n    const clearFileSelection = () => {\n      if (inputRef.current?.value) inputRef.current.value = '';\n    };\n\n    // Tracks error states within the input element itself, using preset\n    // error messages and assigns these to the input component based on the file\n    const setInputValidation = ({\n      overMaxSize,\n      invalidFormat,\n    }: {\n      overMaxSize?: boolean;\n      invalidFormat?: boolean;\n    }) => {\n      let error = InputState.VALID;\n      if (invalidFormat && !overMaxSize) {\n        error = InputState.INVALID_FORMAT;\n      } else if (!invalidFormat && overMaxSize) {\n        error = InputState.INVALID_SIZE;\n      } else if (invalidFormat && overMaxSize) {\n        error = InputState.INVALID_FORMAT_AND_SIZE;\n      }\n      inputRef.current?.setCustomValidity(error);\n      setErrorState(error);\n    };\n\n    // Processes file and updates the UI appropriately:\n    const updateFiles = useCallback(\n      (files: FileList) => {\n        if (!files.length) {\n          setInputValidation({ invalidFormat: true });\n          return;\n        }\n\n        const [newFile] = files;\n        const hasExceededMaxSize = newFile.size > maxBytes;\n\n        const [, extension] = newFile.type.split('/');\n        const isTypeValid = fileTypes.find((validType) => validType.substring(1) === extension);\n        const hasInvalidFormat = !isTypeValid;\n\n        if (hasExceededMaxSize || hasInvalidFormat) {\n          // Empty the inputRef's read-only fileList by clearing the value attribute,\n          // since we have an invalid input.\n          clearFileSelection();\n        } else {\n          // Update the files attribute of the input el, with the new file(s)\n          setInputElFile({ fileList: files, elementId: id });\n        }\n        setInputValidation({\n          invalidFormat: hasInvalidFormat,\n          overMaxSize: hasExceededMaxSize,\n        });\n        setFile(newFile);\n      },\n      [fileTypes, id, maxBytes],\n    );\n\n    // For focussing of input el and updating drop UI\n    const onDragEnter = (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      inputRef.current?.focus();\n    };\n\n    // For unfocussing of input el and updating drop UI\n    const onDragLeave = (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      inputRef.current?.blur();\n    };\n\n    // Prevents default browser behaviour\n    const onDragOver = (event: DragEvent<HTMLElement>) => event.preventDefault();\n\n    // Process file when dropped into eligible area\n    const onDrop = (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      // Prevent reactions on dragging events that do not contain files\n      if (!event.dataTransfer.files.length) return;\n      updateFiles(event.dataTransfer.files);\n    };\n\n    // Removes input el's files, clears errors and removes file from react component\n    const resetSelection = useCallback(() => {\n      clearFileSelection();\n      setFile(undefined);\n      setInputValidation({\n        invalidFormat: false,\n        overMaxSize: false,\n      });\n    }, []);\n\n    // Updates UI based on a native file input change. Attached via useEffect below\n    const onInputChange = useCallback(() => {\n      const files = inputRef?.current?.files;\n      if (files?.length && files?.length > 0) updateFiles(files);\n      else resetSelection();\n    }, [resetSelection, updateFiles]);\n\n    useEffect(() => {\n      const ref = inputRef?.current;\n      ref?.addEventListener('change', onInputChange);\n      ref?.addEventListener('cancel', resetSelection);\n\n      return () => {\n        ref?.removeEventListener('change', onInputChange);\n        ref?.removeEventListener('cancel', resetSelection);\n      };\n    }, [onInputChange, resetSelection]);\n\n    return (\n      <RootStack spacing=\"xs\" alignX=\"stretch\">\n        <Label htmlFor={id}>{label}</Label>\n        <Hint>\n          <div>{acceptedTypesCopy}</div>\n          <div>{maxSizeCopy}</div>\n        </Hint>\n        <DropZoneContainer\n          onDrop={onDrop}\n          onDragEnter={onDragEnter}\n          onDragOver={onDragOver}\n          onDragLeave={onDragLeave}\n        >\n          <UploadCopy />\n          <input\n            ref={inputRef}\n            id={id}\n            type=\"file\"\n            accept={acceptedTypesForInputEl}\n            name={name}\n            required={required}\n            disabled={disabled}\n            {...otherProps}\n          />\n        </DropZoneContainer>\n        <Stack alignX=\"stretch\" spacing=\"sm\">\n          <UploadedFile file={file} resetSelection={resetSelection} disabled={disabled} />\n          <UploadFileErrors\n            acceptedTypesCopy={isInvalidFormat ? acceptedTypesCopy : undefined}\n            maxSizeCopy={isOverMaxSize ? maxSizeCopy : undefined}\n          />\n        </Stack>\n      </RootStack>\n    );\n  },\n);\n"],"names":["forwardRef","FileSizeUnit","useRef","useImperativeHandle","useState","InputState","getFileSizeString","getValidTypesString","getTypePropForInputEl","useCallback","setInputElFile","useEffect","React","RootStack","Label","Hint","DropZoneContainer","UploadCopy","Stack","UploadedFile","UploadFileErrors"],"mappings":"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"}