@evolve.ui/core-components 1.0.0

package/Badge/LiveStatusBadge.mjs

@@ -0,0 +1,74 @@
+'use client';
+import { DotOutline, Pause, VideoCamera } from "../Icons.mjs";
+import { Badge } from "../Badge.mjs";
+import { cn } from "@evolve.ui/theme-system";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Badge/LiveStatusBadge.tsx
+/**
+* LiveStatusBadge displays the LIVE/PAUSED/CLOSING status of a live session with viewer count.
+*
+* This component shows a badge with session status (LIVE/PAUSED/CLOSING), optional video camera icon,
+* viewer count with dot separator, and appropriate state indicators.
+*
+* @example
+* ```tsx
+* // Live session with video
+* <LiveStatusBadge
+*   hasVideo={true}
+*   isClosing={false}
+*   isPaused={false}
+*   viewers={245}
+* />
+*
+* // Paused session
+* <LiveStatusBadge
+*   isClosing={false}
+*   isPaused={true}
+*   viewers={132}
+* />
+*
+* // Closing session
+* <LiveStatusBadge
+*   hasVideo={false}
+*   isClosing={true}
+*   isPaused={false}
+*   viewers={0}
+* />
+* ```
+*/
+const LiveStatusBadge = ({ className, hasVideo, isClosing, isPaused, viewers = 1 }) => {
+	let statusText = isPaused ? "PAUSED" : "LIVE";
+	if (isClosing) statusText = "CLOSING";
+	return /* @__PURE__ */ jsxs(Badge, {
+		className: cn("hui-text-label-strong flex items-center gap-2xs", className),
+		color: "critical",
+		"data-testid": "live-status-badge",
+		emphasis: "bold",
+		iconStyle: "fill",
+		size: "sm",
+		children: [
+			!isPaused && !isClosing && hasVideo && /* @__PURE__ */ jsx(VideoCamera, {
+				"data-testid": "video-camera-icon",
+				size: "sm",
+				style: "fill"
+			}),
+			isPaused && !isClosing && /* @__PURE__ */ jsx(Pause, {
+				"data-testid": "pause-icon",
+				size: "sm",
+				style: "fill"
+			}),
+			statusText,
+			!isClosing && /* @__PURE__ */ jsx(DotOutline, {
+				className: "-mx-2xs",
+				size: "sm",
+				style: "fill"
+			}),
+			/* @__PURE__ */ jsx("span", { children: !isClosing && viewers })
+		]
+	});
+};
+LiveStatusBadge.displayName = "LiveStatusBadge";
+//#endregion
+export { LiveStatusBadge };
+
+//# sourceMappingURL=LiveStatusBadge.mjs.map

