@redocly/theme 0.59.0-next.0 → 0.59.0-next.10

package/lib/markdoc/components/Tabs/Tabs.js

@@ -15,21 +15,29 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabContent = exports.TabsSize = void 0;
 exports.Tabs = Tabs;
 const react_1 = __importStar(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
+const react_router_dom_1 = require("react-router-dom");
+const styled_components_1 = __importStar(require("styled-components"));
 const hooks_1 = require("../../../core/hooks");
 const TabList_1 = require("../../../markdoc/components/Tabs/TabList");
 const utils_1 = require("../../../core/utils");
@@ -38,22 +46,62 @@ var TabsSize;
     TabsSize["SMALL"] = "small";
     TabsSize["MEDIUM"] = "medium";
 })(TabsSize || (exports.TabsSize = TabsSize = {}));
-function Tabs({ id, children, className, size, initialTab: propInitialTab, }) {
+function Tabs({ id, children, className, size, initialTab: propInitialTab, forceReady = false, }) {
     var _a, _b;
-    const [childrenArray, setChildrenArray] = (0, react_1.useState)(react_1.default.Children.toArray(children));
+    const childrenArray = react_1.default.Children.toArray(children);
+    const [isReady, setIsReady] = (0, react_1.useState)(false);
+    const containerRef = (0, react_1.useRef)(null);
     const initialTab = (_b = propInitialTab !== null && propInitialTab !== void 0 ? propInitialTab : (_a = childrenArray[0]) === null || _a === void 0 ? void 0 : _a.props.label) !== null && _b !== void 0 ? _b : '';
-    const { activeTab, setActiveTab } = (0, hooks_1.useActiveTab)({ tabsId: id, initialTab });
-    (0, react_1.useEffect)(() => {
-        setChildrenArray(react_1.default.Children.toArray(children));
-    }, [children]);
-    return (react_1.default.createElement(TabsContainer, { "data-component-name": "Markdoc/Tabs/Tabs", className: className, key: id },
-        react_1.default.createElement(TabList_1.TabList, { size: size, childrenArray: childrenArray, activeTab: activeTab, onTabChange: setActiveTab }),
+    const labelsHash = childrenArray.map((c) => c.props.label).join('|');
+    const handleReadyChange = (0, react_1.useCallback)((ready) => {
+        setIsReady(ready);
+    }, []);
+    // Reset isReady when children change (new page/tabs)
+    // Use useLayoutEffect to run synchronously before paint
+    (0, react_1.useLayoutEffect)(() => {
+        setIsReady(false);
+    }, [labelsHash]);
+    const inRouter = (0, react_router_dom_1.useInRouterContext)();
+    return (react_1.default.createElement(TabsView, { id: id, className: className, size: size, childrenArray: childrenArray, initialTab: initialTab, useActiveTab: inRouter ? useActiveTabWithRouter : useActiveTabWithoutRouter, isReady: isReady || forceReady, labelsHash: labelsHash, containerRef: containerRef, onReadyChange: handleReadyChange }));
+}
+function TabsView({ id, className, size, childrenArray, useActiveTab, initialTab, isReady, labelsHash, containerRef, onReadyChange, }) {
+    const { activeTab, setActiveTab } = useActiveTab(initialTab, id, childrenArray);
+    return (react_1.default.createElement(TabsContainer, { "data-component-name": "Markdoc/Tabs/Tabs", className: className, key: id, "$isReady": isReady },
+        react_1.default.createElement(TabList_1.TabList, { key: labelsHash, size: size, childrenArray: childrenArray, activeTab: activeTab, onTabChange: setActiveTab, containerRef: containerRef, onReadyChange: onReadyChange }),
         childrenArray.map((child, index) => {
             const { label } = child.props;
             const tabId = (0, utils_1.getTabId)(label, index);
             return label === activeTab ? (react_1.default.createElement(exports.TabContent, { key: `content-${tabId}`, id: `panel-${tabId}`, "aria-labelledby": `tab-${tabId}`, tabIndex: 0, role: "tabpanel" }, child.props.children)) : null;
         })));
 }
+/**
+ * Validates that the active tab exists in children and resets to initial tab if not found.
+ * Ensures tab state remains consistent when tab structure changes.
+ */
+function useValidateActiveTab(activeTab, setActiveTab, childrenArray, initialTab) {
+    (0, react_1.useEffect)(() => {
+        const availableLabels = childrenArray.map((child) => child.props.label);
+        if (activeTab && !availableLabels.includes(activeTab) && availableLabels.length > 0) {
+            setActiveTab(initialTab);
+        }
+    }, [childrenArray, activeTab, initialTab, setActiveTab]);
+}
+const useActiveTabWithRouter = (initialTab, tabsId, childrenArray) => {
+    const { activeTab, setActiveTab } = (0, hooks_1.useActiveTab)({ initialTab, tabsId });
+    useValidateActiveTab(activeTab, setActiveTab, childrenArray, initialTab);
+    return {
+        activeTab,
+        setActiveTab,
+    };
+};
+const useActiveTabWithoutRouter = (initialTab, _tabsId, childrenArray) => {
+    const [activeTab, setActiveTab] = (0, react_1.useState)(initialTab);
+    useValidateActiveTab(activeTab, setActiveTab, childrenArray, initialTab);
+    return {
+        activeTab,
+        setActiveTab,
+    };
+};
 const TabsContainer = styled_components_1.default.div `
   position: relative;
   color: var(--md-tabs-container-text-color);
@@ -70,6 +118,13 @@ const TabsContainer = styled_components_1.default.div `
     margin: 0;
     padding: 0;
   }
+
+  ${({ $isReady }) => !$isReady &&
+    (0, styled_components_1.css) `
+      opacity: 0;
+      pointer-events: none;
+      overflow: hidden;
+    `}
 `;
 exports.TabContent = styled_components_1.default.div `
   color: var(--md-tabs-content-text-color);

package/lib/markdoc/default.d.ts

@@ -4,8 +4,111 @@ export * from '../markdoc/attributes/img-srcset';
 export * from '../markdoc/attributes/relative-path';
 export * from '../markdoc/attributes/svg-content';
 export * as components from '../markdoc/components/default';
+import { admonition } from '../markdoc/tags/admonition';
+import { html } from '../markdoc/tags/html';
+import { markdocExample } from '../markdoc/tags/markdoc-example';
+import { partial } from '../markdoc/tags/partial';
+import { tab } from '../markdoc/tags/tab';
+import { tabs } from '../markdoc/tags/tabs';
+import { debug } from '../markdoc/tags/debug';
+import { codeSnippet } from '../markdoc/tags/code-snippet';
+import { inlineSvg } from '../markdoc/tags/inline-svg';
+import { cards } from '../markdoc/tags/cards';
+import { card } from '../markdoc/tags/card';
+import { img } from '../markdoc/tags/img';
+import { codeWalkthrough } from '../markdoc/tags/code-walkthrough';
+import { codeStep } from '../markdoc/tags/code-step';
+import { input } from '../markdoc/tags/input';
+import { toggle } from '../markdoc/tags/code-toggle';
+import { codeGroup } from '../markdoc/tags/code-group';
+import { icon } from '../markdoc/tags/icon';
 export declare const tags: {
-    [x: string]: import("@markdoc/markdoc").Schema & {
+    [admonition.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [debug.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [html.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [markdocExample.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [partial.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [tab.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [tabs.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [codeSnippet.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [inlineSvg.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [cards.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [card.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [img.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [codeWalkthrough.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [codeStep.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [toggle.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [input.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [codeGroup.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [icon.tagName]: import("@markdoc/markdoc").Schema & {
         attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
             resolver?: string;
         }>;

package/lib/markdoc/default.js

@@ -18,13 +18,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.tags = exports.components = void 0;
 /* Attributes */

package/lib/markdoc/tags/card.js

@@ -54,7 +54,6 @@ exports.card = {
             },
             to: { type: String, resolver: 'link' },
         },
-        children: ['paragraph', 'tag', 'list'],
     },
     tagName: 'card',
 };

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@redocly/theme",
-  "version": "0.59.0-next.0",
+  "version": "0.59.0-next.10",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
     "redocly"
   ],
   "author": "team@redocly.com",
-  "license": "SEE LICENSE IN LICENSE",
+  "license": "MIT",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "exports": {
@@ -44,7 +44,7 @@
     "@types/highlight-words-core": "1.2.3",
     "@types/lodash.debounce": "4.0.9",
     "@types/lodash.throttle": "4.1.9",
-    "@types/node": "22.15.3",
+    "@types/node": "22.18.13",
     "@types/nprogress": "0.2.3",
     "@types/react": "^19.1.4",
     "@types/react-dom": "^19.1.4",
@@ -63,10 +63,10 @@
     "styled-system": "5.1.5",
     "ts-node": "10.9.2",
     "ts-node-dev": "2.0.0",
-    "tsc-alias": "1.8.10",
+    "tsc-alias": "1.8.16",
     "tsconfig-paths": "4.2.0",
     "tsconfig-paths-webpack-plugin": "3.5.2",
-    "typescript": "5.6.2",
+    "typescript": "5.9.3",
     "vitest": "3.2.4",
     "vitest-when": "0.6.2",
     "webpack": "5.94.0"
@@ -84,11 +84,11 @@
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "4.1.1",
     "nprogress": "0.2.0",
-    "openapi-sampler": "1.6.1",
+    "openapi-sampler": "1.6.2",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/config": "0.35.1",
-    "@redocly/realm-asyncapi-sdk": "0.5.0-next.0"
+    "@redocly/config": "0.36.2",
+    "@redocly/realm-asyncapi-sdk": "0.5.0-next.3"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,100 @@
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+
+import type { BaseSyntheticEvent, PropsWithChildren, ReactNode, JSX } from 'react';
+import type { AccordionHeaderProps } from '@redocly/theme/components/Accordion/AccordionHeader';
+
+import { AccordionBody } from '@redocly/theme/components/Accordion/AccordionBody';
+import { AccordionHeader } from '@redocly/theme/components/Accordion/AccordionHeader';
+import { AccordionTitle } from '@redocly/theme/components/Accordion/AccordionTitle';
+import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
+import { ChevronRightIcon } from '@redocly/theme/icons/ChevronRightIcon/ChevronRightIcon';
+
+export type AccordionProps = {
+  expanded?: boolean;
+  isExpandable?: boolean;
+  className?: string;
+  renderChildrenHidden?: boolean;
+  header?: ReactNode | ((props: AccordionHeaderProps) => ReactNode);
+  onToggle?: (expanded: boolean) => void;
+  dataTestId?: string;
+};
+
+export function Accordion({
+  expanded = true,
+  isExpandable = true,
+  renderChildrenHidden = false,
+  header,
+  className,
+  children,
+  onToggle,
+  dataTestId,
+}: PropsWithChildren<AccordionProps>): JSX.Element {
+  const [isExpanded, setExpanded] = useState(expanded);
+  const [animate, setAnimate] = useState(false);
+
+  const toggle = ({ target }: BaseSyntheticEvent): void => {
+    if (target instanceof HTMLAnchorElement || !isExpandable) return;
+    setAnimate(true);
+    setExpanded(!isExpanded);
+    onToggle?.(!isExpanded);
+  };
+
+  useEffect(() => setExpanded(expanded), [expanded]);
+
+  return (
+    <AccordionWrapper
+      className={className}
+      data-testid={dataTestId}
+      data-component-name="Accordion/Accordion"
+    >
+      {header &&
+        (typeof header === 'function' ? (
+          header({ expanded: isExpanded })
+        ) : (
+          <AccordionHeader
+            data-testid="accordion-header"
+            onClick={toggle}
+            expanded={isExpanded}
+            isExpandable={isExpandable}
+          >
+            <HeaderContent>
+              <AccordionTitle data-testid="title">{header}</AccordionTitle>
+              {isExpandable &&
+                (isExpanded ? (
+                  <ChevronDownIcon color="--accordion-chevron-icon-color" />
+                ) : (
+                  <ChevronRightIcon color="--accordion-chevron-icon-color" />
+                ))}
+            </HeaderContent>
+          </AccordionHeader>
+        ))}
+
+      {(isExpanded || renderChildrenHidden) && (
+        <AccordionBody data-testid="accordion-body" hidden={!isExpanded} animate={animate}>
+          {children}
+        </AccordionBody>
+      )}
+    </AccordionWrapper>
+  );
+}
+
+const AccordionWrapper = styled.div`
+  background-color: transparent;
+  font-family: var(--accordion-font-family);
+  font-size: var(--accordion-font-size);
+  font-weight: var(--accordion-font-weight);
+  border-radius: var(--accordion-border-radius);
+  border: var(--accordion-border);
+
+  &:not(:last-child) {
+    margin-bottom: var(--accordion-gap);
+  }
+`;
+
+const HeaderContent = styled.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: var(--spacing-xs);
+`;

package/src/components/Accordion/AccordionBody.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import styled, { keyframes, css } from 'styled-components';
+
+import type { JSX, ReactNode } from 'react';
+
+type AccordionBodyWrapperProps = {
+  $animate?: boolean;
+  $hidden?: boolean;
+};
+
+export type AccordionBodyProps = {
+  animate?: boolean;
+  hidden?: boolean;
+  children?: ReactNode;
+  className?: string;
+};
+
+export function AccordionBody({
+  animate,
+  hidden,
+  children,
+  className,
+}: AccordionBodyProps): JSX.Element {
+  return (
+    <AccordionBodyWrapper
+      className={className}
+      $animate={animate}
+      $hidden={hidden}
+      data-component-name="Accordion/AccordionBody"
+    >
+      {children}
+    </AccordionBodyWrapper>
+  );
+}
+
+const showAccordion = keyframes`
+  0% {
+    opacity: 0;
+    transform: translateY(-5px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+
+const showAccordionAnimation = css`
+  animation: ${showAccordion} 0.15s ease-out;
+`;
+
+const AccordionBodyWrapper = styled.div<AccordionBodyWrapperProps>`
+  ${({ $animate }) => $animate && showAccordionAnimation};
+  ${({ $hidden }) => $hidden && 'visibility: hidden'};
+
+  background-color: var(--accordion-body-bg-color);
+
+  font-family: var(--accordion-body-font-family);
+  font-size: var(--accordion-body-font-size);
+  font-weight: var(--accordion-body-font-weight);
+  border: var(--accordion-body-border);
+  padding: var(--accordion-body-padding);
+  color: var(--accordion-body-text-color);
+
+  border-radius: var(--accordion-border-radius);
+`;

package/src/components/Accordion/AccordionHeader.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { BaseSyntheticEvent, JSX, ReactNode } from 'react';
+
+export type AccordionHeaderProps = {
+  isExpandable?: boolean;
+  expanded?: boolean;
+  disabled?: boolean;
+  children?: ReactNode;
+  className?: string;
+  onClick?: (e: BaseSyntheticEvent) => void;
+};
+
+type AccordionHeaderWrapperProps = {
+  $isExpandable?: boolean;
+  $expanded?: boolean;
+  $disabled?: boolean;
+};
+
+export function AccordionHeader({
+  isExpandable,
+  expanded,
+  disabled,
+  children,
+  className,
+  onClick,
+}: AccordionHeaderProps): JSX.Element {
+  return (
+    <AccordionHeaderWrapper
+      className={className}
+      $isExpandable={isExpandable}
+      $expanded={expanded}
+      $disabled={disabled}
+      onClick={onClick}
+      data-component-name="Accordion/AccordionHeader"
+    >
+      {children}
+    </AccordionHeaderWrapper>
+  );
+}
+
+const AccordionHeaderWrapper = styled.div<AccordionHeaderWrapperProps>`
+  display: flex;
+  gap: var(--spacing-xs);
+  align-items: center;
+  justify-content: space-between;
+  min-height: 32px;
+  color: var(--accordion-header-text-color);
+
+  cursor: ${({ $isExpandable = true }) => ($isExpandable ? 'pointer' : 'default')};
+
+  line-height: var(--accordion-header-line-height);
+  font-size: var(--accordion-header-font-size);
+  font-family: var(--accordion-header-font-family);
+  font-weight: var(--accordion-header-font-weight);
+  padding: var(--accordion-header-padding);
+  border: var(--accordion-header-border);
+  background-color: var(--accordion-header-bg-color);
+  border-radius: var(--accordion-border-radius);
+
+  pointer-events: ${({ $disabled }) => ($disabled ? 'none' : 'auto')};
+
+  &:hover {
+    color: ${({ $isExpandable = true }) =>
+      $isExpandable ? 'var(--text-color-primary)' : 'var(--accordion-header-text-color)'};
+  }
+`;

package/src/components/Accordion/AccordionTitle.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { JSX, ReactNode } from 'react';
+
+export type AccordionTitleProps = {
+  children?: ReactNode;
+  className?: string;
+};
+
+export function AccordionTitle({ children, className }: AccordionTitleProps): JSX.Element {
+  return (
+    <AccordionTitleWrapper className={className} data-component-name="Accordion/AccordionTitle">
+      {children}
+    </AccordionTitleWrapper>
+  );
+}
+
+const AccordionTitleWrapper = styled.span`
+  font-weight: var(--accordion-header-font-weight);
+  line-height: var(--line-height-base);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--accordion-header-text-color);
+  flex: 1;
+`;

package/src/components/Accordion/variables.ts

@@ -0,0 +1,56 @@
+import { css } from 'styled-components';
+
+export const accordion = css`
+  /**
+  * @tokens Accordion spacing
+  * @presenter Spacing
+  */
+
+  --accordion-gap: var(--spacing-base);
+
+  /**
+  * @tokens Accordion common
+  */
+
+  --accordion-border-radius: var(--border-radius); // @presenter BorderRadius
+  --accordion-border: none; // @presenter Border
+
+  --accordion-line-height: var(--line-height-base); // @presenter LineHeight
+  --accordion-font-size: var(--font-size-base); // @presenter FontSize
+  --accordion-font-family: var(--font-family-base); // @presenter FontFamily
+  --accordion-font-weight: var(--font-weight-regular); // @presenter FontWeight
+
+  /**
+  * @tokens Accordion header common
+  */
+
+  --accordion-header-font-family: var(--font-family-base); // @presenter FontFamily
+  --accordion-header-font-size: var(--font-size-base); // @presenter FontSize
+  --accordion-header-font-weight: var(--font-weight-medium, 500); // @presenter FontWeight
+  --accordion-header-text-color: var(--text-color-primary);
+  --accordion-header-padding: var(--spacing-sm) var(--spacing-base);
+  --accordion-header-line-height: var(--line-height-base); // @presenter LineHeight
+  --accordion-header-bg-color: transparent; // @presenter Color
+  --accordion-header-border: none; // @presenter Border
+
+  /**
+  * @tokens Accordion body common
+  */
+
+  --accordion-body-font-family: var(--font-family-base); // @presenter FontFamily
+  --accordion-body-font-size: var(--font-size-base); // @presenter FontSize
+  --accordion-body-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --accordion-body-text-color: var(--text-color-secondary);
+  --accordion-body-padding: 0 var(--spacing-xs) var(--spacing-sm);
+  --accordion-body-bg-color: transparent; // @presenter Color
+  --accordion-body-border: none; // @presenter Border
+
+  /**
+  * @tokens Accordion chevron icon
+  */
+
+  --accordion-chevron-icon-color: var(--text-color-secondary); // @presenter Color
+  --accordion-chevron-icon-size: 16px;
+
+  // @tokens End
+`;