@drivenets/design-system 0.6.0 → 0.7.0

package/src/utils/format-relative-time.ts

@@ -0,0 +1,52 @@
+const SECONDS_PER_MINUTE = 60;
+const MINUTES_PER_HOUR = 60;
+const HOURS_PER_DAY = 24;
+const DAYS_PER_WEEK = 7;
+const DAYS_PER_MONTH = 30;
+const MONTHS_PER_YEAR = 12;
+const MS_PER_SECOND = 1000;
+
+const JUST_NOW_THRESHOLD_SECONDS = 60;
+
+export const formatRelativeTime = (date: Date): string => {
+	const now = new Date();
+	const diffMs = now.getTime() - date.getTime();
+
+	if (diffMs < 0) {
+		return 'Just now';
+	}
+
+	const diffSeconds = Math.floor(diffMs / MS_PER_SECOND);
+	const diffMinutes = Math.floor(diffSeconds / SECONDS_PER_MINUTE);
+	const diffHours = Math.floor(diffMinutes / MINUTES_PER_HOUR);
+	const diffDays = Math.floor(diffHours / HOURS_PER_DAY);
+	const diffWeeks = Math.floor(diffDays / DAYS_PER_WEEK);
+	const diffMonths = Math.floor(diffDays / DAYS_PER_MONTH);
+	const diffYears = Math.floor(diffMonths / MONTHS_PER_YEAR);
+
+	if (diffSeconds < JUST_NOW_THRESHOLD_SECONDS) {
+		return 'Just now';
+	}
+
+	if (diffMinutes < MINUTES_PER_HOUR) {
+		return `${String(diffMinutes)}m ago`;
+	}
+
+	if (diffHours < HOURS_PER_DAY) {
+		return `${String(diffHours)}h ago`;
+	}
+
+	if (diffDays < DAYS_PER_WEEK) {
+		return `${String(diffDays)}d ago`;
+	}
+
+	if (diffWeeks < 4) {
+		return `${String(diffWeeks)}w ago`;
+	}
+
+	if (diffYears >= 1) {
+		return `${String(diffYears)}y ago`;
+	}
+
+	return `${String(diffMonths)}mo ago`;
+};

package/src/utils/numbers.test.ts

@@ -0,0 +1,24 @@
+import { describe, expect, it } from 'vitest';
+
+import { clampValue } from './numbers';
+
+describe('progress-utils', () => {
+	describe('clampValue', () => {
+		it('should return value within 0-100 unchanged', () => {
+			expect(clampValue(50)).toBe(50);
+		});
+
+		it('should clamp value below 0 to 0', () => {
+			expect(clampValue(-10)).toBe(0);
+		});
+
+		it('should clamp value above 100 to 100', () => {
+			expect(clampValue(150)).toBe(100);
+		});
+
+		it('should handle boundary values', () => {
+			expect(clampValue(0)).toBe(0);
+			expect(clampValue(100)).toBe(100);
+		});
+	});
+});

package/src/utils/numbers.ts

@@ -0,0 +1 @@
+export const clampValue = (value: number): number => Math.min(100, Math.max(0, value));

package/dist/_virtual/rolldown_runtime.cjs

@@ -1,29 +0,0 @@
-//#region rolldown:runtime
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-	if (from && typeof from === "object" || typeof from === "function") {
-		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
-			key = keys[i];
-			if (!__hasOwnProp.call(to, key) && key !== except) {
-				__defProp(to, key, {
-					get: ((k) => from[k]).bind(null, key),
-					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-				});
-			}
-		}
-	}
-	return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-	value: mod,
-	enumerable: true
-}) : target, mod));
-
-//#endregion
-
-exports.__toESM = __toESM;

package/dist/components/ds-alert-banner/ds-alert-banner.cjs

