@spaced-out/ui-design-system 0.6.8 → 0.6.10

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 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.10](https://github.com/spaced-out/ui-design-system/compare/v0.6.9...v0.6.10) (2026-04-13)
+
+
+### Features
+
+* rating prop in Progressdonut, responsiveness in Pagination ([#474](https://github.com/spaced-out/ui-design-system/issues/474)) ([0516ad4](https://github.com/spaced-out/ui-design-system/commit/0516ad4ba28995df31c3427cdfc8da15dae3e6ab))
+
+### [0.6.9](https://github.com/spaced-out/ui-design-system/compare/v0.6.8...v0.6.9) (2026-04-10)
+
+
+### Features
+
+* [GDS-559]added universal chart to follow chart transitions ([#473](https://github.com/spaced-out/ui-design-system/issues/473)) ([b88cbba](https://github.com/spaced-out/ui-design-system/commit/b88cbba3293d4cfa86e2daff178769f1b94a7a83))
+
 ### [0.6.8](https://github.com/spaced-out/ui-design-system/compare/v0.6.7...v0.6.8) (2026-04-09)
 
 

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

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import type { CategoricalChartKind, ChartKindOptionType, FlowChartKind, ProportionChartKind, UniversalChartProps } from '../../../components/Charts/UniversalChart/UniversalChart.types';
+export declare const CHART_KIND_OPTIONS: Readonly<{
+    column: ChartKindOptionType<"column">;
+    line: ChartKindOptionType<"line">;
+    donut: ChartKindOptionType<"donut">;
+    funnel: ChartKindOptionType<"funnel">;
+    sankey: ChartKindOptionType<"sankey">;
+    spider: ChartKindOptionType<"spider">;
+    stackedBar: ChartKindOptionType<"stackedBar">;
+}>;
+export declare const CHART_KIND_GROUPS: Readonly<{
+    CATEGORICAL: Array<ChartKindOptionType<CategoricalChartKind>>;
+    PROPORTION: Array<ChartKindOptionType<ProportionChartKind>>;
+    FLOW: Array<ChartKindOptionType<FlowChartKind>>;
+}>;
+export type { UniversalChartProps, ChartKind, ChartKindOptionType, ChartKindSelectorProps, CategoricalChartKind, ProportionChartKind, FlowChartKind, } from '../../../components/Charts/UniversalChart/UniversalChart.types';
+export declare const UniversalChart: {
+    (props: UniversalChartProps): React.JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=UniversalChart.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UniversalChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Charts/UniversalChart/UniversalChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAkB/B,OAAO,KAAK,EACV,oBAAoB,EAEpB,mBAAmB,EACnB,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;EACtC,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;EACD,CAAC;AAmBH,YAAY,EACV,mBAAmB,EACnB,SAAS,EACT,mBAAmB,EACnB,sBAAsB,EACtB,oBAAoB,EACpB,mBAAmB,EACnB,aAAa,GACd,MAAM,2DAA2D,CAAC;AAEnE,eAAO,MAAM,cAAc;YAAW,mBAAmB;;CA6OxD,CAAC"}

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

@@ -0,0 +1,278 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UniversalChart = exports.CHART_KIND_OPTIONS = exports.CHART_KIND_GROUPS = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _size = require("../../../styles/variables/_size");
+var _classify = _interopRequireDefault(require("../../../utils/classify"));
+var _qa = require("../../../utils/qa");
+var _ButtonDropdown = require("../../ButtonDropdown");
+var _ChartWrapper = require("../ChartWrapper");
+var _ColumnChart = require("../ColumnChart");
+var _DonutChart = require("../DonutChart");
+var _FunnelChart = require("../FunnelChart");
+var _LineChart = require("../LineChart");
+var _SankeyChart = require("../SankeyChart");
+var _SpiderChart = require("../SpiderChart");
+var _StackedBarChart = require("../StackedBarChart");
+var _EmptyState = require("../../EmptyState");
+var _UniversalChartModule = _interopRequireDefault(require("./UniversalChart.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const CHART_KIND_OPTIONS = exports.CHART_KIND_OPTIONS = Object.freeze({
+  column: {
+    key: 'column',
+    label: 'Column Chart'
+  },
+  line: {
+    key: 'line',
+    label: 'Line Chart'
+  },
+  donut: {
+    key: 'donut',
+    label: 'Donut Chart'
+  },
+  funnel: {
+    key: 'funnel',
+    label: 'Funnel Chart'
+  },
+  sankey: {
+    key: 'sankey',
+    label: 'Sankey Chart'
+  },
+  spider: {
+    key: 'spider',
+    label: 'Spider Chart'
+  },
+  stackedBar: {
+    key: 'stackedBar',
+    label: 'Stacked Bar Chart'
+  }
+});
+const CHART_KIND_GROUPS = exports.CHART_KIND_GROUPS = Object.freeze({
+  CATEGORICAL: [CHART_KIND_OPTIONS.column, CHART_KIND_OPTIONS.line, CHART_KIND_OPTIONS.stackedBar, CHART_KIND_OPTIONS.spider],
+  PROPORTION: [CHART_KIND_OPTIONS.donut, CHART_KIND_OPTIONS.funnel],
+  FLOW: [CHART_KIND_OPTIONS.sankey]
+});
+const sortSeriesDescending = series => series.map(item => ({
+  ...item,
+  data: [...item.data].sort((a, b) => (b.y ?? 0) - (a.y ?? 0))
+}));
+const getGroupForKind = kind => {
+  for (const group of Object.values(CHART_KIND_GROUPS)) {
+    if (group.some(opt => opt.key === kind)) {
+      return group.map(opt => opt.key);
+    }
+  }
+  return [kind];
+};
+const UniversalChart = props => {
+  const {
+    chartKind,
+    showChartKindSwitcher = false,
+    chartKindOptions,
+    onChartKindChange,
+    responsive = true
+  } = props;
+  const classNames = 'classNames' in props ? props.classNames : undefined;
+  const responsiveClassNames = responsive ? {
+    ...classNames,
+    highChart: (0, _classify.default)(classNames?.highChart, _UniversalChartModule.default.responsiveChart)
+  } : classNames;
+  const testId = 'testId' in props ? props.testId : undefined;
+  const cardTitle = 'cardTitle' in props ? props.cardTitle : undefined;
+  const headerActions = 'headerActions' in props ? props.headerActions : undefined;
+  const chartKindMenuOptions = React.useMemo(() => {
+    if (!showChartKindSwitcher) {
+      return undefined;
+    }
+    const compatibleGroup = getGroupForKind(chartKind);
+    const source = chartKindOptions ? chartKindOptions.filter(option => compatibleGroup.includes(option.key)) : compatibleGroup.map(kind => CHART_KIND_OPTIONS[kind]);
+    const options = source.map(_ref => {
+      let {
+        key,
+        label
+      } = _ref;
+      return {
+        key,
+        label
+      };
+    });
+    return options.length > 0 ? options : undefined;
+  }, [showChartKindSwitcher, chartKindOptions, chartKind]);
+  const handleChartKindSelect = React.useCallback(option => {
+    onChartKindChange?.(option.key);
+  }, [onChartKindChange]);
+  const switcherElement = showChartKindSwitcher && chartKindMenuOptions ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonDropdown.ButtonDropdown, {
+    ariaLabel: "Switch Chart Type",
+    menu: {
+      isFluid: false,
+      menuDisabled: false,
+      options: chartKindMenuOptions,
+      selectedKeys: [chartKind],
+      size: 'medium',
+      width: _size.size180
+    },
+    iconLeftName: "chart-mixed",
+    onOptionSelect: handleChartKindSelect,
+    size: "small",
+    type: "ghost",
+    anchorPosition: _ButtonDropdown.ANCHOR_POSITION_TYPE.bottomEnd,
+    testId: (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'chart-kind-selector'
+    })
+  }) : null;
+  const combinedHeaderActions = switcherElement || headerActions ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [switcherElement, headerActions]
+  }) : undefined;
+  const consumerChart = 'chart' in props ? props.chart : undefined;
+  const responsiveChart = responsive ? {
+    ...consumerChart,
+    height: '60%'
+  } : consumerChart;
+  switch (props.chartKind) {
+    case 'column':
+      {
+        const {
+          chartKind: _chartKind,
+          showChartKindSwitcher: _showChartKindSwitcher,
+          chartKindOptions: _chartKindOptions,
+          onChartKindChange: _onChartKindChange,
+          responsive: _responsive,
+          ...rest
+        } = props;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColumnChart.ColumnChart, {
+          ...rest,
+          chart: responsiveChart,
+          headerActions: combinedHeaderActions,
+          classNames: responsiveClassNames
+        });
+      }
+    case 'line':
+      {
+        const {
+          chartKind: _chartKind,
+          showChartKindSwitcher: _showChartKindSwitcher,
+          chartKindOptions: _chartKindOptions,
+          onChartKindChange: _onChartKindChange,
+          responsive: _responsive,
+          ...rest
+        } = props;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.LineChart, {
+          ...rest,
+          chart: responsiveChart,
+          headerActions: combinedHeaderActions,
+          classNames: responsiveClassNames
+        });
+      }
+    case 'donut':
+      {
+        const {
+          chartKind: _chartKind,
+          showChartKindSwitcher: _showChartKindSwitcher,
+          chartKindOptions: _chartKindOptions,
+          onChartKindChange: _onChartKindChange,
+          responsive: _responsive,
+          ...rest
+        } = props;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DonutChart.DonutChart, {
+          ...rest,
+          headerActions: combinedHeaderActions,
+          classNames: responsiveClassNames
+        });
+      }
+    case 'funnel':
+      {
+        const {
+          chartKind: _chartKind,
+          showChartKindSwitcher: _showChartKindSwitcher,
+          chartKindOptions: _chartKindOptions,
+          onChartKindChange: _onChartKindChange,
+          responsive: _responsive,
+          ...rest
+        } = props;
+        const sortedSeries = sortSeriesDescending(rest.series);
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FunnelChart.FunnelChart, {
+          ...rest,
+          chart: responsiveChart,
+          series: sortedSeries,
+          headerActions: combinedHeaderActions,
+          classNames: responsiveClassNames
+        });
+      }
+    case 'sankey':
+      {
+        const {
+          chartKind: _chartKind,
+          showChartKindSwitcher: _showChartKindSwitcher,
+          chartKindOptions: _chartKindOptions,
+          onChartKindChange: _onChartKindChange,
+          responsive: _responsive,
+          ...rest
+        } = props;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SankeyChart.SankeyChart, {
+          ...rest,
+          chart: responsiveChart,
+          headerActions: combinedHeaderActions,
+          classNames: responsiveClassNames
+        });
+      }
+    case 'spider':
+      {
+        const {
+          chartKind: _chartKind,
+          showChartKindSwitcher: _showChartKindSwitcher,
+          chartKindOptions: _chartKindOptions,
+          onChartKindChange: _onChartKindChange,
+          responsive: _responsive,
+          ...rest
+        } = props;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SpiderChart.SpiderChart, {
+          ...rest,
+          chart: responsiveChart,
+          headerActions: combinedHeaderActions,
+          classNames: responsiveClassNames
+        });
+      }
+    case 'stackedBar':
+      {
+        const {
+          chartKind: _chartKind,
+          showChartKindSwitcher: _showChartKindSwitcher,
+          chartKindOptions: _chartKindOptions,
+          onChartKindChange: _onChartKindChange,
+          responsive: _responsive,
+          ...rest
+        } = props;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackedBarChart.StackedBarChart, {
+          ...rest,
+          chart: responsiveChart,
+          headerActions: combinedHeaderActions,
+          classNames: responsiveClassNames
+        });
+      }
+    default:
+      {
+        const _exhaustive = props;
+        const unsupportedKind = _exhaustive.chartKind;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartWrapper.ChartWrapper, {
+          title: cardTitle,
+          headerActions: combinedHeaderActions,
+          classNames: responsiveClassNames,
+          testId: testId,
+          hasEmptyData: true,
+          emptyText: /*#__PURE__*/(0, _jsxRuntime.jsx)(_EmptyState.EmptyState, {
+            imageVariant: "chart",
+            title: "Unsupported chart type",
+            description: `Chart kind "${unsupportedKind}" is not supported.`
+          })
+        });
+      }
+  }
+};
+exports.UniversalChart = UniversalChart;
+UniversalChart.displayName = 'UniversalChart';

