@drivenets/design-system 0.0.2 → 0.0.4

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":["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"}

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,135 @@
+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 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");
+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 = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(17);
+	const { items, onSelect, className } = t0;
+	const location = (0, __tanstack_react_router.useLocation)();
+	const [search, setSearch] = (0, react.useState)("");
+	let t1;
+	if ($[0] !== className) {
+		t1 = (0, classnames.default)(require_ds_breadcrumb_module.default.breadcrumb, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== items || $[3] !== location || $[4] !== onSelect || $[5] !== search) {
+		let t3$1;
+		if ($[7] !== items.length || $[8] !== location || $[9] !== onSelect || $[10] !== search) {
+			t3$1 = (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: _temp,
+							slots: { startAdornment: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+								icon: "search",
+								size: "tiny"
+							}) }
+						}) }), filteredOptions.map((opt_0) => {
+							const selected = selectedOption?.href === opt_0.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_0.href,
+									selected,
+									children: [opt_0.label, selected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_dropdown_menu.DsDropdownMenu.ItemIndicator, {})]
+								})
+							}, opt_0.href);
+						})] })]
+					})
+				}, index);
+			};
+			$[7] = items.length;
+			$[8] = location;
+			$[9] = onSelect;
+			$[10] = search;
+			$[11] = t3$1;
+		} else t3$1 = $[11];
+		t2 = items.map(t3$1);
+		$[2] = items;
+		$[3] = location;
+		$[4] = onSelect;
+		$[5] = search;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[12] !== t2) {
+		t3 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", {
+			className: require_ds_breadcrumb_module.default.list,
+			children: t2
+		});
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
+	let t4;
+	if ($[14] !== t1 || $[15] !== t3) {
+		t4 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
+			className: t1,
+			"aria-label": "Breadcrumb",
+			children: t3
+		});
+		$[14] = t1;
+		$[15] = t3;
+		$[16] = t4;
+	} else t4 = $[16];
+	return t4;
+};
+var ds_breadcrumb_default = DsBreadcrumb;
+function _temp(e) {
+	return e.stopPropagation();
+}
+
+//#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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-breadcrumb.d.ts","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.js

