@ultraviolet/ui 3.1.1 → 3.2.1

package/dist/components/LineChart/CustomLegend.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { theme } from "@ultraviolet/themes";
+import { cn, theme } from "@ultraviolet/themes";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { getLegendColor } from "../../helpers/legend.js";
 import { Checkbox } from "../Checkbox/index.js";
 import { Text } from "../Text/index.js";
 import { getSelected, getMin, getMax, getAverage, getCurrent } from "./helpers.js";
-import { container, lineChartHead, longContainer, lineChartBody, lineChartRow, cellValueContainer, lineChartLegend, backgroundColorLegend, textLegend } from "./styles.css.js";
+import { lineChartHead, longContainer, lineChartBody, lineChartRow, cellValueContainer, lineChartLegend, backgroundColorLegend, container, textLegend } from "./styles.css.js";
 const Cell = ({ value, variant }) => /* @__PURE__ */ jsx(Text, { as: "span", className: textLegend, sentiment: "neutral", variant, children: value });
 const noop = (value) => value.toString();
 const CustomLegend = ({
@@ -16,73 +16,66 @@ const CustomLegend = ({
   setSelected,
   className,
   "data-testid": dataTestId
-}) => /* @__PURE__ */ jsxs(
-  "div",
-  {
-    className: `${className ? `${className} ` : ""}${container}`,
-    "data-testid": dataTestId,
-    children: [
-      /* @__PURE__ */ jsxs("div", { className: lineChartHead, children: [
-        /* @__PURE__ */ jsx("div", { className: longContainer, children: "Legend" }),
-        /* @__PURE__ */ jsx(Cell, { value: "Minimum", variant: "body" }),
-        /* @__PURE__ */ jsx(Cell, { value: "Maximum", variant: "body" }),
-        /* @__PURE__ */ jsx(Cell, { value: "Average", variant: "body" }),
-        /* @__PURE__ */ jsx(Cell, { value: "Current", variant: "body" })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: lineChartBody, children: data?.map((row, index) => {
-        const values = row.data.map((val) => val.y);
-        const labelIndexed = `${row.id}${index}`;
-        const id = row.id.toString();
-        return /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: lineChartRow,
-            children: [
-              /* @__PURE__ */ jsx("div", { className: longContainer, children: /* @__PURE__ */ jsx(
-                Checkbox,
-                {
-                  checked: selected.includes(labelIndexed),
-                  name: id,
-                  onChange: () => setSelected([...getSelected(id, index, selected)]),
-                  children: /* @__PURE__ */ jsxs("div", { className: cellValueContainer, children: [
-                    /* @__PURE__ */ jsx(Text, { as: "span", sentiment: "neutral", variant: "bodySmall", children: row?.["label"] }),
-                    /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        className: lineChartLegend,
-                        "data-testid": `label-${id}`,
-                        style: assignInlineVars({
-                          [backgroundColorLegend]: getLegendColor(theme)[index]
-                        })
-                      }
-                    )
-                  ] })
-                }
-              ) }),
-              /* @__PURE__ */ jsx(Cell, { value: axisTransformer(getMin(values)), variant: "bodySmall" }),
-              /* @__PURE__ */ jsx(Cell, { value: axisTransformer(getMax(values)), variant: "bodySmall" }),
-              /* @__PURE__ */ jsx(
-                Cell,
-                {
-                  value: axisTransformer(getAverage(values)),
-                  variant: "bodySmall"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Cell,
-                {
-                  value: axisTransformer(getCurrent(values)),
-                  variant: "bodySmall"
-                }
-              )
-            ]
-          },
-          labelIndexed
-        );
-      }) })
-    ]
-  }
-);
+}) => /* @__PURE__ */ jsxs("div", { className: cn(className, container), "data-testid": dataTestId, children: [
+  /* @__PURE__ */ jsxs("div", { className: lineChartHead, children: [
+    /* @__PURE__ */ jsx("div", { className: longContainer, children: "Legend" }),
+    /* @__PURE__ */ jsx(Cell, { value: "Minimum", variant: "body" }),
+    /* @__PURE__ */ jsx(Cell, { value: "Maximum", variant: "body" }),
+    /* @__PURE__ */ jsx(Cell, { value: "Average", variant: "body" }),
+    /* @__PURE__ */ jsx(Cell, { value: "Current", variant: "body" })
+  ] }),
+  /* @__PURE__ */ jsx("div", { className: lineChartBody, children: data?.map((row, index) => {
+    const values = row.data.map((val) => val.y);
+    const labelIndexed = `${row.id}${index}`;
+    const id = row.id.toString();
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: lineChartRow,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: longContainer, children: /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: selected.includes(labelIndexed),
+              name: id,
+              onChange: () => setSelected([...getSelected(id, index, selected)]),
+              children: /* @__PURE__ */ jsxs("div", { className: cellValueContainer, children: [
+                /* @__PURE__ */ jsx(Text, { as: "span", sentiment: "neutral", variant: "bodySmall", children: row?.["label"] }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: lineChartLegend,
+                    "data-testid": `label-${id}`,
+                    style: assignInlineVars({
+                      [backgroundColorLegend]: getLegendColor(theme)[index]
+                    })
+                  }
+                )
+              ] })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Cell, { value: axisTransformer(getMin(values)), variant: "bodySmall" }),
+          /* @__PURE__ */ jsx(Cell, { value: axisTransformer(getMax(values)), variant: "bodySmall" }),
+          /* @__PURE__ */ jsx(
+            Cell,
+            {
+              value: axisTransformer(getAverage(values)),
+              variant: "bodySmall"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Cell,
+            {
+              value: axisTransformer(getCurrent(values)),
+              variant: "bodySmall"
+            }
+          )
+        ]
+      },
+      labelIndexed
+    );
+  }) })
+] });
 export {
   CustomLegend
 };

