@sats-group/ui-lib 81.0.1 → 81.1.0

package/react/text-area/text-area.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/text-area/text-area.tsx"],
-  "sourcesContent": ["import cn from 'classnames';\nimport * as React from 'react';\n\nimport Text from '../text';\nimport useInputValidation from '../use-input-validation';\n\nimport { TextArea as Props, themes, sizes } from './text-area.types';\n\nconst RefTextArea = React.forwardRef<\n  HTMLTextAreaElement,\n  React.PropsWithChildren<Props>\n>(\n  (\n    {\n      children,\n      helpText,\n      label,\n      name,\n      placeholder,\n      disabled,\n      required,\n      isLabelVisible = true,\n      helpIcon,\n      size = sizes.default,\n      theme = themes.light,\n      isShort,\n      maxLength,\n      defaultValue,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const [onChange, onInvalid, error] = useInputValidation();\n    const [count, setCount] = React.useState(0);\n\n    React.useEffect(() => {\n      if (defaultValue) {\n        if (typeof defaultValue === 'string') {\n          setCount(defaultValue.length);\n        } else if (typeof defaultValue === 'number') {\n          setCount(defaultValue);\n        }\n      }\n    }, [restProps]);\n\n    return (\n      <label className=\"text-area\">\n        <div className=\"text-area__wrapper\">\n          {isLabelVisible ? (\n            <div className=\"text-area__header\">\n              <Text\n                theme={Text.themes.emphasis}\n                size={\n                  size === sizes.default ? Text.sizes.basic : Text.sizes.small\n                }\n                className={cn('text-area__label', {\n                  [`text-area__label--theme-${theme}-disabled`]: disabled,\n                  [`text-area__label--theme-${theme}`]: theme,\n                })}\n              >\n                {label}\n                {required ? (\n                  <span\n                    className={cn('text-area__asterisk', {\n                      [`text-area__asterisk--theme-${theme}-disabled`]:\n                        disabled,\n                      [`text-area__asterisk--theme-${theme}`]: theme,\n                    })}\n                  >\n                    *\n                  </span>\n                ) : null}\n                {children}\n              </Text>\n              {maxLength ? (\n                <Text className=\"text-area__max\" size={Text.sizes.small}>\n                  {count}/{maxLength}\n                </Text>\n              ) : null}\n            </div>\n          ) : null}\n          <textarea\n            className={cn('text-area__input', {\n              [`text-area__input--theme-${theme}`]: theme,\n              [`text-area__input--theme-${theme}-error`]: error,\n              [`text-area__input--size-${size}-short`]: isShort,\n              [`text-area__input--size-${size}`]: size,\n            })}\n            aria-label={isLabelVisible ? label : undefined}\n            name={name}\n            maxLength={maxLength}\n            ref={ref}\n            cols={1}\n            required={required}\n            defaultValue={defaultValue}\n            rows={isShort ? 1 : 2}\n            onChange={e => {\n              // NOTE: To not break compatibility\n              if (restProps.onChange) {\n                restProps.onChange(e);\n              }\n              onChange(e);\n              if (maxLength) {\n                setCount(e.target.value.length);\n              }\n            }}\n            onInvalid={e => {\n              // NOTE: To not break compatibility\n              if (restProps.onInvalid) restProps.onInvalid(e);\n              onInvalid(e);\n            }}\n            placeholder={placeholder}\n            disabled={disabled}\n            {...restProps}\n          />\n        </div>\n\n        {helpText ? (\n          <div className=\"text-area__help\">\n            <Text\n              size={Text.sizes.interface}\n              className={cn('text-area__help-text', {\n                [`text-area__help-text--theme-${theme}-error`]: error,\n                [`text-area__help-text--theme-${theme}`]: theme,\n              })}\n            >\n              {helpIcon ? helpIcon : null}\n              {helpText}\n            </Text>\n          </div>\n        ) : null}\n\n        {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}\n        {error && (\n          <div aria-hidden=\"true\" className=\"text-area__error\">\n            <Text>{error}</Text>\n          </div>\n        )}\n      </label>\n    );\n  },\n);\n\n// NOTE: If this isn't set, stack traces say \"forwardRef\" instead of \"TextArea\"\nRefTextArea.displayName = 'TextArea';\n// NOTE: The component is redeclared here because TypeScript doesn't accept assigning extra properties to `RefComponent` when it's declared\n\nconst TextArea: typeof RefTextArea & {\n  themes: typeof themes;\n  sizes: typeof sizes;\n} = Object.assign(RefTextArea, { themes, sizes });\n\nexport default TextArea;\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client';\n\nimport cn from 'classnames';\nimport * as React from 'react';\n\nimport Text from '../text';\nimport useInputValidation from '../use-input-validation';\n\nimport { TextArea as Props, themes, sizes } from './text-area.types';\n\nconst RefTextArea = React.forwardRef<\n  HTMLTextAreaElement,\n  React.PropsWithChildren<Props>\n>(\n  (\n    {\n      children,\n      helpText,\n      label,\n      name,\n      placeholder,\n      disabled,\n      required,\n      isLabelVisible = true,\n      helpIcon,\n      size = sizes.default,\n      theme = themes.light,\n      isShort,\n      maxLength,\n      defaultValue,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const [onChange, onInvalid, error] = useInputValidation();\n    const [count, setCount] = React.useState(0);\n\n    React.useEffect(() => {\n      if (defaultValue) {\n        if (typeof defaultValue === 'string') {\n          setCount(defaultValue.length);\n        } else if (typeof defaultValue === 'number') {\n          setCount(defaultValue);\n        }\n      }\n    }, [restProps]);\n\n    return (\n      <label className=\"text-area\">\n        <div className=\"text-area__wrapper\">\n          {isLabelVisible ? (\n            <div className=\"text-area__header\">\n              <Text\n                theme={Text.themes.emphasis}\n                size={\n                  size === sizes.default ? Text.sizes.basic : Text.sizes.small\n                }\n                className={cn('text-area__label', {\n                  [`text-area__label--theme-${theme}-disabled`]: disabled,\n                  [`text-area__label--theme-${theme}`]: theme,\n                })}\n              >\n                {label}\n                {required ? (\n                  <span\n                    className={cn('text-area__asterisk', {\n                      [`text-area__asterisk--theme-${theme}-disabled`]:\n                        disabled,\n                      [`text-area__asterisk--theme-${theme}`]: theme,\n                    })}\n                  >\n                    *\n                  </span>\n                ) : null}\n                {children}\n              </Text>\n              {maxLength ? (\n                <Text className=\"text-area__max\" size={Text.sizes.small}>\n                  {count}/{maxLength}\n                </Text>\n              ) : null}\n            </div>\n          ) : null}\n          <textarea\n            className={cn('text-area__input', {\n              [`text-area__input--theme-${theme}`]: theme,\n              [`text-area__input--theme-${theme}-error`]: error,\n              [`text-area__input--size-${size}-short`]: isShort,\n              [`text-area__input--size-${size}`]: size,\n            })}\n            aria-label={isLabelVisible ? label : undefined}\n            name={name}\n            maxLength={maxLength}\n            ref={ref}\n            cols={1}\n            required={required}\n            defaultValue={defaultValue}\n            rows={isShort ? 1 : 2}\n            onChange={e => {\n              // NOTE: To not break compatibility\n              if (restProps.onChange) {\n                restProps.onChange(e);\n              }\n              onChange(e);\n              if (maxLength) {\n                setCount(e.target.value.length);\n              }\n            }}\n            onInvalid={e => {\n              // NOTE: To not break compatibility\n              if (restProps.onInvalid) restProps.onInvalid(e);\n              onInvalid(e);\n            }}\n            placeholder={placeholder}\n            disabled={disabled}\n            {...restProps}\n          />\n        </div>\n\n        {helpText ? (\n          <div className=\"text-area__help\">\n            <Text\n              size={Text.sizes.interface}\n              className={cn('text-area__help-text', {\n                [`text-area__help-text--theme-${theme}-error`]: error,\n                [`text-area__help-text--theme-${theme}`]: theme,\n              })}\n            >\n              {helpIcon ? helpIcon : null}\n              {helpText}\n            </Text>\n          </div>\n        ) : null}\n\n        {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}\n        {error && (\n          <div aria-hidden=\"true\" className=\"text-area__error\">\n            <Text>{error}</Text>\n          </div>\n        )}\n      </label>\n    );\n  },\n);\n\n// NOTE: If this isn't set, stack traces say \"forwardRef\" instead of \"TextArea\"\nRefTextArea.displayName = 'TextArea';\n// NOTE: The component is redeclared here because TypeScript doesn't accept assigning extra properties to `RefComponent` when it's declared\n\nconst TextArea: typeof RefTextArea & {\n  themes: typeof themes;\n  sizes: typeof sizes;\n} = Object.assign(RefTextArea, { themes, sizes });\n\nexport default TextArea;\n"],
+  "mappings": "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",
   "names": ["cn", "React", "Text", "useInputValidation", "themes", "sizes", "RefTextArea", "_a", "ref", "_b", "children", "helpText", "label", "name", "placeholder", "disabled", "required", "isLabelVisible", "helpIcon", "size", "theme", "isShort", "maxLength", "defaultValue", "restProps", "__objRest", "onChange", "onInvalid", "error", "count", "setCount", "__spreadValues", "e", "TextArea", "text_area_default"]
 }

