@clubmed/trident-ui 1.3.1-beta.1 → 1.4.0-beta.1

package/molecules/Backdrop.js

@@ -1,55 +1,51 @@
-import { jsxs as a, jsx as s } from "react/jsx-runtime";
-import { useTransition as c, config as p, animated as l } from "@react-spring/web";
-import { c as b } from "../chunks/index.js";
-const k = ({
+import { jsxs as p, jsx as m } from "react/jsx-runtime";
+import { useRef as f, useState as k, useEffect as x } from "react";
+import { c as l } from "../chunks/index.js";
+const s = ({
   children: r,
-  onClose: o,
-  isVisible: e,
-  sweep: t
-}) => c(e, {
-  from: {
-    WebkitBackdropFilter: "blur(0px)",
-    backdropFilter: "blur(0px)",
-    "--tw-bg-opacity": 0,
-    x: t ? "-100%" : "0%"
-  },
-  enter: {
-    WebkitBackdropFilter: "blur(10px)",
-    backdropFilter: "blur(10px)",
-    "--tw-bg-opacity": 0.8,
-    x: "0%"
-  },
-  leave: {
-    WebkitBackdropFilter: "blur(0px)",
-    backdropFilter: "blur(0px)",
-    "--tw-bg-opacity": 0,
-    x: t ? "100%" : "0%"
-  },
-  config: t ? { tension: 200, friction: 40 } : p.gentle
-})(
-  (i, n) => n && /* @__PURE__ */ a(
+  onClose: c,
+  isVisible: t,
+  sweep: n
+}) => {
+  const e = f(!!t), u = e.current, a = !t && u, [d, o] = k(!!t);
+  return x(() => {
+    t && o(!0);
+  }, [t]), e.current = !!t, d ? /* @__PURE__ */ p(
     "div",
     {
       role: "presentation",
-      className: "z-1 pointer-events-none fixed inset-0 flex items-center justify-center",
+      className: "z-1 pointer-events-none fixed inset-0 items-center justify-center flex",
       children: [
-        /* @__PURE__ */ s(
-          l.button,
+        /* @__PURE__ */ m(
+          "button",
           {
             type: "button",
-            className: b("-z-1 absolute inset-0 bg-white", {
-              "pointer-events-auto": e
-            }),
-            style: i,
-            onClick: o
+            "aria-hidden": "true",
+            className: l(
+              "-z-1 absolute inset-0 bg-white backdrop will-change-[opacity,transform,backdrop-filter]",
+              {
+                "pointer-events-auto": t || a,
+                "pointer-events-none": !t && !a,
+                "animate-backdropFadeIn": !n && t,
+                "animate-backdropFadeOut": !n && !t && a,
+                "backdrop-blur-0 opacity-0": !n && t && !a,
+                "animate-backdropSweepIn": n && t,
+                "animate-backdropSweepOut": n && !t && a,
+                "backdrop-blur-0 opacity-0 translate-x-[-100%]": n && t && !a
+              }
+            ),
+            onClick: c,
+            onAnimationEnd: () => {
+              t || o(!1);
+            }
           }
         ),
         r
       ]
     }
-  )
-);
+  ) : null;
+};
 export {
-  k as Backdrop
+  s as Backdrop
 };
 //# sourceMappingURL=Backdrop.js.map

package/molecules/Backdrop.js.map

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

package/molecules/Cards/Card.js

@@ -1,22 +1,22 @@
-import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
 import { Card as n } from "./v2/Card.js";
 import { Icon as d } from "@clubmed/trident-icons";
 import { Chip as l } from "../Chip.js";
-const x = ({
-  title: e,
+const h = ({
+  title: a,
   children: s,
   icon: i,
   iconType: t,
   theme: o = "light",
   dataName: m = "Card"
-}) => /* @__PURE__ */ a(n, { "data-name": m, className: "p-20  flex shrink-0 flex-row gap-20", children: [
-  /* @__PURE__ */ r(l, { theme: o, size: "size-48", children: /* @__PURE__ */ r(d, { name: i, type: t, width: "24px" }) }),
-  /* @__PURE__ */ a("div", { className: "space-y-8 font-sans", children: [
-    /* @__PURE__ */ r("div", { className: "text-b3 font-semibold", children: e }),
-    /* @__PURE__ */ r("div", { className: "text-b4 font-normal", children: s })
+}) => /* @__PURE__ */ r(n, { "data-name": m, className: "p-20 flex shrink-0 flex-row gap-20", children: [
+  /* @__PURE__ */ e(l, { theme: o, size: "size-48", children: /* @__PURE__ */ e(d, { name: i, type: t, width: "24px" }) }),
+  /* @__PURE__ */ r("div", { className: "space-y-8 font-sans flex-1", children: [
+    /* @__PURE__ */ e("div", { className: "text-b3 font-semibold", children: a }),
+    /* @__PURE__ */ e("div", { className: "text-b4 font-normal", children: s })
   ] })
 ] });
 export {
-  x as Card
+  h as Card
 };
 //# sourceMappingURL=Card.js.map

package/molecules/Cards/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../lib/molecules/Cards/Card.tsx"],"sourcesContent":["import type { FunctionComponent, PropsWithChildren } from 'react';\nimport { Card as CardV2, type CardProps as CardPropsV2 } from '@/molecules/Cards/v2/Card';\nimport { Icon, type IconicNames, type IconicTypes } from '@clubmed/trident-icons';\nimport { Chip, type ChipProps } from '@/molecules/Chip';\n\ninterface CardProps extends Omit<CardPropsV2, 'theme'> {\n  title: string;\n  icon: IconicNames;\n  iconType?: IconicTypes;\n  theme?: ChipProps['theme'];\n  dataName?: string;\n}\n\nexport const Card: FunctionComponent<PropsWithChildren<CardProps>> = ({\n  title,\n  children,\n  icon,\n  iconType,\n  theme = 'light',\n  dataName = 'Card',\n}) => {\n  return (\n    <CardV2 data-name={dataName} className=\"p-20  flex shrink-0 flex-row gap-20\">\n      <Chip theme={theme} size={'size-48'}>\n        <Icon name={icon} type={iconType} width=\"24px\" />\n      </Chip>\n      <div className=\"space-y-8 font-sans\">\n        <div className=\"text-b3 font-semibold\">{title}</div>\n        <div className=\"text-b4 font-normal\">{children}</div>\n      </div>\n    </CardV2>\n  );\n};\n"],"names":["Card","title","children","icon","iconType","theme","dataName","jsxs","CardV2","jsx","Chip","Icon"],"mappings":";;;;AAaO,MAAMA,IAAwD,CAAC;AAAA,EACpE,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,UAAAC,IAAW;AACb,MAEI,gBAAAC,EAACC,GAAA,EAAO,aAAWF,GAAU,WAAU,uCACrC,UAAA;AAAA,EAAA,gBAAAG,EAACC,GAAA,EAAK,OAAAL,GAAc,MAAM,WACxB,UAAA,gBAAAI,EAACE,GAAA,EAAK,MAAMR,GAAM,MAAMC,GAAU,OAAM,OAAA,CAAO,GACjD;AAAA,EACA,gBAAAG,EAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,IAAA,gBAAAE,EAAC,OAAA,EAAI,WAAU,yBAAyB,UAAAR,GAAM;AAAA,IAC9C,gBAAAQ,EAAC,OAAA,EAAI,WAAU,uBAAuB,UAAAP,EAAA,CAAS;AAAA,EAAA,EAAA,CACjD;AAAA,GACF;"}
+{"version":3,"file":"Card.js","sources":["../../../lib/molecules/Cards/Card.tsx"],"sourcesContent":["import type { FunctionComponent, PropsWithChildren } from 'react';\nimport { Card as CardV2, type CardProps as CardPropsV2 } from '@/molecules/Cards/v2/Card';\nimport { Icon, type IconicNames, type IconicTypes } from '@clubmed/trident-icons';\nimport { Chip, type ChipProps } from '@/molecules/Chip';\n\ninterface CardProps extends Omit<CardPropsV2, 'theme'> {\n  title: string;\n  icon: IconicNames;\n  iconType?: IconicTypes;\n  theme?: ChipProps['theme'];\n  dataName?: string;\n}\n\nexport const Card: FunctionComponent<PropsWithChildren<CardProps>> = ({\n  title,\n  children,\n  icon,\n  iconType,\n  theme = 'light',\n  dataName = 'Card',\n}) => {\n  return (\n    <CardV2 data-name={dataName} className=\"p-20 flex shrink-0 flex-row gap-20\">\n      <Chip theme={theme} size={'size-48'}>\n        <Icon name={icon} type={iconType} width=\"24px\" />\n      </Chip>\n      <div className=\"space-y-8 font-sans flex-1\">\n        <div className=\"text-b3 font-semibold\">{title}</div>\n        <div className=\"text-b4 font-normal\">{children}</div>\n      </div>\n    </CardV2>\n  );\n};\n"],"names":["Card","title","children","icon","iconType","theme","dataName","jsxs","CardV2","jsx","Chip","Icon"],"mappings":";;;;AAaO,MAAMA,IAAwD,CAAC;AAAA,EACpE,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,UAAAC,IAAW;AACb,MAEI,gBAAAC,EAACC,GAAA,EAAO,aAAWF,GAAU,WAAU,sCACrC,UAAA;AAAA,EAAA,gBAAAG,EAACC,GAAA,EAAK,OAAAL,GAAc,MAAM,WACxB,UAAA,gBAAAI,EAACE,GAAA,EAAK,MAAMR,GAAM,MAAMC,GAAU,OAAM,OAAA,CAAO,GACjD;AAAA,EACA,gBAAAG,EAAC,OAAA,EAAI,WAAU,8BACb,UAAA;AAAA,IAAA,gBAAAE,EAAC,OAAA,EAAI,WAAU,yBAAyB,UAAAR,GAAM;AAAA,IAC9C,gBAAAQ,EAAC,OAAA,EAAI,WAAU,uBAAuB,UAAAP,EAAA,CAAS;AAAA,EAAA,EAAA,CACjD;AAAA,GACF;"}

package/molecules/Forms/Checkboxes/Checkbox.js

@@ -55,7 +55,7 @@ function A(p) {
                     type: "checkbox",
                     tabIndex: k,
                     onChange: () => {
-                      !r && y(!d);
+                      r || y(!d);
                     },
                     checked: d,
                     "data-name": "Checkbox",

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,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;"}
+{"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              if (!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,sBAAKJ,KAAUW,EAAS,CAACD,CAAO;AAAA,oBAClC;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/Filter.js

@@ -35,7 +35,7 @@ function A(c) {
         type: "checkbox",
         tabIndex: f,
         onChange: () => {
-          !l && C(!n);
+          l || C(!n);
         },
         checked: n,
         "data-name": "Filter",

package/molecules/Forms/Filter.js.map

@@ -1 +1 @@
-{"version":3,"file":"Filter.js","sources":["../../../lib/molecules/Forms/Filter.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { type InputHTMLAttributes, useId } from 'react';\nimport './controls.css';\nimport { Icon } from '@clubmed/trident-icons';\nimport { useValue } from '@/hooks/useValue.js';\n\nexport interface FilterProps<Value = string>\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\n  /**\n   * The data-testid to apply to the button.\n   * This is used for testing purposes.\n   * */\n  dataTestId?: string;\n  /**\n   * Is it attached to a dropdown?\n   */\n  hasDropdown?: boolean;\n\n  onChange?: (name: string, value: Value | null) => void;\n}\n\nexport function Filter<Value = string>(props: FilterProps<Value>) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    className,\n    dataTestId,\n    disabled,\n    checked: initialChecked = false,\n    value,\n    tabIndex = 0,\n    onChange,\n    hasDropdown,\n    children,\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\n  return (\n    <label className={classnames(className, 'relative')}>\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=\"Filter\"\n        disabled={disabled}\n        value={value}\n      />\n      <span>\n        <span className={classnames('text-b3 font-semibold')}>{children}</span>\n        <Icon width={null} name=\"CheckDefault\" color=\"black\" />\n        {hasDropdown && (\n          <Icon name=\"ArrowDefaultDown\" className=\"ml-8\" width=\"24px\" color=\"black\" />\n        )}\n      </span>\n    </label>\n  );\n}\n"],"names":["Filter","props","internalId","useId","id","name","className","dataTestId","disabled","initialChecked","value","tabIndex","onChange","hasDropdown","children","rest","checked","setValue","useValue","classnames","jsx","Icon"],"mappings":";;;;;;AAqBO,SAASA,EAAuBC,GAA2B;AAChE,QAAMC,IAAaC,EAAA,GAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,WAAAE;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAASC,IAAiB;AAAA,IAC1B,OAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDd,GAEE,EAAE,OAAOe,GAAS,UAAAC,EAAA,IAAaC,EAAkB;AAAA,IACrD,MAAAb;AAAA,IACA,cAAcI;AAAA,IACd,SAASJ,GAAMW,GAAS;AACtB,MAAAJ,IAAWP,GAAMW,IAAYN,MAAU,SAAYA,IAAQM,IAAqB,IAAI;AAAA,IACtF;AAAA,EAAA,CACD;AAED,2BACG,SAAA,EAAM,WAAWG,EAAWb,GAAW,UAAU,GAChD,UAAA;AAAA,IAAA,gBAAAc;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAGL;AAAA,QACJ,MAAAV;AAAA,QACA,eAAaE;AAAA,QACb,MAAK;AAAA,QACL,UAAAI;AAAA,QACA,UAAU,MAAM;AACd,WAACH,KAAYS,EAAS,CAACD,CAAO;AAAA,QAChC;AAAA,QACA,SAAAA;AAAA,QACA,aAAU;AAAA,QACV,UAAAR;AAAA,QACA,OAAAE;AAAA,MAAA;AAAA,IAAA;AAAA,sBAED,QAAA,EACC,UAAA;AAAA,MAAA,gBAAAU,EAAC,QAAA,EAAK,WAAWD,EAAW,uBAAuB,GAAI,UAAAL,GAAS;AAAA,wBAC/DO,GAAA,EAAK,OAAO,MAAM,MAAK,gBAAe,OAAM,SAAQ;AAAA,MACpDR,KACC,gBAAAO,EAACC,GAAA,EAAK,MAAK,oBAAmB,WAAU,QAAO,OAAM,QAAO,OAAM,QAAA,CAAQ;AAAA,IAAA,EAAA,CAE9E;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"Filter.js","sources":["../../../lib/molecules/Forms/Filter.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { type InputHTMLAttributes, useId } from 'react';\nimport './controls.css';\nimport { Icon } from '@clubmed/trident-icons';\nimport { useValue } from '@/hooks/useValue.js';\n\nexport interface FilterProps<Value = string>\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\n  /**\n   * The data-testid to apply to the button.\n   * This is used for testing purposes.\n   * */\n  dataTestId?: string;\n  /**\n   * Is it attached to a dropdown?\n   */\n  hasDropdown?: boolean;\n\n  onChange?: (name: string, value: Value | null) => void;\n}\n\nexport function Filter<Value = string>(props: FilterProps<Value>) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    className,\n    dataTestId,\n    disabled,\n    checked: initialChecked = false,\n    value,\n    tabIndex = 0,\n    onChange,\n    hasDropdown,\n    children,\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\n  return (\n    <label className={classnames(className, 'relative')}>\n      <input\n        {...rest}\n        name={name}\n        data-testid={dataTestId}\n        type=\"checkbox\"\n        tabIndex={tabIndex}\n        onChange={() => {\n          if (!disabled) setValue(!checked);\n        }}\n        checked={checked}\n        data-name=\"Filter\"\n        disabled={disabled}\n        value={value}\n      />\n      <span>\n        <span className={classnames('text-b3 font-semibold')}>{children}</span>\n        <Icon width={null} name=\"CheckDefault\" color=\"black\" />\n        {hasDropdown && (\n          <Icon name=\"ArrowDefaultDown\" className=\"ml-8\" width=\"24px\" color=\"black\" />\n        )}\n      </span>\n    </label>\n  );\n}\n"],"names":["Filter","props","internalId","useId","id","name","className","dataTestId","disabled","initialChecked","value","tabIndex","onChange","hasDropdown","children","rest","checked","setValue","useValue","classnames","jsx","Icon"],"mappings":";;;;;;AAqBO,SAASA,EAAuBC,GAA2B;AAChE,QAAMC,IAAaC,EAAA,GAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,WAAAE;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAASC,IAAiB;AAAA,IAC1B,OAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDd,GAEE,EAAE,OAAOe,GAAS,UAAAC,EAAA,IAAaC,EAAkB;AAAA,IACrD,MAAAb;AAAA,IACA,cAAcI;AAAA,IACd,SAASJ,GAAMW,GAAS;AACtB,MAAAJ,IAAWP,GAAMW,IAAYN,MAAU,SAAYA,IAAQM,IAAqB,IAAI;AAAA,IACtF;AAAA,EAAA,CACD;AAED,2BACG,SAAA,EAAM,WAAWG,EAAWb,GAAW,UAAU,GAChD,UAAA;AAAA,IAAA,gBAAAc;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAGL;AAAA,QACJ,MAAAV;AAAA,QACA,eAAaE;AAAA,QACb,MAAK;AAAA,QACL,UAAAI;AAAA,QACA,UAAU,MAAM;AACd,UAAKH,KAAUS,EAAS,CAACD,CAAO;AAAA,QAClC;AAAA,QACA,SAAAA;AAAA,QACA,aAAU;AAAA,QACV,UAAAR;AAAA,QACA,OAAAE;AAAA,MAAA;AAAA,IAAA;AAAA,sBAED,QAAA,EACC,UAAA;AAAA,MAAA,gBAAAU,EAAC,QAAA,EAAK,WAAWD,EAAW,uBAAuB,GAAI,UAAAL,GAAS;AAAA,wBAC/DO,GAAA,EAAK,OAAO,MAAM,MAAK,gBAAe,OAAM,SAAQ;AAAA,MACpDR,KACC,gBAAAO,EAACC,GAAA,EAAK,MAAK,oBAAmB,WAAU,QAAO,OAAM,QAAO,OAAM,QAAA,CAAQ;AAAA,IAAA,EAAA,CAE9E;AAAA,EAAA,GACF;AAEJ;"}

package/molecules/Forms/NumberField.d.ts

@@ -306,14 +306,14 @@ export declare function useNumberField(props: NumberFieldProps): {
     capture?: boolean | "user" | "environment" | undefined | undefined;
     checked?: boolean | undefined | undefined;
     enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
+    htmlFor?: string | undefined | undefined;
     maxLength?: number | undefined | undefined;
     minLength?: number | undefined | undefined;
-    placeholder?: string | undefined | undefined;
-    readOnly?: boolean | undefined | undefined;
-    required?: boolean | undefined | undefined;
-    htmlFor?: string | undefined | undefined;
     description?: string | undefined;
+    required?: boolean | undefined | undefined;
     hideRequiredStar?: boolean | undefined;
+    placeholder?: string | undefined | undefined;
+    readOnly?: boolean | undefined | undefined;
 };
 export declare const NumberField: (props: NumberFieldProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/molecules/Forms/Radios/Radio.js

@@ -13,8 +13,8 @@ function k(r) {
     checked: h = !1,
     value: i,
     size: s = 24,
-    tabIndex: p = 0,
-    children: f,
+    tabIndex: f = 0,
+    children: p,
     onChange: u,
     ...v
   } = r, { value: l, setValue: x } = b({
@@ -39,9 +39,9 @@ function k(r) {
               name: t,
               "data-testid": m,
               type: "radio",
-              tabIndex: p,
+              tabIndex: f,
               onChange: () => {
-                !a && x(!l);
+                a || x(!l);
               },
               defaultChecked: l,
               "data-name": "Radio",
@@ -51,7 +51,7 @@ function k(r) {
           ),
           /* @__PURE__ */ e("span", { style: { height: s, width: s }, children: /* @__PURE__ */ e("svg", { viewBox: "0 0 16 16", width: s * 2 / 3, className: "overflow-visible", children: /* @__PURE__ */ e("circle", { cx: "8", cy: "8", r: "8px", style: { fill: "hsl(var(--color-saffron))" } }) }) })
         ] }),
-        f
+        p
       ]
     }
   );

package/molecules/Forms/Radios/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sources":["../../../../lib/molecules/Forms/Radios/Radio.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { type InputHTMLAttributes, useId } from 'react';\nimport { useValue } from '@/hooks/useValue.js';\nimport '../controls.css';\n\nexport interface RadioProps<Value = string>\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\n  /**\n   * The data-testid to apply to the button.\n   * This is used for testing purposes.\n   * */\n  dataTestId?: string;\n  /**\n   * The diameter of the radio button.\n   * */\n  size?: number;\n\n  onChange?: (name: string, value: Value | null) => void;\n}\n\nexport function Radio<Value = string>(props: RadioProps<Value>) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    className,\n    dataTestId,\n    disabled,\n    checked: initialChecked = false,\n    value,\n    size = 24,\n    tabIndex = 0,\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, (value !== undefined ? value : checked) as Value);\n    },\n  });\n\n  return (\n    <label\n      className={classnames(className, 'relative flex items-center gap-8', {\n        'text-grey': disabled,\n      })}\n    >\n      <span className=\"relative\">\n        <input\n          {...rest}\n          name={name}\n          data-testid={dataTestId}\n          type=\"radio\"\n          tabIndex={tabIndex}\n          onChange={() => {\n            !disabled && setValue(!checked);\n          }}\n          defaultChecked={checked}\n          data-name=\"Radio\"\n          disabled={disabled}\n          value={value}\n        />\n\n        <span style={{ height: size, width: size }}>\n          <svg viewBox=\"0 0 16 16\" width={(size * 2) / 3} className=\"overflow-visible\">\n            <circle cx=\"8\" cy=\"8\" r=\"8px\" style={{ fill: 'hsl(var(--color-saffron))' }} />\n          </svg>\n        </span>\n      </span>\n\n      {children}\n    </label>\n  );\n}\n\nRadio.displayName = 'Radio';\n"],"names":["Radio","props","internalId","useId","id","name","className","dataTestId","disabled","initialChecked","value","size","tabIndex","children","onChange","rest","checked","setValue","useValue","jsxs","classnames","jsx"],"mappings":";;;;;AAoBO,SAASA,EAAsBC,GAA0B;AAC9D,QAAMC,IAAaC,EAAA,GAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,WAAAE;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAASC,IAAiB;AAAA,IAC1B,OAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDd,GAEE,EAAE,OAAOe,GAAS,UAAAC,EAAA,IAAaC,EAAkB;AAAA,IACrD,MAAAb;AAAA,IACA,cAAcI;AAAA,IACd,SAASJ,GAAMW,GAAS;AACtB,MAAAF,IAAWT,GAAOK,MAAU,SAAYA,IAAQM,CAAiB;AAAA,IACnE;AAAA,EAAA,CACD;AAED,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAWd,GAAW,oCAAoC;AAAA,QACnE,aAAaE;AAAA,MAAA,CACd;AAAA,MAED,UAAA;AAAA,QAAA,gBAAAW,EAAC,QAAA,EAAK,WAAU,YACd,UAAA;AAAA,UAAA,gBAAAE;AAAA,YAAC;AAAA,YAAA;AAAA,cACE,GAAGN;AAAA,cACJ,MAAAV;AAAA,cACA,eAAaE;AAAA,cACb,MAAK;AAAA,cACL,UAAAK;AAAA,cACA,UAAU,MAAM;AACd,iBAACJ,KAAYS,EAAS,CAACD,CAAO;AAAA,cAChC;AAAA,cACA,gBAAgBA;AAAA,cAChB,aAAU;AAAA,cACV,UAAAR;AAAA,cACA,OAAAE;AAAA,YAAA;AAAA,UAAA;AAAA,UAGF,gBAAAW,EAAC,QAAA,EAAK,OAAO,EAAE,QAAQV,GAAM,OAAOA,EAAA,GAClC,UAAA,gBAAAU,EAAC,OAAA,EAAI,SAAQ,aAAY,OAAQV,IAAO,IAAK,GAAG,WAAU,oBACxD,UAAA,gBAAAU,EAAC,UAAA,EAAO,IAAG,KAAI,IAAG,KAAI,GAAE,OAAM,OAAO,EAAE,MAAM,4BAAA,EAA4B,CAAG,GAC9E,EAAA,CACF;AAAA,QAAA,GACF;AAAA,QAECR;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;AAEAb,EAAM,cAAc;"}
+{"version":3,"file":"Radio.js","sources":["../../../../lib/molecules/Forms/Radios/Radio.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { type InputHTMLAttributes, useId } from 'react';\nimport { useValue } from '@/hooks/useValue.js';\nimport '../controls.css';\n\nexport interface RadioProps<Value = string>\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\n  /**\n   * The data-testid to apply to the button.\n   * This is used for testing purposes.\n   * */\n  dataTestId?: string;\n  /**\n   * The diameter of the radio button.\n   * */\n  size?: number;\n\n  onChange?: (name: string, value: Value | null) => void;\n}\n\nexport function Radio<Value = string>(props: RadioProps<Value>) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    className,\n    dataTestId,\n    disabled,\n    checked: initialChecked = false,\n    value,\n    size = 24,\n    tabIndex = 0,\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, (value !== undefined ? value : checked) as Value);\n    },\n  });\n\n  return (\n    <label\n      className={classnames(className, 'relative flex items-center gap-8', {\n        'text-grey': disabled,\n      })}\n    >\n      <span className=\"relative\">\n        <input\n          {...rest}\n          name={name}\n          data-testid={dataTestId}\n          type=\"radio\"\n          tabIndex={tabIndex}\n          onChange={() => {\n            if (!disabled) {\n              setValue(!checked);\n            }\n          }}\n          defaultChecked={checked}\n          data-name=\"Radio\"\n          disabled={disabled}\n          value={value}\n        />\n\n        <span style={{ height: size, width: size }}>\n          <svg viewBox=\"0 0 16 16\" width={(size * 2) / 3} className=\"overflow-visible\">\n            <circle cx=\"8\" cy=\"8\" r=\"8px\" style={{ fill: 'hsl(var(--color-saffron))' }} />\n          </svg>\n        </span>\n      </span>\n\n      {children}\n    </label>\n  );\n}\n\nRadio.displayName = 'Radio';\n"],"names":["Radio","props","internalId","useId","id","name","className","dataTestId","disabled","initialChecked","value","size","tabIndex","children","onChange","rest","checked","setValue","useValue","jsxs","classnames","jsx"],"mappings":";;;;;AAoBO,SAASA,EAAsBC,GAA0B;AAC9D,QAAMC,IAAaC,EAAA,GAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,WAAAE;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAASC,IAAiB;AAAA,IAC1B,OAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDd,GAEE,EAAE,OAAOe,GAAS,UAAAC,EAAA,IAAaC,EAAkB;AAAA,IACrD,MAAAb;AAAA,IACA,cAAcI;AAAA,IACd,SAASJ,GAAMW,GAAS;AACtB,MAAAF,IAAWT,GAAOK,MAAU,SAAYA,IAAQM,CAAiB;AAAA,IACnE;AAAA,EAAA,CACD;AAED,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAWd,GAAW,oCAAoC;AAAA,QACnE,aAAaE;AAAA,MAAA,CACd;AAAA,MAED,UAAA;AAAA,QAAA,gBAAAW,EAAC,QAAA,EAAK,WAAU,YACd,UAAA;AAAA,UAAA,gBAAAE;AAAA,YAAC;AAAA,YAAA;AAAA,cACE,GAAGN;AAAA,cACJ,MAAAV;AAAA,cACA,eAAaE;AAAA,cACb,MAAK;AAAA,cACL,UAAAK;AAAA,cACA,UAAU,MAAM;AACd,gBAAKJ,KACHS,EAAS,CAACD,CAAO;AAAA,cAErB;AAAA,cACA,gBAAgBA;AAAA,cAChB,aAAU;AAAA,cACV,UAAAR;AAAA,cACA,OAAAE;AAAA,YAAA;AAAA,UAAA;AAAA,UAGF,gBAAAW,EAAC,QAAA,EAAK,OAAO,EAAE,QAAQV,GAAM,OAAOA,EAAA,GAClC,UAAA,gBAAAU,EAAC,OAAA,EAAI,SAAQ,aAAY,OAAQV,IAAO,IAAK,GAAG,WAAU,oBACxD,UAAA,gBAAAU,EAAC,UAAA,EAAO,IAAG,KAAI,IAAG,KAAI,GAAE,OAAM,OAAO,EAAE,MAAM,4BAAA,EAA4B,CAAG,GAC9E,EAAA,CACF;AAAA,QAAA,GACF;AAAA,QAECR;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;AAEAb,EAAM,cAAc;"}

package/molecules/Forms/Range.js.map

@@ -1 +1 @@
-{"version":3,"file":"Range.js","sources":["../../../node_modules/debounce/index.js","../../../node_modules/react-use-measure/dist/web.js","../../../lib/molecules/Forms/Range.tsx"],"sourcesContent":["/**\n * Returns a function, that, as long as it continues to be invoked, will not\n * be triggered. The function will be called after it stops being called for\n * N milliseconds. If `immediate` is passed, trigger the function on the\n * leading edge, instead of the trailing. The function also has a property 'clear' \n * that is a function which will clear the timer to prevent previously scheduled executions. \n *\n * @source underscore.js\n * @see http://unscriptable.com/2009/03/20/debouncing-javascript-methods/\n * @param {Function} function to wrap\n * @param {Number} timeout in ms (`100`)\n * @param {Boolean} whether to execute at the beginning (`false`)\n * @api public\n */\nfunction debounce(func, wait, immediate){\n  var timeout, args, context, timestamp, result;\n  if (null == wait) wait = 100;\n\n  function later() {\n    var last = Date.now() - timestamp;\n\n    if (last < wait && last >= 0) {\n      timeout = setTimeout(later, wait - last);\n    } else {\n      timeout = null;\n      if (!immediate) {\n        result = func.apply(context, args);\n        context = args = null;\n      }\n    }\n  };\n\n  var debounced = function(){\n    context = this;\n    args = arguments;\n    timestamp = Date.now();\n    var callNow = immediate && !timeout;\n    if (!timeout) timeout = setTimeout(later, wait);\n    if (callNow) {\n      result = func.apply(context, args);\n      context = args = null;\n    }\n\n    return result;\n  };\n\n  debounced.clear = function() {\n    if (timeout) {\n      clearTimeout(timeout);\n      timeout = null;\n    }\n  };\n  \n  debounced.flush = function() {\n    if (timeout) {\n      result = func.apply(context, args);\n      context = args = null;\n      \n      clearTimeout(timeout);\n      timeout = null;\n    }\n  };\n\n  return debounced;\n};\n\n// Adds compatibility for ES modules\ndebounce.debounce = debounce;\n\nmodule.exports = debounce;\n","import { useState, useRef, useEffect, useMemo } from 'react';\nimport createDebounce from 'debounce';\n\nfunction useMeasure(_temp) {\n  let {\n    debounce,\n    scroll,\n    polyfill,\n    offsetSize\n  } = _temp === void 0 ? {\n    debounce: 0,\n    scroll: false,\n    offsetSize: false\n  } : _temp;\n  const ResizeObserver = polyfill || (typeof window === 'undefined' ? class ResizeObserver {} : window.ResizeObserver);\n\n  if (!ResizeObserver) {\n    throw new Error('This browser does not support ResizeObserver out of the box. See: https://github.com/react-spring/react-use-measure/#resize-observer-polyfills');\n  }\n\n  const [bounds, set] = useState({\n    left: 0,\n    top: 0,\n    width: 0,\n    height: 0,\n    bottom: 0,\n    right: 0,\n    x: 0,\n    y: 0\n  }); // keep all state in a ref\n\n  const state = useRef({\n    element: null,\n    scrollContainers: null,\n    resizeObserver: null,\n    lastBounds: bounds\n  }); // set actual debounce values early, so effects know if they should react accordingly\n\n  const scrollDebounce = debounce ? typeof debounce === 'number' ? debounce : debounce.scroll : null;\n  const resizeDebounce = debounce ? typeof debounce === 'number' ? debounce : debounce.resize : null; // make sure to update state only as long as the component is truly mounted\n\n  const mounted = useRef(false);\n  useEffect(() => {\n    mounted.current = true;\n    return () => void (mounted.current = false);\n  }); // memoize handlers, so event-listeners know when they should update\n\n  const [forceRefresh, resizeChange, scrollChange] = useMemo(() => {\n    const callback = () => {\n      if (!state.current.element) return;\n      const {\n        left,\n        top,\n        width,\n        height,\n        bottom,\n        right,\n        x,\n        y\n      } = state.current.element.getBoundingClientRect();\n      const size = {\n        left,\n        top,\n        width,\n        height,\n        bottom,\n        right,\n        x,\n        y\n      };\n\n      if (state.current.element instanceof HTMLElement && offsetSize) {\n        size.height = state.current.element.offsetHeight;\n        size.width = state.current.element.offsetWidth;\n      }\n\n      Object.freeze(size);\n      if (mounted.current && !areBoundsEqual(state.current.lastBounds, size)) set(state.current.lastBounds = size);\n    };\n\n    return [callback, resizeDebounce ? createDebounce(callback, resizeDebounce) : callback, scrollDebounce ? createDebounce(callback, scrollDebounce) : callback];\n  }, [set, offsetSize, scrollDebounce, resizeDebounce]); // cleanup current scroll-listeners / observers\n\n  function removeListeners() {\n    if (state.current.scrollContainers) {\n      state.current.scrollContainers.forEach(element => element.removeEventListener('scroll', scrollChange, true));\n      state.current.scrollContainers = null;\n    }\n\n    if (state.current.resizeObserver) {\n      state.current.resizeObserver.disconnect();\n      state.current.resizeObserver = null;\n    }\n  } // add scroll-listeners / observers\n\n\n  function addListeners() {\n    if (!state.current.element) return;\n    state.current.resizeObserver = new ResizeObserver(scrollChange);\n    state.current.resizeObserver.observe(state.current.element);\n\n    if (scroll && state.current.scrollContainers) {\n      state.current.scrollContainers.forEach(scrollContainer => scrollContainer.addEventListener('scroll', scrollChange, {\n        capture: true,\n        passive: true\n      }));\n    }\n  } // the ref we expose to the user\n\n\n  const ref = node => {\n    if (!node || node === state.current.element) return;\n    removeListeners();\n    state.current.element = node;\n    state.current.scrollContainers = findScrollContainers(node);\n    addListeners();\n  }; // add general event listeners\n\n\n  useOnWindowScroll(scrollChange, Boolean(scroll));\n  useOnWindowResize(resizeChange); // respond to changes that are relevant for the listeners\n\n  useEffect(() => {\n    removeListeners();\n    addListeners();\n  }, [scroll, scrollChange, resizeChange]); // remove all listeners when the components unmounts\n\n  useEffect(() => removeListeners, []);\n  return [ref, bounds, forceRefresh];\n} // Adds native resize listener to window\n\n\nfunction useOnWindowResize(onWindowResize) {\n  useEffect(() => {\n    const cb = onWindowResize;\n    window.addEventListener('resize', cb);\n    return () => void window.removeEventListener('resize', cb);\n  }, [onWindowResize]);\n}\n\nfunction useOnWindowScroll(onScroll, enabled) {\n  useEffect(() => {\n    if (enabled) {\n      const cb = onScroll;\n      window.addEventListener('scroll', cb, {\n        capture: true,\n        passive: true\n      });\n      return () => void window.removeEventListener('scroll', cb, true);\n    }\n  }, [onScroll, enabled]);\n} // Returns a list of scroll offsets\n\n\nfunction findScrollContainers(element) {\n  const result = [];\n  if (!element || element === document.body) return result;\n  const {\n    overflow,\n    overflowX,\n    overflowY\n  } = window.getComputedStyle(element);\n  if ([overflow, overflowX, overflowY].some(prop => prop === 'auto' || prop === 'scroll')) result.push(element);\n  return [...result, ...findScrollContainers(element.parentElement)];\n} // Checks if element boundaries are equal\n\n\nconst keys = ['x', 'y', 'top', 'bottom', 'left', 'right', 'width', 'height'];\n\nconst areBoundsEqual = (a, b) => keys.every(key => a[key] === b[key]);\n\nexport { useMeasure as default };\n","import { ResizeObserver } from '@juggle/resize-observer';\nimport classnames from 'classnames';\nimport {\n  type ChangeEvent,\n  type CSSProperties,\n  type InputHTMLAttributes,\n  useId,\n  useState,\n} from 'react';\n\nimport useMeasure from 'react-use-measure';\nimport './range.css';\n\ninterface RangeProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\n  /**\n   * Aria label\n   * @default 'Range'\n   * */\n  ariaLabel?: string;\n  /**\n   * Additional class names\n   * */\n  className?: string;\n  /**\n   * Data test id\n   * */\n  dataTestId?: string;\n  /**\n   * Single cursor mode\n   * @default false\n   * */\n  singleCursorMode?: boolean;\n  /**\n   * Min value\n   * @default 0\n   * */\n  min?: number;\n  /**\n   * On change\n   * */\n  onChange?: (name: string, value: number[]) => void;\n  /**\n   * Options\n   * @default []\n   * */\n  options: { value: number; label: string }[];\n}\n\nexport const Range = (props: RangeProps) => {\n  const internalId = useId();\n\n  const {\n    ariaLabel,\n    className,\n    dataTestId = 'range',\n    id = internalId,\n    name = id,\n    singleCursorMode = false,\n    min = 0,\n    options = [],\n    step = 1,\n    readOnly,\n    disabled,\n    onChange,\n    ...rest\n  } = props;\n\n  const [valueA, setValueA] = useState(options.length - 1);\n  const [valueB, setValueB] = useState(min);\n  const [containerRef, { width }] = useMeasure({ polyfill: ResizeObserver });\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    if (!readOnly) {\n      e.persist();\n      const inputValue = Number(e.target.value);\n      const inputId = e.target.id[e.target.id.length - 1];\n\n      if (inputId === 'a') {\n        setValueA(inputValue);\n      } else {\n        setValueB(inputValue);\n      }\n\n      onChange && onChange(name, [valueA, valueB]);\n    }\n  };\n\n  return (\n    <div\n      style={\n        {\n          '--min': min,\n          '--max': options.length - 1,\n          '--inputWidth': `${width}px`,\n          '--inputHeight': '4px',\n          '--thumbWidth': '32px',\n          '--usefulWidth': 'calc(var(--inputWidth) - var(--thumbWidth))',\n          '--valueA': valueA,\n          '--valueB': valueB,\n        } as CSSProperties\n      }\n      className={classnames('relative w-full', className)}\n      data-testid={dataTestId}\n      data-name=\"Range\"\n      ref={containerRef}\n    >\n      <div className=\"input-range-container\">\n        <input\n          {...rest}\n          aria-label={ariaLabel}\n          className=\"input-range\"\n          id={`${id}-a`}\n          max={options.length - 1}\n          min={min}\n          name={name}\n          onChange={handleChange}\n          disabled={disabled}\n          step={step}\n          type=\"range\"\n          value={valueA}\n        />\n        {!singleCursorMode && (\n          <input\n            {...rest}\n            aria-label={ariaLabel}\n            className=\"input-range\"\n            disabled={disabled}\n            id={`${id}-b`}\n            max={options.length - 1}\n            min={min}\n            name={name}\n            onChange={handleChange}\n            step={step}\n            type=\"range\"\n            value={valueB}\n          />\n        )}\n      </div>\n      <output\n        htmlFor={`${id}-a`}\n        style={{ '--value': valueA } as CSSProperties}\n        className=\"input-range-output\"\n      >\n        {options[valueA].label}\n      </output>\n      {!singleCursorMode && (\n        <output\n          htmlFor={`${id}-b`}\n          style={{ '--value': valueB } as CSSProperties}\n          className=\"input-range-output\"\n        >\n          {options[valueB].label}\n        </output>\n      )}\n    </div>\n  );\n};\n"],"names":["debounce","func","wait","immediate","timeout","args","context","timestamp","result","later","last","debounced","callNow","debounce_1","useMeasure","_temp","scroll","polyfill","offsetSize","ResizeObserver","bounds","set","useState","state","useRef","scrollDebounce","resizeDebounce","mounted","useEffect","forceRefresh","resizeChange","scrollChange","useMemo","callback","left","top","width","height","bottom","right","x","y","size","areBoundsEqual","createDebounce","removeListeners","element","addListeners","scrollContainer","ref","node","findScrollContainers","useOnWindowScroll","useOnWindowResize","onWindowResize","cb","onScroll","enabled","overflow","overflowX","overflowY","prop","keys","a","b","key","Range","props","internalId","useId","ariaLabel","className","dataTestId","id","name","singleCursorMode","min","options","step","readOnly","disabled","onChange","rest","valueA","setValueA","valueB","setValueB","containerRef","handleChange","e","inputValue","jsxs","classnames","jsx"],"mappings":"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","x_google_ignoreList":[0,1]}
+{"version":3,"file":"Range.js","sources":["../../../node_modules/debounce/index.js","../../../node_modules/react-use-measure/dist/web.js","../../../lib/molecules/Forms/Range.tsx"],"sourcesContent":["/**\n * Returns a function, that, as long as it continues to be invoked, will not\n * be triggered. The function will be called after it stops being called for\n * N milliseconds. If `immediate` is passed, trigger the function on the\n * leading edge, instead of the trailing. The function also has a property 'clear' \n * that is a function which will clear the timer to prevent previously scheduled executions. \n *\n * @source underscore.js\n * @see http://unscriptable.com/2009/03/20/debouncing-javascript-methods/\n * @param {Function} function to wrap\n * @param {Number} timeout in ms (`100`)\n * @param {Boolean} whether to execute at the beginning (`false`)\n * @api public\n */\nfunction debounce(func, wait, immediate){\n  var timeout, args, context, timestamp, result;\n  if (null == wait) wait = 100;\n\n  function later() {\n    var last = Date.now() - timestamp;\n\n    if (last < wait && last >= 0) {\n      timeout = setTimeout(later, wait - last);\n    } else {\n      timeout = null;\n      if (!immediate) {\n        result = func.apply(context, args);\n        context = args = null;\n      }\n    }\n  };\n\n  var debounced = function(){\n    context = this;\n    args = arguments;\n    timestamp = Date.now();\n    var callNow = immediate && !timeout;\n    if (!timeout) timeout = setTimeout(later, wait);\n    if (callNow) {\n      result = func.apply(context, args);\n      context = args = null;\n    }\n\n    return result;\n  };\n\n  debounced.clear = function() {\n    if (timeout) {\n      clearTimeout(timeout);\n      timeout = null;\n    }\n  };\n  \n  debounced.flush = function() {\n    if (timeout) {\n      result = func.apply(context, args);\n      context = args = null;\n      \n      clearTimeout(timeout);\n      timeout = null;\n    }\n  };\n\n  return debounced;\n};\n\n// Adds compatibility for ES modules\ndebounce.debounce = debounce;\n\nmodule.exports = debounce;\n","import { useState, useRef, useEffect, useMemo } from 'react';\nimport createDebounce from 'debounce';\n\nfunction useMeasure(_temp) {\n  let {\n    debounce,\n    scroll,\n    polyfill,\n    offsetSize\n  } = _temp === void 0 ? {\n    debounce: 0,\n    scroll: false,\n    offsetSize: false\n  } : _temp;\n  const ResizeObserver = polyfill || (typeof window === 'undefined' ? class ResizeObserver {} : window.ResizeObserver);\n\n  if (!ResizeObserver) {\n    throw new Error('This browser does not support ResizeObserver out of the box. See: https://github.com/react-spring/react-use-measure/#resize-observer-polyfills');\n  }\n\n  const [bounds, set] = useState({\n    left: 0,\n    top: 0,\n    width: 0,\n    height: 0,\n    bottom: 0,\n    right: 0,\n    x: 0,\n    y: 0\n  }); // keep all state in a ref\n\n  const state = useRef({\n    element: null,\n    scrollContainers: null,\n    resizeObserver: null,\n    lastBounds: bounds\n  }); // set actual debounce values early, so effects know if they should react accordingly\n\n  const scrollDebounce = debounce ? typeof debounce === 'number' ? debounce : debounce.scroll : null;\n  const resizeDebounce = debounce ? typeof debounce === 'number' ? debounce : debounce.resize : null; // make sure to update state only as long as the component is truly mounted\n\n  const mounted = useRef(false);\n  useEffect(() => {\n    mounted.current = true;\n    return () => void (mounted.current = false);\n  }); // memoize handlers, so event-listeners know when they should update\n\n  const [forceRefresh, resizeChange, scrollChange] = useMemo(() => {\n    const callback = () => {\n      if (!state.current.element) return;\n      const {\n        left,\n        top,\n        width,\n        height,\n        bottom,\n        right,\n        x,\n        y\n      } = state.current.element.getBoundingClientRect();\n      const size = {\n        left,\n        top,\n        width,\n        height,\n        bottom,\n        right,\n        x,\n        y\n      };\n\n      if (state.current.element instanceof HTMLElement && offsetSize) {\n        size.height = state.current.element.offsetHeight;\n        size.width = state.current.element.offsetWidth;\n      }\n\n      Object.freeze(size);\n      if (mounted.current && !areBoundsEqual(state.current.lastBounds, size)) set(state.current.lastBounds = size);\n    };\n\n    return [callback, resizeDebounce ? createDebounce(callback, resizeDebounce) : callback, scrollDebounce ? createDebounce(callback, scrollDebounce) : callback];\n  }, [set, offsetSize, scrollDebounce, resizeDebounce]); // cleanup current scroll-listeners / observers\n\n  function removeListeners() {\n    if (state.current.scrollContainers) {\n      state.current.scrollContainers.forEach(element => element.removeEventListener('scroll', scrollChange, true));\n      state.current.scrollContainers = null;\n    }\n\n    if (state.current.resizeObserver) {\n      state.current.resizeObserver.disconnect();\n      state.current.resizeObserver = null;\n    }\n  } // add scroll-listeners / observers\n\n\n  function addListeners() {\n    if (!state.current.element) return;\n    state.current.resizeObserver = new ResizeObserver(scrollChange);\n    state.current.resizeObserver.observe(state.current.element);\n\n    if (scroll && state.current.scrollContainers) {\n      state.current.scrollContainers.forEach(scrollContainer => scrollContainer.addEventListener('scroll', scrollChange, {\n        capture: true,\n        passive: true\n      }));\n    }\n  } // the ref we expose to the user\n\n\n  const ref = node => {\n    if (!node || node === state.current.element) return;\n    removeListeners();\n    state.current.element = node;\n    state.current.scrollContainers = findScrollContainers(node);\n    addListeners();\n  }; // add general event listeners\n\n\n  useOnWindowScroll(scrollChange, Boolean(scroll));\n  useOnWindowResize(resizeChange); // respond to changes that are relevant for the listeners\n\n  useEffect(() => {\n    removeListeners();\n    addListeners();\n  }, [scroll, scrollChange, resizeChange]); // remove all listeners when the components unmounts\n\n  useEffect(() => removeListeners, []);\n  return [ref, bounds, forceRefresh];\n} // Adds native resize listener to window\n\n\nfunction useOnWindowResize(onWindowResize) {\n  useEffect(() => {\n    const cb = onWindowResize;\n    window.addEventListener('resize', cb);\n    return () => void window.removeEventListener('resize', cb);\n  }, [onWindowResize]);\n}\n\nfunction useOnWindowScroll(onScroll, enabled) {\n  useEffect(() => {\n    if (enabled) {\n      const cb = onScroll;\n      window.addEventListener('scroll', cb, {\n        capture: true,\n        passive: true\n      });\n      return () => void window.removeEventListener('scroll', cb, true);\n    }\n  }, [onScroll, enabled]);\n} // Returns a list of scroll offsets\n\n\nfunction findScrollContainers(element) {\n  const result = [];\n  if (!element || element === document.body) return result;\n  const {\n    overflow,\n    overflowX,\n    overflowY\n  } = window.getComputedStyle(element);\n  if ([overflow, overflowX, overflowY].some(prop => prop === 'auto' || prop === 'scroll')) result.push(element);\n  return [...result, ...findScrollContainers(element.parentElement)];\n} // Checks if element boundaries are equal\n\n\nconst keys = ['x', 'y', 'top', 'bottom', 'left', 'right', 'width', 'height'];\n\nconst areBoundsEqual = (a, b) => keys.every(key => a[key] === b[key]);\n\nexport { useMeasure as default };\n","import { ResizeObserver } from '@juggle/resize-observer';\nimport classnames from 'classnames';\nimport {\n  type ChangeEvent,\n  type CSSProperties,\n  type InputHTMLAttributes,\n  useId,\n  useState,\n} from 'react';\n\nimport useMeasure from 'react-use-measure';\nimport './range.css';\n\ninterface RangeProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\n  /**\n   * Aria label\n   * @default 'Range'\n   * */\n  ariaLabel?: string;\n  /**\n   * Additional class names\n   * */\n  className?: string;\n  /**\n   * Data test id\n   * */\n  dataTestId?: string;\n  /**\n   * Single cursor mode\n   * @default false\n   * */\n  singleCursorMode?: boolean;\n  /**\n   * Min value\n   * @default 0\n   * */\n  min?: number;\n  /**\n   * On change\n   * */\n  onChange?: (name: string, value: number[]) => void;\n  /**\n   * Options\n   * @default []\n   * */\n  options: { value: number; label: string }[];\n}\n\nexport const Range = (props: RangeProps) => {\n  const internalId = useId();\n\n  const {\n    ariaLabel,\n    className,\n    dataTestId = 'range',\n    id = internalId,\n    name = id,\n    singleCursorMode = false,\n    min = 0,\n    options = [],\n    step = 1,\n    readOnly,\n    disabled,\n    onChange,\n    ...rest\n  } = props;\n\n  const [valueA, setValueA] = useState(options.length - 1);\n  const [valueB, setValueB] = useState(min);\n  const [containerRef, { width }] = useMeasure({ polyfill: ResizeObserver });\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    if (!readOnly) {\n      e.persist();\n      const inputValue = Number(e.target.value);\n      const inputId = e.target.id[e.target.id.length - 1];\n\n      if (inputId === 'a') {\n        setValueA(inputValue);\n      } else {\n        setValueB(inputValue);\n      }\n\n      if (onChange) {\n        onChange(name, [valueA, valueB]);\n      }\n    }\n  };\n\n  return (\n    <div\n      style={\n        {\n          '--min': min,\n          '--max': options.length - 1,\n          '--inputWidth': `${width}px`,\n          '--inputHeight': '4px',\n          '--thumbWidth': '32px',\n          '--usefulWidth': 'calc(var(--inputWidth) - var(--thumbWidth))',\n          '--valueA': valueA,\n          '--valueB': valueB,\n        } as CSSProperties\n      }\n      className={classnames('relative w-full', className)}\n      data-testid={dataTestId}\n      data-name=\"Range\"\n      ref={containerRef}\n    >\n      <div className=\"input-range-container\">\n        <input\n          {...rest}\n          aria-label={ariaLabel}\n          className=\"input-range\"\n          id={`${id}-a`}\n          max={options.length - 1}\n          min={min}\n          name={name}\n          onChange={handleChange}\n          disabled={disabled}\n          step={step}\n          type=\"range\"\n          value={valueA}\n        />\n        {!singleCursorMode && (\n          <input\n            {...rest}\n            aria-label={ariaLabel}\n            className=\"input-range\"\n            disabled={disabled}\n            id={`${id}-b`}\n            max={options.length - 1}\n            min={min}\n            name={name}\n            onChange={handleChange}\n            step={step}\n            type=\"range\"\n            value={valueB}\n          />\n        )}\n      </div>\n      <output\n        htmlFor={`${id}-a`}\n        style={{ '--value': valueA } as CSSProperties}\n        className=\"input-range-output\"\n      >\n        {options[valueA].label}\n      </output>\n      {!singleCursorMode && (\n        <output\n          htmlFor={`${id}-b`}\n          style={{ '--value': valueB } as CSSProperties}\n          className=\"input-range-output\"\n        >\n          {options[valueB].label}\n        </output>\n      )}\n    </div>\n  );\n};\n"],"names":["debounce","func","wait","immediate","timeout","args","context","timestamp","result","later","last","debounced","callNow","debounce_1","useMeasure","_temp","scroll","polyfill","offsetSize","ResizeObserver","bounds","set","useState","state","useRef","scrollDebounce","resizeDebounce","mounted","useEffect","forceRefresh","resizeChange","scrollChange","useMemo","callback","left","top","width","height","bottom","right","x","y","size","areBoundsEqual","createDebounce","removeListeners","element","addListeners","scrollContainer","ref","node","findScrollContainers","useOnWindowScroll","useOnWindowResize","onWindowResize","cb","onScroll","enabled","overflow","overflowX","overflowY","prop","keys","a","b","key","Range","props","internalId","useId","ariaLabel","className","dataTestId","id","name","singleCursorMode","min","options","step","readOnly","disabled","onChange","rest","valueA","setValueA","valueB","setValueB","containerRef","handleChange","e","inputValue","jsxs","classnames","jsx"],"mappings":"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","x_google_ignoreList":[0,1]}

package/molecules/Forms/Switch.js

@@ -1,6 +1,6 @@
 import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import { c as x } from "../../chunks/index.js";
-import { useValue as f } from "../../hooks/useValue.js";
+import { c as f } from "../../chunks/index.js";
+import { useValue as x } from "../../hooks/useValue.js";
 /* empty css                    */
 import { useId as w } from "react";
 function C(s) {
@@ -14,7 +14,7 @@ function C(s) {
     onChange: d,
     tabIndex: m = 0,
     children: p
-  } = s, { value: r, setValue: u } = f({
+  } = s, { value: r, setValue: u } = x({
     initialValue: h,
     name: a,
     onChange: d
@@ -22,7 +22,7 @@ function C(s) {
   return /* @__PURE__ */ c(
     "label",
     {
-      className: x(i, "relative flex items-center gap-[10px]", {
+      className: f(i, "relative flex items-center gap-[10px]", {
         "text-b2": !i?.includes("text-"),
         "font-semibold": !i?.includes("font-"),
         "text-grey": t,
@@ -42,7 +42,7 @@ function C(s) {
               role: "switch",
               className: "absolute w-full h-full opacity-0 cursor-pointer",
               onChange: () => {
-                !t && u(!r);
+                t || u(!r);
               },
               "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            !disabled && setValue(!checked);\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,iBAACA,KAAYM,EAAS,CAACD,CAAO;AAAA,cAChC;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 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;"}

package/molecules/HamburgerIcon.d.ts

@@ -1,13 +1,6 @@
-import { FunctionComponent } from 'react';
-interface HamburgerIconProps {
-    /**
-     * Width of the HamburgerIcon
-     */
-    width?: string;
-    /**
-     * Whether the HamburgerIcon is active or not
-     */
+import { ComponentPropsWithoutRef, FunctionComponent } from 'react';
+interface Props extends ComponentPropsWithoutRef<'span'> {
     isActive?: boolean;
 }
-export declare const HamburgerIcon: FunctionComponent<HamburgerIconProps>;
+export declare const HamburgerIcon: FunctionComponent<Props>;
 export {};

package/molecules/HamburgerIcon.js

@@ -1,39 +1,43 @@
-import { jsx as o, jsxs as h } from "react/jsx-runtime";
-import { useSpring as C, animated as t } from "@react-spring/web";
-const s = ({
-  width: e = "24px",
-  isActive: a = !1
+import { jsx as t } from "react/jsx-runtime";
+import { c as e } from "../chunks/index.js";
+const c = ({
+  className: a,
+  isActive: r = !1,
+  ...o
 }) => {
-  const { width: n } = C({ width: e }), r = C({
-    transform: a ? "translate(3.002700, 6.224356)" : "translate(3,6)",
-    path1: a ? "M4.93259468,0.296729803 L20.476916,15.8410511 C20.8700674,16.2342025 20.8721957,16.8713128 20.4825799,17.2609286 C20.0929641,17.6505444 19.4558538,17.648416 19.0627024,17.2552647 L3.51838112,1.71094337 C3.12522975,1.317792 3.12240132,0.679981679 3.51201716,0.290365842 C3.901633,-0.0992499941 4.53944331,-0.096421567 4.93259468,0.296729803 Z" : "M1.009,0 L22.99199,0 C23.54799,0 24,0.449 24,1 C24,1.551 23.54799,2 22.99199,2 L1.009,2 C0.453,2 0,1.551 0,1 C0,0.449 0.453,0 1.009,0 Z",
-    path2: a ? "M5.1242772,17.4441138 L20.665063,1.90332799 C21.0582143,1.51017662 21.0617499,0.873073405 20.6714269,0.482750462 C20.281104,0.092427519 19.6440008,0.0959630529 19.2508494,0.489114423 L3.71006364,16.0299002 C3.31691227,16.4230516 3.31408384,17.0594477 3.70440678,17.4497706 C4.09472972,17.8400935 4.73112583,17.8372651 5.1242772,17.4441138 Z" : "M1.0113,18 L22.98929,18 C23.54529,18 23.99829,17.552 23.99829,17 C23.99829,16.448 23.54529,16 22.98929,16 L1.0113,16 C0.4553,16 0.0033,16.448 0.0033,17 C0.0033,17.552 0.4553,18 1.0113,18 Z",
-    opacity: a ? 0 : 1
-  });
-  return /* @__PURE__ */ o(
-    t.svg,
+  const n = e(
+    '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',
+    { "before:translate-y-[-6px]": !r, "before:translate-y-0 before:rotate-45": r }
+  ), f = e(
+    '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',
+    { "after:translate-y-[6px]": !r, "after:translate-y-0 after:-rotate-45": r }
+  );
+  return /* @__PURE__ */ t(
+    "span",
     {
-      className: "shrink-0",
-      "data-testid": a ? "HamburgerIcon-active" : "HamburgerIcon",
       "data-name": "HamburgerIcon",
-      width: n,
-      height: n,
-      viewBox: "0 0 30 30",
-      children: /* @__PURE__ */ h(t.g, { transform: r.transform, fill: "currentColor", children: [
-        /* @__PURE__ */ o(t.path, { d: r.path1 }),
-        /* @__PURE__ */ o(
-          t.path,
-          {
-            opacity: r.opacity,
-            d: "M22.98969,8 L1.0117,8 C0.4557,8 0.0027,8.448 0.0027,9 C0.0027,9.552 0.4557,10 1.0117,10 L22.98969,10 C23.54569,10 23.99769,9.552 23.99769,9 C23.99769,8.448 23.54569,8 22.98969,8 Z"
-          }
-        ),
-        /* @__PURE__ */ o(t.path, { d: r.path2 })
-      ] })
+      ...o,
+      className: e(
+        "menu-icon cursor-pointer",
+        "color-current relative isolate shrink-0 h-24 w-24 block",
+        a
+      ),
+      "data-testid": r ? "HamburgerIcon-active" : "HamburgerIcon",
+      children: /* @__PURE__ */ t(
+        "span",
+        {
+          className: e(
+            "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",
+            { "bg-current": !r, "bg-transparent": r },
+            n,
+            f
+          )
+        }
+      )
     }
   );
 };
 export {
-  s as HamburgerIcon
+  c as HamburgerIcon
 };
 //# sourceMappingURL=HamburgerIcon.js.map

package/molecules/HamburgerIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"HamburgerIcon.js","sources":["../../lib/molecules/HamburgerIcon.tsx"],"sourcesContent":["import { animated, useSpring } from '@react-spring/web';\nimport type { FunctionComponent } from 'react';\n\ninterface HamburgerIconProps {\n  /**\n   * Width of the HamburgerIcon\n   */\n  width?: string;\n  /**\n   * Whether the HamburgerIcon is active or not\n   */\n  isActive?: boolean;\n}\n\nexport const HamburgerIcon: FunctionComponent<HamburgerIconProps> = ({\n  width: widthProp = '24px',\n  isActive = false,\n}) => {\n  const { width } = useSpring({ width: widthProp });\n  const iconStyle = useSpring({\n    transform: isActive ? 'translate(3.002700, 6.224356)' : 'translate(3,6)',\n    path1: isActive\n      ? 'M4.93259468,0.296729803 L20.476916,15.8410511 C20.8700674,16.2342025 20.8721957,16.8713128 20.4825799,17.2609286 C20.0929641,17.6505444 19.4558538,17.648416 19.0627024,17.2552647 L3.51838112,1.71094337 C3.12522975,1.317792 3.12240132,0.679981679 3.51201716,0.290365842 C3.901633,-0.0992499941 4.53944331,-0.096421567 4.93259468,0.296729803 Z'\n      : 'M1.009,0 L22.99199,0 C23.54799,0 24,0.449 24,1 C24,1.551 23.54799,2 22.99199,2 L1.009,2 C0.453,2 0,1.551 0,1 C0,0.449 0.453,0 1.009,0 Z',\n    path2: isActive\n      ? 'M5.1242772,17.4441138 L20.665063,1.90332799 C21.0582143,1.51017662 21.0617499,0.873073405 20.6714269,0.482750462 C20.281104,0.092427519 19.6440008,0.0959630529 19.2508494,0.489114423 L3.71006364,16.0299002 C3.31691227,16.4230516 3.31408384,17.0594477 3.70440678,17.4497706 C4.09472972,17.8400935 4.73112583,17.8372651 5.1242772,17.4441138 Z'\n      : 'M1.0113,18 L22.98929,18 C23.54529,18 23.99829,17.552 23.99829,17 C23.99829,16.448 23.54529,16 22.98929,16 L1.0113,16 C0.4553,16 0.0033,16.448 0.0033,17 C0.0033,17.552 0.4553,18 1.0113,18 Z',\n    opacity: isActive ? 0 : 1,\n  });\n\n  return (\n    <animated.svg\n      className=\"shrink-0\"\n      data-testid={isActive ? 'HamburgerIcon-active' : 'HamburgerIcon'}\n      data-name=\"HamburgerIcon\"\n      width={width}\n      height={width}\n      viewBox=\"0 0 30 30\"\n    >\n      <animated.g transform={iconStyle.transform} fill=\"currentColor\">\n        <animated.path d={iconStyle.path1} />\n        <animated.path\n          opacity={iconStyle.opacity}\n          d=\"M22.98969,8 L1.0117,8 C0.4557,8 0.0027,8.448 0.0027,9 C0.0027,9.552 0.4557,10 1.0117,10 L22.98969,10 C23.54569,10 23.99769,9.552 23.99769,9 C23.99769,8.448 23.54569,8 22.98969,8 Z\"\n        />\n        <animated.path d={iconStyle.path2} />\n      </animated.g>\n    </animated.svg>\n  );\n};\n"],"names":["HamburgerIcon","widthProp","isActive","width","useSpring","iconStyle","jsx","animated","jsxs"],"mappings":";;AAcO,MAAMA,IAAuD,CAAC;AAAA,EACnE,OAAOC,IAAY;AAAA,EACnB,UAAAC,IAAW;AACb,MAAM;AACJ,QAAM,EAAE,OAAAC,EAAA,IAAUC,EAAU,EAAE,OAAOH,GAAW,GAC1CI,IAAYD,EAAU;AAAA,IAC1B,WAAWF,IAAW,kCAAkC;AAAA,IACxD,OAAOA,IACH,0VACA;AAAA,IACJ,OAAOA,IACH,yVACA;AAAA,IACJ,SAASA,IAAW,IAAI;AAAA,EAAA,CACzB;AAED,SACE,gBAAAI;AAAA,IAACC,EAAS;AAAA,IAAT;AAAA,MACC,WAAU;AAAA,MACV,eAAaL,IAAW,yBAAyB;AAAA,MACjD,aAAU;AAAA,MACV,OAAAC;AAAA,MACA,QAAQA;AAAA,MACR,SAAQ;AAAA,MAER,UAAA,gBAAAK,EAACD,EAAS,GAAT,EAAW,WAAWF,EAAU,WAAW,MAAK,gBAC/C,UAAA;AAAA,QAAA,gBAAAC,EAACC,EAAS,MAAT,EAAc,GAAGF,EAAU,OAAO;AAAA,QACnC,gBAAAC;AAAA,UAACC,EAAS;AAAA,UAAT;AAAA,YACC,SAASF,EAAU;AAAA,YACnB,GAAE;AAAA,UAAA;AAAA,QAAA;AAAA,0BAEHE,EAAS,MAAT,EAAc,GAAGF,EAAU,MAAA,CAAO;AAAA,MAAA,EAAA,CACrC;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"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;"}