@spaced-out/ui-design-system 0.5.17 → 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,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.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)
+
+
+### Features
+
+* **GDS-545:** Checklist AI component ([#425](https://github.com/spaced-out/ui-design-system/issues/425)) ([b2da14e](https://github.com/spaced-out/ui-design-system/commit/b2da14e9a70067943f874d4e504d0186ef905015))
+
 ### [0.5.17](https://github.com/spaced-out/ui-design-system/compare/v0.5.16...v0.5.17) (2025-11-10)
 
 

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/Checklist/Checklist.d.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import type { ColorTypes } from '../../types/typography';
+import type { IconType } from '../../components/Icon';
+type ClassNames = Readonly<{
+    header?: string;
+    wrapper?: string;
+    content?: string;
+    listItemContainer?: string;
+    cardContentContainer?: string;
+}>;
+export interface ChecklistItem {
+    label: React.ReactNode;
+    key: string;
+    iconLeftName?: string;
+    iconLeftType?: IconType;
+    iconLeftColor?: ColorTypes;
+    disabled?: boolean;
+    rightSlot?: React.ReactNode;
+    onExpand?: (item: ChecklistItem) => void;
+}
+export interface ChecklistProps {
+    classNames?: ClassNames;
+    isOpen?: boolean;
+    testId?: string;
+    title: React.ReactNode;
+    rightSlot?: React.ReactNode;
+    footer?: React.ReactNode;
+    listItems: Array<ChecklistItem>;
+    hideChecklistItemExpandButton?: boolean;
+}
+export interface ChecklistProgressBarProps {
+    classNames?: {
+        wrapper?: string;
+        container?: string;
+        bar?: string;
+    };
+    totalItems: number;
+    completedItems: number;
+    showLoadingBar?: boolean;
+}
+export declare const ChecklistProgressBar: React.ForwardRefExoticComponent<ChecklistProgressBarProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Checklist: React.ForwardRefExoticComponent<ChecklistProps & React.RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=Checklist.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checklist.d.ts","sourceRoot":"","sources":["../../../src/components/Checklist/Checklist.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAC;AAMrD,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,qBAAqB,CAAC;AASlD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B,CAAC,CAAC;AAEH,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,QAAQ,CAAC;IACxB,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;CAC1C;AAED,MAAM,WAAW,cAAc;IAC7B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC;IAChC,6BAA6B,CAAC,EAAE,OAAO,CAAC;CACzC;AAED,MAAM,WAAW,yBAAyB;IACxC,UAAU,CAAC,EAAE;QACX,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,GAAG,CAAC,EAAE,MAAM,CAAC;KACd,CAAC;IACF,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,eAAO,MAAM,oBAAoB,kGAiB/B,CAAC;AAEH,eAAO,MAAM,SAAS,uFAwHrB,CAAC"}

package/lib/components/Checklist/Checklist.js

@@ -0,0 +1,146 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChecklistProgressBar = exports.Checklist = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _qa = require("../../utils/qa");
+var _Button = require("../Button");
+var _Card = require("../Card");
+var _Icon = require("../Icon");
+var _Text = require("../Text");
+var _Truncate = require("../Truncate");
+var _TruncatedTextWithTooltip = require("../TruncatedTextWithTooltip");
+var _ChecklistModule = _interopRequireDefault(require("./Checklist.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 ChecklistProgressBar = exports.ChecklistProgressBar = /*#__PURE__*/React.forwardRef(_ref => {
+  let {
+    totalItems,
+    completedItems,
+    showLoadingBar,
+    classNames
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classify.default)(_ChecklistModule.default.checklistProgressBar, classNames?.wrapper),
+    children: [showLoadingBar ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classify.default)(_ChecklistModule.default.progressLinear, classNames?.container),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classify.default)(_ChecklistModule.default.progressLinearBar, classNames?.bar),
+        style: {
+          width: `${Math.min(completedItems / totalItems * 100, 100)}%`
+        }
+      })
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodyMediumBold, {
+      children: `${completedItems} / ${totalItems}`
+    })]
+  });
+});
+const Checklist = exports.Checklist = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+  let {
+    isOpen,
+    classNames,
+    testId,
+    title,
+    rightSlot,
+    footer,
+    listItems = [],
+    hideChecklistItemExpandButton = false
+  } = _ref2;
+  const [collapsibleCardIsOpen, setCollapsibleCardIsOpen] = React.useState(Boolean(isOpen));
+  React.useEffect(() => {
+    setCollapsibleCardIsOpen(Boolean(isOpen));
+  }, [isOpen]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    ref: ref,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'wrapper'
+    }),
+    className: (0, _classify.default)(_ChecklistModule.default.wrapper, classNames?.wrapper),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.UnstyledButton, {
+      className: (0, _classify.default)(_ChecklistModule.default.header, {
+        [_ChecklistModule.default.isOpen]: collapsibleCardIsOpen
+      }, classNames?.header),
+      onClick: () => {
+        setCollapsibleCardIsOpen(!collapsibleCardIsOpen);
+      },
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'header-button'
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: _ChecklistModule.default.headerContent,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: _ChecklistModule.default.titleContainer,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+            name: collapsibleCardIsOpen ? 'chevron-up' : 'chevron-down',
+            color: "secondary",
+            size: "small",
+            testId: (0, _qa.generateTestId)({
+              base: testId,
+              slot: collapsibleCardIsOpen ? 'chevron-up' : 'chevron-down'
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Truncate.Truncate, {
+            testId: (0, _qa.generateTestId)({
+              base: testId,
+              slot: 'title'
+            }),
+            children: title
+          })]
+        }), rightSlot ? rightSlot : null]
+      })
+    }), collapsibleCardIsOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classify.default)(_ChecklistModule.default.content, classNames?.content),
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'content'
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.Card, {
+        classNames: {
+          wrapper: _ChecklistModule.default.cardWrapper
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.CardContent, {
+          className: (0, _classify.default)(_ChecklistModule.default.cardContentContainer, classNames?.cardContentContainer),
+          children: listItems.map(item => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.UnstyledButton, {
+            className: (0, _classify.default)(_ChecklistModule.default.checklistItemContainer, classNames?.listItemContainer),
+            onClick: () => item.onExpand?.(item),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: _ChecklistModule.default.checklistItemLeft,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+                name: item.iconLeftName || '',
+                type: item.iconLeftType,
+                color: item.iconLeftColor || 'tertiary'
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodyMedium, {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TruncatedTextWithTooltip.TruncatedTextWithTooltip, {
+                  tooltip: {
+                    bodyMaxLines: 2,
+                    elevation: 'modal'
+                  },
+                  children: item.label
+                })
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: _ChecklistModule.default.checklistItemRight,
+              children: item.rightSlot ? item.rightSlot : !hideChecklistItemExpandButton ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+                name: "chevron-right",
+                color: "secondary",
+                size: "small",
+                testId: (0, _qa.generateTestId)({
+                  base: testId,
+                  slot: 'chevron-right'
+                })
+              }) : null
+            })]
+          }))
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.CardFooter, {
+          children: footer
+        })]
+      })
+    })]
+  });
+});
+Checklist.displayName = 'Checklist';

