@frontify/fondue-components 29.1.0 → 30.0.0

package/dist/fondue-components45.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components45.js","sources":["../src/helpers/propsToCssVariables.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type CSSProperties } from 'react';\n\nimport { type Breakpoint } from './layout';\n\nconst isAriaProp = (key: string): boolean => {\n    return key.startsWith('aria-') || key === 'role';\n};\n\nconst abbreviationToCssProperty: Record<string, string> = {\n    m: 'margin',\n    mx: 'margin-x',\n    my: 'margin-y',\n    mt: 'margin-top',\n    mr: 'margin-right',\n    mb: 'margin-bottom',\n    ml: 'margin-left',\n    p: 'padding',\n    px: 'padding-x',\n    py: 'padding-y',\n    pt: 'padding-top',\n    pr: 'padding-right',\n    pb: 'padding-bottom',\n    pl: 'padding-left',\n    direction: 'flex-direction',\n    align: 'align-items',\n    wrap: 'flex-wrap',\n    columns: 'grid-template-columns',\n    rows: 'grid-template-rows',\n};\n\nconst explodeProps: Record<string, string[]> = {\n    overflow: ['overflow-x', 'overflow-y'],\n};\n\nconst transformValueBasedOnKey = (key: string, value: string | number): string | number => {\n    if (key === 'columns' || key === 'rows') {\n        if (typeof value === 'number') {\n            return `repeat(${value}, 1fr)`;\n        }\n        return value;\n    }\n\n    // Spacing tokens\n    if (typeof value === 'number') {\n        return `${value * 0.25}rem`;\n    }\n\n    return value;\n};\n\nexport const propsToCssVariables = (\n    props: Record<string, string | number | boolean | { [key in Breakpoint]?: string | number | boolean }>,\n    extraAbbreviationToCssProperty: Record<string, string> = {},\n): CSSProperties => {\n    return Object.entries(props)\n        .reduce<[keyof typeof props, (typeof props)[keyof typeof props]][]>((acc, [key, value]) => {\n            if (!(key in explodeProps)) {\n                return [...acc, [key, value]];\n            }\n\n            acc.push([key, value]);\n            for (const newKey of explodeProps[key] ?? []) {\n                acc.push([newKey, value]);\n            }\n\n            return acc;\n        }, [])\n        .reduce<CSSProperties>((acc, [key, value]) => {\n            if (isAriaProp(key)) {\n                return acc;\n            }\n\n            const cssProperty =\n                key in extraAbbreviationToCssProperty\n                    ? extraAbbreviationToCssProperty[key]\n                    : key in abbreviationToCssProperty\n                      ? abbreviationToCssProperty[key]\n                      : key;\n            // The lookahead is necessary to split camelCase boundaries; disabling false-positive lint warning\n            const cssPropertyKebabCase = cssProperty?.replaceAll(/([\\da-z]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();\n\n            if (typeof value === 'object') {\n                for (const [breakpoint, breakpointValue] of Object.entries(value)) {\n                    if (breakpointValue !== undefined) {\n                        // @ts-expect-error CSS variables are not typed into `CSSProperties`\n                        acc[`--${breakpoint}-${cssPropertyKebabCase}`] = transformValueBasedOnKey(key, breakpointValue);\n                    }\n                }\n            } else {\n                // @ts-expect-error CSS variables are not typed into `CSSProperties`\n                acc[`--${cssPropertyKebabCase}`] = transformValueBasedOnKey(key, value);\n            }\n            return acc;\n        }, {});\n};\n"],"names":["isAriaProp","key","abbreviationToCssProperty","explodeProps","transformValueBasedOnKey","value","propsToCssVariables","props","extraAbbreviationToCssProperty","acc","newKey","cssProperty","cssPropertyKebabCase","breakpoint","breakpointValue"],"mappings":"AAMA,MAAMA,IAAa,CAACC,MACTA,EAAI,WAAW,OAAO,KAAKA,MAAQ,QAGxCC,IAAoD;AAAA,EACtD,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM;AAAA,EACN,SAAS;AAAA,EACT,MAAM;AACV,GAEMC,IAAyC;AAAA,EAC3C,UAAU,CAAC,cAAc,YAAY;AACzC,GAEMC,IAA2B,CAACH,GAAaI,MACvCJ,MAAQ,aAAaA,MAAQ,SACzB,OAAOI,KAAU,WACV,UAAUA,CAAK,WAEnBA,IAIP,OAAOA,KAAU,WACV,GAAGA,IAAQ,IAAI,QAGnBA,GAGEC,IAAsB,CAC/BC,GACAC,IAAyD,OAElD,OAAO,QAAQD,CAAK,EACtB,OAAmE,CAACE,GAAK,CAACR,GAAKI,CAAK,MAAM;AACvF,MAAI,EAAEJ,KAAOE;AACT,WAAO,CAAC,GAAGM,GAAK,CAACR,GAAKI,CAAK,CAAC;AAGhC,EAAAI,EAAI,KAAK,CAACR,GAAKI,CAAK,CAAC;AACrB,aAAWK,KAAUP,EAAaF,CAAG,KAAK,CAAA;AACtC,IAAAQ,EAAI,KAAK,CAACC,GAAQL,CAAK,CAAC;AAG5B,SAAOI;AACX,GAAG,CAAA,CAAE,EACJ,OAAsB,CAACA,GAAK,CAACR,GAAKI,CAAK,MAAM;AAC1C,MAAIL,EAAWC,CAAG;AACd,WAAOQ;AAGX,QAAME,IACFV,KAAOO,IACDA,EAA+BP,CAAG,IAClCA,KAAOC,IACLA,EAA0BD,CAAG,IAC7BA,GAENW,IAAuBD,KAAA,gBAAAA,EAAa,WAAW,+BAA+B,SAAS;AAE7F,MAAI,OAAON,KAAU;AACjB,eAAW,CAACQ,GAAYC,CAAe,KAAK,OAAO,QAAQT,CAAK;AAC5D,MAAIS,MAAoB,WAEpBL,EAAI,KAAKI,CAAU,IAAID,CAAoB,EAAE,IAAIR,EAAyBH,GAAKa,CAAe;AAAA;AAKtG,IAAAL,EAAI,KAAKG,CAAoB,EAAE,IAAIR,EAAyBH,GAAKI,CAAK;AAE1E,SAAOI;AACX,GAAG,CAAA,CAAE;"}
+{"version":3,"file":"fondue-components45.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/fondue-components46.js

@@ -1,8 +1,44 @@
-const o = "_root_f9dx4_6", t = {
-  root: o
-};
+const g = (o) => o.startsWith("aria-") || o === "role", m = {
+  m: "margin",
+  mx: "margin-x",
+  my: "margin-y",
+  mt: "margin-top",
+  mr: "margin-right",
+  mb: "margin-bottom",
+  ml: "margin-left",
+  p: "padding",
+  px: "padding-x",
+  py: "padding-y",
+  pt: "padding-top",
+  pr: "padding-right",
+  pb: "padding-bottom",
+  pl: "padding-left",
+  direction: "flex-direction",
+  align: "align-items",
+  wrap: "flex-wrap",
+  columns: "grid-template-columns",
+  rows: "grid-template-rows"
+}, d = {
+  overflow: ["overflow-x", "overflow-y"]
+}, a = (o, t) => o === "columns" || o === "rows" ? typeof t == "number" ? `repeat(${t}, 1fr)` : t : typeof t == "number" ? `${t * 0.25}rem` : t, l = (o, t = {}) => Object.entries(o).reduce((n, [r, i]) => {
+  if (!(r in d))
+    return [...n, [r, i]];
+  n.push([r, i]);
+  for (const e of d[r] ?? [])
+    n.push([e, i]);
+  return n;
+}, []).reduce((n, [r, i]) => {
+  if (g(r))
+    return n;
+  const e = r in t ? t[r] : r in m ? m[r] : r, p = e == null ? void 0 : e.replaceAll(/([\da-z]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
+  if (typeof i == "object")
+    for (const [f, s] of Object.entries(i))
+      s !== void 0 && (n[`--${f}-${p}`] = a(r, s));
+  else
+    n[`--${p}`] = a(r, i);
+  return n;
+}, {});
 export {
-  t as default,
-  o as root
+  l as propsToCssVariables
 };
 //# sourceMappingURL=fondue-components46.js.map

package/dist/fondue-components46.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components46.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
+{"version":3,"file":"fondue-components46.js","sources":["../src/helpers/propsToCssVariables.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type CSSProperties } from 'react';\n\nimport { type Breakpoint } from './layout';\n\nconst isAriaProp = (key: string): boolean => {\n    return key.startsWith('aria-') || key === 'role';\n};\n\nconst abbreviationToCssProperty: Record<string, string> = {\n    m: 'margin',\n    mx: 'margin-x',\n    my: 'margin-y',\n    mt: 'margin-top',\n    mr: 'margin-right',\n    mb: 'margin-bottom',\n    ml: 'margin-left',\n    p: 'padding',\n    px: 'padding-x',\n    py: 'padding-y',\n    pt: 'padding-top',\n    pr: 'padding-right',\n    pb: 'padding-bottom',\n    pl: 'padding-left',\n    direction: 'flex-direction',\n    align: 'align-items',\n    wrap: 'flex-wrap',\n    columns: 'grid-template-columns',\n    rows: 'grid-template-rows',\n};\n\nconst explodeProps: Record<string, string[]> = {\n    overflow: ['overflow-x', 'overflow-y'],\n};\n\nconst transformValueBasedOnKey = (key: string, value: string | number): string | number => {\n    if (key === 'columns' || key === 'rows') {\n        if (typeof value === 'number') {\n            return `repeat(${value}, 1fr)`;\n        }\n        return value;\n    }\n\n    // Spacing tokens\n    if (typeof value === 'number') {\n        return `${value * 0.25}rem`;\n    }\n\n    return value;\n};\n\nexport const propsToCssVariables = (\n    props: Record<string, string | number | boolean | { [key in Breakpoint]?: string | number | boolean }>,\n    extraAbbreviationToCssProperty: Record<string, string> = {},\n): CSSProperties => {\n    return Object.entries(props)\n        .reduce<[keyof typeof props, (typeof props)[keyof typeof props]][]>((acc, [key, value]) => {\n            if (!(key in explodeProps)) {\n                return [...acc, [key, value]];\n            }\n\n            acc.push([key, value]);\n            for (const newKey of explodeProps[key] ?? []) {\n                acc.push([newKey, value]);\n            }\n\n            return acc;\n        }, [])\n        .reduce<CSSProperties>((acc, [key, value]) => {\n            if (isAriaProp(key)) {\n                return acc;\n            }\n\n            const cssProperty =\n                key in extraAbbreviationToCssProperty\n                    ? extraAbbreviationToCssProperty[key]\n                    : key in abbreviationToCssProperty\n                      ? abbreviationToCssProperty[key]\n                      : key;\n            // The lookahead is necessary to split camelCase boundaries; disabling false-positive lint warning\n            const cssPropertyKebabCase = cssProperty?.replaceAll(/([\\da-z]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();\n\n            if (typeof value === 'object') {\n                for (const [breakpoint, breakpointValue] of Object.entries(value)) {\n                    if (breakpointValue !== undefined) {\n                        // @ts-expect-error CSS variables are not typed into `CSSProperties`\n                        acc[`--${breakpoint}-${cssPropertyKebabCase}`] = transformValueBasedOnKey(key, breakpointValue);\n                    }\n                }\n            } else {\n                // @ts-expect-error CSS variables are not typed into `CSSProperties`\n                acc[`--${cssPropertyKebabCase}`] = transformValueBasedOnKey(key, value);\n            }\n            return acc;\n        }, {});\n};\n"],"names":["isAriaProp","key","abbreviationToCssProperty","explodeProps","transformValueBasedOnKey","value","propsToCssVariables","props","extraAbbreviationToCssProperty","acc","newKey","cssProperty","cssPropertyKebabCase","breakpoint","breakpointValue"],"mappings":"AAMA,MAAMA,IAAa,CAACC,MACTA,EAAI,WAAW,OAAO,KAAKA,MAAQ,QAGxCC,IAAoD;AAAA,EACtD,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM;AAAA,EACN,SAAS;AAAA,EACT,MAAM;AACV,GAEMC,IAAyC;AAAA,EAC3C,UAAU,CAAC,cAAc,YAAY;AACzC,GAEMC,IAA2B,CAACH,GAAaI,MACvCJ,MAAQ,aAAaA,MAAQ,SACzB,OAAOI,KAAU,WACV,UAAUA,CAAK,WAEnBA,IAIP,OAAOA,KAAU,WACV,GAAGA,IAAQ,IAAI,QAGnBA,GAGEC,IAAsB,CAC/BC,GACAC,IAAyD,OAElD,OAAO,QAAQD,CAAK,EACtB,OAAmE,CAACE,GAAK,CAACR,GAAKI,CAAK,MAAM;AACvF,MAAI,EAAEJ,KAAOE;AACT,WAAO,CAAC,GAAGM,GAAK,CAACR,GAAKI,CAAK,CAAC;AAGhC,EAAAI,EAAI,KAAK,CAACR,GAAKI,CAAK,CAAC;AACrB,aAAWK,KAAUP,EAAaF,CAAG,KAAK,CAAA;AACtC,IAAAQ,EAAI,KAAK,CAACC,GAAQL,CAAK,CAAC;AAG5B,SAAOI;AACX,GAAG,CAAA,CAAE,EACJ,OAAsB,CAACA,GAAK,CAACR,GAAKI,CAAK,MAAM;AAC1C,MAAIL,EAAWC,CAAG;AACd,WAAOQ;AAGX,QAAME,IACFV,KAAOO,IACDA,EAA+BP,CAAG,IAClCA,KAAOC,IACLA,EAA0BD,CAAG,IAC7BA,GAENW,IAAuBD,KAAA,gBAAAA,EAAa,WAAW,+BAA+B,SAAS;AAE7F,MAAI,OAAON,KAAU;AACjB,eAAW,CAACQ,GAAYC,CAAe,KAAK,OAAO,QAAQT,CAAK;AAC5D,MAAIS,MAAoB,WAEpBL,EAAI,KAAKI,CAAU,IAAID,CAAoB,EAAE,IAAIR,EAAyBH,GAAKa,CAAe;AAAA;AAKtG,IAAAL,EAAI,KAAKG,CAAoB,EAAE,IAAIR,EAAyBH,GAAKI,CAAK;AAE1E,SAAOI;AACX,GAAG,CAAA,CAAE;"}

package/dist/fondue-components47.js

@@ -1,4 +1,4 @@
-const o = "_root_ebauq_5", t = {
+const o = "_root_f9dx4_6", t = {
   root: o
 };
 export {

package/dist/fondue-components48.js

@@ -1,16 +1,8 @@
-const o = "_root_1fezf_5", n = "_indicator_1fezf_88", e = "_icon_1fezf_113", c = "_iconIndeterminate_1fezf_129", t = "_iconChecked_1fezf_133", i = {
-  root: o,
-  indicator: n,
-  icon: e,
-  iconIndeterminate: c,
-  iconChecked: t
+const o = "_root_n6y2q_5", t = {
+  root: o
 };
 export {
-  i as default,
-  e as icon,
-  t as iconChecked,
-  c as iconIndeterminate,
-  n as indicator,
+  t as default,
   o as root
 };
 //# sourceMappingURL=fondue-components48.js.map

package/dist/fondue-components48.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components48.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
+{"version":3,"file":"fondue-components48.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/fondue-components49.js

@@ -1,35 +1,31 @@
 import { jsx as r } from "react/jsx-runtime";
-import { forwardRef as m } from "react";
-import { RgbaColorPicker as n } from "react-colorful";
-import t from "./fondue-components52.js";
-import { DEFAULT_COLOR as s } from "./fondue-components53.js";
-const i = ({
-  currentColor: a = s,
-  onColorChange: d = () => {
-  },
-  "data-test-id": o = "color-picker-input"
-}, p) => /* @__PURE__ */ r("div", { className: t.gradientInput, "data-test-id": o, ref: p, children: /* @__PURE__ */ r(
-  n,
+import { forwardRef as s } from "react";
+import d from "./fondue-components133.js";
+const n = ({ "data-test-id": t = "fondue-card-action", children: a }, o) => /* @__PURE__ */ r("div", { ref: o, className: d.action, "data-test-id": t, children: a });
+n.displayName = "Card.Action";
+const p = s(n), m = ({
+  "data-test-id": t = "fondue-card-action-button",
+  "aria-label": a,
+  onClick: o,
+  children: i,
+  ...e
+}, c) => /* @__PURE__ */ r(
+  "button",
   {
-    className: t.reactColorful,
-    color: {
-      r: a.red,
-      g: a.green,
-      b: a.blue,
-      a: a.alpha === void 0 ? 1 : a.alpha
-    },
-    onChange: (e) => d({
-      red: e.r,
-      green: e.g,
-      blue: e.b,
-      alpha: e.a
-    })
+    ref: c,
+    className: d.actionButton,
+    "data-test-id": t,
+    "aria-label": a,
+    type: "button",
+    onClick: o,
+    ...e,
+    children: i
   }
-) });
-i.displayName = "ColorPicker.Gradient";
-const c = m(i);
+);
+m.displayName = "Card.ActionButton";
 export {
-  i as ColorGradientInput,
-  c as ForwardedRefColorGradientInput
+  n as CardAction,
+  m as CardActionButton,
+  p as ForwardedRefCardAction
 };
 //# sourceMappingURL=fondue-components49.js.map

package/dist/fondue-components49.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components49.js","sources":["../src/components/ColorPicker/ColorGradientInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ForwardedRef, forwardRef } from 'react';\nimport { RgbaColorPicker } from 'react-colorful';\n\nimport styles from './styles/customColorPicker.module.scss';\nimport { type RgbaColor } from './types';\nimport { DEFAULT_COLOR } from './utils';\n\ntype ColorGradientInputProps = {\n    /**\n     * @ignore\n     * The active color in the color picker, passed down from the root component\n     */\n    currentColor?: RgbaColor;\n    /**\n     * @ignore\n     * Event handler called when the color changes, passed down from the root component\n     */\n    onColorChange?: (color: RgbaColor) => void;\n    /**\n     * The test id of the color picker gradient input\n     */\n    'data-test-id'?: string;\n};\n\nexport const ColorGradientInput = (\n    {\n        currentColor = DEFAULT_COLOR,\n        onColorChange = () => {},\n        'data-test-id': dataTestId = 'color-picker-input',\n    }: ColorGradientInputProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div className={styles.gradientInput} data-test-id={dataTestId} ref={forwardedRef}>\n            <RgbaColorPicker\n                className={styles.reactColorful}\n                color={{\n                    r: currentColor.red,\n                    g: currentColor.green,\n                    b: currentColor.blue,\n                    a: currentColor.alpha === undefined ? 1 : currentColor.alpha,\n                }}\n                onChange={(color) =>\n                    onColorChange({\n                        red: color.r,\n                        green: color.g,\n                        blue: color.b,\n                        alpha: color.a,\n                    })\n                }\n            />\n        </div>\n    );\n};\nColorGradientInput.displayName = 'ColorPicker.Gradient';\n\nexport const ForwardedRefColorGradientInput = forwardRef<HTMLDivElement, ColorGradientInputProps>(ColorGradientInput);\n"],"names":["ColorGradientInput","currentColor","DEFAULT_COLOR","onColorChange","dataTestId","forwardedRef","jsx","styles","RgbaColorPicker","color","ForwardedRefColorGradientInput","forwardRef"],"mappings":";;;;;AA0BO,MAAMA,IAAqB,CAC9B;AAAA,EACI,cAAAC,IAAeC;AAAA,EACf,eAAAC,IAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,gBAAgBC,IAAa;AACjC,GACAC,MAGI,gBAAAC,EAAC,SAAI,WAAWC,EAAO,eAAe,gBAAcH,GAAY,KAAKC,GACjE,UAAA,gBAAAC;AAAA,EAACE;AAAA,EAAA;AAAA,IACG,WAAWD,EAAO;AAAA,IAClB,OAAO;AAAA,MACH,GAAGN,EAAa;AAAA,MAChB,GAAGA,EAAa;AAAA,MAChB,GAAGA,EAAa;AAAA,MAChB,GAAGA,EAAa,UAAU,SAAY,IAAIA,EAAa;AAAA,IAAA;AAAA,IAE3D,UAAU,CAACQ,MACPN,EAAc;AAAA,MACV,KAAKM,EAAM;AAAA,MACX,OAAOA,EAAM;AAAA,MACb,MAAMA,EAAM;AAAA,MACZ,OAAOA,EAAM;AAAA,IAAA,CAChB;AAAA,EAAA;AAAA,GAGb;AAGRT,EAAmB,cAAc;AAE1B,MAAMU,IAAiCC,EAAoDX,CAAkB;"}
+{"version":3,"file":"fondue-components49.js","sources":["../src/components/Card/CardAction.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ComponentProps, type ForwardedRef, type MouseEventHandler, type ReactNode } from 'react';\n\nimport styles from './styles/card.module.scss';\n\nexport type CardActionProps = {\n    'data-test-id'?: string;\n    children?: ReactNode;\n};\n\nexport const CardAction = (\n    { 'data-test-id': dataTestId = 'fondue-card-action', children }: CardActionProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div ref={ref} className={styles.action} data-test-id={dataTestId}>\n            {children}\n        </div>\n    );\n};\nCardAction.displayName = 'Card.Action';\n\nexport const ForwardedRefCardAction = forwardRef<HTMLDivElement, CardActionProps>(CardAction);\n\nexport type CardActionButtonProps = {\n    'data-test-id'?: string;\n    /**\n     * Accessible label for the button.\n     */\n    'aria-label'?: string;\n    /**\n     * Click callback for the button.\n     */\n    onClick?: MouseEventHandler<HTMLButtonElement>;\n    children?: ReactNode;\n} & Omit<ComponentProps<'button'>, 'children' | 'ref' | 'onClick' | 'aria-label'>;\n\nexport const CardActionButton = (\n    {\n        'data-test-id': dataTestId = 'fondue-card-action-button',\n        'aria-label': ariaLabel,\n        onClick,\n        children,\n        ...rest\n    }: CardActionButtonProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <button\n            ref={ref}\n            className={styles.actionButton}\n            data-test-id={dataTestId}\n            aria-label={ariaLabel}\n            type=\"button\"\n            onClick={onClick}\n            {...rest}\n        >\n            {children}\n        </button>\n    );\n};\nCardActionButton.displayName = 'Card.ActionButton';\n"],"names":["CardAction","dataTestId","children","ref","jsx","styles","ForwardedRefCardAction","forwardRef","CardActionButton","ariaLabel","onClick","rest"],"mappings":";;;AAWO,MAAMA,IAAa,CACtB,EAAE,gBAAgBC,IAAa,sBAAsB,UAAAC,EAAA,GACrDC,MAGI,gBAAAC,EAAC,SAAI,KAAAD,GAAU,WAAWE,EAAO,QAAQ,gBAAcJ,GAClD,UAAAC,GACL;AAGRF,EAAW,cAAc;AAElB,MAAMM,IAAyBC,EAA4CP,CAAU,GAe/EQ,IAAmB,CAC5B;AAAA,EACI,gBAAgBP,IAAa;AAAA,EAC7B,cAAcQ;AAAA,EACd,SAAAC;AAAA,EACA,UAAAR;AAAA,EACA,GAAGS;AACP,GACAR,MAGI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,KAAAD;AAAA,IACA,WAAWE,EAAO;AAAA,IAClB,gBAAcJ;AAAA,IACd,cAAYQ;AAAA,IACZ,MAAK;AAAA,IACL,SAAAC;AAAA,IACC,GAAGC;AAAA,IAEH,UAAAT;AAAA,EAAA;AAAA;AAIbM,EAAiB,cAAc;"}

package/dist/fondue-components5.js

@@ -1,7 +1,7 @@
 import { jsx as f } from "react/jsx-runtime";
 import { forwardRef as n } from "react";
-import { propsToCssVariables as x } from "./fondue-components45.js";
-import y from "./fondue-components46.js";
+import { propsToCssVariables as x } from "./fondue-components46.js";
+import y from "./fondue-components47.js";
 const c = n(
   ({
     as: a = "div",

package/dist/fondue-components50.js

@@ -1,57 +1,36 @@
-import { jsxs as t, jsx as s, Fragment as N } from "react/jsx-runtime";
-import { IconDroplet as I, IconCross as k, IconCaretDown as v } from "@frontify/fondue-icons";
-import { forwardRef as P } from "react";
-import { useTranslation as w } from "./fondue-components42.js";
-import { Button as y } from "./fondue-components6.js";
-import a from "./fondue-components119.js";
-import { getColorWithName as z, colorToCss as x } from "./fondue-components53.js";
-const c = ({
-  id: m,
-  currentColor: e,
-  isOpen: d,
-  disabled: o = !1,
-  onClear: i,
-  onClick: l,
-  "data-test-id": n = "color-picker-input",
-  ...r
-}, p) => {
-  const { t: f } = w(), h = (e == null ? void 0 : e.name) ?? (e ? z(e, "RGBA").name : "");
-  return /* @__PURE__ */ t("div", { id: m, className: a.root, ref: p, "data-test-id": n, children: [
-    /* @__PURE__ */ t(
-      "button",
-      {
-        className: a.button,
-        ...r,
-        disabled: o,
-        onClick: l,
-        type: "button",
-        "data-color-input-select": !0,
-        children: [
-          (e == null ? void 0 : e.red) !== void 0 ? /* @__PURE__ */ s(
-            "div",
-            {
-              "aria-hidden": !0,
-              className: a.colorIndicator,
-              style: { "--active-color": x(e) }
-            }
-          ) : /* @__PURE__ */ t(N, { children: [
-            /* @__PURE__ */ s(I, { size: 16 }),
-            /* @__PURE__ */ s("span", { children: f("ColorPicker_selectColor") })
-          ] }),
-          /* @__PURE__ */ s("span", { className: a.colorName, children: h })
-        ]
-      }
-    ),
-    /* @__PURE__ */ t("div", { className: a.actions, children: [
-      i && /* @__PURE__ */ s(y, { onPress: i, disabled: o, size: "small", emphasis: "weak", aspect: "square", children: /* @__PURE__ */ s(k, { className: a.clearIcon, size: 16 }) }),
-      /* @__PURE__ */ s("div", { className: a.caret, "data-state": d ? "open" : "closed", children: /* @__PURE__ */ s(v, { size: 16 }) })
-    ] })
-  ] });
-};
-c.displayName = "ColorPicker.Input";
-const F = P(c);
+import { jsx as d, jsxs as s } from "react/jsx-runtime";
+import { IconCheckMark as c } from "@frontify/fondue-icons";
+import t from "./fondue-components133.js";
+const o = ({ "data-test-id": a = "fondue-card-banner", size: e = "large", children: n }, r) => /* @__PURE__ */ s("div", { ref: r, className: t.banner, "data-test-id": a, "data-size": e, children: [
+  n,
+  /* @__PURE__ */ d(
+    "div",
+    {
+      className: t.selectionIndicator,
+      "data-test-id": "fondue-card-selection-indicator",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ d(c, { size: 16 })
+    }
+  )
+] });
+o.displayName = "Card.Banner";
+const m = ({ "data-test-id": a = "fondue-card-banner-image", src: e, alt: n = "", fit: r = "cover" }, i) => /* @__PURE__ */ d("img", { ref: i, className: t.bannerImage, "data-test-id": a, "data-fit": r, src: e, alt: n });
+m.displayName = "Card.BannerImage";
+const l = ({ "data-test-id": a = "fondue-card-banner-icon", variant: e = "default", children: n }, r) => /* @__PURE__ */ d(
+  "div",
+  {
+    ref: r,
+    className: t.bannerIcon,
+    "data-test-id": a,
+    "data-variant": e,
+    "aria-hidden": "true",
+    children: n
+  }
+);
+l.displayName = "Card.BannerIcon";
 export {
-  c as ColorPickerInput,
-  F as ForwardedRefColorPickerInput
+  o as CardBanner,
+  l as CardBannerIcon,
+  m as CardBannerImage
 };
 //# sourceMappingURL=fondue-components50.js.map

package/dist/fondue-components50.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components50.js","sources":["../src/components/ColorPicker/ColorPickerInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconCross, IconDroplet } from '@frontify/fondue-icons';\nimport { type CSSProperties, type ForwardedRef, forwardRef } from 'react';\n\nimport { useTranslation } from '#/hooks/useTranslation';\nimport { type CommonAriaAttrs } from '#/utilities/types';\n\nimport { Button } from '../Button/Button';\n\nimport styles from './styles/colorInput.module.scss';\nimport { type RgbaColor } from './types';\nimport { colorToCss, getColorWithName } from './utils';\n\ntype ColorPickerInputProps = {\n    id?: string;\n    /**\n     * The active color in the color picker\n     */\n    currentColor?: RgbaColor;\n    /**\n     * The open state of the color picker used to determine arrow state\n     */\n    isOpen?: boolean;\n    /**\n     * Whether the color picker input is disabled\n     */\n    disabled?: boolean;\n    /**\n     * callback for clearing the color\n     */\n    onClear?: () => void;\n    /**\n     * Event handler called when the color picker input is clicked\n     */\n    onClick?: () => void;\n    /**\n     * The test id of the color picker input\n     */\n    'data-test-id'?: string;\n} & CommonAriaAttrs;\n\nexport const ColorPickerInput = (\n    {\n        id,\n        currentColor,\n        isOpen,\n        disabled = false,\n        onClear,\n        onClick,\n        'data-test-id': dataTestId = 'color-picker-input',\n        ...props\n    }: ColorPickerInputProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const { t } = useTranslation();\n    const colorName = currentColor?.name ?? (currentColor ? getColorWithName(currentColor, 'RGBA').name : '');\n    return (\n        <div id={id} className={styles.root} ref={forwardedRef} data-test-id={dataTestId}>\n            <button\n                className={styles.button}\n                {...props}\n                disabled={disabled}\n                onClick={onClick}\n                type=\"button\"\n                data-color-input-select\n            >\n                {currentColor?.red !== undefined ? (\n                    <div\n                        aria-hidden\n                        className={styles.colorIndicator}\n                        style={{ '--active-color': colorToCss(currentColor) } as CSSProperties}\n                    />\n                ) : (\n                    <>\n                        <IconDroplet size={16} />\n                        <span>{t('ColorPicker_selectColor')}</span>\n                    </>\n                )}\n\n                <span className={styles.colorName}>{colorName}</span>\n            </button>\n            <div className={styles.actions}>\n                {onClear && (\n                    <Button onPress={onClear} disabled={disabled} size=\"small\" emphasis=\"weak\" aspect=\"square\">\n                        <IconCross className={styles.clearIcon} size={16} />\n                    </Button>\n                )}\n                <div className={styles.caret} data-state={isOpen ? 'open' : 'closed'}>\n                    <IconCaretDown size={16} />\n                </div>\n            </div>\n        </div>\n    );\n};\nColorPickerInput.displayName = 'ColorPicker.Input';\n\nexport const ForwardedRefColorPickerInput = forwardRef<HTMLDivElement, ColorPickerInputProps>(ColorPickerInput);\n"],"names":["ColorPickerInput","id","currentColor","isOpen","disabled","onClear","onClick","dataTestId","props","forwardedRef","t","useTranslation","colorName","getColorWithName","jsxs","styles","jsx","colorToCss","Fragment","IconDroplet","Button","IconCross","IconCaretDown","ForwardedRefColorPickerInput","forwardRef"],"mappings":";;;;;;;AA0CO,MAAMA,IAAmB,CAC5B;AAAA,EACI,IAAAC;AAAA,EACA,cAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,gBAAgBC,IAAa;AAAA,EAC7B,GAAGC;AACP,GACAC,MACC;AACD,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA,GACRC,KAAYV,KAAA,gBAAAA,EAAc,UAASA,IAAeW,EAAiBX,GAAc,MAAM,EAAE,OAAO;AACtG,SACI,gBAAAY,EAAC,SAAI,IAAAb,GAAQ,WAAWc,EAAO,MAAM,KAAKN,GAAc,gBAAcF,GAClE,UAAA;AAAA,IAAA,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWC,EAAO;AAAA,QACjB,GAAGP;AAAA,QACJ,UAAAJ;AAAA,QACA,SAAAE;AAAA,QACA,MAAK;AAAA,QACL,2BAAuB;AAAA,QAEtB,UAAA;AAAA,WAAAJ,KAAA,gBAAAA,EAAc,SAAQ,SACnB,gBAAAc;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,eAAW;AAAA,cACX,WAAWD,EAAO;AAAA,cAClB,OAAO,EAAE,kBAAkBE,EAAWf,CAAY,EAAA;AAAA,YAAE;AAAA,UAAA,IAGxD,gBAAAY,EAAAI,GAAA,EACI,UAAA;AAAA,YAAA,gBAAAF,EAACG,GAAA,EAAY,MAAM,GAAA,CAAI;AAAA,YACvB,gBAAAH,EAAC,QAAA,EAAM,UAAAN,EAAE,yBAAyB,EAAA,CAAE;AAAA,UAAA,GACxC;AAAA,UAGJ,gBAAAM,EAAC,QAAA,EAAK,WAAWD,EAAO,WAAY,UAAAH,EAAA,CAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAElD,gBAAAE,EAAC,OAAA,EAAI,WAAWC,EAAO,SAClB,UAAA;AAAA,MAAAV,uBACIe,GAAA,EAAO,SAASf,GAAS,UAAAD,GAAoB,MAAK,SAAQ,UAAS,QAAO,QAAO,UAC9E,4BAACiB,GAAA,EAAU,WAAWN,EAAO,WAAW,MAAM,IAAI,GACtD;AAAA,MAEJ,gBAAAC,EAAC,OAAA,EAAI,WAAWD,EAAO,OAAO,cAAYZ,IAAS,SAAS,UACxD,UAAA,gBAAAa,EAACM,GAAA,EAAc,MAAM,IAAI,EAAA,CAC7B;AAAA,IAAA,EAAA,CACJ;AAAA,EAAA,GACJ;AAER;AACAtB,EAAiB,cAAc;AAExB,MAAMuB,IAA+BC,EAAkDxB,CAAgB;"}
+{"version":3,"file":"fondue-components50.js","sources":["../src/components/Card/CardBanner.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark } from '@frontify/fondue-icons';\nimport { type ForwardedRef, type ReactNode } from 'react';\n\nimport styles from './styles/card.module.scss';\n\nexport type CardBannerSize = 'small' | 'large';\nexport type CardBannerFit = 'cover' | 'contain';\n\nexport type CardBannerProps = {\n    'data-test-id'?: string;\n    /**\n     * The height variant of the banner.\n     * @default 'large'\n     */\n    size?: CardBannerSize;\n    children?: ReactNode;\n};\n\nexport const CardBanner = (\n    { 'data-test-id': dataTestId = 'fondue-card-banner', size = 'large', children }: CardBannerProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div ref={ref} className={styles.banner} data-test-id={dataTestId} data-size={size}>\n            {children}\n            <div\n                className={styles.selectionIndicator}\n                data-test-id=\"fondue-card-selection-indicator\"\n                aria-hidden=\"true\"\n            >\n                <IconCheckMark size={16} />\n            </div>\n        </div>\n    );\n};\nCardBanner.displayName = 'Card.Banner';\n\nexport type CardBannerImageProps = {\n    'data-test-id'?: string;\n    /**\n     * The image source URL.\n     */\n    src: string;\n    /**\n     * Alternative text for the image.\n     * @default ''\n     */\n    alt?: string;\n    /**\n     * How the image should fit within its container.\n     * @default 'cover'\n     */\n    fit?: CardBannerFit;\n};\n\nexport const CardBannerImage = (\n    { 'data-test-id': dataTestId = 'fondue-card-banner-image', src, alt = '', fit = 'cover' }: CardBannerImageProps,\n    ref: ForwardedRef<HTMLImageElement>,\n) => {\n    return (\n        <img ref={ref} className={styles.bannerImage} data-test-id={dataTestId} data-fit={fit} src={src} alt={alt} />\n    );\n};\nCardBannerImage.displayName = 'Card.BannerImage';\n\nexport type CardBannerIconVariant = 'default' | 'primary' | 'warning' | 'error' | 'success';\n\nexport type CardBannerIconProps = {\n    'data-test-id'?: string;\n    /**\n     * The color variant of the icon.\n     * @default 'default'\n     */\n    variant?: CardBannerIconVariant;\n    children?: ReactNode;\n};\n\nexport const CardBannerIcon = (\n    { 'data-test-id': dataTestId = 'fondue-card-banner-icon', variant = 'default', children }: CardBannerIconProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            ref={ref}\n            className={styles.bannerIcon}\n            data-test-id={dataTestId}\n            data-variant={variant}\n            aria-hidden=\"true\"\n        >\n            {children}\n        </div>\n    );\n};\nCardBannerIcon.displayName = 'Card.BannerIcon';\n"],"names":["CardBanner","dataTestId","size","children","ref","jsxs","styles","jsx","IconCheckMark","CardBannerImage","src","alt","fit","CardBannerIcon","variant"],"mappings":";;;AAoBO,MAAMA,IAAa,CACtB,EAAE,gBAAgBC,IAAa,sBAAsB,MAAAC,IAAO,SAAS,UAAAC,EAAA,GACrEC,MAGI,gBAAAC,EAAC,SAAI,KAAAD,GAAU,WAAWE,EAAO,QAAQ,gBAAcL,GAAY,aAAWC,GACzE,UAAA;AAAA,EAAAC;AAAA,EACD,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWD,EAAO;AAAA,MAClB,gBAAa;AAAA,MACb,eAAY;AAAA,MAEZ,UAAA,gBAAAC,EAACC,GAAA,EAAc,MAAM,GAAA,CAAI;AAAA,IAAA;AAAA,EAAA;AAC7B,GACJ;AAGRR,EAAW,cAAc;AAoBlB,MAAMS,IAAkB,CAC3B,EAAE,gBAAgBR,IAAa,4BAA4B,KAAAS,GAAK,KAAAC,IAAM,IAAI,KAAAC,IAAM,QAAA,GAChFR,MAGI,gBAAAG,EAAC,OAAA,EAAI,KAAAH,GAAU,WAAWE,EAAO,aAAa,gBAAcL,GAAY,YAAUW,GAAK,KAAAF,GAAU,KAAAC,EAAA,CAAU;AAGnHF,EAAgB,cAAc;AAcvB,MAAMI,IAAiB,CAC1B,EAAE,gBAAgBZ,IAAa,2BAA2B,SAAAa,IAAU,WAAW,UAAAX,EAAA,GAC/EC,MAGI,gBAAAG;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,KAAAH;AAAA,IACA,WAAWE,EAAO;AAAA,IAClB,gBAAcL;AAAA,IACd,gBAAca;AAAA,IACd,eAAY;AAAA,IAEX,UAAAX;AAAA,EAAA;AAAA;AAIbU,EAAe,cAAc;"}

package/dist/fondue-components51.js

@@ -1,134 +1,24 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import { forwardRef as I, useState as R, useEffect as x } from "react";
-import { useTranslation as S } from "./fondue-components42.js";
-import { Select as c } from "./fondue-components29.js";
-import { TextInput as r } from "./fondue-components37.js";
-import l from "./fondue-components52.js";
-import { rgbColorToHex as m, DEFAULT_COLOR as V, DEFAULT_FORMAT as y, isValidHexColor as h, hexColorToRgba as D, getLimitedColorChannelValue as s } from "./fondue-components53.js";
-const v = () => {
-}, f = ({
-  currentColor: t = V,
-  onColorChange: o = v,
-  currentFormat: u = y,
-  setCurrentFormat: g = v,
-  "data-test-id": b = "color-picker-value-input"
-}, N) => {
-  const { t: i } = S(), [p, d] = R(() => m(t));
-  return x(() => {
-    d(m(t));
-  }, [t]), /* @__PURE__ */ n("div", { className: l.inputs, "data-test-id": b, ref: N, children: [
-    /* @__PURE__ */ e("div", { className: l.colorFormatInput, children: /* @__PURE__ */ n(
-      c,
-      {
-        "data-test-id": "color-picker-select-format",
-        "aria-label": i("ColorPicker_selectFormat"),
-        onSelect: (a) => {
-          g(a);
-        },
-        value: u,
-        children: [
-          /* @__PURE__ */ e(c.Item, { value: "HEX", children: "HEX" }),
-          /* @__PURE__ */ e(c.Item, { value: "RGBA", children: "RGBA" })
-        ]
-      }
-    ) }),
-    u === "HEX" ? /* @__PURE__ */ e(
-      r.Root,
-      {
-        "data-test-id": "color-picker-value-input-hex",
-        className: l.valueInput,
-        type: "text",
-        value: p,
-        status: h(p) ? "neutral" : "error",
-        onBlur: (a) => {
-          h(a.target.value) && o({ ...D(a.target.value), alpha: t.alpha });
-        },
-        onChange: (a) => {
-          const k = a.target.value.startsWith("#") ? a.target.value.slice(1) : a.target.value;
-          d(k);
-        },
-        "aria-label": i("ColorPicker_hexValue"),
-        children: /* @__PURE__ */ e(r.Slot, { name: "left", children: /* @__PURE__ */ e("span", { className: l.inputDecorator, children: "#" }) })
-      }
-    ) : /* @__PURE__ */ n("div", { className: l.colorChannelInputGroup, children: [
-      /* @__PURE__ */ e(
-        r.Root,
-        {
-          "data-test-id": "color-picker-value-input-red",
-          className: l.valueInput,
-          value: t.red,
-          type: "number",
-          onChange: (a) => {
-            o({
-              ...t,
-              red: s(a.target.value)
-            });
-          },
-          "aria-label": i("ColorPicker_redChannel"),
-          children: /* @__PURE__ */ e(r.Slot, { name: "left", children: /* @__PURE__ */ e("span", { className: l.inputDecorator, children: "R" }) })
-        }
-      ),
-      /* @__PURE__ */ e(
-        r.Root,
-        {
-          "data-test-id": "color-picker-value-input-green",
-          className: l.valueInput,
-          value: t.green,
-          type: "number",
-          onChange: (a) => {
-            o({
-              ...t,
-              green: s(a.target.value)
-            });
-          },
-          "aria-label": i("ColorPicker_greenChannel"),
-          children: /* @__PURE__ */ e(r.Slot, { name: "left", children: /* @__PURE__ */ e("span", { className: l.inputDecorator, children: "G" }) })
-        }
-      ),
-      /* @__PURE__ */ e(
-        r.Root,
-        {
-          "data-test-id": "color-picker-value-input-blue",
-          className: l.valueInput,
-          value: t.blue,
-          type: "number",
-          onChange: (a) => {
-            o({
-              ...t,
-              blue: s(a.target.value)
-            });
-          },
-          "aria-label": i("ColorPicker_blueChannel"),
-          children: /* @__PURE__ */ e(r.Slot, { name: "left", children: /* @__PURE__ */ e("span", { className: l.inputDecorator, children: "B" }) })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ e("div", { className: l.colorAlphaInput, children: /* @__PURE__ */ n(
-      r.Root,
-      {
-        "data-test-id": "color-picker-value-input-alpha",
-        className: l.valueInput,
-        value: t.alpha === void 0 ? 100 : Math.trunc(t.alpha * 100).toString(),
-        type: "number",
-        onChange: (a) => {
-          o({
-            ...t,
-            alpha: s(a.target.value, 0, 100) / 100
-          });
-        },
-        "aria-label": i("ColorPicker_opacity"),
-        children: [
-          /* @__PURE__ */ e(r.Slot, { name: "left", children: /* @__PURE__ */ e("span", { className: l.inputDecorator, children: "A" }) }),
-          /* @__PURE__ */ e(r.Slot, { name: "right", children: /* @__PURE__ */ e("span", { className: l.inputDecorator, children: "%" }) })
-        ]
-      }
-    ) })
-  ] });
+import { jsx as i } from "react/jsx-runtime";
+import { useCardContext as r } from "./fondue-components134.js";
+import s from "./fondue-components133.js";
+const n = ({ "data-test-id": a = "fondue-card-badges", children: t }, d) => /* @__PURE__ */ i("div", { ref: d, className: s.badges, "data-test-id": a, children: t });
+n.displayName = "Card.Badges";
+const m = ({ "data-test-id": a = "fondue-card-thumbnail-image", src: t, alt: d = "" }, e) => /* @__PURE__ */ i("img", { ref: e, className: s.thumbnailImage, "data-test-id": a, src: t, alt: d });
+m.displayName = "Card.ThumbnailImage";
+const o = ({ "data-test-id": a = "fondue-card-thumbnail-icon", children: t }, d) => /* @__PURE__ */ i("div", { ref: d, className: s.thumbnailIcon, "data-test-id": a, "aria-hidden": "true", children: t });
+o.displayName = "Card.ThumbnailIcon";
+const l = ({ "data-test-id": a = "fondue-card-title", children: t }, d) => {
+  const e = r();
+  return /* @__PURE__ */ i("div", { ref: d, id: e == null ? void 0 : e.titleId, className: s.title, "data-test-id": a, children: t });
 };
-f.displayName = "ColorPicker.Values";
-const F = I(f);
+l.displayName = "Card.Title";
+const c = ({ "data-test-id": a = "fondue-card-description", children: t }, d) => /* @__PURE__ */ i("div", { ref: d, className: s.description, "data-test-id": a, children: t });
+c.displayName = "Card.Description";
 export {
-  f as ColorValueInput,
-  F as ForwardedRefColorValueInput
+  n as CardBadges,
+  c as CardDescription,
+  o as CardThumbnailIcon,
+  m as CardThumbnailImage,
+  l as CardTitle
 };
 //# sourceMappingURL=fondue-components51.js.map

package/dist/fondue-components51.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components51.js","sources":["../src/components/ColorPicker/ColorValueInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ForwardedRef, forwardRef, useEffect, useState } from 'react';\n\nimport { useTranslation } from '#/hooks/useTranslation';\n\nimport { Select } from '../Select';\nimport { TextInput } from '../TextInput/TextInput';\n\nimport styles from './styles/customColorPicker.module.scss';\nimport { type RgbaColor } from './types';\nimport {\n    DEFAULT_COLOR,\n    DEFAULT_FORMAT,\n    getLimitedColorChannelValue,\n    hexColorToRgba,\n    isValidHexColor,\n    rgbColorToHex,\n} from './utils';\n\ntype ColorFormat = 'HEX' | 'RGBA';\n\ntype ColorValueInputProps = {\n    /**\n     * @ignore\n     * The active color in the color picker, passed down from the root component\n     */\n    currentColor?: RgbaColor;\n    /**\n     * @ignore\n     * Event handler called when the color changes, passed down from the root component\n     */\n    onColorChange?: (color: RgbaColor) => void;\n    /**\n     * @ignore\n     * The format to use for the color input, passed down from the root component\n     */\n    currentFormat?: ColorFormat;\n    /**\n     * @ignore\n     * The format to use for the color input, passed down from the root component\n     */\n    setCurrentFormat?: (format: ColorFormat) => void;\n    /**\n     * The test id of the color picker value input\n     */\n    'data-test-id'?: string;\n};\n\nconst nooperation = () => {};\n\nexport const ColorValueInput = (\n    {\n        currentColor = DEFAULT_COLOR,\n        onColorChange = nooperation,\n        currentFormat = DEFAULT_FORMAT,\n        setCurrentFormat = nooperation,\n        'data-test-id': dataTestId = 'color-picker-value-input',\n    }: ColorValueInputProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const { t } = useTranslation();\n    const [hexColorValue, setHexColorValue] = useState<string>(() => rgbColorToHex(currentColor));\n\n    useEffect(() => {\n        setHexColorValue(rgbColorToHex(currentColor));\n    }, [currentColor]);\n\n    return (\n        <div className={styles.inputs} data-test-id={dataTestId} ref={forwardedRef}>\n            <div className={styles.colorFormatInput}>\n                <Select\n                    data-test-id=\"color-picker-select-format\"\n                    aria-label={t('ColorPicker_selectFormat')}\n                    onSelect={(selectedValue) => {\n                        setCurrentFormat(selectedValue as ColorFormat);\n                    }}\n                    value={currentFormat}\n                >\n                    <Select.Item value=\"HEX\">HEX</Select.Item>\n                    <Select.Item value=\"RGBA\">RGBA</Select.Item>\n                </Select>\n            </div>\n            {currentFormat === 'HEX' ? (\n                <TextInput.Root\n                    data-test-id=\"color-picker-value-input-hex\"\n                    className={styles.valueInput}\n                    type=\"text\"\n                    value={hexColorValue}\n                    status={isValidHexColor(hexColorValue) ? 'neutral' : 'error'}\n                    onBlur={(event) => {\n                        if (isValidHexColor(event.target.value)) {\n                            onColorChange({ ...hexColorToRgba(event.target.value), alpha: currentColor.alpha });\n                        }\n                    }}\n                    onChange={(event) => {\n                        const inputValue = event.target.value.startsWith('#')\n                            ? event.target.value.slice(1)\n                            : event.target.value;\n\n                        setHexColorValue(inputValue);\n                    }}\n                    aria-label={t('ColorPicker_hexValue')}\n                >\n                    <TextInput.Slot name=\"left\">\n                        <span className={styles.inputDecorator}>#</span>\n                    </TextInput.Slot>\n                </TextInput.Root>\n            ) : (\n                <div className={styles.colorChannelInputGroup}>\n                    <TextInput.Root\n                        data-test-id=\"color-picker-value-input-red\"\n                        className={styles.valueInput}\n                        value={currentColor.red}\n                        type=\"number\"\n                        onChange={(event) => {\n                            onColorChange({\n                                ...currentColor,\n                                red: getLimitedColorChannelValue(event.target.value),\n                            });\n                        }}\n                        aria-label={t('ColorPicker_redChannel')}\n                    >\n                        <TextInput.Slot name=\"left\">\n                            <span className={styles.inputDecorator}>R</span>\n                        </TextInput.Slot>\n                    </TextInput.Root>\n                    <TextInput.Root\n                        data-test-id=\"color-picker-value-input-green\"\n                        className={styles.valueInput}\n                        value={currentColor.green}\n                        type=\"number\"\n                        onChange={(event) => {\n                            onColorChange({\n                                ...currentColor,\n                                green: getLimitedColorChannelValue(event.target.value),\n                            });\n                        }}\n                        aria-label={t('ColorPicker_greenChannel')}\n                    >\n                        <TextInput.Slot name=\"left\">\n                            <span className={styles.inputDecorator}>G</span>\n                        </TextInput.Slot>\n                    </TextInput.Root>\n                    <TextInput.Root\n                        data-test-id=\"color-picker-value-input-blue\"\n                        className={styles.valueInput}\n                        value={currentColor.blue}\n                        type=\"number\"\n                        onChange={(event) => {\n                            onColorChange({\n                                ...currentColor,\n                                blue: getLimitedColorChannelValue(event.target.value),\n                            });\n                        }}\n                        aria-label={t('ColorPicker_blueChannel')}\n                    >\n                        <TextInput.Slot name=\"left\">\n                            <span className={styles.inputDecorator}>B</span>\n                        </TextInput.Slot>\n                    </TextInput.Root>\n                </div>\n            )}\n            <div className={styles.colorAlphaInput}>\n                <TextInput.Root\n                    data-test-id=\"color-picker-value-input-alpha\"\n                    className={styles.valueInput}\n                    /* .toString() is a workaround for https://github.com/facebook/react/issues/9402 */\n                    value={currentColor.alpha === undefined ? 100 : Math.trunc(currentColor.alpha * 100).toString()}\n                    type=\"number\"\n                    onChange={(event) => {\n                        onColorChange({\n                            ...currentColor,\n                            alpha: getLimitedColorChannelValue(event.target.value, 0, 100) / 100,\n                        });\n                    }}\n                    aria-label={t('ColorPicker_opacity')}\n                >\n                    <TextInput.Slot name=\"left\">\n                        <span className={styles.inputDecorator}>A</span>\n                    </TextInput.Slot>\n                    <TextInput.Slot name=\"right\">\n                        <span className={styles.inputDecorator}>%</span>\n                    </TextInput.Slot>\n                </TextInput.Root>\n            </div>\n        </div>\n    );\n};\nColorValueInput.displayName = 'ColorPicker.Values';\n\nexport const ForwardedRefColorValueInput = forwardRef<HTMLDivElement, ColorValueInputProps>(ColorValueInput);\n"],"names":["nooperation","ColorValueInput","currentColor","DEFAULT_COLOR","onColorChange","currentFormat","DEFAULT_FORMAT","setCurrentFormat","dataTestId","forwardedRef","t","useTranslation","hexColorValue","setHexColorValue","useState","rgbColorToHex","useEffect","jsxs","styles","jsx","Select","selectedValue","TextInput","isValidHexColor","event","hexColorToRgba","inputValue","getLimitedColorChannelValue","ForwardedRefColorValueInput","forwardRef"],"mappings":"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"}
+{"version":3,"file":"fondue-components51.js","sources":["../src/components/Card/CardContent.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ForwardedRef, type ReactNode } from 'react';\n\nimport { useCardContext } from './CardContext';\nimport styles from './styles/card.module.scss';\n\nexport type CardBadgesProps = {\n    'data-test-id'?: string;\n    children?: ReactNode;\n};\n\nexport const CardBadges = (\n    { 'data-test-id': dataTestId = 'fondue-card-badges', children }: CardBadgesProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div ref={ref} className={styles.badges} data-test-id={dataTestId}>\n            {children}\n        </div>\n    );\n};\nCardBadges.displayName = 'Card.Badges';\n\nexport type CardThumbnailImageProps = {\n    'data-test-id'?: string;\n    /**\n     * The thumbnail image source URL.\n     */\n    src: string;\n    /**\n     * Alternative text for the thumbnail image.\n     * @default ''\n     */\n    alt?: string;\n};\n\nexport const CardThumbnailImage = (\n    { 'data-test-id': dataTestId = 'fondue-card-thumbnail-image', src, alt = '' }: CardThumbnailImageProps,\n    ref: ForwardedRef<HTMLImageElement>,\n) => {\n    return <img ref={ref} className={styles.thumbnailImage} data-test-id={dataTestId} src={src} alt={alt} />;\n};\nCardThumbnailImage.displayName = 'Card.ThumbnailImage';\n\nexport type CardThumbnailIconProps = {\n    'data-test-id'?: string;\n    children?: ReactNode;\n};\n\nexport const CardThumbnailIcon = (\n    { 'data-test-id': dataTestId = 'fondue-card-thumbnail-icon', children }: CardThumbnailIconProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div ref={ref} className={styles.thumbnailIcon} data-test-id={dataTestId} aria-hidden=\"true\">\n            {children}\n        </div>\n    );\n};\nCardThumbnailIcon.displayName = 'Card.ThumbnailIcon';\n\nexport type CardTitleProps = {\n    'data-test-id'?: string;\n    children?: ReactNode;\n};\n\nexport const CardTitle = (\n    { 'data-test-id': dataTestId = 'fondue-card-title', children }: CardTitleProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const context = useCardContext();\n\n    return (\n        <div ref={ref} id={context?.titleId} className={styles.title} data-test-id={dataTestId}>\n            {children}\n        </div>\n    );\n};\nCardTitle.displayName = 'Card.Title';\n\nexport type CardDescriptionProps = {\n    'data-test-id'?: string;\n    children?: ReactNode;\n};\n\nexport const CardDescription = (\n    { 'data-test-id': dataTestId = 'fondue-card-description', children }: CardDescriptionProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div ref={ref} className={styles.description} data-test-id={dataTestId}>\n            {children}\n        </div>\n    );\n};\nCardDescription.displayName = 'Card.Description';\n"],"names":["CardBadges","dataTestId","children","ref","jsx","styles","CardThumbnailImage","src","alt","CardThumbnailIcon","CardTitle","context","useCardContext","CardDescription"],"mappings":";;;AAYO,MAAMA,IAAa,CACtB,EAAE,gBAAgBC,IAAa,sBAAsB,UAAAC,EAAA,GACrDC,MAGI,gBAAAC,EAAC,SAAI,KAAAD,GAAU,WAAWE,EAAO,QAAQ,gBAAcJ,GAClD,UAAAC,GACL;AAGRF,EAAW,cAAc;AAelB,MAAMM,IAAqB,CAC9B,EAAE,gBAAgBL,IAAa,+BAA+B,KAAAM,GAAK,KAAAC,IAAM,GAAA,GACzEL,MAEO,gBAAAC,EAAC,SAAI,KAAAD,GAAU,WAAWE,EAAO,gBAAgB,gBAAcJ,GAAY,KAAAM,GAAU,KAAAC,EAAA,CAAU;AAE1GF,EAAmB,cAAc;AAO1B,MAAMG,IAAoB,CAC7B,EAAE,gBAAgBR,IAAa,8BAA8B,UAAAC,EAAA,GAC7DC,MAGI,gBAAAC,EAAC,OAAA,EAAI,KAAAD,GAAU,WAAWE,EAAO,eAAe,gBAAcJ,GAAY,eAAY,QACjF,UAAAC,EAAA,CACL;AAGRO,EAAkB,cAAc;AAOzB,MAAMC,IAAY,CACrB,EAAE,gBAAgBT,IAAa,qBAAqB,UAAAC,EAAA,GACpDC,MACC;AACD,QAAMQ,IAAUC,EAAA;AAEhB,SACI,gBAAAR,EAAC,OAAA,EAAI,KAAAD,GAAU,IAAIQ,KAAA,gBAAAA,EAAS,SAAS,WAAWN,EAAO,OAAO,gBAAcJ,GACvE,UAAAC,EAAA,CACL;AAER;AACAQ,EAAU,cAAc;AAOjB,MAAMG,IAAkB,CAC3B,EAAE,gBAAgBZ,IAAa,2BAA2B,UAAAC,EAAA,GAC1DC,MAGI,gBAAAC,EAAC,SAAI,KAAAD,GAAU,WAAWE,EAAO,aAAa,gBAAcJ,GACvD,UAAAC,GACL;AAGRW,EAAgB,cAAc;"}