@@ -1,182 +0,0 @@
-const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_ds_alert_banner_module = require('./ds-alert-banner.module.cjs');
-const require_ds_icon = require('../ds-icon/ds-icon.cjs');
-require('../ds-icon/index.cjs');
-const require_ds_typography = require('../ds-typography/ds-typography.cjs');
-require('../ds-typography/index.cjs');
-let react_compiler_runtime = require("react/compiler-runtime");
-let classnames = require("classnames");
-classnames = require_rolldown_runtime.__toESM(classnames);
-let react_jsx_runtime = require("react/jsx-runtime");
-
-//#region src/components/ds-alert-banner/ds-alert-banner.tsx
-/**
-* Design system AlertBanner component
-* Controlled component that displays alert messages with different variants
-*/
-const DsAlertBanner = (t0) => {
-	const $ = (0, react_compiler_runtime.c)(20);
-	const { open, onOpenChange, inline: t1, variant: t2, icon, closable: t3, className, style: t4, children } = t0;
-	const inline = t1 === void 0 ? false : t1;
-	const variant = t2 === void 0 ? "info-blue" : t2;
-	const closable = t3 === void 0 ? false : t3;
-	let t5;
-	if ($[0] !== t4) {
-		t5 = t4 === void 0 ? {} : t4;
-		$[0] = t4;
-		$[1] = t5;
-	} else t5 = $[1];
-	const style = t5;
-	let t6;
-	if ($[2] !== className || $[3] !== inline || $[4] !== open || $[5] !== variant) {
-		const variantClass = {
-			"info-neutral": require_ds_alert_banner_module.default.infoNeutral,
-			"info-blue": require_ds_alert_banner_module.default.infoBlue,
-			warning: require_ds_alert_banner_module.default.warning,
-			error: require_ds_alert_banner_module.default.error,
-			success: require_ds_alert_banner_module.default.success
-		}[variant];
-		t6 = (0, classnames.default)(require_ds_alert_banner_module.default.alertBanner, inline && require_ds_alert_banner_module.default.inline, !inline && require_ds_alert_banner_module.default.global, variantClass, { [require_ds_alert_banner_module.default.hidden]: !open }, className);
-		$[2] = className;
-		$[3] = inline;
-		$[4] = open;
-		$[5] = variant;
-		$[6] = t6;
-	} else t6 = $[6];
-	const alertBannerClass = t6;
-	let t7;
-	if ($[7] !== onOpenChange) {
-		t7 = () => {
-			onOpenChange(false);
-		};
-		$[7] = onOpenChange;
-		$[8] = t7;
-	} else t7 = $[8];
-	const handleClose = t7;
-	if (!open) return null;
-	let t8;
-	if ($[9] !== icon) {
-		t8 = icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
-			className: require_ds_alert_banner_module.default.icon,
-			icon,
-			size: "small",
-			filled: true
-		});
-		$[9] = icon;
-		$[10] = t8;
-	} else t8 = $[10];
-	let t9;
-	if ($[11] !== closable || $[12] !== handleClose) {
-		t9 = closable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-			type: "button",
-			className: require_ds_alert_banner_module.default.closeButton,
-			onClick: handleClose,
-			"aria-label": "Close alert",
-			"data-close": true,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
-				icon: "close",
-				size: "small"
-			})
-		});
-		$[11] = closable;
-		$[12] = handleClose;
-		$[13] = t9;
-	} else t9 = $[13];
-	let t10;
-	if ($[14] !== alertBannerClass || $[15] !== children || $[16] !== style || $[17] !== t8 || $[18] !== t9) {
-		t10 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: alertBannerClass,
-			style,
-			children: [
-				t8,
-				children,
-				t9
-			]
-		});
-		$[14] = alertBannerClass;
-		$[15] = children;
-		$[16] = style;
-		$[17] = t8;
-		$[18] = t9;
-		$[19] = t10;
-	} else t10 = $[19];
-	return t10;
-};
-const Title = (t0) => {
-	const $ = (0, react_compiler_runtime.c)(6);
-	const { style, className, children } = t0;
-	let t1;
-	if ($[0] !== className) {
-		t1 = (0, classnames.default)(require_ds_alert_banner_module.default.title, className);
-		$[0] = className;
-		$[1] = t1;
-	} else t1 = $[1];
-	let t2;
-	if ($[2] !== children || $[3] !== style || $[4] !== t1) {
-		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_typography.default, {
-			style,
-			className: t1,
-			variant: "body-md-md",
-			children
-		});
-		$[2] = children;
-		$[3] = style;
-		$[4] = t1;
-		$[5] = t2;
-	} else t2 = $[5];
-	return t2;
-};
-const Body = (t0) => {
-	const $ = (0, react_compiler_runtime.c)(6);
-	const { style, className, children } = t0;
-	let t1;
-	if ($[0] !== className) {
-		t1 = (0, classnames.default)(require_ds_alert_banner_module.default.description, className);
-		$[0] = className;
-		$[1] = t1;
-	} else t1 = $[1];
-	let t2;
-	if ($[2] !== children || $[3] !== style || $[4] !== t1) {
-		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_typography.default, {
-			style,
-			className: t1,
-			variant: "body-sm-reg",
-			children
-		});
-		$[2] = children;
-		$[3] = style;
-		$[4] = t1;
-		$[5] = t2;
-	} else t2 = $[5];
-	return t2;
-};
-const Actions = (t0) => {
-	const $ = (0, react_compiler_runtime.c)(6);
-	const { style, className, children } = t0;
-	let t1;
-	if ($[0] !== className) {
-		t1 = (0, classnames.default)(require_ds_alert_banner_module.default.actions, className);
-		$[0] = className;
-		$[1] = t1;
-	} else t1 = $[1];
-	let t2;
-	if ($[2] !== children || $[3] !== style || $[4] !== t1) {
-		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			style,
-			className: t1,
-			children
-		});
-		$[2] = children;
-		$[3] = style;
-		$[4] = t1;
-		$[5] = t2;
-	} else t2 = $[5];
-	return t2;
-};
-DsAlertBanner.Title = Title;
-DsAlertBanner.Body = Body;
-DsAlertBanner.Actions = Actions;
-var ds_alert_banner_default = DsAlertBanner;
-
-//#endregion
-exports.default = ds_alert_banner_default;

