@rojaostudio/ds 1.0.0 → 1.0.2

package/dist/components/button.js

@@ -1,8 +1,10 @@
 "use client";
 import {
   __objRest,
+  __spreadProps,
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 const variantColorClasses = {
   // secondary = ação de BAIXA ÊNFASE, neutra por construção (não a 2ª cor de marca).
@@ -67,17 +69,19 @@ function buttonVariants({
     className
   ].filter(Boolean).join(" ");
 }
-const Spinner = () => /* @__PURE__ */ React.createElement(
+const Spinner = () => /* @__PURE__ */ jsxs(
   "svg",
   {
     className: "animate-spin size-4 shrink-0",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
-    "aria-hidden": "true"
-  },
-  /* @__PURE__ */ React.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-  /* @__PURE__ */ React.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+      /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
+    ]
+  }
 );
 const Button = forwardRef(function Button2(_a, ref) {
   var _b = _a, {
@@ -105,17 +109,20 @@ const Button = forwardRef(function Button2(_a, ref) {
     "children",
     "type"
   ]);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "button",
-    __spreadValues({
+    __spreadProps(__spreadValues({
       ref,
       type,
       disabled: disabled || loading,
       className: buttonVariants({ variant, color, size, fullWidth, className })
-    }, rest),
-    loading ? /* @__PURE__ */ React.createElement(Spinner, null) : iconLeft && /* @__PURE__ */ React.createElement("span", { className: "shrink-0 [&_svg]:size-4" }, iconLeft),
-    children,
-    iconRight && !loading && /* @__PURE__ */ React.createElement("span", { className: "shrink-0 [&_svg]:size-4" }, iconRight)
+    }, rest), {
+      children: [
+        loading ? /* @__PURE__ */ jsx(Spinner, {}) : iconLeft && /* @__PURE__ */ jsx("span", { className: "shrink-0 [&_svg]:size-4", children: iconLeft }),
+        children,
+        iconRight && !loading && /* @__PURE__ */ jsx("span", { className: "shrink-0 [&_svg]:size-4", children: iconRight })
+      ]
+    })
   );
 });
 export {

package/dist/components/card.js

@@ -1,7 +1,9 @@
 import {
   __objRest,
+  __spreadProps,
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 const VARIANT_CLASS = {
   outlined: "border border-stroke-default bg-surface-default",
   elevated: "border border-transparent bg-surface-default shadow-sm",
@@ -11,37 +13,50 @@ const VARIANT_CLASS = {
 };
 function Card(_a) {
   var _b = _a, { variant = "elevated", interactive = false, className = "", children } = _b, props = __objRest(_b, ["variant", "interactive", "className", "children"]);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "div",
-    __spreadValues({
+    __spreadProps(__spreadValues({
       className: [
         "rounded-(--radius-card) overflow-hidden",
         VARIANT_CLASS[variant],
         interactive && "transition-shadow hover:shadow-md cursor-pointer",
         className
       ].filter(Boolean).join(" ")
-    }, props),
-    children
+    }, props), {
+      children
+    })
   );
 }
 function CardHeader(_c) {
   var _d = _c, { title, description, action, badge, icon, className = "", children } = _d, props = __objRest(_d, ["title", "description", "action", "badge", "icon", "className", "children"]);
   if (children) {
-    return /* @__PURE__ */ React.createElement("div", __spreadValues({ className: ["ds-card-header flex items-center justify-between gap-4 px-4 py-4", className].join(" ") }, props), children);
+    return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({ className: ["ds-card-header flex items-center justify-between gap-4 px-4 py-4", className].join(" ") }, props), { children }));
   }
-  return /* @__PURE__ */ React.createElement("div", __spreadValues({ className: ["ds-card-header flex items-start justify-between gap-4 px-4 py-4", className].join(" ") }, props), /* @__PURE__ */ React.createElement("div", { className: "flex items-start gap-3 min-w-0 flex-1" }, icon && /* @__PURE__ */ React.createElement("div", { className: "shrink-0 size-10 rounded-(--radius-card) bg-surface-raised flex items-center justify-center text-fg-secondary" }, icon), /* @__PURE__ */ React.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement("h3", { className: "text-label font-semibold text-fg-primary leading-snug" }, title), badge), description && /* @__PURE__ */ React.createElement("p", { className: "mt-0.5 text-caption text-fg-muted" }, description))), action && /* @__PURE__ */ React.createElement("div", { className: "shrink-0" }, action));
+  return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({ className: ["ds-card-header flex items-start justify-between gap-4 px-4 py-4", className].join(" ") }, props), { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 min-w-0 flex-1", children: [
+      icon && /* @__PURE__ */ jsx("div", { className: "shrink-0 size-10 rounded-(--radius-card) bg-surface-raised flex items-center justify-center text-fg-secondary", children: icon }),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-label font-semibold text-fg-primary leading-snug", children: title }),
+          badge
+        ] }),
+        description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-caption text-fg-muted", children: description })
+      ] })
+    ] }),
+    action && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: action })
+  ] }));
 }
 function CardTitle(_e) {
   var _f = _e, { className = "", children } = _f, props = __objRest(_f, ["className", "children"]);
-  return /* @__PURE__ */ React.createElement("h3", __spreadValues({ className: ["text-body font-semibold text-fg-primary", className].join(" ") }, props), children);
+  return /* @__PURE__ */ jsx("h3", __spreadProps(__spreadValues({ className: ["text-body font-semibold text-fg-primary", className].join(" ") }, props), { children }));
 }
 function CardBody(_g) {
   var _h = _g, { noPadding, className = "", children } = _h, props = __objRest(_h, ["noPadding", "className", "children"]);
-  return /* @__PURE__ */ React.createElement("div", __spreadValues({ className: [noPadding ? "" : "px-4 pb-4 pt-4 [.ds-card-header+&]:pt-0", className].join(" ").trim() }, props), children);
+  return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({ className: [noPadding ? "" : "px-4 pb-4 pt-4 [.ds-card-header+&]:pt-0", className].join(" ").trim() }, props), { children }));
 }
 function CardFooter(_i) {
   var _j = _i, { className = "", children } = _j, props = __objRest(_j, ["className", "children"]);
-  return /* @__PURE__ */ React.createElement("div", __spreadValues({ className: ["flex items-center justify-end gap-3 px-4 pt-2 pb-4", className].join(" ") }, props), children);
+  return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({ className: ["flex items-center justify-end gap-3 px-4 pt-2 pb-4", className].join(" ") }, props), { children }));
 }
 export {
   Card,

package/dist/components/chat-bubble.js

@@ -1,5 +1,6 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
+import { jsx } from "react/jsx-runtime";
 function ChatBubble({
   variant,
   state = "sent",
@@ -31,7 +32,7 @@ function ChatBubble({
     borderRadius: "var(--chat-bubble-radius-lg)",
     borderBottomRightRadius: "var(--chat-bubble-radius-sm)"
   };
-  return /* @__PURE__ */ React.createElement("div", { className: wrapperClass }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx("div", { className: wrapperClass, children: /* @__PURE__ */ jsx(
     "div",
     {
       className: bubbleClass,
@@ -45,10 +46,10 @@ function ChatBubble({
           onClick == null ? void 0 : onClick(e);
         }
       } : void 0,
-      "aria-label": ariaLabel
-    },
-    children
-  ));
+      "aria-label": ariaLabel,
+      children
+    }
+  ) });
 }
 export {
   ChatBubble

package/dist/components/checkbox.js

@@ -3,6 +3,7 @@ import {
   __objRest,
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useId, useRef } from "react";
 const SIZE_CLASS = {
   sm: { box: "size-3.5", svg: "size-3.5", label: "text-caption", icon: 12 },
@@ -23,55 +24,67 @@ const Checkbox = forwardRef(function Checkbox2(_a, ref) {
   const inputId = id != null ? id : generatedId;
   const errId = `${inputId}-error`;
   const sz = SIZE_CLASS[size];
-  return /* @__PURE__ */ React.createElement("div", { className: "inline-flex flex-col gap-0.5" }, /* @__PURE__ */ React.createElement(
-    "label",
-    {
-      htmlFor: inputId,
-      className: [
-        "inline-flex items-start gap-2 cursor-pointer",
-        "has-[:disabled]:opacity-50 has-[:disabled]:cursor-not-allowed",
-        className
-      ].filter(Boolean).join(" ")
-    },
-    /* @__PURE__ */ React.createElement("span", { className: ["relative flex shrink-0 mt-0.5", sz.box].join(" ") }, /* @__PURE__ */ React.createElement(
-      "input",
-      __spreadValues({
-        ref: setRef,
-        type: "checkbox",
-        id: inputId,
-        "aria-invalid": error ? true : void 0,
-        "aria-describedby": error ? errId : void 0,
-        className: [
-          "peer appearance-none rounded shrink-0 cursor-pointer",
-          sz.box,
-          "bg-surface-default",
-          error ? "border border-danger checked:bg-danger checked:border-danger indeterminate:bg-danger indeterminate:border-danger" : "border border-stroke-control checked:bg-brand-primary checked:border-brand-primary indeterminate:bg-brand-primary indeterminate:border-brand-primary",
-          "focus-visible:ring-2 focus-visible:ring-stroke-focus/30 focus-visible:outline-none",
-          "disabled:cursor-not-allowed",
-          "transition-colors"
-        ].join(" ")
-      }, props)
-    ), /* @__PURE__ */ React.createElement(
-      "svg",
-      {
-        className: ["absolute inset-0 pointer-events-none hidden peer-checked:block text-brand-on-primary", sz.svg].join(" "),
-        viewBox: "0 0 16 16",
-        fill: "none",
-        "aria-hidden": "true"
-      },
-      /* @__PURE__ */ React.createElement("path", { d: "M3.5 8L6.5 11L12.5 5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
-    ), /* @__PURE__ */ React.createElement(
-      "svg",
+  return /* @__PURE__ */ jsxs("div", { className: "inline-flex flex-col gap-0.5", children: [
+    /* @__PURE__ */ jsxs(
+      "label",
       {
-        className: ["absolute inset-0 pointer-events-none hidden peer-indeterminate:block text-brand-on-primary", sz.svg].join(" "),
-        viewBox: "0 0 16 16",
-        fill: "none",
-        "aria-hidden": "true"
-      },
-      /* @__PURE__ */ React.createElement("path", { d: "M4 8H12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
-    )),
-    (label || description) && /* @__PURE__ */ React.createElement("span", { className: "flex flex-col gap-0.5 select-none" }, label && /* @__PURE__ */ React.createElement("span", { className: [sz.label, "text-fg-primary leading-snug"].join(" ") }, label), description && /* @__PURE__ */ React.createElement("span", { className: "text-caption text-fg-muted leading-snug" }, description))
-  ), error && /* @__PURE__ */ React.createElement("p", { id: errId, className: [sz.box === "size-3.5" ? "pl-5" : "pl-6", "text-caption text-danger-text"].join(" ") }, error));
+        htmlFor: inputId,
+        className: [
+          "inline-flex items-start gap-2 cursor-pointer",
+          "has-[:disabled]:opacity-50 has-[:disabled]:cursor-not-allowed",
+          className
+        ].filter(Boolean).join(" "),
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: ["relative flex shrink-0 mt-0.5", sz.box].join(" "), children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              __spreadValues({
+                ref: setRef,
+                type: "checkbox",
+                id: inputId,
+                "aria-invalid": error ? true : void 0,
+                "aria-describedby": error ? errId : void 0,
+                className: [
+                  "peer appearance-none rounded shrink-0 cursor-pointer",
+                  sz.box,
+                  "bg-surface-default",
+                  error ? "border border-danger checked:bg-danger checked:border-danger indeterminate:bg-danger indeterminate:border-danger" : "border border-stroke-control checked:bg-brand-primary checked:border-brand-primary indeterminate:bg-brand-primary indeterminate:border-brand-primary",
+                  "focus-visible:ring-2 focus-visible:ring-stroke-focus/30 focus-visible:outline-none",
+                  "disabled:cursor-not-allowed",
+                  "transition-colors"
+                ].join(" ")
+              }, props)
+            ),
+            /* @__PURE__ */ jsx(
+              "svg",
+              {
+                className: ["absolute inset-0 pointer-events-none hidden peer-checked:block text-brand-on-primary", sz.svg].join(" "),
+                viewBox: "0 0 16 16",
+                fill: "none",
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ jsx("path", { d: "M3.5 8L6.5 11L12.5 5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "svg",
+              {
+                className: ["absolute inset-0 pointer-events-none hidden peer-indeterminate:block text-brand-on-primary", sz.svg].join(" "),
+                viewBox: "0 0 16 16",
+                fill: "none",
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ jsx("path", { d: "M4 8H12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+              }
+            )
+          ] }),
+          (label || description) && /* @__PURE__ */ jsxs("span", { className: "flex flex-col gap-0.5 select-none", children: [
+            label && /* @__PURE__ */ jsx("span", { className: [sz.label, "text-fg-primary leading-snug"].join(" "), children: label }),
+            description && /* @__PURE__ */ jsx("span", { className: "text-caption text-fg-muted leading-snug", children: description })
+          ] })
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsx("p", { id: errId, className: [sz.box === "size-3.5" ? "pl-5" : "pl-6", "text-caption text-danger-text"].join(" "), children: error })
+  ] });
 });
 export {
   Checkbox

package/dist/components/chip-input.js

@@ -1,5 +1,6 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from "react";
 import { createPortal } from "react-dom";
 import { X } from "lucide-react";
@@ -90,92 +91,108 @@ function ChipInput({
       removeChip(value[value.length - 1].id);
     }
   }
-  return /* @__PURE__ */ React.createElement("div", { ref: containerRef, className: "relative" }, /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: "flex flex-wrap gap-1.5 px-2.5 py-2 min-h-[38px] border border-stroke-control rounded-(--radius-control) bg-surface-default focus-within:border-stroke-strong cursor-text",
-      onClick: () => {
-        var _a;
-        return (_a = inputRef.current) == null ? void 0 : _a.focus();
-      }
-    },
-    value.map((chip) => {
-      var _a;
-      return /* @__PURE__ */ React.createElement(
-        "span",
-        {
-          key: chip.id,
-          className: "inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full bg-(--brand-primary) text-(--text-inverse) text-caption font-medium"
-        },
-        chip.label,
-        /* @__PURE__ */ React.createElement(
-          "button",
-          {
-            type: "button",
-            onClick: (e) => {
-              e.stopPropagation();
-              removeChip(chip.id);
-            },
-            className: "ml-0.5 leading-none hover:opacity-70 transition-opacity",
-            "aria-label": (_a = removeAriaLabel == null ? void 0 : removeAriaLabel(chip)) != null ? _a : `Remove ${chip.label}`
-          },
-          /* @__PURE__ */ React.createElement(X, { size: 12, strokeWidth: 2.5 })
-        )
-      );
-    }),
-    /* @__PURE__ */ React.createElement(
-      "input",
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "relative", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
       {
-        ref: inputRef,
-        type: "text",
-        value: input,
-        onChange: (e) => {
-          setInput(e.target.value);
-          setOpen(true);
+        className: "flex flex-wrap gap-1.5 px-2.5 py-2 min-h-[38px] border border-stroke-control rounded-(--radius-control) bg-surface-default focus-within:border-stroke-strong cursor-text",
+        onClick: () => {
+          var _a;
+          return (_a = inputRef.current) == null ? void 0 : _a.focus();
         },
-        onKeyDown: handleKeyDown,
-        onFocus: () => setOpen(true),
-        placeholder: value.length === 0 ? placeholder : "",
-        className: "flex-1 min-w-[120px] bg-transparent text-label text-(--text-secondary) placeholder:text-(--text-disabled) focus:outline-none"
+        children: [
+          value.map((chip) => {
+            var _a;
+            return /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: "inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full bg-(--brand-primary) text-(--text-inverse) text-caption font-medium",
+                children: [
+                  chip.label,
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        removeChip(chip.id);
+                      },
+                      className: "ml-0.5 leading-none hover:opacity-70 transition-opacity",
+                      "aria-label": (_a = removeAriaLabel == null ? void 0 : removeAriaLabel(chip)) != null ? _a : `Remove ${chip.label}`,
+                      children: /* @__PURE__ */ jsx(X, { size: 12, strokeWidth: 2.5 })
+                    }
+                  )
+                ]
+              },
+              chip.id
+            );
+          }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              type: "text",
+              value: input,
+              onChange: (e) => {
+                setInput(e.target.value);
+                setOpen(true);
+              },
+              onKeyDown: handleKeyDown,
+              onFocus: () => setOpen(true),
+              placeholder: value.length === 0 ? placeholder : "",
+              className: "flex-1 min-w-[120px] bg-transparent text-label text-(--text-secondary) placeholder:text-(--text-disabled) focus:outline-none"
+            }
+          )
+        ]
       }
-    )
-  ), open && pos && (filtered.length > 0 || showCreate) && createPortal(
-    /* @__PURE__ */ React.createElement(
-      "ul",
-      {
-        ref: listRef,
-        style: { position: "fixed", top: pos.top, left: pos.left, width: pos.width },
-        className: "z-50 bg-surface-default border border-stroke-control rounded-(--radius-control) shadow-md max-h-48 overflow-auto"
-      },
-      filtered.map((s) => /* @__PURE__ */ React.createElement("li", { key: s.id }, /* @__PURE__ */ React.createElement(
-        "button",
-        {
-          type: "button",
-          onMouseDown: (e) => {
-            e.preventDefault();
-            selectChip(s);
-          },
-          className: "w-full text-left px-3 py-2 text-label text-(--text-secondary) hover:bg-(--surface-page) transition-colors"
-        },
-        s.label
-      ))),
-      showCreate && /* @__PURE__ */ React.createElement("li", { className: filtered.length > 0 ? "border-t border-stroke-subtle" : "" }, /* @__PURE__ */ React.createElement(
-        "button",
+    ),
+    open && pos && (filtered.length > 0 || showCreate) && createPortal(
+      /* @__PURE__ */ jsxs(
+        "ul",
         {
-          type: "button",
-          disabled: creating,
-          onMouseDown: (e) => {
-            e.preventDefault();
-            void handleCreate();
-          },
-          className: "w-full text-left px-3 py-2 text-label font-medium text-(--text-primary) hover:bg-(--surface-page) transition-colors flex items-center gap-2 disabled:opacity-50"
-        },
-        /* @__PURE__ */ React.createElement("span", { className: "text-(--text-disabled)" }, "+"),
-        creating ? creatingLabel : /* @__PURE__ */ React.createElement(React.Fragment, null, createPrefix, " ", /* @__PURE__ */ React.createElement("span", { className: "font-semibold" }, `"${trimmed}"`))
-      ))
+          ref: listRef,
+          style: { position: "fixed", top: pos.top, left: pos.left, width: pos.width },
+          className: "z-50 bg-surface-default border border-stroke-control rounded-(--radius-control) shadow-md max-h-48 overflow-auto",
+          children: [
+            filtered.map((s) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onMouseDown: (e) => {
+                  e.preventDefault();
+                  selectChip(s);
+                },
+                className: "w-full text-left px-3 py-2 text-label text-(--text-secondary) hover:bg-(--surface-page) transition-colors",
+                children: s.label
+              }
+            ) }, s.id)),
+            showCreate && /* @__PURE__ */ jsx("li", { className: filtered.length > 0 ? "border-t border-stroke-subtle" : "", children: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                disabled: creating,
+                onMouseDown: (e) => {
+                  e.preventDefault();
+                  void handleCreate();
+                },
+                className: "w-full text-left px-3 py-2 text-label font-medium text-(--text-primary) hover:bg-(--surface-page) transition-colors flex items-center gap-2 disabled:opacity-50",
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-(--text-disabled)", children: "+" }),
+                  creating ? creatingLabel : /* @__PURE__ */ jsxs(Fragment, { children: [
+                    createPrefix,
+                    " ",
+                    /* @__PURE__ */ jsx("span", { className: "font-semibold", children: `"${trimmed}"` })
+                  ] })
+                ]
+              }
+            ) })
+          ]
+        }
+      ),
+      document.body
     ),
