{ "metadata": { "buildDate": "2026-10-28T06:57:33.003Z", "version": "0.6.43", "designSystemPath": "/home/runner/work/ui-design-system/ui-design-system" }, "components": { "AIPromptFlow": { "name": "AIPromptFlow", "path": "src/components/AIPromptFlow", "files": { "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) => {\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 = [];\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(null);\n const loadingRef = React.useRef(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 \n Copilot\n \n Always check content generated by AI\n \n \n {responses.length === 0 && !isLoading && (\n \n )}\n\n {responses.map((response, idx) => (\n
\n {!!response.question && (\n \n \n \n {response.question}\n \n \n \n )}\n\n {!!response.answer && (\n <>\n {idx === 1 && (\n <>\n \n \n \n \n \n This is our interpretation of you question\n \n\n \n {getRandomSentences(staticResponse)}\n \n \n \n \n \n \n \n {response.answer}\n \n \n \n \n \n )}\n {idx === 3 && (\n \n \n \n \n \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 \n \n \n \n \n )}\n {idx !== 1 && idx !== 3 && (\n \n \n \n \n {response.answer}\n \n \n \n )}\n\n
\n {idx === responses.length - 1 && (\n \n )}\n
\n \n )}\n
\n ))}\n {isLoading && (\n \n \n \n \n \n \n )}\n\n {responses.length === 0 && (\n
\n \n
\n )}\n \n \n setValue(e.target.value)}\n onButtonClick={() => generateResponse()}\n buttonDisabled={value.length === 0}\n >\n \n \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 && {label}}\n\n
\n {selectedPrompts.map((prompt) => (\n \n generateResponse(prompt)}\n ref={promptRef as React.RefObject}\n >\n {prompt}\n \n \n ))}\n
\n \n );\nAIPromptFlowStory.storyName = 'AIPrompt Flow';\n" }, "css": null, "index": null, "additional": {} }, "allFiles": [ "AIPromptFlow.stories.module.css", "AIPromptFlow.stories.tsx" ] }, "Accordion": { "name": "Accordion", "path": "src/components/Accordion", "files": { "main": { "path": "Accordion.d.ts", "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nexport type AccordionClassNames = Readonly<{\n wrapper?: string;\n headerWrapper?: string;\n header?: string;\n content?: string;\n}>;\nexport interface AccordionPropsType {\n id: string;\n header: React.ReactNode;\n children: React.ReactNode;\n classNames?: AccordionClassNames;\n isOpen?: boolean;\n disabled?: boolean;\n showToggle?: boolean;\n onChange?: ((id: string, isOpen: boolean) => unknown) | null | undefined;\n checked?: boolean;\n onToggle?: (checked: boolean) => unknown;\n testId?: string;\n}\nexport declare const Accordion: Flow.AbstractComponent;\n//# sourceMappingURL=Accordion.d.ts.map" }, "story": { "path": "Accordion.stories.tsx", "content": "import * as React from 'react';\n\nimport type {AccordionPropsType} from 'src/components/Accordion/Accordion';\nimport {Accordion} from 'src/components/Accordion/Accordion';\n\n\nexport default {\n tags: ['autodocs'],\n title: 'Components/Accordion/Accordion',\n component: Accordion,\n argTypes: {\n classNames: {\n description:\n 'Optional class name overrides for styling parts of the accordion. Keys include: wrapper, headerWrapper, header, content.',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary:\n '{wrapper?: string, headerWrapper?: string, header?: string, content?: string}',\n },\n },\n },\n header: {\n description:\n '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.',\n control: {type: 'text'},\n table: {\n type: {summary: 'React.Node'},\n },\n },\n id: {\n description:\n '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.',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n children: {\n description:\n '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.',\n control: {type: 'text'},\n table: {\n type: {summary: 'React.Node'},\n },\n },\n testId: {\n description: 'Test ID for the component',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n isOpen: {\n description: 'Controls whether the accordion is open or closed.',\n control: {type: 'boolean'},\n table: {\n type: {summary: 'boolean'},\n },\n },\n disabled: {\n description: 'Disables only the toggle switch (when showToggle is true).',\n control: {type: 'boolean'},\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n showToggle: {\n description: 'Displays a toggle switch to enable/disable the accordion',\n control: {type: 'boolean'},\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n onChange: {\n description: 'Callback triggered when the accordion is opened or closed.',\n control: false,\n table: {\n type: {\n summary: '(id?: string, isOpen: boolean) => mixed',\n },\n },\n },\n onToggle: {\n description:\n 'Callback triggered when the enable/disable toggle is clicked.',\n control: false,\n table: {\n type: {\n summary: '(checked?: boolean) => mixed',\n },\n },\n },\n },\n parameters: {\n docs: {\n subtitle: 'Generates an Accordion component.',\n description: {\n component: `\n\\`\\`\\`js\nimport { Accordion } from \"@spaced-out/ui-design-system/lib/components/Accordion\";\n\\`\\`\\`\nThe Accordion component is a collapsible UI element used to toggle the visibility of content sections. It can be used independently or within and AccordionGroup.\n `,\n },\n },\n storySource: {\n componentPath: '/src/components/Accordion/Accordion',\n },\n },\n};\n\nexport const DefaultStory = (args: AccordionPropsType): React.ReactNode => {\n const [isOpened, setIsOpened] = React.useState(args.isOpen ?? false);\n const [checked, setChecked] = React.useState(args.checked ?? false);\n\n const onToggleHandler = (checked: boolean) => {\n args.onToggle?.(checked);\n setChecked(checked);\n setIsOpened(checked);\n };\n return (\n \n
\n Accordions allow you to organize content into collapsible sections. This\n improves page readability and reduces visual clutter. Click the header\n to expand or collapse this section.\n
\n \n );\n};\n\nDefaultStory.args = {\n classNames: {wrapper: ''},\n id: 'ac1',\n header: 'What is an Accordion?',\n testId: 'accordion-default-story',\n};\n\nexport const WithToggleStory = (args: AccordionPropsType): React.ReactNode => {\n const [isOpened, setIsOpened] = React.useState(args.isOpen ?? false);\n const [checked, setChecked] = React.useState(args.checked);\n\n const onToggleHandler = (checked: boolean) => {\n args.onToggle?.(checked);\n setIsOpened(checked);\n setChecked(checked);\n };\n\n React.useEffect(() => {\n setIsOpened(args.isOpen ?? false);\n }, [args.isOpen]);\n\n return (\n \n
\n Accordions allow you to organize content into collapsible sections. This\n improves page readability and reduces visual clutter. Click the header\n to expand or collapse this section.\n
\n \n );\n};\nWithToggleStory.args = {\n classNames: {wrapper: ''},\n id: 'ac1',\n showToggle: true,\n checked: false,\n testId: 'accordion-with-toggle-story',\n};\nDefaultStory.storyName = 'Default';\nWithToggleStory.storyName = 'With Toggle';\n" }, "css": { "path": "Accordion.module.css", "content": "@value (\n colorBorderPrimary,\n colorBackgroundTertiary,\n colorTextSecondary\n) from '../../styles/variables/_color.css';\n@value (\n sizeFluid, \n size58\n) from '../../styles/variables/_size.css';\n@value (\n spaceNone,\n spaceSmall, \n spaceMedium,\n spaceXSmall,\n spaceXXSmall\n) from '../../styles/variables/_space.css';\n@value (\n elevationCard\n) from '../../styles/variables/_elevation.css';\n@value (\n borderWidthNone,\n borderWidthPrimary,\n borderRadiusSmall,\n borderRadiusMedium,\n borderRadiusNone,\n borderWidthTertiary\n) from '../../styles/variables/_border.css';\n\n.wrapper {\n composes: borderPrimary from '../../styles/border.module.css';\n display: flex;\n flex-flow: column;\n width: sizeFluid;\n}\n\n.headerWrapper {\n composes: subTitleSmall from '../../styles/typography.module.css';\n display: flex;\n min-height: size58;\n cursor: pointer;\n align-items: center;\n width: sizeFluid;\n justify-content: space-between;\n gap: spaceXSmall;\n padding-left: spaceMedium;\n padding-right: spaceMedium;\n padding-top: spaceSmall;\n padding-bottom: spaceSmall;\n background-color: colorBackgroundTertiary;\n z-index: elevationCard;\n color: colorTextSecondary;\n}\n\n.icon {\n padding-right: spaceMedium;\n}\n\n.header {\n display: flex;\n align-items: center;\n gap: spaceXSmall;\n}\n\n.content {\n composes: borderTopPrimary from '../../styles/border.module.css';\n display: flex;\n flex-flow: column;\n background-color: colorBackgroundTertiary;\n padding: spaceSmall;\n gap: spaceXXSmall;\n}\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../components/Accordion/Accordion';\nexport * from '../../components/Accordion/AccordionGroup';\n//# sourceMappingURL=index.d.ts.map" }, "additional": { "AccordionGroup.d.ts": { "path": "AccordionGroup.d.ts", "content": "import * as React from 'react';\nexport type AccordionGroupClassNames = Readonly<{\n wrapper?: string;\n}>;\nexport interface AccordionGroupPropsType {\n children: React.ReactNode;\n onAccordionClick?: (id: string, isOpen: boolean) => unknown;\n onToggle?: (id: string, checked?: boolean) => unknown;\n enabledToggleIds?: Array;\n initialOpenId?: string;\n classNames?: AccordionGroupClassNames;\n testId?: string;\n}\nexport declare const AccordionGroup: {\n ({ children, onAccordionClick, onToggle, initialOpenId, classNames, testId, }: AccordionGroupPropsType): React.JSX.Element;\n displayName: string;\n};\n//# sourceMappingURL=AccordionGroup.d.ts.map" } } }, "allFiles": [ "Accordion.module.css", "Accordion.stories.tsx", "Accordion.tsx", "AccordionGroup.module.css", "AccordionGroup.stories.module.css", "AccordionGroup.stories.tsx", "AccordionGroup.tsx", "index.ts" ] }, "Avatar": { "name": "Avatar", "path": "src/components/Avatar", "files": { "main": { "path": "Avatar.d.ts", "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nimport type * as COLORS from '../../styles/variables/_color';\nimport type { IconType } from '../../components/Icon';\nimport type { StatusSemanticType } from '../../components/StatusIndicator';\ntype ClassNames = Readonly<{\n wrapper?: string;\n ring?: string;\n content?: string;\n image?: string;\n icon?: string;\n text?: string;\n}>;\nexport declare const AVATAR_SIZE: Readonly<{\n small: \"small\";\n medium: \"medium\";\n large: \"large\";\n extraLarge: \"extraLarge\";\n}>;\nexport declare const avatarSizeOptions: Array;\nexport type AvatarSize = (typeof AVATAR_SIZE)[keyof typeof AVATAR_SIZE];\nexport declare const AVATAR_COLOR: Readonly<{\n red: \"#fce8ed\";\n orange: \"#fcf2e7\";\n green: \"#e6f5ed\";\n blue: \"#e6f0fe\";\n gray: \"#EBEBEB\";\n indigo: \"#f1f1f5\";\n}>;\nexport type AvatarColorType = keyof typeof AVATAR_COLOR;\nexport interface AvatarProps {\n classNames?: ClassNames;\n size?: AvatarSize;\n imageSrc?: string;\n ring?: boolean;\n icon?: boolean;\n text?: string;\n color?: AvatarColorType;\n style?: React.CSSProperties;\n iconName?: string;\n iconType?: IconType;\n status?: StatusSemanticType;\n statusBorderColorToken?: keyof typeof COLORS;\n testId?: string;\n}\nexport interface AvatarContentProps {\n imageSrc?: string;\n text?: string;\n iconName?: string;\n iconType?: IconType;\n size: AvatarSize;\n color?: AvatarColorType;\n ring?: boolean;\n status?: StatusSemanticType;\n statusBorderColorToken?: keyof typeof COLORS;\n classNames?: ClassNames;\n testId?: string;\n}\nexport declare const Avatar: Flow.AbstractComponent;\nexport declare const BaseAvatar: ({ classNames, size, text, style, color, testId, }: AvatarProps) => React.JSX.Element;\nexport {};\n//# sourceMappingURL=Avatar.d.ts.map" }, "story": { "path": "Avatar.stories.tsx", "content": "import * as React from 'react';\n\nimport * as COLORS from 'src/styles/variables/_color';\n\nimport type {AvatarProps} from 'src/components/Avatar';\nimport {AVATAR_COLOR, AVATAR_SIZE} from 'src/components/Avatar';\nimport {Avatar, avatarSizeOptions} from 'src/components/Avatar/Avatar';\nimport {STATUS_SEMANTIC} from 'src/components/StatusIndicator';\nimport {Tooltip} from 'src/components/Tooltip';\n\nimport css from 'src/components/Avatar/Avatar.stories.module.css';\n\n\nconst colorOptions: Array = [...Object.keys(AVATAR_COLOR)];\nconst statusOptions: Array = [...Object.values(STATUS_SEMANTIC)];\nconst statusColorOptions: Array = [...Object.keys(COLORS)];\n\nexport default {\n tags: ['autodocs'],\n title: 'Components/Avatar',\n argTypes: {\n status: {\n options: statusOptions,\n description:\n 'Status type of a the indicator. It will have different background color for different status',\n control: {\n type: 'select',\n },\n table: {\n type: {summary: 'enum'},\n },\n },\n statusBorderColorToken: {\n description:\n 'Pass different color token string to show border of status indicator in different color',\n options: statusColorOptions,\n control: {\n type: 'select',\n },\n table: {\n type: {summary: 'string'},\n defaultValue: {summary: 'colorBackgroundTertiary'},\n },\n },\n imageSrc: {\n description: 'Url of image to show in Avatar',\n },\n text: {\n description: 'User name to show in the avatar',\n table: {\n type: {summary: 'string'},\n },\n },\n size: {\n description:\n 'Avatar supports four size variants namely small, medium, large, extraLarge.',\n control: {\n type: 'select',\n },\n options: avatarSizeOptions,\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: 'medium'},\n },\n },\n color: {\n options: colorOptions,\n description: 'Background Color of avatar.',\n control: {\n type: 'select',\n },\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: 'blue'},\n },\n },\n iconName: {\n name: 'iconName',\n description: 'Icon name for icon avatar',\n table: {\n type: {summary: 'string'},\n },\n },\n iconType: {\n description:\n 'Type represents 4 unique icon styles :- Solid, Regular, Duotone and Brands',\n options: ['regular', 'solid', 'duotone', 'brands'],\n control: {type: 'select'},\n table: {\n type: {summary: 'string'},\n defaultValue: {summary: 'regular'},\n },\n },\n ring: {\n description: 'Ring around the avatar',\n options: [false, true],\n control: 'boolean',\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: false},\n },\n },\n classNames: {\n description: 'Provide an optional className to be applied to the wrapper',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary:\n '{wrapper?: string, ring?: string, content?: string, image?: string, icon?: string, text?: string}',\n },\n },\n },\n testId: {\n description: 'Test ID for the component',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n },\n parameters: {\n docs: {\n subtitle: 'Generates a Avatar component.',\n description: {\n component: `\n\\`\\`\\`js\nimport { Avatar } from \"@spaced-out/ui-design-system/lib/components/Avatar\";\n\\`\\`\\`\nAvatar component can be used to show image avatars, icon based avatars or text based avatars. It will first look for imageSrc props, then Icon name and optional icon type\nand in the last it use first two initials of text to show text avatar.\nMake sure to pass name for all the avatars which will be used internally as key and to show in tooltip in case of avatar group.\n `,\n },\n },\n storySource: {\n componentPath: '/src/components/Avatar/Avatar',\n },\n },\n};\n\nexport const AvatarStory = (args: AvatarProps) => (\n
\n \n \n \n
\n);\n\nAvatarStory.args = {\n imageSrc:\n 'https://cdn.sensehq.com/genesis/hashed/static/images/personas/1.png',\n size: AVATAR_SIZE.medium,\n text: 'Adam Craig Gilchrist',\n iconName: 'face-party',\n ring: false,\n color: 'blue',\n iconType: 'regular',\n testId: 'avatar-story',\n // classNames: {content: css.avatarContent, text: css.avatarText},\n};\nAvatarStory.storyName = 'Avatar';\n" }, "css": { "path": "Avatar.module.css", "content": "@value (colorFillPrimary, colorBackgroundTertiary, colorInformation, colorInformationLightest) from '../../styles/variables/_color.css';\n@value ( size34, size42, size60, size100, sizeFluid) from '../../styles/variables/_size.css';\n@value (borderRadiusCircle, borderRadiusLarge, borderRadiusXLarge, borderWidthSecondary) from '../../styles/variables/_border.css';\n@value (spaceNone, spaceXXSmall, spaceXSmall) from '../../styles/variables/_space.css';\n\n.container {\n border-radius: borderRadiusCircle;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.container.extraLargeSize {\n width: size100;\n height: size100;\n min-width: size100;\n min-height: size100;\n}\n\n.container.largeSize {\n width: size60;\n height: size60;\n min-width: size60;\n min-height: size60;\n}\n\n.container.mediumSize {\n width: size42;\n height: size42;\n min-width: size42;\n min-height: size42;\n}\n\n.container.smallSize {\n width: size34;\n height: size34;\n min-width: size34;\n min-height: size34;\n}\n\n.container.baseExtraLargeSize {\n min-width: size100;\n height: size100;\n border-radius: borderRadiusCircle;\n padding: spaceNone spaceSmall;\n}\n\n.container.baseLargeSize {\n min-width: size60;\n height: size60;\n border-radius: borderRadiusXLarge;\n padding: 0 spaceXSmall;\n}\n\n.container.baseMediumSize {\n min-width: size42;\n height: size42;\n border-radius: borderRadiusLarge;\n padding: 0 spaceXXSmall;\n}\n\n.container.baseSmallSize {\n min-width: size34;\n height: size34;\n border-radius: borderRadiusLarge;\n padding: 0 spaceXXSmall;\n}\n\n.avatar {\n vertical-align: middle;\n min-width: sizeFluid;\n min-height: sizeFluid;\n border-radius: borderRadiusCircle;\n display: flex;\n align-items: center;\n justify-content: center;\n object-fit: cover;\n}\n\n.ring {\n border-radius: borderRadiusCircle;\n width: sizeFluid;\n height: sizeFluid;\n border: solid borderWidthSecondary transparent;\n background-image: linear-gradient(white, white),\n radial-gradient(circle at top right, colorFillPrimary, colorInformation);\n background-origin: border-box;\n background-clip: content-box, border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.whiteCircle {\n border-radius: borderRadiusCircle;\n border: solid borderWidthSecondary colorBackgroundTertiary;\n width: sizeFluid;\n height: sizeFluid;\n}\n\n.innerContainer {\n --background-color: colorInformationLightest;\n display: flex;\n position: relative;\n border-radius: borderRadiusCircle;\n width: sizeFluid;\n height: sizeFluid;\n background: var(--background-color);\n}\n\n.alignCenter {\n align-items: center;\n justify-content: center;\n}\n\n.statusIndicatorWrapper {\n position: absolute;\n}\n\n.statusIndicatorWrapper.large {\n top: calc(spaceXXSmall / 2);\n right: calc(spaceXXSmall / 2);\n}\n\n.statusIndicatorWrapper.medium {\n top: spaceNone;\n right: spaceNone;\n}\n\n.statusIndicatorWrapper.small {\n top: calc((spaceXXSmall / 2) * -1);\n right: calc((spaceXXSmall / 2) * -1);\n}\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../components/Avatar/Avatar';\n//# sourceMappingURL=index.d.ts.map" }, "additional": {} }, "allFiles": [ "Avatar.module.css", "Avatar.stories.module.css", "Avatar.stories.tsx", "Avatar.tsx", "index.ts" ] }, "AvatarGroup": { "name": "AvatarGroup", "path": "src/components/AvatarGroup", "files": { "main": { "path": "AvatarGroup.d.ts", "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nimport type { AvatarSize } from '../../components/Avatar';\nimport type { ElevationType, PlacementType } from '../../components/Tooltip';\nexport interface AvatarGroupProps {\n children?: React.ReactNode;\n size?: AvatarSize;\n borderColor?: string;\n maxTooltipLines?: number;\n placement?: PlacementType;\n maxAvatars?: number;\n tooltipElevation?: ElevationType;\n testId?: string;\n}\nexport declare const AvatarGroup: Flow.AbstractComponent;\n//# sourceMappingURL=AvatarGroup.d.ts.map" }, "story": { "path": "AvatarGroup.stories.tsx", "content": "import * as React from 'react';\n\nimport {colorBackgroundTertiary} from 'src/styles/variables/_color';\n\nimport {Avatar, avatarSizeOptions} from 'src/components/Avatar';\nimport type {AvatarGroupProps} from 'src/components/AvatarGroup';\nimport {AvatarGroup} from 'src/components/AvatarGroup';\nimport {ELEVATION_TYPES} from 'src/components/Tooltip';\n\nimport css from 'src/components/AvatarGroup/AvatarGroup.stories.module.css';\n\n\nconst elevationOptions: Array = [...Object.values(ELEVATION_TYPES)];\n\nexport default {\n tags: ['autodocs'],\n title: 'Components/Avatar Group',\n argTypes: {\n size: {\n description:\n 'AvatarGroup supports three size variants namely small, medium, large.',\n control: {\n type: 'select',\n },\n options: avatarSizeOptions,\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: 'medium'},\n },\n },\n maxTooltipLines: {\n description: 'Number of lines to show',\n control: {\n type: 'number',\n min: 1,\n },\n table: {\n type: {summary: 'number'},\n defaultValue: {summary: 7},\n },\n },\n maxAvatars: {\n description: 'Max number of avatars to show including the plus avatar',\n control: {\n type: 'number',\n min: 1,\n },\n table: {\n type: {summary: 'number'},\n defaultValue: {summary: 5},\n },\n },\n borderColor: {\n description:\n 'Pass color token variables for border color in avatar group',\n control: {\n type: 'text',\n },\n table: {\n defaultValue: {summary: colorBackgroundTertiary},\n },\n },\n tooltipElevation: {\n description:\n 'z-index to the tooltip used internally. This is by default set to elevationTooltip which is `4`. Use this prop when you want to render tooltip at higher elevation elements like Modal, Toast, Menu, etc.',\n control: {\n type: 'select',\n },\n options: elevationOptions,\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: 'tooltip'},\n },\n },\n testId: {\n description: 'Test ID for the component',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n },\n parameters: {\n docs: {\n subtitle: 'Generates a AvatarGroup component.',\n description: {\n component: `\n\\`\\`\\`js\nimport { AvatarGroup } from \"@spaced-out/ui-design-system/lib/components/AvatarGroup\";\n\\`\\`\\`\nAvatarGroup will be used to show multiple avatars in a group. It will accept avatars as child and configure then in once size based on the size of the group\n, put borders. It will show limited numbers of avatars and add a plus avatar in end to represent rest avatars.\nOn hover of plus avatars list of avatars will be shown in tooltip.\n `,\n },\n },\n storySource: {\n componentPath: '/src/components/AvatarGroup/AvatarGroup',\n },\n },\n};\n\nexport const AvatarGroupStory = (args: AvatarGroupProps) => (\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n);\n\nAvatarGroupStory.args = {\n size: 'medium',\n maxTooltipLines: 7,\n maxAvatars: 5,\n borderColor: colorBackgroundTertiary,\n testId: 'avatar-group-story',\n};\nAvatarGroupStory.storyName = 'Avatar Group';\n" }, "css": { "path": "AvatarGroup.module.css", "content": "@value (colorFillPrimary, colorBackgroundTertiary) from '../../styles/variables/_color.css';\n@value (borderWidthTertiary) from '../../styles/variables/_border.css';\n@value ( size34, size42, size60, size100) from '../../styles/variables/_size.css';\n\n.avatarGroupContainer {\n display: flex;\n flex-direction: row;\n}\n\n.avatarGroupContainer.extraLargeSize {\n height: size100;\n width: size100;\n}\n\n.avatarGroupContainer.largeSize {\n height: size60;\n}\n\n.avatarGroupContainer.mediumSize {\n height: size42;\n}\n\n.avatarGroupContainer.smallSize {\n height: size34;\n}\n\n.avatarInGroup {\n display: flex;\n border: borderWidthTertiary solid colorBackgroundTertiary;\n position: relative;\n}\n\n.nameList {\n display: flex;\n flex-direction: column;\n}\n\n.plusAvatar {\n display: flex;\n cursor: pointer;\n}\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../components/AvatarGroup/AvatarGroup';\n//# sourceMappingURL=index.d.ts.map" }, "additional": {} }, "allFiles": [ "AvatarGroup.module.css", "AvatarGroup.stories.module.css", "AvatarGroup.stories.tsx", "AvatarGroup.tsx", "index.ts" ] }, "Badge": { "name": "Badge", "path": "src/components/Badge", "files": { "main": { "path": "Badge.d.ts", "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nimport type { IconSize, IconType } from '../../components/Icon';\ntype ClassNames = Readonly<{\n wrapper?: string;\n text?: string;\n icon?: string;\n}>;\nexport declare const BADGE_COLOR: Readonly<{\n gray: \"#EBEBEB\";\n red: \"#fce8ed\";\n redDark: \"#e31c4c\";\n orange: \"#fcf2e7\";\n orangeDark: \"#df7e0c\";\n green: \"#e6f5ed\";\n greenDark: \"#03964d\";\n blue: \"#e6f0fe\";\n blueDark: \"#0769f0\";\n indigo: \"#f1f1f5\";\n indigoDark: \"#706F9B\";\n}>;\nexport type BadgeColorType = keyof typeof BADGE_COLOR;\nexport interface BaseBadgeProps {\n classNames?: ClassNames;\n fill?: BadgeColorType;\n testId?: string;\n}\nexport interface BadgeProps extends Omit {\n text: string;\n}\nexport interface IconBadgeProps extends Omit {\n iconName: string;\n iconType?: IconType;\n iconSize?: IconSize;\n onClick?: React.MouseEventHandler;\n ariaLabel?: string;\n}\nexport declare const Badge: Flow.AbstractComponent;\nexport declare const IconBadge: Flow.AbstractComponent;\nexport {};\n//# sourceMappingURL=Badge.d.ts.map" }, "story": { "path": "Badge.stories.tsx", "content": "import * as React from 'react';\n\nimport type {BadgeProps, IconBadgeProps} from 'src/components/Badge/Badge';\nimport {Badge, BADGE_COLOR, IconBadge} from 'src/components/Badge/Badge';\nimport {ICON_SIZE} from 'src/components/Icon';\n\nimport css from 'src/components/Badge/Badge.stories.module.css';\n\n\nconst fillColors: Array = [...Object.keys(BADGE_COLOR)];\nconst iconSize: Array = [...Object.values(ICON_SIZE)];\n\nexport default {\n tags: ['autodocs'],\n title: 'Components/Badge',\n argTypes: {\n fill: {\n description:\n 'Pass different color token string to show Badge in different color',\n options: fillColors,\n control: {\n type: 'select',\n },\n table: {\n type: {summary: 'string'},\n defaultValue: {summary: 'gray'},\n },\n },\n classNames: {\n description: 'External classNames to be applied',\n control: {\n type: 'object',\n },\n table: {\n type: {summary: '{wrapper?: string, text?: string, icon?: string}'},\n },\n },\n text: {\n type: {required: true},\n description: 'The content of the Badge. [Only available in ``]',\n table: {\n type: {summary: 'React.Component'},\n },\n },\n iconName: {\n description:\n 'Icon Name represents name of icon as supported by fontawesome. [Only available in ``]',\n type: {required: true},\n table: {\n type: {summary: 'string'},\n },\n },\n iconSize: {\n description:\n 'Icon supports three size variants namely small and medium. `small` < `medium` < `large`. [Only available in ``]',\n options: iconSize,\n control: {type: 'select'},\n table: {\n type: {summary: 'string'},\n defaultValue: {summary: 'small'},\n },\n },\n ariaLabel: {\n control: {\n type: 'text',\n },\n description:\n '**aria-label** should be added where `ClickableIcon` and `CloseIcon` is used. This would avoid accessibility violations in screen readers. [Only available in ``]',\n table: {\n type: {summary: 'string'},\n },\n },\n iconType: {\n description:\n 'Type represents 5 unique icon styles :- Solid, Regular, Light, Thin, Duotone. [Only available in ``]',\n options: ['regular', 'solid', 'duotone', 'brands'],\n control: {type: 'select'},\n table: {\n type: {summary: 'string'},\n defaultValue: {summary: 'solid'},\n },\n },\n testId: {\n description: 'Test ID for the component',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n },\n parameters: {\n docs: {\n subtitle: 'Generates a Badge component.',\n description: {\n component: `\n\\`\\`\\`js\nimport { Badge, IconBadge } from \"@spaced-out/ui-design-system/lib/components/Badge\";\n\\`\\`\\`\nSimple Badge component that supports fill and text as prop. There is also a \\`IconBadge\\` component that supports all the\nprops of \\`Badge\\` and also supports \\`iconName\\` and \\`iconSize\\` as props.\n\n### Usage:\n\n\\`\\`\\`jsx\n\n\n\n\\`\\`\\`\n `,\n },\n },\n storySource: {\n componentPath: '/src/components/Badge/Badge',\n },\n },\n};\n\nexport const BadgeStory = (args: BadgeProps) => (\n
\n \n
\n);\n\nBadgeStory.args = {\n text: '12',\n testId: 'badge-story',\n};\n\nexport const IconBadgeStory = (args: IconBadgeProps) => (\n
\n \n
\n);\n\nIconBadgeStory.args = {\n iconName: 'check',\n fill: 'greenDark',\n testId: 'icon-badge-story',\n};\nBadgeStory.storyName = 'Badge';\nIconBadgeStory.storyName = 'Icon Badge';\n" }, "css": { "path": "Badge.module.css", "content": "@value (size12, size22, size100) from '../../styles/variables/_size.css';\n@value (spaceXSmall, spaceNone) from '../../styles/variables/_space.css';\n@value (colorGrayLightest, colorTextInversePrimary, colorTextPrimary) from '../../styles/variables/_color.css';\n\n.badgeWrapper {\n --wrapperBgColor: colorGrayLightest;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: size100;\n height: size22;\n padding: spaceNone spaceXSmall;\n min-width: fit-content;\n width: fit-content;\n background-color: var(--wrapperBgColor);\n color: colorTextInversePrimary;\n}\n\n.iconContainer {\n height: initial;\n padding: calc(size12 / 4);\n}\n\n.dark {\n color: colorTextInversePrimary;\n}\n\n.light {\n color: colorTextPrimary;\n}\n\n.fixedWidth {\n padding: initial;\n width: size22;\n height: size22;\n min-width: size22;\n min-height: size22;\n}\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../components/Badge/Badge';\n//# sourceMappingURL=index.d.ts.map" }, "additional": {} }, "allFiles": [ "Badge.module.css", "Badge.stories.module.css", "Badge.stories.tsx", "Badge.tsx", "index.ts" ] }, "BadgedIcon": { "name": "BadgedIcon", "path": "src/components/BadgedIcon", "files": { "main": { "path": "BadgedIcon.d.ts", "content": "import * as React from 'react';\nimport type { IconSize, IconType } from '../../components/Icon';\ntype ClassNames = Readonly<{\n wrapper?: string;\n icon?: string;\n badgeIcon?: string;\n}>;\nexport interface BadgedIconProps {\n type?: IconType;\n name: string;\n size?: IconSize;\n ariaLabel?: string;\n showBadge?: boolean;\n classNames?: ClassNames;\n testId?: string;\n}\nexport declare const BadgedIcon: ({ name, showBadge, classNames, size, type, ariaLabel, testId, }: BadgedIconProps) => React.JSX.Element;\nexport {};\n//# sourceMappingURL=BadgedIcon.d.ts.map" }, "story": { "path": "BadgedIcon.stories.tsx", "content": "import * as React from 'react';\n\nimport type {BadgedIconProps} from 'src/components/BadgedIcon';\nimport {BadgedIcon} from 'src/components/BadgedIcon/BadgedIcon';\nimport {ICON_DOCS} from 'src/components/Icon/Icon.docs';\n\nimport css from 'src/components/BadgedIcon/BadgedIcon.stories.module.css';\n\n\nconst {name, size, ariaLabel} = ICON_DOCS.argTypes;\n\nexport default {\n tags: ['autodocs'],\n title: 'Components/Badged Icon',\n component: BadgedIcon,\n argTypes: {\n classNames: {\n description: 'External classnames to be applied.',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary: '{wrapper?: string, icon?: string, badgeIcon?: string}',\n },\n },\n },\n showBadge: {\n description: 'If **true**, the badge icon is shown',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'true'},\n },\n },\n type: {\n description:\n 'Type represents 5 unique icon styles :- Solid, Regular, Light, Thin, Duotone',\n options: ['regular', 'solid', 'duotone', 'brands'],\n control: {type: 'select'},\n table: {\n type: {summary: 'string'},\n defaultValue: {summary: 'solid'},\n },\n },\n name,\n size,\n ariaLabel,\n testId: {\n description: 'Test ID for the component',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n },\n parameters: {\n docs: {\n subtitle: 'Generates a Badged Icon component.',\n description: {\n component: `\n\\`\\`\\`js\nimport { BadgedIcon } from \"@spaced-out/ui-design-system/lib/components/BadgedIcon\";\n\\`\\`\\`\nBadgedIcon component is a wrapper around the Icon component. It is used to display an icon with a badge.\nThis uses fontawesome icon internally.\nThe name prop has be to consistent with one used in fontawesome.\n `,\n },\n },\n storySource: {\n componentPath: '/src/components/BadgedIcon/BadgedIcon',\n },\n },\n};\n\nexport const BadgedIconStory = (args: BadgedIconProps) => (\n
\n \n
\n);\n\nBadgedIconStory.args = {\n classNames: {wrapper: ''},\n name: 'face-party',\n testId: 'badged-icon-story',\n};\nBadgedIconStory.storyName = 'Badged Icon';\n" }, "css": { "path": "BadgedIcon.module.css", "content": "@value (colorBackgroundTertiary) from '../../styles/variables/_color.css';\n\n@value (\n size42,\n size34,\n size60,\n size8,\n size12,\n size2,\n size4\n) from '../../styles/variables/_size.css';\n\n@value (\n borderRadiusMedium,\n borderRadiusCircle\n) from '../../styles/variables/_border.css';\n\n@value (\n motionEaseInEaseOut,\n motionDurationSlow\n) from '../../styles/variables/_motion.css';\n\n@value (\n spaceNone,\n spaceMedium,\n spaceXSmall\n) from '../../styles/variables/_space.css';\n\n.iconContainer {\n display: flex;\n width: fit-content;\n min-width: size34;\n min-height: size34;\n justify-content: center;\n align-items: center;\n border-radius: borderRadiusMedium;\n position: relative;\n background: linear-gradient(\n 91deg,\n rgba(204, 192, 240, 0.5) 0%,\n rgba(178, 209, 250, 0.5) 100%\n ),\n colorBackgroundTertiary;\n}\n\n.medium {\n width: size42;\n height: size42;\n}\n\n.small {\n width: size34;\n height: size34;\n}\n\n.large {\n width: size60;\n height: size60;\n}\n\n.iconContainer:hover .badgeIcon {\n transform: rotate(-90deg);\n}\n\n.badgeIcon {\n position: absolute;\n border-radius: borderRadiusCircle;\n top: calc(size2 * -1);\n right: calc(size4 * -1);\n transition: transform motionDurationSlow motionEaseInEaseOut;\n}\n\n.small .badgeIcon {\n width: size8;\n height: size8;\n left: calc(spaceMedium + spaceXSmall);\n top: spaceNone;\n}\n\n.medium .badgeIcon {\n width: size12;\n height: size12;\n}\n\n.large .badgeIcon {\n width: size12;\n height: size12;\n}\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../components/BadgedIcon/BadgedIcon';\n//# sourceMappingURL=index.d.ts.map" }, "additional": {} }, "allFiles": [ "BadgedIcon.module.css", "BadgedIcon.stories.module.css", "BadgedIcon.stories.tsx", "BadgedIcon.tsx", "index.ts" ] }, "Banner": { "name": "Banner", "path": "src/components/Banner", "files": { "main": { "path": "Banner.d.ts", "content": "import type { Flow } from 'flow-to-typescript-codemod';\nimport type { InContextAlertProps } from '../../components/InContextAlert';\nexport interface BannerProps extends Omit {\n alignment?: 'top' | 'bottom';\n testId?: string;\n}\nexport declare const Banner: Flow.AbstractComponent;\n//# sourceMappingURL=Banner.d.ts.map" }, "story": { "path": "Banner.stories.tsx", "content": "import * as React from 'react';\n\nimport {ALERT_SEMANTIC} from 'src/types/common';\n\nimport type {BannerProps} from 'src/components/Banner/Banner';\nimport {Banner} from 'src/components/Banner/Banner';\n\nimport css from 'src/components/Banner/Banner.stories.module.css';\n\n\nconst semanticOptions: Array = [...Object.values(ALERT_SEMANTIC)];\n\nexport default {\n tags: ['autodocs'],\n title: 'Components/Banner',\n argTypes: {\n actionText: {\n name: 'actionText',\n description: 'Action text to be displayed on **right** of Alert',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n onAction: {\n name: 'onAction',\n action: 'Action Click',\n description: 'Callback function for action text click',\n type: {summary: '(SyntheticEvent) => mixed'},\n },\n semantic: {\n options: semanticOptions,\n description:\n 'Semantic type of Banner. It will have different Icon and background color for different semantic type',\n control: {\n type: 'select',\n },\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: ALERT_SEMANTIC.neutral},\n },\n },\n alignment: {\n options: ['top', 'bottom'],\n description:\n 'Semantic type of Banner. It will have different Icon and background color for different semantic type',\n control: {\n type: 'select',\n },\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: 'top'},\n },\n },\n onCloseClick: {\n name: 'onCloseClick',\n action: 'Close Click',\n description: 'Callback function for dismissable alert',\n type: {summary: '(SyntheticEvent) => mixed'},\n },\n dismissable: {\n description: 'Close Icon will appear in right side in case it is true',\n name: 'dismissable',\n options: [false, true],\n control: 'boolean',\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: false},\n },\n },\n selfDismiss: {\n description: `This prop is valid only in case dismissable is true.\n It handles whether the dismissal should be handled by the component or it will just pass callback onclick of closeIcon and dismissal will be handled externally`,\n name: 'selfDismiss',\n options: [false, true],\n control: 'boolean',\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: false},\n },\n },\n leftIconName: {\n name: 'leftIconName',\n control: {\n type: 'text',\n },\n description: 'Custom left icon. This overrides the default semantic icon',\n table: {\n type: {summary: 'string'},\n },\n },\n leftIconType: {\n options: ['regular', 'solid'],\n description: 'Type of Icon',\n control: {\n type: 'select',\n },\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: 'regular'},\n },\n },\n children: {\n description: 'Pass the alert message text as children',\n table: {\n type: {summary: 'string'},\n },\n },\n classNames: {\n description:\n 'Provide an optional className to be applied to the wrapper, alertText',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary:\n '{wrapper?: string, alertText?: string, actionContainer?: string}',\n },\n },\n },\n testId: {\n description: 'Test ID for the component',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n },\n parameters: {\n docs: {\n subtitle: 'Generates a Banner component',\n description: {\n component: `\n\\`\\`\\`js\nimport { Banner } from \"@spaced-out/ui-design-system/lib/components/Banner\";\n\\`\\`\\`\nUse Banner component to show alert message of different semantics like - success, warning etc. It will take width of the container\nand will show only two lines of text. Post that it will get truncated. As there is no way for user to see the truncated message, it is recommended\nto use it for messages up to two lines only or add a tooltip along with it for showcasing complete message.\n\nBanners should ideally be absolutely positioned and should stick to top or bottom of container\n `,\n },\n },\n storySource: {\n componentPath: '/src/components/Banner/Banner',\n },\n },\n};\n\nexport const DefaultStory = (args: BannerProps) => (\n
\n \n
\n);\n\nDefaultStory.args = {\n children: 'The quick brown fox jumps over the lazy dog',\n semantic: 'neutral',\n testId: 'banner-default-story',\n};\n\nexport const DismissableStory = (args: BannerProps) => (\n
\n \n
\n);\n\nDismissableStory.args = {\n children: 'The quick brown fox jumps over the lazy dog',\n semantic: 'neutral',\n dismissable: true,\n selfDismiss: false,\n testId: 'banner-dismissable-story',\n};\n\nexport const ActionableStory = (args: BannerProps) => (\n
\n \n
\n);\n\nActionableStory.args = {\n children: 'Message could not be delivered',\n semantic: 'danger',\n actionText: 'Resend',\n testId: 'banner-actionable-story',\n};\n\nexport const ActionableAndDismissableStory = (args: BannerProps) => (\n
\n \n
\n);\n\nActionableAndDismissableStory.args = {\n children: 'Schedule Message - 24 Dec 2021 @ 04:00AM',\n semantic: 'information',\n actionText: 'View Details',\n dismissable: true,\n selfDismiss: false,\n testId: 'banner-actionable-dismissable-story',\n};\nDefaultStory.storyName = 'Default';\nDismissableStory.storyName = 'Dismissable';\nActionableStory.storyName = 'Actionable';\nActionableAndDismissableStory.storyName = 'Actionable And Dismissable';\n" }, "css": { "path": "Banner.module.css", "content": "@value (\n colorNeutralLight,\n colorSuccessLight,\n colorInformationLight,\n colorWarningLight,\n colorDangerLight\n) from '../../styles/variables/_color.css';\n\n@value (\n spaceMedium,\n spaceSmall\n) from '../../styles/variables/_space.css';\n\n@value (\n borderWidthPrimary\n) from '../../styles/variables/_border.css';\n\n.bannerContainer {\n border: none;\n border-radius: initial;\n padding: spaceSmall spaceMedium;\n}\n\n.neutral {\n border-color: colorNeutralLight;\n}\n\n.success {\n border-color: colorSuccessLight;\n}\n\n.information {\n border-color: colorInformationLight;\n}\n\n.warning {\n border-color: colorWarningLight;\n}\n\n.danger {\n border-color: colorDangerLight;\n}\n\n.topAligned {\n border-bottom-width: borderWidthPrimary;\n border-bottom-style: solid;\n}\n\n.bottomAligned {\n border-top-width: borderWidthPrimary;\n border-top-style: solid;\n}\n\n.alertContainer {\n padding-left: calc(spaceSmall * 2);\n}\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../components/Banner/Banner';\n//# sourceMappingURL=index.d.ts.map" }, "additional": {} }, "allFiles": [ "Banner.module.css", "Banner.stories.module.css", "Banner.stories.tsx", "Banner.tsx", "index.ts" ] }, "Breadcrumbs": { "name": "Breadcrumbs", "path": "src/components/Breadcrumbs", "files": { "main": { "path": "Breadcrumbs.d.ts", "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nimport type { BaseLinkProps } from '../../components/Link';\ntype ClassNames = Readonly<{\n wrapper?: string;\n}>;\nexport interface BreadcrumbsProps {\n classNames?: ClassNames;\n children: React.ReactNode;\n linkComponent?: Flow.AbstractComponent;\n testId?: string;\n}\nexport declare const Breadcrumbs: Flow.AbstractComponent;\nexport {};\n//# sourceMappingURL=Breadcrumbs.d.ts.map" }, "story": { "path": "Breadcrumbs.stories.tsx", "content": "import * as React from 'react';\n\nimport type {BreadcrumbsProps} from 'src/components/Breadcrumbs';\nimport {BreadcrumbLink} from 'src/components/Breadcrumbs';\nimport {Breadcrumbs} from 'src/components/Breadcrumbs/Breadcrumbs';\nimport {Button} from 'src/components/Button';\n\nimport css from 'src/components/Breadcrumbs/Breadcrumbs.stories.module.css';\n\n\nexport default {\n tags: ['autodocs'],\n title: 'Components/Breadcrumbs/Breadcrumbs',\n component: Breadcrumbs,\n argTypes: {\n classNames: {\n description: 'Provide an optional className to be applied to the wrapper',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary: '{ wrapper?: string }',\n },\n },\n },\n children: {\n description:\n 'A list of `BreadcrumbLink` components to be displayed as breadcrumbs',\n table: {\n type: {\n summary: 'React.Node',\n },\n },\n },\n },\n parameters: {\n docs: {\n subtitle: 'Generates a Breadcrumbs component.',\n description: {\n component: `\n\\`\\`\\`js\nimport { Breadcrumbs, BreadcrumbLink } from \"@spaced-out/ui-design-system/lib/components/Breadcrumbs\";\n\\`\\`\\`\nBreadcrumbs is a component used to display a breadcrumb trail with clickable links.\n\n**Usage with \\`Routing Library\\`:**\n\nTo use the \\`Breadcrumbs\\` with a routing Library, you would need to pass the \\`linkComponent\\` prop to the \\`\\` component.\n\n**Routing** and **highlighting the selected page** would be handled by the component itself.\n\n\\`\\`\\`jsx\nimport {Link} from 'src/rerouter';\nimport {Breadcrumbs, BreadcrumbLink} from '@spaced-out/ui-design-system/lib/components/Breadcrumbs';\n\n\n Page 1\n Page 2\n Page 3\n\n\\`\\`\\`\n\nIt'll replace the rendered a tag with routing library's Link.\n\n**Usage with \\`onClick\\`:**\n\n\\`\\`\\`jsx\n\n Page 1\n Page 2\n Page 3\n\n\\`\\`\\`\n\nIn the above example, you can include multiple BreadcrumbLink components within the Breadcrumbs component to create a breadcrumb trail.\n `,\n },\n },\n storySource: {\n componentPath: '/src/components/Breadcrumbs/Breadcrumbs',\n },\n },\n};\n\nconst PAGES = [\n {id: '1', name: 'Page #1'},\n {id: '2', name: 'Page #2'},\n {id: '3', name: 'Page #3'},\n {id: '4', name: 'Page #4'},\n];\n\nexport const BreadcrumbsStory = (args: BreadcrumbsProps) => {\n const [selectedPage, setSelectedPage] = React.useState('4');\n const [pages, setPages] = React.useState(PAGES);\n\n const onPageSelection = (\n _e: React.SyntheticEvent,\n pageId: string,\n ) => {\n setSelectedPage(pageId);\n\n // remove all pages after the selected page\n setPages(pages.filter((page) => parseInt(page.id) <= parseInt(pageId)));\n };\n\n const addPage = () => {\n const newPageId = (parseInt(pages[pages.length - 1].id) + 1).toString();\n const newPageName = `Page #${newPageId}`;\n setSelectedPage(newPageId);\n\n setPages([...pages, {id: newPageId, name: newPageName}]);\n };\n\n return (\n
\n \n {pages.map((page) => (\n \n {page.name}\n \n ))}\n \n
\n \n
\n
\n );\n};\n\nBreadcrumbsStory.args = {\n classNames: {wrapper: ''},\n};\n\nexport const BreadcrumbsWithBorderStory = (args: BreadcrumbsProps) => {\n const [selectedPage, setSelectedPage] = React.useState('4');\n const [pages, setPages] = React.useState(PAGES);\n\n const onPageSelection = (\n _e: React.SyntheticEvent,\n pageId: string,\n ) => {\n setSelectedPage(pageId);\n\n // remove all pages after the selected page\n setPages(pages.filter((page) => parseInt(page.id) <= parseInt(pageId)));\n };\n\n const addPage = () => {\n const newPageId = (parseInt(pages[pages.length - 1].id) + 1).toString();\n const newPageName = `Page #${newPageId}`;\n setSelectedPage(newPageId);\n\n setPages([...pages, {id: newPageId, name: newPageName}]);\n };\n\n return (\n
\n \n {pages.map((page) => (\n \n {page.name}\n \n ))}\n \n
\n \n
\n
\n );\n};\n\nBreadcrumbsWithBorderStory.args = {\n classNames: {wrapper: ''},\n};\nBreadcrumbsStory.storyName = 'Breadcrumbs';\nBreadcrumbsWithBorderStory.storyName = 'Breadcrumbs With Border';\n" }, "css": { "path": "Breadcrumbs.module.css", "content": "@value (\n spaceNone,\n spaceSmall,\n spaceMedium\n) from '../../styles/variables/_space.css';\n\n@value (\n size28\n) from '../../styles/variables/_size.css';\n\n.wrapper {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n padding: calc(spaceMedium / 4) spaceNone;\n min-height: size28;\n}\n\n.separator {\n margin-left: spaceSmall;\n margin-right: spaceSmall;\n}\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../components/Breadcrumbs/BreadcrumbLink';\nexport * from '../../components/Breadcrumbs/Breadcrumbs';\n//# sourceMappingURL=index.d.ts.map" }, "additional": { "BreadcrumbLink/BreadcrumbLink.d.ts": { "path": "BreadcrumbLink/BreadcrumbLink.d.ts", "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nimport type { LinkProps } from '../../../components/Link';\nexport interface BreadcrumbLinkProps extends Omit {\n isActive?: boolean;\n id: string;\n onClick?: (arg1: React.SyntheticEvent, id: string) => unknown;\n testId?: string;\n}\nexport declare const BreadcrumbLink: Flow.AbstractComponent;\n//# sourceMappingURL=BreadcrumbLink.d.ts.map" }, "BreadcrumbLink/index.d.ts": { "path": "BreadcrumbLink/index.d.ts", "content": "export * from '../../../components/Breadcrumbs/BreadcrumbLink/BreadcrumbLink';\n//# sourceMappingURL=index.d.ts.map" } } }, "allFiles": [ "BreadcrumbLink/BreadcrumbLink.module.css", "BreadcrumbLink/BreadcrumbLink.stories.tsx", "BreadcrumbLink/BreadcrumbLink.tsx", "BreadcrumbLink/index.ts", "Breadcrumbs.module.css", "Breadcrumbs.stories.module.css", "Breadcrumbs.stories.tsx", "Breadcrumbs.tsx", "index.ts" ] }, "Button": { "name": "Button", "path": "src/components/Button", "files": { "main": { "path": "Button.d.ts", "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nimport type { IconType } from '../../components/Icon';\ntype ClassNames = Readonly<{\n wrapper?: string;\n icon?: string;\n text?: string;\n}>;\n/**\n * Note(Nishant): Although Button supports gradient as a type, its not currently customizable really.\n * This only supports pre-defined gradient that moves from left to right.\n * If someone wants to add more gradients, the expectation is that they would add it through a wrapper className.\n *\n * We could have taken an extra prop to take in the Gradient colors but that should not be encouraged\n * as it would add an additional overhead on the component to figure out exact color values from string tokens\n * and since this is rarely used type anyway, it should be avoided.\n */\nexport declare const BUTTON_TYPES: Readonly<{\n primary: \"primary\";\n secondary: \"secondary\";\n tertiary: \"tertiary\";\n ghost: \"ghost\";\n danger: \"danger\";\n gradient: \"gradient\";\n tertiaryGradient: \"tertiaryGradient\";\n}>;\nexport declare const BUTTON_ACTION_TYPE: Readonly<{\n button: \"button\";\n submit: \"submit\";\n reset: \"reset\";\n}>;\nexport declare const BUTTON_SIZE: Readonly<{\n small: \"small\";\n medium: \"medium\";\n}>;\nexport type ButtonType = (typeof BUTTON_TYPES)[keyof typeof BUTTON_TYPES];\nexport type ButtonActionType = (typeof BUTTON_ACTION_TYPE)[keyof typeof BUTTON_ACTION_TYPE];\nexport type ButtonSize = keyof typeof BUTTON_SIZE;\nexport interface BaseButtonProps extends Omit, 'children' | 'disabled' | 'actionType' | 'onClick' | 'ariaLabel' | 'tabIndex' | 'isLoading' | 'role'> {\n children?: React.ReactNode;\n disabled?: boolean;\n actionType?: ButtonActionType;\n onClick?: React.MouseEventHandler;\n ariaLabel?: string;\n tabIndex?: number;\n isLoading?: boolean;\n role?: string;\n testId?: string;\n}\nexport interface UnstyledButtonProps extends Omit {\n className?: string;\n}\nexport interface ButtonProps extends Omit {\n classNames?: ClassNames;\n iconLeftName?: string;\n iconLeftType?: IconType;\n iconRightName?: string;\n iconRightType?: IconType;\n type?: ButtonType;\n isFluid?: boolean;\n size?: ButtonSize;\n}\nexport declare const UnstyledButton: Flow.AbstractComponent;\nexport declare const Button: Flow.AbstractComponent;\nexport {};\n//# sourceMappingURL=Button.d.ts.map" }, "story": { "path": "Button.stories.tsx", "content": "import * as React from 'react';\n\nimport type {ButtonProps} from 'src/components/Button/Button';\nimport {\n Button,\n BUTTON_ACTION_TYPE,\n BUTTON_SIZE,\n BUTTON_TYPES,\n} from 'src/components/Button/Button';\n\n\nconst actionTypeOptions: Array = [\n ...Object.values(BUTTON_ACTION_TYPE),\n];\nconst buttonTypeOptions: Array = [...Object.values(BUTTON_TYPES)];\nconst buttonSizeOptions: Array = [...Object.values(BUTTON_SIZE)];\n\nexport default {\n tags: ['autodocs'],\n title: 'Components/Button',\n component: Button,\n argTypes: {\n onClick: {\n description:\n '**onClick** handler that is applied to the root `\n \n \n \n \n This is a card\n Set width and height through a className\n Default Padding is set to {spaceMedium}\n \n \n \n);\n\nWithHeaderStory.args = {\n classNames: {wrapper: css.cardContainerWithHeader},\n testId: 'card-with-header-story',\n};\n\nexport const WithFooterStory = (args: CardProps) => (\n
\n \n \n This is a card\n Set width and height through a className\n Default Padding is set to {spaceMedium}\n \n \n \n Save it?\n \n \n \n \n \n \n \n
\n);\n\nWithFooterStory.args = {\n classNames: {wrapper: css.cardContainerWithHeader},\n testId: 'card-with-footer-story',\n};\n\nexport const WithHeaderAndFooterStory = (args: CardProps) => (\n
\n \n \n \n Card With Header\n \n \n \n \n \n \n \n This is a card\n Set width and height through a className\n Default Padding is set to {spaceMedium}\n \n \n \n Save it?\n \n \n \n \n \n \n \n
\n);\n\nWithHeaderAndFooterStory.args = {\n classNames: {wrapper: css.cardContainerWithHeader},\n testId: 'card-with-header-and-footer-story',\n};\n\nexport const ClickableStory = (args: CardProps) => (\n
\n \n This is a clickable card\n Set width and height through a className\n Default Padding is set to {spaceMedium}\n \n \n \n This has focus and hover states\n \n
\n);\nClickableStory.args = {\n testId: 'clickable-card-story',\n};\nDefaultStory.storyName = 'Default';\nWithHeaderStory.storyName = 'With Header';\nWithFooterStory.storyName = 'With Footer';\nWithHeaderAndFooterStory.storyName = 'With Header And Footer';\nClickableStory.storyName = 'Clickable';\n" }, "css": { "path": "Card.module.css", "content": "@value (colorBackgroundTertiary, colorFillPrimary, colorBorderSecondary, colorFocusPrimary) from '../../styles/variables/_color.css';\n@value (borderRadiusMedium, borderWidthNone, borderWidthTertiary) from '../../styles/variables/_border.css';\n@value (spaceSmall, spaceMedium, spaceLarge, spaceXSmall) from '../../styles/variables/_space.css';\n@value (size58, sizeFluid) from '../../styles/variables/_size.css';\n\n.cardWrapper {\n --card-padding-top: spaceMedium;\n --card-padding-right: spaceMedium;\n --card-padding-bottom: spaceMedium;\n --card-padding-left: spaceMedium;\n}\n\n.cardWrapper {\n display: flex;\n composes: borderPrimary from '../../styles/border.module.css';\n background-color: colorBackgroundTertiary;\n border-radius: borderRadiusMedium;\n}\n\n.cardWrapper:not(:has(.cardHeader, .cardFooter, .cardContent)) {\n padding-top: var(--card-padding-top);\n padding-right: var(--card-padding-right);\n padding-bottom: var(--card-padding-bottom);\n padding-left: var(--card-padding-left);\n}\n\n.cardWrapper:has(.cardHeader, .cardFooter, .cardContent) {\n flex-flow: column;\n}\n\n.cardHeader {\n display: flex;\n justify-content: space-between;\n width: sizeFluid;\n align-items: center;\n min-height: size58;\n composes: subTitleSmall from '../../styles/typography.module.css';\n composes: borderBottomPrimary from '../../styles/border.module.css';\n padding: spaceSmall var(--card-padding-right) spaceSmall\n var(--card-padding-left);\n gap: spaceXSmall;\n}\n\n.cardFooter {\n display: flex;\n justify-content: space-between;\n width: sizeFluid;\n align-items: center;\n min-height: size58;\n composes: subTitleSmall from '../../styles/typography.module.css';\n composes: borderTopPrimary from '../../styles/border.module.css';\n padding: spaceSmall var(--card-padding-right) spaceSmall\n var(--card-padding-left);\n gap: spaceXSmall;\n margin-top: auto;\n}\n\n.cardTitle {\n display: flex;\n}\n\n.cardActions {\n display: flex;\n gap: spaceXSmall;\n margin-left: auto;\n}\n\n.cardContent {\n display: flex;\n padding-top: var(--card-padding-top);\n padding-right: var(--card-padding-right);\n padding-bottom: var(--card-padding-bottom);\n padding-left: var(--card-padding-left);\n}\n\n.clickableCard {\n cursor: pointer;\n outline: none;\n}\n.clickableCard.disabled {\n pointer-events: none;\n}\n\n.clickableCard:hover {\n border-color: colorBorderSecondary;\n}\n\n.clickableCard:focus-within {\n border-color: colorFillPrimary;\n box-shadow: borderWidthNone borderWidthNone borderWidthNone\n borderWidthTertiary colorFocusPrimary;\n}\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../components/Card/Card';\n//# sourceMappingURL=index.d.ts.map" }, "additional": {} }, "allFiles": [ "Card.module.css", "Card.stories.module.css", "Card.stories.tsx", "Card.tsx", "index.ts" ] }, "Charts": { "name": "Charts", "path": "src/components/Charts", "files": { "main": null, "story": null, "css": null, "index": { "path": "index.d.ts", "content": "export * from '../../components/Charts/ChartTooltip';\nexport * from '../../components/Charts/ChartWrapper';\nexport * from '../../components/Charts/ColumnChart';\nexport * from '../../components/Charts/DonutChart';\nexport * from '../../components/Charts/FunnelChart';\nexport * from '../../components/Charts/LineChart';\nexport * from '../../components/Charts/SankeyChart';\nexport * from '../../components/Charts/SpiderChart';\nexport * from '../../components/Charts/StackedBarChart';\nexport * from '../../components/Charts/StackedBarLineChart';\nexport * from '../../components/Charts/UniversalChart';\n//# sourceMappingURL=index.d.ts.map" }, "additional": { "ChartTooltip/index.d.ts": { "path": "ChartTooltip/index.d.ts", "content": "import type { ChartTooltip } from '../../../types/charts';\nexport declare const tooltipTheme: ChartTooltip;\n//# sourceMappingURL=index.d.ts.map" }, "ChartWrapper/ChartWrapper.d.ts": { "path": "ChartWrapper/ChartWrapper.d.ts", "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nimport Highcharts from 'highcharts';\ninterface ChartRef {\n chart?: Highcharts.Chart;\n}\nexport type ChartRefObject = React.RefObject;\nexport interface ExportOptionType {\n key: string;\n label: string;\n format: string;\n}\nexport declare const EXPORT_OPTIONS: Readonly<{\n download_as_png: {\n key: string;\n label: string;\n format: string;\n };\n download_as_jpeg: {\n key: string;\n label: string;\n format: string;\n };\n download_as_pdf: {\n key: string;\n label: string;\n format: string;\n };\n download_as_svg: {\n key: string;\n label: string;\n format: string;\n };\n}>;\nexport type ChartWrapperClassNames = Readonly<{\n wrapper?: string;\n header?: string;\n title?: string;\n actions?: string;\n content?: string;\n loader?: string;\n}>;\ninterface ChartWrapperProps {\n isLoading?: boolean;\n title: React.ReactNode;\n children?: React.ReactNode;\n classNames?: ChartWrapperClassNames;\n customExportOptions?: Array | null;\n headerActions?: React.ReactNode;\n hasEmptyData?: boolean;\n emptyText?: React.ReactNode;\n testId?: string;\n}\nexport declare const ChartWrapper: Flow.AbstractComponent;\nexport {};\n//# sourceMappingURL=ChartWrapper.d.ts.map" }, "ChartWrapper/index.d.ts": { "path": "ChartWrapper/index.d.ts", "content": "export * from '../../../components/Charts/ChartWrapper/ChartWrapper';\n//# sourceMappingURL=index.d.ts.map" }, "ColumnChart/ColumnChart.d.ts": { "path": "ColumnChart/ColumnChart.d.ts", "content": "import * as React from 'react';\nimport type { SeriesColumnOptions } from 'highcharts';\nimport type { ChartOptions, DataOptionsType, Drilldown } from '../../../types/charts';\nimport type { ChartWrapperClassNames, ExportOptionType } from '../../../components/Charts/ChartWrapper';\ntype ClassNames = Readonly;\nexport type ColumnSeries = Omit & {\n name: string;\n data: DataOptionsType[];\n};\nexport interface ColumnChartProps extends Omit {\n isLoading?: boolean;\n classNames?: ClassNames;\n cardTitle?: React.ReactNode;\n customExportOptions?: Array | null;\n series: Array;\n drilldown?: Drilldown;\n headerActions?: React.ReactNode;\n hasEmptyData?: boolean;\n emptyText?: React.ReactNode;\n testId?: string;\n}\nexport declare const ColumnChart: ({ isLoading, classNames, cardTitle, customExportOptions, series, drilldown, headerActions, hasEmptyData, emptyText, testId, ...userOptions }: ColumnChartProps) => React.JSX.Element;\nexport {};\n//# sourceMappingURL=ColumnChart.d.ts.map" }, "ColumnChart/index.d.ts": { "path": "ColumnChart/index.d.ts", "content": "export * from '../../../components/Charts/ColumnChart/ColumnChart';\n//# sourceMappingURL=index.d.ts.map" }, "DonutChart/DonutChart.d.ts": { "path": "DonutChart/DonutChart.d.ts", "content": "import * as React from 'react';\nimport type { ChartOptions, Drilldown, LegendOptionsType, PieSeriesOptions } from '../../../types/charts';\nimport type { ChartWrapperClassNames, ExportOptionType } from '../../../components/Charts/ChartWrapper';\ntype ClassNames = Readonly;\ninterface SubtitleClassNames {\n wrapper?: string;\n text?: string;\n subtext?: string;\n}\nexport interface DonutChartProps extends Omit {\n isLoading?: boolean;\n classNames?: ClassNames;\n cardTitle?: React.ReactNode;\n customExportOptions?: Array | null;\n headerActions?: React.ReactNode;\n centerText?: string;\n centerSubtext?: string;\n showTotal?: boolean;\n showLegendValues?: boolean;\n formatValue?: (value: number) => string;\n series: Array;\n drilldown?: Drilldown;\n legend?: LegendOptionsType;\n hasEmptyData?: boolean;\n emptyText?: React.ReactNode;\n testId?: string;\n}\nexport declare const DonutChart: ({ isLoading, classNames, cardTitle, customExportOptions, headerActions, series, drilldown, legend, centerText, centerSubtext, showTotal, showLegendValues, formatValue, hasEmptyData, emptyText, testId, ...userOptions }: DonutChartProps) => React.JSX.Element;\nexport {};\n//# sourceMappingURL=DonutChart.d.ts.map" }, "DonutChart/index.d.ts": { "path": "DonutChart/index.d.ts", "content": "export * from '../../../components/Charts/DonutChart/DonutChart';\n//# sourceMappingURL=index.d.ts.map" }, "FunnelChart/FunnelChart.d.ts": { "path": "FunnelChart/FunnelChart.d.ts", "content": "import * as React from 'react';\nimport type { ChartOptions, DataOptionsType, Drilldown } from '../../../types/charts';\nimport type { ChartWrapperClassNames, ExportOptionType } from '../../../components/Charts/ChartWrapper';\ntype ClassNames = Readonly;\nexport interface FunnelSeriesItem {\n name?: string;\n showInLegend?: boolean;\n data: Array;\n}\nexport interface FunnelChartProps extends Omit {\n isLoading?: boolean;\n classNames?: ClassNames;\n cardTitle?: React.ReactNode;\n customExportOptions?: Array | null;\n series: Array;\n headerActions?: React.ReactNode;\n drilldown?: Drilldown;\n showLegend?: boolean;\n hasEmptyData?: boolean;\n emptyText?: React.ReactNode;\n testId?: string;\n}\nexport declare const FunnelChart: ({ isLoading, classNames, cardTitle, customExportOptions, series, headerActions, drilldown, showLegend, hasEmptyData, emptyText, testId, ...userOptions }: FunnelChartProps) => React.JSX.Element;\nexport {};\n//# sourceMappingURL=FunnelChart.d.ts.map" }, "FunnelChart/index.d.ts": { "path": "FunnelChart/index.d.ts", "content": "export * from '../../../components/Charts/FunnelChart/FunnelChart';\n//# sourceMappingURL=index.d.ts.map" }, "LineChart/LineChart.d.ts": { "path": "LineChart/LineChart.d.ts", "content": "import * as React from 'react';\nimport type { SeriesLineOptions } from 'highcharts';\nimport type { ChartOptions, DataOptionsType, Drilldown } from '../../../types/charts';\nimport type { ChartWrapperClassNames, ExportOptionType } from '../../../components/Charts/ChartWrapper';\ntype ClassNames = Readonly;\nexport type LineSeriesItem = Omit & {\n name: string;\n data: DataOptionsType[];\n};\nexport interface LineChartProps extends Omit {\n isLoading?: boolean;\n classNames?: ClassNames;\n cardTitle?: React.ReactNode;\n customExportOptions?: Array | null;\n series: Array;\n headerActions?: React.ReactNode;\n drilldown?: Drilldown;\n hasEmptyData?: boolean;\n emptyText?: React.ReactNode;\n testId?: string;\n}\nexport declare const LineChart: ({ isLoading, classNames, cardTitle, customExportOptions, series, headerActions, drilldown, hasEmptyData, emptyText, testId, ...userOptions }: LineChartProps) => React.JSX.Element;\nexport {};\n//# sourceMappingURL=LineChart.d.ts.map" }, "LineChart/index.d.ts": { "path": "LineChart/index.d.ts", "content": "export * from '../../../components/Charts/LineChart/LineChart';\n//# sourceMappingURL=index.d.ts.map" }, "SankeyChart/SankeyChart.d.ts": { "path": "SankeyChart/SankeyChart.d.ts", "content": "import * as React from 'react';\nimport type { ChartOptions, Drilldown, SankeySeriesOptions } from '../../../types/charts';\nimport type { ChartWrapperClassNames, ExportOptionType } from '../../../components/Charts/ChartWrapper';\ntype ClassNames = Readonly;\nexport interface SankeyChartProps extends Omit {\n isLoading?: boolean;\n cardTitle?: React.ReactNode;\n emptyText?: React.ReactNode;\n nodeWidth?: number;\n classNames?: ClassNames;\n showLegend?: boolean;\n nodePadding?: number;\n hasEmptyData?: boolean;\n headerActions?: React.ReactNode;\n customExportOptions?: Array | null;\n series?: Array;\n drilldown?: Drilldown;\n testId?: string;\n}\nexport declare const SankeyChart: ({ series, emptyText, drilldown, cardTitle, isLoading, nodeWidth, showLegend, classNames, nodePadding, hasEmptyData, headerActions, customExportOptions, testId, ...userOptions }: SankeyChartProps) => React.ReactNode;\nexport {};\n//# sourceMappingURL=SankeyChart.d.ts.map" }, "SankeyChart/index.d.ts": { "path": "SankeyChart/index.d.ts", "content": "export * from '../../../components/Charts/SankeyChart/SankeyChart';\n//# sourceMappingURL=index.d.ts.map" }, "SpiderChart/SpiderChart.d.ts": { "path": "SpiderChart/SpiderChart.d.ts", "content": "import * as React from 'react';\nimport type { SeriesLineOptions } from 'highcharts';\nimport type { ChartOptions, DataOptionsType } from '../../../types/charts';\nimport type { ChartWrapperClassNames, ExportOptionType } from '../../../components/Charts/ChartWrapper';\ntype ClassNames = Readonly;\nexport type SpiderSeriesItem = Omit & {\n name: string;\n data: DataOptionsType[];\n};\nexport interface SpiderChartProps extends Omit {\n isLoading?: boolean;\n classNames?: ClassNames;\n cardTitle?: React.ReactNode;\n customExportOptions?: Array | null;\n headerActions?: React.ReactNode;\n series: Array;\n hasEmptyData?: boolean;\n emptyText?: React.ReactNode;\n testId?: string;\n}\nexport declare const SpiderChart: ({ isLoading, classNames, cardTitle, customExportOptions, headerActions, series, hasEmptyData, emptyText, testId, ...userOptions }: SpiderChartProps) => React.JSX.Element;\nexport {};\n//# sourceMappingURL=SpiderChart.d.ts.map" }, "SpiderChart/index.d.ts": { "path": "SpiderChart/index.d.ts", "content": "export * from '../../../components/Charts/SpiderChart/SpiderChart';\n//# sourceMappingURL=index.d.ts.map" }, "StackedBarChart/StackedBarChart.d.ts": { "path": "StackedBarChart/StackedBarChart.d.ts", "content": "import * as React from 'react';\nimport type { SeriesColumnOptions } from 'highcharts';\nimport type { ChartOptions, DataOptionsType, Drilldown } from '../../../types/charts';\nimport type { StackedBarOrientation } from '../../../utils/charts';\nimport type { ChartWrapperClassNames, ExportOptionType } from '../../../components/Charts/ChartWrapper';\ntype ClassNames = Readonly;\nexport type StackedBarSeries = Omit & {\n name: string;\n data: DataOptionsType[];\n};\nexport interface StackedBarChartProps extends Omit {\n series: Array;\n /**\n * Orientation of the stacked bars. Defaults to `horizontal`.\n * Pass `vertical` to render columns with categories on the x-axis.\n */\n orientation?: StackedBarOrientation;\n isLoading?: boolean;\n drilldown?: Drilldown;\n cardTitle?: React.ReactNode;\n emptyText?: React.ReactNode;\n classNames?: ClassNames;\n hasEmptyData?: boolean;\n headerActions?: React.ReactNode;\n customExportOptions?: Array | null;\n testId?: string;\n}\nexport declare const StackedBarChart: ({ series, orientation, isLoading, drilldown, emptyText, cardTitle, classNames, hasEmptyData, headerActions, customExportOptions, testId, ...userOptions }: StackedBarChartProps) => React.ReactNode;\nexport {};\n//# sourceMappingURL=StackedBarChart.d.ts.map" }, "StackedBarChart/index.d.ts": { "path": "StackedBarChart/index.d.ts", "content": "export * from '../../../components/Charts/StackedBarChart/StackedBarChart';\n//# sourceMappingURL=index.d.ts.map" }, "StackedBarLineChart/StackedBarLineChart.d.ts": { "path": "StackedBarLineChart/StackedBarLineChart.d.ts", "content": "import * as React from 'react';\nimport type { SeriesColumnOptions, SeriesLineOptions } from 'highcharts';\nimport type { ChartOptions, DataOptionsType, Drilldown } from '../../../types/charts';\nimport type { ChartWrapperClassNames, ExportOptionType } from '../../../components/Charts/ChartWrapper';\ntype ClassNames = Readonly;\nexport type StackedBarLineColumnSeries = Omit & {\n type: 'column';\n name: string;\n data: DataOptionsType[];\n};\nexport type StackedBarLineLineSeries = Omit & {\n type: 'line';\n name: string;\n data: DataOptionsType[];\n};\nexport type StackedBarLineSeries = StackedBarLineColumnSeries | StackedBarLineLineSeries;\n/**\n * Combo chart: stacked columns + overlaid line(s) on a single shared y-axis.\n *\n * Use when the columns and line(s) share the same units (e.g., a stacked\n * breakdown of revenue plus a target-revenue line, both in dollars). Pass\n * `yAxis` as a single options object; the chart renders the axis labels on\n * both the left and the right edges of the plot via a linked mirror, so\n * values are readable from either side.\n */\nexport interface StackedBarLineChartProps extends Omit {\n series: Array;\n isLoading?: boolean;\n drilldown?: Drilldown;\n cardTitle?: React.ReactNode;\n emptyText?: React.ReactNode;\n classNames?: ClassNames;\n hasEmptyData?: boolean;\n headerActions?: React.ReactNode;\n customExportOptions?: Array | null;\n testId?: string;\n}\nexport declare const StackedBarLineChart: ({ series, isLoading, drilldown, emptyText, cardTitle, classNames, hasEmptyData, headerActions, customExportOptions, testId, ...userOptions }: StackedBarLineChartProps) => React.ReactNode;\nexport {};\n//# sourceMappingURL=StackedBarLineChart.d.ts.map" }, "StackedBarLineChart/index.d.ts": { "path": "StackedBarLineChart/index.d.ts", "content": "export * from '../../../components/Charts/StackedBarLineChart/StackedBarLineChart';\n//# sourceMappingURL=index.d.ts.map" }, "UniversalChart/UniversalChart.d.ts": { "path": "UniversalChart/UniversalChart.d.ts", "content": "import * as React from 'react';\nimport type { CategoricalChartKind, ChartKindOptionType, ComboChartKind, FlowChartKind, ProportionChartKind, UniversalChartProps } from '../../../components/Charts/UniversalChart/UniversalChart.types';\nexport declare const CHART_KIND_OPTIONS: Readonly<{\n column: ChartKindOptionType<\"column\">;\n line: ChartKindOptionType<\"line\">;\n donut: ChartKindOptionType<\"donut\">;\n funnel: ChartKindOptionType<\"funnel\">;\n sankey: ChartKindOptionType<\"sankey\">;\n spider: ChartKindOptionType<\"spider\">;\n stackedBar: ChartKindOptionType<\"stackedBar\">;\n stackedBarLine: ChartKindOptionType<\"stackedBarLine\">;\n}>;\nexport declare const CHART_KIND_GROUPS: Readonly<{\n CATEGORICAL: Array>;\n PROPORTION: Array>;\n FLOW: Array>;\n COMBO: Array>;\n}>;\nexport type { UniversalChartProps, ChartKind, ChartKindOptionType, ChartKindSelectorProps, CategoricalChartKind, ProportionChartKind, FlowChartKind, ComboChartKind, } from '../../../components/Charts/UniversalChart/UniversalChart.types';\nexport declare const UniversalChart: {\n (props: UniversalChartProps): React.JSX.Element;\n displayName: string;\n};\n//# sourceMappingURL=UniversalChart.d.ts.map" }, "UniversalChart/UniversalChart.types.d.ts": { "path": "UniversalChart/UniversalChart.types.d.ts", "content": "import type { ColumnChartProps } from '../../../components/Charts/ColumnChart';\nimport type { DonutChartProps } from '../../../components/Charts/DonutChart';\nimport type { FunnelChartProps } from '../../../components/Charts/FunnelChart';\nimport type { LineChartProps } from '../../../components/Charts/LineChart';\nimport type { SankeyChartProps } from '../../../components/Charts/SankeyChart';\nimport type { SpiderChartProps } from '../../../components/Charts/SpiderChart';\nimport type { StackedBarChartProps } from '../../../components/Charts/StackedBarChart';\nimport type { StackedBarLineChartProps } from '../../../components/Charts/StackedBarLineChart';\nexport type ChartKind = 'column' | 'line' | 'donut' | 'funnel' | 'sankey' | 'spider' | 'stackedBar' | 'stackedBarLine';\nexport type CategoricalChartKind = 'column' | 'line' | 'stackedBar' | 'spider';\nexport type ProportionChartKind = 'donut' | 'funnel';\nexport type FlowChartKind = 'sankey';\nexport type ComboChartKind = 'stackedBarLine';\nexport interface ChartKindOptionType {\n key: K;\n label: string;\n}\nexport interface ChartKindSelectorProps {\n showChartKindSwitcher?: boolean;\n chartKindOptions?: Array> | Array> | Array> | Array>;\n onChartKindChange?: (chartKind: ChartKind) => void;\n responsive?: boolean;\n}\nexport type UniversalChartProps = (({\n chartKind: 'column';\n} & ColumnChartProps) | ({\n chartKind: 'line';\n} & LineChartProps) | ({\n chartKind: 'donut';\n} & DonutChartProps) | ({\n chartKind: 'funnel';\n} & FunnelChartProps) | ({\n chartKind: 'sankey';\n} & SankeyChartProps) | ({\n chartKind: 'spider';\n} & SpiderChartProps) | ({\n chartKind: 'stackedBar';\n} & StackedBarChartProps) | ({\n chartKind: 'stackedBarLine';\n} & StackedBarLineChartProps)) & ChartKindSelectorProps;\n//# sourceMappingURL=UniversalChart.types.d.ts.map" }, "UniversalChart/index.d.ts": { "path": "UniversalChart/index.d.ts", "content": "export * from '../../../components/Charts/UniversalChart/UniversalChart';\n//# sourceMappingURL=index.d.ts.map" } } }, "allFiles": [ "ChartTooltip/ChartTooltip.module.css", "ChartTooltip/index.ts", "ChartWrapper/ChartWrapper.module.css", "ChartWrapper/ChartWrapper.tsx", "ChartWrapper/index.ts", "ColumnChart/ColumnChart.module.css", "ColumnChart/ColumnChart.stories.module.css", "ColumnChart/ColumnChart.stories.tsx", "ColumnChart/ColumnChart.tsx", "ColumnChart/index.ts", "DonutChart/DonutChart.module.css", "DonutChart/DonutChart.stories.module.css", "DonutChart/DonutChart.stories.tsx", "DonutChart/DonutChart.tsx", "DonutChart/index.ts", "FunnelChart/FunnelChart.module.css", "FunnelChart/FunnelChart.stories.module.css", "FunnelChart/FunnelChart.stories.tsx", "FunnelChart/FunnelChart.tsx", "FunnelChart/index.ts", "LineChart/LineChart.module.css", "LineChart/LineChart.stories.module.css", "LineChart/LineChart.stories.tsx", "LineChart/LineChart.tsx", "LineChart/index.ts", "SankeyChart/SankeyChart.module.css", "SankeyChart/SankeyChart.stories.module.css", "SankeyChart/SankeyChart.stories.tsx", "SankeyChart/SankeyChart.tsx", "SankeyChart/index.ts", "SpiderChart/SpiderChart.module.css", "SpiderChart/SpiderChart.stories.module.css", "SpiderChart/SpiderChart.stories.tsx", "SpiderChart/SpiderChart.tsx", "SpiderChart/index.ts", "StackedBarChart/StackedBarChart.module.css", "StackedBarChart/StackedBarChart.stories.module.css", "StackedBarChart/StackedBarChart.stories.tsx", "StackedBarChart/StackedBarChart.tsx", "StackedBarChart/index.ts", "StackedBarLineChart/StackedBarLineChart.module.css", "StackedBarLineChart/StackedBarLineChart.stories.module.css", "StackedBarLineChart/StackedBarLineChart.stories.tsx", "StackedBarLineChart/StackedBarLineChart.tsx", "StackedBarLineChart/index.ts", "UniversalChart/UniversalChart.module.css", "UniversalChart/UniversalChart.stories.module.css", "UniversalChart/UniversalChart.stories.tsx", "UniversalChart/UniversalChart.tsx", "UniversalChart/UniversalChart.types.ts", "UniversalChart/index.ts", "index.ts" ] }, "ChatBubble": { "name": "ChatBubble", "path": "src/components/ChatBubble", "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;\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 \n \n \n \n \n ),\n listItems: listItems.map((item) => ({\n ...item,\n iconLeftName: 'warning',\n iconLeftType: 'solid',\n })) as ChecklistItem[],\n};\n\nChecklistStory.storyName = 'Checklist';\n\nexport const ChecklistInProgress = ({\n children: _children,\n ...args\n}: ChecklistProps) => {\n const [completedItems, setCompletedItems] = React.useState(0);\n const totalItems = 9;\n const [listItemsLocal, setListItemsLocal] = React.useState(listItems);\n\n React.useEffect(() => {\n const interval = setInterval(() => {\n if (completedItems >= totalItems) {\n clearInterval(interval);\n return;\n }\n setCompletedItems((prev) => prev + 1);\n setListItemsLocal(\n listItemsLocal.map((item, idx) => ({\n ...item,\n iconLeftName: idx <= completedItems ? 'check-circle' : 'spinner',\n iconLeftType: 'solid',\n iconLeftColor: idx <= completedItems ? 'success' : 'tertiary',\n })),\n );\n }, 1000);\n return () => clearInterval(interval);\n }, [completedItems]);\n\n return (\n
\n \n }\n />\n
\n );\n};\n\nChecklistInProgress.args = {\n title: checklistTitle,\n footer: (\n
\n \n \n
\n ),\n};\n\nChecklistInProgress.storyName = 'Checklist In Progress';\n\nexport const ChecklistWithItemRightSlot = (args: ChecklistProps) => (\n
\n \n
\n);\n\nChecklistWithItemRightSlot.args = {\n title: checklistTitle,\n listItems: listItems.map((item) => ({\n ...item,\n iconLeftName: 'warning',\n iconLeftType: 'solid',\n rightSlot: (\n \n Recheck\n \n ),\n })) as ChecklistItem[],\n footer: (\n
\n \n \n
\n ),\n};\n\nChecklistWithItemRightSlot.storyName = 'Checklist With Item Right Slot';\n\nexport const ChecklistWithCustomContent = (args: ChecklistProps) => (\n
\n \n
\n);\n\nChecklistWithCustomContent.args = {\n title: checklistTitle,\n children: (\n
\n Multiple Actions\n \n This card accordion demonstrates a footer with multiple action buttons.\n This pattern is useful when you need to provide several action options\n to the user.\n \n
\n ),\n footer: (\n
\n \n \n
\n ),\n};\n\nChecklistWithCustomContent.storyName = 'Checklist With Custom Content';\n" }, "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 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", "content": "export * from '../../components/Checklist/Checklist';\n//# sourceMappingURL=index.d.ts.map" }, "additional": {} }, "allFiles": [ "Checklist.module.css", "Checklist.stories.module.css", "Checklist.stories.tsx", "Checklist.tsx", "index.ts" ] }, "Chip": { "name": "Chip", "path": "src/components/Chip", "files": { "main": { "path": "Chip.d.ts", "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nimport type { IconType } from '../../components/Icon';\ntype ClassNames = Readonly<{\n wrapper?: string;\n icon?: string;\n statusIndicator?: string;\n}>;\nexport declare const CHIP_SEMANTIC: Readonly<{\n primary: \"primary\";\n information: \"information\";\n success: \"success\";\n warning: \"warning\";\n danger: \"danger\";\n secondary: \"secondary\";\n}>;\nexport type ChipSemanticType = (typeof CHIP_SEMANTIC)[keyof typeof CHIP_SEMANTIC];\nexport interface BaseChipProps {\n classNames?: ClassNames;\n semantic?: ChipSemanticType;\n children: React.ReactNode;\n disabled?: boolean;\n showStatusIndicator?: boolean;\n disableHoverState?: boolean;\n line?: number;\n wordBreak?: string;\n onClick?: ((arg1: React.SyntheticEvent) => unknown) | null | undefined;\n onMouseEnter?: React.MouseEventHandler;\n onMouseLeave?: React.MouseEventHandler;\n testId?: string;\n}\nexport interface LargeChipProps extends Omit {\n iconName?: string;\n iconType?: IconType;\n dismissable?: boolean;\n onDismiss?: ((arg1: React.SyntheticEvent) => unknown) | null | undefined;\n size?: 'large';\n}\nexport interface MediumChipProps extends Omit {\n size?: 'medium';\n}\nexport interface SmallChipProps extends Omit {\n size?: 'small';\n}\nexport type ChipProps = LargeChipProps | MediumChipProps | SmallChipProps;\nexport declare const Chip: Flow.AbstractComponent;\nexport {};\n//# sourceMappingURL=Chip.d.ts.map" }, "story": { "path": "Chip.stories.tsx", "content": "import * as React from 'react';\n\nimport type {ChipProps} from 'src/components/Chip/Chip';\nimport {Chip, CHIP_SEMANTIC} from 'src/components/Chip/Chip';\nimport {BasicDialog} from 'src/components/Dialog';\n\nimport css from 'src/components/Chip/Chip.stories.module.css';\n\n\nconst semanticOptions: Array = [...Object.values(CHIP_SEMANTIC)];\n\nexport default {\n tags: ['autodocs'],\n title: 'Components/Chip',\n argTypes: {\n wordBreak: {\n description: 'word-break style to be applied on truncate',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n defaultValue: {summary: 'break-all'},\n },\n },\n line: {\n description:\n 'Number of lines to show, and lines after that will be truncated',\n control: {\n type: 'number',\n min: 1,\n },\n table: {\n type: {summary: 'number'},\n defaultValue: {summary: 1},\n },\n },\n size: {\n description:\n 'Chip supports only three size variants namely small, medium and large. `small` < `medium` < `large`. `Small` variation does not have support for icons(both **custom icon** and **close icon**)',\n control: 'radio',\n options: ['large', 'medium', 'small'],\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: 'medium'},\n },\n },\n semantic: {\n options: semanticOptions,\n description:\n 'Semantic type of a Chip. It will have different background color for different semantic type',\n control: {\n type: 'select',\n },\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: CHIP_SEMANTIC.primary},\n },\n },\n showStatusIndicator: {\n description:\n 'If **true**, the component would show a status indicator **only for medium sized chip**',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n disableHoverState: {\n description:\n 'If **true**, the component would disable any hover states if present',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n onClick: {\n description:\n '**onClick** handler that is called when a chip is **clicked**',\n action: 'clicked',\n table: {\n type: {summary: '(SyntheticEvent) => mixed'},\n },\n },\n onDismiss: {\n description:\n '**onDismiss** handler that is applied to close icon of chip. This is only attached for **Medium** sized `Chip`',\n action: 'onDismiss',\n table: {\n type: {summary: '(SyntheticEvent) => mixed'},\n },\n },\n onMouseEnter: {\n description: '**onMouseEnter** handler that is called on hover in',\n action: 'onMouseEnter',\n table: {\n type: {summary: '(SyntheticEvent) => mixed'},\n },\n },\n onMouseLeave: {\n description: '**onMouseLeave** handler that is called on hover out',\n action: 'onMouseLeave',\n table: {\n type: {summary: '(SyntheticEvent) => mixed'},\n },\n },\n dismissable: {\n description:\n 'Close Icon will appear in right side in case it is true. This is only supported for **Medium** sized `Chip`',\n name: 'dismissable',\n options: [false, true],\n control: 'boolean',\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: false},\n },\n },\n iconName: {\n description:\n 'Custom icon to be displayed in the chip. This is only attached for **Medium** sized `Chip`',\n table: {\n type: {summary: 'string'},\n },\n },\n iconType: {\n description:\n 'Type of Icon for Chip. This is only supported for **Medium** sized `Chip`. Type represents 4 unique icon styles :- Solid, Regular, Duotone and Brands',\n options: ['regular', 'solid', 'duotone', 'brands'],\n control: {type: 'select'},\n table: {\n type: {summary: 'string'},\n defaultValue: {summary: 'regular'},\n },\n },\n children: {\n description: 'Content of the chip',\n type: {required: true},\n table: {\n type: {summary: 'React.Node | string'},\n },\n },\n disabled: {\n description: 'If **true**, the component is disabled',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n classNames: {\n description:\n 'Provide an optional classNames to be applied to the wrapper, icon and statusIndicator',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary:\n '{wrapper?: string, icon?: string, statusIndicator?: string}',\n },\n },\n },\n testId: {\n description: 'Test ID for the component',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n },\n parameters: {\n docs: {\n subtitle: 'Generates a Chip component.',\n description: {\n component: `\n\\`\\`\\`js\nimport { Chip } from \"@spaced-out/ui-design-system/lib/components/Chip\";\n\\`\\`\\`\n\\`Chip\\` is a singular **compact element** that represent an input, attribute, or action. They can be stacked in multiples according\nto needs. Chip supports multiple semantics and a practical use case would use multiple chips together. \\`Chip\\` grows with the content it encapsulates.\n\nThere is also a **dismissable** variation which provides a callback on click of the Close Icon\n\n**dismissable** and **icon** variations are only available for **large** & **medium** sized chip. Chip content truncates itself on size crunch.\n `,\n },\n },\n storySource: {\n componentPath: '/src/components/Chip/Chip',\n },\n },\n};\n\nexport const ClickableStory = (args: ChipProps) => {\n const [showDialog, setShowDialog] = React.useState(false);\n\n return (\n
\n setShowDialog(true)}>\n setShowDialog(false)}\n initialFocus={0}\n >\n
\n );\n};\n\nClickableStory.args = {\n children: 'Clickable Chip',\n testId: 'chip-clickable-story',\n};\n\nexport const MultilineStory = (args: ChipProps) => {\n const [showDialog, setShowDialog] = React.useState(false);\n\n return (\n
\n setShowDialog(true)}>\n setShowDialog(false)}\n initialFocus={0}\n >\n
\n );\n};\n\nMultilineStory.args = {\n children: `Genesis is the foundational design system at Sense. It serves as the\n single source of truth for our product UI crafted to ensure visual\n consistency. Genesis is the foundational design system at Sense. It serves as the\n single source of truth for our product UI crafted to ensure visual\n consistency.`,\n iconName: 'citrus',\n line: 2,\n testId: 'chip-multiline-story',\n};\n\nexport const WithTextStory = () => (\n
\n
\n \n Primary Chip\n \n \n Information Chip\n \n \n Secondary Chip\n \n
\n
\n);\n\nWithTextStory.args = {\n children: 'Clickable Chip',\n testId: 'chip-with-text-story',\n};\n\nexport const WithStatusIndicatorStory = () => (\n
\n
\n
\n \n Primary Chip\n \n \n Information Chip\n \n \n Secondary Chip\n \n
\n
\n
\n);\n\nexport const WithIconStory = () => (\n
\n
\n \n Primary Chip\n \n \n Information Chip\n \n \n Secondary Chip\n \n
\n
\n);\n\nexport const DismissableStory = () => {\n const [showDialog, setShowDialog] = React.useState(false);\n\n return (\n
\n
\n
\n setShowDialog(true)}\n testId=\"chip-primary-dismissable-story\"\n >\n Primary Chip\n \n\n setShowDialog(true)}\n testId=\"chip-information-dismissable-story\"\n >\n Information Chip\n \n\n setShowDialog(true)}\n testId=\"chip-secondary-dismissable-story\"\n >\n Secondary Chip\n \n
\n setShowDialog(false)}\n initialFocus={0}\n >\n
\n
\n );\n};\nClickableStory.storyName = 'Clickable';\nMultilineStory.storyName = 'Multiline';\nWithTextStory.storyName = 'With Text';\nWithStatusIndicatorStory.storyName = 'With Status Indicator';\nWithIconStory.storyName = 'With Icon';\nDismissableStory.storyName = 'Dismissable';\n" }, "css": { "path": "Chip.module.css", "content": "@value (\n colorNeutralLightest,\n colorNeutralLight,\n colorInformationLightest,\n colorInformationLight,\n colorSuccessLightest,\n colorSuccessLight,\n colorWarningLightest,\n colorWarningLight,\n colorDangerLightest,\n colorDangerLight,\n colorBackgroundTertiary,\n colorGrayLightest,\n colorTextDisabled,\n colorFillDisabled,\n colorFocusPrimary\n) from '../../styles/variables/_color.css';\n@value (\n spaceXXSmall,\n spaceXSmall,\n spaceSmall\n) from '../../styles/variables/_space.css';\n@value (\n borderRadiusXSmall,\n borderRadiusXLarge\n) from '../../styles/variables/_border.css';\n@value (\n size18,\n size26,\n size34\n) from '../../styles/variables/_size.css';\n\n@value (\n borderWidthNone,\n borderWidthTertiary\n) from '../../styles/variables/_border.css';\n\n.chipWrapper {\n composes: formLabelSmall from '../../styles/typography.module.css';\n composes: motionEaseInEaseOut from '../../styles/animation.module.css';\n display: flex;\n background-color: colorNeutralLightest;\n align-items: center;\n max-width: fit-content;\n max-height: fit-content;\n gap: spaceXXSmall;\n border-radius: borderRadiusXSmall;\n cursor: pointer;\n}\n\n.chipWrapper:focus {\n outline: none;\n box-shadow: borderWidthNone borderWidthNone borderWidthNone\n borderWidthTertiary colorFocusPrimary;\n}\n\n.large {\n padding: spaceXSmall spaceSmall;\n min-height: size34;\n}\n\n.medium {\n min-height: size26;\n padding: spaceXXSmall spaceSmall;\n}\n\n.small {\n padding: calc(spaceXXSmall / 2) spaceXSmall;\n min-height: size18;\n}\n\n.primary {\n background-color: colorNeutralLightest;\n}\n\n.pill {\n border-radius: borderRadiusXLarge;\n}\n\n.noHoverState {\n cursor: initial;\n}\n\n.primary:not(.noHoverState):hover {\n background-color: colorNeutralLight;\n}\n\n.information {\n background-color: colorInformationLightest;\n}\n\n.information:not(.noHoverState):hover {\n background-color: colorInformationLight;\n}\n\n.success {\n background-color: colorSuccessLightest;\n}\n\n.success:not(.noHoverState):hover {\n background-color: colorSuccessLight;\n}\n\n.warning {\n background-color: colorWarningLightest;\n}\n\n.warning:not(.noHoverState):hover {\n background-color: colorWarningLight;\n}\n\n.danger {\n background-color: colorDangerLightest;\n}\n\n.danger:not(.noHoverState):hover {\n background-color: colorDangerLight;\n}\n\n.secondary {\n composes: borderPrimary from '../../styles/border.module.css';\n background-color: colorBackgroundTertiary;\n}\n\n.secondary:not(.noHoverState):hover {\n background-color: colorGrayLightest;\n}\n\n.withIcon {\n padding: spaceXXSmall spaceSmall spaceXXSmall spaceXSmall;\n}\n\n.dismissable {\n padding: spaceXXSmall spaceXSmall spaceXXSmall spaceSmall;\n}\n\n.dismissIconWrapper {\n margin-left: spaceXSmall;\n cursor: pointer;\n}\n\n.statusIndicatorBlock {\n margin-right: spaceXXSmall;\n}\n\n.alignTop {\n align-self: flex-start;\n}\n\n/* This should be last section for CSS Specificity */\n\n.disabled {\n color: colorTextDisabled;\n background-color: colorFillDisabled;\n border: initial;\n pointer-events: none;\n cursor: not-allowed;\n}\n\n.disabled .dismissIcon {\n color: colorTextDisabled;\n}\n\n.disabled .chipIcon {\n color: colorTextDisabled;\n}\n" }, "index": { "path": "index.d.ts", "content": "export type { ChipProps, ChipSemanticType } from '../../components/Chip/Chip';\nexport { Chip, CHIP_SEMANTIC } from '../../components/Chip/Chip';\nexport type { PillProps, PillSemanticType } from '../../components/Chip/Pill';\nexport { Pill, PILL_SEMANTIC } from '../../components/Chip/Pill';\n//# sourceMappingURL=index.d.ts.map" }, "additional": { "Pill.d.ts": { "path": "Pill.d.ts", "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nimport type { ChipSemanticType } from '../../components/Chip/Chip';\nimport type { IconType } from '../../components/Icon';\ntype ClassNames = Readonly<{\n wrapper?: string;\n icon?: string;\n}>;\nexport declare const PILL_SEMANTIC: Readonly<{\n primary: \"primary\";\n information: \"information\";\n success: \"success\";\n warning: \"warning\";\n danger: \"danger\";\n secondary: \"secondary\";\n}>;\nexport type PillSemanticType = ChipSemanticType;\nexport interface PillProps {\n classNames?: ClassNames;\n semantic?: PillSemanticType;\n size?: 'large' | 'medium' | 'small';\n children: React.ReactNode;\n disabled?: boolean;\n line?: number;\n wordBreak?: string;\n iconName?: string;\n iconType?: IconType;\n testId?: string;\n}\nexport declare const Pill: Flow.AbstractComponent;\nexport {};\n//# sourceMappingURL=Pill.d.ts.map" } } }, "allFiles": [ "Chip.module.css", "Chip.stories.module.css", "Chip.stories.tsx", "Chip.tsx", "Pill.stories.tsx", "Pill.tsx", "index.ts" ] }, "CircularLoader": { "name": "CircularLoader", "path": "src/components/CircularLoader", "files": { "main": { "path": "CircularLoader.d.ts", "content": "import type { Flow } from 'flow-to-typescript-codemod';\nimport * as COLORS from '../../styles/variables/_color';\nexport interface CircularLoaderProps {\n size?: 'large' | 'medium' | 'small';\n className?: string;\n ariaLabel?: string;\n colorToken?: keyof typeof COLORS;\n testId?: string;\n}\nexport declare const CircularLoader: Flow.AbstractComponent;\n//# sourceMappingURL=CircularLoader.d.ts.map" }, "story": { "path": "CircularLoader.stories.tsx", "content": "import * as React from 'react';\n\nimport * as COLORS from 'src/styles/variables/_color';\n\nimport type {CircularLoaderProps} from 'src/components/CircularLoader/CircularLoader';\nimport {CircularLoader} from 'src/components/CircularLoader/CircularLoader';\n\nimport css from 'src/components/CircularLoader/CircularLoader.stories.module.css';\n\n\nconst colorOptions: Array = [\n ...Object.keys(COLORS).filter((color) => color.startsWith('colorText')),\n];\n\nexport default {\n tags: ['autodocs'],\n title: 'Components/Circular Loader',\n component: CircularLoader,\n argTypes: {\n size: {\n description:\n 'Circular Loader supports only three size variants namely small, medium and large. `small` < `medium` < `large`',\n options: ['large', 'medium', 'small'],\n control: {\n type: 'select',\n },\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: 'medium'},\n },\n },\n colorToken: {\n description:\n 'Pass different text color token string to show loader in different color',\n options: colorOptions,\n control: {\n type: 'select',\n },\n table: {\n type: {summary: 'string'},\n defaultValue: {summary: 'colorTextClickable'},\n },\n },\n className: {\n description: 'External className to be applied',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n testId: {\n description: 'Test ID for the component',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n },\n parameters: {\n docs: {\n subtitle: 'Generates a Circular Loader component',\n description: {\n component: `\n\\`\\`\\`js\nimport { CircularLoader } from \"@spaced-out/ui-design-system/lib/components/CircularLoader\";\n\\`\\`\\`\nCircular loaders can be used to show infinite loading state. For **Linear Loader**\ncheck **here**\n `,\n },\n },\n storySource: {\n componentPath: '/src/components/CircularLoader/CircularLoader',\n },\n },\n};\n\nexport const CircularLoaderStory = (args: CircularLoaderProps) => (\n
\n \n
\n);\nCircularLoaderStory.args = {\n testId: 'circular-loader-story',\n};\nCircularLoaderStory.storyName = 'Circular Loader';\n" }, "css": { "path": "CircularLoader.module.css", "content": "@value (colorFillPrimary, colorBackgroundTertiary, colorFillNone) from '../../styles/variables/_color.css';\n@value (\n spaceNone\n) from '../../styles/variables/_space.css';\n\n@value (\n size5,\n size60\n) from '../../styles/variables/_size.css';\n\n@value (\n motionDurationSlowest\n) from '../../styles/variables/_motion.css';\n\n@value spinnerSize: size60;\n@value spinnerThickness: size5;\n\n@value innerMaskGradient: radial-gradient(farthest-side, colorFillNone calc(99% - var(--spinner-thickness)), colorFillPrimary calc(100% - var(--spinner-thickness)));\n\n.container {\n display: flex;\n justify-content: flex-start;\n align-items: flex-start;\n --spinner-size: spinnerSize;\n --spinner-thickness: spinnerThickness;\n}\n\n.mediumContainer {\n --spinner-size: calc(0.5 * spinnerSize);\n --spinner-thickness: calc(0.5 * spinnerThickness);\n}\n\n.smallContainer {\n --spinner-size: calc(0.36 * spinnerSize);\n --spinner-thickness: calc(0.36 * spinnerThickness);\n}\n\n.spinLoader {\n height: var(--spinner-size);\n width: var(--spinner-size);\n display: block;\n position: relative;\n animation: spin motionDurationSlowest linear 0s infinite normal;\n background: transparent;\n}\n\n.outerCircle {\n --color: colorFillPrimary;\n display: block;\n position: absolute;\n border-radius: calc(var(--spinner-size) / 2);\n height: var(--spinner-size);\n width: var(--spinner-size);\n top: spaceNone;\n right: spaceNone;\n background: conic-gradient(\n from 90deg at 50% 50%,\n colorFillNone 1deg,\n var(--color) 360deg\n );\n -webkit-mask: innerMaskGradient;\n mask: innerMaskGradient;\n}\n\n.ellipse {\n --color: colorFillPrimary;\n position: absolute;\n right: spaceNone;\n top: spaceNone;\n bottom: spaceNone;\n border-radius: calc(var(--spinner-thickness) / 2);\n height: var(--spinner-thickness);\n width: var(--spinner-thickness);\n margin: auto;\n background: var(--color);\n}\n\n@keyframes spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n" }, "index": { "path": "index.d.ts", "content": "export { CircularLoader } from '../../components/CircularLoader/CircularLoader';\n//# sourceMappingURL=index.d.ts.map" }, "additional": {} }, "allFiles": [ "CircularLoader.module.css", "CircularLoader.stories.module.css", "CircularLoader.stories.tsx", "CircularLoader.tsx", "index.ts" ] }, "CollapsibleCard": { "name": "CollapsibleCard", "path": "src/components/CollapsibleCard", "files": { "main": { "path": "CollapsibleCard.d.ts", "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nimport type { IconType } from '../../components/Icon';\nexport declare const COLLAPSIBLE_CARD_SEMANTIC: Readonly<{\n neutral: \"neutral\";\n success: \"success\";\n information: \"information\";\n warning: \"warning\";\n danger: \"danger\";\n}>;\ntype ClassNames = Readonly<{\n wrapper?: string;\n title?: string;\n content?: string;\n}>;\nexport type CollapsibleCardSemanticType = (typeof COLLAPSIBLE_CARD_SEMANTIC)[keyof typeof COLLAPSIBLE_CARD_SEMANTIC];\nexport interface CollapsibleCardProps {\n id?: string;\n title: React.ReactNode;\n children: React.ReactNode;\n classNames?: ClassNames;\n isOpen?: boolean;\n paddingSize?: 'small' | 'medium';\n headerIconName?: string;\n headerIconType?: IconType;\n semantic?: CollapsibleCardSemanticType;\n testId?: string;\n onChange?: ((e: React.SyntheticEvent, isOpen: boolean, id?: string) => unknown) | null | undefined;\n}\nexport interface CollapsibleCardActionProps {\n children: React.ReactNode;\n className?: string;\n testId?: string;\n}\nexport declare const CollapsibleCardAction: ({ children, className, testId, }: CollapsibleCardActionProps) => React.JSX.Element;\nexport interface CollapsibleCardContentProps {\n children: React.ReactNode;\n className?: string;\n testId?: string;\n}\nexport declare const CollapsibleCardContent: ({ children, className, testId, }: CollapsibleCardContentProps) => React.JSX.Element;\nexport declare const CollapsibleCard: Flow.AbstractComponent;\nexport {};\n//# sourceMappingURL=CollapsibleCard.d.ts.map" }, "story": { "path": "CollapsibleCard.stories.tsx", "content": "import * as React from 'react';\n\nimport {Button} from 'src/components/Button';\nimport type {CollapsibleCardProps} from 'src/components/CollapsibleCard';\nimport {\n COLLAPSIBLE_CARD_SEMANTIC,\n CollapsibleCard,\n CollapsibleCardAction,\n CollapsibleCardContent,\n} from 'src/components/CollapsibleCard';\nimport {ClickableIcon} from 'src/components/Icon';\nimport {BodySmall, SubTitleSmall} from 'src/components/Text';\n\nimport css from 'src/components/CollapsibleCard/CollapsibleCard.stories.module.css';\n\n\nconst semanticOptions: Array = [\n ...Object.values(COLLAPSIBLE_CARD_SEMANTIC),\n];\n\nexport default {\n tags: ['autodocs'],\n title: 'Components/Collapsible Card',\n component: CollapsibleCard,\n argTypes: {\n semantic: {\n options: semanticOptions,\n description:\n 'Semantic type of Collapsible Card. It will have different Icon and background color for different semantic type',\n control: {\n type: 'select',\n },\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: COLLAPSIBLE_CARD_SEMANTIC.neutral},\n },\n },\n id: {\n description: 'Provide an optional id to the collapsible card',\n control: {\n type: 'text',\n },\n table: {\n type: {\n summary: 'string',\n },\n },\n },\n title: {\n description: 'Title of the Collapsible card',\n type: {required: true},\n control: {\n type: 'text',\n },\n table: {\n type: {\n summary: 'React.Node',\n },\n },\n },\n children: {\n description: 'Content of expanded collapsible card',\n type: {required: true},\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary: 'React.Node',\n },\n },\n },\n isOpen: {\n description: 'Expanded state collapsible card',\n control: {\n type: 'boolean',\n },\n table: {\n type: {\n summary: 'boolean',\n },\n },\n },\n headerIconName: {\n description: 'Custom left icon. This overrides the default semantic icon',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n headerIconType: {\n description:\n 'Type of Icon for Collapsible Card. Type represents 4 unique icon styles :- Solid, Regular, Duotone and Brands',\n options: ['regular', 'solid', 'duotone', 'brands'],\n control: {type: 'select'},\n table: {\n type: {summary: 'string'},\n defaultValue: {summary: 'solid'},\n },\n },\n onChange: {\n description:\n '**onChange** handler is triggered when there is a change in expanded state of Collapsible Card',\n action: 'changed',\n table: {\n type: {\n summary:\n '( e: SyntheticEvent, isOpen: boolean, id?: string) => mixed',\n },\n },\n },\n paddingSize: {\n description: 'Padding size of the collapsible card',\n options: ['small', 'medium'],\n control: {type: 'select'},\n table: {\n type: {summary: 'string'},\n defaultValue: {summary: 'small'},\n },\n },\n classNames: {\n description: 'Provide an optional className to be applied to the wrapper',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary: '{wrapper?: string, title?: string, content?: string}',\n },\n },\n },\n testId: {\n description: 'Test ID for the component',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n },\n parameters: {\n docs: {\n subtitle: 'Generates a CollapsibleCard component.',\n description: {\n component: `\n\\`\\`\\`js\nimport {\n CollapsibleCard,\n CollapsibleCardAction,\n CollapsibleCardContent\n} from \"@spaced-out/ui-design-system/lib/components/CollapsibleCard\";\n\\`\\`\\`\n**Collapsible Card** is a simple components that takes title, content and action. There are sematic components for action\nand content. Use \\`\\` for populating the content and \\`\\` to have some action\nhandlers stick to the bottom of content\n `,\n },\n },\n storySource: {\n componentPath: '/src/components/CollapsibleCard/CollapsibleCard',\n },\n },\n};\n\nexport const DefaultStory = (args: CollapsibleCardProps) => (\n
\n \n \n
\n \n This section has been populated using CollapsibleCardContent\n \n
\n \n \n
\n);\n\nDefaultStory.args = {\n title: 'Hello world',\n classNames: {wrapper: ''},\n testId: 'collapsible-card-default-story',\n paddingSize: 'small',\n};\n\nexport const WithActionStory = (args: CollapsibleCardProps) => (\n
\n \n \n
\n \n This section has been populated using CollapsibleCardContent\n \n
\n \n \n \n \n \n \n
\n);\n\nWithActionStory.args = {\n title: 'Hello world',\n classNames: {wrapper: ''},\n testId: 'collapsible-card-with-action-story',\n};\n\nconst ActionableHeader = () => (\n
\n Accordion Title\n {\n e.stopPropagation();\n e.preventDefault();\n }}\n >\n
\n);\n\n/**\n * Usage:\n *\n```jsx\n\nconst ActionableHeader = (): React.Node => (\n
\n Accordion Title\n {\n e.stopPropagation();\n e.preventDefault();\n }}\n >\n
\n);\n\nexport const _WithHeaderActionSlots = (\n args: CollapsibleCardProps,\n): React.Node => (\n
\n }>\n \n
\n \n This section has been populated using CollapsibleCardContent\n \n
\n \n \n \n \n \n \n
\n);\n```\n\n```css\n .cardHeader {\n width: sizeFluid;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n```\n *\n */\nexport const WithHeaderActionSlotsStory = (args: CollapsibleCardProps) => (\n
\n }>\n \n
\n \n This section has been populated using CollapsibleCardContent\n \n
\n \n \n \n \n \n \n
\n);\n\nWithHeaderActionSlotsStory.args = {\n classNames: {wrapper: ''},\n testId: 'collapsible-card-with-header-action-slots-story',\n};\n\nexport const WithIconStory = (args: CollapsibleCardProps) => (\n
\n \n \n
\n \n This section has been populated using CollapsibleCardContent\n \n
\n \n\n \n \n \n \n \n
\n);\n\nWithIconStory.args = {\n title: 'Hello world',\n classNames: {wrapper: ''},\n headerIconName: 'face-party',\n semantic: 'neutral',\n testId: 'collapsible-card-with-icon-story',\n};\nDefaultStory.storyName = 'Default';\nWithActionStory.storyName = 'With Action';\nWithHeaderActionSlotsStory.storyName = 'With Header Action Slots';\nWithIconStory.storyName = 'With Icon';\n" }, "css": { "path": "CollapsibleCard.module.css", "content": "@value (colorBorderPrimary,\ncolorBackgroundPrimary,\ncolorBackgroundTertiary,\ncolorNeutralLightest,\ncolorNeutral,\ncolorInformationLightest,\ncolorInformation,\ncolorSuccessLightest,\ncolorSuccess,\ncolorDangerLightest,\ncolorDanger,\ncolorWarningLightest,\ncolorWarning,\ncolorFocusPrimary\n) from '../../styles/variables/_color.css';\n@value (sizeFluid, size58, size34) from '../../styles/variables/_size.css';\n@value (spaceSmall, spaceMedium, spaceXSmall) from '../../styles/variables/_space.css';\n@value (elevationCard) from '../../styles/variables/_elevation.css';\n@value (borderWidthNone,\nborderWidthPrimary,\nborderRadiusSmall,\nborderRadiusNone,\nborderWidthTertiary\n) from '../../styles/variables/_border.css';\n\n.wrapper {\n display: flex;\n flex-flow: column;\n width: sizeFluid;\n}\n\n.header {\n composes: subTitleSmall from '../../styles/typography.module.css';\n composes: borderPrimary from '../../styles/border.module.css';\n /* composes: motionEaseInEaseOut from '../../styles/animation.module.css'; */\n min-height: size58;\n border-radius: borderRadiusSmall;\n display: flex;\n cursor: pointer;\n align-items: center;\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:focus {\n box-shadow: borderWidthNone borderWidthNone borderWidthNone\n borderWidthTertiary colorFocusPrimary;\n}\n\n.header.isOpen {\n border-radius: borderRadiusSmall borderRadiusSmall borderRadiusNone\n borderRadiusNone;\n}\n\n.headerContent {\n display: flex;\n gap: spaceXSmall;\n align-items: center;\n text-align: left;\n width: sizeFluid;\n}\n\n.iconContainer {\n display: flex;\n min-width: size34;\n min-height: size34;\n border-radius: borderRadiusSmall;\n align-items: center;\n justify-content: center;\n}\n\n.iconContainer.neutral {\n background-color: colorNeutralLightest;\n}\n\n.iconContainer .neutral {\n color: colorNeutral;\n}\n\n.iconContainer.success {\n background-color: colorSuccessLightest;\n}\n\n.iconContainer .success {\n color: colorSuccess;\n}\n\n.iconContainer.information {\n background-color: colorInformationLightest;\n}\n\n.iconContainer .information {\n color: colorInformation;\n}\n\n.iconContainer.warning {\n background-color: colorWarningLightest;\n}\n\n.iconContainer .warning {\n color: colorWarning;\n}\n\n.iconContainer.danger {\n background-color: colorDangerLightest;\n}\n\n.iconContainer .danger {\n color: colorDanger;\n}\n\n.content {\n display: flex;\n flex-flow: column;\n background-color: colorBackgroundPrimary;\n border-left: borderWidthPrimary solid colorBorderPrimary;\n border-right: borderWidthPrimary solid colorBorderPrimary;\n border-bottom: borderWidthPrimary solid colorBorderPrimary;\n border-radius: borderRadiusNone borderRadiusNone borderRadiusSmall\n borderRadiusSmall;\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.paddingMedium .header {\n padding: spaceSmall spaceMedium;\n}\n\n.paddingMedium .contentContainer {\n padding: spaceSmall spaceMedium;\n}\n\n.paddingMedium .actionContainer {\n padding: spaceSmall spaceMedium;\n}\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../components/CollapsibleCard/CollapsibleCard';\n//# sourceMappingURL=index.d.ts.map" }, "additional": {} }, "allFiles": [ "CollapsibleCard.module.css", "CollapsibleCard.stories.module.css", "CollapsibleCard.stories.tsx", "CollapsibleCard.tsx", "index.ts" ] }, "Combobox": { "name": "Combobox", "path": "src/components/Combobox", "files": { "main": { "path": "Combobox.d.ts", "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nimport type { IconType } from '../../components/Icon';\nimport type { InputOnChangeParamsType } from '../../components/Input';\nimport type { MenuOption, MenuProps } from '../../components/Menu';\ntype InputClassNames = Readonly<{\n box?: string;\n iconLeft?: string;\n iconRight?: string;\n wrapper?: string;\n}>;\ntype DropdownClassNames = Readonly<{\n wrapper?: string;\n box?: string;\n iconRight?: string;\n}>;\ntype ClassNames = Readonly<{\n wrapper?: string;\n box?: string;\n input?: InputClassNames;\n dropdown?: DropdownClassNames;\n}>;\nexport interface ComboboxProps {\n classNames?: ClassNames;\n disabled?: boolean;\n type?: 'text' | 'tel';\n label?: string | React.ReactNode;\n size?: 'medium' | 'small';\n onContainerClick?: React.MouseEventHandler;\n locked?: boolean;\n error?: boolean;\n errorText?: string;\n helperText?: string | React.ReactNode;\n required?: boolean;\n readOnly?: boolean;\n boxRef?: React.Ref;\n value: {\n dropdown?: string;\n input?: string;\n };\n onChange: (arg1: {\n input: string;\n dropdown: string;\n inputChange?: InputOnChangeParamsType;\n dropdownOption?: MenuOption;\n }) => unknown;\n inputPlaceholder?: string;\n onInputFocus?: React.FocusEventHandler;\n onInputBlur?: React.FocusEventHandler;\n onInputKeyDown?: React.KeyboardEventHandler;\n onInputContainerClick?: React.MouseEventHandler;\n inputName?: string;\n iconLeftName?: string;\n iconLeftType?: IconType;\n iconRightName?: string;\n iconRightType?: IconType;\n onIconRightClick?: ((arg1: React.SyntheticEvent) => unknown) | null | undefined;\n inputBoxRef?: React.Ref;\n minLength?: number;\n maxLength?: number;\n pattern?: string;\n min?: string;\n max?: string;\n menu?: MenuProps;\n onMenuOpen?: () => unknown;\n onMenuClose?: () => unknown;\n scrollMenuToBottom?: boolean;\n /**\n * Opt in to the accessibility behavior: the label and helper/error text\n * programmatically associated with both fields, and the `combobox` wiring in\n * the `Dropdown` this renders.\n *\n * Off by default, and off is this component exactly as it behaved before any\n * of it existed.\n */\n enableA11y?: boolean;\n onDropdownFocus?: React.FocusEventHandler;\n onDropdownBlur?: React.FocusEventHandler;\n onDropdownKeyDown?: React.KeyboardEventHandler;\n onDropdownContainerClick?: React.MouseEventHandler;\n dropdownName?: string;\n dropdownPlaceholder?: string;\n dropdownBoxRef?: React.Ref;\n testId?: string;\n}\nexport declare const Combobox: Flow.AbstractComponent;\nexport {};\n//# sourceMappingURL=Combobox.d.ts.map" }, "story": { "path": "Combobox.stories.tsx", "content": "import * as React from 'react';\n\nimport type {ComboboxProps} from 'src/components/Combobox/Combobox';\nimport {Combobox} from 'src/components/Combobox/Combobox';\nimport {\n currencyOptions,\n defaultOptions,\n formatPhoneNumber,\n phoneNumberOptions,\n} from 'src/components/Combobox/helper';\nimport type {InputOnChangeParamsType} from 'src/components/Input';\nimport type {MenuOption} from 'src/components/Menu';\n\nimport css from 'src/components/Combobox/Combobox.stories.module.css';\n\n\nexport default {\n tags: ['autodocs'],\n title: 'Form Components/Combobox',\n component: Combobox,\n argTypes: {\n enableA11y: {\n description:\n '**enableA11y** opts into the accessibility behavior: the label and helper/error text programmatically associated with both fields, and the `combobox` wiring in the `Dropdown` it renders. Off by default, where the component behaves exactly as it did before any of it existed. Off here too, as everywhere: turn the control on to see the accessible behavior.',\n control: {type: 'boolean'},\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n value: {\n type: {required: true},\n description: 'The controlled value to input',\n control: {\n type: 'object',\n },\n table: {\n type: {summary: '{dropdown?: string, input?: string}'},\n },\n },\n onChange: {\n type: {required: true},\n description:\n '**onChange** handler is triggered when there is a selection of an option from dropdown or a change in input value. If input is changed onChange will have `dropdownOption` as undefined and on a dropdown change `inputChange` will be undefined',\n table: {\n type: {\n summary:\n 'onChange: ({input: string, dropdown: string, inputChange?: InputChange, dropdownOption?: MenuOption}) => mixed',\n },\n },\n },\n menu: {\n description: 'Menu props to use',\n control: {\n type: 'object',\n },\n table: {\n type: {summary: 'MenuProps'},\n },\n },\n type: {\n description: 'Type of Input. Supported types are listed on the dropdown',\n options: ['text', 'tel'],\n control: {\n type: 'select',\n },\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: 'text'},\n },\n },\n size: {\n options: ['small', 'medium'],\n description:\n 'Combobox supports only two size variants namely small and medium. `small` < `medium`',\n control: {\n type: 'select',\n },\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: 'medium'},\n },\n },\n classNames: {\n description: 'External classnames to be applied',\n control: {\n type: 'object',\n },\n },\n helperText: {\n description:\n 'Secondary label of the combobox. This appears on bottom of combobox, if the input is in `error` state the priority is given to `errorText`, in such cases secondary label wont be displayed',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n error: {\n description:\n 'if **true**, the component is moved to error state, Error state displays a red border surrounding combobox',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n errorText: {\n description:\n 'Error text to be displayed on the bottom of the combobox. This uses `colorTextDanger`',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n label: {\n description:\n 'Primary label of the combobox. This appears on top of combobox',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n disabled: {\n description: 'If **true**, the component is disabled',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n testId: {\n description: 'Test ID for the component',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n },\n parameters: {\n docs: {\n subtitle: 'Generates a Combobox component.',\n description: {\n component: `\n\\`\\`\\`js\nimport { Combobox } from \"@spaced-out/ui-design-system/lib/components/Combobox\";\n\\`\\`\\`\n**Combobox** is implemented as a combination of **Generic Dropdown** and **Input** components.\nIt allows user to input free text and select from the user defined options in the dropdown.\nIt is a controlled component, hence **value** and **onChange** props are mandatory.\nIt accepts all the props that **Input** and **Generic Dropdown** provides.\n\nMandatory props:\n* \\`value\\` accepts an object \\`{ dropdown: string, input: string }\\` which should have the display strings for both the dropdown and input components. To show the placeholder pass an empty string \\`' '\\`\n* \\`onChange\\` callback provides an object with four values in its parameter\n * \\`input\\`: the string which is inputted\n * \\`dropdown\\`: the \\`label\\` of the option which is selected\n * \\`inputChange\\`: the onChange parameters of Input component\n * \\`dropdownOption\\`: the onChange parameters of Dropdown component\n `,\n },\n },\n storySource: {\n componentPath: '/src/components/Combobox',\n },\n },\n};\n\nexport const DefaultStory = (args: ComboboxProps) => {\n const [selectedKeys, setSelectedKeys] = React.useState(\n args.menu?.selectedKeys || [],\n );\n const [dropDownText, setDropdownText] = React.useState('');\n const [inputText, setInputText] = React.useState('');\n\n const handleChange: (arg1: {\n input: string;\n dropdown: string;\n inputChange?: InputOnChangeParamsType;\n dropdownOption?: MenuOption;\n }) => unknown = ({input, dropdown, dropdownOption}) => {\n setInputText(input);\n setDropdownText(dropdown);\n if (dropdownOption?.key) {\n setSelectedKeys([dropdownOption.key]);\n }\n };\n\n return (\n
\n \n
\n );\n};\n\nDefaultStory.args = {\n label: 'Form Label',\n inputPlaceholder: 'Enter text...',\n dropdownPlaceholder: 'Select...',\n menu: {options: defaultOptions},\n testId: 'combobox-default-story',\n};\n\nexport const CurrencyInputStory = (args: ComboboxProps) => {\n const [comboboxData, setComboboxData] = React.useState({\n selectedKeys: args.menu?.selectedKeys || [],\n selectedValue: args.value.dropdown || '',\n inputValue: args.value.input || '',\n });\n const [error, setError] = React.useState({\n state: false,\n text: '',\n });\n\n const handleChange: (arg1: {\n input: string;\n dropdown: string;\n inputChange?: InputOnChangeParamsType;\n dropdownOption?: MenuOption;\n }) => unknown = ({input, dropdown, dropdownOption}) => {\n const withoutCommasInput = input.replace(/,/g, '');\n\n const allDigits = /^\\d+$/.test(withoutCommasInput);\n if (withoutCommasInput.length > 0 && !allDigits) {\n setError({\n state: true,\n text: 'Only digits are allowed',\n });\n } else {\n setError({\n state: false,\n text: '',\n });\n }\n\n setComboboxData((_prev) => ({\n ..._prev,\n inputValue: allDigits\n ? new Intl.NumberFormat().format(+withoutCommasInput)\n : input,\n selectedValue: dropdown,\n selectedKeys: dropdownOption?.key\n ? [dropdownOption.key]\n : _prev.selectedKeys,\n }));\n };\n\n return (\n
\n \n
\n );\n};\n\nCurrencyInputStory.args = {\n label: 'Amount',\n inputPlaceholder: 'Enter amount...',\n helperText: 'Select the currency and input the price',\n value: {dropdown: '', input: ''},\n menu: {options: currencyOptions},\n testId: 'combobox-currency-input-story',\n};\n\nexport const PhoneNumberInputStory = (args: ComboboxProps) => {\n const [comboboxData, setComboboxData] = React.useState({\n selectedKeys: args.menu?.selectedKeys || [],\n selectedValue: args.value.dropdown || '',\n inputValue: args.value.input || '',\n });\n\n const handleChange: (arg1: {\n input: string;\n dropdown: string;\n inputChange?: InputOnChangeParamsType;\n dropdownOption?: MenuOption;\n }) => unknown = ({input, dropdown, dropdownOption}) => {\n setComboboxData((_prev) => ({\n ..._prev,\n inputValue: formatPhoneNumber(\n input,\n dropdownOption?.key || _prev.selectedKeys[0],\n ),\n selectedValue: dropdown.split(' ')[0],\n selectedKeys: dropdownOption?.key\n ? [dropdownOption.key]\n : _prev.selectedKeys,\n }));\n };\n\n return (\n
\n \n
\n );\n};\n\nPhoneNumberInputStory.args = {\n label: 'Call Number',\n inputPlaceholder: 'Number',\n helperText: 'Select the country code and the number to call',\n value: {dropdown: '+44', input: '90 1574 7289'},\n menu: {options: phoneNumberOptions, allowSearch: true},\n testId: 'combobox-phone-number-input-story',\n};\nDefaultStory.storyName = 'Default';\nCurrencyInputStory.storyName = 'Currency Input';\nPhoneNumberInputStory.storyName = 'Phone Number Input';\n" }, "css": { "path": "Combobox.module.css", "content": "@value (\n colorBackgroundSecondary,\n colorTextPrimary,\n colorFillNone\n) from '../../styles/variables/_color.css';\n@value (\n sizeFluid,\n size42\n) from '../../styles/variables/_size.css';\n@value (\n spaceNone,\n spaceXXSmall\n) from '../../styles/variables/_space.css';\n@value (\n borderRadiusNone,\n borderWidthPrimary\n) from '../../styles/variables/_border.css';\n@value (\n elevationCard\n) from '../../styles/variables/_elevation.css';\n\n.wrapper {\n display: flex;\n flex-direction: column;\n width: sizeFluid;\n gap: spaceXXSmall;\n}\n\n.info {\n display: flex;\n justify-content: space-between;\n}\n\n.infoContent {\n display: flex;\n}\n\n.box {\n display: flex;\n height: size42;\n}\n\n.box.withError .inputBox {\n /* Enable border for error state */\n border-left-width: borderWidthPrimary;\n}\n\n.locked {\n border-style: dashed;\n}\n\n.dropdownWrapper {\n flex: 1;\n}\n\n.dropdownBox {\n /* Alter dropdown box default values */\n background-color: colorBackgroundSecondary;\n border-top-right-radius: borderRadiusNone;\n border-bottom-right-radius: borderRadiusNone;\n border-right-color: colorFillNone;\n z-index: auto;\n}\n\n.dropdownWrapper:focus-within,\n.dropdownBox:focus-within,\n.dropdownBox:not(.disabled):not(.locked):hover {\n /* brings up the (default dropdown) box shadow on hover */\n z-index: elevationCard;\n}\n\n.inputWrapper {\n flex: 2;\n /* For error state input's default wrapper adds gap between box and zero height error text */\n gap: spaceNone;\n}\n\n.inputBox {\n /* Alter input box default values */\n border-top-left-radius: borderRadiusNone;\n border-bottom-left-radius: borderRadiusNone;\n border-left-color: colorFillNone;\n z-index: auto;\n}\n\n.inputWrapper:focus-within,\n.inputBox:focus-within,\n.inputBox:not(.disabled):not(.locked):hover {\n /* brings up the (default input) box shadow on hover */\n z-index: elevationCard;\n}\n\n.dropdownBox:not(.disabled) .chevron {\n color: colorTextPrimary;\n}\n\n.dropdownBox.locked,\n.inputBox.locked {\n pointer-events: none;\n}\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../components/Combobox/Combobox';\n//# sourceMappingURL=index.d.ts.map" }, "additional": { "helper.d.ts": { "path": "helper.d.ts", "content": "import type { MenuOption } from '../../components/Menu';\nexport declare const defaultOptions: MenuOption[];\nexport declare const currencyOptions: MenuOption[];\nexport declare const phoneNumberOptions: MenuOption[];\n/**\n * Format phone numbers according to country-specific patterns\n * @param {string} phoneNumber - The phone number to format\n * @param {string} locale - The locale/country code (e.g., 'US', 'GB', 'JP')\n * @returns {string} - Formatted phone number\n */\nexport declare const formatPhoneNumber: (phoneNumber: string, locale?: string) => string;\n//# sourceMappingURL=helper.d.ts.map" } } }, "allFiles": [ "Combobox.module.css", "Combobox.stories.module.css", "Combobox.stories.tsx", "Combobox.tsx", "helper.ts", "index.ts" ] }, "ConditionalWrapper": { "name": "ConditionalWrapper", "path": "src/components/ConditionalWrapper", "files": { "main": { "path": "ConditionalWrapper.d.ts", "content": "import type * as React from 'react';\nexport interface ConditionalWrapperProps {\n condition?: boolean;\n wrapper?: (children: React.ReactNode) => React.ReactNode;\n children?: React.ReactNode;\n}\nexport declare const ConditionalWrapper: ({ condition, wrapper, children, }: ConditionalWrapperProps) => React.ReactNode;\n//# sourceMappingURL=ConditionalWrapper.d.ts.map" }, "story": { "path": "ConditionalWrapper.stories.tsx", "content": "import React from 'react';\n\nimport {ConditionalWrapper} from 'src/components/ConditionalWrapper';\nimport {BodyLarge} from 'src/components/Text';\n\n\nexport default {\n title: 'Utils/Conditional Wrapper',\n tags: ['autodocs'],\n component: ConditionalWrapper,\n parameters: {\n docs: {\n description: {\n component: `\n\\`\\`\\`js\nimport { ConditionalWrapper } from \"@spaced-out/ui-design-system/lib/components/ConditionalWrapper\";\n\\`\\`\\`\nThe \\`ConditionalWrapper\\` component is a utility component that conditionally wraps its children with a wrapper component or element based on a condition.\n\n### Usage\n\\`\\`\\`jsx\nimport React from 'react';\nimport { ConditionalWrapper } from './ConditionalWrapper';\n\nconst MyComponent = () => {\n return (\n (\n
{children}
\n )}>\n This is my content\n \n );\n};\n\nexport default MyComponent;\n\\`\\`\\`\n `,\n },\n },\n },\n};\n\nexport const Example = (): React.ReactElement> => (\n
\n
{children}
}\n >\n This content is conditionally wrapped\n \n
\n);\n" }, "css": null, "index": { "path": "index.d.ts", "content": "export { ConditionalWrapper } from '../../components/ConditionalWrapper/ConditionalWrapper';\n//# sourceMappingURL=index.d.ts.map" }, "additional": {} }, "allFiles": [ "ConditionalWrapper.stories.tsx", "ConditionalWrapper.ts", "index.ts" ] }, "DateRangePicker": { "name": "DateRangePicker", "path": "src/components/DateRangePicker", "files": { "main": { "path": "DateRangePicker.d.ts", "content": "import type { Flow } from 'flow-to-typescript-codemod';\nimport type { DateRangePickerError, DateRangeWithTimezone } from '../../types';\ntype ClassNames = Readonly<{\n wrapper?: string;\n}>;\nexport interface DateRangePickerProps {\n classNames?: ClassNames;\n selectedDateRange?: DateRangeWithTimezone;\n onApply: (datePickerSelectedRange: DateRangeWithTimezone) => void;\n onError?: (arg1: DateRangePickerError) => void;\n onCancel: () => void;\n hideTimezone?: boolean;\n minDate?: string;\n maxDate?: string;\n startDateLabel?: string;\n endDateLabel?: string;\n t?: ((key: string, fallback: string) => string) | null | undefined;\n locale?: string;\n testId?: string;\n}\nexport declare const DateRangePicker: Flow.AbstractComponent;\nexport {};\n//# sourceMappingURL=DateRangePicker.d.ts.map" }, "story": { "path": "DateRangePicker.stories.tsx", "content": "import * as React from 'react';\n\nimport {\n autoUpdate,\n FloatingFocusManager,\n FloatingPortal,\n offset,\n useFloating,\n} from '@floating-ui/react';\n\nimport {sizeFluid} from 'src/styles/variables/_size';\nimport {spaceNone, spaceXXSmall} from 'src/styles/variables/_space';\nimport type {DateRangeWithTimezone} from 'src/types';\nimport {formatIsoDate, getSubtractedDate} from 'src/utils';\nimport {classify} from 'src/utils/classify';\nimport {ClickAway} from 'src/utils/click-away';\nimport {mergeRefs} from 'src/utils/merge-refs';\n\nimport type {DateRangePickerProps} from 'src/components/DateRangePicker/DateRangePicker';\nimport {DateRangePicker} from 'src/components/DateRangePicker/DateRangePicker';\nimport {Input} from 'src/components/Input';\n\nimport css from 'src/components/DateRangePicker/DateRangePicker.stories.module.css';\n\n\nexport default {\n tags: ['autodocs'],\n title: 'Form Components/Date Range Picker',\n component: DateRangePicker,\n argTypes: {\n classNames: {\n description:\n 'Provide an optional className to be applied to the wrapper.',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary: '{wrapper?: string}',\n },\n },\n },\n selectedDateRange: {\n description:\n 'An optional date range in the YYYY-MM-DD format and timezone.',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary: '{startDate: string, endDate: string, timezone: string}',\n },\n },\n },\n minDate: {\n description:\n 'The minimum permissible date that a user can specify is set to 8 years before the current date by default.',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n defaultValue: {\n summary: getSubtractedDate(formatIsoDate(), 8, 'y') as string,\n },\n },\n },\n maxDate: {\n description:\n 'The maximum permissible date that a user can select is set to the current date by default.',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n defaultValue: {summary: formatIsoDate() as string},\n },\n },\n hideTimezone: {\n description: 'Hide timezone filter.',\n control: {\n type: 'boolean',\n },\n table: {\n type: {\n summary: 'boolean',\n },\n defaultValue: {summary: false},\n },\n },\n onCancel: {\n description:\n 'Function that is triggered upon clicking the Cancel button.',\n control: null,\n table: {\n type: {\n summary: '() => void',\n },\n },\n },\n onError: {\n description: 'Function that is triggered when an error occurs.',\n control: null,\n table: {\n type: {\n summary: `({\n type: string,\n description: string\n }) => void`,\n },\n },\n },\n onApply: {\n description: 'Function that is triggered upon clicking the Apply button.',\n control: null,\n table: {\n type: {\n summary: `({\n startDateUTC: string,\n endDateUTC: string,\n startDate: string,\n endDate: string,\n timezone: string,\n }) => void`,\n },\n },\n },\n startDateLabel: {\n description: 'Label for the start date.',\n control: {\n type: 'text',\n },\n },\n endDateLabel: {\n description: 'Label for the end date.',\n control: {\n type: 'text',\n },\n },\n t: {\n description:\n 'Translation function that takes a key and fallback value and returns the translated string.',\n control: null,\n table: {\n type: {\n summary: '(key: string, fallback: string) => string',\n },\n },\n },\n locale: {\n description: 'Language code for localization.',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n testId: {\n description: 'Test ID for the component',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n },\n parameters: {\n docs: {\n subtitle: 'Generates a DateRangePicker component.',\n description: {\n component: `\n\\`\\`\\`js\nimport { DateRangePicker } from \"@spaced-out/ui-design-system/lib/components/DateRangePicker\";\n\\`\\`\\`\n**DateRangePicker** simplifies the selection of date ranges with precision and ease, offering a comprehensive set of features designed to streamline the process.\n\n**Note:**\n\n- **DST and Timezone Selection:** When users select a timezone in our \\`DateRangePicker\\`, it's crucial to recognize the impact of Daylight Saving Time (DST).\nIn regions observing DST, the UTC offset can vary depending on the date. For accurate time conversions, we dynamically adjust the UTC offset based on the selected date's DST observance. This ensures precise time representations across different timezones.\n\n\\`\\`\\`jsx\n// You can create a Date Range Picker input dropdown using floating UI and ClickAway.\nexport const _WithInputDropdown = ({\n onApply,\n onCancel,\n selectedDateRange,\n classNames,\n}: DateRangePickerProps): React.Node => {\n const [dateRange, setDateRange] = React.useState({\n ...selectedDateRange,\n });\n const { x, y, refs, strategy } = useFloating({\n open: true,\n strategy: 'absolute',\n placement: 'bottom-start',\n whileElementsMounted: autoUpdate,\n middleware: [offset(parseInt(spaceXXSmall))],\n });\n\n const onApplyClick = ({startDate, endDate}: DateRangeWithTimezone) => {\n setDateRange({\n startDate,\n endDate,\n });\n };\n const startDate = dateRange.startDate\n ? formatIsoDate(dateRange.startDate, 'MMM DD, YYYY')\n : 'MMM DD, YYYY';\n const endDate = dateRange.endDate\n ? formatIsoDate(dateRange.endDate, 'MMM DD, YYYY')\n : 'MMM DD, YYYY';\n\n return (\n \n {({isOpen = true, onOpen, clickAway, boundaryRef, triggerRef}) => (\n
\n {\n e.stopPropagation();\n onOpen();\n }}\n />\n\n {isOpen && (\n \n {\n onApplyClick(dateRange);\n clickAway();\n }}\n onCancel={() => {\n clickAway();\n }}\n selectedDateRange={{\n ...dateRange,\n }}\n classNames={classNames}\n />\n
\n )}\n \n )}\n \n );\n};\n\\`\\`\\`\n`,\n },\n },\n storySource: {\n componentPath: '/src/components/DateRangePicker/DateRangePicker',\n },\n },\n};\n\nexport const DefaultStory = (args: DateRangePickerProps) => (\n
\n \n
\n);\n\nDefaultStory.args = {\n classNames: {wrapper: ''},\n testId: 'date-range-picker-default-story',\n};\n\nexport const WithSelectedDateRangeStory = (args: DateRangePickerProps) => (\n
\n \n
\n);\n\nWithSelectedDateRangeStory.args = {\n classNames: {wrapper: ''},\n selectedDateRange: {\n startDate: '2024-02-04',\n endDate: '2024-04-16',\n timezone: 'America/Los_Angeles',\n },\n testId: 'date-range-picker-with-selected-date-range-story',\n};\n\nexport const WithInputDropdownStory = ({\n selectedDateRange,\n classNames,\n}: DateRangePickerProps) => {\n const [dateRange, setDateRange] = React.useState({\n ...selectedDateRange,\n });\n const {x, y, refs, strategy, context} = useFloating({\n open: true,\n strategy: 'absolute',\n placement: 'bottom-start',\n whileElementsMounted: autoUpdate,\n middleware: [offset(parseInt(spaceXXSmall))],\n });\n\n const onApplyClick = ({startDate, endDate}: DateRangeWithTimezone) => {\n setDateRange({\n startDate,\n endDate,\n });\n };\n const startDate = dateRange.startDate\n ? formatIsoDate(dateRange.startDate, 'MMM DD, YYYY')\n : 'MMM DD, YYYY';\n const endDate = dateRange.endDate\n ? formatIsoDate(dateRange.endDate, 'MMM DD, YYYY')\n : 'MMM DD, YYYY';\n\n return (\n \n {({isOpen = true, onOpen, clickAway, boundaryRef, triggerRef}) => (\n
\n {\n e.stopPropagation();\n onOpen();\n }}\n />\n\n {isOpen && (\n \n }\n >\n \n {\n onApplyClick(dateRange);\n clickAway();\n }}\n onCancel={() => {\n clickAway();\n }}\n selectedDateRange={{\n ...dateRange,\n }}\n classNames={classNames}\n />\n
\n \n \n )}\n \n )}\n \n );\n};\n\nWithInputDropdownStory.args = {\n classNames: {wrapper: ''},\n testId: 'date-range-picker-with-input-dropdown-story',\n};\n\nexport const WithMinAndMaxDateStory = (args: DateRangePickerProps) => (\n
\n \n
\n);\n\nWithMinAndMaxDateStory.args = {\n classNames: {wrapper: ''},\n minDate: getSubtractedDate(formatIsoDate(), 15, 'M') as string,\n maxDate: formatIsoDate() as string,\n testId: 'date-range-picker-with-min-and-max-date-story',\n};\nDefaultStory.storyName = 'Default';\nWithSelectedDateRangeStory.storyName = 'With Selected Date Range';\nWithInputDropdownStory.storyName = 'With Input Dropdown';\nWithMinAndMaxDateStory.storyName = 'With Min And Max Date';\n" }, "css": { "path": "DateRangePicker.module.css", "content": "@value (\n size580\n) from '../../styles/variables/_size.css';\n\n.container {\n display: flex;\n width: size580;\n}\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../components/DateRangePicker/DateRangePicker';\n//# sourceMappingURL=index.d.ts.map" }, "additional": { "Calendar.d.ts": { "path": "Calendar.d.ts", "content": "import * as React from 'react';\nimport type { DateRange } from '../../types';\nimport type { MARKERS, NAVIGATION_ACTION } from '../../utils';\ninterface CalendarProps {\n value: string;\n marker: (typeof MARKERS)[keyof typeof MARKERS];\n minDate?: string;\n maxDate?: string;\n hoverDay: string;\n dateRange: DateRange;\n inHoverRange: (day: string) => boolean;\n handlers: {\n onDayClick: (day: string) => void;\n onDayHover: (day: string) => void;\n onMonthNavigate: (marker: (typeof MARKERS)[keyof typeof MARKERS], action: (typeof NAVIGATION_ACTION)[keyof typeof NAVIGATION_ACTION]) => void;\n };\n today: string;\n t: ((key: string, fallback: string) => string) | null | undefined;\n testId?: string;\n}\ninterface CalendarMobileProps extends Omit {\n handlers: Omit & {\n onMonthNavigate: (action: (typeof NAVIGATION_ACTION)[keyof typeof NAVIGATION_ACTION]) => void;\n };\n}\nexport declare const Calendar: ({ value, minDate, maxDate, handlers, hoverDay, dateRange, inHoverRange, today, t, testId, }: CalendarProps) => React.JSX.Element;\nexport declare const CalendarMobile: ({ value, minDate, maxDate, handlers, hoverDay, dateRange, inHoverRange, today, t, testId, }: CalendarMobileProps) => React.JSX.Element;\nexport {};\n//# sourceMappingURL=Calendar.d.ts.map" }, "DateRangeWrapper.d.ts": { "path": "DateRangeWrapper.d.ts", "content": "import type { Flow } from 'flow-to-typescript-codemod';\nimport type { DateRange, DateRangeWithTimezone } from '../../types';\nimport { MARKERS, NAVIGATION_ACTION } from '../../utils';\ninterface DateRangeWrapperProps {\n dateRange: DateRange;\n hoverDay: string;\n minDate: string;\n maxDate: string;\n rangeStartMonth: string;\n rangeEndMonth: string;\n mobileCalendarMonth: string;\n cardWrapperClass: string | null | undefined;\n setRangeStartMonth: (arg1: string) => void;\n setRangeEndMonth: (arg1: string) => void;\n setRangeMonth: (arg1: string) => void;\n setTimezone: (arg1: string) => void;\n timezone: string;\n onApply: (datePickerSelectedRange: DateRangeWithTimezone) => void;\n onCancel: () => void;\n inHoverRange: (day: string) => boolean;\n hideTimezone: boolean;\n handlers: {\n onDayClick: (day: string) => void;\n onDayHover: (day: string) => void;\n onMonthNavigate: (marker: (typeof MARKERS)[keyof typeof MARKERS], action: (typeof NAVIGATION_ACTION)[keyof typeof NAVIGATION_ACTION]) => void;\n };\n mobileCalendarHandlers: {\n onDayClick: (day: string) => void;\n onDayHover: (day: string) => void;\n onMonthNavigate: (action: (typeof NAVIGATION_ACTION)[keyof typeof NAVIGATION_ACTION]) => void;\n };\n today: string;\n startDateLabel?: string;\n endDateLabel?: string;\n t: ((key: string, fallback: string) => string) | null | undefined;\n locale?: string;\n testId?: string;\n}\nexport declare const DateRangeWrapper: Flow.AbstractComponent;\nexport {};\n//# sourceMappingURL=DateRangeWrapper.d.ts.map" }, "Day.d.ts": { "path": "Day.d.ts", "content": "import * as React from 'react';\ninterface DayProps {\n date: string;\n value: string;\n filled: boolean;\n hoverDay: string;\n outlined: boolean;\n disabled: boolean;\n endOfRange: boolean;\n highlighted: boolean;\n startOfRange: boolean;\n onClick: () => void;\n onHover: () => void;\n testId?: string;\n inDateRange: boolean;\n}\nexport declare const Day: ({ date, value, filled, onHover, onClick, disabled, hoverDay, outlined, endOfRange, highlighted, startOfRange, testId, inDateRange, }: DayProps) => React.JSX.Element;\nexport {};\n//# sourceMappingURL=Day.d.ts.map" } } }, "allFiles": [ "Calendar.module.css", "Calendar.tsx", "DateRangePicker.module.css", "DateRangePicker.stories.module.css", "DateRangePicker.stories.tsx", "DateRangePicker.tsx", "DateRangeWrapper.module.css", "DateRangeWrapper.tsx", "Day.module.css", "Day.tsx", "index.ts" ] }, "Dialog": { "name": "Dialog", "path": "src/components/Dialog", "files": { "main": { "path": "Dialog.d.ts", "content": "import * as React from 'react';\nimport type { ModalProps } from '../../components/Modal';\ntype FooterClassNames = Readonly<{\n wrapper?: string;\n actions?: string;\n}>;\nexport declare const DIALOG_SEMANTIC: Readonly<{\n neutral: \"neutral\";\n success: \"success\";\n information: \"information\";\n warning: \"warning\";\n danger: \"danger\";\n}>;\nexport type DialogSemanticType = (typeof DIALOG_SEMANTIC)[keyof typeof DIALOG_SEMANTIC];\nexport interface DialogHeaderProps {\n children?: React.ReactNode;\n className?: string;\n testId?: string;\n}\nexport interface DialogFooterProps {\n children?: React.ReactNode;\n classNames?: FooterClassNames;\n testId?: string;\n}\nexport interface DialogBodyProps {\n children?: React.ReactNode;\n className?: string;\n testId?: string;\n}\nexport type DialogPropsBase = ModalProps;\nexport interface DialogProps extends Omit {\n semantic?: DialogSemanticType;\n iconName?: string;\n testId?: string;\n}\nexport interface BasicDialogProps extends Omit {\n heading?: React.ReactNode;\n body?: React.ReactNode;\n confirmText?: string;\n abortText?: string;\n handleConfirm?: (event: React.SyntheticEvent) => unknown;\n handleAbort?: (event: React.SyntheticEvent) => unknown;\n testId?: string;\n}\nexport declare const DialogHeader: ({ children, className, testId, }: DialogHeaderProps) => React.JSX.Element;\nexport declare const DialogBody: ({ children, className, testId }: DialogBodyProps) => React.JSX.Element;\nexport declare const DialogFooter: ({ children, classNames, testId, }: DialogFooterProps) => React.JSX.Element;\nexport declare const Dialog: ({ children, isOpen, hideBackdrop, onClose, tapOutsideToClose, iconName, semantic, classNames, testId, ...restDialogProps }: DialogProps) => React.JSX.Element;\nexport declare const BasicDialog: ({ heading, body, confirmText, abortText, handleConfirm, handleAbort, testId, ...restDialogProps }: BasicDialogProps) => React.JSX.Element;\nexport {};\n//# sourceMappingURL=Dialog.d.ts.map" }, "story": { "path": "Dialog.stories.tsx", "content": "import * as React from 'react';\n\nimport {Button} from 'src/components/Button';\nimport type {DialogProps} from 'src/components/Dialog/Dialog';\nimport {\n BasicDialog,\n Dialog,\n DIALOG_SEMANTIC,\n DialogBody,\n DialogFooter,\n DialogHeader,\n} from 'src/components/Dialog/Dialog';\nimport {BodyLarge, SubTitleLarge} from 'src/components/Text';\n\nimport css from 'src/components/Dialog/Dialog.stories.module.css';\n\n\nconst semanticOptions: Array = [...Object.values(DIALOG_SEMANTIC)];\n\nexport default {\n tags: ['autodocs'],\n title: 'Components/Dialog',\n argTypes: {\n semantic: {\n options: semanticOptions,\n description: 'Semantic type of Dialog',\n control: {\n type: 'select',\n },\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: DIALOG_SEMANTIC.neutral},\n },\n },\n iconName: {\n description: 'Custom icon. This overrides the default semantic icon',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n isOpen: {\n description: 'if **true**, the modal is presented',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n tapOutsideToClose: {\n description: 'if **true**, closes the modal on tap of backdrop',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n classNames: {\n description: 'External classnames to be applied',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary: '{container?: string, content?: string, backdrop?: string}',\n },\n },\n },\n children: {\n description: 'The children to rendered inside the Modal window',\n table: {\n type: {summary: 'React.Node'},\n },\n },\n onClose: {\n description: '**onClose** handler is triggered on backdrop click',\n action: 'clicked',\n table: {\n type: {summary: '(SyntheticEvent) => mixed'},\n },\n },\n customAnimation: {\n description: `\\`\\` and its derivatives(\\`\\`, \\`\\`) support\n \\`customAnimation: UseTransitionStylesProps\\` prop for\n all your custom animation needs.\n It defines the following properties: \\n\\n\n- \\`duration\\` (optional): Specifies the duration of the animation in milliseconds.\nIt can be a single number to set the duration for both opening and closing animations,\nor an object with separate open and close properties to specify different durations\nfor opening and closing animations.\n- \\`initial\\` (optional): Represents the initial CSS styles for the modal component when\nit is first mounted. This property allows you to define the initial appearance of the\nmodal before any animations occur.\n- \\`open\\` (optional): Defines the CSS styles that should be applied when the modal is fully\nopened. This property specifies the appearance of the modal when it transitions from the\ninitial state to the fully open state.\n- \\`close\\` (optional): Specifies the CSS styles for the modal when it is being closed. This\nproperty determines the appearance of the modal when it transitions from the fully open\nstate to the closed state.\n- \\`common\\` (optional): Represents the CSS styles that are common to all states of the modal\ncomponent. These styles will be applied throughout the entire lifecycle of the modal,\nregardless of whether it is in the initial, open, or close state. You can use this property\nto define shared styles that should be present in all states.\n\\n\\nThe modal component follows a predefined order of states as it transitions through\nits lifecycle. It starts in the \\`unmounted\\` state, then moves to the \\`initial\\` state when mounted.\nFrom there, it can transition to the \\`open\\` state when fully opened, and then to the \\`close\\` state\nwhen being closed. Finally, it returns to the \\`unmounted\\` state when it is no longer needed. This\nis the transition order: \\`unmounted\\` -> \\`initial\\` -> \\`open\\` -> \\`close\\` -> \\`unmounted\\`\nBy specifying the appropriate values for the \\`duration\\`, \\`initial\\`, \\`open\\`, \\`close\\`, and \\`common\\` properties,\nyou can control the animation and styling of the modal at each stage of its lifecycle.\n `,\n control: {\n type: 'object',\n },\n table: {\n type: {summary: 'UseTransitionStylesProps'},\n },\n },\n hideBackdrop: {\n description:\n 'if **true**, dark backdrop is removed and transparent backdrop is applied on the DOM',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n initialFocus: {\n description:\n 'Which element to initially focus. Can be a number (tabbable index as specified by the order)',\n control: {\n type: 'number',\n },\n table: {\n type: {summary: 'number'},\n defaultValue: {summary: '-1'},\n },\n },\n testId: {\n description: 'Test ID for the component',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n },\n\n parameters: {\n docs: {\n subtitle: 'Generates a Dialog component',\n description: {\n component: `\n\\`\\`\\`js\nimport { Dialog, DialogBody, DialogHeader, DialogFooter } from \"@spaced-out/ui-design-system/lib/components/Dialog\";\n\\`\\`\\`\nA **dialog** is a particular kind of **Modal** window that appears in front of the app's content to offer important information or solicit input.\nWhen they appear, dialogues **turn off** all app functions. They stay on screen until they are acknowledged, dismissed, or a necessary action is made.\n\nDialogs should only be used occasionally because they are intended to be disruptive. Dialogs come in multiple variants as listed below.\n\nyou can either use a Basic Dialog or\nSemantically a Dialog component should be composed from \\`DialogHeader\\`, \\`DialogBody\\`, and \\`DialogFooter\\` components,\nthese are nothing but layout components which defines appropriate spacing for the children living in them.\nEach of these components also exposes a className\n\n---\n\n### Overlay Lifecycle Events\n\nDialog emits **strongly-typed window events** when it mounts and unmounts (see **Modal docs** for the full API reference, all event types, and advanced usage patterns).\n\nDialog-specific fields in the event payload:\n\n| Field | Value |\n|---|---|\n| \\`overlayType\\` | \\`'Dialog'\\` |\n| \\`semantic\\` | \\`'neutral' \\\\| 'success' \\\\| 'information' \\\\| 'warning' \\\\| 'danger'\\` (from the \\`semantic\\` prop) |\n| \\`hasBackdrop\\` | Derived from \\`hideBackdrop\\` (default \\`true\\` for Dialog) |\n| \\`tapOutsideToClose\\` | Default \\`false\\` for Dialog |\n\n**Listening for Dialog events:**\n\n\\`\\`\\`ts\nimport {\n OVERLAY_MOUNT_EVENT,\n OVERLAY_UNMOUNT_EVENT,\n} from \"@spaced-out/ui-design-system/lib/components/Modal\";\n\nwindow.addEventListener(OVERLAY_MOUNT_EVENT, (e) => {\n if (e.detail.overlayType === 'Dialog') {\n console.log(\\\\\\`Dialog opened: semantic=\\\\\\${e.detail.semantic}\\\\\\`);\n }\n});\n\nwindow.addEventListener(OVERLAY_UNMOUNT_EVENT, (e) => {\n if (e.detail.overlayType === 'Dialog') {\n console.log(\\\\\\`Dialog closed: id=\\\\\\${e.detail.id}\\\\\\`);\n }\n});\n\\`\\`\\`\n\n**Filter by semantic type:**\n\n\\`\\`\\`ts\nwindow.addEventListener(OVERLAY_MOUNT_EVENT, (e) => {\n if (e.detail.overlayType === 'Dialog' && e.detail.semantic === 'danger') {\n analytics.track('danger_dialog_shown', { testId: e.detail.testId });\n }\n});\n\\`\\`\\`\n\n**Example payload (Dialog, danger):**\n\n\\`\\`\\`json\n{\n \"id\": \"g7h8i9\",\n \"overlayType\": \"Dialog\",\n \"hasBackdrop\": true,\n \"tapOutsideToClose\": false,\n \"allowBackgroundInteraction\": false,\n \"semantic\": \"danger\",\n \"testId\": \"confirm-delete-dialog\"\n}\n\\`\\`\\`\n `,\n },\n },\n storySource: {\n componentPath: '/src/components/Dialog/Dialog',\n },\n },\n};\n\nexport const DialogStory = (args: DialogProps) => {\n const [isOpen, setIsOpen] = React.useState(args.isOpen);\n\n React.useEffect(() => {\n setIsOpen(args.isOpen);\n }, [args.isOpen]);\n\n return (\n
\n \n setIsOpen(false)}>\n \n Dialog Title\n \n\n \n \n Dialogs should only be used occasionally because they are intended\n to be disruptive. Dialogs come in multiple variants.\n \n \n\n \n \n\n \n \n \n
\n );\n};\n\nDialogStory.args = {\n classNames: {container: ''},\n initialFocus: 1,\n semantic: 'neutral',\n testId: 'dialog-story',\n};\n\n/**\n * Basic Dialog supports these additional props

\n * `heading?: React.Node`
\n * `body?: React.Node`
\n * `confirmText?: string`
\n * `abortText?: string`
\n * `handleConfirm?: (event: SyntheticEvent<>) => mixed`
\n * `handleAbort?: (event: SyntheticEvent<>) => mixed`\n */\nexport const BasicDialogStory = (args: DialogProps) => {\n const [isOpen, setIsOpen] = React.useState(args.isOpen);\n\n React.useEffect(() => {\n setIsOpen(args.isOpen);\n }, [args.isOpen]);\n\n return (\n
\n \n setIsOpen(false)}\n handleAbort={() => setIsOpen(false)}\n handleConfirm={() => setIsOpen(false)}\n />\n
\n );\n};\n\nBasicDialogStory.args = {\n semantic: 'danger',\n heading: 'Dialog Title',\n body: 'A basic dialog supports text props to prepare content. You don\\'t need to import semantic components to prepare the desired layout.',\n abortText: 'Close',\n confirmText: 'Confirm',\n testId: 'basic-dialog-story',\n};\nDialogStory.storyName = 'Dialog';\nBasicDialogStory.storyName = 'Basic Dialog';\n" }, "css": { "path": "Dialog.module.css", "content": "@value (spaceLarge, spaceXSmall, spaceMedium, spaceSmall) from '../../styles/variables/_space.css';\n@value (size42, size380, sizeFluid) from '../../styles/variables/_size.css';\n@value (borderRadiusMedium, borderRadiusCircle) from '../../styles/variables/_border.css';\n@value (\n colorNeutralLightest,\n colorSuccessLightest,\n colorInformationLightest,\n colorWarningLightest,\n colorDangerLightest\n) from '../../styles/variables/_color.css';\n\n.dialog {\n composes: boxShadow4 from '../../styles/shadow.module.css';\n border-radius: borderRadiusMedium;\n padding: spaceMedium;\n max-width: size380;\n}\n\n.dialogHeader {\n composes: subTitleLarge from '../../styles/typography.module.css';\n display: flex;\n flex-flow: column;\n justify-content: center;\n}\n\n.topBlock {\n display: flex;\n flex-flow: column;\n justify-content: center;\n align-items: center;\n margin-bottom: spaceMedium;\n}\n\n.iconContainer {\n display: flex;\n align-items: center;\n justify-content: center;\n width: size42;\n height: size42;\n border-radius: borderRadiusCircle;\n}\n\n.headerContent {\n display: flex;\n}\n\n.neutral {\n background-color: colorNeutralLightest;\n}\n\n.success {\n background-color: colorSuccessLightest;\n}\n\n.information {\n background-color: colorInformationLightest;\n}\n\n.warning {\n background-color: colorWarningLightest;\n}\n\n.danger {\n background-color: colorDangerLightest;\n}\n\n.dialogBody {\n margin-top: spaceXSmall;\n display: flex;\n height: sizeFluid;\n overflow: auto;\n text-align: center;\n}\n\n.dialogFooter {\n margin-top: spaceLarge;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n gap: spaceMedium;\n}\n\n.dialogFooterActions {\n display: flex;\n gap: spaceSmall;\n width: sizeFluid;\n}\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../components/Dialog/Dialog';\n//# sourceMappingURL=index.d.ts.map" }, "additional": {} }, "allFiles": [ "Dialog.module.css", "Dialog.stories.module.css", "Dialog.stories.tsx", "Dialog.tsx", "index.ts" ] }, "Disclaimer": { "name": "Disclaimer", "path": "src/components/Disclaimer", "files": { "main": { "path": "Disclaimer.d.ts", "content": "import type { Flow } from 'flow-to-typescript-codemod';\nimport type { BannerProps } from '../../components/Banner';\nexport type DisclaimerProps = BannerProps;\nexport declare const Disclaimer: Flow.AbstractComponent;\n//# sourceMappingURL=Disclaimer.d.ts.map" }, "story": { "path": "Disclaimer.stories.tsx", "content": "import * as React from 'react';\n\nimport type {DisclaimerProps} from 'src/components/Disclaimer';\nimport {Disclaimer} from 'src/components/Disclaimer/Disclaimer';\n\nimport css from 'src/components/Disclaimer/Disclaimer.stories.module.css';\n\n\nexport default {\n tags: ['autodocs'],\n title: 'AI Prompt Components/Disclaimer',\n component: Disclaimer,\n argTypes: {\n actionText: {\n name: 'actionText',\n description: 'Action text to be displayed on **right** of Alert',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n onAction: {\n name: 'onAction',\n action: 'Action Click',\n description: 'Callback function for action text click',\n type: {summary: '(SyntheticEvent) => mixed'},\n },\n alignment: {\n options: ['top', 'bottom'],\n description:\n 'Semantic type of Banner. It will have different Icon and background color for different semantic type',\n control: {\n type: 'select',\n },\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: 'top'},\n },\n },\n dismissable: {\n description: 'Close Icon will appear in right side in case it is true',\n name: 'dismissable',\n control: 'boolean',\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: false},\n },\n },\n onCloseClick: {\n name: 'onCloseClick',\n action: 'Close Click',\n description: 'Callback function for dismissable alert',\n type: {summary: '(SyntheticEvent) => mixed'},\n },\n selfDismiss: {\n description: `This prop is valid only in case dismissable is true.\n It handles whether the dismissal should be handled by the component or it will just pass callback onclick of closeIcon and dismissal will be handled externally`,\n name: 'selfDismiss',\n options: [false, true],\n control: 'boolean',\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: false},\n },\n },\n semantic: {\n description:\n 'Semantic type of Banner. It will have different Icon and background color for different semantic type',\n control: {\n type: 'select',\n },\n table: {\n type: {summary: 'enum'},\n disable: true,\n },\n },\n leftIconName: {\n name: 'leftIconName',\n control: {\n type: 'text',\n },\n description: 'Custom left icon. This overrides the default semantic icon',\n table: {\n type: {summary: 'string'},\n },\n },\n leftIconType: {\n options: ['regular', 'solid'],\n description: 'Type of Icon',\n control: {\n type: 'select',\n },\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: 'regular'},\n },\n },\n children: {\n description: 'Pass the alert message text as children',\n table: {\n type: {summary: 'string'},\n },\n },\n classNames: {\n description:\n 'Provide an optional className to be applied to the wrapper, alertText',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary:\n '{wrapper?: string, alertText?: string, actionContainer?: string}',\n },\n },\n },\n testId: {\n description: 'Test ID for the component',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n },\n parameters: {\n docs: {\n subtitle: 'Generates a Disclaimer component',\n description: {\n component: `\n\\`\\`\\`js\nimport { Disclaimer } from \"@spaced-out/ui-design-system/lib/components/Disclaimer\";\n\\`\\`\\`\nUse Disclaimer component to show alert message specific of AI Prompts use cases. It will take width of the container\nand will show only two lines of text. Post that it will get truncated. As there is no way for user to see the truncated message, it is recommended\nto use it for messages up to two lines only or add a tooltip along with it for showcasing complete message.\n\nDisclaimer should ideally be absolutely positioned and should stick to top or bottom of container\n `,\n },\n },\n storySource: {\n componentPath: '/src/components/Disclaimer/Disclaimer',\n },\n },\n};\n\nexport const DisclaimerStory = (args: DisclaimerProps) => (\n
\n \n
\n);\n\nDisclaimerStory.args = {\n children: 'Always check content generated by AI',\n testId: 'disclaimer-story',\n};\nDisclaimerStory.storyName = 'Disclaimer';\n" }, "css": { "path": "Disclaimer.module.css", "content": "@value (\n colorBorderPrimary,\n colorTextPrimary,\n colorBackgroundTertiary\n) from '../../styles/variables/_color.css';\n\n.disclaimerWrapper {\n background-color: colorBackgroundTertiary;\n border-color: colorBorderPrimary;\n}\n\n.iconWrapper {\n color: colorTextPrimary;\n}\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../components/Disclaimer/Disclaimer';\n//# sourceMappingURL=index.d.ts.map" }, "additional": {} }, "allFiles": [ "Disclaimer.module.css", "Disclaimer.stories.module.css", "Disclaimer.stories.tsx", "Disclaimer.tsx", "index.ts" ] }, "DraggableWrapper": { "name": "DraggableWrapper", "path": "src/components/DraggableWrapper", "files": { "main": { "path": "DraggableWrapper.d.ts", "content": "import * as React from 'react';\nexport type DraggableWrapperClassNames = Readonly<{\n /** Override or extend the root wrapper element. */\n wrapper?: string;\n /** Override or extend the drag handle element. */\n dragHandle?: string;\n}>;\nexport interface DraggableWrapperProps extends Pick, 'onDragStart' | 'onDragEnd' | 'onDragOver' | 'onDrop'> {\n children: React.ReactNode;\n /** Applies the dragging visual state (purple outline + reduced opacity). */\n isDragging?: boolean;\n /** Label for the drag handle (tooltip and aria-label). Pass a translated string for i18n. */\n dragHandleLabel?: string;\n /** Class names to override or extend internal elements (e.g. from parent CSS modules). */\n classNames?: DraggableWrapperClassNames;\n /**\n * Called when the user presses ArrowUp/ArrowLeft or ArrowDown/ArrowRight while\n * the item is keyboard-grabbed. Use this to reorder the list in state.\n */\n onKeyboardReorder?: (direction: 'up' | 'down') => void;\n testId?: string;\n /** Set false when using @dnd-kit / react-beautiful-dnd (pointer-event libs). Keep true for react-dnd HTML5 backend. Default true. */\n enableNativeDrag?: boolean;\n /** Extra props to spread on the wrapper (library listeners/attributes). */\n wrapperProps?: React.HTMLAttributes;\n /** Extra props to spread on the drag handle (some libs attach activator listeners here). */\n dragHandleProps?: React.HTMLAttributes;\n /** Separate ref for the drag handle (for libs with setActivatorNodeRef / react-dnd's drag). */\n dragHandleRef?: React.Ref;\n}\nexport declare const DraggableWrapper: React.ForwardRefExoticComponent>;\n//# sourceMappingURL=DraggableWrapper.d.ts.map" }, "story": { "path": "DraggableWrapper.stories.tsx", "content": "import * as React from 'react';\n\nimport {TEXT_COLORS} from 'src/types/typography';\nimport classify from 'src/utils/classify';\n\nimport {ColumnChart} from 'src/components/Charts/ColumnChart';\nimport {DraggableWrapper} from 'src/components/DraggableWrapper';\nimport {Icon} from 'src/components/Icon';\nimport {KPIBox} from 'src/components/KPIBox';\nimport {BasicSingleCell, type GenericObject, Table} from 'src/components/Table';\nimport {BodyMediumBold, BodySmall} from 'src/components/Text';\n\nimport css from 'src/components/DraggableWrapper/DraggableWrapper.stories.module.css';\n\n\nexport default {\n tags: ['autodocs'],\n title: 'Components/DraggableWrapper',\n component: DraggableWrapper,\n argTypes: {\n children: {\n description: 'The component to wrap with drag-to-reorder behavior.',\n control: {type: 'object'},\n table: {\n type: {summary: 'React.ReactNode'},\n },\n },\n isDragging: {\n description:\n 'Applies the dragging visual state (50% opacity + purple ring) to the placeholder left in place while dragging.',\n control: {type: 'boolean'},\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n dragHandleLabel: {\n description:\n 'Accessible label for the drag handle — used as `aria-label` and tooltip text. Pass a translated string for i18n.',\n control: {type: 'text'},\n table: {\n type: {summary: 'string'},\n defaultValue: {summary: '\\'Drag to move\\''},\n },\n },\n classNames: {\n description:\n 'Class names to override or extend internal elements (e.g. from parent CSS modules).',\n control: {type: 'object'},\n table: {\n type: {summary: '{wrapper?: string; dragHandle?: string}'},\n },\n },\n onKeyboardReorder: {\n description:\n 'Called with `\"up\"` or `\"down\"` when the user presses ArrowUp/ArrowLeft or ArrowDown/ArrowRight while the item is keyboard-grabbed. Use this to reorder the list in state.',\n table: {\n type: {summary: '(direction: \\'up\\' | \\'down\\') => void'},\n },\n },\n onDragStart: {\n description:\n 'Standard HTML `dragstart` event handler. Set `isDragging` and store the dragging id here.',\n table: {\n type: {summary: 'React.DragEventHandler'},\n },\n },\n onDragEnd: {\n description:\n 'Standard HTML `dragend` event handler. Commit the reorder and clear `isDragging` here.',\n table: {\n type: {summary: 'React.DragEventHandler'},\n },\n },\n onDragOver: {\n description:\n 'Standard HTML `dragover` event handler. Call `e.preventDefault()` and store the current drop target id here.',\n table: {\n type: {summary: 'React.DragEventHandler'},\n },\n },\n onDrop: {\n description:\n 'Standard HTML `drop` event handler. Call `e.preventDefault()` to allow the drop.',\n table: {\n type: {summary: 'React.DragEventHandler'},\n },\n },\n testId: {\n description:\n 'Test ID for the component root. The drag handle receives `{testId}-drag-handle`.',\n control: {type: 'text'},\n table: {\n type: {summary: 'string'},\n },\n },\n },\n parameters: {\n docs: {\n subtitle: 'Generic drag-to-reorder wrapper for any component.',\n description: {\n component: `\n\\`\\`\\`js\nimport { DraggableWrapper } from \"@spaced-out/ui-design-system/lib/components/DraggableWrapper\";\n\\`\\`\\`\n\\`DraggableWrapper\\` adds drag-to-reorder behavior to any component without modifying it.\nIt shows a grip handle on hover and applies the dragging visual state\n(50% opacity + purple ring) when \\`isDragging\\` is \\`true\\`.\n\nThe parent manages all drag logic — pass the standard HTML drag event handlers\nand control item order in state.\n\n### Mouse usage\n\n\\`\\`\\`jsx\nconst [draggingId, setDraggingId] = React.useState(null);\nconst draggingIdRef = React.useRef(null);\nconst dragOverIdRef = React.useRef(null);\n\n { setDraggingId(item.id); draggingIdRef.current = item.id; }}\n onDragEnd={() => { /* reorder logic */ setDraggingId(null); }}\n onDragOver={(e) => { e.preventDefault(); dragOverIdRef.current = item.id; }}\n onDrop={(e) => e.preventDefault()}\n onKeyboardReorder={(direction) => { /* move item up or down in state */ }}\n>\n \n\n\\`\\`\\`\n\n### Keyboard usage\n\nTab to the grip handle, press **Enter** or **Space** to grab, **Arrow keys** to move, **Enter/Space** or **Escape** to drop.\n `,\n },\n },\n storySource: {\n componentPath: '/src/components/DraggableWrapper/DraggableWrapper',\n },\n },\n};\n\n// ── Reorder helpers ────────────────────────────────────────────\n\nfunction reorder(\n list: T[],\n fromId: string,\n toId: string,\n getId: (item: T) => string,\n): T[] {\n const next = [...list];\n const from = next.findIndex((item) => getId(item) === fromId);\n const to = next.findIndex((item) => getId(item) === toId);\n const [item] = next.splice(from, 1);\n next.splice(to, 0, item);\n return next;\n}\n\nfunction moveItem(\n list: T[],\n id: string,\n direction: 'up' | 'down',\n getId: (item: T) => string,\n): T[] {\n const next = [...list];\n const index = next.findIndex((item) => getId(item) === id);\n const swapIndex = direction === 'up' ? index - 1 : index + 1;\n if (swapIndex < 0 || swapIndex >= next.length) {\n return next;\n }\n [next[index], next[swapIndex]] = [next[swapIndex], next[index]];\n return next;\n}\n\n// ── KPI tiles ─────────────────────────────────────────────────\n\ninterface KPITile {\n id: string;\n iconName: string;\n topContent: string;\n middleContent: string;\n bottomContent: string;\n}\n\nconst INITIAL_KPI_TILES: KPITile[] = [\n {\n id: '1',\n iconName: 'users',\n topContent: 'Total Users',\n middleContent: '10,000',\n bottomContent: '10% (1,000 total)',\n },\n {\n id: '2',\n iconName: 'money-bill',\n topContent: 'Total Sales',\n middleContent: '$1,234,567',\n bottomContent: '5% (500 total)',\n },\n {\n id: '3',\n iconName: 'chart-bar',\n topContent: 'Active Sessions',\n middleContent: '3,421',\n bottomContent: '2% (68 total)',\n },\n];\n\nexport const WithKPIBoxes = () => {\n const [tiles, setTiles] = React.useState(INITIAL_KPI_TILES);\n const [draggingId, setDraggingId] = React.useState(null);\n const draggingIdRef = React.useRef(null);\n const dragOverIdRef = React.useRef(null);\n\n const handleKpiDragEnd = () => {\n const fromId = draggingIdRef.current;\n const toId = dragOverIdRef.current;\n if (fromId && toId && fromId !== toId) {\n setTiles((prev) => reorder(prev, fromId, toId, (t) => t.id));\n }\n setDraggingId(null);\n draggingIdRef.current = null;\n dragOverIdRef.current = null;\n };\n\n return (\n
\n {tiles.map((tile) => (\n {\n setDraggingId(tile.id);\n draggingIdRef.current = tile.id;\n }}\n onDragEnd={handleKpiDragEnd}\n onDragOver={(e) => {\n e.preventDefault();\n dragOverIdRef.current = tile.id;\n }}\n onDrop={(e) => e.preventDefault()}\n onKeyboardReorder={(direction) => {\n setTiles((prev) => moveItem(prev, tile.id, direction, (t) => t.id));\n }}\n >\n \n \n {tile.bottomContent}\n
\n }\n classNames={{wrapper: css.noWrapperBorder}}\n />\n \n ))}\n \n );\n};\nWithKPIBoxes.storyName = 'With KPI Boxes';\n\n// ── Tables ────────────────────────────────────────────────────\n\ninterface RowData extends GenericObject {\n id: string;\n name: string;\n email: string;\n}\n\nconst NameCell = ({data}: {data: RowData}) => (\n \n {data.name}\n \n);\n\nconst EmailCell = ({data}: {data: RowData}) => (\n \n {data.email}\n \n);\n\nconst tableHeaders = [\n {label: 'Name', key: 'name', sortable: false, render: NameCell},\n {label: 'Email', key: 'email', sortable: false, render: EmailCell},\n];\n\ninterface DraggableTable {\n id: string;\n entries: RowData[];\n}\n\nconst INITIAL_TABLES: DraggableTable[] = [\n {\n id: 't1',\n entries: [\n {id: 't1-1', name: 'Alice Johnson', email: 'alice@eng.com'},\n {id: 't1-2', name: 'Bob Smith', email: 'bob@eng.com'},\n {id: 't1-3', name: 'Carol White', email: 'carol@eng.com'},\n ],\n },\n {\n id: 't2',\n entries: [\n {id: 't2-1', name: 'David Lee', email: 'david@mkt.com'},\n {id: 't2-2', name: 'Emma Davis', email: 'emma@mkt.com'},\n {id: 't2-3', name: 'Frank Brown', email: 'frank@mkt.com'},\n ],\n },\n {\n id: 't3',\n entries: [\n {id: 't3-1', name: 'Grace Kim', email: 'grace@sales.com'},\n {id: 't3-2', name: 'Henry Wilson', email: 'henry@sales.com'},\n {id: 't3-3', name: 'Iris Chen', email: 'iris@sales.com'},\n ],\n },\n];\n\nexport const WithTables = () => {\n const [tables, setTables] = React.useState(INITIAL_TABLES);\n const [draggingId, setDraggingId] = React.useState(null);\n const draggingIdRef = React.useRef(null);\n const dragOverIdRef = React.useRef(null);\n\n const handleDragEnd = () => {\n const fromId = draggingIdRef.current;\n const toId = dragOverIdRef.current;\n if (fromId && toId && fromId !== toId) {\n setTables((prev) => reorder(prev, fromId, toId, (t) => t.id));\n }\n setDraggingId(null);\n draggingIdRef.current = null;\n dragOverIdRef.current = null;\n };\n\n return (\n
\n {tables.map((table) => (\n {\n setDraggingId(table.id);\n draggingIdRef.current = table.id;\n }}\n onDragEnd={handleDragEnd}\n onDragOver={(e) => {\n e.preventDefault();\n dragOverIdRef.current = table.id;\n }}\n onDrop={(e) => e.preventDefault()}\n onKeyboardReorder={(direction) => {\n setTables((prev) =>\n moveItem(prev, table.id, direction, (t) => t.id),\n );\n }}\n >\n \n headers={tableHeaders}\n entries={table.entries}\n sortable={false}\n classNames={{wrapper: css.noWrapperBorder}}\n />\n \n ))}\n
\n );\n};\nWithTables.storyName = 'With Tables';\n\n// ── Chart + Table row ─────────────────────────────────────────\n\nconst columnChartSeries = [\n {\n name: 'Inbound Sourced',\n data: [\n {name: 'Q1.23', y: 40629},\n {name: 'Q2.23', y: 26000},\n {name: 'Q3.23', y: 10700},\n {name: 'Q4.23', y: 38300},\n ],\n },\n {\n name: 'Outbound Sourced',\n data: [\n {name: 'Q1.23', y: 31086},\n {name: 'Q2.23', y: 13600},\n {name: 'Q3.23', y: 45000},\n {name: 'Q4.23', y: 41000},\n ],\n },\n];\n\nconst columnChartXAxis = {title: {text: 'Quarter'}};\nconst columnChartYAxis = {title: {text: 'Amount Sourced'}};\nconst columnChartLegend = {enabled: true, shadow: false};\n\nconst CHART_AND_TABLE_ENTRIES: RowData[] = [\n {id: 'r1', name: 'Alice Johnson', email: 'alice@example.com'},\n {id: 'r2', name: 'Bob Smith', email: 'bob@example.com'},\n {id: 'r3', name: 'Carol White', email: 'carol@example.com'},\n {id: 'r4', name: 'David Lee', email: 'david@example.com'},\n {id: 'r5', name: 'Emma Davis', email: 'emma@example.com'},\n {id: 'r6', name: 'Frank Brown', email: 'frank@example.com'},\n {id: 'r7', name: 'Grace Kim', email: 'grace@example.com'},\n {id: 'r8', name: 'Henry Wilson', email: 'henry@example.com'},\n {id: 'r9', name: 'Iris Chen', email: 'iris@example.com'},\n {id: 'r10', name: 'Jack Martinez', email: 'jack@example.com'},\n];\n\ntype WidgetId = 'chart' | 'table';\n\nconst WIDGET_ORDER: WidgetId[] = ['chart', 'table'];\n\nexport const WithChartAndTable = () => {\n const [widgetOrder, setWidgetOrder] =\n React.useState(WIDGET_ORDER);\n const [draggingId, setDraggingId] = React.useState(null);\n const draggingIdRef = React.useRef(null);\n const dragOverIdRef = React.useRef(null);\n\n const handleDragEnd = () => {\n const fromId = draggingIdRef.current;\n const toId = dragOverIdRef.current;\n if (fromId && toId && fromId !== toId) {\n setWidgetOrder((prev) => reorder(prev, fromId, toId, (id) => id));\n }\n setDraggingId(null);\n draggingIdRef.current = null;\n dragOverIdRef.current = null;\n };\n\n return (\n
\n {widgetOrder.map((widgetId) =>\n widgetId === 'chart' ? (\n {\n setDraggingId('chart');\n draggingIdRef.current = 'chart';\n }}\n onDragEnd={handleDragEnd}\n onDragOver={(e) => {\n e.preventDefault();\n dragOverIdRef.current = 'chart';\n }}\n onDrop={(e) => e.preventDefault()}\n onKeyboardReorder={(direction) => {\n setWidgetOrder((prev) =>\n moveItem(prev, 'chart', direction, (id) => id),\n );\n }}\n >\n \n \n ) : (\n {\n setDraggingId('table');\n draggingIdRef.current = 'table';\n }}\n onDragEnd={handleDragEnd}\n onDragOver={(e) => {\n e.preventDefault();\n dragOverIdRef.current = 'table';\n }}\n onDrop={(e) => e.preventDefault()}\n onKeyboardReorder={(direction) => {\n setWidgetOrder((prev) =>\n moveItem(prev, 'table', direction, (id) => id),\n );\n }}\n >\n \n headers={tableHeaders}\n entries={CHART_AND_TABLE_ENTRIES}\n sortable={false}\n classNames={{wrapper: css.noWrapperBorder}}\n />\n \n ),\n )}\n
\n );\n};\nWithChartAndTable.storyName = 'With Chart And Table';\n" }, "css": { "path": "DraggableWrapper.module.css", "content": "@value (colorBorderTertiary, colorFillPrimary, colorButtonFillSecondaryPressed) from '../../styles/variables/_color.css';\n@value (spaceSmall) from '../../styles/variables/_space.css';\n@value (borderRadiusMedium, borderWidthPrimary, borderWidthTertiary) from '../../styles/variables/_border.css';\n@value (motionDurationNormal, motionEaseInEaseOut) from '../../styles/variables/_motion.css';\n@value (opacity50, opacity100, opacity0) from '../../styles/variables/_opacity.css';\n@value (elevationCard) from '../../styles/variables/_elevation.css';\n\n.wrapper {\n position: relative;\n border: borderWidthPrimary solid colorBorderTertiary;\n border-radius: borderRadiusMedium;\n}\n\n.wrapper:hover:not(.dragging) {\n outline: borderWidthPrimary solid colorBorderTertiary;\n outline-offset: calc(-1 * borderWidthPrimary);\n}\n\n/* ── Drag handle ──────────────────────────────────────────── */\n\n.dragHandle {\n position: absolute;\n top: spaceSmall;\n left: borderWidthPrimary;\n opacity: opacity0;\n cursor: grab;\n transition: opacity motionDurationNormal motionEaseInEaseOut;\n line-height: 0;\n z-index: calc(elevationCard / 4);\n border-radius: borderRadiusMedium;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .dragHandle {\n transition: none;\n }\n}\n\n.dragHandle:focus-within {\n opacity: opacity100;\n}\n\n.wrapper:hover .dragHandle {\n opacity: opacity100;\n}\n\n/* ── Dragging state ───────────────────────────────────────── */\n\n.wrapper.dragging {\n opacity: opacity50;\n border: borderWidthPrimary solid colorFillPrimary;\n outline: borderWidthTertiary solid colorButtonFillSecondaryPressed;\n outline-offset: borderWidthPrimary;\n}\n\n.wrapper.dragging .dragHandle {\n opacity: opacity100;\n cursor: grabbing;\n}\n" }, "index": { "path": "index.d.ts", "content": "export { DraggableWrapper } from '../../components/DraggableWrapper/DraggableWrapper';\nexport type { DraggableWrapperProps, DraggableWrapperClassNames, } from '../../components/DraggableWrapper/DraggableWrapper';\n//# sourceMappingURL=index.d.ts.map" }, "additional": {} }, "allFiles": [ "DraggableWrapper.module.css", "DraggableWrapper.stories.module.css", "DraggableWrapper.stories.tsx", "DraggableWrapper.tsx", "index.ts" ] }, "Dropdown": { "name": "Dropdown", "path": "src/components/Dropdown", "files": { "main": { "path": "Dropdown.d.ts", "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nimport type { ClickAwayRefType } from '../../utils/click-away';\nimport type { InputProps } from '../../components/Input';\nimport type { MenuOption, MenuProps } from '../../components/Menu';\nimport type { ElevationType } from '../../components/Tooltip';\ntype ClassNames = Readonly<{\n wrapper?: string;\n box?: string;\n iconRight?: string;\n}>;\nexport interface DropdownProps extends Omit {\n classNames?: ClassNames;\n onChange?: (option: MenuOption, arg2?: React.SyntheticEvent | null | undefined) => unknown;\n onMenuOpen?: () => unknown;\n onMenuClose?: () => unknown;\n scrollMenuToBottom?: boolean;\n dropdownInputText?: string;\n menu?: MenuProps;\n elevation?: ElevationType;\n clickAwayRef?: React.RefObject;\n /**\n * Opt in to the accessibility behavior: the `combobox` role and its ARIA,\n * keyboard navigation of the options from the input, and focus returning to\n * the input on close. Forwarded to the `Menu` this opens.\n *\n * Off by default, and off is this component exactly as it behaved before any\n * of it existed.\n */\n enableA11y?: boolean;\n testId?: string;\n}\nexport declare const Dropdown: Flow.AbstractComponent;\nexport {};\n//# sourceMappingURL=Dropdown.d.ts.map" }, "story": { "path": "Dropdown.stories.tsx", "content": "import * as React from 'react';\n\nimport type {ClickAwayRefType} from 'src/utils/click-away';\nimport {\n getSelectedKeysFromSelectedOption,\n getTextLabelFromSelectedKeys,\n} from 'src/utils/menu';\n\nimport {Button} from 'src/components/Button';\nimport type {DropdownProps} from 'src/components/Dropdown/Dropdown';\nimport {Dropdown} from 'src/components/Dropdown/Dropdown';\nimport {Icon} from 'src/components/Icon';\nimport type {\n MenuGroupTitleOption,\n MenuOption,\n MenuProps,\n} from 'src/components/Menu';\nimport {MenuFooter, MenuHeader} from 'src/components/Menu/Menu.stories';\nimport {FormLabelSmall} from 'src/components/Text';\nimport {ELEVATION_TYPES, Tooltip} from 'src/components/Tooltip';\n\nimport css from 'src/components/Dropdown/Dropdown.stories.module.css';\n\n\nconst options: MenuOption[] = [\n {\n key: '1',\n label: 'Option one',\n iconLeft: 'coffee',\n },\n {key: '2', label: 'Option two', iconLeft: 'user'},\n {\n key: '4',\n label:\n 'Option three is a very long option that would truncate and keep going to make it even longer than before. You can hover over the label to see the full text. ShowLabelTooltip maxLines is used to define the number of lines to show in the tooltip.',\n iconLeft: 'face-party',\n },\n {\n key: '5',\n label: 'Option five(disabled)',\n disabled: true,\n iconLeft: 'flag',\n },\n {\n key: '6',\n label: 'Option six(disabled) very long option that would truncate',\n disabled: true,\n iconLeft: 'camera',\n },\n {\n key: '7',\n label: 'Option seven',\n iconLeft: 'coffee',\n },\n {key: '8', label: 'Option eight', iconLeft: 'user'},\n {\n key: '9',\n label: 'Option nine',\n iconLeft: 'face-party',\n },\n];\n\nconst elevationOptions: Array = [...Object.values(ELEVATION_TYPES)];\n\nexport default {\n tags: ['autodocs'],\n title: 'Form Components/Dropdown/Generic Dropdown',\n component: Dropdown,\n argTypes: {\n enableA11y: {\n description:\n '**enableA11y** opts into the accessibility behavior: the `combobox` role and its ARIA, keyboard navigation of the options from the input, and focus returning to the input on close. Off by default, where the component behaves exactly as it did before any of it existed. Off here too, as everywhere: turn the control on to see the accessible behavior.',\n control: {type: 'boolean'},\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n size: {\n description:\n 'Dropdown supports only two size variants namely small and medium. `small` < `medium`',\n options: ['medium', 'small'],\n control: {\n type: 'select',\n },\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: 'medium'},\n },\n },\n menu: {\n description: 'Menu props to use',\n control: {\n type: 'object',\n },\n table: {\n type: {summary: 'MenuProps'},\n },\n },\n name: {\n description: 'Name of the Dropdown',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n elevation: {\n description:\n 'Elevation level for the dropdown menu. This controls the z-index stacking order. Default is set to \"modal\" elevation. Use higher elevation levels when rendering the dropdown above other elevated elements like Modal, Toast, etc.',\n control: {\n type: 'select',\n },\n options: elevationOptions,\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: 'modal'},\n },\n },\n disabled: {\n description: 'if **true**, the component is disabled',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n placeholder: {\n description: 'Placeholder of dropdown. This appears inside the input box',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n locked: {\n description:\n 'if **true**, the component is locked, Locked state is the readonly state of the dropdown',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n error: {\n description:\n 'if **true**, the component is moved to error state, Error state displays a red border surrounding input',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n errorText: {\n description:\n 'Error text to be displayed on the bottom of the input. This uses `colorTextDanger`',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n label: {\n description:\n 'Primary label of the dropdown. This appears on top of dropdown input',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n helperText: {\n description:\n 'Secondary label of the dropdown. This appears on bottom of dropdown input, if the dropdown is in `error` state the priority is given to `errorText`, in such cases secondary label wont be displayed',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n dropdownInputText: {\n description:\n 'Text that appears inside the top input. Since Dropdown is a controlled component, this has to be set by caller',\n table: {\n type: {summary: 'string'},\n },\n },\n classNames: {\n description: 'External classnames to be applied',\n control: {\n type: 'object',\n },\n table: {\n type: {summary: '{wrapper?: string, box?: string}'},\n },\n },\n required: {\n description: 'if **true**, a red star would be added to the label',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n onChange: {\n description:\n '**onChange** handler is triggered when there is a selection of an option from dropdown',\n action: 'changed',\n table: {\n type: {\n summary:\n '(option: MenuOption, ?SyntheticEvent) => mixed',\n },\n },\n },\n onMenuOpen: {\n description:\n '**onMenuOpen** handler is triggered when menu is opened. This should be helpful in cases where you want to change Button icon / text on this trigger.',\n action: 'clicked',\n table: {\n type: {summary: '() => mixed'},\n },\n },\n onMenuClose: {\n description:\n '**onMenuClose** handler is triggered when menu is closed. This should be helpful in cases where you want to change Button icon / text on this trigger.',\n action: 'clicked',\n table: {\n type: {summary: '() => mixed'},\n },\n },\n onFocus: {\n description: '**onFocus** handler is triggered when dropdown is focussed',\n action: 'focussed',\n table: {\n type: {summary: '(e: SyntheticInputEvent) => mixed'},\n },\n },\n onBlur: {\n description: '**onBlur** handler is triggered when dropdown is blurred',\n action: 'blurred',\n table: {\n type: {summary: '(e: SyntheticInputEvent) => mixed'},\n },\n },\n clickAwayRef: {\n type: {optional: true},\n description: 'ref that contains the functions to open or close the child',\n table: {\n type: {\n summary: 'ClickAwayRefType',\n },\n },\n },\n testId: {\n description: 'Test ID for the component',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n },\n parameters: {\n docs: {\n subtitle: 'Generates a Dropdown component',\n description: {\n component: `\n\\`\\`\\`js\nimport { Dropdown } from \"@spaced-out/ui-design-system/lib/components/Dropdown\";\n\\`\\`\\`\n**Dropdown** is implemented as a combination of **Input** and **Menu**\ncomponents. It internally uses **Floating UI** to\nposition itself in context of DOM. Supports a bunch of callbacks listed below.\nThis is a controlled component. You would need to pass and set \\`selectedKeys\\` and \\`dropdownInputText\\` by handling \\`onChange\\` in order to set/reset the selection state\nof menu item and input value respectively.\n\n- Supports passing a \\`clickAwayRef\\` prop to the component.\n- You can always force Open the instance from ref by using \\`clickAwayRef.current?.forceOpen()\\`. This might be useful when want to force Open as per you needs.\n- You can always force Close the instance from ref by using \\`clickAwayRef.current?.forceClose()\\`. This might be useful when want to force Close as per you needs.\n\n**Note: ** For **checkbox** type option set you can make use of \\`getSelectedKeysFromSelectedOption\\` and \\`getTextLabelFromSelectedKeys\\` from \\`utils/menu\\`\nto populate \\`selectedKeys\\` and \\`dropdownInputText\\` respectively.\n `,\n },\n },\n storySource: {\n componentPath: '/src/components/Dropdown/Dropdown',\n },\n },\n};\n\nconst menuProps: MenuProps = {\n options,\n};\n\nexport const WithSimpleMenuStory = (args: DropdownProps) => {\n const [selectedKeys, setSelectedKeys] = React.useState(\n args.menu?.selectedKeys || [],\n );\n const [dropDownText, setDropdownText] = React.useState(\n args.dropdownInputText,\n );\n\n const handleChange = (\n option: MenuOption,\n _event?: React.SyntheticEvent | null | undefined,\n ) => {\n setSelectedKeys([option.key]);\n setDropdownText(option.label);\n };\n\n const onClear = () => {\n setSelectedKeys([]);\n setDropdownText('');\n };\n return (\n
\n
\n \n \n
\n
\n );\n};\n\nWithSimpleMenuStory.args = {\n label: 'Form Label',\n menu: menuProps,\n testId: 'dropdown-with-simple-menu-story',\n};\n\n/*\n * The same dropdown as `With Simple Menu`, with the accessibility opt-in on.\n *\n * With `enableA11y` the field becomes a `combobox` that owns the listbox it\n * opens: it reports `aria-expanded` / `aria-controls` while the list is\n * rendered, focus stays in the field so typing still reaches it, and the arrow\n * keys move a virtual highlight reported through `aria-activedescendant`.\n * Escape closes and returns focus to the field.\n *\n * Every other story here leaves the prop off, which is the default and is this\n * component exactly as it behaved before any of this existed.\n */\nexport const AccessibleDropdownStory = (args: DropdownProps) => {\n const [selectedKeys, setSelectedKeys] = React.useState(\n args.menu?.selectedKeys || [],\n );\n const [dropDownText, setDropdownText] = React.useState(\n args.dropdownInputText,\n );\n\n const handleChange = (\n option: MenuOption,\n _event?: React.SyntheticEvent | null | undefined,\n ) => {\n setSelectedKeys([option.key]);\n setDropdownText(option.label);\n };\n\n return (\n
\n
\n \n
\n
\n );\n};\n\nAccessibleDropdownStory.args = {\n enableA11y: true,\n label: 'Form Label',\n menu: menuProps,\n testId: 'dropdown-accessible-story',\n};\n\nexport const WithSimpleMenuTooltipStory = (args: DropdownProps) => {\n const [selectedKeys, setSelectedKeys] = React.useState(\n args.menu?.selectedKeys || [],\n );\n const [dropDownText, setDropdownText] = React.useState(\n args.dropdownInputText,\n );\n\n const handleChange = (option: MenuOption) => {\n setSelectedKeys([option.key]);\n setDropdownText(option.label);\n };\n\n const onClear = () => {\n setSelectedKeys([]);\n setDropdownText('');\n };\n return (\n
\n
\n \n \n
\n
\n );\n};\n\nWithSimpleMenuTooltipStory.args = {\n label: 'Form Label',\n menu: {...menuProps, showLabelTooltip: {maxLines: 6}},\n testId: 'dropdown-with-simple-menu-tooltip-story',\n};\n\nexport const WithSearchStory = (args: DropdownProps) => {\n const [selectedKeys, setSelectedKeys] = React.useState(\n args.menu?.selectedKeys || [],\n );\n const [dropDownText, setDropdownText] = React.useState(\n args.dropdownInputText,\n );\n\n const handleChange = (option: MenuOption) => {\n setSelectedKeys([option.key]);\n setDropdownText(option.label);\n };\n\n const onClear = () => {\n setSelectedKeys([]);\n setDropdownText('');\n };\n return (\n
\n
\n \n \n
\n
\n );\n};\n\nWithSearchStory.args = {\n label: 'Form Label',\n\n menu: {...menuProps, allowSearch: true},\n testId: 'dropdown-with-search-story',\n};\n\nconst checkboxMenuProps: MenuProps = {\n options,\n optionsVariant: 'checkbox',\n selectedKeys: ['4'],\n};\n\nexport const WithCheckboxMenuStory = (args: DropdownProps) => {\n const [dropDownText, setDropdownText] = React.useState(\n args.dropdownInputText,\n );\n const [selectedKeys, setSelectedKeys] = React.useState(\n args.menu?.selectedKeys || [],\n );\n\n React.useEffect(() => {\n setSelectedKeys(args.menu?.selectedKeys || []);\n const newDropdownText = getTextLabelFromSelectedKeys(\n args.menu?.selectedKeys,\n args.menu?.options,\n );\n setDropdownText(newDropdownText);\n }, [args.menu?.selectedKeys]);\n\n const handleChange = (option: MenuOption) => {\n const newSelectedKeys = getSelectedKeysFromSelectedOption(\n option,\n selectedKeys,\n );\n const newDropdownText = getTextLabelFromSelectedKeys(\n newSelectedKeys,\n args.menu?.options,\n );\n setSelectedKeys(newSelectedKeys);\n setDropdownText(newDropdownText);\n };\n\n const onClear = () => {\n setSelectedKeys([]);\n setDropdownText('');\n };\n\n return (\n
\n
\n \n \n
\n
\n );\n};\n\nWithCheckboxMenuStory.args = {\n label: 'Form Label',\n\n menu: checkboxMenuProps,\n testId: 'dropdown-with-checkbox-menu-story',\n};\n\nconst radioMenuProps: MenuProps = {\n options,\n optionsVariant: 'radio',\n selectedKeys: ['2'],\n};\n\nexport const WithRadioMenuStory = (args: DropdownProps) => {\n const [dropDownText, setDropdownText] = React.useState(\n args.dropdownInputText,\n );\n const [selectedKeys, setSelectedKeys] = React.useState(\n args.menu?.selectedKeys || [],\n );\n\n React.useEffect(() => {\n setSelectedKeys(args.menu?.selectedKeys || []);\n }, [args.menu?.selectedKeys]);\n\n const handleChange = (option: MenuOption) => {\n setSelectedKeys([option.key]);\n setDropdownText(option.label);\n };\n\n const onClear = () => {\n setSelectedKeys([]);\n setDropdownText('');\n };\n return (\n
\n
\n \n \n
\n
\n );\n};\n\nWithRadioMenuStory.args = {\n label: 'Form Label',\n menu: radioMenuProps,\n testId: 'dropdown-with-radio-menu-story',\n};\n\nconst composeOptions: Array> = [\n [\n {\n key: '1',\n label: 'Option one',\n secondaryLabel: 'Sub Text',\n },\n {\n key: '2',\n label: 'Option two',\n secondaryLabel: 'Sub Text',\n },\n {\n key: '3',\n label: 'Option three',\n secondaryLabel: 'Sub Text',\n },\n ],\n [\n {\n iconLeft: 'coffee',\n key: '4',\n label: 'Option one',\n },\n ],\n [\n {\n iconLeft: 'coffee',\n key: '5',\n label: 'Option one',\n },\n ],\n];\n\nconst composeMenuProps: MenuProps = {\n composeOptions,\n};\n\nexport const WithComposeMenuStory = (args: DropdownProps) => {\n const [selectedKeys, setSelectedKeys] = React.useState(\n args.menu?.selectedKeys || [],\n );\n const [dropDownText, setDropdownText] = React.useState(\n args.dropdownInputText,\n );\n\n const handleChange = (option: MenuOption) => {\n setSelectedKeys([option.key]);\n setDropdownText(option.label);\n };\n\n const onClear = () => {\n setSelectedKeys([]);\n setDropdownText('');\n };\n return (\n
\n
\n \n \n
\n
\n );\n};\n\nWithComposeMenuStory.args = {\n label: 'Form Label',\n menu: composeMenuProps,\n testId: 'dropdown-with-compose-menu-story',\n};\n\nconst groupTitleOptions: Array = [\n {\n groupTitle: (\n
\n Fast Food\n
\n \n \n \n
\n
\n ),\n options: [\n {\n key: '1',\n iconLeft: 'burger',\n label: 'Burger',\n },\n {\n key: '2',\n iconLeft: 'pizza',\n label: 'Pizza',\n },\n {\n key: '3',\n iconLeft: 'french-fries',\n label: 'Fries',\n },\n ],\n },\n {\n groupTitle: (\n
\n Fruits\n
\n \n \n \n
\n
\n ),\n options: [\n {\n key: '7',\n iconLeft: 'banana',\n label: 'Banana',\n },\n {\n key: '8',\n iconLeft: 'pear',\n label: 'Pear',\n },\n {\n key: '9',\n iconLeft: 'lemon',\n label: 'Lemon',\n },\n ],\n },\n];\n\nconst groupTitleMenuProps: MenuProps = {\n groupTitleOptions,\n};\n\nexport const WithGroupTitleMenuStory = (args: DropdownProps) => {\n const [selectedKeys, setSelectedKeys] = React.useState(\n args.menu?.selectedKeys || [],\n );\n const [dropDownText, setDropdownText] = React.useState(\n args.dropdownInputText,\n );\n\n const handleChange = (option: MenuOption) => {\n setSelectedKeys([option.key]);\n setDropdownText(option.label);\n };\n\n const onClear = () => {\n setSelectedKeys([]);\n setDropdownText('');\n };\n return (\n
\n
\n \n \n
\n
\n );\n};\n\nWithGroupTitleMenuStory.args = {\n label: 'Form Label',\n\n menu: {...groupTitleMenuProps},\n testId: 'dropdown-with-group-title-menu-story',\n};\n\nexport const WithHeaderAndFooterStory = (args: DropdownProps) => (\n \n);\n\nexport const WithHeaderAndFooter = (args: DropdownProps) => {\n const clickAwayRef = React.useRef(null);\n const [dropDownText, setDropdownText] = React.useState(\n args.dropdownInputText,\n );\n const [selectedKeys, setSelectedKeys] = React.useState(\n args.menu?.selectedKeys || [],\n );\n\n React.useEffect(() => {\n setSelectedKeys(args.menu?.selectedKeys || []);\n const newDropdownText = getTextLabelFromSelectedKeys(\n args.menu?.selectedKeys,\n args.menu?.options,\n );\n setDropdownText(newDropdownText);\n }, [args.menu?.selectedKeys]);\n\n const handleChange = (option: MenuOption) => {\n const newSelectedKeys = getSelectedKeysFromSelectedOption(\n option,\n selectedKeys,\n );\n const newDropdownText = getTextLabelFromSelectedKeys(\n newSelectedKeys,\n args.menu?.options,\n );\n setSelectedKeys(newSelectedKeys);\n setDropdownText(newDropdownText);\n };\n\n const onClear = () => {\n setSelectedKeys([]);\n setDropdownText('');\n };\n\n const onSave = () => {\n if (clickAwayRef.current) {\n clickAwayRef.current?.forceClose();\n }\n };\n\n return (\n
\n
\n ,\n footer: ,\n }}\n onChange={handleChange}\n clickAwayRef={clickAwayRef}\n />\n \n
\n
\n );\n};\n\nconst menuPropsWithHeaderAndFooter: MenuProps = {\n options,\n optionsVariant: 'checkbox',\n};\n\nWithHeaderAndFooterStory.args = {\n label: 'Form Label',\n menu: {\n ...menuPropsWithHeaderAndFooter,\n header: ,\n footer: ,\n },\n testId: 'dropdown-with-header-and-footer-story',\n};\nWithSimpleMenuStory.storyName = 'With Simple Menu';\nAccessibleDropdownStory.storyName = 'Accessible (enableA11y)';\nWithSimpleMenuTooltipStory.storyName = 'With Simple Menu Tooltip';\nWithSearchStory.storyName = 'With Search';\nWithCheckboxMenuStory.storyName = 'With Checkbox Menu';\nWithRadioMenuStory.storyName = 'With Radio Menu';\nWithComposeMenuStory.storyName = 'With Compose Menu';\nWithGroupTitleMenuStory.storyName = 'With Group Title Menu';\nWithHeaderAndFooterStory.storyName = 'With Header And Footer';\n" }, "css": { "path": "Dropdown.module.css", "content": "@value (\n sizeFluid\n) from '../../styles/variables/_size.css';\n\n@value (\n borderWidthTertiary\n) from '../../styles/variables/_border.css';\n\n.dropdownContainer {\n display: flex;\n position: relative;\n flex-flow: column;\n width: sizeFluid;\n}\n\n.inputBox {\n cursor: pointer;\n}\n\n/*\n * Keeping the trigger visually active while its menu is open (DOM focus has\n * moved into the listbox) is done in Input.module.css, keyed off the trigger's\n * own `aria-expanded`. It has to live there: the rules it must beat are scoped\n * to Input's `.wrapper` / `.box` / `.withError` class names, which this module\n * cannot name and therefore cannot reliably out-specify.\n */\n\n/*\n * forced-colors mode drops the box-shadow open-emphasis ring; the base box\n * border survives, but add a system-color outline so the open state stays\n * perceivable in Windows High Contrast.\n */\n@media (forced-colors: active) {\n .inputBox.inputBoxOpen {\n outline: borderWidthTertiary solid Highlight;\n outline-offset: borderWidthTertiary;\n }\n}\n\n.menuWrapper {\n width: var(--dropdown-width);\n z-index: var(--menu-elevation);\n}\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../components/Dropdown/Dropdown';\nexport * from '../../components/Dropdown/SimpleDropdown';\n//# sourceMappingURL=index.d.ts.map" }, "additional": { "SimpleDropdown.d.ts": { "path": "SimpleDropdown.d.ts", "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nimport type { MenuClassNames, MenuLabelTooltip } from '../../types/menu';\nimport type { ClickAwayRefType } from '../../utils/click-away';\nimport type { InputProps } from '../../components/Input';\nimport type { MenuOption, MenuOptionsVariant, Virtualization } from '../../components/Menu';\nimport type { ElevationType } from '../../components/Tooltip';\ntype ClassNames = Readonly<{\n wrapper?: string;\n box?: string;\n}>;\nexport interface SimpleDropdownRef {\n selectedKeys?: Array;\n}\nexport interface SimpleDropdownProps extends Omit {\n elevation?: ElevationType;\n classNames?: ClassNames;\n clickAwayRef?: React.RefObject;\n options?: Array;\n optionsVariant?: MenuOptionsVariant;\n allowSearch?: boolean;\n selectedKeys?: Array;\n isMenuFluid?: boolean;\n menuVirtualization?: Virtualization;\n header?: React.ReactNode;\n footer?: React.ReactNode;\n menuClassNames?: MenuClassNames;\n showLabelTooltip?: MenuLabelTooltip;\n allowWrap?: boolean;\n staticLabels?: {\n RESULT?: string;\n RESULTS?: string;\n SEARCH_PLACEHOLDER?: string;\n };\n onChange?: (option: MenuOption, arg2?: React.SyntheticEvent | null | undefined) => unknown;\n onMenuOpen?: () => unknown;\n onMenuClose?: () => unknown;\n resolveLabel?: (option: MenuOption) => string | React.ReactNode;\n resolveSecondaryLabel?: (option: MenuOption) => string | React.ReactNode;\n /**\n * Opt in to the accessibility behavior of the `Dropdown` this renders: its\n * ARIA roles and state, keyboard navigation of the options, and focus\n * handling on close. Forwarded unchanged.\n *\n * Off by default, and off is this component exactly as it behaved before\n * any of it existed.\n */\n enableA11y?: boolean;\n testId?: string;\n}\nexport declare const SimpleDropdown: Flow.AbstractComponent;\nexport {};\n//# sourceMappingURL=SimpleDropdown.d.ts.map" } } }, "allFiles": [ "Dropdown.module.css", "Dropdown.stories.module.css", "Dropdown.stories.tsx", "Dropdown.tsx", "SimpleDropdown.stories.tsx", "SimpleDropdown.tsx", "index.ts" ] }, "EmptyState": { "name": "EmptyState", "path": "src/components/EmptyState", "files": { "main": { "path": "EmptyState.d.ts", "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\ntype ClassNames = Readonly<{\n wrapper?: string;\n image?: string;\n title?: string;\n description?: string;\n children?: string;\n}>;\nexport interface EmptyStateProps {\n classNames?: ClassNames;\n children?: React.ReactNode;\n imageVariant?: 'calendar' | 'data' | 'file' | 'message' | 'upload' | 'chart' | 'analytics' | 'voice';\n title?: React.ReactNode;\n description?: React.ReactNode;\n customImageUrl?: string;\n testId?: string;\n}\nexport declare const EmptyState: Flow.AbstractComponent;\nexport {};\n//# sourceMappingURL=EmptyState.d.ts.map" }, "story": { "path": "EmptyState.stories.tsx", "content": "import * as React from 'react';\n\nimport type {DataVariation} from 'src/utils/tokens';\nimport {getRandomDataVariation} from 'src/utils/tokens';\n\nimport {Button} from 'src/components/Button';\nimport type {EmptyStateProps} from 'src/components/EmptyState/EmptyState';\nimport {EmptyState} from 'src/components/EmptyState/EmptyState';\n\nimport css from 'src/components/EmptyState/EmptyState.stories.module.css';\n\n\nexport default {\n tags: ['autodocs'],\n title: 'Components/Empty State',\n component: EmptyState,\n argTypes: {\n classNames: {\n description: 'External classNames to be applied',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary:\n '{ wrapper?: string, image?: string, title?: string, description?: string, children?: string}',\n },\n },\n },\n children: {\n type: {optional: true},\n description:\n 'Custom component for Empty state. This is rendered below **image, title and description**. Use this to maybe show a button.',\n table: {\n type: {summary: 'React.Component'},\n },\n },\n imageVariant: {\n description: 'Image flavour of the Empty state',\n options: [\n 'calendar',\n 'data',\n 'file',\n 'message',\n 'upload',\n 'chart',\n 'analytics',\n 'voice',\n ],\n control: {\n type: 'select',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n title: {\n description: 'Title of the Empty State',\n table: {\n type: {summary: 'React.Node'},\n },\n },\n description: {\n description: 'Description of the Empty State',\n table: {\n type: {summary: 'React.Node'},\n },\n },\n customImageUrl: {\n description:\n 'Custom hero image. This would **override the imageVariant flavour**',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n testId: {\n description: 'Test ID for the component',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n },\n parameters: {\n docs: {\n subtitle: 'Generates a EmptyState component.',\n description: {\n component: `\n\\`\\`\\`js\nimport { EmptyState } from \"@spaced-out/ui-design-system/lib/components/EmptyState\";\n\\`\\`\\`\nEmpty State is a generic component that can come in handy to display content when there is no data/records available.\n\nIt accepts title, description, image and a custom component. Each of these are optional and you can mix and match to\nobtain the design that you want. classnames are also exposed to each of these entries for them to be easily customizable.\n `,\n },\n },\n storySource: {\n componentPath: '/src/components/EmptyState',\n },\n },\n};\n\nconst emptyText: DataVariation = getRandomDataVariation();\n\nexport const EmptyStateStory = (args: EmptyStateProps) => (\n
\n \n \n \n
\n);\n\nEmptyStateStory.args = {\n title: emptyText.title,\n description: emptyText.description,\n imageVariant: 'data',\n testId: 'empty-state-story',\n};\nEmptyStateStory.storyName = 'Empty State';\n" }, "css": { "path": "EmptyState.module.css", "content": "@value (colorTextSecondary) from '../../styles/variables/_color.css';\n@value (spaceMedium, spaceXSmall) from '../../styles/variables/_space.css';\n@value (sizeFluid, size140) from '../../styles/variables/_size.css';\n\n.wrapper {\n display: flex;\n width: sizeFluid;\n height: sizeFluid;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n padding: spaceMedium;\n}\n\n.image {\n max-width: size140;\n}\n\n.title {\n composes: subTitleMedium from '../../styles/typography.module.css';\n margin-bottom: spaceXSmall;\n}\n\n.description {\n composes: bodyMedium from '../../styles/typography.module.css';\n color: colorTextSecondary;\n margin-bottom: spaceMedium;\n}\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../components/EmptyState/EmptyState';\n//# sourceMappingURL=index.d.ts.map" }, "additional": { "EmptyImages/AnalyticsEmptyImage.d.ts": { "path": "EmptyImages/AnalyticsEmptyImage.d.ts", "content": "import * as React from 'react';\nexport declare const AnalyticsEmptyImage: () => React.JSX.Element;\n//# sourceMappingURL=AnalyticsEmptyImage.d.ts.map" }, "EmptyImages/CalendarEmptyImage.d.ts": { "path": "EmptyImages/CalendarEmptyImage.d.ts", "content": "import * as React from 'react';\nexport declare const CalendarEmptyImage: () => React.JSX.Element;\n//# sourceMappingURL=CalendarEmptyImage.d.ts.map" }, "EmptyImages/ChartEmptyImage.d.ts": { "path": "EmptyImages/ChartEmptyImage.d.ts", "content": "import * as React from 'react';\nexport declare const ChartEmptyImage: () => React.JSX.Element;\n//# sourceMappingURL=ChartEmptyImage.d.ts.map" }, "EmptyImages/DataEmptyImage.d.ts": { "path": "EmptyImages/DataEmptyImage.d.ts", "content": "import * as React from 'react';\nexport declare const DataEmptyImage: () => React.JSX.Element;\n//# sourceMappingURL=DataEmptyImage.d.ts.map" }, "EmptyImages/FileEmptyImage.d.ts": { "path": "EmptyImages/FileEmptyImage.d.ts", "content": "import * as React from 'react';\nexport declare const FileEmptyImage: () => React.JSX.Element;\n//# sourceMappingURL=FileEmptyImage.d.ts.map" }, "EmptyImages/MessageEmptyImage.d.ts": { "path": "EmptyImages/MessageEmptyImage.d.ts", "content": "import * as React from 'react';\nexport declare const MessageEmptyImage: () => React.JSX.Element;\n//# sourceMappingURL=MessageEmptyImage.d.ts.map" }, "EmptyImages/UploadEmptyImage.d.ts": { "path": "EmptyImages/UploadEmptyImage.d.ts", "content": "import * as React from 'react';\nexport declare const UploadEmptyImage: () => React.JSX.Element;\n//# sourceMappingURL=UploadEmptyImage.d.ts.map" }, "EmptyImages/VoiceEmptyImage.d.ts": { "path": "EmptyImages/VoiceEmptyImage.d.ts", "content": "import * as React from 'react';\nexport declare const VoiceEmptyImage: () => React.JSX.Element;\n//# sourceMappingURL=VoiceEmptyImage.d.ts.map" }, "EmptyImages/index.d.ts": { "path": "EmptyImages/index.d.ts", "content": "export * from '../../../components/EmptyState/EmptyImages/CalendarEmptyImage';\nexport * from '../../../components/EmptyState/EmptyImages/ChartEmptyImage';\nexport * from '../../../components/EmptyState/EmptyImages/DataEmptyImage';\nexport * from '../../../components/EmptyState/EmptyImages/FileEmptyImage';\nexport * from '../../../components/EmptyState/EmptyImages/MessageEmptyImage';\nexport * from '../../../components/EmptyState/EmptyImages/UploadEmptyImage';\nexport * from '../../../components/EmptyState/EmptyImages/AnalyticsEmptyImage';\nexport * from '../../../components/EmptyState/EmptyImages/VoiceEmptyImage';\n//# sourceMappingURL=index.d.ts.map" } } }, "allFiles": [ "EmptyImages/AnalyticsEmptyImage.tsx", "EmptyImages/CalendarEmptyImage.tsx", "EmptyImages/ChartEmptyImage.tsx", "EmptyImages/DataEmptyImage.tsx", "EmptyImages/FileEmptyImage.tsx", "EmptyImages/MessageEmptyImage.tsx", "EmptyImages/UploadEmptyImage.tsx", "EmptyImages/VoiceEmptyImage.tsx", "EmptyImages/index.ts", "EmptyState.module.css", "EmptyState.stories.module.css", "EmptyState.stories.tsx", "EmptyState.tsx", "index.ts" ] }, "ErrorMessage": { "name": "ErrorMessage", "path": "src/components/ErrorMessage", "files": { "main": { "path": "ErrorMessage.d.ts", "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\ntype ClassNames = Readonly<{\n wrapper?: string;\n image?: string;\n heading?: string;\n title?: string;\n description?: string;\n children?: string;\n}>;\nexport interface ErrorMessageProps {\n classNames?: ClassNames;\n children?: React.ReactNode;\n imageVariant?: 'unauthorized' | 'forbidden' | 'notFound' | 'serverError';\n title?: React.ReactNode;\n description?: React.ReactNode;\n heading?: React.ReactNode;\n customImageUrl?: string;\n testId?: string;\n}\nexport declare const ErrorMessage: Flow.AbstractComponent;\nexport {};\n//# sourceMappingURL=ErrorMessage.d.ts.map" }, "story": { "path": "ErrorMessage.stories.tsx", "content": "import * as React from 'react';\n\nimport type {DataVariation} from 'src/utils/tokens';\nimport {getRandomDataVariation} from 'src/utils/tokens';\n\nimport {Button} from 'src/components/Button';\nimport type {ErrorMessageProps} from 'src/components/ErrorMessage/ErrorMessage';\nimport {ErrorMessage} from 'src/components/ErrorMessage/ErrorMessage';\n\nimport css from 'src/components/ErrorMessage/ErrorMessage.stories.module.css';\n\n\nexport default {\n tags: ['autodocs'],\n title: 'Components/Error Message',\n component: ErrorMessage,\n argTypes: {\n classNames: {\n description: 'External classNames to be applied',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary:\n '{ wrapper?: string, image?: string, title?: string, description?: string, children?: string}',\n },\n },\n },\n children: {\n description:\n 'Custom component for Error Message. This is rendered below **image, title and description**. Use this to maybe show a button.',\n table: {\n type: {summary: 'React.Component'},\n },\n },\n imageVariant: {\n description: 'Image flavour of the Error Message',\n options: ['unauthorized', 'forbidden', 'notFound', 'serverError'],\n control: {\n type: 'select',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n heading: {\n description: 'Heading of the Error Message',\n table: {\n type: {summary: 'React.Node'},\n },\n },\n title: {\n description: 'Title of the Error Message',\n table: {\n type: {summary: 'React.Node'},\n },\n },\n description: {\n description: 'Description of the Error Message',\n table: {\n type: {summary: 'React.Node'},\n },\n },\n customImageUrl: {\n description:\n 'Custom hero image. This would **override the imageVariant flavour**',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n testId: {\n description: 'Test ID for the component',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n },\n parameters: {\n docs: {\n subtitle: 'Generates a ErrorMessage component.',\n description: {\n component: `\n\\`\\`\\`js\nimport { ErrorMessage } from \"@spaced-out/ui-design-system/lib/components/ErrorMessage\";\n\\`\\`\\`\nError Message is a generic component that can come in handy to display content when there is some error thrown from API.\n\nIt accepts heading, title, description, image and a custom component. Each of these are optional and you can mix and match to\nobtain the design that you want. classnames are also exposed to each of these entries for them to be easily customizable.\n `,\n },\n },\n storySource: {\n componentPath: '/src/components/ErrorMessage/ErrorMessage',\n },\n },\n};\n\nconst emptyText: DataVariation = getRandomDataVariation();\n\nexport const ErrorMessageStory = (args: ErrorMessageProps) => (\n
\n
\n \n \n \n
\n
\n);\n\nErrorMessageStory.args = {\n heading: '500',\n title: emptyText.title,\n description: emptyText.description,\n imageVariant: 'serverError',\n testId: 'error-message-story',\n};\nErrorMessageStory.storyName = 'Error Message';\n" }, "css": { "path": "ErrorMessage.module.css", "content": "@value (colorTextSecondary, colorTextClickable) from '../../styles/variables/_color.css';\n@value (spaceMedium, spaceXSmall, spaceSmall) from '../../styles/variables/_space.css';\n@value (sizeFluid, size140) from '../../styles/variables/_size.css';\n\n.wrapper {\n display: flex;\n width: sizeFluid;\n height: sizeFluid;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n padding: spaceMedium;\n}\n\n.image {\n max-width: size140;\n}\n\n.heading {\n composes: jumboMedium from '../../styles/typography.module.css';\n margin-bottom: spaceSmall;\n color: colorTextClickable;\n}\n\n.title {\n composes: subTitleMedium from '../../styles/typography.module.css';\n margin-bottom: spaceXSmall;\n}\n\n.description {\n composes: bodyMedium from '../../styles/typography.module.css';\n color: colorTextSecondary;\n margin-bottom: spaceMedium;\n}\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../components/ErrorMessage/ErrorMessage';\n//# sourceMappingURL=index.d.ts.map" }, "additional": { "ErrorImages/ForbiddenImage.d.ts": { "path": "ErrorImages/ForbiddenImage.d.ts", "content": "import * as React from 'react';\nexport declare const ForbiddenImage: () => React.JSX.Element;\n//# sourceMappingURL=ForbiddenImage.d.ts.map" }, "ErrorImages/NotFoundImage.d.ts": { "path": "ErrorImages/NotFoundImage.d.ts", "content": "import * as React from 'react';\nexport declare const NotFoundImage: () => React.JSX.Element;\n//# sourceMappingURL=NotFoundImage.d.ts.map" }, "ErrorImages/ServerErrorImage.d.ts": { "path": "ErrorImages/ServerErrorImage.d.ts", "content": "import * as React from 'react';\nexport declare const ServerErrorImage: () => React.JSX.Element;\n//# sourceMappingURL=ServerErrorImage.d.ts.map" }, "ErrorImages/UnauthorizedImage.d.ts": { "path": "ErrorImages/UnauthorizedImage.d.ts", "content": "import * as React from 'react';\nexport declare const UnauthorizedImage: () => React.JSX.Element;\n//# sourceMappingURL=UnauthorizedImage.d.ts.map" }, "ErrorImages/index.d.ts": { "path": "ErrorImages/index.d.ts", "content": "export * from '../../../components/ErrorMessage/ErrorImages/ForbiddenImage';\nexport * from '../../../components/ErrorMessage/ErrorImages/NotFoundImage';\nexport * from '../../../components/ErrorMessage/ErrorImages/ServerErrorImage';\nexport * from '../../../components/ErrorMessage/ErrorImages/UnauthorizedImage';\n//# sourceMappingURL=index.d.ts.map" } } }, "allFiles": [ "ErrorImages/ForbiddenImage.tsx", "ErrorImages/NotFoundImage.tsx", "ErrorImages/ServerErrorImage.tsx", "ErrorImages/UnauthorizedImage.tsx", "ErrorImages/index.ts", "ErrorMessage.module.css", "ErrorMessage.stories.module.css", "ErrorMessage.stories.tsx", "ErrorMessage.tsx", "index.ts" ] }, "FileUpload": { "name": "FileUpload", "path": "src/components/FileUpload", "files": { "main": { "path": "FileUpload.d.ts", "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\ntype ClassNames = Readonly<{\n wrapper?: string;\n instruction?: string;\n secondaryInstruction?: string;\n dropZone?: string;\n files?: string;\n}>;\nexport type FileProgress = number | 'indeterminate';\nexport interface FileObject {\n file: File;\n id: string;\n reject?: boolean;\n rejectReason?: string;\n progress?: FileProgress;\n success?: boolean;\n successMessage?: string;\n showReUpload?: boolean;\n [key: string]: unknown;\n}\nexport interface FileError {\n code: string;\n}\nexport interface FileRejection {\n errors: Array;\n file: File;\n}\nexport interface FileUploadRef {\n moveFileToProgress: (id: string, progress: FileProgress) => unknown;\n moveFileToSuccess: (id: string, successMessage?: string) => unknown;\n moveFileToReject: (id: string, rejectReason?: string) => unknown;\n setShowReUpload: (id: string, showReUpload?: boolean) => unknown;\n handleFileClear: (id: string) => unknown;\n validFiles: Array;\n rejectedFiles: Array;\n files: Array;\n}\nexport interface FileUploadBaseProps {\n maxFiles?: number;\n maxSize?: number;\n accept?: {\n [key: string]: string[];\n };\n disabled?: boolean;\n error?: boolean;\n onValidFilesDrop?: (acceptedFiles: Array) => unknown;\n onRejectedFilesDrop?: (fileRejections: Array) => unknown;\n onFileClear?: (id: string) => unknown;\n onClear?: () => unknown;\n}\nexport interface FileUploadProps extends Omit {\n classNames?: ClassNames;\n label?: React.ReactNode;\n instruction?: React.ReactNode;\n draggingInstruction?: React.ReactNode;\n secondaryInstruction?: React.ReactNode;\n required?: boolean;\n handleFileDeletionExternally?: boolean;\n onFileRefreshClick?: (file: FileObject) => unknown;\n testId?: string;\n}\nexport declare const FileUpload: Flow.AbstractComponent;\nexport {};\n//# sourceMappingURL=FileUpload.d.ts.map" }, "story": { "path": "FileUpload.stories.tsx", "content": "import * as React from 'react';\n\nimport {convertFileSize} from 'src/utils/helpers';\nimport {getRandomDataVariation} from 'src/utils/tokens';\n\nimport {BasicDialog} from 'src/components/Dialog';\nimport {EmptyState} from 'src/components/EmptyState';\nimport type {FileUploadProps} from 'src/components/FileUpload';\nimport type {\n FileObject,\n FileUploadRef,\n} from 'src/components/FileUpload/FileUpload';\nimport {FileUpload} from 'src/components/FileUpload/FileUpload';\nimport {Link} from 'src/components/Link';\nimport {BasicSingleCell, Table} from 'src/components/Table';\nimport {BodyMedium, SubTitleMedium} from 'src/components/Text';\nimport {Truncate} from 'src/components/Truncate';\n\nimport css from 'src/components/FileUpload/FileUpload.stories.module.css';\n\n\nexport default {\n tags: ['autodocs'],\n title: 'Components/File Upload/File Upload',\n component: FileUpload,\n argTypes: {\n classNames: {\n description: 'Provide an optional className to be applied',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary:\n '{ wrapper?: string, instruction?: string, secondaryInstruction?: string, dropZone?: string, files?: string }',\n },\n },\n },\n label: {\n description: 'The label for the File Uploader',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'React.Node'},\n defaultValue: {summary: ''},\n },\n },\n instruction: {\n description:\n 'The instruction for the File Uploader. This appears as the first line of the File Uploader',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'React.Node'},\n defaultValue: {summary: 'Drag & drop the file here or click to select'},\n },\n },\n draggingInstruction: {\n description:\n 'This gets activated when the user drags the file over the File Uploader. Instruction text gets replaced by draggingInstruction',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'React.Node'},\n defaultValue: {summary: 'Drop the file here to start uploading..'},\n },\n },\n secondaryInstruction: {\n description: `The secondary instruction for the File Uploader. This appears as the second line of the\n File Uploader. Use this to notify users of file type accepted, size accepted, etc.`,\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'React.Node'},\n defaultValue: {summary: ''},\n },\n },\n maxSize: {\n description:\n 'The maximum size of each file that can be uploaded. This is in bytes',\n control: {\n type: 'number',\n },\n table: {\n type: {summary: 'number'},\n },\n },\n accept: {\n description: `Set accepted file types. Checkout [MDN](https://developer.mozilla.org/en-US/docs/Web/API/window/showOpenFilePicker)\n types option for more information. Keep in mind that mime type determination is not reliable across platforms.\n CSV files, for example, are reported as text/plain under macOS but as application/vnd.ms-excel under Windows.\n In some cases there might not be a mime type set at all [GitHub](https://github.com/react-dropzone/react-dropzone/issues/276).`,\n control: {\n type: 'array',\n },\n table: {\n type: {summary: 'AcceptProps'},\n },\n },\n onValidFilesDrop: {\n description: `\nThe callback function that is called when the user selects or drop **valid file(s)**.\nOnly the currently dropped/selected files are passed as argument.\n `,\n action: 'on valid files drop or select',\n table: {\n type: {\n summary:\n 'onValidFilesDrop?: ( validFiles: Array) => mixed',\n },\n },\n },\n onRejectedFilesDrop: {\n description: `\nThe callback function that is called when the user selects or drop **invalid file(s)**.\nOnly the currently dropped/selected files are passed as argument.\n `,\n action: 'on rejected files drop or select',\n table: {\n type: {\n summary:\n 'onRejectedFilesDrop?: ( rejectedFiles: Array) => mixed',\n },\n },\n },\n handleFileDeletionExternally: {\n description: `If **true**, the component will not handle file deletion internally. This is useful when you want to\n handle file deletion externally. For example, you can use this prop to show a confirmation modal before deleting a file.`,\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n onFileClear: {\n description: `The callback function that is called when the user clears the file.`,\n action: 'file cleared',\n table: {\n type: {\n summary: '(id: string) => mixed',\n },\n },\n },\n onFileRefreshClick: {\n description: `The callback function that is called when the user clicks on the refresh icon.`,\n action: 'file Refreshed',\n table: {\n type: {\n summary: '(file: FileObject) => mixed',\n },\n },\n },\n disabled: {\n description: 'If **true**, the component is disabled',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n ref: {\n description: `File upload state management callbacks along with \\`validFiles\\`, \\`rejectedFiles\\` and \\`files\\` are\n exposed as \\`ref\\` which is a \\`React.Ref\\` object.`,\n table: {\n type: {summary: 'FileUploadRef'},\n },\n },\n maxFiles: {\n description: `Maximum accepted number of files The default value is 1 which corresponds to single file upload.\n You can also **set the value to 0 which means there is no limitation to how many files are accepted**.`,\n control: {\n type: 'number',\n },\n table: {\n type: {summary: 'number'},\n defaultValue: {summary: '1'},\n },\n },\n required: {\n description: 'if **true**, a red star would be added to the label',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n testId: {\n description: 'Test ID for the component',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n },\n parameters: {\n docs: {\n subtitle: 'Generates a FileUpload component.',\n source: {\n code: null,\n },\n description: {\n component: `\n\\`\\`\\`js\nimport { FileUpload } from \"@spaced-out/ui-design-system/lib/components/FileUpload\";\n\\`\\`\\`\nThe \\`FileUpload\\` component is a customizable file upload component which utilizes the \\`useFileUploadHook\\`.\nIt provides an intuitive and user-friendly interface for uploading files.\nThe component supports features such as drag and drop functionality, file validation, error handling, and file clearing.\n\nWhen files are dragged and dropped or selected using the file browser, the \\`FileUpload\\` component displays the file names along\nwith additional information such as success message, progress state and error message. It also provides an option to remove individual files.\n\nThe component supports various visual states, including a hover state when files are being dragged over the\ncomponent, an error state when invalid files are selected, and a disabled state when the component is not interactive.\n\nAdditionally, the \\`FileUpload\\` component allows customization through props, enabling you to specify the maximum\nfile size, accepted file types, callbacks for handling valid and rejected file(s) drop, and more.\n\nOn passing \\`handleFileDeletionExternally\\` as \\`true\\`, the component will not handle file deletion internally (Clicking the clear icon will not clear the file from the component).\nThis is useful when you want to handle file deletion externally.\nFor example, you can use this prop to show a confirmation modal before deleting a file or have custom logic/checks before deleting a file.\nYou will need to call \\`ref.current?.handleFileClear(id)\\` in your deletion logic to clear the file from the component.\n\n\nYou can access valid files, rejected files, and all files using the \\`ref\\` object passed to the \\`FileUpload\\` component. You can\nalso do several operations on a file using the functions exposed on the \\`ref\\`\n\n\\`\\`\\`js\n// Valid Files:\nref.current?.validFiles;\n\n// Rejected Files:\nref.current?.rejectedFiles;\n\n// All Files:\nref.current?.files;\n\n// Operations on a file:\n\n// Move file to progress state\nref.current?.moveFileToProgress(id, progress);\n\n// Move file to success state\nref.current?.moveFileToSuccess(id, successMessage);\n\n// Move file to reject state\nref.current?.moveFileToReject(id, rejectReason);\n\n// Show re-upload button\nref.current?.setShowReUpload(id, showReUpload);\n\n// Clear file(Use this in combination of handleFileDeletionExternally, when you want to handle deletion externally)\nref.current?.handleFileClear(id);\n\\`\\`\\`\n\nEach File object returned has these properties:\n\n\\`\\`\\`js\ntype FileObject = {\n file: File,\n id: string,\n reject?: boolean,\n rejectReason?: string,\n progress?: FileProgress,\n success?: boolean,\n successMessage?: string,\n showReUpload?: boolean,\n};\n\\`\\`\\`\n\nTo transition file state a bunch of functions are exposed as \\`ref\\` which is a \\`React.Ref\\` object.\n\n\\`\\`\\`js\n// File upload state management callbacks are exposed as \\`ref\\` which is a \\`React.Ref\\` object.\nexport type FileUploadRef = {\n moveFileToProgress: (id: string, progress: FileProgress) => mixed,\n moveFileToSuccess: (id: string, successMessage?: string) => mixed,\n moveFileToReject: (id: string, rejectReason?: string) => mixed,\n setShowReUpload: (id: string, showReUpload?: boolean) => mixed,\n handleFileClear: (id: string) => mixed,\n validFiles: Array,\n rejectedFiles: Array,\n files: Array,\n};\n\n// File upload Props\ntype FileUploadProps = {\n ...\n // File drop/select callbacks\n onValidFilesDrop?: (validFiles: Array) => mixed,\n onRejectedFilesDrop?: (rejectedFiles: Array) => mixed,\n\n // File clear callbacks\n onFileClear?: (id: string) => mixed,\n\n // File refresh callback\n onFileRefreshClick?: (file: FileObject) => mixed,\n\n ...\n};\n\\`\\`\\`\n\\`\\`\\`js\n// Usage:\n\nconst ref = React.useRef(null);\n\nconst mockState = (id: string) => {\n let progress = 0;\n const intervalId = setInterval(() => {\n progress += 5;\n if (progress >= 100) {\n ref.current?.moveFileToSuccess(id);\n clearInterval(intervalId);\n } else {\n ref.current?.moveFileToProgress(id, progress);\n }\n }, 100);\n};\n\\`\\`\\`\n\\`\\`\\`jsx\n {\n uploadedFiles.forEach((file) => {\n mockState(file.id);\n });\n }}\n/>\n\\`\\`\\`\n `,\n },\n },\n storySource: {\n componentPath: '/src/components/FileUpload/FileUpload',\n },\n },\n};\n\n/**\n * Renders a FileUpload component for uploading a single file.\n *\n * This example demonstrates how to use the FileUpload component with a single file upload.\n */\nexport const SingleFileStory = (args: FileUploadProps) => {\n const [files, setFiles] = React.useState([]);\n const ref = React.useRef(null);\n\n return (\n <>\n
\n
\n {\n setFiles(ref.current?.files);\n }}\n onRejectedFilesDrop={() => {\n setFiles(ref.current?.files);\n }}\n onFileClear={() => {\n setTimeout(() => {\n setFiles(ref.current?.files);\n });\n }}\n />\n
\n
\n
\n \n
\n \n );\n};\n\nSingleFileStory.args = {\n label: 'Upload a file(Only one file allowed)',\n secondaryInstruction: 'Types: .png, .jpg or .jpeg',\n maxFiles: 1,\n accept: {\n 'image/jpeg': ['.jpg', '.jpeg'],\n 'image/png': ['.png'],\n },\n testId: 'file-upload-single-story',\n};\n\n/**\n * Renders a FileUpload component for uploading multiple files.\n *\n * This example demonstrates how to use the FileUpload component with multiple file uploads.\n */\nexport const MultiFileStory = (args: FileUploadProps) => {\n const [files, setFiles] = React.useState([]);\n const ref = React.useRef(null);\n return (\n <>\n
\n
\n {\n setFiles(ref.current?.files);\n }}\n onRejectedFilesDrop={() => {\n setFiles(ref.current?.files);\n }}\n onFileClear={() => {\n setTimeout(() => {\n setFiles(ref.current?.files);\n });\n }}\n />\n
\n
\n
\n \n
\n \n );\n};\n\nMultiFileStory.args = {\n label: 'Upload multiple files',\n secondaryInstruction: 'Types: .png, .jpg or .jpeg',\n maxFiles: 5,\n accept: {\n 'image/jpeg': ['.jpg', '.jpeg'],\n 'image/png': ['.png'],\n },\n testId: 'file-upload-multi-story',\n};\n\n/**\n * Renders a FileUpload component for uploading multiple files.\n *\n * This example demonstrates how to use the FileUpload component with confirmation modal and handle deletion externally.\n */\nexport const WithDeletionConfirmationStory = (args: FileUploadProps) => {\n const [showConfirmation, setShowConfirmation] = React.useState(false);\n const [fileIdToDelete, setFileIdToDelete] = React.useState('');\n const [files, setFiles] = React.useState([]);\n const ref = React.useRef(null);\n return (\n <>\n
\n
\n {\n setFiles(ref.current?.files);\n }}\n handleFileDeletionExternally={true}\n onRejectedFilesDrop={() => {\n setFiles(ref.current?.files);\n }}\n onFileClear={(id) => {\n setFileIdToDelete(id);\n setShowConfirmation(true);\n }}\n />\n
\n
\n
\n \n
\n {\n setShowConfirmation(false);\n }}\n handleConfirm={() => {\n ref.current?.handleFileClear(fileIdToDelete);\n setTimeout(() => {\n setFiles(ref.current?.files);\n });\n setShowConfirmation(false);\n }}\n heading=\"Delete File\"\n onClose={() => {\n setShowConfirmation(false);\n }}\n semantic=\"danger\"\n />\n \n );\n};\n\nWithDeletionConfirmationStory.args = {\n label: 'Upload a file with deletion confirmation',\n secondaryInstruction: 'Types: .png, .jpg or .jpeg',\n maxFiles: 1,\n accept: {\n 'image/jpeg': ['.jpg', '.jpeg'],\n 'image/png': ['.png'],\n },\n testId: 'file-upload-deletion-confirmation-story',\n};\n\n/**\n * Renders a FileUpload component with progress state.\n *\n * This example demonstrates how to use the FileUpload component with progress state.\n */\nexport const WithProgressStory = (args: FileUploadProps) => {\n const [files, setFiles] = React.useState([]);\n const ref = React.useRef(null);\n\n const mockState = (id: string) => {\n let progress = 0;\n const intervalId = setInterval(() => {\n progress += 5;\n if (progress >= 105) {\n ref.current?.moveFileToSuccess(id);\n clearInterval(intervalId);\n\n setFiles(ref.current?.files);\n } else {\n ref.current?.moveFileToProgress(id, progress);\n }\n }, 100);\n };\n\n return (\n <>\n
\n
\n {\n uploadedFiles.forEach((file) => {\n mockState(file.id);\n });\n }}\n onRejectedFilesDrop={() => {\n setFiles(ref.current?.files);\n }}\n onFileClear={() => {\n setTimeout(() => {\n setFiles(ref.current?.files);\n });\n }}\n />\n
\n
\n
\n \n
\n \n );\n};\n\nWithProgressStory.args = {\n label: 'Upload a file with progress',\n secondaryInstruction: 'Types: .png, .jpg or .jpeg',\n maxFiles: 1,\n accept: {\n 'image/jpeg': ['.jpg', '.jpeg'],\n 'image/png': ['.png'],\n },\n testId: 'file-upload-progress-story',\n};\n\n/**\n * Renders a FileUpload component with indeterminate progress state.\n *\n * This example demonstrates how to use the FileUpload component with indeterminate progress state.\n */\nexport const WithIndeterminateProgressStory = (args: FileUploadProps) => {\n const [files, setFiles] = React.useState([]);\n const ref = React.useRef(null);\n\n const mockState = (id: string) => {\n ref.current?.moveFileToProgress(id, 'indeterminate');\n setTimeout(() => {\n ref.current?.moveFileToSuccess(id);\n setFiles(ref.current?.files);\n }, 5000);\n };\n\n return (\n <>\n
\n
\n {\n uploadedFiles.forEach((file) => {\n mockState(file.id);\n });\n }}\n onRejectedFilesDrop={() => {\n setFiles(ref.current?.files);\n }}\n onFileClear={() => {\n setTimeout(() => {\n setFiles(ref.current?.files);\n });\n }}\n />\n
\n
\n
\n \n
\n \n );\n};\n\nWithIndeterminateProgressStory.args = {\n label: 'Upload a file with indeterminate progress',\n secondaryInstruction: 'Types: .png, .jpg or .jpeg',\n maxFiles: 1,\n accept: {\n 'image/jpeg': ['.jpg', '.jpeg'],\n 'image/png': ['.png'],\n },\n testId: 'file-upload-indeterminate-progress-story',\n};\n\n/**\n * Renders a FileUpload component with custom error and success messages.\n *\n * This example demonstrates how to use the FileUpload component with custom error and success messages.\n */\nexport const WithCustomErrorMessagesStory = (args: FileUploadProps) => {\n const [files, setFiles] = React.useState([]);\n const ref = React.useRef(null);\n\n const mockState = (id: string, idx: number) => {\n let progress = 0;\n const intervalId = setInterval(() => {\n progress += 5;\n if (progress >= 105) {\n if (idx === 0) {\n ref.current?.moveFileToReject(\n id,\n 'File rejected: Your custom error message',\n );\n } else {\n ref.current?.moveFileToSuccess(id);\n }\n clearInterval(intervalId);\n\n setFiles(ref.current?.files);\n } else {\n ref.current?.moveFileToProgress(id, progress);\n }\n }, 100);\n };\n\n return (\n <>\n
\n
\n {\n uploadedFiles.forEach((file, idx) => {\n mockState(file.id, idx);\n });\n }}\n onRejectedFilesDrop={() => {\n setFiles(ref.current?.files);\n }}\n onFileClear={() => {\n setTimeout(() => {\n setFiles(ref.current?.files);\n });\n }}\n />\n
\n
\n
\n \n
\n \n );\n};\n\nWithCustomErrorMessagesStory.args = {\n label: 'Upload a file with custom error messages',\n secondaryInstruction: 'Types: .png, .jpg or .jpeg',\n maxFiles: 1,\n accept: {\n 'image/jpeg': ['.jpg', '.jpeg'],\n 'image/png': ['.png'],\n },\n testId: 'file-upload-custom-error-story',\n};\n\n/**\n * Renders a FileUpload component with max size validation.\n *\n * This example demonstrates how to use the FileUpload component with max size validation.\n */\nexport const WithMaxSizeValidationStory = (args: FileUploadProps) => {\n const [files, setFiles] = React.useState([]);\n const ref = React.useRef(null);\n\n const mockState = (id: string) => {\n let progress = 0;\n const intervalId = setInterval(() => {\n progress += 5;\n if (progress >= 105) {\n ref.current?.moveFileToSuccess(id);\n clearInterval(intervalId);\n\n setFiles(ref.current?.files);\n } else {\n ref.current?.moveFileToProgress(id, progress);\n }\n }, 100);\n };\n\n return (\n <>\n
\n
\n {\n uploadedFiles.forEach((file) => {\n mockState(file.id);\n });\n }}\n onRejectedFilesDrop={() => {\n setFiles(ref.current?.files);\n }}\n onFileClear={() => {\n setTimeout(() => {\n setFiles(ref.current?.files);\n });\n }}\n />\n
\n
\n
\n \n
\n \n );\n};\n\nWithMaxSizeValidationStory.args = {\n label: 'Upload a file with max size validation',\n secondaryInstruction: 'Types: .png, .jpg or .jpeg',\n maxFiles: 1,\n accept: {\n 'image/jpeg': ['.jpg', '.jpeg'],\n 'image/png': ['.png'],\n },\n testId: 'file-upload-max-size-story',\n};\n\n/**\n * Renders a FileUpload component with re upload icon when file state is moved to error.\n *\n * This example demonstrates how to use the FileUpload component with reupload.\n */\nexport const WithFileRefreshStory = (args: FileUploadProps) => {\n const ref = React.useRef(null);\n const [files, setFiles] = React.useState([]);\n\n const mockState = (id: string) => {\n let progress = 0;\n const intervalId = setInterval(() => {\n progress += 5;\n if (progress >= 105) {\n ref.current?.moveFileToSuccess(id);\n clearInterval(intervalId);\n\n setFiles(ref.current?.files);\n } else {\n ref.current?.moveFileToProgress(id, progress);\n }\n }, 100);\n };\n\n const mockReUpload = (id: string) => {\n ref.current?.setShowReUpload(id, true);\n setTimeout(() => {\n setFiles(ref.current?.files);\n });\n };\n\n return (\n <>\n
\n
\n {\n uploadedFiles.forEach((file) => {\n mockState(file.id);\n });\n }}\n onRejectedFilesDrop={(uploadedFiles) => {\n uploadedFiles.forEach((file) => {\n mockReUpload(file.id);\n });\n }}\n onFileRefreshClick={(file) => {\n mockState(file.id);\n }}\n onFileClear={() => {\n setTimeout(() => {\n setFiles(ref.current?.files);\n });\n }}\n />\n
\n
\n
\n \n
\n \n );\n};\n\nWithFileRefreshStory.args = {\n label: 'Upload a file with refresh functionality',\n secondaryInstruction: 'Types: .png, .jpg or .jpeg',\n maxFiles: 1,\n accept: {\n 'image/jpeg': ['.jpg', '.jpeg'],\n 'image/png': ['.png'],\n },\n testId: 'file-upload-refresh-story',\n};\n\ninterface FileUploadTableProps {\n files: Array;\n}\n\nconst emptyText = getRandomDataVariation();\n\nconst FileUploadData = ({files}: FileUploadTableProps) => (\n
\n \n Data Table(This is not a part of File Upload Component)\n \n \n
\n);\n\nconst DataTable = ({files}: {files: Array}) => (\n \n \n \n }\n headers={[\n {\n key: 'file',\n label: `File Name`,\n render: ({data}) => (\n \n \n {data.file.name}\n \n \n ),\n },\n {\n key: 'file',\n label: `File Type`,\n render: ({data}) => (\n \n \n {data.file.type}\n \n \n ),\n },\n {\n key: 'file',\n label: 'File Size',\n render: ({data, className}) => (\n \n {convertFileSize(data.file.size)}\n \n ),\n },\n {\n key: 'success',\n label: 'Is file Valid',\n render: ({data, className}) => (\n \n {data.success ? 'true' : 'false'}\n \n ),\n },\n {\n key: 'reject',\n label: 'Is File Rejected?',\n render: ({data, className}) => (\n \n {data.reject ? 'true' : 'false'}\n \n ),\n },\n {\n key: 'rejectReason',\n label: 'Rejection Reason',\n render: ({data, className}) => (\n \n {data.rejectReason || '-'}\n \n ),\n },\n {\n key: 'showReUpload',\n label: 'Show ReUpload',\n render: ({data, className}) => (\n \n {data.showReUpload ? 'true' : 'false'}\n \n ),\n },\n ]}\n />\n);\nSingleFileStory.storyName = 'Single File';\nMultiFileStory.storyName = 'Multi File';\nWithDeletionConfirmationStory.storyName = 'With Deletion Confirmation';\nWithProgressStory.storyName = 'With Progress';\nWithIndeterminateProgressStory.storyName = 'With Indeterminate Progress';\nWithCustomErrorMessagesStory.storyName = 'With Custom Error Messages';\nWithMaxSizeValidationStory.storyName = 'With Max Size Validation';\nWithFileRefreshStory.storyName = 'With File Refresh';\n" }, "css": { "path": "FileUpload.module.css", "content": "@value (\n colorTextSecondary,\n colorBackgroundPrimary,\n colorBackgroundTertiary,\n colorBorderTertiary,\n colorTextPrimary,\n colorTextTertiary,\n colorTextSuccess,\n colorTextDisabled,\n colorBorderPrimary,\n colorBorderSecondary,\n colorTextClickable,\n colorTextDanger,\n colorDangerLightest,\n colorInformationLightest,\n colorFocusPrimary\n) from '../../styles/variables/_color.css';\n\n@value (\n borderWidthNone,\n borderWidthPrimary,\n borderWidthTertiary,\n borderRadiusMedium\n) from '../../styles/variables/_border.css';\n\n@value (\n spaceXXSmall,\n spaceXSmall,\n spaceMedium,\n spaceLarge\n) from '../../styles/variables/_space.css';\n\n@value (\n size2,\n size18,\n size34\n size48,\n size50,\n size70,\n size125,\n size240,\n sizeFluid\n) from '../../styles/variables/_size.css';\n\n.wrapper {\n display: flex;\n flex-direction: column;\n width: sizeFluid;\n gap: spaceXSmall;\n}\n\n.dropzone {\n cursor: pointer;\n display: flex;\n flex-flow: column;\n gap: spaceXSmall;\n width: sizeFluid;\n padding: spaceLarge;\n justify-content: center;\n align-items: center;\n min-height: size125;\n border: borderWidthPrimary solid colorBorderPrimary;\n border-radius: borderRadiusMedium;\n outline: none;\n color: colorTextSecondary;\n background-color: colorBackgroundTertiary;\n}\n\n.dropzone:hover,\n.dragActive {\n border-color: colorBorderTertiary;\n background-color: colorBackgroundPrimary;\n}\n\n.dropzone:focus {\n background-color: colorBackgroundPrimary;\n border-color: colorTextClickable;\n box-shadow: borderWidthNone borderWidthNone borderWidthNone\n borderWidthTertiary colorFocusPrimary;\n}\n\n.dropzone.disabled {\n pointer-events: none;\n cursor: not-allowed;\n color: colorTextDisabled;\n border: borderWidthPrimary solid colorBorderPrimary;\n background-color: colorBackgroundPrimary;\n}\n\n.instruction {\n composes: buttonTextSmall from '../../styles/typography.module.css';\n color: inherit;\n text-decoration: underline;\n max-width: size125;\n text-align: center;\n}\n\n.secondaryInstruction {\n composes: bodySmall from '../../styles/typography.module.css';\n color: inherit;\n max-width: size240;\n text-align: center;\n}\n\n.files {\n display: flex;\n flex-flow: column;\n gap: spaceXSmall;\n}\n\n.file {\n display: flex;\n height: size50;\n padding: spaceXSmall;\n align-items: center;\n justify-content: space-between;\n gap: spaceXSmall;\n background-color: colorBackgroundPrimary;\n border-bottom: borderWidthPrimary solid colorBorderSecondary;\n}\n\n.fileInfo {\n display: flex;\n flex-flow: column;\n gap: spaceXSmall;\n width: sizeFluid;\n}\n\n.fileNameBlock {\n display: flex;\n composes: formLabelMedium from '../../styles/typography.module.css';\n color: colorTextPrimary;\n gap: spaceXXSmall;\n align-items: center;\n}\n\n.fileName {\n display: flex;\n color: inherit;\n}\n\n.fileError,\n.fileSuccess {\n composes: bodySmall from '../../styles/typography.module.css';\n margin-left: calc(size18 + spaceXXSmall);\n margin-top: calc(spaceXSmall * -1);\n}\n\n.fileError {\n color: colorTextDanger;\n}\n\n.fileSuccess {\n color: colorTextSuccess;\n}\n\n.icon {\n display: flex;\n justify-content: center;\n align-items: center;\n min-width: size18;\n min-height: size18;\n}\n\n.rightSection {\n display: flex;\n}\n\n.rightBlock {\n min-width: size34;\n min-height: size34;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.label {\n display: flex;\n gap: spaceXXSmall;\n composes: formLabelSmall from '../../styles/typography.module.css';\n color: colorTextSecondary;\n}\n\n.required {\n color: colorTextDanger;\n}\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../components/FileUpload/FileBlock';\nexport * from '../../components/FileUpload/FileUpload';\n//# sourceMappingURL=index.d.ts.map" }, "additional": { "FileBlock/FileBlock.d.ts": { "path": "FileBlock/FileBlock.d.ts", "content": "import type { Flow } from 'flow-to-typescript-codemod';\nimport type { FileObject } from '../../../components/FileUpload/FileUpload';\ntype ClassNames = Readonly<{\n wrapper?: string;\n}>;\nexport interface FileBlockProps {\n classNames?: ClassNames;\n fileObject: FileObject;\n onFileRefreshClick?: (file: FileObject) => unknown;\n handleFileClear?: (id: string) => unknown;\n showRemoveFile?: boolean;\n testId?: string;\n}\nexport declare const FileBlock: Flow.AbstractComponent;\nexport {};\n//# sourceMappingURL=FileBlock.d.ts.map" }, "FileBlock/index.d.ts": { "path": "FileBlock/index.d.ts", "content": "export * from '../../../components/FileUpload/FileBlock/FileBlock';\n//# sourceMappingURL=index.d.ts.map" } } }, "allFiles": [ "FileBlock/FileBlock.stories.tsx", "FileBlock/FileBlock.tsx", "FileBlock/index.ts", "FileUpload.module.css", "FileUpload.stories.module.css", "FileUpload.stories.tsx", "FileUpload.tsx", "index.ts" ] }, "FilterButtonOverlay": { "name": "FilterButtonOverlay", "path": "src/components/FilterButtonOverlay", "files": { "main": { "path": "FilterButtonOverlay.d.ts", "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nimport type { ClickAwayRefType } from '../../utils';\nimport type { ButtonProps, ButtonSize } from '../../components/Button';\nimport type { AnchorType, Strategy } from '../../components/ButtonDropdown';\nimport type { ElevationType } from '../../components/Tooltip';\ntype ClassNames = Readonly<{\n wrapper?: string;\n overlayContainer?: string;\n}>;\nexport type FilterButtonOverlaySizeTypes = 'medium' | 'small';\nexport type NewButtonProps = Flow.Diff;\nexport interface FilterButtonOverlayProps extends Omit {\n classNames?: ClassNames;\n children: React.ReactNode;\n positionStrategy?: Strategy;\n anchorPosition?: AnchorType;\n clickAwayRef?: React.RefObject;\n isFluid?: boolean;\n size?: FilterButtonOverlaySizeTypes;\n buttonLabel?: React.ReactNode;\n buttonSize?: ButtonSize;\n elevation?: ElevationType;\n buttonIsFluid?: boolean;\n testId?: string;\n}\nexport declare const FilterButtonOverlay: Flow.AbstractComponent;\nexport {};\n//# sourceMappingURL=FilterButtonOverlay.d.ts.map" }, "story": { "path": "FilterButtonOverlay.stories.tsx", "content": "import * as React from 'react';\nimport {useCallback, useRef} from 'react';\n\nimport type {ClickAwayRefType} from 'src/utils/click-away';\n\nimport {\n BUTTON_ACTION_TYPE,\n BUTTON_SIZE,\n BUTTON_TYPES,\n} from 'src/components/Button';\nimport {\n ANCHOR_POSITION_TYPE,\n STRATEGY_TYPE,\n} from 'src/components/ButtonDropdown';\nimport {SimpleDropdown} from 'src/components/Dropdown';\nimport type {FilterButtonOverlayProps} from 'src/components/FilterButtonOverlay';\nimport {FilterButtonOverlay} from 'src/components/FilterButtonOverlay/FilterButtonOverlay';\nimport {ELEVATION_TYPES} from 'src/components/Tooltip';\n\nimport css from 'src/components/FilterButtonOverlay/FilterButtonOverlay.stories.module.css';\n\n\nconst anchorPositionOptions: Array = [\n ...Object.values(ANCHOR_POSITION_TYPE),\n];\nconst positionStrategyOptions: Array = [\n ...Object.values(STRATEGY_TYPE),\n];\nconst actionTypeOptions: Array = [\n ...Object.values(BUTTON_ACTION_TYPE),\n];\nconst buttonTypeOptions: Array = [...Object.values(BUTTON_TYPES)];\nconst buttonSizeOptions: Array = [...Object.values(BUTTON_SIZE)];\nconst elevationOptions: Array = [...Object.values(ELEVATION_TYPES)];\n\nexport default {\n tags: ['autodocs'],\n title: 'Components/Filter Button Overlay',\n component: FilterButtonOverlay,\n argTypes: {\n onClick: {\n description:\n '**onClick** handler that is applied to the root `\n \n \n \n \n \n \n \n);\n\nFocusManagerStory.args = {\n initialFocus: 2,\n testId: 'focus-manager-story',\n};\nFocusManagerStory.storyName = 'Focus Manager';\n" }, "css": { "path": "FocusManager.module.css", "content": ".wrapper {\n display: flex;\n}\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../components/FocusManager/FocusManager';\n//# sourceMappingURL=index.d.ts.map" }, "additional": {} }, "allFiles": [ "FocusManager.module.css", "FocusManager.stories.module.css", "FocusManager.stories.tsx", "FocusManager.tsx", "index.ts" ] }, "FocusManagerWithArrowKeyNavigation": { "name": "FocusManagerWithArrowKeyNavigation", "path": "src/components/FocusManagerWithArrowKeyNavigation", "files": { "main": { "path": "FocusManagerWithArrowKeyNavigation.d.ts", "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nimport type { FocusManagerProps } from '../../components/FocusManager';\nexport interface SkipElementFromNavigationProps {\n children: React.ReactNode;\n className?: string;\n testId?: string;\n}\nexport declare const SkipElementFromNavigation: Flow.AbstractComponent;\nexport interface FocusManagerWithArrowKeyNavigationProps extends Omit {\n cols?: number;\n orientation?: 'horizontal' | 'vertical';\n focusItemOnOpen?: 'auto' | boolean;\n loop?: boolean;\n listReference?: {\n current: Array;\n };\n testId?: string;\n}\nexport declare const FocusManagerWithArrowKeyNavigation: (props: FocusManagerWithArrowKeyNavigationProps) => React.JSX.Element;\n//# sourceMappingURL=FocusManagerWithArrowKeyNavigation.d.ts.map" }, "story": { "path": "FocusManagerWithArrowKeyNavigation.stories.tsx", "content": "import * as React from 'react';\n\nimport {Button, UnstyledButton} from 'src/components/Button';\nimport type {FocusManagerWithArrowKeyNavigationProps} from 'src/components/FocusManagerWithArrowKeyNavigation';\nimport {\n FocusManagerWithArrowKeyNavigation,\n SkipElementFromNavigation,\n} from 'src/components/FocusManagerWithArrowKeyNavigation/FocusManagerWithArrowKeyNavigation';\nimport {SubTitleExtraSmall} from 'src/components/Text';\n\nimport css from 'src/components/FocusManagerWithArrowKeyNavigation/FocusManagerWithArrowKeyNavigation.stories.module.css';\n\n\nexport default {\n tags: ['autodocs'],\n title: 'Utils/Focus Manager With Arrow Key Navigation',\n component: FocusManagerWithArrowKeyNavigation,\n argTypes: {\n classNames: {\n description: 'Provide an optional className to be applied to the wrapper',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary: '{wrapper?: string}',\n },\n },\n },\n children: {\n description:\n 'The children to be rendered inside the FocusManager And provides list and grid navigation',\n table: {\n type: {summary: 'React.Node'},\n },\n },\n initialFocus: {\n description:\n 'Which element to initially focus. Can be a number (tabbable index as specified by the order)',\n control: {\n type: 'number',\n },\n table: {\n type: {summary: 'number'},\n defaultValue: {summary: '-1'},\n },\n },\n returnFocus: {\n description:\n 'Determines if focus should be returned to the reference element (or if that is not available, the previously focused element). This prop is ignored if the floating element lost focus.',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'true'},\n },\n },\n modal: {\n description:\n 'Determines if focus is “modal”, meaning focus is fully trapped inside the floating element and outside content cannot be accessed. This includes screen reader virtual cursors.',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'true'},\n },\n },\n guards: {\n description:\n 'Determines if the focus guards are rendered. If not, focus can escape into the address bar/console/browser UI, like in native dialogs.',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'true'},\n },\n },\n cols: {\n description:\n 'For a list it should be 1. For grid, you can have cols set according to your use-case',\n control: {\n type: 'number',\n },\n table: {\n type: {summary: 'number'},\n defaultValue: {summary: '1'},\n },\n },\n orientation: {\n options: ['vertical', 'horizontal'],\n description:\n 'For list, orientation should be vertical. For grid, the orientation should be set to horizontal',\n control: {\n type: 'select',\n },\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: 'vertical'},\n },\n },\n loop: {\n description:\n 'Determines whether to restart from the beginning or end if the user has navigated to the boundary of the list and grid(in vertical direction only).',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n listReference: {\n description:\n 'User can provide custom list of elements to navigate between by using listReference. It accepts a list of ref nodes',\n },\n focusItemOnOpen: {\n description:\n 'Determines whether to focus the item upon opening the floating element. \"auto\" infers what to do based on the input type (keyboard vs. pointer), while a boolean value will force the value. \\n **Note**: By default value is \"auto\" string.',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'auto'},\n },\n },\n testId: {\n description: 'Test ID for the component',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n },\n parameters: {\n docs: {\n subtitle:\n 'Generates a FocusManager component with list or grid navigation.',\n description: {\n component: `\n\\`\\`\\`js\nimport { FocusManagerWithArrowKeyNavigation, SkipElementFromNavigation } from \"@spaced-out/ui-design-system/lib/components/FocusManagerWithArrowKeyNavigation\";\n\\`\\`\\`\nProvides flexible non-modal focus management for an element and also provides navigation(list or grid) with arrow keys for the children elements passed. \\n **Note:** If there are elements you want to skip in navigation, you should wrap the element using **SkipElementFromNavigation**, which will not be indexed. In case of Grid, if you have any empty slots, calling component should take care of it. For practical implementation of both cases check examples below.\n `,\n },\n },\n storySource: {\n componentPath:\n '/src/components/FocusManagerWithArrowKeyNavigation/FocusManagerWithArrowKeyNavigation',\n },\n },\n};\n\nexport const FocusManagerWithGridNavigationStory = (\n args: FocusManagerWithArrowKeyNavigationProps,\n) => {\n const onClick = (e: React.SyntheticEvent) => {\n console.error('checking pass through', e);\n };\n const numbers = [\n 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,\n ];\n const alphabets = [\n 'A',\n 'B',\n 'C',\n 'D',\n 'E',\n 'F',\n 'G',\n 'H',\n 'I',\n 'J',\n 'K',\n 'L',\n 'M',\n 'N',\n 'O',\n ];\n const smallCase = [\n 'a',\n 'b',\n 'c',\n 'd',\n 'e',\n 'f',\n 'g',\n 'h',\n 'i',\n 'j',\n 'k',\n 'l',\n 'm',\n 'n',\n 'o',\n ];\n return (\n \n \n {'Numbers'}\n \n {numbers.map((number) => (\n \n {number}\n \n ))}\n \n {'Alphabets'}\n \n {alphabets.map((alphabet) => (\n \n {alphabet}\n \n ))}\n \n {'SmallCase'}\n \n {smallCase.map((alphabet) => (\n \n {alphabet}\n \n ))}\n \n );\n};\n\nFocusManagerWithGridNavigationStory.args = {\n loop: true,\n focusItemOnOpen: 'auto',\n testId: 'focus-manager-grid-navigation-story',\n};\n\nexport const FocusManagerWithGridNavigationHavingEmptyElementsStory = () => {\n const onClick = (e: React.SyntheticEvent) => {\n console.error('checking pass through', e);\n };\n const numbers = [\n 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18,\n ];\n const alphabets = [\n 'A',\n 'B',\n 'C',\n 'D',\n 'E',\n 'F',\n 'G',\n 'H',\n 'I',\n 'J',\n 'K',\n 'L',\n ];\n const smallCase = [\n 'a',\n 'b',\n 'c',\n 'd',\n 'e',\n 'f',\n 'g',\n 'h',\n 'i',\n 'j',\n 'k',\n 'l',\n 'm',\n 'n',\n 'o',\n ];\n return (\n \n \n {'Numbers'}\n \n {numbers.map((number) => (\n \n {number}\n \n ))}\n {/* adding two empty slots for consistent navigation in grid */}\n \n \n \n {'Alphabets'}\n \n {alphabets.map((alphabet) => (\n \n {alphabet}\n \n ))}\n {/* adding three empty slots for consistent navigation in grid*/}\n \n \n \n \n {'SmallCase'}\n \n {smallCase.map((alphabet) => (\n \n {alphabet}\n \n ))}\n \n );\n};\n\nexport const FocusManagerWithListNavigationStory = () => {\n const onClick = (e: React.SyntheticEvent) => {\n console.error('checking pass through', e);\n };\n const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];\n return (\n \n {numbers.map((number) => (\n \n {number}\n \n ))}\n \n );\n};\n\nexport const FocusManagerWithGridNavigationUsingListReferenceStory = (\n args: FocusManagerWithArrowKeyNavigationProps,\n) => {\n const onClick = (e: React.SyntheticEvent) => {\n console.error('checking pass through', e);\n };\n const numbers = [\n 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,\n ];\n const alphabets = [\n 'A',\n 'B',\n 'C',\n 'D',\n 'E',\n 'F',\n 'G',\n 'H',\n 'I',\n 'J',\n 'K',\n 'L',\n ];\n const smallCase = [\n 'a',\n 'b',\n 'c',\n 'd',\n 'e',\n 'f',\n 'g',\n 'h',\n 'i',\n 'j',\n 'k',\n 'l',\n 'm',\n ];\n const listRef = React.useRef>([]);\n return (\n \n \n {'Numbers'}\n \n {numbers.map((number) => (\n {\n if (node) {\n listRef.current.push(node);\n }\n }}\n >\n {number}\n \n ))}\n\n \n {'Alphabets'}\n \n\n {alphabets.map((alphabet) => (\n {\n if (node) {\n listRef.current.push(node);\n }\n }}\n >\n {alphabet}\n \n ))}\n {/* adding three empty slots for consistent navigation in grid*/}\n {\n if (node) {\n listRef.current.push(node);\n }\n }}\n >\n {\n if (node) {\n listRef.current.push(node);\n }\n }}\n >\n {\n if (node) {\n listRef.current.push(node);\n }\n }}\n >\n \n {'SmallCase'}\n \n {smallCase.map((alphabet) => (\n {\n if (node) {\n listRef.current.push(node);\n }\n }}\n >\n {alphabet}\n \n ))}\n {/* adding three empty slots for consistent navigation in grid*/}\n {\n if (node) {\n listRef.current.push(node);\n }\n }}\n >\n {\n if (node) {\n listRef.current.push(node);\n }\n }}\n >\n \n );\n};\n\nFocusManagerWithGridNavigationUsingListReferenceStory.args = {\n loop: true,\n focusItemOnOpen: 'auto',\n self: true,\n passListReference: true,\n testId: 'focus-manager-grid-navigation-list-reference-story',\n};\nFocusManagerWithGridNavigationStory.storyName =\n 'Focus Manager With Grid Navigation';\nFocusManagerWithGridNavigationHavingEmptyElementsStory.storyName =\n 'Focus Manager With Grid Navigation Having Empty Elements';\nFocusManagerWithListNavigationStory.storyName =\n 'Focus Manager With List Navigation';\nFocusManagerWithGridNavigationUsingListReferenceStory.storyName =\n 'Focus Manager With Grid Navigation Using List Reference';\n" }, "css": { "path": "FocusManagerWithArrowKeyNavigation.module.css", "content": ".wrapper {\n display: flex;\n}\n\n.skipElementWrapper {\n display: flex;\n}\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../components/FocusManagerWithArrowKeyNavigation/FocusManagerWithArrowKeyNavigation';\n//# sourceMappingURL=index.d.ts.map" }, "additional": {} }, "allFiles": [ "FocusManagerWithArrowKeyNavigation.module.css", "FocusManagerWithArrowKeyNavigation.stories.module.css", "FocusManagerWithArrowKeyNavigation.stories.tsx", "FocusManagerWithArrowKeyNavigation.tsx", "index.ts" ] }, "FormTitleWrapper": { "name": "FormTitleWrapper", "path": "src/components/FormTitleWrapper", "files": { "main": { "path": "FormTitleWrapper.d.ts", "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nimport type { ColorTypes } from '../../types/typography';\nimport type { IconSize, IconType } from '../../components/Icon';\ntype ClassNames = Readonly<{\n wrapper?: string;\n title?: string;\n rightSlot?: string;\n}>;\nexport interface FormTitleWrapperProps {\n classNames?: ClassNames;\n iconType?: IconType;\n iconName?: string;\n iconSize?: IconSize;\n iconColor?: ColorTypes;\n title: React.ReactNode;\n rightSlot?: React.ReactNode;\n testId?: string;\n}\nexport declare const FormTitleWrapper: Flow.AbstractComponent;\nexport {};\n//# sourceMappingURL=FormTitleWrapper.d.ts.map" }, "story": { "path": "FormTitleWrapper.stories.tsx", "content": "import * as React from 'react';\n\nimport type {FormTitleWrapperProps} from 'src/components/FormTitleWrapper';\nimport {FormTitleWrapper} from 'src/components/FormTitleWrapper/FormTitleWrapper';\nimport {CloseIcon} from 'src/components/Icon';\nimport {Input} from 'src/components/Input';\nimport {Link} from 'src/components/Link';\n\nimport css from 'src/components/FormTitleWrapper/FormTitleWrapper.stories.module.css';\n\n\nexport default {\n tags: ['autodocs'],\n title: 'Form Components/Form Title Wrapper',\n component: FormTitleWrapper,\n argTypes: {\n classNames: {\n description: 'Provide an optional className to be applied to the wrapper',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary: '{wrapper?: string, title?: string, rightSlot?: string}',\n },\n },\n },\n title: {\n description: 'The title to be displayed',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary: 'React.Node',\n },\n },\n },\n iconName: {\n description: 'The name of the icon to be displayed',\n control: {\n type: 'text',\n },\n table: {\n type: {\n summary: 'string',\n },\n },\n },\n iconType: {\n description: 'The type of icon to be displayed',\n control: {\n type: 'text',\n },\n table: {\n type: {\n summary: 'IconType',\n },\n defaultValue: {summary: 'regular'},\n },\n },\n iconSize: {\n description: 'The size of the icon to be displayed',\n control: {\n type: 'text',\n },\n table: {\n type: {\n summary: 'IconSize',\n },\n defaultValue: {summary: 'small'},\n },\n },\n iconColor: {\n description: 'The color of the icon to be displayed',\n control: {\n type: 'text',\n },\n table: {\n type: {\n summary: 'ColorTypes',\n },\n defaultValue: {summary: 'primary'},\n },\n },\n rightSlot: {\n description: 'The right slot to be displayed',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary: 'React.Node',\n },\n },\n },\n testId: {\n description: 'Test ID for the component',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n },\n parameters: {\n docs: {\n subtitle: 'Generates a FormTitleWrapper component.',\n description: {\n component: `\n\\`\\`\\`js\nimport { FormTitleWrapper } from \"@spaced-out/ui-design-system/lib/components/FormTitleWrapper\";\n\\`\\`\\`\nA simple Form Group utility to be used in forms to group\nrelated fields together.\nThis adds a title to the group of fields and an\noptional icon to the left of the title.\nThe right slot can be used to add any additional\nactions or buttons to the right of the title.\n\n**Usage: **\n\n\\`\\`\\`jsx\n\n\\`\\`\\`\n `,\n },\n },\n storySource: {\n componentPath: '/src/components/FormTitleWrapper/FormTitleWrapper',\n },\n },\n};\n\nexport const WithTitleStory = (args: FormTitleWrapperProps) => (\n
\n
\n \n
\n
\n \n \n \n
\n
\n);\n\nWithTitleStory.args = {\n classNames: {wrapper: ''},\n iconName: 'signature',\n title: 'Basic Details',\n testId: 'form-title-wrapper-with-title-story',\n};\n\nexport const WithTitleAndRightSlotStory = (args: FormTitleWrapperProps) => (\n
\n
\n \n
\n
\n \n \n \n Action\n \n
\n }\n >\n \n \n
\n \n);\n\nWithTitleAndRightSlotStory.args = {\n classNames: {wrapper: ''},\n iconName: 'signature',\n title: 'Section Title',\n testId: 'form-title-wrapper-with-title-and-right-slot-story',\n};\nWithTitleStory.storyName = 'With Title';\nWithTitleAndRightSlotStory.storyName = 'With Title And Right Slot';\n" }, "css": { "path": "FormTitleWrapper.module.css", "content": "@value (colorFillPrimary) from '../../styles/variables/_color.css';\n@value (sizeFluid) from '../../styles/variables/_size.css';\n@value (spaceSmall, spaceXSmall) from '../../styles/variables/_space.css';\n\n.container {\n display: flex;\n composes: borderTopPrimary from '../../styles/border.module.css';\n justify-content: space-between;\n align-items: center;\n width: sizeFluid;\n padding-top: spaceSmall;\n padding-bottom: spaceSmall;\n}\n\n.leftSection {\n display: flex;\n align-items: center;\n gap: spaceXSmall;\n}\n\n.componentHousing {\n display: flex;\n composes: subTitleSmall from '../../styles/typography.module.css';\n}\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../components/FormTitleWrapper/FormTitleWrapper';\n//# sourceMappingURL=index.d.ts.map" }, "additional": {} }, "allFiles": [ "FormTitleWrapper.module.css", "FormTitleWrapper.stories.module.css", "FormTitleWrapper.stories.tsx", "FormTitleWrapper.tsx", "index.ts" ] }, "Grid": { "name": "Grid", "path": "src/components/Grid", "files": { "main": { "path": "Grid.d.ts", "content": "import * as React from 'react';\nexport interface RowProps {\n className?: string;\n children?: React.ReactNode;\n span?: number;\n offset?: number;\n gridType?: 'small' | 'medium' | 'large' | 'autoFill' | 'autoFit';\n repeatTracks?: string;\n testId?: string;\n}\nexport declare const Row: ({ className, children, gridType, repeatTracks, testId, }: RowProps) => React.JSX.Element;\nexport interface ColProps {\n className?: string;\n children?: React.ReactNode;\n span?: number;\n offset?: number;\n gridColumnStart?: number | string;\n gridColumnEnd?: number | string;\n testId?: string;\n}\nexport declare const Col: ({ className, children, gridColumnStart, gridColumnEnd, testId, }: ColProps) => React.JSX.Element;\n//# sourceMappingURL=Grid.d.ts.map" }, "story": null, "css": { "path": "Grid.module.css", "content": "@value (\n spaceNone,\n spaceMedium,\n spaceLarge\n) from '../../styles/variables/_space.css';\n\n.gridRow {\n --grid-repeat-count: 12;\n --repeat-tracks: 1fr;\n display: grid !important;\n grid-template-columns: repeat(var(--grid-repeat-count), var(--repeat-tracks));\n gap: spaceMedium;\n padding: spaceNone spaceLarge;\n grid-auto-flow: row;\n grid-auto-columns: 1fr;\n grid-column-gap: spaceMedium;\n grid-row-gap: spaceMedium;\n grid-auto-rows: auto;\n box-sizing: border-box;\n}\n\n.gridColumn {\n --grid-column-start: auto;\n --grid-column-end: span 1;\n display: flex;\n align-items: center;\n grid-column: var(--grid-column-start) / var(--grid-column-end);\n}\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../components/Grid/Grid';\n//# sourceMappingURL=index.d.ts.map" }, "additional": {} }, "allFiles": [ "Col.stories.tsx", "Grid.module.css", "Grid.stories.module.css", "Grid.tsx", "GridPatterns.stories.module.css", "GridPatterns.stories.tsx", "Row.stories.tsx", "Tablist.layout.stories.module.css", "Tablist.layout.stories.tsx", "index.ts" ] }, "Icon": { "name": "Icon", "path": "src/components/Icon", "files": { "main": { "path": "Icon.d.ts", "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nimport type { ColorTypes } from '../../types/typography';\nexport declare const ICON_TYPE: Readonly<{\n regular: \"regular\";\n solid: \"solid\";\n duotone: \"duotone\";\n brands: \"brands\";\n}>;\nexport declare const ICON_SIZE: Readonly<{\n small: \"small\";\n medium: \"medium\";\n large: \"large\";\n}>;\nexport type IconSize = keyof typeof ICON_SIZE;\nexport type IconType = keyof typeof ICON_TYPE;\nexport interface IconProps {\n type?: IconType;\n name: string;\n size?: IconSize;\n color?: ColorTypes;\n className?: string;\n onClick?: React.MouseEventHandler;\n ariaLabel?: string;\n swapOpacity?: boolean;\n style?: {\n [key: string]: string;\n };\n testId?: string;\n}\nexport declare const Icon: Flow.AbstractComponent;\n//# sourceMappingURL=Icon.d.ts.map" }, "story": { "path": "Icon.stories.tsx", "content": "import * as React from 'react';\n\nimport {\n colorIconPrimary,\n colorIconSecondary,\n} from 'src/styles/variables/_color';\nimport {TEXT_COLORS} from 'src/types/typography';\n\nimport type {\n ClickableIconProps,\n CloseIconProps,\n IconProps,\n} from 'src/components/Icon';\nimport {ClickableIcon, CloseIcon, Icon} from 'src/components/Icon';\nimport {ICON_DOCS} from 'src/components/Icon/Icon.docs';\nimport {Tooltip} from 'src/components/Tooltip';\n\nimport css from 'src/components/Icon/Icon.stories.module.css';\n\n\nexport default {\n tags: ['autodocs'],\n title: 'Components/Icon',\n component: Icon,\n ...ICON_DOCS,\n};\n\nexport const IconStory = (args: IconProps) => ;\n\nIconStory.args = {\n type: 'regular',\n name: 'face-party',\n size: 'medium',\n color: TEXT_COLORS.primary,\n testId: 'icon-story',\n};\n\nexport const IconWithTooltipStory = (args: IconProps) => (\n
\n \n \n \n
\n);\n\nIconWithTooltipStory.args = {\n type: 'regular',\n name: 'face-party',\n size: 'medium',\n color: TEXT_COLORS.primary,\n testId: 'icon-with-tooltip-story',\n};\n\nexport const ClickableIconStory = (args: ClickableIconProps) => (\n \n);\n\nClickableIconStory.args = {\n type: 'regular',\n name: 'face-party',\n size: 'medium',\n color: TEXT_COLORS.primary,\n ariaLabel: 'Icon Button',\n testId: 'clickable-icon-story',\n};\n\nexport const CloseIconStory = (args: CloseIconProps) => (\n \n);\n\nCloseIconStory.args = {\n type: 'regular',\n size: 'medium',\n color: TEXT_COLORS.primary,\n ariaLabel: 'Close Icon',\n testId: 'close-icon-story',\n};\n\nexport const DuotoneIconStory = (args: IconProps) => ;\n\nDuotoneIconStory.args = {\n type: 'duotone',\n name: 'house',\n size: 'medium',\n color: TEXT_COLORS.primary,\n swapOpacity: true,\n style: {\n '--fa-primary-color': colorIconPrimary,\n '--fa-secondary-color': colorIconSecondary,\n '--fa-primary-opacity': '1.0',\n '--fa-secondary-opacity': '1.0',\n },\n testId: 'duotone-icon-story',\n};\nIconStory.storyName = 'Icon';\nIconWithTooltipStory.storyName = 'Icon With Tooltip';\nClickableIconStory.storyName = 'Clickable Icon';\nCloseIconStory.storyName = 'Close Icon';\nDuotoneIconStory.storyName = 'Duotone Icon';\n" }, "css": { "path": "Icon.module.css", "content": "@value (\n colorInformation,\n colorSuccess,\n colorWarning,\n colorDanger,\n colorNeutral,\n colorTextPrimary,\n colorTextSecondary,\n colorTextTertiary,\n colorTextDisabled,\n colorTextClickable,\n colorTextInversePrimary,\n colorTextInverseSecondary,\n colorTextFavorite\n) from '../../styles/variables/_color.css';\n\n.primary {\n color: colorTextPrimary;\n}\n\n.secondary {\n color: colorTextSecondary;\n}\n\n.tertiary {\n color: colorTextTertiary;\n}\n\n.disabled {\n color: colorTextDisabled;\n}\n\n.clickable {\n color: colorTextClickable;\n}\n\n.information {\n color: colorInformation;\n}\n\n.success {\n color: colorSuccess;\n}\n\n.warning {\n color: colorWarning;\n}\n\n.danger {\n color: colorDanger;\n}\n\n.neutral {\n color: colorNeutral;\n}\n\n.inversePrimary {\n color: colorTextInversePrimary;\n}\n\n.inverseSecondary {\n color: colorTextInverseSecondary;\n}\n\n.favorite {\n color: colorTextFavorite;\n}\n\n.inherit {\n color: inherit;\n}\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../components/Icon/ClickableIcon';\nexport * from '../../components/Icon/Icon';\nexport * from '../../components/Icon/SemanticIcon';\n//# sourceMappingURL=index.d.ts.map" }, "additional": { "ClickableIcon.d.ts": { "path": "ClickableIcon.d.ts", "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nimport type { ColorTypes } from '../../types/typography';\nimport type { IconProps, IconSize, IconType } from '../../components/Icon';\ntype ClassNames = Readonly<{\n icon?: string;\n button?: string;\n}>;\nexport interface ClickableIconProps extends Omit {\n disabled?: boolean;\n classNames?: ClassNames;\n onClick?: React.MouseEventHandler;\n testId?: string;\n}\nexport declare const ClickableIcon: Flow.AbstractComponent;\nexport interface CloseIconProps {\n size?: IconSize;\n type?: IconType;\n color?: ColorTypes;\n onClick?: React.MouseEventHandler;\n className?: string;\n ariaLabel?: string;\n disabled?: boolean;\n classNames?: ClassNames;\n testId?: string;\n}\nexport declare const CloseIcon: Flow.AbstractComponent;\nexport {};\n//# sourceMappingURL=ClickableIcon.d.ts.map" }, "Icon.docs.d.ts": { "path": "Icon.docs.d.ts", "content": "export declare const ICON_DOCS: {\n readonly argTypes: {\n readonly type: {\n readonly description: \"Type represents 5 unique icon styles :- Solid, Regular, Light, Thin, Duotone\";\n readonly options: readonly [\"regular\", \"solid\", \"duotone\", \"brands\"];\n readonly control: {\n readonly type: \"select\";\n };\n readonly table: {\n readonly type: {\n readonly summary: \"string\";\n };\n readonly defaultValue: {\n readonly summary: \"regular\";\n };\n };\n };\n readonly name: {\n readonly description: \"Icon Name represents name of icon as supported by fontawesome\";\n readonly type: {\n readonly required: true;\n };\n readonly table: {\n readonly type: {\n readonly summary: \"string\";\n };\n readonly defaultValue: {\n readonly summary: \"face-party\";\n };\n };\n };\n readonly color: {\n readonly description: \"Same set of colors as supported in text\";\n readonly options: unknown[];\n readonly control: {\n readonly type: \"select\";\n };\n readonly table: {\n readonly type: {\n readonly summary: \"string\";\n };\n readonly defaultValue: {\n readonly summary: \"primary\";\n };\n };\n };\n readonly size: {\n readonly description: \"Icon supports three size variants namely small and medium. `small` < `medium` < `large`\";\n readonly options: unknown[];\n readonly control: {\n readonly type: \"select\";\n };\n readonly table: {\n readonly type: {\n readonly summary: \"string\";\n };\n readonly defaultValue: {\n readonly summary: \"medium\";\n };\n };\n };\n readonly swapOpacity: {\n readonly name: \"swapOpacity\";\n readonly description: \"Swap the default opacity of each layer in a duotone icon.\";\n readonly options: readonly [false, true];\n readonly control: \"boolean\";\n readonly table: {\n readonly type: {\n readonly summary: \"boolean\";\n };\n readonly defaultValue: {\n readonly summary: false;\n };\n };\n };\n readonly className: {\n readonly description: \"External className to be applied on container\";\n readonly control: {\n readonly type: \"text\";\n };\n readonly table: {\n readonly type: {\n readonly summary: \"string\";\n };\n };\n };\n readonly onClick: {\n readonly description: \"onClick handler\";\n readonly action: \"clicked\";\n readonly table: {\n readonly type: {\n readonly summary: \"(SyntheticEvent) => mixed\";\n };\n };\n };\n readonly disabled: {\n readonly description: \"If **true**, the clickable icon is disabled\";\n readonly control: {\n readonly type: \"boolean\";\n };\n readonly table: {\n readonly type: {\n readonly summary: \"boolean\";\n };\n readonly defaultValue: {\n readonly summary: \"false\";\n };\n };\n };\n readonly ariaLabel: {\n readonly control: {\n readonly type: \"text\";\n };\n readonly description: \"**aria-label** should be added where `ClickableIcon` and `CloseIcon` is used. This would avoid accessibility violations in screen readers\";\n readonly table: {\n readonly type: {\n readonly summary: \"string\";\n };\n };\n };\n readonly testId: {\n readonly description: \"Test ID for the component\";\n readonly control: {\n readonly type: \"text\";\n };\n readonly table: {\n readonly type: {\n readonly summary: \"string\";\n };\n };\n };\n };\n readonly parameters: {\n readonly docs: {\n readonly subtitle: \"Generates a Icon component\";\n readonly description: {\n readonly component: \"\\n```js\\nimport {\\n Icon,\\n ClickableIcon,\\n CloseIcon,\\n SemanticIcon\\n} from \\\"@spaced-out/ui-design-system/lib/components/Icon\\\";\\n```\\nIcon component uses fontawesome icon internally.\\nThe name prop has be to consistent with one used in fontawesome.\\n \";\n };\n };\n readonly storySource: {\n readonly componentPath: \"/src/components/Icon/Icon\";\n };\n };\n};\n//# sourceMappingURL=Icon.docs.d.ts.map" }, "SemanticIcon.d.ts": { "path": "SemanticIcon.d.ts", "content": "import * as React from 'react';\nimport type { AlertSemanticType } from '../../types/common';\nimport type { IconProps } from '../../components/Icon/Icon';\ntype ClassNames = Readonly<{\n wrapper?: string;\n icon?: string;\n}>;\nexport interface SemanticIconProps extends Omit {\n classNames?: ClassNames;\n semantic?: AlertSemanticType;\n disabled?: boolean;\n testId?: string;\n}\nexport declare const SemanticIcon: ({ semantic, classNames, size, testId, ...iconProps }: SemanticIconProps) => React.JSX.Element;\nexport {};\n//# sourceMappingURL=SemanticIcon.d.ts.map" } } }, "allFiles": [ "ClickableIcon.module.css", "ClickableIcon.tsx", "Icon.docs.ts", "Icon.module.css", "Icon.stories.module.css", "Icon.stories.tsx", "Icon.tsx", "SemanticIcon.module.css", "SemanticIcon.stories.tsx", "SemanticIcon.tsx", "index.ts" ] }, "InContextAlert": { "name": "InContextAlert", "path": "src/components/InContextAlert", "files": { "main": { "path": "InContextAlert.d.ts", "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nimport type { AlertSemanticType } from '../../types/common';\nimport type { ColorTypes } from '../../types/typography';\nimport type { IconType } from '../../components/Icon';\ntype ClassNames = Readonly<{\n wrapper?: string;\n alertText?: string;\n actionContainer?: string;\n icon?: string;\n contentContainer?: string;\n}>;\ntype InContextAlertBaseProps = {\n classNames?: ClassNames;\n testId?: string;\n} & ({\n dismissable?: true;\n onCloseClick?: (e: React.SyntheticEvent) => unknown;\n selfDismiss?: boolean;\n} | {\n dismissable?: false;\n onCloseClick?: never;\n selfDismiss?: never;\n}) & {\n children?: string;\n actionText?: string;\n onAction?: React.MouseEventHandler;\n actionTextColor?: ColorTypes;\n};\nexport interface InContextAlertProps extends Omit {\n semantic?: AlertSemanticType;\n leftIconName?: string;\n leftIconType?: IconType;\n disableAction?: boolean;\n}\nexport declare const AlertIcon: ({ semantic, leftIconName, leftIconType, iconClassName, testId, }: {\n semantic: AlertSemanticType;\n leftIconName: string;\n leftIconType?: IconType;\n iconClassName?: string;\n testId?: string;\n}) => React.JSX.Element;\nexport declare const InContextAlert: Flow.AbstractComponent;\nexport {};\n//# sourceMappingURL=InContextAlert.d.ts.map" }, "story": { "path": "InContextAlert.stories.tsx", "content": "import * as React from 'react';\n\nimport {ALERT_SEMANTIC} from 'src/types/common';\nimport {TEXT_COLORS} from 'src/types/typography';\n\nimport type {InContextAlertProps} from 'src/components/InContextAlert/InContextAlert';\nimport {InContextAlert} from 'src/components/InContextAlert/InContextAlert';\n\nimport css from 'src/components/InContextAlert/InContextAlert.stories.module.css';\n\n\nconst semanticOptions: Array = [...Object.values(ALERT_SEMANTIC)];\nconst colorOptions: Array = [...Object.values(TEXT_COLORS)];\n\nexport default {\n tags: ['autodocs'],\n title: 'Components/In-Context Alert',\n argTypes: {\n actionText: {\n name: 'actionText',\n description: 'Action text to be displayed on **right** of Alert',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n onAction: {\n name: 'onAction',\n action: 'Action Click',\n description: 'Callback function for action text click',\n type: {summary: '(SyntheticEvent) => mixed'},\n },\n actionTextColor: {\n options: colorOptions,\n name: 'actionTextColor',\n description: 'Color of the action text',\n control: {\n type: 'select',\n },\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: 'primary'},\n },\n },\n semantic: {\n options: semanticOptions,\n description:\n 'Semantic type of In-Context Alert. It will have different Icon and background color for different semantic type',\n control: {\n type: 'select',\n },\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: ALERT_SEMANTIC.neutral},\n },\n },\n onCloseClick: {\n name: 'onCloseClick',\n action: 'Close Click',\n description: 'Callback function for dismissable alert',\n type: {summary: '(SyntheticEvent) => mixed'},\n },\n dismissable: {\n description: 'Close Icon will appear in right side in case it is true',\n name: 'dismissable',\n options: [false, true],\n control: 'boolean',\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: false},\n },\n },\n disableAction: {\n description: 'When true, the action link will be disabled',\n name: 'disableAction',\n options: [false, true],\n control: 'boolean',\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: false},\n },\n },\n selfDismiss: {\n description: `This prop is valid only in case dismissable is true.\n It handles whether the dismissal should be handled by the component or it will just pass callback onclick of closeIcon and dismissal will be handled externally`,\n name: 'selfDismiss',\n options: [false, true],\n control: 'boolean',\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: false},\n },\n },\n leftIconName: {\n name: 'leftIconName',\n control: {\n type: 'text',\n },\n description: 'Custom left icon. This overrides the default semantic icon',\n table: {\n type: {summary: 'string'},\n },\n },\n leftIconType: {\n description:\n 'Type represents 4 unique icon styles :- Solid, Regular, Duotone and Brands',\n options: ['regular', 'solid', 'duotone', 'brands'],\n control: {type: 'select'},\n table: {\n type: {summary: 'string'},\n defaultValue: {summary: 'regular'},\n },\n },\n children: {\n description: 'Pass the alert message text as children',\n table: {\n type: {summary: 'string'},\n },\n },\n classNames: {\n description:\n 'Provide an optional className to be applied to the wrapper, alertText',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary:\n '{wrapper?: string, alertText?: string, actionContainer?: string, icon?: string}',\n },\n },\n },\n testId: {\n description: 'Test ID for the component',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n },\n parameters: {\n docs: {\n subtitle: 'Generates a In-Context Alert component',\n description: {\n component: `\n\\`\\`\\`js\nimport { InContextAlert } from \"@spaced-out/ui-design-system/lib/components/InContextAlert\";\n\\`\\`\\`\nUse In-Context Alert component to show alert message of different semantics like - success, warning etc. It will take width of the container\nand will show only two lines of text. Post that it will get truncated. As there is no way for user to see the truncated message, it is recommended\nto use it for messages up to two lines only or add a tooltip along with it for showcasing complete message.\n `,\n },\n },\n storySource: {\n componentPath: '/src/components/InContextAlert/InContextAlert',\n },\n },\n};\n\nexport const DefaultStory = (args: InContextAlertProps) => (\n
\n \n
\n);\n\nDefaultStory.args = {\n children:\n 'The quick brown fox jumps over the lazy dog is an English-language pangram—a sentence that contains all the letters of the alphabet. The phrase is commonly used for touch-typing practice, testing typewriters and computer keyboards, displaying examples of fonts, and other applications involving text where the use of all letters in the alphabet is desired.',\n semantic: 'neutral',\n leftIconName: 'envelope',\n testId: 'in-context-alert-default-story',\n};\n\nexport const DismissableStory = (args: InContextAlertProps) => (\n
\n \n
\n);\n\nDismissableStory.args = {\n children:\n 'The quick brown fox jumps over the lazy dog is an English-language pangram—a sentence that contains all the letters of the alphabet. The phrase is commonly used for touch-typing practice, testing typewriters and computer keyboards, displaying examples of fonts, and other applications involving text where the use of all letters in the alphabet is desired.',\n semantic: 'neutral',\n dismissable: true,\n selfDismiss: false,\n leftIconName: 'house',\n testId: 'in-context-alert-dismissable-story',\n};\n\nexport const ActionableStory = (args: InContextAlertProps) => (\n
\n \n
\n);\n\nActionableStory.args = {\n children: 'Message could not be delivered',\n semantic: 'danger',\n actionText: 'Resend',\n actionTextColor: 'clickable',\n testId: 'in-context-alert-actionable-story',\n};\nDefaultStory.storyName = 'Default';\nDismissableStory.storyName = 'Dismissable';\nActionableStory.storyName = 'Actionable';\n" }, "css": { "path": "InContextAlert.module.css", "content": "@value (borderRadiusXSmall) from '../../styles/variables/_border.css';\n@value (colorFillPrimary,\n colorTextPrimary,\n colorNeutralLight,\n colorNeutralLightest,\n colorSuccessLight,\n colorSuccessLightest,\n colorInformationLight,\n colorInformationLightest,\n colorWarningLight,\n colorWarningLightest,\n colorDangerLight,\n colorDangerLightest\n) from '../../styles/variables/_color.css';\n\n@value (\n spaceXSmall,\n spaceSmall\n) from '../../styles/variables/_space.css';\n\n@value (\n sizeFluid\n) from '../../styles/variables/_size.css';\n\n@value (\n borderWidthPrimary\n) from '../../styles/variables/_border.css';\n\n.alertContainer {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: spaceXSmall;\n gap: spaceXSmall;\n border-radius: borderRadiusXSmall;\n width: sizeFluid;\n word-break: normal;\n border-width: borderWidthPrimary;\n border-style: solid;\n}\n\n.neutral {\n background-color: colorNeutralLightest;\n border-color: colorNeutralLight;\n}\n\n.success {\n background-color: colorSuccessLightest;\n border-color: colorSuccessLight;\n}\n\n.information {\n background-color: colorInformationLightest;\n border-color: colorInformationLight;\n}\n\n.warning {\n background-color: colorWarningLightest;\n border-color: colorWarningLight;\n}\n\n.danger {\n background-color: colorDangerLightest;\n border-color: colorDangerLight;\n}\n\n.closeIcon {\n margin-left: auto;\n}\n\n.actionContainer {\n display: flex;\n margin-left: auto;\n align-items: center;\n gap: spaceSmall;\n}\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../components/InContextAlert/InContextAlert';\n//# sourceMappingURL=index.d.ts.map" }, "additional": {} }, "allFiles": [ "InContextAlert.module.css", "InContextAlert.stories.module.css", "InContextAlert.stories.tsx", "InContextAlert.tsx", "index.ts" ] }, "InContextAlertWithMultipleActions": { "name": "InContextAlertWithMultipleActions", "path": "src/components/InContextAlertWithMultipleActions", "files": { "main": { "path": "InContextAlertWithMultipleActions.d.ts", "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nimport type { ColorTypes } from '../../types/typography';\nimport type { InContextAlertProps } from '../../components/InContextAlert';\nexport interface InContextAlertWithMultipleActionsProps extends Omit {\n inline?: boolean;\n secondaryActionText?: string;\n onSecondaryAction?: React.MouseEventHandler;\n secondaryActionTextColor?: ColorTypes;\n testId?: string;\n}\nexport declare const InContextAlertWithMultipleActions: Flow.AbstractComponent;\n//# sourceMappingURL=InContextAlertWithMultipleActions.d.ts.map" }, "story": { "path": "InContextAlertWithMultipleActions.stories.tsx", "content": "import * as React from 'react';\n\nimport {ALERT_SEMANTIC} from 'src/types/common';\nimport {TEXT_COLORS} from 'src/types/typography';\n\nimport type {InContextAlertWithMultipleActionsProps} from 'src/components/InContextAlertWithMultipleActions/InContextAlertWithMultipleActions';\nimport {InContextAlertWithMultipleActions} from 'src/components/InContextAlertWithMultipleActions/InContextAlertWithMultipleActions';\n\nimport css from 'src/components/InContextAlertWithMultipleActions/InContextAlertWithMultipleActions.stories.module.css';\n\n\nconst semanticOptions: Array = [...Object.values(ALERT_SEMANTIC)];\nconst colorOptions: Array = [...Object.values(TEXT_COLORS)];\n\nexport default {\n tags: ['autodocs'],\n title: 'Components/In-Context Alert With Multiple Actions',\n argTypes: {\n actionText: {\n name: 'actionText',\n description:\n 'Action text to be displayed on right of Alert or at the bottom based on **inline** field',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n onAction: {\n name: 'onAction',\n action: 'Action Click',\n description: 'Callback function for action text click',\n type: {summary: '(SyntheticEvent) => mixed'},\n },\n actionTextColor: {\n options: colorOptions,\n name: 'actionTextColor',\n description: 'Color of the action text',\n control: {\n type: 'select',\n },\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: 'primary'},\n },\n },\n secondaryActionText: {\n name: 'secondaryActionText',\n description:\n 'Secondary action text to be displayed on right of Alert or at the bottom based on **inline** field',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n secondaryActionTextColor: {\n options: colorOptions,\n name: 'secondaryActionTextColor',\n description: 'Color of the secondary action text',\n control: {\n type: 'select',\n },\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: 'primary'},\n },\n },\n onSecondaryAction: {\n name: 'onSecondaryAction',\n description: 'Callback function for secondary action text click',\n type: {summary: '(SyntheticEvent) => mixed'},\n },\n semantic: {\n options: semanticOptions,\n description:\n 'Semantic type of In-Context Alert. It will have different Icon and background color for different semantic type',\n control: {\n type: 'select',\n },\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: ALERT_SEMANTIC.neutral},\n },\n },\n onCloseClick: {\n name: 'onCloseClick',\n action: 'Close Click',\n description: 'Callback function for dismissable alert',\n type: {summary: '(SyntheticEvent) => mixed'},\n },\n dismissable: {\n description: 'Close Icon will appear in right side in case it is true',\n name: 'dismissable',\n options: [false, true],\n control: 'boolean',\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: false},\n },\n },\n selfDismiss: {\n description: `This prop is valid only in case dismissable is true.\n It handles whether the dismissal should be handled by the component or it will just pass callback onclick of closeIcon and dismissal will be handled externally`,\n name: 'selfDismiss',\n options: [false, true],\n control: 'boolean',\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: false},\n },\n },\n inline: {\n description:\n 'If true, actions will be displayed in **right**. If false, actions will be displayed at the **bottom**.',\n name: 'inline',\n options: [false, true],\n control: 'boolean',\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: false},\n },\n },\n leftIconName: {\n name: 'leftIconName',\n control: {\n type: 'text',\n },\n description: 'Custom left icon. This overrides the default semantic icon',\n table: {\n type: {summary: 'string'},\n },\n },\n leftIconType: {\n description:\n 'Type represents 4 unique icon styles :- Solid, Regular, Duotone and Brands',\n options: ['regular', 'solid', 'duotone', 'brands'],\n control: {type: 'select'},\n table: {\n type: {summary: 'string'},\n defaultValue: {summary: 'regular'},\n },\n },\n children: {\n description: 'Pass the alert message text as children',\n table: {\n type: {summary: 'string'},\n },\n },\n classNames: {\n description:\n 'Provide an optional className to be applied to the wrapper, alertText, actionContainer, icon, contentContainer',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary:\n '{wrapper?: string, alertText?: string, actionContainer?: string, icon?: string}',\n },\n },\n },\n testId: {\n description: 'Test ID for the component',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n },\n parameters: {\n docs: {\n subtitle: 'Generates a In-Context Alert With Multiple Actions component',\n description: {\n component: `\n\\`\\`\\`js\nimport { InContextAlertWithMultipleActions } from \"@spaced-out/ui-design-system/lib/components/InContextAlertWithMultipleActions\";\n\\`\\`\\`\nUse In-Context Alert With Multiple Actions component to show alert message of different semantics like - success, warning etc (Similar to In context alert).\nAdditionally this component shows actions buttons inline or at the bottom. There are 2 action buttons. And there is no truncation of text.\n `,\n },\n },\n storySource: {\n componentPath:\n '/src/components/InContextAlertWithMultipleActions/InContextAlertWithMultipleActions',\n },\n },\n};\n\nexport const DefaultStory = (args: InContextAlertWithMultipleActionsProps) => (\n
\n \n
\n);\n\nDefaultStory.args = {\n children:\n 'The quick brown fox jumps over the lazy dog is an English-language pangram—a sentence that contains all the letters of the alphabet. The phrase is commonly used for touch-typing practice, testing typewriters and computer keyboards, displaying examples of fonts, and other applications involving text where the use of all letters in the alphabet is desired.',\n semantic: 'neutral',\n leftIconName: 'envelope',\n testId: 'in-context-alert-multiple-actions-default-story',\n};\n\nexport const DismissableStory = (\n args: InContextAlertWithMultipleActionsProps,\n) => (\n
\n \n
\n);\n\nDismissableStory.args = {\n children:\n 'The quick brown fox jumps over the lazy dog is an English-language pangram—a sentence that contains all the letters of the alphabet. The phrase is commonly used for touch-typing practice, testing typewriters and computer keyboards, displaying examples of fonts, and other applications involving text where the use of all letters in the alphabet is desired.',\n semantic: 'neutral',\n dismissable: true,\n selfDismiss: false,\n leftIconName: 'house',\n testId: 'in-context-alert-multiple-actions-dismissable-story',\n};\n\nexport const ActionableStory = (\n args: InContextAlertWithMultipleActionsProps,\n) => (\n
\n \n
\n);\n\nActionableStory.args = {\n children: 'Message could not be delivered',\n semantic: 'danger',\n actionText: 'Resend',\n testId: 'in-context-alert-multiple-actions-actionable-story',\n};\n\nexport const SecondaryActionStory = (\n args: InContextAlertWithMultipleActionsProps,\n) => (\n
\n \n
\n);\n\nSecondaryActionStory.args = {\n children: 'Message could not be delivered.',\n semantic: 'danger',\n actionText: 'Resend',\n dismissable: true,\n secondaryActionText: 'View',\n testId: 'in-context-alert-multiple-actions-secondary-action-story',\n};\n\nexport const SecondaryWithWrapActionStory = (\n args: InContextAlertWithMultipleActionsProps,\n) => (\n
\n \n
\n);\n\nSecondaryWithWrapActionStory.args = {\n children:\n 'The quick brown fox jumps over the lazy dog is an English-language pangram—a sentence that contains all the letters of the alphabet. The phrase is commonly used for touch-typing practice, testing typewriters and computer keyboards, displaying examples of fonts, and other applications involving text where the use of all letters in the alphabet is desired.',\n semantic: 'neutral',\n actionText: 'Resend',\n dismissable: true,\n secondaryActionText: 'View',\n testId: 'in-context-alert-multiple-actions-secondary-wrap-story',\n};\nDefaultStory.storyName = 'Default';\nDismissableStory.storyName = 'Dismissable';\nActionableStory.storyName = 'Actionable';\nSecondaryActionStory.storyName = 'Secondary Action';\nSecondaryWithWrapActionStory.storyName = 'Secondary With Wrap Action';\n" }, "css": { "path": "InContextAlertWithMultipleActions.module.css", "content": "@value (borderRadiusXSmall) from '../../styles/variables/_border.css';\n@value (colorNeutralLight,\n colorNeutralLightest,\n colorSuccessLight,\n colorSuccessLightest,\n colorInformationLight,\n colorInformationLightest,\n colorWarningLight,\n colorWarningLightest,\n colorDangerLight,\n colorDangerLightest\n) from '../../styles/variables/_color.css';\n\n@value (\n spaceXSmall,\n spaceXXSmall\n) from '../../styles/variables/_space.css';\n\n@value (\n sizeFluid\n) from '../../styles/variables/_size.css';\n\n@value (\n borderWidthPrimary\n) from '../../styles/variables/_border.css';\n\n.alertContainer {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n padding: spaceXSmall;\n gap: spaceXSmall;\n border-radius: borderRadiusXSmall;\n width: sizeFluid;\n word-break: normal;\n border-width: borderWidthPrimary;\n border-style: solid;\n}\n\n.neutral {\n background-color: colorNeutralLightest;\n border-color: colorNeutralLight;\n}\n\n.success {\n background-color: colorSuccessLightest;\n border-color: colorSuccessLight;\n}\n\n.information {\n background-color: colorInformationLightest;\n border-color: colorInformationLight;\n}\n\n.warning {\n background-color: colorWarningLightest;\n border-color: colorWarningLight;\n}\n\n.danger {\n background-color: colorDangerLightest;\n border-color: colorDangerLight;\n}\n\n.closeIcon {\n margin-left: auto;\n}\n\n.contentContainer {\n display: flex;\n width: sizeFluid;\n justify-content: space-between;\n align-items: flex-start;\n}\n\n.contentContainerRow {\n flex-direction: row;\n gap: spaceXSmall;\n}\n\n.contentContainerColumn {\n flex-direction: column;\n gap: spaceXXSmall;\n}\n\n.actionContainer {\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n gap: spaceXSmall;\n}\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../components/InContextAlertWithMultipleActions/InContextAlertWithMultipleActions';\n//# sourceMappingURL=index.d.ts.map" }, "additional": {} }, "allFiles": [ "InContextAlertWithMultipleActions.module.css", "InContextAlertWithMultipleActions.stories.module.css", "InContextAlertWithMultipleActions.stories.tsx", "InContextAlertWithMultipleActions.tsx", "index.ts" ] }, "InfinitePagination": { "name": "InfinitePagination", "path": "src/components/InfinitePagination", "files": { "main": { "path": "InfinitePagination.d.ts", "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nimport type { GenericObject } from '../../components/Table';\ntype ClassNames = Readonly<{\n wrapper?: string;\n}>;\nexport type InfinitePaginationProps = {\n items: Array;\n width: string;\n threshold?: number;\n classNames?: ClassNames;\n renderItem: (item: GenericObject, index: number) => React.ReactNode;\n getItemKey?: (item: GenericObject, index: number) => string | number;\n hasNextPage: boolean;\n loadMoreItems: () => Promise;\n testId?: string;\n} & ({\n itemSize: (index: number) => number;\n isVariableSizeList: true;\n} | {\n itemSize: number;\n isVariableSizeList?: false;\n});\nexport declare const InfinitePagination: Flow.AbstractComponent;\nexport {};\n//# sourceMappingURL=InfinitePagination.d.ts.map" }, "story": { "path": "InfinitePagination.stories.tsx", "content": "import * as React from 'react';\n\nimport {spaceFluid} from 'src/styles/variables/_space';\n\nimport {Card, CardTitle} from 'src/components/Card';\nimport type {InfinitePaginationProps} from 'src/components/InfinitePagination/InfinitePagination';\nimport {InfinitePagination} from 'src/components/InfinitePagination/InfinitePagination';\nimport type {GenericObject} from 'src/components/Table';\n\nimport css from 'src/components/InfinitePagination/InfinitePagination.stories.module.css';\n\n// Type definitions\ninterface ListItem {\n id: number;\n title: string;\n description: string;\n [key: string]: unknown;\n}\n\nexport default {\n tags: ['autodocs'],\n title: 'Layout/Infinite Pagination',\n component: InfinitePagination,\n argTypes: {\n items: {\n description: 'The array of data items to render in the list',\n control: {type: 'object'},\n table: {\n type: {summary: 'Array'},\n },\n },\n width: {\n description: 'Width of the list',\n control: {type: 'text'},\n table: {\n type: {summary: 'string'},\n defaultValue: {summary: 'spaceFluid'},\n },\n },\n threshold: {\n description:\n 'Distance in pixels from the bottom to trigger loading more items',\n control: {type: 'number'},\n table: {\n type: {summary: 'number'},\n defaultValue: {summary: 200},\n },\n },\n classNames: {\n description: 'Provide an optional className to be applied to the wrapper',\n control: {type: 'object'},\n table: {\n type: {summary: '{wrapper?: string}'},\n },\n },\n renderItem: {\n description: 'Function to render a single item',\n control: false,\n table: {\n type: {summary: '(item: GenericObject, index: number) => React.Node'},\n },\n },\n getItemKey: {\n description: 'Optional function to generate a key for each item',\n control: false,\n table: {\n type: {\n summary: '(item: GenericObject, index: number) => string | number',\n },\n },\n },\n hasNextPage: {\n description: 'Boolean to determine if there are more items to load',\n control: {type: 'boolean'},\n table: {\n type: {summary: 'boolean'},\n },\n },\n loadMoreItems: {\n description: 'Callback function to load more items',\n control: false,\n table: {\n type: {summary: '() => Promise'},\n },\n },\n itemSize: {\n description:\n 'Either a number or a function returning the height of each item',\n control: false,\n table: {\n type: {\n summary: 'number | (index: number) => number',\n },\n },\n },\n isVariableSizeList: {\n description: 'Determines whether the list has variable item sizes',\n control: {type: 'boolean'},\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: false},\n },\n },\n testId: {\n description: 'Test ID for the component',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n },\n parameters: {\n docs: {\n subtitle:\n 'Displays a virtualized, scrollable list with infinite pagination.',\n description: {\n component: `\n\\`\\`\\`js\nimport { InfinitePagination } from \"@spaced-out/ui-design-system/lib/components/InfinitePagination\";\n\\`\\`\\`\n\nThe \\`InfinitePagination\\` component renders a performant scrollable list using \\`react-window\\` and supports both fixed and variable item heights. It automatically loads more data as the user scrolls near the bottom of the list.\n\n- Supports infinite scroll via \\`loadMoreItems\\`\n- Accepts custom item renderers via \\`renderItem\\`\n- Optionally supports variable height items\n- Displays a loading spinner when fetching more items\n\nUse this component when rendering long lists of data without sacrificing performance.\n `,\n },\n },\n storySource: {\n componentPath: '/src/components/InfinitePagination/InfinitePagination',\n },\n },\n};\n\nexport const WithFixedSizeListStory = (args: InfinitePaginationProps) => {\n const [items, setItems] = React.useState([]);\n const [page, setPage] = React.useState(1);\n const [hasNextPage, setHasNextPage] = React.useState(true);\n const [isLoading, setIsLoading] = React.useState(false);\n\n // Simulate fetching data from an API\n const fetchItems = React.useCallback(\n async (pageNumber: number): Promise => {\n setIsLoading(true);\n\n // Simulate API call delay\n await new Promise(\n (resolve: (result: Promise | undefined) => void) =>\n setTimeout(resolve, 1000),\n );\n\n // Generate mock data for this page\n const pageSize = 20;\n const startId = (pageNumber - 1) * pageSize + 1;\n\n // Simulate reaching the end of available data after page 5\n if (pageNumber > 5) {\n setHasNextPage(false);\n setIsLoading(false);\n return [];\n }\n\n const newItems: ListItem[] = Array.from(\n {length: pageSize},\n (_, index) => ({\n id: startId + index,\n title: `Item ${startId + index}`,\n description: `This is the description for item ${startId + index}`,\n }),\n );\n\n setIsLoading(false);\n return newItems;\n },\n [],\n );\n\n // Initial data load\n React.useEffect(() => {\n const loadInitialData = async () => {\n const initialItems = await fetchItems(1);\n setItems(initialItems);\n };\n\n loadInitialData();\n }, [fetchItems]);\n\n // Function to load more items when user scrolls to bottom\n const loadMoreItems = React.useCallback(async () => {\n if (isLoading || !hasNextPage) {\n return;\n }\n\n const nextPage = page + 1;\n const newItems = await fetchItems(nextPage);\n\n setItems((prevItems) => [...prevItems, ...newItems]);\n setPage(nextPage);\n }, [fetchItems, isLoading, hasNextPage, page]);\n\n // Render each item in the list\n const renderItem: (item: GenericObject, index: number) => React.ReactNode = ({\n title,\n }) => (\n \n {String(title)}\n \n );\n\n // Extract key from item\n const getItemKey = (item: GenericObject): string | number => String(item.id);\n\n return (\n
\n \n
\n );\n};\n\nWithFixedSizeListStory.args = {\n classNames: '',\n testId: 'infinite-pagination-fixed-size-story',\n};\n\nexport const WithVariableSizeListStory = (args: InfinitePaginationProps) => {\n const [items, setItems] = React.useState([]);\n const [page, setPage] = React.useState(1);\n const [hasNextPage, setHasNextPage] = React.useState(true);\n const [isLoading, setIsLoading] = React.useState(false);\n\n // Simulate fetching data from an API\n const fetchItems = React.useCallback(\n async (pageNumber: number): Promise => {\n setIsLoading(true);\n\n // Simulate API call delay\n await new Promise(\n (resolve: (result: Promise | undefined) => void) =>\n setTimeout(resolve, 1000),\n );\n\n // Generate mock data for this page\n const pageSize = 20;\n const startId = (pageNumber - 1) * pageSize + 1;\n\n // Simulate reaching the end of available data after page 5\n if (pageNumber > 5) {\n setHasNextPage(false);\n setIsLoading(false);\n return [];\n }\n\n const newItems: ListItem[] = Array.from(\n {length: pageSize},\n (_, index) => ({\n id: startId + index,\n title: `Item ${startId + index}`,\n description: `This is the description for item ${startId + index}`,\n }),\n );\n\n setIsLoading(false);\n return newItems;\n },\n [],\n );\n\n // Initial data load\n React.useEffect(() => {\n const loadInitialData = async () => {\n const initialItems = await fetchItems(1);\n setItems(initialItems);\n };\n\n loadInitialData();\n }, [fetchItems]);\n\n // Function to load more items when user scrolls to bottom\n const loadMoreItems = React.useCallback(async () => {\n if (isLoading || !hasNextPage) {\n return;\n }\n\n const nextPage = page + 1;\n const newItems = await fetchItems(nextPage);\n\n setItems((prevItems) => [...prevItems, ...newItems]);\n setPage(nextPage);\n }, [fetchItems, isLoading, hasNextPage, page]);\n\n // Render each item in the list\n const renderItem = ({title}: GenericObject) => (\n
\n \n {String(title)}\n \n
\n );\n\n // Extract key from item\n const getItemKey = (item: GenericObject): string | number => String(item.id);\n\n const getItemSize = (index: number): number => {\n const min = 100;\n const max = 300;\n\n const pseudoRandom = Math.sin(index * 987.654) * 10000;\n const fractional = pseudoRandom - Math.floor(pseudoRandom);\n return Math.floor(fractional * (max - min + 1)) + min;\n };\n\n return (\n
\n \n
\n );\n};\n\nWithVariableSizeListStory.args = {\n classNames: '',\n testId: 'infinite-pagination-variable-size-story',\n};\nWithFixedSizeListStory.storyName = 'With Fixed Size List';\nWithVariableSizeListStory.storyName = 'With Variable Size List';\n" }, "css": { "path": "InfinitePagination.module.css", "content": "@value (\n spaceFluid\n) from '../../styles/variables/_space.css';\n\n.wrapper {\n display: flex;\n height: spaceFluid;\n}\n\n.loader {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.listRow {\n box-sizing: border-box;\n}\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../components/InfinitePagination/InfinitePagination';\n//# sourceMappingURL=index.d.ts.map" }, "additional": {} }, "allFiles": [ "InfinitePagination.module.css", "InfinitePagination.stories.module.css", "InfinitePagination.stories.tsx", "InfinitePagination.tsx", "index.ts" ] }, "InlineDropdown": { "name": "InlineDropdown", "path": "src/components/InlineDropdown", "files": { "main": { "path": "InlineDropdown.d.ts", "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nimport type { ClickAwayRefType } from '../../utils/click-away';\nimport type { UnstyledButtonProps } from '../../components/Button';\nimport type { AnchorType } from '../../components/ButtonDropdown';\nimport type { MenuOption, MenuProps } from '../../components/Menu';\nimport type { ElevationType } from '../../components/Tooltip';\ntype ClassNames = Readonly<{\n buttonWrapper?: string;\n dropdownContainer?: string;\n}>;\nexport interface InlineDropdownProps extends Omit {\n classNames?: ClassNames;\n menu?: MenuProps;\n anchorPosition?: AnchorType;\n onOptionSelect?: (option: MenuOption, arg2?: React.SyntheticEvent | null | undefined) => unknown;\n onMenuOpen?: () => unknown;\n onMenuClose?: () => unknown;\n size?: 'medium' | 'small' | 'extraSmall';\n elevation?: ElevationType;\n /**\n * Opt in to the accessibility behavior: `aria-haspopup` / `aria-expanded` /\n * `aria-controls` on the trigger, the arrow key that opens the popup, focus\n * moving into the menu and back to the trigger, and the roving tab stop\n * inside it. Forwarded to the `Menu` this opens.\n *\n * Off by default, and off is this component exactly as it behaved before any\n * of it existed.\n */\n enableA11y?: boolean;\n clickAwayRef?: React.RefObject;\n testId?: string;\n}\nexport declare const InlineDropdown: Flow.AbstractComponent;\nexport {};\n//# sourceMappingURL=InlineDropdown.d.ts.map" }, "story": { "path": "InlineDropdown.stories.tsx", "content": "import * as React from 'react';\n\nimport {\n getButtonLabelFromSelectedKeys,\n getSelectedKeysFromSelectedOption,\n} from 'src/utils/menu';\n\nimport type {ButtonProps} from 'src/components/Button';\nimport {ANCHOR_POSITION_TYPE} from 'src/components/ButtonDropdown';\nimport type {InlineDropdownProps} from 'src/components/InlineDropdown/InlineDropdown';\nimport {InlineDropdown} from 'src/components/InlineDropdown/InlineDropdown';\nimport type {MenuOption, MenuProps} from 'src/components/Menu';\nimport {MenuFooter, MenuHeader} from 'src/components/Menu/Menu.stories';\nimport {ELEVATION_TYPES} from 'src/components/Tooltip';\n\nimport css from 'src/components/InlineDropdown/InlineDropdown.stories.module.css';\n\n\nconst anchorPositionOptions: Array = [\n ...Object.values(ANCHOR_POSITION_TYPE),\n];\n\nimport type {ClickAwayRefType} from 'src/utils/click-away';\n\nimport {BUTTON_ACTION_TYPE} from 'src/components/Button';\n\n\nconst elevationOptions: Array = [...Object.values(ELEVATION_TYPES)];\nconst actionTypeOptions: Array = [\n ...Object.values(BUTTON_ACTION_TYPE),\n];\n\nconst textOptions: MenuOption[] = [\n {key: '1', label: 'Option one'},\n {key: '2', label: 'Option two'},\n {\n key: '3',\n label:\n 'Option three this is a very long option that would truncate, and this is even longer text to further test the truncation behavior in the dropdown component, ensuring that extremely long labels are handled gracefully and do not break the layout or overflow in an undesirable way, especially when the text is much longer than what would typically be expected in a dropdown option.',\n },\n {\n key: '4',\n label: 'Option four very long option that would truncate',\n },\n {key: '5', label: 'Option five(disabled)', disabled: true},\n {\n key: '6',\n label: 'Option six(disabled) very long option that would truncate',\n disabled: true,\n },\n {key: '7', label: 'Option Seven'},\n {key: '8', label: 'Option Eight'},\n {key: '9', label: 'Option Night'},\n];\n\nconst menuProps: MenuProps = {\n isFluid: false,\n menuDisabled: false,\n size: 'medium',\n options: textOptions,\n};\n\nconst textOnlyInlineDropdownProps: ButtonProps = {\n children: 'Button Text',\n};\n\nexport default {\n tags: ['autodocs'],\n title: 'Components/Inline Dropdown/Generic Inline Dropdown',\n component: InlineDropdown,\n argTypes: {\n enableA11y: {\n description:\n '**enableA11y** opts into the accessibility behavior: `aria-haspopup` / `aria-expanded` / `aria-controls` on the trigger, the arrow key that opens the popup, and focus moving into the menu and back. Off by default, where `InlineDropdown` behaves exactly as it did before any of it existed. Off here too, as everywhere: turn the control on to see the accessible behavior.',\n control: {type: 'boolean'},\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n onClick: {\n description:\n '**onClick** handler that is applied to the root `` element',\n action: 'clicked',\n table: {\n type: {summary: '(SyntheticEvent) => mixed'},\n },\n },\n menu: {\n description: 'Menu props to use',\n control: {\n type: 'object',\n },\n table: {\n type: {summary: 'MenuProps'},\n },\n },\n classNames: {\n description: 'External classNames to be applied',\n control: {\n type: 'object',\n },\n table: {\n type: {summary: '{buttonWrapper?: string, dropdownContainer?: string}'},\n },\n },\n elevation: {\n description:\n 'Elevation level for the dropdown menu. This controls the z-index stacking order. Default is set to \"modal\" elevation. Use higher elevation levels when rendering the dropdown above other elevated elements like Modal, Toast, etc.',\n control: {\n type: 'select',\n },\n options: elevationOptions,\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: 'modal'},\n },\n },\n actionType: {\n options: actionTypeOptions,\n description:\n 'Action type of Button. Supported types are listed on the dropdown',\n control: {\n type: 'select',\n },\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: 'submit'},\n },\n },\n size: {\n description:\n 'Inline dropdown supports only three size variants namely small and medium and extra small. `extraSmall` < `small` < `medium`',\n control: {\n type: 'radio',\n },\n options: ['medium', 'small', 'extraSmall'],\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: 'medium'},\n },\n },\n disabled: {\n description: 'If **true**, the component is disabled',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n children: {\n description: 'The content of the inline dropdown',\n table: {\n type: {summary: 'React.Component | string'},\n },\n },\n onOptionSelect: {\n description:\n '**onOptionSelect** handler is triggered when there is a change in selected option',\n action: 'clicked',\n table: {\n type: {\n summary:\n '(option: MenuOption, ?SyntheticEvent) => mixed',\n },\n },\n },\n onMenuOpen: {\n description: '**onMenuOpen** handler is triggered when menu is opened.',\n action: 'clicked',\n table: {\n type: {summary: '() => mixed'},\n },\n },\n onMenuClose: {\n description: '**onMenuClose** handler is triggered when menu is closed.',\n action: 'clicked',\n table: {\n type: {summary: '() => mixed'},\n },\n },\n anchorPosition: {\n options: anchorPositionOptions,\n description:\n 'Position of Menu. It can be any one value from the dropdown',\n control: {\n type: 'select',\n },\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: 'bottom-start'},\n },\n },\n clickAwayRef: {\n type: {optional: true},\n description: 'ref that contains the functions to open or close the child',\n table: {\n type: {\n summary: 'ClickAwayRefType',\n },\n },\n },\n testId: {\n description: 'Test ID for the component',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n },\n parameters: {\n docs: {\n subtitle: 'Generates a InlineDropdown component',\n description: {\n component: `\n\\`\\`\\`js\nimport { InlineDropdown } from \"@spaced-out/ui-design-system/lib/components/InlineDropdown\";\n\\`\\`\\`\nInline Dropdown is a composite component that internally implements **Menu** with\n**Unstyled Button** component. It also uses **Floating UI** to position the\nmenu component relative to empty space available, taking viewport and component position into account. This makes sure that menu is always visible\nirrespective of the component positioning. The component has a callback to notify the parent on option selection. Inline Dropdown is implemented inside a\n\\`ClickAway\\` listener and thus Menu is closed automatically on outside click.\n\n- Supports passing a \\`clickAwayRef\\` prop to the component.\n- You can always force Open the dropdown from ref by using \\`clickAwayRef.current?.forceOpen()\\`. This might be useful when want to force Open as per you needs.\n- You can always force Close the dropdown from ref by using \\`clickAwayRef.current?.forceClose()\\`. This might be useful when want to force Close as per you needs.\n\n\n**Note: ** For checkbox type option set you can make use of \\`getSelectedKeysFromSelectedOption\\` and \\`getButtonLabelFromSelectedKeys\\` from \\`utils/menu\\`\nto populate \\`selectedKeys\\` and \\`buttonText\\` respectively.\n `,\n },\n },\n storySource: {\n componentPath: '/src/components/InlineDropdown/InlineDropdown',\n },\n },\n};\n\nexport const TextOnlyStory = (args: InlineDropdownProps) => (\n
\n \n
\n);\n\nTextOnlyStory.args = {\n ...textOnlyInlineDropdownProps,\n menu: menuProps,\n size: 'medium',\n testId: 'inline-dropdown-text-only-story',\n};\n\nexport const TextWithTooltipStory = (args: InlineDropdownProps) => (\n
\n \n
\n);\n\nTextWithTooltipStory.args = {\n ...textOnlyInlineDropdownProps,\n menu: {...menuProps, showLabelTooltip: {maxLines: 2}},\n size: 'medium',\n testId: 'inline-dropdown-text-with-tooltip-story',\n};\n\nexport const WithSearchStory = (args: InlineDropdownProps) => (\n
\n \n
\n);\n\nWithSearchStory.args = {\n ...textOnlyInlineDropdownProps,\n menu: {...menuProps, allowSearch: true},\n size: 'medium',\n testId: 'inline-dropdown-with-search-story',\n};\n\nconst checkboxMenuProps: MenuProps = {\n options: textOptions,\n optionsVariant: 'checkbox',\n selectedKeys: ['4'],\n isFluid: false,\n};\n\nexport const WithCheckboxMenuStory = (args: InlineDropdownProps) => {\n const [btnText, setBtnText] = React.useState('');\n const [selectedKeys, setSelectedKeys] = React.useState(\n args.menu?.selectedKeys || [],\n );\n\n React.useEffect(() => {\n setSelectedKeys(args.menu?.selectedKeys || []);\n const newBtnText = getButtonLabelFromSelectedKeys(\n args.menu?.selectedKeys,\n args.children,\n );\n setBtnText(newBtnText);\n }, [args.menu?.selectedKeys]);\n\n const handleChange = (option: MenuOption) => {\n const newSelectedKeys = getSelectedKeysFromSelectedOption(\n option,\n selectedKeys,\n );\n const newBtnText = getButtonLabelFromSelectedKeys(\n newSelectedKeys,\n args.children,\n );\n setSelectedKeys(newSelectedKeys);\n setBtnText(newBtnText);\n };\n\n return (\n
\n \n {btnText}\n \n
\n );\n};\n\nWithCheckboxMenuStory.args = {\n children: 'Long Button Text',\n menu: checkboxMenuProps,\n size: 'medium',\n testId: 'inline-dropdown-with-checkbox-menu-story',\n};\n\nconst radioMenuProps: MenuProps = {\n options: textOptions,\n optionsVariant: 'radio',\n selectedKeys: ['4'],\n isFluid: false,\n};\n\nexport const WithRadioMenuStory = (args: InlineDropdownProps) => {\n const [selectedKeys, setSelectedKeys] = React.useState(\n args.menu?.selectedKeys || [],\n );\n\n React.useEffect(() => {\n setSelectedKeys(args.menu?.selectedKeys || []);\n }, [args.menu?.selectedKeys]);\n\n const handleChange = (option: MenuOption) => {\n setSelectedKeys([option.key]);\n };\n\n return (\n
\n \n {args.children}\n \n
\n );\n};\n\nWithRadioMenuStory.args = {\n children: 'Long Button Text',\n menu: radioMenuProps,\n testId: 'inline-dropdown-with-radio-menu-story',\n};\n\nexport const WithHeaderAndFooterStory = (args: InlineDropdownProps) => (\n \n);\n\nexport const WithHeaderAndFooter = (args: InlineDropdownProps) => {\n const clickAwayRef = React.useRef(null);\n const [btnText, setBtnText] = React.useState('');\n const [selectedKeys, setSelectedKeys] = React.useState(\n args.menu?.selectedKeys || [],\n );\n\n React.useEffect(() => {\n setSelectedKeys(args.menu?.selectedKeys || []);\n const newBtnText = getButtonLabelFromSelectedKeys(\n args.menu?.selectedKeys,\n args.children,\n );\n setBtnText(newBtnText);\n }, [args.menu?.selectedKeys]);\n\n const handleChange = (option: MenuOption) => {\n const newSelectedKeys = getSelectedKeysFromSelectedOption(\n option,\n selectedKeys,\n );\n const newBtnText = getButtonLabelFromSelectedKeys(\n newSelectedKeys,\n args.children,\n );\n setSelectedKeys(newSelectedKeys);\n setBtnText(newBtnText);\n };\n\n const onSave = () => {\n if (clickAwayRef.current) {\n clickAwayRef.current?.forceClose();\n }\n };\n\n return (\n
\n ,\n footer: ,\n }}\n onOptionSelect={handleChange}\n clickAwayRef={clickAwayRef}\n >\n {btnText}\n \n
\n );\n};\n\nconst menuPropsWithHeaderAndFooter: MenuProps = {\n options: textOptions,\n optionsVariant: 'checkbox',\n};\n\nWithHeaderAndFooterStory.args = {\n children: 'Long Button Text',\n menu: menuPropsWithHeaderAndFooter,\n size: 'medium',\n testId: 'inline-dropdown-with-header-and-footer-story',\n};\nTextOnlyStory.storyName = 'Text Only';\nTextWithTooltipStory.storyName = 'Text With Tooltip';\nWithSearchStory.storyName = 'With Search';\nWithCheckboxMenuStory.storyName = 'With Checkbox Menu';\nWithRadioMenuStory.storyName = 'With Radio Menu';\nWithHeaderAndFooterStory.storyName = 'With Header And Footer';\n" }, "css": { "path": "InlineDropdown.module.css", "content": "@value ( sizeFluid) from '../../styles/variables/_size.css';\n@value ( spaceXXSmall) from '../../styles/variables/_space.css';\n@value ( colorTextDisabled, colorFocusPrimary) from '../../styles/variables/_color.css';\n@value ( borderWidthNone, borderWidthTertiary, borderRadiusXSmall) from '../../styles/variables/_border.css';\n\n.inlineDropdownContainer {\n display: flex;\n position: relative;\n}\n\n.isFluid {\n width: sizeFluid;\n}\n\n.inlineButton {\n display: flex;\n gap: spaceXXSmall;\n cursor: pointer;\n align-items: center;\n border-radius: borderRadiusXSmall;\n}\n\n.inlineButton:focus {\n box-shadow: borderWidthNone borderWidthNone borderWidthNone\n borderWidthTertiary colorFocusPrimary;\n}\n\n.medium {\n composes: buttonTextMedium from '../../styles/typography.module.css';\n}\n\n.small {\n composes: buttonTextSmall from '../../styles/typography.module.css';\n}\n\n.extraSmall {\n composes: buttonTextExtraSmall from '../../styles/typography.module.css';\n}\n\n.disabled {\n pointer-events: none;\n color: colorTextDisabled;\n cursor: not-allowed;\n}\n\n.menuWrapper {\n width: var(--dropdown-width);\n z-index: var(--menu-elevation);\n}\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../components/InlineDropdown/InlineDropdown';\nexport * from '../../components/InlineDropdown/SimpleInlineDropdown';\n//# sourceMappingURL=index.d.ts.map" }, "additional": { "SimpleInlineDropdown.d.ts": { "path": "SimpleInlineDropdown.d.ts", "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nimport type { MenuClassNames, MenuLabelTooltip } from '../../types/menu';\nimport type { ClickAwayRefType } from '../../utils/click-away';\nimport type { ButtonProps } from '../../components/Button';\nimport type { AnchorType } from '../../components/ButtonDropdown';\nimport type { MenuOption, MenuOptionsVariant, Virtualization } from '../../components/Menu';\nimport type { ElevationType } from '../../components/Tooltip';\ntype ClassNames = Readonly<{\n buttonWrapper?: string;\n dropdownContainer?: string;\n}>;\nexport interface SimpleInlineDropdownRef {\n selectedKeys?: Array;\n}\nexport interface SimpleInlineDropdownProps extends Omit {\n elevation?: ElevationType;\n classNames?: ClassNames;\n anchorPosition?: AnchorType;\n options?: Array;\n optionsVariant?: MenuOptionsVariant;\n allowSearch?: boolean;\n selectedKeys?: Array;\n showLabelTooltip?: MenuLabelTooltip;\n allowWrap?: boolean;\n onOptionSelect?: (option: MenuOption, arg2?: React.SyntheticEvent | null | undefined) => unknown;\n onMenuOpen?: () => unknown;\n onMenuClose?: () => unknown;\n menuVirtualization?: Virtualization;\n header?: React.ReactNode;\n footer?: React.ReactNode;\n menuClassNames?: MenuClassNames;\n resolveLabel?: (option: MenuOption) => string | React.ReactNode;\n resolveSecondaryLabel?: (option: MenuOption) => string | React.ReactNode;\n clickAwayRef?: React.RefObject;\n /**\n * Opt in to the accessibility behavior of the `InlineDropdown` this renders: its\n * ARIA roles and state, keyboard navigation of the options, and focus\n * handling on close. Forwarded unchanged.\n *\n * Off by default, and off is this component exactly as it behaved before\n * any of it existed.\n */\n enableA11y?: boolean;\n testId?: string;\n}\nexport declare const SimpleInlineDropdown: Flow.AbstractComponent;\nexport {};\n//# sourceMappingURL=SimpleInlineDropdown.d.ts.map" } } }, "allFiles": [ "InlineDropdown.module.css", "InlineDropdown.stories.module.css", "InlineDropdown.stories.tsx", "InlineDropdown.tsx", "SimpleInlineDropdown.stories.tsx", "SimpleInlineDropdown.tsx", "index.ts" ] }, "Input": { "name": "Input", "path": "src/components/Input", "files": { "main": { "path": "Input.d.ts", "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nimport type { IconType } from '../../components/Icon';\ntype ClassNames = Readonly<{\n box?: string;\n iconLeft?: string;\n iconRight?: string;\n wrapper?: string;\n prefixText?: string;\n rightSlotContent?: string;\n}>;\nexport declare const EXPONENT_CHARACTER_LIST: string[];\nexport declare const INPUT_TYPES: Readonly<{\n text: \"text\";\n number: \"number\";\n password: \"password\";\n email: \"email\";\n tel: \"tel\";\n url: \"url\";\n date: \"date\";\n 'datetime-local': \"datetime-local\";\n time: \"time\";\n week: \"week\";\n month: \"month\";\n color: \"color\";\n search: \"search\";\n}>;\nexport type InputType = (typeof INPUT_TYPES)[keyof typeof INPUT_TYPES];\nexport interface InputOnChangeParamsType {\n evt: React.ChangeEvent;\n isEnter?: boolean;\n}\nexport interface InputProps extends Omit, 'value' | 'onChange' | 'classNames' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onPaste' | 'onIconRightClick' | 'onContainerClick' | 'name' | 'disabled' | 'placeholder' | 'locked' | 'error' | 'errorText' | 'label' | 'helperText' | 'type' | 'size' | 'iconLeftName' | 'iconLeftType' | 'iconRightName' | 'iconRightType' | 'required' | 'readOnly' | 'boxRef' | 'minLength' | 'maxLength' | 'pattern' | 'min' | 'max' | 'autoComplete' | 'disallowExponents' | 'step' | 'hideNumberSpinner' | 'hidePasswordToggleIcon'> {\n value?: string;\n onChange?: (evt: React.ChangeEvent, isEnter?: boolean) => unknown;\n classNames?: ClassNames;\n onFocus?: React.FocusEventHandler;\n onBlur?: React.FocusEventHandler;\n onKeyDown?: React.KeyboardEventHandler;\n onPaste?: React.ClipboardEventHandler;\n onIconRightClick?: ((arg1: React.SyntheticEvent) => unknown) | null | undefined;\n onContainerClick?: React.MouseEventHandler;\n name?: string;\n disabled?: boolean;\n placeholder?: string;\n locked?: boolean;\n error?: boolean;\n errorText?: string;\n label?: string | React.ReactNode;\n helperText?: string | React.ReactNode;\n rightSlot?: React.ReactNode;\n type?: InputType;\n size?: 'medium' | 'small';\n iconLeftName?: string;\n iconLeftType?: IconType;\n iconRightName?: string;\n iconRightType?: IconType;\n required?: boolean;\n readOnly?: boolean;\n boxRef?: React.Ref;\n minLength?: number;\n maxLength?: number;\n pattern?: string;\n min?: string;\n max?: string;\n autoComplete?: string;\n disallowExponents?: boolean;\n /**\n * The step attribute is a number that specifies the granularity that the value must adhere to, or the special value any.\n * Only values which are equal to the basis for stepping (min if specified, value otherwise, and an\n * appropriate default value if neither of those is provided) are valid.\n */\n step?: string;\n hideNumberSpinner?: boolean;\n hidePasswordToggleIcon?: boolean;\n testId?: string;\n disableWheelPropagation?: boolean;\n prefix?: string;\n}\nexport declare const Input: Flow.AbstractComponent;\nexport {};\n//# sourceMappingURL=Input.d.ts.map" }, "story": { "path": "Input.stories.tsx", "content": "import * as React from 'react';\n\nimport {Icon} from 'src/components/Icon';\nimport type {InputProps} from 'src/components/Input/Input';\nimport {Input} from 'src/components/Input/Input';\nimport {Toggle} from 'src/components/Toggle';\nimport {Tooltip} from 'src/components/Tooltip';\n\nimport css from 'src/components/Input/Input.stories.module.css';\n\n\nexport default {\n tags: ['autodocs'],\n title: 'Form Components/Input',\n component: Input,\n argTypes: {\n type: {\n options: ['text', 'number', 'password', 'email', 'tel', 'url', 'search'],\n description: 'Type of Input. Supported types are listed on the dropdown',\n control: {\n type: 'select',\n },\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: 'text'},\n },\n },\n size: {\n options: ['small', 'medium'],\n description:\n 'Input supports only two size variants namely small and medium. `small` < `medium`',\n control: {\n type: 'select',\n },\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: 'medium'},\n },\n },\n iconLeftName: {\n description:\n 'Left icon to be applied to the button, it internally uses the `Icon` component to render icons',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n iconLeftType: {\n description:\n 'Type of Left Icon. Type represents 4 unique icon styles :- Solid, Regular, Duotone and Brands',\n options: ['regular', 'solid', 'duotone', 'brands'],\n control: {type: 'select'},\n table: {\n type: {summary: 'string'},\n defaultValue: {summary: 'regular'},\n },\n },\n iconRightName: {\n description:\n 'Right icon to be applied to the button, it internally uses the `Icon` component to render icons',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n iconRightType: {\n description:\n 'Type of Right Icon. Type represents 4 unique icon styles :- Solid, Regular, Duotone and Brands',\n options: ['regular', 'solid', 'duotone', 'brands'],\n control: {type: 'select'},\n table: {\n type: {summary: 'string'},\n defaultValue: {summary: 'regular'},\n },\n },\n prefix: {\n description: 'Prefix to be displayed before the input',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n value: {\n description: 'Value of the input',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n name: {\n description: 'Name of the input',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n disabled: {\n description: 'if **true**, the component is disabled',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n required: {\n description: 'if **true**, a red star would be added to the label',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n disallowExponents: {\n description:\n 'if **true**, prevents users from typing exponent characters (`e`, `E`) in the input field',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n placeholder: {\n description: 'Placeholder of input. This appears inside the input box',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n locked: {\n description:\n 'if **true**, the component is locked, Locked state is the readonly state of the input',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n error: {\n description:\n 'if **true**, the component is moved to error state, Error state displays a red border surrounding input',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n errorText: {\n description:\n 'Error text to be displayed on the bottom of the input. This uses `colorTextDanger`',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n label: {\n description: 'Primary label of the input. This appears on top of input',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n helperText: {\n description:\n 'Secondary label of the input. This appears on bottom of input, if the input is in `error` state the priority is given to `errorText`, in such cases secondary label wont be displayed',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n rightSlot: {\n description: 'Right slot to be applied to the input',\n control: {\n type: 'React.ReactNode',\n },\n table: {\n type: {summary: 'React.ReactNode'},\n },\n },\n classNames: {\n description: 'External classnames to be applied',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary:\n '{wrapper?: string, box?: string, iconLeft?: string, iconRight?: string, prefixText?: string}',\n },\n },\n },\n readOnly: {\n description: 'if **true**, component would move to readonly state',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n },\n },\n hideNumberSpinner: {\n description:\n 'if **true**, component would not show spinner for number input',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n },\n },\n hidePasswordToggleIcon: {\n description:\n 'if **true**, component would not show password toggle icon for password input',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n },\n },\n disableWheelPropagation: {\n description:\n 'if **false**, wheel events will be propagated for number inputs to the parent element, else they will be prevented to avoid scrolling the parent element',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n minLength: {\n description: 'Minimum length (number of characters) of `value`',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n maxLength: {\n description: 'Maximum length (number of characters) of `value`',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n pattern: {\n description: 'Pattern the `value` must match to be valid',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n min: {\n description: 'Minimum `value`',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n max: {\n description: 'Maximum `value`',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n step: {\n description: 'Incremental `values` that are valid',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n onChange: {\n description:\n '**onChange** handler is triggered when there is a change in input value',\n action: 'changed',\n table: {\n type: {\n summary:\n 'onChange?: ( evt: SyntheticInputEvent, isEnter?: boolean, ) => mixed',\n },\n },\n },\n onFocus: {\n description: '**onFocus** handler is triggered when input is focussed',\n action: 'focussed',\n table: {\n type: {summary: '(e: SyntheticInputEvent) => mixed'},\n },\n },\n onBlur: {\n description: '**onBlur** handler is triggered when input is blurred',\n action: 'blurred',\n table: {\n type: {summary: '(e: SyntheticInputEvent) => mixed'},\n },\n },\n onKeyDown: {\n description: '**onKeyDown** handler is triggered on keypress',\n action: 'onKeyDowned',\n table: {\n type: {summary: '(e: SyntheticInputEvent) => mixed'},\n },\n },\n onIconRightClick: {\n description:\n '**onIconRightClick** handler is triggered on click of the right icon',\n action: 'onIconRightClicked',\n table: {\n type: {summary: '(SyntheticEvent) => mixed'},\n },\n },\n onPaste: {\n description:\n '**onPaste** handler is triggered when text is pasted from the clipboard',\n action: 'pasted',\n table: {\n type: {summary: '(e: ClipboardEvent) => mixed'},\n },\n },\n autoComplete: {\n description:\n 'allows the browser to do a pattern match against a list of values locally stored with the browser',\n action: 'autoComplete',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n testId: {\n description: 'Test ID for the component',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n },\n parameters: {\n docs: {\n subtitle: 'Generates a Input component',\n description: {\n component: `\n\\`\\`\\`js\nimport { Input } from \"@spaced-out/ui-design-system/lib/components/Input\";\n\\`\\`\\`\nBasic input component which supports error, disabled and locked states. All values from the input component are sent as \\`string\\`
\nInput alo supports a bunch of **callbacks** listed below. There are multiple variants of input that render with defined set of actions\nlike **password** input has a built in functionality to show and hide passwords. **Email** input would have an email icon set at the right.\nInput also supports \\`helperText\\` param to pass in the secondary label.\n `,\n },\n },\n storySource: {\n componentPath: '/src/components/Input',\n },\n },\n};\n\nexport const DefaultStory = (args: InputProps) => {\n const [value, setValue] = React.useState(args.value);\n\n React.useEffect(() => {\n setValue(args.value);\n }, [args.value]);\n\n return (\n
\n setValue(e.target.value)}\n value={value}\n />\n
\n );\n};\n\nDefaultStory.args = {\n type: 'text',\n label: 'Form Label',\n placeholder: 'Input Some text here',\n size: 'medium',\n testId: 'input-default-story',\n};\n\nexport const WithHelperTextStory = (args: InputProps) => {\n const [value, setValue] = React.useState(args.value);\n\n React.useEffect(() => {\n setValue(args.value);\n }, [args.value]);\n\n return (\n
\n setValue(e.target.value)}\n value={value}\n />\n
\n );\n};\n\nWithHelperTextStory.args = {\n type: 'text',\n label: 'Form Label',\n placeholder: 'Input Some text here',\n helperText: 'Gain some help from here',\n size: 'medium',\n testId: 'input-with-helper-text-story',\n};\n\nexport const RequiredStory = (args: InputProps) => {\n const [value, setValue] = React.useState(args.value);\n\n React.useEffect(() => {\n setValue(args.value);\n }, [args.value]);\n\n return (\n
\n setValue(e.target.value)}\n value={value}\n />\n
\n );\n};\n\nRequiredStory.args = {\n type: 'text',\n label: 'Form Label',\n placeholder: 'Input Some text here',\n required: true,\n size: 'medium',\n testId: 'input-required-story',\n};\n\nexport const EmailStory = (args: InputProps) => {\n const [value, setValue] = React.useState(args.value);\n\n React.useEffect(() => {\n setValue(args.value);\n }, [args.value]);\n\n return (\n
\n setValue(e.target.value)}\n value={value}\n />\n
\n );\n};\n\nEmailStory.args = {\n type: 'email',\n label: 'Email',\n placeholder: 'Input Email here',\n size: 'medium',\n testId: 'input-email-story',\n};\n\nexport const PasswordStory = (args: InputProps) => {\n const [value, setValue] = React.useState(args.value);\n\n React.useEffect(() => {\n setValue(args.value);\n }, [args.value]);\n\n return (\n
\n setValue(e.target.value)}\n value={value}\n />\n
\n );\n};\n\nPasswordStory.args = {\n type: 'password',\n label: 'Password',\n placeholder: 'Input Password here',\n size: 'medium',\n testId: 'input-password-story',\n};\n\nexport const IconLeftStory = (args: InputProps) => {\n const [value, setValue] = React.useState(args.value);\n\n React.useEffect(() => {\n setValue(args.value);\n }, [args.value]);\n\n return (\n
\n setValue(e.target.value)}\n value={value}\n />\n
\n );\n};\n\nIconLeftStory.args = {\n type: 'text',\n label: 'Form Label',\n placeholder: 'Input Some text here',\n iconLeftName: 'face-party',\n testId: 'input-icon-left-story',\n};\n\nexport const IconRightStory = (args: InputProps) => {\n const [value, setValue] = React.useState(args.value);\n\n React.useEffect(() => {\n setValue(args.value);\n }, [args.value]);\n\n return (\n
\n setValue(e.target.value)}\n value={value}\n />\n
\n );\n};\n\nIconRightStory.args = {\n type: 'text',\n label: 'Form Label',\n placeholder: 'Input Some text here',\n iconRightName: 'face-party',\n testId: 'input-icon-right-story',\n};\n\nexport const DualIconStory = (args: InputProps) => {\n const [value, setValue] = React.useState(args.value);\n\n React.useEffect(() => {\n setValue(args.value);\n }, [args.value]);\n\n return (\n
\n setValue(e.target.value)}\n value={value}\n />\n
\n );\n};\n\nDualIconStory.args = {\n type: 'text',\n label: 'Form Label',\n placeholder: 'Input Some text here',\n iconRightName: 'flag',\n iconLeftName: 'face-party',\n testId: 'input-dual-icon-story',\n};\n\nexport const ErrorStory = (args: InputProps) => {\n const [value, setValue] = React.useState(args.value);\n\n React.useEffect(() => {\n setValue(args.value);\n }, [args.value]);\n\n return (\n
\n setValue(e.target.value)}\n value={value}\n />\n
\n );\n};\n\nErrorStory.args = {\n type: 'password',\n label: 'Password',\n placeholder: 'Input Password here',\n size: 'medium',\n error: true,\n errorText: 'Incorrect password',\n testId: 'input-error-story',\n};\n\nexport const PrefixStory = (args: InputProps) => {\n const [value, setValue] = React.useState(args.value);\n\n React.useEffect(() => {\n setValue(args.value);\n }, [args.value]);\n\n return (\n
\n setValue(e.target.value)}\n value={value}\n />\n
\n );\n};\n\nPrefixStory.args = {\n type: 'url',\n label: 'Custom URL',\n placeholder: 'xyz.com',\n size: 'medium',\n prefix: 'https://',\n testId: 'input-prefix-story',\n};\n\nexport const RightSlotStory = (args: InputProps) => {\n const [value, setValue] = React.useState('');\n const [checked, setChecked] = React.useState(false);\n\n return (\n
\n setValue(e.target.value)}\n value={value}\n rightSlot={\n
\n \n
\n {\n setChecked(!checked);\n }}\n />\n
\n \n \n
\n }\n />\n
\n );\n};\n\nRightSlotStory.args = {\n type: 'text',\n label: 'Form Label',\n placeholder: 'Input some text here',\n};\n\nDefaultStory.storyName = 'Default';\nWithHelperTextStory.storyName = 'With Helper Text';\nRequiredStory.storyName = 'Required';\nEmailStory.storyName = 'Email';\nPasswordStory.storyName = 'Password';\nIconLeftStory.storyName = 'Icon Left';\nIconRightStory.storyName = 'Icon Right';\nDualIconStory.storyName = 'Dual Icon';\nErrorStory.storyName = 'Error';\nPrefixStory.storyName = 'Prefix';\nRightSlotStory.storyName = 'Right Slot';\n" }, "css": { "path": "Input.module.css", "content": "@value (\n size2,\n size18,\n size24,\n size42,\n size30,\n size34,\n sizeFluid\n) from '../../styles/variables/_size.css';\n\n@value (\n spaceNone,\n spaceXSmall,\n spaceSmall,\n spaceMedium,\n spaceXXSmall\n) from '../../styles/variables/_space.css';\n\n@value (\n borderRadiusMedium,\n borderRadiusSmall,\n borderWidthPrimary,\n borderWidthTertiary,\n borderWidthNone,\n borderRadiusXSmall\n) from '../../styles/variables/_border.css';\n\n@value (\n colorTextPrimary,\n colorTextSecondary,\n colorTextTertiary,\n colorBorderPrimary,\n colorFillPrimary,\n colorFocusPrimary,\n colorFocusDanger,\n colorTextDisabled,\n colorFillDisabled,\n colorTextDanger,\n colorBackgroundTertiary,\n colorBorderTertiary\n) from '../../styles/variables/_color.css';\n\n.container {\n color: colorTextPrimary;\n width: sizeFluid;\n}\n\n.box {\n display: flex;\n align-items: center;\n color: colorTextPrimary;\n gap: spaceXSmall;\n height: size42;\n padding: spaceNone spaceSmall;\n border: borderWidthPrimary solid colorBorderPrimary;\n background-color: colorBackgroundTertiary;\n}\n\n.wrapper:not(.withError) .box:not(.inputDisabled):not(.locked):hover {\n border-color: colorBorderTertiary;\n}\n\n.wrapper:not(.withError):focus-within\n .box:not(.inputDisabled):not(.locked):hover {\n border-color: colorFillPrimary;\n}\n\n.locked {\n border-style: dashed;\n}\n\n.medium {\n composes: formInputMedium from '../../styles/typography.module.css';\n height: size42;\n border-radius: borderRadiusMedium;\n}\n\n.colorText {\n composes: formInputMedium from '../../styles/typography.module.css';\n color: colorTextSecondary;\n}\n\n.hasValue {\n color: colorTextPrimary;\n}\n\n.small {\n composes: formInputSmall from '../../styles/typography.module.css';\n height: size34;\n border-radius: borderRadiusSmall;\n}\n\n.wrapper.withError .box {\n border-color: colorTextDanger;\n}\n\n.wrapper.withError:focus-within .box {\n box-shadow: borderWidthNone borderWidthNone borderWidthNone\n borderWidthTertiary colorFocusDanger;\n}\n\n.box input {\n width: sizeFluid;\n height: sizeFluid;\n cursor: inherit;\n}\n\n.wrapper:not(.withError):focus-within .box:not(.inputDisabled) {\n border-color: colorFillPrimary;\n box-shadow: borderWidthNone borderWidthNone borderWidthNone\n borderWidthTertiary colorFocusPrimary;\n}\n\n/*\n * The field is a popup trigger whose popup is open, so DOM focus has moved into a\n * portal and `:focus-within` above no longer matches. Keep the emphasis anyway,\n * including while hovered — otherwise the hover rule repaints the border grey and\n * leaves the popup's halo behind it, a two-tone broken state.\n *\n * These live here rather than in Dropdown/Typeahead's own module because the\n * rules being overridden are scoped to THIS module's `.wrapper` / `.box` /\n * `.withError` class names, which a consumer stylesheet cannot name and so cannot\n * reliably out-specify.\n *\n * Both the popup attribute AND the expanded state are required so this only ever\n * hits a TRIGGER. On `aria-expanded` alone it also matches any other expanded\n * input inside the field — such as a filter field rendered in the popup — and\n * paints a focus ring on something that never has focus. `:not(.locked)` matches\n * the adjacent hover rules: keying off ARIA loses the protection `:focus-within`\n * had for free, since a locked field's input is natively disabled and so could\n * never have been focused.\n */\n.wrapper:not(.withError)\n .box:not(.inputDisabled):not(.locked):has(\n input[aria-haspopup][aria-expanded='true']\n ) {\n border-color: colorFillPrimary;\n box-shadow: borderWidthNone borderWidthNone borderWidthNone\n borderWidthTertiary colorFocusPrimary;\n}\n\n/* An errored trigger keeps the danger colors when its popup is open. */\n.wrapper.withError\n .box:not(.inputDisabled):not(.locked):has(\n input[aria-haspopup][aria-expanded='true']\n ) {\n border-color: colorTextDanger;\n box-shadow: borderWidthNone borderWidthNone borderWidthNone\n borderWidthTertiary colorFocusDanger;\n}\n\n.inputDisabled {\n color: colorTextDisabled;\n border-color: colorBorderPrimary;\n background-color: colorFillDisabled;\n}\n\n:where(.box) input::placeholder {\n color: colorTextTertiary;\n}\n\n.inputDisabled input::placeholder {\n color: inherit;\n}\n\n.wrapper {\n display: flex;\n flex-direction: column;\n width: sizeFluid;\n gap: spaceXXSmall;\n}\n\n.info {\n display: flex;\n justify-content: space-between;\n}\n\n.infoContent {\n display: flex;\n}\n\n.rightClickableIcon {\n cursor: pointer;\n}\n\n.rightClickableIcon.disabled {\n pointer-events: none;\n}\n\n.box.color {\n padding-right: spaceMedium;\n}\n\n.box > input[type='color'] {\n display: flex;\n cursor: pointer;\n align-items: center;\n width: fit-content;\n gap: spaceXSmall;\n padding: spaceNone;\n width: size18;\n height: size18;\n margin: spaceNone;\n}\n\n.box > input[type='color']::-webkit-color-swatch {\n display: flex;\n padding: spaceNone;\n align-self: center;\n border: none;\n min-width: size18;\n min-height: size18;\n border-radius: borderRadiusXSmall;\n}\n\n.hideNumberSpinner input[type='number']::-webkit-outer-spin-button,\n.hideNumberSpinner input[type='number']::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\n/* Hide spinner in Firefox */\n.hideNumberSpinner input[type='number'] {\n appearance: textfield;\n -moz-appearance: textfield;\n}\n\n.prefixContainer {\n display: flex;\n width: sizeFluid;\n cursor: inherit;\n padding-left: size2;\n overflow-y: auto;\n\n & .prefixText {\n color: colorTextTertiary;\n white-space: nowrap;\n }\n\n & input {\n padding-left: spaceNone;\n min-width: size18;\n }\n}\n\n.rightSlotContainer {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: spaceXSmall;\n width: sizeFluid;\n cursor: inherit;\n padding-left: size2;\n overflow-y: auto;\n\n & .rightSlotContent {\n color: colorTextTertiary;\n padding: 0;\n width: max-content;\n min-width: max-content;\n }\n\n & input {\n padding-left: spaceNone;\n min-width: size18;\n }\n}\n\n.inputRightSlotSeparator {\n width: size2;\n height: size24;\n}\n\n.inputRightSlotSeparator.small {\n height: size18;\n}\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../components/Input/Input';\n//# sourceMappingURL=index.d.ts.map" }, "additional": {} }, "allFiles": [ "Input.module.css", "Input.stories.module.css", "Input.stories.tsx", "Input.tsx", "NativeColorpicker.stories.tsx", "NativeDatepicker.stories.tsx", "index.ts" ] }, "KPIBox": { "name": "KPIBox", "path": "src/components/KPIBox", "files": { "main": { "path": "KPIBox.d.ts", "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nimport type { AlertSemanticType } from '../../types/common';\nimport type { IconSize, IconType } from '../../components/Icon';\ntype ClassNames = Readonly<{\n wrapper?: string;\n topFoldContent?: string;\n middleFoldContent?: string;\n bottomFoldContent?: string;\n textContainer?: string;\n}>;\nexport interface KPIBoxProps {\n classNames?: ClassNames;\n semantic?: AlertSemanticType;\n topContent?: React.ReactNode;\n middleContent?: React.ReactNode;\n bottomContent?: React.ReactNode;\n iconName?: string;\n iconSize?: IconSize;\n iconType?: IconType;\n onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;\n testId?: string;\n}\nexport declare const KPIBox: Flow.AbstractComponent;\nexport {};\n//# sourceMappingURL=KPIBox.d.ts.map" }, "story": { "path": "KPIBox.stories.tsx", "content": "import * as React from 'react';\n\n// import {ALERT_SEMANTIC} from '../../types/common';\nimport {Icon} from 'src/components/Icon';\nimport type {KPIBoxProps} from 'src/components/KPIBox';\nimport {KPIBox} from 'src/components/KPIBox';\nimport {SubTitleSmall} from 'src/components/Text';\n\nimport css from 'src/components/KPIBox/KPIBox.stories.module.css';\n\n// const semanticOptions: Array = [...Object.values(ALERT_SEMANTIC)];\n\nexport default {\n tags: ['autodocs'],\n title: 'Data Viz/KPI',\n component: KPIBox,\n argTypes: {\n // Uncomment when we encourage having semantic KPI Boxes\n // semantic: {\n // description:\n // 'The semantic type of the KPIBox (e.g., success, warning, danger, etc.).',\n // control: {\n // type: 'select',\n // },\n // options: semanticOptions,\n // table: {\n // type: {\n // summary: 'AlertSemanticType',\n // },\n // defaultValue: {summary: 'neutral'},\n // },\n // },\n topContent: {\n description: 'Content to be displayed at the top of the KPIBox.',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary: 'React.Node',\n },\n },\n },\n middleContent: {\n description: 'Content to be displayed in the middle of the KPIBox.',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary: 'React.Node',\n },\n },\n },\n bottomContent: {\n description: 'Content to be displayed at the bottom of the KPIBox.',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary: 'React.Node',\n },\n },\n },\n semantic: {\n description: 'Semantic of the icon to be displayed in the KPIBox.',\n options: ['danger', 'information', 'neutral', 'success', 'warning'],\n control: {\n type: 'select',\n },\n table: {\n type: {\n summary: 'AlertSemanticType',\n defaultValue: {summary: 'neutral'},\n },\n },\n },\n iconName: {\n description: 'Name of the icon to be displayed in the KPIBox.',\n control: {\n type: 'text',\n },\n table: {\n type: {\n summary: 'string',\n },\n },\n },\n iconSize: {\n description: 'Size of the icon in the KPIBox.',\n control: {\n type: 'select',\n },\n options: ['small', 'medium'],\n table: {\n type: {\n summary: 'IconSize',\n },\n defaultValue: {summary: 'medium'},\n },\n },\n iconType: {\n description: 'Type of the icon (e.g., outline, solid, duotone).',\n control: {\n type: 'select',\n },\n options: ['regular', 'solid', 'duotone', 'brands'],\n table: {\n type: {\n summary: 'IconType',\n },\n defaultValue: {summary: 'solid'},\n },\n },\n onClick: {\n description:\n '**onClick** handler applied to the root element. When provided, the KPIBox is clickable, shows a pointer cursor, and is keyboard accessible.',\n action: 'clicked',\n table: {\n type: {summary: '(e: React.MouseEvent) => void'},\n },\n },\n classNames: {\n description:\n 'Additional CSS classes to customize the appearance of the KPIBox.',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary: '{wrapper?: string}',\n },\n },\n },\n testId: {\n description: 'Test ID for the component',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n },\n parameters: {\n docs: {\n subtitle: 'Generates a KPIBox component.',\n description: {\n component: `\n\\`\\`\\`js\nimport { KPIBox } from \"@spaced-out/ui-design-system/lib/components/KPIBox\";\n\\`\\`\\`\nThe KPIBox component is designed to display Key Performance\nIndicators (KPIs) with customizable content and icons.\nIt is commonly used in dashboard and reporting applications to highlight\nimportant metrics and data.\n\nOptional \\`onClick\\` makes the KPIBox clickable and keyboard accessible\n(role=\"button\", focusable via Tab, activated with Enter or Space).\n\n### Usage\n\n\\`\\`\\`jsx\n\n \n 5% (500 total)\n \n )}\n iconName=\"chart-bar\"\n iconSize=\"medium\"\n iconType=\"solid\"\n/>\n\\`\\`\\`\n\n### Clickable KPI\n\n\\`\\`\\`jsx\n { /* handle click */ }}\n/>\n\\`\\`\\`\n\n\\`\\`\\`css\n.bottomContent {\n display: flex;\n gap: spaceXXSmall;\n align-items: flex-start;\n}\n\\`\\`\\`\n\n `,\n },\n },\n storySource: {\n componentPath: '/src/components/KPIBox/KPIBox',\n },\n },\n};\n\nexport const KPIStory = (args: KPIBoxProps) => (\n <>\n Customizable\n
\n
\n \n
\n Variations\n
\n
\n \n\n \n\n \n \n 5% (500 total)\n
\n }\n testId=\"kpi-box-variation-3\"\n />\n\n \n\n \n\n \n \n 5% (500 total)\n \n }\n iconName=\"money-bill\"\n testId=\"kpi-box-variation-6\"\n />\n \n {/* Uncomment when we encourage having semantic KPI Boxes */}\n {/* Semantics\n
\n
\n \n \n 5% (500 total)\n
\n }\n iconName=\"money-bill\"\n />\n\n \n \n 15% (1,500 total)\n \n }\n iconName=\"globe\"\n />\n\n \n \n 20% (3,000 total)\n \n }\n iconName=\"exclamation-triangle\"\n />\n\n \n \n 8% (800 total)\n \n }\n iconName=\"user-plus\"\n />\n\n \n \n 12% (1,200 total)\n \n }\n iconName=\"bug\"\n />\n */}\n \n);\n\nKPIStory.args = {\n topContent: 'Total Users',\n middleContent: '10,000',\n bottomContent: (\n
\n \n 10% (1,000 total)\n
\n ) as React.ReactElement>,\n iconName: 'users',\n iconType: 'duotone',\n testId: 'kpi-box-story',\n};\nKPIStory.storyName = 'KPI';\n\nexport const ClickableStory = (args: KPIBoxProps) => {\n const [clickCount, setClickCount] = React.useState(0);\n return (\n <>\n Click or focus and press Enter/Space\n
\n
\n {\n args.onClick?.(e);\n setClickCount((c) => c + 1);\n }}\n />\n
\n {clickCount > 0 && (\n Clicked {clickCount} time(s)\n )}\n \n );\n};\nClickableStory.args = {\n topContent: 'Total Sales',\n middleContent: '$1,234,567',\n bottomContent: '5% (500 total)',\n iconName: 'chart-bar',\n iconType: 'solid',\n testId: 'kpi-box-clickable-story',\n};\nClickableStory.storyName = 'Clickable';\n" }, "css": { "path": "KPIBox.module.css", "content": "@value (\n colorBackgroundTertiary,\n colorFillPrimary,\n colorFocusPrimary,\n colorTextSecondary,\n colorTextPrimary,\n colorBorderSecondary\n) from '../../styles/variables/_color.css';\n@value (spaceXXSmall, spaceSmall, spaceLarge, spaceMedium) from '../../styles/variables/_space.css';\n@value (borderRadiusMedium, borderWidthNone, borderWidthTertiary) from '../../styles/variables/_border.css';\n@value (size60, size140, size252) from '../../styles/variables/_size.css';\n\n.wrapper {\n display: flex;\n composes: borderPrimary from '../../styles/border.module.css';\n min-width: size252;\n height: fit-content;\n align-items: center;\n gap: spaceSmall;\n background-color: colorBackgroundTertiary;\n border-radius: borderRadiusMedium;\n padding: spaceLarge spaceMedium;\n}\n\n.clickable {\n cursor: pointer;\n outline: none;\n}\n\n.clickable:hover {\n border-color: colorBorderSecondary;\n}\n\n.clickable:focus {\n border-color: colorFillPrimary;\n box-shadow: borderWidthNone borderWidthNone borderWidthNone\n borderWidthTertiary colorFocusPrimary;\n}\n\n.textContainer {\n display: flex;\n flex-direction: column;\n gap: spaceXXSmall;\n}\n\n.topFoldContent,\n.middleFoldContent,\n.bottomFoldContent {\n display: flex;\n}\n\n.topFoldContent {\n composes: formLabelSmall from '../../styles/typography.module.css';\n color: colorTextSecondary;\n}\n\n.middleFoldContent {\n composes: jumboSmall from '../../styles/typography.module.css';\n color: colorTextPrimary;\n}\n\n.bottomFoldContent {\n composes: bodySmall from '../../styles/typography.module.css';\n color: colorTextSecondary;\n}\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../components/KPIBox/KPIBox';\n//# sourceMappingURL=index.d.ts.map" }, "additional": {} }, "allFiles": [ "KPIBox.module.css", "KPIBox.stories.module.css", "KPIBox.stories.tsx", "KPIBox.tsx", "index.ts" ] }, "LinearLoader": { "name": "LinearLoader", "path": "src/components/LinearLoader", "files": { "main": { "path": "LinearLoader.d.ts", "content": "import type { Flow } from 'flow-to-typescript-codemod';\nexport interface LinearLoaderProps {\n value: number;\n size?: 'large' | 'medium' | 'small';\n className?: string;\n indeterminate?: boolean;\n testId?: string;\n}\nexport declare const LinearLoader: Flow.AbstractComponent;\n//# sourceMappingURL=LinearLoader.d.ts.map" }, "story": { "path": "LinearLoader.stories.tsx", "content": "import * as React from 'react';\n\nimport {Button} from 'src/components/Button';\nimport type {LinearLoaderProps} from 'src/components/LinearLoader/LinearLoader';\nimport {LinearLoader} from 'src/components/LinearLoader/LinearLoader';\n\nimport css from 'src/components/LinearLoader/LinearLoader.stories.module.css';\n\n\nexport default {\n tags: ['autodocs'],\n title: 'Components/Linear Loader',\n component: LinearLoader,\n argTypes: {\n value: {\n description: 'The value to be used to show the progress out of 100',\n type: {required: true},\n name: 'value',\n table: {\n type: {summary: 'number'},\n },\n },\n className: {\n description: 'External className to be applied on container',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n indeterminate: {\n description: 'If **true**, the loader is animated infinitely',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n size: {\n description:\n 'Linear Loader supports only three size variants namely small, medium and large. `small` < `medium` < `large`',\n options: ['large', 'medium', 'small'],\n control: {\n type: 'select',\n },\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: 'medium'},\n },\n },\n testId: {\n description: 'Test ID for the component',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n },\n parameters: {\n docs: {\n subtitle: 'Generates a Linear Loader component',\n description: {\n component: `\n\\`\\`\\`js\nimport { LinearLoader } from \"@spaced-out/ui-design-system/lib/components/LinearLoader\";\n\\`\\`\\`\nDo wrap this component in a container with fixed width. This is fluid in width and will take the width of container.\nPass the new value prop as the progress out of 100 and the completed part will transition to new value with animation.\nFor **Circular Loader**\ncheck **here**\n `,\n },\n },\n storySource: {\n componentPath: '/src/components/LinearLoader/LinearLoader',\n },\n },\n};\n\nexport const LinearLoaderStory = (args: LinearLoaderProps) => {\n const [value, setValue] = React.useState(args.value);\n const increaseValue = (delta: number) => {\n if (delta > 0) {\n if (value + delta <= 100) {\n setValue(value + delta);\n } else {\n setValue(100);\n }\n } else if (delta < 0) {\n if (value + delta >= 0) {\n setValue(value + delta);\n } else {\n setValue(0);\n }\n }\n };\n\n return (\n
\n
\n \n
\n
\n {\n increaseValue(10);\n }}\n >\n Click Me + 10{' '}\n \n {\n increaseValue(-10);\n }}\n >\n Click Me - 10{' '}\n \n {\n increaseValue(100);\n }}\n >\n Click Me 100{' '}\n \n
\n
\n );\n};\n\nLinearLoaderStory.args = {\n value: 34,\n size: 'medium',\n testId: 'linear-loader-story',\n};\nLinearLoaderStory.storyName = 'Linear Loader';\n" }, "css": { "path": "LinearLoader.module.css", "content": "@value (\n borderRadiusSmall\n) from '../../styles/variables/_border.css';\n\n@value (colorFillPrimary, colorBorderPrimary) from '../../styles/variables/_color.css';\n\n@value (\n size4,\n size8,\n size12,\n sizeFluid\n) from '../../styles/variables/_size.css';\n\n@value (\n motionDurationSlow,\n motionDurationSlowest,\n motionEaseInEaseOut\n) from '../../styles/variables/_motion.css';\n\n@value (\n spaceNone,\n spaceFluid\n) from '../../styles/variables/_space.css';\n\n.lineContainer {\n position: relative;\n display: flex;\n justify-content: flex-start;\n align-items: center;\n width: sizeFluid;\n background: colorBorderPrimary;\n border-radius: borderRadiusSmall;\n}\n\n.large {\n height: size12;\n}\n\n.medium {\n height: size8;\n}\n\n.small {\n height: size4;\n}\n\n.progressBar {\n background: colorFillPrimary;\n border-radius: borderRadiusSmall;\n height: sizeFluid;\n transition: motionDurationSlow;\n}\n\n.indeterminate {\n position: absolute;\n\n animation: infiniteProgressBar calc(motionDurationSlowest * 3)\n motionEaseInEaseOut;\n animation-iteration-count: infinite;\n animation-fill-mode: both;\n}\n\n@keyframes infiniteProgressBar {\n 0% {\n left: spaceNone;\n width: spaceNone;\n }\n 50% {\n left: spaceNone;\n width: spaceFluid;\n }\n 100% {\n left: spaceFluid;\n width: spaceNone;\n }\n}\n" }, "index": { "path": "index.d.ts", "content": "export { LinearLoader } from '../../components/LinearLoader/LinearLoader';\n//# sourceMappingURL=index.d.ts.map" }, "additional": {} }, "allFiles": [ "LinearLoader.module.css", "LinearLoader.stories.module.css", "LinearLoader.stories.tsx", "LinearLoader.tsx", "index.ts" ] }, "Link": { "name": "Link", "path": "src/components/Link", "files": { "main": { "path": "Link.d.ts", "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nimport type { ColorTypes } from '../../types/typography';\nimport type { IconSize, IconType } from '../../components/Icon';\nexport declare const LINK_AS: Readonly<{\n bodyLarge: \"bodyLarge\";\n bodyMedium: \"bodyMedium\";\n bodySmall: \"bodySmall\";\n buttonTextExtraSmall: \"buttonTextExtraSmall\";\n buttonTextMedium: \"buttonTextMedium\";\n buttonTextSmall: \"buttonTextSmall\";\n formInputMedium: \"formInputMedium\";\n formInputSmall: \"formInputSmall\";\n formLabelMedium: \"formLabelMedium\";\n formLabelSmall: \"formLabelSmall\";\n jumboMedium: \"jumboMedium\";\n subTitleExtraSmall: \"subTitleExtraSmall\";\n subTitleLarge: \"subTitleLarge\";\n subTitleMedium: \"subTitleMedium\";\n subTitleSmall: \"subTitleSmall\";\n titleMedium: \"titleMedium\";\n}>;\nexport type LinkAs = (typeof LINK_AS)[keyof typeof LINK_AS];\nexport declare const ANCHOR_REL: Readonly<{\n alternate: \"alternate\";\n author: \"author\";\n bookmark: \"bookmark\";\n external: \"external\";\n help: \"help\";\n license: \"license\";\n next: \"next\";\n nofollow: \"nofollow\";\n noopener: \"noopener\";\n noreferrer: \"noreferrer\";\n search: \"search\";\n tag: \"tag\";\n}>;\nexport type AnchorRel = (typeof ANCHOR_REL)[keyof typeof ANCHOR_REL];\nexport declare const ANCHOR_TARGET: Readonly<{\n _blank: \"_blank\";\n _self: \"_self\";\n _parent: \"_parent\";\n _top: \"_top\";\n framename: \"framename\";\n}>;\nexport type AnchorTarget = (typeof ANCHOR_TARGET)[keyof typeof ANCHOR_TARGET];\nexport interface BaseLinkProps extends Omit, 'children' | 'onClick' | 'tabIndex' | 'disabled' | 'className' | 'as' | 'rel' | 'target' | 'iconLeftName' | 'iconLeftSize' | 'iconLeftType' | 'iconRightName' | 'iconRightSize' | 'iconRightType' | 'to' | 'href'> {\n children: React.ReactNode;\n onClick?: React.MouseEventHandler;\n tabIndex?: number;\n disabled?: boolean;\n className?: string;\n as?: LinkAs;\n rel?: AnchorRel;\n target?: AnchorTarget;\n iconLeftName?: string;\n iconLeftSize?: IconSize;\n iconLeftType?: IconType;\n iconRightName?: string;\n iconRightSize?: IconSize;\n iconRightType?: IconType;\n testId?: string;\n /**\n * IMPORTANT: If you are using `to` make sure to provide link component from your router\n * if you want to prevent full page reloads in a Single Page Application (SPA).\n *\n * Using `href` in anchor tags causes the browser to navigate to a new URL,\n * resulting in a full page reload. However, in a Single Page Application (SPA), we aim to provide a seamless\n * user experience without such reloads.\n *\n * To achieve client-side navigation and prevent page reloads, use client-side routing libraries\n * (e.g., React Router) and their navigation components (e.g., or with an onClick handler)\n * to handle navigation within your SPA. These components work without triggering full page reloads\n * and maintain the SPA's performance and user experience.\n *\n */\n to?: string;\n href?: string;\n}\nexport interface LinkProps extends Omit {\n color?: ColorTypes;\n underline?: boolean;\n /**\n * Provide your router's link component\n *\n * import {Link} from 'src/rerouter';\n * import {Link as GenesisLink} from '@spaced-out/ui-design-system/lib/components/Link';\n *\n * \n */\n linkComponent?: Flow.AbstractComponent;\n}\nexport declare const Link: Flow.AbstractComponent;\n//# sourceMappingURL=Link.d.ts.map" }, "story": { "path": "Link.stories.tsx", "content": "import * as React from 'react';\n\nimport {TEXT_COLORS} from 'src/types/typography';\n\nimport {ICON_SIZE, ICON_TYPE} from 'src/components/Icon';\nimport type {LinkProps} from 'src/components/Link';\nimport {\n ANCHOR_REL,\n ANCHOR_TARGET,\n Link,\n LINK_AS,\n} from 'src/components/Link/Link';\n\nimport css from 'src/components/Link/Link.stories.module.css';\n\n\nconst colorOptions: Array = [...Object.values(TEXT_COLORS)];\nconst typographyOptions: Array = [...Object.values(LINK_AS)];\nconst anchorRelOptions: Array = [...Object.values(ANCHOR_REL)];\nconst anchorTargetOptions: Array = [...Object.values(ANCHOR_TARGET)];\nconst iconSizeOptions: Array = [...Object.values(ICON_SIZE)];\nconst iconTypeOptions: Array = [...Object.values(ICON_TYPE)];\n\nexport default {\n tags: ['autodocs'],\n title: 'Components/Link',\n component: Link,\n argTypes: {\n color: {\n options: colorOptions,\n description:\n 'Color of the anchor. Should be one of the predefined color string',\n control: {\n type: 'select',\n },\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: 'clickable'},\n },\n },\n iconLeftName: {\n description:\n 'Left icon to be applied to the button, it internally uses the `Icon` component to render icons',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n iconLeftType: {\n description:\n 'Type of Left Icon. Type represents 4 unique icon styles :- Solid, Regular, Duotone and Brands',\n options: iconTypeOptions,\n control: {type: 'select'},\n table: {\n type: {summary: 'string'},\n defaultValue: {summary: 'regular'},\n },\n },\n iconLeftSize: {\n description:\n 'Icon supports three size variants namely small and medium. `small` < `medium` < `large`. [Only available in ``]',\n options: iconSizeOptions,\n control: {type: 'select'},\n table: {\n type: {summary: 'string'},\n defaultValue: {summary: 'small'},\n },\n },\n iconRightName: {\n description:\n 'Right icon to be applied to the button, it internally uses the `Icon` component to render icons',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n iconRightSize: {\n description:\n 'Icon supports three size variants namely small and medium. `small` < `medium` < `large`. [Only available in ``]',\n options: iconSizeOptions,\n control: {type: 'select'},\n table: {\n type: {summary: 'string'},\n defaultValue: {summary: 'small'},\n },\n },\n iconRightType: {\n description:\n 'Type of Right Icon. Type represents 4 unique icon styles :- Solid, Regular, Duotone and Brands',\n options: iconTypeOptions,\n control: {type: 'select'},\n table: {\n type: {summary: 'string'},\n defaultValue: {summary: 'regular'},\n },\n },\n as: {\n options: typographyOptions,\n description:\n 'Typography of the anchor. Should be one of the predefined typography options',\n control: {\n type: 'select',\n },\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: 'buttonTextExtraSmall'},\n },\n },\n linkComponent: {\n description: `\nCustom component to be used as the root element\n\n**IMPORTANT:** If you are using \\`to\\` make sure to provide link component from your router\nif you want to prevent full page reloads in a Single Page Application (SPA).\n`,\n table: {\n type: {summary: 'React.Component'},\n },\n },\n rel: {\n options: anchorRelOptions,\n description:\n 'The rel attribute specifies the relationship between the current document and the linked document. Only used if the href attribute is present.',\n control: {\n type: 'select',\n },\n table: {\n type: {summary: 'enum'},\n },\n },\n target: {\n options: anchorTargetOptions,\n description:\n 'The target property sets or returns the value of the target attribute of a link. The target attribute specifies where to open the linked document.',\n control: {\n type: 'select',\n },\n table: {\n type: {summary: 'enum'},\n },\n },\n to: {\n description:\n 'Link to anchor to. Use this when you pass a router\\'s Link component to the this',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n href: {\n description:\n 'Link to anchor to. Don\\'t use this if you don\\'t want page reloads on route',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n onClick: {\n description:\n '**onClick** handler that is applied to the root `` element',\n action: 'clicked',\n table: {\n type: {summary: '(SyntheticEvent) => mixed'},\n },\n },\n tabIndex: {\n description: 'Tab index applied to input',\n control: {\n type: 'number',\n },\n table: {\n type: {summary: 'string'},\n defaultValue: {summary: 0},\n },\n },\n disabled: {\n description: 'If **true**, the component is disabled',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n underline: {\n description: 'Controls the default underline text decoration',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'string'},\n defaultValue: {summary: 'true'},\n },\n },\n children: {\n description:\n 'Content to be displayed. If you are using react nodes here, this should only have inline elements since Link renders children inside ``',\n control: {\n type: 'text',\n },\n type: {required: true},\n table: {\n type: {summary: 'React.Component | string'},\n },\n },\n className: {\n description: 'Provide an optional className to be applied to the wrapper',\n control: {\n type: 'text',\n },\n table: {\n type: {\n summary: 'string',\n },\n },\n },\n testId: {\n description: 'Test ID for the component',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n },\n parameters: {\n docs: {\n subtitle: 'Generates a Link component.',\n description: {\n component: `\n\\`\\`\\`js\nimport { Link } from \"@spaced-out/ui-design-system/lib/components/Link\";\n\\`\\`\\`\nThe Link component enables developers to effortlessly customize anchor elements with their desired color schemes and typography.\nFurthermore, the Link component provides a simple and accessible way to implement hyperlinks in web pages.\nIt offers various accessibility features, such as keyboard navigation, focus states, and screen reader support.\n\nThe component uses \\`React.forwardRef\\` to pass the ref prop to the inner anchor element.\n\n**IMPORTANT**: If you are using \\`href\\` or \\`to\\` make sure to provide link component from your router\nif you want to prevent full page reloads in a Single Page Application (SPA).\n\nUsing \\`href\\` in anchor tags causes the browser to navigate to a new URL,\nresulting in a full page reload. However, in a Single Page Application (SPA), we aim to provide a seamless\nuser experience without such reloads.\n\nTo achieve client-side navigation and prevent page reloads, use client-side routing libraries\n(e.g., React Router) and their navigation components (e.g., or with an onClick handler)\nto handle navigation within your SPA. These components work without triggering full page reloads\nand maintain the SPA's performance and user experience.\n\n**Usage**\n\n\\`\\`\\`jsx\nimport {Link} from '@spaced-out/ui-design-system/lib/components/Link';\n\nGo to Pages\n\\`\\`\\`\n\n\n**Usage with Routing Library**\n\nTo use the \\`Link\\` with a routing Library, you would need to pass the \\`linkComponent\\` prop to the \\`\\` component.\n\n\\`\\`\\`jsx\nimport {Link} from 'src/rerouter';\nimport {Link as GenesisLink} from '@spaced-out/ui-design-system/lib/components/Link';\n\nGo to Pages\n\\`\\`\\`\n\nIt'll replace the rendered a tag with routing library's Link.\n `,\n },\n },\n storySource: {\n componentPath: '/src/components/Link/Link',\n },\n },\n};\n\nexport const LinkStory = (args: LinkProps) => (\n
\n \n
\n);\n\nLinkStory.args = {\n children: 'Hello World!',\n testId: 'link-story',\n};\n\nexport const WithLeftIconStory = (args: LinkProps) => (\n
\n \n
\n);\n\nWithLeftIconStory.args = {\n children: 'Hello World!',\n iconLeftName: 'link',\n testId: 'link-with-left-icon-story',\n};\n\nexport const WithRightIconStory = (args: LinkProps) => (\n
\n \n
\n);\n\nWithRightIconStory.args = {\n children: 'Hello World!',\n iconRightName: 'arrow-up-right-from-square',\n testId: 'link-with-right-icon-story',\n};\nLinkStory.storyName = 'Link';\nWithLeftIconStory.storyName = 'With Left Icon';\nWithRightIconStory.storyName = 'With Right Icon';\n" }, "css": null, "index": { "path": "index.d.ts", "content": "export * from '../../components/Link/Link';\n//# sourceMappingURL=index.d.ts.map" }, "additional": {} }, "allFiles": [ "Link.stories.module.css", "Link.stories.tsx", "Link.tsx", "index.ts" ] }, "Menu": { "name": "Menu", "path": "src/components/Menu", "files": { "main": { "path": "Menu.d.ts", "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nimport { FixedSizeList, VariableSizeList } from 'react-window';\nimport type { MenuClassNames, MenuLabelTooltip } from '../../types/menu';\nimport type { IconType } from '../../components/Icon/Icon';\ntype ClassNames = MenuClassNames;\ntype OptionClassNames = Readonly<{\n wrapper?: string;\n}>;\nexport type Virtualization = Readonly<{\n enable: boolean;\n /**\n * Height of an option row. A number applies to every row; pass a function\n * for per-row heights (e.g. taller rows for options with descriptions).\n * `index` is the position of the option in the filtered option list —\n * group title rows are not counted.\n */\n itemHeight?: number | ((option: MenuOption, index: number) => number);\n /**\n * Height of a group title row when virtualizing `groupTitleOptions`.\n * A number applies to every title; pass a function for per-title heights\n * (e.g. taller custom title nodes).\n */\n groupTitleHeight?: number | ((groupTitle: React.ReactNode, groupIndex: number) => number);\n /** Max height of the whole card in px, search/header/footer included; never below the first row. */\n menuHeight?: number;\n}>;\n/**\n * Either react-window list Menu may render. Both expose the `scrollToItem`\n * used to keep the keyboard's active option mounted.\n */\ntype VirtualList = FixedSizeList | VariableSizeList;\nexport interface MenuOption {\n key: string;\n classNames?: OptionClassNames;\n label?: string;\n secondaryLabel?: string;\n customComponent?: React.ReactNode;\n iconLeft?: string;\n iconLeftType?: IconType;\n iconRight?: string;\n iconRightType?: IconType;\n disabled?: boolean;\n optionSize?: MenuSizeTypes;\n optionVariant?: MenuOptionsVariant;\n keepMenuOpenOnOptionSelect?: boolean;\n indeterminate?: boolean;\n testId?: string;\n}\nexport interface BaseMenuProps {\n onSelect?: (option: MenuOption, arg2?: React.SyntheticEvent | null | undefined) => unknown;\n selectedOption?: MenuOption | null | undefined;\n optionsVariant?: MenuOptionsVariant;\n selectedKeys?: Array;\n classNames?: ClassNames;\n size?: MenuSizeTypes;\n width?: string;\n menuDisabled?: boolean;\n isFluid?: boolean;\n /**\n * Opt in to the accessibility behavior: keyboard navigation, the\n * `listbox` / `option` roles and their states, focus management on open and\n * close, and the scroll container moving onto the listbox.\n *\n * Off by default, and off is not a degraded mode — it is this component\n * exactly as it behaved before any of it existed: no roles, no ARIA, no key\n * handling, no focus moved, the card scrolling as it always did. Every prop\n * below that exists to serve the accessible behavior (`onTabOut`,\n * `onReturnFocusToInput`, `menuId`, `ariaLabelledBy`, `ariaLabel`,\n * `initialFocusRef`, `activeOptionKey`, `externalKeyboardNav`,\n * `onActiveOptionKeyChange`) is inert while this is unset.\n *\n * It is opt-in per call site so a surface can turn it on, verify it, and\n * leave the rest of the app untouched — the behavior changes focus and DOM\n * structure, and those are the things an app is most likely to have built\n * around.\n */\n enableA11y?: boolean;\n onTabOut?: () => unknown;\n /**\n * Combobox consumers only: return focus to the trigger input (menu stays open)\n * when Tab/Shift+Tab moves off a header/footer control back toward the input.\n * The input lives outside the menu DOM, so it is the centre of the tab order.\n */\n onReturnFocusToInput?: () => void;\n allowSearch?: boolean;\n resolveLabel?: (option: MenuOption) => string | React.ReactNode;\n resolveSecondaryLabel?: (option: MenuOption) => string | React.ReactNode;\n virtualization?: Virtualization;\n header?: React.ReactNode;\n footer?: React.ReactNode;\n showResultText?: boolean;\n staticLabels?: {\n RESULT?: string;\n RESULTS?: string;\n SEARCH_PLACEHOLDER?: string;\n /**\n * Announced by a `Typeahead`'s live region while it is loading, and when a\n * search returns nothing. Here rather than on `Typeahead` so every string a\n * menu can speak is overridden in one place.\n */\n LOADING_RESULTS?: string;\n NO_RESULTS?: string;\n };\n showLabelTooltip?: MenuLabelTooltip;\n allowWrap?: boolean;\n /**\n * id applied to the option `listbox` — the element a trigger's `aria-controls`\n * should reference — and the prefix for the per-option ids that\n * `aria-activedescendant` points at. Falls back to a generated id. It is not\n * on the outer card.\n */\n menuId?: string;\n /**\n * Accessible name for the popup, linked to the trigger that opens it.\n */\n ariaLabelledBy?: string;\n /**\n * Literal accessible name for the listbox, used only when `ariaLabelledBy` is\n * not supplied. Defaults to `'Options'` so the listbox is never unnamed — pass\n * something specific to the content wherever you can.\n */\n ariaLabel?: string;\n /**\n * Marks the Menu as a popup that should auto-focus on open. When provided,\n * Menu moves focus to the search input (or the active option) once it mounts\n * and writes that element into the ref. Omit it for inline Menus (and for\n * combobox triggers using `externalKeyboardNav`) so focus is never stolen.\n */\n initialFocusRef?: React.RefObject;\n /**\n * Controlled active option, honoured only with `externalKeyboardNav`: the\n * trigger outside the menu owns the highlight and reports it here. Without\n * `externalKeyboardNav` Menu manages its own active option (the roving tab\n * stop, or the search field's active descendant) and this prop is ignored.\n */\n activeOptionKey?: string | null;\n /**\n * When true the Menu is driven by an external combobox input (e.g. Dropdown /\n * Typeahead): focus stays on that input, the Menu does not run its own\n * keyboard navigation or move focus into itself, and `activeOptionKey` is a\n * controlled prop reflecting the input's aria-activedescendant.\n */\n externalKeyboardNav?: boolean;\n /** Report active-option changes when `externalKeyboardNav` is set. */\n onActiveOptionKeyChange?: (key: string | null) => void;\n testId?: string;\n}\nexport interface MenuOptionTypes {\n options?: Array;\n composeOptions?: Array>;\n groupTitleOptions?: Array;\n}\nexport type MenuSizeTypes = 'medium' | 'small';\nexport type MenuOptionsVariant = 'checkbox' | 'radio' | 'normal';\nexport interface MenuGroupTitleOption {\n groupTitle?: React.ReactNode;\n options?: Array;\n showLineDivider?: boolean;\n}\nexport interface MenuProps extends BaseMenuProps, MenuOptionTypes {\n}\nexport interface RenderOptionProps extends Omit {\n searchText?: string;\n /** Handle on the virtual list, so Menu can scroll the active option into view. */\n listRef?: React.RefCallback;\n /** Withhold the opening highlight until the user drives the menu themselves. */\n suppressInitialHighlight?: boolean;\n /** Whether the pointer is driving — drops the active option's tint. */\n pointerDriving?: boolean;\n /** Whether focus is inside the menu — a roving highlight is only drawn then. */\n menuHasFocus?: boolean;\n}\n/**\n * Flatten the active option source (options | compose | groups) into one list.\n * Exported because a combobox trigger drives the highlight from outside Menu\n * and needs the same list Menu itself navigates — see `useMenuTrigger`.\n */\nexport declare const getFlatOptions: (props: MenuProps) => MenuOption[];\n/**\n * Key of the option that should own the roving tab stop when the menu opens:\n * the selected option if present, otherwise the first enabled option.\n */\nexport declare const getInitialActiveOptionKey: (props: MenuProps) => string | null;\nexport declare const Menu: Flow.AbstractComponent;\nexport {};\n//# sourceMappingURL=Menu.d.ts.map" }, "story": { "path": "Menu.stories.tsx", "content": "import * as React from 'react';\n\nimport {difference, union} from 'lodash';\n\nimport {ClickAway} from 'src/utils/click-away';\nimport {getFilteredOptionsFromSearchText} from 'src/utils/menu';\n\nimport {Avatar} from 'src/components/Avatar';\nimport {Button, UnstyledButton} from 'src/components/Button';\nimport {Icon} from 'src/components/Icon';\nimport type {\n MenuGroupTitleOption,\n MenuOption,\n MenuProps,\n} from 'src/components/Menu/Menu';\nimport {Menu} from 'src/components/Menu/Menu';\nimport {\n useComboboxMenuTrigger,\n useMenuTrigger,\n} from 'src/components/Menu/useMenuTrigger';\nimport {SearchInput} from 'src/components/SearchInput';\nimport {\n ButtonTextMedium,\n ButtonTextSmallUnderline,\n FormLabelMedium,\n FormLabelSmall,\n SubTitleSmall,\n} from 'src/components/Text';\nimport {Tooltip} from 'src/components/Tooltip';\nimport {Truncate} from 'src/components/Truncate';\n\nimport css from 'src/components/Menu/Menu.stories.module.css';\n\n\nconst textOptions: MenuOption[] = [\n {key: '1', label: 'Option one'},\n {key: '2', label: 'Option two with some extra words to increase length'},\n {\n key: '3',\n label:\n 'Option three with more content to demonstrate truncation and test three lines wrap.',\n },\n {\n key: '4',\n label:\n 'Option four very long option that would truncate and now it is even longer than before to ensure truncation happens',\n },\n {key: '5', label: 'Option five(disabled)', disabled: true},\n {\n key: '6',\n label: 'Option six(disabled) very long option that would truncate',\n disabled: true,\n },\n {key: '7', label: 'Option Seven'},\n {key: '8', label: 'Option Eight'},\n {key: '9', label: 'Option Nine'},\n {key: '10', label: 'Option Ten'},\n {key: '11', label: 'Option Eleven'},\n {key: '12', label: 'Option Twelve'},\n {key: '13', label: 'Option Thirteen'},\n];\n\nconst checkboxOptions: MenuOption[] = [\n {key: '1', label: 'Option one', indeterminate: true},\n {key: '2', label: 'Option two'},\n {key: '3', label: 'Option three', indeterminate: true},\n {\n key: '4',\n label: 'Option four very long option that would truncate',\n },\n {key: '5', label: 'Option five(disabled)', disabled: true},\n {\n key: '6',\n label: 'Option six(disabled) very long option that would truncate',\n disabled: true,\n },\n {key: '7', label: 'Option Seven'},\n];\n\nconst textOptionsWithSecondaryLabel: MenuOption[] = [\n {key: '1', label: 'Option one', secondaryLabel: 'Sub Text'},\n {key: '2', label: 'Option two', secondaryLabel: 'Sub Text'},\n {key: '3', label: 'Option three', secondaryLabel: 'Sub Text'},\n {\n key: '4',\n label: 'Option four very long option that would truncate',\n secondaryLabel: 'Option four very long option that would truncate',\n },\n {\n key: '5',\n label: 'Option five(disabled)',\n disabled: true,\n secondaryLabel: 'Sub Text',\n },\n {\n key: '6',\n label: 'Option six(disabled) very long option that would truncate',\n disabled: true,\n secondaryLabel: 'Sub Text',\n },\n {key: '7', label: 'Option Seven', secondaryLabel: 'Sub Text'},\n {key: '8', label: 'Option Eight', secondaryLabel: 'Sub Text'},\n {key: '9', label: 'Option Nine', secondaryLabel: 'Sub Text'},\n];\n\nconst iconLeftOptions: MenuOption[] = [\n {\n key: '1',\n label: 'Option one',\n iconLeft: 'coffee',\n },\n {key: '2', label: 'Option two', iconLeft: 'user'},\n {\n key: '4',\n label: 'Option four very long option that would truncate',\n iconLeft: 'face-party',\n },\n {\n key: '5',\n label: 'Option five(disabled)',\n disabled: true,\n iconLeft: 'flag',\n },\n {\n key: '6',\n label: 'Option six(disabled) very long option that would truncate',\n disabled: true,\n iconLeft: 'camera',\n },\n];\n\nconst coloredOptions: MenuOption[] = [\n {\n key: '1',\n label: 'Edit',\n iconLeft: 'pen',\n },\n {\n key: '2',\n label: 'Delete',\n iconLeft: 'trash',\n classNames: {wrapper: css.dangerText},\n },\n];\n\nconst iconRightOptions: MenuOption[] = [\n {key: '1', label: 'Option one', iconRight: 'coffee'},\n {key: '2', label: 'Option two', iconRight: 'user'},\n {\n key: '4',\n label: 'Option four very long option that would truncate',\n iconRight: 'face-party',\n },\n {\n key: '5',\n label: 'Option five(disabled)',\n disabled: true,\n iconRight: 'flag',\n },\n {\n key: '6',\n label: 'Option six(disabled) very long option that would truncate',\n disabled: true,\n iconRight: 'camera',\n },\n];\n\nconst iconLeftRightOptions: MenuOption[] = [\n {key: '1', label: 'Option one', iconRight: 'coffee', iconLeft: 'coffee'},\n {key: '2', label: 'Option two', iconRight: 'user', iconLeft: 'coffee'},\n {\n key: '4',\n label: 'Option four very long option that would truncate',\n iconRight: 'face-party',\n iconLeft: 'coffee',\n },\n {\n key: '5',\n label: 'Option five(disabled)',\n disabled: true,\n iconRight: 'flag',\n iconLeft: 'coffee',\n },\n {\n key: '6',\n label: 'Option six(disabled) very long option that would truncate',\n disabled: true,\n iconRight: 'camera',\n iconLeft: 'coffee',\n },\n];\n\nexport default {\n tags: ['autodocs'],\n title: 'Components/Menu',\n argTypes: {\n enableA11y: {\n description:\n '**enableA11y** opts into the accessibility behavior: keyboard navigation, the `listbox` / `option` roles and their states, focus management on open and close, and the scroll container moving onto the listbox. Off by default, where the Menu behaves exactly as it did before any of that existed. Off here too, as everywhere: turn the control on to see the accessible behavior.',\n control: {type: 'boolean'},\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n resolveLabel: {\n description:\n 'A function that resolves the label for a MenuOption. This is useful when you want to customize the label of an option based on some condition',\n table: {\n type: {\n summary: '(option: MenuOption) => string | React.Node',\n },\n },\n },\n resolveSecondaryLabel: {\n description:\n 'A function that resolves the secondary label for a MenuOption. This is useful when you want to customize the secondary label of an option based on some condition',\n table: {\n type: {\n summary: '(option: MenuOption) => string | React.Node',\n },\n },\n },\n onSelect: {\n description:\n '**onSelect** handler is triggered when there is a change in selected option',\n action: 'clicked',\n table: {\n type: {\n summary:\n '(option: MenuOption, ?SyntheticEvent) => mixed',\n },\n },\n },\n onTabOut: {\n description:\n '**onTabOut** is called when Tab (or Shift+Tab) would take focus out of the menu entirely. Supplying it means the menu takes over that key: the default is prevented and the consumer is expected to close the menu and put focus somewhere sensible — normally back on the trigger. Omit it for an inline menu, so Tab simply moves on to the next thing on the page.',\n table: {\n type: {summary: '() => mixed'},\n },\n // Deliberately NOT an `action`: an injected spy is truthy, so the menu\n // would take over Tab and then nothing would close it or move focus,\n // making every inline story look like a keyboard trap.\n },\n onReturnFocusToInput: {\n description:\n 'Combobox consumers only. Called when Tab/Shift+Tab moves off a header/footer control back toward the trigger input, which lives outside the menu DOM and is therefore the centre of the tab order. Return focus to it and keep the menu open. Omit it for menus whose input is inside the menu.',\n table: {\n type: {summary: '() => void'},\n },\n },\n menuId: {\n description:\n 'DOM id applied to the option `listbox`. Wire it to the trigger\\'s `aria-controls` and it is also the prefix for the per-option ids used by `aria-activedescendant`. Falls back to a generated id.',\n table: {\n type: {summary: 'string'},\n },\n },\n ariaLabelledBy: {\n description:\n 'Id of the element that names the popup — normally the trigger, or the field label. `listbox` requires an accessible name, so supply this or `ariaLabel`.',\n table: {\n type: {summary: 'string'},\n },\n },\n ariaLabel: {\n description:\n 'Literal accessible name for the listbox, used only when `ariaLabelledBy` is absent. Prefer naming it after the field rather than echoing a placeholder.',\n table: {\n type: {summary: 'string'},\n },\n },\n initialFocusRef: {\n description:\n 'Marks the Menu as a popup that should take focus when it opens: focus moves to the search field, or the active option, and the resolved element is written back into the ref. Omit it for inline menus, and for combobox triggers using `externalKeyboardNav`, so focus is never stolen.',\n table: {\n type: {summary: 'RefObject'},\n },\n },\n activeOptionKey: {\n description:\n 'Key of the option that owns the roving tab stop, or — with `externalKeyboardNav` — the controlled active descendant.',\n table: {\n type: {summary: 'string | null'},\n },\n },\n externalKeyboardNav: {\n description:\n 'Set when an outside combobox input drives navigation (Dropdown / Typeahead): focus stays on that input, Menu does no option navigation of its own (Tab between its header, options and footer still works) and never moves focus into itself, and `activeOptionKey` becomes a controlled prop mirroring the input\\'s `aria-activedescendant`.',\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n onActiveOptionKeyChange: {\n description:\n 'Reports active-option changes back to the parent. Required when `externalKeyboardNav` is set, since the parent owns that state.',\n table: {\n type: {summary: '(key: string | null) => void'},\n },\n },\n options: {\n description: `list of Options to be displayed in the menu.\n Menu component accepts options / composeOptions / groupTitleOptions whatever is available first and not all.`,\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary: `Array<{\n key?: string,\n label: React.Node,\n customComponent?: React.Node,\n secondaryLabel?: React.Node,\n iconLeft?: string,\n iconLeftType?: IconType,\n iconRight?: string,\n iconRightType?: IconType,\n disabled?: boolean,\n optionSize?: MenuSizeTypes,\n indeterminate?: boolean,\n }>`,\n },\n },\n },\n composeOptions: {\n description: `list of list of Options are grouped and displayed in the menu.\n Menu component accepts options / composeOptions / groupTitleOptions whatever is available first and not all.`,\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary: `Array>`,\n },\n },\n },\n groupTitleOptions: {\n description: `List of Options are grouped with a title(each group contains a set of options) and displayed in the menu.\n Menu component accepts options / composeOptions / groupTitleOptions whatever is available first and not all.`,\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary: `Array<{\n groupTitle?: React.Node,\n options?: Array\n }>`,\n },\n },\n },\n selectedOption: {\n description: `Used in cases where you want to pre-select an option as soon as the component renders.\n Selection is triggered when the selected option exactly matches one of the passed option.\n **Note:** This prop would be deprecated soon. Please use \\`selectedKeys\\` instead\n `,\n control: {\n type: 'object',\n },\n table: {\n type: {summary: 'MenuOption'},\n },\n },\n optionsVariant: {\n description: 'Menu supports multiple options variant',\n control: {\n type: 'select',\n },\n options: ['checkbox', 'radio', 'normal'],\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: 'normal'},\n },\n },\n selectedKeys: {\n description:\n 'Selected keys corresponding to options. These options are shown as selected in UI',\n control: {\n type: 'array',\n },\n table: {\n type: {summary: 'Array'},\n },\n },\n classNames: {\n description:\n 'External classnames to be applied. Wrapper gets applied to Menu wrapper and option gets applied to each option in the menu.',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary:\n '{wrapper?: string, option?: string, groupTitle?: string, optionTextContainer?: string, optionTextLabel?: string, header?: string, footer?: string}',\n },\n },\n },\n size: {\n description:\n 'Menu supports only two size variants namely small and medium. `small` < `medium`',\n control: {\n type: 'radio',\n },\n options: ['small', 'medium'],\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: 'medium'},\n },\n },\n width: {\n description:\n 'Manual width control. This overrides the default width considerations of Menu',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n menuDisabled: {\n description: 'if **true**, the option is disabled',\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: false},\n },\n },\n isFluid: {\n description:\n 'if **true**, the component would take the width of the container it is placed in',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: false},\n },\n },\n allowSearch: {\n description: `if **true**, the component would show a search input on top of menu.\n This is a simple **static search**\n which filter options by **matching search text to option label**`,\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: false},\n },\n },\n virtualization: {\n description: `If **Enabled**, the options will only be rendered when they are within the component's viewport. **menuHeight** accepts numerical input, interpreted as pixel values. **itemHeight** accepts a number (same height for every option row) or a function \\`(option, index) => number\\` for per-row heights — \\`index\\` is the option's position in the filtered option list (group titles are not counted). **groupTitleHeight** sizes group title rows when virtualizing \\`groupTitleOptions\\`; it accepts a number or a function \\`(groupTitle, groupIndex) => number\\`.`,\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary:\n '{enable: boolean, menuHeight?: number, itemHeight?: number | ((option, index) => number), groupTitleHeight?: number | ((groupTitle, groupIndex) => number)}',\n },\n },\n },\n header: {\n description: 'Custom Header For the Menu',\n table: {\n type: {\n summary: 'React.Node',\n },\n },\n },\n footer: {\n description: 'Custom Header For the Menu',\n table: {\n type: {\n summary: 'React.Node',\n },\n },\n },\n showResultText: {\n description: `if **true**, shows result text below **search input**.\n **Note:** For the result text to be displayed below the search input, please ensure that allowSearch is set to true.`,\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: true},\n },\n },\n staticLabels: {\n description:\n 'External labels to be assigned to static text displayed in the UI.',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary: '{[key: string]: string}',\n },\n defaultValue: {\n summary: `{RESULT: 'result', RESULTS: 'results', SEARCH_PLACEHOLDER: 'Search...'}`,\n },\n },\n },\n showLabelTooltip: {\n description: 'Show Tooltip on the label of the menu option if truncated',\n control: {\n type: 'object',\n },\n table: {\n type: {summary: 'MenuLabelTooltip'},\n },\n },\n allowWrap: {\n description:\n 'Allows the label to wrap up to 3 lines. If truncated, a tooltip will display up to 10 lines.',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: false},\n },\n },\n testId: {\n description: 'Test ID for the component',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n },\n parameters: {\n docs: {\n subtitle: 'Generates a Menu component',\n description: {\n component: `\n\\`\\`\\`js\nimport { Menu } from \"@spaced-out/ui-design-system/lib/components/Menu\";\n\\`\\`\\`\n**Menu** is a list of choices on a temporary surface. It appears on interacts with a button, or other control. This is a standalone Menu component,\nin real world use cases Menu component would be used in conjunction with other component like Button, Input, Typeahead, etc. Each option in the Menu\ncomponent is implemented as an \\`UnstyledButton\\`.\n- The component also supports custom **header** as \\`React Component\\` and this is then passed in\nthe **Menu** Component.\n- The component also supports custom **footer** as \\`React Component\\` and this is then passed in\nthe **Menu** Component. This might be useful when you need\nto save some state in the parent component.\n `,\n },\n },\n storySource: {\n componentPath: '/src/components/Menu/Menu',\n },\n },\n};\n\nexport const TextOnlyStory = (args: MenuProps) => ;\n\nTextOnlyStory.args = {\n isFluid: false,\n menuDisabled: false,\n size: 'medium',\n options: textOptions,\n selectedKeys: ['2'],\n testId: 'menu-text-only-story',\n};\nexport const TextWithTooltipStory = (args: MenuProps) => ;\n\nTextWithTooltipStory.args = {\n isFluid: false,\n menuDisabled: false,\n size: 'medium',\n options: textOptions,\n selectedKeys: ['2'],\n showLabelTooltip: {maxLines: 2},\n testId: 'menu-text-with-tooltip-story',\n};\n\nexport const MenuWithWrapStory = (args: MenuProps) => {\n const [selectedKeys, setSelectedKeys] = React.useState(\n args.selectedKeys || [],\n );\n const selectKeys = (option: MenuOption) => {\n setSelectedKeys([option.key]);\n };\n\n return ;\n};\n\nMenuWithWrapStory.args = {\n isFluid: false,\n menuDisabled: false,\n size: 'medium',\n options: textOptions,\n selectedKeys: ['2'],\n allowWrap: true,\n testId: 'menu-with-wrap-story',\n};\n\nexport const WithSearchStory = (args: MenuProps) => ;\n\nWithSearchStory.args = {\n isFluid: false,\n menuDisabled: false,\n size: 'medium',\n options: textOptions,\n allowSearch: true,\n testId: 'menu-with-search-story',\n};\n\nexport const TextAndIconLeftStory = (args: MenuProps) => ;\n\nTextAndIconLeftStory.args = {\n isFluid: false,\n menuDisabled: false,\n size: 'medium',\n options: iconLeftOptions,\n selectedKeys: ['2'],\n testId: 'menu-text-and-icon-left-story',\n};\n\n/**\n * To make one of the options colored, you can set the classNames wrapper property in the option object.\n * Eg:\n * You would need to set the color of the option and manage the hover, focus and active state yourself.\n * ### JS\n * ```\n * const coloredOptions: MenuOption[] = [\n * {\n * key: '1',\n * label: 'Edit',\n * iconLeft: 'coffee',\n * },\n * {\n * key: '2',\n * label: 'Delete',\n * iconLeft: 'trash',\n * classNames: { wrapper: css.dangerText },\n * },\n * ];\n * ```\n * ### CSS\n * ```\n * .dangerText:hover,\n * .dangerText:active,\n * .dangerText:focus {\n * color: colorTextDanger;\n * }\n * ```\n */\nexport const ColoredOptionStory = (args: MenuProps) => ;\n\nColoredOptionStory.args = {\n isFluid: false,\n menuDisabled: false,\n size: 'medium',\n options: coloredOptions,\n testId: 'menu-colored-option-story',\n};\n\nexport const TextAndIconRightStory = (args: MenuProps) => ;\n\nTextAndIconRightStory.args = {\n isFluid: false,\n menuDisabled: false,\n size: 'medium',\n options: iconRightOptions,\n selectedKeys: ['2'],\n testId: 'menu-text-and-icon-right-story',\n};\n\nexport const TextAndDualIconStory = (args: MenuProps) => ;\n\nTextAndDualIconStory.args = {\n isFluid: false,\n menuDisabled: false,\n size: 'medium',\n options: iconLeftRightOptions,\n selectedKeys: ['2'],\n testId: 'menu-text-and-dual-icon-story',\n};\n\nexport const DualTextStory = (args: MenuProps) => ;\n\nDualTextStory.args = {\n isFluid: false,\n menuDisabled: false,\n size: 'medium',\n options: textOptionsWithSecondaryLabel,\n selectedKeys: ['2'],\n testId: 'menu-dual-text-story',\n};\n\nexport const WithResolversStory = (args: MenuProps) => {\n const resolveLabel = (option: MenuOption) => (\n
\n {parseInt(option.key) < 6 ? (\n \n ) : (\n \n )}\n\n \n {option.label}\n \n
\n );\n\n return ;\n};\n\nWithResolversStory.args = {\n isFluid: false,\n menuDisabled: false,\n size: 'medium',\n options: textOptions,\n testId: 'menu-with-resolvers-story',\n};\n\nconst composeMenuOptions: Array> = [\n [\n {\n key: '1',\n label: 'Option one',\n secondaryLabel: 'Sub Text',\n optionSize: 'small',\n },\n {\n key: '2',\n label: 'Option two',\n secondaryLabel: 'Sub Text',\n optionSize: 'small',\n },\n {\n key: '3',\n label: 'Option three',\n secondaryLabel: 'Sub Text',\n optionSize: 'small',\n },\n ],\n [\n {\n iconLeft: 'coffee',\n key: '4',\n label: 'Option one',\n optionSize: 'medium',\n },\n ],\n [\n {\n iconLeft: 'coffee',\n key: '5',\n label: 'Option one',\n optionSize: 'medium',\n },\n ],\n];\n\nexport const ComposeMenuStory = (args: MenuProps) => ;\n\nComposeMenuStory.args = {\n isFluid: false,\n menuDisabled: false,\n size: 'medium',\n composeOptions: composeMenuOptions,\n selectedKeys: ['2'],\n testId: 'menu-compose-story',\n};\n\nconst customComponentMenuOptions: Array = [\n {\n key: '1',\n customComponent: (\n
\n \n Angelina White\n
\n ),\n },\n {\n key: '2',\n customComponent: (\n
\n \n John Smith\n
\n ),\n },\n {\n key: '3',\n\n customComponent: (\n
\n \n Sarah Parker\n
\n ),\n },\n];\n\nexport const CustomComponentMenuStory = (args: MenuProps) => ;\n\nCustomComponentMenuStory.args = {\n isFluid: false,\n menuDisabled: false,\n classNames: {option: css.optionText},\n size: 'medium',\n options: customComponentMenuOptions,\n selectedKeys: ['2'],\n testId: 'menu-custom-component-story',\n};\n\nconst groupTitleComponentMenuOptions: Array = [\n {\n groupTitle: (\n
\n Fast Food\n
\n \n \n \n
\n
\n ),\n options: [\n {\n key: '1',\n iconLeft: 'burger',\n label: 'Burger',\n },\n {\n key: '2',\n iconLeft: 'pizza',\n label: 'Pizza',\n },\n {\n key: '3',\n iconLeft: 'french-fries',\n label: 'Fries',\n },\n ],\n },\n {\n showLineDivider: true,\n groupTitle: (\n
\n Fruits\n
\n \n \n \n
\n
\n ),\n options: [\n {\n key: '7',\n iconLeft: 'banana',\n label: 'Banana',\n },\n {\n key: '8',\n iconLeft: 'pear',\n label: 'Pear',\n },\n {\n key: '9',\n iconLeft: 'lemon',\n label: 'Lemon',\n },\n ],\n },\n];\n\nexport const GroupTitleMenuStory = (args: MenuProps) => (\n \n);\n\nGroupTitleMenuStory.args = {\n isFluid: false,\n menuDisabled: false,\n classNames: {option: css.optionText},\n size: 'medium',\n groupTitleOptions: groupTitleComponentMenuOptions,\n selectedKeys: ['2'],\n testId: 'menu-group-title-story',\n};\n\nexport const VirtualizedGroupTitleMenuStory = (args: MenuProps) => (\n \n);\n\nVirtualizedGroupTitleMenuStory.args = {\n isFluid: false,\n menuDisabled: false,\n classNames: {option: css.optionText},\n size: 'medium',\n allowSearch: true,\n groupTitleOptions: Array.from({length: 20}, (_, groupIdx) => ({\n groupTitle: `Group ${groupIdx + 1}`,\n options: Array.from({length: 25}, (_, optionIdx) => ({\n key: `${groupIdx}-${optionIdx}`,\n label: `Group ${groupIdx + 1} option ${optionIdx + 1}`,\n // every 5th option carries a description, so it needs a taller row\n ...(optionIdx % 5 === 0\n ? {secondaryLabel: 'Option with a description'}\n : {}),\n })),\n })),\n virtualization: {\n enable: true,\n // size rows from the option itself, not its index\n itemHeight: (option: MenuOption) => (option.secondaryLabel ? 56 : 36),\n groupTitleHeight: 32,\n menuHeight: 320,\n },\n selectedKeys: ['0-1'],\n testId: 'menu-virtualized-group-title-story',\n};\n\nexport const VirtualizedCustomGroupTitleMenuStory = (args: MenuProps) => (\n \n);\n\nVirtualizedCustomGroupTitleMenuStory.args = {\n isFluid: false,\n menuDisabled: false,\n classNames: {option: css.optionText},\n size: 'medium',\n allowSearch: true,\n groupTitleOptions: Array.from({length: 10}, (_, groupIdx) => ({\n // every other group has a two-line custom title node\n groupTitle:\n groupIdx % 2 === 0 ? (\n
\n
Group {groupIdx + 1}
\n
\n Two-line custom header\n
\n
\n ) : (\n `Group ${groupIdx + 1}`\n ),\n options: Array.from({length: 15}, (_, optionIdx) => ({\n key: `${groupIdx}-${optionIdx}`,\n label: `Group ${groupIdx + 1} option ${optionIdx + 1}`,\n })),\n })),\n virtualization: {\n enable: true,\n itemHeight: 36,\n // tall rows for the two-line custom titles, default for the rest\n groupTitleHeight: (_groupTitle: React.ReactNode, groupIndex: number) =>\n groupIndex % 2 === 0 ? 56 : 32,\n menuHeight: 320,\n },\n testId: 'menu-virtualized-custom-group-title-story',\n};\n\n/*\n * Roving focus over a virtualized list: `allowSearch` is off, so the options\n * themselves own focus rather than a search field, and arrow keys / Home / End\n * / type-ahead move real DOM focus between rows that mount and unmount as the\n * list scrolls. Kept as its own story because that pairing is what breaks when\n * a virtualized row is re-created underneath the focused element.\n */\nexport const VirtualizedRovingFocusMenuStory = (args: MenuProps) => (\n \n);\n\nVirtualizedRovingFocusMenuStory.args = {\n // This story exists to demonstrate the accessible behavior, so it opts in.\n enableA11y: true,\n isFluid: false,\n menuDisabled: false,\n classNames: {option: css.optionText},\n size: 'medium',\n allowSearch: false,\n groupTitleOptions: Array.from({length: 20}, (_, groupIdx) => ({\n groupTitle: `Group ${groupIdx + 1}`,\n options: Array.from({length: 25}, (_, optionIdx) => ({\n key: `${groupIdx}-${optionIdx}`,\n label: `Group ${groupIdx + 1} option ${optionIdx + 1}`,\n })),\n })),\n virtualization: {\n enable: true,\n itemHeight: 36,\n groupTitleHeight: 32,\n menuHeight: 320,\n },\n selectedKeys: ['0-1'],\n testId: 'menu-virtualized-roving-focus-story',\n};\n\nexport const VirtualizedVariableHeightMenuStory = (args: MenuProps) => (\n \n);\n\nVirtualizedVariableHeightMenuStory.args = {\n isFluid: false,\n menuDisabled: false,\n classNames: {option: css.optionText},\n size: 'medium',\n allowSearch: true,\n options: Array.from({length: 200}, (_, optionIdx) => ({\n key: `${optionIdx}`,\n label: `Option ${optionIdx + 1}`,\n ...(optionIdx % 4 === 0\n ? {secondaryLabel: 'Option with a description'}\n : {}),\n })),\n virtualization: {\n enable: true,\n itemHeight: (option: MenuOption) => (option.secondaryLabel ? 56 : 36),\n menuHeight: 320,\n },\n selectedKeys: ['1'],\n testId: 'menu-virtualized-variable-height-story',\n};\n\n/*\n * Bulk actions over a filtered checkbox list.\n *\n * The actions live in the menu `header`, NOT in a group title: a group title is\n * rendered inside the `role=\"listbox\"`, which may only own `option` and `group`\n * children, so interactive controls in there are invalid (axe reports\n * `aria-required-children`, and AT announces a button where it expects an\n * option). The header sits outside the listbox, which is where controls that\n * act ON the list belong. The label naming the list is handed to Menu as\n * `ariaLabelledBy`, so the listbox is named \"Values (n)\" rather than the\n * generic default.\n */\nconst GroupTitleActionMenu = (args: MenuProps) => {\n const valuesLabelId = 'menu-group-title-action-values';\n const [searchText, setSearchText] = React.useState('');\n const [selectedKeys, setSelectedKeys] = React.useState(\n args.selectedKeys || [],\n );\n const optionsFiltered = getFilteredOptionsFromSearchText(\n textOptions,\n searchText,\n );\n const optionsFilteredKeys = optionsFiltered\n .filter(({disabled}) => !disabled)\n .map(({key}) => key);\n\n React.useEffect(() => {\n setSelectedKeys(args.selectedKeys || []);\n }, [args.selectedKeys]);\n\n const selectKeys = (option: MenuOption) => {\n if (selectedKeys.includes(option.key)) {\n setSelectedKeys(difference(selectedKeys, [option.key]));\n } else {\n setSelectedKeys(union(selectedKeys, [option.key]));\n }\n };\n\n const selectAllKeys: React.MouseEventHandler = () => {\n setSelectedKeys(union(selectedKeys, optionsFilteredKeys));\n };\n\n const clearSelectedKeys: React.MouseEventHandler = () => {\n setSelectedKeys(difference(selectedKeys, optionsFilteredKeys));\n };\n\n return (\n \n setSearchText(e.target.value)}\n onClear={() => setSearchText('')}\n size={args.size}\n />\n
\n \n \n {`Values (${optionsFiltered.length})`}\n \n \n
\n \n \n Clear\n \n \n \n \n Select All\n \n \n
\n
\n \n }\n options={optionsFiltered}\n />\n );\n};\n\nexport const GroupTitleActionMenuStory = (args: MenuProps) => (\n \n);\n\nGroupTitleActionMenuStory.args = {\n isFluid: false,\n menuDisabled: false,\n classNames: {option: css.optionText},\n size: 'medium',\n selectedKeys: ['2'],\n testId: 'menu-group-title-action-story',\n};\n\nexport const CheckboxMenuStory = (args: MenuProps) => {\n const [selectedKeys, setSelectedKeys] = React.useState(\n args.selectedKeys || [],\n );\n\n React.useEffect(() => {\n setSelectedKeys(args.selectedKeys || []);\n }, [args.selectedKeys]);\n\n const selectKeys = (option: MenuOption) => {\n if (selectedKeys.includes(option.key)) {\n setSelectedKeys(selectedKeys.filter((item) => item !== option.key));\n } else {\n setSelectedKeys([...selectedKeys, option.key]);\n }\n };\n\n return ;\n};\n\nCheckboxMenuStory.args = {\n isFluid: false,\n menuDisabled: false,\n classNames: {option: css.optionText},\n size: 'medium',\n options: checkboxOptions,\n optionsVariant: 'checkbox',\n selectedKeys: ['1', '4'],\n testId: 'menu-checkbox-story',\n};\n\nexport const RadioMenuStory = (args: MenuProps) => {\n const [selectedKeys, setSelectedKeys] = React.useState(\n args.selectedKeys || [],\n );\n\n React.useEffect(() => {\n setSelectedKeys(args.selectedKeys || []);\n }, [args.selectedKeys]);\n\n const selectKeys = (option: MenuOption) => {\n setSelectedKeys([option.key]);\n };\n\n return ;\n};\n\nRadioMenuStory.args = {\n isFluid: false,\n menuDisabled: false,\n classNames: {option: css.optionText},\n size: 'medium',\n options: textOptions,\n optionsVariant: 'radio',\n selectedKeys: ['1'],\n testId: 'menu-radio-story',\n};\n\nexport const MenuHeader = () => (\n
\n Menu Header\n
\n);\n\nexport const MenuFooter = ({\n onSave,\n onCancel,\n}: {\n onSave?: () => void;\n onCancel?: () => void;\n}) => (\n
\n \n \n
\n);\n\nexport const WithHeaderStory = (args: MenuProps) => (\n } />\n);\n\nWithHeaderStory.args = {\n isFluid: false,\n menuDisabled: false,\n size: 'small',\n options: textOptions,\n selectedKeys: ['2'],\n testId: 'menu-with-header-story',\n};\n\nexport const WithFooterStory = (args: MenuProps) => (\n } />\n);\n\nWithFooterStory.args = {\n isFluid: false,\n menuDisabled: false,\n size: 'small',\n options: textOptions,\n selectedKeys: ['2'],\n testId: 'menu-with-footer-story',\n};\n\nexport const WithHeaderAndFooterStory = (args: MenuProps) => {\n const [selectedKeys, setSelectedKeys] = React.useState(\n args.selectedKeys || [],\n );\n\n React.useEffect(() => {\n setSelectedKeys(args.selectedKeys || []);\n }, [args.selectedKeys]);\n\n const selectKeys = (option: MenuOption) => {\n if (selectedKeys.includes(option.key)) {\n setSelectedKeys(selectedKeys.filter((item) => item !== option.key));\n } else {\n setSelectedKeys([...selectedKeys, option.key]);\n }\n };\n\n return (\n }\n footer={}\n />\n );\n};\n\nWithHeaderAndFooterStory.args = {\n isFluid: false,\n menuDisabled: false,\n classNames: {option: css.optionText},\n options: textOptions,\n optionsVariant: 'checkbox',\n selectedKeys: ['1', '4'],\n testId: 'menu-with-header-and-footer-story',\n};\n/*\n * The two trigger hooks, wired the way a consumer would wire them. These are the\n * only stories that mount `useMenuTrigger` / `useComboboxMenuTrigger` directly,\n * so a consumer-side change to either shows up here first: the trigger's ARIA\n * before and after opening, ArrowDown opening the popup, focus moving in (or\n * staying on the input), and Tab/Escape closing it and returning focus.\n */\nconst ButtonTriggerMenu = (args: MenuProps) => {\n // A trigger that already has an id of its own: hand it to the hook rather\n // than setting it on the element as well, and the hook keeps it — a generated\n // one would break whatever the consumer points at it — and names the listbox\n // through it unless `ariaLabel` says otherwise. Setting it in both places\n // would be a duplicate prop, which is what `getTriggerProps` returning the\n // resolved id exists to avoid.\n const menuTrigger = useMenuTrigger({id: 'menu-trigger-demo'});\n return (\n \n {({isOpen, onOpen, clickAway, boundaryRef, triggerRef}) => (\n
\n }\n {...menuTrigger.getTriggerProps({isOpen, onOpen})}\n onClick={(e) => {\n e.stopPropagation();\n onOpen();\n }}\n >\n Actions\n \n {isOpen && (\n }\n className={css.triggerDemoPopup}\n >\n clickAway()}\n onTabOut={clickAway}\n />\n
\n )}\n \n )}\n \n );\n};\n\nexport const WithButtonTriggerStory = (args: MenuProps) => (\n \n);\n\nWithButtonTriggerStory.args = {\n // This story exists to demonstrate the accessible behavior, so it opts in.\n enableA11y: true,\n isFluid: false,\n menuDisabled: false,\n classNames: {option: css.optionText},\n size: 'medium',\n options: textOptions,\n selectedKeys: ['2'],\n header: ,\n footer: ,\n testId: 'menu-with-button-trigger-story',\n};\n\nconst ComboboxTriggerMenu = (args: MenuProps) => {\n const menuRef = React.useRef(null);\n const triggerWrapRef = React.useRef(null);\n const clickAwayFnRef = React.useRef<(() => void) | null>(null);\n const [isMenuOpen, setIsMenuOpen] = React.useState(false);\n const [selected, setSelected] = React.useState(\n args.selectedOption ?? null,\n );\n const menu: MenuProps = {...args, selectedOption: selected};\n const focusInput = () =>\n triggerWrapRef.current?.querySelector('input')?.focus();\n const select = (option: MenuOption) => {\n setSelected(option);\n clickAwayFnRef.current?.();\n focusInput();\n };\n const combobox = useComboboxMenuTrigger({\n menu,\n menuRef,\n isOpen: isMenuOpen,\n onSelectOption: select,\n onClose: () => clickAwayFnRef.current?.(),\n focusTrigger: focusInput,\n triggerAriaLabel: 'Fruit',\n });\n return (\n \n onChange={setIsMenuOpen}\n restoreFocusOnClose\n >\n {({isOpen, onOpen, clickAway, boundaryRef, triggerRef}) => {\n clickAwayFnRef.current = clickAway;\n return (\n
\n
\n {\n e.stopPropagation();\n onOpen();\n }}\n onChange={() => undefined}\n />\n
\n {isOpen && (\n }\n className={css.triggerDemoPopup}\n >\n \n
\n )}\n \n );\n }}\n \n );\n};\n\nexport const WithComboboxTriggerStory = (args: MenuProps) => (\n \n);\n\nWithComboboxTriggerStory.args = {\n // This story exists to demonstrate the accessible behavior, so it opts in.\n enableA11y: true,\n isFluid: false,\n menuDisabled: false,\n classNames: {option: css.optionText},\n size: 'medium',\n options: textOptions,\n footer: ,\n testId: 'menu-with-combobox-trigger-story',\n};\n\nTextOnlyStory.storyName = 'Text Only';\nWithButtonTriggerStory.storyName = 'With Button Trigger (useMenuTrigger)';\nWithComboboxTriggerStory.storyName =\n 'With Combobox Trigger (useComboboxMenuTrigger)';\nTextWithTooltipStory.storyName = 'Text With Tooltip';\nMenuWithWrapStory.storyName = 'Menu With Wrap';\nWithSearchStory.storyName = 'With Search';\n/*\n * The same menu as `Text Only`, with the accessibility opt-in turned on, so the\n * two can be compared side by side.\n *\n * With `enableA11y` the options become a named `listbox` of `option`s, one of\n * them holds the roving tab stop, and the arrow keys, Home/End, PageUp/PageDown\n * and type-ahead drive it. The highlight is only drawn while focus is inside\n * the menu, because under roving focus the highlight IS the focus.\n *\n * Every other story here leaves the prop off, which is the default and is this\n * component exactly as it behaved before any of this existed. Flip the control\n * on any of them to see the difference.\n */\nexport const AccessibleMenuStory = (args: MenuProps) => ;\n\nAccessibleMenuStory.args = {\n enableA11y: true,\n isFluid: false,\n menuDisabled: false,\n size: 'medium',\n options: textOptions,\n selectedKeys: ['2'],\n ariaLabel: 'Fruit',\n testId: 'menu-accessible-story',\n};\n\n/*\n * The accessible menu with its own filter field. The field is a `searchbox`,\n * not a second combobox, and the list it filters is a focusable `listbox` that\n * reports the active option through `aria-activedescendant` — so the field\n * keeps the keys it needs while the arrow keys still move the highlight.\n */\nexport const AccessibleSearchMenuStory = (args: MenuProps) => (\n \n);\n\nAccessibleSearchMenuStory.args = {\n enableA11y: true,\n isFluid: false,\n menuDisabled: false,\n size: 'medium',\n allowSearch: true,\n options: textOptions,\n selectedKeys: ['2'],\n ariaLabel: 'Fruit',\n testId: 'menu-accessible-search-story',\n};\n\nTextAndIconLeftStory.storyName = 'Text And Icon Left';\nColoredOptionStory.storyName = 'Colored Option';\nTextAndIconRightStory.storyName = 'Text And Icon Right';\nTextAndDualIconStory.storyName = 'Text And Dual Icon';\nDualTextStory.storyName = 'Dual Text';\nWithResolversStory.storyName = 'With Resolvers';\nComposeMenuStory.storyName = 'Compose Menu';\nCustomComponentMenuStory.storyName = 'Custom Component Menu';\nGroupTitleMenuStory.storyName = 'Group Title Menu';\nVirtualizedGroupTitleMenuStory.storyName = 'Virtualized Group Title Menu';\nVirtualizedCustomGroupTitleMenuStory.storyName =\n 'Virtualized Custom Group Title Menu';\nVirtualizedVariableHeightMenuStory.storyName =\n 'Virtualized Variable Height Menu';\nVirtualizedRovingFocusMenuStory.storyName =\n 'Virtualized Menu With Roving Focus';\nGroupTitleActionMenuStory.storyName = 'Group Title Action Menu';\nCheckboxMenuStory.storyName = 'Checkbox Menu';\nRadioMenuStory.storyName = 'Radio Menu';\nWithHeaderStory.storyName = 'With Header';\nWithFooterStory.storyName = 'With Footer';\nWithHeaderAndFooterStory.storyName = 'With Header And Footer';\nAccessibleMenuStory.storyName = 'Accessible (enableA11y)';\nAccessibleSearchMenuStory.storyName = 'Accessible With Search (enableA11y)';\n" }, "css": { "path": "Menu.module.css", "content": "@value (\n borderWidthPrimary,\n borderWidthNone,\n borderWidthTertiary,\n borderRadiusMedium,\n borderRadiusSmall\n) from '../../styles/variables/_border.css';\n\n@value (\n colorBackgroundSecondary,\n colorFillSecondary,\n colorFillPrimary,\n colorTextDisabled,\n colorTextPrimary,\n colorTextSecondary,\n colorTextTertiary,\n colorBackgroundTertiary,\n colorFocusSecondary\n) from '../../styles/variables/_color.css';\n\n@value (\n colorBorderPrimary\n) from '../../styles/variables/_color.css';\n\n@value (\n size160,\n size42,\n size34,\n size50,\n size300,\n size240,\n size228,\n size276,\n sizeFluid\n) from '../../styles/variables/_size.css';\n\n@value (\n spaceNone,\n spaceSmall,\n spaceXSmall,\n spaceXXSmall,\n spaceMedium\n) from '../../styles/variables/_space.css';\n\n@value (\n elevationMenu,\n elevationCard\n) from '../../styles/variables/_elevation.css';\n\n.menuCard {\n position: relative;\n composes: boxShadow2 from '../../styles/shadow.module.css';\n composes: borderPrimary from '../../styles/border.module.css';\n background-color: colorBackgroundTertiary;\n display: flex;\n flex-flow: column;\n padding: spaceXSmall;\n min-width: size160;\n border-radius: borderRadiusMedium;\n overflow: auto;\n z-index: elevationMenu;\n}\n\n/*\n * The options carry their own scroll container, so the card must not scroll as\n * well — otherwise both would show a scrollbar. `hidden` also keeps a pinned\n * header / footer inside the border radius.\n */\n.menuCardA11y.menuCardTopPaddingZero,\n.menuCardA11y.menuCardBottomPaddingZero,\n.menuCardNoScroll {\n overflow: hidden;\n}\n\n.menuCardTopPaddingZero {\n padding-top: spaceNone;\n}\n\n.menuCardBottomPaddingZero {\n padding-bottom: spaceNone;\n}\n\n/*\n * Scrolls the options only. A header / footer is a flex sibling of this element\n * rather than something sticky inside it, so the scrollbar spans just the option\n * list — it no longer runs the whole height of the card behind the bars — and no\n * option can be clipped under them. `min-height: 0` is what lets a flex item\n * actually shrink and scroll instead of growing to fit its content.\n */\n.optionsScroll {\n display: flex;\n flex-flow: column;\n flex: 1 1 auto;\n min-height: 0;\n overflow-y: auto;\n}\n\n/*\n * Collapse a menu that renders nothing. `:empty` alone no longer suffices: the\n * card always holds the (possibly empty) role=\"listbox\" element so the trigger's\n * aria-controls resolves, so Menu also sets `.menuCardEmpty` explicitly.\n */\n.menuCard:empty,\n.menuCard.menuCardEmpty {\n padding: spaceNone;\n border: none;\n}\n\n.medium {\n width: size300;\n min-width: size300;\n max-height: size276;\n}\n\n.mediumWithHeader,\n.mediumWithFooter {\n max-height: calc(size276 + size50);\n}\n\n.mediumWithHeaderAndFooter {\n max-height: calc(size276 + size50 + size50);\n}\n\n.small {\n width: size240;\n min-width: size240;\n max-height: size228;\n}\n\n.smallWithHeader,\n.smallWithFooter {\n max-height: calc(size228 + size50);\n}\n\n.smallWithHeaderAndFooter {\n max-height: calc(size228 + size50 + size50);\n}\n\n.fluid {\n width: sizeFluid;\n min-width: size160;\n}\n\n.option {\n composes: motionEaseInEaseOut from '../../styles/animation.module.css';\n flex: 0 0 auto;\n width: sizeFluid;\n display: flex;\n border-radius: borderRadiusSmall;\n align-items: center;\n cursor: pointer;\n column-gap: spaceSmall;\n color: colorTextSecondary;\n}\n\n.optionTextContainer {\n display: flex;\n flex-flow: column;\n gap: spaceXXSmall;\n}\n\n.optionTextLabel,\n.optionTextSecondaryLabel {\n display: flex;\n flex-flow: column;\n align-items: flex-start;\n text-align: left;\n}\n\n.withIconLeft {\n padding-left: spaceXSmall;\n}\n\n.withIconRight {\n padding-right: spaceXSmall;\n}\n\n.icon {\n color: inherit;\n}\n\n.rightIcon {\n margin-left: auto;\n}\n\n.optionSmall {\n composes: menuTextSmall from '../../styles/typography.module.css';\n padding: spaceXSmall spaceSmall;\n}\n\n.optionMedium {\n composes: menuTextMedium from '../../styles/typography.module.css';\n padding: spaceSmall spaceSmall;\n}\n\n.optionTextSecondaryLabel {\n composes: bodySmall from '../../styles/typography.module.css';\n color: colorTextTertiary;\n}\n\n.option:hover,\n.option:active {\n background: colorBackgroundSecondary;\n color: colorTextPrimary;\n}\n\n.option:hover .optionTextSecondaryLabel {\n color: colorTextSecondary;\n}\n\n.option:active .optionTextSecondaryLabel {\n color: colorTextSecondary;\n}\n\n/*\n * These two suppress the browser's own focus ring, which a CLICK produces:\n * clicking an option focuses it, and `:focus-visible` deliberately does not\n * match pointer-driven focus, so without them a clicked option grows a native\n * outline. Unscoped, because that is true whether or not a consumer opted in.\n */\n.option:focus {\n outline: none;\n color: colorTextPrimary;\n}\n\n.option:focus-within {\n outline: none;\n color: colorTextPrimary;\n}\n\n.option:focus .optionTextSecondaryLabel {\n color: colorTextSecondary;\n}\n\n/*\n * Selected value (committed), shown as a stronger fill than the active highlight.\n *\n * Deliberately no left accent bar: a 2px inset box-shadow gets tapered by the\n * option's 8px border-radius, so it renders as a small curved sliver at the edge\n * that reads as a stray focus artefact rather than an intentional indicator. The\n * checkbox / radio glyph carries the state in those variants, and forced-colors\n * mode below re-expresses it as a full outline, which the radius follows cleanly.\n */\n.option.selected {\n background: colorFillSecondary;\n outline: none;\n color: colorTextPrimary;\n}\n\n/*\n * Focus ring — KEYBOARD ONLY. A focus indicator has to mean \"focus is here\", so\n * it must not appear under the mouse pointer:\n *\n * - `.activeRing` is set by Menu for the combobox modes (Dropdown / Typeahead),\n * where DOM focus stays on the input and the active option is virtual. Menu\n * withholds it when the highlight came from the pointer.\n * - `:focus-visible` covers the roving menus, which move real DOM focus. It is\n * exactly the right selector here: arrow-key navigation calls .focus() after a\n * key press so the ring shows, while hover-driven .focus() follows a pointer\n * interaction so it does not.\n *\n * Declared after `.selected`, which sets no box-shadow of its own, so a selected\n * option that also has focus shows the ring without anything to fight over.\n */\n.option:focus-visible {\n outline: none;\n color: colorTextPrimary;\n box-shadow: inset borderWidthNone borderWidthNone borderWidthNone\n borderWidthTertiary colorFocusSecondary;\n}\n\n/*\n * The opt-in's own indicators, scoped to it so a consumer who has not opted in\n * keeps exactly the option styling they had. `.active` is the highlight the\n * keyboard moves; `.activeRing` is the focus ring for the combobox modes, where\n * DOM focus stays on the input and `:focus-visible` can never match the option.\n */\n.menuCardA11y .option.active {\n outline: none;\n color: colorTextPrimary;\n background: colorBackgroundSecondary;\n}\n\n.menuCardA11y .option.active .optionTextSecondaryLabel {\n color: colorTextSecondary;\n}\n\n.menuCardA11y .option.activeRing {\n outline: none;\n color: colorTextPrimary;\n box-shadow: inset borderWidthNone borderWidthNone borderWidthNone\n borderWidthTertiary colorFocusSecondary;\n}\n\n/*\n * Windows High Contrast / forced-colors mode drops box-shadow and flattens\n * background, so the bar + tint indicators above vanish. Re-express the active\n * highlight and selected state with system-color outlines (honored in HCM).\n */\n@media (forced-colors: active) {\n .menuCardA11y .option:hover,\n .menuCardA11y .option.active {\n outline: borderWidthTertiary solid Highlight;\n outline-offset: calc(-1 * borderWidthTertiary);\n }\n\n .menuCardA11y .option.selected {\n outline: borderWidthTertiary solid SelectedItem;\n outline-offset: calc(-1 * borderWidthTertiary);\n }\n\n /*\n * Keyboard focus must stay distinguishable from BOTH the hover highlight and\n * the selected state, and Highlight / SelectedItem commonly resolve to the same\n * system color — so change the outline STYLE rather than add a third color.\n * Declared last so a selected option that also has focus still shows it.\n */\n .menuCardA11y .option.activeRing,\n .menuCardA11y .option:focus-visible {\n outline: borderWidthTertiary dashed Highlight;\n outline-offset: calc(-1 * borderWidthTertiary);\n }\n}\n\n.disabled {\n color: colorTextDisabled;\n pointer-events: none;\n}\n\n.disabled .optionTextSecondaryLabel {\n color: colorTextDisabled;\n}\n\n.menuDivider {\n padding-top: spaceXSmall;\n padding-bottom: spaceXSmall;\n}\n\n.menuDivider:not(:first-of-type) {\n border-top: borderWidthPrimary solid colorBorderPrimary;\n padding-top: spaceXSmall;\n padding-bottom: spaceXSmall;\n}\n\n.hideDivider {\n border-top: none;\n}\n\n.menuDivider:first-child {\n padding-top: spaceNone;\n}\n\n.menuDivider:last-child {\n padding-bottom: spaceNone;\n}\n\n.optionsWrapper {\n display: flex;\n flex-flow: column;\n}\n\n/*\n * Wraps only the option list so the listbox role contains option children\n * exclusively (search/header/footer stay outside it). display:contents keeps\n * the existing flex layout of .menuCard unchanged.\n */\n.optionsListbox {\n display: contents;\n}\n\n/*\n * The listbox as the element that actually scrolls. Under virtualization\n * react-window's own scroll box carries the role (see ListboxOuter); this is the\n * same arrangement for a plain option list, and it matters beyond tidiness: the\n * options are not focusable themselves whenever a combobox trigger drives the\n * menu, so a\n * scroll container that is NOT the combobox's popup reads as an unreachable\n * scroll area (axe `scrollable-region-focusable`). Making the listbox the\n * scroller means the region IS the popup, which that rule exempts.\n */\n.optionsListboxScroll {\n display: flex;\n flex-flow: column;\n flex: 1 1 auto;\n min-height: 0;\n overflow-y: auto;\n}\n\n/*\n * The listbox takes a tab stop only where the menu owns its filter field, and in\n * that shape it reports the cursor through `aria-activedescendant` — the ring is\n * drawn on the active OPTION, which is what APG prescribes for that pattern.\n * Leaving the browser's own ring on the container as well shows two focus\n * indicators at once, the outer one around a box the user cannot move, which\n * reads as a rendering fault rather than as focus. Applied to whichever element\n * holds the role: this one, or react-window's scroll box when virtualized.\n */\n.listboxFocusContainer:focus,\n.listboxFocusContainer:focus-visible {\n outline: none;\n}\n\n/*\n * role=\"group\" wrapper around each titled option group. display:contents keeps\n * the existing flex layout (title + options) unchanged.\n */\n.optionGroup {\n display: contents;\n}\n\n.groupTitleWrapper {\n composes: formLabelSmall from '../../styles/typography.module.css';\n display: flex;\n padding-bottom: spaceXSmall;\n padding-left: spaceSmall;\n padding-right: calc(spaceXSmall / 2);\n color: colorTextTertiary;\n padding-top: spaceSmall;\n}\n\n.filterOptionsResultText {\n margin-top: calc(spaceXSmall * 2);\n margin-bottom: spaceXSmall;\n margin-left: spaceSmall;\n}\n\n/*\n * Pinned by living OUTSIDE the options scroll container rather than by sticking\n * inside it, so it never has the option list's scrollbar running behind it and\n * never has an option tucked under it. `relative` positions the divider below.\n */\n.menuHeader {\n position: sticky;\n background-color: colorBackgroundTertiary;\n padding: spaceXSmall spaceNone;\n top: spaceNone;\n margin-bottom: spaceXSmall;\n z-index: calc(elevationCard/4);\n min-height: size50;\n max-height: size50;\n}\n\n/*\n * With the opt-in the options carry their own scroll container, so the bars are\n * pinned by living OUTSIDE it rather than by sticking inside it: the option\n * list's scrollbar never runs behind them and no option is ever tucked under\n * them. `relative` positions the divider below.\n */\n.menuCardA11y .menuHeader,\n.menuCardA11y .menuFooter {\n position: relative;\n flex: 0 0 auto;\n top: auto;\n bottom: auto;\n}\n\n.menuHeader::after {\n content: '';\n position: absolute;\n left: calc(spaceXSmall * -1);\n right: calc(spaceXSmall * -1);\n bottom: spaceNone;\n border-bottom: borderWidthPrimary solid colorBorderPrimary;\n}\n\n/* As `.menuHeader`, pinned by sitting outside the options scroll container. */\n.menuFooter {\n position: sticky;\n background-color: colorBackgroundTertiary;\n padding: spaceXSmall spaceNone;\n bottom: spaceNone;\n margin-top: spaceXSmall;\n min-height: size50;\n max-height: size50;\n}\n\n.menuFooter::before {\n content: '';\n position: absolute;\n left: calc(spaceXSmall * -1);\n right: calc(spaceXSmall * -1);\n top: spaceNone;\n border-top: borderWidthPrimary solid colorBorderPrimary;\n}\n\n/*\n * While the keyboard is driving, a pointer left sitting over a row must stop\n * tinting it. Without this, arrowing away from where the mouse happens to rest\n * leaves two tinted rows and nothing to say which one Enter takes. The active\n * row is exempt — that tint is the answer to exactly that question — and a real\n * pointer move clears the class, so hover comes straight back.\n */\n.menuCardA11y.pointerQuiet .option:hover:not(.active) {\n background: none;\n color: colorTextSecondary;\n}\n\n/*\n * Inside the opt-in the ring has exactly one source: `.activeRing`. The\n * browser's own keyboard-focus ring has to stand down, or a roving menu opened\n * with ArrowDown would paint one on the option it focuses itself on — before the\n * user has navigated anywhere, and only when opened by keyboard, so the same\n * menu would look different depending on how it was opened. Rows that DO carry\n * `.activeRing` are left alone, so this never cancels the real ring.\n */\n.menuCardA11y .option:focus-visible:not(.activeRing) {\n box-shadow: none;\n}\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../components/Menu/Menu';\nexport * from '../../components/Menu/MenuOptionButton';\nexport * from '../../components/Menu/useMenuTrigger';\nexport * from '../../components/Menu/useMenuKeyboardNavigation';\n//# sourceMappingURL=index.d.ts.map" }, "additional": { "MenuFocusScope.d.ts": { "path": "MenuFocusScope.d.ts", "content": "import * as React from 'react';\nimport { FloatingFocusManager } from '@floating-ui/react';\n/**\n * floating-ui's `FloatingFocusManager`, or nothing at all.\n *\n * Mounting it is what manages focus, so there is no `disabled` prop to pass —\n * the choice has to be whether the element exists. Every popup trigger in the\n * dropdown family needs that choice: without `enableA11y` focus is managed by\n * floating-ui exactly as it always was, and with it, `Menu` takes over, because\n * the one thing `FloatingFocusManager` cannot express is returning focus to a\n * trigger that lives OUTSIDE the popup.\n */\nexport declare const MenuFocusScope: ({ enabled, context, initialFocus, returnFocus, children, }: {\n enabled: boolean;\n context: React.ComponentProps[\"context\"];\n initialFocus: React.RefObject;\n /** Passed through; `Typeahead` opts out, as it did before. */\n returnFocus?: boolean;\n children: React.ReactElement;\n}) => React.JSX.Element;\n//# sourceMappingURL=MenuFocusScope.d.ts.map" }, "MenuOptionButton.d.ts": { "path": "MenuOptionButton.d.ts", "content": "import * as React from 'react';\nimport type { CSSProperties } from 'react';\nimport type { BaseMenuProps, MenuOption } from '../../components/Menu/Menu';\nexport interface MenuOptionProps extends Omit {\n option: MenuOption;\n /**\n * Last option in the list. Without `enableA11y` this is how the menu knows\n * where Tab leaves it: the last option carries a keydown listener that calls\n * `onTabOut`. With the opt-in, the keyboard hook owns Tab for the whole menu\n * and this is ignored.\n */\n isLastItem?: boolean;\n style?: CSSProperties | undefined;\n /** Total option count — set for virtualized lists so AT announces \"N of total\". */\n setSize?: number;\n /** 1-based position — set for virtualized lists (windowed DOM hides the rest). */\n posInSet?: number;\n /**\n * Whether the keyboard has yet to navigate this menu. True from the moment it\n * opens, however it was opened, and cleared by the first navigation key — so\n * it gates the focus RING, not the background tint.\n */\n suppressInitialHighlight?: boolean;\n /**\n * Whether the POINTER is driving the menu. The active option's tint is dropped\n * while it is, so a cursor moving down the list is the only mark on screen.\n */\n pointerDriving?: boolean;\n /**\n * Whether focus is inside the menu. A roving menu's highlight IS its DOM\n * focus, so it must not be drawn once focus has moved elsewhere on the page —\n * the active option is still remembered, it is just no longer shown. The\n * combobox modes ignore this: there the trigger input outside the menu holds\n * focus by design and this highlight is the user's only cursor.\n */\n menuHasFocus?: boolean;\n testId?: string;\n}\nexport declare const MenuOptionButton: (props: MenuOptionProps) => React.JSX.Element;\n//# sourceMappingURL=MenuOptionButton.d.ts.map" }, "menuOptionId.d.ts": { "path": "menuOptionId.d.ts", "content": "/**\n * The DOM id of an option row — the one thing the row itself, the listbox's\n * `aria-activedescendant`, and a combobox trigger's `aria-activedescendant`\n * must all agree on, so it is built in exactly one place.\n *\n * Option keys are consumer data and may contain whitespace (\"New York\"), which\n * an id can hold but an IDREF cannot: `aria-activedescendant=\"m-option-New\n * York\"` is a list of two references, neither of which resolves. Encoding the\n * key keeps the id a single token.\n */\nexport declare const menuOptionId: (menuId: string, key: string) => string;\n//# sourceMappingURL=menuOptionId.d.ts.map" }, "useMenuKeyboardNavigation.d.ts": { "path": "useMenuKeyboardNavigation.d.ts", "content": "import * as React from 'react';\n/**\n * Keyboard navigation for the Menu option list. Three interaction models,\n * selected via `mode`:\n *\n * 1. `'roving'` — ROVING FOCUS (default; menu-button popups). Options are native\n * \n \n Next\n \n \n
\n \n Mark Complete\n \n \n Mark Incomplete\n \n
\n \n\n setOpenDialog(false)}\n heading=\"Unable to proceed to next step\"\n semantic=\"danger\"\n // testId=\"stepper-dialog\"\n />\n \n );\n};\n\nStepperStory.args = {\n activeStep: 0,\n testId: 'stepper-story',\n};\n\n/**\n * Renders a Stepper component with Completed check\n *\n * Below conditions are required for the step to be clickable:\n *\n * 1. The step should have an `onClick` handler\n * 2. The current step should not be `active`\n * 3. The previous step should be `completed`\n *\n */\n/**\nexport const _WithStepIcon = (args: StepperProps): React.Node => {\n const [openDialog, setOpenDialog] = React.useState(false);\n const [activeStep, setActiveStep] = React.useState(args.activeStep || 0);\n const [completedSteps, setCompletedSteps] = React.useState({\n '0': false,\n '1': false,\n '2': false,\n });\n\n const handleNext = () => {\n if (completedSteps[activeStep] === false) {\n setOpenDialog(true);\n return;\n }\n setActiveStep((prevStep) => prevStep + 1);\n };\n\n const handleBack = () => {\n setActiveStep((prevStep) => prevStep - 1);\n };\n\n const handleClick = (idx) => {\n setActiveStep(idx);\n };\n\n const handleMarkComplete = () => {\n const newCompletedSteps = {...completedSteps};\n for (let i = 0; i <= activeStep; i++) {\n newCompletedSteps[i] = true;\n }\n setCompletedSteps(newCompletedSteps);\n };\n\n const handleMarkInComplete = () => {\n const newCompletedSteps = {...completedSteps};\n for (let i = activeStep; i <= 2; i++) {\n newCompletedSteps[i] = false;\n }\n setCompletedSteps(newCompletedSteps);\n };\n\n React.useEffect(() => {\n setActiveStep(args.activeStep || 0);\n }, [args.activeStep]);\n\n return (\n
\n \n {stepsWithIcon.map((stepDetails, index) => (\n \n {stepDetails.label}\n {stepDetails.description}\n \n ))}\n \n
\n
\n 0)}\n iconLeftName=\"arrow-left\"\n >\n Back\n \n \n Next\n \n
\n
\n \n Mark Complete\n \n \n Mark Incomplete\n \n
\n
\n\n setOpenDialog(false)}\n heading=\"Unable to proceed to next step\"\n semantic=\"danger\"\n />\n
\n );\n};\n\n_WithStepIcon.args = {\n activeStep: 0,\n};\n*/\nStepperStory.storyName = 'Stepper';\n" }, "css": { "path": "Stepper.module.css", "content": "@value (\n colorFillPrimary,\n colorFillSecondary,\n colorButtonFillPrimaryEnabled,\n colorFillDisabled,\n colorTextSecondary,\n colorTextPrimary,\n colorTextClickable,\n colorTextDisabled,\n colorTextInversePrimary,\n colorBorderSecondary\n) from '../../styles/variables/_color.css';\n@value (\n size12,\n size24,\n sizeFluid\n) from '../../styles/variables/_size.css';\n@value (\n spaceNone,\n spaceLarge,\n spaceMedium,\n spaceSmall,\n spaceXXSmall\n) from '../../styles/variables/_space.css';\n@value (\n borderWidthPrimary,\n borderRadiusCircle\n) from '../../styles/variables/_border.css';\n\n.stepperWrapper {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n gap: spaceXXSmall;\n}\n\n.stepperWrapper.vertical {\n flex-direction: column;\n gap: spaceNone;\n justify-content: initial;\n}\n\n.stepWrapper {\n position: relative;\n display: flex;\n align-items: flex-start;\n gap: spaceSmall;\n width: sizeFluid;\n}\n\n.stepWrapperCounter {\n display: flex;\n composes: motionEaseInEaseOut from '../../styles/animation.module.css';\n composes: subTitleExtraSmall from '../../styles/typography.module.css';\n height: size24;\n width: size24;\n min-height: size24;\n min-width: size24;\n justify-content: center;\n align-items: center;\n border-radius: borderRadiusCircle;\n background-color: transparent;\n border: borderWidthPrimary solid colorBorderSecondary;\n color: colorTextSecondary;\n}\n\n.stepWrapperCounter.completed {\n background-color: colorFillPrimary;\n border: borderWidthPrimary solid transparent;\n color: colorTextInversePrimary;\n}\n\n.stepWrapperCounter.selected {\n background-color: colorFillSecondary;\n border: borderWidthPrimary solid transparent;\n color: colorTextClickable;\n}\n\n.stepWrapperCounter.completed.selected:not(.disabled) {\n background-color: colorButtonFillPrimaryEnabled;\n border: borderWidthPrimary solid transparent;\n color: colorTextInversePrimary;\n}\n\n.stepWrapperCounter.disabled {\n background-color: colorFillDisabled;\n border: borderWidthPrimary solid transparent;\n color: colorTextDisabled;\n}\n\n.stepIcon {\n color: inherit;\n}\n\n.stepContent {\n display: flex;\n flex-flow: column;\n gap: spaceXXSmall;\n margin-top: spaceXXSmall;\n}\n\n.stepLabelWrapper {\n composes: subTitleSmall from '../../styles/typography.module.css';\n color: colorTextSecondary;\n}\n\n.stepLabelWrapper.active {\n color: colorTextPrimary;\n}\n\n.stepLabelWrapper.disabled {\n color: colorTextDisabled;\n}\n\n.stepContentWrapper {\n composes: bodySmall from '../../styles/typography.module.css';\n color: colorTextSecondary;\n}\n\n.stepContentWrapper.disabled {\n color: colorTextDisabled;\n}\n\n.clickable {\n cursor: pointer;\n}\n\n.stepCounterColumn {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: spaceXXSmall;\n}\n\n.connector {\n pointer-events: none;\n}\n\n.stepperWrapper.vertical .stepCounterColumn {\n align-self: stretch;\n}\n\n.stepperWrapper.vertical .connector {\n flex: 1;\n width: calc(size2 / 2);\n}\n\n.stepperWrapper.vertical .stepWrapper:not(:last-child) .stepContent {\n padding-bottom: spaceMedium;\n}\n\n.stepperWrapper:not(.vertical) .connector {\n flex: 1;\n align-self: flex-start;\n margin-top: size12;\n min-width: spaceLarge;\n}\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../components/Stepper/Step';\nexport * from '../../components/Stepper/Stepper';\n//# sourceMappingURL=index.d.ts.map" }, "additional": { "Step/Step.d.ts": { "path": "Step/Step.d.ts", "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nimport type { IconType } from '../../../components/Icon';\ntype ClassNames = Readonly<{\n wrapper?: string;\n stepCounter?: string;\n content?: string;\n}>;\nexport interface StepProps {\n active?: boolean;\n children: React.ReactNode;\n completed?: boolean;\n disabled?: boolean;\n expanded?: boolean;\n index: number;\n last?: boolean;\n classNames?: ClassNames;\n allowClick?: boolean;\n onClick?: (idx: number, e?: React.SyntheticEvent | null | undefined) => unknown;\n iconName?: string;\n iconType?: IconType;\n orientation?: 'horizontal' | 'vertical';\n testId?: string;\n}\nexport declare const Step: Flow.AbstractComponent;\nexport {};\n//# sourceMappingURL=Step.d.ts.map" }, "Step/StepContent.d.ts": { "path": "Step/StepContent.d.ts", "content": "import * as React from 'react';\ntype ClassNames = Readonly<{\n wrapper?: string;\n}>;\nexport interface StepContentProps {\n children: React.ReactNode;\n active?: boolean;\n completed?: boolean;\n disabled?: boolean;\n classNames?: ClassNames;\n testId?: string;\n}\nexport declare const StepContent: ({ children, classNames, active, completed, disabled, testId, }: StepContentProps) => React.JSX.Element;\nexport {};\n//# sourceMappingURL=StepContent.d.ts.map" }, "Step/StepLabel.d.ts": { "path": "Step/StepLabel.d.ts", "content": "import * as React from 'react';\ntype ClassNames = Readonly<{\n wrapper?: string;\n}>;\nexport interface StepLabelProps {\n children: React.ReactNode;\n active?: boolean;\n completed?: boolean;\n disabled?: boolean;\n classNames?: ClassNames;\n testId?: string;\n}\nexport declare const StepLabel: ({ children, classNames, active, completed, disabled, testId, }: StepLabelProps) => React.JSX.Element;\nexport {};\n//# sourceMappingURL=StepLabel.d.ts.map" }, "Step/index.d.ts": { "path": "Step/index.d.ts", "content": "export * from '../../../components/Stepper/Step/Step';\nexport * from '../../../components/Stepper/Step/StepContent';\nexport * from '../../../components/Stepper/Step/StepLabel';\n//# sourceMappingURL=index.d.ts.map" } } }, "allFiles": [ "Step/Step.stories.tsx", "Step/Step.tsx", "Step/StepContent.tsx", "Step/StepLabel.tsx", "Step/index.ts", "Stepper.module.css", "Stepper.stories.module.css", "Stepper.stories.tsx", "Stepper.tsx", "index.ts" ] }, "StickyBar": { "name": "StickyBar", "path": "src/components/StickyBar", "files": { "main": { "path": "StickyBar.d.ts", "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nexport interface StickyBarProps {\n className?: string;\n children: React.ReactNode;\n position?: 'top' | 'bottom';\n testId?: string;\n}\nexport interface StickyBarChildProps {\n className?: string;\n children: React.ReactNode;\n testId?: string;\n}\nexport declare const StickyBarLeftSlot: ({ className, children, testId, ...props }: StickyBarChildProps) => React.JSX.Element;\nexport declare const StickyBarRightSlot: ({ className, children, testId, ...props }: StickyBarChildProps) => React.JSX.Element;\nexport declare const StickyBar: Flow.AbstractComponent;\n//# sourceMappingURL=StickyBar.d.ts.map" }, "story": { "path": "StickyBar.stories.tsx", "content": "import * as React from 'react';\n\nimport {Button} from 'src/components/Button';\nimport {Col, Row} from 'src/components/Grid';\nimport type {StickyBarProps} from 'src/components/StickyBar';\nimport {\n StickyBar,\n StickyBarLeftSlot,\n StickyBarRightSlot,\n} from 'src/components/StickyBar/StickyBar';\nimport {BodySmall} from 'src/components/Text';\n\nimport css from 'src/components/StickyBar/StickyBar.stories.module.css';\n\n\nexport default {\n tags: ['autodocs'],\n title: 'Components/Sticky Footer',\n component: StickyBar,\n argTypes: {\n classNames: {\n description: 'Provide an optional className to be applied to the wrapper',\n control: {\n type: 'string',\n },\n table: {\n type: {\n summary: 'string',\n },\n },\n },\n testId: {\n description: 'Test ID for the component',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n // position: {\n // description: 'Position of the StickyBar',\n // options: ['top', 'bottom'],\n // control: {\n // type: 'select',\n // },\n // table: {\n // type: {\n // summary: 'string',\n // },\n // defaultValue: {\n // summary: 'bottom',\n // },\n // },\n // },\n },\n parameters: {\n docs: {\n subtitle: 'Generates a StickyFooter component.',\n description: {\n component: `\n\\`\\`\\`js\nimport {\n StickyBar,\n StickyBarLeftSlot,\n StickyBarRightSlot\n} from \"@spaced-out/ui-design-system/lib/components/StickyBar\";\n\\`\\`\\`\n\nThe \\`StickyBar\\` component is a flexible and customizable sticky bar that can be used\nto display content in a fixed position at bottom of the screen(You would need to set/manage the \\`position\\` attribute). It consists\nof two slots, one on the left and one on the right, where you can place children elements,\nsuch as buttons or icons.\n\nSlots:\n\n- \\`StickyBarLeftSlot\\`: Use this slot to place content on the left side of the \\`StickyBar\\`.\n- \\`StickyBarRightSlot\\`: Use this slot to place content on the right side of the \\`StickyBar\\`.\n\nExample Usage:\n\n\\`\\`\\`jsx\nconst MyComponent = () => (\n \n \n \n \n \n \n \n \n \n \n);\n\\`\\`\\`\n `,\n },\n },\n storySource: {\n componentPath: '/src/components/StickyBar/StickyBar',\n },\n },\n};\n\nexport const StickyFooterStory = (args: StickyBarProps) => (\n
\n \n \n \n \n \n \n \n \n \n \n
\n);\nStickyFooterStory.args = {\n testId: 'sticky-footer-story',\n};\n\nexport const WithGridStory = (args: StickyBarProps) => (\n <>\n
\n \n Column Offset: 1, Column Span: 11\n \n \n \n \n \n \n \n \n \n \n \n
\n
\n \n Column Offset: 6, Column Span: 6\n \n \n \n \n \n \n \n \n \n \n \n
\n
\n \n Column Offset: 9, Column Span: 3\n \n \n \n \n \n \n \n \n \n \n \n
\n \n);\nStickyFooterStory.storyName = 'Sticky Footer';\nWithGridStory.storyName = 'With Grid';\n" }, "css": { "path": "StickyBar.module.css", "content": "@value (colorFillPrimary, colorBackgroundTertiary) from '../../styles/variables/_color.css';\n@value (sizeFluid) from '../../styles/variables/_size.css';\n@value (spaceMedium, spaceXSmall, spaceSmall) from '../../styles/variables/_space.css';\n\n.wrapper {\n display: flex;\n width: sizeFluid;\n align-items: center;\n justify-content: space-between;\n padding: spaceMedium spaceMedium;\n gap: spaceXSmall;\n background: colorBackgroundTertiary;\n}\n\n.top {\n composes: borderBottomPrimary from '../../styles/border.module.css';\n}\n\n.bottom {\n composes: borderTopPrimary from '../../styles/border.module.css';\n}\n\n.leftSlot,\n.rightSlot {\n display: flex;\n align-items: center;\n gap: spaceSmall;\n}\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../components/StickyBar/StickyBar';\n//# sourceMappingURL=index.d.ts.map" }, "additional": {} }, "allFiles": [ "StickyBar.module.css", "StickyBar.stories.module.css", "StickyBar.stories.tsx", "StickyBar.tsx", "index.ts" ] }, "SubMenu": { "name": "SubMenu", "path": "src/components/SubMenu", "files": { "main": { "path": "SubMenu.d.ts", "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nimport type { IconSize, IconType } from '../../components/Icon';\ntype ClassNames = Readonly<{\n wrapper?: string;\n}>;\nexport interface SubMenuProps {\n classNames?: ClassNames;\n title: string;\n titleIcon?: string;\n titleIconSize?: IconSize;\n titleIconType?: IconType;\n children?: React.ReactNode;\n onClose?: () => unknown;\n showClose?: boolean;\n testId?: string;\n}\nexport declare const SubMenu: Flow.AbstractComponent;\nexport {};\n//# sourceMappingURL=SubMenu.d.ts.map" }, "story": { "path": "SubMenu.stories.tsx", "content": "import * as React from 'react';\n\nimport {TEXT_COLORS} from 'src/types/typography';\nimport {classify} from 'src/utils/classify';\n\nimport {Badge} from 'src/components/Badge';\nimport {ClickableIcon, Icon} from 'src/components/Icon';\nimport type {SubMenuProps} from 'src/components/SubMenu';\nimport {SubMenu} from 'src/components/SubMenu/SubMenu';\nimport {SubMenuGroup} from 'src/components/SubMenu/SubMenuGroup';\nimport {\n SubMenuItem,\n SubMenuItemAction,\n SubMenuItemBadges,\n SubMenuItemText,\n} from 'src/components/SubMenu/SubMenuItem';\nimport {SubMenuLink} from 'src/components/SubMenu/SubMenuLink';\n\nimport css from 'src/components/SubMenu/SubMenu.stories.module.css';\n\n\nexport default {\n tags: ['autodocs'],\n title: 'Components/Sub Menu',\n component: SubMenu,\n argTypes: {\n title: {\n type: {required: true},\n description: 'The title of the SubMenu',\n table: {\n type: {summary: 'React.Component | string'},\n },\n },\n titleIcon: {\n description: 'Optional Icon before the title of the SubMenu',\n control: {\n type: 'string',\n },\n table: {\n type: {summary: 'React.Component | string'},\n },\n },\n titleIconType: {\n description: 'Provide a type for the Icon',\n control: {type: 'select'},\n options: ['regular', 'solid', 'duotone', 'brands'],\n table: {\n type: {summary: 'string'},\n },\n },\n titleIconSize: {\n control: {type: 'select'},\n options: ['small', 'medium'],\n description: 'Optional size for the Icon',\n table: {\n type: {summary: 'string'},\n defaultValue: {summary: 'medium'},\n },\n },\n classNames: {\n description:\n 'Provide an optional classNames to be applied to the wrapper of submenu. And for SubMenuGroup apply classNames to wrapper, groupHeader & menuGroup',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary:\n 'SubMenu: {wrapper?: string} SubMenuGroup: { wrapper?: string, groupHeader?: string, menuGroup?: string} ',\n },\n },\n },\n onClose: {\n description:\n '**onClose** handler that is applied to the Header close button',\n action: 'closed',\n table: {\n type: {summary: '() => mixed'},\n },\n },\n showClose: {\n description:\n 'If **true**, the component would show the Header close button',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n testId: {\n description: 'Test ID for the component',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n },\n parameters: {\n docs: {\n subtitle:\n 'Generates a SubMenu, SubMenuGroup, SubMenuItem, SubMenuLink, SubMenuItemIcon, SubMenuItemText and SubMenuItemAction components.',\n description: {\n component: `\n\\`\\`\\`js\nimport {SubMenu} from '@spaced-out/ui-design-system/lib/components/SubMenu';\nimport {SubMenuGroup} from '@spaced-out/ui-design-system/lib/components/SubMenu/SubMenuGroup';\nimport {\n SubMenuItem,\n SubMenuItemAction,\n SubMenuItemBadges,\n SubMenuItemIcon,\n SubMenuItemText,\n} from '@spaced-out/ui-design-system/lib/components/SubMenu/SubMenuItem';\nimport {SubMenuLink} from '@spaced-out/ui-design-system/lib/components/SubMenu/SubMenuLink';\n\\`\\`\\`\n\nSubMenu offers different components for different slots. SubMenu renders all of its children passed to it.\nChildren of SubMenu can be SubMenuGroup, SubMenuLink or any other React component for cases like implementing search features in sub menu.\n\nSubMenuGroup accepts few props named groupTitle, collapsible and multiple SubMenuItem as children.\nIt is a controlled component, which means, you need to pass the selectedMenuKey, if selectedMenuKey is same as menuKey then Sub\nMenu Item will be shown as selected. And if its a part of a group then that SubMenuGroup remains expanded. When an item from another group\nis selected then all other groups are collapsed.\nYou will pass a callback function in onChange prop, if Sub Menu Item is clicked this function will be called and you will receive\nthe selectedMenuKey which will be the menuKey prop of Sub Menu Item.\n\nSubMenuItem accepts four named child components:- SubMenuItemIcon, SubMenuItemText, SubMenuItemBadges, and SubMenuItemAction.\nSubMenuItemIcon, SubMenuItemText and SubMenuItemBadges are aligned at start and SubMenuItemAction is aligned at end.\nSubMenuItemAction button is shown on mouse hover, focus and selection of the SubMenuItem.\n\nThe SubMenuLink takes the following props: menuLinkTitle, menuLinkIcon, onChange, selectedMenuKey.\nIf selectedMenuKey is same as menuKey then SubMenuLink will be shown as selected.\n `,\n },\n },\n storySource: {\n componentPath: '/src/components/SubMenu/SubMenu',\n },\n },\n};\n\nexport const SubMenuStory = (args: SubMenuProps) => {\n const [selectedMenu, setSelectedMenu] = React.useState('menu-0');\n const onMenuItemChangeHandler = (menu: string): void => {\n setSelectedMenu(menu);\n };\n\n return (\n
\n \n \n \n San Francisco\n \n \n \n \n \n
\n \n \n
\n \n \n \n Boston\n \n \n
\n \n \n
\n \n \n \n Miami\n \n \n \n \n \n
\n \n \n
\n \n \n \n New York\n \n \n \n \n \n
\n \n \n
\n \n \n \n Disabled\n \n \n
\n \n \n
\n \n \n \n \n \n Queue #1\n \n \n Queue #2\n \n \n
\n \n \n Queue #1\n \n \n Queue #2\n \n \n \n \n \n
\n );\n};\n\nSubMenuStory.args = {\n title: 'Messaging',\n titleIcon: 'messages',\n titleIconType: 'duotone',\n showClose: true,\n testId: 'sub-menu-story',\n};\nSubMenuStory.storyName = 'Sub Menu';\n" }, "css": { "path": "SubMenu.module.css", "content": "@value ( size34, size60, size300, sizeFluid, sizeFullViewportHeight) from '../../styles/variables/_size.css';\n\n@value (\n colorFillNone,\n colorFillPrimary,\n colorFocusPrimary,\n colorNeutralDark,\n colorNeutralDarkest,\n colorTextInverseSecondary,\n colorTextInversePrimary,\n colorSubMenuBackgroundDefault,\n colorSideMenuIconDefault,\n colorSideMenuIconActive,\n colorSuccess,\n colorFocusDanger\n ) from '../../styles/variables/_color.css';\n\n@value (\n spaceNone,\n spaceXXSmall,\n spaceXSmall,\n spaceSmall,\n spaceMedium,\n spaceLarge \n ) from '../../styles/variables/_space.css';\n\n@value (\n borderWidthPrimary,\n borderWidthTertiary,\n borderWidthNone,\n borderRadiusSmall,\n borderRadiusNone\n ) from '../../styles/variables/_border.css';\n\n.subMenuWrapper {\n background: colorSubMenuBackgroundDefault;\n width: sizeFluid;\n min-height: sizeFullViewportHeight;\n cursor: default;\n display: flex;\n flex-direction: column;\n user-select: none;\n}\n\n.subMenuTitleAndButton {\n height: size60;\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: borderWidthPrimary solid colorNeutralDarkest;\n margin: spaceNone spaceNone spaceXXSmall spaceXXSmall;\n}\n\n.subMenuTitleWrapper {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: spaceSmall;\n}\n\n.subMenuCloseButton {\n margin: spaceSmall;\n}\n\n.subMenuCloseButton:hover {\n background-color: colorNeutralDarkest;\n}\n\n.subMenuCloseIcon {\n color: colorSideMenuIconActive;\n}\n\n.subMenuHeader {\n height: size60;\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: spaceMedium spaceXSmall;\n}\n\n.menuChildWrap {\n margin: spaceNone spaceSmall;\n}\n\n.menuChildWrap:last-child {\n border-bottom: none;\n}\n\n.subMenuGroupWrapper,\n.subMenuLinkWrapper {\n display: flex;\n flex-direction: column;\n margin: spaceXXSmall spaceNone;\n flex: auto;\n}\n\n.subMenuGroupWrapper {\n background: colorNeutralDarkest;\n border-radius: borderRadiusSmall;\n}\n\n.subMenuGroupHeader,\n.subMenuLink {\n color: colorSideMenuIconDefault;\n background: colorSubMenuBackgroundDefault;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n cursor: pointer;\n padding: spaceXSmall;\n border-radius: borderRadiusSmall;\n}\n\n.subMenuGroupHeader:hover,\n.subMenuLink:hover {\n background: colorNeutralDarkest;\n .groupTitle,\n .menuLinkTitle {\n color: colorTextInversePrimary;\n }\n}\n\n.subMenuGroupHeader:focus-visible,\n.subMenuGroup:focus-visible,\n.subMenuLink:focus-visible {\n outline: none;\n}\n\n.subMenuGroupHeader.collapsible:focus,\n.subMenuLink:focus {\n box-shadow: borderWidthNone borderWidthNone borderWidthNone\n borderWidthTertiary colorFocusPrimary;\n}\n\n.subMenuGroupHeader:not(.collapsible) {\n background: colorNeutralDarkest;\n}\n\n.subMenuGroupHeader.collapsed,\n.subMenuLink.collapsed {\n background: colorNeutralDarkest;\n}\n\n.subMenuGroupHeader.highlightedMenu {\n border: borderWidthPrimary solid colorNeutralDark;\n margin: calc(-1 * (borderWidthPrimary));\n .groupTitle {\n color: colorTextInversePrimary;\n }\n}\n\n.subMenuLink.highlightedMenu {\n background: colorNeutralDarkest;\n .menuLinkTitle {\n color: colorTextInversePrimary;\n }\n}\n\n.groupTitleWrapper {\n display: flex;\n gap: spaceXXSmall;\n}\n\n.groupIconWrapper {\n display: flex;\n position: relative;\n padding-right: spaceXSmall;\n}\n\n.statusIndicatorWrapper {\n position: absolute;\n top: calc(-1 * (spaceXXSmall));\n right: spaceNone;\n}\n\n.groupTitle,\n.menuLinkTitle {\n color: colorTextInverseSecondary;\n}\n\n.menuLinkIcon {\n margin-right: spaceXSmall;\n}\n\n.subMenuGroup,\n.subMenuFocusWrapper {\n outline: none;\n display: flex;\n flex-direction: column;\n}\n\n.subMenuGroup {\n margin: spaceXSmall spaceXXSmall;\n gap: spaceXXSmall;\n background: colorNeutralDarkest;\n border-radius: borderRadiusSmall;\n}\n\n.subMenuGroup.collapsed {\n display: none !important;\n}\n\n.menuItem {\n display: flex;\n flex-direction: row;\n color: colorTextInverseSecondary;\n flex-direction: row;\n justify-content: space-between;\n gap: spaceXSmall;\n align-items: center;\n flex: auto;\n height: size34;\n min-height: size34;\n border-radius: borderRadiusSmall;\n cursor: pointer;\n padding: spaceXXSmall;\n margin: spaceXXSmall;\n box-sizing: border-box;\n}\n\n.menuItem:not(.selected):hover {\n color: colorTextInversePrimary;\n}\n\n.menuItem:focus-visible {\n outline: none;\n}\n\n.menuItem:focus {\n box-shadow: borderWidthNone borderWidthNone borderWidthNone\n borderWidthTertiary colorFocusPrimary;\n}\n\n.menuIcon {\n color: inherit;\n}\n\n.menuItem.selected {\n color: colorTextInversePrimary;\n}\n\n.menuItem.selected::before {\n position: absolute;\n content: '';\n border-radius: borderRadiusSmall;\n background-color: colorFillPrimary;\n width: spaceXXSmall;\n height: spaceMedium;\n}\n\n.menuItem.disabled {\n pointer-events: none;\n}\n\n.menuIconName {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: spaceXXSmall;\n padding-left: spaceSmall;\n margin-left: spaceXXSmall;\n}\n\n.subMenuItemText {\n color: inherit;\n}\n\n.subMenuItemBadges {\n display: flex;\n align-items: center;\n}\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../components/SubMenu/SubMenu';\nexport * from '../../components/SubMenu/SubMenuGroup';\nexport * from '../../components/SubMenu/SubMenuItem';\nexport * from '../../components/SubMenu/SubMenuLink';\n//# sourceMappingURL=index.d.ts.map" }, "additional": { "SubMenuGroup.d.ts": { "path": "SubMenuGroup.d.ts", "content": "import * as React from 'react';\nimport type { IconSize, IconType } from '../../components/Icon';\nimport type { StatusSemanticType } from '../../components/StatusIndicator';\ntype ClassNames = Readonly<{\n wrapper?: string;\n groupHeader?: string;\n menuGroup?: string;\n}>;\nexport interface SubMenuGroupProps {\n children?: React.ReactNode;\n groupTitle?: string;\n groupIcon?: string;\n groupIconSize?: IconSize;\n groupIconType?: IconType;\n collapsible?: boolean;\n disabled?: boolean;\n onChange?: (value: string) => unknown;\n selectedMenuKey?: string;\n status?: StatusSemanticType;\n classNames?: ClassNames;\n}\nexport declare const SubMenuGroup: ({ children, groupTitle, groupIcon, groupIconSize, groupIconType, collapsible, disabled, onChange, selectedMenuKey, status, classNames, }: SubMenuGroupProps) => React.JSX.Element;\nexport {};\n//# sourceMappingURL=SubMenuGroup.d.ts.map" }, "SubMenuItem.d.ts": { "path": "SubMenuItem.d.ts", "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nimport type { ColorTypes } from '../../types/typography';\nimport type { IconProps } from '../../components/Icon';\nimport type { TextProps } from '../../components/Text';\nexport declare const SubMenuItemIcon: {\n ({ className, ...props }: IconProps): React.JSX.Element;\n displayName: string;\n};\nexport declare const SubMenuItemText: {\n ({ children, className, ...props }: TextProps): React.JSX.Element;\n displayName: string;\n};\nexport interface SubMenuItemBadgesProps {\n children?: React.ReactNode;\n className?: string;\n}\nexport declare const SubMenuItemBadges: {\n ({ children, className, ...props }: SubMenuItemBadgesProps): React.JSX.Element;\n displayName: string;\n};\nexport interface SubMenuItemActionProps {\n isMenuItemSelected?: boolean;\n children?: React.ReactNode;\n color?: ColorTypes;\n className?: string;\n tabIndex?: number;\n}\nexport declare const SubMenuItemAction: Flow.AbstractComponent;\ntype ClassNames = Readonly<{\n wrapper?: string;\n}>;\nexport interface SubMenuItemProps {\n classNames?: ClassNames;\n children?: React.ReactNode;\n selectedMenuKey?: string;\n disabled?: boolean;\n onChange?: (selectedMenuKey: string) => unknown;\n menuKey: string;\n}\nexport declare const SubMenuItem: Flow.AbstractComponent;\nexport {};\n//# sourceMappingURL=SubMenuItem.d.ts.map" }, "SubMenuLink.d.ts": { "path": "SubMenuLink.d.ts", "content": "import type { Flow } from 'flow-to-typescript-codemod';\nimport type { IconSize, IconType } from '../../components/Icon';\nexport interface SubMenuLinkProps {\n menuLinkTitle?: string;\n menuLinkIcon: string;\n menuLinkIconSize?: IconSize;\n menuLinkIconType?: IconType;\n menuKey: string;\n selectedMenuKey?: string;\n disabled?: boolean;\n onChange?: (selectedMenuLinkKey: string) => unknown;\n}\nexport declare const SubMenuLink: Flow.AbstractComponent;\n//# sourceMappingURL=SubMenuLink.d.ts.map" } } }, "allFiles": [ "SubMenu.module.css", "SubMenu.stories.module.css", "SubMenu.stories.tsx", "SubMenu.tsx", "SubMenuGroup.tsx", "SubMenuItem.tsx", "SubMenuLink.tsx", "index.ts" ] }, "Table": { "name": "Table", "path": "src/components/Table", "files": { "main": { "path": "Table.d.ts", "content": "import * as React from 'react';\nimport type { TableRow } from '../../components/Table/DefaultRow';\nimport type { GenericHeaderItems } from '../../components/Table/DefaultTableHeader';\nimport type { SortDirection } from '../../components/Table/hooks';\nexport interface GenericObject {\n [key: string]: unknown;\n}\nexport type TableClassNames = Readonly<{\n wrapper?: string;\n table?: string;\n tableHeader?: string;\n tableBody?: string;\n tableRow?: string;\n checkbox?: string;\n}>;\ninterface VirtualizationOptions {\n rowsCount: number;\n rowHeight?: string;\n onEndReached?: () => void;\n isEndLoading?: boolean;\n isAllDataFetched?: boolean;\n}\nexport interface TableProps {\n classNames?: TableClassNames;\n className?: string;\n TableRow?: TableRow;\n headers: GenericHeaderItems;\n entries: Array;\n extras?: U;\n sortable?: boolean;\n showHeader?: boolean;\n tableHeaderClassName?: string;\n headerIconClassName?: string;\n defaultSortKey?: string;\n defaultSortDirection?: 'asc' | 'desc' | 'original';\n enableInternalSorting?: boolean;\n selectedKeys?: string[];\n disabledKeys?: string[];\n onSelect?: (keys: string[]) => unknown;\n idName?: keyof T;\n onSort?: (key: keyof T, direction: SortDirection) => void;\n isLoading?: boolean;\n emptyText?: React.ReactNode;\n disabled?: boolean;\n customLoader?: React.ReactNode;\n borderRadius?: string;\n stickyHeader?: boolean;\n virtualizationOptions?: VirtualizationOptions;\n testId?: string;\n}\n/**\n * Table\n * @param {React.ComponentType} Row - React.ComponentType<{data: Data, extras?: Extras, sortedKeys?: string[]}>\n * @param {string} className - string\n *\n **/\n/**\n * Table\n * @param {React.ComponentType} Row - React.ComponentType<{data: Data, extras?: Extras, sortedKeys?: string[]}>\n * @param {string} className - string\n *\n */\nexport declare function Table(props: TableProps): React.JSX.Element;\nexport {};\n//# sourceMappingURL=Table.d.ts.map" }, "story": null, "css": { "path": "Table.module.css", "content": "@value (\n colorFillPrimary,\n colorFillSecondary,\n colorTextPrimary,\n colorTextSecondary,\n colorBorderPrimary,\n colorBorderSecondary,\n colorFillSecondary,\n colorBackgroundPrimary,\n colorBackgroundTertiary,\n colorGrayLightest\n) from '../../styles/variables/_color.css';\n@value (\n spaceNone, \n spaceXXSmall, \n spaceXSmall,\n spaceSmall, \n spaceMedium\n) from '../../styles/variables/_space.css';\n@value (\n sizeFluid, \n size2, \n size8, \n size48, \n size60, \n size240, \n size300\n) from '../../styles/variables/_size.css';\n@value (\n borderWidthNone, \n borderWidthPrimary, \n borderRadiusNone, \n borderRadiusMedium, \n borderWidthSecondary\n) from '../../styles/variables/_border.css';\n@value (\n fontLineHeight170\n) from '../../styles/variables/_font.css';\n@value (\n elevationCard\n) from '../../styles/variables/_elevation.css';\n\n@value tableRowTotalPadding: calc(spaceMedium * 2);\n\n.fooBar {\n color: colorFillPrimary;\n}\n\n.tableContainer {\n --border-radius: borderRadiusMedium;\n --table-width: sizeFluid;\n height: var(--table-height);\n composes: borderPrimary from '../../styles/border.module.css';\n width: sizeFluid;\n overflow-x: auto;\n border-radius: var(--border-radius);\n}\n\n.defaultTable {\n min-width: sizeFluid;\n height: fit-content;\n flex-flow: column;\n overflow-x: auto;\n border-collapse: collapse;\n box-sizing: border-box;\n border-radius: var(--border-radius);\n box-shadow: borderWidthNone borderWidthNone borderWidthNone borderWidthPrimary\n colorBorderPrimary;\n table-layout: fixed;\n white-space: nowrap;\n}\n.fullHeightTable {\n height: sizeFluid;\n}\n.defaultTableBody {\n flex-flow: column;\n border-radius: borderRadiusNone borderRadiusNone var(--border-radius)\n var(--border-radius);\n background: colorBackgroundTertiary;\n}\n\n.defaultSelectedBodyRow {\n background: colorFillSecondary;\n}\n\n.labelContents {\n display: flex;\n justify-content: space-between;\n flex: 1;\n}\n.labelContainer {\n align-items: center;\n}\n\n.defaultHeaderCellSortable.sorted .sortArrow {\n visibility: visible;\n}\n\n.defaultCell,\n.defaultSingleCell,\n.defaultDoubleCell {\n height: size48;\n align-items: center;\n padding: spaceNone spaceXSmall;\n background: colorBackgroundTertiary;\n}\n\n.defaultDoubleCell {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n}\n\n.paddedTitleBlock {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n}\n\n.defaultSingleCell {\n /*used to retain bottom border on cell if content is full-bleed */\n padding-bottom: borderWidthPrimary;\n}\n\n.defaultHeadCell {\n composes: defaultCell;\n background: colorBackgroundPrimary;\n}\n\n.defaultDoubleCell {\n height: size60;\n}\n\n.singleContentCell {\n composes: defaultCell;\n padding: spaceNone spaceXSmall;\n}\n.doubleContentCell {\n composes: defaultDoubleCell;\n padding: spaceNone spaceXSmall;\n}\n\n.doubleTitle {\n margin: spaceNone;\n}\n.doubleSubtitle {\n display: block;\n height: fontLineHeight170;\n}\n\n.stickyHeaderCell,\n.stickyCell {\n position: sticky;\n left: spaceNone;\n z-index: calc(elevationCard / 2);\n}\n\n.stickyHeaderCell::after,\n.stickyCell::after {\n content: '';\n position: absolute;\n right: calc(borderWidthPrimary * -1);\n top: spaceNone;\n width: calc(size2 / 2);\n height: sizeFluid;\n background: colorBorderSecondary;\n}\n\n.stickyHeaderCell {\n background: colorBackgroundPrimary;\n}\n\n/**\n Row CSS\n*/\n\n.defaultRow {\n composes: borderBottomPrimary from '../../styles/border.module.css';\n height: size48;\n background: colorBackgroundTertiary;\n}\n\n.defaultTable .defaultRow:last-child td:first-child {\n border-bottom-left-radius: var(--border-radius);\n}\n\n.defaultTable .defaultRow:last-child td:last-child {\n border-bottom-right-radius: var(--border-radius);\n}\n\n.defaultTable .defaultRow:last-child {\n border-bottom: none;\n}\n\n.emptyRow {\n display: flex;\n width: calc(var(--table-width) - tableRowTotalPadding);\n position: sticky;\n left: spaceMedium;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n}\n\n.defaultLoader {\n display: flex;\n align-items: center;\n justify-content: center;\n height: size240;\n}\n\n.defaultEmptyText {\n display: flex;\n align-items: center;\n justify-content: center;\n height: size240;\n}\n\n.defaultHeaderCell.checkbox {\n padding: spaceSmall spaceMedium spaceSmall spaceNone;\n max-width: size60;\n}\n\n.defaultTable td:first-child {\n padding-left: spaceMedium;\n}\n\n.defaultTable th:first-child {\n padding-left: spaceMedium;\n}\n\n/* Header CSS */\n\n.defaultTableHead {\n flex-flow: column;\n border-radius: var(--border-radius) var(--border-radius) borderRadiusNone\n borderRadiusNone;\n composes: borderBottomPrimary from '../../styles/border.module.css';\n padding: spaceSmall;\n}\n\n.defaultHeaderRow {\n box-sizing: border-box;\n background: colorBackgroundPrimary;\n border-radius: var(--border-radius) var(--border-radius) borderRadiusNone\n borderRadiusNone;\n}\n\n.labelContents {\n display: flex;\n justify-content: flex-start;\n flex: 1;\n flex-direction: row;\n align-items: flex-start;\n padding: spaceNone;\n gap: spaceXXSmall;\n}\n\n.labelContainer {\n align-items: center;\n}\n\n.defaultHeaderCellSortable {\n cursor: pointer;\n}\n\n.defaultHeaderCell,\n.defaultHeaderCellSortable {\n padding: spaceNone spaceXSmall;\n text-align: left;\n align-items: center;\n}\n\n.defaultHeaderCell:first-child {\n border-top-left-radius: var(--border-radius);\n}\n\n.defaultHeaderCell:last-child {\n border-top-right-radius: var(--border-radius);\n}\n\n.defaultHeaderCell:not(.selectedHeader):hover {\n background: colorGrayLightest;\n}\n\n.selectedHeader {\n color: colorTextPrimary;\n background: colorFillSecondary;\n}\n\n.sortArrow {\n color: colorTextSecondary;\n}\n\n.selectedSortArrow {\n color: colorTextPrimary;\n}\n\n.stickyHeader {\n position: sticky;\n top: spaceNone;\n z-index: elevationCard;\n}\n\n.stickyHeader::after {\n content: '';\n position: absolute;\n bottom: calc(borderWidthSecondary * -1);\n left: spaceNone;\n width: sizeFluid;\n height: calc(size2 / 2);\n background: colorBorderPrimary;\n}\n\n.fetchMoreLoaderContainer {\n display: flex;\n text-align: center;\n justify-content: center;\n padding: size8;\n}\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../components/Table/Cell';\nexport * from '../../components/Table/DefaultRow';\nexport * from '../../components/Table/DefaultTableHeader';\nexport * from '../../components/Table/StaticTable';\nexport * from '../../components/Table/Table';\nexport * from '../../components/Table/TableActionBar';\nexport * from '../../components/Table/TableBottomBar';\nexport * from '../../components/Table/TableTopBar';\n//# sourceMappingURL=index.d.ts.map" }, "additional": { "Cell.d.ts": { "path": "Cell.d.ts", "content": "import * as React from 'react';\nimport type { ClassNameComponent } from '../../utils/makeClassNameComponent';\ninterface CellsProps {\n children?: React.ReactNode;\n className?: string | null | undefined;\n truncatedText?: React.ReactNode;\n onClick?: (e: React.SyntheticEvent) => unknown;\n testId?: string;\n}\nexport declare const Cells: ({ children, className, testId, ...rest }: CellsProps) => React.ReactElement>;\nexport declare const Cell: ({ children, className, testId, }: CellsProps) => React.ReactElement>;\nexport declare const BasicSingleCell: ClassNameComponent<'td'>;\nexport declare const BasicDoubleCell: ClassNameComponent<'td'>;\nexport declare const PaddedContentCell: ClassNameComponent<'td'>;\nexport declare const PaddedDoubleContentCell: ClassNameComponent<'td'>;\nexport declare const SingleCell: ({ title, className, testId, }: {\n title: string;\n icon?: React.ReactNode;\n className?: string;\n testId?: string;\n}) => React.JSX.Element;\nexport declare const DoubleCell: ({ title, subtitle, className, testId, }: {\n title: React.ReactNode;\n subtitle?: React.ReactNode;\n className?: string;\n testId?: string;\n}) => React.JSX.Element;\nexport declare const DateCell: ({ date, className, testId, }: {\n date: string | Date;\n className?: string;\n testId?: string;\n}) => React.JSX.Element;\nexport declare const Monogram: ({ initials, testId, }: {\n initials: string;\n testId?: string;\n}) => React.JSX.Element;\nexport declare const MonogramCell: ({ initials, className, testId, }: {\n initials: string;\n className?: string;\n testId?: string;\n}) => React.JSX.Element;\nexport {};\n//# sourceMappingURL=Cell.d.ts.map" }, "DefaultRow.d.ts": { "path": "DefaultRow.d.ts", "content": "import * as React from 'react';\nimport type { ClassNameComponent } from '../../utils/makeClassNameComponent';\nimport type { GenericHeaderItems } from '../../components/Table/DefaultTableHeader';\nimport type { GenericObject } from '../../components/Table/Table';\ntype ClassNames = Readonly<{\n tableRow?: string;\n checkbox?: string;\n}>;\nexport interface TableRowProps {\n data: T;\n extras?: U;\n sortedKeys?: string[];\n headers?: GenericHeaderItems;\n selected?: boolean;\n disabled?: boolean;\n testId?: string;\n}\nexport type TableRow = React.ComponentType>;\nexport declare const BasicRow: ClassNameComponent<'tr'>;\ninterface EmptyRowProps {\n emptyText?: React.ReactNode;\n isLoading?: boolean;\n headersLength: number;\n customLoader?: React.ReactNode;\n testId?: string;\n}\nexport declare const EmptyRow: ({ isLoading, emptyText, headersLength, customLoader, testId, }: EmptyRowProps) => React.ReactElement>;\nexport declare function DefaultRow({ data, extras, headers, selected, onSelect, classNames, disabled, testId, }: {\n data: T;\n extras?: U;\n headers: GenericHeaderItems;\n selected?: boolean;\n onSelect?: (arg1: {\n value: string;\n checked: boolean;\n }) => unknown;\n classNames?: ClassNames;\n disabled?: boolean;\n testId?: string;\n}): React.JSX.Element;\nexport {};\n//# sourceMappingURL=DefaultRow.d.ts.map" }, "DefaultTableHeader.d.ts": { "path": "DefaultTableHeader.d.ts", "content": "import * as React from 'react';\nimport type { ClassNameComponent } from '../../utils/makeClassNameComponent';\nimport type { SortDirection } from '../../components/Table/hooks';\nimport type { GenericObject } from '../../components/Table/Table';\nexport interface GenericHeaderItem {\n label: React.ReactNode;\n key: keyof T;\n className?: string;\n filterIcon?: React.ReactNode;\n filtered?: boolean;\n subtext?: string;\n sortable?: boolean;\n headerIconClassName?: string;\n sticky?: boolean;\n render?: React.ComponentType<{\n data: T;\n extras?: U;\n className?: string;\n selected?: boolean;\n disabled?: boolean;\n testId?: string;\n }>;\n}\nexport type GenericHeaderItems = GenericHeaderItem[];\nexport declare const BasicHeadCell: ClassNameComponent<'th'>;\nexport declare const BasicTableHead: ClassNameComponent<'thead'>;\nexport interface TableHeaderProps {\n className?: string;\n tableHeaderClassName?: string;\n sortable?: boolean;\n columns: GenericHeaderItems;\n handleSortClick?: (sortKey: keyof T) => unknown;\n sortKey?: keyof T;\n sortDirection?: SortDirection;\n checked?: 'true' | 'false' | 'mixed';\n handleCheckboxClick?: (arg1: {\n value: string;\n checked: boolean;\n }) => unknown;\n disabled?: boolean;\n stickyHeader?: boolean;\n checkboxClassName?: string;\n testId?: string;\n}\nexport declare function DefaultTableHeader(props: TableHeaderProps): React.JSX.Element;\n//# sourceMappingURL=DefaultTableHeader.d.ts.map" }, "StaticTable.d.ts": { "path": "StaticTable.d.ts", "content": "import * as React from 'react';\nimport type { ClassNameComponent } from '../../utils/makeClassNameComponent';\nimport type { SortDirection } from '../../components/Table/hooks';\nimport type { GenericObject, TableProps } from '../../components/Table/Table';\nexport declare const BasicTable: ClassNameComponent<'table'>;\nexport declare const BasicTableBody: ClassNameComponent<'tbody'>;\n/**\n * A Static Default Table.\n *\n * Our\n */\nexport declare function StaticTable(props: TableProps & {\n handleSortClick?: (sortKey: string) => unknown;\n sortKey?: string;\n sortDirection?: SortDirection;\n rowKeys?: string[];\n}): React.JSX.Element;\nexport declare function StaticTableVirtualized(props: TableProps & {\n handleSortClick?: (sortKey: string) => unknown;\n sortKey?: string;\n sortDirection?: SortDirection;\n rowKeys?: string[];\n}): React.JSX.Element;\n//# sourceMappingURL=StaticTable.d.ts.map" }, "Table.docs.d.ts": { "path": "Table.docs.d.ts", "content": "export declare const TABLE_DOCS: {\n readonly argTypes: {\n readonly headers: {\n readonly type: {\n readonly required: true;\n };\n readonly description: \"Provide an array of objects to render the header, each object should consist of label(*), key(*), sortable, sticky and render function\";\n readonly control: {\n readonly type: \"object\";\n };\n readonly table: {\n readonly type: {\n readonly summary: \"{label: React.Node, key: $Keys, className?: string, filterIcon?: React.Node, filtered?: boolean, subtext?: string, sortable?: boolean, headerIconClassName?: string, sticky?: boolean, render?: React.ComponentType<{data: T, extras?: U, className?: string, selected?: boolean,}>, }\";\n };\n };\n };\n readonly entries: {\n readonly type: {\n readonly required: true;\n };\n readonly description: \"Provide an array of object. Each object belong on one row in the table. Each object should have id and all the keys with values that is being passed in headers array\";\n readonly control: {\n readonly type: \"object\";\n };\n readonly table: {\n readonly type: {\n readonly summary: \"Array\";\n };\n };\n };\n readonly classNames: {\n readonly description: \"Provide optional classNames to be applied to the wrapper, table, tableHeader, tableBody, tableRow, or checkbox\";\n readonly control: {\n readonly type: \"object\";\n };\n readonly table: {\n readonly type: {\n readonly summary: \"{wrapper?: string, table?: string, tableHeader?: string, tableBody?: string, tableRow?: string, checkbox?: string}\";\n };\n };\n };\n readonly Row: {\n readonly description: \"Custom Row component to be passed to table\";\n readonly table: {\n readonly type: {\n readonly summary: \"TableRow\";\n };\n };\n };\n readonly sortable: {\n readonly description: \"Sort Icon will appear in right side of column's header with column level true sortable value\";\n readonly name: \"sortable\";\n readonly options: readonly [false, true];\n readonly control: \"boolean\";\n readonly table: {\n readonly type: {\n readonly summary: \"boolean\";\n };\n readonly defaultValue: {\n readonly summary: true;\n };\n };\n };\n readonly showHeader: {\n readonly description: \"Show or hide header\";\n readonly options: readonly [false, true];\n readonly control: \"boolean\";\n readonly table: {\n readonly type: {\n readonly summary: \"boolean\";\n };\n readonly defaultValue: {\n readonly summary: true;\n };\n };\n };\n readonly defaultSortKey: {\n readonly description: \"key name for which table should be sorted by default. headers array should have sortable true for that key object\";\n readonly control: {\n readonly type: \"text\";\n };\n readonly table: {\n readonly type: {\n readonly summary: \"string\";\n };\n };\n };\n readonly defaultSortDirection: {\n readonly description: \"default sorting direction for the defaultSortKey column\";\n readonly control: {\n readonly type: \"text\";\n };\n readonly table: {\n readonly type: {\n readonly summary: \"'asc' | 'desc' | 'original'\";\n };\n };\n };\n readonly selectedKeys: {\n readonly description: \"array of keys which are selected. This prop is also used to decide weather to show checkboxes or not. So, pass an empty array in case no row is selected.\";\n readonly control: {\n readonly type: \"object\";\n };\n readonly table: {\n readonly type: {\n readonly summary: \"string[]\";\n };\n };\n };\n readonly disabledKeys: {\n readonly description: \"array of keys which are disabled. This prop is used to disable the checkbox and its events for particular rows.\";\n readonly control: {\n readonly type: \"object\";\n };\n readonly table: {\n readonly type: {\n readonly summary: \"string[]\";\n };\n };\n };\n readonly onSelect: {\n readonly description: \"callback function when any row is selected\";\n readonly action: \"selected\";\n readonly type: {\n readonly summary: \"(keys: string[]) => mixed\";\n };\n };\n readonly idName: {\n readonly description: \"name of key in row objects that has to be used as id\";\n };\n readonly onSort: {\n readonly description: \"callback function when any table is sorted\";\n readonly action: \"sorted\";\n readonly type: {\n readonly summary: \"(key: $Keys, direction: SortDirection) => void\";\n };\n };\n readonly isLoading: {\n readonly description: \"to wait for data to populate in table and show loading state when entries array is empty.\";\n readonly options: readonly [false, true];\n readonly control: \"boolean\";\n readonly table: {\n readonly type: {\n readonly summary: \"boolean\";\n };\n readonly defaultValue: {\n readonly summary: false;\n };\n };\n };\n readonly emptyText: {\n readonly description: \"Provide component to be shown in case of empty data\";\n readonly table: {\n readonly type: {\n readonly summary: \"React.Component\";\n };\n };\n };\n readonly customLoader: {\n readonly description: \"Provide optional component to be shown in case of loading state. It will override the default loader.\";\n readonly table: {\n readonly type: {\n readonly summary: \"React.Component\";\n };\n };\n };\n readonly disabled: {\n readonly description: \"disable all the checkboxes of each row in the table\";\n readonly options: readonly [false, true];\n readonly control: \"boolean\";\n readonly table: {\n readonly type: {\n readonly summary: \"boolean\";\n };\n readonly defaultValue: {\n readonly summary: false;\n };\n };\n };\n readonly borderRadius: {\n readonly description: \"Border Radius of all four corners of the table. Default value is borderRadiusMedium i.e., 12px.\";\n readonly control: \"text\";\n readonly table: {\n readonly type: {\n readonly summary: \"string\";\n };\n readonly defaultValue: {\n readonly summary: \"12px\";\n };\n };\n };\n readonly stickyHeader: {\n readonly description: \"Sticky header will stick the header to the top of the table when scrolling. This would only work if the table wrapper is scrollable.\";\n readonly control: \"boolean\";\n readonly table: {\n readonly type: {\n readonly summary: \"boolean\";\n };\n readonly defaultValue: {\n readonly summary: false;\n };\n };\n };\n readonly enableInternalSorting: {\n readonly description: \"Enable internal sorting for the table. This would sort the table data internally and not rely on the apis sorting\";\n readonly control: \"boolean\";\n readonly table: {\n readonly type: {\n readonly summary: \"?boolean\";\n };\n readonly defaultValue: {\n readonly summary: true;\n };\n };\n };\n readonly rowsCount: {\n readonly name: \"virtualizationOptions.rowsCount\";\n readonly description: \"Total number of virtual rows.\";\n readonly control: {\n readonly type: \"number\";\n };\n readonly table: {\n readonly type: {\n readonly summary: \"number\";\n };\n readonly defaultValue: {\n readonly summary: 20;\n };\n };\n };\n readonly rowHeight: {\n readonly name: \"virtualizationOptions.rowHeight\";\n readonly description: \"Row height in CSS units (e.g., \\\"48px\\\"). Should be provided correctly, otherwise it will not work as expected.\";\n readonly control: {\n readonly type: \"text\";\n };\n readonly table: {\n readonly type: {\n readonly summary: \"string\";\n };\n readonly defaultValue: {\n readonly summary: \"48px\";\n };\n };\n };\n readonly isEndLoading: {\n readonly name: \"virtualizationOptions.isEndLoading\";\n readonly description: \"Whether to show loading spinner at the bottom.\";\n readonly control: {\n readonly type: \"boolean\";\n };\n readonly table: {\n readonly type: {\n readonly summary: \"boolean\";\n };\n readonly defaultValue: {\n readonly summary: false;\n };\n };\n };\n readonly isAllDataFetched: {\n readonly name: \"virtualizationOptions.isAllDataFetched\";\n readonly description: \"Whether all rows are fetched (disables infinite loading).\";\n readonly control: {\n readonly type: \"boolean\";\n };\n readonly table: {\n readonly type: {\n readonly summary: \"boolean\";\n };\n readonly defaultValue: {\n readonly summary: false;\n };\n };\n };\n readonly onEndReached: {\n readonly name: \"virtualizationOptions.onEndReached\";\n readonly description: \"Callback triggered when end of list is reached.\";\n readonly action: \"onEndReached\";\n readonly table: {\n readonly type: {\n readonly summary: \"() => void\";\n };\n };\n };\n readonly testId: {\n readonly description: \"Test ID for the component\";\n readonly control: {\n readonly type: \"text\";\n };\n readonly table: {\n readonly type: {\n readonly summary: \"string\";\n };\n };\n };\n };\n readonly parameters: {\n readonly docs: {\n readonly subtitle: \"Generates a Table component.\";\n readonly description: {\n readonly component: \"\\n```js\\nimport {\\n Table,\\n StaticTable,\\n DefaultRow,\\n BasicSingleCell,\\n DateCell,\\n DoubleCell,\\n SingleCell,\\n MonogramCell,\\n TableActionBar,\\n ButtonCta,\\n DropdownCta,\\n TableTopBar,\\n TableBottomBar\\n} from \\\"@spaced-out/ui-design-system/lib/components/Table\\\";\\n```\\nTable component internally uses HTML Table, Thead, Tbody, Tr, Th and Td tags. It accepts entries and headers for showing table.\\nThe Table component takes care of lots of things for you but it's not a magical component, it wraps a lot of behavior, so you can have,\\nfor instance, a static table with no sorting options.\\n\\nStaticTables work just like regular tables, except they don't have interactive headers, so you lose sorting.\\nBut remember, a regular interactive table uses a static table under the hood,\\nso how does it work? You can think of the StaticTable as a kind of controlled table component.\\nexcept that traditionally we'd update the entries prop and rerender from that.\\nThat would work just fine, but instead we can just pass in the keys we care about. By using StaticTable,\\nwe can simplify filtering and sorting outside of the table while the table keeps a stable value reference to all the entities.\\n\\nTo make any of rows selectable, we can do that by also passing in another property, selectedKeys.\\n\\nLet's say we want to also make any of the rows selectable, we can do that by also passing in another property, selectedKeys.\\n\\n### Custom Cells\\n\\nIt's possible you need to render out a custom cell, not just the default cell.\\nThere are two ways to do that. If you only need to modify a single cell,\\nyou can simply add a render: `React.ComponentType<{data: T, extras?: U}>`\\nkey to any given header item.\\n\\nThis cell renderer receives the _whole row_ of data, not just the individual cell, it's up to you what to do with it.\\n\\n### With Table Top, Bottom Bar and Actions\\n\\nYou can attach a top, bottom and action bar to the table by adding `TableTopBar`, `TableBottomBar` and `TableActionBar` components.\\nThere are just semantic components which just provide padding and border standardization. You can add any component inside these components.\\nThese also accept **className** prop.\\n\\n### Best Practices\\n* A Data Table should always have a `TableTopBar`\\n* Use `stickyHeader` prop to make the header sticky\\n* Always assign a height to the table wrapper to make it scrollable\\n* Manage the Table's Wrapper height effectively when using `TableActionBar` component\\n* Always use local `ButtonCta` and `DropdownCta` for actions in Action bar. These components are\\njust CSS Wrappers for Button and SimpleButtonDropdown components\\n* Use ButtonCta component to add a button CTA in the `TableActionBar`\\n* Use DropdownCta component to add a dropdown CTA button in the `TableActionBar` for screen width less than size1280(1280px)\\n\\n### Handling Sticky Headers with Virtualization\\n* When using **virtualization**, always assign a fixed `min-width` and `max-width` to sticky table headers with **same value**.\\nThis ensures a strict, fixed width for header cells. Directly using `width` (non strict for table headers) alone is not sufficient, as\\nit can be overridden by content width due to table layout behavior, causing headers to shift.\\n* If the cell content may exceed the defined width, or if you're unsure of its maximum width, also use `white-space: normal;` and `word-break: break-word;`\\nto ensure the content wraps within the cell instead of overflowing or causing layout shifts.\\n\\nThis helps maintain consistent column alignment and improves readability across varying data lengths.\\n\\n```jsx\\n 0,\\n })\\n }}\\n/>\\n```\\n\\n```css\\n.tableWrapper {\\n height: calc(sizeFullViewportHeight - size160);\\n}\\n\\n.tableWrapper.withActionBar {\\n height: calc((sizeFullViewportHeight - size160) - actionBarHeight);\\n}\\n```\\n\\n### Usage\\n\\n```jsx\\nconst TABLE_HEADERS = [\\n { label: \\\"Name\\\", key: \\\"name\\\", sortable: true, className: css.mediumColumn },\\n { label: \\\"Tel\\\", key: \\\"phone\\\", sortable: true, className: css.mediumColumn },\\n];\\n\\nconst TABLE_DATA = [\\n {\\n id: \\\"1\\\",\\n name: \\\"Alice\\\",\\n phone: \\\"123-456-7890\\\",\\n },\\n {\\n id: \\\"2\\\",\\n name: \\\"Bob\\\",\\n phone: \\\"987-654-3210\\\",\\n },\\n];\\n\\nexport const _TableExample = (): React.Node => {\\n return (\\n
\\n {/* Top Bar with Filters */}\\n \\n
\\n Basic Data Table\\n \\n
\\n \\n\\n {/* Table */}\\n {\\n setSelectAllEntries(false);\\n setStaticTableKeysAcrossPages({\\n ...staticTableKeysAcrossPages,\\n [currPage]: keys,\\n });\\n }}\\n classNames={{\\n wrapper: classify(css.tableWrapper, {\\n [css.withActionBar]: getNumberOfEntriesSelected() > 0,\\n })\\n }}\\n />\\n\\n {/* Table Actions */}\\n {getNumberOfEntriesSelected() > 0 && (\\n \\n
\\n {\\n setSelectAllEntries(true);\\n setStaticTableKeysAcrossPages({\\n ...staticTableKeysAcrossPages,\\n [currPage]: tableEntries.map((entry) => entry.id),\\n });\\n }}\\n >\\n Select all items\\n \\n {getNumberOfEntriesSelected() > 0 && (\\n \\n {getNumberOfEntriesSelected() entries selected}\\n \\n )}\\n
\\n
\\n \\n Add to group\\n \\n
\\n
\\n \\n Add to group\\n \\n setSelectedKeys([])}\\n size=\\\"small\\\"\\n />\\n
\\n
\\n {\\n setSelectAllEntries(false);\\n setStaticTableKeysAcrossPages({});\\n }}\\n >\\n Close\\n \\n
\\n \\n )}\\n\\n {/* Bottom Bar with Pagination */}\\n \\n {\\n onMove(page || 1);\\n }}\\n >\\n \\n Showing page {currPage} of {totalPages}\\n \\n \\n \\n
\\n );\\n};\\n```\\n\\n```css\\n@value actionBarHeight: size50;\\n\\n.container {\\n width: sizeFluid;\\n}\\n\\n.left {\\n display: flex;\\n align-items: center;\\n}\\n\\n.title {\\n margin-right: spaceMedium;\\n}\\n\\n.mediumColumn {\\n width: calc(sizeFluid / 5);\\n}\\n\\n.tableWrapper {\\n height: calc(sizeFullViewportHeight - size160);\\n}\\n\\n.actionBar {\\n display: flex;\\n align-items: center;\\n gap: spaceXSmall;\\n}\\n\\n.tableWrapper.withActionBar {\\n height: calc((sizeFullViewportHeight - size160) - actionBarHeight);\\n}\\n\\n.leftActionSlot,\\n.rightActionSlot,\\n.middleActionSlot {\\n display: flex;\\n gap: spaceSmall;\\n align-items: center;\\n}\\n\\n.leftActionSlot,\\n.rightActionSlot {\\n width: calc(sizeFluid / 4);\\n}\\n\\n.leftActionSlot {\\n justify-content: flex-start;\\n}\\n\\n.middleActionSlot {\\n width: calc(sizeFluid / 2);\\n justify-content: center;\\n gap: spaceXXSmall;\\n}\\n\\n.rightActionSlot {\\n justify-content: flex-end;\\n}\\n\\n.smallTable {\\n display: none;\\n}\\n\\n@media only screen and (max-width: size1280) {\\n .fullTable {\\n display: none;\\n }\\n\\n .smallTable {\\n display: flex;\\n }\\n}\\n\\n.dangerText {\\n color: colorTextDanger;\\n}\\n\\n.dangerText:hover,\\n.dangerText:active,\\n.dangerText:focus {\\n color: colorTextDanger;\\n}\\n\\n```\\n \";\n };\n };\n readonly storySource: {\n readonly componentPath: \"/src/components/Table/Table\";\n };\n };\n};\n//# sourceMappingURL=Table.docs.d.ts.map" }, "TableActionBar.d.ts": { "path": "TableActionBar.d.ts", "content": "import * as React from 'react';\nimport type { ButtonProps } from '../../components/Button';\nimport type { SimpleButtonDropdownProps } from '../../components/ButtonDropdown';\nexport interface TableActionBarProps {\n children?: React.ReactNode;\n className?: string;\n testId?: string;\n}\nexport declare const ButtonCta: ({ classNames, testId, ...props }: ButtonProps & {\n testId?: string;\n}) => React.JSX.Element;\nexport declare const DropdownCta: ({ classNames, testId, ...props }: SimpleButtonDropdownProps & {\n testId?: string;\n}) => React.JSX.Element;\nexport declare const TableActionBar: ({ children, className, testId, ...props }: TableActionBarProps) => React.JSX.Element;\n//# sourceMappingURL=TableActionBar.d.ts.map" }, "TableBottomBar.d.ts": { "path": "TableBottomBar.d.ts", "content": "import * as React from 'react';\nexport interface TableBottomBarProps {\n children?: React.ReactNode;\n className?: string;\n testId?: string;\n}\nexport declare const TableBottomBar: ({ children, className, testId, ...props }: TableBottomBarProps) => React.JSX.Element;\n//# sourceMappingURL=TableBottomBar.d.ts.map" }, "TableTopBar.d.ts": { "path": "TableTopBar.d.ts", "content": "import * as React from 'react';\nexport interface TableTopBarProps {\n children?: React.ReactNode;\n className?: string;\n testId?: string;\n}\nexport declare const TableTopBar: ({ children, className, testId, ...props }: TableTopBarProps) => React.JSX.Element;\n//# sourceMappingURL=TableTopBar.d.ts.map" }, "dummyTableData.d.ts": { "path": "dummyTableData.d.ts", "content": "export declare const LARGE_TABLE_DATA: readonly [{\n readonly id: \"1\";\n readonly name: \"Alice\";\n readonly phone: \"123-456-7890\";\n readonly notes: \"likes candy\";\n readonly email: \"alice@symbolics.co\";\n readonly sign: \"taurus\";\n readonly address: \"8475 Bedford Lane Addison, IL 60101\";\n}, {\n readonly id: \"2\";\n readonly name: \"Bob\";\n readonly phone: \"987-654-3210\";\n readonly notes: \"enjoys hiking\";\n readonly email: \"bob@example.com\";\n readonly sign: \"virgo\";\n readonly address: \"1234 Oak Street Springfield, MO 65802\";\n}, {\n readonly id: \"3\";\n readonly name: \"Charlie\";\n readonly phone: \"555-123-4567\";\n readonly notes: \"loves photography\";\n readonly email: \"charlie@testmail.com\";\n readonly sign: \"libra\";\n readonly address: \"456 Pine Avenue San Diego, CA 92101\";\n}, {\n readonly id: \"4\";\n readonly name: \"David\";\n readonly phone: \"222-333-4444\";\n readonly notes: \"avid reader\";\n readonly email: \"david@examplemail.com\";\n readonly sign: \"leo\";\n readonly address: \"789 Elm Street Dallas, TX 75201\";\n}, {\n readonly id: \"5\";\n readonly name: \"Emma\";\n readonly phone: \"666-777-8888\";\n readonly notes: \"animal lover\";\n readonly email: \"emma@testmail.co\";\n readonly sign: \"cancer\";\n readonly address: \"567 Willow Lane New York, NY 10001\";\n}, {\n readonly id: \"6\";\n readonly name: \"Frank\";\n readonly phone: \"444-555-6666\";\n readonly notes: \"technology enthusiast\";\n readonly email: \"frank@examplemail.co\";\n readonly sign: \"aquarius\";\n readonly address: \"234 Birch Street Seattle, WA 98101\";\n}, {\n readonly id: \"7\";\n readonly name: \"Grace\";\n readonly phone: \"777-888-9999\";\n readonly notes: \"foodie\";\n readonly email: \"grace@testmail.com\";\n readonly sign: \"sagittarius\";\n readonly address: \"456 Oak Lane Los Angeles, CA 90001\";\n}, {\n readonly id: \"8\";\n readonly name: \"Henry\";\n readonly phone: \"111-222-3333\";\n readonly notes: \"gardening lover\";\n readonly email: \"henry@example.com\";\n readonly sign: \"capricorn\";\n readonly address: \"789 Maple Street Chicago, IL 60601\";\n}, {\n readonly id: \"9\";\n readonly name: \"Isabella\";\n readonly phone: \"888-999-0000\";\n readonly notes: \"musician\";\n readonly email: \"isabella@testmail.co\";\n readonly sign: \"pisces\";\n readonly address: \"567 Cedar Lane Miami, FL 33101\";\n}, {\n readonly id: \"10\";\n readonly name: \"Jack\";\n readonly phone: \"444-555-6666\";\n readonly notes: \"travel enthusiast\";\n readonly email: \"jack@examplemail.com\";\n readonly sign: \"aries\";\n readonly address: \"234 Oak Avenue San Francisco, CA 94101\";\n}, {\n readonly id: \"11\";\n readonly name: \"Kate\";\n readonly phone: \"222-333-4444\";\n readonly notes: \"coffee lover\";\n readonly email: \"kate@testmail.co\";\n readonly sign: \"gemini\";\n readonly address: \"789 Birch Lane Denver, CO 80201\";\n}, {\n readonly id: \"12\";\n readonly name: \"Liam\";\n readonly phone: \"777-888-9999\";\n readonly notes: \"sports enthusiast\";\n readonly email: \"liam@example.com\";\n readonly sign: \"leo\";\n readonly address: \"567 Oak Street Austin, TX 78701\";\n}, {\n readonly id: \"13\";\n readonly name: \"Mia\";\n readonly phone: \"333-444-5555\";\n readonly notes: \"art lover\";\n readonly email: \"mia@testmail.co\";\n readonly sign: \"libra\";\n readonly address: \"123 Pine Lane Portland, OR 97201\";\n}, {\n readonly id: \"14\";\n readonly name: \"Noah\";\n readonly phone: \"888-999-0000\";\n readonly notes: \"pet lover\";\n readonly email: \"noah@examplemail.com\";\n readonly sign: \"virgo\";\n readonly address: \"234 Cedar Street Phoenix, AZ 85001\";\n}, {\n readonly id: \"15\";\n readonly name: \"Olivia\";\n readonly phone: \"555-666-7777\";\n readonly notes: \"bookworm\";\n readonly email: \"olivia@testmail.co\";\n readonly sign: \"taurus\";\n readonly address: \"567 Maple Lane Nashville, TN 37201\";\n}, {\n readonly id: \"16\";\n readonly name: \"Patrick\";\n readonly phone: \"333-444-5555\";\n readonly notes: \"nature lover\";\n readonly email: \"patrick@example.com\";\n readonly sign: \"aquarius\";\n readonly address: \"789 Elm Avenue Atlanta, GA 30301\";\n}, {\n readonly id: \"17\";\n readonly name: \"Quinn\";\n readonly phone: \"666-777-8888\";\n readonly notes: \"fitness enthusiast\";\n readonly email: \"quinn@testmail.co\";\n readonly sign: \"sagittarius\";\n readonly address: \"234 Oak Lane Minneapolis, MN 55401\";\n}, {\n readonly id: \"18\";\n readonly name: \"Ryan\";\n readonly phone: \"111-222-3333\";\n readonly notes: \"movie buff\";\n readonly email: \"ryan@examplemail.com\";\n readonly sign: \"capricorn\";\n readonly address: \"567 Pine Street Houston, TX 77001\";\n}, {\n readonly id: \"19\";\n readonly name: \"Sophia\";\n readonly phone: \"777-888-9999\";\n readonly notes: \"gamer\";\n readonly email: \"sophia@testmail.co\";\n readonly sign: \"pisces\";\n readonly address: \"789 Cedar Lane Philadelphia, PA 19019\";\n}, {\n readonly id: \"20\";\n readonly name: \"Thomas\";\n readonly phone: \"222-333-4444\";\n readonly notes: \"cooking enthusiast\";\n readonly email: \"thomas@example.com\";\n readonly sign: \"aries\";\n readonly address: \"123 Birch Avenue Detroit, MI 48201\";\n}, {\n readonly id: \"21\";\n readonly name: \"Uma\";\n readonly phone: \"555-666-7777\";\n readonly notes: \"yoga lover\";\n readonly email: \"uma@testmail.co\";\n readonly sign: \"gemini\";\n readonly address: \"789 Elm Street Austin, TX 78701\";\n}, {\n readonly id: \"22\";\n readonly name: \"Victor\";\n readonly phone: \"333-444-5555\";\n readonly notes: \"skateboarding enthusiast\";\n readonly email: \"victor@example.com\";\n readonly sign: \"leo\";\n readonly address: \"234 Pine Lane Denver, CO 80201\";\n}, {\n readonly id: \"23\";\n readonly name: \"Wendy\";\n readonly phone: \"888-999-0000\";\n readonly notes: \"animal rights activist\";\n readonly email: \"wendy@testmail.co\";\n readonly sign: \"libra\";\n readonly address: \"567 Oak Avenue San Francisco, CA 94101\";\n}, {\n readonly id: \"24\";\n readonly name: \"Xavier\";\n readonly phone: \"777-888-9999\";\n readonly notes: \"guitar player\";\n readonly email: \"xavier@examplemail.com\";\n readonly sign: \"virgo\";\n readonly address: \"234 Birch Lane Seattle, WA 98101\";\n}, {\n readonly id: \"25\";\n readonly name: \"Yarn\";\n readonly phone: \"555-666-7777\";\n readonly notes: \"hiking enthusiast\";\n readonly email: \"yara@testmail.co\";\n readonly sign: \"taurus\";\n readonly address: \"789 Cedar Street Portland, OR 97201\";\n}, {\n readonly id: \"26\";\n readonly name: \"Zane\";\n readonly phone: \"111-222-3333\";\n readonly notes: \"movie critic\";\n readonly email: \"zane@example.com\";\n readonly sign: \"aquarius\";\n readonly address: \"123 Maple Lane Los Angeles, CA 90001\";\n}, {\n readonly id: \"27\";\n readonly name: \"Ava\";\n readonly phone: \"777-888-9999\";\n readonly notes: \"dance enthusiast\";\n readonly email: \"ava@testmail.co\";\n readonly sign: \"sagittarius\";\n readonly address: \"567 Pine Avenue Chicago, IL 60601\";\n}, {\n readonly id: \"28\";\n readonly name: \"Benjamin\";\n readonly phone: \"222-333-4444\";\n readonly notes: \"soccer player\";\n readonly email: \"benjamin@examplemail.com\";\n readonly sign: \"capricorn\";\n readonly address: \"789 Oak Street Miami, FL 33101\";\n}, {\n readonly id: \"29\";\n readonly name: \"Chloe\";\n readonly phone: \"888-999-0000\";\n readonly notes: \"painter\";\n readonly email: \"chloe@testmail.co\";\n readonly sign: \"pisces\";\n readonly address: \"234 Elm Lane Houston, TX 77001\";\n}, {\n readonly id: \"30\";\n readonly name: \"Daniel\";\n readonly phone: \"555-666-7777\";\n readonly notes: \"technology blogger\";\n readonly email: \"daniel@example.com\";\n readonly sign: \"aries\";\n readonly address: \"789 Birch Avenue Philadelphia, PA 19019\";\n}, {\n readonly id: \"31\";\n readonly name: \"Ella\";\n readonly phone: \"333-444-5555\";\n readonly notes: \"book lover\";\n readonly email: \"ella@testmail.co\";\n readonly sign: \"gemini\";\n readonly address: \"123 Oak Street Detroit, MI 48201\";\n}, {\n readonly id: \"32\";\n readonly name: \"Finn\";\n readonly phone: \"777-888-9999\";\n readonly notes: \"avid traveler\";\n readonly email: \"finn@examplemail.com\";\n readonly sign: \"leo\";\n readonly address: \"567 Pine Lane Austin, TX 78701\";\n}, {\n readonly id: \"33\";\n readonly name: \"Grace\";\n readonly phone: \"555-666-7777\";\n readonly notes: \"gamer\";\n readonly email: \"grace@testmail.co\";\n readonly sign: \"libra\";\n readonly address: \"789 Elm Avenue Denver, CO 80201\";\n}, {\n readonly id: \"34\";\n readonly name: \"Henry\";\n readonly phone: \"888-999-0000\";\n readonly notes: \"nature lover\";\n readonly email: \"henry@example.com\";\n readonly sign: \"virgo\";\n readonly address: \"234 Birch Lane San Francisco, CA 94101\";\n}, {\n readonly id: \"35\";\n readonly name: \"Isaac\";\n readonly phone: \"555-666-7777\";\n readonly notes: \"science enthusiast\";\n readonly email: \"isaac@testmail.co\";\n readonly sign: \"taurus\";\n readonly address: \"789 Cedar Street Portland, OR 97201\";\n}, {\n readonly id: \"36\";\n readonly name: \"Julia\";\n readonly phone: \"333-444-5555\";\n readonly notes: \"musician\";\n readonly email: \"julia@examplemail.com\";\n readonly sign: \"aquarius\";\n readonly address: \"123 Oak Lane Los Angeles, CA 90001\";\n}, {\n readonly id: \"37\";\n readonly name: \"Kevin\";\n readonly phone: \"777-888-9999\";\n readonly notes: \"foodie\";\n readonly email: \"kevin@testmail.co\";\n readonly sign: \"sagittarius\";\n readonly address: \"567 Pine Avenue Chicago, IL 60601\";\n}, {\n readonly id: \"38\";\n readonly name: \"Lily\";\n readonly phone: \"222-333-4444\";\n readonly notes: \"photographer\";\n readonly email: \"lily@example.com\";\n readonly sign: \"capricorn\";\n readonly address: \"789 Oak Street Miami, FL 33101\";\n}, {\n readonly id: \"39\";\n readonly name: \"Mason\";\n readonly phone: \"888-999-0000\";\n readonly notes: \"soccer player\";\n readonly email: \"mason@testmail.co\";\n readonly sign: \"pisces\";\n readonly address: \"234 Elm Lane Houston, TX 77001\";\n}, {\n readonly id: \"40\";\n readonly name: \"Nora\";\n readonly phone: \"555-666-7777\";\n readonly notes: \"animal lover\";\n readonly email: \"nora@examplemail.com\";\n readonly sign: \"aries\";\n readonly address: \"789 Birch Avenue Philadelphia, PA 19019\";\n}, {\n readonly id: \"41\";\n readonly name: \"Oliver\";\n readonly phone: \"333-444-5555\";\n readonly notes: \"chess player\";\n readonly email: \"oliver@testmail.co\";\n readonly sign: \"gemini\";\n readonly address: \"123 Oak Lane Denver, CO 80201\";\n}, {\n readonly id: \"42\";\n readonly name: \"Penelope\";\n readonly phone: \"777-888-9999\";\n readonly notes: \"gardening lover\";\n readonly email: \"penelope@example.com\";\n readonly sign: \"leo\";\n readonly address: \"567 Pine Street San Francisco, CA 94101\";\n}, {\n readonly id: \"43\";\n readonly name: \"Quentin\";\n readonly phone: \"555-666-7777\";\n readonly notes: \"film buff\";\n readonly email: \"quentin@testmail.co\";\n readonly sign: \"libra\";\n readonly address: \"789 Elm Avenue Seattle, WA 98101\";\n}, {\n readonly id: \"44\";\n readonly name: \"Ruby\";\n readonly phone: \"888-999-0000\";\n readonly notes: \"music lover\";\n readonly email: \"ruby@examplemail.com\";\n readonly sign: \"virgo\";\n readonly address: \"234 Birch Lane Los Angeles, CA 90001\";\n}, {\n readonly id: \"45\";\n readonly name: \"Samuel\";\n readonly phone: \"555-666-7777\";\n readonly notes: \"fitness enthusiast\";\n readonly email: \"samuel@testmail.co\";\n readonly sign: \"taurus\";\n readonly address: \"789 Cedar Street Portland, OR 97201\";\n}, {\n readonly id: \"46\";\n readonly name: \"Tessa\";\n readonly phone: \"333-444-5555\";\n readonly notes: \"book lover\";\n readonly email: \"tessa@examplemail.com\";\n readonly sign: \"aquarius\";\n readonly address: \"123 Oak Lane Austin, TX 78701\";\n}, {\n readonly id: \"47\";\n readonly name: \"Uriah\";\n readonly phone: \"777-888-9999\";\n readonly notes: \"basketball player\";\n readonly email: \"uriah@testmail.co\";\n readonly sign: \"sagittarius\";\n readonly address: \"567 Pine Avenue Denver, CO 80201\";\n}, {\n readonly id: \"48\";\n readonly name: \"Valentino\";\n readonly phone: \"222-333-4444\";\n readonly notes: \"art enthusiast\";\n readonly email: \"valentina@example.com\";\n readonly sign: \"capricorn\";\n readonly address: \"789 Oak Street San Francisco, CA 94101\";\n}, {\n readonly id: \"49\";\n readonly name: \"William\";\n readonly phone: \"888-999-0000\";\n readonly notes: \"animal lover\";\n readonly email: \"william@testmail.co\";\n readonly sign: \"pisces\";\n readonly address: \"234 Elm Lane Seattle, WA 98101\";\n}, {\n readonly id: \"50\";\n readonly name: \"Xenia\";\n readonly phone: \"555-666-7777\";\n readonly notes: \"travel enthusiast\";\n readonly email: \"xena@examplemail.com\";\n readonly sign: \"aries\";\n readonly address: \"789 Birch Avenue Portland, OR 97201\";\n}, {\n readonly id: \"51\";\n readonly name: \"Yanina\";\n readonly phone: \"333-444-5555\";\n readonly notes: \"swimming enthusiast\";\n readonly email: \"yannis@testmail.co\";\n readonly sign: \"gemini\";\n readonly address: \"123 Oak Lane Los Angeles, CA 90001\";\n}, {\n readonly id: \"52\";\n readonly name: \"Zara\";\n readonly phone: \"777-888-9999\";\n readonly notes: \"foodie\";\n readonly email: \"zara@example.com\";\n readonly sign: \"leo\";\n readonly address: \"567 Pine Street Chicago, IL 60601\";\n}, {\n readonly id: \"53\";\n readonly name: \"Aaron\";\n readonly phone: \"555-666-7777\";\n readonly notes: \"video game developer\";\n readonly email: \"aaron@testmail.co\";\n readonly sign: \"libra\";\n readonly address: \"789 Elm Avenue Miami, FL 33101\";\n}, {\n readonly id: \"54\";\n readonly name: \"Bella\";\n readonly phone: \"888-999-0000\";\n readonly notes: \"nature lover\";\n readonly email: \"bella@examplemail.com\";\n readonly sign: \"virgo\";\n readonly address: \"234 Birch Lane Houston, TX 77001\";\n}, {\n readonly id: \"55\";\n readonly name: \"Caleb\";\n readonly phone: \"555-666-7777\";\n readonly notes: \"science geek\";\n readonly email: \"caleb@testmail.co\";\n readonly sign: \"taurus\";\n readonly address: \"789 Cedar Street Philadelphia, PA 19019\";\n}, {\n readonly id: \"56\";\n readonly name: \"Daisy\";\n readonly phone: \"333-444-5555\";\n readonly notes: \"musician\";\n readonly email: \"daisy@example.com\";\n readonly sign: \"aquarius\";\n readonly address: \"123 Oak Lane Austin, TX 78701\";\n}, {\n readonly id: \"57\";\n readonly name: \"Ethan\";\n readonly phone: \"777-888-9999\";\n readonly notes: \"soccer player\";\n readonly email: \"ethan@testmail.co\";\n readonly sign: \"sagittarius\";\n readonly address: \"567 Pine Avenue Denver, CO 80201\";\n}, {\n readonly id: \"58\";\n readonly name: \"Fiona\";\n readonly phone: \"222-333-4444\";\n readonly notes: \"bookworm\";\n readonly email: \"fiona@examplemail.com\";\n readonly sign: \"capricorn\";\n readonly address: \"789 Oak Street San Francisco, CA 94101\";\n}, {\n readonly id: \"59\";\n readonly name: \"Gavin\";\n readonly phone: \"888-999-0000\";\n readonly notes: \"gamer\";\n readonly email: \"gavin@testmail.co\";\n readonly sign: \"pisces\";\n readonly address: \"234 Elm Lane Seattle, WA 98101\";\n}, {\n readonly id: \"60\";\n readonly name: \"Hannah\";\n readonly phone: \"555-666-7777\";\n readonly notes: \"yoga lover\";\n readonly email: \"hannah@examplemail.com\";\n readonly sign: \"aries\";\n readonly address: \"789 Birch Avenue Portland, OR 97201\";\n}, {\n readonly id: \"61\";\n readonly name: \"Ian\";\n readonly phone: \"333-444-5555\";\n readonly notes: \"painter\";\n readonly email: \"ian@testmail.co\";\n readonly sign: \"gemini\";\n readonly address: \"123 Oak Lane Los Angeles, CA 90001\";\n}, {\n readonly id: \"62\";\n readonly name: \"Jasmine\";\n readonly phone: \"777-888-9999\";\n readonly notes: \"photographer\";\n readonly email: \"jasmine@example.com\";\n readonly sign: \"leo\";\n readonly address: \"567 Pine Street Chicago, IL 60601\";\n}, {\n readonly id: \"63\";\n readonly name: \"Kevin\";\n readonly phone: \"555-666-7777\";\n readonly notes: \"film enthusiast\";\n readonly email: \"kevin@testmail.co\";\n readonly sign: \"libra\";\n readonly address: \"789 Elm Avenue Miami, FL 33101\";\n}, {\n readonly id: \"64\";\n readonly name: \"Luna\";\n readonly phone: \"888-999-0000\";\n readonly notes: \"astronomy lover\";\n readonly email: \"luna@examplemail.com\";\n readonly sign: \"virgo\";\n readonly address: \"234 Birch Lane Houston, TX 77001\";\n}, {\n readonly id: \"65\";\n readonly name: \"Milo\";\n readonly phone: \"555-666-7777\";\n readonly notes: \"travel enthusiast\";\n readonly email: \"milo@testmail.co\";\n readonly sign: \"taurus\";\n readonly address: \"789 Cedar Street Philadelphia, PA 19019\";\n}, {\n readonly id: \"66\";\n readonly name: \"Nina\";\n readonly phone: \"333-444-5555\";\n readonly notes: \"dancer\";\n readonly email: \"nina@example.com\";\n readonly sign: \"aquarius\";\n readonly address: \"123 Oak Lane Austin, TX 78701\";\n}, {\n readonly id: \"67\";\n readonly name: \"Owen\";\n readonly phone: \"777-888-9999\";\n readonly notes: \"soccer player\";\n readonly email: \"owen@testmail.co\";\n readonly sign: \"sagittarius\";\n readonly address: \"567 Pine Avenue Denver, CO 80201\";\n}, {\n readonly id: \"68\";\n readonly name: \"Piper\";\n readonly phone: \"222-333-4444\";\n readonly notes: \"gamer\";\n readonly email: \"piper@examplemail.com\";\n readonly sign: \"capricorn\";\n readonly address: \"789 Oak Street San Francisco, CA 94101\";\n}, {\n readonly id: \"69\";\n readonly name: \"Quincy\";\n readonly phone: \"888-999-0000\";\n readonly notes: \"music lover\";\n readonly email: \"quincy@testmail.co\";\n readonly sign: \"pisces\";\n readonly address: \"234 Elm Lane Seattle, WA 98101\";\n}, {\n readonly id: \"70\";\n readonly name: \"Riley\";\n readonly phone: \"555-666-7777\";\n readonly notes: \"athlete\";\n readonly email: \"riley@examplemail.com\";\n readonly sign: \"aries\";\n readonly address: \"789 Birch Avenue Portland, OR 97201\";\n}, {\n readonly id: \"71\";\n readonly name: \"Sophie\";\n readonly phone: \"333-444-5555\";\n readonly notes: \"animal lover\";\n readonly email: \"sophie@example.com\";\n readonly sign: \"gemini\";\n readonly address: \"123 Oak Lane Los Angeles, CA 90001\";\n}, {\n readonly id: \"72\";\n readonly name: \"Thea\";\n readonly phone: \"777-888-9999\";\n readonly notes: \"video game developer\";\n readonly email: \"theo@testmail.co\";\n readonly sign: \"leo\";\n readonly address: \"567 Pine Street Chicago, IL 60601\";\n}, {\n readonly id: \"73\";\n readonly name: \"Violet\";\n readonly phone: \"555-666-7777\";\n readonly notes: \"nature lover\";\n readonly email: \"violet@example.com\";\n readonly sign: \"libra\";\n readonly address: \"789 Elm Avenue Miami, FL 33101\";\n}, {\n readonly id: \"74\";\n readonly name: \"Wyatt\";\n readonly phone: \"888-999-0000\";\n readonly notes: \"outdoor enthusiast\";\n readonly email: \"wyatt@examplemail.com\";\n readonly sign: \"virgo\";\n readonly address: \"234 Birch Lane Houston, TX 77001\";\n}, {\n readonly id: \"75\";\n readonly name: \"Xavier\";\n readonly phone: \"555-666-7777\";\n readonly notes: \"musician\";\n readonly email: \"xavier@testmail.co\";\n readonly sign: \"taurus\";\n readonly address: \"789 Cedar Street Philadelphia, PA 19019\";\n}, {\n readonly id: \"76\";\n readonly name: \"Cara\";\n readonly phone: \"333-444-5555\";\n readonly notes: \"foodie\";\n readonly email: \"yara@example.com\";\n readonly sign: \"aquarius\";\n readonly address: \"123 Oak Lane Austin, TX 78701\";\n}, {\n readonly id: \"77\";\n readonly name: \"Zane\";\n readonly phone: \"777-888-9999\";\n readonly notes: \"technology enthusiast\";\n readonly email: \"zane@testmail.co\";\n readonly sign: \"sagittarius\";\n readonly address: \"567 Pine Avenue Denver, CO 80201\";\n}, {\n readonly id: \"78\";\n readonly name: \"Abigail\";\n readonly phone: \"222-333-4444\";\n readonly notes: \"bookworm\";\n readonly email: \"abigail@examplemail.com\";\n readonly sign: \"capricorn\";\n readonly address: \"789 Oak Street San Francisco, CA 94101\";\n}, {\n readonly id: \"79\";\n readonly name: \"Bentley\";\n readonly phone: \"888-999-0000\";\n readonly notes: \"dog lover\";\n readonly email: \"bentley@testmail.co\";\n readonly sign: \"pisces\";\n readonly address: \"234 Elm Lane Seattle, WA 98101\";\n}, {\n readonly id: \"80\";\n readonly name: \"Charlotte\";\n readonly phone: \"555-666-7777\";\n readonly notes: \"art enthusiast\";\n readonly email: \"charlotte@example.com\";\n readonly sign: \"aries\";\n readonly address: \"789 Birch Avenue Portland, OR 97201\";\n}, {\n readonly id: \"81\";\n readonly name: \"Dylan\";\n readonly phone: \"333-444-5555\";\n readonly notes: \"music producer\";\n readonly email: \"dylan@testmail.co\";\n readonly sign: \"gemini\";\n readonly address: \"123 Oak Lane Los Angeles, CA 90001\";\n}, {\n readonly id: \"82\";\n readonly name: \"Eva\";\n readonly phone: \"777-888-9999\";\n readonly notes: \"photographer\";\n readonly email: \"eva@example.com\";\n readonly sign: \"leo\";\n readonly address: \"567 Pine Street Chicago, IL 60601\";\n}, {\n readonly id: \"83\";\n readonly name: \"Finn\";\n readonly phone: \"555-666-7777\";\n readonly notes: \"coffee lover\";\n readonly email: \"finn@testmail.co\";\n readonly sign: \"libra\";\n readonly address: \"789 Elm Avenue Miami, FL 33101\";\n}, {\n readonly id: \"84\";\n readonly name: \"Grace\";\n readonly phone: \"888-999-0000\";\n readonly notes: \"nature lover\";\n readonly email: \"grace@examplemail.com\";\n readonly sign: \"virgo\";\n readonly address: \"234 Birch Lane Houston, TX 77001\";\n}, {\n readonly id: \"85\";\n readonly name: \"Henry\";\n readonly phone: \"555-666-7777\";\n readonly notes: \"travel enthusiast\";\n readonly email: \"henry@testmail.co\";\n readonly sign: \"taurus\";\n readonly address: \"789 Cedar Street Philadelphia, PA 19019\";\n}, {\n readonly id: \"86\";\n readonly name: \"Isabella\";\n readonly phone: \"333-444-5555\";\n readonly notes: \"foodie\";\n readonly email: \"isabella@example.com\";\n readonly sign: \"aquarius\";\n readonly address: \"123 Oak Lane Austin, TX 78701\";\n}, {\n readonly id: \"87\";\n readonly name: \"Jack\";\n readonly phone: \"777-888-9999\";\n readonly notes: \"hiking enthusiast\";\n readonly email: \"jack@testmail.co\";\n readonly sign: \"sagittarius\";\n readonly address: \"567 Pine Avenue Denver, CO 80201\";\n}, {\n readonly id: \"88\";\n readonly name: \"Katherine\";\n readonly phone: \"222-333-4444\";\n readonly notes: \"art lover\";\n readonly email: \"katherine@examplemail.com\";\n readonly sign: \"capricorn\";\n readonly address: \"789 Oak Street San Francisco, CA 94101\";\n}, {\n readonly id: \"89\";\n readonly name: \"Liam\";\n readonly phone: \"888-999-0000\";\n readonly notes: \"animal lover\";\n readonly email: \"liam@testmail.co\";\n readonly sign: \"pisces\";\n readonly address: \"234 Elm Lane Seattle, WA 98101\";\n}, {\n readonly id: \"90\";\n readonly name: \"Mia\";\n readonly phone: \"555-666-7777\";\n readonly notes: \"bookworm\";\n readonly email: \"mia@example.com\";\n readonly sign: \"aries\";\n readonly address: \"789 Birch Avenue Portland, OR 97201\";\n}, {\n readonly id: \"91\";\n readonly name: \"Noah\";\n readonly phone: \"333-444-5555\";\n readonly notes: \"gamer\";\n readonly email: \"noah@examplemail.com\";\n readonly sign: \"gemini\";\n readonly address: \"123 Oak Lane Los Angeles, CA 90001\";\n}, {\n readonly id: \"92\";\n readonly name: \"Olivia\";\n readonly phone: \"777-888-9999\";\n readonly notes: \"technology enthusiast\";\n readonly email: \"olivia@testmail.co\";\n readonly sign: \"leo\";\n readonly address: \"567 Pine Street Chicago, IL 60601\";\n}, {\n readonly id: \"93\";\n readonly name: \"Patrick\";\n readonly phone: \"555-666-7777\";\n readonly notes: \"sports enthusiast\";\n readonly email: \"patrick@example.com\";\n readonly sign: \"libra\";\n readonly address: \"789 Elm Avenue Miami, FL 33101\";\n}, {\n readonly id: \"94\";\n readonly name: \"Quinn\";\n readonly phone: \"888-999-0000\";\n readonly notes: \"nature lover\";\n readonly email: \"quinn@examplemail.com\";\n readonly sign: \"virgo\";\n readonly address: \"234 Birch Lane Houston, TX 77001\";\n}, {\n readonly id: \"95\";\n readonly name: \"Ryan\";\n readonly phone: \"555-666-7777\";\n readonly notes: \"musician\";\n readonly email: \"ryan@testmail.co\";\n readonly sign: \"taurus\";\n readonly address: \"789 Cedar Street Philadelphia, PA 19019\";\n}, {\n readonly id: \"96\";\n readonly name: \"Sophia\";\n readonly phone: \"333-444-5555\";\n readonly notes: \"foodie\";\n readonly email: \"sophia@example.com\";\n readonly sign: \"aquarius\";\n readonly address: \"123 Oak Lane Austin, TX 78701\";\n}, {\n readonly id: \"97\";\n readonly name: \"Thomas\";\n readonly phone: \"777-888-9999\";\n readonly notes: \"hiking enthusiast\";\n readonly email: \"thomas@testmail.co\";\n readonly sign: \"sagittarius\";\n readonly address: \"567 Pine Avenue Denver, CO 80201\";\n}, {\n readonly id: \"98\";\n readonly name: \"Uma\";\n readonly phone: \"222-333-4444\";\n readonly notes: \"art lover\";\n readonly email: \"uma@examplemail.com\";\n readonly sign: \"capricorn\";\n readonly address: \"789 Oak Street San Francisco, CA 94101\";\n}, {\n readonly id: \"99\";\n readonly name: \"Victor\";\n readonly phone: \"888-999-0000\";\n readonly notes: \"animal lover\";\n readonly email: \"victor@testmail.co\";\n readonly sign: \"pisces\";\n readonly address: \"234 Elm Lane Seattle, WA 98101\";\n}, {\n readonly id: \"100\";\n readonly name: \"Wendy\";\n readonly phone: \"555-666-7777\";\n readonly notes: \"bookworm\";\n readonly email: \"wendy@example.com\";\n readonly sign: \"aries\";\n readonly address: \"789 Birch Avenue Portland, OR 97201\";\n}, {\n readonly id: \"101\";\n readonly name: \"Bander\";\n readonly phone: \"333-444-5555\";\n readonly notes: \"chess player\";\n readonly email: \"xander@testmail.co\";\n readonly sign: \"gemini\";\n readonly address: \"123 Oak Lane Los Angeles, CA 90001\";\n}, {\n readonly id: \"102\";\n readonly name: \"Jasmine\";\n readonly phone: \"777-888-9999\";\n readonly notes: \"gardening enthusiast\";\n readonly email: \"yasmine@example.com\";\n readonly sign: \"leo\";\n readonly address: \"567 Pine Street Chicago, IL 60601\";\n}, {\n readonly id: \"103\";\n readonly name: \"Zara\";\n readonly phone: \"555-666-7777\";\n readonly notes: \"film buff\";\n readonly email: \"zara@testmail.co\";\n readonly sign: \"libra\";\n readonly address: \"789 Elm Avenue Miami, FL 33101\";\n}, {\n readonly id: \"104\";\n readonly name: \"Alex\";\n readonly phone: \"888-999-0000\";\n readonly notes: \"music lover\";\n readonly email: \"alex@examplemail.com\";\n readonly sign: \"virgo\";\n readonly address: \"234 Birch Lane Houston, TX 77001\";\n}, {\n readonly id: \"105\";\n readonly name: \"Bianca\";\n readonly phone: \"555-666-7777\";\n readonly notes: \"travel enthusiast\";\n readonly email: \"bianca@example.com\";\n readonly sign: \"taurus\";\n readonly address: \"789 Cedar Street Philadelphia, PA 19019\";\n}, {\n readonly id: \"106\";\n readonly name: \"Cameron\";\n readonly phone: \"333-444-5555\";\n readonly notes: \"book lover\";\n readonly email: \"cameron@examplemail.com\";\n readonly sign: \"aquarius\";\n readonly address: \"123 Oak Lane Austin, TX 78701\";\n}, {\n readonly id: \"107\";\n readonly name: \"Diana\";\n readonly phone: \"777-888-9999\";\n readonly notes: \"basketball player\";\n readonly email: \"diana@testmail.co\";\n readonly sign: \"sagittarius\";\n readonly address: \"567 Pine Avenue Denver, CO 80201\";\n}, {\n readonly id: \"108\";\n readonly name: \"John\";\n readonly phone: \"555-123-4567\";\n readonly notes: \"Software Engineer\";\n readonly email: \"john@example.com\";\n readonly sign: \"Aries\";\n readonly address: \"123 Oak Street, San Francisco, CA 94101\";\n}, {\n readonly id: \"109\";\n readonly name: \"Alice\";\n readonly phone: \"999-555-1212\";\n readonly notes: \"Teacher\";\n readonly email: \"alice@testmail.co\";\n readonly sign: \"Leo\";\n readonly address: \"456 Elm Road, New York, NY 10001\";\n}, {\n readonly id: \"110\";\n readonly name: \"David\";\n readonly phone: \"777-333-9999\";\n readonly notes: \"Doctor\";\n readonly email: \"david@example.com\";\n readonly sign: \"Scorpio\";\n readonly address: \"789 Maple Avenue, Los Angeles, CA 90001\";\n}, {\n readonly id: \"111\";\n readonly name: \"Emma\";\n readonly phone: \"888-777-5555\";\n readonly notes: \"Graphic Designer\";\n readonly email: \"emma@testmail.co\";\n readonly sign: \"Gemini\";\n readonly address: \"321 Birch Street, Chicago, IL 60601\";\n}, {\n readonly id: \"112\";\n readonly name: \"Daniel\";\n readonly phone: \"444-666-2222\";\n readonly notes: \"Lawyer\";\n readonly email: \"daniel@example.com\";\n readonly sign: \"Taurus\";\n readonly address: \"567 Pine Avenue, Denver, CO 80201\";\n}, {\n readonly id: \"113\";\n readonly name: \"Sophie\";\n readonly phone: \"666-999-1111\";\n readonly notes: \"Chef\";\n readonly email: \"sophie@testmail.co\";\n readonly sign: \"Capricorn\";\n readonly address: \"890 Cedar Road, Miami, FL 33101\";\n}, {\n readonly id: \"114\";\n readonly name: \"William\";\n readonly phone: \"111-444-7777\";\n readonly notes: \"Architect\";\n readonly email: \"william@example.com\";\n readonly sign: \"Sagittarius\";\n readonly address: \"123 Elm Street, Seattle, WA 98101\";\n}, {\n readonly id: \"115\";\n readonly name: \"Olivia\";\n readonly phone: \"222-888-9999\";\n readonly notes: \"Nurse\";\n readonly email: \"olivia@testmail.co\";\n readonly sign: \"Pisces\";\n readonly address: \"456 Oak Lane, San Francisco, CA 94101\";\n}, {\n readonly id: \"116\";\n readonly name: \"James\";\n readonly phone: \"555-777-2222\";\n readonly notes: \"Police Officer\";\n readonly email: \"james@example.com\";\n readonly sign: \"Virgo\";\n readonly address: \"789 Birch Road, New York, NY 10001\";\n}, {\n readonly id: \"117\";\n readonly name: \"Ava\";\n readonly phone: \"111-555-6666\";\n readonly notes: \"Dentist\";\n readonly email: \"ava@testmail.co\";\n readonly sign: \"Cancer\";\n readonly address: \"890 Oak Street, Los Angeles, CA 90001\";\n}, {\n readonly id: \"118\";\n readonly name: \"Liam\";\n readonly phone: \"777-555-8888\";\n readonly notes: \"Teacher\";\n readonly email: \"liam@example.com\";\n readonly sign: \"Libra\";\n readonly address: \"123 Cedar Road, Chicago, IL 60601\";\n}, {\n readonly id: \"119\";\n readonly name: \"Mia\";\n readonly phone: \"333-666-1111\";\n readonly notes: \"Software Developer\";\n readonly email: \"mia@testmail.co\";\n readonly sign: \"Leo\";\n readonly address: \"456 Pine Avenue, Denver, CO 80201\";\n}, {\n readonly id: \"120\";\n readonly name: \"Benjamin\";\n readonly phone: \"999-777-5555\";\n readonly notes: \"Engineer\";\n readonly email: \"benjamin@example.com\";\n readonly sign: \"Scorpio\";\n readonly address: \"567 Elm Lane, Miami, FL 33101\";\n}, {\n readonly id: \"121\";\n readonly name: \"Isabella\";\n readonly phone: \"888-111-4444\";\n readonly notes: \"Artist\";\n readonly email: \"isabella@testmail.co\";\n readonly sign: \"Gemini\";\n readonly address: \"321 Cedar Avenue, Seattle, WA 98101\";\n}, {\n readonly id: \"122\";\n readonly name: \"Eva\";\n readonly phone: \"444-666-8888\";\n readonly notes: \"Accountant\";\n readonly email: \"eva@example.com\";\n readonly sign: \"Virgo\";\n readonly address: \"567 Birch Lane, Houston, TX 77001\";\n}, {\n readonly id: \"123\";\n readonly name: \"Oliver\";\n readonly phone: \"333-999-7777\";\n readonly notes: \"Writer\";\n readonly email: \"oliver@testmail.co\";\n readonly sign: \"Cancer\";\n readonly address: \"890 Cedar Road, Miami, FL 33101\";\n}, {\n readonly id: \"124\";\n readonly name: \"Sophia\";\n readonly phone: \"777-888-2222\";\n readonly notes: \"Dentist\";\n readonly email: \"sophia@example.com\";\n readonly sign: \"Libra\";\n readonly address: \"123 Elm Street, Seattle, WA 98101\";\n}, {\n readonly id: \"125\";\n readonly name: \"Liam\";\n readonly phone: \"555-123-4567\";\n readonly notes: \"Software Engineer\";\n readonly email: \"liam@example.com\";\n readonly sign: \"Aries\";\n readonly address: \"123 Oak Street, San Francisco, CA 94101\";\n}, {\n readonly id: \"126\";\n readonly name: \"Olivia\";\n readonly phone: \"999-555-1212\";\n readonly notes: \"Teacher\";\n readonly email: \"olivia@testmail.co\";\n readonly sign: \"Leo\";\n readonly address: \"456 Elm Road, New York, NY 10001\";\n}, {\n readonly id: \"127\";\n readonly name: \"Noah\";\n readonly phone: \"777-333-9999\";\n readonly notes: \"Doctor\";\n readonly email: \"noah@example.com\";\n readonly sign: \"Scorpio\";\n readonly address: \"789 Maple Avenue, Los Angeles, CA 90001\";\n}, {\n readonly id: \"128\";\n readonly name: \"Sophia\";\n readonly phone: \"888-777-5555\";\n readonly notes: \"Graphic Designer\";\n readonly email: \"sophia@testmail.co\";\n readonly sign: \"Gemini\";\n readonly address: \"321 Birch Street, Chicago, IL 60601\";\n}, {\n readonly id: \"129\";\n readonly name: \"William\";\n readonly phone: \"444-666-2222\";\n readonly notes: \"Lawyer\";\n readonly email: \"william@example.com\";\n readonly sign: \"Taurus\";\n readonly address: \"567 Pine Avenue, Denver, CO 80201\";\n}, {\n readonly id: \"130\";\n readonly name: \"Olivia\";\n readonly phone: \"666-999-1111\";\n readonly notes: \"Chef\";\n readonly email: \"olivia@testmail.co\";\n readonly sign: \"Capricorn\";\n readonly address: \"890 Cedar Road, Miami, FL 33101\";\n}, {\n readonly id: \"131\";\n readonly name: \"James\";\n readonly phone: \"111-444-7777\";\n readonly notes: \"Architect\";\n readonly email: \"james@example.com\";\n readonly sign: \"Sagittarius\";\n readonly address: \"123 Elm Street, Seattle, WA 98101\";\n}, {\n readonly id: \"132\";\n readonly name: \"Emma\";\n readonly phone: \"222-888-9999\";\n readonly notes: \"Nurse\";\n readonly email: \"emma@testmail.co\";\n readonly sign: \"Pisces\";\n readonly address: \"456 Oak Lane, San Francisco, CA 94101\";\n}, {\n readonly id: \"133\";\n readonly name: \"Ava\";\n readonly phone: \"555-777-2222\";\n readonly notes: \"Police Officer\";\n readonly email: \"ava@example.com\";\n readonly sign: \"Virgo\";\n readonly address: \"789 Birch Road, New York, NY 10001\";\n}, {\n readonly id: \"134\";\n readonly name: \"Benjamin\";\n readonly phone: \"111-555-6666\";\n readonly notes: \"Dentist\";\n readonly email: \"benjamin@example.com\";\n readonly sign: \"Cancer\";\n readonly address: \"890 Oak Street, Los Angeles, CA 90001\";\n}, {\n readonly id: \"135\";\n readonly name: \"Sophia\";\n readonly phone: \"777-555-8888\";\n readonly notes: \"Teacher\";\n readonly email: \"sophia@example.com\";\n readonly sign: \"Libra\";\n readonly address: \"123 Cedar Road, Chicago, IL 60601\";\n}, {\n readonly id: \"136\";\n readonly name: \"Mia\";\n readonly phone: \"333-666-1111\";\n readonly notes: \"Software Developer\";\n readonly email: \"mia@testmail.co\";\n readonly sign: \"Leo\";\n readonly address: \"456 Pine Avenue, Denver, CO 80201\";\n}, {\n readonly id: \"137\";\n readonly name: \"Benjamin\";\n readonly phone: \"999-777-5555\";\n readonly notes: \"Engineer\";\n readonly email: \"benjamin@example.com\";\n readonly sign: \"Scorpio\";\n readonly address: \"567 Elm Lane, Miami, FL 33101\";\n}, {\n readonly id: \"138\";\n readonly name: \"Isabella\";\n readonly phone: \"888-111-4444\";\n readonly notes: \"Artist\";\n readonly email: \"isabella@testmail.co\";\n readonly sign: \"Gemini\";\n readonly address: \"321 Cedar Avenue, Seattle, WA 98101\";\n}, {\n readonly id: \"139\";\n readonly name: \"Eva\";\n readonly phone: \"444-666-8888\";\n readonly notes: \"Accountant\";\n readonly email: \"eva@example.com\";\n readonly sign: \"Virgo\";\n readonly address: \"567 Birch Lane, Houston, TX 77001\";\n}, {\n readonly id: \"140\";\n readonly name: \"Oliver\";\n readonly phone: \"333-999-7777\";\n readonly notes: \"Writer\";\n readonly email: \"oliver@testmail.co\";\n readonly sign: \"Cancer\";\n readonly address: \"890 Cedar Road, Miami, FL 33101\";\n}, {\n readonly id: \"141\";\n readonly name: \"Sophia\";\n readonly phone: \"777-888-2222\";\n readonly notes: \"Dentist\";\n readonly email: \"sophia@example.com\";\n readonly sign: \"Libra\";\n readonly address: \"123 Elm Street, Seattle, WA 98101\";\n}, {\n readonly id: \"142\";\n readonly name: \"Liam\";\n readonly phone: \"555-123-4567\";\n readonly notes: \"Software Engineer\";\n readonly email: \"liam@example.com\";\n readonly sign: \"Aries\";\n readonly address: \"123 Oak Street, San Francisco, CA 94101\";\n}, {\n readonly id: \"143\";\n readonly name: \"Olivia\";\n readonly phone: \"999-555-1212\";\n readonly notes: \"Teacher\";\n readonly email: \"olivia@testmail.co\";\n readonly sign: \"Leo\";\n readonly address: \"456 Elm Road, New York, NY 10001\";\n}, {\n readonly id: \"144\";\n readonly name: \"Noah\";\n readonly phone: \"777-333-9999\";\n readonly notes: \"Doctor\";\n readonly email: \"noah@example.com\";\n readonly sign: \"Scorpio\";\n readonly address: \"789 Maple Avenue, Los Angeles, CA 90001\";\n}, {\n readonly id: \"145\";\n readonly name: \"Sophia\";\n readonly phone: \"888-777-5555\";\n readonly notes: \"Graphic Designer\";\n readonly email: \"sophia@testmail.co\";\n readonly sign: \"Gemini\";\n readonly address: \"321 Birch Street, Chicago, IL 60601\";\n}, {\n readonly id: \"146\";\n readonly name: \"William\";\n readonly phone: \"444-666-2222\";\n readonly notes: \"Lawyer\";\n readonly email: \"william@example.com\";\n readonly sign: \"Taurus\";\n readonly address: \"567 Pine Avenue, Denver, CO 80201\";\n}, {\n readonly id: \"147\";\n readonly name: \"Olivia\";\n readonly phone: \"666-999-1111\";\n readonly notes: \"Chef\";\n readonly email: \"olivia@testmail.co\";\n readonly sign: \"Capricorn\";\n readonly address: \"890 Cedar Road, Miami, FL 33101\";\n}, {\n readonly id: \"148\";\n readonly name: \"James\";\n readonly phone: \"111-444-7777\";\n readonly notes: \"Architect\";\n readonly email: \"james@example.com\";\n readonly sign: \"Sagittarius\";\n readonly address: \"123 Elm Street, Seattle, WA 98101\";\n}, {\n readonly id: \"149\";\n readonly name: \"Emma\";\n readonly phone: \"222-888-9999\";\n readonly notes: \"Nurse\";\n readonly email: \"emma@testmail.co\";\n readonly sign: \"Pisces\";\n readonly address: \"456 Oak Lane, San Francisco, CA 94101\";\n}, {\n readonly id: \"150\";\n readonly name: \"Ava\";\n readonly phone: \"555-777-2222\";\n readonly notes: \"Police Officer\";\n readonly email: \"ava@example.com\";\n readonly sign: \"Virgo\";\n readonly address: \"789 Birch Road, New York, NY 10001\";\n}, {\n readonly id: \"151\";\n readonly name: \"Benjamin\";\n readonly phone: \"111-555-6666\";\n readonly notes: \"Dentist\";\n readonly email: \"benjamin@example.com\";\n readonly sign: \"Cancer\";\n readonly address: \"890 Oak Street, Los Angeles, CA 90001\";\n}, {\n readonly id: \"152\";\n readonly name: \"Sophia\";\n readonly phone: \"777-555-8888\";\n readonly notes: \"Teacher\";\n readonly email: \"sophia@example.com\";\n readonly sign: \"Libra\";\n readonly address: \"123 Cedar Road, Chicago, IL 60601\";\n}, {\n readonly id: \"153\";\n readonly name: \"Mia\";\n readonly phone: \"333-666-1111\";\n readonly notes: \"Software Developer\";\n readonly email: \"mia@testmail.co\";\n readonly sign: \"Leo\";\n readonly address: \"456 Pine Avenue, Denver, CO 80201\";\n}, {\n readonly id: \"154\";\n readonly name: \"Benjamin\";\n readonly phone: \"999-777-5555\";\n readonly notes: \"Engineer\";\n readonly email: \"benjamin@example.com\";\n readonly sign: \"Scorpio\";\n readonly address: \"567 Elm Lane, Miami, FL 33101\";\n}, {\n readonly id: \"155\";\n readonly name: \"Isabella\";\n readonly phone: \"888-111-4444\";\n readonly notes: \"Artist\";\n readonly email: \"isabella@testmail.co\";\n readonly sign: \"Gemini\";\n readonly address: \"321 Cedar Avenue, Seattle, WA 98101\";\n}, {\n readonly id: \"156\";\n readonly name: \"Eva\";\n readonly phone: \"444-666-8888\";\n readonly notes: \"Accountant\";\n readonly email: \"eva@example.com\";\n readonly sign: \"Virgo\";\n readonly address: \"567 Birch Lane, Houston, TX 77001\";\n}, {\n readonly id: \"157\";\n readonly name: \"Oliver\";\n readonly phone: \"333-999-7777\";\n readonly notes: \"Writer\";\n readonly email: \"oliver@testmail.co\";\n readonly sign: \"Cancer\";\n readonly address: \"890 Cedar Road, Miami, FL 33101\";\n}, {\n readonly id: \"158\";\n readonly name: \"Sophia\";\n readonly phone: \"777-888-2222\";\n readonly notes: \"Dentist\";\n readonly email: \"sophia@example.com\";\n readonly sign: \"Libra\";\n readonly address: \"123 Elm Street, Seattle, WA 98101\";\n}, {\n readonly id: \"159\";\n readonly name: \"Liam\";\n readonly phone: \"555-123-4567\";\n readonly notes: \"Software Engineer\";\n readonly email: \"liam@example.com\";\n readonly sign: \"Aries\";\n readonly address: \"123 Oak Street, San Francisco, CA 94101\";\n}, {\n readonly id: \"160\";\n readonly name: \"Olivia\";\n readonly phone: \"999-555-1212\";\n readonly notes: \"Teacher\";\n readonly email: \"olivia@testmail.co\";\n readonly sign: \"Leo\";\n readonly address: \"456 Elm Road, New York, NY 10001\";\n}, {\n readonly id: \"161\";\n readonly name: \"Noah\";\n readonly phone: \"777-333-9999\";\n readonly notes: \"Doctor\";\n readonly email: \"noah@example.com\";\n readonly sign: \"Scorpio\";\n readonly address: \"789 Maple Avenue, Los Angeles, CA 90001\";\n}, {\n readonly id: \"162\";\n readonly name: \"Sophia\";\n readonly phone: \"888-777-5555\";\n readonly notes: \"Graphic Designer\";\n readonly email: \"sophia@testmail.co\";\n readonly sign: \"Gemini\";\n readonly address: \"321 Birch Street, Chicago, IL 60601\";\n}, {\n readonly id: \"163\";\n readonly name: \"William\";\n readonly phone: \"444-666-2222\";\n readonly notes: \"Lawyer\";\n readonly email: \"william@example.com\";\n readonly sign: \"Taurus\";\n readonly address: \"567 Pine Avenue, Denver, CO 80201\";\n}, {\n readonly id: \"164\";\n readonly name: \"Olivia\";\n readonly phone: \"666-999-1111\";\n readonly notes: \"Chef\";\n readonly email: \"olivia@testmail.co\";\n readonly sign: \"Capricorn\";\n readonly address: \"890 Cedar Road, Miami, FL 33101\";\n}, {\n readonly id: \"165\";\n readonly name: \"James\";\n readonly phone: \"111-444-7777\";\n readonly notes: \"Architect\";\n readonly email: \"james@example.com\";\n readonly sign: \"Sagittarius\";\n readonly address: \"123 Elm Street, Seattle, WA 98101\";\n}, {\n readonly id: \"166\";\n readonly name: \"Emma\";\n readonly phone: \"222-888-9999\";\n readonly notes: \"Nurse\";\n readonly email: \"emma@testmail.co\";\n readonly sign: \"Pisces\";\n readonly address: \"456 Oak Lane, San Francisco, CA 94101\";\n}, {\n readonly id: \"167\";\n readonly name: \"Ava\";\n readonly phone: \"555-777-2222\";\n readonly notes: \"Police Officer\";\n readonly email: \"ava@example.com\";\n readonly sign: \"Virgo\";\n readonly address: \"789 Birch Road, New York, NY 10001\";\n}, {\n readonly id: \"168\";\n readonly name: \"Benjamin\";\n readonly phone: \"111-555-6666\";\n readonly notes: \"Dentist\";\n readonly email: \"benjamin@example.com\";\n readonly sign: \"Cancer\";\n readonly address: \"890 Oak Street, Los Angeles, CA 90001\";\n}, {\n readonly id: \"169\";\n readonly name: \"Sophia\";\n readonly phone: \"777-555-8888\";\n readonly notes: \"Teacher\";\n readonly email: \"sophia@example.com\";\n readonly sign: \"Libra\";\n readonly address: \"123 Cedar Road, Chicago, IL 60601\";\n}, {\n readonly id: \"170\";\n readonly name: \"Mia\";\n readonly phone: \"333-666-1111\";\n readonly notes: \"Software Developer\";\n readonly email: \"mia@testmail.co\";\n readonly sign: \"Leo\";\n readonly address: \"456 Pine Avenue, Denver, CO 80201\";\n}, {\n readonly id: \"171\";\n readonly name: \"Benjamin\";\n readonly phone: \"999-777-5555\";\n readonly notes: \"Engineer\";\n readonly email: \"benjamin@example.com\";\n readonly sign: \"Scorpio\";\n readonly address: \"567 Elm Lane, Miami, FL 33101\";\n}, {\n readonly id: \"172\";\n readonly name: \"Isabella\";\n readonly phone: \"888-111-4444\";\n readonly notes: \"Artist\";\n readonly email: \"isabella@testmail.co\";\n readonly sign: \"Gemini\";\n readonly address: \"321 Cedar Avenue, Seattle, WA 98101\";\n}, {\n readonly id: \"173\";\n readonly name: \"Eva\";\n readonly phone: \"444-666-8888\";\n readonly notes: \"Accountant\";\n readonly email: \"eva@example.com\";\n readonly sign: \"Virgo\";\n readonly address: \"567 Birch Lane, Houston, TX 77001\";\n}, {\n readonly id: \"174\";\n readonly name: \"Oliver\";\n readonly phone: \"333-999-7777\";\n readonly notes: \"Writer\";\n readonly email: \"oliver@testmail.co\";\n readonly sign: \"Cancer\";\n readonly address: \"890 Cedar Road, Miami, FL 33101\";\n}, {\n readonly id: \"175\";\n readonly name: \"Sophia\";\n readonly phone: \"777-888-2222\";\n readonly notes: \"Dentist\";\n readonly email: \"sophia@example.com\";\n readonly sign: \"Libra\";\n readonly address: \"123 Elm Street, Seattle, WA 98101\";\n}, {\n readonly id: \"176\";\n readonly name: \"Liam\";\n readonly phone: \"555-123-4567\";\n readonly notes: \"Software Engineer\";\n readonly email: \"liam@example.com\";\n readonly sign: \"Aries\";\n readonly address: \"123 Oak Street, San Francisco, CA 94101\";\n}, {\n readonly id: \"177\";\n readonly name: \"Olivia\";\n readonly phone: \"999-555-1212\";\n readonly notes: \"Teacher\";\n readonly email: \"olivia@testmail.co\";\n readonly sign: \"Leo\";\n readonly address: \"456 Elm Road, New York, NY 10001\";\n}, {\n readonly id: \"178\";\n readonly name: \"Noah\";\n readonly phone: \"777-333-9999\";\n readonly notes: \"Doctor\";\n readonly email: \"noah@example.com\";\n readonly sign: \"Scorpio\";\n readonly address: \"789 Maple Avenue, Los Angeles, CA 90001\";\n}, {\n readonly id: \"179\";\n readonly name: \"Sophia\";\n readonly phone: \"888-777-5555\";\n readonly notes: \"Graphic Designer\";\n readonly email: \"sophia@testmail.co\";\n readonly sign: \"Gemini\";\n readonly address: \"321 Birch Street, Chicago, IL 60601\";\n}, {\n readonly id: \"180\";\n readonly name: \"William\";\n readonly phone: \"444-666-2222\";\n readonly notes: \"Lawyer\";\n readonly email: \"william@example.com\";\n readonly sign: \"Taurus\";\n readonly address: \"567 Pine Avenue, Denver, CO 80201\";\n}, {\n readonly id: \"181\";\n readonly name: \"Olivia\";\n readonly phone: \"666-999-1111\";\n readonly notes: \"Chef\";\n readonly email: \"olivia@testmail.co\";\n readonly sign: \"Capricorn\";\n readonly address: \"890 Cedar Road, Miami, FL 33101\";\n}, {\n readonly id: \"182\";\n readonly name: \"James\";\n readonly phone: \"111-444-7777\";\n readonly notes: \"Architect\";\n readonly email: \"james@example.com\";\n readonly sign: \"Sagittarius\";\n readonly address: \"123 Elm Street, Seattle, WA 98101\";\n}, {\n readonly id: \"183\";\n readonly name: \"Emma\";\n readonly phone: \"222-888-9999\";\n readonly notes: \"Nurse\";\n readonly email: \"emma@testmail.co\";\n readonly sign: \"Pisces\";\n readonly address: \"456 Oak Lane, San Francisco, CA 94101\";\n}, {\n readonly id: \"184\";\n readonly name: \"Ava\";\n readonly phone: \"555-777-2222\";\n readonly notes: \"Police Officer\";\n readonly email: \"ava@example.com\";\n readonly sign: \"Virgo\";\n readonly address: \"789 Birch Road, New York, NY 10001\";\n}, {\n readonly id: \"185\";\n readonly name: \"Benjamin\";\n readonly phone: \"111-555-6666\";\n readonly notes: \"Dentist\";\n readonly email: \"benjamin@example.com\";\n readonly sign: \"Cancer\";\n readonly address: \"890 Oak Street, Los Angeles, CA 90001\";\n}, {\n readonly id: \"186\";\n readonly name: \"Sophia\";\n readonly phone: \"777-555-8888\";\n readonly notes: \"Teacher\";\n readonly email: \"sophia@example.com\";\n readonly sign: \"Libra\";\n readonly address: \"123 Cedar Road, Chicago, IL 60601\";\n}, {\n readonly id: \"187\";\n readonly name: \"Mia\";\n readonly phone: \"333-666-1111\";\n readonly notes: \"Software Developer\";\n readonly email: \"mia@testmail.co\";\n readonly sign: \"Leo\";\n readonly address: \"456 Pine Avenue, Denver, CO 80201\";\n}, {\n readonly id: \"188\";\n readonly name: \"Benjamin\";\n readonly phone: \"999-777-5555\";\n readonly notes: \"Engineer\";\n readonly email: \"benjamin@example.com\";\n readonly sign: \"Scorpio\";\n readonly address: \"567 Elm Lane, Miami, FL 33101\";\n}, {\n readonly id: \"189\";\n readonly name: \"Isabella\";\n readonly phone: \"888-111-4444\";\n readonly notes: \"Artist\";\n readonly email: \"isabella@testmail.co\";\n readonly sign: \"Gemini\";\n readonly address: \"321 Cedar Avenue, Seattle, WA 98101\";\n}, {\n readonly id: \"190\";\n readonly name: \"Eva\";\n readonly phone: \"444-666-8888\";\n readonly notes: \"Accountant\";\n readonly email: \"eva@example.com\";\n readonly sign: \"Virgo\";\n readonly address: \"567 Birch Lane, Houston, TX 77001\";\n}, {\n readonly id: \"191\";\n readonly name: \"Oliver\";\n readonly phone: \"333-999-7777\";\n readonly notes: \"Writer\";\n readonly email: \"oliver@testmail.co\";\n readonly sign: \"Cancer\";\n readonly address: \"890 Cedar Road, Miami, FL 33101\";\n}, {\n readonly id: \"192\";\n readonly name: \"Sophia\";\n readonly phone: \"777-888-2222\";\n readonly notes: \"Dentist\";\n readonly email: \"sophia@example.com\";\n readonly sign: \"Libra\";\n readonly address: \"123 Elm Street, Seattle, WA 98101\";\n}, {\n readonly id: \"193\";\n readonly name: \"Liam\";\n readonly phone: \"555-123-4567\";\n readonly notes: \"Software Engineer\";\n readonly email: \"liam@example.com\";\n readonly sign: \"Aries\";\n readonly address: \"123 Oak Street, San Francisco, CA 94101\";\n}, {\n readonly id: \"194\";\n readonly name: \"Olivia\";\n readonly phone: \"999-555-1212\";\n readonly notes: \"Teacher\";\n readonly email: \"olivia@testmail.co\";\n readonly sign: \"Leo\";\n readonly address: \"456 Elm Road, New York, NY 10001\";\n}, {\n readonly id: \"195\";\n readonly name: \"Noah\";\n readonly phone: \"777-333-9999\";\n readonly notes: \"Doctor\";\n readonly email: \"noah@example.com\";\n readonly sign: \"Scorpio\";\n readonly address: \"789 Maple Avenue, Los Angeles, CA 90001\";\n}, {\n readonly id: \"196\";\n readonly name: \"Sophia\";\n readonly phone: \"888-777-5555\";\n readonly notes: \"Graphic Designer\";\n readonly email: \"sophia@testmail.co\";\n readonly sign: \"Gemini\";\n readonly address: \"321 Birch Street, Chicago, IL 60601\";\n}, {\n readonly id: \"197\";\n readonly name: \"William\";\n readonly phone: \"444-666-2222\";\n readonly notes: \"Lawyer\";\n readonly email: \"william@example.com\";\n readonly sign: \"Taurus\";\n readonly address: \"567 Pine Avenue, Denver, CO 80201\";\n}, {\n readonly id: \"198\";\n readonly name: \"Olivia\";\n readonly phone: \"666-999-1111\";\n readonly notes: \"Chef\";\n readonly email: \"olivia@testmail.co\";\n readonly sign: \"Capricorn\";\n readonly address: \"890 Cedar Road, Miami, FL 33101\";\n}, {\n readonly id: \"199\";\n readonly name: \"James\";\n readonly phone: \"111-444-7777\";\n readonly notes: \"Architect\";\n readonly email: \"james@example.com\";\n readonly sign: \"Sagittarius\";\n readonly address: \"123 Elm Street, Seattle, WA 98101\";\n}, {\n readonly id: \"200\";\n readonly name: \"Emma\";\n readonly phone: \"222-888-9999\";\n readonly notes: \"Nurse\";\n readonly email: \"emma@testmail.co\";\n readonly sign: \"Pisces\";\n readonly address: \"456 Oak Lane, San Francisco, CA 94101\";\n}, {\n readonly id: \"201\";\n readonly name: \"Ava\";\n readonly phone: \"555-777-2222\";\n readonly notes: \"Police Officer\";\n readonly email: \"ava@example.com\";\n readonly sign: \"Virgo\";\n readonly address: \"789 Birch Road, New York, NY 10001\";\n}, {\n readonly id: \"202\";\n readonly name: \"Benjamin\";\n readonly phone: \"111-555-6666\";\n readonly notes: \"Dentist\";\n readonly email: \"benjamin@example.com\";\n readonly sign: \"Cancer\";\n readonly address: \"890 Oak Street, Los Angeles, CA 90001\";\n}, {\n readonly id: \"203\";\n readonly name: \"Sophia\";\n readonly phone: \"777-555-8888\";\n readonly notes: \"Teacher\";\n readonly email: \"sophia@example.com\";\n readonly sign: \"Libra\";\n readonly address: \"123 Cedar Road, Chicago, IL 60601\";\n}, {\n readonly id: \"204\";\n readonly name: \"Mia\";\n readonly phone: \"333-666-1111\";\n readonly notes: \"Software Developer\";\n readonly email: \"mia@testmail.co\";\n readonly sign: \"Leo\";\n readonly address: \"456 Pine Avenue, Denver, CO 80201\";\n}, {\n readonly id: \"205\";\n readonly name: \"Benjamin\";\n readonly phone: \"999-777-5555\";\n readonly notes: \"Engineer\";\n readonly email: \"benjamin@example.com\";\n readonly sign: \"Scorpio\";\n readonly address: \"567 Elm Lane, Miami, FL 33101\";\n}, {\n readonly id: \"206\";\n readonly name: \"Isabella\";\n readonly phone: \"888-111-4444\";\n readonly notes: \"Artist\";\n readonly email: \"isabella@testmail.co\";\n readonly sign: \"Gemini\";\n readonly address: \"321 Cedar Avenue, Seattle, WA 98101\";\n}, {\n readonly id: \"207\";\n readonly name: \"Eva\";\n readonly phone: \"444-666-8888\";\n readonly notes: \"Accountant\";\n readonly email: \"eva@example.com\";\n readonly sign: \"Virgo\";\n readonly address: \"567 Birch Lane, Houston, TX 77001\";\n}, {\n readonly id: \"208\";\n readonly name: \"Oliver\";\n readonly phone: \"333-999-7777\";\n readonly notes: \"Writer\";\n readonly email: \"oliver@testmail.co\";\n readonly sign: \"Cancer\";\n readonly address: \"890 Cedar Road, Miami, FL 33101\";\n}, {\n readonly id: \"209\";\n readonly name: \"Sophia\";\n readonly phone: \"777-888-2222\";\n readonly notes: \"Dentist\";\n readonly email: \"sophia@example.com\";\n readonly sign: \"Libra\";\n readonly address: \"123 Elm Street, Seattle, WA 98101\";\n}, {\n readonly id: \"210\";\n readonly name: \"Liam\";\n readonly phone: \"555-123-4567\";\n readonly notes: \"Software Engineer\";\n readonly email: \"liam@example.com\";\n readonly sign: \"Aries\";\n readonly address: \"123 Oak Street, San Francisco, CA 94101\";\n}, {\n readonly id: \"211\";\n readonly name: \"Olivia\";\n readonly phone: \"999-555-1212\";\n readonly notes: \"Teacher\";\n readonly email: \"olivia@testmail.co\";\n readonly sign: \"Leo\";\n readonly address: \"456 Elm Road, New York, NY 10001\";\n}, {\n readonly id: \"212\";\n readonly name: \"Noah\";\n readonly phone: \"777-333-9999\";\n readonly notes: \"Doctor\";\n readonly email: \"noah@example.com\";\n readonly sign: \"Scorpio\";\n readonly address: \"789 Maple Avenue, Los Angeles, CA 90001\";\n}, {\n readonly id: \"213\";\n readonly name: \"Sophia\";\n readonly phone: \"888-777-5555\";\n readonly notes: \"Graphic Designer\";\n readonly email: \"sophia@testmail.co\";\n readonly sign: \"Gemini\";\n readonly address: \"321 Birch Street, Chicago, IL 60601\";\n}, {\n readonly id: \"214\";\n readonly name: \"William\";\n readonly phone: \"444-666-2222\";\n readonly notes: \"Lawyer\";\n readonly email: \"william@example.com\";\n readonly sign: \"Taurus\";\n readonly address: \"567 Pine Avenue, Denver, CO 80201\";\n}, {\n readonly id: \"215\";\n readonly name: \"Olivia\";\n readonly phone: \"666-999-1111\";\n readonly notes: \"Chef\";\n readonly email: \"olivia@testmail.co\";\n readonly sign: \"Capricorn\";\n readonly address: \"890 Cedar Road, Miami, FL 33101\";\n}, {\n readonly id: \"216\";\n readonly name: \"James\";\n readonly phone: \"111-444-7777\";\n readonly notes: \"Architect\";\n readonly email: \"james@example.com\";\n readonly sign: \"Sagittarius\";\n readonly address: \"123 Elm Street, Seattle, WA 98101\";\n}, {\n readonly id: \"217\";\n readonly name: \"Emma\";\n readonly phone: \"222-888-9999\";\n readonly notes: \"Nurse\";\n readonly email: \"emma@testmail.co\";\n readonly sign: \"Pisces\";\n readonly address: \"456 Oak Lane, San Francisco, CA 94101\";\n}, {\n readonly id: \"218\";\n readonly name: \"Ava\";\n readonly phone: \"555-777-2222\";\n readonly notes: \"Police Officer\";\n readonly email: \"ava@example.com\";\n readonly sign: \"Virgo\";\n readonly address: \"789 Birch Road, New York, NY 10001\";\n}, {\n readonly id: \"219\";\n readonly name: \"Benjamin\";\n readonly phone: \"111-555-6666\";\n readonly notes: \"Dentist\";\n readonly email: \"benjamin@example.com\";\n readonly sign: \"Cancer\";\n readonly address: \"890 Oak Street, Los Angeles, CA 90001\";\n}, {\n readonly id: \"220\";\n readonly name: \"Sophia\";\n readonly phone: \"777-555-8888\";\n readonly notes: \"Teacher\";\n readonly email: \"sophia@example.com\";\n readonly sign: \"Libra\";\n readonly address: \"123 Cedar Road, Chicago, IL 60601\";\n}, {\n readonly id: \"221\";\n readonly name: \"Mia\";\n readonly phone: \"333-666-1111\";\n readonly notes: \"Software Developer\";\n readonly email: \"mia@testmail.co\";\n readonly sign: \"Leo\";\n readonly address: \"456 Pine Avenue, Denver, CO 80201\";\n}, {\n readonly id: \"222\";\n readonly name: \"Benjamin\";\n readonly phone: \"999-777-5555\";\n readonly notes: \"Engineer\";\n readonly email: \"benjamin@example.com\";\n readonly sign: \"Scorpio\";\n readonly address: \"567 Elm Lane, Miami, FL 33101\";\n}, {\n readonly id: \"223\";\n readonly name: \"Isabella\";\n readonly phone: \"888-111-4444\";\n readonly notes: \"Artist\";\n readonly email: \"isabella@testmail.co\";\n readonly sign: \"Gemini\";\n readonly address: \"321 Cedar Avenue, Seattle, WA 98101\";\n}, {\n readonly id: \"224\";\n readonly name: \"Eva\";\n readonly phone: \"444-666-8888\";\n readonly notes: \"Accountant\";\n readonly email: \"eva@example.com\";\n readonly sign: \"Virgo\";\n readonly address: \"567 Birch Lane, Houston, TX 77001\";\n}, {\n readonly id: \"225\";\n readonly name: \"Oliver\";\n readonly phone: \"333-999-7777\";\n readonly notes: \"Writer\";\n readonly email: \"oliver@testmail.co\";\n readonly sign: \"Cancer\";\n readonly address: \"890 Cedar Road, Miami, FL 33101\";\n}, {\n readonly id: \"226\";\n readonly name: \"Sophia\";\n readonly phone: \"777-888-2222\";\n readonly notes: \"Dentist\";\n readonly email: \"sophia@example.com\";\n readonly sign: \"Libra\";\n readonly address: \"123 Elm Street, Seattle, WA 98101\";\n}, {\n readonly id: \"227\";\n readonly name: \"Liam\";\n readonly phone: \"555-123-4567\";\n readonly notes: \"Software Engineer\";\n readonly email: \"liam@example.com\";\n readonly sign: \"Aries\";\n readonly address: \"123 Oak Street, San Francisco, CA 94101\";\n}, {\n readonly id: \"228\";\n readonly name: \"Olivia\";\n readonly phone: \"999-555-1212\";\n readonly notes: \"Teacher\";\n readonly email: \"olivia@testmail.co\";\n readonly sign: \"Leo\";\n readonly address: \"456 Elm Road, New York, NY 10001\";\n}, {\n readonly id: \"229\";\n readonly name: \"Noah\";\n readonly phone: \"777-333-9999\";\n readonly notes: \"Doctor\";\n readonly email: \"noah@example.com\";\n readonly sign: \"Scorpio\";\n readonly address: \"789 Maple Avenue, Los Angeles, CA 90001\";\n}, {\n readonly id: \"230\";\n readonly name: \"Sophia\";\n readonly phone: \"888-777-5555\";\n readonly notes: \"Graphic Designer\";\n readonly email: \"sophia@testmail.co\";\n readonly sign: \"Gemini\";\n readonly address: \"321 Birch Street, Chicago, IL 60601\";\n}, {\n readonly id: \"231\";\n readonly name: \"William\";\n readonly phone: \"444-666-2222\";\n readonly notes: \"Lawyer\";\n readonly email: \"william@example.com\";\n readonly sign: \"Taurus\";\n readonly address: \"567 Pine Avenue, Denver, CO 80201\";\n}, {\n readonly id: \"232\";\n readonly name: \"Olivia\";\n readonly phone: \"666-999-1111\";\n readonly notes: \"Chef\";\n readonly email: \"olivia@testmail.co\";\n readonly sign: \"Capricorn\";\n readonly address: \"890 Cedar Road, Miami, FL 33101\";\n}, {\n readonly id: \"233\";\n readonly name: \"James\";\n readonly phone: \"111-444-7777\";\n readonly notes: \"Architect\";\n readonly email: \"james@example.com\";\n readonly sign: \"Sagittarius\";\n readonly address: \"123 Elm Street, Seattle, WA 98101\";\n}, {\n readonly id: \"234\";\n readonly name: \"Emma\";\n readonly phone: \"222-888-9999\";\n readonly notes: \"Nurse\";\n readonly email: \"emma@testmail.co\";\n readonly sign: \"Pisces\";\n readonly address: \"456 Oak Lane, San Francisco, CA 94101\";\n}, {\n readonly id: \"235\";\n readonly name: \"Ava\";\n readonly phone: \"555-777-2222\";\n readonly notes: \"Police Officer\";\n readonly email: \"ava@example.com\";\n readonly sign: \"Virgo\";\n readonly address: \"789 Birch Road, New York, NY 10001\";\n}, {\n readonly id: \"236\";\n readonly name: \"Benjamin\";\n readonly phone: \"111-555-6666\";\n readonly notes: \"Dentist\";\n readonly email: \"benjamin@example.com\";\n readonly sign: \"Cancer\";\n readonly address: \"890 Oak Street, Los Angeles, CA 90001\";\n}, {\n readonly id: \"237\";\n readonly name: \"Sophia\";\n readonly phone: \"777-555-8888\";\n readonly notes: \"Teacher\";\n readonly email: \"sophia@example.com\";\n readonly sign: \"Libra\";\n readonly address: \"123 Cedar Road, Chicago, IL 60601\";\n}, {\n readonly id: \"238\";\n readonly name: \"Mia\";\n readonly phone: \"333-666-1111\";\n readonly notes: \"Software Developer\";\n readonly email: \"mia@testmail.co\";\n readonly sign: \"Leo\";\n readonly address: \"456 Pine Avenue, Denver, CO 80201\";\n}, {\n readonly id: \"239\";\n readonly name: \"Benjamin\";\n readonly phone: \"999-777-5555\";\n readonly notes: \"Engineer\";\n readonly email: \"benjamin@example.com\";\n readonly sign: \"Scorpio\";\n readonly address: \"567 Elm Lane, Miami, FL 33101\";\n}, {\n readonly id: \"240\";\n readonly name: \"Isabella\";\n readonly phone: \"888-111-4444\";\n readonly notes: \"Artist\";\n readonly email: \"isabella@testmail.co\";\n readonly sign: \"Gemini\";\n readonly address: \"321 Cedar Avenue, Seattle, WA 98101\";\n}, {\n readonly id: \"241\";\n readonly name: \"Eva\";\n readonly phone: \"444-666-8888\";\n readonly notes: \"Accountant\";\n readonly email: \"eva@example.com\";\n readonly sign: \"Virgo\";\n readonly address: \"567 Birch Lane, Houston, TX 77001\";\n}, {\n readonly id: \"242\";\n readonly name: \"Oliver\";\n readonly phone: \"333-999-7777\";\n readonly notes: \"Writer\";\n readonly email: \"oliver@testmail.co\";\n readonly sign: \"Cancer\";\n readonly address: \"890 Cedar Road, Miami, FL 33101\";\n}, {\n readonly id: \"243\";\n readonly name: \"Sophia\";\n readonly phone: \"777-888-2222\";\n readonly notes: \"Dentist\";\n readonly email: \"sophia@example.com\";\n readonly sign: \"Libra\";\n readonly address: \"123 Elm Street, Seattle, WA 98101\";\n}];\n//# sourceMappingURL=dummyTableData.d.ts.map" }, "hooks.d.ts": { "path": "hooks.d.ts", "content": "import type { GenericObject } from '../../components/Table/Table';\nexport type SortDirection = 'asc' | 'desc' | 'original';\nexport declare function useSortableEntries(entries: Array, idName: keyof T, { defaultSortKey, defaultSortDirection, onSort, enableInternalSorting, }: {\n defaultSortKey?: keyof T;\n defaultSortDirection?: SortDirection;\n onSort?: (sortKey: string, sortDirection: SortDirection) => unknown;\n enableInternalSorting?: boolean;\n}): {\n handleSortClick: (sortKey: keyof T) => unknown;\n sortDirection: SortDirection;\n sortKey?: string;\n sortedEntries: T[];\n sortedKeys: keyof T[];\n};\n//# sourceMappingURL=hooks.d.ts.map" } } }, "allFiles": [ "BasicTable.stories.tsx", "BulkActions.stories.tsx", "Cell.tsx", "DefaultRow.tsx", "DefaultTableHeader.tsx", "InlineEdit.stories.tsx", "StaticTable.tsx", "Table.docs.ts", "Table.module.css", "Table.stories.module.css", "Table.tsx", "TableActionBar.tsx", "TableBar.module.css", "TableBottomBar.tsx", "TableTopBar.tsx", "dummyTableData.ts", "hooks.ts", "index.ts" ] }, "Tabs": { "name": "Tabs", "path": "src/components/Tabs", "files": { "main": null, "story": null, "css": null, "index": { "path": "index.d.ts", "content": "export * from '../../components/Tabs/Tab';\nexport * from '../../components/Tabs/TabList';\n//# sourceMappingURL=index.d.ts.map" }, "additional": { "Tab/Tab.d.ts": { "path": "Tab/Tab.d.ts", "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nimport type { IconType } from '../../../components/Icon';\nimport type { ElevationType } from '../../../components/Tooltip';\ntype ClassNames = Readonly<{\n wrapper?: string;\n iconTextWrap?: string;\n}>;\nexport declare const TAB_SIZE: Readonly<{\n small: \"small\";\n medium: \"medium\";\n}>;\nexport declare const tabSizeOptions: Array;\nexport type TabSize = keyof typeof TAB_SIZE;\n/**\n * Attributes forwarded straight to the underlying `\n \n
\n }\n >\n
\n Happy Birthday Campaign\n \n Easily send personalized birthday wishes for each customer's\n special day.\n \n
\n Engagement\n Campaign\n 9 Workflows Created\n
\n
\n \n \n);\n\nWithFooterStory.args = {\n headerColor: 'information',\n iconName: 'face-party',\n iconType: 'solid',\n testId: 'template-card-with-footer-story',\n};\n\nexport const InformationStateStory = (args: TemplateCardProps) => (\n
\n \n \n \n
\n }\n >\n
\n Customer Onboarding Flow\n \n Welcome new customers with a personalized onboarding experience. Guide\n them through key features and help them get started quickly.\n \n
\n Onboarding\n Automation\n
\n
\n \n \n);\n\nInformationStateStory.args = {\n headerColor: 'information',\n iconName: 'circle-info',\n iconType: 'solid',\n testId: 'template-card-information-story',\n};\n\nexport const SuccessStateStory = (args: TemplateCardProps) => (\n
\n \n \n \n
\n }\n >\n
\n Order Confirmation Workflow\n \n Automatically send order confirmations and shipping updates to keep\n customers informed throughout their purchase journey.\n \n
\n E-commerce\n Transactional\n
\n
\n \n \n);\n\nSuccessStateStory.args = {\n headerColor: 'success',\n iconName: 'circle-check',\n iconType: 'solid',\n testId: 'template-card-success-story',\n};\n\nexport const WarningStateStory = (args: TemplateCardProps) => (\n
\n \n \n \n
\n }\n >\n
\n Cart Abandonment Recovery\n \n Recover lost sales by reminding customers about items left in their\n cart. Send timely reminders with personalized incentives.\n \n
\n Revenue Recovery\n Reminder\n
\n
\n \n \n);\n\nWarningStateStory.args = {\n headerColor: 'warning',\n iconName: 'triangle-exclamation',\n iconType: 'solid',\n testId: 'template-card-warning-story',\n};\n\nexport const ErrorStateStory = (args: TemplateCardProps) => (\n
\n \n \n \n
\n }\n >\n
\n Payment Failed Notification\n \n Alert customers when payment processing fails and guide them to update\n their payment information to complete their order.\n \n
\n Critical\n Payment\n
\n
\n \n \n);\n\nErrorStateStory.args = {\n headerColor: 'error',\n iconName: 'circle-xmark',\n iconType: 'solid',\n testId: 'template-card-error-story',\n};\n\nexport const PendingStateStory = (args: TemplateCardProps) => (\n
\n \n \n \n
\n }\n >\n
\n Draft Campaign Template\n \n This template is currently in draft status. Complete the setup and\n review before publishing to make it available for use.\n \n
\n Draft\n In Progress\n
\n
\n \n \n);\n\nPendingStateStory.args = {\n headerColor: 'pending',\n iconName: 'clock',\n iconType: 'solid',\n testId: 'template-card-pending-story',\n};\n\nexport const NeutralStateStory = (args: TemplateCardProps) => (\n
\n \n \n \n
\n }\n >\n
\n Weekly Newsletter Template\n \n Keep your subscribers engaged with a regular newsletter featuring your\n latest content, products, and updates.\n \n
\n Newsletter\n Content\n
\n
\n \n \n);\n\nNeutralStateStory.args = {\n headerColor: 'neutral',\n iconName: 'envelope',\n iconType: 'solid',\n testId: 'template-card-neutral-story',\n};\n\nexport const MinimalContentStory = (args: TemplateCardProps) => (\n
\n \n
\n Quick Start Template\n
\n \n
\n);\n\nMinimalContentStory.args = {\n headerColor: 'information',\n iconName: 'rocket',\n iconType: 'solid',\n testId: 'template-card-minimal-story',\n};\n\nexport const NoFooterStory = (args: TemplateCardProps) => (\n
\n \n
\n Simple Template Card\n \n This template card has no footer, demonstrating how the footer is\n conditionally rendered only when the footer prop is provided.\n \n
\n \n
\n);\n\nNoFooterStory.args = {\n headerColor: 'success',\n iconName: 'check',\n iconType: 'solid',\n testId: 'template-card-no-footer-story',\n};\n\nexport const CustomContentStory = (args: TemplateCardProps) => (\n
\n \n Frame 485088808\n \n
\n }\n >\n
\n
\n label\n Text + Icon\n
\n
\n \n Easily send personalized birthday wishes! Set rem...\n \n
\n
\n label\n Text + Icon\n
\n
\n \n \n);\n\nCustomContentStory.args = {\n headerColor: 'warning',\n iconName: 'gift',\n iconType: 'solid',\n testId: 'template-card-custom-story',\n};\n\nDefaultStory.storyName = 'Default';\nWithFooterStory.storyName = 'With Footer';\nInformationStateStory.storyName = 'Information State';\nSuccessStateStory.storyName = 'Success State';\nWarningStateStory.storyName = 'Warning State';\nErrorStateStory.storyName = 'Error State';\nPendingStateStory.storyName = 'Pending State';\nNeutralStateStory.storyName = 'Neutral State';\nMinimalContentStory.storyName = 'Minimal Content';\nNoFooterStory.storyName = 'No Footer';\nCustomContentStory.storyName = 'Custom Content';\n" }, "css": { "path": "TemplateCard.module.css", "content": "@value (\n colorBorderPrimary,\n colorBackgroundTertiary,\n colorNeutralLightest,\n colorNeutral,\n colorInformationLightest,\n colorInformation,\n colorSuccessLightest,\n colorSuccess,\n colorDangerLightest,\n colorDanger,\n colorWarningLightest,\n colorWarning\n) from '../../styles/variables/_color.css';\n\n@value (\n size58,\n sizeFluid\n) from '../../styles/variables/_size.css';\n\n@value (\n spaceSmall,\n spaceMedium,\n spaceLarge\n) from '../../styles/variables/_space.css';\n\n@value (\n borderRadiusSmall,\n borderRadiusCircle,\n borderWidthPrimary,\n borderWidthSecondary\n) from '../../styles/variables/_border.css';\n\n.wrapper {\n display: flex;\n flex-direction: column;\n width: sizeFluid;\n background-color: colorBackgroundTertiary;\n border-radius: borderRadiusSmall;\n border: borderWidthPrimary solid colorBorderPrimary;\n overflow: hidden;\n}\n\n.header {\n position: relative;\n width: sizeFluid;\n height: 49px;\n display: flex;\n align-items: flex-start;\n}\n\n/* Header background colors for each state */\n.header.neutral {\n background-color: colorNeutralLightest;\n}\n\n.header.information {\n background-color: colorInformationLightest;\n}\n\n.header.success {\n background-color: colorSuccessLightest;\n}\n\n.header.warning {\n background-color: colorWarningLightest;\n}\n\n.header.error {\n background-color: colorDangerLightest;\n}\n\n.header.pending {\n background-color: colorWarningLightest;\n}\n\n.iconContainer {\n position: absolute;\n left: spaceSmall;\n top: spaceSmall;\n width: size58;\n height: size58;\n min-width: size58;\n min-height: size58;\n border-radius: borderRadiusCircle;\n border: borderWidthSecondary solid colorBackgroundTertiary;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* Icon container background colors for each state */\n.iconContainer.neutral {\n background-color: colorNeutralLightest;\n}\n\n.iconContainer.information {\n background-color: colorInformationLightest;\n}\n\n.iconContainer.success {\n background-color: colorSuccessLightest;\n}\n\n.iconContainer.warning {\n background-color: colorWarningLightest;\n}\n\n.iconContainer.error {\n background-color: colorDangerLightest;\n}\n\n.iconContainer.pending {\n background-color: colorWarningLightest;\n}\n\n/* Icon colors using descendant selectors */\n.iconContainer .neutral {\n color: colorNeutral;\n}\n\n.iconContainer .information {\n color: colorInformation;\n}\n\n.iconContainer .success {\n color: colorSuccess;\n}\n\n.iconContainer .warning {\n color: colorWarning;\n}\n\n.iconContainer .error {\n color: colorDanger;\n}\n\n.iconContainer .pending {\n color: colorWarning;\n}\n\n.content {\n display: flex;\n flex-direction: column;\n background-color: colorBackgroundTertiary;\n padding: spaceSmall spaceMedium;\n padding-top: spaceLarge;\n}\n\n.footer {\n display: flex;\n flex-direction: column;\n background-color: colorBackgroundTertiary;\n padding: spaceSmall spaceMedium;\n padding-top: 0;\n gap: spaceSmall;\n}\n\n.footerSeparator {\n width: sizeFluid;\n height: 0;\n composes: borderTopPrimary from '../../styles/border.module.css';\n}\n\n.footerContent {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: sizeFluid;\n}\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../components/TemplateCard/TemplateCard';\n//# sourceMappingURL=index.d.ts.map" }, "additional": {} }, "allFiles": [ "TemplateCard.module.css", "TemplateCard.stories.module.css", "TemplateCard.stories.tsx", "TemplateCard.tsx", "index.ts" ] }, "Text": { "name": "Text", "path": "src/components/Text", "files": { "main": { "path": "Text.d.ts", "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nimport type { ColorTypes } from '../../types/typography';\nexport interface TextProps {\n color?: ColorTypes;\n children?: React.ReactNode;\n className?: string;\n highlightedTextClassName?: string;\n highlightString?: string | string[];\n caseSensitiveHighlighting?: boolean;\n highlightWithBackground?: boolean;\n testId?: string;\n}\nexport interface HighlightTextProps {\n text: string;\n highlight: string | string[];\n highlightClassName?: string;\n caseSensitiveHighlighting?: boolean;\n highlightWithBackground?: boolean;\n testId?: string;\n}\nexport declare const JumboLarge: Flow.AbstractComponent;\nexport declare const JumboMedium: Flow.AbstractComponent;\nexport declare const JumboSmall: Flow.AbstractComponent;\nexport declare const TitleMedium: Flow.AbstractComponent;\nexport declare const SubTitleLarge: Flow.AbstractComponent;\nexport declare const SubTitleMedium: Flow.AbstractComponent;\nexport declare const SubTitleSmall: Flow.AbstractComponent;\nexport declare const SubTitleExtraSmall: Flow.AbstractComponent;\nexport declare const ButtonTextMedium: Flow.AbstractComponent;\nexport declare const ButtonTextSmall: Flow.AbstractComponent;\nexport declare const MenuTextMedium: Flow.AbstractComponent;\nexport declare const MenuTextSmall: Flow.AbstractComponent;\nexport declare const ButtonTextExtraSmall: Flow.AbstractComponent;\nexport declare const ButtonTextMediumUnderline: Flow.AbstractComponent;\nexport declare const ButtonTextSmallUnderline: Flow.AbstractComponent;\nexport declare const ButtonTextExtraSmallUnderline: Flow.AbstractComponent;\nexport declare const FormInputMedium: Flow.AbstractComponent;\nexport declare const FormInputSmall: Flow.AbstractComponent;\nexport declare const BodyLarge: Flow.AbstractComponent;\nexport declare const BodyMedium: Flow.AbstractComponent;\nexport declare const BodySmall: Flow.AbstractComponent;\nexport declare const BodyLargeBold: Flow.AbstractComponent;\nexport declare const BodyMediumBold: Flow.AbstractComponent;\nexport declare const BodySmallBold: Flow.AbstractComponent;\nexport declare const FormLabelMedium: Flow.AbstractComponent;\nexport declare const FormLabelSmall: Flow.AbstractComponent;\n//# sourceMappingURL=Text.d.ts.map" }, "story": { "path": "Text.stories.tsx", "content": "import * as React from 'react';\n\nimport type {Flow} from 'flow-to-typescript-codemod';\n\nimport {TEXT_COLORS} from 'src/types/typography';\n\nimport {\n BodyLarge,\n BodyLargeBold,\n BodyMedium,\n BodyMediumBold,\n BodySmall,\n BodySmallBold,\n ButtonTextExtraSmall,\n ButtonTextExtraSmallUnderline,\n ButtonTextMedium,\n ButtonTextMediumUnderline,\n ButtonTextSmall,\n ButtonTextSmallUnderline,\n FormInputMedium,\n FormInputSmall,\n FormLabelMedium,\n FormLabelSmall,\n JumboLarge,\n JumboMedium,\n JumboSmall,\n SubTitleExtraSmall,\n SubTitleLarge,\n SubTitleMedium,\n SubTitleSmall,\n TitleMedium,\n} from 'src/components/Text';\nimport type {TextProps} from 'src/components/Text/Text';\n\n\nconst DEFAULT_TEXT = 'The quick brown fox jumps over the lazy dog';\nconst colorOptions: Array = [...Object.values(TEXT_COLORS)];\n\nexport default {\n tags: ['autodocs'],\n title: 'Tokens/Typography',\n argTypes: {\n color: {\n options: colorOptions,\n description:\n 'Color of text. Should be one of the predefined color string',\n control: {\n type: 'select',\n },\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: 'primary'},\n },\n },\n className: {\n description: 'External className to be applied on text wrapper',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n children: {\n description: 'Content to be displayed',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'React.Component | string'},\n },\n },\n highlightString: {\n description:\n '`String` that needs to be highlighted. This can either be a **string** or a **string[]**',\n control: {\n type: 'object',\n },\n table: {\n type: {summary: 'string | string[]'},\n },\n },\n highlightedTextClassName: {\n description: '`Highlighted string` className',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n highlightWithBackground: {\n description: 'Highlight string with a background color',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'false'},\n },\n },\n caseSensitiveHighlighting: {\n description: 'Match case while highlighting a `String`',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'false'},\n },\n },\n testId: {\n description: 'Test ID for the component',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n },\n parameters: {\n docs: {\n subtitle: 'Generates a Text component',\n description: {\n component: `\n\\`\\`\\`js\nimport { BodyLarge, BodyMedium, TEXT_COLORS } from \"@spaced-out/ui-design-system/lib/components/Text\";\n\\`\\`\\`\nText Components are simple wrappers on top of h1/h2/h2/p/span tags, classes are also exposed for additional styling.\n\n**Note**: Color can be passed to the text components as a prop(enum). Color accepts predefined set of values. External class overrides\nthe color params.\n `,\n },\n },\n storySource: {\n componentPath: '/src/components/Text/Text',\n },\n },\n};\n\nexport const JumboLargeStory = (\n args: TextProps,\n): React.ReactElement<\n React.ComponentProps>\n> => {args.children};\n\nJumboLargeStory.args = {\n color: TEXT_COLORS.primary,\n children: DEFAULT_TEXT,\n testId: 'jumbo-large-story',\n};\n\nexport const JumboMediumStory = (\n args: TextProps,\n): React.ReactElement<\n React.ComponentProps>\n> => {args.children};\n\nJumboMediumStory.args = {\n color: TEXT_COLORS.primary,\n children: DEFAULT_TEXT,\n testId: 'jumbo-medium-story',\n};\n\nexport const JumboSmallStory = (\n args: TextProps,\n): React.ReactElement<\n React.ComponentProps>\n> => {args.children};\n\nJumboSmallStory.args = {\n color: TEXT_COLORS.success,\n children: DEFAULT_TEXT,\n testId: 'jumbo-small-story',\n};\n\nexport const TitleMediumStory = (\n args: TextProps,\n): React.ReactElement<\n React.ComponentProps>\n> => {args.children};\n\nTitleMediumStory.args = {\n color: TEXT_COLORS.secondary,\n children: DEFAULT_TEXT,\n testId: 'title-medium-story',\n};\n\nexport const SubTitleLargeStory = (\n args: TextProps,\n): React.ReactElement<\n React.ComponentProps>\n> => {args.children};\n\nSubTitleLargeStory.args = {\n color: TEXT_COLORS.tertiary,\n children: DEFAULT_TEXT,\n testId: 'subtitle-large-story',\n};\n\nexport const SubTitleMediumStory = (\n args: TextProps,\n): React.ReactElement<\n React.ComponentProps>\n> => {args.children};\n\nSubTitleMediumStory.args = {\n color: TEXT_COLORS.disabled,\n children: DEFAULT_TEXT,\n testId: 'subtitle-medium-story',\n};\n\nexport const SubTitleSmallStory = (\n args: TextProps,\n): React.ReactElement<\n React.ComponentProps>\n> => {args.children};\n\nSubTitleSmallStory.args = {\n color: TEXT_COLORS.information,\n children: DEFAULT_TEXT,\n testId: 'subtitle-small-story',\n};\n\nexport const SubTitleExtraSmallStory = (\n args: TextProps,\n): React.ReactElement<\n React.ComponentProps>\n> => {args.children};\n\nSubTitleExtraSmallStory.args = {\n color: TEXT_COLORS.warning,\n children: DEFAULT_TEXT,\n testId: 'subtitle-extra-small-story',\n};\n\nexport const ButtonTextMediumStory = (\n args: TextProps,\n): React.ReactElement<\n React.ComponentProps>\n> => {args.children};\n\nButtonTextMediumStory.args = {\n color: TEXT_COLORS.danger,\n children: DEFAULT_TEXT,\n testId: 'button-text-medium-story',\n};\n\nexport const ButtonTextSmallStory = (\n args: TextProps,\n): React.ReactElement<\n React.ComponentProps>\n> => {args.children};\n\nButtonTextSmallStory.args = {\n color: TEXT_COLORS.clickable,\n children: DEFAULT_TEXT,\n testId: 'button-text-small-story',\n};\n\nexport const ButtonTextExtraSmallStory = (\n args: TextProps,\n): React.ReactElement<\n React.ComponentProps>\n> => {args.children};\n\nButtonTextExtraSmallStory.args = {\n color: TEXT_COLORS.inversePrimary,\n children: DEFAULT_TEXT,\n testId: 'button-text-extra-small-story',\n};\n\nexport const ButtonTextMediumUnderlineStory = (\n args: TextProps,\n): React.ReactElement<\n React.ComponentProps>\n> => (\n \n {args.children}\n \n);\n\nButtonTextMediumUnderlineStory.args = {\n color: TEXT_COLORS.inverseSecondary,\n children: DEFAULT_TEXT,\n testId: 'button-text-medium-underline-story',\n};\n\nexport const ButtonTextSmallUnderlineStory = (\n args: TextProps,\n): React.ReactElement<\n React.ComponentProps>\n> => (\n {args.children}\n);\n\nButtonTextSmallUnderlineStory.args = {\n color: TEXT_COLORS.clickable,\n children: DEFAULT_TEXT,\n testId: 'button-text-small-underline-story',\n};\n\nexport const ButtonTextExtraSmallUnderlineStory = (\n args: TextProps,\n): React.ReactElement<\n React.ComponentProps>\n> => (\n \n {args.children}\n \n);\n\nButtonTextExtraSmallUnderlineStory.args = {\n color: TEXT_COLORS.clickable,\n children: DEFAULT_TEXT,\n testId: 'button-text-extra-small-underline-story',\n};\n\nexport const FormInputMediumStory = (\n args: TextProps,\n): React.ReactElement<\n React.ComponentProps>\n> => {args.children};\n\nFormInputMediumStory.args = {\n color: TEXT_COLORS.clickable,\n children: DEFAULT_TEXT,\n testId: 'form-input-medium-story',\n};\n\nexport const FormInputSmallStory = (\n args: TextProps,\n): React.ReactElement<\n React.ComponentProps>\n> => {args.children};\n\nFormInputSmallStory.args = {\n color: TEXT_COLORS.clickable,\n children: DEFAULT_TEXT,\n testId: 'form-input-small-story',\n};\n\nexport const BodyLargeStory = (\n args: TextProps,\n): React.ReactElement<\n React.ComponentProps>\n> => {args.children};\n\nBodyLargeStory.args = {\n color: TEXT_COLORS.clickable,\n children: DEFAULT_TEXT,\n testId: 'body-large-story',\n};\n\nexport const BodyMediumStory = (\n args: TextProps,\n): React.ReactElement<\n React.ComponentProps>\n> => {args.children};\n\nBodyMediumStory.args = {\n color: TEXT_COLORS.clickable,\n children: DEFAULT_TEXT,\n testId: 'body-medium-story',\n};\n\nexport const BodySmallStory = (\n args: TextProps,\n): React.ReactElement<\n React.ComponentProps>\n> => {args.children};\n\nBodySmallStory.args = {\n color: TEXT_COLORS.clickable,\n children: DEFAULT_TEXT,\n testId: 'body-small-story',\n};\n\nexport const BodyLargeBoldStory = (\n args: TextProps,\n): React.ReactElement<\n React.ComponentProps>\n> => {args.children};\n\nBodyLargeBoldStory.args = {\n color: TEXT_COLORS.primary,\n children: DEFAULT_TEXT,\n testId: 'body-large-bold-story',\n};\n\nexport const BodyMediumBoldStory = (\n args: TextProps,\n): React.ReactElement<\n React.ComponentProps>\n> => {args.children};\n\nBodyMediumBoldStory.args = {\n color: TEXT_COLORS.secondary,\n children: DEFAULT_TEXT,\n testId: 'body-medium-bold-story',\n};\n\nexport const BodySmallBoldStory = (\n args: TextProps,\n): React.ReactElement<\n React.ComponentProps>\n> => {args.children};\n\nBodySmallBoldStory.args = {\n color: TEXT_COLORS.tertiary,\n children: DEFAULT_TEXT,\n testId: 'body-small-bold-story',\n};\n\nexport const FormLabelMediumStory = (\n args: TextProps,\n): React.ReactElement<\n React.ComponentProps>\n> => {args.children};\n\nFormLabelMediumStory.args = {\n color: TEXT_COLORS.disabled,\n children: DEFAULT_TEXT,\n testId: 'form-label-medium-story',\n};\n\nexport const FormLabelSmallStory = (\n args: TextProps,\n): React.ReactElement<\n React.ComponentProps>\n> => {args.children};\n\nFormLabelSmallStory.args = {\n color: TEXT_COLORS.clickable,\n children: DEFAULT_TEXT,\n testId: 'form-label-small-story',\n};\nJumboLargeStory.storyName = 'Jumbo Large';\nJumboMediumStory.storyName = 'Jumbo Medium';\nJumboSmallStory.storyName = 'Jumbo Small';\nTitleMediumStory.storyName = 'Title Medium';\nSubTitleLargeStory.storyName = 'Sub Title Large';\nSubTitleMediumStory.storyName = 'Sub Title Medium';\nSubTitleSmallStory.storyName = 'Sub Title Small';\nSubTitleExtraSmallStory.storyName = 'Sub Title Extra Small';\nButtonTextMediumStory.storyName = 'Button Text Medium';\nButtonTextSmallStory.storyName = 'Button Text Small';\nButtonTextExtraSmallStory.storyName = 'Button Text Extra Small';\nButtonTextMediumUnderlineStory.storyName = 'Button Text Medium Underline';\nButtonTextSmallUnderlineStory.storyName = 'Button Text Small Underline';\nButtonTextExtraSmallUnderlineStory.storyName =\n 'Button Text Extra Small Underline';\nFormInputMediumStory.storyName = 'Form Input Medium';\nFormInputSmallStory.storyName = 'Form Input Small';\nBodyLargeStory.storyName = 'Body Large';\nBodyMediumStory.storyName = 'Body Medium';\nBodySmallStory.storyName = 'Body Small';\nBodyLargeBoldStory.storyName = 'Body Large Bold';\nBodyMediumBoldStory.storyName = 'Body Medium Bold';\nBodySmallBoldStory.storyName = 'Body Small Bold';\nFormLabelMediumStory.storyName = 'Form Label Medium';\nFormLabelSmallStory.storyName = 'Form Label Small';\n" }, "css": null, "index": { "path": "index.d.ts", "content": "export { TEXT_COLORS } from '../../types/typography';\nexport type { TextProps } from '../../components/Text/Text';\nexport { BodyLarge, BodyLargeBold, BodyMedium, BodyMediumBold, BodySmall, BodySmallBold, ButtonTextExtraSmall, ButtonTextExtraSmallUnderline, ButtonTextMedium, ButtonTextMediumUnderline, ButtonTextSmall, ButtonTextSmallUnderline, FormInputMedium, FormInputSmall, FormLabelMedium, FormLabelSmall, JumboLarge, JumboMedium, JumboSmall, MenuTextMedium, MenuTextSmall, SubTitleExtraSmall, SubTitleLarge, SubTitleMedium, SubTitleSmall, TitleMedium, } from '../../components/Text/Text';\n//# sourceMappingURL=index.d.ts.map" }, "additional": {} }, "allFiles": [ "HighlightedText.stories.tsx", "Text.stories.tsx", "Text.tsx", "index.ts" ] }, "TextTile": { "name": "TextTile", "path": "src/components/TextTile", "files": { "main": { "path": "TextTile.d.ts", "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\ntype ClassNames = Readonly<{\n icon?: string;\n title?: string;\n wrapper?: string;\n}>;\nexport interface TextTileProps {\n header?: React.ReactNode;\n iconName?: string;\n classNames?: ClassNames;\n description?: React.ReactNode;\n testId?: string;\n}\nexport declare const TextTile: Flow.AbstractComponent;\nexport {};\n//# sourceMappingURL=TextTile.d.ts.map" }, "story": { "path": "TextTile.stories.tsx", "content": "import * as React from 'react';\n\nimport type {TextTileProps} from 'src/components/TextTile';\nimport {TextTile} from 'src/components/TextTile/TextTile';\n\nimport css from 'src/components/TextTile/TextTile.stories.module.css';\n\n\nexport default {\n tags: ['autodocs'],\n title: 'AI Prompt Components/Text Tile',\n component: TextTile,\n argTypes: {\n classNames: {\n description: 'External classNames to be applied',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary: '{wrapper?: string, title?: string, icon?: string}',\n },\n },\n },\n header: {\n description: 'The title of the tile',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string | React.ReactNode'},\n },\n },\n description: {\n description: 'The description of the tile',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string | React.ReactNode'},\n },\n },\n iconName: {\n description:\n 'Icon Name represents name of icon as supported by fontawesome',\n type: {required: true},\n table: {\n type: {summary: 'string'},\n defaultValue: {summary: 'sparkles'},\n },\n },\n testId: {\n description: 'Test ID for the component',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n },\n parameters: {\n docs: {\n subtitle: 'Generates a TextTile component.',\n description: {\n component: `\n\\`\\`\\`jsx\nimport { TextTile } from \"@spaced-out/ui-design-system/lib/components/TextTile\";\n\\`\\`\\`\n**TextTile**\n\nThis component serves as the entry point for the AI-powered Copilot chat interface. It features a title with a visually appealing icon and a description.\n\n**Usage:**\n\n\\`\\`\\`jsx\n\n\\`\\`\\`\n`,\n },\n },\n storySource: {\n componentPath: '/src/components/TextTile/TextTile',\n },\n },\n};\n\nexport const TextTileStory = (args: TextTileProps) => (\n
\n \n
\n);\n\nTextTileStory.args = {\n header: 'Copilot',\n description: 'Ask anything to accomplish tasks in Sense.',\n testId: 'text-tile-story',\n};\nTextTileStory.storyName = 'Text Tile';\n" }, "css": { "path": "TextTile.module.css", "content": "@value (\n spaceSmall,\n spaceXSmall\n) from '../../styles/variables/_space.css';\n@value (\n colorFillPrimary,\n colorInformation\n) from '../../styles/variables/_color.css';\n@value (size44) from '../../styles/variables/_size.css';\n\n.textTileWrapper {\n display: flex;\n gap: spaceSmall;\n flex-direction: column;\n align-items: center;\n}\n\n.textTileTitle {\n display: flex;\n gap: spaceXSmall;\n justify-content: center;\n margin-left: calc(-1 * size44);\n}\n\n.sparkles {\n background: linear-gradient(to right, colorFillPrimary, colorInformation);\n background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../components/TextTile/TextTile';\n//# sourceMappingURL=index.d.ts.map" }, "additional": {} }, "allFiles": [ "TextTile.module.css", "TextTile.stories.module.css", "TextTile.stories.tsx", "TextTile.tsx", "index.ts" ] }, "Textarea": { "name": "Textarea", "path": "src/components/Textarea", "files": { "main": { "path": "Textarea.d.ts", "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\ntype ClassNames = Readonly<{\n box?: string;\n textarea?: string;\n}>;\nexport interface TextareaProps extends Omit, 'value' | 'onChange' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'name' | 'disabled' | 'placeholder' | 'locked' | 'error' | 'errorText' | 'label' | 'helperText' | 'classNames' | 'size' | 'required' | 'textCountLimit'> {\n value?: string;\n onChange?: (evt: React.ChangeEvent, isEnter?: boolean) => unknown;\n onFocus?: (e: React.FocusEvent) => unknown;\n onBlur?: (e: React.FocusEvent) => unknown;\n onKeyDown?: (e: React.KeyboardEvent) => unknown;\n name?: string;\n disabled?: boolean;\n placeholder?: string;\n locked?: boolean;\n error?: boolean;\n errorText?: string;\n label?: string | React.ReactNode;\n helperText?: string | React.ReactNode;\n classNames?: ClassNames;\n size?: 'medium' | 'small';\n required?: boolean;\n textCountLimit?: number;\n testId?: string;\n}\nexport declare const Textarea: Flow.AbstractComponent;\nexport {};\n//# sourceMappingURL=Textarea.d.ts.map" }, "story": { "path": "Textarea.stories.tsx", "content": "import * as React from 'react';\n\nimport type {TextareaProps} from 'src/components/Textarea/Textarea';\nimport {Textarea} from 'src/components/Textarea/Textarea';\n\nimport css from 'src/components/Textarea/Textarea.stories.module.css';\n\n\nexport default {\n tags: ['autodocs'],\n title: 'Form Components/Textarea',\n component: Textarea,\n argTypes: {\n size: {\n description:\n 'Textarea supports only two size variants namely small and medium. `small` < `medium`',\n options: ['medium', 'small'],\n control: {\n type: 'select',\n },\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: 'medium'},\n },\n },\n value: {\n description: 'Value of the textarea',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n name: {\n description: 'Name of the textarea',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n disabled: {\n description: 'if **true**, the component is disabled',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n required: {\n description: 'if **true**, a red star would be added to the label',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n placeholder: {\n description:\n 'Placeholder of textarea. This appears inside the textarea box',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n locked: {\n description:\n 'if **true**, the component is locked, Locked state is the readonly state of the input',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n error: {\n description:\n 'if **true**, the component is moved to error state, Error state displays a red border surrounding textarea',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n errorText: {\n description:\n 'Error text to be displayed on the bottom of the textarea. This uses `colorTextDanger`',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n label: {\n description:\n 'Primary label of the textarea. This appears on top of textarea',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n helperText: {\n description:\n 'Secondary label of the textarea. This appears on bottom of textarea, if the textarea is in `error` state the priority is given to `errorText`, in such cases secondary label wont be displayed',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n classNames: {\n description: 'External classnames to be applied',\n control: {\n type: 'object',\n },\n table: {\n type: {summary: '{box?: string, textarea?: string}'},\n },\n },\n textCountLimit: {\n description:\n 'A limit counter is appended to the top right of textarea. Text area would automatically move to error state if the text count exceeds limit. The counter keeps updating on keydown',\n control: {\n type: 'number',\n },\n table: {\n type: {summary: 'number'},\n },\n },\n onChange: {\n description:\n '**onChange** handler is triggered when there is a change in input value',\n action: 'changed',\n table: {\n type: {\n summary:\n 'onChange?: ( evt: SyntheticInputEvent) => mixed',\n },\n },\n },\n onFocus: {\n description: '**onFocus** handler is triggered when input is focussed',\n action: 'focussed',\n table: {\n type: {summary: '(e: SyntheticInputEvent) => mixed'},\n },\n },\n onBlur: {\n description: '**onBlur** handler is triggered when input is blurred',\n action: 'blurred',\n table: {\n type: {summary: '(e: SyntheticInputEvent) => mixed'},\n },\n },\n onKeyDown: {\n description: '**onKeyDown** handler is triggered on keypress',\n action: 'onKeyDowned',\n table: {\n type: {summary: '(e: SyntheticInputEvent) => mixed'},\n },\n },\n testId: {\n description: 'Test ID for the component',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n },\n parameters: {\n docs: {\n subtitle: 'Generates a Textarea component',\n description: {\n component: `\n\\`\\`\\`js\nimport { Textarea } from \"@spaced-out/ui-design-system/lib/components/Textarea\";\n\\`\\`\\`\nBasic textarea component which supports error, disabled and locked states.\nTextarea alo supports a bunch of callbacks listed below.\nTextarea supports helperText prop to pass in the secondary label.\n `,\n },\n },\n storySource: {\n componentPath: '/src/components/Textarea/Textarea',\n },\n },\n};\n\nexport const DefaultStory = (args: TextareaProps) => {\n const [value, setValue] = React.useState(args.value);\n\n React.useEffect(() => {\n setValue(args.value);\n }, [args.value]);\n\n return (\n
\n setValue(e.target.value)}\n value={value}\n />\n
\n );\n};\n\nDefaultStory.args = {\n label: 'Form Label',\n placeholder: 'Input Some text here',\n size: 'medium',\n testId: 'textarea-default-story',\n};\n\nexport const WithHelperTextStory = (args: TextareaProps) => {\n const [value, setValue] = React.useState(args.value);\n\n React.useEffect(() => {\n setValue(args.value);\n }, [args.value]);\n\n return (\n
\n setValue(e.target.value)}\n value={value}\n />\n
\n );\n};\n\nWithHelperTextStory.args = {\n label: 'Form Label',\n placeholder: 'Input Some text here',\n helperText: 'Gain some help from here',\n size: 'medium',\n testId: 'textarea-with-helper-text-story',\n};\n\nexport const RequiredStory = (args: TextareaProps) => {\n const [value, setValue] = React.useState(args.value);\n\n React.useEffect(() => {\n setValue(args.value);\n }, [args.value]);\n\n return (\n
\n setValue(e.target.value)}\n value={value}\n />\n
\n );\n};\n\nRequiredStory.args = {\n label: 'Form Label',\n placeholder: 'Input Some text here',\n required: true,\n size: 'medium',\n testId: 'textarea-required-story',\n};\n\nexport const TextCounterStory = (args: TextareaProps) => {\n const [value, setValue] = React.useState(args.value);\n\n React.useEffect(() => {\n setValue(args.value);\n }, [args.value]);\n\n return (\n
\n setValue(e.target.value)}\n value={value}\n />\n
\n );\n};\n\nTextCounterStory.args = {\n label: 'Form Label',\n placeholder: 'Input Some text here',\n helperText:\n 'Text area would automatically move to error state when the text count exceeds limit',\n size: 'medium',\n textCountLimit: 500,\n testId: 'textarea-text-counter-story',\n};\n\nexport const ErrorStory = (args: TextareaProps) => {\n const [value, setValue] = React.useState(args.value);\n\n React.useEffect(() => {\n setValue(args.value);\n }, [args.value]);\n\n return (\n
\n setValue(e.target.value)}\n value={value}\n />\n
\n );\n};\n\nErrorStory.args = {\n label: 'Form Label',\n placeholder: 'Input Some text here',\n required: true,\n size: 'medium',\n error: true,\n errorText: 'This is an error text.',\n testId: 'textarea-error-story',\n};\nDefaultStory.storyName = 'Default';\nWithHelperTextStory.storyName = 'With Helper Text';\nRequiredStory.storyName = 'Required';\nTextCounterStory.storyName = 'Text Counter';\nErrorStory.storyName = 'Error';\n" }, "css": { "path": "Textarea.module.css", "content": "@value (\n size160,\n size140,\n sizeFluid\n) from '../../styles/variables/_size.css';\n\n@value (\n spaceNone,\n spaceSmall,\n spaceXSmall,\n spaceXXSmall\n) from '../../styles/variables/_space.css';\n\n@value (\n borderRadiusMedium,\n borderRadiusSmall,\n borderWidthPrimary,\n borderWidthTertiary,\n borderWidthNone\n) from '../../styles/variables/_border.css';\n\n@value (\n colorTextPrimary,\n colorTextTertiary,\n colorBorderPrimary,\n colorFillPrimary,\n colorFocusPrimary,\n colorFocusDanger,\n colorTextDisabled,\n colorFillDisabled,\n colorTextDanger,\n colorBackgroundTertiary,\n colorBorderTertiary\n) from '../../styles/variables/_color.css';\n\n.container {\n color: colorTextPrimary;\n width: sizeFluid;\n}\n\n.box {\n display: flex;\n align-items: center;\n color: colorTextPrimary;\n gap: spaceSmall;\n height: size160;\n border: borderWidthPrimary solid colorBorderPrimary;\n background-color: colorBackgroundTertiary;\n}\n\n.wrapper:not(.withError) .box:not(.inputDisabled):not(.locked):hover {\n border-color: colorBorderTertiary;\n}\n\n.wrapper:not(.withError):focus-within\n .box:not(.inputDisabled):not(.locked):hover {\n border-color: colorFillPrimary;\n}\n\n.box textarea {\n padding: spaceXSmall spaceSmall;\n}\n\n.locked {\n border-style: dashed;\n}\n\n.medium {\n composes: formInputMedium from '../../styles/typography.module.css';\n height: size160;\n border-radius: borderRadiusMedium;\n}\n\n.small {\n composes: formInputSmall from '../../styles/typography.module.css';\n height: size140;\n border-radius: borderRadiusSmall;\n}\n\n.wrapper.withError .box {\n border-color: colorTextDanger;\n}\n\n.wrapper.withError:focus-within .box {\n box-shadow: borderWidthNone borderWidthNone borderWidthNone\n borderWidthTertiary colorFocusDanger;\n}\n\n.box textarea {\n width: sizeFluid;\n height: sizeFluid;\n resize: none;\n}\n\n.wrapper:not(.withError):focus-within .box:not(.inputDisabled) {\n border-color: colorFillPrimary;\n box-shadow: borderWidthNone borderWidthNone borderWidthNone\n borderWidthTertiary colorFocusPrimary;\n}\n\n.inputDisabled {\n color: colorTextDisabled;\n border-color: colorBorderPrimary;\n background-color: colorFillDisabled;\n}\n\n:where(.box) textarea::placeholder {\n color: colorTextTertiary;\n}\n\n.inputDisabled textarea::placeholder {\n color: inherit;\n}\n\n.wrapper {\n display: flex;\n flex-direction: column;\n width: sizeFluid;\n gap: spaceXXSmall;\n}\n\n.info {\n display: flex;\n justify-content: space-between;\n}\n\n.infoContent {\n display: flex;\n}\n" }, "index": { "path": "index.d.ts", "content": "export type { TextareaProps } from '../../components/Textarea/Textarea';\nexport { Textarea } from '../../components/Textarea/Textarea';\n//# sourceMappingURL=index.d.ts.map" }, "additional": {} }, "allFiles": [ "Textarea.module.css", "Textarea.stories.module.css", "Textarea.stories.tsx", "Textarea.tsx", "index.ts" ] }, "Timeline": { "name": "Timeline", "path": "src/components/Timeline", "files": { "main": { "path": "Timeline.d.ts", "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nexport declare const ORIENTATION: Readonly<{\n left: \"left\";\n right: \"right\";\n}>;\ntype ClassNames = Readonly<{\n wrapper?: string;\n}>;\nexport type Orientation = (typeof ORIENTATION)[keyof typeof ORIENTATION];\nexport interface TimelineProps {\n children: React.ReactNode;\n classNames?: ClassNames;\n orientation?: Orientation;\n testId?: string;\n}\nexport declare const Timeline: Flow.AbstractComponent;\nexport {};\n//# sourceMappingURL=Timeline.d.ts.map" }, "story": { "path": "Timeline.stories.tsx", "content": "import * as React from 'react';\n\nimport {CardContent} from 'src/components/Card';\nimport {SimpleInlineDropdown} from 'src/components/InlineDropdown';\nimport {BodyMedium, BodyMediumBold} from 'src/components/Text';\nimport type {TimelineProps} from 'src/components/Timeline';\nimport {ORIENTATION, Timeline} from 'src/components/Timeline/Timeline';\nimport {TimelineItem} from 'src/components/Timeline/TimelineItem';\n\nimport css from 'src/components/Timeline/Timeline.stories.module.css';\n\n\nconst orientationOptions: Array = [...Object.values(ORIENTATION)];\n\nexport default {\n tags: ['autodocs'],\n title: 'Components/Timeline/Timeline',\n component: Timeline,\n argTypes: {\n classNames: {\n description: 'Provide an optional className to be applied to the wrapper',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary: '{wrapper?: string}',\n },\n },\n },\n orientation: {\n control: {type: 'select'},\n options: orientationOptions,\n description: 'The main content\\'s placement with respect to the timeline.',\n table: {\n type: {summary: 'string'},\n defaultValue: {summary: ORIENTATION.left},\n disable: true, // to hide argType's row from the table\n },\n },\n children: {\n description:\n 'A list of `TimelineItem` components to be displayed as timeline.',\n type: {required: true},\n table: {\n type: {\n summary: 'React.Node',\n },\n },\n },\n testId: {\n description: 'Test ID for the component',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n },\n parameters: {\n docs: {\n subtitle: 'Generates a Timeline component.',\n description: {\n component: `\n\\`\\`\\`js\nimport type {TimelineProps} from '@spaced-out/ui-design-system/lib/components/Timeline';\nimport {Timeline, TimelineItem} from '@spaced-out/ui-design-system/lib/components/Timeline';\n\\`\\`\\`\n\nThe timeline component displays events in chronological order, showing dates and descriptions to track progress over time.\n\n### Usage\n\nThe Timeline component takes in the following props:\n\n\\`\\`\\`jsx\n\n {/* TimelineItem components go here */}\n\n\\`\\`\\`\n\nThe Timeline component should be used with one or more TimelineItem components as children. Each TimelineItem component represents an individual event in the Timeline. The TimelineItem component is responsible for rendering the TimelineItem title and content. Make sure to import the TimelineItem component as well.\n\n### TimelineItem Component\n\nThe TimelineItem component represents a single Event within the Timeline. It should be used as a child component of the Timeline. Each TimelineItem component can have its own unique icon, title and content.\n\n\\`\\`\\`jsx\nimport { TimelineItem } from \"@spaced-out/ui-design-system/lib/components/Timeline\";\n\n\n \n {/* TimelineItem content go here */}\n \n {/* Add more TimelineItem components for additional events */}\n\n\\`\\`\\`\n\nPlease note that the TimelineItem component should be imported separately in order to use it within the Timeline component.\n\nRemember to customize the props, title, and content according to your specific use case.`,\n },\n },\n storySource: {\n componentPath: '/src/components/Timeline/Timeline',\n },\n },\n};\n\nexport const TimelineStory = (args: TimelineProps) => (\n \n \n \n Aristotle\n \n Happiness depends upon ourselves.\n \n \n \n \n \n Nelson Mandela\n \n It always seems impossible until it's done.\n \n \n \n \n \n Mahatma Gandhi\n \n Live as if you were to die tomorrow.\n \n \n \n \n \n Martin Luther King Jr. \n \n The time is always right to do what is right.\n \n \n \n \n);\n\nconst DATE_OPTIONS = [\n {\n key: 'today',\n label: 'Today',\n },\n {\n key: 'yesterday',\n label: 'Yesterday',\n },\n {\n key: 'last-week',\n label: 'Last week',\n },\n {\n key: 'last-month',\n label: 'Last month',\n },\n {\n key: 'beginning',\n label: 'The very beginning',\n },\n];\n\nconst DropdownComponent = ({id}: {id: string}) => (\n label !== id)}\n onOptionSelect={(option) => {\n const elementId = option.key;\n const element = document.getElementById(elementId);\n if (element) {\n element.scrollIntoView({\n behavior: 'smooth',\n block: 'start',\n });\n }\n }}\n />\n);\n\nconst DummyContent = ({count}: {count: number}) => (\n \n Timeline Item {count}\n \n Cupcake ipsum dolor. Sit amet candy canes powder cotton candy. Gummy bears\n cotton candy halvah candy canes. Sweet roll lollipop tootsie roll\n cheesecake marshmallow macaroon chocolate bar biscuit candy.\n \n \n);\n\nexport const DynamicTimelineStory = (args: TimelineProps) => (\n \n }\n testId=\"dynamic-timeline-item-today\"\n >\n \n \n \n \n \n \n \n \n }\n testId=\"dynamic-timeline-item-yesterday\"\n >\n \n \n \n \n \n }\n testId=\"dynamic-timeline-item-last-week\"\n >\n \n \n }\n testId=\"dynamic-timeline-item-last-month\"\n >\n \n \n }\n testId=\"dynamic-timeline-item-beginning\"\n >\n \n \n \n);\nTimelineStory.storyName = 'Timeline';\nDynamicTimelineStory.storyName = 'Dynamic Timeline';\n" }, "css": { "path": "Timeline.module.css", "content": "@value (\n size26\n) from '../../styles/variables/_size.css';\n@value (\n spaceXXSmall,\n spaceMedium,\n spaceXSmall,\n spaceSmall,\n spaceFluid,\n spaceNone\n) from '../../styles/variables/_space.css';\n@value (\n colorBorderPrimary,\n colorInformationLightest\n) from '../../styles/variables/_color.css';\n@value (\n borderWidthPrimary,\n borderRadiusCircle\n) from '../../styles/variables/_border.css';\n\n.timelineWrapper {\n display: flex;\n box-sizing: border-box;\n flex-direction: column;\n justify-content: space-between;\n gap: spaceSmall;\n}\n\n.timelineItemWrapper {\n display: flex;\n gap: spaceSmall;\n box-sizing: border-box;\n flex-direction: column;\n justify-content: space-between;\n align-items: var(--align);\n\n /* According to the design specification, the last timeline item's content will not have any space at the bottom. */\n &:last-child .timelineItemContent .timelineItemEventDetails {\n margin-bottom: spaceNone;\n }\n}\n\n.timelineItemIconWrapper {\n display: flex;\n gap: spaceXXSmall;\n flex-direction: column;\n}\n\n.timelineItemIcon {\n width: size26;\n height: size26;\n border-radius: borderRadiusCircle;\n background-color: colorInformationLightest;\n}\n\n.timelineItemContent {\n display: flex;\n gap: spaceSmall;\n width: spaceFluid;\n flex-direction: var(--direction);\n}\n\n.timelineItemBorder {\n display: flex;\n width: size26;\n flex: 1;\n box-sizing: border-box;\n justify-content: center;\n\n & .border {\n height: spaceFluid;\n border-left: borderWidthPrimary dashed colorBorderPrimary;\n }\n}\n\n.timelineItemEventDetails {\n display: flex;\n gap: spaceXSmall;\n width: spaceFluid;\n flex-direction: column;\n margin-bottom: spaceMedium;\n\n & .timelineItemInfo {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: var(--align);\n min-height: size26;\n }\n}\n\n.timelineItemTitle {\n composes: bodyMedium from '../../styles/typography.module.css';\n}\n\n.timelineItemDescription {\n composes: bodySmall from '../../styles/typography.module.css';\n composes: secondary from '../../styles/typography.module.css';\n}\n\n.timelineItemCardWrapper {\n width: spaceFluid;\n}\n\n.timelineItemLoader {\n display: flex;\n width: spaceFluid;\n justify-content: center;\n}\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../components/Timeline/Timeline';\nexport * from '../../components/Timeline/TimelineItem';\n//# sourceMappingURL=index.d.ts.map" }, "additional": { "TimelineItem/TimelineItem.d.ts": { "path": "TimelineItem/TimelineItem.d.ts", "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nimport type { ColorTypes } from '../../../types/typography';\nimport type { IconType } from '../../../components/Icon';\nimport type { Orientation } from '../../../components/Timeline/Timeline';\ntype ClassNames = Readonly<{\n card?: string;\n icon?: string;\n title?: string;\n wrapper?: string;\n description?: string;\n}>;\nexport interface TimelineItemProps {\n id?: string;\n last?: boolean;\n title?: React.ReactNode;\n iconName: string;\n children: React.ReactNode;\n iconType?: IconType;\n iconColor?: ColorTypes;\n classNames?: ClassNames;\n description?: React.ReactNode;\n orientation?: Orientation;\n parentComponent?: React.ReactNode;\n enableCardWrapper?: boolean;\n testId?: string;\n}\nexport declare const TimelineItem: Flow.AbstractComponent;\nexport {};\n//# sourceMappingURL=TimelineItem.d.ts.map" }, "TimelineItem/index.d.ts": { "path": "TimelineItem/index.d.ts", "content": "export * from '../../../components/Timeline/TimelineItem/TimelineItem';\n//# sourceMappingURL=index.d.ts.map" } } }, "allFiles": [ "Timeline.module.css", "Timeline.stories.module.css", "Timeline.stories.tsx", "Timeline.tsx", "TimelineItem/TimelineItem.stories.tsx", "TimelineItem/TimelineItem.tsx", "TimelineItem/index.ts", "index.ts" ] }, "Toast": { "name": "Toast", "path": "src/components/Toast", "files": { "main": { "path": "Toast.d.ts", "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\ntype ClassNames = Readonly<{\n wrapper?: string;\n time?: string;\n}>;\nexport declare const TOAST_SEMANTIC: Readonly<{\n success: \"success\";\n information: \"information\";\n warning: \"warning\";\n danger: \"danger\";\n primary: \"primary\";\n}>;\nexport type ToastSemanticType = (typeof TOAST_SEMANTIC)[keyof typeof TOAST_SEMANTIC];\nexport interface ToastProps {\n classNames?: ClassNames;\n children?: React.ReactNode;\n time?: string;\n semantic?: ToastSemanticType;\n onClose?: () => void;\n initialFocus?: number;\n customIcon?: React.ReactNode;\n hideCloseIcon?: boolean;\n testId?: string;\n}\nexport interface ToastTitleProps {\n children?: React.ReactNode;\n className?: string;\n testId?: string;\n}\nexport declare const ToastTitle: Flow.AbstractComponent;\nexport interface ToastBodyProps {\n children?: React.ReactNode;\n className?: string;\n testId?: string;\n}\nexport declare const ToastBody: Flow.AbstractComponent;\nexport interface ToastFooterProps {\n children?: React.ReactNode;\n onClose?: () => void;\n testId?: string;\n}\nexport declare const ToastFooter: {\n ({ children, onClose, testId }: ToastFooterProps): React.JSX.Element | null;\n displayName: string;\n};\nexport declare const Toast: ({ classNames, children, time, semantic, onClose, initialFocus, customIcon, hideCloseIcon, testId, }: ToastProps) => React.JSX.Element;\nexport {};\n//# sourceMappingURL=Toast.d.ts.map" }, "story": { "path": "Toast.stories.tsx", "content": "import * as React from 'react';\n\nimport {Button} from 'src/components/Button/Button';\nimport {Icon} from 'src/components/Icon';\nimport {TEXT_COLORS} from 'src/components/Text';\nimport type {ToastProps} from 'src/components/Toast';\nimport {\n Toast,\n TOAST_SEMANTIC,\n toastApi,\n ToastBody,\n ToastContainer,\n ToastFooter,\n ToastTitle,\n} from 'src/components/Toast';\n\nimport css from 'src/components/Toast/Toast.stories.module.css';\n\n\nconst semanticOptions: Array = [...Object.values(TOAST_SEMANTIC)];\n\nexport default {\n tags: ['autodocs'],\n title: 'Components/Toast',\n argTypes: {\n semantic: {\n options: semanticOptions,\n description: 'Semantic type of Toast card',\n control: {\n type: 'select',\n },\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: TOAST_SEMANTIC.success},\n },\n },\n hideCloseIcon: {\n description: 'Hide the close icon',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: false},\n },\n },\n time: {\n description: 'Pass the time string after converting it right format',\n table: {\n type: {summary: 'string'},\n defaultValue: {summary: null},\n },\n },\n initialFocus: {\n description:\n 'Which element to initially focus. Can be a number (tabbable index as specified by the order)',\n control: {\n type: 'number',\n },\n table: {\n type: {summary: 'number'},\n defaultValue: {summary: '-1'},\n },\n },\n customIcon: {\n description: 'Pass the custom Icon component',\n table: {\n type: {summary: 'React.Node'},\n defaultValue: {summary: null},\n },\n },\n classNames: {\n description:\n 'Provide an optional className to be applied to the wrapper, time',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary: '{wrapper?: string, time?: string}',\n },\n },\n },\n testId: {\n description: 'Test ID for the component',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n },\n parameters: {\n docs: {\n subtitle: 'Generates a Toast component',\n description: {\n component: `\n\\`\\`\\`js\nimport {\n Toast,\n TOAST_SEMANTIC,\n ToastBody,\n ToastFooter,\n ToastTitle,\n toastApi\n} from \"@spaced-out/ui-design-system/lib/components/Toast\";\n\\`\\`\\`\n There are two parts of toast component\\n\n1. One is, how you create a toast card of different semantics, you can create toast card like below(Click on show code to check sample code)\n\n\\`\\`\\`jsx\nconst toastJsx =\n\n \n \n \n\n\\`\\`\\`\n\n2. Second is, how you show and manage the toast in your app.\n\n\\`\\`\\`jsx\nimport {ToastContainer} and add \n\\`\\`\\`\nonce in your application tree.\nIf you can't figure out where to put it, rendering it in the application root would be the best bet\n\n\\`\\`\\`jsx\nimport {toastApi}\n// now use\nconst toastId = toastApi.show(toastJsx)\n\\`\\`\\`\n\nif you want to remove the toast then use toastApi.remove and pass the toastId returned while adding the toast.\n\\`toastApi.remove(toastId);\\`\n `,\n },\n },\n storySource: {\n componentPath: '/src/components/Toast/Toast',\n },\n },\n};\n\nexport const ToastStory = (args: ToastProps) => {\n const toast1 = (\n \n Toast Title Sample\n The quick brown fox jumps over the lazy dog\n \n {\n // eslint-disable-next-line no-console\n console.log('Secondary Action Clicked');\n }}\n testId=\"toast-dismiss-button\"\n />\n {\n // eslint-disable-next-line no-console\n console.log('Primary Action Clicked');\n }}\n testId=\"toast-primary-action-button\"\n />\n \n \n );\n\n const toast2 = (\n \n Danger Toast \n The quick brown fox jumps over the lazy dog\n \n );\n\n const toast3 = (\n \n Warning Toast\n The quick brown fox jumps over the lazy dog\n \n );\n\n const toast4 = (\n \n }\n >\n Warning Toast \n The quick brown fox jumps over the lazy dog\n \n {\n // eslint-disable-next-line no-console\n console.log('Secondary Action Clicked');\n }}\n testId=\"toast-custom-icon-dismiss-button\"\n />\n {\n // eslint-disable-next-line no-console\n console.log('Primary Action Clicked');\n }}\n testId=\"toast-custom-icon-primary-action-button\"\n />\n \n \n );\n\n React.useEffect(() => {\n try {\n const toastId = toastApi.show(toast1, {autoClose: false});\n const timeoutID = setTimeout(() => {\n toastApi.remove(toastId);\n }, 10000);\n\n return () => {\n clearTimeout(timeoutID);\n };\n } catch (error: unknown) {\n console.error(error);\n }\n }, []);\n\n return (\n
\n {toast1}\n
\n \n toastApi.show(toast1, {\n autoClose: false,\n })\n }\n testId=\"toast-show-action-button\"\n >\n Toast With Action\n \n \n toastApi.show(toast3, {\n timeout: 10000,\n })\n }\n testId=\"toast-show-warning-button\"\n >\n Warning Toast\n \n \n toastApi.show(toast2, {\n timeout: 10000,\n })\n }\n testId=\"toast-show-danger-button\"\n >\n Danger Toast\n \n \n toastApi.show(toast4, {\n timeout: 10000,\n })\n }\n testId=\"toast-show-custom-icon-button\"\n >\n Custom Icon Toast\n \n
\n \n
\n );\n};\n\nToastStory.args = {\n time: 'Today 4:00pm',\n semantic: TOAST_SEMANTIC.success,\n initialFocus: 0,\n testId: 'toast-story',\n};\nToastStory.storyName = 'Toast';\n" }, "css": { "path": "Toast.module.css", "content": "@value (spaceNone,spaceXXSmall, spaceSmall, spaceMedium) from '../../styles/variables/_space.css';\n\n@value (size24, size400) from '../../styles/variables/_size.css';\n\n@value (\n colorBorderPrimary,\n colorBackgroundTertiary,\n colorTextPrimary,\n colorTextSecondary\n) from '../../styles/variables/_color.css';\n\n@value (borderWidthPrimary, borderRadiusMedium) from '../../styles/variables/_border.css';\n\n.toastContainer {\n composes: boxShadow1 from '../../styles/shadow.module.css';\n composes: borderPrimary from '../../styles/border.module.css';\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n padding: spaceMedium;\n gap: spaceSmall;\n width: size400;\n min-width: size400;\n border-radius: borderRadiusMedium;\n background: colorBackgroundTertiary;\n}\n\n.toastMidSection {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: spaceNone;\n gap: spaceMedium;\n}\n\n.contentWrap {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding-top: spaceXXSmall;\n gap: spaceSmall;\n}\n\n.titleBodyWrap {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: spaceNone;\n gap: spaceXXSmall;\n}\n\n.toastBody {\n composes: bodyMedium from '../../styles/typography.module.css';\n color: colorTextSecondary;\n}\n\n.toastFooterActions {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n gap: spaceSmall;\n}\n\n.closeIcon {\n margin-left: auto;\n}\n\n.toastTitle {\n composes: subTitleSmall from '../../styles/typography.module.css';\n color: colorTextPrimary;\n}\n\n.toastTime {\n color: colorTextSecondary;\n}\n" }, "index": { "path": "index.d.ts", "content": "export type { ToastProps, ToastSemanticType } from '../../components/Toast/Toast';\nexport { Toast, TOAST_SEMANTIC, ToastBody, ToastFooter, ToastTitle, } from '../../components/Toast/Toast';\nexport { ToastContainer } from '../../components/Toast/ToastContainer';\nexport { toastApi, toastManager } from '../../components/Toast/ToastManager';\n//# sourceMappingURL=index.d.ts.map" }, "additional": { "ToastContainer.d.ts": { "path": "ToastContainer.d.ts", "content": "import React from 'react';\nexport declare const ToastContainer: () => null | React.ReactPortal;\n//# sourceMappingURL=ToastContainer.d.ts.map" }, "ToastManager.d.ts": { "path": "ToastManager.d.ts", "content": "import type { CallbackFuncTypes, ContentTypes, ToastOptions } from '../../types/toast';\nexport declare const POSITIONS: {\n readonly TOP_CENTER: \"topCenter\";\n readonly TOP_LEFT: \"topLeft\";\n readonly TOP_RIGHT: \"topRight\";\n readonly BOTTOM_LEFT: \"bottomLeft\";\n readonly BOTTOM_RIGHT: \"bottomRight\";\n readonly BOTTOM_CENTER: \"bottomCenter\";\n};\nexport declare const ACTIONS: {\n readonly ADD: \"ADD\";\n readonly REMOVE: \"REMOVE\";\n};\nexport declare const toastManager: {\n add: (content: ContentTypes, options?: ToastOptions) => string;\n remove: (id: string) => boolean;\n subscribe: (callback: CallbackFuncTypes) => void;\n};\nexport declare const toastApi: {\n readonly show: (content: ContentTypes, options?: ToastOptions) => string;\n readonly remove: (id: string) => boolean;\n};\n//# sourceMappingURL=ToastManager.d.ts.map" } } }, "allFiles": [ "Toast.module.css", "Toast.stories.module.css", "Toast.stories.tsx", "Toast.tsx", "ToastContainer.module.css", "ToastContainer.tsx", "ToastManager.ts", "index.ts" ] }, "Toggle": { "name": "Toggle", "path": "src/components/Toggle", "files": { "main": { "path": "Toggle.d.ts", "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\n/**\n * Note:\n * Do not wrap Toggle in a label. For simplicity's sake, Toggle uses an\n * internal label tag to handle click delegation to the hidden input, and\n * nesting labels is a bad idea.\n */\ntype ClassNames = Readonly<{\n wrapper?: string;\n label?: string;\n}>;\nexport interface ToggleProps {\n name?: string;\n classNames?: ClassNames;\n children?: React.ReactNode;\n checked?: boolean;\n onChange?: (arg1: {\n value: string;\n checked: boolean;\n }) => unknown;\n disabled?: boolean;\n focused?: boolean;\n value?: string;\n ariaLabel?: string;\n labelPosition?: 'left' | 'right';\n testId?: string;\n}\nexport declare const Toggle: Flow.AbstractComponent;\nexport {};\n//# sourceMappingURL=Toggle.d.ts.map" }, "story": { "path": "Toggle.stories.tsx", "content": "import * as React from 'react';\n\nimport {Avatar} from 'src/components/Avatar';\nimport {ButtonTextMedium} from 'src/components/Text';\nimport type {ToggleProps} from 'src/components/Toggle/Toggle';\nimport {Toggle} from 'src/components/Toggle/Toggle';\nimport {Truncate} from 'src/components/Truncate';\n\nimport css from 'src/components/Toggle/Toggle.stories.module.css';\n\n\nexport default {\n tags: ['autodocs'],\n title: 'Form Components/Toggle',\n component: Toggle,\n argTypes: {\n name: {\n description: 'Specify the name of the underlying `input` node',\n },\n value: {\n description:\n 'The value to be used in the input type checkbox internally. This is the value that will be returned on form submission',\n name: 'value',\n table: {\n type: {summary: 'string'},\n },\n control: {\n disable: true,\n },\n },\n // controlled checked prop\n checked: {\n table: {\n type: {summary: 'boolean'},\n },\n },\n disabled: {\n description: 'if **true**, the component is disabled',\n options: [false, true],\n control: 'boolean',\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: false},\n },\n },\n focused: {\n description: 'if **true**, the component is focussed',\n options: [false, true],\n control: 'boolean',\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: false},\n },\n },\n labelPosition: {\n description: 'Position of the label',\n options: ['left', 'right'],\n control: 'radio',\n table: {\n type: {summary: 'string'},\n defaultValue: {summary: 'right'},\n },\n },\n classNames: {\n description: 'External classNames to be applied',\n control: {\n type: 'object',\n },\n table: {\n type: {summary: '{wrapper?: string, label?: string}'},\n },\n },\n children: {\n description: 'The label of the Toggle',\n table: {\n type: {summary: 'React.Component | string'},\n },\n },\n onChange: {\n description: '**onChange** handler that is applied to the element',\n action: 'selected',\n type: {summary: '({value: string, checked: boolean}) => mixed'},\n },\n ariaLabel: {\n description:\n 'Pass label as ariaLabel. It is mandatory parameter for accessibility in case children is not a simple string.',\n table: {\n type: {summary: 'string'},\n },\n },\n testId: {\n description: 'Test ID for the component',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n },\n parameters: {\n docs: {\n subtitle: 'Generates a Toggle component',\n description: {\n component: `\n\\`\\`\\`js\nimport { Toggle } from \"@spaced-out/ui-design-system/lib/components/Toggle\";\n\\`\\`\\`\nToggle changes the state of a single setting on or off.\n `,\n },\n },\n storySource: {\n componentPath: '/src/components/Toggle/Toggle',\n },\n },\n};\n\nexport const ToggleStory = (args: ToggleProps) => {\n const [selected, setSelected] = React.useState(args.checked);\n const onChangeHandler = ({\n value,\n checked,\n }: {\n value: string;\n checked: boolean;\n }): void => {\n args.onChange?.({value, checked});\n\n setSelected(checked);\n };\n return (\n
\n \n
\n );\n};\n\nToggleStory.args = {\n name: 'sample-toggle',\n disabled: false,\n focused: false,\n children: 'Toggle Label',\n checked: false,\n value: 'sample-value',\n labelPosition: 'left',\n testId: 'toggle-story',\n};\n\nexport const CustomToggleStory = (args: ToggleProps) => {\n const [selected, setSelected] = React.useState(args.checked);\n const onChangeHandler = ({\n value,\n checked,\n }: {\n value: string;\n checked: boolean;\n }): void => {\n args.onChange?.({value, checked});\n\n setSelected(checked);\n };\n return (\n
\n \n \n \n {'Toggle Label'}\n \n \n
\n );\n};\n\nCustomToggleStory.args = {\n name: 'sample-toggle',\n disabled: false,\n focused: false,\n children: 'Toggle Label',\n checked: false,\n value: 'sample-value',\n ariaLabel: 'Toggle Label',\n labelPosition: 'left',\n testId: 'custom-toggle-story',\n};\nToggleStory.storyName = 'Toggle';\nCustomToggleStory.storyName = 'Custom Toggle';\n" }, "css": { "path": "Toggle.module.css", "content": "@value (\n borderWidthNone,\n borderWidthTertiary,\n borderRadiusMedium,\n borderRadiusLarge\n) from '../../styles/variables/_border.css';\n\n@value (\n colorBackgroundTertiary,\n colorBorderSecondary,\n colorFillPrimary,\n colorFillDisabled,\n colorFocusPrimary,\n colorBorderSecondary\n) from '../../styles/variables/_color.css';\n\n@value (\n motionDurationSlow\n) from '../../styles/variables/_motion.css';\n\n@value (\n spaceNone,\n spaceXXSmall,\n spaceMedium\n) from '../../styles/variables/_space.css';\n\n@value (\n shadowBoxShadow1X,\n shadowBoxShadow1Y,\n shadowBoxShadow1Blur,\n shadowBoxShadow1Spread,\n shadowBoxShadow1Color ) from '../../styles/variables/_shadow.css';\n\n@value (\n size10,\n size18,\n size24,\n size36,\n size40\n) from '../../styles/variables/_size.css';\n\n.container {\n position: relative;\n display: flex;\n gap: spaceMedium;\n height: size24;\n align-items: center;\n cursor: pointer;\n}\n\n.disabled {\n cursor: not-allowed;\n}\n\n.toggleWrap input[type='checkbox'] {\n opacity: 0;\n position: absolute;\n width: size36;\n height: size18;\n}\n\n.toggleWrap input[type='checkbox']:disabled {\n cursor: not-allowed;\n pointer-events: none;\n}\n\n.toggleWrap {\n width: size40;\n height: size24;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.toggle {\n position: relative;\n width: size36;\n height: size18;\n box-sizing: border-box;\n cursor: pointer;\n transition: motionDurationSlow;\n background: colorBorderSecondary;\n border-radius: borderRadiusLarge;\n}\n\n.toggle::before {\n position: absolute;\n content: '';\n height: size10;\n width: size10;\n margin: auto;\n top: spaceNone;\n bottom: spaceNone;\n left: spaceXXSmall;\n transition: motionDurationSlow;\n background: colorBackgroundTertiary;\n border-radius: borderRadiusMedium;\n}\n\n.container input:checked + .toggle::before {\n transform: translateX(size18);\n}\n\n.container input:checked + .toggle {\n background-color: colorFillPrimary;\n}\n\n.container input:focus + .toggle {\n box-shadow: borderWidthNone borderWidthNone borderWidthNone\n borderWidthTertiary colorFocusPrimary;\n}\n\n.container input:active + .toggle {\n box-shadow: borderWidthNone borderWidthNone borderWidthNone\n borderWidthTertiary colorFocusPrimary;\n}\n\n/* disabled/unchecked */\n.disabledButton {\n pointer-events: none;\n cursor: not-allowed;\n background: colorFillDisabled;\n}\n\n.disabledButton::before {\n background: colorBorderSecondary;\n}\n\n/* disabled/checked */\n.container input[type='checkbox']:checked + .disabled {\n border: borderWidthNone;\n background: colorFillDisabled;\n cursor: not-allowed;\n}\n\n.container input[type='checkbox']:checked + .disabled::before {\n background: colorBorderSecondary;\n}\n\n.toggleLabel {\n composes: formLabelMedium from '../../styles/typography.module.css';\n composes: secondary from '../../styles/typography.module.css';\n margin-left: spaceNone;\n}\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../components/Toggle/Toggle';\n//# sourceMappingURL=index.d.ts.map" }, "additional": {} }, "allFiles": [ "Toggle.module.css", "Toggle.stories.module.css", "Toggle.stories.tsx", "Toggle.tsx", "index.ts" ] }, "TokenListInput": { "name": "TokenListInput", "path": "src/components/TokenListInput", "files": { "main": { "path": "TokenListInput.d.ts", "content": "import * as React from 'react';\nimport type { ClickAwayRefType } from '../../utils/click-away/click-away';\nimport type { InputProps } from '../../components/Input';\nimport type { BaseMenuProps } from '../../components/Menu';\nimport type { ResolveTokenValueProps } from '../../components/TokenListInput/TokenValueChips';\nimport type { ElevationType } from '../../components/Tooltip';\nexport declare const DEFAULT_LIMIT_VALUE = 100;\ntype ClassNames = Readonly<{\n wrapper?: string;\n box?: string;\n input?: string;\n}>;\nexport interface TokenListMenuOptionTypes {\n options?: Array;\n groupTitleOptions?: Array>;\n resolveLabel?: (option: T) => string;\n}\nexport interface TokenGroupTitleOption {\n groupTitle?: React.ReactNode;\n options?: Array;\n showLineDivider?: boolean;\n}\nexport interface TokenListMenuProps extends Omit, TokenListMenuOptionTypes {\n resolveLabel?: (option: T) => string;\n}\nexport interface Props {\n classNames?: ClassNames;\n clickAwayRef?: React.RefObject;\n disabled?: boolean;\n error?: boolean;\n errorText?: string;\n focusOnMount?: boolean;\n helperText?: string;\n inputValue?: string;\n inputPlaceholder?: string;\n limit?: number;\n isLoading?: boolean;\n locked?: boolean;\n onChange: (values: Array) => unknown;\n onInputBlur?: React.FocusEventHandler;\n onInputChange?: (value: string) => unknown;\n onInputFocus?: React.FocusEventHandler;\n placeholder?: string;\n size?: 'medium' | 'small';\n tabIndex?: number;\n values: Array;\n menu?: TokenListMenuProps;\n onMenuOpen?: () => unknown;\n onMenuClose?: () => unknown;\n resolveTokenValue?: (arg1: ResolveTokenValueProps) => React.ReactNode;\n inputProps?: Omit;\n elevation?: ElevationType;\n testId?: string;\n inputRef?: React.RefObject;\n actionsSlot?: React.ReactNode;\n}\nexport declare function TokenListInput(props: Props): React.JSX.Element;\nexport declare namespace TokenListInput {\n var displayName: string;\n}\nexport {};\n//# sourceMappingURL=TokenListInput.d.ts.map" }, "story": { "path": "TokenListInput.stories.tsx", "content": "import * as React from 'react';\n\nimport {useArbitraryOptionAddition} from 'src/hooks/useArbitraryOptionAddition';\nimport {useFilteredOptions} from 'src/hooks/useFilteredOptions';\nimport {classify} from 'src/utils/classify';\n\nimport {Icon} from 'src/components/Icon';\nimport type {MenuOption} from 'src/components/Menu';\nimport {\n ButtonTextExtraSmallUnderline,\n FormLabelSmall,\n TEXT_COLORS,\n} from 'src/components/Text';\nimport type {Props} from 'src/components/TokenListInput/TokenListInput';\nimport {TokenListInput} from 'src/components/TokenListInput/TokenListInput';\nimport {ELEVATION_TYPES, Tooltip} from 'src/components/Tooltip';\n\nimport css from 'src/components/TokenListInput/TokenListInput.stories.module.css';\n\n// Type definitions\ninterface TokenListOption extends Omit {\n arbitrary?: boolean;\n}\n\ninterface SimpleTokenOption {\n label: string;\n key: string;\n}\n\ninterface GroupTitleOption {\n groupTitle: React.ReactNode;\n options: TokenListOption[];\n showLineDivider?: boolean;\n}\n\ninterface InputProps {\n id?: string;\n [key: string]: unknown;\n}\n\nconst elevationOptions: Array = [...Object.values(ELEVATION_TYPES)];\n\nexport default {\n tags: ['autodocs'],\n title: 'Form Components/Token List Input',\n component: TokenListInput,\n argTypes: {\n inputRef: {\n description: 'Ref for the input element.',\n control: {type: 'object'},\n table: {type: {summary: 'RefObject'}},\n },\n actionsSlot: {\n description:\n 'Actions slot to be displayed at the bottom of the input. This is useful if you want the actions to be visible while menu is open.',\n control: {type: 'object'},\n table: {type: {summary: 'React.ReactNode'}},\n },\n classNames: {\n description:\n 'Custom class names for styling the wrapper, box, and input.',\n control: {type: 'object'},\n table: {\n type: {summary: '{ wrapper?: string, box?: string, input?: string }'},\n },\n },\n clickAwayRef: {\n description:\n 'Ref for the click-away handler, used to detect clicks outside the component.',\n control: false,\n table: {type: {summary: 'ClickAwayRefType'}},\n },\n disabled: {\n description: 'Disables user interaction with the input and menu.',\n control: {type: 'boolean'},\n table: {type: {summary: 'boolean'}, defaultValue: {summary: 'false'}},\n },\n elevation: {\n description:\n 'This is passed to TokenListInput. Elevation level for the dropdown menu controls the z-index stacking order. Default is set to \"modal\" elevation. Use higher elevation levels when rendering the dropdown above other elevated elements like Modal, Toast, etc.',\n control: {\n type: 'select',\n },\n options: elevationOptions,\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: 'modal'},\n },\n },\n error: {\n description:\n 'if **true**, the component is moved to error state, Error state displays a red border surrounding input',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n errorText: {\n description:\n 'Error text to be displayed on the bottom of the input. This uses `colorTextDanger`',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n focusOnMount: {\n description:\n 'If true, the input will be focused automatically when the component mounts.',\n control: {type: 'boolean'},\n table: {type: {summary: 'boolean'}},\n },\n helperText: {\n description:\n 'Additional information or guidance displayed below the input. Hidden if errorText is present.',\n control: {type: 'text'},\n table: {type: {summary: 'string'}},\n },\n placeholder: {\n description:\n 'Placeholder text for the input field. Used if values are empty.',\n control: {type: 'text'},\n table: {type: {summary: 'string'}},\n },\n inputValue: {\n description: 'The current value of the input field.',\n control: {type: 'text'},\n table: {type: {summary: 'string'}},\n },\n inputPlaceholder: {\n description:\n 'Placeholder text for the input field. Used if provided, otherwise falls back to `placeholder`.',\n control: {type: 'text'},\n table: {type: {summary: 'string'}},\n },\n limit: {\n description:\n 'Maximum number of tokens that can be added. When the limit is reached, the input is disabled.',\n control: {type: 'number'},\n table: {type: {summary: 'number'}, defaultValue: {summary: '100'}},\n },\n isLoading: {\n description: 'if **true**, the component would add a loader.',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n locked: {\n description:\n 'If true, the input and tokens are locked and cannot be changed.',\n control: {type: 'boolean'},\n table: {type: {summary: 'boolean'}},\n },\n onChange: {\n description: 'Callback fired when the list of selected tokens changes.',\n control: false,\n table: {type: {summary: '(values: Array) => mixed'}},\n },\n onInputBlur: {\n description: 'Callback fired when the input loses focus.',\n control: false,\n table: {\n type: {summary: '(e: SyntheticEvent) => mixed'},\n },\n },\n onInputChange: {\n description: 'Callback fired when the input value changes.',\n control: false,\n table: {type: {summary: '(value: string) => mixed'}},\n },\n onInputFocus: {\n description: 'Callback fired when the input gains focus.',\n control: false,\n table: {\n type: {summary: '(e: SyntheticEvent) => mixed'},\n },\n },\n\n size: {\n description:\n 'Controls the overall size of the input field. Choose between \"medium\" (default) and \"small\".',\n options: ['medium', 'small'],\n control: {type: 'select'},\n table: {\n type: {summary: '\"medium\" | \"small\"'},\n defaultValue: {summary: 'medium'},\n },\n },\n tabIndex: {\n description: 'Tab index for the input field.',\n control: {type: 'number'},\n table: {type: {summary: 'number'}},\n },\n values: {\n description: 'The current list of selected tokens.',\n control: {type: 'object'},\n table: {type: {summary: 'Array'}},\n },\n menu: {\n description:\n 'Props for the dropdown menu, including options, grouped options, and custom label resolver.',\n control: {type: 'object'},\n table: {type: {summary: 'TokenListMenuProps'}},\n },\n onMenuOpen: {\n description: 'Callback fired when the menu is opened.',\n control: false,\n table: {type: {summary: '() => mixed'}},\n },\n onMenuClose: {\n description: 'Callback fired when the menu is closed.',\n control: false,\n table: {type: {summary: '() => mixed'}},\n },\n resolveTokenValue: {\n description: 'Custom render function for displaying a token value.',\n control: false,\n table: {type: {summary: '(ResolveTokenValueProps) => React.Node'}},\n },\n inputProps: {\n description: 'Additional props to spread onto the input element.',\n control: {type: 'object'},\n table: {type: {summary: 'InputProps'}},\n },\n },\n parameters: {\n docs: {\n subtitle:\n 'A flexible input for managing a list of tokens, supporting both selection from a dropdown and free-form entry.',\n description: {\n component: `\n\\`\\`\\`js\nimport { TokenListInput } from '@spaced-out/ui-design-system/lib/components/TokenListInput';\n\\`\\`\\`\n\n**TokenListInput** provides a user-friendly interface for entering and managing multiple values as tokens. Users can select from a dropdown menu or add their own custom entries (if enabled). This component is ideal for tagging, multi-select, and similar use cases.\n\n**Features:**\n- Add, remove, and manage tokens with ease\n- Supports both predefined and user-defined (arbitrary) options\n- Customizable option rendering (icons, custom components, etc.)\n- Configurable maximum token limit\n- Disabled and locked states for controlled usage\n- Helper and error text for enhanced user feedback\n\n**Props Overview:**\n- \\`classNames\\`: Custom class names for styling\n- \\`clickAwayRef\\`: Ref for click-away detection\n- \\`disabled\\`: Disables the input and menu\n- \\`errorText\\`: Error message below the input\n- \\`focusOnMount\\`: Auto-focus input on mount\n- \\`helperText\\`: Guidance below the input\n- \\`inputValue\\`: Current input value\n- \\`inputPlaceholder\\`: Placeholder for the input field\n- \\`limit\\`: Maximum number of tokens\n- \\`locked\\`: Locks the input and tokens\n- \\`onChange\\`: Callback for token changes\n- \\`onInputBlur\\`: Callback for input blur\n- \\`onInputChange\\`: Callback for input value change\n- \\`onInputFocus\\`: Callback for input focus\n- \\`placeholder\\`: Fallback placeholder for the input\n- \\`size\\`: Input size (\"medium\" or \"small\")\n- \\`tabIndex\\`: Tab index for the input\n- \\`values\\`: Selected tokens\n- \\`menu\\`: Dropdown menu props\n- \\`onMenuOpen\\`: Callback for menu open\n- \\`onMenuClose\\`: Callback for menu close\n- \\`resolveTokenValue\\`: Custom token renderer\n- \\`inputProps\\`: Additional input props\n\n**Usage Example:**\n\n\\`\\`\\`jsx\n\n\\`\\`\\`\n `,\n },\n },\n storySource: {\n componentPath: '/src/components/TokenListInput/TokenListInput',\n },\n },\n};\n\nexport const TokenListInputStory = (args: Props) => {\n const options: Array = [\n {key: '1', label: 'Option 1'},\n {key: '2', label: 'Option 2'},\n {key: '3', label: 'Option 3'},\n {key: '4', label: 'Option 4'},\n ];\n\n const [values, setValues] = React.useState>([\n {label: 'apple', key: 'ap'},\n {label: 'b', key: 'b'},\n ]);\n\n const [input, setInput] = React.useState('');\n return (\n
\n \n
\n );\n};\n\nTokenListInputStory.args = {\n classNames: {wrapper: ''},\n testId: 'token-list-input',\n};\n\nexport const TokenListInputWithActionsSlotStory = (\n args: Props,\n) => {\n const options: Array = [\n {key: '1', label: 'Option 1'},\n {key: '2', label: 'Option 2'},\n {key: '3', label: 'Option 3'},\n {key: '4', label: 'Option 4'},\n ];\n\n const [values, setValues] = React.useState>([\n {label: 'apple', key: 'ap'},\n {label: 'b', key: 'b'},\n ]);\n\n const [input, setInput] = React.useState('');\n return (\n
\n \n
\n );\n};\n\nTokenListInputWithActionsSlotStory.args = {\n classNames: {wrapper: ''},\n testId: 'token-list-input',\n actionsSlot: (\n
\n \n Add All\n \n \n Clear All\n \n
\n ),\n};\n\nexport const TokenListInputWithErrorStory = (args: Props) => {\n const options: Array = [\n {key: '1', label: 'Eden Porter', iconLeft: 'user'},\n {key: '2', label: 'Verda Rodgers', iconLeft: 'user'},\n {key: '3', label: 'Paisley Badman', iconLeft: 'user'},\n {key: '4', label: 'Miranda Black', iconLeft: 'user'},\n {key: '5', label: 'Pamela Fennimore', iconLeft: 'user'},\n {key: '6', label: 'Geneva Rhodes', iconLeft: 'user'},\n {key: '7', label: 'Rolf Kim', iconLeft: 'user'},\n {key: '8', label: 'Marsh Saunders', iconLeft: 'user'},\n {key: '9', label: 'Prunella Webb', iconLeft: 'user'},\n {key: '10', label: 'Andy Mullins', iconLeft: 'user'},\n {key: '11', label: 'Jade Watkins', iconLeft: 'user'},\n {key: '12', label: 'Wally Wolfe', iconLeft: 'user'},\n {key: '13', label: 'Misty Lipsey', iconLeft: 'user'},\n {key: '14', label: 'Dwight Gibbs', iconLeft: 'user'},\n {key: '15', label: 'Ronald Rhodes', iconLeft: 'user'},\n ];\n\n const [values, setValues] = React.useState>([]);\n const [input, setInput] = React.useState('');\n const onChangeHandler = (newValues: Array) => {\n setValues(newValues);\n };\n\n return (\n
\n \n
\n );\n};\n\nexport const TokenListInputLockedStory = (args: Props) => {\n const values: Array = [\n {key: '1', label: 'Eden Porter', iconLeft: 'user'},\n {key: '2', label: 'Verda Rodgers', iconLeft: 'user'},\n {key: '3', label: 'Paisley Badman', iconLeft: 'user'},\n {key: '4', label: 'Miranda Black', iconLeft: 'user'},\n {key: '5', label: 'Pamela Fennimore', iconLeft: 'user'},\n {key: '6', label: 'Geneva Rhodes', iconLeft: 'user'},\n {key: '7', label: 'Rolf Kim', iconLeft: 'user'},\n {key: '8', label: 'Marsh Saunders', iconLeft: 'user'},\n ];\n const [input, setInput] = React.useState('');\n return (\n
\n \n
\n );\n};\n\nTokenListInputLockedStory.args = {\n locked: true,\n testId: 'token-list-input-locked',\n};\n\nexport const TokenListInputDisabledStory = (args: Props) => {\n const values: Array = [\n {key: '1', label: 'Eden Porter', iconLeft: 'user'},\n {key: '2', label: 'Verda Rodgers', iconLeft: 'user'},\n {key: '3', label: 'Paisley Badman', iconLeft: 'user'},\n {key: '4', label: 'Miranda Black', iconLeft: 'user'},\n {key: '5', label: 'Pamela Fennimore', iconLeft: 'user'},\n {key: '6', label: 'Geneva Rhodes', iconLeft: 'user'},\n {key: '7', label: 'Rolf Kim', iconLeft: 'user'},\n {key: '8', label: 'Marsh Saunders', iconLeft: 'user'},\n ];\n const [input, setInput] = React.useState('');\n return (\n
\n \n
\n );\n};\n\nTokenListInputDisabledStory.args = {\n classNames: {wrapper: css.tokenListInputWrapper},\n disabled: true,\n testId: 'token-list-input-disabled',\n};\n\nconst TokenListInputGroupWrap = (args: Props) => {\n const [values, setValues] = React.useState>([\n {label: 'apple', key: 'app'},\n {label: 'banana', key: 'ban'},\n ]);\n const [inputValue, setInputValue] = React.useState('');\n const {filteredGroupTitleOptions} = useFilteredOptions({\n searchTerm: inputValue,\n groupTitleOptions: args.menu?.groupTitleOptions as\n | GroupTitleOption[]\n | undefined,\n excludedKeys: values.map((value) => value.key),\n });\n const {groupTitleOptionsWithArbitrary} = useArbitraryOptionAddition({\n searchTerm: inputValue,\n groupTitleOptions: filteredGroupTitleOptions,\n excludedKeys: values.map((value) => value.key),\n makeArbitraryValue: (value) => ({\n key: value,\n label: value,\n arbitrary: true,\n }),\n });\n return (\n
\n {\n if (option.arbitrary && option.label) {\n return `Create New \"${option.label}\"`;\n }\n return option.label || '';\n },\n }}\n />\n
\n );\n};\n\nexport const TokenListInputGroupStory = (args: Props) => (\n \n);\n\nTokenListInputGroupStory.args = {\n menu: {\n groupTitleOptions: [\n {\n groupTitle: () => (\n
\n Fast Food\n
\n \n \n \n
\n
\n ),\n options: [\n {\n key: 'burger',\n iconLeft: 'burger',\n label: 'Burger',\n },\n {\n key: 'pizza',\n iconLeft: 'pizza',\n label: 'Pizza',\n },\n {\n key: 'fries',\n iconLeft: 'french-fries',\n label: 'Fries',\n },\n ],\n },\n {\n showLineDivider: true,\n groupTitle: (\n
\n Fruits\n
\n \n \n \n
\n
\n ) as React.ReactNode,\n options: [\n {\n key: 'banana',\n iconLeft: 'banana',\n label: 'Banana',\n },\n {\n key: 'pear',\n iconLeft: 'pear',\n label: 'Pear',\n },\n {\n key: 'lemon',\n iconLeft: 'lemon',\n label: 'Lemon',\n },\n ],\n },\n ],\n },\n testId: 'token-list-input-group',\n};\n\nconst CustomOptionTokenListInput = (args: Props) => {\n const options = [\n {\n key: '1',\n label: 'Mango',\n customComponent: (\n
\n Mango\n
\n \n \n \n
\n
\n ),\n },\n {\n key: '2',\n label: 'Watermelon',\n customComponent: (\n
\n Watermelon\n
\n \n \n \n
\n
\n ),\n },\n {key: '3', label: 'Option 3'},\n {key: '4', label: 'Option 4'},\n ];\n\n const [values, setValues] = React.useState([\n {label: 'apple', key: 'a'},\n {label: 'b', key: 'b'},\n ]);\n\n const [input, setInput] = React.useState('');\n\n return (\n
\n )}\n inputValue={input}\n onInputChange={setInput}\n values={values}\n onChange={setValues}\n menu={{options}}\n />\n
\n );\n};\n\nexport const CustomOptionTokenListInputStory = (\n args: Props,\n) => ;\n\nexport const AllowArbitraryValuesStory = (args: Props) => {\n const [values, setValues] = React.useState>([]);\n const [inputValue, setInputValue] = React.useState('');\n const {filteredOptions} = useFilteredOptions({\n searchTerm: inputValue,\n options: args.menu?.options,\n excludedKeys: values.map((value) => value.key),\n });\n const {optionsWithArbitrary} = useArbitraryOptionAddition({\n searchTerm: inputValue,\n options: filteredOptions,\n excludedKeys: values.map((value) => value.key),\n makeArbitraryValue: (value) => ({\n key: value,\n label: value,\n arbitrary: true,\n }),\n });\n const clearHandler = () => {\n setValues([]);\n setInputValue('');\n };\n return (\n
\n
\n \n {!args.disabled && !args.locked && values.length > 0 && (\n {\n clearHandler();\n }}\n onKeyDown={(e: React.KeyboardEvent) => {\n if (e.key === 'Enter') {\n clearHandler();\n }\n }}\n tabIndex={0}\n style={{\n background: 'none',\n border: 'none',\n padding: 0,\n cursor: 'pointer',\n }}\n >\n \n Clear all\n \n \n )}\n
\n ) => {\n setValues(newValues);\n setInputValue('');\n }}\n menu={{\n options: optionsWithArbitrary as Array,\n resolveLabel: (option: TokenListOption) => {\n if (option.arbitrary && option.label) {\n return `Create New \\\"${option.label}\\\"`;\n }\n return option.label || '';\n },\n }}\n inputProps={\n {\n id: 'token-list-input',\n } as InputProps\n }\n />\n
\n );\n};\nAllowArbitraryValuesStory.args = {\n menu: {\n options: [\n {key: '1', label: 'Option 1'},\n {key: '2', label: 'Option 2'},\n {key: '3', label: 'Option 3'},\n ],\n },\n disabled: false,\n locked: false,\n testId: 'token-list-input-arbitrary',\n};\nTokenListInputStory.storyName = 'Token List Input';\nTokenListInputWithErrorStory.storyName = 'Token List Input With Error';\nTokenListInputLockedStory.storyName = 'Token List Input Locked';\nTokenListInputDisabledStory.storyName = 'Token List Input Disabled';\nTokenListInputGroupStory.storyName = 'Token List Input Group';\nCustomOptionTokenListInputStory.storyName = 'Custom Option Token List Input';\nAllowArbitraryValuesStory.storyName = 'Allow Arbitrary Values';\n" }, "css": { "path": "TokenListInput.module.css", "content": "@value (\n spaceNone,\n spaceSmall,\n spaceXSmall,\n spaceXXSmall\n) from '../../styles/variables/_space.css';\n@value (\n colorFocusDanger,\n colorFillPrimary,\n colorFillDisabled,\n colorFocusPrimary,\n colorBorderDanger,\n colorBorderPrimary,\n colorBorderTertiary,\n colorTextTertiary\n) from '../../styles/variables/_color.css';\n@value (\n borderWidthPrimary,\n borderRadiusMedium,\n borderRadiusSmall,\n borderWidthNone,\n borderWidthTertiary\n) from '../../styles/variables/_border.css';\n@value (\n size2,\n size4,\n size8,\n size26,\n size228,\n sizeFluid\n) from '../../styles/variables/_size.css';\n\n@value tokenListHeaderHeight: 18px;\n@value smallBoxHeight: 34px;\n@value mediumBoxHeight: 42px;\n\n.box {\n display: flex;\n gap: size8;\n align-items: center;\n flex-wrap: wrap;\n width: sizeFluid;\n max-height: size228;\n flex: 0 0 auto;\n overflow: auto;\n cursor: pointer;\n border: borderWidthPrimary solid colorBorderPrimary;\n}\n\n.box:not(.withError):not(.inputDisabled):not(.inputLocked):not(.inputHidden) {\n border-color: colorBorderPrimary;\n}\n\n.box:not(.withError):not(.inputDisabled):not(.inputLocked):not(\n .inputHidden\n ):hover {\n border-color: colorBorderTertiary;\n}\n\n.box:focus-within {\n border-color: colorFillPrimary;\n box-shadow: borderWidthNone borderWidthNone borderWidthNone\n borderWidthTertiary colorFocusPrimary;\n}\n\n.box.withError {\n border-color: colorBorderDanger;\n}\n\n.box.withError:focus-within {\n border-color: colorBorderDanger;\n box-shadow: borderWidthNone borderWidthNone borderWidthNone\n borderWidthTertiary colorFocusDanger;\n}\n\n.box.inputLocked {\n border-color: colorBorderPrimary;\n border-style: dashed;\n}\n\n.box.inputDisabled {\n border-color: colorBorderPrimary;\n}\n\n.tokenListContainer {\n display: flex;\n position: relative;\n flex-flow: column;\n width: sizeFluid;\n gap: spaceXXSmall;\n}\n\n.tokenListHeader {\n display: flex;\n width: sizeFluid;\n height: tokenListHeaderHeight;\n justify-content: space-between;\n}\n\n.clearAllButton {\n cursor: pointer;\n}\n\n.clearAllButton:focus-visible {\n box-shadow: borderWidthNone borderWidthNone borderWidthNone\n borderWidthTertiary colorFocusPrimary;\n}\n\n.medium {\n border-radius: borderRadiusMedium;\n padding: spaceXSmall spaceSmall;\n min-height: mediumBoxHeight;\n}\n\n.small {\n border-radius: borderRadiusSmall;\n padding: spaceXXSmall spaceSmall;\n min-height: smallBoxHeight;\n}\n\n.tokenListInputWrapper {\n display: flex;\n flex-direction: column;\n gap: spaceXSmall;\n}\n\n.inputMedium {\n composes: formInputMedium from '../../styles/typography.module.css';\n min-width: calc(sizeFluid/4);\n outline: none;\n border: none;\n background-color: transparent;\n padding: spaceNone spaceNone spaceNone spaceNone;\n flex: 1 0;\n}\n\n.inputSmall {\n composes: formInputSmall from '../../styles/typography.module.css';\n min-width: calc(sizeFluid/4);\n outline: none;\n border: none;\n background-color: transparent;\n padding: spaceNone spaceNone spaceNone spaceNone;\n flex: 1 0;\n}\n\n:where(.box) input::placeholder {\n color: colorTextTertiary;\n}\n\n.lockIcon {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-left: auto;\n}\n\n.loaderContainer {\n display: flex;\n align-items: center;\n justify-content: center;\n width: size26;\n height: size26;\n margin-left: auto;\n}\n\n.menuWrapper {\n width: var(--dropdown-width);\n z-index: var(--menu-elevation);\n}\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../components/TokenListInput/TokenListInput';\n//# sourceMappingURL=index.d.ts.map" }, "additional": { "TokenValueChips.d.ts": { "path": "TokenValueChips.d.ts", "content": "import * as React from 'react';\ninterface Props {\n values: Array;\n disabled?: boolean;\n locked?: boolean;\n onDismiss: (arg1: T) => unknown;\n resolveTokenValue?: (arg1: ResolveTokenValueProps) => React.ReactNode;\n testId?: string;\n}\nexport interface ResolveTokenValueProps {\n token: T;\n disabled?: boolean;\n onDismiss?: (arg1: T) => unknown;\n locked?: boolean;\n testId?: string;\n}\nexport declare function TokenValueChips(props: Props): (string | number | bigint | boolean | React.JSX.Element | Iterable | Promise> | Iterable | null | undefined> | null | undefined)[];\nexport declare namespace TokenValueChips {\n var displayName: string;\n}\nexport {};\n//# sourceMappingURL=TokenValueChips.d.ts.map" } } }, "allFiles": [ "TokenListInput.module.css", "TokenListInput.stories.module.css", "TokenListInput.stories.tsx", "TokenListInput.tsx", "TokenValueChips.tsx", "index.ts" ] }, "Tooltip": { "name": "Tooltip", "path": "src/components/Tooltip", "files": { "main": { "path": "Tooltip.d.ts", "content": "import * as React from 'react';\ntype ClassNames = Readonly<{\n tooltip?: string;\n title?: string;\n body?: string;\n}>;\nexport declare const DELAY_MOTION_DURATION_TYPES: Readonly<{\n none: \"none\";\n fast: \"fast\";\n normal: \"normal\";\n slow: \"slow\";\n slower: \"slower\";\n slowest: \"slowest\";\n}>;\nexport type DelayMotionDurationType = (typeof DELAY_MOTION_DURATION_TYPES)[keyof typeof DELAY_MOTION_DURATION_TYPES];\nexport declare const ELEVATION_TYPES: Readonly<{\n none: \"none\";\n card: \"card\";\n tooltip: \"tooltip\";\n menu: \"menu\";\n backdrop: \"backdrop\";\n modal: \"modal\";\n toast: \"toast\";\n}>;\nexport type ElevationType = (typeof ELEVATION_TYPES)[keyof typeof ELEVATION_TYPES];\nexport type PlacementType = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'right';\nexport interface BaseTooltipProps {\n classNames?: ClassNames;\n title?: string | React.ReactNode;\n body?: string | React.ReactNode;\n placement?: PlacementType;\n bodyMaxLines?: number;\n titleMaxLines?: number;\n delayMotionDuration?: DelayMotionDurationType;\n hidden?: boolean;\n elevation?: ElevationType;\n testId?: string;\n}\nexport interface TooltipProps extends Omit {\n children: React.ReactNode;\n}\nexport declare const getElevationValue: (elevation: string) => string;\nexport declare const Tooltip: ({ classNames, children, title, body, placement, bodyMaxLines, titleMaxLines, delayMotionDuration, elevation, hidden, testId, }: TooltipProps) => React.JSX.Element;\nexport {};\n//# sourceMappingURL=Tooltip.d.ts.map" }, "story": { "path": "Tooltip.stories.tsx", "content": "import * as React from 'react';\n\nimport {Avatar} from 'src/components/Avatar';\nimport {Button} from 'src/components/Button';\nimport {Icon} from 'src/components/Icon';\nimport {BodyMedium, BodySmall} from 'src/components/Text';\nimport type {TooltipProps} from 'src/components/Tooltip/Tooltip';\nimport {\n DELAY_MOTION_DURATION_TYPES,\n ELEVATION_TYPES,\n Tooltip,\n} from 'src/components/Tooltip/Tooltip';\n\nimport css from 'src/components/Tooltip/Tooltip.stories.module.css';\n\n\nconst delayMotionDurationOptions: Array = [\n ...Object.values(DELAY_MOTION_DURATION_TYPES),\n];\n\nconst elevationOptions: Array = [...Object.values(ELEVATION_TYPES)];\n\nexport default {\n tags: ['autodocs'],\n title: 'Components/Tooltip',\n argTypes: {\n title: {\n description: `**Title** of the tooltip. This is first section in the tooltip\n container. It internally uses truncate to show ellipsis\n when the text is large(based on \\`titleMaxLines\\` prop, defaults to **1 Line**). While\n using title as a react component, you should pass content wrapped inside an\n inline tag like \\`\\`\n `,\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string | React.Node'},\n },\n },\n body: {\n description: `**Body** of the tooltip. This is second section in the tooltip\n container. It internally uses truncate to show ellipsis\n when the text is large(based on \\`bodyMaxLines\\` prop, defaults to **2 Lines**). While\n using body as a react component, you should pass content wrapped inside an\n inline tag like \\`\\`\n `,\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string | React.Node'},\n },\n },\n placement: {\n options: [\n 'top',\n 'top-start',\n 'top-end',\n 'bottom',\n 'bottom-start',\n 'bottom-end',\n 'left',\n 'right',\n ],\n description: 'Placement of tooltip',\n control: {\n type: 'select',\n },\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: 'top'},\n },\n },\n delayMotionDuration: {\n options: delayMotionDurationOptions,\n description: `Delay in showing the Tooltip \\n\n none: 0ms \\n\n fast: 100ms \\n\n normal: 200ms \\n\n slow: 300ms \\n\n slower: 500ms \\n\n slowest: 1000ms `,\n control: {\n type: 'select',\n },\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: 'none'},\n },\n },\n elevation: {\n description:\n 'z-index to the tooltip. This is by default set to elevationTooltip which is `4`. Use this prop when you want to render tooltip at higher elevation elements like Modal, Toast, Menu, etc.',\n control: {\n type: 'select',\n },\n options: elevationOptions,\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: 'tooltip'},\n },\n },\n hidden: {\n description:\n 'If set to **true** tooltip wont be visible. Use this if you want to programmatically control the tooltip show/hide',\n control: {\n type: 'boolean',\n },\n },\n classNames: {\n description: 'External classnames to be applied',\n control: {\n type: 'object',\n },\n table: {\n type: {summary: '{tooltip?: string, title?: string, body?: string}'},\n },\n },\n bodyMaxLines: {\n description:\n 'Maximum number of lines allowed for body text in the Tooltip. Tooltip would automatically **truncate** content after that',\n control: {\n type: 'number',\n },\n table: {\n type: {summary: 'number'},\n defaultValue: {summary: 2},\n },\n },\n titleMaxLines: {\n description:\n 'Maximum number of lines allowed for title text in the Tooltip. Tooltip would automatically **truncate** content after that',\n control: {\n type: 'number',\n },\n table: {\n type: {summary: 'number'},\n defaultValue: {summary: 1},\n },\n },\n children: {\n type: {required: true},\n description:\n 'React Node that tooltip wraps on. Tooltip preserves the consumer\\'s references',\n control: {\n type: 'null',\n },\n table: {\n type: {summary: 'React.Node'},\n },\n },\n testId: {\n description: 'Test ID for the component',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n },\n parameters: {\n docs: {\n subtitle: 'Generates a Tooltip component',\n description: {\n component: `\n\\`\\`\\`js\nimport { Tooltip } from \"@spaced-out/ui-design-system/lib/components/Tooltip\";\n\\`\\`\\`\nWhen users hover over, focus on, or tap an element, **tooltips** provide descriptive text. \\`Tooltip\\` should be wrapped over\nthe element for it to function.\n\nThere are 8 possible placements for the Tooltip. Tooltip container has a max-width of \\`300px\\`. It wraps content if the width exceeds\n\n**Note: **\\`\\`** get attached to \\`\\`. You can manage elevation of the tooltip when you want to use at elevated surfaces.\n\n**Note: **\\`\\`** wrapper needs ref to work. If you are not able to provide ref normally, you would need to wrap the component in a \\`
\\`.\n\n\\`\\`\\`jsx\n
Hello World
\n\n/* Multiline tooltip **/\n\n Damian Marley
\n Chris Stapleton
\n Michael Jackson
\n Elton John
\n James Brown
\n Lil Wayne
\n Elvis Crespo
\n Cody Jinks\n \n }\n bodyMaxLines={7}\n placement={'top-start'}\n>\n \n\n\\`\\`\\`\n `,\n },\n },\n storySource: {\n componentPath: '/src/components/Tooltip/Tooltip',\n },\n },\n};\n\nconst Names = () => (\n <>\n \n Damian Marley
\n Chris Stapleton
\n Michael Jackson
\n Elton John
\n James Brown
\n Lil Wayne
\n Elvis Crespo
\n Cody Jinks\n \n \n);\n\nconst CustomComponent = () => (\n
\n
\n \n Persona 1\n
\n
\n \n Persona 2\n
\n
\n \n Persona 3\n
\n
\n \n Persona 4\n
\n
\n);\n\nexport const SimpleStory = (args: TooltipProps) => (\n
\n
\n \n \n \n
\n \n \n With title, body & max lines for title and body\n \n
\n
\n
\n);\n\nSimpleStory.args = {\n title: 'Label',\n body: `The quick brown fox jumps over the dog,\n The quick brown fox jumps over the dog\n The quick brown fox jumps over the dog`,\n placement: 'top',\n children: null,\n bodyMaxLines: 2,\n titleMaxLines: 1,\n testId: 'tooltip-simple-story',\n};\n\nexport const WithCustomComponentStory = (args: TooltipProps) => (\n
\n
\n }>\n \n \n
\n \n \n Can pass any custom component as body\n \n
\n
\n
\n);\n\nWithCustomComponentStory.args = {\n title: '',\n testId: 'tooltip-with-custom-component-story',\n};\n\nexport const MultilineStory = (args: TooltipProps) => (\n
\n
\n }>\n \n \n
\n \n \n With fixed body and bodyMaxLines = 7\n \n
\n
\n
\n);\n\nMultilineStory.args = {\n title: '',\n bodyMaxLines: 7,\n placement: 'top',\n testId: 'tooltip-multiline-story',\n};\nSimpleStory.storyName = 'Simple';\nWithCustomComponentStory.storyName = 'With Custom Component';\nMultilineStory.storyName = 'Multiline';\n" }, "css": { "path": "Tooltip.module.css", "content": "@value (colorTooltipFill, colorTextInversePrimary, colorTextInverseSecondary) from '../../styles/variables/_color.css';\n@value (size300) from '../../styles/variables/_size.css';\n@value (spaceXSmall, spaceSmall, spaceXXSmall) from '../../styles/variables/_space.css';\n@value (borderRadiusSmall) from '../../styles/variables/_border.css';\n@value (elevationTooltip) from '../../styles/variables/_elevation.css';\n\n.tooltip {\n --tooltip-elevation: elevationTooltip;\n display: flex;\n flex-flow: column;\n max-width: size300;\n gap: spaceXXSmall;\n padding: spaceXSmall spaceSmall;\n background: colorTooltipFill;\n pointer-events: none;\n border-radius: borderRadiusSmall;\n word-wrap: break-word;\n z-index: var(--tooltip-elevation);\n}\n\n.title {\n composes: subTitleExtraSmall from '../../styles/typography.module.css';\n color: colorTextInversePrimary;\n}\n\n.body {\n composes: bodyMedium from '../../styles/typography.module.css';\n color: colorTextInversePrimary;\n}\n\n.hasTitle {\n color: colorTextInverseSecondary;\n}\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../components/Tooltip/Tooltip';\n//# sourceMappingURL=index.d.ts.map" }, "additional": {} }, "allFiles": [ "Tooltip.module.css", "Tooltip.stories.module.css", "Tooltip.stories.tsx", "Tooltip.tsx", "index.ts" ] }, "Truncate": { "name": "Truncate", "path": "src/components/Truncate", "files": { "main": { "path": "Truncate.d.ts", "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nexport interface TruncateProps {\n children?: React.ReactNode;\n line?: number;\n showFullTextOnHover?: boolean;\n wordBreak?: string;\n className?: string;\n testId?: string;\n}\nexport declare const BaseTruncate: Flow.AbstractComponent;\nexport declare const Truncate: Flow.AbstractComponent;\n//# sourceMappingURL=Truncate.d.ts.map" }, "story": { "path": "Truncate.stories.tsx", "content": "import * as React from 'react';\n\nimport {BodyLarge} from 'src/components/Text';\nimport type {TruncateProps} from 'src/components/Truncate';\nimport {Truncate} from 'src/components/Truncate';\n\nimport css from 'src/components/Truncate/Truncate.stories.module.css';\n\n\nexport default {\n tags: ['autodocs'],\n title: 'Components/Truncate',\n argTypes: {\n line: {\n description:\n 'Number of lines to show, and lines after that will be truncated',\n control: {\n type: 'number',\n min: 1,\n },\n table: {\n type: {summary: 'number'},\n defaultValue: {summary: 1},\n },\n },\n children: {\n description: 'Content to be displayed',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n showFullTextOnHover: {\n description:\n 'If **true**, full text **would be displayed** as a browser tooltip on hover',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n className: {\n description: 'External className to be applied on truncate wrapper',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n wordBreak: {\n description: 'word-break style to be applied on truncate',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n defaultValue: {summary: 'break-all'},\n },\n },\n testId: {\n description: 'Test ID for the component',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n },\n parameters: {\n docs: {\n subtitle: 'Generates a Truncate component',\n description: {\n component: `\n\\`\\`\\`js\nimport { Truncate } from \"@spaced-out/ui-design-system/lib/components/Truncate\";\n\\`\\`\\`\nTruncate Component is a wrapper for line clamping.\n `,\n },\n },\n storySource: {\n componentPath: '/src/components/Truncate/Truncate',\n },\n },\n};\n\nexport const TruncateStory = ({children, ...args}: TruncateProps) => (\n
\n \n \n Toggle *showFullTextOnHover* to show/hide full text tooltip {children}\n \n \n
\n);\n\nTruncateStory.args = {\n line: 2,\n showFullTextOnHover: false,\n children: `The quick brown fox jumps over the lazy dog\" is an English-language pangram—a\n sentence that contains all the letters of the alphabet.\n The phrase is commonly used for touch-typing practice, testing\n typewriters and computer keyboards, displaying examples of fonts, and other\n applications involving text where the use of all letters in the alphabet is desired.`,\n testId: 'truncate-story',\n};\nTruncateStory.storyName = 'Truncate';\n" }, "css": { "path": "Truncate.module.css", "content": ".truncateLineClamp {\n composes: truncate from '../../styles/typography.module.css';\n}\n" }, "index": { "path": "index.d.ts", "content": "export type { TruncateProps } from '../../components/Truncate/Truncate';\nexport { Truncate } from '../../components/Truncate/Truncate';\n//# sourceMappingURL=index.d.ts.map" }, "additional": {} }, "allFiles": [ "Truncate.module.css", "Truncate.stories.module.css", "Truncate.stories.tsx", "Truncate.tsx", "index.ts" ] }, "TruncatedTextWithTooltip": { "name": "TruncatedTextWithTooltip", "path": "src/components/TruncatedTextWithTooltip", "files": { "main": { "path": "TruncatedTextWithTooltip.d.ts", "content": "import * as React from 'react';\nimport type { BaseTooltipProps } from '../../components/Tooltip';\ntype ClassNames = Readonly<{\n wrapper?: string;\n}>;\nexport interface TruncatedTextWithTooltipProps {\n children?: React.ReactNode;\n tooltip?: BaseTooltipProps;\n classNames?: ClassNames;\n line?: number;\n wordBreak?: string;\n wrapText?: boolean;\n testId?: string;\n}\nexport declare const TruncatedTextWithTooltip: ({ classNames, children, tooltip, wrapText, line, wordBreak, testId, }: TruncatedTextWithTooltipProps) => React.JSX.Element;\nexport {};\n//# sourceMappingURL=TruncatedTextWithTooltip.d.ts.map" }, "story": { "path": "TruncatedTextWithTooltip.stories.tsx", "content": "import * as React from 'react';\n\nimport {BodyLarge} from 'src/components/Text';\nimport type {TruncatedTextWithTooltipProps} from 'src/components/TruncatedTextWithTooltip';\nimport {TruncatedTextWithTooltip} from 'src/components/TruncatedTextWithTooltip/TruncatedTextWithTooltip';\n\nimport css from 'src/components/TruncatedTextWithTooltip/TruncatedTextWithTooltip.stories.module.css';\n\n\nexport default {\n tags: ['autodocs'],\n title: 'Components/Truncated Text With Tooltip',\n component: TruncatedTextWithTooltip,\n argTypes: {\n children: {\n description: 'The content to be displayed inside the component.',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'React.Node'},\n },\n },\n tooltip: {\n description: 'Props for customizing the tooltip.',\n control: {\n type: 'object',\n },\n table: {\n type: {summary: 'BaseTooltipProps'},\n },\n },\n classNames: {\n description:\n 'Provide an optional className to be applied to the wrapper.',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary: '{ wrapper?: string }',\n },\n },\n },\n wrapText: {\n description:\n 'If **true**, allows the text to wrap instead of truncating.',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n line: {\n description:\n 'Number of lines to show, and lines after that will be truncated \\n note: this is only applicable if wrapText is false',\n control: {\n type: 'number',\n min: 1,\n },\n table: {\n type: {summary: 'number'},\n defaultValue: {summary: 1},\n },\n },\n wordBreak: {\n description: 'word-break style to be applied on truncate',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n defaultValue: {summary: 'break-all'},\n },\n },\n testId: {\n description: 'Test ID for the component',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n },\n parameters: {\n docs: {\n subtitle: 'Generates a TruncatedTextWithTooltip component.',\n description: {\n component: `\n\\`\\`\\`js\nimport { TruncatedTextWithTooltip } from \"@spaced-out/ui-design-system/lib/components/TruncatedTextWithTooltip\";\n\\`\\`\\`\n\n**TruncatedTextWithTooltip** component is designed to handle text truncation and display tooltips when the text is truncated.\nIt provides a clean way to present long text content while allowing users to view the full content through tooltips when necessary.\nThe component would automatically detect if the text is truncated and display a tooltip when the text is truncated. The tooltip content\nwould be the same as the text content(children) by default, but you can also assign custom tooltip content.\n\n### Usage\n\\`\\`\\`jsx\n\n \n Tooltip would appear only when the text is truncated. Change the width of the container to see it in action.\n \n\n\n\n \n You can also assign custom tooltip text when the text is truncated.\n \n\n\\`\\`\\`\n\n**Note:**\n- \\`\\` should always be wrapped inside a **Typography** component.\n- Adjust the component's props and styles as needed to fit your specific use cases.\n `,\n },\n },\n storySource: {\n componentPath:\n '/src/components/TruncatedTextWithTooltip/TruncatedTextWithTooltip',\n },\n },\n};\n\nexport const TruncatedTextWithTooltipStory = (\n args: TruncatedTextWithTooltipProps,\n) => (\n <>\n
\n \n \n \n
\n
\n \n \n You can also assign a custom tip text when the text is truncated.\n \n \n
\n \n);\n\nTruncatedTextWithTooltipStory.args = {\n classNames: {wrapper: ''},\n children: `Tooltip would appear only when the text is truncated. Change width of\n the container to see it in action.`,\n tooltip: {bodyMaxLines: 3},\n testId: 'truncated-text-with-tooltip-story',\n};\nTruncatedTextWithTooltipStory.storyName = 'Truncated Text With Tooltip';\n" }, "css": { "path": "TruncatedTextWithTooltip.module.css", "content": ".truncateLineClamp {\n composes: truncate from '../../styles/typography.module.css';\n white-space: normal;\n}\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../components/TruncatedTextWithTooltip/TruncatedTextWithTooltip';\n//# sourceMappingURL=index.d.ts.map" }, "additional": {} }, "allFiles": [ "TruncatedTextWithTooltip.module.css", "TruncatedTextWithTooltip.stories.module.css", "TruncatedTextWithTooltip.stories.tsx", "TruncatedTextWithTooltip.tsx", "index.ts" ] }, "Typeahead": { "name": "Typeahead", "path": "src/components/Typeahead", "files": { "main": { "path": "Typeahead.d.ts", "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nimport type { ClickAwayRefType } from '../../utils/click-away';\nimport type { InputProps } from '../../components/Input';\nimport type { MenuOption, MenuProps } from '../../components/Menu';\nimport type { ElevationType } from '../../components/Tooltip';\ntype ClassNames = Readonly<{\n wrapper?: string;\n box?: string;\n}>;\ninterface BaseTypeaheadProps extends Omit {\n classNames?: ClassNames;\n onSelect?: (option: MenuOption, arg2?: React.SyntheticEvent | null | undefined) => unknown;\n onSearch?: (evt: React.ChangeEvent) => unknown;\n onMenuOpen?: () => unknown;\n onMenuClose?: () => unknown;\n typeaheadInputText?: string;\n menu?: MenuProps;\n onClear?: () => void;\n isLoading?: boolean;\n menuOpenOffset?: number;\n clickAwayRef?: React.RefObject;\n elevation?: ElevationType;\n /**\n * Opt in to the accessibility behavior: the `combobox` role and its ARIA,\n * arrow-key navigation of the suggestions from the input, and focus handling\n * on close. Forwarded to the `Menu` this opens.\n *\n * Off by default, and off is this component exactly as it behaved before any\n * of it existed.\n */\n enableA11y?: boolean;\n testId?: string;\n rightSlot?: React.ReactNode;\n}\nexport interface TypeaheadProps extends Omit {\n allowInternalFilter?: boolean;\n}\nexport declare const Typeahead: Flow.AbstractComponent;\nexport {};\n//# sourceMappingURL=Typeahead.d.ts.map" }, "story": { "path": "Typeahead.stories.tsx", "content": "import * as React from 'react';\n\nimport {useDebounce} from 'src/hooks/useDebounce';\nimport type {ClickAwayRefType} from 'src/utils/click-away';\n\nimport type {MenuOption, MenuProps} from 'src/components/Menu';\nimport {MenuFooter, MenuHeader} from 'src/components/Menu/Menu.stories';\nimport {Toggle} from 'src/components/Toggle';\nimport {ELEVATION_TYPES, Tooltip} from 'src/components/Tooltip';\nimport type {TypeaheadProps} from 'src/components/Typeahead/Typeahead';\nimport {Typeahead} from 'src/components/Typeahead/Typeahead';\n\nimport css from 'src/components/Typeahead/Typeahead.stories.module.css';\n\n\nconst DEFAULT_LIMIT = 10;\nconst DEFAULT_OFFSET = 0;\nconst elevationOptions: Array = [...Object.values(ELEVATION_TYPES)];\n\nconst options: MenuOption[] = [\n {key: '1', label: 'Eden Porter', iconLeft: 'user'},\n {key: '2', label: 'Verda Rodgers', iconLeft: 'user'},\n {\n key: '3',\n label:\n 'Option three this is a very long option that would truncate, and it continues even further to demonstrate how the text will behave when it exceeds the typical display width of the dropdown or typeahead component, ensuring that truncation, ellipsis, or wrapping is handled gracefully by the UI.',\n iconLeft: 'user',\n },\n {key: '4', label: 'Rolf Kim', iconLeft: 'user'},\n {key: '5', label: 'Ava Clark', iconLeft: 'user'},\n {key: '6', label: 'Geneva Rhodes', iconLeft: 'user'},\n {key: '7', label: 'Miranda Black', iconLeft: 'user'},\n {key: '8', label: 'Marsh Saunders', iconLeft: 'user'},\n {key: '9', label: 'Prunella Webb', iconLeft: 'user'},\n {key: '10', label: 'Andy Mullins', iconLeft: 'user'},\n {key: '11', label: 'Jade Watkins', iconLeft: 'user'},\n {key: '12', label: 'Wally Wolfe', iconLeft: 'user'},\n {key: '13', label: 'Misty Lipsey', iconLeft: 'user'},\n {key: '14', label: 'Dwight Gibbs', iconLeft: 'user'},\n {key: '15', label: 'Ronald Rhodes', iconLeft: 'user'},\n {key: '16', label: 'Sophia Evans', iconLeft: 'user'},\n {key: '17', label: 'Liam Harris', iconLeft: 'user'},\n {key: '18', label: 'Olivia Grant', iconLeft: 'user'},\n {key: '19', label: 'Ethan Daniels', iconLeft: 'user'},\n {key: '20', label: 'Chloe Thomas', iconLeft: 'user'},\n {key: '21', label: 'Lucas Martinez', iconLeft: 'user'},\n {key: '22', label: 'Benjamin Wright', iconLeft: 'user'},\n {key: '23', label: 'Amelia King', iconLeft: 'user'},\n {key: '24', label: 'James Lewis', iconLeft: 'user'},\n {key: '25', label: 'Pamela Fennimore', iconLeft: 'user'},\n];\n\nexport default {\n tags: ['autodocs'],\n title: 'Form Components/Typeahead/Generic Typeahead',\n component: Typeahead,\n argTypes: {\n enableA11y: {\n description:\n '**enableA11y** opts into the accessibility behavior: the `combobox` role and its ARIA, arrow-key navigation of the suggestions from the input, and focus handling on close. Off by default, where the component behaves exactly as it did before any of it existed. Off here too, as everywhere: turn the control on to see the accessible behavior.',\n control: {type: 'boolean'},\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n size: {\n description:\n 'Typeahead supports only two size variants namely small and medium. `small` < `medium`',\n options: ['medium', 'small'],\n control: {\n type: 'select',\n },\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: 'medium'},\n },\n },\n menuSize: {\n description:\n 'Size of the menu.If not specified menu would take the size prop of typeahead. `small` < `medium`',\n options: ['medium', 'small'],\n control: {\n type: 'select',\n },\n table: {\n type: {summary: 'enum'},\n },\n },\n elevation: {\n description:\n 'This is passed to Typeahead. Elevation level for the dropdown menu controls the z-index stacking order. Default is set to \"modal\" elevation. Use higher elevation levels when rendering the dropdown above other elevated elements like Modal, Toast, etc.',\n control: {\n type: 'select',\n },\n options: elevationOptions,\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: 'modal'},\n },\n },\n name: {\n description: 'Name of the typeahead',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n options: {\n description:\n 'Typeahead options to be displayed. Each option should atleast have `{key: string, label: string}` Each option additionally supports `iconLeft` and `iconRight`',\n control: {\n type: 'object',\n },\n table: {\n type: {summary: 'MenuOption[]'},\n },\n },\n disabled: {\n description: 'if **true**, the component is disabled',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n isLoading: {\n description:\n 'if **true**, the component would add a loader. The loader occupies space outside the container.',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n menuOpenOffset: {\n description:\n 'A number indicating how many characters are needed to open menu',\n control: {\n type: 'number',\n },\n table: {\n type: {summary: 'number'},\n defaultValue: {summary: 1},\n },\n },\n placeholder: {\n description:\n 'Placeholder of typeahead. This appears inside the input box',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n locked: {\n description:\n 'if **true**, the component is locked, Locked state is the readonly state of the typeahead',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n error: {\n description:\n 'if **true**, the component is moved to error state, Error state displays a red border surrounding input',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n errorText: {\n description:\n 'Error text to be displayed on the bottom of the input. This uses `colorTextDanger`',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n label: {\n description:\n 'Primary label of the typeahead. This appears on top of typeahead input',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n helperText: {\n description:\n 'Secondary label of the typeahead. This appears on bottom of typeahead input, if the typeahead is in `error` state the priority is given to `errorText`, in such cases secondary label wont be displayed',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n rightSlot: {\n description: 'Right slot to be applied to the typeahead',\n control: {\n type: 'object',\n },\n table: {\n type: {summary: 'React.ReactNode'},\n },\n },\n classNames: {\n description: 'External classnames to be applied',\n control: {\n type: 'object',\n },\n table: {\n type: {summary: '{wrapper?: string, box?: string}'},\n },\n },\n onSelect: {\n description:\n '**onSelect** handler is triggered when there is a selection of an option from Menu',\n action: 'Option Selected',\n table: {\n type: {\n summary:\n '(option: MenuOption, ?SyntheticEvent) => mixed',\n },\n },\n },\n iconLeftName: {\n description:\n 'Left icon to be applied to the button, it internally uses the `Icon` component to render icons. By default Typeahead has magnifying-glass icon',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n defaultValue: {summary: 'magnifying-glass'},\n },\n },\n onClear: {\n description:\n '**onClear** handler is triggered when clear button is clicked.',\n action: 'cleared',\n table: {\n type: {summary: '() => void'},\n },\n },\n onSearch: {\n description:\n '**onSearch** handler is triggered when there change in the input value',\n action: 'Searched',\n table: {\n type: {\n summary: '(evt: SyntheticInputEvent) => mixed',\n },\n },\n },\n onFocus: {\n description:\n '**onFocus** handler is triggered when typeahead is focussed',\n action: 'focussed',\n table: {\n type: {summary: '(e: SyntheticInputEvent) => mixed'},\n },\n },\n onBlur: {\n description: '**onBlur** handler is triggered when typeahead is blurred',\n action: 'blurred',\n table: {\n type: {summary: '(e: SyntheticInputEvent) => mixed'},\n },\n },\n typeaheadInputText: {\n description:\n 'Text that appears inside the top input. Since Typeahead is a controlled component, this has to be set by caller',\n table: {\n type: {summary: 'string'},\n },\n },\n menu: {\n description: 'Menu props to use',\n control: {\n type: 'object',\n },\n table: {\n type: {summary: 'MenuProps'},\n },\n },\n onMenuOpen: {\n description:\n '**onMenuOpen** handler is triggered when menu is opened. This should be helpful in cases where you want to change Button icon / text on this trigger.',\n action: 'clicked',\n table: {\n type: {summary: '() => mixed'},\n },\n },\n onMenuClose: {\n description:\n '**onMenuClose** handler is triggered when menu is closed. This should be helpful in cases where you want to change Button icon / text on this trigger.',\n action: 'clicked',\n table: {\n type: {summary: '() => mixed'},\n },\n },\n clickAwayRef: {\n type: {optional: true},\n description: 'ref that contains the functions to open or close the child',\n table: {\n type: {\n summary: 'ClickAwayRefType',\n },\n },\n },\n allowInternalFilter: {\n description:\n 'Allows the **MenuOptions** to be filtered internally based on the **label** of each option. When this is set to false, the internal filtering mechanism that matches options against the search text is skipped. This means it assumes that the **MenuOptions** has already been filtered externally and will display the provided options as they are without any further processing.',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: true},\n },\n },\n testId: {\n description: 'Test ID for the component',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n },\n parameters: {\n docs: {\n subtitle: 'Generates a Typeahead component',\n description: {\n component: `\n\\`\\`\\`js\nimport { Typeahead } from \"@spaced-out/ui-design-system/lib/components/Typeahead\";\n\\`\\`\\`\n**Typeahead** is implemented as a combination of **Input** and **Menu**\ncomponents. It internally uses **Floating UI** to\nposition itself in context of DOM. Supports a bunch of callbacks listed below. Typeahead automatically filters options when a\nsubstring match is found in option(s). This is done using \\`label\\` prop of option.\n\n- Supports passing a \\`clickAwayRef\\` prop to the component.\n- You can always force Open the dropdown from ref by using \\`clickAwayRef.current?.forceOpen()\\`. This might be useful when want to force Open as per you needs.\n- You can always force Close the dropdown from ref by using \\`clickAwayRef.current?.forceClose()\\`. This might be useful when want to force Close as per you needs.\n\n**Purpose:** The Typeahead component is designed to enhance performance and user experience by initially displaying a limited set of menu options (e.g., most popular or recently used items). Once the user begins typing into the input field, the component dynamically queries the API and displays all matching results based on the input text. This approach minimizes initial load time while ensuring that users can still access the full range of options through search-driven filtering.\n\nCurrently typeahead only supports simple menu options.\n\n\\`\\`\\`jsx\nexport const _BasicTypeahead = (args: TypeaheadProps): React.Node => {\n const clickAwayRef = React.useRef(null);\n const [inputText, setInputText] = React.useState('');\n const [isLoading, setIsLoading] = React.useState(false);\n const [menuOptions, setMenuOptions] = React.useState([]);\n\n const debouncedInputText = useDebounce(inputText, 500);\n\n const fetchData = async () => {\n setIsLoading(true);\n const newOptions = await getPaginatedData(\n debouncedInputText,\n DEFAULT_OFFSET,\n DEFAULT_LIMIT,\n );\n setMenuOptions(newOptions);\n setIsLoading(false);\n };\n\n React.useEffect(() => {\n fetchData();\n }, [debouncedInputText]);\n\n return (\n
\n setInputText('')}\n onSearch={(e) => setInputText(e.target.value)}\n onSelect={({label}) => setInputText(label || '')}\n isLoading={isLoading}\n clickAwayRef={clickAwayRef}\n typeaheadInputText={inputText}\n allowInternalFilter={false}\n />\n
\n );\n}\n\\`\\`\\`\n `,\n },\n },\n storySource: {\n componentPath: '/src/components/Typeahead/Typeahead',\n },\n },\n};\n\nconst menuProps: MenuProps = {\n options,\n};\n\nexport const TypeaheadStory = (args: TypeaheadProps) => {\n const [inputText, setInputText] = React.useState('');\n return (\n
\n setInputText(e.target.value)}\n onSelect={(option) => {\n setInputText(option.label);\n }}\n onClear={() => setInputText('')}\n />\n
\n );\n};\n\nTypeaheadStory.args = {\n label: 'Search a name',\n menu: menuProps,\n testId: 'typeahead-story',\n};\n\n/*\n * The same typeahead as `Typeahead`, with the accessibility opt-in on.\n *\n * With `enableA11y` the field is an `autocomplete` combobox using APG's\n * automatic selection: each time the suggestions narrow, the first one is\n * highlighted, so Enter takes the best match without arrowing to it first. Your\n * own highlight stands between those changes — arrowing down does not get stolen\n * back to the top. Typing keeps reaching the field, the arrow keys move\n * `aria-activedescendant`, and a polite live region announces the result count\n * and the loading state. The field only claims to be expanded while a listbox is\n * actually rendered.\n *\n * Every other story here leaves the prop off, which is the default and is this\n * component exactly as it behaved before any of this existed.\n */\nexport const AccessibleTypeaheadStory = (args: TypeaheadProps) => {\n const [inputText, setInputText] = React.useState('');\n return (\n
\n setInputText(e.target.value)}\n onSelect={(option) => {\n setInputText(option.label);\n }}\n onClear={() => setInputText('')}\n />\n
\n );\n};\n\nAccessibleTypeaheadStory.args = {\n enableA11y: true,\n label: 'Search a name',\n menu: menuProps,\n testId: 'typeahead-accessible-story',\n};\n\nexport const TypeaheadWithTooltipOptionsStory = (args: TypeaheadProps) => {\n const [inputText, setInputText] = React.useState('');\n return (\n
\n setInputText(e.target.value)}\n onSelect={(option) => {\n setInputText(option.label);\n }}\n onClear={() => setInputText('')}\n />\n
\n );\n};\n\nTypeaheadWithTooltipOptionsStory.args = {\n label: 'Search a name',\n menu: {...menuProps, showLabelTooltip: {maxLines: 10}},\n testId: 'typeahead-with-tooltip-options-story',\n};\n\nexport const WithHeaderAndFooterStory = (args: TypeaheadProps) => (\n \n);\n\nexport const WithHeaderAndFooter = (args: TypeaheadProps) => {\n const clickAwayRef = React.useRef(null);\n const [inputText, setInputText] = React.useState('');\n\n const onSave = () => {\n if (clickAwayRef.current) {\n clickAwayRef.current?.forceClose();\n }\n };\n\n return (\n
\n setInputText(e.target.value)}\n onSelect={(option) => {\n setInputText(option.label);\n }}\n menu={{\n options,\n header: ,\n footer: ,\n }}\n onClear={() => setInputText('')}\n clickAwayRef={clickAwayRef}\n />\n
\n );\n};\n\nWithHeaderAndFooterStory.args = {\n label: 'Search a name',\n testId: 'typeahead-with-header-and-footer-story',\n};\n\nconst getPaginatedData = ({\n limit,\n offset,\n searchText,\n}: {\n limit: number;\n offset: number;\n searchText: string;\n}) =>\n new Promise(\n (\n resolve: (result: Promise> | Array) => void,\n ) =>\n setTimeout(() => {\n const filteredOptions = options.filter((option) =>\n option.label\n ? option.label.toLowerCase().includes(searchText.toLowerCase())\n : true,\n );\n\n resolve(filteredOptions.slice(offset, offset + limit));\n }, 1000),\n );\n\nexport const WithPaginationAndVirtualizationStory = (args: TypeaheadProps) => {\n const clickAwayRef = React.useRef(null);\n const [inputText, setInputText] = React.useState('');\n const [isLoading, setIsLoading] = React.useState(false);\n const [menuOptions, setMenuOptions] = React.useState([]);\n\n const debouncedInputText = useDebounce(inputText, 500);\n\n const fetchData = async () => {\n setIsLoading(true);\n const newOptions = await getPaginatedData({\n limit: DEFAULT_LIMIT,\n offset: DEFAULT_OFFSET,\n searchText: debouncedInputText,\n });\n setMenuOptions(newOptions);\n setIsLoading(false);\n };\n\n React.useEffect(() => {\n fetchData();\n }, [debouncedInputText]);\n\n return (\n
\n setInputText('')}\n onSearch={(e) => setInputText(e.target.value)}\n onSelect={({label}) => setInputText(label || '')}\n isLoading={isLoading}\n clickAwayRef={clickAwayRef}\n typeaheadInputText={inputText}\n allowInternalFilter={false}\n />\n
\n );\n};\n\nWithPaginationAndVirtualizationStory.args = {\n label: 'Search a name',\n menuOpenOffset: 0,\n testId: 'typeahead-with-pagination-and-virtualization-story',\n};\n\nexport const TypeaheadWithRightSlotStory = (args: TypeaheadProps) => {\n const [inputText, setInputText] = React.useState('');\n const [checked, setChecked] = React.useState(false);\n return (\n
\n setInputText(e.target.value)}\n onSelect={(option) => {\n setInputText(option.label);\n }}\n onClear={() => setInputText('')}\n rightSlot={\n \n
\n {\n setChecked(!checked);\n }}\n />\n
\n \n }\n />\n
\n );\n};\n\nTypeaheadWithRightSlotStory.args = {\n label: 'Search a name',\n menu: menuProps,\n testId: 'typeahead-story',\n};\n\nTypeaheadStory.storyName = 'Typeahead';\nAccessibleTypeaheadStory.storyName = 'Accessible (enableA11y)';\nTypeaheadWithTooltipOptionsStory.storyName = 'Typeahead With Tooltip Options';\nWithHeaderAndFooterStory.storyName = 'With Header And Footer';\nWithPaginationAndVirtualizationStory.storyName =\n 'With Pagination And Virtualization';\nTypeaheadWithRightSlotStory.storyName = 'Typeahead With Right Slot';\n" }, "css": { "path": "Typeahead.module.css", "content": "@value (\n sizeFluid\n) from '../../styles/variables/_size.css';\n\n.typeaheadContainer {\n display: flex;\n position: relative;\n flex-flow: column;\n width: sizeFluid;\n height: fit-content;\n}\n\n.menuWrapper {\n width: var(--dropdown-width);\n z-index: var(--menu-elevation);\n}\n\n/* Announced by screen readers (loading / result count) but visually hidden. */\n.visuallyHidden {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n border: 0;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n}\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../components/Typeahead/SimpleTypeahead';\nexport * from '../../components/Typeahead/Typeahead';\n//# sourceMappingURL=index.d.ts.map" }, "additional": { "SimpleTypeahead.d.ts": { "path": "SimpleTypeahead.d.ts", "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nimport type { MenuClassNames, MenuLabelTooltip } from '../../types/menu';\nimport type { ClickAwayRefType } from '../../utils/click-away';\nimport type { InputProps } from '../../components/Input';\nimport type { MenuOption, Virtualization } from '../../components/Menu';\nimport type { ElevationType } from '../../components/Tooltip';\ntype ClassNames = Readonly<{\n wrapper?: string;\n box?: string;\n}>;\nexport interface SimpleTypeaheadRef {\n selectedKeys?: Array;\n}\nexport interface SimpleTypeaheadProps extends Omit {\n isLoading?: boolean;\n menuOpenOffset?: number;\n classNames?: ClassNames;\n options?: Array;\n selectedKeys?: Array;\n menuVirtualization?: Virtualization;\n header?: React.ReactNode;\n footer?: React.ReactNode;\n menuClassNames?: MenuClassNames;\n showLabelTooltip?: MenuLabelTooltip;\n allowWrap?: boolean;\n elevation?: ElevationType;\n onSelect?: (option: MenuOption, arg2?: React.SyntheticEvent | null | undefined) => unknown;\n onSearch?: (evt: React.ChangeEvent) => unknown;\n onMenuOpen?: () => unknown;\n onMenuClose?: () => unknown;\n onClear?: () => void;\n resolveLabel?: (option: MenuOption) => string | React.ReactNode;\n resolveSecondaryLabel?: (option: MenuOption) => string | React.ReactNode;\n clickAwayRef?: React.RefObject;\n allowInternalFilter?: boolean;\n typeaheadInputText?: string;\n /**\n * Opt in to the accessibility behavior of the `Typeahead` this renders: its\n * ARIA roles and state, keyboard navigation of the options, and focus\n * handling on close. Forwarded unchanged.\n *\n * Off by default, and off is this component exactly as it behaved before\n * any of it existed.\n */\n enableA11y?: boolean;\n testId?: string;\n}\nexport declare const SimpleTypeahead: Flow.AbstractComponent;\nexport {};\n//# sourceMappingURL=SimpleTypeahead.d.ts.map" } } }, "allFiles": [ "SimpleTypeahead.stories.tsx", "SimpleTypeahead.tsx", "Typeahead.module.css", "Typeahead.stories.module.css", "Typeahead.stories.tsx", "Typeahead.tsx", "index.ts" ] }, "VoiceOrb": { "name": "VoiceOrb", "path": "src/components/VoiceOrb", "files": { "main": null, "story": null, "css": null, "index": { "path": "index.d.ts", "content": "export * from '../../components/VoiceOrb/Microphone';\nexport * from '../../components/VoiceOrb/VoiceOrb';\n//# sourceMappingURL=index.d.ts.map" }, "additional": { "Microphone/MicIcon.d.ts": { "path": "Microphone/MicIcon.d.ts", "content": "import * as React from 'react';\nexport declare const MicIcon: () => React.JSX.Element;\n//# sourceMappingURL=MicIcon.d.ts.map" }, "Microphone/Microphone.d.ts": { "path": "Microphone/Microphone.d.ts", "content": "import * as React from 'react';\ntype ClassNames = Readonly<{\n barsContainer?: string;\n bar?: string;\n}>;\nexport interface MicrophoneProps {\n classNames?: ClassNames;\n enableMicrophone?: boolean;\n testId?: string;\n}\ndeclare const Microphone: React.FC;\nexport { Microphone };\n//# sourceMappingURL=Microphone.d.ts.map" }, "Microphone/index.d.ts": { "path": "Microphone/index.d.ts", "content": "export * from '../../../components/VoiceOrb/Microphone/Microphone';\n//# sourceMappingURL=index.d.ts.map" }, "VoiceOrb/VoiceOrb.d.ts": { "path": "VoiceOrb/VoiceOrb.d.ts", "content": "import * as React from 'react';\ntype ClassNames = Readonly<{\n container?: string;\n orbContainer?: string;\n orb?: string;\n}>;\nexport interface VoiceOrbHandle {\n setVolume: (volume: number) => void;\n}\nexport interface VoiceOrbProps {\n classNames?: ClassNames;\n /** Enable listening to microphone audio input for bar animation */\n enableMicrophone?: boolean;\n testId?: string;\n loading?: boolean;\n}\nexport declare const VoiceOrb: React.ForwardRefExoticComponent>;\nexport {};\n//# sourceMappingURL=VoiceOrb.d.ts.map" }, "VoiceOrb/index.d.ts": { "path": "VoiceOrb/index.d.ts", "content": "export * from '../../../components/VoiceOrb/VoiceOrb/VoiceOrb';\n//# sourceMappingURL=index.d.ts.map" }, "constants.d.ts": { "path": "constants.d.ts", "content": "export declare const BAR_COUNT = 5;\nexport declare const BASE_HEIGHT = 4;\nexport declare const MAX_MULTIPLIERS: readonly [4, 8, 12, 8, 4];\nexport declare const MIN_SHADOW_BLUR = 0;\nexport declare const MAX_SHADOW_BLUR = 30;\nexport declare const MIN_SHADOW_BLUR_2 = 0;\nexport declare const MAX_SHADOW_BLUR_2 = 50;\nexport declare const MIN_SHADOW_BLUR_3 = 0;\nexport declare const MAX_SHADOW_BLUR_3 = 70;\nexport declare const MIN_OPACITY_1 = 0.3;\nexport declare const MAX_OPACITY_1 = 0.8;\nexport declare const MIN_OPACITY_2 = 0.2;\nexport declare const MAX_OPACITY_2 = 0.6;\nexport declare const MIN_OPACITY_3 = 0.15;\nexport declare const MAX_OPACITY_3 = 0.4;\nexport declare function calculateOrbShadowVars(volume: number): Record;\nexport declare function uuid(): string;\n//# sourceMappingURL=constants.d.ts.map" } } }, "allFiles": [ "Microphone/MicIcon.tsx", "Microphone/Microphone.module.css", "Microphone/Microphone.stories.module.css", "Microphone/Microphone.stories.tsx", "Microphone/Microphone.tsx", "Microphone/index.ts", "VoiceOrb/VoiceOrb.module.css", "VoiceOrb/VoiceOrb.stories.module.css", "VoiceOrb/VoiceOrb.stories.tsx", "VoiceOrb/VoiceOrb.tsx", "VoiceOrb/index.ts", "constants.ts", "index.ts" ] }, "WeekdayPicker": { "name": "WeekdayPicker", "path": "src/components/WeekdayPicker", "files": { "main": { "path": "WeekdayPicker.d.ts", "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nexport declare const WEEKDAY_PICKER_SIZE: Readonly<{\n small: \"small\";\n medium: \"medium\";\n}>;\ntype ClassNames = Readonly<{\n wrapper?: string;\n button?: string;\n label?: string;\n helperText?: string;\n selectedButton?: string;\n}>;\ntype WeekdayPickerSize = (typeof WEEKDAY_PICKER_SIZE)[keyof typeof WEEKDAY_PICKER_SIZE];\nexport interface Weekday {\n key: string;\n label: string;\n secondaryLabel?: string;\n}\nexport interface WeekdayPickerProps {\n size?: WeekdayPickerSize;\n selectedWeekDays?: Array;\n hiddenWeekDays?: Array;\n disabledWeekDays?: Array;\n customDayLabels?: Array;\n onChange?: (selectedDays: Array, arg2?: React.SyntheticEvent | null | undefined) => unknown;\n readOnly?: boolean;\n classNames?: ClassNames;\n showWeekends?: boolean;\n ariaLabel?: string;\n label?: React.ReactNode;\n helperText?: React.ReactNode;\n disableMultiSelect?: boolean;\n testId?: string;\n}\nexport declare const WeekdayPicker: Flow.AbstractComponent;\nexport {};\n//# sourceMappingURL=WeekdayPicker.d.ts.map" }, "story": { "path": "WeekdayPicker.stories.tsx", "content": "import * as React from 'react';\n\nimport type {Weekday, WeekdayPickerProps} from 'src/components/WeekdayPicker';\nimport {WeekdayPicker} from 'src/components/WeekdayPicker/WeekdayPicker';\n\n\nexport default {\n title: 'Form Components/Weekday Picker',\n component: WeekdayPicker,\n tags: ['autodocs'],\n argTypes: {\n size: {\n description: 'The size of the WeekdayPicker, either small or medium.',\n control: {\n type: 'radio',\n },\n options: ['small', 'medium'],\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: 'medium'},\n },\n },\n selectedWeekDays: {\n description: 'The days that are selected by default.',\n control: {type: 'object'},\n table: {\n type: {summary: 'Array<{ key: string, label: string }>'},\n },\n },\n hiddenWeekDays: {\n description: 'Days that should be hidden from the picker.',\n control: {type: 'object'},\n table: {\n type: {summary: 'Array'},\n },\n },\n disabledWeekDays: {\n description: 'Days that are disabled and cannot be selected.',\n control: {type: 'object'},\n table: {\n type: {summary: 'Array'},\n },\n },\n customDayLabels: {\n description: 'Custom labels for the days of the week.',\n control: {type: 'object'},\n table: {\n type: {\n summary:\n 'Array<{ key: string, label: string, secondaryLabel?: string }>',\n },\n },\n },\n showWeekends: {\n description: 'Show or hide weekends (Saturday and Sunday).',\n control: {type: 'boolean'},\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: true},\n },\n },\n readOnly: {\n description: 'If true, the picker becomes non-interactive and read-only.',\n control: {type: 'boolean'},\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: false},\n },\n },\n disableMultiSelect: {\n description: 'If true, only one day can be selected at a time.',\n control: {type: 'boolean'},\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: false},\n },\n },\n onChange: {\n description: 'Callback function triggered when the selected days change.',\n action: 'onChange',\n table: {\n type: {\n summary:\n '(selectedDays: Array, event?: SyntheticEvent) => void',\n },\n },\n },\n label: {\n description: 'Optional label for the picker.',\n control: {type: 'text'},\n table: {\n type: {summary: 'React.Node'},\n },\n },\n helperText: {\n description: 'Optional helper text for the picker.',\n control: {type: 'text'},\n table: {\n type: {summary: 'React.Node'},\n },\n },\n testId: {\n description: 'Test ID for the component',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n },\n parameters: {\n docs: {\n subtitle:\n 'Generates a WeekdayPicker component for selecting days of the week.',\n description: {\n component: `\n\\`\\`\\`js\nimport { WeekdayPicker } from \"@spaced-out/ui-design-system/lib/components/WeekdayPicker\";\n\\`\\`\\`\nThe \\`WeekdayPicker\\` component allows users to select one or multiple days of the week. It supports custom labels, disabled days, hidden days, and customizable size variants. It is also accessible, allowing for read-only mode, keyboard navigation, and ARIA support.\n\n- **Single Selection Mode**: When \\`disableMultiSelect\\` is set to true, only one day can be selected at a time, similar to a radio button group.\n- **Custom Labels**: You can provide custom day labels (e.g., localization).\n- **Disabled Days**: Certain days can be disabled from selection.\n `,\n },\n },\n storySource: {\n componentPath: '/src/components/WeekdayPicker/WeekdayPicker',\n },\n },\n};\n\nexport const WithWeekendDisabledStory = (args: WeekdayPickerProps) => {\n const [selectedDays, setSelectedDays] = React.useState>([]);\n\n return (\n setSelectedDays(days)}\n />\n );\n};\n\nWithWeekendDisabledStory.args = {\n size: 'medium',\n selectedWeekDays: [{key: 'mon', label: 'M'}],\n disabledWeekDays: ['sun', 'sat'],\n showWeekends: true,\n label: 'Select your preferred weekdays',\n helperText: 'Click to select multiple days. Weekends are disabled.',\n testId: 'weekday-picker-weekend-disabled-story',\n};\n\nexport const WithCustomLabelsStory = (args: WeekdayPickerProps) => (\n \n);\n\nWithCustomLabelsStory.args = {\n size: 'medium',\n customDayLabels: [\n {key: 'sun', label: 'Do'},\n {key: 'mon', label: 'Lu'},\n {key: 'tue', label: 'Ma'},\n {key: 'wed', label: 'Mi'},\n {key: 'thu', label: 'Ju'},\n {key: 'fri', label: 'Vi'},\n {key: 'sat', label: 'Sá'},\n ],\n showWeekends: true,\n testId: 'weekday-picker-custom-labels-story',\n};\n\nexport const WithoutWeekendsStory = (args: WeekdayPickerProps) => (\n \n);\n\nWithoutWeekendsStory.args = {\n size: 'medium',\n showWeekends: false,\n testId: 'weekday-picker-without-weekends-story',\n};\n\nexport const ReadOnlyStory = (args: WeekdayPickerProps) => (\n \n);\n\nReadOnlyStory.args = {\n readOnly: true,\n selectedWeekDays: [\n {key: 'mon', label: 'M'},\n {key: 'wed', label: 'W'},\n {key: 'fri', label: 'F'},\n ],\n showWeekends: true,\n testId: 'weekday-picker-read-only-story',\n};\n\nexport const MultipleSelectionStory = (args: WeekdayPickerProps) => {\n const [selectedDays, setSelectedDays] = React.useState([\n {key: 'mon', label: 'M'},\n {key: 'wed', label: 'W'},\n ]);\n\n return (\n setSelectedDays(days)}\n />\n );\n};\n\nMultipleSelectionStory.args = {\n size: 'medium',\n showWeekends: true,\n testId: 'weekday-picker-multiple-selection-story',\n};\n\nexport const DisabledWeekDaysStory = (args: WeekdayPickerProps) => {\n const [selectedDays, setSelectedDays] = React.useState([\n {key: 'wed', label: 'W'},\n ]);\n\n return (\n setSelectedDays(days)}\n />\n );\n};\n\nDisabledWeekDaysStory.args = {\n size: 'medium',\n showWeekends: true,\n disabledWeekDays: ['tue', 'thu'],\n testId: 'weekday-picker-disabled-week-days-story',\n};\n\nexport const SingleSelectionStory = (args: WeekdayPickerProps) => {\n const [selectedDay, setSelectedDay] = React.useState>([]);\n\n return (\n setSelectedDay(days)}\n />\n );\n};\n\nSingleSelectionStory.args = {\n size: 'medium',\n showWeekends: true,\n testId: 'weekday-picker-single-selection-story',\n};\n\nexport const WithHiddenDaysStory = (args: WeekdayPickerProps) => (\n \n);\n\nWithHiddenDaysStory.args = {\n size: 'medium',\n showWeekends: true,\n hiddenWeekDays: ['tue', 'thu'],\n testId: 'weekday-picker-hidden-days-story',\n};\n\nexport const WithWeekdayNamesStory = (args: WeekdayPickerProps) => (\n \n);\n\nWithWeekdayNamesStory.args = {\n size: 'medium',\n customDayLabels: [\n {key: 'sun', label: 'S', secondaryLabel: 'Sun'},\n {key: 'mon', label: 'M', secondaryLabel: 'Mon'},\n {key: 'tue', label: 'T', secondaryLabel: 'Tue'},\n {key: 'wed', label: 'W', secondaryLabel: 'Wed'},\n {key: 'thu', label: 'T', secondaryLabel: 'Thu'},\n {key: 'fri', label: 'F', secondaryLabel: 'Fri'},\n {key: 'sat', label: 'S', secondaryLabel: 'Sat'},\n ],\n testId: 'weekday-picker-weekday-names-story',\n};\nWithWeekendDisabledStory.storyName = 'With Weekend Disabled';\nWithCustomLabelsStory.storyName = 'With Custom Labels';\nWithoutWeekendsStory.storyName = 'Without Weekends';\nReadOnlyStory.storyName = 'Read Only';\nMultipleSelectionStory.storyName = 'Multiple Selection';\nDisabledWeekDaysStory.storyName = 'Disabled Week Days';\nSingleSelectionStory.storyName = 'Single Selection';\nWithHiddenDaysStory.storyName = 'With Hidden Days';\nWithWeekdayNamesStory.storyName = 'With Weekday Names';\n" }, "css": { "path": "WeekdayPicker.module.css", "content": "@value (colorTextSecondary,\n colorFillSecondary,\n colorButtonFillTertiaryHovered,\n colorTextPrimary,\n colorButtonFillPrimaryEnabled,\n colorTextInversePrimary,\n colorButtonFillPrimaryHovered,\n colorTextDisabled,\n colorFillDisabled,\n colorFocusPrimary,\n colorBackgroundSecondary,\n colorGrayLightest) from '../../styles/variables/_color.css';\n\n@value (spaceXXSmall, spaceXSmall, spaceSmall) from '../../styles/variables/_space.css';\n@value (size8, size42, size34) from '../../styles/variables/_size.css';\n\n@value (borderRadiusSmall, borderWidthNone, borderWidthTertiary) from '../../styles/variables/_border.css';\n\n.weekdayPickerContainer {\n display: flex;\n flex-direction: column;\n gap: spaceXXSmall;\n}\n\n.weekdayPickerDays {\n display: flex;\n gap: spaceSmall;\n}\n\n.weekdayButton {\n composes: formLabelSmall from '../../styles/typography.module.css';\n composes: motionEaseInEaseOut from '../../styles/animation.module.css';\n flex-direction: column;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: colorBackgroundSecondary;\n color: colorTextSecondary;\n padding: spaceXSmall spaceSmall;\n border-radius: borderRadiusSmall;\n\n &:hover,\n &:focus-visible {\n background-color: colorGrayLightest;\n color: colorTextPrimary;\n cursor: pointer;\n }\n\n &:focus-visible {\n box-shadow: borderWidthNone borderWidthNone borderWidthNone\n borderWidthTertiary colorFocusPrimary;\n }\n}\n\n.weekdayButtonMedium {\n composes: buttonTextMedium from '../../styles/typography.module.css';\n height: size42;\n width: size42;\n}\n\n.weekdayButtonSmall {\n composes: buttonTextSmall from '../../styles/typography.module.css';\n height: size34;\n width: size34;\n\n .secondaryLabel {\n font-size: size8;\n }\n}\n\n.weekdayButtonSelected {\n background-color: colorButtonFillPrimaryEnabled;\n color: colorTextInversePrimary;\n\n &:hover,\n &:focus-visible {\n background-color: colorButtonFillPrimaryHovered;\n color: colorTextInversePrimary;\n }\n}\n\n.weekdayButtonDisabled {\n background-color: colorFillDisabled;\n color: colorTextDisabled;\n pointer-events: none;\n cursor: not-allowed;\n}\n\n.secondaryLabel {\n composes: bodySmall from '../../styles/typography.module.css';\n color: colorTextSecondary;\n background-color: transparent;\n\n /* Added a transition to .secondaryLabel for smoother and immediate style updates \n during hover or focus-visible states of .secondaryLabelSelected. This ensures the \n change feels intentional, even if there’s a minor rendering delay. */\n transition: background-color 0.1s, color 0.1s, font-size 0.1s;\n}\n\n.secondaryLabelSelected {\n color: colorTextInversePrimary;\n}\n\n.secondaryLabelDisabled {\n background-color: colorFillDisabled;\n color: colorTextDisabled;\n pointer-events: none;\n cursor: not-allowed;\n}\n\n.weekdayLabel {\n composes: formLabelSmall from '../../styles/typography.module.css';\n color: colorTextSecondary;\n}\n\n.weekdayHelperText {\n composes: bodySmall from '../../styles/typography.module.css';\n color: colorTextSecondary;\n}\n\n.weekdayReadOnly {\n pointer-events: none;\n cursor: not-allowed;\n}\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../components/WeekdayPicker/WeekdayPicker';\n//# sourceMappingURL=index.d.ts.map" }, "additional": {} }, "allFiles": [ "WeekdayPicker.module.css", "WeekdayPicker.stories.module.css", "WeekdayPicker.stories.tsx", "WeekdayPicker.tsx", "index.ts" ] } }, "hooks": { "useArbitraryOptionAddition": { "name": "useArbitraryOptionAddition", "path": "src/hooks/useArbitraryOptionAddition", "files": { "main": { "path": "useArbitraryOptionAddition.d.ts", "content": "import type { BaseOption, GroupTitleOption } from '../../hooks/useFilteredOptions';\nexport interface ArbitraryOption {\n key: string;\n label: string;\n arbitrary?: boolean;\n multiArbitrary?: boolean;\n}\nexport declare function useArbitraryOptionAddition({ searchTerm, options, excludedKeys, allowArbitraryValues, allowMultiArbitraryValues, validateArbitraryValue, makeArbitraryValue, makeMultiArbitraryValue, groupTitleOptions, arbitraryGroup, searchOptionsBy, }: {\n searchTerm: string;\n options?: V[];\n excludedKeys?: string[];\n allowArbitraryValues?: boolean;\n allowMultiArbitraryValues?: boolean;\n validateArbitraryValue?: (arg1: string) => boolean;\n makeArbitraryValue?: (arg1: string) => V;\n makeMultiArbitraryValue?: (arg1: string) => V | undefined;\n groupTitleOptions?: GroupTitleOption[];\n arbitraryGroup?: GroupTitleOption;\n searchOptionsBy?: (option: V, searchTerm: string) => boolean;\n}): {\n optionsWithArbitrary: Array;\n groupTitleOptionsWithArbitrary: Array>;\n};\n//# sourceMappingURL=useArbitraryOptionAddition.d.ts.map" }, "story": { "path": "useArbitraryOptionAddition.stories.tsx", "content": "import * as React from 'react';\n\n// Use a plain input to avoid import errors\nimport {useArbitraryOptionAddition} from 'src/hooks/useArbitraryOptionAddition/useArbitraryOptionAddition';\n\nimport {Input} from 'src/components/Input';\nimport type {MenuOption} from 'src/components/Menu';\nimport {Menu} from 'src/components/Menu';\n\nimport css from 'src/hooks/useArbitraryOptionAddition/useArbitraryOptionAddition.stories.module.css';\n\n// Create a type that extends both BaseOption and MenuOption\ninterface ExtendedMenuOption\n extends Omit {\n arbitrary?: boolean;\n multiArbitrary?: boolean;\n}\n\nexport default {\n tags: ['autodocs'],\n title: 'Hooks/useArbitraryOptionAddition',\n component: useArbitraryOptionAddition,\n parameters: {\n docs: {\n description: {\n component: `\n\\`\\`\\`js\nimport { useArbitraryOptionAddition } from \"@spaced-out/ui-design-system/lib/hooks/useArbitraryOptionAddition\";\n\\`\\`\\`\nThe \\`useArbitraryOptionAddition\\` hook allows you to add arbitrary (user-defined) options to a list, such as for tag or token inputs. It works with both flat and grouped options, and supports custom validation and creation logic.\n\n### Parameters\n- \\`searchTerm\\`: The search term to filter the options.\n- \\`options\\`: The options to filter.\n- \\`groupTitleOptions\\`: The grouped options to filter.\n- \\`excludedKeys\\`: The keys to exclude from the options.\n- \\`allowArbitraryValues\\`: Whether to allow arbitrary values. Defaults to \\`true\\`.\n- \\`allowMultiArbitraryValues\\`: Whether to allow multiple arbitrary values. Defaults to \\`false\\`.\n- \\`validateArbitraryValue\\`: The function to validate the arbitrary value. Defaults to \\`(value) => value.trim() !== ''.\\`\n- \\`makeArbitraryValue\\`: The function to make the arbitrary value. Defaults to \\`(searchTerm) => ({key: searchTerm, label: searchTerm, arbitrary: true}).\\`\n- \\`makeMultiArbitraryValue\\`: The function to make the multi-arbitrary value. Defaults to \\`(searchTerm) => ({key: searchTerm, label: searchTerm, multiArbitrary: true}).\\`\n\n\n### Return Type\n- An object with:\n - \\`arbitraryOptionsAdded\\`: The filtered options array, with arbitrary options added if appropriate.\n - \\`arbitraryGroupTitleOptionsAdded\\`: The filtered grouped options array, with arbitrary options added if appropriate.\n\n### Usage\n\\`\\`\\`jsx\nconst { arbitraryOptionsAdded, arbitraryGroupTitleOptionsAdded } = useArbitraryOptionAddition({\n searchTerm,\n options,\n groupTitleOptions,\n excludedKeys,\n allowArbitraryValues,\n allowMultiArbitraryValues,\n validateArbitraryValue,\n makeArbitraryValue,\n makeMultiArbitraryValue,\n});\n\\`\\`\\`\n\n####Note:\n - The \\`arbitraryOptionsAdded\\` and \\`arbitraryGroupTitleOptionsAdded\\` arrays are the filtered options with arbitrary options added if appropriate.\n `,\n },\n },\n },\n};\n\nconst options: ExtendedMenuOption[] = [\n {key: 'apple', label: 'Apple'},\n {key: 'banana', label: 'Banana'},\n {key: 'orange', label: 'Orange'},\n {key: 'grape', label: 'Grape'},\n];\n\nexport const Basic = () => {\n const [searchTerm, setSearchTerm] = React.useState('');\n const {optionsWithArbitrary} = useArbitraryOptionAddition(\n {\n searchTerm,\n options,\n },\n );\n\n return (\n
\n setSearchTerm(String(e.target.value))}\n placeholder=\"Search for fruits\"\n />\n {\n // eslint-disable-next-line no-console\n console.log('Selected:', option);\n }}\n resolveLabel={(option: ExtendedMenuOption) => {\n if (option.arbitrary && option.label) {\n return `Create New \"${option.label}\"`;\n }\n return option.label;\n }}\n />\n
\n );\n};\n\nconst groupTitleOptions = [\n {\n groupTitle: Fruits,\n groupId: 'fruits',\n options: [\n {key: 'apple', label: 'Apple'},\n {key: 'banana', label: 'Banana'},\n {key: 'orange', label: 'Orange'},\n {key: 'grape', label: 'Grape'},\n ] as ExtendedMenuOption[],\n },\n {\n groupTitle: Vegetables,\n groupId: 'vegetables',\n options: [\n {key: 'carrot', label: 'Carrot'},\n {key: 'broccoli', label: 'Broccoli'},\n {key: 'spinach', label: 'Spinach'},\n ] as ExtendedMenuOption[],\n },\n];\n\nexport const Grouped = () => {\n const [searchTerm, setSearchTerm] = React.useState('');\n const {groupTitleOptionsWithArbitrary} =\n useArbitraryOptionAddition({\n searchTerm,\n groupTitleOptions,\n });\n\n return (\n
\n setSearchTerm(String(e.target.value))}\n placeholder=\"Type to add or filter...\"\n />\n {\n // eslint-disable-next-line no-console\n console.log('Selected:', option);\n }}\n resolveLabel={(option: ExtendedMenuOption) => {\n if (option.arbitrary && option.label) {\n return `Create New \"${option.label}\"`;\n }\n return option.label;\n }}\n />\n
\n );\n};\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../hooks/useArbitraryOptionAddition/useArbitraryOptionAddition';\n//# sourceMappingURL=index.d.ts.map" } }, "allFiles": [ "index.ts", "useArbitraryOptionAddition.stories.module.css", "useArbitraryOptionAddition.stories.tsx", "useArbitraryOptionAddition.ts" ] }, "useAudioAnalyzer": { "name": "useAudioAnalyzer", "path": "src/hooks/useAudioAnalyzer", "files": { "main": { "path": "useAudioAnalyzer.d.ts", "content": "export interface AudioAnalyzerOptions {\n /** Enable/disable audio analysis */\n isListening: boolean;\n /** Optional external MediaStream to use */\n audioStream?: MediaStream | null;\n /** Number of bars to generate intensity values for */\n barCount?: number;\n /** Smoothing factor for the analyzer (0-1) */\n smoothingTimeConstant?: number;\n /** FFT size for frequency analysis */\n fftSize?: number;\n /** Called on every rAF tick with computed intensities -- can use for imperative DOM updates */\n onAnalyze?: (intensities: number[]) => void;\n /** Minimum ms between state updates (throttle). Default 50 (~20fps). */\n updateIntervalMs?: number;\n}\nexport interface AudioAnalyzerResult {\n /** Whether the audio stream is active */\n isActive: boolean;\n /** Any error that occurred */\n error: Error | null;\n}\nexport declare const useAudioAnalyzer: {\n (options: AudioAnalyzerOptions): AudioAnalyzerResult;\n displayName: string;\n};\n//# sourceMappingURL=useAudioAnalyzer.d.ts.map" }, "story": { "path": "useAudioAnalyzer.stories.tsx", "content": "import * as React from 'react';\n\nimport type {MicrophoneProps} from 'src/components/VoiceOrb/Microphone/Microphone';\nimport {Microphone} from 'src/components/VoiceOrb/Microphone/Microphone';\n\nimport css from 'src/hooks/useAudioAnalyzer/useAudioAnalyzer.stories.module.css';\n\n\nconst meta = {\n tags: ['autodocs'],\n title: 'Hooks/useAudioAnalyzer',\n component: Microphone,\n argTypes: {\n enableMicrophone: {\n description:\n 'When **true**, activates the microphone and begins audio analysis.',\n control: {type: 'boolean'},\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n classNames: {\n description:\n 'Optional classNames to customize internal elements of the Microphone visualizer.',\n control: {type: 'object'},\n table: {\n type: {summary: '{ barsContainer?: string; bar?: string }'},\n },\n },\n testId: {\n description: 'Base test id used to generate element-specific test ids.',\n control: {type: 'text'},\n table: {\n type: {summary: 'string'},\n },\n },\n },\n parameters: {\n docs: {\n subtitle:\n 'Analyzes microphone audio input and delivers intensity values via callback.',\n description: {\n component: `\n\\`\\`\\`js\nimport { useAudioAnalyzer } from \"@spaced-out/ui-design-system/lib/hooks/useAudioAnalyzer\";\n\\`\\`\\`\nA hook that captures microphone audio (or accepts an external \\`MediaStream\\`), runs FFT frequency analysis,\nand delivers normalised intensity values (0–1) via an \\`onAnalyze\\` callback on every animation frame.\nThe example below uses the \\`Microphone\\` component which consumes \\`useAudioAnalyzer\\` internally to render animated level bars.\\n\n__NOTE__: \nMic Permission will not work in non-secure contexts (storybook dev mode - http).\n\n### Options\n- \\`isListening\\`: Enable/disable audio analysis.\n- \\`audioStream\\` (optional): An external \\`MediaStream\\` to analyse instead of the default microphone.\n- \\`barCount\\` (optional): Number of intensity values to produce. Default \\`5\\`.\n- \\`smoothingTimeConstant\\` (optional): Smoothing factor for the analyser (0–1). Default \\`0.8\\`.\n- \\`fftSize\\` (optional): FFT size for frequency analysis. Default \\`256\\`.\n- \\`onAnalyze\\` (optional): Callback invoked on every animation frame with computed intensities — use for imperative DOM updates.\n- \\`updateIntervalMs\\` (optional): Minimum ms between \\`onAnalyze\\` invocations (throttle). Default \\`50\\` (~20 fps).\n\n### Return Value\n- \\`isActive\\`: Whether the audio stream is currently active.\n- \\`error\\`: Any error that occurred (e.g. microphone permission denied).\n\n### Usage\n\\`\\`\\`jsx\nimport { useCallback, useRef } from \"react\";\nimport { useAudioAnalyzer } from \"@spaced-out/ui-design-system/lib/hooks/useAudioAnalyzer\";\n\nconst BAR_COUNT = 5;\nconst BASE_HEIGHT = 4;\n\nconst AudioVisualizer = () => {\n const barsRef = useRef(null);\n\n const onAnalyze = useCallback((intensities) => {\n const container = barsRef.current;\n if (!container) return;\n const bars = container.children;\n for (let i = 0; i < intensities.length; i++) {\n bars[i].style.height = BASE_HEIGHT + intensities[i] * 40 + \"px\";\n }\n }, []);\n\n const { isActive, error } = useAudioAnalyzer({\n isListening: true,\n barCount: BAR_COUNT,\n onAnalyze,\n });\n\n if (error) return Error: {error.message};\n\n return (\n
\n {Array.from({ length: BAR_COUNT }, (_, i) => (\n \n ))}\n
\n );\n};\n\\`\\`\\`\n `,\n },\n },\n storySource: {\n componentPath: '/src/hooks/useAudioAnalyzer/useAudioAnalyzer.tsx',\n },\n },\n};\n\nexport default meta;\n\nexport const _useAudioAnalyzer = {\n render: (args: MicrophoneProps) => (\n
\n \n
\n ),\n args: {\n enableMicrophone: true,\n classNames: {},\n testId: 'use-audio-analyzer',\n },\n};\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../hooks/useAudioAnalyzer/useAudioAnalyzer';\n//# sourceMappingURL=index.d.ts.map" } }, "allFiles": [ "index.ts", "useAudioAnalyzer.stories.module.css", "useAudioAnalyzer.stories.tsx", "useAudioAnalyzer.tsx" ] }, "useCopyToClipboard": { "name": "useCopyToClipboard", "path": "src/hooks/useCopyToClipboard", "files": { "main": { "path": "useCopyToClipboard.d.ts", "content": "type CopiedValue = string | null;\ntype CopyFn = (text: string) => Promise;\nexport declare function useCopyToClipboard(): [CopiedValue, CopyFn];\nexport {};\n//# sourceMappingURL=useCopyToClipboard.d.ts.map" }, "story": { "path": "useCopyToClipboard.stories.tsx", "content": "import React from 'react';\n\nimport {useCopyToClipboard} from 'src/hooks/useCopyToClipboard/useCopyToClipboard';\n\nimport {Button} from 'src/components/Button';\nimport {BodyLarge} from 'src/components/Text';\n\nimport css from 'src/hooks/useCopyToClipboard/useCopyToClipboard.stories.module.css';\n\n\nexport default {\n tags: ['autodocs'],\n title: 'Hooks/useCopyToClipboard',\n component: useCopyToClipboard,\n parameters: {\n docs: {\n description: {\n component: `\n\\`\\`\\`js\nimport { useCopyToClipboard } from \"@spaced-out/ui-design-system/lib/hooks/useCopyToClipboard\";\n\\`\\`\\`\nThe \\`useCopyToClipboard\\` hook is a custom hook that provides functionality for copying text to the clipboard.\nIt returns a state value indicating whether the text was successfully copied, as well as a function to initiate the copy operation.\n\n### State Returned\n- \\`copiedText\\`: The text that was successfully copied. Returns \\`null\\` if the copy operation failed.\n\n### Function Returned\n- \\`copy\\`: A function that takes a string argument and attempts to copy it to the clipboard. Returns a promise that resolves to a boolean indicating the success of the copy operation.\n\n### Usage\n\\`\\`\\`jsx\nimport { useCopyToClipboard } from './useCopyToClipboard';\n\nconst MyComponent = () => {\n const [copiedText, copy] = useCopyToClipboard();\n const text = 'A quick brown fox jumps over the lazy dog';\n\n const handleCopy = () => {\n copy(text)\n .then((success) => {\n if (success) {\n // Success handling\n } else {\n // Error handling\n }\n })\n .catch((_error) => {\n // Error handling\n });\n };\n\n return (\n
\n
\n Text to copy:\n {text}\n
\n \n {copiedText &&
Copied: {copiedText}
}\n
\n );\n};\n\nexport default MyComponent;\n\\`\\`\\`\n `,\n },\n },\n },\n};\n\nexport const Example = (): React.ReactElement> => {\n const [copiedText, copy] = useCopyToClipboard();\n const text = 'A quick brown fox jumps over the lazy dog';\n\n const handleCopy = () => {\n copy(text)\n .then((success) => {\n if (success) {\n // Success handling\n } else {\n // Error handling\n }\n })\n .catch((_error) => {\n // Error handling\n });\n };\n\n return (\n
\n
\n Text to copy: {text}\n
\n \n {copiedText && (\n \n Copied: {copiedText}\n \n )}\n
\n );\n};\n\nExample.parameters = {\n docs: {\n page: false,\n },\n};\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../hooks/useCopyToClipboard/useCopyToClipboard';\n//# sourceMappingURL=index.d.ts.map" } }, "allFiles": [ "index.ts", "useCopyToClipboard.stories.module.css", "useCopyToClipboard.stories.tsx", "useCopyToClipboard.ts" ] }, "useDebounce": { "name": "useDebounce", "path": "src/hooks/useDebounce", "files": { "main": { "path": "useDebounce.d.ts", "content": "export declare const useDebounce: (value: T, delay: number) => T;\n//# sourceMappingURL=useDebounce.d.ts.map" }, "story": { "path": "useDebounce.stories.tsx", "content": "import * as React from 'react';\n\nimport {useDebounce} from 'src/hooks/useDebounce/useDebounce';\n\nimport type {InputProps} from 'src/components/Input/Input';\nimport {Input} from 'src/components/Input/Input';\nimport {BodyLarge} from 'src/components/Text';\n\nimport css from 'src/hooks/useDebounce/useDebounce.stories.module.css';\n\n\nexport default {\n tags: ['autodocs'],\n title: 'Hooks/useDebounce',\n component: useDebounce,\n parameters: {\n docs: {\n description: {\n component: `\n\\`\\`\\`js\nimport { useDebounce } from \"@spaced-out/ui-design-system/lib/hooks/useDebounce\";\n\\`\\`\\`\nThe \\`useDebounce\\` hook is a custom hook that delays updating a value until after a specified delay period has passed since the last change.\n\n### Props Accepted\n- \\`value\\`: The value that needs to be debounced.\n- \\`delay\\`: The debounce delay time in milliseconds. Defaults to 300ms.\n\n### Props Returned\n- \\`debouncedValue\\`: The debounced value, updated after the specified delay.\n\n### Usage\n\\`\\`\\`jsx\nimport { useDebounce } from './useDebounce';\n\nconst MyComponent = () => {\n const [inputValue, setInputValue] = useState('');\n const debouncedValue = useDebounce(inputValue, 500);\n\n return (\n
\n setInputValue(e.target.value)}\n placeholder=\"Type something...\"\n />\n {debouncedValue}\n
\n );\n};\n\nexport default MyComponent;\n\\`\\`\\`\n `,\n },\n },\n },\n};\n\nexport const ExampleStory = (\n args: InputProps,\n): React.ReactElement> => {\n const [value, setValue] = React.useState(args.value);\n const debouncedValue = useDebounce(value, 500);\n\n return (\n
\n setValue(e.target.value)}\n />\n {debouncedValue}\n
\n );\n};\n\nExampleStory.args = {\n type: 'text',\n size: 'medium',\n label: 'Form Label',\n value: '',\n placeholder: 'Input Some text here',\n};\nExampleStory.storyName = 'Example';\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../hooks/useDebounce/useDebounce';\n//# sourceMappingURL=index.d.ts.map" } }, "allFiles": [ "index.ts", "useDebounce.stories.module.css", "useDebounce.stories.tsx", "useDebounce.ts" ] }, "useFileUpload": { "name": "useFileUpload", "path": "src/hooks/useFileUpload", "files": { "main": { "path": "useFileUpload.d.ts", "content": "import { type DropzoneInputProps, type DropzoneRootProps } from 'react-dropzone';\nimport type { FileObject, FileProgress, FileUploadBaseProps } from '../../components/FileUpload';\ntype GetRootProps = (props?: T) => T;\ntype GetInputProps = (props?: T) => T;\nexport interface UseFileUploadReturnProps {\n validFiles: Array;\n rejectedFiles: Array;\n isDragActive: boolean;\n shouldAcceptFiles: boolean;\n getRootProps: GetRootProps;\n getInputProps: GetInputProps;\n handleFileClear: (id: string) => void;\n handleClear: () => void;\n moveFileToProgress: (id: string, progress: FileProgress) => void;\n moveFileToSuccess: (id: string, successMessage?: string) => void;\n moveFileToReject: (id: string, rejectReason?: string) => void;\n setShowReUpload: (id: string, showReUpload?: boolean) => void;\n}\nexport declare const useFileUpload: ({ maxFiles, maxSize, accept, disabled, onValidFilesDrop, onRejectedFilesDrop, onFileClear, onClear, }: FileUploadBaseProps) => UseFileUploadReturnProps;\nexport {};\n//# sourceMappingURL=useFileUpload.d.ts.map" }, "story": { "path": "useFileUpload.stories.tsx", "content": "import React from 'react';\n\nimport {useFileUpload} from 'src/hooks/useFileUpload/useFileUpload';\n\nimport {Button} from 'src/components/Button';\nimport {Card} from 'src/components/Card';\nimport {Dropdown} from 'src/components/Dropdown';\nimport {ClickableIcon, Icon} from 'src/components/Icon';\nimport {LinearLoader} from 'src/components/LinearLoader';\nimport type {MenuOption} from 'src/components/Menu';\nimport {BodyLarge, BodySmall} from 'src/components/Text';\nimport {Truncate} from 'src/components/Truncate';\n\nimport css from 'src/hooks/useFileUpload/useFileUpload.stories.module.css';\n\n\nexport default {\n tags: ['autodocs'],\n title: 'Hooks/useFileUpload',\n component: useFileUpload,\n parameters: {\n docs: {\n description: {\n component: `\n\\`\\`\\`js\nimport { useFileUpload } from \"@spaced-out/ui-design-system/lib/hooks/useFileUpload\";\n\\`\\`\\`\nThe \\`useFileUpload\\` hook is a custom hook that provides functionality for handling file uploads.\nIt allows you to manage the state of selected files, handle file validation and rejection,\nand perform various actions on the files.\n\n### Props Accepted\n- \\`maxFiles\\` (optional): The maximum number of files that can be selected. Defaults to 1.\n- \\`maxSize\\` (optional): The maximum size of the file that can be uploaded, in bytes.\n- \\`accept\\` (optional): An object specifying accepted file types. The keys are MIME types, and the values are arrays of file extensions.\n- \\`disabled\\` (optional): If set to \\`true\\`, the file upload functionality is disabled.\n- \\`onValidFilesDrop\\` (optional): A callback function called when valid files are selected or dropped. Receives an array of accepted files.\n- \\`onRejectedFilesDrop\\` (optional): A callback function called when files are rejected due to validation errors. Receives an array of rejected files.\n- \\`onFileClear\\` (optional): A callback function called when a file is cleared. Receives the ID of the cleared file.\n- \\`onClear\\` (optional): A callback function called when all files are cleared.\n\n### Props Returned\n- \\`validFiles\\`: An array of valid files that have been selected.\n- \\`rejectedFiles\\`: An array of rejected files with associated rejection reasons.\n- \\`isDragActive\\`: A boolean indicating whether a file is being dragged over the dropzone.\n- \\`shouldAcceptFiles\\`: A function that returns whether the dropzone should accept files based on the current state.\n- \\`getRootProps\\`: A function that returns props to be spread onto the dropzone container element.\n- \\`getInputProps\\`: A function that returns props to be spread onto the file input element.\n- \\`handleFileClear\\`: A function to clear a specific file from the selected files.\n- \\`handleClear\\`: A function to clear all selected files.\n- \\`moveFileToProgress\\`: A function to move a file to the progress state. Accepts the file ID and progress value.\n- \\`moveFileToSuccess\\`: A function to move a file to the success state. Accepts the file ID and optional success message.\n- \\`moveFileToReject\\`: A function to move a file to the reject state. Accepts the file ID and optional reject reason.\n- \\`setShowReUpload\\`: A function to set the \\`showReUpload\\` property of a file. Accepts the file ID and optional boolean value.\n\n### Usage\n\\`\\`\\`jsx\nimport { useFileUpload } from './useFileUpload';\n\nexport const Example = (): React$Element<'div'> => {\n const [selectedFile, setSelectedFile] = React.useState(null);\n const { validFiles, rejectedFiles, isDragActive, shouldAcceptFiles, getRootProps, getInputProps, handleFileClear, handleClear, moveFileToProgress, moveFileToSuccess, moveFileToReject, } = useFileUpload({\n maxFiles: 5,\n maxSize: 5242880, // 5MB\n accept: {\n 'image/*': ['.jpg', '.jpeg', '.png'],\n 'audio/*': ['.mp3', '.wav'],\n },\n disabled: false,\n onValidFilesDrop: (acceptedFiles) => {\n console.error('Valid files selected:', acceptedFiles);\n },\n onRejectedFilesDrop: (fileRejections) => {\n console.error('Rejected files:', fileRejections);\n },\n onFileClear: (id) => {\n console.error('File cleared:', id);\n },\n onClear: () => {\n console.error('All files cleared');\n },\n });\n\n return (\n
\n {/* Render the dropzone area */}\n
\n
\n \n {isDragActive ? (\n Drop the files here...\n ) : (\n \n Drag and drop files here or click to select files\n \n )}\n
\n\n {/* Render the clear all files button */}\n {[...validFiles, ...rejectedFiles].length > 0 && (\n
\n \n
\n )}\n\n {/* Render the list of valid files */}\n {validFiles.length > 0 && (\n <>\n Valid Files:\n \n
    \n {validFiles.map((file) => (\n
  • \n
    \n \n \n {file.file.name} - {file.file.size} bytes{' '}\n \n \n handleFileClear(file.id)}\n >\n
    \n {file.success && (\n
    \n \n \n {file.successMessage}\n \n
    \n )}\n {!!file.progress && (\n
    \n \n
    \n )}\n
    • \n ))}\n
\n \n \n )}\n\n {/* Render the list of rejected files */}\n {rejectedFiles.length > 0 && (\n <>\n Rejected Files:\n \n
    \n {rejectedFiles.map((file) => (\n
  • \n
    \n \n \n {file.file.name} - {file.file.size} bytes{' '}\n \n \n handleFileClear(file.id)}\n >\n
    \n {file.reject && (\n
    \n \n \n {file.rejectReason}\n \n
    \n )}\n {!!file.progress && (\n
    \n \n
    \n )}\n
    • \n ))}\n
\n \n \n )}\n\n {[...validFiles, ...rejectedFiles].length > 0 && (\n
\n ({\n key: option.id,\n label: option.file.name,\n })),\n }}\n onChange={(option) => setSelectedFile(option)}\n >\n {!!selectedFile?.key && (\n
\n \n selectedFile.key &&\n moveFileToSuccess(\n selectedFile.key,\n 'Your custom Success Message',\n )\n }\n >\n Move to Success\n \n \n selectedFile.key &&\n moveFileToReject(\n selectedFile.key,\n 'Your custom reject reason',\n )\n }\n >\n Move to Reject\n \n \n selectedFile.key &&\n moveFileToProgress(\n selectedFile.key,\n ([...validFiles, ...rejectedFiles].find(\n (op) => op.id === selectedFile.key,\n )?.progress || 0) + 10,\n )\n }\n >\n Set Progress + 10\n \n
\n )}\n
\n )}\n
\n
\n );\n};\n\nexport default MyComponent;\n\\`\\`\\`\n `,\n },\n },\n },\n};\n\nexport const Example = (): React.ReactElement> => {\n const [selectedFile, setSelectedFile] = React.useState<\n MenuOption | null | undefined\n >(null);\n const {\n validFiles,\n rejectedFiles,\n isDragActive,\n getRootProps,\n getInputProps,\n handleFileClear,\n handleClear,\n moveFileToProgress,\n moveFileToSuccess,\n moveFileToReject,\n } = useFileUpload({\n maxFiles: 5,\n maxSize: 5242880, // 5MB\n accept: {\n 'image/*': ['.jpg', '.jpeg', '.png'],\n 'audio/*': ['.mp3', '.wav'],\n },\n disabled: false,\n onValidFilesDrop: (acceptedFiles) => {\n console.error('Valid files selected:', acceptedFiles);\n },\n onRejectedFilesDrop: (fileRejections) => {\n console.error('Rejected files:', fileRejections);\n },\n onFileClear: (id) => {\n console.error('File cleared:', id);\n },\n onClear: () => {\n console.error('All files cleared');\n },\n });\n\n return (\n
\n {/* Render the dropzone area */}\n
\n
\n \n {isDragActive ? (\n Drop the files here...\n ) : (\n \n Drag and drop files here or click to select files\n \n )}\n
\n\n {/* Render the clear all files button */}\n {[...validFiles, ...rejectedFiles].length > 0 && (\n
\n \n
\n )}\n\n {/* Render the list of valid files */}\n {validFiles.length > 0 && (\n <>\n Valid Files:\n \n
\n {validFiles.map((file) => (\n
\n
\n {file.success && (\n \n )}\n \n \n {file.file.name} - {file.file.size} bytes{' '}\n \n \n handleFileClear(file.id)}\n >\n
\n\n {file.successMessage && (\n
\n \n {file.successMessage}\n \n
\n )}\n\n {!!file.progress && (\n
\n \n
\n )}\n
\n ))}\n
\n \n \n )}\n\n {/* Render the list of rejected files */}\n {rejectedFiles.length > 0 && (\n <>\n Rejected Files:\n \n
\n {rejectedFiles.map((file) => (\n
\n
\n {file.reject && }\n \n \n {file.file.name} - {file.file.size} bytes{' '}\n \n \n handleFileClear(file.id)}\n >\n
\n\n {!!file.rejectReason && (\n
\n \n {file.rejectReason}\n \n
\n )}\n\n {!!file.progress && (\n
\n \n
\n )}\n
\n ))}\n
\n \n \n )}\n\n {[...validFiles, ...rejectedFiles].length > 0 && (\n
\n ({\n key: option.id,\n label: option.file.name,\n })),\n }}\n onChange={(option) => setSelectedFile(option)}\n >\n {!!selectedFile?.key && (\n
\n \n selectedFile.key &&\n moveFileToSuccess(\n selectedFile.key,\n 'Your custom Success Message',\n )\n }\n >\n Move to Success\n \n \n selectedFile.key &&\n moveFileToReject(\n selectedFile.key,\n 'Your custom reject reason',\n )\n }\n >\n Move to Reject\n \n \n selectedFile.key &&\n moveFileToProgress(selectedFile.key, 'indeterminate')\n }\n >\n Set Progress + 10\n \n
\n )}\n
\n )}\n
\n
\n );\n};\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../hooks/useFileUpload/useFileUpload';\n//# sourceMappingURL=index.d.ts.map" } }, "allFiles": [ "index.ts", "useFileUpload.stories.module.css", "useFileUpload.stories.tsx", "useFileUpload.ts" ] }, "useFilteredOptions": { "name": "useFilteredOptions", "path": "src/hooks/useFilteredOptions", "files": { "main": { "path": "useFilteredOptions.d.ts", "content": "import * as React from 'react';\nexport interface GroupTitleOption {\n groupTitle: React.ReactNode;\n options?: V[];\n showLineDivider?: boolean;\n}\nexport interface BaseOption {\n key: string;\n label?: string;\n}\nexport declare function useFilteredOptions({ searchTerm, options, excludedKeys, groupTitleOptions, searchOptionsBy, }: {\n searchTerm: string;\n options?: V[];\n groupTitleOptions?: GroupTitleOption[];\n excludedKeys?: string[];\n searchOptionsBy?: (option: V, searchTerm: string) => boolean;\n}): {\n filteredOptions: V[];\n filteredGroupTitleOptions: GroupTitleOption[];\n};\n//# sourceMappingURL=useFilteredOptions.d.ts.map" }, "story": { "path": "useFilteredOptions.stories.tsx", "content": "import * as React from 'react';\n\nimport type {GroupTitleOption} from 'src/hooks/useFilteredOptions/useFilteredOptions';\nimport {useFilteredOptions} from 'src/hooks/useFilteredOptions/useFilteredOptions';\n\nimport {Input} from 'src/components/Input';\nimport type {MenuOption} from 'src/components/Menu';\nimport {Menu} from 'src/components/Menu';\n\nimport css from 'src/hooks/useFilteredOptions/useFilteredOptions.stories.module.css';\n\n\nexport default {\n tags: ['autodocs'],\n title: 'Hooks/useFilteredOptions',\n component: useFilteredOptions,\n parameters: {\n docs: {\n description: {\n component: `\n\\`\\`\\`js\nimport { useFilteredOptions } from \"@spaced-out/ui-design-system/lib/hooks/useFilteredOptions\";\n\\`\\`\\`\nThe \\`useFilteredOptions\\` hook provides a way to filter a flat or grouped list of options based on a search term and excluded keys.\n\n### Parameters\n- \\`searchTerm\\`: The string to filter options by.\n- \\`options\\`: (optional) Flat array of options.\n- \\`groupTitleOptions\\`: (optional) Array of grouped options.\n- \\`excludedKeys\\`: (optional) Array of keys to exclude from results.\n- \\`searchOptionsBy\\`: (optional) Custom filter function.\n\n### Return Type\n- An object with:\n - \\`filteredOptions\\`: The filtered flat options array.\n - \\`filteredGroupTitleOptions\\`: The filtered grouped options array.\n\n### Usage\n\\`\\`\\`jsx\nconst { filteredOptions, filteredGroupTitleOptions } = useFilteredOptions({\n searchTerm,\n options,\n groupTitleOptions,\n excludedKeys,\n searchOptionsBy,\n});\n\\`\\`\\`\n\n- \\`searchTerm\\`: The string to filter options by.\n- \\`options\\`: (optional) Flat array of options.\n- \\`groupTitleOptions\\`: (optional) Array of grouped options.\n- \\`excludedKeys\\`: (optional) Array of keys to exclude from results.\n- \\`searchOptionsBy\\`: (optional) Custom filter function.\n\nSee the examples below for both flat and grouped options.\n `,\n },\n },\n },\n};\n\nconst options: MenuOption[] = [\n {key: 'apple', label: 'Apple'},\n {key: 'banana', label: 'Banana'},\n {key: 'orange', label: 'Orange'},\n {key: 'grape', label: 'Grape'},\n];\n\nexport const Basic = () => {\n const [searchTerm, setSearchTerm] = React.useState('');\n const {filteredOptions} = useFilteredOptions({\n searchTerm,\n options,\n });\n\n return (\n
\n setSearchTerm(e.target.value)}\n placeholder=\"Search fruits...\"\n />\n\n {\n // You can add a handler here if you want to show selection\n // For demo, just log the selected option\n // eslint-disable-next-line no-console\n console.log('Selected:', option);\n }}\n />\n
\n );\n};\n\nconst groupTitleOptions: GroupTitleOption[] = [\n {\n groupTitle: Fruits,\n options: [\n {key: 'apple', label: 'Apple'},\n {key: 'banana', label: 'Banana'},\n {key: 'orange', label: 'Orange'},\n {key: 'grape', label: 'Grape'},\n ],\n },\n {\n groupTitle: Vegetables,\n options: [\n {key: 'carrot', label: 'Carrot'},\n {key: 'broccoli', label: 'Broccoli'},\n {key: 'spinach', label: 'Spinach'},\n ],\n },\n];\n\nexport const Grouped = () => {\n const [searchTerm, setSearchTerm] = React.useState('');\n const {filteredGroupTitleOptions} = useFilteredOptions({\n searchTerm,\n groupTitleOptions,\n });\n\n return (\n
\n setSearchTerm(e.target.value)}\n placeholder=\"Search fruits or vegetables...\"\n />\n {\n // eslint-disable-next-line no-console\n console.log('Selected:', option);\n }}\n />\n
\n );\n};\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../hooks/useFilteredOptions/useFilteredOptions';\n//# sourceMappingURL=index.d.ts.map" } }, "allFiles": [ "index.ts", "useFilteredOptions.stories.module.css", "useFilteredOptions.stories.tsx", "useFilteredOptions.ts" ] }, "useInfiniteScroll": { "name": "useInfiniteScroll", "path": "src/hooks/useInfiniteScroll", "files": { "main": { "path": "useInfiniteScroll.d.ts", "content": "interface InfiniteScrollOptions {\n itemSize: number | ((index: number) => number);\n threshold: number;\n itemsLength: number;\n hasNextPage: boolean;\n loadMoreItems: () => Promise;\n containerHeight: number;\n isVariableSizeList?: boolean;\n}\nexport declare function useInfiniteScroll({ itemSize, threshold, itemsLength, hasNextPage, loadMoreItems, containerHeight, isVariableSizeList, }: InfiniteScrollOptions): (scrollData: {\n scrollOffset: number;\n scrollDirection: 'forward' | 'backward';\n}) => void;\nexport {};\n//# sourceMappingURL=useInfiniteScroll.d.ts.map" }, "story": null, "index": { "path": "index.d.ts", "content": "export * from '../../hooks/useInfiniteScroll/useInfiniteScroll';\n//# sourceMappingURL=index.d.ts.map" } }, "allFiles": [ "index.ts", "useInfiniteScroll.ts" ] }, "useInputState": { "name": "useInputState", "path": "src/hooks/useInputState", "files": { "main": { "path": "useInputState.d.ts", "content": "import * as React from 'react';\ntype ReturnType = [\n string,\n (event: React.ChangeEvent) => void\n];\n/**\n * Simple Hook to use with input tag. The primary purpose is an abstraction over input onChange property.\n * () => {\n * const [value, onChange] = useInputState(\"\");\n *\n * return ;\n * }\n */\nexport declare const useInputState: (initialState?: string) => ReturnType;\nexport {};\n//# sourceMappingURL=useInputState.d.ts.map" }, "story": { "path": "useInputState.stories.tsx", "content": "import * as React from 'react';\n\nimport {useInputState} from 'src/hooks/useInputState/useInputState';\n\nimport {Input} from 'src/components/Input';\nimport {BodyLarge} from 'src/components/Text';\n\nimport css from 'src/hooks/useInputState/useInputState.stories.module.css';\n\n\nexport default {\n tags: ['autodocs'],\n title: 'Hooks/useInputState',\n component: useInputState,\n parameters: {\n docs: {\n description: {\n component: `\n\\`\\`\\`js\nimport { useInputState } from \"@spaced-out/ui-design-system/lib/hooks/useInputState\";\n\\`\\`\\`\nThe \\`useInputState\\` hook is a simple hook that provides state management for input elements.\nIt abstracts the onChange property of the input and returns the current value and a callback function to update it.\n\n### Return Type\n- An array with two elements:\n - \\`value\\`: The current value of the input.\n - \\`onChange\\`: A callback function to handle changes in the input value.\n\n### Usage\n\\`\\`\\`jsx\nimport { useInputState } from './useInputState';\n\nconst MyComponent = () => {\n const [value, onChange] = useInputState('');\n\n return (\n
\n \n Value: {value}\n
\n );\n};\n\nexport default MyComponent;\n\\`\\`\\`\n `,\n },\n },\n },\n};\n\nexport const Example = () => {\n const [value, onChange] = useInputState('');\n\n return (\n
\n \n Value: {value}\n
\n );\n};\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../hooks/useInputState/useInputState';\n//# sourceMappingURL=index.d.ts.map" } }, "allFiles": [ "index.ts", "useInputState.stories.module.css", "useInputState.stories.tsx", "useInputState.ts" ] }, "useInteractionModality": { "name": "useInteractionModality", "path": "src/hooks/useInteractionModality", "files": { "main": { "path": "useInteractionModality.d.ts", "content": "export type InteractionModality = 'keyboard' | 'pointer';\n/**\n * Begin tracking. Idempotent, and session-scoped by design: the listeners live\n * for the life of the page, so there is nothing to tear down.\n *\n * Tracking has to start BEFORE the thing that wants the answer exists. The\n * interesting question is \"how was the popup that just mounted opened?\", and the\n * keypress that opened it happened while the popup did not yet exist — so a\n * component reading this on mount is always too late to have attached the\n * listener itself. Whatever renders earlier and knows a popup may follow — a\n * menu trigger — primes it.\n *\n * It is not primed on import. Attaching document listeners is a side effect, and\n * a consumer that has not opted into any of this should get none: an app merely\n * importing a component from this package must not start listening to its\n * keyboard. Capture phase, so the modality is recorded before any component\n * handler reacts to the same event.\n */\nexport declare const startInteractionModalityTracking: () => void;\n/**\n * How the user last interacted with the page, read imperatively.\n *\n * Use this when the answer is needed during render or in an effect rather than\n * as reactive state — for example a popup deciding on mount whether it was opened\n * by keyboard, where re-rendering on later modality changes would be wrong.\n */\nexport declare const getInteractionModality: () => InteractionModality;\n/**\n * How the user last interacted with the page, as reactive state. Re-renders the\n * caller when the user switches between keyboard and pointer.\n */\nexport declare const useInteractionModality: (\n/**\n * Subscribe at all. False leaves the caller on the default and attaches\n * nothing — for a component whose consumer has not opted into the behavior\n * this modality serves.\n */\nenabled?: boolean) => InteractionModality;\n//# sourceMappingURL=useInteractionModality.d.ts.map" }, "story": null, "index": { "path": "index.d.ts", "content": "export * from '../../hooks/useInteractionModality/useInteractionModality';\n//# sourceMappingURL=index.d.ts.map" } }, "allFiles": [ "index.ts", "useInteractionModality.ts" ] }, "useLockedBody": { "name": "useLockedBody", "path": "src/hooks/useLockedBody", "files": { "main": { "path": "useLockedBody.d.ts", "content": "type ReturnType = [boolean, (locked: boolean) => void];\nexport declare function useLockedBody(initialLocked?: boolean): ReturnType;\nexport {};\n//# sourceMappingURL=useLockedBody.d.ts.map" }, "story": { "path": "useLockedBody.stories.tsx", "content": "import React from 'react';\n\nimport {useLockedBody} from 'src/hooks/useLockedBody/useLockedBody';\n\nimport {Button} from 'src/components/Button';\n\nimport css from 'src/hooks/useLockedBody/useLockedBody.stories.module.css';\n\n\nexport default {\n tags: ['autodocs'],\n title: 'Hooks/useLockedBody',\n component: useLockedBody,\n parameters: {\n docs: {\n description: {\n component: `\n\\`\\`\\`js\nimport { useLockedBody } from \"@spaced-out/ui-design-system/lib/hooks/useLockedBody\";\n\\`\\`\\`\nThe \\`useLockedBody\\` hook is a custom hook that allows locking and unlocking the scroll of the document's body.\nIt prevents the user from scrolling the page by setting the overflow and padding-right styles of the body element.\n\n### Return Type\n- An array with two elements:\n - \\`locked\\`: A boolean indicating whether the body scroll is locked or not.\n - \\`setLocked\\`: A function to toggle the locked state.\n\n### Usage\n\\`\\`\\`jsx\nimport { useLockedBody } from './useLockedBody';\n\nconst MyComponent = () => {\n const [locked, setLocked] = useLockedBody(false);\n\n const toggleLock = () => {\n setLocked(!locked);\n };\n\n return (\n
\n \n
\n );\n};\n\nexport default MyComponent;\n\\`\\`\\`\n `,\n },\n },\n },\n};\n\nexport const Example = (): React.ReactElement> => {\n const [locked, setLocked] = useLockedBody(false);\n\n const toggleLock = () => {\n setLocked(!locked);\n };\n\n return (\n
\n \n
\n );\n};\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../hooks/useLockedBody/useLockedBody';\n//# sourceMappingURL=index.d.ts.map" } }, "allFiles": [ "index.ts", "useLockedBody.stories.module.css", "useLockedBody.stories.tsx", "useLockedBody.ts" ] }, "useModal": { "name": "useModal", "path": "src/hooks/useModal", "files": { "main": { "path": "useModal.d.ts", "content": "import type { DialogSemanticType } from '../../components/Dialog';\nexport interface UseModalExtrasBase {\n semantic?: DialogSemanticType;\n title?: React.ReactNode;\n description?: React.ReactNode;\n cancelText?: string;\n confirmText?: string;\n onConfirmClick?: () => void;\n onCancelClick?: () => void;\n}\nexport type UseModalExtras = UseModalExtrasBase & Omit;\nexport interface UseModalReturnType {\n isOpen: boolean;\n openModal: (extras?: Partial>) => void;\n closeModal: () => void;\n extras: UseModalExtras;\n}\nexport declare function useModal(): UseModalReturnType;\n//# sourceMappingURL=useModal.d.ts.map" }, "story": { "path": "useModal.stories.tsx", "content": "import React from 'react';\n\nimport type {UseModalExtras} from 'src/hooks/useModal/useModal';\nimport {useModal} from 'src/hooks/useModal/useModal';\n\nimport {Button} from 'src/components/Button';\nimport {BasicDialog, DIALOG_SEMANTIC} from 'src/components/Dialog';\n\n\nexport default {\n tags: ['autodocs'],\n title: 'Hooks/useModal',\n component: useModal,\n parameters: {\n docs: {\n description: {\n component: `\n\\`\\`\\`js\nimport { useModal } from \"@spaced-out/ui-design-system/lib/hooks/useModal\";\n\\`\\`\\`\nThe \\`useModal\\` hook is a simple hook that provides state management for Modal(Dialog) when triggered from hooks (non-components).\nYou can provide all the additional details in extras as shown in the example to invoke Modal(Dialog).\n\\n**Note:** You don't need this hook if you are using Dialog from a component.\n\n### Return Type\n- An Object with four elements:\n - \\`isOpen\\`: The current value of if the Dialog is open.\n - \\`openModal\\`: A callback function to perform open action on the Dialog with additional info which you can pass as params (title, description, ...).\n - \\`closeModal\\`: A callback function to perform close action on the Dialog.\n - \\`extras\\`: This is an object when the calling hook can set additional information and handlers as required for a particular use case. Refer the example for better understanding.\n\n### Usage\n\\`\\`\\`jsx\nimport { useModal } from './useModal';\n\nconst useIntermediateExampleHook = (\n openModal: (extras?: UseModalExtras) => void,\n closeModal: () => void,\n ): ({handleClick: () => void}) => {\n const onConfirmClick = () => {\n console.error('onConfirmClick handler called');\n closeModal();\n };\n const handleClick = () => {\n openModal({\n title: 'Dialog title',\n description: 'Dialog description',\n cancelText: 'Cancel',\n confirmText: 'Confirm',\n semantic: 'danger',\n onConfirmClick,\n });\n console.error('some action in click handler useIntermediateExampleHook');\n };\n return {handleClick};\n };\n\nexport const MyComponent = (): React$Element<'div'> => {\n const { isOpen, openModal, closeModal, extras } = useModal();\n const { handleClick } = useIntermediateExampleHook(openModal, closeModal);\n return (\n
\n \n \n
\n );\n };\n\n\nexport default MyComponent;\n\\`\\`\\`\n `,\n },\n },\n },\n};\n\nconst useIntermediateExampleHook = (\n openModal: (extras: UseModalExtras<{someRandomProp: string}>) => void,\n closeModal: () => void,\n): {\n handleClick: () => void;\n} => {\n const onConfirmClick = () => {\n console.error('onConfirmClick handler called');\n closeModal();\n };\n const handleClick = () => {\n openModal({\n title: 'Dialog title - useModal',\n description: 'Dialog description - useModal',\n cancelText: 'Cancel',\n confirmText: 'Confirm',\n semantic: DIALOG_SEMANTIC.danger,\n onConfirmClick,\n someRandomProp: '(Some Random Text)',\n });\n console.error('some action in click handler useIntermediateExampleHook');\n };\n return {handleClick};\n};\n\nexport const Example = (): React.ReactElement> => {\n const {isOpen, openModal, closeModal, extras} = useModal<{\n someRandomProp: string;\n }>();\n const {handleClick} = useIntermediateExampleHook(openModal, closeModal);\n return (\n
\n \n \n
\n );\n};\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../hooks/useModal/useModal';\n//# sourceMappingURL=index.d.ts.map" } }, "allFiles": [ "index.ts", "useModal.stories.tsx", "useModal.ts" ] }, "useMountTransition": { "name": "useMountTransition", "path": "src/hooks/useMountTransition", "files": { "main": null, "story": { "path": "useMountTransition.stories.tsx", "content": "import React from 'react';\n\nimport useMountTransition from 'src/hooks/useMountTransition';\n\nimport {BodyLarge} from 'src/components/Text';\n\nimport css from 'src/hooks/useMountTransition/useMountTransition.stories.module.css';\n\n\nexport default {\n tags: ['autodocs'],\n title: 'Hooks/useMountTransition',\n component: useMountTransition,\n parameters: {\n docs: {\n description: {\n component: `\n\\`\\`\\`js\nimport { useMountTransition } from \"@spaced-out/ui-design-system/lib/hooks/useMountTransition\";\n\\`\\`\\`\nThe \\`useMountTransition\\` hook is a custom hook that tracks the mount and unmount transitions of a component.\n\n### Props Accepted\n- \\`isMounted\\`: A boolean value indicating whether the component is mounted or not.\n- \\`unmountDelay\\`: The delay in milliseconds before transitioning from mounted to unmounted state.\n\n### Return Value\n- \\`isTransitioning\\`: A boolean value indicating whether the component is currently transitioning.\n\n### Usage\n\\`\\`\\`jsx\nimport useMountTransition from './useMountTransition';\n\nconst MyComponent = () => {\n const isMounted = ...; // Some value indicating whether the component is mounted or not\n const unmountDelay = ...; // Delay before transitioning from mounted to unmounted state\n\n const isTransitioning = useMountTransition(isMounted, unmountDelay);\n\n useEffect(() => {\n // Perform any additional actions during transition\n if (isTransitioning) {\n // ...\n }\n }, [isTransitioning]);\n\n return (\n
\n Component content\n
\n );\n};\n\nexport default MyComponent;\n\\`\\`\\`\n `,\n },\n },\n },\n};\n\nexport const Example = (): React.ReactElement> => (\n
\n Usage documented above\n
\n);\n" }, "index": { "path": "index.d.ts", "content": "declare const useMountTransition: (isMounted: boolean, unmountDelay: number) => boolean;\nexport default useMountTransition;\n//# sourceMappingURL=index.d.ts.map" } }, "allFiles": [ "index.ts", "useMountTransition.stories.module.css", "useMountTransition.stories.tsx" ] }, "usePagination": { "name": "usePagination", "path": "src/hooks/usePagination", "files": { "main": { "path": "usePagination.d.ts", "content": "import type { PaginationBaseProps, PaginationItemProps } from '../../components/Pagination';\nexport declare const usePagination: (props: PaginationBaseProps) => {\n items: Array | null | undefined;\n};\n//# sourceMappingURL=usePagination.d.ts.map" }, "story": { "path": "usePagination.stories.tsx", "content": "import React from 'react';\n\nimport {usePagination} from 'src/hooks/usePagination/usePagination';\n\nimport {Pagination} from 'src/components/Pagination';\n\nimport css from 'src/hooks/usePagination/usePagination.stories.module.css';\n\n\nexport default {\n tags: ['autodocs'],\n title: 'Hooks/usePagination',\n component: usePagination,\n parameters: {\n docs: {\n description: {\n component: `\n\\`\\`\\`js\nimport { usePagination } from \"@spaced-out/ui-design-system/lib/hooks/usePagination\";\n\\`\\`\\`\nThe \\`usePagination\\` hook is a custom hook that provides pagination functionality.\nIt generates a list of pagination items based on the provided props, including\nthe current page, total number of pages, and various display options.\n\n### Props Accepted\n- \\`boundaryCount\\` (optional): The number of pages to display at the beginning and end of the pagination. Defaults to 1.\n- \\`totalPages\\` (optional): The total number of pages. Defaults to 1.\n- \\`disabled\\` (optional): If set to \\`true\\`, the pagination functionality is disabled.\n- \\`hideNextButton\\` (optional): If set to \\`true\\`, the next button is hidden.\n- \\`hidePrevButton\\` (optional): If set to \\`true\\`, the previous button is hidden.\n- \\`onChange\\` (optional): A callback function called when a pagination item is clicked. Receives the selected page number and the event object.\n- \\`currentPage\\` (optional): The currently selected page. Defaults to 1.\n- \\`showFirstButton\\` (optional): If set to \\`true\\`, the first button is shown.\n- \\`showLastButton\\` (optional): If set to \\`true\\`, the last button is shown.\n- \\`siblingCount\\` (optional): The number of sibling pages to display before and after the current page. Defaults to 1.\n- \\`style\\` (optional): The style of the pagination. Can be 'primary' or 'secondary'. Defaults to 'primary'.\n\n### Props Returned\n- \\`items\\`: An array of pagination items with associated props.\n\n### Usage\n\\`\\`\\`jsx\nimport { usePagination } from './usePagination';\n\nconst MyComponent = () => {\n const { items } = usePagination({\n boundaryCount: 1,\n totalPages: 10,\n disabled: false,\n hideNextButton: false,\n hidePrevButton: false,\n onChange: (selectedPage, event) => {\n },\n currentPage: 1,\n showFirstButton: false,\n showLastButton: false,\n siblingCount: 1,\n style: 'primary',\n });\n};\n\nexport default MyComponent;\n\\`\\`\\`\n `,\n },\n },\n },\n};\n\nexport const Example = (): React.ReactElement> => (\n
\n \n
\n);\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../hooks/usePagination/usePagination';\n//# sourceMappingURL=index.d.ts.map" } }, "allFiles": [ "index.ts", "usePagination.stories.module.css", "usePagination.stories.tsx", "usePagination.ts" ] }, "useReferenceElementWidth": { "name": "useReferenceElementWidth", "path": "src/hooks/useReferenceElementWidth", "files": { "main": { "path": "useReferenceElementWidth.d.ts", "content": "export declare function useReferenceElementWidth(ref?: HTMLElement | null, minWidth?: number): string;\n//# sourceMappingURL=useReferenceElementWidth.d.ts.map" }, "story": null, "index": { "path": "index.d.ts", "content": "export * from '../../hooks/useReferenceElementWidth/useReferenceElementWidth';\n//# sourceMappingURL=index.d.ts.map" } }, "allFiles": [ "index.ts", "useReferenceElementWidth.ts" ] }, "useResizeObserver": { "name": "useResizeObserver", "path": "src/hooks/useResizeObserver", "files": { "main": { "path": "useResizeObserver.d.ts", "content": "import * as React from 'react';\nexport declare function useResizeObserver(): [React.Ref, number];\n//# sourceMappingURL=useResizeObserver.d.ts.map" }, "story": null, "index": { "path": "index.d.ts", "content": "export * from '../../hooks/useResizeObserver/useResizeObserver';\n//# sourceMappingURL=index.d.ts.map" } }, "allFiles": [ "index.ts", "useResizeObserver.ts" ] }, "useToastPortal": { "name": "useToastPortal", "path": "src/hooks/useToastPortal", "files": { "main": { "path": "useToastPortal.d.ts", "content": "interface UseToastPortal {\n toastRef: {\n current: HTMLDivElement | null;\n };\n}\nexport declare const useToastPortal: ({ toastRef, }: UseToastPortal) => {\n loaded: boolean;\n};\nexport {};\n//# sourceMappingURL=useToastPortal.d.ts.map" }, "story": null, "index": { "path": "index.d.ts", "content": "export * from '../../hooks/useToastPortal/useToastPortal';\n//# sourceMappingURL=index.d.ts.map" } }, "allFiles": [ "index.ts", "useToastPortal.ts" ] }, "useToggle": { "name": "useToggle", "path": "src/hooks/useToggle", "files": { "main": { "path": "useToggle.d.ts", "content": "export declare function useToggle(initialState?: boolean): [boolean, (newValue: boolean) => void];\n//# sourceMappingURL=useToggle.d.ts.map" }, "story": { "path": "useToggle.stories.tsx", "content": "import React from 'react';\n\nimport {useToggle} from 'src/hooks/useToggle/useToggle';\n\nimport {Button} from 'src/components/Button';\nimport {BodyLarge} from 'src/components/Text';\n\nimport css from 'src/hooks/useToggle/useToggle.stories.module.css';\n\n\nexport default {\n tags: ['autodocs'],\n title: 'Hooks/useToggle',\n component: useToggle,\n parameters: {\n docs: {\n description: {\n component: `\n\\`\\`\\`js\nimport { useToggle } from \"@spaced-out/ui-design-system/lib/hooks/useToggle\";\n\\`\\`\\`\nThe \\`useToggle\\` hook is a custom hook that provides a boolean state value and a function to toggle its value between true and false.\n\n### Props Accepted\n- \\`initialState\\` (optional): The initial state value. Defaults to false.\n\n### Props Returned\n- \\`stateValue\\`: The current state value.\n- \\`toggle\\`: A function to toggle the state value.\n\n### Usage\n\\`\\`\\`jsx\nimport { useToggle } from './useToggle';\n\nconst MyComponent = () => {\n const [isActive, toggleActive] = useToggle(false);\n\n return (\n
\n \n {isActive && Active}\n
\n );\n};\n\nexport default MyComponent;\n\\`\\`\\`\n `,\n },\n },\n },\n};\n\nexport const Example = (): React.ReactElement> => {\n const [isActive, toggleActive] = useToggle(false);\n\n return (\n
\n {}\n \n {isActive && Active}\n {!isActive && InActive}\n
\n );\n};\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../hooks/useToggle/useToggle';\n//# sourceMappingURL=index.d.ts.map" } }, "allFiles": [ "index.ts", "useToggle.stories.module.css", "useToggle.stories.tsx", "useToggle.ts" ] }, "useWindowSize": { "name": "useWindowSize", "path": "src/hooks/useWindowSize", "files": { "main": { "path": "useWindowSize.d.ts", "content": "interface WindowSize {\n width: number;\n height: number;\n}\nexport declare function useWindowSize(): WindowSize;\nexport {};\n//# sourceMappingURL=useWindowSize.d.ts.map" }, "story": { "path": "useWindowSize.stories.tsx", "content": "import React from 'react';\n\nimport {useWindowSize} from 'src/hooks/useWindowSize/useWindowSize';\n\nimport {BodyLarge} from 'src/components/Text';\n\nimport css from 'src/hooks/useWindowSize/useWindowSize.stories.module.css';\n\n\nexport default {\n tags: ['autodocs'],\n title: 'Hooks/useWindowSize',\n component: useWindowSize,\n parameters: {\n docs: {\n description: {\n component: `\n\\`\\`\\`js\nimport { useWindowSize } from \"@spaced-out/ui-design-system/lib/hooks/useWindowSize\";\n\\`\\`\\`\nThe \\`useWindowSize\\` hook is a custom hook that provides the current dimensions of the window as an object with the \\`width\\` and \\`height\\` properties.\n\n### Props Returned\n- \\`windowSize\\`: An object containing the current dimensions of the window.\n\n### Usage\n\\`\\`\\`jsx\nimport { useWindowSize } from './useWindowSize';\n\nconst MyComponent = () => {\n const windowSize = useWindowSize();\n\n return (\n
\n Window Width: {windowSize.width}px\n Window Height: {windowSize.height}px\n
\n );\n};\n\nexport default MyComponent;\n\\`\\`\\`\n `,\n },\n },\n },\n};\n\nexport const Example = (): React.ReactElement> => {\n const windowSize = useWindowSize();\n\n return (\n
\n \n Window Width: {windowSize.width}px\n \n \n Window Height: {windowSize.height}px\n \n
\n );\n};\n" }, "index": { "path": "index.d.ts", "content": "export * from '../../hooks/useWindowSize/useWindowSize';\n//# sourceMappingURL=index.d.ts.map" } }, "allFiles": [ "index.ts", "useWindowSize.stories.module.css", "useWindowSize.stories.tsx", "useWindowSize.ts" ] } }, "tokens": { "border": { "app-border": { "border": { "width": { "none": { "value": "{baseBorder.width.0.value}" }, "primary": { "value": "{baseBorder.width.1.value}" }, "secondary": { "value": "{baseBorder.width.1_5.value}" }, "tertiary": { "value": "{baseBorder.width.2.value}" } }, "radius": { "none": { "value": "{baseBorder.radius.0.value}" }, "x-small": { "value": "{baseBorder.radius.4.value}" }, "radio-button": { "value": "{baseBorder.radius.6.value}" }, "small": { "value": "{baseBorder.radius.8.value}" }, "medium": { "value": "{baseBorder.radius.12.value}" }, "large": { "value": "{baseBorder.radius.20.value}" }, "x-large": { "value": "{baseBorder.radius.30.value}" }, "circle": { "value": "{baseBorder.radius.50%.value}" } } } }, "base-border": { "baseBorder": { "radius": { "0": { "value": "0px" }, "4": { "value": "4px" }, "6": { "value": "6px" }, "8": { "value": "8px" }, "12": { "value": "12px" }, "20": { "value": "20px" }, "30": { "value": "30px" }, "50%": { "value": "50%" } }, "width": { "0": { "value": "0px" }, "1": { "value": "1px" }, "2": { "value": "2px" }, "1_5": { "value": "1.5px" } } } } }, "color": { "app-color": { "color": { "text": { "primary": { "value": "{baseColor.indigo.940.value}" }, "secondary": { "value": "{baseColor.gray.600.value}" }, "tertiary": { "value": "{baseColor.gray.400.value}" }, "disabled": { "value": "{baseColor.gray.200.value}" }, "clickable": { "value": "{baseColor.purple.500.value}" }, "neutral": { "value": "{baseColor.indigo.500.value}" }, "success": { "value": "{baseColor.green.700.value}" }, "information": { "value": "{baseColor.blue.600.value}" }, "warning": { "value": "{baseColor.orange.700.value}" }, "danger": { "value": "{baseColor.red.600.value}" }, "inverse": { "primary": { "value": "{baseColor.white.100.value}" }, "secondary": { "value": "{baseColor.indigo.300.value}" } }, "favorite": { "value": "{baseColor.yellow.500.value}" } }, "icon": { "primary": { "value": "{baseColor.indigo.400.value}" }, "secondary": { "value": "{baseColor.indigo.800.value}" } }, "border": { "primary": { "value": "{baseColor.gray.100.value}" }, "secondary": { "value": "{baseColor.gray.200.value}" }, "tertiary": { "value": "{baseColor.gray.250.value}" }, "danger": { "value": "{baseColor.red.500.value}" } }, "background": { "brand": { "value": "{baseColor.purple.900.value}" }, "primary": { "value": "{baseColor.gray.25.value}" }, "secondary": { "value": "{baseColor.gray.50.value}" }, "tertiary": { "value": "{baseColor.white.100.value}" } }, "focus": { "primary": { "value": "{baseColor.purple.100.value}" }, "secondary": { "value": "{baseColor.purple.500.value}" }, "information": { "value": "{baseColor.blue.100.value}" }, "danger": { "value": "{baseColor.red.100.value}" } }, "fill": { "primary": { "value": "{baseColor.purple.500.value}" }, "secondary": { "value": "{baseColor.purple.50.value}" }, "none": { "value": "{baseColor.transparent.0.value}" }, "disabled": { "value": "{baseColor.gray.50.value}" }, "inverse": { "primary": { "value": "{baseColor.indigo.940.value}" } } }, "tooltip-fill": { "value": "{baseColor.indigo.940.95.value}" }, "backdrop-fill": { "value": "{baseColor.indigo.940.70.value}" }, "button-fill": { "tableAction": { "enabled": { "value": "{baseColor.purple.600.value}" }, "hovered": { "value": "{baseColor.purple.700.value}" }, "pressed": { "value": "{baseColor.purple.700.value}" }, "border": { "value": "{baseColor.purple.400.value}" } }, "primary": { "enabled": { "value": "{baseColor.purple.500.value}" }, "hovered": { "value": "{baseColor.purple.700.value}" }, "pressed": { "value": "{baseColor.purple.700.value}" } }, "secondary": { "enabled": { "value": "{baseColor.purple.50.value}" }, "hovered": { "value": "{baseColor.purple.100.value}" }, "pressed": { "value": "{baseColor.purple.100.value}" } }, "tertiary": { "enabled": { "value": "{baseColor.white.100.value}" }, "hovered": { "value": "{baseColor.gray.75.value}" }, "pressed": { "value": "{baseColor.gray.75.value}" } }, "ghost": { "enabled": { "value": "{baseColor.transparent.0.value}" }, "hovered": { "value": "{baseColor.gray.75.value}" }, "pressed": { "value": "{baseColor.gray.75.value}" } }, "danger": { "enabled": { "value": "{baseColor.red.500.value}" }, "hovered": { "value": "{baseColor.red.600.value}" }, "pressed": { "value": "{baseColor.red.600.value}" } } }, "side-menu": { "background": { "default": { "value": "{baseColor.indigo.940.value}" }, "hovered": { "value": "{baseColor.indigo.920.value}" }, "selected": { "value": "{baseColor.purple.500.value}" } }, "icon": { "default": { "value": "{baseColor.indigo.300.value}" }, "active": { "value": "{baseColor.white.100.value}" } }, "account-bar": { "fill": { "value": "{baseColor.indigo.920.value}" } } }, "group-menu": { "background": { "default": { "value": "{baseColor.indigo.940.value}" }, "hovered": { "value": "{baseColor.indigo.920.value}" }, "selected": { "value": "{baseColor.purple.500.value}" } }, "text": { "default": { "value": "{baseColor.indigo.200.value}" } } }, "sub-menu": { "background": { "default": { "value": "{baseColor.indigo.920.value}" } }, "star": { "value": "{baseColor.yellow.500.value}" } }, "data-viz": { "1": { "value": "{baseColor.blue.200.value}" }, "2": { "value": "{baseColor.purple.200.value}" }, "3": { "value": "{baseColor.green.200.value}" }, "4": { "value": "{baseColor.orange.200.value}" }, "5": { "value": "{baseColor.red.200.value}" }, "6": { "value": "{baseColor.teal.100.value}" }, "7": { "value": "{baseColor.pink.100.value}" }, "8": { "value": "{baseColor.yellow.100.value}" } }, "score-bar": { "level": { "1": { "value": "{baseColor.gray.400.value}" }, "2": { "value": "{baseColor.red.400.value}" }, "3": { "value": "{baseColor.orange.400.value}" }, "4": { "value": "{baseColor.blue.400.value}" }, "5": { "value": "{baseColor.green.400.value}" } }, "inactive": { "value": "{baseColor.gray.200.value}" } }, "gray.lightest": { "value": "{baseColor.gray.75.value}" }, "neutral": { "value": "{baseColor.indigo.500.value}" }, "neutral.lightest": { "value": "{baseColor.indigo.50.value}" }, "neutral.light": { "value": "{baseColor.indigo.200.value}" }, "neutral.dark": { "value": "{baseColor.indigo.700.value}" }, "neutral.darkest": { "value": "{baseColor.indigo.900.value}" }, "success": { "value": "{baseColor.green.500.value}" }, "success.lightest": { "value": "{baseColor.green.50.value}" }, "success.light": { "value": "{baseColor.green.200.value}" }, "success.dark": { "value": "{baseColor.green.700.value}" }, "success.darkest": { "value": "{baseColor.green.900.value}" }, "information": { "value": "{baseColor.blue.500.value}" }, "information.lightest": { "value": "{baseColor.blue.50.value}" }, "information.light": { "value": "{baseColor.blue.200.value}" }, "information.dark": { "value": "{baseColor.blue.700.value}" }, "information.darkest": { "value": "{baseColor.blue.900.value}" }, "warning": { "value": "{baseColor.orange.500.value}" }, "warning.lightest": { "value": "{baseColor.orange.50.value}" }, "warning.light": { "value": "{baseColor.orange.200.value}" }, "warning.dark": { "value": "{baseColor.orange.700.value}" }, "warning.darkest": { "value": "{baseColor.orange.900.value}" }, "danger": { "value": "{baseColor.red.500.value}" }, "danger.lightest": { "value": "{baseColor.red.50.value}" }, "danger.light": { "value": "{baseColor.red.200.value}" }, "danger.dark": { "value": "{baseColor.red.700.value}" }, "danger.darkest": { "value": "{baseColor.red.900.value}" } } }, "base-color": { "baseColor": { "purple": { "50": { "value": "#efebfa" }, "100": { "value": "#ccc0f0" }, "200": { "value": "#b4a2e8" }, "300": { "value": "#9277de" }, "400": { "value": "#7d5dd7" }, "500": { "value": "#5c34cd" }, "600": { "value": "#542fbb" }, "700": { "value": "#412592" }, "800": { "value": "#331d71" }, "900": { "value": "#271656" } }, "gray": { "25": { "value": "#fafafa" }, "50": { "value": "#f4f4f4" }, "75": { "value": "#EBEBEB" }, "100": { "value": "#e1e1e1" }, "200": { "value": "#d1d1d1" }, "250": { "value": "#AEAEAE" }, "300": { "value": "#939393" }, "400": { "value": "#7e7e7e" }, "500": { "value": "#5e5e5e" }, "600": { "value": "#565656" }, "700": { "value": "#434343" }, "800": { "value": "#343434" }, "900": { "value": "#272727" }, "920": { "value": "#1e1e1e" }, "940": { "value": "#171717" }, "960": { "value": "#121212" } }, "indigo": { "50": { "value": "#f1f1f5" }, "100": { "value": "#E6E5EF" }, "200": { "value": "#D3D2E0" }, "300": { "value": "#9F9FBC" }, "400": { "value": "#8D8CAF" }, "500": { "value": "#706F9B" }, "600": { "value": "#66658D" }, "700": { "value": "#504F6E" }, "800": { "value": "#3E3D55" }, "900": { "value": "#2C2C47" }, "920": { "value": "#1F1F36" }, "940": { "70": { "value": "rgba(23, 23, 42, 0.7)" }, "95": { "value": "rgba(23, 23, 42, 0.95)" }, "value": "#17172A" } }, "blue": { "50": { "value": "#e6f0fe" }, "100": { "value": "#b2d1fa" }, "200": { "value": "#8dbaf8" }, "300": { "value": "#599bf5" }, "400": { "value": "#3987f3" }, "500": { "value": "#0769f0" }, "600": { "value": "#0660da" }, "700": { "value": "#054baa" }, "800": { "value": "#043a84" }, "900": { "value": "#032c65" } }, "green": { "50": { "value": "#e6f5ed" }, "100": { "value": "#b1dec8" }, "200": { "value": "#8bcfad" }, "300": { "value": "#56b988" }, "400": { "value": "#35ab71" }, "500": { "value": "#03964d" }, "600": { "value": "#038946" }, "700": { "value": "#026b37" }, "800": { "value": "#02532a" }, "900": { "value": "#013f20" } }, "orange": { "50": { "value": "#fcf2e7" }, "100": { "value": "#f5d7b4" }, "200": { "value": "#f0c48f" }, "300": { "value": "#eaa95c" }, "400": { "value": "#e5983d" }, "500": { "value": "#df7e0c" }, "600": { "value": "#cb730b" }, "700": { "value": "#9e5909" }, "800": { "value": "#7b4507" }, "900": { "value": "#5e3505" } }, "red": { "50": { "value": "#fce8ed" }, "100": { "value": "#f6b9c8" }, "200": { "value": "#f297ad" }, "300": { "value": "#ec6787" }, "400": { "value": "#e94970" }, "500": { "value": "#e31c4c" }, "600": { "value": "#cf1945" }, "700": { "value": "#a11436" }, "800": { "value": "#7d0f2a" }, "900": { "value": "#5f0c20" } }, "yellow": { "50": { "value": "#FCF8E7" }, "100": { "value": "#F5EBB4" }, "200": { "value": "#F0E190" }, "300": { "value": "#EAD35D" }, "400": { "value": "#E5CA3D" }, "500": { "value": "#DFBD0D" }, "600": { "value": "#CBAC0C" }, "700": { "value": "#9E8609" }, "800": { "value": "#7B6807" }, "900": { "value": "#5E4F05" } }, "teal": { "50": { "value": "#E6FAF6" }, "100": { "value": "#B0F0E3" }, "200": { "value": "#8AE9D6" }, "300": { "value": "#54E0C3" }, "400": { "value": "#33D9B8" }, "500": { "value": "#00D0A6" }, "600": { "value": "#00BD97" }, "700": { "value": "#009476" }, "800": { "value": "#00725B" }, "900": { "value": "#005746" } }, "violet": { "50": { "value": "#F7E9FB" }, "100": { "value": "#E7BCF2" }, "200": { "value": "#DC9CEB" }, "300": { "value": "#CC6EE2" }, "400": { "value": "#C252DD" }, "500": { "value": "#B327D4" }, "600": { "value": "#A323C1" }, "700": { "value": "#7F1C97" }, "800": { "value": "#621575" }, "900": { "value": "#4B1059" } }, "pink": { "50": { "value": "#FCE8F5" }, "100": { "value": "#F5B8E1" }, "200": { "value": "#F196D2" }, "300": { "value": "#EA66BD" }, "400": { "value": "#E648B1" }, "500": { "value": "#E01A9D" }, "600": { "value": "#CC188F" }, "700": { "value": "#9F126F" }, "800": { "value": "#7B0E56" }, "900": { "value": "#5E0B42" } }, "white": { "100": { "value": "#ffffff" } }, "transparent": { "0": { "value": "rgba(255,255,255,0)" } } } } }, "elevation": { "app-elevation": { "elevation": { "none": { "value": "{baseElevation.0.value}" }, "card": { "value": "{baseElevation.4.value}" }, "tooltip": { "value": "{baseElevation.4.value}" }, "menu": { "value": "{baseElevation.12.value}" }, "backdrop": { "value": "{baseElevation.40.value}" }, "modal": { "value": "{baseElevation.40.value}" }, "toast": { "value": "{baseElevation.60.value}" } } }, "base-elevation": { "baseElevation": { "0": { "value": "0" }, "4": { "value": "4" }, "12": { "value": "12" }, "40": { "value": "40" }, "60": { "value": "60" } } } }, "font": { "base-font": { "font": { "family": { "centra": { "value": "\"Centra No 2\"" } }, "weight": { "book": { "value": "400" }, "medium": { "value": "500" } }, "size": { "12": { "value": "12px" }, "13": { "value": "13px" }, "14": { "value": "14px" }, "16": { "value": "16px" }, "18": { "value": "18px" }, "24": { "value": "24px" }, "26": { "value": "26px" }, "36": { "value": "36px" }, "46": { "value": "46px" } }, "letter-spacing": { "0": { "value": "0em" }, "1": { "value": "0.01em" }, "2": { "value": "0.02em" }, "4": { "value": "0.04em" }, "minus1": { "value": "-0.01em" }, "minus2": { "value": "-0.02em" }, "minus3": { "value": "-0.03em" }, "minus4": { "value": "-0.04em" } }, "line-height": { "100%": { "value": "100%" }, "120%": { "value": "120%" }, "125%": { "value": "125%" }, "130%": { "value": "130%" }, "140%": { "value": "140%" }, "150%": { "value": "150%" }, "170%": { "value": "170%" } }, "paragraph-spacing": { "0": { "value": "0" } }, "text-case": { "none": { "value": "none" } }, "text-decoration": { "none": { "value": "none" } } } } }, "motion": { "app-motion": { "motion": { "duration": { "fast": { "value": "{baseMotion.transition.duration.100.value}" }, "normal": { "value": "{baseMotion.transition.duration.200.value}" }, "slow": { "value": "{baseMotion.transition.duration.300.value}" }, "slower": { "value": "{baseMotion.transition.duration.500.value}" }, "slowest": { "value": "{baseMotion.transition.duration.1000.value}" } }, "ease-in-ease-out": { "value": "{baseMotion.transition.timingFunction.easeInOut.value}" } } }, "base-motion": { "baseMotion": { "transition": { "timingFunction": { "linear": { "value": "linear" }, "ease": { "value": "ease" }, "easeIn": { "value": "ease-in" }, "easeInOut": { "value": "ease-in-out" }, "easeOut": { "value": "ease-out" } }, "duration": { "100": { "value": "100ms" }, "200": { "value": "200ms" }, "300": { "value": "300ms" }, "500": { "value": "500ms" }, "1000": { "value": "1000ms" } } } } } }, "opacity": { "base-opacity": { "opacity": { "100%": { "value": "100%" }, "95%": { "value": "95%" }, "90%": { "value": "90%" }, "85%": { "value": "85%" }, "80%": { "value": "80%" }, "70%": { "value": "70%" }, "60%": { "value": "60%" }, "50%": { "value": "50%" }, "40%": { "value": "40%" }, "30%": { "value": "30%" }, "20%": { "value": "20%" }, "15%": { "value": "15%" }, "10%": { "value": "10%" }, "5%": { "value": "5%" }, "0%": { "value": "0%" } } } }, "shadow": { "base-shadow": { "shadow": { "box-shadow": { "1": { "color": { "value": "#12121214" }, "type": { "value": "dropShadow" }, "x": { "value": "0px" }, "y": { "value": "4px" }, "blur": { "value": "4px" }, "spread": { "value": "0px" } }, "2": { "color": { "value": "#12121214" }, "type": { "value": "dropShadow" }, "x": { "value": "0px" }, "y": { "value": "8px" }, "blur": { "value": "8px" }, "spread": { "value": "0px" } }, "3": { "color": { "value": "#1212121f" }, "type": { "value": "dropShadow" }, "x": { "value": "0px" }, "y": { "value": "12px" }, "blur": { "value": "12px" }, "spread": { "value": "0px" } }, "4": { "color": { "value": "#12121233" }, "type": { "value": "dropShadow" }, "x": { "value": "0px" }, "y": { "value": "20px" }, "blur": { "value": "20px" }, "spread": { "value": "0px" } } } } } }, "size": { "base-size": { "size": { "2": { "value": "2px" }, "4": { "value": "4px" }, "5": { "value": "5px" }, "8": { "value": "8px" }, "10": { "value": "10px" }, "12": { "value": "12px" }, "16": { "value": "16px" }, "18": { "value": "18px" }, "20": { "value": "20px" }, "22": { "value": "22px" }, "24": { "value": "24px" }, "26": { "value": "26px" }, "28": { "value": "28px" }, "30": { "value": "30px" }, "32": { "value": "32px" }, "34": { "value": "34px" }, "36": { "value": "36px" }, "38": { "value": "38px" }, "40": { "value": "40px" }, "42": { "value": "42px" }, "44": { "value": "44px" }, "48": { "value": "48px" }, "50": { "value": "50px" }, "58": { "value": "58px" }, "60": { "value": "60px" }, "66": { "value": "66px" }, "68": { "value": "68px" }, "70": { "value": "70px" }, "90": { "value": "90px" }, "100": { "value": "100px" }, "110": { "value": "110px" }, "120": { "value": "120px" }, "125": { "value": "125px" }, "140": { "value": "140px" }, "150": { "value": "150px" }, "160": { "value": "160px" }, "180": { "value": "180px" }, "200": { "value": "200px" }, "228": { "value": "228px" }, "240": { "value": "240px" }, "252": { "value": "252px" }, "260": { "value": "260px" }, "276": { "value": "276px" }, "284": { "value": "284px" }, "300": { "value": "300px" }, "320": { "value": "320px" }, "380": { "value": "380px" }, "400": { "value": "400px" }, "426": { "value": "426px" }, "480": { "value": "480px" }, "500": { "value": "500px" }, "540": { "value": "540px" }, "580": { "value": "580px" }, "640": { "value": "640px" }, "660": { "value": "660px" }, "720": { "value": "720px" }, "800": { "value": "800px" }, "880": { "value": "880px" }, "960": { "value": "960px" }, "1280": { "value": "1280px" }, "fluid": { "value": "100%" }, "fullViewportHeight": { "value": "100vh" }, "fullViewportWidth": { "value": "100vw" } } } }, "space": { "app-space": { "space": { "none": { "value": "{baseSpace.0.value}" }, "x-x-small": { "value": "{baseSpace.4.value}" }, "x-small": { "value": "{baseSpace.8.value}" }, "small": { "value": "{baseSpace.12.value}" }, "medium": { "value": "{baseSpace.20.value}" }, "large": { "value": "{baseSpace.32.value}" }, "x-large": { "value": "{baseSpace.52.value}" }, "x-x-large": { "value": "{baseSpace.84.value}" }, "fluid": { "value": "{baseSpace.100%.value}" }, "neg-fluid": { "value": "{baseSpace.minus100%.value}" }, "half-fluid": { "value": "{baseSpace.50%.value}" }, "neg-half-fluid": { "value": "{baseSpace.minus50%.value}" } } }, "base-space": { "baseSpace": { "0": { "value": "0px" }, "4": { "value": "4px" }, "8": { "value": "8px" }, "12": { "value": "12px" }, "20": { "value": "20px" }, "32": { "value": "32px" }, "52": { "value": "52px" }, "84": { "value": "84px" }, "100%": { "value": "100%" }, "minus100%": { "value": "-100%" }, "50%": { "value": "50%" }, "minus50%": { "value": "-50%" } } } } }, "utils": { "array": { "name": "array", "path": "src/utils/array", "files": { "are-arrays-equal.d.ts": { "path": "are-arrays-equal.d.ts", "content": "type ItemComparer = (a: Item, b: Item) => boolean;\nexport declare function areArraysEqual(array1: Item[], array2: Item[], itemComparer?: ItemComparer): boolean;\nexport {};\n//# sourceMappingURL=are-arrays-equal.d.ts.map" }, "index.d.ts": { "path": "index.d.ts", "content": "export * from '../../utils/array/are-arrays-equal';\n//# sourceMappingURL=index.d.ts.map" } }, "allFiles": [ "are-arrays-equal.ts", "index.ts" ] }, "charts": { "name": "charts", "path": "src/utils/charts", "files": { "charts.d.ts": { "path": "charts.d.ts", "content": "import type { ChartOptions } from '../../types/charts';\nexport declare const DATA_VIZ_COLORS: readonly [\"#8dbaf8\", \"#b4a2e8\", \"#8bcfad\", \"#f0c48f\", \"#f297ad\", \"#B0F0E3\", \"#F5B8E1\", \"#F5EBB4\"];\nexport declare const getDataVizColor: (dataIndex: number) => string;\nexport declare const breadcrumbStyle: {\n readonly color: \"#565656\";\n readonly fontSize: \"12px\";\n readonly letterSpacing: \"0em\";\n readonly fontFamily: \"Centra No 2\";\n readonly fontStyle: \"normal\";\n readonly margin: 0;\n readonly fontWeight: \"500\";\n readonly display: \"flex\";\n readonly alignItems: \"center\";\n};\nexport declare const commonChartOptions: Partial;\nexport declare const mergeChartUserOptions: (defaultoptions: Partial, userOptions: Partial) => ChartOptions;\n//# sourceMappingURL=charts.d.ts.map" }, "columnChart.d.ts": { "path": "columnChart.d.ts", "content": "import type { ChartOptions } from '../../types/charts';\n/**\n * This function modifies the the common chart behavior to column chart default behavior.\n * It will not take userPassed option into account.\n */\nexport declare const getColumnChartOptions: () => ChartOptions;\nexport declare const columnPlotWidth = 28;\n//# sourceMappingURL=columnChart.d.ts.map" }, "donutChart.d.ts": { "path": "donutChart.d.ts", "content": "import type { ChartOptions, LegendOptionsType } from '../../types/charts';\ninterface DonutChartPropsType {\n legend?: LegendOptionsType;\n defaultCenterHTML?: string;\n /**\n * Formatter for each legend item. When provided, the legend renders as HTML\n * so items can show the point value and percentage alongside the name.\n */\n legendLabelFormatter?: LegendOptionsType['labelFormatter'];\n /**\n * Formats the center total for a given value. When provided, the center is\n * recomputed from the visible points on every render (applied via\n * textContent) so an auto-computed total stays in sync with the\n * (redistributed) legend percentages after a slice is toggled off.\n */\n getCenterTextForVisibleTotal?: (visibleTotal: number) => string;\n}\n/**\n * Marker class on the center total element. The auto-total's text is updated\n * in place (via textContent) as slices are toggled, so it must be locatable\n * without rebuilding the subtitle HTML. A class is used (not a data-attribute)\n * because Highcharts' useHTML sanitizer keeps the class attribute but strips\n * unknown data-* attributes.\n */\nexport declare const CENTER_TOTAL_CLASS = \"donut-center-total\";\nexport declare const rightLegendColumn: {\n readonly layout: \"vertical\";\n readonly align: \"right\";\n readonly verticalAlign: \"middle\";\n readonly itemMarginBottom: 12;\n readonly symbolPadding: 8;\n readonly symbolWidth: 8;\n readonly width: \"36%\";\n};\n/**\n * This function modifies the the common chart behavior to donut chart default behavior.\n * It will not take userPassed option into account.\n */\nexport declare const getDonutChartOptions: ({ legend, defaultCenterHTML, legendLabelFormatter, getCenterTextForVisibleTotal, }: DonutChartPropsType) => ChartOptions;\nexport {};\n//# sourceMappingURL=donutChart.d.ts.map" }, "funnelChart.d.ts": { "path": "funnelChart.d.ts", "content": "import type Highcharts from 'highcharts';\nimport type { ChartOptions, Drilldown } from '../../types/charts';\nimport type { FunnelSeriesItem } from '../../components/Charts/FunnelChart/FunnelChart';\n/**\n * This function modifies the the common chart behavior to funnel chart default behavior.\n * It will not take userPassed option into account.\n */\nexport declare const getFunnelChartOptions: () => ChartOptions;\nexport declare const addColorsToFunnelSeries: (series: Array, showInLegend?: boolean) => Array;\nexport declare const addColorsToFunnelDrilldownSeries: (drilldownSeries: Drilldown, showInLegend?: boolean) => Drilldown;\n//# sourceMappingURL=funnelChart.d.ts.map" }, "helpers.d.ts": { "path": "helpers.d.ts", "content": "export declare const deepMerge: (obj1: Partial | null | undefined, obj2: Partial | null | undefined, ...args: Array | null | undefined>) => T;\n/**\n * Default number formatter used by charts for center totals and legend values.\n * Abbreviates large numbers into a compact, locale-aware form, keeping up to\n * two decimal places (e.g. 1460 -> \"1.46K\", 1260 -> \"1.26K\", 1200 -> \"1.2K\",\n * 200 -> \"200\").\n */\nexport declare const formatCompactNumber: (value: number) => string;\nexport declare const rightLineLegendColumn: {\n readonly layout: \"vertical\";\n readonly align: \"right\";\n readonly verticalAlign: \"middle\";\n readonly itemMarginBottom: 12;\n readonly symbolPadding: 4;\n readonly symbolWidth: 16;\n readonly width: \"40%\";\n};\nexport declare const bottomLegendRow: {\n readonly layout: \"horizontal\";\n readonly align: \"center\";\n readonly verticalAlign: \"bottom\";\n readonly itemDistance: 20;\n readonly symbolPadding: 4;\n readonly symbolWidth: 16;\n};\nexport declare const yAxisTitleStyle: {\n readonly color: \"#565656\";\n readonly fontSize: \"12px\";\n readonly fontWeight: \"400\";\n readonly letterSpacing: \"0.04em\";\n readonly fontFamily: \"Centra No 2\";\n readonly fontStyle: \"normal\";\n readonly margin: 0;\n readonly display: \"flex\";\n readonly alignItems: \"center\";\n};\nexport declare const xAxisTitleStyle: {\n readonly color: \"#565656\";\n readonly fontSize: \"12px\";\n readonly fontWeight: \"400\";\n readonly letterSpacing: \"0.04em\";\n readonly fontFamily: \"Centra No 2\";\n readonly fontStyle: \"normal\";\n readonly margin: 0;\n readonly display: \"flex\";\n readonly alignItems: \"center\";\n};\nexport declare const yAxisLabelStyle: {\n readonly fontSize: \"12px\";\n readonly fontFamily: \"Centra No 2\";\n readonly fontStyle: \"normal\";\n readonly margin: 0;\n readonly color: \"#17172A\";\n readonly letterSpacing: \"0em\";\n readonly fontWeight: \"500\";\n readonly display: \"flex\";\n readonly alignItems: \"center\";\n};\nexport declare const xAxisLabelStyle: {\n readonly fontSize: \"12px\";\n readonly letterSpacing: \"0.01em\";\n readonly fontFamily: \"Centra No 2\";\n readonly fontStyle: \"normal\";\n readonly margin: 0;\n readonly color: \"#17172A\";\n readonly fontWeight: \"500\";\n readonly display: \"flex\";\n readonly alignItems: \"center\";\n};\nexport declare const activeLabelStyle: {\n readonly color: \"#17172A\";\n readonly fill: \"#17172A\";\n readonly textDecoration: \"underline\";\n readonly fontSize: \"12px\";\n readonly letterSpacing: \"0.01em\";\n readonly fontFamily: \"Centra No 2\";\n readonly fontStyle: \"normal\";\n readonly margin: 0;\n readonly fontWeight: \"500\";\n readonly display: \"flex\";\n readonly alignItems: \"center\";\n};\n//# sourceMappingURL=helpers.d.ts.map" }, "index.d.ts": { "path": "index.d.ts", "content": "export * from '../../utils/charts/charts';\nexport * from '../../utils/charts/columnChart';\nexport * from '../../utils/charts/donutChart';\nexport * from '../../utils/charts/funnelChart';\nexport * from '../../utils/charts/helpers';\nexport * from '../../utils/charts/lineChart';\nexport * from '../../utils/charts/sankeyChart';\nexport * from '../../utils/charts/spiderChart';\nexport * from '../../utils/charts/stackedBarChart';\nexport * from '../../utils/charts/stackedBarLineChart';\nexport * from '../../utils/charts/typography';\n//# sourceMappingURL=index.d.ts.map" }, "lineChart.d.ts": { "path": "lineChart.d.ts", "content": "import type { ChartOptions } from '../../types/charts';\n/**\n * This function modifies the the common chart behavior to line chart default behavior.\n * It will not take userPassed option into account.\n */\nexport declare const getLineChartOptions: () => ChartOptions;\n//# sourceMappingURL=lineChart.d.ts.map" }, "sankeyChart.d.ts": { "path": "sankeyChart.d.ts", "content": "import type { ChartOptions } from '../../types/charts';\ninterface SankeyChartOptionsType {\n nodeWidth?: number;\n nodePadding?: number;\n showLegend?: boolean;\n}\nexport declare const getSankeyChartOptions: ({ nodeWidth, showLegend, nodePadding, }: SankeyChartOptionsType) => ChartOptions;\nexport {};\n//# sourceMappingURL=sankeyChart.d.ts.map" }, "spiderChart.d.ts": { "path": "spiderChart.d.ts", "content": "import type { ChartOptions } from '../../types/charts';\nexport declare const bodySmallSecondary: {\n readonly color: \"#565656\";\n readonly fontSize: \"12px\";\n readonly fontWeight: \"400\";\n readonly letterSpacing: \"0.04em\";\n readonly fontFamily: \"Centra No 2\";\n readonly fontStyle: \"normal\";\n readonly margin: 0;\n readonly display: \"flex\";\n readonly alignItems: \"center\";\n};\n/**\n * This function modifies the the common chart behavior to spider chart default behavior.\n * It will not take userPassed option into account.\n */\nexport declare const getSpiderChartOptions: () => ChartOptions;\n//# sourceMappingURL=spiderChart.d.ts.map" }, "stackedBarChart.d.ts": { "path": "stackedBarChart.d.ts", "content": "import type { ChartOptions } from '../../types/charts';\n/**\n * Orientation of the stacked bars.\n * - `horizontal` (default): bars run left-to-right; categories on the vertical\n * axis. Backed by Highcharts `chart.type: 'bar'` (an inverted chart).\n * - `vertical`: bars run bottom-to-top; categories on the horizontal x-axis.\n * Backed by Highcharts `chart.type: 'column'`.\n */\nexport type StackedBarOrientation = 'horizontal' | 'vertical';\nexport declare const getStackedBarChartOptions: (orientation?: StackedBarOrientation) => ChartOptions;\n//# sourceMappingURL=stackedBarChart.d.ts.map" }, "stackedBarLineChart.d.ts": { "path": "stackedBarLineChart.d.ts", "content": "import type { ChartOptions } from '../../types/charts';\nexport declare const getStackedBarLineChartOptions: () => ChartOptions;\n//# sourceMappingURL=stackedBarLineChart.d.ts.map" }, "typography.d.ts": { "path": "typography.d.ts", "content": "export declare const baseType: {\n readonly fontFamily: \"Centra No 2\";\n readonly fontStyle: \"normal\";\n readonly margin: 0;\n readonly color: \"#17172A\";\n readonly letterSpacing: \"0em\";\n readonly fontWeight: \"500\";\n readonly display: \"flex\";\n readonly alignItems: \"center\";\n};\nexport declare const bodySmall: {\n readonly fontSize: \"12px\";\n readonly fontWeight: \"400\";\n readonly letterSpacing: \"0.04em\";\n readonly fontFamily: \"Centra No 2\";\n readonly fontStyle: \"normal\";\n readonly margin: 0;\n readonly color: \"#17172A\";\n readonly display: \"flex\";\n readonly alignItems: \"center\";\n};\nexport declare const formLabelSmall: {\n readonly fontSize: \"12px\";\n readonly fontFamily: \"Centra No 2\";\n readonly fontStyle: \"normal\";\n readonly margin: 0;\n readonly color: \"#17172A\";\n readonly letterSpacing: \"0em\";\n readonly fontWeight: \"500\";\n readonly display: \"flex\";\n readonly alignItems: \"center\";\n};\nexport declare const buttonTextExtraSmall: {\n readonly fontSize: \"12px\";\n readonly letterSpacing: \"0.01em\";\n readonly fontFamily: \"Centra No 2\";\n readonly fontStyle: \"normal\";\n readonly margin: 0;\n readonly color: \"#17172A\";\n readonly fontWeight: \"500\";\n readonly display: \"flex\";\n readonly alignItems: \"center\";\n};\nexport declare const underline: {\n readonly textDecoration: \"underline\";\n};\nexport declare const subTitleExtraSmall: {\n readonly fontSize: \"12px\";\n readonly letterSpacing: \"0em\";\n readonly fontFamily: \"Centra No 2\";\n readonly fontStyle: \"normal\";\n readonly margin: 0;\n readonly color: \"#17172A\";\n readonly fontWeight: \"500\";\n readonly display: \"flex\";\n readonly alignItems: \"center\";\n};\n//# sourceMappingURL=typography.d.ts.map" } }, "allFiles": [ "charts.ts", "columnChart.ts", "donutChart.ts", "funnelChart.ts", "helpers.ts", "index.ts", "lineChart.ts", "sankeyChart.ts", "spiderChart.ts", "stackedBarChart.ts", "stackedBarLineChart.ts", "typography.ts" ] }, "classify": { "name": "classify", "path": "src/utils/classify", "files": { "index.d.ts": { "path": "index.d.ts", "content": "export declare function classify(...args: Array): string;\nexport default classify;\n//# sourceMappingURL=index.d.ts.map" } }, "allFiles": [ "classify.stories.module.css", "classify.stories.tsx", "index.ts" ] }, "click-away": { "name": "click-away", "path": "src/utils/click-away", "files": { "click-away.d.ts": { "path": "click-away.d.ts", "content": "import * as React from 'react';\ntype BoundaryRefType = React.RefObject;\ntype TriggerRefType = React.RefObject;\nexport interface ChildProps {\n onOpen: () => void;\n isOpen: boolean;\n height: number | null | undefined;\n pageBottom: number | null | undefined;\n clickAway: () => void;\n boundaryRef: BoundaryRefType;\n triggerRef: TriggerRefType;\n}\nexport interface ClickAwayRefType {\n forceClose: () => void;\n forceOpen: () => void;\n}\nexport interface ClickAwayProps {\n closeOnEscapeKeypress?: boolean;\n /**\n * Return focus to whatever had it before the popup opened, when the popup\n * closes with focus still inside it (Escape, a selection, Tab past the edge).\n * A click elsewhere on the page is exempt: focus belongs where the user\n * clicked.\n *\n * Off by default. It is only wanted where something moves focus INTO the\n * popup — otherwise focus never left the trigger and there is nothing to\n * restore, and calling `focus()` on a trigger that already has it can be\n * enough to disturb a consumer (a field that opens its own menu on focus\n * would reopen the popup that just closed).\n */\n restoreFocusOnClose?: boolean;\n children: (props: ChildProps) => React.ReactNode;\n onChange?: (isOpen: boolean) => unknown;\n clickAwayRef?: React.RefObject;\n /**\n * When containsNestedFloatingPortals is true, prevents ClickAway from closing the dropdown if the click target\n * is inside a floating portal root element.\n *\n * This is necessary for nested dropdowns rendered using floating portals,\n * such as via `@floating-ui/react`. Floating portals render elements outside\n * the normal DOM tree (often directly into `document.body` or another container)\n * using `ReactDOM.createPortal`. As a result, these nested dropdowns do not\n * appear inside the parent dropdown's `boundaryRef` or `triggerRef` subtree.\n *\n * To address this, the floating portal ensures that all nested dropdowns\n * are mounted into a **shared root element** — effectively maintaining a\n * common DOM ancestry. This allows parent dropdowns to detect when clicks\n * occur within any of their nested children, even if rendered via portals.\n * The shared root element is the closest parent element that has a `data-floating-ui-portal` attribute.\n * Because of this, the ClickAway logic will not close the parent menu if the click target is inside boundaryRef's parentElement.\n *\n * Enabling `containsNestedFloatingPortals` allows the ClickAway logic to account\n * for this shared root and avoids incorrectly closing the parent menu when\n * interacting with nested dropdowns.\n */\n containsNestedFloatingPortals?: boolean;\n}\ninterface ClickAwayState {\n isOpen: boolean;\n height: number | null | undefined;\n pageBottom: number | null | undefined;\n}\nexport declare class ClickAway extends React.Component, ClickAwayState> {\n static defaultProps: {\n containsNestedFloatingPortals?: boolean;\n closeOnEscapeKeypress?: boolean;\n };\n state: ClickAwayState;\n el: HTMLElement | null | undefined;\n boundaryRef: BoundaryRefType;\n triggerRef: TriggerRefType;\n previouslyFocused: HTMLElement | null;\n closedByOutsideClick: boolean;\n componentDidMount(): void;\n componentDidUpdate(_prevProps: Readonly>, prevState: Readonly): void;\n componentWillUnmount(): void;\n render(): React.ReactNode;\n handleOpenClick: () => void;\n restoreFocus: () => void;\n handleCloseClick: (evt: MouseEvent) => void;\n handleCloseOnEscapeKeypress: (evt?: KeyboardEvent) => void;\n forceClose: () => void;\n handleOnChange: () => unknown;\n pageBottom(): number;\n}\nexport {};\n//# sourceMappingURL=click-away.d.ts.map" }, "index.d.ts": { "path": "index.d.ts", "content": "export * from '../../utils/click-away/click-away';\n//# sourceMappingURL=index.d.ts.map" } }, "allFiles": [ "ClickAway.stories.module.css", "ClickAway.stories.tsx", "click-away.ts", "index.ts" ] }, "date-range-picker": { "name": "date-range-picker", "path": "src/utils/date-range-picker", "files": { "date-range-picker.d.ts": { "path": "date-range-picker.d.ts", "content": "import type { Moment } from 'moment';\nimport type { DateRange, DateRangePickerError, DateRangePickerErrorTypes, DateRangeWithTimezone, TimeUnit } from '../../types/date-range-picker';\nimport type { MenuOption } from '../../components/Menu';\nexport declare const makeKey: (value: string) => string;\nexport declare const NAVIGATION_ACTION: Readonly<{\n NEXT: \"next\";\n PREV: \"prev\";\n}>;\nexport declare const MARKERS: Readonly<{\n DATE_RANGE_START: \"FIRST\";\n DATE_RANGE_END: \"SECOND\";\n}>;\nexport declare const WEEKDAYS: readonly [\"Su\", \"Mo\", \"Tu\", \"We\", \"Th\", \"Fr\", \"Sa\"];\nexport declare const getMonths: (t?: ((key: string, fallback: string) => string) | null) => Array;\nexport declare const getDateRangePickerErrors: (t?: ((key: string, fallback: string) => string) | null) => DateRangePickerErrorTypes;\nexport declare const checkRangeValidity: (rangeStart: string | null | undefined, rangeEnd: string | null | undefined, errorBody: DateRangePickerError, onError?: (arg1: DateRangePickerError) => void) => boolean;\nexport declare const wrangleMoment: (date?: string | Date | Moment) => Date;\nexport declare const formatIsoDate: (date?: Moment | string | Date, format?: string) => string;\nexport declare const isStartOfRange: ({ startDate }: DateRange, date: string) => boolean;\nexport declare const isEndOfRange: ({ endDate }: DateRange, date: string) => boolean;\nexport declare const inDateRange: ({ startDate, endDate }: DateRange, date: string) => boolean;\nexport declare const isStartDateEndDateSame: ({ startDate, endDate, }: DateRange) => boolean;\nexport declare const getDaysInMonth: (date: string) => Array>;\nexport declare const getAddedDate: (date: Moment | string, addCount: number, timeUnit: TimeUnit) => string;\nexport declare const getSubtractedDate: (date: Moment | string, subtractCount: number, timeUnit: TimeUnit) => string;\nexport declare const getMonthEndDate: (date: Moment | string) => string;\nexport declare const getTimezones: (t?: ((key: string, fallback: string) => string) | null) => Array;\nexport declare const generateAvailableYears: ({ marker, minDate, maxDate, rangeStartMonth, rangeEndMonth, }: {\n marker?: (typeof MARKERS)[keyof typeof MARKERS];\n minDate: string;\n maxDate: string;\n rangeStartMonth?: string;\n rangeEndMonth?: string;\n}) => Array;\nexport declare const getAvailableMonths: ({ marker, minDate, maxDate, rangeStartMonth, rangeEndMonth, t, }: {\n marker: (typeof MARKERS)[keyof typeof MARKERS];\n minDate: string;\n maxDate: string;\n rangeStartMonth: string;\n rangeEndMonth: string;\n t: ((key: string, fallback: string) => string) | null | undefined;\n}) => Array;\nexport declare const getAvailableMonthsSingleCalendar: ({ date, minDate, maxDate, t, }: {\n date: string;\n minDate: string;\n maxDate: string;\n t: ((key: string, fallback: string) => string) | null | undefined;\n}) => Array;\nexport declare const getValidDates: ({ selectedDateRange, minDate, maxDate, today, onError, t, }: {\n selectedDateRange: DateRangeWithTimezone;\n minDate?: string | null | undefined;\n maxDate?: string | null | undefined;\n today: string;\n onError?: (arg1: DateRangePickerError) => void;\n t: ((key: string, fallback: string) => string) | null | undefined;\n}) => {\n validMinDate: string;\n validMaxDate: string;\n validDateRange: DateRange;\n};\nexport declare const isSame: (date1: Moment | string | Date, date2: Moment | string | Date, unit: \"d\" | \"month\") => boolean;\nexport declare const isBefore: (date1: Moment | string | Date, date2: Moment | string | Date) => boolean;\nexport declare const isAfter: (date1: Moment | string | Date, date2: Moment | string | Date) => boolean;\nexport declare const isSameOrBefore: (date1?: Moment | string | Date | null, date2?: Moment | string | Date | null, unit?: \"d\" | \"month\") => boolean;\nexport declare const isSameOrAfter: (date1?: Moment | string | Date | null, date2?: Moment | string | Date | null, unit?: \"d\" | \"month\") => boolean;\nexport declare const isBetween: (date: Moment | string | Date, startRange: Moment | string | Date, endRange: Moment | string | Date) => boolean;\nexport declare const isValid: (date?: string | null) => boolean;\nexport declare const getFormattedDate: (marker: string, dateRange: DateRange, locale?: string) => string;\nexport declare const getTranslation: (t: ((key: string, fallback: string) => string) | null | undefined, labelToTranslate: string) => string;\n//# sourceMappingURL=date-range-picker.d.ts.map" }, "index.d.ts": { "path": "index.d.ts", "content": "export * from '../../utils/date-range-picker/date-range-picker';\nexport * from '../../utils/date-range-picker/timezones';\n//# sourceMappingURL=index.d.ts.map" }, "timezones.d.ts": { "path": "timezones.d.ts", "content": "export declare const TIMEZONES: Record;\nexport declare const addTimezoneStartOfDay: (date: string, timezone: string) => string;\nexport declare const addTimezoneEndOfDay: (date: string, timezone: string) => string;\nexport declare const getTodayInTimezone: (timezone: string) => string;\n//# sourceMappingURL=timezones.d.ts.map" } }, "allFiles": [ "date-range-picker.ts", "index.ts", "timezones.ts" ] }, "dom": { "name": "dom", "path": "src/utils/dom", "files": { "dom.d.ts": { "path": "dom.d.ts", "content": "import type * as React from 'react';\nexport type Placement = 'top' | 'left' | 'right' | 'bottom';\nexport type ArrowPosition = 'start' | 'center' | 'end';\nexport type Justify = ArrowPosition;\nexport interface PositionedPlacement {\n placement: Placement;\n x: number;\n y: number;\n}\nexport declare function createElement(document: Document, type: string, props: Record): HTMLElement;\nexport declare function pageHeight(): number;\nexport declare function getFixedAnchorPosition(element: HTMLElement, placement?: Placement, pad?: number, justify?: Justify): PositionedPlacement;\nexport declare function getAnchorPosition(element: HTMLElement, placement?: Placement, pad?: number, justify?: Justify): PositionedPlacement;\nexport declare function pxToNumber(px: string): number;\ntype EventListenerOptionsOrUseCapture = boolean | AddEventListenerOptions;\ntype Handlers = Partial>;\nexport declare function listen(target: EventTarget, handlers: Handlers, options?: EventListenerOptionsOrUseCapture, hook?: 'addEventListener' | 'removeEventListener'): void;\nexport declare function forget(target: EventTarget, events: Handlers, options?: EventListenerOptionsOrUseCapture): void;\ntype MixedEvent = React.SyntheticEvent | Event;\nexport declare function stopEvent(event: MixedEvent): void;\nexport declare function stopEventImmediately(event: React.SyntheticEvent): void;\nexport declare function cancelEvent(event: MixedEvent): void;\nexport declare function requestPointerLock(element: Element): Promise;\nexport declare function checkDateInputSupport(): boolean;\nexport declare const getListPasteHandler: ({ listItemSeparatorRegex, handleValue, }: {\n listItemSeparatorRegex?: RegExp;\n handleValue?: (arg1: string[]) => unknown;\n}) => ((arg1: ClipboardEvent) => unknown);\nexport {};\n//# sourceMappingURL=dom.d.ts.map" }, "index.d.ts": { "path": "index.d.ts", "content": "export * from '../../utils/dom/dom';\n//# sourceMappingURL=index.d.ts.map" } }, "allFiles": [ "dom.stories.module.css", "dom.stories.tsx", "dom.ts", "index.ts" ] }, "helpers": { "name": "helpers", "path": "src/utils/helpers", "files": { "helpers.d.ts": { "path": "helpers.d.ts", "content": "export declare const uuid: () => string;\nexport declare const range: (start: number, end: number) => Array;\nexport declare const convertFileSize: (fileSize?: number) => string;\n//# sourceMappingURL=helpers.d.ts.map" }, "index.d.ts": { "path": "index.d.ts", "content": "export * from '../../utils/helpers/helpers';\n//# sourceMappingURL=index.d.ts.map" } }, "allFiles": [ "helpers.stories.module.css", "helpers.stories.tsx", "helpers.ts", "index.ts" ] }, "makeClassNameComponent": { "name": "makeClassNameComponent", "path": "src/utils/makeClassNameComponent", "files": { "index.d.ts": { "path": "index.d.ts", "content": "export * from '../../utils/makeClassNameComponent/makeClassNameComponent';\n//# sourceMappingURL=index.d.ts.map" }, "makeClassNameComponent.d.ts": { "path": "makeClassNameComponent.d.ts", "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\n/** Extract the actual ref instance type from a JSX element/component type */\ntype RefOf = React.ComponentPropsWithRef extends {\n ref?: React.Ref;\n} ? R : never;\n/** Public props for generated components: original props (no ref) + optional className */\nexport type ComponentProps = React.ComponentPropsWithoutRef & {\n className?: string;\n};\n/** HOC display name helper: sets Wrapper.displayName = `${hocName}(WrappedName)` */\nexport declare function nameHoc, C2>(WrapperComponent: T, WrappedComponent: React.ComponentType, hocName: string): T;\n/** Public alias for “className-merging” components */\nexport type ClassNameComponent = Flow.AbstractComponent, RefOf>;\n/**\n * Factory: builds a component for a given intrinsic tag or component type\n * that merges `className` with a base class and forwards its ref.\n */\nexport declare function makeClassNameComponent(baseClassName: string, ComponentType?: C, name?: string): Flow.AbstractComponent, RefOf>;\nexport {};\n//# sourceMappingURL=makeClassNameComponent.d.ts.map" } }, "allFiles": [ "index.ts", "makeClassNameComponent.stories.module.css", "makeClassNameComponent.stories.tsx", "makeClassNameComponent.tsx" ] }, "menu": { "name": "menu", "path": "src/utils/menu", "files": { "index.d.ts": { "path": "index.d.ts", "content": "export * from '../../utils/menu/menu';\n//# sourceMappingURL=index.d.ts.map" }, "menu.d.ts": { "path": "menu.d.ts", "content": "import type * as React from 'react';\nimport type { MenuGroupTitleOption, MenuOption } from '../../components/Menu';\n/**\n * Toggle an option in or out of a multi-select set.\n *\n * A missing `currentSelectedKeys` means \"nothing is selected yet\", not \"bad\n * input\": it is simply what an uncontrolled multi-select dropdown has before its\n * first pick. Treating it as invalid and returning an empty set meant every\n * toggle threw the selection away, so a checkbox-variant dropdown that was never\n * given an initial array could not select anything at all — by mouse as much as\n * by keyboard. Only a missing option key is genuinely nothing to toggle.\n */\nexport declare const getSelectedKeysFromSelectedOption: (currentOption?: MenuOption, currentSelectedKeys?: Array) => Array;\nexport declare const getTextLabelFromSelectedKeys: (currentSelectedKeys?: Array, options?: MenuOption[]) => string;\nexport declare const getButtonLabelFromSelectedKeys: (currentSelectedKeys?: Array, label?: React.ReactNode) => React.ReactNode;\nexport declare const getOptionFromKey: (options?: MenuOption[], key?: string) => MenuOption | null | undefined;\nexport declare const getOptionsFromKeys: (options?: MenuOption[], keys?: Array) => Array;\nexport declare const getFilteredOptionsFromSearchText: (options: MenuOption[], searchText: string) => MenuOption[];\nexport declare const getFilteredOptionsResultText: (options: MenuOption[], staticLabels: {\n [key: string]: string;\n}) => string;\nexport declare const getFilteredComposeOptionsFromSearchText: (composeOptions: Array>, searchText: string) => Array>;\nexport declare const getFilteredComposeOptionsResultText: (composeOptions: Array>, staticLabels: {\n [key: string]: string;\n}) => string;\nexport declare const getFilteredGroupTitleOptionsFromSearchText: (groupTitleOptions: Array, searchText: string) => Array;\nexport declare const getFilteredGroupTitleOptionsResultText: (groupTitleOptions: Array, staticLabels: {\n [key: string]: string;\n}) => string;\n//# sourceMappingURL=menu.d.ts.map" } }, "allFiles": [ "index.ts", "menu.ts" ] }, "merge-refs": { "name": "merge-refs", "path": "src/utils/merge-refs", "files": { "index.d.ts": { "path": "index.d.ts", "content": "export * from '../../utils/merge-refs/merge-refs';\n//# sourceMappingURL=index.d.ts.map" }, "merge-refs.d.ts": { "path": "merge-refs.d.ts", "content": "import type * as React from 'react';\nexport declare function mergeRefs(refs: Array | null | undefined>): React.RefCallback;\n//# sourceMappingURL=merge-refs.d.ts.map" } }, "allFiles": [ "index.ts", "merge-refs.stories.module.css", "merge-refs.stories.tsx", "merge-refs.ts" ] }, "qa": { "name": "qa", "path": "src/utils/qa", "files": { "index.d.ts": { "path": "index.d.ts", "content": "export * from '../../utils/qa/qa';\n//# sourceMappingURL=index.d.ts.map" }, "qa.d.ts": { "path": "qa.d.ts", "content": "/**\n * Generate a stable `data-testid` string.\n *\n * Format:\n * [__][--][----...]\n *\n * Examples:\n * generateTestId({ base: \"profile__email\", slot: \"input\" })\n * // \"profile__email__input\"\n *\n * generateTestId({ base: \"users\", slot: \"item\", index: \"u-100\" })\n * // \"users__item--u-100\"\n *\n * generateTestId({ base: \"filters\", slot: \"chip\", modifiers: [\"selected\", \"lg\"] })\n * // \"filters__chip--selected--lg\"\n *\n * Guidance:\n * - Keep `base` stable and human-readable (don’t derive from user text or use UUIDs).\n * - For repeated items, prefer stable business keys for `index` (e.g., `user.id`).\n * - Use `modifiers` to encode state/variants cleanly in selectors.\n */\nexport interface GenerateTestIdParams {\n base?: string;\n slot?: string;\n index?: number | string;\n modifiers?: ReadonlyArray;\n}\n/** Returns the composed id, or `undefined` if `base` is missing. */\nexport declare function generateTestId(params: GenerateTestIdParams): string | undefined;\n//# sourceMappingURL=qa.d.ts.map" } }, "allFiles": [ "index.ts", "qa.stories.module.css", "qa.stories.tsx", "qa.tsx" ] }, "rating": { "name": "rating", "path": "src/utils/rating", "files": { "index.d.ts": { "path": "index.d.ts", "content": "export * from '../../utils/rating/rating';\n//# sourceMappingURL=index.d.ts.map" }, "rating.d.ts": { "path": "rating.d.ts", "content": "export declare const RATING_ERRORS: Readonly<{\n INVALID_RANGE: {\n type: string;\n description: string;\n };\n INVALID_RATING_LABELS: {\n type: string;\n description: string;\n };\n}>;\nexport declare const RATINGS: Array;\nexport declare const getRatingLabel: (rating: number, labels: Array) => string;\n//# sourceMappingURL=rating.d.ts.map" } }, "allFiles": [ "index.ts", "rating.ts" ] }, "score-bar": { "name": "score-bar", "path": "src/utils/score-bar", "files": { "index.d.ts": { "path": "index.d.ts", "content": "export * from '../../utils/score-bar/score-bar';\n//# sourceMappingURL=index.d.ts.map" }, "score-bar.d.ts": { "path": "score-bar.d.ts", "content": "import type { ScoreBarColorMap, ScoreBarLabelMap } from '../../components/ScoreBar';\nexport declare const getColorByScorePercentage: (totalBars: number, score: number, currentBarNumber: number, colorMap: ScoreBarColorMap) => string;\nexport declare const getLabelByScorePercentage: (score: number, totalBars: number, labelMap?: ScoreBarLabelMap) => string;\nexport declare const SCORE_BAR_ERRORS: Readonly<{\n INVALID_BAR_COUNT: {\n type: string;\n description: string;\n };\n}>;\n//# sourceMappingURL=score-bar.d.ts.map" } }, "allFiles": [ "index.ts", "score-bar.ts" ] }, "string": { "name": "string", "path": "src/utils/string", "files": { "index.d.ts": { "path": "index.d.ts", "content": "export * from '../../utils/string/string';\n//# sourceMappingURL=index.d.ts.map" }, "string.d.ts": { "path": "string.d.ts", "content": "export declare const capitalize: (word: string) => string;\nexport declare const escapeRegExp: (str: string) => string;\nexport declare const formatWord: (word: string, count: number) => string;\nexport declare const truncateString: (inputString: string, maxLength: number) => string;\nexport declare const appendPx: (value?: number | string) => string;\n//# sourceMappingURL=string.d.ts.map" } }, "allFiles": [ "index.ts", "string.stories.module.css", "string.stories.tsx", "string.ts" ] }, "token-list-input": { "name": "token-list-input", "path": "src/utils/token-list-input", "files": { "token-list-input.d.ts": { "path": "token-list-input.d.ts", "content": "import type * as React from 'react';\ninterface V {\n key: string;\n label: string;\n arbitrary?: boolean;\n multiarbitrary?: boolean;\n}\ninterface Group {\n options?: Array;\n groupTitle?: React.ReactNode;\n}\nexport declare const getFirstOption: (options: Array) => V | null;\nexport declare const getFirstOptionFromGroup: (groupTitleOptions: Array>) => V | null;\nexport {};\n//# sourceMappingURL=token-list-input.d.ts.map" } }, "allFiles": [ "token-list-input.ts" ] }, "tokens": { "name": "tokens", "path": "src/utils/tokens", "files": { "index.d.ts": { "path": "index.d.ts", "content": "export * from '../../utils/tokens/tokens';\n//# sourceMappingURL=index.d.ts.map" }, "tokens.d.ts": { "path": "tokens.d.ts", "content": "interface TokenObject {\n [key: string]: string;\n}\nexport type SortOrder = 'asc' | 'desc';\nexport type SortBy = 'name' | 'value';\nexport interface TableDataItem {\n id: string | number;\n name: string;\n value: string;\n demo: string;\n [key: string]: unknown;\n}\nexport type TableData = Array;\nexport interface DataVariation {\n title: string;\n description: string;\n}\nexport declare const dataVariations: Array;\n/**\n *\n * This function takes in an object containing key-value pairs of tokens,\n * where values are strings representing numerical\n * values with optional percentage or viewport units. It also takes in an optional\n * sort order ('asc' or 'desc') and an optional sort by parameter ('name' or 'value').\n *\n * The function sorts the tokens by either their key names (if sortBy='name') or their\n * numerical values (if sortBy='value'). The sort order can be specified as\n * ascending (order='asc') or descending (order='desc').\n *\n * The function handles values with different units by comparing their numerical values.\n * If both values have the same unit, their numerical values are compared directly.\n * If their units are different, tokens with percentage values are considered greater than\n * those with viewport units, and tokens without a percentage or viewport unit are compared\n * based on their numerical values.\n *\n */\nexport declare const getSortedTokenNames: (obj: TokenObject, order?: SortOrder, sortBy?: SortBy) => Array;\nexport declare const filterTableDataBySearchText: (TABLE_DATA: TableData, searchText: string) => TableData;\nexport declare const getRandomDataVariation: () => DataVariation;\nexport declare const handleDownload: (filePath: string, fileName: string) => void;\nexport {};\n//# sourceMappingURL=tokens.d.ts.map" } }, "allFiles": [ "index.ts", "tokens.ts" ] } }, "types": { "charts": { "name": "charts", "path": "src/types/charts.ts", "content": "import type Highcharts from 'highcharts';\n\n\nexport type ChartOptions = Highcharts.Options;\nexport type AxisOptions = Highcharts.AxisOptions;\nexport type BreadcrumbsOptions = Highcharts.NavigationBreadcrumbsOptions;\nexport type LegendOptionsType = Highcharts.LegendOptions;\nexport type CSSObject = Highcharts.CSSObject;\nexport type DataOptionsType = Highcharts.PointOptionsObject;\nexport type SeriesOptionsType = Highcharts.SeriesOptionsType;\nexport type ColumnSeriesOptions = Highcharts.SeriesColumnOptions;\nexport type LineSeriesOptions = Highcharts.SeriesLineOptions;\nexport type PieSeriesOptions = Highcharts.SeriesPieOptions;\nexport type FunnelSeriesOptions = Highcharts.SeriesFunnelOptions;\nexport type SankeySeriesOptions = Highcharts.SeriesSankeyOptions;\nexport type SankeyNodeOptions = Highcharts.SeriesSankeyNodesOptionsObject;\nexport type SankeyPointOptions = Highcharts.SeriesSankeyPointOptionsObject;\nexport type Drilldown = Highcharts.DrilldownOptions;\nexport type PlotOptionsType = Highcharts.PlotOptions;\nexport type ChartTooltip = Highcharts.TooltipOptions;\nexport type Legend = Highcharts.LegendOptions;\nexport type Credits = Highcharts.CreditsOptions;\nexport type Navigation = Highcharts.NavigationOptions;\nexport type ChartBreadcrumbs = Highcharts.NavigationBreadcrumbsOptions;\nexport type ButtonTheme = Highcharts.NavigationBreadcrumbsButtonThemeOptions;\nexport type Position = Highcharts.NavigationBreadcrumbsPositionOptions;\n\nexport interface ChartRef {\n chart?: Highcharts.Chart;\n}\n" }, "common": { "name": "common", "path": "src/types/common.ts", "content": "export type GroupAlign = 'vertical' | 'horizontal-fixed' | 'horizontal-fluid';\n\nexport const ALERT_SEMANTIC = Object.freeze({\n neutral: 'neutral',\n success: 'success',\n information: 'information',\n warning: 'warning',\n danger: 'danger',\n});\n\nexport type AlertSemanticType =\n (typeof ALERT_SEMANTIC)[keyof typeof ALERT_SEMANTIC];\n" }, "date-range-picker": { "name": "date-range-picker", "path": "src/types/date-range-picker.ts", "content": "export type TimeUnit = 'years' | 'months' | 'days' | 'd' | 'M' | 'y';\n\nexport interface DateRange {\n startDate?: string | null | undefined;\n endDate?: string | null | undefined;\n}\n\nexport interface DateRangePickerErrorTypes {\n [key: string]: {\n type: string;\n description: string;\n };\n}\n\nexport interface DateRangePickerError {\n type: string;\n description: string;\n}\n\nexport interface DateRangeWithTimezone\n extends Omit {\n startDateUTC?: string | null | undefined;\n endDateUTC?: string | null | undefined;\n timezone?: string;\n}\n" }, "index": { "name": "index", "path": "src/types/index.ts", "content": "export * from 'src/types/charts';\nexport * from 'src/types/common';\nexport * from 'src/types/date-range-picker';\nexport * from 'src/types/menu';\nexport * from 'src/types/toast';\nexport * from 'src/types/typography';\nexport * from 'src/types/utils';\n" }, "menu": { "name": "menu", "path": "src/types/menu.ts", "content": "export type MenuClassNames = Readonly<{\n wrapper?: string;\n option?: string;\n groupTitle?: string;\n optionTextContainer?: string;\n optionTextLabel?: string;\n header?: string;\n footer?: string;\n}>;\n\nexport interface MenuLabelTooltip {\n maxLines?: number;\n}\n" }, "toast": { "name": "toast", "path": "src/types/toast.ts", "content": "import type * as React from 'react';\n\n\nexport const POSITIONS = {\n TOP_CENTER: 'topCenter',\n TOP_LEFT: 'topLeft',\n TOP_RIGHT: 'topRight',\n BOTTOM_LEFT: 'bottomLeft',\n BOTTOM_RIGHT: 'bottomRight',\n BOTTOM_CENTER: 'bottomCenter',\n} as const;\n\nexport const ACTIONS = {\n ADD: 'ADD',\n REMOVE: 'REMOVE',\n} as const;\n\nexport type PositionTypes = (typeof POSITIONS)[keyof typeof POSITIONS];\nexport type ActionTypes = (typeof ACTIONS)[keyof typeof ACTIONS];\n\nexport type ContentTypes = React.ReactNode;\n\nexport interface ToastOptions {\n timeout?: number;\n position?: PositionTypes;\n autoClose?: boolean;\n uniqueCode?: string | number;\n}\n\nexport interface OptionTypes extends Omit {\n id: string;\n key?: string;\n}\n\nexport type CallbackFuncTypes = (\n type: ActionTypes,\n content: ContentTypes,\n options: OptionTypes,\n) => void;\n" }, "typography": { "name": "typography", "path": "src/types/typography.ts", "content": "export const TEXT_COLORS = Object.freeze({\n primary: 'primary',\n secondary: 'secondary',\n tertiary: 'tertiary',\n disabled: 'disabled',\n clickable: 'clickable',\n neutral: 'neutral',\n success: 'success',\n information: 'information',\n warning: 'warning',\n danger: 'danger',\n inversePrimary: 'inversePrimary',\n inverseSecondary: 'inverseSecondary',\n favorite: 'favorite',\n});\n\nexport type ColorTypes = (typeof TEXT_COLORS)[keyof typeof TEXT_COLORS];\n" }, "utils": { "name": "utils", "path": "src/types/utils.ts", "content": "/**\n * ------------------------------------------------------------------------\n * Utility types for Flow-style spread + override semantics\n * ------------------------------------------------------------------------\n *\n * WHY THIS Type EXISTS\n * --------------------\n * In Flow you can write:\n *\n * type B = { ...A, c: number };\n *\n * which means \"take all of A's properties, but if there is a conflict,\n * override with the new definition.\" In TypeScript, doing the naive\n *\n * type B = A & { c: number };\n *\n * will give you `c: string & number` (=> `never`) instead of the\n * intended override. That leads to subtle bugs or unusable types.\n *\n * To avoid this pitfall and to set a clear team standard, we define\n * short utilities here (`Over`, `OverAll`, etc.) that encode the\n * intended semantics: **include everything from the left, right side\n * wins on conflicts**.\n *\n *\n * WHAT EACH UTILITY DOES\n * ----------------------\n *\n * Over\n * - Include all properties from T\n * - Add properties from R\n * - For overlapping keys, R overrides T\n *\n * OverAll\n * - Fold multiple overrides in sequence, left → right\n * - Equivalent to: Over(Over(Over(T, R1), R2), ...)\n * - Rightmost definition of a key always wins\n *\n * OverOnly\n * - Same as Over, but disallows adding brand-new keys\n * - Useful when you want to enforce \"true override only\"\n *\n * OverAllOnly\n * - Same as OverAll, but strict: every key in every R must\n * already exist in T (or an earlier override)\n *\n *\n * EXAMPLES\n * --------\n *\n * // Base shape\n * type A = { a: boolean; b: number; c: string };\n *\n * // Simple override\n * type B = Over;\n * // => { a: boolean; b: number; c: number }\n *\n * // Multiple overrides\n * type C = OverAll;\n * // => { a: boolean; c: number; b: string; d: Date }\n *\n * // Strict variant (no new keys allowed)\n * type D = OverOnly; // OK\n * type E = OverOnly; // ERROR (d not in A)\n *\n *\n * DESIGN SYSTEM USAGE\n * -------------------\n * - Use **Over** by default whenever you would otherwise write\n * `A & { ... }`. This ensures right-biased override and prevents\n * \"never\" bugs.\n *\n * - Use **OverAll** if you are combining 3+ prop bags or when you\n * have `A & B & C & { ... }`.\n *\n * - Use **OverOnly / OverAllOnly** when you want to *forbid*\n * introducing brand-new props, e.g. when extending a public API\n * contract that must not grow new keys.\n *\n *\n * TEAM STANDARD\n * -------------\n * ✅ Always prefer Over / OverAll for prop composition in DS components.\n * ❌ Avoid raw `& { ... }` intersections for overrides — they will\n * produce `never` on conflicts.\n *\n * This makes our type contracts predictable, Flow-like, and safer\n * against accidental regressions when new keys are added upstream.\n *\n */\n\nexport type Over = Omit & R;\n\nexport type OverAll<\n T extends object,\n Rs extends readonly object[],\n> = Rs extends [infer H extends object, ...infer Tail extends readonly object[]]\n ? OverAll, Tail>\n : T;\n\n// Strict: only allow overriding keys that already exist in T\nexport type OverOnly<\n T extends object,\n R extends {[K in keyof R & keyof T]: unknown} & object,\n> = Omit & R;\n\nexport type OverAllOnly<\n T extends object,\n Rs extends readonly object[],\n> = Rs extends [infer H extends object, ...infer Tail extends readonly object[]]\n ? OverAllOnly, Tail>\n : T;\n" } } }