package/dist/components/ds-alert-banner/ds-alert-banner.d.cts

@@ -1,53 +0,0 @@
-import { DsAlertBannerProps } from "./ds-alert-banner.types.cjs";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-import { CSSProperties, ReactNode } from "react";
-
-//#region src/components/ds-alert-banner/ds-alert-banner.d.ts
-
-/**
- * Design system AlertBanner component
- * Controlled component that displays alert messages with different variants
- */
-declare const DsAlertBanner: {
-  ({
-    open,
-    onOpenChange,
-    inline,
-    variant,
-    icon,
-    closable,
-    className,
-    style,
-    children
-  }: DsAlertBannerProps): react_jsx_runtime0.JSX.Element | null;
-  Title: ({
-    style,
-    className,
-    children
-  }: {
-    style?: CSSProperties;
-    className?: string;
-    children: ReactNode;
-  }) => react_jsx_runtime0.JSX.Element;
-  Body: ({
-    style,
-    className,
-    children
-  }: {
-    style?: CSSProperties;
-    className?: string;
-    children: ReactNode;
-  }) => react_jsx_runtime0.JSX.Element;
-  Actions: ({
-    style,
-    className,
-    children
-  }: {
-    style?: CSSProperties;
-    className?: string;
-    children: ReactNode;
-  }) => react_jsx_runtime0.JSX.Element;
-};
-//#endregion
-export { DsAlertBanner };
-//# sourceMappingURL=ds-alert-banner.d.cts.map

