chordia-ui 3.8.7 → 3.8.8

package/dist/SideDrawer.es.js

@@ -1,33 +1,645 @@
-import { jsxs as d, Fragment as p, jsx as t } from "react/jsx-runtime";
-import { useRef as v, useEffect as S } from "react";
-import { X as k } from "lucide-react";
-function B({
-  open: e,
-  onClose: n,
-  title: r,
-  subtitle: i,
-  children: o,
+import { jsxs as s, jsx as e, Fragment as S } from "react/jsx-runtime";
+import { useState as w, useRef as A, useEffect as B } from "react";
+import { Info as D, X as L } from "lucide-react";
+const o = {
+  strong: "var(--Grey-Strong, #2E3236)",
+  muted: "var(--Grey-Muted, #808183)",
+  faint: "var(--Grey-Faint, #ACADAD)",
+  border: "var(--Grey-absent, #D9D9D9)",
+  orange: "var(--rail-orange, #C98A5A)",
+  // Card surface — warm off-white the Figma frame uses. Falls back to a hex
+  // since this specific tone isn't in the existing token set.
+  surface: "#FAF9F5",
+  // Gauge ring (background semicircle)
+  gaugeTrack: "#E3E1D7"
+}, d = "var(--font-sans, 'Averta', ui-sans-serif, system-ui, sans-serif)", E = (n, t, i) => Math.max(t, Math.min(i, n)), R = (n) => {
+  const t = E(Number(n) || 0, -1, 1);
+  return t >= 0.6 ? "High" : t >= 0.15 ? "Above Average" : t <= -0.6 ? "Low" : t <= -0.15 ? "Below Average" : "Average";
+}, H = (n) => {
+  const t = Number(n);
+  return !Number.isFinite(t) || Math.abs(t) < 0.05 ? "neutral" : t > 0 ? "positive" : "negative";
+}, N = ({ text: n, children: t, maxWidth: i = 280 }) => {
+  const [r, l] = w(!1), a = A(null), [f, g] = w({ top: 0, left: 0 });
+  return n ? /* @__PURE__ */ s(
+    "div",
+    {
+      ref: a,
+      style: { position: "relative", display: "inline-flex" },
+      onMouseEnter: () => {
+        if (a.current) {
+          const c = a.current.getBoundingClientRect();
+          g({
+            top: c.bottom + 6,
+            left: c.left + c.width / 2
+          });
+        }
+        l(!0);
+      },
+      onMouseLeave: () => l(!1),
+      children: [
+        t,
+        r && /* @__PURE__ */ e(
+          "div",
+          {
+            style: {
+              position: "fixed",
+              top: f.top,
+              left: f.left,
+              transform: "translate(-50%, 0)",
+              maxWidth: i,
+              padding: "8px 12px",
+              borderRadius: 6,
+              border: "1px solid var(--Grey-absent, #D9D9D9)",
+              background: "var(--Grey-Strong, #2E3236)",
+              color: "#FFF",
+              fontFamily: d,
+              fontSize: 12,
+              fontWeight: 400,
+              lineHeight: 1.4,
+              boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+              zIndex: 9999,
+              pointerEvents: "none",
+              whiteSpace: "normal",
+              textAlign: "left"
+            },
+            children: n
+          }
+        )
+      ]
+    }
+  ) : t;
+}, _ = ({ value: n = 0, highlight: t = null }) => {
+  const p = E(Number(n) || 0, -1, 1) * (Math.PI / 2), u = 60 + 38 * Math.sin(p), m = 56 - 38 * Math.cos(p);
+  let x = null;
+  if (t != null) {
+    const b = E(Number(t) || 0, -1, 1);
+    if (b !== 0) {
+      const h = b * (Math.PI / 2), v = 60, C = 56 - 26.65, T = 60 + 26.65 * Math.sin(h), W = 56 - 26.65 * Math.cos(h), z = b > 0 ? 1 : 0;
+      x = `M ${v} ${C} A ${26.65} ${26.65} 0 0 ${z} ${T} ${W}`;
+    }
+  }
+  return (
+    // viewBox is 120×80 but the visible dial only occupies the top ~56px
+    // (half-circle centred at cy=56). `marginBottom: -24` pulls the
+    // following element up by the unused bottom band so the gauge column
+    // doesn't reserve that empty space in the flow — matches Figma's
+    // `mb-[-30px]` on the gauge wrapper and keeps the Outcome column's
+    // bottom-anchored percent block from being pushed too far down.
+    /* @__PURE__ */ s(
+      "svg",
+      {
+        width: "120",
+        height: "80",
+        viewBox: "0 0 120 80",
+        role: "img",
+        "aria-hidden": "true",
+        style: { marginBottom: -20, display: "block" },
+        children: [
+          /* @__PURE__ */ e(
+            "path",
+            {
+              d: `M ${60 - 26.65} 56 A ${26.65} ${26.65} 0 0 1 ${60 + 26.65} 56`,
+              fill: "none",
+              stroke: o.gaugeTrack,
+              strokeWidth: 28.7,
+              strokeLinecap: "butt"
+            }
+          ),
+          x && /* @__PURE__ */ e(
+            "path",
+            {
+              d: x,
+              fill: "none",
+              stroke: o.strong,
+              strokeWidth: 28.7,
+              strokeLinecap: "butt"
+            }
+          ),
+          /* @__PURE__ */ e(
+            "text",
+            {
+              x: 60,
+              y: 56 - 41 - 4,
+              textAnchor: "middle",
+              fontSize: "13",
+              fontFamily: d,
+              fill: o.orange,
+              children: "0"
+            }
+          ),
+          /* @__PURE__ */ e(
+            "text",
+            {
+              x: 60 - 41 - 9,
+              y: 56 + 5,
+              textAnchor: "middle",
+              fontSize: "14",
+              fontFamily: d,
+              fill: o.strong,
+              children: "−"
+            }
+          ),
+          /* @__PURE__ */ e(
+            "text",
+            {
+              x: 60 + 41 + 9,
+              y: 56 + 5,
+              textAnchor: "middle",
+              fontSize: "14",
+              fontFamily: d,
+              fill: o.strong,
+              children: "+"
+            }
+          ),
+          /* @__PURE__ */ e(
+            "line",
+            {
+              x1: 60,
+              y1: 56,
+              x2: u,
+              y2: m,
+              stroke: o.orange,
+              strokeWidth: 2,
+              strokeLinecap: "round"
+            }
+          ),
+          /* @__PURE__ */ e("circle", { cx: 60, cy: 56, r: 2.5, fill: o.orange })
+        ]
+      }
+    )
+  );
+}, F = ({
+  title: n,
+  value: t,
+  highlight: i,
+  centerLabel: r,
+  centerLabelColor: l,
+  sublabel: a,
+  footer: f,
+  description: g
+}) => /* @__PURE__ */ s(
+  "div",
+  {
+    style: {
+      flex: 1,
+      minWidth: 0,
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      gap: 10
+    },
+    children: [
+      /* @__PURE__ */ e(
+        "div",
+        {
+          style: {
+            minHeight: 40,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: "100%"
+          },
+          children: /* @__PURE__ */ e(
+            "span",
+            {
+              style: {
+                fontFamily: d,
+                fontSize: 14,
+                fontWeight: 400,
+                color: o.strong,
+                lineHeight: "20px",
+                textAlign: "center",
+                width: "100%"
+              },
+              children: n
+            }
+          )
+        }
+      ),
+      t == null ? (
+        // Gauge swapped for an em-dash placeholder when the API ships no
+        // numeric value for this column. Same 60px height as the gauge SVG
+        // (after its -20 negative margin) so the columns stay aligned.
+        /* @__PURE__ */ e(
+          "div",
+          {
+            style: {
+              width: 120,
+              height: 60,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              marginBottom: -20
+            },
+            children: /* @__PURE__ */ e(
+              "span",
+              {
+                style: {
+                  fontFamily: d,
+                  fontSize: 28,
+                  fontWeight: 400,
+                  color: o.muted,
+                  lineHeight: 1
+                },
+                children: "—"
+              }
+            )
+          }
+        )
+      ) : /* @__PURE__ */ e(_, { value: t, highlight: i }),
+      /* @__PURE__ */ s(
+        "div",
+        {
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: 4,
+            width: "100%"
+          },
+          children: [
+            /* @__PURE__ */ e(
+              "span",
+              {
+                style: {
+                  fontFamily: d,
+                  // Figma 1463:4261 spec: 14px Averta-Semibold, Neutral/850
+                  // (#272727) for both "Average" and "Above Average".
+                  fontSize: 14,
+                  fontWeight: 600,
+                  color: r ? l || "#272727" : o.muted,
+                  lineHeight: "normal",
+                  textAlign: "center"
+                },
+                children: r || "—"
+              }
+            ),
+            a && /* @__PURE__ */ e(
+              "span",
+              {
+                style: {
+                  fontFamily: d,
+                  fontSize: 13,
+                  fontWeight: 400,
+                  color: o.muted,
+                  lineHeight: "normal",
+                  textAlign: "center",
+                  width: "100%"
+                },
+                children: a
+              }
+            ),
+            /* @__PURE__ */ e(
+              "span",
+              {
+                style: {
+                  fontFamily: d,
+                  fontSize: 13,
+                  fontWeight: 400,
+                  color: f ? o.strong : o.muted,
+                  lineHeight: "normal",
+                  textAlign: "center",
+                  width: "100%"
+                },
+                children: f || "—"
+              }
+            ),
+            g && /* @__PURE__ */ e(
+              "span",
+              {
+                style: {
+                  fontFamily: d,
+                  fontSize: 13,
+                  fontWeight: 400,
+                  color: o.muted,
+                  lineHeight: "normal",
+                  textAlign: "center",
+                  width: "100%",
+                  marginTop: 4
+                },
+                children: g
+              }
+            )
+          ]
+        }
+      )
+    ]
+  }
+), $ = ({
+  percent: n,
+  label: t,
+  totalLabel: i = "Total",
+  description: r,
+  status: l
+}) => {
+  const a = (l == null ? void 0 : l.label) ?? t;
+  return (
+    // Top-aligned stack — pill → percent → Total / description, all hugging
+    // the top of the column with the root `gap: 16` between them. The row
+    // still uses `align-items: stretch` so the column visually fills the
+    // row height, but any leftover space falls to the BOTTOM of the column
+    // (after the description) rather than being distributed between the
+    // pill and the percent. This keeps the Outcome content tight even
+    // when the gauge columns are taller, matching the visual rhythm
+    // requested in the latest review.
+    /* @__PURE__ */ s(
+      "div",
+      {
+        style: {
+          flex: 1,
+          minWidth: 0,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "flex-start",
+          gap: 16
+        },
+        children: [
+          a && /* @__PURE__ */ e(
+            "div",
+            {
+              style: {
+                minHeight: 40,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: "100%"
+              },
+              children: /* @__PURE__ */ e(
+                "span",
+                {
+                  style: {
+                    fontFamily: d,
+                    fontSize: 14,
+                    fontWeight: 600,
+                    color: o.strong,
+                    lineHeight: "normal",
+                    whiteSpace: "nowrap"
+                  },
+                  children: a
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ s(
+            "div",
+            {
+              style: {
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                gap: 20,
+                width: "100%"
+              },
+              children: [
+                /* @__PURE__ */ e(
+                  "span",
+                  {
+                    style: {
+                      fontFamily: d,
+                      fontSize: 34,
+                      fontWeight: 400,
+                      color: o.strong,
+                      lineHeight: 1.2,
+                      textAlign: "center",
+                      whiteSpace: "nowrap"
+                    },
+                    children: n != null ? `${n}%` : "—"
+                  }
+                ),
+                /* @__PURE__ */ s(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      flexDirection: "column",
+                      alignItems: "center",
+                      gap: 4,
+                      width: "100%"
+                    },
+                    children: [
+                      i && /* @__PURE__ */ e(
+                        "span",
+                        {
+                          style: {
+                            fontFamily: d,
+                            fontSize: 14,
+                            fontWeight: 600,
+                            color: "#272727",
+                            lineHeight: "normal",
+                            textAlign: "center",
+                            whiteSpace: "nowrap"
+                          },
+                          children: i
+                        }
+                      ),
+                      r && /* @__PURE__ */ e(
+                        "span",
+                        {
+                          style: {
+                            fontFamily: d,
+                            fontSize: 13,
+                            fontWeight: 400,
+                            color: o.muted,
+                            lineHeight: "normal",
+                            textAlign: "center",
+                            width: "100%"
+                          },
+                          children: r
+                        }
+                      )
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    )
+  );
+}, k = ({ variant: n = "dashed" }) => /* @__PURE__ */ e(
+  "div",
+  {
+    "aria-hidden": "true",
+    style: {
+      width: 0,
+      alignSelf: "stretch",
+      borderLeft: `1px ${n} ${o.border}`,
+      flexShrink: 0
+    }
+  }
+), G = ({
+  title: n = "Agent Lift Analysis",
+  status: t,
+  interactionDifficulty: i,
+  agentImpact: r,
+  outcome: l,
+  showInfoIcon: a = !0,
+  onInfoClick: f,
+  // Tooltip text rendered on hover of the (i) icon next to the card
+  // title. The default explains what this section measures; hosts can
+  // override per-context if needed.
+  infoTooltip: g = "Measures the agent's contribution to the call outcome by comparing actual performance against the expected result for similar calls."
+}) => {
+  const y = Number(i == null ? void 0 : i.value) || 0, c = Number(r == null ? void 0 : r.value) || 0, p = (i == null ? void 0 : i.label) ?? R(y), u = (r == null ? void 0 : r.label) ?? R(c), m = "#272727", x = (() => {
+    if ((r == null ? void 0 : r.impactPercent) == null)
+      return;
+    const h = Number(r.impactPercent);
+    if (Number.isFinite(h))
+      return `${h < 0 ? "-" : ""}${Math.abs(h)}% Score impact`;
+  })(), b = t ?? {
+    label: l == null ? void 0 : l.label,
+    direction: r != null ? H(c) : "positive"
+  };
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 16,
+        padding: "24px 16px",
+        background: o.surface,
+        border: `1px solid ${o.border}`,
+        borderRadius: 8,
+        width: "100%",
+        boxSizing: "border-box"
+      },
+      children: [
+        /* @__PURE__ */ s(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 6,
+              width: "100%"
+            },
+            children: [
+              /* @__PURE__ */ e(
+                "span",
+                {
+                  style: {
+                    fontFamily: d,
+                    fontSize: 15,
+                    fontWeight: 700,
+                    color: o.strong,
+                    lineHeight: 1.2,
+                    whiteSpace: "nowrap"
+                  },
+                  children: n
+                }
+              ),
+              /* @__PURE__ */ e(N, { text: g, children: /* @__PURE__ */ e(
+                "button",
+                {
+                  type: "button",
+                  onClick: f,
+                  "aria-label": "About Agent Lift Analysis",
+                  style: {
+                    display: "inline-flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: 16,
+                    height: 16,
+                    padding: 0,
+                    border: "none",
+                    background: "transparent",
+                    // Pointer cursor whenever the (i) has something to surface —
+                    // a tooltip on hover or a click handler. Since `infoTooltip`
+                    // defaults to a non-empty string, the icon almost always
+                    // reads as interactive.
+                    cursor: g || f ? "pointer" : "default",
+                    color: o.muted
+                  },
+                  children: /* @__PURE__ */ e(D, { size: 16, strokeWidth: 1.75 })
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ s(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "stretch",
+              gap: 16,
+              width: "100%"
+            },
+            children: [
+              i && /* @__PURE__ */ e(
+                F,
+                {
+                  title: "Interaction Difficulty",
+                  value: y,
+                  highlight: null,
+                  centerLabel: p,
+                  centerLabelColor: m,
+                  sublabel: i.sublabel,
+                  footer: i.footer
+                }
+              ),
+              i && r && /* @__PURE__ */ e(k, { variant: "dashed" }),
+              r && /* @__PURE__ */ e(
+                F,
+                {
+                  title: "Agent Impact",
+                  value: c,
+                  highlight: c,
+                  centerLabel: u,
+                  centerLabelColor: m,
+                  sublabel: r.sublabel,
+                  footer: x,
+                  description: r.description
+                }
+              ),
+              (i || r) && l && /* @__PURE__ */ e(k, { variant: "solid" }),
+              l && /* @__PURE__ */ e(
+                $,
+                {
+                  percent: l.percent,
+                  label: l.label,
+                  totalLabel: l.totalLabel ?? "Total",
+                  description: l.description,
+                  status: b
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+function O({
+  open: n,
+  onClose: t,
+  title: i,
+  subtitle: r,
+  children: l,
   footer: a,
-  width: g = 515,
-  height: y = 762,
-  toggleLabel: c,
-  toggleChecked: x,
-  onToggle: u,
-  topOffset: s
+  width: f = 515,
+  height: g = 762,
+  toggleLabel: y,
+  toggleChecked: c,
+  onToggle: p,
+  topOffset: u
 }) {
-  const b = v(null), h = s != null, f = typeof s == "number" ? `${s}px` : s;
-  return S(() => {
-    if (!e)
+  const m = A(null), x = u != null, b = typeof u == "number" ? `${u}px` : u;
+  return B(() => {
+    if (!n)
       return;
-    const l = (m) => {
-      m.key === "Escape" && (n == null || n());
+    const h = (v) => {
+      v.key === "Escape" && (t == null || t());
     };
-    return document.addEventListener("keydown", l), () => document.removeEventListener("keydown", l);
-  }, [e, n]), e ? /* @__PURE__ */ d(p, { children: [
-    /* @__PURE__ */ t(
+    return document.addEventListener("keydown", h), () => document.removeEventListener("keydown", h);
+  }, [n, t]), n ? /* @__PURE__ */ s(S, { children: [
+    /* @__PURE__ */ e(
       "div",
       {
-        onClick: n,
+        onClick: t,
         style: {
           position: "fixed",
           inset: 0,
@@ -36,20 +648,20 @@ function B({
         }
       }
     ),
-    /* @__PURE__ */ d(
+    /* @__PURE__ */ s(
       "div",
       {
-        ref: b,
+        ref: m,
         style: {
           position: "fixed",
-          top: h ? f : "50%",
+          top: x ? b : "50%",
           right: 0,
-          transform: h ? "none" : "translateY(-50%)",
+          transform: x ? "none" : "translateY(-50%)",
           zIndex: 1201,
           display: "flex",
-          width: g,
-          height: y,
-          maxHeight: h ? `calc(100vh - ${f})` : "100vh",
+          width: f,
+          height: g,
+          maxHeight: x ? `calc(100vh - ${b})` : "100vh",
           padding: "20px",
           flexDirection: "column",
           alignItems: "flex-start",
@@ -59,7 +671,7 @@ function B({
           boxShadow: "648px 0 100px 0 rgba(0, 0, 0, 0.20)"
         },
         children: [
-          /* @__PURE__ */ d(
+          /* @__PURE__ */ s(
             "div",
             {
               style: {
@@ -70,7 +682,7 @@ function B({
                 flexShrink: 0
               },
               children: [
-                /* @__PURE__ */ t(
+                /* @__PURE__ */ e(
                   "h2",
                   {
                     style: {
@@ -81,13 +693,13 @@ function B({
                       margin: 0,
                       lineHeight: "normal"
                     },
-                    children: r
+                    children: i
                   }
                 ),
-                /* @__PURE__ */ t(
+                /* @__PURE__ */ e(
                   "button",
                   {
-                    onClick: n,
+                    onClick: t,
                     style: {
                       display: "flex",
                       alignItems: "center",
@@ -101,19 +713,19 @@ function B({
                       borderRadius: "4px",
                       transition: "background 0.15s ease"
                     },
-                    onMouseEnter: (l) => {
-                      l.currentTarget.style.background = "#ECEEF2";
+                    onMouseEnter: (h) => {
+                      h.currentTarget.style.background = "#ECEEF2";
                     },
-                    onMouseLeave: (l) => {
-                      l.currentTarget.style.background = "transparent";
+                    onMouseLeave: (h) => {
+                      h.currentTarget.style.background = "transparent";
                     },
-                    children: /* @__PURE__ */ t(k, { size: 20, strokeWidth: 2 })
+                    children: /* @__PURE__ */ e(L, { size: 20, strokeWidth: 2 })
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ t(
+          /* @__PURE__ */ e(
             "div",
             {
               style: {
@@ -124,7 +736,7 @@ function B({
               }
             }
           ),
-          (i || c) && /* @__PURE__ */ d(
+          (r || y) && /* @__PURE__ */ s(
             "div",
             {
               style: {
@@ -136,7 +748,7 @@ function B({
                 flexShrink: 0
               },
               children: [
-                i && /* @__PURE__ */ t(
+                r && /* @__PURE__ */ e(
                   "p",
                   {
                     style: {
@@ -148,10 +760,10 @@ function B({
                       margin: 0,
                       flex: 1
                     },
-                    children: i
+                    children: r
                   }
                 ),
-                c && /* @__PURE__ */ d(
+                y && /* @__PURE__ */ s(
                   "div",
                   {
                     style: {
@@ -161,29 +773,29 @@ function B({
                       flexShrink: 0
                     },
                     children: [
-                      /* @__PURE__ */ t(
+                      /* @__PURE__ */ e(
                         "button",
                         {
-                          onClick: () => u == null ? void 0 : u(!x),
+                          onClick: () => p == null ? void 0 : p(!c),
                           style: {
                             position: "relative",
                             width: "40px",
                             height: "22px",
                             borderRadius: "11px",
                             border: "none",
-                            background: x ? "var(--Base-Strong, #0B0B0B)" : "var(--Base-Faint, #D9D9D9)",
+                            background: c ? "var(--Base-Strong, #0B0B0B)" : "var(--Base-Faint, #D9D9D9)",
                             cursor: "pointer",
                             transition: "background 0.2s ease",
                             padding: 0,
                             flexShrink: 0
                           },
-                          children: /* @__PURE__ */ t(
+                          children: /* @__PURE__ */ e(
                             "div",
                             {
                               style: {
                                 position: "absolute",
                                 top: "2px",
-                                left: x ? "20px" : "2px",
+                                left: c ? "20px" : "2px",
                                 width: "18px",
                                 height: "18px",
                                 borderRadius: "50%",
@@ -195,7 +807,7 @@ function B({
                           )
                         }
                       ),
-                      /* @__PURE__ */ t(
+                      /* @__PURE__ */ e(
                         "span",
                         {
                           style: {
@@ -204,7 +816,7 @@ function B({
                             color: "var(--Base-Strong, #1E1E1E)",
                             lineHeight: 1.4
                           },
-                          children: c
+                          children: y
                         }
                       )
                     ]
@@ -213,7 +825,7 @@ function B({
               ]
             }
           ),
-          /* @__PURE__ */ t(
+          /* @__PURE__ */ e(
             "div",
             {
               style: {
@@ -225,11 +837,11 @@ function B({
                 gap: "16px",
                 minHeight: 0
               },
-              children: o
+              children: l
             }
           ),
-          a && /* @__PURE__ */ d(p, { children: [
-            /* @__PURE__ */ t(
+          a && /* @__PURE__ */ s(S, { children: [
+            /* @__PURE__ */ e(
               "div",
               {
                 style: {
@@ -240,7 +852,7 @@ function B({
                 }
               }
             ),
-            /* @__PURE__ */ t(
+            /* @__PURE__ */ e(
               "div",
               {
                 style: {
@@ -260,18 +872,18 @@ function B({
     )
   ] }) : null;
 }
-function D({
-  label: e,
-  variant: n = "secondary",
-  onClick: r,
-  disabled: i
+function P({
+  label: n,
+  variant: t = "secondary",
+  onClick: i,
+  disabled: r
 }) {
-  const o = n === "primary";
-  return /* @__PURE__ */ t(
+  const l = t === "primary";
+  return /* @__PURE__ */ e(
     "button",
     {
-      onClick: r,
-      disabled: i,
+      onClick: i,
+      disabled: r,
       style: {
         display: "flex",
         height: "36px",
@@ -280,30 +892,30 @@ function D({
         alignItems: "center",
         gap: "8px",
         borderRadius: "6px",
-        border: o ? "none" : "1px solid #D9D9D9",
-        background: o ? "var(--Base-Strong, #0B0B0B)" : "var(--Base-White, #FFF)",
-        color: o ? "#FFF" : "var(--Base-Strong, #1E1E1E)",
+        border: l ? "none" : "1px solid #D9D9D9",
+        background: l ? "var(--Base-Strong, #0B0B0B)" : "var(--Base-White, #FFF)",
+        color: l ? "#FFF" : "var(--Base-Strong, #1E1E1E)",
         fontSize: "16px",
         fontWeight: 600,
-        cursor: i ? "default" : "pointer",
-        opacity: i ? 0.5 : 1,
+        cursor: r ? "default" : "pointer",
+        opacity: r ? 0.5 : 1,
         transition: "all 0.15s ease"
       },
       onMouseEnter: (a) => {
-        !i && !o && (a.currentTarget.style.background = "#ECEEF2");
+        !r && !l && (a.currentTarget.style.background = "#ECEEF2");
       },
       onMouseLeave: (a) => {
-        !i && !o && (a.currentTarget.style.background = "var(--Base-White, #FFF)");
+        !r && !l && (a.currentTarget.style.background = "var(--Base-White, #FFF)");
       },
-      children: e
+      children: n
     }
   );
 }
-function z({ children: e, htmlFor: n }) {
-  return /* @__PURE__ */ t(
+function U({ children: n, htmlFor: t }) {
+  return /* @__PURE__ */ e(
     "label",
     {
-      htmlFor: n,
+      htmlFor: t,
       style: {
         display: "block",
         color: "var(--Base-Strong, #2E3236)",
@@ -313,15 +925,15 @@ function z({ children: e, htmlFor: n }) {
         lineHeight: "normal",
         marginBottom: "6px"
       },
-      children: e
+      children: n
     }
   );
 }
-function I(e) {
-  return /* @__PURE__ */ t(
+function Y(n) {
+  return /* @__PURE__ */ e(
     "input",
     {
-      ...e,
+      ...n,
       style: {
         width: "100%",
         padding: "10px 12px",
@@ -336,23 +948,24 @@ function I(e) {
         boxSizing: "border-box",
         background: "#FFF",
         transition: "border-color 0.15s ease",
-        ...e.style
+        ...n.style
       },
-      onFocus: (n) => {
-        var r;
-        n.currentTarget.style.borderColor = "#808183", (r = e.onFocus) == null || r.call(e, n);
+      onFocus: (t) => {
+        var i;
+        t.currentTarget.style.borderColor = "#808183", (i = n.onFocus) == null || i.call(n, t);
       },
-      onBlur: (n) => {
-        var r;
-        n.currentTarget.style.borderColor = "#D9D9D9", (r = e.onBlur) == null || r.call(e, n);
+      onBlur: (t) => {
+        var i;
+        t.currentTarget.style.borderColor = "#D9D9D9", (i = n.onBlur) == null || i.call(n, t);
       }
     }
   );
 }
 export {
-  D,
-  B as S,
-  z as a,
-  I as b
+  G as A,
+  P as D,
+  O as S,
+  U as a,
+  Y as b
 };
 //# sourceMappingURL=SideDrawer.es.js.map