@gearbox-protocol/ui-kit 4.0.0-next.9 → 4.0.1

package/dist/esm/components/select/select.js

@@ -1,18 +1,13 @@
 import { jsxs as c, jsx as t } from "react/jsx-runtime";
+import { faCaretDown as m, faCaretUp as g, faCheck as h } from "@fortawesome/free-solid-svg-icons";
 import * as e from "@radix-ui/react-select";
-import { cva as g } from "class-variance-authority";
-import * as l from "react";
-import { faCaretDown as m, faCaretUp as b, faCheck as y } from "@fortawesome/free-solid-svg-icons";
-import { FaIcon as i } from "../icons/fa-icon.js";
-import "@gearbox-protocol/sdk";
+import { cva as b } from "class-variance-authority";
+import * as i from "react";
+import { FaIcon as l } from "../icons/fa-icon.js";
 import { cn as s } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
-import { Z_INDEX as h } from "../../utils/z-index.js";
-const x = (a) => /* @__PURE__ */ t(e.Root, { ...a });
-x.displayName = "Select";
-const G = e.Group, O = e.Value, N = g(
+import "@gearbox-protocol/sdk/onchain";
+import { Z_INDEX as x } from "../../utils/z-index.js";
+const B = e.Root, T = e.Value, w = b(
   "group flex w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 bg-[rgb(40,40,40)] text-foreground cursor-pointer",
   {
     variants: {
@@ -32,16 +27,16 @@ const G = e.Group, O = e.Value, N = g(
       variant: "default"
     }
   }
-), w = l.forwardRef(({ className: a, children: o, size: r, variant: d, ...n }, u) => /* @__PURE__ */ c(
+), y = i.forwardRef(({ className: r, children: o, size: a, variant: d, ...n }, u) => /* @__PURE__ */ c(
   e.Trigger,
   {
     ref: u,
-    className: s(N({ size: r, variant: d, className: a })),
+    className: s(w({ size: a, variant: d, className: r })),
     ...n,
     children: [
       o,
       /* @__PURE__ */ t(e.Icon, { asChild: !0, children: /* @__PURE__ */ t(
-        i,
+        l,
         {
           icon: m,
           className: "size-4 opacity-50 transition-transform duration-200 group-data-[state=open]:rotate-180"
@@ -50,44 +45,44 @@ const G = e.Group, O = e.Value, N = g(
     ]
   }
 ));
-w.displayName = e.Trigger.displayName;
-const p = l.forwardRef(({ className: a, ...o }, r) => /* @__PURE__ */ t(
+y.displayName = e.Trigger.displayName;
+const p = i.forwardRef(({ className: r, ...o }, a) => /* @__PURE__ */ t(
   e.ScrollUpButton,
   {
-    ref: r,
+    ref: a,
     className: s(
       "flex cursor-default items-center justify-center py-1",
-      a
+      r
     ),
     ...o,
-    children: /* @__PURE__ */ t(i, { icon: b, className: "size-4" })
+    children: /* @__PURE__ */ t(l, { icon: g, className: "size-4" })
   }
 ));
 p.displayName = e.ScrollUpButton.displayName;
-const f = l.forwardRef(({ className: a, ...o }, r) => /* @__PURE__ */ t(
+const f = i.forwardRef(({ className: r, ...o }, a) => /* @__PURE__ */ t(
   e.ScrollDownButton,
   {
-    ref: r,
+    ref: a,
     className: s(
       "flex cursor-default items-center justify-center py-1",
-      a
+      r
     ),
     ...o,
-    children: /* @__PURE__ */ t(i, { icon: m, className: "size-4" })
+    children: /* @__PURE__ */ t(l, { icon: m, className: "size-4" })
   }
 ));
 f.displayName = e.ScrollDownButton.displayName;
-const S = l.forwardRef(({ className: a, children: o, position: r = "popper", ...d }, n) => /* @__PURE__ */ t(e.Portal, { children: /* @__PURE__ */ c(
+const N = i.forwardRef(({ className: r, children: o, position: a = "popper", ...d }, n) => /* @__PURE__ */ t(e.Portal, { children: /* @__PURE__ */ c(
   e.Content,
   {
     ref: n,
     className: s(
-      h.DROPDOWN,
+      x.DROPDOWN,
       "relative max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      r === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-      a
+      a === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+      r
     ),
-    position: r,
+    position: a,
     ...d,
     children: [
       /* @__PURE__ */ t(p, {}),
@@ -96,7 +91,7 @@ const S = l.forwardRef(({ className: a, children: o, position: r = "popper", ...
         {
           className: s(
             "p-1",
-            r === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+            a === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
           ),
           children: o
         }
@@ -105,51 +100,27 @@ const S = l.forwardRef(({ className: a, children: o, position: r = "popper", ...
     ]
   }
 ) }));
-S.displayName = e.Content.displayName;
-const v = l.forwardRef(({ className: a, ...o }, r) => /* @__PURE__ */ t(
-  e.Label,
-  {
-    ref: r,
-    className: s("px-2 py-1.5 text-sm font-semibold", a),
-    ...o
-  }
-));
-v.displayName = e.Label.displayName;
-const R = l.forwardRef(({ className: a, children: o, ...r }, d) => /* @__PURE__ */ c(
+N.displayName = e.Content.displayName;
+const v = i.forwardRef(({ className: r, children: o, ...a }, d) => /* @__PURE__ */ c(
   e.Item,
   {
     ref: d,
     className: s(
       "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none hover:bg-secondary focus:bg-secondary data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none data-[disabled]:opacity-50 bg-transparent text-foreground border-[rgb(100,100,100)] cursor-pointer",
-      a
+      r
     ),
-    ...r,
+    ...a,
     children: [
-      /* @__PURE__ */ t("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ t(e.ItemIndicator, { children: /* @__PURE__ */ t(i, { icon: y, className: "size-4" }) }) }),
+      /* @__PURE__ */ t("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ t(e.ItemIndicator, { children: /* @__PURE__ */ t(l, { icon: h, className: "size-4" }) }) }),
       /* @__PURE__ */ t(e.ItemText, { children: o })
     ]
   }
 ));
-R.displayName = e.Item.displayName;
-const I = l.forwardRef(({ className: a, ...o }, r) => /* @__PURE__ */ t(
-  e.Separator,
-  {
-    ref: r,
-    className: s("-mx-1 my-1 h-px bg-muted", a),
-    ...o
-  }
-));
-I.displayName = e.Separator.displayName;
+v.displayName = e.Item.displayName;
 export {
-  x as Select,
-  S as SelectContent,
-  G as SelectGroup,
-  R as SelectItem,
-  v as SelectLabel,
-  f as SelectScrollDownButton,
-  p as SelectScrollUpButton,
-  I as SelectSeparator,
-  w as SelectTrigger,
-  O as SelectValue,
-  N as selectTriggerVariants
+  B as Select,
+  N as SelectContent,
+  v as SelectItem,
+  y as SelectTrigger,
+  T as SelectValue
 };

package/dist/esm/components/separate-line/separate-line.js

@@ -1,10 +1,7 @@
 import { jsx as m } from "react/jsx-runtime";
 import * as p from "react";
-import "@gearbox-protocol/sdk";
 import { cn as d } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
+import "@gearbox-protocol/sdk/onchain";
 import "../../utils/z-index.js";
 const s = p.forwardRef(
   ({ outOfBound: r = 0, margin: e = 10, left: t = 0, thickness: o = 1, className: i }, a) => /* @__PURE__ */ m(

package/dist/esm/components/short-string/short-string.js

@@ -1,23 +1,20 @@
-import { jsx as r } from "react/jsx-runtime";
-import { SimpleTooltip as f } from "../tooltip/simple-tooltip.js";
+import { jsx as t } from "react/jsx-runtime";
+import { SimpleTooltip as m } from "../tooltip/simple-tooltip.js";
 import "../tooltip/tooltip.js";
-import "react";
-import "@gearbox-protocol/sdk";
 import { cn as s } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import { isLongString as u, shortenString as S } from "../../utils/shorten-string.js";
-import "luxon";
+import "@gearbox-protocol/sdk/onchain";
+import { shortenString as u } from "../../utils/shorten-string.js";
 import "../../utils/z-index.js";
-function y({
+import { isLongString as S } from "../../utils/internal/is-long-string.js";
+function g({
   children: o,
-  maxLength: t,
-  showTooltip: m = !0,
+  maxLength: r,
+  showTooltip: f = !0,
   className: i
 }) {
-  const n = (p, e) => e === "text-overflow" ? /* @__PURE__ */ r("span", { className: s("inline-block max-w-full truncate", i), children: p }) : /* @__PURE__ */ r("span", { className: i, children: S(p, e) });
-  return typeof o == "string" && t !== void 0 ? m && (t === "text-overflow" || u(o, t)) ? /* @__PURE__ */ r(f, { title: n(o, t), children: o }) : n(o, t) : o;
+  const n = (e, p) => p === "text-overflow" ? /* @__PURE__ */ t("span", { className: s("inline-block max-w-full truncate", i), children: e }) : /* @__PURE__ */ t("span", { className: i, children: u(e, p) });
+  return typeof o == "string" && r !== void 0 ? f && (r === "text-overflow" || S(o, r)) ? /* @__PURE__ */ t(m, { title: n(o, r), children: o }) : n(o, r) : o;
 }
 export {
-  y as ShortString
+  g as ShortString
 };

package/dist/esm/components/simple-accordion/simple-accordion.js

@@ -1,17 +1,13 @@
 import { jsxs as m, jsx as o } from "react/jsx-runtime";
 import { IconExpand as N } from "@gearbox-protocol/static";
 import { AccordionTrigger as y, AccordionItem as S, AccordionContent as b, Accordion as p } from "../accordion/accordion.js";
-import "react";
-import "@gearbox-protocol/sdk";
 import { cn as a } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
+import "@gearbox-protocol/sdk/onchain";
 import "../../utils/z-index.js";
 const h = "flex-wrap text-left bg-transparent border-0 [&[data-state=open]>[data-accordion-icon]]:rotate-180";
 function u({
-  value: i,
-  title: n,
+  value: n,
+  title: i,
   description: e,
   className: c,
   hideIcon: r = !1,
@@ -30,7 +26,7 @@ function u({
         g?.(!f);
       },
       children: [
-        n,
+        i,
         !r && /* @__PURE__ */ o(
           "span",
           {
@@ -45,7 +41,7 @@ function u({
   return /* @__PURE__ */ m(
     S,
     {
-      value: i,
+      value: n,
       className: a(d && "border-b-0", c),
       children: [
         !t && s,
@@ -57,20 +53,20 @@ function u({
 }
 u.displayName = "SimpleAccordionItem";
 function x({
-  children: i,
-  className: n,
+  children: n,
+  className: i,
   type: e = "single",
   collapsible: c = !0,
   defaultValue: r
 }) {
-  const t = a("m-0 list-none p-0", n);
+  const t = a("m-0 list-none p-0", i);
   return e === "multiple" ? /* @__PURE__ */ o(
     p,
     {
       type: "multiple",
       defaultValue: Array.isArray(r) ? r : r ? [r] : void 0,
       className: t,
-      children: i
+      children: n
     }
   ) : /* @__PURE__ */ o(
     p,
@@ -79,7 +75,7 @@ function x({
       collapsible: c,
       defaultValue: typeof r == "string" ? r : r?.[0],
       className: t,
-      children: i
+      children: n
     }
   );
 }

package/dist/esm/components/simple-dropdown/simple-dropdown-menu-item.js

@@ -1,26 +1,17 @@
 import { jsx as t } from "react/jsx-runtime";
 import * as p from "react";
 import "../dropdown-menu/dropdown-menu.js";
-import "../dropdown-menu/dropdown-menu-checkbox-item.js";
 import "../dropdown-menu/dropdown-menu-content.js";
-import { DropdownMenuItem as i } from "../dropdown-menu/dropdown-menu-item.js";
+import { DropdownMenuItem as e } from "../dropdown-menu/dropdown-menu-item.js";
 import "../dropdown-menu/dropdown-menu-label.js";
-import "../dropdown-menu/dropdown-menu-radio-item.js";
-import "../dropdown-menu/dropdown-menu-separator.js";
-import "../dropdown-menu/dropdown-menu-shortcut.js";
-import "../dropdown-menu/dropdown-menu-sub-content.js";
-import "../dropdown-menu/dropdown-menu-sub-trigger.js";
-import "@gearbox-protocol/sdk";
-import { cn as e } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
+import { cn as n } from "../../utils/cn.js";
+import "@gearbox-protocol/sdk/onchain";
 import "../../utils/z-index.js";
-const n = "cursor-pointer gap-0 rounded-lg px-3 py-3 text-sm font-normal leading-[17px] text-foreground hover:bg-gray-80 focus:bg-gray-80", a = p.forwardRef(({ className: o, ...r }, m) => /* @__PURE__ */ t(
-  i,
+const i = "cursor-pointer gap-0 rounded-lg px-3 py-3 text-sm font-normal leading-[17px] text-foreground hover:bg-gray-80 focus:bg-gray-80", a = p.forwardRef(({ className: o, ...r }, m) => /* @__PURE__ */ t(
+  e,
   {
     ref: m,
-    className: e(n, o),
+    className: n(i, o),
     ...r
   }
 ));

package/dist/esm/components/simple-dropdown/simple-dropdown.js

@@ -1,16 +1,13 @@
-import { jsxs as R, jsx as r } from "react/jsx-runtime";
+import { jsxs as R, jsx as a } from "react/jsx-runtime";
 import * as t from "@radix-ui/react-dropdown-menu";
 import { useRef as j } from "react";
-import "@gearbox-protocol/sdk";
 import { cn as l } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
+import "@gearbox-protocol/sdk/onchain";
 import { Z_INDEX as y } from "../../utils/z-index.js";
 function E({
-  children: p,
-  title: f,
-  asChild: a = !1,
+  children: f,
+  title: p,
+  asChild: r = !1,
   placement: m = "bottom",
   align: u = "start",
   sideOffset: c = 4,
@@ -51,19 +48,19 @@ function E({
       } : e,
       modal: w,
       children: [
-        /* @__PURE__ */ r(
+        /* @__PURE__ */ a(
           t.Trigger,
           {
             ref: s,
-            asChild: a,
-            className: a ? void 0 : l(
+            asChild: r,
+            className: r ? void 0 : l(
               "inline-flex appearance-none border-0 bg-transparent p-0 text-inherit font-inherit cursor-pointer",
               v
             ),
-            children: f
+            children: p
           }
         ),
-        /* @__PURE__ */ r(t.Portal, { children: /* @__PURE__ */ r(
+        /* @__PURE__ */ a(t.Portal, { children: /* @__PURE__ */ a(
           t.Content,
           {
             side: m,
@@ -77,7 +74,7 @@ function E({
             },
             onPointerDownOutside: o ? x : void 0,
             onEscapeKeyDown: o ? () => e?.(!1) : void 0,
-            children: p
+            children: f
           }
         ) })
       ]

package/dist/esm/components/skeleton/index.js

@@ -1,7 +1,6 @@
-import { Skeleton as t, skeletonVariants as r } from "./skeleton.js";
-import { SkeletonStack as n } from "./skeleton-stack.js";
+import { Skeleton as t } from "./skeleton.js";
+import { SkeletonStack as k } from "./skeleton-stack.js";
 export {
   t as Skeleton,
-  n as SkeletonStack,
-  r as skeletonVariants
+  k as SkeletonStack
 };

package/dist/esm/components/skeleton/skeleton-stack.js

@@ -1,34 +1,31 @@
 import { jsx as m } from "react/jsx-runtime";
 import { useMemo as c } from "react";
-import "@gearbox-protocol/sdk";
 import { cn as r } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
+import "@gearbox-protocol/sdk/onchain";
 import "../../utils/z-index.js";
-import { Skeleton as i } from "./skeleton.js";
-const n = {
+import { Skeleton as n } from "./skeleton.js";
+const l = {
   sm: "space-y-2",
   md: "space-y-3",
   lg: "space-y-4"
 };
-function w({
+function g({
   lines: o = 5,
-  className: t,
-  gap: e = "md"
+  className: e,
+  gap: t = "md"
 }) {
-  const p = c(
+  const s = c(
     () => Array.from({ length: o }, () => crypto.randomUUID()),
     [o]
   );
-  return /* @__PURE__ */ m("div", { className: r(n[e], t), children: p.map((s, a) => /* @__PURE__ */ m(
-    i,
+  return /* @__PURE__ */ m("div", { className: r(l[t], e), children: s.map((a, p) => /* @__PURE__ */ m(
+    n,
     {
-      className: r("h-4 w-full", a === o - 1 && "w-3/4")
+      className: r("h-4 w-full", p === o - 1 && "w-3/4")
     },
-    s
+    a
   )) });
 }
 export {
-  w as SkeletonStack
+  g as SkeletonStack
 };

package/dist/esm/components/skeleton/skeleton.js

@@ -1,13 +1,9 @@
-import { jsx as a, Fragment as p } from "react/jsx-runtime";
-import { cva as f } from "class-variance-authority";
-import "react";
-import "@gearbox-protocol/sdk";
-import { cn as w } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
+import { jsx as o, Fragment as f } from "react/jsx-runtime";
+import { cva as w } from "class-variance-authority";
+import { cn as p } from "../../utils/cn.js";
+import "@gearbox-protocol/sdk/onchain";
 import "../../utils/z-index.js";
-const c = f("animate-pulse rounded-md bg-muted", {
+const c = w("animate-pulse rounded-md bg-muted", {
   variants: {
     variant: {
       default: "",
@@ -51,33 +47,33 @@ const c = f("animate-pulse rounded-md bg-muted", {
     height: "md"
   }
 });
-function j({
+function N({
   className: s,
   variant: l,
   speed: n,
   width: t,
   height: e,
-  loading: m = !0,
+  loading: d = !0,
   children: i,
-  style: d,
+  style: m,
   ...h
 }) {
-  if (!m && i !== void 0)
-    return /* @__PURE__ */ a(p, { children: i });
-  const r = typeof t == "number", o = typeof e == "number", u = {
-    ...d,
+  if (!d && i !== void 0)
+    return /* @__PURE__ */ o(f, { children: i });
+  const r = typeof t == "number", a = typeof e == "number", u = {
+    ...m,
     ...r && { width: `${t}px` },
-    ...o && { height: `${e}px` }
+    ...a && { height: `${e}px` }
   };
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ o(
     "div",
     {
-      className: w(
+      className: p(
         c({
           variant: l,
           speed: n,
           width: r ? void 0 : t ?? "full",
-          height: o ? void 0 : e ?? "md",
+          height: a ? void 0 : e ?? "md",
           className: s
         })
       ),
@@ -87,6 +83,5 @@ function j({
   );
 }
 export {
-  j as Skeleton,
-  c as skeletonVariants
+  N as Skeleton
 };

package/dist/esm/components/slider/constants.js

@@ -0,0 +1,6 @@
+const e = {
+  interval: "slider-interval"
+};
+export {
+  e as SliderTest
+};

package/dist/esm/components/slider/index.js

@@ -1,28 +1,4 @@
-import { Slider as o } from "./slider.js";
-import { SliderProvider as i, useSliderContext as a } from "./slider-context.js";
-import { SliderMark as m } from "./slider-mark.js";
-import { SliderTrack as d } from "./slider-track.js";
-import { makeMarkerPoints as n, validateMarkerPoints as p } from "./slider-utils.js";
-import { THEME_COLOR_MAP as M, THUMB_HALF as S, THUMB_SIZE as v, getIntervalBounds as T, getThumbInBoundsOffset as k, resolveColor as u } from "./types.js";
-import { decimalsToStep as c, findClosestPoint as B, formatWithDecimals as C, formatWithoutDecimals as H, splitInterval as I, validateMinMax as _ } from "../../utils/math.js";
+import { SliderTest as o } from "./constants.js";
 export {
-  o as Slider,
-  m as SliderMark,
-  i as SliderProvider,
-  d as SliderTrack,
-  M as THEME_COLOR_MAP,
-  S as THUMB_HALF,
-  v as THUMB_SIZE,
-  c as decimalsToStep,
-  B as findClosestPoint,
-  C as formatWithDecimals,
-  H as formatWithoutDecimals,
-  T as getIntervalBounds,
-  k as getThumbInBoundsOffset,
-  n as makeMarkerPoints,
-  u as resolveColor,
-  I as splitInterval,
-  a as useSliderContext,
-  p as validateMarkerPoints,
-  _ as validateMinMax
+  o as SliderTest
 };

package/dist/esm/components/slider/slider-math.js

@@ -0,0 +1,36 @@
+function M(t, n, o) {
+  const s = t / n, a = Math.round(s * o);
+  return Math.round(a / o * n);
+}
+function l(t, n, o, s) {
+  const a = /* @__PURE__ */ new Set([t]);
+  for (let e = 1; n >= t + o * e; e += 1)
+    a.add(t + o * e);
+  return a.add(n), s?.forEach((e) => {
+    a.add(e);
+  }), [...a].sort((e, c) => e - c);
+}
+function f(t, n, o) {
+  return Math.min(Math.max(t, n), o);
+}
+function b(t, n, o) {
+  const s = t, a = M(s, o, 1), e = Math.abs(a - s), c = n.reduce(
+    (i, r) => {
+      const m = r !== void 0 ? Math.abs(r - s) : Number.MAX_SAFE_INTEGER;
+      return i[m] = r || 0, i;
+    },
+    []
+  ), u = {
+    [e]: a,
+    ...c
+  }, d = Math.min(
+    ...Object.keys(u).map((i) => Number(i))
+  );
+  return { minPoint: u[d], minDistance: d };
+}
+export {
+  b as findClosestPoint,
+  M as formatWithoutDecimals,
+  l as splitInterval,
+  f as validateMinMax
+};

package/dist/esm/components/slider/slider-track.js

@@ -1,40 +1,42 @@
 import { jsx as s, Fragment as m } from "react/jsx-runtime";
-import { useMemo as f } from "react";
-import { useSliderContext as d } from "./slider-context.js";
-import { getIntervalBounds as v, resolveColor as h } from "./types.js";
-function k() {
-  const r = d();
+import { useMemo as d } from "react";
+import { SliderTest as f } from "./constants.js";
+import { useSliderContext as v } from "./slider-context.js";
+import { getIntervalBounds as p, resolveColor as h } from "./types.js";
+function C() {
+  const r = v();
   if (!r) return null;
-  const { colorIntervals: t, min: n, max: o } = r;
+  const { colorIntervals: t, min: o, max: n } = r;
   if (!t?.length) return null;
-  const e = o - n;
-  return e <= 0 ? null : /* @__PURE__ */ s(p, { intervals: t, range: e, min: n });
+  const e = n - o;
+  return e <= 0 ? null : /* @__PURE__ */ s(x, { intervals: t, range: e, min: o });
 }
-function p({
+function x({
   intervals: r,
   range: t,
-  min: n
+  min: o
 }) {
-  const o = f(
+  const n = d(
     () => [...r || []].reverse(),
     [r]
   );
-  return /* @__PURE__ */ s(m, { children: o.map((e, u) => {
-    const { start: l, end: c } = v(e), i = (l - n) / t * 100, a = (c - l) / t * 100;
+  return /* @__PURE__ */ s(m, { children: n.map((e, c) => {
+    const { start: l, end: i } = p(e), a = (l - o) / t * 100, u = (i - l) / t * 100;
     return /* @__PURE__ */ s(
       "div",
       {
+        "data-testid": f.interval,
         className: "absolute h-full",
         style: {
-          left: `${i}%`,
-          width: `${a}%`,
+          left: `${a}%`,
+          width: `${u}%`,
           backgroundColor: h(e.color) ?? "hsl(var(--success))"
         }
       },
-      `interval-${u}-${l}-${c}`
+      `interval-${c}-${l}-${i}`
     );
   }) });
 }
 export {
-  k as SliderTrack
+  C as SliderTrack
 };