chordia-ui 3.2.4 → 3.2.5

package/dist/IntegrationCard.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("react/jsx-runtime");require("react");const r=require("lucide-react");function p({providerName:n,description:c,status:o="available",railColor:i,logoUrl:s,icon:d,onConfigure:l}){const a={connected:{label:"Connected",color:"#6B7C93",bgColor:"rgba(107, 124, 147, 0.08)",borderColor:"rgba(107, 124, 147, 0.20)",icon:e.jsx(r.CheckCircle2,{size:14,strokeWidth:2.5})},available:{label:"Available",color:"#1E2125",bgColor:"rgba(30, 33, 37, 0.04)",borderColor:"rgba(30, 33, 37, 0.12)",icon:e.jsx(r.Circle,{size:14,strokeWidth:2})},"coming-soon":{label:"Coming Soon",color:"rgba(30, 33, 37, 0.42)",bgColor:"transparent",borderColor:"rgba(30, 33, 37, 0.12)",icon:e.jsx(r.Circle,{size:14,strokeWidth:2,style:{opacity:.4}})}},t=a[o]||a.available;return e.jsxs("div",{style:{background:"#FFFFFF",border:`1px solid ${i}20`,borderRadius:"8px",position:"relative",display:"flex",flexDirection:"column",transition:"all 0.15s ease",cursor:o==="coming-soon"?"default":"pointer",opacity:o==="coming-soon"?.6:1,overflow:"hidden",height:"100%"},className:"hover:shadow-sm",children:[e.jsx("div",{style:{position:"absolute",left:0,top:0,bottom:0,width:"4px",background:i,opacity:o==="coming-soon"?.4:1}}),e.jsxs("div",{style:{padding:"20px",paddingLeft:"24px",display:"flex",flexDirection:"column",gap:"16px",height:"100%"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"flex-start",justifyContent:"space-between",gap:"12px"},children:[e.jsx("div",{style:{width:"48px",height:"48px",borderRadius:"6px",background:`${i}08`,border:`1px solid ${i}18`,display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0},children:s?e.jsx("img",{src:s,alt:n,style:{width:"32px",height:"32px",objectFit:"contain"}}):e.jsx("div",{style:{color:i,fontSize:"20px",fontWeight:650,opacity:.8},children:d||(n?n.charAt(0):"")})}),e.jsxs("div",{style:{display:"inline-flex",alignItems:"center",gap:"6px",padding:"4px 10px",borderRadius:"4px",background:t.bgColor,border:`1px solid ${t.borderColor}`,fontSize:"11px",fontWeight:600,letterSpacing:"0.01em",color:t.color,flexShrink:0},children:[t.icon,t.label]})]}),e.jsxs("div",{style:{flex:1,minHeight:0},children:[e.jsx("h3",{style:{fontSize:"15px",fontWeight:650,color:"rgba(30, 33, 37, 0.92)",marginBottom:"6px",letterSpacing:"-0.01em"},children:n}),e.jsx("p",{style:{fontSize:"13px",lineHeight:1.5,color:"rgba(30, 33, 37, 0.65)"},children:c})]}),o!=="coming-soon"&&e.jsxs("button",{onClick:g=>{g.stopPropagation(),l==null||l()},style:{display:"flex",alignItems:"center",justifyContent:"center",gap:"8px",padding:"8px 14px",border:"1px solid rgba(30, 33, 37, 0.15)",borderRadius:"5px",background:o==="connected"?"transparent":"rgba(30, 33, 37, 0.03)",fontSize:"13px",fontWeight:600,color:"rgba(30, 33, 37, 0.92)",cursor:"pointer",transition:"all 0.15s ease",width:"100%",marginTop:"auto"},className:"hover:bg-[rgba(30,33,37,0.06)] hover:border-[rgba(30,33,37,0.20)]",children:[e.jsx(r.Settings,{size:14,strokeWidth:2.5}),o==="connected"?"Configure":"Connect"]})]})]})}exports.IntegrationCard=p;
+"use strict";const e=require("react/jsx-runtime");require("react");const r=require("lucide-react");function u({providerName:l,description:x,status:o="available",logoUrl:s,icon:c,onConnect:a,onConfigure:d}){const p=o==="connected",n=o==="coming-soon",g={connected:{label:"Connected",color:"var(--Grey-Strong, #808183)",icon:e.jsx(r.CheckCircle2,{size:16,strokeWidth:2}),actionLabel:"Disconnect",actionFilled:!1},available:{label:"Available",color:"var(--Grey-Strong, #808183)",icon:e.jsx(r.CloudDownload,{size:16,strokeWidth:2}),actionLabel:"Connect",actionFilled:!0},"coming-soon":{label:"Coming Soon",color:"var(--Grey-Muted, #B2AEA8)",icon:e.jsx(r.CloudOff,{size:16,strokeWidth:2}),actionLabel:"Connect",actionFilled:!1}},i=g[o]||g.available;return e.jsxs("div",{style:{display:"flex",width:"317px",height:"160px",padding:"16px",flexDirection:"column",alignItems:"flex-start",gap:"10px",borderRadius:"4px",border:"1px solid #D9D9D9",background:"var(--Base-White, #FFF)"},children:[e.jsxs("div",{style:{flex:1,width:"100%"},children:[e.jsx("div",{style:{marginBottom:"4px"},children:s?e.jsx("img",{src:s,alt:l,style:{height:"24px",objectFit:"contain"}}):c?e.jsx("div",{style:{display:"flex",alignItems:"center"},children:c}):e.jsx("h3",{style:{fontSize:"16px",fontWeight:700,color:"var(--Base-Strong, #1E2125)",margin:0,lineHeight:1.3},children:l})}),e.jsx("p",{style:{fontSize:"13px",lineHeight:1.4,color:"var(--Grey-Strong, #808183)",margin:0},children:x})]}),e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%",gap:"8px"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"6px",fontSize:"13px",fontWeight:400,color:i.color},children:[i.icon,i.label]}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"8px"},children:[p&&d&&e.jsx("button",{onClick:t=>{t.stopPropagation(),d()},style:{display:"flex",alignItems:"center",justifyContent:"center",width:"32px",height:"32px",border:"none",background:"transparent",color:"var(--Grey-Strong, #808183)",cursor:"pointer",borderRadius:"4px",transition:"background 0.15s ease"},onMouseEnter:t=>{t.currentTarget.style.background="rgba(0,0,0,0.04)"},onMouseLeave:t=>{t.currentTarget.style.background="transparent"},children:e.jsx(r.Settings2,{size:20,strokeWidth:2})}),e.jsx("button",{onClick:t=>{t.stopPropagation(),a==null||a()},disabled:n,style:{display:"flex",height:"28px",padding:"10px",justifyContent:"center",alignItems:"center",gap:"10px",borderRadius:"10px",border:i.actionFilled?"1px solid transparent":"1px solid #D9D9D9",background:n?"var(--Grey-Muted, #B2AEA8)":i.actionFilled?"var(--Base-Strong, #1E2125)":"var(--Base-White, #FFF)",color:i.actionFilled||n?"#FFF":"var(--Base-Strong, #1E2125)",fontSize:"13px",fontWeight:600,cursor:n?"default":"pointer",opacity:n?.6:1,transition:"all 0.15s ease",lineHeight:1.4},onMouseEnter:t=>{!n&&!i.actionFilled&&(t.currentTarget.style.background="rgba(0,0,0,0.04)")},onMouseLeave:t=>{!n&&!i.actionFilled&&(t.currentTarget.style.background="var(--Base-White, #FFF)")},children:i.actionLabel})]})]})]})}exports.IntegrationCard=u;
 //# sourceMappingURL=IntegrationCard.cjs.js.map

package/dist/IntegrationCard.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"IntegrationCard.cjs.js","sources":["../src/components/layout/IntegrationCard.jsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport { CheckCircle2, Circle, Settings } from \"lucide-react\";\n\n/**\n * IntegrationCard Component\n * Displays an integration provider card with status, logo, and configuration options\n */\nexport default function IntegrationCard({\n  providerName,\n  description,\n  status = \"available\",\n  railColor,\n  logoUrl,\n  icon,\n  onConfigure,\n}) {\n  const statusConfig = {\n    connected: {\n      label: \"Connected\",\n      color: \"#6B7C93\",\n      bgColor: \"rgba(107, 124, 147, 0.08)\",\n      borderColor: \"rgba(107, 124, 147, 0.20)\",\n      icon: <CheckCircle2 size={14} strokeWidth={2.5} />,\n    },\n    available: {\n      label: \"Available\",\n      color: \"#1E2125\",\n      bgColor: \"rgba(30, 33, 37, 0.04)\",\n      borderColor: \"rgba(30, 33, 37, 0.12)\",\n      icon: <Circle size={14} strokeWidth={2} />,\n    },\n    \"coming-soon\": {\n      label: \"Coming Soon\",\n      color: \"rgba(30, 33, 37, 0.42)\",\n      bgColor: \"transparent\",\n      borderColor: \"rgba(30, 33, 37, 0.12)\",\n      icon: <Circle size={14} strokeWidth={2} style={{ opacity: 0.4 }} />,\n    },\n  };\n\n  const config = statusConfig[status] || statusConfig.available;\n\n  return (\n    <div\n      style={{\n        background: \"#FFFFFF\",\n        border: `1px solid ${railColor}20`,\n        borderRadius: \"8px\",\n        position: \"relative\",\n        display: \"flex\",\n        flexDirection: \"column\",\n        transition: \"all 0.15s ease\",\n        cursor: status === \"coming-soon\" ? \"default\" : \"pointer\",\n        opacity: status === \"coming-soon\" ? 0.6 : 1,\n        overflow: \"hidden\",\n        height: \"100%\",\n      }}\n      className=\"hover:shadow-sm\"\n    >\n      {/* Rail */}\n      <div\n        style={{\n          position: \"absolute\",\n          left: 0,\n          top: 0,\n          bottom: 0,\n          width: \"4px\",\n          background: railColor,\n          opacity: status === \"coming-soon\" ? 0.4 : 1,\n        }}\n      />\n\n      {/* Content wrapper with padding */}\n      <div\n        style={{\n          padding: \"20px\",\n          paddingLeft: \"24px\",\n          display: \"flex\",\n          flexDirection: \"column\",\n          gap: \"16px\",\n          height: \"100%\",\n        }}\n      >\n        {/* Header: Logo + Status */}\n        <div\n          style={{\n            display: \"flex\",\n            alignItems: \"flex-start\",\n            justifyContent: \"space-between\",\n            gap: \"12px\",\n          }}\n        >\n          {/* Logo/Icon */}\n          <div\n            style={{\n              width: \"48px\",\n              height: \"48px\",\n              borderRadius: \"6px\",\n              background: `${railColor}08`,\n              border: `1px solid ${railColor}18`,\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              flexShrink: 0,\n            }}\n          >\n            {logoUrl ? (\n              <img\n                src={logoUrl}\n                alt={providerName}\n                style={{ width: \"32px\", height: \"32px\", objectFit: \"contain\" }}\n              />\n            ) : (\n              <div\n                style={{\n                  color: railColor,\n                  fontSize: \"20px\",\n                  fontWeight: 650,\n                  opacity: 0.8,\n                }}\n              >\n                {icon || (providerName ? providerName.charAt(0) : \"\")}\n              </div>\n            )}\n          </div>\n\n          {/* Status Badge */}\n          <div\n            style={{\n              display: \"inline-flex\",\n              alignItems: \"center\",\n              gap: \"6px\",\n              padding: \"4px 10px\",\n              borderRadius: \"4px\",\n              background: config.bgColor,\n              border: `1px solid ${config.borderColor}`,\n              fontSize: \"11px\",\n              fontWeight: 600,\n              letterSpacing: \"0.01em\",\n              color: config.color,\n              flexShrink: 0,\n            }}\n          >\n            {config.icon}\n            {config.label}\n          </div>\n        </div>\n\n        {/* Content */}\n        <div style={{ flex: 1, minHeight: 0 }}>\n          <h3\n            style={{\n              fontSize: \"15px\",\n              fontWeight: 650,\n              color: \"rgba(30, 33, 37, 0.92)\",\n              marginBottom: \"6px\",\n              letterSpacing: \"-0.01em\",\n            }}\n          >\n            {providerName}\n          </h3>\n          <p\n            style={{\n              fontSize: \"13px\",\n              lineHeight: 1.5,\n              color: \"rgba(30, 33, 37, 0.65)\",\n            }}\n          >\n            {description}\n          </p>\n        </div>\n\n        {/* Action Button - aligned to bottom */}\n        {status !== \"coming-soon\" && (\n          <button\n            onClick={(e) => {\n              e.stopPropagation();\n              onConfigure?.();\n            }}\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              gap: \"8px\",\n              padding: \"8px 14px\",\n              border: \"1px solid rgba(30, 33, 37, 0.15)\",\n              borderRadius: \"5px\",\n              background: status === \"connected\" ? \"transparent\" : \"rgba(30, 33, 37, 0.03)\",\n              fontSize: \"13px\",\n              fontWeight: 600,\n              color: \"rgba(30, 33, 37, 0.92)\",\n              cursor: \"pointer\",\n              transition: \"all 0.15s ease\",\n              width: \"100%\",\n              marginTop: \"auto\",\n            }}\n            className=\"hover:bg-[rgba(30,33,37,0.06)] hover:border-[rgba(30,33,37,0.20)]\"\n          >\n            <Settings size={14} strokeWidth={2.5} />\n            {status === \"connected\" ? \"Configure\" : \"Connect\"}\n          </button>\n        )}\n      </div>\n    </div>\n  );\n}\n\n"],"names":["IntegrationCard","providerName","description","status","railColor","logoUrl","icon","onConfigure","statusConfig","jsx","CheckCircle2","Circle","config","jsxs","e","Settings"],"mappings":"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"}
+{"version":3,"file":"IntegrationCard.cjs.js","sources":["../src/components/layout/IntegrationCard.jsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport { CheckCircle2, Settings2, CloudOff, CloudDownload } from \"lucide-react\";\n\n/**\n * IntegrationCard Component\n * Displays an integration provider card with status, logo, and configuration options\n *\n * Props:\n *  - providerName   string      Provider display name\n *  - description    string      Short description / subtitle\n *  - status         string      \"available\" | \"connected\" | \"coming-soon\"\n *  - logoUrl        string      Optional logo image URL\n *  - icon           ReactNode   Optional custom icon/logo element\n *  - onConnect      function    Connect/Disconnect callback\n *  - onConfigure    function    Configure (settings) callback — shown for connected\n */\nexport default function IntegrationCard({\n  providerName,\n  description,\n  status = \"available\",\n  logoUrl,\n  icon,\n  onConnect,\n  onConfigure,\n}) {\n  const isConnected = status === \"connected\";\n  const isComingSoon = status === \"coming-soon\";\n\n  const statusConfig = {\n    connected: {\n      label: \"Connected\",\n      color: \"var(--Grey-Strong, #808183)\",\n      icon: <CheckCircle2 size={16} strokeWidth={2} />,\n      actionLabel: \"Disconnect\",\n      actionFilled: false,\n    },\n    available: {\n      label: \"Available\",\n      color: \"var(--Grey-Strong, #808183)\",\n      icon: <CloudDownload size={16} strokeWidth={2} />,\n      actionLabel: \"Connect\",\n      actionFilled: true,\n    },\n    \"coming-soon\": {\n      label: \"Coming Soon\",\n      color: \"var(--Grey-Muted, #B2AEA8)\",\n      icon: <CloudOff size={16} strokeWidth={2} />,\n      actionLabel: \"Connect\",\n      actionFilled: false,\n    },\n  };\n\n  const config = statusConfig[status] || statusConfig.available;\n\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        width: \"317px\",\n        height: \"160px\",\n        padding: \"16px\",\n        flexDirection: \"column\",\n        alignItems: \"flex-start\",\n        gap: \"10px\",\n        borderRadius: \"4px\",\n        border: \"1px solid #D9D9D9\",\n        background: \"var(--Base-White, #FFF)\",\n      }}\n    >\n      {/* Top: Name + Description */}\n      <div style={{ flex: 1, width: \"100%\" }}>\n        {/* Provider Name / Logo */}\n        <div style={{ marginBottom: \"4px\" }}>\n          {logoUrl ? (\n            <img\n              src={logoUrl}\n              alt={providerName}\n              style={{ height: \"24px\", objectFit: \"contain\" }}\n            />\n          ) : icon ? (\n            <div style={{ display: \"flex\", alignItems: \"center\" }}>{icon}</div>\n          ) : (\n            <h3\n              style={{\n                fontSize: \"16px\",\n                fontWeight: 700,\n                color: \"var(--Base-Strong, #1E2125)\",\n                margin: 0,\n                lineHeight: 1.3,\n              }}\n            >\n              {providerName}\n            </h3>\n          )}\n        </div>\n        {/* Description */}\n        <p\n          style={{\n            fontSize: \"13px\",\n            lineHeight: 1.4,\n            color: \"var(--Grey-Strong, #808183)\",\n            margin: 0,\n          }}\n        >\n          {description}\n        </p>\n      </div>\n\n      {/* Bottom: Status + Actions */}\n      <div\n        style={{\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"space-between\",\n          width: \"100%\",\n          gap: \"8px\",\n        }}\n      >\n        {/* Status label */}\n        <div\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            gap: \"6px\",\n            fontSize: \"13px\",\n            fontWeight: 400,\n            color: config.color,\n          }}\n        >\n          {config.icon}\n          {config.label}\n        </div>\n\n        {/* Action area */}\n        <div style={{ display: \"flex\", alignItems: \"center\", gap: \"8px\" }}>\n          {/* Settings icon for connected */}\n          {isConnected && onConfigure && (\n            <button\n              onClick={(e) => {\n                e.stopPropagation();\n                onConfigure();\n              }}\n              style={{\n                display: \"flex\",\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                width: \"32px\",\n                height: \"32px\",\n                border: \"none\",\n                background: \"transparent\",\n                color: \"var(--Grey-Strong, #808183)\",\n                cursor: \"pointer\",\n                borderRadius: \"4px\",\n                transition: \"background 0.15s ease\",\n              }}\n              onMouseEnter={(e) => {\n                e.currentTarget.style.background = \"rgba(0,0,0,0.04)\";\n              }}\n              onMouseLeave={(e) => {\n                e.currentTarget.style.background = \"transparent\";\n              }}\n            >\n              <Settings2 size={20} strokeWidth={2} />\n            </button>\n          )}\n\n          {/* Connect / Disconnect button */}\n          <button\n            onClick={(e) => {\n              e.stopPropagation();\n              onConnect?.();\n            }}\n            disabled={isComingSoon}\n            style={{\n              display: \"flex\",\n              height: \"28px\",\n              padding: \"10px\",\n              justifyContent: \"center\",\n              alignItems: \"center\",\n              gap: \"10px\",\n              borderRadius: \"10px\",\n              border: config.actionFilled\n                ? \"1px solid transparent\"\n                : \"1px solid #D9D9D9\",\n              background: isComingSoon\n                ? \"var(--Grey-Muted, #B2AEA8)\"\n                : config.actionFilled\n                ? \"var(--Base-Strong, #1E2125)\"\n                : \"var(--Base-White, #FFF)\",\n              color: config.actionFilled || isComingSoon\n                ? \"#FFF\"\n                : \"var(--Base-Strong, #1E2125)\",\n              fontSize: \"13px\",\n              fontWeight: 600,\n              cursor: isComingSoon ? \"default\" : \"pointer\",\n              opacity: isComingSoon ? 0.6 : 1,\n              transition: \"all 0.15s ease\",\n              lineHeight: 1.4,\n            }}\n            onMouseEnter={(e) => {\n              if (!isComingSoon && !config.actionFilled) {\n                e.currentTarget.style.background = \"rgba(0,0,0,0.04)\";\n              }\n            }}\n            onMouseLeave={(e) => {\n              if (!isComingSoon && !config.actionFilled) {\n                e.currentTarget.style.background = \"var(--Base-White, #FFF)\";\n              }\n            }}\n          >\n            {config.actionLabel}\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["IntegrationCard","providerName","description","status","logoUrl","icon","onConnect","onConfigure","isConnected","isComingSoon","statusConfig","jsx","CheckCircle2","CloudDownload","CloudOff","config","jsxs","e","Settings2"],"mappings":"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"}

package/dist/IntegrationCard.es.js

@@ -1,209 +1,180 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
 import "react";
-import { Settings as b, CheckCircle2 as x, Circle as d } from "lucide-react";
-function m({
-  providerName: r,
-  description: s,
-  status: o = "available",
-  railColor: t,
-  logoUrl: a,
-  icon: p,
-  onConfigure: l
+import { Settings2 as x, CheckCircle2 as b, CloudDownload as u, CloudOff as y } from "lucide-react";
+function F({
+  providerName: l,
+  description: p,
+  status: r = "available",
+  logoUrl: s,
+  icon: c,
+  onConnect: a,
+  onConfigure: d
 }) {
-  const c = {
+  const h = r === "connected", n = r === "coming-soon", g = {
     connected: {
       label: "Connected",
-      color: "#6B7C93",
-      bgColor: "rgba(107, 124, 147, 0.08)",
-      borderColor: "rgba(107, 124, 147, 0.20)",
-      icon: /* @__PURE__ */ e(x, { size: 14, strokeWidth: 2.5 })
+      color: "var(--Grey-Strong, #808183)",
+      icon: /* @__PURE__ */ t(b, { size: 16, strokeWidth: 2 }),
+      actionLabel: "Disconnect",
+      actionFilled: !1
     },
     available: {
       label: "Available",
-      color: "#1E2125",
-      bgColor: "rgba(30, 33, 37, 0.04)",
-      borderColor: "rgba(30, 33, 37, 0.12)",
-      icon: /* @__PURE__ */ e(d, { size: 14, strokeWidth: 2 })
+      color: "var(--Grey-Strong, #808183)",
+      icon: /* @__PURE__ */ t(u, { size: 16, strokeWidth: 2 }),
+      actionLabel: "Connect",
+      actionFilled: !0
     },
     "coming-soon": {
       label: "Coming Soon",
-      color: "rgba(30, 33, 37, 0.42)",
-      bgColor: "transparent",
-      borderColor: "rgba(30, 33, 37, 0.12)",
-      icon: /* @__PURE__ */ e(d, { size: 14, strokeWidth: 2, style: { opacity: 0.4 } })
+      color: "var(--Grey-Muted, #B2AEA8)",
+      icon: /* @__PURE__ */ t(y, { size: 16, strokeWidth: 2 }),
+      actionLabel: "Connect",
+      actionFilled: !1
     }
-  }, n = c[o] || c.available;
-  return /* @__PURE__ */ i(
+  }, i = g[r] || g.available;
+  return /* @__PURE__ */ o(
     "div",
     {
       style: {
-        background: "#FFFFFF",
-        border: `1px solid ${t}20`,
-        borderRadius: "8px",
-        position: "relative",
         display: "flex",
+        width: "317px",
+        height: "160px",
+        padding: "16px",
         flexDirection: "column",
-        transition: "all 0.15s ease",
-        cursor: o === "coming-soon" ? "default" : "pointer",
-        opacity: o === "coming-soon" ? 0.6 : 1,
-        overflow: "hidden",
-        height: "100%"
+        alignItems: "flex-start",
+        gap: "10px",
+        borderRadius: "4px",
+        border: "1px solid #D9D9D9",
+        background: "var(--Base-White, #FFF)"
       },
-      className: "hover:shadow-sm",
       children: [
-        /* @__PURE__ */ e(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              left: 0,
-              top: 0,
-              bottom: 0,
-              width: "4px",
-              background: t,
-              opacity: o === "coming-soon" ? 0.4 : 1
+        /* @__PURE__ */ o("div", { style: { flex: 1, width: "100%" }, children: [
+          /* @__PURE__ */ t("div", { style: { marginBottom: "4px" }, children: s ? /* @__PURE__ */ t(
+            "img",
+            {
+              src: s,
+              alt: l,
+              style: { height: "24px", objectFit: "contain" }
             }
-          }
-        ),
-        /* @__PURE__ */ i(
+          ) : c ? /* @__PURE__ */ t("div", { style: { display: "flex", alignItems: "center" }, children: c }) : /* @__PURE__ */ t(
+            "h3",
+            {
+              style: {
+                fontSize: "16px",
+                fontWeight: 700,
+                color: "var(--Base-Strong, #1E2125)",
+                margin: 0,
+                lineHeight: 1.3
+              },
+              children: l
+            }
+          ) }),
+          /* @__PURE__ */ t(
+            "p",
+            {
+              style: {
+                fontSize: "13px",
+                lineHeight: 1.4,
+                color: "var(--Grey-Strong, #808183)",
+                margin: 0
+              },
+              children: p
+            }
+          )
+        ] }),
+        /* @__PURE__ */ o(
           "div",
           {
             style: {
-              padding: "20px",
-              paddingLeft: "24px",
               display: "flex",
-              flexDirection: "column",
-              gap: "16px",
-              height: "100%"
+              alignItems: "center",
+              justifyContent: "space-between",
+              width: "100%",
+              gap: "8px"
             },
             children: [
-              /* @__PURE__ */ i(
+              /* @__PURE__ */ o(
                 "div",
                 {
                   style: {
                     display: "flex",
-                    alignItems: "flex-start",
-                    justifyContent: "space-between",
-                    gap: "12px"
+                    alignItems: "center",
+                    gap: "6px",
+                    fontSize: "13px",
+                    fontWeight: 400,
+                    color: i.color
                   },
                   children: [
-                    /* @__PURE__ */ e(
-                      "div",
-                      {
-                        style: {
-                          width: "48px",
-                          height: "48px",
-                          borderRadius: "6px",
-                          background: `${t}08`,
-                          border: `1px solid ${t}18`,
-                          display: "flex",
-                          alignItems: "center",
-                          justifyContent: "center",
-                          flexShrink: 0
-                        },
-                        children: a ? /* @__PURE__ */ e(
-                          "img",
-                          {
-                            src: a,
-                            alt: r,
-                            style: { width: "32px", height: "32px", objectFit: "contain" }
-                          }
-                        ) : /* @__PURE__ */ e(
-                          "div",
-                          {
-                            style: {
-                              color: t,
-                              fontSize: "20px",
-                              fontWeight: 650,
-                              opacity: 0.8
-                            },
-                            children: p || (r ? r.charAt(0) : "")
-                          }
-                        )
-                      }
-                    ),
-                    /* @__PURE__ */ i(
-                      "div",
-                      {
-                        style: {
-                          display: "inline-flex",
-                          alignItems: "center",
-                          gap: "6px",
-                          padding: "4px 10px",
-                          borderRadius: "4px",
-                          background: n.bgColor,
-                          border: `1px solid ${n.borderColor}`,
-                          fontSize: "11px",
-                          fontWeight: 600,
-                          letterSpacing: "0.01em",
-                          color: n.color,
-                          flexShrink: 0
-                        },
-                        children: [
-                          n.icon,
-                          n.label
-                        ]
-                      }
-                    )
+                    i.icon,
+                    i.label
                   ]
                 }
               ),
-              /* @__PURE__ */ i("div", { style: { flex: 1, minHeight: 0 }, children: [
-                /* @__PURE__ */ e(
-                  "h3",
+              /* @__PURE__ */ o("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                h && d && /* @__PURE__ */ t(
+                  "button",
                   {
+                    onClick: (e) => {
+                      e.stopPropagation(), d();
+                    },
                     style: {
-                      fontSize: "15px",
-                      fontWeight: 650,
-                      color: "rgba(30, 33, 37, 0.92)",
-                      marginBottom: "6px",
-                      letterSpacing: "-0.01em"
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      width: "32px",
+                      height: "32px",
+                      border: "none",
+                      background: "transparent",
+                      color: "var(--Grey-Strong, #808183)",
+                      cursor: "pointer",
+                      borderRadius: "4px",
+                      transition: "background 0.15s ease"
                     },
-                    children: r
+                    onMouseEnter: (e) => {
+                      e.currentTarget.style.background = "rgba(0,0,0,0.04)";
+                    },
+                    onMouseLeave: (e) => {
+                      e.currentTarget.style.background = "transparent";
+                    },
+                    children: /* @__PURE__ */ t(x, { size: 20, strokeWidth: 2 })
                   }
                 ),
-                /* @__PURE__ */ e(
-                  "p",
+                /* @__PURE__ */ t(
+                  "button",
                   {
+                    onClick: (e) => {
+                      e.stopPropagation(), a == null || a();
+                    },
+                    disabled: n,
                     style: {
+                      display: "flex",
+                      height: "28px",
+                      padding: "10px",
+                      justifyContent: "center",
+                      alignItems: "center",
+                      gap: "10px",
+                      borderRadius: "10px",
+                      border: i.actionFilled ? "1px solid transparent" : "1px solid #D9D9D9",
+                      background: n ? "var(--Grey-Muted, #B2AEA8)" : i.actionFilled ? "var(--Base-Strong, #1E2125)" : "var(--Base-White, #FFF)",
+                      color: i.actionFilled || n ? "#FFF" : "var(--Base-Strong, #1E2125)",
                       fontSize: "13px",
-                      lineHeight: 1.5,
-                      color: "rgba(30, 33, 37, 0.65)"
+                      fontWeight: 600,
+                      cursor: n ? "default" : "pointer",
+                      opacity: n ? 0.6 : 1,
+                      transition: "all 0.15s ease",
+                      lineHeight: 1.4
                     },
-                    children: s
+                    onMouseEnter: (e) => {
+                      !n && !i.actionFilled && (e.currentTarget.style.background = "rgba(0,0,0,0.04)");
+                    },
+                    onMouseLeave: (e) => {
+                      !n && !i.actionFilled && (e.currentTarget.style.background = "var(--Base-White, #FFF)");
+                    },
+                    children: i.actionLabel
                   }
                 )
-              ] }),
-              o !== "coming-soon" && /* @__PURE__ */ i(
-                "button",
-                {
-                  onClick: (g) => {
-                    g.stopPropagation(), l == null || l();
-                  },
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    gap: "8px",
-                    padding: "8px 14px",
-                    border: "1px solid rgba(30, 33, 37, 0.15)",
-                    borderRadius: "5px",
-                    background: o === "connected" ? "transparent" : "rgba(30, 33, 37, 0.03)",
-                    fontSize: "13px",
-                    fontWeight: 600,
-                    color: "rgba(30, 33, 37, 0.92)",
-                    cursor: "pointer",
-                    transition: "all 0.15s ease",
-                    width: "100%",
-                    marginTop: "auto"
-                  },
-                  className: "hover:bg-[rgba(30,33,37,0.06)] hover:border-[rgba(30,33,37,0.20)]",
-                  children: [
-                    /* @__PURE__ */ e(b, { size: 14, strokeWidth: 2.5 }),
-                    o === "connected" ? "Configure" : "Connect"
-                  ]
-                }
-              )
+              ] })
             ]
           }
         )
@@ -212,6 +183,6 @@ function m({
   );
 }
 export {
-  m as I
+  F as I
 };
 //# sourceMappingURL=IntegrationCard.es.js.map

package/dist/IntegrationCard.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"IntegrationCard.es.js","sources":["../src/components/layout/IntegrationCard.jsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport { CheckCircle2, Circle, Settings } from \"lucide-react\";\n\n/**\n * IntegrationCard Component\n * Displays an integration provider card with status, logo, and configuration options\n */\nexport default function IntegrationCard({\n  providerName,\n  description,\n  status = \"available\",\n  railColor,\n  logoUrl,\n  icon,\n  onConfigure,\n}) {\n  const statusConfig = {\n    connected: {\n      label: \"Connected\",\n      color: \"#6B7C93\",\n      bgColor: \"rgba(107, 124, 147, 0.08)\",\n      borderColor: \"rgba(107, 124, 147, 0.20)\",\n      icon: <CheckCircle2 size={14} strokeWidth={2.5} />,\n    },\n    available: {\n      label: \"Available\",\n      color: \"#1E2125\",\n      bgColor: \"rgba(30, 33, 37, 0.04)\",\n      borderColor: \"rgba(30, 33, 37, 0.12)\",\n      icon: <Circle size={14} strokeWidth={2} />,\n    },\n    \"coming-soon\": {\n      label: \"Coming Soon\",\n      color: \"rgba(30, 33, 37, 0.42)\",\n      bgColor: \"transparent\",\n      borderColor: \"rgba(30, 33, 37, 0.12)\",\n      icon: <Circle size={14} strokeWidth={2} style={{ opacity: 0.4 }} />,\n    },\n  };\n\n  const config = statusConfig[status] || statusConfig.available;\n\n  return (\n    <div\n      style={{\n        background: \"#FFFFFF\",\n        border: `1px solid ${railColor}20`,\n        borderRadius: \"8px\",\n        position: \"relative\",\n        display: \"flex\",\n        flexDirection: \"column\",\n        transition: \"all 0.15s ease\",\n        cursor: status === \"coming-soon\" ? \"default\" : \"pointer\",\n        opacity: status === \"coming-soon\" ? 0.6 : 1,\n        overflow: \"hidden\",\n        height: \"100%\",\n      }}\n      className=\"hover:shadow-sm\"\n    >\n      {/* Rail */}\n      <div\n        style={{\n          position: \"absolute\",\n          left: 0,\n          top: 0,\n          bottom: 0,\n          width: \"4px\",\n          background: railColor,\n          opacity: status === \"coming-soon\" ? 0.4 : 1,\n        }}\n      />\n\n      {/* Content wrapper with padding */}\n      <div\n        style={{\n          padding: \"20px\",\n          paddingLeft: \"24px\",\n          display: \"flex\",\n          flexDirection: \"column\",\n          gap: \"16px\",\n          height: \"100%\",\n        }}\n      >\n        {/* Header: Logo + Status */}\n        <div\n          style={{\n            display: \"flex\",\n            alignItems: \"flex-start\",\n            justifyContent: \"space-between\",\n            gap: \"12px\",\n          }}\n        >\n          {/* Logo/Icon */}\n          <div\n            style={{\n              width: \"48px\",\n              height: \"48px\",\n              borderRadius: \"6px\",\n              background: `${railColor}08`,\n              border: `1px solid ${railColor}18`,\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              flexShrink: 0,\n            }}\n          >\n            {logoUrl ? (\n              <img\n                src={logoUrl}\n                alt={providerName}\n                style={{ width: \"32px\", height: \"32px\", objectFit: \"contain\" }}\n              />\n            ) : (\n              <div\n                style={{\n                  color: railColor,\n                  fontSize: \"20px\",\n                  fontWeight: 650,\n                  opacity: 0.8,\n                }}\n              >\n                {icon || (providerName ? providerName.charAt(0) : \"\")}\n              </div>\n            )}\n          </div>\n\n          {/* Status Badge */}\n          <div\n            style={{\n              display: \"inline-flex\",\n              alignItems: \"center\",\n              gap: \"6px\",\n              padding: \"4px 10px\",\n              borderRadius: \"4px\",\n              background: config.bgColor,\n              border: `1px solid ${config.borderColor}`,\n              fontSize: \"11px\",\n              fontWeight: 600,\n              letterSpacing: \"0.01em\",\n              color: config.color,\n              flexShrink: 0,\n            }}\n          >\n            {config.icon}\n            {config.label}\n          </div>\n        </div>\n\n        {/* Content */}\n        <div style={{ flex: 1, minHeight: 0 }}>\n          <h3\n            style={{\n              fontSize: \"15px\",\n              fontWeight: 650,\n              color: \"rgba(30, 33, 37, 0.92)\",\n              marginBottom: \"6px\",\n              letterSpacing: \"-0.01em\",\n            }}\n          >\n            {providerName}\n          </h3>\n          <p\n            style={{\n              fontSize: \"13px\",\n              lineHeight: 1.5,\n              color: \"rgba(30, 33, 37, 0.65)\",\n            }}\n          >\n            {description}\n          </p>\n        </div>\n\n        {/* Action Button - aligned to bottom */}\n        {status !== \"coming-soon\" && (\n          <button\n            onClick={(e) => {\n              e.stopPropagation();\n              onConfigure?.();\n            }}\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              gap: \"8px\",\n              padding: \"8px 14px\",\n              border: \"1px solid rgba(30, 33, 37, 0.15)\",\n              borderRadius: \"5px\",\n              background: status === \"connected\" ? \"transparent\" : \"rgba(30, 33, 37, 0.03)\",\n              fontSize: \"13px\",\n              fontWeight: 600,\n              color: \"rgba(30, 33, 37, 0.92)\",\n              cursor: \"pointer\",\n              transition: \"all 0.15s ease\",\n              width: \"100%\",\n              marginTop: \"auto\",\n            }}\n            className=\"hover:bg-[rgba(30,33,37,0.06)] hover:border-[rgba(30,33,37,0.20)]\"\n          >\n            <Settings size={14} strokeWidth={2.5} />\n            {status === \"connected\" ? \"Configure\" : \"Connect\"}\n          </button>\n        )}\n      </div>\n    </div>\n  );\n}\n\n"],"names":["IntegrationCard","providerName","description","status","railColor","logoUrl","icon","onConfigure","statusConfig","jsx","CheckCircle2","Circle","config","jsxs","e","Settings"],"mappings":"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"}
+{"version":3,"file":"IntegrationCard.es.js","sources":["../src/components/layout/IntegrationCard.jsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport { CheckCircle2, Settings2, CloudOff, CloudDownload } from \"lucide-react\";\n\n/**\n * IntegrationCard Component\n * Displays an integration provider card with status, logo, and configuration options\n *\n * Props:\n *  - providerName   string      Provider display name\n *  - description    string      Short description / subtitle\n *  - status         string      \"available\" | \"connected\" | \"coming-soon\"\n *  - logoUrl        string      Optional logo image URL\n *  - icon           ReactNode   Optional custom icon/logo element\n *  - onConnect      function    Connect/Disconnect callback\n *  - onConfigure    function    Configure (settings) callback — shown for connected\n */\nexport default function IntegrationCard({\n  providerName,\n  description,\n  status = \"available\",\n  logoUrl,\n  icon,\n  onConnect,\n  onConfigure,\n}) {\n  const isConnected = status === \"connected\";\n  const isComingSoon = status === \"coming-soon\";\n\n  const statusConfig = {\n    connected: {\n      label: \"Connected\",\n      color: \"var(--Grey-Strong, #808183)\",\n      icon: <CheckCircle2 size={16} strokeWidth={2} />,\n      actionLabel: \"Disconnect\",\n      actionFilled: false,\n    },\n    available: {\n      label: \"Available\",\n      color: \"var(--Grey-Strong, #808183)\",\n      icon: <CloudDownload size={16} strokeWidth={2} />,\n      actionLabel: \"Connect\",\n      actionFilled: true,\n    },\n    \"coming-soon\": {\n      label: \"Coming Soon\",\n      color: \"var(--Grey-Muted, #B2AEA8)\",\n      icon: <CloudOff size={16} strokeWidth={2} />,\n      actionLabel: \"Connect\",\n      actionFilled: false,\n    },\n  };\n\n  const config = statusConfig[status] || statusConfig.available;\n\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        width: \"317px\",\n        height: \"160px\",\n        padding: \"16px\",\n        flexDirection: \"column\",\n        alignItems: \"flex-start\",\n        gap: \"10px\",\n        borderRadius: \"4px\",\n        border: \"1px solid #D9D9D9\",\n        background: \"var(--Base-White, #FFF)\",\n      }}\n    >\n      {/* Top: Name + Description */}\n      <div style={{ flex: 1, width: \"100%\" }}>\n        {/* Provider Name / Logo */}\n        <div style={{ marginBottom: \"4px\" }}>\n          {logoUrl ? (\n            <img\n              src={logoUrl}\n              alt={providerName}\n              style={{ height: \"24px\", objectFit: \"contain\" }}\n            />\n          ) : icon ? (\n            <div style={{ display: \"flex\", alignItems: \"center\" }}>{icon}</div>\n          ) : (\n            <h3\n              style={{\n                fontSize: \"16px\",\n                fontWeight: 700,\n                color: \"var(--Base-Strong, #1E2125)\",\n                margin: 0,\n                lineHeight: 1.3,\n              }}\n            >\n              {providerName}\n            </h3>\n          )}\n        </div>\n        {/* Description */}\n        <p\n          style={{\n            fontSize: \"13px\",\n            lineHeight: 1.4,\n            color: \"var(--Grey-Strong, #808183)\",\n            margin: 0,\n          }}\n        >\n          {description}\n        </p>\n      </div>\n\n      {/* Bottom: Status + Actions */}\n      <div\n        style={{\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"space-between\",\n          width: \"100%\",\n          gap: \"8px\",\n        }}\n      >\n        {/* Status label */}\n        <div\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            gap: \"6px\",\n            fontSize: \"13px\",\n            fontWeight: 400,\n            color: config.color,\n          }}\n        >\n          {config.icon}\n          {config.label}\n        </div>\n\n        {/* Action area */}\n        <div style={{ display: \"flex\", alignItems: \"center\", gap: \"8px\" }}>\n          {/* Settings icon for connected */}\n          {isConnected && onConfigure && (\n            <button\n              onClick={(e) => {\n                e.stopPropagation();\n                onConfigure();\n              }}\n              style={{\n                display: \"flex\",\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                width: \"32px\",\n                height: \"32px\",\n                border: \"none\",\n                background: \"transparent\",\n                color: \"var(--Grey-Strong, #808183)\",\n                cursor: \"pointer\",\n                borderRadius: \"4px\",\n                transition: \"background 0.15s ease\",\n              }}\n              onMouseEnter={(e) => {\n                e.currentTarget.style.background = \"rgba(0,0,0,0.04)\";\n              }}\n              onMouseLeave={(e) => {\n                e.currentTarget.style.background = \"transparent\";\n              }}\n            >\n              <Settings2 size={20} strokeWidth={2} />\n            </button>\n          )}\n\n          {/* Connect / Disconnect button */}\n          <button\n            onClick={(e) => {\n              e.stopPropagation();\n              onConnect?.();\n            }}\n            disabled={isComingSoon}\n            style={{\n              display: \"flex\",\n              height: \"28px\",\n              padding: \"10px\",\n              justifyContent: \"center\",\n              alignItems: \"center\",\n              gap: \"10px\",\n              borderRadius: \"10px\",\n              border: config.actionFilled\n                ? \"1px solid transparent\"\n                : \"1px solid #D9D9D9\",\n              background: isComingSoon\n                ? \"var(--Grey-Muted, #B2AEA8)\"\n                : config.actionFilled\n                ? \"var(--Base-Strong, #1E2125)\"\n                : \"var(--Base-White, #FFF)\",\n              color: config.actionFilled || isComingSoon\n                ? \"#FFF\"\n                : \"var(--Base-Strong, #1E2125)\",\n              fontSize: \"13px\",\n              fontWeight: 600,\n              cursor: isComingSoon ? \"default\" : \"pointer\",\n              opacity: isComingSoon ? 0.6 : 1,\n              transition: \"all 0.15s ease\",\n              lineHeight: 1.4,\n            }}\n            onMouseEnter={(e) => {\n              if (!isComingSoon && !config.actionFilled) {\n                e.currentTarget.style.background = \"rgba(0,0,0,0.04)\";\n              }\n            }}\n            onMouseLeave={(e) => {\n              if (!isComingSoon && !config.actionFilled) {\n                e.currentTarget.style.background = \"var(--Base-White, #FFF)\";\n              }\n            }}\n          >\n            {config.actionLabel}\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["IntegrationCard","providerName","description","status","logoUrl","icon","onConnect","onConfigure","isConnected","isComingSoon","statusConfig","jsx","CheckCircle2","CloudDownload","CloudOff","config","jsxs","Settings2"],"mappings":"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"}

package/dist/SideDrawer.cjs.js

@@ -0,0 +1,2 @@
+"use strict";const e=require("react/jsx-runtime"),f=require("react"),b=require("lucide-react"),z=require("./TextInput.cjs.js"),k=require("./SmallButton.cjs.js"),L=({options:c=[],value:a=null,onChange:n,placeholder:o="Search...",disabled:d=!1,showSuggestions:l=!0,styling:y,isAddNew:p=!1})=>{const[s,u]=f.useState(""),[h,x]=f.useState(!1),[i,m]=f.useState(null),v=f.useRef(null),w=f.useMemo(()=>{if(!l)return[];const t=s.toLowerCase();return c.filter(r=>{if(!r)return!1;const g=r.label||"",j=r.value||"";return(g.toLowerCase().includes(t)||j.toLowerCase().includes(t))&&(!i||r.value!==i.value)})},[s,c,l,i]),S=f.useMemo(()=>{if(!p)return!1;const t=s.toLowerCase();return c.some(r=>{if(!r)return!1;const g=r.label||"",j=r.value||"";return g.toLowerCase()===t||j.toLowerCase()===t})},[c,s,p]);f.useEffect(()=>{if(!h)return;const t=r=>{v.current&&!v.current.contains(r.target)&&x(!1)};return document.addEventListener("mousedown",t),()=>document.removeEventListener("mousedown",t)},[h]);const E=t=>{n==null||n(t),u(""),x(!1),m(null)},F=()=>{const t={label:s,value:s};m(t),n==null||n(t),x(!1),u("")},B=()=>{n==null||n(null),u(""),x(!1),m(null)},D=t=>{const r=t.target.value;l?(u(r),x(!0)):p?(u(r),x(r.length>=3)):n==null||n(r)},I=()=>{(l||p)&&x(!0)},R=h&&!a&&s.length>=3;return e.jsxs("div",{className:"relative w-full",ref:v,children:[e.jsxs("div",{className:y||"flex items-center gap-2 border rounded-md px-3 py-2 bg-white shadow-sm",children:[e.jsx(b.Search,{className:"w-4 h-4 text-gray-400"}),e.jsx("div",{className:"flex-1",children:l&&a?e.jsx("div",{className:"text-gray-800 truncate",title:a.label,style:{fontSize:"var(--text-sm)",fontWeight:"var(--font-medium)",letterSpacing:"var(--tracking-normal)",lineHeight:"var(--leading-normal)",textTransform:"none",textDecoration:"none",fontFamily:"var(--font-sans)"},children:a.label}):e.jsx(z.TextInput,{value:l||p?s:a||"",onChange:t=>D({target:{value:t}}),placeholder:o,disabled:d,style:{border:"none",boxShadow:"none",padding:0,backgroundColor:"transparent"},onFocus:I})}),(a||i)&&e.jsx(k.SmallButton,{type:"button",variant:"ghost",size:"sm",onClick:B,style:{padding:0,width:20,height:20,border:"none",backgroundColor:"transparent",color:"rgba(107,114,128,1)"},children:e.jsx(b.X,{className:"w-3 h-3"})})]}),R&&e.jsxs("div",{className:"absolute w-full rounded-md border border-gray-300 bg-white shadow-lg custom-thin-scrollbar-library",style:{maxHeight:240,overflowY:"auto",zIndex:30},children:[w.length>0&&e.jsx("ul",{className:"m-0 p-0 list-none",children:w.map(t=>e.jsx("li",{onClick:()=>E(t),onMouseEnter:r=>{r.currentTarget.style.backgroundColor="var(--hover-warm)"},onMouseLeave:r=>{r.currentTarget.style.backgroundColor="transparent"},className:"cursor-pointer px-4 py-2",title:t.label,children:e.jsx("span",{className:"truncate block w-full",style:{fontFamily:"var(--font-sans)",color:"var(--text-base)",fontSize:"var(--text-sm)",fontWeight:"var(--font-medium)",letterSpacing:"var(--tracking-normal)",lineHeight:"var(--leading-normal)",textTransform:"none",textDecoration:"none"},children:t.label})},t.value))}),p&&!S&&!i&&s.length>=3&&e.jsxs(k.SmallButton,{type:"button",variant:"secondary",onClick:F,style:{width:"100%",justifyContent:"space-between",padding:"8px 10px",border:"none",borderTop:"1px solid rgba(229, 231, 235, 1)",borderRadius:0,backgroundColor:"transparent",color:"rgba(107,114,128,1)"},children:[e.jsx("span",{children:`Add "${s}"`}),e.jsx(b.PlusCircle,{className:"w-5 h-5 text-green-500"})]})]})]})};function M({open:c,onClose:a,title:n,subtitle:o,children:d,footer:l,width:y=515,height:p=762,toggleLabel:s,toggleChecked:u,onToggle:h}){const x=f.useRef(null);return f.useEffect(()=>{if(!c)return;const i=m=>{m.key==="Escape"&&(a==null||a())};return document.addEventListener("keydown",i),()=>document.removeEventListener("keydown",i)},[c,a]),c?e.jsxs(e.Fragment,{children:[e.jsx("div",{onClick:a,style:{position:"fixed",inset:0,zIndex:1200,background:"rgba(0, 0, 0, 0.20)"}}),e.jsxs("div",{ref:x,style:{position:"fixed",top:"50%",right:0,transform:"translateY(-50%)",zIndex:1201,display:"flex",width:y,height:p,maxHeight:"100vh",padding:"20px",flexDirection:"column",alignItems:"flex-start",gap:"20px",borderRadius:"12px 0 0 12px",background:"#FFF",boxShadow:"648px 0 100px 0 rgba(0, 0, 0, 0.20)"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%",flexShrink:0},children:[e.jsx("h2",{style:{fontSize:"20px",fontWeight:700,color:"var(--Base-Strong, #0B0B0B)",margin:0,lineHeight:1.3},children:n}),e.jsx("button",{onClick:a,style:{display:"flex",alignItems:"center",justifyContent:"center",width:"28px",height:"28px",border:"none",background:"transparent",color:"var(--Grey-Strong, #808183)",cursor:"pointer",borderRadius:"4px",transition:"background 0.15s ease"},onMouseEnter:i=>{i.currentTarget.style.background="#ECEEF2"},onMouseLeave:i=>{i.currentTarget.style.background="transparent"},children:e.jsx(b.X,{size:20,strokeWidth:2})})]}),e.jsx("div",{style:{width:"100%",height:"1px",background:"#ECEEF2",flexShrink:0}}),(o||s)&&e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%",gap:"12px",flexShrink:0},children:[o&&e.jsx("p",{style:{fontSize:"13px",lineHeight:1.5,color:"var(--Grey-Strong, #808183)",margin:0,flex:1},children:o}),s&&e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"8px",flexShrink:0},children:[e.jsx("button",{onClick:()=>h==null?void 0:h(!u),style:{position:"relative",width:"40px",height:"22px",borderRadius:"11px",border:"none",background:u?"var(--Base-Strong, #0B0B0B)":"var(--Base-Faint, #D9D9D9)",cursor:"pointer",transition:"background 0.2s ease",padding:0,flexShrink:0},children:e.jsx("div",{style:{position:"absolute",top:"2px",left:u?"20px":"2px",width:"18px",height:"18px",borderRadius:"50%",background:"#FFF",transition:"left 0.2s ease",boxShadow:"0 1px 3px rgba(0,0,0,0.15)"}})}),e.jsx("span",{style:{fontSize:"13px",fontWeight:500,color:"var(--Base-Strong, #1E1E1E)",lineHeight:1.4},children:s})]})]}),e.jsx("div",{style:{flex:1,width:"100%",overflowY:"auto",display:"flex",flexDirection:"column",gap:"16px",minHeight:0},children:d}),l&&e.jsxs(e.Fragment,{children:[e.jsx("div",{style:{width:"100%",height:"1px",background:"#ECEEF2",flexShrink:0}}),e.jsx("div",{style:{display:"flex",alignItems:"center",justifyContent:"flex-end",gap:"12px",width:"100%",flexShrink:0},children:l})]})]})]}):null}function H({label:c,variant:a="secondary",onClick:n,disabled:o}){const d=a==="primary";return e.jsx("button",{onClick:n,disabled:o,style:{display:"flex",height:"36px",padding:"0 20px",justifyContent:"center",alignItems:"center",gap:"8px",borderRadius:"6px",border:d?"none":"1px solid #D9D9D9",background:d?"var(--Base-Strong, #0B0B0B)":"var(--Base-White, #FFF)",color:d?"#FFF":"var(--Base-Strong, #1E1E1E)",fontSize:"14px",fontWeight:600,cursor:o?"default":"pointer",opacity:o?.5:1,transition:"all 0.15s ease"},onMouseEnter:l=>{!o&&!d&&(l.currentTarget.style.background="#ECEEF2")},onMouseLeave:l=>{!o&&!d&&(l.currentTarget.style.background="var(--Base-White, #FFF)")},children:c})}exports.AutoSearch=L;exports.DrawerButton=H;exports.SideDrawer=M;
+//# sourceMappingURL=SideDrawer.cjs.js.map

package/dist/SideDrawer.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideDrawer.cjs.js","sources":["../src/components/common/AutoSearch.jsx","../src/components/common/SideDrawer.jsx"],"sourcesContent":["\"use client\";\n\nimport React, { useState, useMemo, useRef, useEffect } from \"react\";\nimport { X, Search, PlusCircle } from \"lucide-react\";\nimport TextInput from \"../primitives/TextInput\";\nimport SmallButton from \"../primitives/SmallButton\";\n\nconst AutoSearch = ({\n  options = [],\n  value = null,\n  onChange,\n  placeholder = \"Search...\",\n  disabled = false,\n  showSuggestions = true,\n  styling,\n  isAddNew = false,\n}) => {\n  const [search, setSearch] = useState(\"\");\n  const [isOpen, setIsOpen] = useState(false);\n  const [addedOption, setAddedOption] = useState(null);\n\n  const containerRef = useRef(null);\n\n  const filteredOptions = useMemo(() => {\n    if (!showSuggestions) return [];\n    const lower = search.toLowerCase();\n\n    return options.filter((opt) => {\n      if (!opt) return false;\n      const label = opt.label || \"\";\n      const val = opt.value || \"\";\n      return (\n        (label.toLowerCase().includes(lower) ||\n          val.toLowerCase().includes(lower)) &&\n        (!addedOption || opt.value !== addedOption.value)\n      );\n    });\n  }, [search, options, showSuggestions, addedOption]);\n\n  const exactMatchExists = useMemo(() => {\n    if (!isAddNew) return false;\n    const lower = search.toLowerCase();\n    return options.some((opt) => {\n      if (!opt) return false;\n      const label = opt.label || \"\";\n      const val = opt.value || \"\";\n      return label.toLowerCase() === lower || val.toLowerCase() === lower;\n    });\n  }, [options, search, isAddNew]);\n\n  // Close dropdown on outside click\n  useEffect(() => {\n    if (!isOpen) return;\n    const handleClickOutside = (event) => {\n      if (\n        containerRef.current &&\n        !containerRef.current.contains(event.target)\n      ) {\n        setIsOpen(false);\n      }\n    };\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => document.removeEventListener(\"mousedown\", handleClickOutside);\n  }, [isOpen]);\n\n  const handleSelect = (opt) => {\n    onChange?.(opt);\n    setSearch(\"\");\n    setIsOpen(false);\n    setAddedOption(null);\n  };\n\n  const handleAddNew = () => {\n    const newOpt = { label: search, value: search };\n    setAddedOption(newOpt);\n    onChange?.(newOpt);\n    setIsOpen(false);\n    setSearch(\"\");\n  };\n\n  const handleClear = () => {\n    onChange?.(null);\n    setSearch(\"\");\n    setIsOpen(false);\n    setAddedOption(null);\n  };\n\n  const handleInputChange = (e) => {\n    const newValue = e.target.value;\n    if (showSuggestions) {\n      setSearch(newValue);\n      setIsOpen(true);\n    } else if (isAddNew) {\n      setSearch(newValue);\n      setIsOpen(newValue.length >= 3);\n    } else {\n      onChange?.(newValue);\n    }\n  };\n\n  const handleInputFocus = () => {\n    if (showSuggestions || isAddNew) {\n      setIsOpen(true);\n    }\n  };\n\n  const shouldShowDropdown =\n    isOpen && !value && (showSuggestions ? search.length >= 3 : search.length >= 3);\n\n  return (\n    <div className=\"relative w-full\" ref={containerRef}>\n      <div\n        className={\n          styling\n            ? styling\n            : \"flex items-center gap-2 border rounded-md px-3 py-2 bg-white shadow-sm\"\n        }\n      >\n        <Search className=\"w-4 h-4 text-gray-400\" />\n        <div className=\"flex-1\">\n          {showSuggestions && value ? (\n            <div\n              className=\"text-gray-800 truncate\"\n              title={value.label}\n              style={{\n                fontSize: 'var(--text-sm)',\n                fontWeight: 'var(--font-medium)',\n                letterSpacing: 'var(--tracking-normal)',\n                lineHeight: 'var(--leading-normal)',\n                textTransform: 'none',\n                textDecoration: 'none',\n                fontFamily: 'var(--font-sans)',\n              }}\n            >\n              {value.label}\n            </div>\n          ) : (\n            <TextInput\n              value={showSuggestions || isAddNew ? search : value || \"\"}\n              onChange={(val) =>\n                handleInputChange({ target: { value: val } })\n              }\n              placeholder={placeholder}\n              disabled={disabled}\n              style={{\n                border: \"none\",\n                boxShadow: \"none\",\n                padding: 0,\n                backgroundColor: \"transparent\",\n              }}\n              onFocus={handleInputFocus}\n            />\n          )}\n        </div>\n        {(value || addedOption) && (\n          <SmallButton\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"sm\"\n            onClick={handleClear}\n            style={{\n              padding: 0,\n              width: 20,\n              height: 20,\n              border: \"none\",\n              backgroundColor: \"transparent\",\n              color: \"rgba(107,114,128,1)\",\n            }}\n          >\n            <X className=\"w-3 h-3\" />\n          </SmallButton>\n        )}\n      </div>\n\n      {shouldShowDropdown && (\n        <div\n          className=\"absolute w-full rounded-md border border-gray-300 bg-white shadow-lg custom-thin-scrollbar-library\"\n          style={{\n            maxHeight: 240,\n            overflowY: \"auto\",\n            zIndex: 30,\n          }}\n        >\n          {filteredOptions.length > 0 && (\n            <ul className=\"m-0 p-0 list-none\">\n              {filteredOptions.map((opt) => (\n                <li\n                  key={opt.value}\n                  onClick={() => handleSelect(opt)}\n                  onMouseEnter={(e) => {\n                    e.currentTarget.style.backgroundColor = \"var(--hover-warm)\";\n                  }}\n                  onMouseLeave={(e) => {\n                    e.currentTarget.style.backgroundColor = \"transparent\";\n                  }}\n                  className=\"cursor-pointer px-4 py-2\"\n                  title={opt.label}\n                >\n                  <span\n                    className=\"truncate block w-full\"\n                    style={{\n                      fontFamily: \"var(--font-sans)\",\n                      color: \"var(--text-base)\",\n                      fontSize: \"var(--text-sm)\",\n                      fontWeight: \"var(--font-medium)\",\n                      letterSpacing: \"var(--tracking-normal)\",\n                      lineHeight: \"var(--leading-normal)\",\n                      textTransform: \"none\",\n                      textDecoration: \"none\",\n                    }}\n                  >\n                    {opt.label}\n                  </span>\n                </li>\n              ))}\n            </ul>\n          )}\n\n          {isAddNew &&\n            !exactMatchExists &&\n            !addedOption &&\n            search.length >= 3 && (\n              <SmallButton\n                type=\"button\"\n                variant=\"secondary\"\n                onClick={handleAddNew}\n                style={{\n                  width: \"100%\",\n                  justifyContent: \"space-between\",\n                  padding: \"8px 10px\",\n                  border: \"none\",\n                  borderTop: \"1px solid rgba(229, 231, 235, 1)\",\n                  borderRadius: 0,\n                  backgroundColor: \"transparent\",\n                  color: \"rgba(107,114,128,1)\",\n                }}\n              >\n                <span>{`Add \"${search}\"`}</span>\n                <PlusCircle className=\"w-5 h-5 text-green-500\" />\n              </SmallButton>\n            )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default AutoSearch;\n\n","\"use client\";\n\nimport React, { useEffect, useRef } from \"react\";\nimport { X } from \"lucide-react\";\n\n/**\n * SideDrawer — slide-in panel from the right edge.\n *\n * Props:\n *  - open          boolean       Whether the drawer is visible\n *  - onClose       function      Close callback\n *  - title         string        Header title\n *  - subtitle      string        Optional description below the divider\n *  - children      ReactNode     Drawer body content\n *  - footer        ReactNode     Optional fixed footer (e.g. Cancel/Save buttons)\n *  - width         number|string Drawer width (default 515)\n *  - height        number|string Drawer height (default 762)\n *  - toggleLabel   string        Optional toggle label (right side of subtitle row)\n *  - toggleChecked boolean       Toggle state\n *  - onToggle      function      Toggle callback\n */\nexport default function SideDrawer({\n  open,\n  onClose,\n  title,\n  subtitle,\n  children,\n  footer,\n  width = 515,\n  height = 762,\n  toggleLabel,\n  toggleChecked,\n  onToggle,\n}) {\n  const drawerRef = useRef(null);\n\n  // Close on Escape key\n  useEffect(() => {\n    if (!open) return;\n    const handleKey = (e) => {\n      if (e.key === \"Escape\") onClose?.();\n    };\n    document.addEventListener(\"keydown\", handleKey);\n    return () => document.removeEventListener(\"keydown\", handleKey);\n  }, [open, onClose]);\n\n  if (!open) return null;\n\n  return (\n    <>\n      {/* Backdrop */}\n      <div\n        onClick={onClose}\n        style={{\n          position: \"fixed\",\n          inset: 0,\n          zIndex: 1200,\n          background: \"rgba(0, 0, 0, 0.20)\",\n        }}\n      />\n\n      {/* Drawer panel */}\n      <div\n        ref={drawerRef}\n        style={{\n          position: \"fixed\",\n          top: \"50%\",\n          right: 0,\n          transform: \"translateY(-50%)\",\n          zIndex: 1201,\n          display: \"flex\",\n          width,\n          height,\n          maxHeight: \"100vh\",\n          padding: \"20px\",\n          flexDirection: \"column\",\n          alignItems: \"flex-start\",\n          gap: \"20px\",\n          borderRadius: \"12px 0 0 12px\",\n          background: \"#FFF\",\n          boxShadow: \"648px 0 100px 0 rgba(0, 0, 0, 0.20)\",\n        }}\n      >\n        {/* Header: Title + Close */}\n        <div\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"space-between\",\n            width: \"100%\",\n            flexShrink: 0,\n          }}\n        >\n          <h2\n            style={{\n              fontSize: \"20px\",\n              fontWeight: 700,\n              color: \"var(--Base-Strong, #0B0B0B)\",\n              margin: 0,\n              lineHeight: 1.3,\n            }}\n          >\n            {title}\n          </h2>\n          <button\n            onClick={onClose}\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              width: \"28px\",\n              height: \"28px\",\n              border: \"none\",\n              background: \"transparent\",\n              color: \"var(--Grey-Strong, #808183)\",\n              cursor: \"pointer\",\n              borderRadius: \"4px\",\n              transition: \"background 0.15s ease\",\n            }}\n            onMouseEnter={(e) => {\n              e.currentTarget.style.background = \"#ECEEF2\";\n            }}\n            onMouseLeave={(e) => {\n              e.currentTarget.style.background = \"transparent\";\n            }}\n          >\n            <X size={20} strokeWidth={2} />\n          </button>\n        </div>\n\n        {/* Divider */}\n        <div\n          style={{\n            width: \"100%\",\n            height: \"1px\",\n            background: \"#ECEEF2\",\n            flexShrink: 0,\n          }}\n        />\n\n        {/* Subtitle row with optional toggle */}\n        {(subtitle || toggleLabel) && (\n          <div\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"space-between\",\n              width: \"100%\",\n              gap: \"12px\",\n              flexShrink: 0,\n            }}\n          >\n            {subtitle && (\n              <p\n                style={{\n                  fontSize: \"13px\",\n                  lineHeight: 1.5,\n                  color: \"var(--Grey-Strong, #808183)\",\n                  margin: 0,\n                  flex: 1,\n                }}\n              >\n                {subtitle}\n              </p>\n            )}\n            {toggleLabel && (\n              <div\n                style={{\n                  display: \"flex\",\n                  alignItems: \"center\",\n                  gap: \"8px\",\n                  flexShrink: 0,\n                }}\n              >\n                {/* Toggle switch */}\n                <button\n                  onClick={() => onToggle?.(!toggleChecked)}\n                  style={{\n                    position: \"relative\",\n                    width: \"40px\",\n                    height: \"22px\",\n                    borderRadius: \"11px\",\n                    border: \"none\",\n                    background: toggleChecked\n                      ? \"var(--Base-Strong, #0B0B0B)\"\n                      : \"var(--Base-Faint, #D9D9D9)\",\n                    cursor: \"pointer\",\n                    transition: \"background 0.2s ease\",\n                    padding: 0,\n                    flexShrink: 0,\n                  }}\n                >\n                  <div\n                    style={{\n                      position: \"absolute\",\n                      top: \"2px\",\n                      left: toggleChecked ? \"20px\" : \"2px\",\n                      width: \"18px\",\n                      height: \"18px\",\n                      borderRadius: \"50%\",\n                      background: \"#FFF\",\n                      transition: \"left 0.2s ease\",\n                      boxShadow: \"0 1px 3px rgba(0,0,0,0.15)\",\n                    }}\n                  />\n                </button>\n                <span\n                  style={{\n                    fontSize: \"13px\",\n                    fontWeight: 500,\n                    color: \"var(--Base-Strong, #1E1E1E)\",\n                    lineHeight: 1.4,\n                  }}\n                >\n                  {toggleLabel}\n                </span>\n              </div>\n            )}\n          </div>\n        )}\n\n        {/* Body content — scrollable */}\n        <div\n          style={{\n            flex: 1,\n            width: \"100%\",\n            overflowY: \"auto\",\n            display: \"flex\",\n            flexDirection: \"column\",\n            gap: \"16px\",\n            minHeight: 0,\n          }}\n        >\n          {children}\n        </div>\n\n        {/* Footer */}\n        {footer && (\n          <>\n            <div\n              style={{\n                width: \"100%\",\n                height: \"1px\",\n                background: \"#ECEEF2\",\n                flexShrink: 0,\n              }}\n            />\n            <div\n              style={{\n                display: \"flex\",\n                alignItems: \"center\",\n                justifyContent: \"flex-end\",\n                gap: \"12px\",\n                width: \"100%\",\n                flexShrink: 0,\n              }}\n            >\n              {footer}\n            </div>\n          </>\n        )}\n      </div>\n    </>\n  );\n}\n\n/**\n * DrawerButton — standard button for use in SideDrawer footer.\n *\n * Props:\n *  - label     string\n *  - variant   \"primary\" | \"secondary\" (default \"secondary\")\n *  - onClick   function\n *  - disabled  boolean\n */\nexport function DrawerButton({\n  label,\n  variant = \"secondary\",\n  onClick,\n  disabled,\n}) {\n  const isPrimary = variant === \"primary\";\n\n  return (\n    <button\n      onClick={onClick}\n      disabled={disabled}\n      style={{\n        display: \"flex\",\n        height: \"36px\",\n        padding: \"0 20px\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n        gap: \"8px\",\n        borderRadius: \"6px\",\n        border: isPrimary ? \"none\" : \"1px solid #D9D9D9\",\n        background: isPrimary\n          ? \"var(--Base-Strong, #0B0B0B)\"\n          : \"var(--Base-White, #FFF)\",\n        color: isPrimary ? \"#FFF\" : \"var(--Base-Strong, #1E1E1E)\",\n        fontSize: \"14px\",\n        fontWeight: 600,\n        cursor: disabled ? \"default\" : \"pointer\",\n        opacity: disabled ? 0.5 : 1,\n        transition: \"all 0.15s ease\",\n      }}\n      onMouseEnter={(e) => {\n        if (!disabled && !isPrimary) {\n          e.currentTarget.style.background = \"#ECEEF2\";\n        }\n      }}\n      onMouseLeave={(e) => {\n        if (!disabled && !isPrimary) {\n          e.currentTarget.style.background = \"var(--Base-White, #FFF)\";\n        }\n      }}\n    >\n      {label}\n    </button>\n  );\n}\n"],"names":["AutoSearch","options","value","onChange","placeholder","disabled","showSuggestions","styling","isAddNew","search","setSearch","useState","isOpen","setIsOpen","addedOption","setAddedOption","containerRef","useRef","filteredOptions","useMemo","lower","opt","label","val","exactMatchExists","useEffect","handleClickOutside","event","handleSelect","handleAddNew","newOpt","handleClear","handleInputChange","e","newValue","handleInputFocus","shouldShowDropdown","jsxs","jsx","Search","TextInput","SmallButton","X","PlusCircle","SideDrawer","open","onClose","title","subtitle","children","footer","width","height","toggleLabel","toggleChecked","onToggle","drawerRef","handleKey","Fragment","DrawerButton","variant","onClick","isPrimary"],"mappings":"iKAOMA,EAAa,CAAC,CAClB,QAAAC,EAAU,CAAC,EACX,MAAAC,EAAQ,KACR,SAAAC,EACA,YAAAC,EAAc,YACd,SAAAC,EAAW,GACX,gBAAAC,EAAkB,GAClB,QAAAC,EACA,SAAAC,EAAW,EACb,IAAM,CACJ,KAAM,CAACC,EAAQC,CAAS,EAAIC,WAAS,EAAE,EACjC,CAACC,EAAQC,CAAS,EAAIF,WAAS,EAAK,EACpC,CAACG,EAAaC,CAAc,EAAIJ,WAAS,IAAI,EAE7CK,EAAeC,SAAO,IAAI,EAE1BC,EAAkBC,EAAAA,QAAQ,IAAM,CACpC,GAAI,CAACb,EAAiB,MAAO,GACvB,MAAAc,EAAQX,EAAO,cAEd,OAAAR,EAAQ,OAAQoB,GAAQ,CAC7B,GAAI,CAACA,EAAY,MAAA,GACX,MAAAC,EAAQD,EAAI,OAAS,GACrBE,EAAMF,EAAI,OAAS,GACzB,OACGC,EAAM,YAAY,EAAE,SAASF,CAAK,GACjCG,EAAI,YAAA,EAAc,SAASH,CAAK,KACjC,CAACN,GAAeO,EAAI,QAAUP,EAAY,MAAA,CAE9C,GACA,CAACL,EAAQR,EAASK,EAAiBQ,CAAW,CAAC,EAE5CU,EAAmBL,EAAAA,QAAQ,IAAM,CACrC,GAAI,CAACX,EAAiB,MAAA,GAChB,MAAAY,EAAQX,EAAO,cACd,OAAAR,EAAQ,KAAMoB,GAAQ,CAC3B,GAAI,CAACA,EAAY,MAAA,GACX,MAAAC,EAAQD,EAAI,OAAS,GACrBE,EAAMF,EAAI,OAAS,GACzB,OAAOC,EAAM,gBAAkBF,GAASG,EAAI,YAAkB,IAAAH,CAAA,CAC/D,CACA,EAAA,CAACnB,EAASQ,EAAQD,CAAQ,CAAC,EAG9BiB,EAAAA,UAAU,IAAM,CACd,GAAI,CAACb,EAAQ,OACP,MAAAc,EAAsBC,GAAU,CAElCX,EAAa,SACb,CAACA,EAAa,QAAQ,SAASW,EAAM,MAAM,GAE3Cd,EAAU,EAAK,CACjB,EAEO,gBAAA,iBAAiB,YAAaa,CAAkB,EAClD,IAAM,SAAS,oBAAoB,YAAaA,CAAkB,CAAA,EACxE,CAACd,CAAM,CAAC,EAEL,MAAAgB,EAAgBP,GAAQ,CAC5BlB,GAAA,MAAAA,EAAWkB,GACXX,EAAU,EAAE,EACZG,EAAU,EAAK,EACfE,EAAe,IAAI,CAAA,EAGfc,EAAe,IAAM,CACzB,MAAMC,EAAS,CAAE,MAAOrB,EAAQ,MAAOA,CAAO,EAC9CM,EAAee,CAAM,EACrB3B,GAAA,MAAAA,EAAW2B,GACXjB,EAAU,EAAK,EACfH,EAAU,EAAE,CAAA,EAGRqB,EAAc,IAAM,CACxB5B,GAAA,MAAAA,EAAW,MACXO,EAAU,EAAE,EACZG,EAAU,EAAK,EACfE,EAAe,IAAI,CAAA,EAGfiB,EAAqBC,GAAM,CACzB,MAAAC,EAAWD,EAAE,OAAO,MACtB3B,GACFI,EAAUwB,CAAQ,EAClBrB,EAAU,EAAI,GACLL,GACTE,EAAUwB,CAAQ,EACRrB,EAAAqB,EAAS,QAAU,CAAC,GAE9B/B,GAAA,MAAAA,EAAW+B,EACb,EAGIC,EAAmB,IAAM,EACzB7B,GAAmBE,IACrBK,EAAU,EAAI,CAChB,EAGIuB,EACJxB,GAAU,CAACV,GAA4BO,EAAO,QAAU,EAE1D,OACG4B,EAAAA,KAAA,MAAA,CAAI,UAAU,kBAAkB,IAAKrB,EACpC,SAAA,CAAAqB,EAAA,KAAC,MAAA,CACC,UACE9B,GAEI,yEAGN,SAAA,CAAC+B,EAAAA,IAAAC,EAAA,OAAA,CAAO,UAAU,uBAAwB,CAAA,EACzCD,EAAA,IAAA,MAAA,CAAI,UAAU,SACZ,YAAmBpC,EAClBoC,EAAA,IAAC,MAAA,CACC,UAAU,yBACV,MAAOpC,EAAM,MACb,MAAO,CACL,SAAU,iBACV,WAAY,qBACZ,cAAe,yBACf,WAAY,wBACZ,cAAe,OACf,eAAgB,OAChB,WAAY,kBACd,EAEC,SAAMA,EAAA,KAAA,CAAA,EAGToC,EAAA,IAACE,EAAA,UAAA,CACC,MAAOlC,GAAmBE,EAAWC,EAASP,GAAS,GACvD,SAAWqB,GACTS,EAAkB,CAAE,OAAQ,CAAE,MAAOT,CAAI,EAAG,EAE9C,YAAAnB,EACA,SAAAC,EACA,MAAO,CACL,OAAQ,OACR,UAAW,OACX,QAAS,EACT,gBAAiB,aACnB,EACA,QAAS8B,CAAA,CAAA,EAGf,GACEjC,GAASY,IACTwB,EAAA,IAACG,EAAA,YAAA,CACC,KAAK,SACL,QAAQ,QACR,KAAK,KACL,QAASV,EACT,MAAO,CACL,QAAS,EACT,MAAO,GACP,OAAQ,GACR,OAAQ,OACR,gBAAiB,cACjB,MAAO,qBACT,EAEA,SAAAO,EAAAA,IAACI,EAAAA,EAAE,CAAA,UAAU,SAAU,CAAA,CAAA,CACzB,CAAA,CAAA,CAEJ,EAECN,GACCC,EAAA,KAAC,MAAA,CACC,UAAU,qGACV,MAAO,CACL,UAAW,IACX,UAAW,OACX,OAAQ,EACV,EAEC,SAAA,CAAgBnB,EAAA,OAAS,GACvBoB,EAAA,IAAA,KAAA,CAAG,UAAU,oBACX,SAAApB,EAAgB,IAAKG,GACpBiB,EAAA,IAAC,KAAA,CAEC,QAAS,IAAMV,EAAaP,CAAG,EAC/B,aAAeY,GAAM,CACjBA,EAAA,cAAc,MAAM,gBAAkB,mBAC1C,EACA,aAAeA,GAAM,CACjBA,EAAA,cAAc,MAAM,gBAAkB,aAC1C,EACA,UAAU,2BACV,MAAOZ,EAAI,MAEX,SAAAiB,EAAA,IAAC,OAAA,CACC,UAAU,wBACV,MAAO,CACL,WAAY,mBACZ,MAAO,mBACP,SAAU,iBACV,WAAY,qBACZ,cAAe,yBACf,WAAY,wBACZ,cAAe,OACf,eAAgB,MAClB,EAEC,SAAIjB,EAAA,KAAA,CACP,CAAA,EAzBKA,EAAI,KA2BZ,CAAA,EACH,EAGDb,GACC,CAACgB,GACD,CAACV,GACDL,EAAO,QAAU,GACf4B,EAAA,KAACI,EAAA,YAAA,CACC,KAAK,SACL,QAAQ,YACR,QAASZ,EACT,MAAO,CACL,MAAO,OACP,eAAgB,gBAChB,QAAS,WACT,OAAQ,OACR,UAAW,mCACX,aAAc,EACd,gBAAiB,cACjB,MAAO,qBACT,EAEA,SAAA,CAACS,EAAA,IAAA,OAAA,CAAM,SAAQ,QAAA7B,CAAM,IAAI,EACzB6B,EAAAA,IAACK,EAAW,WAAA,CAAA,UAAU,wBAAyB,CAAA,CAAA,CAAA,CACjD,CAAA,CAAA,CAEN,CAEJ,CAAA,CAAA,CAEJ,EChOA,SAAwBC,EAAW,CACjC,KAAAC,EACA,QAAAC,EACA,MAAAC,EACA,SAAAC,EACA,SAAAC,EACA,OAAAC,EACA,MAAAC,EAAQ,IACR,OAAAC,EAAS,IACT,YAAAC,EACA,cAAAC,EACA,SAAAC,CACF,EAAG,CACK,MAAAC,EAAYvC,SAAO,IAAI,EAY7B,OATAQ,EAAAA,UAAU,IAAM,CACd,GAAI,CAACoB,EAAM,OACL,MAAAY,EAAaxB,GAAM,CACnBA,EAAE,MAAQ,WAAoBa,GAAA,MAAAA,IAAA,EAE3B,gBAAA,iBAAiB,UAAWW,CAAS,EACvC,IAAM,SAAS,oBAAoB,UAAWA,CAAS,CAAA,EAC7D,CAACZ,EAAMC,CAAO,CAAC,EAEbD,EAKDR,EAAA,KAAAqB,WAAA,CAAA,SAAA,CAAApB,EAAA,IAAC,MAAA,CACC,QAASQ,EACT,MAAO,CACL,SAAU,QACV,MAAO,EACP,OAAQ,KACR,WAAY,qBACd,CAAA,CACF,EAGAT,EAAA,KAAC,MAAA,CACC,IAAKmB,EACL,MAAO,CACL,SAAU,QACV,IAAK,MACL,MAAO,EACP,UAAW,mBACX,OAAQ,KACR,QAAS,OACT,MAAAL,EACA,OAAAC,EACA,UAAW,QACX,QAAS,OACT,cAAe,SACf,WAAY,aACZ,IAAK,OACL,aAAc,gBACd,WAAY,OACZ,UAAW,qCACb,EAGA,SAAA,CAAAf,EAAA,KAAC,MAAA,CACC,MAAO,CACL,QAAS,OACT,WAAY,SACZ,eAAgB,gBAChB,MAAO,OACP,WAAY,CACd,EAEA,SAAA,CAAAC,EAAA,IAAC,KAAA,CACC,MAAO,CACL,SAAU,OACV,WAAY,IACZ,MAAO,8BACP,OAAQ,EACR,WAAY,GACd,EAEC,SAAAS,CAAA,CACH,EACAT,EAAA,IAAC,SAAA,CACC,QAASQ,EACT,MAAO,CACL,QAAS,OACT,WAAY,SACZ,eAAgB,SAChB,MAAO,OACP,OAAQ,OACR,OAAQ,OACR,WAAY,cACZ,MAAO,8BACP,OAAQ,UACR,aAAc,MACd,WAAY,uBACd,EACA,aAAeb,GAAM,CACjBA,EAAA,cAAc,MAAM,WAAa,SACrC,EACA,aAAeA,GAAM,CACjBA,EAAA,cAAc,MAAM,WAAa,aACrC,EAEA,SAACK,EAAA,IAAAI,IAAA,CAAE,KAAM,GAAI,YAAa,EAAG,CAAA,CAC/B,CAAA,CAAA,CACF,EAGAJ,EAAA,IAAC,MAAA,CACC,MAAO,CACL,MAAO,OACP,OAAQ,MACR,WAAY,UACZ,WAAY,CACd,CAAA,CACF,GAGEU,GAAYK,IACZhB,EAAA,KAAC,MAAA,CACC,MAAO,CACL,QAAS,OACT,WAAY,SACZ,eAAgB,gBAChB,MAAO,OACP,IAAK,OACL,WAAY,CACd,EAEC,SAAA,CACCW,GAAAV,EAAA,IAAC,IAAA,CACC,MAAO,CACL,SAAU,OACV,WAAY,IACZ,MAAO,8BACP,OAAQ,EACR,KAAM,CACR,EAEC,SAAAU,CAAA,CACH,EAEDK,GACChB,EAAA,KAAC,MAAA,CACC,MAAO,CACL,QAAS,OACT,WAAY,SACZ,IAAK,MACL,WAAY,CACd,EAGA,SAAA,CAAAC,EAAA,IAAC,SAAA,CACC,QAAS,IAAMiB,GAAA,YAAAA,EAAW,CAACD,GAC3B,MAAO,CACL,SAAU,WACV,MAAO,OACP,OAAQ,OACR,aAAc,OACd,OAAQ,OACR,WAAYA,EACR,8BACA,6BACJ,OAAQ,UACR,WAAY,uBACZ,QAAS,EACT,WAAY,CACd,EAEA,SAAAhB,EAAA,IAAC,MAAA,CACC,MAAO,CACL,SAAU,WACV,IAAK,MACL,KAAMgB,EAAgB,OAAS,MAC/B,MAAO,OACP,OAAQ,OACR,aAAc,MACd,WAAY,OACZ,WAAY,iBACZ,UAAW,4BACb,CAAA,CACF,CAAA,CACF,EACAhB,EAAA,IAAC,OAAA,CACC,MAAO,CACL,SAAU,OACV,WAAY,IACZ,MAAO,8BACP,WAAY,GACd,EAEC,SAAAe,CAAA,CACH,CAAA,CAAA,CACF,CAAA,CAAA,CAEJ,EAIFf,EAAA,IAAC,MAAA,CACC,MAAO,CACL,KAAM,EACN,MAAO,OACP,UAAW,OACX,QAAS,OACT,cAAe,SACf,IAAK,OACL,UAAW,CACb,EAEC,SAAAW,CAAA,CACH,EAGCC,GAEGb,EAAA,KAAAqB,WAAA,CAAA,SAAA,CAAApB,EAAA,IAAC,MAAA,CACC,MAAO,CACL,MAAO,OACP,OAAQ,MACR,WAAY,UACZ,WAAY,CACd,CAAA,CACF,EACAA,EAAA,IAAC,MAAA,CACC,MAAO,CACL,QAAS,OACT,WAAY,SACZ,eAAgB,WAChB,IAAK,OACL,MAAO,OACP,WAAY,CACd,EAEC,SAAAY,CAAA,CACH,CAAA,EACF,CAAA,CAAA,CAEJ,CACF,CAAA,CAAA,EAxNgB,IA0NpB,CAWO,SAASS,EAAa,CAC3B,MAAArC,EACA,QAAAsC,EAAU,YACV,QAAAC,EACA,SAAAxD,CACF,EAAG,CACD,MAAMyD,EAAYF,IAAY,UAG5B,OAAAtB,EAAA,IAAC,SAAA,CACC,QAAAuB,EACA,SAAAxD,EACA,MAAO,CACL,QAAS,OACT,OAAQ,OACR,QAAS,SACT,eAAgB,SAChB,WAAY,SACZ,IAAK,MACL,aAAc,MACd,OAAQyD,EAAY,OAAS,oBAC7B,WAAYA,EACR,8BACA,0BACJ,MAAOA,EAAY,OAAS,8BAC5B,SAAU,OACV,WAAY,IACZ,OAAQzD,EAAW,UAAY,UAC/B,QAASA,EAAW,GAAM,EAC1B,WAAY,gBACd,EACA,aAAe4B,GAAM,CACf,CAAC5B,GAAY,CAACyD,IACd7B,EAAA,cAAc,MAAM,WAAa,UAEvC,EACA,aAAeA,GAAM,CACf,CAAC5B,GAAY,CAACyD,IACd7B,EAAA,cAAc,MAAM,WAAa,0BAEvC,EAEC,SAAAX,CAAA,CAAA,CAGP"}