package/react/text-input/text-input.js

@@ -1,2 +1,2 @@
-var F=Object.defineProperty;var m=Object.getOwnPropertySymbols;var w=Object.prototype.hasOwnProperty,S=Object.prototype.propertyIsEnumerable;var I=(i,e,s)=>e in i?F(i,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):i[e]=s,k=(i,e)=>{for(var s in e||(e={}))w.call(e,s)&&I(i,s,e[s]);if(m)for(var s of m(e))S.call(e,s)&&I(i,s,e[s]);return i};var C=(i,e)=>{var s={};for(var n in i)w.call(i,n)&&e.indexOf(n)<0&&(s[n]=i[n]);if(i!=null&&m)for(var n of m(i))e.indexOf(n)<0&&S.call(i,n)&&(s[n]=i[n]);return s};import G from"classnames";import*as t from"react";import p from"../text";import J from"../use-input-validation";import K from"../icons/16/info";import L from"../icons/16/error";import{themes as _,variants as l}from"./text-input.types";import{useEffect as M}from"react";const E=t.forwardRef((U,q)=>{var b=U,{customErrorMessages:i,defaultValue:e,disabled:s,hasError:n,helpText:h,label:N,leadingIcon:o,maxLength:a,name:O,onChange:j=()=>{},placeholder:H,required:c,theme:z,trailingIcon:d,type:P="text",variant:u=l.large}=b,T=C(b,["customErrorMessages","defaultValue","disabled","hasError","helpText","label","leadingIcon","maxLength","name","onChange","placeholder","required","theme","trailingIcon","type","variant"]);const[A,f]=t.useState(0),[g,y]=t.useState(n),[B,D,x]=J(i,i?i.defaultError:void 0,g),v=a?a>0:void 0;return t.useEffect(()=>{e&&(typeof e=="string"?f(e.length):typeof e=="number"&&f(e))},[T]),M(()=>{y(n)},[n]),t.createElement("label",{className:G("text-input",{"text-input--theme-dark":z===_.dark,"text-input--theme-light":z===_.light,"text-input--disabled":s,"text-input--error":x||g,"text-input--icon":o||d,"text-input--variant-small":u===l.small,"text-input--variant-large":u===l.large})},t.createElement("div",{className:"text-input__wrapper"},t.createElement("div",{className:"text-input__label-wrapper"},t.createElement(p,{className:"text-input__label",theme:p.themes.emphasis,size:u===l.small?p.sizes.small:p.sizes.basic},N,c?t.createElement("span",{className:"text-input__asterisk"},"*"):null),v?t.createElement("div",{className:"text-input__length-counter"},t.createElement(p,{size:u===l.small?p.sizes.small:p.sizes.basic},A,"/",a)):null),t.createElement("div",{className:"text-input__input-wrapper"},o?t.createElement("div",{className:"text-input__icon"},o):null,t.createElement("input",k({className:"text-input__input",defaultValue:e,disabled:s,required:c,name:O,maxLength:v?a:void 0,onInvalid:r=>D(r),onChange:r=>{j(r),B(r),y(!1),v&&f(r.target.value.length)},placeholder:H,ref:q,type:P,"aria-label":N},T)),d?t.createElement("div",{className:"text-input__icon"},d):null),h?t.createElement("div",{className:"text-input__help"},t.createElement(K,null),t.createElement(p,{size:p.sizes.interface},h)):null,x?t.createElement("div",{"aria-hidden":"true",className:"text-input__error"},t.createElement(L,null),t.createElement(p,{size:p.sizes.interface},x)):null))});E.displayName="TextInput";const Q=Object.assign(E,{themes:_,variants:l});var it=Q;export{it as default};
+"use client";var F=Object.defineProperty;var m=Object.getOwnPropertySymbols;var w=Object.prototype.hasOwnProperty,S=Object.prototype.propertyIsEnumerable;var I=(i,e,s)=>e in i?F(i,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):i[e]=s,k=(i,e)=>{for(var s in e||(e={}))w.call(e,s)&&I(i,s,e[s]);if(m)for(var s of m(e))S.call(e,s)&&I(i,s,e[s]);return i};var C=(i,e)=>{var s={};for(var n in i)w.call(i,n)&&e.indexOf(n)<0&&(s[n]=i[n]);if(i!=null&&m)for(var n of m(i))e.indexOf(n)<0&&S.call(i,n)&&(s[n]=i[n]);return s};import G from"classnames";import*as t from"react";import l from"../text";import J from"../use-input-validation";import K from"../icons/16/info";import L from"../icons/16/error";import{themes as _,variants as p}from"./text-input.types";import{useEffect as M}from"react";const E=t.forwardRef((U,q)=>{var b=U,{customErrorMessages:i,defaultValue:e,disabled:s,hasError:n,helpText:h,label:N,leadingIcon:o,maxLength:a,name:O,onChange:j=()=>{},placeholder:H,required:c,theme:z,trailingIcon:d,type:P="text",variant:u=p.large}=b,T=C(b,["customErrorMessages","defaultValue","disabled","hasError","helpText","label","leadingIcon","maxLength","name","onChange","placeholder","required","theme","trailingIcon","type","variant"]);const[A,f]=t.useState(0),[g,y]=t.useState(n),[B,D,x]=J(i,i?i.defaultError:void 0,g),v=a?a>0:void 0;return t.useEffect(()=>{e&&(typeof e=="string"?f(e.length):typeof e=="number"&&f(e))},[T]),M(()=>{y(n)},[n]),t.createElement("label",{className:G("text-input",{"text-input--theme-dark":z===_.dark,"text-input--theme-light":z===_.light,"text-input--disabled":s,"text-input--error":x||g,"text-input--icon":o||d,"text-input--variant-small":u===p.small,"text-input--variant-large":u===p.large})},t.createElement("div",{className:"text-input__wrapper"},t.createElement("div",{className:"text-input__label-wrapper"},t.createElement(l,{className:"text-input__label",theme:l.themes.emphasis,size:u===p.small?l.sizes.small:l.sizes.basic},N,c?t.createElement("span",{className:"text-input__asterisk"},"*"):null),v?t.createElement("div",{className:"text-input__length-counter"},t.createElement(l,{size:u===p.small?l.sizes.small:l.sizes.basic},A,"/",a)):null),t.createElement("div",{className:"text-input__input-wrapper"},o?t.createElement("div",{className:"text-input__icon"},o):null,t.createElement("input",k({className:"text-input__input",defaultValue:e,disabled:s,required:c,name:O,maxLength:v?a:void 0,onInvalid:r=>D(r),onChange:r=>{j(r),B(r),y(!1),v&&f(r.target.value.length)},placeholder:H,ref:q,type:P,"aria-label":N},T)),d?t.createElement("div",{className:"text-input__icon"},d):null),h?t.createElement("div",{className:"text-input__help"},t.createElement(K,null),t.createElement(l,{size:l.sizes.interface},h)):null,x?t.createElement("div",{"aria-hidden":"true",className:"text-input__error"},t.createElement(L,null),t.createElement(l,{size:l.sizes.interface},x)):null))});E.displayName="TextInput";const Q=Object.assign(E,{themes:_,variants:p});var it=Q;export{it as default};
 //# sourceMappingURL=text-input.js.map

