@optiaxiom/react 0.3.4 → 0.4.0

package/dist/src/code/Code-css.js

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-DQSmpGQ1.css';
-import './../../assets/src/code/Code.css.ts.vanilla-CIvs9Yp6.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-B76KCQ9u.css';
+import './../../assets/src/code/Code.css.ts.vanilla-BE7HUNcL.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var code = recipeRuntime({base:[{bg:'bg.secondary',display:'inline-block',px:'4',rounded:'sm'},'_1jfturs']});
+var code = recipeRuntime({base:[{bg:'bg.secondary',display:'inline-block',px:'4',rounded:'sm'},'co0rt5']});
 
 export { code };

package/dist/src/combobox/Combobox.js

@@ -0,0 +1,36 @@
+import { jsx } from 'react/jsx-runtime';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { ComboboxContextProvider } from '../combobox-context/ComboboxContext.js';
+import { Popover } from '../popover/Popover.js';
+
+function Combobox({
+  children,
+  defaultOpen = false,
+  isItemDisabled = () => false,
+  itemToKey = (value) => value,
+  itemToString = (value) => value ? String(value) : "",
+  onOpenChange,
+  open: openProp,
+  ...props
+}) {
+  const [open, setOpen] = useControllableState({
+    defaultProp: defaultOpen,
+    onChange: onOpenChange,
+    prop: openProp
+  });
+  return /* @__PURE__ */ jsx(Popover, { onOpenChange: setOpen, open, children: /* @__PURE__ */ jsx(
+    ComboboxContextProvider,
+    {
+      isItemDisabled,
+      itemToKey,
+      itemToString,
+      open,
+      setOpen,
+      ...props,
+      children
+    }
+  ) });
+}
+Combobox.displayName = "@optiaxiom/react/Combobox";
+
+export { Combobox };

package/dist/src/combobox-checkbox-item/ComboboxCheckboxItem.js

@@ -0,0 +1,6 @@
+import { CommandCheckboxItem } from '../command-checkbox-item/CommandCheckboxItem.js';
+
+const ComboboxCheckboxItem = CommandCheckboxItem;
+ComboboxCheckboxItem.displayName = "@optiaxiom/react/ComboboxCheckboxItem";
+
+export { ComboboxCheckboxItem };

package/dist/src/combobox-content/ComboboxContent.js

@@ -0,0 +1,46 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useComboboxContext } from '../combobox-context/ComboboxContext.js';
+import { Command } from '../command/Command.js';
+import '../field-context/FieldContext.js';
+import { useFieldContext } from '../field-context/useFieldContext.js';
+import { PopoverContent } from '../popover-content/PopoverContent.js';
+
+const ComboboxContent = forwardRef(
+  ({ children, ...props }, ref) => {
+    const { labelId } = useFieldContext();
+    const {
+      isItemDisabled,
+      items,
+      itemToKey,
+      itemToString,
+      onInputValueChange,
+      onSelect
+    } = useComboboxContext("ComboboxContent");
+    return /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        "aria-labelledby": labelId,
+        overflow: "hidden",
+        p: "4",
+        ref,
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          Command,
+          {
+            isItemDisabled,
+            items,
+            itemToKey,
+            itemToString,
+            onInputValueChange,
+            onSelect,
+            children
+          }
+        )
+      }
+    );
+  }
+);
+ComboboxContent.displayName = "@optiaxiom/react/ComboboxContent";
+
+export { ComboboxContent };

package/dist/src/combobox-context/ComboboxContext.js

@@ -0,0 +1,5 @@
+import { createContext } from '@radix-ui/react-context';
+
+const [ComboboxContextProvider, useComboboxContext] = createContext("Combobox");
+
+export { ComboboxContextProvider, useComboboxContext };

package/dist/src/combobox-empty/ComboboxEmpty.js

@@ -0,0 +1,6 @@
+import { CommandEmpty } from '../command-empty/CommandEmpty.js';
+
+const ComboboxEmpty = CommandEmpty;
+ComboboxEmpty.displayName = "@optiaxiom/react/ComboboxEmpty";
+
+export { ComboboxEmpty };

