@spaced-out/genesis-mcp 1.0.6 → 1.0.8

package/data/design-system.json

@@ -1,7 +1,7 @@
 {
   "metadata": {
-    "buildDate": "2026-01-21T04:57:40.009Z",
-    "version": "0.5.41",
+    "buildDate": "2026-01-28T11:25:51.607Z",
+    "version": "0.5.43",
     "designSystemPath": "/home/runner/work/ui-design-system/ui-design-system"
   },
   "components": {
@@ -12,7 +12,7 @@
         "main": null,
         "story": {
           "path": "AIPromptFlow.stories.tsx",
-          "content": "/* eslint-disable react/no-array-index-key */\nimport * as React from 'react';\n\nimport {\n  ChatAnchor,\n  ChatBody,\n  ChatBubble,\n  ChatContent,\n} from 'src/components/ChatBubble';\nimport {ChatFooterWithIcons} from 'src/components/ChatBubble/ChatBubble.stories';\nimport {Disclaimer} from 'src/components/Disclaimer';\nimport {Panel, PanelBody, PanelFooter, PanelHeader} from 'src/components/Panel';\nimport {PromptChip} from 'src/components/PromptChip';\nimport {PromptInput} from 'src/components/PromptInput';\nimport {BodyMedium, FormLabelMedium} from 'src/components/Text';\nimport {SubTitleSmall} from 'src/components/Text/Text';\nimport {TextTile} from 'src/components/TextTile';\n\nimport css from 'src/components/AIPromptFlow/AIPromptFlow.stories.module.css';\n\n\nexport default {\n  tags: ['!autodocs'],\n  title: 'AI Prompt Components/AI Prompt Flow',\n  parameters: {\n    docs: {\n      subtitle: 'AI Prompt Flow example',\n      description: {\n        component: `\nThis example showcases how to use the ai copilot flows in ui. feel free to copy code and respective css to mimic the exact UI\n        `,\n      },\n    },\n    storySource: {\n      componentPath: '/src/components/Disclaimer/Disclaimer',\n    },\n  },\n};\n\nconst staticResponse = `In today's data-driven world, analytics play a crucial role in decision-making and strategy development. Companies rely on key performance indicators (KPIs) to measure progress and identify areas for improvement. Metrics like conversion rates, churn rates, and user engagement provide valuable insights into business performance. Accurate data collection and analysis empower teams to make informed choices, optimize processes, and allocate resources effectively.\n\nFor instance, monitoring website traffic helps identify the most visited pages and the sources driving users to the site. A high bounce rate might indicate a need to improve user experience, while a steady increase in session duration reflects growing engagement. Similarly, tracking customer acquisition cost (CAC) against lifetime value (LTV) ensures sustainable growth and profitability.\n\nSales teams use analytics to measure pipeline velocity, close rates, and average deal size. These metrics enable managers to forecast revenue, adjust strategies, and improve overall efficiency. In marketing, tools like funnel analysis highlight where potential leads drop off, helping refine campaigns and improve return on investment (ROI).\n\nEmployee performance metrics are equally important. Organizations track productivity, satisfaction scores, and retention rates to foster a positive work environment. For instance, a drop in employee engagement often signals underlying issues, such as workload imbalance or lack of recognition.\n\nIn customer success, analytics focus on net promoter scores (NPS), response times, and resolution rates. High NPS scores indicate satisfied customers likely to promote the brand, while tracking ticket resolution times ensures efficient support processes. By analyzing these trends, businesses can address pain points and improve client relationships.\n\nFinancial analytics are another critical area. Companies monitor profit margins, operational costs, and revenue growth to ensure financial stability. Metrics such as EBITDA and cash flow provide a clear picture of a company’s health, enabling leadership to plan for future investments or expansions.\n\nData visualization tools make these analytics easier to understand. Dashboards present complex information in simple charts and graphs, allowing teams to identify patterns and anomalies at a glance. Heatmaps, for example, can show user activity on a website, revealing areas that need more attention.\n\nA/B testing further enhances decision-making by allowing teams to experiment with different strategies and compare results. Whether testing headlines, product features, or email campaigns, data-driven results provide clarity and eliminate guesswork.\n\nReal-time analytics help organizations stay agile and responsive. By monitoring live data, companies can react to sudden changes, such as traffic spikes or unexpected downtime. Alerts and notifications ensure that teams are aware of critical issues and can act promptly.\n\nThe value of analytics lies not only in the data itself but also in how it’s interpreted and applied. Insights derived from metrics allow businesses to streamline operations, enhance customer satisfaction, and drive growth. With the right tools and a data-driven mindset, organizations can turn raw data into actionable strategies and measurable outcomes.\n\nIn essence, analytics provide the foundation for smarter decisions, improved performance, and long-term success. Whether it’s understanding user behavior, optimizing workflows, or predicting market trends, leveraging analytics is key to staying competitive in an ever-changing landscape.`;\n\nconst PROMPTS = [\n  'What is the offer acceptance rate?',\n  'Which source produces the best hires?',\n  'What is the average time to hire?',\n  'How many candidates are in the pipeline?',\n  'What is the average cost per hire?',\n  'Which department has the highest turnover rate?',\n  'What percentage of hires are from referrals?',\n  'How long does it take to fill a position?',\n  'What is the attrition rate for the past year?',\n  'Which jobs have the highest application drop-off rate?',\n  'What is the conversion rate from interview to hire?',\n  'How many candidates are rejected at each stage?',\n  'What is the average interview-to-offer ratio?',\n  'Which recruiters have the best performance metrics?',\n  'What percentage of candidates reject offers?',\n  'How satisfied are candidates with the hiring process?',\n  'What is the diversity ratio in the current workforce?',\n  'How many hires come from internal promotions?',\n  'What are the reasons for candidate drop-off?',\n  'How effective is the onboarding process?',\n  'What is the current employee engagement score?',\n  'How many candidates applied last quarter?',\n  'What percentage of job offers are pending?',\n  'How many interviews are conducted per position?',\n  'What is the overall hiring success rate?',\n  'What percentage of applicants are qualified?',\n  'How many candidates are awaiting feedback?',\n  'What is the average time to first interview?',\n  'Which job roles take the longest to fill?',\n  'What is the ratio of applicants to hires?',\n  'Which job boards drive the most applications?',\n  'What is the average time spent interviewing candidates?',\n  'How many passive candidates were contacted last month?',\n  'What percentage of hires are new graduates?',\n  'Which hiring stages have the highest drop-off?',\n  'How many candidates withdrew their applications?',\n  'What percentage of employees passed probation?',\n  'Which regions have the most successful hires?',\n  'What is the average number of interview rounds?',\n  'How many requisitions are still open?',\n  'Which departments have the lowest attrition?',\n  'What percentage of candidates complete assessments?',\n  'What is the satisfaction rate of new hires?',\n  'How many hires are expected this quarter?',\n  'What is the median salary for new hires?',\n  'How many requisitions were filled last month?',\n  'Which hiring sources are the most cost-effective?',\n  'How diverse are the recent hires?',\n  'How many employees left during onboarding?',\n  'What is the percentage of part-time hires?',\n  'How many job offers were rescinded?',\n  'What is the average candidate feedback score?',\n  'Which teams have the fastest hiring process?',\n  'What percentage of hires are internal candidates?',\n  'How many candidates are in the talent pool?',\n  'What is the average age of new hires?',\n  'How effective are employee referral programs?',\n  'What percentage of hires are remote employees?',\n  'How many candidates are considered overqualified?',\n  'Which recruiters have the fastest response time?',\n  'What is the average duration between offer and joining?',\n  'How satisfied are hiring managers with candidates?',\n  'Which skills are most common among recent hires?',\n  'How many candidates failed the technical assessment?',\n  'What is the drop-off rate during technical rounds?',\n  'What percentage of hires are contract workers?',\n  'How many job offers were declined last quarter?',\n  'What percentage of hires meet performance benchmarks?',\n  'How many positions remain unfilled after 90 days?',\n  'What is the hiring trend over the last six months?',\n  'What percentage of hires come from social media?',\n  'How effective is the candidate feedback loop?',\n  'What is the employee referral success rate?',\n  'How many active job seekers applied this month?',\n  'What percentage of candidates ask for offer extensions?',\n  'What is the typical rejection reason from candidates?',\n  'Which hiring stage causes the most delays?',\n  'What percentage of new hires recommend the process?',\n  'How many rehires were made this year?',\n  'What is the cost of a bad hire?',\n  'How many positions were closed due to budget cuts?',\n  'What percentage of hires exceed expectations?',\n  'How long do candidates stay on average?',\n  'What is the feedback score for interviewers?',\n  'Which stages have the most rescheduled interviews?',\n  'How many candidates received counteroffers?',\n  'What is the candidate response time for offers?',\n  'What percentage of candidates report a good experience?',\n  'How does the hiring rate compare year over year?',\n  'Which regions have the slowest time to hire?',\n  'How effective are pre-screening assessments?',\n  'How often do candidates ghost interviews?',\n  'What is the most requested role this year?',\n  'What percentage of new hires are retained after a year?',\n  'How many rejected candidates reapply later?',\n  'How many candidates fail during background checks?',\n  'What percentage of hires are diversity candidates?',\n  'How successful are hiring campaigns in different regions?',\n  'What is the satisfaction rate among rejected candidates?',\n  'How many roles are open for more than 6 months?',\n  'What percentage of hires move into leadership roles?',\n];\n\nconst getRandomPrompts = (prompts: Array<string>) => {\n  const count = Math.floor(Math.random() * 3) + 1;\n  const shuffled = prompts.sort(() => 0.5 - Math.random());\n  return shuffled.slice(0, count);\n};\n\nconst getRandomSentences = (text: string, wordLimit = 50) => {\n  const sentences = text.match(/[^.!?]+[.!?]/g) || [];\n\n  const result: Array<string> = [];\n  let totalWords = 0;\n\n  const shuffledSentences = sentences.sort(() => Math.random() - 0.5);\n\n  for (const sentence of shuffledSentences) {\n    const wordCount = sentence.trim().split(/\\s+/).length;\n\n    if (totalWords + wordCount <= wordLimit || result.length === 0) {\n      result.push(sentence.trim());\n      totalWords += wordCount;\n    } else {\n      break;\n    }\n  }\n\n  return result.join(' ');\n};\n\nexport const AIPromptFlowStory = () => {\n  const [value, setValue] = React.useState('');\n  const [isLoading, setIsLoading] = React.useState(false);\n  const [responses, setResponses] = React.useState<\n    Array<{question: string; answer: string}>\n  >([]);\n  const [selectedPrompts, setSelectedPrompts] = React.useState(\n    getRandomPrompts(PROMPTS),\n  );\n  const promptRef = React.useRef<HTMLDivElement | null>(null);\n  const loadingRef = React.useRef<HTMLDivElement | null>(null);\n\n  const generateResponse = (text?: string) => {\n    const preparedResponses = [...responses];\n    setIsLoading(true);\n    setTimeout(() => {\n      loadingRef.current?.scrollIntoView({\n        behavior: 'smooth',\n      });\n    });\n\n    setValue('');\n\n    const question = text ? text : value;\n\n    preparedResponses.push({\n      question,\n      answer: '',\n    });\n\n    setResponses(preparedResponses);\n\n    setTimeout(() => {\n      preparedResponses.push({\n        question: '',\n        answer: getRandomSentences(staticResponse),\n      });\n      setResponses(preparedResponses);\n      setIsLoading(false);\n      setSelectedPrompts(getRandomPrompts(PROMPTS));\n      promptRef.current?.scrollIntoView({\n        behavior: 'smooth',\n      });\n    }, 2000);\n  };\n\n  return (\n    <Panel isOpen={true} anchor=\"right\" size=\"large\">\n      <PanelHeader>Copilot</PanelHeader>\n      <Disclaimer classNames={{wrapper: css.disclaimer}}>\n        Always check content generated by AI\n      </Disclaimer>\n      <PanelBody className={css.panelBody}>\n        {responses.length === 0 && !isLoading && (\n          <TextTile\n            header=\"Copilot\"\n            description=\"Ask anything to accomplish tasks in Sense.\"\n            classNames={{wrapper: css.copilotTextWrapper}}\n          />\n        )}\n\n        {responses.map((response, idx) => (\n          <div key={idx} className={css.conversationAI}>\n            {!!response.question && (\n              <ChatBubble orientation=\"left\">\n                <ChatAnchor\n                  avatarProps={{\n                    text: 'Adam Craig Gilchrist',\n                  }}\n                  isAI={false}\n                />\n                <ChatContent>\n                  <ChatBody withBgColor={false}>\n                    <BodyMedium>{response.question}</BodyMedium>\n                  </ChatBody>\n                </ChatContent>\n              </ChatBubble>\n            )}\n\n            {!!response.answer && (\n              <>\n                {idx === 1 && (\n                  <>\n                    <ChatBubble orientation=\"left\">\n                      <ChatAnchor />\n                      <ChatContent>\n                        <ChatBody>\n                          <SubTitleSmall>\n                            This is our interpretation of you question\n                          </SubTitleSmall>\n\n                          <BodyMedium>\n                            {getRandomSentences(staticResponse)}\n                          </BodyMedium>\n                        </ChatBody>\n                      </ChatContent>\n                    </ChatBubble>\n                    <ChatBubble\n                      orientation=\"left\"\n                      classNames={{wrapper: css.leftMarginSpace}}\n                    >\n                      <ChatContent>\n                        <ChatBody>\n                          <BodyMedium>{response.answer}</BodyMedium>\n                        </ChatBody>\n                        <ChatFooterWithIcons />\n                      </ChatContent>\n                    </ChatBubble>\n                  </>\n                )}\n                {idx === 3 && (\n                  <ChatBubble orientation=\"left\">\n                    <ChatAnchor />\n                    <ChatContent>\n                      <ChatBody classNames={{wrapper: css.longChatContent}}>\n                        <BodyMedium>\n                          In a world where technology and imagination\n                          intertwine, the possibilities for innovation are\n                          boundless. Every passing day introduces new\n                          advancements that reshape the way humanity interacts\n                          with the world, creating a seamless blend of\n                          convenience, creativity, and connectivity. As\n                          artificial intelligence continues to grow in\n                          influence, its impact on everyday life becomes more\n                          profound, touching areas that range from healthcare to\n                          entertainment, from education to environmental\n                          conservation. Take, for instance, the story of a small\n                          town nestled in the valley of rolling hills. For\n                          decades, this town had thrived on traditional farming\n                          practices, cultivating crops and raising livestock in\n                          harmony with nature. However, the advent of technology\n                          introduced challenges that demanded adaptation.\n                          Climate change brought unpredictable weather patterns,\n                          and global markets introduced competitive pressures\n                          that many small farms struggled to meet. Faced with\n                          these challenges, the community turned to innovation.\n                          The town’s leaders, in collaboration with researchers\n                          and technologists, implemented a system of smart\n                          farming powered by AI. Sensors embedded in the soil\n                          measured moisture levels, nutrient content, and\n                          temperature, providing real-time feedback to farmers.\n                          Drones equipped with cameras flew over fields,\n                          capturing images that AI analyzed to detect signs of\n                          pests or disease. Autonomous tractors, guided by\n                          satellite data, plowed and planted with precision,\n                          minimizing waste and maximizing yield. Over time,\n                          these tools not only revived the town’s agricultural\n                          economy but also established it as a model for\n                          sustainable farming practices worldwide. Beyond\n                          agriculture, artificial intelligence also\n                          revolutionized healthcare. A few years ago, a young\n                          woman named Clara faced an uncertain future. Diagnosed\n                          with a rare and aggressive form of cancer, she was\n                          told her chances of survival were slim. However,\n                          Clara’s doctors employed a cutting-edge AI system to\n                          analyze her genetic profile and recommend a\n                          personalized treatment plan. This system, trained on\n                          data from millions of patients worldwide, identified\n                          patterns that human doctors might have missed,\n                          suggesting a combination of therapies tailored\n                          specifically to Clara’s condition.\n                        </BodyMedium>\n                      </ChatBody>\n                      <ChatFooterWithIcons />\n                    </ChatContent>\n                  </ChatBubble>\n                )}\n                {idx !== 1 && idx !== 3 && (\n                  <ChatBubble orientation=\"left\">\n                    <ChatAnchor />\n                    <ChatContent>\n                      <ChatBody>\n                        <BodyMedium>{response.answer}</BodyMedium>\n                      </ChatBody>\n                    </ChatContent>\n                  </ChatBubble>\n                )}\n\n                <div className={css.leftMarginSpace}>\n                  {idx === responses.length - 1 && (\n                    <PromptSuggestions\n                      isLoading={isLoading}\n                      selectedPrompts={selectedPrompts}\n                      generateResponse={generateResponse}\n                      promptRef={promptRef}\n                    />\n                  )}\n                </div>\n              </>\n            )}\n          </div>\n        ))}\n        {isLoading && (\n          <ChatBubble\n            classNames={{\n              wrapper: css.loader,\n            }}\n            orientation=\"left\"\n            ref={loadingRef}\n          >\n            <ChatAnchor />\n            <ChatContent>\n              <ChatBody isLoading loadingText=\"Generating\" />\n            </ChatContent>\n          </ChatBubble>\n        )}\n\n        {responses.length === 0 && (\n          <div className={css.promptContainer}>\n            <PromptSuggestions\n              isLoading={isLoading}\n              selectedPrompts={selectedPrompts}\n              generateResponse={generateResponse}\n              label=\"Here are some ideas to get started with Analytics for your product\"\n            />\n          </div>\n        )}\n      </PanelBody>\n      <PanelFooter classNames={{actions: css.actions}}>\n        <PromptInput\n          withPadding={false}\n          value={value}\n          onInputChange={(e) => setValue(e.target.value)}\n          onButtonClick={() => generateResponse()}\n          buttonDisabled={value.length === 0}\n        ></PromptInput>\n      </PanelFooter>\n    </Panel>\n  );\n};\n\nconst PromptSuggestions = ({\n  isLoading,\n  generateResponse,\n  selectedPrompts,\n  label,\n  promptRef,\n}: {\n  isLoading: boolean;\n  generateResponse: (prompt: string) => void;\n  selectedPrompts: string[];\n  label?: string;\n  promptRef?: {\n    current?: HTMLDivElement | null;\n  };\n}) =>\n  !isLoading && (\n    <>\n      {label && <FormLabelMedium>{label}</FormLabelMedium>}\n\n      <div className={css.promptWrapper}>\n        {selectedPrompts.map((prompt) => (\n          <React.Fragment key={prompt}>\n            <PromptChip\n              classNames={{wrapper: css.prompt}}\n              onClick={() => generateResponse(prompt)}\n              ref={promptRef as React.RefObject<HTMLDivElement>}\n            >\n              {prompt}\n            </PromptChip>\n          </React.Fragment>\n        ))}\n      </div>\n    </>\n  );\nAIPromptFlowStory.storyName = 'AIPrompt Flow';\n"
+          "content": "/* eslint-disable react/no-array-index-key */\nimport * as React from 'react';\n\nimport {\n  ChatAnchor,\n  ChatBody,\n  ChatBubble,\n  ChatContent,\n} from 'src/components/ChatBubble';\nimport {ChatFooterWithIcons} from 'src/components/ChatBubble/ChatBubble.stories';\nimport {Disclaimer} from 'src/components/Disclaimer';\nimport {Panel, PanelBody, PanelFooter, PanelHeader} from 'src/components/Panel';\nimport {PromptChip} from 'src/components/PromptChip';\nimport {PromptInput} from 'src/components/PromptInput';\nimport {BodyMedium, FormLabelMedium} from 'src/components/Text';\nimport {SubTitleSmall} from 'src/components/Text/Text';\nimport {TextTile} from 'src/components/TextTile';\n\nimport css from 'src/components/AIPromptFlow/AIPromptFlow.stories.module.css';\n\n\nexport default {\n  tags: ['!autodocs'],\n  title: 'AI Prompt Components/AI Prompt Flow',\n  parameters: {\n    docs: {\n      subtitle: 'AI Prompt Flow example',\n      description: {\n        component: `\nThis example showcases how to use the ai copilot flows in ui. feel free to copy code and respective css to mimic the exact UI\n        `,\n      },\n    },\n    storySource: {\n      componentPath: '/src/components/Disclaimer/Disclaimer',\n    },\n  },\n};\n\nconst staticResponse = `In today's data-driven world, analytics play a crucial role in decision-making and strategy development. Companies rely on key performance indicators (KPIs) to measure progress and identify areas for improvement. Metrics like conversion rates, churn rates, and user engagement provide valuable insights into business performance. Accurate data collection and analysis empower teams to make informed choices, optimize processes, and allocate resources effectively.\n\nFor instance, monitoring website traffic helps identify the most visited pages and the sources driving users to the site. A high bounce rate might indicate a need to improve user experience, while a steady increase in session duration reflects growing engagement. Similarly, tracking customer acquisition cost (CAC) against lifetime value (LTV) ensures sustainable growth and profitability.\n\nSales teams use analytics to measure pipeline velocity, close rates, and average deal size. These metrics enable managers to forecast revenue, adjust strategies, and improve overall efficiency. In marketing, tools like funnel analysis highlight where potential leads drop off, helping refine campaigns and improve return on investment (ROI).\n\nEmployee performance metrics are equally important. Organizations track productivity, satisfaction scores, and retention rates to foster a positive work environment. For instance, a drop in employee engagement often signals underlying issues, such as workload imbalance or lack of recognition.\n\nIn customer success, analytics focus on net promoter scores (NPS), response times, and resolution rates. High NPS scores indicate satisfied customers likely to promote the brand, while tracking ticket resolution times ensures efficient support processes. By analyzing these trends, businesses can address pain points and improve client relationships.\n\nFinancial analytics are another critical area. Companies monitor profit margins, operational costs, and revenue growth to ensure financial stability. Metrics such as EBITDA and cash flow provide a clear picture of a company’s health, enabling leadership to plan for future investments or expansions.\n\nData visualization tools make these analytics easier to understand. Dashboards present complex information in simple charts and graphs, allowing teams to identify patterns and anomalies at a glance. Heatmaps, for example, can show user activity on a website, revealing areas that need more attention.\n\nA/B testing further enhances decision-making by allowing teams to experiment with different strategies and compare results. Whether testing headlines, product features, or email campaigns, data-driven results provide clarity and eliminate guesswork.\n\nReal-time analytics help organizations stay agile and responsive. By monitoring live data, companies can react to sudden changes, such as traffic spikes or unexpected downtime. Alerts and notifications ensure that teams are aware of critical issues and can act promptly.\n\nThe value of analytics lies not only in the data itself but also in how it’s interpreted and applied. Insights derived from metrics allow businesses to streamline operations, enhance customer satisfaction, and drive growth. With the right tools and a data-driven mindset, organizations can turn raw data into actionable strategies and measurable outcomes.\n\nIn essence, analytics provide the foundation for smarter decisions, improved performance, and long-term success. Whether it’s understanding user behavior, optimizing workflows, or predicting market trends, leveraging analytics is key to staying competitive in an ever-changing landscape.`;\n\nconst PROMPTS = [\n  'What is the offer acceptance rate?',\n  'Which source produces the best hires?',\n  'What is the average time to hire?',\n  'How many candidates are in the pipeline?',\n  'What is the average cost per hire?',\n  'Which department has the highest turnover rate?',\n  'What percentage of hires are from referrals?',\n  'How long does it take to fill a position?',\n  'What is the attrition rate for the past year?',\n  'Which jobs have the highest application drop-off rate?',\n  'What is the conversion rate from interview to hire?',\n  'How many candidates are rejected at each stage?',\n  'What is the average interview-to-offer ratio?',\n  'Which recruiters have the best performance metrics?',\n  'What percentage of candidates reject offers?',\n  'How satisfied are candidates with the hiring process?',\n  'What is the diversity ratio in the current workforce?',\n  'How many hires come from internal promotions?',\n  'What are the reasons for candidate drop-off?',\n  'How effective is the onboarding process?',\n  'What is the current employee engagement score?',\n  'How many candidates applied last quarter?',\n  'What percentage of job offers are pending?',\n  'How many interviews are conducted per position?',\n  'What is the overall hiring success rate?',\n  'What percentage of applicants are qualified?',\n  'How many candidates are awaiting feedback?',\n  'What is the average time to first interview?',\n  'Which job roles take the longest to fill?',\n  'What is the ratio of applicants to hires?',\n  'Which job boards drive the most applications?',\n  'What is the average time spent interviewing candidates?',\n  'How many passive candidates were contacted last month?',\n  'What percentage of hires are new graduates?',\n  'Which hiring stages have the highest drop-off?',\n  'How many candidates withdrew their applications?',\n  'What percentage of employees passed probation?',\n  'Which regions have the most successful hires?',\n  'What is the average number of interview rounds?',\n  'How many requisitions are still open?',\n  'Which departments have the lowest attrition?',\n  'What percentage of candidates complete assessments?',\n  'What is the satisfaction rate of new hires?',\n  'How many hires are expected this quarter?',\n  'What is the median salary for new hires?',\n  'How many requisitions were filled last month?',\n  'Which hiring sources are the most cost-effective?',\n  'How diverse are the recent hires?',\n  'How many employees left during onboarding?',\n  'What is the percentage of part-time hires?',\n  'How many job offers were rescinded?',\n  'What is the average candidate feedback score?',\n  'Which teams have the fastest hiring process?',\n  'What percentage of hires are internal candidates?',\n  'How many candidates are in the talent pool?',\n  'What is the average age of new hires?',\n  'How effective are employee referral programs?',\n  'What percentage of hires are remote employees?',\n  'How many candidates are considered overqualified?',\n  'Which recruiters have the fastest response time?',\n  'What is the average duration between offer and joining?',\n  'How satisfied are hiring managers with candidates?',\n  'Which skills are most common among recent hires?',\n  'How many candidates failed the technical assessment?',\n  'What is the drop-off rate during technical rounds?',\n  'What percentage of hires are contract workers?',\n  'How many job offers were declined last quarter?',\n  'What percentage of hires meet performance benchmarks?',\n  'How many positions remain unfilled after 90 days?',\n  'What is the hiring trend over the last six months?',\n  'What percentage of hires come from social media?',\n  'How effective is the candidate feedback loop?',\n  'What is the employee referral success rate?',\n  'How many active job seekers applied this month?',\n  'What percentage of candidates ask for offer extensions?',\n  'What is the typical rejection reason from candidates?',\n  'Which hiring stage causes the most delays?',\n  'What percentage of new hires recommend the process?',\n  'How many rehires were made this year?',\n  'What is the cost of a bad hire?',\n  'How many positions were closed due to budget cuts?',\n  'What percentage of hires exceed expectations?',\n  'How long do candidates stay on average?',\n  'What is the feedback score for interviewers?',\n  'Which stages have the most rescheduled interviews?',\n  'How many candidates received counteroffers?',\n  'What is the candidate response time for offers?',\n  'What percentage of candidates report a good experience?',\n  'How does the hiring rate compare year over year?',\n  'Which regions have the slowest time to hire?',\n  'How effective are pre-screening assessments?',\n  'How often do candidates ghost interviews?',\n  'What is the most requested role this year?',\n  'What percentage of new hires are retained after a year?',\n  'How many rejected candidates reapply later?',\n  'How many candidates fail during background checks?',\n  'What percentage of hires are diversity candidates?',\n  'How successful are hiring campaigns in different regions?',\n  'What is the satisfaction rate among rejected candidates?',\n  'How many roles are open for more than 6 months?',\n  'What percentage of hires move into leadership roles?',\n];\n\nconst getRandomPrompts = (prompts: Array<string>) => {\n  const count = Math.floor(Math.random() * 3) + 1;\n  const shuffled = prompts.sort(() => 0.5 - Math.random());\n  return shuffled.slice(0, count);\n};\n\nconst getRandomSentences = (text: string, wordLimit = 50) => {\n  const sentences = text.match(/[^.!?]+[.!?]/g) || [];\n\n  const result: Array<string> = [];\n  let totalWords = 0;\n\n  const shuffledSentences = sentences.sort(() => Math.random() - 0.5);\n\n  for (const sentence of shuffledSentences) {\n    const wordCount = sentence.trim().split(/\\s+/).length;\n\n    if (totalWords + wordCount <= wordLimit || result.length === 0) {\n      result.push(sentence.trim());\n      totalWords += wordCount;\n    } else {\n      break;\n    }\n  }\n\n  return result.join(' ');\n};\n\nexport const AIPromptFlowStory = () => {\n  const [value, setValue] = React.useState('');\n  const [isLoading, setIsLoading] = React.useState(false);\n  const [responses, setResponses] = React.useState<\n    Array<{question: string; answer: string}>\n  >([]);\n  const [selectedPrompts, setSelectedPrompts] = React.useState(\n    getRandomPrompts(PROMPTS),\n  );\n  const promptRef = React.useRef<HTMLDivElement | null>(null);\n  const loadingRef = React.useRef<HTMLDivElement | null>(null);\n\n  const generateResponse = (text?: string) => {\n    const preparedResponses = [...responses];\n    setIsLoading(true);\n    setTimeout(() => {\n      loadingRef.current?.scrollIntoView({\n        behavior: 'smooth',\n      });\n    });\n\n    setValue('');\n\n    const question = text ? text : value;\n\n    preparedResponses.push({\n      question,\n      answer: '',\n    });\n\n    setResponses(preparedResponses);\n\n    setTimeout(() => {\n      preparedResponses.push({\n        question: '',\n        answer: getRandomSentences(staticResponse),\n      });\n      setResponses(preparedResponses);\n      setIsLoading(false);\n      setSelectedPrompts(getRandomPrompts(PROMPTS));\n      promptRef.current?.scrollIntoView({\n        behavior: 'smooth',\n      });\n    }, 2000);\n  };\n\n  return (\n    <Panel isOpen={true} anchor=\"right\" size=\"large\">\n      <PanelHeader>Copilot</PanelHeader>\n      <Disclaimer classNames={{wrapper: css.disclaimer}}>\n        Always check content generated by AI\n      </Disclaimer>\n      <PanelBody className={css.panelBody}>\n        {responses.length === 0 && !isLoading && (\n          <TextTile\n            header=\"Copilot\"\n            description=\"Ask anything to accomplish tasks in Sense.\"\n            classNames={{wrapper: css.copilotTextWrapper}}\n          />\n        )}\n\n        {responses.map((response, idx) => (\n          <div key={idx} className={css.conversationAI}>\n            {!!response.question && (\n              <ChatBubble orientation=\"right\">\n                <ChatContent>\n                  <ChatBody withBgColor={true}>\n                    <BodyMedium>{response.question}</BodyMedium>\n                  </ChatBody>\n                </ChatContent>\n              </ChatBubble>\n            )}\n\n            {!!response.answer && (\n              <>\n                {idx === 1 && (\n                  <>\n                    <ChatBubble orientation=\"left\">\n                      <ChatAnchor />\n                      <ChatContent>\n                        <ChatBody>\n                          <SubTitleSmall>\n                            This is our interpretation of you question\n                          </SubTitleSmall>\n\n                          <BodyMedium>\n                            {getRandomSentences(staticResponse)}\n                          </BodyMedium>\n                        </ChatBody>\n                      </ChatContent>\n                    </ChatBubble>\n                    <ChatBubble\n                      orientation=\"left\"\n                      classNames={{wrapper: css.leftMarginSpace}}\n                    >\n                      <ChatContent>\n                        <ChatBody>\n                          <BodyMedium>{response.answer}</BodyMedium>\n                        </ChatBody>\n                        <ChatFooterWithIcons />\n                      </ChatContent>\n                    </ChatBubble>\n                  </>\n                )}\n                {idx === 3 && (\n                  <ChatBubble orientation=\"left\">\n                    <ChatAnchor />\n                    <ChatContent>\n                      <ChatBody classNames={{wrapper: css.longChatContent}}>\n                        <BodyMedium>\n                          In a world where technology and imagination\n                          intertwine, the possibilities for innovation are\n                          boundless. Every passing day introduces new\n                          advancements that reshape the way humanity interacts\n                          with the world, creating a seamless blend of\n                          convenience, creativity, and connectivity. As\n                          artificial intelligence continues to grow in\n                          influence, its impact on everyday life becomes more\n                          profound, touching areas that range from healthcare to\n                          entertainment, from education to environmental\n                          conservation. Take, for instance, the story of a small\n                          town nestled in the valley of rolling hills. For\n                          decades, this town had thrived on traditional farming\n                          practices, cultivating crops and raising livestock in\n                          harmony with nature. However, the advent of technology\n                          introduced challenges that demanded adaptation.\n                          Climate change brought unpredictable weather patterns,\n                          and global markets introduced competitive pressures\n                          that many small farms struggled to meet. Faced with\n                          these challenges, the community turned to innovation.\n                          The town’s leaders, in collaboration with researchers\n                          and technologists, implemented a system of smart\n                          farming powered by AI. Sensors embedded in the soil\n                          measured moisture levels, nutrient content, and\n                          temperature, providing real-time feedback to farmers.\n                          Drones equipped with cameras flew over fields,\n                          capturing images that AI analyzed to detect signs of\n                          pests or disease. Autonomous tractors, guided by\n                          satellite data, plowed and planted with precision,\n                          minimizing waste and maximizing yield. Over time,\n                          these tools not only revived the town’s agricultural\n                          economy but also established it as a model for\n                          sustainable farming practices worldwide. Beyond\n                          agriculture, artificial intelligence also\n                          revolutionized healthcare. A few years ago, a young\n                          woman named Clara faced an uncertain future. Diagnosed\n                          with a rare and aggressive form of cancer, she was\n                          told her chances of survival were slim. However,\n                          Clara’s doctors employed a cutting-edge AI system to\n                          analyze her genetic profile and recommend a\n                          personalized treatment plan. This system, trained on\n                          data from millions of patients worldwide, identified\n                          patterns that human doctors might have missed,\n                          suggesting a combination of therapies tailored\n                          specifically to Clara’s condition.\n                        </BodyMedium>\n                      </ChatBody>\n                      <ChatFooterWithIcons />\n                    </ChatContent>\n                  </ChatBubble>\n                )}\n                {idx !== 1 && idx !== 3 && (\n                  <ChatBubble orientation=\"left\">\n                    <ChatAnchor />\n                    <ChatContent>\n                      <ChatBody>\n                        <BodyMedium>{response.answer}</BodyMedium>\n                      </ChatBody>\n                    </ChatContent>\n                  </ChatBubble>\n                )}\n\n                <div className={css.leftMarginSpace}>\n                  {idx === responses.length - 1 && (\n                    <PromptSuggestions\n                      isLoading={isLoading}\n                      selectedPrompts={selectedPrompts}\n                      generateResponse={generateResponse}\n                      promptRef={promptRef}\n                    />\n                  )}\n                </div>\n              </>\n            )}\n          </div>\n        ))}\n        {isLoading && (\n          <ChatBubble\n            classNames={{\n              wrapper: css.loader,\n            }}\n            orientation=\"left\"\n            ref={loadingRef}\n          >\n            <ChatAnchor />\n            <ChatContent>\n              <ChatBody isLoading loadingText=\"Generating\" />\n            </ChatContent>\n          </ChatBubble>\n        )}\n\n        {responses.length === 0 && (\n          <div className={css.promptContainer}>\n            <PromptSuggestions\n              isLoading={isLoading}\n              selectedPrompts={selectedPrompts}\n              generateResponse={generateResponse}\n              label=\"Here are some ideas to get started with Analytics for your product\"\n            />\n          </div>\n        )}\n      </PanelBody>\n      <PanelFooter classNames={{actions: css.actions}}>\n        <PromptInput\n          withPadding={false}\n          value={value}\n          onInputChange={(e) => setValue(e.target.value)}\n          onButtonClick={() => generateResponse()}\n          buttonDisabled={value.length === 0}\n        ></PromptInput>\n      </PanelFooter>\n    </Panel>\n  );\n};\n\nconst PromptSuggestions = ({\n  isLoading,\n  generateResponse,\n  selectedPrompts,\n  label,\n  promptRef,\n}: {\n  isLoading: boolean;\n  generateResponse: (prompt: string) => void;\n  selectedPrompts: string[];\n  label?: string;\n  promptRef?: {\n    current?: HTMLDivElement | null;\n  };\n}) =>\n  !isLoading && (\n    <>\n      {label && <FormLabelMedium>{label}</FormLabelMedium>}\n\n      <div className={css.promptWrapper}>\n        {selectedPrompts.map((prompt) => (\n          <React.Fragment key={prompt}>\n            <PromptChip\n              classNames={{wrapper: css.prompt}}\n              onClick={() => generateResponse(prompt)}\n              ref={promptRef as React.RefObject<HTMLDivElement>}\n            >\n              {prompt}\n            </PromptChip>\n          </React.Fragment>\n        ))}\n      </div>\n    </>\n  );\nAIPromptFlowStory.storyName = 'AIPrompt Flow';\n"
         },
         "css": null,
         "index": null,
@@ -532,15 +532,15 @@
       "files": {
         "main": {
           "path": "ChatBubble.d.ts",
-          "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nimport type { AvatarProps } from '../../components/Avatar';\nimport type { BaseTooltipProps } from '../../components/Tooltip';\ntype ClassNames = Readonly<{\n    wrapper?: string;\n}>;\nexport declare const CHAT_BUBBLE_ORIENTATION: Readonly<{\n    left: \"left\";\n    right: \"right \";\n}>;\nexport type ChatBubbleOrientation = (typeof CHAT_BUBBLE_ORIENTATION)[keyof typeof CHAT_BUBBLE_ORIENTATION];\nexport interface ChatBubbleProps {\n    classNames?: ClassNames;\n    orientation?: ChatBubbleOrientation;\n    children: React.ReactNode;\n    testId?: string;\n}\nexport declare const ChatBubble: Flow.AbstractComponent<ChatBubbleProps, HTMLDivElement>;\nexport interface ChatAnchorProps {\n    isAI?: boolean;\n    tooltip?: BaseTooltipProps;\n    classNames?: ClassNames;\n    avatarProps?: AvatarProps;\n    testId?: string;\n}\nexport declare const ChatAnchor: {\n    ({ isAI, tooltip, classNames, avatarProps, testId, }: ChatAnchorProps): React.JSX.Element;\n    displayName: string;\n};\nexport interface ChatContentProps {\n    classNames?: ClassNames;\n    children?: React.ReactNode;\n    testId?: string;\n}\nexport declare const ChatContent: {\n    ({ classNames, children, testId, }: ChatContentProps): React.JSX.Element;\n    displayName: string;\n};\nexport type ChatBodyClassNames = Readonly<{\n    wrapper?: string;\n    loader: string;\n}>;\nexport interface ChatBodyProps {\n    withBgColor?: boolean;\n    isLoading?: boolean;\n    loadingText?: string;\n    children?: React.ReactNode;\n    classNames?: ClassNames;\n    testId?: string;\n}\nexport declare const ChatBody: {\n    ({ withBgColor, isLoading, children, loadingText, classNames, testId, }: ChatBodyProps): React.JSX.Element;\n    displayName: string;\n};\nexport interface ChatFooterProps {\n    classNames?: ClassNames;\n    children?: React.ReactNode;\n    testId?: string;\n}\nexport declare const ChatFooter: {\n    ({ children, classNames, testId }: ChatFooterProps): React.JSX.Element;\n    displayName: string;\n};\nexport interface ChatFooterRightSlotProps {\n    children?: React.ReactNode;\n    classNames?: ClassNames;\n    testId?: string;\n}\nexport declare const ChatFooterRightSlot: {\n    ({ children, classNames, testId, }: ChatFooterRightSlotProps): React.JSX.Element;\n    displayName: string;\n};\nexport interface ChatFooterLeftSlotProps {\n    children?: React.ReactNode;\n    classNames?: ClassNames;\n    testId?: string;\n}\nexport declare const ChatFooterLeftSlot: {\n    ({ children, classNames, testId, }: ChatFooterLeftSlotProps): React.JSX.Element;\n    displayName: string;\n};\nexport {};\n//# sourceMappingURL=ChatBubble.d.ts.map"
+          "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nimport type { AvatarProps } from '../../components/Avatar';\nimport type { BaseTooltipProps } from '../../components/Tooltip';\ntype ClassNames = Readonly<{\n    wrapper?: string;\n}>;\nexport declare const CHAT_BUBBLE_ORIENTATION: Readonly<{\n    left: \"left\";\n    right: \"right\";\n}>;\nexport type ChatBubbleOrientation = (typeof CHAT_BUBBLE_ORIENTATION)[keyof typeof CHAT_BUBBLE_ORIENTATION];\nexport interface ChatBubbleProps {\n    classNames?: ClassNames;\n    orientation?: ChatBubbleOrientation;\n    children: React.ReactNode;\n    testId?: string;\n}\nexport declare const ChatBubble: Flow.AbstractComponent<ChatBubbleProps, HTMLDivElement>;\nexport interface ChatAnchorProps {\n    isAI?: boolean;\n    tooltip?: BaseTooltipProps;\n    classNames?: ClassNames;\n    avatarProps?: AvatarProps;\n    testId?: string;\n}\nexport declare const ChatAnchor: {\n    ({ isAI, tooltip, classNames, avatarProps, testId, }: ChatAnchorProps): React.JSX.Element;\n    displayName: string;\n};\nexport interface ChatContentProps {\n    classNames?: ClassNames;\n    children?: React.ReactNode;\n    testId?: string;\n}\nexport declare const ChatContent: {\n    ({ classNames, children, testId, }: ChatContentProps): React.JSX.Element;\n    displayName: string;\n};\nexport type ChatBodyClassNames = Readonly<{\n    wrapper?: string;\n    loader: string;\n}>;\nexport interface ChatBodyProps {\n    withBgColor?: boolean;\n    isLoading?: boolean;\n    loadingText?: string;\n    children?: React.ReactNode;\n    classNames?: ClassNames;\n    testId?: string;\n}\nexport declare const ChatBody: {\n    ({ withBgColor, isLoading, children, loadingText, classNames, testId, }: ChatBodyProps): React.JSX.Element;\n    displayName: string;\n};\nexport interface ChatFooterProps {\n    classNames?: ClassNames;\n    children?: React.ReactNode;\n    testId?: string;\n}\nexport declare const ChatFooter: {\n    ({ children, classNames, testId }: ChatFooterProps): React.JSX.Element;\n    displayName: string;\n};\nexport interface ChatFooterRightSlotProps {\n    children?: React.ReactNode;\n    classNames?: ClassNames;\n    testId?: string;\n}\nexport declare const ChatFooterRightSlot: {\n    ({ children, classNames, testId, }: ChatFooterRightSlotProps): React.JSX.Element;\n    displayName: string;\n};\nexport interface ChatFooterLeftSlotProps {\n    children?: React.ReactNode;\n    classNames?: ClassNames;\n    testId?: string;\n}\nexport declare const ChatFooterLeftSlot: {\n    ({ children, classNames, testId, }: ChatFooterLeftSlotProps): React.JSX.Element;\n    displayName: string;\n};\nexport {};\n//# sourceMappingURL=ChatBubble.d.ts.map"
         },
         "story": {
           "path": "ChatBubble.stories.tsx",
-          "content": "import * as React from 'react';\n\nimport {Button} from 'src/components/Button';\nimport type {ChatBubbleProps} from 'src/components/ChatBubble';\nimport {\n  CHAT_BUBBLE_ORIENTATION,\n  ChatAnchor,\n  ChatBody,\n  ChatBubble,\n  ChatContent,\n  ChatFooter,\n  ChatFooterLeftSlot,\n  ChatFooterRightSlot,\n} from 'src/components/ChatBubble/ChatBubble';\nimport {Separator} from 'src/components/Separator';\nimport {BodyMedium, SubTitleSmall} from 'src/components/Text';\n\nimport css from 'src/components/ChatBubble/ChatBubble.stories.module.css';\n\n\nexport const ChatFooterWithIcons = () => (\n  <ChatFooter>\n    <ChatFooterLeftSlot classNames={{wrapper: css.footerWrapperLeftSlot}}>\n      <Button iconRightName=\"flag\" size=\"small\" type=\"ghost\" ariaLabel=\"Flag\" />\n      <Separator classNames={{wrapper: css.separatorMargin}} />\n      <div className={css.buttonWrapper}>\n        <Button\n          iconRightName=\"thumbs-up\"\n          size=\"small\"\n          type=\"ghost\"\n          ariaLabel=\"Thumbs Up\"\n        />\n        <Button\n          iconRightName=\"thumbs-down\"\n          size=\"small\"\n          type=\"ghost\"\n          ariaLabel=\"Thumbs Down\"\n        />\n      </div>\n    </ChatFooterLeftSlot>\n    <ChatFooterRightSlot classNames={{wrapper: css.footerWrapperRightSlot}}>\n      <Button children=\"Secondary\" type=\"ghost\" size=\"small\" />\n      <Button children=\"Primary\" type=\"secondary\" size=\"small\" />\n    </ChatFooterRightSlot>\n  </ChatFooter>\n);\n\nexport default {\n  tags: ['autodocs'],\n  title: 'AI Prompt Components/Chat Bubble',\n  component: ChatBubble,\n  argTypes: {\n    orientation: {\n      description: 'Determines the alignment of the chat bubble.',\n      control: {type: 'radio'},\n      options: [CHAT_BUBBLE_ORIENTATION.left, CHAT_BUBBLE_ORIENTATION.right],\n      table: {\n        type: {\n          summary: `${CHAT_BUBBLE_ORIENTATION.left} | ${CHAT_BUBBLE_ORIENTATION.right}`,\n        },\n        defaultValue: {summary: `${CHAT_BUBBLE_ORIENTATION.left}`},\n      },\n    },\n    classNames: {\n      description:\n        'Provide an optional className to be applied to the wrapper.',\n      control: {type: 'text'},\n      table: {\n        type: {summary: '{ wrapper?: string }'},\n      },\n    },\n  },\n  parameters: {\n    docs: {\n      subtitle: 'Generates a ChatBubble component.',\n      description: {\n        component: `\n\\`\\`\\`js\nimport { ChatBubble } from \"@spaced-out/ui-design-system/lib/components/ChatBubble\";\n\\`\\`\\`\nThe ChatBubble component is used to structure chat messages with anchors, content, and a footer.\n        `,\n      },\n    },\n    storySource: {\n      componentPath: '/src/components/ChatBubble/ChatBubble',\n    },\n  },\n};\n\n// Default ChatBubble Story\nexport const DefaultStory = (args: ChatBubbleProps) => (\n  <ChatBubble {...args}>\n    <ChatAnchor />\n    <ChatContent>\n      <ChatBody>\n        <BodyMedium>\n          Generative AI (GenAI) enables systems to generate human-like\n          responses, content, or ideas dynamically, leveraging advanced machine\n          learning models. In conversational applications, GenAI enhances user\n          experiences by enabling intelligent, context-aware, and natural\n          language interactions.\n        </BodyMedium>\n      </ChatBody>\n      <ChatFooterWithIcons />\n    </ChatContent>\n  </ChatBubble>\n);\n\nDefaultStory.storyName = 'Default Chat Bubble';\nDefaultStory.args = {\n  orientation: 'left',\n};\n\n// ChatBubble with Custom User Message\nexport const WithUserMessageStory = (args: ChatBubbleProps) => (\n  <ChatBubble {...args}>\n    <ChatAnchor\n      isAI={false}\n      avatarProps={{\n        imageSrc:\n          'https://cdn.sensehq.com/genesis/hashed/static/images/personas/1.png',\n        text: 'Adam Craig Gilchrist',\n      }}\n    />\n    <ChatContent>\n      <ChatBody withBgColor={false}>\n        <BodyMedium>This message has a custom avatar.</BodyMedium>\n      </ChatBody>\n    </ChatContent>\n  </ChatBubble>\n);\n\nWithUserMessageStory.storyName = 'Chat Bubble With Custom User';\nWithUserMessageStory.args = {\n  orientation: 'left',\n};\n\n// ChatBubble with No Anchor\nexport const NoAnchorStory = (args: ChatBubbleProps) => (\n  <ChatBubble {...args}>\n    <ChatContent>\n      <ChatBody>\n        <BodyMedium>\n          Generative AI (GenAI) enables systems to generate human-like\n          responses, content, or ideas dynamically, leveraging advanced machine\n          learning models. In conversational applications, GenAI enhances user\n          experiences by enabling intelligent, context-aware, and natural\n          language interactions.\n        </BodyMedium>\n      </ChatBody>\n      <ChatFooterWithIcons />\n    </ChatContent>\n  </ChatBubble>\n);\n\nNoAnchorStory.storyName = 'Chat Bubble Without Anchor';\n\n// ChatBubble with Custom Avatar\nexport const WithAvatarStory = (args: ChatBubbleProps) => (\n  <ChatBubble {...args}>\n    <ChatAnchor\n      isAI={false}\n      avatarProps={{\n        imageSrc:\n          'https://cdn.sensehq.com/genesis/hashed/static/images/personas/1.png',\n        text: 'Adam Craig Gilchrist',\n      }}\n    />\n    <ChatContent>\n      <ChatBody>\n        <BodyMedium>This message has a custom avatar.</BodyMedium>\n      </ChatBody>\n      <ChatFooterWithIcons />\n    </ChatContent>\n  </ChatBubble>\n);\n\nWithAvatarStory.storyName = 'Chat Bubble With Avatar';\nWithAvatarStory.args = {\n  orientation: 'left',\n};\n\n// Loading State in ChatBubble\nexport const LoadingStateStory = (args: ChatBubbleProps) => (\n  <ChatBubble {...args}>\n    <ChatAnchor />\n    <ChatContent>\n      <ChatBody isLoading loadingText=\"Loading message\" />\n    </ChatContent>\n  </ChatBubble>\n);\n\nLoadingStateStory.storyName = 'Chat Bubble Loading State';\nLoadingStateStory.args = {\n  orientation: 'left',\n};\n\n// Data State in ChatBubble\nexport const DataStateStory = (args: ChatBubbleProps) => (\n  <ChatBubble {...args}>\n    <ChatAnchor />\n    <ChatContent>\n      <ChatBody>\n        <SubTitleSmall>Title</SubTitleSmall>\n        <BodyMedium>\n          Generative AI (GenAI) enables systems to generate human-like\n          responses, content, or ideas dynamically, leveraging advanced machine\n          learning models. In conversational applications, GenAI enhances user\n          experiences by enabling intelligent, context-aware, and natural\n          language interactions.\n        </BodyMedium>\n      </ChatBody>\n      <ChatFooterWithIcons />\n    </ChatContent>\n  </ChatBubble>\n);\n\nDataStateStory.storyName = 'Chat Bubble With Data';\nDataStateStory.args = {\n  orientation: 'left',\n};\n\n// EMpty Slot in ChatBubble\nexport const EmptySlotStory = (args: ChatBubbleProps) => (\n  <ChatBubble {...args}>\n    <ChatContent classNames={{wrapper: css.emptyChatContent}}>\n      <ChatBody classNames={{wrapper: css.emptyBodyChat}}>\n        <BodyMedium></BodyMedium>\n      </ChatBody>\n      <ChatFooterWithIcons />\n    </ChatContent>\n  </ChatBubble>\n);\n\nEmptySlotStory.storyName = 'Chat Bubble With Empty Slot';\nEmptySlotStory.args = {\n  orientation: 'left',\n};\n\nexport const WithLongTextSlotStory = (args: ChatBubbleProps) => (\n  <ChatBubble {...args}>\n    <ChatContent>\n      <ChatBody classNames={{wrapper: css.longChatContent}}>\n        <BodyMedium>\n          Generative AI (GenAI) represents a transform leap in the field of\n          artificial intelligence, enabling systems to generate human-like\n          responses, content, or ideas dynamically. This cutting-edge technology\n          leverages advanced machine learning models, including neural networks\n          like GPT (Generative Pre-trained Transformer) and other sophisticated\n          algorithms, to create coherent, contextually appropriate, and natural\n          outputs. The capability of GenAI to mimic human creativity and\n          language is not merely theoretical—it is actively reshaping\n          industries, enhancing user experiences, and revolutionizing the way\n          humans and machines interact. At its core, Generative AI operates by\n          understanding and analyzing massive datasets to learn patterns,\n          structures, and nuances of language or other types of input. Unlike\n          traditional AI systems, which are designed to follow predefined rules\n          or produce outputs based on specific programming, GenAI systems adapt\n          dynamically. They can respond to queries, generate creative content,\n          and simulate human-like understanding without requiring explicit\n          instructions for every scenario. This makes GenAI an invaluable tool\n          in applications ranging from conversational interfaces to content\n          creation, personalized recommendations, and beyond. In conversational\n          applications, Generative AI has emerged as a cornerstone of\n          intelligent, context-aware interactions. Whether it’s powering\n          chatbot, virtual assistants, or customer support agents, GenAI ensures\n          that users experience seamless and natural communication. For example,\n          when users engage with a customer service chatbot, a GenAI system\n          doesn’t simply respond with pre-written scripts. Instead, it\n          understands the user’s query, interprets the context, and crafts\n          responses that feel human and empathetic. This not only improves the\n          efficiency of the interaction but also leaves users feeling heard and\n          understood. The transform impact of GenAI extends far beyond customer\n          service. In education, for instance, GenAI is being used to create\n          adaptive learning environments. These systems can generate\n          personalized lesson plans, answer complex questions, and provide\n          feedback to students in real time, catering to individual learning\n          styles and needs. Similarly, in healthcare, GenAI powers virtual\n          health assistants that can triage symptoms, provide medical\n          information, and even remind patients to take their medications. These\n          applications demonstrate how GenAI is not only enhancing efficiency\n          but also contributing to better outcomes in critical fields.\n        </BodyMedium>\n      </ChatBody>\n      <ChatFooterWithIcons />\n    </ChatContent>\n  </ChatBubble>\n);\n\nWithLongTextSlotStory.storyName = 'Chat Bubble With Long Text';\nWithLongTextSlotStory.args = {\n  orientation: 'left',\n};\n"
+          "content": "import * as React from 'react';\n\nimport {Button} from 'src/components/Button';\nimport type {ChatBubbleProps} from 'src/components/ChatBubble';\nimport {\n  CHAT_BUBBLE_ORIENTATION,\n  ChatAnchor,\n  ChatBody,\n  ChatBubble,\n  ChatContent,\n  ChatFooter,\n  ChatFooterLeftSlot,\n  ChatFooterRightSlot,\n} from 'src/components/ChatBubble/ChatBubble';\nimport {Separator} from 'src/components/Separator';\nimport {BodyMedium, SubTitleSmall} from 'src/components/Text';\n\nimport css from 'src/components/ChatBubble/ChatBubble.stories.module.css';\n\n\nexport const ChatFooterWithIcons = () => (\n  <ChatFooter>\n    <ChatFooterLeftSlot classNames={{wrapper: css.footerWrapperLeftSlot}}>\n      <Button iconRightName=\"flag\" size=\"small\" type=\"ghost\" ariaLabel=\"Flag\" />\n      <Separator classNames={{wrapper: css.separatorMargin}} />\n      <div className={css.buttonWrapper}>\n        <Button\n          iconRightName=\"thumbs-up\"\n          size=\"small\"\n          type=\"ghost\"\n          ariaLabel=\"Thumbs Up\"\n        />\n        <Button\n          iconRightName=\"thumbs-down\"\n          size=\"small\"\n          type=\"ghost\"\n          ariaLabel=\"Thumbs Down\"\n        />\n      </div>\n    </ChatFooterLeftSlot>\n    <ChatFooterRightSlot classNames={{wrapper: css.footerWrapperRightSlot}}>\n      <Button children=\"Secondary\" type=\"ghost\" size=\"small\" />\n      <Button children=\"Primary\" type=\"secondary\" size=\"small\" />\n    </ChatFooterRightSlot>\n  </ChatFooter>\n);\n\nexport default {\n  tags: ['autodocs'],\n  title: 'AI Prompt Components/Chat Bubble',\n  component: ChatBubble,\n  argTypes: {\n    orientation: {\n      description: 'Determines the alignment of the chat bubble.',\n      control: {type: 'radio'},\n      options: [CHAT_BUBBLE_ORIENTATION.left, CHAT_BUBBLE_ORIENTATION.right],\n      table: {\n        type: {\n          summary: `${CHAT_BUBBLE_ORIENTATION.left} | ${CHAT_BUBBLE_ORIENTATION.right}`,\n        },\n        defaultValue: {summary: `${CHAT_BUBBLE_ORIENTATION.left}`},\n      },\n    },\n    classNames: {\n      description:\n        'Provide an optional className to be applied to the wrapper.',\n      control: {type: 'text'},\n      table: {\n        type: {summary: '{ wrapper?: string }'},\n      },\n    },\n  },\n  parameters: {\n    docs: {\n      subtitle: 'Generates a ChatBubble component.',\n      description: {\n        component: `\n\\`\\`\\`js\nimport { ChatBubble } from \"@spaced-out/ui-design-system/lib/components/ChatBubble\";\n\\`\\`\\`\nThe ChatBubble component is used to structure chat messages with anchors, content, and a footer.\n        `,\n      },\n    },\n    storySource: {\n      componentPath: '/src/components/ChatBubble/ChatBubble',\n    },\n  },\n};\n\n// Default ChatBubble Story\nexport const DefaultStory = (args: ChatBubbleProps) => (\n  <ChatBubble {...args}>\n    <ChatAnchor />\n    <ChatContent>\n      <ChatBody>\n        <BodyMedium>\n          Generative AI (GenAI) enables systems to generate human-like\n          responses, content, or ideas dynamically, leveraging advanced machine\n          learning models. In conversational applications, GenAI enhances user\n          experiences by enabling intelligent, context-aware, and natural\n          language interactions.\n        </BodyMedium>\n      </ChatBody>\n      <ChatFooterWithIcons />\n    </ChatContent>\n  </ChatBubble>\n);\n\nDefaultStory.storyName = 'Default Chat Bubble';\nDefaultStory.args = {\n  orientation: 'left',\n};\n\n// ChatBubble with Custom User Message\nexport const WithUserMessageStory = (args: ChatBubbleProps) => (\n  <ChatBubble {...args}>\n    <ChatAnchor\n      isAI={false}\n      avatarProps={{\n        imageSrc:\n          'https://cdn.sensehq.com/genesis/hashed/static/images/personas/1.png',\n        text: 'Adam Craig Gilchrist',\n      }}\n    />\n    <ChatContent>\n      <ChatBody withBgColor={true}>\n        <BodyMedium>This message has a custom avatar.</BodyMedium>\n      </ChatBody>\n    </ChatContent>\n  </ChatBubble>\n);\n\nWithUserMessageStory.storyName = 'Chat Bubble With Custom User';\nWithUserMessageStory.args = {\n  orientation: 'left',\n};\n\n// ChatBubble with No Anchor\nexport const NoAnchorStory = (args: ChatBubbleProps) => (\n  <ChatBubble {...args}>\n    <ChatContent>\n      <ChatBody>\n        <BodyMedium>\n          Generative AI (GenAI) enables systems to generate human-like\n          responses, content, or ideas dynamically, leveraging advanced machine\n          learning models. In conversational applications, GenAI enhances user\n          experiences by enabling intelligent, context-aware, and natural\n          language interactions.\n        </BodyMedium>\n      </ChatBody>\n      <ChatFooterWithIcons />\n    </ChatContent>\n  </ChatBubble>\n);\n\nNoAnchorStory.storyName = 'Chat Bubble Without Anchor';\n\n// ChatBubble with Custom Avatar\nexport const WithAvatarStory = (args: ChatBubbleProps) => (\n  <ChatBubble {...args}>\n    <ChatAnchor\n      isAI={false}\n      avatarProps={{\n        imageSrc:\n          'https://cdn.sensehq.com/genesis/hashed/static/images/personas/1.png',\n        text: 'Adam Craig Gilchrist',\n      }}\n    />\n    <ChatContent>\n      <ChatBody>\n        <BodyMedium>This message has a custom avatar.</BodyMedium>\n      </ChatBody>\n      <ChatFooterWithIcons />\n    </ChatContent>\n  </ChatBubble>\n);\n\nWithAvatarStory.storyName = 'Chat Bubble With Avatar';\nWithAvatarStory.args = {\n  orientation: 'left',\n};\n\n// Loading State in ChatBubble\nexport const LoadingStateStory = (args: ChatBubbleProps) => (\n  <ChatBubble {...args}>\n    <ChatAnchor />\n    <ChatContent>\n      <ChatBody isLoading loadingText=\"Loading message\" />\n    </ChatContent>\n  </ChatBubble>\n);\n\nLoadingStateStory.storyName = 'Chat Bubble Loading State';\nLoadingStateStory.args = {\n  orientation: 'left',\n};\n\n// Data State in ChatBubble\nexport const DataStateStory = (args: ChatBubbleProps) => (\n  <ChatBubble {...args}>\n    <ChatAnchor />\n    <ChatContent>\n      <ChatBody>\n        <SubTitleSmall>Title</SubTitleSmall>\n        <BodyMedium>\n          Generative AI (GenAI) enables systems to generate human-like\n          responses, content, or ideas dynamically, leveraging advanced machine\n          learning models. In conversational applications, GenAI enhances user\n          experiences by enabling intelligent, context-aware, and natural\n          language interactions.\n        </BodyMedium>\n      </ChatBody>\n      <ChatFooterWithIcons />\n    </ChatContent>\n  </ChatBubble>\n);\n\nDataStateStory.storyName = 'Chat Bubble With Data';\nDataStateStory.args = {\n  orientation: 'left',\n};\n\n// EMpty Slot in ChatBubble\nexport const EmptySlotStory = (args: ChatBubbleProps) => (\n  <ChatBubble {...args}>\n    <ChatContent classNames={{wrapper: css.emptyChatContent}}>\n      <ChatBody classNames={{wrapper: css.emptyBodyChat}}>\n        <BodyMedium></BodyMedium>\n      </ChatBody>\n      <ChatFooterWithIcons />\n    </ChatContent>\n  </ChatBubble>\n);\n\nEmptySlotStory.storyName = 'Chat Bubble With Empty Slot';\nEmptySlotStory.args = {\n  orientation: 'left',\n};\n\nexport const WithLongTextSlotStory = (args: ChatBubbleProps) => (\n  <ChatBubble {...args}>\n    <ChatContent>\n      <ChatBody classNames={{wrapper: css.longChatContent}}>\n        <BodyMedium>\n          Generative AI (GenAI) represents a transform leap in the field of\n          artificial intelligence, enabling systems to generate human-like\n          responses, content, or ideas dynamically. This cutting-edge technology\n          leverages advanced machine learning models, including neural networks\n          like GPT (Generative Pre-trained Transformer) and other sophisticated\n          algorithms, to create coherent, contextually appropriate, and natural\n          outputs. The capability of GenAI to mimic human creativity and\n          language is not merely theoretical—it is actively reshaping\n          industries, enhancing user experiences, and revolutionizing the way\n          humans and machines interact. At its core, Generative AI operates by\n          understanding and analyzing massive datasets to learn patterns,\n          structures, and nuances of language or other types of input. Unlike\n          traditional AI systems, which are designed to follow predefined rules\n          or produce outputs based on specific programming, GenAI systems adapt\n          dynamically. They can respond to queries, generate creative content,\n          and simulate human-like understanding without requiring explicit\n          instructions for every scenario. This makes GenAI an invaluable tool\n          in applications ranging from conversational interfaces to content\n          creation, personalized recommendations, and beyond. In conversational\n          applications, Generative AI has emerged as a cornerstone of\n          intelligent, context-aware interactions. Whether it’s powering\n          chatbot, virtual assistants, or customer support agents, GenAI ensures\n          that users experience seamless and natural communication. For example,\n          when users engage with a customer service chatbot, a GenAI system\n          doesn’t simply respond with pre-written scripts. Instead, it\n          understands the user’s query, interprets the context, and crafts\n          responses that feel human and empathetic. This not only improves the\n          efficiency of the interaction but also leaves users feeling heard and\n          understood. The transform impact of GenAI extends far beyond customer\n          service. In education, for instance, GenAI is being used to create\n          adaptive learning environments. These systems can generate\n          personalized lesson plans, answer complex questions, and provide\n          feedback to students in real time, catering to individual learning\n          styles and needs. Similarly, in healthcare, GenAI powers virtual\n          health assistants that can triage symptoms, provide medical\n          information, and even remind patients to take their medications. These\n          applications demonstrate how GenAI is not only enhancing efficiency\n          but also contributing to better outcomes in critical fields.\n        </BodyMedium>\n      </ChatBody>\n      <ChatFooterWithIcons />\n    </ChatContent>\n  </ChatBubble>\n);\n\nWithLongTextSlotStory.storyName = 'Chat Bubble With Long Text';\nWithLongTextSlotStory.args = {\n  orientation: 'left',\n};\n"
         },
         "css": {
           "path": "ChatBubble.module.css",
-          "content": "@value (\n  spaceNone,\n  spaceXXSmall,\n  spaceXSmall,\n  spaceSmall\n) from '../../styles/variables/_space.css';\n@value (\n  colorBorderPrimary,\n  colorBackgroundTertiary,\n  colorNeutralLightest,\n  colorFillPrimary,\n  colorInformation\n) from '../../styles/variables/_color.css';\n@value (\n  borderWidthPrimary,\n  borderRadiusSmall,\n  borderRadiusCircle\n) from '../../styles/variables/_border.css';\n@value (\n  size2,\n  size12,\n  size24,\n  size42,\n  size580\n) from '../../styles/variables/_size.css';\n@value (\n  opacity100, \n  opacity60,\n  opacity80\n) from '../../styles/variables/_opacity.css';\n\n.chatBubbleWrapper {\n  display: flex;\n  gap: spaceSmall;\n  flex-direction: row;\n}\n\n.chatBubbleWrapperRight {\n  flex-direction: row-reverse;\n}\n\n.chatAnchorWrapper {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: size42;\n  width: size42;\n}\n\n.chatContentWrapper {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: spaceXSmall;\n  border: borderWidthPrimary solid colorBorderPrimary;\n  border-radius: borderRadiusSmall;\n  background-color: colorBackgroundTertiary;\n  padding: spaceXSmall spaceSmall;\n  max-width: size580;\n  min-height: size42;\n}\n\n.chatBodyWrapper {\n  padding: spaceSmall;\n  border-radius: borderRadiusSmall;\n}\n\n.chatBodyWrapperBgColor {\n  background-color: colorNeutralLightest;\n  margin-top: spaceXXSmall;\n  word-wrap: break-word;\n}\n\n.chatBodyWrapperLoading {\n  padding: spaceNone;\n  background-color: colorBackgroundTertiary;\n}\n\n.chatFooterWrapper {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: spaceXSmall;\n}\n\n.loadingContainer {\n  display: flex;\n  align-items: flex-start;\n}\n\n.loadingText {\n  composes: buttonTextMedium from '../../styles/typography.module.css';\n  display: inline-flex;\n  background: linear-gradient(90deg, colorFillPrimary, colorInformation);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n}\n\n.loader {\n  position: relative;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  gap: size2; /* Small gap between dots */\n  width: size24;\n}\n\n.dot {\n  width: calc(size12/4);\n  height: calc(size12/4);\n  background: linear-gradient(90deg, colorFillPrimary, colorInformation);\n  border-radius: borderRadiusCircle;\n  opacity: opacity80;\n\n  /* Bounce Animation */\n  animation: bounce 0.5s infinite ease-in-out alternate;\n}\n\n.dot:nth-child(1) {\n  animation-delay: 0s;\n}\n\n.dot:nth-child(2) {\n  animation-delay: 0.1s; /* Slight delay for second dot */\n}\n\n.dot:nth-child(3) {\n  animation-delay: 0.2s; /* Slight delay for third dot */\n}\n\n@keyframes bounce {\n  0% {\n    transform: translateY(0);\n    opacity: opacity60;\n  }\n  100% {\n    transform: translateY(size12); /* Higher bounce */\n    opacity: opacity100;\n  }\n}\n"
+          "content": "@value (\n  spaceNone,\n  spaceXXSmall,\n  spaceXSmall,\n  spaceSmall\n) from '../../styles/variables/_space.css';\n@value (\n  colorBorderPrimary,\n  colorBackgroundTertiary,\n  colorNeutralLightest,\n  colorFillPrimary,\n  colorInformation\n) from '../../styles/variables/_color.css';\n@value (\n  borderWidthPrimary,\n  borderRadiusSmall,\n  borderRadiusCircle\n) from '../../styles/variables/_border.css';\n@value (\n  size2,\n  size12,\n  size24,\n  size34,\n  size42,\n  size580\n) from '../../styles/variables/_size.css';\n@value (\n  opacity100,\n  opacity60,\n  opacity80\n) from '../../styles/variables/_opacity.css';\n\n.chatBubbleWrapper {\n  display: flex;\n  gap: spaceSmall;\n  flex-direction: row;\n}\n\n.chatBubbleWrapperRight {\n  flex-direction: row-reverse;\n}\n\n.chatAnchorWrapper {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: size42;\n  width: size42;\n}\n\n.chatContentWrapper {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: spaceXSmall;\n  border-radius: borderRadiusSmall;\n  max-width: size580;\n  min-height: size42;\n}\n\n.chatBodyWrapper {\n  padding-top: spaceSmall;\n  border-radius: borderRadiusSmall;\n}\n\n.chatBodyWrapperLoading {\n  padding-top: spaceNone;\n}\n\n.chatBodyWrapperBgColor {\n  background-color: colorNeutralLightest;\n  padding: spaceSmall;\n  word-wrap: break-word;\n}\n\n.chatFooterWrapper {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: spaceXSmall;\n}\n\n.loadingContainer {\n  display: flex;\n  align-items: flex-start;\n  padding-top: spaceNone;\n}\n\n.loadingText {\n  composes: buttonTextMedium from '../../styles/typography.module.css';\n  display: inline-flex;\n  background: linear-gradient(90deg, colorFillPrimary, colorInformation);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n}\n\n.loader {\n  position: relative;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  gap: size2; /* Small gap between dots */\n  width: size24;\n}\n\n.dot {\n  width: calc(size12/4);\n  height: calc(size12/4);\n  background: linear-gradient(90deg, colorFillPrimary, colorInformation);\n  border-radius: borderRadiusCircle;\n  opacity: opacity80;\n\n  /* Bounce Animation */\n  animation: bounce 0.5s infinite ease-in-out alternate;\n}\n\n.dot:nth-child(1) {\n  animation-delay: 0s;\n}\n\n.dot:nth-child(2) {\n  animation-delay: 0.1s; /* Slight delay for second dot */\n}\n\n.dot:nth-child(3) {\n  animation-delay: 0.2s; /* Slight delay for third dot */\n}\n\n@keyframes bounce {\n  0% {\n    transform: translateY(0);\n    opacity: opacity60;\n  }\n  100% {\n    transform: translateY(size12); /* Higher bounce */\n    opacity: opacity100;\n  }\n}\n"
         },
         "index": {
           "path": "index.d.ts",
@@ -610,7 +610,7 @@
         },
         "css": {
           "path": "Checklist.module.css",
-          "content": "@value (\n  colorBorderPrimary,\n  colorBackgroundPrimary,\n  colorBackgroundTertiary,\n  colorBackgroundSecondary,\n  colorFillPrimary\n) from '../../styles/variables/_color.css';\n@value (\n  sizeFluid,\n  size58,\n  size34,\n  size42,\n  size8,\n  size400,\n  size20,\n  size100,\n  size200\n) from '../../styles/variables/_size.css';\n@value (\n  spaceSmall,\n  spaceXSmall\n) from '../../styles/variables/_space.css';\n@value (\n  elevationCard,\n  elevationMenu\n) from '../../styles/variables/_elevation.css';\n@value (\n  borderWidthPrimary,\n  borderRadiusSmall,\n  borderRadiusNone\n) from '../../styles/variables/_border.css';\n\n.wrapper {\n  display: flex;\n  flex-flow: column;\n  width: sizeFluid;\n  position: relative;\n}\n\n.header {\n  composes: subTitleSmall from '../../styles/typography.module.css';\n  composes: borderPrimary from '../../styles/border.module.css';\n  min-height: size42;\n  border-radius: borderRadiusSmall;\n  display: flex;\n  cursor: pointer;\n  align-items: flex-start;\n  width: sizeFluid;\n  justify-content: space-between;\n  gap: spaceSmall;\n  padding: spaceSmall;\n  background-color: colorBackgroundTertiary;\n  z-index: elevationCard;\n}\n\n.header.isOpen {\n  min-height: size58;\n  background-color: colorBackgroundPrimary;\n}\n\n.headerContent {\n  display: flex;\n  gap: spaceXSmall;\n  align-items: center;\n  justify-content: space-between;\n  width: sizeFluid;\n}\n\n.content {\n  display: flex;\n  flex-flow: column;\n  background-color: colorBackgroundPrimary;\n  position: relative;\n  margin-top: calc(-1 * size20);\n  border-radius: borderRadiusSmall;\n  width: sizeFluid;\n}\n\n.cardWrapper {\n  z-index: elevationMenu;\n}\n\n.contentContainer {\n  display: flex;\n  padding: spaceSmall;\n}\n\n.actionContainer {\n  display: flex;\n  border-top: borderWidthPrimary solid colorBorderPrimary;\n  border-radius: borderRadiusNone borderRadiusNone borderRadiusSmall\n    borderRadiusSmall;\n  background-color: colorBackgroundTertiary;\n  padding: spaceSmall;\n  gap: spaceXSmall;\n}\n\n.titleContainer {\n  display: flex;\n  gap: spaceXSmall;\n  align-items: center;\n}\n\n.cardContentContainer {\n  display: flex;\n  flex-flow: column;\n  gap: spaceXSmall;\n  padding: spaceSmall;\n  width: sizeFluid;\n  justify-content: space-between;\n  max-height: size400;\n  overflow-y: auto;\n}\n\n.checklistItemContainer {\n  display: flex;\n  gap: spaceXSmall;\n  align-items: center;\n  width: sizeFluid;\n  background-color: colorBackgroundTertiary;\n  height: size34;\n  border-radius: borderRadiusSmall;\n  padding: spaceXSmall;\n  cursor: pointer;\n}\n\n.checklistItemContainer:hover {\n  background-color: colorBackgroundSecondary;\n}\n\n.checklistItemLeft {\n  display: flex;\n  gap: spaceXSmall;\n  align-items: center;\n  width: sizeFluid;\n}\n\n.checklistItemRight {\n  display: flex;\n  gap: spaceXSmall;\n  align-items: center;\n}\n\n.progressLinear {\n  min-width: size100;\n  max-width: size200;\n  background-color: colorBorderPrimary;\n  border-radius: borderRadiusSmall;\n  height: size8;\n  box-sizing: content-box;\n}\n\n.progressLinearBar {\n  height: size8;\n  background-color: colorFillPrimary;\n  border-radius: borderRadiusSmall;\n}\n\n.checklistProgressBar {\n  display: flex;\n  gap: spaceXSmall;\n  align-items: center;\n  min-width: max-content;\n}\n"
+          "content": "@value (\n  colorBorderPrimary,\n  colorBackgroundPrimary,\n  colorBackgroundTertiary,\n  colorBackgroundSecondary,\n  colorFillPrimary\n) from '../../styles/variables/_color.css';\n@value (\n  sizeFluid,\n  size68,\n  size34,\n  size42,\n  size8,\n  size400,\n  size20,\n  size100,\n  size200\n) from '../../styles/variables/_size.css';\n@value (\n  spaceSmall,\n  spaceXSmall\n) from '../../styles/variables/_space.css';\n@value (\n  elevationCard,\n  elevationMenu\n) from '../../styles/variables/_elevation.css';\n@value (\n  borderWidthPrimary,\n  borderRadiusSmall,\n  borderRadiusNone\n) from '../../styles/variables/_border.css';\n\n.wrapper {\n  display: flex;\n  flex-flow: column;\n  width: sizeFluid;\n  position: relative;\n}\n\n.header {\n  composes: subTitleSmall from '../../styles/typography.module.css';\n  composes: borderPrimary from '../../styles/border.module.css';\n  min-height: size42;\n  border-radius: borderRadiusSmall;\n  display: flex;\n  cursor: pointer;\n  align-items: flex-start;\n  width: sizeFluid;\n  justify-content: space-between;\n  gap: spaceSmall;\n  padding: spaceSmall;\n  background-color: colorBackgroundTertiary;\n  z-index: elevationCard;\n}\n\n.header.isOpen {\n  min-height: size68;\n  background-color: colorBackgroundPrimary;\n}\n\n.headerContent {\n  display: flex;\n  gap: spaceXSmall;\n  align-items: center;\n  justify-content: space-between;\n  width: sizeFluid;\n}\n\n.content {\n  display: flex;\n  flex-flow: column;\n  background-color: colorBackgroundPrimary;\n  position: relative;\n  margin-top: calc(-1 * size20);\n  border-radius: borderRadiusSmall;\n  width: sizeFluid;\n}\n\n.cardWrapper {\n  z-index: elevationMenu;\n}\n\n.contentContainer {\n  display: flex;\n  padding: spaceSmall;\n}\n\n.actionContainer {\n  display: flex;\n  border-top: borderWidthPrimary solid colorBorderPrimary;\n  border-radius: borderRadiusNone borderRadiusNone borderRadiusSmall\n    borderRadiusSmall;\n  background-color: colorBackgroundTertiary;\n  padding: spaceSmall;\n  gap: spaceXSmall;\n}\n\n.titleContainer {\n  display: flex;\n  gap: spaceXSmall;\n  align-items: center;\n}\n\n.cardContentContainer {\n  display: flex;\n  flex-flow: column;\n  gap: spaceXSmall;\n  padding: spaceSmall;\n  width: sizeFluid;\n  justify-content: space-between;\n  max-height: size400;\n  overflow-y: auto;\n}\n\n.checklistItemContainer {\n  display: flex;\n  gap: spaceXSmall;\n  align-items: center;\n  width: sizeFluid;\n  background-color: colorBackgroundTertiary;\n  height: size34;\n  border-radius: borderRadiusSmall;\n  padding: spaceXSmall;\n  cursor: pointer;\n}\n\n.checklistItemContainer:hover {\n  background-color: colorBackgroundSecondary;\n}\n\n.checklistItemLeft {\n  display: flex;\n  gap: spaceXSmall;\n  align-items: center;\n  width: sizeFluid;\n}\n\n.checklistItemRight {\n  display: flex;\n  gap: spaceXSmall;\n  align-items: center;\n}\n\n.progressLinear {\n  min-width: size100;\n  max-width: size200;\n  background-color: colorBorderPrimary;\n  border-radius: borderRadiusSmall;\n  height: size8;\n  box-sizing: content-box;\n}\n\n.progressLinearBar {\n  height: size8;\n  background-color: colorFillPrimary;\n  border-radius: borderRadiusSmall;\n}\n\n.checklistProgressBar {\n  display: flex;\n  gap: spaceXSmall;\n  align-items: center;\n  min-width: max-content;\n}\n"
         },
         "index": {
           "path": "index.d.ts",
@@ -4650,6 +4650,9 @@
           "66": {
             "value": "66px"
           },
+          "68": {
+            "value": "68px"
+          },
           "70": {
             "value": "70px"
           },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/genesis-mcp",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "MCP server for Genesis UI Design System - provides AI assistants with access to components, hooks, and design tokens",
   "type": "module",
   "main": "index.js",