@drivenets/design-system 0.2.0 → 0.4.0

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

@@ -0,0 +1,91 @@
+import { DsAvatarSize } from "../ds-avatar/ds-avatar.types.cjs";
+import { SemanticVariant } from "../ds-typography/ds-typography.types.cjs";
+import { CSSProperties, Ref } from "react";
+
+//#region src/components/ds-skeleton/ds-skeleton.types.d.ts
+declare const skeletonColorVariants: readonly ["gray", "blue"];
+type SkeletonColorVariant = (typeof skeletonColorVariants)[number];
+declare const skeletonRadiusVariants: readonly ["default", "round"];
+type SkeletonRadiusVariant = (typeof skeletonRadiusVariants)[number];
+/**
+ * Shared base props for all skeleton components
+ */
+interface DsSkeletonBaseProps {
+  /**
+   * Color variant of the skeleton
+   * @default 'gray'
+   */
+  color?: SkeletonColorVariant;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Additional inline styles
+   */
+  style?: CSSProperties;
+  /**
+   * Ref to the skeleton element
+   */
+  ref?: Ref<HTMLSpanElement>;
+}
+/**
+ * Props for DsSkeleton.Text component
+ * Typography-based text skeleton with configurable lines
+ */
+interface DsSkeletonTextProps extends DsSkeletonBaseProps {
+  /**
+   * Typography variant - determines the height of the skeleton
+   * @default 'body-sm-reg'
+   */
+  typographyVariant?: SemanticVariant;
+  /**
+   * Number of lines to render
+   * @default 1
+   */
+  lines?: number;
+  /**
+   * Width of skeleton. Last line will have varied width if not specified.
+   * Can be a number (px) or string ('50%', '200px')
+   * @default '100%' (last line varies between 40-80%)
+   */
+  width?: string | number;
+  /**
+   * Border radius: 'default' (4px), 'round' (pill-shaped), or custom px value
+   * @default 'default'
+   */
+  radius?: SkeletonRadiusVariant | number;
+}
+/**
+ * Props for DsSkeleton.Circle component
+ * Circular skeleton for avatars and icons
+ */
+interface DsSkeletonCircleProps extends DsSkeletonBaseProps {
+  /**
+   * Size of the circle - matches DsAvatar sizes or custom pixel value
+   * @default 'regular'
+   */
+  size?: DsAvatarSize | number;
+}
+/**
+ * Props for DsSkeleton.Rect component
+ * Rectangular skeleton for buttons, images, and custom shapes
+ */
+interface DsSkeletonRectProps extends DsSkeletonBaseProps {
+  /**
+   * Width of rectangle. Can be number (px) or string ('50%', '200px')
+   */
+  width: string | number;
+  /**
+   * Height of rectangle. Can be number (px) or string ('50%', '200px')
+   */
+  height: string | number;
+  /**
+   * Border radius: 'default' (4px), 'round' (pill-shaped), or custom px value
+   * @default 'default'
+   */
+  radius?: SkeletonRadiusVariant | number;
+}
+//#endregion
+export { DsSkeletonBaseProps, DsSkeletonCircleProps, DsSkeletonRectProps, DsSkeletonTextProps, SkeletonColorVariant, SkeletonRadiusVariant, skeletonColorVariants, skeletonRadiusVariants };
+//# sourceMappingURL=ds-skeleton.types.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-skeleton.types.d.cts","names":[],"sources":["../../../src/components/ds-skeleton/ds-skeleton.types.ts"],"sourcesContent":[],"mappings":";;;;;cAIa;KACD,oBAAA,WAA+B;AAD9B,cAGA,sBAHiD,EAAA,SAAA,CAAA,SAAA,EAAA,OAAA,CAAA;AAClD,KAGA,qBAAA,GAHoB,CAAA,OAGY,sBAHoB,CAAA,CAAA,MAAA,CAAA;AAEhE;AACA;AAKA;AAKS,UALQ,mBAAA,CAKR;EAQA;;;;EAWQ,KAAA,CAAA,EAnBR,oBAmB4B;EAKhB;;;EAL2C,SAAA,CAAA,EAAA,MAAA;EA4B/C;AAYjB;;UAnDS;;;;QAIF,IAAI;;;;;;UAOM,mBAAA,SAA4B;;;;;sBAKxB;;;;;;;;;;;;;;;;WAgBX;;;;;;UAOO,qBAAA,SAA8B;;;;;SAKvC;;;;;;UAOS,mBAAA,SAA4B;;;;;;;;;;;;;WAanC"}

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

