@drivenets/design-system 0.0.2 → 0.0.4

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":["ReactNode","React","IconType","colors","const","Color","DsSmartTabProps","label","value","icon","content","color","disabled","className","style","CSSProperties","DsSmartTabsProps","activeTab","onTabClick","children"],"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,MAAaG,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,122 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_ds_spinner_module = require('./ds-spinner.module.cjs');
+let react_compiler_runtime = require("react/compiler-runtime");
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/ds-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 = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(26);
+	let className;
+	let props;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		({size: t1, className, style: t2, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = t1;
+		$[4] = t2;
+	} else {
+		className = $[1];
+		props = $[2];
+		t1 = $[3];
+		t2 = $[4];
+	}
+	const size = t1 === void 0 ? "medium" : t1;
+	let t3;
+	if ($[5] !== t2) {
+		t3 = t2 === void 0 ? {} : t2;
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	const style = t3;
+	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)}`;
+	const t4 = require_ds_spinner_module.default[size];
+	let t5;
+	if ($[7] !== className || $[8] !== t4) {
+		t5 = (0, classnames.default)(require_ds_spinner_module.default.spinnerContainer, t4, className);
+		$[7] = className;
+		$[8] = t4;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = (0, classnames.default)(require_ds_spinner_module.default.progressCircle, require_ds_spinner_module.default.spin);
+		$[10] = t6;
+	} else t6 = $[10];
+	const t7 = `0 0 ${String(actualSize)} ${String(actualSize)}`;
+	const t8 = actualSize / 2;
+	const t9 = actualSize / 2;
+	let t10;
+	if ($[11] !== actualWidth || $[12] !== radius || $[13] !== strokeDasharray || $[14] !== t8 || $[15] !== t9) {
+		t10 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+			className: require_ds_spinner_module.default.progressArc,
+			cx: t8,
+			cy: t9,
+			r: radius,
+			fill: "none",
+			strokeWidth: actualWidth,
+			strokeDasharray,
+			strokeLinecap: "round"
+		});
+		$[11] = actualWidth;
+		$[12] = radius;
+		$[13] = strokeDasharray;
+		$[14] = t8;
+		$[15] = t9;
+		$[16] = t10;
+	} else t10 = $[16];
+	let t11;
+	if ($[17] !== actualSize || $[18] !== t10 || $[19] !== t7) {
+		t11 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+			className: t6,
+			width: actualSize,
+			height: actualSize,
+			viewBox: t7,
+			children: t10
+		});
+		$[17] = actualSize;
+		$[18] = t10;
+		$[19] = t7;
+		$[20] = t11;
+	} else t11 = $[20];
+	let t12;
+	if ($[21] !== props || $[22] !== style || $[23] !== t11 || $[24] !== t5) {
+		t12 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: t5,
+			style,
+			...props,
+			children: t11
+		});
+		$[21] = props;
+		$[22] = style;
+		$[23] = t11;
+		$[24] = t5;
+		$[25] = t12;
+	} else t12 = $[25];
+	return t12;
+};
+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,121 @@
+import ds_spinner_module_default from "./ds-spinner.module.js";
+import { c } from "react/compiler-runtime";
+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 = (t0) => {
+	const $ = c(26);
+	let className;
+	let props;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		({size: t1, className, style: t2, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = t1;
+		$[4] = t2;
+	} else {
+		className = $[1];
+		props = $[2];
+		t1 = $[3];
+		t2 = $[4];
+	}
+	const size = t1 === void 0 ? "medium" : t1;
+	let t3;
+	if ($[5] !== t2) {
+		t3 = t2 === void 0 ? {} : t2;
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	const style = t3;
+	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)}`;
+	const t4 = ds_spinner_module_default[size];
+	let t5;
+	if ($[7] !== className || $[8] !== t4) {
+		t5 = classNames(ds_spinner_module_default.spinnerContainer, t4, className);
+		$[7] = className;
+		$[8] = t4;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = classNames(ds_spinner_module_default.progressCircle, ds_spinner_module_default.spin);
+		$[10] = t6;
+	} else t6 = $[10];
+	const t7 = `0 0 ${String(actualSize)} ${String(actualSize)}`;
+	const t8 = actualSize / 2;
+	const t9 = actualSize / 2;
+	let t10;
+	if ($[11] !== actualWidth || $[12] !== radius || $[13] !== strokeDasharray || $[14] !== t8 || $[15] !== t9) {
+		t10 = /* @__PURE__ */ jsx("circle", {
+			className: ds_spinner_module_default.progressArc,
+			cx: t8,
+			cy: t9,
+			r: radius,
+			fill: "none",
+			strokeWidth: actualWidth,
+			strokeDasharray,
+			strokeLinecap: "round"
+		});
+		$[11] = actualWidth;
+		$[12] = radius;
+		$[13] = strokeDasharray;
+		$[14] = t8;
+		$[15] = t9;
+		$[16] = t10;
+	} else t10 = $[16];
+	let t11;
+	if ($[17] !== actualSize || $[18] !== t10 || $[19] !== t7) {
+		t11 = /* @__PURE__ */ jsx("svg", {
+			className: t6,
+			width: actualSize,
+			height: actualSize,
+			viewBox: t7,
+			children: t10
+		});
+		$[17] = actualSize;
+		$[18] = t10;
+		$[19] = t7;
+		$[20] = t11;
+	} else t11 = $[20];
+	let t12;
+	if ($[21] !== props || $[22] !== style || $[23] !== t11 || $[24] !== t5) {
+		t12 = /* @__PURE__ */ jsx("div", {
+			className: t5,
+			style,
+			...props,
+			children: t11
+		});
+		$[21] = props;
+		$[22] = style;
+		$[23] = t11;
+		$[24] = t5;
+		$[25] = t12;
+	} else t12 = $[25];
+	return t12;
+};
+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":["React","classNames","styles","DsSpinnerProps","SpinnerSize","sizeMap","Record","small","medium","large","widthMap","DsSpinner","FC","t0","$","_c","className","props","t1","t2","size","style","undefined","t3","actualSize","actualWidth","radius","circumference","Math","PI","strokeDasharray","String","t4","t5","spinnerContainer","t6","Symbol","for","progressCircle","spin","t7","t8","t9","t10","progressArc","t11","t12"],"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,MAAMK,UAAuC;CAC5CE,OAAO;CACPC,QAAQ;CACRC,OAAO;CACP;AAED,MAAMC,WAAwC;CAC7CH,OAAO;CACPC,QAAQ;CACRC,OAAO;CACP;;;;AAKD,MAAME,aAAsCE,OAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;AAAA,KAAAL,EAAA,OAAAD,IAAA;AAAC,GAAA,CAAAO,MAAAF,IAAAF,WAAAK,OAAAF,OAAAF,SAAAJ;AAAoDC,IAAA,KAAAD;AAAAC,IAAA,KAAAE;AAAAF,IAAA,KAAAG;AAAAH,IAAA,KAAAI;AAAAJ,IAAA,KAAAK;QAAA;AAAAH,cAAAF,EAAA;AAAAG,UAAAH,EAAA;AAAAI,OAAAJ,EAAA;AAAAK,OAAAL,EAAA;;CAAlD,MAAAM,OAAAF,OAAAI,SAAA,WAAAJ;CAAe,IAAAK;AAAA,KAAAT,EAAA,OAAAK,IAAA;AAAaI,OAAAJ,OAAAG,SAAA,EAAU,GAAVH;AAAUL,IAAA,KAAAK;AAAAL,IAAA,KAAAS;OAAAA,MAAAT,EAAA;CAAV,MAAAO,QAAAE;CAC1E,MAAAC,aAAmBnB,QAAQe;CAC3B,MAAAK,cAAoBf,SAASU;CAC7B,MAAAM,UAAgBF,aAAaC,eAAe;CAC5C,MAAAE,gBAAsB,IAAIC,KAAIC,KAAMH;CACpC,MAAAI,kBAAwB,GAAGC,OAAO,MAAOJ,cAAc,CAAA,GAAII,OAAOJ,cAAc;CAG3B,MAAAK,KAAA9B,0BAAOkB;CAAK,IAAAa;AAAA,KAAAnB,EAAA,OAAAE,aAAAF,EAAA,OAAAkB,IAAA;AAAhDC,OAAAhC,WAAWC,0BAAMgC,kBAAmBF,IAAchB,UAAU;AAAAF,IAAA,KAAAE;AAAAF,IAAA,KAAAkB;AAAAlB,IAAA,KAAAmB;OAAAA,MAAAnB,EAAA;CAAA,IAAAqB;AAAA,KAAArB,EAAA,QAAAsB,OAAAC,IAAA,4BAAA,EAAA;AAE/DF,OAAAlC,WAAWC,0BAAMoC,gBAAiBpC,0BAAMqC,KAAM;AAAAzB,IAAA,MAAAqB;OAAAA,MAAArB,EAAA;CAGhD,MAAA0B,KAAA,OAAOT,OAAOP,WAAW,CAAA,GAAIO,OAAOP,WAAW;CAInD,MAAAiB,KAAAjB,aAAa;CACb,MAAAkB,KAAAlB,aAAa;CAAC,IAAAmB;AAAA,KAAA7B,EAAA,QAAAW,eAAAX,EAAA,QAAAY,UAAAZ,EAAA,QAAAgB,mBAAAhB,EAAA,QAAA2B,MAAA3B,EAAA,QAAA4B,IAAA;AAHnBC,QAAA,oBAAA;GACY,WAAAzC,0BAAM0C;GACb,IAAAH;GACA,IAAAC;GACDhB,GAAAA;GACE,MAAA;GACQD,aAAAA;GACIK;GACH,eAAA;IACb;AAAAhB,IAAA,MAAAW;AAAAX,IAAA,MAAAY;AAAAZ,IAAA,MAAAgB;AAAAhB,IAAA,MAAA2B;AAAA3B,IAAA,MAAA4B;AAAA5B,IAAA,MAAA6B;OAAAA,OAAA7B,EAAA;CAAA,IAAA+B;AAAA,KAAA/B,EAAA,QAAAU,cAAAV,EAAA,QAAA6B,OAAA7B,EAAA,QAAA0B,IAAA;AAfHK,QAAA,oBAAA;GACY,WAAAV;GACJX,OAAAA;GACCA,QAAAA;GACC,SAAAgB;aAETG;IAUK;AAAA7B,IAAA,MAAAU;AAAAV,IAAA,MAAA6B;AAAA7B,IAAA,MAAA0B;AAAA1B,IAAA,MAAA+B;OAAAA,OAAA/B,EAAA;CAAA,IAAAgC;AAAA,KAAAhC,EAAA,QAAAG,SAAAH,EAAA,QAAAO,SAAAP,EAAA,QAAA+B,OAAA/B,EAAA,QAAAmB,IAAA;AAjBPa,QAAA,oBAAA;GAAgB,WAAAb;GAAqEZ;GAAK,GAAMJ;aAC/F4B;IAiBK;AAAA/B,IAAA,MAAAG;AAAAH,IAAA,MAAAO;AAAAP,IAAA,MAAA+B;AAAA/B,IAAA,MAAAmB;AAAAnB,IAAA,MAAAgC;OAAAA,OAAAhC,EAAA;AAAA,QAlBNgC;;AAsBF,yBAAenC"}

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":["React","spinnerSizes","const","SpinnerSize","DsSpinnerProps","size","className","style","CSSProperties"],"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,MAAaC,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";