package/lib/components/Charts/UniversalChart/UniversalChart.module.css

@@ -0,0 +1,7 @@
+@value (size300) from '../../../styles/variables/_size.css';
+
+.responsiveChart {
+  max-height: none;
+  min-width: size300;
+  min-height: size300;
+}

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

@@ -0,0 +1,37 @@
+import type { ColumnChartProps } from '../../../components/Charts/ColumnChart';
+import type { DonutChartProps } from '../../../components/Charts/DonutChart';
+import type { FunnelChartProps } from '../../../components/Charts/FunnelChart';
+import type { LineChartProps } from '../../../components/Charts/LineChart';
+import type { SankeyChartProps } from '../../../components/Charts/SankeyChart';
+import type { SpiderChartProps } from '../../../components/Charts/SpiderChart';
+import type { StackedBarChartProps } from '../../../components/Charts/StackedBarChart';
+export type ChartKind = 'column' | 'line' | 'donut' | 'funnel' | 'sankey' | 'spider' | 'stackedBar';
+export type CategoricalChartKind = 'column' | 'line' | 'stackedBar' | 'spider';
+export type ProportionChartKind = 'donut' | 'funnel';
+export type FlowChartKind = 'sankey';
+export interface ChartKindOptionType<K extends ChartKind = ChartKind> {
+    key: K;
+    label: string;
+}
+export interface ChartKindSelectorProps {
+    showChartKindSwitcher?: boolean;
+    chartKindOptions?: Array<ChartKindOptionType<CategoricalChartKind>> | Array<ChartKindOptionType<ProportionChartKind>> | Array<ChartKindOptionType<FlowChartKind>>;
+    onChartKindChange?: (chartKind: ChartKind) => void;
+    responsive?: boolean;
+}
+export type UniversalChartProps = (({
+    chartKind: 'column';
+} & ColumnChartProps) | ({
+    chartKind: 'line';
+} & LineChartProps) | ({
+    chartKind: 'donut';
+} & DonutChartProps) | ({
+    chartKind: 'funnel';
+} & FunnelChartProps) | ({
+    chartKind: 'sankey';
+} & SankeyChartProps) | ({
+    chartKind: 'spider';
+} & SpiderChartProps) | ({
+    chartKind: 'stackedBar';
+} & StackedBarChartProps)) & ChartKindSelectorProps;
+//# sourceMappingURL=UniversalChart.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UniversalChart.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Charts/UniversalChart/UniversalChart.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,kCAAkC,CAAC;AACtE,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,iCAAiC,CAAC;AACpE,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,uCAAuC,CAAC;AAGhF,MAAM,MAAM,SAAS,GACjB,QAAQ,GACR,MAAM,GACN,OAAO,GACP,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,YAAY,CAAC;AAEjB,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,MAAM,GAAG,YAAY,GAAG,QAAQ,CAAC;AAC/E,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,QAAQ,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,QAAQ,CAAC;AAErC,MAAM,WAAW,mBAAmB,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS;IAClE,GAAG,EAAE,CAAC,CAAC;IACP,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,sBAAsB;IACrC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gBAAgB,CAAC,EACb,KAAK,CAAC,mBAAmB,CAAC,oBAAoB,CAAC,CAAC,GAChD,KAAK,CAAC,mBAAmB,CAAC,mBAAmB,CAAC,CAAC,GAC/C,KAAK,CAAC,mBAAmB,CAAC,aAAa,CAAC,CAAC,CAAC;IAC9C,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,MAAM,mBAAmB,GAAG,CAC9B,CAAC;IAAC,SAAS,EAAE,QAAQ,CAAA;CAAC,GAAG,gBAAgB,CAAC,GAC1C,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAAC,GAAG,cAAc,CAAC,GACtC,CAAC;IAAC,SAAS,EAAE,OAAO,CAAA;CAAC,GAAG,eAAe,CAAC,GACxC,CAAC;IAAC,SAAS,EAAE,QAAQ,CAAA;CAAC,GAAG,gBAAgB,CAAC,GAC1C,CAAC;IAAC,SAAS,EAAE,QAAQ,CAAA;CAAC,GAAG,gBAAgB,CAAC,GAC1C,CAAC;IAAC,SAAS,EAAE,QAAQ,CAAA;CAAC,GAAG,gBAAgB,CAAC,GAC1C,CAAC;IAAC,SAAS,EAAE,YAAY,CAAA;CAAC,GAAG,oBAAoB,CAAC,CACrD,GACC,sBAAsB,CAAC"}

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,2 @@
+export * from '../../../components/Charts/UniversalChart/UniversalChart';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Charts/UniversalChart/index.ts"],"names":[],"mappings":"AAAA,cAAc,qDAAqD,CAAC"}

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _UniversalChart = require("./UniversalChart");
+Object.keys(_UniversalChart).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _UniversalChart[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _UniversalChart[key];
+    }
+  });
+});

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

