@foxford/ui 2.108.1 → 2.109.0

package/components/Input/Input.mjs

@@ -1,2 +1,2 @@
-import{forwardRef,useRef,useImperativeHandle,useMemo,useState,useLayoutEffect}from'react';import{useTheme}from'styled-components';import{nanoid}from'nanoid';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{SIZES_CONTROL,SIZES_ICON}from'./sizes.mjs';import{Root,IconButtonSeparated}from'./style.mjs';import{jsx,jsxs,Fragment}from'react/jsx-runtime';import{InputPhone}from'../Input.Phone/Input.Phone.mjs';import{SIZES}from'../FormInputLabel/sizes.mjs';import{FormInputLabel}from'../FormInputLabel/FormInputLabel.mjs';import{IconButton}from'../IconButton/IconButton.mjs';import{Minus}from'../../icon-pack/src/icons/Minus/index.mjs';import{Plus}from'../../icon-pack/src/icons/Plus/index.mjs';import{Icon}from'../Icon/Icon.mjs';import{FormInput}from'../FormInput/FormInput.mjs';const COMPONENT_NAME='Input';const Input=Object.assign(withMergedProps(forwardRef((o,r)=>{const t=useTheme();const{size:n="m",rounded:e=!0,primary:i=!0,color:a="mineShaft",placeholderColor:s="silver",width:l=t.defaultInputControlsWidth,type:c="text",labelPosition:m="dynamic",iconProps:u={},controls:d={},addonButtonProps:g={},preset:p,className:f,style:b,sizeXXS:S,sizeXS:h,sizeS:X,sizeM:C,sizeL:L,sizeXL:v,sizeUnits:I,sizes:y,margin:R,marginXXS:k,marginXS:B,marginS:M,marginM:T,marginL:j,marginXL:x,marginTop:z,marginTopXXS:w,marginTopXS:P,marginTopS:F,marginTopM:E,marginTopL:O,marginTopXL:N,marginRight:D,marginRightXXS:A,marginRightXS:H,marginRightS:Z,marginRightM:_,marginRightL:U,marginRightXL:V,marginBottom:W,marginBottomXXS:q,marginBottomXS:G,marginBottomS:J,marginBottomM:K,marginBottomL:Q,marginBottomXL:Y,marginLeft:$,marginLeftXXS:oo,marginLeftXS:ro,marginLeftS:to,marginLeftM:no,marginLeftL:eo,marginLeftXL:io,palette:ao,widthXXS:so,widthXS:lo,widthS:co,widthM:mo,widthL:uo,widthXL:go,error:po,success:fo,label:bo,icon:So,text:ho,secondary:Xo,contrast:Co,onColored:Lo,fluid:vo,disabled:Io,inline:yo,inputRef:Ro,...ko}=o;const Bo={size:n,sizeXXS:S,sizeXS:h,sizeS:X,sizeM:C,sizeL:L,sizeXL:v};const Mo={color:Io?'content-disabled':'content-onmain-tertiary',sizes:SIZES_ICON,...Bo,...u};const{icon:To,buttonProps:jo={}}=d.additional??{};const[xo,zo=(jo.onClick?void 0:To)]=Array.isArray(So)?So:[So];const wo=g.icon??To;const Po=(g.onClick||jo.onClick)&&wo;const Fo=Boolean(ko.mask&&ko.alwaysShowMask);const Eo={color:ao.controlsColor,colorHover:ao.controlsColorHover,colorActive:ao.controlsColorActive,colorDisabled:ao.controlsColorDisabled,backgroundColor:ao.controlsBackgroundColor,backgroundColorHover:ao.controlsBackgroundColorHover,backgroundColorActive:ao.controlsBackgroundColorActive,backgroundColorDisabled:ao.controlsBackgroundColorDisabled};const Oo=useRef(null);useImperativeHandle(r,()=>Oo.current,[]);const No=useRef(null);const Do=useRef(null);const Ao=useRef(null);const Ho=useMemo(()=>nanoid(),[]);const[Zo,_o]=useState(()=>{if(Fo)return!0;const o=ko.value??ko.defaultValue;return typeof o=='string'&&o.length>0||typeof o=='number'});const[Uo,Vo]=useState(()=>{if(c!=='number'||ko.min===void 0)return!1;const{value:o=1/0,defaultValue:r=1/0}=ko;const t=typeof o=='number'?o:parseFloat(o);const n=typeof r=='number'?r:parseFloat(r);const e=typeof ko.min=='number'?ko.min:parseFloat(ko.min);return Math.min(t,n)<=e});const[Wo,qo]=useState(()=>{if(c!=='number'||ko.max===void 0)return!1;const{value:o=-1/0,defaultValue:r=-1/0}=ko;const t=typeof o=='number'?o:parseFloat(o);const n=typeof r=='number'?r:parseFloat(r);const e=typeof ko.max=='number'?ko.max:parseFloat(ko.max);return Math.max(t,n)>=e});return useLayoutEffect(()=>{Fo?_o(!0):ko.value!==void 0&&ko.value!==null&&Oo.current&&Oo.current!==document.activeElement&&_o(typeof ko.value=='string'&&ko.value.length>0||typeof ko.value=='number')},[Fo,ko.value]),p!=='brand'?jsx(Root,{...ko,inputRef:Ro??(o=>{Oo.current=o}),className:f,style:b,size:typeof n=='number'?n:void 0,rounded:e,color:a,placeholderColor:s,width:l,widthXXS:so,widthXS:lo,widthS:co,widthM:mo,widthL:uo,widthXL:go,error:po,type:c,fluid:vo,disabled:Io}):jsx(FormInputLabel,{...Bo,className:f,style:b,sizeUnits:I,sizes:y,margin:R,marginXXS:k,marginXS:B,marginS:M,marginM:T,marginL:j,marginXL:x,marginTop:z,marginTopXXS:w,marginTopXS:P,marginTopS:F,marginTopM:E,marginTopL:O,marginTopXL:N,marginRight:D,marginRightXXS:A,marginRightXS:H,marginRightS:Z,marginRightM:_,marginRightL:U,marginRightXL:V,marginBottom:W,marginBottomXXS:q,marginBottomXS:G,marginBottomS:J,marginBottomM:K,marginBottomL:Q,marginBottomXL:Y,marginLeft:$,marginLeftXXS:oo,marginLeftXS:ro,marginLeftS:to,marginLeftM:no,marginLeftL:eo,marginLeftXL:io,error:po,success:fo,text:ho,primary:i,secondary:Xo,contrast:Co,onColored:Lo,disabled:Io,inline:yo,palette:{color:Io?ao.colorDisabled:ao.color,backgroundColor:Io?ao.backgroundColorDisabled:ao.backgroundColor,backgroundColorHover:Io?ao.backgroundColorDisabled:ao.backgroundColorHover,borderColor:Io?ao.borderColorDisabled:ao.borderColor},onClick:()=>{Oo.current&&Oo.current.focus()},onFocus:o=>{o.target!==o.currentTarget&&_o(!0)},onPointerDown:o=>{o.target!==Oo.current&&o.target instanceof Node&&!No.current?.contains(o.target)&&!Do.current?.contains(o.target)&&!Ao.current?.contains(o.target)&&o.preventDefault()},onBlur:o=>{Fo||!Oo.current||o.currentTarget.contains(o.relatedTarget)||_o(Boolean(Oo.current.value))},input:jsx(FormInput,{...Bo,...ko,ref:Oo,type:c,disabled:Io,active:Zo,label:bo,labelId:Ho,labelPosition:m,palette:{color:ao.inputColor,placeholderColor:ao.inputPlaceholderColor,colorDisabled:ao.inputColorDisabled,placeholderColorDisabled:ao.inputPlaceholderColorDisabled},onChange:o=>{if(ko.onChange&&ko.onChange(o),c==='number'){const r=parseFloat(o.currentTarget.value);const t=r<=parseFloat(o.currentTarget.min);const n=r>=parseFloat(o.currentTarget.max);Vo(t),qo(n),(t||n)&&o.currentTarget.focus()}}}),addonLeft:xo?jsx(Icon,{preset:"brand",name:typeof xo=='string'?xo:void 0,icon:typeof xo!='string'?xo:void 0,...Mo}):null,addonRight:Po||zo?jsxs(Fragment,{children:[Po?jsx(IconButton,{ref:No,sizes:SIZES_CONTROL,palette:Eo,...Bo,...jo,...g,icon:wo,disabled:Io||g.disabled||jo.disabled,onClick:o=>{o.stopPropagation(),ko.readOnly||(g.onClick&&g.onClick(o),jo.onClick&&jo.onClick(o))}}):null,zo?jsx(Icon,{preset:"brand",name:typeof zo=='string'?zo:void 0,icon:typeof zo!='string'?zo:void 0,...Mo}):null]}):null,controls:c==='number'?jsxs(Fragment,{children:[jsx(IconButton,{...Bo,ref:Do,icon:jsx(Minus,{}),sizes:SIZES_CONTROL,palette:Eo,disabled:Io||Uo,onClick:o=>{if(o.stopPropagation(),!ko.readOnly)try{if(Oo.current){_o(!0);const o=Oo.current.value;if(Oo.current.stepDown(),o!==Oo.current.value){const o=new Event('input',{bubbles:!0});Oo.current.dispatchEvent(o)}}}catch(o){console.error(o)}}}),jsx(IconButtonSeparated,{...Bo,ref:Ao,icon:jsx(Plus,{}),sizes:SIZES_CONTROL,palette:Eo,disabled:Io||Wo,onClick:o=>{if(o.stopPropagation(),!ko.readOnly)try{if(Oo.current){_o(!0);const o=Oo.current.value;if(Oo.current.stepUp(),o!==Oo.current.value){const o=new Event('input',{bubbles:!0});Oo.current.dispatchEvent(o)}}}catch(o){console.error(o)}}})]}):void 0})}),{sizes:SIZES,displayName:"Input"}),{Phone:InputPhone});export{COMPONENT_NAME,Input};
+import{forwardRef,useRef,useImperativeHandle,useMemo,useState,useLayoutEffect}from'react';import{useTheme}from'styled-components';import{nanoid}from'nanoid';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{SIZES}from'./sizes.mjs';import{Root,NumberControls}from'./style.mjs';import{jsx,jsxs,Fragment}from'react/jsx-runtime';import{InputPhone}from'../Input.Phone/Input.Phone.mjs';import{FormInputLabel}from'../FormInputLabel/FormInputLabel.mjs';import{Slot}from'../Slot/Slot.mjs';import{IconButton}from'../IconButton/IconButton.mjs';import{Icon}from'../Icon/Icon.mjs';import{Minus}from'../../icon-pack/src/icons/Minus/index.mjs';import{Plus}from'../../icon-pack/src/icons/Plus/index.mjs';import{FormInput}from'../FormInput/FormInput.mjs';const COMPONENT_NAME='Input';const Input=Object.assign(withMergedProps(forwardRef((o,r)=>{const t=useTheme();const{size:n="m",rounded:e=!0,primary:i=!0,color:a="mineShaft",placeholderColor:s="silver",width:l=t.defaultInputControlsWidth,type:c="text",labelPosition:m="dynamic",iconProps:u={},controls:g={},addonButtonProps:d={},addonLeft:p,addonRight:f,preset:b,className:h,style:S,sizeXXS:X,sizeXS:C,sizeS:L,sizeM:v,sizeL:y,sizeXL:I,sizeUnits:B,sizes:k,margin:P,marginXXS:j,marginXS:x,marginS:M,marginM:R,marginL:w,marginXL:T,marginTop:z,marginTopXXS:F,marginTopXS:D,marginTopS:E,marginTopM:N,marginTopL:A,marginTopXL:H,marginRight:O,marginRightXXS:U,marginRightXS:V,marginRightS:Z,marginRightM:_,marginRightL:W,marginRightXL:q,marginBottom:G,marginBottomXXS:J,marginBottomXS:K,marginBottomS:Q,marginBottomM:Y,marginBottomL:$,marginBottomXL:oo,marginLeft:ro,marginLeftXXS:to,marginLeftXS:no,marginLeftS:eo,marginLeftM:io,marginLeftL:ao,marginLeftXL:so,palette:lo,widthXXS:co,widthXS:mo,widthS:uo,widthM:go,widthL:po,widthXL:fo,error:bo,success:ho,label:So,icon:Xo,text:Co,secondary:Lo,contrast:vo,onColored:yo,fluid:Io,disabled:Bo,inline:ko,inputRef:Po,...jo}=o;const xo={size:n,sizeXXS:X,sizeXS:C,sizeS:L,sizeM:v,sizeL:y,sizeXL:I};const{icon:Mo,buttonProps:Ro={}}=g.additional??{};const[wo,To=(Ro.onClick?void 0:Mo)]=Array.isArray(Xo)?Xo:[Xo];const zo=d.icon??Mo;const Fo=(d.onClick||Ro.onClick)&&zo;const Do=Boolean(jo.mask&&jo.alwaysShowMask);const Eo={color:lo.controlsColor,colorHover:lo.controlsColorHover,colorActive:lo.controlsColorActive,colorDisabled:lo.controlsColorDisabled,backgroundColor:lo.controlsBackgroundColor,backgroundColorHover:lo.controlsBackgroundColorHover,backgroundColorActive:lo.controlsBackgroundColorActive,backgroundColorDisabled:lo.controlsBackgroundColorDisabled};const No=useRef(null);useImperativeHandle(r,()=>No.current,[]);const Ao=useRef(null);const Ho=useRef(null);const Oo=useRef(null);const Uo=useMemo(()=>nanoid(),[]);const[Vo,Zo]=useState(()=>{if(Do)return!0;const o=jo.value??jo.defaultValue;return typeof o=='string'&&o.length>0||typeof o=='number'});const[_o,Wo]=useState(()=>{if(c!=='number'||jo.min===void 0)return!1;const{value:o=1/0,defaultValue:r=1/0}=jo;const t=typeof o=='number'?o:parseFloat(o);const n=typeof r=='number'?r:parseFloat(r);const e=typeof jo.min=='number'?jo.min:parseFloat(jo.min);return Math.min(t,n)<=e});const[qo,Go]=useState(()=>{if(c!=='number'||jo.max===void 0)return!1;const{value:o=-1/0,defaultValue:r=-1/0}=jo;const t=typeof o=='number'?o:parseFloat(o);const n=typeof r=='number'?r:parseFloat(r);const e=typeof jo.max=='number'?jo.max:parseFloat(jo.max);return Math.max(t,n)>=e});return useLayoutEffect(()=>{Do?Zo(!0):jo.value!==void 0&&jo.value!==null&&No.current&&No.current!==document.activeElement&&Zo(typeof jo.value=='string'&&jo.value.length>0||typeof jo.value=='number')},[Do,jo.value]),b!=='brand'?jsx(Root,{...jo,inputRef:Po??(o=>{No.current=o}),className:h,style:S,size:typeof n=='number'?n:void 0,rounded:e,color:a,placeholderColor:s,width:l,widthXXS:co,widthXS:mo,widthS:uo,widthM:go,widthL:po,widthXL:fo,error:bo,type:c,fluid:Io,disabled:Bo}):jsx(FormInputLabel,{...xo,className:h,style:S,sizeUnits:B,sizes:k,margin:P,marginXXS:j,marginXS:x,marginS:M,marginM:R,marginL:w,marginXL:T,marginTop:z,marginTopXXS:F,marginTopXS:D,marginTopS:E,marginTopM:N,marginTopL:A,marginTopXL:H,marginRight:O,marginRightXXS:U,marginRightXS:V,marginRightS:Z,marginRightM:_,marginRightL:W,marginRightXL:q,marginBottom:G,marginBottomXXS:J,marginBottomXS:K,marginBottomS:Q,marginBottomM:Y,marginBottomL:$,marginBottomXL:oo,marginLeft:ro,marginLeftXXS:to,marginLeftXS:no,marginLeftS:eo,marginLeftM:io,marginLeftL:ao,marginLeftXL:so,error:bo,success:ho,text:Co,primary:i,secondary:Lo,contrast:vo,onColored:yo,disabled:Bo,inline:ko,palette:{color:Bo?lo.colorDisabled:lo.color,backgroundColor:Bo?lo.backgroundColorDisabled:lo.backgroundColor,backgroundColorHover:Bo?lo.backgroundColorDisabled:lo.backgroundColorHover,borderColor:Bo?lo.borderColorDisabled:lo.borderColor},onClick:()=>{No.current&&No.current.focus()},onFocus:o=>{o.target!==o.currentTarget&&Zo(!0)},onPointerDown:o=>{o.target!==No.current&&o.target instanceof Node&&!Ao.current?.contains(o.target)&&!Ho.current?.contains(o.target)&&!Oo.current?.contains(o.target)&&o.preventDefault()},onBlur:o=>{Do||!No.current||o.currentTarget.contains(o.relatedTarget)||Zo(Boolean(No.current.value))},input:jsx(FormInput,{...xo,...jo,ref:No,type:c,disabled:Bo,active:Vo,label:So,labelId:Uo,labelPosition:m,palette:{color:lo.inputColor,placeholderColor:lo.inputPlaceholderColor,colorDisabled:lo.inputColorDisabled,placeholderColorDisabled:lo.inputPlaceholderColorDisabled},onChange:o=>{if(jo.onChange&&jo.onChange(o),c==='number'){const r=parseFloat(o.currentTarget.value);const t=r<=parseFloat(o.currentTarget.min);const n=r>=parseFloat(o.currentTarget.max);Wo(t),Go(n),(t||n)&&o.currentTarget.focus()}}}),addonLeft:p??(wo?o=>jsx(Icon,{...o.iconProps,...u,name:typeof wo=='string'?wo:void 0,icon:typeof wo!='string'?wo:void 0}):void 0),addonRight:o=>jsxs(Fragment,{children:[jsx(Slot,{render:f,props:o,fallback:jsxs(Fragment,{children:[Fo?jsx(IconButton,{...o.iconButtonProps,ref:Ao,palette:Eo,...Ro,...d,icon:zo,disabled:Bo||d.disabled||Ro.disabled,onClick:o=>{o.stopPropagation(),jo.readOnly||(d.onClick&&d.onClick(o),Ro.onClick&&Ro.onClick(o))}}):null,To?jsx(Icon,{...o.iconProps,...u,name:typeof To=='string'?To:void 0,icon:typeof To!='string'?To:void 0,marginRight:c==='number'?0:o.iconProps.marginRight}):null]})}),c==='number'?jsxs(NumberControls,{children:[jsx(IconButton,{...o.iconButtonProps,ref:Ho,icon:jsx(Minus,{}),palette:Eo,disabled:Bo||_o,onClick:o=>{if(o.stopPropagation(),!jo.readOnly)try{if(No.current){Zo(!0);const o=No.current.value;if(No.current.stepDown(),o!==No.current.value){const o=new Event('input',{bubbles:!0});No.current.dispatchEvent(o)}}}catch(o){console.error(o)}}}),jsx(IconButton,{...o.iconButtonProps,ref:Oo,icon:jsx(Plus,{}),palette:Eo,disabled:Bo||qo,onClick:o=>{if(o.stopPropagation(),!jo.readOnly)try{if(No.current){Zo(!0);const o=No.current.value;if(No.current.stepUp(),o!==No.current.value){const o=new Event('input',{bubbles:!0});No.current.dispatchEvent(o)}}}catch(o){console.error(o)}}})]}):null]})})}),{sizes:SIZES,displayName:"Input"}),{Phone:InputPhone});export{COMPONENT_NAME,Input};
 //# sourceMappingURL=Input.mjs.map

