npm - @drivenets/design-system - Versions diffs - 0.0.3 → 0.0.5 - Mend

@drivenets/design-system 0.0.3 → 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (247) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,18 @@
 # @drivenets/design-system
+## 0.0.5
+### Patch Changes
+- 2c5317f: Add `DsSegmentGroup` component
+- 3a2973f: Add readme
+## 0.0.4
+### Patch Changes
+- 5e21f4b: Add React Compiler
 ## 0.0.3
 ### Patch Changes

package/README.md ADDED Viewed

@@ -0,0 +1,51 @@
+# DriveNets Design System
+Official DriveNets Design System for application development in React.
+## Installation
+First, install the package via your preferred package manager:
+```bash
+npm install @drivenets/design-system
+# or
+pnpm install @drivenets/design-system
+# or
+yarn add @drivenets/design-system
+```
+Then, import the css styles in your application root (e.g., `main.tsx` or `App.tsx`):
+```TSX
+import '@drivenets/design-system/index.min.css';
+```
+You'll also need to import the relevant fonts in your `index.html` file.
+We recommend using our provided Vite plugin to automatically include the necessary font links. You can find more information about the plugin in the [Vite Plugin README](https://github.com/drivenets/design-system/tree/main/packages/vite-plugin).
+Or you can manually add the following lines to the `<head>` section of your `index.html` file:
+```HTML
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" />
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Mono:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap" />
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,400,0..1,0&display=block" />
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20,400,0..1,0&display=block" />
+```
+## Usage
+You can now use the DriveNets Design System components in your React application. Here's a simple example:
+```typescript
+import { DsButton } from '@drivenets/design-system';
+export const App = () => {
+  return (
+      <DsButton onClick={() => alert('Button clicked!')}>Click Me</DsButton>
+  );
+};
+```

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

@@ -4,6 +4,7 @@ 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");
@@ -13,61 +14,165 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * Design system AlertBanner component
 * Controlled component that displays alert messages with different variants
 */
-const DsAlertBanner = ({ open, onOpenChange, inline = false, variant = "info-blue", icon, closable = false, className, style = {}, children }) => {
-	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];
-	const alertBannerClass = (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);
-	const handleClose = () => {
-		onOpenChange(false);
-	};
+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;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: alertBannerClass,
-		style,
-		children: [
-			icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
-				className: require_ds_alert_banner_module.default.icon,
-				icon,
-				size: "small",
-				filled: true
-			}),
-			children,
-			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"
-				})
+	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;
 };
-const Title = ({ style, className, children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_typography.default, {
-	style,
-	className: (0, classnames.default)(require_ds_alert_banner_module.default.title, className),
-	variant: "body-md-md",
-	children
-});
-const Body = ({ style, className, children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_typography.default, {
-	style,
-	className: (0, classnames.default)(require_ds_alert_banner_module.default.description, className),
-	variant: "body-sm-reg",
-	children
-});
-const Actions = ({ style, className, children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-	style,
-	className: (0, classnames.default)(require_ds_alert_banner_module.default.actions, className),
-	children
-});
 DsAlertBanner.Title = Title;
 DsAlertBanner.Body = Body;
 DsAlertBanner.Actions = Actions;

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

@@ -1,5 +1,5 @@
 import { DsAlertBannerProps } from "./ds-alert-banner.types.cjs";
-import * as react_jsx_runtime18 from "react/jsx-runtime";
+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
@@ -19,7 +19,7 @@ declare const DsAlertBanner: {
     className,
     style,
     children
-  }: DsAlertBannerProps): react_jsx_runtime18.JSX.Element | null;
+  }: DsAlertBannerProps): react_jsx_runtime0.JSX.Element | null;
   Title: ({
     style,
     className,
@@ -28,7 +28,7 @@ declare const DsAlertBanner: {
     style?: CSSProperties;
     className?: string;
     children: ReactNode;
-  }) => react_jsx_runtime18.JSX.Element;
+  }) => react_jsx_runtime0.JSX.Element;
   Body: ({
     style,
     className,
@@ -37,7 +37,7 @@ declare const DsAlertBanner: {
     style?: CSSProperties;
     className?: string;
     children: ReactNode;
-  }) => react_jsx_runtime18.JSX.Element;
+  }) => react_jsx_runtime0.JSX.Element;
   Actions: ({
     style,
     className,
@@ -46,7 +46,7 @@ declare const DsAlertBanner: {
     style?: CSSProperties;
     className?: string;
     children: ReactNode;
-  }) => react_jsx_runtime18.JSX.Element;
+  }) => react_jsx_runtime0.JSX.Element;
 };
 //#endregion
 export { DsAlertBanner };

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

	@@ -1 +1 @@