-    document.body
-  ), helper && /* @__PURE__ */ React.createElement("p", { className: "mt-1 text-caption text-(--text-disabled)" }, helper));
+    helper && /* @__PURE__ */ jsx("p", { className: "mt-1 text-caption text-(--text-disabled)", children: helper })
+  ] });
 }
 export {
   ChipInput

package/dist/components/chips.js

@@ -1,4 +1,5 @@
 import "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { X } from "lucide-react";
 const BASE = "inline-flex items-center gap-1.5 px-3 h-7 text-caption font-medium rounded-full border transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus disabled:cursor-not-allowed disabled:opacity-50";
 function Chip({
@@ -22,7 +23,7 @@ function Chip({
     };
     var handleKey = handleKey2;
     const interactive = !!onClick;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxs(
       "div",
       {
         role: interactive ? "button" : void 0,
@@ -36,28 +37,30 @@ function Chip({
           interactive && !disabled ? "cursor-pointer hover:bg-surface-raised" : "",
           disabled ? "opacity-50 cursor-not-allowed" : "",
           className
-        ].join(" ")
-      },
-      leading && /* @__PURE__ */ React.createElement("span", { className: "shrink-0 [&_svg]:size-3.5" }, leading),
-      /* @__PURE__ */ React.createElement("span", { className: "truncate" }, children),
-      onRemove && /* @__PURE__ */ React.createElement(
-        "button",
-        {
-          type: "button",
-          onClick: (e) => {
-            e.stopPropagation();
-            onRemove();
-          },
-          "aria-label": "Remover",
-          disabled,
-          className: "inline-flex items-center justify-center size-4 rounded-full opacity-60 hover:opacity-100 ml-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus transition-opacity"
-        },
-        /* @__PURE__ */ React.createElement(X, { size: 12 })
-      )
+        ].join(" "),
+        children: [
+          leading && /* @__PURE__ */ jsx("span", { className: "shrink-0 [&_svg]:size-3.5", children: leading }),
+          /* @__PURE__ */ jsx("span", { className: "truncate", children }),
+          onRemove && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                onRemove();
+              },
+              "aria-label": "Remover",
+              disabled,
+              className: "inline-flex items-center justify-center size-4 rounded-full opacity-60 hover:opacity-100 ml-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus transition-opacity",
+              children: /* @__PURE__ */ jsx(X, { size: 12 })
+            }
+          )
+        ]
+      }
     );
   }
   if (highlight) {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
@@ -67,13 +70,15 @@ function Chip({
           BASE,
           "border-dashed border-brand-secondary bg-brand-secondary/10 text-brand-secondary hover:bg-brand-secondary/20",
           className
-        ].join(" ")
-      },
-      leading && /* @__PURE__ */ React.createElement("span", { className: "shrink-0 [&_svg]:size-3.5" }, leading),
-      children
+        ].join(" "),
+        children: [
+          leading && /* @__PURE__ */ jsx("span", { className: "shrink-0 [&_svg]:size-3.5", children: leading }),
+          children
+        ]
+      }
     );
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "button",
     {
       type: "button",
@@ -83,10 +88,12 @@ function Chip({
         BASE,
         subtle ? "border-transparent bg-surface-raised text-fg-secondary hover:bg-stroke-default hover:text-fg-primary" : "border-stroke-default bg-surface-default text-fg-primary hover:bg-surface-raised",
         className
-      ].join(" ")
-    },
-    leading && /* @__PURE__ */ React.createElement("span", { className: "shrink-0 [&_svg]:size-3.5" }, leading),
-    children
+      ].join(" "),
+      children: [
+        leading && /* @__PURE__ */ jsx("span", { className: "shrink-0 [&_svg]:size-3.5", children: leading }),
+        children
+      ]
+    }
   );
 }
 export {