package/dist/src/combobox-footer/ComboboxFooter.js

@@ -0,0 +1,6 @@
+import { CommandFooter } from '../command-footer/CommandFooter.js';
+
+const ComboboxFooter = CommandFooter;
+ComboboxFooter.displayName = "@optiaxiom/react/ComboboxFooter";
+
+export { ComboboxFooter };

package/dist/src/combobox-input/ComboboxInput.js

@@ -0,0 +1,6 @@
+import { CommandInput } from '../command-input/CommandInput.js';
+
+const ComboboxInput = CommandInput;
+ComboboxInput.displayName = "@optiaxiom/react/ComboboxInput";
+
+export { ComboboxInput };

package/dist/src/combobox-item/ComboboxItem.js

@@ -0,0 +1,6 @@
+import { CommandItem } from '../command-item/CommandItem.js';
+
+const ComboboxItem = CommandItem;
+ComboboxItem.displayName = "@optiaxiom/react/ComboboxItem";
+
+export { ComboboxItem };

package/dist/src/combobox-item-indicator/ComboboxItemIndicator.js

@@ -0,0 +1,6 @@
+import { CommandItemIndicator } from '../command-item-indicator/CommandItemIndicator.js';
+
+const ComboboxItemIndicator = CommandItemIndicator;
+ComboboxItemIndicator.displayName = "@optiaxiom/react/ComboboxItemIndicator";
+
+export { ComboboxItemIndicator };

package/dist/src/combobox-list/ComboboxList.js

@@ -0,0 +1,6 @@
+import { CommandList } from '../command-list/CommandList.js';
+
+const ComboboxList = CommandList;
+ComboboxList.displayName = "@optiaxiom/react/ComboboxList";
+
+export { ComboboxList };

package/dist/src/combobox-multiple-value/ComboboxMultipleValue.js

@@ -0,0 +1,31 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Badge } from '../badge/Badge.js';
+import { useComboboxContext } from '../combobox-context/ComboboxContext.js';
+import { Flex } from '../flex/Flex.js';
+
+const maxDisplayedItems = 2;
+const ComboboxMultipleValue = forwardRef(({ children, placeholder, value, ...props }, ref) => {
+  const { itemToKey, itemToString } = useComboboxContext(
+    "ComboboxMultipleValue"
+  );
+  if (value instanceof Set) {
+    value = [...value];
+  }
+  return /* @__PURE__ */ jsx(Flex, { flexDirection: "row", flexWrap: "wrap", gap: "2", ref, ...props, children: Array.isArray(value) && value.length > 0 ? children ?? /* @__PURE__ */ jsx(Fragment, { children: value.length > maxDisplayedItems ? /* @__PURE__ */ jsxs(Badge, { children: [
+    value.length,
+    " selected"
+  ] }) : value.slice(0, maxDisplayedItems).map((item) => /* @__PURE__ */ jsx(
+    Badge,
+    {
+      display: "inline-block",
+      flex: "1",
+      truncate: true,
+      children: itemToString(item)
+    },
+    itemToKey(item)
+  )) }) : placeholder });
+});
+ComboboxMultipleValue.displayName = "@optiaxiom/react/ComboboxMultipleValue";
+
+export { ComboboxMultipleValue };

package/dist/src/combobox-separator/ComboboxSeparator.js

@@ -0,0 +1,6 @@
+import { CommandSeparator } from '../command-separator/CommandSeparator.js';
+
+const ComboboxSeparator = CommandSeparator;
+ComboboxSeparator.displayName = "@optiaxiom/react/ComboboxSeparator";
+
+export { ComboboxSeparator };

