@a-little-world/little-world-design-system 2.10.0

package/dist/esm/utils/parser.js

@@ -0,0 +1,195 @@
+import React from 'react';
+import styled from 'styled-components';
+import Button from '../components/Button/Button';
+import Link from '../components/Link/Link';
+import replaceUrlsWithAnchors from './replaceUrlsWithAnchors';
+const ColorText = styled.strong `
+  color: ${({ theme, color }) => color === SupportedColorTags.bold
+    ? 'currentColor'
+    : theme.color.text[color]};
+`;
+const ANCHOR_TAG = 'a';
+const BUTTON_TAG = 'button';
+var SupportedColorTags;
+(function (SupportedColorTags) {
+    SupportedColorTags["highlight"] = "highlight";
+    SupportedColorTags["bold"] = "bold";
+})(SupportedColorTags || (SupportedColorTags = {}));
+const findTags = (text) => {
+    const tags = [];
+    const textLength = text.length;
+    let position = 0;
+    while (position < textLength) {
+        const openBracket = text.indexOf('<', position);
+        if (openBracket === -1)
+            break;
+        const closeBracket = text.indexOf('>', openBracket);
+        if (closeBracket === -1)
+            break;
+        const tagContent = text.substring(openBracket + 1, closeBracket);
+        // Check if it's a valid opening tag (starts with letter)
+        if (/^[a-zA-Z]/.test(tagContent)) {
+            const firstSpace = tagContent.indexOf(' ');
+            const tagName = firstSpace === -1 ? tagContent : tagContent.substring(0, firstSpace);
+            const attributesText = firstSpace === -1 ? '' : tagContent.substring(firstSpace + 1);
+            // Parse attributes safely
+            let attributes = {};
+            if (attributesText.trim()) {
+                try {
+                    attributes = JSON.parse(attributesText);
+                }
+                catch {
+                    // Invalid JSON - treat as plain text
+                    position = closeBracket + 1;
+                    continue;
+                }
+            }
+            // Look for closing tag
+            const closingTag = `</${tagName}>`;
+            const closingTagIndex = text.indexOf(closingTag, closeBracket + 1);
+            if (closingTagIndex !== -1) {
+                // Found complete tag
+                tags.push({
+                    start: openBracket,
+                    end: closingTagIndex + closingTag.length,
+                    tagName,
+                    attributes,
+                    hasClosingTag: true,
+                    contentStart: closeBracket + 1,
+                    contentEnd: closingTagIndex,
+                });
+                position = closingTagIndex + closingTag.length;
+            }
+            else {
+                // No closing tag - treat as plain text
+                position = closeBracket + 1;
+            }
+        }
+        else {
+            // Not a valid tag - move past it
+            position = closeBracket + 1;
+        }
+    }
+    return tags;
+};
+const parseContent = (content, options) => {
+    const tags = findTags(content);
+    if (tags.length === 0) {
+        return [content];
+    }
+    const components = [];
+    let currentIndex = 0;
+    for (const tag of tags) {
+        // Add text before this tag
+        if (tag.start > currentIndex) {
+            components.push(content.substring(currentIndex, tag.start));
+        }
+        // Extract content between tags
+        const tagContent = content.substring(tag.contentStart, tag.contentEnd);
+        // Process the tag based on type and options
+        if (tag.tagName === ANCHOR_TAG) {
+            // Always process anchor tags
+            const nestedContent = parseContent(tagContent, options);
+            components.push(tag.attributes.href ? (React.createElement(Link, { key: `${tag.tagName}-${tag.start}-${tag.end}`, to: tag.attributes.href, ...tag.attributes }, nestedContent)) : (React.createElement(React.Fragment, null, nestedContent)));
+        }
+        else if (options.onlyLinks) {
+            // In onlyLinks mode, treat all non-anchor tags as plain text
+            components.push(content.substring(tag.start, tag.end));
+        }
+        else if (tag.tagName === BUTTON_TAG) {
+            const nestedContent = parseContent(tagContent, options);
+            components.push(React.createElement(Button, { key: `${tag.tagName}-${tag.start}-${tag.end}`, ...tag.attributes }, nestedContent));
+        }
+        else if (Object.values(SupportedColorTags).includes(tag.tagName)) {
+            const nestedContent = parseContent(tagContent, options);
+            components.push(React.createElement(ColorText, { key: `${tag.tagName}-${tag.start}-${tag.end}`, color: SupportedColorTags[tag.tagName] }, nestedContent));
+        }
+        else if (options.customElements) {
+            // Check for custom elements
+            const customElement = options.customElements.find(element => element.tag === tag.tagName);
+            if (customElement) {
+                const nestedContent = parseContent(tagContent, options);
+                components.push(React.createElement(customElement.Component, { key: `${tag.tagName}-${tag.start}-${tag.end}`, ...tag.attributes, ...customElement.props }, nestedContent));
+            }
+            else {
+                // Unrecognized tag, add as plain text
+                components.push(content.substring(tag.start, tag.end));
+            }
+        }
+        else {
+            // Unrecognized tag, add as plain text
+            components.push(content.substring(tag.start, tag.end));
+        }
+        currentIndex = tag.end;
+    }
+    // Add remaining text after last tag
+    if (currentIndex < content.length) {
+        components.push(content.substring(currentIndex));
+    }
+    return components;
+};
+const textParser = (text, options = {}) => {
+    const nonInteractive = options.nonInteractive || false;
+    // First convert HTML links to recognised anchor tags
+    const textWithParsedUrls = nonInteractive
+        ? text
+        : replaceUrlsWithAnchors(text);
+    // Find all complete tags
+    const tags = findTags(textWithParsedUrls);
+    if (tags.length === 0) {
+        return textWithParsedUrls;
+    }
+    const components = [];
+    let currentIndex = 0;
+    for (const tag of tags) {
+        // Add text before this tag
+        if (tag.start > currentIndex) {
+            components.push(textWithParsedUrls.substring(currentIndex, tag.start));
+        }
+        // Extract content between tags
+        const content = textWithParsedUrls.substring(tag.contentStart, tag.contentEnd);
+        // Process the tag based on type
+        if (tag.tagName === ANCHOR_TAG) {
+            // Always process anchor tags (even in onlyLinks mode)
+            const nestedContent = parseContent(content, options);
+            components.push(tag.attributes.href && !nonInteractive ? (React.createElement(Link, { key: `${tag.tagName}-${tag.start}-${tag.end}`, to: tag.attributes.href, ...tag.attributes }, nestedContent)) : (React.createElement(React.Fragment, null, nestedContent)));
+        }
+        else if (options.onlyLinks) {
+            // In onlyLinks mode, treat all non-anchor tags as plain text
+            components.push(textWithParsedUrls.substring(tag.start, tag.end));
+        }
+        else if (tag.tagName === BUTTON_TAG) {
+            const nestedContent = parseContent(content, options);
+            components.push(nonInteractive ? (React.createElement(React.Fragment, null, nestedContent)) : (React.createElement(Button, { key: `${tag.tagName}-${tag.start}-${tag.end}`, ...tag.attributes }, nestedContent)));
+        }
+        else if (Object.values(SupportedColorTags).includes(tag.tagName)) {
+            const nestedContent = parseContent(content, options);
+            components.push(nonInteractive ? (React.createElement(React.Fragment, null, nestedContent)) : (React.createElement(ColorText, { key: `${tag.tagName}-${tag.start}-${tag.end}`, color: SupportedColorTags[tag.tagName] }, nestedContent)));
+        }
+        else if (options.customElements) {
+            // Check for custom elements
+            const customElement = options.customElements.find(element => element.tag === tag.tagName);
+            if (customElement) {
+                const nestedContent = parseContent(content, options);
+                components.push(React.createElement(customElement.Component, { key: `${tag.tagName}-${tag.start}-${tag.end}`, ...tag.attributes, ...customElement.props }, nestedContent));
+            }
+            else {
+                // Unrecognized tag, add as plain text
+                components.push(textWithParsedUrls.substring(tag.start, tag.end));
+            }
+        }
+        else {
+            // Unrecognized tag, add as plain text
+            components.push(textWithParsedUrls.substring(tag.start, tag.end));
+        }
+        currentIndex = tag.end;
+    }
+    // Add remaining text after last tag
+    if (currentIndex < textWithParsedUrls.length) {
+        components.push(textWithParsedUrls.substring(currentIndex));
+    }
+    return (React.createElement("span", null, components.map((section, index) => typeof section === 'string'
+        ? section
+        : React.cloneElement(section, { key: index }))));
+};
+export default textParser;

