npm - @traefik-labs/faency - Versions diffs - 12.3.9 → 13.0.0 - Mend

@traefik-labs/faency 12.3.9 → 13.0.0

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 (501) hide show

package/dist/components/Input/Input.themes.cjs CHANGED Viewed

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.themes.cjs","names":[],"sources":["../../../components/Input/Input.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 inputBg: Property.Color;\n inputBorder: Property.Color;\n inputFocusBg: Property.Color;\n inputFocusBorder: Property.Color;\n inputHoverBg: Property.Color;\n inputText: Property.Color;\n inputPlaceholder: Property.Color;\n inputDisabledText: Property.Color;\n inputInvalidBorder: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n inputBg: '$deepBlue1',\n inputBorder: '$grayBlue9',\n inputFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n inputFocusBorder: primaryColor.helpers.pickScale(8),\n inputHoverBg: '$whiteA9',\n inputText: tinycolor('black').setAlpha(0.74).toHslString(),\n inputPlaceholder: '$blackA10',\n inputDisabledText: tinycolor('black').setAlpha(0.35).toHslString(),\n inputInvalidBorder: '$red9',\n });\n\n export const getDark: Factory = (primaryColor) => ({\n inputBg: '$grayBlue7',\n inputBorder: '$grayBlue9',\n inputFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n inputFocusBorder: primaryColor.helpers.pickScale(11),\n inputHoverBg: '$whiteA4',\n inputText: tinycolor('white').setAlpha(0.8).toHslString(),\n inputPlaceholder: '$whiteA10',\n inputDisabledText: tinycolor('white').setAlpha(0.35).toHslString(),\n inputInvalidBorder: '$red9',\n });\n}\n"],"mappings":";;;;AAKO,~~IAAA;;~~CAeQ,OAAA,YAAqB,kBAAkB;EAClD,SAAS;EACT,aAAa;EACb,eAAA,~~GAAA~~,~~WAAA~~,~~QAAA~~,~~CAAwB~~,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAC5D,kBAAkB,aAAa,QAAQ,UAAU,CAAC;EAClD,cAAc;EACd,YAAA,~~GAAA~~,~~WAAA~~,~~QAAA~~,~~CAAqB~~,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EACzD,kBAAkB;EAClB,oBAAA,~~GAAA~~,~~WAAA~~,~~QAAA~~,~~CAA6B~~,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EACjE,oBAAoB;CACtB;CAEa,OAAA,WAAoB,kBAAkB;EACjD,SAAS;EACT,aAAa;EACb,eAAA,~~GAAA~~,~~WAAA~~,~~QAAA~~,~~CAAwB~~,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAC5D,kBAAkB,aAAa,QAAQ,UAAU,EAAE;EACnD,cAAc;EACd,YAAA,~~GAAA~~,~~WAAA~~,~~QAAA~~,~~CAAqB~~,OAAO,CAAC,CAAC,SAAS,EAAG,CAAC,CAAC,YAAY;EACxD,kBAAkB;EAClB,oBAAA,~~GAAA~~,~~WAAA~~,~~QAAA~~,~~CAA6B~~,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EACjE,oBAAoB;CACtB;~~GACD~~,UAAA,QAAA,CAAA,EAAD"}
1	+ {"version":3,"file":"Input.themes.cjs","names":["tinycolor"],"sources":["../../../components/Input/Input.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 inputBg: Property.Color;\n inputBorder: Property.Color;\n inputFocusBg: Property.Color;\n inputFocusBorder: Property.Color;\n inputHoverBg: Property.Color;\n inputText: Property.Color;\n inputPlaceholder: Property.Color;\n inputDisabledText: Property.Color;\n inputInvalidBorder: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n inputBg: '$deepBlue1',\n inputBorder: '$grayBlue9',\n inputFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n inputFocusBorder: primaryColor.helpers.pickScale(8),\n inputHoverBg: '$whiteA9',\n inputText: tinycolor('black').setAlpha(0.74).toHslString(),\n inputPlaceholder: '$blackA10',\n inputDisabledText: tinycolor('black').setAlpha(0.35).toHslString(),\n inputInvalidBorder: '$red9',\n });\n\n export const getDark: Factory = (primaryColor) => ({\n inputBg: '$grayBlue7',\n inputBorder: '$grayBlue9',\n inputFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n inputFocusBorder: primaryColor.helpers.pickScale(11),\n inputHoverBg: '$whiteA4',\n inputText: tinycolor('white').setAlpha(0.8).toHslString(),\n inputPlaceholder: '$whiteA10',\n inputDisabledText: tinycolor('white').setAlpha(0.35).toHslString(),\n inputInvalidBorder: '$red9',\n });\n}\n"],"mappings":";;;;AAKO,IAAU;CAAV,SAAA,QAAA;CAeQ,OAAA,YAAqB,kBAAkB;EAClD,SAAS;EACT,aAAa;EACb,eAAA,GAAcA,WAAAA,QAAAA,CAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAC5D,kBAAkB,aAAa,QAAQ,UAAU,CAAC;EAClD,cAAc;EACd,YAAA,GAAWA,WAAAA,QAAAA,CAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EACzD,kBAAkB;EAClB,oBAAA,GAAmBA,WAAAA,QAAAA,CAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EACjE,oBAAoB;CACtB;CAEa,OAAA,WAAoB,kBAAkB;EACjD,SAAS;EACT,aAAa;EACb,eAAA,GAAcA,WAAAA,QAAAA,CAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAC5D,kBAAkB,aAAa,QAAQ,UAAU,EAAE;EACnD,cAAc;EACd,YAAA,GAAWA,WAAAA,QAAAA,CAAU,OAAO,CAAC,CAAC,SAAS,EAAG,CAAC,CAAC,YAAY;EACxD,kBAAkB;EAClB,oBAAA,GAAmBA,WAAAA,QAAAA,CAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EACjE,oBAAoB;CACtB;AACD,EAAA,CAAA,UAAA,QAAA,CAAA,EAAD"}

package/dist/components/Input/Input.themes.js CHANGED Viewed

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.themes.js","names":[],"sources":["../../../components/Input/Input.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 inputBg: Property.Color;\n inputBorder: Property.Color;\n inputFocusBg: Property.Color;\n inputFocusBorder: Property.Color;\n inputHoverBg: Property.Color;\n inputText: Property.Color;\n inputPlaceholder: Property.Color;\n inputDisabledText: Property.Color;\n inputInvalidBorder: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n inputBg: '$deepBlue1',\n inputBorder: '$grayBlue9',\n inputFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n inputFocusBorder: primaryColor.helpers.pickScale(8),\n inputHoverBg: '$whiteA9',\n inputText: tinycolor('black').setAlpha(0.74).toHslString(),\n inputPlaceholder: '$blackA10',\n inputDisabledText: tinycolor('black').setAlpha(0.35).toHslString(),\n inputInvalidBorder: '$red9',\n });\n\n export const getDark: Factory = (primaryColor) => ({\n inputBg: '$grayBlue7',\n inputBorder: '$grayBlue9',\n inputFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n inputFocusBorder: primaryColor.helpers.pickScale(11),\n inputHoverBg: '$whiteA4',\n inputText: tinycolor('white').setAlpha(0.8).toHslString(),\n inputPlaceholder: '$whiteA10',\n inputDisabledText: tinycolor('white').setAlpha(0.35).toHslString(),\n inputInvalidBorder: '$red9',\n });\n}\n"],"mappings":";;AAKO,~~IAAA;;~~CAeQ,OAAA,YAAqB,kBAAkB;EAClD,SAAS;EACT,aAAa;EACb,cAAc,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAC5D,kBAAkB,aAAa,QAAQ,UAAU,CAAC;EAClD,cAAc;EACd,WAAW,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EACzD,kBAAkB;EAClB,mBAAmB,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EACjE,oBAAoB;CACtB;CAEa,OAAA,WAAoB,kBAAkB;EACjD,SAAS;EACT,aAAa;EACb,cAAc,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAC5D,kBAAkB,aAAa,QAAQ,UAAU,EAAE;EACnD,cAAc;EACd,WAAW,UAAU,OAAO,CAAC,CAAC,SAAS,EAAG,CAAC,CAAC,YAAY;EACxD,kBAAkB;EAClB,mBAAmB,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EACjE,oBAAoB;CACtB;~~GACD~~,UAAA,QAAA,CAAA,EAAD"}
1	+ {"version":3,"file":"Input.themes.js","names":[],"sources":["../../../components/Input/Input.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 inputBg: Property.Color;\n inputBorder: Property.Color;\n inputFocusBg: Property.Color;\n inputFocusBorder: Property.Color;\n inputHoverBg: Property.Color;\n inputText: Property.Color;\n inputPlaceholder: Property.Color;\n inputDisabledText: Property.Color;\n inputInvalidBorder: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n inputBg: '$deepBlue1',\n inputBorder: '$grayBlue9',\n inputFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n inputFocusBorder: primaryColor.helpers.pickScale(8),\n inputHoverBg: '$whiteA9',\n inputText: tinycolor('black').setAlpha(0.74).toHslString(),\n inputPlaceholder: '$blackA10',\n inputDisabledText: tinycolor('black').setAlpha(0.35).toHslString(),\n inputInvalidBorder: '$red9',\n });\n\n export const getDark: Factory = (primaryColor) => ({\n inputBg: '$grayBlue7',\n inputBorder: '$grayBlue9',\n inputFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n inputFocusBorder: primaryColor.helpers.pickScale(11),\n inputHoverBg: '$whiteA4',\n inputText: tinycolor('white').setAlpha(0.8).toHslString(),\n inputPlaceholder: '$whiteA10',\n inputDisabledText: tinycolor('white').setAlpha(0.35).toHslString(),\n inputInvalidBorder: '$red9',\n });\n}\n"],"mappings":";;AAKO,IAAU;CAAV,SAAA,QAAA;CAeQ,OAAA,YAAqB,kBAAkB;EAClD,SAAS;EACT,aAAa;EACb,cAAc,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAC5D,kBAAkB,aAAa,QAAQ,UAAU,CAAC;EAClD,cAAc;EACd,WAAW,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EACzD,kBAAkB;EAClB,mBAAmB,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EACjE,oBAAoB;CACtB;CAEa,OAAA,WAAoB,kBAAkB;EACjD,SAAS;EACT,aAAa;EACb,cAAc,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAC5D,kBAAkB,aAAa,QAAQ,UAAU,EAAE;EACnD,cAAc;EACd,WAAW,UAAU,OAAO,CAAC,CAAC,SAAS,EAAG,CAAC,CAAC,YAAY;EACxD,kBAAkB;EAClB,mBAAmB,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EACjE,oBAAoB;CACtB;AACD,EAAA,CAAA,UAAA,QAAA,CAAA,EAAD"}

package/dist/components/Input/Input.vanilla.cjs CHANGED Viewed

