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

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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)
 
 

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.22",
+  "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.9",
+  "version": "0.6.10",
   "description": "Sense UI components library",
   "author": {
     "name": "Spaced Out"