@evolve.ui/core-components 1.0.0

package/Callout-BiFCfawA.d.cts

@@ -0,0 +1,45 @@
+import { t as Badge } from "./Badge-lOH4Ssq_.cjs";
+import { n as ButtonVariant, t as ButtonStyle } from "./Button.types-CjidejRG.cjs";
+import { ComponentProps, ReactElement, ReactNode } from "react";
+
+//#region src/Callout/Callout.types.d.ts
+type CalloutStatus = 'info' | 'warning' | 'success' | 'critical';
+type CalloutButtonConfig = {
+  onClick: () => void;
+  style?: ButtonStyle;
+  text: string;
+  variant?: ButtonVariant;
+};
+type CalloutProps = {
+  /** Optional Badge component displayed in place of the default status icon. */badge?: ReactElement<ComponentProps<typeof Badge>>;
+  className?: string;
+  message?: string | ReactNode;
+  onClose?: () => void;
+  primaryButton?: CalloutButtonConfig;
+  secondaryButton?: CalloutButtonConfig;
+  status: CalloutStatus;
+  title?: string;
+  /**
+   * Renders the title as a span with H5 styling instead of a semantic heading.
+   */
+  useNonSemanticHTML?: boolean;
+};
+//#endregion
+//#region src/Callout/Callout.d.ts
+declare const Callout: {
+  ({
+    badge,
+    className,
+    message,
+    onClose,
+    primaryButton,
+    secondaryButton,
+    status,
+    title,
+    useNonSemanticHTML
+  }: CalloutProps): import("react/jsx-runtime").JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { CalloutStatus as i, CalloutButtonConfig as n, CalloutProps as r, Callout as t };
+//# sourceMappingURL=Callout-BiFCfawA.d.cts.map

package/Callout-BiFCfawA.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Callout-BiFCfawA.d.cts","names":[],"sources":["../src/Callout/Callout.types.ts","../src/Callout/Callout.tsx"],"mappings":";;;;;KAKY,aAAA;AAAA,KAEA,mBAAA;EACR,OAAA;EACA,KAAA,GAAQ,WAAA;EACR,IAAA;EACA,OAAA,GAAU,aAAa;AAAA;AAAA,KAGf,YAAA;EAPmB,8EAS3B,KAAA,GAAQ,YAAA,CAAa,cAAA,QAAsB,KAAA;EAC3C,SAAA;EACA,OAAA,YAAmB,SAAA;EACnB,OAAA;EACA,aAAA,GAAgB,mBAAA;EAChB,eAAA,GAAkB,mBAAA;EAClB,MAAA,EAAQ,aAAA;EACR,KAAA;EAZuB;AAAA;AAG3B;EAaI,kBAAA;AAAA;;;cCRS,OAAA;EAAA;;;;;;;;;;KAUV,YAAA,+BAAY,GAAA,CAAA,OAAA"}

package/Callout-DrWwRGi4.cjs

@@ -0,0 +1,132 @@
+const require_CheckCircle = require("./CheckCircle-BjBbSga6.cjs");
+const require_Icons = require("./Icons.cjs");
+const require_Typography_Text = require("./Typography/Text.cjs");
+const require_Button = require("./Button.cjs");
+const require_IconButton = require("./IconButton.cjs");
+let _evolve_ui_theme_system = require("@evolve.ui/theme-system");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/Callout/components/CalloutIcon/CalloutIcon.tsx
+const CalloutIcon = ({ status }) => {
+	if (status === "critical") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "col-start-1 row-start-1",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icons.Warning, {
+			color: "critical",
+			size: "md",
+			style: "fill"
+		})
+	});
+	if (status === "success") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "col-start-1 row-start-1",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CheckCircle.CheckCircle, {
+			color: "success",
+			style: "fill"
+		})
+	});
+	if (status === "warning") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "col-start-1 row-start-1",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icons.Warning, {
+			color: "warning",
+			size: "md",
+			style: "fill"
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "col-start-1 row-start-1",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icons.Info, {
+			color: "info",
+			size: "md",
+			style: "fill"
+		})
+	});
+};
+CalloutIcon.displayName = "CalloutIcon";
+//#endregion
+//#region src/Callout/Callout.tsx
+const statusClasses = {
+	critical: "border-border-critical bg-background-critical-light",
+	info: "border-border-info bg-background-info-light",
+	success: "border-border-success bg-background-success-light",
+	warning: "border-border-warning bg-background-warning-light"
+};
+const Callout = ({ badge = void 0, className, message, onClose, primaryButton, secondaryButton, status = "info", title, useNonSemanticHTML = false }) => {
+	const hasActions = Boolean(primaryButton) || Boolean(secondaryButton);
+	const hasCloseButton = Boolean(onClose) && status !== "critical";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, _evolve_ui_theme_system.cn)("grid gap-x-sm rounded-input border p-md", "grid-cols-[min-content_1fr_min-content]", hasCloseButton && "grid-cols-[min-content_1fr_min-content_min-content]", "smMax:grid-cols-[min-content_1fr_min-content]", statusClasses[status], className),
+		"data-hui-id": "Callout",
+		role: status === "critical" ? "alert" : void 0,
+		children: [
+			badge ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalloutIcon, { status }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col justify-center",
+				children: [
+					title && (useNonSemanticHTML ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "hui-text-h5 col-start-2 mb-2xs text-text-primary",
+						"data-testid": "callout-title",
+						children: title
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography_Text.H5, {
+						className: "col-start-2 mb-2xs",
+						"data-testid": "callout-title",
+						children: title
+					})),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography_Text.BodySecondary, {
+						className: "col-start-2 min-w-0 break-words",
+						children: message
+					}),
+					hasActions && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "col-start-2 mt-sm hidden items-center smMax:flex",
+						children: [primaryButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+							className: "mr-sm",
+							onClick: primaryButton.onClick,
+							size: "sm",
+							style: primaryButton.style ?? "primary",
+							variant: primaryButton.variant ?? "outlined",
+							children: primaryButton.text
+						}), secondaryButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+							className: "mr-sm",
+							onClick: secondaryButton.onClick,
+							size: "sm",
+							style: secondaryButton.style ?? "primary",
+							variant: secondaryButton.variant ?? "transparent",
+							children: secondaryButton.text
+						})]
+					})
+				]
+			}),
+			hasActions && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex h-full items-start gap-sm smMax:hidden",
+				children: [primaryButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+					"data-testid": "primary-button",
+					onClick: primaryButton.onClick,
+					size: "sm",
+					style: primaryButton.style ?? "primary",
+					variant: primaryButton.variant ?? "outlined",
+					children: primaryButton.text
+				}), secondaryButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+					"data-testid": "secondary-button",
+					onClick: secondaryButton.onClick,
+					size: "sm",
+					style: secondaryButton.style ?? "primary",
+					variant: secondaryButton.variant ?? "transparent",
+					children: secondaryButton.text
+				})]
+			}),
+			hasCloseButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.IconButton, {
+				"aria-label": "Close",
+				icon: require_Icons.Close,
+				onClick: onClose,
+				size: "sm"
+			})
+		]
+	});
+};
+Callout.displayName = "Callout";
+//#endregion
+Object.defineProperty(exports, "Callout", {
+	enumerable: true,
+	get: function() {
+		return Callout;
+	}
+});
+
+//# sourceMappingURL=Callout-DrWwRGi4.cjs.map