package/dist/src/combobox-single-value/ComboboxSingleValue.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { useComboboxContext } from '../combobox-context/ComboboxContext.js';
+
+const ComboboxSingleValue = forwardRef(({ children, placeholder, value, ...props }, ref) => {
+  const { itemToString } = useComboboxContext("ComboboxSingleValue");
+  return /* @__PURE__ */ jsx(Box, { ref, ...props, children: value ? children ?? itemToString(value) : placeholder });
+});
+ComboboxSingleValue.displayName = "@optiaxiom/react/ComboboxSingleValue";
+
+export { ComboboxSingleValue };

package/dist/src/combobox-trigger/ComboboxTrigger.js

@@ -0,0 +1,49 @@
+import { jsx } from 'react/jsx-runtime';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
+import { forwardRef, useRef, useEffect } from 'react';
+import { useComboboxContext } from '../combobox-context/ComboboxContext.js';
+import '../field-context/FieldContext.js';
+import { useFieldContext } from '../field-context/useFieldContext.js';
+import { MenuButton } from '../menu-button/MenuButton.js';
+import { PopoverTrigger } from '../popover-trigger/PopoverTrigger.js';
+
+const ComboboxTrigger = forwardRef(({ asChild, children, ...props }, outerRef) => {
+  const { setOpen } = useComboboxContext("ComboboxTrigger");
+  const buttonRef = useRef(null);
+  const ref = useComposedRefs(outerRef, buttonRef);
+  const { labelId } = useFieldContext();
+  useEffect(() => {
+    if (!labelId || !buttonRef.current) {
+      return;
+    }
+    const button = buttonRef.current;
+    const label = document.getElementById(labelId);
+    if (!label) {
+      return;
+    }
+    const onLabelClick = () => button.focus();
+    label.addEventListener("click", onLabelClick);
+    return () => label.removeEventListener("click", onLabelClick);
+  }, [labelId]);
+  return /* @__PURE__ */ jsx(
+    PopoverTrigger,
+    {
+      "aria-labelledby": labelId,
+      asChild: true,
+      onKeyDown: (event) => {
+        switch (event.key) {
+          case "ArrowDown":
+          case "ArrowUp":
+            setOpen(true);
+        }
+      },
+      ref,
+      role: "combobox",
+      ...props,
+      children: asChild ? children : /* @__PURE__ */ jsx(MenuButton, { children })
+    }
+  );
+});
+ComboboxTrigger.displayName = "@optiaxiom/react/ComboboxTrigger";
+
+export { ComboboxTrigger };

package/dist/src/combobox-value/ComboboxValue.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { ComboboxMultipleValue } from '../combobox-multiple-value/ComboboxMultipleValue.js';
+import { ComboboxSingleValue } from '../combobox-single-value/ComboboxSingleValue.js';
+
+const ComboboxValue = forwardRef(
+  (props, ref) => {
+    return props.type === "multiple" ? /* @__PURE__ */ jsx(ComboboxMultipleValue, { ref, ...props }) : /* @__PURE__ */ jsx(ComboboxSingleValue, { ref, ...props });
+  }
+);
+ComboboxValue.displayName = "@optiaxiom/react/ComboboxValue";
+
+export { ComboboxValue };

package/dist/src/command/Command.js