package/Badge/LiveStatusBadge.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LiveStatusBadge.mjs","names":[],"sources":["../../src/Badge/LiveStatusBadge.tsx"],"sourcesContent":["import { cn } from '@evolve.ui/theme-system';\n\nimport { DotOutline, Pause, VideoCamera } from '../Icons';\nimport { Badge } from './Badge';\n\ntype Props = {\n    /** Optional className for custom styling and positioning */\n    className?: string;\n    /** Whether the live session has video streaming capabilities */\n    hasVideo?: boolean;\n    /** Whether the live session is currently closing */\n    isClosing?: boolean;\n    /** Whether the live session is currently paused */\n    isPaused?: boolean;\n    /** Number of viewers currently watching */\n    viewers: number;\n};\n\n/**\n * LiveStatusBadge displays the LIVE/PAUSED/CLOSING status of a live session with viewer count.\n *\n * This component shows a badge with session status (LIVE/PAUSED/CLOSING), optional video camera icon,\n * viewer count with dot separator, and appropriate state indicators.\n *\n * @example\n * ```tsx\n * // Live session with video\n * <LiveStatusBadge\n *   hasVideo={true}\n *   isClosing={false}\n *   isPaused={false}\n *   viewers={245}\n * />\n *\n * // Paused session\n * <LiveStatusBadge\n *   isClosing={false}\n *   isPaused={true}\n *   viewers={132}\n * />\n *\n * // Closing session\n * <LiveStatusBadge\n *   hasVideo={false}\n *   isClosing={true}\n *   isPaused={false}\n *   viewers={0}\n * />\n * ```\n */\nexport const LiveStatusBadge = ({ className, hasVideo, isClosing, isPaused, viewers = 1 }: Props) => {\n    let statusText = isPaused ? 'PAUSED' : 'LIVE';\n    if (isClosing) {\n        statusText = 'CLOSING';\n    }\n\n    return (\n        <Badge\n            className={cn('hui-text-label-strong flex items-center gap-2xs', className)}\n            color=\"critical\"\n            data-testid=\"live-status-badge\"\n            emphasis=\"bold\"\n            iconStyle=\"fill\"\n            size=\"sm\"\n        >\n            {!isPaused && !isClosing && hasVideo && (\n                <VideoCamera\n                    data-testid=\"video-camera-icon\"\n                    size=\"sm\"\n                    style=\"fill\"\n                />\n            )}\n            {isPaused && !isClosing && (\n                <Pause\n                    data-testid=\"pause-icon\"\n                    size=\"sm\"\n                    style=\"fill\"\n                />\n            )}\n            {statusText}\n            {!isClosing && (\n                <DotOutline\n                    className=\"-mx-2xs\"\n                    size=\"sm\"\n                    style=\"fill\"\n                />\n            )}\n            <span>{!isClosing && viewers}</span>\n        </Badge>\n    );\n};\n\nLiveStatusBadge.displayName = 'LiveStatusBadge';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDA,MAAa,mBAAmB,EAAE,WAAW,UAAU,WAAW,UAAU,UAAU,QAAe;CACjG,IAAI,aAAa,WAAW,WAAW;CACvC,IAAI,WACA,aAAa;CAGjB,OACI,qBAAC,OAAD;EACI,WAAW,GAAG,mDAAmD,SAAS;EAC1E,OAAM;EACN,eAAY;EACZ,UAAS;EACT,WAAU;EACV,MAAK;YANT;GAQK,CAAC,YAAY,CAAC,aAAa,YACxB,oBAAC,aAAD;IACI,eAAY;IACZ,MAAK;IACL,OAAM;GACT,CAAA;GAEJ,YAAY,CAAC,aACV,oBAAC,OAAD;IACI,eAAY;IACZ,MAAK;IACL,OAAM;GACT,CAAA;GAEJ;GACA,CAAC,aACE,oBAAC,YAAD;IACI,WAAU;IACV,MAAK;IACL,OAAM;GACT,CAAA;GAEL,oBAAC,QAAD,EAAA,UAAO,CAAC,aAAa,QAAc,CAAA;EAChC;;AAEf;AAEA,gBAAgB,cAAc"}

package/Badge-C1BBu1fH.d.mts

@@ -0,0 +1,71 @@
+import { n as IconComponent } from "./IconBase-C_Lx9rDx.mjs";
+import { t as AnyIcon } from "./anyIcon-eR07wvJb.mjs";
+import { ComponentProps, ReactNode } from "react";
+
+//#region src/Badge/Badge.types.d.ts
+/** Color variant of the badge. */
+type BadgeColor = 'neutral' | 'critical' | 'success' | 'info' | 'warning';
+/** Emphasis mode: bold (filled) or subtle (light with border). */
+type BadgeEmphasis = 'bold' | 'subtle';
+/** Size of the badge. */
+type BadgeSize = 'md' | 'sm' | 'xs';
+type BadgeProps = {
+  /** Content to display inside the badge. */children?: string | ReactNode; /** Additional CSS class name. */
+  className?: string;
+  /**
+   * Color variant of the badge.
+   * @default 'neutral'
+   */
+  color?: BadgeColor; /** Test ID for the badge. */
+  'data-testid'?: string;
+  /**
+   * Reduces padding for xs size badges.
+   * @default false
+   */
+  dense?: boolean;
+  /**
+   * Emphasis mode: bold (filled) or subtle (light with border).
+   * @default 'subtle'
+   */
+  emphasis?: BadgeEmphasis; /** Optional icon to display on the left side. */
+  iconLeft?: AnyIcon; /** Optional icon to display on the right side. */
+  iconRight?: AnyIcon;
+  /**
+   * Icon style variant.
+   * @default 'regular'
+   */
+  iconStyle?: ComponentProps<IconComponent>['style']; /** HTML id attribute. */
+  id?: string;
+  /**
+   * Apply pill-shaped border radius.
+   * @default false
+   */
+  round?: boolean;
+  /**
+   * Size of the badge.
+   * @default 'md'
+   */
+  size?: BadgeSize;
+};
+//#endregion
+//#region src/Badge/Badge.d.ts
+declare const Badge: {
+  ({
+    children,
+    className,
+    color,
+    "data-testid": dataTestId,
+    dense,
+    emphasis,
+    iconLeft: IconLeft,
+    iconRight: IconRight,
+    iconStyle,
+    id,
+    round,
+    size
+  }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { BadgeSize as a, BadgeProps as i, BadgeColor as n, BadgeEmphasis as r, Badge as t };
+//# sourceMappingURL=Badge-C1BBu1fH.d.mts.map

package/Badge-C1BBu1fH.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge-C1BBu1fH.d.mts","names":[],"sources":["../src/Badge/Badge.types.ts","../src/Badge/Badge.tsx"],"mappings":";;;;;;KAMY,UAAA;AAAZ;AAAA,KAGY,aAAA;;KAGA,SAAA;AAAA,KAEA,UAAA;EALA,2CAOR,QAAA,YAAoB,SAAA;EAEpB,SAAA;EATqB;AAGzB;;;EAWI,KAAA,GAAQ,UAAA,EAXS;EAajB,aAAA;EAXkB;;;;EAgBlB,KAAA;EAOW;;;;EAFX,QAAA,GAAW,aAAA,EAqBK;EAnBhB,QAAA,GAAW,OAAA,EArBX;EAuBA,SAAA,GAAY,OAAA;EArBZ;;;;EA0BA,SAAA,GAAY,cAAA,CAAe,aAAA,YAT3B;EAWA,EAAA;EATA;;;;EAcA,KAAA;EAPY;;;;EAYZ,IAAA,GAAO,SAAA;AAAA;;;cC7CE,KAAA;EAAA;;;;;;;;;;;;;KAaV,UAAA,+BAAU,GAAA,CAAA,OAAA"}

package/Badge-lOH4Ssq_.d.cts

@@ -0,0 +1,71 @@
+import { n as IconComponent } from "./IconBase-C_Lx9rDx.cjs";
+import { t as AnyIcon } from "./anyIcon-C3IQzJJ9.cjs";
+import { ComponentProps, ReactNode } from "react";
+
+//#region src/Badge/Badge.types.d.ts
+/** Color variant of the badge. */
+type BadgeColor = 'neutral' | 'critical' | 'success' | 'info' | 'warning';
+/** Emphasis mode: bold (filled) or subtle (light with border). */
+type BadgeEmphasis = 'bold' | 'subtle';
+/** Size of the badge. */
+type BadgeSize = 'md' | 'sm' | 'xs';
+type BadgeProps = {
+  /** Content to display inside the badge. */children?: string | ReactNode; /** Additional CSS class name. */
+  className?: string;
+  /**
+   * Color variant of the badge.
+   * @default 'neutral'
+   */
+  color?: BadgeColor; /** Test ID for the badge. */
+  'data-testid'?: string;
+  /**
+   * Reduces padding for xs size badges.
+   * @default false
+   */
+  dense?: boolean;
+  /**
+   * Emphasis mode: bold (filled) or subtle (light with border).
+   * @default 'subtle'
+   */
+  emphasis?: BadgeEmphasis; /** Optional icon to display on the left side. */
+  iconLeft?: AnyIcon; /** Optional icon to display on the right side. */
+  iconRight?: AnyIcon;
+  /**
+   * Icon style variant.
+   * @default 'regular'
+   */
+  iconStyle?: ComponentProps<IconComponent>['style']; /** HTML id attribute. */
+  id?: string;
+  /**
+   * Apply pill-shaped border radius.
+   * @default false
+   */
+  round?: boolean;
+  /**
+   * Size of the badge.
+   * @default 'md'
+   */
+  size?: BadgeSize;
+};
+//#endregion
+//#region src/Badge/Badge.d.ts
+declare const Badge: {
+  ({
+    children,
+    className,
+    color,
+    "data-testid": dataTestId,
+    dense,
+    emphasis,
+    iconLeft: IconLeft,
+    iconRight: IconRight,
+    iconStyle,
+    id,
+    round,
+    size
+  }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { BadgeSize as a, BadgeProps as i, BadgeColor as n, BadgeEmphasis as r, Badge as t };
+//# sourceMappingURL=Badge-lOH4Ssq_.d.cts.map

package/Badge-lOH4Ssq_.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge-lOH4Ssq_.d.cts","names":[],"sources":["../src/Badge/Badge.types.ts","../src/Badge/Badge.tsx"],"mappings":";;;;;;KAMY,UAAA;AAAZ;AAAA,KAGY,aAAA;;KAGA,SAAA;AAAA,KAEA,UAAA;EALA,2CAOR,QAAA,YAAoB,SAAA;EAEpB,SAAA;EATqB;AAGzB;;;EAWI,KAAA,GAAQ,UAAA,EAXS;EAajB,aAAA;EAXkB;;;;EAgBlB,KAAA;EAOW;;;;EAFX,QAAA,GAAW,aAAA,EAqBK;EAnBhB,QAAA,GAAW,OAAA,EArBX;EAuBA,SAAA,GAAY,OAAA;EArBZ;;;;EA0BA,SAAA,GAAY,cAAA,CAAe,aAAA,YAT3B;EAWA,EAAA;EATA;;;;EAcA,KAAA;EAPY;;;;EAYZ,IAAA,GAAO,SAAA;AAAA;;;cC7CE,KAAA;EAAA;;;;;;;;;;;;;KAaV,UAAA,+BAAU,GAAA,CAAA,OAAA"}

package/Badge.cjs

@@ -0,0 +1,72 @@
+'use client';
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+let _evolve_ui_theme_system = require("@evolve.ui/theme-system");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/Badge/Badge.tsx
+const convertBadgeSizeToIconSize = {
+	md: "sm",
+	sm: "sm",
+	xs: "xs"
+};
+const Badge = ({ children, className, color = "neutral", "data-testid": dataTestId, dense = false, emphasis = "subtle", iconLeft: IconLeft, iconRight: IconRight, iconStyle = "regular", id, round = false, size = "md" }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, react.useMemo)(() => (0, _evolve_ui_theme_system.cn)("flex w-fit min-w-fit items-center justify-center", {
+			"hui-text-body-primary h-[30px] px-xs": size === "md",
+			"hui-text-body-secondary h-[24px] px-xs": size === "sm",
+			"hui-text-caption h-[18px] min-w-[18px] px-[5px]": size === "xs" && dense,
+			"hui-text-caption h-[18px] px-xs": size === "xs" && !dense
+		}, "text-text-inverse", {
+			"border border-solid": emphasis !== "bold",
+			"border-border-critical text-text-critical": color === "critical" && emphasis === "subtle",
+			"border-border-info text-background-info-dark": color === "info" && emphasis === "subtle",
+			"border-border-secondary text-surface-500": color === "neutral" && emphasis === "subtle",
+			"border-border-success text-background-success-dark": color === "success" && emphasis === "subtle",
+			"border-border-warning text-text-warning": color === "warning" && emphasis === "subtle",
+			"border-transparent text-text-primary": color === "warning" && emphasis === "bold"
+		}, "rounded-sm", { "rounded-xl": round }, {
+			"bg-background-critical-dark": color === "critical" && emphasis === "bold",
+			"bg-background-critical-light": color === "critical" && emphasis === "subtle",
+			"bg-background-info-dark": color === "info" && emphasis === "bold",
+			"bg-background-info-light": color === "info" && emphasis === "subtle",
+			"bg-background-success-dark": color === "success" && emphasis === "bold",
+			"bg-background-success-light": color === "success" && emphasis === "subtle",
+			"bg-background-warning-dark": color === "warning" && emphasis === "bold",
+			"bg-background-warning-light": color === "warning" && emphasis === "subtle",
+			"bg-surface-100": color === "neutral" && emphasis === "subtle",
+			"bg-surface-500": color === "neutral" && emphasis === "bold"
+		}, className), [
+			className,
+			color,
+			dense,
+			emphasis,
+			round,
+			size
+		]),
+		"data-testid": dataTestId,
+		id,
+		children: [
+			IconLeft && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconLeft, {
+				className: (0, _evolve_ui_theme_system.cn)({ "mr-2xs": Boolean(children) }),
+				color: "inherit",
+				size: convertBadgeSizeToIconSize[size],
+				style: iconStyle
+			}),
+			children,
+			IconRight && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconRight, {
+				className: (0, _evolve_ui_theme_system.cn)({ "ml-2xs": Boolean(children) }),
+				color: "inherit",
+				size: convertBadgeSizeToIconSize[size],
+				style: iconStyle
+			})
+		]
+	});
+};
+Badge.displayName = "Badge";
+//#endregion
+exports.Badge = Badge;
+
+//# sourceMappingURL=Badge.cjs.map

