@konstructio/ui 0.1.0-alpha.2 → 0.1.0-alpha.4

package/dist/components/Badge/Badge.js

@@ -1,10 +1,10 @@
-import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
 import { useRef as v, useState as w, useCallback as x, useEffect as y } from "react";
-import { cn as m } from "../../utils/index.js";
+import { cn as u } from "../../utils/index.js";
 import { buttonDismissVariants as M, badgeVariants as Z } from "./Badge.variants.js";
-import { c as N } from "../../createLucideIcon-CoF3ywd5.js";
+import { c as N } from "../../createLucideIcon-vyksFS6P.js";
 /**
-* @license lucide-react v0.488.0 - ISC
+* @license lucide-react v0.511.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
@@ -13,12 +13,12 @@ const V = [
   ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
   ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
 ], I = N("x", V), L = "data:image/svg+xml,%3csvg%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='currentColor'%20xmlns='http://www.w3.org/2000/svg'%20%3e%3cpath%20d='M7.05002%201.45002C7.05002%201.17155%206.9394%200.904476%206.74249%200.707562C6.54557%200.510649%206.2785%200.400024%206.00002%200.400024C5.72155%200.400024%205.45448%200.510649%205.25756%200.707562C5.06065%200.904476%204.95002%201.17155%204.95002%201.45002C4.95002%201.7285%205.06065%201.99557%205.25756%202.19249C5.45448%202.3894%205.72155%202.50002%206.00002%202.50002C6.2785%202.50002%206.54557%202.3894%206.74249%202.19249C6.9394%201.99557%207.05002%201.7285%207.05002%201.45002ZM7.05002%2010.55C7.05002%2010.2715%206.9394%2010.0045%206.74249%209.80756C6.54557%209.61065%206.2785%209.50002%206.00002%209.50002C5.72155%209.50002%205.45448%209.61065%205.25756%209.80756C5.06065%2010.0045%204.95002%2010.2715%204.95002%2010.55C4.95002%2010.8285%205.06065%2011.0956%205.25756%2011.2925C5.45448%2011.4894%205.72155%2011.6%206.00002%2011.6C6.2785%2011.6%206.54557%2011.4894%206.74249%2011.2925C6.9394%2011.0956%207.05002%2010.8285%207.05002%2010.55ZM1.45002%207.05002C1.7285%207.05002%201.99557%206.9394%202.19249%206.74249C2.3894%206.54557%202.50002%206.2785%202.50002%206.00002C2.50002%205.72155%202.3894%205.45448%202.19249%205.25756C1.99557%205.06065%201.7285%204.95002%201.45002%204.95002C1.17155%204.95002%200.904476%205.06065%200.707562%205.25756C0.510649%205.45448%200.400024%205.72155%200.400024%206.00002C0.400024%206.2785%200.510649%206.54557%200.707562%206.74249C0.904476%206.9394%201.17155%207.05002%201.45002%207.05002ZM11.6%206.00002C11.6%205.72155%2011.4894%205.45448%2011.2925%205.25756C11.0956%205.06065%2010.8285%204.95002%2010.55%204.95002C10.2715%204.95002%2010.0045%205.06065%209.80756%205.25756C9.61065%205.45448%209.50002%205.72155%209.50002%206.00002C9.50002%206.2785%209.61065%206.54557%209.80756%206.74249C10.0045%206.9394%2010.2715%207.05002%2010.55%207.05002C10.8285%207.05002%2011.0956%206.9394%2011.2925%206.74249C11.4894%206.54557%2011.6%206.2785%2011.6%206.00002ZM3.52596%209.9594C3.62349%209.86187%203.70085%209.74609%203.75363%209.61867C3.80641%209.49124%203.83358%209.35467%203.83358%209.21674C3.83358%209.07882%203.80641%208.94225%203.75363%208.81482C3.70085%208.6874%203.62349%208.57161%203.52596%208.47409C3.42844%208.37656%203.31265%208.2992%203.18523%208.24642C3.0578%208.19364%202.92123%208.16647%202.78331%208.16647C2.50476%208.16647%202.23761%208.27712%202.04065%208.47409C1.84368%208.67105%201.73303%208.93819%201.73303%209.21674C1.73303%209.49529%201.84368%209.76243%202.04065%209.9594C2.23761%2010.1564%202.50476%2010.267%202.78331%2010.267C3.06186%2010.267%203.329%2010.1564%203.52596%209.9594ZM3.52596%203.52377C3.62833%203.42738%203.7103%203.31141%203.76701%203.18274C3.82371%203.05407%203.85399%202.91532%203.85605%202.77472C3.85812%202.63413%203.83192%202.49455%203.77902%202.36427C3.72611%202.23399%203.64758%202.11566%203.54808%202.01631C3.44858%201.91695%203.33014%201.8386%203.19978%201.78589C3.06942%201.73318%202.92981%201.70718%202.78921%201.70945C2.64862%201.71172%202.50992%201.74221%202.38133%201.7991C2.25274%201.85599%202.13689%201.93814%202.04065%202.04065C1.84368%202.23761%201.73303%202.50476%201.73303%202.78331C1.73303%203.06186%201.84368%203.329%202.04065%203.52596C2.23761%203.72293%202.50476%203.83358%202.78331%203.83358C3.06186%203.83358%203.329%203.72293%203.52596%203.52596V3.52377ZM8.47409%209.9594C8.57161%2010.0569%208.6874%2010.1343%208.81482%2010.1871C8.94225%2010.2399%209.07882%2010.267%209.21674%2010.267C9.35467%2010.267%209.49124%2010.2399%209.61867%2010.1871C9.74609%2010.1343%209.86187%2010.0569%209.9594%209.9594C10.0569%209.86187%2010.1343%209.74609%2010.1871%209.61867C10.2399%209.49124%2010.267%209.35467%2010.267%209.21674C10.267%209.07882%2010.2399%208.94225%2010.1871%208.81482C10.1343%208.6874%2010.0569%208.57161%209.9594%208.47409C9.86187%208.37656%209.74609%208.2992%209.61867%208.24642C9.49124%208.19364%209.35467%208.16647%209.21674%208.16647C9.07882%208.16647%208.94225%208.19364%208.81482%208.24642C8.6874%208.2992%208.57161%208.37656%208.47409%208.47409C8.37656%208.57161%208.2992%208.6874%208.24642%208.81482C8.19364%208.94225%208.16647%209.07882%208.16647%209.21674C8.16647%209.35467%208.19364%209.49124%208.24642%209.61867C8.2992%209.74609%208.37656%209.86187%208.47409%209.9594Z'%20fill='currentColor'%20/%3e%3c/svg%3e", _ = ({
-  className: u,
-  dismissible: p = !1,
+  className: p,
+  dismissible: b = !1,
   label: s,
   loading: o = !1,
   size: n,
-  variant: b,
+  variant: l,
   onClick: e,
   onDismiss: C
 }) => {
@@ -34,17 +34,17 @@ const V = [
     return (i = t.current) == null || i.addEventListener(
       "animationend",
       () => {
-        var l, c;
-        (l = t.current) == null || l.style.setProperty("display", "none"), (c = t.current) == null || c.remove();
+        var c, d;
+        (c = t.current) == null || c.style.setProperty("display", "none"), (d = t.current) == null || d.remove();
       },
       { signal: a.signal }
     ), () => a.abort();
-  }, []), /* @__PURE__ */ d(
+  }, []), /* @__PURE__ */ m(
     "span",
     {
       ref: t,
-      className: m(
-        Z({ variant: b, size: n, className: u }),
+      className: u(
+        Z({ variant: l, size: n, className: p }),
         e && "cursor-pointer"
       ),
       role: e ? "button" : void 0,
@@ -57,11 +57,11 @@ const V = [
       children: [
         o && /* @__PURE__ */ r(L, { className: "h-3 w-3 animate-spin animate-duration-time-2" }),
         s,
-        p && /* @__PURE__ */ d(
+        b && /* @__PURE__ */ m(
           "button",
           {
             type: "button",
-            className: m(M({ size: n })),
+            className: u(M({ size: n, variant: l })),
             onClick: g,
             "aria-label": "Dismiss",
             children: [

package/dist/components/Badge/Badge.variants.js

@@ -4,8 +4,8 @@ const a = e(
     "flex",
     "items-center",
     "justify-center",
-    "gap-1.5",
-    "rounded-md",
+    "gap-2",
+    "rounded",
     "px-2",
     "py-1",
     "w-max",
@@ -24,19 +24,15 @@ const a = e(
         warning: ["bg-yellow-100", "text-yellow-800"]
       },
       size: {
-        small: "text-sm",
-        medium: "text-base",
-        large: "text-lg",
-        xlarge: "text-xl",
-        xxlarge: "text-2xl"
+        default: "text-sm leading-[16px]"
       }
     },
     defaultVariants: {
       variant: "default",
-      size: "medium"
+      size: "default"
     }
   }
-), i = e(
+), n = e(
   [
     "rounded-full",
     "inline-flex",
@@ -44,24 +40,29 @@ const a = e(
     "justify-center",
     "focus:outline-none",
     "text-inherit",
-    "cursor-pointer"
+    "cursor-pointer",
+    "text-gray-700"
   ],
   {
     variants: {
+      variant: {
+        default: ["text-gray-700"],
+        danger: ["text-red-700"],
+        info: ["text-blue-700"],
+        success: ["text-green-700"],
+        warning: ["text-yellow-700"]
+      },
       size: {
-        small: ["h-3", "w-3"],
-        medium: ["h-3.5", "w-3.5"],
-        large: ["h-4", "w-4"],
-        xlarge: ["h-5", "w-5"],
-        xxlarge: ["h-6", "w-6"]
+        default: ["h-3.5", "w-3.5"]
       }
     },
     defaultVariants: {
-      size: "medium"
+      variant: "default",
+      size: "default"
     }
   }
 );
 export {
   a as badgeVariants,
-  i as buttonDismissVariants
+  n as buttonDismissVariants
 };

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -1,40 +1,40 @@
-import { jsx as a, jsxs as v } from "react/jsx-runtime";
-import h, { forwardRef as b, useId as y, Fragment as O } from "react";
-import { cn as c } from "../../utils/index.js";
-import { chevronVariants as j, breadcrumbVariants as w, breadcrumbWrapperVariants as P } from "./Breadcrumb.variants.js";
-import { Item as x } from "./components/Item/Item.js";
+import { jsx as a, jsxs as g } from "react/jsx-runtime";
+import u, { forwardRef as b, useId as v, Fragment as y } from "react";
+import { cn as h } from "../../utils/index.js";
+import { breadcrumbVariants as O, breadcrumbWrapperVariants as j } from "./Breadcrumb.variants.js";
+import { Item as w } from "./components/Item/Item.js";
 import { P as l } from "../../index-C5psggHV.js";
 function m() {
   return m = Object.assign || function(r) {
-    for (var n = 1; n < arguments.length; n++) {
-      var e = arguments[n];
+    for (var o = 1; o < arguments.length; o++) {
+      var e = arguments[o];
       for (var t in e)
         Object.prototype.hasOwnProperty.call(e, t) && (r[t] = e[t]);
     }
     return r;
   }, m.apply(this, arguments);
 }
-function k(r, n) {
+function x(r, o) {
   if (r == null) return {};
-  var e = N(r, n), t, o;
+  var e = P(r, o), t, n;
   if (Object.getOwnPropertySymbols) {
     var i = Object.getOwnPropertySymbols(r);
-    for (o = 0; o < i.length; o++)
-      t = i[o], !(n.indexOf(t) >= 0) && Object.prototype.propertyIsEnumerable.call(r, t) && (e[t] = r[t]);
+    for (n = 0; n < i.length; n++)
+      t = i[n], !(o.indexOf(t) >= 0) && Object.prototype.propertyIsEnumerable.call(r, t) && (e[t] = r[t]);
   }
   return e;
 }
-function N(r, n) {
+function P(r, o) {
   if (r == null) return {};
-  var e = {}, t = Object.keys(r), o, i;
+  var e = {}, t = Object.keys(r), n, i;
   for (i = 0; i < t.length; i++)
-    o = t[i], !(n.indexOf(o) >= 0) && (e[o] = r[o]);
+    n = t[i], !(o.indexOf(n) >= 0) && (e[n] = r[n]);
   return e;
 }
-var p = b(function(r, n) {
-  var e = r.color, t = e === void 0 ? "currentColor" : e, o = r.size, i = o === void 0 ? 24 : o, s = k(r, ["color", "size"]);
-  return /* @__PURE__ */ h.createElement("svg", m({
-    ref: n,
+var c = b(function(r, o) {
+  var e = r.color, t = e === void 0 ? "currentColor" : e, n = r.size, i = n === void 0 ? 24 : n, s = x(r, ["color", "size"]);
+  return /* @__PURE__ */ u.createElement("svg", m({
+    ref: o,
     xmlns: "http://www.w3.org/2000/svg",
     width: i,
     height: i,
@@ -44,57 +44,48 @@ var p = b(function(r, n) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, s), /* @__PURE__ */ h.createElement("polyline", {
+  }, s), /* @__PURE__ */ u.createElement("polyline", {
     points: "9 18 15 12 9 6"
   }));
 });
-p.propTypes = {
+c.propTypes = {
   color: l.string,
   size: l.oneOfType([l.string, l.number])
 };
-p.displayName = "ChevronRight";
-const C = ({
-  className: r,
-  size: n,
+c.displayName = "ChevronRight";
+const W = ({
+  "aria-label": r = "breadcrumb",
+  className: o,
   steps: e,
   theme: t,
-  "aria-label": o = "breadcrumb",
-  wrapperClassName: i,
-  ...s
+  wrapperClassName: n,
+  ...i
 }) => {
-  const d = y();
+  const s = v();
   return /* @__PURE__ */ a(
     "nav",
     {
-      "aria-label": o,
+      "aria-label": r,
       "data-theme": t,
-      className: c(
-        P({
-          className: i
+      className: h(
+        j({
+          className: n
         })
       ),
-      children: /* @__PURE__ */ a(
-        "ol",
-        {
-          className: c(w({ className: r, size: n })),
-          ...s,
-          children: e.map(({ label: f, ...g }, u) => /* @__PURE__ */ v(O, { children: [
-            /* @__PURE__ */ a(
-              x,
-              {
-                ...g,
-                label: f,
-                isLast: u === e.length - 1,
-                size: n
-              }
-            ),
-            u !== e.length - 1 && /* @__PURE__ */ a("li", { "aria-hidden": "true", children: /* @__PURE__ */ a(p, { className: c(j({ size: n })) }) })
-          ] }, `${d}-${f}`))
-        }
-      )
+      children: /* @__PURE__ */ a("ol", { className: h(O({ className: o })), ...i, children: e.map(({ label: p, ...d }, f) => /* @__PURE__ */ g(y, { children: [
+        /* @__PURE__ */ a(
+          w,
+          {
+            ...d,
+            label: p,
+            isLast: f === e.length - 1
+          }
+        ),
+        f !== e.length - 1 && /* @__PURE__ */ a("li", { "aria-hidden": "true", children: /* @__PURE__ */ a(c, { className: "text-gray-400 w-5 h-5 mt-0.5" }) })
+      ] }, `${s}-${p}`)) })
     }
   );
 };
 export {
-  C as Breadcrumb
+  W as Breadcrumb
 };

package/dist/components/Breadcrumb/Breadcrumb.variants.js

@@ -1,43 +1,12 @@
-import { c as a } from "../../index-BNmRGtA6.js";
-const e = a(
-  ["text-slate-500", "cursor-pointer"],
-  {
-    variants: {
-      size: {
-        sm: "",
-        base: "",
-        lg: "",
-        xl: ""
-      }
-    }
-  }
-), t = a(["flex", "gap-1", "items-center"], {
-  variants: {
-    size: {
-      sm: "",
-      base: "",
-      lg: "",
-      xl: ""
-    }
-  },
-  defaultVariants: {
-    size: "base"
-  }
-}), r = a("text-[#abadc6]", {
-  variants: {
-    size: {
-      sm: ["w-3", "h-3"],
-      base: ["w-4", "h-4"],
-      lg: ["w-5", "h-5"],
-      xl: ["w-6", "h-6"]
-    }
-  },
-  defaultVariants: {
-    size: "base"
-  }
-});
+import { c as e } from "../../index-BNmRGtA6.js";
+const r = e([
+  "text-slate-500",
+  "text-md",
+  "flex",
+  "gap-2",
+  "items-center"
+]), a = e(["flex", "gap-1", "items-center"]);
 export {
-  t as breadcrumbVariants,
-  e as breadcrumbWrapperVariants,
-  r as chevronVariants
+  a as breadcrumbVariants,
+  r as breadcrumbWrapperVariants
 };

package/dist/components/Breadcrumb/components/Item/Item.js

@@ -1,49 +1,48 @@
-import { jsx as a, Fragment as f } from "react/jsx-runtime";
-import { cn as n } from "../../../../utils/index.js";
-import { u as b, L as h } from "../../../../useBreadcrumb-BsIeMoR1.js";
-import { breadcrumbLinkVariants as c, breadcrumbLabelVariants as p, breadcrumbItemVariants as k } from "./Item.variants.js";
-const V = ({
+import { jsx as a, Fragment as u } from "react/jsx-runtime";
+import { cn as i } from "../../../../utils/index.js";
+import { u as f, L as h } from "../../../../useBreadcrumb-DMERrNkJ.js";
+import { breadcrumbLinkVariants as d, breadcrumbLabelVariants as p } from "./Item.variants.js";
+const x = ({
   isActive: r,
-  isLast: d,
-  label: s,
-  size: l,
+  isLast: c,
+  label: n,
   target: m,
-  theme: t,
+  theme: l,
   to: e
 }) => {
-  const { isInsideRouter: o } = b(), i = (u) => {
-    e === "#" && u.preventDefault();
+  const { isInsideRouter: t } = f(), s = (o) => {
+    e === "#" && o.preventDefault();
   };
   return /* @__PURE__ */ a(
     "li",
     {
-      "aria-current": d ? "page" : void 0,
-      className: n(k({ size: l })),
-      "data-theme": t,
-      children: e ? /* @__PURE__ */ a(f, { children: o ? /* @__PURE__ */ a(
+      "aria-current": c ? "page" : void 0,
+      className: "group font-medium text-inherit",
+      "data-theme": l,
+      children: e ? /* @__PURE__ */ a(u, { children: t ? /* @__PURE__ */ a(
         h,
         {
           to: e,
           target: m,
-          className: n(c({ isActive: r })),
+          className: i(d({ isActive: r })),
           "aria-disabled": r ? "true" : "false",
-          onClick: i,
-          children: s
+          onClick: s,
+          children: n
         }
       ) : /* @__PURE__ */ a(
         "a",
         {
           href: e,
           target: m,
-          className: n(c({ isActive: r })),
+          className: i(d({ isActive: r })),
           "aria-disabled": r ? "true" : "false",
-          onClick: i,
-          children: s
+          onClick: s,
+          children: n
         }
-      ) }) : /* @__PURE__ */ a("span", { className: n(p({ isActive: r })), children: s })
+      ) }) : /* @__PURE__ */ a("span", { className: i(p({ isActive: r })), children: n })
     }
   );
 };
 export {
-  V as Item
+  x as Item
 };

package/dist/components/Breadcrumb/components/Item/Item.variants.js

@@ -1,64 +1,52 @@
-import { c as t } from "../../../../index-BNmRGtA6.js";
-const i = t(
-  ["group", "font-semibold", "text-inherit"],
+import { c as e } from "../../../../index-BNmRGtA6.js";
+const r = e(
+  ["text-sm", "leading-5", "text-gray-400"],
   {
     variants: {
-      size: {
-        sm: "text-xs",
-        base: "text-sm",
-        lg: "text-base",
-        xl: "text-lg"
+      isActive: {
+        true: "",
+        false: "cursor-auto"
       }
     },
     defaultVariants: {
-      size: "base"
-    }
-  }
-), o = t(["text-inherit"], {
-  variants: {
-    isActive: {
-      true: "",
-      false: ["text-slate-400", "cursor-auto"]
-    }
-  },
-  defaultVariants: {
-    isActive: !0
-  },
-  compoundVariants: [
-    {
-      isActive: !0,
-      class: [
-        "group-focus-within:no-underline",
-        "group-focus-within:outline",
-        "group-focus-within:outline-2",
-        "group-focus-within:outline-offset-4",
-        "group-focus-within:outline-slate-500",
-        "group-focus-within:rounded-sm",
-        "group-hover:rounded-sm",
-        "hover:no-underline",
-        "hover:text-slate-500"
-      ]
+      isActive: !0
     },
-    {
-      isActive: void 0,
-      class: [
-        "group-focus-within:no-underline",
-        "group-focus-within:outline",
-        "group-focus-within:outline-2",
-        "group-focus-within:outline-offset-4",
-        "group-focus-within:outline-slate-500",
-        "group-focus-within:rounded-sm",
-        "group-hover:rounded-sm",
-        "hover:no-underline",
-        "hover:text-slate-500"
-      ]
-    }
-  ]
-}), s = t(["text-inherit"], {
+    compoundVariants: [
+      {
+        isActive: !0,
+        class: [
+          "group-[&:has(:focus-visible)]:no-underline",
+          "group-[&:has(:focus-visible)]:outline-2",
+          "group-[&:has(:focus-visible)]:outline-offset-6",
+          "group-[&:has(:focus-visible)]:outline-gray-500",
+          "group-[&:has(:focus-visible)]:text-gray-500",
+          "group-[&:has(:focus-visible)]:rounded-xs",
+          "group-hover:rounded-xs",
+          "hover:no-underline",
+          "hover:text-gray-500"
+        ]
+      },
+      {
+        isActive: void 0,
+        class: [
+          "group-[&:has(:focus-visible)]:no-underline",
+          "group-[&:has(:focus-visible)]:outline-2",
+          "group-[&:has(:focus-visible)]:outline-offset-6",
+          "group-[&:has(:focus-visible)]:outline-gray-500",
+          "group-[&:has(:focus-visible)]:text-gray-500",
+          "group-[&:has(:focus-visible)]:rounded-xs",
+          "group-hover:rounded-xs",
+          "hover:no-underline",
+          "hover:text-gray-500"
+        ]
+      }
+    ]
+  }
+), o = e(["text-sm", "leading-5"], {
   variants: {
     isActive: {
-      true: "",
-      false: ["text-slate-400"]
+      true: "text-gray-500",
+      false: ["text-gray-400", "cursor-default"]
     }
   },
   defaultVariants: {
@@ -66,7 +54,6 @@ const i = t(
   }
 });
 export {
-  i as breadcrumbItemVariants,
-  s as breadcrumbLabelVariants,
-  o as breadcrumbLinkVariants
+  o as breadcrumbLabelVariants,
+  r as breadcrumbLinkVariants
 };

package/dist/components/Breadcrumb/hooks/useBreadcrumb.js

@@ -1,4 +1,4 @@
-import { u } from "../../../useBreadcrumb-BsIeMoR1.js";
+import { u } from "../../../useBreadcrumb-DMERrNkJ.js";
 export {
   u as useBreadcrumb
 };

package/dist/components/Button/Button.js

@@ -1,38 +1,42 @@
-import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as i } from "react";
-import { S as u } from "../../index-Bk324h27.js";
-import { cn as c } from "../../utils/index.js";
-import { buttonVariants as l } from "./Button.variants.js";
-const x = i(
+import { jsx as u } from "react/jsx-runtime";
+import { forwardRef as c } from "react";
+import { S as l } from "../../index-B5MIi2tR.js";
+import { cn as x } from "../../utils/index.js";
+import { buttonVariants as B } from "./Button.variants.js";
+const C = c(
   ({
-    className: t,
-    variant: r,
-    theme: m,
-    size: a,
-    version: f,
+    appearance: t,
+    asChild: r = !1,
+    className: m,
     disabled: o = !1,
-    asChild: n = !1,
-    ...p
-  }, s) => /* @__PURE__ */ e(
-    n ? u : "button",
+    shape: a,
+    size: f,
+    theme: n,
+    variant: p,
+    version: s,
+    ...e
+  }, i) => /* @__PURE__ */ u(
+    r ? l : "button",
     {
-      ref: s,
-      "data-theme": m,
-      className: c(
-        l({
-          variant: r,
+      ref: i,
+      "data-theme": n,
+      className: x(
+        B({
+          appearance: t,
+          className: m,
           disabled: o,
-          size: a,
-          className: t,
-          version: f
+          shape: a,
+          size: f,
+          variant: p,
+          version: s
         })
       ),
       disabled: o,
-      ...p
+      ...e
     }
   )
 );
-x.displayName = "Button";
+C.displayName = "Button";
 export {
-  x as Button
+  C as Button
 };