@clubmed/trident-ui 1.2.0 → 1.3.0-beta.10

package/molecules/Buttons/v2/Button.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsx as n } from "react/jsx-runtime";
+import { c as l } from "../../../chunks/index.js";
+import { getButtonClasses as B } from "./Button.type.js";
+import { ButtonContent as c } from "../ButtonContent.js";
+function p({ component: t, disabled: r, ...a }) {
+  return t === "a" || "href" in a || typeof t == "object" ? {
+    attrs: {
+      "data-name": "ButtonAnchor",
+      "aria-disabled": r ? "true" : void 0,
+      ...a
+    },
+    Cmp: "a"
+  } : t === "span" || t === "div" ? {
+    attrs: {
+      "data-name": "FakeButton",
+      "aria-disabled": r ? "true" : void 0,
+      ...a
+    },
+    Cmp: "span"
+  } : {
+    attrs: {
+      "data-name": "Button",
+      type: "button",
+      disabled: r,
+      ...a
+    },
+    Cmp: "button"
+  };
+}
+const C = ({
+  className: t,
+  children: r,
+  color: a = "saffron",
+  icon: e,
+  iconWidth: o,
+  size: s = "medium",
+  theme: u = "solid",
+  variant: i = "pill",
+  ...m
+}) => {
+  const { Cmp: f, attrs: d } = p(m);
+  return /* @__PURE__ */ n(
+    f,
+    {
+      ...d,
+      className: l(B({ color: a, size: s, theme: u, variant: i }), t),
+      children: /* @__PURE__ */ n(c, { icon: e, iconWidth: o, children: r })
+    }
+  );
+};
+C.displayName = "Button";
+export {
+  C as Button,
+  p as useButton
+};
+//# sourceMappingURL=Button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sources":["../../../../lib/molecules/Buttons/v2/Button.tsx"],"sourcesContent":["'use client';\nimport classnames from 'classnames';\nimport type {\n  ComponentPropsWithoutRef,\n  FunctionComponent,\n  PropsWithChildren,\n  ReactElement,\n  ReactPortal,\n} from 'react';\n\nimport { type ButtonProps as Btn, getButtonClasses } from './Button.type';\nimport { ButtonContent } from '../ButtonContent';\n\nimport './Button.css';\n\nexport interface ButtonProps extends Btn, Omit<ComponentPropsWithoutRef<'button'>, 'color'> {\n  component?: 'button';\n}\n\nexport interface ButtonAnchorProps extends Btn, Omit<ComponentPropsWithoutRef<'a'>, 'color'> {\n  component: 'a';\n  disabled?: boolean;\n}\n\nexport interface FakeButtonProps extends Btn, Omit<ComponentPropsWithoutRef<'span'>, 'color'> {\n  component: 'span' | 'div';\n  disabled?: boolean;\n}\n// For Button with React Router Link or similar components\nexport interface ReactButtonProps\n  extends Btn,\n    Omit<ComponentPropsWithoutRef<'a'>, 'href' | 'color'> {\n  component: ReactElement | ReactPortal;\n  disabled?: boolean;\n}\n\ntype AnyButtonProps = ButtonProps | ButtonAnchorProps | FakeButtonProps | ReactButtonProps;\n\nexport function useButton({ component, disabled, ...props }: AnyButtonProps) {\n  if (component === 'a' || 'href' in props || typeof component === 'object') {\n    return {\n      attrs: {\n        'data-name': 'ButtonAnchor',\n        'aria-disabled': disabled ? 'true' : undefined,\n        ...props,\n      },\n      Cmp: 'a' as unknown as FunctionComponent<PropsWithChildren<any>>,\n    };\n  }\n\n  if (component === 'span' || component === 'div') {\n    return {\n      attrs: {\n        'data-name': 'FakeButton',\n        'aria-disabled': disabled ? 'true' : undefined,\n        ...props,\n      },\n      Cmp: 'span' as unknown as FunctionComponent<PropsWithChildren<any>>,\n    };\n  }\n\n  return {\n    attrs: {\n      'data-name': 'Button',\n      type: 'button',\n      disabled,\n      ...props,\n    },\n    Cmp: 'button' as unknown as FunctionComponent<PropsWithChildren<any>>,\n  };\n}\n\n// Main Button component that handles both button and anchor functionality\nexport const Button: FunctionComponent<AnyButtonProps> = ({\n  className,\n  children,\n  color = 'saffron',\n  icon,\n  iconWidth,\n  size = 'medium',\n  theme = 'solid',\n  variant = 'pill',\n  ...props\n}) => {\n  const { Cmp, attrs } = useButton(props);\n\n  return (\n    <Cmp\n      {...attrs}\n      className={classnames(getButtonClasses({ color, size, theme, variant }), className)}\n    >\n      <ButtonContent icon={icon} iconWidth={iconWidth}>\n        {children}\n      </ButtonContent>\n    </Cmp>\n  );\n};\n\nButton.displayName = 'Button';\n"],"names":["useButton","component","disabled","props","Button","className","children","color","icon","iconWidth","size","theme","variant","Cmp","attrs","jsx","classnames","getButtonClasses","ButtonContent"],"mappings":";;;;;AAsCO,SAASA,EAAU,EAAE,WAAAC,GAAW,UAAAC,GAAU,GAAGC,KAAyB;AAC3E,SAAIF,MAAc,OAAO,UAAUE,KAAS,OAAOF,KAAc,WACxD;AAAA,IACL,OAAO;AAAA,MACL,aAAa;AAAA,MACb,iBAAiBC,IAAW,SAAS;AAAA,MACrC,GAAGC;AAAA,IAAA;AAAA,IAEL,KAAK;AAAA,EAAA,IAILF,MAAc,UAAUA,MAAc,QACjC;AAAA,IACL,OAAO;AAAA,MACL,aAAa;AAAA,MACb,iBAAiBC,IAAW,SAAS;AAAA,MACrC,GAAGC;AAAA,IAAA;AAAA,IAEL,KAAK;AAAA,EAAA,IAIF;AAAA,IACL,OAAO;AAAA,MACL,aAAa;AAAA,MACb,MAAM;AAAA,MACN,UAAAD;AAAA,MACA,GAAGC;AAAA,IAAA;AAAA,IAEL,KAAK;AAAA,EAAA;AAET;AAGO,MAAMC,IAA4C,CAAC;AAAA,EACxD,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,SAAAC,IAAU;AAAA,EACV,GAAGT;AACL,MAAM;AACJ,QAAM,EAAE,KAAAU,GAAK,OAAAC,MAAUd,EAAUG,CAAK;AAEtC,SACE,gBAAAY;AAAA,IAACF;AAAA,IAAA;AAAA,MACE,GAAGC;AAAA,MACJ,WAAWE,EAAWC,EAAiB,EAAE,OAAAV,GAAO,MAAAG,GAAM,OAAAC,GAAO,SAAAC,GAAS,GAAGP,CAAS;AAAA,MAElF,UAAA,gBAAAU,EAACG,GAAA,EAAc,MAAAV,GAAY,WAAAC,GACxB,UAAAH,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN;AAEAF,EAAO,cAAc;"}

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

