@drivenets/design-system 0.0.1 → 0.0.3

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @drivenets/design-system
 
+## 0.0.3
+
+### Patch Changes
+
+- 30483ae: Fix build issues
+- 17c1f0f: Export css bundle
+
+## 0.0.2
+
+### Patch Changes
+
+- cd458e3: Configure trusted publishing
+
 ## 0.0.1
 
 ### Patch Changes

package/dist/_virtual/rolldown_runtime.cjs

@@ -0,0 +1,29 @@
+//#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

@@ -0,0 +1,77 @@
+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 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 = ({ 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);
+	};
+	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"
+				})
+			})
+		]
+	});
+};
+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;
+var ds_alert_banner_default = DsAlertBanner;
+
+//#endregion
+exports.default = ds_alert_banner_default;

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

@@ -0,0 +1,53 @@
+import { DsAlertBannerProps } from "./ds-alert-banner.types.cjs";
+import * as react_jsx_runtime18 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_runtime18.JSX.Element | null;
+  Title: ({
+    style,
+    className,
+    children
+  }: {
+    style?: CSSProperties;
+    className?: string;
+    children: ReactNode;
+  }) => react_jsx_runtime18.JSX.Element;
+  Body: ({
+    style,
+    className,
+    children
+  }: {
+    style?: CSSProperties;
+    className?: string;
+    children: ReactNode;
+  }) => react_jsx_runtime18.JSX.Element;
+  Actions: ({
+    style,
+    className,
+    children
+  }: {
+    style?: CSSProperties;
+    className?: string;
+    children: ReactNode;
+  }) => react_jsx_runtime18.JSX.Element;
+};
+//#endregion
+export { DsAlertBanner };
+//# sourceMappingURL=ds-alert-banner.d.cts.map

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

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

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

@@ -0,0 +1,53 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,76 @@
+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 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 = ({ 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);
+	};
+	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"
+				})
+			})
+		]
+	});
+};
+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;
+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

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

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

@@ -0,0 +1,21 @@
+
+//#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

@@ -0,0 +1,21 @@
+//#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

