@spaced-out/ui-design-system 0.3.40-beta.0 → 0.3.41

package/.all-contributorsrc

@@ -4,8 +4,7 @@
   "repoType": "github",
   "repoHost": "https://github.com",
   "files": [
-    "README.md",
-    "src/stories/INTRODUCTION.stories.mdx"
+    "README.md"
   ],
   "imageSize": 100,
   "commit": false,
@@ -18,7 +17,7 @@
       "profile": "https://github.com/superrover",
       "contributions": [
         "code",
-        "doc"
+        "infra"
       ]
     },
     {
@@ -38,7 +37,124 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "VivekJangid",
+      "name": "Vivek Jangid",
+      "avatar_url": "https://avatars.githubusercontent.com/u/33223696?v=4",
+      "profile": "https://github.com/VivekJangid",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "sharad-kushwah",
+      "name": "Sharad Kushwah",
+      "avatar_url": "https://avatars.githubusercontent.com/u/161806585?v=4",
+      "profile": "https://github.com/sharad-kushwah",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "sanskar-s",
+      "name": "Sanskar Saxena",
+      "avatar_url": "https://avatars.githubusercontent.com/u/137482980?v=4",
+      "profile": "https://github.com/sanskar-s",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "aditya-kaushal",
+      "name": "aditya-kaushal",
+      "avatar_url": "https://avatars.githubusercontent.com/u/141118827?v=4",
+      "profile": "https://github.com/aditya-kaushal",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "bhatiarush27",
+      "name": "Arush Bhatia",
+      "avatar_url": "https://avatars.githubusercontent.com/u/161808754?v=4",
+      "profile": "https://github.com/bhatiarush27",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "LakshayKumar-1",
+      "name": "LakshayKumar-1",
+      "avatar_url": "https://avatars.githubusercontent.com/u/183346574?v=4",
+      "profile": "https://github.com/LakshayKumar-1",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "Swatantramishra1",
+      "name": "Swatantra Mishra",
+      "avatar_url": "https://avatars.githubusercontent.com/u/5427027?v=4",
+      "profile": "https://github.com/Swatantramishra1",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "VishalBarnawal",
+      "name": "Vishal-sense",
+      "avatar_url": "https://avatars.githubusercontent.com/u/113020105?v=4",
+      "profile": "https://github.com/VishalBarnawal",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "vish-sah",
+      "name": "Vishwanath Sah",
+      "avatar_url": "https://avatars.githubusercontent.com/u/108925162?v=4",
+      "profile": "https://github.com/vish-sah",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "pearel-sense",
+      "name": "Pearel Nazareth",
+      "avatar_url": "https://avatars.githubusercontent.com/u/113005498?v=4",
+      "profile": "https://github.com/pearel-sense",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "deepak-rao-96",
+      "name": "deepak-rao-96",
+      "avatar_url": "https://avatars.githubusercontent.com/u/185754227?v=4",
+      "profile": "https://github.com/deepak-rao-96",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "darsh-mecwan-sense",
+      "name": "Darsh Mecwan",
+      "avatar_url": "https://avatars.githubusercontent.com/u/186684223?v=4",
+      "profile": "https://github.com/darsh-mecwan-sense",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "diwakersurya",
+      "name": "Diwaker Singh",
+      "avatar_url": "https://avatars.githubusercontent.com/u/7386665?v=4",
+      "profile": "https://github.com/diwakersurya",
+      "contributions": [
+        "code"
+      ]
     }
   ],
-  "contributorsPerLine": 7
-}
+  "contributorsPerLine": 5
+}

package/.cspell/custom-words.txt

@@ -30,6 +30,7 @@ datetime
 DEFAULTTEXT
 Dili
 dismissable
+diwakersurya
 Docgen
 drilldown
 Drilldown
@@ -123,10 +124,12 @@ useRowspanHeaders
 valuenow
 Velho
 Verda
+viewports
 vish
 VishalBarnawal
 Vivek
 voiceflow
+WCAG
 xmark
 yourcomponentname
 Yuzhno

package/.github/workflows/publish_to_npm.yml

@@ -22,7 +22,7 @@ jobs:
       - name: Check Permissions
         id: check-permissions
         env:
-          ALLOWED_USERS: superrover, Anant-Raj, ashwini-sensehq, vish-sah, VishalBarnawal, sanskar-s, VivekJangid, sharad-kushwah, Swatantramishra1, bhatiarush27, darsh-mecwan-sense
+          ALLOWED_USERS: superrover, Anant-Raj, diwakersurya, ashwini-sensehq, vish-sah, VishalBarnawal, sanskar-s, VivekJangid, sharad-kushwah, Swatantramishra1, bhatiarush27, darsh-mecwan-sense
         if: ${{ !contains(env.ALLOWED_USERS, github.actor) }}
         run: |
           echo "You don't have correct permissions to do this release"

