@ultraviolet/ui 3.0.0-beta.27 → 3.0.0-beta.29

package/dist/components/List/Row.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { ArrowUpIcon, ArrowDownIcon } from "@ultraviolet/icons";
 import { theme } from "@ultraviolet/themes";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
@@ -12,96 +12,172 @@ import { ColumnProvider } from "./ColumnProvider.js";
 import { useListContext } from "./ListContext.js";
 import { listRow, listNoPaddingCell, listCheckboxContainer, listCheckboxInRange, listExpandableWrapper, listExpandableCell } from "./styles.css.js";
 import { paddingExpandableCell } from "./variables.css.js";
-const Row = forwardRef(({
-  children,
-  id,
-  expandable,
-  disabled,
-  selectDisabled,
-  sentiment = "neutral",
-  highlightAnimation,
-  expanded,
-  className,
-  expandablePadding,
-  "data-testid": dataTestid,
-  style,
-  "data-dragging": dataDragging,
-  onMouseEnter,
-  onMouseLeave
-}, forwardedRef) => {
-  const {
-    selectable,
-    registerExpandableRow,
-    expandedRowIds,
-    expandRow,
-    collapseRow,
-    registerSelectableRow,
-    selectedRowIds,
-    expandButton,
-    columns,
-    inRange,
-    refList,
-    setRefList,
-    handleOnChange
-  } = useListContext();
-  const expandedRowId = useId();
-  const checkboxRef = useRef(null);
-  const isSelectDisabled = disabled || selectDisabled !== void 0 && selectDisabled !== false;
-  const hasExpandable = !!expandable;
-  useEffect(() => {
-    if (hasExpandable) {
-      const unregisterCallback = registerExpandableRow(id, expanded);
-      return unregisterCallback;
-    }
-    return void 0;
-  }, [id, hasExpandable, registerExpandableRow, expanded, expandRow]);
-  useEffect(() => {
-    if (!isSelectDisabled) {
-      const unregisterCallback = registerSelectableRow(id);
-      return unregisterCallback;
-    }
-    return void 0;
-  }, [id, registerSelectableRow, isSelectDisabled]);
-  const toggleRowExpand = useCallback(() => {
-    if (expandedRowIds[id]) {
-      collapseRow(id);
-    } else {
-      expandRow(id);
-    }
-  }, [collapseRow, expandRow, expandedRowIds, id]);
-  const canClickRowToExpand = !disabled && !!expandable && !expandButton;
-  useEffect(() => {
-    if (checkboxRef.current !== null && !refList.includes(checkboxRef)) {
-      setRefList([...refList, checkboxRef]);
-    }
-  }, [refList, setRefList]);
-  const childrenLength = Children.count(children) + (selectable ? 1 : 0) + (expandButton ? 1 : 0);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("tr", { "aria-controls": expandable && expandedRowIds[id] ? expandedRowId : void 0, "aria-disabled": disabled, "aria-expanded": expandable ? expandedRowIds[id] : void 0, className: `${className ? `${className} ` : ""}${listRow({
-      highlightAnimation,
-      sentiment
-    })}`, "data-dragging": dataDragging, "data-highlight": selectable && !!selectedRowIds[id], "data-testid": dataTestid, onClick: canClickRowToExpand ? toggleRowExpand : void 0, onKeyDown: canClickRowToExpand ? (event) => {
-      if (event.key === " ") {
-        toggleRowExpand();
-        event.preventDefault();
+const Row = forwardRef(
+  ({
+    children,
+    id,
+    expandable,
+    disabled,
+    selectDisabled,
+    sentiment = "neutral",
+    highlightAnimation,
+    expanded,
+    className,
+    expandablePadding,
+    "data-testid": dataTestid,
+    style,
+    "data-dragging": dataDragging,
+    onMouseEnter,
+    onMouseLeave
+  }, forwardedRef) => {
+    const {
+      selectable,
+      registerExpandableRow,
+      expandedRowIds,
+      expandRow,
+      collapseRow,
+      registerSelectableRow,
+      selectedRowIds,
+      expandButton,
+      columns,
+      inRange,
+      refList,
+      setRefList,
+      handleOnChange
+    } = useListContext();
+    const expandedRowId = useId();
+    const checkboxRef = useRef(null);
+    const isSelectDisabled = disabled || selectDisabled !== void 0 && selectDisabled !== false;
+    const hasExpandable = !!expandable;
+    useEffect(() => {
+      if (hasExpandable) {
+        const unregisterCallback = registerExpandableRow(id, expanded);
+        return unregisterCallback;
       }
-    } : void 0, onMouseEnter, onMouseLeave, ref: forwardedRef, role: canClickRowToExpand ? "button row" : void 0, style, tabIndex: canClickRowToExpand ? 0 : -1, children: [
-      selectable ? /* @__PURE__ */ jsx(ColumnProvider, { width: theme.sizing[300], children: /* @__PURE__ */ jsx(Cell, { className: listNoPaddingCell, children: /* @__PURE__ */ jsx("div", { className: listCheckboxContainer, children: /* @__PURE__ */ jsx(Tooltip, { text: typeof selectDisabled === "string" ? selectDisabled : void 0, children: /* @__PURE__ */ jsx(Checkbox, { "aria-label": "select", checked: selectedRowIds[id], className: inRange?.includes(id) ? listCheckboxInRange : "", disabled: isSelectDisabled, name: "list-select-checkbox", onChange: () => handleOnChange(id, selectedRowIds[id]), ref: checkboxRef, value: id }) }) }) }) }) : null,
-      expandButton ? /* @__PURE__ */ jsx(ColumnProvider, { width: theme.sizing[400], children: /* @__PURE__ */ jsx(Cell, { className: listNoPaddingCell, children: /* @__PURE__ */ jsx(Button, { "aria-label": "expand", "data-testid": "list-expand-button", disabled: disabled || !expandable, onClick: toggleRowExpand, sentiment, size: "small", variant: "ghost", children: expandedRowIds[id] ? /* @__PURE__ */ jsx(ArrowUpIcon, {}) : /* @__PURE__ */ jsx(ArrowDownIcon, {}) }) }) }) : null,
-      Children.map(children, (child, index) => {
-        const column = columns[index];
-        return /* @__PURE__ */ jsx(ColumnProvider, { maxWidth: column?.maxWidth, minWidth: column?.minWidth, width: column?.width, children: child });
-      })
-    ] }),
-    expandable && expandedRowIds[id] ? /* @__PURE__ */ jsx("tr", { className: listExpandableWrapper, "data-expandable-content": true, "data-highlight": selectable && !!selectedRowIds[id], id: expandedRowId, onClick: canClickRowToExpand ? (e) => {
-      e.stopPropagation();
-    } : void 0, onKeyDown: canClickRowToExpand ? (e) => {
-      e.stopPropagation();
-    } : void 0, children: /* @__PURE__ */ jsx(Cell, { className: listExpandableCell, colSpan: childrenLength, style: assignInlineVars({
-      [paddingExpandableCell]: theme.space[expandablePadding ?? "2"]
-    }), children: expandable }) }) : null
-  ] });
-});
+      return void 0;
+    }, [id, hasExpandable, registerExpandableRow, expanded, expandRow]);
+    useEffect(() => {
+      if (!isSelectDisabled) {
+        const unregisterCallback = registerSelectableRow(id);
+        return unregisterCallback;
+      }
+      return void 0;
+    }, [id, registerSelectableRow, isSelectDisabled]);
+    const toggleRowExpand = useCallback(() => {
+      if (expandedRowIds[id]) {
+        collapseRow(id);
+      } else {
+        expandRow(id);
+      }
+    }, [collapseRow, expandRow, expandedRowIds, id]);
+    const canClickRowToExpand = !disabled && !!expandable && !expandButton;
+    useEffect(() => {
+      if (checkboxRef.current !== null && !refList.includes(checkboxRef)) {
+        setRefList([...refList, checkboxRef]);
+      }
+    }, [refList, setRefList]);
+    const childrenLength = Children.count(children) + (selectable ? 1 : 0) + (expandButton ? 1 : 0);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "tr",
+        {
+          "aria-controls": expandable && expandedRowIds[id] ? expandedRowId : void 0,
+          "aria-disabled": disabled,
+          "aria-expanded": expandable ? expandedRowIds[id] : void 0,
+          className: `${className ? `${className} ` : ""}${listRow({ highlightAnimation, sentiment })}`,
+          "data-dragging": dataDragging,
+          "data-highlight": selectable && !!selectedRowIds[id],
+          "data-testid": dataTestid,
+          onClick: canClickRowToExpand ? toggleRowExpand : void 0,
+          onKeyDown: canClickRowToExpand ? (event) => {
+            if (event.key === " ") {
+              toggleRowExpand();
+              event.preventDefault();
+            }
+          } : void 0,
+          onMouseEnter,
+          onMouseLeave,
+          ref: forwardedRef,
+          role: canClickRowToExpand ? "button row" : void 0,
+          style,
+          tabIndex: canClickRowToExpand ? 0 : -1,
+          children: [
+            selectable ? /* @__PURE__ */ jsx(ColumnProvider, { width: theme.sizing[300], children: /* @__PURE__ */ jsx(Cell, { className: listNoPaddingCell, children: /* @__PURE__ */ jsx("div", { className: listCheckboxContainer, children: /* @__PURE__ */ jsx(
+              Tooltip,
+              {
+                text: typeof selectDisabled === "string" ? selectDisabled : void 0,
+                children: /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    "aria-label": "select",
+                    checked: selectedRowIds[id],
+                    className: inRange?.includes(id) ? listCheckboxInRange : "",
+                    disabled: isSelectDisabled,
+                    name: "list-select-checkbox",
+                    onChange: () => handleOnChange(id, selectedRowIds[id]),
+                    ref: checkboxRef,
+                    value: id
+                  }
+                )
+              }
+            ) }) }) }) : null,
+            expandButton ? /* @__PURE__ */ jsx(ColumnProvider, { width: theme.sizing[400], children: /* @__PURE__ */ jsx(Cell, { className: listNoPaddingCell, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                "aria-label": "expand",
+                "data-testid": "list-expand-button",
+                disabled: disabled || !expandable,
+                onClick: toggleRowExpand,
+                sentiment,
+                size: "small",
+                variant: "ghost",
+                children: expandedRowIds[id] ? /* @__PURE__ */ jsx(ArrowUpIcon, {}) : /* @__PURE__ */ jsx(ArrowDownIcon, {})
+              }
+            ) }) }) : null,
+            Children.map(children, (child, index) => {
+              const column = columns[index];
+              return /* @__PURE__ */ jsx(
+                ColumnProvider,
+                {
+                  maxWidth: column?.maxWidth,
+                  minWidth: column?.minWidth,
+                  width: column?.width,
+                  children: child
+                }
+              );
+            })
+          ]
+        }
+      ),
+      expandable && expandedRowIds[id] ? /* @__PURE__ */ jsx(
+        "tr",
+        {
+          className: listExpandableWrapper,
+          "data-expandable-content": true,
+          "data-highlight": selectable && !!selectedRowIds[id],
+          id: expandedRowId,
+          onClick: canClickRowToExpand ? (e) => {
+            e.stopPropagation();
+          } : void 0,
+          onKeyDown: canClickRowToExpand ? (e) => {
+            e.stopPropagation();
+          } : void 0,
+          children: /* @__PURE__ */ jsx(
+            Cell,
+            {
+              className: listExpandableCell,
+              colSpan: childrenLength,
+              style: assignInlineVars({
+                [paddingExpandableCell]: theme.space[expandablePadding ?? "2"]
+              }),
+              children: expandable
+            }
+          )
+        }
+      ) : null
+    ] });
+  }
+);
 export {
   Row
 };

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,5 +1,5 @@
 "use client";