1	- {"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,~~mBAAA~~,CAAA,GAAA,CAAA,OAAA;;;;;;YAoDZ;;cAEE;QACV,~~mBAAA~~,CAAA,GAAA,CAAA;;;;;;YAWQ;IAlEN,SAAA,CAAA,EAAA,MAAA;IAAkB,QAAA,EAoEV,SApEU;QAqEpB,~~mBAAA~~,CAAA,GAAA,CAAA;;;;;EAdA;YAyBQ;IA5BA,SAAA,CAAA,EAAA,MAAA;IAEE,QAAA,EA4BA,SA5BA;EACV,CAAA,EAAA,GA4BA,~~mBAAA~~,CAAA,GAAA,CAAA,OA5BA"}
1	+ {"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.js CHANGED Viewed

@@ -3,6 +3,7 @@ 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";
@@ -11,61 +12,165 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * Design system AlertBanner component
 * Controlled component that displays alert messages with different variants
 */
-const DsAlertBanner = ({ open, onOpenChange, inline = false, variant = "info-blue", icon, closable = false, className, style = {}, children }) => {
-	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];
-	const alertBannerClass = 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);
-	const handleClose = () => {
-		onOpenChange(false);
-	};
+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;
-	return /* @__PURE__ */ jsxs("div", {
-		className: alertBannerClass,
-		style,
-		children: [
-			icon && /* @__PURE__ */ jsx(ds_icon_default, {
-				className: ds_alert_banner_module_default.icon,
-				icon,
-				size: "small",
-				filled: true
-			}),
-			children,
-			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"
-				})
+	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;
 };
