@traefik-labs/faency 12.3.9 → 13.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"TextField.vanilla.cjs","names":[],"sources":["../../../components/TextField/TextField.vanilla.tsx"],"sourcesContent":["import {\n  CrossCircledIcon,\n  ExclamationTriangleIcon,\n  EyeClosedIcon,\n  EyeOpenIcon,\n} from '@radix-ui/react-icons';\nimport React from 'react';\n\nimport { styled } from '../../stitches.config';\nimport { BoxVanilla } from '../Box';\nimport { InputVanilla, InputVanillaHandle, InputVanillaProps } from '../Input';\nimport { LabelVanilla } from '../Label';\nimport { Tooltip } from '../Tooltip';\n\n// TYPES\nexport interface TextFieldLabelProps {\n  variant: 'invalid' | 'subtle' | 'contrast' | 'default';\n  htmlFor?: string;\n}\n\nexport type TextFieldVanillaProps = InputVanillaProps & {\n  type?: string;\n  clearable?: boolean;\n  label?: string | ((props: TextFieldLabelProps) => JSX.Element);\n};\n\n// COMPONENTS\nconst AdornmentGroup = styled('div', {\n  display: 'flex',\n  flexDirection: 'row',\n  alignItems: 'center',\n});\n\nconst StyledExclamationTriangleIcon = styled(ExclamationTriangleIcon, {\n  '& + *': {\n    marginLeft: '$1',\n  },\n});\n\nconst StyledEyeOpenIcon = styled(EyeOpenIcon, {\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n    },\n  },\n});\n\nconst StyledEyeClosedIcon = styled(EyeClosedIcon, {\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n    },\n  },\n});\n\nconst StyledCrossCircledIcon = styled(CrossCircledIcon, {\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n    },\n  },\n});\n\nexport const TextFieldVanilla = React.forwardRef<\n  React.ElementRef<typeof InputVanilla>,\n  TextFieldVanillaProps\n>(\n  (\n    {\n      state,\n      clearable,\n      label: LabelOrComponent,\n      id,\n      type,\n      disabled,\n      readOnly,\n      onBlur,\n      onFocus,\n      css,\n      ...props\n    },\n    forwardedRef,\n  ) => {\n    const inputRef = React.useRef<InputVanillaHandle | null>(null);\n    React.useImperativeHandle(forwardedRef, () => inputRef.current as InputVanillaHandle);\n\n    const [inputHasFocus, setInputHasFocus] = React.useState(false);\n    const [innerType, setInnerType] = React.useState(type);\n    const isPasswordVisible = React.useMemo(() => innerType !== 'password', [innerType]);\n\n    const invalid = React.useMemo(() => state === 'invalid', [state]);\n\n    const labelVariant = React.useMemo(() => {\n      if (disabled) {\n        return 'subtle';\n      }\n      if (invalid) {\n        return 'invalid';\n      }\n      if (inputHasFocus) {\n        return 'contrast';\n      }\n      return 'default';\n    }, [invalid, disabled, inputHasFocus]);\n\n    const LabelNode = React.useMemo(() => {\n      if (LabelOrComponent === undefined || LabelOrComponent === null) {\n        return null;\n      }\n      if (typeof LabelOrComponent === 'string') {\n        return (\n          <LabelVanilla variant={labelVariant} htmlFor={id}>\n            {LabelOrComponent}\n          </LabelVanilla>\n        );\n      }\n      return <LabelOrComponent variant={labelVariant} htmlFor={id} />;\n    }, [LabelOrComponent, labelVariant, id]);\n\n    const isPasswordType = React.useMemo(() => type === 'password', [type]);\n\n    const typeOrInnerType = React.useMemo(\n      () => (isPasswordType ? innerType : type),\n      [isPasswordType, type, innerType],\n    );\n\n    const hasInnerAdornment = React.useMemo(\n      () => clearable || isPasswordType || invalid,\n      [clearable, isPasswordType, invalid],\n    );\n\n    const hasAdornmentGroup = React.useMemo(\n      () => (clearable && invalid) || (clearable && isPasswordType) || (invalid && isPasswordType),\n      [clearable, invalid, isPasswordType],\n    );\n\n    const clearDisabled = React.useMemo(() => readOnly || disabled, [readOnly, disabled]);\n\n    const handleClear = React.useCallback(() => {\n      const { current } = inputRef;\n      if (current) {\n        current.clear();\n      }\n    }, [inputRef]);\n\n    const handleFocus = React.useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        if (onFocus) {\n          onFocus(e);\n        }\n        setInputHasFocus(true);\n      },\n      [onFocus, setInputHasFocus],\n    );\n\n    const handleBlur = React.useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        if (onBlur) {\n          onBlur(e);\n        }\n        setInputHasFocus(false);\n      },\n      [onBlur, setInputHasFocus],\n    );\n\n    const togglePasswordVisibility = React.useCallback(() => {\n      setInnerType((prevInnerType) => (prevInnerType === 'password' ? undefined : 'password'));\n    }, [setInnerType]);\n\n    const EndAdornmentWrapper = React.useMemo(\n      () => (hasAdornmentGroup ? AdornmentGroup : React.Fragment),\n      [hasAdornmentGroup],\n    );\n\n    const PasswordVisibilityToggleIcon = React.useMemo(\n      () => (isPasswordVisible ? StyledEyeClosedIcon : StyledEyeOpenIcon),\n      [isPasswordVisible],\n    );\n\n    const passwordAction = React.useMemo(\n      () => (isPasswordVisible ? 'Hide password' : 'Show password'),\n      [isPasswordVisible],\n    );\n\n    return (\n      <BoxVanilla css={css}>\n        {LabelNode}\n        <InputVanilla\n          id={id}\n          ref={inputRef}\n          endAdornment={\n            hasInnerAdornment && (\n              <EndAdornmentWrapper>\n                {invalid && <StyledExclamationTriangleIcon role=\"alert\" aria-label=\"Invalid\" />}\n                {isPasswordType && (\n                  <Tooltip content={passwordAction}>\n                    <PasswordVisibilityToggleIcon\n                      aria-label={passwordAction}\n                      onClick={togglePasswordVisibility}\n                    />\n                  </Tooltip>\n                )}\n                {clearable && !clearDisabled && (\n                  <Tooltip content=\"Clear\">\n                    <StyledCrossCircledIcon aria-label=\"Clear\" onClick={handleClear} />\n                  </Tooltip>\n                )}\n              </EndAdornmentWrapper>\n            )\n          }\n          state={state}\n          type={typeOrInnerType}\n          disabled={disabled}\n          readOnly={readOnly}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          {...props}\n        />\n      </BoxVanilla>\n    );\n  },\n);\n\nTextFieldVanilla.displayName = 'TextFieldVanilla';\n"],"mappings":"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"}
+{"version":3,"file":"TextField.vanilla.cjs","names":["styled","ExclamationTriangleIcon","EyeOpenIcon","EyeClosedIcon","CrossCircledIcon","React","LabelVanilla","BoxVanilla","InputVanilla","Tooltip"],"sources":["../../../components/TextField/TextField.vanilla.tsx"],"sourcesContent":["import {\n  CrossCircledIcon,\n  ExclamationTriangleIcon,\n  EyeClosedIcon,\n  EyeOpenIcon,\n} from '@radix-ui/react-icons';\nimport React from 'react';\n\nimport { styled } from '../../stitches.config';\nimport { BoxVanilla } from '../Box';\nimport { InputVanilla, InputVanillaHandle, InputVanillaProps } from '../Input';\nimport { LabelVanilla } from '../Label';\nimport { Tooltip } from '../Tooltip';\n\n// TYPES\nexport interface TextFieldLabelProps {\n  variant: 'invalid' | 'subtle' | 'contrast' | 'default';\n  htmlFor?: string;\n}\n\nexport type TextFieldVanillaProps = InputVanillaProps & {\n  type?: string;\n  clearable?: boolean;\n  label?: string | ((props: TextFieldLabelProps) => JSX.Element);\n};\n\n// COMPONENTS\nconst AdornmentGroup = styled('div', {\n  display: 'flex',\n  flexDirection: 'row',\n  alignItems: 'center',\n});\n\nconst StyledExclamationTriangleIcon = styled(ExclamationTriangleIcon, {\n  '& + *': {\n    marginLeft: '$1',\n  },\n});\n\nconst StyledEyeOpenIcon = styled(EyeOpenIcon, {\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n    },\n  },\n});\n\nconst StyledEyeClosedIcon = styled(EyeClosedIcon, {\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n    },\n  },\n});\n\nconst StyledCrossCircledIcon = styled(CrossCircledIcon, {\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n    },\n  },\n});\n\nexport const TextFieldVanilla = React.forwardRef<\n  React.ElementRef<typeof InputVanilla>,\n  TextFieldVanillaProps\n>(\n  (\n    {\n      state,\n      clearable,\n      label: LabelOrComponent,\n      id,\n      type,\n      disabled,\n      readOnly,\n      onBlur,\n      onFocus,\n      css,\n      ...props\n    },\n    forwardedRef,\n  ) => {\n    const inputRef = React.useRef<InputVanillaHandle | null>(null);\n    React.useImperativeHandle(forwardedRef, () => inputRef.current as InputVanillaHandle);\n\n    const [inputHasFocus, setInputHasFocus] = React.useState(false);\n    const [innerType, setInnerType] = React.useState(type);\n    const isPasswordVisible = React.useMemo(() => innerType !== 'password', [innerType]);\n\n    const invalid = React.useMemo(() => state === 'invalid', [state]);\n\n    const labelVariant = React.useMemo(() => {\n      if (disabled) {\n        return 'subtle';\n      }\n      if (invalid) {\n        return 'invalid';\n      }\n      if (inputHasFocus) {\n        return 'contrast';\n      }\n      return 'default';\n    }, [invalid, disabled, inputHasFocus]);\n\n    const LabelNode = React.useMemo(() => {\n      if (LabelOrComponent === undefined || LabelOrComponent === null) {\n        return null;\n      }\n      if (typeof LabelOrComponent === 'string') {\n        return (\n          <LabelVanilla variant={labelVariant} htmlFor={id}>\n            {LabelOrComponent}\n          </LabelVanilla>\n        );\n      }\n      return <LabelOrComponent variant={labelVariant} htmlFor={id} />;\n    }, [LabelOrComponent, labelVariant, id]);\n\n    const isPasswordType = React.useMemo(() => type === 'password', [type]);\n\n    const typeOrInnerType = React.useMemo(\n      () => (isPasswordType ? innerType : type),\n      [isPasswordType, type, innerType],\n    );\n\n    const hasInnerAdornment = React.useMemo(\n      () => clearable || isPasswordType || invalid,\n      [clearable, isPasswordType, invalid],\n    );\n\n    const hasAdornmentGroup = React.useMemo(\n      () => (clearable && invalid) || (clearable && isPasswordType) || (invalid && isPasswordType),\n      [clearable, invalid, isPasswordType],\n    );\n\n    const clearDisabled = React.useMemo(() => readOnly || disabled, [readOnly, disabled]);\n\n    const handleClear = React.useCallback(() => {\n      const { current } = inputRef;\n      if (current) {\n        current.clear();\n      }\n    }, [inputRef]);\n\n    const handleFocus = React.useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        if (onFocus) {\n          onFocus(e);\n        }\n        setInputHasFocus(true);\n      },\n      [onFocus, setInputHasFocus],\n    );\n\n    const handleBlur = React.useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        if (onBlur) {\n          onBlur(e);\n        }\n        setInputHasFocus(false);\n      },\n      [onBlur, setInputHasFocus],\n    );\n\n    const togglePasswordVisibility = React.useCallback(() => {\n      setInnerType((prevInnerType) => (prevInnerType === 'password' ? undefined : 'password'));\n    }, [setInnerType]);\n\n    const EndAdornmentWrapper = React.useMemo(\n      () => (hasAdornmentGroup ? AdornmentGroup : React.Fragment),\n      [hasAdornmentGroup],\n    );\n\n    const PasswordVisibilityToggleIcon = React.useMemo(\n      () => (isPasswordVisible ? StyledEyeClosedIcon : StyledEyeOpenIcon),\n      [isPasswordVisible],\n    );\n\n    const passwordAction = React.useMemo(\n      () => (isPasswordVisible ? 'Hide password' : 'Show password'),\n      [isPasswordVisible],\n    );\n\n    return (\n      <BoxVanilla css={css}>\n        {LabelNode}\n        <InputVanilla\n          id={id}\n          ref={inputRef}\n          endAdornment={\n            hasInnerAdornment && (\n              <EndAdornmentWrapper>\n                {invalid && <StyledExclamationTriangleIcon role=\"alert\" aria-label=\"Invalid\" />}\n                {isPasswordType && (\n                  <Tooltip content={passwordAction}>\n                    <PasswordVisibilityToggleIcon\n                      aria-label={passwordAction}\n                      onClick={togglePasswordVisibility}\n                    />\n                  </Tooltip>\n                )}\n                {clearable && !clearDisabled && (\n                  <Tooltip content=\"Clear\">\n                    <StyledCrossCircledIcon aria-label=\"Clear\" onClick={handleClear} />\n                  </Tooltip>\n                )}\n              </EndAdornmentWrapper>\n            )\n          }\n          state={state}\n          type={typeOrInnerType}\n          disabled={disabled}\n          readOnly={readOnly}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          {...props}\n        />\n      </BoxVanilla>\n    );\n  },\n);\n\nTextFieldVanilla.displayName = 'TextFieldVanilla';\n"],"mappings":";;;;;;;;;;;AA2BA,IAAM,iBAAiBA,wBAAAA,OAAO,OAAO;CACnC,SAAS;CACT,eAAe;CACf,YAAY;AACd,CAAC;AAED,IAAM,gCAAgCA,wBAAAA,OAAOC,sBAAAA,yBAAyB,EACpE,SAAS,EACP,YAAY,KACd,EACF,CAAC;AAED,IAAM,oBAAoBD,wBAAAA,OAAOE,sBAAAA,aAAa,EAC5C,UAAU,EACR,WAAW,EACT,QAAQ,UACV,EACF,EACF,CAAC;AAED,IAAM,sBAAsBF,wBAAAA,OAAOG,sBAAAA,eAAe,EAChD,UAAU,EACR,WAAW,EACT,QAAQ,UACV,EACF,EACF,CAAC;AAED,IAAM,yBAAyBH,wBAAAA,OAAOI,sBAAAA,kBAAkB,EACtD,UAAU,EACR,WAAW,EACT,QAAQ,UACV,EACF,EACF,CAAC;AAED,IAAa,mBAAmBC,MAAAA,QAAM,YAKlC,EACE,OACA,WACA,OAAO,kBACP,IACA,MACA,UACA,UACA,QACA,SACA,KACA,GAAG,SAEL,iBACG;CACH,MAAM,WAAWA,MAAAA,QAAM,OAAkC,IAAI;CAC7D,MAAA,QAAM,oBAAoB,oBAAoB,SAAS,OAA6B;CAEpF,MAAM,CAAC,eAAe,oBAAoBA,MAAAA,QAAM,SAAS,KAAK;CAC9D,MAAM,CAAC,WAAW,gBAAgBA,MAAAA,QAAM,SAAS,IAAI;CACrD,MAAM,oBAAoBA,MAAAA,QAAM,cAAc,cAAc,YAAY,CAAC,SAAS,CAAC;CAEnF,MAAM,UAAUA,MAAAA,QAAM,cAAc,UAAU,WAAW,CAAC,KAAK,CAAC;CAEhE,MAAM,eAAeA,MAAAA,QAAM,cAAc;EACvC,IAAI,UACF,OAAO;EAET,IAAI,SACF,OAAO;EAET,IAAI,eACF,OAAO;EAET,OAAO;CACT,GAAG;EAAC;EAAS;EAAU;CAAa,CAAC;CAErC,MAAM,YAAYA,MAAAA,QAAM,cAAc;EACpC,IAAI,qBAAqB,KAAA,KAAa,qBAAqB,MACzD,OAAO;EAET,IAAI,OAAO,qBAAqB,UAC9B,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,cAAD;GAAc,SAAS;GAAc,SAAS;GAC3C,UAAA;EACW,CAAA;EAGlB,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,kBAAD;GAAkB,SAAS;GAAc,SAAS;EAAK,CAAA;CAChE,GAAG;EAAC;EAAkB;EAAc;CAAE,CAAC;CAEvC,MAAM,iBAAiBD,MAAAA,QAAM,cAAc,SAAS,YAAY,CAAC,IAAI,CAAC;CAEtE,MAAM,kBAAkBA,MAAAA,QAAM,cACrB,iBAAiB,YAAY,MACpC;EAAC;EAAgB;EAAM;CAAS,CAClC;CAEA,MAAM,oBAAoBA,MAAAA,QAAM,cACxB,aAAa,kBAAkB,SACrC;EAAC;EAAW;EAAgB;CAAO,CACrC;CAEA,MAAM,oBAAoBA,MAAAA,QAAM,cACvB,aAAa,WAAa,aAAa,kBAAoB,WAAW,gBAC7E;EAAC;EAAW;EAAS;CAAc,CACrC;CAEA,MAAM,gBAAgBA,MAAAA,QAAM,cAAc,YAAY,UAAU,CAAC,UAAU,QAAQ,CAAC;CAEpF,MAAM,cAAcA,MAAAA,QAAM,kBAAkB;EAC1C,MAAM,EAAE,YAAY;EACpB,IAAI,SACF,QAAQ,MAAM;CAElB,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,cAAcA,MAAAA,QAAM,aACvB,MAA0C;EACzC,IAAI,SACF,QAAQ,CAAC;EAEX,iBAAiB,IAAI;CACvB,GACA,CAAC,SAAS,gBAAgB,CAC5B;CAEA,MAAM,aAAaA,MAAAA,QAAM,aACtB,MAA0C;EACzC,IAAI,QACF,OAAO,CAAC;EAEV,iBAAiB,KAAK;CACxB,GACA,CAAC,QAAQ,gBAAgB,CAC3B;CAEA,MAAM,2BAA2BA,MAAAA,QAAM,kBAAkB;EACvD,cAAc,kBAAmB,kBAAkB,aAAa,KAAA,IAAY,UAAW;CACzF,GAAG,CAAC,YAAY,CAAC;CAEjB,MAAM,sBAAsBA,MAAAA,QAAM,cACzB,oBAAoB,iBAAiBA,MAAAA,QAAM,UAClD,CAAC,iBAAiB,CACpB;CAEA,MAAM,+BAA+BA,MAAAA,QAAM,cAClC,oBAAoB,sBAAsB,mBACjD,CAAC,iBAAiB,CACpB;CAEA,MAAM,iBAAiBA,MAAAA,QAAM,cACpB,oBAAoB,kBAAkB,iBAC7C,CAAC,iBAAiB,CACpB;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACE,oBAAAA,YAAD;EAAiB;EAAjB,UAAA,CACG,WACD,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,cAAD;GACM;GACJ,KAAK;GACL,cACE,qBACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,qBAAD,EAAA,UAAA;IACG,WAAW,iBAAA,GAAA,kBAAA,IAAA,CAAC,+BAAD;KAA+B,MAAK;KAAQ,cAAW;IAAW,CAAA;IAC7E,kBACC,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,SAAD;KAAS,SAAS;KAChB,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,8BAAD;MACE,cAAY;MACZ,SAAS;KACV,CAAA;IACM,CAAA;IAEV,aAAa,CAAC,iBACb,iBAAA,GAAA,kBAAA,IAAA,CAACA,gBAAAA,SAAD;KAAS,SAAQ;KACf,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,wBAAD;MAAwB,cAAW;MAAQ,SAAS;KAAc,CAAA;IAC3D,CAAA;GAEQ,EAAA,CAAA;GAGlB;GACP,MAAM;GACI;GACA;GACV,SAAS;GACT,QAAQ;GACR,GAAI;EACL,CAAA,CACS;;AAEhB,CACF;AAEA,iBAAiB,cAAc"}

