@crewlethq/ui 0.4.4 → 0.5.0

package/dist/{chunk-H4FBTAYS.js → chunk-BNCCEER3.js}

@@ -1,12 +1,12 @@
-import { TreeGrid } from './chunk-5SDBMKUO.js';
-import { createTreeModel } from './chunk-NTRZGNEX.js';
-import { OrgLabel } from './chunk-5C5YMZQU.js';
-import { AddPill } from './chunk-S4GZWSKR.js';
-import { IconButton } from './chunk-F27EPQ7D.js';
+import { TreeGrid } from './chunk-FIFNP6PL.js';
+import { createTreeModel } from './chunk-S3BCVWTU.js';
+import { OrgLabel } from './chunk-WOFOMTGB.js';
+import { AddPill } from './chunk-OM5E3TTK.js';
+import { IconButton } from './chunk-4UQ7SMPK.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './OrgTable-VWMFC3TB.css';
 import { useMemo, useRef, useImperativeHandle, useCallback } from 'react';
-import { KeyboardArrowDownGlyph, KeyboardArrowUpGlyph } from '@crewlethq/icons/glyphs';
+import { ChevronDownGlyph, ChevronUpGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
 var LABELS = {
@@ -69,7 +69,7 @@ function OrgTable({
           size: "sm",
           label: text.expandAll,
           title: text.expandAll,
-          icon: /* @__PURE__ */ jsx(KeyboardArrowDownGlyph, {}),
+          icon: /* @__PURE__ */ jsx(ChevronDownGlyph, {}),
           onClick: () => grid.current?.expandAll()
         }
       ),
@@ -79,7 +79,7 @@ function OrgTable({
           size: "sm",
           label: text.collapseAll,
           title: text.collapseAll,
-          icon: /* @__PURE__ */ jsx(KeyboardArrowUpGlyph, {}),
+          icon: /* @__PURE__ */ jsx(ChevronUpGlyph, {}),
           onClick: () => grid.current?.collapseAll()
         }
       )

package/dist/chunk-C5WJUZVR.js

@@ -0,0 +1,56 @@
+import { useThemePreference, useSystemTheme, resolveTheme } from './chunk-K3OWD7BJ.js';
+import { IconButton } from './chunk-4UQ7SMPK.js';
+import { SunGlyph, MoonGlyph } from '@crewlethq/icons/glyphs';
+import { jsx } from 'react/jsx-runtime';
+
+function ThemeToggle(props) {
+  if (props.value !== void 0) {
+    const { storageKey: _none, ...controlled } = props;
+    return /* @__PURE__ */ jsx(ToggleButton, { ...controlled });
+  }
+  const { value: _stored, storageKey = "crewlet_theme", ...button } = props;
+  return /* @__PURE__ */ jsx(StoredThemeToggle, { ...button, storageKey });
+}
+function StoredThemeToggle({
+  storageKey,
+  onChange,
+  ...button
+}) {
+  const [theme, choose] = useThemePreference({ storageKey });
+  return /* @__PURE__ */ jsx(
+    ToggleButton,
+    {
+      ...button,
+      value: theme,
+      onChange: (next) => {
+        choose(next);
+        onChange?.(next);
+      }
+    }
+  );
+}
+function ToggleButton({
+  value,
+  onChange,
+  toLightLabel = "Switch to the light theme",
+  toDarkLabel = "Switch to the dark theme",
+  size = "sm",
+  variant = "ghost",
+  className
+}) {
+  const system = useSystemTheme();
+  const next = resolveTheme(value, system) === "dark" ? "light" : "dark";
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      label: next === "light" ? toLightLabel : toDarkLabel,
+      icon: next === "light" ? /* @__PURE__ */ jsx(SunGlyph, {}) : /* @__PURE__ */ jsx(MoonGlyph, {}),
+      size,
+      variant,
+      className,
+      onClick: () => onChange(next)
+    }
+  );
+}
+
+export { ThemeToggle };

package/dist/{chunk-5WS6L6FA.js → chunk-CAIHUYXV.js}

