@clickhouse/click-ui 0.7.0 → 0.8.0

package/dist/cjs/components/GridContainer/GridContainer.css

@@ -0,0 +1,71 @@
+.grid-container__u1yIf {
+  /* These custom properties are only emitted inline when the matching prop is
+     set (grid-auto-columns, grid-auto-flow, grid-auto-rows, grid-template-area,
+     grid-template-columns, grid-template-rows, max-width, min-width, height,
+     max-height, min-height, overflow). Custom properties inherit by default, so
+     without this reset a nested GridContainer would inherit an ancestor's
+     value. Resetting to `initial` makes each consuming declaration fall back to
+     its own default (the second arg of `var()`) when the prop is unset,
+     reproducing the per-instance scoping that styled-components gave for free.
+     `--grid-container-gap` is included for the same reason: without resetting it
+     to `initial`, a nested GridContainer would inherit an ancestor's gap token
+     instead of letting `var(--grid-container-gap, inherit)` fall back to
+     `inherit` per-element (the styled-components source used a direct
+     `gap: inherit`). `column-gap`/`row-gap` are not in this set: they are
+     emitted inline as real longhand properties (not custom properties), so
+     there are no `--grid-container-*-gap` vars to reset. */
+  --grid-container-gap: initial;
+  --grid-container-auto-columns: initial;
+  --grid-container-auto-flow: initial;
+  --grid-container-auto-rows: initial;
+  --grid-container-template-area: initial;
+  --grid-container-template-columns: initial;
+  --grid-container-template-rows: initial;
+  --grid-container-max-width: initial;
+  --grid-container-min-width: initial;
+  --grid-container-height: initial;
+  --grid-container-max-height: initial;
+  --grid-container-min-height: initial;
+  --grid-container-overflow: initial;
+  display: var(--grid-container-display, grid);
+  width: var(--grid-container-width, 100%);
+  min-width: var(--grid-container-min-width);
+  max-width: var(--grid-container-max-width);
+  height: var(--grid-container-height);
+  min-height: var(--grid-container-min-height);
+  max-height: var(--grid-container-max-height);
+  overflow: var(--grid-container-overflow);
+  /* stylelint-disable declaration-block-no-redundant-longhand-properties -- align/justify axes are set independently from distinct props, so the place-content/place-items shorthands can't be used */
+  justify-content: var(--grid-container-justify-content, stretch);
+  align-items: var(--grid-container-align-items, stretch);
+  align-content: var(--grid-container-align-content, stretch);
+  /* `gap` is always emitted; `column-gap`/`row-gap` are emitted inline (as real
+     longhands) only when their props are set, so they override this shorthand
+     just like the styled-components source did — and stay absent otherwise. */
+  gap: var(--grid-container-gap, inherit);
+  grid-template-columns: var(--grid-container-template-columns);
+  grid-template-rows: var(--grid-container-template-rows);
+  grid-auto-columns: var(--grid-container-auto-columns);
+  grid-auto-flow: var(--grid-container-auto-flow);
+  grid-auto-rows: var(--grid-container-auto-rows);
+  /* stylelint-disable-next-line property-no-unknown -- the styled-components original emitted `grid-template-area` (singular, invalid); preserved verbatim for byte-for-byte parity */
+  grid-template-area: var(--grid-container-template-area);
+  justify-items: var(--grid-container-justify-items, stretch);
+  /* stylelint-enable declaration-block-no-redundant-longhand-properties */
+}
+
+/* stylelint-disable-next-line media-feature-range-notation -- prefix notation required for browser compatibility per .browserslistrc */
+@media (max-width: 768px) {
+  .grid-container_responsive__3-8Xh {
+    grid-template-columns: 1fr;
+  }
+
+  /* When NOT responsive, the styled-components source applied
+     `grid-template-columns: ${$gridTemplateColumns || 'auto'}` at the md
+     breakpoint — i.e. the explicit template when one was passed, otherwise
+     `auto`. The `--grid-container-template-columns` var is set inline only when
+     the prop is provided, so the `auto` fallback reproduces that exactly. */
+  .grid-container_not-responsive__Qqhg3 {
+    grid-template-columns: var(--grid-container-template-columns, auto);
+  }
+}

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

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const styles = {
+	"grid-container": "grid-container__u1yIf",
+	"grid-container_responsive": "grid-container_responsive__3-8Xh",
+	"grid-container_not-responsive": "grid-container_not-responsive__Qqhg3"
+};
+
+exports.default = styles;
+//# sourceMappingURL=GridContainer.module.css.cjs.map

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

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

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