package/dist/components/ds-alert-banner/ds-alert-banner.d.cts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ds-alert-banner.d.cts","names":[],"sources":["../../../src/components/ds-alert-banner/ds-alert-banner.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;AAGkE;cAQ5D;;;;;;;;;;;KAUH,qBAAkB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;;;YAoDZ;;cAEE;QACV,kBAAA,CAAA,GAAA,CAAA;;;;;;YAWQ;IAlEN,SAAA,CAAA,EAAA,MAAA;IAAkB,QAAA,EAoEV,SApEU;QAqEpB,kBAAA,CAAA,GAAA,CAAA;;;;;EAdA;YAyBQ;IA5BA,SAAA,CAAA,EAAA,MAAA;IAEE,QAAA,EA4BA,SA5BA;EACV,CAAA,EAAA,GA4BA,kBAAA,CAAA,GAAA,CAAA,OA5BA"}

package/dist/components/ds-alert-banner/ds-alert-banner.d.ts

@@ -1,53 +0,0 @@
-import { DsAlertBannerProps } from "./ds-alert-banner.types.js";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-import { CSSProperties, ReactNode } from "react";
-
-//#region src/components/ds-alert-banner/ds-alert-banner.d.ts
-
-/**
- * Design system AlertBanner component
- * Controlled component that displays alert messages with different variants
- */
-declare const DsAlertBanner: {
-  ({
-    open,
-    onOpenChange,
-    inline,
-    variant,
-    icon,
-    closable,
-    className,
-    style,
-    children
-  }: DsAlertBannerProps): react_jsx_runtime0.JSX.Element | null;
-  Title: ({
-    style,
-    className,
-    children
-  }: {
-    style?: CSSProperties;
-    className?: string;
-    children: ReactNode;
-  }) => react_jsx_runtime0.JSX.Element;
-  Body: ({
-    style,
-    className,
-    children
-  }: {
-    style?: CSSProperties;
-    className?: string;
-    children: ReactNode;
-  }) => react_jsx_runtime0.JSX.Element;
-  Actions: ({
-    style,
-    className,
-    children
-  }: {
-    style?: CSSProperties;
-    className?: string;
-    children: ReactNode;
-  }) => react_jsx_runtime0.JSX.Element;
-};
-//#endregion
-export { DsAlertBanner };
-//# sourceMappingURL=ds-alert-banner.d.ts.map

package/dist/components/ds-alert-banner/ds-alert-banner.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ds-alert-banner.d.ts","names":[],"sources":["../../../src/components/ds-alert-banner/ds-alert-banner.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;AAGkE;cAQ5D;;;;;;;;;;;KAUH,qBAAkB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;;;YAoDZ;;cAEE;QACV,kBAAA,CAAA,GAAA,CAAA;;;;;;YAWQ;IAlEN,SAAA,CAAA,EAAA,MAAA;IAAkB,QAAA,EAoEV,SApEU;QAqEpB,kBAAA,CAAA,GAAA,CAAA;;;;;EAdA;YAyBQ;IA5BA,SAAA,CAAA,EAAA,MAAA;IAEE,QAAA,EA4BA,SA5BA;EACV,CAAA,EAAA,GA4BA,kBAAA,CAAA,GAAA,CAAA,OA5BA"}

package/dist/components/ds-alert-banner/ds-alert-banner.js

