@clubmed/trident-ui 1.5.0 → 1.5.1-beta.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # ClubMed React UI components changelog
 
+## [1.5.1-beta.1](https://scm.clubmed.com/clubmed/ui/trident-ui/compare/v1.5.0...v1.5.1-beta.1) (2025-12-15)
+
+
+### Bug Fixes
+
+* migrate from `classnames` to `clsx` across codebase for improved utility handling ([52a022b](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/52a022b7acf58e6570346ff7b05204473d080571))
+
 # [1.5.0](https://scm.clubmed.com/clubmed/ui/trident-ui/compare/v1.4.0...v1.5.0) (2025-11-28)
 
 

package/atoms/Prose/Prose.js

@@ -1,14 +1,14 @@
 import { jsx as n } from "react/jsx-runtime";
-import { c as m } from "../../chunks/index.js";
+import { c as m } from "../../chunks/clsx.js";
 import { forwardRef as t } from "react";
-const c = t(function({ className: o, text: r, ...s }, e) {
+const c = t(function({ className: o, text: r, ...e }, s) {
   return r ? /* @__PURE__ */ n(
     "div",
     {
-      ...s,
+      ...e,
       className: m(o, "prose"),
       dangerouslySetInnerHTML: { __html: r },
-      ref: e
+      ref: s
     }
   ) : null;
 });

package/atoms/Prose/Prose.js.map

@@ -1 +1 @@
-{"version":3,"file":"Prose.js","sources":["../../../lib/atoms/Prose/Prose.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { type ComponentPropsWithoutRef, forwardRef } from 'react';\n\nexport interface ProseProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {\n  text: string;\n}\n\nexport const Prose = forwardRef<HTMLDivElement, ProseProps>(function Prose(\n  { className, text, ...attrs },\n  ref,\n) {\n  if (!text) {\n    return null;\n  }\n\n  return (\n    <div\n      {...attrs}\n      className={classnames(className, 'prose')}\n      dangerouslySetInnerHTML={{ __html: text }}\n      ref={ref}\n    />\n  );\n});\n"],"names":["Prose","forwardRef","className","text","attrs","ref","jsx","classnames"],"mappings":";;;AAOO,MAAMA,IAAQC,EAAuC,SAC1D,EAAE,WAAAC,GAAW,MAAAC,GAAM,GAAGC,EAAA,GACtBC,GACA;AACA,SAAKF,IAKH,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGF;AAAA,MACJ,WAAWG,EAAWL,GAAW,OAAO;AAAA,MACxC,yBAAyB,EAAE,QAAQC,EAAA;AAAA,MACnC,KAAAE;AAAA,IAAA;AAAA,EAAA,IARK;AAWX,CAAC;"}
+{"version":3,"file":"Prose.js","sources":["../../../lib/atoms/Prose/Prose.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { type ComponentPropsWithoutRef, forwardRef } from 'react';\n\nexport interface ProseProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {\n  text: string;\n}\n\nexport const Prose = forwardRef<HTMLDivElement, ProseProps>(function Prose(\n  { className, text, ...attrs },\n  ref,\n) {\n  if (!text) {\n    return null;\n  }\n\n  return (\n    <div\n      {...attrs}\n      className={clsx(className, 'prose')}\n      dangerouslySetInnerHTML={{ __html: text }}\n      ref={ref}\n    />\n  );\n});\n"],"names":["Prose","forwardRef","className","text","attrs","ref","jsx","clsx"],"mappings":";;;AAOO,MAAMA,IAAQC,EAAuC,SAC1D,EAAE,WAAAC,GAAW,MAAAC,GAAM,GAAGC,EAAA,GACtBC,GACA;AACA,SAAKF,IAKH,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGF;AAAA,MACJ,WAAWG,EAAKL,GAAW,OAAO;AAAA,MAClC,yBAAyB,EAAE,QAAQC,EAAA;AAAA,MACnC,KAAAE;AAAA,IAAA;AAAA,EAAA,IARK;AAWX,CAAC;"}

package/chunks/clsx.js

@@ -0,0 +1,17 @@
+function a(r) {
+  var f, n, t = "";
+  if (typeof r == "string" || typeof r == "number") t += r;
+  else if (typeof r == "object") if (Array.isArray(r)) {
+    var o = r.length;
+    for (f = 0; f < o; f++) r[f] && (n = a(r[f])) && (t && (t += " "), t += n);
+  } else for (n in r) r[n] && (t && (t += " "), t += n);
+  return t;
+}
+function i() {
+  for (var r, f, n = 0, t = "", o = arguments.length; n < o; n++) (r = arguments[n]) && (f = a(r)) && (t && (t += " "), t += f);
+  return t;
+}
+export {
+  i as c
+};
+//# sourceMappingURL=clsx.js.map

package/chunks/clsx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clsx.js","sources":["../../node_modules/clsx/dist/clsx.mjs"],"sourcesContent":["function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;"],"names":["r","e","t","f","n","clsx"],"mappings":"AAAA,SAASA,EAAEC,GAAE;AAAC,MAAIC,GAAEC,GAAEC,IAAE;AAAG,MAAa,OAAOH,KAAjB,YAA8B,OAAOA,KAAjB,SAAmB,CAAAG,KAAGH;AAAA,WAAoB,OAAOA,KAAjB,SAAmB,KAAG,MAAM,QAAQA,CAAC,GAAE;AAAC,QAAI,IAAEA,EAAE;AAAO,SAAIC,IAAE,GAAEA,IAAE,GAAEA,IAAI,CAAAD,EAAEC,CAAC,MAAIC,IAAEH,EAAEC,EAAEC,CAAC,CAAC,OAAKE,MAAIA,KAAG,MAAKA,KAAGD;AAAA,EAAE,MAAM,MAAIA,KAAKF,EAAE,CAAAA,EAAEE,CAAC,MAAIC,MAAIA,KAAG,MAAKA,KAAGD;AAAG,SAAOC;AAAC;AAAQ,SAASC,IAAM;AAAC,WAAQJ,GAAEC,GAAEC,IAAE,GAAEC,IAAE,IAAG,IAAE,UAAU,QAAOD,IAAE,GAAEA,IAAI,EAACF,IAAE,UAAUE,CAAC,OAAKD,IAAEF,EAAEC,CAAC,OAAKG,MAAIA,KAAG,MAAKA,KAAGF;AAAG,SAAOE;AAAC;","x_google_ignoreList":[0]}

package/molecules/Arrows/Arrows.js

@@ -1,26 +1,26 @@
-import { jsxs as x, jsx as p } from "react/jsx-runtime";
-import { c as t } from "../../chunks/index.js";
+import { jsxs as w, jsx as p } from "react/jsx-runtime";
+import { c as t } from "../../chunks/clsx.js";
 import { ArrowButton as l } from "../Buttons/ArrowButton.js";
 const A = ({
   className: f,
   color: o,
   iconType: e = "ArrowDefault",
-  isDisabledHidden: n = !1,
-  isNextDisabled: r = !1,
+  isDisabledHidden: r = !1,
+  isNextDisabled: n = !1,
   isPrevDisabled: a = !1,
-  labels: s = {
+  labels: i = {
     next: "",
     previous: ""
   },
   onNext: m,
   onPrev: u,
-  size: i,
+  size: s,
   theme: c,
-  ...w
-}) => /* @__PURE__ */ x(
+  ...x
+}) => /* @__PURE__ */ w(
   "div",
   {
-    ...w,
+    ...x,
     className: t(
       "pointer-events-none flex w-full items-center justify-between gap-x-20",
       f
@@ -31,30 +31,30 @@ const A = ({
         l,
         {
           className: t("pointer-events-auto transition-opacity", {
-            "opacity-0": n && a
+            "opacity-0": r && a
           }),
           color: o,
           disabled: a,
           icon: `${e}Left`,
           onClick: u,
-          size: i,
+          size: s,
           theme: c,
-          children: s.previous
+          children: i.previous
         }
       ),
       /* @__PURE__ */ p(
         l,
         {
           className: t("pointer-events-auto transition-opacity", {
-            "opacity-0": n && r
+            "opacity-0": r && n
           }),
           color: o,
-          disabled: r,
+          disabled: n,
           icon: `${e}Right`,
           onClick: m,
-          size: i,
+          size: s,
           theme: c,
-          children: s.next
+          children: i.next
         }
       )
     ]

package/molecules/Arrows/Arrows.js.map

@@ -1 +1 @@
-{"version":3,"file":"Arrows.js","sources":["../../../lib/molecules/Arrows/Arrows.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport type { ComponentProps, ComponentPropsWithoutRef, FunctionComponent } from 'react';\n\nimport type { ArrowsLabels } from './ArrowsLabels';\n\nimport { ArrowButton } from '../Buttons/ArrowButton';\n\nexport interface ArrowsProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {\n  color?: ComponentProps<typeof ArrowButton>['color'];\n  iconType?: 'ArrowDefault' | 'ArrowTail';\n  isDisabledHidden?: boolean;\n  isNextDisabled?: boolean;\n  isPrevDisabled?: boolean;\n  labels?: ArrowsLabels;\n  onNext: ComponentProps<typeof ArrowButton>['onClick'];\n  onPrev: ComponentProps<typeof ArrowButton>['onClick'];\n  size?: ComponentProps<typeof ArrowButton>['size'];\n  theme?: ComponentProps<typeof ArrowButton>['theme'];\n}\n\nexport const Arrows: FunctionComponent<ArrowsProps> = ({\n  className,\n  color,\n  iconType = 'ArrowDefault',\n  isDisabledHidden = false,\n  isNextDisabled = false,\n  isPrevDisabled = false,\n  labels = {\n    next: '',\n    previous: '',\n  },\n  onNext,\n  onPrev,\n  size,\n  theme,\n  ...attrs\n}) => {\n  return (\n    <div\n      {...attrs}\n      className={classnames(\n        'pointer-events-none flex w-full items-center justify-between gap-x-20',\n        className,\n      )}\n      data-name=\"Arrows\"\n    >\n      <ArrowButton\n        className={classnames('pointer-events-auto transition-opacity', {\n          'opacity-0': isDisabledHidden && isPrevDisabled,\n        })}\n        color={color}\n        disabled={isPrevDisabled}\n        icon={`${iconType}Left`}\n        onClick={onPrev}\n        size={size}\n        theme={theme}\n      >\n        {labels.previous}\n      </ArrowButton>\n      <ArrowButton\n        className={classnames('pointer-events-auto transition-opacity', {\n          'opacity-0': isDisabledHidden && isNextDisabled,\n        })}\n        color={color}\n        disabled={isNextDisabled}\n        icon={`${iconType}Right`}\n        onClick={onNext}\n        size={size}\n        theme={theme}\n      >\n        {labels.next}\n      </ArrowButton>\n    </div>\n  );\n};\n"],"names":["Arrows","className","color","iconType","isDisabledHidden","isNextDisabled","isPrevDisabled","labels","onNext","onPrev","size","theme","attrs","jsxs","classnames","jsx","ArrowButton"],"mappings":";;;AAoBO,MAAMA,IAAyC,CAAC;AAAA,EACrD,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,kBAAAC,IAAmB;AAAA,EACnB,gBAAAC,IAAiB;AAAA,EACjB,gBAAAC,IAAiB;AAAA,EACjB,QAAAC,IAAS;AAAA,IACP,MAAM;AAAA,IACN,UAAU;AAAA,EAAA;AAAA,EAEZ,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,MAEI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACE,GAAGD;AAAA,IACJ,WAAWE;AAAA,MACT;AAAA,MACAb;AAAA,IAAA;AAAA,IAEF,aAAU;AAAA,IAEV,UAAA;AAAA,MAAA,gBAAAc;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,WAAWF,EAAW,0CAA0C;AAAA,YAC9D,aAAaV,KAAoBE;AAAA,UAAA,CAClC;AAAA,UACD,OAAAJ;AAAA,UACA,UAAUI;AAAA,UACV,MAAM,GAAGH,CAAQ;AAAA,UACjB,SAASM;AAAA,UACT,MAAAC;AAAA,UACA,OAAAC;AAAA,UAEC,UAAAJ,EAAO;AAAA,QAAA;AAAA,MAAA;AAAA,MAEV,gBAAAQ;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,WAAWF,EAAW,0CAA0C;AAAA,YAC9D,aAAaV,KAAoBC;AAAA,UAAA,CAClC;AAAA,UACD,OAAAH;AAAA,UACA,UAAUG;AAAA,UACV,MAAM,GAAGF,CAAQ;AAAA,UACjB,SAASK;AAAA,UACT,MAAAE;AAAA,UACA,OAAAC;AAAA,UAEC,UAAAJ,EAAO;AAAA,QAAA;AAAA,MAAA;AAAA,IACV;AAAA,EAAA;AAAA;"}
+{"version":3,"file":"Arrows.js","sources":["../../../lib/molecules/Arrows/Arrows.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { ComponentProps, ComponentPropsWithoutRef, FunctionComponent } from 'react';\n\nimport type { ArrowsLabels } from './ArrowsLabels';\n\nimport { ArrowButton } from '../Buttons/ArrowButton';\n\nexport interface ArrowsProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {\n  color?: ComponentProps<typeof ArrowButton>['color'];\n  iconType?: 'ArrowDefault' | 'ArrowTail';\n  isDisabledHidden?: boolean;\n  isNextDisabled?: boolean;\n  isPrevDisabled?: boolean;\n  labels?: ArrowsLabels;\n  onNext: ComponentProps<typeof ArrowButton>['onClick'];\n  onPrev: ComponentProps<typeof ArrowButton>['onClick'];\n  size?: ComponentProps<typeof ArrowButton>['size'];\n  theme?: ComponentProps<typeof ArrowButton>['theme'];\n}\n\nexport const Arrows: FunctionComponent<ArrowsProps> = ({\n  className,\n  color,\n  iconType = 'ArrowDefault',\n  isDisabledHidden = false,\n  isNextDisabled = false,\n  isPrevDisabled = false,\n  labels = {\n    next: '',\n    previous: '',\n  },\n  onNext,\n  onPrev,\n  size,\n  theme,\n  ...attrs\n}) => {\n  return (\n    <div\n      {...attrs}\n      className={clsx(\n        'pointer-events-none flex w-full items-center justify-between gap-x-20',\n        className,\n      )}\n      data-name=\"Arrows\"\n    >\n      <ArrowButton\n        className={clsx('pointer-events-auto transition-opacity', {\n          'opacity-0': isDisabledHidden && isPrevDisabled,\n        })}\n        color={color}\n        disabled={isPrevDisabled}\n        icon={`${iconType}Left`}\n        onClick={onPrev}\n        size={size}\n        theme={theme}\n      >\n        {labels.previous}\n      </ArrowButton>\n      <ArrowButton\n        className={clsx('pointer-events-auto transition-opacity', {\n          'opacity-0': isDisabledHidden && isNextDisabled,\n        })}\n        color={color}\n        disabled={isNextDisabled}\n        icon={`${iconType}Right`}\n        onClick={onNext}\n        size={size}\n        theme={theme}\n      >\n        {labels.next}\n      </ArrowButton>\n    </div>\n  );\n};\n"],"names":["Arrows","className","color","iconType","isDisabledHidden","isNextDisabled","isPrevDisabled","labels","onNext","onPrev","size","theme","attrs","jsxs","clsx","jsx","ArrowButton"],"mappings":";;;AAoBO,MAAMA,IAAyC,CAAC;AAAA,EACrD,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,kBAAAC,IAAmB;AAAA,EACnB,gBAAAC,IAAiB;AAAA,EACjB,gBAAAC,IAAiB;AAAA,EACjB,QAAAC,IAAS;AAAA,IACP,MAAM;AAAA,IACN,UAAU;AAAA,EAAA;AAAA,EAEZ,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,MAEI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACE,GAAGD;AAAA,IACJ,WAAWE;AAAA,MACT;AAAA,MACAb;AAAA,IAAA;AAAA,IAEF,aAAU;AAAA,IAEV,UAAA;AAAA,MAAA,gBAAAc;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,WAAWF,EAAK,0CAA0C;AAAA,YACxD,aAAaV,KAAoBE;AAAA,UAAA,CAClC;AAAA,UACD,OAAAJ;AAAA,UACA,UAAUI;AAAA,UACV,MAAM,GAAGH,CAAQ;AAAA,UACjB,SAASM;AAAA,UACT,MAAAC;AAAA,UACA,OAAAC;AAAA,UAEC,UAAAJ,EAAO;AAAA,QAAA;AAAA,MAAA;AAAA,MAEV,gBAAAQ;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,WAAWF,EAAK,0CAA0C;AAAA,YACxD,aAAaV,KAAoBC;AAAA,UAAA,CAClC;AAAA,UACD,OAAAH;AAAA,UACA,UAAUG;AAAA,UACV,MAAM,GAAGF,CAAQ;AAAA,UACjB,SAASK;AAAA,UACT,MAAAE;AAAA,UACA,OAAAC;AAAA,UAEC,UAAAJ,EAAO;AAAA,QAAA;AAAA,MAAA;AAAA,IACV;AAAA,EAAA;AAAA;"}

package/molecules/Avatar.js

@@ -1,6 +1,6 @@
-import { jsx as l, jsxs as f } from "react/jsx-runtime";
-import { c as u } from "../chunks/index.js";
-const a = (e = "") => e.split(" ").map((t) => t.slice(0, 1)).join("");
+import { jsx as l, jsxs as s } from "react/jsx-runtime";
+import { c as u } from "../chunks/clsx.js";
+const d = (e = "") => e.split(" ").map((t) => t.slice(0, 1)).join("");
 function p({
   alt: e,
   src: t,
@@ -8,12 +8,12 @@ function p({
   style: r,
   children: o,
   className: i,
-  ...s
+  ...f
 }) {
   return /* @__PURE__ */ l(
     "div",
     {
-      ...s,
+      ...f,
       ...t || n ? { role: "figure", "aria-label": e } : {},
       className: u(
         "flex items-center justify-center relative overflow-hidden",
@@ -29,7 +29,7 @@ function p({
         height: "48px",
         ...r
       },
-      children: /* @__PURE__ */ f("span", { className: "flex items-center justify-center font-bold uppercase text-h6 h-full", children: [
+      children: /* @__PURE__ */ s("span", { className: "flex items-center justify-center font-bold uppercase text-h6 h-full", children: [
         t || n ? /* @__PURE__ */ l(
           "img",
           {
@@ -38,7 +38,7 @@ function p({
             alt: e,
             className: "w-full h-full object-cover transparent indent-[1000px]"
           }
-        ) : a(e),
+        ) : d(e),
         o
       ] })
     }

package/molecules/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../lib/molecules/Avatar.tsx"],"sourcesContent":["import type { HTMLAttributes, PropsWithChildren } from 'react';\nimport classnames from 'classnames';\n\nconst initial = (text = '') => {\n  return text\n    .split(' ')\n    .map((text) => text.slice(0, 1))\n    .join('');\n};\n\ninterface AvatarProps extends HTMLAttributes<HTMLDivElement> {\n  alt?: string;\n  src?: string | undefined;\n  srcSet?: string | undefined;\n}\n\nexport function Avatar({\n  alt,\n  src,\n  srcSet,\n  style,\n  children,\n  className,\n  ...props\n}: PropsWithChildren<AvatarProps>) {\n  return (\n    <div\n      {...props}\n      {...(src || srcSet ? { role: 'figure', 'aria-label': alt } : {})}\n      className={classnames(\n        'flex items-center justify-center relative overflow-hidden',\n        {\n          'rounded-full': !className?.includes('rounded-'),\n          'text-black': !className?.includes('text-'),\n          'bg-saffron': !className?.includes('bg-'),\n        },\n        className,\n      )}\n      style={{\n        width: '48px',\n        height: '48px',\n        ...style,\n      }}\n    >\n      <span className=\"flex items-center justify-center font-bold uppercase text-h6 h-full\">\n        {src || srcSet ? (\n          <img\n            srcSet={srcSet}\n            src={src}\n            alt={alt}\n            className={'w-full h-full object-cover transparent indent-[1000px]'}\n          />\n        ) : (\n          initial(alt)\n        )}\n        {children}\n      </span>\n    </div>\n  );\n}\n"],"names":["initial","text","Avatar","alt","src","srcSet","style","children","className","props","jsx","classnames","jsxs"],"mappings":";;AAGA,MAAMA,IAAU,CAACC,IAAO,OACfA,EACJ,MAAM,GAAG,EACT,IAAI,CAACA,MAASA,EAAK,MAAM,GAAG,CAAC,CAAC,EAC9B,KAAK,EAAE;AASL,SAASC,EAAO;AAAA,EACrB,KAAAC;AAAA,EACA,KAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GAAmC;AACjC,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGD;AAAA,MACH,GAAIL,KAAOC,IAAS,EAAE,MAAM,UAAU,cAAcF,EAAA,IAAQ,CAAA;AAAA,MAC7D,WAAWQ;AAAA,QACT;AAAA,QACA;AAAA,UACE,gBAAgB,CAACH,GAAW,SAAS,UAAU;AAAA,UAC/C,cAAc,CAACA,GAAW,SAAS,OAAO;AAAA,UAC1C,cAAc,CAACA,GAAW,SAAS,KAAK;AAAA,QAAA;AAAA,QAE1CA;AAAA,MAAA;AAAA,MAEF,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,GAAGF;AAAA,MAAA;AAAA,MAGL,UAAA,gBAAAM,EAAC,QAAA,EAAK,WAAU,uEACb,UAAA;AAAA,QAAAR,KAAOC,IACN,gBAAAK;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,QAAAL;AAAA,YACA,KAAAD;AAAA,YACA,KAAAD;AAAA,YACA,WAAW;AAAA,UAAA;AAAA,QAAA,IAGbH,EAAQG,CAAG;AAAA,QAEZI;AAAA,MAAA,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Avatar.js","sources":["../../lib/molecules/Avatar.tsx"],"sourcesContent":["import type { HTMLAttributes, PropsWithChildren } from 'react';\nimport clsx from 'clsx';\n\nconst initial = (text = '') => {\n  return text\n    .split(' ')\n    .map((text) => text.slice(0, 1))\n    .join('');\n};\n\ninterface AvatarProps extends HTMLAttributes<HTMLDivElement> {\n  alt?: string;\n  src?: string | undefined;\n  srcSet?: string | undefined;\n}\n\nexport function Avatar({\n  alt,\n  src,\n  srcSet,\n  style,\n  children,\n  className,\n  ...props\n}: PropsWithChildren<AvatarProps>) {\n  return (\n    <div\n      {...props}\n      {...(src || srcSet ? { role: 'figure', 'aria-label': alt } : {})}\n      className={clsx(\n        'flex items-center justify-center relative overflow-hidden',\n        {\n          'rounded-full': !className?.includes('rounded-'),\n          'text-black': !className?.includes('text-'),\n          'bg-saffron': !className?.includes('bg-'),\n        },\n        className,\n      )}\n      style={{\n        width: '48px',\n        height: '48px',\n        ...style,\n      }}\n    >\n      <span className=\"flex items-center justify-center font-bold uppercase text-h6 h-full\">\n        {src || srcSet ? (\n          <img\n            srcSet={srcSet}\n            src={src}\n            alt={alt}\n            className={'w-full h-full object-cover transparent indent-[1000px]'}\n          />\n        ) : (\n          initial(alt)\n        )}\n        {children}\n      </span>\n    </div>\n  );\n}\n"],"names":["initial","text","Avatar","alt","src","srcSet","style","children","className","props","jsx","clsx","jsxs"],"mappings":";;AAGA,MAAMA,IAAU,CAACC,IAAO,OACfA,EACJ,MAAM,GAAG,EACT,IAAI,CAACA,MAASA,EAAK,MAAM,GAAG,CAAC,CAAC,EAC9B,KAAK,EAAE;AASL,SAASC,EAAO;AAAA,EACrB,KAAAC;AAAA,EACA,KAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GAAmC;AACjC,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGD;AAAA,MACH,GAAIL,KAAOC,IAAS,EAAE,MAAM,UAAU,cAAcF,EAAA,IAAQ,CAAA;AAAA,MAC7D,WAAWQ;AAAA,QACT;AAAA,QACA;AAAA,UACE,gBAAgB,CAACH,GAAW,SAAS,UAAU;AAAA,UAC/C,cAAc,CAACA,GAAW,SAAS,OAAO;AAAA,UAC1C,cAAc,CAACA,GAAW,SAAS,KAAK;AAAA,QAAA;AAAA,QAE1CA;AAAA,MAAA;AAAA,MAEF,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,GAAGF;AAAA,MAAA;AAAA,MAGL,UAAA,gBAAAM,EAAC,QAAA,EAAK,WAAU,uEACb,UAAA;AAAA,QAAAR,KAAOC,IACN,gBAAAK;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,QAAAL;AAAA,YACA,KAAAD;AAAA,YACA,KAAAD;AAAA,YACA,WAAW;AAAA,UAAA;AAAA,QAAA,IAGbH,EAAQG,CAAG;AAAA,QAEZI;AAAA,MAAA,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/molecules/Backdrop.js

@@ -1,22 +1,22 @@
-import { jsxs as p, jsx as m } from "react/jsx-runtime";
-import { useRef as f, useState as k, useEffect as x } from "react";
-import { c as l } from "../chunks/index.js";
-const s = ({
-  children: r,
+import { jsxs as p, jsx as f } from "react/jsx-runtime";
+import { useRef as m, useState as k, useEffect as x } from "react";
+import { c as l } from "../chunks/clsx.js";
+const g = ({
+  children: e,
   onClose: c,
   isVisible: t,
   sweep: n
 }) => {
-  const e = f(!!t), u = e.current, a = !t && u, [d, o] = k(!!t);
+  const o = m(!!t), u = o.current, a = !t && u, [d, r] = k(!!t);
   return x(() => {
-    t && o(!0);
-  }, [t]), e.current = !!t, d ? /* @__PURE__ */ p(
+    t && r(!0);
+  }, [t]), o.current = !!t, d ? /* @__PURE__ */ p(
     "div",
     {
       role: "presentation",
       className: "z-1 pointer-events-none fixed inset-0 items-center justify-center flex",
       children: [
-        /* @__PURE__ */ m(
+        /* @__PURE__ */ f(
           "button",
           {
             type: "button",
@@ -36,16 +36,16 @@ const s = ({
             ),
             onClick: c,
             onAnimationEnd: () => {
-              t || o(!1);
+              t || r(!1);
             }
           }
         ),
-        r
+        e
       ]
     }
   ) : null;
 };
 export {
-  s as Backdrop
+  g as Backdrop
 };
 //# sourceMappingURL=Backdrop.js.map

package/molecules/Backdrop.js.map

@@ -1 +1 @@
-{"version":3,"file":"Backdrop.js","sources":["../../lib/molecules/Backdrop.tsx"],"sourcesContent":["import {\n  type FunctionComponent,\n  type MouseEvent,\n  type PropsWithChildren,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport classnames from 'classnames';\n\ninterface BackdropProps {\n  /**\n   * On close\n   * @param event\n   */\n  onClose?: (event: MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * Is visible\n   */\n  isVisible?: boolean;\n  /**\n   * Sweep Mode™\n   * (makes it appear from the sides instead of from everywhere)\n   */\n  sweep?: boolean;\n}\n\nexport const Backdrop: FunctionComponent<PropsWithChildren<BackdropProps>> = ({\n  children,\n  onClose,\n  isVisible,\n  sweep,\n}) => {\n  // Prevent initial mount animation flash when closed\n  const wasVisibleRef = useRef(!!isVisible);\n  const wasVisible = wasVisibleRef.current;\n  const isLeaving = !isVisible && wasVisible;\n\n  // Mount only when visible or when we need to play leave animation\n  const [mounted, setMounted] = useState<boolean>(!!isVisible);\n\n  // When becoming visible, ensure we are mounted\n  useEffect(() => {\n    if (isVisible) setMounted(true);\n  }, [isVisible]);\n\n  // update ref for next render\n  wasVisibleRef.current = !!isVisible;\n\n  if (!mounted) {\n    return null;\n  }\n\n  return (\n    <div\n      role=\"presentation\"\n      className=\"z-1 pointer-events-none fixed inset-0 items-center justify-center flex\"\n    >\n      <button\n        type=\"button\"\n        aria-hidden=\"true\"\n        className={classnames(\n          '-z-1 absolute inset-0 bg-white backdrop will-change-[opacity,transform,backdrop-filter]',\n          {\n            'pointer-events-auto': isVisible || isLeaving,\n            'pointer-events-none': !isVisible && !isLeaving,\n            'animate-backdropFadeIn': !sweep && isVisible,\n            'animate-backdropFadeOut': !sweep && !isVisible && isLeaving,\n            'backdrop-blur-0 opacity-0': !sweep && isVisible && !isLeaving,\n            'animate-backdropSweepIn': sweep && isVisible,\n            'animate-backdropSweepOut': sweep && !isVisible && isLeaving,\n            'backdrop-blur-0 opacity-0 translate-x-[-100%]': sweep && isVisible && !isLeaving,\n          },\n        )}\n        onClick={onClose}\n        onAnimationEnd={() => {\n          // When leave animation finishes and still not visible, unmount\n          if (!isVisible) {\n            setMounted(false);\n          }\n        }}\n      />\n      {children}\n    </div>\n  );\n};\n"],"names":["Backdrop","children","onClose","isVisible","sweep","wasVisibleRef","useRef","wasVisible","isLeaving","mounted","setMounted","useState","useEffect","jsxs","jsx","classnames"],"mappings":";;;AA2BO,MAAMA,IAAgE,CAAC;AAAA,EAC5E,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AACF,MAAM;AAEJ,QAAMC,IAAgBC,EAAO,CAAC,CAACH,CAAS,GAClCI,IAAaF,EAAc,SAC3BG,IAAY,CAACL,KAAaI,GAG1B,CAACE,GAASC,CAAU,IAAIC,EAAkB,CAAC,CAACR,CAAS;AAU3D,SAPAS,EAAU,MAAM;AACd,IAAIT,OAAsB,EAAI;AAAA,EAChC,GAAG,CAACA,CAAS,CAAC,GAGdE,EAAc,UAAU,CAAC,CAACF,GAErBM,IAKH,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAU;AAAA,MAEV,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,eAAY;AAAA,YACZ,WAAWC;AAAA,cACT;AAAA,cACA;AAAA,gBACE,uBAAuBZ,KAAaK;AAAA,gBACpC,uBAAuB,CAACL,KAAa,CAACK;AAAA,gBACtC,0BAA0B,CAACJ,KAASD;AAAA,gBACpC,2BAA2B,CAACC,KAAS,CAACD,KAAaK;AAAA,gBACnD,6BAA6B,CAACJ,KAASD,KAAa,CAACK;AAAA,gBACrD,2BAA2BJ,KAASD;AAAA,gBACpC,4BAA4BC,KAAS,CAACD,KAAaK;AAAA,gBACnD,iDAAiDJ,KAASD,KAAa,CAACK;AAAA,cAAA;AAAA,YAC1E;AAAA,YAEF,SAASN;AAAA,YACT,gBAAgB,MAAM;AAEpB,cAAKC,KACHO,EAAW,EAAK;AAAA,YAEpB;AAAA,UAAA;AAAA,QAAA;AAAA,QAEDT;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IAhCI;AAmCX;"}
+{"version":3,"file":"Backdrop.js","sources":["../../lib/molecules/Backdrop.tsx"],"sourcesContent":["import {\n  type FunctionComponent,\n  type MouseEvent,\n  type PropsWithChildren,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport clsx from 'clsx';\n\ninterface BackdropProps {\n  /**\n   * On close\n   * @param event\n   */\n  onClose?: (event: MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * Is visible\n   */\n  isVisible?: boolean;\n  /**\n   * Sweep Mode™\n   * (makes it appear from the sides instead of from everywhere)\n   */\n  sweep?: boolean;\n}\n\nexport const Backdrop: FunctionComponent<PropsWithChildren<BackdropProps>> = ({\n  children,\n  onClose,\n  isVisible,\n  sweep,\n}) => {\n  // Prevent initial mount animation flash when closed\n  const wasVisibleRef = useRef(!!isVisible);\n  const wasVisible = wasVisibleRef.current;\n  const isLeaving = !isVisible && wasVisible;\n\n  // Mount only when visible or when we need to play leave animation\n  const [mounted, setMounted] = useState<boolean>(!!isVisible);\n\n  // When becoming visible, ensure we are mounted\n  useEffect(() => {\n    if (isVisible) setMounted(true);\n  }, [isVisible]);\n\n  // update ref for next render\n  wasVisibleRef.current = !!isVisible;\n\n  if (!mounted) {\n    return null;\n  }\n\n  return (\n    <div\n      role=\"presentation\"\n      className=\"z-1 pointer-events-none fixed inset-0 items-center justify-center flex\"\n    >\n      <button\n        type=\"button\"\n        aria-hidden=\"true\"\n        className={clsx(\n          '-z-1 absolute inset-0 bg-white backdrop will-change-[opacity,transform,backdrop-filter]',\n          {\n            'pointer-events-auto': isVisible || isLeaving,\n            'pointer-events-none': !isVisible && !isLeaving,\n            'animate-backdropFadeIn': !sweep && isVisible,\n            'animate-backdropFadeOut': !sweep && !isVisible && isLeaving,\n            'backdrop-blur-0 opacity-0': !sweep && isVisible && !isLeaving,\n            'animate-backdropSweepIn': sweep && isVisible,\n            'animate-backdropSweepOut': sweep && !isVisible && isLeaving,\n            'backdrop-blur-0 opacity-0 translate-x-[-100%]': sweep && isVisible && !isLeaving,\n          },\n        )}\n        onClick={onClose}\n        onAnimationEnd={() => {\n          // When leave animation finishes and still not visible, unmount\n          if (!isVisible) {\n            setMounted(false);\n          }\n        }}\n      />\n      {children}\n    </div>\n  );\n};\n"],"names":["Backdrop","children","onClose","isVisible","sweep","wasVisibleRef","useRef","wasVisible","isLeaving","mounted","setMounted","useState","useEffect","jsxs","jsx","clsx"],"mappings":";;;AA2BO,MAAMA,IAAgE,CAAC;AAAA,EAC5E,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AACF,MAAM;AAEJ,QAAMC,IAAgBC,EAAO,CAAC,CAACH,CAAS,GAClCI,IAAaF,EAAc,SAC3BG,IAAY,CAACL,KAAaI,GAG1B,CAACE,GAASC,CAAU,IAAIC,EAAkB,CAAC,CAACR,CAAS;AAU3D,SAPAS,EAAU,MAAM;AACd,IAAIT,OAAsB,EAAI;AAAA,EAChC,GAAG,CAACA,CAAS,CAAC,GAGdE,EAAc,UAAU,CAAC,CAACF,GAErBM,IAKH,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAU;AAAA,MAEV,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,eAAY;AAAA,YACZ,WAAWC;AAAA,cACT;AAAA,cACA;AAAA,gBACE,uBAAuBZ,KAAaK;AAAA,gBACpC,uBAAuB,CAACL,KAAa,CAACK;AAAA,gBACtC,0BAA0B,CAACJ,KAASD;AAAA,gBACpC,2BAA2B,CAACC,KAAS,CAACD,KAAaK;AAAA,gBACnD,6BAA6B,CAACJ,KAASD,KAAa,CAACK;AAAA,gBACrD,2BAA2BJ,KAASD;AAAA,gBACpC,4BAA4BC,KAAS,CAACD,KAAaK;AAAA,gBACnD,iDAAiDJ,KAASD,KAAa,CAACK;AAAA,cAAA;AAAA,YAC1E;AAAA,YAEF,SAASN;AAAA,YACT,gBAAgB,MAAM;AAEpB,cAAKC,KACHO,EAAW,EAAK;AAAA,YAEpB;AAAA,UAAA;AAAA,QAAA;AAAA,QAEDT;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IAhCI;AAmCX;"}

package/molecules/Breadcrumb.js

@@ -1,6 +1,6 @@
 import { jsx as a } from "react/jsx-runtime";
 import { createElement as k } from "react";
-import { c as l } from "../chunks/index.js";
+import { c as l } from "../chunks/clsx.js";
 import { getTheme as w } from "./Breadcrumb.themes.js";
 import { Icon as B } from "@clubmed/trident-icons";
 const j = ({
@@ -11,7 +11,7 @@ const j = ({
 }) => {
   if (e.length == 0)
     return null;
-  const [d, f, , ...t] = e, p = t.length ? t[t.length - 1] : e[e.length - 1], g = { label: "", href: "", className: "breadcrumb-spacer" }, s = t.length ? [d, f, g, p] : e, { thStart: u, thEnd: b } = w(i);
+  const [d, f, , ...t] = e, p = t.length ? t[t.length - 1] : e[e.length - 1], g = { label: "", href: "", className: "breadcrumb-spacer" }, s = t.length ? [d, f, g, p] : e, { thStart: u, thEnd: x } = w(i);
   return /* @__PURE__ */ a(
     "nav",
     {
@@ -20,7 +20,7 @@ const j = ({
       ...h,
       className: l(m, "overflow-hidden"),
       "data-name": "Breadcrumb",
-      children: /* @__PURE__ */ a("ol", { className: "scrollbar-hidden flex items-center overflow-x-auto font-sans text-b4", children: s.map(({ label: n, href: o, className: x, ...N }, c) => {
+      children: /* @__PURE__ */ a("ol", { className: "scrollbar-hidden flex items-center overflow-x-auto font-sans text-b4", children: s.map(({ label: n, href: o, className: b, ...N }, c) => {
         const r = c === s.length - 1, v = o && !r;
         return /* @__PURE__ */ k(
           "li",
@@ -31,9 +31,9 @@ const j = ({
               "flex shrink-0 items-center",
               {
                 [u]: !r,
-                [b]: r
+                [x]: r
               },
-              x
+              b
             ),
             key: `${n}-${c}`
           },

package/molecules/Breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.js","sources":["../../lib/molecules/Breadcrumb.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport type { ComponentPropsWithoutRef, FunctionComponent } from 'react';\n\nimport { getTheme } from './Breadcrumb.themes';\n\nimport type { Theme } from '@/types/Theme';\nimport { Icon } from '@clubmed/trident-icons';\nimport './Breadcrumb.css';\n\nexport interface BreadcrumbProps extends ComponentPropsWithoutRef<'nav'> {\n  items: ({\n    href: string;\n    label: string;\n  } & ComponentPropsWithoutRef<'li'>)[];\n  theme?: Theme;\n}\n\nexport const Breadcrumb: FunctionComponent<BreadcrumbProps> = ({\n  className,\n  items,\n  theme = 'light',\n  ...attrs\n}) => {\n  if (items.length == 0) {\n    return null;\n  }\n\n  const [first, second, , ...rest] = items;\n  const lastItem = rest.length ? rest[rest.length - 1] : items[items.length - 1];\n  const spacer = { label: '', href: '', className: 'breadcrumb-spacer' };\n  const itemsToRender = !rest.length ? items : [first, second, spacer, lastItem];\n\n  const { thStart, thEnd } = getTheme(theme);\n\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"Breadcrumb\"\n      {...attrs}\n      className={classnames(className, 'overflow-hidden')}\n      data-name=\"Breadcrumb\"\n    >\n      <ol className=\"scrollbar-hidden flex items-center overflow-x-auto font-sans text-b4\">\n        {itemsToRender.map(({ label, href, className, ...attrs }, index) => {\n          const isLast = index === itemsToRender.length - 1;\n          const isLink = href && !isLast;\n          return (\n            <li\n              {...attrs}\n              {...(isLast && { 'aria-current': 'page' })}\n              className={classnames(\n                'flex shrink-0 items-center',\n                {\n                  [thStart]: !isLast,\n                  [thEnd]: isLast,\n                },\n                className,\n              )}\n              key={`${label}-${index}`}\n            >\n              {isLink ? <a href={href}>{label}</a> : label}\n              {!isLast && <Icon className=\"mx-4\" name=\"Diamond\" width=\"14px\" />}\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n};\n"],"names":["Breadcrumb","className","items","theme","attrs","first","second","rest","lastItem","spacer","itemsToRender","thStart","thEnd","getTheme","jsx","classnames","label","href","index","isLast","isLink","createElement","Icon"],"mappings":";;;;;AAiBO,MAAMA,IAAiD,CAAC;AAAA,EAC7D,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,GAAGC;AACL,MAAM;AACJ,MAAIF,EAAM,UAAU;AAClB,WAAO;AAGT,QAAM,CAACG,GAAOC,KAAU,GAAGC,CAAI,IAAIL,GAC7BM,IAAWD,EAAK,SAASA,EAAKA,EAAK,SAAS,CAAC,IAAIL,EAAMA,EAAM,SAAS,CAAC,GACvEO,IAAS,EAAE,OAAO,IAAI,MAAM,IAAI,WAAW,oBAAA,GAC3CC,IAAiBH,EAAK,SAAiB,CAACF,GAAOC,GAAQG,GAAQD,CAAQ,IAAxCN,GAE/B,EAAE,SAAAS,GAAS,OAAAC,MAAUC,EAASV,CAAK;AAEzC,SACE,gBAAAW;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAW;AAAA,MACV,GAAGV;AAAA,MACJ,WAAWW,EAAWd,GAAW,iBAAiB;AAAA,MAClD,aAAU;AAAA,MAEV,UAAA,gBAAAa,EAAC,MAAA,EAAG,WAAU,wEACX,YAAc,IAAI,CAAC,EAAE,OAAAE,GAAO,MAAAC,GAAM,WAAAhB,GAAW,GAAGG,EAAAA,GAASc,MAAU;AAClE,cAAMC,IAASD,MAAUR,EAAc,SAAS,GAC1CU,IAASH,KAAQ,CAACE;AACxB,eACE,gBAAAE;AAAA,UAAC;AAAA,UAAA;AAAA,YACE,GAAGjB;AAAAA,YACH,GAAIe,KAAU,EAAE,gBAAgB,OAAA;AAAA,YACjC,WAAWJ;AAAA,cACT;AAAA,cACA;AAAA,gBACE,CAACJ,CAAO,GAAG,CAACQ;AAAA,gBACZ,CAACP,CAAK,GAAGO;AAAA,cAAA;AAAA,cAEXlB;AAAAA,YAAA;AAAA,YAEF,KAAK,GAAGe,CAAK,IAAIE,CAAK;AAAA,UAAA;AAAA,UAErBE,IAAS,gBAAAN,EAAC,KAAA,EAAE,MAAAG,GAAa,aAAM,IAAOD;AAAA,UACtC,CAACG,KAAU,gBAAAL,EAACQ,GAAA,EAAK,WAAU,QAAO,MAAK,WAAU,OAAM,OAAA,CAAO;AAAA,QAAA;AAAA,MAGrE,CAAC,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Breadcrumb.js","sources":["../../lib/molecules/Breadcrumb.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { ComponentPropsWithoutRef, FunctionComponent } from 'react';\n\nimport { getTheme } from './Breadcrumb.themes';\n\nimport type { Theme } from '@/types/Theme';\nimport { Icon } from '@clubmed/trident-icons';\nimport './Breadcrumb.css';\n\nexport interface BreadcrumbProps extends ComponentPropsWithoutRef<'nav'> {\n  items: ({\n    href: string;\n    label: string;\n  } & ComponentPropsWithoutRef<'li'>)[];\n  theme?: Theme;\n}\n\nexport const Breadcrumb: FunctionComponent<BreadcrumbProps> = ({\n  className,\n  items,\n  theme = 'light',\n  ...attrs\n}) => {\n  if (items.length == 0) {\n    return null;\n  }\n\n  const [first, second, , ...rest] = items;\n  const lastItem = rest.length ? rest[rest.length - 1] : items[items.length - 1];\n  const spacer = { label: '', href: '', className: 'breadcrumb-spacer' };\n  const itemsToRender = !rest.length ? items : [first, second, spacer, lastItem];\n\n  const { thStart, thEnd } = getTheme(theme);\n\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"Breadcrumb\"\n      {...attrs}\n      className={clsx(className, 'overflow-hidden')}\n      data-name=\"Breadcrumb\"\n    >\n      <ol className=\"scrollbar-hidden flex items-center overflow-x-auto font-sans text-b4\">\n        {itemsToRender.map(({ label, href, className, ...attrs }, index) => {\n          const isLast = index === itemsToRender.length - 1;\n          const isLink = href && !isLast;\n          return (\n            <li\n              {...attrs}\n              {...(isLast && { 'aria-current': 'page' })}\n              className={clsx(\n                'flex shrink-0 items-center',\n                {\n                  [thStart]: !isLast,\n                  [thEnd]: isLast,\n                },\n                className,\n              )}\n              key={`${label}-${index}`}\n            >\n              {isLink ? <a href={href}>{label}</a> : label}\n              {!isLast && <Icon className=\"mx-4\" name=\"Diamond\" width=\"14px\" />}\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n};\n"],"names":["Breadcrumb","className","items","theme","attrs","first","second","rest","lastItem","spacer","itemsToRender","thStart","thEnd","getTheme","jsx","clsx","label","href","index","isLast","isLink","createElement","Icon"],"mappings":";;;;;AAiBO,MAAMA,IAAiD,CAAC;AAAA,EAC7D,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,GAAGC;AACL,MAAM;AACJ,MAAIF,EAAM,UAAU;AAClB,WAAO;AAGT,QAAM,CAACG,GAAOC,KAAU,GAAGC,CAAI,IAAIL,GAC7BM,IAAWD,EAAK,SAASA,EAAKA,EAAK,SAAS,CAAC,IAAIL,EAAMA,EAAM,SAAS,CAAC,GACvEO,IAAS,EAAE,OAAO,IAAI,MAAM,IAAI,WAAW,oBAAA,GAC3CC,IAAiBH,EAAK,SAAiB,CAACF,GAAOC,GAAQG,GAAQD,CAAQ,IAAxCN,GAE/B,EAAE,SAAAS,GAAS,OAAAC,MAAUC,EAASV,CAAK;AAEzC,SACE,gBAAAW;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAW;AAAA,MACV,GAAGV;AAAA,MACJ,WAAWW,EAAKd,GAAW,iBAAiB;AAAA,MAC5C,aAAU;AAAA,MAEV,UAAA,gBAAAa,EAAC,MAAA,EAAG,WAAU,wEACX,YAAc,IAAI,CAAC,EAAE,OAAAE,GAAO,MAAAC,GAAM,WAAAhB,GAAW,GAAGG,EAAAA,GAASc,MAAU;AAClE,cAAMC,IAASD,MAAUR,EAAc,SAAS,GAC1CU,IAASH,KAAQ,CAACE;AACxB,eACE,gBAAAE;AAAA,UAAC;AAAA,UAAA;AAAA,YACE,GAAGjB;AAAAA,YACH,GAAIe,KAAU,EAAE,gBAAgB,OAAA;AAAA,YACjC,WAAWJ;AAAA,cACT;AAAA,cACA;AAAA,gBACE,CAACJ,CAAO,GAAG,CAACQ;AAAA,gBACZ,CAACP,CAAK,GAAGO;AAAA,cAAA;AAAA,cAEXlB;AAAAA,YAAA;AAAA,YAEF,KAAK,GAAGe,CAAK,IAAIE,CAAK;AAAA,UAAA;AAAA,UAErBE,IAAS,gBAAAN,EAAC,KAAA,EAAE,MAAAG,GAAa,aAAM,IAAOD;AAAA,UACtC,CAACG,KAAU,gBAAAL,EAACQ,GAAA,EAAK,WAAU,QAAO,MAAK,WAAU,OAAM,OAAA,CAAO;AAAA,QAAA;AAAA,MAGrE,CAAC,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/molecules/Buttons/v2/Button.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as n } from "react/jsx-runtime";
-import { c as l } from "../../../chunks/index.js";
+import { c as l } from "../../../chunks/clsx.js";
 import { getButtonClasses as B } from "./Button.type.js";
 import { ButtonContent as c } from "../ButtonContent.js";
 function p({ component: t, disabled: r, ...a }) {
@@ -34,20 +34,13 @@ const C = ({
   color: a = "saffron",
   icon: e,
   iconWidth: o,
-  size: s = "medium",
-  theme: u = "solid",
-  variant: i = "pill",
+  size: u = "medium",
+  theme: i = "solid",
+  variant: s = "pill",
   ...m
 }) => {
   const { Cmp: f, attrs: d } = p(m);
-  return /* @__PURE__ */ n(
-    f,
-    {
-      ...d,
-      className: l(B({ color: a, size: s, theme: u, variant: i }), t),
-      children: /* @__PURE__ */ n(c, { icon: e, iconWidth: o, children: r })
-    }
-  );
+  return /* @__PURE__ */ n(f, { ...d, className: l(B({ color: a, size: u, theme: i, variant: s }), t), children: /* @__PURE__ */ n(c, { icon: e, iconWidth: o, children: r }) });
 };
 C.displayName = "Button";
 export {

package/molecules/Buttons/v2/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../../lib/molecules/Buttons/v2/Button.tsx"],"sourcesContent":["'use client';\nimport classnames from 'classnames';\nimport type {\n  ComponentPropsWithoutRef,\n  FunctionComponent,\n  PropsWithChildren,\n  ReactElement,\n  ReactPortal,\n} from 'react';\n\nimport { type ButtonProps as Btn, getButtonClasses } from './Button.type';\nimport { ButtonContent } from '../ButtonContent';\n\nimport './Button.css';\n\nexport interface ButtonProps extends Btn, Omit<ComponentPropsWithoutRef<'button'>, 'color'> {\n  component?: 'button';\n}\n\nexport interface ButtonAnchorProps extends Btn, Omit<ComponentPropsWithoutRef<'a'>, 'color'> {\n  component: 'a';\n  disabled?: boolean;\n}\n\nexport interface FakeButtonProps extends Btn, Omit<ComponentPropsWithoutRef<'span'>, 'color'> {\n  component: 'span' | 'div';\n  disabled?: boolean;\n}\n// For Button with React Router Link or similar components\nexport interface ReactButtonProps\n  extends Btn,\n    Omit<ComponentPropsWithoutRef<'a'>, 'href' | 'color'> {\n  component: ReactElement | ReactPortal;\n  disabled?: boolean;\n}\n\ntype AnyButtonProps = ButtonProps | ButtonAnchorProps | FakeButtonProps | ReactButtonProps;\n\nexport function useButton({ component, disabled, ...props }: AnyButtonProps) {\n  if (component === 'a' || 'href' in props || typeof component === 'object') {\n    return {\n      attrs: {\n        'data-name': 'ButtonAnchor',\n        'aria-disabled': disabled ? 'true' : undefined,\n        ...props,\n      },\n      Cmp: 'a' as unknown as FunctionComponent<PropsWithChildren<any>>,\n    };\n  }\n\n  if (component === 'span' || component === 'div') {\n    return {\n      attrs: {\n        'data-name': 'FakeButton',\n        'aria-disabled': disabled ? 'true' : undefined,\n        ...props,\n      },\n      Cmp: 'span' as unknown as FunctionComponent<PropsWithChildren<any>>,\n    };\n  }\n\n  return {\n    attrs: {\n      'data-name': 'Button',\n      type: 'button',\n      disabled,\n      ...props,\n    },\n    Cmp: 'button' as unknown as FunctionComponent<PropsWithChildren<any>>,\n  };\n}\n\n// Main Button component that handles both button and anchor functionality\nexport const Button: FunctionComponent<AnyButtonProps> = ({\n  className,\n  children,\n  color = 'saffron',\n  icon,\n  iconWidth,\n  size = 'medium',\n  theme = 'solid',\n  variant = 'pill',\n  ...props\n}) => {\n  const { Cmp, attrs } = useButton(props);\n\n  return (\n    <Cmp\n      {...attrs}\n      className={classnames(getButtonClasses({ color, size, theme, variant }), className)}\n    >\n      <ButtonContent icon={icon} iconWidth={iconWidth}>\n        {children}\n      </ButtonContent>\n    </Cmp>\n  );\n};\n\nButton.displayName = 'Button';\n"],"names":["useButton","component","disabled","props","Button","className","children","color","icon","iconWidth","size","theme","variant","Cmp","attrs","jsx","classnames","getButtonClasses","ButtonContent"],"mappings":";;;;;AAsCO,SAASA,EAAU,EAAE,WAAAC,GAAW,UAAAC,GAAU,GAAGC,KAAyB;AAC3E,SAAIF,MAAc,OAAO,UAAUE,KAAS,OAAOF,KAAc,WACxD;AAAA,IACL,OAAO;AAAA,MACL,aAAa;AAAA,MACb,iBAAiBC,IAAW,SAAS;AAAA,MACrC,GAAGC;AAAA,IAAA;AAAA,IAEL,KAAK;AAAA,EAAA,IAILF,MAAc,UAAUA,MAAc,QACjC;AAAA,IACL,OAAO;AAAA,MACL,aAAa;AAAA,MACb,iBAAiBC,IAAW,SAAS;AAAA,MACrC,GAAGC;AAAA,IAAA;AAAA,IAEL,KAAK;AAAA,EAAA,IAIF;AAAA,IACL,OAAO;AAAA,MACL,aAAa;AAAA,MACb,MAAM;AAAA,MACN,UAAAD;AAAA,MACA,GAAGC;AAAA,IAAA;AAAA,IAEL,KAAK;AAAA,EAAA;AAET;AAGO,MAAMC,IAA4C,CAAC;AAAA,EACxD,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,SAAAC,IAAU;AAAA,EACV,GAAGT;AACL,MAAM;AACJ,QAAM,EAAE,KAAAU,GAAK,OAAAC,MAAUd,EAAUG,CAAK;AAEtC,SACE,gBAAAY;AAAA,IAACF;AAAA,IAAA;AAAA,MACE,GAAGC;AAAA,MACJ,WAAWE,EAAWC,EAAiB,EAAE,OAAAV,GAAO,MAAAG,GAAM,OAAAC,GAAO,SAAAC,GAAS,GAAGP,CAAS;AAAA,MAElF,UAAA,gBAAAU,EAACG,GAAA,EAAc,MAAAV,GAAY,WAAAC,GACxB,UAAAH,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN;AAEAF,EAAO,cAAc;"}
+{"version":3,"file":"Button.js","sources":["../../../../lib/molecules/Buttons/v2/Button.tsx"],"sourcesContent":["'use client';\nimport clsx from 'clsx';\nimport type {\n  ComponentPropsWithoutRef,\n  FunctionComponent,\n  PropsWithChildren,\n  ReactElement,\n  ReactPortal,\n} from 'react';\n\nimport { type ButtonProps as Btn, getButtonClasses } from './Button.type';\nimport { ButtonContent } from '../ButtonContent';\n\nimport './Button.css';\n\nexport interface ButtonProps extends Btn, Omit<ComponentPropsWithoutRef<'button'>, 'color'> {\n  component?: 'button';\n}\n\nexport interface ButtonAnchorProps extends Btn, Omit<ComponentPropsWithoutRef<'a'>, 'color'> {\n  component: 'a';\n  disabled?: boolean;\n}\n\nexport interface FakeButtonProps extends Btn, Omit<ComponentPropsWithoutRef<'span'>, 'color'> {\n  component: 'span' | 'div';\n  disabled?: boolean;\n}\n// For Button with React Router Link or similar components\nexport interface ReactButtonProps\n  extends Btn,\n    Omit<ComponentPropsWithoutRef<'a'>, 'href' | 'color'> {\n  component: ReactElement | ReactPortal;\n  disabled?: boolean;\n}\n\ntype AnyButtonProps = ButtonProps | ButtonAnchorProps | FakeButtonProps | ReactButtonProps;\n\nexport function useButton({ component, disabled, ...props }: AnyButtonProps) {\n  if (component === 'a' || 'href' in props || typeof component === 'object') {\n    return {\n      attrs: {\n        'data-name': 'ButtonAnchor',\n        'aria-disabled': disabled ? 'true' : undefined,\n        ...props,\n      },\n      Cmp: 'a' as unknown as FunctionComponent<PropsWithChildren<any>>,\n    };\n  }\n\n  if (component === 'span' || component === 'div') {\n    return {\n      attrs: {\n        'data-name': 'FakeButton',\n        'aria-disabled': disabled ? 'true' : undefined,\n        ...props,\n      },\n      Cmp: 'span' as unknown as FunctionComponent<PropsWithChildren<any>>,\n    };\n  }\n\n  return {\n    attrs: {\n      'data-name': 'Button',\n      type: 'button',\n      disabled,\n      ...props,\n    },\n    Cmp: 'button' as unknown as FunctionComponent<PropsWithChildren<any>>,\n  };\n}\n\n// Main Button component that handles both button and anchor functionality\nexport const Button: FunctionComponent<AnyButtonProps> = ({\n  className,\n  children,\n  color = 'saffron',\n  icon,\n  iconWidth,\n  size = 'medium',\n  theme = 'solid',\n  variant = 'pill',\n  ...props\n}) => {\n  const { Cmp, attrs } = useButton(props);\n\n  return (\n    <Cmp {...attrs} className={clsx(getButtonClasses({ color, size, theme, variant }), className)}>\n      <ButtonContent icon={icon} iconWidth={iconWidth}>\n        {children}\n      </ButtonContent>\n    </Cmp>\n  );\n};\n\nButton.displayName = 'Button';\n"],"names":["useButton","component","disabled","props","Button","className","children","color","icon","iconWidth","size","theme","variant","Cmp","attrs","jsx","clsx","getButtonClasses","ButtonContent"],"mappings":";;;;;AAsCO,SAASA,EAAU,EAAE,WAAAC,GAAW,UAAAC,GAAU,GAAGC,KAAyB;AAC3E,SAAIF,MAAc,OAAO,UAAUE,KAAS,OAAOF,KAAc,WACxD;AAAA,IACL,OAAO;AAAA,MACL,aAAa;AAAA,MACb,iBAAiBC,IAAW,SAAS;AAAA,MACrC,GAAGC;AAAA,IAAA;AAAA,IAEL,KAAK;AAAA,EAAA,IAILF,MAAc,UAAUA,MAAc,QACjC;AAAA,IACL,OAAO;AAAA,MACL,aAAa;AAAA,MACb,iBAAiBC,IAAW,SAAS;AAAA,MACrC,GAAGC;AAAA,IAAA;AAAA,IAEL,KAAK;AAAA,EAAA,IAIF;AAAA,IACL,OAAO;AAAA,MACL,aAAa;AAAA,MACb,MAAM;AAAA,MACN,UAAAD;AAAA,MACA,GAAGC;AAAA,IAAA;AAAA,IAEL,KAAK;AAAA,EAAA;AAET;AAGO,MAAMC,IAA4C,CAAC;AAAA,EACxD,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,SAAAC,IAAU;AAAA,EACV,GAAGT;AACL,MAAM;AACJ,QAAM,EAAE,KAAAU,GAAK,OAAAC,MAAUd,EAAUG,CAAK;AAEtC,SACE,gBAAAY,EAACF,KAAK,GAAGC,GAAO,WAAWE,EAAKC,EAAiB,EAAE,OAAAV,GAAO,MAAAG,GAAM,OAAAC,GAAO,SAAAC,EAAA,CAAS,GAAGP,CAAS,GAC1F,4BAACa,GAAA,EAAc,MAAAV,GAAY,WAAAC,GACxB,UAAAH,EAAA,CACH,GACF;AAEJ;AAEAF,EAAO,cAAc;"}

package/molecules/Buttons/v2/Button.type.js

@@ -1,4 +1,4 @@
-import { c as r } from "../../../chunks/index.js";
+import { c as r } from "../../../chunks/clsx.js";
 const u = {
   black: "button-black",
   green: "button-green",
@@ -17,10 +17,10 @@ const u = {
   darkGrey: "button-darkGrey",
   lightGrey: "button-lightGrey",
   current: "button-current"
-}, a = (t) => u[t || "saffron"], l = {
+}, l = (t) => u[t || "saffron"], a = {
   outline: "button-outline",
   solid: "button-solid"
-}, i = (t) => l[t || "solid"], s = {
+}, i = (t) => a[t || "solid"], s = {
   circle: "button-circle",
   pill: "button-pill"
 }, b = (t) => s[t || "pill"], d = {
@@ -31,14 +31,14 @@ const u = {
   "flex",
   "button",
   i(o),
-  a(t),
+  l(t),
   b(e),
   c(n)
 );
 export {
   u as BUTTON_COLORS,
   d as BUTTON_SIZES,
-  l as BUTTON_THEMES,
+  a as BUTTON_THEMES,
   s as BUTTON_VARIANTS,
   m as getButtonClasses
 };

package/molecules/Buttons/v2/Button.type.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.type.js","sources":["../../../../lib/molecules/Buttons/v2/Button.type.ts"],"sourcesContent":["import classnames from 'classnames';\n\nimport type { IconicNames, IconicTypes } from '@clubmed/trident-icons';\nimport type { Colors } from '@/types/Colors';\n\nexport interface ButtonProps {\n  color?: Colors;\n  /**\n   * Optional icon name\n   */\n  icon?: IconicNames;\n  /**\n   * Force the icon type to be svg, font or default\n   */\n  iconType?: IconicTypes;\n  iconWidth?: string;\n  size?: 'small' | 'medium' | 'large';\n  theme?: 'outline' | 'solid';\n  variant?: 'circle' | 'pill';\n}\n\ntype Params = {\n  color: ButtonProps['color'];\n  size: ButtonProps['size'];\n  theme: ButtonProps['theme'];\n  variant: ButtonProps['variant'];\n};\n\nexport const BUTTON_COLORS = {\n  black: 'button-black',\n  green: 'button-green',\n  lavender: 'button-lavender',\n  lightSand: 'button-lightSand',\n  marygold: 'button-marygold',\n  orange: 'button-orange',\n  red: 'button-red',\n  saffron: 'button-saffron',\n  sand: 'button-sand',\n  sienna: 'button-sienna',\n  ultramarine: 'button-ultramarine',\n  verdigris: 'button-verdigris',\n  wave: 'button-wave',\n  white: 'button-white',\n  darkGrey: 'button-darkGrey',\n  lightGrey: 'button-lightGrey',\n  current: 'button-current',\n} as const satisfies Record<Colors, `button-${string}`>;\n\nconst getButtonColor = (color: ButtonProps['color']) => {\n  return BUTTON_COLORS[color || 'saffron'];\n};\n\nexport const BUTTON_THEMES = {\n  outline: 'button-outline',\n  solid: 'button-solid',\n} as const satisfies Record<string, `button-${string}`>;\n\nconst getButtonTheme = (theme: ButtonProps['theme']) => {\n  return BUTTON_THEMES[theme || 'solid'];\n};\n\nexport const BUTTON_VARIANTS = {\n  circle: 'button-circle',\n  pill: 'button-pill',\n} as const satisfies Record<string, `button-${string}`>;\n\nconst getButtonVariant = (variant: ButtonProps['variant']) => {\n  return BUTTON_VARIANTS[variant || 'pill'];\n};\n\nexport const BUTTON_SIZES = {\n  small: 'button-small',\n  medium: 'button-medium',\n  large: 'button-large',\n} as const satisfies Record<string, `button-${string}`>;\n\nconst getButtonSize = (size: ButtonProps['size']) => {\n  return BUTTON_SIZES[size || 'medium'];\n};\n\nexport const getButtonClasses = ({ color, size, theme, variant }: Params) => {\n  /* keep the \"flex\" class outside of \"button-*\" so that it can be overridden in responsive */\n  return classnames(\n    'flex',\n    'button',\n    getButtonTheme(theme),\n    getButtonColor(color),\n    getButtonVariant(variant),\n    getButtonSize(size),\n  );\n};\n"],"names":["BUTTON_COLORS","getButtonColor","color","BUTTON_THEMES","getButtonTheme","theme","BUTTON_VARIANTS","getButtonVariant","variant","BUTTON_SIZES","getButtonSize","size","getButtonClasses","classnames"],"mappings":";AA4BO,MAAMA,IAAgB;AAAA,EAC3B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,SAAS;AAAA,EACT,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,WAAW;AAAA,EACX,MAAM;AAAA,EACN,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,SAAS;AACX,GAEMC,IAAiB,CAACC,MACfF,EAAcE,KAAS,SAAS,GAG5BC,IAAgB;AAAA,EAC3B,SAAS;AAAA,EACT,OAAO;AACT,GAEMC,IAAiB,CAACC,MACfF,EAAcE,KAAS,OAAO,GAG1BC,IAAkB;AAAA,EAC7B,QAAQ;AAAA,EACR,MAAM;AACR,GAEMC,IAAmB,CAACC,MACjBF,EAAgBE,KAAW,MAAM,GAG7BC,IAAe;AAAA,EAC1B,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT,GAEMC,IAAgB,CAACC,MACdF,EAAaE,KAAQ,QAAQ,GAGzBC,IAAmB,CAAC,EAAE,OAAAV,GAAO,MAAAS,GAAM,OAAAN,GAAO,SAAAG,QAE9CK;AAAA,EACL;AAAA,EACA;AAAA,EACAT,EAAeC,CAAK;AAAA,EACpBJ,EAAeC,CAAK;AAAA,EACpBK,EAAiBC,CAAO;AAAA,EACxBE,EAAcC,CAAI;AAAA;"}
+{"version":3,"file":"Button.type.js","sources":["../../../../lib/molecules/Buttons/v2/Button.type.ts"],"sourcesContent":["import clsx from 'clsx';\n\nimport type { IconicNames, IconicTypes } from '@clubmed/trident-icons';\nimport type { Colors } from '@/types/Colors';\n\nexport interface ButtonProps {\n  color?: Colors;\n  /**\n   * Optional icon name\n   */\n  icon?: IconicNames;\n  /**\n   * Force the icon type to be svg, font or default\n   */\n  iconType?: IconicTypes;\n  iconWidth?: string;\n  size?: 'small' | 'medium' | 'large';\n  theme?: 'outline' | 'solid';\n  variant?: 'circle' | 'pill';\n}\n\ntype Params = {\n  color: ButtonProps['color'];\n  size: ButtonProps['size'];\n  theme: ButtonProps['theme'];\n  variant: ButtonProps['variant'];\n};\n\nexport const BUTTON_COLORS = {\n  black: 'button-black',\n  green: 'button-green',\n  lavender: 'button-lavender',\n  lightSand: 'button-lightSand',\n  marygold: 'button-marygold',\n  orange: 'button-orange',\n  red: 'button-red',\n  saffron: 'button-saffron',\n  sand: 'button-sand',\n  sienna: 'button-sienna',\n  ultramarine: 'button-ultramarine',\n  verdigris: 'button-verdigris',\n  wave: 'button-wave',\n  white: 'button-white',\n  darkGrey: 'button-darkGrey',\n  lightGrey: 'button-lightGrey',\n  current: 'button-current',\n} as const satisfies Record<Colors, `button-${string}`>;\n\nconst getButtonColor = (color: ButtonProps['color']) => {\n  return BUTTON_COLORS[color || 'saffron'];\n};\n\nexport const BUTTON_THEMES = {\n  outline: 'button-outline',\n  solid: 'button-solid',\n} as const satisfies Record<string, `button-${string}`>;\n\nconst getButtonTheme = (theme: ButtonProps['theme']) => {\n  return BUTTON_THEMES[theme || 'solid'];\n};\n\nexport const BUTTON_VARIANTS = {\n  circle: 'button-circle',\n  pill: 'button-pill',\n} as const satisfies Record<string, `button-${string}`>;\n\nconst getButtonVariant = (variant: ButtonProps['variant']) => {\n  return BUTTON_VARIANTS[variant || 'pill'];\n};\n\nexport const BUTTON_SIZES = {\n  small: 'button-small',\n  medium: 'button-medium',\n  large: 'button-large',\n} as const satisfies Record<string, `button-${string}`>;\n\nconst getButtonSize = (size: ButtonProps['size']) => {\n  return BUTTON_SIZES[size || 'medium'];\n};\n\nexport const getButtonClasses = ({ color, size, theme, variant }: Params) => {\n  /* keep the \"flex\" class outside of \"button-*\" so that it can be overridden in responsive */\n  return clsx(\n    'flex',\n    'button',\n    getButtonTheme(theme),\n    getButtonColor(color),\n    getButtonVariant(variant),\n    getButtonSize(size),\n  );\n};\n"],"names":["BUTTON_COLORS","getButtonColor","color","BUTTON_THEMES","getButtonTheme","theme","BUTTON_VARIANTS","getButtonVariant","variant","BUTTON_SIZES","getButtonSize","size","getButtonClasses","clsx"],"mappings":";AA4BO,MAAMA,IAAgB;AAAA,EAC3B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,SAAS;AAAA,EACT,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,WAAW;AAAA,EACX,MAAM;AAAA,EACN,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,SAAS;AACX,GAEMC,IAAiB,CAACC,MACfF,EAAcE,KAAS,SAAS,GAG5BC,IAAgB;AAAA,EAC3B,SAAS;AAAA,EACT,OAAO;AACT,GAEMC,IAAiB,CAACC,MACfF,EAAcE,KAAS,OAAO,GAG1BC,IAAkB;AAAA,EAC7B,QAAQ;AAAA,EACR,MAAM;AACR,GAEMC,IAAmB,CAACC,MACjBF,EAAgBE,KAAW,MAAM,GAG7BC,IAAe;AAAA,EAC1B,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT,GAEMC,IAAgB,CAACC,MACdF,EAAaE,KAAQ,QAAQ,GAGzBC,IAAmB,CAAC,EAAE,OAAAV,GAAO,MAAAS,GAAM,OAAAN,GAAO,SAAAG,QAE9CK;AAAA,EACL;AAAA,EACA;AAAA,EACAT,EAAeC,CAAK;AAAA,EACpBJ,EAAeC,CAAK;AAAA,EACpBK,EAAiBC,CAAO;AAAA,EACxBE,EAAcC,CAAI;AAAA;"}

package/molecules/Cards/CardBackground.js

@@ -1,14 +1,14 @@
-import { jsxs as a, Fragment as c, jsx as e } from "react/jsx-runtime";
-import { c as s } from "../../chunks/index.js";
+import { jsxs as c, Fragment as a, jsx as e } from "react/jsx-runtime";
+import { c as s } from "../../chunks/clsx.js";
 import "react";
-import { Image as m } from "../../atoms/Image/Image.js";
-import { CardBackgroundContext as l } from "./CardBackgroundContext.js";
+import { Image as l } from "../../atoms/Image/Image.js";
+import { CardBackgroundContext as m } from "./CardBackgroundContext.js";
 const u = ({
   children: o,
   className: n,
   ...r
-}) => /* @__PURE__ */ a(c, { children: [
-  r?.src && /* @__PURE__ */ e(m, { ...r, src: r.src, className: "h-full w-full object-cover" }),
+}) => /* @__PURE__ */ c(a, { children: [
+  r?.src && /* @__PURE__ */ e(l, { ...r, src: r.src, className: "h-full w-full object-cover" }),
   /* @__PURE__ */ e(
     "div",
     {
@@ -20,7 +20,7 @@ const u = ({
         },
         n
       ),
-      children: /* @__PURE__ */ e(l.Provider, { value: { hasImage: !!r?.src }, children: o })
+      children: /* @__PURE__ */ e(m.Provider, { value: { hasImage: !!r?.src }, children: o })
     }
   )
 ] });

package/molecules/Cards/CardBackground.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardBackground.js","sources":["../../../lib/molecules/Cards/CardBackground.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { type ComponentPropsWithoutRef, type FunctionComponent } from 'react';\nimport { Image, type ImageProps } from '@/atoms/Image/Image';\nimport { CardBackgroundContext } from './CardBackgroundContext';\n\nexport type CardBackgroundProps = ComponentPropsWithoutRef<'div'> & Partial<ImageProps>;\n\nexport const CardBackground: FunctionComponent<CardBackgroundProps> = ({\n  children,\n  className,\n  ...attrs\n}) => {\n  return (\n    <>\n      {attrs?.src && <Image {...attrs} src={attrs.src} className=\"h-full w-full object-cover\" />}\n\n      <div\n        {...attrs}\n        className={classnames(\n          'pointer-events-none absolute inset-0 flex flex-col rounded-16',\n          {\n            'bg-gradient-to-b from-transparent via-transparent to-black/40': attrs?.src,\n          },\n          className,\n        )}\n      >\n        <CardBackgroundContext.Provider value={{ hasImage: !!attrs?.src }}>\n          {children}\n        </CardBackgroundContext.Provider>\n      </div>\n    </>\n  );\n};\n"],"names":["CardBackground","children","className","attrs","jsxs","Fragment","Image","jsx","classnames","CardBackgroundContext"],"mappings":";;;;;AAOO,MAAMA,IAAyD,CAAC;AAAA,EACrE,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,MAEI,gBAAAC,EAAAC,GAAA,EACG,UAAA;AAAA,EAAAF,GAAO,yBAAQG,GAAA,EAAO,GAAGH,GAAO,KAAKA,EAAM,KAAK,WAAU,6BAAA,CAA6B;AAAA,EAExF,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGJ;AAAA,MACJ,WAAWK;AAAA,QACT;AAAA,QACA;AAAA,UACE,iEAAiEL,GAAO;AAAA,QAAA;AAAA,QAE1ED;AAAA,MAAA;AAAA,MAGF,UAAA,gBAAAK,EAACE,EAAsB,UAAtB,EAA+B,OAAO,EAAE,UAAU,CAAC,CAACN,GAAO,IAAA,GACzD,UAAAF,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AACF,GACF;"}
+{"version":3,"file":"CardBackground.js","sources":["../../../lib/molecules/Cards/CardBackground.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { type ComponentPropsWithoutRef, type FunctionComponent } from 'react';\nimport { Image, type ImageProps } from '@/atoms/Image/Image';\nimport { CardBackgroundContext } from './CardBackgroundContext';\n\nexport type CardBackgroundProps = ComponentPropsWithoutRef<'div'> & Partial<ImageProps>;\n\nexport const CardBackground: FunctionComponent<CardBackgroundProps> = ({\n  children,\n  className,\n  ...attrs\n}) => {\n  return (\n    <>\n      {attrs?.src && <Image {...attrs} src={attrs.src} className=\"h-full w-full object-cover\" />}\n\n      <div\n        {...attrs}\n        className={clsx(\n          'pointer-events-none absolute inset-0 flex flex-col rounded-16',\n          {\n            'bg-gradient-to-b from-transparent via-transparent to-black/40': attrs?.src,\n          },\n          className,\n        )}\n      >\n        <CardBackgroundContext.Provider value={{ hasImage: !!attrs?.src }}>\n          {children}\n        </CardBackgroundContext.Provider>\n      </div>\n    </>\n  );\n};\n"],"names":["CardBackground","children","className","attrs","jsxs","Fragment","Image","jsx","clsx","CardBackgroundContext"],"mappings":";;;;;AAOO,MAAMA,IAAyD,CAAC;AAAA,EACrE,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,MAEI,gBAAAC,EAAAC,GAAA,EACG,UAAA;AAAA,EAAAF,GAAO,yBAAQG,GAAA,EAAO,GAAGH,GAAO,KAAKA,EAAM,KAAK,WAAU,6BAAA,CAA6B;AAAA,EAExF,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGJ;AAAA,MACJ,WAAWK;AAAA,QACT;AAAA,QACA;AAAA,UACE,iEAAiEL,GAAO;AAAA,QAAA;AAAA,QAE1ED;AAAA,MAAA;AAAA,MAGF,UAAA,gBAAAK,EAACE,EAAsB,UAAtB,EAA+B,OAAO,EAAE,UAAU,CAAC,CAACN,GAAO,IAAA,GACzD,UAAAF,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AACF,GACF;"}

package/molecules/Cards/CardClickable.js

@@ -1,20 +1,20 @@
 import { jsx as l } from "react/jsx-runtime";
-import { c as i } from "../../chunks/index.js";
+import { c as x } from "../../chunks/clsx.js";
 import "react";
-import { useCardBackground as u } from "./CardBackgroundContext.js";
+import { useCardBackground as i } from "./CardBackgroundContext.js";
 const d = ({
   children: t,
   className: m,
   coverLink: a = !1,
   href: s,
   onClick: r,
-  ...n
+  ...p
 }) => {
-  const e = !!s, { hasImage: o } = u(), p = e ? "a" : "div", c = e ? { href: s, onClick: r } : {};
+  const e = !!s, { hasImage: o } = i(), c = e ? "a" : "div", n = e ? { href: s, onClick: r } : {};
   return /* @__PURE__ */ l(
-    p,
+    c,
     {
-      className: i(
+      className: x(
         "pointer-events-auto flex w-full gap-x-8 px-12 pb-12 sm:px-24 sm:pb-24",
         {
           "justify-center text-center": !t,
@@ -25,8 +25,8 @@ const d = ({
         },
         m
       ),
-      ...c,
       ...n,
+      ...p,
       children: t
     }
   );

package/molecules/Cards/CardClickable.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardClickable.js","sources":["../../../lib/molecules/Cards/CardClickable.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { type FunctionComponent, type HTMLAttributes } from 'react';\nimport { useCardBackground } from '@/molecules/Cards/CardBackgroundContext';\n\nexport interface CartTitleProps extends HTMLAttributes<HTMLDivElement | HTMLAnchorElement> {\n  coverLink?: boolean;\n  href?: string;\n}\n\nexport const CardClickable: FunctionComponent<CartTitleProps> = ({\n  children,\n  className,\n  coverLink = false,\n  href,\n  onClick,\n  ...attrs\n}) => {\n  const hasLink = !!href;\n  const { hasImage } = useCardBackground();\n  const TagName = hasLink ? 'a' : 'div';\n  const tagProps = hasLink ? { href, onClick } : {};\n\n  return (\n    <TagName\n      className={classnames(\n        'pointer-events-auto flex w-full gap-x-8 px-12 pb-12 sm:px-24 sm:pb-24',\n        {\n          'justify-center text-center': !children,\n          'h-full items-end': coverLink,\n          'mt-auto h-auto': !coverLink,\n          'text-white': hasImage,\n          'text-black': !hasImage,\n        },\n        className,\n      )}\n      {...tagProps}\n      {...attrs}\n    >\n      {children}\n    </TagName>\n  );\n};\n"],"names":["CardClickable","children","className","coverLink","href","onClick","attrs","hasLink","hasImage","useCardBackground","TagName","tagProps","jsx","classnames"],"mappings":";;;;AASO,MAAMA,IAAmD,CAAC;AAAA,EAC/D,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAU,CAAC,CAACH,GACZ,EAAE,UAAAI,EAAA,IAAaC,EAAA,GACfC,IAAUH,IAAU,MAAM,OAC1BI,IAAWJ,IAAU,EAAE,MAAAH,GAAM,SAAAC,EAAA,IAAY,CAAA;AAE/C,SACE,gBAAAO;AAAA,IAACF;AAAA,IAAA;AAAA,MACC,WAAWG;AAAA,QACT;AAAA,QACA;AAAA,UACE,8BAA8B,CAACZ;AAAA,UAC/B,oBAAoBE;AAAA,UACpB,kBAAkB,CAACA;AAAA,UACnB,cAAcK;AAAA,UACd,cAAc,CAACA;AAAA,QAAA;AAAA,QAEjBN;AAAA,MAAA;AAAA,MAED,GAAGS;AAAA,MACH,GAAGL;AAAA,MAEH,UAAAL;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"CardClickable.js","sources":["../../../lib/molecules/Cards/CardClickable.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { type FunctionComponent, type HTMLAttributes } from 'react';\nimport { useCardBackground } from '@/molecules/Cards/CardBackgroundContext';\n\nexport interface CartTitleProps extends HTMLAttributes<HTMLDivElement | HTMLAnchorElement> {\n  coverLink?: boolean;\n  href?: string;\n}\n\nexport const CardClickable: FunctionComponent<CartTitleProps> = ({\n  children,\n  className,\n  coverLink = false,\n  href,\n  onClick,\n  ...attrs\n}) => {\n  const hasLink = !!href;\n  const { hasImage } = useCardBackground();\n  const TagName = hasLink ? 'a' : 'div';\n  const tagProps = hasLink ? { href, onClick } : {};\n\n  return (\n    <TagName\n      className={clsx(\n        'pointer-events-auto flex w-full gap-x-8 px-12 pb-12 sm:px-24 sm:pb-24',\n        {\n          'justify-center text-center': !children,\n          'h-full items-end': coverLink,\n          'mt-auto h-auto': !coverLink,\n          'text-white': hasImage,\n          'text-black': !hasImage,\n        },\n        className,\n      )}\n      {...tagProps}\n      {...attrs}\n    >\n      {children}\n    </TagName>\n  );\n};\n"],"names":["CardClickable","children","className","coverLink","href","onClick","attrs","hasLink","hasImage","useCardBackground","TagName","tagProps","jsx","clsx"],"mappings":";;;;AASO,MAAMA,IAAmD,CAAC;AAAA,EAC/D,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAU,CAAC,CAACH,GACZ,EAAE,UAAAI,EAAA,IAAaC,EAAA,GACfC,IAAUH,IAAU,MAAM,OAC1BI,IAAWJ,IAAU,EAAE,MAAAH,GAAM,SAAAC,EAAA,IAAY,CAAA;AAE/C,SACE,gBAAAO;AAAA,IAACF;AAAA,IAAA;AAAA,MACC,WAAWG;AAAA,QACT;AAAA,QACA;AAAA,UACE,8BAA8B,CAACZ;AAAA,UAC/B,oBAAoBE;AAAA,UACpB,kBAAkB,CAACA;AAAA,UACnB,cAAcK;AAAA,UACd,cAAc,CAACA;AAAA,QAAA;AAAA,QAEjBN;AAAA,MAAA;AAAA,MAED,GAAGS;AAAA,MACH,GAAGL;AAAA,MAEH,UAAAL;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/molecules/Cards/ExpandableCard.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs as r, jsx as a } from "react/jsx-runtime";
 import { useState as b, createElement as k } from "react";
-import { c as s } from "../../chunks/index.js";
+import { c as d } from "../../chunks/clsx.js";
 import { Clickable as w } from "../../atoms/Clickable/Clickable.js";
 import { Tag as v } from "../Tag.js";
 import { CardBackground as C } from "./CardBackground.js";
@@ -10,9 +10,9 @@ import { Card as g } from "./v2/Card.js";
 import { HeadingGroup as N } from "../../atoms/Heading/HeadingGroup.js";
 import { Button as B } from "../Buttons/v2/Button.js";
 const q = ({
-  children: d,
-  className: i,
-  hLevel: c = 3,
+  children: i,
+  className: c,
+  hLevel: s = 3,
   image: t,
   onClick: m,
   subtitle: p,
@@ -29,7 +29,7 @@ const q = ({
       "data-name": "ExpandableCard",
       "data-testid": "expandable-card",
       ...x,
-      className: s({ "border-t-0": t?.src }, i),
+      className: d({ "border-t-0": t?.src }, c),
       "data-open": e,
       children: [
         /* @__PURE__ */ a(
@@ -45,11 +45,11 @@ const q = ({
               /* @__PURE__ */ r(
                 "div",
                 {
-                  className: s("mt-auto flex justify-between gap-x-8 p-20", {
+                  className: d("mt-auto flex justify-between gap-x-8 p-20", {
                     "text-white": t?.src
                   }),
                   children: [
-                    h && /* @__PURE__ */ a(N, { subtitle: p, level: c, children: l }),
+                    h && /* @__PURE__ */ a(N, { subtitle: p, level: s, children: l }),
                     /* @__PURE__ */ a(
                       B,
                       {
@@ -69,7 +69,7 @@ const q = ({
             ] })
           }
         ),
-        /* @__PURE__ */ a(E, { isExpanded: e, children: d })
+        /* @__PURE__ */ a(E, { isExpanded: e, children: i })
       ]
     }
   );