package/components/Input/Input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Input.mjs","sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import { forwardRef, useState, useImperativeHandle, useRef, useLayoutEffect, useMemo } from 'react'\nimport { useTheme } from 'styled-components'\nimport { nanoid } from 'nanoid'\nimport { Minus, Plus } from '@foxford/icon-pack'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { FormInputLabel, SIZES } from 'components/FormInputLabel'\nimport { FormInput } from 'components/FormInput'\nimport { InputPhone } from 'components/Input.Phone'\nimport { IconButton } from 'components/IconButton'\nimport type { IconProps } from 'components/Icon'\nimport { Icon } from 'components/Icon'\nimport { SIZES_ICON, SIZES_CONTROL } from './sizes'\nimport * as Styled from './style'\nimport type { InputProps } from './types'\n\nconst COMPONENT_NAME = 'Input'\n\n/**\n *\n * Компонент для приема однострочного ввода.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<input\\> элемента.\n */\nconst Input: React.ForwardRefExoticComponent<InputProps> & { Phone: typeof InputPhone } = Object.assign(\n  withMergedProps<InputProps, HTMLInputElement>(\n    forwardRef<HTMLInputElement, MergedProps<InputProps>>((props, forwardedRef) => {\n      const theme = useTheme()\n\n      const {\n        size = 'm',\n        rounded = true,\n        primary = true,\n        color = 'mineShaft',\n        placeholderColor = 'silver',\n        width = theme.defaultInputControlsWidth,\n        type = 'text',\n        labelPosition = 'dynamic',\n        iconProps = {},\n        controls = {},\n        addonButtonProps = {},\n        preset,\n        className,\n        style,\n        sizeXXS,\n        sizeXS,\n        sizeS,\n        sizeM,\n        sizeL,\n        sizeXL,\n        sizeUnits,\n        sizes,\n        margin,\n        marginXXS,\n        marginXS,\n        marginS,\n        marginM,\n        marginL,\n        marginXL,\n        marginTop,\n        marginTopXXS,\n        marginTopXS,\n        marginTopS,\n        marginTopM,\n        marginTopL,\n        marginTopXL,\n        marginRight,\n        marginRightXXS,\n        marginRightXS,\n        marginRightS,\n        marginRightM,\n        marginRightL,\n        marginRightXL,\n        marginBottom,\n        marginBottomXXS,\n        marginBottomXS,\n        marginBottomS,\n        marginBottomM,\n        marginBottomL,\n        marginBottomXL,\n        marginLeft,\n        marginLeftXXS,\n        marginLeftXS,\n        marginLeftS,\n        marginLeftM,\n        marginLeftL,\n        marginLeftXL,\n        palette,\n        widthXXS,\n        widthXS,\n        widthS,\n        widthM,\n        widthL,\n        widthXL,\n        error,\n        success,\n        label,\n        icon,\n        text,\n        secondary,\n        contrast,\n        onColored,\n        fluid,\n        disabled,\n        inline,\n        inputRef,\n        ...inputProps\n      } = props\n\n      const sizeProps = {\n        size,\n        sizeXXS,\n        sizeXS,\n        sizeS,\n        sizeM,\n        sizeL,\n        sizeXL,\n      }\n\n      const baseIconProps: IconProps = {\n        color: disabled ? 'content-disabled' : 'content-onmain-tertiary',\n        sizes: SIZES_ICON,\n        ...sizeProps,\n        ...iconProps,\n      }\n\n      const { icon: additionalControlIcon, buttonProps: additionalControlButtonProps = {} } = controls.additional ?? {}\n\n      const [iconBefore, iconAfter = !additionalControlButtonProps.onClick ? additionalControlIcon : undefined] =\n        Array.isArray(icon) ? icon : [icon]\n\n      const addonControlIcon = addonButtonProps.icon ?? additionalControlIcon\n      const showAdditionalControl =\n        (addonButtonProps.onClick || additionalControlButtonProps.onClick) && addonControlIcon\n\n      const inputAlwaysActive = Boolean(inputProps.mask && inputProps.alwaysShowMask)\n\n      const controlPalette = {\n        color: palette.controlsColor,\n        colorHover: palette.controlsColorHover,\n        colorActive: palette.controlsColorActive,\n        colorDisabled: palette.controlsColorDisabled,\n        backgroundColor: palette.controlsBackgroundColor,\n        backgroundColorHover: palette.controlsBackgroundColorHover,\n        backgroundColorActive: palette.controlsBackgroundColorActive,\n        backgroundColorDisabled: palette.controlsBackgroundColorDisabled,\n      }\n\n      const ref = useRef<HTMLInputElement | null>(null)\n      useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(forwardedRef, () => ref.current, [])\n\n      const addonRef = useRef<HTMLButtonElement | null>(null)\n      const minusRef = useRef<HTMLButtonElement | null>(null)\n      const plusRef = useRef<HTMLButtonElement | null>(null)\n\n      const inputLabelId = useMemo(() => nanoid(), [])\n\n      const [inputActive, setInputActive] = useState(() => {\n        if (inputAlwaysActive) return true\n\n        const initValue = inputProps.value ?? inputProps.defaultValue\n\n        return (typeof initValue === 'string' && initValue.length > 0) || typeof initValue === 'number'\n      })\n\n      const [minusDisabled, setMinusDisabled] = useState(() => {\n        if (type !== 'number' || inputProps.min === undefined) return false\n\n        const { value = Infinity, defaultValue = Infinity } = inputProps\n\n        const initValue = typeof value === 'number' ? value : parseFloat(value)\n        const initDefaultValue = typeof defaultValue === 'number' ? defaultValue : parseFloat(defaultValue)\n        const minValue = typeof inputProps.min === 'number' ? inputProps.min : parseFloat(inputProps.min)\n\n        return Math.min(initValue, initDefaultValue) <= minValue\n      })\n\n      const [plusDisabled, setPlusDisabled] = useState(() => {\n        if (type !== 'number' || inputProps.max === undefined) return false\n\n        const { value = -Infinity, defaultValue = -Infinity } = inputProps\n\n        const initValue = typeof value === 'number' ? value : parseFloat(value)\n        const initDefaultValue = typeof defaultValue === 'number' ? defaultValue : parseFloat(defaultValue)\n        const maxValue = typeof inputProps.max === 'number' ? inputProps.max : parseFloat(inputProps.max)\n\n        return Math.max(initValue, initDefaultValue) >= maxValue\n      })\n\n      useLayoutEffect(() => {\n        if (inputAlwaysActive) {\n          setInputActive(true)\n        } else if (\n          inputProps.value !== undefined &&\n          inputProps.value !== null &&\n          ref.current &&\n          ref.current !== document.activeElement\n        ) {\n          setInputActive(\n            (typeof inputProps.value === 'string' && inputProps.value.length > 0) ||\n              typeof inputProps.value === 'number'\n          )\n        }\n      }, [inputAlwaysActive, inputProps.value])\n\n      if (preset !== 'brand') {\n        return (\n          <Styled.Root\n            {...inputProps}\n            inputRef={\n              inputRef ??\n              ((input) => {\n                ref.current = input\n              })\n            }\n            className={className}\n            style={style}\n            size={typeof size === 'number' ? size : undefined}\n            rounded={rounded}\n            color={color}\n            placeholderColor={placeholderColor}\n            width={width}\n            widthXXS={widthXXS}\n            widthXS={widthXS}\n            widthS={widthS}\n            widthM={widthM}\n            widthL={widthL}\n            widthXL={widthXL}\n            error={error}\n            type={type}\n            fluid={fluid}\n            disabled={disabled}\n          />\n        )\n      }\n\n      return (\n        <FormInputLabel\n          {...sizeProps}\n          className={className}\n          style={style}\n          sizeUnits={sizeUnits}\n          sizes={sizes}\n          margin={margin}\n          marginXXS={marginXXS}\n          marginXS={marginXS}\n          marginS={marginS}\n          marginM={marginM}\n          marginL={marginL}\n          marginXL={marginXL}\n          marginTop={marginTop}\n          marginTopXXS={marginTopXXS}\n          marginTopXS={marginTopXS}\n          marginTopS={marginTopS}\n          marginTopM={marginTopM}\n          marginTopL={marginTopL}\n          marginTopXL={marginTopXL}\n          marginRight={marginRight}\n          marginRightXXS={marginRightXXS}\n          marginRightXS={marginRightXS}\n          marginRightS={marginRightS}\n          marginRightM={marginRightM}\n          marginRightL={marginRightL}\n          marginRightXL={marginRightXL}\n          marginBottom={marginBottom}\n          marginBottomXXS={marginBottomXXS}\n          marginBottomXS={marginBottomXS}\n          marginBottomS={marginBottomS}\n          marginBottomM={marginBottomM}\n          marginBottomL={marginBottomL}\n          marginBottomXL={marginBottomXL}\n          marginLeft={marginLeft}\n          marginLeftXXS={marginLeftXXS}\n          marginLeftXS={marginLeftXS}\n          marginLeftS={marginLeftS}\n          marginLeftM={marginLeftM}\n          marginLeftL={marginLeftL}\n          marginLeftXL={marginLeftXL}\n          error={error}\n          success={success}\n          text={text}\n          primary={primary}\n          secondary={secondary}\n          contrast={contrast}\n          onColored={onColored}\n          disabled={disabled}\n          inline={inline}\n          palette={{\n            color: disabled ? palette.colorDisabled : palette.color,\n            backgroundColor: disabled ? palette.backgroundColorDisabled : palette.backgroundColor,\n            backgroundColorHover: disabled ? palette.backgroundColorDisabled : palette.backgroundColorHover,\n            borderColor: disabled ? palette.borderColorDisabled : palette.borderColor,\n          }}\n          onClick={() => {\n            if (ref.current) {\n              ref.current.focus()\n            }\n          }}\n          onFocus={(evt) => {\n            if (evt.target !== evt.currentTarget) {\n              setInputActive(true)\n            }\n          }}\n          onPointerDown={(evt) => {\n            if (\n              evt.target === ref.current ||\n              !(evt.target instanceof Node) ||\n              addonRef.current?.contains(evt.target) ||\n              minusRef.current?.contains(evt.target) ||\n              plusRef.current?.contains(evt.target)\n            ) {\n              return\n            }\n            evt.preventDefault()\n          }}\n          onBlur={(evt) => {\n            if (!inputAlwaysActive && ref.current && !evt.currentTarget.contains(evt.relatedTarget)) {\n              setInputActive(Boolean(ref.current.value))\n            }\n          }}\n          input={\n            <FormInput\n              {...sizeProps}\n              {...inputProps}\n              ref={ref}\n              type={type}\n              disabled={disabled}\n              active={inputActive}\n              label={label}\n              labelId={inputLabelId}\n              labelPosition={labelPosition}\n              palette={{\n                color: palette.inputColor,\n                placeholderColor: palette.inputPlaceholderColor,\n                colorDisabled: palette.inputColorDisabled,\n                placeholderColorDisabled: palette.inputPlaceholderColorDisabled,\n              }}\n              onChange={(evt) => {\n                if (inputProps.onChange) {\n                  inputProps.onChange(evt)\n                }\n\n                if (type === 'number') {\n                  const currentValue = parseFloat(evt.currentTarget.value)\n\n                  const minValueReached = currentValue <= parseFloat(evt.currentTarget.min)\n                  const maxValueReached = currentValue >= parseFloat(evt.currentTarget.max)\n\n                  setMinusDisabled(minValueReached)\n                  setPlusDisabled(maxValueReached)\n\n                  if (minValueReached || maxValueReached) {\n                    evt.currentTarget.focus()\n                  }\n                }\n              }}\n            />\n          }\n          addonLeft={\n            iconBefore ? (\n              <Icon\n                preset='brand'\n                name={typeof iconBefore === 'string' ? iconBefore : undefined}\n                icon={typeof iconBefore !== 'string' ? iconBefore : undefined}\n                {...baseIconProps}\n              />\n            ) : null\n          }\n          addonRight={\n            showAdditionalControl || iconAfter ? (\n              <>\n                {showAdditionalControl ? (\n                  <IconButton\n                    ref={addonRef}\n                    sizes={SIZES_CONTROL}\n                    palette={controlPalette}\n                    {...sizeProps}\n                    {...additionalControlButtonProps}\n                    {...addonButtonProps}\n                    icon={addonControlIcon}\n                    disabled={disabled || addonButtonProps.disabled || additionalControlButtonProps.disabled}\n                    onClick={(evt) => {\n                      evt.stopPropagation()\n                      if (inputProps.readOnly) return\n\n                      if (addonButtonProps.onClick) addonButtonProps.onClick(evt)\n                      if (additionalControlButtonProps.onClick) additionalControlButtonProps.onClick(evt)\n                    }}\n                  />\n                ) : null}\n                {iconAfter ? (\n                  <Icon\n                    preset='brand'\n                    name={typeof iconAfter === 'string' ? iconAfter : undefined}\n                    icon={typeof iconAfter !== 'string' ? iconAfter : undefined}\n                    {...baseIconProps}\n                  />\n                ) : null}\n              </>\n            ) : null\n          }\n          controls={\n            type === 'number' ? (\n              <>\n                <IconButton\n                  {...sizeProps}\n                  ref={minusRef}\n                  icon={<Minus />}\n                  sizes={SIZES_CONTROL}\n                  palette={controlPalette}\n                  disabled={disabled || minusDisabled}\n                  onClick={(evt) => {\n                    evt.stopPropagation()\n                    if (inputProps.readOnly) return\n\n                    try {\n                      if (ref.current) {\n                        setInputActive(true)\n\n                        const prev = ref.current.value\n                        ref.current.stepDown()\n\n                        const decremented = ref.current.value\n                        if (prev !== decremented) {\n                          const event = new Event('input', { bubbles: true })\n                          ref.current.dispatchEvent(event)\n                        }\n                      }\n                    } catch (err) {\n                      console.error(err)\n                    }\n                  }}\n                />\n                <Styled.IconButtonSeparated\n                  {...sizeProps}\n                  ref={plusRef}\n                  icon={<Plus />}\n                  sizes={SIZES_CONTROL}\n                  palette={controlPalette}\n                  disabled={disabled || plusDisabled}\n                  onClick={(evt) => {\n                    evt.stopPropagation()\n                    if (inputProps.readOnly) return\n\n                    try {\n                      if (ref.current) {\n                        setInputActive(true)\n\n                        const prev = ref.current.value\n                        ref.current.stepUp()\n\n                        const incremented = ref.current.value\n                        if (prev !== incremented) {\n                          const event = new Event('input', { bubbles: true })\n                          ref.current.dispatchEvent(event)\n                        }\n                      }\n                    } catch (err) {\n                      console.error(err)\n                    }\n                  }}\n                />\n              </>\n            ) : undefined\n          }\n        />\n      )\n    }),\n    {\n      sizes: SIZES,\n      displayName: COMPONENT_NAME,\n    }\n  ),\n  {\n    Phone: InputPhone,\n  }\n)\n\nexport { Input, COMPONENT_NAME }\n"],"names":["COMPONENT_NAME","Input","Object","assign","withMergedProps","forwardRef","props","forwardedRef","theme","useTheme","size","rounded","primary","color","placeholderColor","width","defaultInputControlsWidth","type","labelPosition","iconProps","controls","addonButtonProps","preset","className","style","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","sizeUnits","sizes","margin","marginXXS","marginXS","marginS","marginM","marginL","marginXL","marginTop","marginTopXXS","marginTopXS","marginTopS","marginTopM","marginTopL","marginTopXL","marginRight","marginRightXXS","marginRightXS","marginRightS","marginRightM","marginRightL","marginRightXL","marginBottom","marginBottomXXS","marginBottomXS","marginBottomS","marginBottomM","marginBottomL","marginBottomXL","marginLeft","marginLeftXXS","marginLeftXS","marginLeftS","marginLeftM","marginLeftL","marginLeftXL","palette","widthXXS","widthXS","widthS","widthM","widthL","widthXL","error","success","label","icon","text","secondary","contrast","onColored","fluid","disabled","inline","inputRef","inputProps","sizeProps","baseIconProps","SIZES_ICON","additionalControlIcon","buttonProps","additionalControlButtonProps","additional","iconBefore","iconAfter","onClick","undefined","Array","isArray","addonControlIcon","showAdditionalControl","inputAlwaysActive","Boolean","mask","alwaysShowMask","controlPalette","controlsColor","colorHover","controlsColorHover","colorActive","controlsColorActive","colorDisabled","controlsColorDisabled","backgroundColor","controlsBackgroundColor","backgroundColorHover","controlsBackgroundColorHover","backgroundColorActive","controlsBackgroundColorActive","backgroundColorDisabled","controlsBackgroundColorDisabled","ref","useRef","useImperativeHandle","current","addonRef","minusRef","plusRef","inputLabelId","useMemo","nanoid","inputActive","setInputActive","useState","initValue","value","defaultValue","length","minusDisabled","setMinusDisabled","min","Infinity","parseFloat","initDefaultValue","minValue","Math","plusDisabled","setPlusDisabled","max","maxValue","useLayoutEffect","document","activeElement","_jsx","Styled","input","FormInputLabel","borderColor","borderColorDisabled","focus","onFocus","evt","target","currentTarget","onPointerDown","Node","contains","preventDefault","onBlur","relatedTarget","FormInput","active","labelId","inputColor","inputPlaceholderColor","inputColorDisabled","placeholderColorDisabled","inputPlaceholderColorDisabled","onChange","currentValue","minValueReached","maxValueReached","addonLeft","Icon","name","addonRight","_jsxs","_Fragment","children","IconButton","SIZES_CONTROL","stopPropagation","readOnly","Minus","prev","stepDown","event","Event","bubbles","dispatchEvent","err","console","Plus","stepUp","SIZES","displayName","Phone","InputPhone"],"mappings":"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"}
+{"version":3,"file":"Input.mjs","sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import { forwardRef, useState, useImperativeHandle, useRef, useLayoutEffect, useMemo } from 'react'\nimport { useTheme } from 'styled-components'\nimport { nanoid } from 'nanoid'\nimport { Minus, Plus } from '@foxford/icon-pack'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { Slot } from 'components/Slot'\nimport { FormInputLabel } from 'components/FormInputLabel'\nimport { FormInput } from 'components/FormInput'\nimport { InputPhone } from 'components/Input.Phone'\nimport { IconButton } from 'components/IconButton'\nimport { Icon } from 'components/Icon'\nimport { SIZES } from './sizes'\nimport * as Styled from './style'\nimport type { InputProps } from './types'\n\nconst COMPONENT_NAME = 'Input'\n\n/**\n *\n * *v1.0.0*\n *\n * Контрол для приема однострочного ввода.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<input\\> элемента.\n */\nconst Input: React.ForwardRefExoticComponent<InputProps> & { Phone: typeof InputPhone } = Object.assign(\n  withMergedProps<InputProps, HTMLInputElement>(\n    forwardRef<HTMLInputElement, MergedProps<InputProps>>((props, forwardedRef) => {\n      const theme = useTheme()\n\n      const {\n        size = 'm',\n        rounded = true,\n        primary = true,\n        color = 'mineShaft',\n        placeholderColor = 'silver',\n        width = theme.defaultInputControlsWidth,\n        type = 'text',\n        labelPosition = 'dynamic',\n        iconProps = {},\n        controls = {},\n        addonButtonProps = {},\n        addonLeft,\n        addonRight,\n        preset,\n        className,\n        style,\n        sizeXXS,\n        sizeXS,\n        sizeS,\n        sizeM,\n        sizeL,\n        sizeXL,\n        sizeUnits,\n        sizes,\n        margin,\n        marginXXS,\n        marginXS,\n        marginS,\n        marginM,\n        marginL,\n        marginXL,\n        marginTop,\n        marginTopXXS,\n        marginTopXS,\n        marginTopS,\n        marginTopM,\n        marginTopL,\n        marginTopXL,\n        marginRight,\n        marginRightXXS,\n        marginRightXS,\n        marginRightS,\n        marginRightM,\n        marginRightL,\n        marginRightXL,\n        marginBottom,\n        marginBottomXXS,\n        marginBottomXS,\n        marginBottomS,\n        marginBottomM,\n        marginBottomL,\n        marginBottomXL,\n        marginLeft,\n        marginLeftXXS,\n        marginLeftXS,\n        marginLeftS,\n        marginLeftM,\n        marginLeftL,\n        marginLeftXL,\n        palette,\n        widthXXS,\n        widthXS,\n        widthS,\n        widthM,\n        widthL,\n        widthXL,\n        error,\n        success,\n        label,\n        icon,\n        text,\n        secondary,\n        contrast,\n        onColored,\n        fluid,\n        disabled,\n        inline,\n        inputRef,\n        ...inputProps\n      } = props\n\n      const sizeProps = {\n        size,\n        sizeXXS,\n        sizeXS,\n        sizeS,\n        sizeM,\n        sizeL,\n        sizeXL,\n      }\n\n      const { icon: additionalControlIcon, buttonProps: additionalControlButtonProps = {} } = controls.additional ?? {}\n\n      const [iconBefore, iconAfter = !additionalControlButtonProps.onClick ? additionalControlIcon : undefined] =\n        Array.isArray(icon) ? icon : [icon]\n\n      const addonControlIcon = addonButtonProps.icon ?? additionalControlIcon\n      const showAdditionalControl =\n        (addonButtonProps.onClick || additionalControlButtonProps.onClick) && addonControlIcon\n\n      const inputAlwaysActive = Boolean(inputProps.mask && inputProps.alwaysShowMask)\n\n      const controlPalette = {\n        color: palette.controlsColor,\n        colorHover: palette.controlsColorHover,\n        colorActive: palette.controlsColorActive,\n        colorDisabled: palette.controlsColorDisabled,\n        backgroundColor: palette.controlsBackgroundColor,\n        backgroundColorHover: palette.controlsBackgroundColorHover,\n        backgroundColorActive: palette.controlsBackgroundColorActive,\n        backgroundColorDisabled: palette.controlsBackgroundColorDisabled,\n      }\n\n      const ref = useRef<HTMLInputElement | null>(null)\n      useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(forwardedRef, () => ref.current, [])\n\n      const addonRef = useRef<HTMLButtonElement | null>(null)\n      const minusRef = useRef<HTMLButtonElement | null>(null)\n      const plusRef = useRef<HTMLButtonElement | null>(null)\n\n      const inputLabelId = useMemo(() => nanoid(), [])\n\n      const [inputActive, setInputActive] = useState(() => {\n        if (inputAlwaysActive) return true\n\n        const initValue = inputProps.value ?? inputProps.defaultValue\n\n        return (typeof initValue === 'string' && initValue.length > 0) || typeof initValue === 'number'\n      })\n\n      const [minusDisabled, setMinusDisabled] = useState(() => {\n        if (type !== 'number' || inputProps.min === undefined) return false\n\n        const { value = Infinity, defaultValue = Infinity } = inputProps\n\n        const initValue = typeof value === 'number' ? value : parseFloat(value)\n        const initDefaultValue = typeof defaultValue === 'number' ? defaultValue : parseFloat(defaultValue)\n        const minValue = typeof inputProps.min === 'number' ? inputProps.min : parseFloat(inputProps.min)\n\n        return Math.min(initValue, initDefaultValue) <= minValue\n      })\n\n      const [plusDisabled, setPlusDisabled] = useState(() => {\n        if (type !== 'number' || inputProps.max === undefined) return false\n\n        const { value = -Infinity, defaultValue = -Infinity } = inputProps\n\n        const initValue = typeof value === 'number' ? value : parseFloat(value)\n        const initDefaultValue = typeof defaultValue === 'number' ? defaultValue : parseFloat(defaultValue)\n        const maxValue = typeof inputProps.max === 'number' ? inputProps.max : parseFloat(inputProps.max)\n\n        return Math.max(initValue, initDefaultValue) >= maxValue\n      })\n\n      useLayoutEffect(() => {\n        if (inputAlwaysActive) {\n          setInputActive(true)\n        } else if (\n          inputProps.value !== undefined &&\n          inputProps.value !== null &&\n          ref.current &&\n          ref.current !== document.activeElement\n        ) {\n          setInputActive(\n            (typeof inputProps.value === 'string' && inputProps.value.length > 0) ||\n              typeof inputProps.value === 'number'\n          )\n        }\n      }, [inputAlwaysActive, inputProps.value])\n\n      if (preset !== 'brand') {\n        return (\n          <Styled.Root\n            {...inputProps}\n            inputRef={\n              inputRef ??\n              ((input) => {\n                ref.current = input\n              })\n            }\n            className={className}\n            style={style}\n            size={typeof size === 'number' ? size : undefined}\n            rounded={rounded}\n            color={color}\n            placeholderColor={placeholderColor}\n            width={width}\n            widthXXS={widthXXS}\n            widthXS={widthXS}\n            widthS={widthS}\n            widthM={widthM}\n            widthL={widthL}\n            widthXL={widthXL}\n            error={error}\n            type={type}\n            fluid={fluid}\n            disabled={disabled}\n          />\n        )\n      }\n\n      return (\n        <FormInputLabel\n          {...sizeProps}\n          className={className}\n          style={style}\n          sizeUnits={sizeUnits}\n          sizes={sizes}\n          margin={margin}\n          marginXXS={marginXXS}\n          marginXS={marginXS}\n          marginS={marginS}\n          marginM={marginM}\n          marginL={marginL}\n          marginXL={marginXL}\n          marginTop={marginTop}\n          marginTopXXS={marginTopXXS}\n          marginTopXS={marginTopXS}\n          marginTopS={marginTopS}\n          marginTopM={marginTopM}\n          marginTopL={marginTopL}\n          marginTopXL={marginTopXL}\n          marginRight={marginRight}\n          marginRightXXS={marginRightXXS}\n          marginRightXS={marginRightXS}\n          marginRightS={marginRightS}\n          marginRightM={marginRightM}\n          marginRightL={marginRightL}\n          marginRightXL={marginRightXL}\n          marginBottom={marginBottom}\n          marginBottomXXS={marginBottomXXS}\n          marginBottomXS={marginBottomXS}\n          marginBottomS={marginBottomS}\n          marginBottomM={marginBottomM}\n          marginBottomL={marginBottomL}\n          marginBottomXL={marginBottomXL}\n          marginLeft={marginLeft}\n          marginLeftXXS={marginLeftXXS}\n          marginLeftXS={marginLeftXS}\n          marginLeftS={marginLeftS}\n          marginLeftM={marginLeftM}\n          marginLeftL={marginLeftL}\n          marginLeftXL={marginLeftXL}\n          error={error}\n          success={success}\n          text={text}\n          primary={primary}\n          secondary={secondary}\n          contrast={contrast}\n          onColored={onColored}\n          disabled={disabled}\n          inline={inline}\n          palette={{\n            color: disabled ? palette.colorDisabled : palette.color,\n            backgroundColor: disabled ? palette.backgroundColorDisabled : palette.backgroundColor,\n            backgroundColorHover: disabled ? palette.backgroundColorDisabled : palette.backgroundColorHover,\n            borderColor: disabled ? palette.borderColorDisabled : palette.borderColor,\n          }}\n          onClick={() => {\n            if (ref.current) {\n              ref.current.focus()\n            }\n          }}\n          onFocus={(evt) => {\n            if (evt.target !== evt.currentTarget) {\n              setInputActive(true)\n            }\n          }}\n          onPointerDown={(evt) => {\n            if (\n              evt.target === ref.current ||\n              !(evt.target instanceof Node) ||\n              addonRef.current?.contains(evt.target) ||\n              minusRef.current?.contains(evt.target) ||\n              plusRef.current?.contains(evt.target)\n            ) {\n              return\n            }\n            evt.preventDefault()\n          }}\n          onBlur={(evt) => {\n            if (!inputAlwaysActive && ref.current && !evt.currentTarget.contains(evt.relatedTarget)) {\n              setInputActive(Boolean(ref.current.value))\n            }\n          }}\n          input={\n            <FormInput\n              {...sizeProps}\n              {...inputProps}\n              ref={ref}\n              type={type}\n              disabled={disabled}\n              active={inputActive}\n              label={label}\n              labelId={inputLabelId}\n              labelPosition={labelPosition}\n              palette={{\n                color: palette.inputColor,\n                placeholderColor: palette.inputPlaceholderColor,\n                colorDisabled: palette.inputColorDisabled,\n                placeholderColorDisabled: palette.inputPlaceholderColorDisabled,\n              }}\n              onChange={(evt) => {\n                if (inputProps.onChange) {\n                  inputProps.onChange(evt)\n                }\n\n                if (type === 'number') {\n                  const currentValue = parseFloat(evt.currentTarget.value)\n\n                  const minValueReached = currentValue <= parseFloat(evt.currentTarget.min)\n                  const maxValueReached = currentValue >= parseFloat(evt.currentTarget.max)\n\n                  setMinusDisabled(minValueReached)\n                  setPlusDisabled(maxValueReached)\n\n                  if (minValueReached || maxValueReached) {\n                    evt.currentTarget.focus()\n                  }\n                }\n              }}\n            />\n          }\n          addonLeft={\n            addonLeft ??\n            (iconBefore\n              ? (addonLeftProps) => (\n                  <Icon\n                    {...addonLeftProps.iconProps}\n                    {...iconProps}\n                    name={typeof iconBefore === 'string' ? iconBefore : undefined}\n                    icon={typeof iconBefore !== 'string' ? iconBefore : undefined}\n                  />\n                )\n              : undefined)\n          }\n          addonRight={(addonRightProps) => (\n            <>\n              <Slot\n                render={addonRight}\n                props={addonRightProps}\n                fallback={\n                  <>\n                    {showAdditionalControl ? (\n                      <IconButton\n                        {...addonRightProps.iconButtonProps}\n                        ref={addonRef}\n                        palette={controlPalette}\n                        {...additionalControlButtonProps}\n                        {...addonButtonProps}\n                        icon={addonControlIcon}\n                        disabled={disabled || addonButtonProps.disabled || additionalControlButtonProps.disabled}\n                        onClick={(evt) => {\n                          evt.stopPropagation()\n                          if (inputProps.readOnly) return\n\n                          if (addonButtonProps.onClick) addonButtonProps.onClick(evt)\n                          if (additionalControlButtonProps.onClick) additionalControlButtonProps.onClick(evt)\n                        }}\n                      />\n                    ) : null}\n                    {iconAfter ? (\n                      <Icon\n                        {...addonRightProps.iconProps}\n                        {...iconProps}\n                        name={typeof iconAfter === 'string' ? iconAfter : undefined}\n                        icon={typeof iconAfter !== 'string' ? iconAfter : undefined}\n                        marginRight={type === 'number' ? 0 : addonRightProps.iconProps.marginRight}\n                      />\n                    ) : null}\n                  </>\n                }\n              />\n              {type === 'number' ? (\n                <Styled.NumberControls>\n                  <IconButton\n                    {...addonRightProps.iconButtonProps}\n                    ref={minusRef}\n                    icon={<Minus />}\n                    palette={controlPalette}\n                    disabled={disabled || minusDisabled}\n                    onClick={(evt) => {\n                      evt.stopPropagation()\n                      if (inputProps.readOnly) return\n\n                      try {\n                        if (ref.current) {\n                          setInputActive(true)\n\n                          const prev = ref.current.value\n                          ref.current.stepDown()\n\n                          const decremented = ref.current.value\n                          if (prev !== decremented) {\n                            const event = new Event('input', { bubbles: true })\n                            ref.current.dispatchEvent(event)\n                          }\n                        }\n                      } catch (err) {\n                        console.error(err)\n                      }\n                    }}\n                  />\n                  <IconButton\n                    {...addonRightProps.iconButtonProps}\n                    ref={plusRef}\n                    icon={<Plus />}\n                    palette={controlPalette}\n                    disabled={disabled || plusDisabled}\n                    onClick={(evt) => {\n                      evt.stopPropagation()\n                      if (inputProps.readOnly) return\n\n                      try {\n                        if (ref.current) {\n                          setInputActive(true)\n\n                          const prev = ref.current.value\n                          ref.current.stepUp()\n\n                          const incremented = ref.current.value\n                          if (prev !== incremented) {\n                            const event = new Event('input', { bubbles: true })\n                            ref.current.dispatchEvent(event)\n                          }\n                        }\n                      } catch (err) {\n                        console.error(err)\n                      }\n                    }}\n                  />\n                </Styled.NumberControls>\n              ) : null}\n            </>\n          )}\n        />\n      )\n    }),\n    {\n      sizes: SIZES,\n      displayName: COMPONENT_NAME,\n    }\n  ),\n  {\n    Phone: InputPhone,\n  }\n)\n\nexport { Input, COMPONENT_NAME }\n"],"names":["COMPONENT_NAME","Input","Object","assign","withMergedProps","forwardRef","props","forwardedRef","theme","useTheme","size","rounded","primary","color","placeholderColor","width","defaultInputControlsWidth","type","labelPosition","iconProps","controls","addonButtonProps","addonLeft","addonRight","preset","className","style","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","sizeUnits","sizes","margin","marginXXS","marginXS","marginS","marginM","marginL","marginXL","marginTop","marginTopXXS","marginTopXS","marginTopS","marginTopM","marginTopL","marginTopXL","marginRight","marginRightXXS","marginRightXS","marginRightS","marginRightM","marginRightL","marginRightXL","marginBottom","marginBottomXXS","marginBottomXS","marginBottomS","marginBottomM","marginBottomL","marginBottomXL","marginLeft","marginLeftXXS","marginLeftXS","marginLeftS","marginLeftM","marginLeftL","marginLeftXL","palette","widthXXS","widthXS","widthS","widthM","widthL","widthXL","error","success","label","icon","text","secondary","contrast","onColored","fluid","disabled","inline","inputRef","inputProps","sizeProps","additionalControlIcon","buttonProps","additionalControlButtonProps","additional","iconBefore","iconAfter","onClick","undefined","Array","isArray","addonControlIcon","showAdditionalControl","inputAlwaysActive","Boolean","mask","alwaysShowMask","controlPalette","controlsColor","colorHover","controlsColorHover","colorActive","controlsColorActive","colorDisabled","controlsColorDisabled","backgroundColor","controlsBackgroundColor","backgroundColorHover","controlsBackgroundColorHover","backgroundColorActive","controlsBackgroundColorActive","backgroundColorDisabled","controlsBackgroundColorDisabled","ref","useRef","useImperativeHandle","current","addonRef","minusRef","plusRef","inputLabelId","useMemo","nanoid","inputActive","setInputActive","useState","initValue","value","defaultValue","length","minusDisabled","setMinusDisabled","min","Infinity","parseFloat","initDefaultValue","minValue","Math","plusDisabled","setPlusDisabled","max","maxValue","useLayoutEffect","document","activeElement","_jsx","Styled","input","FormInputLabel","borderColor","borderColorDisabled","focus","onFocus","evt","target","currentTarget","onPointerDown","Node","contains","preventDefault","onBlur","relatedTarget","FormInput","active","labelId","inputColor","inputPlaceholderColor","inputColorDisabled","placeholderColorDisabled","inputPlaceholderColorDisabled","onChange","currentValue","minValueReached","maxValueReached","addonLeftProps","Icon","name","addonRightProps","_jsxs","_Fragment","children","Slot","render","fallback","IconButton","iconButtonProps","stopPropagation","readOnly","Minus","prev","stepDown","event","Event","bubbles","dispatchEvent","err","console","Plus","stepUp","SIZES","displayName","Phone","InputPhone"],"mappings":"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"}