@@ -7,4 +7,5 @@ export * from '../../components/Charts/LineChart';
 export * from '../../components/Charts/SankeyChart';
 export * from '../../components/Charts/SpiderChart';
 export * from '../../components/Charts/StackedBarChart';
+export * from '../../components/Charts/UniversalChart';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Charts/index.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAC;AACnD,cAAc,oCAAoC,CAAC;AACnD,cAAc,mCAAmC,CAAC;AAClD,cAAc,kCAAkC,CAAC;AACjD,cAAc,mCAAmC,CAAC;AAClD,cAAc,iCAAiC,CAAC;AAChD,cAAc,mCAAmC,CAAC;AAClD,cAAc,mCAAmC,CAAC;AAClD,cAAc,uCAAuC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Charts/index.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAC;AACnD,cAAc,oCAAoC,CAAC;AACnD,cAAc,mCAAmC,CAAC;AAClD,cAAc,kCAAkC,CAAC;AACjD,cAAc,mCAAmC,CAAC;AAClD,cAAc,iCAAiC,CAAC;AAChD,cAAc,mCAAmC,CAAC;AAClD,cAAc,mCAAmC,CAAC;AAClD,cAAc,uCAAuC,CAAC;AACtD,cAAc,sCAAsC,CAAC"}

package/lib/components/Charts/index.js