package/Callout-DrWwRGi4.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Callout-DrWwRGi4.cjs","names":["Warning","CheckCircle","Info","H5","BodySecondary","Button","IconButton","Close"],"sources":["../src/Callout/components/CalloutIcon/CalloutIcon.tsx","../src/Callout/Callout.tsx"],"sourcesContent":["import type { CalloutStatus } from '../../Callout.types';\n\nimport { CheckCircle, Info, Warning } from '../../../Icons';\n\ntype CalloutIconProps = {\n    status: CalloutStatus;\n};\n\nexport const CalloutIcon = ({ status }: CalloutIconProps) => {\n    if (status === 'critical') {\n        return (\n            <div className=\"col-start-1 row-start-1\">\n                <Warning\n                    color=\"critical\"\n                    size=\"md\"\n                    style=\"fill\"\n                />\n            </div>\n        );\n    }\n\n    if (status === 'success') {\n        return (\n            <div className=\"col-start-1 row-start-1\">\n                <CheckCircle\n                    color=\"success\"\n                    style=\"fill\"\n                />\n            </div>\n        );\n    }\n\n    if (status === 'warning') {\n        return (\n            <div className=\"col-start-1 row-start-1\">\n                <Warning\n                    color=\"warning\"\n                    size=\"md\"\n                    style=\"fill\"\n                />\n            </div>\n        );\n    }\n\n    return (\n        <div className=\"col-start-1 row-start-1\">\n            <Info\n                color=\"info\"\n                size=\"md\"\n                style=\"fill\"\n            />\n        </div>\n    );\n};\n\nCalloutIcon.displayName = 'CalloutIcon';\n","'use client';\n\nimport { cn } from '@evolve.ui/theme-system';\n\nimport type { CalloutProps, CalloutStatus } from './Callout.types';\n\nimport { Button } from '../Button/Button';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Close } from '../Icons';\nimport { BodySecondary, H5 } from '../Typography/Text/Text';\nimport { CalloutIcon } from './components/CalloutIcon/CalloutIcon';\n\nconst statusClasses = {\n    critical: 'border-border-critical bg-background-critical-light',\n    info: 'border-border-info bg-background-info-light',\n    success: 'border-border-success bg-background-success-light',\n    warning: 'border-border-warning bg-background-warning-light',\n} satisfies Record<CalloutStatus, string>;\n\nexport const Callout = ({\n    badge = undefined,\n    className,\n    message,\n    onClose,\n    primaryButton,\n    secondaryButton,\n    status = 'info',\n    title,\n    useNonSemanticHTML = false,\n}: CalloutProps) => {\n    const hasActions = Boolean(primaryButton) || Boolean(secondaryButton);\n    const hasCloseButton = Boolean(onClose) && status !== 'critical';\n\n    return (\n        <div\n            className={cn(\n                'grid gap-x-sm rounded-input border p-md',\n                'grid-cols-[min-content_1fr_min-content]',\n                hasCloseButton && 'grid-cols-[min-content_1fr_min-content_min-content]',\n                'smMax:grid-cols-[min-content_1fr_min-content]',\n                statusClasses[status],\n                className\n            )}\n            data-hui-id=\"Callout\"\n            role={status === 'critical' ? 'alert' : undefined}\n        >\n            {badge ?? <CalloutIcon status={status} />}\n\n            <div className=\"flex flex-col justify-center\">\n                {title &&\n                    (useNonSemanticHTML ? (\n                        <span\n                            className=\"hui-text-h5 col-start-2 mb-2xs text-text-primary\"\n                            data-testid=\"callout-title\"\n                        >\n                            {title}\n                        </span>\n                    ) : (\n                        <H5\n                            className=\"col-start-2 mb-2xs\"\n                            data-testid=\"callout-title\"\n                        >\n                            {title}\n                        </H5>\n                    ))}\n\n                <BodySecondary className=\"col-start-2 min-w-0 break-words\">{message}</BodySecondary>\n\n                {hasActions && (\n                    <div className=\"col-start-2 mt-sm hidden items-center smMax:flex\">\n                        {primaryButton && (\n                            <Button\n                                className=\"mr-sm\"\n                                onClick={primaryButton.onClick}\n                                size=\"sm\"\n                                style={primaryButton.style ?? 'primary'}\n                                variant={primaryButton.variant ?? 'outlined'}\n                            >\n                                {primaryButton.text}\n                            </Button>\n                        )}\n                        {secondaryButton && (\n                            <Button\n                                className=\"mr-sm\"\n                                onClick={secondaryButton.onClick}\n                                size=\"sm\"\n                                style={secondaryButton.style ?? 'primary'}\n                                variant={secondaryButton.variant ?? 'transparent'}\n                            >\n                                {secondaryButton.text}\n                            </Button>\n                        )}\n                    </div>\n                )}\n            </div>\n\n            {hasActions && (\n                <div className=\"flex h-full items-start gap-sm smMax:hidden\">\n                    {primaryButton && (\n                        <Button\n                            data-testid=\"primary-button\"\n                            onClick={primaryButton.onClick}\n                            size=\"sm\"\n                            style={primaryButton.style ?? 'primary'}\n                            variant={primaryButton.variant ?? 'outlined'}\n                        >\n                            {primaryButton.text}\n                        </Button>\n                    )}\n                    {secondaryButton && (\n                        <Button\n                            data-testid=\"secondary-button\"\n                            onClick={secondaryButton.onClick}\n                            size=\"sm\"\n                            style={secondaryButton.style ?? 'primary'}\n                            variant={secondaryButton.variant ?? 'transparent'}\n                        >\n                            {secondaryButton.text}\n                        </Button>\n                    )}\n                </div>\n            )}\n\n            {hasCloseButton && (\n                <IconButton\n                    aria-label=\"Close\"\n                    icon={Close}\n                    onClick={onClose}\n                    size=\"sm\"\n                />\n            )}\n        </div>\n    );\n};\n\nCallout.displayName = 'Callout';\n"],"mappings":"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"}

package/Callout-Olv0CM82.mjs

@@ -0,0 +1,127 @@
+import { t as CheckCircle } from "./CheckCircle-BcTMEm4l.mjs";
+import { Close, Info, Warning } from "./Icons.mjs";
+import { BodySecondary, H5 } from "./Typography/Text.mjs";
+import { Button } from "./Button.mjs";
+import { IconButton } from "./IconButton.mjs";
+import { cn } from "@evolve.ui/theme-system";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Callout/components/CalloutIcon/CalloutIcon.tsx
+const CalloutIcon = ({ status }) => {
+	if (status === "critical") return /* @__PURE__ */ jsx("div", {
+		className: "col-start-1 row-start-1",
+		children: /* @__PURE__ */ jsx(Warning, {
+			color: "critical",
+			size: "md",
+			style: "fill"
+		})
+	});
+	if (status === "success") return /* @__PURE__ */ jsx("div", {
+		className: "col-start-1 row-start-1",
+		children: /* @__PURE__ */ jsx(CheckCircle, {
+			color: "success",
+			style: "fill"
+		})
+	});
+	if (status === "warning") return /* @__PURE__ */ jsx("div", {
+		className: "col-start-1 row-start-1",
+		children: /* @__PURE__ */ jsx(Warning, {
+			color: "warning",
+			size: "md",
+			style: "fill"
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "col-start-1 row-start-1",
+		children: /* @__PURE__ */ jsx(Info, {
+			color: "info",
+			size: "md",
+			style: "fill"
+		})
+	});
+};
+CalloutIcon.displayName = "CalloutIcon";
+//#endregion
+//#region src/Callout/Callout.tsx
+const statusClasses = {
+	critical: "border-border-critical bg-background-critical-light",
+	info: "border-border-info bg-background-info-light",
+	success: "border-border-success bg-background-success-light",
+	warning: "border-border-warning bg-background-warning-light"
+};
+const Callout = ({ badge = void 0, className, message, onClose, primaryButton, secondaryButton, status = "info", title, useNonSemanticHTML = false }) => {
+	const hasActions = Boolean(primaryButton) || Boolean(secondaryButton);
+	const hasCloseButton = Boolean(onClose) && status !== "critical";
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("grid gap-x-sm rounded-input border p-md", "grid-cols-[min-content_1fr_min-content]", hasCloseButton && "grid-cols-[min-content_1fr_min-content_min-content]", "smMax:grid-cols-[min-content_1fr_min-content]", statusClasses[status], className),
+		"data-hui-id": "Callout",
+		role: status === "critical" ? "alert" : void 0,
+		children: [
+			badge ?? /* @__PURE__ */ jsx(CalloutIcon, { status }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col justify-center",
+				children: [
+					title && (useNonSemanticHTML ? /* @__PURE__ */ jsx("span", {
+						className: "hui-text-h5 col-start-2 mb-2xs text-text-primary",
+						"data-testid": "callout-title",
+						children: title
+					}) : /* @__PURE__ */ jsx(H5, {
+						className: "col-start-2 mb-2xs",
+						"data-testid": "callout-title",
+						children: title
+					})),
+					/* @__PURE__ */ jsx(BodySecondary, {
+						className: "col-start-2 min-w-0 break-words",
+						children: message
+					}),
+					hasActions && /* @__PURE__ */ jsxs("div", {
+						className: "col-start-2 mt-sm hidden items-center smMax:flex",
+						children: [primaryButton && /* @__PURE__ */ jsx(Button, {
+							className: "mr-sm",
+							onClick: primaryButton.onClick,
+							size: "sm",
+							style: primaryButton.style ?? "primary",
+							variant: primaryButton.variant ?? "outlined",
+							children: primaryButton.text
+						}), secondaryButton && /* @__PURE__ */ jsx(Button, {
+							className: "mr-sm",
+							onClick: secondaryButton.onClick,
+							size: "sm",
+							style: secondaryButton.style ?? "primary",
+							variant: secondaryButton.variant ?? "transparent",
+							children: secondaryButton.text
+						})]
+					})
+				]
+			}),
+			hasActions && /* @__PURE__ */ jsxs("div", {
+				className: "flex h-full items-start gap-sm smMax:hidden",
+				children: [primaryButton && /* @__PURE__ */ jsx(Button, {
+					"data-testid": "primary-button",
+					onClick: primaryButton.onClick,
+					size: "sm",
+					style: primaryButton.style ?? "primary",
+					variant: primaryButton.variant ?? "outlined",
+					children: primaryButton.text
+				}), secondaryButton && /* @__PURE__ */ jsx(Button, {
+					"data-testid": "secondary-button",
+					onClick: secondaryButton.onClick,
+					size: "sm",
+					style: secondaryButton.style ?? "primary",
+					variant: secondaryButton.variant ?? "transparent",
+					children: secondaryButton.text
+				})]
+			}),
+			hasCloseButton && /* @__PURE__ */ jsx(IconButton, {
+				"aria-label": "Close",
+				icon: Close,
+				onClick: onClose,
+				size: "sm"
+			})
+		]
+	});
+};
+Callout.displayName = "Callout";
+//#endregion
+export { Callout as t };
+
+//# sourceMappingURL=Callout-Olv0CM82.mjs.map

