@rio-cloud/rio-uikit 2.5.1 → 3.0.0-beta.1

package/components/avatar/Avatar.d.ts

@@ -1,4 +1,5 @@
-import { ComponentProps } from 'react';
+import { ComponentProps, ReactElement } from 'react';
+import { IconType } from '../icon/Icon';
 export type AvatarProps = ComponentProps<'div'> & {
     /**
      * When a name is provided, the Avatar automatically generates and displays the initials of that name.
@@ -24,7 +25,7 @@ export type AvatarProps = ComponentProps<'div'> & {
      *
      * @default 'user'
      */
-    iconName?: string;
+    iconName?: IconType;
     /**
      * The height and width of the component.
      *
@@ -40,7 +41,7 @@ export type AvatarProps = ComponentProps<'div'> & {
     /**
      * The content of the Avatars tooltip. if nothing is provided, the name is used.
      */
-    tooltip?: string | JSX.Element;
+    tooltip?: string | ReactElement;
     /**
      * Additional classes set to the icon element.
      */

package/components/avatar/Avatar.js

@@ -1,58 +1,33 @@
-import { jsx as o } from "react/jsx-runtime";
-import _ from "../../utils/classNames.js";
-import g from "../tooltip/SimpleTooltip.js";
-import I from "./AvatarContent.js";
-const N = 100, O = 0, M = (s) => {
-  const {
-    name: t,
-    abbr: i,
-    image: r,
-    alt: n,
-    iconName: m = "user",
-    size: p = 40,
-    backgroundColor: l = "bg-lighter",
-    tooltip: c,
-    iconClassName: f,
-    className: T = "",
-    ...h
-  } = s, d = _("Avatar", l, T), e = c || t;
-  return ((a) => e ? /* @__PURE__ */ o(
-    g,
-    {
-      content: e,
-      placement: "bottom",
-      delay: { show: N, hide: O },
-      popperConfig: {
-        modifiers: [
-          {
-            name: "offset",
-            options: {
-              offset: [0, 5]
-            }
-          },
-          {
-            name: "arrow",
-            options: {}
-          }
-        ]
-      },
-      children: a
-    }
-  ) : a)(
-    /* @__PURE__ */ o("div", { ...h, className: d, style: { height: `${p}px` }, children: /* @__PURE__ */ o(
-      I,
-      {
-        name: t,
-        abbr: i,
-        image: r,
-        alt: n,
-        iconName: m,
-        iconClassName: f
-      }
-    ) })
-  );
+import e from "../../utils/classNames.js";
+import t from "../tooltip/SimpleTooltip.js";
+import n from "./AvatarContent.js";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/avatar/Avatar.tsx
+var i = 100, a = 0, o = (o) => {
+	let { name: s, abbr: c, image: l, alt: u, iconName: d = "user", size: f = 40, backgroundColor: p = "bg-lighter", tooltip: m, iconClassName: h, className: g = "", ..._ } = o, v = e("Avatar", p, g), y = m || s;
+	return ((e) => y ? /* @__PURE__ */ r(t, {
+		content: y,
+		placement: "bottom",
+		delay: {
+			show: i,
+			hide: a
+		},
+		children: e
+	}) : e)(/* @__PURE__ */ r("div", {
+		..._,
+		className: v,
+		style: { height: `${f}px` },
+		children: /* @__PURE__ */ r(n, {
+			name: s,
+			abbr: c,
+			image: l,
+			alt: u,
+			iconName: d,
+			iconClassName: h
+		})
+	}));
 };
-export {
-  M as default
-};
-//# sourceMappingURL=Avatar.js.map
+//#endregion
+export { o as default };
+
+//# sourceMappingURL=Avatar.js.map

package/components/avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport classNames from '../../utils/classNames';\nimport SimpleTooltip from '../tooltip/SimpleTooltip';\nimport AvatarContent from './AvatarContent';\n\nconst TOOLTIP_SHOW_TIMEOUT_IN_MS = 100;\nconst TOOLTIP_HIDE_TIMEOUT_IN_MS = 0;\n\nexport type AvatarProps = ComponentProps<'div'> & {\n    /**\n     * When a name is provided, the Avatar automatically generates and displays the initials of that name.\n     * The name also appears in a tooltip when hovered over.\n     */\n    name?: string;\n\n    /**\n     * The abbreviation can also be defined manually. It is recommended to limit abbreviations\n     * to a maximum of 2 to 3 characters.\n     */\n    abbr?: string;\n\n    /**\n     * The image to be shown. When an image is displayed, the abbreviation is not shown.\n     */\n    image?: string;\n\n    /**\n     * The image alt text. If not given, the name will be used.\n     */\n    alt?: string;\n\n    /**\n     * The name of an icon that should be shown instead of initials. If nothing is provided,\n     * a default icon will be shown.\n     *\n     * @default 'user'\n     */\n    iconName?: string;\n\n    /**\n     * The height and width of the component.\n     *\n     * @default 40\n     */\n    size?: number;\n\n    /**\n     * The background color for the component. By default, the text and icon color is derived from the background color.\n     *\n     * @default 'bg-lighter'\n     */\n    backgroundColor?: string;\n\n    /**\n     * The content of the Avatars tooltip. if nothing is provided, the name is used.\n     */\n    tooltip?: string | JSX.Element;\n\n    /**\n     * Additional classes set to the icon element.\n     */\n    iconClassName?: string;\n\n    /**\n     * Additional classes set to the wrapper element.\n     */\n    className?: string;\n};\n\nconst Avatar = (props: AvatarProps) => {\n    const {\n        name,\n        abbr,\n        image,\n        alt,\n        iconName = 'user',\n        size = 40,\n        backgroundColor = 'bg-lighter',\n        tooltip,\n        iconClassName,\n        className = '',\n        ...remainingProps\n    } = props;\n\n    const classes = classNames('Avatar', backgroundColor, className);\n\n    const tooltipContent = tooltip || name;\n\n    const wrapWithTooltip = (content: JSX.Element) =>\n        tooltipContent ? (\n            <SimpleTooltip\n                content={tooltipContent}\n                placement='bottom'\n                delay={{ show: TOOLTIP_SHOW_TIMEOUT_IN_MS, hide: TOOLTIP_HIDE_TIMEOUT_IN_MS }}\n                popperConfig={{\n                    modifiers: [\n                        {\n                            name: 'offset',\n                            options: {\n                                offset: [0, 5],\n                            },\n                        },\n                        {\n                            name: 'arrow',\n                            options: {},\n                        },\n                    ],\n                }}\n            >\n                {content}\n            </SimpleTooltip>\n        ) : (\n            content\n        );\n\n    return wrapWithTooltip(\n        <div {...remainingProps} className={classes} style={{ height: `${size}px` }}>\n            <AvatarContent\n                name={name}\n                abbr={abbr}\n                image={image}\n                alt={alt}\n                iconName={iconName}\n                iconClassName={iconClassName}\n            />\n        </div>\n    );\n};\n\nexport default Avatar;\n"],"names":["TOOLTIP_SHOW_TIMEOUT_IN_MS","TOOLTIP_HIDE_TIMEOUT_IN_MS","Avatar","props","name","abbr","image","alt","iconName","size","backgroundColor","tooltip","iconClassName","className","remainingProps","classes","classNames","tooltipContent","content","jsx","SimpleTooltip","AvatarContent"],"mappings":";;;;AAMA,MAAMA,IAA6B,KAC7BC,IAA6B,GA+D7BC,IAAS,CAACC,MAAuB;AACnC,QAAM;AAAA,IACF,MAAAC;AAAA,IACA,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,KAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,MAAAC,IAAO;AAAA,IACP,iBAAAC,IAAkB;AAAA,IAClB,SAAAC;AAAA,IACA,eAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,GAAGC;AAAA,EAAA,IACHX,GAEEY,IAAUC,EAAW,UAAUN,GAAiBG,CAAS,GAEzDI,IAAiBN,KAAWP;AA6BlC,UA3BwB,CAACc,MACrBD,IACI,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,SAASH;AAAA,MACT,WAAU;AAAA,MACV,OAAO,EAAE,MAAMjB,GAA4B,MAAMC,EAAA;AAAA,MACjD,cAAc;AAAA,QACV,WAAW;AAAA,UACP;AAAA,YACI,MAAM;AAAA,YACN,SAAS;AAAA,cACL,QAAQ,CAAC,GAAG,CAAC;AAAA,YAAA;AAAA,UACjB;AAAA,UAEJ;AAAA,YACI,MAAM;AAAA,YACN,SAAS,CAAA;AAAA,UAAC;AAAA,QACd;AAAA,MACJ;AAAA,MAGH,UAAAiB;AAAA,IAAA;AAAA,EAAA,IAGLA;AAAA,IAIJ,gBAAAC,EAAC,OAAA,EAAK,GAAGL,GAAgB,WAAWC,GAAS,OAAO,EAAE,QAAQ,GAAGN,CAAI,KAAA,GACjE,UAAA,gBAAAU;AAAA,MAACE;AAAA,MAAA;AAAA,QACG,MAAAjB;AAAA,QACA,MAAAC;AAAA,QACA,OAAAC;AAAA,QACA,KAAAC;AAAA,QACA,UAAAC;AAAA,QACA,eAAAI;AAAA,MAAA;AAAA,IAAA,EACJ,CACJ;AAAA,EAAA;AAER;"}
+{"version":3,"file":"Avatar.js","names":[],"sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import type { ComponentProps, ReactElement } from 'react';\n\nimport classNames from '../../utils/classNames';\nimport SimpleTooltip from '../tooltip/SimpleTooltip';\nimport AvatarContent from './AvatarContent';\nimport type { IconType } from '../icon/Icon';\n\nconst TOOLTIP_SHOW_TIMEOUT_IN_MS = 100;\nconst TOOLTIP_HIDE_TIMEOUT_IN_MS = 0;\n\nexport type AvatarProps = ComponentProps<'div'> & {\n    /**\n     * When a name is provided, the Avatar automatically generates and displays the initials of that name.\n     * The name also appears in a tooltip when hovered over.\n     */\n    name?: string;\n\n    /**\n     * The abbreviation can also be defined manually. It is recommended to limit abbreviations\n     * to a maximum of 2 to 3 characters.\n     */\n    abbr?: string;\n\n    /**\n     * The image to be shown. When an image is displayed, the abbreviation is not shown.\n     */\n    image?: string;\n\n    /**\n     * The image alt text. If not given, the name will be used.\n     */\n    alt?: string;\n\n    /**\n     * The name of an icon that should be shown instead of initials. If nothing is provided,\n     * a default icon will be shown.\n     *\n     * @default 'user'\n     */\n    iconName?: IconType;\n\n    /**\n     * The height and width of the component.\n     *\n     * @default 40\n     */\n    size?: number;\n\n    /**\n     * The background color for the component. By default, the text and icon color is derived from the background color.\n     *\n     * @default 'bg-lighter'\n     */\n    backgroundColor?: string;\n\n    /**\n     * The content of the Avatars tooltip. if nothing is provided, the name is used.\n     */\n    tooltip?: string | ReactElement;\n\n    /**\n     * Additional classes set to the icon element.\n     */\n    iconClassName?: string;\n\n    /**\n     * Additional classes set to the wrapper element.\n     */\n    className?: string;\n};\n\nconst Avatar = (props: AvatarProps) => {\n    const {\n        name,\n        abbr,\n        image,\n        alt,\n        iconName = 'user',\n        size = 40,\n        backgroundColor = 'bg-lighter',\n        tooltip,\n        iconClassName,\n        className = '',\n        ...remainingProps\n    } = props;\n\n    const classes = classNames('Avatar', backgroundColor, className);\n\n    const tooltipContent = tooltip || name;\n\n    const wrapWithTooltip = (content: ReactElement) =>\n        tooltipContent ? (\n            <SimpleTooltip\n                content={tooltipContent}\n                placement='bottom'\n                delay={{ show: TOOLTIP_SHOW_TIMEOUT_IN_MS, hide: TOOLTIP_HIDE_TIMEOUT_IN_MS }}\n            >\n                {content}\n            </SimpleTooltip>\n        ) : (\n            content\n        );\n\n    return wrapWithTooltip(\n        <div {...remainingProps} className={classes} style={{ height: `${size}px` }}>\n            <AvatarContent\n                name={name}\n                abbr={abbr}\n                image={image}\n                alt={alt}\n                iconName={iconName}\n                iconClassName={iconClassName}\n            />\n        </div>\n    );\n};\n\nexport default Avatar;\n"],"mappings":";;;;;AAOA,IAAM,IAA6B,KAC7B,IAA6B,GA+D7B,KAAU,MAAuB;CACnC,IAAM,EACF,SACA,SACA,UACA,QACA,cAAW,QACX,UAAO,IACP,qBAAkB,cAClB,YACA,kBACA,eAAY,IACZ,GAAG,MACH,GAEE,IAAU,EAAW,UAAU,GAAiB,CAAS,GAEzD,IAAiB,KAAW;CAelC,SAbyB,MACrB,IACI,kBAAC,GAAD;EACI,SAAS;EACT,WAAU;EACV,OAAO;GAAE,MAAM;GAA4B,MAAM;EAA2B;YAE3E;CACU,CAAA,IAEf,EAGD,CACH,kBAAC,OAAD;EAAK,GAAI;EAAgB,WAAW;EAAS,OAAO,EAAE,QAAQ,GAAG,EAAK,IAAI;YACtE,kBAAC,GAAD;GACU;GACA;GACC;GACF;GACK;GACK;EAClB,CAAA;CACA,CAAA,CACT;AACJ"}

package/components/avatar/AvatarContent.d.ts

@@ -1,9 +1,10 @@
+import { IconType } from '../icon/Icon';
 type AvatarContentProps = {
     image?: string;
     name?: string;
     abbr?: string;
     alt?: string;
-    iconName?: string;
+    iconName?: IconType;
     iconClassName?: string;
 };
 declare const AvatarContent: ({ image, name, abbr, alt, iconName, iconClassName }: AvatarContentProps) => import("react/jsx-runtime").JSX.Element | null;

package/components/avatar/AvatarContent.js

@@ -1,14 +1,24 @@
-import { jsx as r } from "react/jsx-runtime";
-const c = (a = "") => a.split(" ").map((t) => t[0]).join(""), g = ({ image: a, name: t, abbr: s, alt: n, iconName: i = "", iconClassName: e = "" }) => {
-  if (a)
-    return /* @__PURE__ */ r("img", { src: a, alt: n || t || "avatar", className: "Avatar-image", draggable: !1 });
-  if (s || t) {
-    const l = s || c(t), o = l.length > 2 ? { letterSpacing: "-0.2px" } : {};
-    return /* @__PURE__ */ r("span", { className: "Avatar-initials", style: o, children: l });
-  }
-  return i ? /* @__PURE__ */ r("span", { className: `Avatar-icon rioglyph rioglyph-${i} ${e}` }) : null;
+import { normalizeIconName as e } from "../../utils/iconNames.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/avatar/AvatarContent.tsx
+var n = (e = "") => e.split(" ").map((e) => e[0]).join(""), r = ({ image: r, name: i, abbr: a, alt: o, iconName: s = "", iconClassName: c = "" }) => {
+	if (r) return /* @__PURE__ */ t("img", {
+		src: r,
+		alt: o || i || "avatar",
+		className: "Avatar-image",
+		draggable: !1
+	});
+	if (a || i) {
+		let e = a || n(i);
+		return /* @__PURE__ */ t("span", {
+			className: "Avatar-initials",
+			style: e.length > 2 ? { letterSpacing: "-0.2px" } : {},
+			children: e
+		});
+	}
+	return s ? /* @__PURE__ */ t("span", { className: `Avatar-icon uikit-icon ${e(s)} ${c}` }) : null;
 };
-export {
-  g as default
-};
-//# sourceMappingURL=AvatarContent.js.map
+//#endregion
+export { r as default };
+
+//# sourceMappingURL=AvatarContent.js.map

package/components/avatar/AvatarContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarContent.js","sources":["../../../src/components/avatar/AvatarContent.tsx"],"sourcesContent":["const getInitials = (name = '') =>\n    name\n        .split(' ')\n        .map(word => word[0])\n        .join('');\n\ntype AvatarContentProps = {\n    image?: string;\n    name?: string;\n    abbr?: string;\n    alt?: string;\n    iconName?: string;\n    iconClassName?: string;\n};\n\nconst AvatarContent = ({ image, name, abbr, alt, iconName = '', iconClassName = '' }: AvatarContentProps) => {\n    if (image) {\n        return <img src={image} alt={alt || name || 'avatar'} className='Avatar-image' draggable={false} />;\n    }\n\n    if (abbr || name) {\n        const initials = abbr || getInitials(name);\n        const style = initials.length > 2 ? { letterSpacing: '-0.2px' } : {};\n        return (\n            <span className='Avatar-initials' style={style}>\n                {initials}\n            </span>\n        );\n    }\n\n    if (iconName) {\n        return <span className={`Avatar-icon rioglyph rioglyph-${iconName} ${iconClassName}`} />;\n    }\n\n    return null;\n};\n\nexport default AvatarContent;\n"],"names":["getInitials","name","word","AvatarContent","image","abbr","alt","iconName","iconClassName","jsx","initials","style"],"mappings":";AAAA,MAAMA,IAAc,CAACC,IAAO,OACxBA,EACK,MAAM,GAAG,EACT,IAAI,OAAQC,EAAK,CAAC,CAAC,EACnB,KAAK,EAAE,GAWVC,IAAgB,CAAC,EAAE,OAAAC,GAAO,MAAAH,GAAM,MAAAI,GAAM,KAAAC,GAAK,UAAAC,IAAW,IAAI,eAAAC,IAAgB,SAA6B;AACzG,MAAIJ;AACA,WAAO,gBAAAK,EAAC,OAAA,EAAI,KAAKL,GAAO,KAAKE,KAAOL,KAAQ,UAAU,WAAU,gBAAe,WAAW,GAAA,CAAO;AAGrG,MAAII,KAAQJ,GAAM;AACd,UAAMS,IAAWL,KAAQL,EAAYC,CAAI,GACnCU,IAAQD,EAAS,SAAS,IAAI,EAAE,eAAe,SAAA,IAAa,CAAA;AAClE,WACI,gBAAAD,EAAC,QAAA,EAAK,WAAU,mBAAkB,OAAAE,GAC7B,UAAAD,GACL;AAAA,EAER;AAEA,SAAIH,sBACQ,QAAA,EAAK,WAAW,iCAAiCA,CAAQ,IAAIC,CAAa,IAAI,IAGnF;AACX;"}
+{"version":3,"file":"AvatarContent.js","names":[],"sources":["../../../src/components/avatar/AvatarContent.tsx"],"sourcesContent":["import { normalizeIconName } from '../../utils/iconNames';\nimport type { IconType } from '../icon/Icon';\n\nconst getInitials = (name = '') =>\n    name\n        .split(' ')\n        .map(word => word[0])\n        .join('');\n\ntype AvatarContentProps = {\n    image?: string;\n    name?: string;\n    abbr?: string;\n    alt?: string;\n    iconName?: IconType;\n    iconClassName?: string;\n};\n\nconst AvatarContent = ({ image, name, abbr, alt, iconName = '', iconClassName = '' }: AvatarContentProps) => {\n    if (image) {\n        return <img src={image} alt={alt || name || 'avatar'} className='Avatar-image' draggable={false} />;\n    }\n\n    if (abbr || name) {\n        const initials = abbr || getInitials(name);\n        const style = initials.length > 2 ? { letterSpacing: '-0.2px' } : {};\n        return (\n            <span className='Avatar-initials' style={style}>\n                {initials}\n            </span>\n        );\n    }\n\n    if (iconName) {\n        return <span className={`Avatar-icon uikit-icon ${normalizeIconName(iconName)} ${iconClassName}`} />;\n    }\n\n    return null;\n};\n\nexport default AvatarContent;\n"],"mappings":";;;AAGA,IAAM,KAAe,IAAO,OACxB,EACK,MAAM,GAAG,CAAC,CACV,KAAI,MAAQ,EAAK,EAAE,CAAC,CACpB,KAAK,EAAE,GAWV,KAAiB,EAAE,UAAO,SAAM,SAAM,QAAK,cAAW,IAAI,mBAAgB,SAA6B;CACzG,IAAI,GACA,OAAO,kBAAC,OAAD;EAAK,KAAK;EAAO,KAAK,KAAO,KAAQ;EAAU,WAAU;EAAe,WAAW;CAAQ,CAAA;CAGtG,IAAI,KAAQ,GAAM;EACd,IAAM,IAAW,KAAQ,EAAY,CAAI;EAEzC,OACI,kBAAC,QAAD;GAAM,WAAU;GAAyB,OAF/B,EAAS,SAAS,IAAI,EAAE,eAAe,SAAS,IAAI,CAAC;aAG1D;EACC,CAAA;CAEd;CAMA,OAJI,IACO,kBAAC,QAAD,EAAM,WAAW,0BAA0B,EAAkB,CAAQ,EAAE,GAAG,IAAkB,CAAA,IAGhG;AACX"}

package/components/avatar/AvatarGroup.js

@@ -1,23 +1,26 @@
-import { jsx as n, jsxs as d } from "react/jsx-runtime";
-import s from "react";
-import h from "./Avatar.js";
-const b = (t) => {
-  const { maxItemsVisible: i = 99, className: u = "", children: o, ...a } = t, e = s.Children.toArray(o);
-  if (e.length <= i)
-    return /* @__PURE__ */ n("div", { className: "AvatarGroup", children: e });
-  const l = e.slice(0, i - 1), c = e.slice(i - 1), m = e.length - i + 1, p = c.map((r) => s.isValidElement(r) && "props" in r && "name" in r.props ? r.props.name : "").filter(Boolean);
-  return /* @__PURE__ */ d("div", { className: "AvatarGroup", ...a, children: [
-    l,
-    /* @__PURE__ */ n(
-      h,
-      {
-        abbr: `+${m}`,
-        tooltip: /* @__PURE__ */ n("div", { children: p.map((r) => /* @__PURE__ */ n("div", { children: r }, r)) })
-      }
-    )
-  ] });
+import e from "../../utils/classNames.js";
+import t from "./Avatar.js";
+import n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/avatar/AvatarGroup.tsx
+var a = (a) => {
+	let { maxItemsVisible: o = 99, className: s = "", children: c, ...l } = a, u = n.Children.toArray(c), d = e("AvatarGroup", s);
+	if (u.length <= o) return /* @__PURE__ */ r("div", {
+		className: d,
+		...l,
+		children: u
+	});
+	let f = u.slice(0, o - 1), p = u.slice(o - 1), m = u.length - o + 1, h = p.map((e) => n.isValidElement(e) ? e.props.name ?? "" : "").filter(Boolean);
+	return /* @__PURE__ */ i("div", {
+		className: d,
+		...l,
+		children: [f, /* @__PURE__ */ r(t, {
+			abbr: `+${m}`,
+			tooltip: /* @__PURE__ */ r("div", { children: h.map((e) => /* @__PURE__ */ r("div", { children: e }, e)) })
+		})]
+	});
 };
-export {
-  b as default
-};
-//# sourceMappingURL=AvatarGroup.js.map
+//#endregion
+export { a as default };
+
+//# sourceMappingURL=AvatarGroup.js.map

package/components/avatar/AvatarGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.js","sources":["../../../src/components/avatar/AvatarGroup.tsx"],"sourcesContent":["import React, { type PropsWithChildren } from 'react';\n\nimport Avatar from './Avatar';\n\nexport type AvatarGroupProps = {\n    /**\n     * Maximum number of items to be shown. Items that overflow are grouped into a single\n     * Avatar that displays the overflow count. Collapsed names are shown inside a tooltip.\n     * By default all items are shown.\n     */\n    maxItemsVisible?: number;\n\n    /**\n     * Additional classes set to the outer element.\n     */\n    className?: string;\n};\n\nconst AvatarGroup = (props: PropsWithChildren<AvatarGroupProps>) => {\n    const { maxItemsVisible = 99, className = '', children, ...remainingProps } = props;\n\n    const avatars = React.Children.toArray(children);\n\n    if (avatars.length <= maxItemsVisible) {\n        return <div className='AvatarGroup'>{avatars}</div>;\n    }\n\n    const visibleAvatars = avatars.slice(0, maxItemsVisible - 1);\n    const hiddenAvatars = avatars.slice(maxItemsVisible - 1);\n\n    const remainingCount = avatars.length - maxItemsVisible + 1;\n\n    const hiddenNames: string[] = hiddenAvatars\n        .map(avatar => {\n            if (React.isValidElement(avatar) && 'props' in avatar && 'name' in avatar.props) {\n                return avatar.props.name;\n            }\n            return ''; // Handle cases where the avatar doesn't have a name\n        })\n        .filter(Boolean); // Remove empty strings\n\n    return (\n        <div className='AvatarGroup' {...remainingProps}>\n            {visibleAvatars}\n            <Avatar\n                abbr={`+${remainingCount}`}\n                tooltip={\n                    <div>\n                        {hiddenNames.map(hiddenName => (\n                            <div key={hiddenName}>{hiddenName}</div>\n                        ))}\n                    </div>\n                }\n            />\n        </div>\n    );\n};\n\nexport default AvatarGroup;\n"],"names":["AvatarGroup","props","maxItemsVisible","className","children","remainingProps","avatars","React","jsx","visibleAvatars","hiddenAvatars","remainingCount","hiddenNames","avatar","jsxs","Avatar","hiddenName"],"mappings":";;;AAkBA,MAAMA,IAAc,CAACC,MAA+C;AAChE,QAAM,EAAE,iBAAAC,IAAkB,IAAI,WAAAC,IAAY,IAAI,UAAAC,GAAU,GAAGC,MAAmBJ,GAExEK,IAAUC,EAAM,SAAS,QAAQH,CAAQ;AAE/C,MAAIE,EAAQ,UAAUJ;AAClB,WAAO,gBAAAM,EAAC,OAAA,EAAI,WAAU,eAAe,UAAAF,GAAQ;AAGjD,QAAMG,IAAiBH,EAAQ,MAAM,GAAGJ,IAAkB,CAAC,GACrDQ,IAAgBJ,EAAQ,MAAMJ,IAAkB,CAAC,GAEjDS,IAAiBL,EAAQ,SAASJ,IAAkB,GAEpDU,IAAwBF,EACzB,IAAI,CAAAG,MACGN,EAAM,eAAeM,CAAM,KAAK,WAAWA,KAAU,UAAUA,EAAO,QAC/DA,EAAO,MAAM,OAEjB,EACV,EACA,OAAO,OAAO;AAEnB,SACI,gBAAAC,EAAC,OAAA,EAAI,WAAU,eAAe,GAAGT,GAC5B,UAAA;AAAA,IAAAI;AAAA,IACD,gBAAAD;AAAA,MAACO;AAAA,MAAA;AAAA,QACG,MAAM,IAAIJ,CAAc;AAAA,QACxB,SACI,gBAAAH,EAAC,OAAA,EACI,UAAAI,EAAY,IAAI,CAAAI,MACb,gBAAAR,EAAC,OAAA,EAAsB,UAAAQ,EAAA,GAAbA,CAAwB,CACrC,EAAA,CACL;AAAA,MAAA;AAAA,IAAA;AAAA,EAER,GACJ;AAER;"}
+{"version":3,"file":"AvatarGroup.js","names":[],"sources":["../../../src/components/avatar/AvatarGroup.tsx"],"sourcesContent":["import React, { type PropsWithChildren } from 'react';\n\nimport classNames from '../../utils/classNames';\nimport Avatar from './Avatar';\n\nexport type AvatarGroupProps = {\n    /**\n     * Maximum number of items to be shown. Items that overflow are grouped into a single\n     * Avatar that displays the overflow count. Collapsed names are shown inside a tooltip.\n     * By default all items are shown.\n     */\n    maxItemsVisible?: number;\n\n    /**\n     * Additional classes set to the outer element.\n     */\n    className?: string;\n};\n\nconst AvatarGroup = (props: PropsWithChildren<AvatarGroupProps>) => {\n    const { maxItemsVisible = 99, className = '', children, ...remainingProps } = props;\n\n    const avatars = React.Children.toArray(children);\n    const classes = classNames('AvatarGroup', className);\n\n    if (avatars.length <= maxItemsVisible) {\n        return (\n            <div className={classes} {...remainingProps}>\n                {avatars}\n            </div>\n        );\n    }\n\n    const visibleAvatars = avatars.slice(0, maxItemsVisible - 1);\n    const hiddenAvatars = avatars.slice(maxItemsVisible - 1);\n\n    const remainingCount = avatars.length - maxItemsVisible + 1;\n\n    const hiddenNames: string[] = hiddenAvatars\n        .map(avatar => {\n            if (React.isValidElement<{ name?: string }>(avatar)) {\n                return avatar.props.name ?? '';\n            }\n            return ''; // Handle cases where the avatar doesn't have a name\n        })\n        .filter(Boolean); // Remove empty strings\n\n    return (\n        <div className={classes} {...remainingProps}>\n            {visibleAvatars}\n            <Avatar\n                abbr={`+${remainingCount}`}\n                tooltip={\n                    <div>\n                        {hiddenNames.map(hiddenName => (\n                            <div key={hiddenName}>{hiddenName}</div>\n                        ))}\n                    </div>\n                }\n            />\n        </div>\n    );\n};\n\nexport default AvatarGroup;\n"],"mappings":";;;;;AAmBA,IAAM,KAAe,MAA+C;CAChE,IAAM,EAAE,qBAAkB,IAAI,eAAY,IAAI,aAAU,GAAG,MAAmB,GAExE,IAAU,EAAM,SAAS,QAAQ,CAAQ,GACzC,IAAU,EAAW,eAAe,CAAS;CAEnD,IAAI,EAAQ,UAAU,GAClB,OACI,kBAAC,OAAD;EAAK,WAAW;EAAS,GAAI;YACxB;CACA,CAAA;CAIb,IAAM,IAAiB,EAAQ,MAAM,GAAG,IAAkB,CAAC,GACrD,IAAgB,EAAQ,MAAM,IAAkB,CAAC,GAEjD,IAAiB,EAAQ,SAAS,IAAkB,GAEpD,IAAwB,EACzB,KAAI,MACG,EAAM,eAAkC,CAAM,IACvC,EAAO,MAAM,QAAQ,KAEzB,EACV,CAAC,CACD,OAAO,OAAO;CAEnB,OACI,kBAAC,OAAD;EAAK,WAAW;EAAS,GAAI;YAA7B,CACK,GACD,kBAAC,GAAD;GACI,MAAM,IAAI;GACV,SACI,kBAAC,OAAD,EAAA,UACK,EAAY,KAAI,MACb,kBAAC,OAAD,EAAA,UAAuB,EAAgB,GAA7B,CAA6B,CAC1C,EACA,CAAA;EAEZ,CAAA,CACA;;AAEb"}

package/components/banner/Banner.js

@@ -1,125 +1,141 @@
-import { jsx as e, jsxs as d } from "react/jsx-runtime";
-import { createContext as H, useState as y, useRef as E, useEffect as x } from "react";
-import { useReducedMotion as T, AnimatePresence as b, motion as C } from "motion/react";
-import q from "../../utils/classNames.js";
-import D from "../card/Card.js";
-import m from "../button/Button.js";
-import F from "./BannerActions.js";
-import G from "./BannerContent.js";
-import J from "./BannerIcon.js";
-import K from "./BannerPage.js";
-const L = H(void 0), o = (N) => {
-  const {
-    show: n = !0,
-    dismissible: P = !0,
-    onClose: w = () => {
-    },
-    pageTimeout: h = 2e4,
-    showPageNavigation: B = !0,
-    border: A = !0,
-    initialAnimation: R = !0,
-    className: S = "",
-    children: a,
-    ...O
-  } = N, u = Array.isArray(a) ? a : [a], i = u.length, s = i > 1, [r, g] = y(0), p = !T() && R, c = E(null), [z, I] = y(0);
-  x(() => {
-    if (!n || i === 1)
-      return;
-    const t = setInterval(() => {
-      l();
-    }, h);
-    return () => clearInterval(t);
-  }, [i, h, n, r]), x(() => {
-    if (!c.current)
-      return;
-    const t = new ResizeObserver((M) => {
-      const v = M[0];
-      if (v) {
-        const j = v.target.getBoundingClientRect().height;
-        I(j);
-      }
-    });
-    return t.observe(c.current), () => t.disconnect();
-  }, [n, r]);
-  const l = () => {
-    s && g((t) => (t + 1) % i);
-  }, f = () => {
-    s && g((t) => (t - 1 + i) % i);
-  }, k = q(
-    "Banner display-flex text-color-darker overflow-hidden",
-    "position-relative",
-    !A && "border-color-white",
-    S
-  );
-  return /* @__PURE__ */ e(L.Provider, { value: { nextPage: l, prevPage: f }, children: /* @__PURE__ */ e(b, { children: n && /* @__PURE__ */ e(
-    C.div,
-    {
-      initial: { height: 0, opacity: 0 },
-      animate: { height: z, opacity: 1 },
-      exit: { height: 0, opacity: 0 },
-      transition: {
-        height: { duration: 0.2 },
-        opacity: { duration: 0.2 },
-        ease: "easeInOut"
-      },
-      children: /* @__PURE__ */ e("div", { ref: c, style: { position: "relative" }, children: /* @__PURE__ */ d(D, { className: k, padding: 20, ...O, children: [
-        /* @__PURE__ */ d("div", { className: "flex-1-1 overflow-hidden", children: [
-          /* @__PURE__ */ e(b, { mode: "wait", children: /* @__PURE__ */ e(
-            C.div,
-            {
-              initial: p ? { opacity: 0, x: 100 } : !1,
-              animate: { opacity: 1, x: 0 },
-              exit: p ? { opacity: 0, x: -100 } : void 0,
-              transition: {
-                duration: 1.5,
-                ease: [0.25, 1, 0.5, 1]
-              },
-              children: u[r]
-            },
-            r
-          ) }),
-          s && B && /* @__PURE__ */ e("div", { className: "margin-5", children: /* @__PURE__ */ e("div", { className: "position-absolute bottom-5", style: { right: "45px" }, children: /* @__PURE__ */ d("div", { className: "display-flex", children: [
-            /* @__PURE__ */ e(
-              m,
-              {
-                bsStyle: "muted",
-                bsSize: "xs",
-                onClick: f,
-                iconName: "rioglyph-arrow-left",
-                iconOnly: !0
-              }
-            ),
-            /* @__PURE__ */ e(
-              m,
-              {
-                bsStyle: "muted",
-                bsSize: "xs",
-                onClick: l,
-                iconName: "rioglyph-arrow-right",
-                iconOnly: !0
-              }
-            )
-          ] }) }) })
-        ] }),
-        P && /* @__PURE__ */ e("div", { className: "flex-0 margin-left-10 margin-right--5 margin-top--5 margin-top-0-ls align-self-start align-self-center-ls", children: /* @__PURE__ */ e(
-          m,
-          {
-            bsStyle: "muted",
-            bsSize: "sm",
-            onClick: w,
-            iconName: "rioglyph-remove",
-            iconOnly: !0
-          }
-        ) })
-      ] }) })
-    }
-  ) }) });
+import e from "../../utils/classNames.js";
+import t from "../button/Button.js";
+import n from "../card/Card.js";
+import r from "./BannerActions.js";
+import i from "./BannerContent.js";
+import a from "./BannerIcon.js";
+import o from "./BannerPage.js";
+import { createContext as s, useEffect as c, useRef as l, useState as u } from "react";
+import { AnimatePresence as d, motion as f, useReducedMotion as p } from "motion/react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/components/banner/Banner.tsx
+var g = s(void 0), _ = (r) => {
+	let { show: i = !0, dismissible: a = !0, onClose: o = () => {}, pageTimeout: s = 2e4, showPageNavigation: _ = !0, border: v = !0, initialAnimation: y = !0, className: b = "", children: x, ...S } = r, C = Array.isArray(x) ? x : [x], w = C.length, T = w > 1, [E, D] = u(0), O = !p() && y, k = l(null), [A, j] = u(0);
+	c(() => {
+		if (!i || w === 1) return;
+		let e = setInterval(() => {
+			M();
+		}, s);
+		return () => clearInterval(e);
+	}, [
+		w,
+		s,
+		i,
+		E
+	]), c(() => {
+		if (!k.current) return;
+		let e = new ResizeObserver((e) => {
+			let t = e[0];
+			if (t) {
+				let e = t.target.getBoundingClientRect().height;
+				j(e);
+			}
+		});
+		return e.observe(k.current), () => e.disconnect();
+	}, [i, E]);
+	let M = () => {
+		T && D((e) => (e + 1) % w);
+	}, N = () => {
+		T && D((e) => (e - 1 + w) % w);
+	}, P = e("Banner display-flex text-color-darker overflow-hidden", "position-relative", !v && "border-color-white", b);
+	return /* @__PURE__ */ m(g.Provider, {
+		value: {
+			nextPage: M,
+			prevPage: N
+		},
+		children: /* @__PURE__ */ m(d, { children: i && /* @__PURE__ */ m(f.div, {
+			initial: {
+				height: 0,
+				opacity: 0
+			},
+			animate: {
+				height: A,
+				opacity: 1
+			},
+			exit: {
+				height: 0,
+				opacity: 0
+			},
+			transition: {
+				height: { duration: .2 },
+				opacity: { duration: .2 },
+				ease: "easeInOut"
+			},
+			children: /* @__PURE__ */ m("div", {
+				ref: k,
+				style: { position: "relative" },
+				children: /* @__PURE__ */ h(n, {
+					className: P,
+					padding: 20,
+					...S,
+					children: [/* @__PURE__ */ h("div", {
+						className: "flex-1-1 overflow-hidden",
+						children: [/* @__PURE__ */ m(d, {
+							mode: "wait",
+							children: /* @__PURE__ */ m(f.div, {
+								initial: O ? {
+									opacity: 0,
+									x: 100
+								} : !1,
+								animate: {
+									opacity: 1,
+									x: 0
+								},
+								exit: O ? {
+									opacity: 0,
+									x: -100
+								} : void 0,
+								transition: {
+									duration: 1.5,
+									ease: [
+										.25,
+										1,
+										.5,
+										1
+									]
+								},
+								children: C[E]
+							}, E)
+						}), T && _ && /* @__PURE__ */ m("div", {
+							className: "margin-5",
+							children: /* @__PURE__ */ m("div", {
+								className: "position-absolute bottom-5",
+								style: { right: "45px" },
+								children: /* @__PURE__ */ h("div", {
+									className: "display-flex",
+									children: [/* @__PURE__ */ m(t, {
+										bsStyle: "muted",
+										bsSize: "xs",
+										onClick: N,
+										iconName: "icon-arrow-left",
+										iconOnly: !0
+									}), /* @__PURE__ */ m(t, {
+										bsStyle: "muted",
+										bsSize: "xs",
+										onClick: M,
+										iconName: "icon-arrow-right",
+										iconOnly: !0
+									})]
+								})
+							})
+						})]
+					}), a && /* @__PURE__ */ m("div", {
+						className: "flex-0 margin-left-10 margin-right--5 margin-top--5 margin-top-0-ls align-self-start align-self-center-ls",
+						children: /* @__PURE__ */ m(t, {
+							bsStyle: "muted",
+							bsSize: "sm",
+							onClick: o,
+							iconName: "icon-remove",
+							iconOnly: !0
+						})
+					})]
+				})
+			})
+		}) })
+	});
 };
-o.Page = K;
-o.Icon = J;
-o.Content = G;
-o.Actions = F;
-export {
-  o as default
-};
-//# sourceMappingURL=Banner.js.map
+_.Page = o, _.Icon = a, _.Content = i, _.Actions = r;
+//#endregion
+export { _ as default };
+
+//# sourceMappingURL=Banner.js.map

package/components/banner/Banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","sources":["../../../src/components/banner/Banner.tsx"],"sourcesContent":["import { useState, useEffect, createContext, useRef, type ReactNode } from 'react';\nimport { motion, AnimatePresence, useReducedMotion } from 'motion/react';\n\nimport classNames from '../../utils/classNames';\nimport Card from '../card/Card';\nimport Button from '../button/Button';\nimport BannerPageActions from './BannerActions';\nimport BannerPageContent from './BannerContent';\nimport BannerPageIcon from './BannerIcon';\nimport BannerPage from './BannerPage';\n\nconst BannerContext = createContext<{ nextPage: () => void; prevPage: () => void } | undefined>(undefined);\n\ntype BannerProps = {\n    /**\n     * Defines if the content is shown or not.\n     *\n     * @default true\n     */\n    show: boolean;\n\n    /**\n     * Defines if a close button is shown or not. You can still add a custom\n     * CTA button to the content that handles visibility.\n     *\n     * @default true\n     */\n    dismissible?: boolean;\n\n    /**\n     * Callback when the close button is clicked.\n     *\n     * @returns\n     */\n    onClose?: () => void;\n\n    /**\n     * Defines the time when the next page is shown in milliseconds.\n     *\n     * @default 20_000\n     */\n    pageTimeout?: number;\n\n    /**\n     * Defines if the page navigation buttons shall be shown or not.\n     *\n     * @default true\n     */\n    showPageNavigation?: boolean;\n\n    /**\n     * Defines if a border is shown or not. When placed on a white background, please disable the border\n     * so it looks better.\n     *\n     * @default true\n     */\n    border?: boolean;\n\n    /**\n     * Enables or disables initial animation.\n     *\n     * @default true\n     */\n    initialAnimation?: boolean;\n\n    /**\n     * Additional classname added to the wrapper element.\n     */\n    className?: string;\n\n    /**\n     * The actual banner content. Wrap your content in a <Banner.Page> component.\n     *\n     * When having multiple pages, usa an array of <Banner.Page> components.\n     */\n    children: ReactNode | ReactNode[];\n};\n\nconst Banner = (props: BannerProps) => {\n    const {\n        show = true,\n        dismissible = true,\n        onClose = () => {},\n        pageTimeout = 20_000,\n        showPageNavigation = true,\n        border = true,\n        initialAnimation = true,\n        className = '',\n        children,\n        ...remainingProps\n    } = props;\n\n    const pages = Array.isArray(children) ? children : [children];\n    const pageAmount = pages.length;\n    const hasMultiplePages = pageAmount > 1;\n\n    const [currentPage, setCurrentPage] = useState(0);\n\n    const shouldReduceMotion = useReducedMotion();\n    const hasAnimation = !shouldReduceMotion && initialAnimation;\n\n    const contentRef = useRef<HTMLDivElement>(null);\n    const [contentHeight, setContentHeight] = useState(0);\n\n    // biome-ignore lint/correctness/useExhaustiveDependencies: \"currentPage\" resets interval on manual page change\n    useEffect(() => {\n        if (!show || pageAmount === 1) {\n            return;\n        }\n\n        const interval = setInterval(() => {\n            nextPage();\n        }, pageTimeout);\n\n        return () => clearInterval(interval);\n    }, [pageAmount, pageTimeout, show, currentPage]);\n\n    // Update height measurement after layout is complete\n    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>\n    useEffect(() => {\n        if (!contentRef.current) {\n            return;\n        }\n\n        // Use ResizeObserver to get accurate measurements after layout\n        const resizeObserver = new ResizeObserver(entries => {\n            const entry = entries[0];\n            if (entry) {\n                // Use getBoundingClientRect for most accurate height\n                const height = entry.target.getBoundingClientRect().height;\n                setContentHeight(height);\n            }\n        });\n\n        resizeObserver.observe(contentRef.current);\n\n        return () => resizeObserver.disconnect();\n    }, [show, currentPage]);\n\n    const nextPage = () => {\n        if (hasMultiplePages) {\n            setCurrentPage(prev => (prev + 1) % pageAmount);\n        }\n    };\n\n    const prevPage = () => {\n        if (hasMultiplePages) {\n            setCurrentPage(prev => (prev - 1 + pageAmount) % pageAmount);\n        }\n    };\n\n    const cardClasses = classNames(\n        'Banner display-flex text-color-darker overflow-hidden',\n        'position-relative',\n        !border && 'border-color-white',\n        className\n    );\n\n    return (\n        <BannerContext.Provider value={{ nextPage, prevPage }}>\n            <AnimatePresence>\n                {show && (\n                    <motion.div\n                        initial={{ height: 0, opacity: 0 }}\n                        animate={{ height: contentHeight, opacity: 1 }}\n                        exit={{ height: 0, opacity: 0 }}\n                        transition={{\n                            height: { duration: 0.2 },\n                            opacity: { duration: 0.2 },\n                            ease: 'easeInOut',\n                        }}\n                    >\n                        <div ref={contentRef} style={{ position: 'relative' }}>\n                            <Card className={cardClasses} padding={20} {...remainingProps}>\n                                <div className='flex-1-1 overflow-hidden'>\n                                    <AnimatePresence mode='wait'>\n                                        <motion.div\n                                            key={currentPage}\n                                            initial={hasAnimation ? { opacity: 0, x: 100 } : false}\n                                            animate={{ opacity: 1, x: 0 }}\n                                            exit={hasAnimation ? { opacity: 0, x: -100 } : undefined}\n                                            transition={{\n                                                duration: 1.5,\n                                                ease: [0.25, 1, 0.5, 1],\n                                            }}\n                                        >\n                                            {pages[currentPage]}\n                                        </motion.div>\n                                    </AnimatePresence>\n\n                                    {hasMultiplePages && showPageNavigation && (\n                                        <div className='margin-5'>\n                                            <div className='position-absolute bottom-5' style={{ right: '45px' }}>\n                                                <div className='display-flex'>\n                                                    <Button\n                                                        bsStyle='muted'\n                                                        bsSize='xs'\n                                                        onClick={prevPage}\n                                                        iconName='rioglyph-arrow-left'\n                                                        iconOnly\n                                                    />\n                                                    <Button\n                                                        bsStyle='muted'\n                                                        bsSize='xs'\n                                                        onClick={nextPage}\n                                                        iconName='rioglyph-arrow-right'\n                                                        iconOnly\n                                                    />\n                                                </div>\n                                            </div>\n                                        </div>\n                                    )}\n                                </div>\n                                {dismissible && (\n                                    <div className='flex-0 margin-left-10 margin-right--5 margin-top--5 margin-top-0-ls align-self-start align-self-center-ls'>\n                                        <Button\n                                            bsStyle='muted'\n                                            bsSize='sm'\n                                            onClick={onClose}\n                                            iconName='rioglyph-remove'\n                                            iconOnly\n                                        />\n                                    </div>\n                                )}\n                            </Card>\n                        </div>\n                    </motion.div>\n                )}\n            </AnimatePresence>\n        </BannerContext.Provider>\n    );\n};\n\nBanner.Page = BannerPage;\nBanner.Icon = BannerPageIcon;\nBanner.Content = BannerPageContent;\nBanner.Actions = BannerPageActions;\n\nexport default Banner;\n"],"names":["BannerContext","createContext","Banner","props","show","dismissible","onClose","pageTimeout","showPageNavigation","border","initialAnimation","className","children","remainingProps","pages","pageAmount","hasMultiplePages","currentPage","setCurrentPage","useState","hasAnimation","useReducedMotion","contentRef","useRef","contentHeight","setContentHeight","useEffect","interval","nextPage","resizeObserver","entries","entry","height","prev","prevPage","cardClasses","classNames","jsx","AnimatePresence","motion","jsxs","Card","Button","BannerPage","BannerPageIcon","BannerPageContent","BannerPageActions"],"mappings":"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"}
+{"version":3,"file":"Banner.js","names":[],"sources":["../../../src/components/banner/Banner.tsx"],"sourcesContent":["import { useState, useEffect, createContext, useRef, type ReactNode } from 'react';\nimport { motion, AnimatePresence, useReducedMotion } from 'motion/react';\n\nimport classNames from '../../utils/classNames';\nimport Card from '../card/Card';\nimport Button from '../button/Button';\nimport BannerPageActions from './BannerActions';\nimport BannerPageContent from './BannerContent';\nimport BannerPageIcon from './BannerIcon';\nimport BannerPage from './BannerPage';\n\nconst BannerContext = createContext<{ nextPage: () => void; prevPage: () => void } | undefined>(undefined);\n\ntype BannerProps = {\n    /**\n     * Defines if the content is shown or not.\n     *\n     * @default true\n     */\n    show: boolean;\n\n    /**\n     * Defines if a close button is shown or not. You can still add a custom\n     * CTA button to the content that handles visibility.\n     *\n     * @default true\n     */\n    dismissible?: boolean;\n\n    /**\n     * Callback when the close button is clicked.\n     *\n     * @returns\n     */\n    onClose?: () => void;\n\n    /**\n     * Defines the time when the next page is shown in milliseconds.\n     *\n     * @default 20_000\n     */\n    pageTimeout?: number;\n\n    /**\n     * Defines if the page navigation buttons shall be shown or not.\n     *\n     * @default true\n     */\n    showPageNavigation?: boolean;\n\n    /**\n     * Defines if a border is shown or not. When placed on a white background, please disable the border\n     * so it looks better.\n     *\n     * @default true\n     */\n    border?: boolean;\n\n    /**\n     * Enables or disables initial animation.\n     *\n     * @default true\n     */\n    initialAnimation?: boolean;\n\n    /**\n     * Additional classname added to the wrapper element.\n     */\n    className?: string;\n\n    /**\n     * The actual banner content. Wrap your content in a <Banner.Page> component.\n     *\n     * When having multiple pages, usa an array of <Banner.Page> components.\n     */\n    children: ReactNode | ReactNode[];\n};\n\nconst Banner = (props: BannerProps) => {\n    const {\n        show = true,\n        dismissible = true,\n        onClose = () => {},\n        pageTimeout = 20_000,\n        showPageNavigation = true,\n        border = true,\n        initialAnimation = true,\n        className = '',\n        children,\n        ...remainingProps\n    } = props;\n\n    const pages = Array.isArray(children) ? children : [children];\n    const pageAmount = pages.length;\n    const hasMultiplePages = pageAmount > 1;\n\n    const [currentPage, setCurrentPage] = useState(0);\n\n    const shouldReduceMotion = useReducedMotion();\n    const hasAnimation = !shouldReduceMotion && initialAnimation;\n\n    const contentRef = useRef<HTMLDivElement>(null);\n    const [contentHeight, setContentHeight] = useState(0);\n\n    // biome-ignore lint/correctness/useExhaustiveDependencies: \"currentPage\" resets interval on manual page change\n    useEffect(() => {\n        if (!show || pageAmount === 1) {\n            return;\n        }\n\n        const interval = setInterval(() => {\n            nextPage();\n        }, pageTimeout);\n\n        return () => clearInterval(interval);\n    }, [pageAmount, pageTimeout, show, currentPage]);\n\n    // Update height measurement after layout is complete\n    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>\n    useEffect(() => {\n        if (!contentRef.current) {\n            return;\n        }\n\n        // Use ResizeObserver to get accurate measurements after layout\n        const resizeObserver = new ResizeObserver(entries => {\n            const entry = entries[0];\n            if (entry) {\n                // Use getBoundingClientRect for most accurate height\n                const height = entry.target.getBoundingClientRect().height;\n                setContentHeight(height);\n            }\n        });\n\n        resizeObserver.observe(contentRef.current);\n\n        return () => resizeObserver.disconnect();\n    }, [show, currentPage]);\n\n    const nextPage = () => {\n        if (hasMultiplePages) {\n            setCurrentPage(prev => (prev + 1) % pageAmount);\n        }\n    };\n\n    const prevPage = () => {\n        if (hasMultiplePages) {\n            setCurrentPage(prev => (prev - 1 + pageAmount) % pageAmount);\n        }\n    };\n\n    const cardClasses = classNames(\n        'Banner display-flex text-color-darker overflow-hidden',\n        'position-relative',\n        !border && 'border-color-white',\n        className\n    );\n\n    return (\n        <BannerContext.Provider value={{ nextPage, prevPage }}>\n            <AnimatePresence>\n                {show && (\n                    <motion.div\n                        initial={{ height: 0, opacity: 0 }}\n                        animate={{ height: contentHeight, opacity: 1 }}\n                        exit={{ height: 0, opacity: 0 }}\n                        transition={{\n                            height: { duration: 0.2 },\n                            opacity: { duration: 0.2 },\n                            ease: 'easeInOut',\n                        }}\n                    >\n                        <div ref={contentRef} style={{ position: 'relative' }}>\n                            <Card className={cardClasses} padding={20} {...remainingProps}>\n                                <div className='flex-1-1 overflow-hidden'>\n                                    <AnimatePresence mode='wait'>\n                                        <motion.div\n                                            key={currentPage}\n                                            initial={hasAnimation ? { opacity: 0, x: 100 } : false}\n                                            animate={{ opacity: 1, x: 0 }}\n                                            exit={hasAnimation ? { opacity: 0, x: -100 } : undefined}\n                                            transition={{\n                                                duration: 1.5,\n                                                ease: [0.25, 1, 0.5, 1],\n                                            }}\n                                        >\n                                            {pages[currentPage]}\n                                        </motion.div>\n                                    </AnimatePresence>\n\n                                    {hasMultiplePages && showPageNavigation && (\n                                        <div className='margin-5'>\n                                            <div className='position-absolute bottom-5' style={{ right: '45px' }}>\n                                                <div className='display-flex'>\n                                                    <Button\n                                                        bsStyle='muted'\n                                                        bsSize='xs'\n                                                        onClick={prevPage}\n                                                        iconName='icon-arrow-left'\n                                                        iconOnly\n                                                    />\n                                                    <Button\n                                                        bsStyle='muted'\n                                                        bsSize='xs'\n                                                        onClick={nextPage}\n                                                        iconName='icon-arrow-right'\n                                                        iconOnly\n                                                    />\n                                                </div>\n                                            </div>\n                                        </div>\n                                    )}\n                                </div>\n                                {dismissible && (\n                                    <div className='flex-0 margin-left-10 margin-right--5 margin-top--5 margin-top-0-ls align-self-start align-self-center-ls'>\n                                        <Button\n                                            bsStyle='muted'\n                                            bsSize='sm'\n                                            onClick={onClose}\n                                            iconName='icon-remove'\n                                            iconOnly\n                                        />\n                                    </div>\n                                )}\n                            </Card>\n                        </div>\n                    </motion.div>\n                )}\n            </AnimatePresence>\n        </BannerContext.Provider>\n    );\n};\n\nBanner.Page = BannerPage;\nBanner.Icon = BannerPageIcon;\nBanner.Content = BannerPageContent;\nBanner.Actions = BannerPageActions;\n\nexport default Banner;\n"],"mappings":"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"}