@drivenets/design-system 0.4.0 → 0.6.0

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

@@ -13,9 +13,9 @@ 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 __ark_ui_react_portal = require("@ark-ui/react/portal");
 let react = require("react");
-let __ark_ui_react_select = require("@ark-ui/react/select");
+let _ark_ui_react_portal = require("@ark-ui/react/portal");
+let _ark_ui_react_select = require("@ark-ui/react/select");
 
 //#region src/components/ds-select/ds-select.tsx
 const SEARCH_THRESHOLD = 13;
@@ -31,7 +31,7 @@ const DsSelect = (t0) => {
 	const [searchTerm, setSearchTerm] = (0, react.useState)("");
 	const [showAllItems, setShowAllItems] = (0, react.useState)(false);
 	const internalOptions = multiselectProps.multiple ? [SELECT_ALL, ...userOptions] : userOptions;
-	const collection = (0, __ark_ui_react_select.createListCollection)({
+	const collection = (0, _ark_ui_react_select.createListCollection)({
 		items: internalOptions,
 		itemToValue: _temp
 	});
@@ -51,7 +51,7 @@ const DsSelect = (t0) => {
 		};
 		$[2] = t3;
 	} else t3 = $[2];
-	const select = (0, __ark_ui_react_select.useSelect)({
+	const select = (0, _ark_ui_react_select.useSelect)({
 		collection,
 		disabled,
 		multiple: multiselectProps.multiple,
@@ -86,7 +86,7 @@ const DsSelect = (t0) => {
 			className: require_ds_select_module.default.valueText,
 			variant: "body-sm-reg",
 			asChild: true,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_select.Select.ValueText, { placeholder })
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_select.Select.ValueText, { placeholder })
 		});
 		$[6] = placeholder;
 		$[7] = t6;
@@ -94,7 +94,7 @@ const DsSelect = (t0) => {
 	const t7 = size === "small" ? "small" : "medium";
 	let t8;
 	if ($[8] !== t7) {
-		t8 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_select.Select.Indicator, {
+		t8 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_select.Select.Indicator, {
 			className: require_ds_select_module.default.triggerIcon,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
 				icon: "keyboard_arrow_down",
@@ -106,7 +106,7 @@ const DsSelect = (t0) => {
 	} else t8 = $[9];
 	let t9;
 	if ($[10] !== id || $[11] !== t6 || $[12] !== t8) {
-		t9 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ark_ui_react_select.Select.Trigger, {
+		t9 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ark_ui_react_select.Select.Trigger, {
 			id,
 			className: require_ds_select_module.default.trigger,
 			"aria-labelledby": null,
@@ -119,7 +119,7 @@ const DsSelect = (t0) => {
 	} else t9 = $[13];
 	let t10;
 	if ($[14] !== clearable || $[15] !== onClear || $[16] !== size) {
-		t10 = clearable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_select.Select.ClearTrigger, {
+		t10 = clearable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_select.Select.ClearTrigger, {
 			className: require_ds_select_module.default.clearIcon,
 			onClick: onClear,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
@@ -132,10 +132,10 @@ const DsSelect = (t0) => {
 		$[16] = size;
 		$[17] = t10;
 	} else t10 = $[17];
-	const T0 = __ark_ui_react_portal.Portal;
-	const t11 = __ark_ui_react_select.Select;
+	const T0 = _ark_ui_react_portal.Portal;
+	const t11 = _ark_ui_react_select.Select;
 	const t12 = require_ds_select_module.default;
-	const t13 = __ark_ui_react_select.Select;
+	const t13 = _ark_ui_react_select.Select;
 	const t14 = require_ds_select_module.default;
 	let t15;
 	if ($[18] !== searchTerm || $[19] !== userOptions.length) {
@@ -172,7 +172,7 @@ const DsSelect = (t0) => {
 			variant: "body-sm-reg",
 			asChild: true,
 			className: require_ds_select_module.default.item,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ark_ui_react_select.Select.Item, {
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ark_ui_react_select.Select.Item, {
 				item: item_0,
 				children: [
 					multiselectProps.multiple && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_checkbox.default, { checked }),
@@ -181,7 +181,7 @@ const DsSelect = (t0) => {
 						icon: item_0.icon,
 						"aria-hidden": "true"
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_select.Select.ItemText, { children: item_0.label })
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_select.Select.ItemText, { children: item_0.label })
 				]
 			})
 		}, collection.getItemValue(item_0));
@@ -223,14 +223,14 @@ const DsSelect = (t0) => {
 	} else t20 = $[33];
 	let t21;
 	if ($[34] === Symbol.for("react.memo_cache_sentinel")) {
-		t21 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_select.Select.HiddenSelect, { style: { display: "none" } });
+		t21 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_select.Select.HiddenSelect, { style: { display: "none" } });
 		$[34] = t21;
 	} else t21 = $[34];
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ark_ui_react_select.Select.RootProvider, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ark_ui_react_select.Select.RootProvider, {
 		value: select,
 		lazyMount: true,
 		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ark_ui_react_select.Select.Control, {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ark_ui_react_select.Select.Control, {
 				className: t5,
 				style,
 				onBlur,

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

@@ -1,5 +1,5 @@
 import { DsSelectProps } from "./ds-select.types.cjs";
-import * as react_jsx_runtime38 from "react/jsx-runtime";
+import * as react_jsx_runtime43 from "react/jsx-runtime";
 
 //#region src/components/ds-select/ds-select.d.ts
 declare const DsSelect: ({
@@ -15,7 +15,7 @@ declare const DsSelect: ({
   placeholder,
   disabled,
   ...multiselectProps
-}: DsSelectProps) => react_jsx_runtime38.JSX.Element;
+}: DsSelectProps) => react_jsx_runtime43.JSX.Element;
 //#endregion
 export { DsSelect };
 //# sourceMappingURL=ds-select.d.cts.map

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

@@ -1,5 +1,5 @@
 import { DsSelectProps } from "./ds-select.types.js";
-import * as react_jsx_runtime43 from "react/jsx-runtime";
+import * as react_jsx_runtime59 from "react/jsx-runtime";
 
 //#region src/components/ds-select/ds-select.d.ts
 declare const DsSelect: ({
@@ -15,7 +15,7 @@ declare const DsSelect: ({
   placeholder,
   disabled,
   ...multiselectProps
-}: DsSelectProps) => react_jsx_runtime43.JSX.Element;
+}: DsSelectProps) => react_jsx_runtime59.JSX.Element;
 //#endregion
 export { DsSelect };
 //# sourceMappingURL=ds-select.d.ts.map

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

@@ -11,8 +11,8 @@ import { SelectItemsChips } from "./select-items-chips.js";
 import { c } from "react/compiler-runtime";
 import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Portal } from "@ark-ui/react/portal";
 import { useState } from "react";
+import { Portal } from "@ark-ui/react/portal";
 import { Select, createListCollection, useSelect } from "@ark-ui/react/select";
 
 //#region src/components/ds-select/ds-select.tsx

package/dist/components/ds-select/select-items-chips.cjs

@@ -4,13 +4,13 @@ const require_ds_chip = require('../ds-chip/ds-chip.cjs');
 const require_ds_select_module = require('./ds-select.module.cjs');
 let react_compiler_runtime = require("react/compiler-runtime");
 let react_jsx_runtime = require("react/jsx-runtime");
-let __ark_ui_react_select = require("@ark-ui/react/select");
+let _ark_ui_react_select = require("@ark-ui/react/select");
 
 //#region src/components/ds-select/select-items-chips.tsx
 function SelectItemsChips(t0) {
 	const $ = (0, react_compiler_runtime.c)(24);
 	const { showAll, onShowAll, onValueChange, count } = t0;
-	const { collection, value: selectedItems } = (0, __ark_ui_react_select.useSelectContext)();
+	const { collection, value: selectedItems } = (0, _ark_ui_react_select.useSelectContext)();
 	if (!selectedItems.length) return null;
 	let t1;
 	if ($[0] !== count || $[1] !== selectedItems || $[2] !== showAll) {

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

@@ -1,5 +1,5 @@
 import { DsSkeletonCircleProps } from "./ds-skeleton.types.cjs";
-import * as react_jsx_runtime40 from "react/jsx-runtime";
+import * as react_jsx_runtime50 from "react/jsx-runtime";
 
 //#region src/components/ds-skeleton/ds-skeleton-circle.d.ts
 
@@ -12,7 +12,7 @@ declare const DsSkeletonCircle: ({
   color,
   className,
   style
-}: DsSkeletonCircleProps) => react_jsx_runtime40.JSX.Element;
+}: DsSkeletonCircleProps) => react_jsx_runtime50.JSX.Element;
 //#endregion
 export { DsSkeletonCircle };
 //# sourceMappingURL=ds-skeleton-circle.d.cts.map

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

@@ -1,5 +1,5 @@
 import { DsSkeletonCircleProps } from "./ds-skeleton.types.js";
-import * as react_jsx_runtime26 from "react/jsx-runtime";
+import * as react_jsx_runtime30 from "react/jsx-runtime";
 
 //#region src/components/ds-skeleton/ds-skeleton-circle.d.ts
 
@@ -12,7 +12,7 @@ declare const DsSkeletonCircle: ({
   color,
   className,
   style
-}: DsSkeletonCircleProps) => react_jsx_runtime26.JSX.Element;
+}: DsSkeletonCircleProps) => react_jsx_runtime30.JSX.Element;
 //#endregion
 export { DsSkeletonCircle };
 //# sourceMappingURL=ds-skeleton-circle.d.ts.map

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

@@ -1,5 +1,5 @@
 import { DsSkeletonRectProps } from "./ds-skeleton.types.cjs";
-import * as react_jsx_runtime39 from "react/jsx-runtime";
+import * as react_jsx_runtime45 from "react/jsx-runtime";
 
 //#region src/components/ds-skeleton/ds-skeleton-rect.d.ts
 /**
@@ -12,7 +12,7 @@ declare const DsSkeletonRect: ({
   color,
   className,
   style
-}: DsSkeletonRectProps) => react_jsx_runtime39.JSX.Element;
+}: DsSkeletonRectProps) => react_jsx_runtime45.JSX.Element;
 //#endregion
 export { DsSkeletonRect };
 //# sourceMappingURL=ds-skeleton-rect.d.cts.map

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

@@ -1,5 +1,5 @@
 import { DsSkeletonRectProps } from "./ds-skeleton.types.js";
-import * as react_jsx_runtime13 from "react/jsx-runtime";
+import * as react_jsx_runtime25 from "react/jsx-runtime";
 
 //#region src/components/ds-skeleton/ds-skeleton-rect.d.ts
 /**
@@ -12,7 +12,7 @@ declare const DsSkeletonRect: ({
   color,
   className,
   style
-}: DsSkeletonRectProps) => react_jsx_runtime13.JSX.Element;
+}: DsSkeletonRectProps) => react_jsx_runtime25.JSX.Element;
 //#endregion
 export { DsSkeletonRect };
 //# sourceMappingURL=ds-skeleton-rect.d.ts.map

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

@@ -1,5 +1,5 @@
 import { DsSkeletonTextProps } from "./ds-skeleton.types.cjs";
-import * as react_jsx_runtime41 from "react/jsx-runtime";
+import * as react_jsx_runtime46 from "react/jsx-runtime";
 
 //#region src/components/ds-skeleton/ds-skeleton-text.d.ts
 
@@ -15,7 +15,7 @@ declare const DsSkeletonText: ({
   radius,
   className,
   style
-}: DsSkeletonTextProps) => react_jsx_runtime41.JSX.Element;
+}: DsSkeletonTextProps) => react_jsx_runtime46.JSX.Element;
 //#endregion
 export { DsSkeletonText };
 //# sourceMappingURL=ds-skeleton-text.d.cts.map

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

@@ -1,5 +1,5 @@
 import { DsSkeletonTextProps } from "./ds-skeleton.types.js";
-import * as react_jsx_runtime22 from "react/jsx-runtime";
+import * as react_jsx_runtime29 from "react/jsx-runtime";
 
 //#region src/components/ds-skeleton/ds-skeleton-text.d.ts
 
@@ -15,7 +15,7 @@ declare const DsSkeletonText: ({
   radius,
   className,
   style
-}: DsSkeletonTextProps) => react_jsx_runtime22.JSX.Element;
+}: DsSkeletonTextProps) => react_jsx_runtime29.JSX.Element;
 //#endregion
 export { DsSkeletonText };
 //# sourceMappingURL=ds-skeleton-text.d.ts.map

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

@@ -1,5 +1,5 @@
 import { DsSkeletonCircleProps, DsSkeletonRectProps, DsSkeletonTextProps } from "./ds-skeleton.types.cjs";
-import * as react_jsx_runtime42 from "react/jsx-runtime";
+import * as react_jsx_runtime47 from "react/jsx-runtime";
 
 //#region src/components/ds-skeleton/ds-skeleton.d.ts
 declare const _default: {
@@ -11,13 +11,13 @@ declare const _default: {
     radius,
     className,
     style
-  }: DsSkeletonTextProps) => react_jsx_runtime42.JSX.Element;
+  }: DsSkeletonTextProps) => react_jsx_runtime47.JSX.Element;
   Circle: ({
     size,
     color,
     className,
     style
-  }: DsSkeletonCircleProps) => react_jsx_runtime42.JSX.Element;
+  }: DsSkeletonCircleProps) => react_jsx_runtime47.JSX.Element;
   Rect: ({
     width,
     height,
@@ -25,7 +25,7 @@ declare const _default: {
     color,
     className,
     style
-  }: DsSkeletonRectProps) => react_jsx_runtime42.JSX.Element;
+  }: DsSkeletonRectProps) => react_jsx_runtime47.JSX.Element;
 };
 //#endregion
 export { _default };

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

@@ -1,5 +1,5 @@
 import { DsSkeletonCircleProps, DsSkeletonRectProps, DsSkeletonTextProps } from "./ds-skeleton.types.js";
-import * as react_jsx_runtime23 from "react/jsx-runtime";
+import * as react_jsx_runtime26 from "react/jsx-runtime";
 
 //#region src/components/ds-skeleton/ds-skeleton.d.ts
 declare const _default: {
@@ -11,13 +11,13 @@ declare const _default: {
     radius,
     className,
     style
-  }: DsSkeletonTextProps) => react_jsx_runtime23.JSX.Element;
+  }: DsSkeletonTextProps) => react_jsx_runtime26.JSX.Element;
   Circle: ({
     size,
     color,
     className,
     style
-  }: DsSkeletonCircleProps) => react_jsx_runtime23.JSX.Element;
+  }: DsSkeletonCircleProps) => react_jsx_runtime26.JSX.Element;
   Rect: ({
     width,
     height,
@@ -25,7 +25,7 @@ declare const _default: {
     color,
     className,
     style
-  }: DsSkeletonRectProps) => react_jsx_runtime23.JSX.Element;
+  }: DsSkeletonRectProps) => react_jsx_runtime26.JSX.Element;
 };
 //#endregion
 export { _default };

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_runtime45 from "react/jsx-runtime";
+import * as react_jsx_runtime44 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_runtime45.JSX.Element;
+  }: DsSmartTabsProps): react_jsx_runtime44.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_runtime21 from "react/jsx-runtime";
+import * as react_jsx_runtime24 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_runtime21.JSX.Element;
+  }: DsSmartTabsProps): react_jsx_runtime24.JSX.Element;
   Tab: React.FC<DsSmartTabProps>;
 };
 //#endregion

package/dist/components/ds-stepper/components/ds-step-content.cjs

@@ -1,6 +1,7 @@
 const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
 const require_ds_stepper_module = require('../ds-stepper.module.cjs');
 const require_use_stepper = require('../hooks/use-stepper.cjs');
+const require_ds_step_separator = require('./ds-step-separator.cjs');
 const require_ds_step_label = require('./ds-step-label.cjs');
 const require_ds_step_description = require('./ds-step-description.cjs');
 let react_compiler_runtime = require("react/compiler-runtime");
@@ -10,9 +11,9 @@ let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/ds-stepper/components/ds-step-content.tsx
 function DsStepContent(t0) {
-	const $ = (0, react_compiler_runtime.c)(18);
+	const $ = (0, react_compiler_runtime.c)(16);
 	const { index, label, description, actions } = t0;
-	const { variant, stepsApi } = require_use_stepper.useStepper();
+	const { variant, orientation, stepsApi } = require_use_stepper.useStepper();
 	let t1;
 	if ($[0] !== index || $[1] !== stepsApi) {
 		t1 = stepsApi.getItemState({ index });
@@ -21,6 +22,8 @@ function DsStepContent(t0) {
 		$[2] = t1;
 	} else t1 = $[2];
 	const { current } = t1;
+	const isHorizontal = orientation === "horizontal";
+	const showDescription = variant !== "single" && description;
 	const t2 = variant === "single";
 	let t3;
 	if ($[3] !== t2) {
@@ -29,45 +32,38 @@ function DsStepContent(t0) {
 		$[4] = t3;
 	} else t3 = $[4];
 	let t4;
-	if ($[5] !== label) {
-		t4 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_step_label.DsStepLabel, { children: label });
-		$[5] = label;
-		$[6] = t4;
-	} else t4 = $[6];
-	let t5;
-	if ($[7] !== description || $[8] !== variant) {
-		t5 = variant !== "single" && description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_step_description.DsStepDescription, { children: description });
+	if ($[5] !== actions || $[6] !== current || $[7] !== description || $[8] !== index || $[9] !== isHorizontal || $[10] !== label || $[11] !== showDescription) {
+		t4 = isHorizontal ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: require_ds_stepper_module.default.stepLabelRow,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_step_label.DsStepLabel, { children: label }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_step_separator.DsStepSeparator, { index })]
+		}), showDescription && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_step_description.DsStepDescription, { children: description })] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_step_label.DsStepLabel, { children: label }),
+			showDescription && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_step_description.DsStepDescription, { children: description }),
+			actions && current && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: require_ds_stepper_module.default.stepActions,
+				children: actions
+			})
+		] });
+		$[5] = actions;
+		$[6] = current;
 		$[7] = description;
-		$[8] = variant;
-		$[9] = t5;
-	} else t5 = $[9];
-	let t6;
-	if ($[10] !== actions || $[11] !== current) {
-		t6 = actions && current && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: require_ds_stepper_module.default.stepActions,
-			children: actions
-		});
-		$[10] = actions;
-		$[11] = current;
-		$[12] = t6;
-	} else t6 = $[12];
-	let t7;
-	if ($[13] !== t3 || $[14] !== t4 || $[15] !== t5 || $[16] !== t6) {
-		t7 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		$[8] = index;
+		$[9] = isHorizontal;
+		$[10] = label;
+		$[11] = showDescription;
+		$[12] = t4;
+	} else t4 = $[12];
+	let t5;
+	if ($[13] !== t3 || $[14] !== t4) {
+		t5 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: t3,
-			children: [
-				t4,
-				t5,
-				t6
-			]
+			children: t4
 		});
 		$[13] = t3;
 		$[14] = t4;
 		$[15] = t5;
-		$[16] = t6;
-		$[17] = t7;
-	} else t7 = $[17];
-	return t7;
+	} else t5 = $[15];
+	return t5;
 }
 
 //#endregion

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"ds-step-content.d.cts","names":[],"sources":["../../../../src/components/ds-stepper/components/ds-step-content.tsx"],"sourcesContent":[],"mappings":";;;;KAOK,kBAAA;;;EAAA,WAAA,CAAA,EAAA,MAAA;EAOW,OAAA,CAAA,EAHL,SAGkB;CAAG;AAAO,iBAAvB,aAAA,CAAuB;EAAA,KAAA;EAAA,KAAA;EAAA,WAAA;EAAA;AAAA,CAAA,EAA+B,kBAA/B,CAAA,EAAiD,mBAAA,CAAA,GAAA,CAAA,OAAjD"}
+{"version":3,"file":"ds-step-content.d.cts","names":[],"sources":["../../../../src/components/ds-stepper/components/ds-step-content.tsx"],"sourcesContent":[],"mappings":";;;;KAQY,kBAAA;;SAEJ;EAFI,WAAA,CAAA,EAGG,SAHe;EAEtB,OAAA,CAAA,EAEG,SAFH;CACO;AACJ,iBAGK,aAAA,CAHL;EAAA,KAAA;EAAA,KAAA;EAAA,WAAA;EAAA;AAAA,CAAA,EAG2D,kBAH3D,CAAA,EAG6E,mBAAA,CAAA,GAAA,CAAA,OAH7E"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"ds-step-content.d.ts","names":[],"sources":["../../../../src/components/ds-stepper/components/ds-step-content.tsx"],"sourcesContent":[],"mappings":";;;;KAOK,kBAAA;;;EAAA,WAAA,CAAA,EAAA,MAAA;EAOW,OAAA,CAAA,EAHL,SAGkB;CAAG;AAAO,iBAAvB,aAAA,CAAuB;EAAA,KAAA;EAAA,KAAA;EAAA,WAAA;EAAA;AAAA,CAAA,EAA+B,kBAA/B,CAAA,EAAiD,mBAAA,CAAA,GAAA,CAAA,OAAjD"}
+{"version":3,"file":"ds-step-content.d.ts","names":[],"sources":["../../../../src/components/ds-stepper/components/ds-step-content.tsx"],"sourcesContent":[],"mappings":";;;;KAQY,kBAAA;;SAEJ;EAFI,WAAA,CAAA,EAGG,SAHe;EAEtB,OAAA,CAAA,EAEG,SAFH;CACO;AACJ,iBAGK,aAAA,CAHL;EAAA,KAAA;EAAA,KAAA;EAAA,WAAA;EAAA;AAAA,CAAA,EAG2D,kBAH3D,CAAA,EAG6E,mBAAA,CAAA,GAAA,CAAA,OAH7E"}

package/dist/components/ds-stepper/components/ds-step-content.js

@@ -1,16 +1,17 @@
 import ds_stepper_module_default from "../ds-stepper.module.js";
 import { useStepper } from "../hooks/use-stepper.js";
+import { DsStepSeparator } from "./ds-step-separator.js";
 import { DsStepLabel } from "./ds-step-label.js";
 import { DsStepDescription } from "./ds-step-description.js";
 import { c } from "react/compiler-runtime";
 import classNames from "classnames";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/ds-stepper/components/ds-step-content.tsx
 function DsStepContent(t0) {
-	const $ = c(18);
+	const $ = c(16);
 	const { index, label, description, actions } = t0;
-	const { variant, stepsApi } = useStepper();
+	const { variant, orientation, stepsApi } = useStepper();
 	let t1;
 	if ($[0] !== index || $[1] !== stepsApi) {
 		t1 = stepsApi.getItemState({ index });
@@ -19,6 +20,8 @@ function DsStepContent(t0) {
 		$[2] = t1;
 	} else t1 = $[2];
 	const { current } = t1;
+	const isHorizontal = orientation === "horizontal";
+	const showDescription = variant !== "single" && description;
 	const t2 = variant === "single";
 	let t3;
 	if ($[3] !== t2) {
@@ -27,45 +30,38 @@ function DsStepContent(t0) {
 		$[4] = t3;
 	} else t3 = $[4];
 	let t4;
-	if ($[5] !== label) {
-		t4 = /* @__PURE__ */ jsx(DsStepLabel, { children: label });
-		$[5] = label;
-		$[6] = t4;
-	} else t4 = $[6];
-	let t5;
-	if ($[7] !== description || $[8] !== variant) {
-		t5 = variant !== "single" && description && /* @__PURE__ */ jsx(DsStepDescription, { children: description });
+	if ($[5] !== actions || $[6] !== current || $[7] !== description || $[8] !== index || $[9] !== isHorizontal || $[10] !== label || $[11] !== showDescription) {
+		t4 = isHorizontal ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+			className: ds_stepper_module_default.stepLabelRow,
+			children: [/* @__PURE__ */ jsx(DsStepLabel, { children: label }), /* @__PURE__ */ jsx(DsStepSeparator, { index })]
+		}), showDescription && /* @__PURE__ */ jsx(DsStepDescription, { children: description })] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx(DsStepLabel, { children: label }),
+			showDescription && /* @__PURE__ */ jsx(DsStepDescription, { children: description }),
+			actions && current && /* @__PURE__ */ jsx("div", {
+				className: ds_stepper_module_default.stepActions,
+				children: actions
+			})
+		] });
+		$[5] = actions;
+		$[6] = current;
 		$[7] = description;
-		$[8] = variant;
-		$[9] = t5;
-	} else t5 = $[9];
-	let t6;
-	if ($[10] !== actions || $[11] !== current) {
-		t6 = actions && current && /* @__PURE__ */ jsx("div", {
-			className: ds_stepper_module_default.stepActions,
-			children: actions
-		});
-		$[10] = actions;
-		$[11] = current;
-		$[12] = t6;
-	} else t6 = $[12];
-	let t7;
-	if ($[13] !== t3 || $[14] !== t4 || $[15] !== t5 || $[16] !== t6) {
-		t7 = /* @__PURE__ */ jsxs("div", {
+		$[8] = index;
+		$[9] = isHorizontal;
+		$[10] = label;
+		$[11] = showDescription;
+		$[12] = t4;
+	} else t4 = $[12];
+	let t5;
+	if ($[13] !== t3 || $[14] !== t4) {
+		t5 = /* @__PURE__ */ jsx("div", {
 			className: t3,
-			children: [
-				t4,
-				t5,
-				t6
-			]
+			children: t4
 		});
 		$[13] = t3;
 		$[14] = t4;
 		$[15] = t5;
-		$[16] = t6;
-		$[17] = t7;
-	} else t7 = $[17];
-	return t7;
+	} else t5 = $[15];
+	return t5;
 }
 
 //#endregion