package/Callout-Olv0CM82.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Callout-Olv0CM82.mjs","names":[],"sources":["../src/Callout/components/CalloutIcon/CalloutIcon.tsx","../src/Callout/Callout.tsx"],"sourcesContent":["import type { CalloutStatus } from '../../Callout.types';\n\nimport { CheckCircle, Info, Warning } from '../../../Icons';\n\ntype CalloutIconProps = {\n    status: CalloutStatus;\n};\n\nexport const CalloutIcon = ({ status }: CalloutIconProps) => {\n    if (status === 'critical') {\n        return (\n            <div className=\"col-start-1 row-start-1\">\n                <Warning\n                    color=\"critical\"\n                    size=\"md\"\n                    style=\"fill\"\n                />\n            </div>\n        );\n    }\n\n    if (status === 'success') {\n        return (\n            <div className=\"col-start-1 row-start-1\">\n                <CheckCircle\n                    color=\"success\"\n                    style=\"fill\"\n                />\n            </div>\n        );\n    }\n\n    if (status === 'warning') {\n        return (\n            <div className=\"col-start-1 row-start-1\">\n                <Warning\n                    color=\"warning\"\n                    size=\"md\"\n                    style=\"fill\"\n                />\n            </div>\n        );\n    }\n\n    return (\n        <div className=\"col-start-1 row-start-1\">\n            <Info\n                color=\"info\"\n                size=\"md\"\n                style=\"fill\"\n            />\n        </div>\n    );\n};\n\nCalloutIcon.displayName = 'CalloutIcon';\n","'use client';\n\nimport { cn } from '@evolve.ui/theme-system';\n\nimport type { CalloutProps, CalloutStatus } from './Callout.types';\n\nimport { Button } from '../Button/Button';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Close } from '../Icons';\nimport { BodySecondary, H5 } from '../Typography/Text/Text';\nimport { CalloutIcon } from './components/CalloutIcon/CalloutIcon';\n\nconst statusClasses = {\n    critical: 'border-border-critical bg-background-critical-light',\n    info: 'border-border-info bg-background-info-light',\n    success: 'border-border-success bg-background-success-light',\n    warning: 'border-border-warning bg-background-warning-light',\n} satisfies Record<CalloutStatus, string>;\n\nexport const Callout = ({\n    badge = undefined,\n    className,\n    message,\n    onClose,\n    primaryButton,\n    secondaryButton,\n    status = 'info',\n    title,\n    useNonSemanticHTML = false,\n}: CalloutProps) => {\n    const hasActions = Boolean(primaryButton) || Boolean(secondaryButton);\n    const hasCloseButton = Boolean(onClose) && status !== 'critical';\n\n    return (\n        <div\n            className={cn(\n                'grid gap-x-sm rounded-input border p-md',\n                'grid-cols-[min-content_1fr_min-content]',\n                hasCloseButton && 'grid-cols-[min-content_1fr_min-content_min-content]',\n                'smMax:grid-cols-[min-content_1fr_min-content]',\n                statusClasses[status],\n                className\n            )}\n            data-hui-id=\"Callout\"\n            role={status === 'critical' ? 'alert' : undefined}\n        >\n            {badge ?? <CalloutIcon status={status} />}\n\n            <div className=\"flex flex-col justify-center\">\n                {title &&\n                    (useNonSemanticHTML ? (\n                        <span\n                            className=\"hui-text-h5 col-start-2 mb-2xs text-text-primary\"\n                            data-testid=\"callout-title\"\n                        >\n                            {title}\n                        </span>\n                    ) : (\n                        <H5\n                            className=\"col-start-2 mb-2xs\"\n                            data-testid=\"callout-title\"\n                        >\n                            {title}\n                        </H5>\n                    ))}\n\n                <BodySecondary className=\"col-start-2 min-w-0 break-words\">{message}</BodySecondary>\n\n                {hasActions && (\n                    <div className=\"col-start-2 mt-sm hidden items-center smMax:flex\">\n                        {primaryButton && (\n                            <Button\n                                className=\"mr-sm\"\n                                onClick={primaryButton.onClick}\n                                size=\"sm\"\n                                style={primaryButton.style ?? 'primary'}\n                                variant={primaryButton.variant ?? 'outlined'}\n                            >\n                                {primaryButton.text}\n                            </Button>\n                        )}\n                        {secondaryButton && (\n                            <Button\n                                className=\"mr-sm\"\n                                onClick={secondaryButton.onClick}\n                                size=\"sm\"\n                                style={secondaryButton.style ?? 'primary'}\n                                variant={secondaryButton.variant ?? 'transparent'}\n                            >\n                                {secondaryButton.text}\n                            </Button>\n                        )}\n                    </div>\n                )}\n            </div>\n\n            {hasActions && (\n                <div className=\"flex h-full items-start gap-sm smMax:hidden\">\n                    {primaryButton && (\n                        <Button\n                            data-testid=\"primary-button\"\n                            onClick={primaryButton.onClick}\n                            size=\"sm\"\n                            style={primaryButton.style ?? 'primary'}\n                            variant={primaryButton.variant ?? 'outlined'}\n                        >\n                            {primaryButton.text}\n                        </Button>\n                    )}\n                    {secondaryButton && (\n                        <Button\n                            data-testid=\"secondary-button\"\n                            onClick={secondaryButton.onClick}\n                            size=\"sm\"\n                            style={secondaryButton.style ?? 'primary'}\n                            variant={secondaryButton.variant ?? 'transparent'}\n                        >\n                            {secondaryButton.text}\n                        </Button>\n                    )}\n                </div>\n            )}\n\n            {hasCloseButton && (\n                <IconButton\n                    aria-label=\"Close\"\n                    icon={Close}\n                    onClick={onClose}\n                    size=\"sm\"\n                />\n            )}\n        </div>\n    );\n};\n\nCallout.displayName = 'Callout';\n"],"mappings":";;;;;;;;AAQA,MAAa,eAAe,EAAE,aAA+B;CACzD,IAAI,WAAW,YACX,OACI,oBAAC,OAAD;EAAK,WAAU;YACX,oBAAC,SAAD;GACI,OAAM;GACN,MAAK;GACL,OAAM;EACT,CAAA;CACA,CAAA;CAIb,IAAI,WAAW,WACX,OACI,oBAAC,OAAD;EAAK,WAAU;YACX,oBAAC,aAAD;GACI,OAAM;GACN,OAAM;EACT,CAAA;CACA,CAAA;CAIb,IAAI,WAAW,WACX,OACI,oBAAC,OAAD;EAAK,WAAU;YACX,oBAAC,SAAD;GACI,OAAM;GACN,MAAK;GACL,OAAM;EACT,CAAA;CACA,CAAA;CAIb,OACI,oBAAC,OAAD;EAAK,WAAU;YACX,oBAAC,MAAD;GACI,OAAM;GACN,MAAK;GACL,OAAM;EACT,CAAA;CACA,CAAA;AAEb;AAEA,YAAY,cAAc;;;AC3C1B,MAAM,gBAAgB;CAClB,UAAU;CACV,MAAM;CACN,SAAS;CACT,SAAS;AACb;AAEA,MAAa,WAAW,EACpB,QAAQ,KAAA,GACR,WACA,SACA,SACA,eACA,iBACA,SAAS,QACT,OACA,qBAAqB,YACL;CAChB,MAAM,aAAa,QAAQ,aAAa,KAAK,QAAQ,eAAe;CACpE,MAAM,iBAAiB,QAAQ,OAAO,KAAK,WAAW;CAEtD,OACI,qBAAC,OAAD;EACI,WAAW,GACP,2CACA,2CACA,kBAAkB,uDAClB,iDACA,cAAc,SACd,SACJ;EACA,eAAY;EACZ,MAAM,WAAW,aAAa,UAAU,KAAA;YAV5C;GAYK,SAAS,oBAAC,aAAD,EAAqB,OAAS,CAAA;GAExC,qBAAC,OAAD;IAAK,WAAU;cAAf;KACK,UACI,qBACG,oBAAC,QAAD;MACI,WAAU;MACV,eAAY;gBAEX;KACC,CAAA,IAEN,oBAAC,IAAD;MACI,WAAU;MACV,eAAY;gBAEX;KACD,CAAA;KAGZ,oBAAC,eAAD;MAAe,WAAU;gBAAmC;KAAuB,CAAA;KAElF,cACG,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACK,iBACG,oBAAC,QAAD;OACI,WAAU;OACV,SAAS,cAAc;OACvB,MAAK;OACL,OAAO,cAAc,SAAS;OAC9B,SAAS,cAAc,WAAW;iBAEjC,cAAc;MACX,CAAA,GAEX,mBACG,oBAAC,QAAD;OACI,WAAU;OACV,SAAS,gBAAgB;OACzB,MAAK;OACL,OAAO,gBAAgB,SAAS;OAChC,SAAS,gBAAgB,WAAW;iBAEnC,gBAAgB;MACb,CAAA,CAEX;;IAER;;GAEJ,cACG,qBAAC,OAAD;IAAK,WAAU;cAAf,CACK,iBACG,oBAAC,QAAD;KACI,eAAY;KACZ,SAAS,cAAc;KACvB,MAAK;KACL,OAAO,cAAc,SAAS;KAC9B,SAAS,cAAc,WAAW;eAEjC,cAAc;IACX,CAAA,GAEX,mBACG,oBAAC,QAAD;KACI,eAAY;KACZ,SAAS,gBAAgB;KACzB,MAAK;KACL,OAAO,gBAAgB,SAAS;KAChC,SAAS,gBAAgB,WAAW;eAEnC,gBAAgB;IACb,CAAA,CAEX;;GAGR,kBACG,oBAAC,YAAD;IACI,cAAW;IACX,MAAM;IACN,SAAS;IACT,MAAK;GACR,CAAA;EAEJ;;AAEb;AAEA,QAAQ,cAAc"}

package/Callout.cjs

@@ -0,0 +1,8 @@
+'use client';
+"use client";
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_Callout = require("./Callout-DrWwRGi4.cjs");
+exports.Callout = require_Callout.Callout;

package/Callout.d.cts

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

package/Callout.d.mts

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

package/Callout.mjs

@@ -0,0 +1,4 @@
+'use client';
+"use client";
+import { t as Callout } from "./Callout-Olv0CM82.mjs";
+export { Callout };

package/CardGrid-BhfrwrN0.d.cts

@@ -0,0 +1,72 @@
+import { t as SharedProps } from "./sharedProps-DPhLON6O.cjs";
+
+//#region src/Card/CardGrid.d.ts
+type SpacingToken = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+type Props<CardData, KeyType extends string | number> = {
+  /**
+   * The data to pass to the card components.
+   */
+  cardData: Record<KeyType, CardData>;
+  /**
+   * Which cards to render. These should all be keys in `cardData`.
+   *
+   * If this is empty, then `skeletonCardCount` skeleton cards will be rendered (if set).
+   */
+  cards: KeyType[];
+  className?: string;
+  /**
+   * The number of columns to display at each breakpoint.
+   *
+   * @default { xs: 2, sm: 3, md: 4, lg: 4, xl: 4 }
+   */
+  colsByBreakpoint: {
+    xs: number;
+  } & { [key in 'sm' | 'md' | 'lg' | 'xl']?: number };
+  /**
+   * The gap between cards at each breakpoint.
+   * gapsByBreakpoint: { xs: 'xs' } means that the gap at xsMax breakpoint is 8px.
+   *
+   * @default { xs: 'sm', sm: 'sm', md: 'md', lg: 'md', xl: 'md' }
+   */
+  gapsByBreakpoint: {
+    lg?: SpacingToken;
+    md?: SpacingToken;
+    sm?: SpacingToken;
+    xl?: SpacingToken;
+    xs?: SpacingToken;
+  };
+  /**
+   * Optional callback function to call when a card is clicked.
+   * The card data is passed to the function.
+   * Note: This should be handled by specific clickable elements within the card (links, buttons)
+   * rather than the card wrapper itself.
+   */
+  onCardClick?: (cardData: CardData) => void;
+  /**
+   * The function to call when a card becomes visible in the viewport.
+   * This callback fires only once per card when it first becomes visible.
+   * The card data is passed to the function.
+   */
+  onCardVisible?: (cardData: CardData) => void;
+  /**
+   * The number of skeleton cards to render.
+   *
+   * This is ignored if `cards` is nonempty.
+   */
+  skeletonCardCount?: number;
+} & SharedProps<CardData>;
+declare const CardGrid: <CardData, KeyType extends string | number>({
+  card: Card,
+  cardData,
+  cards,
+  className,
+  colsByBreakpoint,
+  forceSkeleton,
+  gapsByBreakpoint,
+  onCardClick,
+  onCardVisible,
+  skeletonCardCount
+}: Props<CardData, KeyType>) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { CardGrid as t };
+//# sourceMappingURL=CardGrid-BhfrwrN0.d.cts.map

package/CardGrid-BhfrwrN0.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardGrid-BhfrwrN0.d.cts","names":[],"sources":["../src/Card/CardGrid.tsx"],"mappings":";;;KAOK,YAAA;AAAA,KAEA,KAAA;EAFA;;;EAMD,QAAA,EAAU,MAAA,CAAO,OAAA,EAAS,QAAA;EANb;AAAA;;;;EAYb,KAAA,EAAO,OAAA;EACP,SAAA;EADO;;;;;EAOP,gBAAA;IAAoB,EAAA;EAAA;EAsCT;;;;;;EA/BX,gBAAA;IAEI,EAAA,GAAK,YAAA;IAEL,EAAA,GAAK,YAAA;IAEL,EAAA,GAAK,YAAA;IAEL,EAAA,GAAK,YAAA;IAEL,EAAA,GAAK,YAAA;EAAA;EAjB6B;;;;;;EAyBtC,WAAA,IAAe,QAAA,EAAU,QAAA;EAZhB;;;;;EAkBT,aAAA,IAAiB,QAAA,EAAU,QAAA;EANF;;;;;EAYzB,iBAAA;AAAA,IACA,WAAA,CAAY,QAAA;AAAA,cAEH,QAAA;EAAuD,IAAA,EAAA,IAAA;EAAA,QAAA;EAAA,KAAA;EAAA,SAAA;EAAA,gBAAA;EAAA,aAAA;EAAA,gBAAA;EAAA,WAAA;EAAA,aAAA;EAAA;AAAA,GAyBjE,KAAA,CAAM,QAAA,EAAU,OAAA,kCAAQ,GAAA,CAAA,OAAA"}

package/CardGrid-BpX_oOS4.mjs

@@ -0,0 +1,175 @@
+import { t as nodeEnv } from "./nodeEnv-B4v61vkJ.mjs";
+import { t as useIntersectionObserver } from "./useIntersectionObserver-Q6Y3c3sz.mjs";
+import { cn } from "@evolve.ui/theme-system";
+import { useCallback, useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Card/hooks/useCardVisibilityTracking.ts
+/**
+* Hook that tracks when a card becomes visible in the viewport
+* and fires a callback only once per card.
+*
+* @param onVisible - Callback function to call when a card becomes visible
+* @param options - Configuration options for visibility detection
+* @returns A function that returns a ref callback for a specific card key
+*
+* @example
+* ```tsx
+* const getVisibilityRef = useCardVisibilityTracking(
+*   (cardKey) => trackItemVisible(cardKey),
+*   { threshold: 0.5 }
+* );
+*
+* <Card visibilityRef={getVisibilityRef('card-123')} />
+* ```
+*/
+const useCardVisibilityTracking = (onVisible, options = {}) => {
+	const { threshold = .5 } = options;
+	const seenCardsRef = useRef(/* @__PURE__ */ new Set());
+	const { observe } = useIntersectionObserver(useCallback((entries) => {
+		entries.forEach((entry) => {
+			if (entry.isIntersecting && entry.intersectionRatio >= threshold) {
+				const cardKey = entry.target.getAttribute("data-card-key");
+				if (cardKey && !seenCardsRef.current.has(cardKey)) {
+					seenCardsRef.current.add(cardKey);
+					onVisible(cardKey);
+				}
+			}
+		});
+	}, [onVisible, threshold]), { threshold });
+	return useCallback((cardKey) => (element) => {
+		if (element) {
+			element.setAttribute("data-card-key", String(cardKey));
+			observe(element);
+		}
+	}, [observe]);
+};
+//#endregion
+//#region src/Card/CardGrid.tsx
+const CardGrid = ({ card: Card, cardData, cards, className, colsByBreakpoint = {
+	lg: 4,
+	md: 4,
+	sm: 3,
+	xl: 4,
+	xs: 2
+}, forceSkeleton = false, gapsByBreakpoint = {
+	lg: "md",
+	md: "md",
+	sm: "sm",
+	xl: "md",
+	xs: "sm"
+}, onCardClick, onCardVisible, skeletonCardCount = 0 }) => {
+	const doesGridHaveLoadedData = cards.length > 0 && Object.keys(cardData).length > 0 && !forceSkeleton;
+	const gridClasses = useMemo(() => cn("grid", `grid-cols-${colsByBreakpoint.xs}`, `gap-${gapsByBreakpoint.xs}`, {
+		"lgMax:gap-lg": gapsByBreakpoint.lg === "lg",
+		"lgMax:gap-md": gapsByBreakpoint.lg === "md",
+		"lgMax:gap-sm": gapsByBreakpoint.lg === "sm",
+		"lgMax:gap-xl": gapsByBreakpoint.lg === "xl",
+		"lgMax:gap-xs": gapsByBreakpoint.lg === "xs",
+		"lgMax:grid-cols-1": colsByBreakpoint.lg === 1,
+		"lgMax:grid-cols-2": colsByBreakpoint.lg === 2,
+		"lgMax:grid-cols-3": colsByBreakpoint.lg === 3,
+		"lgMax:grid-cols-4": colsByBreakpoint.lg === 4,
+		"lgMax:grid-cols-5": colsByBreakpoint.lg === 5,
+		"lgMax:grid-cols-6": colsByBreakpoint.lg === 6,
+		"lgMin:gap-lg": gapsByBreakpoint.lg === "lg",
+		"lgMin:gap-md": gapsByBreakpoint.lg === "md",
+		"lgMin:gap-sm": gapsByBreakpoint.lg === "sm",
+		"lgMin:gap-xl": gapsByBreakpoint.lg === "xl",
+		"lgMin:gap-xs": gapsByBreakpoint.lg === "xs",
+		"lgMin:grid-cols-1": colsByBreakpoint.lg === 1,
+		"lgMin:grid-cols-2": colsByBreakpoint.lg === 2,
+		"lgMin:grid-cols-3": colsByBreakpoint.lg === 3,
+		"lgMin:grid-cols-4": colsByBreakpoint.lg === 4,
+		"lgMin:grid-cols-5": colsByBreakpoint.lg === 5,
+		"lgMin:grid-cols-6": colsByBreakpoint.lg === 6,
+		"mdMax:gap-lg": gapsByBreakpoint.md === "lg",
+		"mdMax:gap-md": gapsByBreakpoint.md === "md",
+		"mdMax:gap-sm": gapsByBreakpoint.md === "sm",
+		"mdMax:gap-xl": gapsByBreakpoint.md === "xl",
+		"mdMax:gap-xs": gapsByBreakpoint.md === "xs",
+		"mdMax:grid-cols-1": colsByBreakpoint.md === 1,
+		"mdMax:grid-cols-2": colsByBreakpoint.md === 2,
+		"mdMax:grid-cols-3": colsByBreakpoint.md === 3,
+		"mdMax:grid-cols-4": colsByBreakpoint.md === 4,
+		"mdMax:grid-cols-5": colsByBreakpoint.md === 5,
+		"mdMax:grid-cols-6": colsByBreakpoint.md === 6,
+		"smMax:gap-lg": gapsByBreakpoint.sm === "lg",
+		"smMax:gap-md": gapsByBreakpoint.sm === "md",
+		"smMax:gap-sm": gapsByBreakpoint.sm === "sm",
+		"smMax:gap-xl": gapsByBreakpoint.sm === "xl",
+		"smMax:gap-xs": gapsByBreakpoint.sm === "xs",
+		"smMax:grid-cols-1": colsByBreakpoint.sm === 1,
+		"smMax:grid-cols-2": colsByBreakpoint.sm === 2,
+		"smMax:grid-cols-3": colsByBreakpoint.sm === 3,
+		"smMax:grid-cols-4": colsByBreakpoint.sm === 4,
+		"smMax:grid-cols-5": colsByBreakpoint.sm === 5,
+		"smMax:grid-cols-6": colsByBreakpoint.sm === 6,
+		"xsMax:gap-lg": gapsByBreakpoint.xs === "lg",
+		"xsMax:gap-md": gapsByBreakpoint.xs === "md",
+		"xsMax:gap-sm": gapsByBreakpoint.xs === "sm",
+		"xsMax:gap-xl": gapsByBreakpoint.xs === "xl",
+		"xsMax:gap-xs": gapsByBreakpoint.xs === "xs",
+		"xsMax:grid-cols-1": colsByBreakpoint.xs === 1,
+		"xsMax:grid-cols-2": colsByBreakpoint.xs === 2,
+		"xsMax:grid-cols-3": colsByBreakpoint.xs === 3,
+		"xsMax:grid-cols-4": colsByBreakpoint.xs === 4,
+		"xsMax:grid-cols-5": colsByBreakpoint.xs === 5,
+		"xsMax:grid-cols-6": colsByBreakpoint.xs === 6
+	}, className), [
+		className,
+		colsByBreakpoint.lg,
+		colsByBreakpoint.md,
+		colsByBreakpoint.sm,
+		colsByBreakpoint.xs,
+		gapsByBreakpoint.lg,
+		gapsByBreakpoint.md,
+		gapsByBreakpoint.sm,
+		gapsByBreakpoint.xs
+	]);
+	const handleCardClick = useCallback((cardData) => {
+		onCardClick?.(cardData);
+	}, [onCardClick]);
+	return /* @__PURE__ */ jsx("div", {
+		className: gridClasses,
+		children: doesGridHaveLoadedData ? /* @__PURE__ */ jsx(LoadedCardGrid, {
+			card: Card,
+			cardData,
+			cards,
+			onCardClick: handleCardClick,
+			onCardVisible
+		}) : new Array(skeletonCardCount).fill(0).map((_, i) => /* @__PURE__ */ jsx(Card.Skeleton, {}, i))
+	});
+};
+/**
+* This grid is the one that does the checks / we are sure that the card data is loaded.
+*/
+const LoadedCardGrid = ({ card: Card, cardData, cards, onCardClick, onCardVisible }) => {
+	if (nodeEnv !== "production") {
+		for (const card of cards) if (!cardData[card]) console.error(`Card data does not have card with id '${card}'`);
+	}
+	const getVisibilityRef = useCardVisibilityTracking(useCallback((cardKey) => {
+		if (onCardVisible && cardData[cardKey]) onCardVisible(cardData[cardKey]);
+	}, [onCardVisible, cardData]), { threshold: .5 });
+	return useMemo(() => cards.filter((card) => {
+		if (!cardData[card]) {
+			console.error(`Card data does not have card with id '${card}'`);
+			return false;
+		}
+		return true;
+	}).map((card) => /* @__PURE__ */ jsx(Card.Normal, {
+		cardData: cardData[card],
+		onCardClick,
+		visibilityRef: onCardVisible ? getVisibilityRef(card) : void 0
+	}, card)), [
+		cards,
+		cardData,
+		Card,
+		onCardClick,
+		onCardVisible,
+		getVisibilityRef
+	]);
+};
+//#endregion
+export { CardGrid as t };
+
+//# sourceMappingURL=CardGrid-BpX_oOS4.mjs.map