package/components/Input/sizes.js

@@ -1,2 +1,2 @@
-'use strict';var sizes=require('../IconButton/sizes.js');exports.SIZES_CONTROL={l:sizes.SIZES_SQUARE.xxl,m:sizes.SIZES_SQUARE.xl,s:sizes.SIZES_SQUARE.l,xs:sizes.SIZES_SQUARE.m},exports.SIZES_ICON={l:{fontSize:24},m:{fontSize:24},s:{fontSize:20},xs:{fontSize:18}};
+'use strict';var sizes=require('../FormInputLabel/sizes.js');const SIZES={l:{...sizes.SIZES.l,'--input-number-controls-gap':'16px'},m:{...sizes.SIZES.m,'--input-number-controls-gap':'16px'},s:{...sizes.SIZES.s,'--input-number-controls-gap':'12px'},xs:{...sizes.SIZES.xs,'--input-number-controls-gap':'8px'}};exports.SIZES=SIZES;
 //# sourceMappingURL=sizes.js.map

package/components/Input/sizes.js.map

@@ -1 +1 @@
-{"version":3,"file":"sizes.js","sources":["../../../../src/components/Input/sizes.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport { SIZES_SQUARE as SIZES_ICON_BUTTON } from 'components/IconButton'\nimport type { Size } from './types'\n\nexport const SIZES_ICON: Record<Size, CSSProperties> = {\n  l: { fontSize: 24 },\n  m: { fontSize: 24 },\n  s: { fontSize: 20 },\n  xs: { fontSize: 18 },\n}\n\nexport const SIZES_CONTROL: Record<Size, CSSProperties> = {\n  l: SIZES_ICON_BUTTON.xxl,\n  m: SIZES_ICON_BUTTON.xl,\n  s: SIZES_ICON_BUTTON.l,\n  xs: SIZES_ICON_BUTTON.m,\n}\n"],"names":["l","SIZES_ICON_BUTTON","xxl","m","xl","s","xs","fontSize"],"mappings":"+EAW0D,CACxDA,EAAGC,MAAAA,aAAkBC,IACrBC,EAAGF,MAAAA,aAAkBG,GACrBC,EAAGJ,MAAAA,aAAkBD,EACrBM,GAAIL,MAAAA,aAAkBE,sBAX+B,CACrDH,EAAG,CAAEO,SAAU,IACfJ,EAAG,CAAEI,SAAU,IACfF,EAAG,CAAEE,SAAU,IACfD,GAAI,CAAEC,SAAU"}
+{"version":3,"file":"sizes.js","sources":["../../../../src/components/Input/sizes.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport { SIZES as FORM_INPUT_SIZES } from 'components/FormInputLabel'\nimport type { Size } from './types'\n\nexport const SIZES: Record<Size, CSSProperties> = {\n  l: {\n    ...FORM_INPUT_SIZES.l,\n    '--input-number-controls-gap': '16px',\n  },\n  m: {\n    ...FORM_INPUT_SIZES.m,\n    '--input-number-controls-gap': '16px',\n  },\n  s: {\n    ...FORM_INPUT_SIZES.s,\n    '--input-number-controls-gap': '12px',\n  },\n  xs: {\n    ...FORM_INPUT_SIZES.xs,\n    '--input-number-controls-gap': '8px',\n  },\n}\n"],"names":["SIZES","l","FORM_INPUT_SIZES","m","s","xs"],"mappings":"6DAIO,MAAMA,MAAqC,CAChDC,EAAG,IACEC,MAAAA,MAAiBD,EACpB,8BAA+B,QAEjCE,EAAG,IACED,MAAAA,MAAiBC,EACpB,8BAA+B,QAEjCC,EAAG,IACEF,MAAAA,MAAiBE,EACpB,8BAA+B,QAEjCC,GAAI,IACCH,MAAAA,MAAiBG,GACpB,8BAA+B"}

package/components/Input/sizes.mjs

@@ -1,2 +1,2 @@
-import{SIZES_SQUARE}from'../IconButton/sizes.mjs';const SIZES_ICON={l:{fontSize:24},m:{fontSize:24},s:{fontSize:20},xs:{fontSize:18}};const SIZES_CONTROL={l:SIZES_SQUARE.xxl,m:SIZES_SQUARE.xl,s:SIZES_SQUARE.l,xs:SIZES_SQUARE.m};export{SIZES_CONTROL,SIZES_ICON};
+import{SIZES as SIZES$1}from'../FormInputLabel/sizes.mjs';const SIZES={l:{...SIZES$1.l,'--input-number-controls-gap':'16px'},m:{...SIZES$1.m,'--input-number-controls-gap':'16px'},s:{...SIZES$1.s,'--input-number-controls-gap':'12px'},xs:{...SIZES$1.xs,'--input-number-controls-gap':'8px'}};export{SIZES};
 //# sourceMappingURL=sizes.mjs.map

package/components/Input/sizes.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"sizes.mjs","sources":["../../../../src/components/Input/sizes.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport { SIZES_SQUARE as SIZES_ICON_BUTTON } from 'components/IconButton'\nimport type { Size } from './types'\n\nexport const SIZES_ICON: Record<Size, CSSProperties> = {\n  l: { fontSize: 24 },\n  m: { fontSize: 24 },\n  s: { fontSize: 20 },\n  xs: { fontSize: 18 },\n}\n\nexport const SIZES_CONTROL: Record<Size, CSSProperties> = {\n  l: SIZES_ICON_BUTTON.xxl,\n  m: SIZES_ICON_BUTTON.xl,\n  s: SIZES_ICON_BUTTON.l,\n  xs: SIZES_ICON_BUTTON.m,\n}\n"],"names":["SIZES_ICON","l","fontSize","m","s","xs","SIZES_CONTROL","SIZES_ICON_BUTTON","xxl","xl"],"mappings":"kDAIO,MAAMA,WAA0C,CACrDC,EAAG,CAAEC,SAAU,IACfC,EAAG,CAAED,SAAU,IACfE,EAAG,CAAEF,SAAU,IACfG,GAAI,CAAEH,SAAU,KAGX,MAAMI,cAA6C,CACxDL,EAAGM,aAAkBC,IACrBL,EAAGI,aAAkBE,GACrBL,EAAGG,aAAkBN,EACrBI,GAAIE,aAAkBJ"}
+{"version":3,"file":"sizes.mjs","sources":["../../../../src/components/Input/sizes.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport { SIZES as FORM_INPUT_SIZES } from 'components/FormInputLabel'\nimport type { Size } from './types'\n\nexport const SIZES: Record<Size, CSSProperties> = {\n  l: {\n    ...FORM_INPUT_SIZES.l,\n    '--input-number-controls-gap': '16px',\n  },\n  m: {\n    ...FORM_INPUT_SIZES.m,\n    '--input-number-controls-gap': '16px',\n  },\n  s: {\n    ...FORM_INPUT_SIZES.s,\n    '--input-number-controls-gap': '12px',\n  },\n  xs: {\n    ...FORM_INPUT_SIZES.xs,\n    '--input-number-controls-gap': '8px',\n  },\n}\n"],"names":["SIZES","l","FORM_INPUT_SIZES","m","s","xs"],"mappings":"0DAIO,MAAMA,MAAqC,CAChDC,EAAG,IACEC,QAAiBD,EACpB,8BAA+B,QAEjCE,EAAG,IACED,QAAiBC,EACpB,8BAA+B,QAEjCC,EAAG,IACEF,QAAiBE,EACpB,8BAA+B,QAEjCC,GAAI,IACCH,QAAiBG,GACpB,8BAA+B"}

package/components/Input/style.js