-const Title = ({ style, className, children }) => /* @__PURE__ */ jsx(ds_typography_default, {
-	style,
-	className: classNames(ds_alert_banner_module_default.title, className),
-	variant: "body-md-md",
-	children
-});
-const Body = ({ style, className, children }) => /* @__PURE__ */ jsx(ds_typography_default, {
-	style,
-	className: classNames(ds_alert_banner_module_default.description, className),
-	variant: "body-sm-reg",
-	children
-});
-const Actions = ({ style, className, children }) => /* @__PURE__ */ jsx("div", {
-	style,
-	className: classNames(ds_alert_banner_module_default.actions, className),
-	children
-});
 DsAlertBanner.Title = Title;
 DsAlertBanner.Body = Body;
 DsAlertBanner.Actions = Actions;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ds-alert-banner.js","names":["styles","DsIcon","DsTypography"],"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":"~~;;;;;;;;;;;;;~~AAWA,~~MAAM~~,~~iBAAiB~~,~~EACtB~~,~~MACA~~,~~cACA~~,~~SAAS~~,~~OACT~~,~~UAAU~~,~~aACV~~,~~MACA~~,~~WAAW~~,~~OACX~~,~~WACA~~,~~QAAQ~~,~~EAAE~~,~~EACV~~,~~eACyB~~;~~CACzB~~,~~MAAM~~,~~eAAe~~;~~EACpB~~,~~gBAAgBA~~,+~~BAAO~~;~~EACvB~~,~~aAAaA~~,+~~BAAO~~;~~EACpB~~,~~SAASA~~,+~~BAAO~~;~~EAChB~~,~~OAAOA~~,+~~BAAO~~;~~EACd~~,~~SAASA~~,+~~BAAO~~;~~EAChB~~,~~CAAC~~;~~CAEF~~,~~MAAM~~,~~mBAAmB,WACxBA~~,+~~BAAO~~,~~aACP~~,~~UAAUA~~,+~~BAAO~~,~~QACjB~~,~~CAAC~~,~~UAAUA~~,+~~BAAO~~,~~QAClB~~,cACA,~~GACEA~~,+~~BAAO~~,~~SAAS~~,~~CAAC~~,MAClB,~~EACD~~,UACA;~~CAED~~,~~MAAM~~,~~oBAAoB~~;~~AACzB~~,~~eAAa~~,MAAM;;~~AAGpB~~,~~KAAI~~,~~CAAC~~,~~KACJ~~,~~QAAO~~;~~AAGR~~,~~QACC~~,~~qBAAC~~;~~EAAI~~,~~WAAW~~;~~EAAyB;;GACvC~~,QAAQ,~~oBAACC~~;~~IAAO~~,~~WAAWD~~,+~~BAAO~~;~~IAAY~~;~~IAAM~~,~~MAAK~~;~~IAAQ~~;~~KAAS~~;~~GAC1E~~;~~GACA~~,YACA,oBAAC;IACA,~~MAAK~~;~~IACL~~,~~WAAWA,+BAAO~~;~~IAClB~~,~~SAAS~~;~~IACT~~,~~cAAW~~;~~IACX~~;~~cAEA~~,~~oBAACC~~;~~KAAO~~,~~MAAK~~;~~KAAQ~~,~~MAAK~~;~~MAAU~~;~~KAC5B~~;;~~GAEL~~;;~~AAIR~~,~~MAAM~~,~~SAAS~~,~~EACd~~,~~OACA~~,~~WACA~~,~~eAMA~~,~~oBAACC~~;~~CAAoB~~;~~CAAO~~,~~WAAW~~,~~WAAWF~~,+~~BAAO~~,~~OAAO~~,UAAU;~~CAAE~~,~~SAAQ~~;~~CAClF~~;~~EACa~~;~~AAGhB~~,~~MAAM~~,~~QAAQ~~,~~EACb~~,~~OACA~~,~~WACA~~,~~eAMA~~,~~oBAACE~~;~~CAAoB~~;~~CAAO~~,~~WAAW~~,~~WAAWF~~,+~~BAAO~~,~~aAAa~~,UAAU;~~CAAE~~,~~SAAQ~~;~~CACxF~~;~~EACa~~;~~AAGhB~~,~~MAAM~~,~~WAAW~~,~~EAChB~~,~~OACA~~,~~WACA~~,~~eAMA~~,oBAAC;~~CAAW~~;~~CAAO~~,~~WAAW~~,~~WAAWA~~,+~~BAAO~~,~~SAAS~~,UAAU;~~CACjE~~;~~EACI~~;~~AAGP~~,~~cAAc~~,~~QAAQ~~;~~AACtB~~,~~cAAc~~,~~OAAO~~;~~AACrB~~,~~cAAc~~,~~UAAU~~;AAExB,~~8BAAe~~"}
1	+ {"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.types.d.cts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ds-alert-banner.types.d.cts","names":[],"sources":["../../../src/components/ds-alert-banner/ds-alert-banner.types.tsx"],"sourcesContent":[],"mappings":";;;;cAIa;AAAA,KACD,kBAAA,GAD4F,CAAA,OAC/D,mBAD+D,CAAA,CAAA,MAAA,CAAA;AAC5F,UAEK,kBAAA,~~CAFa~~;~~EAEb~~;;;EAkCR,IAAM,EAAA,OAAA;EAIH;;;;;;;;;;;;;YApBD;;;;SAIH;;;;;;;;;;;;UAYC,KAAA,CAAM;;;;aAIH"}
1	+ {"version":3,"file":"ds-alert-banner.types.d.cts","names":[],"sources":["../../../src/components/ds-alert-banner/ds-alert-banner.types.tsx"],"sourcesContent":[],"mappings":";;;;cAIa;AAAA,KACD,kBAAA,GAD4F,CAAA,OAC/D,mBAD+D,CAAA,CAAA,MAAA,CAAA;AAC5F,UAEK,kBAAA,CAFwB;EAExB;;;EAkCR,IAAM,EAAA,OAAA;EAIH;;;;;;;;;;;;;YApBD;;;;SAIH;;;;;;;;;;;;UAYC,KAAA,CAAM;;;;aAIH"}