-import { jsx, Fragment, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { Skeleton } from "../Skeleton/index.js";
 import { Cell } from "./Cell.js";
 import { ColumnProvider } from "./ColumnProvider.js";
@@ -10,21 +10,31 @@ const SkeletonRows = ({
   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("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)) });
+  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

@@ -56,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,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+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,13 +9,11 @@ import { Row } from "./Row.js";
 import { SelectBar } from "./SelectBar.js";
 import { SkeletonRows } from "./SkeletonRows.js";
 import { list, listContainer } from "./styles.css.js";
-const TableContainer = ({
-  children
-}) => {
-  const [childrenMemory, setChildrenMemory] = useState(Children.toArray(children));
-  const {
-    setRefList
-  } = useListContext();
+const TableContainer = ({ children }) => {
+  const [childrenMemory, setChildrenMemory] = useState(
+    Children.toArray(children)
+  );
+  const { setRefList } = useListContext();
   useEffect(() => {
     if (Children.toArray(children) !== childrenMemory) {
       setRefList([]);
@@ -24,20 +22,60 @@ const TableContainer = ({
   }, [children, setRefList]);
   return /* @__PURE__ */ jsx("div", { className: listContainer, 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 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/Loader/index.d.ts

@@ -15,5 +15,5 @@ type LoaderProps = {
 /**
  * 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, style, }: 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,5 +1,5 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+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";
@@ -19,28 +19,52 @@ const Loader = ({
   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]],
-    ...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
-      }
-    )
-  ] });
+  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

package/dist/components/Menu/MenuContent.d.ts

@@ -20,7 +20,7 @@ export declare const Menu: import("react").ForwardRefExoticComponent<{
     hideOnClickItem?: boolean;
     footer?: ReactNode;
     placement?: Exclude<import("react").ComponentProps<typeof Popup>["placement"], "nested-menu">;
-    noShrink?: boolean;
+    shrink?: boolean;
 } & Pick<{
     id?: string;
     children: ReactNode | ((renderProps: {