@@ -1,2 +1,2 @@
-'use strict';var styled=require('styled-components');var InputMask=require('react-input-mask');var tinycolor=require('tinycolor2');var color=require('../../mixins/color.js');var responsiveProperty=require('../../mixins/responsive-property.js');var helpers=require('./helpers.js');var IconButton=require('../IconButton/IconButton.js');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var styled__default=_interopDefault(styled);var InputMask__default=_interopDefault(InputMask);var tinycolor__default=_interopDefault(tinycolor);const errorStyle=styled.css(["border:1px solid ",";background-color:",";"],e=>e.theme.colors.pomegranate,e=>tinycolor__default.default(e.theme.colors.pomegranate).setAlpha(.1).toString());const disabledStyle=styled.css(["background-color:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.04);color:rgba(0,0,0,0.16);cursor:not-allowed;&:disabled{background-color:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.04);color:rgba(0,0,0,0.16);cursor:not-allowed;}"]);const focusStyle=styled.css(["&:focus{border:1px solid ",";outline:none;}"],e=>e.theme.colors.accent);const roundedStyle=styled.css(["border-radius:",";"],e=>e.theme.borderRadius);const baseInputStyle=e=>styled.css(["box-sizing:border-box;display:block;background-color:",";border:solid 1px ",";width:auto;appearance:none;font-size:16px;",";&::placeholder{","}"," "," "," "," "," "," ",""],e.theme.colors.white,e.theme.colors.alto,e.color?color.color(e.color):null,e.placeholderColor?color.color(e.placeholderColor):null,focusStyle,e.disabled?disabledStyle:null,e.rounded?roundedStyle:null,e.width?responsiveProperty.property(helpers.chooseWidthValue(e.width),e.fluid&&e.width!=='auto'?'max-width':'width'):null,responsiveProperty.responsiveNamedProperty({sizes:{widthXS:e.widthXS,widthS:e.widthS,widthM:e.widthM,widthL:e.widthL,widthXL:e.widthXL},cssProperty:e.fluid&&e.width!=='auto'?'max-width':'width',customSizeHandler:helpers.chooseWidthValue}),e.fluid?styled.css(["width:100%;"]):null,e.error?errorStyle:null);const Root=styled__default.default(InputMask__default.default).withConfig({shouldForwardProp:e=>!['color','placeholderColor','rounded','fluid','error'].includes(e)&&!e.includes('width')}).withConfig({displayName:"Input__Root",componentId:"ui__sc-1gazj3c-0"})(["line-height:24px;padding:15px 20px 11px;",""],e=>baseInputStyle(e));const IconButtonSeparated=styled__default.default(IconButton.IconButton).withConfig({displayName:"Input__IconButtonSeparated",componentId:"ui__sc-1gazj3c-1"})(["",""],e=>`\n    position: relative;\n    margin-left: 9px;\n\n    &::before {\n      content: '';\n      position: absolute;\n      width: 1px;\n      height: 60%;\n      top: 50%;\n      left: -5px;\n      transform: translateY(-50%);\n      background-color: ${e.theme.colors['border-onmain-default-large']};\n    }\n  `);exports.IconButtonSeparated=IconButtonSeparated,exports.Root=Root,exports.baseInputStyle=baseInputStyle,exports.disabledStyle=disabledStyle,exports.errorStyle=errorStyle,exports.focusStyle=focusStyle,exports.roundedStyle=roundedStyle;
+'use strict';var styled=require('styled-components');var InputMask=require('react-input-mask');var tinycolor=require('tinycolor2');var color=require('../../mixins/color.js');var responsiveProperty=require('../../mixins/responsive-property.js');var helpers=require('./helpers.js');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var styled__default=_interopDefault(styled);var InputMask__default=_interopDefault(InputMask);var tinycolor__default=_interopDefault(tinycolor);const errorStyle=styled.css(["border:1px solid ",";background-color:",";"],e=>e.theme.colors.pomegranate,e=>tinycolor__default.default(e.theme.colors.pomegranate).setAlpha(.1).toString());const disabledStyle=styled.css(["background-color:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.04);color:rgba(0,0,0,0.16);cursor:not-allowed;&:disabled{background-color:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.04);color:rgba(0,0,0,0.16);cursor:not-allowed;}"]);const focusStyle=styled.css(["&:focus{border:1px solid ",";outline:none;}"],e=>e.theme.colors.accent);const roundedStyle=styled.css(["border-radius:",";"],e=>e.theme.borderRadius);const baseInputStyle=e=>styled.css(["box-sizing:border-box;display:block;background-color:",";border:solid 1px ",";width:auto;appearance:none;font-size:16px;",";&::placeholder{","}"," "," "," "," "," "," ",""],e.theme.colors.white,e.theme.colors.alto,e.color?color.color(e.color):null,e.placeholderColor?color.color(e.placeholderColor):null,focusStyle,e.disabled?disabledStyle:null,e.rounded?roundedStyle:null,e.width?responsiveProperty.property(helpers.chooseWidthValue(e.width),e.fluid&&e.width!=='auto'?'max-width':'width'):null,responsiveProperty.responsiveNamedProperty({sizes:{widthXS:e.widthXS,widthS:e.widthS,widthM:e.widthM,widthL:e.widthL,widthXL:e.widthXL},cssProperty:e.fluid&&e.width!=='auto'?'max-width':'width',customSizeHandler:helpers.chooseWidthValue}),e.fluid?styled.css(["width:100%;"]):null,e.error?errorStyle:null);const Root=styled__default.default(InputMask__default.default).withConfig({shouldForwardProp:e=>!['color','placeholderColor','rounded','fluid','error'].includes(e)&&!e.includes('width')}).withConfig({displayName:"Input__Root",componentId:"ui__sc-1gazj3c-0"})(["line-height:24px;padding:15px 20px 11px;",""],e=>baseInputStyle(e));const NumberControls=styled__default.default.div.withConfig({displayName:"Input__NumberControls",componentId:"ui__sc-1gazj3c-1"})(["",""],e=>`\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n\n    & > *:not(:first-child) {\n      position: relative;\n      margin-left: var(--input-number-controls-gap);\n    }\n      \n    & > *:not(:first-child)::before {\n      content: '';\n      position: absolute;\n      width: 1px;\n      height: 60%;\n      top: 50%;\n      left: calc(var(--input-number-controls-gap) / -2);\n      transform: translateY(-50%);\n      background-color: ${e.theme.colors['border-onmain-default-large']};\n    }\n  `);exports.NumberControls=NumberControls,exports.Root=Root,exports.baseInputStyle=baseInputStyle,exports.disabledStyle=disabledStyle,exports.errorStyle=errorStyle,exports.focusStyle=focusStyle,exports.roundedStyle=roundedStyle;
 //# sourceMappingURL=style.js.map

package/components/Input/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../../src/components/Input/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport InputMask from 'react-input-mask'\nimport tinycolor from 'tinycolor2'\nimport type { StyledProps } from 'styled-components'\nimport { color } from 'mixins/color'\nimport { property, responsiveNamedProperty } from 'mixins/responsive-property'\nimport { chooseWidthValue } from 'components/Input/helpers'\nimport { IconButton } from 'components/IconButton'\nimport type { StyledBaseInputProps } from './types'\n\nexport const errorStyle = css`\n  border: 1px solid ${(props) => props.theme.colors.pomegranate};\n  background-color: ${(props) => tinycolor(props.theme.colors.pomegranate).setAlpha(0.1).toString()};\n`\n\nexport const disabledStyle = css`\n  background-color: rgba(0, 0, 0, 0.04);\n  border-color: rgba(0, 0, 0, 0.04);\n  color: rgba(0, 0, 0, 0.16);\n  cursor: not-allowed;\n  &:disabled {\n    background-color: rgba(0, 0, 0, 0.04);\n    border-color: rgba(0, 0, 0, 0.04);\n    color: rgba(0, 0, 0, 0.16);\n    cursor: not-allowed;\n  }\n`\n\nexport const focusStyle = css`\n  &:focus {\n    border: 1px solid ${(props) => props.theme.colors.accent};\n    outline: none;\n  }\n`\n\nexport const roundedStyle = css`\n  border-radius: ${(props) => props.theme.borderRadius};\n`\n\nexport const baseInputStyle = (\n  props: StyledProps<\n    Pick<\n      StyledBaseInputProps,\n      | 'color'\n      | 'placeholderColor'\n      | 'disabled'\n      | 'rounded'\n      | 'width'\n      | 'widthXS'\n      | 'widthS'\n      | 'widthM'\n      | 'widthL'\n      | 'widthXL'\n      | 'fluid'\n      | 'error'\n    >\n  >\n) => css`\n  box-sizing: border-box;\n  display: block;\n  background-color: ${props.theme.colors.white};\n  border: solid 1px ${props.theme.colors.alto};\n  width: auto;\n  appearance: none;\n  font-size: 16px;\n  ${props.color ? color(props.color) : null};\n  &::placeholder {\n    ${props.placeholderColor ? color(props.placeholderColor) : null}\n  }\n  ${focusStyle}\n  ${props.disabled ? disabledStyle : null}\n  ${props.rounded ? roundedStyle : null}\n\n  ${props.width\n    ? property(chooseWidthValue(props.width), props.fluid && props.width !== 'auto' ? 'max-width' : 'width')\n    : null}\n  ${responsiveNamedProperty({\n    sizes: {\n      widthXS: props.widthXS,\n      widthS: props.widthS,\n      widthM: props.widthM,\n      widthL: props.widthL,\n      widthXL: props.widthXL,\n    },\n    cssProperty: props.fluid && props.width !== 'auto' ? 'max-width' : 'width',\n    customSizeHandler: chooseWidthValue,\n  })}\n  ${props.fluid\n    ? css`\n        width: 100%;\n      `\n    : null}\n  ${props.error ? errorStyle : null}\n`\n\nexport const Root: React.ComponentType<StyledBaseInputProps> = styled(InputMask).withConfig<StyledBaseInputProps>({\n  shouldForwardProp: (prop) =>\n    !['color', 'placeholderColor', 'rounded', 'fluid', 'error'].includes(prop) && !prop.includes('width'),\n})`\n  line-height: 24px;\n  padding: 15px 20px 11px;\n  ${(props) => baseInputStyle(props)}\n`\n\nexport const IconButtonSeparated = styled(IconButton)`\n  ${(props) => `\n    position: relative;\n    margin-left: 9px;\n\n    &::before {\n      content: '';\n      position: absolute;\n      width: 1px;\n      height: 60%;\n      top: 50%;\n      left: -5px;\n      transform: translateY(-50%);\n      background-color: ${props.theme.colors['border-onmain-default-large']};\n    }\n  `}\n`\n"],"names":["errorStyle","css","props","theme","colors","pomegranate","tinycolor","setAlpha","toString","disabledStyle","focusStyle","accent","roundedStyle","borderRadius","baseInputStyle","white","alto","color","placeholderColor","disabled","rounded","width","property","chooseWidthValue","fluid","responsiveNamedProperty","sizes","widthXS","widthS","widthM","widthL","widthXL","cssProperty","customSizeHandler","error","Root","styled","InputMask","withConfig","shouldForwardProp","prop","includes","displayName","componentId","IconButtonSeparated","IconButton"],"mappings":"qiBAUaA,WAAaC,OAAAA,IAAG,CAAA,oBAAA,qBAAA,KACNC,GAAUA,EAAMC,MAAMC,OAAOC,YAC7BH,GAAUI,mBAAAA,QAAUJ,EAAMC,MAAMC,OAAOC,aAAaE,SAAS,IAAKC,YAGlF,MAAMC,cAAgBR,OAAAA,IAAG,CAAA,qOAazB,MAAMS,WAAaT,OAAAA,oDAEDC,GAAUA,EAAMC,MAAMC,OAAOO,QAK/C,MAAMC,aAAeX,OAAAA,IAAG,CAAA,iBAAA,KACXC,GAAUA,EAAMC,MAAMU,cAGnC,MAAMC,eACXZ,GAiBGD,OAAAA,IAAG,CAAA,wDAAA,qBAAA,8CAAA,mBAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAGcC,EAAMC,MAAMC,OAAOW,MACnBb,EAAMC,MAAMC,OAAOY,KAIrCd,EAAMe,MAAQA,MAAAA,MAAMf,EAAMe,OAAS,KAEjCf,EAAMgB,iBAAmBD,MAAAA,MAAMf,EAAMgB,kBAAoB,KAE3DR,WACAR,EAAMiB,SAAWV,cAAgB,KACjCP,EAAMkB,QAAUR,aAAe,KAE/BV,EAAMmB,MACJC,mBAAAA,SAASC,QAAAA,iBAAiBrB,EAAMmB,OAAQnB,EAAMsB,OAAStB,EAAMmB,QAAU,OAAS,YAAc,SAC9F,KACFI,mBAAAA,wBAAwB,CACxBC,MAAO,CACLC,QAASzB,EAAMyB,QACfC,OAAQ1B,EAAM0B,OACdC,OAAQ3B,EAAM2B,OACdC,OAAQ5B,EAAM4B,OACdC,QAAS7B,EAAM6B,SAEjBC,YAAa9B,EAAMsB,OAAStB,EAAMmB,QAAU,OAAS,YAAc,QACnEY,kBAAmBV,QAAAA,mBAEnBrB,EAAMsB,MACJvB,OAAAA,IAAG,CAAA,gBAGH,KACFC,EAAMgC,MAAQlC,WAAa,MAGxB,MAAMmC,KAAkDC,gBAAAA,QAAOC,4BAAWC,WAAiC,CAChHC,kBAAoBC,IACjB,CAAC,QAAS,mBAAoB,UAAW,QAAS,SAASC,SAASD,KAAUA,EAAKC,SAAS,WAC/FH,WAAA,CAAAI,YAAA,cAAAC,YAAA,oBAH6DP,CAG7D,CAAA,2CAAA,IAGGlC,GAAUY,eAAeZ,IAGvB,MAAM0C,oBAAsBR,gBAAAA,QAAOS,uBAAWP,WAAA,CAAAI,YAAA,6BAAAC,YAAA,oBAAlBP,CAAkB,CAAA,GAAA,IAChDlC,GAAU,8PAYWA,EAAMC,MAAMC,OAAO"}
+{"version":3,"file":"style.js","sources":["../../../../src/components/Input/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport InputMask from 'react-input-mask'\nimport tinycolor from 'tinycolor2'\nimport type { StyledProps } from 'styled-components'\nimport { color } from 'mixins/color'\nimport { property, responsiveNamedProperty } from 'mixins/responsive-property'\nimport { chooseWidthValue } from 'components/Input/helpers'\nimport type { StyledBaseInputProps } from './types'\n\nexport const errorStyle = css`\n  border: 1px solid ${(props) => props.theme.colors.pomegranate};\n  background-color: ${(props) => tinycolor(props.theme.colors.pomegranate).setAlpha(0.1).toString()};\n`\n\nexport const disabledStyle = css`\n  background-color: rgba(0, 0, 0, 0.04);\n  border-color: rgba(0, 0, 0, 0.04);\n  color: rgba(0, 0, 0, 0.16);\n  cursor: not-allowed;\n  &:disabled {\n    background-color: rgba(0, 0, 0, 0.04);\n    border-color: rgba(0, 0, 0, 0.04);\n    color: rgba(0, 0, 0, 0.16);\n    cursor: not-allowed;\n  }\n`\n\nexport const focusStyle = css`\n  &:focus {\n    border: 1px solid ${(props) => props.theme.colors.accent};\n    outline: none;\n  }\n`\n\nexport const roundedStyle = css`\n  border-radius: ${(props) => props.theme.borderRadius};\n`\n\nexport const baseInputStyle = (\n  props: StyledProps<\n    Pick<\n      StyledBaseInputProps,\n      | 'color'\n      | 'placeholderColor'\n      | 'disabled'\n      | 'rounded'\n      | 'width'\n      | 'widthXS'\n      | 'widthS'\n      | 'widthM'\n      | 'widthL'\n      | 'widthXL'\n      | 'fluid'\n      | 'error'\n    >\n  >\n) => css`\n  box-sizing: border-box;\n  display: block;\n  background-color: ${props.theme.colors.white};\n  border: solid 1px ${props.theme.colors.alto};\n  width: auto;\n  appearance: none;\n  font-size: 16px;\n  ${props.color ? color(props.color) : null};\n  &::placeholder {\n    ${props.placeholderColor ? color(props.placeholderColor) : null}\n  }\n  ${focusStyle}\n  ${props.disabled ? disabledStyle : null}\n  ${props.rounded ? roundedStyle : null}\n\n  ${props.width\n    ? property(chooseWidthValue(props.width), props.fluid && props.width !== 'auto' ? 'max-width' : 'width')\n    : null}\n  ${responsiveNamedProperty({\n    sizes: {\n      widthXS: props.widthXS,\n      widthS: props.widthS,\n      widthM: props.widthM,\n      widthL: props.widthL,\n      widthXL: props.widthXL,\n    },\n    cssProperty: props.fluid && props.width !== 'auto' ? 'max-width' : 'width',\n    customSizeHandler: chooseWidthValue,\n  })}\n  ${props.fluid\n    ? css`\n        width: 100%;\n      `\n    : null}\n  ${props.error ? errorStyle : null}\n`\n\nexport const Root: React.ComponentType<StyledBaseInputProps> = styled(InputMask).withConfig<StyledBaseInputProps>({\n  shouldForwardProp: (prop) =>\n    !['color', 'placeholderColor', 'rounded', 'fluid', 'error'].includes(prop) && !prop.includes('width'),\n})`\n  line-height: 24px;\n  padding: 15px 20px 11px;\n  ${(props) => baseInputStyle(props)}\n`\n\nexport const NumberControls = styled.div`\n  ${(props) => `\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n\n    & > *:not(:first-child) {\n      position: relative;\n      margin-left: var(--input-number-controls-gap);\n    }\n      \n    & > *:not(:first-child)::before {\n      content: '';\n      position: absolute;\n      width: 1px;\n      height: 60%;\n      top: 50%;\n      left: calc(var(--input-number-controls-gap) / -2);\n      transform: translateY(-50%);\n      background-color: ${props.theme.colors['border-onmain-default-large']};\n    }\n  `}\n`\n"],"names":["errorStyle","css","props","theme","colors","pomegranate","tinycolor","setAlpha","toString","disabledStyle","focusStyle","accent","roundedStyle","borderRadius","baseInputStyle","white","alto","color","placeholderColor","disabled","rounded","width","property","chooseWidthValue","fluid","responsiveNamedProperty","sizes","widthXS","widthS","widthM","widthL","widthXL","cssProperty","customSizeHandler","error","Root","styled","InputMask","withConfig","shouldForwardProp","prop","includes","displayName","componentId","NumberControls","div"],"mappings":"+eASaA,WAAaC,OAAAA,IAAG,CAAA,oBAAA,qBAAA,KACNC,GAAUA,EAAMC,MAAMC,OAAOC,YAC7BH,GAAUI,mBAAAA,QAAUJ,EAAMC,MAAMC,OAAOC,aAAaE,SAAS,IAAKC,YAGlF,MAAMC,cAAgBR,OAAAA,IAAG,CAAA,qOAazB,MAAMS,WAAaT,OAAAA,oDAEDC,GAAUA,EAAMC,MAAMC,OAAOO,QAK/C,MAAMC,aAAeX,OAAAA,IAAG,CAAA,iBAAA,KACXC,GAAUA,EAAMC,MAAMU,cAGnC,MAAMC,eACXZ,GAiBGD,OAAAA,IAAG,CAAA,wDAAA,qBAAA,8CAAA,mBAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAGcC,EAAMC,MAAMC,OAAOW,MACnBb,EAAMC,MAAMC,OAAOY,KAIrCd,EAAMe,MAAQA,MAAAA,MAAMf,EAAMe,OAAS,KAEjCf,EAAMgB,iBAAmBD,MAAAA,MAAMf,EAAMgB,kBAAoB,KAE3DR,WACAR,EAAMiB,SAAWV,cAAgB,KACjCP,EAAMkB,QAAUR,aAAe,KAE/BV,EAAMmB,MACJC,mBAAAA,SAASC,QAAAA,iBAAiBrB,EAAMmB,OAAQnB,EAAMsB,OAAStB,EAAMmB,QAAU,OAAS,YAAc,SAC9F,KACFI,mBAAAA,wBAAwB,CACxBC,MAAO,CACLC,QAASzB,EAAMyB,QACfC,OAAQ1B,EAAM0B,OACdC,OAAQ3B,EAAM2B,OACdC,OAAQ5B,EAAM4B,OACdC,QAAS7B,EAAM6B,SAEjBC,YAAa9B,EAAMsB,OAAStB,EAAMmB,QAAU,OAAS,YAAc,QACnEY,kBAAmBV,QAAAA,mBAEnBrB,EAAMsB,MACJvB,OAAAA,IAAG,CAAA,gBAGH,KACFC,EAAMgC,MAAQlC,WAAa,MAGxB,MAAMmC,KAAkDC,gBAAAA,QAAOC,4BAAWC,WAAiC,CAChHC,kBAAoBC,IACjB,CAAC,QAAS,mBAAoB,UAAW,QAAS,SAASC,SAASD,KAAUA,EAAKC,SAAS,WAC/FH,WAAA,CAAAI,YAAA,cAAAC,YAAA,oBAH6DP,CAG7D,CAAA,2CAAA,IAGGlC,GAAUY,eAAeZ,UAGjB0C,eAAiBR,gBAAAA,QAAOS,IAAGP,WAAA,CAAAI,YAAA,wBAAAC,YAAA,oBAAVP,CAAU,CAAA,GAAA,IACnClC,GAAU,qdAkBWA,EAAMC,MAAMC,OAAO"}

package/components/Input/style.mjs