package/dist/components/TextField/TextField.vanilla.js

@@ -6,7 +6,7 @@ import { Tooltip } from "../Tooltip/Tooltip.js";
 import { CrossCircledIcon, ExclamationTriangleIcon, EyeClosedIcon, EyeOpenIcon } from "@radix-ui/react-icons";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region components/TextField/TextField.vanilla.tsx
+// components/TextField/TextField.vanilla.tsx
 var AdornmentGroup = styled("div", {
 	display: "flex",
 	flexDirection: "row",
@@ -120,7 +120,6 @@ var TextFieldVanilla = React.forwardRef(({ state, clearable, label: LabelOrCompo
 	});
 });
 TextFieldVanilla.displayName = "TextFieldVanilla";
-//#endregion
 export { TextFieldVanilla };
 
 //# sourceMappingURL=TextField.vanilla.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TextField.vanilla.js","names":[],"sources":["../../../components/TextField/TextField.vanilla.tsx"],"sourcesContent":["import {\n  CrossCircledIcon,\n  ExclamationTriangleIcon,\n  EyeClosedIcon,\n  EyeOpenIcon,\n} from '@radix-ui/react-icons';\nimport React from 'react';\n\nimport { styled } from '../../stitches.config';\nimport { BoxVanilla } from '../Box';\nimport { InputVanilla, InputVanillaHandle, InputVanillaProps } from '../Input';\nimport { LabelVanilla } from '../Label';\nimport { Tooltip } from '../Tooltip';\n\n// TYPES\nexport interface TextFieldLabelProps {\n  variant: 'invalid' | 'subtle' | 'contrast' | 'default';\n  htmlFor?: string;\n}\n\nexport type TextFieldVanillaProps = InputVanillaProps & {\n  type?: string;\n  clearable?: boolean;\n  label?: string | ((props: TextFieldLabelProps) => JSX.Element);\n};\n\n// COMPONENTS\nconst AdornmentGroup = styled('div', {\n  display: 'flex',\n  flexDirection: 'row',\n  alignItems: 'center',\n});\n\nconst StyledExclamationTriangleIcon = styled(ExclamationTriangleIcon, {\n  '& + *': {\n    marginLeft: '$1',\n  },\n});\n\nconst StyledEyeOpenIcon = styled(EyeOpenIcon, {\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n    },\n  },\n});\n\nconst StyledEyeClosedIcon = styled(EyeClosedIcon, {\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n    },\n  },\n});\n\nconst StyledCrossCircledIcon = styled(CrossCircledIcon, {\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n    },\n  },\n});\n\nexport const TextFieldVanilla = React.forwardRef<\n  React.ElementRef<typeof InputVanilla>,\n  TextFieldVanillaProps\n>(\n  (\n    {\n      state,\n      clearable,\n      label: LabelOrComponent,\n      id,\n      type,\n      disabled,\n      readOnly,\n      onBlur,\n      onFocus,\n      css,\n      ...props\n    },\n    forwardedRef,\n  ) => {\n    const inputRef = React.useRef<InputVanillaHandle | null>(null);\n    React.useImperativeHandle(forwardedRef, () => inputRef.current as InputVanillaHandle);\n\n    const [inputHasFocus, setInputHasFocus] = React.useState(false);\n    const [innerType, setInnerType] = React.useState(type);\n    const isPasswordVisible = React.useMemo(() => innerType !== 'password', [innerType]);\n\n    const invalid = React.useMemo(() => state === 'invalid', [state]);\n\n    const labelVariant = React.useMemo(() => {\n      if (disabled) {\n        return 'subtle';\n      }\n      if (invalid) {\n        return 'invalid';\n      }\n      if (inputHasFocus) {\n        return 'contrast';\n      }\n      return 'default';\n    }, [invalid, disabled, inputHasFocus]);\n\n    const LabelNode = React.useMemo(() => {\n      if (LabelOrComponent === undefined || LabelOrComponent === null) {\n        return null;\n      }\n      if (typeof LabelOrComponent === 'string') {\n        return (\n          <LabelVanilla variant={labelVariant} htmlFor={id}>\n            {LabelOrComponent}\n          </LabelVanilla>\n        );\n      }\n      return <LabelOrComponent variant={labelVariant} htmlFor={id} />;\n    }, [LabelOrComponent, labelVariant, id]);\n\n    const isPasswordType = React.useMemo(() => type === 'password', [type]);\n\n    const typeOrInnerType = React.useMemo(\n      () => (isPasswordType ? innerType : type),\n      [isPasswordType, type, innerType],\n    );\n\n    const hasInnerAdornment = React.useMemo(\n      () => clearable || isPasswordType || invalid,\n      [clearable, isPasswordType, invalid],\n    );\n\n    const hasAdornmentGroup = React.useMemo(\n      () => (clearable && invalid) || (clearable && isPasswordType) || (invalid && isPasswordType),\n      [clearable, invalid, isPasswordType],\n    );\n\n    const clearDisabled = React.useMemo(() => readOnly || disabled, [readOnly, disabled]);\n\n    const handleClear = React.useCallback(() => {\n      const { current } = inputRef;\n      if (current) {\n        current.clear();\n      }\n    }, [inputRef]);\n\n    const handleFocus = React.useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        if (onFocus) {\n          onFocus(e);\n        }\n        setInputHasFocus(true);\n      },\n      [onFocus, setInputHasFocus],\n    );\n\n    const handleBlur = React.useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        if (onBlur) {\n          onBlur(e);\n        }\n        setInputHasFocus(false);\n      },\n      [onBlur, setInputHasFocus],\n    );\n\n    const togglePasswordVisibility = React.useCallback(() => {\n      setInnerType((prevInnerType) => (prevInnerType === 'password' ? undefined : 'password'));\n    }, [setInnerType]);\n\n    const EndAdornmentWrapper = React.useMemo(\n      () => (hasAdornmentGroup ? AdornmentGroup : React.Fragment),\n      [hasAdornmentGroup],\n    );\n\n    const PasswordVisibilityToggleIcon = React.useMemo(\n      () => (isPasswordVisible ? StyledEyeClosedIcon : StyledEyeOpenIcon),\n      [isPasswordVisible],\n    );\n\n    const passwordAction = React.useMemo(\n      () => (isPasswordVisible ? 'Hide password' : 'Show password'),\n      [isPasswordVisible],\n    );\n\n    return (\n      <BoxVanilla css={css}>\n        {LabelNode}\n        <InputVanilla\n          id={id}\n          ref={inputRef}\n          endAdornment={\n            hasInnerAdornment && (\n              <EndAdornmentWrapper>\n                {invalid && <StyledExclamationTriangleIcon role=\"alert\" aria-label=\"Invalid\" />}\n                {isPasswordType && (\n                  <Tooltip content={passwordAction}>\n                    <PasswordVisibilityToggleIcon\n                      aria-label={passwordAction}\n                      onClick={togglePasswordVisibility}\n                    />\n                  </Tooltip>\n                )}\n                {clearable && !clearDisabled && (\n                  <Tooltip content=\"Clear\">\n                    <StyledCrossCircledIcon aria-label=\"Clear\" onClick={handleClear} />\n                  </Tooltip>\n                )}\n              </EndAdornmentWrapper>\n            )\n          }\n          state={state}\n          type={typeOrInnerType}\n          disabled={disabled}\n          readOnly={readOnly}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          {...props}\n        />\n      </BoxVanilla>\n    );\n  },\n);\n\nTextFieldVanilla.displayName = 'TextFieldVanilla';\n"],"mappings":"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"}
+{"version":3,"file":"TextField.vanilla.js","names":[],"sources":["../../../components/TextField/TextField.vanilla.tsx"],"sourcesContent":["import {\n  CrossCircledIcon,\n  ExclamationTriangleIcon,\n  EyeClosedIcon,\n  EyeOpenIcon,\n} from '@radix-ui/react-icons';\nimport React from 'react';\n\nimport { styled } from '../../stitches.config';\nimport { BoxVanilla } from '../Box';\nimport { InputVanilla, InputVanillaHandle, InputVanillaProps } from '../Input';\nimport { LabelVanilla } from '../Label';\nimport { Tooltip } from '../Tooltip';\n\n// TYPES\nexport interface TextFieldLabelProps {\n  variant: 'invalid' | 'subtle' | 'contrast' | 'default';\n  htmlFor?: string;\n}\n\nexport type TextFieldVanillaProps = InputVanillaProps & {\n  type?: string;\n  clearable?: boolean;\n  label?: string | ((props: TextFieldLabelProps) => JSX.Element);\n};\n\n// COMPONENTS\nconst AdornmentGroup = styled('div', {\n  display: 'flex',\n  flexDirection: 'row',\n  alignItems: 'center',\n});\n\nconst StyledExclamationTriangleIcon = styled(ExclamationTriangleIcon, {\n  '& + *': {\n    marginLeft: '$1',\n  },\n});\n\nconst StyledEyeOpenIcon = styled(EyeOpenIcon, {\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n    },\n  },\n});\n\nconst StyledEyeClosedIcon = styled(EyeClosedIcon, {\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n    },\n  },\n});\n\nconst StyledCrossCircledIcon = styled(CrossCircledIcon, {\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n    },\n  },\n});\n\nexport const TextFieldVanilla = React.forwardRef<\n  React.ElementRef<typeof InputVanilla>,\n  TextFieldVanillaProps\n>(\n  (\n    {\n      state,\n      clearable,\n      label: LabelOrComponent,\n      id,\n      type,\n      disabled,\n      readOnly,\n      onBlur,\n      onFocus,\n      css,\n      ...props\n    },\n    forwardedRef,\n  ) => {\n    const inputRef = React.useRef<InputVanillaHandle | null>(null);\n    React.useImperativeHandle(forwardedRef, () => inputRef.current as InputVanillaHandle);\n\n    const [inputHasFocus, setInputHasFocus] = React.useState(false);\n    const [innerType, setInnerType] = React.useState(type);\n    const isPasswordVisible = React.useMemo(() => innerType !== 'password', [innerType]);\n\n    const invalid = React.useMemo(() => state === 'invalid', [state]);\n\n    const labelVariant = React.useMemo(() => {\n      if (disabled) {\n        return 'subtle';\n      }\n      if (invalid) {\n        return 'invalid';\n      }\n      if (inputHasFocus) {\n        return 'contrast';\n      }\n      return 'default';\n    }, [invalid, disabled, inputHasFocus]);\n\n    const LabelNode = React.useMemo(() => {\n      if (LabelOrComponent === undefined || LabelOrComponent === null) {\n        return null;\n      }\n      if (typeof LabelOrComponent === 'string') {\n        return (\n          <LabelVanilla variant={labelVariant} htmlFor={id}>\n            {LabelOrComponent}\n          </LabelVanilla>\n        );\n      }\n      return <LabelOrComponent variant={labelVariant} htmlFor={id} />;\n    }, [LabelOrComponent, labelVariant, id]);\n\n    const isPasswordType = React.useMemo(() => type === 'password', [type]);\n\n    const typeOrInnerType = React.useMemo(\n      () => (isPasswordType ? innerType : type),\n      [isPasswordType, type, innerType],\n    );\n\n    const hasInnerAdornment = React.useMemo(\n      () => clearable || isPasswordType || invalid,\n      [clearable, isPasswordType, invalid],\n    );\n\n    const hasAdornmentGroup = React.useMemo(\n      () => (clearable && invalid) || (clearable && isPasswordType) || (invalid && isPasswordType),\n      [clearable, invalid, isPasswordType],\n    );\n\n    const clearDisabled = React.useMemo(() => readOnly || disabled, [readOnly, disabled]);\n\n    const handleClear = React.useCallback(() => {\n      const { current } = inputRef;\n      if (current) {\n        current.clear();\n      }\n    }, [inputRef]);\n\n    const handleFocus = React.useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        if (onFocus) {\n          onFocus(e);\n        }\n        setInputHasFocus(true);\n      },\n      [onFocus, setInputHasFocus],\n    );\n\n    const handleBlur = React.useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        if (onBlur) {\n          onBlur(e);\n        }\n        setInputHasFocus(false);\n      },\n      [onBlur, setInputHasFocus],\n    );\n\n    const togglePasswordVisibility = React.useCallback(() => {\n      setInnerType((prevInnerType) => (prevInnerType === 'password' ? undefined : 'password'));\n    }, [setInnerType]);\n\n    const EndAdornmentWrapper = React.useMemo(\n      () => (hasAdornmentGroup ? AdornmentGroup : React.Fragment),\n      [hasAdornmentGroup],\n    );\n\n    const PasswordVisibilityToggleIcon = React.useMemo(\n      () => (isPasswordVisible ? StyledEyeClosedIcon : StyledEyeOpenIcon),\n      [isPasswordVisible],\n    );\n\n    const passwordAction = React.useMemo(\n      () => (isPasswordVisible ? 'Hide password' : 'Show password'),\n      [isPasswordVisible],\n    );\n\n    return (\n      <BoxVanilla css={css}>\n        {LabelNode}\n        <InputVanilla\n          id={id}\n          ref={inputRef}\n          endAdornment={\n            hasInnerAdornment && (\n              <EndAdornmentWrapper>\n                {invalid && <StyledExclamationTriangleIcon role=\"alert\" aria-label=\"Invalid\" />}\n                {isPasswordType && (\n                  <Tooltip content={passwordAction}>\n                    <PasswordVisibilityToggleIcon\n                      aria-label={passwordAction}\n                      onClick={togglePasswordVisibility}\n                    />\n                  </Tooltip>\n                )}\n                {clearable && !clearDisabled && (\n                  <Tooltip content=\"Clear\">\n                    <StyledCrossCircledIcon aria-label=\"Clear\" onClick={handleClear} />\n                  </Tooltip>\n                )}\n              </EndAdornmentWrapper>\n            )\n          }\n          state={state}\n          type={typeOrInnerType}\n          disabled={disabled}\n          readOnly={readOnly}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          {...props}\n        />\n      </BoxVanilla>\n    );\n  },\n);\n\nTextFieldVanilla.displayName = 'TextFieldVanilla';\n"],"mappings":"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"}

package/dist/components/Textarea/Textarea.cjs

@@ -6,7 +6,7 @@ const require_Label = require("../Label/Label.cjs");
 let react = require("react");
 react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region components/Textarea/Textarea.tsx
+// components/Textarea/Textarea.tsx
 var FOCUS_SHADOW = require_Elevation.elevationVariants[1].boxShadow;
 var StyledTextarea = require_stitches_config.styled("textarea", {
 	appearance: "none",
@@ -187,7 +187,6 @@ var Textarea = react.default.forwardRef(({ state, disabled, onFocus, onBlur, lab
 		})]
 	});
 });
