@orion-ds/react 4.7.0 → 4.9.0

package/dist/index28 2.mjs

@@ -1,193 +0,0 @@
-import { jsx as a, jsxs as n, Fragment as j } from "react/jsx-runtime";
-import { forwardRef as z, useState as E, useRef as C, useMemo as v, useEffect as y, useCallback as A } from "react";
-import { Search as q, Command as F } from "lucide-react";
-import s from "./index102.mjs";
-const G = z(
-  ({
-    open: u,
-    onOpenChange: o,
-    commands: p,
-    recentCommands: i,
-    onSelect: L,
-    placeholder: $ = "Type a command or search...",
-    emptyMessage: I = "No results found.",
-    footer: k,
-    className: K,
-    ...M
-  }, R) => {
-    const [r, w] = E(""), [c, d] = E(0), g = C(null), x = C(null), D = v(() => {
-      if (!r) return p;
-      const e = r.toLowerCase();
-      return p.filter((t) => {
-        const l = t.label.toLowerCase().includes(e), m = t.description?.toLowerCase().includes(e), b = t.keywords?.some(
-          (T) => T.toLowerCase().includes(e)
-        );
-        return l || m || b;
-      });
-    }, [p, r]), f = v(() => {
-      const e = [], t = [];
-      return D.forEach((l) => {
-        if (l.category) {
-          const m = e.find((b) => b.title === l.category);
-          m ? m.commands.push(l) : e.push({ title: l.category, commands: [l] });
-        } else
-          t.push(l);
-      }), t.length > 0 && e.unshift({ title: "", commands: t }), e;
-    }, [D]), h = v(() => {
-      const e = [];
-      return i && i.length > 0 && !r && e.push(...i), f.forEach((t) => {
-        e.push(...t.commands);
-      }), e;
-    }, [f, i, r]);
-    y(() => {
-      u && (w(""), d(0), setTimeout(() => g.current?.focus(), 0));
-    }, [u]);
-    const B = A(
-      (e) => {
-        switch (e.key) {
-          case "ArrowDown":
-            e.preventDefault(), d((t) => Math.min(t + 1, h.length - 1));
-            break;
-          case "ArrowUp":
-            e.preventDefault(), d((t) => Math.max(t - 1, 0));
-            break;
-          case "Enter": {
-            e.preventDefault();
-            const t = h[c];
-            t && !t.disabled && N(t);
-            break;
-          }
-          case "Escape":
-            e.preventDefault(), o(!1);
-            break;
-        }
-      },
-      [h, c, o]
-    ), N = (e) => {
-      L?.(e), e.onSelect(), o(!1);
-    };
-    if (y(() => {
-      const e = x.current;
-      if (!e) return;
-      const t = e.querySelector(`[data-index="${c}"]`);
-      t && t.scrollIntoView({ block: "nearest" });
-    }, [c]), y(() => {
-      const e = (t) => {
-        (t.metaKey || t.ctrlKey) && t.key === "k" && (t.preventDefault(), o(!u));
-      };
-      return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-    }, [u, o]), !u) return null;
-    const H = [s.commandBar, K].filter(Boolean).join(" ");
-    let S = 0;
-    return /* @__PURE__ */ a("div", { className: s.overlay, onClick: () => o(!1), children: /* @__PURE__ */ n(
-      "div",
-      {
-        ref: R,
-        className: H,
-        onClick: (e) => e.stopPropagation(),
-        onKeyDown: B,
-        ...M,
-        children: [
-          /* @__PURE__ */ n("div", { className: s.inputWrapper, children: [
-            /* @__PURE__ */ a(q, { size: 18, className: s.searchIcon }),
-            /* @__PURE__ */ a(
-              "input",
-              {
-                ref: g,
-                type: "text",
-                className: s.input,
-                placeholder: $,
-                value: r,
-                onChange: (e) => {
-                  w(e.target.value), d(0);
-                },
-                autoComplete: "off",
-                autoCorrect: "off",
-                spellCheck: !1
-              }
-            ),
-            /* @__PURE__ */ a("kbd", { className: s.shortcutHint, children: "ESC" })
-          ] }),
-          /* @__PURE__ */ a("div", { ref: x, className: s.results, children: h.length === 0 ? /* @__PURE__ */ a("div", { className: s.empty, children: I }) : /* @__PURE__ */ n(j, { children: [
-            i && i.length > 0 && !r && /* @__PURE__ */ n("div", { className: s.group, children: [
-              /* @__PURE__ */ a("div", { className: s.groupTitle, children: "Recent" }),
-              i.map((e) => {
-                const t = S++;
-                return /* @__PURE__ */ n(
-                  "button",
-                  {
-                    type: "button",
-                    "data-index": t,
-                    className: `${s.item} ${t === c ? s.itemSelected : ""} ${e.disabled ? s.itemDisabled : ""}`,
-                    onClick: () => !e.disabled && N(e),
-                    onMouseEnter: () => d(t),
-                    children: [
-                      e.icon && /* @__PURE__ */ a("span", { className: s.itemIcon, children: e.icon }),
-                      /* @__PURE__ */ n("span", { className: s.itemContent, children: [
-                        /* @__PURE__ */ a("span", { className: s.itemLabel, children: e.label }),
-                        e.description && /* @__PURE__ */ a("span", { className: s.itemDescription, children: e.description })
-                      ] }),
-                      e.shortcut && /* @__PURE__ */ a("kbd", { className: s.itemShortcut, children: e.shortcut })
-                    ]
-                  },
-                  `recent-${e.id}`
-                );
-              })
-            ] }),
-            f.map((e) => /* @__PURE__ */ n(
-              "div",
-              {
-                className: s.group,
-                children: [
-                  e.title && /* @__PURE__ */ a("div", { className: s.groupTitle, children: e.title }),
-                  e.commands.map((t) => {
-                    const l = S++;
-                    return /* @__PURE__ */ n(
-                      "button",
-                      {
-                        type: "button",
-                        "data-index": l,
-                        className: `${s.item} ${l === c ? s.itemSelected : ""} ${t.disabled ? s.itemDisabled : ""}`,
-                        onClick: () => !t.disabled && N(t),
-                        onMouseEnter: () => d(l),
-                        children: [
-                          t.icon && /* @__PURE__ */ a("span", { className: s.itemIcon, children: t.icon }),
-                          /* @__PURE__ */ n("span", { className: s.itemContent, children: [
-                            /* @__PURE__ */ a("span", { className: s.itemLabel, children: t.label }),
-                            t.description && /* @__PURE__ */ a("span", { className: s.itemDescription, children: t.description })
-                          ] }),
-                          t.shortcut && /* @__PURE__ */ a("kbd", { className: s.itemShortcut, children: t.shortcut })
-                        ]
-                      },
-                      t.id
-                    );
-                  })
-                ]
-              },
-              e.title || "ungrouped"
-            ))
-          ] }) }),
-          k ? /* @__PURE__ */ a("div", { className: s.footer, children: k }) : /* @__PURE__ */ n("div", { className: s.footer, children: [
-            /* @__PURE__ */ n("span", { className: s.footerHint, children: [
-              /* @__PURE__ */ a(F, { size: 12 }),
-              " ",
-              /* @__PURE__ */ a("span", { children: "K to toggle" })
-            ] }),
-            /* @__PURE__ */ n("span", { className: s.footerHint, children: [
-              /* @__PURE__ */ a("span", { children: "↑↓" }),
-              " to navigate"
-            ] }),
-            /* @__PURE__ */ n("span", { className: s.footerHint, children: [
-              /* @__PURE__ */ a("span", { children: "↵" }),
-              " to select"
-            ] })
-          ] })
-        ]
-      }
-    ) });
-  }
-);
-G.displayName = "CommandBar";
-export {
-  G as CommandBar
-};

