@traefik-labs/faency 12.3.4 → 12.3.5

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

@@ -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;;CAiBQ,OAAA,YAAqB,kBAAkB;EAClD,YAAA,GAAA,WAAA,SAAqB,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;EACzD,kBAAA,GAAA,WAAA,SAA2B,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;EAC/D,6BAAA,GAAA,WAAA,SAAsC,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;EAC1E,6BAAA,GAAA,WAAA,SAAsC,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;EAC1E,kBAAA,GAAA,WAAA,SAA2B,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;EAC/D,kBAAA,GAAA,WAAA,SAA2B,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;EAC/D,uBAAA,GAAA,WAAA,SAAgC,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;EACpE,iBAAA,GAAA,WAAA,SAA0B,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;EAC9D,iBAAiB,aAAa;EAC9B,uBAAA,GAAA,WAAA,SAAgC,aAAa,KAAK,EAAE,QAAQ,EAAE,EAAE,YAAY;EAC5E,gBAAgB;CAClB;CAEa,OAAA,WAAoB,kBAAkB;EACjD,YAAA,GAAA,WAAA,SAAqB,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;EACzD,kBAAA,GAAA,WAAA,SAA2B,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;EAC/D,6BAAA,GAAA,WAAA,SAAsC,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;EAC1E,6BAAA,GAAA,WAAA,SAAsC,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;EAC1E,kBAAA,GAAA,WAAA,SAA2B,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;EAC/D,kBAAA,GAAA,WAAA,SAA2B,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;EAC/D,uBAAA,GAAA,WAAA,SAAgC,aAAa,KAAK,EAAE,SAAS,GAAI,EAAE,YAAY;EAC/E,iBAAA,GAAA,WAAA,SAA0B,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;EAC9D,iBAAiB;EACjB,uBAAA,GAAA,WAAA,SAAgC,aAAa,KAAK,EAAE,QAAQ,EAAE,EAAE,YAAY;EAC5E,gBAAgB;CAClB;wBACF"}
+{"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

@@ -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;;CAiBQ,OAAA,YAAqB,kBAAkB;EAClD,WAAW,UAAU,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;EACzD,iBAAiB,UAAU,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;EAC/D,4BAA4B,UAAU,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;EAC1E,4BAA4B,UAAU,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;EAC1E,iBAAiB,UAAU,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;EAC/D,iBAAiB,UAAU,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;EAC/D,sBAAsB,UAAU,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;EACpE,gBAAgB,UAAU,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;EAC9D,iBAAiB,aAAa;EAC9B,sBAAsB,UAAU,aAAa,KAAK,EAAE,QAAQ,EAAE,EAAE,YAAY;EAC5E,gBAAgB;CAClB;CAEa,OAAA,WAAoB,kBAAkB;EACjD,WAAW,UAAU,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;EACzD,iBAAiB,UAAU,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;EAC/D,4BAA4B,UAAU,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;EAC1E,4BAA4B,UAAU,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;EAC1E,iBAAiB,UAAU,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;EAC/D,iBAAiB,UAAU,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;EAC/D,sBAAsB,UAAU,aAAa,KAAK,EAAE,SAAS,GAAI,EAAE,YAAY;EAC/E,gBAAgB,UAAU,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;EAC9D,iBAAiB;EACjB,sBAAsB,UAAU,aAAa,KAAK,EAAE,QAAQ,EAAE,EAAE,YAAY;EAC5E,gBAAgB;CAClB;wBACF"}
+{"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/Tabs/Tabs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.cjs","names":[],"sources":["../../../components/Tabs/Tabs.tsx"],"sourcesContent":["import * as TabsPrimitive from '@radix-ui/react-tabs';\n\nimport { styled } from '../../stitches.config';\n\nexport const TabsContainer = styled(TabsPrimitive.Root, {\n  display: 'flex',\n  flexDirection: 'column',\n});\n\nexport const TabsList = styled(TabsPrimitive.List, {\n  display: 'flex',\n  borderBottom: `1px solid $textSubtle`,\n});\n\nexport const TabsTrigger = styled(TabsPrimitive.Trigger, {\n  all: 'unset',\n  color: '$textSubtle',\n  fontFamily: 'inherit',\n  flex: 1,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  py: '$2',\n  userSelect: 'none',\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n      color: '$hiContrast',\n    },\n  },\n  '&[data-state=\"active\"]': {\n    color: '$primary',\n    boxShadow: 'inset 0 -1px 0 0 currentColor, 0 1px 0 0 currentColor',\n    fontWeight: '$semiBold',\n  },\n});\n\nexport const TabsContent = styled(TabsPrimitive.Content, {\n  width: '100%',\n});\n"],"mappings":";;;;;AAIA,IAAa,gBAAgB,wBAAA,OAAO,qBAAc,MAAM;CACtD,SAAS;CACT,eAAe;AACjB,CAAC;AAED,IAAa,WAAW,wBAAA,OAAO,qBAAc,MAAM;CACjD,SAAS;CACT,cAAc;AAChB,CAAC;AAED,IAAa,cAAc,wBAAA,OAAO,qBAAc,SAAS;CACvD,KAAK;CACL,OAAO;CACP,YAAY;CACZ,MAAM;CACN,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,IAAI;CACJ,YAAY;CACZ,UAAU,EACR,WAAW;EACT,QAAQ;EACR,OAAO;CACT,EACF;CACA,4BAA0B;EACxB,OAAO;EACP,WAAW;EACX,YAAY;CACd;AACF,CAAC;AAED,IAAa,cAAc,wBAAA,OAAO,qBAAc,SAAS,EACvD,OAAO,OACT,CAAC"}
+{"version":3,"file":"Tabs.cjs","names":[],"sources":["../../../components/Tabs/Tabs.tsx"],"sourcesContent":["import * as TabsPrimitive from '@radix-ui/react-tabs';\n\nimport { styled } from '../../stitches.config';\n\nexport const TabsContainer = styled(TabsPrimitive.Root, {\n  display: 'flex',\n  flexDirection: 'column',\n});\n\nexport const TabsList = styled(TabsPrimitive.List, {\n  display: 'flex',\n  borderBottom: `1px solid $textSubtle`,\n});\n\nexport const TabsTrigger = styled(TabsPrimitive.Trigger, {\n  all: 'unset',\n  color: '$textSubtle',\n  fontFamily: 'inherit',\n  flex: 1,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  py: '$2',\n  userSelect: 'none',\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n      color: '$hiContrast',\n    },\n  },\n  '&[data-state=\"active\"]': {\n    color: '$primary',\n    boxShadow: 'inset 0 -1px 0 0 currentColor, 0 1px 0 0 currentColor',\n    fontWeight: '$semiBold',\n  },\n});\n\nexport const TabsContent = styled(TabsPrimitive.Content, {\n  width: '100%',\n});\n"],"mappings":";;;;;AAIA,IAAa,gBAAgB,wBAAA,OAAO,qBAAc,MAAM;CACtD,SAAS;CACT,eAAe;CAChB,CAAC;AAEF,IAAa,WAAW,wBAAA,OAAO,qBAAc,MAAM;CACjD,SAAS;CACT,cAAc;CACf,CAAC;AAEF,IAAa,cAAc,wBAAA,OAAO,qBAAc,SAAS;CACvD,KAAK;CACL,OAAO;CACP,YAAY;CACZ,MAAM;CACN,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,IAAI;CACJ,YAAY;CACZ,UAAU,EACR,WAAW;EACT,QAAQ;EACR,OAAO;EACR,EACF;CACD,4BAA0B;EACxB,OAAO;EACP,WAAW;EACX,YAAY;EACb;CACF,CAAC;AAEF,IAAa,cAAc,wBAAA,OAAO,qBAAc,SAAS,EACvD,OAAO,QACR,CAAC"}

package/dist/components/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","names":[],"sources":["../../../components/Tabs/Tabs.tsx"],"sourcesContent":["import * as TabsPrimitive from '@radix-ui/react-tabs';\n\nimport { styled } from '../../stitches.config';\n\nexport const TabsContainer = styled(TabsPrimitive.Root, {\n  display: 'flex',\n  flexDirection: 'column',\n});\n\nexport const TabsList = styled(TabsPrimitive.List, {\n  display: 'flex',\n  borderBottom: `1px solid $textSubtle`,\n});\n\nexport const TabsTrigger = styled(TabsPrimitive.Trigger, {\n  all: 'unset',\n  color: '$textSubtle',\n  fontFamily: 'inherit',\n  flex: 1,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  py: '$2',\n  userSelect: 'none',\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n      color: '$hiContrast',\n    },\n  },\n  '&[data-state=\"active\"]': {\n    color: '$primary',\n    boxShadow: 'inset 0 -1px 0 0 currentColor, 0 1px 0 0 currentColor',\n    fontWeight: '$semiBold',\n  },\n});\n\nexport const TabsContent = styled(TabsPrimitive.Content, {\n  width: '100%',\n});\n"],"mappings":";;;AAIA,IAAa,gBAAgB,OAAO,cAAc,MAAM;CACtD,SAAS;CACT,eAAe;AACjB,CAAC;AAED,IAAa,WAAW,OAAO,cAAc,MAAM;CACjD,SAAS;CACT,cAAc;AAChB,CAAC;AAED,IAAa,cAAc,OAAO,cAAc,SAAS;CACvD,KAAK;CACL,OAAO;CACP,YAAY;CACZ,MAAM;CACN,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,IAAI;CACJ,YAAY;CACZ,UAAU,EACR,WAAW;EACT,QAAQ;EACR,OAAO;CACT,EACF;CACA,4BAA0B;EACxB,OAAO;EACP,WAAW;EACX,YAAY;CACd;AACF,CAAC;AAED,IAAa,cAAc,OAAO,cAAc,SAAS,EACvD,OAAO,OACT,CAAC"}
+{"version":3,"file":"Tabs.js","names":[],"sources":["../../../components/Tabs/Tabs.tsx"],"sourcesContent":["import * as TabsPrimitive from '@radix-ui/react-tabs';\n\nimport { styled } from '../../stitches.config';\n\nexport const TabsContainer = styled(TabsPrimitive.Root, {\n  display: 'flex',\n  flexDirection: 'column',\n});\n\nexport const TabsList = styled(TabsPrimitive.List, {\n  display: 'flex',\n  borderBottom: `1px solid $textSubtle`,\n});\n\nexport const TabsTrigger = styled(TabsPrimitive.Trigger, {\n  all: 'unset',\n  color: '$textSubtle',\n  fontFamily: 'inherit',\n  flex: 1,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  py: '$2',\n  userSelect: 'none',\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n      color: '$hiContrast',\n    },\n  },\n  '&[data-state=\"active\"]': {\n    color: '$primary',\n    boxShadow: 'inset 0 -1px 0 0 currentColor, 0 1px 0 0 currentColor',\n    fontWeight: '$semiBold',\n  },\n});\n\nexport const TabsContent = styled(TabsPrimitive.Content, {\n  width: '100%',\n});\n"],"mappings":";;;AAIA,IAAa,gBAAgB,OAAO,cAAc,MAAM;CACtD,SAAS;CACT,eAAe;CAChB,CAAC;AAEF,IAAa,WAAW,OAAO,cAAc,MAAM;CACjD,SAAS;CACT,cAAc;CACf,CAAC;AAEF,IAAa,cAAc,OAAO,cAAc,SAAS;CACvD,KAAK;CACL,OAAO;CACP,YAAY;CACZ,MAAM;CACN,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,IAAI;CACJ,YAAY;CACZ,UAAU,EACR,WAAW;EACT,QAAQ;EACR,OAAO;EACR,EACF;CACD,4BAA0B;EACxB,OAAO;EACP,WAAW;EACX,YAAY;EACb;CACF,CAAC;AAEF,IAAa,cAAc,OAAO,cAAc,SAAS,EACvD,OAAO,QACR,CAAC"}

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

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