-//#endregion
 exports.Textarea = Textarea;
 
 //# sourceMappingURL=Textarea.cjs.map

package/dist/components/Textarea/Textarea.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.cjs","names":[],"sources":["../../../components/Textarea/Textarea.tsx"],"sourcesContent":["import React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { Box } from '../Box';\nimport { elevationVariants } from '../Elevation';\nimport { Label } from '../Label';\n\n// CONSTANTS\nconst FOCUS_SHADOW = elevationVariants[1].boxShadow; // apply elevation $1 when focus\n\n// COMPONENTS\nconst StyledTextarea = styled('textarea', {\n  // Reset\n  appearance: 'none',\n  overflow: 'auto', // force overflow auto behaviour cross-browser\n  borderWidth: '0',\n  boxSizing: 'border-box',\n  fontFamily: '$rubik',\n  margin: '0',\n  outline: 'none',\n  WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n\n  // Custom\n  p: '$3',\n  position: 'relative',\n  flexGrow: 1, // make sure to grow fully inside TextareaWrapper\n  backgroundColor: 'transparent',\n  borderRadius: 'inherit', // inherit border radius from TextareaWrapper\n  boxShadow: 'inset 0 0 0 1px $colors$textareaBorder',\n  color: '$textareaText',\n  fontVariantNumeric: 'tabular-nums',\n  transition: 'box-shadow .1s ease-in-out',\n\n  '&:-webkit-autofill,&:autofill': {\n    boxShadow: 'inset 0 0 0 1px $colors$textareaBorder, inset 0 0 0 100px $colors$textareaBg',\n  },\n\n  '&:-webkit-autofill::first-line,&:autofill::first-line': {\n    fontFamily: '$rubik',\n    color: '$hiContrast',\n  },\n\n  '&:focus-visible': {\n    boxShadow: `inset 0 0 0 2px $colors$textareaFocusBorder, ${FOCUS_SHADOW}`,\n  },\n\n  '&::placeholder': {\n    color: '$textareaPlaceholder',\n  },\n\n  '&:read-only:not(:disabled)': {\n    boxShadow: 'none',\n  },\n\n  '&:disabled': {\n    pointerEvents: 'none',\n    opacity: 0.7,\n    color: '$textareaDisabledText',\n  },\n  variants: {\n    variant: {\n      ghost: {\n        boxShadow: 'none',\n        '&:disabled': {\n          boxShadow: 'none',\n        },\n        backgroundColor: 'transparent',\n        '&:focus-visible': {\n          backgroundColor: '$loContrast',\n        },\n      },\n    },\n    state: {\n      invalid: {\n        boxShadow: 'inset 0 0 0 1px $colors$textareaInvalidBorder',\n        '&:focus-visible': {\n          boxShadow: `inset 0 0 0 2px $colors$textareaInvalidBorder, ${FOCUS_SHADOW}`,\n        },\n        '@hover': {\n          '&:hover': {\n            '&::after': {\n              backgroundColor: '$textareaInvalidBorder',\n            },\n          },\n        },\n      },\n    },\n    cursor: {\n      default: {\n        cursor: 'default',\n        '@hover': {\n          '&:hover:not(:read-only)': {\n            cursor: 'text',\n          },\n        },\n        '&:focus-visible:not(:read-only)': {\n          cursor: 'text',\n        },\n      },\n      text: {\n        cursor: 'text',\n      },\n    },\n    resize: {\n      none: {\n        resize: 'none',\n      },\n      both: {\n        resize: 'both',\n      },\n      vertical: {\n        resize: 'vertical',\n      },\n      horizontal: {\n        resize: 'horizontal',\n      },\n    },\n    endAdornment: {\n      true: {\n        paddingBottom: '$5',\n        paddingRight: '$5',\n      },\n    },\n  },\n  defaultVariants: {\n    cursor: 'default',\n    resize: 'both',\n  },\n  compoundVariants: [\n    {\n      variant: 'ghost',\n      state: 'invalid',\n      css: {\n        boxShadow: 'inset 0 0 0 1px $colors$textareaInvalidBorder',\n      },\n    },\n  ],\n});\n\nconst TextareaWrapper = styled('div', {\n  // Reset\n  outline: 'none',\n  lineHeight: 0,\n\n  position: 'relative',\n  display: 'inline-flex', // helps matching resizable content size\n  backgroundColor: '$textareaBg',\n  color: '$textareaPlaceholder',\n  borderRadius: '$3',\n\n  '&::before': {\n    boxSizing: 'border-box',\n    borderRadius: 'inherit',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n    pointerEvents: 'none',\n  },\n  '&::after': {\n    boxSizing: 'border-box',\n    borderRadius: 'inherit',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n    pointerEvents: 'none',\n  },\n\n  '&:focus-visible': {\n    '&::before': {\n      backgroundColor: '$textareaFocusBg',\n    },\n    '&::after': {\n      backgroundColor: '$primary',\n      opacity: 0.15,\n    },\n  },\n\n  '@hover': {\n    '&:hover': {\n      '&::before': {\n        backgroundColor: '$textareaHoverBg',\n      },\n      '&::after': {\n        backgroundColor: '$primary',\n        opacity: 0.05,\n      },\n    },\n  },\n\n  variants: {\n    disabled: {\n      true: {\n        opacity: 0.7,\n        color: '$textareaDisabledText',\n        '@hover': {\n          '&:hover': {\n            '&::before': {\n              backgroundColor: 'inherit',\n            },\n            '&::after': {\n              backgroundColor: 'inherit',\n            },\n          },\n        },\n      },\n    },\n    state: {\n      invalid: {\n        '@hover': {\n          '&:hover': {\n            '&::after': {\n              backgroundColor: '$textareaInvalidBorder',\n            },\n          },\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    disabled: false,\n  },\n});\n\nconst AdornmentWrapperEnd = styled('div', {\n  position: 'absolute',\n  bottom: '$2',\n  right: '$3',\n  minWidth: '$5',\n  minHeight: '$5',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n});\n\nexport interface TextareaVariants\n  extends Omit<VariantProps<typeof StyledTextarea>, 'endAdornment'> {}\n\nexport interface TextareaProps\n  extends TextareaVariants,\n    Omit<React.ComponentProps<typeof StyledTextarea>, 'endAdornment'> {\n  label?: string;\n  endAdornment?: React.ReactNode;\n  rootCss?: CSS;\n}\n\nexport const Textarea = React.forwardRef<React.ElementRef<typeof StyledTextarea>, TextareaProps>(\n  (\n    { state, disabled, onFocus, onBlur, label, id, rootCss, css, endAdornment, ...props },\n    forwardedRef\n  ) => {\n    const [hasFocus, setHasFocus] = React.useState(false);\n\n    const invalid = React.useMemo(() => state === 'invalid', [state]);\n\n    const hasEndAdornment = React.useMemo(() => Boolean(endAdornment), [endAdornment]);\n\n    const labelVariant = React.useMemo(() => {\n      if (disabled) {\n        return 'subtle';\n      }\n      if (invalid) {\n        return 'invalid';\n      }\n      if (hasFocus) {\n        return 'contrast';\n      }\n      return 'default';\n    }, [invalid, disabled, hasFocus]);\n\n    const handleFocus = React.useCallback(\n      (e: React.FocusEvent<HTMLTextAreaElement>) => {\n        if (onFocus) {\n          onFocus(e);\n        }\n        setHasFocus(true);\n      },\n      [onFocus, setHasFocus]\n    );\n\n    const handleBlur = React.useCallback(\n      (e: React.FocusEvent<HTMLTextAreaElement>) => {\n        if (onBlur) {\n          onBlur(e);\n        }\n        setHasFocus(false);\n      },\n      [onBlur, setHasFocus]\n    );\n\n    return (\n      <Box css={rootCss}>\n        {label && (\n          <Label variant={labelVariant} htmlFor={id} css={{ display: 'block' }}>\n            {label}\n          </Label>\n        )}\n        <TextareaWrapper state={state} disabled={disabled}>\n          <StyledTextarea\n            id={id}\n            ref={forwardedRef}\n            css={css}\n            disabled={disabled}\n            state={state}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            endAdornment={hasEndAdornment}\n            {...props}\n          />\n          {hasEndAdornment && <AdornmentWrapperEnd>{endAdornment}</AdornmentWrapperEnd>}\n        </TextareaWrapper>\n      </Box>\n    );\n  }\n);\n"],"mappings":"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"}
+{"version":3,"file":"Textarea.cjs","names":["elevationVariants","styled","React","Box","Label"],"sources":["../../../components/Textarea/Textarea.tsx"],"sourcesContent":["import React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { Box } from '../Box';\nimport { elevationVariants } from '../Elevation';\nimport { Label } from '../Label';\n\n// CONSTANTS\nconst FOCUS_SHADOW = elevationVariants[1].boxShadow; // apply elevation $1 when focus\n\n// COMPONENTS\nconst StyledTextarea = styled('textarea', {\n  // Reset\n  appearance: 'none',\n  overflow: 'auto', // force overflow auto behaviour cross-browser\n  borderWidth: '0',\n  boxSizing: 'border-box',\n  fontFamily: '$rubik',\n  margin: '0',\n  outline: 'none',\n  WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n\n  // Custom\n  p: '$3',\n  position: 'relative',\n  flexGrow: 1, // make sure to grow fully inside TextareaWrapper\n  backgroundColor: 'transparent',\n  borderRadius: 'inherit', // inherit border radius from TextareaWrapper\n  boxShadow: 'inset 0 0 0 1px $colors$textareaBorder',\n  color: '$textareaText',\n  fontVariantNumeric: 'tabular-nums',\n  transition: 'box-shadow .1s ease-in-out',\n\n  '&:-webkit-autofill,&:autofill': {\n    boxShadow: 'inset 0 0 0 1px $colors$textareaBorder, inset 0 0 0 100px $colors$textareaBg',\n  },\n\n  '&:-webkit-autofill::first-line,&:autofill::first-line': {\n    fontFamily: '$rubik',\n    color: '$hiContrast',\n  },\n\n  '&:focus-visible': {\n    boxShadow: `inset 0 0 0 2px $colors$textareaFocusBorder, ${FOCUS_SHADOW}`,\n  },\n\n  '&::placeholder': {\n    color: '$textareaPlaceholder',\n  },\n\n  '&:read-only:not(:disabled)': {\n    boxShadow: 'none',\n  },\n\n  '&:disabled': {\n    pointerEvents: 'none',\n    opacity: 0.7,\n    color: '$textareaDisabledText',\n  },\n  variants: {\n    variant: {\n      ghost: {\n        boxShadow: 'none',\n        '&:disabled': {\n          boxShadow: 'none',\n        },\n        backgroundColor: 'transparent',\n        '&:focus-visible': {\n          backgroundColor: '$loContrast',\n        },\n      },\n    },\n    state: {\n      invalid: {\n        boxShadow: 'inset 0 0 0 1px $colors$textareaInvalidBorder',\n        '&:focus-visible': {\n          boxShadow: `inset 0 0 0 2px $colors$textareaInvalidBorder, ${FOCUS_SHADOW}`,\n        },\n        '@hover': {\n          '&:hover': {\n            '&::after': {\n              backgroundColor: '$textareaInvalidBorder',\n            },\n          },\n        },\n      },\n    },\n    cursor: {\n      default: {\n        cursor: 'default',\n        '@hover': {\n          '&:hover:not(:read-only)': {\n            cursor: 'text',\n          },\n        },\n        '&:focus-visible:not(:read-only)': {\n          cursor: 'text',\n        },\n      },\n      text: {\n        cursor: 'text',\n      },\n    },\n    resize: {\n      none: {\n        resize: 'none',\n      },\n      both: {\n        resize: 'both',\n      },\n      vertical: {\n        resize: 'vertical',\n      },\n      horizontal: {\n        resize: 'horizontal',\n      },\n    },\n    endAdornment: {\n      true: {\n        paddingBottom: '$5',\n        paddingRight: '$5',\n      },\n    },\n  },\n  defaultVariants: {\n    cursor: 'default',\n    resize: 'both',\n  },\n  compoundVariants: [\n    {\n      variant: 'ghost',\n      state: 'invalid',\n      css: {\n        boxShadow: 'inset 0 0 0 1px $colors$textareaInvalidBorder',\n      },\n    },\n  ],\n});\n\nconst TextareaWrapper = styled('div', {\n  // Reset\n  outline: 'none',\n  lineHeight: 0,\n\n  position: 'relative',\n  display: 'inline-flex', // helps matching resizable content size\n  backgroundColor: '$textareaBg',\n  color: '$textareaPlaceholder',\n  borderRadius: '$3',\n\n  '&::before': {\n    boxSizing: 'border-box',\n    borderRadius: 'inherit',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n    pointerEvents: 'none',\n  },\n  '&::after': {\n    boxSizing: 'border-box',\n    borderRadius: 'inherit',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n    pointerEvents: 'none',\n  },\n\n  '&:focus-visible': {\n    '&::before': {\n      backgroundColor: '$textareaFocusBg',\n    },\n    '&::after': {\n      backgroundColor: '$primary',\n      opacity: 0.15,\n    },\n  },\n\n  '@hover': {\n    '&:hover': {\n      '&::before': {\n        backgroundColor: '$textareaHoverBg',\n      },\n      '&::after': {\n        backgroundColor: '$primary',\n        opacity: 0.05,\n      },\n    },\n  },\n\n  variants: {\n    disabled: {\n      true: {\n        opacity: 0.7,\n        color: '$textareaDisabledText',\n        '@hover': {\n          '&:hover': {\n            '&::before': {\n              backgroundColor: 'inherit',\n            },\n            '&::after': {\n              backgroundColor: 'inherit',\n            },\n          },\n        },\n      },\n    },\n    state: {\n      invalid: {\n        '@hover': {\n          '&:hover': {\n            '&::after': {\n              backgroundColor: '$textareaInvalidBorder',\n            },\n          },\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    disabled: false,\n  },\n});\n\nconst AdornmentWrapperEnd = styled('div', {\n  position: 'absolute',\n  bottom: '$2',\n  right: '$3',\n  minWidth: '$5',\n  minHeight: '$5',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n});\n\nexport interface TextareaVariants\n  extends Omit<VariantProps<typeof StyledTextarea>, 'endAdornment'> {}\n\nexport interface TextareaProps\n  extends TextareaVariants,\n    Omit<React.ComponentProps<typeof StyledTextarea>, 'endAdornment'> {\n  label?: string;\n  endAdornment?: React.ReactNode;\n  rootCss?: CSS;\n}\n\nexport const Textarea = React.forwardRef<React.ElementRef<typeof StyledTextarea>, TextareaProps>(\n  (\n    { state, disabled, onFocus, onBlur, label, id, rootCss, css, endAdornment, ...props },\n    forwardedRef\n  ) => {\n    const [hasFocus, setHasFocus] = React.useState(false);\n\n    const invalid = React.useMemo(() => state === 'invalid', [state]);\n\n    const hasEndAdornment = React.useMemo(() => Boolean(endAdornment), [endAdornment]);\n\n    const labelVariant = React.useMemo(() => {\n      if (disabled) {\n        return 'subtle';\n      }\n      if (invalid) {\n        return 'invalid';\n      }\n      if (hasFocus) {\n        return 'contrast';\n      }\n      return 'default';\n    }, [invalid, disabled, hasFocus]);\n\n    const handleFocus = React.useCallback(\n      (e: React.FocusEvent<HTMLTextAreaElement>) => {\n        if (onFocus) {\n          onFocus(e);\n        }\n        setHasFocus(true);\n      },\n      [onFocus, setHasFocus]\n    );\n\n    const handleBlur = React.useCallback(\n      (e: React.FocusEvent<HTMLTextAreaElement>) => {\n        if (onBlur) {\n          onBlur(e);\n        }\n        setHasFocus(false);\n      },\n      [onBlur, setHasFocus]\n    );\n\n    return (\n      <Box css={rootCss}>\n        {label && (\n          <Label variant={labelVariant} htmlFor={id} css={{ display: 'block' }}>\n            {label}\n          </Label>\n        )}\n        <TextareaWrapper state={state} disabled={disabled}>\n          <StyledTextarea\n            id={id}\n            ref={forwardedRef}\n            css={css}\n            disabled={disabled}\n            state={state}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            endAdornment={hasEndAdornment}\n            {...props}\n          />\n          {hasEndAdornment && <AdornmentWrapperEnd>{endAdornment}</AdornmentWrapperEnd>}\n        </TextareaWrapper>\n      </Box>\n    );\n  }\n);\n"],"mappings":"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"}

