npm - @traefik-labs/faency - Versions diffs - 12.3.7 → 12.3.8 - Mend

@traefik-labs/faency 12.3.7 → 12.3.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (164) hide show

package/dist/components/Text/Text.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Text.cjs","names":[],"sources":["../../../components/Text/Text.tsx"],"sourcesContent":["import { CSS, styled, VariantProps } from '../../stitches.config';\n\nexport const Text = styled('span', {\n // Reset\n lineHeight: '1',\n margin: '0',\n fontFamily: '$rubik',\n fontVariantNumeric: 'tabular-nums',\n display: 'inline-block',\n\n variants: {\n size: {\n '0': {\n fontSize: '$0',\n },\n '1': {\n fontSize: '$1',\n },\n '2': {\n fontSize: '$2',\n },\n '3': {\n fontSize: '$3',\n },\n '4': {\n fontSize: '$4',\n },\n '5': {\n fontSize: '$5',\n },\n '6': {\n fontSize: '$6',\n },\n '7': {\n fontSize: '$7',\n },\n '8': {\n fontSize: '$8',\n },\n '9': {\n fontSize: '$9',\n },\n '10': {\n fontSize: '$10',\n },\n '11': {\n fontSize: '$11',\n },\n '12': {\n fontSize: '$12',\n },\n inherit: {\n fontSize: 'inherit',\n },\n },\n weight: {\n light: {\n fontWeight: '$light',\n },\n regular: {\n fontWeight: '$regular',\n },\n medium: {\n fontWeight: '$medium',\n },\n semiBold: {\n fontWeight: '$semiBold',\n },\n bold: {\n fontWeight: '$bold',\n },\n },\n variant: {\n red: {\n color: '$textRed',\n },\n subtle: {\n color: '$textSubtle',\n },\n default: {\n color: '$textDefault',\n },\n contrast: {\n color: '$textContrast',\n },\n inherit: {\n color: 'inherit',\n },\n invalid: {\n color: '$textInvalid',\n },\n },\n gradient: {\n true: {\n WebkitBackgroundClip: 'text',\n WebkitTextFillColor: 'transparent',\n },\n },\n transform: {\n uppercase: {\n textTransform: 'uppercase',\n },\n capitalize: {\n // WARNING: this will only work with block elements (display block/inline-block)\n // @see https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter\n display: 'inline-block',\n '&::first-letter': {\n textTransform: 'uppercase',\n },\n },\n capitalizeWords: {\n textTransform: 'capitalize',\n },\n },\n noWrap: {\n true: {\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n },\n },\n },\n defaultVariants: {\n size: '3',\n variant: 'default',\n },\n});\n\nexport type TextVariants = VariantProps<typeof Text>;\nexport type TextProps = TextVariants & { css?: CSS };\n"],"mappings":";AAEA,IAAa,0CAAO,~~EAAA~~,OAAO,QAAQ;CAEjC,YAAY;CACZ,QAAQ;CACR,YAAY;CACZ,oBAAoB;CACpB,SAAS;CAET,UAAU;EACR,MAAM;GACJ,KAAK,EACH,UAAU,KACZ;GACA,KAAK,EACH,UAAU,KACZ;GACA,KAAK,EACH,UAAU,KACZ;GACA,KAAK,EACH,UAAU,KACZ;GACA,KAAK,EACH,UAAU,KACZ;GACA,KAAK,EACH,UAAU,KACZ;GACA,KAAK,EACH,UAAU,KACZ;GACA,KAAK,EACH,UAAU,KACZ;GACA,KAAK,EACH,UAAU,KACZ;GACA,KAAK,EACH,UAAU,KACZ;GACA,MAAM,EACJ,UAAU,MACZ;GACA,MAAM,EACJ,UAAU,MACZ;GACA,MAAM,EACJ,UAAU,MACZ;GACA,SAAS,EACP,UAAU,UACZ;EACF;EACA,QAAQ;GACN,OAAO,EACL,YAAY,SACd;GACA,SAAS,EACP,YAAY,WACd;GACA,QAAQ,EACN,YAAY,UACd;GACA,UAAU,EACR,YAAY,YACd;GACA,MAAM,EACJ,YAAY,QACd;EACF;EACA,SAAS;GACP,KAAK,EACH,OAAO,WACT;GACA,QAAQ,EACN,OAAO,cACT;GACA,SAAS,EACP,OAAO,eACT;GACA,UAAU,EACR,OAAO,gBACT;GACA,SAAS,EACP,OAAO,UACT;GACA,SAAS,EACP,OAAO,eACT;EACF;EACA,UAAU,EACR,MAAM;GACJ,sBAAsB;GACtB,qBAAqB;EACvB,EACF;EACA,WAAW;GACT,WAAW,EACT,eAAe,YACjB;GACA,YAAY;IAGV,SAAS;IACT,mBAAmB,EACjB,eAAe,YACjB;GACF;GACA,iBAAiB,EACf,eAAe,aACjB;EACF;EACA,QAAQ,EACN,MAAM;GACJ,UAAU;GACV,cAAc;GACd,YAAY;EACd,EACF;CACF;CACA,iBAAiB;EACf,MAAM;EACN,SAAS;CACX;AACF,CAAC"}
1	+ {"version":3,"file":"Text.cjs","names":[],"sources":["../../../components/Text/Text.tsx"],"sourcesContent":["import { CSS, styled, VariantProps } from '../../stitches.config';\n\nexport const Text = styled('span', {\n // Reset\n lineHeight: '1',\n margin: '0',\n fontFamily: '$rubik',\n fontVariantNumeric: 'tabular-nums',\n display: 'inline-block',\n\n variants: {\n size: {\n '0': {\n fontSize: '$0',\n },\n '1': {\n fontSize: '$1',\n },\n '2': {\n fontSize: '$2',\n },\n '3': {\n fontSize: '$3',\n },\n '4': {\n fontSize: '$4',\n },\n '5': {\n fontSize: '$5',\n },\n '6': {\n fontSize: '$6',\n },\n '7': {\n fontSize: '$7',\n },\n '8': {\n fontSize: '$8',\n },\n '9': {\n fontSize: '$9',\n },\n '10': {\n fontSize: '$10',\n },\n '11': {\n fontSize: '$11',\n },\n '12': {\n fontSize: '$12',\n },\n inherit: {\n fontSize: 'inherit',\n },\n },\n weight: {\n light: {\n fontWeight: '$light',\n },\n regular: {\n fontWeight: '$regular',\n },\n medium: {\n fontWeight: '$medium',\n },\n semiBold: {\n fontWeight: '$semiBold',\n },\n bold: {\n fontWeight: '$bold',\n },\n },\n variant: {\n red: {\n color: '$textRed',\n },\n subtle: {\n color: '$textSubtle',\n },\n default: {\n color: '$textDefault',\n },\n contrast: {\n color: '$textContrast',\n },\n inherit: {\n color: 'inherit',\n },\n invalid: {\n color: '$textInvalid',\n },\n },\n gradient: {\n true: {\n WebkitBackgroundClip: 'text',\n WebkitTextFillColor: 'transparent',\n },\n },\n transform: {\n uppercase: {\n textTransform: 'uppercase',\n },\n capitalize: {\n // WARNING: this will only work with block elements (display block/inline-block)\n // @see https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter\n display: 'inline-block',\n '&::first-letter': {\n textTransform: 'uppercase',\n },\n },\n capitalizeWords: {\n textTransform: 'capitalize',\n },\n },\n noWrap: {\n true: {\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n },\n },\n },\n defaultVariants: {\n size: '3',\n variant: 'default',\n },\n});\n\nexport type TextVariants = VariantProps<typeof Text>;\nexport type TextProps = TextVariants & { css?: CSS };\n"],"mappings":";AAEA,IAAa,0CAAO,CAAA,CAAA,OAAO,QAAQ;CAEjC,YAAY;CACZ,QAAQ;CACR,YAAY;CACZ,oBAAoB;CACpB,SAAS;CAET,UAAU;EACR,MAAM;GACJ,KAAK,EACH,UAAU,KACZ;GACA,KAAK,EACH,UAAU,KACZ;GACA,KAAK,EACH,UAAU,KACZ;GACA,KAAK,EACH,UAAU,KACZ;GACA,KAAK,EACH,UAAU,KACZ;GACA,KAAK,EACH,UAAU,KACZ;GACA,KAAK,EACH,UAAU,KACZ;GACA,KAAK,EACH,UAAU,KACZ;GACA,KAAK,EACH,UAAU,KACZ;GACA,KAAK,EACH,UAAU,KACZ;GACA,MAAM,EACJ,UAAU,MACZ;GACA,MAAM,EACJ,UAAU,MACZ;GACA,MAAM,EACJ,UAAU,MACZ;GACA,SAAS,EACP,UAAU,UACZ;EACF;EACA,QAAQ;GACN,OAAO,EACL,YAAY,SACd;GACA,SAAS,EACP,YAAY,WACd;GACA,QAAQ,EACN,YAAY,UACd;GACA,UAAU,EACR,YAAY,YACd;GACA,MAAM,EACJ,YAAY,QACd;EACF;EACA,SAAS;GACP,KAAK,EACH,OAAO,WACT;GACA,QAAQ,EACN,OAAO,cACT;GACA,SAAS,EACP,OAAO,eACT;GACA,UAAU,EACR,OAAO,gBACT;GACA,SAAS,EACP,OAAO,UACT;GACA,SAAS,EACP,OAAO,eACT;EACF;EACA,UAAU,EACR,MAAM;GACJ,sBAAsB;GACtB,qBAAqB;EACvB,EACF;EACA,WAAW;GACT,WAAW,EACT,eAAe,YACjB;GACA,YAAY;IAGV,SAAS;IACT,mBAAmB,EACjB,eAAe,YACjB;GACF;GACA,iBAAiB,EACf,eAAe,aACjB;EACF;EACA,QAAQ,EACN,MAAM;GACJ,UAAU;GACV,cAAc;GACd,YAAY;EACd,EACF;CACF;CACA,iBAAiB;EACf,MAAM;EACN,SAAS;CACX;AACF,CAAC"}

package/dist/components/Text/Text.themes.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Text.themes.cjs","names":[],"sources":["../../../components/Text/Text.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 type Colors = {\n textSubtle: Property.Color;\n textDefault: Property.Color;\n textContrast: Property.Color;\n textInvalid: Property.Color;\n textRed: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = () => ({\n textSubtle: tinycolor('black').setAlpha(0.51).toHslString(),\n textDefault: tinycolor('black').setAlpha(0.74).toHslString(),\n textContrast: 'black',\n textInvalid: '$red9',\n textRed: '$red10',\n });\n\n export const getDark: Factory = () => ({\n textSubtle: tinycolor('white').setAlpha(0.51).toHslString(),\n textDefault: tinycolor('white').setAlpha(0.74).toHslString(),\n textContrast: 'white',\n textInvalid: '$red9',\n textRed: '$red10',\n });\n}\n"],"mappings":";;;;AAKO,IAAA;;CAWQ,OAAA,kBAA2B;EACtC,aAAA,GAAA,WAAA,~~SAAsB~~,OAAO,~~EAAE~~,SAAS,GAAI,~~EAAE~~,YAAY;EAC1D,cAAA,GAAA,WAAA,~~SAAuB~~,OAAO,~~EAAE~~,SAAS,GAAI,~~EAAE~~,YAAY;EAC3D,cAAc;EACd,aAAa;EACb,SAAS;CACX;CAEa,OAAA,iBAA0B;EACrC,aAAA,GAAA,WAAA,~~SAAsB~~,OAAO,~~EAAE~~,SAAS,GAAI,~~EAAE~~,YAAY;EAC1D,cAAA,GAAA,WAAA,~~SAAuB~~,OAAO,~~EAAE~~,SAAS,GAAI,~~EAAE~~,YAAY;EAC3D,cAAc;EACd,aAAa;EACb,SAAS;CACX;~~wBACF~~"}
1	+ {"version":3,"file":"Text.themes.cjs","names":[],"sources":["../../../components/Text/Text.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 type Colors = {\n textSubtle: Property.Color;\n textDefault: Property.Color;\n textContrast: Property.Color;\n textInvalid: Property.Color;\n textRed: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = () => ({\n textSubtle: tinycolor('black').setAlpha(0.51).toHslString(),\n textDefault: tinycolor('black').setAlpha(0.74).toHslString(),\n textContrast: 'black',\n textInvalid: '$red9',\n textRed: '$red10',\n });\n\n export const getDark: Factory = () => ({\n textSubtle: tinycolor('white').setAlpha(0.51).toHslString(),\n textDefault: tinycolor('white').setAlpha(0.74).toHslString(),\n textContrast: 'white',\n textInvalid: '$red9',\n textRed: '$red10',\n });\n}\n"],"mappings":";;;;AAKO,IAAA;;CAWQ,OAAA,kBAA2B;EACtC,aAAA,GAAA,WAAA,QAAA,CAAsB,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAC1D,cAAA,GAAA,WAAA,QAAA,CAAuB,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAC3D,cAAc;EACd,aAAa;EACb,SAAS;CACX;CAEa,OAAA,iBAA0B;EACrC,aAAA,GAAA,WAAA,QAAA,CAAsB,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAC1D,cAAA,GAAA,WAAA,QAAA,CAAuB,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAC3D,cAAc;EACd,aAAa;EACb,SAAS;CACX;GACD,UAAA,QAAA,CAAA,EAAD"}

package/dist/components/Text/Text.themes.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Text.themes.js","names":[],"sources":["../../../components/Text/Text.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 type Colors = {\n textSubtle: Property.Color;\n textDefault: Property.Color;\n textContrast: Property.Color;\n textInvalid: Property.Color;\n textRed: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = () => ({\n textSubtle: tinycolor('black').setAlpha(0.51).toHslString(),\n textDefault: tinycolor('black').setAlpha(0.74).toHslString(),\n textContrast: 'black',\n textInvalid: '$red9',\n textRed: '$red10',\n });\n\n export const getDark: Factory = () => ({\n textSubtle: tinycolor('white').setAlpha(0.51).toHslString(),\n textDefault: tinycolor('white').setAlpha(0.74).toHslString(),\n textContrast: 'white',\n textInvalid: '$red9',\n textRed: '$red10',\n });\n}\n"],"mappings":";;AAKO,IAAA;;CAWQ,OAAA,kBAA2B;EACtC,YAAY,UAAU,OAAO,~~EAAE~~,SAAS,GAAI,~~EAAE~~,YAAY;EAC1D,aAAa,UAAU,OAAO,~~EAAE~~,SAAS,GAAI,~~EAAE~~,YAAY;EAC3D,cAAc;EACd,aAAa;EACb,SAAS;CACX;CAEa,OAAA,iBAA0B;EACrC,YAAY,UAAU,OAAO,~~EAAE~~,SAAS,GAAI,~~EAAE~~,YAAY;EAC1D,aAAa,UAAU,OAAO,~~EAAE~~,SAAS,GAAI,~~EAAE~~,YAAY;EAC3D,cAAc;EACd,aAAa;EACb,SAAS;CACX;~~wBACF~~"}
1	+ {"version":3,"file":"Text.themes.js","names":[],"sources":["../../../components/Text/Text.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 type Colors = {\n textSubtle: Property.Color;\n textDefault: Property.Color;\n textContrast: Property.Color;\n textInvalid: Property.Color;\n textRed: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = () => ({\n textSubtle: tinycolor('black').setAlpha(0.51).toHslString(),\n textDefault: tinycolor('black').setAlpha(0.74).toHslString(),\n textContrast: 'black',\n textInvalid: '$red9',\n textRed: '$red10',\n });\n\n export const getDark: Factory = () => ({\n textSubtle: tinycolor('white').setAlpha(0.51).toHslString(),\n textDefault: tinycolor('white').setAlpha(0.74).toHslString(),\n textContrast: 'white',\n textInvalid: '$red9',\n textRed: '$red10',\n });\n}\n"],"mappings":";;AAKO,IAAA;;CAWQ,OAAA,kBAA2B;EACtC,YAAY,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAC1D,aAAa,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAC3D,cAAc;EACd,aAAa;EACb,SAAS;CACX;CAEa,OAAA,iBAA0B;EACrC,YAAY,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAC1D,aAAa,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAC3D,cAAc;EACd,aAAa;EACb,SAAS;CACX;GACD,UAAA,QAAA,CAAA,EAAD"}

package/dist/components/TextField/TextField.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextField.cjs","names":[],"sources":["../../../components/TextField/TextField.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 { Box } from '../Box';\nimport { Input, InputHandle, InputProps, InputVariants } from '../Input';\nimport { Label } from '../Label';\nimport { Tooltip } from '../Tooltip';\n\n// TYPES\nexport interface TextFieldLabelProps {\n variant: 'invalid' \| 'subtle' \| 'contrast' \| 'default';\n htmlFor?: string;\n}\nexport type TextFieldProps = InputProps & {\n type?: string;\n clearable?: boolean;\n label?: string \| ((props: TextFieldLabelProps) => JSX.Element);\n};\n\nexport type TextFieldVariants = InputVariants;\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 TextField = React.forwardRef<React.ElementRef<typeof Input>, TextFieldProps>(\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<InputHandle \| null>(null);\n React.useImperativeHandle(forwardedRef, () => inputRef.current as InputHandle);\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 <Label variant={labelVariant} htmlFor={id}>\n {LabelOrComponent}\n </Label>\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 <Box css={css}>\n {LabelNode}\n <Input\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 </Box>\n );\n }\n);\n"],"mappings":";;;;;;;;;;;AA4BA,IAAM,iBAAiB,wBAAA,OAAO,OAAO;CACnC,SAAS;CACT,eAAe;CACf,YAAY;AACd,CAAC;AAED,IAAM,gCAAgC,wBAAA,OAAO,sBAAA,yBAAyB,EACpE,SAAS,EACP,YAAY,KACd,EACF,CAAC;AAED,IAAM,oBAAoB,wBAAA,OAAO,sBAAA,aAAa,EAC5C,UAAU,EACR,WAAW,EACT,QAAQ,UACV,EACF,EACF,CAAC;AAED,IAAM,sBAAsB,wBAAA,OAAO,sBAAA,eAAe,EAChD,UAAU,EACR,WAAW,EACT,QAAQ,UACV,EACF,EACF,CAAC;AAED,IAAM,yBAAyB,wBAAA,OAAO,sBAAA,kBAAkB,EACtD,UAAU,EACR,WAAW,EACT,QAAQ,UACV,EACF,EACF,CAAC;AAED,IAAa,YAAY,MAAA,QAAM,YAE3B,EACE,OACA,WACA,OAAO,kBACP,IACA,MACA,UACA,UACA,QACA,SACA,KACA,GAAG,SAEL,iBACG;CACH,MAAM,WAAW,MAAA,QAAM,OAA2B,IAAI;CACtD,MAAA,QAAM,oBAAoB,oBAAoB,SAAS,OAAsB;CAE7E,MAAM,CAAC,eAAe,oBAAoB,MAAA,QAAM,SAAS,KAAK;CAC9D,MAAM,CAAC,WAAW,gBAAgB,MAAA,QAAM,SAAS,IAAI;CACrD,MAAM,oBAAoB,MAAA,QAAM,cAAc,cAAc,YAAY,CAAC,SAAS,CAAC;CAEnF,MAAM,UAAU,MAAA,QAAM,cAAc,UAAU,WAAW,CAAC,KAAK,CAAC;CAEhE,MAAM,eAAe,MAAA,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,YAAY,MAAA,QAAM,cAAc;EACpC,IAAI,qBAAqB,KAAA,KAAa,qBAAqB,MACzD,OAAO;EAET,IAAI,OAAO,qBAAqB,UAC9B,OACE,iBAAA,GAAA,kBAAA,~~KAAC~~,cAAA,OAAD;GAAO,SAAS;GAAc,SAAS;aACpC;EACI,CAAA;EAGX,OAAO,iBAAA,GAAA,kBAAA,~~KAAC~~,kBAAD;GAAkB,SAAS;GAAc,SAAS;EAAK,CAAA;CAChE,GAAG;EAAC;EAAkB;EAAc;CAAE,CAAC;CAEvC,MAAM,iBAAiB,MAAA,QAAM,cAAc,SAAS,YAAY,CAAC,IAAI,CAAC;CAEtE,MAAM,kBAAkB,MAAA,QAAM,cACrB,iBAAiB,YAAY,MACpC;EAAC;EAAgB;EAAM;CAAS,CAClC;CAEA,MAAM,oBAAoB,MAAA,QAAM,cACxB,aAAa,kBAAkB,SACrC;EAAC;EAAW;EAAgB;CAAO,CACrC;CAEA,MAAM,oBAAoB,MAAA,QAAM,cACvB,aAAa,WAAa,aAAa,kBAAoB,WAAW,gBAC7E;EAAC;EAAW;EAAS;CAAc,CACrC;CAEA,MAAM,gBAAgB,MAAA,QAAM,cAAc,YAAY,UAAU,CAAC,UAAU,QAAQ,CAAC;CAEpF,MAAM,cAAc,MAAA,QAAM,kBAAkB;EAC1C,MAAM,EAAE,YAAY;EACpB,IAAI,SACF,QAAQ,MAAM;CAElB,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,cAAc,MAAA,QAAM,aACvB,MAA0C;EACzC,IAAI,SACF,QAAQ,CAAC;EAEX,iBAAiB,IAAI;CACvB,GACA,CAAC,SAAS,gBAAgB,CAC5B;CAEA,MAAM,aAAa,MAAA,QAAM,aACtB,MAA0C;EACzC,IAAI,QACF,OAAO,CAAC;EAEV,iBAAiB,KAAK;CACxB,GACA,CAAC,QAAQ,gBAAgB,CAC3B;CAEA,MAAM,2BAA2B,MAAA,QAAM,kBAAkB;EACvD,cAAc,kBAAmB,kBAAkB,aAAa,KAAA,IAAY,UAAW;CACzF,GAAG,CAAC,YAAY,CAAC;CAEjB,MAAM,sBAAsB,MAAA,QAAM,cACzB,oBAAoB,iBAAiB,MAAA,QAAM,UAClD,CAAC,iBAAiB,CACpB;CAEA,MAAM,+BAA+B,MAAA,QAAM,cAClC,oBAAoB,sBAAsB,mBACjD,CAAC,iBAAiB,CACpB;CAEA,MAAM,iBAAiB,MAAA,QAAM,cACpB,oBAAoB,kBAAkB,iBAC7C,CAAC,iBAAiB,CACpB;CAEA,OACE,iBAAA,GAAA,kBAAA,~~MAAC~~,YAAA,KAAD;EAAU;YAAV,CACG,WACD,iBAAA,GAAA,kBAAA,~~KAAC~~,cAAA,OAAD;GACM;GACJ,KAAK;GACL,cACE,qBACE,iBAAA,GAAA,kBAAA,~~MAAC~~,qBAAD,EAAA,UAAA;IACG,WAAW,iBAAA,GAAA,kBAAA,~~KAAC~~,+BAAD;KAA+B,MAAK;KAAQ,cAAW;IAAW,CAAA;IAC7E,kBACC,iBAAA,GAAA,kBAAA,~~KAAC~~,gBAAA,SAAD;KAAS,SAAS;eAChB,iBAAA,GAAA,kBAAA,~~KAAC~~,8BAAD;MACE,cAAY;MACZ,SAAS;KACV,CAAA;IACM,CAAA;IAEV,aAAa,CAAC,iBACb,iBAAA,GAAA,kBAAA,~~KAAC~~,gBAAA,SAAD;KAAS,SAAQ;eACf,iBAAA,GAAA,kBAAA,~~KAAC~~,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,CACE;;AAET,CACF"}
1	+ {"version":3,"file":"TextField.cjs","names":[],"sources":["../../../components/TextField/TextField.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 { Box } from '../Box';\nimport { Input, InputHandle, InputProps, InputVariants } from '../Input';\nimport { Label } from '../Label';\nimport { Tooltip } from '../Tooltip';\n\n// TYPES\nexport interface TextFieldLabelProps {\n variant: 'invalid' \| 'subtle' \| 'contrast' \| 'default';\n htmlFor?: string;\n}\nexport type TextFieldProps = InputProps & {\n type?: string;\n clearable?: boolean;\n label?: string \| ((props: TextFieldLabelProps) => JSX.Element);\n};\n\nexport type TextFieldVariants = InputVariants;\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 TextField = React.forwardRef<React.ElementRef<typeof Input>, TextFieldProps>(\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<InputHandle \| null>(null);\n React.useImperativeHandle(forwardedRef, () => inputRef.current as InputHandle);\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 <Label variant={labelVariant} htmlFor={id}>\n {LabelOrComponent}\n </Label>\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 <Box css={css}>\n {LabelNode}\n <Input\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 </Box>\n );\n }\n);\n"],"mappings":"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"}

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

	@@ -1 +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":";;;;;;;;;;;AA2BA,IAAM,iBAAiB,wBAAA,OAAO,OAAO;CACnC,SAAS;CACT,eAAe;CACf,YAAY;AACd,CAAC;AAED,IAAM,gCAAgC,wBAAA,OAAO,sBAAA,yBAAyB,EACpE,SAAS,EACP,YAAY,KACd,EACF,CAAC;AAED,IAAM,oBAAoB,wBAAA,OAAO,sBAAA,aAAa,EAC5C,UAAU,EACR,WAAW,EACT,QAAQ,UACV,EACF,EACF,CAAC;AAED,IAAM,sBAAsB,wBAAA,OAAO,sBAAA,eAAe,EAChD,UAAU,EACR,WAAW,EACT,QAAQ,UACV,EACF,EACF,CAAC;AAED,IAAM,yBAAyB,wBAAA,OAAO,sBAAA,kBAAkB,EACtD,UAAU,EACR,WAAW,EACT,QAAQ,UACV,EACF,EACF,CAAC;AAED,IAAa,mBAAmB,MAAA,QAAM,YAKlC,EACE,OACA,WACA,OAAO,kBACP,IACA,MACA,UACA,UACA,QACA,SACA,KACA,GAAG,SAEL,iBACG;CACH,MAAM,WAAW,MAAA,QAAM,OAAkC,IAAI;CAC7D,MAAA,QAAM,oBAAoB,oBAAoB,SAAS,OAA6B;CAEpF,MAAM,CAAC,eAAe,oBAAoB,MAAA,QAAM,SAAS,KAAK;CAC9D,MAAM,CAAC,WAAW,gBAAgB,MAAA,QAAM,SAAS,IAAI;CACrD,MAAM,oBAAoB,MAAA,QAAM,cAAc,cAAc,YAAY,CAAC,SAAS,CAAC;CAEnF,MAAM,UAAU,MAAA,QAAM,cAAc,UAAU,WAAW,CAAC,KAAK,CAAC;CAEhE,MAAM,eAAe,MAAA,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,YAAY,MAAA,QAAM,cAAc;EACpC,IAAI,qBAAqB,KAAA,KAAa,qBAAqB,MACzD,OAAO;EAET,IAAI,OAAO,qBAAqB,UAC9B,OACE,iBAAA,GAAA,kBAAA,~~KAAC~~,sBAAA,cAAD;GAAc,SAAS;GAAc,SAAS;aAC3C;EACW,CAAA;EAGlB,OAAO,iBAAA,GAAA,kBAAA,~~KAAC~~,kBAAD;GAAkB,SAAS;GAAc,SAAS;EAAK,CAAA;CAChE,GAAG;EAAC;EAAkB;EAAc;CAAE,CAAC;CAEvC,MAAM,iBAAiB,MAAA,QAAM,cAAc,SAAS,YAAY,CAAC,IAAI,CAAC;CAEtE,MAAM,kBAAkB,MAAA,QAAM,cACrB,iBAAiB,YAAY,MACpC;EAAC;EAAgB;EAAM;CAAS,CAClC;CAEA,MAAM,oBAAoB,MAAA,QAAM,cACxB,aAAa,kBAAkB,SACrC;EAAC;EAAW;EAAgB;CAAO,CACrC;CAEA,MAAM,oBAAoB,MAAA,QAAM,cACvB,aAAa,WAAa,aAAa,kBAAoB,WAAW,gBAC7E;EAAC;EAAW;EAAS;CAAc,CACrC;CAEA,MAAM,gBAAgB,MAAA,QAAM,cAAc,YAAY,UAAU,CAAC,UAAU,QAAQ,CAAC;CAEpF,MAAM,cAAc,MAAA,QAAM,kBAAkB;EAC1C,MAAM,EAAE,YAAY;EACpB,IAAI,SACF,QAAQ,MAAM;CAElB,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,cAAc,MAAA,QAAM,aACvB,MAA0C;EACzC,IAAI,SACF,QAAQ,CAAC;EAEX,iBAAiB,IAAI;CACvB,GACA,CAAC,SAAS,gBAAgB,CAC5B;CAEA,MAAM,aAAa,MAAA,QAAM,aACtB,MAA0C;EACzC,IAAI,QACF,OAAO,CAAC;EAEV,iBAAiB,KAAK;CACxB,GACA,CAAC,QAAQ,gBAAgB,CAC3B;CAEA,MAAM,2BAA2B,MAAA,QAAM,kBAAkB;EACvD,cAAc,kBAAmB,kBAAkB,aAAa,KAAA,IAAY,UAAW;CACzF,GAAG,CAAC,YAAY,CAAC;CAEjB,MAAM,sBAAsB,MAAA,QAAM,cACzB,oBAAoB,iBAAiB,MAAA,QAAM,UAClD,CAAC,iBAAiB,CACpB;CAEA,MAAM,+BAA+B,MAAA,QAAM,cAClC,oBAAoB,sBAAsB,mBACjD,CAAC,iBAAiB,CACpB;CAEA,MAAM,iBAAiB,MAAA,QAAM,cACpB,oBAAoB,kBAAkB,iBAC7C,CAAC,iBAAiB,CACpB;CAEA,OACE,iBAAA,GAAA,kBAAA,~~MAAC~~,oBAAA,YAAD;EAAiB;YAAjB,CACG,WACD,iBAAA,GAAA,kBAAA,~~KAAC~~,sBAAA,cAAD;GACM;GACJ,KAAK;GACL,cACE,qBACE,iBAAA,GAAA,kBAAA,~~MAAC~~,qBAAD,EAAA,UAAA;IACG,WAAW,iBAAA,GAAA,kBAAA,~~KAAC~~,+BAAD;KAA+B,MAAK;KAAQ,cAAW;IAAW,CAAA;IAC7E,kBACC,iBAAA,GAAA,kBAAA,~~KAAC~~,gBAAA,SAAD;KAAS,SAAS;eAChB,iBAAA,GAAA,kBAAA,~~KAAC~~,8BAAD;MACE,cAAY;MACZ,SAAS;KACV,CAAA;IACM,CAAA;IAEV,aAAa,CAAC,iBACb,iBAAA,GAAA,kBAAA,~~KAAC~~,gBAAA,SAAD;KAAS,SAAQ;eACf,iBAAA,GAAA,kBAAA,~~KAAC~~,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"}
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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"}

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

	@@ -1 +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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"}
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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"}

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

	@@ -1 +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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"}
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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"}

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

	@@ -1 +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,~~SAA2B~~,OAAO,~~EAAE~~,SAAS,GAAI,~~EAAE~~,YAAY;CAC/D,qBAAqB;CACrB,iBAAiB;CACjB,eAAA,GAAA,WAAA,~~SAAwB~~,OAAO,~~EAAE~~,SAAS,GAAI,~~EAAE~~,YAAY;CAC5D,qBAAqB;CACrB,uBAAA,GAAA,WAAA,~~SAAgC~~,OAAO,~~EAAE~~,SAAS,GAAI,~~EAAE~~,YAAY;CACpE,uBAAuB;AACzB;AAEA,IAAa,oBAAoB;CAC/B,YAAY;CACZ,gBAAgB;CAChB,kBAAA,GAAA,WAAA,~~SAA2B~~,OAAO,~~EAAE~~,SAAS,GAAI,~~EAAE~~,YAAY;CAC/D,qBAAqB;CACrB,iBAAiB;CACjB,eAAA,GAAA,WAAA,~~SAAwB~~,OAAO,~~EAAE~~,SAAS,EAAG,~~EAAE~~,YAAY;CAC3D,qBAAqB;CACrB,uBAAA,GAAA,WAAA,~~SAAgC~~,OAAO,~~EAAE~~,SAAS,GAAI,~~EAAE~~,YAAY;CACpE,uBAAuB;AACzB"}
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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Textarea.theme.js","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,iBAAiB,UAAU,OAAO,~~EAAE~~,SAAS,GAAI,~~EAAE~~,YAAY;CAC/D,qBAAqB;CACrB,iBAAiB;CACjB,cAAc,UAAU,OAAO,~~EAAE~~,SAAS,GAAI,~~EAAE~~,YAAY;CAC5D,qBAAqB;CACrB,sBAAsB,UAAU,OAAO,~~EAAE~~,SAAS,GAAI,~~EAAE~~,YAAY;CACpE,uBAAuB;AACzB;AAEA,IAAa,oBAAoB;CAC/B,YAAY;CACZ,gBAAgB;CAChB,iBAAiB,UAAU,OAAO,~~EAAE~~,SAAS,GAAI,~~EAAE~~,YAAY;CAC/D,qBAAqB;CACrB,iBAAiB;CACjB,cAAc,UAAU,OAAO,~~EAAE~~,SAAS,EAAG,~~EAAE~~,YAAY;CAC3D,qBAAqB;CACrB,sBAAsB,UAAU,OAAO,~~EAAE~~,SAAS,GAAI,~~EAAE~~,YAAY;CACpE,uBAAuB;AACzB"}
1	+ {"version":3,"file":"Textarea.theme.js","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,iBAAiB,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;CAC/D,qBAAqB;CACrB,iBAAiB;CACjB,cAAc,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;CAC5D,qBAAqB;CACrB,sBAAsB,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;CACpE,uBAAuB;AACzB;AAEA,IAAa,oBAAoB;CAC/B,YAAY;CACZ,gBAAgB;CAChB,iBAAiB,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;CAC/D,qBAAqB;CACrB,iBAAiB;CACjB,cAAc,UAAU,OAAO,CAAC,CAAC,SAAS,EAAG,CAAC,CAAC,YAAY;CAC3D,qBAAqB;CACrB,sBAAsB,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;CACpE,uBAAuB;AACzB"}

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

	@@ -1 +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,~~SAA2B~~,OAAO,~~EAAE~~,SAAS,GAAI,~~EAAE~~,YAAY;EAC/D,qBAAqB,aAAa,QAAQ,UAAU,CAAC;EACrD,iBAAiB;EACjB,eAAA,GAAA,WAAA,~~SAAwB~~,OAAO,~~EAAE~~,SAAS,GAAI,~~EAAE~~,YAAY;EAC5D,qBAAqB;EACrB,uBAAA,GAAA,WAAA,~~SAAgC~~,OAAO,~~EAAE~~,SAAS,GAAI,~~EAAE~~,YAAY;EACpE,uBAAuB;CACzB;CAEa,OAAA,WAAoB,kBAAkB;EACjD,YAAY;EACZ,gBAAgB;EAChB,kBAAA,GAAA,WAAA,~~SAA2B~~,OAAO,~~EAAE~~,SAAS,GAAI,~~EAAE~~,YAAY;EAC/D,qBAAqB,aAAa,QAAQ,UAAU,EAAE;EACtD,iBAAiB;EACjB,eAAA,GAAA,WAAA,~~SAAwB~~,OAAO,~~EAAE~~,SAAS,EAAG,~~EAAE~~,YAAY;EAC3D,qBAAqB;EACrB,uBAAA,GAAA,WAAA,~~SAAgC~~,OAAO,~~EAAE~~,SAAS,GAAI,~~EAAE~~,YAAY;EACpE,uBAAuB;CACzB;~~wBACF~~"}
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"}

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

	@@ -1 +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,~~EAAE~~,SAAS,GAAI,~~EAAE~~,YAAY;EAC/D,qBAAqB,aAAa,QAAQ,UAAU,CAAC;EACrD,iBAAiB;EACjB,cAAc,UAAU,OAAO,~~EAAE~~,SAAS,GAAI,~~EAAE~~,YAAY;EAC5D,qBAAqB;EACrB,sBAAsB,UAAU,OAAO,~~EAAE~~,SAAS,GAAI,~~EAAE~~,YAAY;EACpE,uBAAuB;CACzB;CAEa,OAAA,WAAoB,kBAAkB;EACjD,YAAY;EACZ,gBAAgB;EAChB,iBAAiB,UAAU,OAAO,~~EAAE~~,SAAS,GAAI,~~EAAE~~,YAAY;EAC/D,qBAAqB,aAAa,QAAQ,UAAU,EAAE;EACtD,iBAAiB;EACjB,cAAc,UAAU,OAAO,~~EAAE~~,SAAS,EAAG,~~EAAE~~,YAAY;EAC3D,qBAAqB;EACrB,sBAAsB,UAAU,OAAO,~~EAAE~~,SAAS,GAAI,~~EAAE~~,YAAY;EACpE,uBAAuB;CACzB;~~wBACF~~"}
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"}

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

	@@ -1 +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,~~kBAAoB~~,QAAQ;CAAE;CAE3E,MAAM,EAAE,OAAO,WAAW,SAAS,iBAAA,eAAe,KAAK,MAAM;CAC7D,MAAM,eAAe;EAAE,GAAG;EAAW,GAAG;EAAO,IAAA,GAAA,yBAAA,~~kBAAoB~~,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,~~MAAC~~,OAAD;EAAK,OAAO;YAAZ,CACG,SACC,iBAAA,GAAA,kBAAA,~~KAAC~~,sBAAA,cAAD;GAAc,SAAS;GAAc,SAAS;GAAI,KAAK,EAAE,SAAS,QAAQ;aACvE;EACW,CAAA,GAEhB,iBAAA,GAAA,kBAAA,~~MAAC~~,OAAD;GAAK,WAAW;aAAhB,CACE,iBAAA,GAAA,kBAAA,~~KAAC~~,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,~~KAAC~~,OAAD;IAAK,WAAA;cAAiC;GAAkB,CAAA,CACzE;IACF;;AAET,CACF;AAEA,gBAAgB,cAAc"}
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"}

package/dist/components/Tooltip/Tooltip.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tooltip.cjs","names":[],"sources":["../../../components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { Box } from '../Box';\nimport { Text } from '../Text';\n\nexport type TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root> &\n Omit<React.ComponentProps<typeof TooltipPrimitive.Content>, 'content'> & {\n children: React.ReactElement \| React.ReactNode;\n content: React.ReactElement \| React.ReactNode;\n multiline?: boolean;\n css?: CSS;\n };\n\nconst Content = styled(TooltipPrimitive.Content, {\n color: '$tooltipText',\n backgroundColor: '$tooltipContentBg',\n borderRadius: '$3',\n padding: '$2',\n\n variants: {\n multiline: {\n true: {\n maxWidth: 250,\n pb: 7,\n },\n },\n },\n});\n\nconst ArrowBox = styled(Box, {\n color: '$tooltipContentBg',\n});\n\nexport const TooltipContent = React.forwardRef<\n React.ElementRef<typeof Content>,\n Partial<TooltipProps>\n>(({ css, multiline, children, ...props }, forwardedRef) => {\n const isContentString = React.useMemo(() => typeof children === 'string', [children]);\n return (\n <Content\n css={css}\n side=\"top\"\n align=\"center\"\n sideOffset={5}\n {...(props as React.ComponentProps<typeof TooltipPrimitive.Content>)}\n multiline={multiline}\n ref={forwardedRef}\n >\n {isContentString ? (\n <Text\n size=\"1\"\n as=\"p\"\n css={{\n color: 'currentColor',\n lineHeight: multiline ? '20px' : undefined,\n }}\n >\n {children}\n </Text>\n ) : (\n children\n )}\n <ArrowBox>\n <TooltipPrimitive.Arrow\n offset={5}\n width={11}\n height={5}\n style={{\n fill: 'currentColor',\n }}\n />\n </ArrowBox>\n </Content>\n );\n});\n\nexport const Tooltip = React.forwardRef<React.ElementRef<typeof Content>, TooltipProps>(\n (\n { children, content, open, defaultOpen, onOpenChange, multiline, css, ...props },\n forwardedRef,\n ) => (\n <TooltipPrimitive.Root\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n delayDuration={400}\n >\n <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>\n <TooltipPrimitive.Portal>\n <TooltipContent css={css} multiline={multiline} ref={forwardedRef} {...props}>\n {content}\n </TooltipContent>\n </TooltipPrimitive.Portal>\n </TooltipPrimitive.Root>\n ),\n);\n\nexport const TooltipRoot = TooltipPrimitive.Root;\nexport const TooltipTrigger = TooltipPrimitive.Trigger;\nexport const TooltipPortal = TooltipPrimitive.Portal;\n\nexport type TooltipVariants = VariantProps<typeof Tooltip>;\n"],"mappings":";;;;;;;;;;AAeA,IAAM,UAAU,wBAAA,OAAO,wBAAiB,SAAS;CAC/C,OAAO;CACP,iBAAiB;CACjB,cAAc;CACd,SAAS;CAET,UAAU,EACR,WAAW,EACT,MAAM;EACJ,UAAU;EACV,IAAI;CACN,EACF,EACF;AACF,CAAC;AAED,IAAM,WAAW,wBAAA,OAAO,YAAA,KAAK,EAC3B,OAAO,oBACT,CAAC;AAED,IAAa,iBAAiB,MAAA,QAAM,YAGjC,EAAE,KAAK,WAAW,UAAU,GAAG,SAAS,iBAAiB;CAC1D,MAAM,kBAAkB,MAAA,QAAM,cAAc,OAAO,aAAa,UAAU,CAAC,QAAQ,CAAC;CACpF,OACE,iBAAA,GAAA,kBAAA,~~MAAC~~,SAAD;EACO;EACL,MAAK;EACL,OAAM;EACN,YAAY;EACZ,GAAK;EACM;EACX,KAAK;YAPP,CASG,kBACC,iBAAA,GAAA,kBAAA,~~KAAC~~,aAAA,MAAD;GACE,MAAK;GACL,IAAG;GACH,KAAK;IACH,OAAO;IACP,YAAY,YAAY,SAAS,KAAA;GACnC;GAEC;EACG,CAAA,IAEN,UAEF,iBAAA,GAAA,kBAAA,~~KAAC~~,UAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,~~KAAC~~,wBAAiB,OAAlB;GACE,QAAQ;GACR,OAAO;GACP,QAAQ;GACR,OAAO,EACL,MAAM,eACR;EACD,CAAA,EACO,CAAA,CACH;;AAEb,CAAC;AAED,IAAa,UAAU,MAAA,QAAM,YAEzB,EAAE,UAAU,SAAS,MAAM,aAAa,cAAc,WAAW,KAAK,GAAG,SACzE,iBAEA,iBAAA,GAAA,kBAAA,~~MAAC~~,wBAAiB,MAAlB;CACQ;CACO;CACC;CACd,eAAe;WAJjB,CAME,iBAAA,GAAA,kBAAA,~~KAAC~~,wBAAiB,SAAlB;EAA0B,SAAA;EAAS;CAAmC,CAAA,GACtE,iBAAA,GAAA,kBAAA,~~KAAC~~,wBAAiB,QAAlB,EAAA,UACE,iBAAA,GAAA,kBAAA,~~KAAC~~,gBAAD;EAAqB;EAAgB;EAAW,KAAK;EAAc,GAAI;YACpE;CACa,CAAA,EACO,CAAA,CACJ;EAE3B;AAEA,IAAa,cAAc,wBAAiB;AAC5C,IAAa,iBAAiB,wBAAiB"}
1	+ {"version":3,"file":"Tooltip.cjs","names":[],"sources":["../../../components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { Box } from '../Box';\nimport { Text } from '../Text';\n\nexport type TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root> &\n Omit<React.ComponentProps<typeof TooltipPrimitive.Content>, 'content'> & {\n children: React.ReactElement \| React.ReactNode;\n content: React.ReactElement \| React.ReactNode;\n multiline?: boolean;\n css?: CSS;\n };\n\nconst Content = styled(TooltipPrimitive.Content, {\n color: '$tooltipText',\n backgroundColor: '$tooltipContentBg',\n borderRadius: '$3',\n padding: '$2',\n\n variants: {\n multiline: {\n true: {\n maxWidth: 250,\n pb: 7,\n },\n },\n },\n});\n\nconst ArrowBox = styled(Box, {\n color: '$tooltipContentBg',\n});\n\nexport const TooltipContent = React.forwardRef<\n React.ElementRef<typeof Content>,\n Partial<TooltipProps>\n>(({ css, multiline, children, ...props }, forwardedRef) => {\n const isContentString = React.useMemo(() => typeof children === 'string', [children]);\n return (\n <Content\n css={css}\n side=\"top\"\n align=\"center\"\n sideOffset={5}\n {...(props as React.ComponentProps<typeof TooltipPrimitive.Content>)}\n multiline={multiline}\n ref={forwardedRef}\n >\n {isContentString ? (\n <Text\n size=\"1\"\n as=\"p\"\n css={{\n color: 'currentColor',\n lineHeight: multiline ? '20px' : undefined,\n }}\n >\n {children}\n </Text>\n ) : (\n children\n )}\n <ArrowBox>\n <TooltipPrimitive.Arrow\n offset={5}\n width={11}\n height={5}\n style={{\n fill: 'currentColor',\n }}\n />\n </ArrowBox>\n </Content>\n );\n});\n\nexport const Tooltip = React.forwardRef<React.ElementRef<typeof Content>, TooltipProps>(\n (\n { children, content, open, defaultOpen, onOpenChange, multiline, css, ...props },\n forwardedRef,\n ) => (\n <TooltipPrimitive.Root\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n delayDuration={400}\n >\n <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>\n <TooltipPrimitive.Portal>\n <TooltipContent css={css} multiline={multiline} ref={forwardedRef} {...props}>\n {content}\n </TooltipContent>\n </TooltipPrimitive.Portal>\n </TooltipPrimitive.Root>\n ),\n);\n\nexport const TooltipRoot = TooltipPrimitive.Root;\nexport const TooltipTrigger = TooltipPrimitive.Trigger;\nexport const TooltipPortal = TooltipPrimitive.Portal;\n\nexport type TooltipVariants = VariantProps<typeof Tooltip>;\n"],"mappings":";;;;;;;;;;AAeA,IAAM,UAAU,wBAAA,OAAO,wBAAiB,SAAS;CAC/C,OAAO;CACP,iBAAiB;CACjB,cAAc;CACd,SAAS;CAET,UAAU,EACR,WAAW,EACT,MAAM;EACJ,UAAU;EACV,IAAI;CACN,EACF,EACF;AACF,CAAC;AAED,IAAM,WAAW,wBAAA,OAAO,YAAA,KAAK,EAC3B,OAAO,oBACT,CAAC;AAED,IAAa,iBAAiB,MAAA,QAAM,YAGjC,EAAE,KAAK,WAAW,UAAU,GAAG,SAAS,iBAAiB;CAC1D,MAAM,kBAAkB,MAAA,QAAM,cAAc,OAAO,aAAa,UAAU,CAAC,QAAQ,CAAC;CACpF,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,SAAD;EACO;EACL,MAAK;EACL,OAAM;EACN,YAAY;EACZ,GAAK;EACM;EACX,KAAK;YAPP,CASG,kBACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAA,MAAD;GACE,MAAK;GACL,IAAG;GACH,KAAK;IACH,OAAO;IACP,YAAY,YAAY,SAAS,KAAA;GACnC;GAEC;EACG,CAAA,IAEN,UAEF,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,wBAAiB,OAAlB;GACE,QAAQ;GACR,OAAO;GACP,QAAQ;GACR,OAAO,EACL,MAAM,eACR;EACD,CAAA,EACO,CAAA,CACH;;AAEb,CAAC;AAED,IAAa,UAAU,MAAA,QAAM,YAEzB,EAAE,UAAU,SAAS,MAAM,aAAa,cAAc,WAAW,KAAK,GAAG,SACzE,iBAEA,iBAAA,GAAA,kBAAA,KAAA,CAAC,wBAAiB,MAAlB;CACQ;CACO;CACC;CACd,eAAe;WAJjB,CAME,iBAAA,GAAA,kBAAA,IAAA,CAAC,wBAAiB,SAAlB;EAA0B,SAAA;EAAS;CAAmC,CAAA,GACtE,iBAAA,GAAA,kBAAA,IAAA,CAAC,wBAAiB,QAAlB,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,gBAAD;EAAqB;EAAgB;EAAW,KAAK;EAAc,GAAI;YACpE;CACa,CAAA,EACO,CAAA,CACJ;EAE3B;AAEA,IAAa,cAAc,wBAAiB;AAC5C,IAAa,iBAAiB,wBAAiB"}

package/dist/components/Tooltip/Tooltip.themes.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tooltip.themes.cjs","names":[],"sources":["../../../components/Tooltip/Tooltip.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n tooltipContentBg: Property.Color;\n tooltipText: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = () => ({\n tooltipContentBg: '$primary',\n tooltipText: 'white',\n });\n\n export const getDark: Factory = () => ({\n tooltipContentBg: '$primary',\n tooltipText: '$deepBlue2',\n });\n}\n"],"mappings":";AAIO,IAAA;;CAQQ,OAAA,kBAA2B;EACtC,kBAAkB;EAClB,aAAa;CACf;CAEa,OAAA,iBAA0B;EACrC,kBAAkB;EAClB,aAAa;CACf;~~wBACF~~"}
1	+ {"version":3,"file":"Tooltip.themes.cjs","names":[],"sources":["../../../components/Tooltip/Tooltip.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n tooltipContentBg: Property.Color;\n tooltipText: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = () => ({\n tooltipContentBg: '$primary',\n tooltipText: 'white',\n });\n\n export const getDark: Factory = () => ({\n tooltipContentBg: '$primary',\n tooltipText: '$deepBlue2',\n });\n}\n"],"mappings":";AAIO,IAAA;;CAQQ,OAAA,kBAA2B;EACtC,kBAAkB;EAClB,aAAa;CACf;CAEa,OAAA,iBAA0B;EACrC,kBAAkB;EAClB,aAAa;CACf;GACD,UAAA,QAAA,CAAA,EAAD"}

package/dist/components/Tooltip/Tooltip.themes.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tooltip.themes.js","names":[],"sources":["../../../components/Tooltip/Tooltip.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n tooltipContentBg: Property.Color;\n tooltipText: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = () => ({\n tooltipContentBg: '$primary',\n tooltipText: 'white',\n });\n\n export const getDark: Factory = () => ({\n tooltipContentBg: '$primary',\n tooltipText: '$deepBlue2',\n });\n}\n"],"mappings":";AAIO,IAAA;;CAQQ,OAAA,kBAA2B;EACtC,kBAAkB;EAClB,aAAa;CACf;CAEa,OAAA,iBAA0B;EACrC,kBAAkB;EAClB,aAAa;CACf;~~wBACF~~"}
1	+ {"version":3,"file":"Tooltip.themes.js","names":[],"sources":["../../../components/Tooltip/Tooltip.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n tooltipContentBg: Property.Color;\n tooltipText: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = () => ({\n tooltipContentBg: '$primary',\n tooltipText: 'white',\n });\n\n export const getDark: Factory = () => ({\n tooltipContentBg: '$primary',\n tooltipText: '$deepBlue2',\n });\n}\n"],"mappings":";AAIO,IAAA;;CAQQ,OAAA,kBAA2B;EACtC,kBAAkB;EAClB,aAAa;CACf;CAEa,OAAA,iBAA0B;EACrC,kBAAkB;EAClB,aAAa;CACf;GACD,UAAA,QAAA,CAAA,EAAD"}

package/dist/components/colorSchemeContext.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"colorSchemeContext.cjs","names":[],"sources":["../../components/colorSchemeContext.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useState } from 'react';\n\nexport type ColorScheme = 'light' \| 'dark';\n\nfunction readDocumentTheme(): ColorScheme \| null {\n const el = document.documentElement;\n if (el.classList.contains('dark')) return 'dark';\n if (el.classList.contains('light')) return 'light';\n const attr = el.dataset.theme;\n if (attr === 'dark' \|\| attr === 'light') return attr;\n return null;\n}\n\nconst ColorSchemeContext = createContext<ColorScheme>('light');\n\nexport function ColorSchemeProvider({ children }: { children: React.ReactNode }) {\n const [scheme, setScheme] = useState<ColorScheme>(() => {\n if (typeof window === 'undefined') return 'light';\n return (\n readDocumentTheme() ??\n (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')\n );\n });\n\n useEffect(() => {\n const observer = new MutationObserver(() => {\n const docTheme = readDocumentTheme();\n if (docTheme) setScheme(docTheme);\n });\n observer.observe(document.documentElement, {\n attributes: true,\n attributeFilter: ['class', 'data-theme'],\n });\n\n const mq = window.matchMedia('(prefers-color-scheme: dark)');\n const mqHandler = (e: MediaQueryListEvent) => {\n if (!readDocumentTheme()) setScheme(e.matches ? 'dark' : 'light');\n };\n mq.addEventListener('change', mqHandler);\n\n return () => {\n observer.disconnect();\n mq.removeEventListener('change', mqHandler);\n };\n }, []);\n\n return <ColorSchemeContext.Provider value={scheme}>{children}</ColorSchemeContext.Provider>;\n}\n\nexport function useColorScheme(): ColorScheme {\n return useContext(ColorSchemeContext);\n}\n"],"mappings":";;;;;AAIA,SAAS,oBAAwC;CAC/C,MAAM,KAAK,SAAS;CACpB,IAAI,GAAG,UAAU,SAAS,MAAM,GAAG,OAAO;CAC1C,IAAI,GAAG,UAAU,SAAS,OAAO,GAAG,OAAO;CAC3C,MAAM,OAAO,GAAG,QAAQ;CACxB,IAAI,SAAS,UAAU,SAAS,SAAS,OAAO;CAChD,OAAO;AACT;AAEA,IAAM,sBAAA,GAAA,MAAA,~~eAAgD~~,OAAO;AAE7D,SAAgB,oBAAoB,EAAE,YAA2C;CAC/E,MAAM,CAAC,QAAQ,cAAA,GAAA,MAAA,~~gBAAyC~~;EACtD,IAAI,OAAO,WAAW,aAAa,OAAO;EAC1C,OACE,kBAAkB,MACjB,OAAO,WAAW,8BAA8B,~~EAAE~~,UAAU,SAAS;CAE1E,CAAC;CAED,CAAA,GAAA,MAAA,~~iBAAgB~~;EACd,MAAM,WAAW,IAAI,uBAAuB;GAC1C,MAAM,WAAW,kBAAkB;GACnC,IAAI,UAAU,UAAU,QAAQ;EAClC,CAAC;EACD,SAAS,QAAQ,SAAS,iBAAiB;GACzC,YAAY;GACZ,iBAAiB,CAAC,SAAS,YAAY;EACzC,CAAC;EAED,MAAM,KAAK,OAAO,WAAW,8BAA8B;EAC3D,MAAM,aAAa,MAA2B;GAC5C,IAAI,CAAC,kBAAkB,GAAG,UAAU,EAAE,UAAU,SAAS,OAAO;EAClE;EACA,GAAG,iBAAiB,UAAU,SAAS;EAEvC,aAAa;GACX,SAAS,WAAW;GACpB,GAAG,oBAAoB,UAAU,SAAS;EAC5C;CACF,GAAG,CAAC,CAAC;CAEL,OAAO,iBAAA,GAAA,kBAAA,~~KAAC~~,mBAAmB,UAApB;EAA6B,OAAO;EAAS;CAAsC,CAAA;AAC5F;AAEA,SAAgB,iBAA8B;CAC5C,QAAA,GAAA,MAAA,~~YAAkB~~,kBAAkB;AACtC"}
1	+ {"version":3,"file":"colorSchemeContext.cjs","names":[],"sources":["../../components/colorSchemeContext.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useState } from 'react';\n\nexport type ColorScheme = 'light' \| 'dark';\n\nfunction readDocumentTheme(): ColorScheme \| null {\n const el = document.documentElement;\n if (el.classList.contains('dark')) return 'dark';\n if (el.classList.contains('light')) return 'light';\n const attr = el.dataset.theme;\n if (attr === 'dark' \|\| attr === 'light') return attr;\n return null;\n}\n\nconst ColorSchemeContext = createContext<ColorScheme>('light');\n\nexport function ColorSchemeProvider({ children }: { children: React.ReactNode }) {\n const [scheme, setScheme] = useState<ColorScheme>(() => {\n if (typeof window === 'undefined') return 'light';\n return (\n readDocumentTheme() ??\n (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')\n );\n });\n\n useEffect(() => {\n const observer = new MutationObserver(() => {\n const docTheme = readDocumentTheme();\n if (docTheme) setScheme(docTheme);\n });\n observer.observe(document.documentElement, {\n attributes: true,\n attributeFilter: ['class', 'data-theme'],\n });\n\n const mq = window.matchMedia('(prefers-color-scheme: dark)');\n const mqHandler = (e: MediaQueryListEvent) => {\n if (!readDocumentTheme()) setScheme(e.matches ? 'dark' : 'light');\n };\n mq.addEventListener('change', mqHandler);\n\n return () => {\n observer.disconnect();\n mq.removeEventListener('change', mqHandler);\n };\n }, []);\n\n return <ColorSchemeContext.Provider value={scheme}>{children}</ColorSchemeContext.Provider>;\n}\n\nexport function useColorScheme(): ColorScheme {\n return useContext(ColorSchemeContext);\n}\n"],"mappings":";;;;;AAIA,SAAS,oBAAwC;CAC/C,MAAM,KAAK,SAAS;CACpB,IAAI,GAAG,UAAU,SAAS,MAAM,GAAG,OAAO;CAC1C,IAAI,GAAG,UAAU,SAAS,OAAO,GAAG,OAAO;CAC3C,MAAM,OAAO,GAAG,QAAQ;CACxB,IAAI,SAAS,UAAU,SAAS,SAAS,OAAO;CAChD,OAAO;AACT;AAEA,IAAM,sBAAA,GAAA,MAAA,cAAA,CAAgD,OAAO;AAE7D,SAAgB,oBAAoB,EAAE,YAA2C;CAC/E,MAAM,CAAC,QAAQ,cAAA,GAAA,MAAA,SAAA,OAAyC;EACtD,IAAI,OAAO,WAAW,aAAa,OAAO;EAC1C,OACE,kBAAkB,MACjB,OAAO,WAAW,8BAA8B,CAAC,CAAC,UAAU,SAAS;CAE1E,CAAC;CAED,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,MAAM,WAAW,IAAI,uBAAuB;GAC1C,MAAM,WAAW,kBAAkB;GACnC,IAAI,UAAU,UAAU,QAAQ;EAClC,CAAC;EACD,SAAS,QAAQ,SAAS,iBAAiB;GACzC,YAAY;GACZ,iBAAiB,CAAC,SAAS,YAAY;EACzC,CAAC;EAED,MAAM,KAAK,OAAO,WAAW,8BAA8B;EAC3D,MAAM,aAAa,MAA2B;GAC5C,IAAI,CAAC,kBAAkB,GAAG,UAAU,EAAE,UAAU,SAAS,OAAO;EAClE;EACA,GAAG,iBAAiB,UAAU,SAAS;EAEvC,aAAa;GACX,SAAS,WAAW;GACpB,GAAG,oBAAoB,UAAU,SAAS;EAC5C;CACF,GAAG,CAAC,CAAC;CAEL,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,mBAAmB,UAApB;EAA6B,OAAO;EAAS;CAAsC,CAAA;AAC5F;AAEA,SAAgB,iBAA8B;CAC5C,QAAA,GAAA,MAAA,WAAA,CAAkB,kBAAkB;AACtC"}

