@adecore/ui 0.31.12 → 0.32.0

package/dist/Wipe.js

@@ -1,8 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { useRef } from 'react';
 import clsx from 'clsx';
 import { ChevronsLeftRight } from 'lucide-react';
-import { Icon } from './Icon.js';
+import { Icon } from "./Icon.js";
 import { formatPercent } from './format/number.js';
 import { mergeRefs } from './merge-refs.js';
 import { splitAt, splitForKey } from './wipe-split.js';
@@ -12,36 +12,261 @@ import { splitAt, splitForKey } from './wipe-split.js';
  * sits in. The handle is a line with a round knob on it, or the plain line, which is dragged anywhere
  * along its height.
  */
-export function Wipe({ value: split, onValueChange: onSplit, before, after, label, handle = 'knob', className, ref }) {
-    const frame = useRef(null);
-    const percent = `${split * 100}%`;
-    function moveTo(clientX) {
-        const rect = frame.current?.getBoundingClientRect();
-        const next = rect ? splitAt(clientX, rect) : null;
-        if (next !== null) {
-            onSplit(next);
-        }
-    }
-    function onPointerDown(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        e.currentTarget.setPointerCapture(e.pointerId);
-        moveTo(e.clientX);
-    }
-    function onPointerMove(e) {
-        if (e.currentTarget.hasPointerCapture(e.pointerId)) {
-            moveTo(e.clientX);
-        }
-    }
-    function onKeyDown(e) {
-        const next = splitForKey(split, e.key);
-        if (next === null) {
-            return;
-        }
-        // Only while the handle has the focus, so a canvas or a timeline around it never hears these keys.
-        e.preventDefault();
-        e.stopPropagation();
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Wipe(t0) {
+  const $ = _c(54);
+  const {
+    value: split,
+    onValueChange: onSplit,
+    before,
+    after,
+    label,
+    handle: t1,
+    className,
+    ref
+  } = t0;
+  const handle = t1 === undefined ? "knob" : t1;
+  const frame = useRef(null);
+  const percent = `${split * 100}%`;
+  let t2;
+  if ($[0] !== onSplit) {
+    t2 = function moveTo(clientX) {
+      const rect = frame.current?.getBoundingClientRect();
+      const next = rect ? splitAt(clientX, rect) : null;
+      if (next !== null) {
         onSplit(next);
-    }
-    return (_jsxs("div", { ref: mergeRefs(frame, ref), className: clsx('absolute inset-0', className), children: [_jsx("div", { className: "absolute inset-0", style: { clipPath: `inset(0 ${(1 - split) * 100}% 0 0)` }, children: before }), _jsx("div", { className: "absolute inset-0", style: { clipPath: `inset(0 0 0 ${percent})` }, children: after }), _jsxs("div", { role: "slider", tabIndex: 0, "aria-label": label, "aria-orientation": "horizontal", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(split * 100), "aria-valuetext": formatPercent(Math.round(split * 100)), className: clsx('group absolute inset-y-0 z-10 -ml-3.5 w-7 cursor-ew-resize touch-none', handle === 'line' && 'outline-none'), style: { left: percent }, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onKeyDown: onKeyDown, children: [_jsx("span", { className: clsx('absolute inset-y-0 left-3.25 w-0.5 bg-media-handle shadow-media-handle-edge', handle === 'line' && 'group-focus-visible:bg-accent') }), handle === 'knob' && (_jsx("span", { className: "absolute top-1/2 left-3.5 grid h-7 w-7 -translate-1/2 place-items-center rounded-full bg-media-handle text-media-handle-text shadow-media-handle", children: _jsx(Icon, { icon: ChevronsLeftRight, size: 14 }) }))] })] }));
-}
+      }
+    };
+    $[0] = onSplit;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const moveTo = t2;
+  let t3;
+  if ($[2] !== moveTo) {
+    t3 = function onPointerDown(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      e.currentTarget.setPointerCapture(e.pointerId);
+      moveTo(e.clientX);
+    };
+    $[2] = moveTo;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  const onPointerDown = t3;
+  let t4;
+  if ($[4] !== moveTo) {
+    t4 = function onPointerMove(e_0) {
+      if (e_0.currentTarget.hasPointerCapture(e_0.pointerId)) {
+        moveTo(e_0.clientX);
+      }
+    };
+    $[4] = moveTo;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  const onPointerMove = t4;
+  let t5;
+  if ($[6] !== onSplit || $[7] !== split) {
+    t5 = function onKeyDown(e_1) {
+      const next_0 = splitForKey(split, e_1.key);
+      if (next_0 === null) {
+        return;
+      }
+      e_1.preventDefault();
+      e_1.stopPropagation();
+      onSplit(next_0);
+    };
+    $[6] = onSplit;
+    $[7] = split;
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  const onKeyDown = t5;
+  let t6;
+  if ($[9] !== ref) {
+    t6 = mergeRefs(frame, ref);
+    $[9] = ref;
+    $[10] = t6;
+  } else {
+    t6 = $[10];
+  }
+  let t7;
+  if ($[11] !== className) {
+    t7 = clsx("absolute inset-0", className);
+    $[11] = className;
+    $[12] = t7;
+  } else {
+    t7 = $[12];
+  }
+  const t8 = `inset(0 ${(1 - split) * 100}% 0 0)`;
+  let t9;
+  if ($[13] !== t8) {
+    t9 = {
+      clipPath: t8
+    };
+    $[13] = t8;
+    $[14] = t9;
+  } else {
+    t9 = $[14];
+  }
+  let t10;
+  if ($[15] !== before || $[16] !== t9) {
+    t10 = /*#__PURE__*/_jsx("div", {
+      className: "absolute inset-0",
+      style: t9,
+      children: before
+    });
+    $[15] = before;
+    $[16] = t9;
+    $[17] = t10;
+  } else {
+    t10 = $[17];
+  }
+  const t11 = `inset(0 0 0 ${percent})`;
+  let t12;
+  if ($[18] !== t11) {
+    t12 = {
+      clipPath: t11
+    };
+    $[18] = t11;
+    $[19] = t12;
+  } else {
+    t12 = $[19];
+  }
+  let t13;
+  if ($[20] !== after || $[21] !== t12) {
+    t13 = /*#__PURE__*/_jsx("div", {
+      className: "absolute inset-0",
+      style: t12,
+      children: after
+    });
+    $[20] = after;
+    $[21] = t12;
+    $[22] = t13;
+  } else {
+    t13 = $[22];
+  }
+  let t14;
+  if ($[23] !== split) {
+    t14 = Math.round(split * 100);
+    $[23] = split;
+    $[24] = t14;
+  } else {
+    t14 = $[24];
+  }
+  let t15;
+  if ($[25] !== split) {
+    t15 = formatPercent(Math.round(split * 100));
+    $[25] = split;
+    $[26] = t15;
+  } else {
+    t15 = $[26];
+  }
+  const t16 = handle === "line" && "outline-none";
+  let t17;
+  if ($[27] !== t16) {
+    t17 = clsx("group absolute inset-y-0 z-10 -ml-3.5 w-7 cursor-ew-resize touch-none", t16);
+    $[27] = t16;
+    $[28] = t17;
+  } else {
+    t17 = $[28];
+  }
+  let t18;
+  if ($[29] !== percent) {
+    t18 = {
+      left: percent
+    };
+    $[29] = percent;
+    $[30] = t18;
+  } else {
+    t18 = $[30];
+  }
+  const t19 = handle === "line" && "group-focus-visible:bg-accent";
+  let t20;
+  if ($[31] !== t19) {
+    t20 = clsx("absolute inset-y-0 left-3.25 w-0.5 bg-media-handle shadow-media-handle-edge", t19);
+    $[31] = t19;
+    $[32] = t20;
+  } else {
+    t20 = $[32];
+  }
+  let t21;
+  if ($[33] !== t20) {
+    t21 = /*#__PURE__*/_jsx("span", {
+      className: t20
+    });
+    $[33] = t20;
+    $[34] = t21;
+  } else {
+    t21 = $[34];
+  }
+  let t22;
+  if ($[35] !== handle) {
+    t22 = handle === "knob" && /*#__PURE__*/_jsx("span", {
+      className: "absolute top-1/2 left-3.5 grid h-7 w-7 -translate-1/2 place-items-center rounded-full bg-media-handle text-media-handle-text shadow-media-handle",
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: ChevronsLeftRight,
+        size: 14
+      })
+    });
+    $[35] = handle;
+    $[36] = t22;
+  } else {
+    t22 = $[36];
+  }
+  let t23;
+  if ($[37] !== label || $[38] !== onKeyDown || $[39] !== onPointerDown || $[40] !== onPointerMove || $[41] !== t14 || $[42] !== t15 || $[43] !== t17 || $[44] !== t18 || $[45] !== t21 || $[46] !== t22) {
+    t23 = /*#__PURE__*/_jsxs("div", {
+      role: "slider",
+      tabIndex: 0,
+      "aria-label": label,
+      "aria-orientation": "horizontal",
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": t14,
+      "aria-valuetext": t15,
+      className: t17,
+      style: t18,
+      onPointerDown: onPointerDown,
+      onPointerMove: onPointerMove,
+      onKeyDown: onKeyDown,
+      children: [t21, t22]
+    });
+    $[37] = label;
+    $[38] = onKeyDown;
+    $[39] = onPointerDown;
+    $[40] = onPointerMove;
+    $[41] = t14;
+    $[42] = t15;
+    $[43] = t17;
+    $[44] = t18;
+    $[45] = t21;
+    $[46] = t22;
+    $[47] = t23;
+  } else {
+    t23 = $[47];
+  }
+  let t24;
+  if ($[48] !== t10 || $[49] !== t13 || $[50] !== t23 || $[51] !== t6 || $[52] !== t7) {
+    t24 = /*#__PURE__*/_jsxs("div", {
+      ref: t6,
+      className: t7,
+      children: [t10, t13, t23]
+    });
+    $[48] = t10;
+    $[49] = t13;
+    $[50] = t23;
+    $[51] = t6;
+    $[52] = t7;
+    $[53] = t24;
+  } else {
+    t24 = $[53];
+  }
+  return t24;
+}

package/dist/ZoomControls.js

@@ -1,19 +1,361 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { Maximize, Minus, Plus, Scan } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { ButtonGroup } from './ButtonGroup.js';
-import { Icon } from './Icon.js';
-import { IconButton } from './IconButton.js';
-import { Kbd } from './Kbd.js';
-import { MenuItem, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuRoot, MenuSeparator, MenuTrigger } from './menu/parts.js';
-import { Tooltip } from './Tooltip.js';
+import { ButtonGroup } from "./ButtonGroup.js";
+import { Icon } from "./Icon.js";
+import { IconButton } from "./IconButton.js";
+import { Kbd } from "./Kbd.js";
+import { MenuItem, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuRoot, MenuSeparator, MenuTrigger } from "./menu/parts.js";
+import { Tooltip } from "./Tooltip.js";
 import { activeZoomPreset, steppedZoom, ZOOM_PRESETS } from './zoom.js';
-function MenuIcon({ icon }) {
-    return (_jsx("span", { className: "grid h-4 w-4 place-items-center", children: _jsx(Icon, { icon: icon, size: 14 }) }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function MenuIcon(t0) {
+  const $ = _c(2);
+  const {
+    icon
+  } = t0;
+  let t1;
+  if ($[0] !== icon) {
+    t1 = /*#__PURE__*/_jsx("span", {
+      className: "grid h-4 w-4 place-items-center",
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: icon,
+        size: 14
+      })
+    });
+    $[0] = icon;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
 }
 /* The zoom group of a dock: out, the readout with its presets, in, and fit everything. */
-export function ZoomControls({ zoom, onZoomChange, onFitAll, presets = ZOOM_PRESETS, labels = {}, shortcuts = {}, selection, className, ref }) {
-    const { t } = useTranslation('ui');
-    const preset = activeZoomPreset(zoom, presets);
-    return (_jsxs(ButtonGroup, { ref: ref, className: className, children: [_jsx(IconButton, { icon: Minus, label: labels.out ?? t('zoom.out'), onClick: () => onZoomChange(steppedZoom(zoom, -10)) }), _jsxs(MenuRoot, { children: [_jsx(Tooltip, { label: labels.presets ?? t('zoom.presets'), children: _jsxs(MenuTrigger, { className: "h-8 min-w-14 rounded-lg px-1 text-xs text-text-muted tabular-nums hover:bg-surface-hover hover:text-text data-[popup-open]:bg-surface-active data-[popup-open]:text-text", children: [Math.round(zoom * 100), "%"] }) }), _jsxs(MenuPopup, { side: "top", sideOffset: 10, align: "center", className: "min-w-44", children: [_jsx(MenuRadioGroup, { value: preset, onValueChange: (value) => onZoomChange(value / 100), children: presets.map((percent) => (_jsxs(MenuRadioItem, { value: percent, children: [_jsxs("span", { className: "tabular-nums", children: [percent, "%"] }), percent === 100 && shortcuts.zoomReset && _jsx(Kbd, { shortcut: shortcuts.zoomReset })] }, percent))) }), _jsx(MenuSeparator, {}), _jsxs(MenuItem, { onClick: onFitAll, children: [_jsx(MenuIcon, { icon: Maximize }), labels.fit ?? t('zoom.fit'), " ", shortcuts.fitAll && _jsx(Kbd, { shortcut: shortcuts.fitAll })] }), selection && (_jsxs(MenuItem, { disabled: !selection.enabled, onClick: selection.onZoom, children: [_jsx(MenuIcon, { icon: Scan }), selection.label, " ", selection.shortcut && _jsx(Kbd, { shortcut: selection.shortcut })] }))] })] }), _jsx(IconButton, { icon: Plus, label: labels.in ?? t('zoom.in'), onClick: () => onZoomChange(steppedZoom(zoom, 10)) }), _jsx(IconButton, { icon: Maximize, label: labels.fitEverything ?? t('zoom.fitEverything'), kbd: shortcuts.fitAll, onClick: onFitAll })] }));
-}
+export function ZoomControls(t0) {
+  const $ = _c(80);
+  const {
+    zoom,
+    onZoomChange,
+    onFitAll,
+    presets: t1,
+    labels: t2,
+    shortcuts: t3,
+    selection,
+    className,
+    ref
+  } = t0;
+  const presets = t1 === undefined ? ZOOM_PRESETS : t1;
+  let t4;
+  if ($[0] !== t2) {
+    t4 = t2 === undefined ? {} : t2;
+    $[0] = t2;
+    $[1] = t4;
+  } else {
+    t4 = $[1];
+  }
+  const labels = t4;
+  let t5;
+  if ($[2] !== t3) {
+    t5 = t3 === undefined ? {} : t3;
+    $[2] = t3;
+    $[3] = t5;
+  } else {
+    t5 = $[3];
+  }
+  const shortcuts = t5;
+  const {
+    t
+  } = useTranslation("ui");
+  let t6;
+  if ($[4] !== presets || $[5] !== zoom) {
+    t6 = activeZoomPreset(zoom, presets);
+    $[4] = presets;
+    $[5] = zoom;
+    $[6] = t6;
+  } else {
+    t6 = $[6];
+  }
+  const preset = t6;
+  let t7;
+  if ($[7] !== labels.out || $[8] !== t) {
+    t7 = labels.out ?? t("zoom.out");
+    $[7] = labels.out;
+    $[8] = t;
+    $[9] = t7;
+  } else {
+    t7 = $[9];
+  }
+  let t8;
+  if ($[10] !== onZoomChange || $[11] !== zoom) {
+    t8 = () => onZoomChange(steppedZoom(zoom, -10));
+    $[10] = onZoomChange;
+    $[11] = zoom;
+    $[12] = t8;
+  } else {
+    t8 = $[12];
+  }
+  let t9;
+  if ($[13] !== t7 || $[14] !== t8) {
+    t9 = /*#__PURE__*/_jsx(IconButton, {
+      icon: Minus,
+      label: t7,
+      onClick: t8
+    });
+    $[13] = t7;
+    $[14] = t8;
+    $[15] = t9;
+  } else {
+    t9 = $[15];
+  }
+  let t10;
+  if ($[16] !== labels.presets || $[17] !== t) {
+    t10 = labels.presets ?? t("zoom.presets");
+    $[16] = labels.presets;
+    $[17] = t;
+    $[18] = t10;
+  } else {
+    t10 = $[18];
+  }
+  let t11;
+  if ($[19] !== zoom) {
+    t11 = Math.round(zoom * 100);
+    $[19] = zoom;
+    $[20] = t11;
+  } else {
+    t11 = $[20];
+  }
+  let t12;
+  if ($[21] !== t11) {
+    t12 = /*#__PURE__*/_jsxs(MenuTrigger, {
+      className: "h-8 min-w-14 rounded-lg px-1 text-xs text-text-muted tabular-nums hover:bg-surface-hover hover:text-text data-[popup-open]:bg-surface-active data-[popup-open]:text-text",
+      children: [t11, "%"]
+    });
+    $[21] = t11;
+    $[22] = t12;
+  } else {
+    t12 = $[22];
+  }
+  let t13;
+  if ($[23] !== t10 || $[24] !== t12) {
+    t13 = /*#__PURE__*/_jsx(Tooltip, {
+      label: t10,
+      children: t12
+    });
+    $[23] = t10;
+    $[24] = t12;
+    $[25] = t13;
+  } else {
+    t13 = $[25];
+  }
+  let t14;
+  if ($[26] !== onZoomChange) {
+    t14 = value => onZoomChange(value / 100);
+    $[26] = onZoomChange;
+    $[27] = t14;
+  } else {
+    t14 = $[27];
+  }
+  let t15;
+  if ($[28] !== presets || $[29] !== shortcuts.zoomReset) {
+    let t16;
+    if ($[31] !== shortcuts.zoomReset) {
+      t16 = percent => /*#__PURE__*/_jsxs(MenuRadioItem, {
+        value: percent,
+        children: [/*#__PURE__*/_jsxs("span", {
+          className: "tabular-nums",
+          children: [percent, "%"]
+        }), percent === 100 && shortcuts.zoomReset && /*#__PURE__*/_jsx(Kbd, {
+          shortcut: shortcuts.zoomReset
+        })]
+      }, percent);
+      $[31] = shortcuts.zoomReset;
+      $[32] = t16;
+    } else {
+      t16 = $[32];
+    }
+    t15 = presets.map(t16);
+    $[28] = presets;
+    $[29] = shortcuts.zoomReset;
+    $[30] = t15;
+  } else {
+    t15 = $[30];
+  }
+  let t16;
+  if ($[33] !== preset || $[34] !== t14 || $[35] !== t15) {
+    t16 = /*#__PURE__*/_jsx(MenuRadioGroup, {
+      value: preset,
+      onValueChange: t14,
+      children: t15
+    });
+    $[33] = preset;
+    $[34] = t14;
+    $[35] = t15;
+    $[36] = t16;
+  } else {
+    t16 = $[36];
+  }
+  let t17;
+  if ($[37] === Symbol.for("react.memo_cache_sentinel")) {
+    t17 = /*#__PURE__*/_jsx(MenuSeparator, {});
+    $[37] = t17;
+  } else {
+    t17 = $[37];
+  }
+  let t18;
+  if ($[38] === Symbol.for("react.memo_cache_sentinel")) {
+    t18 = /*#__PURE__*/_jsx(MenuIcon, {
+      icon: Maximize
+    });
+    $[38] = t18;
+  } else {
+    t18 = $[38];
+  }
+  let t19;
+  if ($[39] !== labels.fit || $[40] !== t) {
+    t19 = labels.fit ?? t("zoom.fit");
+    $[39] = labels.fit;
+    $[40] = t;
+    $[41] = t19;
+  } else {
+    t19 = $[41];
+  }
+  let t20;
+  if ($[42] !== shortcuts.fitAll) {
+    t20 = shortcuts.fitAll && /*#__PURE__*/_jsx(Kbd, {
+      shortcut: shortcuts.fitAll
+    });
+    $[42] = shortcuts.fitAll;
+    $[43] = t20;
+  } else {
+    t20 = $[43];
+  }
+  let t21;
+  if ($[44] !== onFitAll || $[45] !== t19 || $[46] !== t20) {
+    t21 = /*#__PURE__*/_jsxs(MenuItem, {
+      onClick: onFitAll,
+      children: [t18, t19, " ", t20]
+    });
+    $[44] = onFitAll;
+    $[45] = t19;
+    $[46] = t20;
+    $[47] = t21;
+  } else {
+    t21 = $[47];
+  }
+  let t22;
+  if ($[48] !== selection) {
+    t22 = selection && /*#__PURE__*/_jsxs(MenuItem, {
+      disabled: !selection.enabled,
+      onClick: selection.onZoom,
+      children: [/*#__PURE__*/_jsx(MenuIcon, {
+        icon: Scan
+      }), selection.label, " ", selection.shortcut && /*#__PURE__*/_jsx(Kbd, {
+        shortcut: selection.shortcut
+      })]
+    });
+    $[48] = selection;
+    $[49] = t22;
+  } else {
+    t22 = $[49];
+  }
+  let t23;
+  if ($[50] !== t16 || $[51] !== t21 || $[52] !== t22) {
+    t23 = /*#__PURE__*/_jsxs(MenuPopup, {
+      side: "top",
+      sideOffset: 10,
+      align: "center",
+      className: "min-w-44",
+      children: [t16, t17, t21, t22]
+    });
+    $[50] = t16;
+    $[51] = t21;
+    $[52] = t22;
+    $[53] = t23;
+  } else {
+    t23 = $[53];
+  }
+  let t24;
+  if ($[54] !== t13 || $[55] !== t23) {
+    t24 = /*#__PURE__*/_jsxs(MenuRoot, {
+      children: [t13, t23]
+    });
+    $[54] = t13;
+    $[55] = t23;
+    $[56] = t24;
+  } else {
+    t24 = $[56];
+  }
+  let t25;
+  if ($[57] !== labels.in || $[58] !== t) {
+    t25 = labels.in ?? t("zoom.in");
+    $[57] = labels.in;
+    $[58] = t;
+    $[59] = t25;
+  } else {
+    t25 = $[59];
+  }
+  let t26;
+  if ($[60] !== onZoomChange || $[61] !== zoom) {
+    t26 = () => onZoomChange(steppedZoom(zoom, 10));
+    $[60] = onZoomChange;
+    $[61] = zoom;
+    $[62] = t26;
+  } else {
+    t26 = $[62];
+  }
+  let t27;
+  if ($[63] !== t25 || $[64] !== t26) {
+    t27 = /*#__PURE__*/_jsx(IconButton, {
+      icon: Plus,
+      label: t25,
+      onClick: t26
+    });
+    $[63] = t25;
+    $[64] = t26;
+    $[65] = t27;
+  } else {
+    t27 = $[65];
+  }
+  let t28;
+  if ($[66] !== labels.fitEverything || $[67] !== t) {
+    t28 = labels.fitEverything ?? t("zoom.fitEverything");
+    $[66] = labels.fitEverything;
+    $[67] = t;
+    $[68] = t28;
+  } else {
+    t28 = $[68];
+  }
+  let t29;
+  if ($[69] !== onFitAll || $[70] !== shortcuts.fitAll || $[71] !== t28) {
+    t29 = /*#__PURE__*/_jsx(IconButton, {
+      icon: Maximize,
+      label: t28,
+      kbd: shortcuts.fitAll,
+      onClick: onFitAll
+    });
+    $[69] = onFitAll;
+    $[70] = shortcuts.fitAll;
+    $[71] = t28;
+    $[72] = t29;
+  } else {
+    t29 = $[72];
+  }
+  let t30;
+  if ($[73] !== className || $[74] !== ref || $[75] !== t24 || $[76] !== t27 || $[77] !== t29 || $[78] !== t9) {
+    t30 = /*#__PURE__*/_jsxs(ButtonGroup, {
+      ref: ref,
+      className: className,
+      children: [t9, t24, t27, t29]
+    });
+    $[73] = className;
+    $[74] = ref;
+    $[75] = t24;
+    $[76] = t27;
+    $[77] = t29;
+    $[78] = t9;
+    $[79] = t30;
+  } else {
+    t30 = $[79];
+  }
+  return t30;
+}

package/dist/class-name.js

@@ -1,3 +1,3 @@
 import clsx from 'clsx';
 /* Puts the library's own classes before a caller's, whichever form the caller's takes. */
-export const withClass = (own, className) => typeof className === 'function' ? (state) => clsx(own, className(state)) : clsx(own, className);
+export const withClass = (own, className) => typeof className === 'function' ? state => clsx(own, className(state)) : clsx(own, className);