@spaced-out/ui-design-system 0.4.12 → 0.4.13-beta.1

package/lib/components/AIPromptFlow/AIPromptFlow.stories.js

@@ -0,0 +1,225 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._AIPromptFlow = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _ChatBubble = require("../ChatBubble");
+var _ChatBubble2 = require("../ChatBubble/ChatBubble.stories");
+var _Disclaimer = require("../Disclaimer");
+var _Panel = require("../Panel");
+var _PromptChip = require("../PromptChip");
+var _PromptInput = require("../PromptInput");
+var _Text = require("../Text");
+var _Text2 = require("../Text/Text");
+var _TextTile = require("../TextTile");
+var _AIPromptFlowStoriesModule = _interopRequireDefault(require("./AIPromptFlow.stories.module.css"));
+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); }
+/* eslint-disable react/no-array-index-key */
+var _default = exports.default = {
+  tags: ['!autodocs'],
+  title: 'AI Prompt Components/AI Prompt Flow',
+  parameters: {
+    docs: {
+      subtitle: 'AI Prompt Flow example',
+      description: {
+        component: `
+This example showcases how to use the ai copilot flows in ui. feel free to copy code and respective css to mimic the exact UI
+        `
+      }
+    },
+    storySource: {
+      componentPath: '/src/components/Disclaimer/Disclaimer.jsx'
+    }
+  }
+};
+const 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.
+
+For 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.
+
+Sales 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).
+
+Employee 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.
+
+In 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.
+
+Financial 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.
+
+Data 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.
+
+A/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.
+
+Real-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.
+
+The 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.
+
+In 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.`;
+const PROMPTS = ['What is the offer acceptance rate?', 'Which source produces the best hires?', 'What is the average time to hire?', 'How many candidates are in the pipeline?', 'What is the average cost per hire?', 'Which department has the highest turnover rate?', 'What percentage of hires are from referrals?', 'How long does it take to fill a position?', 'What is the attrition rate for the past year?', 'Which jobs have the highest application drop-off rate?', 'What is the conversion rate from interview to hire?', 'How many candidates are rejected at each stage?', 'What is the average interview-to-offer ratio?', 'Which recruiters have the best performance metrics?', 'What percentage of candidates reject offers?', 'How satisfied are candidates with the hiring process?', 'What is the diversity ratio in the current workforce?', 'How many hires come from internal promotions?', 'What are the reasons for candidate drop-off?', 'How effective is the onboarding process?', 'What is the current employee engagement score?', 'How many candidates applied last quarter?', 'What percentage of job offers are pending?', 'How many interviews are conducted per position?', 'What is the overall hiring success rate?', 'What percentage of applicants are qualified?', 'How many candidates are awaiting feedback?', 'What is the average time to first interview?', 'Which job roles take the longest to fill?', 'What is the ratio of applicants to hires?', 'Which job boards drive the most applications?', 'What is the average time spent interviewing candidates?', 'How many passive candidates were contacted last month?', 'What percentage of hires are new graduates?', 'Which hiring stages have the highest drop-off?', 'How many candidates withdrew their applications?', 'What percentage of employees passed probation?', 'Which regions have the most successful hires?', 'What is the average number of interview rounds?', 'How many requisitions are still open?', 'Which departments have the lowest attrition?', 'What percentage of candidates complete assessments?', 'What is the satisfaction rate of new hires?', 'How many hires are expected this quarter?', 'What is the median salary for new hires?', 'How many requisitions were filled last month?', 'Which hiring sources are the most cost-effective?', 'How diverse are the recent hires?', 'How many employees left during onboarding?', 'What is the percentage of part-time hires?', 'How many job offers were rescinded?', 'What is the average candidate feedback score?', 'Which teams have the fastest hiring process?', 'What percentage of hires are internal candidates?', 'How many candidates are in the talent pool?', 'What is the average age of new hires?', 'How effective are employee referral programs?', 'What percentage of hires are remote employees?', 'How many candidates are considered overqualified?', 'Which recruiters have the fastest response time?', 'What is the average duration between offer and joining?', 'How satisfied are hiring managers with candidates?', 'Which skills are most common among recent hires?', 'How many candidates failed the technical assessment?', 'What is the drop-off rate during technical rounds?', 'What percentage of hires are contract workers?', 'How many job offers were declined last quarter?', 'What percentage of hires meet performance benchmarks?', 'How many positions remain unfilled after 90 days?', 'What is the hiring trend over the last six months?', 'What percentage of hires come from social media?', 'How effective is the candidate feedback loop?', 'What is the employee referral success rate?', 'How many active job seekers applied this month?', 'What percentage of candidates ask for offer extensions?', 'What is the typical rejection reason from candidates?', 'Which hiring stage causes the most delays?', 'What percentage of new hires recommend the process?', 'How many rehires were made this year?', 'What is the cost of a bad hire?', 'How many positions were closed due to budget cuts?', 'What percentage of hires exceed expectations?', 'How long do candidates stay on average?', 'What is the feedback score for interviewers?', 'Which stages have the most rescheduled interviews?', 'How many candidates received counteroffers?', 'What is the candidate response time for offers?', 'What percentage of candidates report a good experience?', 'How does the hiring rate compare year over year?', 'Which regions have the slowest time to hire?', 'How effective are pre-screening assessments?', 'How often do candidates ghost interviews?', 'What is the most requested role this year?', 'What percentage of new hires are retained after a year?', 'How many rejected candidates reapply later?', 'How many candidates fail during background checks?', 'What percentage of hires are diversity candidates?', 'How successful are hiring campaigns in different regions?', 'What is the satisfaction rate among rejected candidates?', 'How many roles are open for more than 6 months?', 'What percentage of hires move into leadership roles?'];
+const getRandomPrompts = prompts => {
+  const count = Math.floor(Math.random() * 3) + 1;
+  const shuffled = prompts.sort(() => 0.5 - Math.random());
+  return shuffled.slice(0, count);
+};
+const getRandomSentences = function (text) {
+  let wordLimit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 50;
+  const sentences = text.match(/[^.!?]+[.!?]/g) || [];
+  const result = [];
+  let totalWords = 0;
+  const shuffledSentences = sentences.sort(() => Math.random() - 0.5);
+  for (const sentence of shuffledSentences) {
+    const wordCount = sentence.trim().split(/\s+/).length;
+    if (totalWords + wordCount <= wordLimit || result.length === 0) {
+      result.push(sentence.trim());
+      totalWords += wordCount;
+    } else {
+      break;
+    }
+  }
+  return result.join(' ');
+};
+const _AIPromptFlow = () => {
+  const [value, setValue] = React.useState('');
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [responses, setResponses] = React.useState([]);
+  const [selectedPrompts, setSelectedPrompts] = React.useState(getRandomPrompts(PROMPTS));
+  const promptRef = React.useRef(null);
+  const loadingRef = React.useRef(null);
+  const generateResponse = text => {
+    const preparedResponses = [...responses];
+    setIsLoading(true);
+    setTimeout(() => {
+      // @ts-ignore - TS2339 - Property 'scrollIntoView' does not exist on type 'never'.
+      loadingRef.current?.scrollIntoView({
+        behavior: 'smooth'
+      });
+    });
+    setValue('');
+    const question = text ? text : value;
+
+    // @ts-ignore - TS2322 - Type 'string' is not assignable to type 'never'.
+    preparedResponses.push({
+      question,
+      answer: ''
+    });
+    setResponses(preparedResponses);
+    setTimeout(() => {
+      // @ts-ignore - TS2322 - Type 'string' is not assignable to type 'never'.
+      preparedResponses.push({
+        question: '',
+        answer: getRandomSentences(staticResponse)
+      });
+      setResponses(preparedResponses);
+      setIsLoading(false);
+      setSelectedPrompts(getRandomPrompts(PROMPTS));
+      // @ts-ignore - TS2339 - Property 'scrollIntoView' does not exist on type 'never'.
+      promptRef.current?.scrollIntoView({
+        behavior: 'smooth'
+      });
+    }, 2000);
+  };
+  return /*#__PURE__*/React.createElement(_Panel.Panel, {
+    isOpen: true,
+    anchor: "right",
+    size: "large"
+  }, /*#__PURE__*/React.createElement(_Panel.PanelHeader, null, "Copilot"), /*#__PURE__*/React.createElement(_Disclaimer.Disclaimer, {
+    classNames: {
+      wrapper: _AIPromptFlowStoriesModule.default.disclaimer
+    }
+  }, "Always check content generated by AI"), /*#__PURE__*/React.createElement(_Panel.PanelBody, {
+    className: _AIPromptFlowStoriesModule.default.panelBody
+  }, responses.length === 0 && !isLoading && /*#__PURE__*/React.createElement(_TextTile.TextTile, {
+    header: "Copilot",
+    description: "Ask anything to accomplish tasks in Sense.",
+    classNames: {
+      wrapper: _AIPromptFlowStoriesModule.default.copilotTextWrapper
+    }
+  }), responses.map((response, idx) => /*#__PURE__*/React.createElement("div", {
+    key: idx,
+    className: _AIPromptFlowStoriesModule.default.conversationAI
+  }, !!response.question && /*#__PURE__*/React.createElement(_ChatBubble.ChatBubble, {
+    orientation: "left"
+  }, /*#__PURE__*/React.createElement(_ChatBubble.ChatAnchor, {
+    avatarProps: {
+      text: 'Adam Craig Gilchrist'
+    },
+    isAI: false
+  }), /*#__PURE__*/React.createElement(_ChatBubble.ChatContent, null, /*#__PURE__*/React.createElement(_ChatBubble.ChatBody, {
+    withBgColor: false
+  }, /*#__PURE__*/React.createElement(_Text.BodyMedium, null, response.question)))), !!response.answer && /*#__PURE__*/React.createElement(React.Fragment, null, idx === 1 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_ChatBubble.ChatBubble, {
+    orientation: "left"
+  }, /*#__PURE__*/React.createElement(_ChatBubble.ChatAnchor, null), /*#__PURE__*/React.createElement(_ChatBubble.ChatContent, null, /*#__PURE__*/React.createElement(_ChatBubble.ChatBody, null, /*#__PURE__*/React.createElement(_Text2.SubTitleSmall, null, "This is our interpretation of you question"), /*#__PURE__*/React.createElement(_Text.BodyMedium, null, getRandomSentences(staticResponse))))), /*#__PURE__*/React.createElement(_ChatBubble.ChatBubble, {
+    orientation: "left",
+    classNames: {
+      wrapper: _AIPromptFlowStoriesModule.default.leftMarginSpace
+    }
+  }, /*#__PURE__*/React.createElement(_ChatBubble.ChatContent, null, /*#__PURE__*/React.createElement(_ChatBubble.ChatBody, null, /*#__PURE__*/React.createElement(_Text.BodyMedium, null, response.answer)), /*#__PURE__*/React.createElement(_ChatBubble2.ChatFooterWithIcons, null)))), idx === 3 && /*#__PURE__*/React.createElement(_ChatBubble.ChatBubble, {
+    orientation: "left"
+  }, /*#__PURE__*/React.createElement(_ChatBubble.ChatAnchor, null), /*#__PURE__*/React.createElement(_ChatBubble.ChatContent, null, /*#__PURE__*/React.createElement(_ChatBubble.ChatBody, {
+    classNames: {
+      wrapper: _AIPromptFlowStoriesModule.default.longChatContent
+    }
+  }, /*#__PURE__*/React.createElement(_Text.BodyMedium, null, "In a world where technology and imagination intertwine, the possibilities for innovation are boundless. Every passing day introduces new advancements that reshape the way humanity interacts with the world, creating a seamless blend of convenience, creativity, and connectivity. As artificial intelligence continues to grow in influence, its impact on everyday life becomes more profound, touching areas that range from healthcare to entertainment, from education to environmental conservation. Take, for instance, the story of a small town nestled in the valley of rolling hills. For decades, this town had thrived on traditional farming practices, cultivating crops and raising livestock in harmony with nature. However, the advent of technology introduced challenges that demanded adaptation. Climate change brought unpredictable weather patterns, and global markets introduced competitive pressures that many small farms struggled to meet. Faced with these challenges, the community turned to innovation. The town\u2019s leaders, in collaboration with researchers and technologists, implemented a system of smart farming powered by AI. Sensors embedded in the soil measured moisture levels, nutrient content, and temperature, providing real-time feedback to farmers. Drones equipped with cameras flew over fields, capturing images that AI analyzed to detect signs of pests or disease. Autonomous tractors, guided by satellite data, plowed and planted with precision, minimizing waste and maximizing yield. Over time, these tools not only revived the town\u2019s agricultural economy but also established it as a model for sustainable farming practices worldwide. Beyond agriculture, artificial intelligence also revolutionized healthcare. A few years ago, a young woman named Clara faced an uncertain future. Diagnosed with a rare and aggressive form of cancer, she was told her chances of survival were slim. However, Clara\u2019s doctors employed a cutting-edge AI system to analyze her genetic profile and recommend a personalized treatment plan. This system, trained on data from millions of patients worldwide, identified patterns that human doctors might have missed, suggesting a combination of therapies tailored specifically to Clara\u2019s condition.")), /*#__PURE__*/React.createElement(_ChatBubble2.ChatFooterWithIcons, null))), idx !== 1 && idx !== 3 && /*#__PURE__*/React.createElement(_ChatBubble.ChatBubble, {
+    orientation: "left"
+  }, /*#__PURE__*/React.createElement(_ChatBubble.ChatAnchor, null), /*#__PURE__*/React.createElement(_ChatBubble.ChatContent, null, /*#__PURE__*/React.createElement(_ChatBubble.ChatBody, null, /*#__PURE__*/React.createElement(_Text.BodyMedium, null, response.answer)))), /*#__PURE__*/React.createElement("div", {
+    className: _AIPromptFlowStoriesModule.default.leftMarginSpace
+  }, idx === responses.length - 1 &&
+  /*#__PURE__*/
+  // @ts-ignore - TS2786 - 'PromptSuggestions' cannot be used as a JSX component.
+  React.createElement(PromptSuggestions, {
+    isLoading: isLoading,
+    selectedPrompts: selectedPrompts,
+    generateResponse: generateResponse,
+    promptRef: promptRef
+  }))))), isLoading && /*#__PURE__*/React.createElement(_ChatBubble.ChatBubble, {
+    classNames: {
+      wrapper: _AIPromptFlowStoriesModule.default.loader
+    },
+    orientation: "left",
+    ref: loadingRef
+  }, /*#__PURE__*/React.createElement(_ChatBubble.ChatAnchor, null), /*#__PURE__*/React.createElement(_ChatBubble.ChatContent, null, /*#__PURE__*/React.createElement(_ChatBubble.ChatBody, {
+    isLoading: true,
+    loadingText: "Generating"
+  }))), responses.length === 0 && /*#__PURE__*/React.createElement("div", {
+    className: _AIPromptFlowStoriesModule.default.promptContainer
+  }, /*#__PURE__*/React.createElement(PromptSuggestions, {
+    isLoading: isLoading,
+    selectedPrompts: selectedPrompts,
+    generateResponse: generateResponse,
+    label: "Here are some ideas to get started with Analytics for your product"
+  }))), /*#__PURE__*/React.createElement(_Panel.PanelFooter, {
+    classNames: {
+      actions: _AIPromptFlowStoriesModule.default.actions
+    }
+  }, /*#__PURE__*/React.createElement(_PromptInput.PromptInput, {
+    withPadding: false,
+    value: value,
+    onInputChange: e => setValue(e.target.value),
+    onButtonClick: () => generateResponse(),
+    buttonDisabled: value.length === 0
+  })));
+};
+exports._AIPromptFlow = _AIPromptFlow;
+const PromptSuggestions = _ref => {
+  let {
+    isLoading,
+    generateResponse,
+    selectedPrompts,
+    label,
+    promptRef
+  } = _ref;
+  return !isLoading && /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement(_Text.FormLabelMedium, null, label), /*#__PURE__*/React.createElement("div", {
+    className: _AIPromptFlowStoriesModule.default.promptWrapper
+  }, selectedPrompts.map(prompt => /*#__PURE__*/React.createElement(React.Fragment, {
+    key: prompt
+  }, /*#__PURE__*/React.createElement(_PromptChip.PromptChip, {
+    classNames: {
+      wrapper: _AIPromptFlowStoriesModule.default.prompt
+    },
+    onClick: () => generateResponse(prompt)
+    // @ts-ignore - TS2769 - No overload matches this call.
+    ,
+    ref: promptRef
+  }, prompt)))));
+};

package/lib/components/Accordion/Accordion.d.ts

@@ -0,0 +1,21 @@
+import { Flow } from 'flow-to-typescript-codemod';
+import * as React from 'react';
+export type AccordionClassNames = Readonly<{
+    wrapper?: string;
+    headerWrapper?: string;
+    header?: string;
+    content?: string;
+}>;
+export type AccordionPropsType = {
+    id: string;
+    header: React.ReactNode;
+    children: React.ReactNode;
+    classNames?: AccordionClassNames;
+    isOpen?: boolean;
+    disabled?: boolean;
+    showToggle?: boolean;
+    onChange?: ((id: string, isOpen: boolean) => unknown) | null | undefined;
+    onToggle?: ((id?: string, checked?: boolean) => unknown) | null | undefined;
+};
+export declare const Accordion: Flow.AbstractComponent<AccordionPropsType, HTMLDivElement>;
+//# sourceMappingURL=Accordion.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAEhD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,MAAM,MAAM,mBAAmB,GAAG,QAAQ,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IACzE,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;CAC7E,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,IAAI,CAAC,iBAAiB,CAAC,kBAAkB,EAAE,cAAc,CA+E/E,CAAC"}

package/lib/components/Accordion/Accordion.js

@@ -59,7 +59,9 @@ const Accordion = exports.Accordion = /*#__PURE__*/React.forwardRef((_ref, ref)
     iconLeftName: accordionIsOpen ? 'chevron-up' : 'chevron-down',
     disabled: disabled,
     size: "small",
-    type: "ghost",
+    type: "ghost"
+    // @ts-ignore - TS2769 - No overload matches this call.
+    ,
     className: _AccordionModule.default.icon,
     ariaLabel: 'Collapse button'
     // we are not defining onClick here as we are using onClick of the parent here.

package/lib/components/Accordion/Accordion.stories.d.ts

@@ -0,0 +1,143 @@
+import * as React from 'react';
+import type { AccordionPropsType } from './Accordion';
+declare const _default: {
+    tags: string[];
+    title: string;
+    component: import("flow-to-typescript-codemod").Flow.AbstractComponent<AccordionPropsType, HTMLDivElement>;
+    argTypes: {
+        classNames: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        header: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        id: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        children: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        isOpen: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        disabled: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        showToggle: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        onChange: {
+            description: string;
+            control: boolean;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        onToggle: {
+            description: string;
+            control: boolean;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+    };
+    parameters: {
+        docs: {
+            subtitle: string;
+            description: {
+                component: string;
+            };
+        };
+        storySource: {
+            componentPath: string;
+        };
+    };
+};
+export default _default;
+export declare const _Default: {
+    (args: AccordionPropsType): React.JSX.Element;
+    args: {
+        classNames: {
+            wrapper: string;
+        };
+        id: string;
+        header: string;
+    };
+};
+export declare const _WithToggle: {
+    (args: AccordionPropsType): React.JSX.Element;
+    args: {
+        classNames: {
+            wrapper: string;
+        };
+        id: string;
+        showToggle: boolean;
+    };
+};
+//# sourceMappingURL=Accordion.stories.d.ts.map

package/lib/components/Accordion/Accordion.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,aAAa,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIpD,wBAwGE;AAEF,eAAO,MAAM,QAAQ;WAAU,kBAAkB;;;;;;;;CAMpC,CAAC;AAQd,eAAO,MAAM,WAAW;WAAU,kBAAkB;;;;;;;;CAgCnD,CAAC"}

package/lib/components/Accordion/Accordion.stories.js

@@ -0,0 +1,172 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._WithToggle = exports._Default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _Accordion = require("./Accordion");
+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); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var _default = exports.default = {
+  tags: ['autodocs'],
+  title: 'Components/Accordion',
+  component: _Accordion.Accordion,
+  argTypes: {
+    classNames: {
+      description: 'Optional class name overrides for styling parts of the accordion. Keys include: wrapper, headerWrapper, header, content.',
+      control: {
+        type: 'object'
+      },
+      table: {
+        type: {
+          summary: '{wrapper?: string, headerWrapper?: string, header?: string, content?: string}'
+        }
+      }
+    },
+    header: {
+      description: 'A React node that renders the visible header of the accordion. This typically includes a title or label for the section. It can be a string, JSX, or any React element.',
+      control: {
+        type: 'text'
+      },
+      table: {
+        type: {
+          summary: 'React.ReactNode'
+        }
+      }
+    },
+    id: {
+      description: 'A unique string identifier for the accordion instance. Required when used inside an AccordionGroup to control open/close or disabled states via openedIds and disabledIds arrays.',
+      control: {
+        type: 'text'
+      },
+      table: {
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    children: {
+      description: 'The content to be shown inside the accordion when it is expanded. Can be a string, JSX, or any valid React node. This content remains hidden when the accordion is collapsed.',
+      control: {
+        type: 'text'
+      },
+      table: {
+        type: {
+          summary: 'React.ReactNode'
+        }
+      }
+    },
+    isOpen: {
+      description: 'Controls whether the accordion is open or closed.',
+      control: {
+        type: 'boolean'
+      },
+      table: {
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    disabled: {
+      description: 'Disables interaction with the accordion. When true, its state can not be changed from closed to opened or vice versa',
+      control: {
+        type: 'boolean'
+      },
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: {
+          summary: 'false'
+        }
+      }
+    },
+    showToggle: {
+      description: 'Displays a toggle switch to enable/disable the accordion',
+      control: {
+        type: 'boolean'
+      },
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: {
+          summary: 'false'
+        }
+      }
+    },
+    onChange: {
+      description: 'Callback triggered when the accordion is opened or closed.',
+      control: false,
+      table: {
+        type: {
+          summary: '(id?: string, isOpen: boolean) => mixed'
+        }
+      }
+    },
+    onToggle: {
+      description: 'Callback triggered when the enable/disable toggle is clicked.',
+      control: false,
+      table: {
+        type: {
+          summary: '(id?: string, checked?: boolean) => mixed'
+        }
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      subtitle: 'Generates an Accordion component.',
+      description: {
+        component: `
+\`\`\`js
+import { Accordion } from "@spaced-out/ui-design-system/lib/components/Accordion";
+\`\`\`
+The Accordion component is a collapsible UI element used to toggle the visibility of content sections. It can be used independently or within and AccordionGroup.
+        `
+      }
+    },
+    storySource: {
+      componentPath: '/src/components/Accordion/Accordion.jsx'
+    }
+  }
+};
+const _Default = args => /*#__PURE__*/React.createElement(_Accordion.Accordion, args, /*#__PURE__*/React.createElement("div", null, "Accordions allow you to organize content into collapsible sections. This improves page readability and reduces visual clutter. Click the header to expand or collapse this section."));
+exports._Default = _Default;
+_Default.args = {
+  classNames: {
+    wrapper: ''
+  },
+  id: 'ac1',
+  header: 'What is an Accordion'
+};
+const _WithToggle = args => {
+  const [isOpened, setIsOpened] = React.useState(args.isOpen ?? false);
+  const [isDisabled, setDisabled] = React.useState(args.disabled ?? true);
+  const handleToggle = (_id, checked) => {
+    // @ts-ignore - TS2345 - Argument of type 'boolean | undefined' is not assignable to parameter of type 'SetStateAction<boolean>'.
+    setIsOpened(checked);
+    setDisabled(!checked);
+  };
+  React.useEffect(() => {
+    setIsOpened(args.isOpen ?? false);
+  }, [args.isOpen]);
+  React.useEffect(() => {
+    setDisabled(args.disabled ?? false);
+  }, [args.disabled]);
+  return /*#__PURE__*/React.createElement(_Accordion.Accordion, _extends({}, args, {
+    isOpen: isOpened,
+    disabled: isDisabled,
+    header: 'What is an Accordion?',
+    onToggle: handleToggle
+  }), /*#__PURE__*/React.createElement("div", null, "Accordions allow you to organize content into collapsible sections. This improves page readability and reduces visual clutter. Click the header to expand or collapse this section."));
+};
+exports._WithToggle = _WithToggle;
+_WithToggle.args = {
+  classNames: {
+    wrapper: ''
+  },
+  id: 'ac1',
+  showToggle: true
+};

