@gearbox-protocol/ui-kit 4.0.0-next.6 → 4.0.0-next.60

package/dist/esm/components/pool-points-indicator/pool-points-indicator.js

@@ -1,9 +1,6 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import "react";
-import "@gearbox-protocol/sdk";
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import "@gearbox-protocol/sdk/onchain";
 import { cn as o } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
 const a = {
@@ -13,49 +10,49 @@ const a = {
   blue: "border-blue-600 bg-blue-600",
   yellow: "border-yellow-600 bg-yellow-600"
 };
-function f({
-  size: r = 24,
+function p({
+  size: e = 24,
   color: n = "primary",
   className: s,
   children: d
 }) {
-  const t = r + 8, l = a[n];
+  const l = e + 8, t = a[n];
   return /* @__PURE__ */ i("div", { className: o("relative inline-block", s), children: [
-    /* @__PURE__ */ e(
+    /* @__PURE__ */ r(
       "div",
       {
         className: o(
           "absolute flex items-center justify-center rounded-full border-2",
-          l.split(" ")[0]
+          t.split(" ")[0]
           // border color
         ),
         style: {
           top: -4,
           left: -4,
-          width: t,
-          height: t
+          width: l,
+          height: l
         }
       }
     ),
-    /* @__PURE__ */ e(
+    /* @__PURE__ */ r(
       "div",
       {
         className: o(
           "absolute flex items-center justify-center rounded-full",
-          l.split(" ")[1]
+          t.split(" ")[1]
         ),
         style: {
-          top: -r / 4,
-          right: -r / 4,
-          width: r * 7 / 12,
-          height: r * 7 / 12,
+          top: -e / 4,
+          right: -e / 4,
+          width: e * 7 / 12,
+          height: e * 7 / 12,
           zIndex: 1
         },
         children: /* @__PURE__ */ i(
           "svg",
           {
-            width: r / 3,
-            height: r / 3,
+            width: e / 3,
+            height: e / 3,
             viewBox: "0 0 8 8",
             fill: "none",
             xmlns: "http://www.w3.org/2000/svg",
@@ -63,8 +60,8 @@ function f({
             role: "img",
             "aria-label": "Pool Points Indicator",
             children: [
-              /* @__PURE__ */ e("title", { children: "Pool Points" }),
-              /* @__PURE__ */ e("path", { d: "M4.5 0L1 4.5h2.5L3 8l3.5-4.5H4L4.5 0z", fill: "currentColor" })
+              /* @__PURE__ */ r("title", { children: "Pool Points" }),
+              /* @__PURE__ */ r("path", { d: "M4.5 0L1 4.5h2.5L3 8l3.5-4.5H4L4.5 0z", fill: "currentColor" })
             ]
           }
         )
@@ -74,5 +71,5 @@ function f({
   ] });
 }
 export {
-  f as PoolPointsIndicator
+  p as PoolPointsIndicator
 };

package/dist/esm/components/radio-group/index.js

@@ -0,0 +1,5 @@
+import { RadioGroup as p, RadioGroupItem as a } from "./radio-group.js";
+export {
+  p as RadioGroup,
+  a as RadioGroupItem
+};

package/dist/esm/components/radio-group/radio-group.js

@@ -0,0 +1,55 @@
+import { jsx as i } from "react/jsx-runtime";
+import * as r from "@radix-ui/react-radio-group";
+import { cva as n } from "class-variance-authority";
+import * as s from "react";
+import "@gearbox-protocol/sdk/onchain";
+import { cn as t } from "../../utils/cn.js";
+import "luxon";
+import "../../utils/z-index.js";
+const l = n("", {
+  variants: {
+    size: {
+      md: "h-4 w-4",
+      lg: "h-5 w-5"
+    },
+    color: {
+      primary: "border-primary",
+      secondary: "border-gray-50 data-[state=checked]:border-primary"
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    color: "primary"
+  }
+}), c = s.forwardRef(({ className: e, ...o }, a) => /* @__PURE__ */ i(r.Root, { ref: a, className: t(e), ...o }));
+c.displayName = r.Root.displayName;
+const p = s.forwardRef(({ className: e, color: o, size: a, ...d }, m) => /* @__PURE__ */ i(
+  r.Item,
+  {
+    ref: m,
+    className: t(
+      "group relative shrink-0 rounded-full border shadow cursor-pointer transition-colors flex items-center justify-center",
+      "data-[state=checked]:border-primary",
+      "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+      l({ size: a, color: o }),
+      "disabled:cursor-not-allowed disabled:bg-gray-20 disabled:border-gray-50",
+      e
+    ),
+    ...d,
+    children: /* @__PURE__ */ i(
+      r.Indicator,
+      {
+        className: t(
+          "pointer-events-none flex items-center justify-center",
+          "size-2 rounded-full bg-primary",
+          "group-disabled:bg-gray-50"
+        )
+      }
+    )
+  }
+));
+p.displayName = r.Item.displayName;
+export {
+  c as RadioGroup,
+  p as RadioGroupItem
+};

package/dist/esm/components/rounded-image/rounded-image.js

@@ -1,67 +1,69 @@
-import { jsx as I } from "react/jsx-runtime";
-import * as L from "react";
-import { useState as s, useRef as j, useEffect as E } from "react";
-import "@gearbox-protocol/sdk";
-import { cn as k } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import { getStatic as w } from "../../utils/static.js";
+import { jsx as E } from "react/jsx-runtime";
+import * as k from "react";
+import { useState as d, useRef as l, useEffect as w } from "react";
+import "@gearbox-protocol/sdk/onchain";
+import { cn as N } from "../../utils/cn.js";
+import { getStatic as T } from "../../utils/static.js";
 import "luxon";
 import "../../utils/z-index.js";
-const d = w("/tokens/default.svg"), i = /* @__PURE__ */ new Map();
-function c(e) {
-  return i.get(e) ? d : e;
+const u = T("/tokens/default.svg"), m = /* @__PURE__ */ new Map();
+function f(t) {
+  return m.get(t) ? u : t;
 }
-const N = L.forwardRef(
+const U = k.forwardRef(
   ({
-    className: e,
-    size: o,
-    rounded: f = !0,
-    style: l,
-    src: r,
-    defaultIcon: m = d,
-    fit: u = "cover",
-    ...g
-  }, p) => {
-    const [h, a] = s(void 0), [v, n] = s(!1), t = j(!1);
-    E(() => {
-      c(r), a(void 0), n(!1), t.current = !1;
-    }, [r]);
-    const y = (b) => {
-      t.current || (t.current = !0, i.set(b.currentTarget.src, !0), a(m));
-    }, R = () => {
+    className: t,
+    size: c,
+    rounded: g = !0,
+    style: p,
+    src: o,
+    defaultIcon: h = u,
+    fit: R = "cover",
+    ...y
+  }, r) => {
+    const [v, s] = d(void 0), [b, n] = d(!1), a = l(!1), i = l(null), I = (e) => {
+      i.current = e, typeof r == "function" ? r(e) : r && (r.current = e), e?.complete && e.naturalWidth > 0 && n(!0);
+    };
+    w(() => {
+      f(o), s(void 0), a.current = !1;
+      const e = i.current;
+      n(!!e?.complete && e.naturalWidth > 0);
+    }, [o]);
+    const L = (e) => {
+      a.current || (a.current = !0, m.set(e.currentTarget.src, !0), s(h));
+    }, j = () => {
       n(!0);
     };
     return (
       // biome-ignore lint/performance/noImgElement: Universal component that works outside Next.js
-      /* @__PURE__ */ I(
+      /* @__PURE__ */ E(
         "img",
         {
-          ref: p,
-          src: h || c(r),
+          ref: I,
+          src: v || f(o),
           alt: "",
-          className: k(
-            u === "cover" ? "object-cover" : "object-contain object-center",
-            f && "rounded-full",
-            !v && "bg-gray-90 dark:bg-gray-110 rounded-full",
-            e
+          className: N(
+            R === "cover" ? "object-cover" : "object-contain object-center",
+            g && "rounded-full",
+            !b && "bg-gray-90 dark:bg-gray-110 rounded-full",
+            t
           ),
           style: {
-            width: o,
-            height: o,
-            ...l
+            width: c,
+            height: c,
+            ...p
           },
           loading: "lazy",
           decoding: "async",
-          onError: y,
-          onLoad: R,
-          ...g
+          onError: L,
+          onLoad: j,
+          ...y
         }
       )
     );
   }
 );
-N.displayName = "RoundedImage";
+U.displayName = "RoundedImage";
 export {
-  N as RoundedImage
+  U as RoundedImage
 };

package/dist/esm/components/rwa-styles/index.js

@@ -1,5 +1,4 @@
-const e = "bg-transparent text-secondary-foreground relative border-0 isolate before:content-[''] before:absolute before:z-[-1] before:p-px before:-inset-px before:rounded-[inherit] before:bg-[linear-gradient(135deg,rgb(246,44,161)_0%,rgb(255,127,35)_100%)] before:[mask:linear-gradient(rgb(255,255,255)_0px,rgb(255,255,255)_0px)_content-box_exclude,_linear-gradient(rgb(255,255,255)_0px,rgb(255,255,255)_0px)] before:[mask-composite:exclude] before:[-webkit-mask-composite:xor]", r = "[&_.grid.grid-cols-subgrid.col-span-full:has([data-rwa-pool-marker='true'])>*]:before:bg-[#7fc8ea]/40";
+const e = "bg-transparent text-secondary-foreground relative border-0 isolate before:content-[''] before:absolute before:z-[-1] before:p-px before:-inset-px before:rounded-[inherit] before:bg-[linear-gradient(135deg,rgb(246,44,161)_0%,rgb(255,127,35)_100%)] before:[mask:linear-gradient(rgb(255,255,255)_0px,rgb(255,255,255)_0px)_content-box_exclude,_linear-gradient(rgb(255,255,255)_0px,rgb(255,255,255)_0px)] before:[mask-composite:exclude] before:[-webkit-mask-composite:xor]";
 export {
-  e as RWA_GRADIENT_BORDER_CLASS,
-  r as RWA_POOL_ROW_HOVER_WRAPPER_CLASS
+  e as RWA_GRADIENT_BORDER_CLASS
 };

package/dist/esm/components/sdk-status-pill/constants.js

@@ -0,0 +1,8 @@
+class s {
+  static root = "sdk-status-pill-root";
+  static dot = "sdk-status-pill-dot";
+  static tooltip = "sdk-status-pill-tooltip";
+}
+export {
+  s as SdkStatusPillTest
+};

package/dist/esm/components/sdk-status-pill/index.js

@@ -0,0 +1,8 @@
+import { SdkStatusPillTest as r } from "./constants.js";
+import { sdkStatusDotVariant as s } from "./sdk-status.js";
+import { SdkStatusPill as e } from "./sdk-status-pill.js";
+export {
+  e as SdkStatusPill,
+  r as SdkStatusPillTest,
+  s as sdkStatusDotVariant
+};

package/dist/esm/components/sdk-status-pill/sdk-status-pill.js

@@ -0,0 +1,63 @@
+import { jsx as t } from "react/jsx-runtime";
+import { SimpleTooltip as a } from "../tooltip/simple-tooltip.js";
+import "../tooltip/tooltip.js";
+import { useIntlTyped as c } from "../typed-intl/index.js";
+import "react";
+import { useMediaQuery as m } from "../../hooks/use-media-query.js";
+import "@gearbox-protocol/sdk/onchain";
+import { cn as d } from "../../utils/cn.js";
+import "luxon";
+import "../../utils/z-index.js";
+import { SdkStatusPillTest as e } from "./constants.js";
+import { sdkStatusDotVariant as l } from "./sdk-status.js";
+const p = "(hover: none)", u = {
+  loading: "components.sdkStatus.connecting",
+  ready: "components.sdkStatus.connected",
+  error: "components.sdkStatus.disconnected"
+};
+function M({
+  status: o
+}) {
+  const { formatMessage: s } = c(), i = !m(p), r = s({ messageId: u[o] }), n = (
+    // `<output>` rather than a span with role="status": same implicit live
+    // region, and the status is announced without the dot being focusable.
+    //
+    // The box is `size-6`, not the dot's 6px: a 6px hover/tap target is far
+    // under the 24px WCAG 2.5.8 minimum and genuinely hard to hit, while the
+    // dot itself has to stay small to keep the footer quiet.
+    //
+    // `-m-1.5` keeps that out of the layout in both axes, so the footer row
+    // keeps its height and the links do not shift.
+    /* @__PURE__ */ t(
+      "output",
+      {
+        className: "-m-1.5 flex size-6 cursor-pointer items-center justify-center",
+        "data-testid": e.root,
+        "aria-label": r,
+        children: /* @__PURE__ */ t(
+          "div",
+          {
+            className: d(
+              "size-1.5 shrink-0 rounded-full",
+              l(o) === "success" ? "bg-success" : "bg-muted-foreground",
+              o === "loading" && "animate-pulse"
+            ),
+            "data-testid": e.dot
+          }
+        )
+      }
+    )
+  );
+  return /* @__PURE__ */ t(
+    a,
+    {
+      title: n,
+      trigger: i ? "hover" : "click",
+      placement: "top",
+      children: /* @__PURE__ */ t("span", { className: "text-xs", "data-testid": e.tooltip, children: r })
+    }
+  );
+}
+export {
+  M as SdkStatusPill
+};

package/dist/esm/components/sdk-status-pill/sdk-status.js

@@ -0,0 +1,6 @@
+function a(t) {
+  return t === "ready" ? "success" : "default";
+}
+export {
+  a as sdkStatusDotVariant
+};

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

@@ -1,14 +1,12 @@
 import { jsx as e, jsxs as g } from "react/jsx-runtime";
-import { IconPending as C } from "@gearbox-protocol/static";
+import { faMagnifyingGlass as C, faArrowRight as I } from "@fortawesome/free-solid-svg-icons";
+import { IconPending as S } from "@gearbox-protocol/static";
 import { cva as x } from "class-variance-authority";
 import * as r from "react";
-import { faMagnifyingGlass as I, faArrowRight as S } from "@fortawesome/free-solid-svg-icons";
 import { FaIcon as p } from "../icons/fa-icon.js";
 import { Input as V } from "../input/input.js";
-import "@gearbox-protocol/sdk";
+import "@gearbox-protocol/sdk/onchain";
 import { cn as f } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
 const D = x("relative w-full transition-all duration-200", {
@@ -110,7 +108,7 @@ const D = x("relative w-full transition-all duration-200", {
               s && /* @__PURE__ */ e(
                 p,
                 {
-                  icon: I,
+                  icon: C,
                   className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none size-[18px]"
                 }
               ),
@@ -138,14 +136,14 @@ const D = x("relative w-full transition-all duration-200", {
                   children: N || /* @__PURE__ */ e(
                     p,
                     {
-                      icon: S,
+                      icon: I,
                       className: "text-primary size-[18px]"
                     }
                   )
                 }
               ),
               d && /* @__PURE__ */ e("div", { className: "absolute right-2 top-1/2 transform -translate-y-1/2 w-9 h-9 flex items-center justify-center", children: /* @__PURE__ */ e(
-                C,
+                S,
                 {
                   size: 18,
                   className: "text-muted-foreground animate-spin"

package/dist/esm/components/segmented-control/segmented-control.js

@@ -2,10 +2,8 @@ import { jsxs as C, jsx as f } from "react/jsx-runtime";
 import { cva as R } from "class-variance-authority";
 import * as N from "react";
 import { useRef as x, useState as I, useCallback as v, useLayoutEffect as y } from "react";
-import "@gearbox-protocol/sdk";
+import "@gearbox-protocol/sdk/onchain";
 import { cn as g } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
 const S = R(
@@ -27,7 +25,7 @@ const S = R(
     }
   },
   defaultVariants: { size: "md" }
-}), $ = N.forwardRef(({ className: b, name: m, items: n, size: l = "md", ...u }, t) => {
+}), $ = N.forwardRef(({ className: b, name: u, items: n, size: l = "md", ...m }, t) => {
   const r = n.findIndex((e) => e.checked), s = r < 0 ? 0 : r, o = n.length, d = x(null), p = x([]), [h, w] = I({ left: 0, width: 0 }), i = v(() => {
     const e = p.current[s];
     if (!e || o === 0) {
@@ -59,13 +57,13 @@ const S = R(
     {
       ref: z,
       className: g(S({ size: l }), b),
-      ...u,
+      ...m,
       children: [
         n.map((e, a) => /* @__PURE__ */ f(
           k,
           {
             ...e,
-            name: m,
+            name: u,
             ref: (c) => {
               p.current[a] = c;
             }
@@ -93,8 +91,8 @@ const S = R(
   );
 });
 $.displayName = "SegmentedControl";
-const k = N.forwardRef(function({ name: m, switchLabel: n, label: l, onChange: u, onSelect: t, ...r }, s) {
-  const o = u ?? (t ? (d) => {
+const k = N.forwardRef(function({ name: u, switchLabel: n, label: l, onChange: m, onSelect: t, ...r }, s) {
+  const o = m ?? (t ? (d) => {
     d.preventDefault(), t();
   } : void 0);
   return /* @__PURE__ */ C(
@@ -112,7 +110,7 @@ const k = N.forwardRef(function({ name: m, switchLabel: n, label: l, onChange: u
           "input",
           {
             type: "radio",
-            name: m,
+            name: u,
             className: "absolute h-0 w-0 cursor-pointer opacity-0",
             ...r,
             onChange: o

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

@@ -1,18 +1,16 @@
 import { jsxs as c, jsx as t } from "react/jsx-runtime";
+import { faCaretDown as m, faCaretUp as g, faCheck as b } from "@fortawesome/free-solid-svg-icons";
 import * as e from "@radix-ui/react-select";
-import { cva as g } from "class-variance-authority";
+import { cva as y } 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 "@gearbox-protocol/sdk/onchain";
 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(
+const L = e.Group, P = e.Value, N = y(
   "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: {
@@ -60,7 +58,7 @@ const p = l.forwardRef(({ className: a, ...o }, r) => /* @__PURE__ */ t(
       a
     ),
     ...o,
-    children: /* @__PURE__ */ t(i, { icon: b, className: "size-4" })
+    children: /* @__PURE__ */ t(i, { icon: g, className: "size-4" })
   }
 ));
 p.displayName = e.ScrollUpButton.displayName;
@@ -125,7 +123,7 @@ const R = l.forwardRef(({ className: a, children: o, ...r }, d) => /* @__PURE__
     ),
     ...r,
     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(i, { icon: b, className: "size-4" }) }) }),
       /* @__PURE__ */ t(e.ItemText, { children: o })
     ]
   }
@@ -143,13 +141,13 @@ I.displayName = e.Separator.displayName;
 export {
   x as Select,
   S as SelectContent,
-  G as SelectGroup,
+  L as SelectGroup,
   R as SelectItem,
   v as SelectLabel,
   f as SelectScrollDownButton,
   p as SelectScrollUpButton,
   I as SelectSeparator,
   w as SelectTrigger,
-  O as SelectValue,
+  P as SelectValue,
   N as selectTriggerVariants
 };

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

@@ -1,9 +1,7 @@
 import { jsx as m } from "react/jsx-runtime";
 import * as p from "react";
-import "@gearbox-protocol/sdk";
+import "@gearbox-protocol/sdk/onchain";
 import { cn as d } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
 const s = p.forwardRef(

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 { SimpleTooltip as m } from "../tooltip/simple-tooltip.js";
 import "../tooltip/tooltip.js";
-import "react";
-import "@gearbox-protocol/sdk";
+import "@gearbox-protocol/sdk/onchain";
 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 "../../utils/z-index.js";
-function y({
+function g({
   children: o,
   maxLength: t,
-  showTooltip: m = !0,
+  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__ */ r("span", { className: s("inline-block max-w-full truncate", i), children: e }) : /* @__PURE__ */ r("span", { className: i, children: S(e, p) });
+  return typeof o == "string" && t !== void 0 ? f && (t === "text-overflow" || u(o, t)) ? /* @__PURE__ */ r(m, { title: n(o, t), children: o }) : n(o, t) : o;
 }
 export {
-  y as ShortString
+  g as ShortString
 };

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

@@ -1,17 +1,14 @@
 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 "@gearbox-protocol/sdk/onchain";
 import { cn as a } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 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 +27,7 @@ function u({
         g?.(!f);
       },
       children: [
-        n,
+        i,
         !r && /* @__PURE__ */ o(
           "span",
           {
@@ -45,7 +42,7 @@ function u({
   return /* @__PURE__ */ m(
     S,
     {
-      value: i,
+      value: n,
       className: a(d && "border-b-0", c),
       children: [
         !t && s,
@@ -57,20 +54,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 +76,7 @@ function x({
       collapsible: c,
       defaultValue: typeof r == "string" ? r : r?.[0],
       className: t,
-      children: i
+      children: n
     }
   );
 }