@@ -0,0 +1 @@
+{"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

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

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

@@ -0,0 +1,49 @@
+import { IconType } from "../ds-icon/ds-icon.types.cjs";
+import React, { ReactNode } from "react";
+
+//#region src/components/ds-alert-banner/ds-alert-banner.types.d.ts
+declare const alertBannerVariants: readonly ["info-neutral", "info-blue", "warning", "error", "success"];
+type AlertBannerVariant = (typeof alertBannerVariants)[number];
+interface DsAlertBannerProps {
+  /**
+   * Controls whether the alert banner is visible
+   */
+  open: boolean;
+  /**
+   * Callback fired when the alert banner should be closed
+   */
+  onOpenChange: (open: boolean) => void;
+  /**
+   * Whether the alert banner should be inline (normal document flow) instead of global (designed for top of the page)
+   * @default false
+   */
+  inline?: boolean;
+  /**
+   * The variant of the alert banner
+   * @default 'info-blue'
+   */
+  variant?: AlertBannerVariant;
+  /**
+   * Optional icon to display using DsIcon
+   */
+  icon?: IconType;
+  /**
+   * Whether the alert banner can be closed with an X button
+   */
+  closable?: boolean;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Additional styles to apply to the component
+   */
+  style?: React.CSSProperties;
+  /**
+   * Optional children to be rendered inside the component (typically action buttons)
+   */
+  children?: ReactNode;
+}
+//#endregion
+export { AlertBannerVariant, DsAlertBannerProps, alertBannerVariants };
+//# sourceMappingURL=ds-alert-banner.types.d.cts.map

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

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

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

@@ -0,0 +1,50 @@
+import { IconType } from "../ds-icon/ds-icon.types.js";
+import "../ds-icon/index.js";
+import React, { ReactNode } from "react";
+
+//#region src/components/ds-alert-banner/ds-alert-banner.types.d.ts
+declare const alertBannerVariants: readonly ["info-neutral", "info-blue", "warning", "error", "success"];
+type AlertBannerVariant = (typeof alertBannerVariants)[number];
+interface DsAlertBannerProps {
+  /**
+   * Controls whether the alert banner is visible
+   */
+  open: boolean;
+  /**
+   * Callback fired when the alert banner should be closed
+   */
+  onOpenChange: (open: boolean) => void;
+  /**
+   * Whether the alert banner should be inline (normal document flow) instead of global (designed for top of the page)
+   * @default false
+   */
+  inline?: boolean;
+  /**
+   * The variant of the alert banner
+   * @default 'info-blue'
+   */
+  variant?: AlertBannerVariant;
+  /**
+   * Optional icon to display using DsIcon
+   */
+  icon?: IconType;
+  /**
+   * Whether the alert banner can be closed with an X button
+   */
+  closable?: boolean;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Additional styles to apply to the component
+   */
+  style?: React.CSSProperties;
+  /**
+   * Optional children to be rendered inside the component (typically action buttons)
+   */
+  children?: ReactNode;
+}
+//#endregion
+export { AlertBannerVariant, DsAlertBannerProps, alertBannerVariants };
+//# sourceMappingURL=ds-alert-banner.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-alert-banner.types.d.ts","names":[],"sources":["../../../src/components/ds-alert-banner/ds-alert-banner.types.tsx"],"sourcesContent":[],"mappings":";;;;;cAIa;KACD,kBAAA,WAA6B;AAD5B,UAGI,kBAAA,CAHuF;EAC5F;AAEZ;;EAsBQ,IAAA,EAAA,OAAA;EAYC;;;;;;;;;;;;;YAhBE;;;;SAIH;;;;;;;;;;;;UAYC,KAAA,CAAM;;;;aAIH"}

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

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

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

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

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

@@ -0,0 +1,2 @@
+const require_ds_alert_banner = require('./ds-alert-banner.cjs');
+const require_ds_alert_banner_types = require('./ds-alert-banner.types.cjs');

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

@@ -0,0 +1,2 @@
+import { AlertBannerVariant, DsAlertBannerProps, alertBannerVariants } from "./ds-alert-banner.types.js";
+import { DsAlertBanner } from "./ds-alert-banner.js";

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

@@ -0,0 +1,2 @@
+import ds_alert_banner_default from "./ds-alert-banner.js";
+import { alertBannerVariants } from "./ds-alert-banner.types.js";

package/dist/components/ds-breadcrumb/ds-breadcrumb.cjs

@@ -0,0 +1,92 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.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');
+const require_ds_breadcrumb_module = require('./ds-breadcrumb.module.cjs');
+const require_ds_text_input = require('../ds-text-input/ds-text-input.cjs');
+const require_ds_dropdown_menu = require('../ds-dropdown-menu/ds-dropdown-menu.cjs');
+require('../ds-dropdown-menu/index.cjs');
+require('../ds-text-input/index.cjs');
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let __tanstack_react_router = require("@tanstack/react-router");
+
+//#region src/components/ds-breadcrumb/ds-breadcrumb.tsx
+/**
+* Design system Breadcrumb component
+*/
+const DsBreadcrumb = ({ items, onSelect, className }) => {
+	const location = (0, __tanstack_react_router.useLocation)();
+	const [search, setSearch] = (0, react.useState)("");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
+		className: (0, classnames.default)(require_ds_breadcrumb_module.default.breadcrumb, className),
+		"aria-label": "Breadcrumb",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", {
+			className: require_ds_breadcrumb_module.default.list,
+			children: items.map((item, index) => {
+				const selectedOption = item.type === "dropdown" ? item.options.find((option) => option.href === location.pathname) : null;
+				const filteredOptions = item.type === "dropdown" ? item.options.filter((opt) => opt.label.toLowerCase().includes(search.toLowerCase())) : [];
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+					className: require_ds_breadcrumb_module.default.breadcrumbItem,
+					children: item.type === "link" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__tanstack_react_router.Link, {
+						to: item.href,
+						className: (0, classnames.default)(require_ds_breadcrumb_module.default.link),
+						"aria-current": index === items.length - 1 ? "page" : void 0,
+						onClick: () => onSelect?.(item.href),
+						children: [item.icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+							icon: item.icon,
+							className: require_ds_breadcrumb_module.default.icon,
+							size: "small"
+						}), item.label]
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ds_dropdown_menu.DsDropdownMenu.Root, {
+						onSelect,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ds_dropdown_menu.DsDropdownMenu.Trigger, {
+							className: require_ds_breadcrumb_module.default.trigger,
+							"aria-current": index === items.length - 1 ? "page" : void 0,
+							children: [
+								item.icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+									icon: item.icon,
+									className: require_ds_breadcrumb_module.default.icon,
+									size: "small"
+								}),
+								selectedOption?.label || item.label,
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+									icon: "arrow_drop_down",
+									className: require_ds_breadcrumb_module.default.dropdownIcon
+								})
+							]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ds_dropdown_menu.DsDropdownMenu.Content, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_dropdown_menu.DsDropdownMenu.Header, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_text_input.default, {
+							placeholder: "Search",
+							value: search,
+							onValueChange: setSearch,
+							onKeyDown: (e) => e.stopPropagation(),
+							slots: { startAdornment: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+								icon: "search",
+								size: "tiny"
+							}) }
+						}) }), filteredOptions.map((opt) => {
+							const selected = selectedOption?.href === opt.href;
+							return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_typography.default, {
+								className: require_ds_breadcrumb_module.default.itemLabel,
+								variant: "body-sm-reg",
+								asChild: true,
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ds_dropdown_menu.DsDropdownMenu.Item, {
+									value: opt.href,
+									selected,
+									children: [opt.label, selected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_dropdown_menu.DsDropdownMenu.ItemIndicator, {})]
+								})
+							}, opt.href);
+						})] })]
+					})
+				}, index);
+			})
+		})
+	});
+};
+var ds_breadcrumb_default = DsBreadcrumb;
+
+//#endregion
+exports.default = ds_breadcrumb_default;

package/dist/components/ds-breadcrumb/ds-breadcrumb.d.cts

@@ -0,0 +1,12 @@
+import { DsBreadcrumbProps } from "./ds-breadcrumb.types.cjs";
+import React from "react";
+
+//#region src/components/ds-breadcrumb/ds-breadcrumb.d.ts
+
+/**
+ * Design system Breadcrumb component
+ */
+declare const DsBreadcrumb: React.FC<DsBreadcrumbProps>;
+//#endregion
+export { DsBreadcrumb };
+//# sourceMappingURL=ds-breadcrumb.d.cts.map

package/dist/components/ds-breadcrumb/ds-breadcrumb.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-breadcrumb.d.cts","names":[],"sources":["../../../src/components/ds-breadcrumb/ds-breadcrumb.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAK+D;cASzD,cAAc,KAAA,CAAM,GAAG"}

package/dist/components/ds-breadcrumb/ds-breadcrumb.d.ts

@@ -0,0 +1,12 @@
+import { DsBreadcrumbProps } from "./ds-breadcrumb.types.js";
+import React from "react";
+
+//#region src/components/ds-breadcrumb/ds-breadcrumb.d.ts
+
+/**
+ * Design system Breadcrumb component
+ */
+declare const DsBreadcrumb: React.FC<DsBreadcrumbProps>;
+//#endregion
+export { DsBreadcrumb };
+//# sourceMappingURL=ds-breadcrumb.d.ts.map