@drivenets/design-system 0.5.0 → 0.6.0

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

@@ -1,11 +1,12 @@
 //#region src/components/ds-panel/ds-panel.module.scss
 var ds_panel_module_default = {
-	"root": "_root_17q29_1",
-	"variantFloating": "_variantFloating_17q29_1",
-	"disablePadding": "_disablePadding_17q29_1",
-	"trigger": "_trigger_17q29_1",
-	"triggerCollapsed": "_triggerCollapsed_17q29_1",
-	"variantDocked": "_variantDocked_17q29_1"
+	"root": "_root_1g6rb_1",
+	"variantFloating": "_variantFloating_1g6rb_1",
+	"dragging": "_dragging_1g6rb_1",
+	"disablePadding": "_disablePadding_1g6rb_1",
+	"trigger": "_trigger_1g6rb_1",
+	"triggerCollapsed": "_triggerCollapsed_1g6rb_1",
+	"variantDocked": "_variantDocked_1g6rb_1"
 };
 
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"ds-panel.module.js","names":[],"sources":["../../../src/components/ds-panel/ds-panel.module.scss"],"sourcesContent":[".root {\n\tposition: relative;\n\tbackground: var(--white);\n\tpadding: var(--spacing-6);\n\twidth: 340px;\n\tborder-inline-end: 1px solid transparent;\n\n\t&[data-state='open']:hover,\n\t&[data-state='open']:focus-within {\n\t\tborder-color: var(--color-border);\n\t}\n\n\t&[data-state='closed'] {\n\t\tdisplay: none;\n\t}\n\n\t&.variantFloating {\n\t\tposition: absolute;\n\t\tinset-inline-start: var(--spacing-3);\n\t\ttop: var(--spacing-3);\n\t\tborder: none;\n\t\tborder-radius: var(--spacing-2);\n\t\tfilter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.22));\n\t}\n\n\t&.disablePadding {\n\t\tpadding: 0;\n\t}\n}\n\n.trigger {\n\t--size: 28px;\n\n\tposition: absolute;\n\tcursor: pointer;\n\tuser-select: none;\n\tdisplay: none;\n\theight: var(--size);\n\twidth: var(--size);\n\tpadding: 1px;\n\tborder: 1px solid var(--color-border-secondary);\n\tborder-radius: 100%;\n\tbackground: var(--white);\n\tcolor: var(--color-icon-secondary);\n\ttop: var(--spacing-6);\n\tinset-inline-start: 100%;\n\tmargin-inline-start: calc(var(--size) / -2);\n\n\t&[data-state='closed'],\n\t&.triggerCollapsed {\n\t\trotate: y 180deg;\n\t}\n\n\t.root:hover &,\n\t.root:focus-within & {\n\t\tdisplay: flex;\n\t}\n\n\t&:hover,\n\t&:focus {\n\t\tcolor: var(--color-icon-primary);\n\t\tborder-color: var(--color-border-action-primary);\n\t\toutline: none;\n\t\tbackground: var(--color-background-action-tertiary);\n\n\t\t.root:has(&) {\n\t\t\tborder-color: var(--color-border-action-primary);\n\n\t\t\t// Add an inset single-sided border on hover without affecting the layout.\n\t\t\t&.variantDocked[data-state='open']::before {\n\t\t\t\tcontent: '';\n\t\t\t\tdisplay: block;\n\t\t\t\tposition: absolute;\n\t\t\t\theight: 100%;\n\t\t\t\twidth: 1px;\n\t\t\t\ttop: 0;\n\t\t\t\tinset-inline-end: 0;\n\t\t\t\tbackground: var(--color-border-action-primary);\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\t}\n\n\t// Increase surface size for better clickability.\n\t&::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tinset: calc(-1 * var(--spacing-1));\n\t}\n\n\t.root.variantFloating & {\n\t\ttop: 50%;\n\t\ttransform: translateY(-50%);\n\t}\n}\n"],"mappings":""}
+{"version":3,"file":"ds-panel.module.js","names":[],"sources":["../../../src/components/ds-panel/ds-panel.module.scss"],"sourcesContent":[".root {\n\tposition: relative;\n\tbackground: var(--white);\n\tpadding: var(--spacing-6);\n\twidth: 340px;\n\tborder-inline-end: 1px solid transparent;\n\n\t&[data-state='open']:hover,\n\t&[data-state='open']:focus-within {\n\t\tborder-color: var(--color-border);\n\t}\n\n\t&[data-state='closed'] {\n\t\tdisplay: none;\n\t}\n\n\t&.variantFloating {\n\t\tposition: absolute;\n\t\tinset-inline-start: var(--spacing-3);\n\t\ttop: var(--spacing-3);\n\t\tborder: none;\n\t\tborder-radius: var(--spacing-2);\n\t\tfilter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.22));\n\t}\n\n\t&.dragging {\n\t\tcursor: grabbing;\n\t\tuser-select: none;\n\t}\n\n\t&.disablePadding {\n\t\tpadding: 0;\n\t}\n}\n\n.trigger {\n\t--size: 28px;\n\n\tposition: absolute;\n\tcursor: pointer;\n\tuser-select: none;\n\tdisplay: none;\n\theight: var(--size);\n\twidth: var(--size);\n\tpadding: 1px;\n\tborder: 1px solid var(--color-border-secondary);\n\tborder-radius: 100%;\n\tbackground: var(--white);\n\tcolor: var(--color-icon-secondary);\n\ttop: var(--spacing-6);\n\tinset-inline-start: 100%;\n\tmargin-inline-start: calc(var(--size) / -2);\n\n\t&[data-state='closed'],\n\t&.triggerCollapsed {\n\t\trotate: y 180deg;\n\t}\n\n\t.root:hover &,\n\t.root:focus-within & {\n\t\tdisplay: flex;\n\t}\n\n\t&:hover,\n\t&:focus {\n\t\tcolor: var(--color-icon-primary);\n\t\tborder-color: var(--color-border-action-primary);\n\t\toutline: none;\n\t\tbackground: var(--color-background-action-tertiary);\n\n\t\t.root:has(&) {\n\t\t\tborder-color: var(--color-border-action-primary);\n\n\t\t\t// Add an inset single-sided border on hover without affecting the layout.\n\t\t\t&.variantDocked[data-state='open']::before {\n\t\t\t\tcontent: '';\n\t\t\t\tdisplay: block;\n\t\t\t\tposition: absolute;\n\t\t\t\theight: 100%;\n\t\t\t\twidth: 1px;\n\t\t\t\ttop: 0;\n\t\t\t\tinset-inline-end: 0;\n\t\t\t\tbackground: var(--color-border-action-primary);\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\t}\n\n\t// Increase surface size for better clickability.\n\t&::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tinset: calc(-1 * var(--spacing-1));\n\t}\n\n\t.root.variantFloating & {\n\t\tz-index: 1;\n\t\ttop: 50%;\n\t\ttransform: translateY(-50%);\n\t}\n}\n"],"mappings":""}

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

