@balena/ui-shared-components 12.0.1-build-renovate-major-7-react-router-dom-5a89a0ddf13f62416fb0ce2cc4b2148c4edb2ed7-1 → 12.0.1-build-upgrade-storybook-to-8-6-fd98f9f481f55338bfe6701eee1846a17a50114c-1

package/dist/docs/utils.d.ts

@@ -3,13 +3,11 @@ import type { IconDefinition } from '@fortawesome/free-solid-svg-icons';
 type JsonToken = {
     type: string;
     value: string;
-    blendMode: string;
     filePath: string;
     isSource: boolean;
     original: {
         type: string;
         value: string;
-        blendMode: string;
     };
     name: string;
     attributes: {
@@ -18,17 +16,18 @@ type JsonToken = {
         [key: string]: string;
     };
     path: string[];
+    key: string;
 };
 export declare const ColorTable: ({ children }: {
     children: React.ReactNode;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const ColorRow: ({ token, description, }: {
-    token: {
+export declare const ColorRow: ({ designToken, description, }: {
+    designToken: {
         value: string;
         name: string;
     };
     description: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element | undefined;
 /**
  * split pascalcase into lowercase words separated with dots or dashes, and remove first separator
  */

package/dist/docs/utils.js

@@ -4,8 +4,13 @@ import { useState } from 'react';
 import { Box, ToggleButton, ToggleButtonGroup, Typography, } from '@mui/material';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { token as getToken } from '../utils/token';
+import jsonTokens from '@balena/design-tokens/build/json/tokens.json';
 export const ColorTable = ({ children }) => (_jsxs("table", { style: { width: '100%', borderCollapse: 'collapse' }, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { style: { textAlign: 'left', width: '75px' }, children: "Color" }), _jsx("th", { style: { textAlign: 'left' }, children: "Token" }), _jsx("th", { style: { textAlign: 'left' }, children: "Description" }), _jsx("th", { style: { textAlign: 'left' }, children: "Variables" }), _jsx("th", { style: { textAlign: 'left' }, children: "Value" })] }) }), _jsx("tbody", { children: children })] }));
-export const ColorRow = ({ token, description, }) => {
+export const ColorRow = ({ designToken, description, }) => {
+    const token = jsonTokens.find((jsonToken) => jsonToken.key === `{${designToken}}`);
+    if (!token) {
+        return;
+    }
     return (_jsxs("tr", { children: [_jsx("td", { children: _jsx("div", { style: {
                         width: '100%',
                         height: '20px',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@balena/ui-shared-components",
-  "version": "12.0.1-build-renovate-major-7-react-router-dom-5a89a0ddf13f62416fb0ce2cc4b2148c4edb2ed7-1",
+  "version": "12.0.1-build-upgrade-storybook-to-8-6-fd98f9f481f55338bfe6701eee1846a17a50114c-1",
   "main": "./dist/index.js",
   "sideEffects": false,
   "files": [
@@ -44,7 +44,7 @@
     "react-dropzone": "^14.2.3",
     "react-helmet": "^6.1.0",
     "react-markdown": "^10.0.0",
-    "react-router-dom": "^7.0.0",
+    "react-router-dom": "^6.28.0",
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.0",
     "rimraf": "^6.0.0",
@@ -55,18 +55,17 @@
   },
   "devDependencies": {
     "@balena/lint": "^9.1.0",
-    "@storybook/addon-essentials": "^8.5.0",
-    "@storybook/addon-interactions": "^8.5.0",
-    "@storybook/addon-links": "^8.5.0",
-    "@storybook/addon-mdx-gfm": "^8.5.0",
-    "@storybook/addon-onboarding": "^8.5.0",
-    "@storybook/addon-webpack5-compiler-swc": "^2.0.0",
-    "@storybook/blocks": "^8.5.0",
-    "@storybook/manager-api": "^8.5.0",
-    "@storybook/react": "^8.5.0",
-    "@storybook/react-webpack5": "^8.5.0",
-    "@storybook/test": "^8.5.0",
-    "@storybook/theming": "^8.5.0",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-interactions": "^8.6.12",
+    "@storybook/addon-links": "^8.6.12",
+    "@storybook/addon-onboarding": "^8.6.12",
+    "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/manager-api": "^8.6.12",
+    "@storybook/react": "^8.6.12",
+    "@storybook/react-webpack5": "^8.6.12",
+    "@storybook/test": "^8.6.12",
+    "@storybook/theming": "^8.6.12",
     "@types/color": "^4.2.0",
     "@types/color-hash": "^2.0.0",
     "@types/lodash": "^4.17.14",
@@ -76,11 +75,11 @@
     "@types/react-dom": "^18.0.11",
     "@types/react-helmet": "^6.1.6",
     "@types/zxcvbn": "^4.4.4",
-    "eslint-plugin-storybook": "^0.11.2",
+    "eslint-plugin-storybook": "^0.12.0",
     "husky": "^9.0.0",
     "lint-staged": "^15.0.0",
     "prop-types": "^15.8.1",
-    "storybook": "^8.5.0",
+    "storybook": "^8.6.12",
     "ts-loader": "^9.5.1",
     "webpack": "^5.88.2"
   },
@@ -139,6 +138,6 @@
   },
   "homepage": "https://github.com/balena-io/ui-shared-components#readme",
   "versionist": {
-    "publishedAt": "2025-04-04T13:08:03.342Z"
+    "publishedAt": "2025-04-04T14:51:19.041Z"
   }
 }