@rio-cloud/rio-uikit 2.0.0-beta.1 → 2.0.0-beta.2

package/components/autosuggest/AutoSuggestAddons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutoSuggestAddons.js","sources":["../../../src/components/autosuggest/AutoSuggestAddons.tsx"],"sourcesContent":["import type React from 'react';\nimport type { PropsWithChildren } from 'react';\n\nexport type AutoSuggestAddonsProps = {\n    icon?: string;\n    leadingInputAddons?: React.ReactNode[];\n    trailingInputAddons?: React.ReactNode[];\n};\n\nconst AutoSuggestAddons = ({\n    icon,\n    leadingInputAddons,\n    trailingInputAddons,\n    children,\n}: PropsWithChildren<AutoSuggestAddonsProps>) => {\n    return (\n        <div className='input-group width-100pct'>\n            {leadingInputAddons && leadingInputAddons}\n            {icon && (\n                <span className='input-group-addon'>\n                    <span className={`rioglyph ${icon}`} aria-hidden='true' />\n                </span>\n            )}\n            {children}\n            {trailingInputAddons && trailingInputAddons}\n        </div>\n    );\n};\n\nexport default AutoSuggestAddons;\n"],"names":["AutoSuggestAddons","icon","leadingInputAddons","trailingInputAddons","children","jsxs","jsx"],"mappings":";AASA,MAAMA,IAAoB,CAAC;AAAA,EACvB,MAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,UAAAC;AACJ,MAEQ,gBAAAC,EAAC,OAAA,EAAI,WAAU,4BACV,UAAA;AAAA,EAAAH,KAAsBA;AAAA,EACtBD,KACG,gBAAAK,EAAC,QAAA,EAAK,WAAU,qBACZ,UAAA,gBAAAA,EAAC,QAAA,EAAK,WAAW,YAAYL,CAAI,IAAI,eAAY,QAAO,GAC5D;AAAA,EAEHG;AAAA,EACAD,KAAuBA;AAAA,GAC5B;"}

package/components/autosuggest/DropdownSpinner.js

@@ -1,4 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import Spinner from "../spinner/Spinner.js";
-const DropdownSpinner = ({ className }) => (_jsx("ul", { className: className, children: _jsx("div", { className: 'display-flex justify-content-center padding-10', children: _jsx(Spinner, {}) }) }));
-export default DropdownSpinner;
+import { jsx as n } from "react/jsx-runtime";
+import r from "../spinner/Spinner.js";
+const t = ({ className: e }) => /* @__PURE__ */ n("ul", { className: e, children: /* @__PURE__ */ n("div", { className: "display-flex justify-content-center padding-10", children: /* @__PURE__ */ n(r, {}) }) });
+export {
+  t as default
+};
+//# sourceMappingURL=DropdownSpinner.js.map

package/components/autosuggest/DropdownSpinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownSpinner.js","sources":["../../../src/components/autosuggest/DropdownSpinner.tsx"],"sourcesContent":["import Spinner from '../spinner/Spinner';\n\nconst DropdownSpinner = ({ className }: { className: string }) => (\n    <ul className={className}>\n        <div className='display-flex justify-content-center padding-10'>\n            <Spinner />\n        </div>\n    </ul>\n);\n\nexport default DropdownSpinner;\n"],"names":["DropdownSpinner","className","jsx","Spinner"],"mappings":";;AAEA,MAAMA,IAAkB,CAAC,EAAE,WAAAC,EAAA,MACvB,gBAAAC,EAAC,MAAA,EAAG,WAAAD,GACA,UAAA,gBAAAC,EAAC,SAAI,WAAU,kDACX,UAAA,gBAAAA,EAACC,GAAA,CAAA,CAAQ,GACb,EAAA,CACJ;"}

package/components/autosuggest/NoItemMessage.d.ts

@@ -1,4 +1,4 @@
-import type React from 'react';
+import { default as React } from 'react';
 declare const NoItemMessage: ({ message }: {
     message: React.ReactNode;
 }) => import("react/jsx-runtime").JSX.Element;

package/components/autosuggest/NoItemMessage.js

