@krrli/cm-designsystem 1.20.2 → 1.20.3

package/dist/components/accessible-button/AccessibleButton.js

@@ -11,5 +11,5 @@ const accessibleButtonStyles = tv({
  * A fully accessible button component.
  */
 export const AccessibleButton = ({ className, ariaLabel, onClick, type = "button", ...props }) => {
-    return (_jsx("button", { type: type, className: cn(className, accessibleButtonStyles({ isClickable: !!onClick })), "aria-label": ariaLabel, onClick: onClick, children: props.children }));
+    return (_jsx("button", { type: type, className: cn(accessibleButtonStyles({ isClickable: !!onClick }), className), "aria-label": ariaLabel, onClick: onClick, children: props.children }));
 };

package/dist/components/button/Button.js

@@ -56,5 +56,5 @@ const buttonStyles = tv({
  * A fully accessible, stylable button component.
  */
 export const Button = ({ className, ...props }) => {
-    return (_jsxs(AccessibleButton, { className: cn(className, buttonStyles(props)), ...props, children: [_jsx(Label, { as: "span", size: "md", children: props.children }), props.icon && _jsx(props.icon, {})] }));
+    return (_jsxs(AccessibleButton, { className: cn(buttonStyles(props), className), ...props, children: [_jsx(Label, { as: "span", size: "md", children: props.children }), props.icon && _jsx(props.icon, {})] }));
 };

package/dist/components/icon-button/IconButton.js

@@ -21,5 +21,5 @@ const iconButtonStyles = tv({
  */
 export const IconButton = ({ className, ...props }) => {
     const { base, icon } = iconButtonStyles();
-    return (_jsxs(AccessibleButton, { className: cn(className, base(props)), ...props, children: [props.icon && _jsx(props.icon, { className: icon(props) }), _jsx(Label, { as: "span", size: "md", children: props.children })] }));
+    return (_jsxs(AccessibleButton, { className: cn(base(props), className), ...props, children: [props.icon && _jsx(props.icon, { className: icon(props) }), _jsx(Label, { as: "span", size: "md", children: props.children })] }));
 };

package/dist/components/icons/IconBase.js

@@ -7,5 +7,5 @@ const iconStyles = tv({
     base: ["w-4", "h-4"],
 });
 export const IconBase = ({ label = "", children, className, ...props }) => {
-    return (_jsx(AccessibleIcon, { label: label, children: _jsx("svg", { className: cn(className, iconStyles()), fill: "currentColor", viewBox: props.viewBox || "0 0 16 16", ...props, children: children }) }));
+    return (_jsx(AccessibleIcon, { label: label, children: _jsx("svg", { className: cn(iconStyles(), className), fill: "currentColor", viewBox: props.viewBox || "0 0 16 16", ...props, children: children }) }));
 };

package/dist/components/navi-button/NaviButton.js

@@ -30,5 +30,5 @@ const naviButtonStyles = tv({
  * keyboard-friendly button foundation with variant-based styling.
  */
 export const NaviButton = ({ intent = "secondary", className, ...props }) => {
-    return (_jsxs(AccessibleButton, { className: cn(className, naviButtonStyles({ intent, ...props })), ...props, children: [props.icon && _jsx(props.icon, { className: props.iconClassName }), _jsx(Label, { as: "span", size: "md", children: props.children })] }));
+    return (_jsxs(AccessibleButton, { className: cn(naviButtonStyles({ intent, ...props }), className), ...props, children: [props.icon && _jsx(props.icon, { className: props.iconClassName }), _jsx(Label, { as: "span", size: "md", children: props.children })] }));
 };

package/dist/components/navi-user-button/NaviUserButton.js

@@ -29,5 +29,5 @@ const naviUserButtonStyles = tv({
  * like an accessible, keyboard-friendly button.
  */
 export const NaviUserButton = ({ intent = "secondary", className, ...props }) => {
-    return (_jsx(AccessibleButton, { className: cn(className, naviUserButtonStyles({ intent, ...props })), ...props, children: _jsx(Avatar, { alt: props.alt, size: "sm", src: props.src }) }));
+    return (_jsx(AccessibleButton, { className: cn(naviUserButtonStyles({ intent, ...props }), className), ...props, children: _jsx(Avatar, { alt: props.alt, size: "sm", src: props.src }) }));
 };

package/dist/components/round-button/RoundButton.js

@@ -29,5 +29,5 @@ const roundButtonStyles = tv({
  * keyboard interaction, and visual feedback through hover and active states.
  */
 export const RoundButton = ({ intent = "primary", className, ...props }) => {
-    return (_jsx(AccessibleButton, { className: cn(className, roundButtonStyles({ intent })), ...props, children: _jsx(props.icon, {}) }));
+    return (_jsx(AccessibleButton, { className: cn(roundButtonStyles({ intent }), className), ...props, children: _jsx(props.icon, {}) }));
 };

package/dist/components/timed-button/TimedButton.js

@@ -105,5 +105,5 @@ export const TimedButton = ({ className, onClick, ...props }) => {
         }, 1000);
         timeoutsRef.current.push(timeout2);
     };
-    return (_jsxs(AccessibleButton, { className: cn(className, base(props)), onClick: handleClick, ...props, children: [props.icon && _jsx(props.icon, { className: iconClass(), "aria-hidden": "true" }), _jsx(Label, { as: "span", size: "md", className: labelClass(), children: pressed ? props.labelActive : props.label })] }));
+    return (_jsxs(AccessibleButton, { className: cn(base(props), className), onClick: handleClick, ...props, children: [props.icon && _jsx(props.icon, { className: iconClass(), "aria-hidden": "true" }), _jsx(Label, { as: "span", size: "md", className: labelClass(), children: pressed ? props.labelActive : props.label })] }));
 };

package/dist/components/typography/Heading.js

@@ -6,6 +6,6 @@ import { headingStyles } from "./styles";
  * A semantic, accessible Heading component built on top of the AccessibleTypography component.
  */
 export const Heading = ({ as, className, ...props }) => {
-    const styles = cn(className, headingStyles(props));
+    const styles = cn(headingStyles(props), className);
     return _jsx(AccessibleTypography, { as: as, className: styles, ...props });
 };

package/dist/components/typography/Label.js

@@ -6,6 +6,6 @@ import { labelStyles } from "./styles";
  * A semantic, accessible Label component built on top of the AccessibleTypography component.
  */
 export const Label = ({ as = "label", className, ...props }) => {
-    const styles = cn(className, labelStyles(props));
+    const styles = cn(labelStyles(props), className);
     return _jsx(AccessibleTypography, { as: as, className: styles, ...props });
 };

package/dist/components/typography/Paragraph.js

@@ -6,6 +6,6 @@ import { paragraphStyles } from "./styles";
  * A semantic, accessible Paragraph component built on top of the AccessibleTypography component.
  */
 export const Paragraph = ({ as = "p", className, ...props }) => {
-    const styles = cn(className, paragraphStyles(props));
+    const styles = cn(paragraphStyles(props), className);
     return _jsx(AccessibleTypography, { as: as, className: styles, ...props });
 };

package/dist/components/typography/Placeholder.js

@@ -6,6 +6,6 @@ import { placeholderStyles } from "./styles";
  * A semantic, accessible Placeholder component built on top of the AccessibleTypography component.
  */
 export const Placeholder = ({ as = "span", className, ...props }) => {
-    const styles = cn(className, placeholderStyles(props));
+    const styles = cn(placeholderStyles(props), className);
     return _jsx(AccessibleTypography, { as: as, className: styles, ...props });
 };

package/dist/components/typography/ValidationMessage.js

@@ -6,6 +6,6 @@ import { validationMessageStyles } from "./styles";
  * A semantic, accessible ValidationMessage component built on top of the AccessibleTypography component.
  */
 export const ValidationMessage = ({ as = "span", type = "error", className, ...props }) => {
-    const styles = cn(className, validationMessageStyles({ type, ...props }));
+    const styles = cn(validationMessageStyles({ type, ...props }), className);
     return _jsx(AccessibleTypography, { as: as, className: styles, ...props });
 };

package/dist/index.es.js

@@ -3700,7 +3700,7 @@ const Yr = G({
 }) => /* @__PURE__ */ c.jsx(J0, { label: e, children: /* @__PURE__ */ c.jsx(
   "svg",
   {
-    className: e2(n, Yr()),
+    className: e2(Yr(), n),
     fill: "currentColor",
     viewBox: r.viewBox || "0 0 16 16",
     ...r,
@@ -3783,8 +3783,8 @@ const Yr = G({
   {
     type: r,
     className: e2(
-      e,
-      to({ isClickable: !!n })
+      to({ isClickable: !!n }),
+      e
     ),
     "aria-label": t,
     onClick: n,
@@ -3819,7 +3819,7 @@ const Yr = G({
 }) => /* @__PURE__ */ c.jsx(
   k2,
   {
-    className: e2(t, no({ intent: e })),
+    className: e2(no({ intent: e }), t),
     ...n,
     children: /* @__PURE__ */ c.jsx(n.icon, {})
   }
@@ -4164,7 +4164,7 @@ const Yr = G({
   className: t,
   ...n
 }) => {
-  const r = e2(t, tt(n));
+  const r = e2(tt(n), t);
   return /* @__PURE__ */ c.jsx(V2, { as: e, className: r, ...n });
 }, yo = G({
   base: [
@@ -4218,7 +4218,7 @@ const Yr = G({
 }), Ao = ({
   className: e,
   ...t
-}) => /* @__PURE__ */ c.jsxs(k2, { className: e2(e, yo(t)), ...t, children: [
+}) => /* @__PURE__ */ c.jsxs(k2, { className: e2(yo(t), e), ...t, children: [
   /* @__PURE__ */ c.jsx(t2, { as: "span", size: "md", children: t.children }),
   t.icon && /* @__PURE__ */ c.jsx(t.icon, {})
 ] }), Ma = ({
@@ -4242,7 +4242,7 @@ const Yr = G({
   className: t,
   ...n
 }) => {
-  const r = e2(t, vo(n));
+  const r = e2(vo(n), t);
   return /* @__PURE__ */ c.jsx(V2, { as: e, className: r, ...n });
 }, Eo = G({
   slots: {
@@ -4850,7 +4850,7 @@ const $o = G({
   ...t
 }) => {
   const { base: n, icon: r } = $o();
-  return /* @__PURE__ */ c.jsxs(k2, { className: e2(e, n(t)), ...t, children: [
+  return /* @__PURE__ */ c.jsxs(k2, { className: e2(n(t), e), ...t, children: [
     t.icon && /* @__PURE__ */ c.jsx(t.icon, { className: r(t) }),
     /* @__PURE__ */ c.jsx(t2, { as: "span", size: "md", children: t.children })
   ] });
@@ -4860,7 +4860,7 @@ const $o = G({
   className: n,
   ...r
 }) => {
-  const o = e2(n, bo({ type: t, ...r }));
+  const o = e2(bo({ type: t, ...r }), n);
   return /* @__PURE__ */ c.jsx(V2, { as: e, className: o, ...r });
 }, e1 = G({
   slots: {
@@ -6501,7 +6501,7 @@ const Bs = ({
   className: t,
   ...n
 }) => {
-  const r = e2(t, go(n));
+  const r = e2(go(n), t);
   return /* @__PURE__ */ c.jsx(V2, { as: e, className: r, ...n });
 }, Qs = G({
   slots: {
@@ -6597,7 +6597,7 @@ const Us = G({
 }) => /* @__PURE__ */ c.jsxs(
   k2,
   {
-    className: e2(t, Us({ intent: e, ...n })),
+    className: e2(Us({ intent: e, ...n }), t),
     ...n,
     children: [
       n.icon && /* @__PURE__ */ c.jsx(n.icon, { className: n.iconClassName }),
@@ -6632,7 +6632,7 @@ const Us = G({
 }) => /* @__PURE__ */ c.jsx(
   k2,
   {
-    className: e2(t, Zs({ intent: e, ...n })),
+    className: e2(Zs({ intent: e, ...n }), t),
     ...n,
     children: /* @__PURE__ */ c.jsx(so, { alt: n.alt, size: "sm", src: n.src })
   }
@@ -7397,7 +7397,7 @@ const ba = G({}), Oa = (e) => /* @__PURE__ */ c.jsx(va, { value: e.value, classN
   return /* @__PURE__ */ c.jsxs(
     k2,
     {
-      className: e2(e, u(n)),
+      className: e2(u(n), e),
       onClick: f,
       ...n,
       children: [
@@ -7496,7 +7496,7 @@ const ba = G({}), Oa = (e) => /* @__PURE__ */ c.jsx(va, { value: e.value, classN
   className: t,
   ...n
 }) => {
-  const r = e2(t, nt(n));
+  const r = e2(nt(n), t);
   return /* @__PURE__ */ c.jsx(V2, { as: e, className: r, ...n });
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krrli/cm-designsystem",
-  "version": "1.20.2",
+  "version": "1.20.3",
   "files": [
     "dist/",
     "dist/cm-designsystem.css"