@kolking/react-ui 1.6.0 → 1.7.0

package/dist/components/Avatar/Avatar.js

@@ -1,42 +1,51 @@
-import { jsxs as S, jsx as c } from "react/jsx-runtime";
-import _ from "classnames";
-import * as l from "react";
-import { forwardRef as h, useMemo as N, useState as x, useEffect as A, useCallback as E } from "react";
+import { jsxs as _, jsx as i } from "react/jsx-runtime";
+import h from "classnames";
+import * as m from "react";
+import { forwardRef as S, useMemo as x, useState as A, useEffect as N, useCallback as E } from "react";
 import { cssProps as C } from "../../utils/helpers.js";
 import { getStringColor as k, getGravatarUri as M, getInitials as R } from "./helpers.js";
-const b = (a, r) => /* @__PURE__ */ l.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 50 50", ref: r, ...a }, /* @__PURE__ */ l.createElement("path", { fill: "currentColor", d: "M25 31c4.97 0 9-4.253 9-9.5S29.97 12 25 12s-9 4.253-9 9.5 4.03 9.5 9 9.5Zm19 19c0-8.837-8.507-15-19-15S6 41.163 6 50h38Z" })), j = h(b), y = "Avatar_avatar_PNlL5", G = "Avatar_image_Jwmxk", I = "Avatar_name_sGSwN", e = {
+const b = (a, t) => /* @__PURE__ */ m.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 50 50", ref: t, ...a }, /* @__PURE__ */ m.createElement("path", { fill: "currentColor", d: "M25 31c4.97 0 9-4.253 9-9.5S29.97 12 25 12s-9 4.253-9 9.5 4.03 9.5 9 9.5Zm19 19c0-8.837-8.507-15-19-15S6 41.163 6 50h38Z" })), j = S(b), y = "Avatar_avatar_PNlL5", I = "Avatar_image_Jwmxk", P = "Avatar_initials_i0r2T", e = {
   avatar: y,