@@ -1,181 +0,0 @@
-import ds_alert_banner_module_default from "./ds-alert-banner.module.js";
-import ds_icon_default from "../ds-icon/ds-icon.js";
-import "../ds-icon/index.js";
-import ds_typography_default from "../ds-typography/ds-typography.js";
-import "../ds-typography/index.js";
-import { c } from "react/compiler-runtime";
-import classNames from "classnames";
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/components/ds-alert-banner/ds-alert-banner.tsx
-/**
-* Design system AlertBanner component
-* Controlled component that displays alert messages with different variants
-*/
-const DsAlertBanner = (t0) => {
-	const $ = c(20);
-	const { open, onOpenChange, inline: t1, variant: t2, icon, closable: t3, className, style: t4, children } = t0;
-	const inline = t1 === void 0 ? false : t1;
-	const variant = t2 === void 0 ? "info-blue" : t2;
-	const closable = t3 === void 0 ? false : t3;
-	let t5;
-	if ($[0] !== t4) {
-		t5 = t4 === void 0 ? {} : t4;
-		$[0] = t4;
-		$[1] = t5;
-	} else t5 = $[1];
-	const style = t5;
-	let t6;
-	if ($[2] !== className || $[3] !== inline || $[4] !== open || $[5] !== variant) {
-		const variantClass = {
-			"info-neutral": ds_alert_banner_module_default.infoNeutral,
-			"info-blue": ds_alert_banner_module_default.infoBlue,
-			warning: ds_alert_banner_module_default.warning,
-			error: ds_alert_banner_module_default.error,
-			success: ds_alert_banner_module_default.success
-		}[variant];
-		t6 = classNames(ds_alert_banner_module_default.alertBanner, inline && ds_alert_banner_module_default.inline, !inline && ds_alert_banner_module_default.global, variantClass, { [ds_alert_banner_module_default.hidden]: !open }, className);
-		$[2] = className;
-		$[3] = inline;
-		$[4] = open;
-		$[5] = variant;
-		$[6] = t6;
-	} else t6 = $[6];
-	const alertBannerClass = t6;
-	let t7;
-	if ($[7] !== onOpenChange) {
-		t7 = () => {
-			onOpenChange(false);
-		};
-		$[7] = onOpenChange;
-		$[8] = t7;
-	} else t7 = $[8];
-	const handleClose = t7;
-	if (!open) return null;
-	let t8;
-	if ($[9] !== icon) {
-		t8 = icon && /* @__PURE__ */ jsx(ds_icon_default, {
-			className: ds_alert_banner_module_default.icon,
-			icon,
-			size: "small",
-			filled: true
-		});
-		$[9] = icon;
-		$[10] = t8;
-	} else t8 = $[10];
-	let t9;
-	if ($[11] !== closable || $[12] !== handleClose) {
-		t9 = closable && /* @__PURE__ */ jsx("button", {
-			type: "button",
-			className: ds_alert_banner_module_default.closeButton,
-			onClick: handleClose,
-			"aria-label": "Close alert",
-			"data-close": true,
-			children: /* @__PURE__ */ jsx(ds_icon_default, {
-				icon: "close",
-				size: "small"
-			})
-		});
-		$[11] = closable;
-		$[12] = handleClose;
-		$[13] = t9;
-	} else t9 = $[13];
-	let t10;
-	if ($[14] !== alertBannerClass || $[15] !== children || $[16] !== style || $[17] !== t8 || $[18] !== t9) {
-		t10 = /* @__PURE__ */ jsxs("div", {
-			className: alertBannerClass,
-			style,
-			children: [
-				t8,
-				children,
-				t9
-			]
-		});
-		$[14] = alertBannerClass;
-		$[15] = children;
-		$[16] = style;
-		$[17] = t8;
-		$[18] = t9;
-		$[19] = t10;
-	} else t10 = $[19];
-	return t10;
-};
-const Title = (t0) => {
-	const $ = c(6);
-	const { style, className, children } = t0;
-	let t1;
-	if ($[0] !== className) {
-		t1 = classNames(ds_alert_banner_module_default.title, className);
-		$[0] = className;
-		$[1] = t1;
-	} else t1 = $[1];
-	let t2;
-	if ($[2] !== children || $[3] !== style || $[4] !== t1) {
-		t2 = /* @__PURE__ */ jsx(ds_typography_default, {
-			style,
-			className: t1,
-			variant: "body-md-md",
-			children
-		});
-		$[2] = children;
-		$[3] = style;
-		$[4] = t1;
-		$[5] = t2;
-	} else t2 = $[5];
-	return t2;
-};
-const Body = (t0) => {
-	const $ = c(6);
-	const { style, className, children } = t0;
-	let t1;
-	if ($[0] !== className) {
-		t1 = classNames(ds_alert_banner_module_default.description, className);
-		$[0] = className;
-		$[1] = t1;
-	} else t1 = $[1];
-	let t2;
-	if ($[2] !== children || $[3] !== style || $[4] !== t1) {
-		t2 = /* @__PURE__ */ jsx(ds_typography_default, {
-			style,
-			className: t1,
-			variant: "body-sm-reg",
-			children
-		});
-		$[2] = children;
-		$[3] = style;
-		$[4] = t1;
-		$[5] = t2;
-	} else t2 = $[5];
-	return t2;
-};
-const Actions = (t0) => {
-	const $ = c(6);
-	const { style, className, children } = t0;
-	let t1;
-	if ($[0] !== className) {
-		t1 = classNames(ds_alert_banner_module_default.actions, className);
-		$[0] = className;
-		$[1] = t1;
-	} else t1 = $[1];
-	let t2;
-	if ($[2] !== children || $[3] !== style || $[4] !== t1) {
-		t2 = /* @__PURE__ */ jsx("div", {
-			style,
-			className: t1,
-			children
-		});
-		$[2] = children;
-		$[3] = style;
-		$[4] = t1;
-		$[5] = t2;
-	} else t2 = $[5];
-	return t2;
-};
-DsAlertBanner.Title = Title;
-DsAlertBanner.Body = Body;
-DsAlertBanner.Actions = Actions;
-var ds_alert_banner_default = DsAlertBanner;
-
-//#endregion
-export { ds_alert_banner_default as default };
-//# sourceMappingURL=ds-alert-banner.js.map

