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

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.11](https://github.com/spaced-out/ui-design-system/compare/v0.6.10...v0.6.11) (2026-04-15)
+
+
+### Bug Fixes
+
+* **Table:** apply checkbox className to header cell ([#476](https://github.com/spaced-out/ui-design-system/issues/476)) ([91e91df](https://github.com/spaced-out/ui-design-system/commit/91e91df475d7330cefca2e9ef0dace347624c6f7))
+
+### [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/CONTRIBUTING.md

@@ -156,7 +156,7 @@ Check out our [**Design Tokens Page**](https://spaced-out.github.io/ui-design-sy
 
 ### Testing Genesis Design System Locally
 
-> In the `ui_design_system` directory's run:
+> In the `ui-design-system` directory's run:
 
 ```bash
   yarn build
@@ -174,7 +174,7 @@ Check out our [**Design Tokens Page**](https://spaced-out.github.io/ui-design-sy
   ...
   "dependencies": {
     ...
-    "@spaced-out/ui-design-system": "file:../ui_design_system",
+    "@spaced-out/ui-design-system": "file:../ui-design-system",
     ...
   },
   ...
@@ -182,9 +182,9 @@ Check out our [**Design Tokens Page**](https://spaced-out.github.io/ui-design-sy
 
 which will install the local genesis design system library as a dependency in `consumer`.
 
-For every change in `ui_design_system` that you want to propagate to `consumer` run:
+For every change in `ui-design-system` that you want to propagate to `consumer` run:
 
-> in `ui_design_system`
+> in `ui-design-system`
 
 ```bash
   yarn build

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 !== undefined ? Math.min(Math.max(Math.round(rating), MIN_RATING), MAX_RATING) : undefined;
+  const donutPercentage = React.useMemo(() => {
+    if (clampedRating !== undefined) {
+      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 !== undefined ? `${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 === undefined
+        }),
         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 (fontSize12) 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: fontSize12;
+}

package/lib/components/Table/DefaultTableHeader.d.ts

@@ -39,6 +39,7 @@ export interface TableHeaderProps<T, U> {
     }) => unknown;
     disabled?: boolean;
     stickyHeader?: boolean;
+    checkboxClassName?: string;
     testId?: string;
 }
 export declare function DefaultTableHeader<T extends GenericObject, U extends GenericObject>(props: TableHeaderProps<T, U>): React.JSX.Element;

package/lib/components/Table/DefaultTableHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultTableHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Table/DefaultTableHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,kCAAkC,CAAC;AAOzE,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,4BAA4B,CAAC;AAC9D,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,4BAA4B,CAAC;AAM9D,MAAM,WAAW,iBAAiB,CAAC,CAAC,EAAE,CAAC;IACrC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,GAAG,EAAE,MAAM,CAAC,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B,IAAI,EAAE,CAAC,CAAC;QACR,MAAM,CAAC,EAAE,CAAC,CAAC;QACX,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC,CAAC;CACJ;AAED,MAAM,MAAM,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;AAEjE,eAAO,MAAM,aAAa,EAAE,kBAAkB,CAAC,IAAI,CAGlD,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,kBAAkB,CAAC,OAAO,CACA,CAAC;AAExD,MAAM,WAAW,gBAAgB,CAAC,CAAC,EAAE,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAClC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,KAAK,OAAO,CAAC;IAChD,OAAO,CAAC,EAAE,MAAM,CAAC,CAAC;IAClB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;IACrC,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,OAAO,CAAA;KAAC,KAAK,OAAO,CAAC;IAC3E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA4CD,wBAAgB,kBAAkB,CAChC,CAAC,SAAS,aAAa,EACvB,CAAC,SAAS,aAAa,EACvB,KAAK,EAAE,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,qBAiJ9B"}
+{"version":3,"file":"DefaultTableHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Table/DefaultTableHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,kCAAkC,CAAC;AAOzE,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,4BAA4B,CAAC;AAC9D,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,4BAA4B,CAAC;AAM9D,MAAM,WAAW,iBAAiB,CAAC,CAAC,EAAE,CAAC;IACrC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,GAAG,EAAE,MAAM,CAAC,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B,IAAI,EAAE,CAAC,CAAC;QACR,MAAM,CAAC,EAAE,CAAC,CAAC;QACX,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC,CAAC;CACJ;AAED,MAAM,MAAM,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;AAEjE,eAAO,MAAM,aAAa,EAAE,kBAAkB,CAAC,IAAI,CAGlD,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,kBAAkB,CAAC,OAAO,CACA,CAAC;AAExD,MAAM,WAAW,gBAAgB,CAAC,CAAC,EAAE,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAClC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,KAAK,OAAO,CAAC;IAChD,OAAO,CAAC,EAAE,MAAM,CAAC,CAAC;IAClB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;IACrC,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,OAAO,CAAA;KAAC,KAAK,OAAO,CAAC;IAC3E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA4CD,wBAAgB,kBAAkB,CAChC,CAAC,SAAS,aAAa,EACvB,CAAC,SAAS,aAAa,EACvB,KAAK,EAAE,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,qBAmJ9B"}

package/lib/components/Table/DefaultTableHeader.js

@@ -63,6 +63,7 @@ function DefaultTableHeader(props) {
     checked,
     disabled,
     stickyHeader,
+    checkboxClassName,
     testId
   } = props;
   const tableHeaderCells = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
@@ -155,19 +156,17 @@ function DefaultTableHeader(props) {
       className: _TableModule.default.defaultHeaderRow,
       children: [handleCheckboxClick && /*#__PURE__*/(0, _jsxRuntime.jsx)(BasicHeadCell, {
         scope: "col",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: _TableModule.default.checkbox,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.Checkbox, {
-            value: "all",
-            checked: checked === 'true' ? true : false,
-            indeterminate: checked === 'mixed',
-            onChange: handleCheckboxClick,
-            disabled: disabled,
-            ariaLabel: "Select all rows",
-            testId: (0, _qa.generateTestId)({
-              base: testId,
-              slot: 'select-all-checkbox'
-            })
+        className: (0, _classify.default)(_TableModule.default.checkbox, checkboxClassName),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.Checkbox, {
+          value: "all",
+          checked: checked === 'true' ? true : false,
+          indeterminate: checked === 'mixed',
+          onChange: handleCheckboxClick,
+          disabled: disabled,
+          ariaLabel: "Select all rows",
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'select-all-checkbox'
           })
         })
       }), tableHeaderCells()]

package/lib/components/Table/StaticTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StaticTable.d.ts","sourceRoot":"","sources":["../../../src/components/Table/StaticTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,kCAAkC,CAAC;AASzE,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,4BAA4B,CAAC;AAC9D,OAAO,KAAK,EACV,aAAa,EAEb,UAAU,EACX,MAAM,4BAA4B,CAAC;AAKpC,eAAO,MAAM,UAAU,EAAE,kBAAkB,CAAC,OAAO,CAGlD,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,kBAAkB,CAAC,OAAO,CACA,CAAC;AAsNxD;;;;GAIG;AAEH,wBAAgB,WAAW,CACzB,IAAI,SAAS,aAAa,EAC1B,MAAM,SAAS,aAAa,EAE5B,KAAK,EAAE,UAAU,CAAC,IAAI,EAAE,MAAM,CAAC,GAAG;IAChC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB,qBAyHF;AAED,wBAAgB,sBAAsB,CACpC,IAAI,SAAS,aAAa,EAC1B,MAAM,SAAS,aAAa,EAE5B,KAAK,EAAE,UAAU,CAAC,IAAI,EAAE,MAAM,CAAC,GAAG;IAChC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB,qBA4NF"}
+{"version":3,"file":"StaticTable.d.ts","sourceRoot":"","sources":["../../../src/components/Table/StaticTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,kCAAkC,CAAC;AASzE,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,4BAA4B,CAAC;AAC9D,OAAO,KAAK,EACV,aAAa,EAEb,UAAU,EACX,MAAM,4BAA4B,CAAC;AAKpC,eAAO,MAAM,UAAU,EAAE,kBAAkB,CAAC,OAAO,CAGlD,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,kBAAkB,CAAC,OAAO,CACA,CAAC;AAuNxD;;;;GAIG;AAEH,wBAAgB,WAAW,CACzB,IAAI,SAAS,aAAa,EAC1B,MAAM,SAAS,aAAa,EAE5B,KAAK,EAAE,UAAU,CAAC,IAAI,EAAE,MAAM,CAAC,GAAG;IAChC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB,qBAyHF;AAED,wBAAgB,sBAAsB,CACpC,IAAI,SAAS,aAAa,EAC1B,MAAM,SAAS,aAAa,EAE5B,KAAK,EAAE,UAAU,CAAC,IAAI,EAAE,MAAM,CAAC,GAAG;IAChC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB,qBA4NF"}

package/lib/components/Table/StaticTable.js

@@ -147,6 +147,7 @@ function TableWrapper(_ref3) {
         disabled: disabled,
         handleCheckboxClick: handleHeaderCheckboxClick,
         stickyHeader: stickyHeader,
+        checkboxClassName: classNames?.checkbox,
         checked: selectedKeys == null || selectedKeys.length === 0 ? 'false' : selectedKeys.length < entriesLength ? 'mixed' : 'true',
         testId: (0, _qa.generateTestId)({
           base: testId,

package/lib/components/Table/Table.module.css

@@ -217,7 +217,7 @@
   height: size240;
 }
 
-.checkbox {
+.defaultHeaderCell.checkbox {
   padding: spaceSmall spaceMedium spaceSmall spaceNone;
   max-width: size60;
 }

package/mcp/package.json

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