npm - @traefik-labs/faency - Versions diffs - 12.3.3 → 12.3.5 - Mend

@traefik-labs/faency 12.3.3 → 12.3.5

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SidePanel.themes.js","names":[],"sources":["../../../components/SidePanel/SidePanel.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n sidePanelBackground: Property.Color;\n };\n\n type Factory = (primaryColor?: ColorInfo) => Colors;\n\n export const getLight: Factory = () => ({\n sidePanelBackground: '$deepBlue2',\n });\n\n export const getDark: Factory = () => ({\n sidePanelBackground: '$deepBlue3',\n });\n}\n"],"mappings":";AAIO,IAAA;;~~AAOQ~~,~~QAAA~~,kBAA2B,EACtC,qBAAqB,cACtB;~~AAEY~~,~~QAAA~~,iBAA0B,EACrC,qBAAqB,cACtB;yBACF"}
1	+ {"version":3,"file":"SidePanel.themes.js","names":[],"sources":["../../../components/SidePanel/SidePanel.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n sidePanelBackground: Property.Color;\n };\n\n type Factory = (primaryColor?: ColorInfo) => Colors;\n\n export const getLight: Factory = () => ({\n sidePanelBackground: '$deepBlue2',\n });\n\n export const getDark: Factory = () => ({\n sidePanelBackground: '$deepBlue3',\n });\n}\n"],"mappings":";AAIO,IAAA;;CAOQ,OAAA,kBAA2B,EACtC,qBAAqB,cACtB;CAEY,OAAA,iBAA0B,EACrC,qBAAqB,cACtB;yBACF"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Skeleton.themes.cjs","names":[],"sources":["../../../components/Skeleton/Skeleton.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n skeletonBackground: Property.Color;\n skeletonAnimation: Property.Color;\n };\n\n type Factory = (primaryColor?: ColorInfo) => Colors;\n\n export const getLight: Factory = () => ({\n skeletonBackground: '$slate4',\n skeletonAnimation: '$slate6',\n });\n\n export const getDark: Factory = () => ({\n skeletonBackground: '$deepBlue3',\n skeletonAnimation: '$deepBlue4',\n });\n}\n"],"mappings":";AAIO,IAAA;;~~AAQQ~~,~~QAAA~~,kBAA2B;EACtC,oBAAoB;EACpB,mBAAmB;EACpB;~~AAEY~~,~~QAAA~~,iBAA0B;EACrC,oBAAoB;EACpB,mBAAmB;EACpB;yBACF"}
1	+ {"version":3,"file":"Skeleton.themes.cjs","names":[],"sources":["../../../components/Skeleton/Skeleton.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n skeletonBackground: Property.Color;\n skeletonAnimation: Property.Color;\n };\n\n type Factory = (primaryColor?: ColorInfo) => Colors;\n\n export const getLight: Factory = () => ({\n skeletonBackground: '$slate4',\n skeletonAnimation: '$slate6',\n });\n\n export const getDark: Factory = () => ({\n skeletonBackground: '$deepBlue3',\n skeletonAnimation: '$deepBlue4',\n });\n}\n"],"mappings":";AAIO,IAAA;;CAQQ,OAAA,kBAA2B;EACtC,oBAAoB;EACpB,mBAAmB;EACpB;CAEY,OAAA,iBAA0B;EACrC,oBAAoB;EACpB,mBAAmB;EACpB;yBACF"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Skeleton.themes.js","names":[],"sources":["../../../components/Skeleton/Skeleton.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n skeletonBackground: Property.Color;\n skeletonAnimation: Property.Color;\n };\n\n type Factory = (primaryColor?: ColorInfo) => Colors;\n\n export const getLight: Factory = () => ({\n skeletonBackground: '$slate4',\n skeletonAnimation: '$slate6',\n });\n\n export const getDark: Factory = () => ({\n skeletonBackground: '$deepBlue3',\n skeletonAnimation: '$deepBlue4',\n });\n}\n"],"mappings":";AAIO,IAAA;;~~AAQQ~~,~~QAAA~~,kBAA2B;EACtC,oBAAoB;EACpB,mBAAmB;EACpB;~~AAEY~~,~~QAAA~~,iBAA0B;EACrC,oBAAoB;EACpB,mBAAmB;EACpB;yBACF"}
1	+ {"version":3,"file":"Skeleton.themes.js","names":[],"sources":["../../../components/Skeleton/Skeleton.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n skeletonBackground: Property.Color;\n skeletonAnimation: Property.Color;\n };\n\n type Factory = (primaryColor?: ColorInfo) => Colors;\n\n export const getLight: Factory = () => ({\n skeletonBackground: '$slate4',\n skeletonAnimation: '$slate6',\n });\n\n export const getDark: Factory = () => ({\n skeletonBackground: '$deepBlue3',\n skeletonAnimation: '$deepBlue4',\n });\n}\n"],"mappings":";AAIO,IAAA;;CAQQ,OAAA,kBAA2B;EACtC,oBAAoB;EACpB,mBAAmB;EACpB;CAEY,OAAA,iBAA0B;EACrC,oBAAoB;EACpB,mBAAmB;EACpB;yBACF"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Skeleton.vanilla.cjs","names":[],"sources":["../../../components/Skeleton/Skeleton.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 { skeletonRecipe } from './Skeleton.vanilla.css';\n\ntype SkeletonRecipeVariants = NonNullable<RecipeVariants<typeof skeletonRecipe>>;\n\ninterface SkeletonVanillaOwnProps extends SkeletonRecipeVariants, CSSProps {}\n\nexport type SkeletonVanillaProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n C,\n SkeletonVanillaOwnProps\n>;\n\ntype SkeletonVanillaComponent = PolymorphicComponent<'div', SkeletonVanillaProps<ElementType>>;\n\nconst SkeletonVanillaImpl = forwardRef(\n <C extends ElementType = 'div'>(\n { as, className, css, style, variant, ...props }: SkeletonVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as \|\| 'div';\n const { colors } = useVanillaExtractTheme();\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const mergedStyles = {\n ...cssStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n const recipeClass = skeletonRecipe({ variant });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className \|\| ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nSkeletonVanillaImpl.displayName = 'SkeletonVanilla';\n\nexport const SkeletonVanilla = SkeletonVanillaImpl as SkeletonVanillaComponent;\n"],"mappings":";;;;;;;;AAwBA,IAAM,uBAAA,GAAA,MAAA,aAEF,EAAE,IAAI,WAAW,KAAK,OAAO,SAAS,GAAG,SACzC,QACG;CACH,MAAM,YAAY,MAAM;CACxB,MAAM,EAAE,WAAW,qBAAA,wBAAwB;CAC3C,MAAM,EAAE,OAAO,WAAW,SAAS,iBAAA,eAAe,KAAK,OAAO;CAE9D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,IAAA,GAAA,yBAAA,kBAAoB,KAAK;EAC1B;~~AAID~~,~~QACE~~,iBAAA,GAAA,kBAAA,KAAC,WAAD;EACO;EACL,WAAW,GALK,6BAAA,eAAe,EAAE,SAAS,CAK5B,CAAY,GAAG,aAAa,KAAK,MAAM;EACrD,OAAO;EACP,GAAI;EACJ,CAAA;EAGP;AAED,oBAAoB,cAAc;AAElC,IAAa,kBAAkB"}
1	+ {"version":3,"file":"Skeleton.vanilla.cjs","names":[],"sources":["../../../components/Skeleton/Skeleton.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 { skeletonRecipe } from './Skeleton.vanilla.css';\n\ntype SkeletonRecipeVariants = NonNullable<RecipeVariants<typeof skeletonRecipe>>;\n\ninterface SkeletonVanillaOwnProps extends SkeletonRecipeVariants, CSSProps {}\n\nexport type SkeletonVanillaProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n C,\n SkeletonVanillaOwnProps\n>;\n\ntype SkeletonVanillaComponent = PolymorphicComponent<'div', SkeletonVanillaProps<ElementType>>;\n\nconst SkeletonVanillaImpl = forwardRef(\n <C extends ElementType = 'div'>(\n { as, className, css, style, variant, ...props }: SkeletonVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as \|\| 'div';\n const { colors } = useVanillaExtractTheme();\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const mergedStyles = {\n ...cssStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n const recipeClass = skeletonRecipe({ variant });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className \|\| ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nSkeletonVanillaImpl.displayName = 'SkeletonVanilla';\n\nexport const SkeletonVanilla = SkeletonVanillaImpl as SkeletonVanillaComponent;\n"],"mappings":";;;;;;;;AAwBA,IAAM,uBAAA,GAAA,MAAA,aAEF,EAAE,IAAI,WAAW,KAAK,OAAO,SAAS,GAAG,SACzC,QACG;CACH,MAAM,YAAY,MAAM;CACxB,MAAM,EAAE,WAAW,qBAAA,wBAAwB;CAC3C,MAAM,EAAE,OAAO,WAAW,SAAS,iBAAA,eAAe,KAAK,OAAO;CAE9D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,IAAA,GAAA,yBAAA,kBAAoB,KAAK;EAC1B;CAID,OACE,iBAAA,GAAA,kBAAA,KAAC,WAAD;EACO;EACL,WAAW,GALK,6BAAA,eAAe,EAAE,SAAS,CAK5B,CAAY,GAAG,aAAa,KAAK,MAAM;EACrD,OAAO;EACP,GAAI;EACJ,CAAA;EAGP;AAED,oBAAoB,cAAc;AAElC,IAAa,kBAAkB"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Skeleton.vanilla.js","names":[],"sources":["../../../components/Skeleton/Skeleton.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 { skeletonRecipe } from './Skeleton.vanilla.css';\n\ntype SkeletonRecipeVariants = NonNullable<RecipeVariants<typeof skeletonRecipe>>;\n\ninterface SkeletonVanillaOwnProps extends SkeletonRecipeVariants, CSSProps {}\n\nexport type SkeletonVanillaProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n C,\n SkeletonVanillaOwnProps\n>;\n\ntype SkeletonVanillaComponent = PolymorphicComponent<'div', SkeletonVanillaProps<ElementType>>;\n\nconst SkeletonVanillaImpl = forwardRef(\n <C extends ElementType = 'div'>(\n { as, className, css, style, variant, ...props }: SkeletonVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as \|\| 'div';\n const { colors } = useVanillaExtractTheme();\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const mergedStyles = {\n ...cssStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n const recipeClass = skeletonRecipe({ variant });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className \|\| ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nSkeletonVanillaImpl.displayName = 'SkeletonVanilla';\n\nexport const SkeletonVanilla = SkeletonVanillaImpl as SkeletonVanillaComponent;\n"],"mappings":";;;;;;;AAwBA,IAAM,sBAAsB,YAExB,EAAE,IAAI,WAAW,KAAK,OAAO,SAAS,GAAG,SACzC,QACG;CACH,MAAM,YAAY,MAAM;CACxB,MAAM,EAAE,WAAW,wBAAwB;CAC3C,MAAM,EAAE,OAAO,WAAW,SAAS,eAAe,KAAK,OAAO;CAE9D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,GAAG,iBAAiB,KAAK;EAC1B;~~AAID~~,~~QACE~~,oBAAC,WAAD;EACO;EACL,WAAW,GALK,eAAe,EAAE,SAAS,CAK5B,CAAY,GAAG,aAAa,KAAK,MAAM;EACrD,OAAO;EACP,GAAI;EACJ,CAAA;EAGP;AAED,oBAAoB,cAAc;AAElC,IAAa,kBAAkB"}
1	+ {"version":3,"file":"Skeleton.vanilla.js","names":[],"sources":["../../../components/Skeleton/Skeleton.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 { skeletonRecipe } from './Skeleton.vanilla.css';\n\ntype SkeletonRecipeVariants = NonNullable<RecipeVariants<typeof skeletonRecipe>>;\n\ninterface SkeletonVanillaOwnProps extends SkeletonRecipeVariants, CSSProps {}\n\nexport type SkeletonVanillaProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n C,\n SkeletonVanillaOwnProps\n>;\n\ntype SkeletonVanillaComponent = PolymorphicComponent<'div', SkeletonVanillaProps<ElementType>>;\n\nconst SkeletonVanillaImpl = forwardRef(\n <C extends ElementType = 'div'>(\n { as, className, css, style, variant, ...props }: SkeletonVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as \|\| 'div';\n const { colors } = useVanillaExtractTheme();\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const mergedStyles = {\n ...cssStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n const recipeClass = skeletonRecipe({ variant });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className \|\| ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nSkeletonVanillaImpl.displayName = 'SkeletonVanilla';\n\nexport const SkeletonVanilla = SkeletonVanillaImpl as SkeletonVanillaComponent;\n"],"mappings":";;;;;;;AAwBA,IAAM,sBAAsB,YAExB,EAAE,IAAI,WAAW,KAAK,OAAO,SAAS,GAAG,SACzC,QACG;CACH,MAAM,YAAY,MAAM;CACxB,MAAM,EAAE,WAAW,wBAAwB;CAC3C,MAAM,EAAE,OAAO,WAAW,SAAS,eAAe,KAAK,OAAO;CAE9D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,GAAG,iBAAiB,KAAK;EAC1B;CAID,OACE,oBAAC,WAAD;EACO;EACL,WAAW,GALK,eAAe,EAAE,SAAS,CAK5B,CAAY,GAAG,aAAa,KAAK,MAAM;EACrD,OAAO;EACP,GAAI;EACJ,CAAA;EAGP;AAED,oBAAoB,cAAc;AAElC,IAAa,kBAAkB"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Switch.themes.cjs","names":[],"sources":["../../../components/Switch/Switch.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n switchBackground: Property.Color;\n switchActiveBackground: Property.Color;\n switchFocusBorder: Property.Color;\n switchThumb: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n switchBackground: tinycolor('black').setAlpha(0.2).toHslString(),\n switchActiveBackground: '$primary',\n switchFocusBorder: primaryColor.helpers.pickScale(8),\n switchThumb: tinycolor('white').setAlpha(0.87).toHslString(),\n });\n\n export const getDark: Factory = (primaryColor) => ({\n switchBackground: tinycolor('white').setAlpha(0.2).toHslString(),\n switchActiveBackground: '$primary',\n switchFocusBorder: primaryColor.helpers.pickScale(11),\n switchThumb: tinycolor('black').setAlpha(0.87).toHslString(),\n });\n}\n"],"mappings":";;;;AAKO,IAAA;;~~AAUQ~~,~~QAAA~~,YAAqB,kBAAkB;EAClD,mBAAA,GAAA,WAAA,SAA4B,QAAQ,CAAC,SAAS,GAAI,CAAC,aAAa;EAChE,wBAAwB;EACxB,mBAAmB,aAAa,QAAQ,UAAU,EAAE;EACpD,cAAA,GAAA,WAAA,SAAuB,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC7D;~~AAEY~~,~~QAAA~~,WAAoB,kBAAkB;EACjD,mBAAA,GAAA,WAAA,SAA4B,QAAQ,CAAC,SAAS,GAAI,CAAC,aAAa;EAChE,wBAAwB;EACxB,mBAAmB,aAAa,QAAQ,UAAU,GAAG;EACrD,cAAA,GAAA,WAAA,SAAuB,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC7D;yBACF"}
1	+ {"version":3,"file":"Switch.themes.cjs","names":[],"sources":["../../../components/Switch/Switch.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n switchBackground: Property.Color;\n switchActiveBackground: Property.Color;\n switchFocusBorder: Property.Color;\n switchThumb: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n switchBackground: tinycolor('black').setAlpha(0.2).toHslString(),\n switchActiveBackground: '$primary',\n switchFocusBorder: primaryColor.helpers.pickScale(8),\n switchThumb: tinycolor('white').setAlpha(0.87).toHslString(),\n });\n\n export const getDark: Factory = (primaryColor) => ({\n switchBackground: tinycolor('white').setAlpha(0.2).toHslString(),\n switchActiveBackground: '$primary',\n switchFocusBorder: primaryColor.helpers.pickScale(11),\n switchThumb: tinycolor('black').setAlpha(0.87).toHslString(),\n });\n}\n"],"mappings":";;;;AAKO,IAAA;;CAUQ,OAAA,YAAqB,kBAAkB;EAClD,mBAAA,GAAA,WAAA,SAA4B,QAAQ,CAAC,SAAS,GAAI,CAAC,aAAa;EAChE,wBAAwB;EACxB,mBAAmB,aAAa,QAAQ,UAAU,EAAE;EACpD,cAAA,GAAA,WAAA,SAAuB,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC7D;CAEY,OAAA,WAAoB,kBAAkB;EACjD,mBAAA,GAAA,WAAA,SAA4B,QAAQ,CAAC,SAAS,GAAI,CAAC,aAAa;EAChE,wBAAwB;EACxB,mBAAmB,aAAa,QAAQ,UAAU,GAAG;EACrD,cAAA,GAAA,WAAA,SAAuB,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC7D;yBACF"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Switch.themes.js","names":[],"sources":["../../../components/Switch/Switch.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n switchBackground: Property.Color;\n switchActiveBackground: Property.Color;\n switchFocusBorder: Property.Color;\n switchThumb: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n switchBackground: tinycolor('black').setAlpha(0.2).toHslString(),\n switchActiveBackground: '$primary',\n switchFocusBorder: primaryColor.helpers.pickScale(8),\n switchThumb: tinycolor('white').setAlpha(0.87).toHslString(),\n });\n\n export const getDark: Factory = (primaryColor) => ({\n switchBackground: tinycolor('white').setAlpha(0.2).toHslString(),\n switchActiveBackground: '$primary',\n switchFocusBorder: primaryColor.helpers.pickScale(11),\n switchThumb: tinycolor('black').setAlpha(0.87).toHslString(),\n });\n}\n"],"mappings":";;AAKO,IAAA;;~~AAUQ~~,~~QAAA~~,YAAqB,kBAAkB;EAClD,kBAAkB,UAAU,QAAQ,CAAC,SAAS,GAAI,CAAC,aAAa;EAChE,wBAAwB;EACxB,mBAAmB,aAAa,QAAQ,UAAU,EAAE;EACpD,aAAa,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC7D;~~AAEY~~,~~QAAA~~,WAAoB,kBAAkB;EACjD,kBAAkB,UAAU,QAAQ,CAAC,SAAS,GAAI,CAAC,aAAa;EAChE,wBAAwB;EACxB,mBAAmB,aAAa,QAAQ,UAAU,GAAG;EACrD,aAAa,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC7D;yBACF"}
1	+ {"version":3,"file":"Switch.themes.js","names":[],"sources":["../../../components/Switch/Switch.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n switchBackground: Property.Color;\n switchActiveBackground: Property.Color;\n switchFocusBorder: Property.Color;\n switchThumb: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n switchBackground: tinycolor('black').setAlpha(0.2).toHslString(),\n switchActiveBackground: '$primary',\n switchFocusBorder: primaryColor.helpers.pickScale(8),\n switchThumb: tinycolor('white').setAlpha(0.87).toHslString(),\n });\n\n export const getDark: Factory = (primaryColor) => ({\n switchBackground: tinycolor('white').setAlpha(0.2).toHslString(),\n switchActiveBackground: '$primary',\n switchFocusBorder: primaryColor.helpers.pickScale(11),\n switchThumb: tinycolor('black').setAlpha(0.87).toHslString(),\n });\n}\n"],"mappings":";;AAKO,IAAA;;CAUQ,OAAA,YAAqB,kBAAkB;EAClD,kBAAkB,UAAU,QAAQ,CAAC,SAAS,GAAI,CAAC,aAAa;EAChE,wBAAwB;EACxB,mBAAmB,aAAa,QAAQ,UAAU,EAAE;EACpD,aAAa,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC7D;CAEY,OAAA,WAAoB,kBAAkB;EACjD,kBAAkB,UAAU,QAAQ,CAAC,SAAS,GAAI,CAAC,aAAa;EAChE,wBAAwB;EACxB,mBAAmB,aAAa,QAAQ,UAAU,GAAG;EACrD,aAAa,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC7D;yBACF"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.cjs","names":[],"sources":["../../../components/Table/Table.tsx"],"sourcesContent":["import { ChevronRightIcon } from '@radix-ui/react-icons';\nimport React, { ComponentProps, ElementRef, forwardRef, ReactNode, useMemo, useState } from 'react';\n\nimport { styled, VariantProps } from '../../stitches.config';\nimport { Box } from '../Box';\nimport { elevationVariants } from '../Elevation';\nimport { Flex } from '../Flex';\nimport { Label } from '../Label';\nimport { Text } from '../Text';\n\nexport const Caption = styled('caption', Text, {\n display: 'table-caption',\n textAlign: 'start',\n fontVariantNumeric: 'proportional-nums',\n fontWeight: '$medium',\n lineHeight: '1.25',\n});\n\nexport const Tbody = styled('tbody', {\n width: '100%',\n verticalAlign: 'middle',\n});\n\nexport const Th = styled('th', Label, {\n // override Label\n display: 'table-cell',\n verticalAlign: 'inherit',\n\n borderTopLeftRadius: 'inherit',\n borderTopRightRadius: 'inherit',\n\n textAlign: 'start',\n p: '$2 $3',\n borderBottom: '1px solid $tableRowBorder',\n\n variants: {\n align: {\n start: {\n textAlign: 'start',\n },\n center: {\n textAlign: 'center',\n },\n end: {\n textAlign: 'end',\n },\n },\n transform: {\n capitalize: {\n display: 'table-cell', // revert Label enforced value\n },\n },\n },\n defaultVariants: {\n align: 'start',\n },\n});\n\nexport const Td = styled('td', {\n boxSizing: 'border-box',\n p: '$5 $3',\n borderBottom: '1px solid $tableRowBorder',\n fontSize: '$3',\n lineHeight: '16px',\n verticalAlign: 'inherit',\n variants: {\n subtle: {\n true: {\n fontWeight: '$regular',\n color: '$tableSubtleText',\n },\n },\n align: {\n start: {\n textAlign: 'start',\n },\n center: {\n textAlign: 'center',\n },\n end: {\n textAlign: 'end',\n },\n },\n },\n defaultVariants: {\n align: 'start',\n },\n});\n\nexport const StyledTr = styled('tr', {\n verticalAlign: 'inherit',\n '&:hover': {\n color: '$tableHoverText',\n },\n [`&:last-child > ${Td}`]: {\n borderBottom: 'none',\n },\n\n variants: {\n interactive: {\n true: {\n '&:hover': {\n backgroundColor: '$tableHoverBackground',\n cursor: 'pointer',\n },\n },\n },\n active: {\n true: {\n backgroundColor: '$tableHoverBackground',\n color: '$tableActiveText',\n fontWeight: '$semiBold',\n },\n },\n },\n compoundVariants: [\n {\n interactive: true,\n active: true,\n css: {\n '&:hover': {\n color: '$tableActiveHoverText',\n },\n },\n },\n ],\n});\n\nconst AnimatedTr = ({\n collapsedContentColSpan,\n isOpen,\n children,\n}: {\n collapsedContentColSpan: number;\n isOpen: boolean;\n children: ReactNode;\n}) => {\n const appliedStyle = useMemo(\n () =>\n isOpen\n ? { transition: 'padding 0.2s ease-out' }\n : {\n transition: 'padding 0.2s ease-out',\n lineHeight: 0,\n fontSize: 0,\n padding: '0px 16px',\n border: 'none',\n },\n [isOpen],\n );\n\n const containerStyle = useMemo(\n () =>\n isOpen\n ? { transition: 'all 0.2s ease-out' }\n : {\n transition: 'all 0.2s ease-out',\n height: 0,\n overflow: 'hidden',\n },\n [isOpen],\n );\n\n return (\n <Tr>\n <Td colSpan={collapsedContentColSpan} css={appliedStyle}>\n <Box css={containerStyle}>{children}</Box>\n </Td>\n </Tr>\n );\n};\nexport type TrProps = ComponentProps<typeof StyledTr> &\n VariantProps<typeof StyledTr> & {\n children: React.ReactNode;\n collapsedContent?: React.ReactNode;\n emptyFirstColumn?: boolean;\n tableHead?: boolean;\n collapsedContentColSpan?: number;\n };\n\nexport const Tr = forwardRef<ElementRef<typeof StyledTr>, TrProps>(\n (\n {\n children,\n collapsedContent,\n emptyFirstColumn = false,\n tableHead = false,\n collapsedContentColSpan = 1,\n css,\n ...props\n },\n ref,\n ) => {\n const [isCollapsed, setIsCollapsed] = useState(false);\n\n return (\n <>\n <StyledTr\n ref={ref}\n css={\n !!collapsedContent && !isCollapsed\n ? {\n ...css,\n [`&:nth-last-child(2) > ${Td}`]: {\n borderBottom: 'none',\n },\n }\n : { ...css }\n }\n {...props}\n >\n {emptyFirstColumn ? tableHead ? <Th css={{ width: 24 }} /> : <Td /> : null}\n {!!collapsedContent && (\n <Td\n css={{ padding: '0 0 0 $3' }}\n onClick={(e) => {\n e.stopPropagation();\n e.preventDefault();\n }}\n >\n <Flex\n align=\"center\"\n justify=\"center\"\n css={{\n height: '40px',\n '&:hover': {\n color: '$tableActiveText',\n },\n }}\n onClick={() => setIsCollapsed(!isCollapsed)}\n >\n <ChevronRightIcon\n style={{\n cursor: 'pointer',\n transition: 'transform 0.2s ease-out',\n transform: isCollapsed ? 'rotate(90deg)' : 'initial',\n }}\n />\n </Flex>\n </Td>\n )}\n {children}\n </StyledTr>\n {!!collapsedContent && (\n <AnimatedTr isOpen={isCollapsed} collapsedContentColSpan={collapsedContentColSpan}>\n {collapsedContent}\n </AnimatedTr>\n )}\n </>\n );\n },\n);\n\nexport const Tfoot = styled('tfoot', {\n verticalAlign: 'middle',\n position: 'relative',\n borderRadius: 'inherit',\n\n '&::after': {\n pointerEvents: 'none',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n backgroundColor: '$tableFooterLayerBackground',\n borderRadius: 'inherit',\n },\n\n [`& ${Td}`]: {\n fontSize: '$1',\n color: '$tableHeaderText',\n fontWeight: '$light',\n p: '$2 $3',\n },\n});\n\nexport const Thead = styled('thead', {\n position: 'relative',\n borderTopLeftRadius: 'inherit',\n borderTopRightRadius: 'inherit',\n verticalAlign: 'middle',\n\n '&::after': {\n pointerEvents: 'none',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n backgroundColor: '$tableHeaderLayerBackground',\n borderTopLeftRadius: 'inherit',\n borderTopRightRadius: 'inherit',\n },\n\n [`& ${Th}`]: {\n fontSize: '$1',\n color: '$tableHeaderText',\n fontWeight: '$light',\n },\n});\n\nexport const Table = styled('table', {\n width: '100%',\n tableLayout: 'fixed',\n boxSizing: 'border-box',\n borderCollapse: 'separate',\n borderSpacing: 0,\n fontFamily: '$rubik',\n color: '$tableText',\n borderRadius: '$3',\n overflow: 'hidden',\n [`& ${Tbody}:not(:empty) ~ ${Tfoot}`]: {\n borderTopLeftRadius: '0',\n borderTopRightRadius: '0',\n [`& ${Td}`]: {\n borderTop: '1px solid $tableRowBorder',\n },\n },\n [`& ${Thead}:not(:empty) ~ ${Tfoot}`]: {\n borderTopLeftRadius: '0',\n borderTopRightRadius: '0',\n },\n\n variants: {\n elevation: elevationVariants,\n },\n defaultVariants: {\n elevation: 1,\n },\n});\n\nexport type TableVariants = VariantProps<typeof Table>;\nexport type TableProps = TableVariants & NonNullable<unknown>;\n"],"mappings":"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"}
1	+ {"version":3,"file":"Table.cjs","names":[],"sources":["../../../components/Table/Table.tsx"],"sourcesContent":["import { ChevronRightIcon } from '@radix-ui/react-icons';\nimport React, { ComponentProps, ElementRef, forwardRef, ReactNode, useMemo, useState } from 'react';\n\nimport { styled, VariantProps } from '../../stitches.config';\nimport { Box } from '../Box';\nimport { elevationVariants } from '../Elevation';\nimport { Flex } from '../Flex';\nimport { Label } from '../Label';\nimport { Text } from '../Text';\n\nexport const Caption = styled('caption', Text, {\n display: 'table-caption',\n textAlign: 'start',\n fontVariantNumeric: 'proportional-nums',\n fontWeight: '$medium',\n lineHeight: '1.25',\n});\n\nexport const Tbody = styled('tbody', {\n width: '100%',\n verticalAlign: 'middle',\n});\n\nexport const Th = styled('th', Label, {\n // override Label\n display: 'table-cell',\n verticalAlign: 'inherit',\n\n borderTopLeftRadius: 'inherit',\n borderTopRightRadius: 'inherit',\n\n textAlign: 'start',\n p: '$2 $3',\n borderBottom: '1px solid $tableRowBorder',\n\n variants: {\n align: {\n start: {\n textAlign: 'start',\n },\n center: {\n textAlign: 'center',\n },\n end: {\n textAlign: 'end',\n },\n },\n transform: {\n capitalize: {\n display: 'table-cell', // revert Label enforced value\n },\n },\n },\n defaultVariants: {\n align: 'start',\n },\n});\n\nexport const Td = styled('td', {\n boxSizing: 'border-box',\n p: '$5 $3',\n borderBottom: '1px solid $tableRowBorder',\n fontSize: '$3',\n lineHeight: '16px',\n verticalAlign: 'inherit',\n variants: {\n subtle: {\n true: {\n fontWeight: '$regular',\n color: '$tableSubtleText',\n },\n },\n align: {\n start: {\n textAlign: 'start',\n },\n center: {\n textAlign: 'center',\n },\n end: {\n textAlign: 'end',\n },\n },\n },\n defaultVariants: {\n align: 'start',\n },\n});\n\nexport const StyledTr = styled('tr', {\n verticalAlign: 'inherit',\n '&:hover': {\n color: '$tableHoverText',\n },\n [`&:last-child > ${Td}`]: {\n borderBottom: 'none',\n },\n\n variants: {\n interactive: {\n true: {\n '&:hover': {\n backgroundColor: '$tableHoverBackground',\n cursor: 'pointer',\n },\n },\n },\n active: {\n true: {\n backgroundColor: '$tableHoverBackground',\n color: '$tableActiveText',\n fontWeight: '$semiBold',\n },\n },\n },\n compoundVariants: [\n {\n interactive: true,\n active: true,\n css: {\n '&:hover': {\n color: '$tableActiveHoverText',\n },\n },\n },\n ],\n});\n\nconst AnimatedTr = ({\n collapsedContentColSpan,\n isOpen,\n children,\n}: {\n collapsedContentColSpan: number;\n isOpen: boolean;\n children: ReactNode;\n}) => {\n const appliedStyle = useMemo(\n () =>\n isOpen\n ? { transition: 'padding 0.2s ease-out' }\n : {\n transition: 'padding 0.2s ease-out',\n lineHeight: 0,\n fontSize: 0,\n padding: '0px 16px',\n border: 'none',\n },\n [isOpen],\n );\n\n const containerStyle = useMemo(\n () =>\n isOpen\n ? { transition: 'all 0.2s ease-out' }\n : {\n transition: 'all 0.2s ease-out',\n height: 0,\n overflow: 'hidden',\n },\n [isOpen],\n );\n\n return (\n <Tr>\n <Td colSpan={collapsedContentColSpan} css={appliedStyle}>\n <Box css={containerStyle}>{children}</Box>\n </Td>\n </Tr>\n );\n};\nexport type TrProps = ComponentProps<typeof StyledTr> &\n VariantProps<typeof StyledTr> & {\n children: React.ReactNode;\n collapsedContent?: React.ReactNode;\n emptyFirstColumn?: boolean;\n tableHead?: boolean;\n collapsedContentColSpan?: number;\n };\n\nexport const Tr = forwardRef<ElementRef<typeof StyledTr>, TrProps>(\n (\n {\n children,\n collapsedContent,\n emptyFirstColumn = false,\n tableHead = false,\n collapsedContentColSpan = 1,\n css,\n ...props\n },\n ref,\n ) => {\n const [isCollapsed, setIsCollapsed] = useState(false);\n\n return (\n <>\n <StyledTr\n ref={ref}\n css={\n !!collapsedContent && !isCollapsed\n ? {\n ...css,\n [`&:nth-last-child(2) > ${Td}`]: {\n borderBottom: 'none',\n },\n }\n : { ...css }\n }\n {...props}\n >\n {emptyFirstColumn ? tableHead ? <Th css={{ width: 24 }} /> : <Td /> : null}\n {!!collapsedContent && (\n <Td\n css={{ padding: '0 0 0 $3' }}\n onClick={(e) => {\n e.stopPropagation();\n e.preventDefault();\n }}\n >\n <Flex\n align=\"center\"\n justify=\"center\"\n css={{\n height: '40px',\n '&:hover': {\n color: '$tableActiveText',\n },\n }}\n onClick={() => setIsCollapsed(!isCollapsed)}\n >\n <ChevronRightIcon\n style={{\n cursor: 'pointer',\n transition: 'transform 0.2s ease-out',\n transform: isCollapsed ? 'rotate(90deg)' : 'initial',\n }}\n />\n </Flex>\n </Td>\n )}\n {children}\n </StyledTr>\n {!!collapsedContent && (\n <AnimatedTr isOpen={isCollapsed} collapsedContentColSpan={collapsedContentColSpan}>\n {collapsedContent}\n </AnimatedTr>\n )}\n </>\n );\n },\n);\n\nexport const Tfoot = styled('tfoot', {\n verticalAlign: 'middle',\n position: 'relative',\n borderRadius: 'inherit',\n\n '&::after': {\n pointerEvents: 'none',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n backgroundColor: '$tableFooterLayerBackground',\n borderRadius: 'inherit',\n },\n\n [`& ${Td}`]: {\n fontSize: '$1',\n color: '$tableHeaderText',\n fontWeight: '$light',\n p: '$2 $3',\n },\n});\n\nexport const Thead = styled('thead', {\n position: 'relative',\n borderTopLeftRadius: 'inherit',\n borderTopRightRadius: 'inherit',\n verticalAlign: 'middle',\n\n '&::after': {\n pointerEvents: 'none',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n backgroundColor: '$tableHeaderLayerBackground',\n borderTopLeftRadius: 'inherit',\n borderTopRightRadius: 'inherit',\n },\n\n [`& ${Th}`]: {\n fontSize: '$1',\n color: '$tableHeaderText',\n fontWeight: '$light',\n },\n});\n\nexport const Table = styled('table', {\n width: '100%',\n tableLayout: 'fixed',\n boxSizing: 'border-box',\n borderCollapse: 'separate',\n borderSpacing: 0,\n fontFamily: '$rubik',\n color: '$tableText',\n borderRadius: '$3',\n overflow: 'hidden',\n [`& ${Tbody}:not(:empty) ~ ${Tfoot}`]: {\n borderTopLeftRadius: '0',\n borderTopRightRadius: '0',\n [`& ${Td}`]: {\n borderTop: '1px solid $tableRowBorder',\n },\n },\n [`& ${Thead}:not(:empty) ~ ${Tfoot}`]: {\n borderTopLeftRadius: '0',\n borderTopRightRadius: '0',\n },\n\n variants: {\n elevation: elevationVariants,\n },\n defaultVariants: {\n elevation: 1,\n },\n});\n\nexport type TableVariants = VariantProps<typeof Table>;\nexport type TableProps = TableVariants & NonNullable<unknown>;\n"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.js","names":[],"sources":["../../../components/Table/Table.tsx"],"sourcesContent":["import { ChevronRightIcon } from '@radix-ui/react-icons';\nimport React, { ComponentProps, ElementRef, forwardRef, ReactNode, useMemo, useState } from 'react';\n\nimport { styled, VariantProps } from '../../stitches.config';\nimport { Box } from '../Box';\nimport { elevationVariants } from '../Elevation';\nimport { Flex } from '../Flex';\nimport { Label } from '../Label';\nimport { Text } from '../Text';\n\nexport const Caption = styled('caption', Text, {\n display: 'table-caption',\n textAlign: 'start',\n fontVariantNumeric: 'proportional-nums',\n fontWeight: '$medium',\n lineHeight: '1.25',\n});\n\nexport const Tbody = styled('tbody', {\n width: '100%',\n verticalAlign: 'middle',\n});\n\nexport const Th = styled('th', Label, {\n // override Label\n display: 'table-cell',\n verticalAlign: 'inherit',\n\n borderTopLeftRadius: 'inherit',\n borderTopRightRadius: 'inherit',\n\n textAlign: 'start',\n p: '$2 $3',\n borderBottom: '1px solid $tableRowBorder',\n\n variants: {\n align: {\n start: {\n textAlign: 'start',\n },\n center: {\n textAlign: 'center',\n },\n end: {\n textAlign: 'end',\n },\n },\n transform: {\n capitalize: {\n display: 'table-cell', // revert Label enforced value\n },\n },\n },\n defaultVariants: {\n align: 'start',\n },\n});\n\nexport const Td = styled('td', {\n boxSizing: 'border-box',\n p: '$5 $3',\n borderBottom: '1px solid $tableRowBorder',\n fontSize: '$3',\n lineHeight: '16px',\n verticalAlign: 'inherit',\n variants: {\n subtle: {\n true: {\n fontWeight: '$regular',\n color: '$tableSubtleText',\n },\n },\n align: {\n start: {\n textAlign: 'start',\n },\n center: {\n textAlign: 'center',\n },\n end: {\n textAlign: 'end',\n },\n },\n },\n defaultVariants: {\n align: 'start',\n },\n});\n\nexport const StyledTr = styled('tr', {\n verticalAlign: 'inherit',\n '&:hover': {\n color: '$tableHoverText',\n },\n [`&:last-child > ${Td}`]: {\n borderBottom: 'none',\n },\n\n variants: {\n interactive: {\n true: {\n '&:hover': {\n backgroundColor: '$tableHoverBackground',\n cursor: 'pointer',\n },\n },\n },\n active: {\n true: {\n backgroundColor: '$tableHoverBackground',\n color: '$tableActiveText',\n fontWeight: '$semiBold',\n },\n },\n },\n compoundVariants: [\n {\n interactive: true,\n active: true,\n css: {\n '&:hover': {\n color: '$tableActiveHoverText',\n },\n },\n },\n ],\n});\n\nconst AnimatedTr = ({\n collapsedContentColSpan,\n isOpen,\n children,\n}: {\n collapsedContentColSpan: number;\n isOpen: boolean;\n children: ReactNode;\n}) => {\n const appliedStyle = useMemo(\n () =>\n isOpen\n ? { transition: 'padding 0.2s ease-out' }\n : {\n transition: 'padding 0.2s ease-out',\n lineHeight: 0,\n fontSize: 0,\n padding: '0px 16px',\n border: 'none',\n },\n [isOpen],\n );\n\n const containerStyle = useMemo(\n () =>\n isOpen\n ? { transition: 'all 0.2s ease-out' }\n : {\n transition: 'all 0.2s ease-out',\n height: 0,\n overflow: 'hidden',\n },\n [isOpen],\n );\n\n return (\n <Tr>\n <Td colSpan={collapsedContentColSpan} css={appliedStyle}>\n <Box css={containerStyle}>{children}</Box>\n </Td>\n </Tr>\n );\n};\nexport type TrProps = ComponentProps<typeof StyledTr> &\n VariantProps<typeof StyledTr> & {\n children: React.ReactNode;\n collapsedContent?: React.ReactNode;\n emptyFirstColumn?: boolean;\n tableHead?: boolean;\n collapsedContentColSpan?: number;\n };\n\nexport const Tr = forwardRef<ElementRef<typeof StyledTr>, TrProps>(\n (\n {\n children,\n collapsedContent,\n emptyFirstColumn = false,\n tableHead = false,\n collapsedContentColSpan = 1,\n css,\n ...props\n },\n ref,\n ) => {\n const [isCollapsed, setIsCollapsed] = useState(false);\n\n return (\n <>\n <StyledTr\n ref={ref}\n css={\n !!collapsedContent && !isCollapsed\n ? {\n ...css,\n [`&:nth-last-child(2) > ${Td}`]: {\n borderBottom: 'none',\n },\n }\n : { ...css }\n }\n {...props}\n >\n {emptyFirstColumn ? tableHead ? <Th css={{ width: 24 }} /> : <Td /> : null}\n {!!collapsedContent && (\n <Td\n css={{ padding: '0 0 0 $3' }}\n onClick={(e) => {\n e.stopPropagation();\n e.preventDefault();\n }}\n >\n <Flex\n align=\"center\"\n justify=\"center\"\n css={{\n height: '40px',\n '&:hover': {\n color: '$tableActiveText',\n },\n }}\n onClick={() => setIsCollapsed(!isCollapsed)}\n >\n <ChevronRightIcon\n style={{\n cursor: 'pointer',\n transition: 'transform 0.2s ease-out',\n transform: isCollapsed ? 'rotate(90deg)' : 'initial',\n }}\n />\n </Flex>\n </Td>\n )}\n {children}\n </StyledTr>\n {!!collapsedContent && (\n <AnimatedTr isOpen={isCollapsed} collapsedContentColSpan={collapsedContentColSpan}>\n {collapsedContent}\n </AnimatedTr>\n )}\n </>\n );\n },\n);\n\nexport const Tfoot = styled('tfoot', {\n verticalAlign: 'middle',\n position: 'relative',\n borderRadius: 'inherit',\n\n '&::after': {\n pointerEvents: 'none',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n backgroundColor: '$tableFooterLayerBackground',\n borderRadius: 'inherit',\n },\n\n [`& ${Td}`]: {\n fontSize: '$1',\n color: '$tableHeaderText',\n fontWeight: '$light',\n p: '$2 $3',\n },\n});\n\nexport const Thead = styled('thead', {\n position: 'relative',\n borderTopLeftRadius: 'inherit',\n borderTopRightRadius: 'inherit',\n verticalAlign: 'middle',\n\n '&::after': {\n pointerEvents: 'none',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n backgroundColor: '$tableHeaderLayerBackground',\n borderTopLeftRadius: 'inherit',\n borderTopRightRadius: 'inherit',\n },\n\n [`& ${Th}`]: {\n fontSize: '$1',\n color: '$tableHeaderText',\n fontWeight: '$light',\n },\n});\n\nexport const Table = styled('table', {\n width: '100%',\n tableLayout: 'fixed',\n boxSizing: 'border-box',\n borderCollapse: 'separate',\n borderSpacing: 0,\n fontFamily: '$rubik',\n color: '$tableText',\n borderRadius: '$3',\n overflow: 'hidden',\n [`& ${Tbody}:not(:empty) ~ ${Tfoot}`]: {\n borderTopLeftRadius: '0',\n borderTopRightRadius: '0',\n [`& ${Td}`]: {\n borderTop: '1px solid $tableRowBorder',\n },\n },\n [`& ${Thead}:not(:empty) ~ ${Tfoot}`]: {\n borderTopLeftRadius: '0',\n borderTopRightRadius: '0',\n },\n\n variants: {\n elevation: elevationVariants,\n },\n defaultVariants: {\n elevation: 1,\n },\n});\n\nexport type TableVariants = VariantProps<typeof Table>;\nexport type TableProps = TableVariants & NonNullable<unknown>;\n"],"mappings":"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"}
1	+ {"version":3,"file":"Table.js","names":[],"sources":["../../../components/Table/Table.tsx"],"sourcesContent":["import { ChevronRightIcon } from '@radix-ui/react-icons';\nimport React, { ComponentProps, ElementRef, forwardRef, ReactNode, useMemo, useState } from 'react';\n\nimport { styled, VariantProps } from '../../stitches.config';\nimport { Box } from '../Box';\nimport { elevationVariants } from '../Elevation';\nimport { Flex } from '../Flex';\nimport { Label } from '../Label';\nimport { Text } from '../Text';\n\nexport const Caption = styled('caption', Text, {\n display: 'table-caption',\n textAlign: 'start',\n fontVariantNumeric: 'proportional-nums',\n fontWeight: '$medium',\n lineHeight: '1.25',\n});\n\nexport const Tbody = styled('tbody', {\n width: '100%',\n verticalAlign: 'middle',\n});\n\nexport const Th = styled('th', Label, {\n // override Label\n display: 'table-cell',\n verticalAlign: 'inherit',\n\n borderTopLeftRadius: 'inherit',\n borderTopRightRadius: 'inherit',\n\n textAlign: 'start',\n p: '$2 $3',\n borderBottom: '1px solid $tableRowBorder',\n\n variants: {\n align: {\n start: {\n textAlign: 'start',\n },\n center: {\n textAlign: 'center',\n },\n end: {\n textAlign: 'end',\n },\n },\n transform: {\n capitalize: {\n display: 'table-cell', // revert Label enforced value\n },\n },\n },\n defaultVariants: {\n align: 'start',\n },\n});\n\nexport const Td = styled('td', {\n boxSizing: 'border-box',\n p: '$5 $3',\n borderBottom: '1px solid $tableRowBorder',\n fontSize: '$3',\n lineHeight: '16px',\n verticalAlign: 'inherit',\n variants: {\n subtle: {\n true: {\n fontWeight: '$regular',\n color: '$tableSubtleText',\n },\n },\n align: {\n start: {\n textAlign: 'start',\n },\n center: {\n textAlign: 'center',\n },\n end: {\n textAlign: 'end',\n },\n },\n },\n defaultVariants: {\n align: 'start',\n },\n});\n\nexport const StyledTr = styled('tr', {\n verticalAlign: 'inherit',\n '&:hover': {\n color: '$tableHoverText',\n },\n [`&:last-child > ${Td}`]: {\n borderBottom: 'none',\n },\n\n variants: {\n interactive: {\n true: {\n '&:hover': {\n backgroundColor: '$tableHoverBackground',\n cursor: 'pointer',\n },\n },\n },\n active: {\n true: {\n backgroundColor: '$tableHoverBackground',\n color: '$tableActiveText',\n fontWeight: '$semiBold',\n },\n },\n },\n compoundVariants: [\n {\n interactive: true,\n active: true,\n css: {\n '&:hover': {\n color: '$tableActiveHoverText',\n },\n },\n },\n ],\n});\n\nconst AnimatedTr = ({\n collapsedContentColSpan,\n isOpen,\n children,\n}: {\n collapsedContentColSpan: number;\n isOpen: boolean;\n children: ReactNode;\n}) => {\n const appliedStyle = useMemo(\n () =>\n isOpen\n ? { transition: 'padding 0.2s ease-out' }\n : {\n transition: 'padding 0.2s ease-out',\n lineHeight: 0,\n fontSize: 0,\n padding: '0px 16px',\n border: 'none',\n },\n [isOpen],\n );\n\n const containerStyle = useMemo(\n () =>\n isOpen\n ? { transition: 'all 0.2s ease-out' }\n : {\n transition: 'all 0.2s ease-out',\n height: 0,\n overflow: 'hidden',\n },\n [isOpen],\n );\n\n return (\n <Tr>\n <Td colSpan={collapsedContentColSpan} css={appliedStyle}>\n <Box css={containerStyle}>{children}</Box>\n </Td>\n </Tr>\n );\n};\nexport type TrProps = ComponentProps<typeof StyledTr> &\n VariantProps<typeof StyledTr> & {\n children: React.ReactNode;\n collapsedContent?: React.ReactNode;\n emptyFirstColumn?: boolean;\n tableHead?: boolean;\n collapsedContentColSpan?: number;\n };\n\nexport const Tr = forwardRef<ElementRef<typeof StyledTr>, TrProps>(\n (\n {\n children,\n collapsedContent,\n emptyFirstColumn = false,\n tableHead = false,\n collapsedContentColSpan = 1,\n css,\n ...props\n },\n ref,\n ) => {\n const [isCollapsed, setIsCollapsed] = useState(false);\n\n return (\n <>\n <StyledTr\n ref={ref}\n css={\n !!collapsedContent && !isCollapsed\n ? {\n ...css,\n [`&:nth-last-child(2) > ${Td}`]: {\n borderBottom: 'none',\n },\n }\n : { ...css }\n }\n {...props}\n >\n {emptyFirstColumn ? tableHead ? <Th css={{ width: 24 }} /> : <Td /> : null}\n {!!collapsedContent && (\n <Td\n css={{ padding: '0 0 0 $3' }}\n onClick={(e) => {\n e.stopPropagation();\n e.preventDefault();\n }}\n >\n <Flex\n align=\"center\"\n justify=\"center\"\n css={{\n height: '40px',\n '&:hover': {\n color: '$tableActiveText',\n },\n }}\n onClick={() => setIsCollapsed(!isCollapsed)}\n >\n <ChevronRightIcon\n style={{\n cursor: 'pointer',\n transition: 'transform 0.2s ease-out',\n transform: isCollapsed ? 'rotate(90deg)' : 'initial',\n }}\n />\n </Flex>\n </Td>\n )}\n {children}\n </StyledTr>\n {!!collapsedContent && (\n <AnimatedTr isOpen={isCollapsed} collapsedContentColSpan={collapsedContentColSpan}>\n {collapsedContent}\n </AnimatedTr>\n )}\n </>\n );\n },\n);\n\nexport const Tfoot = styled('tfoot', {\n verticalAlign: 'middle',\n position: 'relative',\n borderRadius: 'inherit',\n\n '&::after': {\n pointerEvents: 'none',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n backgroundColor: '$tableFooterLayerBackground',\n borderRadius: 'inherit',\n },\n\n [`& ${Td}`]: {\n fontSize: '$1',\n color: '$tableHeaderText',\n fontWeight: '$light',\n p: '$2 $3',\n },\n});\n\nexport const Thead = styled('thead', {\n position: 'relative',\n borderTopLeftRadius: 'inherit',\n borderTopRightRadius: 'inherit',\n verticalAlign: 'middle',\n\n '&::after': {\n pointerEvents: 'none',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n backgroundColor: '$tableHeaderLayerBackground',\n borderTopLeftRadius: 'inherit',\n borderTopRightRadius: 'inherit',\n },\n\n [`& ${Th}`]: {\n fontSize: '$1',\n color: '$tableHeaderText',\n fontWeight: '$light',\n },\n});\n\nexport const Table = styled('table', {\n width: '100%',\n tableLayout: 'fixed',\n boxSizing: 'border-box',\n borderCollapse: 'separate',\n borderSpacing: 0,\n fontFamily: '$rubik',\n color: '$tableText',\n borderRadius: '$3',\n overflow: 'hidden',\n [`& ${Tbody}:not(:empty) ~ ${Tfoot}`]: {\n borderTopLeftRadius: '0',\n borderTopRightRadius: '0',\n [`& ${Td}`]: {\n borderTop: '1px solid $tableRowBorder',\n },\n },\n [`& ${Thead}:not(:empty) ~ ${Tfoot}`]: {\n borderTopLeftRadius: '0',\n borderTopRightRadius: '0',\n },\n\n variants: {\n elevation: elevationVariants,\n },\n defaultVariants: {\n elevation: 1,\n },\n});\n\nexport type TableVariants = VariantProps<typeof Table>;\nexport type TableProps = TableVariants & NonNullable<unknown>;\n"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.themes.cjs","names":[],"sources":["../../../components/Table/Table.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n tableText: Property.Color;\n tableSubtleText: Property.Color;\n tableHoverBackground: Property.BackgroundColor;\n tableActiveText: Property.Color;\n tableActiveHoverText: Property.Color;\n tableHeaderLayerBackground: Property.BackgroundColor;\n tableFooterLayerBackground: Property.BackgroundColor;\n tableHeaderText: Property.Color;\n tableFooterText: Property.Color;\n tableHoverText: Property.Color;\n tableRowBorder: Property.BorderBottomColor;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n tableText: tinycolor('black').setAlpha(0.74).toHslString(),\n tableSubtleText: tinycolor('black').setAlpha(0.51).toHslString(),\n tableHeaderLayerBackground: tinycolor('black').setAlpha(0.03).toHslString(),\n tableFooterLayerBackground: tinycolor('black').setAlpha(0.03).toHslString(),\n tableHeaderText: tinycolor('black').setAlpha(0.51).toHslString(),\n tableFooterText: tinycolor('black').setAlpha(0.51).toHslString(),\n tableHoverBackground: tinycolor('black').setAlpha(0.04).toHslString(),\n tableHoverText: tinycolor('black').setAlpha(0.74).toHslString(),\n tableActiveText: primaryColor.value,\n tableActiveHoverText: tinycolor(primaryColor.value).lighten(10).toHslString(),\n tableRowBorder: 'hsl(0, 0%, 87%)',\n });\n\n export const getDark: Factory = (primaryColor) => ({\n tableText: tinycolor('white').setAlpha(0.74).toHslString(),\n tableSubtleText: tinycolor('white').setAlpha(0.51).toHslString(),\n tableHeaderLayerBackground: tinycolor('white').setAlpha(0.02).toHslString(),\n tableFooterLayerBackground: tinycolor('white').setAlpha(0.02).toHslString(),\n tableHeaderText: tinycolor('white').setAlpha(0.51).toHslString(),\n tableFooterText: tinycolor('white').setAlpha(0.51).toHslString(),\n tableHoverBackground: tinycolor(primaryColor.value).setAlpha(0.04).toHslString(),\n tableHoverText: tinycolor('white').setAlpha(0.74).toHslString(),\n tableActiveText: '$primary',\n tableActiveHoverText: tinycolor(primaryColor.value).lighten(10).toHslString(),\n tableRowBorder: 'hsl(209, 21%, 23%)',\n });\n}\n"],"mappings":";;;;AAKO,IAAA;;~~AAiBQ~~,~~QAAA~~,YAAqB,kBAAkB;EAClD,YAAA,GAAA,WAAA,SAAqB,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC1D,kBAAA,GAAA,WAAA,SAA2B,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAChE,6BAAA,GAAA,WAAA,SAAsC,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC3E,6BAAA,GAAA,WAAA,SAAsC,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC3E,kBAAA,GAAA,WAAA,SAA2B,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAChE,kBAAA,GAAA,WAAA,SAA2B,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAChE,uBAAA,GAAA,WAAA,SAAgC,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EACrE,iBAAA,GAAA,WAAA,SAA0B,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC/D,iBAAiB,aAAa;EAC9B,uBAAA,GAAA,WAAA,SAAgC,aAAa,MAAM,CAAC,QAAQ,GAAG,CAAC,aAAa;EAC7E,gBAAgB;EACjB;~~AAEY~~,~~QAAA~~,WAAoB,kBAAkB;EACjD,YAAA,GAAA,WAAA,SAAqB,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC1D,kBAAA,GAAA,WAAA,SAA2B,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAChE,6BAAA,GAAA,WAAA,SAAsC,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC3E,6BAAA,GAAA,WAAA,SAAsC,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC3E,kBAAA,GAAA,WAAA,SAA2B,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAChE,kBAAA,GAAA,WAAA,SAA2B,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAChE,uBAAA,GAAA,WAAA,SAAgC,aAAa,MAAM,CAAC,SAAS,IAAK,CAAC,aAAa;EAChF,iBAAA,GAAA,WAAA,SAA0B,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC/D,iBAAiB;EACjB,uBAAA,GAAA,WAAA,SAAgC,aAAa,MAAM,CAAC,QAAQ,GAAG,CAAC,aAAa;EAC7E,gBAAgB;EACjB;yBACF"}
1	+ {"version":3,"file":"Table.themes.cjs","names":[],"sources":["../../../components/Table/Table.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n tableText: Property.Color;\n tableSubtleText: Property.Color;\n tableHoverBackground: Property.BackgroundColor;\n tableActiveText: Property.Color;\n tableActiveHoverText: Property.Color;\n tableHeaderLayerBackground: Property.BackgroundColor;\n tableFooterLayerBackground: Property.BackgroundColor;\n tableHeaderText: Property.Color;\n tableFooterText: Property.Color;\n tableHoverText: Property.Color;\n tableRowBorder: Property.BorderBottomColor;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n tableText: tinycolor('black').setAlpha(0.74).toHslString(),\n tableSubtleText: tinycolor('black').setAlpha(0.51).toHslString(),\n tableHeaderLayerBackground: tinycolor('black').setAlpha(0.03).toHslString(),\n tableFooterLayerBackground: tinycolor('black').setAlpha(0.03).toHslString(),\n tableHeaderText: tinycolor('black').setAlpha(0.51).toHslString(),\n tableFooterText: tinycolor('black').setAlpha(0.51).toHslString(),\n tableHoverBackground: tinycolor('black').setAlpha(0.04).toHslString(),\n tableHoverText: tinycolor('black').setAlpha(0.74).toHslString(),\n tableActiveText: primaryColor.value,\n tableActiveHoverText: tinycolor(primaryColor.value).lighten(10).toHslString(),\n tableRowBorder: 'hsl(0, 0%, 87%)',\n });\n\n export const getDark: Factory = (primaryColor) => ({\n tableText: tinycolor('white').setAlpha(0.74).toHslString(),\n tableSubtleText: tinycolor('white').setAlpha(0.51).toHslString(),\n tableHeaderLayerBackground: tinycolor('white').setAlpha(0.02).toHslString(),\n tableFooterLayerBackground: tinycolor('white').setAlpha(0.02).toHslString(),\n tableHeaderText: tinycolor('white').setAlpha(0.51).toHslString(),\n tableFooterText: tinycolor('white').setAlpha(0.51).toHslString(),\n tableHoverBackground: tinycolor(primaryColor.value).setAlpha(0.04).toHslString(),\n tableHoverText: tinycolor('white').setAlpha(0.74).toHslString(),\n tableActiveText: '$primary',\n tableActiveHoverText: tinycolor(primaryColor.value).lighten(10).toHslString(),\n tableRowBorder: 'hsl(209, 21%, 23%)',\n });\n}\n"],"mappings":";;;;AAKO,IAAA;;CAiBQ,OAAA,YAAqB,kBAAkB;EAClD,YAAA,GAAA,WAAA,SAAqB,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC1D,kBAAA,GAAA,WAAA,SAA2B,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAChE,6BAAA,GAAA,WAAA,SAAsC,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC3E,6BAAA,GAAA,WAAA,SAAsC,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC3E,kBAAA,GAAA,WAAA,SAA2B,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAChE,kBAAA,GAAA,WAAA,SAA2B,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAChE,uBAAA,GAAA,WAAA,SAAgC,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EACrE,iBAAA,GAAA,WAAA,SAA0B,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC/D,iBAAiB,aAAa;EAC9B,uBAAA,GAAA,WAAA,SAAgC,aAAa,MAAM,CAAC,QAAQ,GAAG,CAAC,aAAa;EAC7E,gBAAgB;EACjB;CAEY,OAAA,WAAoB,kBAAkB;EACjD,YAAA,GAAA,WAAA,SAAqB,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC1D,kBAAA,GAAA,WAAA,SAA2B,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAChE,6BAAA,GAAA,WAAA,SAAsC,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC3E,6BAAA,GAAA,WAAA,SAAsC,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC3E,kBAAA,GAAA,WAAA,SAA2B,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAChE,kBAAA,GAAA,WAAA,SAA2B,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAChE,uBAAA,GAAA,WAAA,SAAgC,aAAa,MAAM,CAAC,SAAS,IAAK,CAAC,aAAa;EAChF,iBAAA,GAAA,WAAA,SAA0B,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC/D,iBAAiB;EACjB,uBAAA,GAAA,WAAA,SAAgC,aAAa,MAAM,CAAC,QAAQ,GAAG,CAAC,aAAa;EAC7E,gBAAgB;EACjB;yBACF"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.themes.js","names":[],"sources":["../../../components/Table/Table.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n tableText: Property.Color;\n tableSubtleText: Property.Color;\n tableHoverBackground: Property.BackgroundColor;\n tableActiveText: Property.Color;\n tableActiveHoverText: Property.Color;\n tableHeaderLayerBackground: Property.BackgroundColor;\n tableFooterLayerBackground: Property.BackgroundColor;\n tableHeaderText: Property.Color;\n tableFooterText: Property.Color;\n tableHoverText: Property.Color;\n tableRowBorder: Property.BorderBottomColor;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n tableText: tinycolor('black').setAlpha(0.74).toHslString(),\n tableSubtleText: tinycolor('black').setAlpha(0.51).toHslString(),\n tableHeaderLayerBackground: tinycolor('black').setAlpha(0.03).toHslString(),\n tableFooterLayerBackground: tinycolor('black').setAlpha(0.03).toHslString(),\n tableHeaderText: tinycolor('black').setAlpha(0.51).toHslString(),\n tableFooterText: tinycolor('black').setAlpha(0.51).toHslString(),\n tableHoverBackground: tinycolor('black').setAlpha(0.04).toHslString(),\n tableHoverText: tinycolor('black').setAlpha(0.74).toHslString(),\n tableActiveText: primaryColor.value,\n tableActiveHoverText: tinycolor(primaryColor.value).lighten(10).toHslString(),\n tableRowBorder: 'hsl(0, 0%, 87%)',\n });\n\n export const getDark: Factory = (primaryColor) => ({\n tableText: tinycolor('white').setAlpha(0.74).toHslString(),\n tableSubtleText: tinycolor('white').setAlpha(0.51).toHslString(),\n tableHeaderLayerBackground: tinycolor('white').setAlpha(0.02).toHslString(),\n tableFooterLayerBackground: tinycolor('white').setAlpha(0.02).toHslString(),\n tableHeaderText: tinycolor('white').setAlpha(0.51).toHslString(),\n tableFooterText: tinycolor('white').setAlpha(0.51).toHslString(),\n tableHoverBackground: tinycolor(primaryColor.value).setAlpha(0.04).toHslString(),\n tableHoverText: tinycolor('white').setAlpha(0.74).toHslString(),\n tableActiveText: '$primary',\n tableActiveHoverText: tinycolor(primaryColor.value).lighten(10).toHslString(),\n tableRowBorder: 'hsl(209, 21%, 23%)',\n });\n}\n"],"mappings":";;AAKO,IAAA;;~~AAiBQ~~,~~QAAA~~,YAAqB,kBAAkB;EAClD,WAAW,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC1D,iBAAiB,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAChE,4BAA4B,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC3E,4BAA4B,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC3E,iBAAiB,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAChE,iBAAiB,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAChE,sBAAsB,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EACrE,gBAAgB,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC/D,iBAAiB,aAAa;EAC9B,sBAAsB,UAAU,aAAa,MAAM,CAAC,QAAQ,GAAG,CAAC,aAAa;EAC7E,gBAAgB;EACjB;~~AAEY~~,~~QAAA~~,WAAoB,kBAAkB;EACjD,WAAW,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC1D,iBAAiB,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAChE,4BAA4B,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC3E,4BAA4B,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC3E,iBAAiB,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAChE,iBAAiB,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAChE,sBAAsB,UAAU,aAAa,MAAM,CAAC,SAAS,IAAK,CAAC,aAAa;EAChF,gBAAgB,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC/D,iBAAiB;EACjB,sBAAsB,UAAU,aAAa,MAAM,CAAC,QAAQ,GAAG,CAAC,aAAa;EAC7E,gBAAgB;EACjB;yBACF"}
1	+ {"version":3,"file":"Table.themes.js","names":[],"sources":["../../../components/Table/Table.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n tableText: Property.Color;\n tableSubtleText: Property.Color;\n tableHoverBackground: Property.BackgroundColor;\n tableActiveText: Property.Color;\n tableActiveHoverText: Property.Color;\n tableHeaderLayerBackground: Property.BackgroundColor;\n tableFooterLayerBackground: Property.BackgroundColor;\n tableHeaderText: Property.Color;\n tableFooterText: Property.Color;\n tableHoverText: Property.Color;\n tableRowBorder: Property.BorderBottomColor;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n tableText: tinycolor('black').setAlpha(0.74).toHslString(),\n tableSubtleText: tinycolor('black').setAlpha(0.51).toHslString(),\n tableHeaderLayerBackground: tinycolor('black').setAlpha(0.03).toHslString(),\n tableFooterLayerBackground: tinycolor('black').setAlpha(0.03).toHslString(),\n tableHeaderText: tinycolor('black').setAlpha(0.51).toHslString(),\n tableFooterText: tinycolor('black').setAlpha(0.51).toHslString(),\n tableHoverBackground: tinycolor('black').setAlpha(0.04).toHslString(),\n tableHoverText: tinycolor('black').setAlpha(0.74).toHslString(),\n tableActiveText: primaryColor.value,\n tableActiveHoverText: tinycolor(primaryColor.value).lighten(10).toHslString(),\n tableRowBorder: 'hsl(0, 0%, 87%)',\n });\n\n export const getDark: Factory = (primaryColor) => ({\n tableText: tinycolor('white').setAlpha(0.74).toHslString(),\n tableSubtleText: tinycolor('white').setAlpha(0.51).toHslString(),\n tableHeaderLayerBackground: tinycolor('white').setAlpha(0.02).toHslString(),\n tableFooterLayerBackground: tinycolor('white').setAlpha(0.02).toHslString(),\n tableHeaderText: tinycolor('white').setAlpha(0.51).toHslString(),\n tableFooterText: tinycolor('white').setAlpha(0.51).toHslString(),\n tableHoverBackground: tinycolor(primaryColor.value).setAlpha(0.04).toHslString(),\n tableHoverText: tinycolor('white').setAlpha(0.74).toHslString(),\n tableActiveText: '$primary',\n tableActiveHoverText: tinycolor(primaryColor.value).lighten(10).toHslString(),\n tableRowBorder: 'hsl(209, 21%, 23%)',\n });\n}\n"],"mappings":";;AAKO,IAAA;;CAiBQ,OAAA,YAAqB,kBAAkB;EAClD,WAAW,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC1D,iBAAiB,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAChE,4BAA4B,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC3E,4BAA4B,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC3E,iBAAiB,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAChE,iBAAiB,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAChE,sBAAsB,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EACrE,gBAAgB,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC/D,iBAAiB,aAAa;EAC9B,sBAAsB,UAAU,aAAa,MAAM,CAAC,QAAQ,GAAG,CAAC,aAAa;EAC7E,gBAAgB;EACjB;CAEY,OAAA,WAAoB,kBAAkB;EACjD,WAAW,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC1D,iBAAiB,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAChE,4BAA4B,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC3E,4BAA4B,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC3E,iBAAiB,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAChE,iBAAiB,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAChE,sBAAsB,UAAU,aAAa,MAAM,CAAC,SAAS,IAAK,CAAC,aAAa;EAChF,gBAAgB,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC/D,iBAAiB;EACjB,sBAAsB,UAAU,aAAa,MAAM,CAAC,QAAQ,GAAG,CAAC,aAAa;EAC7E,gBAAgB;EACjB;yBACF"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Text.themes.cjs","names":[],"sources":["../../../components/Text/Text.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n textSubtle: Property.Color;\n textDefault: Property.Color;\n textContrast: Property.Color;\n textInvalid: Property.Color;\n textRed: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = () => ({\n textSubtle: tinycolor('black').setAlpha(0.51).toHslString(),\n textDefault: tinycolor('black').setAlpha(0.74).toHslString(),\n textContrast: 'black',\n textInvalid: '$red9',\n textRed: '$red10',\n });\n\n export const getDark: Factory = () => ({\n textSubtle: tinycolor('white').setAlpha(0.51).toHslString(),\n textDefault: tinycolor('white').setAlpha(0.74).toHslString(),\n textContrast: 'white',\n textInvalid: '$red9',\n textRed: '$red10',\n });\n}\n"],"mappings":";;;;AAKO,IAAA;;~~AAWQ~~,~~QAAA~~,kBAA2B;EACtC,aAAA,GAAA,WAAA,SAAsB,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC3D,cAAA,GAAA,WAAA,SAAuB,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC5D,cAAc;EACd,aAAa;EACb,SAAS;EACV;~~AAEY~~,~~QAAA~~,iBAA0B;EACrC,aAAA,GAAA,WAAA,SAAsB,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC3D,cAAA,GAAA,WAAA,SAAuB,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC5D,cAAc;EACd,aAAa;EACb,SAAS;EACV;yBACF"}
1	+ {"version":3,"file":"Text.themes.cjs","names":[],"sources":["../../../components/Text/Text.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n textSubtle: Property.Color;\n textDefault: Property.Color;\n textContrast: Property.Color;\n textInvalid: Property.Color;\n textRed: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = () => ({\n textSubtle: tinycolor('black').setAlpha(0.51).toHslString(),\n textDefault: tinycolor('black').setAlpha(0.74).toHslString(),\n textContrast: 'black',\n textInvalid: '$red9',\n textRed: '$red10',\n });\n\n export const getDark: Factory = () => ({\n textSubtle: tinycolor('white').setAlpha(0.51).toHslString(),\n textDefault: tinycolor('white').setAlpha(0.74).toHslString(),\n textContrast: 'white',\n textInvalid: '$red9',\n textRed: '$red10',\n });\n}\n"],"mappings":";;;;AAKO,IAAA;;CAWQ,OAAA,kBAA2B;EACtC,aAAA,GAAA,WAAA,SAAsB,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC3D,cAAA,GAAA,WAAA,SAAuB,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC5D,cAAc;EACd,aAAa;EACb,SAAS;EACV;CAEY,OAAA,iBAA0B;EACrC,aAAA,GAAA,WAAA,SAAsB,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC3D,cAAA,GAAA,WAAA,SAAuB,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC5D,cAAc;EACd,aAAa;EACb,SAAS;EACV;yBACF"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Text.themes.js","names":[],"sources":["../../../components/Text/Text.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n textSubtle: Property.Color;\n textDefault: Property.Color;\n textContrast: Property.Color;\n textInvalid: Property.Color;\n textRed: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = () => ({\n textSubtle: tinycolor('black').setAlpha(0.51).toHslString(),\n textDefault: tinycolor('black').setAlpha(0.74).toHslString(),\n textContrast: 'black',\n textInvalid: '$red9',\n textRed: '$red10',\n });\n\n export const getDark: Factory = () => ({\n textSubtle: tinycolor('white').setAlpha(0.51).toHslString(),\n textDefault: tinycolor('white').setAlpha(0.74).toHslString(),\n textContrast: 'white',\n textInvalid: '$red9',\n textRed: '$red10',\n });\n}\n"],"mappings":";;AAKO,IAAA;;~~AAWQ~~,~~QAAA~~,kBAA2B;EACtC,YAAY,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC3D,aAAa,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC5D,cAAc;EACd,aAAa;EACb,SAAS;EACV;~~AAEY~~,~~QAAA~~,iBAA0B;EACrC,YAAY,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC3D,aAAa,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC5D,cAAc;EACd,aAAa;EACb,SAAS;EACV;yBACF"}
1	+ {"version":3,"file":"Text.themes.js","names":[],"sources":["../../../components/Text/Text.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n textSubtle: Property.Color;\n textDefault: Property.Color;\n textContrast: Property.Color;\n textInvalid: Property.Color;\n textRed: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = () => ({\n textSubtle: tinycolor('black').setAlpha(0.51).toHslString(),\n textDefault: tinycolor('black').setAlpha(0.74).toHslString(),\n textContrast: 'black',\n textInvalid: '$red9',\n textRed: '$red10',\n });\n\n export const getDark: Factory = () => ({\n textSubtle: tinycolor('white').setAlpha(0.51).toHslString(),\n textDefault: tinycolor('white').setAlpha(0.74).toHslString(),\n textContrast: 'white',\n textInvalid: '$red9',\n textRed: '$red10',\n });\n}\n"],"mappings":";;AAKO,IAAA;;CAWQ,OAAA,kBAA2B;EACtC,YAAY,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC3D,aAAa,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC5D,cAAc;EACd,aAAa;EACb,SAAS;EACV;CAEY,OAAA,iBAA0B;EACrC,YAAY,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC3D,aAAa,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC5D,cAAc;EACd,aAAa;EACb,SAAS;EACV;yBACF"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TextField.cjs","names":[],"sources":["../../../components/TextField/TextField.tsx"],"sourcesContent":["import {\n CrossCircledIcon,\n ExclamationTriangleIcon,\n EyeClosedIcon,\n EyeOpenIcon,\n} from '@radix-ui/react-icons';\nimport React from 'react';\n\nimport { styled } from '../../stitches.config';\nimport { Box } from '../Box';\nimport { Input, InputHandle, InputProps, InputVariants } from '../Input';\nimport { Label } from '../Label';\nimport { Tooltip } from '../Tooltip';\n\n// TYPES\nexport interface TextFieldLabelProps {\n variant: 'invalid' \| 'subtle' \| 'contrast' \| 'default';\n htmlFor?: string;\n}\nexport type TextFieldProps = InputProps & {\n type?: string;\n clearable?: boolean;\n label?: string \| ((props: TextFieldLabelProps) => JSX.Element);\n};\n\nexport type TextFieldVariants = InputVariants;\n\n// COMPONENTS\nconst AdornmentGroup = styled('div', {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n});\n\nconst StyledExclamationTriangleIcon = styled(ExclamationTriangleIcon, {\n '& + *': {\n marginLeft: '$1',\n },\n});\n\nconst StyledEyeOpenIcon = styled(EyeOpenIcon, {\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n },\n },\n});\n\nconst StyledEyeClosedIcon = styled(EyeClosedIcon, {\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n },\n },\n});\n\nconst StyledCrossCircledIcon = styled(CrossCircledIcon, {\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n },\n },\n});\n\nexport const TextField = React.forwardRef<React.ElementRef<typeof Input>, TextFieldProps>(\n (\n {\n state,\n clearable,\n label: LabelOrComponent,\n id,\n type,\n disabled,\n readOnly,\n onBlur,\n onFocus,\n css,\n ...props\n },\n forwardedRef\n ) => {\n const inputRef = React.useRef<InputHandle \| null>(null);\n React.useImperativeHandle(forwardedRef, () => inputRef.current as InputHandle);\n\n const [inputHasFocus, setInputHasFocus] = React.useState(false);\n const [innerType, setInnerType] = React.useState(type);\n const isPasswordVisible = React.useMemo(() => innerType !== 'password', [innerType]);\n\n const invalid = React.useMemo(() => state === 'invalid', [state]);\n\n const labelVariant = React.useMemo(() => {\n if (disabled) {\n return 'subtle';\n }\n if (invalid) {\n return 'invalid';\n }\n if (inputHasFocus) {\n return 'contrast';\n }\n return 'default';\n }, [invalid, disabled, inputHasFocus]);\n\n const LabelNode = React.useMemo(() => {\n if (LabelOrComponent === undefined \|\| LabelOrComponent === null) {\n return null;\n }\n if (typeof LabelOrComponent === 'string') {\n return (\n <Label variant={labelVariant} htmlFor={id}>\n {LabelOrComponent}\n </Label>\n );\n }\n return <LabelOrComponent variant={labelVariant} htmlFor={id} />;\n }, [LabelOrComponent, labelVariant, id]);\n\n const isPasswordType = React.useMemo(() => type === 'password', [type]);\n\n const typeOrInnerType = React.useMemo(\n () => (isPasswordType ? innerType : type),\n [isPasswordType, type, innerType]\n );\n\n const hasInnerAdornment = React.useMemo(\n () => clearable \|\| isPasswordType \|\| invalid,\n [clearable, isPasswordType, invalid]\n );\n\n const hasAdornmentGroup = React.useMemo(\n () => (clearable && invalid) \|\| (clearable && isPasswordType) \|\| (invalid && isPasswordType),\n [clearable, invalid, isPasswordType]\n );\n\n const clearDisabled = React.useMemo(() => readOnly \|\| disabled, [readOnly, disabled]);\n\n const handleClear = React.useCallback(() => {\n const { current } = inputRef;\n if (current) {\n current.clear();\n }\n }, [inputRef]);\n\n const handleFocus = React.useCallback(\n (e: React.FocusEvent<HTMLInputElement>) => {\n if (onFocus) {\n onFocus(e);\n }\n setInputHasFocus(true);\n },\n [onFocus, setInputHasFocus]\n );\n\n const handleBlur = React.useCallback(\n (e: React.FocusEvent<HTMLInputElement>) => {\n if (onBlur) {\n onBlur(e);\n }\n setInputHasFocus(false);\n },\n [onBlur, setInputHasFocus]\n );\n\n const togglePasswordVisibility = React.useCallback(() => {\n setInnerType((prevInnerType) => (prevInnerType === 'password' ? undefined : 'password'));\n }, [setInnerType]);\n\n const EndAdornmentWrapper = React.useMemo(\n () => (hasAdornmentGroup ? AdornmentGroup : React.Fragment),\n [hasAdornmentGroup]\n );\n\n const PasswordVisibilityToggleIcon = React.useMemo(\n () => (isPasswordVisible ? StyledEyeClosedIcon : StyledEyeOpenIcon),\n [isPasswordVisible]\n );\n\n const passwordAction = React.useMemo(\n () => (isPasswordVisible ? 'Hide password' : 'Show password'),\n [isPasswordVisible]\n );\n\n return (\n <Box css={css}>\n {LabelNode}\n <Input\n id={id}\n ref={inputRef}\n endAdornment={\n hasInnerAdornment && (\n <EndAdornmentWrapper>\n {invalid && <StyledExclamationTriangleIcon role=\"alert\" aria-label=\"Invalid\" />}\n {isPasswordType && (\n <Tooltip content={passwordAction}>\n <PasswordVisibilityToggleIcon\n aria-label={passwordAction}\n onClick={togglePasswordVisibility}\n />\n </Tooltip>\n )}\n {clearable && !clearDisabled && (\n <Tooltip content=\"Clear\">\n <StyledCrossCircledIcon aria-label=\"Clear\" onClick={handleClear} />\n </Tooltip>\n )}\n </EndAdornmentWrapper>\n )\n }\n state={state}\n type={typeOrInnerType}\n disabled={disabled}\n readOnly={readOnly}\n onFocus={handleFocus}\n onBlur={handleBlur}\n {...props}\n />\n </Box>\n );\n }\n);\n"],"mappings":";;;;;;;;;;;AA4BA,IAAM,iBAAiB,wBAAA,OAAO,OAAO;CACnC,SAAS;CACT,eAAe;CACf,YAAY;CACb,CAAC;AAEF,IAAM,gCAAgC,wBAAA,OAAO,sBAAA,yBAAyB,EACpE,SAAS,EACP,YAAY,MACb,EACF,CAAC;AAEF,IAAM,oBAAoB,wBAAA,OAAO,sBAAA,aAAa,EAC5C,UAAU,EACR,WAAW,EACT,QAAQ,WACT,EACF,EACF,CAAC;AAEF,IAAM,sBAAsB,wBAAA,OAAO,sBAAA,eAAe,EAChD,UAAU,EACR,WAAW,EACT,QAAQ,WACT,EACF,EACF,CAAC;AAEF,IAAM,yBAAyB,wBAAA,OAAO,sBAAA,kBAAkB,EACtD,UAAU,EACR,WAAW,EACT,QAAQ,WACT,EACF,EACF,CAAC;AAEF,IAAa,YAAY,MAAA,QAAM,YAE3B,EACE,OACA,WACA,OAAO,kBACP,IACA,MACA,UACA,UACA,QACA,SACA,KACA,GAAG,SAEL,iBACG;CACH,MAAM,WAAW,MAAA,QAAM,OAA2B,KAAK;~~AACvD~~,~~OAAA~~,QAAM,oBAAoB,oBAAoB,SAAS,QAAuB;CAE9E,MAAM,CAAC,eAAe,oBAAoB,MAAA,QAAM,SAAS,MAAM;CAC/D,MAAM,CAAC,WAAW,gBAAgB,MAAA,QAAM,SAAS,KAAK;CACtD,MAAM,oBAAoB,MAAA,QAAM,cAAc,cAAc,YAAY,CAAC,UAAU,CAAC;CAEpF,MAAM,UAAU,MAAA,QAAM,cAAc,UAAU,WAAW,CAAC,MAAM,CAAC;CAEjE,MAAM,eAAe,MAAA,QAAM,cAAc;~~AACvC~~,~~MAAI~~,~~SACF~~,~~QAAO~~;~~AAET~~,~~MAAI~~,~~QACF~~,~~QAAO~~;~~AAET~~,~~MAAI~~,~~cACF~~,~~QAAO~~;~~AAET~~,~~SAAO~~;IACN;EAAC;EAAS;EAAU;EAAc,CAAC;CAEtC,MAAM,YAAY,MAAA,QAAM,cAAc;~~AACpC~~,~~MAAI~~,qBAAqB,KAAA,KAAa,qBAAqB,~~KACzD~~,~~QAAO~~;~~AAET~~,~~MAAI~~,OAAO,qBAAqB,~~SAC9B~~,~~QACE~~,iBAAA,GAAA,kBAAA,KAAC,cAAA,OAAD;GAAO,SAAS;GAAc,SAAS;aACpC;GACK,CAAA;~~AAGZ~~,~~SAAO~~,iBAAA,GAAA,kBAAA,KAAC,kBAAD;GAAkB,SAAS;GAAc,SAAS;GAAM,CAAA;IAC9D;EAAC;EAAkB;EAAc;EAAG,CAAC;CAExC,MAAM,iBAAiB,MAAA,QAAM,cAAc,SAAS,YAAY,CAAC,KAAK,CAAC;CAEvE,MAAM,kBAAkB,MAAA,QAAM,cACrB,iBAAiB,YAAY,MACpC;EAAC;EAAgB;EAAM;EAAU,CAClC;CAED,MAAM,oBAAoB,MAAA,QAAM,cACxB,aAAa,kBAAkB,SACrC;EAAC;EAAW;EAAgB;EAAQ,CACrC;CAED,MAAM,oBAAoB,MAAA,QAAM,cACvB,aAAa,WAAa,aAAa,kBAAoB,WAAW,gBAC7E;EAAC;EAAW;EAAS;EAAe,CACrC;CAED,MAAM,gBAAgB,MAAA,QAAM,cAAc,YAAY,UAAU,CAAC,UAAU,SAAS,CAAC;CAErF,MAAM,cAAc,MAAA,QAAM,kBAAkB;EAC1C,MAAM,EAAE,YAAY;~~AACpB~~,~~MAAI~~,~~QACF~~,~~SAAQ~~,OAAO;IAEhB,CAAC,SAAS,CAAC;CAEd,MAAM,cAAc,MAAA,QAAM,aACvB,MAA0C;~~AACzC~~,~~MAAI~~,~~QACF~~,~~SAAQ~~,EAAE;~~AAEZ~~,~~mBAAiB~~,KAAK;IAExB,CAAC,SAAS,iBAAiB,CAC5B;CAED,MAAM,aAAa,MAAA,QAAM,aACtB,MAA0C;~~AACzC~~,~~MAAI~~,~~OACF~~,~~QAAO~~,EAAE;~~AAEX~~,~~mBAAiB~~,MAAM;IAEzB,CAAC,QAAQ,iBAAiB,CAC3B;CAED,MAAM,2BAA2B,MAAA,QAAM,kBAAkB;~~AACvD~~,~~gBAAc~~,kBAAmB,kBAAkB,aAAa,KAAA,IAAY,WAAY;IACvF,CAAC,aAAa,CAAC;CAElB,MAAM,sBAAsB,MAAA,QAAM,cACzB,oBAAoB,iBAAiB,MAAA,QAAM,UAClD,CAAC,kBAAkB,CACpB;CAED,MAAM,+BAA+B,MAAA,QAAM,cAClC,oBAAoB,sBAAsB,mBACjD,CAAC,kBAAkB,CACpB;CAED,MAAM,iBAAiB,MAAA,QAAM,cACpB,oBAAoB,kBAAkB,iBAC7C,CAAC,kBAAkB,CACpB;~~AAED~~,~~QACE~~,iBAAA,GAAA,kBAAA,MAAC,YAAA,KAAD;EAAU;YAAV,CACG,WACD,iBAAA,GAAA,kBAAA,KAAC,cAAA,OAAD;GACM;GACJ,KAAK;GACL,cACE,qBACE,iBAAA,GAAA,kBAAA,MAAC,qBAAD,EAAA,UAAA;IACG,WAAW,iBAAA,GAAA,kBAAA,KAAC,+BAAD;KAA+B,MAAK;KAAQ,cAAW;KAAY,CAAA;IAC9E,kBACC,iBAAA,GAAA,kBAAA,KAAC,gBAAA,SAAD;KAAS,SAAS;eAChB,iBAAA,GAAA,kBAAA,KAAC,8BAAD;MACE,cAAY;MACZ,SAAS;MACT,CAAA;KACM,CAAA;IAEX,aAAa,CAAC,iBACb,iBAAA,GAAA,kBAAA,KAAC,gBAAA,SAAD;KAAS,SAAQ;eACf,iBAAA,GAAA,kBAAA,KAAC,wBAAD;MAAwB,cAAW;MAAQ,SAAS;MAAe,CAAA;KAC3D,CAAA;IAEQ,EAAA,CAAA;GAGnB;GACP,MAAM;GACI;GACA;GACV,SAAS;GACT,QAAQ;GACR,GAAI;GACJ,CAAA,CACE;;EAGX"}
1	+ {"version":3,"file":"TextField.cjs","names":[],"sources":["../../../components/TextField/TextField.tsx"],"sourcesContent":["import {\n CrossCircledIcon,\n ExclamationTriangleIcon,\n EyeClosedIcon,\n EyeOpenIcon,\n} from '@radix-ui/react-icons';\nimport React from 'react';\n\nimport { styled } from '../../stitches.config';\nimport { Box } from '../Box';\nimport { Input, InputHandle, InputProps, InputVariants } from '../Input';\nimport { Label } from '../Label';\nimport { Tooltip } from '../Tooltip';\n\n// TYPES\nexport interface TextFieldLabelProps {\n variant: 'invalid' \| 'subtle' \| 'contrast' \| 'default';\n htmlFor?: string;\n}\nexport type TextFieldProps = InputProps & {\n type?: string;\n clearable?: boolean;\n label?: string \| ((props: TextFieldLabelProps) => JSX.Element);\n};\n\nexport type TextFieldVariants = InputVariants;\n\n// COMPONENTS\nconst AdornmentGroup = styled('div', {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n});\n\nconst StyledExclamationTriangleIcon = styled(ExclamationTriangleIcon, {\n '& + *': {\n marginLeft: '$1',\n },\n});\n\nconst StyledEyeOpenIcon = styled(EyeOpenIcon, {\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n },\n },\n});\n\nconst StyledEyeClosedIcon = styled(EyeClosedIcon, {\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n },\n },\n});\n\nconst StyledCrossCircledIcon = styled(CrossCircledIcon, {\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n },\n },\n});\n\nexport const TextField = React.forwardRef<React.ElementRef<typeof Input>, TextFieldProps>(\n (\n {\n state,\n clearable,\n label: LabelOrComponent,\n id,\n type,\n disabled,\n readOnly,\n onBlur,\n onFocus,\n css,\n ...props\n },\n forwardedRef\n ) => {\n const inputRef = React.useRef<InputHandle \| null>(null);\n React.useImperativeHandle(forwardedRef, () => inputRef.current as InputHandle);\n\n const [inputHasFocus, setInputHasFocus] = React.useState(false);\n const [innerType, setInnerType] = React.useState(type);\n const isPasswordVisible = React.useMemo(() => innerType !== 'password', [innerType]);\n\n const invalid = React.useMemo(() => state === 'invalid', [state]);\n\n const labelVariant = React.useMemo(() => {\n if (disabled) {\n return 'subtle';\n }\n if (invalid) {\n return 'invalid';\n }\n if (inputHasFocus) {\n return 'contrast';\n }\n return 'default';\n }, [invalid, disabled, inputHasFocus]);\n\n const LabelNode = React.useMemo(() => {\n if (LabelOrComponent === undefined \|\| LabelOrComponent === null) {\n return null;\n }\n if (typeof LabelOrComponent === 'string') {\n return (\n <Label variant={labelVariant} htmlFor={id}>\n {LabelOrComponent}\n </Label>\n );\n }\n return <LabelOrComponent variant={labelVariant} htmlFor={id} />;\n }, [LabelOrComponent, labelVariant, id]);\n\n const isPasswordType = React.useMemo(() => type === 'password', [type]);\n\n const typeOrInnerType = React.useMemo(\n () => (isPasswordType ? innerType : type),\n [isPasswordType, type, innerType]\n );\n\n const hasInnerAdornment = React.useMemo(\n () => clearable \|\| isPasswordType \|\| invalid,\n [clearable, isPasswordType, invalid]\n );\n\n const hasAdornmentGroup = React.useMemo(\n () => (clearable && invalid) \|\| (clearable && isPasswordType) \|\| (invalid && isPasswordType),\n [clearable, invalid, isPasswordType]\n );\n\n const clearDisabled = React.useMemo(() => readOnly \|\| disabled, [readOnly, disabled]);\n\n const handleClear = React.useCallback(() => {\n const { current } = inputRef;\n if (current) {\n current.clear();\n }\n }, [inputRef]);\n\n const handleFocus = React.useCallback(\n (e: React.FocusEvent<HTMLInputElement>) => {\n if (onFocus) {\n onFocus(e);\n }\n setInputHasFocus(true);\n },\n [onFocus, setInputHasFocus]\n );\n\n const handleBlur = React.useCallback(\n (e: React.FocusEvent<HTMLInputElement>) => {\n if (onBlur) {\n onBlur(e);\n }\n setInputHasFocus(false);\n },\n [onBlur, setInputHasFocus]\n );\n\n const togglePasswordVisibility = React.useCallback(() => {\n setInnerType((prevInnerType) => (prevInnerType === 'password' ? undefined : 'password'));\n }, [setInnerType]);\n\n const EndAdornmentWrapper = React.useMemo(\n () => (hasAdornmentGroup ? AdornmentGroup : React.Fragment),\n [hasAdornmentGroup]\n );\n\n const PasswordVisibilityToggleIcon = React.useMemo(\n () => (isPasswordVisible ? StyledEyeClosedIcon : StyledEyeOpenIcon),\n [isPasswordVisible]\n );\n\n const passwordAction = React.useMemo(\n () => (isPasswordVisible ? 'Hide password' : 'Show password'),\n [isPasswordVisible]\n );\n\n return (\n <Box css={css}>\n {LabelNode}\n <Input\n id={id}\n ref={inputRef}\n endAdornment={\n hasInnerAdornment && (\n <EndAdornmentWrapper>\n {invalid && <StyledExclamationTriangleIcon role=\"alert\" aria-label=\"Invalid\" />}\n {isPasswordType && (\n <Tooltip content={passwordAction}>\n <PasswordVisibilityToggleIcon\n aria-label={passwordAction}\n onClick={togglePasswordVisibility}\n />\n </Tooltip>\n )}\n {clearable && !clearDisabled && (\n <Tooltip content=\"Clear\">\n <StyledCrossCircledIcon aria-label=\"Clear\" onClick={handleClear} />\n </Tooltip>\n )}\n </EndAdornmentWrapper>\n )\n }\n state={state}\n type={typeOrInnerType}\n disabled={disabled}\n readOnly={readOnly}\n onFocus={handleFocus}\n onBlur={handleBlur}\n {...props}\n />\n </Box>\n );\n }\n);\n"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TextField.js","names":[],"sources":["../../../components/TextField/TextField.tsx"],"sourcesContent":["import {\n CrossCircledIcon,\n ExclamationTriangleIcon,\n EyeClosedIcon,\n EyeOpenIcon,\n} from '@radix-ui/react-icons';\nimport React from 'react';\n\nimport { styled } from '../../stitches.config';\nimport { Box } from '../Box';\nimport { Input, InputHandle, InputProps, InputVariants } from '../Input';\nimport { Label } from '../Label';\nimport { Tooltip } from '../Tooltip';\n\n// TYPES\nexport interface TextFieldLabelProps {\n variant: 'invalid' \| 'subtle' \| 'contrast' \| 'default';\n htmlFor?: string;\n}\nexport type TextFieldProps = InputProps & {\n type?: string;\n clearable?: boolean;\n label?: string \| ((props: TextFieldLabelProps) => JSX.Element);\n};\n\nexport type TextFieldVariants = InputVariants;\n\n// COMPONENTS\nconst AdornmentGroup = styled('div', {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n});\n\nconst StyledExclamationTriangleIcon = styled(ExclamationTriangleIcon, {\n '& + *': {\n marginLeft: '$1',\n },\n});\n\nconst StyledEyeOpenIcon = styled(EyeOpenIcon, {\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n },\n },\n});\n\nconst StyledEyeClosedIcon = styled(EyeClosedIcon, {\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n },\n },\n});\n\nconst StyledCrossCircledIcon = styled(CrossCircledIcon, {\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n },\n },\n});\n\nexport const TextField = React.forwardRef<React.ElementRef<typeof Input>, TextFieldProps>(\n (\n {\n state,\n clearable,\n label: LabelOrComponent,\n id,\n type,\n disabled,\n readOnly,\n onBlur,\n onFocus,\n css,\n ...props\n },\n forwardedRef\n ) => {\n const inputRef = React.useRef<InputHandle \| null>(null);\n React.useImperativeHandle(forwardedRef, () => inputRef.current as InputHandle);\n\n const [inputHasFocus, setInputHasFocus] = React.useState(false);\n const [innerType, setInnerType] = React.useState(type);\n const isPasswordVisible = React.useMemo(() => innerType !== 'password', [innerType]);\n\n const invalid = React.useMemo(() => state === 'invalid', [state]);\n\n const labelVariant = React.useMemo(() => {\n if (disabled) {\n return 'subtle';\n }\n if (invalid) {\n return 'invalid';\n }\n if (inputHasFocus) {\n return 'contrast';\n }\n return 'default';\n }, [invalid, disabled, inputHasFocus]);\n\n const LabelNode = React.useMemo(() => {\n if (LabelOrComponent === undefined \|\| LabelOrComponent === null) {\n return null;\n }\n if (typeof LabelOrComponent === 'string') {\n return (\n <Label variant={labelVariant} htmlFor={id}>\n {LabelOrComponent}\n </Label>\n );\n }\n return <LabelOrComponent variant={labelVariant} htmlFor={id} />;\n }, [LabelOrComponent, labelVariant, id]);\n\n const isPasswordType = React.useMemo(() => type === 'password', [type]);\n\n const typeOrInnerType = React.useMemo(\n () => (isPasswordType ? innerType : type),\n [isPasswordType, type, innerType]\n );\n\n const hasInnerAdornment = React.useMemo(\n () => clearable \|\| isPasswordType \|\| invalid,\n [clearable, isPasswordType, invalid]\n );\n\n const hasAdornmentGroup = React.useMemo(\n () => (clearable && invalid) \|\| (clearable && isPasswordType) \|\| (invalid && isPasswordType),\n [clearable, invalid, isPasswordType]\n );\n\n const clearDisabled = React.useMemo(() => readOnly \|\| disabled, [readOnly, disabled]);\n\n const handleClear = React.useCallback(() => {\n const { current } = inputRef;\n if (current) {\n current.clear();\n }\n }, [inputRef]);\n\n const handleFocus = React.useCallback(\n (e: React.FocusEvent<HTMLInputElement>) => {\n if (onFocus) {\n onFocus(e);\n }\n setInputHasFocus(true);\n },\n [onFocus, setInputHasFocus]\n );\n\n const handleBlur = React.useCallback(\n (e: React.FocusEvent<HTMLInputElement>) => {\n if (onBlur) {\n onBlur(e);\n }\n setInputHasFocus(false);\n },\n [onBlur, setInputHasFocus]\n );\n\n const togglePasswordVisibility = React.useCallback(() => {\n setInnerType((prevInnerType) => (prevInnerType === 'password' ? undefined : 'password'));\n }, [setInnerType]);\n\n const EndAdornmentWrapper = React.useMemo(\n () => (hasAdornmentGroup ? AdornmentGroup : React.Fragment),\n [hasAdornmentGroup]\n );\n\n const PasswordVisibilityToggleIcon = React.useMemo(\n () => (isPasswordVisible ? StyledEyeClosedIcon : StyledEyeOpenIcon),\n [isPasswordVisible]\n );\n\n const passwordAction = React.useMemo(\n () => (isPasswordVisible ? 'Hide password' : 'Show password'),\n [isPasswordVisible]\n );\n\n return (\n <Box css={css}>\n {LabelNode}\n <Input\n id={id}\n ref={inputRef}\n endAdornment={\n hasInnerAdornment && (\n <EndAdornmentWrapper>\n {invalid && <StyledExclamationTriangleIcon role=\"alert\" aria-label=\"Invalid\" />}\n {isPasswordType && (\n <Tooltip content={passwordAction}>\n <PasswordVisibilityToggleIcon\n aria-label={passwordAction}\n onClick={togglePasswordVisibility}\n />\n </Tooltip>\n )}\n {clearable && !clearDisabled && (\n <Tooltip content=\"Clear\">\n <StyledCrossCircledIcon aria-label=\"Clear\" onClick={handleClear} />\n </Tooltip>\n )}\n </EndAdornmentWrapper>\n )\n }\n state={state}\n type={typeOrInnerType}\n disabled={disabled}\n readOnly={readOnly}\n onFocus={handleFocus}\n onBlur={handleBlur}\n {...props}\n />\n </Box>\n );\n }\n);\n"],"mappings":";;;;;;;;;AA4BA,IAAM,iBAAiB,OAAO,OAAO;CACnC,SAAS;CACT,eAAe;CACf,YAAY;CACb,CAAC;AAEF,IAAM,gCAAgC,OAAO,yBAAyB,EACpE,SAAS,EACP,YAAY,MACb,EACF,CAAC;AAEF,IAAM,oBAAoB,OAAO,aAAa,EAC5C,UAAU,EACR,WAAW,EACT,QAAQ,WACT,EACF,EACF,CAAC;AAEF,IAAM,sBAAsB,OAAO,eAAe,EAChD,UAAU,EACR,WAAW,EACT,QAAQ,WACT,EACF,EACF,CAAC;AAEF,IAAM,yBAAyB,OAAO,kBAAkB,EACtD,UAAU,EACR,WAAW,EACT,QAAQ,WACT,EACF,EACF,CAAC;AAEF,IAAa,YAAY,MAAM,YAE3B,EACE,OACA,WACA,OAAO,kBACP,IACA,MACA,UACA,UACA,QACA,SACA,KACA,GAAG,SAEL,iBACG;CACH,MAAM,WAAW,MAAM,OAA2B,KAAK;~~AACvD~~,~~OAAM~~,oBAAoB,oBAAoB,SAAS,QAAuB;CAE9E,MAAM,CAAC,eAAe,oBAAoB,MAAM,SAAS,MAAM;CAC/D,MAAM,CAAC,WAAW,gBAAgB,MAAM,SAAS,KAAK;CACtD,MAAM,oBAAoB,MAAM,cAAc,cAAc,YAAY,CAAC,UAAU,CAAC;CAEpF,MAAM,UAAU,MAAM,cAAc,UAAU,WAAW,CAAC,MAAM,CAAC;CAEjE,MAAM,eAAe,MAAM,cAAc;~~AACvC~~,~~MAAI~~,~~SACF~~,~~QAAO~~;~~AAET~~,~~MAAI~~,~~QACF~~,~~QAAO~~;~~AAET~~,~~MAAI~~,~~cACF~~,~~QAAO~~;~~AAET~~,~~SAAO~~;IACN;EAAC;EAAS;EAAU;EAAc,CAAC;CAEtC,MAAM,YAAY,MAAM,cAAc;~~AACpC~~,~~MAAI~~,qBAAqB,KAAA,KAAa,qBAAqB,~~KACzD~~,~~QAAO~~;~~AAET~~,~~MAAI~~,OAAO,qBAAqB,~~SAC9B~~,~~QACE~~,oBAAC,OAAD;GAAO,SAAS;GAAc,SAAS;aACpC;GACK,CAAA;~~AAGZ~~,~~SAAO~~,oBAAC,kBAAD;GAAkB,SAAS;GAAc,SAAS;GAAM,CAAA;IAC9D;EAAC;EAAkB;EAAc;EAAG,CAAC;CAExC,MAAM,iBAAiB,MAAM,cAAc,SAAS,YAAY,CAAC,KAAK,CAAC;CAEvE,MAAM,kBAAkB,MAAM,cACrB,iBAAiB,YAAY,MACpC;EAAC;EAAgB;EAAM;EAAU,CAClC;CAED,MAAM,oBAAoB,MAAM,cACxB,aAAa,kBAAkB,SACrC;EAAC;EAAW;EAAgB;EAAQ,CACrC;CAED,MAAM,oBAAoB,MAAM,cACvB,aAAa,WAAa,aAAa,kBAAoB,WAAW,gBAC7E;EAAC;EAAW;EAAS;EAAe,CACrC;CAED,MAAM,gBAAgB,MAAM,cAAc,YAAY,UAAU,CAAC,UAAU,SAAS,CAAC;CAErF,MAAM,cAAc,MAAM,kBAAkB;EAC1C,MAAM,EAAE,YAAY;~~AACpB~~,~~MAAI~~,~~QACF~~,~~SAAQ~~,OAAO;IAEhB,CAAC,SAAS,CAAC;CAEd,MAAM,cAAc,MAAM,aACvB,MAA0C;~~AACzC~~,~~MAAI~~,~~QACF~~,~~SAAQ~~,EAAE;~~AAEZ~~,~~mBAAiB~~,KAAK;IAExB,CAAC,SAAS,iBAAiB,CAC5B;CAED,MAAM,aAAa,MAAM,aACtB,MAA0C;~~AACzC~~,~~MAAI~~,~~OACF~~,~~QAAO~~,EAAE;~~AAEX~~,~~mBAAiB~~,MAAM;IAEzB,CAAC,QAAQ,iBAAiB,CAC3B;CAED,MAAM,2BAA2B,MAAM,kBAAkB;~~AACvD~~,~~gBAAc~~,kBAAmB,kBAAkB,aAAa,KAAA,IAAY,WAAY;IACvF,CAAC,aAAa,CAAC;CAElB,MAAM,sBAAsB,MAAM,cACzB,oBAAoB,iBAAiB,MAAM,UAClD,CAAC,kBAAkB,CACpB;CAED,MAAM,+BAA+B,MAAM,cAClC,oBAAoB,sBAAsB,mBACjD,CAAC,kBAAkB,CACpB;CAED,MAAM,iBAAiB,MAAM,cACpB,oBAAoB,kBAAkB,iBAC7C,CAAC,kBAAkB,CACpB;~~AAED~~,~~QACE~~,qBAAC,KAAD;EAAU;YAAV,CACG,WACD,oBAAC,OAAD;GACM;GACJ,KAAK;GACL,cACE,qBACE,qBAAC,qBAAD,EAAA,UAAA;IACG,WAAW,oBAAC,+BAAD;KAA+B,MAAK;KAAQ,cAAW;KAAY,CAAA;IAC9E,kBACC,oBAAC,SAAD;KAAS,SAAS;eAChB,oBAAC,8BAAD;MACE,cAAY;MACZ,SAAS;MACT,CAAA;KACM,CAAA;IAEX,aAAa,CAAC,iBACb,oBAAC,SAAD;KAAS,SAAQ;eACf,oBAAC,wBAAD;MAAwB,cAAW;MAAQ,SAAS;MAAe,CAAA;KAC3D,CAAA;IAEQ,EAAA,CAAA;GAGnB;GACP,MAAM;GACI;GACA;GACV,SAAS;GACT,QAAQ;GACR,GAAI;GACJ,CAAA,CACE;;EAGX"}
1	+ {"version":3,"file":"TextField.js","names":[],"sources":["../../../components/TextField/TextField.tsx"],"sourcesContent":["import {\n CrossCircledIcon,\n ExclamationTriangleIcon,\n EyeClosedIcon,\n EyeOpenIcon,\n} from '@radix-ui/react-icons';\nimport React from 'react';\n\nimport { styled } from '../../stitches.config';\nimport { Box } from '../Box';\nimport { Input, InputHandle, InputProps, InputVariants } from '../Input';\nimport { Label } from '../Label';\nimport { Tooltip } from '../Tooltip';\n\n// TYPES\nexport interface TextFieldLabelProps {\n variant: 'invalid' \| 'subtle' \| 'contrast' \| 'default';\n htmlFor?: string;\n}\nexport type TextFieldProps = InputProps & {\n type?: string;\n clearable?: boolean;\n label?: string \| ((props: TextFieldLabelProps) => JSX.Element);\n};\n\nexport type TextFieldVariants = InputVariants;\n\n// COMPONENTS\nconst AdornmentGroup = styled('div', {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n});\n\nconst StyledExclamationTriangleIcon = styled(ExclamationTriangleIcon, {\n '& + *': {\n marginLeft: '$1',\n },\n});\n\nconst StyledEyeOpenIcon = styled(EyeOpenIcon, {\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n },\n },\n});\n\nconst StyledEyeClosedIcon = styled(EyeClosedIcon, {\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n },\n },\n});\n\nconst StyledCrossCircledIcon = styled(CrossCircledIcon, {\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n },\n },\n});\n\nexport const TextField = React.forwardRef<React.ElementRef<typeof Input>, TextFieldProps>(\n (\n {\n state,\n clearable,\n label: LabelOrComponent,\n id,\n type,\n disabled,\n readOnly,\n onBlur,\n onFocus,\n css,\n ...props\n },\n forwardedRef\n ) => {\n const inputRef = React.useRef<InputHandle \| null>(null);\n React.useImperativeHandle(forwardedRef, () => inputRef.current as InputHandle);\n\n const [inputHasFocus, setInputHasFocus] = React.useState(false);\n const [innerType, setInnerType] = React.useState(type);\n const isPasswordVisible = React.useMemo(() => innerType !== 'password', [innerType]);\n\n const invalid = React.useMemo(() => state === 'invalid', [state]);\n\n const labelVariant = React.useMemo(() => {\n if (disabled) {\n return 'subtle';\n }\n if (invalid) {\n return 'invalid';\n }\n if (inputHasFocus) {\n return 'contrast';\n }\n return 'default';\n }, [invalid, disabled, inputHasFocus]);\n\n const LabelNode = React.useMemo(() => {\n if (LabelOrComponent === undefined \|\| LabelOrComponent === null) {\n return null;\n }\n if (typeof LabelOrComponent === 'string') {\n return (\n <Label variant={labelVariant} htmlFor={id}>\n {LabelOrComponent}\n </Label>\n );\n }\n return <LabelOrComponent variant={labelVariant} htmlFor={id} />;\n }, [LabelOrComponent, labelVariant, id]);\n\n const isPasswordType = React.useMemo(() => type === 'password', [type]);\n\n const typeOrInnerType = React.useMemo(\n () => (isPasswordType ? innerType : type),\n [isPasswordType, type, innerType]\n );\n\n const hasInnerAdornment = React.useMemo(\n () => clearable \|\| isPasswordType \|\| invalid,\n [clearable, isPasswordType, invalid]\n );\n\n const hasAdornmentGroup = React.useMemo(\n () => (clearable && invalid) \|\| (clearable && isPasswordType) \|\| (invalid && isPasswordType),\n [clearable, invalid, isPasswordType]\n );\n\n const clearDisabled = React.useMemo(() => readOnly \|\| disabled, [readOnly, disabled]);\n\n const handleClear = React.useCallback(() => {\n const { current } = inputRef;\n if (current) {\n current.clear();\n }\n }, [inputRef]);\n\n const handleFocus = React.useCallback(\n (e: React.FocusEvent<HTMLInputElement>) => {\n if (onFocus) {\n onFocus(e);\n }\n setInputHasFocus(true);\n },\n [onFocus, setInputHasFocus]\n );\n\n const handleBlur = React.useCallback(\n (e: React.FocusEvent<HTMLInputElement>) => {\n if (onBlur) {\n onBlur(e);\n }\n setInputHasFocus(false);\n },\n [onBlur, setInputHasFocus]\n );\n\n const togglePasswordVisibility = React.useCallback(() => {\n setInnerType((prevInnerType) => (prevInnerType === 'password' ? undefined : 'password'));\n }, [setInnerType]);\n\n const EndAdornmentWrapper = React.useMemo(\n () => (hasAdornmentGroup ? AdornmentGroup : React.Fragment),\n [hasAdornmentGroup]\n );\n\n const PasswordVisibilityToggleIcon = React.useMemo(\n () => (isPasswordVisible ? StyledEyeClosedIcon : StyledEyeOpenIcon),\n [isPasswordVisible]\n );\n\n const passwordAction = React.useMemo(\n () => (isPasswordVisible ? 'Hide password' : 'Show password'),\n [isPasswordVisible]\n );\n\n return (\n <Box css={css}>\n {LabelNode}\n <Input\n id={id}\n ref={inputRef}\n endAdornment={\n hasInnerAdornment && (\n <EndAdornmentWrapper>\n {invalid && <StyledExclamationTriangleIcon role=\"alert\" aria-label=\"Invalid\" />}\n {isPasswordType && (\n <Tooltip content={passwordAction}>\n <PasswordVisibilityToggleIcon\n aria-label={passwordAction}\n onClick={togglePasswordVisibility}\n />\n </Tooltip>\n )}\n {clearable && !clearDisabled && (\n <Tooltip content=\"Clear\">\n <StyledCrossCircledIcon aria-label=\"Clear\" onClick={handleClear} />\n </Tooltip>\n )}\n </EndAdornmentWrapper>\n )\n }\n state={state}\n type={typeOrInnerType}\n disabled={disabled}\n readOnly={readOnly}\n onFocus={handleFocus}\n onBlur={handleBlur}\n {...props}\n />\n </Box>\n );\n }\n);\n"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TextField.vanilla.cjs","names":[],"sources":["../../../components/TextField/TextField.vanilla.tsx"],"sourcesContent":["import {\n CrossCircledIcon,\n ExclamationTriangleIcon,\n EyeClosedIcon,\n EyeOpenIcon,\n} from '@radix-ui/react-icons';\nimport React from 'react';\n\nimport { styled } from '../../stitches.config';\nimport { BoxVanilla } from '../Box';\nimport { InputVanilla, InputVanillaHandle, InputVanillaProps } from '../Input';\nimport { LabelVanilla } from '../Label';\nimport { Tooltip } from '../Tooltip';\n\n// TYPES\nexport interface TextFieldLabelProps {\n variant: 'invalid' \| 'subtle' \| 'contrast' \| 'default';\n htmlFor?: string;\n}\n\nexport type TextFieldVanillaProps = InputVanillaProps & {\n type?: string;\n clearable?: boolean;\n label?: string \| ((props: TextFieldLabelProps) => JSX.Element);\n};\n\n// COMPONENTS\nconst AdornmentGroup = styled('div', {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n});\n\nconst StyledExclamationTriangleIcon = styled(ExclamationTriangleIcon, {\n '& + *': {\n marginLeft: '$1',\n },\n});\n\nconst StyledEyeOpenIcon = styled(EyeOpenIcon, {\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n },\n },\n});\n\nconst StyledEyeClosedIcon = styled(EyeClosedIcon, {\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n },\n },\n});\n\nconst StyledCrossCircledIcon = styled(CrossCircledIcon, {\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n },\n },\n});\n\nexport const TextFieldVanilla = React.forwardRef<\n React.ElementRef<typeof InputVanilla>,\n TextFieldVanillaProps\n>(\n (\n {\n state,\n clearable,\n label: LabelOrComponent,\n id,\n type,\n disabled,\n readOnly,\n onBlur,\n onFocus,\n css,\n ...props\n },\n forwardedRef,\n ) => {\n const inputRef = React.useRef<InputVanillaHandle \| null>(null);\n React.useImperativeHandle(forwardedRef, () => inputRef.current as InputVanillaHandle);\n\n const [inputHasFocus, setInputHasFocus] = React.useState(false);\n const [innerType, setInnerType] = React.useState(type);\n const isPasswordVisible = React.useMemo(() => innerType !== 'password', [innerType]);\n\n const invalid = React.useMemo(() => state === 'invalid', [state]);\n\n const labelVariant = React.useMemo(() => {\n if (disabled) {\n return 'subtle';\n }\n if (invalid) {\n return 'invalid';\n }\n if (inputHasFocus) {\n return 'contrast';\n }\n return 'default';\n }, [invalid, disabled, inputHasFocus]);\n\n const LabelNode = React.useMemo(() => {\n if (LabelOrComponent === undefined \|\| LabelOrComponent === null) {\n return null;\n }\n if (typeof LabelOrComponent === 'string') {\n return (\n <LabelVanilla variant={labelVariant} htmlFor={id}>\n {LabelOrComponent}\n </LabelVanilla>\n );\n }\n return <LabelOrComponent variant={labelVariant} htmlFor={id} />;\n }, [LabelOrComponent, labelVariant, id]);\n\n const isPasswordType = React.useMemo(() => type === 'password', [type]);\n\n const typeOrInnerType = React.useMemo(\n () => (isPasswordType ? innerType : type),\n [isPasswordType, type, innerType],\n );\n\n const hasInnerAdornment = React.useMemo(\n () => clearable \|\| isPasswordType \|\| invalid,\n [clearable, isPasswordType, invalid],\n );\n\n const hasAdornmentGroup = React.useMemo(\n () => (clearable && invalid) \|\| (clearable && isPasswordType) \|\| (invalid && isPasswordType),\n [clearable, invalid, isPasswordType],\n );\n\n const clearDisabled = React.useMemo(() => readOnly \|\| disabled, [readOnly, disabled]);\n\n const handleClear = React.useCallback(() => {\n const { current } = inputRef;\n if (current) {\n current.clear();\n }\n }, [inputRef]);\n\n const handleFocus = React.useCallback(\n (e: React.FocusEvent<HTMLInputElement>) => {\n if (onFocus) {\n onFocus(e);\n }\n setInputHasFocus(true);\n },\n [onFocus, setInputHasFocus],\n );\n\n const handleBlur = React.useCallback(\n (e: React.FocusEvent<HTMLInputElement>) => {\n if (onBlur) {\n onBlur(e);\n }\n setInputHasFocus(false);\n },\n [onBlur, setInputHasFocus],\n );\n\n const togglePasswordVisibility = React.useCallback(() => {\n setInnerType((prevInnerType) => (prevInnerType === 'password' ? undefined : 'password'));\n }, [setInnerType]);\n\n const EndAdornmentWrapper = React.useMemo(\n () => (hasAdornmentGroup ? AdornmentGroup : React.Fragment),\n [hasAdornmentGroup],\n );\n\n const PasswordVisibilityToggleIcon = React.useMemo(\n () => (isPasswordVisible ? StyledEyeClosedIcon : StyledEyeOpenIcon),\n [isPasswordVisible],\n );\n\n const passwordAction = React.useMemo(\n () => (isPasswordVisible ? 'Hide password' : 'Show password'),\n [isPasswordVisible],\n );\n\n return (\n <BoxVanilla css={css}>\n {LabelNode}\n <InputVanilla\n id={id}\n ref={inputRef}\n endAdornment={\n hasInnerAdornment && (\n <EndAdornmentWrapper>\n {invalid && <StyledExclamationTriangleIcon role=\"alert\" aria-label=\"Invalid\" />}\n {isPasswordType && (\n <Tooltip content={passwordAction}>\n <PasswordVisibilityToggleIcon\n aria-label={passwordAction}\n onClick={togglePasswordVisibility}\n />\n </Tooltip>\n )}\n {clearable && !clearDisabled && (\n <Tooltip content=\"Clear\">\n <StyledCrossCircledIcon aria-label=\"Clear\" onClick={handleClear} />\n </Tooltip>\n )}\n </EndAdornmentWrapper>\n )\n }\n state={state}\n type={typeOrInnerType}\n disabled={disabled}\n readOnly={readOnly}\n onFocus={handleFocus}\n onBlur={handleBlur}\n {...props}\n />\n </BoxVanilla>\n );\n },\n);\n\nTextFieldVanilla.displayName = 'TextFieldVanilla';\n"],"mappings":";;;;;;;;;;;AA2BA,IAAM,iBAAiB,wBAAA,OAAO,OAAO;CACnC,SAAS;CACT,eAAe;CACf,YAAY;CACb,CAAC;AAEF,IAAM,gCAAgC,wBAAA,OAAO,sBAAA,yBAAyB,EACpE,SAAS,EACP,YAAY,MACb,EACF,CAAC;AAEF,IAAM,oBAAoB,wBAAA,OAAO,sBAAA,aAAa,EAC5C,UAAU,EACR,WAAW,EACT,QAAQ,WACT,EACF,EACF,CAAC;AAEF,IAAM,sBAAsB,wBAAA,OAAO,sBAAA,eAAe,EAChD,UAAU,EACR,WAAW,EACT,QAAQ,WACT,EACF,EACF,CAAC;AAEF,IAAM,yBAAyB,wBAAA,OAAO,sBAAA,kBAAkB,EACtD,UAAU,EACR,WAAW,EACT,QAAQ,WACT,EACF,EACF,CAAC;AAEF,IAAa,mBAAmB,MAAA,QAAM,YAKlC,EACE,OACA,WACA,OAAO,kBACP,IACA,MACA,UACA,UACA,QACA,SACA,KACA,GAAG,SAEL,iBACG;CACH,MAAM,WAAW,MAAA,QAAM,OAAkC,KAAK;~~AAC9D~~,~~OAAA~~,QAAM,oBAAoB,oBAAoB,SAAS,QAA8B;CAErF,MAAM,CAAC,eAAe,oBAAoB,MAAA,QAAM,SAAS,MAAM;CAC/D,MAAM,CAAC,WAAW,gBAAgB,MAAA,QAAM,SAAS,KAAK;CACtD,MAAM,oBAAoB,MAAA,QAAM,cAAc,cAAc,YAAY,CAAC,UAAU,CAAC;CAEpF,MAAM,UAAU,MAAA,QAAM,cAAc,UAAU,WAAW,CAAC,MAAM,CAAC;CAEjE,MAAM,eAAe,MAAA,QAAM,cAAc;~~AACvC~~,~~MAAI~~,~~SACF~~,~~QAAO~~;~~AAET~~,~~MAAI~~,~~QACF~~,~~QAAO~~;~~AAET~~,~~MAAI~~,~~cACF~~,~~QAAO~~;~~AAET~~,~~SAAO~~;IACN;EAAC;EAAS;EAAU;EAAc,CAAC;CAEtC,MAAM,YAAY,MAAA,QAAM,cAAc;~~AACpC~~,~~MAAI~~,qBAAqB,KAAA,KAAa,qBAAqB,~~KACzD~~,~~QAAO~~;~~AAET~~,~~MAAI~~,OAAO,qBAAqB,~~SAC9B~~,~~QACE~~,iBAAA,GAAA,kBAAA,KAAC,sBAAA,cAAD;GAAc,SAAS;GAAc,SAAS;aAC3C;GACY,CAAA;~~AAGnB~~,~~SAAO~~,iBAAA,GAAA,kBAAA,KAAC,kBAAD;GAAkB,SAAS;GAAc,SAAS;GAAM,CAAA;IAC9D;EAAC;EAAkB;EAAc;EAAG,CAAC;CAExC,MAAM,iBAAiB,MAAA,QAAM,cAAc,SAAS,YAAY,CAAC,KAAK,CAAC;CAEvE,MAAM,kBAAkB,MAAA,QAAM,cACrB,iBAAiB,YAAY,MACpC;EAAC;EAAgB;EAAM;EAAU,CAClC;CAED,MAAM,oBAAoB,MAAA,QAAM,cACxB,aAAa,kBAAkB,SACrC;EAAC;EAAW;EAAgB;EAAQ,CACrC;CAED,MAAM,oBAAoB,MAAA,QAAM,cACvB,aAAa,WAAa,aAAa,kBAAoB,WAAW,gBAC7E;EAAC;EAAW;EAAS;EAAe,CACrC;CAED,MAAM,gBAAgB,MAAA,QAAM,cAAc,YAAY,UAAU,CAAC,UAAU,SAAS,CAAC;CAErF,MAAM,cAAc,MAAA,QAAM,kBAAkB;EAC1C,MAAM,EAAE,YAAY;~~AACpB~~,~~MAAI~~,~~QACF~~,~~SAAQ~~,OAAO;IAEhB,CAAC,SAAS,CAAC;CAEd,MAAM,cAAc,MAAA,QAAM,aACvB,MAA0C;~~AACzC~~,~~MAAI~~,~~QACF~~,~~SAAQ~~,EAAE;~~AAEZ~~,~~mBAAiB~~,KAAK;IAExB,CAAC,SAAS,iBAAiB,CAC5B;CAED,MAAM,aAAa,MAAA,QAAM,aACtB,MAA0C;~~AACzC~~,~~MAAI~~,~~OACF~~,~~QAAO~~,EAAE;~~AAEX~~,~~mBAAiB~~,MAAM;IAEzB,CAAC,QAAQ,iBAAiB,CAC3B;CAED,MAAM,2BAA2B,MAAA,QAAM,kBAAkB;~~AACvD~~,~~gBAAc~~,kBAAmB,kBAAkB,aAAa,KAAA,IAAY,WAAY;IACvF,CAAC,aAAa,CAAC;CAElB,MAAM,sBAAsB,MAAA,QAAM,cACzB,oBAAoB,iBAAiB,MAAA,QAAM,UAClD,CAAC,kBAAkB,CACpB;CAED,MAAM,+BAA+B,MAAA,QAAM,cAClC,oBAAoB,sBAAsB,mBACjD,CAAC,kBAAkB,CACpB;CAED,MAAM,iBAAiB,MAAA,QAAM,cACpB,oBAAoB,kBAAkB,iBAC7C,CAAC,kBAAkB,CACpB;~~AAED~~,~~QACE~~,iBAAA,GAAA,kBAAA,MAAC,oBAAA,YAAD;EAAiB;YAAjB,CACG,WACD,iBAAA,GAAA,kBAAA,KAAC,sBAAA,cAAD;GACM;GACJ,KAAK;GACL,cACE,qBACE,iBAAA,GAAA,kBAAA,MAAC,qBAAD,EAAA,UAAA;IACG,WAAW,iBAAA,GAAA,kBAAA,KAAC,+BAAD;KAA+B,MAAK;KAAQ,cAAW;KAAY,CAAA;IAC9E,kBACC,iBAAA,GAAA,kBAAA,KAAC,gBAAA,SAAD;KAAS,SAAS;eAChB,iBAAA,GAAA,kBAAA,KAAC,8BAAD;MACE,cAAY;MACZ,SAAS;MACT,CAAA;KACM,CAAA;IAEX,aAAa,CAAC,iBACb,iBAAA,GAAA,kBAAA,KAAC,gBAAA,SAAD;KAAS,SAAQ;eACf,iBAAA,GAAA,kBAAA,KAAC,wBAAD;MAAwB,cAAW;MAAQ,SAAS;MAAe,CAAA;KAC3D,CAAA;IAEQ,EAAA,CAAA;GAGnB;GACP,MAAM;GACI;GACA;GACV,SAAS;GACT,QAAQ;GACR,GAAI;GACJ,CAAA,CACS;;EAGlB;AAED,iBAAiB,cAAc"}
1	+ {"version":3,"file":"TextField.vanilla.cjs","names":[],"sources":["../../../components/TextField/TextField.vanilla.tsx"],"sourcesContent":["import {\n CrossCircledIcon,\n ExclamationTriangleIcon,\n EyeClosedIcon,\n EyeOpenIcon,\n} from '@radix-ui/react-icons';\nimport React from 'react';\n\nimport { styled } from '../../stitches.config';\nimport { BoxVanilla } from '../Box';\nimport { InputVanilla, InputVanillaHandle, InputVanillaProps } from '../Input';\nimport { LabelVanilla } from '../Label';\nimport { Tooltip } from '../Tooltip';\n\n// TYPES\nexport interface TextFieldLabelProps {\n variant: 'invalid' \| 'subtle' \| 'contrast' \| 'default';\n htmlFor?: string;\n}\n\nexport type TextFieldVanillaProps = InputVanillaProps & {\n type?: string;\n clearable?: boolean;\n label?: string \| ((props: TextFieldLabelProps) => JSX.Element);\n};\n\n// COMPONENTS\nconst AdornmentGroup = styled('div', {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n});\n\nconst StyledExclamationTriangleIcon = styled(ExclamationTriangleIcon, {\n '& + *': {\n marginLeft: '$1',\n },\n});\n\nconst StyledEyeOpenIcon = styled(EyeOpenIcon, {\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n },\n },\n});\n\nconst StyledEyeClosedIcon = styled(EyeClosedIcon, {\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n },\n },\n});\n\nconst StyledCrossCircledIcon = styled(CrossCircledIcon, {\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n },\n },\n});\n\nexport const TextFieldVanilla = React.forwardRef<\n React.ElementRef<typeof InputVanilla>,\n TextFieldVanillaProps\n>(\n (\n {\n state,\n clearable,\n label: LabelOrComponent,\n id,\n type,\n disabled,\n readOnly,\n onBlur,\n onFocus,\n css,\n ...props\n },\n forwardedRef,\n ) => {\n const inputRef = React.useRef<InputVanillaHandle \| null>(null);\n React.useImperativeHandle(forwardedRef, () => inputRef.current as InputVanillaHandle);\n\n const [inputHasFocus, setInputHasFocus] = React.useState(false);\n const [innerType, setInnerType] = React.useState(type);\n const isPasswordVisible = React.useMemo(() => innerType !== 'password', [innerType]);\n\n const invalid = React.useMemo(() => state === 'invalid', [state]);\n\n const labelVariant = React.useMemo(() => {\n if (disabled) {\n return 'subtle';\n }\n if (invalid) {\n return 'invalid';\n }\n if (inputHasFocus) {\n return 'contrast';\n }\n return 'default';\n }, [invalid, disabled, inputHasFocus]);\n\n const LabelNode = React.useMemo(() => {\n if (LabelOrComponent === undefined \|\| LabelOrComponent === null) {\n return null;\n }\n if (typeof LabelOrComponent === 'string') {\n return (\n <LabelVanilla variant={labelVariant} htmlFor={id}>\n {LabelOrComponent}\n </LabelVanilla>\n );\n }\n return <LabelOrComponent variant={labelVariant} htmlFor={id} />;\n }, [LabelOrComponent, labelVariant, id]);\n\n const isPasswordType = React.useMemo(() => type === 'password', [type]);\n\n const typeOrInnerType = React.useMemo(\n () => (isPasswordType ? innerType : type),\n [isPasswordType, type, innerType],\n );\n\n const hasInnerAdornment = React.useMemo(\n () => clearable \|\| isPasswordType \|\| invalid,\n [clearable, isPasswordType, invalid],\n );\n\n const hasAdornmentGroup = React.useMemo(\n () => (clearable && invalid) \|\| (clearable && isPasswordType) \|\| (invalid && isPasswordType),\n [clearable, invalid, isPasswordType],\n );\n\n const clearDisabled = React.useMemo(() => readOnly \|\| disabled, [readOnly, disabled]);\n\n const handleClear = React.useCallback(() => {\n const { current } = inputRef;\n if (current) {\n current.clear();\n }\n }, [inputRef]);\n\n const handleFocus = React.useCallback(\n (e: React.FocusEvent<HTMLInputElement>) => {\n if (onFocus) {\n onFocus(e);\n }\n setInputHasFocus(true);\n },\n [onFocus, setInputHasFocus],\n );\n\n const handleBlur = React.useCallback(\n (e: React.FocusEvent<HTMLInputElement>) => {\n if (onBlur) {\n onBlur(e);\n }\n setInputHasFocus(false);\n },\n [onBlur, setInputHasFocus],\n );\n\n const togglePasswordVisibility = React.useCallback(() => {\n setInnerType((prevInnerType) => (prevInnerType === 'password' ? undefined : 'password'));\n }, [setInnerType]);\n\n const EndAdornmentWrapper = React.useMemo(\n () => (hasAdornmentGroup ? AdornmentGroup : React.Fragment),\n [hasAdornmentGroup],\n );\n\n const PasswordVisibilityToggleIcon = React.useMemo(\n () => (isPasswordVisible ? StyledEyeClosedIcon : StyledEyeOpenIcon),\n [isPasswordVisible],\n );\n\n const passwordAction = React.useMemo(\n () => (isPasswordVisible ? 'Hide password' : 'Show password'),\n [isPasswordVisible],\n );\n\n return (\n <BoxVanilla css={css}>\n {LabelNode}\n <InputVanilla\n id={id}\n ref={inputRef}\n endAdornment={\n hasInnerAdornment && (\n <EndAdornmentWrapper>\n {invalid && <StyledExclamationTriangleIcon role=\"alert\" aria-label=\"Invalid\" />}\n {isPasswordType && (\n <Tooltip content={passwordAction}>\n <PasswordVisibilityToggleIcon\n aria-label={passwordAction}\n onClick={togglePasswordVisibility}\n />\n </Tooltip>\n )}\n {clearable && !clearDisabled && (\n <Tooltip content=\"Clear\">\n <StyledCrossCircledIcon aria-label=\"Clear\" onClick={handleClear} />\n </Tooltip>\n )}\n </EndAdornmentWrapper>\n )\n }\n state={state}\n type={typeOrInnerType}\n disabled={disabled}\n readOnly={readOnly}\n onFocus={handleFocus}\n onBlur={handleBlur}\n {...props}\n />\n </BoxVanilla>\n );\n },\n);\n\nTextFieldVanilla.displayName = 'TextFieldVanilla';\n"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TextField.vanilla.js","names":[],"sources":["../../../components/TextField/TextField.vanilla.tsx"],"sourcesContent":["import {\n CrossCircledIcon,\n ExclamationTriangleIcon,\n EyeClosedIcon,\n EyeOpenIcon,\n} from '@radix-ui/react-icons';\nimport React from 'react';\n\nimport { styled } from '../../stitches.config';\nimport { BoxVanilla } from '../Box';\nimport { InputVanilla, InputVanillaHandle, InputVanillaProps } from '../Input';\nimport { LabelVanilla } from '../Label';\nimport { Tooltip } from '../Tooltip';\n\n// TYPES\nexport interface TextFieldLabelProps {\n variant: 'invalid' \| 'subtle' \| 'contrast' \| 'default';\n htmlFor?: string;\n}\n\nexport type TextFieldVanillaProps = InputVanillaProps & {\n type?: string;\n clearable?: boolean;\n label?: string \| ((props: TextFieldLabelProps) => JSX.Element);\n};\n\n// COMPONENTS\nconst AdornmentGroup = styled('div', {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n});\n\nconst StyledExclamationTriangleIcon = styled(ExclamationTriangleIcon, {\n '& + *': {\n marginLeft: '$1',\n },\n});\n\nconst StyledEyeOpenIcon = styled(EyeOpenIcon, {\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n },\n },\n});\n\nconst StyledEyeClosedIcon = styled(EyeClosedIcon, {\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n },\n },\n});\n\nconst StyledCrossCircledIcon = styled(CrossCircledIcon, {\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n },\n },\n});\n\nexport const TextFieldVanilla = React.forwardRef<\n React.ElementRef<typeof InputVanilla>,\n TextFieldVanillaProps\n>(\n (\n {\n state,\n clearable,\n label: LabelOrComponent,\n id,\n type,\n disabled,\n readOnly,\n onBlur,\n onFocus,\n css,\n ...props\n },\n forwardedRef,\n ) => {\n const inputRef = React.useRef<InputVanillaHandle \| null>(null);\n React.useImperativeHandle(forwardedRef, () => inputRef.current as InputVanillaHandle);\n\n const [inputHasFocus, setInputHasFocus] = React.useState(false);\n const [innerType, setInnerType] = React.useState(type);\n const isPasswordVisible = React.useMemo(() => innerType !== 'password', [innerType]);\n\n const invalid = React.useMemo(() => state === 'invalid', [state]);\n\n const labelVariant = React.useMemo(() => {\n if (disabled) {\n return 'subtle';\n }\n if (invalid) {\n return 'invalid';\n }\n if (inputHasFocus) {\n return 'contrast';\n }\n return 'default';\n }, [invalid, disabled, inputHasFocus]);\n\n const LabelNode = React.useMemo(() => {\n if (LabelOrComponent === undefined \|\| LabelOrComponent === null) {\n return null;\n }\n if (typeof LabelOrComponent === 'string') {\n return (\n <LabelVanilla variant={labelVariant} htmlFor={id}>\n {LabelOrComponent}\n </LabelVanilla>\n );\n }\n return <LabelOrComponent variant={labelVariant} htmlFor={id} />;\n }, [LabelOrComponent, labelVariant, id]);\n\n const isPasswordType = React.useMemo(() => type === 'password', [type]);\n\n const typeOrInnerType = React.useMemo(\n () => (isPasswordType ? innerType : type),\n [isPasswordType, type, innerType],\n );\n\n const hasInnerAdornment = React.useMemo(\n () => clearable \|\| isPasswordType \|\| invalid,\n [clearable, isPasswordType, invalid],\n );\n\n const hasAdornmentGroup = React.useMemo(\n () => (clearable && invalid) \|\| (clearable && isPasswordType) \|\| (invalid && isPasswordType),\n [clearable, invalid, isPasswordType],\n );\n\n const clearDisabled = React.useMemo(() => readOnly \|\| disabled, [readOnly, disabled]);\n\n const handleClear = React.useCallback(() => {\n const { current } = inputRef;\n if (current) {\n current.clear();\n }\n }, [inputRef]);\n\n const handleFocus = React.useCallback(\n (e: React.FocusEvent<HTMLInputElement>) => {\n if (onFocus) {\n onFocus(e);\n }\n setInputHasFocus(true);\n },\n [onFocus, setInputHasFocus],\n );\n\n const handleBlur = React.useCallback(\n (e: React.FocusEvent<HTMLInputElement>) => {\n if (onBlur) {\n onBlur(e);\n }\n setInputHasFocus(false);\n },\n [onBlur, setInputHasFocus],\n );\n\n const togglePasswordVisibility = React.useCallback(() => {\n setInnerType((prevInnerType) => (prevInnerType === 'password' ? undefined : 'password'));\n }, [setInnerType]);\n\n const EndAdornmentWrapper = React.useMemo(\n () => (hasAdornmentGroup ? AdornmentGroup : React.Fragment),\n [hasAdornmentGroup],\n );\n\n const PasswordVisibilityToggleIcon = React.useMemo(\n () => (isPasswordVisible ? StyledEyeClosedIcon : StyledEyeOpenIcon),\n [isPasswordVisible],\n );\n\n const passwordAction = React.useMemo(\n () => (isPasswordVisible ? 'Hide password' : 'Show password'),\n [isPasswordVisible],\n );\n\n return (\n <BoxVanilla css={css}>\n {LabelNode}\n <InputVanilla\n id={id}\n ref={inputRef}\n endAdornment={\n hasInnerAdornment && (\n <EndAdornmentWrapper>\n {invalid && <StyledExclamationTriangleIcon role=\"alert\" aria-label=\"Invalid\" />}\n {isPasswordType && (\n <Tooltip content={passwordAction}>\n <PasswordVisibilityToggleIcon\n aria-label={passwordAction}\n onClick={togglePasswordVisibility}\n />\n </Tooltip>\n )}\n {clearable && !clearDisabled && (\n <Tooltip content=\"Clear\">\n <StyledCrossCircledIcon aria-label=\"Clear\" onClick={handleClear} />\n </Tooltip>\n )}\n </EndAdornmentWrapper>\n )\n }\n state={state}\n type={typeOrInnerType}\n disabled={disabled}\n readOnly={readOnly}\n onFocus={handleFocus}\n onBlur={handleBlur}\n {...props}\n />\n </BoxVanilla>\n );\n },\n);\n\nTextFieldVanilla.displayName = 'TextFieldVanilla';\n"],"mappings":";;;;;;;;;AA2BA,IAAM,iBAAiB,OAAO,OAAO;CACnC,SAAS;CACT,eAAe;CACf,YAAY;CACb,CAAC;AAEF,IAAM,gCAAgC,OAAO,yBAAyB,EACpE,SAAS,EACP,YAAY,MACb,EACF,CAAC;AAEF,IAAM,oBAAoB,OAAO,aAAa,EAC5C,UAAU,EACR,WAAW,EACT,QAAQ,WACT,EACF,EACF,CAAC;AAEF,IAAM,sBAAsB,OAAO,eAAe,EAChD,UAAU,EACR,WAAW,EACT,QAAQ,WACT,EACF,EACF,CAAC;AAEF,IAAM,yBAAyB,OAAO,kBAAkB,EACtD,UAAU,EACR,WAAW,EACT,QAAQ,WACT,EACF,EACF,CAAC;AAEF,IAAa,mBAAmB,MAAM,YAKlC,EACE,OACA,WACA,OAAO,kBACP,IACA,MACA,UACA,UACA,QACA,SACA,KACA,GAAG,SAEL,iBACG;CACH,MAAM,WAAW,MAAM,OAAkC,KAAK;~~AAC9D~~,~~OAAM~~,oBAAoB,oBAAoB,SAAS,QAA8B;CAErF,MAAM,CAAC,eAAe,oBAAoB,MAAM,SAAS,MAAM;CAC/D,MAAM,CAAC,WAAW,gBAAgB,MAAM,SAAS,KAAK;CACtD,MAAM,oBAAoB,MAAM,cAAc,cAAc,YAAY,CAAC,UAAU,CAAC;CAEpF,MAAM,UAAU,MAAM,cAAc,UAAU,WAAW,CAAC,MAAM,CAAC;CAEjE,MAAM,eAAe,MAAM,cAAc;~~AACvC~~,~~MAAI~~,~~SACF~~,~~QAAO~~;~~AAET~~,~~MAAI~~,~~QACF~~,~~QAAO~~;~~AAET~~,~~MAAI~~,~~cACF~~,~~QAAO~~;~~AAET~~,~~SAAO~~;IACN;EAAC;EAAS;EAAU;EAAc,CAAC;CAEtC,MAAM,YAAY,MAAM,cAAc;~~AACpC~~,~~MAAI~~,qBAAqB,KAAA,KAAa,qBAAqB,~~KACzD~~,~~QAAO~~;~~AAET~~,~~MAAI~~,OAAO,qBAAqB,~~SAC9B~~,~~QACE~~,oBAAC,cAAD;GAAc,SAAS;GAAc,SAAS;aAC3C;GACY,CAAA;~~AAGnB~~,~~SAAO~~,oBAAC,kBAAD;GAAkB,SAAS;GAAc,SAAS;GAAM,CAAA;IAC9D;EAAC;EAAkB;EAAc;EAAG,CAAC;CAExC,MAAM,iBAAiB,MAAM,cAAc,SAAS,YAAY,CAAC,KAAK,CAAC;CAEvE,MAAM,kBAAkB,MAAM,cACrB,iBAAiB,YAAY,MACpC;EAAC;EAAgB;EAAM;EAAU,CAClC;CAED,MAAM,oBAAoB,MAAM,cACxB,aAAa,kBAAkB,SACrC;EAAC;EAAW;EAAgB;EAAQ,CACrC;CAED,MAAM,oBAAoB,MAAM,cACvB,aAAa,WAAa,aAAa,kBAAoB,WAAW,gBAC7E;EAAC;EAAW;EAAS;EAAe,CACrC;CAED,MAAM,gBAAgB,MAAM,cAAc,YAAY,UAAU,CAAC,UAAU,SAAS,CAAC;CAErF,MAAM,cAAc,MAAM,kBAAkB;EAC1C,MAAM,EAAE,YAAY;~~AACpB~~,~~MAAI~~,~~QACF~~,~~SAAQ~~,OAAO;IAEhB,CAAC,SAAS,CAAC;CAEd,MAAM,cAAc,MAAM,aACvB,MAA0C;~~AACzC~~,~~MAAI~~,~~QACF~~,~~SAAQ~~,EAAE;~~AAEZ~~,~~mBAAiB~~,KAAK;IAExB,CAAC,SAAS,iBAAiB,CAC5B;CAED,MAAM,aAAa,MAAM,aACtB,MAA0C;~~AACzC~~,~~MAAI~~,~~OACF~~,~~QAAO~~,EAAE;~~AAEX~~,~~mBAAiB~~,MAAM;IAEzB,CAAC,QAAQ,iBAAiB,CAC3B;CAED,MAAM,2BAA2B,MAAM,kBAAkB;~~AACvD~~,~~gBAAc~~,kBAAmB,kBAAkB,aAAa,KAAA,IAAY,WAAY;IACvF,CAAC,aAAa,CAAC;CAElB,MAAM,sBAAsB,MAAM,cACzB,oBAAoB,iBAAiB,MAAM,UAClD,CAAC,kBAAkB,CACpB;CAED,MAAM,+BAA+B,MAAM,cAClC,oBAAoB,sBAAsB,mBACjD,CAAC,kBAAkB,CACpB;CAED,MAAM,iBAAiB,MAAM,cACpB,oBAAoB,kBAAkB,iBAC7C,CAAC,kBAAkB,CACpB;~~AAED~~,~~QACE~~,qBAAC,YAAD;EAAiB;YAAjB,CACG,WACD,oBAAC,cAAD;GACM;GACJ,KAAK;GACL,cACE,qBACE,qBAAC,qBAAD,EAAA,UAAA;IACG,WAAW,oBAAC,+BAAD;KAA+B,MAAK;KAAQ,cAAW;KAAY,CAAA;IAC9E,kBACC,oBAAC,SAAD;KAAS,SAAS;eAChB,oBAAC,8BAAD;MACE,cAAY;MACZ,SAAS;MACT,CAAA;KACM,CAAA;IAEX,aAAa,CAAC,iBACb,oBAAC,SAAD;KAAS,SAAQ;eACf,oBAAC,wBAAD;MAAwB,cAAW;MAAQ,SAAS;MAAe,CAAA;KAC3D,CAAA;IAEQ,EAAA,CAAA;GAGnB;GACP,MAAM;GACI;GACA;GACV,SAAS;GACT,QAAQ;GACR,GAAI;GACJ,CAAA,CACS;;EAGlB;AAED,iBAAiB,cAAc"}
1	+ {"version":3,"file":"TextField.vanilla.js","names":[],"sources":["../../../components/TextField/TextField.vanilla.tsx"],"sourcesContent":["import {\n CrossCircledIcon,\n ExclamationTriangleIcon,\n EyeClosedIcon,\n EyeOpenIcon,\n} from '@radix-ui/react-icons';\nimport React from 'react';\n\nimport { styled } from '../../stitches.config';\nimport { BoxVanilla } from '../Box';\nimport { InputVanilla, InputVanillaHandle, InputVanillaProps } from '../Input';\nimport { LabelVanilla } from '../Label';\nimport { Tooltip } from '../Tooltip';\n\n// TYPES\nexport interface TextFieldLabelProps {\n variant: 'invalid' \| 'subtle' \| 'contrast' \| 'default';\n htmlFor?: string;\n}\n\nexport type TextFieldVanillaProps = InputVanillaProps & {\n type?: string;\n clearable?: boolean;\n label?: string \| ((props: TextFieldLabelProps) => JSX.Element);\n};\n\n// COMPONENTS\nconst AdornmentGroup = styled('div', {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n});\n\nconst StyledExclamationTriangleIcon = styled(ExclamationTriangleIcon, {\n '& + *': {\n marginLeft: '$1',\n },\n});\n\nconst StyledEyeOpenIcon = styled(EyeOpenIcon, {\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n },\n },\n});\n\nconst StyledEyeClosedIcon = styled(EyeClosedIcon, {\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n },\n },\n});\n\nconst StyledCrossCircledIcon = styled(CrossCircledIcon, {\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n },\n },\n});\n\nexport const TextFieldVanilla = React.forwardRef<\n React.ElementRef<typeof InputVanilla>,\n TextFieldVanillaProps\n>(\n (\n {\n state,\n clearable,\n label: LabelOrComponent,\n id,\n type,\n disabled,\n readOnly,\n onBlur,\n onFocus,\n css,\n ...props\n },\n forwardedRef,\n ) => {\n const inputRef = React.useRef<InputVanillaHandle \| null>(null);\n React.useImperativeHandle(forwardedRef, () => inputRef.current as InputVanillaHandle);\n\n const [inputHasFocus, setInputHasFocus] = React.useState(false);\n const [innerType, setInnerType] = React.useState(type);\n const isPasswordVisible = React.useMemo(() => innerType !== 'password', [innerType]);\n\n const invalid = React.useMemo(() => state === 'invalid', [state]);\n\n const labelVariant = React.useMemo(() => {\n if (disabled) {\n return 'subtle';\n }\n if (invalid) {\n return 'invalid';\n }\n if (inputHasFocus) {\n return 'contrast';\n }\n return 'default';\n }, [invalid, disabled, inputHasFocus]);\n\n const LabelNode = React.useMemo(() => {\n if (LabelOrComponent === undefined \|\| LabelOrComponent === null) {\n return null;\n }\n if (typeof LabelOrComponent === 'string') {\n return (\n <LabelVanilla variant={labelVariant} htmlFor={id}>\n {LabelOrComponent}\n </LabelVanilla>\n );\n }\n return <LabelOrComponent variant={labelVariant} htmlFor={id} />;\n }, [LabelOrComponent, labelVariant, id]);\n\n const isPasswordType = React.useMemo(() => type === 'password', [type]);\n\n const typeOrInnerType = React.useMemo(\n () => (isPasswordType ? innerType : type),\n [isPasswordType, type, innerType],\n );\n\n const hasInnerAdornment = React.useMemo(\n () => clearable \|\| isPasswordType \|\| invalid,\n [clearable, isPasswordType, invalid],\n );\n\n const hasAdornmentGroup = React.useMemo(\n () => (clearable && invalid) \|\| (clearable && isPasswordType) \|\| (invalid && isPasswordType),\n [clearable, invalid, isPasswordType],\n );\n\n const clearDisabled = React.useMemo(() => readOnly \|\| disabled, [readOnly, disabled]);\n\n const handleClear = React.useCallback(() => {\n const { current } = inputRef;\n if (current) {\n current.clear();\n }\n }, [inputRef]);\n\n const handleFocus = React.useCallback(\n (e: React.FocusEvent<HTMLInputElement>) => {\n if (onFocus) {\n onFocus(e);\n }\n setInputHasFocus(true);\n },\n [onFocus, setInputHasFocus],\n );\n\n const handleBlur = React.useCallback(\n (e: React.FocusEvent<HTMLInputElement>) => {\n if (onBlur) {\n onBlur(e);\n }\n setInputHasFocus(false);\n },\n [onBlur, setInputHasFocus],\n );\n\n const togglePasswordVisibility = React.useCallback(() => {\n setInnerType((prevInnerType) => (prevInnerType === 'password' ? undefined : 'password'));\n }, [setInnerType]);\n\n const EndAdornmentWrapper = React.useMemo(\n () => (hasAdornmentGroup ? AdornmentGroup : React.Fragment),\n [hasAdornmentGroup],\n );\n\n const PasswordVisibilityToggleIcon = React.useMemo(\n () => (isPasswordVisible ? StyledEyeClosedIcon : StyledEyeOpenIcon),\n [isPasswordVisible],\n );\n\n const passwordAction = React.useMemo(\n () => (isPasswordVisible ? 'Hide password' : 'Show password'),\n [isPasswordVisible],\n );\n\n return (\n <BoxVanilla css={css}>\n {LabelNode}\n <InputVanilla\n id={id}\n ref={inputRef}\n endAdornment={\n hasInnerAdornment && (\n <EndAdornmentWrapper>\n {invalid && <StyledExclamationTriangleIcon role=\"alert\" aria-label=\"Invalid\" />}\n {isPasswordType && (\n <Tooltip content={passwordAction}>\n <PasswordVisibilityToggleIcon\n aria-label={passwordAction}\n onClick={togglePasswordVisibility}\n />\n </Tooltip>\n )}\n {clearable && !clearDisabled && (\n <Tooltip content=\"Clear\">\n <StyledCrossCircledIcon aria-label=\"Clear\" onClick={handleClear} />\n </Tooltip>\n )}\n </EndAdornmentWrapper>\n )\n }\n state={state}\n type={typeOrInnerType}\n disabled={disabled}\n readOnly={readOnly}\n onFocus={handleFocus}\n onBlur={handleBlur}\n {...props}\n />\n </BoxVanilla>\n );\n },\n);\n\nTextFieldVanilla.displayName = 'TextFieldVanilla';\n"],"mappings":"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"}

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

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