@drivenets/design-system 0.0.1 → 0.0.3

package/dist/components/ds-smart-tabs/ds-smart-tabs.js

@@ -0,0 +1,89 @@
+import ds_icon_default from "../ds-icon/ds-icon.js";
+import "../ds-icon/index.js";
+import ds_smart_tabs_module_default from "./ds-smart-tabs.module.js";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+
+//#region src/components/ds-smart-tabs/ds-smart-tabs.tsx
+const colorMap = {
+	"dark-blue": "var(--color-background-info-strong)",
+	"light-blue": "var(--color-background-active-moderate)",
+	"dark-gray": "var(--color-background-brand)",
+	green: "var(--color-background-success-strong)",
+	fuchsia: "var(--color-data-fuchsia)",
+	blue: "var(--color-icon-information-secondary)",
+	gray: "var(--color-icon-information-main)",
+	red: "var(--color-icon-warning)",
+	amber: "var(--color-data-amber)"
+};
+const SmartTabsContext = createContext(null);
+const useSmartTabsContext = () => {
+	const context = useContext(SmartTabsContext);
+	if (!context) throw new Error("DsTab must be used within DsSmartTabs");
+	return context;
+};
+/**
+* Individual tab component
+*/
+const DsSmartTab = ({ label, value, icon, content, color, disabled, className, style = {}, ...props }) => {
+	const { activeTab, onTabClick } = useSmartTabsContext();
+	const tabClass = classNames(ds_smart_tabs_module_default.tab, {
+		[ds_smart_tabs_module_default.active]: activeTab === value,
+		[ds_smart_tabs_module_default.disabled]: disabled
+	}, className);
+	const tabStyle = {
+		...style,
+		...color && { "--tab-color": colorMap[color] }
+	};
+	const handleClick = () => {
+		if (!disabled) onTabClick(value);
+	};
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		className: tabClass,
+		style: tabStyle,
+		onClick: handleClick,
+		disabled,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(ds_icon_default, {
+				className: ds_smart_tabs_module_default.icon,
+				icon,
+				size: "small"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: ds_smart_tabs_module_default.label,
+				children: label
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: ds_smart_tabs_module_default.content,
+				children: content
+			})
+		]
+	});
+};
+/**
+* Design system SmartTabs component
+*/
+const DsSmartTabs = ({ activeTab, onTabClick, className, style = {}, children, ...props }) => {
+	const contextValue = {
+		activeTab,
+		onTabClick
+	};
+	return /* @__PURE__ */ jsx(SmartTabsContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			className: classNames(ds_smart_tabs_module_default.container, className),
+			style,
+			...props,
+			children
+		})
+	});
+};
+DsSmartTabs.Tab = DsSmartTab;
+var ds_smart_tabs_default = DsSmartTabs;
+
+//#endregion
+export { ds_smart_tabs_default as default };
+//# sourceMappingURL=ds-smart-tabs.js.map