package/dist/components/LineChart/Tooltip.d.ts

@@ -4,3 +4,4 @@ type LineChartTooltipProps = {
 };
 export declare const LineChartTooltip: ({ point }: LineChartTooltipProps) => import("react/jsx-runtime").JSX.Element;
 export {};
+//# sourceMappingURL=Tooltip.d.ts.map

package/dist/components/LineChart/Tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/LineChart/Tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAKvC,KAAK,qBAAqB,GAAG;IAAE,KAAK,EAAE,KAAK,CAAA;CAAE,CAAA;AAE7C,eAAO,MAAM,gBAAgB,GAAI,WAAW,qBAAqB,4CA6BhE,CAAA"}

package/dist/components/LineChart/helpers.d.ts

@@ -6,3 +6,4 @@ export declare const getMaxChartValue: (preppedData?: Serie[]) => number;
 export declare const getMinChartValue: (preppedData?: Serie[]) => number;
 export declare const getCurrent: (values?: number[]) => number;
 export declare const getSelected: (label: string, index: number, selected?: string[]) => string[];
+//# sourceMappingURL=helpers.d.ts.map

package/dist/components/LineChart/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/components/LineChart/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAgBnD,eAAO,MAAM,MAAM,GAAI,SAAQ,UAAU,EAAO,KAAG,MACmB,CAAA;AAEtE,eAAO,MAAM,MAAM,GAAI,SAAQ,UAAU,EAAO,KAAG,MACmB,CAAA;AAEtE,eAAO,MAAM,UAAU,GAAI,SAAQ,UAAU,EAAO,KAAG,MAOhD,CAAA;AAEP,eAAO,MAAM,gBAAgB,GAAI,cAAc,KAAK,EAAE,KAAG,MAUxD,CAAA;AAED,eAAO,MAAM,gBAAgB,GAAI,cAAc,KAAK,EAAE,KAAG,MAUxD,CAAA;AAED,eAAO,MAAM,UAAU,GAAI,SAAQ,MAAM,EAAO,KAAG,MAIlD,CAAA;AAED,eAAO,MAAM,WAAW,GACtB,OAAO,MAAM,EACb,OAAO,MAAM,EACb,WAAU,MAAM,EAAO,KACtB,MAAM,EAWR,CAAA"}

package/dist/components/LineChart/index.d.ts