-  image: G,
-  name: I,
+  image: I,
+  initials: P,
   default: "Avatar_default_v75Mg"
 }, J = ({
   size: a = 50,
-  name: r,
+  name: t,
   email: o,
-  src: m,
+  src: c,
   colorize: v,
   className: d,
-  style: g,
-  children: u,
+  style: u,
+  children: g,
   ...f
 }) => {
-  const t = r == null ? void 0 : r.trim(), p = v && t ? k(t) : void 0, s = N(() => m || (o ? M(a, o) : void 0), [m, a, o]), [n, i] = x(s);
-  A(() => {
-    i(s);
+  const r = t == null ? void 0 : t.trim(), p = v && r ? k(r) : void 0, s = x(() => c || (o ? M(a, o) : void 0), [c, a, o]), [l, n] = A(s);
+  N(() => {
+    n(s);
   }, [s]);
   const w = E(() => {
-    i(void 0);
+    n(void 0);
   }, []);
-  return /* @__PURE__ */ S(
+  return /* @__PURE__ */ _(
     "div",
     {
       ...f,
       "data-avatar": !0,
-      className: _(e.avatar, d),
-      style: { ...g, ...C({ size: a, backgroundColor: p }) },
+      className: h(e.avatar, d),
+      style: { ...u, ...C({ size: a, backgroundColor: p }) },
       children: [
-        n ? /* @__PURE__ */ c("img", { className: e.image, src: n, alt: t, onError: w }) : t ? /* @__PURE__ */ c("span", { className: e.name, children: R(t) }) : /* @__PURE__ */ c(j, { className: e.default, "aria-hidden": !0 }),
-        u
+        l ? /* @__PURE__ */ i(
+          "img",
+          {
+            "data-avatar-image": !0,
+            className: e.image,
+            src: l,
+            alt: r ?? "",
+            onError: w
+          }
+        ) : r ? /* @__PURE__ */ i("span", { "data-avatar-initials": !0, className: e.initials, children: R(r) }) : /* @__PURE__ */ i(j, { "aria-hidden": !0, "data-avatar-default": !0, className: e.default }),
+        g
       ]
     }
   );

package/dist/components/Badge/Badge.js

@@ -2,19 +2,19 @@ import { jsx as B } from "react/jsx-runtime";
 import b from "classnames";
 import { useRef as m, useEffect as h } from "react";
 import { cssProps as w } from "../../utils/helpers.js";
-const E = "Badge_badge_-mEE7", M = "Badge_gray_7jA-J", P = "Badge_red_zPgCR", x = "Badge_orange_EoLmF", H = "Badge_yellow_qvbb6", I = "Badge_green_XX-1c", R = "Badge_teal_VHoFK", X = "Badge_cyan_1ksBn", j = "Badge_blue_YulfT", C = "Badge_indigo_2KXUy", F = "Badge_purple_o55fQ", K = "Badge_brown_x1GS7", O = "Badge_accent_BIYve", d = {
+const E = "Badge_badge_-mEE7", M = "Badge_gray_7jA-J", P = "Badge_brown_x1GS7", x = "Badge_red_zPgCR", H = "Badge_orange_EoLmF", I = "Badge_yellow_qvbb6", R = "Badge_green_XX-1c", X = "Badge_teal_VHoFK", j = "Badge_cyan_1ksBn", C = "Badge_blue_YulfT", F = "Badge_indigo_2KXUy", K = "Badge_purple_o55fQ", O = "Badge_accent_BIYve", d = {
   badge: E,
   gray: M,
-  red: P,
-  orange: x,
-  yellow: H,
-  green: I,
-  teal: R,
-  cyan: X,
-  blue: j,
-  indigo: C,
-  purple: F,
-  brown: K,
+  brown: P,
+  red: x,
+  orange: H,
+  yellow: I,
+  green: R,
+  teal: X,
+  cyan: j,
+  blue: C,
+  indigo: F,
+  purple: K,
   accent: O
 }, q = ({
   size: l,

package/dist/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,10 +1,12 @@
 import { default as React } from 'react';
-export type Breadcrumb = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+import { PolymorphicProps } from '../../utils/helpers';
+export type Breadcrumb<T extends React.ElementType = 'a'> = PolymorphicProps<T, {
+    as?: T;
     label: React.ReactNode;
-};
-export type BreadcrumbsProps = React.HTMLAttributes<HTMLOListElement> & {
+}>;
+export type BreadcrumbsProps = React.OlHTMLAttributes<HTMLOListElement> & {
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    items: Breadcrumb[];
+    items: Breadcrumb<React.ElementType>[];
     separator?: React.ReactNode;
     margin?: React.CSSProperties['margin'];
 };

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -1,9 +1,9 @@
-import { jsx as a, jsxs as i } from "react/jsx-runtime";
-import p from "classnames";
-import { cssProps as h } from "../../utils/helpers.js";
-const f = "Breadcrumbs_breadcrumbs_a3ubb", g = {
-  breadcrumbs: f
-}, _ = ({
+import { jsx as a, jsxs as p } from "react/jsx-runtime";
+import h from "classnames";
+import { cssProps as f } from "../../utils/helpers.js";
+const g = "Breadcrumbs_breadcrumbs_a3ubb", j = {
+  breadcrumbs: g
+}, v = ({
   size: t,
   items: s = [],
   separator: b = "›",
@@ -16,13 +16,13 @@ const f = "Breadcrumbs_breadcrumbs_a3ubb", g = {
   {
     ...n,
     "data-breadcrumbs": !0,
-    className: p(g.breadcrumbs, o),
-    style: { ...m, ...h({ size: t, margin: d }) },
-    children: s.map(({ label: u, ...e }, r) => {
-      const c = r === s.length - 1, l = e.href ? "a" : "span";
-      return /* @__PURE__ */ i("li", { children: [
+    className: h(j.breadcrumbs, o),
+    style: { ...m, ...f({ size: t, margin: d }) },
+    children: s.map(({ label: u, as: l, ...e }, r) => {
+      const c = r === s.length - 1, i = l ?? (e.href ? "a" : "span");
+      return /* @__PURE__ */ p("li", { children: [
         /* @__PURE__ */ a(
-          l,
+          i,
           {
             ...e,
             "data-breadcrumbs-item": r,
@@ -36,5 +36,5 @@ const f = "Breadcrumbs_breadcrumbs_a3ubb", g = {
   }
 );
 export {
-  _ as Breadcrumbs
+  v as Breadcrumbs
 };

package/dist/components/Dialog/Dialog.js

@@ -3,17 +3,17 @@ import y, { useRef as D, useImperativeHandle as _, useEffect as E } from "react"
 import { createPortal as k } from "react-dom";
 import { FocusTrap as h } from "focus-trap-react";
 import s from "classnames";
-import { Icon as L } from "../Icon/Icon.js";
+import { cssProps as L } from "../../utils/helpers.js";
 import { Button as N } from "../Button/Button.js";
 import { Heading as b } from "../Heading/Heading.js";
-import { cssProps as w } from "../../utils/helpers.js";
+import { Icon as w } from "../Icon/Icon.js";
 const x = "Dialog_overlay_C98Qt", R = "Dialog_dialog_G3gxL", T = "Dialog_footer_N-aEV", I = "Dialog_close_JSEkn", i = {
   overlay: x,
   dialog: R,
   footer: T,
   close: I
 }, P = { escapeDeactivates: !1 }, Q = y.forwardRef(
-  ({ open: t = !1, size: e, width: l, style: m, className: g, children: u, requestClose: n, ...p }, v) => {
+  ({ open: t = !1, size: e, width: l, style: g, className: m, children: u, requestClose: n, ...p }, v) => {
     const c = D(null);
     return _(v, () => c.current), E(() => {
       const r = c.current;
@@ -44,8 +44,8 @@ const x = "Dialog_overlay_C98Qt", R = "Dialog_dialog_G3gxL", T = "Dialog_footer_
               role: "alertdialog",
               "aria-modal": "true",
               "data-dialog-wrapper": !0,
-              className: s(i.dialog, g),
-              style: { ...m, ...w({ size: e, width: l }) },
+              className: s(i.dialog, m),
+              style: { ...g, ...L({ size: e, width: l }) },
               children: u
             }
           )
@@ -58,12 +58,12 @@ const x = "Dialog_overlay_C98Qt", R = "Dialog_dialog_G3gxL", T = "Dialog_footer_
 ), V = ({ className: t, children: e, ...l }) => /* @__PURE__ */ o(b, { as: "h4", ...l, "data-dialog-title": !0, title: e, className: t }), z = (t) => /* @__PURE__ */ o("div", { ...t, "data-dialog-content": !0 }), A = ({ className: t, ...e }) => /* @__PURE__ */ o("div", { ...e, "data-dialog-footer": !0, className: s(i.footer, t) }), K = ({ className: t, ...e }) => /* @__PURE__ */ o(
   N,
   {
-    ...e,
     type: "button",
     variant: "tertiary",
+    "aria-label": "close dialog",
+    icon: /* @__PURE__ */ o(w, { name: "close" }),
+    ...e,
     "data-dialog-close": !0,
-    "aria-label": "dismiss dialog",
-    icon: /* @__PURE__ */ o(L, { name: "close" }),
     className: s(i.close, t)
   }
 );

package/dist/components/Fields/Checkbox.js

@@ -1,23 +1,23 @@
-import { jsxs as i, jsx as l } from "react/jsx-runtime";
-import p from "classnames";
-import h, { useRef as x, useImperativeHandle as k, useEffect as b } from "react";
+import { jsxs as h, jsx as a } from "react/jsx-runtime";
+import i from "classnames";
+import p, { useRef as x, useImperativeHandle as b, useEffect as k } from "react";
 import { cssProps as R } from "../../utils/helpers.js";
-import { I as y, s as n } from "../../Input-D46mAsdt.js";
-const q = h.forwardRef(
-  ({ size: c, error: a, label: t, className: f, style: u, required: m, indeterminate: r, ...s }, d) => {
-    const o = s.checked, e = x(null);
-    return k(d, () => e.current), b(() => {
-      r != null && e.current != null && (e.current.indeterminate = !o && r);
-    }, [e, r, o]), /* @__PURE__ */ i(
+import { I as y, s as l } from "../../Input-D46mAsdt.js";
+const q = p.forwardRef(
+  ({ size: c, error: n, label: t, className: u, style: f, required: m, indeterminate: r, ...o }, d) => {
+    const s = o.checked, e = x(null);
+    return b(d, () => e.current), k(() => {
+      r != null && e.current != null && (e.current.indeterminate = !s && r);
+    }, [e, r, s]), /* @__PURE__ */ h(
       "label",
       {
-        "data-input": "checkbox",
+        "data-checkbox": !0,
         "data-required": m,
-        className: p(n.checkbox, f),
-        style: { ...u, ...R({ size: c }) },
+        className: i(l.checkbox, u),
+        style: { ...f, ...R({ size: c }) },
         children: [
-          /* @__PURE__ */ l(y, { ...s, ref: e, type: "checkbox", size: c, error: a }),
-          t && /* @__PURE__ */ l("div", { className: n.label, children: t })
+          /* @__PURE__ */ a(y, { ...o, ref: e, type: "checkbox", size: c, error: n }),
+          t && /* @__PURE__ */ a("div", { "data-checkbox-label": !0, className: l.label, children: t })
         ]
       }
     );

package/dist/components/Fields/Numeric.d.ts

@@ -1,4 +1,10 @@
 import { default as React } from 'react';
 import { InputProps } from './Input';
-export type NumericProps = Omit<InputProps, 'children'>;
-export declare const Numeric: React.ForwardRefExoticComponent<NumericProps & React.RefAttributes<HTMLInputElement>>;
+export type NumericProps = Omit<InputProps, 'children'> & {
+    labelIncrease?: string;
+    labelDecrease?: string;
+};
+export declare const Numeric: React.ForwardRefExoticComponent<Omit<InputProps, "children"> & {
+    labelIncrease?: string;
+    labelDecrease?: string;
+} & React.RefAttributes<HTMLInputElement>>;

package/dist/components/Fields/Numeric.js

@@ -1,43 +1,43 @@
-import { jsxs as p, jsx as t } from "react/jsx-runtime";
-import b from "classnames";
-import f, { useRef as y, useImperativeHandle as _, useCallback as c } from "react";
+import { jsxs as f, jsx as t } from "react/jsx-runtime";
+import y from "classnames";
+import _, { useRef as h, useImperativeHandle as v, useCallback as c } from "react";
 import { Icon as i } from "../Icon/Icon.js";
 import { Button as o } from "../Button/Button.js";
-import { I as h } from "../../Input-D46mAsdt.js";
-const v = "styles_numeric_dzUSE", w = "styles_increase_5S-Jo", E = "styles_decrease_j8UR6", s = {
-  numeric: v,
-  increase: w,
-  decrease: E
-}, j = f.forwardRef(
-  ({ className: l, ...a }, u) => {
-    const e = y(null);
-    _(u, () => e.current);
-    const m = c(() => {
+import { I as w } from "../../Input-D46mAsdt.js";
+const E = "styles_numeric_dzUSE", R = "styles_increase_5S-Jo", g = "styles_decrease_j8UR6", s = {
+  numeric: E,
+  increase: R,
+  decrease: g
+}, x = _.forwardRef(
+  ({ labelIncrease: l = "increase", labelDecrease: u = "decrease", className: d, ...a }, m) => {
+    const e = h(null);
+    v(m, () => e.current);
+    const p = c(() => {
       var n, r;
       (n = e.current) == null || n.stepUp(), (r = e.current) == null || r.dispatchEvent(new Event("change", { bubbles: !0 }));
-    }, []), d = c(() => {
+    }, []), b = c(() => {
       var n, r;
       (n = e.current) == null || n.stepDown(), (r = e.current) == null || r.dispatchEvent(new Event("change", { bubbles: !0 }));
     }, []);
-    return /* @__PURE__ */ p(
-      h,
+    return /* @__PURE__ */ f(
+      w,
       {
         ...a,
         ref: e,
         type: "number",
         wrapperType: "numeric",
-        className: b(s.numeric, l),
+        className: y(s.numeric, d),
         children: [
           /* @__PURE__ */ t(
             o,
             {
               type: "button",
               variant: "secondary",
-              "aria-label": "Increase",
+              "aria-label": l,
               disabled: a.disabled,
               className: s.increase,
               icon: /* @__PURE__ */ t(i, { name: "triangle-up" }),
-              onClick: m
+              onClick: p
             }
           ),
           /* @__PURE__ */ t(
@@ -45,11 +45,11 @@ const v = "styles_numeric_dzUSE", w = "styles_increase_5S-Jo", E = "styles_decre
             {
               type: "button",
               variant: "secondary",
-              "aria-label": "Decrease",
+              "aria-label": u,
               disabled: a.disabled,
               className: s.decrease,
               icon: /* @__PURE__ */ t(i, { name: "triangle-down" }),
-              onClick: d
+              onClick: b
             }
           )
         ]
@@ -58,5 +58,5 @@ const v = "styles_numeric_dzUSE", w = "styles_increase_5S-Jo", E = "styles_decre
   }
 );
 export {
-  j as Numeric
+  x as Numeric
 };

package/dist/components/Fields/Radio.js

@@ -1,23 +1,23 @@
-import { jsxs as l, jsx as o } from "react/jsx-runtime";
+import { jsxs as p, jsx as o } from "react/jsx-runtime";
 import c from "classnames";
 import f from "react";
 import { cssProps as n } from "../../utils/helpers.js";
-import { I as u, s } from "../../Input-D46mAsdt.js";
-const I = f.forwardRef(
-  ({ size: r, error: t, label: a, className: e, style: i, required: d, ...m }, p) => /* @__PURE__ */ l(
+import { I as u, s as t } from "../../Input-D46mAsdt.js";
+const j = f.forwardRef(
+  ({ size: r, error: e, label: a, className: s, style: d, required: i, ...m }, l) => /* @__PURE__ */ p(
     "label",
     {
-      "data-input": "radio",
-      "data-required": d,
-      className: c(s.radio, e),
-      style: { ...i, ...n({ size: r }) },
+      "data-radio": !0,
+      "data-required": i,
+      className: c(t.radio, s),
+      style: { ...d, ...n({ size: r }) },
       children: [
-        /* @__PURE__ */ o(u, { ...m, ref: p, type: "radio", size: r, error: t }),
-        a && /* @__PURE__ */ o("div", { className: s.label, children: a })
+        /* @__PURE__ */ o(u, { ...m, ref: l, type: "radio", size: r, error: e }),
+        a && /* @__PURE__ */ o("div", { "data-radio-label": !0, className: t.label, children: a })
       ]
     }
   )
 );
 export {
-  I as Radio
+  j as Radio
 };

package/dist/components/Fields/Range.js

@@ -1,8 +1,8 @@
-import { jsxs as g, jsx as t } from "react/jsx-runtime";
-import R from "classnames";
-import w, { useRef as x, useState as T, useEffect as j, useCallback as P } from "react";
-import { V } from "../../ValidationTooltip-D8d9O6Re.js";
-import { cssProps as A, wrapNode as E } from "../../utils/helpers.js";
+import { jsxs as _, jsx as a } from "react/jsx-runtime";
+import N from "classnames";
+import R, { useRef as x, useState as T, useEffect as j, useCallback as P } from "react";
+import { cssProps as V, wrapNode as A } from "../../utils/helpers.js";
+import { V as E } from "../../ValidationTooltip-D8d9O6Re.js";
 const J = "styles_range_j9iED", D = "styles_range_thumb_6aftN", F = "styles_range_wrapper_LTcAf", H = "styles_range_track_HdlJx", L = "styles_ticks_YaeJb", n = {
   range: J,
   range_thumb: D,
@@ -10,40 +10,40 @@ const J = "styles_range_j9iED", D = "styles_range_thumb_6aftN", F = "styles_rang
   range_track: H,
   ticks: L
 };
-function f(r, a, e, s) {
-  r == null || r.style.setProperty("--progress", `${(s - a) / (e - a)}`);
+function f(r, t, e, s) {
+  r == null || r.style.setProperty("--progress", `${(s - t) / (e - t)}`);
 }
 const M = ({ ticks: r }) => {
-  const a = typeof r == "number" ? [...Array(r)] : r;
-  return a.length < 2 ? null : /* @__PURE__ */ t("ul", { "data-range-ticks": !0, className: n.ticks, children: a.map((e, s) => /* @__PURE__ */ t("li", { children: e !== void 0 && /* @__PURE__ */ t("small", { children: e }) }, s)) });
-}, B = w.forwardRef(
-  ({ size: r, height: a, error: e, ticks: s, className: m, style: y, children: u, onChange: c, ...i }, h) => {
+  const t = typeof r == "number" ? [...Array(r)] : r;
+  return t.length < 2 ? null : /* @__PURE__ */ a("ul", { "data-range-ticks": !0, className: n.ticks, children: t.map((e, s) => /* @__PURE__ */ a("li", { children: e !== void 0 && /* @__PURE__ */ a("small", { children: e }) }, s)) });
+}, B = R.forwardRef(
+  ({ size: r, height: t, error: e, ticks: s, className: m, style: y, children: u, onChange: c, ...i }, h) => {
     const { min: l = 0, max: o = 100, defaultValue: v = 50, value: p = v } = i, d = x(null), [k, b] = T(null);
     j(() => {
       f(d.current, l, o, p);
     }, [l, o, p]);
-    const N = P(
-      (_) => {
-        f(d.current, l, o, parseFloat(_.currentTarget.value)), c == null || c(_);
+    const w = P(
+      (g) => {
+        f(d.current, l, o, parseFloat(g.currentTarget.value)), c == null || c(g);
       },
       [l, o, c]
     );
-    return /* @__PURE__ */ g(
+    return /* @__PURE__ */ _(
       "div",
       {
         ref: d,
-        "data-input": "range",
+        "data-range": !0,
         "data-disabled": i.disabled,
         "data-invalid": e ? !0 : void 0,
-        className: R(n.range, m),
-        style: { ...y, ...A({ size: r, height: a }) },
+        className: N(n.range, m),
+        style: { ...y, ...V({ size: r, height: t }) },
         children: [
-          /* @__PURE__ */ g("div", { className: n.range_wrapper, children: [
-            /* @__PURE__ */ t("div", { "data-range-track": !0, className: n.range_track }),
-            /* @__PURE__ */ t("div", { ref: b, "data-range-thumb": !0, className: n.range_thumb, children: u !== void 0 && E(u, "small") }),
-            /* @__PURE__ */ t(V, { content: e, placement: "top", anchor: k, children: /* @__PURE__ */ t("input", { ...i, ref: h, type: "range", onChange: N }) })
+          /* @__PURE__ */ _("div", { "data-range-wrapper": !0, className: n.range_wrapper, children: [
+            /* @__PURE__ */ a("div", { "data-range-track": !0, className: n.range_track }),
+            /* @__PURE__ */ a("div", { ref: b, "data-range-thumb": !0, className: n.range_thumb, children: u !== void 0 && A(u, "small") }),
+            /* @__PURE__ */ a(E, { content: e, placement: "top", anchor: k, children: /* @__PURE__ */ a("input", { ...i, ref: h, type: "range", onChange: w }) })
           ] }),
-          s !== void 0 && /* @__PURE__ */ t(M, { ticks: s })
+          s !== void 0 && /* @__PURE__ */ a(M, { ticks: s })
         ]
       }
     );

package/dist/components/Fields/Switch.js

@@ -8,25 +8,25 @@ const _ = "styles_label_p-D4Y", w = "styles_input_VteBP", s = {
   label: _,
   input: w
 }, V = m.forwardRef(
-  ({ size: a, error: i, label: e, required: l, checkedColor: o, className: c, style: n, ...r }, p) => /* @__PURE__ */ d(
+  ({ size: a, error: e, label: i, required: l, checkedColor: c, className: o, style: r, ...n }, p) => /* @__PURE__ */ d(
     "label",
     {
-      "data-input": "switch",
+      "data-switch": !0,
       "data-required": l,
-      className: h(s.switch, c),
-      style: { ...n, ...u({ size: a, checkedColor: o }) },
+      className: h(s.switch, o),
+      style: { ...r, ...u({ size: a, checkedColor: c }) },
       children: [
-        /* @__PURE__ */ t(f, { content: i, children: /* @__PURE__ */ t(
+        /* @__PURE__ */ t(f, { content: e, children: /* @__PURE__ */ t(
           "input",
           {
-            ...r,
+            ...n,
             ref: p,
             type: "checkbox",
-            "data-invalid": i ? !0 : void 0,
+            "data-invalid": e ? !0 : void 0,
             className: s.input
           }
         ) }),
-        e && /* @__PURE__ */ t("div", { className: s.label, children: e })
+        i && /* @__PURE__ */ t("div", { "data-switch-label": !0, className: s.label, children: i })
       ]
     }
   )

package/dist/components/Heading/Heading.js

@@ -14,39 +14,39 @@ const j = "Heading_h1_jZARG", u = "Heading_heading_OG4PS", p = "Heading_h2_juB1Q
   as: s = "h2",
   size: y = s,
   title: c,
-  margin: n,
-  marginStart: o,
-  marginEnd: e,
+  margin: e,
+  marginStart: n,
+  marginEnd: o,
   className: d,
   children: i,
-  style: r,
-  ...t
+  style: t,
+  ...r
 }) => {
   const _ = `var(--font-size-${y})`;
   return i ? /* @__PURE__ */ f(
     "header",
     {
-      ...t,
+      ...r,
       "data-heading": s,
       className: g(h.heading, d),
       style: {
-        ...r,
-        ...H({ fontSize: _, margin: n, marginStart: o, marginEnd: e })
+        ...t,
+        ...H({ fontSize: _, margin: e, marginStart: n, marginEnd: o })
       },
       children: [
-        /* @__PURE__ */ a(s, { children: c }),
+        /* @__PURE__ */ a(s, { "data-heading-title": !0, children: c }),
         /* @__PURE__ */ a("div", { "data-heading-accessory": !0, className: h.accessory, children: i })
       ]
     }
   ) : /* @__PURE__ */ a(
     s,
     {
-      ...t,
+      ...r,
       "data-heading": s,
       className: g(h[s], d),
       style: {
-        ...r,
-        ...H({ fontSize: _, margin: n, marginStart: o, marginEnd: e })
+        ...t,
+        ...H({ fontSize: _, margin: e, marginStart: n, marginEnd: o })
       },
       children: c
     }