@@ -1,2 +1,2 @@
-import styled,{css}from'styled-components';import InputMask from'react-input-mask';import tinycolor from'tinycolor2';import{color}from'../../mixins/color.mjs';import{property,responsiveNamedProperty}from'../../mixins/responsive-property.mjs';import{chooseWidthValue}from'./helpers.mjs';import{IconButton}from'../IconButton/IconButton.mjs';const errorStyle=css(["border:1px solid ",";background-color:",";"],o=>o.theme.colors.pomegranate,o=>tinycolor(o.theme.colors.pomegranate).setAlpha(.1).toString());const disabledStyle=css(["background-color:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.04);color:rgba(0,0,0,0.16);cursor:not-allowed;&:disabled{background-color:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.04);color:rgba(0,0,0,0.16);cursor:not-allowed;}"]);const focusStyle=css(["&:focus{border:1px solid ",";outline:none;}"],o=>o.theme.colors.accent);const roundedStyle=css(["border-radius:",";"],o=>o.theme.borderRadius);const baseInputStyle=o=>css(["box-sizing:border-box;display:block;background-color:",";border:solid 1px ",";width:auto;appearance:none;font-size:16px;",";&::placeholder{","}"," "," "," "," "," "," ",""],o.theme.colors.white,o.theme.colors.alto,o.color?color(o.color):null,o.placeholderColor?color(o.placeholderColor):null,focusStyle,o.disabled?disabledStyle:null,o.rounded?roundedStyle:null,o.width?property(chooseWidthValue(o.width),o.fluid&&o.width!=='auto'?'max-width':'width'):null,responsiveNamedProperty({sizes:{widthXS:o.widthXS,widthS:o.widthS,widthM:o.widthM,widthL:o.widthL,widthXL:o.widthXL},cssProperty:o.fluid&&o.width!=='auto'?'max-width':'width',customSizeHandler:chooseWidthValue}),o.fluid?css(["width:100%;"]):null,o.error?errorStyle:null);const Root=styled(InputMask).withConfig({shouldForwardProp:o=>!['color','placeholderColor','rounded','fluid','error'].includes(o)&&!o.includes('width')}).withConfig({displayName:"Input__Root",componentId:"ui__sc-1gazj3c-0"})(["line-height:24px;padding:15px 20px 11px;",""],o=>baseInputStyle(o));const IconButtonSeparated=styled(IconButton).withConfig({displayName:"Input__IconButtonSeparated",componentId:"ui__sc-1gazj3c-1"})(["",""],o=>`\n    position: relative;\n    margin-left: 9px;\n\n    &::before {\n      content: '';\n      position: absolute;\n      width: 1px;\n      height: 60%;\n      top: 50%;\n      left: -5px;\n      transform: translateY(-50%);\n      background-color: ${o.theme.colors['border-onmain-default-large']};\n    }\n  `);export{IconButtonSeparated,Root,baseInputStyle,disabledStyle,errorStyle,focusStyle,roundedStyle};
+import styled,{css}from'styled-components';import InputMask from'react-input-mask';import tinycolor from'tinycolor2';import{color}from'../../mixins/color.mjs';import{property,responsiveNamedProperty}from'../../mixins/responsive-property.mjs';import{chooseWidthValue}from'./helpers.mjs';const errorStyle=css(["border:1px solid ",";background-color:",";"],o=>o.theme.colors.pomegranate,o=>tinycolor(o.theme.colors.pomegranate).setAlpha(.1).toString());const disabledStyle=css(["background-color:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.04);color:rgba(0,0,0,0.16);cursor:not-allowed;&:disabled{background-color:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.04);color:rgba(0,0,0,0.16);cursor:not-allowed;}"]);const focusStyle=css(["&:focus{border:1px solid ",";outline:none;}"],o=>o.theme.colors.accent);const roundedStyle=css(["border-radius:",";"],o=>o.theme.borderRadius);const baseInputStyle=o=>css(["box-sizing:border-box;display:block;background-color:",";border:solid 1px ",";width:auto;appearance:none;font-size:16px;",";&::placeholder{","}"," "," "," "," "," "," ",""],o.theme.colors.white,o.theme.colors.alto,o.color?color(o.color):null,o.placeholderColor?color(o.placeholderColor):null,focusStyle,o.disabled?disabledStyle:null,o.rounded?roundedStyle:null,o.width?property(chooseWidthValue(o.width),o.fluid&&o.width!=='auto'?'max-width':'width'):null,responsiveNamedProperty({sizes:{widthXS:o.widthXS,widthS:o.widthS,widthM:o.widthM,widthL:o.widthL,widthXL:o.widthXL},cssProperty:o.fluid&&o.width!=='auto'?'max-width':'width',customSizeHandler:chooseWidthValue}),o.fluid?css(["width:100%;"]):null,o.error?errorStyle:null);const Root=styled(InputMask).withConfig({shouldForwardProp:o=>!['color','placeholderColor','rounded','fluid','error'].includes(o)&&!o.includes('width')}).withConfig({displayName:"Input__Root",componentId:"ui__sc-1gazj3c-0"})(["line-height:24px;padding:15px 20px 11px;",""],o=>baseInputStyle(o));const NumberControls=styled.div.withConfig({displayName:"Input__NumberControls",componentId:"ui__sc-1gazj3c-1"})(["",""],o=>`\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n\n    & > *:not(:first-child) {\n      position: relative;\n      margin-left: var(--input-number-controls-gap);\n    }\n      \n    & > *:not(:first-child)::before {\n      content: '';\n      position: absolute;\n      width: 1px;\n      height: 60%;\n      top: 50%;\n      left: calc(var(--input-number-controls-gap) / -2);\n      transform: translateY(-50%);\n      background-color: ${o.theme.colors['border-onmain-default-large']};\n    }\n  `);export{NumberControls,Root,baseInputStyle,disabledStyle,errorStyle,focusStyle,roundedStyle};
 //# sourceMappingURL=style.mjs.map

package/components/Input/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","sources":["../../../../src/components/Input/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport InputMask from 'react-input-mask'\nimport tinycolor from 'tinycolor2'\nimport type { StyledProps } from 'styled-components'\nimport { color } from 'mixins/color'\nimport { property, responsiveNamedProperty } from 'mixins/responsive-property'\nimport { chooseWidthValue } from 'components/Input/helpers'\nimport { IconButton } from 'components/IconButton'\nimport type { StyledBaseInputProps } from './types'\n\nexport const errorStyle = css`\n  border: 1px solid ${(props) => props.theme.colors.pomegranate};\n  background-color: ${(props) => tinycolor(props.theme.colors.pomegranate).setAlpha(0.1).toString()};\n`\n\nexport const disabledStyle = css`\n  background-color: rgba(0, 0, 0, 0.04);\n  border-color: rgba(0, 0, 0, 0.04);\n  color: rgba(0, 0, 0, 0.16);\n  cursor: not-allowed;\n  &:disabled {\n    background-color: rgba(0, 0, 0, 0.04);\n    border-color: rgba(0, 0, 0, 0.04);\n    color: rgba(0, 0, 0, 0.16);\n    cursor: not-allowed;\n  }\n`\n\nexport const focusStyle = css`\n  &:focus {\n    border: 1px solid ${(props) => props.theme.colors.accent};\n    outline: none;\n  }\n`\n\nexport const roundedStyle = css`\n  border-radius: ${(props) => props.theme.borderRadius};\n`\n\nexport const baseInputStyle = (\n  props: StyledProps<\n    Pick<\n      StyledBaseInputProps,\n      | 'color'\n      | 'placeholderColor'\n      | 'disabled'\n      | 'rounded'\n      | 'width'\n      | 'widthXS'\n      | 'widthS'\n      | 'widthM'\n      | 'widthL'\n      | 'widthXL'\n      | 'fluid'\n      | 'error'\n    >\n  >\n) => css`\n  box-sizing: border-box;\n  display: block;\n  background-color: ${props.theme.colors.white};\n  border: solid 1px ${props.theme.colors.alto};\n  width: auto;\n  appearance: none;\n  font-size: 16px;\n  ${props.color ? color(props.color) : null};\n  &::placeholder {\n    ${props.placeholderColor ? color(props.placeholderColor) : null}\n  }\n  ${focusStyle}\n  ${props.disabled ? disabledStyle : null}\n  ${props.rounded ? roundedStyle : null}\n\n  ${props.width\n    ? property(chooseWidthValue(props.width), props.fluid && props.width !== 'auto' ? 'max-width' : 'width')\n    : null}\n  ${responsiveNamedProperty({\n    sizes: {\n      widthXS: props.widthXS,\n      widthS: props.widthS,\n      widthM: props.widthM,\n      widthL: props.widthL,\n      widthXL: props.widthXL,\n    },\n    cssProperty: props.fluid && props.width !== 'auto' ? 'max-width' : 'width',\n    customSizeHandler: chooseWidthValue,\n  })}\n  ${props.fluid\n    ? css`\n        width: 100%;\n      `\n    : null}\n  ${props.error ? errorStyle : null}\n`\n\nexport const Root: React.ComponentType<StyledBaseInputProps> = styled(InputMask).withConfig<StyledBaseInputProps>({\n  shouldForwardProp: (prop) =>\n    !['color', 'placeholderColor', 'rounded', 'fluid', 'error'].includes(prop) && !prop.includes('width'),\n})`\n  line-height: 24px;\n  padding: 15px 20px 11px;\n  ${(props) => baseInputStyle(props)}\n`\n\nexport const IconButtonSeparated = styled(IconButton)`\n  ${(props) => `\n    position: relative;\n    margin-left: 9px;\n\n    &::before {\n      content: '';\n      position: absolute;\n      width: 1px;\n      height: 60%;\n      top: 50%;\n      left: -5px;\n      transform: translateY(-50%);\n      background-color: ${props.theme.colors['border-onmain-default-large']};\n    }\n  `}\n`\n"],"names":["errorStyle","css","props","theme","colors","pomegranate","tinycolor","setAlpha","toString","disabledStyle","focusStyle","accent","roundedStyle","borderRadius","baseInputStyle","white","alto","color","placeholderColor","disabled","rounded","width","property","chooseWidthValue","fluid","responsiveNamedProperty","sizes","widthXS","widthS","widthM","widthL","widthXL","cssProperty","customSizeHandler","error","Root","styled","InputMask","withConfig","shouldForwardProp","prop","includes","displayName","componentId","IconButtonSeparated","IconButton"],"mappings":"yVAUaA,WAAaC,IAAG,CAAA,oBAAA,qBAAA,KACNC,GAAUA,EAAMC,MAAMC,OAAOC,YAC7BH,GAAUI,UAAUJ,EAAMC,MAAMC,OAAOC,aAAaE,SAAS,IAAKC,YAGlF,MAAMC,cAAgBR,IAAG,CAAA,qOAazB,MAAMS,WAAaT,oDAEDC,GAAUA,EAAMC,MAAMC,OAAOO,QAK/C,MAAMC,aAAeX,IAAG,CAAA,iBAAA,KACXC,GAAUA,EAAMC,MAAMU,cAGnC,MAAMC,eACXZ,GAiBGD,IAAG,CAAA,wDAAA,qBAAA,8CAAA,mBAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAGcC,EAAMC,MAAMC,OAAOW,MACnBb,EAAMC,MAAMC,OAAOY,KAIrCd,EAAMe,MAAQA,MAAMf,EAAMe,OAAS,KAEjCf,EAAMgB,iBAAmBD,MAAMf,EAAMgB,kBAAoB,KAE3DR,WACAR,EAAMiB,SAAWV,cAAgB,KACjCP,EAAMkB,QAAUR,aAAe,KAE/BV,EAAMmB,MACJC,SAASC,iBAAiBrB,EAAMmB,OAAQnB,EAAMsB,OAAStB,EAAMmB,QAAU,OAAS,YAAc,SAC9F,KACFI,wBAAwB,CACxBC,MAAO,CACLC,QAASzB,EAAMyB,QACfC,OAAQ1B,EAAM0B,OACdC,OAAQ3B,EAAM2B,OACdC,OAAQ5B,EAAM4B,OACdC,QAAS7B,EAAM6B,SAEjBC,YAAa9B,EAAMsB,OAAStB,EAAMmB,QAAU,OAAS,YAAc,QACnEY,kBAAmBV,mBAEnBrB,EAAMsB,MACJvB,IAAG,CAAA,gBAGH,KACFC,EAAMgC,MAAQlC,WAAa,MAGxB,MAAMmC,KAAkDC,OAAOC,WAAWC,WAAiC,CAChHC,kBAAoBC,IACjB,CAAC,QAAS,mBAAoB,UAAW,QAAS,SAASC,SAASD,KAAUA,EAAKC,SAAS,WAC/FH,WAAA,CAAAI,YAAA,cAAAC,YAAA,oBAH6DP,CAG7D,CAAA,2CAAA,IAGGlC,GAAUY,eAAeZ,IAGvB,MAAM0C,oBAAsBR,OAAOS,YAAWP,WAAA,CAAAI,YAAA,6BAAAC,YAAA,oBAAlBP,CAAkB,CAAA,GAAA,IAChDlC,GAAU,8PAYWA,EAAMC,MAAMC,OAAO"}
+{"version":3,"file":"style.mjs","sources":["../../../../src/components/Input/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport InputMask from 'react-input-mask'\nimport tinycolor from 'tinycolor2'\nimport type { StyledProps } from 'styled-components'\nimport { color } from 'mixins/color'\nimport { property, responsiveNamedProperty } from 'mixins/responsive-property'\nimport { chooseWidthValue } from 'components/Input/helpers'\nimport type { StyledBaseInputProps } from './types'\n\nexport const errorStyle = css`\n  border: 1px solid ${(props) => props.theme.colors.pomegranate};\n  background-color: ${(props) => tinycolor(props.theme.colors.pomegranate).setAlpha(0.1).toString()};\n`\n\nexport const disabledStyle = css`\n  background-color: rgba(0, 0, 0, 0.04);\n  border-color: rgba(0, 0, 0, 0.04);\n  color: rgba(0, 0, 0, 0.16);\n  cursor: not-allowed;\n  &:disabled {\n    background-color: rgba(0, 0, 0, 0.04);\n    border-color: rgba(0, 0, 0, 0.04);\n    color: rgba(0, 0, 0, 0.16);\n    cursor: not-allowed;\n  }\n`\n\nexport const focusStyle = css`\n  &:focus {\n    border: 1px solid ${(props) => props.theme.colors.accent};\n    outline: none;\n  }\n`\n\nexport const roundedStyle = css`\n  border-radius: ${(props) => props.theme.borderRadius};\n`\n\nexport const baseInputStyle = (\n  props: StyledProps<\n    Pick<\n      StyledBaseInputProps,\n      | 'color'\n      | 'placeholderColor'\n      | 'disabled'\n      | 'rounded'\n      | 'width'\n      | 'widthXS'\n      | 'widthS'\n      | 'widthM'\n      | 'widthL'\n      | 'widthXL'\n      | 'fluid'\n      | 'error'\n    >\n  >\n) => css`\n  box-sizing: border-box;\n  display: block;\n  background-color: ${props.theme.colors.white};\n  border: solid 1px ${props.theme.colors.alto};\n  width: auto;\n  appearance: none;\n  font-size: 16px;\n  ${props.color ? color(props.color) : null};\n  &::placeholder {\n    ${props.placeholderColor ? color(props.placeholderColor) : null}\n  }\n  ${focusStyle}\n  ${props.disabled ? disabledStyle : null}\n  ${props.rounded ? roundedStyle : null}\n\n  ${props.width\n    ? property(chooseWidthValue(props.width), props.fluid && props.width !== 'auto' ? 'max-width' : 'width')\n    : null}\n  ${responsiveNamedProperty({\n    sizes: {\n      widthXS: props.widthXS,\n      widthS: props.widthS,\n      widthM: props.widthM,\n      widthL: props.widthL,\n      widthXL: props.widthXL,\n    },\n    cssProperty: props.fluid && props.width !== 'auto' ? 'max-width' : 'width',\n    customSizeHandler: chooseWidthValue,\n  })}\n  ${props.fluid\n    ? css`\n        width: 100%;\n      `\n    : null}\n  ${props.error ? errorStyle : null}\n`\n\nexport const Root: React.ComponentType<StyledBaseInputProps> = styled(InputMask).withConfig<StyledBaseInputProps>({\n  shouldForwardProp: (prop) =>\n    !['color', 'placeholderColor', 'rounded', 'fluid', 'error'].includes(prop) && !prop.includes('width'),\n})`\n  line-height: 24px;\n  padding: 15px 20px 11px;\n  ${(props) => baseInputStyle(props)}\n`\n\nexport const NumberControls = styled.div`\n  ${(props) => `\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n\n    & > *:not(:first-child) {\n      position: relative;\n      margin-left: var(--input-number-controls-gap);\n    }\n      \n    & > *:not(:first-child)::before {\n      content: '';\n      position: absolute;\n      width: 1px;\n      height: 60%;\n      top: 50%;\n      left: calc(var(--input-number-controls-gap) / -2);\n      transform: translateY(-50%);\n      background-color: ${props.theme.colors['border-onmain-default-large']};\n    }\n  `}\n`\n"],"names":["errorStyle","css","props","theme","colors","pomegranate","tinycolor","setAlpha","toString","disabledStyle","focusStyle","accent","roundedStyle","borderRadius","baseInputStyle","white","alto","color","placeholderColor","disabled","rounded","width","property","chooseWidthValue","fluid","responsiveNamedProperty","sizes","widthXS","widthS","widthM","widthL","widthXL","cssProperty","customSizeHandler","error","Root","styled","InputMask","withConfig","shouldForwardProp","prop","includes","displayName","componentId","NumberControls","div"],"mappings":"oSASaA,WAAaC,IAAG,CAAA,oBAAA,qBAAA,KACNC,GAAUA,EAAMC,MAAMC,OAAOC,YAC7BH,GAAUI,UAAUJ,EAAMC,MAAMC,OAAOC,aAAaE,SAAS,IAAKC,YAGlF,MAAMC,cAAgBR,IAAG,CAAA,qOAazB,MAAMS,WAAaT,oDAEDC,GAAUA,EAAMC,MAAMC,OAAOO,QAK/C,MAAMC,aAAeX,IAAG,CAAA,iBAAA,KACXC,GAAUA,EAAMC,MAAMU,cAGnC,MAAMC,eACXZ,GAiBGD,IAAG,CAAA,wDAAA,qBAAA,8CAAA,mBAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAGcC,EAAMC,MAAMC,OAAOW,MACnBb,EAAMC,MAAMC,OAAOY,KAIrCd,EAAMe,MAAQA,MAAMf,EAAMe,OAAS,KAEjCf,EAAMgB,iBAAmBD,MAAMf,EAAMgB,kBAAoB,KAE3DR,WACAR,EAAMiB,SAAWV,cAAgB,KACjCP,EAAMkB,QAAUR,aAAe,KAE/BV,EAAMmB,MACJC,SAASC,iBAAiBrB,EAAMmB,OAAQnB,EAAMsB,OAAStB,EAAMmB,QAAU,OAAS,YAAc,SAC9F,KACFI,wBAAwB,CACxBC,MAAO,CACLC,QAASzB,EAAMyB,QACfC,OAAQ1B,EAAM0B,OACdC,OAAQ3B,EAAM2B,OACdC,OAAQ5B,EAAM4B,OACdC,QAAS7B,EAAM6B,SAEjBC,YAAa9B,EAAMsB,OAAStB,EAAMmB,QAAU,OAAS,YAAc,QACnEY,kBAAmBV,mBAEnBrB,EAAMsB,MACJvB,IAAG,CAAA,gBAGH,KACFC,EAAMgC,MAAQlC,WAAa,MAGxB,MAAMmC,KAAkDC,OAAOC,WAAWC,WAAiC,CAChHC,kBAAoBC,IACjB,CAAC,QAAS,mBAAoB,UAAW,QAAS,SAASC,SAASD,KAAUA,EAAKC,SAAS,WAC/FH,WAAA,CAAAI,YAAA,cAAAC,YAAA,oBAH6DP,CAG7D,CAAA,2CAAA,IAGGlC,GAAUY,eAAeZ,UAGjB0C,eAAiBR,OAAOS,IAAGP,WAAA,CAAAI,YAAA,wBAAAC,YAAA,oBAAVP,CAAU,CAAA,GAAA,IACnClC,GAAU,qdAkBWA,EAAMC,MAAMC,OAAO"}

package/components/Textarea/Textarea.js

