@ultraviolet/ui 3.0.0-beta.8 → 3.0.0

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

@@ -1,9 +1,10 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 type CellProps = {
     children?: ReactNode;
     className?: string;
     'data-testid'?: string;
     colSpan?: number;
+    style?: CSSProperties;
 };
 export declare const Cell: import("react").ForwardRefExoticComponent<CellProps & import("react").RefAttributes<HTMLTableCellElement>>;
 export {};

package/dist/components/List/Cell.js

@@ -1,23 +1,33 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
-import _styled from "@emotion/styled/base";
+import { jsx } from "react/jsx-runtime";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { forwardRef } from "react";
-const StyledCell = /* @__PURE__ */ _styled("td", process.env.NODE_ENV === "production" ? {
-  target: "e1e6rck40"
-} : {
-  target: "e1e6rck40",
-  label: "StyledCell"
-})("display:table-cell;vertical-align:middle;height:", ({
-  theme
-}) => theme.sizing["750"], ";padding:0 ", ({
-  theme
-}) => theme.space["2"], ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL0xpc3QvQ2VsbC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBTTRCIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL0xpc3QvQ2VsbC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIGNsaWVudCdcblxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgdHlwZSB7IFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgZm9yd2FyZFJlZiB9IGZyb20gJ3JlYWN0J1xuXG5jb25zdCBTdHlsZWRDZWxsID0gc3R5bGVkLnRkYFxuICBkaXNwbGF5OiB0YWJsZS1jZWxsO1xuICB2ZXJ0aWNhbC1hbGlnbjogbWlkZGxlO1xuICBoZWlnaHQ6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc2l6aW5nWyc3NTAnXX07XG4gIHBhZGRpbmc6IDAgJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5zcGFjZVsnMiddfTtcbmBcblxudHlwZSBDZWxsUHJvcHMgPSB7XG4gIGNoaWxkcmVuPzogUmVhY3ROb2RlXG4gIGNsYXNzTmFtZT86IHN0cmluZ1xuICAnZGF0YS10ZXN0aWQnPzogc3RyaW5nXG4gIGNvbFNwYW4/OiBudW1iZXJcbn1cblxuZXhwb3J0IGNvbnN0IENlbGwgPSBmb3J3YXJkUmVmPEhUTUxUYWJsZUNlbGxFbGVtZW50LCBDZWxsUHJvcHM+KFxuICAoeyBjaGlsZHJlbiwgY2xhc3NOYW1lLCAnZGF0YS10ZXN0aWQnOiBkYXRhVGVzdGlkLCBjb2xTcGFuIH0sIHJlZikgPT4gKFxuICAgIDxTdHlsZWRDZWxsXG4gICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICAgIGNvbFNwYW49e2NvbFNwYW59XG4gICAgICBkYXRhLXRlc3RpZD17ZGF0YVRlc3RpZH1cbiAgICAgIHJlZj17cmVmfVxuICAgID5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L1N0eWxlZENlbGw+XG4gICksXG4pXG4iXX0= */"));
-const Cell = forwardRef(({
-  children,
-  className,
-  "data-testid": dataTestid,
-  colSpan
-}, ref) => /* @__PURE__ */ jsx(StyledCell, { className, colSpan, "data-testid": dataTestid, ref, children }));
+import { useColumnProvider } from "./ColumnProvider.js";
+import { listCell } from "./styles.css.js";
+import { maxWidthCell, minWidthCell, widthCell } from "./variables.css.js";
+const Cell = forwardRef(
+  ({ children, className, "data-testid": dataTestid, colSpan, style }, ref) => {
+    const { maxWidth, minWidth, width } = useColumnProvider();
+    return /* @__PURE__ */ jsx(
+      "td",
+      {
+        className: `${className ? `${className} ` : ""}${listCell}`,
+        colSpan,
+        "data-testid": dataTestid,
+        ref,
+        style: {
+          ...assignInlineVars({
+            [widthCell]: width,
+            [minWidthCell]: minWidth,
+            [maxWidthCell]: maxWidth
+          }),
+          ...style
+        },
+        children
+      }
+    );
+  }
+);
 export {
   Cell
 };

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

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+type ColumnProviderProps = {
+    width?: string;
+    maxWidth?: string;
+    minWidth?: string;
+    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 {};

package/dist/components/List/ColumnProvider.js

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

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

@@ -7,8 +7,8 @@ type HeaderCellProps = {
     onOrder?: (newOrder: 'asc' | 'desc') => void;
     info?: string;
     width?: string;
-    minWith?: string;
+    minWidth?: string;
     maxWidth?: string;
 };
-export declare const HeaderCell: ({ children, isOrdered, orderDirection, onOrder, className, info, width, minWith, maxWidth, }: HeaderCellProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const HeaderCell: ({ children, isOrdered, orderDirection, onOrder, className, info, width, minWidth, maxWidth, }: HeaderCellProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/List/HeaderCell.js

@@ -1,50 +1,12 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
-import _styled from "@emotion/styled/base";
-import { InformationOutlineIcon, SortIcon as SortIcon$1, SouthShortIcon } from "@ultraviolet/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { InformationOutlineIcon, SouthShortIcon, SortIcon as SortIcon$1 } from "@ultraviolet/icons";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { Stack } from "../Stack/index.js";
 import { Tooltip } from "../Tooltip/index.js";
-const StyledSortIcon = /* @__PURE__ */ _styled(SouthShortIcon, process.env.NODE_ENV === "production" ? {
-  shouldForwardProp: (prop) => !["order"].includes(prop),
-  target: "e1q5cnom1"
-} : {
-  shouldForwardProp: (prop) => !["order"].includes(prop),
-  target: "e1q5cnom1",
-  label: "StyledSortIcon"
-})("transform:", ({
-  order
-}) => order === "ascending" ? "rotate(-180deg)" : "none", ";transition:transform 0.2s ease-in-out;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL0xpc3QvSGVhZGVyQ2VsbC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBY3lDIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL0xpc3QvSGVhZGVyQ2VsbC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIGNsaWVudCdcblxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQge1xuICBJbmZvcm1hdGlvbk91dGxpbmVJY29uLFxuICBTb3J0SWNvbiBhcyBTb3J0SWNvblVWLFxuICBTb3V0aFNob3J0SWNvbixcbn0gZnJvbSAnQHVsdHJhdmlvbGV0L2ljb25zJ1xuaW1wb3J0IHR5cGUgeyBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IFN0YWNrIH0gZnJvbSAnLi4vU3RhY2snXG5pbXBvcnQgeyBUb29sdGlwIH0gZnJvbSAnLi4vVG9vbHRpcCdcblxuY29uc3QgU3R5bGVkU29ydEljb24gPSBzdHlsZWQoU291dGhTaG9ydEljb24sIHtcbiAgc2hvdWxkRm9yd2FyZFByb3A6IHByb3AgPT4gIVsnb3JkZXInXS5pbmNsdWRlcyhwcm9wKSxcbn0pPHsgb3JkZXI6ICdhc2NlbmRpbmcnIHwgJ2Rlc2NlbmRpbmcnIH0+YFxuICB0cmFuc2Zvcm06ICR7KHsgb3JkZXIgfSkgPT5cbiAgICBvcmRlciA9PT0gJ2FzY2VuZGluZycgPyAncm90YXRlKC0xODBkZWcpJyA6ICdub25lJ307XG4gIHRyYW5zaXRpb246IHRyYW5zZm9ybSAwLjJzIGVhc2UtaW4tb3V0O1xuYFxuXG5jb25zdCBTb3J0SWNvbiA9ICh7IG9yZGVyIH06IHsgb3JkZXI/OiAnYXNjZW5kaW5nJyB8ICdkZXNjZW5kaW5nJyB9KSA9PlxuICBvcmRlciA/IChcbiAgICA8U3R5bGVkU29ydEljb24gb3JkZXI9e29yZGVyfSBzZW50aW1lbnQ9XCJwcmltYXJ5XCIgLz5cbiAgKSA6IChcbiAgICA8U29ydEljb25VViBzZW50aW1lbnQ9XCJuZXV0cmFsXCIgLz5cbiAgKVxuXG5jb25zdCBTdHlsZWRIZWFkZXJDZWxsID0gc3R5bGVkKCd0aCcsIHtcbiAgc2hvdWxkRm9yd2FyZFByb3A6IHByb3AgPT4gIVsnd2lkdGgnLCAnbWluV2lkdGgnLCAnbWF4V2lkdGgnXS5pbmNsdWRlcyhwcm9wKSxcbn0pPHsgd2lkdGg/OiBzdHJpbmc7IG1pbldpZHRoPzogc3RyaW5nOyBtYXhXaWR0aD86IHN0cmluZyB9PmBcbiAgZGlzcGxheTogdGFibGUtY2VsbDtcbiAgdGV4dC1hbGlnbjogbGVmdDtcbiAgdmVydGljYWwtYWxpZ246IG1pZGRsZTtcbiAgZm9udC1zaXplOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnR5cG9ncmFwaHkuYm9keVNtYWxsLmZvbnRTaXplfTtcbiAgZm9udC13ZWlnaHQ6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUudHlwb2dyYXBoeS5ib2R5U21hbGwud2VpZ2h0fTtcbiAgZm9udC1mYW1pbHk6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUudHlwb2dyYXBoeS5ib2R5U21hbGwuZm9udEZhbWlseX07XG4gIGNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5uZXV0cmFsLnRleHR9O1xuICBnYXA6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbJzEnXX07XG4gIHBhZGRpbmc6IDAgJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5zcGFjZVsnMiddfTtcblxuICAmW3JvbGUqPSdidXR0b24nXSB7XG4gICAgY3Vyc29yOiBwb2ludGVyO1xuICAgIHVzZXItc2VsZWN0OiBub25lO1xuICB9XG5cbiAgJlthcmlhLXNvcnRdIHtcbiAgICBjb2xvcjogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMucHJpbWFyeS50ZXh0fTtcbiAgfVxuXG4gIHdpZHRoOiAkeyh7IHdpZHRoIH0pID0+IHdpZHRofTtcbiAgbWluLXdpZHRoOiAkeyh7IG1pbldpZHRoIH0pID0+IG1pbldpZHRofTtcbiAgbWF4LXdpZHRoOiAkeyh7IG1heFdpZHRoIH0pID0+IG1heFdpZHRofTtcbmBcblxudHlwZSBIZWFkZXJDZWxsUHJvcHMgPSB7XG4gIGNoaWxkcmVuOiBSZWFjdE5vZGVcbiAgY2xhc3NOYW1lPzogc3RyaW5nXG4gIGlzT3JkZXJlZD86IGJvb2xlYW5cbiAgb3JkZXJEaXJlY3Rpb24/OiAnYXNjJyB8ICdkZXNjJyB8ICdub25lJ1xuICBvbk9yZGVyPzogKG5ld09yZGVyOiAnYXNjJyB8ICdkZXNjJykgPT4gdm9pZFxuICBpbmZvPzogc3RyaW5nXG4gIHdpZHRoPzogc3RyaW5nXG4gIG1pbldpdGg/OiBzdHJpbmdcbiAgbWF4V2lkdGg/OiBzdHJpbmdcbn1cblxuZXhwb3J0IGNvbnN0IEhlYWRlckNlbGwgPSAoe1xuICBjaGlsZHJlbixcbiAgaXNPcmRlcmVkLFxuICBvcmRlckRpcmVjdGlvbixcbiAgb25PcmRlcixcbiAgY2xhc3NOYW1lLFxuICBpbmZvLFxuICB3aWR0aCxcbiAgbWluV2l0aCxcbiAgbWF4V2lkdGgsXG59OiBIZWFkZXJDZWxsUHJvcHMpID0+IHtcbiAgbGV0IG9yZGVyOiB1bmRlZmluZWQgfCAnYXNjZW5kaW5nJyB8ICdkZXNjZW5kaW5nJ1xuICBpZiAoaXNPcmRlcmVkICYmIG9yZGVyRGlyZWN0aW9uID09PSAnYXNjJykge1xuICAgIG9yZGVyID0gJ2FzY2VuZGluZydcbiAgfSBlbHNlIGlmIChpc09yZGVyZWQgJiYgb3JkZXJEaXJlY3Rpb24gPT09ICdkZXNjJykge1xuICAgIG9yZGVyID0gJ2Rlc2NlbmRpbmcnXG4gIH1cblxuICBjb25zdCBoYW5kbGVPcmRlciA9IG9uT3JkZXJcbiAgICA/ICgpID0+IG9uT3JkZXIob3JkZXIgPT09ICdhc2NlbmRpbmcnID8gJ2Rlc2MnIDogJ2FzYycpXG4gICAgOiB1bmRlZmluZWRcblxuICByZXR1cm4gKFxuICAgIDxTdHlsZWRIZWFkZXJDZWxsXG4gICAgICBhcmlhLXNvcnQ9e29yZGVyfVxuICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWV9XG4gICAgICBtYXhXaWR0aD17bWF4V2lkdGh9XG4gICAgICBtaW5XaWR0aD17bWluV2l0aH1cbiAgICAgIG9uQ2xpY2s9e2hhbmRsZU9yZGVyfVxuICAgICAgb25LZXlEb3duPXtcbiAgICAgICAgaGFuZGxlT3JkZXJcbiAgICAgICAgICA/IGV2ZW50ID0+IHtcbiAgICAgICAgICAgICAgaWYgKGV2ZW50LmtleSA9PT0gJyAnIHx8IGV2ZW50LmtleSA9PT0gJ0VudGVyJykge1xuICAgICAgICAgICAgICAgIGhhbmRsZU9yZGVyKClcbiAgICAgICAgICAgICAgICBpZiAoZXZlbnQua2V5ID09PSAnICcpIHtcbiAgICAgICAgICAgICAgICAgIC8vIEBub3RlOiBpdCBhdm9pZCBzY3JvbGwgd2hlbiBwcmVzc2luZyBTcGFjZVxuICAgICAgICAgICAgICAgICAgZXZlbnQucHJldmVudERlZmF1bHQoKVxuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgfVxuICAgICAgICAgIDogdW5kZWZpbmVkXG4gICAgICB9XG4gICAgICByb2xlPXtvbk9yZGVyID8gJ2J1dHRvbiBjb2x1bW5oZWFkZXInIDogdW5kZWZpbmVkfVxuICAgICAgdGFiSW5kZXg9e2hhbmRsZU9yZGVyID8gMCA6IC0xfVxuICAgICAgd2lkdGg9e3dpZHRofVxuICAgID5cbiAgICAgIDxTdGFjayBhbGlnbkl0ZW1zPVwiY2VudGVyXCIgZGlyZWN0aW9uPVwicm93XCIgZ2FwPXsxfT5cbiAgICAgICAge2NoaWxkcmVufVxuICAgICAgICB7aW5mbyA/IChcbiAgICAgICAgICA8VG9vbHRpcCB0ZXh0PXtpbmZvfT5cbiAgICAgICAgICAgIDxJbmZvcm1hdGlvbk91dGxpbmVJY29uXG4gICAgICAgICAgICAgIHByb21pbmVuY2U9XCJ3ZWFrXCJcbiAgICAgICAgICAgICAgc2VudGltZW50PVwibmV1dHJhbFwiXG4gICAgICAgICAgICAgIHNpemU9XCJzbWFsbFwiXG4gICAgICAgICAgICAvPlxuICAgICAgICAgIDwvVG9vbHRpcD5cbiAgICAgICAgKSA6IG51bGx9XG4gICAgICAgIHtvcmRlckRpcmVjdGlvbiAhPT0gdW5kZWZpbmVkICYmIGlzT3JkZXJlZCAhPT0gdW5kZWZpbmVkID8gKFxuICAgICAgICAgIDxTb3J0SWNvbiBvcmRlcj17b3JkZXJ9IC8+XG4gICAgICAgICkgOiBudWxsfVxuICAgICAgPC9TdGFjaz5cbiAgICA8L1N0eWxlZEhlYWRlckNlbGw+XG4gIClcbn1cbiJdfQ== */"));
-const SortIcon = ({
-  order
-}) => order ? /* @__PURE__ */ jsx(StyledSortIcon, { order, sentiment: "primary" }) : /* @__PURE__ */ jsx(SortIcon$1, { sentiment: "neutral" });
-const StyledHeaderCell = /* @__PURE__ */ _styled("th", process.env.NODE_ENV === "production" ? {
-  shouldForwardProp: (prop) => !["width", "minWidth", "maxWidth"].includes(prop),
-  target: "e1q5cnom0"
-} : {
-  shouldForwardProp: (prop) => !["width", "minWidth", "maxWidth"].includes(prop),
-  target: "e1q5cnom0",
-  label: "StyledHeaderCell"
-})("display:table-cell;text-align:left;vertical-align:middle;font-size:", ({
-  theme
-}) => theme.typography.bodySmall.fontSize, ";font-weight:", ({
-  theme
-}) => theme.typography.bodySmall.weight, ";font-family:", ({
-  theme
-}) => theme.typography.bodySmall.fontFamily, ";color:", ({
-  theme
-}) => theme.colors.neutral.text, ";gap:", ({
-  theme
-}) => theme.space["1"], ";padding:0 ", ({
-  theme
-}) => theme.space["2"], ";&[role*='button']{cursor:pointer;user-select:none;}&[aria-sort]{color:", ({
-  theme
-}) => theme.colors.primary.text, ";}width:", ({
-  width
-}) => width, ";min-width:", ({
-  minWidth
-}) => minWidth, ";max-width:", ({
-  maxWidth
-}) => maxWidth, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL0xpc3QvSGVhZGVyQ2VsbC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNkI0RCIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay91bHRyYXZpb2xldC91bHRyYXZpb2xldC9wYWNrYWdlcy91aS9zcmMvY29tcG9uZW50cy9MaXN0L0hlYWRlckNlbGwudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHtcbiAgSW5mb3JtYXRpb25PdXRsaW5lSWNvbixcbiAgU29ydEljb24gYXMgU29ydEljb25VVixcbiAgU291dGhTaG9ydEljb24sXG59IGZyb20gJ0B1bHRyYXZpb2xldC9pY29ucydcbmltcG9ydCB0eXBlIHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBTdGFjayB9IGZyb20gJy4uL1N0YWNrJ1xuaW1wb3J0IHsgVG9vbHRpcCB9IGZyb20gJy4uL1Rvb2x0aXAnXG5cbmNvbnN0IFN0eWxlZFNvcnRJY29uID0gc3R5bGVkKFNvdXRoU2hvcnRJY29uLCB7XG4gIHNob3VsZEZvcndhcmRQcm9wOiBwcm9wID0+ICFbJ29yZGVyJ10uaW5jbHVkZXMocHJvcCksXG59KTx7IG9yZGVyOiAnYXNjZW5kaW5nJyB8ICdkZXNjZW5kaW5nJyB9PmBcbiAgdHJhbnNmb3JtOiAkeyh7IG9yZGVyIH0pID0+XG4gICAgb3JkZXIgPT09ICdhc2NlbmRpbmcnID8gJ3JvdGF0ZSgtMTgwZGVnKScgOiAnbm9uZSd9O1xuICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gMC4ycyBlYXNlLWluLW91dDtcbmBcblxuY29uc3QgU29ydEljb24gPSAoeyBvcmRlciB9OiB7IG9yZGVyPzogJ2FzY2VuZGluZycgfCAnZGVzY2VuZGluZycgfSkgPT5cbiAgb3JkZXIgPyAoXG4gICAgPFN0eWxlZFNvcnRJY29uIG9yZGVyPXtvcmRlcn0gc2VudGltZW50PVwicHJpbWFyeVwiIC8+XG4gICkgOiAoXG4gICAgPFNvcnRJY29uVVYgc2VudGltZW50PVwibmV1dHJhbFwiIC8+XG4gIClcblxuY29uc3QgU3R5bGVkSGVhZGVyQ2VsbCA9IHN0eWxlZCgndGgnLCB7XG4gIHNob3VsZEZvcndhcmRQcm9wOiBwcm9wID0+ICFbJ3dpZHRoJywgJ21pbldpZHRoJywgJ21heFdpZHRoJ10uaW5jbHVkZXMocHJvcCksXG59KTx7IHdpZHRoPzogc3RyaW5nOyBtaW5XaWR0aD86IHN0cmluZzsgbWF4V2lkdGg/OiBzdHJpbmcgfT5gXG4gIGRpc3BsYXk6IHRhYmxlLWNlbGw7XG4gIHRleHQtYWxpZ246IGxlZnQ7XG4gIHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7XG4gIGZvbnQtc2l6ZTogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS50eXBvZ3JhcGh5LmJvZHlTbWFsbC5mb250U2l6ZX07XG4gIGZvbnQtd2VpZ2h0OiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnR5cG9ncmFwaHkuYm9keVNtYWxsLndlaWdodH07XG4gIGZvbnQtZmFtaWx5OiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnR5cG9ncmFwaHkuYm9keVNtYWxsLmZvbnRGYW1pbHl9O1xuICBjb2xvcjogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMubmV1dHJhbC50ZXh0fTtcbiAgZ2FwOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNwYWNlWycxJ119O1xuICBwYWRkaW5nOiAwICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbJzInXX07XG5cbiAgJltyb2xlKj0nYnV0dG9uJ10ge1xuICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICB1c2VyLXNlbGVjdDogbm9uZTtcbiAgfVxuXG4gICZbYXJpYS1zb3J0XSB7XG4gICAgY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzLnByaW1hcnkudGV4dH07XG4gIH1cblxuICB3aWR0aDogJHsoeyB3aWR0aCB9KSA9PiB3aWR0aH07XG4gIG1pbi13aWR0aDogJHsoeyBtaW5XaWR0aCB9KSA9PiBtaW5XaWR0aH07XG4gIG1heC13aWR0aDogJHsoeyBtYXhXaWR0aCB9KSA9PiBtYXhXaWR0aH07XG5gXG5cbnR5cGUgSGVhZGVyQ2VsbFByb3BzID0ge1xuICBjaGlsZHJlbjogUmVhY3ROb2RlXG4gIGNsYXNzTmFtZT86IHN0cmluZ1xuICBpc09yZGVyZWQ/OiBib29sZWFuXG4gIG9yZGVyRGlyZWN0aW9uPzogJ2FzYycgfCAnZGVzYycgfCAnbm9uZSdcbiAgb25PcmRlcj86IChuZXdPcmRlcjogJ2FzYycgfCAnZGVzYycpID0+IHZvaWRcbiAgaW5mbz86IHN0cmluZ1xuICB3aWR0aD86IHN0cmluZ1xuICBtaW5XaXRoPzogc3RyaW5nXG4gIG1heFdpZHRoPzogc3RyaW5nXG59XG5cbmV4cG9ydCBjb25zdCBIZWFkZXJDZWxsID0gKHtcbiAgY2hpbGRyZW4sXG4gIGlzT3JkZXJlZCxcbiAgb3JkZXJEaXJlY3Rpb24sXG4gIG9uT3JkZXIsXG4gIGNsYXNzTmFtZSxcbiAgaW5mbyxcbiAgd2lkdGgsXG4gIG1pbldpdGgsXG4gIG1heFdpZHRoLFxufTogSGVhZGVyQ2VsbFByb3BzKSA9PiB7XG4gIGxldCBvcmRlcjogdW5kZWZpbmVkIHwgJ2FzY2VuZGluZycgfCAnZGVzY2VuZGluZydcbiAgaWYgKGlzT3JkZXJlZCAmJiBvcmRlckRpcmVjdGlvbiA9PT0gJ2FzYycpIHtcbiAgICBvcmRlciA9ICdhc2NlbmRpbmcnXG4gIH0gZWxzZSBpZiAoaXNPcmRlcmVkICYmIG9yZGVyRGlyZWN0aW9uID09PSAnZGVzYycpIHtcbiAgICBvcmRlciA9ICdkZXNjZW5kaW5nJ1xuICB9XG5cbiAgY29uc3QgaGFuZGxlT3JkZXIgPSBvbk9yZGVyXG4gICAgPyAoKSA9PiBvbk9yZGVyKG9yZGVyID09PSAnYXNjZW5kaW5nJyA/ICdkZXNjJyA6ICdhc2MnKVxuICAgIDogdW5kZWZpbmVkXG5cbiAgcmV0dXJuIChcbiAgICA8U3R5bGVkSGVhZGVyQ2VsbFxuICAgICAgYXJpYS1zb3J0PXtvcmRlcn1cbiAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lfVxuICAgICAgbWF4V2lkdGg9e21heFdpZHRofVxuICAgICAgbWluV2lkdGg9e21pbldpdGh9XG4gICAgICBvbkNsaWNrPXtoYW5kbGVPcmRlcn1cbiAgICAgIG9uS2V5RG93bj17XG4gICAgICAgIGhhbmRsZU9yZGVyXG4gICAgICAgICAgPyBldmVudCA9PiB7XG4gICAgICAgICAgICAgIGlmIChldmVudC5rZXkgPT09ICcgJyB8fCBldmVudC5rZXkgPT09ICdFbnRlcicpIHtcbiAgICAgICAgICAgICAgICBoYW5kbGVPcmRlcigpXG4gICAgICAgICAgICAgICAgaWYgKGV2ZW50LmtleSA9PT0gJyAnKSB7XG4gICAgICAgICAgICAgICAgICAvLyBAbm90ZTogaXQgYXZvaWQgc2Nyb2xsIHdoZW4gcHJlc3NpbmcgU3BhY2VcbiAgICAgICAgICAgICAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KClcbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIH1cbiAgICAgICAgICA6IHVuZGVmaW5lZFxuICAgICAgfVxuICAgICAgcm9sZT17b25PcmRlciA/ICdidXR0b24gY29sdW1uaGVhZGVyJyA6IHVuZGVmaW5lZH1cbiAgICAgIHRhYkluZGV4PXtoYW5kbGVPcmRlciA/IDAgOiAtMX1cbiAgICAgIHdpZHRoPXt3aWR0aH1cbiAgICA+XG4gICAgICA8U3RhY2sgYWxpZ25JdGVtcz1cImNlbnRlclwiIGRpcmVjdGlvbj1cInJvd1wiIGdhcD17MX0+XG4gICAgICAgIHtjaGlsZHJlbn1cbiAgICAgICAge2luZm8gPyAoXG4gICAgICAgICAgPFRvb2x0aXAgdGV4dD17aW5mb30+XG4gICAgICAgICAgICA8SW5mb3JtYXRpb25PdXRsaW5lSWNvblxuICAgICAgICAgICAgICBwcm9taW5lbmNlPVwid2Vha1wiXG4gICAgICAgICAgICAgIHNlbnRpbWVudD1cIm5ldXRyYWxcIlxuICAgICAgICAgICAgICBzaXplPVwic21hbGxcIlxuICAgICAgICAgICAgLz5cbiAgICAgICAgICA8L1Rvb2x0aXA+XG4gICAgICAgICkgOiBudWxsfVxuICAgICAgICB7b3JkZXJEaXJlY3Rpb24gIT09IHVuZGVmaW5lZCAmJiBpc09yZGVyZWQgIT09IHVuZGVmaW5lZCA/IChcbiAgICAgICAgICA8U29ydEljb24gb3JkZXI9e29yZGVyfSAvPlxuICAgICAgICApIDogbnVsbH1cbiAgICAgIDwvU3RhY2s+XG4gICAgPC9TdHlsZWRIZWFkZXJDZWxsPlxuICApXG59XG4iXX0= */"));
+import { listHeaderCell, listSortIcon } from "./styles.css.js";
+import { maxWidthHeaderCell, minWidthHeaderCell, widthHeaderCell } from "./variables.css.js";
+const SortIcon = ({ order }) => order ? /* @__PURE__ */ jsx(SouthShortIcon, { className: listSortIcon[order], sentiment: "primary" }) : /* @__PURE__ */ jsx(SortIcon$1, { sentiment: "neutral" });
 const HeaderCell = ({
   children,
   isOrdered,
@@ -53,7 +15,7 @@ const HeaderCell = ({
   className,
   info,
   width,
-  minWith,
+  minWidth,
   maxWidth
 }) => {
   let order;
@@ -63,18 +25,41 @@ const HeaderCell = ({
     order = "descending";
   }
   const handleOrder = onOrder ? () => onOrder(order === "ascending" ? "desc" : "asc") : void 0;
-  return /* @__PURE__ */ jsx(StyledHeaderCell, { "aria-sort": order, className, maxWidth, minWidth: minWith, onClick: handleOrder, onKeyDown: handleOrder ? (event) => {
-    if (event.key === " " || event.key === "Enter") {
-      handleOrder();
-      if (event.key === " ") {
-        event.preventDefault();
-      }
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      "aria-sort": order,
+      className: `${className ? `${className} ` : ""}${listHeaderCell}`,
+      onClick: handleOrder,
+      onKeyDown: handleOrder ? (event) => {
+        if (event.key === " " || event.key === "Enter") {
+          handleOrder();
+          if (event.key === " ") {
+            event.preventDefault();
+          }
+        }
+      } : void 0,
+      role: onOrder ? "button columnheader" : void 0,
+      style: assignInlineVars({
+        [widthHeaderCell]: width,
+        [minWidthHeaderCell]: minWidth,
+        [maxWidthHeaderCell]: maxWidth
+      }),
+      tabIndex: handleOrder ? 0 : -1,
+      children: /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", gap: 1, children: [
+        children,
+        info ? /* @__PURE__ */ jsx(Tooltip, { text: info, children: /* @__PURE__ */ jsx(
+          InformationOutlineIcon,
+          {
+            prominence: "weak",
+            sentiment: "neutral",
+            size: "small"
+          }
+        ) }) : null,
+        orderDirection !== void 0 && isOrdered !== void 0 ? /* @__PURE__ */ jsx(SortIcon, { order }) : null
+      ] })
     }
-  } : void 0, role: onOrder ? "button columnheader" : void 0, tabIndex: handleOrder ? 0 : -1, width, children: /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", gap: 1, children: [
-    children,
-    info ? /* @__PURE__ */ jsx(Tooltip, { text: info, children: /* @__PURE__ */ jsx(InformationOutlineIcon, { prominence: "weak", sentiment: "neutral", size: "small" }) }) : null,
-    orderDirection !== void 0 && isOrdered !== void 0 ? /* @__PURE__ */ jsx(SortIcon, { order }) : null
-  ] }) });
+  );
 };
 export {
   HeaderCell

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

@@ -3,5 +3,5 @@ type RowProps = {
     hasSelectAllColumn: boolean;
     children: ReactNode;
 };
-export declare const HeaderRow: ({ children, hasSelectAllColumn }: RowProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const HeaderRow: ({ children, hasSelectAllColumn }: RowProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/List/HeaderRow.js

@@ -1,42 +1,25 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
-import _styled from "@emotion/styled/base";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Checkbox } from "../Checkbox/index.js";
-import { SELECTABLE_CHECKBOX_SIZE } from "./constants.js";
 import { HeaderCell } from "./HeaderCell.js";
 import { useListContext } from "./ListContext.js";
-const StyledHeaderRow = /* @__PURE__ */ _styled("tr", process.env.NODE_ENV === "production" ? {
-  target: "epvvdb71"
-} : {
-  target: "epvvdb71",
-  label: "StyledHeaderRow"
-})("display:table-row;vertical-align:middle;padding:0 ", ({
-  theme
-}) => theme.space["2"], ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL0xpc3QvSGVhZGVyUm93LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFTaUMiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvdWx0cmF2aW9sZXQvdWx0cmF2aW9sZXQvcGFja2FnZXMvdWkvc3JjL2NvbXBvbmVudHMvTGlzdC9IZWFkZXJSb3cudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHR5cGUgeyBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IENoZWNrYm94IH0gZnJvbSAnLi4vQ2hlY2tib3gnXG5pbXBvcnQgeyBTRUxFQ1RBQkxFX0NIRUNLQk9YX1NJWkUgfSBmcm9tICcuL2NvbnN0YW50cydcbmltcG9ydCB7IEhlYWRlckNlbGwgfSBmcm9tICcuL0hlYWRlckNlbGwnXG5pbXBvcnQgeyB1c2VMaXN0Q29udGV4dCB9IGZyb20gJy4vTGlzdENvbnRleHQnXG5cbmNvbnN0IFN0eWxlZEhlYWRlclJvdyA9IHN0eWxlZC50cmBcbiAgLyogTGlzdCBpdHNlbGYgYWxzbyBhcHBseSBzdHlsZSBhYm91dCBjb21tb24gdGVtcGxhdGluZyBiZXR3ZWVuIEhlYWRlclJvdyBhbmQgb3RoZXIgUm93cyAqL1xuICBkaXNwbGF5OiB0YWJsZS1yb3c7XG4gIHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7XG4gIHBhZGRpbmc6IDAgJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5zcGFjZVsnMiddfTtcbmBcblxuY29uc3QgTm9QYWRkaW5nSGVhZGVyQ2VsbCA9IHN0eWxlZChIZWFkZXJDZWxsKWBcbiAgcGFkZGluZzogMDtcblxuICAmOmZpcnN0LW9mLXR5cGUge1xuICAgIHBhZGRpbmctbGVmdDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5zcGFjZVsnMiddfTtcbiAgfVxuXG4gIG1heC13aWR0aDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5zaXppbmdbU0VMRUNUQUJMRV9DSEVDS0JPWF9TSVpFXX07XG5gXG5cbnR5cGUgUm93UHJvcHMgPSB7XG4gIGhhc1NlbGVjdEFsbENvbHVtbjogYm9vbGVhblxuICBjaGlsZHJlbjogUmVhY3ROb2RlXG59XG5cbmV4cG9ydCBjb25zdCBIZWFkZXJSb3cgPSAoeyBjaGlsZHJlbiwgaGFzU2VsZWN0QWxsQ29sdW1uIH06IFJvd1Byb3BzKSA9PiB7XG4gIGNvbnN0IHsgYWxsUm93U2VsZWN0VmFsdWUsIHNlbGVjdEFsbEhhbmRsZXIsIHNlbGVjdGVkUm93SWRzLCBleHBhbmRCdXR0b24gfSA9XG4gICAgdXNlTGlzdENvbnRleHQoKVxuXG4gIGNvbnN0IHNlbGVjdGFibGVSb3dDb3VudCA9IE9iamVjdC5rZXlzKHNlbGVjdGVkUm93SWRzKS5sZW5ndGhcblxuICByZXR1cm4gKFxuICAgIDx0aGVhZD5cbiAgICAgIDxTdHlsZWRIZWFkZXJSb3c+XG4gICAgICAgIHtoYXNTZWxlY3RBbGxDb2x1bW4gPyAoXG4gICAgICAgICAgPE5vUGFkZGluZ0hlYWRlckNlbGw+XG4gICAgICAgICAgICA8Q2hlY2tib3hcbiAgICAgICAgICAgICAgYXJpYS1sYWJlbD1cInNlbGVjdCBhbGxcIlxuICAgICAgICAgICAgICBjaGVja2VkPXthbGxSb3dTZWxlY3RWYWx1ZX1cbiAgICAgICAgICAgICAgZGlzYWJsZWQ9e3NlbGVjdGFibGVSb3dDb3VudCA9PT0gMH1cbiAgICAgICAgICAgICAgbmFtZT1cImxpc3Qtc2VsZWN0LWNoZWNrYm94XCJcbiAgICAgICAgICAgICAgb25DaGFuZ2U9e3NlbGVjdEFsbEhhbmRsZXJ9XG4gICAgICAgICAgICAgIHZhbHVlPVwiYWxsXCJcbiAgICAgICAgICAgIC8+XG4gICAgICAgICAgPC9Ob1BhZGRpbmdIZWFkZXJDZWxsPlxuICAgICAgICApIDogbnVsbH1cbiAgICAgICAge2V4cGFuZEJ1dHRvbiA/IChcbiAgICAgICAgICA8Tm9QYWRkaW5nSGVhZGVyQ2VsbD57bnVsbH08L05vUGFkZGluZ0hlYWRlckNlbGw+XG4gICAgICAgICkgOiBudWxsfVxuICAgICAgICB7Y2hpbGRyZW59XG4gICAgICA8L1N0eWxlZEhlYWRlclJvdz5cbiAgICA8L3RoZWFkPlxuICApXG59XG4iXX0= */"));
-const NoPaddingHeaderCell = /* @__PURE__ */ _styled(HeaderCell, process.env.NODE_ENV === "production" ? {
-  target: "epvvdb70"
-} : {
-  target: "epvvdb70",
-  label: "NoPaddingHeaderCell"
-})("padding:0;&:first-of-type{padding-left:", ({
-  theme
-}) => theme.space["2"], ";}max-width:", ({
-  theme
-}) => theme.sizing[SELECTABLE_CHECKBOX_SIZE], ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL0xpc3QvSGVhZGVyUm93LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnQjhDIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL0xpc3QvSGVhZGVyUm93LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIid1c2UgY2xpZW50J1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB0eXBlIHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBDaGVja2JveCB9IGZyb20gJy4uL0NoZWNrYm94J1xuaW1wb3J0IHsgU0VMRUNUQUJMRV9DSEVDS0JPWF9TSVpFIH0gZnJvbSAnLi9jb25zdGFudHMnXG5pbXBvcnQgeyBIZWFkZXJDZWxsIH0gZnJvbSAnLi9IZWFkZXJDZWxsJ1xuaW1wb3J0IHsgdXNlTGlzdENvbnRleHQgfSBmcm9tICcuL0xpc3RDb250ZXh0J1xuXG5jb25zdCBTdHlsZWRIZWFkZXJSb3cgPSBzdHlsZWQudHJgXG4gIC8qIExpc3QgaXRzZWxmIGFsc28gYXBwbHkgc3R5bGUgYWJvdXQgY29tbW9uIHRlbXBsYXRpbmcgYmV0d2VlbiBIZWFkZXJSb3cgYW5kIG90aGVyIFJvd3MgKi9cbiAgZGlzcGxheTogdGFibGUtcm93O1xuICB2ZXJ0aWNhbC1hbGlnbjogbWlkZGxlO1xuICBwYWRkaW5nOiAwICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbJzInXX07XG5gXG5cbmNvbnN0IE5vUGFkZGluZ0hlYWRlckNlbGwgPSBzdHlsZWQoSGVhZGVyQ2VsbClgXG4gIHBhZGRpbmc6IDA7XG5cbiAgJjpmaXJzdC1vZi10eXBlIHtcbiAgICBwYWRkaW5nLWxlZnQ6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbJzInXX07XG4gIH1cblxuICBtYXgtd2lkdGg6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc2l6aW5nW1NFTEVDVEFCTEVfQ0hFQ0tCT1hfU0laRV19O1xuYFxuXG50eXBlIFJvd1Byb3BzID0ge1xuICBoYXNTZWxlY3RBbGxDb2x1bW46IGJvb2xlYW5cbiAgY2hpbGRyZW46IFJlYWN0Tm9kZVxufVxuXG5leHBvcnQgY29uc3QgSGVhZGVyUm93ID0gKHsgY2hpbGRyZW4sIGhhc1NlbGVjdEFsbENvbHVtbiB9OiBSb3dQcm9wcykgPT4ge1xuICBjb25zdCB7IGFsbFJvd1NlbGVjdFZhbHVlLCBzZWxlY3RBbGxIYW5kbGVyLCBzZWxlY3RlZFJvd0lkcywgZXhwYW5kQnV0dG9uIH0gPVxuICAgIHVzZUxpc3RDb250ZXh0KClcblxuICBjb25zdCBzZWxlY3RhYmxlUm93Q291bnQgPSBPYmplY3Qua2V5cyhzZWxlY3RlZFJvd0lkcykubGVuZ3RoXG5cbiAgcmV0dXJuIChcbiAgICA8dGhlYWQ+XG4gICAgICA8U3R5bGVkSGVhZGVyUm93PlxuICAgICAgICB7aGFzU2VsZWN0QWxsQ29sdW1uID8gKFxuICAgICAgICAgIDxOb1BhZGRpbmdIZWFkZXJDZWxsPlxuICAgICAgICAgICAgPENoZWNrYm94XG4gICAgICAgICAgICAgIGFyaWEtbGFiZWw9XCJzZWxlY3QgYWxsXCJcbiAgICAgICAgICAgICAgY2hlY2tlZD17YWxsUm93U2VsZWN0VmFsdWV9XG4gICAgICAgICAgICAgIGRpc2FibGVkPXtzZWxlY3RhYmxlUm93Q291bnQgPT09IDB9XG4gICAgICAgICAgICAgIG5hbWU9XCJsaXN0LXNlbGVjdC1jaGVja2JveFwiXG4gICAgICAgICAgICAgIG9uQ2hhbmdlPXtzZWxlY3RBbGxIYW5kbGVyfVxuICAgICAgICAgICAgICB2YWx1ZT1cImFsbFwiXG4gICAgICAgICAgICAvPlxuICAgICAgICAgIDwvTm9QYWRkaW5nSGVhZGVyQ2VsbD5cbiAgICAgICAgKSA6IG51bGx9XG4gICAgICAgIHtleHBhbmRCdXR0b24gPyAoXG4gICAgICAgICAgPE5vUGFkZGluZ0hlYWRlckNlbGw+e251bGx9PC9Ob1BhZGRpbmdIZWFkZXJDZWxsPlxuICAgICAgICApIDogbnVsbH1cbiAgICAgICAge2NoaWxkcmVufVxuICAgICAgPC9TdHlsZWRIZWFkZXJSb3c+XG4gICAgPC90aGVhZD5cbiAgKVxufVxuIl19 */"));
-const HeaderRow = ({
-  children,
-  hasSelectAllColumn
-}) => {
-  const {
-    allRowSelectValue,
-    selectAllHandler,
-    selectedRowIds,
-    expandButton
-  } = useListContext();
+import { listHeaderRow, listNoPaddingHeaderCell } from "./styles.css.js";
+const HeaderRow = ({ children, hasSelectAllColumn }) => {
+  const { allRowSelectValue, selectAllHandler, selectedRowIds, expandButton } = useListContext();
   const selectableRowCount = Object.keys(selectedRowIds).length;
-  return /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs(StyledHeaderRow, { children: [
-    hasSelectAllColumn ? /* @__PURE__ */ jsx(NoPaddingHeaderCell, { children: /* @__PURE__ */ jsx(Checkbox, { "aria-label": "select all", checked: allRowSelectValue, disabled: selectableRowCount === 0, name: "list-select-checkbox", onChange: selectAllHandler, value: "all" }) }) : null,
-    expandButton ? /* @__PURE__ */ jsx(NoPaddingHeaderCell, { children: null }) : null,
+  return /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: listHeaderRow, children: [
+    hasSelectAllColumn ? /* @__PURE__ */ jsx(HeaderCell, { className: listNoPaddingHeaderCell, children: /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        "aria-label": "select all",
+        checked: allRowSelectValue,
+        disabled: selectableRowCount === 0,
+        name: "list-select-checkbox",
+        onChange: selectAllHandler,
+        value: "all"
+      }
+    ) }) : null,
+    expandButton ? /* @__PURE__ */ jsx(HeaderCell, { className: listNoPaddingHeaderCell, children: null }) : null,
     children
   ] }) });
 };

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

@@ -38,6 +38,6 @@ export type ListProviderProps = {
     onSelectedChange?: Dispatch<SetStateAction<string[]>>;
     columns: ColumnProps[];
 };
-export declare const ListProvider: ({ children, autoCollapse, selectable, expandButton, onSelectedChange, columns, }: ListProviderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ListProvider: ({ children, autoCollapse, selectable, expandButton, onSelectedChange, columns, }: ListProviderProps) => import("react/jsx-runtime").JSX.Element;
 export declare const useListContext: () => ListContextValue;
 export {};

package/dist/components/List/ListContext.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useContext, createContext, useState, useCallback, useMemo, useEffect } from "react";
 const ListContext = createContext(void 0);
 const checkStateOfCheckboxs = (ids) => {
@@ -26,71 +26,79 @@ const ListProvider = ({
   const [lastCheckedCheckbox, setLastCheckedCheckbox] = useState();
   const [inRange, setInRange] = useState([]);
   const [refList, setRefList] = useState([]);
-  const registerExpandableRow = useCallback((rowId, expanded = false) => {
-    setExpandedRowIds((current) => ({
-      ...current,
-      [rowId]: expanded
-    }));
-    return () => {
-      setExpandedRowIds((current) => {
-        const {
-          [rowId]: relatedId,
-          ...otherIds
-        } = current;
-        return otherIds;
-      });
-    };
-  }, []);
+  const registerExpandableRow = useCallback(
+    (rowId, expanded = false) => {
+      setExpandedRowIds((current) => ({ ...current, [rowId]: expanded }));
+      return () => {
+        setExpandedRowIds((current) => {
+          const { [rowId]: relatedId, ...otherIds } = current;
+          return otherIds;
+        });
+      };
+    },
+    []
+  );
   const registerSelectableRow = useCallback((rowId) => {
-    setSelectedRowIds((current) => ({
-      ...current,
-      [rowId]: false
-    }));
+    setSelectedRowIds((current) => ({ ...current, [rowId]: false }));
     return () => {
       setSelectedRowIds((current) => {
-        const {
-          [rowId]: relatedId,
-          ...otherIds
-        } = current;
+        const { [rowId]: relatedId, ...otherIds } = current;
         return otherIds;
       });
     };
   }, []);
-  const expandRow = useCallback((rowId) => {
-    setExpandedRowIds((current) => ({
-      ...autoCollapse ? {} : current,
-      [rowId]: true
-    }));
-  }, [autoCollapse]);
+  const expandRow = useCallback(
+    (rowId) => {
+      setExpandedRowIds((current) => ({
+        ...autoCollapse ? {} : current,
+        [rowId]: true
+      }));
+    },
+    [autoCollapse]
+  );
   const collapseRow = useCallback((rowId) => {
     setExpandedRowIds((current) => ({
       ...current,
       [rowId]: false
     }));
   }, []);
-  const allRowSelectValue = useMemo(() => checkStateOfCheckboxs(selectedRowIds), [selectedRowIds]);
-  const selectRows = useCallback((rowIds, state) => {
-    const newSelectedRowIds = rowIds.reduce((acc, rowId) => ({
-      ...acc,
-      [rowId]: state
-    }), selectedRowIds);
-    setSelectedRowIds(newSelectedRowIds);
-    if (onSelectedChange) {
-      onSelectedChange(Object.keys(newSelectedRowIds).filter((row) => newSelectedRowIds[row]));
-    }
-  }, [onSelectedChange, selectedRowIds]);
+  const allRowSelectValue = useMemo(
+    () => checkStateOfCheckboxs(selectedRowIds),
+    [selectedRowIds]
+  );
+  const selectRows = useCallback(
+    (rowIds, state) => {
+      const newSelectedRowIds = rowIds.reduce(
+        (acc, rowId) => ({ ...acc, [rowId]: state }),
+        selectedRowIds
+      );
+      setSelectedRowIds(newSelectedRowIds);
+      if (onSelectedChange) {
+        onSelectedChange(
+          Object.keys(newSelectedRowIds).filter((row) => newSelectedRowIds[row])
+        );
+      }
+    },
+    [onSelectedChange, selectedRowIds]
+  );
   const selectAll = useCallback(() => {
     selectRows(Object.keys(selectedRowIds), true);
   }, [selectRows, selectedRowIds]);
   const unselectAll = useCallback(() => {
     selectRows(Object.keys(selectedRowIds), false);
   }, [selectRows, selectedRowIds]);
-  const selectRow = useCallback((rowId) => {
-    selectRows([rowId], true);
-  }, [selectRows]);
-  const unselectRow = useCallback((rowId) => {
-    selectRows([rowId], false);
-  }, [selectRows]);
+  const selectRow = useCallback(
+    (rowId) => {
+      selectRows([rowId], true);
+    },
+    [selectRows]
+  );
+  const unselectRow = useCallback(
+    (rowId) => {
+      selectRows([rowId], false);
+    },
+    [selectRows]
+  );
   const selectAllHandler = useCallback(() => {
     if (allRowSelectValue && [true, "indeterminate"].includes(allRowSelectValue)) {
       unselectAll();
@@ -102,12 +110,20 @@ const ListProvider = ({
   }, [allRowSelectValue, unselectAll, selectAll]);
   const subscribeHandler = useCallback(() => {
     const handlers = [];
-    const updatedRefList = [...new Set(refList.filter((checkbox) => document.contains(checkbox.current) && checkbox.current))];
+    const updatedRefList = [
+      ...new Set(
+        refList.filter(
+          (checkbox) => document.contains(checkbox.current) && checkbox.current
+        )
+      )
+    ];
     setRefList(updatedRefList);
     const handleHover = (index, isShiftPressed, leaving) => {
       const newRange = [];
       if (lastCheckedCheckbox) {
-        const targetCheckbox = updatedRefList.find((checkbox) => checkbox.current?.value === lastCheckedCheckbox);
+        const targetCheckbox = updatedRefList.find(
+          (checkbox) => checkbox.current?.value === lastCheckedCheckbox
+        );
         if (isShiftPressed && targetCheckbox && !leaving) {
           const lastCheckedIndex = updatedRefList.indexOf(targetCheckbox);
           const start = Math.min(lastCheckedIndex, index) - (Math.min(lastCheckedIndex, index) === index ? 1 : 0);
@@ -124,7 +140,9 @@ const ListProvider = ({
     const handleClickRange = (currentCheckbox, index, isShiftPressed) => {
       if (isShiftPressed) {
         const checkboxesInRange = [];
-        const targetCheckbox = updatedRefList.find((checkbox) => checkbox.current?.value === lastCheckedCheckbox);
+        const targetCheckbox = updatedRefList.find(
+          (checkbox) => checkbox.current?.value === lastCheckedCheckbox
+        );
         const lastCheckedIndex = targetCheckbox ? updatedRefList.indexOf(targetCheckbox) : void 0;
         if (lastCheckedIndex !== void 0) {
           const start = Math.min(lastCheckedIndex, index) - (Math.min(lastCheckedIndex, index) === index ? 1 : 0);
@@ -156,8 +174,14 @@ const ListProvider = ({
         handlers.push(() => {
           if (checkbox.current) {
             checkbox.current.removeEventListener("click", clickHandler);
-            checkbox.current.removeEventListener("mouseout", hoverEnteringHandler);
-            checkbox.current.removeEventListener("mousemove", hoverLeavingHandler);
+            checkbox.current.removeEventListener(
+              "mouseout",
+              hoverEnteringHandler
+            );
+            checkbox.current.removeEventListener(
+              "mousemove",
+              hoverLeavingHandler
+            );
           }
         });
       }
@@ -169,32 +193,58 @@ const ListProvider = ({
   useEffect(() => {
     subscribeHandler();
   }, [subscribeHandler]);
-  const handleOnChange = useCallback((value2, checked) => {
-    selectRows([value2], !checked);
-    setLastCheckedCheckbox(value2);
-  }, [selectRows]);
-  const value = useMemo(() => ({
-    allRowSelectValue,
-    collapseRow,
-    columns,
-    expandButton,
-    expandedRowIds,
-    expandRow,
-    handleOnChange,
-    inRange,
-    refList,
-    registerExpandableRow,
-    registerSelectableRow,
-    selectAll,
-    selectAllHandler,
-    selectable,
-    selectedRowIds,
-    selectRow,
-    setRefList,
-    subscribeHandler,
-    unselectAll,
-    unselectRow
-  }), [allRowSelectValue, selectAllHandler, subscribeHandler, collapseRow, columns, expandButton, expandedRowIds, expandRow, inRange, refList, registerExpandableRow, registerSelectableRow, selectable, selectAll, selectedRowIds, selectRow, unselectAll, unselectRow, handleOnChange]);
+  const handleOnChange = useCallback(
+    (value2, checked) => {
+      selectRows([value2], !checked);
+      setLastCheckedCheckbox(value2);
+    },
+    [selectRows]
+  );
+  const value = useMemo(
+    () => ({
+      allRowSelectValue,
+      collapseRow,
+      columns,
+      expandButton,
+      expandedRowIds,
+      expandRow,
+      handleOnChange,
+      inRange,
+      refList,
+      registerExpandableRow,
+      registerSelectableRow,
+      selectAll,
+      selectAllHandler,
+      selectable,
+      selectedRowIds,
+      selectRow,
+      setRefList,
+      subscribeHandler,
+      unselectAll,
+      unselectRow
+    }),
+    [
+      allRowSelectValue,
+      selectAllHandler,
+      subscribeHandler,
+      collapseRow,
+      columns,
+      expandButton,
+      expandedRowIds,
+      expandRow,
+      inRange,
+      refList,
+      registerExpandableRow,
+      registerSelectableRow,
+      selectable,
+      selectAll,
+      selectedRowIds,
+      selectRow,
+      unselectAll,
+      unselectRow,
+      handleOnChange
+    ]
+  );
   return /* @__PURE__ */ jsx(ListContext.Provider, { value, children });
 };
 const useListContext = () => {

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

@@ -1,21 +1,5 @@
-import type { Theme } from '@emotion/react';
 import type { CSSProperties, MouseEventHandler, ReactNode } from 'react';
 import type { SENTIMENTS, space } from '../../theme';
-import type { ColumnProps } from './types';
-export declare const ExpandableWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, {}>;
-export declare const StyledRow: import("@emotion/styled").StyledComponent<{
-    theme?: Theme;
-    as?: React.ElementType;
-} & {
-    sentiment: (typeof SENTIMENTS)[number];
-    columns: ColumnProps[];
-    columnsStartAt?: number;
-    highlightAnimation?: boolean;
-    'data-dragging'?: boolean;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, {}>;
 type RowProps = {
     children: ReactNode;
     id: string;