package/lib/components/Checklist/Checklist.module.css

@@ -0,0 +1,164 @@
+@value (
+  colorBorderPrimary,
+  colorBackgroundPrimary,
+  colorBackgroundTertiary,
+  colorBackgroundSecondary,
+  colorFillPrimary
+) from '../../styles/variables/_color.css';
+@value (
+  sizeFluid,
+  size58,
+  size34,
+  size42,
+  size8,
+  size400,
+  size20,
+  size100,
+  size200
+) from '../../styles/variables/_size.css';
+@value (
+  spaceSmall,
+  spaceXSmall
+) from '../../styles/variables/_space.css';
+@value (
+  elevationCard,
+  elevationMenu
+) from '../../styles/variables/_elevation.css';
+@value (
+  borderWidthPrimary,
+  borderRadiusSmall,
+  borderRadiusNone
+) from '../../styles/variables/_border.css';
+
+.wrapper {
+  display: flex;
+  flex-flow: column;
+  width: sizeFluid;
+  position: relative;
+}
+
+.header {
+  composes: subTitleSmall from '../../styles/typography.module.css';
+  composes: borderPrimary from '../../styles/border.module.css';
+  min-height: size42;
+  border-radius: borderRadiusSmall;
+  display: flex;
+  cursor: pointer;
+  align-items: flex-start;
+  width: sizeFluid;
+  justify-content: space-between;
+  gap: spaceSmall;
+  padding: spaceSmall;
+  background-color: colorBackgroundTertiary;
+  z-index: elevationCard;
+}
+
+.header.isOpen {
+  min-height: size58;
+  background-color: colorBackgroundPrimary;
+}
+
+.headerContent {
+  display: flex;
+  gap: spaceXSmall;
+  align-items: center;
+  justify-content: space-between;
+  width: sizeFluid;
+}
+
+.content {
+  display: flex;
+  flex-flow: column;
+  background-color: colorBackgroundPrimary;
+  position: absolute;
+  top: calc(sizeFluid - size20);
+  border-radius: borderRadiusSmall;
+  width: sizeFluid;
+}
+
+.cardWrapper {
+  z-index: elevationMenu;
+}
+
+.contentContainer {
+  display: flex;
+  padding: spaceSmall;
+}
+
+.actionContainer {
+  display: flex;
+  border-top: borderWidthPrimary solid colorBorderPrimary;
+  border-radius: borderRadiusNone borderRadiusNone borderRadiusSmall
+    borderRadiusSmall;
+  background-color: colorBackgroundTertiary;
+  padding: spaceSmall;
+  gap: spaceXSmall;
+}
+
+.titleContainer {
+  display: flex;
+  gap: spaceXSmall;
+  align-items: center;
+}
+
+.cardContentContainer {
+  display: flex;
+  flex-flow: column;
+  gap: spaceXSmall;
+  padding: spaceSmall;
+  width: sizeFluid;
+  justify-content: space-between;
+  max-height: size400;
+  overflow-y: auto;
+}
+
+.checklistItemContainer {
+  display: flex;
+  gap: spaceXSmall;
+  align-items: center;
+  width: sizeFluid;
+  background-color: colorBackgroundTertiary;
+  height: size34;
+  border-radius: borderRadiusSmall;
+  padding: spaceXSmall;
+  cursor: pointer;
+}
+
+.checklistItemContainer:hover {
+  background-color: colorBackgroundSecondary;
+}
+
+.checklistItemLeft {
+  display: flex;
+  gap: spaceXSmall;
+  align-items: center;
+  width: sizeFluid;
+}
+
+.checklistItemRight {
+  display: flex;
+  gap: spaceXSmall;
+  align-items: center;
+}
+
+.progressLinear {
+  min-width: size100;
+  max-width: size200;
+  background-color: colorBorderPrimary;
+  border-radius: borderRadiusSmall;
+  height: size8;
+  box-sizing: content-box;
+}
+
+.progressLinearBar {
+  height: size8;
+  background-color: colorFillPrimary;
+  border-radius: borderRadiusSmall;
+}
+
+.checklistProgressBar {
+  display: flex;
+  gap: spaceXSmall;
+  align-items: center;
+  min-width: max-content;
+}