@spaced-out/ui-design-system 0.5.9-beta.1 → 0.5.10

package/.github/workflows/publish_to_npm.yml

@@ -2,14 +2,10 @@
 # Note: Do not change
 
 name: Release Genesis to NPM
+
 on:
   workflow_dispatch:
     inputs:
-      branch:
-        # Note(Nishant): New input added to dynamically select release branch from UI
-        description: 'Branch to release from'
-        required: true
-        default: master
       release-type:
         description: 'Select Release type (prerelease appends beta in build number)'
         type: choice
@@ -19,6 +15,7 @@ on:
           - major
           - prerelease
         required: true
+
 jobs:
   release:
     runs-on: ubuntu-latest
@@ -40,8 +37,8 @@ jobs:
         uses: actions/checkout@v4
         with:
           token: ${{ secrets.NPM_PUBLISH_USER_ACCESS_TOKEN }}
-          fetch-depth: '0'
-          ref: ${{ github.event.inputs.branch }} # Note(Nishant): Dynamically checkout the selected branch from input
+          fetch-depth: 0
+          ref: ${{ github.ref }} # e.g. refs/heads/master (from the UI selector)
 
       - name: Setup Node.js
         uses: actions/setup-node@v4
@@ -49,25 +46,20 @@ jobs:
           registry-url: https://registry.npmjs.org/
           node-version: '22.18.0'
 
-      # -------------------------------------------------------------------------------------
-      # Note(Nishant): Install isolated dependencies
-      # -------------------------------------------------------------------------------------
       - name: Install dependencies
-        run: |
-          yarn install
+        run: yarn install
 
       # ToDo(Nishant): Activate this once we have chromatic tests ready.
-      #- name: Run tests
-      #  run: yarn test
+      # - name: Run tests
+      #   run: yarn test
 
-      # Configure Git. TODO(Nishant): update with a org bot instead of personal detail
       - name: Git configuration
         run: |
           git config --global user.email "86281150+superrover@users.noreply.github.com"
           git config --global user.name "Nishant Gaurav"
-          git fetch --all
-          git checkout ${{ github.event.inputs.branch }}  # Note(Nishant): Checkout the correct branch before release
-          git pull origin ${{ github.event.inputs.branch }}
+          git fetch --all --tags
+          git checkout "${GITHUB_REF_NAME}"
+          git pull --ff-only origin "${GITHUB_REF_NAME}"
 
       # Bump package version
       # Use tag latest
@@ -76,7 +68,7 @@ jobs:
       - name: Validate release type against selected branch
         id: validate-release
         run: |
-          BRANCH="${{ github.event.inputs.branch }}"
+          BRANCH="${GITHUB_REF_NAME}"
           RELEASE_TYPE="${{ github.event.inputs.release-type }}"
 
           if [[ "$BRANCH" != "master" && "$RELEASE_TYPE" != "prerelease" ]]; then
@@ -85,11 +77,11 @@ jobs:
           fi
 
           if [[ "$RELEASE_TYPE" == "prerelease" ]]; then
-            echo "RELEASE_TAG=beta" >> $GITHUB_ENV
-            echo "IS_PRERELEASE=true" >> $GITHUB_ENV
+            echo "RELEASE_TAG=beta" >> "$GITHUB_ENV"
+            echo "IS_PRERELEASE=true" >> "$GITHUB_ENV"
           else
-            echo "RELEASE_TAG=latest" >> $GITHUB_ENV
-            echo "IS_PRERELEASE=false" >> $GITHUB_ENV
+            echo "RELEASE_TAG=latest" >> "$GITHUB_ENV"
+            echo "IS_PRERELEASE=false" >> "$GITHUB_ENV"
           fi
         # Note(Nishant): Enforces prerelease-only behavior on non-master branches
 
@@ -102,16 +94,18 @@ jobs:
           fi
         # Note(Nishant): Unified step for version bump, respecting prerelease condition
 
-      # Push changes
+        # Push changes
       - name: Push CHANGELOG.md and created release tag
-        run: |
-          git push --follow-tags origin ${{ github.event.inputs.branch }}
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          # Push to the same branch the workflow was dispatched from
+          git push --follow-tags origin "${GITHUB_REF_NAME}"
+
         # Note(Nishant): Push to selected branch, not hardcoded master
 
       # Publish version to NPM repository
       - name: Publish to NPM
-        run: yarn publish --verbose --access public --tag ${{ env.RELEASE_TAG }}
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_PUBLISH_TOKEN }}
+        run: yarn publish --verbose --access public --tag "$RELEASE_TAG"

package/.storybook/main.ts

@@ -59,7 +59,7 @@ const config: StorybookConfig = {
       process: require.resolve('process/browser'),
     };
 