package/dist/components/ds-smart-tabs/ds-smart-tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-smart-tabs.js","names":["colorMap: Record<Color, string>","DsSmartTab: React.FC<DsSmartTabProps>","styles","DsIcon","contextValue: SmartTabsContextType"],"sources":["../../../src/components/ds-smart-tabs/ds-smart-tabs.tsx"],"sourcesContent":["import { type CSSProperties, createContext, useContext } from 'react';\nimport type React from 'react';\nimport classNames from 'classnames';\nimport { DsIcon } from '../ds-icon';\nimport styles from './ds-smart-tabs.module.scss';\nimport type { Color, DsSmartTabProps, DsSmartTabsProps } from './ds-smart-tabs.types';\n\nconst colorMap: Record<Color, string> = {\n\t'dark-blue': 'var(--color-background-info-strong)',\n\t'light-blue': 'var(--color-background-active-moderate)',\n\t'dark-gray': 'var(--color-background-brand)',\n\tgreen: 'var(--color-background-success-strong)',\n\tfuchsia: 'var(--color-data-fuchsia)',\n\tblue: 'var(--color-icon-information-secondary)',\n\tgray: 'var(--color-icon-information-main)',\n\tred: 'var(--color-icon-warning)',\n\tamber: 'var(--color-data-amber)',\n};\n\ninterface SmartTabsContextType {\n\tactiveTab: string;\n\tonTabClick: (value: string) => void;\n}\n\nconst SmartTabsContext = createContext<SmartTabsContextType | null>(null);\n\nconst useSmartTabsContext = () => {\n\tconst context = useContext(SmartTabsContext);\n\tif (!context) {\n\t\tthrow new Error('DsTab must be used within DsSmartTabs');\n\t}\n\treturn context;\n};\n\n/**\n * Individual tab component\n */\nconst DsSmartTab: React.FC<DsSmartTabProps> = ({\n\tlabel,\n\tvalue,\n\ticon,\n\tcontent,\n\tcolor,\n\tdisabled,\n\tclassName,\n\tstyle = {},\n\t...props\n}) => {\n\tconst { activeTab, onTabClick } = useSmartTabsContext();\n\n\tconst tabClass = classNames(\n\t\tstyles.tab,\n\t\t{\n\t\t\t[styles.active]: activeTab === value,\n\t\t\t[styles.disabled]: disabled,\n\t\t},\n\t\tclassName,\n\t);\n\tconst tabStyle = {\n\t\t...style,\n\t\t...(color && ({ '--tab-color': colorMap[color] } as CSSProperties)),\n\t};\n\n\tconst handleClick = () => {\n\t\tif (!disabled) {\n\t\t\tonTabClick(value);\n\t\t}\n\t};\n\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclassName={tabClass}\n\t\t\tstyle={tabStyle}\n\t\t\tonClick={handleClick}\n\t\t\tdisabled={disabled}\n\t\t\t{...props}\n\t\t>\n\t\t\t<DsIcon className={styles.icon} icon={icon} size=\"small\" />\n\t\t\t<span className={styles.label}>{label}</span>\n\t\t\t<span className={styles.content}>{content}</span>\n\t\t</button>\n\t);\n};\n\n/**\n * Design system SmartTabs component\n */\nconst DsSmartTabs = ({\n\tactiveTab,\n\tonTabClick,\n\tclassName,\n\tstyle = {},\n\tchildren,\n\t...props\n}: DsSmartTabsProps) => {\n\tconst contextValue: SmartTabsContextType = {\n\t\tactiveTab,\n\t\tonTabClick,\n\t};\n\n\treturn (\n\t\t<SmartTabsContext.Provider value={contextValue}>\n\t\t\t<div className={classNames(styles.container, className)} style={style} {...props}>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</SmartTabsContext.Provider>\n\t);\n};\n\nDsSmartTabs.Tab = DsSmartTab;\n\nexport default DsSmartTabs;\n"],"mappings":";;;;;;;;AAOA,MAAMA,WAAkC;CACvC,aAAa;CACb,cAAc;CACd,aAAa;CACb,OAAO;CACP,SAAS;CACT,MAAM;CACN,MAAM;CACN,KAAK;CACL,OAAO;CACP;AAOD,MAAM,mBAAmB,cAA2C,KAAK;AAEzE,MAAM,4BAA4B;CACjC,MAAM,UAAU,WAAW,iBAAiB;AAC5C,KAAI,CAAC,QACJ,OAAM,IAAI,MAAM,wCAAwC;AAEzD,QAAO;;;;;AAMR,MAAMC,cAAyC,EAC9C,OACA,OACA,MACA,SACA,OACA,UACA,WACA,QAAQ,EAAE,EACV,GAAG,YACE;CACL,MAAM,EAAE,WAAW,eAAe,qBAAqB;CAEvD,MAAM,WAAW,WAChBC,6BAAO,KACP;GACEA,6BAAO,SAAS,cAAc;GAC9BA,6BAAO,WAAW;EACnB,EACD,UACA;CACD,MAAM,WAAW;EAChB,GAAG;EACH,GAAI,SAAU,EAAE,eAAe,SAAS,QAAQ;EAChD;CAED,MAAM,oBAAoB;AACzB,MAAI,CAAC,SACJ,YAAW,MAAM;;AAInB,QACC,qBAAC;EACA,MAAK;EACL,WAAW;EACX,OAAO;EACP,SAAS;EACC;EACV,GAAI;;GAEJ,oBAACC;IAAO,WAAWD,6BAAO;IAAY;IAAM,MAAK;KAAU;GAC3D,oBAAC;IAAK,WAAWA,6BAAO;cAAQ;KAAa;GAC7C,oBAAC;IAAK,WAAWA,6BAAO;cAAU;KAAe;;GACzC;;;;;AAOX,MAAM,eAAe,EACpB,WACA,YACA,WACA,QAAQ,EAAE,EACV,UACA,GAAG,YACoB;CACvB,MAAME,eAAqC;EAC1C;EACA;EACA;AAED,QACC,oBAAC,iBAAiB;EAAS,OAAO;YACjC,oBAAC;GAAI,WAAW,WAAWF,6BAAO,WAAW,UAAU;GAAS;GAAO,GAAI;GACzE;IACI;GACqB;;AAI9B,YAAY,MAAM;AAElB,4BAAe"}