package/lib/components/Accordion/AccordionGroup.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+export type AccordionGroupClassNames = Readonly<{
+    wrapper?: string;
+}>;
+export type AccordionGroupPropsType = {
+    children: React.ReactNode;
+    onAccordionClick?: (id: string, isOpen: boolean) => unknown;
+    onToggle?: (id: string, checked?: boolean) => unknown;
+    enabledToggleIds?: Array<string>;
+    initialOpenId?: string;
+    classNames?: AccordionGroupClassNames;
+};
+export declare const AccordionGroup: {
+    ({ children, onAccordionClick, onToggle, enabledToggleIds, initialOpenId, classNames, }: AccordionGroupPropsType): React.JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=AccordionGroup.d.ts.map

package/lib/components/Accordion/AccordionGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionGroup.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/AccordionGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,MAAM,wBAAwB,GAAG,QAAQ,CAAC;IAC9C,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gBAAgB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAC5D,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC;IACtD,gBAAgB,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACjC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,wBAAwB,CAAC;CACvC,CAAC;AAEF,eAAO,MAAM,cAAc;6FAQtB,uBAAuB;;CA8C3B,CAAC"}

package/lib/components/Accordion/AccordionGroup.js

@@ -33,10 +33,13 @@ const AccordionGroup = _ref => {
     if (! /*#__PURE__*/React.isValidElement(child)) {
       return null;
     }
+
+    // @ts-ignore - TS2571 - Object is of type 'unknown'.
     const childId = child.props.id;
     const isDisabled = !checks.includes(childId);
     const isOpen = openId === childId;
     return /*#__PURE__*/React.cloneElement(child, {
+      // @ts-ignore - TS2769 - No overload matches this call.
       classNames: {
         headerWrapper: _AccordionGroupModule.default.accordionHeaderWrapper,
         wrapper: _AccordionGroupModule.default.accordionWrapper