@@ -1,2 +1,2 @@
-'use strict';var React=require('react');var styled=require('styled-components');var nanoid=require('nanoid');var withMergedProps=require('../../hocs/withMergedProps.js');var useResizable=require('../../hooks/useResizable.js');var misc=require('../../shared/utils/misc.js');var sizes=require('./sizes.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var FormInputLabel=require('../FormInputLabel/FormInputLabel.js');var index=require('../../icon-pack/src/icons/ResizeHandle/index.js');var InputLabel=require('../InputLabel/InputLabel.js');var sizes$1=require('../FormInput/sizes.js');const Textarea=withMergedProps.withMergedProps(React.forwardRef((e,r)=>{const t=styled.useTheme();const{size:a="m",rows:i=2,maxRows:n=30,labelPosition:o="dynamic",primary:s=!0,width:l=t.defaultInputControlsWidth,autosize:m=!0,rounded:u=!0,color:c="mineShaft",placeholderColor:g="silver",autoRows:d,resize:h,contrast:p,inline:X,secondary:b,success:L,error:R,sizeXXS:S,sizeXS:z,sizeS:f,sizeM:x,sizeL:v,sizeXL:w,sizes:j,sizeUnits:M,margin:C,marginXXS:T,marginXS:y,marginS:I,marginM:B,marginL:q,marginXL:D,marginTop:F,marginTopXXS:k,marginTopXS:N,marginTopS:E,marginTopM:H,marginTopL:P,marginTopXL:O,marginRight:U,marginRightXXS:Z,marginRightXS:$,marginRightS:A,marginRightM:G,marginRightL:K,marginRightXL:V,marginBottom:W,marginBottomXXS:_,marginBottomXS:J,marginBottomS:Q,marginBottomM:Y,marginBottomL:ee,marginBottomXL:re,marginLeft:te,marginLeftXXS:ae,marginLeftXS:ie,marginLeftS:ne,marginLeftM:oe,marginLeftL:se,marginLeftXL:le,widthXXS:me,widthXS:ue,widthS:ce,widthM:ge,widthL:de,widthXL:he,preset:pe,palette:Xe,label:be,fluid:Le,className:Re,style:Se,disabled:ze,...fe}=e;const xe={size:a,sizeXXS:S,sizeXS:z,sizeS:f,sizeM:x,sizeL:v,sizeXL:w};const ve=React.useRef(null);const we=React.useRef(null);const je=React.useRef(null);React.useImperativeHandle(r,()=>ve.current,[]);const[Me,Ce,Te]=useResizable.useResizable({target:je,direction:h});const ye=React.useMemo(()=>nanoid.nanoid(),[]);const[Ie,Be]=React.useState(()=>{const e=fe.value??fe.defaultValue;return typeof e=='string'&&e.length>0});const[qe,De]=React.useState(()=>Math.min(i,n));const Fe=pe==='brand'&&d||pe!=='brand'&&m?qe:Math.min(i,n);const ke=h==='horizontal'?'ew-resize':h==='vertical'?'ns-resize':'nwse-resize';const Ne=React.useCallback(()=>{if(!ve.current)return;if(pe==='brand'){if(!we.current)return;we.current.value=ve.current.value;const e=Math.max(Math.round(we.current.scrollHeight/we.current.clientHeight),i);return void De(Math.min(e,n))}const e=getComputedStyle(ve.current);const r=parseFloat(e.lineHeight);const t=Math.max(Math.round((ve.current.scrollHeight-parseFloat(e.paddingTop)-parseFloat(e.paddingBottom))/(Number.isNaN(r)?parseFloat(e.fontSize)*1.2:r)),i);De(e=>t>e?Math.min(t,n):ve.current&&!ve.current.value?i:e)},[pe,i,n]);return React.useLayoutEffect(()=>{pe==='brand'&&typeof fe.value=='string'&&ve.current&&ve.current!==document.activeElement&&Be(fe.value.length>0)},[pe,fe.value]),React.useEffect(()=>{const e=misc.createThrottledCallback(Ne,200);return(pe==='brand'&&d||pe!=='brand'&&m)&&(Ne(),window.addEventListener('resize',e)),()=>{window.removeEventListener('resize',e)}},[pe,d,m,Ne]),pe!=='brand'?jsxRuntime.jsx(style.Root,{...fe,ref:ve,className:Re,style:Se,onChange:e=>{m&&Ne(),fe.onChange&&fe.onChange(e)},rows:Fe,color:c,rounded:u,placeholderColor:g,disabled:ze,error:R,fluid:Le,width:l,widthXXS:me,widthXS:ue,widthS:ce,widthM:ge,widthL:de,widthXL:he}):jsxRuntime.jsx(FormInputLabel.FormInputLabel,{...xe,ref:je,sizes:j,sizeUnits:M,margin:C,marginXXS:T,marginXS:y,marginS:I,marginM:B,marginL:q,marginXL:D,marginTop:F,marginTopXXS:k,marginTopXS:N,marginTopS:E,marginTopM:H,marginTopL:P,marginTopXL:O,marginRight:U,marginRightXXS:Z,marginRightXS:$,marginRightS:A,marginRightM:G,marginRightL:K,marginRightXL:V,marginBottom:W,marginBottomXXS:_,marginBottomXS:J,marginBottomS:Q,marginBottomM:Y,marginBottomL:ee,marginBottomXL:re,marginLeft:te,marginLeftXXS:ae,marginLeftXS:ie,marginLeftS:ne,marginLeftM:oe,marginLeftL:se,marginLeftXL:le,className:Re,style:Se,contrast:p,error:R,inline:X,disabled:ze,primary:s,secondary:b,success:L,palette:{color:ze?Xe.colorDisabled:Xe.color,backgroundColor:ze?Xe.backgroundColorDisabled:Xe.backgroundColor,backgroundColorHover:ze?Xe.backgroundColorDisabled:Xe.backgroundColorHover,borderColor:ze?Xe.borderColorDisabled:Xe.borderColor},onClick:()=>{ve.current&&ve.current.focus()},onFocus:()=>{Be(!0)},onPointerDown:e=>{e.target!==ve.current&&e.target instanceof Node&&e.preventDefault()},onBlur:e=>{ve.current&&!e.currentTarget.contains(e.relatedTarget)&&Be(Boolean(ve.current.value))},overflow:"hidden",input:jsxRuntime.jsxs(InputLabel.InputLabel,{...xe,sizes:sizes$1.SIZES,active:Ie,label:be,labelId:ye,labelPosition:o,children:[d?jsxRuntime.jsx(style.TextareaMimic,{ref:we,rows:1}):null,jsxRuntime.jsx(style.Textarea,{...fe,ref:ve,"aria-labelledby":be?ye:void 0,disabled:ze,onChange:e=>{d&&Ne(),fe.onChange&&fe.onChange(e)},rows:Fe,palette:{color:Xe.color,colorDisabled:Xe.colorDisabled,placeholderColor:Xe.placeholderColor,placeholderColorDisabled:Xe.placeholderColorDisabled}})]}),addonRight:h?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[Me?jsxRuntime.jsx(style.ResizeGlobals,{cursor:ke}):null,jsxRuntime.jsx(style.ResizeIcon,{size:"l",icon:jsxRuntime.jsx(index.ResizeHandle,{}),color:"border-onmain-default-small",tabIndex:0,onPointerDown:Ce,onKeyDown:Te,cursor:ke})]}):null})}),{displayName:"Textarea",sizes:sizes.SIZES});exports.COMPONENT_NAME="Textarea",exports.Textarea=Textarea;
+'use strict';var React=require('react');var styled=require('styled-components');var nanoid=require('nanoid');var withMergedProps=require('../../hocs/withMergedProps.js');var useResizable=require('../../hooks/useResizable.js');var misc=require('../../shared/utils/misc.js');var sizes=require('./sizes.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var FormInputLabel=require('../FormInputLabel/FormInputLabel.js');var index=require('../../icon-pack/src/icons/ResizeHandle/index.js');var InputLabel=require('../InputLabel/InputLabel.js');var sizes$1=require('../FormInput/sizes.js');const Textarea=withMergedProps.withMergedProps(React.forwardRef((e,r)=>{const t=styled.useTheme();const{size:a="m",rows:i=2,maxRows:n=30,labelPosition:o="dynamic",primary:s=!0,width:l=t.defaultInputControlsWidth,autosize:m=!0,rounded:u=!0,color:c="mineShaft",placeholderColor:g="silver",autoRows:d,resize:h,contrast:p,inline:X,secondary:b,success:L,error:R,sizeXXS:S,sizeXS:f,sizeS:z,sizeM:x,sizeL:v,sizeXL:w,sizes:j,sizeUnits:M,margin:C,marginXXS:T,marginXS:y,marginS:I,marginM:B,marginL:q,marginXL:D,marginTop:F,marginTopXXS:k,marginTopXS:N,marginTopS:E,marginTopM:H,marginTopL:P,marginTopXL:O,marginRight:U,marginRightXXS:Z,marginRightXS:$,marginRightS:A,marginRightM:G,marginRightL:K,marginRightXL:V,marginBottom:W,marginBottomXXS:_,marginBottomXS:J,marginBottomS:Q,marginBottomM:Y,marginBottomL:ee,marginBottomXL:re,marginLeft:te,marginLeftXXS:ae,marginLeftXS:ie,marginLeftS:ne,marginLeftM:oe,marginLeftL:se,marginLeftXL:le,widthXXS:me,widthXS:ue,widthS:ce,widthM:ge,widthL:de,widthXL:he,preset:pe,palette:Xe,label:be,fluid:Le,className:Re,style:Se,disabled:fe,...ze}=e;const xe={size:a,sizeXXS:S,sizeXS:f,sizeS:z,sizeM:x,sizeL:v,sizeXL:w};const ve=React.useRef(null);const we=React.useRef(null);const je=React.useRef(null);React.useImperativeHandle(r,()=>ve.current,[]);const[Me,Ce,Te]=useResizable.useResizable({target:je,direction:h});const ye=React.useMemo(()=>nanoid.nanoid(),[]);const[Ie,Be]=React.useState(()=>{const e=ze.value??ze.defaultValue;return typeof e=='string'&&e.length>0});const[qe,De]=React.useState(()=>Math.min(i,n));const Fe=pe==='brand'&&d||pe!=='brand'&&m?qe:Math.min(i,n);const ke=h==='horizontal'?'ew-resize':h==='vertical'?'ns-resize':'nwse-resize';const Ne=React.useCallback(()=>{if(!ve.current)return;if(pe==='brand'){if(!we.current)return;we.current.value=ve.current.value;const e=Math.max(Math.round(we.current.scrollHeight/we.current.clientHeight),i);return void De(Math.min(e,n))}const e=getComputedStyle(ve.current);const r=parseFloat(e.lineHeight);const t=Math.max(Math.round((ve.current.scrollHeight-parseFloat(e.paddingTop)-parseFloat(e.paddingBottom))/(Number.isNaN(r)?parseFloat(e.fontSize)*1.2:r)),i);De(e=>t>e?Math.min(t,n):ve.current&&!ve.current.value?i:e)},[pe,i,n]);return React.useLayoutEffect(()=>{pe==='brand'&&typeof ze.value=='string'&&ve.current&&ve.current!==document.activeElement&&Be(ze.value.length>0)},[pe,ze.value]),React.useEffect(()=>{const e=misc.createThrottledCallback(Ne,200);return(pe==='brand'&&d||pe!=='brand'&&m)&&(Ne(),window.addEventListener('resize',e)),()=>{window.removeEventListener('resize',e)}},[pe,d,m,Ne]),pe!=='brand'?jsxRuntime.jsx(style.Root,{...ze,ref:ve,className:Re,style:Se,onChange:e=>{m&&Ne(),ze.onChange&&ze.onChange(e)},rows:Fe,color:c,rounded:u,placeholderColor:g,disabled:fe,error:R,fluid:Le,width:l,widthXXS:me,widthXS:ue,widthS:ce,widthM:ge,widthL:de,widthXL:he}):jsxRuntime.jsx(FormInputLabel.FormInputLabel,{...xe,ref:je,sizes:j,sizeUnits:M,margin:C,marginXXS:T,marginXS:y,marginS:I,marginM:B,marginL:q,marginXL:D,marginTop:F,marginTopXXS:k,marginTopXS:N,marginTopS:E,marginTopM:H,marginTopL:P,marginTopXL:O,marginRight:U,marginRightXXS:Z,marginRightXS:$,marginRightS:A,marginRightM:G,marginRightL:K,marginRightXL:V,marginBottom:W,marginBottomXXS:_,marginBottomXS:J,marginBottomS:Q,marginBottomM:Y,marginBottomL:ee,marginBottomXL:re,marginLeft:te,marginLeftXXS:ae,marginLeftXS:ie,marginLeftS:ne,marginLeftM:oe,marginLeftL:se,marginLeftXL:le,className:Re,style:Se,contrast:p,error:R,inline:X,disabled:fe,primary:s,secondary:b,success:L,palette:{color:fe?Xe.colorDisabled:Xe.color,backgroundColor:fe?Xe.backgroundColorDisabled:Xe.backgroundColor,backgroundColorHover:fe?Xe.backgroundColorDisabled:Xe.backgroundColorHover,borderColor:fe?Xe.borderColorDisabled:Xe.borderColor},onClick:()=>{ve.current&&ve.current.focus()},onFocus:()=>{Be(!0)},onPointerDown:e=>{e.target!==ve.current&&e.target instanceof Node&&e.preventDefault()},onBlur:e=>{ve.current&&!e.currentTarget.contains(e.relatedTarget)&&Be(Boolean(ve.current.value))},overflow:"hidden",input:jsxRuntime.jsxs(InputLabel.InputLabel,{...xe,sizes:sizes$1.SIZES,active:Ie,label:be,labelId:ye,labelPosition:o,children:[d?jsxRuntime.jsx(style.TextareaMimic,{ref:we,rows:1}):null,jsxRuntime.jsx(style.Textarea,{...ze,ref:ve,"aria-labelledby":be?ye:void 0,disabled:fe,onChange:e=>{d&&Ne(),ze.onChange&&ze.onChange(e)},rows:Fe,palette:{color:Xe.color,colorDisabled:Xe.colorDisabled,placeholderColor:Xe.placeholderColor,placeholderColorDisabled:Xe.placeholderColorDisabled}})]}),floats:h?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[Me?jsxRuntime.jsx(style.ResizeGlobals,{cursor:ke}):null,jsxRuntime.jsx(style.ResizeIcon,{size:"l",icon:jsxRuntime.jsx(index.ResizeHandle,{}),color:"border-onmain-default-small",tabIndex:0,onPointerDown:Ce,onKeyDown:Te,cursor:ke})]}):void 0})}),{displayName:"Textarea",sizes:sizes.SIZES});exports.COMPONENT_NAME="Textarea",exports.Textarea=Textarea;
 //# sourceMappingURL=Textarea.js.map

package/components/Textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useImperativeHandle,\n  useLayoutEffect,\n  useEffect,\n  useRef,\n  useState,\n  useMemo,\n  useCallback,\n} from 'react'\nimport { useTheme } from 'styled-components'\nimport { nanoid } from 'nanoid'\nimport { ResizeHandle } from '@foxford/icon-pack'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { InputLabel } from 'components/InputLabel'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { useResizable } from 'hooks/useResizable'\nimport { createThrottledCallback } from 'shared/utils/misc'\nimport { FormInputLabel } from 'components/FormInputLabel'\nimport { SIZES as SIZES_FORM_INPUT } from 'components/FormInput'\nimport { SIZES } from './sizes'\nimport * as Styled from './style'\nimport type { TextareaProps } from './types'\n\nconst COMPONENT_NAME = 'Textarea'\n\n/**\n *\n * Компонент для приема многострочного ввода.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<textarea\\> элемента.\n */\nconst Textarea: React.ForwardRefExoticComponent<TextareaProps> = withMergedProps<TextareaProps, HTMLTextAreaElement>(\n  forwardRef<HTMLTextAreaElement, MergedProps<TextareaProps>>((props, forwardedRef) => {\n    const theme = useTheme()\n\n    const {\n      size = 'm',\n      rows = 2,\n      maxRows = 30,\n      labelPosition = 'dynamic',\n      primary = true,\n      width = theme.defaultInputControlsWidth,\n      autosize = true,\n      rounded = true,\n      color = 'mineShaft',\n      placeholderColor = 'silver',\n      autoRows,\n      resize,\n      contrast,\n      inline,\n      secondary,\n      success,\n      error,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n      sizes,\n      sizeUnits,\n      margin,\n      marginXXS,\n      marginXS,\n      marginS,\n      marginM,\n      marginL,\n      marginXL,\n      marginTop,\n      marginTopXXS,\n      marginTopXS,\n      marginTopS,\n      marginTopM,\n      marginTopL,\n      marginTopXL,\n      marginRight,\n      marginRightXXS,\n      marginRightXS,\n      marginRightS,\n      marginRightM,\n      marginRightL,\n      marginRightXL,\n      marginBottom,\n      marginBottomXXS,\n      marginBottomXS,\n      marginBottomS,\n      marginBottomM,\n      marginBottomL,\n      marginBottomXL,\n      marginLeft,\n      marginLeftXXS,\n      marginLeftXS,\n      marginLeftS,\n      marginLeftM,\n      marginLeftL,\n      marginLeftXL,\n      widthXXS,\n      widthXS,\n      widthS,\n      widthM,\n      widthL,\n      widthXL,\n      preset,\n      palette,\n      label,\n      fluid,\n      className,\n      style,\n      disabled,\n      ...textareaProps\n    } = props\n\n    const sizeProps = {\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n    }\n\n    const textareaRef = useRef<HTMLTextAreaElement>(null)\n\n    const textareaMimicRef = useRef<HTMLTextAreaElement>(null)\n\n    const formInputLabelRef = useRef<HTMLDivElement>(null)\n\n    useImperativeHandle(forwardedRef, () => textareaRef.current as HTMLTextAreaElement, [])\n\n    const [resizing, handleResizeStart, handleResizeOnNudge] = useResizable<HTMLDivElement, HTMLSpanElement>({\n      target: formInputLabelRef,\n      direction: resize,\n    })\n\n    const labelId = useMemo(() => nanoid(), [])\n\n    const [active, setActive] = useState(() => {\n      const valueInit = textareaProps.value ?? textareaProps.defaultValue\n\n      return typeof valueInit === 'string' && valueInit.length > 0\n    })\n\n    const [autoRowsCount, setAutoRowsCount] = useState(() => Math.min(rows, maxRows))\n\n    const rowsVisible =\n      (preset === 'brand' && autoRows) || (preset !== 'brand' && autosize) ? autoRowsCount : Math.min(rows, maxRows)\n\n    const cursorResize = resize === 'horizontal' ? 'ew-resize' : resize === 'vertical' ? 'ns-resize' : 'nwse-resize'\n\n    const updateAutoRowsCount = useCallback(() => {\n      if (!textareaRef.current) return\n\n      if (preset === 'brand') {\n        if (!textareaMimicRef.current) return\n\n        textareaMimicRef.current.value = textareaRef.current.value\n\n        const nextRows = Math.max(\n          Math.round(textareaMimicRef.current.scrollHeight / textareaMimicRef.current.clientHeight),\n          rows\n        )\n\n        setAutoRowsCount(Math.min(nextRows, maxRows))\n\n        return\n      }\n\n      const styles = getComputedStyle(textareaRef.current)\n\n      const lineHeight = parseFloat(styles.lineHeight)\n\n      const nextRows = Math.max(\n        Math.round(\n          (textareaRef.current.scrollHeight - parseFloat(styles.paddingTop) - parseFloat(styles.paddingBottom)) /\n            (Number.isNaN(lineHeight) ? parseFloat(styles.fontSize) * 1.2 : lineHeight)\n        ),\n        rows\n      )\n\n      setAutoRowsCount((prevRows) => {\n        if (nextRows > prevRows) return Math.min(nextRows, maxRows)\n        if (textareaRef.current && !textareaRef.current.value) return rows\n\n        return prevRows\n      })\n    }, [preset, rows, maxRows])\n\n    useLayoutEffect(() => {\n      if (\n        preset === 'brand' &&\n        typeof textareaProps.value === 'string' &&\n        textareaRef.current &&\n        textareaRef.current !== document.activeElement\n      ) {\n        setActive(textareaProps.value.length > 0)\n      }\n    }, [preset, textareaProps.value])\n\n    useEffect(() => {\n      const handleResize = createThrottledCallback<UIEvent>(updateAutoRowsCount, 200)\n\n      if ((preset === 'brand' && autoRows) || (preset !== 'brand' && autosize)) {\n        updateAutoRowsCount()\n        window.addEventListener('resize', handleResize)\n      }\n\n      return () => {\n        window.removeEventListener('resize', handleResize)\n      }\n    }, [preset, autoRows, autosize, updateAutoRowsCount])\n\n    if (preset !== 'brand') {\n      return (\n        <Styled.Root\n          {...textareaProps}\n          ref={textareaRef}\n          className={className}\n          style={style}\n          onChange={(evt) => {\n            if (autosize) updateAutoRowsCount()\n            if (textareaProps.onChange) textareaProps.onChange(evt)\n          }}\n          rows={rowsVisible}\n          color={color}\n          rounded={rounded}\n          placeholderColor={placeholderColor}\n          disabled={disabled}\n          error={error}\n          fluid={fluid}\n          width={width}\n          widthXXS={widthXXS}\n          widthXS={widthXS}\n          widthS={widthS}\n          widthM={widthM}\n          widthL={widthL}\n          widthXL={widthXL}\n        />\n      )\n    }\n\n    return (\n      <FormInputLabel\n        {...sizeProps}\n        ref={formInputLabelRef}\n        sizes={sizes}\n        sizeUnits={sizeUnits}\n        margin={margin}\n        marginXXS={marginXXS}\n        marginXS={marginXS}\n        marginS={marginS}\n        marginM={marginM}\n        marginL={marginL}\n        marginXL={marginXL}\n        marginTop={marginTop}\n        marginTopXXS={marginTopXXS}\n        marginTopXS={marginTopXS}\n        marginTopS={marginTopS}\n        marginTopM={marginTopM}\n        marginTopL={marginTopL}\n        marginTopXL={marginTopXL}\n        marginRight={marginRight}\n        marginRightXXS={marginRightXXS}\n        marginRightXS={marginRightXS}\n        marginRightS={marginRightS}\n        marginRightM={marginRightM}\n        marginRightL={marginRightL}\n        marginRightXL={marginRightXL}\n        marginBottom={marginBottom}\n        marginBottomXXS={marginBottomXXS}\n        marginBottomXS={marginBottomXS}\n        marginBottomS={marginBottomS}\n        marginBottomM={marginBottomM}\n        marginBottomL={marginBottomL}\n        marginBottomXL={marginBottomXL}\n        marginLeft={marginLeft}\n        marginLeftXXS={marginLeftXXS}\n        marginLeftXS={marginLeftXS}\n        marginLeftS={marginLeftS}\n        marginLeftM={marginLeftM}\n        marginLeftL={marginLeftL}\n        marginLeftXL={marginLeftXL}\n        className={className}\n        style={style}\n        contrast={contrast}\n        error={error}\n        inline={inline}\n        disabled={disabled}\n        primary={primary}\n        secondary={secondary}\n        success={success}\n        palette={{\n          color: disabled ? palette.colorDisabled : palette.color,\n          backgroundColor: disabled ? palette.backgroundColorDisabled : palette.backgroundColor,\n          backgroundColorHover: disabled ? palette.backgroundColorDisabled : palette.backgroundColorHover,\n          borderColor: disabled ? palette.borderColorDisabled : palette.borderColor,\n        }}\n        onClick={() => {\n          if (textareaRef.current) {\n            textareaRef.current.focus()\n          }\n        }}\n        onFocus={() => {\n          setActive(true)\n        }}\n        onPointerDown={(evt) => {\n          if (evt.target === textareaRef.current || !(evt.target instanceof Node)) {\n            return\n          }\n          evt.preventDefault()\n        }}\n        onBlur={(evt) => {\n          if (textareaRef.current && !evt.currentTarget.contains(evt.relatedTarget)) {\n            setActive(Boolean(textareaRef.current.value))\n          }\n        }}\n        overflow='hidden'\n        input={\n          <InputLabel\n            {...sizeProps}\n            sizes={SIZES_FORM_INPUT}\n            active={active}\n            label={label}\n            labelId={labelId}\n            labelPosition={labelPosition}\n          >\n            {autoRows ? <Styled.TextareaMimic ref={textareaMimicRef} rows={1} /> : null}\n            <Styled.Textarea\n              {...textareaProps}\n              ref={textareaRef}\n              aria-labelledby={label ? labelId : undefined}\n              disabled={disabled}\n              onChange={(evt) => {\n                if (autoRows) updateAutoRowsCount()\n                if (textareaProps.onChange) textareaProps.onChange(evt)\n              }}\n              rows={rowsVisible}\n              palette={{\n                color: palette.color,\n                colorDisabled: palette.colorDisabled,\n                placeholderColor: palette.placeholderColor,\n                placeholderColorDisabled: palette.placeholderColorDisabled,\n              }}\n            />\n          </InputLabel>\n        }\n        addonRight={\n          resize ? (\n            <>\n              {resizing ? <Styled.ResizeGlobals cursor={cursorResize} /> : null}\n              <Styled.ResizeIcon\n                size='l'\n                icon={<ResizeHandle />}\n                color='border-onmain-default-small'\n                tabIndex={0}\n                onPointerDown={handleResizeStart}\n                onKeyDown={handleResizeOnNudge}\n                cursor={cursorResize}\n              />\n            </>\n          ) : null\n        }\n      />\n    )\n  }),\n  {\n    displayName: COMPONENT_NAME,\n    sizes: SIZES,\n  }\n)\n\nexport { Textarea, COMPONENT_NAME }\n"],"names":["Textarea","withMergedProps","forwardRef","props","forwardedRef","theme","useTheme","size","rows","maxRows","labelPosition","primary","width","defaultInputControlsWidth","autosize","rounded","color","placeholderColor","autoRows","resize","contrast","inline","secondary","success","error","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","sizes","sizeUnits","margin","marginXXS","marginXS","marginS","marginM","marginL","marginXL","marginTop","marginTopXXS","marginTopXS","marginTopS","marginTopM","marginTopL","marginTopXL","marginRight","marginRightXXS","marginRightXS","marginRightS","marginRightM","marginRightL","marginRightXL","marginBottom","marginBottomXXS","marginBottomXS","marginBottomS","marginBottomM","marginBottomL","marginBottomXL","marginLeft","marginLeftXXS","marginLeftXS","marginLeftS","marginLeftM","marginLeftL","marginLeftXL","widthXXS","widthXS","widthS","widthM","widthL","widthXL","preset","palette","label","fluid","className","style","disabled","textareaProps","sizeProps","textareaRef","useRef","textareaMimicRef","formInputLabelRef","useImperativeHandle","current","resizing","handleResizeStart","handleResizeOnNudge","useResizable","target","direction","labelId","useMemo","nanoid","active","setActive","useState","valueInit","value","defaultValue","length","autoRowsCount","setAutoRowsCount","Math","min","rowsVisible","cursorResize","updateAutoRowsCount","useCallback","nextRows","max","round","scrollHeight","clientHeight","styles","getComputedStyle","lineHeight","parseFloat","paddingTop","paddingBottom","Number","isNaN","fontSize","prevRows","useLayoutEffect","document","activeElement","useEffect","handleResize","createThrottledCallback","window","addEventListener","removeEventListener","_jsx","Styled","ref","onChange","evt","FormInputLabel","colorDisabled","backgroundColor","backgroundColorDisabled","backgroundColorHover","borderColor","borderColorDisabled","onClick","focus","onFocus","onPointerDown","Node","preventDefault","onBlur","currentTarget","contains","relatedTarget","Boolean","overflow","input","_jsxs","InputLabel","SIZES_FORM_INPUT","children","undefined","placeholderColorDisabled","addonRight","_Fragment","cursor","icon","ResizeHandle","tabIndex","onKeyDown","displayName","SIZES"],"mappings":"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"}
+{"version":3,"file":"Textarea.js","sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useImperativeHandle,\n  useLayoutEffect,\n  useEffect,\n  useRef,\n  useState,\n  useMemo,\n  useCallback,\n} from 'react'\nimport { useTheme } from 'styled-components'\nimport { nanoid } from 'nanoid'\nimport { ResizeHandle } from '@foxford/icon-pack'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { InputLabel } from 'components/InputLabel'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { useResizable } from 'hooks/useResizable'\nimport { createThrottledCallback } from 'shared/utils/misc'\nimport { FormInputLabel } from 'components/FormInputLabel'\nimport { SIZES as SIZES_FORM_INPUT } from 'components/FormInput'\nimport { SIZES } from './sizes'\nimport * as Styled from './style'\nimport type { TextareaProps } from './types'\n\nconst COMPONENT_NAME = 'Textarea'\n\n/**\n *\n * Компонент для приема многострочного ввода.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<textarea\\> элемента.\n */\nconst Textarea: React.ForwardRefExoticComponent<TextareaProps> = withMergedProps<TextareaProps, HTMLTextAreaElement>(\n  forwardRef<HTMLTextAreaElement, MergedProps<TextareaProps>>((props, forwardedRef) => {\n    const theme = useTheme()\n\n    const {\n      size = 'm',\n      rows = 2,\n      maxRows = 30,\n      labelPosition = 'dynamic',\n      primary = true,\n      width = theme.defaultInputControlsWidth,\n      autosize = true,\n      rounded = true,\n      color = 'mineShaft',\n      placeholderColor = 'silver',\n      autoRows,\n      resize,\n      contrast,\n      inline,\n      secondary,\n      success,\n      error,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n      sizes,\n      sizeUnits,\n      margin,\n      marginXXS,\n      marginXS,\n      marginS,\n      marginM,\n      marginL,\n      marginXL,\n      marginTop,\n      marginTopXXS,\n      marginTopXS,\n      marginTopS,\n      marginTopM,\n      marginTopL,\n      marginTopXL,\n      marginRight,\n      marginRightXXS,\n      marginRightXS,\n      marginRightS,\n      marginRightM,\n      marginRightL,\n      marginRightXL,\n      marginBottom,\n      marginBottomXXS,\n      marginBottomXS,\n      marginBottomS,\n      marginBottomM,\n      marginBottomL,\n      marginBottomXL,\n      marginLeft,\n      marginLeftXXS,\n      marginLeftXS,\n      marginLeftS,\n      marginLeftM,\n      marginLeftL,\n      marginLeftXL,\n      widthXXS,\n      widthXS,\n      widthS,\n      widthM,\n      widthL,\n      widthXL,\n      preset,\n      palette,\n      label,\n      fluid,\n      className,\n      style,\n      disabled,\n      ...textareaProps\n    } = props\n\n    const sizeProps = {\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n    }\n\n    const textareaRef = useRef<HTMLTextAreaElement>(null)\n\n    const textareaMimicRef = useRef<HTMLTextAreaElement>(null)\n\n    const formInputLabelRef = useRef<HTMLDivElement>(null)\n\n    useImperativeHandle(forwardedRef, () => textareaRef.current as HTMLTextAreaElement, [])\n\n    const [resizing, handleResizeStart, handleResizeOnNudge] = useResizable<HTMLDivElement, HTMLSpanElement>({\n      target: formInputLabelRef,\n      direction: resize,\n    })\n\n    const labelId = useMemo(() => nanoid(), [])\n\n    const [active, setActive] = useState(() => {\n      const valueInit = textareaProps.value ?? textareaProps.defaultValue\n\n      return typeof valueInit === 'string' && valueInit.length > 0\n    })\n\n    const [autoRowsCount, setAutoRowsCount] = useState(() => Math.min(rows, maxRows))\n\n    const rowsVisible =\n      (preset === 'brand' && autoRows) || (preset !== 'brand' && autosize) ? autoRowsCount : Math.min(rows, maxRows)\n\n    const cursorResize = resize === 'horizontal' ? 'ew-resize' : resize === 'vertical' ? 'ns-resize' : 'nwse-resize'\n\n    const updateAutoRowsCount = useCallback(() => {\n      if (!textareaRef.current) return\n\n      if (preset === 'brand') {\n        if (!textareaMimicRef.current) return\n\n        textareaMimicRef.current.value = textareaRef.current.value\n\n        const nextRows = Math.max(\n          Math.round(textareaMimicRef.current.scrollHeight / textareaMimicRef.current.clientHeight),\n          rows\n        )\n\n        setAutoRowsCount(Math.min(nextRows, maxRows))\n\n        return\n      }\n\n      const styles = getComputedStyle(textareaRef.current)\n\n      const lineHeight = parseFloat(styles.lineHeight)\n\n      const nextRows = Math.max(\n        Math.round(\n          (textareaRef.current.scrollHeight - parseFloat(styles.paddingTop) - parseFloat(styles.paddingBottom)) /\n            (Number.isNaN(lineHeight) ? parseFloat(styles.fontSize) * 1.2 : lineHeight)\n        ),\n        rows\n      )\n\n      setAutoRowsCount((prevRows) => {\n        if (nextRows > prevRows) return Math.min(nextRows, maxRows)\n        if (textareaRef.current && !textareaRef.current.value) return rows\n\n        return prevRows\n      })\n    }, [preset, rows, maxRows])\n\n    useLayoutEffect(() => {\n      if (\n        preset === 'brand' &&\n        typeof textareaProps.value === 'string' &&\n        textareaRef.current &&\n        textareaRef.current !== document.activeElement\n      ) {\n        setActive(textareaProps.value.length > 0)\n      }\n    }, [preset, textareaProps.value])\n\n    useEffect(() => {\n      const handleResize = createThrottledCallback<UIEvent>(updateAutoRowsCount, 200)\n\n      if ((preset === 'brand' && autoRows) || (preset !== 'brand' && autosize)) {\n        updateAutoRowsCount()\n        window.addEventListener('resize', handleResize)\n      }\n\n      return () => {\n        window.removeEventListener('resize', handleResize)\n      }\n    }, [preset, autoRows, autosize, updateAutoRowsCount])\n\n    if (preset !== 'brand') {\n      return (\n        <Styled.Root\n          {...textareaProps}\n          ref={textareaRef}\n          className={className}\n          style={style}\n          onChange={(evt) => {\n            if (autosize) updateAutoRowsCount()\n            if (textareaProps.onChange) textareaProps.onChange(evt)\n          }}\n          rows={rowsVisible}\n          color={color}\n          rounded={rounded}\n          placeholderColor={placeholderColor}\n          disabled={disabled}\n          error={error}\n          fluid={fluid}\n          width={width}\n          widthXXS={widthXXS}\n          widthXS={widthXS}\n          widthS={widthS}\n          widthM={widthM}\n          widthL={widthL}\n          widthXL={widthXL}\n        />\n      )\n    }\n\n    return (\n      <FormInputLabel\n        {...sizeProps}\n        ref={formInputLabelRef}\n        sizes={sizes}\n        sizeUnits={sizeUnits}\n        margin={margin}\n        marginXXS={marginXXS}\n        marginXS={marginXS}\n        marginS={marginS}\n        marginM={marginM}\n        marginL={marginL}\n        marginXL={marginXL}\n        marginTop={marginTop}\n        marginTopXXS={marginTopXXS}\n        marginTopXS={marginTopXS}\n        marginTopS={marginTopS}\n        marginTopM={marginTopM}\n        marginTopL={marginTopL}\n        marginTopXL={marginTopXL}\n        marginRight={marginRight}\n        marginRightXXS={marginRightXXS}\n        marginRightXS={marginRightXS}\n        marginRightS={marginRightS}\n        marginRightM={marginRightM}\n        marginRightL={marginRightL}\n        marginRightXL={marginRightXL}\n        marginBottom={marginBottom}\n        marginBottomXXS={marginBottomXXS}\n        marginBottomXS={marginBottomXS}\n        marginBottomS={marginBottomS}\n        marginBottomM={marginBottomM}\n        marginBottomL={marginBottomL}\n        marginBottomXL={marginBottomXL}\n        marginLeft={marginLeft}\n        marginLeftXXS={marginLeftXXS}\n        marginLeftXS={marginLeftXS}\n        marginLeftS={marginLeftS}\n        marginLeftM={marginLeftM}\n        marginLeftL={marginLeftL}\n        marginLeftXL={marginLeftXL}\n        className={className}\n        style={style}\n        contrast={contrast}\n        error={error}\n        inline={inline}\n        disabled={disabled}\n        primary={primary}\n        secondary={secondary}\n        success={success}\n        palette={{\n          color: disabled ? palette.colorDisabled : palette.color,\n          backgroundColor: disabled ? palette.backgroundColorDisabled : palette.backgroundColor,\n          backgroundColorHover: disabled ? palette.backgroundColorDisabled : palette.backgroundColorHover,\n          borderColor: disabled ? palette.borderColorDisabled : palette.borderColor,\n        }}\n        onClick={() => {\n          if (textareaRef.current) {\n            textareaRef.current.focus()\n          }\n        }}\n        onFocus={() => {\n          setActive(true)\n        }}\n        onPointerDown={(evt) => {\n          if (evt.target === textareaRef.current || !(evt.target instanceof Node)) {\n            return\n          }\n          evt.preventDefault()\n        }}\n        onBlur={(evt) => {\n          if (textareaRef.current && !evt.currentTarget.contains(evt.relatedTarget)) {\n            setActive(Boolean(textareaRef.current.value))\n          }\n        }}\n        overflow='hidden'\n        input={\n          <InputLabel\n            {...sizeProps}\n            sizes={SIZES_FORM_INPUT}\n            active={active}\n            label={label}\n            labelId={labelId}\n            labelPosition={labelPosition}\n          >\n            {autoRows ? <Styled.TextareaMimic ref={textareaMimicRef} rows={1} /> : null}\n            <Styled.Textarea\n              {...textareaProps}\n              ref={textareaRef}\n              aria-labelledby={label ? labelId : undefined}\n              disabled={disabled}\n              onChange={(evt) => {\n                if (autoRows) updateAutoRowsCount()\n                if (textareaProps.onChange) textareaProps.onChange(evt)\n              }}\n              rows={rowsVisible}\n              palette={{\n                color: palette.color,\n                colorDisabled: palette.colorDisabled,\n                placeholderColor: palette.placeholderColor,\n                placeholderColorDisabled: palette.placeholderColorDisabled,\n              }}\n            />\n          </InputLabel>\n        }\n        floats={\n          resize ? (\n            <>\n              {resizing ? <Styled.ResizeGlobals cursor={cursorResize} /> : null}\n              <Styled.ResizeIcon\n                size='l'\n                icon={<ResizeHandle />}\n                color='border-onmain-default-small'\n                tabIndex={0}\n                onPointerDown={handleResizeStart}\n                onKeyDown={handleResizeOnNudge}\n                cursor={cursorResize}\n              />\n            </>\n          ) : undefined\n        }\n      />\n    )\n  }),\n  {\n    displayName: COMPONENT_NAME,\n    sizes: SIZES,\n  }\n)\n\nexport { Textarea, COMPONENT_NAME }\n"],"names":["Textarea","withMergedProps","forwardRef","props","forwardedRef","theme","useTheme","size","rows","maxRows","labelPosition","primary","width","defaultInputControlsWidth","autosize","rounded","color","placeholderColor","autoRows","resize","contrast","inline","secondary","success","error","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","sizes","sizeUnits","margin","marginXXS","marginXS","marginS","marginM","marginL","marginXL","marginTop","marginTopXXS","marginTopXS","marginTopS","marginTopM","marginTopL","marginTopXL","marginRight","marginRightXXS","marginRightXS","marginRightS","marginRightM","marginRightL","marginRightXL","marginBottom","marginBottomXXS","marginBottomXS","marginBottomS","marginBottomM","marginBottomL","marginBottomXL","marginLeft","marginLeftXXS","marginLeftXS","marginLeftS","marginLeftM","marginLeftL","marginLeftXL","widthXXS","widthXS","widthS","widthM","widthL","widthXL","preset","palette","label","fluid","className","style","disabled","textareaProps","sizeProps","textareaRef","useRef","textareaMimicRef","formInputLabelRef","useImperativeHandle","current","resizing","handleResizeStart","handleResizeOnNudge","useResizable","target","direction","labelId","useMemo","nanoid","active","setActive","useState","valueInit","value","defaultValue","length","autoRowsCount","setAutoRowsCount","Math","min","rowsVisible","cursorResize","updateAutoRowsCount","useCallback","nextRows","max","round","scrollHeight","clientHeight","styles","getComputedStyle","lineHeight","parseFloat","paddingTop","paddingBottom","Number","isNaN","fontSize","prevRows","useLayoutEffect","document","activeElement","useEffect","handleResize","createThrottledCallback","window","addEventListener","removeEventListener","_jsx","Styled","ref","onChange","evt","FormInputLabel","colorDisabled","backgroundColor","backgroundColorDisabled","backgroundColorHover","borderColor","borderColorDisabled","onClick","focus","onFocus","onPointerDown","Node","preventDefault","onBlur","currentTarget","contains","relatedTarget","Boolean","overflow","input","_jsxs","InputLabel","SIZES_FORM_INPUT","children","undefined","placeholderColorDisabled","floats","_Fragment","cursor","icon","ResizeHandle","tabIndex","onKeyDown","displayName","SIZES"],"mappings":"umBAgCA,MAAMA,SAA2DC,gBAAAA,gBAC/DC,MAAAA,WAA4D,CAACC,EAAOC,KAClE,MAAMC,EAAQC,OAAAA,WAEd,MAAMC,KACJA,EAAO,IAAGC,KACVA,EAAO,EAACC,QACRA,EAAU,GAAEC,cACZA,EAAgB,UAASC,QACzBA,GAAU,EAAIC,MACdA,EAAQP,EAAMQ,0BAAyBC,SACvCA,GAAW,EAAIC,QACfA,GAAU,EAAIC,MACdA,EAAQ,YAAWC,iBACnBA,EAAmB,SAAQC,SAC3BA,EAAQC,OACRA,EAAMC,SACNA,EAAQC,OACRA,EAAMC,UACNA,EAASC,QACTA,EAAOC,MACPA,EAAKC,QACLA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,EAAMC,MACNA,EAAKC,UACLA,EAASC,OACTA,EAAMC,UACNA,EAASC,SACTA,EAAQC,QACRA,EAAOC,QACPA,EAAOC,QACPA,EAAOC,SACPA,EAAQC,UACRA,EAASC,aACTA,EAAYC,YACZA,EAAWC,WACXA,EAAUC,WACVA,EAAUC,WACVA,EAAUC,YACVA,EAAWC,YACXA,EAAWC,eACXA,EAAcC,cACdA,EAAaC,aACbA,EAAYC,aACZA,EAAYC,aACZA,EAAYC,cACZA,EAAaC,aACbA,EAAYC,gBACZA,EAAeC,eACfA,EAAcC,cACdA,EAAaC,cACbA,EAAaC,cACbA,GAAaC,eACbA,GAAcC,WACdA,GAAUC,cACVA,GAAaC,aACbA,GAAYC,YACZA,GAAWC,YACXA,GAAWC,YACXA,GAAWC,aACXA,GAAYC,SACZA,GAAQC,QACRA,GAAOC,OACPA,GAAMC,OACNA,GAAMC,OACNA,GAAMC,QACNA,GAAOC,OACPA,GAAMC,QACNA,GAAOC,MACPA,GAAKC,MACLA,GAAKC,UACLA,SACAC,GAAKC,SACLA,MACGC,IACD9E,EAEJ,MAAM+E,GAAY,CAChB3E,OACAkB,UACAC,SACAC,QACAC,QACAC,QACAC,UAGF,MAAMqD,GAAcC,MAAAA,OAA4B,MAEhD,MAAMC,GAAmBD,MAAAA,OAA4B,MAErD,MAAME,GAAoBF,MAAAA,OAAuB,MAEjDG,MAAAA,oBAAoBnF,EAAc,IAAM+E,GAAYK,QAAgC,IAEpF,MAAOC,GAAUC,GAAmBC,IAAuBC,aAAAA,aAA8C,CACvGC,OAAQP,GACRQ,UAAW3E,IAGb,MAAM4E,GAAUC,MAAAA,QAAQ,IAAMC,OAAAA,SAAU,IAExC,MAAOC,GAAQC,IAAaC,MAAAA,SAAS,KACnC,MAAMC,EAAYpB,GAAcqB,OAASrB,GAAcsB,aAEvD,cAAcF,GAAc,UAAYA,EAAUG,OAAS,IAG7D,MAAOC,GAAeC,IAAoBN,MAAAA,SAAS,IAAMO,KAAKC,IAAIpG,EAAMC,IAExE,MAAMoG,GACHnC,KAAW,SAAWxD,GAAcwD,KAAW,SAAW5D,EAAY2F,GAAgBE,KAAKC,IAAIpG,EAAMC,GAExG,MAAMqG,GAAe3F,IAAW,aAAe,YAAcA,IAAW,WAAa,YAAc,cAEnG,MAAM4F,GAAsBC,MAAAA,YAAY,KACtC,IAAK7B,GAAYK,QAAS,OAE1B,GAAId,KAAW,QAAS,CACtB,IAAKW,GAAiBG,QAAS,OAE/BH,GAAiBG,QAAQc,MAAQnB,GAAYK,QAAQc,MAErD,MAAMW,EAAWN,KAAKO,IACpBP,KAAKQ,MAAM9B,GAAiBG,QAAQ4B,aAAe/B,GAAiBG,QAAQ6B,cAC5E7G,GAKF,YAFAkG,GAAiBC,KAAKC,IAAIK,EAAUxG,GAGtC,CAEA,MAAM6G,EAASC,iBAAiBpC,GAAYK,SAE5C,MAAMgC,EAAaC,WAAWH,EAAOE,YAErC,MAAMP,EAAWN,KAAKO,IACpBP,KAAKQ,OACFhC,GAAYK,QAAQ4B,aAAeK,WAAWH,EAAOI,YAAcD,WAAWH,EAAOK,iBACnFC,OAAOC,MAAML,GAAcC,WAAWH,EAAOQ,UAAY,IAAMN,IAEpEhH,GAGFkG,GAAkBqB,GACZd,EAAWc,EAAiBpB,KAAKC,IAAIK,EAAUxG,GAC/C0E,GAAYK,UAAYL,GAAYK,QAAQc,MAAc9F,EAEvDuH,IAER,CAACrD,GAAQlE,EAAMC,IA0BlB,OAxBAuH,MAAAA,gBAAgB,KAEZtD,KAAW,gBACJO,GAAcqB,OAAU,UAC/BnB,GAAYK,SACZL,GAAYK,UAAYyC,SAASC,eAEjC/B,GAAUlB,GAAcqB,MAAME,OAAS,IAExC,CAAC9B,GAAQO,GAAcqB,QAE1B6B,MAAAA,UAAU,KACR,MAAMC,EAAeC,KAAAA,wBAAiCtB,GAAqB,KAO3E,OALKrC,KAAW,SAAWxD,GAAcwD,KAAW,SAAW5D,KAC7DiG,KACAuB,OAAOC,iBAAiB,SAAUH,IAG7B,KACLE,OAAOE,oBAAoB,SAAUJ,KAEtC,CAAC1D,GAAQxD,EAAUJ,EAAUiG,KAE5BrC,KAAW,QAEX+D,WAAAA,IAACC,MAAAA,KAAW,IACNzD,GACJ0D,IAAKxD,GACLL,UAAWA,GACXC,MAAOA,GACP6D,SAAWC,IACL/H,GAAUiG,KACV9B,GAAc2D,UAAU3D,GAAc2D,SAASC,IAErDrI,KAAMqG,GACN7F,MAAOA,EACPD,QAASA,EACTE,iBAAkBA,EAClB+D,SAAUA,GACVxD,MAAOA,EACPqD,MAAOA,GACPjE,MAAOA,EACPwD,SAAUA,GACVC,QAASA,GACTC,OAAQA,GACRC,OAAQA,GACRC,OAAQA,GACRC,QAASA,KAMbgE,WAAAA,IAACK,eAAAA,eAAc,IACT5D,GACJyD,IAAKrD,GACLvD,MAAOA,EACPC,UAAWA,EACXC,OAAQA,EACRC,UAAWA,EACXC,SAAUA,EACVC,QAASA,EACTC,QAASA,EACTC,QAASA,EACTC,SAAUA,EACVC,UAAWA,EACXC,aAAcA,EACdC,YAAaA,EACbC,WAAYA,EACZC,WAAYA,EACZC,WAAYA,EACZC,YAAaA,EACbC,YAAaA,EACbC,eAAgBA,EAChBC,cAAeA,EACfC,aAAcA,EACdC,aAAcA,EACdC,aAAcA,EACdC,cAAeA,EACfC,aAAcA,EACdC,gBAAiBA,EACjBC,eAAgBA,EAChBC,cAAeA,EACfC,cAAeA,EACfC,cAAeA,GACfC,eAAgBA,GAChBC,WAAYA,GACZC,cAAeA,GACfC,aAAcA,GACdC,YAAaA,GACbC,YAAaA,GACbC,YAAaA,GACbC,aAAcA,GACdW,UAAWA,GACXC,MAAOA,GACP3D,SAAUA,EACVI,MAAOA,EACPH,OAAQA,EACR2D,SAAUA,GACVrE,QAASA,EACTW,UAAWA,EACXC,QAASA,EACToD,QAAS,CACP3D,MAAOgE,GAAWL,GAAQoE,cAAgBpE,GAAQ3D,MAClDgI,gBAAiBhE,GAAWL,GAAQsE,wBAA0BtE,GAAQqE,gBACtEE,qBAAsBlE,GAAWL,GAAQsE,wBAA0BtE,GAAQuE,qBAC3EC,YAAanE,GAAWL,GAAQyE,oBAAsBzE,GAAQwE,aAEhEE,QAASA,KACHlE,GAAYK,SACdL,GAAYK,QAAQ8D,SAGxBC,QAASA,KACPpD,IAAU,IAEZqD,cAAgBX,IACVA,EAAIhD,SAAWV,GAAYK,SAAaqD,EAAIhD,kBAAkB4D,MAGlEZ,EAAIa,kBAENC,OAASd,IACH1D,GAAYK,UAAYqD,EAAIe,cAAcC,SAAShB,EAAIiB,gBACzD3D,GAAU4D,QAAQ5E,GAAYK,QAAQc,SAG1C0D,SAAS,SACTC,MACEC,WAAAA,KAACC,sBAAU,IACLjF,GACJnD,MAAOqI,QAAAA,MACPlE,OAAQA,GACRtB,MAAOA,GACPmB,QAASA,GACTrF,cAAeA,EAAc2J,UAE5BnJ,EAAWuH,WAAAA,IAACC,oBAAoB,CAACC,IAAKtD,GAAkB7E,KAAM,IAAQ,KACvEiI,WAAAA,IAACC,eAAe,IACVzD,GACJ0D,IAAKxD,GACL,kBAAiBP,GAAQmB,QAAUuE,EACnCtF,SAAUA,GACV4D,SAAWC,IACL3H,GAAU6F,KACV9B,GAAc2D,UAAU3D,GAAc2D,SAASC,IAErDrI,KAAMqG,GACNlC,QAAS,CACP3D,MAAO2D,GAAQ3D,MACf+H,cAAepE,GAAQoE,cACvB9H,iBAAkB0D,GAAQ1D,iBAC1BsJ,yBAA0B5F,GAAQ4F,+BAK1CC,OACErJ,EACE+I,WAAAA,KAAAO,oBAAA,CAAAJ,UACG5E,GAAWgD,WAAAA,IAACC,oBAAoB,CAACgC,OAAQ5D,KAAmB,KAC7D2B,WAAAA,IAACC,iBAAiB,CAChBnI,KAAK,IACLoK,KAAMlC,WAAAA,IAACmC,MAAAA,iBACP5J,MAAM,8BACN6J,SAAU,EACVrB,cAAe9D,GACfoF,UAAWnF,GACX+E,OAAQ5D,aAGVwD,MAKZ,CACES,YAvVmB,WAwVnBhJ,MAAOiJ,MAAAA,+BAxVY"}