@@ -0,0 +1,74 @@
+import { jsx } from 'react/jsx-runtime';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { useCombobox } from 'downshift';
+import { useEffect } from 'react';
+import { CommandContextProvider } from '../command-context/CommandContext.js';
+
+function Command({
+  children,
+  isItemDisabled = () => false,
+  items,
+  itemToKey = (value) => value,
+  itemToString = (value) => value ? String(value) : "",
+  onInputValueChange,
+  onOpenChange,
+  onSelect
+}) {
+  const [inputValue, setInputValue] = useControllableState({
+    defaultProp: "",
+    onChange: onInputValueChange
+  });
+  useEffect(() => {
+    return () => {
+      setInputValue("");
+    };
+  }, [setInputValue]);
+  const downshift = useCombobox({
+    inputValue,
+    isItemDisabled,
+    isOpen: true,
+    items,
+    itemToKey,
+    itemToString,
+    onSelectedItemChange({ selectedItem, type }) {
+      if (type !== useCombobox.stateChangeTypes.InputBlur) {
+        onSelect?.(selectedItem);
+      }
+    },
+    selectedItem: null,
+    stateReducer(state, actionAndChanges) {
+      const { changes, type } = actionAndChanges;
+      switch (type) {
+        case useCombobox.stateChangeTypes.InputKeyDownEnter:
+        case useCombobox.stateChangeTypes.ItemClick:
+          return {
+            ...changes,
+            /**
+             * Keep the selected option highlighted rather than resetting to -1
+             */
+            highlightedIndex: state.highlightedIndex
+          };
+        default:
+          return changes;
+      }
+    }
+  });
+  return /* @__PURE__ */ jsx(
+    CommandContextProvider,
+    {
+      downshift,
+      highlightedItem: items[downshift.highlightedIndex],
+      isItemDisabled,
+      items,
+      itemToKey,
+      itemToString,
+      setInputValue,
+      setOpen: onOpenChange,
+      setValue: onSelect,
+      children
+    }
+  );
+}
+Command.displayName = "@optiaxiom/react/Command";
+
+export { Command };

package/dist/src/command-checkbox-item/CommandCheckboxItem.js

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Checkbox } from '../checkbox/Checkbox.js';
+import { useCommandContext } from '../command-context/CommandContext.js';
+import { CommandItem } from '../command-item/CommandItem.js';
+import { Flex } from '../flex/Flex.js';
+
+const CommandCheckboxItem = forwardRef(({ addonBefore, ...props }, ref) => {
+  const { isItemDisabled, items } = useCommandContext("CommandCheckboxItem");
+  return /* @__PURE__ */ jsx(
+    CommandItem,
+    {
+      addonBefore: /* @__PURE__ */ jsxs(Flex, { flexDirection: "row", gap: "xs", children: [
+        /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: props.active,
+            disabled: isItemDisabled(props.item, items.indexOf(props.item)),
+            tabIndex: -1
+          }
+        ),
+        addonBefore
+      ] }),
+      ref,
+      ...props
+    }
+  );
+});
+CommandCheckboxItem.displayName = "@optiaxiom/react/CommandCheckboxItem";
+
+export { CommandCheckboxItem };

package/dist/src/command-context/CommandContext.js

@@ -0,0 +1,5 @@
+import { createContext } from '@radix-ui/react-context';
+
+const [CommandContextProvider, useCommandContext] = createContext("Command");
+
+export { CommandContextProvider, useCommandContext };

package/dist/src/command-empty/CommandEmpty.js

@@ -0,0 +1,30 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { useCommandContext } from '../command-context/CommandContext.js';
+
+const CommandEmpty = forwardRef(
+  ({ children, ...props }, ref) => {
+    const { items } = useCommandContext("CommandEmpty");
+    if (items.length > 0) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        alignItems: "center",
+        color: "fg.disabled",
+        display: "flex",
+        fontSize: "md",
+        justifyContent: "center",
+        p: "md",
+        ref,
+        ...props,
+        children: children || "No options"
+      }
+    );
+  }
+);
+CommandEmpty.displayName = "@optiaxiom/react/CommandEmpty";
+
+export { CommandEmpty };

package/dist/src/command-footer/CommandFooter-css.js

@@ -0,0 +1,6 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-B76KCQ9u.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var footer = recipeRuntime({base:[{borderColor:'border.secondary',borderT:'1',flexDirection:'row',gap:'md',justifyContent:'space-between',p:'sm'}]});
+
+export { footer };

package/dist/src/command-footer/CommandFooter.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Flex } from '../flex/Flex.js';
+import { footer } from './CommandFooter-css.js';
+
+const CommandFooter = forwardRef(
+  ({ children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Flex, { asChild: true, ref, ...footer({}, className), ...props, children: /* @__PURE__ */ jsx("li", { children }) });
+  }
+);
+CommandFooter.displayName = "@optiaxiom/react/CommandFooter";
+
+export { CommandFooter };

package/dist/src/command-input/CommandInput.js

