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

package/dist/components/Stepper/StepperProvider.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useMemo, useState, useEffect, createContext, useContext } from "react";
 const StepperContext = createContext({
   animated: false,
@@ -23,15 +23,18 @@ const StepperProvider = ({
 }) => {
   const currentSelected = useMemo(() => selected, [selected]);
   const [step, setStep] = useState(currentSelected);
-  const value = useMemo(() => ({
-    animated,
-    interactive,
-    labelPosition,
-    separator,
-    setStep,
-    size,
-    step
-  }), [step, interactive, size, animated, labelPosition, separator]);
+  const value = useMemo(
+    () => ({
+      animated,
+      interactive,
+      labelPosition,
+      separator,
+      setStep,
+      size,
+      step
+    }),
+    [step, interactive, size, animated, labelPosition, separator]
+  );
   useEffect(() => setStep(selected), [selected]);
   return /* @__PURE__ */ jsx(StepperContext.Provider, { value, children });
 };

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

@@ -18,7 +18,7 @@ type StepperProps = {
     style?: CSSProperties;
 };
 export declare const Stepper: {
-    ({ children, interactive, selected, animated, className, labelPosition, size, "data-testid": dataTestId, separator, style, }: StepperProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    ({ children, interactive, selected, animated, className, labelPosition, size, "data-testid": dataTestId, separator, style, }: StepperProps): import("react/jsx-runtime").JSX.Element;
     Step: ({ index, onClick, disabled, title, children, className, style, "data-testid": dataTestId, }: {
         onClick?: (index: number) => void;
         index?: number;
@@ -28,6 +28,6 @@ export declare const Stepper: {
         className?: string;
         'data-testid'?: string;
         style?: CSSProperties;
-    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    }) => import("react/jsx-runtime").JSX.Element;
 };
 export {};

package/dist/components/Stepper/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Children, isValidElement, Fragment } from "react";
 import { Step } from "./Step.js";
 import { StepperProvider } from "./StepperProvider.js";
@@ -16,32 +16,52 @@ const Stepper = ({
   separator = true,
   style
 }) => {
-  const cleanChildren = Children.toArray(children).filter((child) => isValidElement(child));
+  const cleanChildren = Children.toArray(children).filter(
+    (child) => isValidElement(child)
+  );
   const lastStep = Children.count(cleanChildren) - 1;
-  return /* @__PURE__ */ jsx(StepperProvider, { animated, interactive, labelPosition, selected, separator, size, children: /* @__PURE__ */ jsx("div", { className: `${className ? `${className} ` : ""}${stepperContainer({
-    labelPosition,
-    separator
-  })}`, "data-testid": dataTestId, style, children: Children.map(cleanChildren, (child, index) => {
-    const getTemporal = () => {
-      if (index < selected) {
-        return "done";
-      }
-      if (index === selected) {
-        return "current";
-      }
-      return "next";
-    };
-    const isNotLast = index < lastStep;
-    const temporal = getTemporal();
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Step, { index, ...child.props }),
-      isNotLast && separator && labelPosition === "right" ? /* @__PURE__ */ jsx("div", { className: stepperLine({
-        animated,
-        size,
-        temporal
-      }), "data-size": size }) : null
-    ] }, `creation-progress-${index}`);
-  }) }) });
+  return /* @__PURE__ */ jsx(
+    StepperProvider,
+    {
+      animated,
+      interactive,
+      labelPosition,
+      selected,
+      separator,
+      size,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `${className ? `${className} ` : ""}${stepperContainer({ labelPosition, separator })}`,
+          "data-testid": dataTestId,
+          style,
+          children: Children.map(cleanChildren, (child, index) => {
+            const getTemporal = () => {
+              if (index < selected) {
+                return "done";
+              }
+              if (index === selected) {
+                return "current";
+              }
+              return "next";
+            };
+            const isNotLast = index < lastStep;
+            const temporal = getTemporal();
+            return /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Step, { index, ...child.props }),
+              isNotLast && separator && labelPosition === "right" ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: stepperLine({ animated, size, temporal }),
+                  "data-size": size
+                }
+              ) : null
+            ] }, `creation-progress-${index}`);
+          })
+        }
+      )
+    }
+  );
 };
 Stepper.Step = Step;
 export {

package/dist/components/SwitchButton/FocusOverlay.d.ts

@@ -4,5 +4,5 @@ type FocusOverlayProps = {
     mouseDownSide: 'left' | 'right' | null;
     sentiment: 'neutral' | 'primary';
 };
-export declare const FocusOverlay: ({ cardWidth, position, mouseDownSide, sentiment, }: FocusOverlayProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const FocusOverlay: ({ cardWidth, position, mouseDownSide, sentiment, }: FocusOverlayProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/SwitchButton/FocusOverlay.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { FOCUS_OVERLAY_SCALE_RATIO } from "./constant.js";
 import { focusOverlay } from "./styles.css.js";
 const FocusOverlay = ({
@@ -7,10 +7,16 @@ const FocusOverlay = ({
   position,
   mouseDownSide,
   sentiment
-}) => /* @__PURE__ */ jsx("div", { className: focusOverlay[sentiment], style: {
-  left: `${position - (mouseDownSide === "left" ? FOCUS_OVERLAY_SCALE_RATIO : 0)}px`,
-  width: `${cardWidth}px`
-} });
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: focusOverlay[sentiment],
+    style: {
+      left: `${position - (mouseDownSide === "left" ? FOCUS_OVERLAY_SCALE_RATIO : 0)}px`,
+      width: `${cardWidth}px`
+    }
+  }
+);
 export {
   FocusOverlay
 };

package/dist/components/SwitchButton/Option.d.ts

@@ -7,5 +7,5 @@ type OptionProps = {
     tooltip?: string;
     style?: CSSProperties;
 };
-export declare const Option: ({ value, children, "data-testid": dataTestId, disabled, tooltip, style, }: OptionProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Option: ({ value, children, "data-testid": dataTestId, disabled, tooltip, style, }: OptionProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/SwitchButton/Option.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useRef, useEffect } from "react";
 import { SelectableCard } from "../SelectableCard/index.js";
 import { useSwitchButton } from "./SwitchButtonContext.js";
@@ -33,7 +33,25 @@ const Option = ({
       setRefOptions([...refOptions, option]);
     }
   }, [refOptions, setRefOptions, value]);
-  return /* @__PURE__ */ jsx(SelectableCard, { checked: localValue === value, className: switchButtonOption[sentiment], "data-checked": localValue === value, "data-testid": dataTestId ?? `switch-button-${value}`, disabled: !!disabled, label: children, name, onBlur, onChange: handleOnChange, onFocus, ref, style, tooltip, value });
+  return /* @__PURE__ */ jsx(
+    SelectableCard,
+    {
+      checked: localValue === value,
+      className: switchButtonOption[sentiment],
+      "data-checked": localValue === value,
+      "data-testid": dataTestId ?? `switch-button-${value}`,
+      disabled: !!disabled,
+      label: children,
+      name,
+      onBlur,
+      onChange: handleOnChange,
+      onFocus,
+      ref,
+      style,
+      tooltip,
+      value
+    }
+  );
 };
 export {
   Option

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

@@ -17,7 +17,7 @@ type SwitchButtonProps = {
  * SwitchButton is a component that allows the user to select between two options.
  */
 export declare const SwitchButton: {
-    ({ value, onChange, onFocus, onBlur, name, size, sentiment, tooltip, className, children, "data-testid": dataTestId, style, }: SwitchButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    ({ value, onChange, onFocus, onBlur, name, size, sentiment, tooltip, className, children, "data-testid": dataTestId, style, }: SwitchButtonProps): import("react/jsx-runtime").JSX.Element;
     Option: ({ value, children, "data-testid": dataTestId, disabled, tooltip, style, }: {
         value: string;
         children: ReactNode;
@@ -25,6 +25,6 @@ export declare const SwitchButton: {
         disabled?: boolean;
         tooltip?: string;
         style?: CSSProperties;
-    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    }) => import("react/jsx-runtime").JSX.Element;
 };
 export {};

package/dist/components/SwitchButton/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef, useState, useCallback, useEffect, useMemo } from "react";
 import { Stack } from "../Stack/index.js";
 import { Tooltip } from "../Tooltip/index.js";
@@ -27,8 +27,15 @@ const SwitchButton = ({
   const [refOptions, setRefOptions] = useState([]);
   const [position, setPosition] = useState(0);
   const [width, setWidth] = useState(0);
-  const [mouseDownSide, setMouseDownSide] = useState(null);
-  const getElement = useCallback((referenceValue) => refOptions.find((element) => element.current && element.value === referenceValue)?.current, [refOptions]);
+  const [mouseDownSide, setMouseDownSide] = useState(
+    null
+  );
+  const getElement = useCallback(
+    (referenceValue) => refOptions.find(
+      (element) => element.current && element.value === referenceValue
+    )?.current,
+    [refOptions]
+  );
   const getPosition = (curentElement) => {
     if (!curentElement) {
       return 0;
@@ -48,7 +55,11 @@ const SwitchButton = ({
       return void 0;
     }
     const resizeObserver = new ResizeObserver(() => {
-      if (element.offsetWidth && (![width, width + FOCUS_OVERLAY_SCALE_RATIO, width - FOCUS_OVERLAY_SCALE_RATIO].includes(element.offsetWidth) || getPosition(element) !== position)) {
+      if (element.offsetWidth && (![
+        width,
+        width + FOCUS_OVERLAY_SCALE_RATIO,
+        width - FOCUS_OVERLAY_SCALE_RATIO
+      ].includes(element.offsetWidth) || getPosition(element) !== position)) {
         setWidth(element.offsetWidth ?? 0);
         setPosition(getPosition(element));
       }
@@ -58,51 +69,87 @@ const SwitchButton = ({
       resizeObserver.disconnect();
     };
   }, [getElement, width, position, localValue, children]);
-  const handleOnChange = useCallback((event) => {
-    onChange?.(event);
-    setLocalValue(event.target.value);
-    const currentElement = getElement(event.target.value);
-    if (currentElement && containerRef.current) {
-      const currentWidth = currentElement.offsetWidth ?? 0;
-      setWidth(currentWidth);
-      setPosition(getPosition(currentElement));
-    }
-  }, [getElement, onChange]);
-  const valueContext = useMemo(() => ({
-    handleOnChange,
-    localValue,
-    name,
-    onBlur,
-    onFocus,
-    refOptions,
-    sentiment,
-    setRefOptions,
-    size
-  }), [handleOnChange, localValue, name, onBlur, onFocus, refOptions, size, sentiment]);
-  return /* @__PURE__ */ jsx(SwitchButtonContext.Provider, { value: valueContext, children: /* @__PURE__ */ jsx(Tooltip, { text: tooltip, children: /* @__PURE__ */ jsx(Stack, { className, "data-testid": dataTestId, direction: "row", children: /* @__PURE__ */ jsxs("div", { className: switchButtonContainer[size], onMouseDown: (event) => {
-    const rect = event.currentTarget.getBoundingClientRect();
-    const clickX = event.clientX - rect.left;
-    const clickInCurrentElement = clickX > position && clickX < position + width;
-    if (!clickInCurrentElement) {
-      setMouseDownSide(clickX < getPosition(getElement(localValue)) ? "left" : "right");
-      setWidth(width + FOCUS_OVERLAY_SCALE_RATIO);
-    } else {
-      setMouseDownSide(null);
-    }
-  }, onMouseLeave: () => {
-    setMouseDownSide(null);
-    if (mouseDownSide) {
-      setWidth(width - FOCUS_OVERLAY_SCALE_RATIO);
-    }
-  }, onMouseUp: () => {
-    setMouseDownSide(null);
-    if (mouseDownSide) {
-      setWidth(width - FOCUS_OVERLAY_SCALE_RATIO);
+  const handleOnChange = useCallback(
+    (event) => {
+      onChange?.(event);
+      setLocalValue(event.target.value);
+      const currentElement = getElement(event.target.value);
+      if (currentElement && containerRef.current) {
+        const currentWidth = currentElement.offsetWidth ?? 0;
+        setWidth(currentWidth);
+        setPosition(getPosition(currentElement));
+      }
+    },
+    [getElement, onChange]
+  );
+  const valueContext = useMemo(
+    () => ({
+      handleOnChange,
+      localValue,
+      name,
+      onBlur,
+      onFocus,
+      refOptions,
+      sentiment,
+      setRefOptions,
+      size
+    }),
+    [
+      handleOnChange,
+      localValue,
+      name,
+      onBlur,
+      onFocus,
+      refOptions,
+      size,
+      sentiment
+    ]
+  );
+  return /* @__PURE__ */ jsx(SwitchButtonContext.Provider, { value: valueContext, children: /* @__PURE__ */ jsx(Tooltip, { text: tooltip, children: /* @__PURE__ */ jsx(Stack, { className, "data-testid": dataTestId, direction: "row", children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: switchButtonContainer[size],
+      onMouseDown: (event) => {
+        const rect = event.currentTarget.getBoundingClientRect();
+        const clickX = event.clientX - rect.left;
+        const clickInCurrentElement = clickX > position && clickX < position + width;
+        if (!clickInCurrentElement) {
+          setMouseDownSide(
+            clickX < getPosition(getElement(localValue)) ? "left" : "right"
+          );
+          setWidth(width + FOCUS_OVERLAY_SCALE_RATIO);
+        } else {
+          setMouseDownSide(null);
+        }
+      },
+      onMouseLeave: () => {
+        setMouseDownSide(null);
+        if (mouseDownSide) {
+          setWidth(width - FOCUS_OVERLAY_SCALE_RATIO);
+        }
+      },
+      onMouseUp: () => {
+        setMouseDownSide(null);
+        if (mouseDownSide) {
+          setWidth(width - FOCUS_OVERLAY_SCALE_RATIO);
+        }
+      },
+      ref: containerRef,
+      style,
+      children: [
+        width ? /* @__PURE__ */ jsx(
+          FocusOverlay,
+          {
+            cardWidth: width,
+            mouseDownSide,
+            position,
+            sentiment
+          }
+        ) : null,
+        children
+      ]
     }
-  }, ref: containerRef, style, children: [
-    width ? /* @__PURE__ */ jsx(FocusOverlay, { cardWidth: width, mouseDownSide, position, sentiment }) : null,
-    children
-  ] }) }) }) });
+  ) }) }) });
 };
 SwitchButton.Option = Option;
 export {

package/dist/components/Table/Body.d.ts

@@ -2,5 +2,5 @@ import type { ReactNode } from 'react';
 type BodyProps = {
     children: ReactNode;
 };
-export declare const Body: ({ children }: BodyProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Body: ({ children }: BodyProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Table/Body.js

@@ -1,8 +1,6 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
-const Body = ({
-  children
-}) => /* @__PURE__ */ jsx("tbody", { children });
+import { jsx } from "react/jsx-runtime";
+const Body = ({ children }) => /* @__PURE__ */ jsx("tbody", { children });
 export {
   Body
 };

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

@@ -10,5 +10,5 @@ type CellProps = {
     align?: Align;
     style?: CSSProperties;
 };
-export declare const Cell: ({ children, className, colSpan, rowSpan, sentiment, align, style, }: CellProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Cell: ({ children, className, colSpan, rowSpan, sentiment, align, style, }: CellProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Table/Cell.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { useColumnProvider } from "../List/ColumnProvider.js";
 import { tableCell } from "./styles.css.js";
@@ -13,22 +13,25 @@ const Cell = ({
   align = "left",
   style
 }) => {
-  const {
-    maxWidth,
-    minWidth,
-    width
-  } = useColumnProvider();
-  return /* @__PURE__ */ jsx("td", { align, className: `${className ? `${className} ` : ""}${tableCell({
-    align,
-    sentiment
-  })}`, colSpan, rowSpan, style: {
-    ...assignInlineVars({
-      [widthCell]: width,
-      [minWidthCell]: minWidth,
-      [maxWidthCell]: maxWidth
-    }),
-    ...style
-  }, children });
+  const { maxWidth, minWidth, width } = useColumnProvider();
+  return /* @__PURE__ */ jsx(
+    "td",
+    {
+      align,
+      className: `${className ? `${className} ` : ""}${tableCell({ align, sentiment })}`,
+      colSpan,
+      rowSpan,
+      style: {
+        ...assignInlineVars({
+          [widthCell]: width,
+          [minWidthCell]: minWidth,
+          [maxWidthCell]: maxWidth
+        }),
+        ...style
+      },
+      children
+    }
+  );
 };
 export {
   Cell

package/dist/components/Table/Header.d.ts

@@ -2,5 +2,5 @@ import type { ReactNode } from 'react';
 type HeaderProps = {
     children: ReactNode;
 };
-export declare const Header: ({ children }: HeaderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Header: ({ children }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Table/Header.js

@@ -1,9 +1,7 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { tableHeader } from "./styles.css.js";
-const Header = ({
-  children
-}) => /* @__PURE__ */ jsx("thead", { className: tableHeader, children });
+const Header = ({ children }) => /* @__PURE__ */ jsx("thead", { className: tableHeader, children });
 export {
   Header
 };

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

@@ -12,5 +12,5 @@ type HeaderCellProps = {
     minWidth?: string;
     isCheckbox?: boolean;
 };
-export declare const HeaderCell: ({ children, className, isOrdered, onOrder, orderDirection, info, align, width, maxWidth, minWidth, isCheckbox, }: HeaderCellProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const HeaderCell: ({ children, className, isOrdered, onOrder, orderDirection, info, align, width, maxWidth, minWidth, isCheckbox, }: HeaderCellProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Table/HeaderCell.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { InformationOutlineIcon, SouthShortIcon, SortIcon as SortIcon$1 } from "@ultraviolet/icons";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { listSortIcon } from "../List/styles.css.js";
@@ -7,9 +7,7 @@ import { Text } from "../Text/index.js";
 import { Tooltip } from "../Tooltip/index.js";
 import { tableHeaderCell, headerCellText } from "./styles.css.js";
 import { headerCellMinWidth, headerCellMaxWidth, headerCellWidth } from "./variables.css.js";
-const SortIcon = ({
-  order
-}) => order ? /* @__PURE__ */ jsx(SouthShortIcon, { className: listSortIcon[order], sentiment: "primary" }) : /* @__PURE__ */ jsx(SortIcon$1, { sentiment: "neutral" });
+const SortIcon = ({ order }) => order ? /* @__PURE__ */ jsx(SouthShortIcon, { className: listSortIcon[order], sentiment: "primary" }) : /* @__PURE__ */ jsx(SortIcon$1, { sentiment: "neutral" });
 const HeaderCell = ({
   children,
   className,
@@ -30,25 +28,51 @@ const HeaderCell = ({
     order = "descending";
   }
   const handleOrder = onOrder ? () => onOrder(order === "ascending" ? "desc" : "asc") : void 0;
-  return /* @__PURE__ */ jsx("th", { align, "aria-sort": order, className: `${className ? `${className} ` : ""}${tableHeaderCell({
-    align,
-    checked: isCheckbox
-  })}`, onClick: handleOrder, onKeyDown: handleOrder ? (event) => {
-    if (event.key === " " || event.key === "Enter") {
-      handleOrder();
-      if (event.key === " ") {
-        event.preventDefault();
-      }
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      align,
+      "aria-sort": order,
+      className: `${className ? `${className} ` : ""}${tableHeaderCell({ align, checked: isCheckbox })}`,
+      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({
+        [headerCellWidth]: width ?? "auto",
+        [headerCellMaxWidth]: maxWidth ?? "none",
+        [headerCellMinWidth]: minWidth ?? "auto"
+      }),
+      tabIndex: handleOrder ? 0 : -1,
+      children: /* @__PURE__ */ jsxs(
+        Text,
+        {
+          as: "div",
+          className: headerCellText,
+          sentiment: order !== void 0 ? "primary" : "neutral",
+          variant: "bodySmall",
+          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, { "aria-disabled": !onOrder, order }) : null
+          ]
+        }
+      )
     }
-  } : void 0, role: onOrder ? "button columnheader" : void 0, style: assignInlineVars({
-    [headerCellWidth]: width ?? "auto",
-    [headerCellMaxWidth]: maxWidth ?? "none",
-    [headerCellMinWidth]: minWidth ?? "auto"
-  }), tabIndex: handleOrder ? 0 : -1, children: /* @__PURE__ */ jsxs(Text, { as: "div", className: headerCellText, sentiment: order !== void 0 ? "primary" : "neutral", variant: "bodySmall", 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, { "aria-disabled": !onOrder, order }) : null
-  ] }) });
+  );
 };
 export {
   HeaderCell

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

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

package/dist/components/Table/HeaderRow.js

@@ -1,24 +1,33 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useTheme } from "@ultraviolet/themes";
 import { Checkbox } from "../Checkbox/index.js";
 import { SELECTABLE_CHECKBOX_SIZE } from "./constants.js";
 import { HeaderCell } from "./HeaderCell.js";
 import { useTableContext } from "./TableContext.js";
-const HeaderRow = ({
-  children,
-  hasSelectAllColumn
-}) => {
-  const {
-    allRowSelectValue,
-    selectAllHandler,
-    selectedRowIds,
-    expandButton
-  } = useTableContext();
+const HeaderRow = ({ children, hasSelectAllColumn }) => {
+  const { allRowSelectValue, selectAllHandler, selectedRowIds, expandButton } = useTableContext();
   const theme = useTheme();
   const selectableRowCount = Object.keys(selectedRowIds).length;
   return /* @__PURE__ */ jsxs("tr", { role: "row", children: [
-    hasSelectAllColumn ? /* @__PURE__ */ jsx(HeaderCell, { isCheckbox: true, maxWidth: theme.sizing[SELECTABLE_CHECKBOX_SIZE], children: /* @__PURE__ */ jsx(Checkbox, { "aria-label": "select all", checked: allRowSelectValue, disabled: selectableRowCount === 0, name: "table-select-all-checkbox", onChange: selectAllHandler, value: "all" }) }) : null,
+    hasSelectAllColumn ? /* @__PURE__ */ jsx(
+      HeaderCell,
+      {
+        isCheckbox: true,
+        maxWidth: theme.sizing[SELECTABLE_CHECKBOX_SIZE],
+        children: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            "aria-label": "select all",
+            checked: allRowSelectValue,
+            disabled: selectableRowCount === 0,
+            name: "table-select-all-checkbox",
+            onChange: selectAllHandler,
+            value: "all"
+          }
+        )
+      }
+    ) : null,
     expandButton ? /* @__PURE__ */ jsx(HeaderCell, { children: null }) : null,
     children
   ] });