package/Badge.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.cjs","names":[],"sources":["../src/Badge/Badge.tsx"],"sourcesContent":["import { cn } from '@evolve.ui/theme-system';\nimport { useMemo } from 'react';\n\nimport type { BadgeProps } from './Badge.types';\n\nconst convertBadgeSizeToIconSize = {\n    md: 'sm',\n    sm: 'sm',\n    xs: 'xs',\n} as const;\n\nexport const Badge = ({\n    children,\n    className,\n    color = 'neutral',\n    'data-testid': dataTestId,\n    dense = false,\n    emphasis = 'subtle',\n    iconLeft: IconLeft,\n    iconRight: IconRight,\n    iconStyle = 'regular',\n    id,\n    round = false,\n    size = 'md',\n}: BadgeProps) => {\n    const classes = useMemo(\n        () =>\n            cn(\n                // GENERAL\n                'flex w-fit min-w-fit items-center justify-center',\n                // PADDING AND TEXT SIZE\n                {\n                    'hui-text-body-primary h-[30px] px-xs': size === 'md',\n                    'hui-text-body-secondary h-[24px] px-xs': size === 'sm',\n                    'hui-text-caption h-[18px] min-w-[18px] px-[5px]': size === 'xs' && dense,\n                    'hui-text-caption h-[18px] px-xs': size === 'xs' && !dense,\n                },\n                // TEXT & BORDER COLOR\n                'text-text-inverse',\n                {\n                    'border border-solid': emphasis !== 'bold',\n                    'border-border-critical text-text-critical': color === 'critical' && emphasis === 'subtle',\n                    'border-border-info text-background-info-dark': color === 'info' && emphasis === 'subtle',\n                    'border-border-secondary text-surface-500': color === 'neutral' && emphasis === 'subtle',\n                    'border-border-success text-background-success-dark': color === 'success' && emphasis === 'subtle',\n                    'border-border-warning text-text-warning': color === 'warning' && emphasis === 'subtle',\n                    'border-transparent text-text-primary': color === 'warning' && emphasis === 'bold',\n                },\n                // RADIUS\n                'rounded-sm',\n                {\n                    'rounded-xl': round,\n                },\n                // BACKGROUND COLOR\n                {\n                    'bg-background-critical-dark': color === 'critical' && emphasis === 'bold',\n                    'bg-background-critical-light': color === 'critical' && emphasis === 'subtle',\n                    'bg-background-info-dark': color === 'info' && emphasis === 'bold',\n                    'bg-background-info-light': color === 'info' && emphasis === 'subtle',\n                    'bg-background-success-dark': color === 'success' && emphasis === 'bold',\n                    'bg-background-success-light': color === 'success' && emphasis === 'subtle',\n                    'bg-background-warning-dark': color === 'warning' && emphasis === 'bold',\n                    'bg-background-warning-light': color === 'warning' && emphasis === 'subtle',\n                    'bg-surface-100': color === 'neutral' && emphasis === 'subtle',\n                    'bg-surface-500': color === 'neutral' && emphasis === 'bold',\n                },\n\n                className\n            ),\n        [className, color, dense, emphasis, round, size]\n    );\n\n    return (\n        <div\n            className={classes}\n            data-testid={dataTestId}\n            id={id}\n        >\n            {IconLeft && (\n                <IconLeft\n                    className={cn({\n                        'mr-2xs': Boolean(children),\n                    })}\n                    color=\"inherit\"\n                    size={convertBadgeSizeToIconSize[size]}\n                    style={iconStyle}\n                />\n            )}\n            {children}\n            {IconRight && (\n                <IconRight\n                    className={cn({\n                        'ml-2xs': Boolean(children),\n                    })}\n                    color=\"inherit\"\n                    size={convertBadgeSizeToIconSize[size]}\n                    style={iconStyle}\n                />\n            )}\n        </div>\n    );\n};\n\nBadge.displayName = 'Badge';\n"],"mappings":";;;;;;;;AAKA,MAAM,6BAA6B;CAC/B,IAAI;CACJ,IAAI;CACJ,IAAI;AACR;AAEA,MAAa,SAAS,EAClB,UACA,WACA,QAAQ,WACR,eAAe,YACf,QAAQ,OACR,WAAW,UACX,UAAU,UACV,WAAW,WACX,YAAY,WACZ,IACA,QAAQ,OACR,OAAO,WACO;CAgDd,OACI,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EACI,YAAA,GAAA,MAAA,QAAA,QAAA,GAAA,wBAAA,GAAA,CA7CI,oDAEA;GACI,wCAAwC,SAAS;GACjD,0CAA0C,SAAS;GACnD,mDAAmD,SAAS,QAAQ;GACpE,mCAAmC,SAAS,QAAQ,CAAC;EACzD,GAEA,qBACA;GACI,uBAAuB,aAAa;GACpC,6CAA6C,UAAU,cAAc,aAAa;GAClF,gDAAgD,UAAU,UAAU,aAAa;GACjF,4CAA4C,UAAU,aAAa,aAAa;GAChF,sDAAsD,UAAU,aAAa,aAAa;GAC1F,2CAA2C,UAAU,aAAa,aAAa;GAC/E,wCAAwC,UAAU,aAAa,aAAa;EAChF,GAEA,cACA,EACI,cAAc,MAClB,GAEA;GACI,+BAA+B,UAAU,cAAc,aAAa;GACpE,gCAAgC,UAAU,cAAc,aAAa;GACrE,2BAA2B,UAAU,UAAU,aAAa;GAC5D,4BAA4B,UAAU,UAAU,aAAa;GAC7D,8BAA8B,UAAU,aAAa,aAAa;GAClE,+BAA+B,UAAU,aAAa,aAAa;GACnE,8BAA8B,UAAU,aAAa,aAAa;GAClE,+BAA+B,UAAU,aAAa,aAAa;GACnE,kBAAkB,UAAU,aAAa,aAAa;GACtD,kBAAkB,UAAU,aAAa,aAAa;EAC1D,GAEA,SACJ,GACJ;GAAC;GAAW;GAAO;GAAO;GAAU;GAAO;EAAI,CAK1B;EACjB,eAAa;EACT;YAHR;GAKK,YACG,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;IACI,YAAA,GAAA,wBAAA,GAAA,CAAc,EACV,UAAU,QAAQ,QAAQ,EAC9B,CAAC;IACD,OAAM;IACN,MAAM,2BAA2B;IACjC,OAAO;GACV,CAAA;GAEJ;GACA,aACG,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;IACI,YAAA,GAAA,wBAAA,GAAA,CAAc,EACV,UAAU,QAAQ,QAAQ,EAC9B,CAAC;IACD,OAAM;IACN,MAAM,2BAA2B;IACjC,OAAO;GACV,CAAA;EAEJ;;AAEb;AAEA,MAAM,cAAc"}

package/Badge.d.cts

@@ -0,0 +1,2 @@
+import { t as Badge } from "./Badge-lOH4Ssq_.cjs";
+export { Badge };

package/Badge.d.mts

@@ -0,0 +1,2 @@
+import { t as Badge } from "./Badge-C1BBu1fH.mjs";
+export { Badge };

package/Badge.mjs

@@ -0,0 +1,68 @@
+'use client';
+import { cn } from "@evolve.ui/theme-system";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Badge/Badge.tsx
+const convertBadgeSizeToIconSize = {
+	md: "sm",
+	sm: "sm",
+	xs: "xs"
+};
+const Badge = ({ children, className, color = "neutral", "data-testid": dataTestId, dense = false, emphasis = "subtle", iconLeft: IconLeft, iconRight: IconRight, iconStyle = "regular", id, round = false, size = "md" }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: useMemo(() => cn("flex w-fit min-w-fit items-center justify-center", {
+			"hui-text-body-primary h-[30px] px-xs": size === "md",
+			"hui-text-body-secondary h-[24px] px-xs": size === "sm",
+			"hui-text-caption h-[18px] min-w-[18px] px-[5px]": size === "xs" && dense,
+			"hui-text-caption h-[18px] px-xs": size === "xs" && !dense
+		}, "text-text-inverse", {
+			"border border-solid": emphasis !== "bold",
+			"border-border-critical text-text-critical": color === "critical" && emphasis === "subtle",
+			"border-border-info text-background-info-dark": color === "info" && emphasis === "subtle",
+			"border-border-secondary text-surface-500": color === "neutral" && emphasis === "subtle",
+			"border-border-success text-background-success-dark": color === "success" && emphasis === "subtle",
+			"border-border-warning text-text-warning": color === "warning" && emphasis === "subtle",
+			"border-transparent text-text-primary": color === "warning" && emphasis === "bold"
+		}, "rounded-sm", { "rounded-xl": round }, {
+			"bg-background-critical-dark": color === "critical" && emphasis === "bold",
+			"bg-background-critical-light": color === "critical" && emphasis === "subtle",
+			"bg-background-info-dark": color === "info" && emphasis === "bold",
+			"bg-background-info-light": color === "info" && emphasis === "subtle",
+			"bg-background-success-dark": color === "success" && emphasis === "bold",
+			"bg-background-success-light": color === "success" && emphasis === "subtle",
+			"bg-background-warning-dark": color === "warning" && emphasis === "bold",
+			"bg-background-warning-light": color === "warning" && emphasis === "subtle",
+			"bg-surface-100": color === "neutral" && emphasis === "subtle",
+			"bg-surface-500": color === "neutral" && emphasis === "bold"
+		}, className), [
+			className,
+			color,
+			dense,
+			emphasis,
+			round,
+			size
+		]),
+		"data-testid": dataTestId,
+		id,
+		children: [
+			IconLeft && /* @__PURE__ */ jsx(IconLeft, {
+				className: cn({ "mr-2xs": Boolean(children) }),
+				color: "inherit",
+				size: convertBadgeSizeToIconSize[size],
+				style: iconStyle
+			}),
+			children,
+			IconRight && /* @__PURE__ */ jsx(IconRight, {
+				className: cn({ "ml-2xs": Boolean(children) }),
+				color: "inherit",
+				size: convertBadgeSizeToIconSize[size],
+				style: iconStyle
+			})
+		]
+	});
+};
+Badge.displayName = "Badge";
+//#endregion
+export { Badge };
+
+//# sourceMappingURL=Badge.mjs.map

package/Badge.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.mjs","names":[],"sources":["../src/Badge/Badge.tsx"],"sourcesContent":["import { cn } from '@evolve.ui/theme-system';\nimport { useMemo } from 'react';\n\nimport type { BadgeProps } from './Badge.types';\n\nconst convertBadgeSizeToIconSize = {\n    md: 'sm',\n    sm: 'sm',\n    xs: 'xs',\n} as const;\n\nexport const Badge = ({\n    children,\n    className,\n    color = 'neutral',\n    'data-testid': dataTestId,\n    dense = false,\n    emphasis = 'subtle',\n    iconLeft: IconLeft,\n    iconRight: IconRight,\n    iconStyle = 'regular',\n    id,\n    round = false,\n    size = 'md',\n}: BadgeProps) => {\n    const classes = useMemo(\n        () =>\n            cn(\n                // GENERAL\n                'flex w-fit min-w-fit items-center justify-center',\n                // PADDING AND TEXT SIZE\n                {\n                    'hui-text-body-primary h-[30px] px-xs': size === 'md',\n                    'hui-text-body-secondary h-[24px] px-xs': size === 'sm',\n                    'hui-text-caption h-[18px] min-w-[18px] px-[5px]': size === 'xs' && dense,\n                    'hui-text-caption h-[18px] px-xs': size === 'xs' && !dense,\n                },\n                // TEXT & BORDER COLOR\n                'text-text-inverse',\n                {\n                    'border border-solid': emphasis !== 'bold',\n                    'border-border-critical text-text-critical': color === 'critical' && emphasis === 'subtle',\n                    'border-border-info text-background-info-dark': color === 'info' && emphasis === 'subtle',\n                    'border-border-secondary text-surface-500': color === 'neutral' && emphasis === 'subtle',\n                    'border-border-success text-background-success-dark': color === 'success' && emphasis === 'subtle',\n                    'border-border-warning text-text-warning': color === 'warning' && emphasis === 'subtle',\n                    'border-transparent text-text-primary': color === 'warning' && emphasis === 'bold',\n                },\n                // RADIUS\n                'rounded-sm',\n                {\n                    'rounded-xl': round,\n                },\n                // BACKGROUND COLOR\n                {\n                    'bg-background-critical-dark': color === 'critical' && emphasis === 'bold',\n                    'bg-background-critical-light': color === 'critical' && emphasis === 'subtle',\n                    'bg-background-info-dark': color === 'info' && emphasis === 'bold',\n                    'bg-background-info-light': color === 'info' && emphasis === 'subtle',\n                    'bg-background-success-dark': color === 'success' && emphasis === 'bold',\n                    'bg-background-success-light': color === 'success' && emphasis === 'subtle',\n                    'bg-background-warning-dark': color === 'warning' && emphasis === 'bold',\n                    'bg-background-warning-light': color === 'warning' && emphasis === 'subtle',\n                    'bg-surface-100': color === 'neutral' && emphasis === 'subtle',\n                    'bg-surface-500': color === 'neutral' && emphasis === 'bold',\n                },\n\n                className\n            ),\n        [className, color, dense, emphasis, round, size]\n    );\n\n    return (\n        <div\n            className={classes}\n            data-testid={dataTestId}\n            id={id}\n        >\n            {IconLeft && (\n                <IconLeft\n                    className={cn({\n                        'mr-2xs': Boolean(children),\n                    })}\n                    color=\"inherit\"\n                    size={convertBadgeSizeToIconSize[size]}\n                    style={iconStyle}\n                />\n            )}\n            {children}\n            {IconRight && (\n                <IconRight\n                    className={cn({\n                        'ml-2xs': Boolean(children),\n                    })}\n                    color=\"inherit\"\n                    size={convertBadgeSizeToIconSize[size]}\n                    style={iconStyle}\n                />\n            )}\n        </div>\n    );\n};\n\nBadge.displayName = 'Badge';\n"],"mappings":";;;;AAKA,MAAM,6BAA6B;CAC/B,IAAI;CACJ,IAAI;CACJ,IAAI;AACR;AAEA,MAAa,SAAS,EAClB,UACA,WACA,QAAQ,WACR,eAAe,YACf,QAAQ,OACR,WAAW,UACX,UAAU,UACV,WAAW,WACX,YAAY,WACZ,IACA,QAAQ,OACR,OAAO,WACO;CAgDd,OACI,qBAAC,OAAD;EACI,WAjDQ,cAER,GAEI,oDAEA;GACI,wCAAwC,SAAS;GACjD,0CAA0C,SAAS;GACnD,mDAAmD,SAAS,QAAQ;GACpE,mCAAmC,SAAS,QAAQ,CAAC;EACzD,GAEA,qBACA;GACI,uBAAuB,aAAa;GACpC,6CAA6C,UAAU,cAAc,aAAa;GAClF,gDAAgD,UAAU,UAAU,aAAa;GACjF,4CAA4C,UAAU,aAAa,aAAa;GAChF,sDAAsD,UAAU,aAAa,aAAa;GAC1F,2CAA2C,UAAU,aAAa,aAAa;GAC/E,wCAAwC,UAAU,aAAa,aAAa;EAChF,GAEA,cACA,EACI,cAAc,MAClB,GAEA;GACI,+BAA+B,UAAU,cAAc,aAAa;GACpE,gCAAgC,UAAU,cAAc,aAAa;GACrE,2BAA2B,UAAU,UAAU,aAAa;GAC5D,4BAA4B,UAAU,UAAU,aAAa;GAC7D,8BAA8B,UAAU,aAAa,aAAa;GAClE,+BAA+B,UAAU,aAAa,aAAa;GACnE,8BAA8B,UAAU,aAAa,aAAa;GAClE,+BAA+B,UAAU,aAAa,aAAa;GACnE,kBAAkB,UAAU,aAAa,aAAa;GACtD,kBAAkB,UAAU,aAAa,aAAa;EAC1D,GAEA,SACJ,GACJ;GAAC;GAAW;GAAO;GAAO;GAAU;GAAO;EAAI,CAK1B;EACjB,eAAa;EACT;YAHR;GAKK,YACG,oBAAC,UAAD;IACI,WAAW,GAAG,EACV,UAAU,QAAQ,QAAQ,EAC9B,CAAC;IACD,OAAM;IACN,MAAM,2BAA2B;IACjC,OAAO;GACV,CAAA;GAEJ;GACA,aACG,oBAAC,WAAD;IACI,WAAW,GAAG,EACV,UAAU,QAAQ,QAAQ,EAC9B,CAAC;IACD,OAAM;IACN,MAAM,2BAA2B;IACjC,OAAO;GACV,CAAA;EAEJ;;AAEb;AAEA,MAAM,cAAc"}

package/BannerNotification-D9Sfa2si.cjs

@@ -0,0 +1,156 @@
+const require_Icons = require("./Icons.cjs");
+const require_Typography_Text = require("./Typography/Text.cjs");
+const require_windowSizeProvider = require("./windowSizeProvider-BMaATFiZ.cjs");
+const require_Button = require("./Button.cjs");
+const require_Tooltip = require("./Tooltip.cjs");
+const require_IconButton = require("./IconButton.cjs");
+const require_skeleton = require("./skeleton.cjs");
+let _evolve_ui_theme_system = require("@evolve.ui/theme-system");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/BannerNotification/components/BannerNotificationSkeleton.tsx
+const BannerNotificationSkeleton = () => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "flex justify-center border border-solid border-border-secondary px-sm py-md",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_skeleton.Skeleton, {
+			backgroundColor: "#f3f3f3",
+			className: "col-start-1 col-end-4",
+			foregroundColor: "#ecebeb",
+			height: 40,
+			speed: 2,
+			viewBox: "0 0 600 40",
+			width: 600,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+					cx: "20",
+					cy: "20",
+					r: "20"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+					height: "24",
+					rx: "3",
+					ry: "3",
+					width: "300",
+					x: "60",
+					y: "10"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+					height: "24",
+					rx: "3",
+					ry: "3",
+					width: "200",
+					x: "370",
+					y: "10"
+				})
+			]
+		})
+	});
+};
+//#endregion
+//#region src/BannerNotification/components/CalloutIcon/BannerIcon.tsx
+const BannerIcon = ({ emphasis, status }) => {
+	const isMobile = require_windowSizeProvider.useWindowIsMobile();
+	let icon = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {});
+	switch (status) {
+		case "critical":
+			icon = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icons.Warning, {
+				color: emphasis === "bold" ? "inverse" : "critical",
+				size: isMobile ? "sm" : "md",
+				style: "fill"
+			});
+			break;
+		case "warning":
+			icon = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icons.Warning, {
+				color: emphasis === "bold" ? "primary" : "warning",
+				size: isMobile ? "sm" : "md",
+				style: "fill"
+			});
+			break;
+		default:
+			icon = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icons.Info, {
+				color: emphasis === "bold" ? "inverse" : "info",
+				size: isMobile ? "sm" : "md",
+				style: "fill"
+			});
+			break;
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "pr-xs xsMax:p-xs xsMax:pt-0",
+		children: icon
+	});
+};
+//#endregion
+//#region src/BannerNotification/utils/getRandomTooltipId.ts
+const getRandomTooltipId = () => {
+	return Math.floor(Math.random() * 1e3);
+};
+//#endregion
+//#region src/BannerNotification/BannerNotification.tsx
+const BannerNotification = ({ actionButtonConfig, className, emphasis = "subtle", forceSkeleton, message, onClose, status = "info" }) => {
+	const randomTooltipId = (0, react.useMemo)(() => getRandomTooltipId(), []);
+	const isMobile = require_windowSizeProvider.useWindowIsMobile();
+	const classes = (0, react.useMemo)(() => (0, _evolve_ui_theme_system.cn)(className, "grid w-full grid-cols-[1fr_min-content] items-center p-[10px_16px_16px_8px]", "xsMax:items-start", {
+		"bg-background-critical-light": emphasis === "subtle" && status === "critical",
+		"bg-background-info-light": emphasis === "subtle" && status === "info",
+		"bg-background-warning-light": emphasis === "subtle" && status === "warning"
+	}, {
+		"bg-background-critical-dark": emphasis === "bold" && status === "critical",
+		"bg-background-info-dark": emphasis === "bold" && status === "info",
+		"bg-background-warning-dark": emphasis === "bold" && status === "warning"
+	}), [
+		className,
+		emphasis,
+		status
+	]);
+	if (forceSkeleton) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BannerNotificationSkeleton, {});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: classes,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "col-start-1 col-end-2 mt-[6px] flex items-center justify-center xsMax:items-start",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(BannerIcon, {
+				emphasis,
+				status
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "mr-sm flex flex-row items-center xsMax:flex-col xsMax:items-start",
+				children: [isMobile ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography_Text.BodySecondary, {
+					color: emphasis === "bold" && status !== "warning" ? "inverse" : "primary",
+					children: message
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography_Text.BodyPrimary, {
+					color: emphasis === "bold" && status !== "warning" ? "inverse" : "primary",
+					children: message
+				}), actionButtonConfig && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+					className: "ml-sm xsMax:ml-0 xsMax:mt-sm",
+					onClick: actionButtonConfig.onClick,
+					size: isMobile ? "sm" : "md",
+					style: "primary",
+					variant: "outlined",
+					children: actionButtonConfig.label
+				})]
+			})]
+		}), onClose && status !== "critical" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "relative flex h-full w-[34px] items-center justify-center xsMax:items-start",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.IconButton, {
+				"aria-label": "Close Banner",
+				className: "absolute right-0 col-start-3 col-end-4",
+				"data-tooltip-id": `close-banner-${randomTooltipId}`,
+				icon: require_Icons.Close,
+				onClick: onClose,
+				size: isMobile ? "sm" : "md",
+				style: emphasis === "bold" && status !== "warning" ? "inverse" : "neutral"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Tooltip, {
+				id: `close-banner-${randomTooltipId}`,
+				place: "left",
+				children: "Close Banner"
+			})]
+		})]
+	});
+};
+//#endregion
+Object.defineProperty(exports, "BannerNotification", {
+	enumerable: true,
+	get: function() {
+		return BannerNotification;
+	}
+});
+
+//# sourceMappingURL=BannerNotification-D9Sfa2si.cjs.map