@@ -0,0 +1,37 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useCommandContext } from '../command-context/CommandContext.js';
+import { Input } from '../input/Input.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+
+const CommandInput = forwardRef(
+  (props, ref) => {
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    const { downshift, highlightedItem, setInputValue } = useCommandContext("CommandInput");
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        m: "4",
+        ...sprinkleProps,
+        ...downshift.getInputProps({
+          ...restProps,
+          onChange: (event) => {
+            setInputValue("value" in event.target ? event.target.value : "");
+          },
+          onKeyDown: (event) => {
+            if (event.key === " " && highlightedItem) {
+              event.preventDefault();
+              downshift.selectItem(highlightedItem);
+            }
+          },
+          ref
+        })
+      }
+    );
+  }
+);
+CommandInput.displayName = "@optiaxiom/react/CommandInput";
+
+export { CommandInput };

package/dist/src/command-item/CommandItem.js

@@ -0,0 +1,50 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useCommandContext } from '../command-context/CommandContext.js';
+import { CommandItemContextProvider } from '../command-item-context/CommandItemContext.js';
+import { ListboxItemBase } from '../listbox-item-base/ListboxItemBase.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+
+const CommandItem = forwardRef(
+  ({
+    active,
+    addonAfter,
+    addonBefore,
+    children,
+    description,
+    icon,
+    item,
+    ...props
+  }, ref) => {
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    const { downshift, highlightedItem } = useCommandContext("CommandItem");
+    const itemProps = downshift.getItemProps({ item });
+    return /* @__PURE__ */ jsx(CommandItemContextProvider, { active, item, children: /* @__PURE__ */ jsx(
+      ListboxItemBase,
+      {
+        addonAfter,
+        addonBefore,
+        description,
+        icon,
+        ...sprinkleProps,
+        children: /* @__PURE__ */ jsx(
+          "li",
+          {
+            "data-disabled": itemProps["aria-disabled"] ? "" : void 0,
+            "data-highlighted": highlightedItem === item ? "" : void 0,
+            "data-selected": downshift.selectedItem === item ? "" : void 0,
+            ref,
+            ...restProps,
+            ...itemProps,
+            children
+          }
+        )
+      }
+    ) });
+  }
+);
+CommandItem.displayName = "@optiaxiom/react/CommandItem";
+
+export { CommandItem };

package/dist/src/command-item-context/CommandItemContext.js

@@ -0,0 +1,5 @@
+import { createContext } from '@radix-ui/react-context';
+
+const [CommandItemContextProvider, useCommandItemContext] = createContext("CommandItem");
+
+export { CommandItemContextProvider, useCommandItemContext };

package/dist/src/command-item-indicator/CommandItemIndicator.js

@@ -0,0 +1,20 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { useCommandItemContext } from '../command-item-context/CommandItemContext.js';
+import { IconCheck } from '../icons/IconCheck.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+
+const CommandItemIndicator = forwardRef(({ children, ...props }, ref) => {
+  const { restProps, sprinkleProps } = extractSprinkles(props);
+  const { active } = useCommandItemContext("CommandItemIndicator");
+  if (!active) {
+    return /* @__PURE__ */ jsx(Box, { w: "12" });
+  }
+  return /* @__PURE__ */ jsx(Box, { asChild: true, ...sprinkleProps, children: children ?? /* @__PURE__ */ jsx(IconCheck, { ref, ...restProps }) });
+});
+CommandItemIndicator.displayName = "@optiaxiom/react/CommandItemIndicator";
+
+export { CommandItemIndicator };

package/dist/src/command-list/CommandList.js

@@ -0,0 +1,33 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { useCommandContext } from '../command-context/CommandContext.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+
+const CommandList = forwardRef(
+  ({ children, ...props }, ref) => {
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    const { downshift, items } = useCommandContext("CommandList");
+    if (!items.length) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        asChild: true,
+        display: "flex",
+        flex: "1",
+        flexDirection: "column",
+        gap: "2",
+        overflow: "auto",
+        ...sprinkleProps,
+        children: /* @__PURE__ */ jsx("ul", { ...downshift.getMenuProps({ ref, ...restProps }), children })
+      }
+    );
+  }
+);
+CommandList.displayName = "@optiaxiom/react/CommandList";
+
+export { CommandList };