package/dist/components/colorSchemeContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"colorSchemeContext.js","names":[],"sources":["../../components/colorSchemeContext.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useState } from 'react';\n\nexport type ColorScheme = 'light' \| 'dark';\n\nfunction readDocumentTheme(): ColorScheme \| null {\n const el = document.documentElement;\n if (el.classList.contains('dark')) return 'dark';\n if (el.classList.contains('light')) return 'light';\n const attr = el.dataset.theme;\n if (attr === 'dark' \|\| attr === 'light') return attr;\n return null;\n}\n\nconst ColorSchemeContext = createContext<ColorScheme>('light');\n\nexport function ColorSchemeProvider({ children }: { children: React.ReactNode }) {\n const [scheme, setScheme] = useState<ColorScheme>(() => {\n if (typeof window === 'undefined') return 'light';\n return (\n readDocumentTheme() ??\n (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')\n );\n });\n\n useEffect(() => {\n const observer = new MutationObserver(() => {\n const docTheme = readDocumentTheme();\n if (docTheme) setScheme(docTheme);\n });\n observer.observe(document.documentElement, {\n attributes: true,\n attributeFilter: ['class', 'data-theme'],\n });\n\n const mq = window.matchMedia('(prefers-color-scheme: dark)');\n const mqHandler = (e: MediaQueryListEvent) => {\n if (!readDocumentTheme()) setScheme(e.matches ? 'dark' : 'light');\n };\n mq.addEventListener('change', mqHandler);\n\n return () => {\n observer.disconnect();\n mq.removeEventListener('change', mqHandler);\n };\n }, []);\n\n return <ColorSchemeContext.Provider value={scheme}>{children}</ColorSchemeContext.Provider>;\n}\n\nexport function useColorScheme(): ColorScheme {\n return useContext(ColorSchemeContext);\n}\n"],"mappings":";;;AAIA,SAAS,oBAAwC;CAC/C,MAAM,KAAK,SAAS;CACpB,IAAI,GAAG,UAAU,SAAS,MAAM,GAAG,OAAO;CAC1C,IAAI,GAAG,UAAU,SAAS,OAAO,GAAG,OAAO;CAC3C,MAAM,OAAO,GAAG,QAAQ;CACxB,IAAI,SAAS,UAAU,SAAS,SAAS,OAAO;CAChD,OAAO;AACT;AAEA,IAAM,qBAAqB,cAA2B,OAAO;AAE7D,SAAgB,oBAAoB,EAAE,YAA2C;CAC/E,MAAM,CAAC,QAAQ,aAAa,eAA4B;EACtD,IAAI,OAAO,WAAW,aAAa,OAAO;EAC1C,OACE,kBAAkB,MACjB,OAAO,WAAW,8BAA8B,~~EAAE~~,UAAU,SAAS;CAE1E,CAAC;CAED,gBAAgB;EACd,MAAM,WAAW,IAAI,uBAAuB;GAC1C,MAAM,WAAW,kBAAkB;GACnC,IAAI,UAAU,UAAU,QAAQ;EAClC,CAAC;EACD,SAAS,QAAQ,SAAS,iBAAiB;GACzC,YAAY;GACZ,iBAAiB,CAAC,SAAS,YAAY;EACzC,CAAC;EAED,MAAM,KAAK,OAAO,WAAW,8BAA8B;EAC3D,MAAM,aAAa,MAA2B;GAC5C,IAAI,CAAC,kBAAkB,GAAG,UAAU,EAAE,UAAU,SAAS,OAAO;EAClE;EACA,GAAG,iBAAiB,UAAU,SAAS;EAEvC,aAAa;GACX,SAAS,WAAW;GACpB,GAAG,oBAAoB,UAAU,SAAS;EAC5C;CACF,GAAG,CAAC,CAAC;CAEL,OAAO,oBAAC,mBAAmB,UAApB;EAA6B,OAAO;EAAS;CAAsC,CAAA;AAC5F;AAEA,SAAgB,iBAA8B;CAC5C,OAAO,WAAW,kBAAkB;AACtC"}
1	+ {"version":3,"file":"colorSchemeContext.js","names":[],"sources":["../../components/colorSchemeContext.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useState } from 'react';\n\nexport type ColorScheme = 'light' \| 'dark';\n\nfunction readDocumentTheme(): ColorScheme \| null {\n const el = document.documentElement;\n if (el.classList.contains('dark')) return 'dark';\n if (el.classList.contains('light')) return 'light';\n const attr = el.dataset.theme;\n if (attr === 'dark' \|\| attr === 'light') return attr;\n return null;\n}\n\nconst ColorSchemeContext = createContext<ColorScheme>('light');\n\nexport function ColorSchemeProvider({ children }: { children: React.ReactNode }) {\n const [scheme, setScheme] = useState<ColorScheme>(() => {\n if (typeof window === 'undefined') return 'light';\n return (\n readDocumentTheme() ??\n (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')\n );\n });\n\n useEffect(() => {\n const observer = new MutationObserver(() => {\n const docTheme = readDocumentTheme();\n if (docTheme) setScheme(docTheme);\n });\n observer.observe(document.documentElement, {\n attributes: true,\n attributeFilter: ['class', 'data-theme'],\n });\n\n const mq = window.matchMedia('(prefers-color-scheme: dark)');\n const mqHandler = (e: MediaQueryListEvent) => {\n if (!readDocumentTheme()) setScheme(e.matches ? 'dark' : 'light');\n };\n mq.addEventListener('change', mqHandler);\n\n return () => {\n observer.disconnect();\n mq.removeEventListener('change', mqHandler);\n };\n }, []);\n\n return <ColorSchemeContext.Provider value={scheme}>{children}</ColorSchemeContext.Provider>;\n}\n\nexport function useColorScheme(): ColorScheme {\n return useContext(ColorSchemeContext);\n}\n"],"mappings":";;;AAIA,SAAS,oBAAwC;CAC/C,MAAM,KAAK,SAAS;CACpB,IAAI,GAAG,UAAU,SAAS,MAAM,GAAG,OAAO;CAC1C,IAAI,GAAG,UAAU,SAAS,OAAO,GAAG,OAAO;CAC3C,MAAM,OAAO,GAAG,QAAQ;CACxB,IAAI,SAAS,UAAU,SAAS,SAAS,OAAO;CAChD,OAAO;AACT;AAEA,IAAM,qBAAqB,cAA2B,OAAO;AAE7D,SAAgB,oBAAoB,EAAE,YAA2C;CAC/E,MAAM,CAAC,QAAQ,aAAa,eAA4B;EACtD,IAAI,OAAO,WAAW,aAAa,OAAO;EAC1C,OACE,kBAAkB,MACjB,OAAO,WAAW,8BAA8B,CAAC,CAAC,UAAU,SAAS;CAE1E,CAAC;CAED,gBAAgB;EACd,MAAM,WAAW,IAAI,uBAAuB;GAC1C,MAAM,WAAW,kBAAkB;GACnC,IAAI,UAAU,UAAU,QAAQ;EAClC,CAAC;EACD,SAAS,QAAQ,SAAS,iBAAiB;GACzC,YAAY;GACZ,iBAAiB,CAAC,SAAS,YAAY;EACzC,CAAC;EAED,MAAM,KAAK,OAAO,WAAW,8BAA8B;EAC3D,MAAM,aAAa,MAA2B;GAC5C,IAAI,CAAC,kBAAkB,GAAG,UAAU,EAAE,UAAU,SAAS,OAAO;EAClE;EACA,GAAG,iBAAiB,UAAU,SAAS;EAEvC,aAAa;GACX,SAAS,WAAW;GACpB,GAAG,oBAAoB,UAAU,SAAS;EAC5C;CACF,GAAG,CAAC,CAAC;CAEL,OAAO,oBAAC,mBAAmB,UAApB;EAA6B,OAAO;EAAS;CAAsC,CAAA;AAC5F;AAEA,SAAgB,iBAA8B;CAC5C,OAAO,WAAW,kBAAkB;AACtC"}