@@ -0,0 +1,134 @@
+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 ds_breadcrumb_module_default from "./ds-breadcrumb.module.js";
+import ds_text_input_default from "../ds-text-input/ds-text-input.js";
+import { DsDropdownMenu } from "../ds-dropdown-menu/ds-dropdown-menu.js";
+import "../ds-dropdown-menu/index.js";
+import "../ds-text-input/index.js";
+import { c } from "react/compiler-runtime";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Link, useLocation } from "@tanstack/react-router";
+
+//#region src/components/ds-breadcrumb/ds-breadcrumb.tsx
+/**
+* Design system Breadcrumb component
+*/
+const DsBreadcrumb = (t0) => {
+	const $ = c(17);
+	const { items, onSelect, className } = t0;
+	const location = useLocation();
+	const [search, setSearch] = useState("");
+	let t1;
+	if ($[0] !== className) {
+		t1 = classNames(ds_breadcrumb_module_default.breadcrumb, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== items || $[3] !== location || $[4] !== onSelect || $[5] !== search) {
+		let t3$1;
+		if ($[7] !== items.length || $[8] !== location || $[9] !== onSelect || $[10] !== search) {
+			t3$1 = (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__ */ jsx("li", {
+					className: ds_breadcrumb_module_default.breadcrumbItem,
+					children: item.type === "link" ? /* @__PURE__ */ jsxs(Link, {
+						to: item.href,
+						className: classNames(ds_breadcrumb_module_default.link),
+						"aria-current": index === items.length - 1 ? "page" : void 0,
+						onClick: () => onSelect?.(item.href),
+						children: [item.icon && /* @__PURE__ */ jsx(ds_icon_default, {
+							icon: item.icon,
+							className: ds_breadcrumb_module_default.icon,
+							size: "small"
+						}), item.label]
+					}) : /* @__PURE__ */ jsxs(DsDropdownMenu.Root, {
+						onSelect,
+						children: [/* @__PURE__ */ jsxs(DsDropdownMenu.Trigger, {
+							className: ds_breadcrumb_module_default.trigger,
+							"aria-current": index === items.length - 1 ? "page" : void 0,
+							children: [
+								item.icon && /* @__PURE__ */ jsx(ds_icon_default, {
+									icon: item.icon,
+									className: ds_breadcrumb_module_default.icon,
+									size: "small"
+								}),
+								selectedOption?.label || item.label,
+								/* @__PURE__ */ jsx(ds_icon_default, {
+									icon: "arrow_drop_down",
+									className: ds_breadcrumb_module_default.dropdownIcon
+								})
+							]
+						}), /* @__PURE__ */ jsxs(DsDropdownMenu.Content, { children: [/* @__PURE__ */ jsx(DsDropdownMenu.Header, { children: /* @__PURE__ */ jsx(ds_text_input_default, {
+							placeholder: "Search",
+							value: search,
+							onValueChange: setSearch,
+							onKeyDown: _temp,
+							slots: { startAdornment: /* @__PURE__ */ jsx(ds_icon_default, {
+								icon: "search",
+								size: "tiny"
+							}) }
+						}) }), filteredOptions.map((opt_0) => {
+							const selected = selectedOption?.href === opt_0.href;
+							return /* @__PURE__ */ jsx(ds_typography_default, {
+								className: ds_breadcrumb_module_default.itemLabel,
+								variant: "body-sm-reg",
+								asChild: true,
+								children: /* @__PURE__ */ jsxs(DsDropdownMenu.Item, {
+									value: opt_0.href,
+									selected,
+									children: [opt_0.label, selected && /* @__PURE__ */ jsx(DsDropdownMenu.ItemIndicator, {})]
+								})
+							}, opt_0.href);
+						})] })]
+					})
+				}, index);
+			};
+			$[7] = items.length;
+			$[8] = location;
+			$[9] = onSelect;
+			$[10] = search;
+			$[11] = t3$1;
+		} else t3$1 = $[11];
+		t2 = items.map(t3$1);
+		$[2] = items;
+		$[3] = location;
+		$[4] = onSelect;
+		$[5] = search;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[12] !== t2) {
+		t3 = /* @__PURE__ */ jsx("ol", {
+			className: ds_breadcrumb_module_default.list,
+			children: t2
+		});
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
+	let t4;
+	if ($[14] !== t1 || $[15] !== t3) {
+		t4 = /* @__PURE__ */ jsx("nav", {
+			className: t1,
+			"aria-label": "Breadcrumb",
+			children: t3
+		});
+		$[14] = t1;
+		$[15] = t3;
+		$[16] = t4;
+	} else t4 = $[16];
+	return t4;
+};
+var ds_breadcrumb_default = DsBreadcrumb;
+function _temp(e) {
+	return e.stopPropagation();
+}
+
+//#endregion
+export { ds_breadcrumb_default as default };
+//# sourceMappingURL=ds-breadcrumb.js.map

package/dist/components/ds-breadcrumb/ds-breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-breadcrumb.js","names":["React","useState","Link","useLocation","classNames","styles","DsBreadcrumbProps","DsIcon","DsDropdownMenu","DsTextInput","DsTypography","DsBreadcrumb","FC","t0","$","_c","items","onSelect","className","location","search","setSearch","t1","breadcrumb","t2","t3","length","item","index","selectedOption","type","options","find","option","href","pathname","filteredOptions","filter","opt","label","toLowerCase","includes","breadcrumbItem","link","undefined","icon","trigger","dropdownIcon","_temp","startAdornment","map","opt_0","selected","itemLabel","list","t4","e","stopPropagation"],"sources":["../../../src/components/ds-breadcrumb/ds-breadcrumb.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState } from 'react';\nimport { Link, useLocation } from '@tanstack/react-router';\nimport classNames from 'classnames';\nimport styles from './ds-breadcrumb.module.scss';\nimport type { DsBreadcrumbProps } from './ds-breadcrumb.types';\nimport { DsIcon } from '../ds-icon';\nimport { DsDropdownMenu } from '../ds-dropdown-menu';\nimport { DsTextInput } from '../ds-text-input/index';\nimport { DsTypography } from '../ds-typography';\n\n/**\n * Design system Breadcrumb component\n */\nconst DsBreadcrumb: React.FC<DsBreadcrumbProps> = ({ items, onSelect, className }) => {\n\tconst location = useLocation();\n\tconst [search, setSearch] = useState('');\n\n\treturn (\n\t\t<nav className={classNames(styles.breadcrumb, className)} aria-label=\"Breadcrumb\">\n\t\t\t<ol className={styles.list}>\n\t\t\t\t{items.map((item, index) => {\n\t\t\t\t\tconst selectedOption =\n\t\t\t\t\t\titem.type === 'dropdown'\n\t\t\t\t\t\t\t? item.options.find((option) => option.href === location.pathname)\n\t\t\t\t\t\t\t: null;\n\n\t\t\t\t\tconst filteredOptions =\n\t\t\t\t\t\titem.type === 'dropdown'\n\t\t\t\t\t\t\t? item.options.filter((opt) => opt.label.toLowerCase().includes(search.toLowerCase()))\n\t\t\t\t\t\t\t: [];\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<li key={index} className={styles.breadcrumbItem}>\n\t\t\t\t\t\t\t{item.type === 'link' ? (\n\t\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\t\tto={item.href}\n\t\t\t\t\t\t\t\t\tclassName={classNames(styles.link)}\n\t\t\t\t\t\t\t\t\taria-current={index === items.length - 1 ? 'page' : undefined}\n\t\t\t\t\t\t\t\t\tonClick={() => onSelect?.(item.href)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{item.icon && <DsIcon icon={item.icon} className={styles.icon} size=\"small\" />}\n\t\t\t\t\t\t\t\t\t{item.label}\n\t\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<DsDropdownMenu.Root onSelect={onSelect}>\n\t\t\t\t\t\t\t\t\t<DsDropdownMenu.Trigger\n\t\t\t\t\t\t\t\t\t\tclassName={styles.trigger}\n\t\t\t\t\t\t\t\t\t\taria-current={index === items.length - 1 ? 'page' : undefined}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{item.icon && <DsIcon icon={item.icon} className={styles.icon} size=\"small\" />}\n\t\t\t\t\t\t\t\t\t\t{selectedOption?.label || item.label}\n\t\t\t\t\t\t\t\t\t\t<DsIcon icon=\"arrow_drop_down\" className={styles.dropdownIcon} />\n\t\t\t\t\t\t\t\t\t</DsDropdownMenu.Trigger>\n\t\t\t\t\t\t\t\t\t<DsDropdownMenu.Content>\n\t\t\t\t\t\t\t\t\t\t<DsDropdownMenu.Header>\n\t\t\t\t\t\t\t\t\t\t\t<DsTextInput\n\t\t\t\t\t\t\t\t\t\t\t\tplaceholder=\"Search\"\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={search}\n\t\t\t\t\t\t\t\t\t\t\t\tonValueChange={setSearch}\n\t\t\t\t\t\t\t\t\t\t\t\tonKeyDown={(e) => e.stopPropagation()}\n\t\t\t\t\t\t\t\t\t\t\t\tslots={{\n\t\t\t\t\t\t\t\t\t\t\t\t\tstartAdornment: <DsIcon icon=\"search\" size=\"tiny\" />,\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</DsDropdownMenu.Header>\n\t\t\t\t\t\t\t\t\t\t{filteredOptions.map((opt) => {\n\t\t\t\t\t\t\t\t\t\t\tconst selected = selectedOption?.href === opt.href;\n\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t<DsTypography\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={opt.href}\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName={styles.itemLabel}\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"body-sm-reg\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tasChild\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<DsDropdownMenu.Item value={opt.href} selected={selected}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{opt.label}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{selected && <DsDropdownMenu.ItemIndicator />}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</DsDropdownMenu.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t</DsTypography>\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t</DsDropdownMenu.Content>\n\t\t\t\t\t\t\t\t</DsDropdownMenu.Root>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</li>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</ol>\n\t\t</nav>\n\t);\n};\n\nexport default DsBreadcrumb;\n"],"mappings":"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"}

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

@@ -0,0 +1,16 @@
+
+//#region src/components/ds-breadcrumb/ds-breadcrumb.module.scss
+var ds_breadcrumb_module_default = {
+	"breadcrumb": "_breadcrumb_1784n_1",
+	"list": "_list_1784n_1",
+	"breadcrumbItem": "_breadcrumbItem_1784n_1",
+	"link": "_link_1784n_1",
+	"trigger": "_trigger_1784n_1",
+	"active": "_active_1784n_1",
+	"icon": "_icon_1784n_1",
+	"dropdownIcon": "_dropdownIcon_1784n_1",
+	"itemLabel": "_itemLabel_1784n_1"
+};
+
+//#endregion
+exports.default = ds_breadcrumb_module_default;

package/dist/components/ds-breadcrumb/ds-breadcrumb.module.js

@@ -0,0 +1,16 @@
+//#region src/components/ds-breadcrumb/ds-breadcrumb.module.scss
+var ds_breadcrumb_module_default = {
+	"breadcrumb": "_breadcrumb_1784n_1",
+	"list": "_list_1784n_1",
+	"breadcrumbItem": "_breadcrumbItem_1784n_1",
+	"link": "_link_1784n_1",
+	"trigger": "_trigger_1784n_1",
+	"active": "_active_1784n_1",
+	"icon": "_icon_1784n_1",
+	"dropdownIcon": "_dropdownIcon_1784n_1",
+	"itemLabel": "_itemLabel_1784n_1"
+};
+
+//#endregion
+export { ds_breadcrumb_module_default as default };
+//# sourceMappingURL=ds-breadcrumb.module.js.map

package/dist/components/ds-breadcrumb/ds-breadcrumb.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-breadcrumb.module.js","names":[],"sources":["../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/components/ds-breadcrumb/ds-breadcrumb.module.scss","../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/styles/_typography.scss"],"sourcesContent":["@use '../../styles/typography';\n\n@mixin breadcrumb-item {\n\t@include typography.body-sm-reg;\n\tcolor: var(--color-background-action);\n\ttext-decoration: none;\n\toutline: none;\n\tpadding: var(--exo-spacing-2x-small) var(--spacing-sm);\n\tgap: var(--exo-spacing-2x-small);\n\tborder-radius: var(--exo-spacing-2x-small);\n\tdisplay: flex;\n\talign-items: center;\n\n\t&:hover {\n\t\tcolor: var(--color-background-selected);\n\t\tbackground: var(--color-background-action-tertiary);\n\t}\n\n\t&:active {\n\t\tcolor: var(--color-background-selected-hover);\n\t\tbackground: var(--color-background-action-secondary-hover);\n\t}\n\n\t&:focus {\n\t\toutline: 2px solid var(--color-background-selected);\n\t\toutline-offset: 0;\n\t}\n\n\t&:disabled {\n\t\tcolor: var(--color-background-disable);\n\t}\n}\n\n.breadcrumb {\n\tdisplay: flex;\n\talign-items: center;\n}\n\n.list {\n\tdisplay: flex;\n\tlist-style: none;\n\tpadding: 0;\n\tmargin: 0;\n}\n\n.breadcrumbItem {\n\tdisplay: flex;\n\talign-items: center;\n\n\t&:not(:last-child)::after {\n\t\tcontent: '/';\n\t\t@include typography.body-sm-reg;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tcolor: var(--color-font-disabled);\n\t\twidth: var(--icon-width-small);\n\t\theight: var(--icon-width-small);\n\t}\n\n\t&:last-child {\n\t\t.link,\n\t\t.trigger {\n\t\t\t@include typography.body-sm-md;\n\t\t}\n\t}\n}\n\n.link {\n\t@include breadcrumb-item;\n}\n\n.active {\n\t@include typography.body-sm-md;\n}\n\n.trigger {\n\t@include breadcrumb-item;\n\tbackground: none;\n\tborder: none;\n\tcursor: pointer;\n}\n\n.icon {\n\tmargin-right: var(--exo-spacing-2x-small);\n\tdisplay: flex;\n\talign-items: center;\n}\n\n.dropdownIcon {\n\tmargin-left: var(--exo-spacing-2x-small);\n\tdisplay: flex;\n\talign-items: center;\n}\n\n.itemLabel {\n\t@include typography.ellipsis;\n\tcolor: var(--color-font-main);\n}\n"],"mappings":""}

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

@@ -0,0 +1,36 @@
+import { IconType } from "../ds-icon/ds-icon.types.cjs";
+
+//#region src/components/ds-breadcrumb/ds-breadcrumb.types.d.ts
+type DsBreadcrumbItem = {
+  type: 'link';
+  label: string;
+  href: string;
+  icon?: IconType;
+} | {
+  type: 'dropdown';
+  label: string;
+  options: {
+    label: string;
+    href: string;
+  }[];
+  icon?: IconType;
+};
+interface DsBreadcrumbProps {
+  /**
+   * The items to be displayed in the breadcrumb
+   */
+  items: DsBreadcrumbItem[];
+  /**
+   * The event handler to be called when an option is selected
+   *
+   * @param href
+   */
+  onSelect?: (href: string) => void;
+  /**
+   * Additional CSS class name to be applied to the breadcrumb
+   */
+  className?: string;
+}
+//#endregion
+export { DsBreadcrumbItem, DsBreadcrumbProps };
+//# sourceMappingURL=ds-breadcrumb.types.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-breadcrumb.types.d.cts","names":[],"sources":["../../../src/components/ds-breadcrumb/ds-breadcrumb.types.tsx"],"sourcesContent":[],"mappings":";;;KAEY,gBAAA;;EAAA,KAAA,EAAA,MAAA;EAcK,IAAA,EAAA,MAAA;SATP;;;;;;;;SAMA;;UAGO,iBAAA;;;;SAIT"}

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

@@ -0,0 +1,37 @@
+import { IconType } from "../ds-icon/ds-icon.types.js";
+import "../ds-icon/index.js";
+
+//#region src/components/ds-breadcrumb/ds-breadcrumb.types.d.ts
+type DsBreadcrumbItem = {
+  type: 'link';
+  label: string;
+  href: string;
+  icon?: IconType;
+} | {
+  type: 'dropdown';
+  label: string;
+  options: {
+    label: string;
+    href: string;
+  }[];
+  icon?: IconType;
+};
+interface DsBreadcrumbProps {
+  /**
+   * The items to be displayed in the breadcrumb
+   */
+  items: DsBreadcrumbItem[];
+  /**
+   * The event handler to be called when an option is selected
+   *
+   * @param href
+   */
+  onSelect?: (href: string) => void;
+  /**
+   * Additional CSS class name to be applied to the breadcrumb
+   */
+  className?: string;
+}
+//#endregion
+export { DsBreadcrumbItem, DsBreadcrumbProps };
+//# sourceMappingURL=ds-breadcrumb.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-breadcrumb.types.d.ts","names":[],"sources":["../../../src/components/ds-breadcrumb/ds-breadcrumb.types.tsx"],"sourcesContent":[],"mappings":";;;;KAEY,gBAAA;;;EAAA,IAAA,EAAA,MAAA;EAcK,IAAA,CAAA,EATP,QASO;;;;;;;;SAHP;;UAGO,iBAAA;;;;SAIT"}

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

@@ -0,0 +1 @@
+const require_ds_breadcrumb = require('./ds-breadcrumb.cjs');

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

@@ -0,0 +1,2 @@
+import { DsBreadcrumbItem, DsBreadcrumbProps } from "./ds-breadcrumb.types.js";
+import { DsBreadcrumb } from "./ds-breadcrumb.js";

package/dist/components/ds-breadcrumb/index.js

@@ -0,0 +1 @@
+import ds_breadcrumb_default from "./ds-breadcrumb.js";

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

@@ -0,0 +1,32 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_ds_button_legacy = require('./versions/ds-button-legacy/ds-button-legacy.cjs');
+require('./versions/ds-button-legacy/index.cjs');
+const require_ds_button_new = require('./versions/ds-button-new/ds-button-new.cjs');
+require('./versions/ds-button-new/index.cjs');
+let react_compiler_runtime = require("react/compiler-runtime");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/ds-button/ds-button.tsx
+const DsButton = (props) => {
+	const $ = (0, react_compiler_runtime.c)(4);
+	if (props.design === "v1.2") {
+		let t0$1;
+		if ($[0] !== props) {
+			t0$1 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_button_new.default, { ...props });
+			$[0] = props;
+			$[1] = t0$1;
+		} else t0$1 = $[1];
+		return t0$1;
+	}
+	let t0;
+	if ($[2] !== props) {
+		t0 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_button_legacy.default, { ...props });
+		$[2] = props;
+		$[3] = t0;
+	} else t0 = $[3];
+	return t0;
+};
+var ds_button_default = DsButton;
+
+//#endregion
+exports.default = ds_button_default;

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