@@ -24,3 +24,4 @@ type LineChartProps = {
  */
 export declare const LineChart: ({ height, margin, xScale, yScale, data, withLegend, axisFormatters, pointFormatters, tickValues, chartProps, style, "data-testid": dataTestId, }: LineChartProps) => import("react/jsx-runtime").JSX.Element;
 export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/LineChart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/LineChart/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,GAAG,IAAI,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AACzE,OAAO,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAErD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAG7C,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAI1D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAI7C,KAAK,cAAc,GAAG;IACpB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,IAAI,CAAC,EAAE,KAAK,EAAE,CAAA;IACd,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,cAAc,CAAC,EAAE,OAAO,CACtB,MAAM,CACJ,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,EACnC,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC,iBAAiB,CAAC,CACvD,CACF,CAAA;IACD,eAAe,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,GAAG,GAAG,GAAG,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,CAAA;IACrE,UAAU,CAAC,EAAE,OAAO,CAClB,MAAM,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC,CAC7D,CAAA;IACD,UAAU,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAA;IAClC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAYD;;;;GAIG;AACH,eAAO,MAAM,SAAS,GAAI,kJAavB,cAAc,4CA6EhB,CAAA"}

package/dist/components/LineChart/styles.css.d.ts

@@ -10,3 +10,4 @@ export declare const lineChartBody: string;
 export declare const lineChartHead: string;
 export declare const lineChartLegend: string;
 export declare const lineChartRow: string;
+//# sourceMappingURL=styles.css.d.ts.map

package/dist/components/LineChart/styles.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/LineChart/styles.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS,oBAAc,CAAA;AACpC,eAAO,MAAM,qBAAqB,oBAAc,CAAA;AAEhD,eAAO,MAAM,UAAU,QAKrB,CAAA;AAEF,eAAO,MAAM,kBAAkB,QAG7B,CAAA;AAEF,eAAO,MAAM,aAAa,QAGxB,CAAA;AAEF,eAAO,MAAM,SAAS,QAEpB,CAAA;AAEF,eAAO,MAAM,oBAAoB,QAO/B,CAAA;AAEF,eAAO,MAAM,eAAe,QAM1B,CAAA;AAEF,eAAO,MAAM,aAAa,QAAY,CAAA;AAMtC,eAAO,MAAM,aAAa,QAIxB,CAAA;AAMF,eAAO,MAAM,eAAe,QAK1B,CAAA;AAEF,eAAO,MAAM,YAAY,QAGvB,CAAA"}

package/dist/components/Link/constants.d.ts

@@ -4,3 +4,4 @@ export declare const PROMINENCES: {
     readonly stronger: "stronger";
     readonly weak: "weak";
 };
+//# sourceMappingURL=constants.d.ts.map

package/dist/components/Link/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/Link/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW;;;;;CAKd,CAAA"}

package/dist/components/Link/index.d.ts

@@ -28,3 +28,4 @@ type LinkProps = {
  */
 export declare const Link: import("react").ForwardRefExoticComponent<LinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
 export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Link/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Link/index.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EACV,oBAAoB,EACpB,aAAa,EAEb,yBAAyB,EACzB,iBAAiB,EACjB,SAAS,EAEV,MAAM,OAAO,CAAA;AAId,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAS9C,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,WAAW,CAAA;AAEtD,KAAK,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAA;AAC7C,KAAK,gBAAgB,GAAG,MAAM,GAAG,OAAO,CAAA;AACxC,KAAK,SAAS,GAAG;IACf,QAAQ,EAAE,SAAS,CAAA;IACnB,MAAM,CAAC,EAAE,yBAAyB,CAAA;IAClC,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC3B,SAAS,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IAC9B,UAAU,CAAC,EAAE,eAAe,CAAA;IAC5B,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,YAAY,CAAC,EAAE,gBAAgB,CAAA;IAC/B,GAAG,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,KAAK,CAAC,CAAA;IACpD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;IAEZ,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAA;IAC9C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,cAAc,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,cAAc,CAAC,CAAA;IACxE,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,QAAQ,GAAG,YAAY,CAAA;IACjC,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAKD;;GAEG;AACH,eAAO,MAAM,IAAI,yGAiGhB,CAAA"}

package/dist/components/Link/index.js

@@ -1,10 +1,11 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ArrowLeftIcon, OpenInNewIcon, ArrowRightIcon } from "@ultraviolet/icons";
+import { cn } from "@ultraviolet/themes";
 import { forwardRef, useState, useRef, useMemo, useEffect } from "react";
 import recursivelyGetChildrenString from "../../helpers/recursivelyGetChildrenString.js";
 import { Tooltip } from "../Tooltip/index.js";
-import { link, defaultLink, iconLeftLink, containerIconLink, iconRightLink } from "./styles.css.js";
+import { iconLeftLink, containerIconLink, iconRightLink, link, defaultLink } from "./styles.css.js";
 const ICON_SIZE = "small";
 const BLANK_TARGET_ICON_SIZE = "small";
 const Link = forwardRef(
@@ -55,7 +56,17 @@ const Link = forwardRef(
         "aria-current": ariaCurrent,
         "aria-keyshortcuts": ariaKeyshortcuts,
         "aria-label": ariaLabel,
-        className: `${className ? `${className} ` : ""}${link({ oneLine, prominence, sentiment, type: variant, variant: textVariant })} ${defaultLink}`,
+        className: cn(
+          className,
+          link({
+            oneLine,
+            prominence,
+            sentiment,
+            type: variant,
+            variant: textVariant
+          }),
+          defaultLink
+        ),
         "data-testid": dataTestId,
         "data-variant": variant,
         download,

package/dist/components/Link/styles.css.d.ts

@@ -76,3 +76,4 @@ export declare const containerIconLink: string;
 export declare const defaultLink: string;
 export declare const iconLeftLink: string;
 export declare const iconRightLink: string;
+//# sourceMappingURL=styles.css.d.ts.map

package/dist/components/Link/styles.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/Link/styles.css.ts"],"names":[],"mappings":"AAuDA,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiGf,CAAA;AAEF,eAAO,MAAM,iBAAiB,QAG5B,CAAA;AAKF,eAAO,MAAM,WAAW,QAAY,CAAA;AAEpC,eAAO,MAAM,YAAY,QAWvB,CAAA;AAGF,eAAO,MAAM,aAAa,QAWxB,CAAA"}

package/dist/components/List/Cell.d.ts

@@ -8,3 +8,4 @@ type CellProps = {
 };
 export declare const Cell: import("react").ForwardRefExoticComponent<CellProps & import("react").RefAttributes<HTMLTableCellElement>>;
 export {};
+//# sourceMappingURL=Cell.d.ts.map

package/dist/components/List/Cell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Cell.d.ts","sourceRoot":"","sources":["../../../src/components/List/Cell.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAerD,KAAK,SAAS,GAAG;IACf,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAED,eAAO,MAAM,IAAI,4GA6ChB,CAAA"}

package/dist/components/List/Cell.js

@@ -1,25 +1,41 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
+import { cn } from "@ultraviolet/themes";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { forwardRef } from "react";
 import { useColumnProvider } from "./ColumnProvider.js";
-import { listCell } from "./styles.css.js";
-import { maxWidthCell, minWidthCell, widthCell } from "./variables.css.js";
+import { useListContext } from "./ListContext.js";
+import { listCell, listCellStrict } from "./styles.css.js";
+import { listCellPadding, minWidthChildrenCell, maxWidthChildrenCell, widthChildrenCell, maxWidthCell, minWidthCell, widthCell } from "./variables.css.js";
 const Cell = forwardRef(
   ({ children, className, "data-testid": dataTestid, colSpan, style }, ref) => {
-    const { maxWidth, minWidth, width } = useColumnProvider();
+    const context = useColumnProvider();
+    const { colMode } = useListContext();
+    const width = context?.width;
+    const maxWidth = context?.maxWidth;
+    const minWidth = context?.minWidth;
+    const widthChildren = width?.includes("%") ? "100%" : `calc(${width} - ${listCellPadding} - ${listCellPadding})`;
+    const maxWidthChildren = maxWidth?.includes("%") ? "100%" : `calc(${maxWidth} - ${listCellPadding} - ${listCellPadding})`;
+    const minWidthChildren = minWidth?.includes("%") ? "100%" : `calc(${minWidth} - ${listCellPadding} - ${listCellPadding})`;
     return /* @__PURE__ */ jsx(
       "td",
       {
-        className: `${className ? `${className} ` : ""}${listCell}`,
+        className: cn(
+          className,
+          listCell,
+          colMode === "strict" ? listCellStrict : ""
+        ),
         colSpan,
         "data-testid": dataTestid,
         ref,
         style: {
           ...assignInlineVars({
-            [widthCell]: width,
-            [minWidthCell]: minWidth,
-            [maxWidthCell]: maxWidth
+            [widthCell]: width ?? "auto",
+            [minWidthCell]: minWidth ?? "auto",
+            [maxWidthCell]: maxWidth ?? "none",
+            [widthChildrenCell]: width ? widthChildren : "auto",
+            [maxWidthChildrenCell]: maxWidth ? maxWidthChildren : "none",
+            [minWidthChildrenCell]: minWidth ? minWidthChildren : "auto"
           }),
           ...style
         },

package/dist/components/List/ColumnProvider.d.ts

@@ -1,4 +1,9 @@
 import type { ReactNode } from 'react';
+type ContextType = {
+    width?: string;
+    maxWidth?: string;
+    minWidth?: string;
+} | undefined;
 type ColumnProviderProps = {
     width?: string;
     maxWidth?: string;
@@ -6,9 +11,6 @@ type ColumnProviderProps = {
     children?: ReactNode;
 };
 export declare const ColumnProvider: ({ width, minWidth, maxWidth, children, }: ColumnProviderProps) => import("react/jsx-runtime").JSX.Element;
-export declare const useColumnProvider: () => {
-    width: string;
-    maxWidth: string;
-    minWidth: string;
-};
+export declare const useColumnProvider: () => ContextType;
 export {};
+//# sourceMappingURL=ColumnProvider.d.ts.map

package/dist/components/List/ColumnProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnProvider.d.ts","sourceRoot":"","sources":["../../../src/components/List/ColumnProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,KAAK,WAAW,GACZ;IACE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,GACD,SAAS,CAAA;AAEb,KAAK,mBAAmB,GAAG;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AAGD,eAAO,MAAM,cAAc,GAAI,0CAK5B,mBAAmB,4CAUrB,CAAA;AAGD,eAAO,MAAM,iBAAiB,mBAAkC,CAAA"}

package/dist/components/List/ColumnProvider.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { createContext, useContext } from "react";
+import { useContext, createContext } from "react";
 const ColumnContext = createContext(void 0);
 const ColumnProvider = ({
   width,
@@ -10,24 +10,14 @@ const ColumnProvider = ({
   ColumnContext.Provider,
   {
     value: {
-      maxWidth: maxWidth ?? "none",
-      minWidth: minWidth ?? "auto",
-      width: width ?? "auto"
+      maxWidth,
+      minWidth,
+      width
     },
     children
   }
 );
-const useColumnProvider = () => {
-  const context = useContext(ColumnContext);
-  if (!context) {
-    return {
-      maxWidth: "none",
-      minWidth: "auto",
-      width: "auto"
-    };
-  }
-  return context;
-};
+const useColumnProvider = () => useContext(ColumnContext);
 export {
   ColumnProvider,
   useColumnProvider

package/dist/components/List/HeaderCell.d.ts

@@ -12,3 +12,4 @@ type HeaderCellProps = {
 };
 export declare const HeaderCell: ({ children, isOrdered, orderDirection, onOrder, className, info, width, minWidth, maxWidth, }: HeaderCellProps) => import("react/jsx-runtime").JSX.Element;
 export {};
+//# sourceMappingURL=HeaderCell.d.ts.map

package/dist/components/List/HeaderCell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderCell.d.ts","sourceRoot":"","sources":["../../../src/components/List/HeaderCell.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAiBtC,KAAK,eAAe,GAAG;IACrB,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,cAAc,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,CAAA;IACxC,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,GAAG,MAAM,KAAK,IAAI,CAAA;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,eAAO,MAAM,UAAU,GAAI,+FAUxB,eAAe,4CAuDjB,CAAA"}

package/dist/components/List/HeaderCell.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { InformationOutlineIcon, SouthShortIcon, SortIcon as SortIcon$1 } from "@ultraviolet/icons";
+import { cn } from "@ultraviolet/themes";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { Stack } from "../Stack/index.js";
 import { Tooltip } from "../Tooltip/index.js";
@@ -29,7 +30,7 @@ const HeaderCell = ({
     "th",
     {
       "aria-sort": order,
-      className: `${className ? `${className} ` : ""}${listHeaderCell}`,
+      className: cn(className, listHeaderCell),
       onClick: handleOrder,
       onKeyDown: handleOrder ? (event) => {
         if (event.key === " " || event.key === "Enter") {

package/dist/components/List/HeaderRow.d.ts

@@ -5,3 +5,4 @@ type RowProps = {
 };
 export declare const HeaderRow: ({ children, hasSelectAllColumn }: RowProps) => import("react/jsx-runtime").JSX.Element;
 export {};
+//# sourceMappingURL=HeaderRow.d.ts.map

package/dist/components/List/HeaderRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderRow.d.ts","sourceRoot":"","sources":["../../../src/components/List/HeaderRow.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMtC,KAAK,QAAQ,GAAG;IACd,kBAAkB,EAAE,OAAO,CAAA;IAC3B,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,SAAS,GAAI,kCAAkC,QAAQ,4CA4BnE,CAAA"}

package/dist/components/List/ListContext.d.ts

@@ -29,6 +29,7 @@ export type ListContextValue = {
     refList: RefObject<HTMLInputElement>[];
     setRefList: Dispatch<SetStateAction<RefObject<HTMLInputElement>[]>>;
     handleOnChange: (value: string, checked: boolean) => void;
+    colMode?: 'strict' | 'flexible';
 };
 export type ListProviderProps = {
     children: ReactNode;
@@ -37,7 +38,9 @@ export type ListProviderProps = {
     expandButton: boolean;
     onSelectedChange?: Dispatch<SetStateAction<string[]>>;
     columns: ColumnProps[];
+    colMode?: 'strict' | 'flexible';
 };
-export declare const ListProvider: ({ children, autoCollapse, selectable, expandButton, onSelectedChange, columns, }: ListProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ListProvider: ({ children, autoCollapse, selectable, expandButton, onSelectedChange, columns, colMode, }: ListProviderProps) => import("react/jsx-runtime").JSX.Element;
 export declare const useListContext: () => ListContextValue;
 export {};
+//# sourceMappingURL=ListContext.d.ts.map

package/dist/components/List/ListContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListContext.d.ts","sourceRoot":"","sources":["../../../src/components/List/ListContext.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,cAAc,EACd,QAAQ,EACR,WAAW,IAAI,gBAAgB,EAC/B,SAAS,EACT,SAAS,EACT,cAAc,EACf,MAAM,OAAO,CAAA;AASd,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAC3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAE1C,KAAK,QAAQ,GAAG,MAAM,CAAC,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC,CAAA;AAEhD,MAAM,MAAM,gBAAgB,GAAG;IAE7B;;SAEK;IACL,qBAAqB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,MAAM,IAAI,CAAA;IACxE,cAAc,EAAE,QAAQ,CAAA;IACxB,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,YAAY,EAAE,OAAO,CAAA;IAErB;;SAEK;IACL,qBAAqB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,IAAI,CAAA;IACpD,iBAAiB,EAAE,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC,SAAS,CAAC,CAAA;IAC7D,gBAAgB,EAAE,CAAC,KAAK,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IACrE,gBAAgB,EAAE,MAAM,IAAI,CAAA;IAC5B,OAAO,EAAE,WAAW,EAAE,CAAA;IACtB,OAAO,EAAE,MAAM,EAAE,CAAA;IACjB,UAAU,EAAE,OAAO,CAAA;IACnB,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,cAAc,EAAE,QAAQ,CAAA;IACxB,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,OAAO,EAAE,SAAS,CAAC,gBAAgB,CAAC,EAAE,CAAA;IACtC,UAAU,EAAE,QAAQ,CAAC,cAAc,CAAC,SAAS,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC,CAAA;IACnE,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IACzD,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAA;CAChC,CAAA;AAID,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,SAAS,CAAA;IACnB,YAAY,EAAE,OAAO,CAAA;IACrB,UAAU,EAAE,OAAO,CAAA;IACnB,YAAY,EAAE,OAAO,CAAA;IACrB,gBAAgB,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC,CAAC,CAAA;IACrD,OAAO,EAAE,WAAW,EAAE,CAAA;IACtB,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAA;CAChC,CAAA;AAkBD,eAAO,MAAM,YAAY,GAAI,2FAQ1B,iBAAiB,4CAkSnB,CAAA;AAGD,eAAO,MAAM,cAAc,wBAO1B,CAAA"}

package/dist/components/List/ListContext.js

@@ -19,7 +19,8 @@ const ListProvider = ({
   selectable,
   expandButton,
   onSelectedChange,
-  columns
+  columns,
+  colMode
 }) => {
   const [expandedRowIds, setExpandedRowIds] = useState({});
   const [selectedRowIds, setSelectedRowIds] = useState({});
@@ -204,6 +205,7 @@ const ListProvider = ({
     () => ({
       allRowSelectValue,
       collapseRow,
+      colMode,
       columns,
       expandButton,
       expandedRowIds,
@@ -242,7 +244,8 @@ const ListProvider = ({
       selectRow,
       unselectAll,
       unselectRow,
-      handleOnChange
+      handleOnChange,
+      colMode
     ]
   );
   return /* @__PURE__ */ jsx(ListContext.Provider, { value, children });

package/dist/components/List/Row.d.ts

@@ -25,3 +25,4 @@ type RowProps = {
 };
 export declare const Row: import("react").ForwardRefExoticComponent<RowProps & import("react").RefAttributes<HTMLTableRowElement>>;
 export {};
+//# sourceMappingURL=Row.d.ts.map

package/dist/components/List/Row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Row.d.ts","sourceRoot":"","sources":["../../../src/components/List/Row.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EACV,aAAa,EACb,iBAAiB,EACjB,SAAS,EAEV,MAAM,OAAO,CAAA;AAUd,OAAO,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAiBpD,KAAK,QAAQ,GAAG;IACd,QAAQ,EAAE,SAAS,CAAA;IACnB,EAAE,EAAE,MAAM,CAAA;IACV,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB;;SAEK;IACL,cAAc,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAA;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,OAAO,KAAK,CAAA;IACtC,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,YAAY,CAAC,EAAE,iBAAiB,CAAC,mBAAmB,CAAC,CAAA;IACrD,YAAY,CAAC,EAAE,iBAAiB,CAAC,mBAAmB,CAAC,CAAA;CACtD,CAAA;AAED,eAAO,MAAM,GAAG,0GAwNf,CAAA"}

package/dist/components/List/Row.js

@@ -1,16 +1,16 @@
 "use client";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { ArrowUpIcon, ArrowDownIcon } from "@ultraviolet/icons";
-import { theme } from "@ultraviolet/themes";
+import { cn, theme } from "@ultraviolet/themes";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
-import { forwardRef, useId, useRef, useEffect, useCallback, Children } from "react";
+import { forwardRef, useId, useRef, useEffect, useCallback, Children, isValidElement } from "react";
 import { Button } from "../Button/index.js";
 import { Checkbox } from "../Checkbox/index.js";
 import { Tooltip } from "../Tooltip/index.js";
 import { Cell } from "./Cell.js";
 import { ColumnProvider } from "./ColumnProvider.js";
 import { useListContext } from "./ListContext.js";
-import { listRow, listNoPaddingCell, listCheckboxContainer, listCheckboxInRange, listExpandableWrapper, listExpandableCell } from "./styles.css.js";
+import { listNoPaddingCell, listCheckboxContainer, listCheckboxInRange, listRow, listExpandableWrapper, listExpandableCell } from "./styles.css.js";
 import { paddingExpandableCell } from "./variables.css.js";
 const Row = forwardRef(
   ({
@@ -76,7 +76,10 @@ const Row = forwardRef(
         setRefList([...refList, checkboxRef]);
       }
     }, [refList, setRefList]);
-    const childrenLength = Children.count(children) + (selectable ? 1 : 0) + (expandButton ? 1 : 0);
+    const validChildrenArray = Children.toArray(children).filter(
+      (child) => isValidElement(child)
+    );
+    const totalColumns = columns.length + (selectable ? 1 : 0) + (expandButton ? 1 : 0);
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs(
         "tr",
@@ -84,7 +87,7 @@ const Row = forwardRef(
           "aria-controls": expandable && expandedRowIds[id] ? expandedRowId : void 0,
           "aria-disabled": disabled,
           "aria-expanded": expandable ? expandedRowIds[id] : void 0,
-          className: `${className ? `${className} ` : ""}${listRow({ highlightAnimation, sentiment })}`,
+          className: cn(className, listRow({ highlightAnimation, sentiment })),
           "data-dragging": dataDragging,
           "data-highlight": selectable && !!selectedRowIds[id],
           "data-testid": dataTestid,
@@ -134,7 +137,7 @@ const Row = forwardRef(
                 children: expandedRowIds[id] ? /* @__PURE__ */ jsx(ArrowUpIcon, {}) : /* @__PURE__ */ jsx(ArrowDownIcon, {})
               }
             ) }) }) : null,
-            Children.map(children, (child, index) => {
+            validChildrenArray.map((child, index) => {
               const column = columns[index];
               return /* @__PURE__ */ jsx(
                 ColumnProvider,
@@ -143,7 +146,8 @@ const Row = forwardRef(
                   minWidth: column?.minWidth,
                   width: column?.width,
                   children: child
-                }
+                },
+                `column-provider-${child.key}`
               );
             })
           ]
@@ -166,7 +170,7 @@ const Row = forwardRef(
             Cell,
             {
               className: listExpandableCell,
-              colSpan: childrenLength,
+              colSpan: totalColumns,
               style: assignInlineVars({
                 [paddingExpandableCell]: theme.space[expandablePadding ?? "2"]
               }),

package/dist/components/List/SelectBar.d.ts

@@ -13,3 +13,4 @@ type SelectBarProps<T> = {
 };
 export declare const SelectBar: <T>({ children, data, idKey, className, }: SelectBarProps<T>) => import("react/jsx-runtime").JSX.Element | null;
 export {};
+//# sourceMappingURL=SelectBar.d.ts.map

package/dist/components/List/SelectBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectBar.d.ts","sourceRoot":"","sources":["../../../src/components/List/SelectBar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMtC,KAAK,cAAc,CAAC,CAAC,IAAI;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,CAAC,CAAC,EAAE;QAAE,aAAa,EAAE,CAAC,EAAE,CAAC;QAAC,WAAW,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,SAAS,CAAA;IAC3E,IAAI,EAAE,CAAC,EAAE,CAAA;IACT;;SAEK;IACL,KAAK,EAAE,MAAM,CAAC,CAAA;CACf,CAAA;AAED,eAAO,MAAM,SAAS,GAAI,CAAC,EAAG,uCAK3B,cAAc,CAAC,CAAC,CAAC,mDA4BnB,CAAA"}

package/dist/components/List/SkeletonRows.d.ts

@@ -5,3 +5,4 @@ type ListLoadingSkeletonProps = {
 };
 export declare const SkeletonRows: ({ selectable, rows, cols, }: ListLoadingSkeletonProps) => import("react/jsx-runtime").JSX.Element;
 export {};
+//# sourceMappingURL=SkeletonRows.d.ts.map

package/dist/components/List/SkeletonRows.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonRows.d.ts","sourceRoot":"","sources":["../../../src/components/List/SkeletonRows.tsx"],"names":[],"mappings":"AASA,KAAK,wBAAwB,GAAG;IAC9B,UAAU,EAAE,OAAO,CAAA;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED,eAAO,MAAM,YAAY,GAAI,6BAI1B,wBAAwB,4CA+B1B,CAAA"}

package/dist/components/List/SkeletonRows.js

@@ -1,10 +1,11 @@
 "use client";
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { cn } from "@ultraviolet/themes";
 import { Skeleton } from "../Skeleton/index.js";
 import { Cell } from "./Cell.js";
 import { ColumnProvider } from "./ColumnProvider.js";
 import { useListContext } from "./ListContext.js";
-import { listRow, listLoadingRow, listSkeleton } from "./styles.css.js";
+import { listSkeleton, listRow, listLoadingRow } from "./styles.css.js";
 const SkeletonRows = ({
   selectable,
   rows,
@@ -16,7 +17,7 @@ const SkeletonRows = ({
   return /* @__PURE__ */ jsx(Fragment, { children: rowArray.map((index) => /* @__PURE__ */ jsxs(
     "tr",
     {
-      className: `${listRow({ sentiment: "neutral" })} ${listLoadingRow}`,
+      className: cn(listRow({ sentiment: "neutral" }), listLoadingRow),
       id: `skeleton-${index}`,
       role: "row",
       children: [

package/dist/components/List/constants.d.ts

@@ -1,2 +1,3 @@
 export declare const SELECTABLE_CHECKBOX_SIZE = "500";
 export declare const EXPANDABLE_COLUMN_SIZE = "500";
+//# sourceMappingURL=constants.d.ts.map

package/dist/components/List/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/List/constants.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,wBAAwB,QAAQ,CAAA;AAC7C,eAAO,MAAM,sBAAsB,QAAQ,CAAA"}