@spaced-out/ui-design-system 0.6.21 → 0.6.23

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.6.23](https://github.com/spaced-out/ui-design-system/compare/v0.6.22...v0.6.23) (2026-06-25)
+
+
+### Features
+
+* add orientation support to stacked bar chart ([#493](https://github.com/spaced-out/ui-design-system/issues/493)) ([bdfa079](https://github.com/spaced-out/ui-design-system/commit/bdfa0794940baa2929bbd046fe8e79a69a5b76e8))
+
+
+### Bug Fixes
+
+* Stepper [GDS-554] Stepper component enhancements  ([#487](https://github.com/spaced-out/ui-design-system/issues/487)) ([802e239](https://github.com/spaced-out/ui-design-system/commit/802e2398294e36c27f2f36e065ec9e534fcd652f))
+
+### [0.6.22](https://github.com/spaced-out/ui-design-system/compare/v0.6.21...v0.6.22) (2026-06-08)
+
+
+### Bug Fixes
+
+* change the ai icon to solid ([#490](https://github.com/spaced-out/ui-design-system/issues/490)) ([b4e81fe](https://github.com/spaced-out/ui-design-system/commit/b4e81fe84cccf1fefeffd3e2944d0d3448bbb9b0))
+
 ### [0.6.21](https://github.com/spaced-out/ui-design-system/compare/v0.6.20...v0.6.21) (2026-06-04)
 
 

package/lib/components/Charts/StackedBarChart/StackedBarChart.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import type { SeriesColumnOptions } from 'highcharts';
 import type { ChartOptions, DataOptionsType, Drilldown } from '../../../types/charts';
+import type { StackedBarOrientation } from '../../../utils/charts';
 import type { ChartWrapperClassNames, ExportOptionType } from '../../../components/Charts/ChartWrapper';
 type ClassNames = Readonly<ChartWrapperClassNames & {
     highChart?: string;
@@ -11,6 +12,11 @@ export type StackedBarSeries = Omit<SeriesColumnOptions, 'data' | 'type'> & {
 };
 export interface StackedBarChartProps extends Omit<ChartOptions, 'series' | 'isLoading' | 'drilldown' | 'cardTitle' | 'emptyText' | 'classNames' | 'hasEmptyData' | 'headerActions' | 'customExportOptions'> {
     series: Array<StackedBarSeries>;
+    /**
+     * Orientation of the stacked bars. Defaults to `horizontal`.
+     * Pass `vertical` to render columns with categories on the x-axis.
+     */
+    orientation?: StackedBarOrientation;
     isLoading?: boolean;
     drilldown?: Drilldown;
     cardTitle?: React.ReactNode;
@@ -21,6 +27,6 @@ export interface StackedBarChartProps extends Omit<ChartOptions, 'series' | 'isL
     customExportOptions?: Array<ExportOptionType> | null;
     testId?: string;
 }
-export declare const StackedBarChart: ({ series, isLoading, drilldown, emptyText, cardTitle, classNames, hasEmptyData, headerActions, customExportOptions, testId, ...userOptions }: StackedBarChartProps) => React.ReactNode;
+export declare const StackedBarChart: ({ series, orientation, isLoading, drilldown, emptyText, cardTitle, classNames, hasEmptyData, headerActions, customExportOptions, testId, ...userOptions }: StackedBarChartProps) => React.ReactNode;
 export {};
 //# sourceMappingURL=StackedBarChart.d.ts.map

package/lib/components/Charts/StackedBarChart/StackedBarChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StackedBarChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Charts/StackedBarChart/StackedBarChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,YAAY,CAAC;AAKpD,OAAO,KAAK,EAAC,YAAY,EAAE,eAAe,EAAE,SAAS,EAAC,MAAM,kBAAkB,CAAC;AAS/E,OAAO,KAAK,EACV,sBAAsB,EACtB,gBAAgB,EACjB,MAAM,oCAAoC,CAAC;AAe5C,KAAK,UAAU,GAAG,QAAQ,CACxB,sBAAsB,GAAG;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CACF,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,mBAAmB,EAAE,MAAM,GAAG,MAAM,CAAC,GAAG;IAC1E,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,eAAe,EAAE,CAAC;CACzB,CAAC;AAEF,MAAM,WAAW,oBACf,SAAQ,IAAI,CACV,YAAY,EACV,QAAQ,GACR,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,YAAY,GACZ,cAAc,GACd,eAAe,GACf,qBAAqB,CACxB;IACD,MAAM,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,mBAAmB,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC;IACrD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,eAAe,GAAI,8IAY7B,oBAAoB,KAAG,KAAK,CAAC,SAqD/B,CAAC"}
+{"version":3,"file":"StackedBarChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Charts/StackedBarChart/StackedBarChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,YAAY,CAAC;AAKpD,OAAO,KAAK,EAAC,YAAY,EAAE,eAAe,EAAE,SAAS,EAAC,MAAM,kBAAkB,CAAC;AAC/E,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,kBAAkB,CAAC;AAS5D,OAAO,KAAK,EACV,sBAAsB,EACtB,gBAAgB,EACjB,MAAM,oCAAoC,CAAC;AAe5C,KAAK,UAAU,GAAG,QAAQ,CACxB,sBAAsB,GAAG;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CACF,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,mBAAmB,EAAE,MAAM,GAAG,MAAM,CAAC,GAAG;IAC1E,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,eAAe,EAAE,CAAC;CACzB,CAAC;AAEF,MAAM,WAAW,oBACf,SAAQ,IAAI,CACV,YAAY,EACV,QAAQ,GACR,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,YAAY,GACZ,cAAc,GACd,eAAe,GACf,qBAAqB,CACxB;IACD,MAAM,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC;IAChC;;;OAGG;IACH,WAAW,CAAC,EAAE,qBAAqB,CAAC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,mBAAmB,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC;IACrD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,eAAe,GAAI,2JAa7B,oBAAoB,KAAG,KAAK,CAAC,SAqD/B,CAAC"}

package/lib/components/Charts/StackedBarChart/StackedBarChart.js

@@ -21,6 +21,7 @@ if (!!_highchartsMore.default && !!_highcharts.default && typeof _highchartsMore
 const StackedBarChart = _ref => {
   let {
     series,
+    orientation = 'horizontal',
     isLoading,
     drilldown,
     emptyText,
@@ -40,7 +41,7 @@ const StackedBarChart = _ref => {
     stacking: 'normal',
     pointWidth: _charts.columnPlotWidth
   }));
-  const defaultStackedBarChartOptions = (0, _charts.getStackedBarChartOptions)();
+  const defaultStackedBarChartOptions = (0, _charts.getStackedBarChartOptions)(orientation);
   const stackedBarDrilldown = drilldown ? {
     ...drilldown,
     breadcrumbs: {

package/lib/components/Charts/UniversalChart/UniversalChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UniversalChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Charts/UniversalChart/UniversalChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAmB/B,OAAO,KAAK,EACV,oBAAoB,EAEpB,mBAAmB,EACnB,cAAc,EACd,aAAa,EACb,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,2DAA2D,CAAC;AAOnE,eAAO,MAAM,kBAAkB;YAIxB,mBAAmB,CAAC,QAAQ,CAAC;UACU,mBAAmB,CAAC,MAAM,CAAC;WACxB,mBAAmB,CAAC,OAAO,CAAC;YAItE,mBAAmB,CAAC,QAAQ,CAAC;YAI7B,mBAAmB,CAAC,QAAQ,CAAC;YAI7B,mBAAmB,CAAC,QAAQ,CAAC;gBAI7B,mBAAmB,CAAC,YAAY,CAAC;oBAIjC,mBAAmB,CAAC,gBAAgB,CAAC;EAC1C,CAAC;AAEH,eAAO,MAAM,iBAAiB;iBAMvB,KAAK,CAAC,mBAAmB,CAAC,oBAAoB,CAAC,CAAC;gBACgB,KAAK,CACxE,mBAAmB,CAAC,mBAAmB,CAAC,CACzC;UACoC,KAAK,CACxC,mBAAmB,CAAC,aAAa,CAAC,CACnC;WAC6C,KAAK,CACjD,mBAAmB,CAAC,cAAc,CAAC,CACpC;EACD,CAAC;AAmBH,YAAY,EACV,mBAAmB,EACnB,SAAS,EACT,mBAAmB,EACnB,sBAAsB,EACtB,oBAAoB,EACpB,mBAAmB,EACnB,aAAa,EACb,cAAc,GACf,MAAM,2DAA2D,CAAC;AAEnE,eAAO,MAAM,cAAc;YAAW,mBAAmB;;CAiQxD,CAAC"}
+{"version":3,"file":"UniversalChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Charts/UniversalChart/UniversalChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAmB/B,OAAO,KAAK,EACV,oBAAoB,EAEpB,mBAAmB,EACnB,cAAc,EACd,aAAa,EACb,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,2DAA2D,CAAC;AAOnE,eAAO,MAAM,kBAAkB;YAIxB,mBAAmB,CAAC,QAAQ,CAAC;UACU,mBAAmB,CAAC,MAAM,CAAC;WACxB,mBAAmB,CAAC,OAAO,CAAC;YAItE,mBAAmB,CAAC,QAAQ,CAAC;YAI7B,mBAAmB,CAAC,QAAQ,CAAC;YAI7B,mBAAmB,CAAC,QAAQ,CAAC;gBAI7B,mBAAmB,CAAC,YAAY,CAAC;oBAIjC,mBAAmB,CAAC,gBAAgB,CAAC;EAC1C,CAAC;AAEH,eAAO,MAAM,iBAAiB;iBAMvB,KAAK,CAAC,mBAAmB,CAAC,oBAAoB,CAAC,CAAC;gBACgB,KAAK,CACxE,mBAAmB,CAAC,mBAAmB,CAAC,CACzC;UACoC,KAAK,CACxC,mBAAmB,CAAC,aAAa,CAAC,CACnC;WAC6C,KAAK,CACjD,mBAAmB,CAAC,cAAc,CAAC,CACpC;EACD,CAAC;AAmBH,YAAY,EACV,mBAAmB,EACnB,SAAS,EACT,mBAAmB,EACnB,sBAAsB,EACtB,oBAAoB,EACpB,mBAAmB,EACnB,aAAa,EACb,cAAc,GACf,MAAM,2DAA2D,CAAC;AAEnE,eAAO,MAAM,cAAc;YAAW,mBAAmB;;CAsQxD,CAAC"}

package/lib/components/Charts/UniversalChart/UniversalChart.js

@@ -254,10 +254,15 @@ const UniversalChart = props => {
           chartKindOptions: _chartKindOptions,
           onChartKindChange: _onChartKindChange,
           responsive: _responsive,
+          orientation,
           ...rest
         } = props;
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackedBarChart.StackedBarChart, {
           ...rest,
+          // UniversalChart renders stacked bars vertically by default
+          // (categories on the x-axis); consumers can still opt back into
+          // horizontal via `orientation`.
+          orientation: orientation ?? 'vertical',
           chart: responsiveChart,
           headerActions: combinedHeaderActions,
           classNames: responsiveClassNames

package/lib/components/SideMenuLink/SideMenuLink.js

@@ -143,7 +143,7 @@ const MENU_NAME_LIST = exports.MENU_NAME_LIST = Object.freeze({
   'ai-team': {
     title: 'AI Team',
     iconName: 'sparkle',
-    iconType: 'duotone'
+    iconType: 'solid'
   },
   tracking: {
     title: 'Tracking',

package/lib/components/Stepper/Step/Step.d.ts

@@ -19,6 +19,7 @@ export interface StepProps {
     onClick?: (idx: number, e?: React.SyntheticEvent<HTMLElement> | null | undefined) => unknown;
     iconName?: string;
     iconType?: IconType;
+    orientation?: 'horizontal' | 'vertical';
     testId?: string;
 }
 export declare const Step: Flow.AbstractComponent<StepProps, HTMLDivElement>;

package/lib/components/Stepper/Step/Step.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../../../src/components/Stepper/Step/Step.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAKrD,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,qBAAqB,CAAC;AAclD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,WAAW,SAAS;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,CACR,GAAG,EAAE,MAAM,EACX,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,IAAI,GAAG,SAAS,KACrD,OAAO,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,IAAI,EAAE,IAAI,CAAC,iBAAiB,CAAC,SAAS,EAAE,cAAc,CAuGhE,CAAC"}
+{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../../../src/components/Stepper/Step/Step.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAKrD,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,qBAAqB,CAAC;AAelD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,WAAW,SAAS;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,CACR,GAAG,EAAE,MAAM,EACX,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,IAAI,GAAG,SAAS,KACrD,OAAO,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,IAAI,EAAE,IAAI,CAAC,iBAAiB,CAAC,SAAS,EAAE,cAAc,CAuHhE,CAAC"}

package/lib/components/Stepper/Step/Step.js

@@ -8,6 +8,7 @@ var React = _interopRequireWildcard(require("react"));
 var _classify = _interopRequireDefault(require("../../../utils/classify"));
 var _qa = require("../../../utils/qa");
 var _Icon = require("../../Icon");
+var _Separator = require("../../Separator/Separator");
 var _StepperModule = _interopRequireDefault(require("../Stepper.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -28,6 +29,7 @@ const Step = exports.Step = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     allowClick,
     iconName,
     iconType,
+    orientation = 'horizontal',
     testId
   } = _ref;
   const childrenArray = React.Children.toArray(children).filter(Boolean);
@@ -47,6 +49,17 @@ const Step = exports.Step = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     return stepContent;
   });
   const handleClick = e => allowClick && onClick?.(index, e);
+  const isVertical = orientation === 'vertical';
+  const connector = !last && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Separator.Separator, {
+    orientation: isVertical ? _Separator.ORIENTATION.vertical : _Separator.ORIENTATION.horizontal,
+    classNames: {
+      wrapper: _StepperModule.default.connector
+    },
+    testId: (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'connector'
+    })
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     ref: ref,
     className: (0, _classify.default)(_StepperModule.default.stepWrapper, {
@@ -62,40 +75,43 @@ const Step = exports.Step = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       base: testId,
       slot: 'root'
     }),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _classify.default)(_StepperModule.default.stepWrapperCounter, {
-        [_StepperModule.default.selected]: active,
-        [_StepperModule.default.completed]: completed,
-        [_StepperModule.default.expanded]: expanded,
-        [_StepperModule.default.last]: last,
-        [_StepperModule.default.disabled]: disabled,
-        [_StepperModule.default.withIcon]: !!iconName
-      }, classNames?.stepCounter),
-      "data-testid": (0, _qa.generateTestId)({
-        base: testId,
-        slot: 'counter'
-      }),
-      children: completed && !active ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
-        name: "check",
-        type: _Icon.ICON_TYPE.solid,
-        size: _Icon.ICON_SIZE.small,
-        className: _StepperModule.default.stepIcon,
-        testId: (0, _qa.generateTestId)({
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: _StepperModule.default.stepCounterColumn,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classify.default)(_StepperModule.default.stepWrapperCounter, {
+          [_StepperModule.default.selected]: active,
+          [_StepperModule.default.completed]: completed,
+          [_StepperModule.default.expanded]: expanded,
+          [_StepperModule.default.last]: last,
+          [_StepperModule.default.disabled]: disabled,
+          [_StepperModule.default.withIcon]: !!iconName
+        }, classNames?.stepCounter),
+        "data-testid": (0, _qa.generateTestId)({
           base: testId,
-          slot: 'check-icon'
-        })
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
-        children: iconName ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
-          name: iconName,
-          className: _StepperModule.default.stepIcon,
+          slot: 'counter'
+        }),
+        children: completed && !active ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+          name: "check",
+          type: _Icon.ICON_TYPE.solid,
           size: _Icon.ICON_SIZE.small,
-          type: iconType,
+          className: _StepperModule.default.stepIcon,
           testId: (0, _qa.generateTestId)({
             base: testId,
-            slot: 'icon'
+            slot: 'check-icon'
           })
-        }) : (index + 1).toString()
-      })
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+          children: iconName ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+            name: iconName,
+            className: _StepperModule.default.stepIcon,
+            size: _Icon.ICON_SIZE.small,
+            type: iconType,
+            testId: (0, _qa.generateTestId)({
+              base: testId,
+              slot: 'icon'
+            })
+          }) : (index + 1).toString()
+        })
+      }), isVertical && connector]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: (0, _classify.default)(_StepperModule.default.stepContent, classNames?.content),
       "data-testid": (0, _qa.generateTestId)({
@@ -103,6 +119,6 @@ const Step = exports.Step = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         slot: 'content'
       }),
       children: stepContent
-    })]
+    }), !isVertical && connector]
   });
 });

