@clubmed/trident-ui 1.3.0-beta.6 → 1.3.0-beta.7

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # ClubMed React UI components changelog
 
+# [1.3.0-beta.7](https://scm.clubmed.com/clubmed/ui/trident-ui/compare/v1.3.0-beta.6...v1.3.0-beta.7) (2025-08-04)
+
+
+### Bug Fixes
+
+* **icons:** migrate icon imports to @clubmed/trident-icons package ([cc803d8](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/cc803d87cbad892df50093167fc25fc7c1a229bb))
+
 # [1.3.0-beta.6](https://scm.clubmed.com/clubmed/ui/trident-ui/compare/v1.3.0-beta.5...v1.3.0-beta.6) (2025-08-04)
 
 

package/molecules/Breadcrumb.js

@@ -1,7 +1,6 @@
 import { jsx as e, jsxs as k } from "react/jsx-runtime";
 import { c as w } from "../chunks/index.js";
-import { Icon as B } from "../atoms/Icons/Icon.js";
-import "@clubmed/trident-icons";
+import { Icon as B } from "@clubmed/trident-icons";
 const E = {
   light: {
     thStart: "text-middleGrey",
@@ -11,14 +10,14 @@ const E = {
     thStart: "text-white",
     thEnd: "text-white font-bold"
   }
-}, L = ({
-  className: o,
+}, I = ({
+  className: l,
   items: n,
-  theme: l = "light",
-  component: i = "a"
+  theme: o = "light",
+  component: h = "a"
 }) => {
-  const [m, h, , ...r] = n, d = r.length ? r[r.length - 1] : n[n.length - 1], x = { label: "...", href: "" }, s = r.length ? [m, h, x, d] : n, { thStart: p, thEnd: f } = E[l], g = i;
-  return /* @__PURE__ */ e("nav", { "data-name": "Breadcrumb", "aria-label": "Breadcrumb", className: o, children: /* @__PURE__ */ e("ul", { className: "flex items-center", children: s.map(({ label: a, href: c }, b) => {
+  const [i, m, , ...r] = n, d = r.length ? r[r.length - 1] : n[n.length - 1], x = { label: "...", href: "" }, s = r.length ? [i, m, x, d] : n, { thStart: p, thEnd: f } = E[o], g = h;
+  return /* @__PURE__ */ e("nav", { "data-name": "Breadcrumb", "aria-label": "Breadcrumb", className: l, children: /* @__PURE__ */ e("ul", { className: "flex items-center", children: s.map(({ label: a, href: c }, b) => {
     const t = b === s.length - 1, u = c && !t;
     return /* @__PURE__ */ k(
       "li",
@@ -38,6 +37,6 @@ const E = {
   }) }) });
 };
 export {
-  L as Breadcrumb
+  I as Breadcrumb
 };
 //# sourceMappingURL=Breadcrumb.js.map

package/molecules/Breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.js","sources":["../../lib/molecules/Breadcrumb.tsx"],"sourcesContent":["import classnames from 'classnames';\n\nimport type { FunctionComponent, PropsWithChildren } from 'react';\n\nimport { Icon } from '@/atoms/Icons';\n\nexport interface BreadcrumbProps {\n  className?: string;\n  items: {\n    label: string;\n    href: string;\n  }[];\n  theme?: 'dark' | 'light';\n  /**\n   * Allow giving a custom component\n   */\n  component?: FunctionComponent<PropsWithChildren<any>> | string;\n}\n\nconst themes = {\n  light: {\n    thStart: 'text-middleGrey',\n    thEnd: 'text-black font-bold',\n  },\n  dark: {\n    thStart: 'text-white',\n    thEnd: 'text-white font-bold',\n  },\n};\n\nexport const Breadcrumb: FunctionComponent<BreadcrumbProps> = ({\n  className,\n  items,\n  theme = 'light',\n  component = 'a',\n}) => {\n  const [first, second, , ...rest] = items;\n  const lastItem = rest.length ? rest[rest.length - 1] : items[items.length - 1];\n  const spacer = { label: '...', href: '' };\n  const itemsToRender = !rest.length ? items : [first, second, spacer, lastItem];\n  const { thStart, thEnd } = themes[theme];\n  const Cmp = component as FunctionComponent<PropsWithChildren<{ href: string }>>;\n\n  return (\n    <nav data-name=\"Breadcrumb\" aria-label=\"Breadcrumb\" className={className}>\n      <ul className=\"flex items-center\">\n        {itemsToRender.map(({ label, href }, index) => {\n          const isLast = index === itemsToRender.length - 1;\n          const isLink = href && !isLast;\n          return (\n            <li\n              key={label}\n              className={classnames('text-b4 flex items-center', {\n                [thStart]: !isLast,\n                [thEnd]: isLast,\n              })}\n              {...(isLast && { 'aria-current': 'page' })}\n            >\n              <span>{isLink ? <Cmp href={href}>{label}</Cmp> : label}</span>\n              {!isLast && <Icon name=\"Diamond\" width=\"14px\" className=\"mx-4\" />}\n            </li>\n          );\n        })}\n      </ul>\n    </nav>\n  );\n};\n"],"names":["themes","Breadcrumb","className","items","theme","component","first","second","rest","lastItem","spacer","itemsToRender","thStart","thEnd","Cmp","jsx","label","href","index","isLast","isLink","jsxs","classnames","Icon"],"mappings":";;;;AAmBA,MAAMA,IAAS;AAAA,EACb,OAAO;AAAA,IACL,SAAS;AAAA,IACT,OAAO;AAAA,EAAA;AAAA,EAET,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,EAAA;AAEX,GAEaC,IAAiD,CAAC;AAAA,EAC7D,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,WAAAC,IAAY;AACd,MAAM;AACJ,QAAM,CAACC,GAAOC,KAAU,GAAGC,CAAI,IAAIL,GAC7BM,IAAWD,EAAK,SAASA,EAAKA,EAAK,SAAS,CAAC,IAAIL,EAAMA,EAAM,SAAS,CAAC,GACvEO,IAAS,EAAE,OAAO,OAAO,MAAM,GAAA,GAC/BC,IAAiBH,EAAK,SAAiB,CAACF,GAAOC,GAAQG,GAAQD,CAAQ,IAAxCN,GAC/B,EAAE,SAAAS,GAAS,OAAAC,MAAUb,EAAOI,CAAK,GACjCU,IAAMT;AAEZ,2BACG,OAAA,EAAI,aAAU,cAAa,cAAW,cAAa,WAAAH,GAClD,UAAA,gBAAAa,EAAC,MAAA,EAAG,WAAU,qBACX,YAAc,IAAI,CAAC,EAAE,OAAAC,GAAO,MAAAC,EAAA,GAAQC,MAAU;AAC7C,UAAMC,IAASD,MAAUP,EAAc,SAAS,GAC1CS,IAASH,KAAQ,CAACE;AACxB,WACE,gBAAAE;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAWC,EAAW,6BAA6B;AAAA,UACjD,CAACV,CAAO,GAAG,CAACO;AAAA,UACZ,CAACN,CAAK,GAAGM;AAAA,QAAA,CACV;AAAA,QACA,GAAIA,KAAU,EAAE,gBAAgB,OAAA;AAAA,QAEjC,UAAA;AAAA,UAAA,gBAAAJ,EAAC,UAAM,UAAAK,IAAS,gBAAAL,EAACD,KAAI,MAAAG,GAAa,UAAAD,GAAM,IAASA,EAAA,CAAM;AAAA,UACtD,CAACG,KAAU,gBAAAJ,EAACQ,GAAA,EAAK,MAAK,WAAU,OAAM,QAAO,WAAU,OAAA,CAAO;AAAA,QAAA;AAAA,MAAA;AAAA,MAR1DP;AAAA,IAAA;AAAA,EAWX,CAAC,GACH,GACF;AAEJ;"}
+{"version":3,"file":"Breadcrumb.js","sources":["../../lib/molecules/Breadcrumb.tsx"],"sourcesContent":["import classnames from 'classnames';\n\nimport type { FunctionComponent, PropsWithChildren } from 'react';\n\nimport { Icon } from '@clubmed/trident-icons';\n\nexport interface BreadcrumbProps {\n  className?: string;\n  items: {\n    label: string;\n    href: string;\n  }[];\n  theme?: 'dark' | 'light';\n  /**\n   * Allow giving a custom component\n   */\n  component?: FunctionComponent<PropsWithChildren<any>> | string;\n}\n\nconst themes = {\n  light: {\n    thStart: 'text-middleGrey',\n    thEnd: 'text-black font-bold',\n  },\n  dark: {\n    thStart: 'text-white',\n    thEnd: 'text-white font-bold',\n  },\n};\n\nexport const Breadcrumb: FunctionComponent<BreadcrumbProps> = ({\n  className,\n  items,\n  theme = 'light',\n  component = 'a',\n}) => {\n  const [first, second, , ...rest] = items;\n  const lastItem = rest.length ? rest[rest.length - 1] : items[items.length - 1];\n  const spacer = { label: '...', href: '' };\n  const itemsToRender = !rest.length ? items : [first, second, spacer, lastItem];\n  const { thStart, thEnd } = themes[theme];\n  const Cmp = component as FunctionComponent<PropsWithChildren<{ href: string }>>;\n\n  return (\n    <nav data-name=\"Breadcrumb\" aria-label=\"Breadcrumb\" className={className}>\n      <ul className=\"flex items-center\">\n        {itemsToRender.map(({ label, href }, index) => {\n          const isLast = index === itemsToRender.length - 1;\n          const isLink = href && !isLast;\n          return (\n            <li\n              key={label}\n              className={classnames('text-b4 flex items-center', {\n                [thStart]: !isLast,\n                [thEnd]: isLast,\n              })}\n              {...(isLast && { 'aria-current': 'page' })}\n            >\n              <span>{isLink ? <Cmp href={href}>{label}</Cmp> : label}</span>\n              {!isLast && <Icon name=\"Diamond\" width=\"14px\" className=\"mx-4\" />}\n            </li>\n          );\n        })}\n      </ul>\n    </nav>\n  );\n};\n"],"names":["themes","Breadcrumb","className","items","theme","component","first","second","rest","lastItem","spacer","itemsToRender","thStart","thEnd","Cmp","jsx","label","href","index","isLast","isLink","jsxs","classnames","Icon"],"mappings":";;;AAmBA,MAAMA,IAAS;AAAA,EACb,OAAO;AAAA,IACL,SAAS;AAAA,IACT,OAAO;AAAA,EAAA;AAAA,EAET,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,EAAA;AAEX,GAEaC,IAAiD,CAAC;AAAA,EAC7D,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,WAAAC,IAAY;AACd,MAAM;AACJ,QAAM,CAACC,GAAOC,KAAU,GAAGC,CAAI,IAAIL,GAC7BM,IAAWD,EAAK,SAASA,EAAKA,EAAK,SAAS,CAAC,IAAIL,EAAMA,EAAM,SAAS,CAAC,GACvEO,IAAS,EAAE,OAAO,OAAO,MAAM,GAAA,GAC/BC,IAAiBH,EAAK,SAAiB,CAACF,GAAOC,GAAQG,GAAQD,CAAQ,IAAxCN,GAC/B,EAAE,SAAAS,GAAS,OAAAC,MAAUb,EAAOI,CAAK,GACjCU,IAAMT;AAEZ,2BACG,OAAA,EAAI,aAAU,cAAa,cAAW,cAAa,WAAAH,GAClD,UAAA,gBAAAa,EAAC,MAAA,EAAG,WAAU,qBACX,YAAc,IAAI,CAAC,EAAE,OAAAC,GAAO,MAAAC,EAAA,GAAQC,MAAU;AAC7C,UAAMC,IAASD,MAAUP,EAAc,SAAS,GAC1CS,IAASH,KAAQ,CAACE;AACxB,WACE,gBAAAE;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAWC,EAAW,6BAA6B;AAAA,UACjD,CAACV,CAAO,GAAG,CAACO;AAAA,UACZ,CAACN,CAAK,GAAGM;AAAA,QAAA,CACV;AAAA,QACA,GAAIA,KAAU,EAAE,gBAAgB,OAAA;AAAA,QAEjC,UAAA;AAAA,UAAA,gBAAAJ,EAAC,UAAM,UAAAK,IAAS,gBAAAL,EAACD,KAAI,MAAAG,GAAa,UAAAD,GAAM,IAASA,EAAA,CAAM;AAAA,UACtD,CAACG,KAAU,gBAAAJ,EAACQ,GAAA,EAAK,MAAK,WAAU,OAAM,QAAO,WAAU,OAAA,CAAO;AAAA,QAAA;AAAA,MAAA;AAAA,MAR1DP;AAAA,IAAA;AAAA,EAWX,CAAC,GACH,GACF;AAEJ;"}

package/molecules/Buttons/Button.d.ts

@@ -1,6 +1,6 @@
 import { type ButtonHTMLAttributes, type FunctionComponent, type ReactNode } from 'react';
-import type { IconicNames, IconicTypes } from '../../atoms/Icons/index.js';
 import { type ButtonProps as ButtonPropsV2 } from './v2/Button.js';
+import type { IconicNames, IconicTypes } from '@clubmed/trident-icons';
 export declare const BUTTON_THEME_LEGACY: any;
 export declare const BUTTON_VARIANT_LEGACY: any;
 export type ButtonPropsLegacy = {

package/molecules/Buttons/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../lib/molecules/Buttons/Button.tsx"],"sourcesContent":["import { type ButtonHTMLAttributes, type FunctionComponent, type ReactNode } from 'react';\nimport type { IconicNames, IconicTypes } from '@/atoms/Icons/index.js';\nimport { Button as ButtonV2, type ButtonProps as ButtonPropsV2 } from './v2/Button.js';\n\nexport const BUTTON_THEME_LEGACY: any = {\n  white: {\n    color: 'white',\n    theme: 'solid',\n  },\n  black: {\n    color: 'black',\n    theme: 'solid',\n  },\n  yellow: {\n    color: 'saffron',\n    theme: 'solid',\n  },\n  whiteStroke: {\n    color: 'white',\n    theme: 'outline',\n  },\n  blackStroke: {\n    color: 'black',\n    theme: 'outline',\n  },\n};\n\nexport const BUTTON_VARIANT_LEGACY: any = {\n  textSmall: {\n    size: 'small',\n    variant: undefined,\n  },\n  icon: {\n    variant: 'circle',\n    label: undefined,\n  },\n  arrow: {\n    variant: 'circle',\n    label: undefined,\n    size: 'large',\n  },\n};\n\nexport type ButtonPropsLegacy = {\n  /**\n   * Button themes defining background color and text/icon color\n   */\n  theme?: 'yellow' | 'white' | 'black' | 'whiteStroke' | 'blackStroke' | ButtonPropsV2['theme'];\n  /**\n   * Is it a text button? An icon button? An arrow button?\n   */\n  variant?: 'text' | 'textSmall' | 'icon' | 'arrow' | 'monogram' | ButtonPropsV2['variant'];\n  /**\n   * Background Color override\n   * Ideally please use ONLY for the \"white\" and \"black\" themes\n   * @deprecated\n   */\n  backgroundOverride?: string;\n  /**\n   * Button contents\n   * @deprecated\n   */\n  label?: string;\n  /**\n   * Optional children (you might never use this, please actually try to avoid it)\n   */\n  children?: ReactNode;\n  /**\n   * Optional icon name\n   */\n  icon?: IconicNames;\n  /**\n   * Force the icon type to be svg, font or default\n   */\n  iconType?: IconicTypes;\n  /**\n   * Group name\n   * Used to group buttons together (you might not need this)\n   * @deprecated\n   */\n  groupName?: string;\n};\n\nexport type CommonButtonProps = Omit<ButtonPropsV2, 'theme' | 'variant'> & ButtonPropsLegacy;\n\ntype ButtonProps = CommonButtonProps & ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const Button: FunctionComponent<ButtonProps> = (props: ButtonProps) => {\n  const opts = {\n    ...props,\n    ...(BUTTON_THEME_LEGACY[props.theme!] || {}),\n    ...(BUTTON_VARIANT_LEGACY[props.variant!] || {}),\n  };\n\n  return (\n    <ButtonV2 {...opts}>\n      {opts.label}\n      {props.children}\n    </ButtonV2>\n  );\n};\n"],"names":["BUTTON_THEME_LEGACY","BUTTON_VARIANT_LEGACY","Button","props","opts","jsxs","ButtonV2"],"mappings":";;;AAIO,MAAMA,IAA2B;AAAA,EACtC,OAAO;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,EAAA;AAAA,EAET,OAAO;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,EAAA;AAAA,EAET,QAAQ;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,EAAA;AAAA,EAET,aAAa;AAAA,IACX,OAAO;AAAA,IACP,OAAO;AAAA,EAAA;AAAA,EAET,aAAa;AAAA,IACX,OAAO;AAAA,IACP,OAAO;AAAA,EAAA;AAEX,GAEaC,IAA6B;AAAA,EACxC,WAAW;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAAA,EAEX,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,EAAA;AAAA,EAET,OAAO;AAAA,IACL,SAAS;AAAA,IACT,OAAO;AAAA,IACP,MAAM;AAAA,EAAA;AAEV,GA8CaC,IAAyC,CAACC,MAAuB;AAC5E,QAAMC,IAAO;AAAA,IACX,GAAGD;AAAA,IACH,GAAIH,EAAoBG,EAAM,KAAM,KAAK,CAAA;AAAA,IACzC,GAAIF,EAAsBE,EAAM,OAAQ,KAAK,CAAA;AAAA,EAAC;AAGhD,SACE,gBAAAE,EAACC,GAAA,EAAU,GAAGF,GACX,UAAA;AAAA,IAAAA,EAAK;AAAA,IACLD,EAAM;AAAA,EAAA,GACT;AAEJ;"}
+{"version":3,"file":"Button.js","sources":["../../../lib/molecules/Buttons/Button.tsx"],"sourcesContent":["import { type ButtonHTMLAttributes, type FunctionComponent, type ReactNode } from 'react';\nimport { Button as ButtonV2, type ButtonProps as ButtonPropsV2 } from './v2/Button.js';\nimport type { IconicNames, IconicTypes } from '@clubmed/trident-icons';\n\nexport const BUTTON_THEME_LEGACY: any = {\n  white: {\n    color: 'white',\n    theme: 'solid',\n  },\n  black: {\n    color: 'black',\n    theme: 'solid',\n  },\n  yellow: {\n    color: 'saffron',\n    theme: 'solid',\n  },\n  whiteStroke: {\n    color: 'white',\n    theme: 'outline',\n  },\n  blackStroke: {\n    color: 'black',\n    theme: 'outline',\n  },\n};\n\nexport const BUTTON_VARIANT_LEGACY: any = {\n  textSmall: {\n    size: 'small',\n    variant: undefined,\n  },\n  icon: {\n    variant: 'circle',\n    label: undefined,\n  },\n  arrow: {\n    variant: 'circle',\n    label: undefined,\n    size: 'large',\n  },\n};\n\nexport type ButtonPropsLegacy = {\n  /**\n   * Button themes defining background color and text/icon color\n   */\n  theme?: 'yellow' | 'white' | 'black' | 'whiteStroke' | 'blackStroke' | ButtonPropsV2['theme'];\n  /**\n   * Is it a text button? An icon button? An arrow button?\n   */\n  variant?: 'text' | 'textSmall' | 'icon' | 'arrow' | 'monogram' | ButtonPropsV2['variant'];\n  /**\n   * Background Color override\n   * Ideally please use ONLY for the \"white\" and \"black\" themes\n   * @deprecated\n   */\n  backgroundOverride?: string;\n  /**\n   * Button contents\n   * @deprecated\n   */\n  label?: string;\n  /**\n   * Optional children (you might never use this, please actually try to avoid it)\n   */\n  children?: ReactNode;\n  /**\n   * Optional icon name\n   */\n  icon?: IconicNames;\n  /**\n   * Force the icon type to be svg, font or default\n   */\n  iconType?: IconicTypes;\n  /**\n   * Group name\n   * Used to group buttons together (you might not need this)\n   * @deprecated\n   */\n  groupName?: string;\n};\n\nexport type CommonButtonProps = Omit<ButtonPropsV2, 'theme' | 'variant'> & ButtonPropsLegacy;\n\ntype ButtonProps = CommonButtonProps & ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const Button: FunctionComponent<ButtonProps> = (props: ButtonProps) => {\n  const opts = {\n    ...props,\n    ...(BUTTON_THEME_LEGACY[props.theme!] || {}),\n    ...(BUTTON_VARIANT_LEGACY[props.variant!] || {}),\n  };\n\n  return (\n    <ButtonV2 {...opts}>\n      {opts.label}\n      {props.children}\n    </ButtonV2>\n  );\n};\n"],"names":["BUTTON_THEME_LEGACY","BUTTON_VARIANT_LEGACY","Button","props","opts","jsxs","ButtonV2"],"mappings":";;;AAIO,MAAMA,IAA2B;AAAA,EACtC,OAAO;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,EAAA;AAAA,EAET,OAAO;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,EAAA;AAAA,EAET,QAAQ;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,EAAA;AAAA,EAET,aAAa;AAAA,IACX,OAAO;AAAA,IACP,OAAO;AAAA,EAAA;AAAA,EAET,aAAa;AAAA,IACX,OAAO;AAAA,IACP,OAAO;AAAA,EAAA;AAEX,GAEaC,IAA6B;AAAA,EACxC,WAAW;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAAA,EAEX,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,EAAA;AAAA,EAET,OAAO;AAAA,IACL,SAAS;AAAA,IACT,OAAO;AAAA,IACP,MAAM;AAAA,EAAA;AAEV,GA8CaC,IAAyC,CAACC,MAAuB;AAC5E,QAAMC,IAAO;AAAA,IACX,GAAGD;AAAA,IACH,GAAIH,EAAoBG,EAAM,KAAM,KAAK,CAAA;AAAA,IACzC,GAAIF,EAAsBE,EAAM,OAAQ,KAAK,CAAA;AAAA,EAAC;AAGhD,SACE,gBAAAE,EAACC,GAAA,EAAU,GAAGF,GACX,UAAA;AAAA,IAAAA,EAAK;AAAA,IACLD,EAAM;AAAA,EAAA,GACT;AAEJ;"}

package/molecules/Buttons/ButtonContent.d.ts

@@ -1,5 +1,5 @@
 import type { FunctionComponent, ReactNode } from 'react';
-import { type IconicNames, type IconicTypes } from '../../atoms/Icons';
+import { type IconicNames, type IconicTypes } from '@clubmed/trident-icons';
 export type ButtonContentProps = {
     /**
      * @deprecated

package/molecules/Buttons/ButtonContent.js

@@ -1,19 +1,18 @@
 import { jsxs as p, jsx as n } from "react/jsx-runtime";
-import { Icon as c } from "../../atoms/Icons/Icon.js";
-import "@clubmed/trident-icons";
-const f = ({
-  showLabel: r,
+import { Icon as c } from "@clubmed/trident-icons";
+const x = ({
+  showLabel: s,
   label: t,
-  children: s,
+  children: r,
   icon: e,
   iconType: o,
   iconWidth: m
 }) => /* @__PURE__ */ p("span", { className: "flex items-center justify-center gap-x-8 w-full", children: [
-  r ? t : t && /* @__PURE__ */ n("span", { className: "sr-only", children: t }),
-  s,
+  s ? t : t && /* @__PURE__ */ n("span", { className: "sr-only", children: t }),
+  r,
   e && /* @__PURE__ */ n(c, { name: e, width: m ?? "24px", type: o })
 ] });
 export {
-  f as ButtonContent
+  x as ButtonContent
 };
 //# sourceMappingURL=ButtonContent.js.map

package/molecules/Buttons/ButtonContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonContent.js","sources":["../../../lib/molecules/Buttons/ButtonContent.tsx"],"sourcesContent":["import type { FunctionComponent, ReactNode } from 'react';\n\nimport { Icon, type IconicNames, type IconicTypes } from '@/atoms/Icons';\n\nexport type ButtonContentProps = {\n  /**\n   * @deprecated\n   */\n  showLabel?: boolean;\n  /**\n   * @deprecated\n   */\n  label?: string;\n  children?: ReactNode;\n  icon?: IconicNames;\n  iconType?: IconicTypes;\n  iconWidth?: string;\n};\n\nexport const ButtonContent: FunctionComponent<ButtonContentProps> = ({\n  showLabel,\n  label,\n  children,\n  icon,\n  iconType,\n  iconWidth,\n}) => {\n  return (\n    <span className=\"flex items-center justify-center gap-x-8 w-full\">\n      {showLabel ? label : label && <span className=\"sr-only\">{label}</span>}\n      {children}\n      {icon && <Icon name={icon} width={iconWidth ?? '24px'} type={iconType} />}\n    </span>\n  );\n};\n"],"names":["ButtonContent","showLabel","label","children","icon","iconType","iconWidth","jsxs","jsx","Icon"],"mappings":";;;AAmBO,MAAMA,IAAuD,CAAC;AAAA,EACnE,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,MAEI,gBAAAC,EAAC,QAAA,EAAK,WAAU,mDACb,UAAA;AAAA,EAAAN,IAAYC,IAAQA,KAAS,gBAAAM,EAAC,QAAA,EAAK,WAAU,WAAW,UAAAN,GAAM;AAAA,EAC9DC;AAAA,EACAC,uBAASK,GAAA,EAAK,MAAML,GAAM,OAAOE,KAAa,QAAQ,MAAMD,EAAA,CAAU;AAAA,GACzE;"}
+{"version":3,"file":"ButtonContent.js","sources":["../../../lib/molecules/Buttons/ButtonContent.tsx"],"sourcesContent":["import type { FunctionComponent, ReactNode } from 'react';\n\nimport { Icon, type IconicNames, type IconicTypes } from '@clubmed/trident-icons';\n\nexport type ButtonContentProps = {\n  /**\n   * @deprecated\n   */\n  showLabel?: boolean;\n  /**\n   * @deprecated\n   */\n  label?: string;\n  children?: ReactNode;\n  icon?: IconicNames;\n  iconType?: IconicTypes;\n  iconWidth?: string;\n};\n\nexport const ButtonContent: FunctionComponent<ButtonContentProps> = ({\n  showLabel,\n  label,\n  children,\n  icon,\n  iconType,\n  iconWidth,\n}) => {\n  return (\n    <span className=\"flex items-center justify-center gap-x-8 w-full\">\n      {showLabel ? label : label && <span className=\"sr-only\">{label}</span>}\n      {children}\n      {icon && <Icon name={icon} width={iconWidth ?? '24px'} type={iconType} />}\n    </span>\n  );\n};\n"],"names":["ButtonContent","showLabel","label","children","icon","iconType","iconWidth","jsxs","jsx","Icon"],"mappings":";;AAmBO,MAAMA,IAAuD,CAAC;AAAA,EACnE,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,MAEI,gBAAAC,EAAC,QAAA,EAAK,WAAU,mDACb,UAAA;AAAA,EAAAN,IAAYC,IAAQA,KAAS,gBAAAM,EAAC,QAAA,EAAK,WAAU,WAAW,UAAAN,GAAM;AAAA,EAC9DC;AAAA,EACAC,uBAASK,GAAA,EAAK,MAAML,GAAM,OAAOE,KAAa,QAAQ,MAAMD,EAAA,CAAU;AAAA,GACzE;"}

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

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

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

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

package/molecules/Card.d.ts

@@ -1,5 +1,5 @@
 import type { FunctionComponent, PropsWithChildren } from 'react';
-import { type IconicNames, type IconicTypes } from '../atoms/Icons';
+import { type IconicNames, type IconicTypes } from '@clubmed/trident-icons';
 interface CardProps {
     title: string;
     icon: IconicNames;

package/molecules/Card.js

@@ -1,11 +1,10 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
 import { c as d } from "../chunks/index.js";
-import { Icon as o } from "../atoms/Icons/Icon.js";
-import "@clubmed/trident-icons";
-const x = ({
+import { Icon as o } from "@clubmed/trident-icons";
+const f = ({
   title: a,
-  children: i,
-  icon: s,
+  children: s,
+  icon: i,
   iconType: l,
   theme: r = "light",
   dataName: n = "Card"
@@ -22,17 +21,17 @@ const x = ({
             "bg-ultramarine text-white": r === "dark",
             "bg-lightSand text-black": r === "light"
           }),
-          children: /* @__PURE__ */ e(o, { name: s, type: l, width: "24px" })
+          children: /* @__PURE__ */ e(o, { name: i, type: l, width: "24px" })
         }
       ),
       /* @__PURE__ */ t("div", { className: "space-y-8 font-sans", children: [
         /* @__PURE__ */ e("div", { className: "text-b3 font-semibold", children: a }),
-        /* @__PURE__ */ e("div", { className: "text-b4 font-normal", children: i })
+        /* @__PURE__ */ e("div", { className: "text-b4 font-normal", children: s })
       ] })
     ]
   }
 );
 export {
-  x as Card
+  f as Card
 };
 //# sourceMappingURL=Card.js.map

package/molecules/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../lib/molecules/Card.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport type { FunctionComponent, PropsWithChildren } from 'react';\n\nimport { Icon, type IconicNames, type IconicTypes } from '@/atoms/Icons';\n\ninterface CardProps {\n  title: string;\n  icon: IconicNames;\n  iconType?: IconicTypes;\n  theme?: 'light' | 'dark';\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    <div\n      className=\"border-lightGrey rounded-16 flex shrink-0 flex-row gap-20 border bg-white p-20\"\n      data-name={dataName}\n    >\n      <div\n        className={classnames('flex h-48 w-48 shrink-0 items-center justify-center rounded-full', {\n          'bg-ultramarine text-white': theme === 'dark',\n          'bg-lightSand text-black': theme === 'light',\n        })}\n      >\n        <Icon name={icon} type={iconType} width=\"24px\" />\n      </div>\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    </div>\n  );\n};\n"],"names":["Card","title","children","icon","iconType","theme","dataName","jsxs","jsx","classnames","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;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV,aAAWD;AAAA,IAEX,UAAA;AAAA,MAAA,gBAAAE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWC,EAAW,oEAAoE;AAAA,YACxF,6BAA6BJ,MAAU;AAAA,YACvC,2BAA2BA,MAAU;AAAA,UAAA,CACtC;AAAA,UAED,4BAACK,GAAA,EAAK,MAAMP,GAAM,MAAMC,GAAU,OAAM,OAAA,CAAO;AAAA,QAAA;AAAA,MAAA;AAAA,MAEjD,gBAAAG,EAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,QAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,yBAAyB,UAAAP,GAAM;AAAA,QAC9C,gBAAAO,EAAC,OAAA,EAAI,WAAU,uBAAuB,UAAAN,EAAA,CAAS;AAAA,MAAA,EAAA,CACjD;AAAA,IAAA;AAAA,EAAA;AAAA;"}
+{"version":3,"file":"Card.js","sources":["../../lib/molecules/Card.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport type { FunctionComponent, PropsWithChildren } from 'react';\n\nimport { Icon, type IconicNames, type IconicTypes } from '@clubmed/trident-icons';\n\ninterface CardProps {\n  title: string;\n  icon: IconicNames;\n  iconType?: IconicTypes;\n  theme?: 'light' | 'dark';\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    <div\n      className=\"border-lightGrey rounded-16 flex shrink-0 flex-row gap-20 border bg-white p-20\"\n      data-name={dataName}\n    >\n      <div\n        className={classnames('flex h-48 w-48 shrink-0 items-center justify-center rounded-full', {\n          'bg-ultramarine text-white': theme === 'dark',\n          'bg-lightSand text-black': theme === 'light',\n        })}\n      >\n        <Icon name={icon} type={iconType} width=\"24px\" />\n      </div>\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    </div>\n  );\n};\n"],"names":["Card","title","children","icon","iconType","theme","dataName","jsxs","jsx","classnames","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;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV,aAAWD;AAAA,IAEX,UAAA;AAAA,MAAA,gBAAAE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWC,EAAW,oEAAoE;AAAA,YACxF,6BAA6BJ,MAAU;AAAA,YACvC,2BAA2BA,MAAU;AAAA,UAAA,CACtC;AAAA,UAED,4BAACK,GAAA,EAAK,MAAMP,GAAM,MAAMC,GAAU,OAAM,OAAA,CAAO;AAAA,QAAA;AAAA,MAAA;AAAA,MAEjD,gBAAAG,EAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,QAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,yBAAyB,UAAAP,GAAM;AAAA,QAC9C,gBAAAO,EAAC,OAAA,EAAI,WAAU,uBAAuB,UAAAN,EAAA,CAAS;AAAA,MAAA,EAAA,CACjD;AAAA,IAAA;AAAA,EAAA;AAAA;"}

package/molecules/Forms/Checkboxes/Checkbox.js

@@ -1,12 +1,11 @@
 import { jsxs as t, jsx as a } from "react/jsx-runtime";
-import { c } from "../../../chunks/index.js";
+import { c as o } from "../../../chunks/index.js";
 import { useId as D } from "react";
-import { Icon as h } from "../../../atoms/Icons/Icon.js";
-import "@clubmed/trident-icons";
 import { useValue as S } from "../../../hooks/useValue.js";
 /* empty css                       */
 import { useInternalStatus as V } from "../../../hooks/useInternalStatus.js";
-function B(u) {
+import { Icon as p } from "@clubmed/trident-icons";
+function A(u) {
   const x = D(), {
     id: s = x,
     name: n = s,
@@ -20,13 +19,13 @@ function B(u) {
     validationStatus: N = "default",
     errorMessage: d,
     children: g,
-    onChange: o,
+    onChange: c,
     ...y
   } = u, { value: m, setValue: I } = S({
     name: n,
     initialValue: k,
-    onChange(w, p) {
-      o == null || o(w, p ? l !== void 0 ? l : p : null);
+    onChange(w, h) {
+      c == null || c(w, h ? l !== void 0 ? l : h : null);
     }
   }), e = V({
     isDisabled: r,
@@ -35,13 +34,13 @@ function B(u) {
   return /* @__PURE__ */ t(
     "div",
     {
-      className: c("flex flex-col space-y-2", f),
+      className: o("flex flex-col space-y-2", f),
       "data-testid": `checkbox-container-${s}`,
       children: [
         /* @__PURE__ */ t(
           "label",
           {
-            className: c("cursor-pointer relative flex text-b3 items-center", {
+            className: o("cursor-pointer relative flex text-b3 items-center", {
               "text-grey": e === "disabled",
               "text-black": e !== "default"
             }),
@@ -68,10 +67,10 @@ function B(u) {
                   "span",
                   {
                     style: { height: i, width: i },
-                    className: c({ "!border-red": e === "error" }),
+                    className: o({ "!border-red": e === "error" }),
                     "data-testid": `check-container-${s}`,
                     children: /* @__PURE__ */ a(
-                      h,
+                      p,
                       {
                         name: "CheckDefault",
                         type: "svg",
@@ -88,7 +87,7 @@ function B(u) {
           }
         ),
         C && /* @__PURE__ */ t("span", { className: "text-red text-b4 flex items-start space-x-4 ps-20", role: "alert", children: [
-          /* @__PURE__ */ a(h, { name: "Error", width: "20px" }),
+          /* @__PURE__ */ a(p, { name: "Error", width: "20px" }),
           d
         ] })
       ]
@@ -96,6 +95,6 @@ function B(u) {
   );
 }
 export {
-  B as Checkbox
+  A as Checkbox
 };
 //# sourceMappingURL=Checkbox.js.map

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

package/molecules/Forms/DateField.d.ts

@@ -1,4 +1,4 @@
-import { type IconicNames, type IconicTypes } from '../../atoms/Icons';
+import { type IconicNames, type IconicTypes } from '@clubmed/trident-icons';
 import { type FormControlProps } from './FormControl.js';
 interface DateFieldProps extends Omit<FormControlProps<Date | null>, 'max' | 'min'> {
     description?: string;

package/molecules/Forms/DateField.js

@@ -1,8 +1,7 @@
 import { jsx as p, jsxs as T } from "react/jsx-runtime";
 import { c as q } from "../../chunks/index.js";
 import { useId as A, useRef as B, useState as H, useCallback as L, useEffect as J } from "react";
-import { Icon as E } from "../../atoms/Icons/Icon.js";
-import "@clubmed/trident-icons";
+import { Icon as E } from "@clubmed/trident-icons";
 import { useValue as K } from "../../hooks/useValue.js";
 import { useInternalStatus as Q } from "../../hooks/useInternalStatus.js";
 import { FormControl as U } from "./FormControl.js";
@@ -64,7 +63,7 @@ const O = (t) => t ? W(new Date(t), { representation: "date" }) : "", X = (t, e,
     return !0;
   const r = (i) => new Date(i.getFullYear(), i.getMonth(), i.getDate()), a = new Date(t), l = r(a);
   return !(e && l < r(e) || n && l > r(n));
-}, ce = (t) => {
+}, se = (t) => {
   const e = A(), {
     id: n = e,
     name: r = n,
@@ -185,6 +184,6 @@ const O = (t) => t ? W(new Date(t), { representation: "date" }) : "", X = (t, e,
   );
 };
 export {
-  ce as DateField
+  se as DateField
 };
 //# sourceMappingURL=DateField.js.map

package/molecules/Forms/DateField.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateField.js","sources":["../../../node_modules/@babel/runtime/helpers/esm/typeof.js","../../../node_modules/date-fns/esm/_lib/requiredArgs/index.js","../../../node_modules/date-fns/esm/toDate/index.js","../../../node_modules/date-fns/esm/differenceInMilliseconds/index.js","../../../node_modules/date-fns/esm/_lib/addLeadingZeros/index.js","../../../node_modules/date-fns/esm/formatISO/index.js","../../../lib/molecules/Forms/DateField.tsx"],"sourcesContent":["export default function _typeof(o) {\n  \"@babel/helpers - typeof\";\n\n  return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) {\n    return typeof o;\n  } : function (o) {\n    return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o;\n  }, _typeof(o);\n}","export default function requiredArgs(required, args) {\n  if (args.length < required) {\n    throw new TypeError(required + ' argument' + (required > 1 ? 's' : '') + ' required, but only ' + args.length + ' present');\n  }\n}","import _typeof from \"@babel/runtime/helpers/esm/typeof\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name toDate\n * @category Common Helpers\n * @summary Convert the given argument to an instance of Date.\n *\n * @description\n * Convert the given argument to an instance of Date.\n *\n * If the argument is an instance of Date, the function returns its clone.\n *\n * If the argument is a number, it is treated as a timestamp.\n *\n * If the argument is none of the above, the function returns Invalid Date.\n *\n * **Note**: *all* Date arguments passed to any *date-fns* function is processed by `toDate`.\n *\n * @param {Date|Number} argument - the value to convert\n * @returns {Date} the parsed date in the local time zone\n * @throws {TypeError} 1 argument required\n *\n * @example\n * // Clone the date:\n * const result = toDate(new Date(2014, 1, 11, 11, 30, 30))\n * //=> Tue Feb 11 2014 11:30:30\n *\n * @example\n * // Convert the timestamp to date:\n * const result = toDate(1392098430000)\n * //=> Tue Feb 11 2014 11:30:30\n */\nexport default function toDate(argument) {\n  requiredArgs(1, arguments);\n  var argStr = Object.prototype.toString.call(argument);\n\n  // Clone the date\n  if (argument instanceof Date || _typeof(argument) === 'object' && argStr === '[object Date]') {\n    // Prevent the date to lose the milliseconds when passed to new Date() in IE10\n    return new Date(argument.getTime());\n  } else if (typeof argument === 'number' || argStr === '[object Number]') {\n    return new Date(argument);\n  } else {\n    if ((typeof argument === 'string' || argStr === '[object String]') && typeof console !== 'undefined') {\n      // eslint-disable-next-line no-console\n      console.warn(\"Starting with v2.0.0-beta.1 date-fns doesn't accept strings as date arguments. Please use `parseISO` to parse strings. See: https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#string-arguments\");\n      // eslint-disable-next-line no-console\n      console.warn(new Error().stack);\n    }\n    return new Date(NaN);\n  }\n}","import toDate from \"../toDate/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name differenceInMilliseconds\n * @category Millisecond Helpers\n * @summary Get the number of milliseconds between the given dates.\n *\n * @description\n * Get the number of milliseconds between the given dates.\n *\n * @param {Date|Number} dateLeft - the later date\n * @param {Date|Number} dateRight - the earlier date\n * @returns {Number} the number of milliseconds\n * @throws {TypeError} 2 arguments required\n *\n * @example\n * // How many milliseconds are between\n * // 2 July 2014 12:30:20.600 and 2 July 2014 12:30:21.700?\n * const result = differenceInMilliseconds(\n *   new Date(2014, 6, 2, 12, 30, 21, 700),\n *   new Date(2014, 6, 2, 12, 30, 20, 600)\n * )\n * //=> 1100\n */\nexport default function differenceInMilliseconds(dateLeft, dateRight) {\n  requiredArgs(2, arguments);\n  return toDate(dateLeft).getTime() - toDate(dateRight).getTime();\n}","export default function addLeadingZeros(number, targetLength) {\n  var sign = number < 0 ? '-' : '';\n  var output = Math.abs(number).toString();\n  while (output.length < targetLength) {\n    output = '0' + output;\n  }\n  return sign + output;\n}","import toDate from \"../toDate/index.js\";\nimport addLeadingZeros from \"../_lib/addLeadingZeros/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name formatISO\n * @category Common Helpers\n * @summary Format the date according to the ISO 8601 standard (https://support.sas.com/documentation/cdl/en/lrdict/64316/HTML/default/viewer.htm#a003169814.htm).\n *\n * @description\n * Return the formatted date string in ISO 8601 format. Options may be passed to control the parts and notations of the date.\n *\n * @param {Date|Number} date - the original date\n * @param {Object} [options] - an object with options.\n * @param {'extended'|'basic'} [options.format='extended'] - if 'basic', hide delimiters between date and time values.\n * @param {'complete'|'date'|'time'} [options.representation='complete'] - format date, time with local time zone, or both.\n * @returns {String} the formatted date string (in local time zone)\n * @throws {TypeError} 1 argument required\n * @throws {RangeError} `date` must not be Invalid Date\n * @throws {RangeError} `options.format` must be 'extended' or 'basic'\n * @throws {RangeError} `options.representation` must be 'date', 'time' or 'complete'\n *\n * @example\n * // Represent 18 September 2019 in ISO 8601 format (local time zone is UTC):\n * const result = formatISO(new Date(2019, 8, 18, 19, 0, 52))\n * //=> '2019-09-18T19:00:52Z'\n *\n * @example\n * // Represent 18 September 2019 in ISO 8601, short format (local time zone is UTC):\n * const result = formatISO(new Date(2019, 8, 18, 19, 0, 52), { format: 'basic' })\n * //=> '20190918T190052'\n *\n * @example\n * // Represent 18 September 2019 in ISO 8601 format, date only:\n * const result = formatISO(new Date(2019, 8, 18, 19, 0, 52), { representation: 'date' })\n * //=> '2019-09-18'\n *\n * @example\n * // Represent 18 September 2019 in ISO 8601 format, time only (local time zone is UTC):\n * const result = formatISO(new Date(2019, 8, 18, 19, 0, 52), { representation: 'time' })\n * //=> '19:00:52Z'\n */\nexport default function formatISO(date, options) {\n  var _options$format, _options$representati;\n  requiredArgs(1, arguments);\n  var originalDate = toDate(date);\n  if (isNaN(originalDate.getTime())) {\n    throw new RangeError('Invalid time value');\n  }\n  var format = String((_options$format = options === null || options === void 0 ? void 0 : options.format) !== null && _options$format !== void 0 ? _options$format : 'extended');\n  var representation = String((_options$representati = options === null || options === void 0 ? void 0 : options.representation) !== null && _options$representati !== void 0 ? _options$representati : 'complete');\n  if (format !== 'extended' && format !== 'basic') {\n    throw new RangeError(\"format must be 'extended' or 'basic'\");\n  }\n  if (representation !== 'date' && representation !== 'time' && representation !== 'complete') {\n    throw new RangeError(\"representation must be 'date', 'time', or 'complete'\");\n  }\n  var result = '';\n  var tzOffset = '';\n  var dateDelimiter = format === 'extended' ? '-' : '';\n  var timeDelimiter = format === 'extended' ? ':' : '';\n\n  // Representation is either 'date' or 'complete'\n  if (representation !== 'time') {\n    var day = addLeadingZeros(originalDate.getDate(), 2);\n    var month = addLeadingZeros(originalDate.getMonth() + 1, 2);\n    var year = addLeadingZeros(originalDate.getFullYear(), 4);\n\n    // yyyyMMdd or yyyy-MM-dd.\n    result = \"\".concat(year).concat(dateDelimiter).concat(month).concat(dateDelimiter).concat(day);\n  }\n\n  // Representation is either 'time' or 'complete'\n  if (representation !== 'date') {\n    // Add the timezone.\n    var offset = originalDate.getTimezoneOffset();\n    if (offset !== 0) {\n      var absoluteOffset = Math.abs(offset);\n      var hourOffset = addLeadingZeros(Math.floor(absoluteOffset / 60), 2);\n      var minuteOffset = addLeadingZeros(absoluteOffset % 60, 2);\n      // If less than 0, the sign is +, because it is ahead of time.\n      var sign = offset < 0 ? '+' : '-';\n      tzOffset = \"\".concat(sign).concat(hourOffset, \":\").concat(minuteOffset);\n    } else {\n      tzOffset = 'Z';\n    }\n    var hour = addLeadingZeros(originalDate.getHours(), 2);\n    var minute = addLeadingZeros(originalDate.getMinutes(), 2);\n    var second = addLeadingZeros(originalDate.getSeconds(), 2);\n\n    // If there's also date, separate it with time with 'T'\n    var separator = result === '' ? '' : 'T';\n\n    // Creates a time string consisting of hour, minute, and second, separated by delimiters, if defined.\n    var time = [hour, minute, second].join(timeDelimiter);\n\n    // HHmmss or HH:mm:ss.\n    result = \"\".concat(result).concat(separator).concat(time).concat(tzOffset);\n  }\n  return result;\n}","import classnames from 'classnames';\nimport { differenceInMilliseconds, formatISO } from 'date-fns';\nimport { type ChangeEvent, useCallback, useEffect, useId, useRef, useState } from 'react';\nimport { Icon, type IconicNames, type IconicTypes } from '@/atoms/Icons';\n\nimport { useValue } from '@/hooks/useValue.js';\nimport { useInternalStatus } from '@/hooks/useInternalStatus.js';\nimport { FormControl, type FormControlProps } from './FormControl.js';\n\ninterface DateFieldProps extends Omit<FormControlProps<Date | null>, 'max' | 'min'> {\n  description?: string;\n  /**\n   * Open datepicker text\n   */\n  openDatepicker?: string;\n  id?: string;\n  icon?: IconicNames;\n  iconType?: IconicTypes;\n  errorMessage?: string;\n  dataTestId?: string;\n  /**\n   * Minimum Date allowed\n   */\n  min?: Date | undefined;\n  /**\n   * Maximum Date allowed\n   */\n  max?: Date | undefined;\n}\n\nconst formatDate = (value: Date | number | undefined | null): string => {\n  if (!value) {\n    return '';\n  }\n\n  return formatISO(new Date(value), { representation: 'date' });\n};\n\nconst validateDateRange = (date: string, min?: Date, max?: Date): boolean => {\n  if (!date) {\n    return true;\n  }\n\n  const normalizeDate = (d: Date) => new Date(d.getFullYear(), d.getMonth(), d.getDate());\n  const inputDate = new Date(date);\n  const normalizedInputDate = normalizeDate(inputDate);\n\n  if (min && normalizedInputDate < normalizeDate(min)) {\n    return false;\n  }\n  if (max && normalizedInputDate > normalizeDate(max)) {\n    return false;\n  }\n\n  return true;\n};\n\nexport const DateField = (props: DateFieldProps) => {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    label,\n    description,\n    openDatepicker,\n    validationStatus = 'default',\n    icon = 'CalendarDefault',\n    iconType,\n    errorMessage,\n    disabled = false,\n    required = false,\n    hideRequiredStar,\n    dataTestId = 'DateField',\n    value: initialValue,\n    min: initialMin,\n    max: initialMax,\n    onChange,\n    ...rest\n  } = props;\n\n  // NO LOGIC IS IMPLEMENTED YET HERE\n  // THIS IS A VISUAL COMPONENT ONLY\n  const ref = useRef<HTMLInputElement>(null);\n  const [isFocused, setIsFocused] = useState<boolean>(false);\n\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n\n  const { setValue, value } = useValue<string, Date | number | undefined | null>({\n    name,\n    formatter: formatDate as never,\n    initialValue,\n    onChange: (name, value) => onChange?.(name, new Date(value)),\n  });\n\n  const min = formatDate(initialMin);\n  const max = formatDate(initialMax);\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    setValue(event.target.value);\n  };\n\n  const handleClickPicker = () => {\n    ref.current?.showPicker();\n  };\n\n  const handleOutOfRangeDate = useCallback(() => {\n    const currentDate = new Date(value);\n\n    if (initialMin && initialMax) {\n      const distanceToMin = Math.abs(differenceInMilliseconds(currentDate, initialMin));\n      const distanceToMax = Math.abs(differenceInMilliseconds(currentDate, initialMax));\n      setValue(distanceToMin <= distanceToMax ? min : max);\n      return;\n    }\n\n    if (initialMin) {\n      setValue(min);\n      return;\n    }\n\n    if (initialMax) {\n      setValue(max);\n      return;\n    }\n  }, [initialMax, initialMin, max, min, setValue, value]);\n\n  useEffect(() => {\n    const isValid = validateDateRange(value, initialMin, initialMax);\n    if (!isValid && !isFocused) {\n      handleOutOfRangeDate();\n    }\n  }, [handleOutOfRangeDate, initialMax, initialMin, isFocused, value]);\n\n  return (\n    <FormControl\n      id={id}\n      label={label}\n      description={description}\n      dataName=\"DateField\"\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          type=\"date\"\n          className={classnames(\n            'text-b3 rounded-pill date-field min-h-[50px] w-full border px-20 py-12 ps-[52px] font-normal outline-none',\n            {\n              'border-lightGrey focus:border-black active:border-black':\n                internalStatus === 'default',\n              'pe-[52px]': internalStatus === 'error' || internalStatus === 'success',\n              'bg-pearl text-grey': disabled,\n              'bg-white text-black': !disabled,\n              'border-red': !disabled && internalStatus === 'error',\n              'border-green': !disabled && internalStatus === 'success',\n            },\n          )}\n          id={id}\n          disabled={disabled}\n          required={required}\n          ref={ref}\n          value={value}\n          min={min}\n          max={max}\n          onChange={handleChange}\n          onFocus={() => setIsFocused(true)}\n          onBlur={() => setIsFocused(false)}\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': disabled,\n              'text-red': !disabled && internalStatus === 'error',\n              'text-green': !disabled && internalStatus === 'success',\n            },\n          )}\n        >\n          <button className=\"pointer-events-auto leading-none\" onClick={handleClickPicker}>\n            <Icon name={icon} iconType={iconType} width=\"24px\" />\n            <span className=\"sr-only\">\n              {openDatepicker}\n              {/* REPLACE THAT WITH SOMETHING LIKE \"OPEN DATEPICKER\" SOONER RATHER THAN LATER PLZ */}\n            </span>\n          </button>\n          <span className=\"ms-auto flex gap-x-8\">\n            {internalStatus === 'error' && <Icon name=\"CrossDefault\" width=\"24px\" />}\n            {internalStatus === 'success' && <Icon name=\"CheckDefault\" width=\"24px\" />}\n          </span>\n        </div>\n      </div>\n    </FormControl>\n  );\n};\n"],"names":["_typeof","o","requiredArgs","required","args","toDate","argument","argStr","differenceInMilliseconds","dateLeft","dateRight","addLeadingZeros","number","targetLength","sign","output","formatISO","date","options","_options$format","_options$representati","originalDate","format","representation","result","tzOffset","dateDelimiter","timeDelimiter","day","month","year","offset","absoluteOffset","hourOffset","minuteOffset","hour","minute","second","separator","time","formatDate","value","validateDateRange","min","max","normalizeDate","d","inputDate","normalizedInputDate","DateField","props","internalId","useId","id","name","label","description","openDatepicker","validationStatus","icon","iconType","errorMessage","disabled","hideRequiredStar","dataTestId","initialValue","initialMin","initialMax","onChange","rest","ref","useRef","isFocused","setIsFocused","useState","internalStatus","useInternalStatus","setValue","useValue","handleChange","event","handleClickPicker","_a","handleOutOfRangeDate","useCallback","currentDate","distanceToMin","distanceToMax","useEffect","jsx","FormControl","jsxs","classnames","Icon"],"mappings":"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","x_google_ignoreList":[0,1,2,3,4,5]}
+{"version":3,"file":"DateField.js","sources":["../../../node_modules/@babel/runtime/helpers/esm/typeof.js","../../../node_modules/date-fns/esm/_lib/requiredArgs/index.js","../../../node_modules/date-fns/esm/toDate/index.js","../../../node_modules/date-fns/esm/differenceInMilliseconds/index.js","../../../node_modules/date-fns/esm/_lib/addLeadingZeros/index.js","../../../node_modules/date-fns/esm/formatISO/index.js","../../../lib/molecules/Forms/DateField.tsx"],"sourcesContent":["export default function _typeof(o) {\n  \"@babel/helpers - typeof\";\n\n  return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) {\n    return typeof o;\n  } : function (o) {\n    return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o;\n  }, _typeof(o);\n}","export default function requiredArgs(required, args) {\n  if (args.length < required) {\n    throw new TypeError(required + ' argument' + (required > 1 ? 's' : '') + ' required, but only ' + args.length + ' present');\n  }\n}","import _typeof from \"@babel/runtime/helpers/esm/typeof\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name toDate\n * @category Common Helpers\n * @summary Convert the given argument to an instance of Date.\n *\n * @description\n * Convert the given argument to an instance of Date.\n *\n * If the argument is an instance of Date, the function returns its clone.\n *\n * If the argument is a number, it is treated as a timestamp.\n *\n * If the argument is none of the above, the function returns Invalid Date.\n *\n * **Note**: *all* Date arguments passed to any *date-fns* function is processed by `toDate`.\n *\n * @param {Date|Number} argument - the value to convert\n * @returns {Date} the parsed date in the local time zone\n * @throws {TypeError} 1 argument required\n *\n * @example\n * // Clone the date:\n * const result = toDate(new Date(2014, 1, 11, 11, 30, 30))\n * //=> Tue Feb 11 2014 11:30:30\n *\n * @example\n * // Convert the timestamp to date:\n * const result = toDate(1392098430000)\n * //=> Tue Feb 11 2014 11:30:30\n */\nexport default function toDate(argument) {\n  requiredArgs(1, arguments);\n  var argStr = Object.prototype.toString.call(argument);\n\n  // Clone the date\n  if (argument instanceof Date || _typeof(argument) === 'object' && argStr === '[object Date]') {\n    // Prevent the date to lose the milliseconds when passed to new Date() in IE10\n    return new Date(argument.getTime());\n  } else if (typeof argument === 'number' || argStr === '[object Number]') {\n    return new Date(argument);\n  } else {\n    if ((typeof argument === 'string' || argStr === '[object String]') && typeof console !== 'undefined') {\n      // eslint-disable-next-line no-console\n      console.warn(\"Starting with v2.0.0-beta.1 date-fns doesn't accept strings as date arguments. Please use `parseISO` to parse strings. See: https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#string-arguments\");\n      // eslint-disable-next-line no-console\n      console.warn(new Error().stack);\n    }\n    return new Date(NaN);\n  }\n}","import toDate from \"../toDate/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name differenceInMilliseconds\n * @category Millisecond Helpers\n * @summary Get the number of milliseconds between the given dates.\n *\n * @description\n * Get the number of milliseconds between the given dates.\n *\n * @param {Date|Number} dateLeft - the later date\n * @param {Date|Number} dateRight - the earlier date\n * @returns {Number} the number of milliseconds\n * @throws {TypeError} 2 arguments required\n *\n * @example\n * // How many milliseconds are between\n * // 2 July 2014 12:30:20.600 and 2 July 2014 12:30:21.700?\n * const result = differenceInMilliseconds(\n *   new Date(2014, 6, 2, 12, 30, 21, 700),\n *   new Date(2014, 6, 2, 12, 30, 20, 600)\n * )\n * //=> 1100\n */\nexport default function differenceInMilliseconds(dateLeft, dateRight) {\n  requiredArgs(2, arguments);\n  return toDate(dateLeft).getTime() - toDate(dateRight).getTime();\n}","export default function addLeadingZeros(number, targetLength) {\n  var sign = number < 0 ? '-' : '';\n  var output = Math.abs(number).toString();\n  while (output.length < targetLength) {\n    output = '0' + output;\n  }\n  return sign + output;\n}","import toDate from \"../toDate/index.js\";\nimport addLeadingZeros from \"../_lib/addLeadingZeros/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name formatISO\n * @category Common Helpers\n * @summary Format the date according to the ISO 8601 standard (https://support.sas.com/documentation/cdl/en/lrdict/64316/HTML/default/viewer.htm#a003169814.htm).\n *\n * @description\n * Return the formatted date string in ISO 8601 format. Options may be passed to control the parts and notations of the date.\n *\n * @param {Date|Number} date - the original date\n * @param {Object} [options] - an object with options.\n * @param {'extended'|'basic'} [options.format='extended'] - if 'basic', hide delimiters between date and time values.\n * @param {'complete'|'date'|'time'} [options.representation='complete'] - format date, time with local time zone, or both.\n * @returns {String} the formatted date string (in local time zone)\n * @throws {TypeError} 1 argument required\n * @throws {RangeError} `date` must not be Invalid Date\n * @throws {RangeError} `options.format` must be 'extended' or 'basic'\n * @throws {RangeError} `options.representation` must be 'date', 'time' or 'complete'\n *\n * @example\n * // Represent 18 September 2019 in ISO 8601 format (local time zone is UTC):\n * const result = formatISO(new Date(2019, 8, 18, 19, 0, 52))\n * //=> '2019-09-18T19:00:52Z'\n *\n * @example\n * // Represent 18 September 2019 in ISO 8601, short format (local time zone is UTC):\n * const result = formatISO(new Date(2019, 8, 18, 19, 0, 52), { format: 'basic' })\n * //=> '20190918T190052'\n *\n * @example\n * // Represent 18 September 2019 in ISO 8601 format, date only:\n * const result = formatISO(new Date(2019, 8, 18, 19, 0, 52), { representation: 'date' })\n * //=> '2019-09-18'\n *\n * @example\n * // Represent 18 September 2019 in ISO 8601 format, time only (local time zone is UTC):\n * const result = formatISO(new Date(2019, 8, 18, 19, 0, 52), { representation: 'time' })\n * //=> '19:00:52Z'\n */\nexport default function formatISO(date, options) {\n  var _options$format, _options$representati;\n  requiredArgs(1, arguments);\n  var originalDate = toDate(date);\n  if (isNaN(originalDate.getTime())) {\n    throw new RangeError('Invalid time value');\n  }\n  var format = String((_options$format = options === null || options === void 0 ? void 0 : options.format) !== null && _options$format !== void 0 ? _options$format : 'extended');\n  var representation = String((_options$representati = options === null || options === void 0 ? void 0 : options.representation) !== null && _options$representati !== void 0 ? _options$representati : 'complete');\n  if (format !== 'extended' && format !== 'basic') {\n    throw new RangeError(\"format must be 'extended' or 'basic'\");\n  }\n  if (representation !== 'date' && representation !== 'time' && representation !== 'complete') {\n    throw new RangeError(\"representation must be 'date', 'time', or 'complete'\");\n  }\n  var result = '';\n  var tzOffset = '';\n  var dateDelimiter = format === 'extended' ? '-' : '';\n  var timeDelimiter = format === 'extended' ? ':' : '';\n\n  // Representation is either 'date' or 'complete'\n  if (representation !== 'time') {\n    var day = addLeadingZeros(originalDate.getDate(), 2);\n    var month = addLeadingZeros(originalDate.getMonth() + 1, 2);\n    var year = addLeadingZeros(originalDate.getFullYear(), 4);\n\n    // yyyyMMdd or yyyy-MM-dd.\n    result = \"\".concat(year).concat(dateDelimiter).concat(month).concat(dateDelimiter).concat(day);\n  }\n\n  // Representation is either 'time' or 'complete'\n  if (representation !== 'date') {\n    // Add the timezone.\n    var offset = originalDate.getTimezoneOffset();\n    if (offset !== 0) {\n      var absoluteOffset = Math.abs(offset);\n      var hourOffset = addLeadingZeros(Math.floor(absoluteOffset / 60), 2);\n      var minuteOffset = addLeadingZeros(absoluteOffset % 60, 2);\n      // If less than 0, the sign is +, because it is ahead of time.\n      var sign = offset < 0 ? '+' : '-';\n      tzOffset = \"\".concat(sign).concat(hourOffset, \":\").concat(minuteOffset);\n    } else {\n      tzOffset = 'Z';\n    }\n    var hour = addLeadingZeros(originalDate.getHours(), 2);\n    var minute = addLeadingZeros(originalDate.getMinutes(), 2);\n    var second = addLeadingZeros(originalDate.getSeconds(), 2);\n\n    // If there's also date, separate it with time with 'T'\n    var separator = result === '' ? '' : 'T';\n\n    // Creates a time string consisting of hour, minute, and second, separated by delimiters, if defined.\n    var time = [hour, minute, second].join(timeDelimiter);\n\n    // HHmmss or HH:mm:ss.\n    result = \"\".concat(result).concat(separator).concat(time).concat(tzOffset);\n  }\n  return result;\n}","import classnames from 'classnames';\nimport { differenceInMilliseconds, formatISO } from 'date-fns';\nimport { type ChangeEvent, useCallback, useEffect, useId, useRef, useState } from 'react';\nimport { Icon, type IconicNames, type IconicTypes } from '@clubmed/trident-icons';\n\nimport { useValue } from '@/hooks/useValue.js';\nimport { useInternalStatus } from '@/hooks/useInternalStatus.js';\nimport { FormControl, type FormControlProps } from './FormControl.js';\n\ninterface DateFieldProps extends Omit<FormControlProps<Date | null>, 'max' | 'min'> {\n  description?: string;\n  /**\n   * Open datepicker text\n   */\n  openDatepicker?: string;\n  id?: string;\n  icon?: IconicNames;\n  iconType?: IconicTypes;\n  errorMessage?: string;\n  dataTestId?: string;\n  /**\n   * Minimum Date allowed\n   */\n  min?: Date | undefined;\n  /**\n   * Maximum Date allowed\n   */\n  max?: Date | undefined;\n}\n\nconst formatDate = (value: Date | number | undefined | null): string => {\n  if (!value) {\n    return '';\n  }\n\n  return formatISO(new Date(value), { representation: 'date' });\n};\n\nconst validateDateRange = (date: string, min?: Date, max?: Date): boolean => {\n  if (!date) {\n    return true;\n  }\n\n  const normalizeDate = (d: Date) => new Date(d.getFullYear(), d.getMonth(), d.getDate());\n  const inputDate = new Date(date);\n  const normalizedInputDate = normalizeDate(inputDate);\n\n  if (min && normalizedInputDate < normalizeDate(min)) {\n    return false;\n  }\n  if (max && normalizedInputDate > normalizeDate(max)) {\n    return false;\n  }\n\n  return true;\n};\n\nexport const DateField = (props: DateFieldProps) => {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    label,\n    description,\n    openDatepicker,\n    validationStatus = 'default',\n    icon = 'CalendarDefault',\n    iconType,\n    errorMessage,\n    disabled = false,\n    required = false,\n    hideRequiredStar,\n    dataTestId = 'DateField',\n    value: initialValue,\n    min: initialMin,\n    max: initialMax,\n    onChange,\n    ...rest\n  } = props;\n\n  // NO LOGIC IS IMPLEMENTED YET HERE\n  // THIS IS A VISUAL COMPONENT ONLY\n  const ref = useRef<HTMLInputElement>(null);\n  const [isFocused, setIsFocused] = useState<boolean>(false);\n\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n\n  const { setValue, value } = useValue<string, Date | number | undefined | null>({\n    name,\n    formatter: formatDate as never,\n    initialValue,\n    onChange: (name, value) => onChange?.(name, new Date(value)),\n  });\n\n  const min = formatDate(initialMin);\n  const max = formatDate(initialMax);\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    setValue(event.target.value);\n  };\n\n  const handleClickPicker = () => {\n    ref.current?.showPicker();\n  };\n\n  const handleOutOfRangeDate = useCallback(() => {\n    const currentDate = new Date(value);\n\n    if (initialMin && initialMax) {\n      const distanceToMin = Math.abs(differenceInMilliseconds(currentDate, initialMin));\n      const distanceToMax = Math.abs(differenceInMilliseconds(currentDate, initialMax));\n      setValue(distanceToMin <= distanceToMax ? min : max);\n      return;\n    }\n\n    if (initialMin) {\n      setValue(min);\n      return;\n    }\n\n    if (initialMax) {\n      setValue(max);\n      return;\n    }\n  }, [initialMax, initialMin, max, min, setValue, value]);\n\n  useEffect(() => {\n    const isValid = validateDateRange(value, initialMin, initialMax);\n    if (!isValid && !isFocused) {\n      handleOutOfRangeDate();\n    }\n  }, [handleOutOfRangeDate, initialMax, initialMin, isFocused, value]);\n\n  return (\n    <FormControl\n      id={id}\n      label={label}\n      description={description}\n      dataName=\"DateField\"\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          type=\"date\"\n          className={classnames(\n            'text-b3 rounded-pill date-field min-h-[50px] w-full border px-20 py-12 ps-[52px] font-normal outline-none',\n            {\n              'border-lightGrey focus:border-black active:border-black':\n                internalStatus === 'default',\n              'pe-[52px]': internalStatus === 'error' || internalStatus === 'success',\n              'bg-pearl text-grey': disabled,\n              'bg-white text-black': !disabled,\n              'border-red': !disabled && internalStatus === 'error',\n              'border-green': !disabled && internalStatus === 'success',\n            },\n          )}\n          id={id}\n          disabled={disabled}\n          required={required}\n          ref={ref}\n          value={value}\n          min={min}\n          max={max}\n          onChange={handleChange}\n          onFocus={() => setIsFocused(true)}\n          onBlur={() => setIsFocused(false)}\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': disabled,\n              'text-red': !disabled && internalStatus === 'error',\n              'text-green': !disabled && internalStatus === 'success',\n            },\n          )}\n        >\n          <button className=\"pointer-events-auto leading-none\" onClick={handleClickPicker}>\n            <Icon name={icon} iconType={iconType} width=\"24px\" />\n            <span className=\"sr-only\">\n              {openDatepicker}\n              {/* REPLACE THAT WITH SOMETHING LIKE \"OPEN DATEPICKER\" SOONER RATHER THAN LATER PLZ */}\n            </span>\n          </button>\n          <span className=\"ms-auto flex gap-x-8\">\n            {internalStatus === 'error' && <Icon name=\"CrossDefault\" width=\"24px\" />}\n            {internalStatus === 'success' && <Icon name=\"CheckDefault\" width=\"24px\" />}\n          </span>\n        </div>\n      </div>\n    </FormControl>\n  );\n};\n"],"names":["_typeof","o","requiredArgs","required","args","toDate","argument","argStr","differenceInMilliseconds","dateLeft","dateRight","addLeadingZeros","number","targetLength","sign","output","formatISO","date","options","_options$format","_options$representati","originalDate","format","representation","result","tzOffset","dateDelimiter","timeDelimiter","day","month","year","offset","absoluteOffset","hourOffset","minuteOffset","hour","minute","second","separator","time","formatDate","value","validateDateRange","min","max","normalizeDate","d","inputDate","normalizedInputDate","DateField","props","internalId","useId","id","name","label","description","openDatepicker","validationStatus","icon","iconType","errorMessage","disabled","hideRequiredStar","dataTestId","initialValue","initialMin","initialMax","onChange","rest","ref","useRef","isFocused","setIsFocused","useState","internalStatus","useInternalStatus","setValue","useValue","handleChange","event","handleClickPicker","_a","handleOutOfRangeDate","useCallback","currentDate","distanceToMin","distanceToMax","useEffect","jsx","FormControl","jsxs","classnames","Icon"],"mappings":"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","x_google_ignoreList":[0,1,2,3,4,5]}

package/molecules/Forms/Filter.js

@@ -2,16 +2,15 @@ import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import { c as r } from "../../chunks/index.js";
 import { useId as D } from "react";
 /* empty css                    */
-import { Icon as c } from "../../atoms/Icons/Icon.js";
-import "@clubmed/trident-icons";
+import { Icon as c } from "@clubmed/trident-icons";
 import { useValue as N } from "../../hooks/useValue.js";
-function T(m) {
+function A(m) {
   const d = D(), {
-    id: p = d,
-    name: l = p,
-    className: u,
+    id: u = d,
+    name: l = u,
+    className: p,
     dataTestId: h,
-    disabled: o,
+    disabled: n,
     checked: f = !1,
     value: a,
     tabIndex: b = 0,
@@ -19,14 +18,14 @@ function T(m) {
     hasDropdown: x,
     children: k,
     ...w
-  } = m, { value: n, setValue: I } = N({
+  } = m, { value: o, setValue: I } = N({
     name: l,
     initialValue: f,
     onChange(v, s) {
       t == null || t(v, s ? a !== void 0 ? a : s : null);
     }
   });
-  return /* @__PURE__ */ i("label", { className: r(u, "relative"), children: [
+  return /* @__PURE__ */ i("label", { className: r(p, "relative"), children: [
     /* @__PURE__ */ e(
       "input",
       {
@@ -36,11 +35,11 @@ function T(m) {
         type: "checkbox",
         tabIndex: b,
         onChange: () => {
-          !o && I(!n);
+          !n && I(!o);
         },
-        checked: n,
+        checked: o,
         "data-name": "Filter",
-        disabled: o,
+        disabled: n,
         value: a
       }
     ),
@@ -52,6 +51,6 @@ function T(m) {
   ] });
 }
 export {
-  T as Filter
+  A as Filter
 };
 //# sourceMappingURL=Filter.js.map

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 '@/atoms/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,KAAA,QAAAA,EAAWP,GAAMW,IAAYN,MAAU,SAAYA,IAAQM,IAAqB;AAAA,IAClF;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          !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,KAAA,QAAAA,EAAWP,GAAMW,IAAYN,MAAU,SAAYA,IAAQM,IAAqB;AAAA,IAClF;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;"}

package/molecules/Forms/FormControl.js

@@ -1,34 +1,33 @@
 import { jsxs as s, jsx as e } from "react/jsx-runtime";
 import { useInternalStatus as h } from "../../hooks/useInternalStatus.js";
 import { FormLabel as S } from "./FormLabel.js";
-import { Icon as b } from "../../atoms/Icons/Icon.js";
-import "@clubmed/trident-icons";
+import { Icon as b } from "@clubmed/trident-icons";
 import { c as g } from "../../chunks/index.js";
-const w = ({
+const v = ({
   id: t,
   label: r,
   description: o,
-  disabled: m,
-  required: n,
-  className: i,
-  validationStatus: l = "default",
-  children: p,
+  disabled: n,
+  required: m,
+  className: l,
+  validationStatus: i = "default",
+  children: c,
   errorMessage: a,
-  dataTestId: c,
+  dataTestId: p,
   dataName: d,
   hideRequiredStar: x,
   layout: f
 }) => {
   const u = h({
-    isDisabled: !!m,
-    validationStatus: l
+    isDisabled: !!n,
+    validationStatus: i
   }) === "error" && a;
   return /* @__PURE__ */ s(
     "div",
     {
-      className: g("flex flex-col gap-4", i),
+      className: g("flex flex-col gap-4", l),
       "data-name": d,
-      "data-testid": c,
+      "data-testid": p,
       children: [
         r && t && /* @__PURE__ */ e(
           S,
@@ -36,12 +35,12 @@ const w = ({
             description: o,
             id: t,
             layout: f,
-            required: n,
+            required: m,
             hideRequiredStar: x,
             children: r
           }
         ),
-        p,
+        c,
         u && /* @__PURE__ */ s("span", { className: "text-red text-b4 flex items-start gap-x-4 px-20", children: [
           /* @__PURE__ */ e(b, { name: "Error", width: "20px" }),
           a
@@ -51,6 +50,6 @@ const w = ({
   );
 };
 export {
-  w as FormControl
+  v as FormControl
 };
 //# sourceMappingURL=FormControl.js.map

package/molecules/Forms/FormControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormControl.js","sources":["../../../lib/molecules/Forms/FormControl.tsx"],"sourcesContent":["import type { HTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';\nimport { useInternalStatus, type ValidationStatus } from '@/hooks/useInternalStatus';\nimport { FormLabel, type FormLabelProps } from './FormLabel';\nimport { Icon } from '@/atoms/Icons';\nimport classnames from 'classnames';\n\nexport type FormControlProps<\n  Value = unknown,\n  Attributes extends HTMLAttributes<HTMLElement> = InputHTMLAttributes<HTMLInputElement>,\n> = {\n  value?: Value;\n  label?: ReactNode;\n  validationStatus?: ValidationStatus;\n  onChange?: (name: string, value: Value) => void;\n  dataTestId?: string;\n  dataName?: string;\n  errorMessage?: string;\n} & Omit<Attributes & Partial<FormLabelProps>, 'onChange' | 'value'>;\n\nexport const FormControl = <Value = string,>({\n  id,\n  label,\n  description,\n  disabled,\n  required,\n  className,\n  validationStatus = 'default',\n  children,\n  errorMessage,\n  dataTestId,\n  dataName,\n  hideRequiredStar,\n  layout,\n}: FormControlProps<Value>) => {\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 gap-4', className)}\n      data-name={dataName}\n      data-testid={dataTestId}\n    >\n      {label && id && (\n        <FormLabel\n          description={description}\n          id={id}\n          layout={layout}\n          required={required}\n          hideRequiredStar={hideRequiredStar}\n        >\n          {label}\n        </FormLabel>\n      )}\n\n      {children}\n\n      {shouldDisplayErrorMessage && (\n        <span className=\"text-red text-b4 flex items-start gap-x-4 px-20\">\n          <Icon name=\"Error\" width=\"20px\" />\n          {errorMessage}\n        </span>\n      )}\n    </div>\n  );\n};\n"],"names":["FormControl","id","label","description","disabled","required","className","validationStatus","children","errorMessage","dataTestId","dataName","hideRequiredStar","layout","shouldDisplayErrorMessage","useInternalStatus","jsxs","classnames","jsx","FormLabel","Icon"],"mappings":";;;;;;AAmBO,MAAMA,IAAc,CAAkB;AAAA,EAC3C,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,kBAAAC,IAAmB;AAAA,EACnB,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,QAAAC;AACF,MAA+B;AAM7B,QAAMC,IALiBC,EAAkB;AAAA,IACvC,YAAY,CAAC,CAACX;AAAA,IACd,kBAAAG;AAAA,EAAA,CACD,MAEoD,WAAWE;AAEhE,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAW,uBAAuBX,CAAS;AAAA,MACtD,aAAWK;AAAA,MACX,eAAaD;AAAA,MAEZ,UAAA;AAAA,QAAAR,KAASD,KACR,gBAAAiB;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,aAAAhB;AAAA,YACA,IAAAF;AAAA,YACA,QAAAY;AAAA,YACA,UAAAR;AAAA,YACA,kBAAAO;AAAA,YAEC,UAAAV;AAAA,UAAA;AAAA,QAAA;AAAA,QAIJM;AAAA,QAEAM,KACC,gBAAAE,EAAC,QAAA,EAAK,WAAU,mDACd,UAAA;AAAA,UAAA,gBAAAE,EAACE,GAAA,EAAK,MAAK,SAAQ,OAAM,QAAO;AAAA,UAC/BX;AAAA,QAAA,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}
+{"version":3,"file":"FormControl.js","sources":["../../../lib/molecules/Forms/FormControl.tsx"],"sourcesContent":["import type { HTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';\nimport { useInternalStatus, type ValidationStatus } from '@/hooks/useInternalStatus';\nimport { FormLabel, type FormLabelProps } from './FormLabel';\nimport { Icon } from '@clubmed/trident-icons';\nimport classnames from 'classnames';\n\nexport type FormControlProps<\n  Value = unknown,\n  Attributes extends HTMLAttributes<HTMLElement> = InputHTMLAttributes<HTMLInputElement>,\n> = {\n  value?: Value;\n  label?: ReactNode;\n  validationStatus?: ValidationStatus;\n  onChange?: (name: string, value: Value) => void;\n  dataTestId?: string;\n  dataName?: string;\n  errorMessage?: string;\n} & Omit<Attributes & Partial<FormLabelProps>, 'onChange' | 'value'>;\n\nexport const FormControl = <Value = string,>({\n  id,\n  label,\n  description,\n  disabled,\n  required,\n  className,\n  validationStatus = 'default',\n  children,\n  errorMessage,\n  dataTestId,\n  dataName,\n  hideRequiredStar,\n  layout,\n}: FormControlProps<Value>) => {\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 gap-4', className)}\n      data-name={dataName}\n      data-testid={dataTestId}\n    >\n      {label && id && (\n        <FormLabel\n          description={description}\n          id={id}\n          layout={layout}\n          required={required}\n          hideRequiredStar={hideRequiredStar}\n        >\n          {label}\n        </FormLabel>\n      )}\n\n      {children}\n\n      {shouldDisplayErrorMessage && (\n        <span className=\"text-red text-b4 flex items-start gap-x-4 px-20\">\n          <Icon name=\"Error\" width=\"20px\" />\n          {errorMessage}\n        </span>\n      )}\n    </div>\n  );\n};\n"],"names":["FormControl","id","label","description","disabled","required","className","validationStatus","children","errorMessage","dataTestId","dataName","hideRequiredStar","layout","shouldDisplayErrorMessage","useInternalStatus","jsxs","classnames","jsx","FormLabel","Icon"],"mappings":";;;;;AAmBO,MAAMA,IAAc,CAAkB;AAAA,EAC3C,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,kBAAAC,IAAmB;AAAA,EACnB,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,QAAAC;AACF,MAA+B;AAM7B,QAAMC,IALiBC,EAAkB;AAAA,IACvC,YAAY,CAAC,CAACX;AAAA,IACd,kBAAAG;AAAA,EAAA,CACD,MAEoD,WAAWE;AAEhE,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAW,uBAAuBX,CAAS;AAAA,MACtD,aAAWK;AAAA,MACX,eAAaD;AAAA,MAEZ,UAAA;AAAA,QAAAR,KAASD,KACR,gBAAAiB;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,aAAAhB;AAAA,YACA,IAAAF;AAAA,YACA,QAAAY;AAAA,YACA,UAAAR;AAAA,YACA,kBAAAO;AAAA,YAEC,UAAAV;AAAA,UAAA;AAAA,QAAA;AAAA,QAIJM;AAAA,QAEAM,KACC,gBAAAE,EAAC,QAAA,EAAK,WAAU,mDACd,UAAA;AAAA,UAAA,gBAAAE,EAACE,GAAA,EAAK,MAAK,SAAQ,OAAM,QAAO;AAAA,UAC/BX;AAAA,QAAA,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/molecules/Forms/Password/Password.js

@@ -1,13 +1,12 @@
-import { jsxs as p, jsx as a } from "react/jsx-runtime";
+import { jsxs as c, jsx as a } from "react/jsx-runtime";
 import { useInternalStatus as M } from "../../../hooks/useInternalStatus.js";
 import { c as f } from "../../../chunks/index.js";
 import { useId as P, useState as T, useEffect as q } from "react";
 import { useValue as F } from "../../../hooks/useValue.js";
 import { FormControl as z } from "../FormControl.js";
-import { Icon as c } from "../../../atoms/Icons/Icon.js";
-import "@clubmed/trident-icons";
+import { Icon as p } from "@clubmed/trident-icons";
 import { ValidationMessage as E } from "./ValidationMessage.js";
-function Q(b) {
+function O(b) {
   const x = P(), {
     id: l = x,
     name: o = l,
@@ -36,7 +35,7 @@ function Q(b) {
     n(t ? "password" : r);
   }, [r, t]);
   const k = () => n(r === "password" ? "text" : "password");
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ c(
     z,
     {
       className: y,
@@ -50,7 +49,7 @@ function Q(b) {
       validationStatus: s ? "default" : e,
       errorMessage: w,
       children: [
-        /* @__PURE__ */ p("div", { className: "relative", children: [
+        /* @__PURE__ */ c("div", { className: "relative", children: [
           /* @__PURE__ */ a(
             "input",
             {
@@ -82,9 +81,9 @@ function Q(b) {
               className: f(
                 "pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12"
               ),
-              children: /* @__PURE__ */ p("span", { className: "ms-auto flex gap-x-8", children: [
-                !s && e === "error" && /* @__PURE__ */ a(c, { name: "CrossDefault", color: "red", width: "24px" }),
-                !s && e === "success" && /* @__PURE__ */ a(c, { name: "CheckDefault", color: "green", width: "24px" }),
+              children: /* @__PURE__ */ c("span", { className: "ms-auto flex gap-x-8", children: [
+                !s && e === "error" && /* @__PURE__ */ a(p, { name: "CrossDefault", color: "red", width: "24px" }),
+                !s && e === "success" && /* @__PURE__ */ a(p, { name: "CheckDefault", color: "green", width: "24px" }),
                 !t && /* @__PURE__ */ a(
                   "button",
                   {
@@ -92,7 +91,7 @@ function Q(b) {
                     className: "pointer-events-auto size-24 inline-flex",
                     onClick: k,
                     children: /* @__PURE__ */ a(
-                      c,
+                      p,
                       {
                         name: r === "password" ? "Invisible" : "Visible",
                         width: "24px",
@@ -111,6 +110,6 @@ function Q(b) {
   );
 }
 export {
-  Q as Password
+  O as Password
 };
 //# sourceMappingURL=Password.js.map

package/molecules/Forms/Password/Password.js.map

@@ -1 +1 @@
-{"version":3,"file":"Password.js","sources":["../../../../lib/molecules/Forms/Password/Password.tsx"],"sourcesContent":["import { useInternalStatus } from '@/hooks/useInternalStatus';\nimport classnames from 'classnames';\n\nimport { type HTMLInputTypeAttribute, useEffect, useId, useState } from 'react';\n\nimport { useValue } from '@/hooks/useValue';\nimport { FormControl, type FormControlProps } from '../FormControl';\nimport { Icon } from '@/atoms/Icons';\nimport { ValidationMessage } from './ValidationMessage';\n\nexport interface PasswordProps<Value> extends FormControlProps<Value> {\n  validationMessages?: ValidationMessage[];\n  withoutFieldValidation?: boolean;\n}\n\nexport function Password<Value = string>(props: PasswordProps<Value>) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    label,\n    value: initialValue,\n    disabled = false,\n    required = false,\n    hideRequiredStar,\n    validationStatus = 'default',\n    errorMessage,\n    validationMessages = [],\n    withoutFieldValidation = false,\n    className,\n    onChange,\n    dataTestId = 'Password',\n    ...rest\n  } = props;\n\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n\n  const { value, setValue } = useValue<Value>({\n    name,\n    initialValue,\n    onChange,\n  });\n  const [type, setType] = useState<HTMLInputTypeAttribute>('password');\n\n  useEffect(() => {\n    if (disabled) {\n      setType('password');\n    } else {\n      setType(type);\n    }\n  }, [type, disabled]);\n\n  const toggleType = () => setType(type === 'password' ? 'text' : 'password');\n\n  return (\n    <FormControl\n      className={className}\n      id={id}\n      label={label}\n      dataName=\"Password\"\n      dataTestId={dataTestId}\n      disabled={disabled}\n      required={required}\n      hideRequiredStar={hideRequiredStar}\n      validationStatus={withoutFieldValidation ? 'default' : validationStatus}\n      errorMessage={errorMessage}\n    >\n      <div className=\"relative\">\n        <input\n          {...rest}\n          id={id}\n          name={name}\n          type={type}\n          value={value as any}\n          disabled={disabled}\n          required={required}\n          onChange={(e) => setValue(e.target.value as Value)}\n          className={classnames(\n            'text-b3 rounded-pill w-full border ps-20 py-[11px] font-normal outline-none',\n            {\n              'border-lightGrey focus:border-black active:border-black pe-[52px]':\n                (withoutFieldValidation || validationStatus === 'default') &&\n                internalStatus !== 'disabled',\n              'bg-white text-black': internalStatus !== 'disabled',\n              'bg-pearl text-grey': internalStatus === 'disabled',\n              'pe-[84px]':\n                !withoutFieldValidation &&\n                (validationStatus === 'error' || validationStatus === 'success'),\n              'border-red': !withoutFieldValidation && validationStatus === 'error',\n              'border-green': !withoutFieldValidation && validationStatus === '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        >\n          <span className=\"ms-auto flex gap-x-8\">\n            {!withoutFieldValidation && validationStatus === 'error' && (\n              <Icon name=\"CrossDefault\" color=\"red\" width=\"24px\" />\n            )}\n\n            {!withoutFieldValidation && validationStatus === 'success' && (\n              <Icon name=\"CheckDefault\" color=\"green\" width=\"24px\" />\n            )}\n\n            {!disabled && (\n              <button\n                type=\"button\"\n                className=\"pointer-events-auto size-24 inline-flex\"\n                onClick={toggleType}\n              >\n                <Icon\n                  name={type === 'password' ? 'Invisible' : 'Visible'}\n                  width=\"24px\"\n                  type=\"svg\"\n                />\n              </button>\n            )}\n          </span>\n        </div>\n      </div>\n\n      {validationMessages.length > 0 && (\n        <div className=\"flex flex-col gap-[10px] mt-8\">\n          {validationMessages.map(({ label, status }, index) => (\n            <ValidationMessage label={label} status={status} key={index} />\n          ))}\n        </div>\n      )}\n    </FormControl>\n  );\n}\n"],"names":["Password","props","internalId","useId","id","name","label","initialValue","disabled","required","hideRequiredStar","validationStatus","errorMessage","validationMessages","withoutFieldValidation","className","onChange","dataTestId","rest","internalStatus","useInternalStatus","value","setValue","useValue","type","setType","useState","useEffect","toggleType","jsxs","FormControl","jsx","e","classnames","Icon","status","index","ValidationMessage"],"mappings":"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"}
+{"version":3,"file":"Password.js","sources":["../../../../lib/molecules/Forms/Password/Password.tsx"],"sourcesContent":["import { useInternalStatus } from '@/hooks/useInternalStatus';\nimport classnames from 'classnames';\n\nimport { type HTMLInputTypeAttribute, useEffect, useId, useState } from 'react';\n\nimport { useValue } from '@/hooks/useValue';\nimport { FormControl, type FormControlProps } from '../FormControl';\nimport { Icon } from '@clubmed/trident-icons';\nimport { ValidationMessage } from './ValidationMessage';\n\nexport interface PasswordProps<Value> extends FormControlProps<Value> {\n  validationMessages?: ValidationMessage[];\n  withoutFieldValidation?: boolean;\n}\n\nexport function Password<Value = string>(props: PasswordProps<Value>) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    label,\n    value: initialValue,\n    disabled = false,\n    required = false,\n    hideRequiredStar,\n    validationStatus = 'default',\n    errorMessage,\n    validationMessages = [],\n    withoutFieldValidation = false,\n    className,\n    onChange,\n    dataTestId = 'Password',\n    ...rest\n  } = props;\n\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n\n  const { value, setValue } = useValue<Value>({\n    name,\n    initialValue,\n    onChange,\n  });\n  const [type, setType] = useState<HTMLInputTypeAttribute>('password');\n\n  useEffect(() => {\n    if (disabled) {\n      setType('password');\n    } else {\n      setType(type);\n    }\n  }, [type, disabled]);\n\n  const toggleType = () => setType(type === 'password' ? 'text' : 'password');\n\n  return (\n    <FormControl\n      className={className}\n      id={id}\n      label={label}\n      dataName=\"Password\"\n      dataTestId={dataTestId}\n      disabled={disabled}\n      required={required}\n      hideRequiredStar={hideRequiredStar}\n      validationStatus={withoutFieldValidation ? 'default' : validationStatus}\n      errorMessage={errorMessage}\n    >\n      <div className=\"relative\">\n        <input\n          {...rest}\n          id={id}\n          name={name}\n          type={type}\n          value={value as any}\n          disabled={disabled}\n          required={required}\n          onChange={(e) => setValue(e.target.value as Value)}\n          className={classnames(\n            'text-b3 rounded-pill w-full border ps-20 py-[11px] font-normal outline-none',\n            {\n              'border-lightGrey focus:border-black active:border-black pe-[52px]':\n                (withoutFieldValidation || validationStatus === 'default') &&\n                internalStatus !== 'disabled',\n              'bg-white text-black': internalStatus !== 'disabled',\n              'bg-pearl text-grey': internalStatus === 'disabled',\n              'pe-[84px]':\n                !withoutFieldValidation &&\n                (validationStatus === 'error' || validationStatus === 'success'),\n              'border-red': !withoutFieldValidation && validationStatus === 'error',\n              'border-green': !withoutFieldValidation && validationStatus === '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        >\n          <span className=\"ms-auto flex gap-x-8\">\n            {!withoutFieldValidation && validationStatus === 'error' && (\n              <Icon name=\"CrossDefault\" color=\"red\" width=\"24px\" />\n            )}\n\n            {!withoutFieldValidation && validationStatus === 'success' && (\n              <Icon name=\"CheckDefault\" color=\"green\" width=\"24px\" />\n            )}\n\n            {!disabled && (\n              <button\n                type=\"button\"\n                className=\"pointer-events-auto size-24 inline-flex\"\n                onClick={toggleType}\n              >\n                <Icon\n                  name={type === 'password' ? 'Invisible' : 'Visible'}\n                  width=\"24px\"\n                  type=\"svg\"\n                />\n              </button>\n            )}\n          </span>\n        </div>\n      </div>\n\n      {validationMessages.length > 0 && (\n        <div className=\"flex flex-col gap-[10px] mt-8\">\n          {validationMessages.map(({ label, status }, index) => (\n            <ValidationMessage label={label} status={status} key={index} />\n          ))}\n        </div>\n      )}\n    </FormControl>\n  );\n}\n"],"names":["Password","props","internalId","useId","id","name","label","initialValue","disabled","required","hideRequiredStar","validationStatus","errorMessage","validationMessages","withoutFieldValidation","className","onChange","dataTestId","rest","internalStatus","useInternalStatus","value","setValue","useValue","type","setType","useState","useEffect","toggleType","jsxs","FormControl","jsx","e","classnames","Icon","status","index","ValidationMessage"],"mappings":"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"}

package/molecules/Forms/Password/ValidationMessage.js

@@ -1,8 +1,7 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import { c as s } from "../../../chunks/index.js";
-import { Icon as t } from "../../../atoms/Icons/Icon.js";
-import "@clubmed/trident-icons";
-const a = {
+import { Icon as a } from "@clubmed/trident-icons";
+const t = {
   default: {
     iconName: "Edit",
     iconColor: "middleGrey"
@@ -16,14 +15,14 @@ const a = {
     iconColor: "green"
   }
 };
-function x({ label: r, status: c }) {
-  const { iconName: i, iconColor: o } = a[c];
-  return /* @__PURE__ */ n("div", { className: "flex gap-[6px] px-20 items-center", children: [
-    /* @__PURE__ */ e(t, { name: i, width: "30px", color: o }),
+function p({ label: r, status: c }) {
+  const { iconName: n, iconColor: o } = t[c];
+  return /* @__PURE__ */ i("div", { className: "flex gap-[6px] px-20 items-center", children: [
+    /* @__PURE__ */ e(a, { name: n, width: "30px", color: o }),
     /* @__PURE__ */ e("span", { className: s("text-b3", `text-${o}`), children: r })
   ] });
 }
 export {
-  x as ValidationMessage
+  p as ValidationMessage
 };
 //# sourceMappingURL=ValidationMessage.js.map

package/molecules/Forms/Password/ValidationMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ValidationMessage.js","sources":["../../../../lib/molecules/Forms/Password/ValidationMessage.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { Icon } from '@/atoms/Icons';\nimport type { ValidationStatus } from '@/hooks/useInternalStatus';\n\nexport interface ValidationMessage {\n  label: string;\n  status: ValidationStatus;\n}\n\nconst ICON_PROPS = {\n  default: {\n    iconName: 'Edit',\n    iconColor: 'middleGrey',\n  },\n  error: {\n    iconName: 'Error',\n    iconColor: 'red',\n  },\n  success: {\n    iconName: 'CheckDefault',\n    iconColor: 'green',\n  },\n};\n\nexport function ValidationMessage({ label, status }: ValidationMessage) {\n  const { iconName, iconColor } = ICON_PROPS[status];\n\n  return (\n    <div className=\"flex gap-[6px] px-20 items-center\">\n      <Icon name={iconName} width=\"30px\" color={iconColor} />\n      <span className={classnames('text-b3', `text-${iconColor}`)}>{label}</span>\n    </div>\n  );\n}\n"],"names":["ICON_PROPS","ValidationMessage","label","status","iconName","iconColor","jsxs","jsx","Icon","classnames"],"mappings":";;;;AASA,MAAMA,IAAa;AAAA,EACjB,SAAS;AAAA,IACP,UAAU;AAAA,IACV,WAAW;AAAA,EAAA;AAAA,EAEb,OAAO;AAAA,IACL,UAAU;AAAA,IACV,WAAW;AAAA,EAAA;AAAA,EAEb,SAAS;AAAA,IACP,UAAU;AAAA,IACV,WAAW;AAAA,EAAA;AAEf;AAEO,SAASC,EAAkB,EAAE,OAAAC,GAAO,QAAAC,KAA6B;AACtE,QAAM,EAAE,UAAAC,GAAU,WAAAC,MAAcL,EAAWG,CAAM;AAEjD,SACE,gBAAAG,EAAC,OAAA,EAAI,WAAU,qCACb,UAAA;AAAA,IAAA,gBAAAC,EAACC,KAAK,MAAMJ,GAAU,OAAM,QAAO,OAAOC,GAAW;AAAA,IACrD,gBAAAE,EAAC,UAAK,WAAWE,EAAW,WAAW,QAAQJ,CAAS,EAAE,GAAI,UAAAH,EAAA,CAAM;AAAA,EAAA,GACtE;AAEJ;"}
+{"version":3,"file":"ValidationMessage.js","sources":["../../../../lib/molecules/Forms/Password/ValidationMessage.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { Icon } from '@clubmed/trident-icons';\nimport type { ValidationStatus } from '@/hooks/useInternalStatus';\n\nexport interface ValidationMessage {\n  label: string;\n  status: ValidationStatus;\n}\n\nconst ICON_PROPS = {\n  default: {\n    iconName: 'Edit',\n    iconColor: 'middleGrey',\n  },\n  error: {\n    iconName: 'Error',\n    iconColor: 'red',\n  },\n  success: {\n    iconName: 'CheckDefault',\n    iconColor: 'green',\n  },\n};\n\nexport function ValidationMessage({ label, status }: ValidationMessage) {\n  const { iconName, iconColor } = ICON_PROPS[status];\n\n  return (\n    <div className=\"flex gap-[6px] px-20 items-center\">\n      <Icon name={iconName} width=\"30px\" color={iconColor} />\n      <span className={classnames('text-b3', `text-${iconColor}`)}>{label}</span>\n    </div>\n  );\n}\n"],"names":["ICON_PROPS","ValidationMessage","label","status","iconName","iconColor","jsxs","jsx","Icon","classnames"],"mappings":";;;AASA,MAAMA,IAAa;AAAA,EACjB,SAAS;AAAA,IACP,UAAU;AAAA,IACV,WAAW;AAAA,EAAA;AAAA,EAEb,OAAO;AAAA,IACL,UAAU;AAAA,IACV,WAAW;AAAA,EAAA;AAAA,EAEb,SAAS;AAAA,IACP,UAAU;AAAA,IACV,WAAW;AAAA,EAAA;AAEf;AAEO,SAASC,EAAkB,EAAE,OAAAC,GAAO,QAAAC,KAA6B;AACtE,QAAM,EAAE,UAAAC,GAAU,WAAAC,MAAcL,EAAWG,CAAM;AAEjD,SACE,gBAAAG,EAAC,OAAA,EAAI,WAAU,qCACb,UAAA;AAAA,IAAA,gBAAAC,EAACC,KAAK,MAAMJ,GAAU,OAAM,QAAO,OAAOC,GAAW;AAAA,IACrD,gBAAAE,EAAC,UAAK,WAAWE,EAAW,WAAW,QAAQJ,CAAS,EAAE,GAAI,UAAAH,EAAA,CAAM;AAAA,EAAA,GACtE;AAEJ;"}

package/molecules/Forms/Select.d.ts

@@ -1,5 +1,5 @@
 import { type FormControlProps } from './FormControl.js';
-import { type IconicTypes } from '../../atoms/Icons';
+import { type IconicTypes } from '@clubmed/trident-icons';
 import { type SelectHTMLAttributes } from 'react';
 export interface SelectProps<Value> extends FormControlProps<Value, SelectHTMLAttributes<HTMLSelectElement>> {
     description?: string;

package/molecules/Forms/Select.js

@@ -3,10 +3,9 @@ import { c as l } from "../../chunks/index.js";
 import { useValue as I } from "../../hooks/useValue.js";
 import { useInternalStatus as S } from "../../hooks/useInternalStatus.js";
 import { FormControl as j } from "./FormControl.js";
-import { Icon as n } from "../../atoms/Icons/Icon.js";
-import "@clubmed/trident-icons";
+import { Icon as n } from "@clubmed/trident-icons";
 import { useId as T } from "react";
-const B = (p) => {
+const R = (p) => {
   const u = T(), {
     id: t = u,
     name: a = t,
@@ -100,6 +99,6 @@ const B = (p) => {
   );
 };
 export {
-  B as Select
+  R as Select
 };
 //# sourceMappingURL=Select.js.map

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 '@/atoms/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 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;"}

package/molecules/Forms/TextField.d.ts

@@ -1,6 +1,6 @@
 import { type UseValueProps } from '../../hooks/useValue';
 import { type FormControlProps } from './FormControl.js';
-import { type IconicNames, type IconicTypes } from '../../atoms/Icons';
+import { type IconicNames, type IconicTypes } from '@clubmed/trident-icons';
 export interface TextFieldProps<Value> extends FormControlProps<Value> {
     description?: string;
     icon?: IconicNames;

package/molecules/Forms/TextField.js

@@ -1,12 +1,11 @@
 import { jsx as r, jsxs as o } from "react/jsx-runtime";
-import { c as m } from "../../chunks/index.js";
+import { c as u } from "../../chunks/index.js";
 import { useValue as F } from "../../hooks/useValue.js";
 import { useInternalStatus as S } from "../../hooks/useInternalStatus.js";
 import { FormControl as j } from "./FormControl.js";
-import { Icon as i } from "../../atoms/Icons/Icon.js";
-import "@clubmed/trident-icons";
+import { Icon as i } from "@clubmed/trident-icons";
 import { useId as D } from "react";
-const E = (u) => {
+const B = (m) => {
   const p = D(), {
     id: t = p,
     name: a = t,
@@ -25,7 +24,7 @@ const E = (u) => {
     onChange: w,
     formatter: N,
     ...C
-  } = u, { value: I, setValue: T } = F({ name: a, initialValue: b, onChange: w, formatter: N }), e = S({
+  } = m, { value: I, setValue: T } = F({ name: a, initialValue: b, onChange: w, formatter: N }), e = S({
     isDisabled: l,
     validationStatus: n
   });
@@ -54,7 +53,7 @@ const E = (u) => {
             required: c,
             value: I,
             onChange: (k) => T(k.target.value),
-            className: m(
+            className: u(
               "text-b3 rounded-pill w-full border px-20 py-12 font-normal outline-none",
               {
                 "border-lightGrey focus:border-black active:border-black": e === "default",
@@ -72,7 +71,7 @@ const E = (u) => {
         /* @__PURE__ */ o(
           "div",
           {
-            className: m(
+            className: u(
               "pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12",
               {
                 "text-grey": e === "disabled",
@@ -94,6 +93,6 @@ const E = (u) => {
   );
 };
 export {
-  E as TextField
+  B as TextField
 };
 //# sourceMappingURL=TextField.js.map

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 '@/atoms/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 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;"}

package/molecules/Link.d.ts

@@ -1,5 +1,5 @@
 import type { AnchorHTMLAttributes, FunctionComponent, PropsWithChildren } from 'react';
-import { type IconicNames, type IconicTypes } from '../atoms/Icons';
+import { type IconicNames, type IconicTypes } from '@clubmed/trident-icons';
 interface LinkProps<T extends HTMLAnchorElement = HTMLAnchorElement> extends AnchorHTMLAttributes<T> {
     /**
      * Label text

package/molecules/Link.js

@@ -1,11 +1,10 @@
-import { jsxs as t, jsx as o } from "react/jsx-runtime";
+import { jsxs as t, jsx as c } from "react/jsx-runtime";
 import { c as a } from "../chunks/index.js";
-import { Icon as u } from "../atoms/Icons/Icon.js";
-import "@clubmed/trident-icons";
-const C = ({
+import { Icon as u } from "@clubmed/trident-icons";
+const j = ({
   label: n,
   icon: s,
-  component: c = "a",
+  component: o = "a",
   iconType: m,
   underlined: e = !0,
   className: l,
@@ -14,7 +13,7 @@ const C = ({
 }) => {
   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);
   return /* @__PURE__ */ t(
-    p ? "span" : c,
+    p ? "span" : o,
     {
       className: a(
         "text-b3 decoration-none link-container cursor-pointer text-inherit",
@@ -23,7 +22,7 @@ const C = ({
       "data-name": "Link",
       ...d,
       children: [
-        /* @__PURE__ */ o("span", { className: a({ "link-underline": e }), children: h }),
+        /* @__PURE__ */ c("span", { className: a({ "link-underline": e }), children: h }),
         /* @__PURE__ */ t(
           "span",
           {
@@ -35,7 +34,7 @@ const C = ({
               x,
               /* @__PURE__ */ t("span", { className: "inline-block", children: [
                 g,
-                s && /* @__PURE__ */ o(
+                s && /* @__PURE__ */ c(
                   u,
                   {
                     name: s,
@@ -53,6 +52,6 @@ const C = ({
   );
 };
 export {
-  C as Link
+  j as Link
 };
 //# sourceMappingURL=Link.js.map

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 '@/atoms/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 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;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clubmed/trident-ui",
-  "version": "1.3.0-beta.6",
+  "version": "1.3.0-beta.7",
   "type": "module",
   "description": "Shared ClubMed React UI components",
   "keywords": [
@@ -51,16 +51,16 @@
       "import": "./molecules/Forms/Checkboxes/index.js",
       "default": "./molecules/Forms/Checkboxes/index.js"
     },
-    "./molecules/Forms/Password": {
-      "types": "./molecules/Forms/Password/index.d.ts",
-      "import": "./molecules/Forms/Password/index.js",
-      "default": "./molecules/Forms/Password/index.js"
-    },
     "./molecules/Forms/Radios": {
       "types": "./molecules/Forms/Radios/index.d.ts",
       "import": "./molecules/Forms/Radios/index.js",
       "default": "./molecules/Forms/Radios/index.js"
     },
+    "./molecules/Forms/Password": {
+      "types": "./molecules/Forms/Password/index.d.ts",
+      "import": "./molecules/Forms/Password/index.js",
+      "default": "./molecules/Forms/Password/index.js"
+    },
     "./fonts/*": "./fonts/*",
     "./atoms/*": {
       "types": "./atoms/*.d.ts",