package/dist/src/command-separator/CommandSeparator.js

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { Separator } from '../separator/Separator.js';
+
+const CommandSeparator = forwardRef((props, ref) => /* @__PURE__ */ jsx(Box, { asChild: true, children: /* @__PURE__ */ jsx("li", { ref, children: /* @__PURE__ */ jsx(Separator, { asChild: true, bg: "border.secondary", mx: "-4", my: "2", ...props }) }) }));
+CommandSeparator.displayName = "@optiaxiom/react/CommandSeparator";
+
+export { CommandSeparator };

package/dist/src/data-table/DataTable-css.js

@@ -1,11 +1,11 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-DQSmpGQ1.css';
-import './../../assets/src/data-table/DataTable.css.ts.vanilla-t2Q-5Lpd.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-B76KCQ9u.css';
+import './../../assets/src/data-table/DataTable.css.ts.vanilla-BJs_Nl-b.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cellOffsetVar = 'var(--_1wv15xm)';
-var columnWidthVar = 'var(--_742wq4)';
-var tableCell = recipeRuntime({base:[{bg:'bg.default'},'n82k45'],variants:{pinned:{false:{},left:'xgb0sc',right:{}}}});
-var tableHead = recipeRuntime({base:[{bg:'bg.default'},'xsloh5'],variants:{pinned:{false:{},left:'_3vn90y',right:{}}}});
-var tableHeader = recipeRuntime({base:[{bg:'bg.default'},'_1yky7v6']});
+var cellOffsetVar = 'var(--rfixh2)';
+var columnWidthVar = 'var(--_1so5qbr)';
+var tableCell = recipeRuntime({base:[{bg:'bg.default'},'_9fxd1r'],variants:{pinned:{false:{},left:'_4f317o',right:{}}}});
+var tableHead = recipeRuntime({base:[{bg:'bg.default'},'_1oaj2ea'],variants:{pinned:{false:{},left:'mdovb5',right:{}}}});
+var tableHeader = recipeRuntime({base:[{bg:'bg.default'},'_177uole']});
 
 export { cellOffsetVar, columnWidthVar, tableCell, tableHead, tableHeader };

package/dist/src/data-table-header/DataTableHeader-css.js

@@ -1,8 +1,8 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-DQSmpGQ1.css';
-import './../../assets/src/data-table-header/DataTableHeader.css.ts.vanilla-BgUfkfhX.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-B76KCQ9u.css';
+import './../../assets/src/data-table-header/DataTableHeader.css.ts.vanilla-xxkcym9y.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var header = recipeRuntime({base:[{gap:'4'},'cgrj8e'],variants:{sortable:{false:'_1qp8795',true:'yi6j1q'},variant:{number:{flexDirection:'row-reverse',justifyContent:'end'},text:{flexDirection:'row'}}}});
-var icon = recipeRuntime({base:[{border:'0',color:'fg.tertiary'}],variants:{sorted:{false:'r6oq6t',true:{}}}});
+var header = recipeRuntime({base:[{gap:'4'},'_1kb3mlj'],variants:{sortable:{false:'_1o1idrn',true:'se8b47'},variant:{number:{flexDirection:'row-reverse',justifyContent:'end'},text:{flexDirection:'row'}}}});
+var icon = recipeRuntime({base:[{border:'0',color:'fg.tertiary'}],variants:{sorted:{false:'_5qpha9',true:{}}}});
 
 export { header, icon };

package/dist/src/dialog-body/DialogBody-css.js

@@ -1,4 +1,4 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-DQSmpGQ1.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-B76KCQ9u.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var body = recipeRuntime({base:[{flex:'1',fontSize:'md',overflow:'auto',pb:'md',pt:'lg',px:'lg'}]});