@clubmed/trident-ui 1.3.0-beta.12 → 1.3.0-beta.13

package/molecules/Buttons/v2/Button.type.d.ts

@@ -1,5 +1,5 @@
-import type { IconicNames, IconicTypes } from '@clubmed/trident-icons';
-import type { Colors } from '../../../types/Colors';
+import { IconicNames, IconicTypes } from '@clubmed/trident-icons';
+import { Colors } from '../../../types/Colors';
 export interface ButtonProps {
     color?: Colors;
     /**

package/molecules/Cards/Card.d.ts

@@ -1,7 +1,7 @@
-import type { FunctionComponent, PropsWithChildren } from 'react';
-import { type CardProps as CardPropsV2 } from './v2/Card';
-import { type IconicNames, type IconicTypes } from '@clubmed/trident-icons';
-import { type ChipProps } from '../Chip';
+import { FunctionComponent, PropsWithChildren } from 'react';
+import { CardProps as CardPropsV2 } from './v2/Card';
+import { IconicNames, IconicTypes } from '@clubmed/trident-icons';
+import { ChipProps } from '../Chip';
 interface CardProps extends Omit<CardPropsV2, 'theme'> {
     title: string;
     icon: IconicNames;

package/molecules/Cards/CardBackground.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentPropsWithoutRef, type FunctionComponent } from 'react';
-import { type ImageProps } from '../../atoms/Image/Image';
+import { ComponentPropsWithoutRef, FunctionComponent } from 'react';
+import { ImageProps } from '../../atoms/Image/Image';
 export type CardBackgroundProps = ComponentPropsWithoutRef<'div'> & Partial<ImageProps>;
 export declare const CardBackground: FunctionComponent<CardBackgroundProps>;

package/molecules/Cards/CardBackground.js

@@ -1,30 +1,30 @@
-import { jsxs as r, Fragment as m, jsx as o } from "react/jsx-runtime";
-import { c as l } from "../../chunks/index.js";
+import { jsxs as a, Fragment as c, jsx as e } from "react/jsx-runtime";
+import { c as s } from "../../chunks/index.js";
 import "react";
-import { Image as i } from "../../atoms/Image/Image.js";
-import { CardBackgroundContext as d } from "./CardBackgroundContext.js";
-const s = ({
-  children: n,
-  className: c,
-  ...e
-}) => /* @__PURE__ */ r(m, { children: [
-  (e == null ? void 0 : e.src) && /* @__PURE__ */ o(i, { ...e, src: e.src, className: "h-full w-full object-cover" }),
-  /* @__PURE__ */ o(
+import { Image as m } from "../../atoms/Image/Image.js";
+import { CardBackgroundContext as l } 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__ */ e(
     "div",
     {
-      ...e,
-      className: l(
+      ...r,
+      className: s(
         "pointer-events-none absolute inset-0 flex flex-col rounded-16",
         {
-          "bg-gradient-to-b from-transparent via-transparent to-black/40": e == null ? void 0 : e.src
+          "bg-gradient-to-b from-transparent via-transparent to-black/40": r?.src
         },
-        c
+        n
       ),
-      children: /* @__PURE__ */ o(d.Provider, { value: { hasImage: !!(e != null && e.src) }, children: n })
+      children: /* @__PURE__ */ e(l.Provider, { value: { hasImage: !!r?.src }, children: o })
     }
   )
 ] });
 export {
-  s as CardBackground
+  u as CardBackground
 };
 //# sourceMappingURL=CardBackground.js.map

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,GAAAF,KAAA,gBAAAA,EAAO,0BAAQG,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,KAAA,gBAAAA,EAAO;AAAA,QAAA;AAAA,QAE1ED;AAAA,MAAA;AAAA,MAGF,UAAA,gBAAAK,EAACE,EAAsB,UAAtB,EAA+B,OAAO,EAAE,UAAU,CAAC,EAACN,KAAA,QAAAA,EAAO,KAAA,GACzD,UAAAF,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AACF,GACF;"}
+{"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;"}

package/molecules/Cards/CardBackgroundContext.d.ts

@@ -1,4 +1,4 @@
-export declare const CardBackgroundContext: import("react").Context<{
+export declare const CardBackgroundContext: import('react').Context<{
     hasImage: boolean;
 }>;
 export declare function useCardBackground(): {

package/molecules/Cards/CardClickable.d.ts

@@ -1,4 +1,4 @@
-import { type FunctionComponent, type HTMLAttributes } from 'react';
+import { FunctionComponent, HTMLAttributes } from 'react';
 export interface CartTitleProps extends HTMLAttributes<HTMLDivElement | HTMLAnchorElement> {
     coverLink?: boolean;
     href?: string;

package/molecules/Cards/ExpandableCard.d.ts

@@ -1,8 +1,8 @@
-import { type ComponentProps, type FunctionComponent } from 'react';
+import { ComponentProps, FunctionComponent } from 'react';
 import { Heading } from '../../atoms/Heading/Heading';
 import { Tag } from '../Tag';
-import { type CardBackgroundProps } from './CardBackground';
-import { type CardProps } from './v2/Card';
+import { CardBackgroundProps } from './CardBackground';
+import { CardProps } from './v2/Card';
 export interface ExpandableCardProps extends Omit<CardProps<'article'>, 'onClick'> {
     hLevel?: ComponentProps<typeof Heading>['level'];
     image?: CardBackgroundProps;

package/molecules/Cards/ExpandableCard.js

@@ -1,63 +1,63 @@
 "use client";
-import { jsxs as l, jsx as o } from "react/jsx-runtime";
-import { useState as b, createElement as w } from "react";
-import { c } from "../../chunks/index.js";
-import { Clickable as v } from "../../atoms/Clickable/Clickable.js";
-import { Tag as E } from "../Tag.js";
-import { CardBackground as N } from "./CardBackground.js";
-import { ElasticHeight as B } from "../ElasticHeight.js";
-import { Card as j } from "./v2/Card.js";
-import { HeadingGroup as k } from "../../atoms/Heading/HeadingGroup.js";
-import { Button as y } from "../Buttons/v2/Button.js";
-const F = ({
-  children: s,
-  className: p,
-  hLevel: i = 3,
-  image: e,
-  onClick: a,
-  subtitle: f,
-  tags: r,
-  title: d,
-  component: m = "article",
+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 { Clickable as w } from "../../atoms/Clickable/Clickable.js";
+import { Tag as v } from "../Tag.js";
+import { CardBackground as C } from "./CardBackground.js";
+import { ElasticHeight as E } from "../ElasticHeight.js";
+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,
+  image: t,
+  onClick: m,
+  subtitle: p,
+  tags: o,
+  title: l,
+  component: f = "article",
   ...x
 }) => {
-  const h = !!d, [t, u] = b(!1);
-  return /* @__PURE__ */ l(
-    j,
+  const h = !!l, [e, u] = b(!1);
+  return /* @__PURE__ */ r(
+    g,
     {
-      component: m,
+      component: f,
       "data-name": "ExpandableCard",
       "data-testid": "expandable-card",
       ...x,
-      className: c({ "border-t-0": e == null ? void 0 : e.src }, p),
-      "data-open": t,
+      className: s({ "border-t-0": t?.src }, i),
+      "data-open": e,
       children: [
-        /* @__PURE__ */ o(
-          v,
+        /* @__PURE__ */ a(
+          w,
           {
             className: "group relative -m-1 block aspect-horizontal overflow-hidden rounded-16 text-start",
             "data-testid": "expandable-card-clickable",
             onClick: () => {
-              a == null || a(!t), u(!t);
+              m?.(!e), u(!e);
             },
-            children: /* @__PURE__ */ l(N, { ...e || {}, children: [
-              !!(r != null && r.length) && /* @__PURE__ */ o("div", { className: "flex flex-wrap gap-4 self-start p-20", children: r == null ? void 0 : r.map((n) => /* @__PURE__ */ w(E, { ...n, key: n.label })) }),
-              /* @__PURE__ */ l(
+            children: /* @__PURE__ */ r(C, { ...t || {}, children: [
+              !!o?.length && /* @__PURE__ */ a("div", { className: "flex flex-wrap gap-4 self-start p-20", children: o?.map((n) => /* @__PURE__ */ k(v, { ...n, key: n.label })) }),
+              /* @__PURE__ */ r(
                 "div",
                 {
-                  className: c("mt-auto flex justify-between gap-x-8 p-20", {
-                    "text-white": e == null ? void 0 : e.src
+                  className: s("mt-auto flex justify-between gap-x-8 p-20", {
+                    "text-white": t?.src
                   }),
                   children: [
-                    h && /* @__PURE__ */ o(k, { subtitle: f, level: i, children: d }),
-                    /* @__PURE__ */ o(
-                      y,
+                    h && /* @__PURE__ */ a(N, { subtitle: p, level: c, children: l }),
+                    /* @__PURE__ */ a(
+                      B,
                       {
                         component: "span",
                         className: "!transition duration-500",
-                        color: e != null && e.src ? "white" : "black",
+                        color: t?.src ? "white" : "black",
                         icon: "ArrowDefaultDown",
-                        style: { rotate: t ? "-180deg" : "0deg" },
+                        style: { rotate: e ? "-180deg" : "0deg" },
                         tabIndex: -1,
                         theme: "outline",
                         variant: "circle"
@@ -69,12 +69,12 @@ const F = ({
             ] })
           }
         ),
-        /* @__PURE__ */ o(B, { isExpanded: t, children: s })
+        /* @__PURE__ */ a(E, { isExpanded: e, children: d })
       ]
     }
   );
 };
 export {
-  F as ExpandableCard
+  q as ExpandableCard
 };
 //# sourceMappingURL=ExpandableCard.js.map

package/molecules/Cards/ExpandableCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandableCard.js","sources":["../../../lib/molecules/Cards/ExpandableCard.tsx"],"sourcesContent":["'use client';\n\nimport classnames from 'classnames';\nimport { type ComponentProps, type FunctionComponent, useState } from 'react';\n\nimport { Clickable } from '../../atoms/Clickable/Clickable';\nimport { Heading } from '../../atoms/Heading/Heading';\nimport { Tag } from '../Tag';\nimport { CardBackground, type CardBackgroundProps } from '@/molecules/Cards/CardBackground';\nimport { ElasticHeight } from '@/molecules/ElasticHeight';\nimport { Card, type CardProps } from '@/molecules/Cards/v2/Card';\nimport { HeadingGroup } from '@/atoms/Heading/HeadingGroup';\nimport { Button } from '@/molecules/Buttons/v2/Button';\n\nexport interface ExpandableCardProps extends Omit<CardProps<'article'>, 'onClick'> {\n  hLevel?: ComponentProps<typeof Heading>['level'];\n  image?: CardBackgroundProps;\n  onClick?: (isExpanded: boolean) => void;\n  subtitle?: string | null;\n  tags?: ComponentProps<typeof Tag>[] | null;\n  title: string;\n}\n\nexport const ExpandableCard: FunctionComponent<ExpandableCardProps> = ({\n  children,\n  className,\n  hLevel = 3,\n  image,\n  onClick,\n  subtitle,\n  tags,\n  title,\n  component = 'article',\n  ...attrs\n}) => {\n  const hasTitle = Boolean(title);\n\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  return (\n    <Card<'article'>\n      component={component}\n      data-name=\"ExpandableCard\"\n      data-testid=\"expandable-card\"\n      {...attrs}\n      className={classnames({ 'border-t-0': image?.src }, className)}\n      data-open={isExpanded}\n    >\n      <Clickable\n        className=\"group relative -m-1 block aspect-horizontal overflow-hidden rounded-16 text-start\"\n        data-testid=\"expandable-card-clickable\"\n        onClick={() => {\n          onClick?.(!isExpanded);\n          setIsExpanded(!isExpanded);\n        }}\n      >\n        <CardBackground {...(image || {})}>\n          {Boolean(tags?.length) && (\n            <div className=\"flex flex-wrap gap-4 self-start p-20\">\n              {tags?.map((tag) => <Tag {...tag} key={tag.label} />)}\n            </div>\n          )}\n          <div\n            className={classnames('mt-auto flex justify-between gap-x-8 p-20', {\n              'text-white': image?.src,\n            })}\n          >\n            {hasTitle && (\n              <HeadingGroup subtitle={subtitle} level={hLevel}>\n                {title}\n              </HeadingGroup>\n            )}\n            <Button\n              component=\"span\"\n              className=\"!transition duration-500\"\n              color={image?.src ? 'white' : 'black'}\n              icon=\"ArrowDefaultDown\"\n              style={{ rotate: isExpanded ? '-180deg' : '0deg' }}\n              tabIndex={-1}\n              theme=\"outline\"\n              variant=\"circle\"\n            />\n          </div>\n        </CardBackground>\n      </Clickable>\n      <ElasticHeight isExpanded={isExpanded}>{children}</ElasticHeight>\n    </Card>\n  );\n};\n"],"names":["ExpandableCard","children","className","hLevel","image","onClick","subtitle","tags","title","component","attrs","hasTitle","isExpanded","setIsExpanded","useState","jsxs","Card","classnames","jsx","Clickable","CardBackground","tag","createElement","Tag","HeadingGroup","Button","ElasticHeight"],"mappings":";;;;;;;;;;;AAuBO,MAAMA,IAAyD,CAAC;AAAA,EACrE,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAW,EAAQH,GAEnB,CAACI,GAAYC,CAAa,IAAIC,EAAS,EAAK;AAElD,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAAP;AAAA,MACA,aAAU;AAAA,MACV,eAAY;AAAA,MACX,GAAGC;AAAA,MACJ,WAAWO,EAAW,EAAE,cAAcb,KAAA,gBAAAA,EAAO,IAAA,GAAOF,CAAS;AAAA,MAC7D,aAAWU;AAAA,MAEX,UAAA;AAAA,QAAA,gBAAAM;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,eAAY;AAAA,YACZ,SAAS,MAAM;AACb,cAAAd,KAAA,QAAAA,EAAU,CAACO,IACXC,EAAc,CAACD,CAAU;AAAA,YAC3B;AAAA,YAEA,UAAA,gBAAAG,EAACK,GAAA,EAAgB,GAAIhB,KAAS,CAAA,GAC3B,UAAA;AAAA,cAAA,GAAQG,KAAA,QAAAA,EAAM,6BACZ,OAAA,EAAI,WAAU,wCACZ,UAAAA,KAAA,gBAAAA,EAAM,IAAI,CAACc,MAAQ,gBAAAC,EAACC,KAAK,GAAGF,GAAK,KAAKA,EAAI,OAAO,IACpD;AAAA,cAEF,gBAAAN;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWE,EAAW,6CAA6C;AAAA,oBACjE,cAAcb,KAAA,gBAAAA,EAAO;AAAA,kBAAA,CACtB;AAAA,kBAEA,UAAA;AAAA,oBAAAO,KACC,gBAAAO,EAACM,GAAA,EAAa,UAAAlB,GAAoB,OAAOH,GACtC,UAAAK,GACH;AAAA,oBAEF,gBAAAU;AAAA,sBAACO;AAAA,sBAAA;AAAA,wBACC,WAAU;AAAA,wBACV,WAAU;AAAA,wBACV,OAAOrB,KAAA,QAAAA,EAAO,MAAM,UAAU;AAAA,wBAC9B,MAAK;AAAA,wBACL,OAAO,EAAE,QAAQQ,IAAa,YAAY,OAAA;AAAA,wBAC1C,UAAU;AAAA,wBACV,OAAM;AAAA,wBACN,SAAQ;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBACV;AAAA,gBAAA;AAAA,cAAA;AAAA,YACF,EAAA,CACF;AAAA,UAAA;AAAA,QAAA;AAAA,QAEF,gBAAAM,EAACQ,GAAA,EAAc,YAAAd,GAAyB,UAAAX,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGvD;"}
+{"version":3,"file":"ExpandableCard.js","sources":["../../../lib/molecules/Cards/ExpandableCard.tsx"],"sourcesContent":["'use client';\n\nimport classnames from 'classnames';\nimport { type ComponentProps, type FunctionComponent, useState } from 'react';\n\nimport { Clickable } from '../../atoms/Clickable/Clickable';\nimport { Heading } from '../../atoms/Heading/Heading';\nimport { Tag } from '../Tag';\nimport { CardBackground, type CardBackgroundProps } from '@/molecules/Cards/CardBackground';\nimport { ElasticHeight } from '@/molecules/ElasticHeight';\nimport { Card, type CardProps } from '@/molecules/Cards/v2/Card';\nimport { HeadingGroup } from '@/atoms/Heading/HeadingGroup';\nimport { Button } from '@/molecules/Buttons/v2/Button';\n\nexport interface ExpandableCardProps extends Omit<CardProps<'article'>, 'onClick'> {\n  hLevel?: ComponentProps<typeof Heading>['level'];\n  image?: CardBackgroundProps;\n  onClick?: (isExpanded: boolean) => void;\n  subtitle?: string | null;\n  tags?: ComponentProps<typeof Tag>[] | null;\n  title: string;\n}\n\nexport const ExpandableCard: FunctionComponent<ExpandableCardProps> = ({\n  children,\n  className,\n  hLevel = 3,\n  image,\n  onClick,\n  subtitle,\n  tags,\n  title,\n  component = 'article',\n  ...attrs\n}) => {\n  const hasTitle = Boolean(title);\n\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  return (\n    <Card<'article'>\n      component={component}\n      data-name=\"ExpandableCard\"\n      data-testid=\"expandable-card\"\n      {...attrs}\n      className={classnames({ 'border-t-0': image?.src }, className)}\n      data-open={isExpanded}\n    >\n      <Clickable\n        className=\"group relative -m-1 block aspect-horizontal overflow-hidden rounded-16 text-start\"\n        data-testid=\"expandable-card-clickable\"\n        onClick={() => {\n          onClick?.(!isExpanded);\n          setIsExpanded(!isExpanded);\n        }}\n      >\n        <CardBackground {...(image || {})}>\n          {Boolean(tags?.length) && (\n            <div className=\"flex flex-wrap gap-4 self-start p-20\">\n              {tags?.map((tag) => <Tag {...tag} key={tag.label} />)}\n            </div>\n          )}\n          <div\n            className={classnames('mt-auto flex justify-between gap-x-8 p-20', {\n              'text-white': image?.src,\n            })}\n          >\n            {hasTitle && (\n              <HeadingGroup subtitle={subtitle} level={hLevel}>\n                {title}\n              </HeadingGroup>\n            )}\n            <Button\n              component=\"span\"\n              className=\"!transition duration-500\"\n              color={image?.src ? 'white' : 'black'}\n              icon=\"ArrowDefaultDown\"\n              style={{ rotate: isExpanded ? '-180deg' : '0deg' }}\n              tabIndex={-1}\n              theme=\"outline\"\n              variant=\"circle\"\n            />\n          </div>\n        </CardBackground>\n      </Clickable>\n      <ElasticHeight isExpanded={isExpanded}>{children}</ElasticHeight>\n    </Card>\n  );\n};\n"],"names":["ExpandableCard","children","className","hLevel","image","onClick","subtitle","tags","title","component","attrs","hasTitle","isExpanded","setIsExpanded","useState","jsxs","Card","classnames","jsx","Clickable","CardBackground","tag","createElement","Tag","HeadingGroup","Button","ElasticHeight"],"mappings":";;;;;;;;;;;AAuBO,MAAMA,IAAyD,CAAC;AAAA,EACrE,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAW,EAAQH,GAEnB,CAACI,GAAYC,CAAa,IAAIC,EAAS,EAAK;AAElD,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAAP;AAAA,MACA,aAAU;AAAA,MACV,eAAY;AAAA,MACX,GAAGC;AAAA,MACJ,WAAWO,EAAW,EAAE,cAAcb,GAAO,IAAA,GAAOF,CAAS;AAAA,MAC7D,aAAWU;AAAA,MAEX,UAAA;AAAA,QAAA,gBAAAM;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,eAAY;AAAA,YACZ,SAAS,MAAM;AACb,cAAAd,IAAU,CAACO,CAAU,GACrBC,EAAc,CAACD,CAAU;AAAA,YAC3B;AAAA,YAEA,UAAA,gBAAAG,EAACK,GAAA,EAAgB,GAAIhB,KAAS,CAAA,GAC3B,UAAA;AAAA,cAAA,EAAQG,GAAM,4BACZ,OAAA,EAAI,WAAU,wCACZ,UAAAA,GAAM,IAAI,CAACc,MAAQ,gBAAAC,EAACC,KAAK,GAAGF,GAAK,KAAKA,EAAI,OAAO,CAAE,GACtD;AAAA,cAEF,gBAAAN;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWE,EAAW,6CAA6C;AAAA,oBACjE,cAAcb,GAAO;AAAA,kBAAA,CACtB;AAAA,kBAEA,UAAA;AAAA,oBAAAO,KACC,gBAAAO,EAACM,GAAA,EAAa,UAAAlB,GAAoB,OAAOH,GACtC,UAAAK,GACH;AAAA,oBAEF,gBAAAU;AAAA,sBAACO;AAAA,sBAAA;AAAA,wBACC,WAAU;AAAA,wBACV,WAAU;AAAA,wBACV,OAAOrB,GAAO,MAAM,UAAU;AAAA,wBAC9B,MAAK;AAAA,wBACL,OAAO,EAAE,QAAQQ,IAAa,YAAY,OAAA;AAAA,wBAC1C,UAAU;AAAA,wBACV,OAAM;AAAA,wBACN,SAAQ;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBACV;AAAA,gBAAA;AAAA,cAAA;AAAA,YACF,EAAA,CACF;AAAA,UAAA;AAAA,QAAA;AAAA,QAEF,gBAAAM,EAACQ,GAAA,EAAc,YAAAd,GAAyB,UAAAX,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGvD;"}

package/molecules/Cards/v2/Card.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentPropsWithoutRef, ElementType } from 'react';
+import { ComponentPropsWithoutRef, ElementType } from 'react';
 import { CARD_ASPECT_RATIOS } from '../CardAspectRatios';
 type CARD_THEME = 'none' | 'bordered' | 'frame';
 export type CardProps<T extends ElementType = 'div'> = {

package/molecules/Cards/v2/Card.js

@@ -1,34 +1,34 @@
 import { jsx as c } from "react/jsx-runtime";
 import { c as m } from "../../../chunks/index.js";
-import { CARD_ASPECT_RATIOS as b } from "../CardAspectRatios.js";
-function s({
-  children: e,
-  className: r,
+import { CARD_ASPECT_RATIOS as l } from "../CardAspectRatios.js";
+function f({
+  children: o,
+  className: e,
   component: d = "div",
   format: i = "custom",
   theme: t = "bordered",
   ...n
 }) {
-  const u = d, o = [].concat(t).join(" ");
+  const s = d, r = [].concat(t).join(" ");
   return /* @__PURE__ */ c(
-    u,
+    s,
     {
       ...n,
       className: m(
-        b[i],
+        l[i],
         "relative isolate rounded-16",
         {
-          "bg-white": !(r != null && r.includes("bg-")),
-          "group overflow-hidden": o.includes("frame"),
-          "border border-lightGrey": o.includes("bordered")
+          "bg-white": !e?.includes("bg-"),
+          "group overflow-hidden": r.includes("frame"),
+          "border border-lightGrey": r.includes("bordered")
         },
-        r
+        e
       ),
-      children: e
+      children: o
     }
   );
 }
 export {
-  s as Card
+  f as Card
 };
 //# sourceMappingURL=Card.js.map

package/molecules/Cards/v2/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../../lib/molecules/Cards/v2/Card.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ElementType } from 'react';\nimport cx from 'classnames';\nimport { CARD_ASPECT_RATIOS } from '../CardAspectRatios';\n\ntype CARD_THEME = 'none' | 'bordered' | 'frame';\n\nexport type CardProps<T extends ElementType = 'div'> = {\n  component?: string;\n  /**\n   * By default the card has a border.\n   * Set to false to remove it.\n   */\n  border?: boolean;\n  format?: keyof typeof CARD_ASPECT_RATIOS;\n  theme?: CARD_THEME | CARD_THEME[];\n} & ComponentPropsWithoutRef<T>;\n\nexport function Card<T extends ElementType = 'div'>({\n  children,\n  className,\n  component = 'div',\n  format = 'custom',\n  theme = 'bordered',\n  ...attrs\n}: CardProps<T>) {\n  const Cmp = component as ElementType;\n  const resolvedTheme = ([] as CARD_THEME[]).concat(theme).join(' ');\n\n  return (\n    <Cmp\n      {...attrs}\n      className={cx(\n        CARD_ASPECT_RATIOS[format],\n        'relative isolate rounded-16',\n        {\n          'bg-white': !className?.includes('bg-'),\n          'group overflow-hidden': resolvedTheme.includes('frame'),\n          'border border-lightGrey': resolvedTheme.includes('bordered'),\n        },\n        className,\n      )}\n    >\n      {children}\n    </Cmp>\n  );\n}\n"],"names":["Card","children","className","component","format","theme","attrs","Cmp","resolvedTheme","jsx","cx","CARD_ASPECT_RATIOS"],"mappings":";;;AAiBO,SAASA,EAAoC;AAAA,EAClD,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,QAAAC,IAAS;AAAA,EACT,OAAAC,IAAQ;AAAA,EACR,GAAGC;AACL,GAAiB;AACf,QAAMC,IAAMJ,GACNK,IAAiB,CAAA,EAAoB,OAAOH,CAAK,EAAE,KAAK,GAAG;AAEjE,SACE,gBAAAI;AAAA,IAACF;AAAA,IAAA;AAAA,MACE,GAAGD;AAAA,MACJ,WAAWI;AAAAA,QACTC,EAAmBP,CAAM;AAAA,QACzB;AAAA,QACA;AAAA,UACE,YAAY,EAACF,KAAA,QAAAA,EAAW,SAAS;AAAA,UACjC,yBAAyBM,EAAc,SAAS,OAAO;AAAA,UACvD,2BAA2BA,EAAc,SAAS,UAAU;AAAA,QAAA;AAAA,QAE9DN;AAAA,MAAA;AAAA,MAGD,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"Card.js","sources":["../../../../lib/molecules/Cards/v2/Card.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ElementType } from 'react';\nimport cx from 'classnames';\nimport { CARD_ASPECT_RATIOS } from '../CardAspectRatios';\n\ntype CARD_THEME = 'none' | 'bordered' | 'frame';\n\nexport type CardProps<T extends ElementType = 'div'> = {\n  component?: string;\n  /**\n   * By default the card has a border.\n   * Set to false to remove it.\n   */\n  border?: boolean;\n  format?: keyof typeof CARD_ASPECT_RATIOS;\n  theme?: CARD_THEME | CARD_THEME[];\n} & ComponentPropsWithoutRef<T>;\n\nexport function Card<T extends ElementType = 'div'>({\n  children,\n  className,\n  component = 'div',\n  format = 'custom',\n  theme = 'bordered',\n  ...attrs\n}: CardProps<T>) {\n  const Cmp = component as ElementType;\n  const resolvedTheme = ([] as CARD_THEME[]).concat(theme).join(' ');\n\n  return (\n    <Cmp\n      {...attrs}\n      className={cx(\n        CARD_ASPECT_RATIOS[format],\n        'relative isolate rounded-16',\n        {\n          'bg-white': !className?.includes('bg-'),\n          'group overflow-hidden': resolvedTheme.includes('frame'),\n          'border border-lightGrey': resolvedTheme.includes('bordered'),\n        },\n        className,\n      )}\n    >\n      {children}\n    </Cmp>\n  );\n}\n"],"names":["Card","children","className","component","format","theme","attrs","Cmp","resolvedTheme","jsx","cx","CARD_ASPECT_RATIOS"],"mappings":";;;AAiBO,SAASA,EAAoC;AAAA,EAClD,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,QAAAC,IAAS;AAAA,EACT,OAAAC,IAAQ;AAAA,EACR,GAAGC;AACL,GAAiB;AACf,QAAMC,IAAMJ,GACNK,IAAiB,CAAA,EAAoB,OAAOH,CAAK,EAAE,KAAK,GAAG;AAEjE,SACE,gBAAAI;AAAA,IAACF;AAAA,IAAA;AAAA,MACE,GAAGD;AAAA,MACJ,WAAWI;AAAAA,QACTC,EAAmBP,CAAM;AAAA,QACzB;AAAA,QACA;AAAA,UACE,YAAY,CAACF,GAAW,SAAS,KAAK;AAAA,UACtC,yBAAyBM,EAAc,SAAS,OAAO;AAAA,UACvD,2BAA2BA,EAAc,SAAS,UAAU;AAAA,QAAA;AAAA,QAE9DN;AAAA,MAAA;AAAA,MAGD,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/molecules/Chip.d.ts

@@ -1,6 +1,6 @@
-import type { ComponentPropsWithoutRef } from 'react';
-import { type Theme } from './Chip.themes';
-import type { Colors } from '../types/Colors';
+import { ComponentPropsWithoutRef } from 'react';
+import { Theme } from './Chip.themes';
+import { Colors } from '../types/Colors';
 export interface ChipProps extends ComponentPropsWithoutRef<'span'> {
     color?: Colors;
     size?: string;

package/molecules/Chip.themes.d.ts

@@ -1,4 +1,4 @@
-import type { Colors } from '../types/Colors';
+import { Colors } from '../types/Colors';
 export type Theme = 'solid' | 'outline' | 'light' | 'dark';
 type Options = {
     color: Colors;

package/molecules/ElasticHeight.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentPropsWithoutRef, type FunctionComponent } from 'react';
+import { ComponentPropsWithoutRef, FunctionComponent } from 'react';
 interface ElasticHeightProps extends ComponentPropsWithoutRef<'div'> {
     innerClassName?: string;
     isExpanded?: boolean;

package/molecules/ElasticHeight.js

@@ -1,37 +1,36 @@
 "use client";
-import { jsx as i } from "react/jsx-runtime";
-import { c as l } from "../chunks/index.js";
-import { useRef as m, useState as d, useLayoutEffect as h } from "react";
-import p from "../hooks/useResizeObserver.js";
-const R = ({
-  className: o,
-  children: a,
-  innerClassName: n,
+import { jsx as s } from "react/jsx-runtime";
+import { c as u } from "../chunks/index.js";
+import { useRef as l, useState as m, useLayoutEffect as d } from "react";
+import h from "../hooks/useResizeObserver.js";
+const H = ({
+  className: i,
+  children: o,
+  innerClassName: a,
   isExpanded: t = !1,
-  min: f = 0,
-  ...c
+  min: n = 0,
+  ...f
 }) => {
-  const e = m(null), [u, r] = d(0);
-  return p({
+  const e = l(null), [c, r] = m(0);
+  return h({
     ref: e,
     onResize: () => {
-      var s;
-      e.current && r((s = e.current) == null ? void 0 : s.offsetHeight);
+      e.current && r(e.current?.offsetHeight);
     }
-  }), h(() => {
+  }), d(() => {
     e.current && r(e.current.offsetHeight);
-  }, [e]), /* @__PURE__ */ i(
+  }, [e]), /* @__PURE__ */ s(
     "div",
     {
-      ...c,
-      className: l("overflow-hidden transition-all duration-500", o),
+      ...f,
+      className: u("overflow-hidden transition-all duration-500", i),
       "data-expanded": t,
-      style: { height: t ? u : f },
-      children: /* @__PURE__ */ i("div", { className: n, ref: e, children: a })
+      style: { height: t ? c : n },
+      children: /* @__PURE__ */ s("div", { className: a, ref: e, children: o })
     }
   );
 };
 export {
-  R as ElasticHeight
+  H as ElasticHeight
 };
 //# sourceMappingURL=ElasticHeight.js.map

package/molecules/ElasticHeight.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElasticHeight.js","sources":["../../lib/molecules/ElasticHeight.tsx"],"sourcesContent":["'use client';\n\nimport classnames from 'classnames';\nimport {\n  type ComponentPropsWithoutRef,\n  type FunctionComponent,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport useResizeObserver from '@/hooks/useResizeObserver';\n\ninterface ElasticHeightProps extends ComponentPropsWithoutRef<'div'> {\n  innerClassName?: string;\n  isExpanded?: boolean;\n  min?: number;\n}\n\nexport const ElasticHeight: FunctionComponent<ElasticHeightProps> = ({\n  className,\n  children,\n  innerClassName,\n  isExpanded = false,\n  min = 0,\n  ...attrs\n}) => {\n  const ref = useRef<HTMLDivElement>(null as any);\n  const [max, setMax] = useState(0);\n\n  useResizeObserver<HTMLDivElement>({\n    ref: ref,\n    onResize: () => {\n      if (ref.current) {\n        setMax(ref.current?.offsetHeight);\n      }\n    },\n  });\n\n  useLayoutEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n    setMax(ref.current.offsetHeight);\n  }, [ref]);\n\n  return (\n    <div\n      {...attrs}\n      className={classnames('overflow-hidden transition-all duration-500', className)}\n      data-expanded={isExpanded}\n      style={{ height: isExpanded ? max : min }}\n    >\n      <div className={innerClassName} ref={ref}>\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"names":["ElasticHeight","className","children","innerClassName","isExpanded","min","attrs","ref","useRef","max","setMax","useState","useResizeObserver","_a","useLayoutEffect","jsx","classnames"],"mappings":";;;;;AAkBO,MAAMA,IAAuD,CAAC;AAAA,EACnE,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,KAAAC,IAAM;AAAA,EACN,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAMC,EAAuB,IAAW,GACxC,CAACC,GAAKC,CAAM,IAAIC,EAAS,CAAC;AAEhC,SAAAC,EAAkC;AAAA,IAChC,KAAAL;AAAA,IACA,UAAU,MAAM;;AACd,MAAIA,EAAI,WACNG,GAAOG,IAAAN,EAAI,YAAJ,gBAAAM,EAAa,YAAY;AAAA,IAEpC;AAAA,EAAA,CACD,GAEDC,EAAgB,MAAM;AACpB,IAAKP,EAAI,WAGTG,EAAOH,EAAI,QAAQ,YAAY;AAAA,EACjC,GAAG,CAACA,CAAG,CAAC,GAGN,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGT;AAAA,MACJ,WAAWU,EAAW,+CAA+Cf,CAAS;AAAA,MAC9E,iBAAeG;AAAA,MACf,OAAO,EAAE,QAAQA,IAAaK,IAAMJ,EAAA;AAAA,MAEpC,UAAA,gBAAAU,EAAC,OAAA,EAAI,WAAWZ,GAAgB,KAAAI,GAC7B,UAAAL,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"ElasticHeight.js","sources":["../../lib/molecules/ElasticHeight.tsx"],"sourcesContent":["'use client';\n\nimport classnames from 'classnames';\nimport {\n  type ComponentPropsWithoutRef,\n  type FunctionComponent,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport useResizeObserver from '@/hooks/useResizeObserver';\n\ninterface ElasticHeightProps extends ComponentPropsWithoutRef<'div'> {\n  innerClassName?: string;\n  isExpanded?: boolean;\n  min?: number;\n}\n\nexport const ElasticHeight: FunctionComponent<ElasticHeightProps> = ({\n  className,\n  children,\n  innerClassName,\n  isExpanded = false,\n  min = 0,\n  ...attrs\n}) => {\n  const ref = useRef<HTMLDivElement>(null as any);\n  const [max, setMax] = useState(0);\n\n  useResizeObserver<HTMLDivElement>({\n    ref: ref,\n    onResize: () => {\n      if (ref.current) {\n        setMax(ref.current?.offsetHeight);\n      }\n    },\n  });\n\n  useLayoutEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n    setMax(ref.current.offsetHeight);\n  }, [ref]);\n\n  return (\n    <div\n      {...attrs}\n      className={classnames('overflow-hidden transition-all duration-500', className)}\n      data-expanded={isExpanded}\n      style={{ height: isExpanded ? max : min }}\n    >\n      <div className={innerClassName} ref={ref}>\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"names":["ElasticHeight","className","children","innerClassName","isExpanded","min","attrs","ref","useRef","max","setMax","useState","useResizeObserver","useLayoutEffect","jsx","classnames"],"mappings":";;;;;AAkBO,MAAMA,IAAuD,CAAC;AAAA,EACnE,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,KAAAC,IAAM;AAAA,EACN,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAMC,EAAuB,IAAW,GACxC,CAACC,GAAKC,CAAM,IAAIC,EAAS,CAAC;AAEhC,SAAAC,EAAkC;AAAA,IAChC,KAAAL;AAAA,IACA,UAAU,MAAM;AACd,MAAIA,EAAI,WACNG,EAAOH,EAAI,SAAS,YAAY;AAAA,IAEpC;AAAA,EAAA,CACD,GAEDM,EAAgB,MAAM;AACpB,IAAKN,EAAI,WAGTG,EAAOH,EAAI,QAAQ,YAAY;AAAA,EACjC,GAAG,CAACA,CAAG,CAAC,GAGN,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGR;AAAA,MACJ,WAAWS,EAAW,+CAA+Cd,CAAS;AAAA,MAC9E,iBAAeG;AAAA,MACf,OAAO,EAAE,QAAQA,IAAaK,IAAMJ,EAAA;AAAA,MAEpC,UAAA,gBAAAS,EAAC,OAAA,EAAI,WAAWX,GAAgB,KAAAI,GAC7B,UAAAL,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/molecules/Forms/Checkboxes/Checkbox.d.ts

@@ -1,4 +1,4 @@
-import type { FormControlProps } from '../FormControl';
+import { FormControlProps } from '../FormControl';
 export interface CheckboxProps<Value = string> extends FormControlProps<Value> {
     size?: number;
     onChange?: (name: string, value: Value | null) => void;

package/molecules/Forms/Checkboxes/Checkbox.js

@@ -1,76 +1,76 @@
-import { jsxs as t, jsx as a } from "react/jsx-runtime";
-import { c as o } from "../../../chunks/index.js";
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { c as n } from "../../../chunks/index.js";
 import { useId as D } from "react";
 import { useValue as S } from "../../../hooks/useValue.js";
 /* empty css                       */
 import { useInternalStatus as V } from "../../../hooks/useInternalStatus.js";
-import { Icon as p } from "@clubmed/trident-icons";
-function A(u) {
-  const x = D(), {
-    id: s = x,
-    name: n = s,
-    className: f,
-    dataTestId: b,
+import { Icon as h } from "@clubmed/trident-icons";
+function A(p) {
+  const u = D(), {
+    id: s = u,
+    name: o = s,
+    className: x,
+    dataTestId: f,
     disabled: r = !1,
-    checked: k = !1,
+    checked: b = !1,
     value: l,
     size: i = 24,
-    tabIndex: v = 0,
-    validationStatus: N = "default",
-    errorMessage: d,
-    children: g,
-    onChange: c,
-    ...y
-  } = u, { value: m, setValue: I } = S({
-    name: n,
-    initialValue: k,
-    onChange(w, h) {
-      c == null || c(w, h ? l !== void 0 ? l : h : null);
+    tabIndex: k = 0,
+    validationStatus: g = "default",
+    errorMessage: c,
+    children: v,
+    onChange: C,
+    ...N
+  } = p, { value: d, setValue: y } = S({
+    name: o,
+    initialValue: b,
+    onChange(w, m) {
+      C?.(w, m ? l !== void 0 ? l : m : null);
     }
   }), e = V({
     isDisabled: r,
-    validationStatus: N
-  }), C = e === "error" && d;
-  return /* @__PURE__ */ t(
+    validationStatus: g
+  }), I = e === "error" && c;
+  return /* @__PURE__ */ a(
     "div",
     {
-      className: o("flex flex-col space-y-2", f),
+      className: n("flex flex-col space-y-2", x),
       "data-testid": `checkbox-container-${s}`,
       children: [
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ a(
           "label",
           {
-            className: o("cursor-pointer relative flex text-b3 items-center", {
+            className: n("cursor-pointer relative flex text-b3 items-center", {
               "text-grey": e === "disabled",
               "text-black": e !== "default"
             }),
             children: [
-              /* @__PURE__ */ t("span", { className: "relative self-start me-8", children: [
-                /* @__PURE__ */ a(
+              /* @__PURE__ */ a("span", { className: "relative self-start me-8", children: [
+                /* @__PURE__ */ t(
                   "input",
                   {
-                    ...y,
-                    name: n,
-                    "data-testid": b,
+                    ...N,
+                    name: o,
+                    "data-testid": f,
                     type: "checkbox",
-                    tabIndex: v,
+                    tabIndex: k,
                     onChange: () => {
-                      !r && I(!m);
+                      !r && y(!d);
                     },
-                    checked: m,
+                    checked: d,
                     "data-name": "Checkbox",
                     disabled: r,
                     value: l
                   }
                 ),
-                /* @__PURE__ */ a(
+                /* @__PURE__ */ t(
                   "span",
                   {
                     style: { height: i, width: i },
-                    className: o({ "!border-red": e === "error" }),
+                    className: n({ "!border-red": e === "error" }),
                     "data-testid": `check-container-${s}`,
-                    children: /* @__PURE__ */ a(
-                      p,
+                    children: /* @__PURE__ */ t(
+                      h,
                       {
                         name: "CheckDefault",
                         type: "svg",
@@ -82,13 +82,13 @@ function A(u) {
                   }
                 )
               ] }),
-              g
+              v
             ]
           }
         ),
-        C && /* @__PURE__ */ t("span", { className: "text-red text-b4 flex items-start space-x-4 ps-20", role: "alert", children: [
-          /* @__PURE__ */ a(p, { name: "Error", width: "20px" }),
-          d
+        I && /* @__PURE__ */ a("span", { className: "text-red text-b4 flex items-start space-x-4 ps-20", role: "alert", children: [
+          /* @__PURE__ */ t(h, { name: "Error", width: "20px" }),
+          c
         ] })
       ]
     }

package/molecules/Forms/Checkboxes/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../../lib/molecules/Forms/Checkboxes/Checkbox.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { useId } from 'react';\nimport { useValue } from '@/hooks/useValue.js';\nimport '../controls.css';\nimport type { FormControlProps } from '@/molecules/Forms/FormControl';\nimport { useInternalStatus } from '@/hooks/useInternalStatus';\nimport { Icon } from '@clubmed/trident-icons';\n\nexport interface CheckboxProps<Value = string> extends FormControlProps<Value> {\n  size?: number;\n  onChange?: (name: string, value: Value | null) => void;\n}\n\nexport function Checkbox<Value = string>(props: CheckboxProps<Value>) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    className,\n    dataTestId,\n    disabled = false,\n    checked: initialChecked = false,\n    value,\n    size = 24,\n    tabIndex = 0,\n    validationStatus = 'default',\n    errorMessage,\n    children,\n    onChange,\n    ...rest\n  } = props;\n\n  const { value: checked, setValue } = useValue<boolean>({\n    name,\n    initialValue: initialChecked,\n    onChange(name, checked) {\n      onChange?.(name, checked ? ((value !== undefined ? value : checked) as Value) : null);\n    },\n  });\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n\n  const shouldDisplayErrorMessage = internalStatus === 'error' && errorMessage;\n\n  return (\n    <div\n      className={classnames('flex flex-col space-y-2', className)}\n      data-testid={`checkbox-container-${id}`}\n    >\n      <label\n        className={classnames('cursor-pointer relative flex text-b3 items-center', {\n          'text-grey': internalStatus === 'disabled',\n          'text-black': internalStatus !== 'default',\n        })}\n      >\n        <span className=\"relative self-start me-8\">\n          <input\n            {...rest}\n            name={name}\n            data-testid={dataTestId}\n            type=\"checkbox\"\n            tabIndex={tabIndex}\n            onChange={() => {\n              !disabled && setValue(!checked);\n            }}\n            checked={checked}\n            data-name=\"Checkbox\"\n            disabled={disabled}\n            value={value as any}\n          />\n\n          <span\n            style={{ height: size, width: size }}\n            className={classnames({ '!border-red': internalStatus === 'error' })}\n            data-testid={`check-container-${id}`}\n          >\n            <Icon\n              name=\"CheckDefault\"\n              type=\"svg\"\n              width={`${size}px`}\n              color=\"black\"\n              className=\"absolute\"\n            />\n          </span>\n        </span>\n\n        {children}\n      </label>\n\n      {shouldDisplayErrorMessage && (\n        <span className=\"text-red text-b4 flex items-start space-x-4 ps-20\" role=\"alert\">\n          <Icon name=\"Error\" width=\"20px\" />\n          {errorMessage}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"names":["Checkbox","props","internalId","useId","id","name","className","dataTestId","disabled","initialChecked","value","size","tabIndex","validationStatus","errorMessage","children","onChange","rest","checked","setValue","useValue","internalStatus","useInternalStatus","shouldDisplayErrorMessage","jsxs","classnames","jsx","Icon"],"mappings":";;;;;;;AAaO,SAASA,EAAyBC,GAA6B;AACpE,QAAMC,IAAaC,EAAA,GAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,WAAAE;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,SAASC,IAAiB;AAAA,IAC1B,OAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,UAAAC,IAAW;AAAA,IACX,kBAAAC,IAAmB;AAAA,IACnB,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDhB,GAEE,EAAE,OAAOiB,GAAS,UAAAC,EAAA,IAAaC,EAAkB;AAAA,IACrD,MAAAf;AAAA,IACA,cAAcI;AAAA,IACd,SAASJ,GAAMa,GAAS;AACtB,MAAAF,KAAA,QAAAA,EAAWX,GAAMa,IAAYR,MAAU,SAAYA,IAAQQ,IAAqB;AAAA,IAClF;AAAA,EAAA,CACD,GACKG,IAAiBC,EAAkB;AAAA,IACvC,YAAYd;AAAA,IACZ,kBAAAK;AAAA,EAAA,CACD,GAEKU,IAA4BF,MAAmB,WAAWP;AAEhE,SACE,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAW,2BAA2BnB,CAAS;AAAA,MAC1D,eAAa,sBAAsBF,CAAE;AAAA,MAErC,UAAA;AAAA,QAAA,gBAAAoB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC,EAAW,qDAAqD;AAAA,cACzE,aAAaJ,MAAmB;AAAA,cAChC,cAAcA,MAAmB;AAAA,YAAA,CAClC;AAAA,YAED,UAAA;AAAA,cAAA,gBAAAG,EAAC,QAAA,EAAK,WAAU,4BACd,UAAA;AAAA,gBAAA,gBAAAE;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACE,GAAGT;AAAA,oBACJ,MAAAZ;AAAA,oBACA,eAAaE;AAAA,oBACb,MAAK;AAAA,oBACL,UAAAK;AAAA,oBACA,UAAU,MAAM;AACd,uBAACJ,KAAYW,EAAS,CAACD,CAAO;AAAA,oBAChC;AAAA,oBACA,SAAAA;AAAA,oBACA,aAAU;AAAA,oBACV,UAAAV;AAAA,oBACA,OAAAE;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAGF,gBAAAgB;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,OAAO,EAAE,QAAQf,GAAM,OAAOA,EAAA;AAAA,oBAC9B,WAAWc,EAAW,EAAE,eAAeJ,MAAmB,SAAS;AAAA,oBACnE,eAAa,mBAAmBjB,CAAE;AAAA,oBAElC,UAAA,gBAAAsB;AAAA,sBAACC;AAAA,sBAAA;AAAA,wBACC,MAAK;AAAA,wBACL,MAAK;AAAA,wBACL,OAAO,GAAGhB,CAAI;AAAA,wBACd,OAAM;AAAA,wBACN,WAAU;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBACZ;AAAA,gBAAA;AAAA,cACF,GACF;AAAA,cAECI;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGFQ,KACC,gBAAAC,EAAC,QAAA,EAAK,WAAU,qDAAoD,MAAK,SACvE,UAAA;AAAA,UAAA,gBAAAE,EAACC,GAAA,EAAK,MAAK,SAAQ,OAAM,QAAO;AAAA,UAC/Bb;AAAA,QAAA,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../../lib/molecules/Forms/Checkboxes/Checkbox.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { useId } from 'react';\nimport { useValue } from '@/hooks/useValue.js';\nimport '../controls.css';\nimport type { FormControlProps } from '@/molecules/Forms/FormControl';\nimport { useInternalStatus } from '@/hooks/useInternalStatus';\nimport { Icon } from '@clubmed/trident-icons';\n\nexport interface CheckboxProps<Value = string> extends FormControlProps<Value> {\n  size?: number;\n  onChange?: (name: string, value: Value | null) => void;\n}\n\nexport function Checkbox<Value = string>(props: CheckboxProps<Value>) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    className,\n    dataTestId,\n    disabled = false,\n    checked: initialChecked = false,\n    value,\n    size = 24,\n    tabIndex = 0,\n    validationStatus = 'default',\n    errorMessage,\n    children,\n    onChange,\n    ...rest\n  } = props;\n\n  const { value: checked, setValue } = useValue<boolean>({\n    name,\n    initialValue: initialChecked,\n    onChange(name, checked) {\n      onChange?.(name, checked ? ((value !== undefined ? value : checked) as Value) : null);\n    },\n  });\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n\n  const shouldDisplayErrorMessage = internalStatus === 'error' && errorMessage;\n\n  return (\n    <div\n      className={classnames('flex flex-col space-y-2', className)}\n      data-testid={`checkbox-container-${id}`}\n    >\n      <label\n        className={classnames('cursor-pointer relative flex text-b3 items-center', {\n          'text-grey': internalStatus === 'disabled',\n          'text-black': internalStatus !== 'default',\n        })}\n      >\n        <span className=\"relative self-start me-8\">\n          <input\n            {...rest}\n            name={name}\n            data-testid={dataTestId}\n            type=\"checkbox\"\n            tabIndex={tabIndex}\n            onChange={() => {\n              !disabled && setValue(!checked);\n            }}\n            checked={checked}\n            data-name=\"Checkbox\"\n            disabled={disabled}\n            value={value as any}\n          />\n\n          <span\n            style={{ height: size, width: size }}\n            className={classnames({ '!border-red': internalStatus === 'error' })}\n            data-testid={`check-container-${id}`}\n          >\n            <Icon\n              name=\"CheckDefault\"\n              type=\"svg\"\n              width={`${size}px`}\n              color=\"black\"\n              className=\"absolute\"\n            />\n          </span>\n        </span>\n\n        {children}\n      </label>\n\n      {shouldDisplayErrorMessage && (\n        <span className=\"text-red text-b4 flex items-start space-x-4 ps-20\" role=\"alert\">\n          <Icon name=\"Error\" width=\"20px\" />\n          {errorMessage}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"names":["Checkbox","props","internalId","useId","id","name","className","dataTestId","disabled","initialChecked","value","size","tabIndex","validationStatus","errorMessage","children","onChange","rest","checked","setValue","useValue","internalStatus","useInternalStatus","shouldDisplayErrorMessage","jsxs","classnames","jsx","Icon"],"mappings":";;;;;;;AAaO,SAASA,EAAyBC,GAA6B;AACpE,QAAMC,IAAaC,EAAA,GAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,WAAAE;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,SAASC,IAAiB;AAAA,IAC1B,OAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,UAAAC,IAAW;AAAA,IACX,kBAAAC,IAAmB;AAAA,IACnB,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDhB,GAEE,EAAE,OAAOiB,GAAS,UAAAC,EAAA,IAAaC,EAAkB;AAAA,IACrD,MAAAf;AAAA,IACA,cAAcI;AAAA,IACd,SAASJ,GAAMa,GAAS;AACtB,MAAAF,IAAWX,GAAMa,IAAYR,MAAU,SAAYA,IAAQQ,IAAqB,IAAI;AAAA,IACtF;AAAA,EAAA,CACD,GACKG,IAAiBC,EAAkB;AAAA,IACvC,YAAYd;AAAA,IACZ,kBAAAK;AAAA,EAAA,CACD,GAEKU,IAA4BF,MAAmB,WAAWP;AAEhE,SACE,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAW,2BAA2BnB,CAAS;AAAA,MAC1D,eAAa,sBAAsBF,CAAE;AAAA,MAErC,UAAA;AAAA,QAAA,gBAAAoB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC,EAAW,qDAAqD;AAAA,cACzE,aAAaJ,MAAmB;AAAA,cAChC,cAAcA,MAAmB;AAAA,YAAA,CAClC;AAAA,YAED,UAAA;AAAA,cAAA,gBAAAG,EAAC,QAAA,EAAK,WAAU,4BACd,UAAA;AAAA,gBAAA,gBAAAE;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACE,GAAGT;AAAA,oBACJ,MAAAZ;AAAA,oBACA,eAAaE;AAAA,oBACb,MAAK;AAAA,oBACL,UAAAK;AAAA,oBACA,UAAU,MAAM;AACd,uBAACJ,KAAYW,EAAS,CAACD,CAAO;AAAA,oBAChC;AAAA,oBACA,SAAAA;AAAA,oBACA,aAAU;AAAA,oBACV,UAAAV;AAAA,oBACA,OAAAE;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAGF,gBAAAgB;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,OAAO,EAAE,QAAQf,GAAM,OAAOA,EAAA;AAAA,oBAC9B,WAAWc,EAAW,EAAE,eAAeJ,MAAmB,SAAS;AAAA,oBACnE,eAAa,mBAAmBjB,CAAE;AAAA,oBAElC,UAAA,gBAAAsB;AAAA,sBAACC;AAAA,sBAAA;AAAA,wBACC,MAAK;AAAA,wBACL,MAAK;AAAA,wBACL,OAAO,GAAGhB,CAAI;AAAA,wBACd,OAAM;AAAA,wBACN,WAAU;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBACZ;AAAA,gBAAA;AAAA,cACF,GACF;AAAA,cAECI;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGFQ,KACC,gBAAAC,EAAC,QAAA,EAAK,WAAU,qDAAoD,MAAK,SACvE,UAAA;AAAA,UAAA,gBAAAE,EAACC,GAAA,EAAK,MAAK,SAAQ,OAAM,QAAO;AAAA,UAC/Bb;AAAA,QAAA,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/molecules/Forms/Checkboxes/Checkboxes.d.ts

@@ -1,5 +1,5 @@
-import { type HTMLAttributes } from 'react';
-import type { FormControlProps } from '../FormControl.js';
+import { HTMLAttributes } from 'react';
+import { FormControlProps } from '../FormControl.js';
 export interface CheckboxesProps<Value = string> extends Pick<FormControlProps<Value[]>, 'id' | 'name' | 'value' | 'onChange' | 'disabled' | 'readOnly' | 'tabIndex' | 'description' | 'validationStatus' | 'errorMessage'>, Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
 }
 export declare function Checkboxes<Value = string>(props: CheckboxesProps<Value>): import("react/jsx-runtime").JSX.Element;