package/dist/components/Textarea/Textarea.js

@@ -4,7 +4,7 @@ import { elevationVariants } from "../Elevation/Elevation.js";
 import { Label } from "../Label/Label.js";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region components/Textarea/Textarea.tsx
+// components/Textarea/Textarea.tsx
 var FOCUS_SHADOW = elevationVariants[1].boxShadow;
 var StyledTextarea = styled("textarea", {
 	appearance: "none",
@@ -185,7 +185,6 @@ var Textarea = React.forwardRef(({ state, disabled, onFocus, onBlur, label, id,
 		})]
 	});
 });
-//#endregion
 export { Textarea };
 
 //# sourceMappingURL=Textarea.js.map

package/dist/components/Textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","names":[],"sources":["../../../components/Textarea/Textarea.tsx"],"sourcesContent":["import React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { Box } from '../Box';\nimport { elevationVariants } from '../Elevation';\nimport { Label } from '../Label';\n\n// CONSTANTS\nconst FOCUS_SHADOW = elevationVariants[1].boxShadow; // apply elevation $1 when focus\n\n// COMPONENTS\nconst StyledTextarea = styled('textarea', {\n  // Reset\n  appearance: 'none',\n  overflow: 'auto', // force overflow auto behaviour cross-browser\n  borderWidth: '0',\n  boxSizing: 'border-box',\n  fontFamily: '$rubik',\n  margin: '0',\n  outline: 'none',\n  WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n\n  // Custom\n  p: '$3',\n  position: 'relative',\n  flexGrow: 1, // make sure to grow fully inside TextareaWrapper\n  backgroundColor: 'transparent',\n  borderRadius: 'inherit', // inherit border radius from TextareaWrapper\n  boxShadow: 'inset 0 0 0 1px $colors$textareaBorder',\n  color: '$textareaText',\n  fontVariantNumeric: 'tabular-nums',\n  transition: 'box-shadow .1s ease-in-out',\n\n  '&:-webkit-autofill,&:autofill': {\n    boxShadow: 'inset 0 0 0 1px $colors$textareaBorder, inset 0 0 0 100px $colors$textareaBg',\n  },\n\n  '&:-webkit-autofill::first-line,&:autofill::first-line': {\n    fontFamily: '$rubik',\n    color: '$hiContrast',\n  },\n\n  '&:focus-visible': {\n    boxShadow: `inset 0 0 0 2px $colors$textareaFocusBorder, ${FOCUS_SHADOW}`,\n  },\n\n  '&::placeholder': {\n    color: '$textareaPlaceholder',\n  },\n\n  '&:read-only:not(:disabled)': {\n    boxShadow: 'none',\n  },\n\n  '&:disabled': {\n    pointerEvents: 'none',\n    opacity: 0.7,\n    color: '$textareaDisabledText',\n  },\n  variants: {\n    variant: {\n      ghost: {\n        boxShadow: 'none',\n        '&:disabled': {\n          boxShadow: 'none',\n        },\n        backgroundColor: 'transparent',\n        '&:focus-visible': {\n          backgroundColor: '$loContrast',\n        },\n      },\n    },\n    state: {\n      invalid: {\n        boxShadow: 'inset 0 0 0 1px $colors$textareaInvalidBorder',\n        '&:focus-visible': {\n          boxShadow: `inset 0 0 0 2px $colors$textareaInvalidBorder, ${FOCUS_SHADOW}`,\n        },\n        '@hover': {\n          '&:hover': {\n            '&::after': {\n              backgroundColor: '$textareaInvalidBorder',\n            },\n          },\n        },\n      },\n    },\n    cursor: {\n      default: {\n        cursor: 'default',\n        '@hover': {\n          '&:hover:not(:read-only)': {\n            cursor: 'text',\n          },\n        },\n        '&:focus-visible:not(:read-only)': {\n          cursor: 'text',\n        },\n      },\n      text: {\n        cursor: 'text',\n      },\n    },\n    resize: {\n      none: {\n        resize: 'none',\n      },\n      both: {\n        resize: 'both',\n      },\n      vertical: {\n        resize: 'vertical',\n      },\n      horizontal: {\n        resize: 'horizontal',\n      },\n    },\n    endAdornment: {\n      true: {\n        paddingBottom: '$5',\n        paddingRight: '$5',\n      },\n    },\n  },\n  defaultVariants: {\n    cursor: 'default',\n    resize: 'both',\n  },\n  compoundVariants: [\n    {\n      variant: 'ghost',\n      state: 'invalid',\n      css: {\n        boxShadow: 'inset 0 0 0 1px $colors$textareaInvalidBorder',\n      },\n    },\n  ],\n});\n\nconst TextareaWrapper = styled('div', {\n  // Reset\n  outline: 'none',\n  lineHeight: 0,\n\n  position: 'relative',\n  display: 'inline-flex', // helps matching resizable content size\n  backgroundColor: '$textareaBg',\n  color: '$textareaPlaceholder',\n  borderRadius: '$3',\n\n  '&::before': {\n    boxSizing: 'border-box',\n    borderRadius: 'inherit',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n    pointerEvents: 'none',\n  },\n  '&::after': {\n    boxSizing: 'border-box',\n    borderRadius: 'inherit',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n    pointerEvents: 'none',\n  },\n\n  '&:focus-visible': {\n    '&::before': {\n      backgroundColor: '$textareaFocusBg',\n    },\n    '&::after': {\n      backgroundColor: '$primary',\n      opacity: 0.15,\n    },\n  },\n\n  '@hover': {\n    '&:hover': {\n      '&::before': {\n        backgroundColor: '$textareaHoverBg',\n      },\n      '&::after': {\n        backgroundColor: '$primary',\n        opacity: 0.05,\n      },\n    },\n  },\n\n  variants: {\n    disabled: {\n      true: {\n        opacity: 0.7,\n        color: '$textareaDisabledText',\n        '@hover': {\n          '&:hover': {\n            '&::before': {\n              backgroundColor: 'inherit',\n            },\n            '&::after': {\n              backgroundColor: 'inherit',\n            },\n          },\n        },\n      },\n    },\n    state: {\n      invalid: {\n        '@hover': {\n          '&:hover': {\n            '&::after': {\n              backgroundColor: '$textareaInvalidBorder',\n            },\n          },\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    disabled: false,\n  },\n});\n\nconst AdornmentWrapperEnd = styled('div', {\n  position: 'absolute',\n  bottom: '$2',\n  right: '$3',\n  minWidth: '$5',\n  minHeight: '$5',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n});\n\nexport interface TextareaVariants\n  extends Omit<VariantProps<typeof StyledTextarea>, 'endAdornment'> {}\n\nexport interface TextareaProps\n  extends TextareaVariants,\n    Omit<React.ComponentProps<typeof StyledTextarea>, 'endAdornment'> {\n  label?: string;\n  endAdornment?: React.ReactNode;\n  rootCss?: CSS;\n}\n\nexport const Textarea = React.forwardRef<React.ElementRef<typeof StyledTextarea>, TextareaProps>(\n  (\n    { state, disabled, onFocus, onBlur, label, id, rootCss, css, endAdornment, ...props },\n    forwardedRef\n  ) => {\n    const [hasFocus, setHasFocus] = React.useState(false);\n\n    const invalid = React.useMemo(() => state === 'invalid', [state]);\n\n    const hasEndAdornment = React.useMemo(() => Boolean(endAdornment), [endAdornment]);\n\n    const labelVariant = React.useMemo(() => {\n      if (disabled) {\n        return 'subtle';\n      }\n      if (invalid) {\n        return 'invalid';\n      }\n      if (hasFocus) {\n        return 'contrast';\n      }\n      return 'default';\n    }, [invalid, disabled, hasFocus]);\n\n    const handleFocus = React.useCallback(\n      (e: React.FocusEvent<HTMLTextAreaElement>) => {\n        if (onFocus) {\n          onFocus(e);\n        }\n        setHasFocus(true);\n      },\n      [onFocus, setHasFocus]\n    );\n\n    const handleBlur = React.useCallback(\n      (e: React.FocusEvent<HTMLTextAreaElement>) => {\n        if (onBlur) {\n          onBlur(e);\n        }\n        setHasFocus(false);\n      },\n      [onBlur, setHasFocus]\n    );\n\n    return (\n      <Box css={rootCss}>\n        {label && (\n          <Label variant={labelVariant} htmlFor={id} css={{ display: 'block' }}>\n            {label}\n          </Label>\n        )}\n        <TextareaWrapper state={state} disabled={disabled}>\n          <StyledTextarea\n            id={id}\n            ref={forwardedRef}\n            css={css}\n            disabled={disabled}\n            state={state}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            endAdornment={hasEndAdornment}\n            {...props}\n          />\n          {hasEndAdornment && <AdornmentWrapperEnd>{endAdornment}</AdornmentWrapperEnd>}\n        </TextareaWrapper>\n      </Box>\n    );\n  }\n);\n"],"mappings":"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"}
+{"version":3,"file":"Textarea.js","names":[],"sources":["../../../components/Textarea/Textarea.tsx"],"sourcesContent":["import React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { Box } from '../Box';\nimport { elevationVariants } from '../Elevation';\nimport { Label } from '../Label';\n\n// CONSTANTS\nconst FOCUS_SHADOW = elevationVariants[1].boxShadow; // apply elevation $1 when focus\n\n// COMPONENTS\nconst StyledTextarea = styled('textarea', {\n  // Reset\n  appearance: 'none',\n  overflow: 'auto', // force overflow auto behaviour cross-browser\n  borderWidth: '0',\n  boxSizing: 'border-box',\n  fontFamily: '$rubik',\n  margin: '0',\n  outline: 'none',\n  WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n\n  // Custom\n  p: '$3',\n  position: 'relative',\n  flexGrow: 1, // make sure to grow fully inside TextareaWrapper\n  backgroundColor: 'transparent',\n  borderRadius: 'inherit', // inherit border radius from TextareaWrapper\n  boxShadow: 'inset 0 0 0 1px $colors$textareaBorder',\n  color: '$textareaText',\n  fontVariantNumeric: 'tabular-nums',\n  transition: 'box-shadow .1s ease-in-out',\n\n  '&:-webkit-autofill,&:autofill': {\n    boxShadow: 'inset 0 0 0 1px $colors$textareaBorder, inset 0 0 0 100px $colors$textareaBg',\n  },\n\n  '&:-webkit-autofill::first-line,&:autofill::first-line': {\n    fontFamily: '$rubik',\n    color: '$hiContrast',\n  },\n\n  '&:focus-visible': {\n    boxShadow: `inset 0 0 0 2px $colors$textareaFocusBorder, ${FOCUS_SHADOW}`,\n  },\n\n  '&::placeholder': {\n    color: '$textareaPlaceholder',\n  },\n\n  '&:read-only:not(:disabled)': {\n    boxShadow: 'none',\n  },\n\n  '&:disabled': {\n    pointerEvents: 'none',\n    opacity: 0.7,\n    color: '$textareaDisabledText',\n  },\n  variants: {\n    variant: {\n      ghost: {\n        boxShadow: 'none',\n        '&:disabled': {\n          boxShadow: 'none',\n        },\n        backgroundColor: 'transparent',\n        '&:focus-visible': {\n          backgroundColor: '$loContrast',\n        },\n      },\n    },\n    state: {\n      invalid: {\n        boxShadow: 'inset 0 0 0 1px $colors$textareaInvalidBorder',\n        '&:focus-visible': {\n          boxShadow: `inset 0 0 0 2px $colors$textareaInvalidBorder, ${FOCUS_SHADOW}`,\n        },\n        '@hover': {\n          '&:hover': {\n            '&::after': {\n              backgroundColor: '$textareaInvalidBorder',\n            },\n          },\n        },\n      },\n    },\n    cursor: {\n      default: {\n        cursor: 'default',\n        '@hover': {\n          '&:hover:not(:read-only)': {\n            cursor: 'text',\n          },\n        },\n        '&:focus-visible:not(:read-only)': {\n          cursor: 'text',\n        },\n      },\n      text: {\n        cursor: 'text',\n      },\n    },\n    resize: {\n      none: {\n        resize: 'none',\n      },\n      both: {\n        resize: 'both',\n      },\n      vertical: {\n        resize: 'vertical',\n      },\n      horizontal: {\n        resize: 'horizontal',\n      },\n    },\n    endAdornment: {\n      true: {\n        paddingBottom: '$5',\n        paddingRight: '$5',\n      },\n    },\n  },\n  defaultVariants: {\n    cursor: 'default',\n    resize: 'both',\n  },\n  compoundVariants: [\n    {\n      variant: 'ghost',\n      state: 'invalid',\n      css: {\n        boxShadow: 'inset 0 0 0 1px $colors$textareaInvalidBorder',\n      },\n    },\n  ],\n});\n\nconst TextareaWrapper = styled('div', {\n  // Reset\n  outline: 'none',\n  lineHeight: 0,\n\n  position: 'relative',\n  display: 'inline-flex', // helps matching resizable content size\n  backgroundColor: '$textareaBg',\n  color: '$textareaPlaceholder',\n  borderRadius: '$3',\n\n  '&::before': {\n    boxSizing: 'border-box',\n    borderRadius: 'inherit',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n    pointerEvents: 'none',\n  },\n  '&::after': {\n    boxSizing: 'border-box',\n    borderRadius: 'inherit',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n    pointerEvents: 'none',\n  },\n\n  '&:focus-visible': {\n    '&::before': {\n      backgroundColor: '$textareaFocusBg',\n    },\n    '&::after': {\n      backgroundColor: '$primary',\n      opacity: 0.15,\n    },\n  },\n\n  '@hover': {\n    '&:hover': {\n      '&::before': {\n        backgroundColor: '$textareaHoverBg',\n      },\n      '&::after': {\n        backgroundColor: '$primary',\n        opacity: 0.05,\n      },\n    },\n  },\n\n  variants: {\n    disabled: {\n      true: {\n        opacity: 0.7,\n        color: '$textareaDisabledText',\n        '@hover': {\n          '&:hover': {\n            '&::before': {\n              backgroundColor: 'inherit',\n            },\n            '&::after': {\n              backgroundColor: 'inherit',\n            },\n          },\n        },\n      },\n    },\n    state: {\n      invalid: {\n        '@hover': {\n          '&:hover': {\n            '&::after': {\n              backgroundColor: '$textareaInvalidBorder',\n            },\n          },\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    disabled: false,\n  },\n});\n\nconst AdornmentWrapperEnd = styled('div', {\n  position: 'absolute',\n  bottom: '$2',\n  right: '$3',\n  minWidth: '$5',\n  minHeight: '$5',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n});\n\nexport interface TextareaVariants\n  extends Omit<VariantProps<typeof StyledTextarea>, 'endAdornment'> {}\n\nexport interface TextareaProps\n  extends TextareaVariants,\n    Omit<React.ComponentProps<typeof StyledTextarea>, 'endAdornment'> {\n  label?: string;\n  endAdornment?: React.ReactNode;\n  rootCss?: CSS;\n}\n\nexport const Textarea = React.forwardRef<React.ElementRef<typeof StyledTextarea>, TextareaProps>(\n  (\n    { state, disabled, onFocus, onBlur, label, id, rootCss, css, endAdornment, ...props },\n    forwardedRef\n  ) => {\n    const [hasFocus, setHasFocus] = React.useState(false);\n\n    const invalid = React.useMemo(() => state === 'invalid', [state]);\n\n    const hasEndAdornment = React.useMemo(() => Boolean(endAdornment), [endAdornment]);\n\n    const labelVariant = React.useMemo(() => {\n      if (disabled) {\n        return 'subtle';\n      }\n      if (invalid) {\n        return 'invalid';\n      }\n      if (hasFocus) {\n        return 'contrast';\n      }\n      return 'default';\n    }, [invalid, disabled, hasFocus]);\n\n    const handleFocus = React.useCallback(\n      (e: React.FocusEvent<HTMLTextAreaElement>) => {\n        if (onFocus) {\n          onFocus(e);\n        }\n        setHasFocus(true);\n      },\n      [onFocus, setHasFocus]\n    );\n\n    const handleBlur = React.useCallback(\n      (e: React.FocusEvent<HTMLTextAreaElement>) => {\n        if (onBlur) {\n          onBlur(e);\n        }\n        setHasFocus(false);\n      },\n      [onBlur, setHasFocus]\n    );\n\n    return (\n      <Box css={rootCss}>\n        {label && (\n          <Label variant={labelVariant} htmlFor={id} css={{ display: 'block' }}>\n            {label}\n          </Label>\n        )}\n        <TextareaWrapper state={state} disabled={disabled}>\n          <StyledTextarea\n            id={id}\n            ref={forwardedRef}\n            css={css}\n            disabled={disabled}\n            state={state}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            endAdornment={hasEndAdornment}\n            {...props}\n          />\n          {hasEndAdornment && <AdornmentWrapperEnd>{endAdornment}</AdornmentWrapperEnd>}\n        </TextareaWrapper>\n      </Box>\n    );\n  }\n);\n"],"mappings":"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"}