package/react/text-input/text-input.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/text-input/text-input.tsx"],
-  "sourcesContent": ["import cn from 'classnames';\nimport * as React from 'react';\n\nimport Text from '../text';\nimport useInputValidation from '../use-input-validation';\nimport SvgInfo from '../icons/16/info';\nimport SvgError from '../icons/16/error';\n\nimport { themes, variants, TextInput as Props } from './text-input.types';\nimport { useEffect } from 'react';\n\nconst RefTextInput = React.forwardRef<HTMLInputElement, Props>(\n  (\n    {\n      customErrorMessages,\n      defaultValue,\n      disabled,\n      hasError,\n      helpText,\n      label,\n      leadingIcon,\n      maxLength,\n      name,\n      onChange = () => {},\n      placeholder,\n      required,\n      theme,\n      trailingIcon,\n      type = 'text',\n      variant = variants.large,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const [count, setCount] = React.useState(0);\n    const [isError, setIsError] = React.useState(hasError);\n    const [validationOnChange, onInvalid, error] = useInputValidation(\n      customErrorMessages,\n      customErrorMessages ? customErrorMessages.defaultError : undefined,\n      isError,\n    );\n    const isMaxLengthValid = maxLength ? maxLength > 0 : undefined;\n\n    React.useEffect(() => {\n      if (defaultValue) {\n        if (typeof defaultValue === 'string') {\n          setCount(defaultValue.length);\n        } else if (typeof defaultValue === 'number') {\n          setCount(defaultValue);\n        }\n      }\n    }, [restProps]);\n\n    useEffect(() => {\n      setIsError(hasError);\n    }, [hasError]);\n\n    return (\n      <label\n        className={cn('text-input', {\n          'text-input--theme-dark': theme === themes.dark,\n          'text-input--theme-light': theme === themes.light,\n          'text-input--disabled': disabled,\n          'text-input--error': error || isError,\n          'text-input--icon': leadingIcon || trailingIcon,\n          'text-input--variant-small': variant === variants.small,\n          'text-input--variant-large': variant === variants.large,\n        })}\n      >\n        <div className=\"text-input__wrapper\">\n          <div className=\"text-input__label-wrapper\">\n            <Text\n              className=\"text-input__label\"\n              theme={Text.themes.emphasis}\n              size={\n                variant === variants.small ? Text.sizes.small : Text.sizes.basic\n              }\n            >\n              {label}\n              {required ? (\n                <span className=\"text-input__asterisk\">*</span>\n              ) : null}\n            </Text>\n            {isMaxLengthValid ? (\n              <div className=\"text-input__length-counter\">\n                <Text\n                  size={\n                    variant === variants.small\n                      ? Text.sizes.small\n                      : Text.sizes.basic\n                  }\n                >\n                  {count}/{maxLength}\n                </Text>\n              </div>\n            ) : null}\n          </div>\n\n          <div className=\"text-input__input-wrapper\">\n            {leadingIcon ? (\n              <div className=\"text-input__icon\">{leadingIcon}</div>\n            ) : null}\n            <input\n              className=\"text-input__input\"\n              defaultValue={defaultValue}\n              disabled={disabled}\n              required={required}\n              name={name}\n              maxLength={isMaxLengthValid ? maxLength : undefined}\n              onInvalid={e => onInvalid(e)}\n              onChange={e => {\n                onChange(e);\n                validationOnChange(e);\n                setIsError(false); // NOTE: We want to reset error state on change to not confuse users.\n                if (isMaxLengthValid) {\n                  setCount(e.target.value.length);\n                }\n              }}\n              placeholder={placeholder}\n              ref={ref}\n              type={type}\n              aria-label={label}\n              {...restProps}\n            />\n            {trailingIcon ? (\n              <div className=\"text-input__icon\">{trailingIcon}</div>\n            ) : null}\n          </div>\n          {helpText ? (\n            <div className=\"text-input__help\">\n              <SvgInfo />\n              <Text size={Text.sizes.interface}>{helpText}</Text>\n            </div>\n          ) : null}\n          {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}\n          {error ? (\n            <div aria-hidden=\"true\" className=\"text-input__error\">\n              <SvgError />\n              <Text size={Text.sizes.interface}>{error}</Text>\n            </div>\n          ) : null}\n        </div>\n      </label>\n    );\n  },\n);\n\n// NOTE: If this isn't set, stack traces say \"forwardRef\" instead of \"TextInput\"\nRefTextInput.displayName = 'TextInput';\n\nconst TextInput: typeof RefTextInput & {\n  themes: typeof themes;\n  variants: typeof variants;\n} = Object.assign(RefTextInput, { themes, variants });\n\nexport default TextInput;\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client';\n\nimport cn from 'classnames';\nimport * as React from 'react';\n\nimport Text from '../text';\nimport useInputValidation from '../use-input-validation';\nimport SvgInfo from '../icons/16/info';\nimport SvgError from '../icons/16/error';\n\nimport { themes, variants, TextInput as Props } from './text-input.types';\nimport { useEffect } from 'react';\n\nconst RefTextInput = React.forwardRef<HTMLInputElement, Props>(\n  (\n    {\n      customErrorMessages,\n      defaultValue,\n      disabled,\n      hasError,\n      helpText,\n      label,\n      leadingIcon,\n      maxLength,\n      name,\n      onChange = () => {},\n      placeholder,\n      required,\n      theme,\n      trailingIcon,\n      type = 'text',\n      variant = variants.large,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const [count, setCount] = React.useState(0);\n    const [isError, setIsError] = React.useState(hasError);\n    const [validationOnChange, onInvalid, error] = useInputValidation(\n      customErrorMessages,\n      customErrorMessages ? customErrorMessages.defaultError : undefined,\n      isError,\n    );\n    const isMaxLengthValid = maxLength ? maxLength > 0 : undefined;\n\n    React.useEffect(() => {\n      if (defaultValue) {\n        if (typeof defaultValue === 'string') {\n          setCount(defaultValue.length);\n        } else if (typeof defaultValue === 'number') {\n          setCount(defaultValue);\n        }\n      }\n    }, [restProps]);\n\n    useEffect(() => {\n      setIsError(hasError);\n    }, [hasError]);\n\n    return (\n      <label\n        className={cn('text-input', {\n          'text-input--theme-dark': theme === themes.dark,\n          'text-input--theme-light': theme === themes.light,\n          'text-input--disabled': disabled,\n          'text-input--error': error || isError,\n          'text-input--icon': leadingIcon || trailingIcon,\n          'text-input--variant-small': variant === variants.small,\n          'text-input--variant-large': variant === variants.large,\n        })}\n      >\n        <div className=\"text-input__wrapper\">\n          <div className=\"text-input__label-wrapper\">\n            <Text\n              className=\"text-input__label\"\n              theme={Text.themes.emphasis}\n              size={\n                variant === variants.small ? Text.sizes.small : Text.sizes.basic\n              }\n            >\n              {label}\n              {required ? (\n                <span className=\"text-input__asterisk\">*</span>\n              ) : null}\n            </Text>\n            {isMaxLengthValid ? (\n              <div className=\"text-input__length-counter\">\n                <Text\n                  size={\n                    variant === variants.small\n                      ? Text.sizes.small\n                      : Text.sizes.basic\n                  }\n                >\n                  {count}/{maxLength}\n                </Text>\n              </div>\n            ) : null}\n          </div>\n\n          <div className=\"text-input__input-wrapper\">\n            {leadingIcon ? (\n              <div className=\"text-input__icon\">{leadingIcon}</div>\n            ) : null}\n            <input\n              className=\"text-input__input\"\n              defaultValue={defaultValue}\n              disabled={disabled}\n              required={required}\n              name={name}\n              maxLength={isMaxLengthValid ? maxLength : undefined}\n              onInvalid={e => onInvalid(e)}\n              onChange={e => {\n                onChange(e);\n                validationOnChange(e);\n                setIsError(false); // NOTE: We want to reset error state on change to not confuse users.\n                if (isMaxLengthValid) {\n                  setCount(e.target.value.length);\n                }\n              }}\n              placeholder={placeholder}\n              ref={ref}\n              type={type}\n              aria-label={label}\n              {...restProps}\n            />\n            {trailingIcon ? (\n              <div className=\"text-input__icon\">{trailingIcon}</div>\n            ) : null}\n          </div>\n          {helpText ? (\n            <div className=\"text-input__help\">\n              <SvgInfo />\n              <Text size={Text.sizes.interface}>{helpText}</Text>\n            </div>\n          ) : null}\n          {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}\n          {error ? (\n            <div aria-hidden=\"true\" className=\"text-input__error\">\n              <SvgError />\n              <Text size={Text.sizes.interface}>{error}</Text>\n            </div>\n          ) : null}\n        </div>\n      </label>\n    );\n  },\n);\n\n// NOTE: If this isn't set, stack traces say \"forwardRef\" instead of \"TextInput\"\nRefTextInput.displayName = 'TextInput';\n\nconst TextInput: typeof RefTextInput & {\n  themes: typeof themes;\n  variants: typeof variants;\n} = Object.assign(RefTextInput, { themes, variants });\n\nexport default TextInput;\n"],
+  "mappings": "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",
   "names": ["cn", "React", "Text", "useInputValidation", "SvgInfo", "SvgError", "themes", "variants", "useEffect", "RefTextInput", "_a", "ref", "_b", "customErrorMessages", "defaultValue", "disabled", "hasError", "helpText", "label", "leadingIcon", "maxLength", "name", "onChange", "placeholder", "required", "theme", "trailingIcon", "type", "variant", "restProps", "__objRest", "count", "setCount", "isError", "setIsError", "validationOnChange", "onInvalid", "error", "isMaxLengthValid", "__spreadValues", "e", "TextInput", "text_input_default"]
 }