package/.github/workflows/pull_request_checks.yml

@@ -1,7 +1,7 @@
 # Author: Nishant Gaurav
 # Note: Do not change
 
-name: Run Yarn Flow, Lint, and Spell Check
+name: Run Yarn Flow, Lint, Spell Check and Build
 
 on:
   pull_request:
@@ -20,16 +20,26 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v3
 
-      # Set up Node.js environment
-      - name: Setup Node.js
-        uses: actions/setup-node@v2
+      # Note(Nishant): Possible cleanup required Setup Node 18 for the base npm package
+      - name: Setup Node.js @18
+        uses: actions/setup-node@v4
         with:
           registry-url: https://registry.npmjs.org/
-          node-version: '18'
+          node-version: '18.20.5'
+
+      # Note(Nishant): Possible cleanup required Setup Node 20 for the dts-generator
+      # We already pin the node versions with volta so this should be fine(but not ideal)
+      - name: Setup Node.js @20
+        uses: actions/setup-node@v4
+        with:
+          registry-url: https://registry.npmjs.org/
+          node-version: '20.9.0'
 
       # Install project dependencies
       - name: Install dependencies
-        run: yarn install
+        run: |
+          yarn install
+          yarn --cwd dts-generator install
 
       # Run Yarn Flow static type checking
       - name: Run Yarn Flow
@@ -42,3 +52,16 @@ jobs:
       # Run ESLint code linting
       - name: Run Yarn Lint
         run: yarn lint:strict
+
+      # Run build step
+      # - name: Run Yarn Build
+      #   run: yarn build
+
+      # Validate if declaration files are generated
+      # - name: Validate .d.ts generation
+      #   run: |
+      #     count=$(find lib -name "*.d.ts" | wc -l)
+      #     if [ "$count" -eq 0 ]; then
+      #       echo "No .d.ts files were generated!"
+      #       exit 1
+      #     fi

package/.github/workflows/pull_request_semantics_checker.yml

@@ -1,5 +1,5 @@
 # Author: Nishant Gaurav
-# workflow to check for PR names wrt conventional commits, uses a third party action
+# workflow to check for PR names wrt conventional commits
 
 name: 'Lint PR'
 
@@ -11,10 +11,21 @@ on:
       - synchronize
 
 jobs:
-  main:
-    name: Validate PR title
+  validate-pr-title:
     runs-on: ubuntu-latest
     steps:
-      - uses: amannn/action-semantic-pull-request@v5
+      - name: Check PR title format
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          PR_TITLE: ${{ github.event.pull_request.title }}
+        run: |
+          echo "PR Title: \"$PR_TITLE\""
+
+          # Define allowed prefixes
+          if echo "$PR_TITLE" | grep -Eq '^(feat|fix|docs|chore|style|refactor|perf|test|build|ci)(\([a-zA-Z0-9\-]+\))?: .+'
+          then
+            echo "✅ PR title follows conventional commit format."
+          else
+            echo "❌ PR title does not follow conventional commit format."
+            echo "Title must start with one of: feat:, fix:, docs:, chore:, style:, refactor:, perf:, test:, build:, ci:"
+            exit 1
+          fi

package/CHANGELOG.md

