quirk-ui 0.0.16 → 0.0.17

package/dist/assets/index14.css

@@ -1 +1 @@
-._button_17sgm_1{border-radius:var(--radius-md);border:1px solid transparent;padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-md);font-weight:var(--font-weight-bold);font-family:inherit;background-color:var(--color-primary);cursor:pointer;transition:background-color .25s,border-color .25s}._button_17sgm_1:hover{border-color:var(--color-secondary)}._button_17sgm_1:focus,._button_17sgm_1:focus-visible{outline:4px auto -webkit-focus-ring-color}._button_17sgm_1._primary_17sgm_21{background-color:var(--color-primary)}._button_17sgm_1._primary_17sgm_21:hover{background-color:var(--color-secondary)}._button_17sgm_1._secondary_17sgm_29{background-color:var(--color-secondary);border-color:var(--color-secondary)}._button_17sgm_1._secondary_17sgm_29:hover{background-color:var(--color-primary);border-color:var(--color-primary)}._button_17sgm_1._ghost_17sgm_39{background-color:transparent;border-color:var(--color-primary);border-width:2px;color:var(--color-primary)}._button_17sgm_1._ghost_17sgm_39:hover{background-color:var(--color-primary);color:#fff}._button_17sgm_1:disabled{border-color:var(--color-muted);background-color:var(--color-muted);color:#e0e0e0;cursor:not-allowed}
+._button_1avxf_1{border-radius:var(--radius-md);border:1px solid transparent;padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-md);font-weight:var(--font-weight-bold);font-family:inherit;background-color:var(--color-primary);cursor:pointer;transition:background-color .25s,border-color .25s}._button_1avxf_1:hover{border-color:var(--color-secondary)}._button_1avxf_1:focus,._button_1avxf_1:focus-visible{outline:4px auto -webkit-focus-ring-color}._button_1avxf_1:disabled{border-color:var(--color-muted);background-color:var(--color-muted);color:#e0e0e0;cursor:not-allowed}._primary_1avxf_29{background-color:var(--color-primary)}._primary_1avxf_29:hover{background-color:var(--color-secondary)}._secondary_1avxf_37{background-color:var(--color-secondary);border-color:var(--color-secondary)}._secondary_1avxf_37:hover{background-color:var(--color-primary);border-color:var(--color-primary)}._ghost_1avxf_47{background-color:transparent;border-color:var(--color-primary);border-width:2px;color:var(--color-primary)}._ghost_1avxf_47:hover{background-color:var(--color-primary);color:#fff}

package/dist/components/Accordion/Accordion.test.js

@@ -1,7 +1,7 @@
 import { jsx as c } from "react/jsx-runtime";
-import { d, i as m, r, g as t, s as e, f as s } from "../../vi.ClIskdbk-CZUVUGZN.js";
+import { d, i as m, r, g as t, s as e, f as s } from "../../vi.ClIskdbk-Z9moXFkA.js";
 import { Accordion as a } from "./index.js";
-import "../../index-Cm3oD894.js";
+import "../../index-Bb02nmpl.js";
 d("Accordion", () => {
   const l = [
     {

package/dist/components/Accordion/index.js

@@ -20,7 +20,7 @@ function j({
   const [m, _] = p([]), l = (o) => {
     _((n) => i ? n.includes(o) ? n.filter((r) => r !== o) : [...n, o] : n.includes(o) ? [] : [o]);
   };
-  return /* @__PURE__ */ e("div", { className: `${c.accordion} ${d ?? ""}`, children: s.map(({ id: o, title: n, content: r }) => {
+  return /* @__PURE__ */ e("div", { className: `${d ?? ""} ${c.accordion}`, children: s.map(({ id: o, title: n, content: r }) => {
     const t = m.includes(o);
     return /* @__PURE__ */ a("div", { className: c.accordionItem, children: [
       /* @__PURE__ */ a(

package/dist/components/Alert/Alert.test.js

@@ -1,7 +1,7 @@
 import { jsx as o } from "react/jsx-runtime";
-import { d as v, i as r, r as l, s as a, g as t, v as m, f as u, w as n } from "../../vi.ClIskdbk-CZUVUGZN.js";
+import { d as v, i as r, r as l, s as a, g as t, v as m, f as u, w as n } from "../../vi.ClIskdbk-Z9moXFkA.js";
 import { Alert as i } from "./index.js";
-import "../../index-Cm3oD894.js";
+import "../../index-Bb02nmpl.js";
 v("Alert", () => {
   r("renders the alert with the correct message and variant", () => {
     l(/* @__PURE__ */ o(i, { message: "Info Alert", variant: "info" }));

package/dist/components/Alert/index.js

@@ -35,7 +35,7 @@ function R({
   return l ? /* @__PURE__ */ m(
     "div",
     {
-      className: `${e.alert} ${j[o]} ${s ? e.enter : e.exit} ${u ?? ""}`,
+      className: `${u ?? ""} ${e.alert} ${j[o]} ${s ? e.enter : e.exit}`,
       role: "alert",
       children: [
         /* @__PURE__ */ r("span", { children: i }),

package/dist/components/Avatar/Avatar.test.js

@@ -1,7 +1,7 @@
 import { jsx as a } from "react/jsx-runtime";
-import { d as l, i as s, r as o, s as i, g as e, v as c, f as d } from "../../vi.ClIskdbk-CZUVUGZN.js";
+import { d as l, i as s, r as o, s as i, g as e, v as c, f as d } from "../../vi.ClIskdbk-Z9moXFkA.js";
 import { Avatar as r } from "./index.js";
-import "../../index-Cm3oD894.js";
+import "../../index-Bb02nmpl.js";
 l("Avatar", () => {
   s("renders an image when src is provided", () => {
     o(/* @__PURE__ */ a(r, { src: "https://via.placeholder.com/150", alt: "User avatar" }));

package/dist/components/Avatar/index.js

@@ -34,14 +34,20 @@ function M({
   return /* @__PURE__ */ m(
     "div",
     {
-      className: `${s.avatar} ${h[e]} ${u ?? ""}`,
+      className: `${u ?? ""} ${s.avatar} ${h[e]}`,
       style: { borderColor: c, backgroundColor: r },
       onClick: i,
       role: l ? "button" : void 0,
       "aria-label": l ? a : void 0,
       children: [
         t ? /* @__PURE__ */ n("img", { src: t, alt: a, className: s.image }) : /* @__PURE__ */ n("span", { className: s.initials, children: _ }),
-        o && /* @__PURE__ */ n("span", { className: `${s.status} ${j[o]}`, role: "status" })
+        o && /* @__PURE__ */ n(
+          "span",
+          {
+            className: `${s.status} ${j[o]}`,
+            role: "status"
+          }
+        )
       ]
     }
   );

package/dist/components/Badge/Badge.test.js

@@ -1,7 +1,7 @@
 import { jsx as t } from "react/jsx-runtime";
-import { d as u, i as a, r as c, s as o, g as s, v as d, f as r } from "../../vi.ClIskdbk-CZUVUGZN.js";
+import { d as u, i as a, r as c, s as o, g as s, v as d, f as r } from "../../vi.ClIskdbk-Z9moXFkA.js";
 import { Badge as l } from "./index.js";
-import "../../index-Cm3oD894.js";
+import "../../index-Bb02nmpl.js";
 import { P as i } from "../../plus-Cs7TaIK9.js";
 u("Badge", () => {
   a("renders default badge", () => {

package/dist/components/Badge/index.js

@@ -26,7 +26,7 @@ function p({
   return /* @__PURE__ */ o(
     "span",
     {
-      className: `${s.badge} ${z[t]} ${e ? s.clickable : ""} ${r ?? ""}`,
+      className: `${r ?? ""} ${s.badge} ${z[t]} ${e ? s.clickable : ""}`,
       onClick: e,
       role: e ? "button" : "status",
       children: [

package/dist/components/Box/Box.test.js

@@ -1,7 +1,7 @@
 import { jsx as t } from "react/jsx-runtime";
-import { d as r, i as o, r as n, s, g as a } from "../../vi.ClIskdbk-CZUVUGZN.js";
+import { d as r, i as o, r as n, s, g as a } from "../../vi.ClIskdbk-Z9moXFkA.js";
 import { Box as i } from "./index.js";
-import "../../index-Cm3oD894.js";
+import "../../index-Bb02nmpl.js";
 r("Box", () => {
   o("renders with default props", () => {
     n(/* @__PURE__ */ t(i, { children: "Content" }));

package/dist/components/Box/index.js

@@ -73,14 +73,14 @@ function V({
   ...c
 }) {
   const l = _, t = [
+    e ?? "",
     n.box,
     J[i],
     K[o],
     O[r],
     P[a],
     Q[d],
-    R[s],
-    e ?? ""
+    R[s]
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ k(l, { className: t, ...c, children: g });
 }

package/dist/components/Breadcrumbs/Breadcrumbs.test.js

@@ -1,7 +1,7 @@
 import { jsx as s } from "react/jsx-runtime";
-import { d as m, i as r, r as o, s as n, g as t } from "../../vi.ClIskdbk-CZUVUGZN.js";
+import { d as m, i as r, r as o, s as n, g as t } from "../../vi.ClIskdbk-Z9moXFkA.js";
 import { Breadcrumbs as l } from "./index.js";
-import "../../index-Cm3oD894.js";
+import "../../index-Bb02nmpl.js";
 m("Breadcrumbs", () => {
   const a = [
     { label: "Home", href: "/" },

package/dist/components/Button/Button.test.js

@@ -1,7 +1,7 @@
 import { jsx as s } from "react/jsx-runtime";
-import { d as l, i as o, r as n, s as a, g as e, v as c, f as r } from "../../vi.ClIskdbk-CZUVUGZN.js";
+import { d as l, i as o, r as n, s as a, g as e, v as c, f as r } from "../../vi.ClIskdbk-Z9moXFkA.js";
 import { Button as i } from "./index.js";
-import "../../index-Cm3oD894.js";
+import "../../index-Bb02nmpl.js";
 l("Button", () => {
   o('renders with default "primary" variant', () => {
     n(/* @__PURE__ */ s(i, { children: "Click me" }));

package/dist/components/Button/index.js

@@ -1,22 +1,29 @@
-import { jsx as a } from "react/jsx-runtime";
-import '../../assets/index14.css';const c = "_button_17sgm_1", m = "_primary_17sgm_21", y = "_secondary_17sgm_29", _ = "_ghost_17sgm_39", t = {
+import { jsx as n } from "react/jsx-runtime";
+import '../../assets/index14.css';const c = "_button_1avxf_1", y = "_primary_1avxf_29", _ = "_secondary_1avxf_37", e = "_ghost_1avxf_47", t = {
   button: c,
-  primary: m,
-  secondary: y,
-  ghost: _
-}, e = {
+  primary: y,
+  secondary: _,
+  ghost: e
+}, i = {
   primary: t.primary,
   secondary: t.secondary,
   ghost: t.ghost
 };
-function i({
-  variant: s = "primary",
-  className: o,
-  children: r,
-  ...n
+function p({
+  variant: o = "primary",
+  className: r,
+  children: s,
+  ...a
 }) {
-  return /* @__PURE__ */ a("button", { className: `${o ?? ""} ${t.button} ${e[s]}`, ...n, children: r });
+  return /* @__PURE__ */ n(
+    "button",
+    {
+      className: `${r ?? ""} ${t.button} ${i[o]}`,
+      ...a,
+      children: s
+    }
+  );
 }
 export {
-  i as Button
+  p as Button
 };

package/dist/components/ButtonGroup/ButtonGroup.test.js

@@ -1,7 +1,7 @@
 import { jsxs as o, jsx as t } from "react/jsx-runtime";
-import { d as a, i, r, g as n, s as c } from "../../vi.ClIskdbk-CZUVUGZN.js";
+import { d as a, i, r, g as n, s as c } from "../../vi.ClIskdbk-Z9moXFkA.js";
 import { ButtonGroup as s } from "./index.js";
-import "../../index-Cm3oD894.js";
+import "../../index-Bb02nmpl.js";
 a("ButtonGroup", () => {
   i("renders children", () => {
     r(

package/dist/components/ButtonGroup/index.js

@@ -15,7 +15,7 @@ function _({
   return /* @__PURE__ */ l(
     "div",
     {
-      className: `${o.buttonGroup} ${a} ${r ?? ""}`,
+      className: `${r ?? ""} ${o.buttonGroup} ${a}`,
       ...i,
       children: t
     }

package/dist/components/Calendar/Calendar.test.js

@@ -1,7 +1,7 @@
 import { jsx as c } from "react/jsx-runtime";
-import { d as D, i as s, r as l, g as n, s as a, v as m, f as d } from "../../vi.ClIskdbk-CZUVUGZN.js";
+import { d as D, i as s, r as l, g as n, s as a, v as m, f as d } from "../../vi.ClIskdbk-Z9moXFkA.js";
 import { f as y, C as r } from "../../index-C8O_LWE2.js";
-import "../../index-Cm3oD894.js";
+import "../../index-Bb02nmpl.js";
 D("Calendar", () => {
   s("renders the current month and year", () => {
     const t = new Date(2025, 4, 15);

package/dist/components/Card/Card.test.js

@@ -1,7 +1,7 @@
 import { jsx as o } from "react/jsx-runtime";
-import { d as l, i as n, r, g as t, s as e, v as a, f as d } from "../../vi.ClIskdbk-CZUVUGZN.js";
+import { d as l, i as n, r, g as t, s as e, v as a, f as d } from "../../vi.ClIskdbk-Z9moXFkA.js";
 import { Card as i } from "./index.js";
-import "../../index-Cm3oD894.js";
+import "../../index-Bb02nmpl.js";
 l("Card", () => {
   n("renders with title, content and footer", () => {
     r(

package/dist/components/Card/index.js

@@ -40,7 +40,7 @@ function q({
   return /* @__PURE__ */ o(
     "div",
     {
-      className: `${a.card} ${y[d]} ${l ? a.clickable : ""} ${_ ?? ""}`,
+      className: `${_ ?? ""} ${a.card} ${y[d]} ${l ? a.clickable : ""}`,
       onClick: s,
       role: s ? "button" : "presentation",
       children: [

package/dist/components/Carousel/Carousel.test.js

@@ -1,7 +1,7 @@
 import { jsx as n } from "react/jsx-runtime";
-import { d as h, v as d, i as s, r as a, g as i, s as t, f as r } from "../../vi.ClIskdbk-CZUVUGZN.js";
+import { d as h, v as d, i as s, r as a, g as i, s as t, f as r } from "../../vi.ClIskdbk-Z9moXFkA.js";
 import { Carousel as l } from "./index.js";
-import "../../index-Cm3oD894.js";
+import "../../index-Bb02nmpl.js";
 const c = [
   /* @__PURE__ */ n("div", { children: "Slide 1" }, "1"),
   /* @__PURE__ */ n("div", { children: "Slide 2" }, "2"),

package/dist/components/Carousel/index.js

@@ -46,7 +46,7 @@ function J({
     const t = 100 / n;
     return `translateX(-${s * t}%)`;
   };
-  return /* @__PURE__ */ _("div", { className: `${e.carousel} ${f ?? ""}`, children: [
+  return /* @__PURE__ */ _("div", { className: `${f ?? ""} ${e.carousel}`, children: [
     /* @__PURE__ */ r(
       "div",
       {

package/dist/components/Checkbox/Checkbox.test.js

@@ -1,7 +1,7 @@
 import { jsx as t } from "react/jsx-runtime";
-import { d as n, i as b, r as s, g as c, s as o, v as h } from "../../vi.ClIskdbk-CZUVUGZN.js";
+import { d as n, i as b, r as s, g as c, s as o, v as h } from "../../vi.ClIskdbk-Z9moXFkA.js";
 import { Checkbox as a } from "./index.js";
-import "../../index-Cm3oD894.js";
+import "../../index-Bb02nmpl.js";
 n("Checkbox", () => {
   b("renders correctly", () => {
     s(

package/dist/components/Checkbox/index.js

@@ -17,7 +17,7 @@ function z({
   className: s,
   ...t
 }) {
-  return /* @__PURE__ */ m("div", { className: `${e.wrapper} ${s ?? ""}`, children: [
+  return /* @__PURE__ */ m("div", { className: `${s ?? ""} ${e.wrapper}`, children: [
     /* @__PURE__ */ l(
       "input",
       {

package/dist/components/Container/Container.test.js

@@ -1,7 +1,7 @@
 import { jsx as s } from "react/jsx-runtime";
-import { d as c, i as t, r as i, g as n, s as o } from "../../vi.ClIskdbk-CZUVUGZN.js";
+import { d as c, i as t, r as i, g as n, s as o } from "../../vi.ClIskdbk-Z9moXFkA.js";
 import { Container as a } from "./index.js";
-import "../../index-Cm3oD894.js";
+import "../../index-Bb02nmpl.js";
 c("Container", () => {
   t("renders children", () => {
     i(/* @__PURE__ */ s(a, { children: "Test content" })), n(o.getByText("Test content")).toBeInTheDocument();

package/dist/components/Container/index.js

@@ -20,7 +20,7 @@ function p({
   return /* @__PURE__ */ e(
     d,
     {
-      className: `${n.container} ${i} ${_ ?? ""}`,
+      className: `${_ ?? ""} ${n.container} ${i}`,
       ...c,
       children: s
     }

package/dist/components/DatePicker/DatePicker.test.js

@@ -1,7 +1,7 @@
 import { jsx as n } from "react/jsx-runtime";
-import { v as r, d as k, i as c, r as d, g as t, s as a, f as l } from "../../vi.ClIskdbk-CZUVUGZN.js";
+import { v as r, d as k, i as c, r as d, g as t, s as a, f as l } from "../../vi.ClIskdbk-Z9moXFkA.js";
 import { DatePicker as o } from "./index.js";
-import "../../index-Cm3oD894.js";
+import "../../index-Bb02nmpl.js";
 import { f as u } from "../../index-C8O_LWE2.js";
 r.mock("../Calendar", () => ({
   Calendar: ({ onSelectDate: e }) => /* @__PURE__ */ n(

package/dist/components/DatePicker/index.js

@@ -22,7 +22,7 @@ function L({
   ...v
 }) {
   const [p, y] = i(null), [u, l] = i(!1);
-  return /* @__PURE__ */ h("div", { className: `${s.wrapper} ${d ?? ""}`, children: [
+  return /* @__PURE__ */ h("div", { className: `${d ?? ""} ${s.wrapper}`, children: [
     /* @__PURE__ */ e(w, { htmlFor: o, required: a, disabled: c, children: m }),
     /* @__PURE__ */ e(
       "input",

package/dist/components/Divider/Divider.test.js

@@ -1,7 +1,7 @@
 import { jsx as r } from "react/jsx-runtime";
-import { d as o, i as e, r as i, g as t } from "../../vi.ClIskdbk-CZUVUGZN.js";
+import { d as o, i as e, r as i, g as t } from "../../vi.ClIskdbk-Z9moXFkA.js";
 import { Divider as a } from "./index.js";
-import "../../index-Cm3oD894.js";
+import "../../index-Bb02nmpl.js";
 o("Spacer", () => {
   e("renders with default props", () => {
     const { container: s } = i(/* @__PURE__ */ r(a, {}));

package/dist/components/Divider/index.js

@@ -12,7 +12,13 @@ function v({
   className: r,
   ...t
 }) {
-  return /* @__PURE__ */ a("div", { className: `${i.divider} ${n[o]} ${r ?? ""}`, ...t });
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: `${r ?? ""} ${i.divider} ${n[o]}`,
+      ...t
+    }
+  );
 }
 export {
   v as Divider

package/dist/components/Drawer/Drawer.test.js

@@ -1,7 +1,7 @@
 import { jsx as e, jsxs as f } from "react/jsx-runtime";
-import { d as h, i as r, r as s, v as t, g as l, s as c, f as a } from "../../vi.ClIskdbk-CZUVUGZN.js";
+import { d as h, i as r, r as s, v as t, g as l, s as c, f as a } from "../../vi.ClIskdbk-Z9moXFkA.js";
 import { Drawer as i } from "./index.js";
-import "../../index-Cm3oD894.js";
+import "../../index-Bb02nmpl.js";
 h("Drawer", () => {
   const n = /* @__PURE__ */ e("nav", { children: /* @__PURE__ */ f("ul", { children: [
     /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e("a", { href: "/profile", children: "Profile" }) }),

package/dist/components/Drawer/index.js

@@ -41,7 +41,7 @@ function j({
       "aside",
       {
         ref: n,
-        className: `${e.drawer} ${$[_]} ${o ? e.open : ""} ${u ?? ""}`,
+        className: `${u ?? ""} ${e.drawer} ${$[_]} ${o ? e.open : ""}`,
         role: "dialog",
         "aria-label": i,
         "aria-modal": "true",

package/dist/components/Fieldset/Fieldset.test.js

@@ -1,7 +1,7 @@
 import { jsx as e } from "react/jsx-runtime";
-import { d as o, i as t, r, g as n, s as d } from "../../vi.ClIskdbk-CZUVUGZN.js";
+import { d as o, i as t, r, g as n, s as d } from "../../vi.ClIskdbk-Z9moXFkA.js";
 import { Fieldset as i } from "./index.js";
-import "../../index-Cm3oD894.js";
+import "../../index-Bb02nmpl.js";
 o("Fieldset", () => {
   t("renders children", () => {
     r(

package/dist/components/Fieldset/index.js

@@ -9,10 +9,17 @@ function r({
   children: t,
   ...d
 }) {
-  return /* @__PURE__ */ i("fieldset", { className: `${s.fieldset} ${l ?? ""}`, ...d, children: [
-    e && /* @__PURE__ */ n("legend", { className: s.legend, children: e }),
-    t
-  ] });
+  return /* @__PURE__ */ i(
+    "fieldset",
+    {
+      className: `${l ?? ""} ${s.fieldset}`,
+      ...d,
+      children: [
+        e && /* @__PURE__ */ n("legend", { className: s.legend, children: e }),
+        t
+      ]
+    }
+  );
 }
 export {
   r as Fieldset

package/dist/components/FileUpload/FileUpload.test.js

@@ -1,7 +1,7 @@
 import { jsx as o } from "react/jsx-runtime";
-import { d as c, i as t, r as l, g as s, s as n, v as a, f as d } from "../../vi.ClIskdbk-CZUVUGZN.js";
+import { d as c, i as t, r as l, g as s, s as n, v as a, f as d } from "../../vi.ClIskdbk-Z9moXFkA.js";
 import { FileUpload as r } from "./index.js";
-import "../../index-Cm3oD894.js";
+import "../../index-Bb02nmpl.js";
 c("FileUpload", () => {
   t("renders the label correctly", () => {
     l(/* @__PURE__ */ o(r, { label: "Upload your resume", onFilesChange: () => {

package/dist/components/FileUpload/index.js

@@ -31,7 +31,7 @@ function M({
     const r = t.filter((_, $) => $ !== e);
     m(r), s == null || s(r);
   }, g = D ?? `upload-${Math.random().toString(36).slice(2)}`;
-  return /* @__PURE__ */ p("div", { className: `${i.wrapper} ${v ?? ""}`, children: [
+  return /* @__PURE__ */ p("div", { className: `${v ?? ""} ${i.wrapper}`, children: [
     c && /* @__PURE__ */ n(Z, { htmlFor: g, required: f, disabled: o, children: c }),
     /* @__PURE__ */ n(
       "div",

package/dist/components/FloatingActionButton/FloatingActionButton.test.js

@@ -1,7 +1,7 @@
 import { jsx as e } from "react/jsx-runtime";
-import { d as r, i as o, r as i, g as l, s, v as d, f as m } from "../../vi.ClIskdbk-CZUVUGZN.js";
+import { d as r, i as o, r as i, g as l, s, v as d, f as m } from "../../vi.ClIskdbk-Z9moXFkA.js";
 import { FloatingActionButton as c } from "./index.js";
-import "../../index-Cm3oD894.js";
+import "../../index-Bb02nmpl.js";
 import { P as n } from "../../plus-Cs7TaIK9.js";
 r("FloatingActionButton", () => {
   o("renders the icon", () => {

package/dist/components/FloatingActionButton/index.js

@@ -27,7 +27,7 @@ function u({
   return /* @__PURE__ */ d(
     "button",
     {
-      className: `${t.fab} ${a} ${p} ${e} ${m ?? ""}`,
+      className: `${m ?? ""} ${t.fab} ${a} ${p} ${e} `,
       onClick: l,
       disabled: s,
       ...i,

package/dist/components/Form/Form.test.js

@@ -1,7 +1,7 @@
 import { jsx as e } from "react/jsx-runtime";
-import { d as i, i as o, r, g as s, s as a } from "../../vi.ClIskdbk-CZUVUGZN.js";
+import { d as i, i as o, r, g as s, s as a } from "../../vi.ClIskdbk-Z9moXFkA.js";
 import { Form as m } from "./index.js";
-import "../../index-Cm3oD894.js";
+import "../../index-Bb02nmpl.js";
 i("Form", () => {
   o("renders children", () => {
     r(

package/dist/components/Grid/Grid.test.js

@@ -1,7 +1,7 @@
 import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import { d as o, i as d, r as m, g as i, s as l } from "../../vi.ClIskdbk-CZUVUGZN.js";
+import { d as o, i as d, r as m, g as i, s as l } from "../../vi.ClIskdbk-Z9moXFkA.js";
 import { Grid as s } from "./index.js";
-import "../../index-Cm3oD894.js";
+import "../../index-Bb02nmpl.js";
 o("Grid", () => {
   d("renders children", () => {
     m(

package/dist/components/Grid/index.js

@@ -56,7 +56,7 @@ function v({
   return console.log(e), /* @__PURE__ */ u(
     "div",
     {
-      className: `${$.grid} ${s ?? ""}`,
+      className: `${s ?? ""} ${$.grid}`,
       style: e,
       ...m,
       children: p

package/dist/components/Heading/Heading.test.js

@@ -1,7 +1,7 @@
 import { jsx as t } from "react/jsx-runtime";
-import { d as i, i as a, r as s, s as d, g as l } from "../../vi.ClIskdbk-CZUVUGZN.js";
+import { d as i, i as a, r as s, s as d, g as l } from "../../vi.ClIskdbk-Z9moXFkA.js";
 import { Heading as n } from "./index.js";
-import "../../index-Cm3oD894.js";
+import "../../index-Bb02nmpl.js";
 i("Heading", () => {
   a("renders with default level (h1)", () => {
     s(/* @__PURE__ */ t(n, { children: "Test Heading" }));

package/dist/components/Heading/index.js

@@ -16,7 +16,7 @@ function f({
   const n = `h${s}`, c = l[`h${s}`] || "";
   return o.createElement(
     n,
-    { className: `${h ?? ""} ${c}`, ..._ },
+    { className: ` ${h ?? ""} ${c}`, ..._ },
     t
   );
 }

package/dist/components/IconButton/IconButton.test.js

@@ -1,7 +1,7 @@
 import { jsx as t } from "react/jsx-runtime";
-import { d as r, i as o, r as a, s as n, g as s, v as m, f as b } from "../../vi.ClIskdbk-CZUVUGZN.js";
+import { d as r, i as o, r as a, s as n, g as s, v as m, f as b } from "../../vi.ClIskdbk-Z9moXFkA.js";
 import { IconButton as l } from "./index.js";
-import "../../index-Cm3oD894.js";
+import "../../index-Bb02nmpl.js";
 import { T as c } from "../../trash-2-2Rn0a4s6.js";
 r("IconButton", () => {
   o("renders with icon and accessible label", () => {

package/dist/components/IconButton/index.js

@@ -23,7 +23,7 @@ function O({
   return /* @__PURE__ */ a(
     "button",
     {
-      className: `${_ ?? ""} ${t.iconButton} ${m} ${r}`,
+      className: `${t.iconButton} ${m} ${r} ${_ ?? ""} `,
       disabled: c,
       "aria-label": n,
       ...u,

package/dist/components/Input/Input.test.js

@@ -1,7 +1,7 @@
 import { jsx as a } from "react/jsx-runtime";
-import { d as m, i, r as t, g as e, s as r } from "../../vi.ClIskdbk-CZUVUGZN.js";
+import { d as m, i, r as t, g as e, s as r } from "../../vi.ClIskdbk-Z9moXFkA.js";
 import { Input as l } from "./index.js";
-import "../../index-Cm3oD894.js";
+import "../../index-Bb02nmpl.js";
 m("Input", () => {
   i("renders an input with a label", () => {
     t(/* @__PURE__ */ a(l, { label: "email", name: "email" })), e(r.getByLabelText("email")).toBeInTheDocument();

package/dist/components/Input/index.js

@@ -20,7 +20,7 @@ function x({
   ...i
 }) {
   const s = o ?? i.name ?? `input-${Math.random().toString(36).slice(2)}`;
-  return /* @__PURE__ */ _("div", { className: `${t.wrapper} ${a ?? ""}`, children: [
+  return /* @__PURE__ */ _("div", { className: `${a ?? ""} ${t.wrapper}`, children: [
     n && /* @__PURE__ */ e(
       u,
       {

package/dist/components/Label/Label.test.js

@@ -1,7 +1,7 @@
 import { jsx as t } from "react/jsx-runtime";
-import { d as s, i as o, r as n, g as e, s as r } from "../../vi.ClIskdbk-CZUVUGZN.js";
+import { d as s, i as o, r as n, g as e, s as r } from "../../vi.ClIskdbk-Z9moXFkA.js";
 import { Label as l } from "./index.js";
-import "../../index-Cm3oD894.js";
+import "../../index-Bb02nmpl.js";
 s("Label", () => {
   o("renders label text", () => {
     n(/* @__PURE__ */ t(l, { htmlFor: "username", children: "Username" })), e(r.getByText("Username")).toBeInTheDocument();

package/dist/components/Label/index.js

@@ -58,7 +58,7 @@ function F({
   return /* @__PURE__ */ e(
     "label",
     {
-      className: `${m ?? ""} ${o.label} ${x} ${f} ${u}`,
+      className: `${o.label} ${x} ${f} ${u} ${m ?? ""} `,
       "aria-disabled": l || void 0,
       ...y,
       htmlFor: r,

package/dist/components/Link/Link.test.js

@@ -1,7 +1,7 @@
 import { jsx as t } from "react/jsx-runtime";
-import { d as c, i as r, r as i, s as o, g as n } from "../../vi.ClIskdbk-CZUVUGZN.js";
+import { d as c, i as r, r as i, s as o, g as n } from "../../vi.ClIskdbk-Z9moXFkA.js";
 import { L as a, M as l } from "../../index-CzDm6DZN.js";
-import "../../index-Cm3oD894.js";
+import "../../index-Bb02nmpl.js";
 c("Link", () => {
   r("renders a normal anchor tag by default", () => {
     i(/* @__PURE__ */ t(a, { href: "/about", children: "About us" }));

package/dist/components/List/List.test.js

@@ -1,5 +1,5 @@
 import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import { v as I, d as k, i, r as n, g as t, s as o, f as s } from "../../vi.ClIskdbk-CZUVUGZN.js";
+import { v as I, d as k, i, r as n, g as t, s as o, f as s } from "../../vi.ClIskdbk-Z9moXFkA.js";
 import { List as l } from "./index.js";
 import { IconButton as h } from "../IconButton/index.js";
 import { c as y } from "../../createLucideIcon-C8GTh_Qx.js";

package/dist/components/List/index.js

@@ -9,10 +9,10 @@ function d({
   className: a,
   onItemClick: t
 }) {
-  return /* @__PURE__ */ l(r ? "ol" : "ul", { className: `${n.list} ${a ?? ""}`, children: e.map((s) => /* @__PURE__ */ l(
+  return /* @__PURE__ */ l(r ? "ol" : "ul", { className: `${a ?? ""} ${n.list}`, children: e.map((s) => /* @__PURE__ */ l(
     "li",
     {
-      className: `${n.listItem} ${s.className ?? ""}`,
+      className: `${s.className ?? ""} ${n.listItem}`,
       onClick: () => t == null ? void 0 : t(s),
       children: s.renderItem ? s.renderItem(s.content) : s.content
     },