@@ -4,6 +4,7 @@ import * as Collapsible from "@radix-ui/react-collapsible";
 type DsPanelVariant = 'docked' | 'floating';
 type DsPanelProps = Omit<Collapsible.CollapsibleProps, 'onOpenChange'> & {
   variant?: DsPanelVariant;
+  draggable?: boolean;
   disablePadding?: boolean;
   slotProps?: {
     collapseButton?: DsPanelCollapseButtonProps;

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

@@ -1 +1 @@
-{"version":3,"file":"ds-panel.types.d.cts","names":[],"sources":["../../../src/components/ds-panel/ds-panel.types.ts"],"sourcesContent":[],"mappings":";;;KAEY,cAAA;KAEA,YAAA,GAAe,KAAK,WAAA,CAAY;EAFhC,OAAA,CAAA,EAGD,cAHe;EAEd,cAAA,CAAY,EAAA,OAAA;EAAQ,SAAY,CAAA,EAAA;IAAjB,cAAA,CAAA,EAIR,0BAJQ;EAChB,CAAA;EAGQ,YAAA,CAAA,EAAA,CAAA,IAAA,EAAA,OAAA,EAAA,GAAA,IAAA;CAA0B;AAKjC,KAAA,0BAAA,GAA0B"}
+{"version":3,"file":"ds-panel.types.d.cts","names":[],"sources":["../../../src/components/ds-panel/ds-panel.types.ts"],"sourcesContent":[],"mappings":";;;KAEY,cAAA;KAEA,YAAA,GAAe,KAAK,WAAA,CAAY;EAFhC,OAAA,CAAA,EAGD,cAHe;EAEd,SAAA,CAAA,EAAA,OAAY;EAAQ,cAAY,CAAA,EAAA,OAAA;EAAjB,SAAA,CAAA,EAAA;IAChB,cAAA,CAAA,EAIQ,0BAJR;EAIQ,CAAA;EAA0B,YAAA,CAAA,EAAA,CAAA,IAAA,EAAA,OAAA,EAAA,GAAA,IAAA;AAK7C,CAAA;KAAY,0BAAA"}

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

@@ -4,6 +4,7 @@ import * as Collapsible from "@radix-ui/react-collapsible";
 type DsPanelVariant = 'docked' | 'floating';
 type DsPanelProps = Omit<Collapsible.CollapsibleProps, 'onOpenChange'> & {
   variant?: DsPanelVariant;
+  draggable?: boolean;
   disablePadding?: boolean;
   slotProps?: {
     collapseButton?: DsPanelCollapseButtonProps;

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

@@ -1 +1 @@
-{"version":3,"file":"ds-panel.types.d.ts","names":[],"sources":["../../../src/components/ds-panel/ds-panel.types.ts"],"sourcesContent":[],"mappings":";;;KAEY,cAAA;KAEA,YAAA,GAAe,KAAK,WAAA,CAAY;EAFhC,OAAA,CAAA,EAGD,cAHe;EAEd,cAAA,CAAY,EAAA,OAAA;EAAQ,SAAY,CAAA,EAAA;IAAjB,cAAA,CAAA,EAIR,0BAJQ;EAChB,CAAA;EAGQ,YAAA,CAAA,EAAA,CAAA,IAAA,EAAA,OAAA,EAAA,GAAA,IAAA;CAA0B;AAKjC,KAAA,0BAAA,GAA0B"}
+{"version":3,"file":"ds-panel.types.d.ts","names":[],"sources":["../../../src/components/ds-panel/ds-panel.types.ts"],"sourcesContent":[],"mappings":";;;KAEY,cAAA;KAEA,YAAA,GAAe,KAAK,WAAA,CAAY;EAFhC,OAAA,CAAA,EAGD,cAHe;EAEd,SAAA,CAAA,EAAA,OAAY;EAAQ,cAAY,CAAA,EAAA,OAAA;EAAjB,SAAA,CAAA,EAAA;IAChB,cAAA,CAAA,EAIQ,0BAJR;EAIQ,CAAA;EAA0B,YAAA,CAAA,EAAA,CAAA,IAAA,EAAA,OAAA,EAAA,GAAA,IAAA;AAK7C,CAAA;KAAY,0BAAA"}

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

@@ -1,5 +1,5 @@
 import { DsSelectProps } from "./ds-select.types.cjs";
-import * as react_jsx_runtime17 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_runtime17.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_runtime49 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_runtime49.JSX.Element;
+}: DsSelectProps) => react_jsx_runtime59.JSX.Element;
 //#endregion
 export { DsSelect };
 //# sourceMappingURL=ds-select.d.ts.map

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_runtime22 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_runtime22.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-rect.d.cts

@@ -1,5 +1,5 @@
 import { DsSkeletonRectProps } from "./ds-skeleton.types.cjs";
-import * as react_jsx_runtime23 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_runtime23.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-text.d.cts

@@ -1,5 +1,5 @@
 import { DsSkeletonTextProps } from "./ds-skeleton.types.cjs";
-import * as react_jsx_runtime21 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_runtime21.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.d.cts

@@ -1,5 +1,5 @@
 import { DsSkeletonCircleProps, DsSkeletonRectProps, DsSkeletonTextProps } from "./ds-skeleton.types.cjs";
-import * as react_jsx_runtime18 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_runtime18.JSX.Element;
+  }: DsSkeletonTextProps) => react_jsx_runtime47.JSX.Element;
   Circle: ({
     size,
     color,
     className,
     style
-  }: DsSkeletonCircleProps) => react_jsx_runtime18.JSX.Element;
+  }: DsSkeletonCircleProps) => react_jsx_runtime47.JSX.Element;
   Rect: ({
     width,
     height,
@@ -25,7 +25,7 @@ declare const _default: {
     color,
     className,
     style
-  }: DsSkeletonRectProps) => react_jsx_runtime18.JSX.Element;
+  }: DsSkeletonRectProps) => react_jsx_runtime47.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_runtime24 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_runtime24.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_runtime31 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_runtime31.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_runtime27 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_runtime27.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_runtime52 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_runtime52.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

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

