@traefik-labs/faency 12.0.7

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

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.cjs","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"],"names":["elevationVariants","styled","jsxs","Box","jsx","Label"],"mappings":"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"}

package/dist/components/Textarea/Textarea.js

@@ -0,0 +1,280 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import { styled } from "../../stitches.config.js";
+import { Box } from "../Box/Box.js";
+import { Label } from "../Label/Label.js";
+import { elevationVariants } from "../Elevation/Elevation.js";
+const FOCUS_SHADOW = elevationVariants[1].boxShadow;
+const StyledTextarea = styled("textarea", {
+  // Reset
+  appearance: "none",
+  overflow: "auto",
+  // force overflow auto behaviour cross-browser
+  borderWidth: "0",
+  boxSizing: "border-box",
+  fontFamily: "$rubik",
+  margin: "0",
+  outline: "none",
+  WebkitTapHighlightColor: "rgba(0,0,0,0)",
+  // Custom
+  p: "$3",
+  position: "relative",
+  flexGrow: 1,
+  // make sure to grow fully inside TextareaWrapper
+  backgroundColor: "transparent",
+  borderRadius: "inherit",
+  // inherit border radius from TextareaWrapper
+  boxShadow: "inset 0 0 0 1px $colors$textareaBorder",
+  color: "$textareaText",
+  fontVariantNumeric: "tabular-nums",
+  transition: "box-shadow .1s ease-in-out",
+  "&:-webkit-autofill,&:autofill": {
+    boxShadow: "inset 0 0 0 1px $colors$textareaBorder, inset 0 0 0 100px $colors$textareaBg"
+  },
+  "&:-webkit-autofill::first-line,&:autofill::first-line": {
+    fontFamily: "$rubik",
+    color: "$hiContrast"
+  },
+  "&:focus-visible": {
+    boxShadow: `inset 0 0 0 2px $colors$textareaFocusBorder, ${FOCUS_SHADOW}`
+  },
+  "&::placeholder": {
+    color: "$textareaPlaceholder"
+  },
+  "&:read-only:not(:disabled)": {
+    boxShadow: "none"
+  },
+  "&:disabled": {
+    pointerEvents: "none",
+    opacity: 0.7,
+    color: "$textareaDisabledText"
+  },
+  variants: {
+    variant: {
+      ghost: {
+        boxShadow: "none",
+        "&:disabled": {
+          boxShadow: "none"
+        },
+        backgroundColor: "transparent",
+        "&:focus-visible": {
+          backgroundColor: "$loContrast"
+        }
+      }
+    },
+    state: {
+      invalid: {
+        boxShadow: "inset 0 0 0 1px $colors$textareaInvalidBorder",
+        "&:focus-visible": {
+          boxShadow: `inset 0 0 0 2px $colors$textareaInvalidBorder, ${FOCUS_SHADOW}`
+        },
+        "@hover": {
+          "&:hover": {
+            "&::after": {
+              backgroundColor: "$textareaInvalidBorder"
+            }
+          }
+        }
+      }
+    },
+    cursor: {
+      default: {
+        cursor: "default",
+        "@hover": {
+          "&:hover:not(:read-only)": {
+            cursor: "text"
+          }
+        },
+        "&:focus-visible:not(:read-only)": {
+          cursor: "text"
+        }
+      },
+      text: {
+        cursor: "text"
+      }
+    },
+    resize: {
+      none: {
+        resize: "none"
+      },
+      both: {
+        resize: "both"
+      },
+      vertical: {
+        resize: "vertical"
+      },
+      horizontal: {
+        resize: "horizontal"
+      }
+    },
+    endAdornment: {
+      true: {
+        paddingBottom: "$5",
+        paddingRight: "$5"
+      }
+    }
+  },
+  defaultVariants: {
+    cursor: "default",
+    resize: "both"
+  },
+  compoundVariants: [
+    {
+      variant: "ghost",
+      state: "invalid",
+      css: {
+        boxShadow: "inset 0 0 0 1px $colors$textareaInvalidBorder"
+      }
+    }
+  ]
+});
+const TextareaWrapper = styled("div", {
+  // Reset
+  outline: "none",
+  lineHeight: 0,
+  position: "relative",
+  display: "inline-flex",
+  // helps matching resizable content size
+  backgroundColor: "$textareaBg",
+  color: "$textareaPlaceholder",
+  borderRadius: "$3",
+  "&::before": {
+    boxSizing: "border-box",
+    borderRadius: "inherit",
+    content: '""',
+    position: "absolute",
+    inset: 0,
+    pointerEvents: "none"
+  },
+  "&::after": {
+    boxSizing: "border-box",
+    borderRadius: "inherit",
+    content: '""',
+    position: "absolute",
+    inset: 0,
+    pointerEvents: "none"
+  },
+  "&:focus-visible": {
+    "&::before": {
+      backgroundColor: "$textareaFocusBg"
+    },
+    "&::after": {
+      backgroundColor: "$primary",
+      opacity: 0.15
+    }
+  },
+  "@hover": {
+    "&:hover": {
+      "&::before": {
+        backgroundColor: "$textareaHoverBg"
+      },
+      "&::after": {
+        backgroundColor: "$primary",
+        opacity: 0.05
+      }
+    }
+  },
+  variants: {
+    disabled: {
+      true: {
+        opacity: 0.7,
+        color: "$textareaDisabledText",
+        "@hover": {
+          "&:hover": {
+            "&::before": {
+              backgroundColor: "inherit"
+            },
+            "&::after": {
+              backgroundColor: "inherit"
+            }
+          }
+        }
+      }
+    },
+    state: {
+      invalid: {
+        "@hover": {
+          "&:hover": {
+            "&::after": {
+              backgroundColor: "$textareaInvalidBorder"
+            }
+          }
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    disabled: false
+  }
+});
+const AdornmentWrapperEnd = styled("div", {
+  position: "absolute",
+  bottom: "$2",
+  right: "$3",
+  minWidth: "$5",
+  minHeight: "$5",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+});
+const Textarea = React.forwardRef(
+  ({ state, disabled, onFocus, onBlur, label, id, rootCss, css, endAdornment, ...props }, forwardedRef) => {
+    const [hasFocus, setHasFocus] = React.useState(false);
+    const invalid = React.useMemo(() => state === "invalid", [state]);
+    const hasEndAdornment = React.useMemo(() => Boolean(endAdornment), [endAdornment]);
+    const labelVariant = React.useMemo(() => {
+      if (disabled) {
+        return "subtle";
+      }
+      if (invalid) {
+        return "invalid";
+      }
+      if (hasFocus) {
+        return "contrast";
+      }
+      return "default";
+    }, [invalid, disabled, hasFocus]);
+    const handleFocus = React.useCallback(
+      (e) => {
+        if (onFocus) {
+          onFocus(e);
+        }
+        setHasFocus(true);
+      },
+      [onFocus, setHasFocus]
+    );
+    const handleBlur = React.useCallback(
+      (e) => {
+        if (onBlur) {
+          onBlur(e);
+        }
+        setHasFocus(false);
+      },
+      [onBlur, setHasFocus]
+    );
+    return /* @__PURE__ */ jsxs(Box, { css: rootCss, children: [
+      label && /* @__PURE__ */ jsx(Label, { variant: labelVariant, htmlFor: id, css: { display: "block" }, children: label }),
+      /* @__PURE__ */ jsxs(TextareaWrapper, { state, disabled, children: [
+        /* @__PURE__ */ jsx(
+          StyledTextarea,
+          {
+            id,
+            ref: forwardedRef,
+            css,
+            disabled,
+            state,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            endAdornment: hasEndAdornment,
+            ...props
+          }
+        ),
+        hasEndAdornment && /* @__PURE__ */ jsx(AdornmentWrapperEnd, { children: endAdornment })
+      ] })
+    ] });
+  }
+);
+export {
+  Textarea
+};
+//# sourceMappingURL=Textarea.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.js","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"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const tinycolor = require("tinycolor2");
+const textareaLightTheme = {
+  textareaBg: "hsl(240, 14.0%, 99.0%)",
+  // $deepBlue1
+  textareaBorder: "hsl(208, 9.0%, 73.0%)",
+  // $grayBlue9
+  textareaFocusBg: tinycolor("black").setAlpha(0.15).toHslString(),
+  textareaFocusBorder: "hsl(206, 100%, 50%)",
+  // blue8
+  textareaHoverBg: "hsla(0, 0%, 100%, 0.372)",
+  // $whiteA9
+  textareaText: tinycolor("black").setAlpha(0.74).toHslString(),
+  textareaPlaceholder: "hsla(0, 0%, 0%, 0.498)",
+  // $blackA10
+  textareaDisabledText: tinycolor("black").setAlpha(0.35).toHslString(),
+  textareaInvalidBorder: "hsl(358, 75%, 59%)"
+  // $red9
+};
+const textareaDarkTheme = {
+  textareaBg: "hsl(209, 38.0%, 12.0%)",
+  // $grayBlue7 dark
+  textareaBorder: "hsl(208, 11.0%, 45.0%)",
+  // $grayBlue9 dark
+  textareaFocusBg: tinycolor("black").setAlpha(0.15).toHslString(),
+  textareaFocusBorder: "hsl(206, 100%, 70%)",
+  // blue11
+  textareaHoverBg: "hsla(0, 0%, 100%, 0.104)",
+  // $whiteA4
+  textareaText: tinycolor("white").setAlpha(0.8).toHslString(),
+  textareaPlaceholder: "hsla(0, 0%, 100%, 0.455)",
+  // $whiteA10
+  textareaDisabledText: tinycolor("white").setAlpha(0.35).toHslString(),
+  textareaInvalidBorder: "hsl(358, 75%, 59%)"
+  // $red9
+};
+exports.textareaDarkTheme = textareaDarkTheme;
+exports.textareaLightTheme = textareaLightTheme;
+//# sourceMappingURL=Textarea.theme.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.theme.cjs","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"],"names":[],"mappings":";;;AAIO,MAAM,qBAAqB;AAAA,EAChC,YAAY;AAAA;AAAA,EACZ,gBAAgB;AAAA;AAAA,EAChB,iBAAiB,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,EACnD,qBAAqB;AAAA;AAAA,EACrB,iBAAiB;AAAA;AAAA,EACjB,cAAc,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,EAChD,qBAAqB;AAAA;AAAA,EACrB,sBAAsB,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,EACxD,uBAAuB;AAAA;AACzB;AAEO,MAAM,oBAAoB;AAAA,EAC/B,YAAY;AAAA;AAAA,EACZ,gBAAgB;AAAA;AAAA,EAChB,iBAAiB,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,EACnD,qBAAqB;AAAA;AAAA,EACrB,iBAAiB;AAAA;AAAA,EACjB,cAAc,UAAU,OAAO,EAAE,SAAS,GAAG,EAAE,YAAA;AAAA,EAC/C,qBAAqB;AAAA;AAAA,EACrB,sBAAsB,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,EACxD,uBAAuB;AAAA;AACzB;;;"}

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

@@ -0,0 +1,40 @@
+import tinycolor from "tinycolor2";
+const textareaLightTheme = {
+  textareaBg: "hsl(240, 14.0%, 99.0%)",
+  // $deepBlue1
+  textareaBorder: "hsl(208, 9.0%, 73.0%)",
+  // $grayBlue9
+  textareaFocusBg: tinycolor("black").setAlpha(0.15).toHslString(),
+  textareaFocusBorder: "hsl(206, 100%, 50%)",
+  // blue8
+  textareaHoverBg: "hsla(0, 0%, 100%, 0.372)",
+  // $whiteA9
+  textareaText: tinycolor("black").setAlpha(0.74).toHslString(),
+  textareaPlaceholder: "hsla(0, 0%, 0%, 0.498)",
+  // $blackA10
+  textareaDisabledText: tinycolor("black").setAlpha(0.35).toHslString(),
+  textareaInvalidBorder: "hsl(358, 75%, 59%)"
+  // $red9
+};
+const textareaDarkTheme = {
+  textareaBg: "hsl(209, 38.0%, 12.0%)",
+  // $grayBlue7 dark
+  textareaBorder: "hsl(208, 11.0%, 45.0%)",
+  // $grayBlue9 dark
+  textareaFocusBg: tinycolor("black").setAlpha(0.15).toHslString(),
+  textareaFocusBorder: "hsl(206, 100%, 70%)",
+  // blue11
+  textareaHoverBg: "hsla(0, 0%, 100%, 0.104)",
+  // $whiteA4
+  textareaText: tinycolor("white").setAlpha(0.8).toHslString(),
+  textareaPlaceholder: "hsla(0, 0%, 100%, 0.455)",
+  // $whiteA10
+  textareaDisabledText: tinycolor("white").setAlpha(0.35).toHslString(),
+  textareaInvalidBorder: "hsl(358, 75%, 59%)"
+  // $red9
+};
+export {
+  textareaDarkTheme,
+  textareaLightTheme
+};
+//# sourceMappingURL=Textarea.theme.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.theme.js","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"],"names":[],"mappings":";AAIO,MAAM,qBAAqB;AAAA,EAChC,YAAY;AAAA;AAAA,EACZ,gBAAgB;AAAA;AAAA,EAChB,iBAAiB,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,EACnD,qBAAqB;AAAA;AAAA,EACrB,iBAAiB;AAAA;AAAA,EACjB,cAAc,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,EAChD,qBAAqB;AAAA;AAAA,EACrB,sBAAsB,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,EACxD,uBAAuB;AAAA;AACzB;AAEO,MAAM,oBAAoB;AAAA,EAC/B,YAAY;AAAA;AAAA,EACZ,gBAAgB;AAAA;AAAA,EAChB,iBAAiB,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,EACnD,qBAAqB;AAAA;AAAA,EACrB,iBAAiB;AAAA;AAAA,EACjB,cAAc,UAAU,OAAO,EAAE,SAAS,GAAG,EAAE,YAAA;AAAA,EAC/C,qBAAqB;AAAA;AAAA,EACrB,sBAAsB,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,EACxD,uBAAuB;AAAA;AACzB;"}

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

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const tinycolor = require("tinycolor2");
+exports.Theme = void 0;
+((Theme2) => {
+  Theme2.getLight = (primaryColor) => ({
+    textareaBg: "$deepBlue1",
+    textareaBorder: "$grayBlue9",
+    textareaFocusBg: tinycolor("black").setAlpha(0.15).toHslString(),
+    textareaFocusBorder: primaryColor.helpers.pickScale(8),
+    textareaHoverBg: "$whiteA9",
+    textareaText: tinycolor("black").setAlpha(0.74).toHslString(),
+    textareaPlaceholder: "$blackA10",
+    textareaDisabledText: tinycolor("black").setAlpha(0.35).toHslString(),
+    textareaInvalidBorder: "$red9"
+  });
+  Theme2.getDark = (primaryColor) => ({
+    textareaBg: "$grayBlue7",
+    textareaBorder: "$grayBlue9",
+    textareaFocusBg: tinycolor("black").setAlpha(0.15).toHslString(),
+    textareaFocusBorder: primaryColor.helpers.pickScale(11),
+    textareaHoverBg: "$whiteA4",
+    textareaText: tinycolor("white").setAlpha(0.8).toHslString(),
+    textareaPlaceholder: "$whiteA10",
+    textareaDisabledText: tinycolor("white").setAlpha(0.35).toHslString(),
+    textareaInvalidBorder: "$red9"
+  });
+})(exports.Theme || (exports.Theme = {}));
+//# sourceMappingURL=Textarea.themes.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.themes.cjs","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"],"names":["Theme"],"mappings":";;;AAKiBA,QAAAA,QAAAA;AAAAA,CAAV,CAAUA,WAAV;AAeQA,SAAA,WAAoB,CAAC,kBAAkB;AAAA,IAClD,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,iBAAiB,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,IACnD,qBAAqB,aAAa,QAAQ,UAAU,CAAC;AAAA,IACrD,iBAAiB;AAAA,IACjB,cAAc,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,IAChD,qBAAqB;AAAA,IACrB,sBAAsB,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,IACxD,uBAAuB;AAAA,EAAA;AAGZA,SAAA,UAAmB,CAAC,kBAAkB;AAAA,IACjD,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,iBAAiB,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,IACnD,qBAAqB,aAAa,QAAQ,UAAU,EAAE;AAAA,IACtD,iBAAiB;AAAA,IACjB,cAAc,UAAU,OAAO,EAAE,SAAS,GAAG,EAAE,YAAA;AAAA,IAC/C,qBAAqB;AAAA,IACrB,sBAAsB,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,IACxD,uBAAuB;AAAA,EAAA;AACzB,GArCeA,QAAAA,UAAAA,gBAAA,CAAA,EAAA;"}

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

@@ -0,0 +1,30 @@
+import tinycolor from "tinycolor2";
+var Theme;
+((Theme2) => {
+  Theme2.getLight = (primaryColor) => ({
+    textareaBg: "$deepBlue1",
+    textareaBorder: "$grayBlue9",
+    textareaFocusBg: tinycolor("black").setAlpha(0.15).toHslString(),
+    textareaFocusBorder: primaryColor.helpers.pickScale(8),
+    textareaHoverBg: "$whiteA9",
+    textareaText: tinycolor("black").setAlpha(0.74).toHslString(),
+    textareaPlaceholder: "$blackA10",
+    textareaDisabledText: tinycolor("black").setAlpha(0.35).toHslString(),
+    textareaInvalidBorder: "$red9"
+  });
+  Theme2.getDark = (primaryColor) => ({
+    textareaBg: "$grayBlue7",
+    textareaBorder: "$grayBlue9",
+    textareaFocusBg: tinycolor("black").setAlpha(0.15).toHslString(),
+    textareaFocusBorder: primaryColor.helpers.pickScale(11),
+    textareaHoverBg: "$whiteA4",
+    textareaText: tinycolor("white").setAlpha(0.8).toHslString(),
+    textareaPlaceholder: "$whiteA10",
+    textareaDisabledText: tinycolor("white").setAlpha(0.35).toHslString(),
+    textareaInvalidBorder: "$red9"
+  });
+})(Theme || (Theme = {}));
+export {
+  Theme
+};
+//# sourceMappingURL=Textarea.themes.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.themes.js","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"],"names":["Theme"],"mappings":";AAKO,IAAU;AAAA,CAAV,CAAUA,WAAV;AAeQA,SAAA,WAAoB,CAAC,kBAAkB;AAAA,IAClD,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,iBAAiB,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,IACnD,qBAAqB,aAAa,QAAQ,UAAU,CAAC;AAAA,IACrD,iBAAiB;AAAA,IACjB,cAAc,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,IAChD,qBAAqB;AAAA,IACrB,sBAAsB,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,IACxD,uBAAuB;AAAA,EAAA;AAGZA,SAAA,UAAmB,CAAC,kBAAkB;AAAA,IACjD,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,iBAAiB,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,IACnD,qBAAqB,aAAa,QAAQ,UAAU,EAAE;AAAA,IACtD,iBAAiB;AAAA,IACjB,cAAc,UAAU,OAAO,EAAE,SAAS,GAAG,EAAE,YAAA;AAAA,IAC/C,qBAAqB;AAAA,IACrB,sBAAsB,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,IACxD,uBAAuB;AAAA,EAAA;AACzB,GArCe,UAAA,QAAA,CAAA,EAAA;"}

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

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const dynamic = require("@vanilla-extract/dynamic");
+const React = require("react");
+const cssProps = require("../../styles/cssProps.cjs");
+const themeContext = require("../../styles/themeContext.cjs");
+const Textarea_vanilla_css = require("./Textarea.vanilla.css.cjs");
+const Label_vanilla = require("../Label/Label.vanilla.cjs");
+const 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 } = themeContext.useVanillaExtractTheme();
+    const invalid = React.useMemo(() => state === "invalid", [state]);
+    const hasEndAdornment = React.useMemo(() => Boolean(endAdornment), [endAdornment]);
+    const labelVariant = React.useMemo(() => {
+      if (disabled) {
+        return "subtle";
+      }
+      if (invalid) {
+        return "invalid";
+      }
+      if (hasFocus) {
+        return "contrast";
+      }
+      return "default";
+    }, [invalid, disabled, hasFocus]);
+    const handleFocus = React.useCallback(
+      (e) => {
+        if (onFocus) {
+          onFocus(e);
+        }
+        setHasFocus(true);
+      },
+      [onFocus, setHasFocus]
+    );
+    const handleBlur = React.useCallback(
+      (e) => {
+        if (onBlur) {
+          onBlur(e);
+        }
+        setHasFocus(false);
+      },
+      [onBlur, setHasFocus]
+    );
+    const { style: rootCssStyles, vars: rootVars } = cssProps.processCSSProp(rootCss, colors);
+    const rootMergedStyles = { ...rootCssStyles, ...dynamic.assignInlineVars(rootVars) };
+    const { style: cssStyles, vars } = cssProps.processCSSProp(css, colors);
+    const mergedStyles = { ...cssStyles, ...style, ...dynamic.assignInlineVars(vars) };
+    const textareaWrapperClass = Textarea_vanilla_css.textareaWrapperRecipe({ state, disabled });
+    const styledTextareaClass = Textarea_vanilla_css.styledTextareaRecipe({
+      variant,
+      state,
+      cursor,
+      resize,
+      endAdornment: hasEndAdornment
+    });
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: rootMergedStyles, children: [
+      label && /* @__PURE__ */ jsxRuntime.jsx(Label_vanilla.LabelVanilla, { variant: labelVariant, htmlFor: id, css: { display: "block" }, children: label }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: textareaWrapperClass, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "textarea",
+          {
+            id,
+            ref: forwardedRef,
+            className: `${styledTextareaClass} ${className || ""}`.trim(),
+            style: mergedStyles,
+            disabled,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            ...props
+          }
+        ),
+        hasEndAdornment && /* @__PURE__ */ jsxRuntime.jsx("div", { className: Textarea_vanilla_css.adornmentWrapperEnd, children: endAdornment })
+      ] })
+    ] });
+  }
+);
+TextareaVanilla.displayName = "TextareaVanilla";
+exports.TextareaVanilla = TextareaVanilla;
+//# sourceMappingURL=Textarea.vanilla.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.vanilla.cjs","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"],"names":["useVanillaExtractTheme","processCSSProp","assignInlineVars","textareaWrapperRecipe","styledTextareaRecipe","jsxs","jsx","LabelVanilla","adornmentWrapperEnd"],"mappings":";;;;;;;;;AA4BO,MAAM,kBAAkB,MAAM;AAAA,EACnC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,iBACG;AACH,UAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAAS,KAAK;AACpD,UAAM,EAAE,OAAA,IAAWA,oCAAA;AAEnB,UAAM,UAAU,MAAM,QAAQ,MAAM,UAAU,WAAW,CAAC,KAAK,CAAC;AAChE,UAAM,kBAAkB,MAAM,QAAQ,MAAM,QAAQ,YAAY,GAAG,CAAC,YAAY,CAAC;AAEjF,UAAM,eAAe,MAAM,QAAQ,MAAM;AACvC,UAAI,UAAU;AACZ,eAAO;AAAA,MACT;AACA,UAAI,SAAS;AACX,eAAO;AAAA,MACT;AACA,UAAI,UAAU;AACZ,eAAO;AAAA,MACT;AACA,aAAO;AAAA,IACT,GAAG,CAAC,SAAS,UAAU,QAAQ,CAAC;AAEhC,UAAM,cAAc,MAAM;AAAA,MACxB,CAAC,MAA6C;AAC5C,YAAI,SAAS;AACX,kBAAQ,CAAC;AAAA,QACX;AACA,oBAAY,IAAI;AAAA,MAClB;AAAA,MACA,CAAC,SAAS,WAAW;AAAA,IAAA;AAGvB,UAAM,aAAa,MAAM;AAAA,MACvB,CAAC,MAA6C;AAC5C,YAAI,QAAQ;AACV,iBAAO,CAAC;AAAA,QACV;AACA,oBAAY,KAAK;AAAA,MACnB;AAAA,MACA,CAAC,QAAQ,WAAW;AAAA,IAAA;AAGtB,UAAM,EAAE,OAAO,eAAe,MAAM,aAAaC,SAAAA,eAAe,SAAS,MAAM;AAC/E,UAAM,mBAAmB,EAAE,GAAG,eAAe,GAAGC,QAAAA,iBAAiB,QAAQ,EAAA;AAEzE,UAAM,EAAE,OAAO,WAAW,SAASD,SAAAA,eAAe,KAAK,MAAM;AAC7D,UAAM,eAAe,EAAE,GAAG,WAAW,GAAG,OAAO,GAAGC,QAAAA,iBAAiB,IAAI,EAAA;AAEvE,UAAM,uBAAuBC,qBAAAA,sBAAsB,EAAE,OAAO,UAAU;AACtE,UAAM,sBAAsBC,qBAAAA,qBAAqB;AAAA,MAC/C;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAc;AAAA,IAAA,CACf;AAED,WACEC,2BAAAA,KAAC,OAAA,EAAI,OAAO,kBACT,UAAA;AAAA,MAAA,SACCC,2BAAAA,IAACC,cAAAA,cAAA,EAAa,SAAS,cAAc,SAAS,IAAI,KAAK,EAAE,SAAS,QAAA,GAC/D,UAAA,MAAA,CACH;AAAA,MAEFF,2BAAAA,KAAC,OAAA,EAAI,WAAW,sBACd,UAAA;AAAA,QAAAC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,KAAK;AAAA,YACL,WAAW,GAAG,mBAAmB,IAAI,aAAa,EAAE,GAAG,KAAA;AAAA,YACvD,OAAO;AAAA,YACP;AAAA,YACA,SAAS;AAAA,YACT,QAAQ;AAAA,YACP,GAAG;AAAA,UAAA;AAAA,QAAA;AAAA,QAEL,mBAAmBA,2BAAAA,IAAC,OAAA,EAAI,WAAWE,qBAAAA,qBAAsB,UAAA,aAAA,CAAa;AAAA,MAAA,EAAA,CACzE;AAAA,IAAA,GACF;AAAA,EAEJ;AACF;AAEA,gBAAgB,cAAc;;"}

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+;/* empty css                                      */
+const createRuntimeFn62c9670f_esm = require("../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.cjs");
+var styledTextareaRecipe = createRuntimeFn62c9670f_esm.c({ defaultClassName: "q2igaw1 q2igaw0", variantClassNames: { variant: { ghost: "q2igaw2" }, state: { invalid: "q2igaw3" }, cursor: { "default": "q2igaw4", text: "q2igaw5" }, resize: { none: "q2igaw6", both: "q2igaw7", vertical: "q2igaw8", horizontal: "q2igaw9" }, endAdornment: { true: "q2igawa" } }, defaultVariants: { cursor: "default", resize: "both" }, compoundVariants: [[{ variant: "ghost", state: "invalid" }, "q2igawb"]] });
+var textareaWrapperRecipe = createRuntimeFn62c9670f_esm.c({ defaultClassName: "q2igawd q2igawc", variantClassNames: { disabled: { true: "q2igawe" }, state: { invalid: "q2igawf" } }, defaultVariants: { disabled: false }, compoundVariants: [] });
+var adornmentWrapperEnd = "q2igawg";
+exports.adornmentWrapperEnd = adornmentWrapperEnd;
+exports.styledTextareaRecipe = styledTextareaRecipe;
+exports.textareaWrapperRecipe = textareaWrapperRecipe;
+//# sourceMappingURL=Textarea.vanilla.css.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.vanilla.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}