@@ -1,3 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-const NoItemMessage = ({ message }) => (_jsx("li", { className: 'no-item-message disabled pointer-events-none', children: _jsx("a", { role: 'button', href: 'any', children: _jsx("i", { children: message }) }) }));
-export default NoItemMessage;
+import { jsx as e } from "react/jsx-runtime";
+const o = ({ message: n }) => /* @__PURE__ */ e("li", { className: "no-item-message disabled pointer-events-none", children: /* @__PURE__ */ e("a", { role: "button", href: "any", children: /* @__PURE__ */ e("i", { children: n }) }) });
+export {
+  o as default
+};
+//# sourceMappingURL=NoItemMessage.js.map

package/components/autosuggest/NoItemMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NoItemMessage.js","sources":["../../../src/components/autosuggest/NoItemMessage.tsx"],"sourcesContent":["import type React from 'react';\n\nconst NoItemMessage = ({ message }: { message: React.ReactNode }) => (\n    <li className='no-item-message disabled pointer-events-none'>\n        <a role='button' href='any'>\n            <i>{message}</i>\n        </a>\n    </li>\n);\n\nexport default NoItemMessage;\n"],"names":["NoItemMessage","message","jsx"],"mappings":";AAEA,MAAMA,IAAgB,CAAC,EAAE,SAAAC,QACrB,gBAAAC,EAAC,QAAG,WAAU,gDACV,4BAAC,KAAA,EAAE,MAAK,UAAS,MAAK,OAClB,4BAAC,KAAA,EAAG,UAAAD,EAAA,CAAQ,GAChB,EAAA,CACJ;"}