package/dist/components/Text/Text.js.map

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

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

@@ -1 +1 @@
-{"version":3,"file":"Text.themes.cjs","names":[],"sources":["../../../components/Text/Text.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n  type Colors = {\n    textSubtle: Property.Color;\n    textDefault: Property.Color;\n    textContrast: Property.Color;\n    textInvalid: Property.Color;\n    textRed: Property.Color;\n  };\n\n  type Factory = (primaryColor: ColorInfo) => Colors;\n\n  export const getLight: Factory = () => ({\n    textSubtle: tinycolor('black').setAlpha(0.51).toHslString(),\n    textDefault: tinycolor('black').setAlpha(0.74).toHslString(),\n    textContrast: 'black',\n    textInvalid: '$red9',\n    textRed: '$red10',\n  });\n\n  export const getDark: Factory = () => ({\n    textSubtle: tinycolor('white').setAlpha(0.51).toHslString(),\n    textDefault: tinycolor('white').setAlpha(0.74).toHslString(),\n    textContrast: 'white',\n    textInvalid: '$red9',\n    textRed: '$red10',\n  });\n}\n"],"mappings":";;;;AAKO,IAAA;;CAWQ,OAAA,kBAA2B;EACtC,aAAA,GAAA,WAAA,SAAsB,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;EAC1D,cAAA,GAAA,WAAA,SAAuB,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;EAC3D,cAAc;EACd,aAAa;EACb,SAAS;CACX;CAEa,OAAA,iBAA0B;EACrC,aAAA,GAAA,WAAA,SAAsB,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;EAC1D,cAAA,GAAA,WAAA,SAAuB,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;EAC3D,cAAc;EACd,aAAa;EACb,SAAS;CACX;wBACF"}
+{"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

@@ -1 +1 @@
-{"version":3,"file":"Text.themes.js","names":[],"sources":["../../../components/Text/Text.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n  type Colors = {\n    textSubtle: Property.Color;\n    textDefault: Property.Color;\n    textContrast: Property.Color;\n    textInvalid: Property.Color;\n    textRed: Property.Color;\n  };\n\n  type Factory = (primaryColor: ColorInfo) => Colors;\n\n  export const getLight: Factory = () => ({\n    textSubtle: tinycolor('black').setAlpha(0.51).toHslString(),\n    textDefault: tinycolor('black').setAlpha(0.74).toHslString(),\n    textContrast: 'black',\n    textInvalid: '$red9',\n    textRed: '$red10',\n  });\n\n  export const getDark: Factory = () => ({\n    textSubtle: tinycolor('white').setAlpha(0.51).toHslString(),\n    textDefault: tinycolor('white').setAlpha(0.74).toHslString(),\n    textContrast: 'white',\n    textInvalid: '$red9',\n    textRed: '$red10',\n  });\n}\n"],"mappings":";;AAKO,IAAA;;CAWQ,OAAA,kBAA2B;EACtC,YAAY,UAAU,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;EAC1D,aAAa,UAAU,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;EAC3D,cAAc;EACd,aAAa;EACb,SAAS;CACX;CAEa,OAAA,iBAA0B;EACrC,YAAY,UAAU,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;EAC1D,aAAa,UAAU,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;EAC3D,cAAc;EACd,aAAa;EACb,SAAS;CACX;wBACF"}
+{"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

@@ -1 +1 @@
-{"version":3,"file":"TextField.cjs","names":[],"sources":["../../../components/TextField/TextField.tsx"],"sourcesContent":["import {\n  CrossCircledIcon,\n  ExclamationTriangleIcon,\n  EyeClosedIcon,\n  EyeOpenIcon,\n} from '@radix-ui/react-icons';\nimport React from 'react';\n\nimport { styled } from '../../stitches.config';\nimport { Box } from '../Box';\nimport { Input, InputHandle, InputProps, InputVariants } from '../Input';\nimport { Label } from '../Label';\nimport { Tooltip } from '../Tooltip';\n\n// TYPES\nexport interface TextFieldLabelProps {\n  variant: 'invalid' | 'subtle' | 'contrast' | 'default';\n  htmlFor?: string;\n}\nexport type TextFieldProps = InputProps & {\n  type?: string;\n  clearable?: boolean;\n  label?: string | ((props: TextFieldLabelProps) => JSX.Element);\n};\n\nexport type TextFieldVariants = InputVariants;\n\n// COMPONENTS\nconst AdornmentGroup = styled('div', {\n  display: 'flex',\n  flexDirection: 'row',\n  alignItems: 'center',\n});\n\nconst StyledExclamationTriangleIcon = styled(ExclamationTriangleIcon, {\n  '& + *': {\n    marginLeft: '$1',\n  },\n});\n\nconst StyledEyeOpenIcon = styled(EyeOpenIcon, {\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n    },\n  },\n});\n\nconst StyledEyeClosedIcon = styled(EyeClosedIcon, {\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n    },\n  },\n});\n\nconst StyledCrossCircledIcon = styled(CrossCircledIcon, {\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n    },\n  },\n});\n\nexport const TextField = React.forwardRef<React.ElementRef<typeof Input>, TextFieldProps>(\n  (\n    {\n      state,\n      clearable,\n      label: LabelOrComponent,\n      id,\n      type,\n      disabled,\n      readOnly,\n      onBlur,\n      onFocus,\n      css,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const inputRef = React.useRef<InputHandle | null>(null);\n    React.useImperativeHandle(forwardedRef, () => inputRef.current as InputHandle);\n\n    const [inputHasFocus, setInputHasFocus] = React.useState(false);\n    const [innerType, setInnerType] = React.useState(type);\n    const isPasswordVisible = React.useMemo(() => innerType !== 'password', [innerType]);\n\n    const invalid = React.useMemo(() => state === 'invalid', [state]);\n\n    const labelVariant = React.useMemo(() => {\n      if (disabled) {\n        return 'subtle';\n      }\n      if (invalid) {\n        return 'invalid';\n      }\n      if (inputHasFocus) {\n        return 'contrast';\n      }\n      return 'default';\n    }, [invalid, disabled, inputHasFocus]);\n\n    const LabelNode = React.useMemo(() => {\n      if (LabelOrComponent === undefined || LabelOrComponent === null) {\n        return null;\n      }\n      if (typeof LabelOrComponent === 'string') {\n        return (\n          <Label variant={labelVariant} htmlFor={id}>\n            {LabelOrComponent}\n          </Label>\n        );\n      }\n      return <LabelOrComponent variant={labelVariant} htmlFor={id} />;\n    }, [LabelOrComponent, labelVariant, id]);\n\n    const isPasswordType = React.useMemo(() => type === 'password', [type]);\n\n    const typeOrInnerType = React.useMemo(\n      () => (isPasswordType ? innerType : type),\n      [isPasswordType, type, innerType]\n    );\n\n    const hasInnerAdornment = React.useMemo(\n      () => clearable || isPasswordType || invalid,\n      [clearable, isPasswordType, invalid]\n    );\n\n    const hasAdornmentGroup = React.useMemo(\n      () => (clearable && invalid) || (clearable && isPasswordType) || (invalid && isPasswordType),\n      [clearable, invalid, isPasswordType]\n    );\n\n    const clearDisabled = React.useMemo(() => readOnly || disabled, [readOnly, disabled]);\n\n    const handleClear = React.useCallback(() => {\n      const { current } = inputRef;\n      if (current) {\n        current.clear();\n      }\n    }, [inputRef]);\n\n    const handleFocus = React.useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        if (onFocus) {\n          onFocus(e);\n        }\n        setInputHasFocus(true);\n      },\n      [onFocus, setInputHasFocus]\n    );\n\n    const handleBlur = React.useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        if (onBlur) {\n          onBlur(e);\n        }\n        setInputHasFocus(false);\n      },\n      [onBlur, setInputHasFocus]\n    );\n\n    const togglePasswordVisibility = React.useCallback(() => {\n      setInnerType((prevInnerType) => (prevInnerType === 'password' ? undefined : 'password'));\n    }, [setInnerType]);\n\n    const EndAdornmentWrapper = React.useMemo(\n      () => (hasAdornmentGroup ? AdornmentGroup : React.Fragment),\n      [hasAdornmentGroup]\n    );\n\n    const PasswordVisibilityToggleIcon = React.useMemo(\n      () => (isPasswordVisible ? StyledEyeClosedIcon : StyledEyeOpenIcon),\n      [isPasswordVisible]\n    );\n\n    const passwordAction = React.useMemo(\n      () => (isPasswordVisible ? 'Hide password' : 'Show password'),\n      [isPasswordVisible]\n    );\n\n    return (\n      <Box css={css}>\n        {LabelNode}\n        <Input\n          id={id}\n          ref={inputRef}\n          endAdornment={\n            hasInnerAdornment && (\n              <EndAdornmentWrapper>\n                {invalid && <StyledExclamationTriangleIcon role=\"alert\" aria-label=\"Invalid\" />}\n                {isPasswordType && (\n                  <Tooltip content={passwordAction}>\n                    <PasswordVisibilityToggleIcon\n                      aria-label={passwordAction}\n                      onClick={togglePasswordVisibility}\n                    />\n                  </Tooltip>\n                )}\n                {clearable && !clearDisabled && (\n                  <Tooltip content=\"Clear\">\n                    <StyledCrossCircledIcon aria-label=\"Clear\" onClick={handleClear} />\n                  </Tooltip>\n                )}\n              </EndAdornmentWrapper>\n            )\n          }\n          state={state}\n          type={typeOrInnerType}\n          disabled={disabled}\n          readOnly={readOnly}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          {...props}\n        />\n      </Box>\n    );\n  }\n);\n"],"mappings":";;;;;;;;;;;AA4BA,IAAM,iBAAiB,wBAAA,OAAO,OAAO;CACnC,SAAS;CACT,eAAe;CACf,YAAY;AACd,CAAC;AAED,IAAM,gCAAgC,wBAAA,OAAO,sBAAA,yBAAyB,EACpE,SAAS,EACP,YAAY,KACd,EACF,CAAC;AAED,IAAM,oBAAoB,wBAAA,OAAO,sBAAA,aAAa,EAC5C,UAAU,EACR,WAAW,EACT,QAAQ,UACV,EACF,EACF,CAAC;AAED,IAAM,sBAAsB,wBAAA,OAAO,sBAAA,eAAe,EAChD,UAAU,EACR,WAAW,EACT,QAAQ,UACV,EACF,EACF,CAAC;AAED,IAAM,yBAAyB,wBAAA,OAAO,sBAAA,kBAAkB,EACtD,UAAU,EACR,WAAW,EACT,QAAQ,UACV,EACF,EACF,CAAC;AAED,IAAa,YAAY,MAAA,QAAM,YAE3B,EACE,OACA,WACA,OAAO,kBACP,IACA,MACA,UACA,UACA,QACA,SACA,KACA,GAAG,SAEL,iBACG;CACH,MAAM,WAAW,MAAA,QAAM,OAA2B,IAAI;CACtD,MAAA,QAAM,oBAAoB,oBAAoB,SAAS,OAAsB;CAE7E,MAAM,CAAC,eAAe,oBAAoB,MAAA,QAAM,SAAS,KAAK;CAC9D,MAAM,CAAC,WAAW,gBAAgB,MAAA,QAAM,SAAS,IAAI;CACrD,MAAM,oBAAoB,MAAA,QAAM,cAAc,cAAc,YAAY,CAAC,SAAS,CAAC;CAEnF,MAAM,UAAU,MAAA,QAAM,cAAc,UAAU,WAAW,CAAC,KAAK,CAAC;CAEhE,MAAM,eAAe,MAAA,QAAM,cAAc;EACvC,IAAI,UACF,OAAO;EAET,IAAI,SACF,OAAO;EAET,IAAI,eACF,OAAO;EAET,OAAO;CACT,GAAG;EAAC;EAAS;EAAU;CAAa,CAAC;CAErC,MAAM,YAAY,MAAA,QAAM,cAAc;EACpC,IAAI,qBAAqB,KAAA,KAAa,qBAAqB,MACzD,OAAO;EAET,IAAI,OAAO,qBAAqB,UAC9B,OACE,iBAAA,GAAA,kBAAA,KAAC,cAAA,OAAD;GAAO,SAAS;GAAc,SAAS;aACpC;EACI,CAAA;EAGX,OAAO,iBAAA,GAAA,kBAAA,KAAC,kBAAD;GAAkB,SAAS;GAAc,SAAS;EAAK,CAAA;CAChE,GAAG;EAAC;EAAkB;EAAc;CAAE,CAAC;CAEvC,MAAM,iBAAiB,MAAA,QAAM,cAAc,SAAS,YAAY,CAAC,IAAI,CAAC;CAEtE,MAAM,kBAAkB,MAAA,QAAM,cACrB,iBAAiB,YAAY,MACpC;EAAC;EAAgB;EAAM;CAAS,CAClC;CAEA,MAAM,oBAAoB,MAAA,QAAM,cACxB,aAAa,kBAAkB,SACrC;EAAC;EAAW;EAAgB;CAAO,CACrC;CAEA,MAAM,oBAAoB,MAAA,QAAM,cACvB,aAAa,WAAa,aAAa,kBAAoB,WAAW,gBAC7E;EAAC;EAAW;EAAS;CAAc,CACrC;CAEA,MAAM,gBAAgB,MAAA,QAAM,cAAc,YAAY,UAAU,CAAC,UAAU,QAAQ,CAAC;CAEpF,MAAM,cAAc,MAAA,QAAM,kBAAkB;EAC1C,MAAM,EAAE,YAAY;EACpB,IAAI,SACF,QAAQ,MAAM;CAElB,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,cAAc,MAAA,QAAM,aACvB,MAA0C;EACzC,IAAI,SACF,QAAQ,CAAC;EAEX,iBAAiB,IAAI;CACvB,GACA,CAAC,SAAS,gBAAgB,CAC5B;CAEA,MAAM,aAAa,MAAA,QAAM,aACtB,MAA0C;EACzC,IAAI,QACF,OAAO,CAAC;EAEV,iBAAiB,KAAK;CACxB,GACA,CAAC,QAAQ,gBAAgB,CAC3B;CAEA,MAAM,2BAA2B,MAAA,QAAM,kBAAkB;EACvD,cAAc,kBAAmB,kBAAkB,aAAa,KAAA,IAAY,UAAW;CACzF,GAAG,CAAC,YAAY,CAAC;CAEjB,MAAM,sBAAsB,MAAA,QAAM,cACzB,oBAAoB,iBAAiB,MAAA,QAAM,UAClD,CAAC,iBAAiB,CACpB;CAEA,MAAM,+BAA+B,MAAA,QAAM,cAClC,oBAAoB,sBAAsB,mBACjD,CAAC,iBAAiB,CACpB;CAEA,MAAM,iBAAiB,MAAA,QAAM,cACpB,oBAAoB,kBAAkB,iBAC7C,CAAC,iBAAiB,CACpB;CAEA,OACE,iBAAA,GAAA,kBAAA,MAAC,YAAA,KAAD;EAAU;YAAV,CACG,WACD,iBAAA,GAAA,kBAAA,KAAC,cAAA,OAAD;GACM;GACJ,KAAK;GACL,cACE,qBACE,iBAAA,GAAA,kBAAA,MAAC,qBAAD,EAAA,UAAA;IACG,WAAW,iBAAA,GAAA,kBAAA,KAAC,+BAAD;KAA+B,MAAK;KAAQ,cAAW;IAAW,CAAA;IAC7E,kBACC,iBAAA,GAAA,kBAAA,KAAC,gBAAA,SAAD;KAAS,SAAS;eAChB,iBAAA,GAAA,kBAAA,KAAC,8BAAD;MACE,cAAY;MACZ,SAAS;KACV,CAAA;IACM,CAAA;IAEV,aAAa,CAAC,iBACb,iBAAA,GAAA,kBAAA,KAAC,gBAAA,SAAD;KAAS,SAAQ;eACf,iBAAA,GAAA,kBAAA,KAAC,wBAAD;MAAwB,cAAW;MAAQ,SAAS;KAAc,CAAA;IAC3D,CAAA;GAEQ,EAAA,CAAA;GAGlB;GACP,MAAM;GACI;GACA;GACV,SAAS;GACT,QAAQ;GACR,GAAI;EACL,CAAA,CACE;;AAET,CACF"}
+{"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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","names":[],"sources":["../../../components/Textarea/Textarea.tsx"],"sourcesContent":["import React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { Box } from '../Box';\nimport { elevationVariants } from '../Elevation';\nimport { Label } from '../Label';\n\n// CONSTANTS\nconst FOCUS_SHADOW = elevationVariants[1].boxShadow; // apply elevation $1 when focus\n\n// COMPONENTS\nconst StyledTextarea = styled('textarea', {\n  // Reset\n  appearance: 'none',\n  overflow: 'auto', // force overflow auto behaviour cross-browser\n  borderWidth: '0',\n  boxSizing: 'border-box',\n  fontFamily: '$rubik',\n  margin: '0',\n  outline: 'none',\n  WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n\n  // Custom\n  p: '$3',\n  position: 'relative',\n  flexGrow: 1, // make sure to grow fully inside TextareaWrapper\n  backgroundColor: 'transparent',\n  borderRadius: 'inherit', // inherit border radius from TextareaWrapper\n  boxShadow: 'inset 0 0 0 1px $colors$textareaBorder',\n  color: '$textareaText',\n  fontVariantNumeric: 'tabular-nums',\n  transition: 'box-shadow .1s ease-in-out',\n\n  '&:-webkit-autofill,&:autofill': {\n    boxShadow: 'inset 0 0 0 1px $colors$textareaBorder, inset 0 0 0 100px $colors$textareaBg',\n  },\n\n  '&:-webkit-autofill::first-line,&:autofill::first-line': {\n    fontFamily: '$rubik',\n    color: '$hiContrast',\n  },\n\n  '&:focus-visible': {\n    boxShadow: `inset 0 0 0 2px $colors$textareaFocusBorder, ${FOCUS_SHADOW}`,\n  },\n\n  '&::placeholder': {\n    color: '$textareaPlaceholder',\n  },\n\n  '&:read-only:not(:disabled)': {\n    boxShadow: 'none',\n  },\n\n  '&:disabled': {\n    pointerEvents: 'none',\n    opacity: 0.7,\n    color: '$textareaDisabledText',\n  },\n  variants: {\n    variant: {\n      ghost: {\n        boxShadow: 'none',\n        '&:disabled': {\n          boxShadow: 'none',\n        },\n        backgroundColor: 'transparent',\n        '&:focus-visible': {\n          backgroundColor: '$loContrast',\n        },\n      },\n    },\n    state: {\n      invalid: {\n        boxShadow: 'inset 0 0 0 1px $colors$textareaInvalidBorder',\n        '&:focus-visible': {\n          boxShadow: `inset 0 0 0 2px $colors$textareaInvalidBorder, ${FOCUS_SHADOW}`,\n        },\n        '@hover': {\n          '&:hover': {\n            '&::after': {\n              backgroundColor: '$textareaInvalidBorder',\n            },\n          },\n        },\n      },\n    },\n    cursor: {\n      default: {\n        cursor: 'default',\n        '@hover': {\n          '&:hover:not(:read-only)': {\n            cursor: 'text',\n          },\n        },\n        '&:focus-visible:not(:read-only)': {\n          cursor: 'text',\n        },\n      },\n      text: {\n        cursor: 'text',\n      },\n    },\n    resize: {\n      none: {\n        resize: 'none',\n      },\n      both: {\n        resize: 'both',\n      },\n      vertical: {\n        resize: 'vertical',\n      },\n      horizontal: {\n        resize: 'horizontal',\n      },\n    },\n    endAdornment: {\n      true: {\n        paddingBottom: '$5',\n        paddingRight: '$5',\n      },\n    },\n  },\n  defaultVariants: {\n    cursor: 'default',\n    resize: 'both',\n  },\n  compoundVariants: [\n    {\n      variant: 'ghost',\n      state: 'invalid',\n      css: {\n        boxShadow: 'inset 0 0 0 1px $colors$textareaInvalidBorder',\n      },\n    },\n  ],\n});\n\nconst TextareaWrapper = styled('div', {\n  // Reset\n  outline: 'none',\n  lineHeight: 0,\n\n  position: 'relative',\n  display: 'inline-flex', // helps matching resizable content size\n  backgroundColor: '$textareaBg',\n  color: '$textareaPlaceholder',\n  borderRadius: '$3',\n\n  '&::before': {\n    boxSizing: 'border-box',\n    borderRadius: 'inherit',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n    pointerEvents: 'none',\n  },\n  '&::after': {\n    boxSizing: 'border-box',\n    borderRadius: 'inherit',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n    pointerEvents: 'none',\n  },\n\n  '&:focus-visible': {\n    '&::before': {\n      backgroundColor: '$textareaFocusBg',\n    },\n    '&::after': {\n      backgroundColor: '$primary',\n      opacity: 0.15,\n    },\n  },\n\n  '@hover': {\n    '&:hover': {\n      '&::before': {\n        backgroundColor: '$textareaHoverBg',\n      },\n      '&::after': {\n        backgroundColor: '$primary',\n        opacity: 0.05,\n      },\n    },\n  },\n\n  variants: {\n    disabled: {\n      true: {\n        opacity: 0.7,\n        color: '$textareaDisabledText',\n        '@hover': {\n          '&:hover': {\n            '&::before': {\n              backgroundColor: 'inherit',\n            },\n            '&::after': {\n              backgroundColor: 'inherit',\n            },\n          },\n        },\n      },\n    },\n    state: {\n      invalid: {\n        '@hover': {\n          '&:hover': {\n            '&::after': {\n              backgroundColor: '$textareaInvalidBorder',\n            },\n          },\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    disabled: false,\n  },\n});\n\nconst AdornmentWrapperEnd = styled('div', {\n  position: 'absolute',\n  bottom: '$2',\n  right: '$3',\n  minWidth: '$5',\n  minHeight: '$5',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n});\n\nexport interface TextareaVariants\n  extends Omit<VariantProps<typeof StyledTextarea>, 'endAdornment'> {}\n\nexport interface TextareaProps\n  extends TextareaVariants,\n    Omit<React.ComponentProps<typeof StyledTextarea>, 'endAdornment'> {\n  label?: string;\n  endAdornment?: React.ReactNode;\n  rootCss?: CSS;\n}\n\nexport const Textarea = React.forwardRef<React.ElementRef<typeof StyledTextarea>, TextareaProps>(\n  (\n    { state, disabled, onFocus, onBlur, label, id, rootCss, css, endAdornment, ...props },\n    forwardedRef\n  ) => {\n    const [hasFocus, setHasFocus] = React.useState(false);\n\n    const invalid = React.useMemo(() => state === 'invalid', [state]);\n\n    const hasEndAdornment = React.useMemo(() => Boolean(endAdornment), [endAdornment]);\n\n    const labelVariant = React.useMemo(() => {\n      if (disabled) {\n        return 'subtle';\n      }\n      if (invalid) {\n        return 'invalid';\n      }\n      if (hasFocus) {\n        return 'contrast';\n      }\n      return 'default';\n    }, [invalid, disabled, hasFocus]);\n\n    const handleFocus = React.useCallback(\n      (e: React.FocusEvent<HTMLTextAreaElement>) => {\n        if (onFocus) {\n          onFocus(e);\n        }\n        setHasFocus(true);\n      },\n      [onFocus, setHasFocus]\n    );\n\n    const handleBlur = React.useCallback(\n      (e: React.FocusEvent<HTMLTextAreaElement>) => {\n        if (onBlur) {\n          onBlur(e);\n        }\n        setHasFocus(false);\n      },\n      [onBlur, setHasFocus]\n    );\n\n    return (\n      <Box css={rootCss}>\n        {label && (\n          <Label variant={labelVariant} htmlFor={id} css={{ display: 'block' }}>\n            {label}\n          </Label>\n        )}\n        <TextareaWrapper state={state} disabled={disabled}>\n          <StyledTextarea\n            id={id}\n            ref={forwardedRef}\n            css={css}\n            disabled={disabled}\n            state={state}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            endAdornment={hasEndAdornment}\n            {...props}\n          />\n          {hasEndAdornment && <AdornmentWrapperEnd>{endAdornment}</AdornmentWrapperEnd>}\n        </TextareaWrapper>\n      </Box>\n    );\n  }\n);\n"],"mappings":"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"}
+{"version":3,"file":"Textarea.js","names":[],"sources":["../../../components/Textarea/Textarea.tsx"],"sourcesContent":["import React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { Box } from '../Box';\nimport { elevationVariants } from '../Elevation';\nimport { Label } from '../Label';\n\n// CONSTANTS\nconst FOCUS_SHADOW = elevationVariants[1].boxShadow; // apply elevation $1 when focus\n\n// COMPONENTS\nconst StyledTextarea = styled('textarea', {\n  // Reset\n  appearance: 'none',\n  overflow: 'auto', // force overflow auto behaviour cross-browser\n  borderWidth: '0',\n  boxSizing: 'border-box',\n  fontFamily: '$rubik',\n  margin: '0',\n  outline: 'none',\n  WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n\n  // Custom\n  p: '$3',\n  position: 'relative',\n  flexGrow: 1, // make sure to grow fully inside TextareaWrapper\n  backgroundColor: 'transparent',\n  borderRadius: 'inherit', // inherit border radius from TextareaWrapper\n  boxShadow: 'inset 0 0 0 1px $colors$textareaBorder',\n  color: '$textareaText',\n  fontVariantNumeric: 'tabular-nums',\n  transition: 'box-shadow .1s ease-in-out',\n\n  '&:-webkit-autofill,&:autofill': {\n    boxShadow: 'inset 0 0 0 1px $colors$textareaBorder, inset 0 0 0 100px $colors$textareaBg',\n  },\n\n  '&:-webkit-autofill::first-line,&:autofill::first-line': {\n    fontFamily: '$rubik',\n    color: '$hiContrast',\n  },\n\n  '&:focus-visible': {\n    boxShadow: `inset 0 0 0 2px $colors$textareaFocusBorder, ${FOCUS_SHADOW}`,\n  },\n\n  '&::placeholder': {\n    color: '$textareaPlaceholder',\n  },\n\n  '&:read-only:not(:disabled)': {\n    boxShadow: 'none',\n  },\n\n  '&:disabled': {\n    pointerEvents: 'none',\n    opacity: 0.7,\n    color: '$textareaDisabledText',\n  },\n  variants: {\n    variant: {\n      ghost: {\n        boxShadow: 'none',\n        '&:disabled': {\n          boxShadow: 'none',\n        },\n        backgroundColor: 'transparent',\n        '&:focus-visible': {\n          backgroundColor: '$loContrast',\n        },\n      },\n    },\n    state: {\n      invalid: {\n        boxShadow: 'inset 0 0 0 1px $colors$textareaInvalidBorder',\n        '&:focus-visible': {\n          boxShadow: `inset 0 0 0 2px $colors$textareaInvalidBorder, ${FOCUS_SHADOW}`,\n        },\n        '@hover': {\n          '&:hover': {\n            '&::after': {\n              backgroundColor: '$textareaInvalidBorder',\n            },\n          },\n        },\n      },\n    },\n    cursor: {\n      default: {\n        cursor: 'default',\n        '@hover': {\n          '&:hover:not(:read-only)': {\n            cursor: 'text',\n          },\n        },\n        '&:focus-visible:not(:read-only)': {\n          cursor: 'text',\n        },\n      },\n      text: {\n        cursor: 'text',\n      },\n    },\n    resize: {\n      none: {\n        resize: 'none',\n      },\n      both: {\n        resize: 'both',\n      },\n      vertical: {\n        resize: 'vertical',\n      },\n      horizontal: {\n        resize: 'horizontal',\n      },\n    },\n    endAdornment: {\n      true: {\n        paddingBottom: '$5',\n        paddingRight: '$5',\n      },\n    },\n  },\n  defaultVariants: {\n    cursor: 'default',\n    resize: 'both',\n  },\n  compoundVariants: [\n    {\n      variant: 'ghost',\n      state: 'invalid',\n      css: {\n        boxShadow: 'inset 0 0 0 1px $colors$textareaInvalidBorder',\n      },\n    },\n  ],\n});\n\nconst TextareaWrapper = styled('div', {\n  // Reset\n  outline: 'none',\n  lineHeight: 0,\n\n  position: 'relative',\n  display: 'inline-flex', // helps matching resizable content size\n  backgroundColor: '$textareaBg',\n  color: '$textareaPlaceholder',\n  borderRadius: '$3',\n\n  '&::before': {\n    boxSizing: 'border-box',\n    borderRadius: 'inherit',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n    pointerEvents: 'none',\n  },\n  '&::after': {\n    boxSizing: 'border-box',\n    borderRadius: 'inherit',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n    pointerEvents: 'none',\n  },\n\n  '&:focus-visible': {\n    '&::before': {\n      backgroundColor: '$textareaFocusBg',\n    },\n    '&::after': {\n      backgroundColor: '$primary',\n      opacity: 0.15,\n    },\n  },\n\n  '@hover': {\n    '&:hover': {\n      '&::before': {\n        backgroundColor: '$textareaHoverBg',\n      },\n      '&::after': {\n        backgroundColor: '$primary',\n        opacity: 0.05,\n      },\n    },\n  },\n\n  variants: {\n    disabled: {\n      true: {\n        opacity: 0.7,\n        color: '$textareaDisabledText',\n        '@hover': {\n          '&:hover': {\n            '&::before': {\n              backgroundColor: 'inherit',\n            },\n            '&::after': {\n              backgroundColor: 'inherit',\n            },\n          },\n        },\n      },\n    },\n    state: {\n      invalid: {\n        '@hover': {\n          '&:hover': {\n            '&::after': {\n              backgroundColor: '$textareaInvalidBorder',\n            },\n          },\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    disabled: false,\n  },\n});\n\nconst AdornmentWrapperEnd = styled('div', {\n  position: 'absolute',\n  bottom: '$2',\n  right: '$3',\n  minWidth: '$5',\n  minHeight: '$5',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n});\n\nexport interface TextareaVariants\n  extends Omit<VariantProps<typeof StyledTextarea>, 'endAdornment'> {}\n\nexport interface TextareaProps\n  extends TextareaVariants,\n    Omit<React.ComponentProps<typeof StyledTextarea>, 'endAdornment'> {\n  label?: string;\n  endAdornment?: React.ReactNode;\n  rootCss?: CSS;\n}\n\nexport const Textarea = React.forwardRef<React.ElementRef<typeof StyledTextarea>, TextareaProps>(\n  (\n    { state, disabled, onFocus, onBlur, label, id, rootCss, css, endAdornment, ...props },\n    forwardedRef\n  ) => {\n    const [hasFocus, setHasFocus] = React.useState(false);\n\n    const invalid = React.useMemo(() => state === 'invalid', [state]);\n\n    const hasEndAdornment = React.useMemo(() => Boolean(endAdornment), [endAdornment]);\n\n    const labelVariant = React.useMemo(() => {\n      if (disabled) {\n        return 'subtle';\n      }\n      if (invalid) {\n        return 'invalid';\n      }\n      if (hasFocus) {\n        return 'contrast';\n      }\n      return 'default';\n    }, [invalid, disabled, hasFocus]);\n\n    const handleFocus = React.useCallback(\n      (e: React.FocusEvent<HTMLTextAreaElement>) => {\n        if (onFocus) {\n          onFocus(e);\n        }\n        setHasFocus(true);\n      },\n      [onFocus, setHasFocus]\n    );\n\n    const handleBlur = React.useCallback(\n      (e: React.FocusEvent<HTMLTextAreaElement>) => {\n        if (onBlur) {\n          onBlur(e);\n        }\n        setHasFocus(false);\n      },\n      [onBlur, setHasFocus]\n    );\n\n    return (\n      <Box css={rootCss}>\n        {label && (\n          <Label variant={labelVariant} htmlFor={id} css={{ display: 'block' }}>\n            {label}\n          </Label>\n        )}\n        <TextareaWrapper state={state} disabled={disabled}>\n          <StyledTextarea\n            id={id}\n            ref={forwardedRef}\n            css={css}\n            disabled={disabled}\n            state={state}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            endAdornment={hasEndAdornment}\n            {...props}\n          />\n          {hasEndAdornment && <AdornmentWrapperEnd>{endAdornment}</AdornmentWrapperEnd>}\n        </TextareaWrapper>\n      </Box>\n    );\n  }\n);\n"],"mappings":";;;;;;;AAQA,IAAM,eAAe,kBAAkB,GAAG;AAG1C,IAAM,iBAAiB,OAAO,YAAY;CAExC,YAAY;CACZ,UAAU;CACV,aAAa;CACb,WAAW;CACX,YAAY;CACZ,QAAQ;CACR,SAAS;CACT,yBAAyB;CAGzB,GAAG;CACH,UAAU;CACV,UAAU;CACV,iBAAiB;CACjB,cAAc;CACd,WAAW;CACX,OAAO;CACP,oBAAoB;CACpB,YAAY;CAEZ,iCAAiC,EAC/B,WAAW,gFACZ;CAED,yDAAyD;EACvD,YAAY;EACZ,OAAO;EACR;CAED,mBAAmB,EACjB,WAAW,gDAAgD,gBAC5D;CAED,kBAAkB,EAChB,OAAO,wBACR;CAED,8BAA8B,EAC5B,WAAW,QACZ;CAED,cAAc;EACZ,eAAe;EACf,SAAS;EACT,OAAO;EACR;CACD,UAAU;EACR,SAAS,EACP,OAAO;GACL,WAAW;GACX,cAAc,EACZ,WAAW,QACZ;GACD,iBAAiB;GACjB,mBAAmB,EACjB,iBAAiB,eAClB;GACF,EACF;EACD,OAAO,EACL,SAAS;GACP,WAAW;GACX,mBAAmB,EACjB,WAAW,kDAAkD,gBAC9D;GACD,UAAU,EACR,WAAW,EACT,YAAY,EACV,iBAAiB,0BAClB,EACF,EACF;GACF,EACF;EACD,QAAQ;GACN,SAAS;IACP,QAAQ;IACR,UAAU,EACR,2BAA2B,EACzB,QAAQ,QACT,EACF;IACD,mCAAmC,EACjC,QAAQ,QACT;IACF;GACD,MAAM,EACJ,QAAQ,QACT;GACF;EACD,QAAQ;GACN,MAAM,EACJ,QAAQ,QACT;GACD,MAAM,EACJ,QAAQ,QACT;GACD,UAAU,EACR,QAAQ,YACT;GACD,YAAY,EACV,QAAQ,cACT;GACF;EACD,cAAc,EACZ,MAAM;GACJ,eAAe;GACf,cAAc;GACf,EACF;EACF;CACD,iBAAiB;EACf,QAAQ;EACR,QAAQ;EACT;CACD,kBAAkB,CAChB;EACE,SAAS;EACT,OAAO;EACP,KAAK,EACH,WAAW,iDACZ;EACF,CACF;CACF,CAAC;AAEF,IAAM,kBAAkB,OAAO,OAAO;CAEpC,SAAS;CACT,YAAY;CAEZ,UAAU;CACV,SAAS;CACT,iBAAiB;CACjB,OAAO;CACP,cAAc;CAEd,aAAa;EACX,WAAW;EACX,cAAc;EACd,SAAS;EACT,UAAU;EACV,OAAO;EACP,eAAe;EAChB;CACD,YAAY;EACV,WAAW;EACX,cAAc;EACd,SAAS;EACT,UAAU;EACV,OAAO;EACP,eAAe;EAChB;CAED,mBAAmB;EACjB,aAAa,EACX,iBAAiB,oBAClB;EACD,YAAY;GACV,iBAAiB;GACjB,SAAS;GACV;EACF;CAED,UAAU,EACR,WAAW;EACT,aAAa,EACX,iBAAiB,oBAClB;EACD,YAAY;GACV,iBAAiB;GACjB,SAAS;GACV;EACF,EACF;CAED,UAAU;EACR,UAAU,EACR,MAAM;GACJ,SAAS;GACT,OAAO;GACP,UAAU,EACR,WAAW;IACT,aAAa,EACX,iBAAiB,WAClB;IACD,YAAY,EACV,iBAAiB,WAClB;IACF,EACF;GACF,EACF;EACD,OAAO,EACL,SAAS,EACP,UAAU,EACR,WAAW,EACT,YAAY,EACV,iBAAiB,0BAClB,EACF,EACF,EACF,EACF;EACF;CACD,iBAAiB,EACf,UAAU,OACX;CACF,CAAC;AAEF,IAAM,sBAAsB,OAAO,OAAO;CACxC,UAAU;CACV,QAAQ;CACR,OAAO;CACP,UAAU;CACV,WAAW;CACX,SAAS;CACT,YAAY;CACZ,gBAAgB;CACjB,CAAC;AAaF,IAAa,WAAW,MAAM,YAE1B,EAAE,OAAO,UAAU,SAAS,QAAQ,OAAO,IAAI,SAAS,KAAK,cAAc,GAAG,SAC9E,iBACG;CACH,MAAM,CAAC,UAAU,eAAe,MAAM,SAAS,MAAM;CAErD,MAAM,UAAU,MAAM,cAAc,UAAU,WAAW,CAAC,MAAM,CAAC;CAEjE,MAAM,kBAAkB,MAAM,cAAc,QAAQ,aAAa,EAAE,CAAC,aAAa,CAAC;CAElF,MAAM,eAAe,MAAM,cAAc;EACvC,IAAI,UACF,OAAO;EAET,IAAI,SACF,OAAO;EAET,IAAI,UACF,OAAO;EAET,OAAO;IACN;EAAC;EAAS;EAAU;EAAS,CAAC;CAEjC,MAAM,cAAc,MAAM,aACvB,MAA6C;EAC5C,IAAI,SACF,QAAQ,EAAE;EAEZ,YAAY,KAAK;IAEnB,CAAC,SAAS,YAAY,CACvB;CAED,MAAM,aAAa,MAAM,aACtB,MAA6C;EAC5C,IAAI,QACF,OAAO,EAAE;EAEX,YAAY,MAAM;IAEpB,CAAC,QAAQ,YAAY,CACtB;CAED,OACE,qBAAC,KAAD;EAAK,KAAK;YAAV,CACG,SACC,oBAAC,OAAD;GAAO,SAAS;GAAc,SAAS;GAAI,KAAK,EAAE,SAAS,SAAS;aACjE;GACK,CAAA,EAEV,qBAAC,iBAAD;GAAwB;GAAiB;aAAzC,CACE,oBAAC,gBAAD;IACM;IACJ,KAAK;IACA;IACK;IACH;IACP,SAAS;IACT,QAAQ;IACR,cAAc;IACd,GAAI;IACJ,CAAA,EACD,mBAAmB,oBAAC,qBAAD,EAAA,UAAsB,cAAmC,CAAA,CAC7D;KACd;;EAGX"}

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

@@ -1 +1 @@
-{"version":3,"file":"Textarea.theme.cjs","names":[],"sources":["../../../components/Textarea/Textarea.theme.ts"],"sourcesContent":["import tinycolor from 'tinycolor2';\n\n// Plain TypeScript color tokens (no vanilla-extract)\n// Using default blue primary color for static tokens\nexport const textareaLightTheme = {\n  textareaBg: 'hsl(240, 14.0%, 99.0%)', // $deepBlue1\n  textareaBorder: 'hsl(208, 9.0%, 73.0%)', // $grayBlue9\n  textareaFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n  textareaFocusBorder: 'hsl(206, 100%, 50%)', // blue8\n  textareaHoverBg: 'hsla(0, 0%, 100%, 0.372)', // $whiteA9\n  textareaText: tinycolor('black').setAlpha(0.74).toHslString(),\n  textareaPlaceholder: 'hsla(0, 0%, 0%, 0.498)', // $blackA10\n  textareaDisabledText: tinycolor('black').setAlpha(0.35).toHslString(),\n  textareaInvalidBorder: 'hsl(358, 75%, 59%)', // $red9\n};\n\nexport const textareaDarkTheme = {\n  textareaBg: 'hsl(209, 38.0%, 12.0%)', // $grayBlue7 dark\n  textareaBorder: 'hsl(208, 11.0%, 45.0%)', // $grayBlue9 dark\n  textareaFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n  textareaFocusBorder: 'hsl(206, 100%, 70%)', // blue11\n  textareaHoverBg: 'hsla(0, 0%, 100%, 0.104)', // $whiteA4\n  textareaText: tinycolor('white').setAlpha(0.8).toHslString(),\n  textareaPlaceholder: 'hsla(0, 0%, 100%, 0.455)', // $whiteA10\n  textareaDisabledText: tinycolor('white').setAlpha(0.35).toHslString(),\n  textareaInvalidBorder: 'hsl(358, 75%, 59%)', // $red9\n};\n"],"mappings":";;;;AAIA,IAAa,qBAAqB;CAChC,YAAY;CACZ,gBAAgB;CAChB,kBAAA,GAAA,WAAA,SAA2B,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;CAC/D,qBAAqB;CACrB,iBAAiB;CACjB,eAAA,GAAA,WAAA,SAAwB,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;CAC5D,qBAAqB;CACrB,uBAAA,GAAA,WAAA,SAAgC,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;CACpE,uBAAuB;AACzB;AAEA,IAAa,oBAAoB;CAC/B,YAAY;CACZ,gBAAgB;CAChB,kBAAA,GAAA,WAAA,SAA2B,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;CAC/D,qBAAqB;CACrB,iBAAiB;CACjB,eAAA,GAAA,WAAA,SAAwB,OAAO,EAAE,SAAS,EAAG,EAAE,YAAY;CAC3D,qBAAqB;CACrB,uBAAA,GAAA,WAAA,SAAgC,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;CACpE,uBAAuB;AACzB"}
+{"version":3,"file":"Textarea.theme.cjs","names":[],"sources":["../../../components/Textarea/Textarea.theme.ts"],"sourcesContent":["import tinycolor from 'tinycolor2';\n\n// Plain TypeScript color tokens (no vanilla-extract)\n// Using default blue primary color for static tokens\nexport const textareaLightTheme = {\n  textareaBg: 'hsl(240, 14.0%, 99.0%)', // $deepBlue1\n  textareaBorder: 'hsl(208, 9.0%, 73.0%)', // $grayBlue9\n  textareaFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n  textareaFocusBorder: 'hsl(206, 100%, 50%)', // blue8\n  textareaHoverBg: 'hsla(0, 0%, 100%, 0.372)', // $whiteA9\n  textareaText: tinycolor('black').setAlpha(0.74).toHslString(),\n  textareaPlaceholder: 'hsla(0, 0%, 0%, 0.498)', // $blackA10\n  textareaDisabledText: tinycolor('black').setAlpha(0.35).toHslString(),\n  textareaInvalidBorder: 'hsl(358, 75%, 59%)', // $red9\n};\n\nexport const textareaDarkTheme = {\n  textareaBg: 'hsl(209, 38.0%, 12.0%)', // $grayBlue7 dark\n  textareaBorder: 'hsl(208, 11.0%, 45.0%)', // $grayBlue9 dark\n  textareaFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n  textareaFocusBorder: 'hsl(206, 100%, 70%)', // blue11\n  textareaHoverBg: 'hsla(0, 0%, 100%, 0.104)', // $whiteA4\n  textareaText: tinycolor('white').setAlpha(0.8).toHslString(),\n  textareaPlaceholder: 'hsla(0, 0%, 100%, 0.455)', // $whiteA10\n  textareaDisabledText: tinycolor('white').setAlpha(0.35).toHslString(),\n  textareaInvalidBorder: 'hsl(358, 75%, 59%)', // $red9\n};\n"],"mappings":";;;;AAIA,IAAa,qBAAqB;CAChC,YAAY;CACZ,gBAAgB;CAChB,kBAAA,GAAA,WAAA,SAA2B,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;CAChE,qBAAqB;CACrB,iBAAiB;CACjB,eAAA,GAAA,WAAA,SAAwB,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;CAC7D,qBAAqB;CACrB,uBAAA,GAAA,WAAA,SAAgC,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;CACrE,uBAAuB;CACxB;AAED,IAAa,oBAAoB;CAC/B,YAAY;CACZ,gBAAgB;CAChB,kBAAA,GAAA,WAAA,SAA2B,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;CAChE,qBAAqB;CACrB,iBAAiB;CACjB,eAAA,GAAA,WAAA,SAAwB,QAAQ,CAAC,SAAS,GAAI,CAAC,aAAa;CAC5D,qBAAqB;CACrB,uBAAA,GAAA,WAAA,SAAgC,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;CACrE,uBAAuB;CACxB"}

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

@@ -1 +1 @@
-{"version":3,"file":"Textarea.theme.js","names":[],"sources":["../../../components/Textarea/Textarea.theme.ts"],"sourcesContent":["import tinycolor from 'tinycolor2';\n\n// Plain TypeScript color tokens (no vanilla-extract)\n// Using default blue primary color for static tokens\nexport const textareaLightTheme = {\n  textareaBg: 'hsl(240, 14.0%, 99.0%)', // $deepBlue1\n  textareaBorder: 'hsl(208, 9.0%, 73.0%)', // $grayBlue9\n  textareaFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n  textareaFocusBorder: 'hsl(206, 100%, 50%)', // blue8\n  textareaHoverBg: 'hsla(0, 0%, 100%, 0.372)', // $whiteA9\n  textareaText: tinycolor('black').setAlpha(0.74).toHslString(),\n  textareaPlaceholder: 'hsla(0, 0%, 0%, 0.498)', // $blackA10\n  textareaDisabledText: tinycolor('black').setAlpha(0.35).toHslString(),\n  textareaInvalidBorder: 'hsl(358, 75%, 59%)', // $red9\n};\n\nexport const textareaDarkTheme = {\n  textareaBg: 'hsl(209, 38.0%, 12.0%)', // $grayBlue7 dark\n  textareaBorder: 'hsl(208, 11.0%, 45.0%)', // $grayBlue9 dark\n  textareaFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n  textareaFocusBorder: 'hsl(206, 100%, 70%)', // blue11\n  textareaHoverBg: 'hsla(0, 0%, 100%, 0.104)', // $whiteA4\n  textareaText: tinycolor('white').setAlpha(0.8).toHslString(),\n  textareaPlaceholder: 'hsla(0, 0%, 100%, 0.455)', // $whiteA10\n  textareaDisabledText: tinycolor('white').setAlpha(0.35).toHslString(),\n  textareaInvalidBorder: 'hsl(358, 75%, 59%)', // $red9\n};\n"],"mappings":";;AAIA,IAAa,qBAAqB;CAChC,YAAY;CACZ,gBAAgB;CAChB,iBAAiB,UAAU,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;CAC/D,qBAAqB;CACrB,iBAAiB;CACjB,cAAc,UAAU,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;CAC5D,qBAAqB;CACrB,sBAAsB,UAAU,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;CACpE,uBAAuB;AACzB;AAEA,IAAa,oBAAoB;CAC/B,YAAY;CACZ,gBAAgB;CAChB,iBAAiB,UAAU,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;CAC/D,qBAAqB;CACrB,iBAAiB;CACjB,cAAc,UAAU,OAAO,EAAE,SAAS,EAAG,EAAE,YAAY;CAC3D,qBAAqB;CACrB,sBAAsB,UAAU,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;CACpE,uBAAuB;AACzB"}
+{"version":3,"file":"Textarea.theme.js","names":[],"sources":["../../../components/Textarea/Textarea.theme.ts"],"sourcesContent":["import tinycolor from 'tinycolor2';\n\n// Plain TypeScript color tokens (no vanilla-extract)\n// Using default blue primary color for static tokens\nexport const textareaLightTheme = {\n  textareaBg: 'hsl(240, 14.0%, 99.0%)', // $deepBlue1\n  textareaBorder: 'hsl(208, 9.0%, 73.0%)', // $grayBlue9\n  textareaFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n  textareaFocusBorder: 'hsl(206, 100%, 50%)', // blue8\n  textareaHoverBg: 'hsla(0, 0%, 100%, 0.372)', // $whiteA9\n  textareaText: tinycolor('black').setAlpha(0.74).toHslString(),\n  textareaPlaceholder: 'hsla(0, 0%, 0%, 0.498)', // $blackA10\n  textareaDisabledText: tinycolor('black').setAlpha(0.35).toHslString(),\n  textareaInvalidBorder: 'hsl(358, 75%, 59%)', // $red9\n};\n\nexport const textareaDarkTheme = {\n  textareaBg: 'hsl(209, 38.0%, 12.0%)', // $grayBlue7 dark\n  textareaBorder: 'hsl(208, 11.0%, 45.0%)', // $grayBlue9 dark\n  textareaFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n  textareaFocusBorder: 'hsl(206, 100%, 70%)', // blue11\n  textareaHoverBg: 'hsla(0, 0%, 100%, 0.104)', // $whiteA4\n  textareaText: tinycolor('white').setAlpha(0.8).toHslString(),\n  textareaPlaceholder: 'hsla(0, 0%, 100%, 0.455)', // $whiteA10\n  textareaDisabledText: tinycolor('white').setAlpha(0.35).toHslString(),\n  textareaInvalidBorder: 'hsl(358, 75%, 59%)', // $red9\n};\n"],"mappings":";;AAIA,IAAa,qBAAqB;CAChC,YAAY;CACZ,gBAAgB;CAChB,iBAAiB,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;CAChE,qBAAqB;CACrB,iBAAiB;CACjB,cAAc,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;CAC7D,qBAAqB;CACrB,sBAAsB,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;CACrE,uBAAuB;CACxB;AAED,IAAa,oBAAoB;CAC/B,YAAY;CACZ,gBAAgB;CAChB,iBAAiB,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;CAChE,qBAAqB;CACrB,iBAAiB;CACjB,cAAc,UAAU,QAAQ,CAAC,SAAS,GAAI,CAAC,aAAa;CAC5D,qBAAqB;CACrB,sBAAsB,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;CACrE,uBAAuB;CACxB"}

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

@@ -1 +1 @@
-{"version":3,"file":"Textarea.themes.cjs","names":[],"sources":["../../../components/Textarea/Textarea.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n  export type Colors = {\n    textareaBg: Property.Color;\n    textareaBorder: Property.Color;\n    textareaFocusBg: Property.Color;\n    textareaFocusBorder: Property.Color;\n    textareaHoverBg: Property.Color;\n    textareaText: Property.Color;\n    textareaPlaceholder: Property.Color;\n    textareaDisabledText: Property.Color;\n    textareaInvalidBorder: Property.Color;\n  };\n\n  type Factory = (primaryColor: ColorInfo) => Colors;\n\n  export const getLight: Factory = (primaryColor) => ({\n    textareaBg: '$deepBlue1',\n    textareaBorder: '$grayBlue9',\n    textareaFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n    textareaFocusBorder: primaryColor.helpers.pickScale(8),\n    textareaHoverBg: '$whiteA9',\n    textareaText: tinycolor('black').setAlpha(0.74).toHslString(),\n    textareaPlaceholder: '$blackA10',\n    textareaDisabledText: tinycolor('black').setAlpha(0.35).toHslString(),\n    textareaInvalidBorder: '$red9',\n  });\n\n  export const getDark: Factory = (primaryColor) => ({\n    textareaBg: '$grayBlue7',\n    textareaBorder: '$grayBlue9',\n    textareaFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n    textareaFocusBorder: primaryColor.helpers.pickScale(11),\n    textareaHoverBg: '$whiteA4',\n    textareaText: tinycolor('white').setAlpha(0.8).toHslString(),\n    textareaPlaceholder: '$whiteA10',\n    textareaDisabledText: tinycolor('white').setAlpha(0.35).toHslString(),\n    textareaInvalidBorder: '$red9',\n  });\n}\n"],"mappings":";;;;AAKO,IAAA;;CAeQ,OAAA,YAAqB,kBAAkB;EAClD,YAAY;EACZ,gBAAgB;EAChB,kBAAA,GAAA,WAAA,SAA2B,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;EAC/D,qBAAqB,aAAa,QAAQ,UAAU,CAAC;EACrD,iBAAiB;EACjB,eAAA,GAAA,WAAA,SAAwB,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;EAC5D,qBAAqB;EACrB,uBAAA,GAAA,WAAA,SAAgC,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;EACpE,uBAAuB;CACzB;CAEa,OAAA,WAAoB,kBAAkB;EACjD,YAAY;EACZ,gBAAgB;EAChB,kBAAA,GAAA,WAAA,SAA2B,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;EAC/D,qBAAqB,aAAa,QAAQ,UAAU,EAAE;EACtD,iBAAiB;EACjB,eAAA,GAAA,WAAA,SAAwB,OAAO,EAAE,SAAS,EAAG,EAAE,YAAY;EAC3D,qBAAqB;EACrB,uBAAA,GAAA,WAAA,SAAgC,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;EACpE,uBAAuB;CACzB;wBACF"}
+{"version":3,"file":"Textarea.themes.cjs","names":[],"sources":["../../../components/Textarea/Textarea.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n  export type Colors = {\n    textareaBg: Property.Color;\n    textareaBorder: Property.Color;\n    textareaFocusBg: Property.Color;\n    textareaFocusBorder: Property.Color;\n    textareaHoverBg: Property.Color;\n    textareaText: Property.Color;\n    textareaPlaceholder: Property.Color;\n    textareaDisabledText: Property.Color;\n    textareaInvalidBorder: Property.Color;\n  };\n\n  type Factory = (primaryColor: ColorInfo) => Colors;\n\n  export const getLight: Factory = (primaryColor) => ({\n    textareaBg: '$deepBlue1',\n    textareaBorder: '$grayBlue9',\n    textareaFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n    textareaFocusBorder: primaryColor.helpers.pickScale(8),\n    textareaHoverBg: '$whiteA9',\n    textareaText: tinycolor('black').setAlpha(0.74).toHslString(),\n    textareaPlaceholder: '$blackA10',\n    textareaDisabledText: tinycolor('black').setAlpha(0.35).toHslString(),\n    textareaInvalidBorder: '$red9',\n  });\n\n  export const getDark: Factory = (primaryColor) => ({\n    textareaBg: '$grayBlue7',\n    textareaBorder: '$grayBlue9',\n    textareaFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n    textareaFocusBorder: primaryColor.helpers.pickScale(11),\n    textareaHoverBg: '$whiteA4',\n    textareaText: tinycolor('white').setAlpha(0.8).toHslString(),\n    textareaPlaceholder: '$whiteA10',\n    textareaDisabledText: tinycolor('white').setAlpha(0.35).toHslString(),\n    textareaInvalidBorder: '$red9',\n  });\n}\n"],"mappings":";;;;AAKO,IAAA;;CAeQ,OAAA,YAAqB,kBAAkB;EAClD,YAAY;EACZ,gBAAgB;EAChB,kBAAA,GAAA,WAAA,SAA2B,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAChE,qBAAqB,aAAa,QAAQ,UAAU,EAAE;EACtD,iBAAiB;EACjB,eAAA,GAAA,WAAA,SAAwB,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC7D,qBAAqB;EACrB,uBAAA,GAAA,WAAA,SAAgC,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EACrE,uBAAuB;EACxB;CAEY,OAAA,WAAoB,kBAAkB;EACjD,YAAY;EACZ,gBAAgB;EAChB,kBAAA,GAAA,WAAA,SAA2B,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAChE,qBAAqB,aAAa,QAAQ,UAAU,GAAG;EACvD,iBAAiB;EACjB,eAAA,GAAA,WAAA,SAAwB,QAAQ,CAAC,SAAS,GAAI,CAAC,aAAa;EAC5D,qBAAqB;EACrB,uBAAA,GAAA,WAAA,SAAgC,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EACrE,uBAAuB;EACxB;yBACF"}

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

@@ -1 +1 @@
-{"version":3,"file":"Textarea.themes.js","names":[],"sources":["../../../components/Textarea/Textarea.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n  export type Colors = {\n    textareaBg: Property.Color;\n    textareaBorder: Property.Color;\n    textareaFocusBg: Property.Color;\n    textareaFocusBorder: Property.Color;\n    textareaHoverBg: Property.Color;\n    textareaText: Property.Color;\n    textareaPlaceholder: Property.Color;\n    textareaDisabledText: Property.Color;\n    textareaInvalidBorder: Property.Color;\n  };\n\n  type Factory = (primaryColor: ColorInfo) => Colors;\n\n  export const getLight: Factory = (primaryColor) => ({\n    textareaBg: '$deepBlue1',\n    textareaBorder: '$grayBlue9',\n    textareaFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n    textareaFocusBorder: primaryColor.helpers.pickScale(8),\n    textareaHoverBg: '$whiteA9',\n    textareaText: tinycolor('black').setAlpha(0.74).toHslString(),\n    textareaPlaceholder: '$blackA10',\n    textareaDisabledText: tinycolor('black').setAlpha(0.35).toHslString(),\n    textareaInvalidBorder: '$red9',\n  });\n\n  export const getDark: Factory = (primaryColor) => ({\n    textareaBg: '$grayBlue7',\n    textareaBorder: '$grayBlue9',\n    textareaFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n    textareaFocusBorder: primaryColor.helpers.pickScale(11),\n    textareaHoverBg: '$whiteA4',\n    textareaText: tinycolor('white').setAlpha(0.8).toHslString(),\n    textareaPlaceholder: '$whiteA10',\n    textareaDisabledText: tinycolor('white').setAlpha(0.35).toHslString(),\n    textareaInvalidBorder: '$red9',\n  });\n}\n"],"mappings":";;AAKO,IAAA;;CAeQ,OAAA,YAAqB,kBAAkB;EAClD,YAAY;EACZ,gBAAgB;EAChB,iBAAiB,UAAU,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;EAC/D,qBAAqB,aAAa,QAAQ,UAAU,CAAC;EACrD,iBAAiB;EACjB,cAAc,UAAU,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;EAC5D,qBAAqB;EACrB,sBAAsB,UAAU,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;EACpE,uBAAuB;CACzB;CAEa,OAAA,WAAoB,kBAAkB;EACjD,YAAY;EACZ,gBAAgB;EAChB,iBAAiB,UAAU,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;EAC/D,qBAAqB,aAAa,QAAQ,UAAU,EAAE;EACtD,iBAAiB;EACjB,cAAc,UAAU,OAAO,EAAE,SAAS,EAAG,EAAE,YAAY;EAC3D,qBAAqB;EACrB,sBAAsB,UAAU,OAAO,EAAE,SAAS,GAAI,EAAE,YAAY;EACpE,uBAAuB;CACzB;wBACF"}
+{"version":3,"file":"Textarea.themes.js","names":[],"sources":["../../../components/Textarea/Textarea.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n  export type Colors = {\n    textareaBg: Property.Color;\n    textareaBorder: Property.Color;\n    textareaFocusBg: Property.Color;\n    textareaFocusBorder: Property.Color;\n    textareaHoverBg: Property.Color;\n    textareaText: Property.Color;\n    textareaPlaceholder: Property.Color;\n    textareaDisabledText: Property.Color;\n    textareaInvalidBorder: Property.Color;\n  };\n\n  type Factory = (primaryColor: ColorInfo) => Colors;\n\n  export const getLight: Factory = (primaryColor) => ({\n    textareaBg: '$deepBlue1',\n    textareaBorder: '$grayBlue9',\n    textareaFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n    textareaFocusBorder: primaryColor.helpers.pickScale(8),\n    textareaHoverBg: '$whiteA9',\n    textareaText: tinycolor('black').setAlpha(0.74).toHslString(),\n    textareaPlaceholder: '$blackA10',\n    textareaDisabledText: tinycolor('black').setAlpha(0.35).toHslString(),\n    textareaInvalidBorder: '$red9',\n  });\n\n  export const getDark: Factory = (primaryColor) => ({\n    textareaBg: '$grayBlue7',\n    textareaBorder: '$grayBlue9',\n    textareaFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n    textareaFocusBorder: primaryColor.helpers.pickScale(11),\n    textareaHoverBg: '$whiteA4',\n    textareaText: tinycolor('white').setAlpha(0.8).toHslString(),\n    textareaPlaceholder: '$whiteA10',\n    textareaDisabledText: tinycolor('white').setAlpha(0.35).toHslString(),\n    textareaInvalidBorder: '$red9',\n  });\n}\n"],"mappings":";;AAKO,IAAA;;CAeQ,OAAA,YAAqB,kBAAkB;EAClD,YAAY;EACZ,gBAAgB;EAChB,iBAAiB,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAChE,qBAAqB,aAAa,QAAQ,UAAU,EAAE;EACtD,iBAAiB;EACjB,cAAc,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC7D,qBAAqB;EACrB,sBAAsB,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EACrE,uBAAuB;EACxB;CAEY,OAAA,WAAoB,kBAAkB;EACjD,YAAY;EACZ,gBAAgB;EAChB,iBAAiB,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAChE,qBAAqB,aAAa,QAAQ,UAAU,GAAG;EACvD,iBAAiB;EACjB,cAAc,UAAU,QAAQ,CAAC,SAAS,GAAI,CAAC,aAAa;EAC5D,qBAAqB;EACrB,sBAAsB,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EACrE,uBAAuB;EACxB;yBACF"}