@adecore/ui 0.53.3 → 0.54.1

package/dist/IconPicker.js

@@ -1,15 +1,16 @@
 import { c as _c } from "react/compiler-runtime";
-import { useId, useLayoutEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { Ban, ChevronDown, Search, X } from 'lucide-react';
+import { useId, useLayoutEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button } from "./Button.js";
 import { EmptyState } from "./EmptyState.js";
 import { formatNumber } from './format/number.js';
+import { cellForKey, escapeClearsSearch, filterSections, isGrouped, sectionsOf, tabStopOf } from './icon-picker.js';
 import { Icon } from "./Icon.js";
 import { IconButton } from "./IconButton.js";
-import { cellForKey, escapeClearsSearch, filterSections, isGrouped, sectionsOf, tabStopOf } from './icon-picker.js';
 import { PopoverPopup, PopoverRoot, PopoverTrigger } from "./popover/parts.js";
+import { ScrollArea } from "./ScrollArea.js";
 import { SectionLabel } from "./SectionLabel.js";
 import { Tooltip } from "./Tooltip.js";
 /* A row of cells is 28 high with a gap of 4. Under a heading of 28 the last row keeps 8 below it; without headings the grid has 6 above as well. */
@@ -364,7 +365,7 @@ function _temp(section) {
   return section.icons;
 }
 function IconPickerPanel(t0) {
-  const $ = _c(34);
+  const $ = _c(35);
   const {
     id,
     name,
@@ -479,12 +480,13 @@ function IconPickerPanel(t0) {
   } else {
     t5 = $[10];
   }
+  const T0 = ScrollArea;
   const t6 = `${id}-grid`;
   const t7 = "radiogroup";
   const t8 = headed ? "scroll-pt-7" : "px-1.5 pt-1.5 pb-2";
   let t9;
   if ($[11] !== t8) {
-    t9 = clsx("relative overflow-y-auto overscroll-contain", t8);
+    t9 = clsx("relative overscroll-contain", t8);
     $[11] = t8;
     $[12] = t9;
   } else {
@@ -555,31 +557,32 @@ function IconPickerPanel(t0) {
     }, section_0.id);
   });
   let t14;
-  if ($[16] !== moveFocus || $[17] !== name || $[18] !== t10 || $[19] !== t11 || $[20] !== t12 || $[21] !== t6 || $[22] !== t9) {
-    t14 = /*#__PURE__*/_jsx("div", {
-      ref: area,
+  if ($[16] !== T0 || $[17] !== moveFocus || $[18] !== name || $[19] !== t10 || $[20] !== t11 || $[21] !== t12 || $[22] !== t6 || $[23] !== t9) {
+    t14 = /*#__PURE__*/_jsx(T0, {
+      viewportRef: area,
       id: t6,
       role: t7,
       "aria-label": name,
-      className: t9,
+      viewportClassName: t9,
       style: t10,
       onScroll: t11,
       onKeyDown: moveFocus,
       children: t12
     });
-    $[16] = moveFocus;
-    $[17] = name;
-    $[18] = t10;
-    $[19] = t11;
-    $[20] = t12;
-    $[21] = t6;
-    $[22] = t9;
-    $[23] = t14;
-  } else {
-    t14 = $[23];
+    $[16] = T0;
+    $[17] = moveFocus;
+    $[18] = name;
+    $[19] = t10;
+    $[20] = t11;
+    $[21] = t12;
+    $[22] = t6;
+    $[23] = t9;
+    $[24] = t14;
+  } else {
+    t14 = $[24];
   }
   let t15;
-  if ($[24] !== disabled || $[25] !== onClear || $[26] !== t || $[27] !== value) {
+  if ($[25] !== disabled || $[26] !== onClear || $[27] !== t || $[28] !== value) {
     t15 = onClear && /*#__PURE__*/_jsx("div", {
       className: "flex border-t border-border p-1",
       children: /*#__PURE__*/_jsxs(Button, {
@@ -592,27 +595,27 @@ function IconPickerPanel(t0) {
         }), t("iconPicker.none")]
       })
     });
-    $[24] = disabled;
-    $[25] = onClear;
-    $[26] = t;
-    $[27] = value;
-    $[28] = t15;
+    $[25] = disabled;
+    $[26] = onClear;
+    $[27] = t;
+    $[28] = value;
+    $[29] = t15;
   } else {
-    t15 = $[28];
+    t15 = $[29];
   }
   let t16;
-  if ($[29] !== clearSearchFirst || $[30] !== t14 || $[31] !== t15 || $[32] !== t5) {
+  if ($[30] !== clearSearchFirst || $[31] !== t14 || $[32] !== t15 || $[33] !== t5) {
     t16 = /*#__PURE__*/_jsxs("div", {
       onKeyDown: clearSearchFirst,
       children: [t5, t14, t15]
     });
-    $[29] = clearSearchFirst;
-    $[30] = t14;
-    $[31] = t15;
-    $[32] = t5;
-    $[33] = t16;
+    $[30] = clearSearchFirst;
+    $[31] = t14;
+    $[32] = t15;
+    $[33] = t5;
+    $[34] = t16;
   } else {
-    t16 = $[33];
+    t16 = $[34];
   }
   return t16;
 }

package/dist/Input.d.ts

@@ -1,5 +1,5 @@
-import type { ComponentProps, ReactNode } from 'react';
 import type { LucideIcon } from 'lucide-react';
+import type { ComponentProps, ReactNode } from 'react';
 export interface InputProps extends Omit<ComponentProps<'input'>, 'size'> {
     size?: 'md' | 'sm';
     mono?: boolean;

package/dist/ListRow.js

@@ -1,6 +1,6 @@
 import { c as _c } from "react/compiler-runtime";
-import clsx from 'clsx';
 import { useRender } from '@base-ui/react/use-render';
+import clsx from 'clsx';
 const VARIANT = {
   /* A row of a list that reads as a table and fills the width of its panel: commits, processes,
      branches. Square, so the rows stack into one block. It carries no padding; the caller pads 12px

package/dist/MiddleTruncate.js

@@ -1,8 +1,8 @@
 import { c as _c } from "react/compiler-runtime";
-import { useLayoutEffect, useState } from 'react';
 import clsx from 'clsx';
-import { fitMiddle } from './middle-truncate.js';
+import { useLayoutEffect, useState } from 'react';
 import { mergeRefs } from './merge-refs.js';
+import { fitMiddle } from './middle-truncate.js';
 import { Tooltip } from "./Tooltip.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 let canvas = null;

package/dist/PanelEmpty.d.ts

@@ -1,5 +1,5 @@
-import type { ReactNode, Ref } from 'react';
 import type { LucideIcon } from 'lucide-react';
+import type { ReactNode, Ref } from 'react';
 export interface PanelEmptyProps {
     header?: ReactNode;
     icon?: LucideIcon;

package/dist/PanelHeader.d.ts

@@ -1,5 +1,5 @@
-import type { ReactNode } from 'react';
 import { useRender } from '@base-ui/react/use-render';
+import type { ReactNode } from 'react';
 export type PanelHeaderProps = useRender.ComponentProps<'header'> & {
     title?: ReactNode;
 };

package/dist/PanelHeader.js

@@ -1,6 +1,6 @@
 import { c as _c } from "react/compiler-runtime";
-import clsx from 'clsx';
 import { useRender } from '@base-ui/react/use-render';
+import clsx from 'clsx';
 import { SectionLabel } from "./SectionLabel.js";
 /* As tall as a 48px toolbar beside it. */
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";

package/dist/ProjectSwitcher.js

@@ -1,7 +1,7 @@
 import { c as _c } from "react/compiler-runtime";
 import clsx from 'clsx';
-import { useTranslation } from 'react-i18next';
 import { ChevronDown, History } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 import { Icon } from "./Icon.js";
 import * as Menu from './menu/index.parts.js';
 import { ProjectSwitcherRow } from "./project-switcher-row.js";

package/dist/PromptDialog.d.ts

@@ -1,5 +1,5 @@
-import { type ReactNode, type Ref } from 'react';
 import type { LucideIcon } from 'lucide-react';
+import { type ReactNode, type Ref } from 'react';
 export interface PromptDialogProps {
     open: boolean;
     title: string;

package/dist/ScrollArea.d.ts

@@ -0,0 +1,12 @@
+import { useRender } from '@base-ui/react/use-render';
+import { type Ref } from 'react';
+import { type ScrollAreaAxis } from './useOverlayScrollbars.tsx';
+export type ScrollAreaProps = Omit<useRender.ComponentProps<'div'>, 'className' | 'ref'> & {
+    axis?: ScrollAreaAxis;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+    viewportRef?: Ref<HTMLElement>;
+    viewportClassName?: string;
+    coveredBottom?: number;
+};
+export declare function ScrollArea({ axis, className, viewportClassName, viewportRef, coveredBottom, ref, render, ...props }: ScrollAreaProps): import("react").JSX.Element;

package/dist/ScrollArea.js

@@ -0,0 +1,144 @@
+import { c as _c } from "react/compiler-runtime";
+import { useRender } from '@base-ui/react/use-render';
+import clsx from 'clsx';
+import { useState } from 'react';
+import { mergeRefs } from './merge-refs.js';
+import { useOverlayScrollbars } from "./useOverlayScrollbars.js";
+/* A box that scrolls natively under thin bars that float over its content and show only while it scrolls. */
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export function ScrollArea(t0) {
+  const $ = _c(33);
+  let className;
+  let coveredBottom;
+  let props;
+  let ref;
+  let render;
+  let t1;
+  let viewportClassName;
+  let viewportRef;
+  if ($[0] !== t0) {
+    ({
+      axis: t1,
+      className,
+      viewportClassName,
+      viewportRef,
+      coveredBottom,
+      ref,
+      render,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = coveredBottom;
+    $[3] = props;
+    $[4] = ref;
+    $[5] = render;
+    $[6] = t1;
+    $[7] = viewportClassName;
+    $[8] = viewportRef;
+  } else {
+    className = $[1];
+    coveredBottom = $[2];
+    props = $[3];
+    ref = $[4];
+    render = $[5];
+    t1 = $[6];
+    viewportClassName = $[7];
+    viewportRef = $[8];
+  }
+  const axis = t1 === undefined ? "y" : t1;
+  const [viewport, setViewport] = useState(null);
+  let t2;
+  if ($[9] !== axis) {
+    t2 = {
+      axis
+    };
+    $[9] = axis;
+    $[10] = t2;
+  } else {
+    t2 = $[10];
+  }
+  const scrollbars = useOverlayScrollbars(viewport, t2);
+  let t3;
+  if ($[11] !== viewportRef) {
+    t3 = mergeRefs(setViewport, viewportRef);
+    $[11] = viewportRef;
+    $[12] = t3;
+  } else {
+    t3 = $[12];
+  }
+  let t4;
+  if ($[13] !== viewportClassName) {
+    t4 = clsx("ade-scroll-viewport", viewportClassName);
+    $[13] = viewportClassName;
+    $[14] = t4;
+  } else {
+    t4 = $[14];
+  }
+  let t5;
+  if ($[15] !== axis || $[16] !== props || $[17] !== t4) {
+    t5 = {
+      ...props,
+      "data-axis": axis,
+      className: t4
+    };
+    $[15] = axis;
+    $[16] = props;
+    $[17] = t4;
+    $[18] = t5;
+  } else {
+    t5 = $[18];
+  }
+  let t6;
+  if ($[19] !== render || $[20] !== t3 || $[21] !== t5) {
+    t6 = {
+      render,
+      ref: t3,
+      defaultTagName: "div",
+      props: t5
+    };
+    $[19] = render;
+    $[20] = t3;
+    $[21] = t5;
+    $[22] = t6;
+  } else {
+    t6 = $[22];
+  }
+  const content = useRender(t6);
+  let t7;
+  if ($[23] !== className) {
+    t7 = clsx("ade-scroll-area", className);
+    $[23] = className;
+    $[24] = t7;
+  } else {
+    t7 = $[24];
+  }
+  let t8;
+  if ($[25] !== coveredBottom) {
+    t8 = coveredBottom ? {
+      "--scrollbar-covered-bottom": `${coveredBottom}px`
+    } : undefined;
+    $[25] = coveredBottom;
+    $[26] = t8;
+  } else {
+    t8 = $[26];
+  }
+  let t9;
+  if ($[27] !== content || $[28] !== ref || $[29] !== scrollbars || $[30] !== t7 || $[31] !== t8) {
+    t9 = /*#__PURE__*/_jsxs("div", {
+      ref: ref,
+      className: t7,
+      style: t8,
+      children: [content, scrollbars]
+    });
+    $[27] = content;
+    $[28] = ref;
+    $[29] = scrollbars;
+    $[30] = t7;
+    $[31] = t8;
+    $[32] = t9;
+  } else {
+    t9 = $[32];
+  }
+  return t9;
+}

package/dist/SectionLabel.js

@@ -1,6 +1,6 @@
 import { c as _c } from "react/compiler-runtime";
-import clsx from 'clsx';
 import { useRender } from '@base-ui/react/use-render';
+import clsx from 'clsx';
 /* A label takes the line height of the row it sits in, which is why the size carries `/[inherit]`. */
 const SECTION_LABEL = 'text-xs/[inherit] font-medium text-text-faint';
 /*

package/dist/SegmentBar.js

@@ -1,6 +1,6 @@
 import { c as _c } from "react/compiler-runtime";
-import { useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
+import { useEffect, useRef, useState } from 'react';
 import { mergeRefs } from './merge-refs.js';
 import { Tooltip } from "./Tooltip.js";
 import { useMeasuredWidth } from './useMeasuredWidth.js';

package/dist/Segmented.d.ts

@@ -1,5 +1,5 @@
-import type { Ref } from 'react';
 import type { LucideIcon } from 'lucide-react';
+import type { Ref } from 'react';
 export interface SegmentedOption<T extends string> {
     id: T;
     label: string;

package/dist/Select.d.ts

@@ -1,4 +1,4 @@
-import type { Ref } from 'react';
+import { type Ref } from 'react';
 import { type SelectGroup, type SelectItem } from './select-shared.ts';
 export type { SelectGroup, SelectItem };
 export interface SelectProps<T extends string> {

package/dist/Select.js

@@ -2,6 +2,7 @@ import { c as _c } from "react/compiler-runtime";
 import { Select as BaseSelect } from '@base-ui/react/select';
 import clsx from 'clsx';
 import { ChevronDown } from 'lucide-react';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Icon } from "./Icon.js";
 import { MENU_LABEL } from "./menu/parts.js";
@@ -9,6 +10,7 @@ import { renderPositioner } from './popup-layer.js';
 import { RowContent } from "./select-row.js";
 import { isGroup, rowClassName, triggerClassName } from './select-shared.js';
 import { SelectSearch } from "./SelectSearch.js";
+import { useOverlayScrollbars } from "./useOverlayScrollbars.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function Row(t0) {
   const $ = _c(14);
@@ -104,7 +106,7 @@ function _temp(sum, group) {
   return sum + group.items.length;
 }
 function PlainSelect(t0) {
-  const $ = _c(46);
+  const $ = _c(47);
   const {
     value,
     onValueChange,
@@ -147,6 +149,8 @@ function PlainSelect(t0) {
     t6 = $[5];
   }
   const selected = t6;
+  const [list, setList] = useState(null);
+  const scrollbars = useOverlayScrollbars(list);
   let t7;
   if ($[6] !== flat) {
     t7 = flat.map(_temp3);
@@ -261,6 +265,7 @@ function PlainSelect(t0) {
     t18 = /*#__PURE__*/_jsx(BaseSelect.Popup, {
       className: "menu-popup",
       children: /*#__PURE__*/_jsx(BaseSelect.List, {
+        ref: setList,
         className: "max-h-80 overflow-auto",
         children: t17
       })
@@ -271,26 +276,27 @@ function PlainSelect(t0) {
     t18 = $[35];
   }
   let t19;
-  if ($[36] !== align || $[37] !== t18) {
+  if ($[36] !== align || $[37] !== scrollbars || $[38] !== t18) {
     t19 = /*#__PURE__*/_jsx(BaseSelect.Portal, {
-      children: /*#__PURE__*/_jsx(BaseSelect.Positioner, {
+      children: /*#__PURE__*/_jsxs(BaseSelect.Positioner, {
         className: "popup-positioner",
         render: renderPositioner,
         side: "bottom",
         align: align,
         sideOffset: 6,
         alignItemWithTrigger: false,
-        children: t18
+        children: [t18, scrollbars]
       })
     });
     $[36] = align;
-    $[37] = t18;
-    $[38] = t19;
+    $[37] = scrollbars;
+    $[38] = t18;
+    $[39] = t19;
   } else {
-    t19 = $[38];
+    t19 = $[39];
   }
   let t20;
-  if ($[39] !== disabled || $[40] !== t16 || $[41] !== t19 || $[42] !== t7 || $[43] !== t8 || $[44] !== value) {
+  if ($[40] !== disabled || $[41] !== t16 || $[42] !== t19 || $[43] !== t7 || $[44] !== t8 || $[45] !== value) {
     t20 = /*#__PURE__*/_jsxs(BaseSelect.Root, {
       items: t7,
       value: value,
@@ -298,15 +304,15 @@ function PlainSelect(t0) {
       onValueChange: t8,
       children: [t16, t19]
     });
-    $[39] = disabled;
-    $[40] = t16;
-    $[41] = t19;
-    $[42] = t7;
-    $[43] = t8;
-    $[44] = value;
-    $[45] = t20;
+    $[40] = disabled;
+    $[41] = t16;
+    $[42] = t19;
+    $[43] = t7;
+    $[44] = t8;
+    $[45] = value;
+    $[46] = t20;
   } else {
-    t20 = $[45];
+    t20 = $[46];
   }
   return t20;
 }

package/dist/SelectSearch.js

@@ -1,18 +1,19 @@
 import { c as _c } from "react/compiler-runtime";
-import { useState } from 'react';
 import { Combobox } from '@base-ui/react/combobox';
 import clsx from 'clsx';
 import { ChevronDown, Search } from 'lucide-react';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Icon } from "./Icon.js";
 import { MENU_LABEL } from "./menu/parts.js";
 import { renderPositioner } from './popup-layer.js';
 import { RowContent } from "./select-row.js";
 import { isGroup, rowClassName, triggerClassName } from './select-shared.js';
+import { useOverlayScrollbars } from "./useOverlayScrollbars.js";
 /* The `Select` with a search field on top of its options, for lists too long to scan. A combobox of Base UI brings the filtering and the keyboard. */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function SelectSearch(t0) {
-  const $ = _c(67);
+  const $ = _c(70);
   const {
     value,
     onValueChange,
@@ -81,6 +82,8 @@ export function SelectSearch(t0) {
     t8 = $[12];
   }
   const searchLabel = t8;
+  const [list, setList] = useState(null);
+  const scrollbars = useOverlayScrollbars(list);
   let t9;
   if ($[13] !== byValue || $[14] !== value) {
     t9 = itemValue => {
@@ -260,7 +263,8 @@ export function SelectSearch(t0) {
   let t25;
   if ($[49] !== groups || $[50] !== renderRow) {
     t25 = /*#__PURE__*/_jsx(Combobox.List, {
-      className: "min-h-0 overflow-auto",
+      ref: setList,
+      className: "min-h-0 overflow-auto pr-1",
       children: groups ? group_1 => /*#__PURE__*/_jsxs(Combobox.Group, {
         items: group_1.items,
         children: [/*#__PURE__*/_jsx(Combobox.GroupLabel, {
@@ -278,39 +282,51 @@ export function SelectSearch(t0) {
     t25 = $[51];
   }
   let t26;
-  if ($[52] !== t22 || $[53] !== t24 || $[54] !== t25) {
-    t26 = /*#__PURE__*/_jsxs(Combobox.Popup, {
-      className: "menu-popup flex max-h-96 flex-col",
-      children: [t22, t24, t25]
+  if ($[52] !== scrollbars || $[53] !== t25) {
+    t26 = /*#__PURE__*/_jsxs("div", {
+      className: "relative -mr-1 flex min-h-0 flex-col",
+      children: [t25, scrollbars]
     });
-    $[52] = t22;
-    $[53] = t24;
-    $[54] = t25;
-    $[55] = t26;
+    $[52] = scrollbars;
+    $[53] = t25;
+    $[54] = t26;
   } else {
-    t26 = $[55];
+    t26 = $[54];
   }
   let t27;
-  if ($[56] !== align || $[57] !== t26) {
-    t27 = /*#__PURE__*/_jsx(Combobox.Portal, {
+  if ($[55] !== t22 || $[56] !== t24 || $[57] !== t26) {
+    t27 = /*#__PURE__*/_jsxs(Combobox.Popup, {
+      className: "menu-popup flex max-h-96 flex-col",
+      children: [t22, t24, t26]
+    });
+    $[55] = t22;
+    $[56] = t24;
+    $[57] = t26;
+    $[58] = t27;
+  } else {
+    t27 = $[58];
+  }
+  let t28;
+  if ($[59] !== align || $[60] !== t27) {
+    t28 = /*#__PURE__*/_jsx(Combobox.Portal, {
       children: /*#__PURE__*/_jsx(Combobox.Positioner, {
         className: "popup-positioner",
         render: renderPositioner,
         side: "bottom",
         align: align,
         sideOffset: 6,
-        children: t26
+        children: t27
       })
     });
-    $[56] = align;
-    $[57] = t26;
-    $[58] = t27;
+    $[59] = align;
+    $[60] = t27;
+    $[61] = t28;
   } else {
-    t27 = $[58];
+    t28 = $[61];
   }
-  let t28;
-  if ($[59] !== comboboxItems || $[60] !== disabled || $[61] !== t10 || $[62] !== t11 || $[63] !== t20 || $[64] !== t27 || $[65] !== value) {
-    t28 = /*#__PURE__*/_jsxs(Combobox.Root, {
+  let t29;
+  if ($[62] !== comboboxItems || $[63] !== disabled || $[64] !== t10 || $[65] !== t11 || $[66] !== t20 || $[67] !== t28 || $[68] !== value) {
+    t29 = /*#__PURE__*/_jsxs(Combobox.Root, {
       items: comboboxItems,
       value: value,
       disabled: disabled,
@@ -319,20 +335,20 @@ export function SelectSearch(t0) {
       onValueChange: t11,
       onInputValueChange: setQuery,
       onOpenChange: t12,
-      children: [t20, t27]
+      children: [t20, t28]
     });
-    $[59] = comboboxItems;
-    $[60] = disabled;
-    $[61] = t10;
-    $[62] = t11;
-    $[63] = t20;
-    $[64] = t27;
-    $[65] = value;
-    $[66] = t28;
+    $[62] = comboboxItems;
+    $[63] = disabled;
+    $[64] = t10;
+    $[65] = t11;
+    $[66] = t20;
+    $[67] = t28;
+    $[68] = value;
+    $[69] = t29;
   } else {
-    t28 = $[66];
+    t29 = $[69];
   }
-  return t28;
+  return t29;
 }
 function _temp5(item_1) {
   return item_1.value;

package/dist/ShortcutHints.js

@@ -2,8 +2,8 @@ import { c as _c } from "react/compiler-runtime";
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { isApplePlatform } from './platform.js';
-import { formatShortcut } from './shortcut.js';
 import { ModifierHold, placeHint, shortcutHintTargets } from './shortcut-hints.js';
+import { formatShortcut } from './shortcut.js';
 /* Whether a person can see the button now: on screen, not faded out, and not under a dialog or another node. */
 import { jsx as _jsx } from "react/jsx-runtime";
 const isSeen = (element, rect) => {

package/dist/Slider.js

@@ -1,7 +1,7 @@
 import { c as _c } from "react/compiler-runtime";
-import { useId } from 'react';
-import clsx from 'clsx';
 import { Slider as BaseSlider } from '@base-ui/react/slider';
+import clsx from 'clsx';
+import { useId } from 'react';
 import { formatFixed } from './format/number.js';
 import { placesOf } from './step-places.js';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/dist/SlidingColumn.js

@@ -1,6 +1,6 @@
 import { c as _c } from "react/compiler-runtime";
-import { useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
+import { useEffect, useRef, useState } from 'react';
 import { ColumnResizeHandle } from "./ColumnResizeHandle.js";
 import { mergeRefs } from './merge-refs.js';
 import { useColumnResize } from './useColumnResize.js';