@@ -0,0 +1,93 @@
+import { DsAvatarSize } from "../ds-avatar/ds-avatar.types.js";
+import "../ds-avatar/index.js";
+import { SemanticVariant } from "../ds-typography/ds-typography.types.js";
+import "../ds-typography/index.js";
+import { CSSProperties, Ref } from "react";
+
+//#region src/components/ds-skeleton/ds-skeleton.types.d.ts
+declare const skeletonColorVariants: readonly ["gray", "blue"];
+type SkeletonColorVariant = (typeof skeletonColorVariants)[number];
+declare const skeletonRadiusVariants: readonly ["default", "round"];
+type SkeletonRadiusVariant = (typeof skeletonRadiusVariants)[number];
+/**
+ * Shared base props for all skeleton components
+ */
+interface DsSkeletonBaseProps {
+  /**
+   * Color variant of the skeleton
+   * @default 'gray'
+   */
+  color?: SkeletonColorVariant;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Additional inline styles
+   */
+  style?: CSSProperties;
+  /**
+   * Ref to the skeleton element
+   */
+  ref?: Ref<HTMLSpanElement>;
+}
+/**
+ * Props for DsSkeleton.Text component
+ * Typography-based text skeleton with configurable lines
+ */
+interface DsSkeletonTextProps extends DsSkeletonBaseProps {
+  /**
+   * Typography variant - determines the height of the skeleton
+   * @default 'body-sm-reg'
+   */
+  typographyVariant?: SemanticVariant;
+  /**
+   * Number of lines to render
+   * @default 1
+   */
+  lines?: number;
+  /**
+   * Width of skeleton. Last line will have varied width if not specified.
+   * Can be a number (px) or string ('50%', '200px')
+   * @default '100%' (last line varies between 40-80%)
+   */
+  width?: string | number;
+  /**
+   * Border radius: 'default' (4px), 'round' (pill-shaped), or custom px value
+   * @default 'default'
+   */
+  radius?: SkeletonRadiusVariant | number;
+}
+/**
+ * Props for DsSkeleton.Circle component
+ * Circular skeleton for avatars and icons
+ */
+interface DsSkeletonCircleProps extends DsSkeletonBaseProps {
+  /**
+   * Size of the circle - matches DsAvatar sizes or custom pixel value
+   * @default 'regular'
+   */
+  size?: DsAvatarSize | number;
+}
+/**
+ * Props for DsSkeleton.Rect component
+ * Rectangular skeleton for buttons, images, and custom shapes
+ */
+interface DsSkeletonRectProps extends DsSkeletonBaseProps {
+  /**
+   * Width of rectangle. Can be number (px) or string ('50%', '200px')
+   */
+  width: string | number;
+  /**
+   * Height of rectangle. Can be number (px) or string ('50%', '200px')
+   */
+  height: string | number;
+  /**
+   * Border radius: 'default' (4px), 'round' (pill-shaped), or custom px value
+   * @default 'default'
+   */
+  radius?: SkeletonRadiusVariant | number;
+}
+//#endregion
+export { DsSkeletonBaseProps, DsSkeletonCircleProps, DsSkeletonRectProps, DsSkeletonTextProps, SkeletonColorVariant, SkeletonRadiusVariant, skeletonColorVariants, skeletonRadiusVariants };
+//# sourceMappingURL=ds-skeleton.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-skeleton.types.d.ts","names":[],"sources":["../../../src/components/ds-skeleton/ds-skeleton.types.ts"],"sourcesContent":[],"mappings":";;;;;;;cAIa;KACD,oBAAA,WAA+B;cAE9B;KACD,qBAAA,WAAgC;AAJ5C;AACA;AAEA;AACY,UAKK,mBAAA,CALgB;EAKhB;;;;EAiBV,KAAA,CAAA,EAZE,oBAYF;EAAG;AAOV;;EAqBU,SAAA,CAAA,EAAA,MAAA;EArBmC;;AA4B7C;EAYiB,KAAA,CAAA,EAnDR,aAmDQ;;;;QA/CV,IAAI;;;;;;UAOM,mBAAA,SAA4B;;;;;sBAKxB;;;;;;;;;;;;;;;;WAgBX;;;;;;UAOO,qBAAA,SAA8B;;;;;SAKvC;;;;;;UAOS,mBAAA,SAA4B;;;;;;;;;;;;;WAanC"}

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