package/dist/esm/utils/replaceUrlsWithAnchors.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Replaces all URLs in a text with HTML anchor tags
+ * @param text - The input text containing URLs
+ * @returns The text with URLs replaced with anchor tags
+ */
+export default function replaceUrlsWithAnchors(text: string): string;

package/dist/esm/utils/replaceUrlsWithAnchors.js

@@ -0,0 +1,29 @@
+import { isValidUrl } from '@a-little-world/little-world-design-system-core';
+// Example outputs:
+/*
+Input: Check out www.google.com for more info
+Output: Check out <a href="https://www.google.com" target="_blank">www.google.com</a> for more info
+
+Input: Visit little-world.io and https://example.com
+Output: Visit <a href="https://little-world.io" target="_blank">little-world.io</a> and <a href="https://example.com" target="_blank">https://example.com</a>
+*/
+const urlPattern = /(?<=^|\s)(?:https?:\/\/)?(?:www\.)?(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,}(?:\/[^\s]*)?/g;
+/**
+ * Replaces all URLs in a text with HTML anchor tags
+ * @param text - The input text containing URLs
+ * @returns The text with URLs replaced with anchor tags
+ */
+export default function replaceUrlsWithAnchors(text) {
+    return text.replace(urlPattern, match => {
+        // Ensure URL has protocol for href
+        try {
+            if (!isValidUrl(match))
+                return match;
+            const href = match.startsWith('http') ? match : `https://${match}`;
+            return `<a {"target":"_blank", "href":"${href}"}>${match}</a>`;
+        }
+        catch {
+            return match;
+        }
+    });
+}

