@ultraviolet/ui 3.0.0-beta.8 → 3.0.0

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

@@ -11,5 +11,5 @@ type SelectBarProps<T> = {
      * */
     idKey: keyof T;
 };
-export declare const SelectBar: <T>({ children, data, idKey, className, }: SelectBarProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element | null;
+export declare const SelectBar: <T>({ children, data, idKey, className, }: SelectBarProps<T>) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/List/SelectBar.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { ActionBar } from "../ActionBar/index.js";
 import { Stack } from "../Stack/index.js";
@@ -10,18 +10,28 @@ const SelectBar = ({
   idKey,
   className
 }) => {
-  const {
-    selectedRowIds,
-    unselectAll
-  } = useListContext();
-  const selectedItems = useMemo(() => data.filter((item) => selectedRowIds[item[idKey]]), [data, idKey, selectedRowIds]);
+  const { selectedRowIds, unselectAll } = useListContext();
+  const selectedItems = useMemo(
+    () => data.filter((item) => selectedRowIds[item[idKey]]),
+    [data, idKey, selectedRowIds]
+  );
   if (selectedItems.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx(ActionBar, { className, children: /* @__PURE__ */ jsx(Stack, { alignItems: "center", direction: "row", flex: "1 1 auto", justifyContent: "space-between", width: "100%", children: children({
-    selectedItems,
-    unselectAll
-  }) }) });
+  return /* @__PURE__ */ jsx(ActionBar, { className, children: /* @__PURE__ */ jsx(
+    Stack,
+    {
+      alignItems: "center",
+      direction: "row",
+      flex: "1 1 auto",
+      justifyContent: "space-between",
+      width: "100%",
+      children: children({
+        selectedItems,
+        unselectAll
+      })
+    }
+  ) });
 };
 export {
   SelectBar

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

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

package/dist/components/List/SkeletonRows.js

@@ -1,57 +1,40 @@
 "use client";
-import { jsx, Fragment, jsxs } from "@emotion/react/jsx-runtime";
-import _styled from "@emotion/styled/base";
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { Skeleton } from "../Skeleton/index.js";
 import { Cell } from "./Cell.js";
+import { ColumnProvider } from "./ColumnProvider.js";
 import { useListContext } from "./ListContext.js";
-import { StyledRow } from "./Row.js";
-function _EMOTION_STRINGIFIED_CSS_ERROR__() {
-  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
-}
-const StyledLoadingRow = /* @__PURE__ */ _styled(StyledRow, process.env.NODE_ENV === "production" ? {
-  target: "efawmbb1"
-} : {
-  target: "efawmbb1",
-  label: "StyledLoadingRow"
-})(process.env.NODE_ENV === "production" ? {
-  name: "g8zzui",
-  styles: "cursor:progress"
-} : {
-  name: "g8zzui",
-  styles: "cursor:progress/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL0xpc3QvU2tlbGV0b25Sb3dzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRMEMiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvdWx0cmF2aW9sZXQvdWx0cmF2aW9sZXQvcGFja2FnZXMvdWkvc3JjL2NvbXBvbmVudHMvTGlzdC9Ta2VsZXRvblJvd3MudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHsgU2tlbGV0b24gfSBmcm9tICcuLi9Ta2VsZXRvbidcbmltcG9ydCB7IENlbGwgfSBmcm9tICcuL0NlbGwnXG5pbXBvcnQgeyB1c2VMaXN0Q29udGV4dCB9IGZyb20gJy4vTGlzdENvbnRleHQnXG5pbXBvcnQgeyBTdHlsZWRSb3cgfSBmcm9tICcuL1JvdydcblxuY29uc3QgU3R5bGVkTG9hZGluZ1JvdyA9IHN0eWxlZChTdHlsZWRSb3cpYFxuICBjdXJzb3I6IHByb2dyZXNzO1xuYFxuXG5jb25zdCBTdHlsZWRTa2VsZXRvbiA9IHN0eWxlZChTa2VsZXRvbilgXG4gIHdpZHRoOiA4MCU7XG4gIG1heC13aWR0aDogMTAwJTtcbiAgYWxpZ24taXRlbXM6IHN0YXJ0O1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbmBcblxudHlwZSBMaXN0TG9hZGluZ1NrZWxldG9uUHJvcHMgPSB7XG4gIHNlbGVjdGFibGU6IGJvb2xlYW5cbiAgcm93czogbnVtYmVyXG4gIGNvbHM6IG51bWJlclxufVxuXG5leHBvcnQgY29uc3QgU2tlbGV0b25Sb3dzID0gKHtcbiAgc2VsZWN0YWJsZSxcbiAgcm93cyxcbiAgY29scyxcbn06IExpc3RMb2FkaW5nU2tlbGV0b25Qcm9wcykgPT4ge1xuICBjb25zdCByb3dBcnJheSA9IEFycmF5LmZyb20oeyBsZW5ndGg6IHJvd3MgfSwgKF8sIGluZGV4KSA9PiBpbmRleClcbiAgY29uc3QgY29sQXJyYXkgPSBBcnJheS5mcm9tKHsgbGVuZ3RoOiBjb2xzIH0sIChfLCBpbmRleCkgPT4gaW5kZXgpXG4gIGNvbnN0IHsgY29sdW1ucyB9ID0gdXNlTGlzdENvbnRleHQoKVxuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIHtyb3dBcnJheS5tYXAoaW5kZXggPT4gKFxuICAgICAgICA8U3R5bGVkTG9hZGluZ1Jvd1xuICAgICAgICAgIGNvbHVtbnM9e2NvbHVtbnN9XG4gICAgICAgICAgaWQ9e2Bza2VsZXRvbi0ke2luZGV4fWB9XG4gICAgICAgICAga2V5PXtpbmRleH1cbiAgICAgICAgICByb2xlPVwicm93XCJcbiAgICAgICAgICBzZW50aW1lbnQ9XCJuZXV0cmFsXCJcbiAgICAgICAgPlxuICAgICAgICAgIHtzZWxlY3RhYmxlID8gPHRkIC8+IDogbnVsbH1cbiAgICAgICAgICB7Y29sQXJyYXkubWFwKGNvbHVtbkluZGV4ID0+IChcbiAgICAgICAgICAgIDxDZWxsIGtleT17Y29sdW1uSW5kZXh9PlxuICAgICAgICAgICAgICA8U3R5bGVkU2tlbGV0b24gdmFyaWFudD1cImxpbmVcIiAvPlxuICAgICAgICAgICAgPC9DZWxsPlxuICAgICAgICAgICkpfVxuICAgICAgICA8L1N0eWxlZExvYWRpbmdSb3c+XG4gICAgICApKX1cbiAgICA8Lz5cbiAgKVxufVxuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledSkeleton = /* @__PURE__ */ _styled(Skeleton, process.env.NODE_ENV === "production" ? {
-  target: "efawmbb0"
-} : {
-  target: "efawmbb0",
-  label: "StyledSkeleton"
-})(process.env.NODE_ENV === "production" ? {
-  name: "10a39c7",
-  styles: "width:80%;max-width:100%;align-items:start;justify-content:center"
-} : {
-  name: "10a39c7",
-  styles: "width:80%;max-width:100%;align-items:start;justify-content:center/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL0xpc3QvU2tlbGV0b25Sb3dzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFZdUMiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvdWx0cmF2aW9sZXQvdWx0cmF2aW9sZXQvcGFja2FnZXMvdWkvc3JjL2NvbXBvbmVudHMvTGlzdC9Ta2VsZXRvblJvd3MudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHsgU2tlbGV0b24gfSBmcm9tICcuLi9Ta2VsZXRvbidcbmltcG9ydCB7IENlbGwgfSBmcm9tICcuL0NlbGwnXG5pbXBvcnQgeyB1c2VMaXN0Q29udGV4dCB9IGZyb20gJy4vTGlzdENvbnRleHQnXG5pbXBvcnQgeyBTdHlsZWRSb3cgfSBmcm9tICcuL1JvdydcblxuY29uc3QgU3R5bGVkTG9hZGluZ1JvdyA9IHN0eWxlZChTdHlsZWRSb3cpYFxuICBjdXJzb3I6IHByb2dyZXNzO1xuYFxuXG5jb25zdCBTdHlsZWRTa2VsZXRvbiA9IHN0eWxlZChTa2VsZXRvbilgXG4gIHdpZHRoOiA4MCU7XG4gIG1heC13aWR0aDogMTAwJTtcbiAgYWxpZ24taXRlbXM6IHN0YXJ0O1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbmBcblxudHlwZSBMaXN0TG9hZGluZ1NrZWxldG9uUHJvcHMgPSB7XG4gIHNlbGVjdGFibGU6IGJvb2xlYW5cbiAgcm93czogbnVtYmVyXG4gIGNvbHM6IG51bWJlclxufVxuXG5leHBvcnQgY29uc3QgU2tlbGV0b25Sb3dzID0gKHtcbiAgc2VsZWN0YWJsZSxcbiAgcm93cyxcbiAgY29scyxcbn06IExpc3RMb2FkaW5nU2tlbGV0b25Qcm9wcykgPT4ge1xuICBjb25zdCByb3dBcnJheSA9IEFycmF5LmZyb20oeyBsZW5ndGg6IHJvd3MgfSwgKF8sIGluZGV4KSA9PiBpbmRleClcbiAgY29uc3QgY29sQXJyYXkgPSBBcnJheS5mcm9tKHsgbGVuZ3RoOiBjb2xzIH0sIChfLCBpbmRleCkgPT4gaW5kZXgpXG4gIGNvbnN0IHsgY29sdW1ucyB9ID0gdXNlTGlzdENvbnRleHQoKVxuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIHtyb3dBcnJheS5tYXAoaW5kZXggPT4gKFxuICAgICAgICA8U3R5bGVkTG9hZGluZ1Jvd1xuICAgICAgICAgIGNvbHVtbnM9e2NvbHVtbnN9XG4gICAgICAgICAgaWQ9e2Bza2VsZXRvbi0ke2luZGV4fWB9XG4gICAgICAgICAga2V5PXtpbmRleH1cbiAgICAgICAgICByb2xlPVwicm93XCJcbiAgICAgICAgICBzZW50aW1lbnQ9XCJuZXV0cmFsXCJcbiAgICAgICAgPlxuICAgICAgICAgIHtzZWxlY3RhYmxlID8gPHRkIC8+IDogbnVsbH1cbiAgICAgICAgICB7Y29sQXJyYXkubWFwKGNvbHVtbkluZGV4ID0+IChcbiAgICAgICAgICAgIDxDZWxsIGtleT17Y29sdW1uSW5kZXh9PlxuICAgICAgICAgICAgICA8U3R5bGVkU2tlbGV0b24gdmFyaWFudD1cImxpbmVcIiAvPlxuICAgICAgICAgICAgPC9DZWxsPlxuICAgICAgICAgICkpfVxuICAgICAgICA8L1N0eWxlZExvYWRpbmdSb3c+XG4gICAgICApKX1cbiAgICA8Lz5cbiAgKVxufVxuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
+import { listRow, listLoadingRow, listSkeleton } from "./styles.css.js";
 const SkeletonRows = ({
   selectable,
   rows,
   cols
 }) => {
-  const rowArray = Array.from({
-    length: rows
-  }, (_, index) => index);
-  const colArray = Array.from({
-    length: cols
-  }, (_, index) => index);
-  const {
-    columns
-  } = useListContext();
-  return /* @__PURE__ */ jsx(Fragment, { children: rowArray.map((index) => /* @__PURE__ */ jsxs(StyledLoadingRow, { columns, id: `skeleton-${index}`, role: "row", sentiment: "neutral", children: [
-    selectable ? /* @__PURE__ */ jsx("td", {}) : null,
-    colArray.map((columnIndex) => /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(StyledSkeleton, { variant: "line" }) }, columnIndex))
-  ] }, index)) });
+  const rowArray = Array.from({ length: rows }, (_, index) => index);
+  const colArray = Array.from({ length: cols }, (_, index) => index);
+  const { columns } = useListContext();
+  return /* @__PURE__ */ jsx(Fragment, { children: rowArray.map((index) => /* @__PURE__ */ jsxs(
+    "tr",
+    {
+      className: `${listRow({ sentiment: "neutral" })} ${listLoadingRow}`,
+      id: `skeleton-${index}`,
+      role: "row",
+      children: [
+        selectable ? /* @__PURE__ */ jsx("td", {}) : null,
+        colArray.map((columnIndex) => /* @__PURE__ */ jsx(
+          ColumnProvider,
+          {
+            maxWidth: columns[columnIndex].maxWidth,
+            minWidth: columns[columnIndex].minWidth,
+            width: columns[columnIndex].width,
+            children: /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(Skeleton, { className: listSkeleton, variant: "line" }) })
+          },
+          columnIndex
+        ))
+      ]
+    },
+    index
+  )) });
 };
 export {
   SkeletonRows

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

@@ -1,4 +1,4 @@
-import type { Dispatch, ReactNode, SetStateAction } from 'react';
+import type { CSSProperties, Dispatch, ReactNode, SetStateAction } from 'react';
 import type { ColumnProps } from './types';
 type ListProps = {
     expandable?: boolean;
@@ -18,6 +18,7 @@ type ListProps = {
      */
     onSelectedChange?: Dispatch<SetStateAction<string[]>>;
     className?: string;
+    style?: CSSProperties;
 };
 /**
  * List is a component that displays a list of items based on the columns you provide and the data you pass.
@@ -28,6 +29,7 @@ export declare const List: import("react").ForwardRefExoticComponent<ListProps &
         className?: string;
         'data-testid'?: string;
         colSpan?: number;
+        style?: CSSProperties;
     } & import("react").RefAttributes<HTMLTableCellElement>>;
     Row: import("react").ForwardRefExoticComponent<{
         children: ReactNode;
@@ -35,13 +37,13 @@ export declare const List: import("react").ForwardRefExoticComponent<ListProps &
         expandable?: ReactNode;
         selectDisabled?: boolean | string;
         disabled?: boolean;
-        sentiment?: "danger" | "info" | "neutral" | "success" | "primary" | "warning" | "secondary";
+        sentiment?: "primary" | "secondary" | "neutral" | "success" | "danger" | "warning" | "info";
         expanded?: boolean;
         className?: string;
         expandablePadding?: "0" | "1" | "0.5" | "0.25" | "1.5" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10";
         highlightAnimation?: boolean;
         'data-testid'?: string;
-        style?: import("react").CSSProperties;
+        style?: CSSProperties;
         'data-dragging'?: boolean;
         onMouseEnter?: import("react").MouseEventHandler<HTMLTableRowElement>;
         onMouseLeave?: import("react").MouseEventHandler<HTMLTableRowElement>;
@@ -54,7 +56,7 @@ export declare const List: import("react").ForwardRefExoticComponent<ListProps &
         }) => ReactNode;
         data: T[];
         idKey: keyof T;
-    }) => import("@emotion/react/jsx-runtime").JSX.Element | null;
+    }) => import("react/jsx-runtime").JSX.Element | null;
     useListContext: () => import("./ListContext").ListContextValue;
 };
 export {};

package/dist/components/List/index.js

@@ -1,6 +1,5 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
-import _styled from "@emotion/styled/base";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useState, Children, useEffect } from "react";
 import { Cell } from "./Cell.js";
 import { HeaderCell } from "./HeaderCell.js";
@@ -9,60 +8,74 @@ import { useListContext, ListProvider } from "./ListContext.js";
 import { Row } from "./Row.js";
 import { SelectBar } from "./SelectBar.js";
 import { SkeletonRows } from "./SkeletonRows.js";
-function _EMOTION_STRINGIFIED_CSS_ERROR__() {
-  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
-}
-const TableContainerStyle = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "ef5qi1"
-} : {
-  target: "ef5qi1",
-  label: "TableContainerStyle"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1e1m3zc",
-  styles: "min-width:100%;width:100%;overflow-x:auto"
-} : {
-  name: "1e1m3zc",
-  styles: "min-width:100%;width:100%;overflow-x:auto/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL0xpc3QvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWNzQyIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay91bHRyYXZpb2xldC91bHRyYXZpb2xldC9wYWNrYWdlcy91aS9zcmMvY29tcG9uZW50cy9MaXN0L2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIid1c2UgY2xpZW50J1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB0eXBlIHsgRGlzcGF0Y2gsIFJlYWN0Tm9kZSwgU2V0U3RhdGVBY3Rpb24gfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IENoaWxkcmVuLCBmb3J3YXJkUmVmLCB1c2VFZmZlY3QsIHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBDZWxsIH0gZnJvbSAnLi9DZWxsJ1xuaW1wb3J0IHsgSGVhZGVyQ2VsbCB9IGZyb20gJy4vSGVhZGVyQ2VsbCdcbmltcG9ydCB7IEhlYWRlclJvdyB9IGZyb20gJy4vSGVhZGVyUm93J1xuaW1wb3J0IHsgTGlzdFByb3ZpZGVyLCB1c2VMaXN0Q29udGV4dCB9IGZyb20gJy4vTGlzdENvbnRleHQnXG5pbXBvcnQgeyBSb3cgfSBmcm9tICcuL1JvdydcbmltcG9ydCB7IFNlbGVjdEJhciB9IGZyb20gJy4vU2VsZWN0QmFyJ1xuaW1wb3J0IHsgU2tlbGV0b25Sb3dzIH0gZnJvbSAnLi9Ta2VsZXRvblJvd3MnXG5pbXBvcnQgdHlwZSB7IENvbHVtblByb3BzIH0gZnJvbSAnLi90eXBlcydcblxuY29uc3QgVGFibGVDb250YWluZXJTdHlsZSA9IHN0eWxlZC5kaXZgXG4gIG1pbi13aWR0aDogMTAwJTtcbiAgd2lkdGg6IDEwMCU7XG4gIG92ZXJmbG93LXg6IGF1dG87XG5gXG5cbmNvbnN0IFN0eWxlZFRhYmxlID0gc3R5bGVkLnRhYmxlYFxuICB3aWR0aDogMTAwJTtcbiAgYm94LXNpemluZzogY29udGVudC1ib3g7XG4gIGdhcDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5zcGFjZVsnMSddfTtcbiAgYm9yZGVyLXNwYWNpbmc6IDAgJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5zcGFjZVsnMiddfTtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuYFxuXG4vLyBUT0RPOiBHZXQgdHlwZSBvcHRpb25hbCB0eXBlIGZyb20gb21pdCB2YWx1ZXMgb2YgTGlzdENvbnRleHRcbnR5cGUgTGlzdFByb3BzID0ge1xuICBleHBhbmRhYmxlPzogYm9vbGVhblxuICBzZWxlY3RhYmxlPzogYm9vbGVhblxuICBjb2x1bW5zOiBDb2x1bW5Qcm9wc1tdXG4gIGNoaWxkcmVuOiBSZWFjdE5vZGVcbiAgLyoqXG4gICAqIFNldCBpdCB0byB0cnVlIGlmIHlvdSB3YW50IHRvIGRpc3BsYXkgYSBwbGFjZWhvbGRlciBkdXJpbmcgbG9hZGluZ1xuICAgKiAqL1xuICBsb2FkaW5nPzogYm9vbGVhblxuICAvKipcbiAgICogQXV0byBjb2xsYXBzZSBpcyBjb2xsYXBzaW5nIGV4cGFuZGFibGUgcm93IHdoZW4gYW5vdGhlciBpcyBleHBhbmRpbmdcbiAgICogKi9cbiAgYXV0b0NvbGxhcHNlPzogYm9vbGVhblxuICAvKipcbiAgICogQWN0aW9uIHdoZW4gc2VsZWN0aW9uIGNoYW5nZXMgKGdldCB0aGUgbGlzdCBvZiBzZWxlY3RlZCByb3dzKVxuICAgKi9cbiAgb25TZWxlY3RlZENoYW5nZT86IERpc3BhdGNoPFNldFN0YXRlQWN0aW9uPHN0cmluZ1tdPj5cbiAgY2xhc3NOYW1lPzogc3RyaW5nXG59XG5cbmNvbnN0IFRhYmxlQ29udGFpbmVyID0gKHsgY2hpbGRyZW4gfTogeyBjaGlsZHJlbjogUmVhY3ROb2RlIH0pID0+IHtcbiAgY29uc3QgW2NoaWxkcmVuTWVtb3J5LCBzZXRDaGlsZHJlbk1lbW9yeV0gPSB1c2VTdGF0ZTxSZWFjdE5vZGVbXT4oXG4gICAgQ2hpbGRyZW4udG9BcnJheShjaGlsZHJlbiksXG4gIClcblxuICBjb25zdCB7IHNldFJlZkxpc3QgfSA9IHVzZUxpc3RDb250ZXh0KClcblxuICAvLyBSZXNldCByZWYgbGlzdCB3aGVuIGNoaWxkcmVuIGNoYW5nZVxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGlmIChDaGlsZHJlbi50b0FycmF5KGNoaWxkcmVuKSAhPT0gY2hpbGRyZW5NZW1vcnkpIHtcbiAgICAgIHNldFJlZkxpc3QoW10pXG4gICAgICBzZXRDaGlsZHJlbk1lbW9yeShDaGlsZHJlbi50b0FycmF5KGNoaWxkcmVuKSlcbiAgICB9XG4gICAgLy8gb3hsaW50LWRpc2FibGUtbmV4dC1saW5lIHJlYWN0L2V4aGF1c3RpdmUtZGVwc1xuICB9LCBbY2hpbGRyZW4sIHNldFJlZkxpc3RdKVxuXG4gIHJldHVybiA8VGFibGVDb250YWluZXJTdHlsZT57Y2hpbGRyZW59PC9UYWJsZUNvbnRhaW5lclN0eWxlPlxufVxuXG5jb25zdCBCYXNlTGlzdCA9IGZvcndhcmRSZWY8SFRNTFRhYmxlRWxlbWVudCwgTGlzdFByb3BzPihcbiAgKFxuICAgIHtcbiAgICAgIGV4cGFuZGFibGUgPSBmYWxzZSxcbiAgICAgIHNlbGVjdGFibGUgPSBmYWxzZSxcbiAgICAgIGNvbHVtbnMsXG4gICAgICBjaGlsZHJlbixcbiAgICAgIGxvYWRpbmcsXG4gICAgICBhdXRvQ29sbGFwc2UgPSBmYWxzZSxcbiAgICAgIG9uU2VsZWN0ZWRDaGFuZ2UsXG4gICAgICBjbGFzc05hbWUsXG4gICAgfSxcbiAgICByZWYsXG4gICkgPT4gKFxuICAgIDxMaXN0UHJvdmlkZXJcbiAgICAgIGF1dG9Db2xsYXBzZT17YXV0b0NvbGxhcHNlfVxuICAgICAgY29sdW1ucz17Y29sdW1uc31cbiAgICAgIGV4cGFuZEJ1dHRvbj17ZXhwYW5kYWJsZX1cbiAgICAgIG9uU2VsZWN0ZWRDaGFuZ2U9e29uU2VsZWN0ZWRDaGFuZ2V9XG4gICAgICBzZWxlY3RhYmxlPXtzZWxlY3RhYmxlfVxuICAgID5cbiAgICAgIDxUYWJsZUNvbnRhaW5lcj5cbiAgICAgICAgPFN0eWxlZFRhYmxlIGNsYXNzTmFtZT17Y2xhc3NOYW1lfSByZWY9e3JlZn0+XG4gICAgICAgICAgPEhlYWRlclJvdyBoYXNTZWxlY3RBbGxDb2x1bW49e3NlbGVjdGFibGV9PlxuICAgICAgICAgICAge2NvbHVtbnMubWFwKChjb2x1bW4sIGluZGV4KSA9PiAoXG4gICAgICAgICAgICAgIDxIZWFkZXJDZWxsXG4gICAgICAgICAgICAgICAgaW5mbz17Y29sdW1uLmluZm99XG4gICAgICAgICAgICAgICAgaXNPcmRlcmVkPXtjb2x1bW4uaXNPcmRlcmVkfVxuICAgICAgICAgICAgICAgIGtleT17YGhlYWRlci1jb2x1bW4tJHtpbmRleH1gfVxuICAgICAgICAgICAgICAgIG1heFdpZHRoPXtjb2x1bW4ubWF4V2lkdGh9XG4gICAgICAgICAgICAgICAgbWluV2l0aD17Y29sdW1uLm1pbldpZHRofVxuICAgICAgICAgICAgICAgIG9uT3JkZXI9e2NvbHVtbi5vbk9yZGVyfVxuICAgICAgICAgICAgICAgIG9yZGVyRGlyZWN0aW9uPXtjb2x1bW4ub3JkZXJEaXJlY3Rpb259XG4gICAgICAgICAgICAgICAgd2lkdGg9e2NvbHVtbi53aWR0aH1cbiAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgIHtjb2x1bW4ubGFiZWx9XG4gICAgICAgICAgICAgIDwvSGVhZGVyQ2VsbD5cbiAgICAgICAgICAgICkpfVxuICAgICAgICAgIDwvSGVhZGVyUm93PlxuICAgICAgICAgIDx0Ym9keT5cbiAgICAgICAgICAgIHtsb2FkaW5nID8gKFxuICAgICAgICAgICAgICA8U2tlbGV0b25Sb3dzXG4gICAgICAgICAgICAgICAgY29scz17Y29sdW1ucy5sZW5ndGh9XG4gICAgICAgICAgICAgICAgcm93cz17NX1cbiAgICAgICAgICAgICAgICBzZWxlY3RhYmxlPXtzZWxlY3RhYmxlfVxuICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgKSA6IChcbiAgICAgICAgICAgICAgY2hpbGRyZW5cbiAgICAgICAgICAgICl9XG4gICAgICAgICAgPC90Ym9keT5cbiAgICAgICAgPC9TdHlsZWRUYWJsZT5cbiAgICAgIDwvVGFibGVDb250YWluZXI+XG4gICAgPC9MaXN0UHJvdmlkZXI+XG4gICksXG4pXG5cbi8qKlxuICogTGlzdCBpcyBhIGNvbXBvbmVudCB0aGF0IGRpc3BsYXlzIGEgbGlzdCBvZiBpdGVtcyBiYXNlZCBvbiB0aGUgY29sdW1ucyB5b3UgcHJvdmlkZSBhbmQgdGhlIGRhdGEgeW91IHBhc3MuXG4gKi9cbmV4cG9ydCBjb25zdCBMaXN0ID0gT2JqZWN0LmFzc2lnbihCYXNlTGlzdCwge1xuICBDZWxsLFxuICBSb3csXG4gIFNlbGVjdEJhcixcbiAgdXNlTGlzdENvbnRleHQsXG59KVxuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledTable = /* @__PURE__ */ _styled("table", process.env.NODE_ENV === "production" ? {
-  target: "ef5qi0"
-} : {
-  target: "ef5qi0",
-  label: "StyledTable"
-})("width:100%;box-sizing:content-box;gap:", ({
-  theme
-}) => theme.space["1"], ";border-spacing:0 ", ({
-  theme
-}) => theme.space["2"], ";position:relative;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL0xpc3QvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9CZ0MiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvdWx0cmF2aW9sZXQvdWx0cmF2aW9sZXQvcGFja2FnZXMvdWkvc3JjL2NvbXBvbmVudHMvTGlzdC9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIGNsaWVudCdcblxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgdHlwZSB7IERpc3BhdGNoLCBSZWFjdE5vZGUsIFNldFN0YXRlQWN0aW9uIH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBDaGlsZHJlbiwgZm9yd2FyZFJlZiwgdXNlRWZmZWN0LCB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgQ2VsbCB9IGZyb20gJy4vQ2VsbCdcbmltcG9ydCB7IEhlYWRlckNlbGwgfSBmcm9tICcuL0hlYWRlckNlbGwnXG5pbXBvcnQgeyBIZWFkZXJSb3cgfSBmcm9tICcuL0hlYWRlclJvdydcbmltcG9ydCB7IExpc3RQcm92aWRlciwgdXNlTGlzdENvbnRleHQgfSBmcm9tICcuL0xpc3RDb250ZXh0J1xuaW1wb3J0IHsgUm93IH0gZnJvbSAnLi9Sb3cnXG5pbXBvcnQgeyBTZWxlY3RCYXIgfSBmcm9tICcuL1NlbGVjdEJhcidcbmltcG9ydCB7IFNrZWxldG9uUm93cyB9IGZyb20gJy4vU2tlbGV0b25Sb3dzJ1xuaW1wb3J0IHR5cGUgeyBDb2x1bW5Qcm9wcyB9IGZyb20gJy4vdHlwZXMnXG5cbmNvbnN0IFRhYmxlQ29udGFpbmVyU3R5bGUgPSBzdHlsZWQuZGl2YFxuICBtaW4td2lkdGg6IDEwMCU7XG4gIHdpZHRoOiAxMDAlO1xuICBvdmVyZmxvdy14OiBhdXRvO1xuYFxuXG5jb25zdCBTdHlsZWRUYWJsZSA9IHN0eWxlZC50YWJsZWBcbiAgd2lkdGg6IDEwMCU7XG4gIGJveC1zaXppbmc6IGNvbnRlbnQtYm94O1xuICBnYXA6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbJzEnXX07XG4gIGJvcmRlci1zcGFjaW5nOiAwICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbJzInXX07XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbmBcblxuLy8gVE9ETzogR2V0IHR5cGUgb3B0aW9uYWwgdHlwZSBmcm9tIG9taXQgdmFsdWVzIG9mIExpc3RDb250ZXh0XG50eXBlIExpc3RQcm9wcyA9IHtcbiAgZXhwYW5kYWJsZT86IGJvb2xlYW5cbiAgc2VsZWN0YWJsZT86IGJvb2xlYW5cbiAgY29sdW1uczogQ29sdW1uUHJvcHNbXVxuICBjaGlsZHJlbjogUmVhY3ROb2RlXG4gIC8qKlxuICAgKiBTZXQgaXQgdG8gdHJ1ZSBpZiB5b3Ugd2FudCB0byBkaXNwbGF5IGEgcGxhY2Vob2xkZXIgZHVyaW5nIGxvYWRpbmdcbiAgICogKi9cbiAgbG9hZGluZz86IGJvb2xlYW5cbiAgLyoqXG4gICAqIEF1dG8gY29sbGFwc2UgaXMgY29sbGFwc2luZyBleHBhbmRhYmxlIHJvdyB3aGVuIGFub3RoZXIgaXMgZXhwYW5kaW5nXG4gICAqICovXG4gIGF1dG9Db2xsYXBzZT86IGJvb2xlYW5cbiAgLyoqXG4gICAqIEFjdGlvbiB3aGVuIHNlbGVjdGlvbiBjaGFuZ2VzIChnZXQgdGhlIGxpc3Qgb2Ygc2VsZWN0ZWQgcm93cylcbiAgICovXG4gIG9uU2VsZWN0ZWRDaGFuZ2U/OiBEaXNwYXRjaDxTZXRTdGF0ZUFjdGlvbjxzdHJpbmdbXT4+XG4gIGNsYXNzTmFtZT86IHN0cmluZ1xufVxuXG5jb25zdCBUYWJsZUNvbnRhaW5lciA9ICh7IGNoaWxkcmVuIH06IHsgY2hpbGRyZW46IFJlYWN0Tm9kZSB9KSA9PiB7XG4gIGNvbnN0IFtjaGlsZHJlbk1lbW9yeSwgc2V0Q2hpbGRyZW5NZW1vcnldID0gdXNlU3RhdGU8UmVhY3ROb2RlW10+KFxuICAgIENoaWxkcmVuLnRvQXJyYXkoY2hpbGRyZW4pLFxuICApXG5cbiAgY29uc3QgeyBzZXRSZWZMaXN0IH0gPSB1c2VMaXN0Q29udGV4dCgpXG5cbiAgLy8gUmVzZXQgcmVmIGxpc3Qgd2hlbiBjaGlsZHJlbiBjaGFuZ2VcbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAoQ2hpbGRyZW4udG9BcnJheShjaGlsZHJlbikgIT09IGNoaWxkcmVuTWVtb3J5KSB7XG4gICAgICBzZXRSZWZMaXN0KFtdKVxuICAgICAgc2V0Q2hpbGRyZW5NZW1vcnkoQ2hpbGRyZW4udG9BcnJheShjaGlsZHJlbikpXG4gICAgfVxuICAgIC8vIG94bGludC1kaXNhYmxlLW5leHQtbGluZSByZWFjdC9leGhhdXN0aXZlLWRlcHNcbiAgfSwgW2NoaWxkcmVuLCBzZXRSZWZMaXN0XSlcblxuICByZXR1cm4gPFRhYmxlQ29udGFpbmVyU3R5bGU+e2NoaWxkcmVufTwvVGFibGVDb250YWluZXJTdHlsZT5cbn1cblxuY29uc3QgQmFzZUxpc3QgPSBmb3J3YXJkUmVmPEhUTUxUYWJsZUVsZW1lbnQsIExpc3RQcm9wcz4oXG4gIChcbiAgICB7XG4gICAgICBleHBhbmRhYmxlID0gZmFsc2UsXG4gICAgICBzZWxlY3RhYmxlID0gZmFsc2UsXG4gICAgICBjb2x1bW5zLFxuICAgICAgY2hpbGRyZW4sXG4gICAgICBsb2FkaW5nLFxuICAgICAgYXV0b0NvbGxhcHNlID0gZmFsc2UsXG4gICAgICBvblNlbGVjdGVkQ2hhbmdlLFxuICAgICAgY2xhc3NOYW1lLFxuICAgIH0sXG4gICAgcmVmLFxuICApID0+IChcbiAgICA8TGlzdFByb3ZpZGVyXG4gICAgICBhdXRvQ29sbGFwc2U9e2F1dG9Db2xsYXBzZX1cbiAgICAgIGNvbHVtbnM9e2NvbHVtbnN9XG4gICAgICBleHBhbmRCdXR0b249e2V4cGFuZGFibGV9XG4gICAgICBvblNlbGVjdGVkQ2hhbmdlPXtvblNlbGVjdGVkQ2hhbmdlfVxuICAgICAgc2VsZWN0YWJsZT17c2VsZWN0YWJsZX1cbiAgICA+XG4gICAgICA8VGFibGVDb250YWluZXI+XG4gICAgICAgIDxTdHlsZWRUYWJsZSBjbGFzc05hbWU9e2NsYXNzTmFtZX0gcmVmPXtyZWZ9PlxuICAgICAgICAgIDxIZWFkZXJSb3cgaGFzU2VsZWN0QWxsQ29sdW1uPXtzZWxlY3RhYmxlfT5cbiAgICAgICAgICAgIHtjb2x1bW5zLm1hcCgoY29sdW1uLCBpbmRleCkgPT4gKFxuICAgICAgICAgICAgICA8SGVhZGVyQ2VsbFxuICAgICAgICAgICAgICAgIGluZm89e2NvbHVtbi5pbmZvfVxuICAgICAgICAgICAgICAgIGlzT3JkZXJlZD17Y29sdW1uLmlzT3JkZXJlZH1cbiAgICAgICAgICAgICAgICBrZXk9e2BoZWFkZXItY29sdW1uLSR7aW5kZXh9YH1cbiAgICAgICAgICAgICAgICBtYXhXaWR0aD17Y29sdW1uLm1heFdpZHRofVxuICAgICAgICAgICAgICAgIG1pbldpdGg9e2NvbHVtbi5taW5XaWR0aH1cbiAgICAgICAgICAgICAgICBvbk9yZGVyPXtjb2x1bW4ub25PcmRlcn1cbiAgICAgICAgICAgICAgICBvcmRlckRpcmVjdGlvbj17Y29sdW1uLm9yZGVyRGlyZWN0aW9ufVxuICAgICAgICAgICAgICAgIHdpZHRoPXtjb2x1bW4ud2lkdGh9XG4gICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICB7Y29sdW1uLmxhYmVsfVxuICAgICAgICAgICAgICA8L0hlYWRlckNlbGw+XG4gICAgICAgICAgICApKX1cbiAgICAgICAgICA8L0hlYWRlclJvdz5cbiAgICAgICAgICA8dGJvZHk+XG4gICAgICAgICAgICB7bG9hZGluZyA/IChcbiAgICAgICAgICAgICAgPFNrZWxldG9uUm93c1xuICAgICAgICAgICAgICAgIGNvbHM9e2NvbHVtbnMubGVuZ3RofVxuICAgICAgICAgICAgICAgIHJvd3M9ezV9XG4gICAgICAgICAgICAgICAgc2VsZWN0YWJsZT17c2VsZWN0YWJsZX1cbiAgICAgICAgICAgICAgLz5cbiAgICAgICAgICAgICkgOiAoXG4gICAgICAgICAgICAgIGNoaWxkcmVuXG4gICAgICAgICAgICApfVxuICAgICAgICAgIDwvdGJvZHk+XG4gICAgICAgIDwvU3R5bGVkVGFibGU+XG4gICAgICA8L1RhYmxlQ29udGFpbmVyPlxuICAgIDwvTGlzdFByb3ZpZGVyPlxuICApLFxuKVxuXG4vKipcbiAqIExpc3QgaXMgYSBjb21wb25lbnQgdGhhdCBkaXNwbGF5cyBhIGxpc3Qgb2YgaXRlbXMgYmFzZWQgb24gdGhlIGNvbHVtbnMgeW91IHByb3ZpZGUgYW5kIHRoZSBkYXRhIHlvdSBwYXNzLlxuICovXG5leHBvcnQgY29uc3QgTGlzdCA9IE9iamVjdC5hc3NpZ24oQmFzZUxpc3QsIHtcbiAgQ2VsbCxcbiAgUm93LFxuICBTZWxlY3RCYXIsXG4gIHVzZUxpc3RDb250ZXh0LFxufSlcbiJdfQ== */"));
-const TableContainer = ({
-  children
-}) => {
-  const [childrenMemory, setChildrenMemory] = useState(Children.toArray(children));
-  const {
-    setRefList
-  } = useListContext();
+import { list, listContainer } from "./styles.css.js";
+const TableContainer = ({ children }) => {
+  const [childrenMemory, setChildrenMemory] = useState(
+    Children.toArray(children)
+  );
+  const { setRefList } = useListContext();
   useEffect(() => {
     if (Children.toArray(children) !== childrenMemory) {
       setRefList([]);
       setChildrenMemory(Children.toArray(children));
     }
   }, [children, setRefList]);
-  return /* @__PURE__ */ jsx(TableContainerStyle, { children });
+  return /* @__PURE__ */ jsx("div", { className: listContainer, children });
 };
-const BaseList = forwardRef(({
-  expandable = false,
-  selectable = false,
-  columns,
-  children,
-  loading,
-  autoCollapse = false,
-  onSelectedChange,
-  className
-}, ref) => /* @__PURE__ */ jsx(ListProvider, { autoCollapse, columns, expandButton: expandable, onSelectedChange, selectable, children: /* @__PURE__ */ jsx(TableContainer, { children: /* @__PURE__ */ jsxs(StyledTable, { className, ref, children: [
-  /* @__PURE__ */ jsx(HeaderRow, { hasSelectAllColumn: selectable, children: columns.map((column, index) => /* @__PURE__ */ jsx(HeaderCell, { info: column.info, isOrdered: column.isOrdered, maxWidth: column.maxWidth, minWith: column.minWidth, onOrder: column.onOrder, orderDirection: column.orderDirection, width: column.width, children: column.label }, `header-column-${index}`)) }),
-  /* @__PURE__ */ jsx("tbody", { children: loading ? /* @__PURE__ */ jsx(SkeletonRows, { cols: columns.length, rows: 5, selectable }) : children })
-] }) }) }));
+const BaseList = forwardRef(
+  ({
+    expandable = false,
+    selectable = false,
+    columns,
+    children,
+    loading,
+    autoCollapse = false,
+    onSelectedChange,
+    className,
+    style
+  }, ref) => /* @__PURE__ */ jsx(
+    ListProvider,
+    {
+      autoCollapse,
+      columns,
+      expandButton: expandable,
+      onSelectedChange,
+      selectable,
+      children: /* @__PURE__ */ jsx(TableContainer, { children: /* @__PURE__ */ jsxs(
+        "table",
+        {
+          className: `${className ? `${className} ` : ""}${list}`,
+          ref,
+          style,
+          children: [
+            /* @__PURE__ */ jsx(HeaderRow, { hasSelectAllColumn: selectable, children: columns.map((column, index) => /* @__PURE__ */ jsx(
+              HeaderCell,
+              {
+                info: column.info,
+                isOrdered: column.isOrdered,
+                maxWidth: column.maxWidth,
+                minWidth: column.minWidth,
+                onOrder: column.onOrder,
+                orderDirection: column.orderDirection,
+                width: column.width,
+                children: column.label
+              },
+              `header-column-${index}`
+            )) }),
+            /* @__PURE__ */ jsx("tbody", { children: loading ? /* @__PURE__ */ jsx(
+              SkeletonRows,
+              {
+                cols: columns.length,
+                rows: 5,
+                selectable
+              }
+            ) : children })
+          ]
+        }
+      ) })
+    }
+  )
+);
 const List = Object.assign(BaseList, {
   Cell,
   Row,

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

@@ -0,0 +1,24 @@
+export declare const listContainer: string;
+export declare const list: string;
+export declare const listSortIcon: Record<"ascending" | "descending", string>;
+export declare const listHeaderCell: string;
+export declare const listHeaderRow: string;
+export declare const listNoPaddingHeaderCell: string;
+export declare const listExpandableWrapper: string;
+export declare const listCheckboxInRange: string;
+export declare const listRow: import("@vanilla-extract/recipes").RuntimeFn<{
+    sentiment: {
+        [k: string]: object;
+    };
+    highlightAnimation: {
+        true: {
+            animation: `${string} 3s linear`;
+        };
+    };
+}>;
+export declare const listCell: string;
+export declare const listCheckboxContainer: string;
+export declare const listNoPaddingCell: string;
+export declare const listExpandableCell: string;
+export declare const listLoadingRow: string;
+export declare const listSkeleton: string;

package/dist/components/List/styles.css.js

@@ -0,0 +1,35 @@
+/* empty css                             */
+/* empty css                          */
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+var listContainer = "uv_inoh541";
+var list = "uv_inoh542";
+var listSortIcon = { ascending: "uv_inoh543", descending: "uv_inoh544" };
+var listHeaderCell = "uv_inoh545";
+var listHeaderRow = "uv_inoh546";
+var listNoPaddingHeaderCell = "uv_inoh547";
+var listExpandableWrapper = "uv_inoh548";
+var listCheckboxInRange = "uv_inoh549";
+var listRow = createRuntimeFn({ defaultClassName: "uv_inoh54b uv_inoh54a", variantClassNames: { sentiment: { primary: "uv_inoh54c", secondary: "uv_inoh54d", neutral: "uv_inoh54e", success: "uv_inoh54f", danger: "uv_inoh54g", warning: "uv_inoh54h", info: "uv_inoh54i" }, highlightAnimation: { true: "uv_inoh54j" } }, defaultVariants: { sentiment: "neutral", highlightAnimation: false }, compoundVariants: [] });
+var listCell = "uv_inoh54k";
+var listCheckboxContainer = "uv_inoh54l";
+var listNoPaddingCell = "uv_inoh54m";
+var listExpandableCell = "uv_inoh54n";
+var listLoadingRow = "uv_inoh54o";
+var listSkeleton = "uv_inoh54p";
+export {
+  list,
+  listCell,
+  listCheckboxContainer,
+  listCheckboxInRange,
+  listContainer,
+  listExpandableCell,
+  listExpandableWrapper,
+  listHeaderCell,
+  listHeaderRow,
+  listLoadingRow,
+  listNoPaddingCell,
+  listNoPaddingHeaderCell,
+  listRow,
+  listSkeleton,
+  listSortIcon
+};

package/dist/components/List/variables.css.d.ts

@@ -0,0 +1,7 @@
+export declare const widthHeaderCell: `var(--${string})`;
+export declare const maxWidthHeaderCell: `var(--${string})`;
+export declare const minWidthHeaderCell: `var(--${string})`;
+export declare const paddingExpandableCell: `var(--${string})`;
+export declare const widthCell: `var(--${string})`;
+export declare const maxWidthCell: `var(--${string})`;
+export declare const minWidthCell: `var(--${string})`;

package/dist/components/List/variables.css.js

@@ -0,0 +1,16 @@
+var widthHeaderCell = "var(--uv_1431nf60)";
+var maxWidthHeaderCell = "var(--uv_1431nf61)";
+var minWidthHeaderCell = "var(--uv_1431nf62)";
+var paddingExpandableCell = "var(--uv_1431nf63)";
+var widthCell = "var(--uv_1431nf64)";
+var maxWidthCell = "var(--uv_1431nf65)";
+var minWidthCell = "var(--uv_1431nf66)";
+export {
+  maxWidthCell,
+  maxWidthHeaderCell,
+  minWidthCell,
+  minWidthHeaderCell,
+  paddingExpandableCell,
+  widthCell,
+  widthHeaderCell
+};

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

@@ -0,0 +1,8 @@
+export declare const SIZES: {
+    readonly large: "300";
+    readonly medium: "250";
+    readonly small: "200";
+    readonly xlarge: "400";
+    readonly xsmall: "150";
+    readonly xxlarge: "700";
+};

package/dist/components/Loader/constants.js

@@ -0,0 +1,11 @@
+const SIZES = {
+  large: "300",
+  medium: "250",
+  small: "200",
+  xlarge: "400",
+  xsmall: "150",
+  xxlarge: "700"
+};
+export {
+  SIZES
+};

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

@@ -1,12 +1,6 @@
+import type { CSSProperties } from 'react';
 import type { ExtendedColor } from '../../theme';
-export declare const SIZES: {
-    readonly large: "300";
-    readonly medium: "250";
-    readonly small: "200";
-    readonly xlarge: "400";
-    readonly xsmall: "150";
-    readonly xxlarge: "700";
-};
+import { SIZES } from './constants';
 type LoaderProps = {
     active?: boolean;
     sentiment?: ExtendedColor;
@@ -16,9 +10,10 @@ type LoaderProps = {
      * Label should be defined for accessibility, to indicate what is loading
      */
     label?: string;
+    style?: CSSProperties;
 };
 /**
  * Loader is a circular progress indicator that can be used to indicate that an action is being performed.
  */
-export declare const Loader: ({ percentage, size, sentiment, active, label, }: LoaderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Loader: ({ percentage, size, sentiment, active, label, style, }: LoaderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Loader/index.js

@@ -1,64 +1,71 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
-import { useTheme } from "@emotion/react";
-import { loader, circle } from "./styles.css.js";
-function _EMOTION_STRINGIFIED_CSS_ERROR__() {
-  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
-}
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useTheme } from "@ultraviolet/themes";
+import { SIZES } from "./constants.js";
+import { loader, circle, loaderCircleAnimation } from "./styles.css.js";
 const VIEWBOX_WIDTH = 100;
 const VIEWBOX_HEIGHT = 100;
 const HALF_VIEWBOX_WIDTH = VIEWBOX_WIDTH / 2;
 const HALF_VIEWBOX_HEIGHT = VIEWBOX_HEIGHT / 2;
-const SIZES = {
-  large: "300",
-  medium: "250",
-  small: "200",
-  xlarge: "400",
-  xsmall: "150",
-  xxlarge: "700"
-};
-var _ref = process.env.NODE_ENV === "production" ? {
-  name: "si0mpz",
-  styles: "transition:stroke-dashoffset 0.5s ease 0s"
-} : {
-  name: "11f05l0-Loader",
-  styles: "transition:stroke-dashoffset 0.5s ease 0s;label:Loader;/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL0xvYWRlci9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0VnQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay91bHRyYXZpb2xldC91bHRyYXZpb2xldC9wYWNrYWdlcy91aS9zcmMvY29tcG9uZW50cy9Mb2FkZXIvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCB7IGNzcywgdXNlVGhlbWUgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCB0eXBlIHsgRXh0ZW5kZWRDb2xvciB9IGZyb20gJy4uLy4uL3RoZW1lJ1xuaW1wb3J0IHsgY2lyY2xlLCBsb2FkZXIgfSBmcm9tICcuL3N0eWxlcy5jc3MnXG5cbmNvbnN0IFZJRVdCT1hfV0lEVEggPSAxMDBcbmNvbnN0IFZJRVdCT1hfSEVJR0hUID0gMTAwXG5jb25zdCBIQUxGX1ZJRVdCT1hfV0lEVEggPSBWSUVXQk9YX1dJRFRIIC8gMlxuY29uc3QgSEFMRl9WSUVXQk9YX0hFSUdIVCA9IFZJRVdCT1hfSEVJR0hUIC8gMlxuXG5leHBvcnQgY29uc3QgU0laRVMgPSB7XG4gIGxhcmdlOiAnMzAwJyxcbiAgbWVkaXVtOiAnMjUwJyxcbiAgc21hbGw6ICcyMDAnLFxuICB4bGFyZ2U6ICc0MDAnLFxuICB4c21hbGw6ICcxNTAnLFxuICB4eGxhcmdlOiAnNzAwJyxcbn0gYXMgY29uc3RcblxudHlwZSBMb2FkZXJQcm9wcyA9IHtcbiAgYWN0aXZlPzogYm9vbGVhblxuICBzZW50aW1lbnQ/OiBFeHRlbmRlZENvbG9yXG4gIHBlcmNlbnRhZ2U/OiBudW1iZXJcbiAgc2l6ZT86IGtleW9mIHR5cGVvZiBTSVpFU1xuICAvKipcbiAgICogTGFiZWwgc2hvdWxkIGJlIGRlZmluZWQgZm9yIGFjY2Vzc2liaWxpdHksIHRvIGluZGljYXRlIHdoYXQgaXMgbG9hZGluZ1xuICAgKi9cbiAgbGFiZWw/OiBzdHJpbmdcbn1cblxuLyoqXG4gKiBMb2FkZXIgaXMgYSBjaXJjdWxhciBwcm9ncmVzcyBpbmRpY2F0b3IgdGhhdCBjYW4gYmUgdXNlZCB0byBpbmRpY2F0ZSB0aGF0IGFuIGFjdGlvbiBpcyBiZWluZyBwZXJmb3JtZWQuXG4gKi9cbmV4cG9ydCBjb25zdCBMb2FkZXIgPSAoe1xuICBwZXJjZW50YWdlID0gMjAsXG4gIHNpemUgPSAneGxhcmdlJyxcbiAgc2VudGltZW50ID0gJ3ByaW1hcnknLFxuICBhY3RpdmUgPSBmYWxzZSxcbiAgbGFiZWwgPSAnTG9hZGluZycsXG59OiBMb2FkZXJQcm9wcykgPT4ge1xuICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKClcblxuICBjb25zdCBjaXJjbGVSYWRpdXMgPSBIQUxGX1ZJRVdCT1hfSEVJR0hUIC0gOFxuICBjb25zdCBib3VuZGVkUGVyY2VudGFnZSA9IE1hdGgubWluKE1hdGgubWF4KHBlcmNlbnRhZ2UsIDApLCAxMDApIC8gMTAwXG4gIGNvbnN0IGNpcmNsZURpYW1ldGVyID0gTWF0aC5QSSAqIDIgKiBjaXJjbGVSYWRpdXNcblxuICByZXR1cm4gKFxuICAgIDxzdmdcbiAgICAgIGFyaWEtbGFiZWw9e2xhYmVsfVxuICAgICAgYXJpYS12YWx1ZW1heD17MTAwfVxuICAgICAgYXJpYS12YWx1ZW1pbj17MH1cbiAgICAgIGFyaWEtdmFsdWVub3c9e3BlcmNlbnRhZ2V9XG4gICAgICBhcmlhLXZhbHVldGV4dD17YCR7cGVyY2VudGFnZX0lYH1cbiAgICAgIGNsYXNzTmFtZT17YWN0aXZlID8gbG9hZGVyIDogdW5kZWZpbmVkfVxuICAgICAgcm9sZT1cInByb2dyZXNzYmFyXCJcbiAgICAgIHN0eWxlPXt7XG4gICAgICAgIGhlaWdodDogdGhlbWUuc2l6aW5nW1NJWkVTW3NpemVdXSxcbiAgICAgICAgd2lkdGg6IHRoZW1lLnNpemluZ1tTSVpFU1tzaXplXV0sXG4gICAgICB9fVxuICAgICAgdmlld0JveD17YDAgMCAke1ZJRVdCT1hfV0lEVEh9ICR7VklFV0JPWF9IRUlHSFR9YH1cbiAgICA+XG4gICAgICA8Y2lyY2xlXG4gICAgICAgIGNsYXNzTmFtZT17Y2lyY2xlfVxuICAgICAgICBjeD17SEFMRl9WSUVXQk9YX1dJRFRIfVxuICAgICAgICBjeT17SEFMRl9WSUVXQk9YX0hFSUdIVH1cbiAgICAgICAgZmlsbD1cIm5vbmVcIlxuICAgICAgICByPXtjaXJjbGVSYWRpdXN9XG4gICAgICAgIHN0cm9rZVdpZHRoPXsxNn1cbiAgICAgIC8+XG4gICAgICA8Y2lyY2xlXG4gICAgICAgIC8vIG94bGludC1kaXNhYmxlLW5leHQtbGluZSBuby11bmtub3duLXByb3BlcnR5XG4gICAgICAgIGNzcz17Y3NzYFxuICAgICAgICAgIHRyYW5zaXRpb246IHN0cm9rZS1kYXNob2Zmc2V0IDAuNXMgZWFzZSAwcztcbiAgICAgICAgYH1cbiAgICAgICAgY3g9e0hBTEZfVklFV0JPWF9XSURUSH1cbiAgICAgICAgY3k9e0hBTEZfVklFV0JPWF9IRUlHSFR9XG4gICAgICAgIGZpbGw9XCJub25lXCJcbiAgICAgICAgcj17Y2lyY2xlUmFkaXVzfVxuICAgICAgICBzdHJva2U9e1xuICAgICAgICAgIHNlbnRpbWVudCA9PT0gJ2JsYWNrJyB8fCBzZW50aW1lbnQgPT09ICd3aGl0ZSdcbiAgICAgICAgICAgID8gdGhlbWUuY29sb3JzLm90aGVyLm1vbm9jaHJvbWVbc2VudGltZW50XS5iYWNrZ3JvdW5kXG4gICAgICAgICAgICA6IHRoZW1lLmNvbG9yc1tzZW50aW1lbnRdPy5iYWNrZ3JvdW5kU3Ryb25nXG4gICAgICAgIH1cbiAgICAgICAgc3Ryb2tlRGFzaGFycmF5PXtjaXJjbGVEaWFtZXRlcn1cbiAgICAgICAgc3Ryb2tlRGFzaG9mZnNldD17KDEgLSBib3VuZGVkUGVyY2VudGFnZSkgKiBjaXJjbGVEaWFtZXRlcn1cbiAgICAgICAgc3Ryb2tlTGluZWNhcD1cInJvdW5kXCJcbiAgICAgICAgc3Ryb2tlV2lkdGg9ezE2fVxuICAgICAgLz5cbiAgICA8L3N2Zz5cbiAgKVxufVxuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
 const Loader = ({
   percentage = 20,
   size = "xlarge",
   sentiment = "primary",
   active = false,
-  label = "Loading"
+  label = "Loading",
+  style
 }) => {
   const theme = useTheme();
   const circleRadius = HALF_VIEWBOX_HEIGHT - 8;
   const boundedPercentage = Math.min(Math.max(percentage, 0), 100) / 100;
   const circleDiameter = Math.PI * 2 * circleRadius;
-  return /* @__PURE__ */ jsxs("svg", { "aria-label": label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": percentage, "aria-valuetext": `${percentage}%`, className: active ? loader : void 0, role: "progressbar", style: {
-    height: theme.sizing[SIZES[size]],
-    width: theme.sizing[SIZES[size]]
-  }, viewBox: `0 0 ${VIEWBOX_WIDTH} ${VIEWBOX_HEIGHT}`, children: [
-    /* @__PURE__ */ jsx("circle", { className: circle, cx: HALF_VIEWBOX_WIDTH, cy: HALF_VIEWBOX_HEIGHT, fill: "none", r: circleRadius, strokeWidth: 16 }),
-    /* @__PURE__ */ jsx(
-      "circle",
-      {
-        css: _ref,
-        cx: HALF_VIEWBOX_WIDTH,
-        cy: HALF_VIEWBOX_HEIGHT,
-        fill: "none",
-        r: circleRadius,
-        stroke: sentiment === "black" || sentiment === "white" ? theme.colors.other.monochrome[sentiment].background : theme.colors[sentiment]?.backgroundStrong,
-        strokeDasharray: circleDiameter,
-        strokeDashoffset: (1 - boundedPercentage) * circleDiameter,
-        strokeLinecap: "round",
-        strokeWidth: 16
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-label": label,
+      "aria-valuemax": 100,
+      "aria-valuemin": 0,
+      "aria-valuenow": percentage,
+      "aria-valuetext": `${percentage}%`,
+      className: active ? loader : void 0,
+      role: "progressbar",
+      style: {
+        height: theme.sizing[SIZES[size]],
+        width: theme.sizing[SIZES[size]],
+        ...style
+      },
+      viewBox: `0 0 ${VIEWBOX_WIDTH} ${VIEWBOX_HEIGHT}`,
+      children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            className: circle,
+            cx: HALF_VIEWBOX_WIDTH,
+            cy: HALF_VIEWBOX_HEIGHT,
+            fill: "none",
+            r: circleRadius,
+            strokeWidth: 16
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            className: loaderCircleAnimation,
+            cx: HALF_VIEWBOX_WIDTH,
+            cy: HALF_VIEWBOX_HEIGHT,
+            fill: "none",
+            r: circleRadius,
+            stroke: sentiment === "black" || sentiment === "white" ? theme.colors.other.monochrome[sentiment].background : theme.colors[sentiment]?.backgroundStrong,
+            strokeDasharray: circleDiameter,
+            strokeDashoffset: (1 - boundedPercentage) * circleDiameter,
+            strokeLinecap: "round",
+            strokeWidth: 16
+          }
+        )
+      ]
+    }
+  );
 };
 export {
-  Loader,
-  SIZES
+  Loader
 };

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

@@ -1,2 +1,3 @@
 export declare const circle: string;
 export declare const loader: string;
+export declare const loaderCircleAnimation: string;

package/dist/components/Loader/styles.css.js

@@ -1,7 +1,9 @@
 /* empty css                          */
 var circle = "uv_tkulld1";
 var loader = "uv_tkulld2";
+var loaderCircleAnimation = "uv_tkulld3";
 export {
   circle,
-  loader
+  loader,
+  loaderCircleAnimation
 };