@@ -1,10 +1,12 @@
+require("./GridContainer.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 GridContainer_module = require('./GridContainer.module.css.cjs');
 
 const _GridContainer = ({
   alignItems = "stretch",
@@ -32,72 +34,70 @@ const _GridContainer = ({
   minWidth,
   overflow,
   component,
+  className,
+  style,
   ...props
 }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.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 = react.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__ */ jsxRuntime.jsx(Component, { "data-testid": "grid-container", ref, ...props, style: mergedStyle, className: cva.cn(GridContainer_module.default["grid-container"], isResponsive ? GridContainer_module.default["grid-container_responsive"] : GridContainer_module.default["grid-container_not-responsive"], className), children });
 };
-const Wrapper = styledComponents.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 = react.forwardRef(_GridContainer);
 
 exports.GridContainer = GridContainer;

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 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":"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"}
+{"version":3,"file":"index.cjs","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","jsx","cn","styles","GridContainer","forwardRef"],"mappings":"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"}

package/dist/cjs/components/MiddleTruncator/MiddleTruncator.css

@@ -0,0 +1,22 @@
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. fileUpload) */
+.truncator__j4dr4 {
+  display: flex;
+  width: auto;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--click-fileUpload-color-title-default);
+  font: var(--click-fileUpload-typography-description-default);
+  white-space: nowrap;
+}
+
+.truncator__start__Rwx4e {
+  overflow: hidden;
+  flex-shrink: 1;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.truncator__end__CSANk {
+  flex-shrink: 0;
+  white-space: nowrap;
+}

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

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const truncator = "truncator__j4dr4";
+const truncator__start = "truncator__start__Rwx4e";
+const truncator__end = "truncator__end__CSANk";
+const styles = {
+	truncator: truncator,
+	truncator__start: truncator__start,
+	truncator__end: truncator__end
+};
+
+exports.default = styles;
+exports.truncator = truncator;
+exports.truncator__end = truncator__end;
+exports.truncator__start = truncator__start;
+//# sourceMappingURL=MiddleTruncator.module.css.cjs.map

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

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

package/dist/cjs/components/MiddleTruncator/index.cjs

@@ -1,32 +1,20 @@
+require("./MiddleTruncator.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const styledComponents = require('styled-components');
+const MiddleTruncator_module = require('./MiddleTruncator.module.css.cjs');
 
-const TruncatorContainer = styledComponents.styled.div.withConfig({
-  componentId: "sc-7pk7dh-0"
-})(["display:flex;width:auto;min-width:0;overflow:hidden;white-space:nowrap;font:", ";color:", ";"], ({
-  theme
-}) => theme.click.fileUpload.typography.description.default, ({
-  theme
-}) => theme.click.fileUpload.color.title.default);
-const TruncatorStart = styledComponents.styled.span.withConfig({
-  componentId: "sc-7pk7dh-1"
-})(["flex-shrink:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
-const TruncatorEnd = styledComponents.styled.span.withConfig({
-  componentId: "sc-7pk7dh-2"
-})(["flex-shrink:0;white-space:nowrap;"]);
 const MiddleTruncator = ({
   text,
   trailingChars = 10
 }) => {
   const startText = text.slice(0, -trailingChars);
   const endText = text.slice(-trailingChars);
-  return /* @__PURE__ */ jsxRuntime.jsxs(TruncatorContainer, { title: text, "aria-label": text, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(TruncatorStart, { children: startText }),
-    /* @__PURE__ */ jsxRuntime.jsx(TruncatorEnd, { children: endText })
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MiddleTruncator_module.default.truncator, title: text, "aria-label": text, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: MiddleTruncator_module.default.truncator__start, children: startText }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: MiddleTruncator_module.default.truncator__end, children: endText })
   ] });
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/MiddleTruncator/MiddleTruncator.tsx"],"sourcesContent":["import { styled } from 'styled-components';\n\nconst TruncatorContainer = styled.div`\n  display: flex;\n  width: auto;\n  min-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  font: ${({ theme }) => theme.click.fileUpload.typography.description.default};\n  color: ${({ theme }) => theme.click.fileUpload.color.title.default};\n`;\n\nconst TruncatorStart = styled.span`\n  flex-shrink: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n\nconst TruncatorEnd = styled.span`\n  flex-shrink: 0;\n  white-space: nowrap;\n`;\n\nexport const MiddleTruncator = ({\n  text,\n  trailingChars = 10,\n}: {\n  text: string;\n  trailingChars?: number;\n}) => {\n  const startText = text.slice(0, -trailingChars);\n  const endText = text.slice(-trailingChars);\n\n  return (\n    <TruncatorContainer\n      title={text}\n      aria-label={text}\n    >\n      <TruncatorStart>{startText}</TruncatorStart>\n      <TruncatorEnd>{endText}</TruncatorEnd>\n    </TruncatorContainer>\n  );\n};\n"],"names":["TruncatorContainer","styled","div","withConfig","componentId","theme","click","fileUpload","typography","description","default","color","title","TruncatorStart","span","TruncatorEnd","MiddleTruncator","text","trailingChars","startText","slice","endText","jsxs","jsx"],"mappings":";;;;;;;AAEA,MAAMA,kBAAAA,GAAqBC,uBAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,EAAA,CAAA,8EAAA,EAAA,SAAA,EAAA,GAAA,GAM3B,CAAC;AAAA,EAAEC;AAAM,CAAA,KAAMA,MAAMC,KAAAA,CAAMC,UAAAA,CAAWC,UAAAA,CAAWC,WAAAA,CAAYC,SAC5D,CAAC;AAAA,EAAEL;AAAM,CAAA,KAAMA,KAAAA,CAAMC,KAAAA,CAAMC,UAAAA,CAAWI,KAAAA,CAAMC,MAAMF,OAAO,CAAA;AAGpE,MAAMG,cAAAA,GAAiBZ,uBAAAA,CAAOa,IAAAA,CAAIX,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,0EAAA,CAAA,CAAA;AAOlC,MAAMW,YAAAA,GAAed,uBAAAA,CAAOa,IAAAA,CAAIX,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,mCAAA,CAAA,CAAA;AAKzB,MAAMY,kBAAkBA,CAAC;AAAA,EAC9BC,IAAAA;AAAAA,EACAC,aAAAA,GAAgB;AAIlB,CAAA,KAAM;AACJ,EAAA,MAAMC,SAAAA,GAAYF,IAAAA,CAAKG,KAAAA,CAAM,CAAA,EAAG,CAACF,aAAa,CAAA;AAC9C,EAAA,MAAMG,OAAAA,GAAUJ,IAAAA,CAAKG,KAAAA,CAAM,CAACF,aAAa,CAAA;AAEzC,EAAA,uBACEI,eAAA,CAAC,kBAAA,EAAA,EACC,KAAA,EAAOL,IAAAA,EACP,cAAYA,IAAAA,EAEZ,QAAA,EAAA;AAAA,oBAAAM,cAAA,CAAC,kBAAgBJ,QAAAA,EAAAA,SAAAA,EAAU,CAAA;AAAA,oBAC3BI,cAAA,CAAC,gBAAcF,QAAAA,EAAAA,OAAAA,EAAQ;AAAA,GAAA,EACzB,CAAA;AAEJ;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/MiddleTruncator/MiddleTruncator.tsx"],"sourcesContent":["import styles from './MiddleTruncator.module.css';\n\nexport const MiddleTruncator = ({\n  text,\n  trailingChars = 10,\n}: {\n  text: string;\n  trailingChars?: number;\n}) => {\n  const startText = text.slice(0, -trailingChars);\n  const endText = text.slice(-trailingChars);\n\n  return (\n    <div\n      className={styles.truncator}\n      title={text}\n      aria-label={text}\n    >\n      <span className={styles.truncator__start}>{startText}</span>\n      <span className={styles.truncator__end}>{endText}</span>\n    </div>\n  );\n};\n"],"names":["MiddleTruncator","text","trailingChars","startText","slice","endText","jsxs","styles","truncator","jsx","truncator__start","truncator__end"],"mappings":";;;;;;;AAEO,MAAMA,kBAAkBA,CAAC;AAAA,EAC9BC,IAAAA;AAAAA,EACAC,aAAAA,GAAgB;AAIlB,CAAA,KAAM;AACJ,EAAA,MAAMC,SAAAA,GAAYF,IAAAA,CAAKG,KAAAA,CAAM,CAAA,EAAG,CAACF,aAAa,CAAA;AAC9C,EAAA,MAAMG,OAAAA,GAAUJ,IAAAA,CAAKG,KAAAA,CAAM,CAACF,aAAa,CAAA;AAEzC,EAAA,uBACEI,eAAA,CAAC,SACC,SAAA,EAAWC,8BAAAA,CAAOC,WAClB,KAAA,EAAOP,IAAAA,EACP,cAAYA,IAAAA,EAEZ,QAAA,EAAA;AAAA,oBAAAQ,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAWF,8BAAAA,CAAOG,gBAAAA,EAAmBP,QAAAA,EAAAA,SAAAA,EAAU,CAAA;AAAA,oBACrDM,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAWF,8BAAAA,CAAOI,gBAAiBN,QAAAA,EAAAA,OAAAA,EAAQ;AAAA,GAAA,EACnD,CAAA;AAEJ;;;;"}

package/dist/cjs/components/Pagination/Pagination.css

@@ -0,0 +1,7 @@
+/* Doubled class raises specificity to (0,2,0) so this width wins over the
+   Select root's own `width: 100%` rule, which styled() injects into <head>
+   at runtime (after the bundled CSS). The previous styled() wrapper relied
+   on runtime injection order for the same effect. */
+.custom-select__iARgW.custom-select__iARgW {
+  width: 150px;
+}

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

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const styles = {
+	"custom-select": "custom-select__iARgW"
+};
+
+exports.default = styles;
+//# sourceMappingURL=Pagination.module.css.cjs.map

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

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

package/dist/cjs/components/Pagination/index.cjs

@@ -1,19 +1,17 @@
+require("./Pagination.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const react = require('react');
-const styledComponents = require('styled-components');
+const Pagination_module = require('./Pagination.module.css.cjs');
 const Container = require('../Container/index.cjs');
 const Text = require('../Text/index.cjs');
 const IconButton = require('../IconButton/index.cjs');
 const NumberField = require('../NumberField/index.cjs');
 const Select = require('../Select/index.cjs');
 
-const CustomSelect = styledComponents.styled.div.withConfig({
-  componentId: "sc-dicnqe-0"
-})(["width:150px;"]);
 const Pagination = ({
   totalPages,
   currentPage,
@@ -87,7 +85,7 @@ const Pagination = ({
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(IconButton.IconButton, { icon: "chevron-right", type: "ghost", disabled: rightButtonDisabled, onClick: onNextClick, "data-testid": "next-btn" })
     ] }),
-    maxRowsPerPageList.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(CustomSelect, { as: Select.Select, onSelect: onPageSizeChange, value: pageSize.toString(), children: [
+    maxRowsPerPageList.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(Select.Select, { className: Pagination_module.default["custom-select"], onSelect: onPageSizeChange, value: pageSize.toString(), children: [
       allowAllRows && /* @__PURE__ */ jsxRuntime.jsx(Select.Select.Item, { value: "-1", children: "All rows" }),
       maxRowsPerPageList.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(Select.Select.Item, { value: option.toString(), children: [
         option,

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import {\n  FocusEventHandler,\n  MouseEventHandler,\n  ReactElement,\n  useCallback,\n  useRef,\n} from 'react';\nimport { Container, type ContainerProps } from '@/components/Container';\nimport { IconButton } from '@/components/IconButton';\nimport { NumberField } from '@/components/NumberField';\nimport { Select } from '@/components/Select';\nimport { Text } from '@/components/Text';\nimport { styled } from 'styled-components';\n\nexport interface PaginationProps extends Omit<\n  ContainerProps<'div'>,\n  'children' | 'onChange'\n> {\n  /** Total number of pages available */\n  totalPages?: number;\n  /** The currently selected page number */\n  currentPage: number;\n  /** List of options for rows per page dropdown */\n  maxRowsPerPageList?: number[];\n  /** Total row count to display */\n  rowCount?: number | string;\n  /** Callback when page number changes */\n  onChange: (pageNumber: number) => void;\n  /** Callback when page size changes */\n  onPageSizeChange?: (pageNumber: number) => void;\n  /** Current page size/rows per page */\n  pageSize?: number;\n  /** Callback when next page button is clicked */\n  onNextPageClick?: MouseEventHandler<HTMLButtonElement>;\n  /** Callback when previous page button is clicked */\n  onPrevPageClick?: MouseEventHandler<HTMLButtonElement>;\n  /** Callback when page number input receives focus */\n  onPageNumberFocus?: FocusEventHandler<HTMLInputElement>;\n  /** Callback when page number input loses focus */\n  onPageNumberBlur?: FocusEventHandler<HTMLInputElement>;\n  /** Whether to disable the next page button */\n  disableNextButton?: boolean;\n  /** Whether to show \"All rows\" option in the dropdown */\n  allowAllRows?: boolean;\n}\nconst CustomSelect = styled.div`\n  width: 150px;\n`;\n\nexport const Pagination = ({\n  totalPages,\n  currentPage,\n  maxRowsPerPageList = [],\n  rowCount,\n  onChange: onChangeProp,\n  onPageSizeChange: onPageSizeChangeProp,\n  pageSize = -1,\n  fillWidth = true,\n  gap = 'md',\n  justifyContent,\n  onNextPageClick,\n  onPrevPageClick,\n  onPageNumberFocus,\n  onPageNumberBlur,\n  disableNextButton,\n  allowAllRows = true,\n  ...props\n}: PaginationProps): ReactElement => {\n  const hasRowCount = ['number', 'string'].includes(typeof rowCount);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const formatNumber = (value: number) => {\n    return new Intl.NumberFormat('en').format(value);\n  };\n  const leftButtonDisabled = currentPage <= 1;\n  const rightButtonDisabled =\n    (!!totalPages && currentPage === totalPages) || disableNextButton;\n\n  const onChange = (value: string) => {\n    const sanitizedValue = parseInt(value, 10);\n    if (\n      sanitizedValue < 1 ||\n      inputRef.current?.disabled ||\n      (typeof totalPages !== 'undefined' ? sanitizedValue > totalPages : false)\n    ) {\n      return;\n    }\n\n    onChangeProp(sanitizedValue);\n  };\n\n  const onPageSizeChange = (value: string) => {\n    if (typeof onPageSizeChangeProp === 'function') {\n      onPageSizeChangeProp(Number(value));\n    }\n  };\n\n  const onPrevClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n    e => {\n      if (leftButtonDisabled) {\n        return;\n      }\n\n      onChangeProp(currentPage - 1);\n      if (typeof onPrevPageClick === 'function') {\n        onPrevPageClick(e);\n      }\n    },\n    [currentPage, leftButtonDisabled, onChangeProp, onPrevPageClick]\n  );\n\n  const onNextClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n    e => {\n      if (rightButtonDisabled) {\n        return;\n      }\n\n      onChangeProp(currentPage + 1);\n      if (typeof onNextPageClick === 'function') {\n        onNextPageClick(e);\n      }\n    },\n    [currentPage, onChangeProp, onNextPageClick, rightButtonDisabled]\n  );\n\n  // if `allowAllRows` is false we need to switch to the first option in the list\n  if (pageSize === -1 && !allowAllRows && maxRowsPerPageList.length > 0) {\n    pageSize = maxRowsPerPageList[0];\n  }\n\n  return (\n    <Container\n      gap={gap}\n      justifyContent={\n        justifyContent ??\n        (rowCount || maxRowsPerPageList.length > 0 ? 'space-between' : 'center')\n      }\n      fillWidth={fillWidth}\n      {...props}\n    >\n      {hasRowCount && (\n        <Text\n          component=\"div\"\n          color=\"muted\"\n          size=\"sm\"\n        >\n          {typeof rowCount === 'number' ? formatNumber(rowCount) : rowCount} rows\n        </Text>\n      )}\n      <Container\n        gap=\"xxs\"\n        fillWidth={false}\n      >\n        <IconButton\n          icon=\"chevron-left\"\n          type=\"ghost\"\n          disabled={leftButtonDisabled}\n          onClick={onPrevClick}\n          data-testid=\"prev-btn\"\n        />\n        <Container\n          maxWidth=\"50px\"\n          fillWidth={false}\n        >\n          <NumberField\n            ref={inputRef}\n            onChange={onChange}\n            value={currentPage}\n            loading={false}\n            aria-label={currentPage.toString()}\n            min={1}\n            max={totalPages}\n            onFocus={onPageNumberFocus}\n            hideControls\n            onBlur={onPageNumberBlur}\n            disabled={leftButtonDisabled && rightButtonDisabled}\n          />\n        </Container>\n        {!!totalPages && (\n          <Text\n            component=\"div\"\n            color=\"muted\"\n            size=\"sm\"\n          >\n            of {formatNumber(totalPages)}\n          </Text>\n        )}\n        <IconButton\n          icon=\"chevron-right\"\n          type=\"ghost\"\n          disabled={rightButtonDisabled}\n          onClick={onNextClick}\n          data-testid=\"next-btn\"\n        />\n      </Container>\n      {maxRowsPerPageList.length > 0 && (\n        <CustomSelect\n          as={Select}\n          onSelect={onPageSizeChange}\n          value={pageSize.toString()}\n        >\n          {allowAllRows && <Select.Item value=\"-1\">All rows</Select.Item>}\n          {maxRowsPerPageList.map(option => (\n            <Select.Item\n              key={option}\n              value={option.toString()}\n            >\n              {option} rows\n            </Select.Item>\n          ))}\n        </CustomSelect>\n      )}\n    </Container>\n  );\n};\n"],"names":["CustomSelect","styled","div","withConfig","componentId","Pagination","totalPages","currentPage","maxRowsPerPageList","rowCount","onChange","onChangeProp","onPageSizeChange","onPageSizeChangeProp","pageSize","fillWidth","gap","justifyContent","onNextPageClick","onPrevPageClick","onPageNumberFocus","onPageNumberBlur","disableNextButton","allowAllRows","props","hasRowCount","includes","inputRef","useRef","formatNumber","value","Intl","NumberFormat","format","leftButtonDisabled","rightButtonDisabled","sanitizedValue","parseInt","current","disabled","Number","onPrevClick","useCallback","e","onNextClick","length","jsxs","Container","Text","jsx","IconButton","NumberField","toString","Select","map","option"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import {\n  FocusEventHandler,\n  MouseEventHandler,\n  ReactElement,\n  useCallback,\n  useRef,\n} from 'react';\nimport { Container, type ContainerProps } from '@/components/Container';\nimport { IconButton } from '@/components/IconButton';\nimport { NumberField } from '@/components/NumberField';\nimport { Select } from '@/components/Select';\nimport { Text } from '@/components/Text';\nimport styles from './Pagination.module.css';\n\nexport interface PaginationProps extends Omit<\n  ContainerProps<'div'>,\n  'children' | 'onChange'\n> {\n  /** Total number of pages available */\n  totalPages?: number;\n  /** The currently selected page number */\n  currentPage: number;\n  /** List of options for rows per page dropdown */\n  maxRowsPerPageList?: number[];\n  /** Total row count to display */\n  rowCount?: number | string;\n  /** Callback when page number changes */\n  onChange: (pageNumber: number) => void;\n  /** Callback when page size changes */\n  onPageSizeChange?: (pageNumber: number) => void;\n  /** Current page size/rows per page */\n  pageSize?: number;\n  /** Callback when next page button is clicked */\n  onNextPageClick?: MouseEventHandler<HTMLButtonElement>;\n  /** Callback when previous page button is clicked */\n  onPrevPageClick?: MouseEventHandler<HTMLButtonElement>;\n  /** Callback when page number input receives focus */\n  onPageNumberFocus?: FocusEventHandler<HTMLInputElement>;\n  /** Callback when page number input loses focus */\n  onPageNumberBlur?: FocusEventHandler<HTMLInputElement>;\n  /** Whether to disable the next page button */\n  disableNextButton?: boolean;\n  /** Whether to show \"All rows\" option in the dropdown */\n  allowAllRows?: boolean;\n}\n\nexport const Pagination = ({\n  totalPages,\n  currentPage,\n  maxRowsPerPageList = [],\n  rowCount,\n  onChange: onChangeProp,\n  onPageSizeChange: onPageSizeChangeProp,\n  pageSize = -1,\n  fillWidth = true,\n  gap = 'md',\n  justifyContent,\n  onNextPageClick,\n  onPrevPageClick,\n  onPageNumberFocus,\n  onPageNumberBlur,\n  disableNextButton,\n  allowAllRows = true,\n  ...props\n}: PaginationProps): ReactElement => {\n  const hasRowCount = ['number', 'string'].includes(typeof rowCount);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const formatNumber = (value: number) => {\n    return new Intl.NumberFormat('en').format(value);\n  };\n  const leftButtonDisabled = currentPage <= 1;\n  const rightButtonDisabled =\n    (!!totalPages && currentPage === totalPages) || disableNextButton;\n\n  const onChange = (value: string) => {\n    const sanitizedValue = parseInt(value, 10);\n    if (\n      sanitizedValue < 1 ||\n      inputRef.current?.disabled ||\n      (typeof totalPages !== 'undefined' ? sanitizedValue > totalPages : false)\n    ) {\n      return;\n    }\n\n    onChangeProp(sanitizedValue);\n  };\n\n  const onPageSizeChange = (value: string) => {\n    if (typeof onPageSizeChangeProp === 'function') {\n      onPageSizeChangeProp(Number(value));\n    }\n  };\n\n  const onPrevClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n    e => {\n      if (leftButtonDisabled) {\n        return;\n      }\n\n      onChangeProp(currentPage - 1);\n      if (typeof onPrevPageClick === 'function') {\n        onPrevPageClick(e);\n      }\n    },\n    [currentPage, leftButtonDisabled, onChangeProp, onPrevPageClick]\n  );\n\n  const onNextClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n    e => {\n      if (rightButtonDisabled) {\n        return;\n      }\n\n      onChangeProp(currentPage + 1);\n      if (typeof onNextPageClick === 'function') {\n        onNextPageClick(e);\n      }\n    },\n    [currentPage, onChangeProp, onNextPageClick, rightButtonDisabled]\n  );\n\n  // if `allowAllRows` is false we need to switch to the first option in the list\n  if (pageSize === -1 && !allowAllRows && maxRowsPerPageList.length > 0) {\n    pageSize = maxRowsPerPageList[0];\n  }\n\n  return (\n    <Container\n      gap={gap}\n      justifyContent={\n        justifyContent ??\n        (rowCount || maxRowsPerPageList.length > 0 ? 'space-between' : 'center')\n      }\n      fillWidth={fillWidth}\n      {...props}\n    >\n      {hasRowCount && (\n        <Text\n          component=\"div\"\n          color=\"muted\"\n          size=\"sm\"\n        >\n          {typeof rowCount === 'number' ? formatNumber(rowCount) : rowCount} rows\n        </Text>\n      )}\n      <Container\n        gap=\"xxs\"\n        fillWidth={false}\n      >\n        <IconButton\n          icon=\"chevron-left\"\n          type=\"ghost\"\n          disabled={leftButtonDisabled}\n          onClick={onPrevClick}\n          data-testid=\"prev-btn\"\n        />\n        <Container\n          maxWidth=\"50px\"\n          fillWidth={false}\n        >\n          <NumberField\n            ref={inputRef}\n            onChange={onChange}\n            value={currentPage}\n            loading={false}\n            aria-label={currentPage.toString()}\n            min={1}\n            max={totalPages}\n            onFocus={onPageNumberFocus}\n            hideControls\n            onBlur={onPageNumberBlur}\n            disabled={leftButtonDisabled && rightButtonDisabled}\n          />\n        </Container>\n        {!!totalPages && (\n          <Text\n            component=\"div\"\n            color=\"muted\"\n            size=\"sm\"\n          >\n            of {formatNumber(totalPages)}\n          </Text>\n        )}\n        <IconButton\n          icon=\"chevron-right\"\n          type=\"ghost\"\n          disabled={rightButtonDisabled}\n          onClick={onNextClick}\n          data-testid=\"next-btn\"\n        />\n      </Container>\n      {maxRowsPerPageList.length > 0 && (\n        <Select\n          className={styles['custom-select']}\n          onSelect={onPageSizeChange}\n          value={pageSize.toString()}\n        >\n          {allowAllRows && <Select.Item value=\"-1\">All rows</Select.Item>}\n          {maxRowsPerPageList.map(option => (\n            <Select.Item\n              key={option}\n              value={option.toString()}\n            >\n              {option} rows\n            </Select.Item>\n          ))}\n        </Select>\n      )}\n    </Container>\n  );\n};\n"],"names":["Pagination","totalPages","currentPage","maxRowsPerPageList","rowCount","onChange","onChangeProp","onPageSizeChange","onPageSizeChangeProp","pageSize","fillWidth","gap","justifyContent","onNextPageClick","onPrevPageClick","onPageNumberFocus","onPageNumberBlur","disableNextButton","allowAllRows","props","hasRowCount","includes","inputRef","useRef","formatNumber","value","Intl","NumberFormat","format","leftButtonDisabled","rightButtonDisabled","sanitizedValue","parseInt","current","disabled","Number","onPrevClick","useCallback","e","onNextClick","length","jsxs","Container","Text","jsx","IconButton","NumberField","toString","Select","styles","map","option"],"mappings":"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"}

package/dist/cjs/components/Panel/Panel.css

@@ -0,0 +1,116 @@
+.panel__4VWNp {
+  --panel-width: initial;
+  --panel-height: initial;
+
+  display: flex;
+  width: var(--panel-width, auto);
+  height: var(--panel-height, auto);
+}
+
+.panel_cursor__YcG6H {
+  cursor: var(--panel-cursor);
+}
+
+.panel_orientation_horizontal__nB0T- {
+  flex-flow: row wrap;
+}
+
+.panel_orientation_vertical__7EE-3 {
+  flex-flow: column;
+}
+
+.panel_align-items_start__Xr8t8 {
+  align-items: flex-start;
+}
+
+.panel_align-items_center__5LLFt {
+  align-items: center;
+}
+
+.panel_align-items_end__qi2wL {
+  align-items: flex-end;
+}
+
+.panel_color_default__pIwqp {
+  background-color: var(--click-panel-color-background-default);
+}
+
+.panel_color_muted__fVquA {
+  background-color: var(--click-panel-color-background-muted);
+}
+
+.panel_color_transparent__fIvMl {
+  background-color: var(--click-panel-color-background-transparent);
+}
+
+.panel_radii_none__JyEKv {
+  border-radius: var(--click-panel-radii-none);
+}
+
+.panel_radii_sm__b7A6v {
+  border-radius: var(--click-panel-radii-sm);
+}
+
+.panel_radii_md__5Pzsu {
+  border-radius: var(--click-panel-radii-md);
+}
+
+.panel_radii_lg__q1FPq {
+  border-radius: var(--click-panel-radii-lg);
+}
+
+.panel_padding_none__OGHd- {
+  padding: var(--click-panel-space-y-none);
+}
+
+.panel_padding_xs__U6RZS {
+  padding: var(--click-panel-space-y-xs);
+}
+
+.panel_padding_sm__rKoLB {
+  padding: var(--click-panel-space-y-sm);
+}
+
+.panel_padding_md__9PCRi {
+  padding: var(--click-panel-space-y-md);
+}
+
+.panel_padding_lg__aKwpW {
+  padding: var(--click-panel-space-y-lg);
+}
+
+.panel_padding_xl__Q1IVo {
+  padding: var(--click-panel-space-y-xl);
+}
+
+.panel_border__dGg-4 {
+  border: 1px solid var(--click-global-color-stroke-default);
+}
+
+.panel_shadow__8WSfn {
+  box-shadow: var(--shadow-1);
+}
+
+.panel_gap_none__-LwaY {
+  gap: var(--click-panel-space-gap-none);
+}
+
+.panel_gap_xs__sbYm7 {
+  gap: var(--click-panel-space-gap-xs);
+}
+
+.panel_gap_sm__8NpJA {
+  gap: var(--click-panel-space-gap-sm);
+}
+
+.panel_gap_md__RM459 {
+  gap: var(--click-panel-space-gap-md);
+}
+
+.panel_gap_lg__MNfVH {
+  gap: var(--click-panel-space-gap-lg);
+}
+
+.panel_gap_xl__Te3bQ {
+  gap: var(--click-panel-space-gap-xl);
+}