-    // Fix font rule clobbering images (your existing tweak)
+    // Fix font rule clobbering images
     config.module!.rules = (config.module!.rules || []).map((rule: any) => {
       if (rule.test && rule.test.toString().includes('woff')) {
         return {

package/CHANGELOG.md

@@ -2,6 +2,34 @@
 
 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.5.10](https://github.com/spaced-out/ui-design-system/compare/v0.5.9...v0.5.10) (2025-09-23)
+
+
+### Features
+
+* introduces new util and story for generating data-testids ([4baf068](https://github.com/spaced-out/ui-design-system/commit/4baf0680bfe3d1aa9cf86b88c150df97c85271be))
+* release workflow changes ([90a910e](https://github.com/spaced-out/ui-design-system/commit/90a910ea75517b3da60e2156cc508d660b2cc8c4))
+
+
+### Bug Fixes
+
+* added stricter eslint rules ([45c42b9](https://github.com/spaced-out/ui-design-system/commit/45c42b9b1a3de57c5420047a247b2028aac5e9dd))
+* added stricter rules ([2ca45da](https://github.com/spaced-out/ui-design-system/commit/2ca45dada041a412c3d43a84b6b442a44542fbf0))
+* fixed scripts to work with alias paths ([b3f1542](https://github.com/spaced-out/ui-design-system/commit/b3f1542710f4347611235b7770858209092dcb0b))
+* rules of hooks fixed ([2eaba73](https://github.com/spaced-out/ui-design-system/commit/2eaba73ab64bd4191852f9926d7e54c1469b5c1b))
+
+### [0.5.9](https://github.com/spaced-out/ui-design-system/compare/v0.5.8...v0.5.9) (2025-09-17)
+
+
+### Features
+
+* (GDS-520 & GDS-521) sankey chart and stacked bar chart ([#407](https://github.com/spaced-out/ui-design-system/issues/407)) ([6933f20](https://github.com/spaced-out/ui-design-system/commit/6933f2057f08d8015945c0c4501ee9f42ff82afa))
+
+
+### Bug Fixes
+
+* tablist docs updated for proper elevation handling ([#406](https://github.com/spaced-out/ui-design-system/issues/406)) ([53ae598](https://github.com/spaced-out/ui-design-system/commit/53ae598702cd862f783bde83627044e21bbd650c))
+
 ### [0.5.9-beta.1](https://github.com/spaced-out/ui-design-system/compare/v0.5.9-beta.0...v0.5.9-beta.1) (2025-09-17)
 
 

package/eslint.config.mjs

@@ -65,21 +65,21 @@ export default [
     files: ['src/**/*.{ts,tsx}'],
     rules: {
       // Core
-      'arrow-body-style': ['warn', 'as-needed'],
-      curly: ['warn', 'all'],
-      'comma-spacing': ['warn', {before: false, after: true}],
-      'eol-last': 'warn',
+      'arrow-body-style': ['error', 'as-needed'],
+      curly: ['error', 'all'],
+      'comma-spacing': ['error', {before: false, after: true}],
+      'eol-last': 'error',
       eqeqeq: ['error', 'always', {null: 'ignore'}],
       indent: 'off',
-      'max-params': ['warn', {max: 4}],
-      'no-alert': 'warn',
+      'max-params': ['error', {max: 4}],
+      'no-alert': 'error',
       'no-console': ['error', {allow: ['warn', 'error']}],
       'no-dupe-args': 'error',
       'no-dupe-keys': 'error',
       'no-duplicate-case': 'error',
       // Allow TS overloads
       'no-dupe-class-members': 'off',
-      'no-empty-function': 'warn',
+      'no-empty-function': 'error',
       'no-empty-pattern': 'error',
       'no-eval': 'error',
       'no-extend-native': 'error',
@@ -94,43 +94,51 @@ export default [
       'no-redeclare': 'off', // use TS rule
       'no-restricted-globals': ['error', 'event', 'location'],
       'no-sparse-arrays': 'error',
-      'no-tabs': 'warn',
+      'no-tabs': 'error',
       'no-this-before-super': 'error',
-      'no-trailing-spaces': 'warn',
+      'no-trailing-spaces': 'error',
       'no-underscore-dangle': 'off',
-      'no-unmodified-loop-condition': 'warn',
+      'no-unmodified-loop-condition': 'error',
       'no-undef': 'off', // TS handles this
-      'no-unreachable': 'warn',
+      'no-unreachable': 'error',
       'no-useless-constructor': 'off', // use TS rule
       'no-var': 'error',
       'no-with': 'error',
       'object-shorthand': 'error',
       'prefer-arrow-callback': 'error',
-      'prefer-const': 'warn',
-      'prefer-spread': 'warn',
-      quotes: ['warn', 'single', {allowTemplateLiterals: true}],
+      'prefer-const': 'error',
+      'prefer-spread': 'error',
+      quotes: ['error', 'single', {allowTemplateLiterals: true}],
       'require-yield': 'error',
       'rest-spread-spacing': 'error',
-      strict: ['warn', 'never'],
+      strict: ['error', 'never'],
 
       // import
-      'import/newline-after-import': ['warn', {count: 2}],
+      'import/newline-after-import': ['error', {count: 2}],
       'import/no-duplicates': 'error',
+      'no-restricted-imports': [
+        'error',
+        {
+          patterns: [
+            './*', // ban same-folder
+            '../*', // ban parent-folder
+          ],
+        },
+      ],
 
       // react
       'react/jsx-no-undef': 'error',
-      'react/jsx-pascal-case': 'warn',
+      'react/jsx-pascal-case': 'error',
       'react/jsx-uses-react': 'off',
       'react/jsx-uses-vars': 'error',
-      'react/no-array-index-key': 'warn',
+      'react/no-array-index-key': 'error',
       'react/no-deprecated': 'error',
       'react/no-direct-mutation-state': 'error',
-      'react/no-string-refs': 'warn',
+      'react/no-string-refs': 'error',
       'react/prop-types': 'off',
       'react/react-in-jsx-scope': 'off',
 
-      // hooks //NOTE:(diwaker) temp keep as warn during migration; tighten later
-      'react-hooks/rules-of-hooks': 'warn',
+      'react-hooks/rules-of-hooks': 'error',
 
       // unused
       'unused-imports/no-unused-imports': 'error',
@@ -169,11 +177,19 @@ export default [
       '@typescript-eslint/ban-ts-comment': 'error',
       '@typescript-eslint/no-empty-object-type': 'error',
       '@typescript-eslint/no-unnecessary-type-constraint': 'error',
-      '@typescript-eslint/no-non-null-assertion': 'warn',
+      '@typescript-eslint/no-non-null-assertion': 'error',
       '@typescript-eslint/prefer-as-const': 'error',
 
       // ADDITIONAL NON TYPE-AWARE RULES (Valid for v8.39.1)
-      // '@typescript-eslint/consistent-type-definitions': ['error', 'interface'],
+      '@typescript-eslint/consistent-type-definitions': ['error', 'interface'],
+      '@typescript-eslint/consistent-type-imports': [
+        'error',
+        {
+          prefer: 'type-imports', // enforce `import type`
+          disallowTypeAnnotations: false, // allow `import Foo = require(...)` style if needed
+          fixStyle: 'separate-type-imports', // auto-fix groups type imports separately
+        },
+      ],
       '@typescript-eslint/explicit-function-return-type': 'off', // Too strict for most projects
       '@typescript-eslint/explicit-member-accessibility': 'off', // Too strict for most projects
       '@typescript-eslint/explicit-module-boundary-types': 'off', // Too strict for most projects
@@ -214,7 +230,7 @@ export default [
   {
     files: ['**/*.stories.{jsx,tsx}'],
     rules: {
-      semi: ['warn', 'always'],
+      semi: ['error', 'always'],
     },
   },
 
@@ -256,7 +272,7 @@ export default [
       ],
 
       // optional: keep two blank lines after imports (helps readability)
-      'import/newline-after-import': ['warn', {count: 2}],
+      'import/newline-after-import': ['error', {count: 2}],
     },
   },
 ];

package/lib/components/Charts/SankeyChart/SankeyChart.js

@@ -49,7 +49,7 @@ const SankeyChart = _ref => {
     })),
     data: seriesItem.data.map(dataPoint => ({
       ...dataPoint,
-      weight: dataPoint.weight ?? 1
+      weight: dataPoint.weight || 1
     })),
     nodeAlignment: 'center',
     showLegend

package/lib/components/Tabs/TabList/TabList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/TabList/TabList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAUrD,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAsB1D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,WAAW,YAAY;IAC3B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAC,KAAK,OAAO,CAAC;IAC9D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE;QACZ,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,YAAY,EAAE,cAAc,CAkJtE,CAAC"}
+{"version":3,"file":"TabList.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/TabList/TabList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAUrD,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAsB1D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,WAAW,YAAY;IAC3B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAC,KAAK,OAAO,CAAC;IAC9D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE;QACZ,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,YAAY,EAAE,cAAc,CAoJtE,CAAC"}

package/lib/components/Tabs/TabList/TabList.js

@@ -24,6 +24,8 @@ const TabList = exports.TabList = /*#__PURE__*/React.forwardRef((_ref, forwardRe
     onSelect,
     selectedTab,
     menuWidth,
+    // Default to 'modal' elevation. Note: When using Modal with allowBackgroundInteraction=true,
+    // tooltips may appear over the modal. In such cases, handle it by passing an appropriate elevation.
     elevation = 'modal',
     maxTabWidth = _size.size120
   } = _ref;

package/lib/utils/index.d.ts

@@ -12,4 +12,5 @@ export * from '../utils/rating';
 export * from '../utils/score-bar';
 export * from '../utils/string';
 export * from '../utils/tokens';
+export * from '../utils/qa';
 //# sourceMappingURL=index.d.ts.map

package/lib/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kCAAkC,CAAC;AACjD,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kCAAkC,CAAC;AACjD,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC"}

package/lib/utils/index.js

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

package/lib/utils/qa/index.d.ts

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

package/lib/utils/qa/index.d.ts.map

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

package/lib/utils/qa/index.js

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

package/lib/utils/qa/qa.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Generate a stable `data-testid` string.
+ *
+ * Format:
+ *   <base>[__<slot>][--<index>][--<modifierA>--<modifierB>...]
+ *
+ * Examples:
+ *   generateTestId({ base: "profile__email", slot: "input" })
+ *   // "profile__email__input"
+ *
+ *   generateTestId({ base: "users", slot: "item", index: "u-100" })
+ *   // "users__item--u-100"
+ *
+ *   generateTestId({ base: "filters", slot: "chip", modifiers: ["selected", "lg"] })
+ *   // "filters__chip--selected--lg"
+ *
+ * Guidance:
+ * - Keep `base` stable and human-readable (don’t derive from user text or use UUIDs).
+ * - For repeated items, prefer stable business keys for `index` (e.g., `user.id`).
+ * - Use `modifiers` to encode state/variants cleanly in selectors.
+ */
+export interface GenerateTestIdParams {
+    base?: string;
+    slot?: string;
+    index?: number | string;
+    modifiers?: ReadonlyArray<string | number | boolean | null | undefined>;
+}
+/** Returns the composed id, or `undefined` if `base` is missing. */
+export declare function generateTestId(params: GenerateTestIdParams): string | undefined;
+//# sourceMappingURL=qa.d.ts.map

package/lib/utils/qa/qa.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"qa.d.ts","sourceRoot":"","sources":["../../../src/utils/qa/qa.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,WAAW,oBAAoB;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,aAAa,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;CACzE;AAKD,oEAAoE;AACpE,wBAAgB,cAAc,CAC5B,MAAM,EAAE,oBAAoB,GAC3B,MAAM,GAAG,SAAS,CAsBpB"}

package/lib/utils/qa/qa.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateTestId = generateTestId;
+/**
+ * Generate a stable `data-testid` string.
+ *
+ * Format:
+ *   <base>[__<slot>][--<index>][--<modifierA>--<modifierB>...]
+ *
+ * Examples:
+ *   generateTestId({ base: "profile__email", slot: "input" })
+ *   // "profile__email__input"
+ *
+ *   generateTestId({ base: "users", slot: "item", index: "u-100" })
+ *   // "users__item--u-100"
+ *
+ *   generateTestId({ base: "filters", slot: "chip", modifiers: ["selected", "lg"] })
+ *   // "filters__chip--selected--lg"
+ *
+ * Guidance:
+ * - Keep `base` stable and human-readable (don’t derive from user text or use UUIDs).
+ * - For repeated items, prefer stable business keys for `index` (e.g., `user.id`).
+ * - Use `modifiers` to encode state/variants cleanly in selectors.
+ */
+
+const SLOT_SEP = '__';
+const MOD_SEP = '--';
+
+/** Returns the composed id, or `undefined` if `base` is missing. */
+function generateTestId(params) {
+  const {
+    base,
+    slot,
+    index,
+    modifiers = []
+  } = params;
+  if (!base) {
+    return undefined;
+  }
+  let id = slot ? `${base}${SLOT_SEP}${slot}` : base;
+  if (typeof index !== 'undefined') {
+    id += `${MOD_SEP}${String(index)}`;
+  }
+  const mods = modifiers.filter(m => Boolean(m)).map(String);
+  if (mods.length > 0) {
+    id += `${MOD_SEP}${mods.join(MOD_SEP)}`;
+  }
+  return id;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.5.9-beta.1",
+  "version": "0.5.10",
   "description": "Sense UI components library",
   "author": {
     "name": "Spaced Out"
@@ -143,6 +143,7 @@
     "husky": "2.1.0",
     "invariant": "^2.2.4",
     "jest": "^29.3.1",
+    "jscodeshift": "^17.3.0",
     "lint-staged": "^10.5.1",
     "paths.macro": "^3.0.1",
     "prettier": "^2.5.1",