@spaced-out/ui-design-system 0.5.18 → 0.5.20

package/.cspell/custom-words.txt

@@ -83,6 +83,7 @@ Mahe
 Manaus
 Minh
 Moresby
+modelcontextprotocol
 msword
 multiarbitrary
 Neue
@@ -150,6 +151,7 @@ Verda
 viewports
 vish
 VishalBarnawal
+Vishwanath
 Vivek
 voiceflow
 WCAG

package/.github/workflows/publish-mcp.yml

@@ -0,0 +1,81 @@
+# Author: Vishwanath
+# Publishes the Genesis MCP Server to NPM when design system changes
+
+name: Publish MCP Server to NPM
+
+on:
+  # Run after the main NPM publish workflow completes successfully
+  workflow_run:
+    workflows: ['Release Genesis to NPM']
+    types:
+      - completed
+    branches: [master]
+  workflow_dispatch:
+
+jobs:
+  publish-mcp:
+    runs-on: ubuntu-latest
+    # Only run if triggered manually or if the workflow_run succeeded
+    if: ${{ github.event_name != 'workflow_run' || github.event.workflow_run.conclusion == 'success' }}
+    steps:
+      - name: Check Permissions
+        id: check-permissions
+        env:
+          ALLOWED_USERS: superrover, Anant-Raj, diwakersurya, ashwini-sensehq, vish-sah, VishalBarnawal, sanskar-s, VivekJangid, sharad-kushwah, Swatantramishra1, bhatiarush27, darsh-mecwan-sense, keshavsensehq, SahilShrivastava1, aditya-kaushal, LakshayKumar-1
+        if: ${{ !contains(env.ALLOWED_USERS, github.actor) }}
+        run: |
+          echo "You don't have correct permissions to publish the MCP server"
+          exit 1
+
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          token: ${{ secrets.NPM_PUBLISH_USER_ACCESS_TOKEN }}
+          fetch-depth: 0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          registry-url: https://registry.npmjs.org/
+          node-version: '22.18.0'
+
+      - name: Git configuration
+        run: |
+          git config --global user.email "86281150+superrover@users.noreply.github.com"
+          git config --global user.name "Nishant Gaurav"
+
+      - name: Install main dependencies
+        run: yarn install
+
+      - name: Install MCP dependencies
+        working-directory: ./mcp
+        run: yarn install
+
+      - name: Auto-bump patch version
+        if: github.event_name == 'workflow_run'
+        working-directory: ./mcp
+        run: |
+          echo "📦 Auto-bumping patch version after design system publish"
+          yarn version --patch --no-git-tag-version
+          NEW_VERSION=$(node -p "require('./package.json').version")
+          echo "New version: $NEW_VERSION"
+          echo "MCP_VERSION=$NEW_VERSION" >> $GITHUB_ENV
+
+      - name: Build MCP data
+        working-directory: ./mcp
+        run: yarn build
+
+      - name: Commit version bump
+        if: github.event_name == 'workflow_run'
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          git add mcp/package.json mcp/yarn.lock
+          git commit -m "chore(release-mcp): ${{ env.MCP_VERSION }} [skip ci]"
+          git push origin master
+
+      - name: Publish to NPM
+        working-directory: ./mcp
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_PUBLISH_TOKEN }}
+        run: yarn publish --verbose --access public

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 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.20](https://github.com/spaced-out/ui-design-system/compare/v0.5.19...v0.5.20) (2025-11-11)
+
+
+### Features
+
+* non editable prefix text in Input component ([#427](https://github.com/spaced-out/ui-design-system/issues/427)) ([d9b3830](https://github.com/spaced-out/ui-design-system/commit/d9b3830fbef230895f457ecc33b04355707b2654))
+
+### [0.5.19](https://github.com/spaced-out/ui-design-system/compare/v0.5.18...v0.5.19) (2025-11-11)
+
+
+### Features
+
+* add Genesis MCP server with automated publishing ([#421](https://github.com/spaced-out/ui-design-system/issues/421)) ([f8ae05c](https://github.com/spaced-out/ui-design-system/commit/f8ae05c3e0344eccbaad33c394bd68711afa8579))
+* template card ([#426](https://github.com/spaced-out/ui-design-system/issues/426)) ([ba803e3](https://github.com/spaced-out/ui-design-system/commit/ba803e3adf17096cbae849a7961b44848bd8443a))
+* wrap prop added in prompt chip ([#423](https://github.com/spaced-out/ui-design-system/issues/423)) ([25f60c4](https://github.com/spaced-out/ui-design-system/commit/25f60c4e82b9a177033dedca108dae3faed1a16c))
+
 ### [0.5.18](https://github.com/spaced-out/ui-design-system/compare/v0.5.17...v0.5.18) (2025-11-11)
 
 

package/COMPONENT_PROMPT_TEMPLATE.md

@@ -0,0 +1,223 @@
+# Genesis Design System - Component Implementation Prompt Template
+
+Use this template when creating new components to ensure proper integration with the Genesis Design System MCP server.
+
+---
+
+## Component Implementation Request
+
+### Component Name
+
+**[ComponentName]** (e.g., "TemplateCard", "StatusBadge", "AlertDialog")
+
+### Design Reference
+
+Implement this design from Figma:
+@[Figma URL with node-id]
+
+**Additional References (if applicable):**
+
+- Component states: @[Figma URL]
+- Component anatomy: @[Figma URL]
+- Interactions: @[Figma URL]
+
+---
+
+## Genesis Design System Integration
+
+### 1. Check Similar Components First
+
+Before starting, review existing Genesis components for patterns:
+
+- [List similar components to check, e.g., "Card", "Icon", "Button"]
+
+**Ask:** "What similar components exist in Genesis?"
+
+### 2. Identify Reusable Components & Types
+
+This component will use:
+
+- [ ] Icon component → Query for `IconType`, `IconSize` exports
+- [ ] Button component → Query for `ButtonProps`, button variants
+- [ ] [Other components] → Check their exported types
+
+**Ask:** "What types does [Component] export?"
+
+### 3. Implementation Checklist
+
+Before implementing:
+
+- [ ] Call `get_css_module_guidelines` for CSS best practices
+- [ ] Call `get_component` for each component you'll use (to get exported types)
+- [ ] Call `get_design_tokens` for relevant categories (color, space, size, etc.)
+- [ ] Review similar component's CSS for state/modifier patterns
+
+---
+
+## Component Specifications
+
+### TypeScript Requirements ⚠️
+
+**IMPORTANT**: Use **pure TypeScript** only. Do NOT use Flow types.
+
+- ❌ **NO** `Flow.AbstractComponent`
+- ❌ **NO** `import type {Flow} from 'flow-to-typescript-codemod'`
+- ✅ **YES** `React.forwardRef<HTMLDivElement, Props>`
+
+**Correct TypeScript Pattern:**
+
+```typescript
+export const ComponentName = React.forwardRef<
+  HTMLDivElement,
+  ComponentNameProps
+>(({prop1, prop2, ...props}, ref) => (
+  <div ref={ref} {...props}>
+    {/* component content */}
+  </div>
+));
+```
+
+### Props Interface
+
+Define the component props clearly:
+
+```typescript
+export interface [ComponentName]Props {
+  // List each prop with:
+  // - name: type - description
+  // - Indicate if using imported types from other components
+
+  classNames?: ClassNames;        // Standard Genesis pattern
+  testId?: string;                // Standard Genesis pattern
+}
+```
+
+**Example:**
+
+```typescript
+export interface TemplateCardProps {
+  headerColor?: HeaderColorType; // Custom type for this component
+  iconName: string; // Use string, render Icon internally
+  iconType?: IconType; // ✅ Import from Icon component
+  footer?: React.ReactNode; // Flexible content
+  children?: React.ReactNode; // Flexible content
+}
+```
+
+### Component Structure
+
+Describe the component's structure:
+
+1. **[Section Name]**: Description
+
+   - Details about this section
+   - Behavior notes
+
+2. **[Another Section]**: Description
+   - Details
+
+### Behavior & Interactions
+
+- [Describe interactive behavior]
+- [Describe state management]
+- [Describe accessibility requirements]
+
+### Content Philosophy
+
+Specify which parts are:
+
+- **Fixed structure** (controlled by component)
+- **Flexible content** (user provides via props)
+
+**Important:** Keep all content demonstrations in Storybook stories only, not in the component implementation.
+
+---
+
+## States/Variants
+
+List all component states or variants:
+
+- State 1: Description
+- State 2: Description
+- Default state
+
+---
+
+## Special Instructions
+
+Any component-specific requirements or constraints:
+
+- [Special requirement 1]
+- [Special requirement 2]
+
+---
+
+## Example Implementation
+
+Provide any code examples or patterns to follow:
+
+```typescript
+// Example pattern to follow
+```
+
+---
+
+## Notes
+
+- **Use TypeScript only** (NO Flow types like `Flow.AbstractComponent`)
+- Follow all Genesis Design System patterns (accessible via MCP)
+- Use design tokens for all values (no hardcoded pixels/colors)
+- Reuse exported types from existing components
+- Test all states in Storybook
+
+---
+
+## Why This Template Works
+
+### MCP Server Integration
+
+This template is designed to work with the Genesis MCP server which provides:
+
+- **`get_css_module_guidelines`** - CSS best practices and patterns
+- **`get_component`** - Component details including exported types
+- **`get_design_tokens`** - Available design tokens by category
+- **`get_component_template`** - Template files for new components
+
+### Key Benefits
+
+1. **Pure TypeScript**: All new components use modern TypeScript patterns (no Flow)
+2. **Type Reuse**: Automatically discover and import existing types
+3. **Pattern Consistency**: Follow established CSS and component patterns
+4. **Token Usage**: Use design tokens instead of hardcoded values
+5. **Guided Implementation**: Checklist ensures nothing is missed
+
+### Magic Phrases
+
+Include these in your prompts to trigger MCP usage:
+
+- ✅ "Query [Component] for exported types"
+- ✅ "Call get_css_module_guidelines before creating CSS"
+- ✅ "Compare with [SimilarComponent].module.css for patterns"
+- ✅ "Use design tokens (check get_design_tokens)"
+- ✅ "Import [Type] from [Component] (don't redefine)"
+
+---
+
+## Quick Start
+
+For any new component:
+
+1. **Discovery Phase:**
+
+   ```
+   "What similar components exist in Genesis?"
+   "What types does Icon/Button/[Component] export?"
+   "Show me CSS Module guidelines"
+   "What design tokens are available for colors/spacing/sizes?"
+   ```
+
+2. **Fill out this template** with your specific requirements
+
+3. **Provide to AI** with all Figma links and specifications
+
+4. **Review implementation** against Genesis patterns

package/lib/components/Input/Input.d.ts

@@ -6,6 +6,7 @@ type ClassNames = Readonly<{
     iconLeft?: string;
     iconRight?: string;
     wrapper?: string;
+    prefixText?: string;
 }>;
 export declare const EXPONENT_CHARACTER_LIST: string[];
 export declare const INPUT_TYPES: Readonly<{
@@ -72,6 +73,7 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     hidePasswordToggleIcon?: boolean;
     testId?: string;
     disableWheelPropagation?: boolean;
+    prefix?: string;
 }
 export declare const Input: Flow.AbstractComponent<InputProps, HTMLInputElement>;
 export {};

package/lib/components/Input/Input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"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"}

package/lib/components/Input/Input.js

@@ -5,8 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Input = exports.INPUT_TYPES = exports.EXPONENT_CHARACTER_LIST = void 0;
 var React = _interopRequireWildcard(require("react"));
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 var _classify = require("../../utils/classify");
 var _qa = require("../../utils/qa");
+var _ConditionalWrapper = require("../ConditionalWrapper");
 var _Icon = require("../Icon");
 var _Text = require("../Text");
 var _InputModule = _interopRequireDefault(require("./Input.module.css"));
@@ -61,6 +63,7 @@ const Input_ = (props, ref) => {
     hidePasswordToggleIcon,
     disableWheelPropagation = false,
     testId,
+    prefix,
     ...inputProps
   } = props;
   const [showPassword, setShowPassword] = React.useState(false);
@@ -159,23 +162,41 @@ const Input_ = (props, ref) => {
         color: disabled ? 'disabled' : 'secondary',
         size: "small",
         type: iconLeftType
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-        ...inputProps,
-        "data-testid": (0, _qa.generateTestId)({
-          base: testId,
-          slot: 'input'
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.ConditionalWrapper, {
+        condition: !(0, _isEmpty.default)(prefix),
+        wrapper: children => /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+          className: _InputModule.default.prefixContainer,
+          "data-testid": (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'prefixContainer'
+          }),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: (0, _classify.classify)(_InputModule.default.prefixText, classNames?.prefixText),
+            "data-testid": (0, _qa.generateTestId)({
+              base: testId,
+              slot: 'prefixText'
+            }),
+            children: prefix
+          }), children]
         }),
-        disabled: locked || disabled,
-        name: name,
-        ref: inputRef,
-        placeholder: placeholder,
-        value: value,
-        onChange: onChange,
-        onFocus: onFocus,
-        onBlur: onBlur,
-        type: showPassword ? 'text' : type,
-        readOnly: readOnly,
-        onKeyDown: handleKeyDown
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+          ...inputProps,
+          "data-testid": (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'input'
+          }),
+          disabled: locked || disabled,
+          name: name,
+          ref: inputRef,
+          placeholder: placeholder,
+          value: value,
+          onChange: onChange,
+          onFocus: onFocus,
+          onBlur: onBlur,
+          type: showPassword ? 'text' : type,
+          readOnly: readOnly,
+          onKeyDown: handleKeyDown
+        })
       }), type === 'color' && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         "data-testid": (0, _qa.generateTestId)({
           base: testId,

package/lib/components/Input/Input.module.css

@@ -1,4 +1,5 @@
 @value (
+  size2,
   size18,
   size42,
   size30,
@@ -184,3 +185,21 @@ input::placeholder {
   appearance: textfield;
   -moz-appearance: textfield;
 }
+
+.prefixContainer {
+  display: flex;
+  width: sizeFluid;
+  cursor: inherit;
+  padding-left: size2;
+  overflow-y: auto;
+
+  & .prefixText {
+    color: colorTextTertiary;
+    white-space: nowrap;
+  }
+
+  & input {
+    padding-left: spaceNone;
+    min-width: size18;
+  }
+}

package/lib/components/PromptChip/PromptChip.d.ts

@@ -37,6 +37,7 @@ export type PromptChipProps = {
     rightSlot?: React.ReactNode;
     showInfoIcon?: boolean;
     infoIconTooltip?: BaseTooltipProps;
+    isMultiline?: boolean;
 };
 export declare const PromptChip: Flow.AbstractComponent<PromptChipProps, HTMLDivElement>;
 export {};

package/lib/components/PromptChip/PromptChip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PromptChip.d.ts","sourceRoot":"","sources":["../../../src/components/PromptChip/PromptChip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAErD,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAC;AAMrD,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,qBAAqB,CAAC;AAElD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,wBAAwB,CAAC;AAM7D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;EAG3B,CAAC;AAEH,MAAM,MAAM,cAAc,GACxB,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,OAAO,gBAAgB,CAAC,CAAC;AAC3D,MAAM,MAAM,eAAe,GAAG;IAC5B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,GAAG,CACA;IACE,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAAK,OAAO,CAAC;IAC9D,WAAW,EAAE,IAAI,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,GACD;IACE,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB,CACJ,GAAG;IACA,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EACJ,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAAK,OAAO,CAAC,GACtD,IAAI,GACJ,SAAS,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,gBAAgB,CAAC;CACpC,CAAC;AAEJ,eAAO,MAAM,UAAU,EAAE,IAAI,CAAC,iBAAiB,CAC7C,eAAe,EACf,cAAc,CA6If,CAAC"}
+{"version":3,"file":"PromptChip.d.ts","sourceRoot":"","sources":["../../../src/components/PromptChip/PromptChip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAErD,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAC;AAMrD,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,qBAAqB,CAAC;AAElD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,wBAAwB,CAAC;AAM7D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;EAG3B,CAAC;AAEH,MAAM,MAAM,cAAc,GACxB,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,OAAO,gBAAgB,CAAC,CAAC;AAC3D,MAAM,MAAM,eAAe,GAAG;IAC5B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,GAAG,CACA;IACE,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAAK,OAAO,CAAC;IAC9D,WAAW,EAAE,IAAI,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,GACD;IACE,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB,CACJ,GAAG;IACA,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EACJ,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAAK,OAAO,CAAC,GACtD,IAAI,GACJ,SAAS,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,gBAAgB,CAAC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEJ,eAAO,MAAM,UAAU,EAAE,IAAI,CAAC,iBAAiB,CAC7C,eAAe,EACf,cAAc,CA+If,CAAC"}

package/lib/components/PromptChip/PromptChip.js

@@ -32,7 +32,8 @@ const PromptChip = exports.PromptChip = /*#__PURE__*/React.forwardRef((props, re
     dismissable,
     showInfoIcon,
     infoIconTooltip,
-    testId
+    testId,
+    isMultiline
   } = props;
   // Type narrowing to safely access properties only when they exist
   const onDismiss = dismissable === true && 'onDismiss' in props ? props.onDismiss : undefined;
@@ -63,19 +64,20 @@ const PromptChip = exports.PromptChip = /*#__PURE__*/React.forwardRef((props, re
       role: "button",
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: (0, _classify.classify)(_PromptChipModule.default.promptChipContainer, {
-          [_PromptChipModule.default.promptChipContainerHover]: !!onClick
+          [_PromptChipModule.default.promptChipContainerHover]: !!onClick,
+          [_PromptChipModule.default.multilinePromptChipContainer]: !!isMultiline
         }, classNames?.container),
         "data-testid": (0, _qa.generateTestId)({
           base: testId,
           slot: 'content'
         }),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: (0, _classify.classify)(_PromptChipModule.default.leftSection, classNames?.leftSlot),
           "data-testid": (0, _qa.generateTestId)({
             base: testId,
             slot: 'left'
           }),
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
             size: _Icon.ICON_SIZE.small,
             name: iconName,
             type: iconType,
@@ -87,14 +89,14 @@ const PromptChip = exports.PromptChip = /*#__PURE__*/React.forwardRef((props, re
               base: testId,
               slot: 'icon'
             })
-          }), !!children && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: (0, _classify.classify)(_PromptChipModule.default.childrenWrapper, classNames?.children),
-            "data-testid": (0, _qa.generateTestId)({
-              base: testId,
-              slot: 'text'
-            }),
-            children: children
-          })]
+          })
+        }), !!children && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: (0, _classify.classify)(_PromptChipModule.default.childrenWrapper, classNames?.children),
+          "data-testid": (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'text'
+          }),
+          children: children
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: (0, _classify.classify)(_PromptChipModule.default.rightSection, classNames?.rightSlot),
           "data-testid": (0, _qa.generateTestId)({