package/dist/components/ds-alert-banner/ds-alert-banner.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ds-alert-banner.types.js","names":[],"sources":["../../../src/components/ds-alert-banner/ds-alert-banner.types.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type React from 'react';\nimport type { IconType } from '../ds-icon';\n\nexport const alertBannerVariants = ['info-neutral', 'info-blue', 'warning', 'error', 'success'] as const;\nexport type AlertBannerVariant = (typeof alertBannerVariants)[number];\n\nexport interface DsAlertBannerProps {\n\t/*\n\t Controls whether the alert banner is visible\n\t /\n\topen: boolean;\n\t/\n\t Callback fired when the alert banner should be closed\n\t /\n\tonOpenChange: (open: boolean) => void;\n\t/\n\t Whether the alert banner should be inline (normal document flow) instead of global (designed for top of the page)\n\t * @default false\n\t /\n\tinline?: boolean;\n\t/\n\t The variant of the alert banner\n\t * @default 'info-blue'\n\t /\n\tvariant?: AlertBannerVariant;\n\t/\n\t Optional icon to display using DsIcon\n\t /\n\ticon?: IconType;\n\t/\n\t Whether the alert banner can be closed with an X button\n\t /\n\tclosable?: boolean;\n\t/\n\t Additional CSS class names\n\t /\n\tclassName?: string;\n\t/\n\t Additional styles to apply to the component\n\t /\n\tstyle?: React.CSSProperties;\n\t/\n\t Optional children to be rendered inside the component (typically action buttons)\n\t */\n\tchildren?: ReactNode;\n}\n"],"mappings":";AAIA,~~MAAa~~,sBAAsB;CAAC;CAAgB;CAAa;CAAW;CAAS;CAAU"}
1	+ {"version":3,"file":"ds-alert-banner.types.js","names":["ReactNode","React","IconType","alertBannerVariants","const","AlertBannerVariant","DsAlertBannerProps","open","onOpenChange","inline","variant","icon","closable","className","style","CSSProperties","children"],"sources":["../../../src/components/ds-alert-banner/ds-alert-banner.types.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type React from 'react';\nimport type { IconType } from '../ds-icon';\n\nexport const alertBannerVariants = ['info-neutral', 'info-blue', 'warning', 'error', 'success'] as const;\nexport type AlertBannerVariant = (typeof alertBannerVariants)[number];\n\nexport interface DsAlertBannerProps {\n\t/*\n\t Controls whether the alert banner is visible\n\t /\n\topen: boolean;\n\t/\n\t Callback fired when the alert banner should be closed\n\t /\n\tonOpenChange: (open: boolean) => void;\n\t/\n\t Whether the alert banner should be inline (normal document flow) instead of global (designed for top of the page)\n\t * @default false\n\t /\n\tinline?: boolean;\n\t/\n\t The variant of the alert banner\n\t * @default 'info-blue'\n\t /\n\tvariant?: AlertBannerVariant;\n\t/\n\t Optional icon to display using DsIcon\n\t /\n\ticon?: IconType;\n\t/\n\t Whether the alert banner can be closed with an X button\n\t /\n\tclosable?: boolean;\n\t/\n\t Additional CSS class names\n\t /\n\tclassName?: string;\n\t/\n\t Additional styles to apply to the component\n\t /\n\tstyle?: React.CSSProperties;\n\t/\n\t Optional children to be rendered inside the component (typically action buttons)\n\t */\n\tchildren?: ReactNode;\n}\n"],"mappings":";AAIA,MAAaG,sBAAsB;CAAC;CAAgB;CAAa;CAAW;CAAS;CAAU"}