package/dist/components/Textarea/Textarea.theme.cjs

@@ -1,7 +1,7 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
 let tinycolor2 = require("tinycolor2");
 tinycolor2 = require_runtime.__toESM(tinycolor2, 1);
-//#region components/Textarea/Textarea.theme.ts
+// components/Textarea/Textarea.theme.ts
 var textareaLightTheme = {
 	textareaBg: "hsl(240, 14.0%, 99.0%)",
 	textareaBorder: "hsl(208, 9.0%, 73.0%)",
@@ -24,7 +24,6 @@ var textareaDarkTheme = {
 	textareaDisabledText: (0, tinycolor2.default)("white").setAlpha(.35).toHslString(),
 	textareaInvalidBorder: "hsl(358, 75%, 59%)"
 };
-//#endregion
 exports.textareaDarkTheme = textareaDarkTheme;
 exports.textareaLightTheme = textareaLightTheme;
 

package/dist/components/Textarea/Textarea.theme.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.theme.cjs","names":[],"sources":["../../../components/Textarea/Textarea.theme.ts"],"sourcesContent":["import tinycolor from 'tinycolor2';\n\n// Plain TypeScript color tokens (no vanilla-extract)\n// Using default blue primary color for static tokens\nexport const textareaLightTheme = {\n  textareaBg: 'hsl(240, 14.0%, 99.0%)', // $deepBlue1\n  textareaBorder: 'hsl(208, 9.0%, 73.0%)', // $grayBlue9\n  textareaFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n  textareaFocusBorder: 'hsl(206, 100%, 50%)', // blue8\n  textareaHoverBg: 'hsla(0, 0%, 100%, 0.372)', // $whiteA9\n  textareaText: tinycolor('black').setAlpha(0.74).toHslString(),\n  textareaPlaceholder: 'hsla(0, 0%, 0%, 0.498)', // $blackA10\n  textareaDisabledText: tinycolor('black').setAlpha(0.35).toHslString(),\n  textareaInvalidBorder: 'hsl(358, 75%, 59%)', // $red9\n};\n\nexport const textareaDarkTheme = {\n  textareaBg: 'hsl(209, 38.0%, 12.0%)', // $grayBlue7 dark\n  textareaBorder: 'hsl(208, 11.0%, 45.0%)', // $grayBlue9 dark\n  textareaFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n  textareaFocusBorder: 'hsl(206, 100%, 70%)', // blue11\n  textareaHoverBg: 'hsla(0, 0%, 100%, 0.104)', // $whiteA4\n  textareaText: tinycolor('white').setAlpha(0.8).toHslString(),\n  textareaPlaceholder: 'hsla(0, 0%, 100%, 0.455)', // $whiteA10\n  textareaDisabledText: tinycolor('white').setAlpha(0.35).toHslString(),\n  textareaInvalidBorder: 'hsl(358, 75%, 59%)', // $red9\n};\n"],"mappings":";;;;AAIA,IAAa,qBAAqB;CAChC,YAAY;CACZ,gBAAgB;CAChB,kBAAA,GAAA,WAAA,QAAA,CAA2B,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;CAC/D,qBAAqB;CACrB,iBAAiB;CACjB,eAAA,GAAA,WAAA,QAAA,CAAwB,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;CAC5D,qBAAqB;CACrB,uBAAA,GAAA,WAAA,QAAA,CAAgC,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;CACpE,uBAAuB;AACzB;AAEA,IAAa,oBAAoB;CAC/B,YAAY;CACZ,gBAAgB;CAChB,kBAAA,GAAA,WAAA,QAAA,CAA2B,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;CAC/D,qBAAqB;CACrB,iBAAiB;CACjB,eAAA,GAAA,WAAA,QAAA,CAAwB,OAAO,CAAC,CAAC,SAAS,EAAG,CAAC,CAAC,YAAY;CAC3D,qBAAqB;CACrB,uBAAA,GAAA,WAAA,QAAA,CAAgC,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;CACpE,uBAAuB;AACzB"}
+{"version":3,"file":"Textarea.theme.cjs","names":["tinycolor"],"sources":["../../../components/Textarea/Textarea.theme.ts"],"sourcesContent":["import tinycolor from 'tinycolor2';\n\n// Plain TypeScript color tokens (no vanilla-extract)\n// Using default blue primary color for static tokens\nexport const textareaLightTheme = {\n  textareaBg: 'hsl(240, 14.0%, 99.0%)', // $deepBlue1\n  textareaBorder: 'hsl(208, 9.0%, 73.0%)', // $grayBlue9\n  textareaFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n  textareaFocusBorder: 'hsl(206, 100%, 50%)', // blue8\n  textareaHoverBg: 'hsla(0, 0%, 100%, 0.372)', // $whiteA9\n  textareaText: tinycolor('black').setAlpha(0.74).toHslString(),\n  textareaPlaceholder: 'hsla(0, 0%, 0%, 0.498)', // $blackA10\n  textareaDisabledText: tinycolor('black').setAlpha(0.35).toHslString(),\n  textareaInvalidBorder: 'hsl(358, 75%, 59%)', // $red9\n};\n\nexport const textareaDarkTheme = {\n  textareaBg: 'hsl(209, 38.0%, 12.0%)', // $grayBlue7 dark\n  textareaBorder: 'hsl(208, 11.0%, 45.0%)', // $grayBlue9 dark\n  textareaFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n  textareaFocusBorder: 'hsl(206, 100%, 70%)', // blue11\n  textareaHoverBg: 'hsla(0, 0%, 100%, 0.104)', // $whiteA4\n  textareaText: tinycolor('white').setAlpha(0.8).toHslString(),\n  textareaPlaceholder: 'hsla(0, 0%, 100%, 0.455)', // $whiteA10\n  textareaDisabledText: tinycolor('white').setAlpha(0.35).toHslString(),\n  textareaInvalidBorder: 'hsl(358, 75%, 59%)', // $red9\n};\n"],"mappings":";;;;AAIA,IAAa,qBAAqB;CAChC,YAAY;CACZ,gBAAgB;CAChB,kBAAA,GAAiBA,WAAAA,QAAAA,CAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;CAC/D,qBAAqB;CACrB,iBAAiB;CACjB,eAAA,GAAcA,WAAAA,QAAAA,CAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;CAC5D,qBAAqB;CACrB,uBAAA,GAAsBA,WAAAA,QAAAA,CAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;CACpE,uBAAuB;AACzB;AAEA,IAAa,oBAAoB;CAC/B,YAAY;CACZ,gBAAgB;CAChB,kBAAA,GAAiBA,WAAAA,QAAAA,CAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;CAC/D,qBAAqB;CACrB,iBAAiB;CACjB,eAAA,GAAcA,WAAAA,QAAAA,CAAU,OAAO,CAAC,CAAC,SAAS,EAAG,CAAC,CAAC,YAAY;CAC3D,qBAAqB;CACrB,uBAAA,GAAsBA,WAAAA,QAAAA,CAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;CACpE,uBAAuB;AACzB"}

package/dist/components/Textarea/Textarea.theme.js

@@ -1,5 +1,5 @@
 import tinycolor from "tinycolor2";
-//#region components/Textarea/Textarea.theme.ts
+// components/Textarea/Textarea.theme.ts
 var textareaLightTheme = {
 	textareaBg: "hsl(240, 14.0%, 99.0%)",
 	textareaBorder: "hsl(208, 9.0%, 73.0%)",
@@ -22,7 +22,6 @@ var textareaDarkTheme = {
 	textareaDisabledText: tinycolor("white").setAlpha(.35).toHslString(),
 	textareaInvalidBorder: "hsl(358, 75%, 59%)"
 };
-//#endregion
 export { textareaDarkTheme, textareaLightTheme };
 
 //# sourceMappingURL=Textarea.theme.js.map

package/dist/components/Textarea/Textarea.themes.cjs

@@ -1,7 +1,7 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
 let tinycolor2 = require("tinycolor2");
 tinycolor2 = require_runtime.__toESM(tinycolor2, 1);
-//#region components/Textarea/Textarea.themes.ts
+// components/Textarea/Textarea.themes.ts
 var Theme;
 (function(_Theme) {
 	_Theme.getLight = (primaryColor) => ({
@@ -27,7 +27,6 @@ var Theme;
 		textareaInvalidBorder: "$red9"
 	});
 })(Theme || (Theme = {}));
-//#endregion
 Object.defineProperty(exports, "Theme", {
 	enumerable: true,
 	get: function() {

package/dist/components/Textarea/Textarea.themes.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.themes.cjs","names":[],"sources":["../../../components/Textarea/Textarea.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n  export type Colors = {\n    textareaBg: Property.Color;\n    textareaBorder: Property.Color;\n    textareaFocusBg: Property.Color;\n    textareaFocusBorder: Property.Color;\n    textareaHoverBg: Property.Color;\n    textareaText: Property.Color;\n    textareaPlaceholder: Property.Color;\n    textareaDisabledText: Property.Color;\n    textareaInvalidBorder: Property.Color;\n  };\n\n  type Factory = (primaryColor: ColorInfo) => Colors;\n\n  export const getLight: Factory = (primaryColor) => ({\n    textareaBg: '$deepBlue1',\n    textareaBorder: '$grayBlue9',\n    textareaFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n    textareaFocusBorder: primaryColor.helpers.pickScale(8),\n    textareaHoverBg: '$whiteA9',\n    textareaText: tinycolor('black').setAlpha(0.74).toHslString(),\n    textareaPlaceholder: '$blackA10',\n    textareaDisabledText: tinycolor('black').setAlpha(0.35).toHslString(),\n    textareaInvalidBorder: '$red9',\n  });\n\n  export const getDark: Factory = (primaryColor) => ({\n    textareaBg: '$grayBlue7',\n    textareaBorder: '$grayBlue9',\n    textareaFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n    textareaFocusBorder: primaryColor.helpers.pickScale(11),\n    textareaHoverBg: '$whiteA4',\n    textareaText: tinycolor('white').setAlpha(0.8).toHslString(),\n    textareaPlaceholder: '$whiteA10',\n    textareaDisabledText: tinycolor('white').setAlpha(0.35).toHslString(),\n    textareaInvalidBorder: '$red9',\n  });\n}\n"],"mappings":";;;;AAKO,IAAA;;CAeQ,OAAA,YAAqB,kBAAkB;EAClD,YAAY;EACZ,gBAAgB;EAChB,kBAAA,GAAA,WAAA,QAAA,CAA2B,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAC/D,qBAAqB,aAAa,QAAQ,UAAU,CAAC;EACrD,iBAAiB;EACjB,eAAA,GAAA,WAAA,QAAA,CAAwB,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAC5D,qBAAqB;EACrB,uBAAA,GAAA,WAAA,QAAA,CAAgC,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EACpE,uBAAuB;CACzB;CAEa,OAAA,WAAoB,kBAAkB;EACjD,YAAY;EACZ,gBAAgB;EAChB,kBAAA,GAAA,WAAA,QAAA,CAA2B,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAC/D,qBAAqB,aAAa,QAAQ,UAAU,EAAE;EACtD,iBAAiB;EACjB,eAAA,GAAA,WAAA,QAAA,CAAwB,OAAO,CAAC,CAAC,SAAS,EAAG,CAAC,CAAC,YAAY;EAC3D,qBAAqB;EACrB,uBAAA,GAAA,WAAA,QAAA,CAAgC,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EACpE,uBAAuB;CACzB;GACD,UAAA,QAAA,CAAA,EAAD"}
+{"version":3,"file":"Textarea.themes.cjs","names":["tinycolor"],"sources":["../../../components/Textarea/Textarea.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n  export type Colors = {\n    textareaBg: Property.Color;\n    textareaBorder: Property.Color;\n    textareaFocusBg: Property.Color;\n    textareaFocusBorder: Property.Color;\n    textareaHoverBg: Property.Color;\n    textareaText: Property.Color;\n    textareaPlaceholder: Property.Color;\n    textareaDisabledText: Property.Color;\n    textareaInvalidBorder: Property.Color;\n  };\n\n  type Factory = (primaryColor: ColorInfo) => Colors;\n\n  export const getLight: Factory = (primaryColor) => ({\n    textareaBg: '$deepBlue1',\n    textareaBorder: '$grayBlue9',\n    textareaFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n    textareaFocusBorder: primaryColor.helpers.pickScale(8),\n    textareaHoverBg: '$whiteA9',\n    textareaText: tinycolor('black').setAlpha(0.74).toHslString(),\n    textareaPlaceholder: '$blackA10',\n    textareaDisabledText: tinycolor('black').setAlpha(0.35).toHslString(),\n    textareaInvalidBorder: '$red9',\n  });\n\n  export const getDark: Factory = (primaryColor) => ({\n    textareaBg: '$grayBlue7',\n    textareaBorder: '$grayBlue9',\n    textareaFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n    textareaFocusBorder: primaryColor.helpers.pickScale(11),\n    textareaHoverBg: '$whiteA4',\n    textareaText: tinycolor('white').setAlpha(0.8).toHslString(),\n    textareaPlaceholder: '$whiteA10',\n    textareaDisabledText: tinycolor('white').setAlpha(0.35).toHslString(),\n    textareaInvalidBorder: '$red9',\n  });\n}\n"],"mappings":";;;;AAKO,IAAU;CAAV,SAAA,QAAA;CAeQ,OAAA,YAAqB,kBAAkB;EAClD,YAAY;EACZ,gBAAgB;EAChB,kBAAA,GAAiBA,WAAAA,QAAAA,CAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAC/D,qBAAqB,aAAa,QAAQ,UAAU,CAAC;EACrD,iBAAiB;EACjB,eAAA,GAAcA,WAAAA,QAAAA,CAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAC5D,qBAAqB;EACrB,uBAAA,GAAsBA,WAAAA,QAAAA,CAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EACpE,uBAAuB;CACzB;CAEa,OAAA,WAAoB,kBAAkB;EACjD,YAAY;EACZ,gBAAgB;EAChB,kBAAA,GAAiBA,WAAAA,QAAAA,CAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAC/D,qBAAqB,aAAa,QAAQ,UAAU,EAAE;EACtD,iBAAiB;EACjB,eAAA,GAAcA,WAAAA,QAAAA,CAAU,OAAO,CAAC,CAAC,SAAS,EAAG,CAAC,CAAC,YAAY;EAC3D,qBAAqB;EACrB,uBAAA,GAAsBA,WAAAA,QAAAA,CAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EACpE,uBAAuB;CACzB;AACD,EAAA,CAAA,UAAA,QAAA,CAAA,EAAD"}

package/dist/components/Textarea/Textarea.themes.js

@@ -1,5 +1,5 @@
 import tinycolor from "tinycolor2";
-//#region components/Textarea/Textarea.themes.ts
+// components/Textarea/Textarea.themes.ts
 var Theme;
 (function(_Theme) {
 	_Theme.getLight = (primaryColor) => ({
@@ -25,7 +25,6 @@ var Theme;
 		textareaInvalidBorder: "$red9"
 	});
 })(Theme || (Theme = {}));
-//#endregion
 export { Theme };
 
 //# sourceMappingURL=Textarea.themes.js.map

package/dist/components/Textarea/Textarea.themes.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.themes.js","names":[],"sources":["../../../components/Textarea/Textarea.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n  export type Colors = {\n    textareaBg: Property.Color;\n    textareaBorder: Property.Color;\n    textareaFocusBg: Property.Color;\n    textareaFocusBorder: Property.Color;\n    textareaHoverBg: Property.Color;\n    textareaText: Property.Color;\n    textareaPlaceholder: Property.Color;\n    textareaDisabledText: Property.Color;\n    textareaInvalidBorder: Property.Color;\n  };\n\n  type Factory = (primaryColor: ColorInfo) => Colors;\n\n  export const getLight: Factory = (primaryColor) => ({\n    textareaBg: '$deepBlue1',\n    textareaBorder: '$grayBlue9',\n    textareaFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n    textareaFocusBorder: primaryColor.helpers.pickScale(8),\n    textareaHoverBg: '$whiteA9',\n    textareaText: tinycolor('black').setAlpha(0.74).toHslString(),\n    textareaPlaceholder: '$blackA10',\n    textareaDisabledText: tinycolor('black').setAlpha(0.35).toHslString(),\n    textareaInvalidBorder: '$red9',\n  });\n\n  export const getDark: Factory = (primaryColor) => ({\n    textareaBg: '$grayBlue7',\n    textareaBorder: '$grayBlue9',\n    textareaFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n    textareaFocusBorder: primaryColor.helpers.pickScale(11),\n    textareaHoverBg: '$whiteA4',\n    textareaText: tinycolor('white').setAlpha(0.8).toHslString(),\n    textareaPlaceholder: '$whiteA10',\n    textareaDisabledText: tinycolor('white').setAlpha(0.35).toHslString(),\n    textareaInvalidBorder: '$red9',\n  });\n}\n"],"mappings":";;AAKO,IAAA;;CAeQ,OAAA,YAAqB,kBAAkB;EAClD,YAAY;EACZ,gBAAgB;EAChB,iBAAiB,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAC/D,qBAAqB,aAAa,QAAQ,UAAU,CAAC;EACrD,iBAAiB;EACjB,cAAc,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAC5D,qBAAqB;EACrB,sBAAsB,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EACpE,uBAAuB;CACzB;CAEa,OAAA,WAAoB,kBAAkB;EACjD,YAAY;EACZ,gBAAgB;EAChB,iBAAiB,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAC/D,qBAAqB,aAAa,QAAQ,UAAU,EAAE;EACtD,iBAAiB;EACjB,cAAc,UAAU,OAAO,CAAC,CAAC,SAAS,EAAG,CAAC,CAAC,YAAY;EAC3D,qBAAqB;EACrB,sBAAsB,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EACpE,uBAAuB;CACzB;GACD,UAAA,QAAA,CAAA,EAAD"}
+{"version":3,"file":"Textarea.themes.js","names":[],"sources":["../../../components/Textarea/Textarea.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n  export type Colors = {\n    textareaBg: Property.Color;\n    textareaBorder: Property.Color;\n    textareaFocusBg: Property.Color;\n    textareaFocusBorder: Property.Color;\n    textareaHoverBg: Property.Color;\n    textareaText: Property.Color;\n    textareaPlaceholder: Property.Color;\n    textareaDisabledText: Property.Color;\n    textareaInvalidBorder: Property.Color;\n  };\n\n  type Factory = (primaryColor: ColorInfo) => Colors;\n\n  export const getLight: Factory = (primaryColor) => ({\n    textareaBg: '$deepBlue1',\n    textareaBorder: '$grayBlue9',\n    textareaFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n    textareaFocusBorder: primaryColor.helpers.pickScale(8),\n    textareaHoverBg: '$whiteA9',\n    textareaText: tinycolor('black').setAlpha(0.74).toHslString(),\n    textareaPlaceholder: '$blackA10',\n    textareaDisabledText: tinycolor('black').setAlpha(0.35).toHslString(),\n    textareaInvalidBorder: '$red9',\n  });\n\n  export const getDark: Factory = (primaryColor) => ({\n    textareaBg: '$grayBlue7',\n    textareaBorder: '$grayBlue9',\n    textareaFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n    textareaFocusBorder: primaryColor.helpers.pickScale(11),\n    textareaHoverBg: '$whiteA4',\n    textareaText: tinycolor('white').setAlpha(0.8).toHslString(),\n    textareaPlaceholder: '$whiteA10',\n    textareaDisabledText: tinycolor('white').setAlpha(0.35).toHslString(),\n    textareaInvalidBorder: '$red9',\n  });\n}\n"],"mappings":";;AAKO,IAAU;CAAV,SAAA,QAAA;CAeQ,OAAA,YAAqB,kBAAkB;EAClD,YAAY;EACZ,gBAAgB;EAChB,iBAAiB,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAC/D,qBAAqB,aAAa,QAAQ,UAAU,CAAC;EACrD,iBAAiB;EACjB,cAAc,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAC5D,qBAAqB;EACrB,sBAAsB,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EACpE,uBAAuB;CACzB;CAEa,OAAA,WAAoB,kBAAkB;EACjD,YAAY;EACZ,gBAAgB;EAChB,iBAAiB,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAC/D,qBAAqB,aAAa,QAAQ,UAAU,EAAE;EACtD,iBAAiB;EACjB,cAAc,UAAU,OAAO,CAAC,CAAC,SAAS,EAAG,CAAC,CAAC,YAAY;EAC3D,qBAAqB;EACrB,sBAAsB,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EACpE,uBAAuB;CACzB;AACD,EAAA,CAAA,UAAA,QAAA,CAAA,EAAD"}

package/dist/components/Textarea/Textarea.vanilla.cjs

@@ -7,7 +7,7 @@ let react = require("react");
 react = require_runtime.__toESM(react, 1);
 let _vanilla_extract_dynamic = require("@vanilla-extract/dynamic");
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region components/Textarea/Textarea.vanilla.tsx
+// components/Textarea/Textarea.vanilla.tsx
 var TextareaVanilla = react.default.forwardRef(({ state, disabled, onFocus, onBlur, label, id, rootCss, css, endAdornment, variant, cursor, resize, className, style, ...props }, forwardedRef) => {
 	const [hasFocus, setHasFocus] = react.default.useState(false);
 	const { colors } = require_themeContext.useVanillaExtractTheme();
@@ -79,7 +79,6 @@ var TextareaVanilla = react.default.forwardRef(({ state, disabled, onFocus, onBl
 	});
 });
 TextareaVanilla.displayName = "TextareaVanilla";
-//#endregion
 exports.TextareaVanilla = TextareaVanilla;
 
 //# sourceMappingURL=Textarea.vanilla.cjs.map

package/dist/components/Textarea/Textarea.vanilla.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.vanilla.cjs","names":[],"sources":["../../../components/Textarea/Textarea.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport React from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { LabelVanilla } from '../Label';\nimport {\n  adornmentWrapperEnd,\n  styledTextareaRecipe,\n  textareaWrapperRecipe,\n} from './Textarea.vanilla.css';\n\ntype StyledTextareaRecipeVariants = NonNullable<RecipeVariants<typeof styledTextareaRecipe>>;\n\nexport interface TextareaVanillaOwnProps extends CSSProps {\n  variant?: StyledTextareaRecipeVariants['variant'];\n  state?: StyledTextareaRecipeVariants['state'];\n  cursor?: StyledTextareaRecipeVariants['cursor'];\n  resize?: StyledTextareaRecipeVariants['resize'];\n  label?: string;\n  endAdornment?: React.ReactNode;\n  rootCss?: CSSProps['css'];\n}\n\nexport type TextareaVanillaProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> &\n  TextareaVanillaOwnProps;\n\nexport const TextareaVanilla = React.forwardRef<HTMLTextAreaElement, TextareaVanillaProps>(\n  (\n    {\n      state,\n      disabled,\n      onFocus,\n      onBlur,\n      label,\n      id,\n      rootCss,\n      css,\n      endAdornment,\n      variant,\n      cursor,\n      resize,\n      className,\n      style,\n      ...props\n    },\n    forwardedRef,\n  ) => {\n    const [hasFocus, setHasFocus] = React.useState(false);\n    const { colors } = useVanillaExtractTheme();\n\n    const invalid = React.useMemo(() => state === 'invalid', [state]);\n    const hasEndAdornment = React.useMemo(() => Boolean(endAdornment), [endAdornment]);\n\n    const labelVariant = React.useMemo(() => {\n      if (disabled) {\n        return 'subtle';\n      }\n      if (invalid) {\n        return 'invalid';\n      }\n      if (hasFocus) {\n        return 'contrast';\n      }\n      return 'default';\n    }, [invalid, disabled, hasFocus]);\n\n    const handleFocus = React.useCallback(\n      (e: React.FocusEvent<HTMLTextAreaElement>) => {\n        if (onFocus) {\n          onFocus(e);\n        }\n        setHasFocus(true);\n      },\n      [onFocus, setHasFocus],\n    );\n\n    const handleBlur = React.useCallback(\n      (e: React.FocusEvent<HTMLTextAreaElement>) => {\n        if (onBlur) {\n          onBlur(e);\n        }\n        setHasFocus(false);\n      },\n      [onBlur, setHasFocus],\n    );\n\n    const { style: rootCssStyles, vars: rootVars } = processCSSProp(rootCss, colors);\n    const rootMergedStyles = { ...rootCssStyles, ...assignInlineVars(rootVars) };\n\n    const { style: cssStyles, vars } = processCSSProp(css, colors);\n    const mergedStyles = { ...cssStyles, ...style, ...assignInlineVars(vars) };\n\n    const textareaWrapperClass = textareaWrapperRecipe({ state, disabled });\n    const styledTextareaClass = styledTextareaRecipe({\n      variant,\n      state,\n      cursor,\n      resize,\n      endAdornment: hasEndAdornment,\n    });\n\n    return (\n      <div style={rootMergedStyles}>\n        {label && (\n          <LabelVanilla variant={labelVariant} htmlFor={id} css={{ display: 'block' }}>\n            {label}\n          </LabelVanilla>\n        )}\n        <div className={textareaWrapperClass}>\n          <textarea\n            id={id}\n            ref={forwardedRef}\n            className={`${styledTextareaClass} ${className || ''}`.trim()}\n            style={mergedStyles}\n            disabled={disabled}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            {...props}\n          />\n          {hasEndAdornment && <div className={adornmentWrapperEnd}>{endAdornment}</div>}\n        </div>\n      </div>\n    );\n  },\n);\n\nTextareaVanilla.displayName = 'TextareaVanilla';\n"],"mappings":";;;;;;;;;;AA4BA,IAAa,kBAAkB,MAAA,QAAM,YAEjC,EACE,OACA,UACA,SACA,QACA,OACA,IACA,SACA,KACA,cACA,SACA,QACA,QACA,WACA,OACA,GAAG,SAEL,iBACG;CACH,MAAM,CAAC,UAAU,eAAe,MAAA,QAAM,SAAS,KAAK;CACpD,MAAM,EAAE,WAAW,qBAAA,uBAAuB;CAE1C,MAAM,UAAU,MAAA,QAAM,cAAc,UAAU,WAAW,CAAC,KAAK,CAAC;CAChE,MAAM,kBAAkB,MAAA,QAAM,cAAc,QAAQ,YAAY,GAAG,CAAC,YAAY,CAAC;CAEjF,MAAM,eAAe,MAAA,QAAM,cAAc;EACvC,IAAI,UACF,OAAO;EAET,IAAI,SACF,OAAO;EAET,IAAI,UACF,OAAO;EAET,OAAO;CACT,GAAG;EAAC;EAAS;EAAU;CAAQ,CAAC;CAEhC,MAAM,cAAc,MAAA,QAAM,aACvB,MAA6C;EAC5C,IAAI,SACF,QAAQ,CAAC;EAEX,YAAY,IAAI;CAClB,GACA,CAAC,SAAS,WAAW,CACvB;CAEA,MAAM,aAAa,MAAA,QAAM,aACtB,MAA6C;EAC5C,IAAI,QACF,OAAO,CAAC;EAEV,YAAY,KAAK;CACnB,GACA,CAAC,QAAQ,WAAW,CACtB;CAEA,MAAM,EAAE,OAAO,eAAe,MAAM,aAAa,iBAAA,eAAe,SAAS,MAAM;CAC/E,MAAM,mBAAmB;EAAE,GAAG;EAAe,IAAA,GAAA,yBAAA,iBAAA,CAAoB,QAAQ;CAAE;CAE3E,MAAM,EAAE,OAAO,WAAW,SAAS,iBAAA,eAAe,KAAK,MAAM;CAC7D,MAAM,eAAe;EAAE,GAAG;EAAW,GAAG;EAAO,IAAA,GAAA,yBAAA,iBAAA,CAAoB,IAAI;CAAE;CAEzE,MAAM,uBAAuB,6BAAA,sBAAsB;EAAE;EAAO;CAAS,CAAC;CACtE,MAAM,sBAAsB,6BAAA,qBAAqB;EAC/C;EACA;EACA;EACA;EACA,cAAc;CAChB,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,OAAO;YAAZ,CACG,SACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,sBAAA,cAAD;GAAc,SAAS;GAAc,SAAS;GAAI,KAAK,EAAE,SAAS,QAAQ;aACvE;EACW,CAAA,GAEhB,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;GAAK,WAAW;aAAhB,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,YAAD;IACM;IACJ,KAAK;IACL,WAAW,GAAG,oBAAoB,GAAG,aAAa,KAAK,KAAK;IAC5D,OAAO;IACG;IACV,SAAS;IACT,QAAQ;IACR,GAAI;GACL,CAAA,GACA,mBAAmB,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,WAAA;cAAiC;GAAkB,CAAA,CACzE;IACF;;AAET,CACF;AAEA,gBAAgB,cAAc"}
+{"version":3,"file":"Textarea.vanilla.cjs","names":["React","useVanillaExtractTheme","processCSSProp","assignInlineVars","textareaWrapperRecipe","styledTextareaRecipe","LabelVanilla"],"sources":["../../../components/Textarea/Textarea.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport React from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { LabelVanilla } from '../Label';\nimport {\n  adornmentWrapperEnd,\n  styledTextareaRecipe,\n  textareaWrapperRecipe,\n} from './Textarea.vanilla.css';\n\ntype StyledTextareaRecipeVariants = NonNullable<RecipeVariants<typeof styledTextareaRecipe>>;\n\nexport interface TextareaVanillaOwnProps extends CSSProps {\n  variant?: StyledTextareaRecipeVariants['variant'];\n  state?: StyledTextareaRecipeVariants['state'];\n  cursor?: StyledTextareaRecipeVariants['cursor'];\n  resize?: StyledTextareaRecipeVariants['resize'];\n  label?: string;\n  endAdornment?: React.ReactNode;\n  rootCss?: CSSProps['css'];\n}\n\nexport type TextareaVanillaProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> &\n  TextareaVanillaOwnProps;\n\nexport const TextareaVanilla = React.forwardRef<HTMLTextAreaElement, TextareaVanillaProps>(\n  (\n    {\n      state,\n      disabled,\n      onFocus,\n      onBlur,\n      label,\n      id,\n      rootCss,\n      css,\n      endAdornment,\n      variant,\n      cursor,\n      resize,\n      className,\n      style,\n      ...props\n    },\n    forwardedRef,\n  ) => {\n    const [hasFocus, setHasFocus] = React.useState(false);\n    const { colors } = useVanillaExtractTheme();\n\n    const invalid = React.useMemo(() => state === 'invalid', [state]);\n    const hasEndAdornment = React.useMemo(() => Boolean(endAdornment), [endAdornment]);\n\n    const labelVariant = React.useMemo(() => {\n      if (disabled) {\n        return 'subtle';\n      }\n      if (invalid) {\n        return 'invalid';\n      }\n      if (hasFocus) {\n        return 'contrast';\n      }\n      return 'default';\n    }, [invalid, disabled, hasFocus]);\n\n    const handleFocus = React.useCallback(\n      (e: React.FocusEvent<HTMLTextAreaElement>) => {\n        if (onFocus) {\n          onFocus(e);\n        }\n        setHasFocus(true);\n      },\n      [onFocus, setHasFocus],\n    );\n\n    const handleBlur = React.useCallback(\n      (e: React.FocusEvent<HTMLTextAreaElement>) => {\n        if (onBlur) {\n          onBlur(e);\n        }\n        setHasFocus(false);\n      },\n      [onBlur, setHasFocus],\n    );\n\n    const { style: rootCssStyles, vars: rootVars } = processCSSProp(rootCss, colors);\n    const rootMergedStyles = { ...rootCssStyles, ...assignInlineVars(rootVars) };\n\n    const { style: cssStyles, vars } = processCSSProp(css, colors);\n    const mergedStyles = { ...cssStyles, ...style, ...assignInlineVars(vars) };\n\n    const textareaWrapperClass = textareaWrapperRecipe({ state, disabled });\n    const styledTextareaClass = styledTextareaRecipe({\n      variant,\n      state,\n      cursor,\n      resize,\n      endAdornment: hasEndAdornment,\n    });\n\n    return (\n      <div style={rootMergedStyles}>\n        {label && (\n          <LabelVanilla variant={labelVariant} htmlFor={id} css={{ display: 'block' }}>\n            {label}\n          </LabelVanilla>\n        )}\n        <div className={textareaWrapperClass}>\n          <textarea\n            id={id}\n            ref={forwardedRef}\n            className={`${styledTextareaClass} ${className || ''}`.trim()}\n            style={mergedStyles}\n            disabled={disabled}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            {...props}\n          />\n          {hasEndAdornment && <div className={adornmentWrapperEnd}>{endAdornment}</div>}\n        </div>\n      </div>\n    );\n  },\n);\n\nTextareaVanilla.displayName = 'TextareaVanilla';\n"],"mappings":";;;;;;;;;;AA4BA,IAAa,kBAAkBA,MAAAA,QAAM,YAEjC,EACE,OACA,UACA,SACA,QACA,OACA,IACA,SACA,KACA,cACA,SACA,QACA,QACA,WACA,OACA,GAAG,SAEL,iBACG;CACH,MAAM,CAAC,UAAU,eAAeA,MAAAA,QAAM,SAAS,KAAK;CACpD,MAAM,EAAE,WAAWC,qBAAAA,uBAAuB;CAE1C,MAAM,UAAUD,MAAAA,QAAM,cAAc,UAAU,WAAW,CAAC,KAAK,CAAC;CAChE,MAAM,kBAAkBA,MAAAA,QAAM,cAAc,QAAQ,YAAY,GAAG,CAAC,YAAY,CAAC;CAEjF,MAAM,eAAeA,MAAAA,QAAM,cAAc;EACvC,IAAI,UACF,OAAO;EAET,IAAI,SACF,OAAO;EAET,IAAI,UACF,OAAO;EAET,OAAO;CACT,GAAG;EAAC;EAAS;EAAU;CAAQ,CAAC;CAEhC,MAAM,cAAcA,MAAAA,QAAM,aACvB,MAA6C;EAC5C,IAAI,SACF,QAAQ,CAAC;EAEX,YAAY,IAAI;CAClB,GACA,CAAC,SAAS,WAAW,CACvB;CAEA,MAAM,aAAaA,MAAAA,QAAM,aACtB,MAA6C;EAC5C,IAAI,QACF,OAAO,CAAC;EAEV,YAAY,KAAK;CACnB,GACA,CAAC,QAAQ,WAAW,CACtB;CAEA,MAAM,EAAE,OAAO,eAAe,MAAM,aAAaE,iBAAAA,eAAe,SAAS,MAAM;CAC/E,MAAM,mBAAmB;EAAE,GAAG;EAAe,IAAA,GAAGC,yBAAAA,iBAAAA,CAAiB,QAAQ;CAAE;CAE3E,MAAM,EAAE,OAAO,WAAW,SAASD,iBAAAA,eAAe,KAAK,MAAM;CAC7D,MAAM,eAAe;EAAE,GAAG;EAAW,GAAG;EAAO,IAAA,GAAGC,yBAAAA,iBAAAA,CAAiB,IAAI;CAAE;CAEzE,MAAM,uBAAuBC,6BAAAA,sBAAsB;EAAE;EAAO;CAAS,CAAC;CACtE,MAAM,sBAAsBC,6BAAAA,qBAAqB;EAC/C;EACA;EACA;EACA;EACA,cAAc;CAChB,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,OAAO;EAAZ,UAAA,CACG,SACC,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,cAAD;GAAc,SAAS;GAAc,SAAS;GAAI,KAAK,EAAE,SAAS,QAAQ;GACvE,UAAA;EACW,CAAA,GAEhB,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;GAAK,WAAW;GAAhB,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,YAAD;IACM;IACJ,KAAK;IACL,WAAW,GAAG,oBAAoB,GAAG,aAAa,KAAK,KAAK;IAC5D,OAAO;IACG;IACV,SAAS;IACT,QAAQ;IACR,GAAI;GACL,CAAA,GACA,mBAAmB,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,WAAA;IAAiC,UAAA;GAAkB,CAAA,CACzE;EACF,CAAA,CAAA;;AAET,CACF;AAEA,gBAAgB,cAAc"}

package/dist/components/Textarea/Textarea.vanilla.css.cjs

@@ -1,6 +1,6 @@
 ;/* empty css                                      */
 let _vanilla_extract_recipes_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-//#region components/Textarea/Textarea.vanilla.css.ts
+// components/Textarea/Textarea.vanilla.css.ts
 var styledTextareaRecipe = (0, _vanilla_extract_recipes_createRuntimeFn.createRuntimeFn)({
 	defaultClassName: "q2igaw1 q2igaw0",
 	variantClassNames: {
@@ -37,7 +37,6 @@ var textareaWrapperRecipe = (0, _vanilla_extract_recipes_createRuntimeFn.createR
 	compoundVariants: []
 });
 var adornmentWrapperEnd = "q2igawg";
-//#endregion
 exports.adornmentWrapperEnd = adornmentWrapperEnd;
 exports.styledTextareaRecipe = styledTextareaRecipe;
 exports.textareaWrapperRecipe = textareaWrapperRecipe;

package/dist/components/Textarea/Textarea.vanilla.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.vanilla.css.cjs","names":[],"sources":["../../../components/Textarea/Textarea.vanilla.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { breakpoints } from '../../styles/breakpoints.css';\nimport { tokens } from '../../styles/tokens.css';\n\n// CONSTANTS\nconst FOCUS_SHADOW =\n  '0 1px 5px 0 hsla(0, 0%, 0%, 0.2), 0 3px 1px -2px hsla(0, 0%, 0%, 0.12), 0 2px 2px 0 hsla(0, 0%, 0%, 0.14)';\n\nconst styledTextareaBase = style({\n  // Reset\n  appearance: 'none',\n  overflow: 'auto',\n  borderWidth: '0',\n  boxSizing: 'border-box',\n  fontFamily: tokens.fonts.rubik,\n  margin: '0',\n  outline: 'none',\n  WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n\n  // Custom\n  padding: tokens.space['3'],\n  position: 'relative',\n  flexGrow: 1,\n  backgroundColor: 'transparent',\n  borderRadius: 'inherit',\n  boxShadow: `inset 0 0 0 1px ${tokens.colors.textareaBorder}`,\n  color: tokens.colors.textareaText,\n  fontVariantNumeric: 'tabular-nums',\n  transition: 'box-shadow .1s ease-in-out',\n\n  selectors: {\n    '&:-webkit-autofill, &:autofill': {\n      boxShadow: `inset 0 0 0 1px ${tokens.colors.textareaBorder}, inset 0 0 0 100px ${tokens.colors.textareaBg}`,\n    },\n    '&:-webkit-autofill::first-line, &:autofill::first-line': {\n      fontFamily: tokens.fonts.rubik,\n      color: tokens.colors.hiContrast,\n    },\n    '&:focus-visible': {\n      boxShadow: `inset 0 0 0 2px ${tokens.colors.textareaFocusBorder}, ${FOCUS_SHADOW}`,\n    },\n    '&::placeholder': {\n      color: tokens.colors.textareaPlaceholder,\n    },\n    '&:read-only:not(:disabled)': {\n      boxShadow: 'none',\n    },\n    '&:disabled': {\n      pointerEvents: 'none',\n      opacity: '0.7',\n      color: tokens.colors.textareaDisabledText,\n    },\n  },\n});\n\nexport const styledTextareaRecipe = recipe({\n  base: styledTextareaBase,\n  variants: {\n    variant: {\n      ghost: {\n        boxShadow: 'none',\n        backgroundColor: 'transparent',\n        selectors: {\n          '&:disabled': {\n            boxShadow: 'none',\n          },\n          '&:focus-visible': {\n            backgroundColor: tokens.colors.loContrast,\n          },\n        },\n      },\n    },\n    state: {\n      invalid: {\n        boxShadow: `inset 0 0 0 1px ${tokens.colors.textareaInvalidBorder}`,\n        selectors: {\n          '&:focus-visible': {\n            boxShadow: `inset 0 0 0 2px ${tokens.colors.textareaInvalidBorder}, ${FOCUS_SHADOW}`,\n          },\n        },\n        '@media': {\n          [breakpoints.hover]: {\n            selectors: {\n              '&:hover::after': {\n                backgroundColor: tokens.colors.textareaInvalidBorder,\n              },\n            },\n          },\n        },\n      },\n    },\n    cursor: {\n      default: {\n        cursor: 'default',\n        '@media': {\n          [breakpoints.hover]: {\n            selectors: {\n              '&:hover:not(:read-only)': {\n                cursor: 'text',\n              },\n            },\n          },\n        },\n        selectors: {\n          '&:focus-visible:not(:read-only)': {\n            cursor: 'text',\n          },\n        },\n      },\n      text: {\n        cursor: 'text',\n      },\n    },\n    resize: {\n      none: {\n        resize: 'none',\n      },\n      both: {\n        resize: 'both',\n      },\n      vertical: {\n        resize: 'vertical',\n      },\n      horizontal: {\n        resize: 'horizontal',\n      },\n    },\n    endAdornment: {\n      true: {\n        paddingBottom: tokens.space['5'],\n        paddingRight: tokens.space['5'],\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      variants: {\n        variant: 'ghost',\n        state: 'invalid',\n      },\n      style: {\n        boxShadow: `inset 0 0 0 1px ${tokens.colors.textareaInvalidBorder}`,\n      },\n    },\n  ],\n  defaultVariants: {\n    cursor: 'default',\n    resize: 'both',\n  },\n});\n\nconst textareaWrapperBase = style({\n  // Reset\n  outline: 'none',\n  lineHeight: 0,\n\n  position: 'relative',\n  display: 'inline-flex',\n  backgroundColor: tokens.colors.textareaBg,\n  color: tokens.colors.textareaPlaceholder,\n  borderRadius: tokens.radii['3'],\n\n  selectors: {\n    '&::before': {\n      boxSizing: 'border-box',\n      borderRadius: 'inherit',\n      content: '\"\"',\n      position: 'absolute',\n      inset: '0',\n      pointerEvents: 'none',\n    },\n    '&::after': {\n      boxSizing: 'border-box',\n      borderRadius: 'inherit',\n      content: '\"\"',\n      position: 'absolute',\n      inset: '0',\n      pointerEvents: 'none',\n    },\n    '&:focus-visible::before': {\n      backgroundColor: tokens.colors.textareaFocusBg,\n    },\n    '&:focus-visible::after': {\n      backgroundColor: tokens.colors.primary,\n      opacity: '0.15',\n    },\n  },\n  '@media': {\n    [breakpoints.hover]: {\n      selectors: {\n        '&:hover::before': {\n          backgroundColor: tokens.colors.textareaHoverBg,\n        },\n        '&:hover::after': {\n          backgroundColor: tokens.colors.primary,\n          opacity: '0.05',\n        },\n      },\n    },\n  },\n});\n\nexport const textareaWrapperRecipe = recipe({\n  base: textareaWrapperBase,\n  variants: {\n    disabled: {\n      true: {\n        opacity: '0.7',\n        color: tokens.colors.textareaDisabledText,\n        '@media': {\n          [breakpoints.hover]: {\n            selectors: {\n              '&:hover::before': {\n                backgroundColor: 'inherit',\n              },\n              '&:hover::after': {\n                backgroundColor: 'inherit',\n              },\n            },\n          },\n        },\n      },\n    },\n    state: {\n      invalid: {\n        '@media': {\n          [breakpoints.hover]: {\n            selectors: {\n              '&:hover::after': {\n                backgroundColor: tokens.colors.textareaInvalidBorder,\n              },\n            },\n          },\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    disabled: false,\n  },\n});\n\nexport const adornmentWrapperEnd = style({\n  position: 'absolute',\n  bottom: tokens.space['2'],\n  right: tokens.space['3'],\n  minWidth: tokens.sizes['5'],\n  minHeight: tokens.sizes['5'],\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n});\n"],"mappings":""}
+{"version":3,"file":"Textarea.vanilla.css.cjs","names":["_7a468"],"sources":["../../../components/Textarea/Textarea.vanilla.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { breakpoints } from '../../styles/breakpoints.css';\nimport { tokens } from '../../styles/tokens.css';\n\n// CONSTANTS\nconst FOCUS_SHADOW =\n  '0 1px 5px 0 hsla(0, 0%, 0%, 0.2), 0 3px 1px -2px hsla(0, 0%, 0%, 0.12), 0 2px 2px 0 hsla(0, 0%, 0%, 0.14)';\n\nconst styledTextareaBase = style({\n  // Reset\n  appearance: 'none',\n  overflow: 'auto',\n  borderWidth: '0',\n  boxSizing: 'border-box',\n  fontFamily: tokens.fonts.rubik,\n  margin: '0',\n  outline: 'none',\n  WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n\n  // Custom\n  padding: tokens.space['3'],\n  position: 'relative',\n  flexGrow: 1,\n  backgroundColor: 'transparent',\n  borderRadius: 'inherit',\n  boxShadow: `inset 0 0 0 1px ${tokens.colors.textareaBorder}`,\n  color: tokens.colors.textareaText,\n  fontVariantNumeric: 'tabular-nums',\n  transition: 'box-shadow .1s ease-in-out',\n\n  selectors: {\n    '&:-webkit-autofill, &:autofill': {\n      boxShadow: `inset 0 0 0 1px ${tokens.colors.textareaBorder}, inset 0 0 0 100px ${tokens.colors.textareaBg}`,\n    },\n    '&:-webkit-autofill::first-line, &:autofill::first-line': {\n      fontFamily: tokens.fonts.rubik,\n      color: tokens.colors.hiContrast,\n    },\n    '&:focus-visible': {\n      boxShadow: `inset 0 0 0 2px ${tokens.colors.textareaFocusBorder}, ${FOCUS_SHADOW}`,\n    },\n    '&::placeholder': {\n      color: tokens.colors.textareaPlaceholder,\n    },\n    '&:read-only:not(:disabled)': {\n      boxShadow: 'none',\n    },\n    '&:disabled': {\n      pointerEvents: 'none',\n      opacity: '0.7',\n      color: tokens.colors.textareaDisabledText,\n    },\n  },\n});\n\nexport const styledTextareaRecipe = recipe({\n  base: styledTextareaBase,\n  variants: {\n    variant: {\n      ghost: {\n        boxShadow: 'none',\n        backgroundColor: 'transparent',\n        selectors: {\n          '&:disabled': {\n            boxShadow: 'none',\n          },\n          '&:focus-visible': {\n            backgroundColor: tokens.colors.loContrast,\n          },\n        },\n      },\n    },\n    state: {\n      invalid: {\n        boxShadow: `inset 0 0 0 1px ${tokens.colors.textareaInvalidBorder}`,\n        selectors: {\n          '&:focus-visible': {\n            boxShadow: `inset 0 0 0 2px ${tokens.colors.textareaInvalidBorder}, ${FOCUS_SHADOW}`,\n          },\n        },\n        '@media': {\n          [breakpoints.hover]: {\n            selectors: {\n              '&:hover::after': {\n                backgroundColor: tokens.colors.textareaInvalidBorder,\n              },\n            },\n          },\n        },\n      },\n    },\n    cursor: {\n      default: {\n        cursor: 'default',\n        '@media': {\n          [breakpoints.hover]: {\n            selectors: {\n              '&:hover:not(:read-only)': {\n                cursor: 'text',\n              },\n            },\n          },\n        },\n        selectors: {\n          '&:focus-visible:not(:read-only)': {\n            cursor: 'text',\n          },\n        },\n      },\n      text: {\n        cursor: 'text',\n      },\n    },\n    resize: {\n      none: {\n        resize: 'none',\n      },\n      both: {\n        resize: 'both',\n      },\n      vertical: {\n        resize: 'vertical',\n      },\n      horizontal: {\n        resize: 'horizontal',\n      },\n    },\n    endAdornment: {\n      true: {\n        paddingBottom: tokens.space['5'],\n        paddingRight: tokens.space['5'],\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      variants: {\n        variant: 'ghost',\n        state: 'invalid',\n      },\n      style: {\n        boxShadow: `inset 0 0 0 1px ${tokens.colors.textareaInvalidBorder}`,\n      },\n    },\n  ],\n  defaultVariants: {\n    cursor: 'default',\n    resize: 'both',\n  },\n});\n\nconst textareaWrapperBase = style({\n  // Reset\n  outline: 'none',\n  lineHeight: 0,\n\n  position: 'relative',\n  display: 'inline-flex',\n  backgroundColor: tokens.colors.textareaBg,\n  color: tokens.colors.textareaPlaceholder,\n  borderRadius: tokens.radii['3'],\n\n  selectors: {\n    '&::before': {\n      boxSizing: 'border-box',\n      borderRadius: 'inherit',\n      content: '\"\"',\n      position: 'absolute',\n      inset: '0',\n      pointerEvents: 'none',\n    },\n    '&::after': {\n      boxSizing: 'border-box',\n      borderRadius: 'inherit',\n      content: '\"\"',\n      position: 'absolute',\n      inset: '0',\n      pointerEvents: 'none',\n    },\n    '&:focus-visible::before': {\n      backgroundColor: tokens.colors.textareaFocusBg,\n    },\n    '&:focus-visible::after': {\n      backgroundColor: tokens.colors.primary,\n      opacity: '0.15',\n    },\n  },\n  '@media': {\n    [breakpoints.hover]: {\n      selectors: {\n        '&:hover::before': {\n          backgroundColor: tokens.colors.textareaHoverBg,\n        },\n        '&:hover::after': {\n          backgroundColor: tokens.colors.primary,\n          opacity: '0.05',\n        },\n      },\n    },\n  },\n});\n\nexport const textareaWrapperRecipe = recipe({\n  base: textareaWrapperBase,\n  variants: {\n    disabled: {\n      true: {\n        opacity: '0.7',\n        color: tokens.colors.textareaDisabledText,\n        '@media': {\n          [breakpoints.hover]: {\n            selectors: {\n              '&:hover::before': {\n                backgroundColor: 'inherit',\n              },\n              '&:hover::after': {\n                backgroundColor: 'inherit',\n              },\n            },\n          },\n        },\n      },\n    },\n    state: {\n      invalid: {\n        '@media': {\n          [breakpoints.hover]: {\n            selectors: {\n              '&:hover::after': {\n                backgroundColor: tokens.colors.textareaInvalidBorder,\n              },\n            },\n          },\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    disabled: false,\n  },\n});\n\nexport const adornmentWrapperEnd = style({\n  position: 'absolute',\n  bottom: tokens.space['2'],\n  right: tokens.space['3'],\n  minWidth: tokens.sizes['5'],\n  minHeight: tokens.sizes['5'],\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n});\n"],"mappings":""}

package/dist/components/Textarea/Textarea.vanilla.css.js

@@ -1,6 +1,6 @@
 /* empty css                                    */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
-//#region components/Textarea/Textarea.vanilla.css.ts
+// components/Textarea/Textarea.vanilla.css.ts
 var styledTextareaRecipe = createRuntimeFn({
 	defaultClassName: "q2igaw1 q2igaw0",
 	variantClassNames: {
@@ -37,7 +37,6 @@ var textareaWrapperRecipe = createRuntimeFn({
 	compoundVariants: []
 });
 var adornmentWrapperEnd = "q2igawg";
-//#endregion
 export { adornmentWrapperEnd, styledTextareaRecipe, textareaWrapperRecipe };
 
 //# sourceMappingURL=Textarea.vanilla.css.js.map

package/dist/components/Textarea/Textarea.vanilla.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.vanilla.css.js","names":[],"sources":["../../../components/Textarea/Textarea.vanilla.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { breakpoints } from '../../styles/breakpoints.css';\nimport { tokens } from '../../styles/tokens.css';\n\n// CONSTANTS\nconst FOCUS_SHADOW =\n  '0 1px 5px 0 hsla(0, 0%, 0%, 0.2), 0 3px 1px -2px hsla(0, 0%, 0%, 0.12), 0 2px 2px 0 hsla(0, 0%, 0%, 0.14)';\n\nconst styledTextareaBase = style({\n  // Reset\n  appearance: 'none',\n  overflow: 'auto',\n  borderWidth: '0',\n  boxSizing: 'border-box',\n  fontFamily: tokens.fonts.rubik,\n  margin: '0',\n  outline: 'none',\n  WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n\n  // Custom\n  padding: tokens.space['3'],\n  position: 'relative',\n  flexGrow: 1,\n  backgroundColor: 'transparent',\n  borderRadius: 'inherit',\n  boxShadow: `inset 0 0 0 1px ${tokens.colors.textareaBorder}`,\n  color: tokens.colors.textareaText,\n  fontVariantNumeric: 'tabular-nums',\n  transition: 'box-shadow .1s ease-in-out',\n\n  selectors: {\n    '&:-webkit-autofill, &:autofill': {\n      boxShadow: `inset 0 0 0 1px ${tokens.colors.textareaBorder}, inset 0 0 0 100px ${tokens.colors.textareaBg}`,\n    },\n    '&:-webkit-autofill::first-line, &:autofill::first-line': {\n      fontFamily: tokens.fonts.rubik,\n      color: tokens.colors.hiContrast,\n    },\n    '&:focus-visible': {\n      boxShadow: `inset 0 0 0 2px ${tokens.colors.textareaFocusBorder}, ${FOCUS_SHADOW}`,\n    },\n    '&::placeholder': {\n      color: tokens.colors.textareaPlaceholder,\n    },\n    '&:read-only:not(:disabled)': {\n      boxShadow: 'none',\n    },\n    '&:disabled': {\n      pointerEvents: 'none',\n      opacity: '0.7',\n      color: tokens.colors.textareaDisabledText,\n    },\n  },\n});\n\nexport const styledTextareaRecipe = recipe({\n  base: styledTextareaBase,\n  variants: {\n    variant: {\n      ghost: {\n        boxShadow: 'none',\n        backgroundColor: 'transparent',\n        selectors: {\n          '&:disabled': {\n            boxShadow: 'none',\n          },\n          '&:focus-visible': {\n            backgroundColor: tokens.colors.loContrast,\n          },\n        },\n      },\n    },\n    state: {\n      invalid: {\n        boxShadow: `inset 0 0 0 1px ${tokens.colors.textareaInvalidBorder}`,\n        selectors: {\n          '&:focus-visible': {\n            boxShadow: `inset 0 0 0 2px ${tokens.colors.textareaInvalidBorder}, ${FOCUS_SHADOW}`,\n          },\n        },\n        '@media': {\n          [breakpoints.hover]: {\n            selectors: {\n              '&:hover::after': {\n                backgroundColor: tokens.colors.textareaInvalidBorder,\n              },\n            },\n          },\n        },\n      },\n    },\n    cursor: {\n      default: {\n        cursor: 'default',\n        '@media': {\n          [breakpoints.hover]: {\n            selectors: {\n              '&:hover:not(:read-only)': {\n                cursor: 'text',\n              },\n            },\n          },\n        },\n        selectors: {\n          '&:focus-visible:not(:read-only)': {\n            cursor: 'text',\n          },\n        },\n      },\n      text: {\n        cursor: 'text',\n      },\n    },\n    resize: {\n      none: {\n        resize: 'none',\n      },\n      both: {\n        resize: 'both',\n      },\n      vertical: {\n        resize: 'vertical',\n      },\n      horizontal: {\n        resize: 'horizontal',\n      },\n    },\n    endAdornment: {\n      true: {\n        paddingBottom: tokens.space['5'],\n        paddingRight: tokens.space['5'],\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      variants: {\n        variant: 'ghost',\n        state: 'invalid',\n      },\n      style: {\n        boxShadow: `inset 0 0 0 1px ${tokens.colors.textareaInvalidBorder}`,\n      },\n    },\n  ],\n  defaultVariants: {\n    cursor: 'default',\n    resize: 'both',\n  },\n});\n\nconst textareaWrapperBase = style({\n  // Reset\n  outline: 'none',\n  lineHeight: 0,\n\n  position: 'relative',\n  display: 'inline-flex',\n  backgroundColor: tokens.colors.textareaBg,\n  color: tokens.colors.textareaPlaceholder,\n  borderRadius: tokens.radii['3'],\n\n  selectors: {\n    '&::before': {\n      boxSizing: 'border-box',\n      borderRadius: 'inherit',\n      content: '\"\"',\n      position: 'absolute',\n      inset: '0',\n      pointerEvents: 'none',\n    },\n    '&::after': {\n      boxSizing: 'border-box',\n      borderRadius: 'inherit',\n      content: '\"\"',\n      position: 'absolute',\n      inset: '0',\n      pointerEvents: 'none',\n    },\n    '&:focus-visible::before': {\n      backgroundColor: tokens.colors.textareaFocusBg,\n    },\n    '&:focus-visible::after': {\n      backgroundColor: tokens.colors.primary,\n      opacity: '0.15',\n    },\n  },\n  '@media': {\n    [breakpoints.hover]: {\n      selectors: {\n        '&:hover::before': {\n          backgroundColor: tokens.colors.textareaHoverBg,\n        },\n        '&:hover::after': {\n          backgroundColor: tokens.colors.primary,\n          opacity: '0.05',\n        },\n      },\n    },\n  },\n});\n\nexport const textareaWrapperRecipe = recipe({\n  base: textareaWrapperBase,\n  variants: {\n    disabled: {\n      true: {\n        opacity: '0.7',\n        color: tokens.colors.textareaDisabledText,\n        '@media': {\n          [breakpoints.hover]: {\n            selectors: {\n              '&:hover::before': {\n                backgroundColor: 'inherit',\n              },\n              '&:hover::after': {\n                backgroundColor: 'inherit',\n              },\n            },\n          },\n        },\n      },\n    },\n    state: {\n      invalid: {\n        '@media': {\n          [breakpoints.hover]: {\n            selectors: {\n              '&:hover::after': {\n                backgroundColor: tokens.colors.textareaInvalidBorder,\n              },\n            },\n          },\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    disabled: false,\n  },\n});\n\nexport const adornmentWrapperEnd = style({\n  position: 'absolute',\n  bottom: tokens.space['2'],\n  right: tokens.space['3'],\n  minWidth: tokens.sizes['5'],\n  minHeight: tokens.sizes['5'],\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n});\n"],"mappings":""}
+{"version":3,"file":"Textarea.vanilla.css.js","names":["_7a468"],"sources":["../../../components/Textarea/Textarea.vanilla.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { breakpoints } from '../../styles/breakpoints.css';\nimport { tokens } from '../../styles/tokens.css';\n\n// CONSTANTS\nconst FOCUS_SHADOW =\n  '0 1px 5px 0 hsla(0, 0%, 0%, 0.2), 0 3px 1px -2px hsla(0, 0%, 0%, 0.12), 0 2px 2px 0 hsla(0, 0%, 0%, 0.14)';\n\nconst styledTextareaBase = style({\n  // Reset\n  appearance: 'none',\n  overflow: 'auto',\n  borderWidth: '0',\n  boxSizing: 'border-box',\n  fontFamily: tokens.fonts.rubik,\n  margin: '0',\n  outline: 'none',\n  WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n\n  // Custom\n  padding: tokens.space['3'],\n  position: 'relative',\n  flexGrow: 1,\n  backgroundColor: 'transparent',\n  borderRadius: 'inherit',\n  boxShadow: `inset 0 0 0 1px ${tokens.colors.textareaBorder}`,\n  color: tokens.colors.textareaText,\n  fontVariantNumeric: 'tabular-nums',\n  transition: 'box-shadow .1s ease-in-out',\n\n  selectors: {\n    '&:-webkit-autofill, &:autofill': {\n      boxShadow: `inset 0 0 0 1px ${tokens.colors.textareaBorder}, inset 0 0 0 100px ${tokens.colors.textareaBg}`,\n    },\n    '&:-webkit-autofill::first-line, &:autofill::first-line': {\n      fontFamily: tokens.fonts.rubik,\n      color: tokens.colors.hiContrast,\n    },\n    '&:focus-visible': {\n      boxShadow: `inset 0 0 0 2px ${tokens.colors.textareaFocusBorder}, ${FOCUS_SHADOW}`,\n    },\n    '&::placeholder': {\n      color: tokens.colors.textareaPlaceholder,\n    },\n    '&:read-only:not(:disabled)': {\n      boxShadow: 'none',\n    },\n    '&:disabled': {\n      pointerEvents: 'none',\n      opacity: '0.7',\n      color: tokens.colors.textareaDisabledText,\n    },\n  },\n});\n\nexport const styledTextareaRecipe = recipe({\n  base: styledTextareaBase,\n  variants: {\n    variant: {\n      ghost: {\n        boxShadow: 'none',\n        backgroundColor: 'transparent',\n        selectors: {\n          '&:disabled': {\n            boxShadow: 'none',\n          },\n          '&:focus-visible': {\n            backgroundColor: tokens.colors.loContrast,\n          },\n        },\n      },\n    },\n    state: {\n      invalid: {\n        boxShadow: `inset 0 0 0 1px ${tokens.colors.textareaInvalidBorder}`,\n        selectors: {\n          '&:focus-visible': {\n            boxShadow: `inset 0 0 0 2px ${tokens.colors.textareaInvalidBorder}, ${FOCUS_SHADOW}`,\n          },\n        },\n        '@media': {\n          [breakpoints.hover]: {\n            selectors: {\n              '&:hover::after': {\n                backgroundColor: tokens.colors.textareaInvalidBorder,\n              },\n            },\n          },\n        },\n      },\n    },\n    cursor: {\n      default: {\n        cursor: 'default',\n        '@media': {\n          [breakpoints.hover]: {\n            selectors: {\n              '&:hover:not(:read-only)': {\n                cursor: 'text',\n              },\n            },\n          },\n        },\n        selectors: {\n          '&:focus-visible:not(:read-only)': {\n            cursor: 'text',\n          },\n        },\n      },\n      text: {\n        cursor: 'text',\n      },\n    },\n    resize: {\n      none: {\n        resize: 'none',\n      },\n      both: {\n        resize: 'both',\n      },\n      vertical: {\n        resize: 'vertical',\n      },\n      horizontal: {\n        resize: 'horizontal',\n      },\n    },\n    endAdornment: {\n      true: {\n        paddingBottom: tokens.space['5'],\n        paddingRight: tokens.space['5'],\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      variants: {\n        variant: 'ghost',\n        state: 'invalid',\n      },\n      style: {\n        boxShadow: `inset 0 0 0 1px ${tokens.colors.textareaInvalidBorder}`,\n      },\n    },\n  ],\n  defaultVariants: {\n    cursor: 'default',\n    resize: 'both',\n  },\n});\n\nconst textareaWrapperBase = style({\n  // Reset\n  outline: 'none',\n  lineHeight: 0,\n\n  position: 'relative',\n  display: 'inline-flex',\n  backgroundColor: tokens.colors.textareaBg,\n  color: tokens.colors.textareaPlaceholder,\n  borderRadius: tokens.radii['3'],\n\n  selectors: {\n    '&::before': {\n      boxSizing: 'border-box',\n      borderRadius: 'inherit',\n      content: '\"\"',\n      position: 'absolute',\n      inset: '0',\n      pointerEvents: 'none',\n    },\n    '&::after': {\n      boxSizing: 'border-box',\n      borderRadius: 'inherit',\n      content: '\"\"',\n      position: 'absolute',\n      inset: '0',\n      pointerEvents: 'none',\n    },\n    '&:focus-visible::before': {\n      backgroundColor: tokens.colors.textareaFocusBg,\n    },\n    '&:focus-visible::after': {\n      backgroundColor: tokens.colors.primary,\n      opacity: '0.15',\n    },\n  },\n  '@media': {\n    [breakpoints.hover]: {\n      selectors: {\n        '&:hover::before': {\n          backgroundColor: tokens.colors.textareaHoverBg,\n        },\n        '&:hover::after': {\n          backgroundColor: tokens.colors.primary,\n          opacity: '0.05',\n        },\n      },\n    },\n  },\n});\n\nexport const textareaWrapperRecipe = recipe({\n  base: textareaWrapperBase,\n  variants: {\n    disabled: {\n      true: {\n        opacity: '0.7',\n        color: tokens.colors.textareaDisabledText,\n        '@media': {\n          [breakpoints.hover]: {\n            selectors: {\n              '&:hover::before': {\n                backgroundColor: 'inherit',\n              },\n              '&:hover::after': {\n                backgroundColor: 'inherit',\n              },\n            },\n          },\n        },\n      },\n    },\n    state: {\n      invalid: {\n        '@media': {\n          [breakpoints.hover]: {\n            selectors: {\n              '&:hover::after': {\n                backgroundColor: tokens.colors.textareaInvalidBorder,\n              },\n            },\n          },\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    disabled: false,\n  },\n});\n\nexport const adornmentWrapperEnd = style({\n  position: 'absolute',\n  bottom: tokens.space['2'],\n  right: tokens.space['3'],\n  minWidth: tokens.sizes['5'],\n  minHeight: tokens.sizes['5'],\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n});\n"],"mappings":""}

package/dist/components/Textarea/Textarea.vanilla.js

@@ -5,7 +5,7 @@ import { styledTextareaRecipe, textareaWrapperRecipe } from "./Textarea.vanilla.
 import React from "react";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region components/Textarea/Textarea.vanilla.tsx
+// components/Textarea/Textarea.vanilla.tsx
 var TextareaVanilla = React.forwardRef(({ state, disabled, onFocus, onBlur, label, id, rootCss, css, endAdornment, variant, cursor, resize, className, style, ...props }, forwardedRef) => {
 	const [hasFocus, setHasFocus] = React.useState(false);
 	const { colors } = useVanillaExtractTheme();
@@ -77,7 +77,6 @@ var TextareaVanilla = React.forwardRef(({ state, disabled, onFocus, onBlur, labe
 	});
 });
 TextareaVanilla.displayName = "TextareaVanilla";
-//#endregion
 export { TextareaVanilla };
 
 //# sourceMappingURL=Textarea.vanilla.js.map