@clickhouse/click-ui 0.6.0 → 0.6.1-rc2

package/dist/cjs/components/EllipsisContent/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/EllipsisContent/EllipsisContent.tsx"],"sourcesContent":["import {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { mergeRefs } from '@/utils/mergeRefs';\nimport { styled } from 'styled-components';\n\nconst EllipsisContainer = styled.div`\n  display: inline-block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  vertical-align: text-bottom;\n  overflow: hidden;\n  justify-content: flex-start;\n  width: 100%;\n  width: -webkit-fill-available;\n  width: fill-available;\n  width: stretch;\n  & > *:not(button) {\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n`;\nexport interface EllipsisContentProps<T extends ElementType = 'div'> {\n  component?: T;\n}\n\ntype EllipsisPolymorphicComponent = <T extends ElementType = 'div'>(\n  props: Omit<ComponentProps<T>, keyof T> & EllipsisContentProps<T>\n) => ReactNode;\n\nconst _EllipsisContent = <T extends ElementType = 'div'>(\n  { component, ...props }: Omit<ComponentProps<T>, keyof T> & EllipsisContentProps<T>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  return (\n    <EllipsisContainer\n      as={component ?? 'div'}\n      ref={mergeRefs([\n        ref,\n        node => {\n          if (node && node.scrollWidth > node.clientWidth) {\n            node.title = node.innerText;\n          }\n        },\n      ])}\n      {...props}\n    />\n  );\n};\n\nexport const EllipsisContent: EllipsisPolymorphicComponent = forwardRef(_EllipsisContent);\n"],"names":["EllipsisContainer","styled","div","withConfig","componentId","_EllipsisContent","component","props","ref","jsx","mergeRefs","node","scrollWidth","clientWidth","title","innerText","EllipsisContent","forwardRef"],"mappings":";;;;;;;;;AAUA,MAAMA,iBAAAA,GAAoBC,uBAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,4QAAA,CAAA,CAAA;AAwBpC,MAAMC,mBAAmB,CACvB;AAAA,EAAEC,SAAAA;AAAAA,EAAW,GAAGC;AAAkE,CAAA,EAClFC,GAAAA,KACG;AACH,EAAA,uBACEC,cAAA,CAAC,qBACC,EAAA,EAAIH,SAAAA,IAAa,OACjB,GAAA,EAAKI,mBAAAA,CAAU,CACbF,GAAAA,EACAG,CAAAA,IAAAA,KAAQ;AACN,IAAA,IAAIA,IAAAA,IAAQA,IAAAA,CAAKC,WAAAA,GAAcD,IAAAA,CAAKE,WAAAA,EAAa;AAC/CF,MAAAA,IAAAA,CAAKG,QAAQH,IAAAA,CAAKI,SAAAA;AAAAA,IACpB;AAAA,EACF,CAAC,CACF,CAAA,EACD,GAAIR,KAAAA,EAAM,CAAA;AAGhB,CAAA;AAEO,MAAMS,eAAAA,GAAgDC,iBAAWZ,gBAAgB;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/EllipsisContent/EllipsisContent.tsx"],"sourcesContent":["import {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { mergeRefs } from '@/utils/mergeRefs';\nimport { styled } from 'styled-components';\n\nconst EllipsisContainer = styled.div`\n  display: inline-block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  vertical-align: text-bottom;\n  overflow: hidden;\n  justify-content: flex-start;\n  width: 100%;\n  width: -webkit-fill-available;\n  width: fill-available;\n  width: stretch;\n  & > *:not(button) {\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n`;\nexport interface EllipsisContentProps<T extends ElementType = 'div'> {\n  component?: T;\n}\n\ntype EllipsisPolymorphicComponent = <T extends ElementType = 'div'>(\n  props: Omit<ComponentProps<T>, keyof EllipsisContentProps<T>> & EllipsisContentProps<T>\n) => ReactNode;\n\nconst _EllipsisContent = <T extends ElementType = 'div'>(\n  {\n    component,\n    ...props\n  }: Omit<ComponentProps<T>, keyof EllipsisContentProps<T>> & EllipsisContentProps<T>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  return (\n    <EllipsisContainer\n      as={component ?? 'div'}\n      ref={mergeRefs([\n        ref,\n        node => {\n          if (node && node.scrollWidth > node.clientWidth) {\n            node.title = node.innerText;\n          }\n        },\n      ])}\n      {...props}\n    />\n  );\n};\n\nexport const EllipsisContent: EllipsisPolymorphicComponent = forwardRef(_EllipsisContent);\n"],"names":["EllipsisContainer","styled","div","withConfig","componentId","_EllipsisContent","component","props","ref","jsx","mergeRefs","node","scrollWidth","clientWidth","title","innerText","EllipsisContent","forwardRef"],"mappings":";;;;;;;;;AAUA,MAAMA,iBAAAA,GAAoBC,uBAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,4QAAA,CAAA,CAAA;AAwBpC,MAAMC,mBAAmB,CACvB;AAAA,EACEC,SAAAA;AAAAA,EACA,GAAGC;AAC6E,CAAA,EAClFC,GAAAA,KACG;AACH,EAAA,uBACEC,cAAA,CAAC,qBACC,EAAA,EAAIH,SAAAA,IAAa,OACjB,GAAA,EAAKI,mBAAAA,CAAU,CACbF,GAAAA,EACAG,CAAAA,IAAAA,KAAQ;AACN,IAAA,IAAIA,IAAAA,IAAQA,IAAAA,CAAKC,WAAAA,GAAcD,IAAAA,CAAKE,WAAAA,EAAa;AAC/CF,MAAAA,IAAAA,CAAKG,QAAQH,IAAAA,CAAKI,SAAAA;AAAAA,IACpB;AAAA,EACF,CAAC,CACF,CAAA,EACD,GAAIR,KAAAA,EAAM,CAAA;AAGhB,CAAA;AAEO,MAAMS,eAAAA,GAAgDC,iBAAWZ,gBAAgB;;;;"}

package/dist/cjs/components/GenericLabel/GenericLabel.css

@@ -0,0 +1,31 @@
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. genericLabel) */
+
+.generic-label__l8R-z {
+  color: var(--click-field-color-genericLabel-default);
+  font: var(--click-field-typography-genericLabel-default);
+  cursor: pointer;
+}
+
+.generic-label__l8R-z:hover {
+  color: var(--click-field-color-genericLabel-hover);
+  font: var(--click-field-typography-genericLabel-hover);
+}
+
+.generic-label__l8R-z:focus,
+.generic-label__l8R-z:focus-within {
+  color: var(--click-field-color-genericLabel-active);
+  font: var(--click-field-typography-genericLabel-active);
+}
+
+/* stylelint-disable no-descending-specificity -- disabled state intentionally
+   defined after hover/focus to neutralize them; the original styled-components
+   emits no hover/focus rules when disabled is true. */
+.generic-label__l8R-z.generic-label_disabled__LsI3I,
+.generic-label__l8R-z.generic-label_disabled__LsI3I:hover,
+.generic-label__l8R-z.generic-label_disabled__LsI3I:focus,
+.generic-label__l8R-z.generic-label_disabled__LsI3I:focus-within {
+  color: var(--click-field-color-genericLabel-disabled);
+  font: var(--click-field-typography-genericLabel-disabled);
+  cursor: not-allowed;
+}
+/* stylelint-enable no-descending-specificity */

package/dist/cjs/components/GenericLabel/GenericLabel.module.css.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const styles = {
+	"generic-label": "generic-label__l8R-z",
+	"generic-label_disabled": "generic-label_disabled__LsI3I"
+};
+
+exports.default = styles;
+//# sourceMappingURL=GenericLabel.module.css.cjs.map

package/dist/cjs/components/GenericLabel/GenericLabel.module.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GenericLabel.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/dist/cjs/components/GenericLabel/index.cjs

@@ -1,39 +1,28 @@
+require("./GenericLabel.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const styledComponents = require('styled-components');
+const cva = require('../../lib/cva.cjs');
+const GenericLabel_module = require('./GenericLabel.module.css.cjs');
+const classVarianceAuthority = require('class-variance-authority');
 
-const FormFieldLabel = styledComponents.styled.label.withConfig({
-  componentId: "sc-e2xmgs-0"
-})(["", ""], ({
-  theme,
-  disabled
-}) => `
-    ${disabled ? `
-    color: ${theme.click.field.color.genericLabel.disabled};
-    font: ${theme.click.field.typography.genericLabel.disabled};
-    cursor: not-allowed;
-    ` : `
-    cursor: pointer;
-    color: ${theme.click.field.color.genericLabel.default};
-    font: ${theme.click.field.typography.genericLabel.default};
-    &:hover {
-      color: ${theme.click.field.color.genericLabel.hover};
-      font: ${theme.click.field.typography.genericLabel.hover};
-    }
-    &:focus, &:focus-within {
-      color: ${theme.click.field.color.genericLabel.active};
-      font: ${theme.click.field.typography.genericLabel.active};
+const genericLabelVariants = classVarianceAuthority.cva(GenericLabel_module.default["generic-label"], {
+  variants: {
+    disabled: {
+      true: GenericLabel_module.default["generic-label_disabled"]
     }
-    `};
-  `);
+  }
+});
 const GenericLabel = ({
   disabled,
   children,
+  className,
   ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(FormFieldLabel, { disabled, ...props, children });
+}) => /* @__PURE__ */ jsxRuntime.jsx("label", { ...props, className: cva.cn(genericLabelVariants({
+  disabled
+}), className), children });
 
 exports.GenericLabel = GenericLabel;
 //# sourceMappingURL=index.cjs.map

package/dist/cjs/components/GenericLabel/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/GenericLabel/GenericLabel.tsx"],"sourcesContent":["import { styled } from 'styled-components';\nimport { GenericLabelProps } from './GenericLabel.types';\n\ninterface FormFieldLableProps {\n  disabled?: boolean;\n  htmlFor?: string;\n}\n\nconst FormFieldLabel = styled.label<FormFieldLableProps>`\n  ${({ theme, disabled }) => `\n    ${\n      disabled\n        ? `\n    color: ${theme.click.field.color.genericLabel.disabled};\n    font: ${theme.click.field.typography.genericLabel.disabled};\n    cursor: not-allowed;\n    `\n        : `\n    cursor: pointer;\n    color: ${theme.click.field.color.genericLabel.default};\n    font: ${theme.click.field.typography.genericLabel.default};\n    &:hover {\n      color: ${theme.click.field.color.genericLabel.hover};\n      font: ${theme.click.field.typography.genericLabel.hover};\n    }\n    &:focus, &:focus-within {\n      color: ${theme.click.field.color.genericLabel.active};\n      font: ${theme.click.field.typography.genericLabel.active};\n    }\n    `\n    };\n  `}\n`;\n\nexport const GenericLabel = ({ disabled, children, ...props }: GenericLabelProps) => (\n  <FormFieldLabel\n    disabled={disabled}\n    {...props}\n  >\n    {children}\n  </FormFieldLabel>\n);\n"],"names":["FormFieldLabel","styled","label","withConfig","componentId","theme","disabled","click","field","color","genericLabel","typography","default","hover","active","GenericLabel","children","props","jsx"],"mappings":";;;;;;;AAQA,MAAMA,cAAAA,GAAiBC,uBAAAA,CAAOC,KAAAA,CAAKC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,EAAA,GAC/B,CAAC;AAAA,EAAEC,KAAAA;AAAAA,EAAOC;AAAS,CAAA,KAAM;AAAA,IAAA,EAEvBA,QAAAA,GACI;AAAA,WAAA,EACGD,KAAAA,CAAME,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMC,aAAaJ,QAAQ,CAAA;AAAA,UAAA,EAC9CD,KAAAA,CAAME,KAAAA,CAAMC,KAAAA,CAAMG,UAAAA,CAAWD,aAAaJ,QAAQ,CAAA;AAAA;AAAA,IAAA,CAAA,GAGpD;AAAA;AAAA,WAAA,EAEGD,KAAAA,CAAME,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMC,aAAaE,OAAO,CAAA;AAAA,UAAA,EAC7CP,KAAAA,CAAME,KAAAA,CAAMC,KAAAA,CAAMG,UAAAA,CAAWD,aAAaE,OAAO,CAAA;AAAA;AAAA,aAAA,EAE9CP,KAAAA,CAAME,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMC,aAAaG,KAAK,CAAA;AAAA,YAAA,EAC3CR,KAAAA,CAAME,KAAAA,CAAMC,KAAAA,CAAMG,UAAAA,CAAWD,aAAaG,KAAK,CAAA;AAAA;AAAA;AAAA,aAAA,EAG9CR,KAAAA,CAAME,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMC,aAAaI,MAAM,CAAA;AAAA,YAAA,EAC5CT,KAAAA,CAAME,KAAAA,CAAMC,KAAAA,CAAMG,UAAAA,CAAWD,aAAaI,MAAM,CAAA;AAAA;AAAA,IAAA,CAEzD,CAAA;AAAA,EAAA,CAEF,CAAA;AAGI,MAAMC,eAAeA,CAAC;AAAA,EAAET,QAAAA;AAAAA,EAAUU,QAAAA;AAAAA,EAAU,GAAGC;AAAyB,CAAA,qBAC7EC,cAAA,CAAC,cAAA,EAAA,EACC,QAAA,EACA,GAAID,OAEHD,QAAAA,EACH;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/GenericLabel/GenericLabel.tsx"],"sourcesContent":["import { cn, cva } from '@/lib/cva';\nimport { GenericLabelProps } from './GenericLabel.types';\nimport styles from './GenericLabel.module.css';\n\nconst genericLabelVariants = cva(styles['generic-label'], {\n  variants: {\n    disabled: {\n      true: styles['generic-label_disabled'],\n    },\n  },\n});\n\nexport const GenericLabel = ({\n  disabled,\n  children,\n  className,\n  ...props\n}: GenericLabelProps) => (\n  <label\n    {...props}\n    className={cn(genericLabelVariants({ disabled }), className)}\n  >\n    {children}\n  </label>\n);\n"],"names":["genericLabelVariants","cva","styles","variants","disabled","true","GenericLabel","children","className","props","cn"],"mappings":";;;;;;;;;AAIA,MAAMA,oBAAAA,GAAuBC,0BAAAA,CAAIC,2BAAAA,CAAO,eAAe,CAAA,EAAG;AAAA,EACxDC,QAAAA,EAAU;AAAA,IACRC,QAAAA,EAAU;AAAA,MACRC,IAAAA,EAAMH,4BAAO,wBAAwB;AAAA;AACvC;AAEJ,CAAC,CAAA;AAEM,MAAMI,eAAeA,CAAC;AAAA,EAC3BF,QAAAA;AAAAA,EACAG,QAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGC;AACc,CAAA,oCAChB,OAAA,EAAA,EACC,GAAIA,KAAAA,EACJ,SAAA,EAAWC,OAAGV,oBAAAA,CAAqB;AAAA,EAAEI;AAAS,CAAC,CAAA,EAAGI,SAAS,CAAA,EAE1DD,QAAAA,EACH;;;;"}

package/dist/cjs/components/GridContainer/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/GridContainer/GridContainer.tsx"],"sourcesContent":["import { styled } from 'styled-components';\nimport {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  forwardRef,\n  ReactNode,\n} from 'react';\n\nexport type FlowOptions = 'row' | 'column' | 'row-dense' | 'column-dense';\ntype GapOptions = 'none' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'unset';\ntype ItemsOptions = 'start' | 'center' | 'end' | 'stretch';\ntype ContentOptions =\n  | 'center'\n  | 'space-between'\n  | 'space-around'\n  | 'space-evenly'\n  | 'start'\n  | 'stretch'\n  | 'end'\n  | 'left'\n  | 'right';\n\nexport interface GridContainerProps<T extends ElementType = 'div'> {\n  /** Custom component to render as */\n  component?: T;\n  /** Alignment of items along the block axis */\n  alignItems?: ItemsOptions;\n  /** Alignment of content along the block axis */\n  alignContent?: ContentOptions;\n  /** The content to display inside the grid container */\n  children?: React.ReactNode;\n  /** Gap between columns */\n  columnGap?: GapOptions;\n  /** Gap between rows and columns */\n  gap?: GapOptions;\n  /** Size of implicitly-created grid columns */\n  gridAutoColumns?: string;\n  /** How auto-placed items flow into the grid */\n  gridAutoFlow?: FlowOptions;\n  /** Size of implicitly-created grid rows */\n  gridAutoRows?: string;\n  /** Named grid areas */\n  gridTemplateAreas?: string;\n  /** Column track sizes */\n  gridTemplateColumns?: string;\n  /** Row track sizes */\n  gridTemplateRows?: string;\n  /** Shorthand for grid-template-rows, grid-template-columns, and grid-template-areas */\n  gridTemplate?: string;\n  /** Whether to use inline-grid instead of grid */\n  inline?: boolean;\n  /** Whether to collapse to single column on smaller screens */\n  isResponsive?: boolean;\n  /** Alignment of content along the inline axis */\n  justifyContent?: ContentOptions;\n  /** Alignment of items along the inline axis */\n  justifyItems?: ItemsOptions;\n  /** Gap between rows */\n  rowGap?: GapOptions;\n  /** Height of the container */\n  height?: string;\n  /** Maximum height of the container */\n  maxHeight?: string;\n  /** Minimum height of the container */\n  minHeight?: string;\n  /** Whether the container should fill the full width of its parent */\n  fillWidth?: boolean;\n  /** Maximum width of the container */\n  maxWidth?: string;\n  /** Minimum width of the container */\n  minWidth?: string;\n  /** CSS overflow behavior */\n  overflow?: string;\n}\n\ntype GridContainerPolymorphicComponent = <T extends ElementType = 'div'>(\n  props: Omit<ComponentProps<T>, keyof T> & GridContainerProps<T>\n) => ReactNode;\n\nconst _GridContainer = <T extends ElementType = 'div'>(\n  {\n    alignItems = 'stretch',\n    alignContent = 'stretch',\n    children,\n    columnGap,\n    gap,\n    gridAutoColumns,\n    gridAutoFlow,\n    gridAutoRows,\n    gridTemplateAreas,\n    gridTemplateColumns,\n    gridTemplateRows,\n    gridTemplate,\n    inline = false,\n    isResponsive = true,\n    justifyContent = 'stretch',\n    justifyItems = 'stretch',\n    rowGap,\n    height,\n    maxHeight,\n    minHeight,\n    fillWidth = true,\n    maxWidth,\n    minWidth,\n    overflow,\n    component,\n    ...props\n  }: Omit<ComponentProps<T>, keyof T> & GridContainerProps<T>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  return (\n    <Wrapper\n      as={component ?? 'div'}\n      $alignItems={alignItems}\n      $alignContent={alignContent}\n      $columnGap={columnGap}\n      $gap={gap}\n      $gridAutoColumns={gridAutoColumns}\n      $gridAutoFlow={gridAutoFlow}\n      $gridAutoRows={gridAutoRows}\n      $gridTemplateAreas={gridTemplateAreas}\n      $gridTemplateColumns={gridTemplateColumns}\n      $gridTemplateRows={gridTemplateRows}\n      $gridTemplate={gridTemplate}\n      $inline={inline}\n      $isResponsive={isResponsive}\n      $justifyContent={justifyContent}\n      $justifyItems={justifyItems}\n      $rowGap={rowGap}\n      $height={height}\n      $maxHeight={maxHeight}\n      $minHeight={minHeight}\n      $fillWidth={fillWidth}\n      $maxWidth={maxWidth}\n      $minWidth={minWidth}\n      $overflow={overflow}\n      data-testid=\"grid-container\"\n      ref={ref}\n      {...props}\n    >\n      {children}\n    </Wrapper>\n  );\n};\n\nconst Wrapper = styled.div<{\n  $alignContent: ContentOptions;\n  $alignItems: ItemsOptions;\n  $columnGap?: GapOptions;\n  $gap?: GapOptions;\n  $gridAutoColumns?: string;\n  $gridAutoFlow?: FlowOptions;\n  $gridAutoRows?: string;\n  $gridTemplateAreas?: string;\n  $gridTemplateColumns?: string;\n  $gridTemplateRows?: string;\n  $gridTemplate?: string;\n  $inline: boolean;\n  $isResponsive: boolean;\n  $justifyContent: ContentOptions;\n  $justifyItems: ItemsOptions;\n  $rowGap?: GapOptions;\n  $height?: string;\n  $maxHeight?: string;\n  $minHeight?: string;\n  $fillWidth: boolean;\n  $maxWidth?: string;\n  $minWidth?: string;\n  $overflow?: string;\n}>`\n  align-items: ${({ $alignItems = 'stretch' }) => $alignItems};\n  align-content: ${({ $alignContent = 'stretch' }) => $alignContent};\n  display: ${({ $inline }) => ($inline === true ? 'inline-grid' : 'grid')};\n  ${({ $gridAutoColumns }) =>\n    $gridAutoColumns && `grid-auto-columns: ${$gridAutoColumns}`};\n  ${({ $gridAutoFlow }) => $gridAutoFlow && `grid-auto-flow: ${$gridAutoFlow}`};\n  ${({ $gridAutoRows }) => $gridAutoRows && `grid-auto-rows: ${$gridAutoRows}`};\n  ${({ $gridTemplateAreas }) =>\n    $gridTemplateAreas && `grid-template-area: ${$gridTemplateAreas}`};\n  ${({ $gridTemplateColumns }) =>\n    $gridTemplateColumns && `grid-template-columns: ${$gridTemplateColumns}`};\n  ${({ $gridTemplateRows }) =>\n    $gridTemplateRows && `grid-template-rows: ${$gridTemplateRows}`};\n  ${({ $gridTemplate }) => $gridTemplate && `grid-template:  ${$gridTemplate}`};\n  justify-content: ${({ $justifyContent = 'stretch' }) => $justifyContent};\n  justify-items: ${({ $justifyItems = 'stretch' }) => $justifyItems};\n  ${({ theme, $gap, $columnGap, $rowGap }) => `\n    gap: ${$gap ? theme.click.gridContainer.gap[$gap] : 'inherit'};\n    ${$columnGap && `column-gap: ${theme.click.gridContainer.gap[$columnGap]}`};\n    ${$rowGap && `row-gap: ${theme.click.gridContainer.gap[$rowGap]}`};\n  `}\n\n  ${({ $fillWidth, $maxWidth, $minWidth }) => `\n    width: ${$fillWidth ? '100%' : 'auto'};\n    ${typeof $maxWidth === 'string' && `max-width: ${$maxWidth}`};\n    ${typeof $minWidth === 'string' && `min-width: ${$minWidth}`};\n  `}\n  ${({ $height, $maxHeight, $minHeight }) => `\n    ${typeof $height === 'string' && `height: ${$height}`};\n    ${typeof $maxHeight === 'string' && `max-height: ${$maxHeight}`};\n    ${typeof $minHeight === 'string' && `min-height: ${$minHeight}`};\n  `}\n  ${({ $overflow }) => `\n    ${typeof $overflow === 'string' && `overflow: ${$overflow}`};\n  `}\n\n  @media (max-width: ${({ theme }) => theme.breakpoint.sizes.md}) {\n    grid-template-columns: ${({ $isResponsive = true }) =>\n      $isResponsive === true\n        ? '1fr'\n        : ({ $gridTemplateColumns }) => $gridTemplateColumns || 'auto'};\n  }\n`;\n\nexport const GridContainer: GridContainerPolymorphicComponent =\n  forwardRef(_GridContainer);\n"],"names":["_GridContainer","alignItems","alignContent","children","columnGap","gap","gridAutoColumns","gridAutoFlow","gridAutoRows","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","gridTemplate","inline","isResponsive","justifyContent","justifyItems","rowGap","height","maxHeight","minHeight","fillWidth","maxWidth","minWidth","overflow","component","props","ref","jsx","Wrapper","styled","div","withConfig","componentId","$alignItems","$alignContent","$inline","$gridAutoColumns","$gridAutoFlow","$gridAutoRows","$gridTemplateAreas","$gridTemplateColumns","$gridTemplateRows","$gridTemplate","$justifyContent","$justifyItems","theme","$gap","$columnGap","$rowGap","click","gridContainer","$fillWidth","$maxWidth","$minWidth","$height","$maxHeight","$minHeight","$overflow","breakpoint","sizes","md","$isResponsive","GridContainer","forwardRef"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/GridContainer/GridContainer.tsx"],"sourcesContent":["import { styled } from 'styled-components';\nimport {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  forwardRef,\n  ReactNode,\n} from 'react';\n\nexport type FlowOptions = 'row' | 'column' | 'row-dense' | 'column-dense';\ntype GapOptions = 'none' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'unset';\ntype ItemsOptions = 'start' | 'center' | 'end' | 'stretch';\ntype ContentOptions =\n  | 'center'\n  | 'space-between'\n  | 'space-around'\n  | 'space-evenly'\n  | 'start'\n  | 'stretch'\n  | 'end'\n  | 'left'\n  | 'right';\n\nexport interface GridContainerProps<T extends ElementType = 'div'> {\n  /** Custom component to render as */\n  component?: T;\n  /** Alignment of items along the block axis */\n  alignItems?: ItemsOptions;\n  /** Alignment of content along the block axis */\n  alignContent?: ContentOptions;\n  /** The content to display inside the grid container */\n  children?: React.ReactNode;\n  /** Gap between columns */\n  columnGap?: GapOptions;\n  /** Gap between rows and columns */\n  gap?: GapOptions;\n  /** Size of implicitly-created grid columns */\n  gridAutoColumns?: string;\n  /** How auto-placed items flow into the grid */\n  gridAutoFlow?: FlowOptions;\n  /** Size of implicitly-created grid rows */\n  gridAutoRows?: string;\n  /** Named grid areas */\n  gridTemplateAreas?: string;\n  /** Column track sizes */\n  gridTemplateColumns?: string;\n  /** Row track sizes */\n  gridTemplateRows?: string;\n  /** Shorthand for grid-template-rows, grid-template-columns, and grid-template-areas */\n  gridTemplate?: string;\n  /** Whether to use inline-grid instead of grid */\n  inline?: boolean;\n  /** Whether to collapse to single column on smaller screens */\n  isResponsive?: boolean;\n  /** Alignment of content along the inline axis */\n  justifyContent?: ContentOptions;\n  /** Alignment of items along the inline axis */\n  justifyItems?: ItemsOptions;\n  /** Gap between rows */\n  rowGap?: GapOptions;\n  /** Height of the container */\n  height?: string;\n  /** Maximum height of the container */\n  maxHeight?: string;\n  /** Minimum height of the container */\n  minHeight?: string;\n  /** Whether the container should fill the full width of its parent */\n  fillWidth?: boolean;\n  /** Maximum width of the container */\n  maxWidth?: string;\n  /** Minimum width of the container */\n  minWidth?: string;\n  /** CSS overflow behavior */\n  overflow?: string;\n}\n\ntype GridContainerPolymorphicComponent = <T extends ElementType = 'div'>(\n  props: Omit<ComponentProps<T>, keyof GridContainerProps<T>> & GridContainerProps<T>\n) => ReactNode;\n\nconst _GridContainer = <T extends ElementType = 'div'>(\n  {\n    alignItems = 'stretch',\n    alignContent = 'stretch',\n    children,\n    columnGap,\n    gap,\n    gridAutoColumns,\n    gridAutoFlow,\n    gridAutoRows,\n    gridTemplateAreas,\n    gridTemplateColumns,\n    gridTemplateRows,\n    gridTemplate,\n    inline = false,\n    isResponsive = true,\n    justifyContent = 'stretch',\n    justifyItems = 'stretch',\n    rowGap,\n    height,\n    maxHeight,\n    minHeight,\n    fillWidth = true,\n    maxWidth,\n    minWidth,\n    overflow,\n    component,\n    ...props\n  }: Omit<ComponentProps<T>, keyof GridContainerProps<T>> & GridContainerProps<T>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  return (\n    <Wrapper\n      as={component ?? 'div'}\n      $alignItems={alignItems}\n      $alignContent={alignContent}\n      $columnGap={columnGap}\n      $gap={gap}\n      $gridAutoColumns={gridAutoColumns}\n      $gridAutoFlow={gridAutoFlow}\n      $gridAutoRows={gridAutoRows}\n      $gridTemplateAreas={gridTemplateAreas}\n      $gridTemplateColumns={gridTemplateColumns}\n      $gridTemplateRows={gridTemplateRows}\n      $gridTemplate={gridTemplate}\n      $inline={inline}\n      $isResponsive={isResponsive}\n      $justifyContent={justifyContent}\n      $justifyItems={justifyItems}\n      $rowGap={rowGap}\n      $height={height}\n      $maxHeight={maxHeight}\n      $minHeight={minHeight}\n      $fillWidth={fillWidth}\n      $maxWidth={maxWidth}\n      $minWidth={minWidth}\n      $overflow={overflow}\n      data-testid=\"grid-container\"\n      ref={ref}\n      {...props}\n    >\n      {children}\n    </Wrapper>\n  );\n};\n\nconst Wrapper = styled.div<{\n  $alignContent: ContentOptions;\n  $alignItems: ItemsOptions;\n  $columnGap?: GapOptions;\n  $gap?: GapOptions;\n  $gridAutoColumns?: string;\n  $gridAutoFlow?: FlowOptions;\n  $gridAutoRows?: string;\n  $gridTemplateAreas?: string;\n  $gridTemplateColumns?: string;\n  $gridTemplateRows?: string;\n  $gridTemplate?: string;\n  $inline: boolean;\n  $isResponsive: boolean;\n  $justifyContent: ContentOptions;\n  $justifyItems: ItemsOptions;\n  $rowGap?: GapOptions;\n  $height?: string;\n  $maxHeight?: string;\n  $minHeight?: string;\n  $fillWidth: boolean;\n  $maxWidth?: string;\n  $minWidth?: string;\n  $overflow?: string;\n}>`\n  align-items: ${({ $alignItems = 'stretch' }) => $alignItems};\n  align-content: ${({ $alignContent = 'stretch' }) => $alignContent};\n  display: ${({ $inline }) => ($inline === true ? 'inline-grid' : 'grid')};\n  ${({ $gridAutoColumns }) =>\n    $gridAutoColumns && `grid-auto-columns: ${$gridAutoColumns}`};\n  ${({ $gridAutoFlow }) => $gridAutoFlow && `grid-auto-flow: ${$gridAutoFlow}`};\n  ${({ $gridAutoRows }) => $gridAutoRows && `grid-auto-rows: ${$gridAutoRows}`};\n  ${({ $gridTemplateAreas }) =>\n    $gridTemplateAreas && `grid-template-area: ${$gridTemplateAreas}`};\n  ${({ $gridTemplateColumns }) =>\n    $gridTemplateColumns && `grid-template-columns: ${$gridTemplateColumns}`};\n  ${({ $gridTemplateRows }) =>\n    $gridTemplateRows && `grid-template-rows: ${$gridTemplateRows}`};\n  ${({ $gridTemplate }) => $gridTemplate && `grid-template:  ${$gridTemplate}`};\n  justify-content: ${({ $justifyContent = 'stretch' }) => $justifyContent};\n  justify-items: ${({ $justifyItems = 'stretch' }) => $justifyItems};\n  ${({ theme, $gap, $columnGap, $rowGap }) => `\n    gap: ${$gap ? theme.click.gridContainer.gap[$gap] : 'inherit'};\n    ${$columnGap && `column-gap: ${theme.click.gridContainer.gap[$columnGap]}`};\n    ${$rowGap && `row-gap: ${theme.click.gridContainer.gap[$rowGap]}`};\n  `}\n\n  ${({ $fillWidth, $maxWidth, $minWidth }) => `\n    width: ${$fillWidth ? '100%' : 'auto'};\n    ${typeof $maxWidth === 'string' && `max-width: ${$maxWidth}`};\n    ${typeof $minWidth === 'string' && `min-width: ${$minWidth}`};\n  `}\n  ${({ $height, $maxHeight, $minHeight }) => `\n    ${typeof $height === 'string' && `height: ${$height}`};\n    ${typeof $maxHeight === 'string' && `max-height: ${$maxHeight}`};\n    ${typeof $minHeight === 'string' && `min-height: ${$minHeight}`};\n  `}\n  ${({ $overflow }) => `\n    ${typeof $overflow === 'string' && `overflow: ${$overflow}`};\n  `}\n\n  @media (max-width: ${({ theme }) => theme.breakpoint.sizes.md}) {\n    grid-template-columns: ${({ $isResponsive = true }) =>\n      $isResponsive === true\n        ? '1fr'\n        : ({ $gridTemplateColumns }) => $gridTemplateColumns || 'auto'};\n  }\n`;\n\nexport const GridContainer: GridContainerPolymorphicComponent =\n  forwardRef(_GridContainer);\n"],"names":["_GridContainer","alignItems","alignContent","children","columnGap","gap","gridAutoColumns","gridAutoFlow","gridAutoRows","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","gridTemplate","inline","isResponsive","justifyContent","justifyItems","rowGap","height","maxHeight","minHeight","fillWidth","maxWidth","minWidth","overflow","component","props","ref","jsx","Wrapper","styled","div","withConfig","componentId","$alignItems","$alignContent","$inline","$gridAutoColumns","$gridAutoFlow","$gridAutoRows","$gridTemplateAreas","$gridTemplateColumns","$gridTemplateRows","$gridTemplate","$justifyContent","$justifyItems","theme","$gap","$columnGap","$rowGap","click","gridContainer","$fillWidth","$maxWidth","$minWidth","$height","$maxHeight","$minHeight","$overflow","breakpoint","sizes","md","$isResponsive","GridContainer","forwardRef"],"mappings":";;;;;;;;AAgFA,MAAMA,iBAAiB,CACrB;AAAA,EACEC,UAAAA,GAAa,SAAA;AAAA,EACbC,YAAAA,GAAe,SAAA;AAAA,EACfC,QAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,GAAAA;AAAAA,EACAC,eAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACAC,mBAAAA;AAAAA,EACAC,gBAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,MAAAA,GAAS,KAAA;AAAA,EACTC,YAAAA,GAAe,IAAA;AAAA,EACfC,cAAAA,GAAiB,SAAA;AAAA,EACjBC,YAAAA,GAAe,SAAA;AAAA,EACfC,MAAAA;AAAAA,EACAC,MAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,SAAAA,GAAY,IAAA;AAAA,EACZC,QAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGC;AACyE,CAAA,EAC9EC,GAAAA,KACG;AACH,EAAA,uBACEC,cAAA,CAAC,OAAA,EAAA,EACC,EAAA,EAAIH,SAAAA,IAAa,KAAA,EACjB,WAAA,EAAaxB,UAAAA,EACb,aAAA,EAAeC,YAAAA,EACf,UAAA,EAAYE,SAAAA,EACZ,IAAA,EAAMC,GAAAA,EACN,kBAAkBC,eAAAA,EAClB,aAAA,EAAeC,YAAAA,EACf,aAAA,EAAeC,YAAAA,EACf,kBAAA,EAAoBC,iBAAAA,EACpB,oBAAA,EAAsBC,mBAAAA,EACtB,iBAAA,EAAmBC,gBAAAA,EACnB,aAAA,EAAeC,YAAAA,EACf,OAAA,EAASC,QACT,aAAA,EAAeC,YAAAA,EACf,eAAA,EAAiBC,cAAAA,EACjB,aAAA,EAAeC,YAAAA,EACf,OAAA,EAASC,MAAAA,EACT,OAAA,EAASC,MAAAA,EACT,UAAA,EAAYC,SAAAA,EACZ,UAAA,EAAYC,SAAAA,EACZ,YAAYC,SAAAA,EACZ,SAAA,EAAWC,QAAAA,EACX,SAAA,EAAWC,QAAAA,EACX,SAAA,EAAWC,QAAAA,EACX,aAAA,EAAY,gBAAA,EACZ,GAAA,EACA,GAAIE,KAAAA,EAEHvB,QAAAA,EACH,CAAA;AAEJ,CAAA;AAEA,MAAM0B,OAAAA,GAAUC,uBAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,cAAA,EAAA,iBAAA,EAAA,aAAA,GAAA,EAAA,GAAA,EAAA,GAAA,EAAA,GAAA,EAAA,GAAA,EAAA,GAAA,EAAA,KAAA,mBAAA,EAAA,iBAAA,EAAA,KAAA,GAAA,EAAA,GAAA,EAAA,KAAA,qBAAA,EAAA,0BAAA,EAAA,IAAA,CAAA,EAyBT,CAAC;AAAA,EAAEC,WAAAA,GAAc;AAAU,CAAA,KAAMA,aAC/B,CAAC;AAAA,EAAEC,aAAAA,GAAgB;AAAU,CAAA,KAAMA,eACzC,CAAC;AAAA,EAAEC;AAAQ,CAAA,KAAOA,OAAAA,KAAY,IAAA,GAAO,aAAA,GAAgB,MAAA,EAC9D,CAAC;AAAA,EAAEC;AAAiB,CAAA,KACpBA,gBAAAA,IAAoB,CAAA,mBAAA,EAAsBA,gBAAgB,CAAA,CAAA,EAC1D,CAAC;AAAA,EAAEC;AAAc,CAAA,KAAMA,aAAAA,IAAiB,CAAA,gBAAA,EAAmBA,aAAa,CAAA,CAAA,EACxE,CAAC;AAAA,EAAEC;AAAc,CAAA,KAAMA,aAAAA,IAAiB,CAAA,gBAAA,EAAmBA,aAAa,CAAA,CAAA,EACxE,CAAC;AAAA,EAAEC;AAAmB,CAAA,KACtBA,kBAAAA,IAAsB,CAAA,oBAAA,EAAuBA,kBAAkB,CAAA,CAAA,EAC/D,CAAC;AAAA,EAAEC;AAAqB,CAAA,KACxBA,oBAAAA,IAAwB,CAAA,uBAAA,EAA0BA,oBAAoB,CAAA,CAAA,EACtE,CAAC;AAAA,EAAEC;AAAkB,CAAA,KACrBA,iBAAAA,IAAqB,CAAA,oBAAA,EAAuBA,iBAAiB,CAAA,CAAA,EAC7D,CAAC;AAAA,EAAEC;AAAc,CAAA,KAAMA,aAAAA,IAAiB,CAAA,gBAAA,EAAmBA,aAAa,CAAA,CAAA,EACvD,CAAC;AAAA,EAAEC,eAAAA,GAAkB;AAAU,CAAA,KAAMA,iBACvC,CAAC;AAAA,EAAEC,aAAAA,GAAgB;AAAU,CAAA,KAAMA,eAClD,CAAC;AAAA,EAAEC,KAAAA;AAAAA,EAAOC,IAAAA;AAAAA,EAAMC,UAAAA;AAAAA,EAAYC;AAAQ,CAAA,KAAM;AAAA,SAAA,EACnCF,OAAOD,KAAAA,CAAMI,KAAAA,CAAMC,cAAc9C,GAAAA,CAAI0C,IAAI,IAAI,SAAS,CAAA;AAAA,IAAA,EAC3DC,UAAAA,IAAc,eAAeF,KAAAA,CAAMI,KAAAA,CAAMC,cAAc9C,GAAAA,CAAI2C,UAAU,CAAC,CAAA,CAAE,CAAA;AAAA,IAAA,EACxEC,OAAAA,IAAW,YAAYH,KAAAA,CAAMI,KAAAA,CAAMC,cAAc9C,GAAAA,CAAI4C,OAAO,CAAC,CAAA,CAAE,CAAA;AAAA,EAAA,CAAA,EAGjE,CAAC;AAAA,EAAEG,UAAAA;AAAAA,EAAYC,SAAAA;AAAAA,EAAWC;AAAU,CAAA,KAAM;AAAA,WAAA,EACjCF,UAAAA,GAAa,SAAS,MAAM,CAAA;AAAA,IAAA,EACnC,OAAOC,SAAAA,KAAc,QAAA,IAAY,CAAA,WAAA,EAAcA,SAAS,CAAA,CAAE,CAAA;AAAA,IAAA,EAC1D,OAAOC,SAAAA,KAAc,QAAA,IAAY,CAAA,WAAA,EAAcA,SAAS,CAAA,CAAE,CAAA;AAAA,EAAA,CAAA,EAE5D,CAAC;AAAA,EAAEC,OAAAA;AAAAA,EAASC,UAAAA;AAAAA,EAAYC;AAAW,CAAA,KAAM;AAAA,IAAA,EACvC,OAAOF,OAAAA,KAAY,QAAA,IAAY,CAAA,QAAA,EAAWA,OAAO,CAAA,CAAE,CAAA;AAAA,IAAA,EACnD,OAAOC,UAAAA,KAAe,QAAA,IAAY,CAAA,YAAA,EAAeA,UAAU,CAAA,CAAE,CAAA;AAAA,IAAA,EAC7D,OAAOC,UAAAA,KAAe,QAAA,IAAY,CAAA,YAAA,EAAeA,UAAU,CAAA,CAAE,CAAA;AAAA,EAAA,CAAA,EAE/D,CAAC;AAAA,EAAEC;AAAU,CAAA,KAAM;AAAA,IAAA,EACjB,OAAOA,SAAAA,KAAc,QAAA,IAAY,CAAA,UAAA,EAAaA,SAAS,CAAA,CAAE,CAAA;AAAA,EAAA,CAAA,EAGxC,CAAC;AAAA,EAAEZ;AAAM,CAAA,KAAMA,KAAAA,CAAMa,UAAAA,CAAWC,KAAAA,CAAMC,EAAAA,EAChC,CAAC;AAAA,EAAEC,aAAAA,GAAgB;AAAK,CAAA,KAC/CA,aAAAA,KAAkB,IAAA,GACd,KAAA,GACA,CAAC;AAAA,EAAErB;AAAqB,CAAA,KAAMA,wBAAwB,MAAM,CAAA;AAI/D,MAAMsB,aAAAA,GACXC,iBAAWhE,cAAc;;;;"}

package/dist/cjs/components/Icon/Icon.css

@@ -0,0 +1,134 @@
+.svg-wrapper__fkBYp {
+  display: flex;
+  padding: 0;
+  align-items: center;
+  border-radius: var(--border-radii-full);
+  background: var(--click-icon-color-background-default);
+  color: var(--svg-icon-color, currentcolor);
+}
+
+.svg-wrapper__fkBYp svg {
+  width: var(--svg-width, var(--click-image-md-size-width));
+  height: var(--svg-height, var(--click-image-md-size-height));
+}
+
+.svg-wrapper__fkBYp :is(path[stroke], svg[stroke]:not([stroke='none']), rect[stroke], circle[fill]) {
+  stroke: var(--svg-icon-color, currentcolor);
+}
+
+.svg-wrapper__fkBYp :is(path[fill], svg[fill]:not([fill='none']), rect[fill], circle[fill]) {
+  fill: var(--svg-icon-color, currentcolor);
+}
+
+.svg-wrapper_size_xs__iu6Dh {
+  --svg-state-padding: var(--click-icon-space-xs-all);
+}
+
+.svg-wrapper_size_xs__iu6Dh svg {
+  width: var(--svg-width, var(--click-image-xs-size-width));
+  height: var(--svg-height, var(--click-image-xs-size-height));
+}
+
+.svg-wrapper_size_sm__vPYwD {
+  --svg-state-padding: var(--click-icon-space-sm-all);
+}
+
+.svg-wrapper_size_sm__vPYwD svg {
+  width: var(--svg-width, var(--click-image-sm-size-width));
+  height: var(--svg-height, var(--click-image-sm-size-height));
+}
+
+.svg-wrapper_size_md__XKE27 {
+  --svg-state-padding: var(--click-icon-space-md-all);
+}
+
+.svg-wrapper_size_md__XKE27 svg {
+  width: var(--svg-width, var(--click-image-md-size-width));
+  height: var(--svg-height, var(--click-image-md-size-height));
+}
+
+.svg-wrapper_size_lg__71xI0 {
+  --svg-state-padding: var(--click-icon-space-lg-all);
+}
+
+.svg-wrapper_size_lg__71xI0 svg {
+  width: var(--svg-width, var(--click-image-lg-size-width));
+  height: var(--svg-height, var(--click-image-lg-size-height));
+}
+
+.svg-wrapper_size_xl__tOVHR {
+  --svg-state-padding: var(--click-icon-space-xl-all);
+}
+
+.svg-wrapper_size_xl__tOVHR svg {
+  width: var(--svg-width, var(--click-image-xl-size-width));
+  height: var(--svg-height, var(--click-image-xl-size-height));
+}
+
+.svg-wrapper_size_xxl__pKrjr {
+  --svg-state-padding: var(--click-icon-space-xxl-all);
+}
+
+.svg-wrapper_size_xxl__pKrjr svg {
+  width: var(--svg-width, var(--click-image-xxl-size-width));
+  height: var(--svg-height, var(--click-image-xxl-size-height));
+}
+
+.svg-wrapper_state_success__SG0rW {
+  padding: var(--svg-state-padding, var(--click-icon-space-md-all));
+  background: var(--click-icon-color-background-success);
+  color: var(--click-icon-color-text-success);
+}
+
+.svg-wrapper_state_warning__hzZtU {
+  padding: var(--svg-state-padding, var(--click-icon-space-md-all));
+  background: var(--click-icon-color-background-warning);
+  color: var(--click-icon-color-text-warning);
+}
+
+.svg-wrapper_state_danger__eGGpB {
+  padding: var(--svg-state-padding, var(--click-icon-space-md-all));
+  background: var(--click-icon-color-background-danger);
+  color: var(--click-icon-color-text-danger);
+}
+
+.svg-wrapper_state_info__VNIFj {
+  padding: var(--svg-state-padding, var(--click-icon-space-md-all));
+  background: var(--click-icon-color-background-info);
+  color: var(--click-icon-color-text-info);
+}
+
+.svg-image__X4D5L {
+  display: flex;
+  align-items: center;
+}
+
+.svg-image_size_xs__3cjNj {
+  width: var(--click-image-xs-size-width);
+  height: var(--click-image-xs-size-height);
+}
+
+.svg-image_size_sm__2nj5- {
+  width: var(--click-image-sm-size-width);
+  height: var(--click-image-sm-size-height);
+}
+
+.svg-image_size_md__VlGV0 {
+  width: var(--click-image-md-size-width);
+  height: var(--click-image-md-size-height);
+}
+
+.svg-image_size_lg__AwS66 {
+  width: var(--click-image-lg-size-width);
+  height: var(--click-image-lg-size-height);
+}
+
+.svg-image_size_xl__cAmRV {
+  width: var(--click-image-xl-size-width);
+  height: var(--click-image-xl-size-height);
+}
+
+.svg-image_size_xxl__oaQUY {
+  width: var(--click-image-xxl-size-width);
+  height: var(--click-image-xxl-size-height);
+}

package/dist/cjs/components/Icon/Icon.module.css.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const styles = {
+	"svg-wrapper": "svg-wrapper__fkBYp",
+	"svg-wrapper_size_xs": "svg-wrapper_size_xs__iu6Dh",
+	"svg-wrapper_size_sm": "svg-wrapper_size_sm__vPYwD",
+	"svg-wrapper_size_md": "svg-wrapper_size_md__XKE27",
+	"svg-wrapper_size_lg": "svg-wrapper_size_lg__71xI0",
+	"svg-wrapper_size_xl": "svg-wrapper_size_xl__tOVHR",
+	"svg-wrapper_size_xxl": "svg-wrapper_size_xxl__pKrjr",
+	"svg-wrapper_state_success": "svg-wrapper_state_success__SG0rW",
+	"svg-wrapper_state_warning": "svg-wrapper_state_warning__hzZtU",
+	"svg-wrapper_state_danger": "svg-wrapper_state_danger__eGGpB",
+	"svg-wrapper_state_info": "svg-wrapper_state_info__VNIFj",
+	"svg-image": "svg-image__X4D5L",
+	"svg-image_size_xs": "svg-image_size_xs__3cjNj",
+	"svg-image_size_sm": "svg-image_size_sm__2nj5-",
+	"svg-image_size_md": "svg-image_size_md__VlGV0",
+	"svg-image_size_lg": "svg-image_size_lg__AwS66",
+	"svg-image_size_xl": "svg-image_size_xl__cAmRV",
+	"svg-image_size_xxl": "svg-image_size_xxl__oaQUY"
+};
+
+exports.default = styles;
+//# sourceMappingURL=Icon.module.css.cjs.map

package/dist/cjs/components/Icon/Icon.module.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/components/Icon/Icon.stories.css

@@ -0,0 +1,36 @@
+.responsive-grid__NsJwy {
+  gap: 1em;
+  grid-template-columns: repeat(6, 1fr);
+}
+
+/* stylelint-disable-next-line media-feature-range-notation -- prefix notation
+   required for browser compatibility per .browserslistrc */
+@media (max-width: 1400px) {
+  .responsive-grid__NsJwy {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+/* stylelint-disable-next-line media-feature-range-notation -- prefix notation
+   required for browser compatibility per .browserslistrc */
+@media (max-width: 1100px) {
+  .responsive-grid__NsJwy {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+/* stylelint-disable-next-line media-feature-range-notation -- prefix notation
+   required for browser compatibility per .browserslistrc */
+@media (max-width: 800px) {
+  .responsive-grid__NsJwy {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+/* stylelint-disable-next-line media-feature-range-notation -- prefix notation
+   required for browser compatibility per .browserslistrc */
+@media (max-width: 500px) {
+  .responsive-grid__NsJwy {
+    grid-template-columns: 1fr;
+  }
+}

package/dist/cjs/components/Icon/SvgImageElement.cjs

@@ -2,19 +2,37 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const styledComponents = require('styled-components');
+const jsxRuntime = require('react/jsx-runtime');
+const cva = require('../../lib/cva.cjs');
+const Icon_module = require('./Icon.module.css.cjs');
+const classVarianceAuthority = require('class-variance-authority');
 
-const SvgImageElement = styledComponents.styled.svg.withConfig({
-  componentId: "sc-1xr4se0-0"
-})(["display:flex;align-items:center;", ""], ({
-  theme,
-  $size
-}) => `
-      ${$size ? `
-        width: ${theme.click.image[$size].size.width};
-        height: ${theme.click.image[$size].size.height};
-      ` : ""}
-  `);
+const svgImageVariants = classVarianceAuthority.cva(Icon_module.default["svg-image"], {
+  variants: {
+    size: {
+      xs: Icon_module.default["svg-image_size_xs"],
+      sm: Icon_module.default["svg-image_size_sm"],
+      md: Icon_module.default["svg-image_size_md"],
+      lg: Icon_module.default["svg-image_size_lg"],
+      xl: Icon_module.default["svg-image_size_xl"],
+      xxl: Icon_module.default["svg-image_size_xxl"]
+    }
+  }
+});
+const SvgImageElement = ({
+  as: Component,
+  size,
+  className,
+  ...props
+}) => {
+  const mergedClassName = cva.cn(svgImageVariants({
+    size
+  }), className);
+  if (Component) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...props, className: mergedClassName });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { ...props, className: mergedClassName });
+};
 
 exports.SvgImageElement = SvgImageElement;
 //# sourceMappingURL=SvgImageElement.cjs.map

package/dist/cjs/components/Icon/SvgImageElement.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SvgImageElement.cjs","sources":["../../../../src/components/Icon/SvgImageElement.tsx"],"sourcesContent":["import { styled } from 'styled-components';\nimport type { AssetSize } from '@/types';\n\nexport const SvgImageElement = styled.svg<{\n  $size?: AssetSize;\n}>`\n  display: flex;\n  align-items: center;\n\n  ${({ theme, $size }) => `\n      ${\n        $size\n          ? `\n        width: ${theme.click.image[$size].size.width};\n        height: ${theme.click.image[$size].size.height};\n      `\n          : ''\n      }\n  `}\n`;\n"],"names":["SvgImageElement","styled","svg","withConfig","componentId","theme","$size","click","image","size","width","height"],"mappings":";;;;;;AAGO,MAAMA,eAAAA,GAAkBC,uBAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,kCAAA,EAAA,EAAA,GAMrC,CAAC;AAAA,EAAEC,KAAAA;AAAAA,EAAOC;AAAM,CAAA,KAAM;AAAA,MAAA,EAElBA,KAAAA,GACI;AAAA,eAAA,EACKD,MAAME,KAAAA,CAAMC,KAAAA,CAAMF,KAAK,CAAA,CAAEG,KAAKC,KAAK,CAAA;AAAA,gBAAA,EAClCL,MAAME,KAAAA,CAAMC,KAAAA,CAAMF,KAAK,CAAA,CAAEG,KAAKE,MAAM,CAAA;AAAA,MAAA,CAAA,GAE1C,EAAE;AAAA,EAAA,CAEX;;;;"}
+{"version":3,"file":"SvgImageElement.cjs","sources":["../../../../src/components/Icon/SvgImageElement.tsx"],"sourcesContent":["import { ComponentType, SVGAttributes } from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport type { AssetSize } from '@/types';\nimport styles from './Icon.module.css';\n\nconst svgImageVariants = cva(styles['svg-image'], {\n  variants: {\n    size: {\n      xs: styles['svg-image_size_xs'],\n      sm: styles['svg-image_size_sm'],\n      md: styles['svg-image_size_md'],\n      lg: styles['svg-image_size_lg'],\n      xl: styles['svg-image_size_xl'],\n      xxl: styles['svg-image_size_xxl'],\n    },\n  },\n});\n\nexport interface SvgImageElementProps extends SVGAttributes<SVGElement> {\n  as?: ComponentType<SVGAttributes<SVGElement>>;\n  size?: AssetSize;\n}\n\nexport const SvgImageElement = ({\n  as: Component,\n  size,\n  className,\n  ...props\n}: SvgImageElementProps) => {\n  const mergedClassName = cn(svgImageVariants({ size }), className);\n  if (Component) {\n    return (\n      <Component\n        {...props}\n        className={mergedClassName}\n      />\n    );\n  }\n  return (\n    <svg\n      {...props}\n      className={mergedClassName}\n    />\n  );\n};\n"],"names":["svgImageVariants","cva","styles","variants","size","xs","sm","md","lg","xl","xxl","SvgImageElement","as","Component","className","props","mergedClassName","cn","jsx"],"mappings":";;;;;;;;;AAKA,MAAMA,gBAAAA,GAAmBC,0BAAAA,CAAIC,mBAAAA,CAAO,WAAW,CAAA,EAAG;AAAA,EAChDC,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,EAAAA,EAAIH,oBAAO,mBAAmB,CAAA;AAAA,MAC9BI,EAAAA,EAAIJ,oBAAO,mBAAmB,CAAA;AAAA,MAC9BK,EAAAA,EAAIL,oBAAO,mBAAmB,CAAA;AAAA,MAC9BM,EAAAA,EAAIN,oBAAO,mBAAmB,CAAA;AAAA,MAC9BO,EAAAA,EAAIP,oBAAO,mBAAmB,CAAA;AAAA,MAC9BQ,GAAAA,EAAKR,oBAAO,oBAAoB;AAAA;AAClC;AAEJ,CAAC,CAAA;AAOM,MAAMS,kBAAkBA,CAAC;AAAA,EAC9BC,EAAAA,EAAIC,SAAAA;AAAAA,EACJT,IAAAA;AAAAA,EACAU,SAAAA;AAAAA,EACA,GAAGC;AACiB,CAAA,KAAM;AAC1B,EAAA,MAAMC,eAAAA,GAAkBC,OAAGjB,gBAAAA,CAAiB;AAAA,IAAEI;AAAAA,GAAM,GAAGU,SAAS,CAAA;AAChE,EAAA,IAAID,SAAAA,EAAW;AACb,IAAA,uBACEK,cAAA,CAAC,SAAA,EAAA,EACC,GAAIH,KAAAA,EACJ,WAAWC,eAAAA,EAAgB,CAAA;AAAA,EAGjC;AACA,EAAA,uBACEE,cAAA,CAAC,KAAA,EAAA,EACC,GAAIH,KAAAA,EACJ,WAAWC,eAAAA,EAAgB,CAAA;AAGjC;;;;"}

package/dist/cjs/components/Icon/index.cjs

@@ -1,9 +1,11 @@
+require("./Icon.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const styledComponents = require('styled-components');
+const react = require('react');
+const cva = require('../../lib/cva.cjs');
 const IconCommon = require('./IconCommon.cjs');
 const Flag = require('../Assets/Flags/system/Flag.cjs');
 const FlagsLight = require('../Assets/Flags/system/FlagsLight.cjs');
@@ -11,7 +13,32 @@ const Logo = require('../Assets/Logos/system/Logo.cjs');
 const LogosLight = require('../Assets/Logos/system/LogosLight.cjs');
 const Payment = require('../Assets/Payments/system/Payment.cjs');
 const PaymentsLight = require('../Assets/Payments/system/PaymentsLight.cjs');
+const Icon_module = require('./Icon.module.css.cjs');
+const classVarianceAuthority = require('class-variance-authority');
 
+const svgWrapperVariants = classVarianceAuthority.cva(Icon_module.default["svg-wrapper"], {
+  variants: {
+    size: {
+      xs: Icon_module.default["svg-wrapper_size_xs"],
+      sm: Icon_module.default["svg-wrapper_size_sm"],
+      md: Icon_module.default["svg-wrapper_size_md"],
+      lg: Icon_module.default["svg-wrapper_size_lg"],
+      xl: Icon_module.default["svg-wrapper_size_xl"],
+      xxl: Icon_module.default["svg-wrapper_size_xxl"]
+    },
+    state: {
+      default: "",
+      success: Icon_module.default["svg-wrapper_state_success"],
+      warning: Icon_module.default["svg-wrapper_state_warning"],
+      danger: Icon_module.default["svg-wrapper_state_danger"],
+      info: Icon_module.default["svg-wrapper_state_info"]
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    state: "default"
+  }
+});
 const SVGIcon = ({
   name,
   color,
@@ -23,43 +50,25 @@ const SVGIcon = ({
   ...props
 }) => {
   const Component = IconCommon.ICONS_MAP[name];
+  const wrapperStyle = react.useMemo(() => ({
+    ...color !== void 0 ? {
+      "--svg-icon-color": color
+    } : {},
+    ...width !== void 0 ? {
+      "--svg-width": String(width)
+    } : {},
+    ...height !== void 0 ? {
+      "--svg-height": String(height)
+    } : {}
+  }), [color, width, height]);
   if (!Component) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(SvgWrapper, { $color: color, $width: width, $height: height, $size: size, className, state, children: /* @__PURE__ */ jsxRuntime.jsx(Component, { ...props }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cva.cn(svgWrapperVariants({
+    size,
+    state
+  }), className), style: wrapperStyle, children: /* @__PURE__ */ jsxRuntime.jsx(Component, { ...props }) });
 };
-const SvgWrapper = styledComponents.styled.div.withConfig({
-  componentId: "sc-29ieut-0"
-})(["display:flex;align-items:center;", " ", ""], ({
-  theme,
-  $color = "currentColor",
-  $width,
-  $height,
-  $size
-}) => `
-    & path[stroke], & svg[stroke]:not([stroke="none"]), & rect[stroke], & circle[fill] {
-      stroke: ${$color};
-    }
-
-    & path[fill], & svg[fill]:not([fill="none"]), & rect[fill], & circle[fill] {
-      fill: ${$color};
-    }
-
-    & svg {
-      width: ${$width || theme.click.image[$size || "md"].size.width || "24px"};
-      height: ${$height || theme.click.image[$size || "md"].size.height || "24px"};
-    }
-  `, ({
-  theme,
-  $color = "currentColor",
-  state = "default",
-  $size = "md"
-}) => `
-    background: ${theme.click.icon.color.background[state]};
-    border-radius: ${theme.border.radii.full};
-    padding: ${state === "default" ? "none" : theme.click.icon.space[$size].all};
-    color: ${state === "default" ? $color : theme.click.icon.color.text[state]};
-  `);
 const SvgImage = ({
   name,
   size,

package/dist/cjs/components/Icon/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import { styled } from 'styled-components';\nimport type { AssetSize } from '@/types';\nimport { IconName, IconProps, IconState, ImageType } from './Icon.types';\nimport { ICONS_MAP } from '@/components/Icon/IconCommon';\nimport { Flag } from '@/components/Assets/Flags/system/Flag';\nimport FlagsLight from '@/components/Assets/Flags/system/FlagsLight';\nimport { FlagName } from '@/components/Assets/Flags/system/types';\nimport { Logo } from '@/components/Assets/Logos/system/Logo';\nimport LogosLight from '@/components/Assets/Logos/system/LogosLight';\nimport { LogoName } from '@/components/Assets/Logos/system/types';\nimport { Payment } from '@/components/Assets/Payments/system/Payment';\nimport { PaymentName } from '@/components/Assets/Payments/system/types';\nimport PaymentsLight from '@/components/Assets/Payments/system/PaymentsLight';\n\nconst SVGIcon = ({\n  name,\n  color,\n  width,\n  height,\n  state,\n  className,\n  size,\n  ...props\n}: IconProps) => {\n  const Component = ICONS_MAP[name];\n\n  if (!Component) {\n    return null;\n  }\n\n  return (\n    <SvgWrapper\n      $color={color}\n      $width={width}\n      $height={height}\n      $size={size}\n      className={className}\n      state={state}\n    >\n      <Component {...props} />\n    </SvgWrapper>\n  );\n};\n\nconst SvgWrapper = styled.div<{\n  $color?: string;\n  $width?: number | string;\n  $height?: number | string;\n  $size?: AssetSize;\n  state?: IconState;\n}>`\n  display: flex;\n  align-items: center;\n\n  ${({ theme, $color = 'currentColor', $width, $height, $size }) => `\n    & path[stroke], & svg[stroke]:not([stroke=\"none\"]), & rect[stroke], & circle[fill] {\n      stroke: ${$color};\n    }\n\n    & path[fill], & svg[fill]:not([fill=\"none\"]), & rect[fill], & circle[fill] {\n      fill: ${$color};\n    }\n\n    & svg {\n      width: ${$width || theme.click.image[$size || 'md'].size.width || '24px'};\n      height: ${$height || theme.click.image[$size || 'md'].size.height || '24px'};\n    }\n  `}\n\n  ${({ theme, $color = 'currentColor', state = 'default', $size = 'md' }) => `\n    background: ${theme.click.icon.color.background[state]};\n    border-radius: ${theme.border.radii.full};\n    padding: ${state === 'default' ? 'none' : theme.click.icon.space[$size].all};\n    color: ${state === 'default' ? $color : theme.click.icon.color.text[state]};\n  `}\n`;\n\nconst SvgImage = ({ name, size, theme, ...props }: ImageType) => {\n  if (Object.keys(FlagsLight).includes(name)) {\n    return (\n      <Flag\n        name={name as FlagName}\n        size={size}\n        {...props}\n      />\n    );\n  }\n  if (Object.keys(LogosLight).includes(name)) {\n    return (\n      <Logo\n        name={name as LogoName}\n        theme={theme}\n        size={size}\n        {...props}\n      />\n    );\n  }\n  if (Object.keys(PaymentsLight).includes(name)) {\n    return (\n      <Payment\n        name={name as PaymentName}\n        size={size}\n        {...props}\n      />\n    );\n  }\n  return (\n    <SVGIcon\n      name={name as IconName}\n      size={size}\n      role=\"img\"\n      aria-label={name}\n      {...props}\n    />\n  );\n};\n\nSvgImage.displayName = 'Icon';\n\nexport { SvgImage as Icon };\n"],"names":["SVGIcon","name","color","width","height","state","className","size","props","Component","ICONS_MAP","jsx","SvgWrapper","styled","div","withConfig","componentId","theme","$color","$width","$height","$size","click","image","icon","background","border","radii","full","space","all","text","SvgImage","Object","keys","FlagsLight","includes","Flag","LogosLight","Logo","PaymentsLight","Payment","displayName"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import { CSSProperties, useMemo } from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport { IconName, IconProps, ImageType } from './Icon.types';\nimport { ICONS_MAP } from '@/components/Icon/IconCommon';\nimport { Flag } from '@/components/Assets/Flags/system/Flag';\nimport FlagsLight from '@/components/Assets/Flags/system/FlagsLight';\nimport { FlagName } from '@/components/Assets/Flags/system/types';\nimport { Logo } from '@/components/Assets/Logos/system/Logo';\nimport LogosLight from '@/components/Assets/Logos/system/LogosLight';\nimport { LogoName } from '@/components/Assets/Logos/system/types';\nimport { Payment } from '@/components/Assets/Payments/system/Payment';\nimport { PaymentName } from '@/components/Assets/Payments/system/types';\nimport PaymentsLight from '@/components/Assets/Payments/system/PaymentsLight';\nimport styles from './Icon.module.css';\n\nconst svgWrapperVariants = cva(styles['svg-wrapper'], {\n  variants: {\n    size: {\n      xs: styles['svg-wrapper_size_xs'],\n      sm: styles['svg-wrapper_size_sm'],\n      md: styles['svg-wrapper_size_md'],\n      lg: styles['svg-wrapper_size_lg'],\n      xl: styles['svg-wrapper_size_xl'],\n      xxl: styles['svg-wrapper_size_xxl'],\n    },\n    state: {\n      default: '',\n      success: styles['svg-wrapper_state_success'],\n      warning: styles['svg-wrapper_state_warning'],\n      danger: styles['svg-wrapper_state_danger'],\n      info: styles['svg-wrapper_state_info'],\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    state: 'default',\n  },\n});\n\nconst SVGIcon = ({\n  name,\n  color,\n  width,\n  height,\n  state,\n  className,\n  size,\n  ...props\n}: IconProps) => {\n  const Component = ICONS_MAP[name];\n\n  const wrapperStyle = useMemo(\n    () =>\n      ({\n        ...(color !== undefined ? { '--svg-icon-color': color } : {}),\n        ...(width !== undefined ? { '--svg-width': String(width) } : {}),\n        ...(height !== undefined ? { '--svg-height': String(height) } : {}),\n      }) as CSSProperties,\n    [color, width, height]\n  );\n\n  if (!Component) {\n    return null;\n  }\n\n  return (\n    <div\n      className={cn(svgWrapperVariants({ size, state }), className)}\n      style={wrapperStyle}\n    >\n      <Component {...props} />\n    </div>\n  );\n};\n\nconst SvgImage = ({ name, size, theme, ...props }: ImageType) => {\n  if (Object.keys(FlagsLight).includes(name)) {\n    return (\n      <Flag\n        name={name as FlagName}\n        size={size}\n        {...props}\n      />\n    );\n  }\n  if (Object.keys(LogosLight).includes(name)) {\n    return (\n      <Logo\n        name={name as LogoName}\n        theme={theme}\n        size={size}\n        {...props}\n      />\n    );\n  }\n  if (Object.keys(PaymentsLight).includes(name)) {\n    return (\n      <Payment\n        name={name as PaymentName}\n        size={size}\n        {...props}\n      />\n    );\n  }\n  return (\n    <SVGIcon\n      name={name as IconName}\n      size={size}\n      role=\"img\"\n      aria-label={name}\n      {...props}\n    />\n  );\n};\n\nSvgImage.displayName = 'Icon';\n\nexport { SvgImage as Icon };\n"],"names":["svgWrapperVariants","cva","styles","variants","size","xs","sm","md","lg","xl","xxl","state","default","success","warning","danger","info","defaultVariants","SVGIcon","name","color","width","height","className","props","Component","ICONS_MAP","wrapperStyle","useMemo","undefined","String","jsx","cn","SvgImage","theme","Object","keys","FlagsLight","includes","Flag","LogosLight","Logo","PaymentsLight","Payment","displayName"],"mappings":"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"}