@@ -6,7 +6,7 @@ let react = require("react");
 react = require_runtime.__toESM(react, 1);
 let _vanilla_extract_dynamic = require("@vanilla-extract/dynamic");
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region components/Input/Input.vanilla.tsx
+// components/Input/Input.vanilla.tsx
 var InputVanilla = react.default.forwardRef(({ size, startAdornment, endAdornment, css, variant, state, cursor, className, style, ...props }, forwardedRef) => {
 	const inputRef = react.default.useRef(null);
 	const { colors } = require_themeContext.useVanillaExtractTheme();
@@ -67,7 +67,6 @@ var InputVanilla = react.default.forwardRef(({ size, startAdornment, endAdornmen
 	});
 });
 InputVanilla.displayName = "InputVanilla";
-//#endregion
 exports.InputVanilla = InputVanilla;
 //# sourceMappingURL=Input.vanilla.cjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.vanilla.cjs","names":[],"sources":["../../../components/Input/Input.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 { adornmentWrapperRecipe, inputWrapperRecipe, styledInputRecipe } from './Input.vanilla.css';\n\ntype StyledInputRecipeVariants = NonNullable<RecipeVariants<typeof styledInputRecipe>>;\n\nexport interface InputVanillaOwnProps extends CSSProps {\n size?: StyledInputRecipeVariants['size'];\n variant?: StyledInputRecipeVariants['variant'];\n state?: StyledInputRecipeVariants['state'];\n cursor?: StyledInputRecipeVariants['cursor'];\n startAdornment?: React.ReactNode;\n endAdornment?: React.ReactNode;\n type?: string;\n}\n\nexport type InputVanillaProps = Omit<React.InputHTMLAttributes<any>, 'size'> & InputVanillaOwnProps;\n\nexport interface InputVanillaHandle extends HTMLInputElement {\n clear: () => void;\n}\n\nexport const InputVanilla = React.forwardRef<InputVanillaHandle, InputVanillaProps>(\n (\n { size, startAdornment, endAdornment, css, variant, state, cursor, className, style, ...props },\n forwardedRef,\n ) => {\n const inputRef = React.useRef<InputVanillaHandle>(null);\n const { colors } = useVanillaExtractTheme();\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n const mergedStyles = { ...cssStyles, ...style, ...assignInlineVars(vars) };\n\n React.useImperativeHandle(forwardedRef, () => {\n const { current } = inputRef;\n if (current) {\n current.clear = () => {\n current.value = '';\n };\n }\n return current as InputVanillaHandle;\n }, [inputRef]);\n\n const hasStartAdornment = React.useMemo(() => Boolean(startAdornment), [startAdornment]);\n const hasEndAdornment = React.useMemo(() => Boolean(endAdornment), [endAdornment]);\n\n const inputWrapperClass = inputWrapperRecipe({\n disabled: props.disabled,\n state,\n size,\n });\n\n const styledInputClass = styledInputRecipe({\n size,\n variant,\n state,\n cursor,\n startAdornment: hasStartAdornment,\n endAdornment: hasEndAdornment,\n });\n\n const adornmentWrapperStartClass = adornmentWrapperRecipe({\n size,\n variant: 'start',\n });\n\n const adornmentWrapperEndClass = adornmentWrapperRecipe({\n size,\n variant: 'end',\n });\n\n return (\n <div className={`${inputWrapperClass} ${className \|\| ''}`.trim()} style={mergedStyles}>\n {hasStartAdornment && <div className={adornmentWrapperStartClass}>{startAdornment}</div>}\n\n <input ref={inputRef} className={styledInputClass} {...props} />\n\n {hasEndAdornment && <div className={adornmentWrapperEndClass}>{endAdornment}</div>}\n </div>\n );\n },\n);\n\nInputVanilla.displayName = 'InputVanilla';\n"],"mappings":";;;;;;;;;AA0BA,IAAa,~~eAAe~~,~~MAAA~~,QAAM,YAE9B,EAAE,MAAM,gBAAgB,cAAc,KAAK,SAAS,OAAO,QAAQ,WAAW,OAAO,GAAG,SACxF,iBACG;CACH,MAAM,~~WAAW~~,~~MAAA~~,QAAM,OAA2B,IAAI;CACtD,MAAM,EAAE,~~WAAW~~,~~qBAAA~~,uBAAuB;CAC1C,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,MAAA,QAAM,oBAAoB,oBAAoB;EAC5C,MAAM,EAAE,YAAY;EACpB,IAAI,SACF,QAAQ,cAAc;GACpB,QAAQ,QAAQ;EAClB;EAEF,OAAO;CACT,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,~~oBAAoB~~,~~MAAA~~,QAAM,cAAc,QAAQ,cAAc,GAAG,CAAC,cAAc,CAAC;CACvF,MAAM,~~kBAAkB~~,~~MAAA~~,QAAM,cAAc,QAAQ,YAAY,GAAG,CAAC,YAAY,CAAC;CAEjF,MAAM,~~oBAAoB~~,~~0BAAA~~,mBAAmB;EAC3C,UAAU,MAAM;EAChB;EACA;CACF,CAAC;CAED,MAAM,~~mBAAmB~~,~~0BAAA~~,kBAAkB;EACzC;EACA;EACA;EACA;EACA,gBAAgB;EAChB,cAAc;CAChB,CAAC;CAED,MAAM,~~6BAA6B~~,~~0BAAA~~,uBAAuB;EACxD;EACA,SAAS;CACX,CAAC;CAED,MAAM,~~2BAA2B~~,~~0BAAA~~,uBAAuB;EACtD;EACA,SAAS;CACX,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAW,GAAG,kBAAkB,GAAG,aAAa,KAAK,KAAK;EAAG,OAAO;~~YAAzE~~;GACG,qBAAqB,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,WAAW;~~cAA6B~~;GAAoB,CAAA;GAEvF,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;IAAO,KAAK;IAAU,WAAW;IAAkB,GAAI;GAAQ,CAAA;GAE9D,mBAAmB,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,WAAW;~~cAA2B~~;GAAkB,CAAA;EAC9E;;AAET,CACF;AAEA,aAAa,cAAc"}
1	+ {"version":3,"file":"Input.vanilla.cjs","names":["React","useVanillaExtractTheme","processCSSProp","assignInlineVars","inputWrapperRecipe","styledInputRecipe","adornmentWrapperRecipe"],"sources":["../../../components/Input/Input.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 { adornmentWrapperRecipe, inputWrapperRecipe, styledInputRecipe } from './Input.vanilla.css';\n\ntype StyledInputRecipeVariants = NonNullable<RecipeVariants<typeof styledInputRecipe>>;\n\nexport interface InputVanillaOwnProps extends CSSProps {\n size?: StyledInputRecipeVariants['size'];\n variant?: StyledInputRecipeVariants['variant'];\n state?: StyledInputRecipeVariants['state'];\n cursor?: StyledInputRecipeVariants['cursor'];\n startAdornment?: React.ReactNode;\n endAdornment?: React.ReactNode;\n type?: string;\n}\n\nexport type InputVanillaProps = Omit<React.InputHTMLAttributes<any>, 'size'> & InputVanillaOwnProps;\n\nexport interface InputVanillaHandle extends HTMLInputElement {\n clear: () => void;\n}\n\nexport const InputVanilla = React.forwardRef<InputVanillaHandle, InputVanillaProps>(\n (\n { size, startAdornment, endAdornment, css, variant, state, cursor, className, style, ...props },\n forwardedRef,\n ) => {\n const inputRef = React.useRef<InputVanillaHandle>(null);\n const { colors } = useVanillaExtractTheme();\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n const mergedStyles = { ...cssStyles, ...style, ...assignInlineVars(vars) };\n\n React.useImperativeHandle(forwardedRef, () => {\n const { current } = inputRef;\n if (current) {\n current.clear = () => {\n current.value = '';\n };\n }\n return current as InputVanillaHandle;\n }, [inputRef]);\n\n const hasStartAdornment = React.useMemo(() => Boolean(startAdornment), [startAdornment]);\n const hasEndAdornment = React.useMemo(() => Boolean(endAdornment), [endAdornment]);\n\n const inputWrapperClass = inputWrapperRecipe({\n disabled: props.disabled,\n state,\n size,\n });\n\n const styledInputClass = styledInputRecipe({\n size,\n variant,\n state,\n cursor,\n startAdornment: hasStartAdornment,\n endAdornment: hasEndAdornment,\n });\n\n const adornmentWrapperStartClass = adornmentWrapperRecipe({\n size,\n variant: 'start',\n });\n\n const adornmentWrapperEndClass = adornmentWrapperRecipe({\n size,\n variant: 'end',\n });\n\n return (\n <div className={`${inputWrapperClass} ${className \|\| ''}`.trim()} style={mergedStyles}>\n {hasStartAdornment && <div className={adornmentWrapperStartClass}>{startAdornment}</div>}\n\n <input ref={inputRef} className={styledInputClass} {...props} />\n\n {hasEndAdornment && <div className={adornmentWrapperEndClass}>{endAdornment}</div>}\n </div>\n );\n },\n);\n\nInputVanilla.displayName = 'InputVanilla';\n"],"mappings":";;;;;;;;;AA0BA,IAAa,eAAeA,MAAAA,QAAM,YAE9B,EAAE,MAAM,gBAAgB,cAAc,KAAK,SAAS,OAAO,QAAQ,WAAW,OAAO,GAAG,SACxF,iBACG;CACH,MAAM,WAAWA,MAAAA,QAAM,OAA2B,IAAI;CACtD,MAAM,EAAE,WAAWC,qBAAAA,uBAAuB;CAC1C,MAAM,EAAE,OAAO,WAAW,SAASC,iBAAAA,eAAe,KAAK,MAAM;CAC7D,MAAM,eAAe;EAAE,GAAG;EAAW,GAAG;EAAO,IAAA,GAAGC,yBAAAA,iBAAAA,CAAiB,IAAI;CAAE;CAEzE,MAAA,QAAM,oBAAoB,oBAAoB;EAC5C,MAAM,EAAE,YAAY;EACpB,IAAI,SACF,QAAQ,cAAc;GACpB,QAAQ,QAAQ;EAClB;EAEF,OAAO;CACT,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,oBAAoBH,MAAAA,QAAM,cAAc,QAAQ,cAAc,GAAG,CAAC,cAAc,CAAC;CACvF,MAAM,kBAAkBA,MAAAA,QAAM,cAAc,QAAQ,YAAY,GAAG,CAAC,YAAY,CAAC;CAEjF,MAAM,oBAAoBI,0BAAAA,mBAAmB;EAC3C,UAAU,MAAM;EAChB;EACA;CACF,CAAC;CAED,MAAM,mBAAmBC,0BAAAA,kBAAkB;EACzC;EACA;EACA;EACA;EACA,gBAAgB;EAChB,cAAc;CAChB,CAAC;CAED,MAAM,6BAA6BC,0BAAAA,uBAAuB;EACxD;EACA,SAAS;CACX,CAAC;CAED,MAAM,2BAA2BA,0BAAAA,uBAAuB;EACtD;EACA,SAAS;CACX,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAW,GAAG,kBAAkB,GAAG,aAAa,KAAK,KAAK;EAAG,OAAO;EAAzE,UAAA;GACG,qBAAqB,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,WAAW;IAA6B,UAAA;GAAoB,CAAA;GAEvF,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;IAAO,KAAK;IAAU,WAAW;IAAkB,GAAI;GAAQ,CAAA;GAE9D,mBAAmB,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,WAAW;IAA2B,UAAA;GAAkB,CAAA;EAC9E;;AAET,CACF;AAEA,aAAa,cAAc"}

package/dist/components/Input/Input.vanilla.css.cjs CHANGED Viewed

@@ -1,6 +1,6 @@
 ;/* empty css                                   */
 let _vanilla_extract_recipes_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-//#region components/Input/Input.vanilla.css.ts
+// components/Input/Input.vanilla.css.ts
 var styledInputRecipe = (0, _vanilla_extract_recipes_createRuntimeFn.createRuntimeFn)({
 	defaultClassName: "_1st6suv1 _1st6suv0",
 	variantClassNames: {
@@ -101,7 +101,6 @@ var adornmentWrapperRecipe = (0, _vanilla_extract_recipes_createRuntimeFn.create
 	defaultVariants: { size: "medium" },
 	compoundVariants: []
 });
-//#endregion
 exports.adornmentWrapperRecipe = adornmentWrapperRecipe;
 exports.inputWrapperRecipe = inputWrapperRecipe;
 exports.styledInputRecipe = styledInputRecipe;

package/dist/components/Input/Input.vanilla.css.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.vanilla.css.cjs","names":[],"sources":["../../../components/Input/Input.vanilla.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { breakpoints } from '../../styles/breakpoints.css';\nimport { tokens } from '../../styles/tokens.css';\n\n// CONSTANTS\nconst FOCUS_SHADOW =\n '0 1px 5px 0 hsla(0, 0%, 0%, 0.2), 0 3px 1px -2px hsla(0, 0%, 0%, 0.12), 0 2px 2px 0 hsla(0, 0%, 0%, 0.14)';\n\nconst SMALL_HEIGHT = tokens.sizes['5'];\nconst MEDIUM_HEIGHT = tokens.sizes['6'];\nconst LARGE_HEIGHT = tokens.sizes['7'];\n\nconst styledInputBase = style({\n // Reset\n appearance: 'none',\n borderWidth: '0',\n boxSizing: 'border-box',\n fontFamily: tokens.fonts.rubik,\n margin: '0',\n outline: 'none',\n padding: '0',\n width: '100%',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n\n // Custom\n position: 'relative',\n backgroundColor: 'transparent',\n borderRadius: 'inherit', // inherit border radius from InputWrapper\n boxShadow: `inset 0 0 0 1px ${tokens.colors.inputBorder}`,\n color: tokens.colors.inputText,\n fontVariantNumeric: 'tabular-nums',\n transition: 'box-shadow .1s ease-in-out',\n\n selectors: {\n '&[type=\"number\"]': {\n paddingRight: '0', // remove padding for number native controls\n },\n '&:-webkit-autofill, &:autofill': {\n boxShadow: `inset 0 0 0 1px ${tokens.colors.inputBorder}, inset 0 0 0 100px ${tokens.colors.inputBg}`,\n },\n '&:-webkit-autofill::first-line, &:autofill::first-line': {\n fontFamily: tokens.fonts.rubik,\n color: tokens.colors.hiContrast,\n },\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px ${tokens.colors.inputFocusBorder}, ${FOCUS_SHADOW}`,\n },\n '&::placeholder': {\n color: tokens.colors.inputPlaceholder,\n },\n '&:read-only:not(:disabled)': {\n boxShadow: 'none',\n },\n '&:disabled': {\n pointerEvents: 'none',\n color: tokens.colors.inputDisabledText,\n },\n },\n});\n\nexport const styledInputRecipe = recipe({\n base: styledInputBase,\n variants: {\n size: {\n small: {\n height: SMALL_HEIGHT,\n fontSize: tokens.fontSizes['1'],\n paddingLeft: tokens.space['2'],\n paddingRight: tokens.space['2'],\n lineHeight: tokens.sizes['5'],\n selectors: {\n '&:-webkit-autofill::first-line, &:autofill::first-line': {\n fontSize: tokens.fontSizes['1'],\n },\n },\n },\n medium: {\n height: MEDIUM_HEIGHT,\n fontSize: tokens.fontSizes['3'],\n paddingLeft: tokens.space['3'],\n paddingRight: tokens.space['3'],\n lineHeight: tokens.sizes['6'],\n selectors: {\n '&:-webkit-autofill::first-line, &:autofill::first-line': {\n fontSize: tokens.fontSizes['3'],\n },\n },\n },\n large: {\n height: LARGE_HEIGHT,\n fontSize: tokens.fontSizes['3'],\n paddingLeft: tokens.space['3'],\n paddingRight: tokens.space['3'],\n lineHeight: tokens.sizes['7'],\n selectors: {\n '&:-webkit-autofill::first-line, &:autofill::first-line': {\n fontSize: tokens.fontSizes['3'],\n },\n },\n },\n },\n variant: {\n ghost: {\n boxShadow: 'none',\n backgroundColor: 'transparent',\n selectors: {\n '&:disabled': {\n boxShadow: 'none',\n },\n '&:focus-visible': {\n backgroundColor: tokens.colors.loContrast,\n },\n },\n },\n },\n state: {\n invalid: {\n boxShadow: `inset 0 0 0 1px ${tokens.colors.inputInvalidBorder}`,\n selectors: {\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px ${tokens.colors.inputInvalidBorder}, ${FOCUS_SHADOW}`,\n },\n },\n },\n },\n cursor: {\n default: {\n cursor: 'default',\n '@media': {\n [breakpoints.hover]: {\n selectors: {\n '&:hover:not(:read-only)': {\n cursor: 'text',\n },\n },\n },\n },\n selectors: {\n '&:focus-visible:not(:read-only)': {\n cursor: 'text',\n },\n },\n },\n text: {\n cursor: 'text',\n },\n },\n startAdornment: {\n true: {},\n },\n endAdornment: {\n true: {},\n },\n },\n compoundVariants: [\n {\n variants: {\n variant: 'ghost',\n state: 'invalid',\n },\n style: {\n boxShadow: `inset 0 0 0 1px ${tokens.colors.inputInvalidBorder}`,\n },\n },\n // startAdornment compound variants\n {\n variants: {\n startAdornment: true,\n size: 'small',\n },\n style: {\n paddingInlineStart: `calc(${tokens.space['2']} + 15px)`,\n },\n },\n {\n variants: {\n startAdornment: true,\n size: 'medium',\n },\n style: {\n paddingInlineStart: `calc(${tokens.space['3']} + 15px)`,\n },\n },\n {\n variants: {\n startAdornment: true,\n size: 'large',\n },\n style: {\n paddingInlineStart: `calc(${tokens.space['3']} + 15px)`,\n },\n },\n // endAdornment compound variants\n {\n variants: {\n endAdornment: true,\n size: 'small',\n },\n style: {\n paddingInlineEnd: `calc(${tokens.space['2']} + 15px)`,\n },\n },\n {\n variants: {\n endAdornment: true,\n size: 'medium',\n },\n style: {\n paddingInlineEnd: `calc(${tokens.space['3']} + 15px)`,\n },\n },\n {\n variants: {\n endAdornment: true,\n size: 'large',\n },\n style: {\n paddingInlineEnd: `calc(${tokens.space['3']} + 15px)`,\n },\n },\n // endAdornment + invalid compound variants\n {\n variants: {\n endAdornment: true,\n size: 'small',\n state: 'invalid',\n },\n style: {\n paddingInlineEnd: `calc(${tokens.space['4']} + 30px)`, // size padding + adornment margins + icon size + icon size\n },\n },\n {\n variants: {\n endAdornment: true,\n size: 'medium',\n state: 'invalid',\n },\n style: {\n paddingInlineEnd: `calc(${tokens.space['6']} + 30px)`,\n },\n },\n {\n variants: {\n endAdornment: true,\n size: 'large',\n state: 'invalid',\n },\n style: {\n paddingInlineEnd: `calc(${tokens.space['6']} + 30px)`,\n },\n },\n ],\n defaultVariants: {\n size: 'medium',\n cursor: 'default',\n },\n});\n\nconst inputWrapperBase = style({\n // Reset\n outline: 'none',\n lineHeight: 0,\n\n position: 'relative',\n backgroundColor: tokens.colors.inputBg,\n color: tokens.colors.inputPlaceholder,\n\n selectors: {\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: '0',\n pointerEvents: 'none',\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: '0',\n pointerEvents: 'none',\n },\n '&:focus-visible::before': {\n backgroundColor: tokens.colors.inputFocusBg,\n },\n '&:focus-visible::after': {\n backgroundColor: tokens.colors.primary,\n opacity: '0.15',\n },\n },\n\n '@media': {\n [breakpoints.hover]: {\n selectors: {\n '&:hover::before': {\n backgroundColor: tokens.colors.inputHoverBg,\n },\n '&:hover::after': {\n backgroundColor: tokens.colors.primary,\n opacity: '0.05',\n },\n },\n },\n },\n});\n\nexport const inputWrapperRecipe = recipe({\n base: inputWrapperBase,\n variants: {\n disabled: {\n true: {\n opacity: '0.7',\n color: tokens.colors.inputDisabledText,\n '@media': {\n [breakpoints.hover]: {\n selectors: {\n '&:hover::before': {\n backgroundColor: 'inherit',\n },\n '&:hover::after': {\n backgroundColor: 'inherit',\n },\n },\n },\n },\n },\n },\n state: {\n invalid: {\n '@media': {\n [breakpoints.hover]: {\n selectors: {\n '&:hover::after': {\n backgroundColor: tokens.colors.inputInvalidBorder,\n },\n },\n },\n },\n },\n },\n size: {\n small: {\n borderRadius: tokens.radii['2'],\n selectors: {\n '&::before, &::after': {\n borderRadius: tokens.radii['2'],\n },\n },\n },\n medium: {\n borderRadius: tokens.radii['3'],\n selectors: {\n '&::before, &::after': {\n borderRadius: tokens.radii['3'],\n },\n },\n },\n large: {\n borderRadius: tokens.radii['3'],\n selectors: {\n '&::before, &::after': {\n borderRadius: tokens.radii['3'],\n },\n },\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n disabled: false,\n },\n});\n\nconst adornmentWrapperBase = style({\n position: 'absolute',\n top: '0',\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n});\n\nexport const adornmentWrapperRecipe = recipe({\n base: adornmentWrapperBase,\n variants: {\n size: {\n small: {\n marginLeft: `calc(${tokens.space['2']} / 2)`,\n marginRight: `calc(${tokens.space['2']} / 2)`,\n },\n medium: {\n marginLeft: `calc(${tokens.space['3']} / 2)`,\n marginRight: `calc(${tokens.space['3']} / 2)`,\n },\n large: {\n marginLeft: `calc(${tokens.space['3']} / 2)`,\n marginRight: `calc(${tokens.space['3']} / 2)`,\n },\n },\n variant: {\n start: {\n left: '0',\n },\n end: {\n right: '0',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n },\n});\n"],"mappings":""}
1	+ {"version":3,"file":"Input.vanilla.css.cjs","names":["_7a468"],"sources":["../../../components/Input/Input.vanilla.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { breakpoints } from '../../styles/breakpoints.css';\nimport { tokens } from '../../styles/tokens.css';\n\n// CONSTANTS\nconst FOCUS_SHADOW =\n '0 1px 5px 0 hsla(0, 0%, 0%, 0.2), 0 3px 1px -2px hsla(0, 0%, 0%, 0.12), 0 2px 2px 0 hsla(0, 0%, 0%, 0.14)';\n\nconst SMALL_HEIGHT = tokens.sizes['5'];\nconst MEDIUM_HEIGHT = tokens.sizes['6'];\nconst LARGE_HEIGHT = tokens.sizes['7'];\n\nconst styledInputBase = style({\n // Reset\n appearance: 'none',\n borderWidth: '0',\n boxSizing: 'border-box',\n fontFamily: tokens.fonts.rubik,\n margin: '0',\n outline: 'none',\n padding: '0',\n width: '100%',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n\n // Custom\n position: 'relative',\n backgroundColor: 'transparent',\n borderRadius: 'inherit', // inherit border radius from InputWrapper\n boxShadow: `inset 0 0 0 1px ${tokens.colors.inputBorder}`,\n color: tokens.colors.inputText,\n fontVariantNumeric: 'tabular-nums',\n transition: 'box-shadow .1s ease-in-out',\n\n selectors: {\n '&[type=\"number\"]': {\n paddingRight: '0', // remove padding for number native controls\n },\n '&:-webkit-autofill, &:autofill': {\n boxShadow: `inset 0 0 0 1px ${tokens.colors.inputBorder}, inset 0 0 0 100px ${tokens.colors.inputBg}`,\n },\n '&:-webkit-autofill::first-line, &:autofill::first-line': {\n fontFamily: tokens.fonts.rubik,\n color: tokens.colors.hiContrast,\n },\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px ${tokens.colors.inputFocusBorder}, ${FOCUS_SHADOW}`,\n },\n '&::placeholder': {\n color: tokens.colors.inputPlaceholder,\n },\n '&:read-only:not(:disabled)': {\n boxShadow: 'none',\n },\n '&:disabled': {\n pointerEvents: 'none',\n color: tokens.colors.inputDisabledText,\n },\n },\n});\n\nexport const styledInputRecipe = recipe({\n base: styledInputBase,\n variants: {\n size: {\n small: {\n height: SMALL_HEIGHT,\n fontSize: tokens.fontSizes['1'],\n paddingLeft: tokens.space['2'],\n paddingRight: tokens.space['2'],\n lineHeight: tokens.sizes['5'],\n selectors: {\n '&:-webkit-autofill::first-line, &:autofill::first-line': {\n fontSize: tokens.fontSizes['1'],\n },\n },\n },\n medium: {\n height: MEDIUM_HEIGHT,\n fontSize: tokens.fontSizes['3'],\n paddingLeft: tokens.space['3'],\n paddingRight: tokens.space['3'],\n lineHeight: tokens.sizes['6'],\n selectors: {\n '&:-webkit-autofill::first-line, &:autofill::first-line': {\n fontSize: tokens.fontSizes['3'],\n },\n },\n },\n large: {\n height: LARGE_HEIGHT,\n fontSize: tokens.fontSizes['3'],\n paddingLeft: tokens.space['3'],\n paddingRight: tokens.space['3'],\n lineHeight: tokens.sizes['7'],\n selectors: {\n '&:-webkit-autofill::first-line, &:autofill::first-line': {\n fontSize: tokens.fontSizes['3'],\n },\n },\n },\n },\n variant: {\n ghost: {\n boxShadow: 'none',\n backgroundColor: 'transparent',\n selectors: {\n '&:disabled': {\n boxShadow: 'none',\n },\n '&:focus-visible': {\n backgroundColor: tokens.colors.loContrast,\n },\n },\n },\n },\n state: {\n invalid: {\n boxShadow: `inset 0 0 0 1px ${tokens.colors.inputInvalidBorder}`,\n selectors: {\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px ${tokens.colors.inputInvalidBorder}, ${FOCUS_SHADOW}`,\n },\n },\n },\n },\n cursor: {\n default: {\n cursor: 'default',\n '@media': {\n [breakpoints.hover]: {\n selectors: {\n '&:hover:not(:read-only)': {\n cursor: 'text',\n },\n },\n },\n },\n selectors: {\n '&:focus-visible:not(:read-only)': {\n cursor: 'text',\n },\n },\n },\n text: {\n cursor: 'text',\n },\n },\n startAdornment: {\n true: {},\n },\n endAdornment: {\n true: {},\n },\n },\n compoundVariants: [\n {\n variants: {\n variant: 'ghost',\n state: 'invalid',\n },\n style: {\n boxShadow: `inset 0 0 0 1px ${tokens.colors.inputInvalidBorder}`,\n },\n },\n // startAdornment compound variants\n {\n variants: {\n startAdornment: true,\n size: 'small',\n },\n style: {\n paddingInlineStart: `calc(${tokens.space['2']} + 15px)`,\n },\n },\n {\n variants: {\n startAdornment: true,\n size: 'medium',\n },\n style: {\n paddingInlineStart: `calc(${tokens.space['3']} + 15px)`,\n },\n },\n {\n variants: {\n startAdornment: true,\n size: 'large',\n },\n style: {\n paddingInlineStart: `calc(${tokens.space['3']} + 15px)`,\n },\n },\n // endAdornment compound variants\n {\n variants: {\n endAdornment: true,\n size: 'small',\n },\n style: {\n paddingInlineEnd: `calc(${tokens.space['2']} + 15px)`,\n },\n },\n {\n variants: {\n endAdornment: true,\n size: 'medium',\n },\n style: {\n paddingInlineEnd: `calc(${tokens.space['3']} + 15px)`,\n },\n },\n {\n variants: {\n endAdornment: true,\n size: 'large',\n },\n style: {\n paddingInlineEnd: `calc(${tokens.space['3']} + 15px)`,\n },\n },\n // endAdornment + invalid compound variants\n {\n variants: {\n endAdornment: true,\n size: 'small',\n state: 'invalid',\n },\n style: {\n paddingInlineEnd: `calc(${tokens.space['4']} + 30px)`, // size padding + adornment margins + icon size + icon size\n },\n },\n {\n variants: {\n endAdornment: true,\n size: 'medium',\n state: 'invalid',\n },\n style: {\n paddingInlineEnd: `calc(${tokens.space['6']} + 30px)`,\n },\n },\n {\n variants: {\n endAdornment: true,\n size: 'large',\n state: 'invalid',\n },\n style: {\n paddingInlineEnd: `calc(${tokens.space['6']} + 30px)`,\n },\n },\n ],\n defaultVariants: {\n size: 'medium',\n cursor: 'default',\n },\n});\n\nconst inputWrapperBase = style({\n // Reset\n outline: 'none',\n lineHeight: 0,\n\n position: 'relative',\n backgroundColor: tokens.colors.inputBg,\n color: tokens.colors.inputPlaceholder,\n\n selectors: {\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: '0',\n pointerEvents: 'none',\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: '0',\n pointerEvents: 'none',\n },\n '&:focus-visible::before': {\n backgroundColor: tokens.colors.inputFocusBg,\n },\n '&:focus-visible::after': {\n backgroundColor: tokens.colors.primary,\n opacity: '0.15',\n },\n },\n\n '@media': {\n [breakpoints.hover]: {\n selectors: {\n '&:hover::before': {\n backgroundColor: tokens.colors.inputHoverBg,\n },\n '&:hover::after': {\n backgroundColor: tokens.colors.primary,\n opacity: '0.05',\n },\n },\n },\n },\n});\n\nexport const inputWrapperRecipe = recipe({\n base: inputWrapperBase,\n variants: {\n disabled: {\n true: {\n opacity: '0.7',\n color: tokens.colors.inputDisabledText,\n '@media': {\n [breakpoints.hover]: {\n selectors: {\n '&:hover::before': {\n backgroundColor: 'inherit',\n },\n '&:hover::after': {\n backgroundColor: 'inherit',\n },\n },\n },\n },\n },\n },\n state: {\n invalid: {\n '@media': {\n [breakpoints.hover]: {\n selectors: {\n '&:hover::after': {\n backgroundColor: tokens.colors.inputInvalidBorder,\n },\n },\n },\n },\n },\n },\n size: {\n small: {\n borderRadius: tokens.radii['2'],\n selectors: {\n '&::before, &::after': {\n borderRadius: tokens.radii['2'],\n },\n },\n },\n medium: {\n borderRadius: tokens.radii['3'],\n selectors: {\n '&::before, &::after': {\n borderRadius: tokens.radii['3'],\n },\n },\n },\n large: {\n borderRadius: tokens.radii['3'],\n selectors: {\n '&::before, &::after': {\n borderRadius: tokens.radii['3'],\n },\n },\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n disabled: false,\n },\n});\n\nconst adornmentWrapperBase = style({\n position: 'absolute',\n top: '0',\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n});\n\nexport const adornmentWrapperRecipe = recipe({\n base: adornmentWrapperBase,\n variants: {\n size: {\n small: {\n marginLeft: `calc(${tokens.space['2']} / 2)`,\n marginRight: `calc(${tokens.space['2']} / 2)`,\n },\n medium: {\n marginLeft: `calc(${tokens.space['3']} / 2)`,\n marginRight: `calc(${tokens.space['3']} / 2)`,\n },\n large: {\n marginLeft: `calc(${tokens.space['3']} / 2)`,\n marginRight: `calc(${tokens.space['3']} / 2)`,\n },\n },\n variant: {\n start: {\n left: '0',\n },\n end: {\n right: '0',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n },\n});\n"],"mappings":""}

package/dist/components/Input/Input.vanilla.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /* empty css                                 */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
-//#region components/Input/Input.vanilla.css.ts
+// components/Input/Input.vanilla.css.ts
 var styledInputRecipe = createRuntimeFn({
 	defaultClassName: "_1st6suv1 _1st6suv0",
 	variantClassNames: {
@@ -101,7 +101,6 @@ var adornmentWrapperRecipe = createRuntimeFn({
 	defaultVariants: { size: "medium" },
 	compoundVariants: []
 });
-//#endregion
 export { adornmentWrapperRecipe, inputWrapperRecipe, styledInputRecipe };
 //# sourceMappingURL=Input.vanilla.css.js.map

package/dist/components/Input/Input.vanilla.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.vanilla.css.js","names":[],"sources":["../../../components/Input/Input.vanilla.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { breakpoints } from '../../styles/breakpoints.css';\nimport { tokens } from '../../styles/tokens.css';\n\n// CONSTANTS\nconst FOCUS_SHADOW =\n '0 1px 5px 0 hsla(0, 0%, 0%, 0.2), 0 3px 1px -2px hsla(0, 0%, 0%, 0.12), 0 2px 2px 0 hsla(0, 0%, 0%, 0.14)';\n\nconst SMALL_HEIGHT = tokens.sizes['5'];\nconst MEDIUM_HEIGHT = tokens.sizes['6'];\nconst LARGE_HEIGHT = tokens.sizes['7'];\n\nconst styledInputBase = style({\n // Reset\n appearance: 'none',\n borderWidth: '0',\n boxSizing: 'border-box',\n fontFamily: tokens.fonts.rubik,\n margin: '0',\n outline: 'none',\n padding: '0',\n width: '100%',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n\n // Custom\n position: 'relative',\n backgroundColor: 'transparent',\n borderRadius: 'inherit', // inherit border radius from InputWrapper\n boxShadow: `inset 0 0 0 1px ${tokens.colors.inputBorder}`,\n color: tokens.colors.inputText,\n fontVariantNumeric: 'tabular-nums',\n transition: 'box-shadow .1s ease-in-out',\n\n selectors: {\n '&[type=\"number\"]': {\n paddingRight: '0', // remove padding for number native controls\n },\n '&:-webkit-autofill, &:autofill': {\n boxShadow: `inset 0 0 0 1px ${tokens.colors.inputBorder}, inset 0 0 0 100px ${tokens.colors.inputBg}`,\n },\n '&:-webkit-autofill::first-line, &:autofill::first-line': {\n fontFamily: tokens.fonts.rubik,\n color: tokens.colors.hiContrast,\n },\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px ${tokens.colors.inputFocusBorder}, ${FOCUS_SHADOW}`,\n },\n '&::placeholder': {\n color: tokens.colors.inputPlaceholder,\n },\n '&:read-only:not(:disabled)': {\n boxShadow: 'none',\n },\n '&:disabled': {\n pointerEvents: 'none',\n color: tokens.colors.inputDisabledText,\n },\n },\n});\n\nexport const styledInputRecipe = recipe({\n base: styledInputBase,\n variants: {\n size: {\n small: {\n height: SMALL_HEIGHT,\n fontSize: tokens.fontSizes['1'],\n paddingLeft: tokens.space['2'],\n paddingRight: tokens.space['2'],\n lineHeight: tokens.sizes['5'],\n selectors: {\n '&:-webkit-autofill::first-line, &:autofill::first-line': {\n fontSize: tokens.fontSizes['1'],\n },\n },\n },\n medium: {\n height: MEDIUM_HEIGHT,\n fontSize: tokens.fontSizes['3'],\n paddingLeft: tokens.space['3'],\n paddingRight: tokens.space['3'],\n lineHeight: tokens.sizes['6'],\n selectors: {\n '&:-webkit-autofill::first-line, &:autofill::first-line': {\n fontSize: tokens.fontSizes['3'],\n },\n },\n },\n large: {\n height: LARGE_HEIGHT,\n fontSize: tokens.fontSizes['3'],\n paddingLeft: tokens.space['3'],\n paddingRight: tokens.space['3'],\n lineHeight: tokens.sizes['7'],\n selectors: {\n '&:-webkit-autofill::first-line, &:autofill::first-line': {\n fontSize: tokens.fontSizes['3'],\n },\n },\n },\n },\n variant: {\n ghost: {\n boxShadow: 'none',\n backgroundColor: 'transparent',\n selectors: {\n '&:disabled': {\n boxShadow: 'none',\n },\n '&:focus-visible': {\n backgroundColor: tokens.colors.loContrast,\n },\n },\n },\n },\n state: {\n invalid: {\n boxShadow: `inset 0 0 0 1px ${tokens.colors.inputInvalidBorder}`,\n selectors: {\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px ${tokens.colors.inputInvalidBorder}, ${FOCUS_SHADOW}`,\n },\n },\n },\n },\n cursor: {\n default: {\n cursor: 'default',\n '@media': {\n [breakpoints.hover]: {\n selectors: {\n '&:hover:not(:read-only)': {\n cursor: 'text',\n },\n },\n },\n },\n selectors: {\n '&:focus-visible:not(:read-only)': {\n cursor: 'text',\n },\n },\n },\n text: {\n cursor: 'text',\n },\n },\n startAdornment: {\n true: {},\n },\n endAdornment: {\n true: {},\n },\n },\n compoundVariants: [\n {\n variants: {\n variant: 'ghost',\n state: 'invalid',\n },\n style: {\n boxShadow: `inset 0 0 0 1px ${tokens.colors.inputInvalidBorder}`,\n },\n },\n // startAdornment compound variants\n {\n variants: {\n startAdornment: true,\n size: 'small',\n },\n style: {\n paddingInlineStart: `calc(${tokens.space['2']} + 15px)`,\n },\n },\n {\n variants: {\n startAdornment: true,\n size: 'medium',\n },\n style: {\n paddingInlineStart: `calc(${tokens.space['3']} + 15px)`,\n },\n },\n {\n variants: {\n startAdornment: true,\n size: 'large',\n },\n style: {\n paddingInlineStart: `calc(${tokens.space['3']} + 15px)`,\n },\n },\n // endAdornment compound variants\n {\n variants: {\n endAdornment: true,\n size: 'small',\n },\n style: {\n paddingInlineEnd: `calc(${tokens.space['2']} + 15px)`,\n },\n },\n {\n variants: {\n endAdornment: true,\n size: 'medium',\n },\n style: {\n paddingInlineEnd: `calc(${tokens.space['3']} + 15px)`,\n },\n },\n {\n variants: {\n endAdornment: true,\n size: 'large',\n },\n style: {\n paddingInlineEnd: `calc(${tokens.space['3']} + 15px)`,\n },\n },\n // endAdornment + invalid compound variants\n {\n variants: {\n endAdornment: true,\n size: 'small',\n state: 'invalid',\n },\n style: {\n paddingInlineEnd: `calc(${tokens.space['4']} + 30px)`, // size padding + adornment margins + icon size + icon size\n },\n },\n {\n variants: {\n endAdornment: true,\n size: 'medium',\n state: 'invalid',\n },\n style: {\n paddingInlineEnd: `calc(${tokens.space['6']} + 30px)`,\n },\n },\n {\n variants: {\n endAdornment: true,\n size: 'large',\n state: 'invalid',\n },\n style: {\n paddingInlineEnd: `calc(${tokens.space['6']} + 30px)`,\n },\n },\n ],\n defaultVariants: {\n size: 'medium',\n cursor: 'default',\n },\n});\n\nconst inputWrapperBase = style({\n // Reset\n outline: 'none',\n lineHeight: 0,\n\n position: 'relative',\n backgroundColor: tokens.colors.inputBg,\n color: tokens.colors.inputPlaceholder,\n\n selectors: {\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: '0',\n pointerEvents: 'none',\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: '0',\n pointerEvents: 'none',\n },\n '&:focus-visible::before': {\n backgroundColor: tokens.colors.inputFocusBg,\n },\n '&:focus-visible::after': {\n backgroundColor: tokens.colors.primary,\n opacity: '0.15',\n },\n },\n\n '@media': {\n [breakpoints.hover]: {\n selectors: {\n '&:hover::before': {\n backgroundColor: tokens.colors.inputHoverBg,\n },\n '&:hover::after': {\n backgroundColor: tokens.colors.primary,\n opacity: '0.05',\n },\n },\n },\n },\n});\n\nexport const inputWrapperRecipe = recipe({\n base: inputWrapperBase,\n variants: {\n disabled: {\n true: {\n opacity: '0.7',\n color: tokens.colors.inputDisabledText,\n '@media': {\n [breakpoints.hover]: {\n selectors: {\n '&:hover::before': {\n backgroundColor: 'inherit',\n },\n '&:hover::after': {\n backgroundColor: 'inherit',\n },\n },\n },\n },\n },\n },\n state: {\n invalid: {\n '@media': {\n [breakpoints.hover]: {\n selectors: {\n '&:hover::after': {\n backgroundColor: tokens.colors.inputInvalidBorder,\n },\n },\n },\n },\n },\n },\n size: {\n small: {\n borderRadius: tokens.radii['2'],\n selectors: {\n '&::before, &::after': {\n borderRadius: tokens.radii['2'],\n },\n },\n },\n medium: {\n borderRadius: tokens.radii['3'],\n selectors: {\n '&::before, &::after': {\n borderRadius: tokens.radii['3'],\n },\n },\n },\n large: {\n borderRadius: tokens.radii['3'],\n selectors: {\n '&::before, &::after': {\n borderRadius: tokens.radii['3'],\n },\n },\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n disabled: false,\n },\n});\n\nconst adornmentWrapperBase = style({\n position: 'absolute',\n top: '0',\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n});\n\nexport const adornmentWrapperRecipe = recipe({\n base: adornmentWrapperBase,\n variants: {\n size: {\n small: {\n marginLeft: `calc(${tokens.space['2']} / 2)`,\n marginRight: `calc(${tokens.space['2']} / 2)`,\n },\n medium: {\n marginLeft: `calc(${tokens.space['3']} / 2)`,\n marginRight: `calc(${tokens.space['3']} / 2)`,\n },\n large: {\n marginLeft: `calc(${tokens.space['3']} / 2)`,\n marginRight: `calc(${tokens.space['3']} / 2)`,\n },\n },\n variant: {\n start: {\n left: '0',\n },\n end: {\n right: '0',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n },\n});\n"],"mappings":""}
1	+ {"version":3,"file":"Input.vanilla.css.js","names":["_7a468"],"sources":["../../../components/Input/Input.vanilla.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { breakpoints } from '../../styles/breakpoints.css';\nimport { tokens } from '../../styles/tokens.css';\n\n// CONSTANTS\nconst FOCUS_SHADOW =\n '0 1px 5px 0 hsla(0, 0%, 0%, 0.2), 0 3px 1px -2px hsla(0, 0%, 0%, 0.12), 0 2px 2px 0 hsla(0, 0%, 0%, 0.14)';\n\nconst SMALL_HEIGHT = tokens.sizes['5'];\nconst MEDIUM_HEIGHT = tokens.sizes['6'];\nconst LARGE_HEIGHT = tokens.sizes['7'];\n\nconst styledInputBase = style({\n // Reset\n appearance: 'none',\n borderWidth: '0',\n boxSizing: 'border-box',\n fontFamily: tokens.fonts.rubik,\n margin: '0',\n outline: 'none',\n padding: '0',\n width: '100%',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n\n // Custom\n position: 'relative',\n backgroundColor: 'transparent',\n borderRadius: 'inherit', // inherit border radius from InputWrapper\n boxShadow: `inset 0 0 0 1px ${tokens.colors.inputBorder}`,\n color: tokens.colors.inputText,\n fontVariantNumeric: 'tabular-nums',\n transition: 'box-shadow .1s ease-in-out',\n\n selectors: {\n '&[type=\"number\"]': {\n paddingRight: '0', // remove padding for number native controls\n },\n '&:-webkit-autofill, &:autofill': {\n boxShadow: `inset 0 0 0 1px ${tokens.colors.inputBorder}, inset 0 0 0 100px ${tokens.colors.inputBg}`,\n },\n '&:-webkit-autofill::first-line, &:autofill::first-line': {\n fontFamily: tokens.fonts.rubik,\n color: tokens.colors.hiContrast,\n },\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px ${tokens.colors.inputFocusBorder}, ${FOCUS_SHADOW}`,\n },\n '&::placeholder': {\n color: tokens.colors.inputPlaceholder,\n },\n '&:read-only:not(:disabled)': {\n boxShadow: 'none',\n },\n '&:disabled': {\n pointerEvents: 'none',\n color: tokens.colors.inputDisabledText,\n },\n },\n});\n\nexport const styledInputRecipe = recipe({\n base: styledInputBase,\n variants: {\n size: {\n small: {\n height: SMALL_HEIGHT,\n fontSize: tokens.fontSizes['1'],\n paddingLeft: tokens.space['2'],\n paddingRight: tokens.space['2'],\n lineHeight: tokens.sizes['5'],\n selectors: {\n '&:-webkit-autofill::first-line, &:autofill::first-line': {\n fontSize: tokens.fontSizes['1'],\n },\n },\n },\n medium: {\n height: MEDIUM_HEIGHT,\n fontSize: tokens.fontSizes['3'],\n paddingLeft: tokens.space['3'],\n paddingRight: tokens.space['3'],\n lineHeight: tokens.sizes['6'],\n selectors: {\n '&:-webkit-autofill::first-line, &:autofill::first-line': {\n fontSize: tokens.fontSizes['3'],\n },\n },\n },\n large: {\n height: LARGE_HEIGHT,\n fontSize: tokens.fontSizes['3'],\n paddingLeft: tokens.space['3'],\n paddingRight: tokens.space['3'],\n lineHeight: tokens.sizes['7'],\n selectors: {\n '&:-webkit-autofill::first-line, &:autofill::first-line': {\n fontSize: tokens.fontSizes['3'],\n },\n },\n },\n },\n variant: {\n ghost: {\n boxShadow: 'none',\n backgroundColor: 'transparent',\n selectors: {\n '&:disabled': {\n boxShadow: 'none',\n },\n '&:focus-visible': {\n backgroundColor: tokens.colors.loContrast,\n },\n },\n },\n },\n state: {\n invalid: {\n boxShadow: `inset 0 0 0 1px ${tokens.colors.inputInvalidBorder}`,\n selectors: {\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px ${tokens.colors.inputInvalidBorder}, ${FOCUS_SHADOW}`,\n },\n },\n },\n },\n cursor: {\n default: {\n cursor: 'default',\n '@media': {\n [breakpoints.hover]: {\n selectors: {\n '&:hover:not(:read-only)': {\n cursor: 'text',\n },\n },\n },\n },\n selectors: {\n '&:focus-visible:not(:read-only)': {\n cursor: 'text',\n },\n },\n },\n text: {\n cursor: 'text',\n },\n },\n startAdornment: {\n true: {},\n },\n endAdornment: {\n true: {},\n },\n },\n compoundVariants: [\n {\n variants: {\n variant: 'ghost',\n state: 'invalid',\n },\n style: {\n boxShadow: `inset 0 0 0 1px ${tokens.colors.inputInvalidBorder}`,\n },\n },\n // startAdornment compound variants\n {\n variants: {\n startAdornment: true,\n size: 'small',\n },\n style: {\n paddingInlineStart: `calc(${tokens.space['2']} + 15px)`,\n },\n },\n {\n variants: {\n startAdornment: true,\n size: 'medium',\n },\n style: {\n paddingInlineStart: `calc(${tokens.space['3']} + 15px)`,\n },\n },\n {\n variants: {\n startAdornment: true,\n size: 'large',\n },\n style: {\n paddingInlineStart: `calc(${tokens.space['3']} + 15px)`,\n },\n },\n // endAdornment compound variants\n {\n variants: {\n endAdornment: true,\n size: 'small',\n },\n style: {\n paddingInlineEnd: `calc(${tokens.space['2']} + 15px)`,\n },\n },\n {\n variants: {\n endAdornment: true,\n size: 'medium',\n },\n style: {\n paddingInlineEnd: `calc(${tokens.space['3']} + 15px)`,\n },\n },\n {\n variants: {\n endAdornment: true,\n size: 'large',\n },\n style: {\n paddingInlineEnd: `calc(${tokens.space['3']} + 15px)`,\n },\n },\n // endAdornment + invalid compound variants\n {\n variants: {\n endAdornment: true,\n size: 'small',\n state: 'invalid',\n },\n style: {\n paddingInlineEnd: `calc(${tokens.space['4']} + 30px)`, // size padding + adornment margins + icon size + icon size\n },\n },\n {\n variants: {\n endAdornment: true,\n size: 'medium',\n state: 'invalid',\n },\n style: {\n paddingInlineEnd: `calc(${tokens.space['6']} + 30px)`,\n },\n },\n {\n variants: {\n endAdornment: true,\n size: 'large',\n state: 'invalid',\n },\n style: {\n paddingInlineEnd: `calc(${tokens.space['6']} + 30px)`,\n },\n },\n ],\n defaultVariants: {\n size: 'medium',\n cursor: 'default',\n },\n});\n\nconst inputWrapperBase = style({\n // Reset\n outline: 'none',\n lineHeight: 0,\n\n position: 'relative',\n backgroundColor: tokens.colors.inputBg,\n color: tokens.colors.inputPlaceholder,\n\n selectors: {\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: '0',\n pointerEvents: 'none',\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: '0',\n pointerEvents: 'none',\n },\n '&:focus-visible::before': {\n backgroundColor: tokens.colors.inputFocusBg,\n },\n '&:focus-visible::after': {\n backgroundColor: tokens.colors.primary,\n opacity: '0.15',\n },\n },\n\n '@media': {\n [breakpoints.hover]: {\n selectors: {\n '&:hover::before': {\n backgroundColor: tokens.colors.inputHoverBg,\n },\n '&:hover::after': {\n backgroundColor: tokens.colors.primary,\n opacity: '0.05',\n },\n },\n },\n },\n});\n\nexport const inputWrapperRecipe = recipe({\n base: inputWrapperBase,\n variants: {\n disabled: {\n true: {\n opacity: '0.7',\n color: tokens.colors.inputDisabledText,\n '@media': {\n [breakpoints.hover]: {\n selectors: {\n '&:hover::before': {\n backgroundColor: 'inherit',\n },\n '&:hover::after': {\n backgroundColor: 'inherit',\n },\n },\n },\n },\n },\n },\n state: {\n invalid: {\n '@media': {\n [breakpoints.hover]: {\n selectors: {\n '&:hover::after': {\n backgroundColor: tokens.colors.inputInvalidBorder,\n },\n },\n },\n },\n },\n },\n size: {\n small: {\n borderRadius: tokens.radii['2'],\n selectors: {\n '&::before, &::after': {\n borderRadius: tokens.radii['2'],\n },\n },\n },\n medium: {\n borderRadius: tokens.radii['3'],\n selectors: {\n '&::before, &::after': {\n borderRadius: tokens.radii['3'],\n },\n },\n },\n large: {\n borderRadius: tokens.radii['3'],\n selectors: {\n '&::before, &::after': {\n borderRadius: tokens.radii['3'],\n },\n },\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n disabled: false,\n },\n});\n\nconst adornmentWrapperBase = style({\n position: 'absolute',\n top: '0',\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n});\n\nexport const adornmentWrapperRecipe = recipe({\n base: adornmentWrapperBase,\n variants: {\n size: {\n small: {\n marginLeft: `calc(${tokens.space['2']} / 2)`,\n marginRight: `calc(${tokens.space['2']} / 2)`,\n },\n medium: {\n marginLeft: `calc(${tokens.space['3']} / 2)`,\n marginRight: `calc(${tokens.space['3']} / 2)`,\n },\n large: {\n marginLeft: `calc(${tokens.space['3']} / 2)`,\n marginRight: `calc(${tokens.space['3']} / 2)`,\n },\n },\n variant: {\n start: {\n left: '0',\n },\n end: {\n right: '0',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n },\n});\n"],"mappings":""}

package/dist/components/Input/Input.vanilla.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { adornmentWrapperRecipe, inputWrapperRecipe, styledInputRecipe } from ".
 import React from "react";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region components/Input/Input.vanilla.tsx
+// components/Input/Input.vanilla.tsx
 var InputVanilla = React.forwardRef(({ size, startAdornment, endAdornment, css, variant, state, cursor, className, style, ...props }, forwardedRef) => {
 	const inputRef = React.useRef(null);
 	const { colors } = useVanillaExtractTheme();
@@ -65,7 +65,6 @@ var InputVanilla = React.forwardRef(({ size, startAdornment, endAdornment, css,
 	});
 });
 InputVanilla.displayName = "InputVanilla";
-//#endregion
 export { InputVanilla };
 //# sourceMappingURL=Input.vanilla.js.map

package/dist/components/Input/Input.vanilla.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.vanilla.js","names":[],"sources":["../../../components/Input/Input.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 { adornmentWrapperRecipe, inputWrapperRecipe, styledInputRecipe } from './Input.vanilla.css';\n\ntype StyledInputRecipeVariants = NonNullable<RecipeVariants<typeof styledInputRecipe>>;\n\nexport interface InputVanillaOwnProps extends CSSProps {\n size?: StyledInputRecipeVariants['size'];\n variant?: StyledInputRecipeVariants['variant'];\n state?: StyledInputRecipeVariants['state'];\n cursor?: StyledInputRecipeVariants['cursor'];\n startAdornment?: React.ReactNode;\n endAdornment?: React.ReactNode;\n type?: string;\n}\n\nexport type InputVanillaProps = Omit<React.InputHTMLAttributes<any>, 'size'> & InputVanillaOwnProps;\n\nexport interface InputVanillaHandle extends HTMLInputElement {\n clear: () => void;\n}\n\nexport const InputVanilla = React.forwardRef<InputVanillaHandle, InputVanillaProps>(\n (\n { size, startAdornment, endAdornment, css, variant, state, cursor, className, style, ...props },\n forwardedRef,\n ) => {\n const inputRef = React.useRef<InputVanillaHandle>(null);\n const { colors } = useVanillaExtractTheme();\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n const mergedStyles = { ...cssStyles, ...style, ...assignInlineVars(vars) };\n\n React.useImperativeHandle(forwardedRef, () => {\n const { current } = inputRef;\n if (current) {\n current.clear = () => {\n current.value = '';\n };\n }\n return current as InputVanillaHandle;\n }, [inputRef]);\n\n const hasStartAdornment = React.useMemo(() => Boolean(startAdornment), [startAdornment]);\n const hasEndAdornment = React.useMemo(() => Boolean(endAdornment), [endAdornment]);\n\n const inputWrapperClass = inputWrapperRecipe({\n disabled: props.disabled,\n state,\n size,\n });\n\n const styledInputClass = styledInputRecipe({\n size,\n variant,\n state,\n cursor,\n startAdornment: hasStartAdornment,\n endAdornment: hasEndAdornment,\n });\n\n const adornmentWrapperStartClass = adornmentWrapperRecipe({\n size,\n variant: 'start',\n });\n\n const adornmentWrapperEndClass = adornmentWrapperRecipe({\n size,\n variant: 'end',\n });\n\n return (\n <div className={`${inputWrapperClass} ${className \|\| ''}`.trim()} style={mergedStyles}>\n {hasStartAdornment && <div className={adornmentWrapperStartClass}>{startAdornment}</div>}\n\n <input ref={inputRef} className={styledInputClass} {...props} />\n\n {hasEndAdornment && <div className={adornmentWrapperEndClass}>{endAdornment}</div>}\n </div>\n );\n },\n);\n\nInputVanilla.displayName = 'InputVanilla';\n"],"mappings":";;;;;;;AA0BA,IAAa,eAAe,MAAM,YAE9B,EAAE,MAAM,gBAAgB,cAAc,KAAK,SAAS,OAAO,QAAQ,WAAW,OAAO,GAAG,SACxF,iBACG;CACH,MAAM,WAAW,MAAM,OAA2B,IAAI;CACtD,MAAM,EAAE,WAAW,uBAAuB;CAC1C,MAAM,EAAE,OAAO,WAAW,SAAS,eAAe,KAAK,MAAM;CAC7D,MAAM,eAAe;EAAE,GAAG;EAAW,GAAG;EAAO,GAAG,iBAAiB,IAAI;CAAE;CAEzE,MAAM,oBAAoB,oBAAoB;EAC5C,MAAM,EAAE,YAAY;EACpB,IAAI,SACF,QAAQ,cAAc;GACpB,QAAQ,QAAQ;EAClB;EAEF,OAAO;CACT,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,oBAAoB,MAAM,cAAc,QAAQ,cAAc,GAAG,CAAC,cAAc,CAAC;CACvF,MAAM,kBAAkB,MAAM,cAAc,QAAQ,YAAY,GAAG,CAAC,YAAY,CAAC;CAEjF,MAAM,oBAAoB,mBAAmB;EAC3C,UAAU,MAAM;EAChB;EACA;CACF,CAAC;CAED,MAAM,mBAAmB,kBAAkB;EACzC;EACA;EACA;EACA;EACA,gBAAgB;EAChB,cAAc;CAChB,CAAC;CAED,MAAM,6BAA6B,uBAAuB;EACxD;EACA,SAAS;CACX,CAAC;CAED,MAAM,2BAA2B,uBAAuB;EACtD;EACA,SAAS;CACX,CAAC;CAED,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,kBAAkB,GAAG,aAAa,KAAK,KAAK;EAAG,OAAO;~~YAAzE~~;GACG,qBAAqB,oBAAC,OAAD;IAAK,WAAW;~~cAA6B~~;GAAoB,CAAA;GAEvF,oBAAC,SAAD;IAAO,KAAK;IAAU,WAAW;IAAkB,GAAI;GAAQ,CAAA;GAE9D,mBAAmB,oBAAC,OAAD;IAAK,WAAW;~~cAA2B~~;GAAkB,CAAA;EAC9E;;AAET,CACF;AAEA,aAAa,cAAc"}
1	+ {"version":3,"file":"Input.vanilla.js","names":[],"sources":["../../../components/Input/Input.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 { adornmentWrapperRecipe, inputWrapperRecipe, styledInputRecipe } from './Input.vanilla.css';\n\ntype StyledInputRecipeVariants = NonNullable<RecipeVariants<typeof styledInputRecipe>>;\n\nexport interface InputVanillaOwnProps extends CSSProps {\n size?: StyledInputRecipeVariants['size'];\n variant?: StyledInputRecipeVariants['variant'];\n state?: StyledInputRecipeVariants['state'];\n cursor?: StyledInputRecipeVariants['cursor'];\n startAdornment?: React.ReactNode;\n endAdornment?: React.ReactNode;\n type?: string;\n}\n\nexport type InputVanillaProps = Omit<React.InputHTMLAttributes<any>, 'size'> & InputVanillaOwnProps;\n\nexport interface InputVanillaHandle extends HTMLInputElement {\n clear: () => void;\n}\n\nexport const InputVanilla = React.forwardRef<InputVanillaHandle, InputVanillaProps>(\n (\n { size, startAdornment, endAdornment, css, variant, state, cursor, className, style, ...props },\n forwardedRef,\n ) => {\n const inputRef = React.useRef<InputVanillaHandle>(null);\n const { colors } = useVanillaExtractTheme();\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n const mergedStyles = { ...cssStyles, ...style, ...assignInlineVars(vars) };\n\n React.useImperativeHandle(forwardedRef, () => {\n const { current } = inputRef;\n if (current) {\n current.clear = () => {\n current.value = '';\n };\n }\n return current as InputVanillaHandle;\n }, [inputRef]);\n\n const hasStartAdornment = React.useMemo(() => Boolean(startAdornment), [startAdornment]);\n const hasEndAdornment = React.useMemo(() => Boolean(endAdornment), [endAdornment]);\n\n const inputWrapperClass = inputWrapperRecipe({\n disabled: props.disabled,\n state,\n size,\n });\n\n const styledInputClass = styledInputRecipe({\n size,\n variant,\n state,\n cursor,\n startAdornment: hasStartAdornment,\n endAdornment: hasEndAdornment,\n });\n\n const adornmentWrapperStartClass = adornmentWrapperRecipe({\n size,\n variant: 'start',\n });\n\n const adornmentWrapperEndClass = adornmentWrapperRecipe({\n size,\n variant: 'end',\n });\n\n return (\n <div className={`${inputWrapperClass} ${className \|\| ''}`.trim()} style={mergedStyles}>\n {hasStartAdornment && <div className={adornmentWrapperStartClass}>{startAdornment}</div>}\n\n <input ref={inputRef} className={styledInputClass} {...props} />\n\n {hasEndAdornment && <div className={adornmentWrapperEndClass}>{endAdornment}</div>}\n </div>\n );\n },\n);\n\nInputVanilla.displayName = 'InputVanilla';\n"],"mappings":";;;;;;;AA0BA,IAAa,eAAe,MAAM,YAE9B,EAAE,MAAM,gBAAgB,cAAc,KAAK,SAAS,OAAO,QAAQ,WAAW,OAAO,GAAG,SACxF,iBACG;CACH,MAAM,WAAW,MAAM,OAA2B,IAAI;CACtD,MAAM,EAAE,WAAW,uBAAuB;CAC1C,MAAM,EAAE,OAAO,WAAW,SAAS,eAAe,KAAK,MAAM;CAC7D,MAAM,eAAe;EAAE,GAAG;EAAW,GAAG;EAAO,GAAG,iBAAiB,IAAI;CAAE;CAEzE,MAAM,oBAAoB,oBAAoB;EAC5C,MAAM,EAAE,YAAY;EACpB,IAAI,SACF,QAAQ,cAAc;GACpB,QAAQ,QAAQ;EAClB;EAEF,OAAO;CACT,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,oBAAoB,MAAM,cAAc,QAAQ,cAAc,GAAG,CAAC,cAAc,CAAC;CACvF,MAAM,kBAAkB,MAAM,cAAc,QAAQ,YAAY,GAAG,CAAC,YAAY,CAAC;CAEjF,MAAM,oBAAoB,mBAAmB;EAC3C,UAAU,MAAM;EAChB;EACA;CACF,CAAC;CAED,MAAM,mBAAmB,kBAAkB;EACzC;EACA;EACA;EACA;EACA,gBAAgB;EAChB,cAAc;CAChB,CAAC;CAED,MAAM,6BAA6B,uBAAuB;EACxD;EACA,SAAS;CACX,CAAC;CAED,MAAM,2BAA2B,uBAAuB;EACtD;EACA,SAAS;CACX,CAAC;CAED,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,kBAAkB,GAAG,aAAa,KAAK,KAAK;EAAG,OAAO;EAAzE,UAAA;GACG,qBAAqB,oBAAC,OAAD;IAAK,WAAW;IAA6B,UAAA;GAAoB,CAAA;GAEvF,oBAAC,SAAD;IAAO,KAAK;IAAU,WAAW;IAAkB,GAAI;GAAQ,CAAA;GAE9D,mBAAmB,oBAAC,OAAD;IAAK,WAAW;IAA2B,UAAA;GAAkB,CAAA;EAC9E;;AAET,CACF;AAEA,aAAa,cAAc"}

package/dist/components/Label/Label.cjs CHANGED Viewed

@@ -3,7 +3,7 @@ const require_stitches_config = require("../../stitches.config.cjs");
 const require_Text = require("../Text/Text.cjs");
 let _radix_ui_react_label = require("@radix-ui/react-label");
 _radix_ui_react_label = require_runtime.__toESM(_radix_ui_react_label, 1);
-//#region components/Label/Label.tsx
+// components/Label/Label.tsx
 var Label = require_stitches_config.styled(_radix_ui_react_label.Root, require_Text.Text, {
 	display: "inline-block",
 	verticalAlign: "middle",
@@ -16,7 +16,6 @@ var Label = require_stitches_config.styled(_radix_ui_react_label.Root, require_T
 		transform: "capitalize"
 	}
 });
-//#endregion
 exports.Label = Label;
 //# sourceMappingURL=Label.cjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Label.cjs","names":[],"sources":["../../../components/Label/Label.tsx"],"sourcesContent":["import * as LabelPrimitive from '@radix-ui/react-label';\n\nimport { styled } from '../../stitches.config';\nimport { Text } from '../Text';\n\nexport const Label = styled(LabelPrimitive.Root, Text, {\n display: 'inline-block',\n verticalAlign: 'middle',\n cursor: 'default',\n fontWeight: '$medium',\n lineHeight: 2.18,\n\n defaultVariants: {\n size: '0',\n variant: 'subtle',\n transform: 'capitalize',\n },\n});\n"],"mappings":";;;;;;AAKA,IAAa,~~QAAQ~~,~~wBAAA~~,~~OAAO~~,sBAAe,~~MAAM~~,~~aAAA~~,MAAM;CACrD,SAAS;CACT,eAAe;CACf,QAAQ;CACR,YAAY;CACZ,YAAY;CAEZ,iBAAiB;EACf,MAAM;EACN,SAAS;EACT,WAAW;CACb;AACF,CAAC"}
1	+ {"version":3,"file":"Label.cjs","names":["styled","LabelPrimitive","Text"],"sources":["../../../components/Label/Label.tsx"],"sourcesContent":["import * as LabelPrimitive from '@radix-ui/react-label';\n\nimport { styled } from '../../stitches.config';\nimport { Text } from '../Text';\n\nexport const Label = styled(LabelPrimitive.Root, Text, {\n display: 'inline-block',\n verticalAlign: 'middle',\n cursor: 'default',\n fontWeight: '$medium',\n lineHeight: 2.18,\n\n defaultVariants: {\n size: '0',\n variant: 'subtle',\n transform: 'capitalize',\n },\n});\n"],"mappings":";;;;;;AAKA,IAAa,QAAQA,wBAAAA,OAAOC,sBAAe,MAAMC,aAAAA,MAAM;CACrD,SAAS;CACT,eAAe;CACf,QAAQ;CACR,YAAY;CACZ,YAAY;CAEZ,iBAAiB;EACf,MAAM;EACN,SAAS;EACT,WAAW;CACb;AACF,CAAC"}

package/dist/components/Label/Label.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { styled } from "../../stitches.config.js";
 import { Text } from "../Text/Text.js";
 import * as LabelPrimitive from "@radix-ui/react-label";
-//#region components/Label/Label.tsx
+// components/Label/Label.tsx
 var Label = styled(LabelPrimitive.Root, Text, {
 	display: "inline-block",
 	verticalAlign: "middle",
@@ -14,7 +14,6 @@ var Label = styled(LabelPrimitive.Root, Text, {
 		transform: "capitalize"
 	}
 });
-//#endregion
 export { Label };
 //# sourceMappingURL=Label.js.map

package/dist/components/Label/Label.vanilla.cjs CHANGED Viewed

@@ -4,7 +4,7 @@ const require_Label_vanilla_css = require("./Label.vanilla.css.cjs");
 let react = require("react");
 let _vanilla_extract_dynamic = require("@vanilla-extract/dynamic");
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region components/Label/Label.vanilla.tsx
+// components/Label/Label.vanilla.tsx
 var LabelVanillaComponentImpl = (0, react.forwardRef)(({ as, className, css, style, size, weight, variant, gradient, transform, noWrap, ...props }, ref) => {
 	const Component = as || "label";
 	const { colors } = require_themeContext.useVanillaExtractTheme();
@@ -14,23 +14,23 @@ var LabelVanillaComponentImpl = (0, react.forwardRef)(({ as, className, css, sty
 		...style,
 		...(0, _vanilla_extract_dynamic.assignInlineVars)(vars)
 	};
+	const recipeClass = require_Label_vanilla_css.labelRecipe({
+		size,
+		weight,
+		variant,
+		gradient,
+		transform,
+		noWrap
+	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
 		ref,
-		className: `${require_Label_vanilla_css.labelRecipe({
-			size,
-			weight,
-			variant,
-			gradient,
-			transform,
-			noWrap
-		})} ${className || ""}`.trim(),
+		className: `${recipeClass} ${className || ""}`.trim(),
 		style: mergedStyles,
 		...props
 	});
 });
 LabelVanillaComponentImpl.displayName = "LabelVanilla";
 var LabelVanilla = LabelVanillaComponentImpl;
-//#endregion
 exports.LabelVanilla = LabelVanilla;
 //# sourceMappingURL=Label.vanilla.cjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Label.vanilla.cjs","names":[],"sources":["../../../components/Label/Label.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n PolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { labelRecipe } from './Label.vanilla.css';\n\ntype LabelRecipeVariants = NonNullable<RecipeVariants<typeof labelRecipe>>;\n\ninterface LabelOwnProps extends LabelRecipeVariants, CSSProps {}\n\nexport type LabelVanillaProps<C extends ElementType = 'label'> = PolymorphicComponentProps<\n C,\n LabelOwnProps\n>;\n\ntype LabelVanillaComponent = PolymorphicComponent<'label', LabelVanillaProps<ElementType>>;\n\nconst LabelVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'label'>(\n {\n as,\n className,\n css,\n style,\n size,\n weight,\n variant,\n gradient,\n transform,\n noWrap,\n ...props\n }: LabelVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as \|\| 'label';\n const { colors } = useVanillaExtractTheme();\n\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const mergedStyles = {\n ...cssStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n const recipeClass = labelRecipe({ size, weight, variant, gradient, transform, noWrap });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className \|\| ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nLabelVanillaComponentImpl.displayName = 'LabelVanilla';\n\nexport const LabelVanilla = LabelVanillaComponentImpl as LabelVanillaComponent;\n"],"mappings":";;;;;;;AAwBA,IAAM,6BAAA,~~GAAA~~,~~MAAA~~,~~WAAA~~,~~EAEF~~,EACE,IACA,WACA,KACA,OACA,MACA,QACA,SACA,UACA,WACA,QACA,GAAG,SAEL,QACG;CACH,MAAM,YAAY,MAAM;CACxB,MAAM,EAAE,~~WAAW~~,~~qBAAA~~,uBAAuB;CAE1C,MAAM,EAAE,OAAO,WAAW,~~SAAS~~,~~iBAAA~~,eAAe,KAAK,MAAM;CAE7D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,IAAA,~~GAAA~~,~~yBAAA~~,~~iBAAA~~,~~CAAoB~~,IAAI;CAC1B;~~CAIA~~,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EACO;EACL,WAAW,~~GALK~~,~~0BAAA,~~YAAY~~;GAAE;GAAM;GAAQ;GAAS;GAAU;GAAW;EAAO~~,~~CAKnE,EAAY,~~GAAG,aAAa,KAAK,KAAK;EACpD,OAAO;EACP,GAAI;CACL,CAAA;AAEL,CACF;AAEA,0BAA0B,cAAc;AAExC,IAAa,eAAe"}
1	+ {"version":3,"file":"Label.vanilla.cjs","names":["forwardRef","useVanillaExtractTheme","processCSSProp","assignInlineVars","labelRecipe"],"sources":["../../../components/Label/Label.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n PolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { labelRecipe } from './Label.vanilla.css';\n\ntype LabelRecipeVariants = NonNullable<RecipeVariants<typeof labelRecipe>>;\n\ninterface LabelOwnProps extends LabelRecipeVariants, CSSProps {}\n\nexport type LabelVanillaProps<C extends ElementType = 'label'> = PolymorphicComponentProps<\n C,\n LabelOwnProps\n>;\n\ntype LabelVanillaComponent = PolymorphicComponent<'label', LabelVanillaProps<ElementType>>;\n\nconst LabelVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'label'>(\n {\n as,\n className,\n css,\n style,\n size,\n weight,\n variant,\n gradient,\n transform,\n noWrap,\n ...props\n }: LabelVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as \|\| 'label';\n const { colors } = useVanillaExtractTheme();\n\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const mergedStyles = {\n ...cssStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n const recipeClass = labelRecipe({ size, weight, variant, gradient, transform, noWrap });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className \|\| ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nLabelVanillaComponentImpl.displayName = 'LabelVanilla';\n\nexport const LabelVanilla = LabelVanillaComponentImpl as LabelVanillaComponent;\n"],"mappings":";;;;;;;AAwBA,IAAM,6BAAA,GAA4BA,MAAAA,WAAAA,EAE9B,EACE,IACA,WACA,KACA,OACA,MACA,QACA,SACA,UACA,WACA,QACA,GAAG,SAEL,QACG;CACH,MAAM,YAAY,MAAM;CACxB,MAAM,EAAE,WAAWC,qBAAAA,uBAAuB;CAE1C,MAAM,EAAE,OAAO,WAAW,SAASC,iBAAAA,eAAe,KAAK,MAAM;CAE7D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,IAAA,GAAGC,yBAAAA,iBAAAA,CAAiB,IAAI;CAC1B;CAEA,MAAM,cAAcC,0BAAAA,YAAY;EAAE;EAAM;EAAQ;EAAS;EAAU;EAAW;CAAO,CAAC;CAEtF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EACO;EACL,WAAW,GAAG,YAAY,GAAG,aAAa,KAAK,KAAK;EACpD,OAAO;EACP,GAAI;CACL,CAAA;AAEL,CACF;AAEA,0BAA0B,cAAc;AAExC,IAAa,eAAe"}

package/dist/components/Label/Label.vanilla.css.cjs CHANGED Viewed

@@ -1,5 +1,5 @@
 ;/* empty css                                   */
-//#region components/Label/Label.vanilla.css.ts
+// components/Label/Label.vanilla.css.ts
 var labelRecipe = (0, require("@vanilla-extract/recipes/createRuntimeFn").createRuntimeFn)({
 	defaultClassName: "_14umx1r1 _14umx1r0",
 	variantClassNames: {
@@ -49,7 +49,6 @@ var labelRecipe = (0, require("@vanilla-extract/recipes/createRuntimeFn").create
 	},
 	compoundVariants: []
 });
-//#endregion
 exports.labelRecipe = labelRecipe;
 //# sourceMappingURL=Label.vanilla.css.cjs.map

package/dist/components/Label/Label.vanilla.css.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Label.vanilla.css.cjs","names":[],"sources":["../../../components/Label/Label.vanilla.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport {\n colorVariants,\n gradientVariants,\n noWrapVariants,\n sizeVariants,\n transformVariants,\n weightVariants,\n} from '../../styles/textVariants.css';\nimport { tokens } from '../../styles/tokens.css';\n\n// Base label styles (inherits from Text component with label-specific overrides)\nconst labelBase = style({\n margin: '0',\n fontFamily: tokens.fonts.rubik,\n fontVariantNumeric: 'tabular-nums',\n display: 'inline-block',\n verticalAlign: 'middle',\n cursor: 'default',\n fontWeight: tokens.fontWeights.medium,\n lineHeight: '2.18',\n});\n\nexport const labelRecipe = recipe({\n base: labelBase,\n\n variants: {\n size: sizeVariants,\n weight: weightVariants,\n variant: colorVariants,\n gradient: gradientVariants,\n transform: transformVariants,\n noWrap: noWrapVariants,\n },\n\n defaultVariants: {\n size: '0',\n variant: 'subtle',\n transform: 'capitalize',\n },\n});\n"],"mappings":""}
1	+ {"version":3,"file":"Label.vanilla.css.cjs","names":["_7a468"],"sources":["../../../components/Label/Label.vanilla.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport {\n colorVariants,\n gradientVariants,\n noWrapVariants,\n sizeVariants,\n transformVariants,\n weightVariants,\n} from '../../styles/textVariants.css';\nimport { tokens } from '../../styles/tokens.css';\n\n// Base label styles (inherits from Text component with label-specific overrides)\nconst labelBase = style({\n margin: '0',\n fontFamily: tokens.fonts.rubik,\n fontVariantNumeric: 'tabular-nums',\n display: 'inline-block',\n verticalAlign: 'middle',\n cursor: 'default',\n fontWeight: tokens.fontWeights.medium,\n lineHeight: '2.18',\n});\n\nexport const labelRecipe = recipe({\n base: labelBase,\n\n variants: {\n size: sizeVariants,\n weight: weightVariants,\n variant: colorVariants,\n gradient: gradientVariants,\n transform: transformVariants,\n noWrap: noWrapVariants,\n },\n\n defaultVariants: {\n size: '0',\n variant: 'subtle',\n transform: 'capitalize',\n },\n});\n"],"mappings":""}

package/dist/components/Label/Label.vanilla.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /* empty css                                 */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
-//#region components/Label/Label.vanilla.css.ts
+// components/Label/Label.vanilla.css.ts
 var labelRecipe = createRuntimeFn({
 	defaultClassName: "_14umx1r1 _14umx1r0",
 	variantClassNames: {
@@ -50,7 +50,6 @@ var labelRecipe = createRuntimeFn({
 	},
 	compoundVariants: []
 });
-//#endregion
 export { labelRecipe };
 //# sourceMappingURL=Label.vanilla.css.js.map

package/dist/components/Label/Label.vanilla.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Label.vanilla.css.js","names":[],"sources":["../../../components/Label/Label.vanilla.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport {\n colorVariants,\n gradientVariants,\n noWrapVariants,\n sizeVariants,\n transformVariants,\n weightVariants,\n} from '../../styles/textVariants.css';\nimport { tokens } from '../../styles/tokens.css';\n\n// Base label styles (inherits from Text component with label-specific overrides)\nconst labelBase = style({\n margin: '0',\n fontFamily: tokens.fonts.rubik,\n fontVariantNumeric: 'tabular-nums',\n display: 'inline-block',\n verticalAlign: 'middle',\n cursor: 'default',\n fontWeight: tokens.fontWeights.medium,\n lineHeight: '2.18',\n});\n\nexport const labelRecipe = recipe({\n base: labelBase,\n\n variants: {\n size: sizeVariants,\n weight: weightVariants,\n variant: colorVariants,\n gradient: gradientVariants,\n transform: transformVariants,\n noWrap: noWrapVariants,\n },\n\n defaultVariants: {\n size: '0',\n variant: 'subtle',\n transform: 'capitalize',\n },\n});\n"],"mappings":""}
1	+ {"version":3,"file":"Label.vanilla.css.js","names":["_7a468"],"sources":["../../../components/Label/Label.vanilla.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport {\n colorVariants,\n gradientVariants,\n noWrapVariants,\n sizeVariants,\n transformVariants,\n weightVariants,\n} from '../../styles/textVariants.css';\nimport { tokens } from '../../styles/tokens.css';\n\n// Base label styles (inherits from Text component with label-specific overrides)\nconst labelBase = style({\n margin: '0',\n fontFamily: tokens.fonts.rubik,\n fontVariantNumeric: 'tabular-nums',\n display: 'inline-block',\n verticalAlign: 'middle',\n cursor: 'default',\n fontWeight: tokens.fontWeights.medium,\n lineHeight: '2.18',\n});\n\nexport const labelRecipe = recipe({\n base: labelBase,\n\n variants: {\n size: sizeVariants,\n weight: weightVariants,\n variant: colorVariants,\n gradient: gradientVariants,\n transform: transformVariants,\n noWrap: noWrapVariants,\n },\n\n defaultVariants: {\n size: '0',\n variant: 'subtle',\n transform: 'capitalize',\n },\n});\n"],"mappings":""}

package/dist/components/Label/Label.vanilla.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { labelRecipe } from "./Label.vanilla.css.js";
 import { forwardRef } from "react";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { jsx } from "react/jsx-runtime";
-//#region components/Label/Label.vanilla.tsx
+// components/Label/Label.vanilla.tsx
 var LabelVanillaComponentImpl = forwardRef(({ as, className, css, style, size, weight, variant, gradient, transform, noWrap, ...props }, ref) => {
 	const Component = as || "label";
 	const { colors } = useVanillaExtractTheme();
@@ -14,23 +14,23 @@ var LabelVanillaComponentImpl = forwardRef(({ as, className, css, style, size, w
 		...style,
 		...assignInlineVars(vars)
 	};
+	const recipeClass = labelRecipe({
+		size,
+		weight,
+		variant,
+		gradient,
+		transform,
+		noWrap
+	});
 	return /* @__PURE__ */ jsx(Component, {
 		ref,
-		className: `${labelRecipe({
-			size,
-			weight,
-			variant,
-			gradient,
-			transform,
-			noWrap
-		})} ${className || ""}`.trim(),
+		className: `${recipeClass} ${className || ""}`.trim(),
 		style: mergedStyles,
 		...props
 	});
 });
 LabelVanillaComponentImpl.displayName = "LabelVanilla";
 var LabelVanilla = LabelVanillaComponentImpl;
-//#endregion
 export { LabelVanilla };
 //# sourceMappingURL=Label.vanilla.js.map

package/dist/components/Label/Label.vanilla.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Label.vanilla.js","names":[],"sources":["../../../components/Label/Label.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n PolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { labelRecipe } from './Label.vanilla.css';\n\ntype LabelRecipeVariants = NonNullable<RecipeVariants<typeof labelRecipe>>;\n\ninterface LabelOwnProps extends LabelRecipeVariants, CSSProps {}\n\nexport type LabelVanillaProps<C extends ElementType = 'label'> = PolymorphicComponentProps<\n C,\n LabelOwnProps\n>;\n\ntype LabelVanillaComponent = PolymorphicComponent<'label', LabelVanillaProps<ElementType>>;\n\nconst LabelVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'label'>(\n {\n as,\n className,\n css,\n style,\n size,\n weight,\n variant,\n gradient,\n transform,\n noWrap,\n ...props\n }: LabelVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as \|\| 'label';\n const { colors } = useVanillaExtractTheme();\n\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const mergedStyles = {\n ...cssStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n const recipeClass = labelRecipe({ size, weight, variant, gradient, transform, noWrap });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className \|\| ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nLabelVanillaComponentImpl.displayName = 'LabelVanilla';\n\nexport const LabelVanilla = LabelVanillaComponentImpl as LabelVanillaComponent;\n"],"mappings":";;;;;;;AAwBA,IAAM,4BAA4B,YAE9B,EACE,IACA,WACA,KACA,OACA,MACA,QACA,SACA,UACA,WACA,QACA,GAAG,SAEL,QACG;CACH,MAAM,YAAY,MAAM;CACxB,MAAM,EAAE,WAAW,uBAAuB;CAE1C,MAAM,EAAE,OAAO,WAAW,SAAS,eAAe,KAAK,MAAM;CAE7D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,GAAG,iBAAiB,IAAI;CAC1B;~~CAIA~~,OACE,oBAAC,WAAD;EACO;EACL,WAAW,~~GALK~~,YAAY~~;GAAE;GAAM;GAAQ;GAAS;GAAU;GAAW;EAAO~~,~~CAKnE,EAAY,~~GAAG,aAAa,KAAK,KAAK;EACpD,OAAO;EACP,GAAI;CACL,CAAA;AAEL,CACF;AAEA,0BAA0B,cAAc;AAExC,IAAa,eAAe"}
1	+ {"version":3,"file":"Label.vanilla.js","names":[],"sources":["../../../components/Label/Label.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n PolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { labelRecipe } from './Label.vanilla.css';\n\ntype LabelRecipeVariants = NonNullable<RecipeVariants<typeof labelRecipe>>;\n\ninterface LabelOwnProps extends LabelRecipeVariants, CSSProps {}\n\nexport type LabelVanillaProps<C extends ElementType = 'label'> = PolymorphicComponentProps<\n C,\n LabelOwnProps\n>;\n\ntype LabelVanillaComponent = PolymorphicComponent<'label', LabelVanillaProps<ElementType>>;\n\nconst LabelVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'label'>(\n {\n as,\n className,\n css,\n style,\n size,\n weight,\n variant,\n gradient,\n transform,\n noWrap,\n ...props\n }: LabelVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as \|\| 'label';\n const { colors } = useVanillaExtractTheme();\n\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const mergedStyles = {\n ...cssStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n const recipeClass = labelRecipe({ size, weight, variant, gradient, transform, noWrap });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className \|\| ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nLabelVanillaComponentImpl.displayName = 'LabelVanilla';\n\nexport const LabelVanilla = LabelVanillaComponentImpl as LabelVanillaComponent;\n"],"mappings":";;;;;;;AAwBA,IAAM,4BAA4B,YAE9B,EACE,IACA,WACA,KACA,OACA,MACA,QACA,SACA,UACA,WACA,QACA,GAAG,SAEL,QACG;CACH,MAAM,YAAY,MAAM;CACxB,MAAM,EAAE,WAAW,uBAAuB;CAE1C,MAAM,EAAE,OAAO,WAAW,SAAS,eAAe,KAAK,MAAM;CAE7D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,GAAG,iBAAiB,IAAI;CAC1B;CAEA,MAAM,cAAc,YAAY;EAAE;EAAM;EAAQ;EAAS;EAAU;EAAW;CAAO,CAAC;CAEtF,OACE,oBAAC,WAAD;EACO;EACL,WAAW,GAAG,YAAY,GAAG,aAAa,KAAK,KAAK;EACpD,OAAO;EACP,GAAI;CACL,CAAA;AAEL,CACF;AAEA,0BAA0B,cAAc;AAExC,IAAa,eAAe"}

package/dist/components/Link/Link.cjs CHANGED Viewed

@@ -52,7 +52,6 @@ var Link = require_stitches_config.styled("a", {
 	} },
 	defaultVariants: { variant: "contrast" }
 });
-//#endregion
 exports.Link = Link;
 //# sourceMappingURL=Link.cjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Link.cjs","names":[],"sources":["../../../components/Link/Link.tsx"],"sourcesContent":["import { styled } from '../../stitches.config';\nimport { Text } from '../Text';\n\nexport const UnstyledLink = styled('a', {\n color: 'inherit',\n textDecoration: 'inherit',\n fontWeight: 'inherit',\n});\n\nexport const Link = styled('a', {\n alignItems: 'center',\n gap: '$1',\n flexShrink: 0,\n outline: 'none',\n\n textDecoration: 'underline',\n textUnderlineOffset: '3px',\n textDecorationColor: '$slate4',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n lineHeight: 'inherit',\n fontFamily: '$rubik',\n\n '@hover': {\n '&:hover': {\n textDecorationLine: 'underline',\n },\n },\n '&:focus': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineOffset: '2px',\n textDecorationLine: 'none',\n },\n [`& ${Text}`]: {\n color: 'inherit',\n },\n variants: {\n variant: {\n blue: {\n color: '$linkBlue',\n textDecoration: 'none',\n textDecorationColor: '$linkBlueTextDecoration',\n '&:focus': {\n outlineColor: '$linkBlueFocusOutline',\n },\n },\n primary: {\n color: '$linkPrimary',\n textDecorationColor: '$linkPrimaryTextDecoration',\n '@hover': {\n '&:hover': {\n textDecorationColor: '$linkPrimaryHoverTextDecoration',\n },\n },\n '&:focus': {\n outlineColor: '$linkPrimaryFocusOutline',\n },\n },\n subtle: {\n color: '$linkSubtle',\n textDecorationColor: '$linkSubtleTextDecoration',\n '@hover': {\n '&:hover': {\n textDecorationColor: '$linkSubtleHoverTextDecoration',\n },\n },\n '&:focus': {\n outlineColor: '$linkSubtleFocusOutline',\n },\n },\n contrast: {\n color: '$linkContrast',\n textDecorationColor: '$linkContrastTextDecoration',\n '@hover': {\n '&:hover': {\n textDecorationColor: '$linkContrastHoverTextDecoration',\n },\n },\n '&:focus': {\n outlineColor: '$linkContrastFocusOutline',\n },\n },\n },\n },\n defaultVariants: {\n variant: 'contrast',\n },\n});\n"],"mappings":";;~~AAG4B~~,~~wBAAA~~,OAAO,KAAK;CACtC,OAAO;CACP,gBAAgB;CAChB,YAAY;AACd,CAAC;AAED,IAAa,~~OAAO~~,~~wBAAA~~,OAAO,KAAK;CAC9B,YAAY;CACZ,KAAK;CACL,YAAY;CACZ,SAAS;CAET,gBAAgB;CAChB,qBAAqB;CACrB,qBAAqB;CACrB,yBAAyB;CACzB,YAAY;CACZ,YAAY;CAEZ,UAAU,EACR,WAAW,EACT,oBAAoB,YACtB,EACF;CACA,WAAW;EACT,cAAc;EACd,cAAc;EACd,eAAe;EACf,oBAAoB;CACtB;EACC,~~KAAK~~,~~aAAA~~,SAAS,EACb,OAAO,UACT;CACA,UAAU,EACR,SAAS;EACP,MAAM;GACJ,OAAO;GACP,gBAAgB;GAChB,qBAAqB;GACrB,WAAW,EACT,cAAc,wBAChB;EACF;EACA,SAAS;GACP,OAAO;GACP,qBAAqB;GACrB,UAAU,EACR,WAAW,EACT,qBAAqB,kCACvB,EACF;GACA,WAAW,EACT,cAAc,2BAChB;EACF;EACA,QAAQ;GACN,OAAO;GACP,qBAAqB;GACrB,UAAU,EACR,WAAW,EACT,qBAAqB,iCACvB,EACF;GACA,WAAW,EACT,cAAc,0BAChB;EACF;EACA,UAAU;GACR,OAAO;GACP,qBAAqB;GACrB,UAAU,EACR,WAAW,EACT,qBAAqB,mCACvB,EACF;GACA,WAAW,EACT,cAAc,4BAChB;EACF;CACF,EACF;CACA,iBAAiB,EACf,SAAS,WACX;AACF,CAAC"}
1	+ {"version":3,"file":"Link.cjs","names":["styled","Text"],"sources":["../../../components/Link/Link.tsx"],"sourcesContent":["import { styled } from '../../stitches.config';\nimport { Text } from '../Text';\n\nexport const UnstyledLink = styled('a', {\n color: 'inherit',\n textDecoration: 'inherit',\n fontWeight: 'inherit',\n});\n\nexport const Link = styled('a', {\n alignItems: 'center',\n gap: '$1',\n flexShrink: 0,\n outline: 'none',\n\n textDecoration: 'underline',\n textUnderlineOffset: '3px',\n textDecorationColor: '$slate4',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n lineHeight: 'inherit',\n fontFamily: '$rubik',\n\n '@hover': {\n '&:hover': {\n textDecorationLine: 'underline',\n },\n },\n '&:focus': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineOffset: '2px',\n textDecorationLine: 'none',\n },\n [`& ${Text}`]: {\n color: 'inherit',\n },\n variants: {\n variant: {\n blue: {\n color: '$linkBlue',\n textDecoration: 'none',\n textDecorationColor: '$linkBlueTextDecoration',\n '&:focus': {\n outlineColor: '$linkBlueFocusOutline',\n },\n },\n primary: {\n color: '$linkPrimary',\n textDecorationColor: '$linkPrimaryTextDecoration',\n '@hover': {\n '&:hover': {\n textDecorationColor: '$linkPrimaryHoverTextDecoration',\n },\n },\n '&:focus': {\n outlineColor: '$linkPrimaryFocusOutline',\n },\n },\n subtle: {\n color: '$linkSubtle',\n textDecorationColor: '$linkSubtleTextDecoration',\n '@hover': {\n '&:hover': {\n textDecorationColor: '$linkSubtleHoverTextDecoration',\n },\n },\n '&:focus': {\n outlineColor: '$linkSubtleFocusOutline',\n },\n },\n contrast: {\n color: '$linkContrast',\n textDecorationColor: '$linkContrastTextDecoration',\n '@hover': {\n '&:hover': {\n textDecorationColor: '$linkContrastHoverTextDecoration',\n },\n },\n '&:focus': {\n outlineColor: '$linkContrastFocusOutline',\n },\n },\n },\n },\n defaultVariants: {\n variant: 'contrast',\n },\n});\n"],"mappings":";;AAG4BA,wBAAAA,OAAO,KAAK;CACtC,OAAO;CACP,gBAAgB;CAChB,YAAY;AACd,CAAC;AAED,IAAa,OAAOA,wBAAAA,OAAO,KAAK;CAC9B,YAAY;CACZ,KAAK;CACL,YAAY;CACZ,SAAS;CAET,gBAAgB;CAChB,qBAAqB;CACrB,qBAAqB;CACrB,yBAAyB;CACzB,YAAY;CACZ,YAAY;CAEZ,UAAU,EACR,WAAW,EACT,oBAAoB,YACtB,EACF;CACA,WAAW;EACT,cAAc;EACd,cAAc;EACd,eAAe;EACf,oBAAoB;CACtB;EACC,KAAKC,aAAAA,SAAS,EACb,OAAO,UACT;CACA,UAAU,EACR,SAAS;EACP,MAAM;GACJ,OAAO;GACP,gBAAgB;GAChB,qBAAqB;GACrB,WAAW,EACT,cAAc,wBAChB;EACF;EACA,SAAS;GACP,OAAO;GACP,qBAAqB;GACrB,UAAU,EACR,WAAW,EACT,qBAAqB,kCACvB,EACF;GACA,WAAW,EACT,cAAc,2BAChB;EACF;EACA,QAAQ;GACN,OAAO;GACP,qBAAqB;GACrB,UAAU,EACR,WAAW,EACT,qBAAqB,iCACvB,EACF;GACA,WAAW,EACT,cAAc,0BAChB;EACF;EACA,UAAU;GACR,OAAO;GACP,qBAAqB;GACrB,UAAU,EACR,WAAW,EACT,qBAAqB,mCACvB,EACF;GACA,WAAW,EACT,cAAc,4BAChB;EACF;CACF,EACF;CACA,iBAAiB,EACf,SAAS,WACX;AACF,CAAC"}

package/dist/components/Link/Link.js CHANGED Viewed

@@ -52,7 +52,6 @@ var Link = styled("a", {
 	} },
 	defaultVariants: { variant: "contrast" }
 });
-//#endregion
 export { Link };
 //# sourceMappingURL=Link.js.map

package/dist/components/Link/Link.themes.cjs CHANGED Viewed

@@ -1,7 +1,7 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
 let tinycolor2 = require("tinycolor2");
 tinycolor2 = require_runtime.__toESM(tinycolor2, 1);
-//#region components/Link/Link.themes.ts
+// components/Link/Link.themes.ts
 var Theme;
 (function(_Theme) {
 	_Theme.getLight = (primaryColor) => ({
@@ -41,7 +41,6 @@ var Theme;
 		linkPrimaryFocusOutline: (0, tinycolor2.default)(primaryColor.value).lighten(16).toHslString()
 	});
 })(Theme || (Theme = {}));
-//#endregion
 Object.defineProperty(exports, "Theme", {
 	enumerable: true,
 	get: function() {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Link.themes.cjs","names":[],"sources":["../../../components/Link/Link.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\nexport namespace Theme {\n type Colors = {\n linkSubtle: Property.Color;\n linkBlueTextDecoration: Property.Color;\n linkBlueHoverTextDecoration: Property.Color;\n linkBlueFocusOutline: Property.Color;\n linkContrast: Property.Color;\n linkContrastTextDecoration: Property.Color;\n linkContrastHoverTextDecoration: Property.Color;\n linkContrastFocusOutline: Property.Color;\n linkSubtleTextDecoration: Property.Color;\n linkSubtleHoverTextDecoration: Property.Color;\n linkSubtleFocusOutline: Property.Color;\n linkPrimary: Property.Color;\n linkPrimaryTextDecoration: Property.Color;\n linkPrimaryHoverTextDecoration: Property.Color;\n linkPrimaryFocusOutline: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n linkBlue: '$blue11',\n linkBlueTextDecoration: '$blue7',\n linkBlueHoverTextDecoration: '$blue11',\n linkBlueFocusOutline: '$blue8',\n linkContrast: '$hiContrast',\n linkContrastTextDecoration: '$slate8',\n linkContrastHoverTextDecoration: '$hiContrast',\n linkContrastFocusOutline: '$slate8',\n linkSubtle: '$deepBlue7',\n linkSubtleTextDecoration: '$deepBlue5',\n linkSubtleHoverTextDecoration: '$deepBlue7',\n linkSubtleFocusOutline: '$deepBlue4',\n linkPrimary: tinycolor(primaryColor.value).darken(26).toHslString(),\n linkPrimaryTextDecoration: tinycolor(primaryColor.value).darken(16).toHslString(),\n linkPrimaryHoverTextDecoration: tinycolor(primaryColor.value).darken(26).toHslString(),\n linkPrimaryFocusOutline: tinycolor(primaryColor.value).darken(16).toHslString(),\n });\n\n export const getDark: Factory = (primaryColor) => ({\n linkBlue: '$blue11',\n linkBlueTextDecoration: '$blue8',\n linkBlueHoverTextDecoration: '$blue11',\n linkBlueFocusOutline: '$blue8',\n linkContrast: '$hiContrast',\n linkContrastTextDecoration: '$slate8',\n linkContrastHoverTextDecoration: '$hiContrast',\n linkContrastFocusOutline: '$slate8',\n linkSubtle: '$deepBlue6',\n linkSubtleTextDecoration: '$deepBlue4',\n linkSubtleHoverTextDecoration: '$deepBlue5',\n linkSubtleFocusOutline: '$deepBlue3',\n linkPrimary: '$primary',\n linkPrimaryTextDecoration: tinycolor(primaryColor.value).lighten(16).toHslString(),\n linkPrimaryHoverTextDecoration: tinycolor(primaryColor.value).darken(20).toHslString(),\n linkPrimaryFocusOutline: tinycolor(primaryColor.value).lighten(16).toHslString(),\n });\n}\n"],"mappings":";;;;AAIO,~~IAAA;;~~CAqBQ,OAAA,YAAqB,kBAAkB;EAClD,UAAU;EACV,wBAAwB;EACxB,6BAA6B;EAC7B,sBAAsB;EACtB,cAAc;EACd,4BAA4B;EAC5B,iCAAiC;EACjC,0BAA0B;EAC1B,YAAY;EACZ,0BAA0B;EAC1B,+BAA+B;EAC/B,wBAAwB;EACxB,cAAA,~~GAAA~~,~~WAAA~~,~~QAAA~~,~~CAAuB~~,aAAa,KAAK,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,YAAY;EAClE,4BAAA,~~GAAA~~,~~WAAA~~,~~QAAA~~,~~CAAqC~~,aAAa,KAAK,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,YAAY;EAChF,iCAAA,~~GAAA~~,~~WAAA~~,~~QAAA~~,~~CAA0C~~,aAAa,KAAK,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,YAAY;EACrF,0BAAA,~~GAAA~~,~~WAAA~~,~~QAAA~~,~~CAAmC~~,aAAa,KAAK,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,YAAY;CAChF;CAEa,OAAA,WAAoB,kBAAkB;EACjD,UAAU;EACV,wBAAwB;EACxB,6BAA6B;EAC7B,sBAAsB;EACtB,cAAc;EACd,4BAA4B;EAC5B,iCAAiC;EACjC,0BAA0B;EAC1B,YAAY;EACZ,0BAA0B;EAC1B,+BAA+B;EAC/B,wBAAwB;EACxB,aAAa;EACb,4BAAA,~~GAAA~~,~~WAAA~~,~~QAAA~~,~~CAAqC~~,aAAa,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,YAAY;EACjF,iCAAA,~~GAAA~~,~~WAAA~~,~~QAAA~~,~~CAA0C~~,aAAa,KAAK,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,YAAY;EACrF,0BAAA,~~GAAA~~,~~WAAA~~,~~QAAA~~,~~CAAmC~~,aAAa,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,YAAY;CACjF;~~GACD~~,UAAA,QAAA,CAAA,EAAD"}
1	+ {"version":3,"file":"Link.themes.cjs","names":["tinycolor"],"sources":["../../../components/Link/Link.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\nexport namespace Theme {\n type Colors = {\n linkSubtle: Property.Color;\n linkBlueTextDecoration: Property.Color;\n linkBlueHoverTextDecoration: Property.Color;\n linkBlueFocusOutline: Property.Color;\n linkContrast: Property.Color;\n linkContrastTextDecoration: Property.Color;\n linkContrastHoverTextDecoration: Property.Color;\n linkContrastFocusOutline: Property.Color;\n linkSubtleTextDecoration: Property.Color;\n linkSubtleHoverTextDecoration: Property.Color;\n linkSubtleFocusOutline: Property.Color;\n linkPrimary: Property.Color;\n linkPrimaryTextDecoration: Property.Color;\n linkPrimaryHoverTextDecoration: Property.Color;\n linkPrimaryFocusOutline: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n linkBlue: '$blue11',\n linkBlueTextDecoration: '$blue7',\n linkBlueHoverTextDecoration: '$blue11',\n linkBlueFocusOutline: '$blue8',\n linkContrast: '$hiContrast',\n linkContrastTextDecoration: '$slate8',\n linkContrastHoverTextDecoration: '$hiContrast',\n linkContrastFocusOutline: '$slate8',\n linkSubtle: '$deepBlue7',\n linkSubtleTextDecoration: '$deepBlue5',\n linkSubtleHoverTextDecoration: '$deepBlue7',\n linkSubtleFocusOutline: '$deepBlue4',\n linkPrimary: tinycolor(primaryColor.value).darken(26).toHslString(),\n linkPrimaryTextDecoration: tinycolor(primaryColor.value).darken(16).toHslString(),\n linkPrimaryHoverTextDecoration: tinycolor(primaryColor.value).darken(26).toHslString(),\n linkPrimaryFocusOutline: tinycolor(primaryColor.value).darken(16).toHslString(),\n });\n\n export const getDark: Factory = (primaryColor) => ({\n linkBlue: '$blue11',\n linkBlueTextDecoration: '$blue8',\n linkBlueHoverTextDecoration: '$blue11',\n linkBlueFocusOutline: '$blue8',\n linkContrast: '$hiContrast',\n linkContrastTextDecoration: '$slate8',\n linkContrastHoverTextDecoration: '$hiContrast',\n linkContrastFocusOutline: '$slate8',\n linkSubtle: '$deepBlue6',\n linkSubtleTextDecoration: '$deepBlue4',\n linkSubtleHoverTextDecoration: '$deepBlue5',\n linkSubtleFocusOutline: '$deepBlue3',\n linkPrimary: '$primary',\n linkPrimaryTextDecoration: tinycolor(primaryColor.value).lighten(16).toHslString(),\n linkPrimaryHoverTextDecoration: tinycolor(primaryColor.value).darken(20).toHslString(),\n linkPrimaryFocusOutline: tinycolor(primaryColor.value).lighten(16).toHslString(),\n });\n}\n"],"mappings":";;;;AAIO,IAAU;CAAV,SAAA,QAAA;CAqBQ,OAAA,YAAqB,kBAAkB;EAClD,UAAU;EACV,wBAAwB;EACxB,6BAA6B;EAC7B,sBAAsB;EACtB,cAAc;EACd,4BAA4B;EAC5B,iCAAiC;EACjC,0BAA0B;EAC1B,YAAY;EACZ,0BAA0B;EAC1B,+BAA+B;EAC/B,wBAAwB;EACxB,cAAA,GAAaA,WAAAA,QAAAA,CAAU,aAAa,KAAK,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,YAAY;EAClE,4BAAA,GAA2BA,WAAAA,QAAAA,CAAU,aAAa,KAAK,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,YAAY;EAChF,iCAAA,GAAgCA,WAAAA,QAAAA,CAAU,aAAa,KAAK,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,YAAY;EACrF,0BAAA,GAAyBA,WAAAA,QAAAA,CAAU,aAAa,KAAK,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,YAAY;CAChF;CAEa,OAAA,WAAoB,kBAAkB;EACjD,UAAU;EACV,wBAAwB;EACxB,6BAA6B;EAC7B,sBAAsB;EACtB,cAAc;EACd,4BAA4B;EAC5B,iCAAiC;EACjC,0BAA0B;EAC1B,YAAY;EACZ,0BAA0B;EAC1B,+BAA+B;EAC/B,wBAAwB;EACxB,aAAa;EACb,4BAAA,GAA2BA,WAAAA,QAAAA,CAAU,aAAa,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,YAAY;EACjF,iCAAA,GAAgCA,WAAAA,QAAAA,CAAU,aAAa,KAAK,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,YAAY;EACrF,0BAAA,GAAyBA,WAAAA,QAAAA,CAAU,aAAa,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,YAAY;CACjF;AACD,EAAA,CAAA,UAAA,QAAA,CAAA,EAAD"}