@@ -0,0 +1,57 @@
+import type { IconicNames, IconicTypes } from '@clubmed/trident-icons';
+import type { Colors } from '../../../types/Colors';
+export interface ButtonProps {
+    color?: Colors;
+    /**
+     * Optional icon name
+     */
+    icon?: IconicNames;
+    /**
+     * Force the icon type to be svg, font or default
+     */
+    iconType?: IconicTypes;
+    iconWidth?: string;
+    size?: 'small' | 'medium' | 'large';
+    theme?: 'outline' | 'solid';
+    variant?: 'circle' | 'pill';
+}
+type Params = {
+    color: ButtonProps['color'];
+    size: ButtonProps['size'];
+    theme: ButtonProps['theme'];
+    variant: ButtonProps['variant'];
+};
+export declare const BUTTON_COLORS: {
+    readonly black: "button-black";
+    readonly green: "button-green";
+    readonly lavender: "button-lavender";
+    readonly lightSand: "button-lightSand";
+    readonly marygold: "button-marygold";
+    readonly orange: "button-orange";
+    readonly red: "button-red";
+    readonly saffron: "button-saffron";
+    readonly sand: "button-sand";
+    readonly sienna: "button-sienna";
+    readonly ultramarine: "button-ultramarine";
+    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";
+    readonly solid: "button-solid";
+};
+export declare const BUTTON_VARIANTS: {
+    readonly circle: "button-circle";
+    readonly pill: "button-pill";
+};
+export declare const BUTTON_SIZES: {
+    readonly small: "button-small";
+    readonly medium: "button-medium";
+    readonly large: "button-large";
+};
+export declare const getButtonClasses: ({ color, size, theme, variant }: Params) => string;
+export {};

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