@@ -0,0 +1,7 @@
+//#region src/components/ds-skeleton/ds-skeleton.types.ts
+const skeletonColorVariants = ["gray", "blue"];
+const skeletonRadiusVariants = ["default", "round"];
+
+//#endregion
+export { skeletonColorVariants, skeletonRadiusVariants };
+//# sourceMappingURL=ds-skeleton.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-skeleton.types.js","names":["CSSProperties","Ref","DsAvatarSize","SemanticVariant","skeletonColorVariants","const","SkeletonColorVariant","skeletonRadiusVariants","SkeletonRadiusVariant","DsSkeletonBaseProps","color","className","style","ref","HTMLSpanElement","DsSkeletonTextProps","typographyVariant","lines","width","radius","DsSkeletonCircleProps","size","DsSkeletonRectProps","height"],"sources":["../../../src/components/ds-skeleton/ds-skeleton.types.ts"],"sourcesContent":["import type { CSSProperties, Ref } from 'react';\nimport type { DsAvatarSize } from '../ds-avatar';\nimport type { SemanticVariant } from '../ds-typography';\n\nexport const skeletonColorVariants = ['gray', 'blue'] as const;\nexport type SkeletonColorVariant = (typeof skeletonColorVariants)[number];\n\nexport const skeletonRadiusVariants = ['default', 'round'] as const;\nexport type SkeletonRadiusVariant = (typeof skeletonRadiusVariants)[number];\n\n/**\n * Shared base props for all skeleton components\n */\nexport interface DsSkeletonBaseProps {\n\t/**\n\t * Color variant of the skeleton\n\t * @default 'gray'\n\t */\n\tcolor?: SkeletonColorVariant;\n\t/**\n\t * Additional CSS class names\n\t */\n\tclassName?: string;\n\t/**\n\t * Additional inline styles\n\t */\n\tstyle?: CSSProperties;\n\t/**\n\t * Ref to the skeleton element\n\t */\n\tref?: Ref<HTMLSpanElement>;\n}\n\n/**\n * Props for DsSkeleton.Text component\n * Typography-based text skeleton with configurable lines\n */\nexport interface DsSkeletonTextProps extends DsSkeletonBaseProps {\n\t/**\n\t * Typography variant - determines the height of the skeleton\n\t * @default 'body-sm-reg'\n\t */\n\ttypographyVariant?: SemanticVariant;\n\t/**\n\t * Number of lines to render\n\t * @default 1\n\t */\n\tlines?: number;\n\t/**\n\t * Width of skeleton. Last line will have varied width if not specified.\n\t * Can be a number (px) or string ('50%', '200px')\n\t * @default '100%' (last line varies between 40-80%)\n\t */\n\twidth?: string | number;\n\t/**\n\t * Border radius: 'default' (4px), 'round' (pill-shaped), or custom px value\n\t * @default 'default'\n\t */\n\tradius?: SkeletonRadiusVariant | number;\n}\n\n/**\n * Props for DsSkeleton.Circle component\n * Circular skeleton for avatars and icons\n */\nexport interface DsSkeletonCircleProps extends DsSkeletonBaseProps {\n\t/**\n\t * Size of the circle - matches DsAvatar sizes or custom pixel value\n\t * @default 'regular'\n\t */\n\tsize?: DsAvatarSize | number;\n}\n\n/**\n * Props for DsSkeleton.Rect component\n * Rectangular skeleton for buttons, images, and custom shapes\n */\nexport interface DsSkeletonRectProps extends DsSkeletonBaseProps {\n\t/**\n\t * Width of rectangle. Can be number (px) or string ('50%', '200px')\n\t */\n\twidth: string | number;\n\t/**\n\t * Height of rectangle. Can be number (px) or string ('50%', '200px')\n\t */\n\theight: string | number;\n\t/**\n\t * Border radius: 'default' (4px), 'round' (pill-shaped), or custom px value\n\t * @default 'default'\n\t */\n\tradius?: SkeletonRadiusVariant | number;\n}\n"],"mappings":";AAIA,MAAaI,wBAAwB,CAAC,QAAQ,OAAO;AAGrD,MAAaG,yBAAyB,CAAC,WAAW,QAAQ"}

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

