@clickhouse/click-ui 0.6.2-rc3 → 0.8.0

package/dist/esm/components/GridContainer/GridContainer.module.css.js

@@ -0,0 +1,8 @@
+const styles = {
+	"grid-container": "grid-container__u1yIf",
+	"grid-container_responsive": "grid-container_responsive__3-8Xh",
+	"grid-container_not-responsive": "grid-container_not-responsive__Qqhg3"
+};
+
+export { styles as default };
+//# sourceMappingURL=GridContainer.module.css.js.map

package/dist/esm/components/GridContainer/GridContainer.module.css.js.map

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

package/dist/esm/components/GridContainer/index.js

@@ -1,6 +1,8 @@
+import "./GridContainer.css";
 import { jsx } from 'react/jsx-runtime';
-import { styled } from 'styled-components';
-import { forwardRef } from 'react';
+import { forwardRef, useMemo } from 'react';
+import { cn } from '../../lib/cva.js';
+import styles from './GridContainer.module.css.js';
 
 const _GridContainer = ({
   alignItems = "stretch",
@@ -28,72 +30,70 @@ const _GridContainer = ({
   minWidth,
   overflow,
   component,
+  className,
+  style,
   ...props
 }, ref) => {
-  return /* @__PURE__ */ jsx(Wrapper, { as: component ?? "div", $alignItems: alignItems, $alignContent: alignContent, $columnGap: columnGap, $gap: gap, $gridAutoColumns: gridAutoColumns, $gridAutoFlow: gridAutoFlow, $gridAutoRows: gridAutoRows, $gridTemplateAreas: gridTemplateAreas, $gridTemplateColumns: gridTemplateColumns, $gridTemplateRows: gridTemplateRows, $gridTemplate: gridTemplate, $inline: inline, $isResponsive: isResponsive, $justifyContent: justifyContent, $justifyItems: justifyItems, $rowGap: rowGap, $height: height, $maxHeight: maxHeight, $minHeight: minHeight, $fillWidth: fillWidth, $maxWidth: maxWidth, $minWidth: minWidth, $overflow: overflow, "data-testid": "grid-container", ref, ...props, children });
+  const Component = component ?? "div";
+  const mergedStyle = useMemo(() => ({
+    "--grid-container-display": inline === true ? "inline-grid" : "grid",
+    "--grid-container-align-items": alignItems,
+    "--grid-container-align-content": alignContent,
+    "--grid-container-justify-content": justifyContent,
+    "--grid-container-justify-items": justifyItems,
+    "--grid-container-width": fillWidth ? "100%" : "auto",
+    ...gap && {
+      "--grid-container-gap": `var(--click-gridContainer-gap-${gap})`
+    },
+    ...columnGap && {
+      columnGap: `var(--click-gridContainer-gap-${columnGap})`
+    },
+    ...rowGap && {
+      rowGap: `var(--click-gridContainer-gap-${rowGap})`
+    },
+    ...gridAutoColumns && {
+      "--grid-container-auto-columns": gridAutoColumns
+    },
+    ...gridAutoFlow && {
+      "--grid-container-auto-flow": gridAutoFlow
+    },
+    ...gridAutoRows && {
+      "--grid-container-auto-rows": gridAutoRows
+    },
+    ...gridTemplateAreas && {
+      "--grid-container-template-area": gridTemplateAreas
+    },
+    ...gridTemplateColumns && {
+      "--grid-container-template-columns": gridTemplateColumns
+    },
+    ...gridTemplateRows && {
+      "--grid-container-template-rows": gridTemplateRows
+    },
+    ...gridTemplate && {
+      gridTemplate
+    },
+    ...typeof maxWidth === "string" && {
+      "--grid-container-max-width": maxWidth
+    },
+    ...typeof minWidth === "string" && {
+      "--grid-container-min-width": minWidth
+    },
+    ...typeof height === "string" && {
+      "--grid-container-height": height
+    },
+    ...typeof maxHeight === "string" && {
+      "--grid-container-max-height": maxHeight
+    },
+    ...typeof minHeight === "string" && {
+      "--grid-container-min-height": minHeight
+    },
+    ...typeof overflow === "string" && {
+      "--grid-container-overflow": overflow
+    },
+    ...style
+  }), [inline, alignItems, alignContent, justifyContent, justifyItems, fillWidth, gap, columnGap, rowGap, gridAutoColumns, gridAutoFlow, gridAutoRows, gridTemplateAreas, gridTemplateColumns, gridTemplateRows, gridTemplate, maxWidth, minWidth, height, maxHeight, minHeight, overflow, style]);
+  return /* @__PURE__ */ jsx(Component, { "data-testid": "grid-container", ref, ...props, style: mergedStyle, className: cn(styles["grid-container"], isResponsive ? styles["grid-container_responsive"] : styles["grid-container_not-responsive"], className), children });
 };
-const Wrapper = styled.div.withConfig({
-  componentId: "sc-r57kdn-0"
-})(["align-items:", ";align-content:", ";display:", ";", ";", ";", ";", ";", ";", ";", ";justify-content:", ";justify-items:", ";", " ", " ", " ", " @media (max-width:", "){grid-template-columns:", ";}"], ({
-  $alignItems = "stretch"
-}) => $alignItems, ({
-  $alignContent = "stretch"
-}) => $alignContent, ({
-  $inline
-}) => $inline === true ? "inline-grid" : "grid", ({
-  $gridAutoColumns
-}) => $gridAutoColumns && `grid-auto-columns: ${$gridAutoColumns}`, ({
-  $gridAutoFlow
-}) => $gridAutoFlow && `grid-auto-flow: ${$gridAutoFlow}`, ({
-  $gridAutoRows
-}) => $gridAutoRows && `grid-auto-rows: ${$gridAutoRows}`, ({
-  $gridTemplateAreas
-}) => $gridTemplateAreas && `grid-template-area: ${$gridTemplateAreas}`, ({
-  $gridTemplateColumns
-}) => $gridTemplateColumns && `grid-template-columns: ${$gridTemplateColumns}`, ({
-  $gridTemplateRows
-}) => $gridTemplateRows && `grid-template-rows: ${$gridTemplateRows}`, ({
-  $gridTemplate
-}) => $gridTemplate && `grid-template:  ${$gridTemplate}`, ({
-  $justifyContent = "stretch"
-}) => $justifyContent, ({
-  $justifyItems = "stretch"
-}) => $justifyItems, ({
-  theme,
-  $gap,
-  $columnGap,
-  $rowGap
-}) => `
-    gap: ${$gap ? theme.click.gridContainer.gap[$gap] : "inherit"};
-    ${$columnGap && `column-gap: ${theme.click.gridContainer.gap[$columnGap]}`};
-    ${$rowGap && `row-gap: ${theme.click.gridContainer.gap[$rowGap]}`};
-  `, ({
-  $fillWidth,
-  $maxWidth,
-  $minWidth
-}) => `
-    width: ${$fillWidth ? "100%" : "auto"};
-    ${typeof $maxWidth === "string" && `max-width: ${$maxWidth}`};
-    ${typeof $minWidth === "string" && `min-width: ${$minWidth}`};
-  `, ({
-  $height,
-  $maxHeight,
-  $minHeight
-}) => `
-    ${typeof $height === "string" && `height: ${$height}`};
-    ${typeof $maxHeight === "string" && `max-height: ${$maxHeight}`};
-    ${typeof $minHeight === "string" && `min-height: ${$minHeight}`};
-  `, ({
-  $overflow
-}) => `
-    ${typeof $overflow === "string" && `overflow: ${$overflow}`};
-  `, ({
-  theme
-}) => theme.breakpoint.sizes.md, ({
-  $isResponsive = true
-}) => $isResponsive === true ? "1fr" : ({
-  $gridTemplateColumns
-}) => $gridTemplateColumns || "auto");
 const GridContainer = forwardRef(_GridContainer);
 
 export { GridContainer };

package/dist/esm/components/GridContainer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","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","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.js","sources":["../../../../src/components/GridContainer/GridContainer.tsx"],"sourcesContent":["import {\n  ComponentProps,\n  ComponentPropsWithRef,\n  CSSProperties,\n  ElementType,\n  forwardRef,\n  ReactNode,\n  useMemo,\n} from 'react';\nimport { cn } from '@/lib/cva';\nimport styles from './GridContainer.module.css';\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    className,\n    style,\n    ...props\n  }: Omit<ComponentProps<T>, keyof GridContainerProps<T>> & GridContainerProps<T>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = component ?? 'div';\n\n  // `_GridContainer` is a real component (wrapped by `forwardRef` below); the\n  // rules-of-hooks PascalCase-name heuristic false-positives on our\n  // `_`-prefixed polymorphic-component naming convention.\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const mergedStyle = useMemo(\n    () =>\n      ({\n        '--grid-container-display': inline === true ? 'inline-grid' : 'grid',\n        '--grid-container-align-items': alignItems,\n        '--grid-container-align-content': alignContent,\n        '--grid-container-justify-content': justifyContent,\n        '--grid-container-justify-items': justifyItems,\n        '--grid-container-width': fillWidth ? '100%' : 'auto',\n        ...(gap && {\n          '--grid-container-gap': `var(--click-gridContainer-gap-${gap})`,\n        }),\n        ...(columnGap && {\n          columnGap: `var(--click-gridContainer-gap-${columnGap})`,\n        }),\n        ...(rowGap && {\n          rowGap: `var(--click-gridContainer-gap-${rowGap})`,\n        }),\n        ...(gridAutoColumns && {\n          '--grid-container-auto-columns': gridAutoColumns,\n        }),\n        ...(gridAutoFlow && { '--grid-container-auto-flow': gridAutoFlow }),\n        ...(gridAutoRows && { '--grid-container-auto-rows': gridAutoRows }),\n        ...(gridTemplateAreas && {\n          '--grid-container-template-area': gridTemplateAreas,\n        }),\n        ...(gridTemplateColumns && {\n          '--grid-container-template-columns': gridTemplateColumns,\n        }),\n        ...(gridTemplateRows && {\n          '--grid-container-template-rows': gridTemplateRows,\n        }),\n        ...(gridTemplate && { gridTemplate }),\n        ...(typeof maxWidth === 'string' && {\n          '--grid-container-max-width': maxWidth,\n        }),\n        ...(typeof minWidth === 'string' && {\n          '--grid-container-min-width': minWidth,\n        }),\n        ...(typeof height === 'string' && {\n          '--grid-container-height': height,\n        }),\n        ...(typeof maxHeight === 'string' && {\n          '--grid-container-max-height': maxHeight,\n        }),\n        ...(typeof minHeight === 'string' && {\n          '--grid-container-min-height': minHeight,\n        }),\n        ...(typeof overflow === 'string' && {\n          '--grid-container-overflow': overflow,\n        }),\n        ...style,\n      }) as CSSProperties,\n    [\n      inline,\n      alignItems,\n      alignContent,\n      justifyContent,\n      justifyItems,\n      fillWidth,\n      gap,\n      columnGap,\n      rowGap,\n      gridAutoColumns,\n      gridAutoFlow,\n      gridAutoRows,\n      gridTemplateAreas,\n      gridTemplateColumns,\n      gridTemplateRows,\n      gridTemplate,\n      maxWidth,\n      minWidth,\n      height,\n      maxHeight,\n      minHeight,\n      overflow,\n      style,\n    ]\n  );\n\n  return (\n    <Component\n      data-testid=\"grid-container\"\n      ref={ref}\n      {...props}\n      style={mergedStyle}\n      className={cn(\n        styles['grid-container'],\n        isResponsive\n          ? styles['grid-container_responsive']\n          : styles['grid-container_not-responsive'],\n        className\n      )}\n    >\n      {children}\n    </Component>\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","className","style","props","ref","Component","mergedStyle","useMemo","cn","styles","GridContainer","forwardRef"],"mappings":"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"}

package/dist/esm/components/HoverCard/index.js

@@ -30,7 +30,7 @@ const HoverCardContent = ({
   ...props
 }) => {
   const portalContainer = useResolvedPortalContainer(container);
-  return /* @__PURE__ */ jsx(RadixHoverCard.Portal, { forceMount, container: portalContainer, children: /* @__PURE__ */ jsxs(GenericPopoverMenuPanel, { as: RadixHoverCard.Content, $type: "hover-card", $showArrow: showArrow, ...props, children: [
+  return /* @__PURE__ */ jsx(RadixHoverCard.Portal, { forceMount, container: portalContainer, children: /* @__PURE__ */ jsxs(GenericPopoverMenuPanel, { as: RadixHoverCard.Content, type: "hover-card", showArrow, ...props, children: [
     showArrow && /* @__PURE__ */ jsx(Arrow, { asChild: true, as: RadixHoverCard.Arrow, width: 15, height: 10, children: /* @__PURE__ */ jsx(Popover_Arrow, {}) }),
     children
   ] }) });

package/dist/esm/components/HoverCard/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/HoverCard/HoverCard.tsx"],"sourcesContent":["import * as RadixHoverCard from '@radix-ui/react-hover-card';\nimport { ReactNode } from 'react';\nimport { Arrow, GenericPopoverMenuPanel } from '@/components/GenericMenu';\nimport { cn } from '@/lib/cva';\nimport Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';\nimport { useResolvedPortalContainer } from '@/providers/PortalContext';\nimport styles from './HoverCard.module.css';\n\nexport interface HoverCardContentProps extends RadixHoverCard.HoverCardContentProps {\n  showArrow?: boolean;\n  forceMount?: true;\n  container?: HTMLElement | null;\n  children: ReactNode;\n}\n\nexport const HoverCard = ({ children, ...props }: RadixHoverCard.HoverCardProps) => {\n  return <RadixHoverCard.Root {...props}>{children}</RadixHoverCard.Root>;\n};\n\nconst HoverCardTrigger = ({\n  children,\n  className,\n  ...props\n}: RadixHoverCard.HoverCardTriggerProps) => {\n  return (\n    <RadixHoverCard.Trigger\n      {...props}\n      className={cn(styles['hover-card__trigger'], className)}\n    >\n      {children}\n    </RadixHoverCard.Trigger>\n  );\n};\nHoverCardTrigger.displayName = 'HoverCardTrigger';\nHoverCard.Trigger = HoverCardTrigger;\n\nconst HoverCardContent = ({\n  children,\n  showArrow,\n  forceMount,\n  container,\n  ...props\n}: HoverCardContentProps) => {\n  const portalContainer = useResolvedPortalContainer(container);\n\n  return (\n    <RadixHoverCard.Portal\n      forceMount={forceMount}\n      container={portalContainer}\n    >\n      <GenericPopoverMenuPanel\n        as={RadixHoverCard.Content}\n        $type=\"hover-card\"\n        $showArrow={showArrow}\n        {...props}\n      >\n        {showArrow && (\n          <Arrow\n            asChild\n            as={RadixHoverCard.Arrow}\n            width={15}\n            height={10}\n          >\n            <Popover_Arrow />\n          </Arrow>\n        )}\n        {children}\n      </GenericPopoverMenuPanel>\n    </RadixHoverCard.Portal>\n  );\n};\nHoverCardContent.displayName = 'HoverCardContent';\nHoverCard.Content = HoverCardContent;\n"],"names":["HoverCard","children","props","HoverCardTrigger","className","cn","styles","displayName","Trigger","HoverCardContent","showArrow","forceMount","container","portalContainer","useResolvedPortalContainer","RadixHoverCard","Content","Arrow"],"mappings":";;;;;;;;AAeO,MAAMA,YAAYA,CAAC;AAAA,EAAEC,QAAAA;AAAAA,EAAU,GAAGC;AAAqC,CAAA,KAAM;AAClF,EAAA,2BAAQ,cAAA,CAAe,IAAA,EAAf,KAAwBA,OAAQD,QAAAA,EAAS,CAAA;AACnD;AAEA,MAAME,mBAAmBA,CAAC;AAAA,EACxBF,QAAAA;AAAAA,EACAG,SAAAA;AAAAA,EACA,GAAGF;AACiC,CAAA,KAAM;AAC1C,EAAA,uBACE,GAAA,CAAC,cAAA,CAAe,OAAA,EAAf,EACC,GAAIA,KAAAA,EACJ,SAAA,EAAWG,EAAAA,CAAGC,MAAAA,CAAO,qBAAqB,CAAA,EAAGF,SAAS,GAErDH,QAAAA,EACH,CAAA;AAEJ,CAAA;AACAE,gBAAAA,CAAiBI,WAAAA,GAAc,kBAAA;AAC/BP,SAAAA,CAAUQ,OAAAA,GAAUL,gBAAAA;AAEpB,MAAMM,mBAAmBA,CAAC;AAAA,EACxBR,QAAAA;AAAAA,EACAS,SAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGV;AACkB,CAAA,KAAM;AAC3B,EAAA,MAAMW,eAAAA,GAAkBC,2BAA2BF,SAAS,CAAA;AAE5D,EAAA,2BACG,cAAA,CAAe,MAAA,EAAf,EACC,UAAA,EACA,WAAWC,eAAAA,EAEX,QAAA,kBAAA,IAAA,CAAC,uBAAA,EAAA,EACC,EAAA,EAAIE,eAAeC,OAAAA,EACnB,KAAA,EAAM,cACN,UAAA,EAAYN,SAAAA,EACZ,GAAIR,KAAAA,EAEHQ,QAAAA,EAAAA;AAAAA,IAAAA,SAAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EACC,OAAA,EAAO,IAAA,EACP,EAAA,EAAIK,cAAAA,CAAeE,KAAAA,EACnB,KAAA,EAAO,EAAA,EACP,MAAA,EAAQ,EAAA,EAER,QAAA,kBAAA,GAAA,CAAC,iBAAa,CAAA,EAChB,CAAA;AAAA,IAEDhB;AAAAA,GAAAA,EACH,CAAA,EACF,CAAA;AAEJ,CAAA;AACAQ,gBAAAA,CAAiBF,WAAAA,GAAc,kBAAA;AAC/BP,SAAAA,CAAUgB,OAAAA,GAAUP,gBAAAA;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/HoverCard/HoverCard.tsx"],"sourcesContent":["import * as RadixHoverCard from '@radix-ui/react-hover-card';\nimport { ReactNode } from 'react';\nimport { Arrow, GenericPopoverMenuPanel } from '@/components/GenericMenu';\nimport { cn } from '@/lib/cva';\nimport Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';\nimport { useResolvedPortalContainer } from '@/providers/PortalContext';\nimport styles from './HoverCard.module.css';\n\nexport interface HoverCardContentProps extends RadixHoverCard.HoverCardContentProps {\n  showArrow?: boolean;\n  forceMount?: true;\n  container?: HTMLElement | null;\n  children: ReactNode;\n}\n\nexport const HoverCard = ({ children, ...props }: RadixHoverCard.HoverCardProps) => {\n  return <RadixHoverCard.Root {...props}>{children}</RadixHoverCard.Root>;\n};\n\nconst HoverCardTrigger = ({\n  children,\n  className,\n  ...props\n}: RadixHoverCard.HoverCardTriggerProps) => {\n  return (\n    <RadixHoverCard.Trigger\n      {...props}\n      className={cn(styles['hover-card__trigger'], className)}\n    >\n      {children}\n    </RadixHoverCard.Trigger>\n  );\n};\nHoverCardTrigger.displayName = 'HoverCardTrigger';\nHoverCard.Trigger = HoverCardTrigger;\n\nconst HoverCardContent = ({\n  children,\n  showArrow,\n  forceMount,\n  container,\n  ...props\n}: HoverCardContentProps) => {\n  const portalContainer = useResolvedPortalContainer(container);\n\n  return (\n    <RadixHoverCard.Portal\n      forceMount={forceMount}\n      container={portalContainer}\n    >\n      <GenericPopoverMenuPanel\n        as={RadixHoverCard.Content}\n        type=\"hover-card\"\n        showArrow={showArrow}\n        {...props}\n      >\n        {showArrow && (\n          <Arrow\n            asChild\n            as={RadixHoverCard.Arrow}\n            width={15}\n            height={10}\n          >\n            <Popover_Arrow />\n          </Arrow>\n        )}\n        {children}\n      </GenericPopoverMenuPanel>\n    </RadixHoverCard.Portal>\n  );\n};\nHoverCardContent.displayName = 'HoverCardContent';\nHoverCard.Content = HoverCardContent;\n"],"names":["HoverCard","children","props","HoverCardTrigger","className","cn","styles","displayName","Trigger","HoverCardContent","showArrow","forceMount","container","portalContainer","useResolvedPortalContainer","RadixHoverCard","Content","Arrow"],"mappings":";;;;;;;;AAeO,MAAMA,YAAYA,CAAC;AAAA,EAAEC,QAAAA;AAAAA,EAAU,GAAGC;AAAqC,CAAA,KAAM;AAClF,EAAA,2BAAQ,cAAA,CAAe,IAAA,EAAf,KAAwBA,OAAQD,QAAAA,EAAS,CAAA;AACnD;AAEA,MAAME,mBAAmBA,CAAC;AAAA,EACxBF,QAAAA;AAAAA,EACAG,SAAAA;AAAAA,EACA,GAAGF;AACiC,CAAA,KAAM;AAC1C,EAAA,uBACE,GAAA,CAAC,cAAA,CAAe,OAAA,EAAf,EACC,GAAIA,KAAAA,EACJ,SAAA,EAAWG,EAAAA,CAAGC,MAAAA,CAAO,qBAAqB,CAAA,EAAGF,SAAS,GAErDH,QAAAA,EACH,CAAA;AAEJ,CAAA;AACAE,gBAAAA,CAAiBI,WAAAA,GAAc,kBAAA;AAC/BP,SAAAA,CAAUQ,OAAAA,GAAUL,gBAAAA;AAEpB,MAAMM,mBAAmBA,CAAC;AAAA,EACxBR,QAAAA;AAAAA,EACAS,SAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGV;AACkB,CAAA,KAAM;AAC3B,EAAA,MAAMW,eAAAA,GAAkBC,2BAA2BF,SAAS,CAAA;AAE5D,EAAA,2BACG,cAAA,CAAe,MAAA,EAAf,EACC,UAAA,EACA,WAAWC,eAAAA,EAEX,QAAA,kBAAA,IAAA,CAAC,uBAAA,EAAA,EACC,EAAA,EAAIE,eAAeC,OAAAA,EACnB,IAAA,EAAK,YAAA,EACL,SAAA,EACA,GAAId,KAAAA,EAEHQ,QAAAA,EAAAA;AAAAA,IAAAA,SAAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EACC,OAAA,EAAO,IAAA,EACP,EAAA,EAAIK,cAAAA,CAAeE,KAAAA,EACnB,KAAA,EAAO,EAAA,EACP,MAAA,EAAQ,EAAA,EAER,QAAA,kBAAA,GAAA,CAAC,iBAAa,CAAA,EAChB,CAAA;AAAA,IAEDhB;AAAAA,GAAAA,EACH,CAAA,EACF,CAAA;AAEJ,CAAA;AACAQ,gBAAAA,CAAiBF,WAAAA,GAAc,kBAAA;AAC/BP,SAAAA,CAAUgB,OAAAA,GAAUP,gBAAAA;;;;"}

package/dist/esm/components/IconButton/index.js

@@ -28,6 +28,7 @@ const iconButtonVariants = cva(styles.iconbutton, {
 });
 const IconButton = forwardRef(({
   type = "primary",
+  htmlType,
   icon,
   size,
   disabled,
@@ -35,7 +36,7 @@ const IconButton = forwardRef(({
   ...props
 }, ref) => {
   const iconName = icon ? icon.toString() : "unknown icon";
-  return /* @__PURE__ */ jsx("button", { ...props, className: cn(iconButtonVariants({
+  return /* @__PURE__ */ jsx("button", { ...props, type: htmlType, className: cn(iconButtonVariants({
     type,
     size
   }), className), disabled, ref, role: "button", "aria-label": iconName, children: /* @__PURE__ */ jsx(SvgImage, { name: icon, size: "sm" }) });

package/dist/esm/components/IconButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { Icon } from '@/components/Icon';\nimport { cn, cva } from '@/lib/cva';\nimport { IconButtonProps } from './IconButton.types';\nimport styles from './IconButton.module.css';\n\nconst iconButtonVariants = cva(styles.iconbutton, {\n  variants: {\n    type: {\n      primary: styles['iconbutton_type_primary'],\n      secondary: styles['iconbutton_type_secondary'],\n      ghost: styles['iconbutton_type_ghost'],\n      danger: styles['iconbutton_type_danger'],\n      info: styles['iconbutton_type_info'],\n    },\n    size: {\n      default: '',\n      sm: styles['iconbutton_size_sm'],\n      xs: styles['iconbutton_size_xs'],\n    },\n  },\n  defaultVariants: {\n    type: 'primary',\n    size: 'default',\n  },\n});\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  ({ type = 'primary', icon, size, disabled, className, ...props }, ref) => {\n    const iconName = icon ? icon.toString() : 'unknown icon';\n\n    return (\n      <button\n        {...props}\n        className={cn(iconButtonVariants({ type, size }), className)}\n        disabled={disabled}\n        ref={ref}\n        role=\"button\"\n        aria-label={iconName}\n      >\n        <Icon\n          name={icon}\n          size=\"sm\"\n        />\n      </button>\n    );\n  }\n);\n\nIconButton.displayName = 'IconButton';\n"],"names":["iconButtonVariants","cva","styles","iconbutton","variants","type","primary","secondary","ghost","danger","info","size","default","sm","xs","defaultVariants","IconButton","forwardRef","icon","disabled","className","props","ref","iconName","toString","cn","Icon","displayName"],"mappings":";;;;;;;AAMA,MAAMA,kBAAAA,GAAqBC,GAAAA,CAAIC,MAAAA,CAAOC,UAAAA,EAAY;AAAA,EAChDC,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,OAAAA,EAASJ,OAAO,yBAAyB,CAAA;AAAA,MACzCK,SAAAA,EAAWL,OAAO,2BAA2B,CAAA;AAAA,MAC7CM,KAAAA,EAAON,OAAO,uBAAuB,CAAA;AAAA,MACrCO,MAAAA,EAAQP,OAAO,wBAAwB,CAAA;AAAA,MACvCQ,IAAAA,EAAMR,OAAO,sBAAsB;AAAA,KACrC;AAAA,IACAS,IAAAA,EAAM;AAAA,MACJC,OAAAA,EAAS,EAAA;AAAA,MACTC,EAAAA,EAAIX,OAAO,oBAAoB,CAAA;AAAA,MAC/BY,EAAAA,EAAIZ,OAAO,oBAAoB;AAAA;AACjC,GACF;AAAA,EACAa,eAAAA,EAAiB;AAAA,IACfV,IAAAA,EAAM,SAAA;AAAA,IACNM,IAAAA,EAAM;AAAA;AAEV,CAAC,CAAA;AAEM,MAAMK,UAAAA,GAAaC,WACxB,CAAC;AAAA,EAAEZ,IAAAA,GAAO,SAAA;AAAA,EAAWa,IAAAA;AAAAA,EAAMP,IAAAA;AAAAA,EAAMQ,QAAAA;AAAAA,EAAUC,SAAAA;AAAAA,EAAW,GAAGC;AAAM,CAAA,EAAGC,GAAAA,KAAQ;AACxE,EAAA,MAAMC,QAAAA,GAAWL,IAAAA,GAAOA,IAAAA,CAAKM,QAAAA,EAAS,GAAI,cAAA;AAE1C,EAAA,2BACG,QAAA,EAAA,EACC,GAAIH,KAAAA,EACJ,SAAA,EAAWI,GAAGzB,kBAAAA,CAAmB;AAAA,IAAEK,IAAAA;AAAAA,IAAMM;AAAAA,GAAM,CAAA,EAAGS,SAAS,CAAA,EAC3D,QAAA,EACA,KACA,IAAA,EAAK,QAAA,EACL,YAAA,EAAYG,QAAAA,EAEZ,8BAACG,QAAA,EAAA,EACC,IAAA,EAAMR,IAAAA,EACN,IAAA,EAAK,MAAI,CAAA,EAEb,CAAA;AAEJ,CACF;AAEAF,UAAAA,CAAWW,WAAAA,GAAc,YAAA;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { Icon } from '@/components/Icon';\nimport { cn, cva } from '@/lib/cva';\nimport { IconButtonProps } from './IconButton.types';\nimport styles from './IconButton.module.css';\n\nconst iconButtonVariants = cva(styles.iconbutton, {\n  variants: {\n    type: {\n      primary: styles['iconbutton_type_primary'],\n      secondary: styles['iconbutton_type_secondary'],\n      ghost: styles['iconbutton_type_ghost'],\n      danger: styles['iconbutton_type_danger'],\n      info: styles['iconbutton_type_info'],\n    },\n    size: {\n      default: '',\n      sm: styles['iconbutton_size_sm'],\n      xs: styles['iconbutton_size_xs'],\n    },\n  },\n  defaultVariants: {\n    type: 'primary',\n    size: 'default',\n  },\n});\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  ({ type = 'primary', htmlType, icon, size, disabled, className, ...props }, ref) => {\n    const iconName = icon ? icon.toString() : 'unknown icon';\n\n    return (\n      <button\n        {...props}\n        type={htmlType}\n        className={cn(iconButtonVariants({ type, size }), className)}\n        disabled={disabled}\n        ref={ref}\n        role=\"button\"\n        aria-label={iconName}\n      >\n        <Icon\n          name={icon}\n          size=\"sm\"\n        />\n      </button>\n    );\n  }\n);\n\nIconButton.displayName = 'IconButton';\n"],"names":["iconButtonVariants","cva","styles","iconbutton","variants","type","primary","secondary","ghost","danger","info","size","default","sm","xs","defaultVariants","IconButton","forwardRef","htmlType","icon","disabled","className","props","ref","iconName","toString","cn","Icon","displayName"],"mappings":";;;;;;;AAMA,MAAMA,kBAAAA,GAAqBC,GAAAA,CAAIC,MAAAA,CAAOC,UAAAA,EAAY;AAAA,EAChDC,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,OAAAA,EAASJ,OAAO,yBAAyB,CAAA;AAAA,MACzCK,SAAAA,EAAWL,OAAO,2BAA2B,CAAA;AAAA,MAC7CM,KAAAA,EAAON,OAAO,uBAAuB,CAAA;AAAA,MACrCO,MAAAA,EAAQP,OAAO,wBAAwB,CAAA;AAAA,MACvCQ,IAAAA,EAAMR,OAAO,sBAAsB;AAAA,KACrC;AAAA,IACAS,IAAAA,EAAM;AAAA,MACJC,OAAAA,EAAS,EAAA;AAAA,MACTC,EAAAA,EAAIX,OAAO,oBAAoB,CAAA;AAAA,MAC/BY,EAAAA,EAAIZ,OAAO,oBAAoB;AAAA;AACjC,GACF;AAAA,EACAa,eAAAA,EAAiB;AAAA,IACfV,IAAAA,EAAM,SAAA;AAAA,IACNM,IAAAA,EAAM;AAAA;AAEV,CAAC,CAAA;AAEM,MAAMK,UAAAA,GAAaC,WACxB,CAAC;AAAA,EAAEZ,IAAAA,GAAO,SAAA;AAAA,EAAWa,QAAAA;AAAAA,EAAUC,IAAAA;AAAAA,EAAMR,IAAAA;AAAAA,EAAMS,QAAAA;AAAAA,EAAUC,SAAAA;AAAAA,EAAW,GAAGC;AAAM,CAAA,EAAGC,GAAAA,KAAQ;AAClF,EAAA,MAAMC,QAAAA,GAAWL,IAAAA,GAAOA,IAAAA,CAAKM,QAAAA,EAAS,GAAI,cAAA;AAE1C,EAAA,uBACE,GAAA,CAAC,eACKH,KAAAA,EACJ,MAAMJ,QAAAA,EACN,SAAA,EAAWQ,GAAG1B,kBAAAA,CAAmB;AAAA,IAAEK,IAAAA;AAAAA,IAAMM;AAAAA,GAAM,CAAA,EAAGU,SAAS,CAAA,EAC3D,QAAA,EACA,KACA,IAAA,EAAK,QAAA,EACL,YAAA,EAAYG,QAAAA,EAEZ,8BAACG,QAAA,EAAA,EACC,IAAA,EAAMR,IAAAA,EACN,IAAA,EAAK,MAAI,CAAA,EAEb,CAAA;AAEJ,CACF;AAEAH,UAAAA,CAAWY,WAAAA,GAAc,YAAA;;;;"}

package/dist/esm/components/InputWrapper/InputWrapper.css

@@ -0,0 +1,221 @@
+/* Design tokens use camelCase segments (e.g. fieldText). */
+/* stylelint-disable custom-property-pattern */
+/* The original styled-components used vendor-prefixed autofill/appearance
+   overrides and native resize; `:autofill` overrides require `-webkit-box-shadow`
+   specifically, so these are preserved verbatim for byte-for-byte parity. */
+/* stylelint-disable property-no-vendor-prefix */
+/* stylelint-disable plugin/no-unsupported-browser-features */
+/* The disabled-state rules intentionally come last to win the cascade, matching
+   the styled-components source order; this trips no-descending-specificity. */
+/* stylelint-disable no-descending-specificity */
+.wrapper__WHwoB {
+  display: flex;
+  width: inherit;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--click-field-space-gap);
+  border: 1px solid var(--click-field-color-stroke-default);
+  border-radius: var(--click-field-radii-all);
+  background: var(--click-field-color-background-default);
+  color: var(--click-field-color-text-default);
+  font: var(--click-field-typography-fieldText-default);
+}
+
+.wrapper__WHwoB span:first-of-type {
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.wrapper__WHwoB *:autofill,
+.wrapper__WHwoB *:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 50vh var(--click-field-color-background-default) inset;
+  caret-color: var(--click-field-color-text-default);
+  -webkit-text-fill-color: var(--click-field-color-text-default);
+}
+
+.wrapper__WHwoB:hover {
+  border: 1px solid var(--click-field-color-stroke-hover);
+  background: var(--click-field-color-background-hover);
+  color: var(--click-field-color-text-hover);
+}
+
+.wrapper__WHwoB:hover *:autofill,
+.wrapper__WHwoB:hover *:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 50vh var(--click-field-color-background-hover) inset;
+  caret-color: var(--click-field-color-text-hover);
+  -webkit-text-fill-color: var(--click-field-color-text-hover);
+}
+
+.wrapper_resize_vertical__43Ah9,
+.wrapper_resize_horizontal__Cgy4t,
+.wrapper_resize_both__WKn55 {
+  overflow: auto;
+}
+
+.wrapper_resize_vertical__43Ah9 {
+  resize: vertical;
+}
+
+.wrapper_resize_horizontal__Cgy4t {
+  resize: horizontal;
+}
+
+.wrapper_resize_both__WKn55 {
+  resize: both;
+}
+
+.wrapper__WHwoB:not(.wrapper_error__SB99e):focus-within,
+.wrapper__WHwoB:not(.wrapper_error__SB99e)[data-state='open'] {
+  border: 1px solid var(--click-field-color-stroke-active);
+  background: var(--click-field-color-background-active);
+  color: var(--click-field-color-text-active);
+  font: var(--click-field-typography-fieldText-active);
+}
+
+.wrapper__WHwoB:not(.wrapper_error__SB99e):focus-within *:autofill,
+.wrapper__WHwoB:not(.wrapper_error__SB99e):focus-within *:-webkit-autofill,
+.wrapper__WHwoB:not(.wrapper_error__SB99e)[data-state='open'] *:autofill,
+.wrapper__WHwoB:not(.wrapper_error__SB99e)[data-state='open'] *:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 50vh var(--click-field-color-background-active) inset;
+  caret-color: var(--click-field-color-text-active);
+  -webkit-text-fill-color: var(--click-field-color-text-active);
+}
+
+.wrapper_error__SB99e {
+  border: 1px solid var(--click-field-color-stroke-error);
+  background: var(--click-field-color-background-active);
+  color: var(--click-field-color-text-error);
+  font: var(--click-field-typography-fieldText-error);
+}
+
+.wrapper_error__SB99e *:autofill,
+.wrapper_error__SB99e *:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 50vh var(--click-field-color-background-error) inset;
+  caret-color: var(--click-field-color-text-error);
+  -webkit-text-fill-color: var(--click-field-color-text-error);
+}
+
+.wrapper_error__SB99e:hover {
+  border: 1px solid var(--click-field-color-stroke-error);
+  color: var(--click-field-color-text-error);
+}
+
+.wrapper_error__SB99e:hover *:autofill,
+.wrapper_error__SB99e:hover *:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 50vh var(--click-field-color-background-error) inset;
+  caret-color: var(--click-field-color-text-error);
+  -webkit-text-fill-color: var(--click-field-color-text-error);
+}
+
+.wrapper__WHwoB:disabled,
+.wrapper__WHwoB.disabled__vXh63 {
+  border: 1px solid var(--click-field-color-stroke-disabled);
+  background: var(--click-field-color-background-disabled);
+  color: var(--click-field-color-text-disabled);
+  font: var(--click-field-typography-fieldText-disabled);
+}
+
+.wrapper__WHwoB:disabled *:autofill,
+.wrapper__WHwoB:disabled *:-webkit-autofill,
+.wrapper__WHwoB.disabled__vXh63 *:autofill,
+.wrapper__WHwoB.disabled__vXh63 *:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 50vh var(--click-field-color-background-disabled) inset;
+  caret-color: var(--click-field-color-text-disabled);
+  -webkit-text-fill-color: var(--click-field-color-text-disabled);
+}
+
+.input__0fhe3 {
+  width: 100%;
+  padding: var(--click-field-space-y) 0;
+  padding-right: var(--click-field-space-x);
+  padding-left: var(--click-field-space-x);
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  outline: none;
+}
+
+.input_has-start-content__JXy30 {
+  padding-left: 0;
+}
+
+.input_has-end-content__i10tl {
+  padding-right: 0;
+}
+
+.input__0fhe3::placeholder {
+  color: var(--click-field-color-placeholder-default);
+}
+
+.input__0fhe3:disabled::placeholder,
+.input__0fhe3.disabled__vXh63::placeholder {
+  color: var(--click-field-color-placeholder-disabled);
+}
+
+.number-input_hide-controls__sbWrG::-webkit-outer-spin-button,
+.number-input_hide-controls__sbWrG::-webkit-inner-spin-button {
+  margin: 0;
+  -webkit-appearance: none;
+}
+
+.number-input_hide-controls__sbWrG {
+  -moz-appearance: textfield;
+}
+
+.textarea__y-Il1 {
+  width: 100%;
+  padding: var(--click-field-space-y) var(--click-field-space-x);
+  align-self: stretch;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  outline: none;
+  resize: none;
+}
+
+.textarea__y-Il1::placeholder {
+  color: var(--click-field-color-placeholder-default);
+}
+
+.icon-button__b4bWG {
+  padding: var(--click-field-space-y) 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  outline: none;
+}
+
+.icon-button__b4bWG:not(:disabled) {
+  cursor: pointer;
+}
+
+.icon-wrapper__wvaLj:first-of-type {
+  padding-left: var(--click-field-space-gap);
+}
+
+.icon-wrapper__wvaLj:last-of-type {
+  padding-right: var(--click-field-space-x);
+}
+
+.start-content__2ejJV {
+  display: flex;
+  padding-left: var(--click-field-space-x);
+  align-items: center;
+  align-self: stretch;
+  gap: var(--click-field-space-gap);
+  cursor: text;
+}
+
+.end-content__xNk8- {
+  display: flex;
+  padding-right: var(--click-field-space-x);
+  flex-shrink: 0;
+  align-items: center;
+  align-self: stretch;
+  gap: var(--click-field-space-gap);
+  white-space: nowrap;
+}

package/dist/esm/components/InputWrapper/InputWrapper.module.css.js

@@ -0,0 +1,27 @@
+const wrapper = "wrapper__WHwoB";
+const wrapper_resize_vertical = "wrapper_resize_vertical__43Ah9";
+const wrapper_resize_horizontal = "wrapper_resize_horizontal__Cgy4t";
+const wrapper_resize_both = "wrapper_resize_both__WKn55";
+const wrapper_error = "wrapper_error__SB99e";
+const disabled = "disabled__vXh63";
+const input = "input__0fhe3";
+const textarea = "textarea__y-Il1";
+const styles = {
+	wrapper: wrapper,
+	wrapper_resize_vertical: wrapper_resize_vertical,
+	wrapper_resize_horizontal: wrapper_resize_horizontal,
+	wrapper_resize_both: wrapper_resize_both,
+	wrapper_error: wrapper_error,
+	disabled: disabled,
+	input: input,
+	"input_has-start-content": "input_has-start-content__JXy30",
+	"input_has-end-content": "input_has-end-content__i10tl",
+	"number-input_hide-controls": "number-input_hide-controls__sbWrG",
+	textarea: textarea,
+	"icon-button": "icon-button__b4bWG",
+	"start-content": "start-content__2ejJV",
+	"end-content": "end-content__xNk8-"
+};
+
+export { styles as default, disabled, input, textarea, wrapper, wrapper_error, wrapper_resize_both, wrapper_resize_horizontal, wrapper_resize_vertical };
+//# sourceMappingURL=InputWrapper.module.css.js.map

package/dist/esm/components/InputWrapper/InputWrapper.module.css.js.map

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