@ultraviolet/ui 3.0.0-beta.8 → 3.0.0

package/dist/components/SwitchButton/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 { useRef, useState, useCallback, useEffect, useMemo } from "react";
 import { Stack } from "../Stack/index.js";
 import { Tooltip } from "../Tooltip/index.js";
@@ -8,29 +7,7 @@ import { FOCUS_OVERLAY_SCALE_RATIO } from "./constant.js";
 import { FocusOverlay } from "./FocusOverlay.js";
 import { Option } from "./Option.js";
 import { SwitchButtonContext } from "./SwitchButtonContext.js";
-const SIZES = {
-  medium: "600",
-  small: "500"
-  // sizing token from theme
-};
-const StyledBorderedBox = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e4ryteh0"
-} : {
-  target: "e4ryteh0",
-  label: "StyledBorderedBox"
-})("border:1px solid ", ({
-  theme
-}) => theme.colors.neutral.border, ";border-radius:", ({
-  theme
-}) => theme.radii.default, ";padding:", ({
-  theme
-}) => theme.space["0.5"], ";display:flex;gap:", ({
-  theme
-}) => theme.space["1"], ";position:relative;&[data-size='small']{height:", ({
-  theme
-}) => theme.sizing[SIZES.small], ";}&[data-size='medium']{height:", ({
-  theme
-}) => theme.sizing[SIZES.medium], ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1N3aXRjaEJ1dHRvbi9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdUJ5RSIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay91bHRyYXZpb2xldC91bHRyYXZpb2xldC9wYWNrYWdlcy91aS9zcmMvY29tcG9uZW50cy9Td2l0Y2hCdXR0b24vaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHR5cGUge1xuICBDaGFuZ2VFdmVudCxcbiAgQ2hhbmdlRXZlbnRIYW5kbGVyLFxuICBGb2N1c0V2ZW50SGFuZGxlcixcbiAgUmVhY3ROb2RlLFxufSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IHVzZUNhbGxiYWNrLCB1c2VFZmZlY3QsIHVzZU1lbW8sIHVzZVJlZiwgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IFN0YWNrIH0gZnJvbSAnLi4vU3RhY2snXG5pbXBvcnQgeyBUb29sdGlwIH0gZnJvbSAnLi4vVG9vbHRpcCdcbmltcG9ydCB7IEZPQ1VTX09WRVJMQVlfU0NBTEVfUkFUSU8gfSBmcm9tICcuL2NvbnN0YW50J1xuaW1wb3J0IHsgRm9jdXNPdmVybGF5IH0gZnJvbSAnLi9Gb2N1c092ZXJsYXknXG5pbXBvcnQgeyBPcHRpb24gfSBmcm9tICcuL09wdGlvbidcbmltcG9ydCB0eXBlIHsgUmVmT3B0aW9uVHlwZSB9IGZyb20gJy4vU3dpdGNoQnV0dG9uQ29udGV4dCdcbmltcG9ydCB7IFN3aXRjaEJ1dHRvbkNvbnRleHQgfSBmcm9tICcuL1N3aXRjaEJ1dHRvbkNvbnRleHQnXG5cbmNvbnN0IFNJWkVTID0ge1xuICBtZWRpdW06ICc2MDAnLFxuICBzbWFsbDogJzUwMCcsIC8vIHNpemluZyB0b2tlbiBmcm9tIHRoZW1lXG59IGFzIGNvbnN0XG5cbmNvbnN0IFN0eWxlZEJvcmRlcmVkQm94ID0gc3R5bGVkLmRpdjx7ICdkYXRhLXNpemUnOiAnc21hbGwnIHwgJ21lZGl1bScgfT5gXG4gIGJvcmRlcjogMXB4IHNvbGlkICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzLm5ldXRyYWwuYm9yZGVyfTtcbiAgYm9yZGVyLXJhZGl1czogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5yYWRpaS5kZWZhdWx0fTtcbiAgcGFkZGluZzogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5zcGFjZVsnMC41J119O1xuICBkaXNwbGF5OiBmbGV4O1xuICBnYXA6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbJzEnXX07XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcblxuICAmW2RhdGEtc2l6ZT0nc21hbGwnXSB7XG4gICAgICBoZWlnaHQ6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc2l6aW5nW1NJWkVTLnNtYWxsXX07XG4gIH1cblxuICAmW2RhdGEtc2l6ZT0nbWVkaXVtJ10ge1xuICAgICAgaGVpZ2h0OiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNpemluZ1tTSVpFUy5tZWRpdW1dfTtcbiAgfVxuYFxudHlwZSBTd2l0Y2hCdXR0b25Qcm9wcyA9IHtcbiAgbmFtZT86IHN0cmluZ1xuICBjaGlsZHJlbjogUmVhY3ROb2RlXG4gIG9uQmx1cj86IEZvY3VzRXZlbnRIYW5kbGVyPEhUTUxJbnB1dEVsZW1lbnQ+XG4gIG9uQ2hhbmdlOiBDaGFuZ2VFdmVudEhhbmRsZXI8SFRNTElucHV0RWxlbWVudD5cbiAgb25Gb2N1cz86IEZvY3VzRXZlbnRIYW5kbGVyPEhUTUxJbnB1dEVsZW1lbnQ+XG4gIHRvb2x0aXA/OiBzdHJpbmdcbiAgdmFsdWU6IHN0cmluZ1xuICBjbGFzc05hbWU/OiBzdHJpbmdcbiAgJ2RhdGEtdGVzdGlkJz86IHN0cmluZ1xuICBzaXplPzogJ3NtYWxsJyB8ICdtZWRpdW0nXG4gIHNlbnRpbWVudD86ICdwcmltYXJ5JyB8ICduZXV0cmFsJ1xufVxuXG4vKipcbiAqIFN3aXRjaEJ1dHRvbiBpcyBhIGNvbXBvbmVudCB0aGF0IGFsbG93cyB0aGUgdXNlciB0byBzZWxlY3QgYmV0d2VlbiB0d28gb3B0aW9ucy5cbiAqL1xuZXhwb3J0IGNvbnN0IFN3aXRjaEJ1dHRvbiA9ICh7XG4gIHZhbHVlLFxuICBvbkNoYW5nZSxcbiAgb25Gb2N1cyxcbiAgb25CbHVyLFxuICBuYW1lLFxuICBzaXplID0gJ3NtYWxsJyxcbiAgc2VudGltZW50ID0gJ3ByaW1hcnknLFxuICB0b29sdGlwLFxuICBjbGFzc05hbWUsXG4gIGNoaWxkcmVuLFxuICAnZGF0YS10ZXN0aWQnOiBkYXRhVGVzdElkLFxufTogU3dpdGNoQnV0dG9uUHJvcHMpID0+IHtcbiAgY29uc3QgY29udGFpbmVyUmVmID0gdXNlUmVmPEhUTUxEaXZFbGVtZW50PihudWxsKVxuXG4gIGNvbnN0IFtsb2NhbFZhbHVlLCBzZXRMb2NhbFZhbHVlXSA9IHVzZVN0YXRlPHN0cmluZz4odmFsdWUpXG4gIGNvbnN0IFtyZWZPcHRpb25zLCBzZXRSZWZPcHRpb25zXSA9IHVzZVN0YXRlPFJlZk9wdGlvblR5cGVbXT4oW10pXG4gIGNvbnN0IFtwb3NpdGlvbiwgc2V0UG9zaXRpb25dID0gdXNlU3RhdGUoMClcbiAgY29uc3QgW3dpZHRoLCBzZXRXaWR0aF0gPSB1c2VTdGF0ZSgwKVxuICBjb25zdCBbbW91c2VEb3duU2lkZSwgc2V0TW91c2VEb3duU2lkZV0gPSB1c2VTdGF0ZTwnbGVmdCcgfCAncmlnaHQnIHwgbnVsbD4oXG4gICAgbnVsbCxcbiAgKVxuXG4gIGNvbnN0IGdldEVsZW1lbnQgPSB1c2VDYWxsYmFjayhcbiAgICAocmVmZXJlbmNlVmFsdWU6IHN0cmluZykgPT5cbiAgICAgIHJlZk9wdGlvbnMuZmluZChcbiAgICAgICAgZWxlbWVudCA9PiBlbGVtZW50LmN1cnJlbnQgJiYgZWxlbWVudC52YWx1ZSA9PT0gcmVmZXJlbmNlVmFsdWUsXG4gICAgICApPy5jdXJyZW50LFxuICAgIFtyZWZPcHRpb25zXSxcbiAgKVxuXG4gIGNvbnN0IGdldFBvc2l0aW9uID0gKGN1cmVudEVsZW1lbnQ/OiBIVE1MSW5wdXRFbGVtZW50KSA9PiB7XG4gICAgaWYgKCFjdXJlbnRFbGVtZW50KSB7XG4gICAgICByZXR1cm4gMFxuICAgIH1cbiAgICBjb25zdCBjdXJyZW50UG9zaXRpb24gPSBjdXJlbnRFbGVtZW50LmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpLmxlZnRcbiAgICBjb25zdCBjb250YWluZXJQb3NpdGlvbiA9XG4gICAgICBjb250YWluZXJSZWYuY3VycmVudD8uZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCkubGVmdCA/PyAwXG5cbiAgICByZXR1cm4gY3VycmVudFBvc2l0aW9uIC0gY29udGFpbmVyUG9zaXRpb25cbiAgfVxuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgc2V0TG9jYWxWYWx1ZSh2YWx1ZSlcbiAgICBzZXRXaWR0aChnZXRFbGVtZW50KHZhbHVlKT8ub2Zmc2V0V2lkdGggPz8gMClcbiAgICBzZXRQb3NpdGlvbihnZXRQb3NpdGlvbihnZXRFbGVtZW50KHZhbHVlKSkpXG4gIH0sIFtyZWZPcHRpb25zLCB2YWx1ZSwgZ2V0RWxlbWVudF0pXG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBjb25zdCBlbGVtZW50ID0gZ2V0RWxlbWVudChsb2NhbFZhbHVlKVxuICAgIGlmICghZWxlbWVudCkge1xuICAgICAgcmV0dXJuIHVuZGVmaW5lZFxuICAgIH1cblxuICAgIGNvbnN0IHJlc2l6ZU9ic2VydmVyID0gbmV3IFJlc2l6ZU9ic2VydmVyKCgpID0+IHtcbiAgICAgIGlmIChcbiAgICAgICAgZWxlbWVudC5vZmZzZXRXaWR0aCAmJlxuICAgICAgICAoIVtcbiAgICAgICAgICB3aWR0aCxcbiAgICAgICAgICB3aWR0aCArIEZPQ1VTX09WRVJMQVlfU0NBTEVfUkFUSU8sXG4gICAgICAgICAgd2lkdGggLSBGT0NVU19PVkVSTEFZX1NDQUxFX1JBVElPLFxuICAgICAgICBdLmluY2x1ZGVzKGVsZW1lbnQub2Zmc2V0V2lkdGgpIHx8XG4gICAgICAgICAgZ2V0UG9zaXRpb24oZWxlbWVudCkgIT09IHBvc2l0aW9uKVxuICAgICAgKSB7XG4gICAgICAgIHNldFdpZHRoKGVsZW1lbnQub2Zmc2V0V2lkdGggPz8gMClcbiAgICAgICAgc2V0UG9zaXRpb24oZ2V0UG9zaXRpb24oZWxlbWVudCkpXG4gICAgICB9XG4gICAgfSlcblxuICAgIHJlc2l6ZU9ic2VydmVyLm9ic2VydmUoZWxlbWVudClcblxuICAgIHJldHVybiAoKSA9PiB7XG4gICAgICByZXNpemVPYnNlcnZlci5kaXNjb25uZWN0KClcbiAgICB9XG4gIH0sIFtnZXRFbGVtZW50LCB3aWR0aCwgcG9zaXRpb24sIGxvY2FsVmFsdWUsIGNoaWxkcmVuXSlcblxuICBjb25zdCBoYW5kbGVPbkNoYW5nZSA9IHVzZUNhbGxiYWNrKFxuICAgIChldmVudDogQ2hhbmdlRXZlbnQ8SFRNTElucHV0RWxlbWVudD4pID0+IHtcbiAgICAgIG9uQ2hhbmdlPy4oZXZlbnQpXG4gICAgICBzZXRMb2NhbFZhbHVlKGV2ZW50LnRhcmdldC52YWx1ZSlcblxuICAgICAgY29uc3QgY3VycmVudEVsZW1lbnQgPSBnZXRFbGVtZW50KGV2ZW50LnRhcmdldC52YWx1ZSlcblxuICAgICAgaWYgKGN1cnJlbnRFbGVtZW50ICYmIGNvbnRhaW5lclJlZi5jdXJyZW50KSB7XG4gICAgICAgIGNvbnN0IGN1cnJlbnRXaWR0aCA9IGN1cnJlbnRFbGVtZW50Lm9mZnNldFdpZHRoID8/IDBcbiAgICAgICAgc2V0V2lkdGgoY3VycmVudFdpZHRoKVxuICAgICAgICBzZXRQb3NpdGlvbihnZXRQb3NpdGlvbihjdXJyZW50RWxlbWVudCkpXG4gICAgICB9XG4gICAgfSxcbiAgICBbZ2V0RWxlbWVudCwgb25DaGFuZ2VdLFxuICApXG5cbiAgY29uc3QgdmFsdWVDb250ZXh0ID0gdXNlTWVtbyhcbiAgICAoKSA9PiAoe1xuICAgICAgaGFuZGxlT25DaGFuZ2UsXG4gICAgICBsb2NhbFZhbHVlLFxuICAgICAgbmFtZSxcbiAgICAgIG9uQmx1cixcbiAgICAgIG9uRm9jdXMsXG4gICAgICByZWZPcHRpb25zLFxuICAgICAgc2VudGltZW50LFxuICAgICAgc2V0UmVmT3B0aW9ucyxcbiAgICAgIHNpemUsXG4gICAgfSksXG4gICAgW1xuICAgICAgaGFuZGxlT25DaGFuZ2UsXG4gICAgICBsb2NhbFZhbHVlLFxuICAgICAgbmFtZSxcbiAgICAgIG9uQmx1cixcbiAgICAgIG9uRm9jdXMsXG4gICAgICByZWZPcHRpb25zLFxuICAgICAgc2l6ZSxcbiAgICAgIHNlbnRpbWVudCxcbiAgICBdLFxuICApXG5cbiAgcmV0dXJuIChcbiAgICA8U3dpdGNoQnV0dG9uQ29udGV4dC5Qcm92aWRlciB2YWx1ZT17dmFsdWVDb250ZXh0fT5cbiAgICAgIDxUb29sdGlwIHRleHQ9e3Rvb2x0aXB9PlxuICAgICAgICA8U3RhY2sgY2xhc3NOYW1lPXtjbGFzc05hbWV9IGRhdGEtdGVzdGlkPXtkYXRhVGVzdElkfSBkaXJlY3Rpb249XCJyb3dcIj5cbiAgICAgICAgICA8U3R5bGVkQm9yZGVyZWRCb3hcbiAgICAgICAgICAgIGRhdGEtc2l6ZT17c2l6ZX1cbiAgICAgICAgICAgIG9uTW91c2VEb3duPXtldmVudCA9PiB7XG4gICAgICAgICAgICAgIGNvbnN0IHJlY3QgPSBldmVudC5jdXJyZW50VGFyZ2V0LmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpXG4gICAgICAgICAgICAgIGNvbnN0IGNsaWNrWCA9IGV2ZW50LmNsaWVudFggLSByZWN0LmxlZnRcbiAgICAgICAgICAgICAgY29uc3QgY2xpY2tJbkN1cnJlbnRFbGVtZW50ID1cbiAgICAgICAgICAgICAgICBjbGlja1ggPiBwb3NpdGlvbiAmJiBjbGlja1ggPCBwb3NpdGlvbiArIHdpZHRoXG4gICAgICAgICAgICAgIGlmICghY2xpY2tJbkN1cnJlbnRFbGVtZW50KSB7XG4gICAgICAgICAgICAgICAgc2V0TW91c2VEb3duU2lkZShcbiAgICAgICAgICAgICAgICAgIGNsaWNrWCA8IGdldFBvc2l0aW9uKGdldEVsZW1lbnQobG9jYWxWYWx1ZSkpXG4gICAgICAgICAgICAgICAgICAgID8gJ2xlZnQnXG4gICAgICAgICAgICAgICAgICAgIDogJ3JpZ2h0JyxcbiAgICAgICAgICAgICAgICApXG4gICAgICAgICAgICAgICAgc2V0V2lkdGgod2lkdGggKyBGT0NVU19PVkVSTEFZX1NDQUxFX1JBVElPKVxuICAgICAgICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgICAgIHNldE1vdXNlRG93blNpZGUobnVsbClcbiAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgfX1cbiAgICAgICAgICAgIG9uTW91c2VMZWF2ZT17KCkgPT4ge1xuICAgICAgICAgICAgICBzZXRNb3VzZURvd25TaWRlKG51bGwpXG4gICAgICAgICAgICAgIGlmIChtb3VzZURvd25TaWRlKSB7XG4gICAgICAgICAgICAgICAgc2V0V2lkdGgod2lkdGggLSBGT0NVU19PVkVSTEFZX1NDQUxFX1JBVElPKVxuICAgICAgICAgICAgICB9XG4gICAgICAgICAgICB9fVxuICAgICAgICAgICAgb25Nb3VzZVVwPXsoKSA9PiB7XG4gICAgICAgICAgICAgIHNldE1vdXNlRG93blNpZGUobnVsbClcbiAgICAgICAgICAgICAgaWYgKG1vdXNlRG93blNpZGUpIHtcbiAgICAgICAgICAgICAgICBzZXRXaWR0aCh3aWR0aCAtIEZPQ1VTX09WRVJMQVlfU0NBTEVfUkFUSU8pXG4gICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIH19XG4gICAgICAgICAgICByZWY9e2NvbnRhaW5lclJlZn1cbiAgICAgICAgICA+XG4gICAgICAgICAgICB7d2lkdGggPyAoXG4gICAgICAgICAgICAgIDxGb2N1c092ZXJsYXlcbiAgICAgICAgICAgICAgICBjYXJkV2lkdGg9e3dpZHRofVxuICAgICAgICAgICAgICAgIG1vdXNlRG93blNpZGU9e21vdXNlRG93blNpZGV9XG4gICAgICAgICAgICAgICAgcG9zaXRpb249e3Bvc2l0aW9ufVxuICAgICAgICAgICAgICAgIHNlbnRpbWVudD17c2VudGltZW50fVxuICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgKSA6IG51bGx9XG4gICAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgICAgPC9TdHlsZWRCb3JkZXJlZEJveD5cbiAgICAgICAgPC9TdGFjaz5cbiAgICAgIDwvVG9vbHRpcD5cbiAgICA8L1N3aXRjaEJ1dHRvbkNvbnRleHQuUHJvdmlkZXI+XG4gIClcbn1cblxuU3dpdGNoQnV0dG9uLk9wdGlvbiA9IE9wdGlvblxuIl19 */"));
+import { switchButtonContainer } from "./styles.css.js";
 const SwitchButton = ({
   value,
   onChange,
@@ -42,15 +19,23 @@ const SwitchButton = ({
   tooltip,
   className,
   children,
-  "data-testid": dataTestId
+  "data-testid": dataTestId,
+  style
 }) => {
   const containerRef = useRef(null);
   const [localValue, setLocalValue] = useState(value);
   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;
@@ -70,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));
       }
@@ -80,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(StyledBorderedBox, { "data-size": 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, children: [
-    width ? /* @__PURE__ */ jsx(FocusOverlay, { cardWidth: width, mouseDownSide, position, sentiment }) : null,
-    children
-  ] }) }) }) });
+  ) }) }) });
 };
 SwitchButton.Option = Option;
 export {

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

@@ -0,0 +1,7 @@
+export declare const switchButtonContainer: Record<"medium" | "small", string>;
+export declare const switchButtonOptionBase: string;
+/**
+ * Create style variant so it is easier to deal with the global styles
+ */
+export declare const switchButtonOption: Record<"primary" | "neutral", string>;
+export declare const focusOverlay: Record<"primary" | "neutral", string>;

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

@@ -0,0 +1,9 @@
+/* empty css                          */
+var switchButtonContainer = { small: "uv_m5izgx1 uv_m5izgx0", medium: "uv_m5izgx2 uv_m5izgx0" };
+var switchButtonOption = { primary: "uv_m5izgx4 uv_m5izgx3", neutral: "uv_m5izgx5 uv_m5izgx3" };
+var focusOverlay = { primary: "uv_m5izgx7 uv_m5izgx6", neutral: "uv_m5izgx8 uv_m5izgx6" };
+export {
+  focusOverlay,
+  switchButtonContainer,
+  switchButtonOption
+};

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 import type { Color } from '../../theme';
 type Align = 'left' | 'center' | 'right';
 type CellProps = {
@@ -8,6 +8,7 @@ type CellProps = {
     rowSpan?: number;
     sentiment?: Color;
     align?: Align;
+    style?: CSSProperties;
 };
-export declare const Cell: ({ children, className, colSpan, rowSpan, sentiment, align, }: 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,31 +1,38 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
-import _styled from "@emotion/styled/base";
-const StyledCell = /* @__PURE__ */ _styled("td", process.env.NODE_ENV === "production" ? {
-  shouldForwardProp: (prop) => !["sentiment", "align"].includes(prop),
-  target: "e78o8ww0"
-} : {
-  shouldForwardProp: (prop) => !["sentiment", "align"].includes(prop),
-  target: "e78o8ww0",
-  label: "StyledCell"
-})("display:table-cell;vertical-align:middle;padding:", ({
-  theme
-}) => theme.space["1"], ";font-size:", ({
-  theme
-}) => theme.typography.bodySmall.fontSize, ";background-color:", ({
-  sentiment,
-  theme
-}) => sentiment ? theme.colors[sentiment].background : null, ";text-align:", ({
-  align
-}) => align, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1RhYmxlL0NlbGwudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVV1QyIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay91bHRyYXZpb2xldC91bHRyYXZpb2xldC9wYWNrYWdlcy91aS9zcmMvY29tcG9uZW50cy9UYWJsZS9DZWxsLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIid1c2UgY2xpZW50J1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB0eXBlIHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgdHlwZSB7IENvbG9yIH0gZnJvbSAnLi4vLi4vdGhlbWUnXG5cbnR5cGUgQWxpZ24gPSAnbGVmdCcgfCAnY2VudGVyJyB8ICdyaWdodCdcblxuY29uc3QgU3R5bGVkQ2VsbCA9IHN0eWxlZCgndGQnLCB7XG4gIHNob3VsZEZvcndhcmRQcm9wOiBwcm9wID0+ICFbJ3NlbnRpbWVudCcsICdhbGlnbiddLmluY2x1ZGVzKHByb3ApLFxufSk8eyBzZW50aW1lbnQ/OiBDb2xvcjsgYWxpZ246IEFsaWduIH0+YFxuICBkaXNwbGF5OiB0YWJsZS1jZWxsO1xuICB2ZXJ0aWNhbC1hbGlnbjogbWlkZGxlO1xuICBwYWRkaW5nOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNwYWNlWycxJ119O1xuICBmb250LXNpemU6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUudHlwb2dyYXBoeS5ib2R5U21hbGwuZm9udFNpemV9O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAkeyh7IHNlbnRpbWVudCwgdGhlbWUgfSkgPT4gKHNlbnRpbWVudCA/IHRoZW1lLmNvbG9yc1tzZW50aW1lbnRdLmJhY2tncm91bmQgOiBudWxsKX07XG4gIHRleHQtYWxpZ246ICR7KHsgYWxpZ24gfSkgPT4gYWxpZ259O1xuYFxuXG50eXBlIENlbGxQcm9wcyA9IHtcbiAgY2hpbGRyZW4/OiBSZWFjdE5vZGVcbiAgY2xhc3NOYW1lPzogc3RyaW5nXG4gIGNvbFNwYW4/OiBudW1iZXJcbiAgcm93U3Bhbj86IG51bWJlclxuICBzZW50aW1lbnQ/OiBDb2xvclxuICBhbGlnbj86IEFsaWduXG59XG5cbmV4cG9ydCBjb25zdCBDZWxsID0gKHtcbiAgY2hpbGRyZW4sXG4gIGNsYXNzTmFtZSxcbiAgY29sU3BhbixcbiAgcm93U3BhbixcbiAgc2VudGltZW50LFxuICBhbGlnbiA9ICdsZWZ0Jyxcbn06IENlbGxQcm9wcykgPT4gKFxuICA8U3R5bGVkQ2VsbFxuICAgIGFsaWduPXthbGlnbn1cbiAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICBjb2xTcGFuPXtjb2xTcGFufVxuICAgIHJvd1NwYW49e3Jvd1NwYW59XG4gICAgc2VudGltZW50PXtzZW50aW1lbnR9XG4gID5cbiAgICB7Y2hpbGRyZW59XG4gIDwvU3R5bGVkQ2VsbD5cbilcbiJdfQ== */"));
+import { jsx } from "react/jsx-runtime";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { useColumnProvider } from "../List/ColumnProvider.js";
+import { tableCell } from "./styles.css.js";
+import { maxWidthCell, minWidthCell, widthCell } from "./variables.css.js";
 const Cell = ({
   children,
   className,
   colSpan,
   rowSpan,
   sentiment,
-  align = "left"
-}) => /* @__PURE__ */ jsx(StyledCell, { align, className, colSpan, rowSpan, sentiment, children });
+  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
+    }
+  );
+};
 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,17 +1,7 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
-import _styled from "@emotion/styled/base";
-const StyledHeader = /* @__PURE__ */ _styled("thead", process.env.NODE_ENV === "production" ? {
-  target: "ekxedod0"
-} : {
-  target: "ekxedod0",
-  label: "StyledHeader"
-})("border-bottom:1px solid ", ({
-  theme
-}) => theme.colors.neutral.border, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1RhYmxlL0hlYWRlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS29DIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1RhYmxlL0hlYWRlci50c3giLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIGNsaWVudCdcblxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgdHlwZSB7IFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0J1xuXG5jb25zdCBTdHlsZWRIZWFkZXIgPSBzdHlsZWQoJ3RoZWFkJylgXG4gIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5uZXV0cmFsLmJvcmRlcn07XG5gXG5cbnR5cGUgSGVhZGVyUHJvcHMgPSB7XG4gIGNoaWxkcmVuOiBSZWFjdE5vZGVcbn1cblxuZXhwb3J0IGNvbnN0IEhlYWRlciA9ICh7IGNoaWxkcmVuIH06IEhlYWRlclByb3BzKSA9PiAoXG4gIDxTdHlsZWRIZWFkZXI+e2NoaWxkcmVufTwvU3R5bGVkSGVhZGVyPlxuKVxuIl19 */"));
-const Header = ({
-  children
-}) => /* @__PURE__ */ jsx(StyledHeader, { children });
+import { jsx } from "react/jsx-runtime";
+import { tableHeader } from "./styles.css.js";
+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,52 +1,13 @@
 "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 { listSortIcon } from "../List/styles.css.js";
 import { Text } from "../Text/index.js";
 import { Tooltip } from "../Tooltip/index.js";
-const StyledSortIcon = /* @__PURE__ */ _styled(SouthShortIcon, process.env.NODE_ENV === "production" ? {
-  shouldForwardProp: (prop) => !["order"].includes(prop),
-  target: "ev6jkq82"
-} : {
-  shouldForwardProp: (prop) => !["order"].includes(prop),
-  target: "ev6jkq82",
-  label: "StyledSortIcon"
-})("transform:", ({
-  order
-}) => order === "ascending" ? "rotate(-180deg)" : "none", ";transition:transform 0.2s;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1RhYmxlL0hlYWRlckNlbGwudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWN5QyIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay91bHRyYXZpb2xldC91bHRyYXZpb2xldC9wYWNrYWdlcy91aS9zcmMvY29tcG9uZW50cy9UYWJsZS9IZWFkZXJDZWxsLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIid1c2UgY2xpZW50J1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7XG4gIEluZm9ybWF0aW9uT3V0bGluZUljb24sXG4gIFNvcnRJY29uIGFzIFNvcnRJY29uVVYsXG4gIFNvdXRoU2hvcnRJY29uLFxufSBmcm9tICdAdWx0cmF2aW9sZXQvaWNvbnMnXG5pbXBvcnQgdHlwZSB7IFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgVGV4dCB9IGZyb20gJy4uL1RleHQnXG5pbXBvcnQgeyBUb29sdGlwIH0gZnJvbSAnLi4vVG9vbHRpcCdcblxuY29uc3QgU3R5bGVkU29ydEljb24gPSBzdHlsZWQoU291dGhTaG9ydEljb24sIHtcbiAgc2hvdWxkRm9yd2FyZFByb3A6IHByb3AgPT4gIVsnb3JkZXInXS5pbmNsdWRlcyhwcm9wKSxcbn0pPHsgb3JkZXI6ICdhc2NlbmRpbmcnIHwgJ2Rlc2NlbmRpbmcnIH0+YFxuICAgIHRyYW5zZm9ybTogJHsoeyBvcmRlciB9KSA9PlxuICAgICAgb3JkZXIgPT09ICdhc2NlbmRpbmcnID8gJ3JvdGF0ZSgtMTgwZGVnKScgOiAnbm9uZSd9O1xuICAgIHRyYW5zaXRpb246IHRyYW5zZm9ybSAwLjJzO1xuYFxuXG5jb25zdCBTb3J0SWNvbiA9ICh7IG9yZGVyIH06IHsgb3JkZXI/OiAnYXNjZW5kaW5nJyB8ICdkZXNjZW5kaW5nJyB9KSA9PlxuICBvcmRlciA/IChcbiAgICA8U3R5bGVkU29ydEljb24gb3JkZXI9e29yZGVyfSBzZW50aW1lbnQ9XCJwcmltYXJ5XCIgLz5cbiAgKSA6IChcbiAgICA8U29ydEljb25VViBzZW50aW1lbnQ9XCJuZXV0cmFsXCIgLz5cbiAgKVxuXG50eXBlIFN0eWxlZEhlYWRlckNlbGxQcm9wcyA9IFBpY2s8XG4gIEhlYWRlckNlbGxQcm9wcyxcbiAgJ3dpZHRoJyB8ICdtYXhXaWR0aCcgfCAnbWluV2lkdGgnXG4+ICYge1xuICBhbGlnbj86ICdsZWZ0JyB8ICdjZW50ZXInIHwgJ3JpZ2h0J1xufVxuXG5jb25zdCBTdHlsZWRIZWFkZXJDZWxsID0gc3R5bGVkKCd0aCcsIHtcbiAgc2hvdWxkRm9yd2FyZFByb3A6IHByb3AgPT5cbiAgICAhWydhbGlnbicsICd3aWR0aCcsICdtYXhXaWR0aCcsICdtaW5XaWR0aCddLmluY2x1ZGVzKHByb3ApLFxufSk8U3R5bGVkSGVhZGVyQ2VsbFByb3BzPmBcbiR7KHsgd2lkdGgsIG1heFdpZHRoLCBtaW5XaWR0aCB9KSA9PiBgXG4gICAgJHt3aWR0aCA/IGB3aWR0aDogJHt3aWR0aH07YCA6ICcnfVxuICAgICR7bWF4V2lkdGggPyBgbWF4LXdpZHRoOiAke21heFdpZHRofTtgIDogJyd9XG4gICAgJHttaW5XaWR0aCA/IGBtaW4td2lkdGg6ICR7bWluV2lkdGh9O2AgOiAnJ31cbiAgYH1cbiAgZGlzcGxheTogdGFibGUtY2VsbDtcbiAgdmVydGljYWwtYWxpZ246IG1pZGRsZTtcbiAgdGV4dC1hbGlnbjogJHsoeyBhbGlnbiB9KSA9PiBhbGlnbn07XG4gIHBhZGRpbmc6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbJzEnXX07XG5cbiAgJltyb2xlKj0nYnV0dG9uJ10ge1xuICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICB1c2VyLXNlbGVjdDogbm9uZTtcbiAgfVxuXG4gICY6Zmlyc3Qtb2YtdHlwZSB7XG4gICAgJltkYXRhLWNoZWNrYm94PVwidHJ1ZVwiXSB7XG4gICAgICBwYWRkaW5nLWxlZnQ6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbJzInXX07XG4gICAgfSBcbiAgfVxuYFxuXG5jb25zdCBTdHlsZWRUZXh0ID0gc3R5bGVkKFRleHQpYFxuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogcm93O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBnYXA6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbJzEnXX07XG5gXG5cbnR5cGUgSGVhZGVyQ2VsbFByb3BzID0ge1xuICBjaGlsZHJlbjogUmVhY3ROb2RlXG4gIGNsYXNzTmFtZT86IHN0cmluZ1xuICBpc09yZGVyZWQ/OiBib29sZWFuXG4gIG9yZGVyRGlyZWN0aW9uPzogJ2FzYycgfCAnZGVzYycgfCAnbm9uZSdcbiAgb25PcmRlcj86IChuZXdPcmRlcjogJ2FzYycgfCAnZGVzYycpID0+IHZvaWRcbiAgaW5mbz86IHN0cmluZ1xuICBhbGlnbj86ICdsZWZ0JyB8ICdjZW50ZXInIHwgJ3JpZ2h0J1xuICB3aWR0aD86IHN0cmluZ1xuICBtYXhXaWR0aD86IHN0cmluZ1xuICBtaW5XaWR0aD86IHN0cmluZ1xuICBpc0NoZWNrYm94PzogYm9vbGVhblxufVxuXG5leHBvcnQgY29uc3QgSGVhZGVyQ2VsbCA9ICh7XG4gIGNoaWxkcmVuLFxuICBjbGFzc05hbWUsXG4gIGlzT3JkZXJlZCxcbiAgb25PcmRlcixcbiAgb3JkZXJEaXJlY3Rpb24sXG4gIGluZm8sXG4gIGFsaWduLFxuICB3aWR0aCxcbiAgbWF4V2lkdGgsXG4gIG1pbldpZHRoLFxuICBpc0NoZWNrYm94LFxufTogSGVhZGVyQ2VsbFByb3BzKSA9PiB7XG4gIGxldCBvcmRlcjogdW5kZWZpbmVkIHwgJ2FzY2VuZGluZycgfCAnZGVzY2VuZGluZydcbiAgaWYgKGlzT3JkZXJlZCAmJiBvcmRlckRpcmVjdGlvbiA9PT0gJ2FzYycpIHtcbiAgICBvcmRlciA9ICdhc2NlbmRpbmcnXG4gIH0gZWxzZSBpZiAoaXNPcmRlcmVkICYmIG9yZGVyRGlyZWN0aW9uID09PSAnZGVzYycpIHtcbiAgICBvcmRlciA9ICdkZXNjZW5kaW5nJ1xuICB9XG5cbiAgY29uc3QgaGFuZGxlT3JkZXIgPSBvbk9yZGVyXG4gICAgPyAoKSA9PiBvbk9yZGVyKG9yZGVyID09PSAnYXNjZW5kaW5nJyA/ICdkZXNjJyA6ICdhc2MnKVxuICAgIDogdW5kZWZpbmVkXG5cbiAgcmV0dXJuIChcbiAgICA8U3R5bGVkSGVhZGVyQ2VsbFxuICAgICAgYWxpZ249e2FsaWdufVxuICAgICAgYXJpYS1zb3J0PXtvcmRlcn1cbiAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lfVxuICAgICAgZGF0YS1jaGVja2JveD17aXNDaGVja2JveH1cbiAgICAgIG1heFdpZHRoPXttYXhXaWR0aH1cbiAgICAgIG1pbldpZHRoPXttaW5XaWR0aH1cbiAgICAgIG9uQ2xpY2s9e2hhbmRsZU9yZGVyfVxuICAgICAgb25LZXlEb3duPXtcbiAgICAgICAgaGFuZGxlT3JkZXJcbiAgICAgICAgICA/IGV2ZW50ID0+IHtcbiAgICAgICAgICAgICAgaWYgKGV2ZW50LmtleSA9PT0gJyAnIHx8IGV2ZW50LmtleSA9PT0gJ0VudGVyJykge1xuICAgICAgICAgICAgICAgIGhhbmRsZU9yZGVyKClcbiAgICAgICAgICAgICAgICBpZiAoZXZlbnQua2V5ID09PSAnICcpIHtcbiAgICAgICAgICAgICAgICAgIC8vIEBub3RlOiBpdCBhdm9pZCBzY3JvbGwgd2hlbiBwcmVzc2luZyBTcGFjZVxuICAgICAgICAgICAgICAgICAgZXZlbnQucHJldmVudERlZmF1bHQoKVxuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgfVxuICAgICAgICAgIDogdW5kZWZpbmVkXG4gICAgICB9XG4gICAgICByb2xlPXtvbk9yZGVyID8gJ2J1dHRvbiBjb2x1bW5oZWFkZXInIDogdW5kZWZpbmVkfVxuICAgICAgdGFiSW5kZXg9e2hhbmRsZU9yZGVyID8gMCA6IC0xfVxuICAgICAgd2lkdGg9e3dpZHRofVxuICAgID5cbiAgICAgIDxTdHlsZWRUZXh0XG4gICAgICAgIGFzPVwiZGl2XCJcbiAgICAgICAgc2VudGltZW50PXtvcmRlciAhPT0gdW5kZWZpbmVkID8gJ3ByaW1hcnknIDogJ25ldXRyYWwnfVxuICAgICAgICB2YXJpYW50PVwiYm9keVNtYWxsXCJcbiAgICAgID5cbiAgICAgICAge2NoaWxkcmVufVxuICAgICAgICB7aW5mbyA/IChcbiAgICAgICAgICA8VG9vbHRpcCB0ZXh0PXtpbmZvfT5cbiAgICAgICAgICAgIDxJbmZvcm1hdGlvbk91dGxpbmVJY29uXG4gICAgICAgICAgICAgIHByb21pbmVuY2U9XCJ3ZWFrXCJcbiAgICAgICAgICAgICAgc2VudGltZW50PVwibmV1dHJhbFwiXG4gICAgICAgICAgICAgIHNpemU9XCJzbWFsbFwiXG4gICAgICAgICAgICAvPlxuICAgICAgICAgIDwvVG9vbHRpcD5cbiAgICAgICAgKSA6IG51bGx9XG4gICAgICAgIHtvcmRlckRpcmVjdGlvbiAhPT0gdW5kZWZpbmVkICYmIGlzT3JkZXJlZCAhPT0gdW5kZWZpbmVkID8gKFxuICAgICAgICAgIDxTb3J0SWNvbiBhcmlhLWRpc2FibGVkPXshb25PcmRlcn0gb3JkZXI9e29yZGVyfSAvPlxuICAgICAgICApIDogbnVsbH1cbiAgICAgIDwvU3R5bGVkVGV4dD5cbiAgICA8L1N0eWxlZEhlYWRlckNlbGw+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) => !["align", "width", "maxWidth", "minWidth"].includes(prop),
-  target: "ev6jkq81"
-} : {
-  shouldForwardProp: (prop) => !["align", "width", "maxWidth", "minWidth"].includes(prop),
-  target: "ev6jkq81",
-  label: "StyledHeaderCell"
-})(({
-  width,
-  maxWidth,
-  minWidth
-}) => `
-    ${width ? `width: ${width};` : ""}
-    ${maxWidth ? `max-width: ${maxWidth};` : ""}
-    ${minWidth ? `min-width: ${minWidth};` : ""}
-  `, " display:table-cell;vertical-align:middle;text-align:", ({
-  align
-}) => align, ";padding:", ({
-  theme
-}) => theme.space["1"], `;&[role*='button']{cursor:pointer;user-select:none;}&:first-of-type{&[data-checkbox="true"]{padding-left:`, ({
-  theme
-}) => theme.space["2"], ";}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1RhYmxlL0hlYWRlckNlbGwudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFDeUIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvdWx0cmF2aW9sZXQvdWx0cmF2aW9sZXQvcGFja2FnZXMvdWkvc3JjL2NvbXBvbmVudHMvVGFibGUvSGVhZGVyQ2VsbC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIGNsaWVudCdcblxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQge1xuICBJbmZvcm1hdGlvbk91dGxpbmVJY29uLFxuICBTb3J0SWNvbiBhcyBTb3J0SWNvblVWLFxuICBTb3V0aFNob3J0SWNvbixcbn0gZnJvbSAnQHVsdHJhdmlvbGV0L2ljb25zJ1xuaW1wb3J0IHR5cGUgeyBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IFRleHQgfSBmcm9tICcuLi9UZXh0J1xuaW1wb3J0IHsgVG9vbHRpcCB9IGZyb20gJy4uL1Rvb2x0aXAnXG5cbmNvbnN0IFN0eWxlZFNvcnRJY29uID0gc3R5bGVkKFNvdXRoU2hvcnRJY29uLCB7XG4gIHNob3VsZEZvcndhcmRQcm9wOiBwcm9wID0+ICFbJ29yZGVyJ10uaW5jbHVkZXMocHJvcCksXG59KTx7IG9yZGVyOiAnYXNjZW5kaW5nJyB8ICdkZXNjZW5kaW5nJyB9PmBcbiAgICB0cmFuc2Zvcm06ICR7KHsgb3JkZXIgfSkgPT5cbiAgICAgIG9yZGVyID09PSAnYXNjZW5kaW5nJyA/ICdyb3RhdGUoLTE4MGRlZyknIDogJ25vbmUnfTtcbiAgICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gMC4ycztcbmBcblxuY29uc3QgU29ydEljb24gPSAoeyBvcmRlciB9OiB7IG9yZGVyPzogJ2FzY2VuZGluZycgfCAnZGVzY2VuZGluZycgfSkgPT5cbiAgb3JkZXIgPyAoXG4gICAgPFN0eWxlZFNvcnRJY29uIG9yZGVyPXtvcmRlcn0gc2VudGltZW50PVwicHJpbWFyeVwiIC8+XG4gICkgOiAoXG4gICAgPFNvcnRJY29uVVYgc2VudGltZW50PVwibmV1dHJhbFwiIC8+XG4gIClcblxudHlwZSBTdHlsZWRIZWFkZXJDZWxsUHJvcHMgPSBQaWNrPFxuICBIZWFkZXJDZWxsUHJvcHMsXG4gICd3aWR0aCcgfCAnbWF4V2lkdGgnIHwgJ21pbldpZHRoJ1xuPiAmIHtcbiAgYWxpZ24/OiAnbGVmdCcgfCAnY2VudGVyJyB8ICdyaWdodCdcbn1cblxuY29uc3QgU3R5bGVkSGVhZGVyQ2VsbCA9IHN0eWxlZCgndGgnLCB7XG4gIHNob3VsZEZvcndhcmRQcm9wOiBwcm9wID0+XG4gICAgIVsnYWxpZ24nLCAnd2lkdGgnLCAnbWF4V2lkdGgnLCAnbWluV2lkdGgnXS5pbmNsdWRlcyhwcm9wKSxcbn0pPFN0eWxlZEhlYWRlckNlbGxQcm9wcz5gXG4keyh7IHdpZHRoLCBtYXhXaWR0aCwgbWluV2lkdGggfSkgPT4gYFxuICAgICR7d2lkdGggPyBgd2lkdGg6ICR7d2lkdGh9O2AgOiAnJ31cbiAgICAke21heFdpZHRoID8gYG1heC13aWR0aDogJHttYXhXaWR0aH07YCA6ICcnfVxuICAgICR7bWluV2lkdGggPyBgbWluLXdpZHRoOiAke21pbldpZHRofTtgIDogJyd9XG4gIGB9XG4gIGRpc3BsYXk6IHRhYmxlLWNlbGw7XG4gIHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7XG4gIHRleHQtYWxpZ246ICR7KHsgYWxpZ24gfSkgPT4gYWxpZ259O1xuICBwYWRkaW5nOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNwYWNlWycxJ119O1xuXG4gICZbcm9sZSo9J2J1dHRvbiddIHtcbiAgICBjdXJzb3I6IHBvaW50ZXI7XG4gICAgdXNlci1zZWxlY3Q6IG5vbmU7XG4gIH1cblxuICAmOmZpcnN0LW9mLXR5cGUge1xuICAgICZbZGF0YS1jaGVja2JveD1cInRydWVcIl0ge1xuICAgICAgcGFkZGluZy1sZWZ0OiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNwYWNlWycyJ119O1xuICAgIH0gXG4gIH1cbmBcblxuY29uc3QgU3R5bGVkVGV4dCA9IHN0eWxlZChUZXh0KWBcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IHJvdztcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgZ2FwOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNwYWNlWycxJ119O1xuYFxuXG50eXBlIEhlYWRlckNlbGxQcm9wcyA9IHtcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZVxuICBjbGFzc05hbWU/OiBzdHJpbmdcbiAgaXNPcmRlcmVkPzogYm9vbGVhblxuICBvcmRlckRpcmVjdGlvbj86ICdhc2MnIHwgJ2Rlc2MnIHwgJ25vbmUnXG4gIG9uT3JkZXI/OiAobmV3T3JkZXI6ICdhc2MnIHwgJ2Rlc2MnKSA9PiB2b2lkXG4gIGluZm8/OiBzdHJpbmdcbiAgYWxpZ24/OiAnbGVmdCcgfCAnY2VudGVyJyB8ICdyaWdodCdcbiAgd2lkdGg/OiBzdHJpbmdcbiAgbWF4V2lkdGg/OiBzdHJpbmdcbiAgbWluV2lkdGg/OiBzdHJpbmdcbiAgaXNDaGVja2JveD86IGJvb2xlYW5cbn1cblxuZXhwb3J0IGNvbnN0IEhlYWRlckNlbGwgPSAoe1xuICBjaGlsZHJlbixcbiAgY2xhc3NOYW1lLFxuICBpc09yZGVyZWQsXG4gIG9uT3JkZXIsXG4gIG9yZGVyRGlyZWN0aW9uLFxuICBpbmZvLFxuICBhbGlnbixcbiAgd2lkdGgsXG4gIG1heFdpZHRoLFxuICBtaW5XaWR0aCxcbiAgaXNDaGVja2JveCxcbn06IEhlYWRlckNlbGxQcm9wcykgPT4ge1xuICBsZXQgb3JkZXI6IHVuZGVmaW5lZCB8ICdhc2NlbmRpbmcnIHwgJ2Rlc2NlbmRpbmcnXG4gIGlmIChpc09yZGVyZWQgJiYgb3JkZXJEaXJlY3Rpb24gPT09ICdhc2MnKSB7XG4gICAgb3JkZXIgPSAnYXNjZW5kaW5nJ1xuICB9IGVsc2UgaWYgKGlzT3JkZXJlZCAmJiBvcmRlckRpcmVjdGlvbiA9PT0gJ2Rlc2MnKSB7XG4gICAgb3JkZXIgPSAnZGVzY2VuZGluZydcbiAgfVxuXG4gIGNvbnN0IGhhbmRsZU9yZGVyID0gb25PcmRlclxuICAgID8gKCkgPT4gb25PcmRlcihvcmRlciA9PT0gJ2FzY2VuZGluZycgPyAnZGVzYycgOiAnYXNjJylcbiAgICA6IHVuZGVmaW5lZFxuXG4gIHJldHVybiAoXG4gICAgPFN0eWxlZEhlYWRlckNlbGxcbiAgICAgIGFsaWduPXthbGlnbn1cbiAgICAgIGFyaWEtc29ydD17b3JkZXJ9XG4gICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICAgIGRhdGEtY2hlY2tib3g9e2lzQ2hlY2tib3h9XG4gICAgICBtYXhXaWR0aD17bWF4V2lkdGh9XG4gICAgICBtaW5XaWR0aD17bWluV2lkdGh9XG4gICAgICBvbkNsaWNrPXtoYW5kbGVPcmRlcn1cbiAgICAgIG9uS2V5RG93bj17XG4gICAgICAgIGhhbmRsZU9yZGVyXG4gICAgICAgICAgPyBldmVudCA9PiB7XG4gICAgICAgICAgICAgIGlmIChldmVudC5rZXkgPT09ICcgJyB8fCBldmVudC5rZXkgPT09ICdFbnRlcicpIHtcbiAgICAgICAgICAgICAgICBoYW5kbGVPcmRlcigpXG4gICAgICAgICAgICAgICAgaWYgKGV2ZW50LmtleSA9PT0gJyAnKSB7XG4gICAgICAgICAgICAgICAgICAvLyBAbm90ZTogaXQgYXZvaWQgc2Nyb2xsIHdoZW4gcHJlc3NpbmcgU3BhY2VcbiAgICAgICAgICAgICAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KClcbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIH1cbiAgICAgICAgICA6IHVuZGVmaW5lZFxuICAgICAgfVxuICAgICAgcm9sZT17b25PcmRlciA/ICdidXR0b24gY29sdW1uaGVhZGVyJyA6IHVuZGVmaW5lZH1cbiAgICAgIHRhYkluZGV4PXtoYW5kbGVPcmRlciA/IDAgOiAtMX1cbiAgICAgIHdpZHRoPXt3aWR0aH1cbiAgICA+XG4gICAgICA8U3R5bGVkVGV4dFxuICAgICAgICBhcz1cImRpdlwiXG4gICAgICAgIHNlbnRpbWVudD17b3JkZXIgIT09IHVuZGVmaW5lZCA/ICdwcmltYXJ5JyA6ICduZXV0cmFsJ31cbiAgICAgICAgdmFyaWFudD1cImJvZHlTbWFsbFwiXG4gICAgICA+XG4gICAgICAgIHtjaGlsZHJlbn1cbiAgICAgICAge2luZm8gPyAoXG4gICAgICAgICAgPFRvb2x0aXAgdGV4dD17aW5mb30+XG4gICAgICAgICAgICA8SW5mb3JtYXRpb25PdXRsaW5lSWNvblxuICAgICAgICAgICAgICBwcm9taW5lbmNlPVwid2Vha1wiXG4gICAgICAgICAgICAgIHNlbnRpbWVudD1cIm5ldXRyYWxcIlxuICAgICAgICAgICAgICBzaXplPVwic21hbGxcIlxuICAgICAgICAgICAgLz5cbiAgICAgICAgICA8L1Rvb2x0aXA+XG4gICAgICAgICkgOiBudWxsfVxuICAgICAgICB7b3JkZXJEaXJlY3Rpb24gIT09IHVuZGVmaW5lZCAmJiBpc09yZGVyZWQgIT09IHVuZGVmaW5lZCA/IChcbiAgICAgICAgICA8U29ydEljb24gYXJpYS1kaXNhYmxlZD17IW9uT3JkZXJ9IG9yZGVyPXtvcmRlcn0gLz5cbiAgICAgICAgKSA6IG51bGx9XG4gICAgICA8L1N0eWxlZFRleHQ+XG4gICAgPC9TdHlsZWRIZWFkZXJDZWxsPlxuICApXG59XG4iXX0= */"));
-const StyledText = /* @__PURE__ */ _styled(Text, process.env.NODE_ENV === "production" ? {
-  target: "ev6jkq80"
-} : {
-  target: "ev6jkq80",
-  label: "StyledText"
-})("display:flex;flex-direction:row;align-items:center;gap:", ({
-  theme
-}) => theme.space["1"], ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1RhYmxlL0hlYWRlckNlbGwudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTREK0IiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvdWx0cmF2aW9sZXQvdWx0cmF2aW9sZXQvcGFja2FnZXMvdWkvc3JjL2NvbXBvbmVudHMvVGFibGUvSGVhZGVyQ2VsbC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIGNsaWVudCdcblxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQge1xuICBJbmZvcm1hdGlvbk91dGxpbmVJY29uLFxuICBTb3J0SWNvbiBhcyBTb3J0SWNvblVWLFxuICBTb3V0aFNob3J0SWNvbixcbn0gZnJvbSAnQHVsdHJhdmlvbGV0L2ljb25zJ1xuaW1wb3J0IHR5cGUgeyBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IFRleHQgfSBmcm9tICcuLi9UZXh0J1xuaW1wb3J0IHsgVG9vbHRpcCB9IGZyb20gJy4uL1Rvb2x0aXAnXG5cbmNvbnN0IFN0eWxlZFNvcnRJY29uID0gc3R5bGVkKFNvdXRoU2hvcnRJY29uLCB7XG4gIHNob3VsZEZvcndhcmRQcm9wOiBwcm9wID0+ICFbJ29yZGVyJ10uaW5jbHVkZXMocHJvcCksXG59KTx7IG9yZGVyOiAnYXNjZW5kaW5nJyB8ICdkZXNjZW5kaW5nJyB9PmBcbiAgICB0cmFuc2Zvcm06ICR7KHsgb3JkZXIgfSkgPT5cbiAgICAgIG9yZGVyID09PSAnYXNjZW5kaW5nJyA/ICdyb3RhdGUoLTE4MGRlZyknIDogJ25vbmUnfTtcbiAgICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gMC4ycztcbmBcblxuY29uc3QgU29ydEljb24gPSAoeyBvcmRlciB9OiB7IG9yZGVyPzogJ2FzY2VuZGluZycgfCAnZGVzY2VuZGluZycgfSkgPT5cbiAgb3JkZXIgPyAoXG4gICAgPFN0eWxlZFNvcnRJY29uIG9yZGVyPXtvcmRlcn0gc2VudGltZW50PVwicHJpbWFyeVwiIC8+XG4gICkgOiAoXG4gICAgPFNvcnRJY29uVVYgc2VudGltZW50PVwibmV1dHJhbFwiIC8+XG4gIClcblxudHlwZSBTdHlsZWRIZWFkZXJDZWxsUHJvcHMgPSBQaWNrPFxuICBIZWFkZXJDZWxsUHJvcHMsXG4gICd3aWR0aCcgfCAnbWF4V2lkdGgnIHwgJ21pbldpZHRoJ1xuPiAmIHtcbiAgYWxpZ24/OiAnbGVmdCcgfCAnY2VudGVyJyB8ICdyaWdodCdcbn1cblxuY29uc3QgU3R5bGVkSGVhZGVyQ2VsbCA9IHN0eWxlZCgndGgnLCB7XG4gIHNob3VsZEZvcndhcmRQcm9wOiBwcm9wID0+XG4gICAgIVsnYWxpZ24nLCAnd2lkdGgnLCAnbWF4V2lkdGgnLCAnbWluV2lkdGgnXS5pbmNsdWRlcyhwcm9wKSxcbn0pPFN0eWxlZEhlYWRlckNlbGxQcm9wcz5gXG4keyh7IHdpZHRoLCBtYXhXaWR0aCwgbWluV2lkdGggfSkgPT4gYFxuICAgICR7d2lkdGggPyBgd2lkdGg6ICR7d2lkdGh9O2AgOiAnJ31cbiAgICAke21heFdpZHRoID8gYG1heC13aWR0aDogJHttYXhXaWR0aH07YCA6ICcnfVxuICAgICR7bWluV2lkdGggPyBgbWluLXdpZHRoOiAke21pbldpZHRofTtgIDogJyd9XG4gIGB9XG4gIGRpc3BsYXk6IHRhYmxlLWNlbGw7XG4gIHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7XG4gIHRleHQtYWxpZ246ICR7KHsgYWxpZ24gfSkgPT4gYWxpZ259O1xuICBwYWRkaW5nOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNwYWNlWycxJ119O1xuXG4gICZbcm9sZSo9J2J1dHRvbiddIHtcbiAgICBjdXJzb3I6IHBvaW50ZXI7XG4gICAgdXNlci1zZWxlY3Q6IG5vbmU7XG4gIH1cblxuICAmOmZpcnN0LW9mLXR5cGUge1xuICAgICZbZGF0YS1jaGVja2JveD1cInRydWVcIl0ge1xuICAgICAgcGFkZGluZy1sZWZ0OiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNwYWNlWycyJ119O1xuICAgIH0gXG4gIH1cbmBcblxuY29uc3QgU3R5bGVkVGV4dCA9IHN0eWxlZChUZXh0KWBcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IHJvdztcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgZ2FwOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNwYWNlWycxJ119O1xuYFxuXG50eXBlIEhlYWRlckNlbGxQcm9wcyA9IHtcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZVxuICBjbGFzc05hbWU/OiBzdHJpbmdcbiAgaXNPcmRlcmVkPzogYm9vbGVhblxuICBvcmRlckRpcmVjdGlvbj86ICdhc2MnIHwgJ2Rlc2MnIHwgJ25vbmUnXG4gIG9uT3JkZXI/OiAobmV3T3JkZXI6ICdhc2MnIHwgJ2Rlc2MnKSA9PiB2b2lkXG4gIGluZm8/OiBzdHJpbmdcbiAgYWxpZ24/OiAnbGVmdCcgfCAnY2VudGVyJyB8ICdyaWdodCdcbiAgd2lkdGg/OiBzdHJpbmdcbiAgbWF4V2lkdGg/OiBzdHJpbmdcbiAgbWluV2lkdGg/OiBzdHJpbmdcbiAgaXNDaGVja2JveD86IGJvb2xlYW5cbn1cblxuZXhwb3J0IGNvbnN0IEhlYWRlckNlbGwgPSAoe1xuICBjaGlsZHJlbixcbiAgY2xhc3NOYW1lLFxuICBpc09yZGVyZWQsXG4gIG9uT3JkZXIsXG4gIG9yZGVyRGlyZWN0aW9uLFxuICBpbmZvLFxuICBhbGlnbixcbiAgd2lkdGgsXG4gIG1heFdpZHRoLFxuICBtaW5XaWR0aCxcbiAgaXNDaGVja2JveCxcbn06IEhlYWRlckNlbGxQcm9wcykgPT4ge1xuICBsZXQgb3JkZXI6IHVuZGVmaW5lZCB8ICdhc2NlbmRpbmcnIHwgJ2Rlc2NlbmRpbmcnXG4gIGlmIChpc09yZGVyZWQgJiYgb3JkZXJEaXJlY3Rpb24gPT09ICdhc2MnKSB7XG4gICAgb3JkZXIgPSAnYXNjZW5kaW5nJ1xuICB9IGVsc2UgaWYgKGlzT3JkZXJlZCAmJiBvcmRlckRpcmVjdGlvbiA9PT0gJ2Rlc2MnKSB7XG4gICAgb3JkZXIgPSAnZGVzY2VuZGluZydcbiAgfVxuXG4gIGNvbnN0IGhhbmRsZU9yZGVyID0gb25PcmRlclxuICAgID8gKCkgPT4gb25PcmRlcihvcmRlciA9PT0gJ2FzY2VuZGluZycgPyAnZGVzYycgOiAnYXNjJylcbiAgICA6IHVuZGVmaW5lZFxuXG4gIHJldHVybiAoXG4gICAgPFN0eWxlZEhlYWRlckNlbGxcbiAgICAgIGFsaWduPXthbGlnbn1cbiAgICAgIGFyaWEtc29ydD17b3JkZXJ9XG4gICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICAgIGRhdGEtY2hlY2tib3g9e2lzQ2hlY2tib3h9XG4gICAgICBtYXhXaWR0aD17bWF4V2lkdGh9XG4gICAgICBtaW5XaWR0aD17bWluV2lkdGh9XG4gICAgICBvbkNsaWNrPXtoYW5kbGVPcmRlcn1cbiAgICAgIG9uS2V5RG93bj17XG4gICAgICAgIGhhbmRsZU9yZGVyXG4gICAgICAgICAgPyBldmVudCA9PiB7XG4gICAgICAgICAgICAgIGlmIChldmVudC5rZXkgPT09ICcgJyB8fCBldmVudC5rZXkgPT09ICdFbnRlcicpIHtcbiAgICAgICAgICAgICAgICBoYW5kbGVPcmRlcigpXG4gICAgICAgICAgICAgICAgaWYgKGV2ZW50LmtleSA9PT0gJyAnKSB7XG4gICAgICAgICAgICAgICAgICAvLyBAbm90ZTogaXQgYXZvaWQgc2Nyb2xsIHdoZW4gcHJlc3NpbmcgU3BhY2VcbiAgICAgICAgICAgICAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KClcbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIH1cbiAgICAgICAgICA6IHVuZGVmaW5lZFxuICAgICAgfVxuICAgICAgcm9sZT17b25PcmRlciA/ICdidXR0b24gY29sdW1uaGVhZGVyJyA6IHVuZGVmaW5lZH1cbiAgICAgIHRhYkluZGV4PXtoYW5kbGVPcmRlciA/IDAgOiAtMX1cbiAgICAgIHdpZHRoPXt3aWR0aH1cbiAgICA+XG4gICAgICA8U3R5bGVkVGV4dFxuICAgICAgICBhcz1cImRpdlwiXG4gICAgICAgIHNlbnRpbWVudD17b3JkZXIgIT09IHVuZGVmaW5lZCA/ICdwcmltYXJ5JyA6ICduZXV0cmFsJ31cbiAgICAgICAgdmFyaWFudD1cImJvZHlTbWFsbFwiXG4gICAgICA+XG4gICAgICAgIHtjaGlsZHJlbn1cbiAgICAgICAge2luZm8gPyAoXG4gICAgICAgICAgPFRvb2x0aXAgdGV4dD17aW5mb30+XG4gICAgICAgICAgICA8SW5mb3JtYXRpb25PdXRsaW5lSWNvblxuICAgICAgICAgICAgICBwcm9taW5lbmNlPVwid2Vha1wiXG4gICAgICAgICAgICAgIHNlbnRpbWVudD1cIm5ldXRyYWxcIlxuICAgICAgICAgICAgICBzaXplPVwic21hbGxcIlxuICAgICAgICAgICAgLz5cbiAgICAgICAgICA8L1Rvb2x0aXA+XG4gICAgICAgICkgOiBudWxsfVxuICAgICAgICB7b3JkZXJEaXJlY3Rpb24gIT09IHVuZGVmaW5lZCAmJiBpc09yZGVyZWQgIT09IHVuZGVmaW5lZCA/IChcbiAgICAgICAgICA8U29ydEljb24gYXJpYS1kaXNhYmxlZD17IW9uT3JkZXJ9IG9yZGVyPXtvcmRlcn0gLz5cbiAgICAgICAgKSA6IG51bGx9XG4gICAgICA8L1N0eWxlZFRleHQ+XG4gICAgPC9TdHlsZWRIZWFkZXJDZWxsPlxuICApXG59XG4iXX0= */"));
+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 HeaderCell = ({
   children,
   className,
@@ -67,18 +28,51 @@ const HeaderCell = ({
     order = "descending";
   }
   const handleOrder = onOrder ? () => onOrder(order === "ascending" ? "desc" : "asc") : void 0;
-  return /* @__PURE__ */ jsx(StyledHeaderCell, { align, "aria-sort": order, className, "data-checkbox": isCheckbox, maxWidth, minWidth, 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, tabIndex: handleOrder ? 0 : -1, width, children: /* @__PURE__ */ jsxs(StyledText, { as: "div", 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 { useTheme } from "@emotion/react";
+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
   ] });

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 type RowProps = {
     children: ReactNode;
     expandable?: ReactNode;
@@ -11,6 +11,7 @@ type RowProps = {
     selectDisabled?: boolean | string;
     highlightAnimation?: boolean;
     expanded?: boolean;
+    style?: CSSProperties;
 };
-export declare const Row: ({ children, className, id, selectDisabled, highlightAnimation, expandable, expanded, "data-testid": dataTestid, }: RowProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Row: ({ children, className, id, selectDisabled, highlightAnimation, expandable, expanded, style, "data-testid": dataTestid, }: RowProps) => import("react/jsx-runtime").JSX.Element;
 export {};