@@ -2,6 +2,36 @@
 
 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.3.41](https://github.com/spaced-out/ui-design-system/compare/v0.3.40...v0.3.41) (2025-05-19)
+
+
+### Features
+
+* **table:** added disabledKeys functionality in table component ([#345](https://github.com/spaced-out/ui-design-system/issues/345)) ([06b2bc3](https://github.com/spaced-out/ui-design-system/commit/06b2bc35047e50f988f552ca58d07262afdb1d10))
+
+
+### Bug Fixes
+
+* formatting fixes ([a091cce](https://github.com/spaced-out/ui-design-system/commit/a091cced24908ae2d0c42a1f6b4742b238046633))
+
+### [0.3.40](https://github.com/spaced-out/ui-design-system/compare/v0.3.40-beta.0...v0.3.40) (2025-05-16)
+
+
+### Features
+
+* multiline support in chips ([919bd29](https://github.com/spaced-out/ui-design-system/commit/919bd29671436a19e279c03b656faf1234ed8eae))
+* pr title check with conventional commits pre merge workflow now checks for build step ([59a941f](https://github.com/spaced-out/ui-design-system/commit/59a941f8f28337c9f9886e1e559a79fe47df94bb))
+
+
+### Bug Fixes
+
+* added intro and updated contributors ([35e0584](https://github.com/spaced-out/ui-design-system/commit/35e058457b737a647a77bc6862aa99d4e271c501))
+* fixes allcontributors ([01570de](https://github.com/spaced-out/ui-design-system/commit/01570de0b64ae1ffe79f800e6902e109839f9448))
+* fixes intro ([a4430fb](https://github.com/spaced-out/ui-design-system/commit/a4430fb76ddd149a417e2762c65d43c872086741))
+* installs dts generator before running the declaration files script ([e02361e](https://github.com/spaced-out/ui-design-system/commit/e02361e4bff04ed160078a79c19c59db988b8382))
+* removed the build step in checks ([e1c951d](https://github.com/spaced-out/ui-design-system/commit/e1c951d745570757d9cf4d2c9f110a70dbb4e0e8))
+* **typeahead:** mock api call function in typeahead stories ([#346](https://github.com/spaced-out/ui-design-system/issues/346)) ([7ac92b5](https://github.com/spaced-out/ui-design-system/commit/7ac92b55986c71778e269977e8017aa24c5b35a0))
+
 ### [0.3.40-beta.0](https://github.com/spaced-out/ui-design-system/compare/v0.3.39...v0.3.40-beta.0) (2025-05-14)
 
 

package/README.md

@@ -23,12 +23,17 @@
 
 ## Intro
 
-Genesis design system consists of a set of tools and protocols that unify design and development across surfaces (platforms) to deliver consistent
-user experiences. The system utilizes workflow automation to streamline the design and development process. It's comprised of a number of React
-web components that each play a unique role within the product development cycle.
-
-The integration of these components are intended to grow and scale overtime to increasingly decrease workflow friction and optimize the product
-development lifecycle.
+Genesis is the foundational design system at Sense. It serves as the
+single source of truth for our product UI crafted to ensure visual
+consistency, engineering efficiency, and design cohesion across the
+entire platform.
+
+Genesis is a systematic collection of reusable UI components, design
+tokens, utilities, and principles. It’s purpose-built to ensure every
+part of the Sense product ecosystem speaks the same design and
+interaction language. Whether you're building candidate workflows,
+recruiter dashboards, or internal analytics tools, Genesis provides the
+building blocks to do so with speed and reliability.
 
 ## Usage
 
@@ -255,15 +260,39 @@ Check out our [**Changelog here**](https://spaced-out.github.io/ui-design-system
 
 ## Contributors
 
+<div style="overflow-x: auto">
+
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
 <!-- prettier-ignore-start -->
 <!-- markdownlint-disable -->
-<table>
+<table style="
+    width: -webkit-fill-available;
+    min-width: 800px;
+">
   <tbody>
     <tr>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/superrover"><img src="https://avatars.githubusercontent.com/u/86281150?v=4?s=100" width="100px;" alt="Nishant Gaurav"/><br /><sub><b>Nishant Gaurav</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=superrover" title="Code">💻</a> <a href="https://github.com/Spaced-Out/ui-design-system/commits?author=superrover" title="Documentation">📖</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Anant-Raj"><img src="https://avatars.githubusercontent.com/u/8904071?v=4?s=100" width="100px;" alt="Anant Raj"/><br /><sub><b>Anant Raj</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=Anant-Raj" title="Code">💻</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/ashwinikemshetty"><img src="https://avatars.githubusercontent.com/u/12839599?v=4?s=100" width="100px;" alt="Ashwini Kemshetty"/><br /><sub><b>Ashwini Kemshetty</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=ashwinikemshetty" title="Code">💻</a></td>
+      <td align="center" valign="top" width="20%"><a href="https://github.com/superrover"><img src="https://avatars.githubusercontent.com/u/86281150?v=4?s=100" width="100px;" alt="Nishant Gaurav"/><br /><sub><b>Nishant Gaurav</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=superrover" title="Code">💻</a> <a href="#infra-superrover" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
+      <td align="center" valign="top" width="20%"><a href="https://github.com/Anant-Raj"><img src="https://avatars.githubusercontent.com/u/8904071?v=4?s=100" width="100px;" alt="Anant Raj"/><br /><sub><b>Anant Raj</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=Anant-Raj" title="Code">💻</a></td>
+      <td align="center" valign="top" width="20%"><a href="https://github.com/ashwinikemshetty"><img src="https://avatars.githubusercontent.com/u/12839599?v=4?s=100" width="100px;" alt="Ashwini Kemshetty"/><br /><sub><b>Ashwini Kemshetty</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=ashwinikemshetty" title="Code">💻</a></td>
+      <td align="center" valign="top" width="20%"><a href="https://github.com/VivekJangid"><img src="https://avatars.githubusercontent.com/u/33223696?v=4?s=100" width="100px;" alt="Vivek Jangid"/><br /><sub><b>Vivek Jangid</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=VivekJangid" title="Code">💻</a></td>
+      <td align="center" valign="top" width="20%"><a href="https://github.com/sharad-kushwah"><img src="https://avatars.githubusercontent.com/u/161806585?v=4?s=100" width="100px;" alt="Sharad Kushwah"/><br /><sub><b>Sharad Kushwah</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=sharad-kushwah" title="Code">💻</a></td>
+    </tr>
+    <tr>
+      <td align="center" valign="top" width="20%"><a href="https://github.com/sanskar-s"><img src="https://avatars.githubusercontent.com/u/137482980?v=4?s=100" width="100px;" alt="Sanskar Saxena"/><br /><sub><b>Sanskar Saxena</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=sanskar-s" title="Code">💻</a></td>
+      <td align="center" valign="top" width="20%"><a href="https://github.com/aditya-kaushal"><img src="https://avatars.githubusercontent.com/u/141118827?v=4?s=100" width="100px;" alt="aditya-kaushal"/><br /><sub><b>aditya-kaushal</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=aditya-kaushal" title="Code">💻</a></td>
+      <td align="center" valign="top" width="20%"><a href="https://github.com/bhatiarush27"><img src="https://avatars.githubusercontent.com/u/161808754?v=4?s=100" width="100px;" alt="Arush Bhatia"/><br /><sub><b>Arush Bhatia</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=bhatiarush27" title="Code">💻</a></td>
+      <td align="center" valign="top" width="20%"><a href="https://github.com/LakshayKumar-1"><img src="https://avatars.githubusercontent.com/u/183346574?v=4?s=100" width="100px;" alt="LakshayKumar-1"/><br /><sub><b>LakshayKumar-1</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=LakshayKumar-1" title="Code">💻</a></td>
+      <td align="center" valign="top" width="20%"><a href="https://github.com/Swatantramishra1"><img src="https://avatars.githubusercontent.com/u/5427027?v=4?s=100" width="100px;" alt="Swatantra Mishra"/><br /><sub><b>Swatantra Mishra</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=Swatantramishra1" title="Code">💻</a></td>
+    </tr>
+    <tr>
+      <td align="center" valign="top" width="20%"><a href="https://github.com/VishalBarnawal"><img src="https://avatars.githubusercontent.com/u/113020105?v=4?s=100" width="100px;" alt="Vishal-sense"/><br /><sub><b>Vishal-sense</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=VishalBarnawal" title="Code">💻</a></td>
+      <td align="center" valign="top" width="20%"><a href="https://github.com/vish-sah"><img src="https://avatars.githubusercontent.com/u/108925162?v=4?s=100" width="100px;" alt="Vishwanath Sah"/><br /><sub><b>Vishwanath Sah</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=vish-sah" title="Code">💻</a></td>
+      <td align="center" valign="top" width="20%"><a href="https://github.com/pearel-sense"><img src="https://avatars.githubusercontent.com/u/113005498?v=4?s=100" width="100px;" alt="Pearel Nazareth"/><br /><sub><b>Pearel Nazareth</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=pearel-sense" title="Code">💻</a></td>
+      <td align="center" valign="top" width="20%"><a href="https://github.com/deepak-rao-96"><img src="https://avatars.githubusercontent.com/u/185754227?v=4?s=100" width="100px;" alt="deepak-rao-96"/><br /><sub><b>deepak-rao-96</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=deepak-rao-96" title="Code">💻</a></td>
+      <td align="center" valign="top" width="20%"><a href="https://github.com/darsh-mecwan-sense"><img src="https://avatars.githubusercontent.com/u/186684223?v=4?s=100" width="100px;" alt="Darsh Mecwan"/><br /><sub><b>Darsh Mecwan</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=darsh-mecwan-sense" title="Code">💻</a></td>
+    </tr>
+    <tr>
+      <td align="center" valign="top" width="20%"><a href="https://github.com/diwakersurya"><img src="https://avatars.githubusercontent.com/u/7386665?v=4?s=100" width="100px;" alt="Diwaker Singh"/><br /><sub><b>Diwaker Singh</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=diwakersurya" title="Code">💻</a></td>
     </tr>
   </tbody>
 </table>
@@ -272,3 +301,5 @@ Check out our [**Changelog here**](https://spaced-out.github.io/ui-design-system
 <!-- prettier-ignore-end -->
 
 <!-- ALL-CONTRIBUTORS-LIST:END -->
+
+</div>

package/cspell.json

@@ -10,7 +10,7 @@
     ".storybook/public",
     ".all-contributorsrc",
     "README.md",
-    "src/stories/INTRODUCTION.stories.mdx",
+    "src/stories/INTRODUCTION.mdx",
     ".github/CODEOWNERS",
     ".github/workflows/pull_request_semantics_checker.yml"
   ],

package/dts-generator/convert.js

@@ -47,6 +47,9 @@ const {spawnSync} = require('child_process');
 
 const files = glob.sync(path.resolve(__dirname, '../lib/**/*.js.flow'));
 
+// eslint-disable-next-line no-console
+console.log('🔄 Converting .js.flow files to TypeScript declaration files...');
+
 files.forEach((file) => {
   const outPath = file.replace(/\.js\.flow$/, '.d.ts');
   const flowToTs = path.resolve(__dirname, './node_modules/.bin/flow-to-ts');
@@ -95,7 +98,10 @@ files.forEach((file) => {
     }
   } else {
     console.warn(
-      `No meaningful output for ${file}. It may be empty or skipped.`,
+      `⚠️ No meaningful output for ${file}. It may be empty or skipped.`,
     );
   }
 });
+
+// eslint-disable-next-line no-console
+console.log(`✅ Flow to d.ts Job Finished`);

package/lib/components/Avatar/Avatar.d.ts

@@ -57,7 +57,6 @@ export type AvatarProps = {
   style?: unknown;
   iconName?: string;
   iconType?: IconType;
-  ring?: boolean;
   status?: StatusSemanticType;
   statusBorderColorToken?: $Keys<typeof COLORS>;
 };

package/lib/components/Avatar/Avatar.js.flow

@@ -66,7 +66,6 @@ export type AvatarProps = {
   style?: mixed,
   iconName?: string,
   iconType?: IconType,
-  ring?: boolean,
   status?: StatusSemanticType,
   statusBorderColorToken?: $Keys<typeof COLORS>,
 };

package/lib/components/Chip/Chip.d.ts

@@ -27,6 +27,8 @@ export type BaseChipProps = {
   disabled?: boolean;
   showStatusIndicator?: boolean;
   disableHoverState?: boolean;
+  line?: number;
+  wordBreak?: string;
   onClick?:
     | ((arg0: React.SyntheticEvent<HTMLElement>) => unknown)
     | null
@@ -72,6 +74,8 @@ export const Chip: React$AbstractComponent<ChipProps, HTMLDivElement> =
         onDismiss = () => null,
         onClick,
         disabled,
+        line = 1,
+        wordBreak,
         disableHoverState = !onClick,
         // There is no reason for hover state to be active when there is no click handler attached
         ...restProps
@@ -148,19 +152,32 @@ export const Chip: React$AbstractComponent<ChipProps, HTMLDivElement> =
 
           {iconName && size !== 'small' && (
             <Icon
-              className={classify(css.chipIcon, classNames?.icon)}
+              className={classify(
+                css.chipIcon,
+                {
+                  [css.alignTop]: line > 1,
+                },
+                classNames?.icon,
+              )}
               name={iconName}
               type={iconType}
               size="small"
             />
           )}
-          <Truncate>{children}</Truncate>
+          <Truncate line={line} wordBreak={wordBreak}>
+            {children}
+          </Truncate>
 
           {dismissable && size !== 'small' && (
             <CloseIcon
               classNames={{
                 icon: css.dismissIcon,
-                button: css.dismissIconWrapper,
+                button: classify(
+                  {
+                    [css.alignTop]: line > 1,
+                  },
+                  css.dismissIconWrapper,
+                ),
               }}
               type={iconType}
               size="small"

package/lib/components/Chip/Chip.js

@@ -36,6 +36,8 @@ const Chip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onDismiss = () => null,
     onClick,
     disabled,
+    line = 1,
+    wordBreak,
     disableHoverState = !onClick,
     // There is no reason for hover state to be active when there is no click handler attached
     ...restProps
@@ -95,14 +97,21 @@ const Chip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     },
     disabled: disabled
   }), iconName && size !== 'small' && /*#__PURE__*/React.createElement(_Icon.Icon, {
-    className: (0, _classify.classify)(_ChipModule.default.chipIcon, classNames?.icon),
+    className: (0, _classify.classify)(_ChipModule.default.chipIcon, {
+      [_ChipModule.default.alignTop]: line > 1
+    }, classNames?.icon),
     name: iconName,
     type: iconType,
     size: "small"
-  }), /*#__PURE__*/React.createElement(_Truncate.Truncate, null, children), dismissable && size !== 'small' && /*#__PURE__*/React.createElement(_Icon.CloseIcon, {
+  }), /*#__PURE__*/React.createElement(_Truncate.Truncate, {
+    line: line,
+    wordBreak: wordBreak
+  }, children), dismissable && size !== 'small' && /*#__PURE__*/React.createElement(_Icon.CloseIcon, {
     classNames: {
       icon: _ChipModule.default.dismissIcon,
-      button: _ChipModule.default.dismissIconWrapper
+      button: (0, _classify.classify)({
+        [_ChipModule.default.alignTop]: line > 1
+      }, _ChipModule.default.dismissIconWrapper)
     },
     type: iconType,
     size: "small",

package/lib/components/Chip/Chip.js.flow

@@ -35,6 +35,8 @@ export type BaseChipProps = {
   disabled?: boolean,
   showStatusIndicator?: boolean,
   disableHoverState?: boolean,
+  line?: number,
+  wordBreak?: string,
   onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
   onMouseEnter?: ?(SyntheticEvent<HTMLElement>) => mixed,
   onMouseLeave?: ?(SyntheticEvent<HTMLElement>) => mixed,
@@ -76,6 +78,8 @@ export const Chip: React$AbstractComponent<ChipProps, HTMLDivElement> =
         onDismiss = () => null,
         onClick,
         disabled,
+        line = 1,
+        wordBreak,
         disableHoverState = !onClick, // There is no reason for hover state to be active when there is no click handler attached
         ...restProps
       }: ChipProps,
@@ -149,19 +153,28 @@ export const Chip: React$AbstractComponent<ChipProps, HTMLDivElement> =
 
           {iconName && size !== 'small' && (
             <Icon
-              className={classify(css.chipIcon, classNames?.icon)}
+              className={classify(
+                css.chipIcon,
+                {[css.alignTop]: line > 1},
+                classNames?.icon,
+              )}
               name={iconName}
               type={iconType}
               size="small"
             />
           )}
-          <Truncate>{children}</Truncate>
+          <Truncate line={line} wordBreak={wordBreak}>
+            {children}
+          </Truncate>
 
           {dismissable && size !== 'small' && (
             <CloseIcon
               classNames={{
                 icon: css.dismissIcon,
-                button: css.dismissIconWrapper,
+                button: classify(
+                  {[css.alignTop]: line > 1},
+                  css.dismissIconWrapper,
+                ),
               }}
               type={iconType}
               size="small"

package/lib/components/Chip/Chip.module.css

@@ -16,7 +16,6 @@
   colorFocusPrimary
 ) from '../../styles/variables/_color.css';
 @value (
-  spaceNone,
   spaceXXSmall,
   spaceXSmall,
   spaceSmall
@@ -55,20 +54,17 @@
 }
 
 .large {
-  padding: spaceNone spaceSmall;
-  height: size34;
+  padding: spaceXSmall spaceSmall;
   min-height: size34;
 }
 
 .medium {
-  height: size26;
   min-height: size26;
-  padding: spaceNone spaceSmall;
+  padding: spaceXXSmall spaceSmall;
 }
 
 .small {
-  padding: spaceNone spaceXSmall;
-  height: size18;
+  padding: calc(spaceXXSmall / 2) spaceXSmall;
   min-height: size18;
 }
 
@@ -126,11 +122,11 @@
 }
 
 .withIcon {
-  padding: spaceNone spaceSmall spaceNone spaceXSmall;
+  padding: spaceXXSmall spaceSmall spaceXXSmall spaceXSmall;
 }
 
 .dismissable {
-  padding: spaceNone spaceXSmall spaceNone spaceSmall;
+  padding: spaceXXSmall spaceXSmall spaceXXSmall spaceSmall;
 }
 
 .dismissIconWrapper {
@@ -142,6 +138,10 @@
   margin-right: spaceXXSmall;
 }
 
+.alignTop {
+  align-self: flex-start;
+}
+
 /* This should be last section for CSS Specificity  */
 
 .disabled {

package/lib/components/Icon/ClickableIcon.d.ts

@@ -27,7 +27,7 @@ export const ClickableIcon: React$AbstractComponent<
       className,
       // Deprecated for Clickable Icon
       classNames,
-      disabled,
+      disabled = false,
       ...props
     }: ClickableIconProps,
     ref,

package/lib/components/Icon/ClickableIcon.js

@@ -22,7 +22,7 @@ const ClickableIcon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     className,
     // Deprecated for Clickable Icon
     classNames,
-    disabled,
+    disabled = false,
     ...props
   } = _ref;
   const onKeyDownHandler = e => {

package/lib/components/Icon/ClickableIcon.js.flow

@@ -35,7 +35,7 @@ export const ClickableIcon: React$AbstractComponent<
       onClick,
       className, // Deprecated for Clickable Icon
       classNames,
-      disabled,
+      disabled = false,
       ...props
     }: ClickableIconProps,
     ref,

package/lib/components/StatusIndicator/StatusIndicator.module.css

@@ -5,6 +5,7 @@
   colorTextDanger,
   colorTextNeutral,
   colorBackgroundTertiary,
+  colorFillPrimary,
   colorTextPrimary,
   colorTextDisabled
 ) from '../../styles/variables/_color.css';
@@ -16,7 +17,9 @@
   display: flex;
   color: colorFillPrimary;
   width: size8;
+  min-width: size8;
   height: size8;
+  min-height: size8;
   border-radius: borderRadiusCircle;
   background-color: colorTextPrimary;
   box-sizing: content-box;

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

@@ -125,6 +125,7 @@ export function DefaultRow<T extends GenericObject, U extends GenericObject>({
             data={data}
             extras={extras}
             selected={selected}
+            disabled={disabled}
             className={classify({
               [css.stickyCell]: sticky,
             })}

package/lib/components/Table/DefaultRow.js

@@ -85,6 +85,7 @@ function DefaultRow(_ref2) {
       data: data,
       extras: extras,
       selected: selected,
+      disabled: disabled,
       className: (0, _classify.default)({
         [_TableModule.default.stickyCell]: sticky
       })

package/lib/components/Table/DefaultRow.js.flow

@@ -135,6 +135,7 @@ export function DefaultRow<T: GenericObject, U: GenericObject>({
             data={data}
             extras={extras}
             selected={selected}
+            disabled={disabled}
             className={classify({[css.stickyCell]: sticky})}
           />
         ) : (

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

@@ -29,6 +29,7 @@ export type GenericHeaderItem<
     extras?: U;
     className?: string;
     selected?: boolean;
+    disabled?: boolean;
   }>;
 };
 export type GenericHeaderItems<T, U> = GenericHeaderItem<T, U>[];

package/lib/components/Table/DefaultTableHeader.js.flow

@@ -32,6 +32,7 @@ export type GenericHeaderItem<T: GenericObject, U: GenericObject> = {
     extras?: U,
     className?: string,
     selected?: boolean,
+    disabled?: boolean,
   }>,
 };
 

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

@@ -55,6 +55,7 @@ export function StaticTable<
     sortKey,
     sortDirection,
     selectedKeys,
+    disabledKeys = [],
     onSelect,
     isLoading,
     idName = 'id',
@@ -159,7 +160,13 @@ export function StaticTable<
 
               data as Data;
               const selected =
-                selectedKeys?.includes(get(data, idName)) ?? undefined;
+                selectedKeys && Array.isArray(selectedKeys)
+                  ? selectedKeys.includes(get(data, idName))
+                  : undefined;
+              const isRowDisabled =
+                disabledKeys && Array.isArray(disabledKeys)
+                  ? disabledKeys.includes(get(data, idName))
+                  : false;
               return TableRow ? (
                 <TableRow
                   key={key}
@@ -168,7 +175,7 @@ export function StaticTable<
                   extras={extras}
                   sortedKeys={rowKeys ?? mappedKeys}
                   selected={selected}
-                  disabled={disabled}
+                  disabled={disabled || isRowDisabled}
                 />
               ) : (
                 <DefaultRow
@@ -182,7 +189,7 @@ export function StaticTable<
                       ? (_v) => onSelect?.(xor(selectedKeys ?? [], [key]))
                       : undefined
                   }
-                  disabled={disabled}
+                  disabled={disabled || isRowDisabled}
                   classNames={{
                     tableRow: classNames?.tableRow,
                     checkbox: classNames?.checkbox,

package/lib/components/Table/StaticTable.js

@@ -51,6 +51,7 @@ function StaticTable(props) {
     sortKey,
     sortDirection,
     selectedKeys,
+    disabledKeys = [],
     onSelect,
     isLoading,
     idName = 'id',
@@ -128,7 +129,8 @@ function StaticTable(props) {
       return null;
     }
     data;
-    const selected = selectedKeys?.includes((0, _get.default)(data, idName)) ?? undefined;
+    const selected = selectedKeys && Array.isArray(selectedKeys) ? selectedKeys.includes((0, _get.default)(data, idName)) : undefined;
+    const isRowDisabled = disabledKeys && Array.isArray(disabledKeys) ? disabledKeys.includes((0, _get.default)(data, idName)) : false;
     return TableRow ? /*#__PURE__*/React.createElement(TableRow, {
       key: key,
       data: data,
@@ -138,7 +140,7 @@ function StaticTable(props) {
       extras: extras,
       sortedKeys: rowKeys ?? mappedKeys,
       selected: selected,
-      disabled: disabled
+      disabled: disabled || isRowDisabled
     }) : /*#__PURE__*/React.createElement(_DefaultRow.DefaultRow, {
       key: key,
       data: data,
@@ -146,7 +148,7 @@ function StaticTable(props) {
       headers: headers,
       selected: selected,
       onSelect: selectedKeys != null ? _v => onSelect?.((0, _xor.default)(selectedKeys ?? [], [key])) : undefined,
-      disabled: disabled,
+      disabled: disabled || isRowDisabled,
       classNames: {
         tableRow: classNames?.tableRow,
         checkbox: classNames?.checkbox

package/lib/components/Table/StaticTable.js.flow

@@ -60,6 +60,7 @@ export function StaticTable<Data: GenericObject, Extras: GenericObject>(props: {
     sortKey,
     sortDirection,
     selectedKeys,
+    disabledKeys = [],
     onSelect,
     isLoading,
     idName = 'id',
@@ -104,7 +105,6 @@ export function StaticTable<Data: GenericObject, Extras: GenericObject>(props: {
       }
     }
     : undefined;
-
   return (
     <div
       className={classify(css.tableContainer, classNames?.wrapper)}
@@ -165,7 +165,13 @@ export function StaticTable<Data: GenericObject, Extras: GenericObject>(props: {
               }
               (data: Data);
               const selected =
-                selectedKeys?.includes(get(data, idName)) ?? undefined;
+                selectedKeys && Array.isArray(selectedKeys)
+                  ? selectedKeys.includes(get(data, idName))
+                  : undefined;
+              const isRowDisabled =
+                disabledKeys && Array.isArray(disabledKeys)
+                  ? disabledKeys.includes(get(data, idName))
+                  : false;
 
               return TableRow ? (
                 <TableRow
@@ -176,7 +182,7 @@ export function StaticTable<Data: GenericObject, Extras: GenericObject>(props: {
                   extras={extras}
                   sortedKeys={rowKeys ?? mappedKeys}
                   selected={selected}
-                  disabled={disabled}
+                  disabled={disabled || isRowDisabled}
                 />
               ) : (
                 <DefaultRow
@@ -190,7 +196,7 @@ export function StaticTable<Data: GenericObject, Extras: GenericObject>(props: {
                       ? (_v) => onSelect?.(xor(selectedKeys ?? [], [key]))
                       : undefined
                   }
-                  disabled={disabled}
+                  disabled={disabled || isRowDisabled}
                   classNames={{
                     tableRow: classNames?.tableRow,
                     checkbox: classNames?.checkbox,

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

@@ -31,6 +31,7 @@ export type TableProps<T, U> = {
   // Please start using this prop if you want internal sorting to work in the table
   enableInternalSorting?: boolean;
   selectedKeys?: string[];
+  disabledKeys?: string[];
   onSelect?: (keys: string[]) => unknown;
   idName?: $Keys<T>;
   onSort?: (key: $Keys<T>, direction: SortDirection) => void;

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

@@ -116,6 +116,18 @@ export const TABLE_DOCS = {
         },
       },
     },
+    disabledKeys: {
+      description:
+        'array of keys which are disabled. This prop is used to disable the checkbox and its events for particular rows.',
+      control: {
+        type: 'object',
+      },
+      table: {
+        type: {
+          summary: 'string[]',
+        },
+      },
+    },
     //onSelect?: (keys: string[]) => mixed
     onSelect: {
       description: 'callback function when any row is selected',

package/lib/components/Table/Table.docs.js

@@ -114,6 +114,17 @@ const TABLE_DOCS = {
         }
       }
     },
+    disabledKeys: {
+      description: 'array of keys which are disabled. This prop is used to disable the checkbox and its events for particular rows.',
+      control: {
+        type: 'object'
+      },
+      table: {
+        type: {
+          summary: 'string[]'
+        }
+      }
+    },
     //onSelect?: (keys: string[]) => mixed
     onSelect: {
       description: 'callback function when any row is selected',

package/lib/components/Table/Table.docs.js.flow

@@ -97,6 +97,16 @@ export const TABLE_DOCS = {
         type: {summary: 'string[]'},
       },
     },
+    disabledKeys: {
+      description:
+        'array of keys which are disabled. This prop is used to disable the checkbox and its events for particular rows.',
+      control: {
+        type: 'object',
+      },
+      table: {
+        type: {summary: 'string[]'},
+      },
+    },
     //onSelect?: (keys: string[]) => mixed
     onSelect: {
       description: 'callback function when any row is selected',

package/lib/components/Table/Table.js.flow

@@ -45,6 +45,7 @@ export type TableProps<T, U> = {
   enableInternalSorting?: boolean,
 
   selectedKeys?: string[],
+  disabledKeys?: string[],
   onSelect?: (keys: string[]) => mixed,
 
   idName?: $Keys<T>,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.3.40-beta.0",
+  "version": "0.3.41",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {