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

package/molecules/Forms/Select.js

@@ -1,5 +1,5 @@
 import { jsx as r, jsxs as c } from "react/jsx-runtime";
-import { c as l } from "../../chunks/index.js";
+import { c as l } from "../../chunks/clsx.js";
 import { useValue as I } from "../../hooks/useValue.js";
 import { useInternalStatus as S } from "../../hooks/useInternalStatus.js";
 import { FormControl as j } from "./FormControl.js";
@@ -11,10 +11,10 @@ const R = (p) => {
     name: a = t,
     label: m,
     value: b,
-    description: f,
+    description: x,
     validationStatus: o = "default",
     iconType: i,
-    errorMessage: x,
+    errorMessage: f,
     disabled: s = !1,
     required: d = !1,
     hideRequiredStar: h,
@@ -33,14 +33,14 @@ const R = (p) => {
       id: t,
       className: g,
       label: m,
-      description: f,
+      description: x,
       dataName: "TextField",
       dataTestId: v,
       disabled: s,
       required: d,
       hideRequiredStar: h,
       validationStatus: o,
-      errorMessage: x,
+      errorMessage: f,
       children: /* @__PURE__ */ c(
         "div",
         {

package/molecules/Forms/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../lib/molecules/Forms/Select.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { useValue } from '@/hooks/useValue';\nimport { useInternalStatus } from '@/hooks/useInternalStatus';\nimport { FormControl, type FormControlProps } from './FormControl.js';\nimport { Icon, type IconicTypes } from '@clubmed/trident-icons';\nimport { type SelectHTMLAttributes, useId } from 'react';\n\nexport interface SelectProps<Value>\n  extends FormControlProps<Value, SelectHTMLAttributes<HTMLSelectElement>> {\n  description?: string;\n  iconType?: IconicTypes;\n  errorMessage?: string;\n  dataTestId?: string;\n}\n\nexport const Select = <Value = string,>(props: SelectProps<Value>) => {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    label,\n    value: initialValue,\n    description,\n    validationStatus = 'default',\n    iconType,\n    errorMessage,\n    disabled = false,\n    required = false,\n    hideRequiredStar,\n    className,\n    dataTestId = id,\n    onChange,\n    children,\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<Value>({ name, initialValue, onChange });\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n\n  return (\n    <FormControl\n      id={id}\n      className={className}\n      label={label}\n      description={description}\n      dataName=\"TextField\"\n      dataTestId={dataTestId}\n      disabled={disabled}\n      required={required}\n      hideRequiredStar={hideRequiredStar}\n      validationStatus={validationStatus}\n      errorMessage={errorMessage}\n    >\n      <div\n        className={classnames('relative rounded-pill z-0', {\n          'bg-white': internalStatus !== 'disabled',\n          'bg-pearl': internalStatus === 'disabled',\n        })}\n      >\n        <select\n          {...rest}\n          id={id}\n          name={name}\n          disabled={disabled}\n          required={required}\n          value={value as any}\n          onChange={(e) => setValue(e.target.value as Value)}\n          className={classnames(\n            'text-b3 rounded-pill w-full border px-20 py-12 font-normal outline-none appearance-none bg-transparent',\n            {\n              'border-lightGrey focus:border-black active:border-black pe-[52px]':\n                internalStatus === 'default',\n              'pe-[84px]': internalStatus === 'error' || internalStatus === 'success',\n              'text-black': internalStatus !== 'disabled',\n              'text-grey': internalStatus === 'disabled',\n              'border-red': internalStatus === 'error',\n              'border-green': internalStatus === 'success',\n            },\n          )}\n          aria-label={name}\n        >\n          {children}\n        </select>\n\n        <div\n          className={classnames(\n            'pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12 -z-1',\n            {\n              'text-grey': internalStatus === 'disabled',\n              'text-red': internalStatus === 'error',\n              'text-green': internalStatus === 'success',\n            },\n          )}\n        >\n          <span className=\"ms-auto flex gap-x-8\">\n            {internalStatus === 'error' && (\n              <Icon name=\"CrossDefault\" width=\"24px\" type={iconType} />\n            )}\n\n            {internalStatus === 'success' && (\n              <Icon name=\"CheckDefault\" width=\"24px\" type={iconType} />\n            )}\n\n            <button className=\"pointer-events-auto inline-flex\">\n              <Icon name=\"ArrowDefaultDown\" type=\"svg\" width=\"24px\" color=\"black\" />\n            </button>\n          </span>\n        </div>\n      </div>\n    </FormControl>\n  );\n};\n"],"names":["Select","props","internalId","useId","id","name","label","initialValue","description","validationStatus","iconType","errorMessage","disabled","required","hideRequiredStar","className","dataTestId","onChange","children","rest","value","setValue","useValue","internalStatus","useInternalStatus","jsx","FormControl","jsxs","classnames","e","Icon"],"mappings":";;;;;;;AAeO,MAAMA,IAAS,CAAkBC,MAA8B;AACpE,QAAMC,IAAaC,EAAA,GAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,OAAAE;AAAA,IACA,OAAOC;AAAA,IACP,aAAAC;AAAA,IACA,kBAAAC,IAAmB;AAAA,IACnB,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW;AAAA,IACX,kBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,YAAAC,IAAaZ;AAAA,IACb,UAAAa;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDlB,GAEE,EAAE,OAAAmB,GAAO,UAAAC,MAAaC,EAAgB,EAAE,MAAAjB,GAAM,cAAAE,GAAc,UAAAU,GAAU,GACtEM,IAAiBC,EAAkB;AAAA,IACvC,YAAYZ;AAAA,IACZ,kBAAAH;AAAA,EAAA,CACD;AAED,SACE,gBAAAgB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAAtB;AAAA,MACA,WAAAW;AAAA,MACA,OAAAT;AAAA,MACA,aAAAE;AAAA,MACA,UAAS;AAAA,MACT,YAAAQ;AAAA,MACA,UAAAJ;AAAA,MACA,UAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,kBAAAL;AAAA,MACA,cAAAE;AAAA,MAEA,UAAA,gBAAAgB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWC,EAAW,6BAA6B;AAAA,YACjD,YAAYL,MAAmB;AAAA,YAC/B,YAAYA,MAAmB;AAAA,UAAA,CAChC;AAAA,UAED,UAAA;AAAA,YAAA,gBAAAE;AAAA,cAAC;AAAA,cAAA;AAAA,gBACE,GAAGN;AAAA,gBACJ,IAAAf;AAAA,gBACA,MAAAC;AAAA,gBACA,UAAAO;AAAA,gBACA,UAAAC;AAAA,gBACA,OAAAO;AAAA,gBACA,UAAU,CAACS,MAAMR,EAASQ,EAAE,OAAO,KAAc;AAAA,gBACjD,WAAWD;AAAA,kBACT;AAAA,kBACA;AAAA,oBACE,qEACEL,MAAmB;AAAA,oBACrB,aAAaA,MAAmB,WAAWA,MAAmB;AAAA,oBAC9D,cAAcA,MAAmB;AAAA,oBACjC,aAAaA,MAAmB;AAAA,oBAChC,cAAcA,MAAmB;AAAA,oBACjC,gBAAgBA,MAAmB;AAAA,kBAAA;AAAA,gBACrC;AAAA,gBAEF,cAAYlB;AAAA,gBAEX,UAAAa;AAAA,cAAA;AAAA,YAAA;AAAA,YAGH,gBAAAO;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWG;AAAA,kBACT;AAAA,kBACA;AAAA,oBACE,aAAaL,MAAmB;AAAA,oBAChC,YAAYA,MAAmB;AAAA,oBAC/B,cAAcA,MAAmB;AAAA,kBAAA;AAAA,gBACnC;AAAA,gBAGF,UAAA,gBAAAI,EAAC,QAAA,EAAK,WAAU,wBACb,UAAA;AAAA,kBAAAJ,MAAmB,6BACjBO,GAAA,EAAK,MAAK,gBAAe,OAAM,QAAO,MAAMpB,EAAA,CAAU;AAAA,kBAGxDa,MAAmB,aAClB,gBAAAE,EAACK,GAAA,EAAK,MAAK,gBAAe,OAAM,QAAO,MAAMpB,EAAA,CAAU;AAAA,kBAGzD,gBAAAe,EAAC,UAAA,EAAO,WAAU,mCAChB,4BAACK,GAAA,EAAK,MAAK,oBAAmB,MAAK,OAAM,OAAM,QAAO,OAAM,SAAQ,EAAA,CACtE;AAAA,gBAAA,EAAA,CACF;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Select.js","sources":["../../../lib/molecules/Forms/Select.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useValue } from '@/hooks/useValue';\nimport { useInternalStatus } from '@/hooks/useInternalStatus';\nimport { FormControl, type FormControlProps } from './FormControl.js';\nimport { Icon, type IconicTypes } from '@clubmed/trident-icons';\nimport { type SelectHTMLAttributes, useId } from 'react';\n\nexport interface SelectProps<Value>\n  extends FormControlProps<Value, SelectHTMLAttributes<HTMLSelectElement>> {\n  description?: string;\n  iconType?: IconicTypes;\n  errorMessage?: string;\n  dataTestId?: string;\n}\n\nexport const Select = <Value = string,>(props: SelectProps<Value>) => {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    label,\n    value: initialValue,\n    description,\n    validationStatus = 'default',\n    iconType,\n    errorMessage,\n    disabled = false,\n    required = false,\n    hideRequiredStar,\n    className,\n    dataTestId = id,\n    onChange,\n    children,\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<Value>({ name, initialValue, onChange });\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n\n  return (\n    <FormControl\n      id={id}\n      className={className}\n      label={label}\n      description={description}\n      dataName=\"TextField\"\n      dataTestId={dataTestId}\n      disabled={disabled}\n      required={required}\n      hideRequiredStar={hideRequiredStar}\n      validationStatus={validationStatus}\n      errorMessage={errorMessage}\n    >\n      <div\n        className={clsx('relative rounded-pill z-0', {\n          'bg-white': internalStatus !== 'disabled',\n          'bg-pearl': internalStatus === 'disabled',\n        })}\n      >\n        <select\n          {...rest}\n          id={id}\n          name={name}\n          disabled={disabled}\n          required={required}\n          value={value as any}\n          onChange={(e) => setValue(e.target.value as Value)}\n          className={clsx(\n            'text-b3 rounded-pill w-full border px-20 py-12 font-normal outline-none appearance-none bg-transparent',\n            {\n              'border-lightGrey focus:border-black active:border-black pe-[52px]':\n                internalStatus === 'default',\n              'pe-[84px]': internalStatus === 'error' || internalStatus === 'success',\n              'text-black': internalStatus !== 'disabled',\n              'text-grey': internalStatus === 'disabled',\n              'border-red': internalStatus === 'error',\n              'border-green': internalStatus === 'success',\n            },\n          )}\n          aria-label={name}\n        >\n          {children}\n        </select>\n\n        <div\n          className={clsx(\n            'pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12 -z-1',\n            {\n              'text-grey': internalStatus === 'disabled',\n              'text-red': internalStatus === 'error',\n              'text-green': internalStatus === 'success',\n            },\n          )}\n        >\n          <span className=\"ms-auto flex gap-x-8\">\n            {internalStatus === 'error' && (\n              <Icon name=\"CrossDefault\" width=\"24px\" type={iconType} />\n            )}\n\n            {internalStatus === 'success' && (\n              <Icon name=\"CheckDefault\" width=\"24px\" type={iconType} />\n            )}\n\n            <button className=\"pointer-events-auto inline-flex\">\n              <Icon name=\"ArrowDefaultDown\" type=\"svg\" width=\"24px\" color=\"black\" />\n            </button>\n          </span>\n        </div>\n      </div>\n    </FormControl>\n  );\n};\n"],"names":["Select","props","internalId","useId","id","name","label","initialValue","description","validationStatus","iconType","errorMessage","disabled","required","hideRequiredStar","className","dataTestId","onChange","children","rest","value","setValue","useValue","internalStatus","useInternalStatus","jsx","FormControl","jsxs","clsx","e","Icon"],"mappings":";;;;;;;AAeO,MAAMA,IAAS,CAAkBC,MAA8B;AACpE,QAAMC,IAAaC,EAAA,GAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,OAAAE;AAAA,IACA,OAAOC;AAAA,IACP,aAAAC;AAAA,IACA,kBAAAC,IAAmB;AAAA,IACnB,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW;AAAA,IACX,kBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,YAAAC,IAAaZ;AAAA,IACb,UAAAa;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDlB,GAEE,EAAE,OAAAmB,GAAO,UAAAC,MAAaC,EAAgB,EAAE,MAAAjB,GAAM,cAAAE,GAAc,UAAAU,GAAU,GACtEM,IAAiBC,EAAkB;AAAA,IACvC,YAAYZ;AAAA,IACZ,kBAAAH;AAAA,EAAA,CACD;AAED,SACE,gBAAAgB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAAtB;AAAA,MACA,WAAAW;AAAA,MACA,OAAAT;AAAA,MACA,aAAAE;AAAA,MACA,UAAS;AAAA,MACT,YAAAQ;AAAA,MACA,UAAAJ;AAAA,MACA,UAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,kBAAAL;AAAA,MACA,cAAAE;AAAA,MAEA,UAAA,gBAAAgB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWC,EAAK,6BAA6B;AAAA,YAC3C,YAAYL,MAAmB;AAAA,YAC/B,YAAYA,MAAmB;AAAA,UAAA,CAChC;AAAA,UAED,UAAA;AAAA,YAAA,gBAAAE;AAAA,cAAC;AAAA,cAAA;AAAA,gBACE,GAAGN;AAAA,gBACJ,IAAAf;AAAA,gBACA,MAAAC;AAAA,gBACA,UAAAO;AAAA,gBACA,UAAAC;AAAA,gBACA,OAAAO;AAAA,gBACA,UAAU,CAACS,MAAMR,EAASQ,EAAE,OAAO,KAAc;AAAA,gBACjD,WAAWD;AAAA,kBACT;AAAA,kBACA;AAAA,oBACE,qEACEL,MAAmB;AAAA,oBACrB,aAAaA,MAAmB,WAAWA,MAAmB;AAAA,oBAC9D,cAAcA,MAAmB;AAAA,oBACjC,aAAaA,MAAmB;AAAA,oBAChC,cAAcA,MAAmB;AAAA,oBACjC,gBAAgBA,MAAmB;AAAA,kBAAA;AAAA,gBACrC;AAAA,gBAEF,cAAYlB;AAAA,gBAEX,UAAAa;AAAA,cAAA;AAAA,YAAA;AAAA,YAGH,gBAAAO;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWG;AAAA,kBACT;AAAA,kBACA;AAAA,oBACE,aAAaL,MAAmB;AAAA,oBAChC,YAAYA,MAAmB;AAAA,oBAC/B,cAAcA,MAAmB;AAAA,kBAAA;AAAA,gBACnC;AAAA,gBAGF,UAAA,gBAAAI,EAAC,QAAA,EAAK,WAAU,wBACb,UAAA;AAAA,kBAAAJ,MAAmB,6BACjBO,GAAA,EAAK,MAAK,gBAAe,OAAM,QAAO,MAAMpB,EAAA,CAAU;AAAA,kBAGxDa,MAAmB,aAClB,gBAAAE,EAACK,GAAA,EAAK,MAAK,gBAAe,OAAM,QAAO,MAAMpB,EAAA,CAAU;AAAA,kBAGzD,gBAAAe,EAAC,UAAA,EAAO,WAAU,mCAChB,4BAACK,GAAA,EAAK,MAAK,oBAAmB,MAAK,OAAM,OAAM,QAAO,OAAM,SAAQ,EAAA,CACtE;AAAA,gBAAA,EAAA,CACF;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}

package/molecules/Forms/Switch.js

@@ -1,12 +1,12 @@
 import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import { c as f } from "../../chunks/index.js";
-import { useValue as x } from "../../hooks/useValue.js";
+import { c as x } from "../../chunks/clsx.js";
+import { useValue as f } from "../../hooks/useValue.js";
 /* empty css                    */
 import { useId as w } from "react";
-function C(s) {
-  const n = w(), {
-    id: o = n,
-    name: a = o,
+function C(n) {
+  const s = w(), {
+    id: o = s,
+    name: r = o,
     className: i,
     checked: h,
     disabled: t,
@@ -14,15 +14,15 @@ function C(s) {
     onChange: d,
     tabIndex: m = 0,
     children: p
-  } = s, { value: r, setValue: u } = x({
+  } = n, { value: a, setValue: u } = f({
     initialValue: h,
-    name: a,
+    name: r,
     onChange: d
   });
   return /* @__PURE__ */ c(
     "label",
     {
-      className: f(i, "relative flex items-center gap-[10px]", {
+      className: x(i, "relative flex items-center gap-[10px]", {
         "text-b2": !i?.includes("text-"),
         "font-semibold": !i?.includes("font-"),
         "text-grey": t,
@@ -35,14 +35,14 @@ function C(s) {
             "input",
             {
               type: "checkbox",
-              name: a,
+              name: r,
               tabIndex: m,
-              checked: r,
+              checked: a,
               disabled: t,
               role: "switch",
               className: "absolute w-full h-full opacity-0 cursor-pointer",
               onChange: () => {
-                t || u(!r);
+                t || u(!a);
               },
               "data-name": "Switch"
             }

package/molecules/Forms/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sources":["../../../lib/molecules/Forms/Switch.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { useValue } from '@/hooks/useValue.js';\nimport './controls.css';\nimport type { FormControlProps } from './FormControl.js';\nimport { useId } from 'react';\n\nexport interface SwitchProps extends FormControlProps<boolean> {\n  width?: number;\n}\n\nexport function Switch(props: SwitchProps) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    className,\n    checked: initialChecked,\n    disabled,\n    width = 56,\n    onChange,\n    tabIndex = 0,\n    children,\n  } = props;\n\n  const { value: checked, setValue } = useValue<boolean>({\n    initialValue: initialChecked,\n    name,\n    onChange,\n  });\n\n  return (\n    <label\n      className={classnames(className, 'relative flex items-center gap-[10px]', {\n        'text-b2': !className?.includes('text-'),\n        'font-semibold': !className?.includes('font-'),\n        'text-grey': disabled,\n        'cursor-pointer': !disabled,\n      })}\n      data-testid=\"SwitchContainer\"\n    >\n      <span className=\"relative\">\n        <input\n          type=\"checkbox\"\n          name={name}\n          tabIndex={tabIndex}\n          checked={checked}\n          disabled={disabled}\n          role=\"switch\"\n          className=\"absolute w-full h-full opacity-0 cursor-pointer\"\n          onChange={() => {\n            if (!disabled) {\n              setValue(!checked);\n            }\n          }}\n          data-name=\"Switch\"\n        />\n\n        <span style={{ height: (width * 4) / 7, width }}>\n          <svg viewBox=\"0 0 24 24\" width={(width * 3) / 7}>\n            <g>\n              <circle cx={12} cy={12} r={12} fill=\"hsl(var(--color-white))\" />\n              <circle cx={12} cy={12} r={4} fill=\"hsl(var(--color-grey))\" />\n            </g>\n          </svg>\n        </span>\n      </span>\n\n      <span>{children}</span>\n    </label>\n  );\n}\n"],"names":["Switch","props","internalId","useId","id","name","className","initialChecked","disabled","width","onChange","tabIndex","children","checked","setValue","useValue","jsxs","classnames","jsx"],"mappings":";;;;;AAUO,SAASA,EAAOC,GAAoB;AACzC,QAAMC,IAAaC,EAAA,GAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,WAAAE;AAAA,IACA,SAASC;AAAA,IACT,UAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,UAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,EAAA,IACEX,GAEE,EAAE,OAAOY,GAAS,UAAAC,EAAA,IAAaC,EAAkB;AAAA,IACrD,cAAcR;AAAA,IACd,MAAAF;AAAA,IACA,UAAAK;AAAA,EAAA,CACD;AAED,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAWX,GAAW,yCAAyC;AAAA,QACxE,WAAW,CAACA,GAAW,SAAS,OAAO;AAAA,QACvC,iBAAiB,CAACA,GAAW,SAAS,OAAO;AAAA,QAC7C,aAAaE;AAAA,QACb,kBAAkB,CAACA;AAAA,MAAA,CACpB;AAAA,MACD,eAAY;AAAA,MAEZ,UAAA;AAAA,QAAA,gBAAAQ,EAAC,QAAA,EAAK,WAAU,YACd,UAAA;AAAA,UAAA,gBAAAE;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,MAAAb;AAAA,cACA,UAAAM;AAAA,cACA,SAAAE;AAAA,cACA,UAAAL;AAAA,cACA,MAAK;AAAA,cACL,WAAU;AAAA,cACV,UAAU,MAAM;AACd,gBAAKA,KACHM,EAAS,CAACD,CAAO;AAAA,cAErB;AAAA,cACA,aAAU;AAAA,YAAA;AAAA,UAAA;AAAA,4BAGX,QAAA,EAAK,OAAO,EAAE,QAASJ,IAAQ,IAAK,GAAG,OAAAA,EAAA,GACtC,UAAA,gBAAAS,EAAC,OAAA,EAAI,SAAQ,aAAY,OAAQT,IAAQ,IAAK,GAC5C,4BAAC,KAAA,EACC,UAAA;AAAA,YAAA,gBAAAS,EAAC,UAAA,EAAO,IAAI,IAAI,IAAI,IAAI,GAAG,IAAI,MAAK,0BAAA,CAA0B;AAAA,YAC9D,gBAAAA,EAAC,YAAO,IAAI,IAAI,IAAI,IAAI,GAAG,GAAG,MAAK,yBAAA,CAAyB;AAAA,UAAA,EAAA,CAC9D,GACF,EAAA,CACF;AAAA,QAAA,GACF;AAAA,QAEA,gBAAAA,EAAC,UAAM,UAAAN,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGtB;"}
+{"version":3,"file":"Switch.js","sources":["../../../lib/molecules/Forms/Switch.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useValue } from '@/hooks/useValue.js';\nimport './controls.css';\nimport type { FormControlProps } from './FormControl.js';\nimport { useId } from 'react';\n\nexport interface SwitchProps extends FormControlProps<boolean> {\n  width?: number;\n}\n\nexport function Switch(props: SwitchProps) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    className,\n    checked: initialChecked,\n    disabled,\n    width = 56,\n    onChange,\n    tabIndex = 0,\n    children,\n  } = props;\n\n  const { value: checked, setValue } = useValue<boolean>({\n    initialValue: initialChecked,\n    name,\n    onChange,\n  });\n\n  return (\n    <label\n      className={clsx(className, 'relative flex items-center gap-[10px]', {\n        'text-b2': !className?.includes('text-'),\n        'font-semibold': !className?.includes('font-'),\n        'text-grey': disabled,\n        'cursor-pointer': !disabled,\n      })}\n      data-testid=\"SwitchContainer\"\n    >\n      <span className=\"relative\">\n        <input\n          type=\"checkbox\"\n          name={name}\n          tabIndex={tabIndex}\n          checked={checked}\n          disabled={disabled}\n          role=\"switch\"\n          className=\"absolute w-full h-full opacity-0 cursor-pointer\"\n          onChange={() => {\n            if (!disabled) {\n              setValue(!checked);\n            }\n          }}\n          data-name=\"Switch\"\n        />\n\n        <span style={{ height: (width * 4) / 7, width }}>\n          <svg viewBox=\"0 0 24 24\" width={(width * 3) / 7}>\n            <g>\n              <circle cx={12} cy={12} r={12} fill=\"hsl(var(--color-white))\" />\n              <circle cx={12} cy={12} r={4} fill=\"hsl(var(--color-grey))\" />\n            </g>\n          </svg>\n        </span>\n      </span>\n\n      <span>{children}</span>\n    </label>\n  );\n}\n"],"names":["Switch","props","internalId","useId","id","name","className","initialChecked","disabled","width","onChange","tabIndex","children","checked","setValue","useValue","jsxs","clsx","jsx"],"mappings":";;;;;AAUO,SAASA,EAAOC,GAAoB;AACzC,QAAMC,IAAaC,EAAA,GAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,WAAAE;AAAA,IACA,SAASC;AAAA,IACT,UAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,UAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,EAAA,IACEX,GAEE,EAAE,OAAOY,GAAS,UAAAC,EAAA,IAAaC,EAAkB;AAAA,IACrD,cAAcR;AAAA,IACd,MAAAF;AAAA,IACA,UAAAK;AAAA,EAAA,CACD;AAED,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKX,GAAW,yCAAyC;AAAA,QAClE,WAAW,CAACA,GAAW,SAAS,OAAO;AAAA,QACvC,iBAAiB,CAACA,GAAW,SAAS,OAAO;AAAA,QAC7C,aAAaE;AAAA,QACb,kBAAkB,CAACA;AAAA,MAAA,CACpB;AAAA,MACD,eAAY;AAAA,MAEZ,UAAA;AAAA,QAAA,gBAAAQ,EAAC,QAAA,EAAK,WAAU,YACd,UAAA;AAAA,UAAA,gBAAAE;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,MAAAb;AAAA,cACA,UAAAM;AAAA,cACA,SAAAE;AAAA,cACA,UAAAL;AAAA,cACA,MAAK;AAAA,cACL,WAAU;AAAA,cACV,UAAU,MAAM;AACd,gBAAKA,KACHM,EAAS,CAACD,CAAO;AAAA,cAErB;AAAA,cACA,aAAU;AAAA,YAAA;AAAA,UAAA;AAAA,4BAGX,QAAA,EAAK,OAAO,EAAE,QAASJ,IAAQ,IAAK,GAAG,OAAAA,EAAA,GACtC,UAAA,gBAAAS,EAAC,OAAA,EAAI,SAAQ,aAAY,OAAQT,IAAQ,IAAK,GAC5C,4BAAC,KAAA,EACC,UAAA;AAAA,YAAA,gBAAAS,EAAC,UAAA,EAAO,IAAI,IAAI,IAAI,IAAI,GAAG,IAAI,MAAK,0BAAA,CAA0B;AAAA,YAC9D,gBAAAA,EAAC,YAAO,IAAI,IAAI,IAAI,IAAI,GAAG,GAAG,MAAK,yBAAA,CAAyB;AAAA,UAAA,EAAA,CAC9D,GACF,EAAA,CACF;AAAA,QAAA,GACF;AAAA,QAEA,gBAAAA,EAAC,UAAM,UAAAN,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGtB;"}

package/molecules/Forms/TextField.js

@@ -1,5 +1,5 @@
 import { jsx as r, jsxs as o } from "react/jsx-runtime";
-import { c as u } from "../../chunks/index.js";
+import { c as u } from "../../chunks/clsx.js";
 import { useValue as F } from "../../hooks/useValue.js";
 import { useInternalStatus as S } from "../../hooks/useInternalStatus.js";
 import { FormControl as j } from "./FormControl.js";

package/molecules/Forms/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","sources":["../../../lib/molecules/Forms/TextField.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { useValue, type UseValueProps } from '@/hooks/useValue';\nimport { useInternalStatus } from '@/hooks/useInternalStatus';\nimport { FormControl, type FormControlProps } from './FormControl.js';\nimport { Icon, type IconicNames, type IconicTypes } from '@clubmed/trident-icons';\nimport { useId } from 'react';\n\nexport interface TextFieldProps<Value> extends FormControlProps<Value> {\n  description?: string;\n  icon?: IconicNames;\n  iconType?: IconicTypes;\n  errorMessage?: string;\n  dataTestId?: string;\n  formatter?: UseValueProps<Value>['formatter'];\n}\n\nexport const TextField = <Value = string,>(props: TextFieldProps<Value>) => {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    label,\n    value: initialValue,\n    description,\n    validationStatus = 'default',\n    icon,\n    iconType,\n    errorMessage,\n    disabled = false,\n    required = false,\n    hideRequiredStar,\n    className,\n    dataTestId = 'TextField',\n    onChange,\n    formatter,\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<Value>({ name, initialValue, onChange, formatter });\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n\n  return (\n    <FormControl\n      id={id}\n      label={label}\n      className={className}\n      description={description}\n      dataName=\"TextField\"\n      dataTestId={dataTestId}\n      disabled={disabled}\n      required={required}\n      hideRequiredStar={hideRequiredStar}\n      validationStatus={validationStatus}\n      errorMessage={errorMessage}\n    >\n      <div className=\"relative\">\n        <input\n          {...rest}\n          id={id}\n          name={name}\n          disabled={disabled}\n          required={required}\n          value={value as any}\n          onChange={(e) => setValue(e.target.value as Value)}\n          className={classnames(\n            'text-b3 rounded-pill w-full border px-20 py-12 font-normal outline-none',\n            {\n              'border-lightGrey focus:border-black active:border-black':\n                internalStatus === 'default',\n              'ps-[52px]': icon,\n              'pe-[52px]': internalStatus === 'error' || internalStatus === 'success',\n              'bg-white text-black': internalStatus !== 'disabled',\n              'bg-pearl text-grey': internalStatus === 'disabled',\n              'border-red': internalStatus === 'error',\n              'border-green': internalStatus === 'success',\n            },\n          )}\n          aria-label={name}\n        />\n\n        <div\n          className={classnames(\n            'pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12',\n            {\n              'text-grey': internalStatus === 'disabled',\n              'text-red': internalStatus === 'error',\n              'text-green': internalStatus === 'success',\n            },\n          )}\n        >\n          {icon && <Icon name={icon} width=\"24px\" />}\n\n          <span className=\"ms-auto flex gap-x-8\">\n            {internalStatus === 'error' && (\n              <Icon name=\"CrossDefault\" width=\"24px\" type={iconType} />\n            )}\n\n            {internalStatus === 'success' && (\n              <Icon name=\"CheckDefault\" width=\"24px\" type={iconType} />\n            )}\n          </span>\n        </div>\n      </div>\n    </FormControl>\n  );\n};\n"],"names":["TextField","props","internalId","useId","id","name","label","initialValue","description","validationStatus","icon","iconType","errorMessage","disabled","required","hideRequiredStar","className","dataTestId","onChange","formatter","rest","value","setValue","useValue","internalStatus","useInternalStatus","jsx","FormControl","jsxs","e","classnames","Icon"],"mappings":";;;;;;;AAgBO,MAAMA,IAAY,CAAkBC,MAAiC;AAC1E,QAAMC,IAAaC,EAAA,GAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,OAAAE;AAAA,IACA,OAAOC;AAAA,IACP,aAAAC;AAAA,IACA,kBAAAC,IAAmB;AAAA,IACnB,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW;AAAA,IACX,kBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDnB,GAEE,EAAE,OAAAoB,GAAO,UAAAC,EAAA,IAAaC,EAAgB,EAAE,MAAAlB,GAAM,cAAAE,GAAc,UAAAW,GAAU,WAAAC,GAAW,GACjFK,IAAiBC,EAAkB;AAAA,IACvC,YAAYZ;AAAA,IACZ,kBAAAJ;AAAA,EAAA,CACD;AAED,SACE,gBAAAiB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAAvB;AAAA,MACA,OAAAE;AAAA,MACA,WAAAU;AAAA,MACA,aAAAR;AAAA,MACA,UAAS;AAAA,MACT,YAAAS;AAAA,MACA,UAAAJ;AAAA,MACA,UAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,kBAAAN;AAAA,MACA,cAAAG;AAAA,MAEA,UAAA,gBAAAgB,EAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,QAAA,gBAAAF;AAAA,UAAC;AAAA,UAAA;AAAA,YACE,GAAGN;AAAA,YACJ,IAAAhB;AAAA,YACA,MAAAC;AAAA,YACA,UAAAQ;AAAA,YACA,UAAAC;AAAA,YACA,OAAAO;AAAA,YACA,UAAU,CAACQ,MAAMP,EAASO,EAAE,OAAO,KAAc;AAAA,YACjD,WAAWC;AAAA,cACT;AAAA,cACA;AAAA,gBACE,2DACEN,MAAmB;AAAA,gBACrB,aAAad;AAAA,gBACb,aAAac,MAAmB,WAAWA,MAAmB;AAAA,gBAC9D,uBAAuBA,MAAmB;AAAA,gBAC1C,sBAAsBA,MAAmB;AAAA,gBACzC,cAAcA,MAAmB;AAAA,gBACjC,gBAAgBA,MAAmB;AAAA,cAAA;AAAA,YACrC;AAAA,YAEF,cAAYnB;AAAA,UAAA;AAAA,QAAA;AAAA,QAGd,gBAAAuB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWE;AAAA,cACT;AAAA,cACA;AAAA,gBACE,aAAaN,MAAmB;AAAA,gBAChC,YAAYA,MAAmB;AAAA,gBAC/B,cAAcA,MAAmB;AAAA,cAAA;AAAA,YACnC;AAAA,YAGD,UAAA;AAAA,cAAAd,KAAQ,gBAAAgB,EAACK,GAAA,EAAK,MAAMrB,GAAM,OAAM,QAAO;AAAA,cAExC,gBAAAkB,EAAC,QAAA,EAAK,WAAU,wBACb,UAAA;AAAA,gBAAAJ,MAAmB,6BACjBO,GAAA,EAAK,MAAK,gBAAe,OAAM,QAAO,MAAMpB,EAAA,CAAU;AAAA,gBAGxDa,MAAmB,aAClB,gBAAAE,EAACK,GAAA,EAAK,MAAK,gBAAe,OAAM,QAAO,MAAMpB,EAAA,CAAU;AAAA,cAAA,EAAA,CAE3D;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"TextField.js","sources":["../../../lib/molecules/Forms/TextField.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useValue, type UseValueProps } from '@/hooks/useValue';\nimport { useInternalStatus } from '@/hooks/useInternalStatus';\nimport { FormControl, type FormControlProps } from './FormControl.js';\nimport { Icon, type IconicNames, type IconicTypes } from '@clubmed/trident-icons';\nimport { useId } from 'react';\n\nexport interface TextFieldProps<Value> extends FormControlProps<Value> {\n  description?: string;\n  icon?: IconicNames;\n  iconType?: IconicTypes;\n  errorMessage?: string;\n  dataTestId?: string;\n  formatter?: UseValueProps<Value>['formatter'];\n}\n\nexport const TextField = <Value = string,>(props: TextFieldProps<Value>) => {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    label,\n    value: initialValue,\n    description,\n    validationStatus = 'default',\n    icon,\n    iconType,\n    errorMessage,\n    disabled = false,\n    required = false,\n    hideRequiredStar,\n    className,\n    dataTestId = 'TextField',\n    onChange,\n    formatter,\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<Value>({ name, initialValue, onChange, formatter });\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n\n  return (\n    <FormControl\n      id={id}\n      label={label}\n      className={className}\n      description={description}\n      dataName=\"TextField\"\n      dataTestId={dataTestId}\n      disabled={disabled}\n      required={required}\n      hideRequiredStar={hideRequiredStar}\n      validationStatus={validationStatus}\n      errorMessage={errorMessage}\n    >\n      <div className=\"relative\">\n        <input\n          {...rest}\n          id={id}\n          name={name}\n          disabled={disabled}\n          required={required}\n          value={value as any}\n          onChange={(e) => setValue(e.target.value as Value)}\n          className={clsx(\n            'text-b3 rounded-pill w-full border px-20 py-12 font-normal outline-none',\n            {\n              'border-lightGrey focus:border-black active:border-black':\n                internalStatus === 'default',\n              'ps-[52px]': icon,\n              'pe-[52px]': internalStatus === 'error' || internalStatus === 'success',\n              'bg-white text-black': internalStatus !== 'disabled',\n              'bg-pearl text-grey': internalStatus === 'disabled',\n              'border-red': internalStatus === 'error',\n              'border-green': internalStatus === 'success',\n            },\n          )}\n          aria-label={name}\n        />\n\n        <div\n          className={clsx(\n            'pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12',\n            {\n              'text-grey': internalStatus === 'disabled',\n              'text-red': internalStatus === 'error',\n              'text-green': internalStatus === 'success',\n            },\n          )}\n        >\n          {icon && <Icon name={icon} width=\"24px\" />}\n\n          <span className=\"ms-auto flex gap-x-8\">\n            {internalStatus === 'error' && (\n              <Icon name=\"CrossDefault\" width=\"24px\" type={iconType} />\n            )}\n\n            {internalStatus === 'success' && (\n              <Icon name=\"CheckDefault\" width=\"24px\" type={iconType} />\n            )}\n          </span>\n        </div>\n      </div>\n    </FormControl>\n  );\n};\n"],"names":["TextField","props","internalId","useId","id","name","label","initialValue","description","validationStatus","icon","iconType","errorMessage","disabled","required","hideRequiredStar","className","dataTestId","onChange","formatter","rest","value","setValue","useValue","internalStatus","useInternalStatus","jsx","FormControl","jsxs","e","clsx","Icon"],"mappings":";;;;;;;AAgBO,MAAMA,IAAY,CAAkBC,MAAiC;AAC1E,QAAMC,IAAaC,EAAA,GAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,OAAAE;AAAA,IACA,OAAOC;AAAA,IACP,aAAAC;AAAA,IACA,kBAAAC,IAAmB;AAAA,IACnB,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW;AAAA,IACX,kBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDnB,GAEE,EAAE,OAAAoB,GAAO,UAAAC,EAAA,IAAaC,EAAgB,EAAE,MAAAlB,GAAM,cAAAE,GAAc,UAAAW,GAAU,WAAAC,GAAW,GACjFK,IAAiBC,EAAkB;AAAA,IACvC,YAAYZ;AAAA,IACZ,kBAAAJ;AAAA,EAAA,CACD;AAED,SACE,gBAAAiB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAAvB;AAAA,MACA,OAAAE;AAAA,MACA,WAAAU;AAAA,MACA,aAAAR;AAAA,MACA,UAAS;AAAA,MACT,YAAAS;AAAA,MACA,UAAAJ;AAAA,MACA,UAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,kBAAAN;AAAA,MACA,cAAAG;AAAA,MAEA,UAAA,gBAAAgB,EAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,QAAA,gBAAAF;AAAA,UAAC;AAAA,UAAA;AAAA,YACE,GAAGN;AAAA,YACJ,IAAAhB;AAAA,YACA,MAAAC;AAAA,YACA,UAAAQ;AAAA,YACA,UAAAC;AAAA,YACA,OAAAO;AAAA,YACA,UAAU,CAACQ,MAAMP,EAASO,EAAE,OAAO,KAAc;AAAA,YACjD,WAAWC;AAAA,cACT;AAAA,cACA;AAAA,gBACE,2DACEN,MAAmB;AAAA,gBACrB,aAAad;AAAA,gBACb,aAAac,MAAmB,WAAWA,MAAmB;AAAA,gBAC9D,uBAAuBA,MAAmB;AAAA,gBAC1C,sBAAsBA,MAAmB;AAAA,gBACzC,cAAcA,MAAmB;AAAA,gBACjC,gBAAgBA,MAAmB;AAAA,cAAA;AAAA,YACrC;AAAA,YAEF,cAAYnB;AAAA,UAAA;AAAA,QAAA;AAAA,QAGd,gBAAAuB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWE;AAAA,cACT;AAAA,cACA;AAAA,gBACE,aAAaN,MAAmB;AAAA,gBAChC,YAAYA,MAAmB;AAAA,gBAC/B,cAAcA,MAAmB;AAAA,cAAA;AAAA,YACnC;AAAA,YAGD,UAAA;AAAA,cAAAd,KAAQ,gBAAAgB,EAACK,GAAA,EAAK,MAAMrB,GAAM,OAAM,QAAO;AAAA,cAExC,gBAAAkB,EAAC,QAAA,EAAK,WAAU,wBACb,UAAA;AAAA,gBAAAJ,MAAmB,6BACjBO,GAAA,EAAK,MAAK,gBAAe,OAAM,QAAO,MAAMpB,EAAA,CAAU;AAAA,gBAGxDa,MAAmB,aAClB,gBAAAE,EAACK,GAAA,EAAK,MAAK,gBAAe,OAAM,QAAO,MAAMpB,EAAA,CAAU;AAAA,cAAA,EAAA,CAE3D;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/molecules/HamburgerIcon.js

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import { c as e } from "../chunks/index.js";
+import { c as e } from "../chunks/clsx.js";
 const c = ({
   className: a,
   isActive: r = !1,

package/molecules/HamburgerIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"HamburgerIcon.js","sources":["../../lib/molecules/HamburgerIcon.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport type { ComponentPropsWithoutRef, FunctionComponent } from 'react';\n\ninterface Props extends ComponentPropsWithoutRef<'span'> {\n  isActive?: boolean;\n}\n\nexport const HamburgerIcon: FunctionComponent<Props> = ({\n  className,\n  isActive = false,\n  ...attrs\n}) => {\n  const before = classnames(\n    'before:absolute before:left-0 before:top-0 before:block before:h-2 before:w-24 before:bg-current before:opacity-100 before:transition-transform before:duration-500 before:content-[\"\"] before:cursor-pointer',\n    { 'before:translate-y-[-6px]': !isActive, 'before:translate-y-0 before:rotate-45': isActive },\n  );\n\n  const after = classnames(\n    'after:absolute after:left-0 after:top-0 after:block after:h-2 after:w-24 after:bg-current after:opacity-100 after:transition-transform after:duration-500 after:content-[\"\"] after:cursor-pointer',\n    { 'after:translate-y-[6px]': !isActive, 'after:translate-y-0 after:-rotate-45': isActive },\n  );\n\n  return (\n    <span\n      data-name=\"HamburgerIcon\"\n      {...attrs}\n      className={classnames(\n        'menu-icon cursor-pointer',\n        'color-current relative isolate shrink-0 h-24 w-24 block',\n        className,\n      )}\n      data-testid={isActive ? 'HamburgerIcon-active' : 'HamburgerIcon'}\n    >\n      <span\n        className={classnames(\n          'absolute left-1/2 top-1/2 block h-2 w-24 -translate-x-1/2 -translate-y-1/2 transition-[background] duration-500 cursor-pointer',\n          { 'bg-current': !isActive, 'bg-transparent': isActive },\n          before,\n          after,\n        )}\n      />\n    </span>\n  );\n};\n"],"names":["HamburgerIcon","className","isActive","attrs","before","classnames","after","jsx"],"mappings":";;AAOO,MAAMA,IAA0C,CAAC;AAAA,EACtD,WAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,GAAGC;AACL,MAAM;AACJ,QAAMC,IAASC;AAAA,IACb;AAAA,IACA,EAAE,6BAA6B,CAACH,GAAU,yCAAyCA,EAAA;AAAA,EAAS,GAGxFI,IAAQD;AAAA,IACZ;AAAA,IACA,EAAE,2BAA2B,CAACH,GAAU,wCAAwCA,EAAA;AAAA,EAAS;AAG3F,SACE,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACT,GAAGJ;AAAA,MACJ,WAAWE;AAAA,QACT;AAAA,QACA;AAAA,QACAJ;AAAA,MAAA;AAAA,MAEF,eAAaC,IAAW,yBAAyB;AAAA,MAEjD,UAAA,gBAAAK;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWF;AAAA,YACT;AAAA,YACA,EAAE,cAAc,CAACH,GAAU,kBAAkBA,EAAA;AAAA,YAC7CE;AAAA,YACAE;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"HamburgerIcon.js","sources":["../../lib/molecules/HamburgerIcon.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { ComponentPropsWithoutRef, FunctionComponent } from 'react';\n\ninterface Props extends ComponentPropsWithoutRef<'span'> {\n  isActive?: boolean;\n}\n\nexport const HamburgerIcon: FunctionComponent<Props> = ({\n  className,\n  isActive = false,\n  ...attrs\n}) => {\n  const before = clsx(\n    'before:absolute before:left-0 before:top-0 before:block before:h-2 before:w-24 before:bg-current before:opacity-100 before:transition-transform before:duration-500 before:content-[\"\"] before:cursor-pointer',\n    { 'before:translate-y-[-6px]': !isActive, 'before:translate-y-0 before:rotate-45': isActive },\n  );\n\n  const after = clsx(\n    'after:absolute after:left-0 after:top-0 after:block after:h-2 after:w-24 after:bg-current after:opacity-100 after:transition-transform after:duration-500 after:content-[\"\"] after:cursor-pointer',\n    { 'after:translate-y-[6px]': !isActive, 'after:translate-y-0 after:-rotate-45': isActive },\n  );\n\n  return (\n    <span\n      data-name=\"HamburgerIcon\"\n      {...attrs}\n      className={clsx(\n        'menu-icon cursor-pointer',\n        'color-current relative isolate shrink-0 h-24 w-24 block',\n        className,\n      )}\n      data-testid={isActive ? 'HamburgerIcon-active' : 'HamburgerIcon'}\n    >\n      <span\n        className={clsx(\n          'absolute left-1/2 top-1/2 block h-2 w-24 -translate-x-1/2 -translate-y-1/2 transition-[background] duration-500 cursor-pointer',\n          { 'bg-current': !isActive, 'bg-transparent': isActive },\n          before,\n          after,\n        )}\n      />\n    </span>\n  );\n};\n"],"names":["HamburgerIcon","className","isActive","attrs","before","clsx","after","jsx"],"mappings":";;AAOO,MAAMA,IAA0C,CAAC;AAAA,EACtD,WAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,GAAGC;AACL,MAAM;AACJ,QAAMC,IAASC;AAAA,IACb;AAAA,IACA,EAAE,6BAA6B,CAACH,GAAU,yCAAyCA,EAAA;AAAA,EAAS,GAGxFI,IAAQD;AAAA,IACZ;AAAA,IACA,EAAE,2BAA2B,CAACH,GAAU,wCAAwCA,EAAA;AAAA,EAAS;AAG3F,SACE,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACT,GAAGJ;AAAA,MACJ,WAAWE;AAAA,QACT;AAAA,QACA;AAAA,QACAJ;AAAA,MAAA;AAAA,MAEF,eAAaC,IAAW,yBAAyB;AAAA,MAEjD,UAAA,gBAAAK;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWF;AAAA,YACT;AAAA,YACA,EAAE,cAAc,CAACH,GAAU,kBAAkBA,EAAA;AAAA,YAC7CE;AAAA,YACAE;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}

package/molecules/Link.js

@@ -1,37 +1,37 @@
 import { jsxs as t, jsx as c } from "react/jsx-runtime";
-import { c as a } from "../chunks/index.js";
+import { c as e } from "../chunks/clsx.js";
 import { Icon as u } from "@clubmed/trident-icons";
 const j = ({
   label: n,
   icon: s,
   component: o = "a",
   iconType: m,
-  underlined: e = !0,
+  underlined: a = !0,
   className: l,
   inert: p,
   ...d
 }) => {
-  const r = n.lastIndexOf(" "), i = r === -1 ? n.length : r, h = n.substring(0, 1), x = n.substring(1, i + 1), g = n.substring(i);
+  const r = n.lastIndexOf(" "), i = r === -1 ? n.length : r, x = n.substring(0, 1), h = n.substring(1, i + 1), g = n.substring(i);
   return /* @__PURE__ */ t(
     p ? "span" : o,
     {
-      className: a(
+      className: e(
         "text-b3 decoration-none link-container cursor-pointer text-inherit",
         l
       ),
       "data-name": "Link",
       ...d,
       children: [
-        /* @__PURE__ */ c("span", { className: a({ "link-underline": e }), children: h }),
+        /* @__PURE__ */ c("span", { className: e({ "link-underline": a }), children: x }),
         /* @__PURE__ */ t(
           "span",
           {
-            className: a("hoverable", {
+            className: e("hoverable", {
               "has-icon": s,
-              "link-underline": e
+              "link-underline": a
             }),
             children: [
-              x,
+              h,
               /* @__PURE__ */ t("span", { className: "inline-block", children: [
                 g,
                 s && /* @__PURE__ */ c(

package/molecules/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sources":["../../lib/molecules/Link.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport type { AnchorHTMLAttributes, FunctionComponent, PropsWithChildren } from 'react';\n\nimport { Icon, type IconicNames, type IconicTypes } from '@clubmed/trident-icons';\n\ninterface LinkProps<T extends HTMLAnchorElement = HTMLAnchorElement>\n  extends AnchorHTMLAttributes<T> {\n  /**\n   * Label text\n   */\n  label: string;\n  /**\n   * Icon name\n   */\n  icon?: IconicNames;\n  iconType?: IconicTypes;\n  /**\n   * Underlined\n   */\n  underlined?: boolean;\n  /**\n   * Additional class names\n   */\n  className?: string;\n  /**\n   * Is the link inert (not itself clickable but part of a clickable element)\n   */\n  inert?: boolean;\n  /**\n   * Allow giving a custom component\n   */\n  component?: FunctionComponent<PropsWithChildren<any>> | string;\n}\n\nexport const Link: FunctionComponent<LinkProps> = ({\n  label,\n  icon,\n  component = 'a',\n  iconType,\n  underlined = true,\n  className,\n  inert,\n  ...anchorAttrs\n}) => {\n  const lastSpace = label.lastIndexOf(' ');\n  const lastIndex = lastSpace === -1 ? label.length : lastSpace;\n\n  const first = label.substring(0, 1);\n  const middle = label.substring(1, lastIndex + 1);\n  const last = label.substring(lastIndex);\n  const Cmp = component as FunctionComponent<PropsWithChildren>;\n\n  const TagName = inert ? 'span' : Cmp;\n\n  return (\n    <TagName\n      className={classnames(\n        'text-b3 decoration-none link-container cursor-pointer text-inherit',\n        className,\n      )}\n      data-name=\"Link\"\n      {...anchorAttrs}\n    >\n      <span className={classnames({ 'link-underline': underlined })}>{first}</span>\n      <span\n        className={classnames('hoverable', {\n          'has-icon': icon,\n          'link-underline': underlined,\n        })}\n      >\n        {middle}\n        <span className=\"inline-block\">\n          {last}\n          {icon && (\n            <Icon\n              name={icon}\n              iconType={iconType}\n              width=\"24px\"\n              style={{ marginInlineStart: '8px' }}\n            />\n          )}\n        </span>\n      </span>\n    </TagName>\n  );\n};\n"],"names":["Link","label","icon","component","iconType","underlined","className","inert","anchorAttrs","lastSpace","lastIndex","first","middle","last","jsxs","classnames","jsx","Icon"],"mappings":";;;AAkCO,MAAMA,IAAqC,CAAC;AAAA,EACjD,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAYR,EAAM,YAAY,GAAG,GACjCS,IAAYD,MAAc,KAAKR,EAAM,SAASQ,GAE9CE,IAAQV,EAAM,UAAU,GAAG,CAAC,GAC5BW,IAASX,EAAM,UAAU,GAAGS,IAAY,CAAC,GACzCG,IAAOZ,EAAM,UAAUS,CAAS;AAKtC,SACE,gBAAAI;AAAA,IAHcP,IAAQ,SAFZJ;AAAA,IAKT;AAAA,MACC,WAAWY;AAAA,QACT;AAAA,QACAT;AAAA,MAAA;AAAA,MAEF,aAAU;AAAA,MACT,GAAGE;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAQ,EAAC,QAAA,EAAK,WAAWD,EAAW,EAAE,kBAAkBV,GAAY,GAAI,UAAAM,GAAM;AAAA,QACtE,gBAAAG;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC,EAAW,aAAa;AAAA,cACjC,YAAYb;AAAA,cACZ,kBAAkBG;AAAA,YAAA,CACnB;AAAA,YAEA,UAAA;AAAA,cAAAO;AAAA,cACD,gBAAAE,EAAC,QAAA,EAAK,WAAU,gBACb,UAAA;AAAA,gBAAAD;AAAA,gBACAX,KACC,gBAAAc;AAAA,kBAACC;AAAA,kBAAA;AAAA,oBACC,MAAMf;AAAA,oBACN,UAAAE;AAAA,oBACA,OAAM;AAAA,oBACN,OAAO,EAAE,mBAAmB,MAAA;AAAA,kBAAM;AAAA,gBAAA;AAAA,cACpC,EAAA,CAEJ;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Link.js","sources":["../../lib/molecules/Link.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { AnchorHTMLAttributes, FunctionComponent, PropsWithChildren } from 'react';\n\nimport { Icon, type IconicNames, type IconicTypes } from '@clubmed/trident-icons';\n\ninterface LinkProps<T extends HTMLAnchorElement = HTMLAnchorElement>\n  extends AnchorHTMLAttributes<T> {\n  /**\n   * Label text\n   */\n  label: string;\n  /**\n   * Icon name\n   */\n  icon?: IconicNames;\n  iconType?: IconicTypes;\n  /**\n   * Underlined\n   */\n  underlined?: boolean;\n  /**\n   * Additional class names\n   */\n  className?: string;\n  /**\n   * Is the link inert (not itself clickable but part of a clickable element)\n   */\n  inert?: boolean;\n  /**\n   * Allow giving a custom component\n   */\n  component?: FunctionComponent<PropsWithChildren<any>> | string;\n}\n\nexport const Link: FunctionComponent<LinkProps> = ({\n  label,\n  icon,\n  component = 'a',\n  iconType,\n  underlined = true,\n  className,\n  inert,\n  ...anchorAttrs\n}) => {\n  const lastSpace = label.lastIndexOf(' ');\n  const lastIndex = lastSpace === -1 ? label.length : lastSpace;\n\n  const first = label.substring(0, 1);\n  const middle = label.substring(1, lastIndex + 1);\n  const last = label.substring(lastIndex);\n  const Cmp = component as FunctionComponent<PropsWithChildren>;\n\n  const TagName = inert ? 'span' : Cmp;\n\n  return (\n    <TagName\n      className={clsx(\n        'text-b3 decoration-none link-container cursor-pointer text-inherit',\n        className,\n      )}\n      data-name=\"Link\"\n      {...anchorAttrs}\n    >\n      <span className={clsx({ 'link-underline': underlined })}>{first}</span>\n      <span\n        className={clsx('hoverable', {\n          'has-icon': icon,\n          'link-underline': underlined,\n        })}\n      >\n        {middle}\n        <span className=\"inline-block\">\n          {last}\n          {icon && (\n            <Icon\n              name={icon}\n              iconType={iconType}\n              width=\"24px\"\n              style={{ marginInlineStart: '8px' }}\n            />\n          )}\n        </span>\n      </span>\n    </TagName>\n  );\n};\n"],"names":["Link","label","icon","component","iconType","underlined","className","inert","anchorAttrs","lastSpace","lastIndex","first","middle","last","jsxs","clsx","jsx","Icon"],"mappings":";;;AAkCO,MAAMA,IAAqC,CAAC;AAAA,EACjD,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAYR,EAAM,YAAY,GAAG,GACjCS,IAAYD,MAAc,KAAKR,EAAM,SAASQ,GAE9CE,IAAQV,EAAM,UAAU,GAAG,CAAC,GAC5BW,IAASX,EAAM,UAAU,GAAGS,IAAY,CAAC,GACzCG,IAAOZ,EAAM,UAAUS,CAAS;AAKtC,SACE,gBAAAI;AAAA,IAHcP,IAAQ,SAFZJ;AAAA,IAKT;AAAA,MACC,WAAWY;AAAA,QACT;AAAA,QACAT;AAAA,MAAA;AAAA,MAEF,aAAU;AAAA,MACT,GAAGE;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAQ,EAAC,QAAA,EAAK,WAAWD,EAAK,EAAE,kBAAkBV,GAAY,GAAI,UAAAM,GAAM;AAAA,QAChE,gBAAAG;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC,EAAK,aAAa;AAAA,cAC3B,YAAYb;AAAA,cACZ,kBAAkBG;AAAA,YAAA,CACnB;AAAA,YAEA,UAAA;AAAA,cAAAO;AAAA,cACD,gBAAAE,EAAC,QAAA,EAAK,WAAU,gBACb,UAAA;AAAA,gBAAAD;AAAA,gBACAX,KACC,gBAAAc;AAAA,kBAACC;AAAA,kBAAA;AAAA,oBACC,MAAMf;AAAA,oBACN,UAAAE;AAAA,oBACA,OAAM;AAAA,oBACN,OAAO,EAAE,mBAAmB,MAAA;AAAA,kBAAM;AAAA,gBAAA;AAAA,cACpC,EAAA,CAEJ;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/molecules/Loader.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as l, jsxs as c } from "react/jsx-runtime";
 import { Backdrop as t } from "./Backdrop.js";
-import { c as m } from "../chunks/index.js";
+import { c as m } from "../chunks/clsx.js";
 const r = /* @__PURE__ */ c("svg", { viewBox: "0 0 140 140", width: 140, children: [
   /* @__PURE__ */ l("defs", { children: /* @__PURE__ */ l(
     "path",
@@ -33,7 +33,7 @@ const r = /* @__PURE__ */ c("svg", { viewBox: "0 0 140 140", width: 140, childre
       )
     ] })
   ] })
-] }), o = ({ isVisible: a, label: e }) => /* @__PURE__ */ l(t, { isVisible: a, sweep: !0, children: /* @__PURE__ */ c("div", { className: "flex flex-col items-center", role: "alert", children: [
+] }), n = ({ isVisible: a, label: e }) => /* @__PURE__ */ l(t, { isVisible: a, sweep: !0, children: /* @__PURE__ */ c("div", { className: "flex flex-col items-center", role: "alert", children: [
   /* @__PURE__ */ l(
     "div",
     {
@@ -61,6 +61,6 @@ const r = /* @__PURE__ */ c("svg", { viewBox: "0 0 140 140", width: 140, childre
   )
 ] }) });
 export {
-  o as Loader
+  n as Loader
 };
 //# sourceMappingURL=Loader.js.map

package/molecules/Loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.js","sources":["../../lib/molecules/Loader.tsx"],"sourcesContent":["'use client';\nimport type { FunctionComponent } from 'react';\n\nimport { Backdrop } from './Backdrop';\nimport classnames from 'classnames';\n\ninterface LoaderProps {\n  isVisible?: boolean;\n  label?: string;\n}\n\nconst loaderSVG = (\n  <svg viewBox=\"0 0 140 140\" width={140}>\n    <defs>\n      <path\n        id=\"a\"\n        d=\"m70 74.1-9.6 9.6 9.6 9.5 9.5-9.5L70 74Zm6.6-70.7c-.7-2.7-6.9 1.1-20.1 13 5.3 5.8 7.9 2.5 12.1 1 3.4 6.4 4.8 35.4-17.3 44 .6-29.1.9-60.4.9-60.4a1 1 0 0 0-1.3-1c-6.1.8-17 11.6-25.3 20.6 4.6 7.5 10.4.8 15-1.1 0 1.2-1 22.8-.6 44.7C17.3 66 21 19.5 22.2 13.6 22.8 8.9 7.6 19.3 0 26.4c2.4 4.3 5.7 3.4 10 1.8C8.3 49 23 67.9 40 67.5c.6 21.4 2.9 42.2 9 43.7 1 .2 1.6-21.8 2-46.1C92 52.4 76.5 3.4 76.5 3.4\"\n      />\n    </defs>\n    <g fill=\"none\" fillRule=\"evenodd\" transform=\"translate(27 14)\">\n      <mask id=\"b\" fill=\"#fff\">\n        <use xlinkHref=\"#a\" />\n      </mask>\n      <g mask=\"url(#b)\">\n        <path\n          fill=\"#1E2643\"\n          fillRule=\"nonzero\"\n          d=\"M-83.1-23s6.7 3 11.2 3c4.6 0 6.7-3 11.3-3 4.5 0 6.7 3 11.2 3 4.6 0 6.7-3 11.3-3 4.5 0 6.7 3 11.2 3C.2-20 2.3-23 7-23c4.5 0 6.7 3 11.2 3 4.6 0 6.7-3 11.3-3 4.5 0 6.7 3 11.2 3 4.6 0 6.7-3 11.3-3 4.5 0 6.7 3 11.2 3 4.6 0 11.3-3 11.3-3v138H-83V-23Z\"\n          className=\"animate-wave\"\n        />\n        <path\n          fill=\"#1E2643\"\n          fillRule=\"nonzero\"\n          d=\"m70 74.1.7-.7-.7-.7-.7.7.7.7Zm-9.6 9.6-.7-.7-.7.7.7.7.7-.7Zm9.6 9.5-.7.7.7.7.7-.7-.7-.7Zm9.5-9.5.7.7.7-.7-.7-.7-.7.7Zm-23-67.3-.7-.7-.7.6.7.8.7-.7Zm12.1 1 1-.5-.5-.8-.8.3.3 1Zm-17.3 44h-1V63l1.4-.6-.4-1ZM52.2 1h1-1Zm-1.3-1v1h.2L51 0ZM25.6 20.6l-.7-.7-.5.5.4.7.8-.5Zm15-1.1h1V18l-1.4.5.4 1ZM40 64.2l.1 1h1v-1h-1ZM22.2 13.6l1 .2-1-.2ZM0 26.4l-.7-.8-.6.6.4.7.9-.5Zm10 1.8h1v-1.5l-1.4.6.3.9Zm30 39.3h1v-1h-1v1Zm9 43.7.3-1-.2 1Zm2-46.1-.2-1-.7.2v.8h1Zm18.2 8.3L59.7 83l1.4 1.4 9.6-9.6-1.4-1.4Zm-9.6 11 9.6 9.5 1.4-1.4L61 83l-1.4 1.4Zm11 9.5 9.5-9.5-1.4-1.4-9.5 9.5 1.4 1.4Zm9.5-11-9.5-9.5-1.4 1.4 9.5 9.6 1.4-1.4ZM77.6 3.2a2 2 0 0 0-1-1.3c-.6-.3-1.2-.3-1.8-.2-1 .2-2.4 1-4.1 2-3.4 2.1-8.2 6.1-14.9 12l1.4 1.6c6.6-6 11.4-9.9 14.6-12a11 11 0 0 1 3.4-1.6h.4l2-.5Zm-21.8 14c1.3 1.5 2.6 2.5 3.8 3a6 6 0 0 0 3.5.5c1-.1 2-.6 3-1 1-.5 1.9-1 2.9-1.3l-.7-1.9c-1.1.4-2.2 1-3 1.4l-2.5.9a4 4 0 0 1-2.4-.4 12 12 0 0 1-3.2-2.6l-1.4 1.4Zm12 .7c.7 1.5 1.4 4.3 1.7 8 .2 3.7 0 8-1 12.6-2 8.9-7 18-17.6 22.2l.8 1.8a31.3 31.3 0 0 0 18.8-23.6 51 51 0 0 0 1-13.1c-.3-3.8-1-7-2-8.8l-1.7 1ZM52.3 61.5a5227.3 5227.3 0 0 0 .9-60.1V1h-2v1.3a4268.6 4268.6 0 0 1-1 59l2 .1ZM53.2 1c0-.3 0-.6-.2-.9l-1.8 1h2ZM53 .1a2 2 0 0 0-.6-.7L51.2 1 53 .1Zm-.6-.7a2 2 0 0 0-.9-.4l-.3 2 1.2-1.6Zm-.9-.4a2 2 0 0 0-1 0l.7 2 .3-2Zm-.8 0C49-.6 47 .3 45 1.6s-4.3 3-6.6 5c-4.5 4-9.3 8.9-13.5 13.4l1.5 1.4c4.1-4.5 8.9-9.4 13.3-13.3C42 6 44.1 4.4 46 3.2c2-1.3 3.7-2 5-2.2l-.3-2Zm-26 22c1.3 2.1 2.7 3.3 4.3 3.8a7 7 0 0 0 4.5-.3c1.4-.5 2.8-1.4 4-2.1 1.3-.8 2.4-1.6 3.5-2l-.8-1.9-3.7 2.2c-1.3.7-2.5 1.5-3.7 2-1.2.4-2.3.5-3.2.2-1-.3-2-1.1-3.1-2.8l-1.7 1Zm15-1.5c0 1.1-1.2 22.8-.7 44.7h2c-.5-22 .6-43.4.6-44.7h-2Zm.2 43.7c-5.2.4-9-2-11.6-6-2.7-4-4.3-9.6-5.2-15.6-1.8-12-.5-25 .1-27.8l-2-.4c-.6 3-1.9 16.3-.1 28.5.9 6.1 2.6 12.1 5.5 16.5a14 14 0 0 0 13.5 6.8l-.2-2ZM23.2 13.7l-.1-1.2a2 2 0 0 0-1-1c-.7-.2-1.6 0-2.3.1a28 28 0 0 0-6.2 3.1 106 106 0 0 0-14.3 11L.7 27c3.7-3.5 9.4-7.8 14-10.7a26.4 26.4 0 0 1 6.4-3h.3l-.2-.1v.2l2 .2ZM-.8 27c.6 1.1 1.3 2 2.2 2.6a5 5 0 0 0 2.8 1c2 .1 4-.6 6-1.4l-.6-1.8c-2.1.8-3.8 1.3-5.2 1.2-.7 0-1.3-.2-1.9-.6-.5-.4-1-1-1.6-2l-1.8 1Zm9.6 1a41.8 41.8 0 0 0 8.4 28.3c5.7 7.5 14 12.3 22.9 12v-2a26 26 0 0 1-21.3-11.2 40 40 0 0 1-8-27H9ZM39 67.4c.3 10.7 1 21.3 2.5 29.5.7 4 1.6 7.5 2.7 10.1 1.1 2.6 2.6 4.6 4.7 5l.4-2c-1-.2-2.2-1.3-3.2-3.8-1-2.3-2-5.7-2.7-9.7-1.4-8-2-18.5-2.4-29.1h-2Zm9.8 44.6c.7.2 1.1-.3 1.2-.4l.2-.4.2-.9.3-2.8.5-10.2.9-32.3h-2a1859.2 1859.2 0 0 1-1.4 42.3 38 38 0 0 1-.4 3.2c0-.1.4-.6 1-.4l-.5 2Zm2.6-46a39.2 39.2 0 0 0 21.8-15.4 46 46 0 0 0 7-21.1 73 73 0 0 0-2.6-25.9l-.1-.4v-.1l-1 .2-1 .3a14.2 14.2 0 0 1 .2.6 51 51 0 0 1 1.6 7.1 71 71 0 0 1 .9 18A37.2 37.2 0 0 1 50.8 64l.6 2Z\"\n          mask=\"url(#a)\"\n        />\n      </g>\n    </g>\n  </svg>\n);\n\nexport const Loader: FunctionComponent<LoaderProps> = ({ isVisible, label }) => {\n  return (\n    <Backdrop isVisible={isVisible} sweep>\n      <div className=\"flex flex-col items-center\" role=\"alert\">\n        <div\n          className={classnames(\n            `relative will-change-[transform,opacity] transition-[transform,opacity] duration-500 ease-out`,\n            {\n              'translate-x-0 opacity-100 ': isVisible,\n              'opacity-0 translate-x-[600px] ': !isVisible,\n            },\n          )}\n          style={{\n            // the masks prevent subpixel flickering on transitions (and covid), please don't remove them\n            maskImage:\n              \"url(\\\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Cellipse cx='1' cy='1' rx='1' ry='1'/%3E%3C/svg%3E\\\")\",\n            WebkitMaskImage:\n              \"url(\\\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Cellipse cx='1' cy='1' rx='1' ry='1'/%3E%3C/svg%3E\\\")\",\n          }}\n        >\n          {loaderSVG}\n        </div>\n        <div\n          className={\n            'text-b3 mx-auto max-w-[320px] px-20 text-center will-change-[transform,opacity] transition-[transform,opacity] duration-500 ease-out ' +\n            (isVisible ? 'translate-x-0 opacity-100 ' : 'opacity-0 translate-x-[300px] ')\n          }\n        >\n          {label}\n        </div>\n      </div>\n    </Backdrop>\n  );\n};\n"],"names":["loaderSVG","jsxs","jsx","Loader","isVisible","label","Backdrop","classnames"],"mappings":";;;;AAWA,MAAMA,IACJ,gBAAAC,EAAC,OAAA,EAAI,SAAQ,eAAc,OAAO,KAChC,UAAA;AAAA,EAAA,gBAAAC,EAAC,QAAA,EACC,UAAA,gBAAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH,GAAE;AAAA,IAAA;AAAA,EAAA,GAEN;AAAA,oBACC,KAAA,EAAE,MAAK,QAAO,UAAS,WAAU,WAAU,oBAC1C,UAAA;AAAA,IAAA,gBAAAA,EAAC,QAAA,EAAK,IAAG,KAAI,MAAK,QAChB,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,KAAA,CAAK,EAAA,CACtB;AAAA,IACA,gBAAAD,EAAC,KAAA,EAAE,MAAK,WACN,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,UAAS;AAAA,UACT,GAAE;AAAA,UACF,WAAU;AAAA,QAAA;AAAA,MAAA;AAAA,MAEZ,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,UAAS;AAAA,UACT,GAAE;AAAA,UACF,MAAK;AAAA,QAAA;AAAA,MAAA;AAAA,IACP,EAAA,CACF;AAAA,EAAA,EAAA,CACF;AAAA,GACF,GAGWC,IAAyC,CAAC,EAAE,WAAAC,GAAW,OAAAC,QAEhE,gBAAAH,EAACI,GAAA,EAAS,WAAAF,GAAsB,OAAK,IACnC,4BAAC,OAAA,EAAI,WAAU,8BAA6B,MAAK,SAC/C,UAAA;AAAA,EAAA,gBAAAF;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWK;AAAA,QACT;AAAA,QACA;AAAA,UACE,8BAA8BH;AAAA,UAC9B,kCAAkC,CAACA;AAAA,QAAA;AAAA,MACrC;AAAA,MAEF,OAAO;AAAA;AAAA,QAEL,WACE;AAAA,QACF,iBACE;AAAA,MAAA;AAAA,MAGH,UAAAJ;AAAA,IAAA;AAAA,EAAA;AAAA,EAEH,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WACE,2IACCE,IAAY,+BAA+B;AAAA,MAG7C,UAAAC;AAAA,IAAA;AAAA,EAAA;AACH,EAAA,CACF,EAAA,CACF;"}
+{"version":3,"file":"Loader.js","sources":["../../lib/molecules/Loader.tsx"],"sourcesContent":["'use client';\nimport type { FunctionComponent } from 'react';\n\nimport { Backdrop } from './Backdrop';\nimport clsx from 'clsx';\n\ninterface LoaderProps {\n  isVisible?: boolean;\n  label?: string;\n}\n\nconst loaderSVG = (\n  <svg viewBox=\"0 0 140 140\" width={140}>\n    <defs>\n      <path\n        id=\"a\"\n        d=\"m70 74.1-9.6 9.6 9.6 9.5 9.5-9.5L70 74Zm6.6-70.7c-.7-2.7-6.9 1.1-20.1 13 5.3 5.8 7.9 2.5 12.1 1 3.4 6.4 4.8 35.4-17.3 44 .6-29.1.9-60.4.9-60.4a1 1 0 0 0-1.3-1c-6.1.8-17 11.6-25.3 20.6 4.6 7.5 10.4.8 15-1.1 0 1.2-1 22.8-.6 44.7C17.3 66 21 19.5 22.2 13.6 22.8 8.9 7.6 19.3 0 26.4c2.4 4.3 5.7 3.4 10 1.8C8.3 49 23 67.9 40 67.5c.6 21.4 2.9 42.2 9 43.7 1 .2 1.6-21.8 2-46.1C92 52.4 76.5 3.4 76.5 3.4\"\n      />\n    </defs>\n    <g fill=\"none\" fillRule=\"evenodd\" transform=\"translate(27 14)\">\n      <mask id=\"b\" fill=\"#fff\">\n        <use xlinkHref=\"#a\" />\n      </mask>\n      <g mask=\"url(#b)\">\n        <path\n          fill=\"#1E2643\"\n          fillRule=\"nonzero\"\n          d=\"M-83.1-23s6.7 3 11.2 3c4.6 0 6.7-3 11.3-3 4.5 0 6.7 3 11.2 3 4.6 0 6.7-3 11.3-3 4.5 0 6.7 3 11.2 3C.2-20 2.3-23 7-23c4.5 0 6.7 3 11.2 3 4.6 0 6.7-3 11.3-3 4.5 0 6.7 3 11.2 3 4.6 0 6.7-3 11.3-3 4.5 0 6.7 3 11.2 3 4.6 0 11.3-3 11.3-3v138H-83V-23Z\"\n          className=\"animate-wave\"\n        />\n        <path\n          fill=\"#1E2643\"\n          fillRule=\"nonzero\"\n          d=\"m70 74.1.7-.7-.7-.7-.7.7.7.7Zm-9.6 9.6-.7-.7-.7.7.7.7.7-.7Zm9.6 9.5-.7.7.7.7.7-.7-.7-.7Zm9.5-9.5.7.7.7-.7-.7-.7-.7.7Zm-23-67.3-.7-.7-.7.6.7.8.7-.7Zm12.1 1 1-.5-.5-.8-.8.3.3 1Zm-17.3 44h-1V63l1.4-.6-.4-1ZM52.2 1h1-1Zm-1.3-1v1h.2L51 0ZM25.6 20.6l-.7-.7-.5.5.4.7.8-.5Zm15-1.1h1V18l-1.4.5.4 1ZM40 64.2l.1 1h1v-1h-1ZM22.2 13.6l1 .2-1-.2ZM0 26.4l-.7-.8-.6.6.4.7.9-.5Zm10 1.8h1v-1.5l-1.4.6.3.9Zm30 39.3h1v-1h-1v1Zm9 43.7.3-1-.2 1Zm2-46.1-.2-1-.7.2v.8h1Zm18.2 8.3L59.7 83l1.4 1.4 9.6-9.6-1.4-1.4Zm-9.6 11 9.6 9.5 1.4-1.4L61 83l-1.4 1.4Zm11 9.5 9.5-9.5-1.4-1.4-9.5 9.5 1.4 1.4Zm9.5-11-9.5-9.5-1.4 1.4 9.5 9.6 1.4-1.4ZM77.6 3.2a2 2 0 0 0-1-1.3c-.6-.3-1.2-.3-1.8-.2-1 .2-2.4 1-4.1 2-3.4 2.1-8.2 6.1-14.9 12l1.4 1.6c6.6-6 11.4-9.9 14.6-12a11 11 0 0 1 3.4-1.6h.4l2-.5Zm-21.8 14c1.3 1.5 2.6 2.5 3.8 3a6 6 0 0 0 3.5.5c1-.1 2-.6 3-1 1-.5 1.9-1 2.9-1.3l-.7-1.9c-1.1.4-2.2 1-3 1.4l-2.5.9a4 4 0 0 1-2.4-.4 12 12 0 0 1-3.2-2.6l-1.4 1.4Zm12 .7c.7 1.5 1.4 4.3 1.7 8 .2 3.7 0 8-1 12.6-2 8.9-7 18-17.6 22.2l.8 1.8a31.3 31.3 0 0 0 18.8-23.6 51 51 0 0 0 1-13.1c-.3-3.8-1-7-2-8.8l-1.7 1ZM52.3 61.5a5227.3 5227.3 0 0 0 .9-60.1V1h-2v1.3a4268.6 4268.6 0 0 1-1 59l2 .1ZM53.2 1c0-.3 0-.6-.2-.9l-1.8 1h2ZM53 .1a2 2 0 0 0-.6-.7L51.2 1 53 .1Zm-.6-.7a2 2 0 0 0-.9-.4l-.3 2 1.2-1.6Zm-.9-.4a2 2 0 0 0-1 0l.7 2 .3-2Zm-.8 0C49-.6 47 .3 45 1.6s-4.3 3-6.6 5c-4.5 4-9.3 8.9-13.5 13.4l1.5 1.4c4.1-4.5 8.9-9.4 13.3-13.3C42 6 44.1 4.4 46 3.2c2-1.3 3.7-2 5-2.2l-.3-2Zm-26 22c1.3 2.1 2.7 3.3 4.3 3.8a7 7 0 0 0 4.5-.3c1.4-.5 2.8-1.4 4-2.1 1.3-.8 2.4-1.6 3.5-2l-.8-1.9-3.7 2.2c-1.3.7-2.5 1.5-3.7 2-1.2.4-2.3.5-3.2.2-1-.3-2-1.1-3.1-2.8l-1.7 1Zm15-1.5c0 1.1-1.2 22.8-.7 44.7h2c-.5-22 .6-43.4.6-44.7h-2Zm.2 43.7c-5.2.4-9-2-11.6-6-2.7-4-4.3-9.6-5.2-15.6-1.8-12-.5-25 .1-27.8l-2-.4c-.6 3-1.9 16.3-.1 28.5.9 6.1 2.6 12.1 5.5 16.5a14 14 0 0 0 13.5 6.8l-.2-2ZM23.2 13.7l-.1-1.2a2 2 0 0 0-1-1c-.7-.2-1.6 0-2.3.1a28 28 0 0 0-6.2 3.1 106 106 0 0 0-14.3 11L.7 27c3.7-3.5 9.4-7.8 14-10.7a26.4 26.4 0 0 1 6.4-3h.3l-.2-.1v.2l2 .2ZM-.8 27c.6 1.1 1.3 2 2.2 2.6a5 5 0 0 0 2.8 1c2 .1 4-.6 6-1.4l-.6-1.8c-2.1.8-3.8 1.3-5.2 1.2-.7 0-1.3-.2-1.9-.6-.5-.4-1-1-1.6-2l-1.8 1Zm9.6 1a41.8 41.8 0 0 0 8.4 28.3c5.7 7.5 14 12.3 22.9 12v-2a26 26 0 0 1-21.3-11.2 40 40 0 0 1-8-27H9ZM39 67.4c.3 10.7 1 21.3 2.5 29.5.7 4 1.6 7.5 2.7 10.1 1.1 2.6 2.6 4.6 4.7 5l.4-2c-1-.2-2.2-1.3-3.2-3.8-1-2.3-2-5.7-2.7-9.7-1.4-8-2-18.5-2.4-29.1h-2Zm9.8 44.6c.7.2 1.1-.3 1.2-.4l.2-.4.2-.9.3-2.8.5-10.2.9-32.3h-2a1859.2 1859.2 0 0 1-1.4 42.3 38 38 0 0 1-.4 3.2c0-.1.4-.6 1-.4l-.5 2Zm2.6-46a39.2 39.2 0 0 0 21.8-15.4 46 46 0 0 0 7-21.1 73 73 0 0 0-2.6-25.9l-.1-.4v-.1l-1 .2-1 .3a14.2 14.2 0 0 1 .2.6 51 51 0 0 1 1.6 7.1 71 71 0 0 1 .9 18A37.2 37.2 0 0 1 50.8 64l.6 2Z\"\n          mask=\"url(#a)\"\n        />\n      </g>\n    </g>\n  </svg>\n);\n\nexport const Loader: FunctionComponent<LoaderProps> = ({ isVisible, label }) => {\n  return (\n    <Backdrop isVisible={isVisible} sweep>\n      <div className=\"flex flex-col items-center\" role=\"alert\">\n        <div\n          className={clsx(\n            `relative will-change-[transform,opacity] transition-[transform,opacity] duration-500 ease-out`,\n            {\n              'translate-x-0 opacity-100 ': isVisible,\n              'opacity-0 translate-x-[600px] ': !isVisible,\n            },\n          )}\n          style={{\n            // the masks prevent subpixel flickering on transitions (and covid), please don't remove them\n            maskImage:\n              \"url(\\\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Cellipse cx='1' cy='1' rx='1' ry='1'/%3E%3C/svg%3E\\\")\",\n            WebkitMaskImage:\n              \"url(\\\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Cellipse cx='1' cy='1' rx='1' ry='1'/%3E%3C/svg%3E\\\")\",\n          }}\n        >\n          {loaderSVG}\n        </div>\n        <div\n          className={\n            'text-b3 mx-auto max-w-[320px] px-20 text-center will-change-[transform,opacity] transition-[transform,opacity] duration-500 ease-out ' +\n            (isVisible ? 'translate-x-0 opacity-100 ' : 'opacity-0 translate-x-[300px] ')\n          }\n        >\n          {label}\n        </div>\n      </div>\n    </Backdrop>\n  );\n};\n"],"names":["loaderSVG","jsxs","jsx","Loader","isVisible","label","Backdrop","clsx"],"mappings":";;;;AAWA,MAAMA,IACJ,gBAAAC,EAAC,OAAA,EAAI,SAAQ,eAAc,OAAO,KAChC,UAAA;AAAA,EAAA,gBAAAC,EAAC,QAAA,EACC,UAAA,gBAAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH,GAAE;AAAA,IAAA;AAAA,EAAA,GAEN;AAAA,oBACC,KAAA,EAAE,MAAK,QAAO,UAAS,WAAU,WAAU,oBAC1C,UAAA;AAAA,IAAA,gBAAAA,EAAC,QAAA,EAAK,IAAG,KAAI,MAAK,QAChB,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,KAAA,CAAK,EAAA,CACtB;AAAA,IACA,gBAAAD,EAAC,KAAA,EAAE,MAAK,WACN,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,UAAS;AAAA,UACT,GAAE;AAAA,UACF,WAAU;AAAA,QAAA;AAAA,MAAA;AAAA,MAEZ,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,UAAS;AAAA,UACT,GAAE;AAAA,UACF,MAAK;AAAA,QAAA;AAAA,MAAA;AAAA,IACP,EAAA,CACF;AAAA,EAAA,EAAA,CACF;AAAA,GACF,GAGWC,IAAyC,CAAC,EAAE,WAAAC,GAAW,OAAAC,QAEhE,gBAAAH,EAACI,GAAA,EAAS,WAAAF,GAAsB,OAAK,IACnC,4BAAC,OAAA,EAAI,WAAU,8BAA6B,MAAK,SAC/C,UAAA;AAAA,EAAA,gBAAAF;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWK;AAAA,QACT;AAAA,QACA;AAAA,UACE,8BAA8BH;AAAA,UAC9B,kCAAkC,CAACA;AAAA,QAAA;AAAA,MACrC;AAAA,MAEF,OAAO;AAAA;AAAA,QAEL,WACE;AAAA,QACF,iBACE;AAAA,MAAA;AAAA,MAGH,UAAAJ;AAAA,IAAA;AAAA,EAAA;AAAA,EAEH,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WACE,2IACCE,IAAY,+BAA+B;AAAA,MAG7C,UAAAC;AAAA,IAAA;AAAA,EAAA;AACH,EAAA,CACF,EAAA,CACF;"}

package/molecules/Pagination.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as e, jsxs as s } from "react/jsx-runtime";
-import { c as l } from "../chunks/index.js";
+import { c as l } from "../chunks/clsx.js";
 import { Fragment as k } from "react";
 import { generatePagination as y, showMobileEllipsis as b, hidePageButtonForMobile as N } from "./Pagination.helper.js";
 import { Button as x } from "./Buttons/Button.js";

package/molecules/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sources":["../../lib/molecules/Pagination.tsx"],"sourcesContent":["'use client';\n\nimport classnames from 'classnames';\nimport { Fragment, type FunctionComponent, type HTMLAttributes } from 'react';\n\nimport {\n  showMobileEllipsis,\n  generatePagination,\n  hidePageButtonForMobile,\n} from './Pagination.helper';\nimport { Button } from '@/molecules/Buttons/Button';\nimport { Icon } from '@clubmed/trident-icons';\nimport type { ScrollerLabels } from '@/types/ScrollerLabels';\n\nexport interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {\n  /**\n   * The current page number (must be >= 1)\n   */\n  defaultPage: number;\n  /**\n   * The total pages number\n   */\n  count: number;\n  /**\n   * A callback function to handle page changes.\n   */\n  onChange: (page: number) => void;\n  /**\n   * Additional class names for the previous & next buttons\n   */\n  buttonClassName?: string;\n  /**\n   * Additional class names for the label of the previous & next buttons\n   */\n  buttonLabelClassName?: string;\n  /**\n   * Additional class names\n   */\n  className?: string;\n  /**\n   * UI Labels\n   */\n  labels: ScrollerLabels;\n  /**\n   * A pagination factory to generate an array of Pagination elements (pageNumber, ellipsis, next button, previous button).\n   */\n  paginationFactory?: typeof generatePagination;\n}\n\nconst EllipsisDesktop = () => {\n  return (\n    <li key=\"desktop-ellipsis\">\n      <div\n        aria-controls=\"page-content\"\n        className=\"text-base mx-8 ml-4 hidden size-48 items-center justify-center text-b3 font-semibold text-black md:flex\"\n      >\n        &#8230;\n      </div>\n    </li>\n  );\n};\n\nconst EllipsisMobile = () => {\n  return (\n    <li key=\"mobile-ellipsis\">\n      <div\n        aria-controls=\"page-content\"\n        className=\"text-base mx-8 ml-4 flex size-48 items-center justify-center text-b3 font-semibold text-black md:hidden\"\n      >\n        &#8230;\n      </div>\n    </li>\n  );\n};\n\nexport const Pagination: FunctionComponent<PaginationProps> = ({\n  defaultPage,\n  buttonClassName = 'md:mr-32',\n  buttonLabelClassName = 'md:flex',\n  className,\n  labels = {},\n  onChange,\n  paginationFactory = generatePagination,\n  count,\n  ...props\n}) => {\n  const pagination = paginationFactory(defaultPage, count);\n\n  return (\n    <nav\n      {...props}\n      data-name=\"Pagination\"\n      role=\"navigation\"\n      aria-label=\"pagination navigation\"\n      className={classnames('flex justify-center border-t-sand', className)}\n    >\n      <ul className=\"mt-12 flex\">\n        {pagination.map((page, index) => {\n          switch (page.type) {\n            case 'pageNumber':\n              return (\n                <Fragment key={`pagination-pageNumber-${index}`}>\n                  {page.value === count && showMobileEllipsis(page.value, defaultPage, count) && (\n                    <EllipsisMobile />\n                  )}\n                  <li\n                    className={classnames('mr-2', {\n                      'hidden md:flex': hidePageButtonForMobile(page.value, defaultPage, count),\n                    })}\n                  >\n                    {page.value === defaultPage ? (\n                      <Button\n                        aria-current=\"page\"\n                        className=\"text-white\"\n                        color=\"black\"\n                        variant=\"circle\"\n                      >\n                        {page.value.toString()}\n                      </Button>\n                    ) : (\n                      <Button\n                        className={classnames('size-48 items-center', {\n                          'mx-8 flex shrink-0 cursor-pointer justify-center self-start':\n                            index === pagination.length - 1,\n                        })}\n                        onClick={() => onChange(page.value)}\n                        color=\"white\"\n                        variant=\"circle\"\n                      >\n                        {page.value.toString()}\n                      </Button>\n                    )}\n                  </li>\n                  {page.value === 1 && showMobileEllipsis(page.value, defaultPage, count) && (\n                    <EllipsisMobile />\n                  )}\n                </Fragment>\n              );\n\n            case 'ellipsis':\n              return <EllipsisDesktop key={`pagination-ellipsis-${index}`} />;\n\n            case 'previousButton':\n              return (\n                <li key=\"pagination-labels.previous\" className={classnames(buttonClassName)}>\n                  <button\n                    data-action=\"previous\"\n                    aria-controls=\"page-content\"\n                    aria-label={`page ${defaultPage - 1}`}\n                    className={classnames(\n                      'text:black text-base mx-8 flex h-48 shrink-0 items-center justify-center self-start text-b3 font-semibold active:text-black-active disabled:text-grey hocus:text-black-active',\n                      {\n                        'pointer-events-none disabled:text-grey': page.disabled,\n                      },\n                    )}\n                    disabled={page.disabled}\n                    onClick={() => onChange(defaultPage - 1)}\n                    type=\"button\"\n                  >\n                    <Icon name=\"ArrowDefaultLeft\" width=\"30px\" />\n                    <span\n                      className={classnames(\n                        'ml-4 hidden border-b',\n                        { 'border-black': !page.disabled },\n                        buttonLabelClassName,\n                      )}\n                    >\n                      {labels.previous}\n                    </span>\n                  </button>\n                </li>\n              );\n\n            case 'nextButton':\n              return (\n                <li className={classnames(buttonClassName)} key=\"pagination-labels.next\">\n                  <button\n                    aria-controls=\"page-content\"\n                    aria-label={`page ${defaultPage + 1}`}\n                    className={classnames(\n                      'text:black mb-5 text-base mx-8 flex h-48 shrink-0 items-center justify-center self-start text-b3 font-semibold active:text-black-active disabled:text-grey hocus:text-black-active',\n                      {\n                        'pointer-events-none disabled:text-grey': page.disabled,\n                      },\n                    )}\n                    data-action=\"next\"\n                    disabled={page.disabled}\n                    onClick={() => onChange(defaultPage + 1)}\n                    type=\"button\"\n                  >\n                    <span\n                      className={classnames(\n                        'ml-4 hidden border-b',\n                        { 'border-black': !page.disabled },\n                        buttonLabelClassName,\n                      )}\n                    >\n                      {labels.next}\n                    </span>\n                    <Icon name=\"ArrowDefaultRight\" width=\"30px\" />\n                  </button>\n                </li>\n              );\n\n            default:\n              return null;\n          }\n        })}\n      </ul>\n    </nav>\n  );\n};\n"],"names":["EllipsisDesktop","jsx","EllipsisMobile","Pagination","defaultPage","buttonClassName","buttonLabelClassName","className","labels","onChange","paginationFactory","generatePagination","count","props","pagination","classnames","page","index","Fragment","showMobileEllipsis","hidePageButtonForMobile","Button","jsxs","Icon"],"mappings":"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"}
+{"version":3,"file":"Pagination.js","sources":["../../lib/molecules/Pagination.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { Fragment, type FunctionComponent, type HTMLAttributes } from 'react';\n\nimport {\n  showMobileEllipsis,\n  generatePagination,\n  hidePageButtonForMobile,\n} from './Pagination.helper';\nimport { Button } from '@/molecules/Buttons/Button';\nimport { Icon } from '@clubmed/trident-icons';\nimport type { ScrollerLabels } from '@/types/ScrollerLabels';\n\nexport interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {\n  /**\n   * The current page number (must be >= 1)\n   */\n  defaultPage: number;\n  /**\n   * The total pages number\n   */\n  count: number;\n  /**\n   * A callback function to handle page changes.\n   */\n  onChange: (page: number) => void;\n  /**\n   * Additional class names for the previous & next buttons\n   */\n  buttonClassName?: string;\n  /**\n   * Additional class names for the label of the previous & next buttons\n   */\n  buttonLabelClassName?: string;\n  /**\n   * Additional class names\n   */\n  className?: string;\n  /**\n   * UI Labels\n   */\n  labels: ScrollerLabels;\n  /**\n   * A pagination factory to generate an array of Pagination elements (pageNumber, ellipsis, next button, previous button).\n   */\n  paginationFactory?: typeof generatePagination;\n}\n\nconst EllipsisDesktop = () => {\n  return (\n    <li key=\"desktop-ellipsis\">\n      <div\n        aria-controls=\"page-content\"\n        className=\"text-base mx-8 ml-4 hidden size-48 items-center justify-center text-b3 font-semibold text-black md:flex\"\n      >\n        &#8230;\n      </div>\n    </li>\n  );\n};\n\nconst EllipsisMobile = () => {\n  return (\n    <li key=\"mobile-ellipsis\">\n      <div\n        aria-controls=\"page-content\"\n        className=\"text-base mx-8 ml-4 flex size-48 items-center justify-center text-b3 font-semibold text-black md:hidden\"\n      >\n        &#8230;\n      </div>\n    </li>\n  );\n};\n\nexport const Pagination: FunctionComponent<PaginationProps> = ({\n  defaultPage,\n  buttonClassName = 'md:mr-32',\n  buttonLabelClassName = 'md:flex',\n  className,\n  labels = {},\n  onChange,\n  paginationFactory = generatePagination,\n  count,\n  ...props\n}) => {\n  const pagination = paginationFactory(defaultPage, count);\n\n  return (\n    <nav\n      {...props}\n      data-name=\"Pagination\"\n      role=\"navigation\"\n      aria-label=\"pagination navigation\"\n      className={clsx('flex justify-center border-t-sand', className)}\n    >\n      <ul className=\"mt-12 flex\">\n        {pagination.map((page, index) => {\n          switch (page.type) {\n            case 'pageNumber':\n              return (\n                <Fragment key={`pagination-pageNumber-${index}`}>\n                  {page.value === count && showMobileEllipsis(page.value, defaultPage, count) && (\n                    <EllipsisMobile />\n                  )}\n                  <li\n                    className={clsx('mr-2', {\n                      'hidden md:flex': hidePageButtonForMobile(page.value, defaultPage, count),\n                    })}\n                  >\n                    {page.value === defaultPage ? (\n                      <Button\n                        aria-current=\"page\"\n                        className=\"text-white\"\n                        color=\"black\"\n                        variant=\"circle\"\n                      >\n                        {page.value.toString()}\n                      </Button>\n                    ) : (\n                      <Button\n                        className={clsx('size-48 items-center', {\n                          'mx-8 flex shrink-0 cursor-pointer justify-center self-start':\n                            index === pagination.length - 1,\n                        })}\n                        onClick={() => onChange(page.value)}\n                        color=\"white\"\n                        variant=\"circle\"\n                      >\n                        {page.value.toString()}\n                      </Button>\n                    )}\n                  </li>\n                  {page.value === 1 && showMobileEllipsis(page.value, defaultPage, count) && (\n                    <EllipsisMobile />\n                  )}\n                </Fragment>\n              );\n\n            case 'ellipsis':\n              return <EllipsisDesktop key={`pagination-ellipsis-${index}`} />;\n\n            case 'previousButton':\n              return (\n                <li key=\"pagination-labels.previous\" className={clsx(buttonClassName)}>\n                  <button\n                    data-action=\"previous\"\n                    aria-controls=\"page-content\"\n                    aria-label={`page ${defaultPage - 1}`}\n                    className={clsx(\n                      'text:black text-base mx-8 flex h-48 shrink-0 items-center justify-center self-start text-b3 font-semibold active:text-black-active disabled:text-grey hocus:text-black-active',\n                      {\n                        'pointer-events-none disabled:text-grey': page.disabled,\n                      },\n                    )}\n                    disabled={page.disabled}\n                    onClick={() => onChange(defaultPage - 1)}\n                    type=\"button\"\n                  >\n                    <Icon name=\"ArrowDefaultLeft\" width=\"30px\" />\n                    <span\n                      className={clsx(\n                        'ml-4 hidden border-b',\n                        { 'border-black': !page.disabled },\n                        buttonLabelClassName,\n                      )}\n                    >\n                      {labels.previous}\n                    </span>\n                  </button>\n                </li>\n              );\n\n            case 'nextButton':\n              return (\n                <li className={clsx(buttonClassName)} key=\"pagination-labels.next\">\n                  <button\n                    aria-controls=\"page-content\"\n                    aria-label={`page ${defaultPage + 1}`}\n                    className={clsx(\n                      'text:black mb-5 text-base mx-8 flex h-48 shrink-0 items-center justify-center self-start text-b3 font-semibold active:text-black-active disabled:text-grey hocus:text-black-active',\n                      {\n                        'pointer-events-none disabled:text-grey': page.disabled,\n                      },\n                    )}\n                    data-action=\"next\"\n                    disabled={page.disabled}\n                    onClick={() => onChange(defaultPage + 1)}\n                    type=\"button\"\n                  >\n                    <span\n                      className={clsx(\n                        'ml-4 hidden border-b',\n                        { 'border-black': !page.disabled },\n                        buttonLabelClassName,\n                      )}\n                    >\n                      {labels.next}\n                    </span>\n                    <Icon name=\"ArrowDefaultRight\" width=\"30px\" />\n                  </button>\n                </li>\n              );\n\n            default:\n              return null;\n          }\n        })}\n      </ul>\n    </nav>\n  );\n};\n"],"names":["EllipsisDesktop","jsx","EllipsisMobile","Pagination","defaultPage","buttonClassName","buttonLabelClassName","className","labels","onChange","paginationFactory","generatePagination","count","props","pagination","clsx","page","index","Fragment","showMobileEllipsis","hidePageButtonForMobile","Button","jsxs","Icon"],"mappings":"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"}

package/molecules/Popin.d.ts

@@ -1,16 +1,22 @@
 import { FunctionComponent, PropsWithChildren, ReactNode } from 'react';
+import { BackdropProps } from './Backdrop';
 export type ClosePopinCallback = () => void;
 export interface PopinFooterProps {
-    closeLabel: string;
+    closeLabel?: string;
     onClose: ClosePopinCallback;
 }
 export interface PopinProps {
-    title: ReactNode;
-    closeLabel: string;
+    title?: ReactNode;
+    closeLabel?: string;
     onClose: ClosePopinCallback;
     isVisible: boolean;
     className?: string;
+    bodyClassName?: string;
     showCloseButton?: boolean;
+    target?: BackdropProps['target'];
+    /**
+     * @deprecated use popinFooter slot instead
+     */
     Footer?: FunctionComponent<PopinFooterProps> | false;
 }
 export declare const Popin: FunctionComponent<PropsWithChildren<PopinProps>>;