package/components/avatar/Avatar.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentProps } from 'react';
+import { ComponentProps } from 'react';
 export type AvatarProps = ComponentProps<'div'> & {
     /**
      * When a name is provided, the Avatar automatically generates and displays the initials of that name.

package/components/avatar/Avatar.js

@@ -1,27 +1,58 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import classNames from 'classnames';
-import SimpleTooltip from "../tooltip/SimpleTooltip.js";
-import AvatarContent from "./AvatarContent.js";
-const TOOLTIP_SHOW_TIMEOUT_IN_MS = 100;
-const TOOLTIP_HIDE_TIMEOUT_IN_MS = 0;
-const Avatar = (props) => {
-    const { name, abbr, image, alt, iconName = 'user', size = 40, backgroundColor = 'bg-lighter', tooltip, iconClassName, className = '', ...remainingProps } = props;
-    const classes = classNames('Avatar', backgroundColor, className);
-    const tooltipContent = tooltip || name;
-    const wrapWithTooltip = (content) => tooltipContent ? (_jsx(SimpleTooltip, { content: tooltipContent, placement: 'bottom', delay: { show: TOOLTIP_SHOW_TIMEOUT_IN_MS, hide: TOOLTIP_HIDE_TIMEOUT_IN_MS }, popperConfig: {
-            modifiers: [
-                {
-                    name: 'offset',
-                    options: {
-                        offset: [0, 5],
-                    },
-                },
-                {
-                    name: 'arrow',
-                    options: {},
-                },
-            ],
-        }, children: content })) : (content);
-    return wrapWithTooltip(_jsx("div", { ...remainingProps, className: classes, style: { height: `${size}px` }, children: _jsx(AvatarContent, { name: name, abbr: abbr, image: image, alt: alt, iconName: iconName, iconClassName: iconClassName }) }));
+import { jsx as o } from "react/jsx-runtime";
+import _ from "classnames";
+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
+      }
+    ) })
+  );
 };
-export default Avatar;
+export {
+  M as default
+};
+//# sourceMappingURL=Avatar.js.map

package/components/avatar/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport classNames from 'classnames';\n\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;"}

package/components/avatar/AvatarContent.js

@@ -1,20 +1,14 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-const getInitials = (name = '') => name
-    .split(' ')
-    .map(word => word[0])
-    .join('');
-const AvatarContent = ({ image, name, abbr, alt, iconName = '', iconClassName = '' }) => {
-    if (image) {
-        return _jsx("img", { src: image, alt: alt || name || 'avatar', className: 'Avatar-image', draggable: false });
-    }
-    if (abbr || name) {
-        const initials = abbr || getInitials(name);
-        const style = initials.length > 2 ? { letterSpacing: '-0.2px' } : {};
-        return (_jsx("span", { className: 'Avatar-initials', style: style, children: initials }));
-    }
-    if (iconName) {
-        return _jsx("span", { className: `Avatar-icon rioglyph rioglyph-${iconName} ${iconClassName}` });
-    }
-    return null;
+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;
 };
-export default AvatarContent;
+export {
+  g as default
+};
+//# sourceMappingURL=AvatarContent.js.map

package/components/avatar/AvatarContent.js.map

@@ -0,0 +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;"}

package/components/avatar/AvatarGroup.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 export type AvatarGroupProps = {
     /**
      * Maximum number of items to be shown. Items that overflow are grouped into a single

package/components/avatar/AvatarGroup.js

@@ -1,23 +1,23 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import Avatar from "./Avatar.js";
-const AvatarGroup = (props) => {
-    const { maxItemsVisible = 99, className = '', children, ...remainingProps } = props;
-    const avatars = React.Children.toArray(children);
-    if (avatars.length <= maxItemsVisible) {
-        return _jsx("div", { className: 'AvatarGroup', children: avatars });
-    }
-    const visibleAvatars = avatars.slice(0, maxItemsVisible - 1);
-    const hiddenAvatars = avatars.slice(maxItemsVisible - 1);
-    const remainingCount = avatars.length - maxItemsVisible + 1;
-    const hiddenNames = hiddenAvatars
-        .map(avatar => {
-        if (React.isValidElement(avatar) && 'props' in avatar && 'name' in avatar.props) {
-            return avatar.props.name;
-        }
-        return ''; // Handle cases where the avatar doesn't have a name
-    })
-        .filter(Boolean); // Remove empty strings
-    return (_jsxs("div", { className: 'AvatarGroup', ...remainingProps, children: [visibleAvatars, _jsx(Avatar, { abbr: `+${remainingCount}`, tooltip: _jsx("div", { children: hiddenNames.map(hiddenName => (_jsx("div", { children: hiddenName }, hiddenName))) }) })] }));
+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)) })
+      }
+    )
+  ] });
 };
-export default AvatarGroup;
+export {
+  b as default
+};
+//# sourceMappingURL=AvatarGroup.js.map

package/components/avatar/AvatarGroup.js.map

@@ -0,0 +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;"}

package/components/banner/Banner.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import { ReactNode } from 'react';
 type BannerProps = {
     /**
      * Defines if the content is shown or not.
@@ -57,16 +57,16 @@ type BannerProps = {
 };
 declare const Banner: {
     (props: BannerProps): import("react/jsx-runtime").JSX.Element;
-    Page: ({ className, children, ...remainingProps }: import("react").PropsWithChildren<{
+    Page: ({ className, children, ...remainingProps }: import('react').PropsWithChildren<{
         className?: string;
     }>) => import("react/jsx-runtime").JSX.Element;
-    Icon: ({ className, children, ...remainingProps }: import("react").PropsWithChildren<import("./BannerIcon").BannerIconProps>) => import("react/jsx-runtime").JSX.Element;
-    Content: (props: import("react").PropsWithChildren<Partial<Pick<HTMLDivElement, "id">> & {
+    Icon: ({ className, children, ...remainingProps }: import('react').PropsWithChildren<import('./BannerIcon').BannerIconProps>) => import("react/jsx-runtime").JSX.Element;
+    Content: (props: import('react').PropsWithChildren<Partial<Pick<HTMLDivElement, "id">> & {
         title?: string | React.ReactElement;
         actions?: React.ReactElement;
         minWidthBreakpoint?: number;
         className?: string;
     }>) => import("react/jsx-runtime").JSX.Element;
-    Actions: ({ className, children, ...remainingProps }: import("react").PropsWithChildren<import("./BannerActions").BannerActionsProps>) => import("react/jsx-runtime").JSX.Element;
+    Actions: ({ className, children, ...remainingProps }: import('react').PropsWithChildren<import('./BannerActions').BannerActionsProps>) => import("react/jsx-runtime").JSX.Element;
 };
 export default Banner;

package/components/banner/Banner.js

@@ -1,74 +1,125 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, createContext, useRef } from 'react';
-import { motion, AnimatePresence, useReducedMotion } from 'motion/react';
-import classNames from 'classnames';
-import Card from "../card/Card.js";
-import Button from "../button/Button.js";
-import BannerPageActions from "./BannerActions.js";
-import BannerPageContent from "./BannerContent.js";
-import BannerPageIcon from "./BannerIcon.js";
-import BannerPage from "./BannerPage.js";
-const BannerContext = createContext(undefined);
-const Banner = (props) => {
-    const { show = true, dismissible = true, onClose = () => { }, pageTimeout = 20_000, showPageNavigation = true, border = true, initialAnimation = true, className = '', children, ...remainingProps } = props;
-    const pages = Array.isArray(children) ? children : [children];
-    const pageAmount = pages.length;
-    const hasMultiplePages = pageAmount > 1;
-    const [currentPage, setCurrentPage] = useState(0);
-    const shouldReduceMotion = useReducedMotion();
-    const hasAnimation = !shouldReduceMotion && initialAnimation;
-    const contentRef = useRef(null);
-    const [contentHeight, setContentHeight] = useState(0);
-    // biome-ignore lint/correctness/useExhaustiveDependencies: "currentPage" resets interval on manual page change
-    useEffect(() => {
-        if (!show || pageAmount === 1) {
-            return;
-        }
-        const interval = setInterval(() => {
-            nextPage();
-        }, pageTimeout);
-        return () => clearInterval(interval);
-    }, [pageAmount, pageTimeout, show, currentPage]);
-    // Update height measurement after layout is complete
-    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
-    useEffect(() => {
-        if (!contentRef.current) {
-            return;
-        }
-        // Use ResizeObserver to get accurate measurements after layout
-        const resizeObserver = new ResizeObserver(entries => {
-            const entry = entries[0];
-            if (entry) {
-                // Use getBoundingClientRect for most accurate height
-                const height = entry.target.getBoundingClientRect().height;
-                setContentHeight(height);
-            }
-        });
-        resizeObserver.observe(contentRef.current);
-        return () => resizeObserver.disconnect();
-    }, [show, currentPage]);
-    const nextPage = () => {
-        if (hasMultiplePages) {
-            setCurrentPage(prev => (prev + 1) % pageAmount);
-        }
-    };
-    const prevPage = () => {
-        if (hasMultiplePages) {
-            setCurrentPage(prev => (prev - 1 + pageAmount) % pageAmount);
-        }
-    };
-    const cardClasses = classNames('Banner display-flex text-color-darker overflow-hidden', 'position-relative', !border && 'border-color-white', className);
-    return (_jsx(BannerContext.Provider, { value: { nextPage, prevPage }, children: _jsx(AnimatePresence, { children: show && (_jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: contentHeight, opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: {
-                    height: { duration: 0.2 },
-                    opacity: { duration: 0.2 },
-                    ease: 'easeInOut',
-                }, children: _jsx("div", { ref: contentRef, style: { position: 'relative' }, children: _jsxs(Card, { className: cardClasses, padding: 20, ...remainingProps, children: [_jsxs("div", { className: 'flex-1-1 overflow-hidden', children: [_jsx(AnimatePresence, { mode: 'wait', children: _jsx(motion.div, { initial: hasAnimation ? { opacity: 0, x: 100 } : false, animate: { opacity: 1, x: 0 }, exit: hasAnimation ? { opacity: 0, x: -100 } : undefined, transition: {
-                                                duration: 1.5,
-                                                ease: [0.25, 1, 0.5, 1],
-                                            }, children: pages[currentPage] }, currentPage) }), hasMultiplePages && showPageNavigation && (_jsx("div", { className: 'margin-5', children: _jsx("div", { className: 'position-absolute bottom-5', style: { right: '45px' }, children: _jsxs("div", { className: 'display-flex', children: [_jsx(Button, { bsStyle: 'muted', bsSize: 'xs', onClick: prevPage, iconName: 'rioglyph-arrow-left', iconOnly: true }), _jsx(Button, { bsStyle: 'muted', bsSize: 'xs', onClick: nextPage, iconName: 'rioglyph-arrow-right', iconOnly: true })] }) }) }))] }), dismissible && (_jsx("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: _jsx(Button, { bsStyle: 'muted', bsSize: 'sm', onClick: onClose, iconName: 'rioglyph-remove', iconOnly: true }) }))] }) }) })) }) }));
+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 "classnames";
+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
+          }
+        ) })
+      ] }) })
+    }
+  ) }) });
 };
-Banner.Page = BannerPage;
-Banner.Icon = BannerPageIcon;
-Banner.Content = BannerPageContent;
-Banner.Actions = BannerPageActions;
-export default Banner;
+o.Page = K;
+o.Icon = J;
+o.Content = G;
+o.Actions = F;
+export {
+  o as default
+};
+//# sourceMappingURL=Banner.js.map

package/components/banner/Banner.js.map

@@ -0,0 +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 'classnames';\n\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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"}

package/components/banner/BannerActions.d.ts

@@ -1,4 +1,4 @@
-import type { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 export type BannerActionsProps = {
     /**
      * Additional classname added to the wrapper element.

package/components/banner/BannerActions.js

@@ -1,5 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-const BannerActions = ({ className = '', children, ...remainingProps }) => {
-    return (_jsx("div", { className: `BannerActions flex-0 btn-toolbar ${className}`, ...remainingProps, children: children }));
+import { jsx as r } from "react/jsx-runtime";
+const e = ({ className: n = "", children: t, ...o }) => /* @__PURE__ */ r("div", { className: `BannerActions flex-0 btn-toolbar ${n}`, ...o, children: t });
+export {
+  e as default
 };
-export default BannerActions;
+//# sourceMappingURL=BannerActions.js.map

package/components/banner/BannerActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerActions.js","sources":["../../../src/components/banner/BannerActions.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\n\nexport type BannerActionsProps = {\n    /**\n     * Additional classname added to the wrapper element.\n     */\n    className?: string;\n};\n\nconst BannerActions = ({ className = '', children, ...remainingProps }: PropsWithChildren<BannerActionsProps>) => {\n    return (\n        <div className={`BannerActions flex-0 btn-toolbar ${className}`} {...remainingProps}>\n            {children}\n        </div>\n    );\n};\n\nexport default BannerActions;\n"],"names":["BannerActions","className","children","remainingProps","jsx"],"mappings":";AASA,MAAMA,IAAgB,CAAC,EAAE,WAAAC,IAAY,IAAI,UAAAC,GAAU,GAAGC,QAE9C,gBAAAC,EAAC,SAAI,WAAW,oCAAoCH,CAAS,IAAK,GAAGE,GAChE,UAAAD,GACL;"}

package/components/banner/BannerContent.d.ts

@@ -1,4 +1,4 @@
-import type { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 type BannerContentProps = Partial<Pick<HTMLDivElement, 'id'>> & {
     /**
      * The title for the banner.

package/components/banner/BannerContent.js

@@ -1,16 +1,33 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import classNames from 'classnames';
-import useResizeObserver from "../../useResizeObserver.js";
-const DEFAULT_MIN_WIDTH_BREAKPOINT = 400;
-const BannerContent = (props) => {
-    const { title, actions, children, minWidthBreakpoint = DEFAULT_MIN_WIDTH_BREAKPOINT, className = '', ...remainingProps } = props;
-    // Check size of the container for responsive breakpoints
-    const [contentRef, _, { inlineSize }] = useResizeObserver();
-    const containerWidth = inlineSize ?? 0;
-    const contentWithActionClass = classNames('flex-1-1', 'BannerContent', 'display-flex gap-15', containerWidth < minWidthBreakpoint ? 'flex-column' : 'flex-row align-items-center', className);
-    if (actions) {
-        return (_jsxs("div", { ref: contentRef, className: contentWithActionClass, ...remainingProps, children: [_jsxs("div", { className: 'flex-1-1 min-width-100', children: [title && _jsx("div", { className: 'text-size-16 text-medium', children: title }), children] }), actions] }));
-    }
-    return (_jsxs("div", { className: 'flex-1-1', children: [title && _jsx("div", { className: 'text-size-16 text-medium', children: title }), children] }));
+import { jsxs as t, jsx as s } from "react/jsx-runtime";
+import f from "classnames";
+import x from "../../hooks/useResizeObserver.js";
+const h = 400, z = (r) => {
+  const {
+    title: e,
+    actions: n,
+    children: i,
+    minWidthBreakpoint: a = h,
+    className: c = "",
+    ...l
+  } = r, [o, N, { inlineSize: m }] = x(), d = f(
+    "flex-1-1",
+    "BannerContent",
+    "display-flex gap-15",
+    (m ?? 0) < a ? "flex-column" : "flex-row align-items-center",
+    c
+  );
+  return n ? /* @__PURE__ */ t("div", { ref: o, className: d, ...l, children: [
+    /* @__PURE__ */ t("div", { className: "flex-1-1 min-width-100", children: [
+      e && /* @__PURE__ */ s("div", { className: "text-size-16 text-medium", children: e }),
+      i
+    ] }),
+    n
+  ] }) : /* @__PURE__ */ t("div", { className: "flex-1-1", children: [
+    e && /* @__PURE__ */ s("div", { className: "text-size-16 text-medium", children: e }),
+    i
+  ] });
 };
-export default BannerContent;
+export {
+  z as default
+};
+//# sourceMappingURL=BannerContent.js.map