package/dist/components/ds-alert-banner/ds-alert-banner.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ds-alert-banner.js","names":["CSSProperties","ReactNode","classNames","styles","DsAlertBannerProps","DsIcon","DsTypography","DsAlertBanner","t0","$","_c","open","onOpenChange","inline","t1","variant","t2","icon","closable","t3","className","style","t4","children","undefined","t5","t6","variantClass","infoNeutral","infoBlue","warning","error","success","alertBanner","global","hidden","alertBannerClass","t7","handleClose","t8","t9","closeButton","t10","Title","title","Body","description","Actions","actions"],"sources":["../../../src/components/ds-alert-banner/ds-alert-banner.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport classNames from 'classnames';\nimport styles from './ds-alert-banner.module.scss';\nimport type { DsAlertBannerProps } from './ds-alert-banner.types';\nimport { DsIcon } from '../ds-icon';\nimport { DsTypography } from '../ds-typography';\n\n/**\n * Design system AlertBanner component\n * Controlled component that displays alert messages with different variants\n */\nconst DsAlertBanner = ({\n\topen,\n\tonOpenChange,\n\tinline = false,\n\tvariant = 'info-blue',\n\ticon,\n\tclosable = false,\n\tclassName,\n\tstyle = {},\n\tchildren,\n}: DsAlertBannerProps) => {\n\tconst variantClass = {\n\t\t'info-neutral': styles.infoNeutral,\n\t\t'info-blue': styles.infoBlue,\n\t\twarning: styles.warning,\n\t\terror: styles.error,\n\t\tsuccess: styles.success,\n\t}[variant];\n\n\tconst alertBannerClass = classNames(\n\t\tstyles.alertBanner,\n\t\tinline && styles.inline,\n\t\t!inline && styles.global,\n\t\tvariantClass,\n\t\t{\n\t\t\t[styles.hidden]: !open,\n\t\t},\n\t\tclassName,\n\t);\n\n\tconst handleClose = () => {\n\t\tonOpenChange(false);\n\t};\n\n\tif (!open) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<div className={alertBannerClass} style={style}>\n\t\t\t{icon && <DsIcon className={styles.icon} icon={icon} size=\"small\" filled />}\n\t\t\t{children}\n\t\t\t{closable && (\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclassName={styles.closeButton}\n\t\t\t\t\tonClick={handleClose}\n\t\t\t\t\taria-label=\"Close alert\"\n\t\t\t\t\tdata-close\n\t\t\t\t>\n\t\t\t\t\t<DsIcon icon=\"close\" size=\"small\" />\n\t\t\t\t</button>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\nconst Title = ({\n\tstyle,\n\tclassName,\n\tchildren,\n}: {\n\tstyle?: CSSProperties;\n\tclassName?: string;\n\tchildren: ReactNode;\n}) => (\n\t<DsTypography style={style} className={classNames(styles.title, className)} variant=\"body-md-md\">\n\t\t{children}\n\t</DsTypography>\n);\n\nconst Body = ({\n\tstyle,\n\tclassName,\n\tchildren,\n}: {\n\tstyle?: CSSProperties;\n\tclassName?: string;\n\tchildren: ReactNode;\n}) => (\n\t<DsTypography style={style} className={classNames(styles.description, className)} variant=\"body-sm-reg\">\n\t\t{children}\n\t</DsTypography>\n);\n\nconst Actions = ({\n\tstyle,\n\tclassName,\n\tchildren,\n}: {\n\tstyle?: CSSProperties;\n\tclassName?: string;\n\tchildren: ReactNode;\n}) => (\n\t<div style={style} className={classNames(styles.actions, className)}>\n\t\t{children}\n\t</div>\n);\n\nDsAlertBanner.Title = Title;\nDsAlertBanner.Body = Body;\nDsAlertBanner.Actions = Actions;\n\nexport default DsAlertBanner;\n"],"mappings":"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"}

