@traefik-labs/faency 12.2.0 → 12.2.2

package/dist/components/Textarea/Textarea.js

@@ -1,280 +1,191 @@
-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"
-      }
-    }
-  ]
+import { Label } from "../Label/Label.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region components/Textarea/Textarea.tsx
+var FOCUS_SHADOW = elevationVariants[1].boxShadow;
+var StyledTextarea = styled("textarea", {
+	appearance: "none",
+	overflow: "auto",
+	borderWidth: "0",
+	boxSizing: "border-box",
+	fontFamily: "$rubik",
+	margin: "0",
+	outline: "none",
+	WebkitTapHighlightColor: "rgba(0,0,0,0)",
+	p: "$3",
+	position: "relative",
+	flexGrow: 1,
+	backgroundColor: "transparent",
+	borderRadius: "inherit",
+	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: .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" }
+	}]
+});
+var TextareaWrapper = styled("div", {
+	outline: "none",
+	lineHeight: 0,
+	position: "relative",
+	display: "inline-flex",
+	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: .15
+		}
+	},
+	"@hover": { "&:hover": {
+		"&::before": { backgroundColor: "$textareaHoverBg" },
+		"&::after": {
+			backgroundColor: "$primary",
+			opacity: .05
+		}
+	} },
+	variants: {
+		disabled: { true: {
+			opacity: .7,
+			color: "$textareaDisabledText",
+			"@hover": { "&:hover": {
+				"&::before": { backgroundColor: "inherit" },
+				"&::after": { backgroundColor: "inherit" }
+			} }
+		} },
+		state: { invalid: { "@hover": { "&:hover": { "&::after": { backgroundColor: "$textareaInvalidBorder" } } } } }
+	},
+	defaultVariants: { disabled: false }
 });
-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
-  }
+var AdornmentWrapperEnd = styled("div", {
+	position: "absolute",
+	bottom: "$2",
+	right: "$3",
+	minWidth: "$5",
+	minHeight: "$5",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center"
 });
-const AdornmentWrapperEnd = styled("div", {
-  position: "absolute",
-  bottom: "$2",
-  right: "$3",
-  minWidth: "$5",
-  minHeight: "$5",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center"
+var 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 })]
+		})]
+	});
 });
-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
+//#endregion
+export { Textarea };
+
+//# sourceMappingURL=Textarea.js.map

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

@@ -1 +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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"}
+{"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,40 +1,31 @@
-"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 require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+let tinycolor2 = require("tinycolor2");
+tinycolor2 = require_runtime.__toESM(tinycolor2, 1);
+//#region components/Textarea/Textarea.theme.ts
+var textareaLightTheme = {
+	textareaBg: "hsl(240, 14.0%, 99.0%)",
+	textareaBorder: "hsl(208, 9.0%, 73.0%)",
+	textareaFocusBg: (0, tinycolor2.default)("black").setAlpha(.15).toHslString(),
+	textareaFocusBorder: "hsl(206, 100%, 50%)",
+	textareaHoverBg: "hsla(0, 0%, 100%, 0.372)",
+	textareaText: (0, tinycolor2.default)("black").setAlpha(.74).toHslString(),
+	textareaPlaceholder: "hsla(0, 0%, 0%, 0.498)",
+	textareaDisabledText: (0, tinycolor2.default)("black").setAlpha(.35).toHslString(),
+	textareaInvalidBorder: "hsl(358, 75%, 59%)"
 };
-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
+var textareaDarkTheme = {
+	textareaBg: "hsl(209, 38.0%, 12.0%)",
+	textareaBorder: "hsl(208, 11.0%, 45.0%)",
+	textareaFocusBg: (0, tinycolor2.default)("black").setAlpha(.15).toHslString(),
+	textareaFocusBorder: "hsl(206, 100%, 70%)",
+	textareaHoverBg: "hsla(0, 0%, 100%, 0.104)",
+	textareaText: (0, tinycolor2.default)("white").setAlpha(.8).toHslString(),
+	textareaPlaceholder: "hsla(0, 0%, 100%, 0.455)",
+	textareaDisabledText: (0, tinycolor2.default)("white").setAlpha(.35).toHslString(),
+	textareaInvalidBorder: "hsl(358, 75%, 59%)"
 };
+//#endregion
 exports.textareaDarkTheme = textareaDarkTheme;
 exports.textareaLightTheme = textareaLightTheme;
-//# sourceMappingURL=Textarea.theme.cjs.map
+
+//# sourceMappingURL=Textarea.theme.cjs.map

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

@@ -1 +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;;;"}
+{"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,SAA2B,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;CAChE,qBAAqB;CACrB,iBAAiB;CACjB,eAAA,GAAA,WAAA,SAAwB,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;CAC7D,qBAAqB;CACrB,uBAAA,GAAA,WAAA,SAAgC,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;CACrE,uBAAuB;CACxB;AAED,IAAa,oBAAoB;CAC/B,YAAY;CACZ,gBAAgB;CAChB,kBAAA,GAAA,WAAA,SAA2B,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;CAChE,qBAAqB;CACrB,iBAAiB;CACjB,eAAA,GAAA,WAAA,SAAwB,QAAQ,CAAC,SAAS,GAAI,CAAC,aAAa;CAC5D,qBAAqB;CACrB,uBAAA,GAAA,WAAA,SAAgC,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;CACrE,uBAAuB;CACxB"}