package/react/toggle/toggle.js

@@ -1,2 +1,2 @@
-var w=Object.defineProperty;var r=Object.getOwnPropertySymbols;var m=Object.prototype.hasOwnProperty,s=Object.prototype.propertyIsEnumerable;var d=(o,n,e)=>n in o?w(o,n,{enumerable:!0,configurable:!0,writable:!0,value:e}):o[n]=e,p=(o,n)=>{for(var e in n||(n={}))m.call(n,e)&&d(o,e,n[e]);if(r)for(var e of r(n))s.call(n,e)&&d(o,e,n[e]);return o};var _=(o,n)=>{var e={};for(var t in o)m.call(o,t)&&n.indexOf(t)<0&&(e[t]=o[t]);if(o!=null&&r)for(var t of r(o))n.indexOf(t)<0&&s.call(o,t)&&(e[t]=o[t]);return e};import v from"classnames";import*as a from"react";import f from"../text";import P from"../use-input-validation";const b=a.forwardRef((k,I)=>{var i=k,{children:o,isLabelVisible:n=!0,label:e,labelPosition:t="right",name:u,value:h="",spaceBetween:N,testId:c}=i,l=_(i,["children","isLabelVisible","label","labelPosition","name","value","spaceBetween","testId"]);const[T,x,C]=P();return a.createElement("div",{className:v("toggle",{"toggle--error":C})},a.createElement("label",{className:v("toggle__content",{"toggle__content--space-between":N}),"data-testid":c},n&&t==="left"&&a.createElement("div",{className:"toggle__label"},a.createElement(f,null,e),o),a.createElement("div",{className:"toggle__button-wrap"},a.createElement("input",p({"aria-label":n?void 0:e,className:"toggle__input",type:"checkbox",name:u,onChange:g=>{l.onChange&&l.onChange(g),T(g)},onInvalid:g=>{l.onInvalid&&l.onInvalid(g),x(g)},ref:I,value:h},l)),a.createElement("span",{className:"toggle__slider"},a.createElement("div",{className:"toggle__slider-element"}))),n&&t==="right"&&a.createElement("div",{className:"toggle__label"},a.createElement(f,null,e),o)))});var q=b;export{q as default};
+"use client";var w=Object.defineProperty;var r=Object.getOwnPropertySymbols;var s=Object.prototype.hasOwnProperty,m=Object.prototype.propertyIsEnumerable;var d=(e,n,o)=>n in e?w(e,n,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[n]=o,p=(e,n)=>{for(var o in n||(n={}))s.call(n,o)&&d(e,o,n[o]);if(r)for(var o of r(n))m.call(n,o)&&d(e,o,n[o]);return e};var _=(e,n)=>{var o={};for(var t in e)s.call(e,t)&&n.indexOf(t)<0&&(o[t]=e[t]);if(e!=null&&r)for(var t of r(e))n.indexOf(t)<0&&m.call(e,t)&&(o[t]=e[t]);return o};import v from"classnames";import*as l from"react";import f from"../text";import P from"../use-input-validation";const b=l.forwardRef((k,I)=>{var i=k,{children:e,isLabelVisible:n=!0,label:o,labelPosition:t="right",name:u,value:c="",spaceBetween:h,testId:N}=i,a=_(i,["children","isLabelVisible","label","labelPosition","name","value","spaceBetween","testId"]);const[T,x,C]=P();return l.createElement("div",{className:v("toggle",{"toggle--error":C})},l.createElement("label",{className:v("toggle__content",{"toggle__content--space-between":h}),"data-testid":N},n&&t==="left"&&l.createElement("div",{className:"toggle__label"},l.createElement(f,null,o),e),l.createElement("div",{className:"toggle__button-wrap"},l.createElement("input",p({"aria-label":n?void 0:o,className:"toggle__input",type:"checkbox",name:u,onChange:g=>{a.onChange&&a.onChange(g),T(g)},onInvalid:g=>{a.onInvalid&&a.onInvalid(g),x(g)},ref:I,value:c},a)),l.createElement("span",{className:"toggle__slider"},l.createElement("div",{className:"toggle__slider-element"}))),n&&t==="right"&&l.createElement("div",{className:"toggle__label"},l.createElement(f,null,o),e)))});var q=b;export{q as default};
 //# sourceMappingURL=toggle.js.map

package/react/toggle/toggle.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/toggle/toggle.tsx"],
-  "sourcesContent": ["import cn from 'classnames';\nimport * as React from 'react';\n\nimport Text from '../text';\nimport useInputValidation from '../use-input-validation';\n\nimport { Toggle as Props } from './toggle.types';\n\nconst Toggle = React.forwardRef<\n  HTMLInputElement,\n  React.PropsWithChildren<Props>\n>(\n  (\n    {\n      children,\n      isLabelVisible = true,\n      label,\n      labelPosition = 'right',\n      name,\n      value = '',\n      spaceBetween,\n      testId,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [onChange, onInvalid, error] = useInputValidation();\n\n    return (\n      <div\n        className={cn('toggle', {\n          'toggle--error': error,\n        })}\n      >\n        <label\n          className={cn('toggle__content', {\n            'toggle__content--space-between': spaceBetween,\n          })}\n          data-testid={testId}\n        >\n          {isLabelVisible && labelPosition === 'left' && (\n            <div className=\"toggle__label\">\n              <Text>{label}</Text>\n              {children}\n            </div>\n          )}\n\n          <div className=\"toggle__button-wrap\">\n            <input\n              aria-label={isLabelVisible ? undefined : label}\n              className=\"toggle__input\"\n              type=\"checkbox\"\n              name={name}\n              onChange={e => {\n                // NOTE: If props specify an `onChange`, we need to call that too\n                if (rest.onChange) rest.onChange(e);\n                onChange(e);\n              }}\n              onInvalid={e => {\n                // NOTE: If props specify an `onInvalid`, we need to call that too\n                if (rest.onInvalid) rest.onInvalid(e);\n                onInvalid(e);\n              }}\n              ref={ref}\n              value={value}\n              {...rest}\n            />\n            <span className=\"toggle__slider\">\n              <div className=\"toggle__slider-element\"></div>\n            </span>\n          </div>\n\n          {isLabelVisible && labelPosition === 'right' && (\n            <div className=\"toggle__label\">\n              <Text>{label}</Text>\n              {children}\n            </div>\n          )}\n        </label>\n      </div>\n    );\n  },\n);\n\nexport default Toggle;\n"],
-  "mappings": "2fAAA,OAAOA,MAAQ,aACf,UAAYC,MAAW,QAEvB,OAAOC,MAAU,UACjB,OAAOC,MAAwB,0BAI/B,MAAMC,EAASH,EAAM,WAInB,CACEI,EAWAC,IACG,CAZH,IAAAC,EAAAF,EACE,UAAAG,EACA,eAAAC,EAAiB,GACjB,MAAAC,EACA,cAAAC,EAAgB,QAChB,KAAAC,EACA,MAAAC,EAAQ,GACR,aAAAC,EACA,OAAAC,CArBN,EAaIR,EASKS,EAAAC,EATLV,EASK,CARH,WACA,iBACA,QACA,gBACA,OACA,QACA,eACA,WAKF,KAAM,CAACW,EAAUC,EAAWC,CAAK,EAAIjB,EAAmB,EAExD,OACEF,EAAA,cAAC,OACC,UAAWD,EAAG,SAAU,CACtB,gBAAiBoB,CACnB,CAAC,GAEDnB,EAAA,cAAC,SACC,UAAWD,EAAG,kBAAmB,CAC/B,iCAAkCc,CACpC,CAAC,EACD,cAAaC,GAEZN,GAAkBE,IAAkB,QACnCV,EAAA,cAAC,OAAI,UAAU,iBACbA,EAAA,cAACC,EAAA,KAAMQ,CAAM,EACZF,CACH,EAGFP,EAAA,cAAC,OAAI,UAAU,uBACbA,EAAA,cAAC,QAAAoB,EAAA,CACC,aAAYZ,EAAiB,OAAYC,EACzC,UAAU,gBACV,KAAK,WACL,KAAME,EACN,SAAUU,GAAK,CAETN,EAAK,UAAUA,EAAK,SAASM,CAAC,EAClCJ,EAASI,CAAC,CACZ,EACA,UAAWA,GAAK,CAEVN,EAAK,WAAWA,EAAK,UAAUM,CAAC,EACpCH,EAAUG,CAAC,CACb,EACA,IAAKhB,EACL,MAAOO,GACHG,EACN,EACAf,EAAA,cAAC,QAAK,UAAU,kBACdA,EAAA,cAAC,OAAI,UAAU,yBAAyB,CAC1C,CACF,EAECQ,GAAkBE,IAAkB,SACnCV,EAAA,cAAC,OAAI,UAAU,iBACbA,EAAA,cAACC,EAAA,KAAMQ,CAAM,EACZF,CACH,CAEJ,CACF,CAEJ,CACF,EAEA,IAAOe,EAAQnB",
+  "sourcesContent": ["'use client';\n\nimport cn from 'classnames';\nimport * as React from 'react';\n\nimport Text from '../text';\nimport useInputValidation from '../use-input-validation';\n\nimport { Toggle as Props } from './toggle.types';\n\nconst Toggle = React.forwardRef<\n  HTMLInputElement,\n  React.PropsWithChildren<Props>\n>(\n  (\n    {\n      children,\n      isLabelVisible = true,\n      label,\n      labelPosition = 'right',\n      name,\n      value = '',\n      spaceBetween,\n      testId,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [onChange, onInvalid, error] = useInputValidation();\n\n    return (\n      <div\n        className={cn('toggle', {\n          'toggle--error': error,\n        })}\n      >\n        <label\n          className={cn('toggle__content', {\n            'toggle__content--space-between': spaceBetween,\n          })}\n          data-testid={testId}\n        >\n          {isLabelVisible && labelPosition === 'left' && (\n            <div className=\"toggle__label\">\n              <Text>{label}</Text>\n              {children}\n            </div>\n          )}\n\n          <div className=\"toggle__button-wrap\">\n            <input\n              aria-label={isLabelVisible ? undefined : label}\n              className=\"toggle__input\"\n              type=\"checkbox\"\n              name={name}\n              onChange={e => {\n                // NOTE: If props specify an `onChange`, we need to call that too\n                if (rest.onChange) rest.onChange(e);\n                onChange(e);\n              }}\n              onInvalid={e => {\n                // NOTE: If props specify an `onInvalid`, we need to call that too\n                if (rest.onInvalid) rest.onInvalid(e);\n                onInvalid(e);\n              }}\n              ref={ref}\n              value={value}\n              {...rest}\n            />\n            <span className=\"toggle__slider\">\n              <div className=\"toggle__slider-element\"></div>\n            </span>\n          </div>\n\n          {isLabelVisible && labelPosition === 'right' && (\n            <div className=\"toggle__label\">\n              <Text>{label}</Text>\n              {children}\n            </div>\n          )}\n        </label>\n      </div>\n    );\n  },\n);\n\nexport default Toggle;\n"],
+  "mappings": "wgBAEA,OAAOA,MAAQ,aACf,UAAYC,MAAW,QAEvB,OAAOC,MAAU,UACjB,OAAOC,MAAwB,0BAI/B,MAAMC,EAASH,EAAM,WAInB,CACEI,EAWAC,IACG,CAZH,IAAAC,EAAAF,EACE,UAAAG,EACA,eAAAC,EAAiB,GACjB,MAAAC,EACA,cAAAC,EAAgB,QAChB,KAAAC,EACA,MAAAC,EAAQ,GACR,aAAAC,EACA,OAAAC,CAvBN,EAeIR,EASKS,EAAAC,EATLV,EASK,CARH,WACA,iBACA,QACA,gBACA,OACA,QACA,eACA,WAKF,KAAM,CAACW,EAAUC,EAAWC,CAAK,EAAIjB,EAAmB,EAExD,OACEF,EAAA,cAAC,OACC,UAAWD,EAAG,SAAU,CACtB,gBAAiBoB,CACnB,CAAC,GAEDnB,EAAA,cAAC,SACC,UAAWD,EAAG,kBAAmB,CAC/B,iCAAkCc,CACpC,CAAC,EACD,cAAaC,GAEZN,GAAkBE,IAAkB,QACnCV,EAAA,cAAC,OAAI,UAAU,iBACbA,EAAA,cAACC,EAAA,KAAMQ,CAAM,EACZF,CACH,EAGFP,EAAA,cAAC,OAAI,UAAU,uBACbA,EAAA,cAAC,QAAAoB,EAAA,CACC,aAAYZ,EAAiB,OAAYC,EACzC,UAAU,gBACV,KAAK,WACL,KAAME,EACN,SAAUU,GAAK,CAETN,EAAK,UAAUA,EAAK,SAASM,CAAC,EAClCJ,EAASI,CAAC,CACZ,EACA,UAAWA,GAAK,CAEVN,EAAK,WAAWA,EAAK,UAAUM,CAAC,EACpCH,EAAUG,CAAC,CACb,EACA,IAAKhB,EACL,MAAOO,GACHG,EACN,EACAf,EAAA,cAAC,QAAK,UAAU,kBACdA,EAAA,cAAC,OAAI,UAAU,yBAAyB,CAC1C,CACF,EAECQ,GAAkBE,IAAkB,SACnCV,EAAA,cAAC,OAAI,UAAU,iBACbA,EAAA,cAACC,EAAA,KAAMQ,CAAM,EACZF,CACH,CAEJ,CACF,CAEJ,CACF,EAEA,IAAOe,EAAQnB",
   "names": ["cn", "React", "Text", "useInputValidation", "Toggle", "_a", "ref", "_b", "children", "isLabelVisible", "label", "labelPosition", "name", "value", "spaceBetween", "testId", "rest", "__objRest", "onChange", "onInvalid", "error", "__spreadValues", "e", "toggle_default"]
 }