@@ -0,0 +1,8 @@
+import { DsButtonUnifiedProps } from "./ds-button.types.cjs";
+import * as react_jsx_runtime19 from "react/jsx-runtime";
+
+//#region src/components/ds-button/ds-button.d.ts
+declare const DsButton: (props: DsButtonUnifiedProps) => react_jsx_runtime19.JSX.Element;
+//#endregion
+export { DsButton };
+//# sourceMappingURL=ds-button.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-button.d.cts","names":[],"sources":["../../../src/components/ds-button/ds-button.tsx"],"sourcesContent":[],"mappings":";;;;cAIM,kBAAmB,yBAAoB,mBAAA,CAAA,GAAA,CAAA"}

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

@@ -0,0 +1,8 @@
+import { DsButtonUnifiedProps } from "./ds-button.types.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/ds-button/ds-button.d.ts
+declare const DsButton: (props: DsButtonUnifiedProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DsButton };
+//# sourceMappingURL=ds-button.d.ts.map

package/dist/components/ds-button/ds-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-button.d.ts","names":[],"sources":["../../../src/components/ds-button/ds-button.tsx"],"sourcesContent":[],"mappings":";;;;cAIM,kBAAmB,yBAAoB,kBAAA,CAAA,GAAA,CAAA"}

package/dist/components/ds-button/ds-button.js

@@ -0,0 +1,32 @@
+import ds_button_legacy_default from "./versions/ds-button-legacy/ds-button-legacy.js";
+import "./versions/ds-button-legacy/index.js";
+import ds_button_new_default from "./versions/ds-button-new/ds-button-new.js";
+import "./versions/ds-button-new/index.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/ds-button/ds-button.tsx
+const DsButton = (props) => {
+	const $ = c(4);
+	if (props.design === "v1.2") {
+		let t0$1;
+		if ($[0] !== props) {
+			t0$1 = /* @__PURE__ */ jsx(ds_button_new_default, { ...props });
+			$[0] = props;
+			$[1] = t0$1;
+		} else t0$1 = $[1];
+		return t0$1;
+	}
+	let t0;
+	if ($[2] !== props) {
+		t0 = /* @__PURE__ */ jsx(ds_button_legacy_default, { ...props });
+		$[2] = props;
+		$[3] = t0;
+	} else t0 = $[3];
+	return t0;
+};
+var ds_button_default = DsButton;
+
+//#endregion
+export { ds_button_default as default };
+//# sourceMappingURL=ds-button.js.map

package/dist/components/ds-button/ds-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-button.js","names":["DsButtonLegacy","DsButtonNew","DsButtonUnifiedProps","DsButton","props","$","_c","design","t0"],"sources":["../../../src/components/ds-button/ds-button.tsx"],"sourcesContent":["import { DsButtonLegacy } from './versions/ds-button-legacy';\nimport { DsButtonNew } from './versions/ds-button-new';\nimport type { DsButtonUnifiedProps } from './ds-button.types';\n\nconst DsButton = (props: DsButtonUnifiedProps) => {\n\tif (props.design === 'v1.2') {\n\t\treturn <DsButtonNew {...props} />;\n\t}\n\treturn <DsButtonLegacy {...props} />;\n};\n\nexport default DsButton;\n"],"mappings":";;;;;;;;AAIA,MAAMG,YAAWC,UAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;AAChB,KAAIF,MAAKG,WAAY,QAAM;EAAA,IAAAC;AAAA,MAAAH,EAAA,OAAAD,OAAA;AACnBI,UAAA,oBAAC,yBAAW,GAAKJ,QAAS;AAAAC,KAAA,KAAAD;AAAAC,KAAA,KAAAG;QAAAA,QAAAH,EAAA;AAAA,SAA1BG;;CACP,IAAAA;AAAA,KAAAH,EAAA,OAAAD,OAAA;AACMI,OAAA,oBAAC,4BAAc,GAAKJ,QAAS;AAAAC,IAAA,KAAAD;AAAAC,IAAA,KAAAG;OAAAA,MAAAH,EAAA;AAAA,QAA7BG;;AAGR,wBAAeL"}