@@ -1,14 +1,14 @@
-import { avatarSquareCorner, Avatar } from './chunk-PNFASD6F.js';
-import './ImageUpload-HKFIZR6D.css';
+import { avatarCorner, Avatar } from './chunk-IA232OTU.js';
+import './ImageUpload-YCHJMUGX.css';
 import { useRef } from 'react';
-import { PhotoCameraGlyph, CloseGlyph } from '@crewlethq/icons/glyphs';
+import { CameraGlyph, XGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 var ImageUpload = ({
   src,
   name,
   size = 64,
-  shape = "square",
+  kind = "agent",
   readOnly = false,
   uploading = false,
   accept = "image/*",
@@ -41,7 +41,7 @@ var ImageUpload = ({
   const empty = !src && !readOnly;
   const wrapperClasses = [
     "crewlet-image-upload",
-    `crewlet-image-upload--${shape}`,
+    `crewlet-image-upload--${kind}`,
     uploading ? "is-uploading" : "",
     empty ? "is-empty" : "",
     className
@@ -54,7 +54,7 @@ var ImageUpload = ({
      * showed the badge's corners through the overlay at every size but the one
      * the step was chosen for.
      */
-    "--crewlet-image-upload-corner": avatarSquareCorner(size),
+    "--crewlet-image-upload-corner": `${avatarCorner(size)}px`,
     ...style
   };
   const triggerLabel = uploading ? "Uploading image" : src ? "Change image" : "Upload image";
@@ -69,9 +69,9 @@ var ImageUpload = ({
         "aria-label": triggerLabel,
         "aria-busy": uploading,
         children: [
-          /* @__PURE__ */ jsx(Avatar, { src, name, size, shape }),
+          /* @__PURE__ */ jsx(Avatar, { src, name, size, kind }),
           !readOnly ? /* @__PURE__ */ jsx("span", { className: "crewlet-image-upload__overlay", "aria-hidden": true, children: uploading ? /* @__PURE__ */ jsx("span", { className: "crewlet-image-upload__spinner" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(PhotoCameraGlyph, { size: "lg" }),
+            /* @__PURE__ */ jsx(CameraGlyph, { size: "lg" }),
             /* @__PURE__ */ jsx("span", { className: "crewlet-image-upload__overlay-text", children: src ? "Change" : "Upload" })
           ] }) }) : null
         ]
@@ -85,7 +85,7 @@ var ImageUpload = ({
         onClick: handleRemove,
         disabled: uploading,
         "aria-label": "Remove image",
-        children: /* @__PURE__ */ jsx(CloseGlyph, { size: "sm" })
+        children: /* @__PURE__ */ jsx(XGlyph, { size: "sm" })
       }
     ) : null,
     !readOnly ? (

package/dist/{chunk-5KSRXHOW.js → chunk-CQY5NTRS.js}

@@ -1,5 +1,5 @@
 import { useLayerContainer, viewportBounds, LAYER_GAP, outsideBounds, placePopup, LAYER_REPOSITION_EVENT } from './chunk-7RPGY3JE.js';
-import { usePopupLayer } from './chunk-ITHXJHBB.js';
+import { usePopupLayer } from './chunk-R25RGPUB.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Tooltip-LKQF7CE4.css';
 import { useId, useState, useRef, useCallback, useEffect, useLayoutEffect, cloneElement } from 'react';

package/dist/{chunk-MW356IVK.js → chunk-D6EVJUGU.js}

@@ -1,5 +1,5 @@
-import { useListbox } from './chunk-KIC7BZYJ.js';
-import { Input } from './chunk-GKHAKGOF.js';
+import { useListbox } from './chunk-6MU7HNB4.js';
+import { Input } from './chunk-DSUY5F4E.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Combobox-4FUVYIE7.css';
 import { forwardRef, useId, useMemo, useRef, useCallback } from 'react';

package/dist/{chunk-7PEFUMQJ.js → chunk-DHPUMOTX.js}

@@ -1,8 +1,8 @@
-import { useRoving, tabStop, tabId } from './chunk-Q3B66TJM.js';
+import { useRoving, tabStop, tabId } from './chunk-QY7UU5ZB.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Tabs-MJ2E3VPK.css';
+import './Tabs-XCNPHA7B.css';
 import './SegmentedControl-X3BI3XU4.css';
 import { useId } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-HZ5XZNPS.js → chunk-DS2C73RJ.js}

@@ -1,8 +1,8 @@
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './List-XTHESXLR.css';
+import './List-MYJIV6MP.css';
 import { createContext, useContext, Children, isValidElement, cloneElement } from 'react';
-import { ErrorGlyph } from '@crewlethq/icons/glyphs';
+import { CircleAlertGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 var ListContext = createContext({ variant: "divided", templated: false });
@@ -36,7 +36,7 @@ function ListItem({
   const interactive = href !== void 0 || onClick !== void 0 || asChild;
   const contents = (words) => /* @__PURE__ */ jsxs(Fragment, { children: [
     tone === "danger" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(ErrorGlyph, { className: "crewlet-list__danger-mark", size: "sm" }),
+      /* @__PURE__ */ jsx(CircleAlertGlyph, { className: "crewlet-list__danger-mark", size: "sm" }),
       /* @__PURE__ */ jsx(VisuallyHidden, { children: dangerLabel }),
       " "
     ] }) : null,

package/dist/{chunk-GKHAKGOF.js → chunk-DSUY5F4E.js}

@@ -1,10 +1,10 @@
 import { useHeadingLevel, headingTag, HeadingLevelProvider, nextHeadingLevel } from './chunk-PQADV6P6.js';
-import { IconButton } from './chunk-F27EPQ7D.js';
+import { IconButton } from './chunk-4UQ7SMPK.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Input-2PU5CPKK.css';
 import { forwardRef, useRef, useState, useImperativeHandle, useEffect, useId } from 'react';
-import { CloseGlyph } from '@crewlethq/icons/glyphs';
+import { XGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 var Input = forwardRef(function Input2({
@@ -68,7 +68,7 @@ var Input = forwardRef(function Input2({
           }
         ),
         trailing ? /* @__PURE__ */ jsx("span", { className: "crewlet-input__trailing", children: trailing }) : null,
-        onClear && filled ? /* @__PURE__ */ jsx("span", { className: "crewlet-input__clear", children: /* @__PURE__ */ jsx(IconButton, { size: "sm", variant: "ghost", label: clearLabel, icon: /* @__PURE__ */ jsx(CloseGlyph, { size: "xs" }), onClick: clear, disabled }) }) : null
+        onClear && filled ? /* @__PURE__ */ jsx("span", { className: "crewlet-input__clear", children: /* @__PURE__ */ jsx(IconButton, { size: "sm", variant: "ghost", label: clearLabel, icon: /* @__PURE__ */ jsx(XGlyph, { size: "xs" }), onClick: clear, disabled }) }) : null
       ]
     }
   );

package/dist/{chunk-Q4ZPPART.js → chunk-EFYPAJT3.js}

@@ -1,17 +1,17 @@
 import { cx } from './chunk-ODEQTPFM.js';
-import './SearchTrigger-QXOYAUUY.css';
+import './SearchTrigger-Z5D4AAY7.css';
 import { forwardRef } from 'react';
 import { SearchGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var SearchTrigger = forwardRef(function SearchTrigger2({ label = "Search", shortcut, keyshortcuts, icon, className, type = "button", ...rest }, ref) {
+var SearchTrigger = forwardRef(function SearchTrigger2({ label = "Search", variant = "rail", shortcut, keyshortcuts, icon, className, type = "button", ...rest }, ref) {
   return /* @__PURE__ */ jsxs(
     "button",
     {
       ...rest,
       ref,
       type,
-      className: cx("crewlet-search-trigger", className),
+      className: cx("crewlet-search-trigger", `crewlet-search-trigger--${variant}`, className),
       "aria-label": label,
       "aria-keyshortcuts": keyshortcuts,
       children: [

package/dist/{chunk-PATXSJGR.js → chunk-ERVO6OUF.js}

@@ -1,17 +1,17 @@
-import { Menu } from './chunk-T43A26SD.js';
+import { Menu } from './chunk-IPVQKAHO.js';
 import { EmptyValue } from './chunk-EUCC37WY.js';
-import { Checkbox } from './chunk-2PRH365R.js';
+import { Modal } from './chunk-IG27QX7Q.js';
 import { useCardHeaderSlot } from './chunk-AV2DXAEL.js';
+import { Checkbox } from './chunk-UA7O3KKJ.js';
 import { useClipboard } from './chunk-5VNUYO76.js';
-import { Modal } from './chunk-2EOKFKHX.js';
-import { IconButton } from './chunk-F27EPQ7D.js';
-import { Button } from './chunk-BZYDZBAN.js';
+import { IconButton } from './chunk-4UQ7SMPK.js';
+import { Button } from './chunk-ETYEBKR4.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './DataTable-37UWTRN6.css';
+import './DataTable-OLHPF7D4.css';
 import React, { useState, useCallback, useMemo, useRef, useLayoutEffect, useEffect, useId } from 'react';
 import { createPortal } from 'react-dom';
-import { CheckGlyph, ErrorGlyph, ContentCopyGlyph, KeyboardDoubleArrowLeftGlyph, ChevronLeftGlyph, ChevronRightGlyph, KeyboardDoubleArrowRightGlyph, SettingsGlyph, DragIndicatorGlyph, KeyboardArrowUpGlyph, KeyboardArrowDownGlyph, DeleteGlyph, ArrowUpwardGlyph, ArrowDownwardGlyph, UnfoldMoreGlyph, SettingsBackupRestoreGlyph } from '@crewlethq/icons/glyphs';
+import { CheckGlyph, CircleAlertGlyph, CopyGlyph, ChevronsLeftGlyph, ChevronLeftGlyph, ChevronRightGlyph, ChevronsRightGlyph, SettingsGlyph, GripVerticalGlyph, ChevronUpGlyph, ChevronDownGlyph, TrashGlyph, ArrowUpGlyph, ArrowDownGlyph, ChevronsUpDownGlyph, RotateCcwGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 var CopyableCell = ({
@@ -39,7 +39,7 @@ var CopyableCell = ({
           onClick: onCopy,
           "aria-label": ariaLabel || "Copy to clipboard",
           title: ariaLabel || "Copy to clipboard",
-          children: clipboard.state === "copied" ? /* @__PURE__ */ jsx(CheckGlyph, { size: "sm" }) : clipboard.state === "failed" ? /* @__PURE__ */ jsx(ErrorGlyph, { size: "sm" }) : /* @__PURE__ */ jsx(ContentCopyGlyph, { size: "sm" })
+          children: clipboard.state === "copied" ? /* @__PURE__ */ jsx(CheckGlyph, { size: "sm" }) : clipboard.state === "failed" ? /* @__PURE__ */ jsx(CircleAlertGlyph, { size: "sm" }) : /* @__PURE__ */ jsx(CopyGlyph, { size: "sm" })
         }
       ),
       /* @__PURE__ */ jsx("span", { role: "status", children: /* @__PURE__ */ jsx(VisuallyHidden, { children: clipboard.state === "copied" ? copiedLabel : clipboard.state === "failed" ? failedLabel : "" }) })
@@ -225,7 +225,7 @@ var DataTable = ({
   itemsPerPageOptions = [5, 10, 20, 50, 100],
   onRowAction = null,
   actionLabel = "Delete",
-  actionIcon = /* @__PURE__ */ jsx(DeleteGlyph, { size: "md" }),
+  actionIcon = /* @__PURE__ */ jsx(TrashGlyph, { size: "md" }),
   getRowKey,
   rowKey,
   emptyMessage = "No data available",
@@ -920,7 +920,7 @@ var DataTable = ({
     if (!column) return null;
     const isSortable = column.sortable !== false;
     const isActive = effectiveSort.key === columnKey && effectiveSort.direction !== null;
-    const arrow = !isSortable ? null : isActive ? effectiveSort.direction === "asc" ? /* @__PURE__ */ jsx(ArrowUpwardGlyph, { size: "sm" }) : /* @__PURE__ */ jsx(ArrowDownwardGlyph, { size: "sm" }) : /* @__PURE__ */ jsx(UnfoldMoreGlyph, { size: "sm" });
+    const arrow = !isSortable ? null : isActive ? effectiveSort.direction === "asc" ? /* @__PURE__ */ jsx(ArrowUpGlyph, { size: "sm" }) : /* @__PURE__ */ jsx(ArrowDownGlyph, { size: "sm" }) : /* @__PURE__ */ jsx(ChevronsUpDownGlyph, { size: "sm" });
     const ariaSort = isActive ? effectiveSort.direction === "asc" ? "ascending" : "descending" : void 0;
     const isSticky = column.sticky === "right";
     if (isCompact) {
@@ -1052,7 +1052,7 @@ var DataTable = ({
             },
             "aria-label": labels.resetColumns,
             title: labels.resetColumns,
-            children: /* @__PURE__ */ jsx(SettingsBackupRestoreGlyph, { size: "md" })
+            children: /* @__PURE__ */ jsx(RotateCcwGlyph, { size: "md" })
           }
         ),
         /* @__PURE__ */ jsx(
@@ -1216,7 +1216,7 @@ var DataTable = ({
           onClick: () => goToPage(1),
           disabled: currentPage <= 1,
           label: labels.firstPage,
-          icon: /* @__PURE__ */ jsx(KeyboardDoubleArrowLeftGlyph, { size: "md" })
+          icon: /* @__PURE__ */ jsx(ChevronsLeftGlyph, { size: "md" })
         }
       ),
       /* @__PURE__ */ jsx(
@@ -1257,7 +1257,7 @@ var DataTable = ({
           onClick: () => goToPage(totalPages),
           disabled: currentPage >= totalPages,
           label: labels.lastPage,
-          icon: /* @__PURE__ */ jsx(KeyboardDoubleArrowRightGlyph, { size: "md" })
+          icon: /* @__PURE__ */ jsx(ChevronsRightGlyph, { size: "md" })
         }
       )
     ] }),
@@ -1528,7 +1528,7 @@ var DataTable = ({
           /* @__PURE__ */ jsx("span", { role: "status", children: /* @__PURE__ */ jsx(VisuallyHidden, { children: settingsSaid }) })
         ] }),
         footer: /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: cancelTableSettings, children: labels.cancel }),
+          /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: cancelTableSettings, children: labels.cancel }),
           /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: applyTableSettings, children: labels.apply })
         ] }),
         children: [
@@ -1591,7 +1591,7 @@ var DataTable = ({
                         size: "sm",
                         className: "crewlet-data-table__column-drag-handle",
                         label: labels.reorder(name),
-                        icon: /* @__PURE__ */ jsx(DragIndicatorGlyph, { size: "md" }),
+                        icon: /* @__PURE__ */ jsx(GripVerticalGlyph, { size: "md" }),
                         "aria-describedby": reorderHintId,
                         draggable: true,
                         onDragStart: (e) => handleDragStart(e, key),
@@ -1622,7 +1622,7 @@ var DataTable = ({
                         {
                           size: "sm",
                           label: labels.moveUp(name),
-                          icon: /* @__PURE__ */ jsx(KeyboardArrowUpGlyph, { size: "sm" }),
+                          icon: /* @__PURE__ */ jsx(ChevronUpGlyph, { size: "sm" }),
                           ...index === 0 ? { disabledReason: labels.atTop(name) } : {},
                           onClick: () => moveColumn(key, -1)
                         }
@@ -1632,7 +1632,7 @@ var DataTable = ({
                         {
                           size: "sm",
                           label: labels.moveDown(name),
-                          icon: /* @__PURE__ */ jsx(KeyboardArrowDownGlyph, { size: "sm" }),
+                          icon: /* @__PURE__ */ jsx(ChevronDownGlyph, { size: "sm" }),
                           ...index === draftColumnOrder.length - 1 ? { disabledReason: labels.atBottom(name) } : {},
                           onClick: () => moveColumn(key, 1)
                         }

package/dist/{chunk-BZYDZBAN.js → chunk-ETYEBKR4.js}

@@ -1,8 +1,8 @@
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Button-D4J6B4MA.css';
+import './Button-X4B2TJAQ.css';
 import { forwardRef, useId, Children, isValidElement, cloneElement } from 'react';
-import { OpenInNewGlyph } from '@crewlethq/icons/glyphs';
+import { ExternalLinkGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function buttonClass({ variant = "primary", size = "medium", shape = "square", block, className }, extra) {
@@ -104,7 +104,7 @@ var ButtonLink = forwardRef(function ButtonLink2({
   children,
   ...rest
 }, ref) {
-  const trailing = trailingIcon ?? (external ? /* @__PURE__ */ jsx(OpenInNewGlyph, { size: "sm" }) : void 0);
+  const trailing = trailingIcon ?? (external ? /* @__PURE__ */ jsx(ExternalLinkGlyph, { size: "sm" }) : void 0);
   return /* @__PURE__ */ jsx(
     "a",
     {

package/dist/{chunk-CC67MUUO.js → chunk-FD5UEN6X.js}

@@ -1,21 +1,21 @@
-import { Toolbar } from './chunk-5EKIWVOR.js';
-import { RelativeTime } from './chunk-3CZ7XAVY.js';
+import { Toolbar } from './chunk-PGRPNDWM.js';
 import { PageHeader } from './chunk-HOXGBLEY.js';
-import { Kbd } from './chunk-SFZOKW2G.js';
-import { DataTable } from './chunk-PATXSJGR.js';
-import { Menu } from './chunk-T43A26SD.js';
-import { DateTimePicker } from './chunk-DB2VDLVR.js';
-import { Popover } from './chunk-EFSG7HNU.js';
-import { useListbox, useOptionKeys } from './chunk-KIC7BZYJ.js';
-import { Input } from './chunk-GKHAKGOF.js';
+import { RelativeTime } from './chunk-3CZ7XAVY.js';
+import { Kbd } from './chunk-KJ34ZBBI.js';
+import { DataTable } from './chunk-ERVO6OUF.js';
+import { Menu } from './chunk-IPVQKAHO.js';
+import { DateTimePicker } from './chunk-YIMOT5OO.js';
+import { Popover } from './chunk-AUS5FNQE.js';
+import { useListbox, useOptionKeys } from './chunk-6MU7HNB4.js';
+import { Input } from './chunk-DSUY5F4E.js';
 import { Count } from './chunk-BHHIIK3M.js';
-import { IconButton } from './chunk-F27EPQ7D.js';
-import { Button } from './chunk-BZYDZBAN.js';
+import { IconButton } from './chunk-4UQ7SMPK.js';
+import { Button } from './chunk-ETYEBKR4.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './DataView-256YF32J.css';
+import './DataView-N6JX464S.css';
 import { useMemo, useState, useEffect, useCallback, useRef, useId } from 'react';
-import { SearchGlyph, KeyboardArrowDownGlyph, TuneGlyph, ArrowUpwardGlyph, ArrowDownwardGlyph, CloseGlyph, SwapVertGlyph, VisibilityGlyph, VisibilityOffGlyph, TagGlyph, ScheduleGlyph, ListGlyph, CheckGlyph } from '@crewlethq/icons/glyphs';
+import { SearchGlyph, ChevronDownGlyph, SlidersVerticalGlyph, ArrowUpGlyph, ArrowDownGlyph, XGlyph, ArrowUpDownGlyph, EyeGlyph, EyeOffGlyph, HashGlyph, ClockGlyph, ListGlyph, CheckGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 var DATA_VIEW_TOOLBAR_LABELS = {
@@ -41,9 +41,9 @@ function glyphForKind(def) {
     case "select":
       return /* @__PURE__ */ jsx(ListGlyph, { size: "sm" });
     case "datetime":
-      return /* @__PURE__ */ jsx(ScheduleGlyph, { size: "sm" });
+      return /* @__PURE__ */ jsx(ClockGlyph, { size: "sm" });
     case "number":
-      return /* @__PURE__ */ jsx(TagGlyph, { size: "sm" });
+      return /* @__PURE__ */ jsx(HashGlyph, { size: "sm" });
     default:
       return /* @__PURE__ */ jsx(SearchGlyph, { size: "sm" });
   }
@@ -119,11 +119,11 @@ function DataViewToolbar({
       {
         label: labels.addFilter,
         items: filterItems,
-        icon: /* @__PURE__ */ jsx(TuneGlyph, { size: "sm" }),
+        icon: /* @__PURE__ */ jsx(SlidersVerticalGlyph, { size: "sm" }),
         triggerVariant: "secondary",
         trigger: /* @__PURE__ */ jsxs("span", { className: "crewlet-data-view-toolbar__menu-label", children: [
           labels.filter,
-          /* @__PURE__ */ jsx(KeyboardArrowDownGlyph, { size: "xs" })
+          /* @__PURE__ */ jsx(ChevronDownGlyph, { size: "xs" })
         ] })
       }
     ) : null,
@@ -140,15 +140,15 @@ function DataViewToolbar({
             variant: "secondary",
             size: "small",
             pressed: sort !== null,
-            leadingIcon: /* @__PURE__ */ jsx(SwapVertGlyph, { size: "sm" }),
+            leadingIcon: /* @__PURE__ */ jsx(ArrowUpDownGlyph, { size: "sm" }),
             onClick: toggle,
             children: /* @__PURE__ */ jsx("span", { className: "crewlet-data-view-toolbar__menu-label", children: sort && sortedName ? /* @__PURE__ */ jsxs(Fragment, { children: [
               labels.sortedBy(String(sortedName)),
-              sort.direction === "asc" ? /* @__PURE__ */ jsx(ArrowUpwardGlyph, { size: "xs" }) : /* @__PURE__ */ jsx(ArrowDownwardGlyph, { size: "xs" }),
+              sort.direction === "asc" ? /* @__PURE__ */ jsx(ArrowUpGlyph, { size: "xs" }) : /* @__PURE__ */ jsx(ArrowDownGlyph, { size: "xs" }),
               /* @__PURE__ */ jsx(VisuallyHidden, { children: sort.direction === "asc" ? labels.ascendingWord : labels.descendingWord })
             ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
               labels.sort,
-              /* @__PURE__ */ jsx(KeyboardArrowDownGlyph, { size: "xs" })
+              /* @__PURE__ */ jsx(ChevronDownGlyph, { size: "xs" })
             ] }) })
           }
         ),
@@ -167,7 +167,7 @@ function DataViewToolbar({
                     variant: "ghost",
                     pressed: isAscending,
                     label: labels.ascending(name),
-                    icon: /* @__PURE__ */ jsx(ArrowUpwardGlyph, { size: "xs" }),
+                    icon: /* @__PURE__ */ jsx(ArrowUpGlyph, { size: "xs" }),
                     onClick: () => {
                       onSortChange({ key: column.key, direction: "asc" });
                       close();
@@ -181,7 +181,7 @@ function DataViewToolbar({
                     variant: "ghost",
                     pressed: isDescending,
                     label: labels.descending(name),
-                    icon: /* @__PURE__ */ jsx(ArrowDownwardGlyph, { size: "xs" }),
+                    icon: /* @__PURE__ */ jsx(ArrowDownGlyph, { size: "xs" }),
                     onClick: () => {
                       onSortChange({ key: column.key, direction: "desc" });
                       close();
@@ -194,9 +194,9 @@ function DataViewToolbar({
           sort ? /* @__PURE__ */ jsx("div", { className: "crewlet-data-view-toolbar__sort-footer", children: /* @__PURE__ */ jsx(
             Button,
             {
-              variant: "tertiary",
+              variant: "ghost",
               size: "small",
-              leadingIcon: /* @__PURE__ */ jsx(CloseGlyph, { size: "xs" }),
+              leadingIcon: /* @__PURE__ */ jsx(XGlyph, { size: "xs" }),
               onClick: () => {
                 onSortChange(null);
                 close();
@@ -213,7 +213,7 @@ function DataViewToolbar({
         variant: "secondary",
         size: "small",
         pressed: showArchived,
-        leadingIcon: showArchived ? /* @__PURE__ */ jsx(VisibilityGlyph, { size: "sm" }) : /* @__PURE__ */ jsx(VisibilityOffGlyph, { size: "sm" }),
+        leadingIcon: showArchived ? /* @__PURE__ */ jsx(EyeGlyph, { size: "sm" }) : /* @__PURE__ */ jsx(EyeOffGlyph, { size: "sm" }),
         onClick: () => onShowArchivedChange(!showArchived),
         children: /* @__PURE__ */ jsxs("span", { className: "crewlet-data-view-toolbar__menu-label", children: [
           labels.showArchived(archivedLabel),
@@ -489,7 +489,7 @@ function OptionListEditor({ def, value, labels, onCommit }) {
       }
     ),
     multiple && held.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "crewlet-filter-axis__editor-footer", children: [
-      /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "small", onClick: () => onCommit([]), children: labels.clear }),
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "small", onClick: () => onCommit([]), children: labels.clear }),
       /* @__PURE__ */ jsx(Button, { variant: "primary", size: "small", onClick: () => onCommit(held, { close: true }), children: labels.done })
     ] }) : null
   ] });
@@ -578,7 +578,7 @@ function FilterAxisChip({
             ":"
           ] }),
           /* @__PURE__ */ jsx("span", { className: "crewlet-filter-axis-chip__value", children: formatFilterValue(def, value, labels) }),
-          /* @__PURE__ */ jsx(KeyboardArrowDownGlyph, { className: "crewlet-filter-axis-chip__chevron", size: "xs" })
+          /* @__PURE__ */ jsx(ChevronDownGlyph, { className: "crewlet-filter-axis-chip__chevron", size: "xs" })
         ] }),
         children: editor
       }
@@ -590,7 +590,7 @@ function FilterAxisChip({
         size: "sm",
         variant: "ghost",
         label: labels.remove(def.label),
-        icon: /* @__PURE__ */ jsx(CloseGlyph, { size: "xs" }),
+        icon: /* @__PURE__ */ jsx(XGlyph, { size: "xs" }),
         onClick: onRemove
       }
     ) : null
@@ -639,9 +639,9 @@ function FilterAxisBar({
       Button,
       {
         className: "crewlet-filter-axis-bar__clear",
-        variant: "tertiary",
+        variant: "ghost",
         size: "small",
-        leadingIcon: /* @__PURE__ */ jsx(CloseGlyph, { size: "xs" }),
+        leadingIcon: /* @__PURE__ */ jsx(XGlyph, { size: "xs" }),
         onClick: onClearAll,
         children: labels.clearAll
       }

package/dist/{chunk-5SDBMKUO.js → chunk-FIFNP6PL.js}

@@ -1,8 +1,8 @@
-import { useTreeState, treeExpandable, treeLevel, treePosInSet, treeSetSize, treeItemAction, treePrevious, treeNext, treeStep } from './chunk-NTRZGNEX.js';
+import { useTreeState, treeExpandable, treeLevel, treePosInSet, treeSetSize, treeItemAction, treePrevious, treeNext, treeStep } from './chunk-S3BCVWTU.js';
 import { LayerNodeBridge } from './chunk-53DVJCVW.js';
 import { LayerHost, LAYER_REPOSITION_EVENT } from './chunk-7RPGY3JE.js';
-import { focusables } from './chunk-ITHXJHBB.js';
-import { IconButton } from './chunk-F27EPQ7D.js';
+import { focusables } from './chunk-R25RGPUB.js';
+import { IconButton } from './chunk-4UQ7SMPK.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './TreeGrid-NSW7VMOX.css';