package/dist/components/ds-alert-banner/ds-alert-banner.module.cjs

@@ -1,21 +0,0 @@
-
-//#region src/components/ds-alert-banner/ds-alert-banner.module.scss
-var ds_alert_banner_module_default = {
-	"alertBanner": "_alertBanner_1u3d5_1",
-	"inline": "_inline_1u3d5_1",
-	"title": "_title_1u3d5_1",
-	"global": "_global_1u3d5_1",
-	"description": "_description_1u3d5_1",
-	"hidden": "_hidden_1u3d5_1",
-	"icon": "_icon_1u3d5_1",
-	"actions": "_actions_1u3d5_1",
-	"closeButton": "_closeButton_1u3d5_1",
-	"infoNeutral": "_infoNeutral_1u3d5_1",
-	"infoBlue": "_infoBlue_1u3d5_1",
-	"warning": "_warning_1u3d5_1",
-	"error": "_error_1u3d5_1",
-	"success": "_success_1u3d5_1"
-};
-
-//#endregion
-exports.default = ds_alert_banner_module_default;

package/dist/components/ds-alert-banner/ds-alert-banner.module.js

@@ -1,21 +0,0 @@
-//#region src/components/ds-alert-banner/ds-alert-banner.module.scss
-var ds_alert_banner_module_default = {
-	"alertBanner": "_alertBanner_1u3d5_1",
-	"inline": "_inline_1u3d5_1",
-	"title": "_title_1u3d5_1",
-	"global": "_global_1u3d5_1",
-	"description": "_description_1u3d5_1",
-	"hidden": "_hidden_1u3d5_1",
-	"icon": "_icon_1u3d5_1",
-	"actions": "_actions_1u3d5_1",
-	"closeButton": "_closeButton_1u3d5_1",
-	"infoNeutral": "_infoNeutral_1u3d5_1",
-	"infoBlue": "_infoBlue_1u3d5_1",
-	"warning": "_warning_1u3d5_1",
-	"error": "_error_1u3d5_1",
-	"success": "_success_1u3d5_1"
-};
-
-//#endregion
-export { ds_alert_banner_module_default as default };
-//# sourceMappingURL=ds-alert-banner.module.js.map

