@rafal.lemieszewski/tide-ui 0.87.7 → 0.87.8

package/dist/es/components/product/activity-log.js

@@ -1,16 +1,16 @@
-import { jsx as a, jsxs as A, Fragment as b } from "react/jsx-runtime";
+import { jsx as i, jsxs as A, Fragment as b } from "react/jsx-runtime";
 import * as r from "react";
 import { cn as n } from "../../lib/utils.js";
 import { Collapsible as L, CollapsibleTrigger as C, CollapsibleContent as R } from "../fundamental/collapsible.js";
 import { Icon as D } from "../fundamental/icon.js";
 const I = /* @__PURE__ */ r.forwardRef(
   ({
-    className: i,
+    className: a,
     children: e,
     separatorThreshold: t,
     "aria-label": o = "Activity log",
     ...d
-  }, y) => {
+  }, u) => {
     const v = r.useMemo(() => {
       if (!t) return e;
       const s = r.Children.toArray(e), c = [];
@@ -19,24 +19,24 @@ const I = /* @__PURE__ */ r.forwardRef(
         c.push(f);
         const p = s[m + 1];
         if (p && r.isValidElement(f) && r.isValidElement(p) && f.type === w && p.type === w) {
-          const u = f.props.timestamp, g = p.props.timestamp;
-          if (u && g) {
-            const x = new Date(u), l = new Date(g);
-            Math.abs(l.getTime() - x.getTime()) >= t && c.push(/* @__PURE__ */ a(N, {}, `separator-${m}`));
+          const y = f.props.timestamp, g = p.props.timestamp;
+          if (y && g) {
+            const x = new Date(y), l = new Date(g);
+            Math.abs(l.getTime() - x.getTime()) >= t && c.push(/* @__PURE__ */ i(N, {}, `separator-${m}`));
           }
         }
       }
       return c;
     }, [e, t]);
-    return /* @__PURE__ */ a(
+    return /* @__PURE__ */ i(
       "div",
       {
-        ref: y,
+        ref: u,
         role: "log",
         "aria-label": o,
         "aria-live": "polite",
         "aria-relevant": "additions",
-        className: n("flex flex-col gap-[var(--space-s)]", i),
+        className: n("flex flex-col gap-[var(--space-s)]", a),
         ...d,
         children: v
       }
@@ -46,31 +46,31 @@ const I = /* @__PURE__ */ r.forwardRef(
 I.displayName = "ActivityLog";
 const w = /* @__PURE__ */ r.forwardRef(
   ({
-    className: i,
+    className: a,
     children: e,
     collapsible: t = !1,
     defaultOpen: o,
     open: d,
-    onOpenChange: y,
+    onOpenChange: u,
     timestamp: v,
     ...s
-  }, c) => t ? /* @__PURE__ */ a(
+  }, c) => t ? /* @__PURE__ */ i(
     L,
     {
       ref: c,
       defaultOpen: o,
       open: d,
-      onOpenChange: y,
-      className: n("w-full group peer", i),
+      onOpenChange: u,
+      className: n("w-full group peer", a),
       ...s,
       children: e
     }
-  ) : /* @__PURE__ */ a("div", { ref: c, className: n("w-full", i), ...s, children: e })
+  ) : /* @__PURE__ */ i("div", { ref: c, className: n("w-full", a), ...s, children: e })
 );
 w.displayName = "ActivityLogItem";
 const N = /* @__PURE__ */ r.memo(
   /* @__PURE__ */ r.forwardRef(
-    ({ className: i, ...e }, t) => /* @__PURE__ */ a(
+    ({ className: a, ...e }, t) => /* @__PURE__ */ i(
       "div",
       {
         ref: t,
@@ -78,30 +78,30 @@ const N = /* @__PURE__ */ r.memo(
         "aria-hidden": "true",
         className: n(
           "flex items-center ml-[7.5px] peer-data-[state=open]:hidden",
-          i
+          a
         ),
         ...e,
-        children: /* @__PURE__ */ a("div", { className: "w-px h-[var(--space-l)] bg-[var(--grey-alpha-100)]" })
+        children: /* @__PURE__ */ i("div", { className: "w-px h-[var(--space-l)] bg-[var(--grey-alpha-100)]" })
       }
     )
   )
 );
 N.displayName = "ActivityLogSeparator";
 const V = /* @__PURE__ */ r.forwardRef(
-  ({ className: i, children: e, asCollapsibleTrigger: t, ...o }, d) => {
-    const { avatarOrIcon: y, description: v, chevron: s, otherChildren: c } = r.useMemo(() => {
+  ({ className: a, children: e, asCollapsibleTrigger: t, ...o }, d) => {
+    const { avatarOrIcon: u, description: v, chevron: s, otherChildren: c } = r.useMemo(() => {
       const f = r.Children.toArray(e);
-      let p = null, u = null, g = null;
+      let p = null, y = null, g = null;
       const x = [];
       return f.forEach((l) => {
         if (r.isValidElement(l)) {
           const h = l.type?.displayName;
-          h === "ActivityLogDescription" ? u = l : h === "ActivityLogChevron" ? g = l : p ? x.push(l) : p = l;
+          h === "ActivityLogDescription" ? y = l : h === "ActivityLogChevron" ? g = l : p ? x.push(l) : p = l;
         } else
           x.push(l);
       }), {
         avatarOrIcon: p,
-        description: u,
+        description: y,
         chevron: g,
         otherChildren: x
       };
@@ -111,12 +111,12 @@ const V = /* @__PURE__ */ r.forwardRef(
         ref: t ? void 0 : d,
         className: n(
           "flex gap-[var(--space-s)] items-start w-full [&>*:first-child]:translate-y-[1px]",
-          t && "cursor-pointer rounded-s focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2",
-          i
+          t && "cursor-pointer rounded-[var(--border-radius-s)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2",
+          a
         ),
         ...o,
         children: [
-          y,
+          u,
           v && s ? (
             // Group description and chevron together
             /* @__PURE__ */ A("div", { className: "inline-flex gap-[var(--space-xs)] items-center min-w-0 flex-1", children: [
@@ -131,31 +131,31 @@ const V = /* @__PURE__ */ r.forwardRef(
         ]
       }
     );
-    return t ? /* @__PURE__ */ a(C, { asChild: !0, hideIcon: !0, children: m }) : m;
+    return t ? /* @__PURE__ */ i(C, { asChild: !0, hideIcon: !0, children: m }) : m;
   }
 );
 V.displayName = "ActivityLogHeader";
-const k = /* @__PURE__ */ r.forwardRef(({ className: i, children: e, ...t }, o) => /* @__PURE__ */ a(
+const k = /* @__PURE__ */ r.forwardRef(({ className: a, children: e, ...t }, o) => /* @__PURE__ */ i(
   R,
   {
     ref: o,
     className: n(
       "mt-[var(--space-s)] pl-[var(--space-s)] ml-[7.5px] border-l border-l-[var(--grey-alpha-100)] max-w-[320px]",
       "[.group:last-child_&]:border-l-0",
-      i
+      a
     ),
     ...t,
     children: e
   }
 ));
 k.displayName = "ActivityLogContent";
-const E = /* @__PURE__ */ r.forwardRef(({ className: i, children: e, ...t }, o) => /* @__PURE__ */ a(
+const E = /* @__PURE__ */ r.forwardRef(({ className: a, children: e, ...t }, o) => /* @__PURE__ */ i(
   "div",
   {
     ref: o,
     className: n(
       "inline-flex flex-wrap gap-x-[var(--space-xs)] gap-y-0 items-center min-w-0 [&]:text-body-sm text-[var(--color-text-primary)]",
-      i
+      a
     ),
     ...t,
     children: e
@@ -163,14 +163,14 @@ const E = /* @__PURE__ */ r.forwardRef(({ className: i, children: e, ...t }, o)
 ));
 E.displayName = "ActivityLogDescription";
 const M = /* @__PURE__ */ r.forwardRef(
-  ({ className: i, children: e, dateTime: t, ...o }, d) => /* @__PURE__ */ a(
+  ({ className: a, children: e, dateTime: t, ...o }, d) => /* @__PURE__ */ i(
     "time",
     {
       ref: d,
       dateTime: t,
       className: n(
         "[&]:text-body-xsm text-[var(--color-text-tertiary)] shrink-0 whitespace-nowrap",
-        i
+        a
       ),
       ...o,
       children: e
@@ -180,14 +180,14 @@ const M = /* @__PURE__ */ r.forwardRef(
 M.displayName = "ActivityLogTime";
 const T = /* @__PURE__ */ r.memo(
   /* @__PURE__ */ r.forwardRef(
-    ({ className: i, ...e }, t) => /* @__PURE__ */ a(
+    ({ className: a, ...e }, t) => /* @__PURE__ */ i(
       "div",
       {
         ref: t,
         "aria-hidden": "true",
-        className: n("shrink-0", i),
+        className: n("shrink-0", a),
         ...e,
-        children: /* @__PURE__ */ a(
+        children: /* @__PURE__ */ i(
           D,
           {
             name: "chevron-down",
@@ -203,16 +203,16 @@ const T = /* @__PURE__ */ r.memo(
 T.displayName = "ActivityLogChevron";
 const j = /* @__PURE__ */ r.memo(
   /* @__PURE__ */ r.forwardRef(
-    ({ className: i, children: e, ...t }, o) => /* @__PURE__ */ a(
+    ({ className: a, children: e, ...t }, o) => /* @__PURE__ */ i(
       "div",
       {
         ref: o,
         className: n(
-          "inline-flex items-center gap-[var(--space-xs)] px-[4px] py-[2px] bg-[var(--color-background-neutral-subtlest)] border border-[var(--color-border-primary-medium)] rounded-xs shrink",
-          i
+          "inline-flex items-center gap-[var(--space-xs)] px-[4px] py-[2px] bg-[var(--color-background-neutral-subtlest)] border border-[var(--color-border-primary-medium)] rounded-[var(--border-radius-xs)] shrink",
+          a
         ),
         ...t,
-        children: /* @__PURE__ */ a("span", { className: "[&]:text-body-medium-xsm text-[var(--color-text-primary)] whitespace-nowrap", children: e })
+        children: /* @__PURE__ */ i("span", { className: "[&]:text-body-medium-xsm text-[var(--color-text-primary)] whitespace-nowrap", children: e })
       }
     )
   )

package/dist/es/components/product/app-frame.js

@@ -215,7 +215,7 @@ function Ie({ navigationData: a, user: o, teams: u, onNavigate: n, navigationMod
                   "button",
                   {
                     onClick: () => h(!0),
-                    className: "text-body-md flex h-8 w-full cursor-pointer items-center rounded-m border border-[var(--color-border-primary-subtle)] bg-[var(--color-surface-primary)] px-3 py-1 pr-20 pl-8 text-left text-[var(--color-text-tertiary)] transition-colors hover:border-[var(--color-border-primary-medium)] hover:!bg-[var(--color-background-neutral-subtlest-hovered)] focus:border-[var(--color-border-brand-bold)] focus:ring-2 focus:ring-[var(--color-border-brand-bold)]/20 focus:ring-offset-0 focus:outline-none active:border-[var(--color-border-primary-medium)]",
+                    className: "text-body-md flex h-8 w-full cursor-pointer items-center rounded-[var(--border-radius-m)] border border-[var(--color-border-primary-subtle)] bg-[var(--color-surface-primary)] px-3 py-1 pr-20 pl-8 text-left text-[var(--color-text-tertiary)] transition-colors hover:border-[var(--color-border-primary-medium)] hover:!bg-[var(--color-background-neutral-subtlest-hovered)] focus:border-[var(--color-border-brand-bold)] focus:ring-2 focus:ring-[var(--color-border-brand-bold)]/20 focus:ring-offset-0 focus:outline-none active:border-[var(--color-border-primary-medium)]",
                     children: "Search"
                   }
                 ),
@@ -434,12 +434,12 @@ function Ie({ navigationData: a, user: o, teams: u, onNavigate: n, navigationMod
           ]
         }
       ),
-      /* @__PURE__ */ e(pe, { className: "sticky bottom-0 z-10 border-t border-[var(--color-border-primary-subtle)] bg-[var(--color-surface-primary)] group-data-[collapsible=icon]:px-2 group-data-[collapsible=icon]:py-2", children: /* @__PURE__ */ e("div", { className: "group/user-menu rounded-m border border-[var(--color-border-primary-subtle)] transition-colors hover:border-[var(--color-border-primary-medium)] group-data-[collapsible=icon]:rounded-none group-data-[collapsible=icon]:border-none", children: /* @__PURE__ */ l(X, { children: [
+      /* @__PURE__ */ e(pe, { className: "sticky bottom-0 z-10 border-t border-[var(--color-border-primary-subtle)] bg-[var(--color-surface-primary)] group-data-[collapsible=icon]:px-2 group-data-[collapsible=icon]:py-2", children: /* @__PURE__ */ e("div", { className: "group/user-menu rounded-[var(--border-radius-m)] border border-[var(--color-border-primary-subtle)] transition-colors hover:border-[var(--color-border-primary-medium)] group-data-[collapsible=icon]:rounded-none group-data-[collapsible=icon]:border-none", children: /* @__PURE__ */ l(X, { children: [
         /* @__PURE__ */ e(J, { asChild: !0, children: /* @__PURE__ */ l(
           fe,
           {
             variant: "ghost",
-            className: "h-auto min-h-[56px] w-full justify-start rounded-m px-3 py-2 hover:!bg-[var(--color-background-neutral-subtlest-hovered)] group-data-[collapsible=icon]:h-8 group-data-[collapsible=icon]:min-h-0 group-data-[collapsible=icon]:w-8 group-data-[collapsible=icon]:p-0",
+            className: "h-auto min-h-[56px] w-full justify-start rounded-[var(--border-radius-m)] px-3 py-2 hover:!bg-[var(--color-background-neutral-subtlest-hovered)] group-data-[collapsible=icon]:h-8 group-data-[collapsible=icon]:min-h-0 group-data-[collapsible=icon]:w-8 group-data-[collapsible=icon]:p-0",
             children: [
               /* @__PURE__ */ l("div", { className: "flex w-full items-center gap-3 group-data-[collapsible=icon]:hidden", children: [
                 /* @__PURE__ */ l("div", { className: "relative flex-shrink-0", children: [

package/dist/es/components/product/attributes-list.js

@@ -6,24 +6,24 @@ import { Icon as N } from "../fundamental/icon.js";
 import { ExternalLink as I } from "lucide-react";
 const h = e.createContext("s"), P = /* @__PURE__ */ e.forwardRef(
   ({
-    className: o,
-    children: t,
-    size: r = "s",
-    showHiddenLabel: a = "More details",
+    className: a,
+    children: r,
+    size: t = "s",
+    showHiddenLabel: o = "More details",
     hideLabel: d = "Less details",
     defaultShowHidden: f = !1,
     labelWidth: p,
     ...u
   }, l) => {
-    const [s, b] = e.useState(f), y = e.useMemo(() => e.Children.toArray(t).some((m) => e.isValidElement(m) && (m.type?.displayName || "") === "AttributesItem" ? m.props.hidden : !1), [t]), g = e.useMemo(() => e.Children.map(t, (m) => e.isValidElement(m) && (m.type?.displayName || "") === "AttributesItem" && m.props.hidden && !s ? null : m), [t, s]), c = typeof p == "number" ? `${p}px` : p;
-    return /* @__PURE__ */ n(h.Provider, { value: r, children: /* @__PURE__ */ x(
+    const [s, b] = e.useState(f), y = e.useMemo(() => e.Children.toArray(r).some((m) => e.isValidElement(m) && (m.type?.displayName || "") === "AttributesItem" ? m.props.hidden : !1), [r]), g = e.useMemo(() => e.Children.map(r, (m) => e.isValidElement(m) && (m.type?.displayName || "") === "AttributesItem" && m.props.hidden && !s ? null : m), [r, s]), c = typeof p == "number" ? `${p}px` : p;
+    return /* @__PURE__ */ n(h.Provider, { value: t, children: /* @__PURE__ */ x(
       "div",
       {
         ref: l,
         className: i(
           "grid",
-          r === "s" ? "gap-y-[12px]" : "gap-y-[8px]",
-          o
+          t === "s" ? "gap-y-[12px]" : "gap-y-[8px]",
+          a
         ),
         style: {
           gridTemplateColumns: `${c || "auto"} 1fr`,
@@ -39,13 +39,13 @@ const h = e.createContext("s"), P = /* @__PURE__ */ e.forwardRef(
               onClick: () => b(!s),
               "aria-expanded": s,
               className: i(
-                "flex items-center text-[var(--color-text-brand-bold)] hover:text-[var(--color-text-brand-bold-hovered)] cursor-pointer mt-[var(--space-s)] bg-transparent border-none p-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 rounded-s",
-                r === "s" ? "gap-[var(--space-s)]" : "gap-[var(--space-xs)]",
-                r === "s" ? "[&]:text-body-medium-sm" : "[&]:text-body-medium-xsm"
+                "flex items-center text-[var(--color-text-brand-bold)] hover:text-[var(--color-text-brand-bold-hovered)] cursor-pointer mt-[var(--space-s)] bg-transparent border-none p-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 rounded-[var(--border-radius-s)]",
+                t === "s" ? "gap-[var(--space-s)]" : "gap-[var(--space-xs)]",
+                t === "s" ? "[&]:text-body-medium-sm" : "[&]:text-body-medium-xsm"
               ),
               style: { gridColumn: "1 / -1" },
               children: [
-                s ? d : a,
+                s ? d : o,
                 /* @__PURE__ */ n(
                   N,
                   {
@@ -69,18 +69,18 @@ const h = e.createContext("s"), P = /* @__PURE__ */ e.forwardRef(
 P.displayName = "AttributesList";
 const H = /* @__PURE__ */ e.memo(
   /* @__PURE__ */ e.forwardRef(
-    ({ className: o, ...t }, r) => /* @__PURE__ */ n(
+    ({ className: a, ...r }, t) => /* @__PURE__ */ n(
       "div",
       {
-        ref: r,
+        ref: t,
         role: "separator",
         "aria-hidden": "true",
         className: i(
           "h-px bg-[var(--color-border-primary-subtle)] my-[var(--space-s)]",
-          o
+          a
         ),
         style: { gridColumn: "1 / -1" },
-        ...t
+        ...r
       }
     )
   )
@@ -88,15 +88,15 @@ const H = /* @__PURE__ */ e.memo(
 H.displayName = "AttributesSeparator";
 const M = /* @__PURE__ */ e.forwardRef(
   ({
-    className: o,
-    label: t,
-    children: r,
-    showHiddenLabel: a = "More details",
+    className: a,
+    label: r,
+    children: t,
+    showHiddenLabel: o = "More details",
     hideLabel: d = "Less details",
     defaultShowHidden: f = !1,
     ...p
   }, u) => {
-    const l = e.useContext(h), [s, b] = e.useState(f), y = e.useMemo(() => ((m) => e.Children.toArray(m).some((v) => !!(e.isValidElement(v) && (v.type?.displayName || "") === "AttributesItem" && v.props.hidden)))(r), [r]), g = e.useMemo(() => e.Children.map(r, (c) => e.isValidElement(c) && (c.type?.displayName || "") === "AttributesItem" && c.props.hidden && !s ? null : c), [r, s]);
+    const l = e.useContext(h), [s, b] = e.useState(f), y = e.useMemo(() => ((m) => e.Children.toArray(m).some((v) => !!(e.isValidElement(v) && (v.type?.displayName || "") === "AttributesItem" && v.props.hidden)))(t), [t]), g = e.useMemo(() => e.Children.map(t, (c) => e.isValidElement(c) && (c.type?.displayName || "") === "AttributesItem" && c.props.hidden && !s ? null : c), [t, s]);
     return /* @__PURE__ */ x(
       "div",
       {
@@ -104,7 +104,7 @@ const M = /* @__PURE__ */ e.forwardRef(
         className: i(
           "grid",
           l === "s" ? "gap-y-[12px]" : "gap-y-[8px]",
-          o
+          a
         ),
         style: {
           gridColumn: "1 / -1",
@@ -113,7 +113,7 @@ const M = /* @__PURE__ */ e.forwardRef(
         },
         ...p,
         children: [
-          t && /* @__PURE__ */ n(
+          r && /* @__PURE__ */ n(
             "h3",
             {
               className: i(
@@ -122,7 +122,7 @@ const M = /* @__PURE__ */ e.forwardRef(
                 l === "s" ? "[&]:text-body-medium-sm" : "[&]:text-body-medium-xsm"
               ),
               style: { gridColumn: "1 / -1" },
-              children: t
+              children: r
             }
           ),
           g,
@@ -132,13 +132,13 @@ const M = /* @__PURE__ */ e.forwardRef(
               onClick: () => b(!s),
               "aria-expanded": s,
               className: i(
-                "flex items-center text-[var(--color-text-brand-bold)] hover:text-[var(--color-text-brand-bold-hovered)] cursor-pointer mt-[var(--space-s)] bg-transparent border-none p-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 rounded-s",
+                "flex items-center text-[var(--color-text-brand-bold)] hover:text-[var(--color-text-brand-bold-hovered)] cursor-pointer mt-[var(--space-s)] bg-transparent border-none p-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 rounded-[var(--border-radius-s)]",
                 l === "s" ? "gap-[var(--space-s)]" : "gap-[var(--space-xs)]",
                 l === "s" ? "[&]:text-body-medium-sm" : "[&]:text-body-medium-xsm"
               ),
               style: { gridColumn: "1 / -1" },
               children: [
-                s ? d : a,
+                s ? d : o,
                 /* @__PURE__ */ n(
                   N,
                   {
@@ -162,23 +162,23 @@ const M = /* @__PURE__ */ e.forwardRef(
 M.displayName = "AttributesGroup";
 const S = /* @__PURE__ */ e.forwardRef(
   ({
-    className: o,
-    children: t,
-    collapsible: r = !1,
-    defaultOpen: a,
+    className: a,
+    children: r,
+    collapsible: t = !1,
+    defaultOpen: o,
     open: d,
     onOpenChange: f,
     hidden: p,
     style: u,
     ...l
-  }, s) => r ? /* @__PURE__ */ n(
+  }, s) => t ? /* @__PURE__ */ n(
     A,
     {
       ref: s,
-      defaultOpen: a,
+      defaultOpen: o,
       open: d,
       onOpenChange: f,
-      className: i("w-full group grid", o),
+      className: i("w-full group grid", a),
       style: {
         gridColumn: "1 / -1",
         gridTemplateColumns: "subgrid",
@@ -187,26 +187,26 @@ const S = /* @__PURE__ */ e.forwardRef(
       },
       "data-hidden": p,
       ...l,
-      children: t
+      children: r
     }
   ) : /* @__PURE__ */ n(
     "div",
     {
       ref: s,
-      className: i(o),
+      className: i(a),
       style: { display: "contents", ...u },
       "data-hidden": p,
       ...l,
-      children: t
+      children: r
     }
   )
 );
 S.displayName = "AttributesItem";
 const V = /* @__PURE__ */ e.forwardRef(
-  ({ className: o, children: t, asCollapsibleTrigger: r, externalLink: a, style: d, ...f }, p) => {
+  ({ className: a, children: r, asCollapsibleTrigger: t, externalLink: o, style: d, ...f }, p) => {
     const u = e.useContext(h), l = e.useMemo(() => {
-      if (!a) return t;
-      const b = e.Children.toArray(t);
+      if (!o) return r;
+      const b = e.Children.toArray(r);
       if (b.length >= 2) {
         const y = b[0], g = b[1], c = b.slice(2);
         return [
@@ -216,17 +216,17 @@ const V = /* @__PURE__ */ e.forwardRef(
             /* @__PURE__ */ x(
               "a",
               {
-                href: a.href,
+                href: o.href,
                 className: i(
-                  "text-[var(--color-text-brand-bold)] hover:text-[var(--color-text-brand-bold-hovered)] inline-flex items-center no-underline shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 rounded-s",
+                  "text-[var(--color-text-brand-bold)] hover:text-[var(--color-text-brand-bold-hovered)] inline-flex items-center no-underline shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 rounded-[var(--border-radius-s)]",
                   u === "s" ? "gap-[var(--space-s)]" : "gap-[var(--space-xs)]",
                   u === "s" ? "[&]:text-body-sm" : "[&]:text-body-xsm"
                 ),
                 target: "_blank",
                 rel: "noopener noreferrer",
-                "aria-label": `${a.label} (opens in new tab)`,
+                "aria-label": `${o.label} (opens in new tab)`,
                 children: [
-                  a.label,
+                  o.label,
                   /* @__PURE__ */ n(N, { name: I, size: "s", "aria-hidden": "true" })
                 ]
               }
@@ -235,15 +235,15 @@ const V = /* @__PURE__ */ e.forwardRef(
           ...c
         ];
       }
-      return t;
-    }, [t, a, u]), s = /* @__PURE__ */ n(
+      return r;
+    }, [r, o, u]), s = /* @__PURE__ */ n(
       "div",
       {
-        ref: r ? void 0 : p,
+        ref: t ? void 0 : p,
         className: i(
           "grid items-center",
-          r && "cursor-pointer hover:bg-[var(--color-surface-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 transition-colors rounded-s px-[var(--space-s)] py-[var(--space-xs)] -mx-[var(--space-s)]",
-          o
+          t && "cursor-pointer hover:bg-[var(--color-surface-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 transition-colors rounded-[var(--border-radius-s)] px-[var(--space-s)] py-[var(--space-xs)] -mx-[var(--space-s)]",
+          a
         ),
         style: {
           gridColumn: "1 / -1",
@@ -255,25 +255,25 @@ const V = /* @__PURE__ */ e.forwardRef(
         children: l
       }
     );
-    return r ? /* @__PURE__ */ n(w, { asChild: !0, hideIcon: !0, children: s }) : s;
+    return t ? /* @__PURE__ */ n(w, { asChild: !0, hideIcon: !0, children: s }) : s;
   }
 );
 V.displayName = "AttributesRow";
 const k = /* @__PURE__ */ e.memo(
   /* @__PURE__ */ e.forwardRef(
-    ({ className: o, children: t, ...r }, a) => {
+    ({ className: a, children: r, ...t }, o) => {
       const d = e.useContext(h);
       return /* @__PURE__ */ n(
         "div",
         {
-          ref: a,
+          ref: o,
           className: i(
             "text-[var(--color-text-secondary)] [[data-hidden='true']_&]:text-[var(--color-text-tertiary)] shrink-0",
             d === "s" ? "[&]:text-body-medium-sm" : "[&]:text-body-medium-xsm",
-            o
+            a
           ),
-          ...r,
-          children: t
+          ...t,
+          children: r
         }
       );
     }
@@ -282,49 +282,49 @@ const k = /* @__PURE__ */ e.memo(
 k.displayName = "AttributesLabel";
 const z = /* @__PURE__ */ e.memo(
   /* @__PURE__ */ e.forwardRef(
-    ({ className: o, children: t, ...r }, a) => {
+    ({ className: a, children: r, ...t }, o) => {
       const d = e.useContext(h);
       return /* @__PURE__ */ n(
         "div",
         {
-          ref: a,
+          ref: o,
           className: i(
             "text-[var(--color-text-primary)] [[data-hidden='true']_&]:text-[var(--color-text-tertiary)] flex items-center",
             d === "s" ? "gap-[var(--space-s)]" : "gap-[var(--space-xs)]",
             d === "s" ? "[&]:text-body-sm" : "[&]:text-body-xsm",
-            o
+            a
           ),
-          ...r,
-          children: t
+          ...t,
+          children: r
         }
       );
     }
   )
 );
 z.displayName = "AttributesValue";
-const G = /* @__PURE__ */ e.forwardRef(({ className: o, children: t, style: r, ...a }, d) => /* @__PURE__ */ n(
+const G = /* @__PURE__ */ e.forwardRef(({ className: a, children: r, style: t, ...o }, d) => /* @__PURE__ */ n(
   R,
   {
     ref: d,
     className: i(
       "pt-[var(--space-s)] pb-[var(--space-s)]",
-      o
+      a
     ),
-    style: { gridColumn: "1 / -1", ...r },
-    ...a,
-    children: t
+    style: { gridColumn: "1 / -1", ...t },
+    ...o,
+    children: r
   }
 ));
 G.displayName = "AttributesContent";
 const E = /* @__PURE__ */ e.memo(
   /* @__PURE__ */ e.forwardRef(
-    ({ className: o, ...t }, r) => /* @__PURE__ */ n(
+    ({ className: a, ...r }, t) => /* @__PURE__ */ n(
       "div",
       {
-        ref: r,
+        ref: t,
         "aria-hidden": "true",
-        className: i("shrink-0 -ml-[4px]", o),
-        ...t,
+        className: i("shrink-0 -ml-[4px]", a),
+        ...r,
         children: /* @__PURE__ */ n(
           N,
           {