package/dist/components/ds-smart-tabs/ds-smart-tabs.module.cjs

@@ -0,0 +1,15 @@
+
+//#region src/components/ds-smart-tabs/ds-smart-tabs.module.scss
+var ds_smart_tabs_module_default = {
+	"container": "_container_fu70w_1",
+	"tab": "_tab_fu70w_1",
+	"active": "_active_fu70w_1",
+	"icon": "_icon_fu70w_1",
+	"value": "_value_fu70w_1",
+	"disabled": "_disabled_fu70w_1",
+	"label": "_label_fu70w_1",
+	"content": "_content_fu70w_1"
+};
+
+//#endregion
+exports.default = ds_smart_tabs_module_default;

package/dist/components/ds-smart-tabs/ds-smart-tabs.module.js

@@ -0,0 +1,15 @@
+//#region src/components/ds-smart-tabs/ds-smart-tabs.module.scss
+var ds_smart_tabs_module_default = {
+	"container": "_container_fu70w_1",
+	"tab": "_tab_fu70w_1",
+	"active": "_active_fu70w_1",
+	"icon": "_icon_fu70w_1",
+	"value": "_value_fu70w_1",
+	"disabled": "_disabled_fu70w_1",
+	"label": "_label_fu70w_1",
+	"content": "_content_fu70w_1"
+};
+
+//#endregion
+export { ds_smart_tabs_module_default as default };
+//# sourceMappingURL=ds-smart-tabs.module.js.map

package/dist/components/ds-smart-tabs/ds-smart-tabs.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-smart-tabs.module.js","names":[],"sources":["../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/components/ds-smart-tabs/ds-smart-tabs.module.scss","../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/styles/_typography.scss"],"sourcesContent":["@use '../../styles/typography';\n\n.container {\n\tdisplay: flex;\n\tgap: 8px;\n\n\t.tab {\n\t\t@include typography.body-sm-reg;\n\t\t@include typography.ellipsis;\n\t\tdisplay: flex;\n\t\theight: 48px;\n\t\tpadding: var(--spacing-xs) var(--spacing-sm);\n\t\talign-items: center;\n\t\tgap: 8px;\n\t\tborder-radius: 4px;\n\t\tborder: 1px solid var(--color-border);\n\t\tbackground: var(--color-background);\n\t\tmin-width: 250px;\n\n\t\t&.active {\n\t\t\t@include typography.body-sm-md;\n\t\t\tborder-color: var(--color-border-action-secondary);\n\n\t\t\t.icon {\n\t\t\t\tcolor: var(--color-background);\n\t\t\t\tbackground: var(--tab-color, var(--color-background-action));\n\t\t\t}\n\n\t\t\t.value {\n\t\t\t\tcolor: var(--color-font-main);\n\t\t\t}\n\t\t}\n\n\t\t&:hover:not(.active):not(:disabled) {\n\t\t\tborder-color: var(--color-border-action-primary-hover);\n\t\t}\n\n\t\t&:focus {\n\t\t\toutline: auto var(--color-border-action-primary-hover);\n\t\t}\n\n\t\t&.disabled {\n\t\t\topacity: 0.5;\n\t\t\tcursor: not-allowed;\n\t\t}\n\n\t\t.icon {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t\tcolor: var(--color-background-action);\n\t\t\tbackground: var(--color-background-tertiary);\n\t\t\tborder-radius: 50%;\n\t\t\twidth: var(--icon-width-extra-large);\n\t\t\theight: var(--icon-width-extra-large);\n\t\t}\n\n\t\t.label {\n\t\t\tflex: 1;\n\t\t\twhite-space: nowrap;\n\t\t\ttext-align: start;\n\t\t}\n\n\t\t.content {\n\t\t\tpadding-right: 4px;\n\t\t\tcolor: var(--color-font-secondary);\n\t\t}\n\t}\n}\n"],"mappings":""}

package/dist/components/ds-smart-tabs/ds-smart-tabs.types.cjs

@@ -0,0 +1,16 @@
+
+//#region src/components/ds-smart-tabs/ds-smart-tabs.types.tsx
+const colors = [
+	"dark-blue",
+	"light-blue",
+	"dark-gray",
+	"green",
+	"fuchsia",
+	"blue",
+	"gray",
+	"red",
+	"amber"
+];
+
+//#endregion
+exports.colors = colors;

package/dist/components/ds-smart-tabs/ds-smart-tabs.types.d.cts