@@ -101,4 +101,15 @@ Object.keys(_StackedBarChart).forEach(function (key) {
       return _StackedBarChart[key];
     }
   });
+});
+var _UniversalChart = require("./UniversalChart");
+Object.keys(_UniversalChart).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _UniversalChart[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _UniversalChart[key];
+    }
+  });
 });

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

@@ -1 +1 @@
-{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAerD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,KAAK,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC;AAE5D,MAAM,MAAM,kBAAkB,GAC1B,OAAO,GACP,UAAU,GACV,MAAM,GACN,gBAAgB,GAChB,cAAc,GACd,MAAM,GACN,MAAM,CAAC;AAEX,MAAM,WAAW,mBAAmB;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CACT,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EACjC,KAAK,CAAC,EAAE,UAAU,GAAG,IAAI,GAAG,SAAS,KAClC,IAAI,CAAC;IACV,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAChC,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,MAAM,WAAW,eACf,SAAQ,IAAI,CACR;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,EAC5B,MAAM,mBAAmB,GAAG,MAAM;IAAC,UAAU,CAAC,EAAE,UAAU,CAAA;CAAC,CAC5D,EACD,mBAAmB;IACrB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC5D,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAChC,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,kBAAkB,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAMD,eAAO,MAAM,UAAU,EAAE,IAAI,CAAC,iBAAiB,CAC7C,eAAe,EACf,cAAc,CA8Gf,CAAC"}
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAgBrD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,KAAK,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC;AAE5D,MAAM,MAAM,kBAAkB,GAC1B,OAAO,GACP,UAAU,GACV,MAAM,GACN,gBAAgB,GAChB,cAAc,GACd,MAAM,GACN,MAAM,CAAC;AAEX,MAAM,WAAW,mBAAmB;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CACT,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EACjC,KAAK,CAAC,EAAE,UAAU,GAAG,IAAI,GAAG,SAAS,KAClC,IAAI,CAAC;IACV,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAChC,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,MAAM,WAAW,eACf,SAAQ,IAAI,CACR;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,EAC5B,MAAM,mBAAmB,GAAG,MAAM;IAAC,UAAU,CAAC,EAAE,UAAU,CAAA;CAAC,CAC5D,EACD,mBAAmB;IACrB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC5D,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAChC,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,kBAAkB,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAMD,eAAO,MAAM,UAAU,EAAE,IAAI,CAAC,iBAAiB,CAC7C,eAAe,EACf,cAAc,CAoIf,CAAC"}

package/lib/components/Pagination/Pagination.js

@@ -10,6 +10,7 @@ var _useWindowSize = require("../../hooks/useWindowSize");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _helpers = require("../../utils/helpers");
 var _qa = require("../../utils/qa");
+var _string = require("../../utils/string");
 var _Dropdown = require("../Dropdown");
 var _PaginationItem = require("./PaginationItem");
 var _Text = require("../Text");
@@ -18,12 +19,12 @@ var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const LARGE_LIST_DROPDOWN_OPTIONS = 50;
-const TABLET_SCREEN_SIZE = 640;
+const COMPACT_BREAKPOINT = 500;
 const Pagination = exports.Pagination = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     width
   } = (0, _useWindowSize.useWindowSize)();