package/components/Textarea/Textarea.mjs

@@ -1,2 +1,2 @@
-import{forwardRef,useRef,useImperativeHandle,useMemo,useState,useCallback,useLayoutEffect,useEffect}from'react';import{useTheme}from'styled-components';import{nanoid}from'nanoid';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{useResizable}from'../../hooks/useResizable.mjs';import{createThrottledCallback}from'../../shared/utils/misc.mjs';import{SIZES}from'./sizes.mjs';import{Root,ResizeGlobals,ResizeIcon,TextareaMimic,Textarea as Textarea$1}from'./style.mjs';import{jsx,jsxs,Fragment}from'react/jsx-runtime';import{FormInputLabel}from'../FormInputLabel/FormInputLabel.mjs';import{ResizeHandle}from'../../icon-pack/src/icons/ResizeHandle/index.mjs';import{InputLabel}from'../InputLabel/InputLabel.mjs';import{SIZES as SIZES$1}from'../FormInput/sizes.mjs';const COMPONENT_NAME='Textarea';const Textarea=withMergedProps(forwardRef((e,r)=>{const o=useTheme();const{size:t="m",rows:a=2,maxRows:n=30,labelPosition:i="dynamic",primary:s=!0,width:l=o.defaultInputControlsWidth,autosize:m=!0,rounded:g=!0,color:c="mineShaft",placeholderColor:d="silver",autoRows:u,resize:h,contrast:p,inline:f,secondary:S,success:X,error:b,sizeXXS:L,sizeXS:z,sizeS:w,sizeM:R,sizeL:M,sizeXL:T,sizes:C,sizeUnits:x,margin:v,marginXXS:j,marginXS:I,marginS:y,marginM:B,marginL:E,marginXL:N,marginTop:k,marginTopXXS:D,marginTopXS:F,marginTopS:H,marginTopM:P,marginTopL:Z,marginTopXL:O,marginRight:$,marginRightXXS:A,marginRightXS:G,marginRightS:U,marginRightM:_,marginRightL:K,marginRightXL:V,marginBottom:W,marginBottomXXS:q,marginBottomXS:J,marginBottomS:Q,marginBottomM:Y,marginBottomL:ee,marginBottomXL:re,marginLeft:oe,marginLeftXXS:te,marginLeftXS:ae,marginLeftS:ne,marginLeftM:ie,marginLeftL:se,marginLeftXL:le,widthXXS:me,widthXS:ge,widthS:ce,widthM:de,widthL:ue,widthXL:he,preset:pe,palette:fe,label:Se,fluid:Xe,className:be,style:Le,disabled:ze,...we}=e;const Re={size:t,sizeXXS:L,sizeXS:z,sizeS:w,sizeM:R,sizeL:M,sizeXL:T};const Me=useRef(null);const Te=useRef(null);const Ce=useRef(null);useImperativeHandle(r,()=>Me.current,[]);const[xe,ve,je]=useResizable({target:Ce,direction:h});const Ie=useMemo(()=>nanoid(),[]);const[ye,Be]=useState(()=>{const e=we.value??we.defaultValue;return typeof e=='string'&&e.length>0});const[Ee,Ne]=useState(()=>Math.min(a,n));const ke=pe==='brand'&&u||pe!=='brand'&&m?Ee:Math.min(a,n);const De=h==='horizontal'?'ew-resize':h==='vertical'?'ns-resize':'nwse-resize';const Fe=useCallback(()=>{if(!Me.current)return;if(pe==='brand'){if(!Te.current)return;Te.current.value=Me.current.value;const e=Math.max(Math.round(Te.current.scrollHeight/Te.current.clientHeight),a);return void Ne(Math.min(e,n))}const e=getComputedStyle(Me.current);const r=parseFloat(e.lineHeight);const o=Math.max(Math.round((Me.current.scrollHeight-parseFloat(e.paddingTop)-parseFloat(e.paddingBottom))/(Number.isNaN(r)?parseFloat(e.fontSize)*1.2:r)),a);Ne(e=>o>e?Math.min(o,n):Me.current&&!Me.current.value?a:e)},[pe,a,n]);return useLayoutEffect(()=>{pe==='brand'&&typeof we.value=='string'&&Me.current&&Me.current!==document.activeElement&&Be(we.value.length>0)},[pe,we.value]),useEffect(()=>{const e=createThrottledCallback(Fe,200);return(pe==='brand'&&u||pe!=='brand'&&m)&&(Fe(),window.addEventListener('resize',e)),()=>{window.removeEventListener('resize',e)}},[pe,u,m,Fe]),pe!=='brand'?jsx(Root,{...we,ref:Me,className:be,style:Le,onChange:e=>{m&&Fe(),we.onChange&&we.onChange(e)},rows:ke,color:c,rounded:g,placeholderColor:d,disabled:ze,error:b,fluid:Xe,width:l,widthXXS:me,widthXS:ge,widthS:ce,widthM:de,widthL:ue,widthXL:he}):jsx(FormInputLabel,{...Re,ref:Ce,sizes:C,sizeUnits:x,margin:v,marginXXS:j,marginXS:I,marginS:y,marginM:B,marginL:E,marginXL:N,marginTop:k,marginTopXXS:D,marginTopXS:F,marginTopS:H,marginTopM:P,marginTopL:Z,marginTopXL:O,marginRight:$,marginRightXXS:A,marginRightXS:G,marginRightS:U,marginRightM:_,marginRightL:K,marginRightXL:V,marginBottom:W,marginBottomXXS:q,marginBottomXS:J,marginBottomS:Q,marginBottomM:Y,marginBottomL:ee,marginBottomXL:re,marginLeft:oe,marginLeftXXS:te,marginLeftXS:ae,marginLeftS:ne,marginLeftM:ie,marginLeftL:se,marginLeftXL:le,className:be,style:Le,contrast:p,error:b,inline:f,disabled:ze,primary:s,secondary:S,success:X,palette:{color:ze?fe.colorDisabled:fe.color,backgroundColor:ze?fe.backgroundColorDisabled:fe.backgroundColor,backgroundColorHover:ze?fe.backgroundColorDisabled:fe.backgroundColorHover,borderColor:ze?fe.borderColorDisabled:fe.borderColor},onClick:()=>{Me.current&&Me.current.focus()},onFocus:()=>{Be(!0)},onPointerDown:e=>{e.target!==Me.current&&e.target instanceof Node&&e.preventDefault()},onBlur:e=>{Me.current&&!e.currentTarget.contains(e.relatedTarget)&&Be(Boolean(Me.current.value))},overflow:"hidden",input:jsxs(InputLabel,{...Re,sizes:SIZES$1,active:ye,label:Se,labelId:Ie,labelPosition:i,children:[u?jsx(TextareaMimic,{ref:Te,rows:1}):null,jsx(Textarea$1,{...we,ref:Me,"aria-labelledby":Se?Ie:void 0,disabled:ze,onChange:e=>{u&&Fe(),we.onChange&&we.onChange(e)},rows:ke,palette:{color:fe.color,colorDisabled:fe.colorDisabled,placeholderColor:fe.placeholderColor,placeholderColorDisabled:fe.placeholderColorDisabled}})]}),addonRight:h?jsxs(Fragment,{children:[xe?jsx(ResizeGlobals,{cursor:De}):null,jsx(ResizeIcon,{size:"l",icon:jsx(ResizeHandle,{}),color:"border-onmain-default-small",tabIndex:0,onPointerDown:ve,onKeyDown:je,cursor:De})]}):null})}),{displayName:"Textarea",sizes:SIZES});export{COMPONENT_NAME,Textarea};
+import{forwardRef,useRef,useImperativeHandle,useMemo,useState,useCallback,useLayoutEffect,useEffect}from'react';import{useTheme}from'styled-components';import{nanoid}from'nanoid';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{useResizable}from'../../hooks/useResizable.mjs';import{createThrottledCallback}from'../../shared/utils/misc.mjs';import{SIZES}from'./sizes.mjs';import{Root,ResizeGlobals,ResizeIcon,TextareaMimic,Textarea as Textarea$1}from'./style.mjs';import{jsx,jsxs,Fragment}from'react/jsx-runtime';import{FormInputLabel}from'../FormInputLabel/FormInputLabel.mjs';import{ResizeHandle}from'../../icon-pack/src/icons/ResizeHandle/index.mjs';import{InputLabel}from'../InputLabel/InputLabel.mjs';import{SIZES as SIZES$1}from'../FormInput/sizes.mjs';const COMPONENT_NAME='Textarea';const Textarea=withMergedProps(forwardRef((e,r)=>{const o=useTheme();const{size:t="m",rows:a=2,maxRows:n=30,labelPosition:i="dynamic",primary:s=!0,width:l=o.defaultInputControlsWidth,autosize:m=!0,rounded:g=!0,color:c="mineShaft",placeholderColor:d="silver",autoRows:u,resize:h,contrast:p,inline:f,secondary:S,success:X,error:b,sizeXXS:L,sizeXS:z,sizeS:w,sizeM:R,sizeL:M,sizeXL:T,sizes:C,sizeUnits:x,margin:v,marginXXS:j,marginXS:I,marginS:y,marginM:B,marginL:E,marginXL:N,marginTop:k,marginTopXXS:D,marginTopXS:F,marginTopS:H,marginTopM:P,marginTopL:Z,marginTopXL:O,marginRight:$,marginRightXXS:A,marginRightXS:G,marginRightS:U,marginRightM:_,marginRightL:K,marginRightXL:V,marginBottom:W,marginBottomXXS:q,marginBottomXS:J,marginBottomS:Q,marginBottomM:Y,marginBottomL:ee,marginBottomXL:re,marginLeft:oe,marginLeftXXS:te,marginLeftXS:ae,marginLeftS:ne,marginLeftM:ie,marginLeftL:se,marginLeftXL:le,widthXXS:me,widthXS:ge,widthS:ce,widthM:de,widthL:ue,widthXL:he,preset:pe,palette:fe,label:Se,fluid:Xe,className:be,style:Le,disabled:ze,...we}=e;const Re={size:t,sizeXXS:L,sizeXS:z,sizeS:w,sizeM:R,sizeL:M,sizeXL:T};const Me=useRef(null);const Te=useRef(null);const Ce=useRef(null);useImperativeHandle(r,()=>Me.current,[]);const[xe,ve,je]=useResizable({target:Ce,direction:h});const Ie=useMemo(()=>nanoid(),[]);const[ye,Be]=useState(()=>{const e=we.value??we.defaultValue;return typeof e=='string'&&e.length>0});const[Ee,Ne]=useState(()=>Math.min(a,n));const ke=pe==='brand'&&u||pe!=='brand'&&m?Ee:Math.min(a,n);const De=h==='horizontal'?'ew-resize':h==='vertical'?'ns-resize':'nwse-resize';const Fe=useCallback(()=>{if(!Me.current)return;if(pe==='brand'){if(!Te.current)return;Te.current.value=Me.current.value;const e=Math.max(Math.round(Te.current.scrollHeight/Te.current.clientHeight),a);return void Ne(Math.min(e,n))}const e=getComputedStyle(Me.current);const r=parseFloat(e.lineHeight);const o=Math.max(Math.round((Me.current.scrollHeight-parseFloat(e.paddingTop)-parseFloat(e.paddingBottom))/(Number.isNaN(r)?parseFloat(e.fontSize)*1.2:r)),a);Ne(e=>o>e?Math.min(o,n):Me.current&&!Me.current.value?a:e)},[pe,a,n]);return useLayoutEffect(()=>{pe==='brand'&&typeof we.value=='string'&&Me.current&&Me.current!==document.activeElement&&Be(we.value.length>0)},[pe,we.value]),useEffect(()=>{const e=createThrottledCallback(Fe,200);return(pe==='brand'&&u||pe!=='brand'&&m)&&(Fe(),window.addEventListener('resize',e)),()=>{window.removeEventListener('resize',e)}},[pe,u,m,Fe]),pe!=='brand'?jsx(Root,{...we,ref:Me,className:be,style:Le,onChange:e=>{m&&Fe(),we.onChange&&we.onChange(e)},rows:ke,color:c,rounded:g,placeholderColor:d,disabled:ze,error:b,fluid:Xe,width:l,widthXXS:me,widthXS:ge,widthS:ce,widthM:de,widthL:ue,widthXL:he}):jsx(FormInputLabel,{...Re,ref:Ce,sizes:C,sizeUnits:x,margin:v,marginXXS:j,marginXS:I,marginS:y,marginM:B,marginL:E,marginXL:N,marginTop:k,marginTopXXS:D,marginTopXS:F,marginTopS:H,marginTopM:P,marginTopL:Z,marginTopXL:O,marginRight:$,marginRightXXS:A,marginRightXS:G,marginRightS:U,marginRightM:_,marginRightL:K,marginRightXL:V,marginBottom:W,marginBottomXXS:q,marginBottomXS:J,marginBottomS:Q,marginBottomM:Y,marginBottomL:ee,marginBottomXL:re,marginLeft:oe,marginLeftXXS:te,marginLeftXS:ae,marginLeftS:ne,marginLeftM:ie,marginLeftL:se,marginLeftXL:le,className:be,style:Le,contrast:p,error:b,inline:f,disabled:ze,primary:s,secondary:S,success:X,palette:{color:ze?fe.colorDisabled:fe.color,backgroundColor:ze?fe.backgroundColorDisabled:fe.backgroundColor,backgroundColorHover:ze?fe.backgroundColorDisabled:fe.backgroundColorHover,borderColor:ze?fe.borderColorDisabled:fe.borderColor},onClick:()=>{Me.current&&Me.current.focus()},onFocus:()=>{Be(!0)},onPointerDown:e=>{e.target!==Me.current&&e.target instanceof Node&&e.preventDefault()},onBlur:e=>{Me.current&&!e.currentTarget.contains(e.relatedTarget)&&Be(Boolean(Me.current.value))},overflow:"hidden",input:jsxs(InputLabel,{...Re,sizes:SIZES$1,active:ye,label:Se,labelId:Ie,labelPosition:i,children:[u?jsx(TextareaMimic,{ref:Te,rows:1}):null,jsx(Textarea$1,{...we,ref:Me,"aria-labelledby":Se?Ie:void 0,disabled:ze,onChange:e=>{u&&Fe(),we.onChange&&we.onChange(e)},rows:ke,palette:{color:fe.color,colorDisabled:fe.colorDisabled,placeholderColor:fe.placeholderColor,placeholderColorDisabled:fe.placeholderColorDisabled}})]}),floats:h?jsxs(Fragment,{children:[xe?jsx(ResizeGlobals,{cursor:De}):null,jsx(ResizeIcon,{size:"l",icon:jsx(ResizeHandle,{}),color:"border-onmain-default-small",tabIndex:0,onPointerDown:ve,onKeyDown:je,cursor:De})]}):void 0})}),{displayName:"Textarea",sizes:SIZES});export{COMPONENT_NAME,Textarea};
 //# sourceMappingURL=Textarea.mjs.map