@@ -0,0 +1,65 @@
+import { IconType } from "../ds-icon/ds-icon.types.cjs";
+import React, { ReactNode } from "react";
+
+//#region src/components/ds-smart-tabs/ds-smart-tabs.types.d.ts
+declare const colors: readonly ["dark-blue", "light-blue", "dark-gray", "green", "fuchsia", "blue", "gray", "red", "amber"];
+type Color = (typeof colors)[number];
+interface DsSmartTabProps {
+  /**
+   * The label of the tab
+   */
+  label: string;
+  /**
+   * The value of the tab (used for filtering/identification)
+   */
+  value: string;
+  /**
+   * The icon to display in the tab
+   */
+  icon: IconType;
+  /**
+   * The content to display in the tab (typically a count or text)
+   */
+  content: number | string;
+  /**
+   * Color for the tab (limited to predefined color values)
+   */
+  color?: Color;
+  /**
+   * Whether the tab is disabled
+   */
+  disabled?: boolean;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Additional styles to apply to the tab
+   */
+  style?: React.CSSProperties;
+}
+interface DsSmartTabsProps {
+  /**
+   * Currently active tab value
+   */
+  activeTab: string;
+  /**
+   * Callback function when a tab is clicked
+   */
+  onTabClick: (value: string) => void;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Additional styles to apply to the component
+   */
+  style?: React.CSSProperties;
+  /**
+   * The tab components as children
+   */
+  children: ReactNode;
+}
+//#endregion
+export { Color, DsSmartTabProps, DsSmartTabsProps, colors };
+//# sourceMappingURL=ds-smart-tabs.types.d.cts.map

package/dist/components/ds-smart-tabs/ds-smart-tabs.types.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-smart-tabs.types.d.cts","names":[],"sources":["../../../src/components/ds-smart-tabs/ds-smart-tabs.types.tsx"],"sourcesContent":[],"mappings":";;;;cAIa;AAAA,KAWD,KAAA,GADF,CAAA,OACkB,MADlB,CAAA,CAAA,MAAA,CAAA;AACE,UAEK,eAAA,CAFiB;EAEjB;;;EAgCR,KAAM,EAAA,MAAA;EAAa;AAG5B;;;;;;QAvBO;;;;;;;;UAQE;;;;;;;;;;;;UAYA,KAAA,CAAM;;UAGE,gBAAA;;;;;;;;;;;;;;;;UAgBR,KAAA,CAAM;;;;YAIJ"}

package/dist/components/ds-smart-tabs/ds-smart-tabs.types.d.ts

@@ -0,0 +1,65 @@
+import { IconType } from "../ds-icon/ds-icon.types.js";
+import React, { ReactNode } from "react";
+
+//#region src/components/ds-smart-tabs/ds-smart-tabs.types.d.ts
+declare const colors: readonly ["dark-blue", "light-blue", "dark-gray", "green", "fuchsia", "blue", "gray", "red", "amber"];
+type Color = (typeof colors)[number];
+interface DsSmartTabProps {
+  /**
+   * The label of the tab
+   */
+  label: string;
+  /**
+   * The value of the tab (used for filtering/identification)
+   */
+  value: string;
+  /**
+   * The icon to display in the tab
+   */
+  icon: IconType;
+  /**
+   * The content to display in the tab (typically a count or text)
+   */
+  content: number | string;
+  /**
+   * Color for the tab (limited to predefined color values)
+   */
+  color?: Color;
+  /**
+   * Whether the tab is disabled
+   */
+  disabled?: boolean;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Additional styles to apply to the tab
+   */
+  style?: React.CSSProperties;
+}
+interface DsSmartTabsProps {
+  /**
+   * Currently active tab value
+   */
+  activeTab: string;
+  /**
+   * Callback function when a tab is clicked
+   */
+  onTabClick: (value: string) => void;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Additional styles to apply to the component
+   */
+  style?: React.CSSProperties;
+  /**
+   * The tab components as children
+   */
+  children: ReactNode;
+}
+//#endregion
+export { Color, DsSmartTabProps, DsSmartTabsProps, colors };
+//# sourceMappingURL=ds-smart-tabs.types.d.ts.map

package/dist/components/ds-smart-tabs/ds-smart-tabs.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-smart-tabs.types.d.ts","names":[],"sources":["../../../src/components/ds-smart-tabs/ds-smart-tabs.types.tsx"],"sourcesContent":[],"mappings":";;;;cAIa;AAAA,KAWD,KAAA,GADF,CAAA,OACkB,MADlB,CAAA,CAAA,MAAA,CAAA;AACE,UAEK,eAAA,CAFiB;EAEjB;;;EAgCR,KAAM,EAAA,MAAA;EAAa;AAG5B;;;;;;QAvBO;;;;;;;;UAQE;;;;;;;;;;;;UAYA,KAAA,CAAM;;UAGE,gBAAA;;;;;;;;;;;;;;;;UAgBR,KAAA,CAAM;;;;YAIJ"}

package/dist/components/ds-smart-tabs/ds-smart-tabs.types.js

@@ -0,0 +1,16 @@
+//#region src/components/ds-smart-tabs/ds-smart-tabs.types.tsx
+const colors = [
+	"dark-blue",
+	"light-blue",
+	"dark-gray",
+	"green",
+	"fuchsia",
+	"blue",
+	"gray",
+	"red",
+	"amber"
+];
+
+//#endregion
+export { colors };
+//# sourceMappingURL=ds-smart-tabs.types.js.map

package/dist/components/ds-smart-tabs/ds-smart-tabs.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-smart-tabs.types.js","names":[],"sources":["../../../src/components/ds-smart-tabs/ds-smart-tabs.types.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type React from 'react';\nimport type { IconType } from '../ds-icon/ds-icon.types';\n\nexport const colors = [\n\t'dark-blue',\n\t'light-blue',\n\t'dark-gray',\n\t'green',\n\t'fuchsia',\n\t'blue',\n\t'gray',\n\t'red',\n\t'amber',\n] as const;\nexport type Color = (typeof colors)[number];\n\nexport interface DsSmartTabProps {\n\t/**\n\t * The label of the tab\n\t */\n\tlabel: string;\n\t/**\n\t * The value of the tab (used for filtering/identification)\n\t */\n\tvalue: string;\n\t/**\n\t * The icon to display in the tab\n\t */\n\ticon: IconType;\n\t/**\n\t * The content to display in the tab (typically a count or text)\n\t */\n\tcontent: number | string;\n\t/**\n\t * Color for the tab (limited to predefined color values)\n\t */\n\tcolor?: Color;\n\t/**\n\t * Whether the tab is disabled\n\t */\n\tdisabled?: boolean;\n\t/**\n\t * Additional CSS class names\n\t */\n\tclassName?: string;\n\t/**\n\t * Additional styles to apply to the tab\n\t */\n\tstyle?: React.CSSProperties;\n}\n\nexport interface DsSmartTabsProps {\n\t/**\n\t * Currently active tab value\n\t */\n\tactiveTab: string;\n\t/**\n\t * Callback function when a tab is clicked\n\t */\n\tonTabClick: (value: string) => void;\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 * The tab components as children\n\t */\n\tchildren: ReactNode;\n}\n"],"mappings":";AAIA,MAAa,SAAS;CACrB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA"}

package/dist/components/ds-smart-tabs/index.cjs

@@ -0,0 +1,2 @@
+const require_ds_smart_tabs = require('./ds-smart-tabs.cjs');
+const require_ds_smart_tabs_types = require('./ds-smart-tabs.types.cjs');

package/dist/components/ds-smart-tabs/index.d.ts

@@ -0,0 +1,2 @@
+import { Color, DsSmartTabProps, DsSmartTabsProps, colors } from "./ds-smart-tabs.types.js";
+import { DsSmartTabs } from "./ds-smart-tabs.js";

package/dist/components/ds-smart-tabs/index.js

@@ -0,0 +1,2 @@
+import ds_smart_tabs_default from "./ds-smart-tabs.js";
+import { colors } from "./ds-smart-tabs.types.js";

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

@@ -0,0 +1,52 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_ds_spinner_module = require('./ds-spinner.module.cjs');
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/ds-spinner/ds-spinner.tsx
+const sizeMap = {
+	small: 50,
+	medium: 75,
+	large: 100
+};
+const widthMap = {
+	small: 4,
+	medium: 7,
+	large: 9
+};
+/**
+* Design system Spinner component
+*/
+const DsSpinner = ({ size = "medium", className, style = {}, ...props }) => {
+	const actualSize = sizeMap[size];
+	const actualWidth = widthMap[size];
+	const radius = (actualSize - actualWidth) / 2;
+	const circumference = 2 * Math.PI * radius;
+	const strokeDasharray = `${String(.25 * circumference)} ${String(circumference)}`;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, classnames.default)(require_ds_spinner_module.default.spinnerContainer, require_ds_spinner_module.default[size], className),
+		style,
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+			className: (0, classnames.default)(require_ds_spinner_module.default.progressCircle, require_ds_spinner_module.default.spin),
+			width: actualSize,
+			height: actualSize,
+			viewBox: `0 0 ${String(actualSize)} ${String(actualSize)}`,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+				className: require_ds_spinner_module.default.progressArc,
+				cx: actualSize / 2,
+				cy: actualSize / 2,
+				r: radius,
+				fill: "none",
+				strokeWidth: actualWidth,
+				strokeDasharray,
+				strokeLinecap: "round"
+			})
+		})
+	});
+};
+var ds_spinner_default = DsSpinner;
+
+//#endregion
+exports.default = ds_spinner_default;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-spinner.d.cts","names":[],"sources":["../../../src/components/ds-spinner/ds-spinner.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAGsE;cAiBhE,WAAW,KAAA,CAAM,GAAG"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-spinner.d.ts","names":[],"sources":["../../../src/components/ds-spinner/ds-spinner.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAGsE;cAiBhE,WAAW,KAAA,CAAM,GAAG"}

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

@@ -0,0 +1,51 @@
+import ds_spinner_module_default from "./ds-spinner.module.js";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/ds-spinner/ds-spinner.tsx
+const sizeMap = {
+	small: 50,
+	medium: 75,
+	large: 100
+};
+const widthMap = {
+	small: 4,
+	medium: 7,
+	large: 9
+};
+/**
+* Design system Spinner component
+*/
+const DsSpinner = ({ size = "medium", className, style = {}, ...props }) => {
+	const actualSize = sizeMap[size];
+	const actualWidth = widthMap[size];
+	const radius = (actualSize - actualWidth) / 2;
+	const circumference = 2 * Math.PI * radius;
+	const strokeDasharray = `${String(.25 * circumference)} ${String(circumference)}`;
+	return /* @__PURE__ */ jsx("div", {
+		className: classNames(ds_spinner_module_default.spinnerContainer, ds_spinner_module_default[size], className),
+		style,
+		...props,
+		children: /* @__PURE__ */ jsx("svg", {
+			className: classNames(ds_spinner_module_default.progressCircle, ds_spinner_module_default.spin),
+			width: actualSize,
+			height: actualSize,
+			viewBox: `0 0 ${String(actualSize)} ${String(actualSize)}`,
+			children: /* @__PURE__ */ jsx("circle", {
+				className: ds_spinner_module_default.progressArc,
+				cx: actualSize / 2,
+				cy: actualSize / 2,
+				r: radius,
+				fill: "none",
+				strokeWidth: actualWidth,
+				strokeDasharray,
+				strokeLinecap: "round"
+			})
+		})
+	});
+};
+var ds_spinner_default = DsSpinner;
+
+//#endregion
+export { ds_spinner_default as default };
+//# sourceMappingURL=ds-spinner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-spinner.js","names":["sizeMap: Record<SpinnerSize, number>","widthMap: Record<SpinnerSize, number>","DsSpinner: React.FC<DsSpinnerProps>","styles"],"sources":["../../../src/components/ds-spinner/ds-spinner.tsx"],"sourcesContent":["import type React from 'react';\nimport classNames from 'classnames';\nimport styles from './ds-spinner.module.scss';\nimport type { DsSpinnerProps, SpinnerSize } from './ds-spinner.types';\n\nconst sizeMap: Record<SpinnerSize, number> = {\n\tsmall: 50,\n\tmedium: 75,\n\tlarge: 100,\n};\n\nconst widthMap: Record<SpinnerSize, number> = {\n\tsmall: 4,\n\tmedium: 7,\n\tlarge: 9,\n};\n\n/**\n * Design system Spinner component\n */\nconst DsSpinner: React.FC<DsSpinnerProps> = ({ size = 'medium', className, style = {}, ...props }) => {\n\tconst actualSize = sizeMap[size];\n\tconst actualWidth = widthMap[size];\n\tconst radius = (actualSize - actualWidth) / 2;\n\tconst circumference = 2 * Math.PI * radius;\n\tconst strokeDasharray = `${String(0.25 * circumference)} ${String(circumference)}`;\n\n\treturn (\n\t\t<div className={classNames(styles.spinnerContainer, styles[size], className)} style={style} {...props}>\n\t\t\t<svg\n\t\t\t\tclassName={classNames(styles.progressCircle, styles.spin)}\n\t\t\t\twidth={actualSize}\n\t\t\t\theight={actualSize}\n\t\t\t\tviewBox={`0 0 ${String(actualSize)} ${String(actualSize)}`}\n\t\t\t>\n\t\t\t\t<circle\n\t\t\t\t\tclassName={styles.progressArc}\n\t\t\t\t\tcx={actualSize / 2}\n\t\t\t\t\tcy={actualSize / 2}\n\t\t\t\t\tr={radius}\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\tstrokeWidth={actualWidth}\n\t\t\t\t\tstrokeDasharray={strokeDasharray}\n\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t/>\n\t\t\t</svg>\n\t\t</div>\n\t);\n};\n\nexport default DsSpinner;\n"],"mappings":";;;;;AAKA,MAAMA,UAAuC;CAC5C,OAAO;CACP,QAAQ;CACR,OAAO;CACP;AAED,MAAMC,WAAwC;CAC7C,OAAO;CACP,QAAQ;CACR,OAAO;CACP;;;;AAKD,MAAMC,aAAuC,EAAE,OAAO,UAAU,WAAW,QAAQ,EAAE,EAAE,GAAG,YAAY;CACrG,MAAM,aAAa,QAAQ;CAC3B,MAAM,cAAc,SAAS;CAC7B,MAAM,UAAU,aAAa,eAAe;CAC5C,MAAM,gBAAgB,IAAI,KAAK,KAAK;CACpC,MAAM,kBAAkB,GAAG,OAAO,MAAO,cAAc,CAAC,GAAG,OAAO,cAAc;AAEhF,QACC,oBAAC;EAAI,WAAW,WAAWC,0BAAO,kBAAkBA,0BAAO,OAAO,UAAU;EAAS;EAAO,GAAI;YAC/F,oBAAC;GACA,WAAW,WAAWA,0BAAO,gBAAgBA,0BAAO,KAAK;GACzD,OAAO;GACP,QAAQ;GACR,SAAS,OAAO,OAAO,WAAW,CAAC,GAAG,OAAO,WAAW;aAExD,oBAAC;IACA,WAAWA,0BAAO;IAClB,IAAI,aAAa;IACjB,IAAI,aAAa;IACjB,GAAG;IACH,MAAK;IACL,aAAa;IACI;IACjB,eAAc;KACb;IACG;GACD;;AAIR,yBAAe"}

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

@@ -0,0 +1,11 @@
+
+//#region src/components/ds-spinner/ds-spinner.module.scss
+var ds_spinner_module_default = {
+	"spinnerContainer": "_spinnerContainer_vr3r7_1",
+	"progressCircle": "_progressCircle_vr3r7_1",
+	"spin": "_spin_vr3r7_1",
+	"progressArc": "_progressArc_vr3r7_1"
+};
+
+//#endregion
+exports.default = ds_spinner_module_default;

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

@@ -0,0 +1,11 @@
+//#region src/components/ds-spinner/ds-spinner.module.scss
+var ds_spinner_module_default = {
+	"spinnerContainer": "_spinnerContainer_vr3r7_1",
+	"progressCircle": "_progressCircle_vr3r7_1",
+	"spin": "_spin_vr3r7_1",
+	"progressArc": "_progressArc_vr3r7_1"
+};
+
+//#endregion
+export { ds_spinner_module_default as default };
+//# sourceMappingURL=ds-spinner.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-spinner.module.js","names":[],"sources":["../../../src/components/ds-spinner/ds-spinner.module.scss"],"sourcesContent":["@use '../../styles/typography';\n\n.spinnerContainer {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.progressCircle {\n\tbutton &,\n\t[role='button'] & {\n\t\twidth: 1em;\n\t\theight: 1em;\n\t}\n}\n\n.spin {\n\tanimation: spin 2s linear infinite;\n}\n\n.progressArc {\n\ttransition: stroke-dasharray 0.3s ease-in-out;\n\tstroke: var(--color-background-selected);\n\n\tbutton &,\n\t[role='button'] & {\n\t\tstroke: currentColor;\n\t}\n}\n\n@keyframes spin {\n\t0% {\n\t\ttransform: rotate(0deg);\n\t}\n\n\t100% {\n\t\ttransform: rotate(360deg);\n\t}\n}\n"],"mappings":""}

package/dist/components/ds-spinner/ds-spinner.types.cjs

@@ -0,0 +1,10 @@
+
+//#region src/components/ds-spinner/ds-spinner.types.tsx
+const spinnerSizes = [
+	"small",
+	"medium",
+	"large"
+];
+
+//#endregion
+exports.spinnerSizes = spinnerSizes;

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

@@ -0,0 +1,23 @@
+import React from "react";
+
+//#region src/components/ds-spinner/ds-spinner.types.d.ts
+declare const spinnerSizes: readonly ["small", "medium", "large"];
+type SpinnerSize = (typeof spinnerSizes)[number];
+interface DsSpinnerProps {
+  /**
+   * The size of the spinner
+   * @default 'medium'
+   */
+  size?: SpinnerSize;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Additional styles to apply to the component
+   */
+  style?: React.CSSProperties;
+}
+//#endregion
+export { DsSpinnerProps, SpinnerSize, spinnerSizes };
+//# sourceMappingURL=ds-spinner.types.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-spinner.types.d.cts","names":[],"sources":["../../../src/components/ds-spinner/ds-spinner.types.tsx"],"sourcesContent":[],"mappings":";;;cAEa;KACD,WAAA,WAAsB;AADrB,UAGI,cAAA,CAHgD;EACrD;AAEZ;;;SAKQ;;;;;;;;UAQC,KAAA,CAAM"}

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

@@ -0,0 +1,23 @@
+import React from "react";
+
+//#region src/components/ds-spinner/ds-spinner.types.d.ts
+declare const spinnerSizes: readonly ["small", "medium", "large"];
+type SpinnerSize = (typeof spinnerSizes)[number];
+interface DsSpinnerProps {
+  /**
+   * The size of the spinner
+   * @default 'medium'
+   */
+  size?: SpinnerSize;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Additional styles to apply to the component
+   */
+  style?: React.CSSProperties;
+}
+//#endregion
+export { DsSpinnerProps, SpinnerSize, spinnerSizes };
+//# sourceMappingURL=ds-spinner.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-spinner.types.d.ts","names":[],"sources":["../../../src/components/ds-spinner/ds-spinner.types.tsx"],"sourcesContent":[],"mappings":";;;cAEa;KACD,WAAA,WAAsB;AADrB,UAGI,cAAA,CAHgD;EACrD;AAEZ;;;SAKQ;;;;;;;;UAQC,KAAA,CAAM"}

package/dist/components/ds-spinner/ds-spinner.types.js

@@ -0,0 +1,10 @@
+//#region src/components/ds-spinner/ds-spinner.types.tsx
+const spinnerSizes = [
+	"small",
+	"medium",
+	"large"
+];
+
+//#endregion
+export { spinnerSizes };
+//# sourceMappingURL=ds-spinner.types.js.map

package/dist/components/ds-spinner/ds-spinner.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-spinner.types.js","names":[],"sources":["../../../src/components/ds-spinner/ds-spinner.types.tsx"],"sourcesContent":["import type React from 'react';\n\nexport const spinnerSizes = ['small', 'medium', 'large'] as const;\nexport type SpinnerSize = (typeof spinnerSizes)[number];\n\nexport interface DsSpinnerProps {\n\t/**\n\t * The size of the spinner\n\t * @default 'medium'\n\t */\n\tsize?: SpinnerSize;\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}\n"],"mappings":";AAEA,MAAa,eAAe;CAAC;CAAS;CAAU;CAAQ"}

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

@@ -0,0 +1,2 @@
+const require_ds_spinner = require('./ds-spinner.cjs');
+const require_ds_spinner_types = require('./ds-spinner.types.cjs');

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

@@ -0,0 +1,2 @@
+import { DsSpinnerProps, SpinnerSize, spinnerSizes } from "./ds-spinner.types.js";
+import { DsSpinner } from "./ds-spinner.js";

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

@@ -0,0 +1,2 @@
+import ds_spinner_default from "./ds-spinner.js";
+import { spinnerSizes } from "./ds-spinner.types.js";

package/dist/components/ds-status-badge/ds-status-badge.cjs

@@ -0,0 +1,36 @@
+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_status_badge_module = require('./ds-status-badge.module.cjs');
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/ds-status-badge/ds-status-badge.tsx
+/**
+* Design system StatusBadge component
+*/
+const DsStatusBadge = ({ icon, status, label = status, className, style, ghost = false, size = "medium", "aria-label": ariaLabel = label }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		style,
+		className: (0, classnames.default)(require_ds_status_badge_module.default.container, require_ds_status_badge_module.default[status], ghost && require_ds_status_badge_module.default.ghost, size === "small" && require_ds_status_badge_module.default.small, className),
+		role: "status",
+		"aria-label": ariaLabel,
+		children: [icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+			icon,
+			size: "tiny",
+			filled: true,
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_typography.default, {
+			className: require_ds_status_badge_module.default.label,
+			variant: ghost ? "body-xs-md" : "body-xs-reg",
+			children: label
+		})]
+	});
+};
+var ds_status_badge_default = DsStatusBadge;
+
+//#endregion
+exports.default = ds_status_badge_default;