package/BannerNotification-D9Sfa2si.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerNotification-D9Sfa2si.cjs","names":["Skeleton","useWindowIsMobile","Warning","Info","useWindowIsMobile","BodySecondary","BodyPrimary","Button","IconButton","Close","Tooltip"],"sources":["../src/BannerNotification/components/BannerNotificationSkeleton.tsx","../src/BannerNotification/components/CalloutIcon/BannerIcon.tsx","../src/BannerNotification/utils/getRandomTooltipId.ts","../src/BannerNotification/BannerNotification.tsx"],"sourcesContent":["import { Skeleton } from '../../Skeleton/Skeleton';\n\nexport const BannerNotificationSkeleton = () => {\n    return (\n        <div className=\"flex justify-center border border-solid border-border-secondary px-sm py-md\">\n            <Skeleton\n                backgroundColor=\"#f3f3f3\"\n                className=\"col-start-1 col-end-4\"\n                foregroundColor=\"#ecebeb\"\n                height={40}\n                speed={2}\n                viewBox=\"0 0 600 40\"\n                width={600}\n            >\n                <circle\n                    cx=\"20\"\n                    cy=\"20\"\n                    r=\"20\"\n                />\n                <rect\n                    height=\"24\"\n                    rx=\"3\"\n                    ry=\"3\"\n                    width=\"300\"\n                    x=\"60\"\n                    y=\"10\"\n                />\n                <rect\n                    height=\"24\"\n                    rx=\"3\"\n                    ry=\"3\"\n                    width=\"200\"\n                    x=\"370\"\n                    y=\"10\"\n                />\n            </Skeleton>\n        </div>\n    );\n};\n","import { Info, Warning } from '../../../Icons';\nimport { useWindowIsMobile } from '../../../providers';\n\ntype Props = {\n    emphasis?: 'bold' | 'subtle';\n    status: 'info' | 'warning' | 'critical';\n};\n\nexport const BannerIcon = ({ emphasis, status }: Props) => {\n    const isMobile = useWindowIsMobile();\n\n    let icon = <></>;\n\n    switch (status) {\n        case 'critical':\n            icon = (\n                <Warning\n                    color={emphasis === 'bold' ? 'inverse' : 'critical'}\n                    size={isMobile ? 'sm' : 'md'}\n                    style=\"fill\"\n                />\n            );\n            break;\n\n        case 'warning':\n            icon = (\n                <Warning\n                    color={emphasis === 'bold' ? 'primary' : 'warning'}\n                    size={isMobile ? 'sm' : 'md'}\n                    style=\"fill\"\n                />\n            );\n            break;\n\n        case 'info':\n        default:\n            icon = (\n                <Info\n                    color={emphasis === 'bold' ? 'inverse' : 'info'}\n                    size={isMobile ? 'sm' : 'md'}\n                    style=\"fill\"\n                />\n            );\n            break;\n    }\n\n    return <div className=\"pr-xs xsMax:p-xs xsMax:pt-0\">{icon}</div>;\n};\n","export const getRandomTooltipId = () => {\n    return Math.floor(Math.random() * 1000);\n};\n","import { cn } from '@evolve.ui/theme-system';\nimport { ReactNode, useMemo } from 'react';\n\nimport { Button } from '../Button/Button';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Close } from '../Icons';\nimport { useWindowIsMobile } from '../providers';\nimport { Tooltip } from '../Tooltip/Tooltip';\nimport { BodyPrimary, BodySecondary } from '../Typography/Text/Text';\nimport { BannerNotificationSkeleton } from './components/BannerNotificationSkeleton';\nimport { BannerIcon } from './components/CalloutIcon/BannerIcon';\nimport { getRandomTooltipId } from './utils/getRandomTooltipId';\n\ntype Props = {\n    /**\n     * Configuration for the action button.\n     */\n    actionButtonConfig?: {\n        /**\n         * The label for the close button.\n         */\n        label: string;\n\n        /**\n         * Callback function called when the close button is clicked.\n         */\n        onClick: () => void;\n    };\n\n    /**\n     * Additional CSS class name for the component.\n     */\n    className?: string;\n\n    /**\n     * The emphasis style of the component.\n     * - \"bold\": Bold emphasis.\n     * - \"subtle\": Subtle emphasis.\n     */\n    emphasis?: 'bold' | 'subtle';\n\n    /**\n     * Forces the component to render as a skeleton.\n     */\n    forceSkeleton?: boolean;\n\n    /**\n     * The message content of the component.\n     */\n    message?: string | ReactNode;\n\n    /**\n     * Callback function called when the component is closed.\n     */\n    onClose?: () => void;\n\n    /**\n     * The status of the component.\n     * - \"info\": Informational status.\n     * - \"warning\": Warning status.\n     * - \"critical\": Critical status.\n     */\n    status: 'info' | 'warning' | 'critical';\n};\n\nexport const BannerNotification = ({\n    actionButtonConfig,\n    className,\n    emphasis = 'subtle',\n    forceSkeleton,\n    message,\n    onClose,\n    status = 'info',\n}: Props) => {\n    const randomTooltipId = useMemo(() => getRandomTooltipId(), []);\n    const isMobile = useWindowIsMobile();\n\n    const classes = useMemo(\n        () =>\n            cn(\n                className,\n                // GENERAL\n                'grid w-full grid-cols-[1fr_min-content] items-center p-[10px_16px_16px_8px]',\n                // MOBILE\n                'xsMax:items-start',\n                // SUBTLE\n                {\n                    'bg-background-critical-light': emphasis === 'subtle' && status === 'critical',\n                    'bg-background-info-light': emphasis === 'subtle' && status === 'info',\n                    'bg-background-warning-light': emphasis === 'subtle' && status === 'warning',\n                },\n                // BOLD\n                {\n                    'bg-background-critical-dark': emphasis === 'bold' && status === 'critical',\n                    'bg-background-info-dark': emphasis === 'bold' && status === 'info',\n                    'bg-background-warning-dark': emphasis === 'bold' && status === 'warning',\n                }\n            ),\n        [className, emphasis, status]\n    );\n\n    if (forceSkeleton) {\n        return <BannerNotificationSkeleton />;\n    }\n\n    return (\n        <div className={classes}>\n            <div className=\"col-start-1 col-end-2 mt-[6px] flex items-center justify-center xsMax:items-start\">\n                <BannerIcon\n                    emphasis={emphasis}\n                    status={status}\n                />\n                <div className=\"mr-sm flex flex-row items-center xsMax:flex-col xsMax:items-start\">\n                    {isMobile ? (\n                        <BodySecondary color={emphasis === 'bold' && status !== 'warning' ? 'inverse' : 'primary'}>\n                            {message}\n                        </BodySecondary>\n                    ) : (\n                        <BodyPrimary color={emphasis === 'bold' && status !== 'warning' ? 'inverse' : 'primary'}>\n                            {message}\n                        </BodyPrimary>\n                    )}\n                    {actionButtonConfig && (\n                        <Button\n                            className=\"ml-sm xsMax:ml-0 xsMax:mt-sm\"\n                            onClick={actionButtonConfig.onClick}\n                            size={isMobile ? 'sm' : 'md'}\n                            style=\"primary\"\n                            variant=\"outlined\"\n                        >\n                            {actionButtonConfig.label}\n                        </Button>\n                    )}\n                </div>\n            </div>\n            {onClose && status !== 'critical' && (\n                <div className=\"relative flex h-full w-[34px] items-center justify-center xsMax:items-start\">\n                    <IconButton\n                        aria-label=\"Close Banner\"\n                        className=\"absolute right-0 col-start-3 col-end-4\"\n                        data-tooltip-id={`close-banner-${randomTooltipId}`}\n                        icon={Close}\n                        onClick={onClose}\n                        size={isMobile ? 'sm' : 'md'}\n                        style={emphasis === 'bold' && status !== 'warning' ? 'inverse' : 'neutral'}\n                    />\n                    <Tooltip\n                        id={`close-banner-${randomTooltipId}`}\n                        place=\"left\"\n                    >\n                        Close Banner\n                    </Tooltip>\n                </div>\n            )}\n        </div>\n    );\n};\n"],"mappings":"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"}