-  const showExtraSecPaginationButtons = width > TABLET_SCREEN_SIZE;
+  const isCompact = width <= COMPACT_BREAKPOINT;
   const {
     classNames,
     style = 'primary',
@@ -31,13 +32,15 @@ const Pagination = exports.Pagination = /*#__PURE__*/React.forwardRef((props, re
     currentPage = 1,
     totalPages = 1,
     onChange,
-    showFirstButton = style !== 'primary' && showExtraSecPaginationButtons,
-    showLastButton = style !== 'primary' && showExtraSecPaginationButtons,
+    showFirstButton = style !== 'primary' && !isCompact,
+    showLastButton = style !== 'primary' && !isCompact,
     staticPaginationLabel,
     testId,
     ...restPaginationProps
   } = props;
-  const showPageSelectionDropDown = style !== 'primary' && showExtraSecPaginationButtons;
+  const isNotPrimary = style !== 'primary';
+  const showPageSelectionDropDown = isNotPrimary && !isCompact;
+  const showChildren = !(style === 'primary' && isCompact);
   const {
     items
   } = (0, _usePagination.usePagination)({
@@ -63,8 +66,10 @@ const Pagination = exports.Pagination = /*#__PURE__*/React.forwardRef((props, re
       base: testId,
       slot: 'root'
     }),
-    className: (0, _classify.default)(_PaginationModule.default.wrapper, classNames?.wrapper),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classify.default)(_PaginationModule.default.wrapper, {
+      [_PaginationModule.default.wrapperCompact]: style === 'primary' && isCompact
+    }, classNames?.wrapper),
+    children: [showChildren && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: (0, _classify.default)(_PaginationModule.default.childrenSlot, classNames?.children),
       "data-testid": (0, _qa.generateTestId)({
         base: testId,
@@ -77,7 +82,7 @@ const Pagination = exports.Pagination = /*#__PURE__*/React.forwardRef((props, re
         base: testId,
         slot: 'paginator-slots'
       }),
-      children: [style === 'secondary' && showPageSelectionDropDown && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [isNotPrimary && showPageSelectionDropDown && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.Dropdown, {
           size: "small",
           classNames: {
@@ -105,8 +110,16 @@ const Pagination = exports.Pagination = /*#__PURE__*/React.forwardRef((props, re
             base: testId,
             slot: 'label'
           }),
-          children: staticPaginationLabel ? staticPaginationLabel : `of ${totalPages} ${totalPages > 1 ? 'Pages' : 'Page'}`
+          children: staticPaginationLabel ? staticPaginationLabel : `of ${totalPages} ${(0, _string.formatWord)('Page', totalPages)}`
         })]
+      }), isNotPrimary && isCompact && !!totalPages && !!currentPage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.SubTitleExtraSmall, {
+        color: "tertiary",
+        className: _PaginationModule.default.secondaryLabel,
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'label'
+        }),
+        children: staticPaginationLabel ? staticPaginationLabel : `${currentPage} of ${totalPages} ${(0, _string.formatWord)('Page', totalPages)}`
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: (0, _classify.default)(_PaginationModule.default.paginatorSlot, classNames?.paginator),
         "data-testid": (0, _qa.generateTestId)({

package/lib/components/Pagination/Pagination.module.css

@@ -10,6 +10,10 @@
   justify-content: space-between;
 }
 
+.wrapperCompact {
+  justify-content: center;
+}
+
 .childrenSlot {
   display: flex;
 }
@@ -21,6 +25,7 @@
 
 .paginatorSlots {
   display: flex;
+  align-items: center;
   gap: spaceSmall;
 }
 

package/lib/components/ProgressDonut/ProgressDonut.d.ts

@@ -4,12 +4,18 @@ type ClassNames = Readonly<{
     wrapper?: string;
     donutChart?: string;
 }>;
-export interface ProgressDonutProps {
+export type ProgressDonutProps = {
     classNames?: ClassNames;
     color?: keyof typeof COLORS;
-    percentage: number;
+    size?: 'small' | 'medium';
     testId?: string;
-}
+} & ({
+    percentage?: number;
+    rating?: never;
+} | {
+    rating: number;
+    percentage?: never;
+});
 export declare const ProgressDonut: Flow.AbstractComponent<ProgressDonutProps, HTMLDivElement>;
 export {};
 //# sourceMappingURL=ProgressDonut.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ProgressDonut.d.ts","sourceRoot":"","sources":["../../../src/components/ProgressDonut/ProgressDonut.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAErD,OAAO,KAAK,MAAM,MAAM,6BAA6B,CAAC;AAkBtD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC,CAAC;AAEH,MAAM,WAAW,kBAAkB;IACjC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAcD,eAAO,MAAM,aAAa,EAAE,IAAI,CAAC,iBAAiB,CAChD,kBAAkB,EAClB,cAAc,CAuEf,CAAC"}
+{"version":3,"file":"ProgressDonut.d.ts","sourceRoot":"","sources":["../../../src/components/ProgressDonut/ProgressDonut.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAErD,OAAO,KAAK,MAAM,MAAM,6BAA6B,CAAC;AAuBtD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC;IAC5B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,GAAG,CACA;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,KAAK,CAAA;CAAC,GACrC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,KAAK,CAAA;CAAC,CACvC,CAAC;AAcF,eAAO,MAAM,aAAa,EAAE,IAAI,CAAC,iBAAiB,CAChD,kBAAkB,EAClB,cAAc,CAsGf,CAAC"}

package/lib/components/ProgressDonut/ProgressDonut.js

@@ -13,14 +13,24 @@ var _ProgressDonutModule = _interopRequireDefault(require("./ProgressDonut.modul
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-const STROKE_WIDTH = 8;
 const MIN_PERCENTAGE = 0;
 const DIVISOR_TWO = 2;
 const MAX_PERCENTAGE = 100;
+const MAX_RATING = 10;
+const MIN_RATING = 0;
 const SUCCESS_THRESHOLD = 80;
-const LARGE_DONUT_SIZE = 72;
 const INFO_THRESHOLD = 50;
 const WARNING_THRESHOLD = 30;
+const DONUT_CONFIG = {
+  small: {
+    size: 34,
+    strokeWidth: 4
+  },
+  medium: {
+    size: 72,
+    strokeWidth: 8
+  }
+};
 const getProgressDonutColor = percentage => {
   if (percentage >= SUCCESS_THRESHOLD) {
     return COLORS.colorSuccess;
@@ -35,15 +45,29 @@ const getProgressDonutColor = percentage => {
 const ProgressDonut = exports.ProgressDonut = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     classNames,
-    percentage = 0,
+    percentage,
+    rating,
     color,
+    size = 'medium',
     testId
   } = _ref;
-  const donutPercentage = React.useMemo(() => Math.min(Math.max(percentage, MIN_PERCENTAGE), MAX_PERCENTAGE), [percentage]);
+  const clampedRating = rating != null ? Math.min(Math.max(Math.round(rating), MIN_RATING), MAX_RATING) : undefined;
+  const donutPercentage = React.useMemo(() => {
+    if (clampedRating != null) {
+      return clampedRating / MAX_RATING * MAX_PERCENTAGE;
+    }
+    return Math.min(Math.max(percentage ?? 0, MIN_PERCENTAGE), MAX_PERCENTAGE);
+  }, [percentage, clampedRating]);
   const donutColor = React.useMemo(() => getProgressDonutColor(donutPercentage), [donutPercentage]);
-  const radius = React.useMemo(() => (LARGE_DONUT_SIZE - STROKE_WIDTH) / DIVISOR_TWO, [LARGE_DONUT_SIZE]);
+  const {
+    size: donutSize,
+    strokeWidth
+  } = DONUT_CONFIG[size];
+  const radius = React.useMemo(() => (donutSize - strokeWidth) / DIVISOR_TWO, [donutSize, strokeWidth]);
   const circumference = React.useMemo(() => DIVISOR_TWO * Math.PI * radius, [radius]);
   const offset = React.useMemo(() => circumference - donutPercentage / MAX_PERCENTAGE * circumference, [circumference, donutPercentage]);
+  const displayValue = clampedRating != null ? `${clampedRating}` : `${donutPercentage}%`;
+  const TextComponent = size === 'small' ? _Text.BodyMediumBold : _Text.BodyLargeBold;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     ref: ref,
     "data-testid": (0, _qa.generateTestId)({
@@ -54,34 +78,36 @@ const ProgressDonut = exports.ProgressDonut = /*#__PURE__*/React.forwardRef((_re
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: (0, _classify.default)(_ProgressDonutModule.default.donutChart, classNames?.donutChart),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
-        width: LARGE_DONUT_SIZE,
-        height: LARGE_DONUT_SIZE,
-        viewBox: `0 0 ${LARGE_DONUT_SIZE} ${LARGE_DONUT_SIZE}`,
+        width: donutSize,
+        height: donutSize,
+        viewBox: `0 0 ${donutSize} ${donutSize}`,
         className: _ProgressDonutModule.default.donutChartSvg,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
           className: _ProgressDonutModule.default.donutChartBackground,
-          cx: LARGE_DONUT_SIZE / DIVISOR_TWO,
-          cy: LARGE_DONUT_SIZE / DIVISOR_TWO,
+          cx: donutSize / DIVISOR_TWO,
+          cy: donutSize / DIVISOR_TWO,
           r: radius,
-          strokeWidth: STROKE_WIDTH
+          strokeWidth: strokeWidth
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
           className: _ProgressDonutModule.default.donutChartForeground,
-          cx: LARGE_DONUT_SIZE / DIVISOR_TWO,
-          cy: LARGE_DONUT_SIZE / DIVISOR_TWO,
+          cx: donutSize / DIVISOR_TWO,
+          cy: donutSize / DIVISOR_TWO,
           r: radius,
-          strokeWidth: STROKE_WIDTH,
+          strokeWidth: strokeWidth,
           strokeDasharray: circumference,
           strokeDashoffset: donutPercentage === MIN_PERCENTAGE ? circumference : offset,
           stroke: COLORS[color || ''] || donutColor,
           strokeLinecap: "round"
         })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodyLargeBold, {
-        className: _ProgressDonutModule.default.donutChartPercentage,
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TextComponent, {
+        className: (0, _classify.default)(_ProgressDonutModule.default.donutChartPercentage, {
+          [_ProgressDonutModule.default.donutChartPercentageSmallPercent]: size === 'small' && rating == null
+        }),
         testId: (0, _qa.generateTestId)({
           base: testId,
           slot: 'percentage'
         }),
-        children: `${donutPercentage}%`
+        children: displayValue
       })]
     })
   });

package/lib/components/ProgressDonut/ProgressDonut.module.css

@@ -2,6 +2,7 @@
   borderRadiusSmall
 ) from '../../styles/variables/_border.css';
 @value (spaceHalfFluid, spaceNegHalfFluid) from '../../styles/variables/_space.css';
+@value (fontSize10) from '../../styles/variables/_font.css';
 @value (size10, size20, sizeFluid) from
   '../../styles/variables/_size.css';
 @value (
@@ -41,3 +42,7 @@
 .donutChartPercentage {
   position: absolute;
 }
+
+.donutChartPercentageSmallPercent {
+  font-size: fontSize10;
+}

package/mcp/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/genesis-mcp",
-  "version": "1.0.21",
+  "version": "1.0.23",
   "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.8",
+  "version": "0.6.10",
   "description": "Sense UI components library",
   "author": {
     "name": "Spaced Out"