@@ -0,0 +1,5 @@
+const require_ds_skeleton_types = require('./ds-skeleton.types.cjs');
+const require_ds_skeleton_text = require('./ds-skeleton-text.cjs');
+const require_ds_skeleton_circle = require('./ds-skeleton-circle.cjs');
+const require_ds_skeleton_rect = require('./ds-skeleton-rect.cjs');
+const require_ds_skeleton = require('./ds-skeleton.cjs');

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

@@ -0,0 +1,5 @@
+import { DsSkeletonBaseProps, DsSkeletonCircleProps, DsSkeletonRectProps, DsSkeletonTextProps, SkeletonColorVariant, SkeletonRadiusVariant, skeletonColorVariants, skeletonRadiusVariants } from "./ds-skeleton.types.js";
+import { _default } from "./ds-skeleton.js";
+import { DsSkeletonText } from "./ds-skeleton-text.js";
+import { DsSkeletonCircle } from "./ds-skeleton-circle.js";
+import { DsSkeletonRect } from "./ds-skeleton-rect.js";

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

@@ -0,0 +1,5 @@
+import { skeletonColorVariants, skeletonRadiusVariants } from "./ds-skeleton.types.js";
+import ds_skeleton_text_default from "./ds-skeleton-text.js";
+import ds_skeleton_circle_default from "./ds-skeleton-circle.js";
+import ds_skeleton_rect_default from "./ds-skeleton-rect.js";
+import ds_skeleton_default from "./ds-skeleton.js";

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

@@ -1,5 +1,5 @@
 import { DsSmartTabProps, DsSmartTabsProps } from "./ds-smart-tabs.types.cjs";
-import * as react_jsx_runtime36 from "react/jsx-runtime";
+import * as react_jsx_runtime45 from "react/jsx-runtime";
 import React from "react";
 
 //#region src/components/ds-smart-tabs/ds-smart-tabs.d.ts
@@ -14,7 +14,7 @@ declare const DsSmartTabs: {
     style,
     children,
     ...props
-  }: DsSmartTabsProps): react_jsx_runtime36.JSX.Element;
+  }: DsSmartTabsProps): react_jsx_runtime45.JSX.Element;
   Tab: React.FC<DsSmartTabProps>;
 };
 //#endregion

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

@@ -1,5 +1,5 @@
 import { DsSmartTabProps, DsSmartTabsProps } from "./ds-smart-tabs.types.js";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime21 from "react/jsx-runtime";
 import React from "react";
 
 //#region src/components/ds-smart-tabs/ds-smart-tabs.d.ts
@@ -14,7 +14,7 @@ declare const DsSmartTabs: {
     style,
     children,
     ...props
-  }: DsSmartTabsProps): react_jsx_runtime0.JSX.Element;
+  }: DsSmartTabsProps): react_jsx_runtime21.JSX.Element;
   Tab: React.FC<DsSmartTabProps>;
 };
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"ds-smart-tabs.d.ts","names":[],"sources":["../../../src/components/ds-smart-tabs/ds-smart-tabs.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAKsF,cAmFhF,WAoBL,EAAA;;;;;;;;KAbE,mBAAgB,kBAAA,CAAA,GAAA,CAAA"}
+{"version":3,"file":"ds-smart-tabs.d.ts","names":[],"sources":["../../../src/components/ds-smart-tabs/ds-smart-tabs.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAKsF,cAmFhF,WAoBL,EAAA;;;;;;;;KAbE,mBAAgB,mBAAA,CAAA,GAAA,CAAA"}

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

@@ -20,7 +20,7 @@ const widthMap = {
 * Design system Spinner component
 */
 const DsSpinner = (t0) => {
-	const $ = (0, react_compiler_runtime.c)(26);
+	const $ = (0, react_compiler_runtime.c)(25);
 	let className;
 	let props;
 	let t1;
@@ -51,70 +51,68 @@ const DsSpinner = (t0) => {
 	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);
+	let t4;
+	if ($[7] !== className) {
+		t4 = (0, classnames.default)(require_ds_spinner_module.default.spinnerContainer, className);
 		$[7] = className;
 		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = (0, classnames.default)(require_ds_spinner_module.default.progressCircle, require_ds_spinner_module.default.spin);
 		$[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 t6 = `0 0 ${String(actualSize)} ${String(actualSize)}`;
+	const t7 = actualSize / 2;
 	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", {
+	let t9;
+	if ($[10] !== actualWidth || $[11] !== radius || $[12] !== strokeDasharray || $[13] !== t7 || $[14] !== t8) {
+		t9 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
 			className: require_ds_spinner_module.default.progressArc,
-			cx: t8,
-			cy: t9,
+			cx: t7,
+			cy: t8,
 			r: radius,
 			fill: "none",
 			strokeWidth: actualWidth,
 			strokeDasharray,
 			strokeLinecap: "round"
 		});
-		$[11] = actualWidth;
-		$[12] = radius;
-		$[13] = strokeDasharray;
+		$[10] = actualWidth;
+		$[11] = radius;
+		$[12] = strokeDasharray;
+		$[13] = t7;
 		$[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,
+	} else t9 = $[15];
+	let t10;
+	if ($[16] !== actualSize || $[17] !== t6 || $[18] !== t9) {
+		t10 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+			className: t5,
 			width: actualSize,
 			height: actualSize,
-			viewBox: t7,
-			children: t10
+			viewBox: t6,
+			children: t9
 		});
-		$[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,
+		$[16] = actualSize;
+		$[17] = t6;
+		$[18] = t9;
+		$[19] = t10;
+	} else t10 = $[19];
+	let t11;
+	if ($[20] !== props || $[21] !== style || $[22] !== t10 || $[23] !== t4) {
+		t11 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: t4,
 			style,
 			...props,
-			children: t11
+			children: t10
 		});
-		$[21] = props;
-		$[22] = style;
-		$[23] = t11;
-		$[24] = t5;
-		$[25] = t12;
-	} else t12 = $[25];
-	return t12;
+		$[20] = props;
+		$[21] = style;
+		$[22] = t10;
+		$[23] = t4;
+		$[24] = t11;
+	} else t11 = $[24];
+	return t11;
 };
 var ds_spinner_default = DsSpinner;
 

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

@@ -18,7 +18,7 @@ const widthMap = {
 * Design system Spinner component
 */
 const DsSpinner = (t0) => {
-	const $ = c(26);
+	const $ = c(25);
 	let className;
 	let props;
 	let t1;
@@ -49,70 +49,68 @@ const DsSpinner = (t0) => {
 	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);
+	let t4;
+	if ($[7] !== className) {
+		t4 = classNames(ds_spinner_module_default.spinnerContainer, className);
 		$[7] = className;
 		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = classNames(ds_spinner_module_default.progressCircle, ds_spinner_module_default.spin);
 		$[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 t6 = `0 0 ${String(actualSize)} ${String(actualSize)}`;
+	const t7 = actualSize / 2;
 	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", {
+	let t9;
+	if ($[10] !== actualWidth || $[11] !== radius || $[12] !== strokeDasharray || $[13] !== t7 || $[14] !== t8) {
+		t9 = /* @__PURE__ */ jsx("circle", {
 			className: ds_spinner_module_default.progressArc,
-			cx: t8,
-			cy: t9,
+			cx: t7,
+			cy: t8,
 			r: radius,
 			fill: "none",
 			strokeWidth: actualWidth,
 			strokeDasharray,
 			strokeLinecap: "round"
 		});
-		$[11] = actualWidth;
-		$[12] = radius;
-		$[13] = strokeDasharray;
+		$[10] = actualWidth;
+		$[11] = radius;
+		$[12] = strokeDasharray;
+		$[13] = t7;
 		$[14] = t8;
 		$[15] = t9;
-		$[16] = t10;
-	} else t10 = $[16];
-	let t11;
-	if ($[17] !== actualSize || $[18] !== t10 || $[19] !== t7) {
-		t11 = /* @__PURE__ */ jsx("svg", {
-			className: t6,
+	} else t9 = $[15];
+	let t10;
+	if ($[16] !== actualSize || $[17] !== t6 || $[18] !== t9) {
+		t10 = /* @__PURE__ */ jsx("svg", {
+			className: t5,
 			width: actualSize,
 			height: actualSize,
-			viewBox: t7,
-			children: t10
+			viewBox: t6,
+			children: t9
 		});
-		$[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,
+		$[16] = actualSize;
+		$[17] = t6;
+		$[18] = t9;
+		$[19] = t10;
+	} else t10 = $[19];
+	let t11;
+	if ($[20] !== props || $[21] !== style || $[22] !== t10 || $[23] !== t4) {
+		t11 = /* @__PURE__ */ jsx("div", {
+			className: t4,
 			style,
 			...props,
-			children: t11
+			children: t10
 		});
-		$[21] = props;
-		$[22] = style;
-		$[23] = t11;
-		$[24] = t5;
-		$[25] = t12;
-	} else t12 = $[25];
-	return t12;
+		$[20] = props;
+		$[21] = style;
+		$[22] = t10;
+		$[23] = t4;
+		$[24] = t11;
+	} else t11 = $[24];
+	return t11;
 };
 var ds_spinner_default = DsSpinner;
 

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

@@ -1 +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":"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"}
+{"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","spinnerContainer","t5","Symbol","for","progressCircle","spin","t6","t7","t8","t9","progressArc","t10","t11"],"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, 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":"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"}

package/dist/components/ds-stepper/components/ds-step-content.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime42 from "react/jsx-runtime";
+import * as react_jsx_runtime53 from "react/jsx-runtime";
 import { ReactNode } from "react";
 
 //#region src/components/ds-stepper/components/ds-step-content.d.ts
@@ -13,7 +13,7 @@ declare function DsStepContent({
   label,
   description,
   actions
-}: DsStepContentProps): react_jsx_runtime42.JSX.Element;
+}: DsStepContentProps): react_jsx_runtime53.JSX.Element;
 //#endregion
 export { DsStepContent };
 //# sourceMappingURL=ds-step-content.d.cts.map

package/dist/components/ds-stepper/components/ds-step-content.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime35 from "react/jsx-runtime";
+import * as react_jsx_runtime47 from "react/jsx-runtime";
 import { ReactNode } from "react";
 
 //#region src/components/ds-stepper/components/ds-step-content.d.ts
@@ -13,7 +13,7 @@ declare function DsStepContent({
   label,
   description,
   actions
-}: DsStepContentProps): react_jsx_runtime35.JSX.Element;
+}: DsStepContentProps): react_jsx_runtime47.JSX.Element;
 //#endregion
 export { DsStepContent };
 //# sourceMappingURL=ds-step-content.d.ts.map