package/lib/components/Stepper/Stepper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../src/components/Stepper/Stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAQrD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAkBH,MAAM,WAAW,YAAY;IAC3B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,YAAY,EAAE,cAAc,CAsEtE,CAAC"}
+{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../src/components/Stepper/Stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAQrD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAkBH,MAAM,WAAW,YAAY;IAC3B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,YAAY,EAAE,cAAc,CAuEtE,CAAC"}

package/lib/components/Stepper/Stepper.js

@@ -58,6 +58,7 @@ const Stepper = exports.Stepper = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       active: index === activeStep,
       allowClick: onClick && index !== activeStep && isLastStepCompleted,
       disabled: disabledChild || disabled,
+      orientation,
       testId: (0, _qa.generateTestId)({
         base: testId,
         slot: 'step',

package/lib/components/Stepper/Stepper.module.css

@@ -1,8 +1,7 @@
 @value (
   colorFillPrimary,
   colorFillSecondary,
-  colorSuccessDark,
-  colorBackgroundTertiary,
+  colorButtonFillPrimaryEnabled,
   colorFillDisabled,
   colorTextSecondary,
   colorTextPrimary,
@@ -12,10 +11,13 @@
   colorBorderSecondary
 ) from '../../styles/variables/_color.css';
 @value (
+  size12,
   size24,
   sizeFluid
 ) from '../../styles/variables/_size.css';
 @value (
+  spaceNone,
+  spaceLarge,
   spaceMedium,
   spaceSmall,
   spaceXXSmall
@@ -34,7 +36,7 @@
 
 .stepperWrapper.vertical {
   flex-direction: column;
-  gap: spaceMedium;
+  gap: spaceNone;
   justify-content: initial;
 }
 
@@ -74,6 +76,12 @@
   color: colorTextClickable;
 }
 
+.stepWrapperCounter.completed.selected:not(.disabled) {
+  background-color: colorButtonFillPrimaryEnabled;
+  border: borderWidthPrimary solid transparent;
+  color: colorTextInversePrimary;
+}
+
 .stepWrapperCounter.disabled {
   background-color: colorFillDisabled;
   border: borderWidthPrimary solid transparent;
@@ -116,3 +124,34 @@
 .clickable {
   cursor: pointer;
 }
+
+.stepCounterColumn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: spaceXXSmall;
+}
+
+.connector {
+  pointer-events: none;
+}
+
+.stepperWrapper.vertical .stepCounterColumn {
+  align-self: stretch;
+}
+
+.stepperWrapper.vertical .connector {
+  flex: 1;
+  width: calc(size2 / 2);
+}
+
+.stepperWrapper.vertical .stepWrapper:not(:last-child) .stepContent {
+  padding-bottom: spaceMedium;
+}
+
+.stepperWrapper:not(.vertical) .connector {
+  flex: 1;
+  align-self: flex-start;
+  margin-top: size12;
+  min-width: spaceLarge;
+}

package/lib/utils/charts/stackedBarChart.d.ts

@@ -1,3 +1,11 @@
 import type { ChartOptions } from '../../types/charts';
-export declare const getStackedBarChartOptions: () => ChartOptions;
+/**
+ * Orientation of the stacked bars.
+ * - `horizontal` (default): bars run left-to-right; categories on the vertical
+ *   axis. Backed by Highcharts `chart.type: 'bar'` (an inverted chart).
+ * - `vertical`: bars run bottom-to-top; categories on the horizontal x-axis.
+ *   Backed by Highcharts `chart.type: 'column'`.
+ */
+export type StackedBarOrientation = 'horizontal' | 'vertical';
+export declare const getStackedBarChartOptions: (orientation?: StackedBarOrientation) => ChartOptions;
 //# sourceMappingURL=stackedBarChart.d.ts.map

package/lib/utils/charts/stackedBarChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stackedBarChart.d.ts","sourceRoot":"","sources":["../../../src/utils/charts/stackedBarChart.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAYnD,eAAO,MAAM,yBAAyB,QAAO,YAwC3C,CAAC"}
+{"version":3,"file":"stackedBarChart.d.ts","sourceRoot":"","sources":["../../../src/utils/charts/stackedBarChart.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAWnD;;;;;;GAMG;AACH,MAAM,MAAM,qBAAqB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE9D,eAAO,MAAM,yBAAyB,GACpC,cAAa,qBAAoC,KAChD,YAwCD,CAAC"}

package/lib/utils/charts/stackedBarChart.js

@@ -7,45 +7,56 @@ exports.getStackedBarChartOptions = void 0;
 var _color = require("../../styles/variables/_color");
 var _charts = require("./charts");
 var _helpers = require("./helpers");
-const getStackedBarChartOptions = () => ({
-  ..._charts.commonChartOptions,
-  chart: {
-    ..._charts.commonChartOptions.chart,
-    type: 'bar'
-  },
-  legend: {
-    ..._charts.commonChartOptions.legend,
-    ..._helpers.bottomLegendRow,
-    symbolWidth: 18
-  },
-  xAxis: {
-    ..._charts.commonChartOptions.xAxis,
-    labels: {
-      style: _helpers.xAxisLabelStyle
+/**
+ * Orientation of the stacked bars.
+ * - `horizontal` (default): bars run left-to-right; categories on the vertical
+ *   axis. Backed by Highcharts `chart.type: 'bar'` (an inverted chart).
+ * - `vertical`: bars run bottom-to-top; categories on the horizontal x-axis.
+ *   Backed by Highcharts `chart.type: 'column'`.
+ */
+
+const getStackedBarChartOptions = function () {
+  let orientation = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'horizontal';
+  return {
+    ..._charts.commonChartOptions,
+    chart: {
+      ..._charts.commonChartOptions.chart,
+      type: orientation === 'vertical' ? 'column' : 'bar'
     },
-    title: {
-      margin: 12,
-      style: _helpers.xAxisTitleStyle
+    legend: {
+      ..._charts.commonChartOptions.legend,
+      ..._helpers.bottomLegendRow,
+      symbolWidth: 18
     },
-    lineColor: _color.colorBorderPrimary
-  },
-  yAxis: {
-    labels: {
-      align: 'right',
-      distance: 12,
-      style: _helpers.yAxisLabelStyle
+    xAxis: {
+      ..._charts.commonChartOptions.xAxis,
+      labels: {
+        style: _helpers.xAxisLabelStyle
+      },
+      title: {
+        margin: 12,
+        style: _helpers.xAxisTitleStyle
+      },
+      lineColor: _color.colorBorderPrimary
     },
-    title: {
-      margin: 12,
-      style: _helpers.yAxisTitleStyle
-    }
-  },
-  drilldown: {
-    activeAxisLabelStyle: _helpers.activeLabelStyle,
-    activeDataLabelStyle: _helpers.activeLabelStyle,
-    breadcrumbs: {
-      floating: true
+    yAxis: {
+      labels: {
+        align: 'right',
+        distance: 12,
+        style: _helpers.yAxisLabelStyle
+      },
+      title: {
+        margin: 12,
+        style: _helpers.yAxisTitleStyle
+      }
+    },
+    drilldown: {
+      activeAxisLabelStyle: _helpers.activeLabelStyle,
+      activeDataLabelStyle: _helpers.activeLabelStyle,
+      breadcrumbs: {
+        floating: true
+      }
     }
-  }
-});
+  };
+};
 exports.getStackedBarChartOptions = getStackedBarChartOptions;

package/mcp/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/genesis-mcp",
-  "version": "1.0.33",
+  "version": "1.0.35",
   "description": "MCP server for Genesis UI Design System - provides AI assistants with access to components, hooks, and design tokens",
   "type": "module",
   "main": "index.js",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.6.21",
+  "version": "0.6.23",
   "description": "Sense UI components library",
   "author": {
     "name": "Spaced Out"