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

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,15 @@
 
 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.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/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)({

package/lib/components/PromptChip/PromptChip.module.css

@@ -1,29 +1,32 @@
 @value (
-    spaceSmall,
-    spaceXSmall,
-    spaceFluid
+  spaceSmall,
+  spaceXSmall,
+  spaceFluid
 ) from '../../styles/variables/_space.css';
+
 @value (
-    colorDataViz2,
-    colorFillPrimary,
-    colorInformation,
-    colorFocusPrimary,
-    colorFillSecondary,
-    colorTextClickable,
-    colorNeutralLightest,
-    colorBackgroundTertiary,
-    colorInformationLightest
- ) from '../../styles/variables/_color.css';
+  colorDataViz2,
+  colorFillPrimary,
+  colorInformation,
+  colorFocusPrimary,
+  colorFillSecondary,
+  colorTextClickable,
+  colorNeutralLightest,
+  colorBackgroundTertiary,
+  colorInformationLightest
+) from '../../styles/variables/_color.css';
+
 @value (
-    borderWidthNone,  
-    borderRadiusMedium,
-    borderWidthPrimary,
-    borderWidthTertiary
- ) from '../../styles/variables/_border.css';
+  borderWidthNone,
+  borderRadiusMedium,
+  borderWidthPrimary,
+  borderWidthTertiary
+) from '../../styles/variables/_border.css';
+
 @value (
-    opacity0,
-    opacity100
- ) from '../../styles/variables/_opacity.css';
+  opacity0,
+  opacity100
+) from '../../styles/variables/_opacity.css';
 
 .promptChipWrapper {
   composes: boxShadow2 from '../../styles/shadow.module.css';
@@ -53,41 +56,70 @@
   background-color: colorNeutralLightest;
 }
 
+/* ---- Grid Layout for Content ---- */
 .promptChipContainer {
-  display: flex;
+  display: grid;
   width: spaceFluid;
   gap: spaceSmall;
   padding: spaceXSmall;
   padding-left: spaceSmall;
   align-items: center;
   border-radius: borderRadiusMedium;
-  justify-content: space-between;
 
-  & .chipIconDefaultColor {
+  .chipIconDefaultColor {
     color: colorDataViz2;
   }
-}
 
-.promptChipContainerHover:hover {
-  background-image: linear-gradient(
-    to right,
-    colorFillSecondary,
-    colorInformationLightest
-  );
-  cursor: pointer;
-
-  & .chipIconDefaultColor {
-    color: colorTextClickable;
+  /* 
+    NORMAL MODE (when isMultiline={false}):
+    - single row, 3 columns: icon | children | right
+  */
+  &:not(.multilinePromptChipContainer) {
+    grid-template-columns: auto 1fr auto;
+    grid-template-areas: 'leftSection childrenWrapper rightSection';
+  }
+
+  /*
+    MULTILINE MODE (when isMultiline={true}):
+    - 2 rows: first row for icon (leftSection) and actions (rightSection)
+    - children on second row spanning full width
+  */
+  &.multilinePromptChipContainer {
+    grid-template-columns: auto 1fr auto;
+    grid-template-areas:
+      'leftSection . rightSection'
+      'childrenWrapper childrenWrapper childrenWrapper';
+  }
+
+  &.promptChipContainerHover:hover {
+    background-image: linear-gradient(
+      to right,
+      colorFillSecondary,
+      colorInformationLightest
+    );
+    cursor: pointer;
+
+    .chipIconDefaultColor {
+      color: colorTextClickable;
+    }
   }
 }
 
-.leftSection,
-.rightSection {
+.leftSection {
+  grid-area: leftSection;
   display: flex;
   gap: spaceSmall;
   align-items: center;
 }
 
 .childrenWrapper {
+  grid-area: childrenWrapper;
   composes: bodyMedium from '../../styles/typography.module.css';
 }
+
+.rightSection {
+  grid-area: rightSection;
+  display: flex;
+  gap: spaceSmall;
+  align-items: center;
+}

package/lib/components/TemplateCard/TemplateCard.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import type { IconType } from '../../components/Icon';
+export declare const TEMPLATE_CARD_HEADER_COLOR: Readonly<{
+    information: "information";
+    success: "success";
+    warning: "warning";
+    error: "error";
+    neutral: "neutral";
+    pending: "pending";
+}>;
+export type HeaderColorType = (typeof TEMPLATE_CARD_HEADER_COLOR)[keyof typeof TEMPLATE_CARD_HEADER_COLOR];
+type ClassNames = Readonly<{
+    wrapper?: string;
+    header?: string;
+    content?: string;
+    footer?: string;
+}>;
+export interface TemplateCardProps {
+    headerColor?: HeaderColorType;
+    iconName: string;
+    iconType?: IconType;
+    footer?: React.ReactNode;
+    children?: React.ReactNode;
+    classNames?: ClassNames;
+    testId?: string;
+}
+export declare const TemplateCard: React.ForwardRefExoticComponent<TemplateCardProps & React.RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=TemplateCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateCard.d.ts","sourceRoot":"","sources":["../../../src/components/TemplateCard/TemplateCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,qBAAqB,CAAC;AAMlD,eAAO,MAAM,0BAA0B;;;;;;;EAOrC,CAAC;AAEH,MAAM,MAAM,eAAe,GACzB,CAAC,OAAO,0BAA0B,CAAC,CAAC,MAAM,OAAO,0BAA0B,CAAC,CAAC;AAE/E,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC,CAAC;AAEH,MAAM,WAAW,iBAAiB;IAChC,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,YAAY,0FAsExB,CAAC"}

package/lib/components/TemplateCard/TemplateCard.js

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TemplateCard = exports.TEMPLATE_CARD_HEADER_COLOR = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _qa = require("../../utils/qa");
+var _Icon = require("../Icon");
+var _TemplateCardModule = _interopRequireDefault(require("./TemplateCard.module.css"));
+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 TEMPLATE_CARD_HEADER_COLOR = exports.TEMPLATE_CARD_HEADER_COLOR = Object.freeze({
+  information: 'information',
+  success: 'success',
+  warning: 'warning',
+  error: 'error',
+  neutral: 'neutral',
+  pending: 'pending'
+});
+const TemplateCard = exports.TemplateCard = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    headerColor = 'neutral',
+    iconName,
+    iconType = 'solid',
+    footer,
+    children,
+    classNames,
+    testId
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classify.default)(_TemplateCardModule.default.wrapper, classNames?.wrapper),
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'wrapper'
+    }),
+    ref: ref,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classify.default)(_TemplateCardModule.default.header, _TemplateCardModule.default[headerColor], classNames?.header),
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'header'
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classify.default)(_TemplateCardModule.default.iconContainer, _TemplateCardModule.default[headerColor]),
+        "data-testid": (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'icon-container'
+        }),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+          name: iconName,
+          type: iconType,
+          size: "large",
+          className: _TemplateCardModule.default[headerColor],
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'icon'
+          })
+        })
+      })
+    }), children && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classify.default)(_TemplateCardModule.default.content, classNames?.content),
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'content'
+      }),
+      children: children
+    }), footer && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classify.default)(_TemplateCardModule.default.footer, classNames?.footer),
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'footer'
+      }),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: _TemplateCardModule.default.footerSeparator,
+        "data-testid": (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'footer-separator'
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: _TemplateCardModule.default.footerContent,
+        "data-testid": (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'footer-content'
+        }),
+        children: footer
+      })]
+    })]
+  });
+});