package/dist/components/ds-stepper/components/ds-step-next-button.d.cts

@@ -1,10 +1,10 @@
-import * as react_jsx_runtime44 from "react/jsx-runtime";
+import * as react_jsx_runtime54 from "react/jsx-runtime";
 import { PropsWithChildren } from "react";
 
 //#region src/components/ds-stepper/components/ds-step-next-button.d.ts
 declare function DsNextStepButton({
   children
-}: PropsWithChildren): react_jsx_runtime44.JSX.Element;
+}: PropsWithChildren): react_jsx_runtime54.JSX.Element;
 //#endregion
 export { DsNextStepButton };
 //# sourceMappingURL=ds-step-next-button.d.cts.map

package/dist/components/ds-stepper/components/ds-step-next-button.d.ts

@@ -1,10 +1,10 @@
-import * as react_jsx_runtime36 from "react/jsx-runtime";
+import * as react_jsx_runtime48 from "react/jsx-runtime";
 import { PropsWithChildren } from "react";
 
 //#region src/components/ds-stepper/components/ds-step-next-button.d.ts
 declare function DsNextStepButton({
   children
-}: PropsWithChildren): react_jsx_runtime36.JSX.Element;
+}: PropsWithChildren): react_jsx_runtime48.JSX.Element;
 //#endregion
 export { DsNextStepButton };
 //# sourceMappingURL=ds-step-next-button.d.ts.map

package/dist/components/ds-stepper/components/ds-step.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime41 from "react/jsx-runtime";
+import * as react_jsx_runtime52 from "react/jsx-runtime";
 import { PropsWithChildren } from "react";
 
 //#region src/components/ds-stepper/components/ds-step.d.ts
@@ -10,7 +10,7 @@ declare function DsStep({
   index,
   children,
   className
-}: DsStepProps): react_jsx_runtime41.JSX.Element | null;
+}: DsStepProps): react_jsx_runtime52.JSX.Element | null;
 //#endregion
 export { DsStep };
 //# sourceMappingURL=ds-step.d.cts.map

package/dist/components/ds-stepper/components/ds-step.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime34 from "react/jsx-runtime";
+import * as react_jsx_runtime46 from "react/jsx-runtime";
 import { PropsWithChildren } from "react";
 
 //#region src/components/ds-stepper/components/ds-step.d.ts
@@ -10,7 +10,7 @@ declare function DsStep({
   index,
   children,
   className
-}: DsStepProps): react_jsx_runtime34.JSX.Element | null;
+}: DsStepProps): react_jsx_runtime46.JSX.Element | null;
 //#endregion
 export { DsStep };
 //# sourceMappingURL=ds-step.d.ts.map

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

@@ -1,5 +1,5 @@
 import { DsStepperProps } from "./ds-stepper.types.cjs";
-import * as react_jsx_runtime43 from "react/jsx-runtime";
+import * as react_jsx_runtime51 from "react/jsx-runtime";
 
 //#region src/components/ds-stepper/ds-stepper.d.ts
 declare function DsStepper({
@@ -9,7 +9,7 @@ declare function DsStepper({
   onStepChange,
   onComplete,
   children
-}: DsStepperProps): react_jsx_runtime43.JSX.Element;
+}: DsStepperProps): react_jsx_runtime51.JSX.Element;
 //#endregion
 export { DsStepper };
 //# sourceMappingURL=ds-stepper.d.cts.map