@clubmed/trident-ui 1.3.0-beta.9 → 1.3.0-rc.2

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

@@ -1,5 +1,5 @@
-import type { Colors } from '../../../types/Colors';
-import type { IconicNames, IconicTypes } from '@clubmed/trident-icons';
+import { IconicNames, IconicTypes } from '@clubmed/trident-icons';
+import { Colors } from '../../../types/Colors';
 export interface ButtonProps {
     color?: Colors;
     /**
@@ -36,6 +36,9 @@ export declare const BUTTON_COLORS: {
     readonly verdigris: "button-verdigris";
     readonly wave: "button-wave";
     readonly white: "button-white";
+    readonly darkGrey: "button-darkGrey";
+    readonly lightGrey: "button-lightGrey";
+    readonly current: "button-current";
 };
 export declare const BUTTON_THEMES: {
     readonly outline: "button-outline";

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

@@ -13,21 +13,24 @@ const u = {
   ultramarine: "button-ultramarine",
   verdigris: "button-verdigris",
   wave: "button-wave",
-  white: "button-white"
+  white: "button-white",
+  darkGrey: "button-darkGrey",
+  lightGrey: "button-lightGrey",
+  current: "button-current"
 }, a = (t) => u[t || "saffron"], l = {
   outline: "button-outline",
   solid: "button-solid"
-}, s = (t) => l[t || "solid"], i = {
+}, i = (t) => l[t || "solid"], s = {
   circle: "button-circle",
   pill: "button-pill"
-}, b = (t) => i[t || "pill"], d = {
+}, b = (t) => s[t || "pill"], d = {
   small: "button-small",
   medium: "button-medium",
   large: "button-large"
 }, c = (t) => d[t || "medium"], m = ({ color: t, size: n, theme: o, variant: e }) => r(
   "flex",
   "button",
-  s(o),
+  i(o),
   a(t),
   b(e),
   c(n)
@@ -36,7 +39,7 @@ export {
   u as BUTTON_COLORS,
   d as BUTTON_SIZES,
   l as BUTTON_THEMES,
-  i as BUTTON_VARIANTS,
+  s as BUTTON_VARIANTS,
   m as getButtonClasses
 };
 //# sourceMappingURL=Button.type.js.map

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

package/molecules/Card.d.ts

@@ -1,11 +1 @@
-import type { FunctionComponent, PropsWithChildren } from 'react';
-import { type IconicNames, type IconicTypes } from '@clubmed/trident-icons';
-interface CardProps {
-    title: string;
-    icon: IconicNames;
-    iconType?: IconicTypes;
-    theme?: 'light' | 'dark';
-    dataName?: string;
-}
-export declare const Card: FunctionComponent<PropsWithChildren<CardProps>>;
-export {};
+export * from './Cards/Card';

package/molecules/Card.js

@@ -1,37 +1,5 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { c as d } from "../chunks/index.js";
-import { Icon as o } from "@clubmed/trident-icons";
-const f = ({
-  title: a,
-  children: s,
-  icon: i,
-  iconType: l,
-  theme: r = "light",
-  dataName: n = "Card"
-}) => /* @__PURE__ */ t(
-  "div",
-  {
-    className: "border-lightGrey rounded-16 flex shrink-0 flex-row gap-20 border bg-white p-20",
-    "data-name": n,
-    children: [
-      /* @__PURE__ */ e(
-        "div",
-        {
-          className: d("flex h-48 w-48 shrink-0 items-center justify-center rounded-full", {
-            "bg-ultramarine text-white": r === "dark",
-            "bg-lightSand text-black": r === "light"
-          }),
-          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: s })
-      ] })
-    ]
-  }
-);
+import { Card as a } from "./Cards/Card.js";
 export {
-  f as Card
+  a 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 '@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;"}
+{"version":3,"file":"Card.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/molecules/Cards/Card.d.ts

@@ -0,0 +1,13 @@
+import { FunctionComponent, PropsWithChildren } from 'react';
+import { CardProps as CardPropsV2 } from './v2/Card';
+import { IconicNames, IconicTypes } from '@clubmed/trident-icons';
+import { ChipProps } from '../Chip';
+interface CardProps extends Omit<CardPropsV2, 'theme'> {
+    title: string;
+    icon: IconicNames;
+    iconType?: IconicTypes;
+    theme?: ChipProps['theme'];
+    dataName?: string;
+}
+export declare const Card: FunctionComponent<PropsWithChildren<CardProps>>;
+export {};

package/molecules/Cards/Card.js

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

package/molecules/Cards/Card.js.map

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

package/molecules/Cards/CardAspectRatios.d.ts

@@ -0,0 +1,6 @@
+export declare const CARD_ASPECT_RATIOS: {
+    readonly horizontal: "aspect-horizontal";
+    readonly vertical: "aspect-vertical";
+    readonly square: "aspect-square";
+    readonly custom: "";
+};

package/molecules/Cards/CardAspectRatios.js

@@ -0,0 +1,10 @@
+const t = {
+  horizontal: "aspect-horizontal",
+  vertical: "aspect-vertical",
+  square: "aspect-square",
+  custom: ""
+};
+export {
+  t as CARD_ASPECT_RATIOS
+};
+//# sourceMappingURL=CardAspectRatios.js.map

package/molecules/Cards/CardAspectRatios.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardAspectRatios.js","sources":["../../../lib/molecules/Cards/CardAspectRatios.ts"],"sourcesContent":["export const CARD_ASPECT_RATIOS = {\n  horizontal: 'aspect-horizontal',\n  vertical: 'aspect-vertical',\n  square: 'aspect-square',\n  custom: '',\n} as const;\n"],"names":["CARD_ASPECT_RATIOS"],"mappings":"AAAO,MAAMA,IAAqB;AAAA,EAChC,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,QAAQ;AACV;"}

package/molecules/Cards/CardBackground.d.ts

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

package/molecules/Cards/CardBackground.js

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

package/molecules/Cards/CardBackground.js.map

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

package/molecules/Cards/CardBackgroundContext.d.ts

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

package/molecules/Cards/CardBackgroundContext.js

@@ -0,0 +1,10 @@
+import { createContext as t, useContext as e } from "react";
+const r = t({ hasImage: !0 });
+function n() {
+  return e(r);
+}
+export {
+  r as CardBackgroundContext,
+  n as useCardBackground
+};
+//# sourceMappingURL=CardBackgroundContext.js.map

package/molecules/Cards/CardBackgroundContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardBackgroundContext.js","sources":["../../../lib/molecules/Cards/CardBackgroundContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nexport const CardBackgroundContext = createContext<{ hasImage: boolean }>({ hasImage: true });\n\nexport function useCardBackground() {\n  return useContext(CardBackgroundContext);\n}\n"],"names":["CardBackgroundContext","createContext","useCardBackground","useContext"],"mappings":";AAEO,MAAMA,IAAwBC,EAAqC,EAAE,UAAU,IAAM;AAErF,SAASC,IAAoB;AAClC,SAAOC,EAAWH,CAAqB;AACzC;"}

package/molecules/Cards/CardClickable.d.ts

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

package/molecules/Cards/CardClickable.js

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

package/molecules/Cards/CardClickable.js.map

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

package/molecules/Cards/ExpandableCard.d.ts

@@ -0,0 +1,14 @@
+import { ComponentProps, FunctionComponent } from 'react';
+import { Heading } from '../../atoms/Heading/Heading';
+import { Tag } from '../Tag';
+import { CardBackgroundProps } from './CardBackground';
+import { CardProps } from './v2/Card';
+export interface ExpandableCardProps extends Omit<CardProps<'article'>, 'onClick'> {
+    hLevel?: ComponentProps<typeof Heading>['level'];
+    image?: CardBackgroundProps;
+    onClick?: (isExpanded: boolean) => void;
+    subtitle?: string | null;
+    tags?: ComponentProps<typeof Tag>[] | null;
+    title: string;
+}
+export declare const ExpandableCard: FunctionComponent<ExpandableCardProps>;

package/molecules/Cards/ExpandableCard.js

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

package/molecules/Cards/ExpandableCard.js.map

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

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

@@ -0,0 +1,15 @@
+import { ComponentPropsWithoutRef, ElementType } from 'react';
+import { CARD_ASPECT_RATIOS } from '../CardAspectRatios';
+type CARD_THEME = 'none' | 'bordered' | 'frame';
+export type CardProps<T extends ElementType = 'div'> = {
+    component?: string;
+    /**
+     * By default the card has a border.
+     * Set to false to remove it.
+     */
+    border?: boolean;
+    format?: keyof typeof CARD_ASPECT_RATIOS;
+    theme?: CARD_THEME | CARD_THEME[];
+} & ComponentPropsWithoutRef<T>;
+export declare function Card<T extends ElementType = 'div'>({ children, className, component, format, theme, ...attrs }: CardProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/molecules/Cards/v2/Card.js

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

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

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

package/molecules/Chip.d.ts

@@ -0,0 +1,9 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { Theme } from './Chip.themes';
+import { Colors } from '../types/Colors';
+export interface ChipProps extends ComponentPropsWithoutRef<'span'> {
+    color?: Colors;
+    size?: string;
+    theme?: Theme;
+}
+export declare const Chip: ({ className, color, size, theme, children, ...attrs }: ChipProps) => import("react/jsx-runtime").JSX.Element;

package/molecules/Chip.js

@@ -0,0 +1,31 @@
+import { jsx as a } from "react/jsx-runtime";
+import { c as m } from "../chunks/index.js";
+import { getTheme as c } from "./Chip.themes.js";
+const f = ({
+  className: e,
+  color: s = "sienna",
+  size: r = "size-32",
+  theme: o = "solid",
+  children: t,
+  ...n
+}) => {
+  const { thRoot: i } = c(o, { color: s });
+  return /* @__PURE__ */ a(
+    "span",
+    {
+      ...n,
+      className: m(
+        "inline-flex aspect-square shrink-0 items-center justify-center overflow-hidden rounded-full border",
+        r,
+        i,
+        e
+      ),
+      "data-name": "Chip",
+      children: t
+    }
+  );
+};
+export {
+  f as Chip
+};
+//# sourceMappingURL=Chip.js.map

package/molecules/Chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.js","sources":["../../lib/molecules/Chip.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport type { ComponentPropsWithoutRef } from 'react';\n\nimport { getTheme, type Theme } from './Chip.themes';\n\nimport type { Colors } from '@/types/Colors';\n\nexport interface ChipProps extends ComponentPropsWithoutRef<'span'> {\n  color?: Colors;\n  size?: string;\n  theme?: Theme;\n}\n\nexport const Chip = ({\n  className,\n  color = 'sienna',\n  size = 'size-32',\n  theme = 'solid',\n  children,\n  ...attrs\n}: ChipProps) => {\n  const { thRoot } = getTheme(theme, { color });\n\n  return (\n    <span\n      {...attrs}\n      className={classNames(\n        'inline-flex aspect-square shrink-0 items-center justify-center overflow-hidden rounded-full border',\n        size,\n        thRoot,\n        className,\n      )}\n      data-name=\"Chip\"\n    >\n      {children}\n    </span>\n  );\n};\n"],"names":["Chip","className","color","size","theme","children","attrs","thRoot","getTheme","jsx","classNames"],"mappings":";;;AAaO,MAAMA,IAAO,CAAC;AAAA,EACnB,WAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,GAAGC;AACL,MAAiB;AACf,QAAM,EAAE,QAAAC,EAAA,IAAWC,EAASJ,GAAO,EAAE,OAAAF,GAAO;AAE5C,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGH;AAAA,MACJ,WAAWI;AAAAA,QACT;AAAA,QACAP;AAAA,QACAI;AAAA,QACAN;AAAA,MAAA;AAAA,MAEF,aAAU;AAAA,MAET,UAAAI;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/molecules/Chip.themes.d.ts

@@ -0,0 +1,12 @@
+import { Colors } from '../types/Colors';
+export type Theme = 'solid' | 'outline' | 'light' | 'dark';
+type Options = {
+    color: Colors;
+};
+export declare const themes: (color: Colors) => Record<Theme, {
+    thRoot: string;
+}>;
+export declare const getTheme: (theme: Theme, { color }: Options) => {
+    thRoot: string;
+};
+export {};

package/molecules/Chip.themes.js

@@ -0,0 +1,24 @@
+import { c as e } from "../chunks/index.js";
+import { getBorderColor as r, getTextColor as n, getBgColor as g, getComplementaryTextColor as i } from "../helpers/colors/colors.js";
+const l = (t) => ({
+  solid: {
+    thRoot: e(g(t), r(t), i(t))
+  },
+  outline: {
+    thRoot: e("bg-transparent", r(t), n(t))
+  },
+  light: {
+    thRoot: e("bg-lightSand text-black border-lightSand")
+  },
+  dark: {
+    thRoot: e("bg-ultramarine text-white border-ultramarine")
+  }
+}), h = (t, { color: a }) => {
+  const o = l(a);
+  return o[t] || o.solid;
+};
+export {
+  h as getTheme,
+  l as themes
+};
+//# sourceMappingURL=Chip.themes.js.map

package/molecules/Chip.themes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.themes.js","sources":["../../lib/molecules/Chip.themes.ts"],"sourcesContent":["import classnames from 'classnames';\nimport type { Colors } from '@/types/Colors';\nimport {\n  getBgColor,\n  getBorderColor,\n  getComplementaryTextColor,\n  getTextColor,\n} from '@/helpers/colors/colors';\n\nexport type Theme = 'solid' | 'outline' | 'light' | 'dark';\n\ntype Options = { color: Colors };\n\nexport const themes = (color: Colors): Record<Theme, { thRoot: string }> => ({\n  solid: {\n    thRoot: classnames(getBgColor(color), getBorderColor(color), getComplementaryTextColor(color)),\n  },\n  outline: {\n    thRoot: classnames('bg-transparent', getBorderColor(color), getTextColor(color)),\n  },\n  light: {\n    thRoot: classnames('bg-lightSand text-black border-lightSand'),\n  },\n  dark: {\n    thRoot: classnames('bg-ultramarine text-white border-ultramarine'),\n  },\n});\n\nexport const getTheme = (theme: Theme, { color }: Options) => {\n  const THEMES = themes(color);\n\n  return THEMES[theme] || THEMES.solid;\n};\n"],"names":["themes","color","classnames","getBgColor","getBorderColor","getComplementaryTextColor","getTextColor","getTheme","theme","THEMES"],"mappings":";;AAaO,MAAMA,IAAS,CAACC,OAAsD;AAAA,EAC3E,OAAO;AAAA,IACL,QAAQC,EAAWC,EAAWF,CAAK,GAAGG,EAAeH,CAAK,GAAGI,EAA0BJ,CAAK,CAAC;AAAA,EAAA;AAAA,EAE/F,SAAS;AAAA,IACP,QAAQC,EAAW,kBAAkBE,EAAeH,CAAK,GAAGK,EAAaL,CAAK,CAAC;AAAA,EAAA;AAAA,EAEjF,OAAO;AAAA,IACL,QAAQC,EAAW,0CAA0C;AAAA,EAAA;AAAA,EAE/D,MAAM;AAAA,IACJ,QAAQA,EAAW,8CAA8C;AAAA,EAAA;AAErE,IAEaK,IAAW,CAACC,GAAc,EAAE,OAAAP,QAAqB;AAC5D,QAAMQ,IAAST,EAAOC,CAAK;AAE3B,SAAOQ,EAAOD,CAAK,KAAKC,EAAO;AACjC;"}

package/molecules/ElasticHeight.d.ts

@@ -1,29 +1,8 @@
-import { type FunctionComponent, type PropsWithChildren } from 'react';
-/**
- * This is not a Collapse component, it's a component that animates *to* the height of its children.
- * It does the *absolute* same but you Bring Your Own Height™ by applying a class to the children.
- * e.g.: <ElasticHeight className={isOpen ? "" : "h-0"}><div>...</div></ElasticHeight>
- * ID is there for accessibility purposes.
- *
- * This is in no way affiliated with Amazon ElasticSearch.
- */
-interface ElasticHeightProps {
-    /**
-     * Id of the element
-     */
-    id?: string;
-    /**
-     * Class of the element (please provide something that sets the height)
-     */
-    className?: string;
-    /**
-     * Class of the container (to avoid CLS, mainly)
-     */
-    containerClassName?: string;
-    /**
-     * Role of the element
-     */
-    role?: string;
+import { ComponentPropsWithoutRef, FunctionComponent } from 'react';
+interface ElasticHeightProps extends ComponentPropsWithoutRef<'div'> {
+    innerClassName?: string;
+    isExpanded?: boolean;
+    min?: number;
 }
-export declare const ElasticHeight: FunctionComponent<PropsWithChildren<ElasticHeightProps>>;
+export declare const ElasticHeight: FunctionComponent<ElasticHeightProps>;
 export {};