@@ -1 +1 @@
-{"version":3,"file":"ds-step-content.js","names":["ReactNode","useStepper","DsStepLabel","DsStepDescription","classnames","styles","DsStepContentProps","index","label","description","actions","DsStepContent","t0","$","_c","variant","stepsApi","t1","getItemState","current","t2","t3","stepContent","stepContentSingle","t4","t5","t6","stepActions","t7"],"sources":["../../../../src/components/ds-stepper/components/ds-step-content.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { useStepper } from '../hooks/use-stepper';\nimport { DsStepLabel } from './ds-step-label';\nimport { DsStepDescription } from './ds-step-description';\nimport classnames from 'classnames';\nimport styles from '../ds-stepper.module.scss';\n\ntype DsStepContentProps = {\n\tindex: number;\n\tlabel: string;\n\tdescription?: string;\n\tactions?: ReactNode;\n};\n\nexport function DsStepContent({ index, label, description, actions }: DsStepContentProps) {\n\tconst { variant, stepsApi } = useStepper();\n\tconst { current } = stepsApi.getItemState({ index });\n\n\treturn (\n\t\t<div\n\t\t\tclassName={classnames(styles.stepContent, {\n\t\t\t\t[styles.stepContentSingle]: variant === 'single',\n\t\t\t})}\n\t\t>\n\t\t\t<DsStepLabel>{label}</DsStepLabel>\n\n\t\t\t{variant !== 'single' && description && <DsStepDescription>{description}</DsStepDescription>}\n\n\t\t\t{actions && current && <div className={styles.stepActions}>{actions}</div>}\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;;;AAcA,SAAOW,cAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAAuB,MAAA,EAAAP,OAAAC,OAAAC,aAAAC,YAAAE;CAC7B,MAAA,EAAAG,SAAAC,aAA8Bf,YAAY;CAAC,IAAAgB;AAAA,KAAAJ,EAAA,OAAAN,SAAAM,EAAA,OAAAG,UAAA;AACvBC,OAAAD,SAAQE,aAAc,EAAAX,OAAS,CAAC;AAAAM,IAAA,KAAAN;AAAAM,IAAA,KAAAG;AAAAH,IAAA,KAAAI;OAAAA,MAAAJ,EAAA;CAApD,MAAA,EAAAM,YAAoBF;CAKW,MAAAG,KAAAL,YAAY;CAAQ,IAAAM;AAAA,KAAAR,EAAA,OAAAO,IAAA;AADtCC,OAAAjB,WAAWC,0BAAMiB,aAAc,GACxCjB,0BAAMkB,oBAAqBH,IAC5B,CAAC;AAAAP,IAAA,KAAAO;AAAAP,IAAA,KAAAQ;OAAAA,MAAAR,EAAA;CAAA,IAAAW;AAAA,KAAAX,EAAA,OAAAL,OAAA;AAEFgB,OAAA,oBAAC,yBAAahB,QAAoB;AAAAK,IAAA,KAAAL;AAAAK,IAAA,KAAAW;OAAAA,MAAAX,EAAA;CAAA,IAAAY;AAAA,KAAAZ,EAAA,OAAAJ,eAAAI,EAAA,OAAAE,SAAA;AAEjCU,OAAAV,YAAY,YAAZN,eAAuC,oBAAC,+BAAmBA,cAAgC;AAAAI,IAAA,KAAAJ;AAAAI,IAAA,KAAAE;AAAAF,IAAA,KAAAY;OAAAA,MAAAZ,EAAA;CAAA,IAAAa;AAAA,KAAAb,EAAA,QAAAH,WAAAG,EAAA,QAAAM,SAAA;AAE3FO,OAAAhB,WAAAS,WAAsB,oBAAA;GAAgB,WAAAd,0BAAMsB;aAAejB;IAAc;AAAAG,IAAA,MAAAH;AAAAG,IAAA,MAAAM;AAAAN,IAAA,MAAAa;OAAAA,MAAAb,EAAA;CAAA,IAAAe;AAAA,KAAAf,EAAA,QAAAQ,MAAAR,EAAA,QAAAW,MAAAX,EAAA,QAAAY,MAAAZ,EAAA,QAAAa,IAAA;AAT3EE,OAAA,qBAAA;GACY,WAAAP;;IAIXG;IAECC;IAEAC;;IACI;AAAAb,IAAA,MAAAQ;AAAAR,IAAA,MAAAW;AAAAX,IAAA,MAAAY;AAAAZ,IAAA,MAAAa;AAAAb,IAAA,MAAAe;OAAAA,MAAAf,EAAA;AAAA,QAVNe"}
+{"version":3,"file":"ds-step-content.js","names":["ReactNode","useStepper","DsStepLabel","DsStepDescription","DsStepSeparator","classnames","styles","DsStepContentProps","index","label","description","actions","DsStepContent","t0","$","_c","variant","orientation","stepsApi","t1","getItemState","current","isHorizontal","showDescription","t2","t3","stepContent","stepContentSingle","t4","stepLabelRow","stepActions","t5"],"sources":["../../../../src/components/ds-stepper/components/ds-step-content.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { useStepper } from '../hooks/use-stepper';\nimport { DsStepLabel } from './ds-step-label';\nimport { DsStepDescription } from './ds-step-description';\nimport { DsStepSeparator } from './ds-step-separator';\nimport classnames from 'classnames';\nimport styles from '../ds-stepper.module.scss';\n\nexport type DsStepContentProps = {\n\tindex: number;\n\tlabel: ReactNode;\n\tdescription?: ReactNode;\n\tactions?: ReactNode;\n};\n\nexport function DsStepContent({ index, label, description, actions }: DsStepContentProps) {\n\tconst { variant, orientation, stepsApi } = useStepper();\n\tconst { current } = stepsApi.getItemState({ index });\n\n\tconst isHorizontal = orientation === 'horizontal';\n\tconst showDescription = variant !== 'single' && description;\n\n\treturn (\n\t\t<div\n\t\t\tclassName={classnames(styles.stepContent, {\n\t\t\t\t[styles.stepContentSingle]: variant === 'single',\n\t\t\t})}\n\t\t>\n\t\t\t{isHorizontal ? (\n\t\t\t\t<>\n\t\t\t\t\t<div className={styles.stepLabelRow}>\n\t\t\t\t\t\t<DsStepLabel>{label}</DsStepLabel>\n\n\t\t\t\t\t\t<DsStepSeparator index={index} />\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{showDescription && <DsStepDescription>{description}</DsStepDescription>}\n\t\t\t\t</>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t<DsStepLabel>{label}</DsStepLabel>\n\n\t\t\t\t\t{showDescription && <DsStepDescription>{description}</DsStepDescription>}\n\n\t\t\t\t\t{actions && current && <div className={styles.stepActions}>{actions}</div>}\n\t\t\t\t</>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;;;;AAeA,SAAOY,cAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAAuB,MAAA,EAAAP,OAAAC,OAAAC,aAAAC,YAAAE;CAC7B,MAAA,EAAAG,SAAAC,aAAAC,aAA2CjB,YAAY;CAAC,IAAAkB;AAAA,KAAAL,EAAA,OAAAN,SAAAM,EAAA,OAAAI,UAAA;AACpCC,OAAAD,SAAQE,aAAc,EAAAZ,OAAS,CAAC;AAAAM,IAAA,KAAAN;AAAAM,IAAA,KAAAI;AAAAJ,IAAA,KAAAK;OAAAA,MAAAL,EAAA;CAApD,MAAA,EAAAO,YAAoBF;CAEpB,MAAAG,eAAqBL,gBAAgB;CACrC,MAAAM,kBAAwBP,YAAY,YAAZN;CAKO,MAAAc,KAAAR,YAAY;CAAQ,IAAAS;AAAA,KAAAX,EAAA,OAAAU,IAAA;AADtCC,OAAApB,WAAWC,0BAAMoB,aAAc,GACxCpB,0BAAMqB,oBAAqBH,IAC5B,CAAC;AAAAV,IAAA,KAAAU;AAAAV,IAAA,KAAAW;OAAAA,MAAAX,EAAA;CAAA,IAAAc;AAAA,KAAAd,EAAA,OAAAH,WAAAG,EAAA,OAAAO,WAAAP,EAAA,OAAAJ,eAAAI,EAAA,OAAAN,SAAAM,EAAA,OAAAQ,gBAAAR,EAAA,QAAAL,SAAAK,EAAA,QAAAS,iBAAA;AAEDK,OAAAN,eAAA,4CAEC,qBAAA;GAAgB,WAAAhB,0BAAMuB;cACrB,oBAAC,yBAAapB,QAEd,sBAAC,mBAAuBD,QACzB;IAEC,EAAAe,mBAAmB,oBAAC,+BAAmBb,cAA+B,IAUxE,GAlBA;GAYC,oBAAC,yBAAaD,QAEb;GAAAc,mBAAmB,oBAAC,+BAAmBb,cAA+B;GAEtEC,WAAAU,WAAsB,oBAAA;IAAgB,WAAAf,0BAAMwB;cAAenB;KAAa;MAE1E;AAAAG,IAAA,KAAAH;AAAAG,IAAA,KAAAO;AAAAP,IAAA,KAAAJ;AAAAI,IAAA,KAAAN;AAAAM,IAAA,KAAAQ;AAAAR,IAAA,MAAAL;AAAAK,IAAA,MAAAS;AAAAT,IAAA,MAAAc;OAAAA,MAAAd,EAAA;CAAA,IAAAiB;AAAA,KAAAjB,EAAA,QAAAW,MAAAX,EAAA,QAAAc,IAAA;AAvBFG,OAAA,oBAAA;GACY,WAAAN;aAIVG;IAmBI;AAAAd,IAAA,MAAAW;AAAAX,IAAA,MAAAc;AAAAd,IAAA,MAAAiB;OAAAA,MAAAjB,EAAA;AAAA,QAxBNiB"}

package/dist/components/ds-stepper/components/ds-step-next-button.cjs

@@ -6,27 +6,44 @@ let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/ds-stepper/components/ds-step-next-button.tsx
 function DsNextStepButton(t0) {
-	const $ = (0, react_compiler_runtime.c)(5);
-	const { children } = t0;
-	const context = require_use_stepper.useStepper();
+	const $ = (0, react_compiler_runtime.c)(11);
+	let children;
+	let rest;
 	let t1;
-	if ($[0] !== context.stepsApi) {
-		t1 = context.stepsApi.getNextTriggerProps();
-		$[0] = context.stepsApi;
-		$[1] = t1;
-	} else t1 = $[1];
+	if ($[0] !== t0) {
+		({children, size: t1, ...rest} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = rest;
+		$[3] = t1;
+	} else {
+		children = $[1];
+		rest = $[2];
+		t1 = $[3];
+	}
+	const size = t1 === void 0 ? "small" : t1;
+	const context = require_use_stepper.useStepper();
 	let t2;
-	if ($[2] !== children || $[3] !== t1) {
-		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_button.default, {
-			...t1,
-			size: "small",
+	if ($[4] !== context.stepsApi) {
+		t2 = context.stepsApi.getNextTriggerProps();
+		$[4] = context.stepsApi;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== children || $[7] !== rest || $[8] !== size || $[9] !== t2) {
+		t3 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_button.default, {
+			...t2,
+			size,
+			...rest,
 			children
 		});
-		$[2] = children;
-		$[3] = t1;
-		$[4] = t2;
-	} else t2 = $[4];
-	return t2;
+		$[6] = children;
+		$[7] = rest;
+		$[8] = size;
+		$[9] = t2;
+		$[10] = t3;
+	} else t3 = $[10];
+	return t3;
 }
 
 //#endregion

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

@@ -1,10 +1,13 @@
-import * as react_jsx_runtime28 from "react/jsx-runtime";
-import { PropsWithChildren } from "react";
+import { DsButtonProps } from "../../ds-button/versions/ds-button-legacy/ds-button-legacy.types.cjs";
+import * as react_jsx_runtime58 from "react/jsx-runtime";
 
 //#region src/components/ds-stepper/components/ds-step-next-button.d.ts
+type DsNextStepButtonProps = Pick<DsButtonProps, 'variant' | 'size' | 'className' | 'style' | 'children'>;
 declare function DsNextStepButton({
-  children
-}: PropsWithChildren): react_jsx_runtime28.JSX.Element;
+  children,
+  size,
+  ...rest
+}: DsNextStepButtonProps): react_jsx_runtime58.JSX.Element;
 //#endregion
-export { DsNextStepButton };
+export { DsNextStepButton, DsNextStepButtonProps };
 //# sourceMappingURL=ds-step-next-button.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ds-step-next-button.d.cts","names":[],"sources":["../../../../src/components/ds-stepper/components/ds-step-next-button.tsx"],"sourcesContent":[],"mappings":";;;;iBAIgB,gBAAA;;GAA+B,oBAAiB,mBAAA,CAAA,GAAA,CAAA"}
+{"version":3,"file":"ds-step-next-button.d.cts","names":[],"sources":["../../../../src/components/ds-stepper/components/ds-step-next-button.tsx"],"sourcesContent":[],"mappings":";;;;KAIY,qBAAA,GAAwB,KACnC;iBAIe,gBAAA;;;;GAAwD,wBAAqB,mBAAA,CAAA,GAAA,CAAA"}

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

@@ -1,10 +1,14 @@
-import * as react_jsx_runtime53 from "react/jsx-runtime";
-import { PropsWithChildren } from "react";
+import { DsButtonProps } from "../../ds-button/versions/ds-button-legacy/ds-button-legacy.types.js";
+import "../../ds-button/versions/ds-button-legacy/index.js";
+import * as react_jsx_runtime51 from "react/jsx-runtime";
 
 //#region src/components/ds-stepper/components/ds-step-next-button.d.ts
+type DsNextStepButtonProps = Pick<DsButtonProps, 'variant' | 'size' | 'className' | 'style' | 'children'>;
 declare function DsNextStepButton({
-  children
-}: PropsWithChildren): react_jsx_runtime53.JSX.Element;
+  children,
+  size,
+  ...rest
+}: DsNextStepButtonProps): react_jsx_runtime51.JSX.Element;
 //#endregion
-export { DsNextStepButton };
+export { DsNextStepButton, DsNextStepButtonProps };
 //# sourceMappingURL=ds-step-next-button.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ds-step-next-button.d.ts","names":[],"sources":["../../../../src/components/ds-stepper/components/ds-step-next-button.tsx"],"sourcesContent":[],"mappings":";;;;iBAIgB,gBAAA;;GAA+B,oBAAiB,mBAAA,CAAA,GAAA,CAAA"}
+{"version":3,"file":"ds-step-next-button.d.ts","names":[],"sources":["../../../../src/components/ds-stepper/components/ds-step-next-button.tsx"],"sourcesContent":[],"mappings":";;;;;KAIY,qBAAA,GAAwB,KACnC;iBAIe,gBAAA;;;;GAAwD,wBAAqB,mBAAA,CAAA,GAAA,CAAA"}