package/dist/index29 2.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),c=require("react"),e=require("./index182.cjs"),t=c.forwardRef(({size:r="lg",centered:n=!0,padded:a=!0,className:o,children:i,...s},u)=>{const d=[e.default.container,e.default[r],n&&e.default.centered,a&&e.default.padded,o].filter(Boolean).join(" ");return l.jsx("div",{ref:u,className:d,...s,children:i})});t.displayName="Container";exports.Container=t;

package/dist/index29 2.mjs

@@ -1,26 +0,0 @@
-import { jsx as d } from "react/jsx-runtime";
-import { forwardRef as l } from "react";
-import e from "./index182.mjs";
-const c = l(
-  ({
-    size: r = "lg",
-    centered: o = !0,
-    padded: t = !0,
-    className: a,
-    children: n,
-    ...s
-  }, i) => {
-    const m = [
-      e.container,
-      e[r],
-      o && e.centered,
-      t && e.padded,
-      a
-    ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ d("div", { ref: i, className: m, ...s, children: n });
-  }
-);
-c.displayName = "Container";
-export {
-  c as Container
-};

package/dist/index3 2.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),P=require("./index94.cjs"),n=require("./index54.cjs"),t=require("./index14.cjs"),L=require("./index13.cjs"),W=require("./index74.cjs"),B=require("./index38.cjs"),M=require("./index64.cjs"),R=require("./index73.cjs"),y=require("./index21.cjs"),f=require("./index61.cjs"),S=require("./index70.cjs"),i=require("./index16.cjs"),s=require("./index11.cjs"),p=require("./index8.cjs"),l=require("./index68.cjs"),h=require("./index59.cjs"),d=require("./index10.cjs"),g=require("./index79.cjs"),N=require("./index72.cjs"),E=require("./index71.cjs"),v=require("./index52.cjs"),F=[{id:1,name:"Alice Johnson",email:"alice@example.com",status:"active"},{id:2,name:"Bob Smith",email:"bob@example.com",status:"active"},{id:3,name:"Charlie Davis",email:"charlie@example.com",status:"inactive"}],O=[{key:"name",header:"Name",sortable:!0},{key:"email",header:"Email",sortable:!0},{key:"status",header:"Status",cell:o=>e.jsx(s.Badge,{variant:o.status==="active"?"success":"secondary",children:o.status}),align:"center"}],H=()=>{const{theme:o,toggleTheme:u}=P.useTheme(),[m,x]=c.useState(!1),[C,w]=c.useState("tab1"),[T,k]=c.useState(!1),[z,q]=c.useState(!1),[j,b]=c.useState("option1"),[A,D]=c.useState("");return e.jsxs("div",{style:{minHeight:"100vh",background:"var(--surface-base)"},children:[e.jsxs(n.Navbar,{sticky:!0,bordered:!0,children:[e.jsxs(n.Navbar.Brand,{children:[e.jsx("span",{style:{fontSize:"24px"},children:"⚡"}),"Orion Design System"]}),e.jsxs(n.Navbar.Nav,{children:[e.jsx(n.Navbar.Link,{href:"#components",active:!0,children:"Components"}),e.jsx(n.Navbar.Link,{href:"#docs",children:"Documentation"}),e.jsx(n.Navbar.Link,{href:"#examples",children:"Examples"})]}),e.jsxs(n.Navbar.Actions,{children:[e.jsx(t.Button,{variant:"ghost",size:"sm",onClick:u,children:o==="light"?"🌙":"☀️"}),e.jsx(t.Button,{size:"sm",children:"Get Started"})]})]}),e.jsxs("div",{style:{padding:"var(--spacing-8) var(--spacing-4)",maxWidth:"1200px",margin:"0 auto"},children:[e.jsxs("div",{style:{marginBottom:"var(--spacing-8)"},children:[e.jsx("h1",{style:{fontSize:"var(--text-4xl)",fontWeight:"var(--font-weight-bold)",color:"var(--text-primary)",marginBottom:"var(--spacing-2)"},children:"Component Showcase"}),e.jsx("p",{style:{fontSize:"var(--text-lg)",color:"var(--text-secondary)"},children:"All 21 React components from the Orion Design System"}),e.jsx("div",{style:{marginTop:"var(--spacing-4)"},children:e.jsx(L.Breadcrumb,{items:[{label:"Home",href:"/"},{label:"Components",href:"/components"},{label:"Showcase"}],showHomeIcon:!0})})]}),e.jsx(W.ThemeController,{showBrandSelector:!0,showThemeToggle:!0,showSummary:!0,style:{marginBottom:"var(--spacing-6)"}}),e.jsx(a,{title:"Buttons",description:"Action triggers with multiple variants and sizes",children:e.jsxs("div",{style:{display:"flex",gap:"var(--spacing-3)",flexWrap:"wrap",alignItems:"center"},children:[e.jsx(t.Button,{variant:"primary",children:"Primary"}),e.jsx(t.Button,{variant:"secondary",children:"Secondary"}),e.jsx(t.Button,{variant:"ghost",children:"Ghost"}),e.jsx(t.Button,{variant:"danger",children:"Danger"}),e.jsx(t.Button,{size:"sm",children:"Small"}),e.jsx(t.Button,{size:"lg",children:"Large"}),e.jsx(t.Button,{isLoading:!0,children:"Loading"}),e.jsx(t.Button,{disabled:!0,children:"Disabled"})]})}),e.jsx(a,{title:"Form Controls",description:"Input fields and selection components",children:e.jsxs("div",{style:{display:"grid",gap:"var(--spacing-4)",maxWidth:"600px"},children:[e.jsx(B.Field,{label:"Email",type:"email",placeholder:"you@example.com",helperText:"We'll never share your email"}),e.jsx(B.Field,{label:"Password",type:"password",error:"Password must be at least 8 characters"}),e.jsx(M.Select,{label:"Country",value:A,onChange:r=>D(r.target.value),options:[{label:"United States",value:"us"},{label:"Canada",value:"ca"},{label:"Mexico",value:"mx"}]}),e.jsx(R.Textarea,{label:"Bio",placeholder:"Tell us about yourself...",maxLength:200,showCounter:!0,helperText:"Maximum 200 characters"})]})}),e.jsx(a,{title:"Checkbox & Radio",description:"Selection controls",children:e.jsxs("div",{style:{display:"grid",gap:"var(--spacing-4)"},children:[e.jsxs("div",{children:[e.jsx("h4",{style:{fontSize:"var(--text-base)",fontWeight:"var(--font-weight-medium)",color:"var(--text-primary)",marginBottom:"var(--spacing-2)"},children:"Checkbox"}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"var(--spacing-2)"},children:[e.jsx(y.Checkbox,{label:"Accept terms and conditions",checked:z,onChange:r=>q(r.target.checked)}),e.jsx(y.Checkbox,{label:"Subscribe to newsletter"}),e.jsx(y.Checkbox,{label:"Disabled option",disabled:!0})]})]}),e.jsxs("div",{children:[e.jsx("h4",{style:{fontSize:"var(--text-base)",fontWeight:"var(--font-weight-medium)",color:"var(--text-primary)",marginBottom:"var(--spacing-2)"},children:"Radio"}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"var(--spacing-2)"},children:[e.jsx(f.Radio,{name:"plan",value:"option1",label:"Free Plan",checked:j==="option1",onChange:r=>b(r.target.value)}),e.jsx(f.Radio,{name:"plan",value:"option2",label:"Pro Plan ($9/mo)",checked:j==="option2",onChange:r=>b(r.target.value)}),e.jsx(f.Radio,{name:"plan",value:"option3",label:"Enterprise Plan",checked:j==="option3",onChange:r=>b(r.target.value)})]})]})]})}),e.jsx(a,{title:"Switch",description:"Toggle control",children:e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"var(--spacing-3)"},children:[e.jsx(S.Switch,{label:"Enable notifications",checked:T,onChange:r=>k(r.target.checked)}),e.jsx(S.Switch,{label:"Auto-save",defaultChecked:!0}),e.jsx(S.Switch,{label:"Disabled",disabled:!0})]})}),e.jsx(a,{title:"Cards",description:"Container components with variants",children:e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(300px, 1fr))",gap:"var(--spacing-4)"},children:[e.jsxs(i.Card,{children:[e.jsx(i.Card.Header,{children:"Base Card"}),e.jsx(i.Card.Body,{children:"This is a base card with default styling."}),e.jsxs(i.Card.Footer,{children:[e.jsx(t.Button,{size:"sm",variant:"secondary",children:"Cancel"}),e.jsx(t.Button,{size:"sm",children:"Save"})]})]}),e.jsxs(i.Card,{variant:"glass",children:[e.jsx(i.Card.Header,{children:"Glass Card"}),e.jsx(i.Card.Body,{children:"Semi-transparent card with backdrop blur effect."})]}),e.jsxs(i.Card,{variant:"elevated",children:[e.jsx(i.Card.Header,{children:"Elevated Card"}),e.jsx(i.Card.Body,{children:"Card with shadow elevation for depth."})]})]})}),e.jsx(a,{title:"Badges",description:"Status indicators and labels",children:e.jsxs("div",{style:{display:"flex",gap:"var(--spacing-3)",flexWrap:"wrap",alignItems:"center"},children:[e.jsx(s.Badge,{variant:"primary",children:"Primary"}),e.jsx(s.Badge,{variant:"secondary",children:"Secondary"}),e.jsx(s.Badge,{variant:"success",children:"Success"}),e.jsx(s.Badge,{variant:"warning",children:"Warning"}),e.jsx(s.Badge,{variant:"error",children:"Error"}),e.jsx(s.Badge,{variant:"secondary",children:"Neutral"}),e.jsx(s.Badge,{size:"sm",children:"Small"}),e.jsx(s.Badge,{size:"lg",children:"Large"}),e.jsx(s.Badge,{dot:!0,children:"With Dot"})]})}),e.jsx(a,{title:"Alerts",description:"Feedback messages",children:e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"var(--spacing-3)"},children:[e.jsx(p.Alert,{variant:"info",title:"Information",children:"This is an informational message for the user."}),e.jsx(p.Alert,{variant:"success",title:"Success",children:"Your changes have been saved successfully!"}),e.jsx(p.Alert,{variant:"warning",title:"Warning",children:"Please review your information before proceeding."}),e.jsx(p.Alert,{variant:"error",title:"Error",dismissible:!0,children:"An error occurred while processing your request."})]})}),e.jsx(a,{title:"Spinners",description:"Loading indicators",children:e.jsxs("div",{style:{display:"flex",gap:"var(--spacing-4)",alignItems:"center"},children:[e.jsx(l.Spinner,{size:"xs"}),e.jsx(l.Spinner,{size:"sm"}),e.jsx(l.Spinner,{size:"md"}),e.jsx(l.Spinner,{size:"lg"}),e.jsx(l.Spinner,{size:"xl"}),e.jsx(l.Spinner,{variant:"secondary"}),e.jsx(l.Spinner,{showLabel:!0,label:"Loading..."})]})}),e.jsx(a,{title:"Progress Bars",description:"Progress indicators",children:e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"var(--spacing-4)"},children:[e.jsx(h.ProgressBar,{value:30}),e.jsx(h.ProgressBar,{value:60,variant:"success",showLabel:!0}),e.jsx(h.ProgressBar,{value:85,variant:"warning",showLabel:!0}),e.jsx(h.ProgressBar,{value:100,variant:"error"}),e.jsx(h.ProgressBar,{indeterminate:!0})]})}),e.jsx(a,{title:"Avatars",description:"User profile images",children:e.jsxs("div",{style:{display:"flex",gap:"var(--spacing-4)",alignItems:"center"},children:[e.jsx(d.Avatar,{initials:"AB"}),e.jsx(d.Avatar,{initials:"CD",size:"sm"}),e.jsx(d.Avatar,{initials:"EF",size:"lg"}),e.jsx(d.Avatar,{initials:"GH",size:"xl",status:"online"}),e.jsx(d.Avatar,{initials:"IJ",status:"away"}),e.jsx(d.Avatar,{initials:"KL",status:"busy"})]})}),e.jsx(a,{title:"Tooltips",description:"Contextual information on hover",children:e.jsxs("div",{style:{display:"flex",gap:"var(--spacing-4)"},children:[e.jsx(g.Tooltip,{content:"Tooltip on top",placement:"top",children:e.jsx(t.Button,{variant:"secondary",children:"Top"})}),e.jsx(g.Tooltip,{content:"Tooltip on right",placement:"right",children:e.jsx(t.Button,{variant:"secondary",children:"Right"})}),e.jsx(g.Tooltip,{content:"Tooltip on bottom",placement:"bottom",children:e.jsx(t.Button,{variant:"secondary",children:"Bottom"})}),e.jsx(g.Tooltip,{content:"Tooltip on left",placement:"left",children:e.jsx(t.Button,{variant:"secondary",children:"Left"})})]})}),e.jsx(a,{title:"Tabs",description:"Content organization",children:e.jsx(N.Tabs,{tabs:[{id:"tab1",label:"Overview",content:e.jsxs("div",{style:{padding:"var(--spacing-4)"},children:[e.jsx("h3",{style:{fontSize:"var(--text-lg)",fontWeight:"var(--font-weight-medium)",color:"var(--text-primary)",marginBottom:"var(--spacing-2)"},children:"Overview"}),e.jsx("p",{style:{color:"var(--text-secondary)"},children:"This is the overview tab content."})]})},{id:"tab2",label:"Details",badge:"5",content:e.jsxs("div",{style:{padding:"var(--spacing-4)"},children:[e.jsx("h3",{style:{fontSize:"var(--text-lg)",fontWeight:"var(--font-weight-medium)",color:"var(--text-primary)",marginBottom:"var(--spacing-2)"},children:"Details"}),e.jsx("p",{style:{color:"var(--text-secondary)"},children:"This is the details tab with a badge indicator."})]})},{id:"tab3",label:"Settings",content:e.jsxs("div",{style:{padding:"var(--spacing-4)"},children:[e.jsx("h3",{style:{fontSize:"var(--text-lg)",fontWeight:"var(--font-weight-medium)",color:"var(--text-primary)",marginBottom:"var(--spacing-2)"},children:"Settings"}),e.jsx("p",{style:{color:"var(--text-secondary)"},children:"This is the settings tab content."})]})}],activeTab:C,onChange:w})}),e.jsx(a,{title:"Table",description:"Data display with sorting",children:e.jsx(E.Table,{columns:O,data:F,striped:!0,hoverable:!0,onRowClick:r=>alert(`Clicked: ${r.name}`)})}),e.jsxs(a,{title:"Modal",description:"Dialog overlay",children:[e.jsx(t.Button,{onClick:()=>x(!0),children:"Open Modal"}),e.jsxs(v.Modal,{open:m,onClose:()=>x(!1),size:"md",children:[e.jsx(v.Modal.Header,{children:"Modal Title"}),e.jsx(v.Modal.Body,{children:e.jsx("p",{style:{color:"var(--text-primary)"},children:"This is a modal dialog with a header, body, and footer. You can close it by clicking the X button, pressing Escape, or clicking the backdrop."})}),e.jsxs(v.Modal.Footer,{children:[e.jsx(t.Button,{variant:"secondary",onClick:()=>x(!1),children:"Cancel"}),e.jsx(t.Button,{onClick:()=>x(!1),children:"Confirm"})]})]})]})]}),e.jsxs("footer",{style:{padding:"var(--spacing-8) var(--spacing-4)",borderTop:"1px solid var(--border-subtle)",textAlign:"center",color:"var(--text-secondary)"},children:[e.jsx("p",{children:"Orion Design System • Built with Chain of Truth Architecture"}),e.jsx("p",{style:{fontSize:"var(--text-sm)",marginTop:"var(--spacing-2)"},children:"21 Components • TypeScript • CSS Modules • Token-Based"})]})]})},a=({title:o,description:u,children:m})=>e.jsxs("section",{style:{marginBottom:"var(--spacing-8)"},children:[e.jsxs("div",{style:{marginBottom:"var(--spacing-4)"},children:[e.jsx("h2",{style:{fontSize:"var(--text-2xl)",fontWeight:"var(--font-weight-bold)",color:"var(--text-primary)",marginBottom:"var(--spacing-1)"},children:o}),e.jsx("p",{style:{fontSize:"var(--text-base)",color:"var(--text-secondary)"},children:u})]}),e.jsx("div",{style:{padding:"var(--spacing-6)",background:"var(--surface-subtle)",borderRadius:"var(--radius-container)",border:"1px solid var(--border-subtle)"},children:m})]});exports.ComponentShowcase=H;