@@ -0,0 +1,45 @@
+import { c as r } from "../../../chunks/index.js";
+const u = {
+  black: "button-black",
+  green: "button-green",
+  lavender: "button-lavender",
+  lightSand: "button-lightSand",
+  marygold: "button-marygold",
+  orange: "button-orange",
+  red: "button-red",
+  saffron: "button-saffron",
+  sand: "button-sand",
+  sienna: "button-sienna",
+  ultramarine: "button-ultramarine",
+  verdigris: "button-verdigris",
+  wave: "button-wave",
+  white: "button-white",
+  darkGrey: "button-darkGrey",
+  lightGrey: "button-lightGrey",
+  current: "button-current"
+}, a = (t) => u[t || "saffron"], l = {
+  outline: "button-outline",
+  solid: "button-solid"
+}, i = (t) => l[t || "solid"], s = {
+  circle: "button-circle",
+  pill: "button-pill"
+}, 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",
+  i(o),
+  a(t),
+  b(e),
+  c(n)
+);
+export {
+  u as BUTTON_COLORS,
+  d as BUTTON_SIZES,
+  l as BUTTON_THEMES,
+  s as BUTTON_VARIANTS,
+  m as getButtonClasses
+};
+//# sourceMappingURL=Button.type.js.map

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

@@ -0,0 +1 @@
+{"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 '../atoms/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,38 +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 "../atoms/Icons/Icon.js";
-import "@clubmed/trident-icons";
-const x = ({
-  title: a,
-  children: i,
-  icon: s,
-  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: s, 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 })
-      ] })
-    ]
-  }
-);
+import { Card as a } from "./Cards/Card.js";
 export {
-  x 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 '@/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,GAAK,EAAA,MAAMP,GAAM,MAAMC,GAAU,OAAM,QAAO;AAAA,QAAA;AAAA,MACjD;AAAA,MACA,gBAAAG,EAAC,OAAI,EAAA,WAAU,uBACb,UAAA;AAAA,QAAC,gBAAAC,EAAA,OAAA,EAAI,WAAU,yBAAyB,UAAMP,GAAA;AAAA,QAC7C,gBAAAO,EAAA,OAAA,EAAI,WAAU,uBAAuB,UAAAN,EAAS,CAAA;AAAA,MAAA,GACjD;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 type { FunctionComponent, PropsWithChildren } from 'react';
+import { type CardProps as CardPropsV2 } from './v2/Card';
+import { type IconicNames, type IconicTypes } from '@clubmed/trident-icons';
+import { type ChipProps } from '../Chip';
+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 { type ComponentPropsWithoutRef, type FunctionComponent } from 'react';
+import { type 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 r, Fragment as m, jsx as o } from "react/jsx-runtime";
+import { c as l } from "../../chunks/index.js";
+import "react";
+import { Image as i } from "../../atoms/Image/Image.js";
+import { CardBackgroundContext as d } from "./CardBackgroundContext.js";
+const s = ({
+  children: n,
+  className: c,
+  ...e
+}) => /* @__PURE__ */ r(m, { children: [
+  (e == null ? void 0 : e.src) && /* @__PURE__ */ o(i, { ...e, src: e.src, className: "h-full w-full object-cover" }),
+  /* @__PURE__ */ o(
+    "div",
+    {
+      ...e,
+      className: l(
+        "pointer-events-none absolute inset-0 flex flex-col rounded-16",
+        {
+          "bg-gradient-to-b from-transparent via-transparent to-black/40": e == null ? void 0 : e.src
+        },
+        c
+      ),
+      children: /* @__PURE__ */ o(d.Provider, { value: { hasImage: !!(e != null && e.src) }, children: n })
+    }
+  )
+] });
+export {
+  s 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,GAAAF,KAAA,gBAAAA,EAAO,0BAAQG,GAAA,EAAO,GAAGH,GAAO,KAAKA,EAAM,KAAK,WAAU,6BAAA,CAA6B;AAAA,EAExF,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGJ;AAAA,MACJ,WAAWK;AAAA,QACT;AAAA,QACA;AAAA,UACE,iEAAiEL,KAAA,gBAAAA,EAAO;AAAA,QAAA;AAAA,QAE1ED;AAAA,MAAA;AAAA,MAGF,UAAA,gBAAAK,EAACE,EAAsB,UAAtB,EAA+B,OAAO,EAAE,UAAU,CAAC,EAACN,KAAA,QAAAA,EAAO,KAAA,GACzD,UAAAF,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AACF,GACF;"}

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 { type FunctionComponent, type 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 { type ComponentProps, type FunctionComponent } from 'react';
+import { Heading } from '../../atoms/Heading/Heading';
+import { Tag } from '../Tag';
+import { type CardBackgroundProps } from './CardBackground';
+import { type 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 l, jsx as o } from "react/jsx-runtime";
+import { useState as b, createElement as w } from "react";
+import { c } from "../../chunks/index.js";
+import { Clickable as v } from "../../atoms/Clickable/Clickable.js";
+import { Tag as E } from "../Tag.js";
+import { CardBackground as N } from "./CardBackground.js";
+import { ElasticHeight as B } from "../ElasticHeight.js";
+import { Card as j } from "./v2/Card.js";
+import { HeadingGroup as k } from "../../atoms/Heading/HeadingGroup.js";
+import { Button as y } from "../Buttons/v2/Button.js";
+const F = ({
+  children: s,
+  className: p,
+  hLevel: i = 3,
+  image: e,
+  onClick: a,
+  subtitle: f,
+  tags: r,
+  title: d,
+  component: m = "article",
+  ...x
+}) => {
+  const h = !!d, [t, u] = b(!1);
+  return /* @__PURE__ */ l(
+    j,
+    {
+      component: m,
+      "data-name": "ExpandableCard",
+      "data-testid": "expandable-card",
+      ...x,
+      className: c({ "border-t-0": e == null ? void 0 : e.src }, p),
+      "data-open": t,
+      children: [
+        /* @__PURE__ */ o(
+          v,
+          {
+            className: "group relative -m-1 block aspect-horizontal overflow-hidden rounded-16 text-start",
+            "data-testid": "expandable-card-clickable",
+            onClick: () => {
+              a == null || a(!t), u(!t);
+            },
+            children: /* @__PURE__ */ l(N, { ...e || {}, children: [
+              !!(r != null && r.length) && /* @__PURE__ */ o("div", { className: "flex flex-wrap gap-4 self-start p-20", children: r == null ? void 0 : r.map((n) => /* @__PURE__ */ w(E, { ...n, key: n.label })) }),
+              /* @__PURE__ */ l(
+                "div",
+                {
+                  className: c("mt-auto flex justify-between gap-x-8 p-20", {
+                    "text-white": e == null ? void 0 : e.src
+                  }),
+                  children: [
+                    h && /* @__PURE__ */ o(k, { subtitle: f, level: i, children: d }),
+                    /* @__PURE__ */ o(
+                      y,
+                      {
+                        component: "span",
+                        className: "!transition duration-500",
+                        color: e != null && e.src ? "white" : "black",
+                        icon: "ArrowDefaultDown",
+                        style: { rotate: t ? "-180deg" : "0deg" },
+                        tabIndex: -1,
+                        theme: "outline",
+                        variant: "circle"
+                      }
+                    )
+                  ]
+                }
+              )
+            ] })
+          }
+        ),
+        /* @__PURE__ */ o(B, { isExpanded: t, children: s })
+      ]
+    }
+  );
+};
+export {
+  F 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,KAAA,gBAAAA,EAAO,IAAA,GAAOF,CAAS;AAAA,MAC7D,aAAWU;AAAA,MAEX,UAAA;AAAA,QAAA,gBAAAM;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,eAAY;AAAA,YACZ,SAAS,MAAM;AACb,cAAAd,KAAA,QAAAA,EAAU,CAACO,IACXC,EAAc,CAACD,CAAU;AAAA,YAC3B;AAAA,YAEA,UAAA,gBAAAG,EAACK,GAAA,EAAgB,GAAIhB,KAAS,CAAA,GAC3B,UAAA;AAAA,cAAA,GAAQG,KAAA,QAAAA,EAAM,6BACZ,OAAA,EAAI,WAAU,wCACZ,UAAAA,KAAA,gBAAAA,EAAM,IAAI,CAACc,MAAQ,gBAAAC,EAACC,KAAK,GAAGF,GAAK,KAAKA,EAAI,OAAO,IACpD;AAAA,cAEF,gBAAAN;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWE,EAAW,6CAA6C;AAAA,oBACjE,cAAcb,KAAA,gBAAAA,EAAO;AAAA,kBAAA,CACtB;AAAA,kBAEA,UAAA;AAAA,oBAAAO,KACC,gBAAAO,EAACM,GAAA,EAAa,UAAAlB,GAAoB,OAAOH,GACtC,UAAAK,GACH;AAAA,oBAEF,gBAAAU;AAAA,sBAACO;AAAA,sBAAA;AAAA,wBACC,WAAU;AAAA,wBACV,WAAU;AAAA,wBACV,OAAOrB,KAAA,QAAAA,EAAO,MAAM,UAAU;AAAA,wBAC9B,MAAK;AAAA,wBACL,OAAO,EAAE,QAAQQ,IAAa,YAAY,OAAA;AAAA,wBAC1C,UAAU;AAAA,wBACV,OAAM;AAAA,wBACN,SAAQ;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBACV;AAAA,gBAAA;AAAA,cAAA;AAAA,YACF,EAAA,CACF;AAAA,UAAA;AAAA,QAAA;AAAA,QAEF,gBAAAM,EAACQ,GAAA,EAAc,YAAAd,GAAyB,UAAAX,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGvD;"}

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

@@ -0,0 +1,15 @@
+import type { 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 b } from "../CardAspectRatios.js";
+function s({
+  children: e,
+  className: r,
+  component: d = "div",
+  format: i = "custom",
+  theme: t = "bordered",
+  ...n
+}) {
+  const u = d, o = [].concat(t).join(" ");
+  return /* @__PURE__ */ c(
+    u,
+    {
+      ...n,
+      className: m(
+        b[i],
+        "relative isolate rounded-16",
+        {
+          "bg-white": !(r != null && r.includes("bg-")),
+          "group overflow-hidden": o.includes("frame"),
+          "border border-lightGrey": o.includes("bordered")
+        },
+        r
+      ),
+      children: e
+    }
+  );
+}
+export {
+  s 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,EAACF,KAAA,QAAAA,EAAW,SAAS;AAAA,UACjC,yBAAyBM,EAAc,SAAS,OAAO;AAAA,UACvD,2BAA2BA,EAAc,SAAS,UAAU;AAAA,QAAA;AAAA,QAE9DN;AAAA,MAAA;AAAA,MAGD,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/molecules/Chip.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentPropsWithoutRef } from 'react';
+import { type Theme } from './Chip.themes';
+import type { 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;