package/dist/esm/utils/status.d.ts

@@ -0,0 +1,6 @@
+type StatusProps = {
+    React: string;
+    Figma: string;
+};
+declare const Status: ({ React, Figma }: StatusProps) => import("react").JSX.Element;
+export default Status;

package/dist/esm/utils/status.js

@@ -0,0 +1,49 @@
+import styled from 'styled-components';
+const Wrapper = styled.div `
+  display: flex;
+  gap: ${({ theme }) => theme.spacing.xxsmall};
+  margin: ${({ theme }) => theme.spacing.medium}; 0 ${({ theme }) => theme.spacing.xsmall}; 0;
+`;
+const ReactStatus = styled.div `
+  border-radius: 4px;
+  padding: ${({ theme }) => theme.spacing.xxsmall}
+    ${({ theme }) => theme.spacing.xsmall};
+  font-family: monospace;
+  background: #20232a;
+  color: #61dafb;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing.xxsmall};
+  align-items: center;
+  font-size: 1rem;
+`;
+const FigmaStatus = styled.a `
+  border-radius: 4px;
+  padding: ${({ theme }) => theme.spacing.xxsmall}
+    ${({ theme }) => theme.spacing.xsmall};
+  display: flex;
+  gap: ${({ theme }) => theme.spacing.xsmall};
+  align-items: center;
+  background: #000;
+  text-decoration: none;
+  color: #fff;
+  font-size: 0.9rem;
+
+  &:hover {
+    background: #333;
+  }
+`;
+const Status = ({ React, Figma }) => {
+    return (React.createElement(Wrapper, null,
+        React && (React.createElement(ReactStatus, null,
+            React.createElement("img", { src: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xMS41IC0xMC4yMzE3NCAyMyAyMC40NjM0OCI+CiAgPHRpdGxlPlJlYWN0IExvZ288L3RpdGxlPgogIDxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSIyLjA1IiBmaWxsPSIjNjFkYWZiIi8+CiAgPGcgc3Ryb2tlPSIjNjFkYWZiIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIi8+CiAgICA8ZWxsaXBzZSByeD0iMTEiIHJ5PSI0LjIiIHRyYW5zZm9ybT0icm90YXRlKDYwKSIvPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIiB0cmFuc2Zvcm09InJvdGF0ZSgxMjApIi8+CiAgPC9nPgo8L3N2Zz4K", alt: "", height: "20" }),
+            React.createElement("div", null, React))),
+        Figma && (React.createElement(FigmaStatus, { href: Figma },
+            React.createElement("svg", { height: "20px", viewBox: "0 0 38 57" },
+                React.createElement("path", { fill: "#1abcfe", d: "M19 28.5a9.5 9.5 0 1 1 19 0 9.5 9.5 0 0 1-19 0z" }),
+                React.createElement("path", { fill: "#0acf83", d: "M0 47.5A9.5 9.5 0 0 1 9.5 38H19v9.5a9.5 9.5 0 1 1-19 0z" }),
+                React.createElement("path", { fill: "#ff7262", d: "M19 0v19h9.5a9.5 9.5 0 1 0 0-19H19z" }),
+                React.createElement("path", { fill: "#f24e1e", d: "M0 9.5A9.5 9.5 0 0 0 9.5 19H19V0H9.5A9.5 9.5 0 0 0 0 9.5z" }),
+                React.createElement("path", { fill: "#a259ff", d: "M0 28.5A9.5 9.5 0 0 0 9.5 38H19V19H9.5A9.5 9.5 0 0 0 0 28.5z" })),
+            React.createElement("div", null, "Link")))));
+};
+export default Status;

package/dist/esm/utils/styles.d.ts

@@ -0,0 +1 @@
+export declare const pixelate: (value: number) => string;

package/dist/esm/utils/styles.js

@@ -0,0 +1 @@
+export const pixelate = (value) => `${value}px`;

package/dist/esm/utils/types.d.ts

@@ -0,0 +1 @@
+export type ValueOf<T> = T[keyof T];

package/dist/esm/utils/types.js

@@ -0,0 +1 @@
+export {};

package/jest.config.ts

@@ -0,0 +1,30 @@
+const config = {
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
+  moduleNameMapper: {
+    '\\.svg': '<rootDir>/__mocks__/svg.js',
+  },
+  transform: {
+    '^.+\\.(ts|tsx)$': [
+      'ts-jest',
+      {
+        tsconfig: 'tsconfig.test.json',
+      },
+    ],
+  },
+  testMatch: ['**/__tests__/**/*.(ts|tsx|js)', '**/*.(test|spec).(ts|tsx|js)'],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
+  collectCoverageFrom: [
+    'src/**/*.{ts,tsx}',
+    '!src/**/*.d.ts',
+    '!src/setupTests.ts',
+  ],
+  extensionsToTreatAsEsm: ['.ts', '.tsx'],
+  globals: {
+    'ts-jest': {
+      useESM: true,
+    },
+  },
+} as const;
+
+export default config;

package/package.json

@@ -0,0 +1,98 @@
+{
+  "name": "@a-little-world/little-world-design-system",
+  "version": "2.10.0",
+  "description": "Design system for Little World applications",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/a-little-world/little-world-design-system.git"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "author": "",
+  "license": "LGPL-3.0-only",
+  "bugs": {
+    "url": "https://github.com/a-little-world/little-world-design-system/issues"
+  },
+  "homepage": "https://github.com/a-little-world/little-world-design-system#readme",
+  "devDependencies": {
+    "@babel/cli": "^7.19.3",
+    "@babel/core": "^7.20.2",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "@chromatic-com/storybook": "^4.1.3",
+    "@mdx-js/react": "^2.2.1",
+    "@storybook/addon-a11y": "10.0.8",
+    "@storybook/addon-themes": "10.0.8",
+    "@storybook/addon-webpack5-compiler-swc": "^4.0.2",
+    "@storybook/react-webpack5": "10.0.8",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.3.1",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^29.2.4",
+    "@types/lodash": "^4.17.16",
+    "@types/mdx": "^2.0.3",
+    "@types/react": "^19.1.10",
+    "@types/react-dom": "^19.1.7",
+    "@types/styled-components": "^5.1.26",
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.3",
+    "jest": "^29.3.1",
+    "jest-environment-jsdom": "^29.3.1",
+    "react-router-dom": "^6.28.2",
+    "rimraf": "^6.0.1",
+    "storybook": "10.0.8",
+    "storybook-addon-remix-react-router": "^5.0.0",
+    "styled-components": "^6.1.18",
+    "ts-jest": "^29.1.0",
+    "ts-loader": "^9.4.2",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.9.2",
+    "eslint-plugin-storybook": "10.0.8",
+    "@storybook/addon-docs": "10.0.8"
+  },
+  "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-navigation-menu": "^1.2.14",
+    "@radix-ui/react-popover": "1.1.15",
+    "@radix-ui/react-progress": "^1.1.7",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-toast": "^1.2.15",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "csstype": "^3.1.2",
+    "lodash": "^4.17.21",
+    "react-phone-input-2": "^2.15.1",
+    "@a-little-world/little-world-design-system-core": "1.7.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^6.28.2",
+    "styled-components": "^6.1.18"
+  },
+  "scripts": {
+    "test": "jest",
+    "test-watch": "jest --watch",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "build": "rimraf dist && npm run build:esm && npm run build:cjs",
+    "build:esm": "tsc --outDir dist/esm",
+    "build:cjs": "tsc --module commonjs --outDir dist/cjs",
+    "watch": "tsc --watch",
+    "lint": "eslint src --ext .ts,.tsx",
+    "lint:fix": "eslint src --ext .ts,.tsx --fix",
+    "format": "prettier --write src",
+    "format:check": "prettier --check src"
+  }
+}

package/src/components/Accordion/Accordion.stories.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+
+import Text from '../Text/Text';
+import Accordion, { AccordionContent } from './Accordion';
+import styled from 'styled-components';
+
+export default {
+  component: Accordion,
+  title: 'Components/Accordion',
+};
+
+export const Default = args => {
+  return <Accordion {...args} />;
+};
+
+export const WithCustomContent = args => {
+  return <Accordion {...args} />;
+};
+
+const CustomContentWrapper = styled(AccordionContent)`
+  background-color: ${({ theme }) => theme.color.surface.accent};
+  padding: ${({ theme }) => theme.spacing.medium};
+  border-radius: ${({ theme }) => theme.radius.medium};
+  border: 1px solid ${({ theme }) => theme.color.border.moderate};
+`;
+
+Default.args = {
+  items: [
+    {
+      content: (
+        <Text>This is content of the highest quality. The finest degree.</Text>
+      ),
+      header: 'High quality content',
+    },
+    {
+      content: <Text>This is content of a medium quality. A new normal.</Text>,
+      header:
+        'Content of a mid range but testing out a longer sentence to see the design when it is multi-line',
+    },
+    {
+      content: <Text>This is content of the lowest quality. A new low.</Text>,
+      header: 'Low quality content',
+    },
+  ],
+};
+
+WithCustomContent.args = {
+  ContentWrapper: CustomContentWrapper,
+  items: [
+    {
+      content: (
+        <Text>This is content of the highest quality. The finest degree.</Text>
+      ),
+      header: 'High quality content',
+    },
+    {
+      content: <Text>This is content of a medium quality. A new normal.</Text>,
+      header:
+        'Content of a mid range but testing out a longer sentence to see the design when it is multi-line',
+    },
+    {
+      content: <Text>This is content of the lowest quality. A new low.</Text>,
+      header: 'Low quality content',
+    },
+  ],
+};

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+
+import { AccordionBaseProps } from '@a-little-world/little-world-design-system-core';
+import Text from '../Text/Text';
+import { TextTypes } from '@a-little-world/little-world-design-system-core';
+import {
+  AccordionContent,
+  AccordionHeader,
+  AccordionItem,
+  AccordionRoot,
+  AccordionTrigger,
+  TriggerIcon,
+} from './styles';
+
+export { AccordionContent };
+export interface AccordionProps extends AccordionBaseProps {
+  children?: React.ReactNode;
+  className?: string;
+  ContentWrapper?: React.ComponentType<{ children: React.ReactNode }>;
+  defaultOpen?: boolean;
+  onToggle?: (isOpen: boolean) => void;
+}
+
+const Accordion: React.FC<AccordionProps> = ({
+  className,
+  ContentWrapper,
+  headerType,
+  headerColor,
+  items,
+}) => {
+  return (
+    <AccordionRoot className={className} type="single" collapsible>
+      {items.map(({ content, header }) => (
+        <AccordionItem value={header} key={header}>
+          <AccordionHeader id={header}>
+            <AccordionTrigger>
+              <Text type={headerType || TextTypes.Body4} color={headerColor}>
+                {header}
+              </Text>
+              <TriggerIcon
+                label="accordion toggle icon"
+                width="14px"
+                height="14px"
+                color={headerColor}
+              />
+            </AccordionTrigger>
+          </AccordionHeader>
+          {ContentWrapper ? (
+            <ContentWrapper>{content}</ContentWrapper>
+          ) : (
+            <AccordionContent>{content}</AccordionContent>
+          )}
+        </AccordionItem>
+      ))}
+    </AccordionRoot>
+  );
+};
+
+export default Accordion;

package/src/components/Accordion/styles.tsx

@@ -0,0 +1,68 @@
+import * as Accordion from '@radix-ui/react-accordion';
+import styled from 'styled-components';
+
+import { ChevronDownIcon } from '../Icon';
+
+export const AccordionRoot = styled(Accordion.Root)`
+  border: 1px solid ${({ theme }) => theme.color.border.subtle};
+  border-radius: 8px;
+
+  :root {
+    --radix-accordion-content-width: 100%;
+    --radix-collapsible-content-width: 100%;
+  }
+`;
+
+export const AccordionItem = styled(Accordion.Item)`
+  box-sizing: border-box;
+  margin: 0;
+  width: 100%;
+  border-bottom: 1px solid ${({ theme }) => theme.color.border.subtle};
+  padding: ${({ theme }) => theme.spacing.xxsmall}
+    ${({ theme }) => theme.spacing.small};
+  padding-bottom: 0px;
+
+  &:last-child {
+    border-top-width: 0px;
+    border-bottom-width: 0px;
+  }
+`;
+
+export const AccordionHeader = styled(Accordion.Header)`
+  margin: 0;
+  width: 100%;
+`;
+
+export const AccordionContent = styled(Accordion.Content)`
+  width: 100%;
+  background: ${({ theme }) => theme.color.surface.secondary};
+  border-radius: 10px;
+  gap: ${({ theme }) => theme.spacing.xxsmall};
+  padding: ${({ theme }) => theme.spacing.small};
+  margin-bottom: ${({ theme }) => theme.spacing.small};
+  line-height: 1.5;
+  display: flex;
+  flex-direction: column;
+
+  &[hidden] {
+    display: none;
+  }
+`;
+
+export const AccordionTrigger = styled(Accordion.Trigger)`
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  background: none;
+  padding: ${({ theme }) => theme.spacing.xxsmall} 0;
+  padding-bottom: ${({ theme }) => theme.spacing.small};
+  gap: ${({ theme }) => theme.spacing.small};
+  width: 100%;
+  border: none;
+  text-align: left;
+`;
+
+export const TriggerIcon = styled(ChevronDownIcon)`
+  flex-shrink: 0;
+  margin-top: 6px;
+`;