package/dist/components/ds-alert-banner/ds-alert-banner.module.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ds-alert-banner.module.js","names":[],"sources":["../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/components/ds-alert-banner/ds-alert-banner.module.scss","../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/styles/_typography.scss"],"sourcesContent":["@use '../../styles/typography';\n\n.alertBanner {\n\t&.inline {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: auto 1fr auto;\n\t\tgrid-template-rows: auto auto auto;\n\t\tgrid-template-areas:\n\t\t\t'icon title close'\n\t\t\t'icon description close'\n\t\t\t'icon actions close';\n\t\talign-items: start;\n\t\tpadding: var(--spacing-standard);\n\t\tborder-radius: 4px;\n\t\tborder: 1px solid;\n\t\tcolumn-gap: var(--spacing-xs);\n\t\trow-gap: var(--spacing-4xs);\n\n\t\t&:not(:has(.title)) {\n\t\t\talign-items: center;\n\t\t}\n\t}\n\n\t&.global {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tpadding: var(--spacing-sm) var(--spacing-standard);\n\t\tgap: var(--spacing-2xs);\n\t\tborder-bottom: 2px solid;\n\n\t\t.title {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t.description {\n\t\t\t@include typography.ellipsis;\n\t\t\tflex: 1;\n\t\t}\n\t}\n\n\t&.hidden {\n\t\tdisplay: none;\n\t}\n\n\t.icon {\n\t\tgrid-area: icon;\n\t}\n\n\t.title {\n\t\tgrid-area: title;\n\t\tcolor: var(--color-font-main);\n\t}\n\n\t.description {\n\t\tgrid-area: description;\n\t\tcolor: var(--color-font-secondary);\n\t\tmargin-top: var(--spacing-4xs);\n\t}\n\n\t.actions {\n\t\tgrid-area: actions;\n\t\tdisplay: inline-flex;\n\t\tgap: var(--spacing-xs);\n\t}\n\n\t.closeButton {\n\t\tgrid-area: close;\n\t\tdisplay: flex;\n\t\tcolor: var(--color-background-action);\n\t}\n\n\t&.infoNeutral {\n\t\tbackground-color: var(--color-background-secondary);\n\t\tborder-color: var(--color-border);\n\n\t\t.icon {\n\t\t\tcolor: var(--color-icon-secondary);\n\t\t}\n\t}\n\n\t&.infoBlue {\n\t\tbackground-color: var(--color-background-info);\n\t\tborder-color: var(--color-border-action-primary);\n\n\t\t.icon {\n\t\t\tcolor: var(--color-icon-primary);\n\t\t}\n\t}\n\n\t&.warning {\n\t\tbackground-color: var(--color-background-warning);\n\t\tborder-color: var(--color-background-warning-strong);\n\n\t\t.icon {\n\t\t\tcolor: var(--color-icon-warning);\n\t\t}\n\t}\n\n\t&.error {\n\t\tbackground-color: var(--color-background-danger-weak);\n\t\tborder-color: var(--color-border-danger-strong);\n\n\t\t.icon {\n\t\t\tcolor: var(--color-icon-danger);\n\t\t}\n\t}\n\n\t&.success {\n\t\tbackground-color: var(--color-background-success);\n\t\tborder-color: var(--color-border-success);\n\n\t\t.icon {\n\t\t\tcolor: var(--color-icon-success);\n\t\t}\n\t}\n}\n"],"mappings":""}

package/dist/components/ds-alert-banner/ds-alert-banner.types.cjs

@@ -1,12 +0,0 @@
-
-//#region src/components/ds-alert-banner/ds-alert-banner.types.tsx
-const alertBannerVariants = [
-	"info-neutral",
-	"info-blue",
-	"warning",
-	"error",
-	"success"
-];
-
-//#endregion
-exports.alertBannerVariants = alertBannerVariants;