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

package/lib/core/styles/dark.js

@@ -6,15 +6,16 @@ const variables_dark_1 = require("../../components/Scorecard/variables.dark");
 const variables_dark_2 = require("../../markdoc/components/Mermaid/variables.dark");
 const variables_dark_3 = require("../../components/Menu/variables.dark");
 const variables_dark_4 = require("../../components/Button/variables.dark");
-const variables_dark_5 = require("../../components/Segmented/variables.dark");
-const variables_dark_6 = require("../../icons/CheckboxIcon/variables.dark");
-const variables_dark_7 = require("../../components/Tag/variables.dark");
-const variables_dark_8 = require("../../components/StatusCode/variables.dark");
-const variables_dark_9 = require("../../components/Switch/variables.dark");
-const variables_dark_10 = require("../../markdoc/components/Cards/variables.dark");
-const variables_dark_11 = require("../../components/Catalog/variables.dark");
-const variables_dark_12 = require("../../components/PageActions/variables.dark");
-const variables_dark_13 = require("../../components/Tooltip/variables.dark");
+const variables_dark_5 = require("../../components/Buttons/variables.dark");
+const variables_dark_6 = require("../../components/Segmented/variables.dark");
+const variables_dark_7 = require("../../icons/CheckboxIcon/variables.dark");
+const variables_dark_8 = require("../../components/Tag/variables.dark");
+const variables_dark_9 = require("../../components/StatusCode/variables.dark");
+const variables_dark_10 = require("../../components/Switch/variables.dark");
+const variables_dark_11 = require("../../markdoc/components/Cards/variables.dark");
+const variables_dark_12 = require("../../components/Catalog/variables.dark");
+const variables_dark_13 = require("../../components/PageActions/variables.dark");
+const variables_dark_14 = require("../../components/Tooltip/variables.dark");
 const replayDarkMode = (0, styled_components_1.css) `
   /**
     * @tokens Replay Colors
@@ -136,14 +137,15 @@ exports.darkMode = (0, styled_components_1.css) `
 
   --color-green-1: #1a4d40;
   --color-green-2: #195848;
-  --color-green-3: #0e8450;
-  --color-green-4: #149e53;
-  --color-green-5: #1cb854;
-  --color-green-6: #4dd470;
-  --color-green-7: #72e985;
-  --color-green-8: #a3f7a9;
-  --color-green-9: #d2fbd0;
-  --color-green-10: #edfbec;
+  --color-green-3: #136a4d;
+  --color-green-4: #0e8450;
+  --color-green-5: #149e53;
+  --color-green-6: #1cb854;
+  --color-green-7: #4dd470;
+  --color-green-8: #72e985;
+  --color-green-9: #a3f7a9;
+  --color-green-10: #d2fbd0;
+  --color-green-11: #edfbec;
 
   --color-grass-1: #1f4d2d;
   --color-grass-2: #164f29;
@@ -306,20 +308,21 @@ exports.darkMode = (0, styled_components_1.css) `
   --plus-square-outlined-icon: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.20312 5.3125H4.6875V6.79687C4.6875 6.83984 4.72266 6.875 4.76562 6.875H5.23438C5.27734 6.875 5.3125 6.83984 5.3125 6.79687V5.3125H6.79688C6.83984 5.3125 6.875 5.27734 6.875 5.23437V4.76562C6.875 4.72266 6.83984 4.6875 6.79688 4.6875H5.3125V3.20312C5.3125 3.16016 5.27734 3.125 5.23438 3.125H4.76562C4.72266 3.125 4.6875 3.16016 4.6875 3.20312V4.6875H3.20312C3.16016 4.6875 3.125 4.72266 3.125 4.76562V5.23437C3.125 5.27734 3.16016 5.3125 3.20312 5.3125Z' fill='%239B9CA8'/%3E%3Cpath d='M8.59375 1.09375H1.40625C1.2334 1.09375 1.09375 1.2334 1.09375 1.40625V8.59375C1.09375 8.7666 1.2334 8.90625 1.40625 8.90625H8.59375C8.7666 8.90625 8.90625 8.7666 8.90625 8.59375V1.40625C8.90625 1.2334 8.7666 1.09375 8.59375 1.09375ZM8.20312 8.20312H1.79688V1.79687H8.20312V8.20312Z' fill='%239B9CA8'/%3E%3C/svg%3E%0A");
   --minus-square-outlined-icon: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.20312 5.3125H6.79688C6.83984 5.3125 6.875 5.27734 6.875 5.23437V4.76562C6.875 4.72266 6.83984 4.6875 6.79688 4.6875H3.20312C3.16016 4.6875 3.125 4.72266 3.125 4.76562V5.23437C3.125 5.27734 3.16016 5.3125 3.20312 5.3125Z' fill='%239B9CA8'/%3E%3Cpath d='M8.59375 1.09375H1.40625C1.2334 1.09375 1.09375 1.2334 1.09375 1.40625V8.59375C1.09375 8.7666 1.2334 8.90625 1.40625 8.90625H8.59375C8.7666 8.90625 8.90625 8.7666 8.90625 8.59375V1.40625C8.90625 1.2334 8.7666 1.09375 8.59375 1.09375ZM8.20312 8.20312H1.79688V1.79687H8.20312V8.20312Z' fill='%239B9CA8'/%3E%3C/svg%3E%0A");
 
-  ${variables_dark_5.segmentedButtonsDarkMode}
+  ${variables_dark_6.segmentedButtonsDarkMode}
   ${variables_dark_4.buttonDarkMode}
-  ${variables_dark_6.checkboxDarkMode}
-  ${variables_dark_7.tagDarkMode}
-  ${variables_dark_8.statusCodeDarkMode}
+  ${variables_dark_5.aiAssistantButtonDarkMode}
+  ${variables_dark_7.checkboxDarkMode}
+  ${variables_dark_8.tagDarkMode}
+  ${variables_dark_9.statusCodeDarkMode}
   ${variables_dark_3.menuDarkMode}
   ${variables_dark_2.mermaidDarkMode}
   ${variables_dark_1.scorecardDarkMode}
   ${replayDarkMode}
-  ${variables_dark_9.switcherDarkMode}
-  ${variables_dark_10.cardsDarkMode}
-  ${variables_dark_11.catalogDarkMode}
-  ${variables_dark_12.pageActionsDarkMode}
-  ${variables_dark_13.tooltipDarkMode}
+  ${variables_dark_10.switcherDarkMode}
+  ${variables_dark_11.cardsDarkMode}
+  ${variables_dark_12.catalogDarkMode}
+  ${variables_dark_13.pageActionsDarkMode}
+  ${variables_dark_14.tooltipDarkMode}
 
   /**
     * @tokens Dark Theme Scrollbar Config

package/lib/core/styles/global.js

@@ -13,34 +13,36 @@ const variables_8 = require("../../components/Catalog/variables");
 const variables_9 = require("../../components/Filter/variables");
 const variables_10 = require("../../components/CatalogClassic/variables");
 const variables_11 = require("../../components/Panel/variables");
-const variables_12 = require("../../components/Select/variables");
-const variables_13 = require("../../components/Dropdown/variables");
-const variables_14 = require("../../components/Tooltip/variables");
-const variables_15 = require("../../icons/CheckboxIcon/variables");
-const variables_16 = require("../../components/Admonition/variables");
-const variables_17 = require("../../components/Footer/variables");
-const variables_18 = require("../../components/Button/variables");
-const variables_19 = require("../../components/Navbar/variables");
-const variables_20 = require("../../components/Search/variables");
-const variables_21 = require("../../components/Menu/variables");
-const variables_22 = require("../../components/CodeBlock/variables");
-const variables_23 = require("../../components/Product/variables");
-const variables_24 = require("../../components/Markdown/variables");
-const variables_25 = require("../../markdoc/components/Tabs/variables");
-const variables_26 = require("../../markdoc/components/Mermaid/variables");
-const variables_27 = require("../../components/LastUpdated/variables");
-const variables_28 = require("../../components/Logo/variables");
-const variables_29 = require("../../components/StatusCode/variables");
-const variables_30 = require("../../components/Segmented/variables");
-const variables_31 = require("../../components/UserMenu/variables");
-const variables_32 = require("../../components/Tags/variables");
-const variables_33 = require("../../components/VersionPicker/variables");
-const variables_34 = require("../../components/DatePicker/variables");
-const variables_35 = require("../../components/Switch/variables");
-const variables_36 = require("../../markdoc/components/Cards/variables");
-const variables_37 = require("../../markdoc/components/CodeWalkthrough/variables");
-const variables_38 = require("../../components/SkipContent/variables");
-const variables_39 = require("../../components/PageActions/variables");
+const variables_12 = require("../../components/Accordion/variables");
+const variables_13 = require("../../components/Select/variables");
+const variables_14 = require("../../components/Dropdown/variables");
+const variables_15 = require("../../components/Tooltip/variables");
+const variables_16 = require("../../icons/CheckboxIcon/variables");
+const variables_17 = require("../../components/Admonition/variables");
+const variables_18 = require("../../components/Footer/variables");
+const variables_19 = require("../../components/Button/variables");
+const variables_20 = require("../../components/Buttons/variables");
+const variables_21 = require("../../components/Navbar/variables");
+const variables_22 = require("../../components/Search/variables");
+const variables_23 = require("../../components/Menu/variables");
+const variables_24 = require("../../components/CodeBlock/variables");
+const variables_25 = require("../../components/Product/variables");
+const variables_26 = require("../../components/Markdown/variables");
+const variables_27 = require("../../markdoc/components/Tabs/variables");
+const variables_28 = require("../../markdoc/components/Mermaid/variables");
+const variables_29 = require("../../components/LastUpdated/variables");
+const variables_30 = require("../../components/Logo/variables");
+const variables_31 = require("../../components/StatusCode/variables");
+const variables_32 = require("../../components/Segmented/variables");
+const variables_33 = require("../../components/UserMenu/variables");
+const variables_34 = require("../../components/Tags/variables");
+const variables_35 = require("../../components/VersionPicker/variables");
+const variables_36 = require("../../components/DatePicker/variables");
+const variables_37 = require("../../components/Switch/variables");
+const variables_38 = require("../../markdoc/components/Cards/variables");
+const variables_39 = require("../../markdoc/components/CodeWalkthrough/variables");
+const variables_40 = require("../../components/SkipContent/variables");
+const variables_41 = require("../../components/PageActions/variables");
 const dark_1 = require("./dark");
 const themeColors = (0, styled_components_1.css) `
   /* === Palette === */
@@ -141,8 +143,9 @@ const themeColors = (0, styled_components_1.css) `
   --color-green-6: #1cb854;
   --color-green-7: #149e53;
   --color-green-8: #0e8450;
-  --color-green-9: #195848;
-  --color-green-10: #1a4d40;
+  --color-green-9: #136a4d;
+  --color-green-10: #195848;
+  --color-green-11: #1a4d40;
 
   --color-grass-1: #f0faeb;
   --color-grass-2: #e3fad6;
@@ -1204,68 +1207,70 @@ const replay = (0, styled_components_1.css) `
 `;
 exports.styles = (0, styled_components_1.css) `
   :root {
-    ${variables_16.admonition}
+    ${variables_12.accordion}
+    ${variables_17.admonition}
     ${apiReferenceDocs}
     ${variables_11.apiReferencePanels}
     ${badges}
     ${borders}
     ${variables_5.breadcrumbs}
-    ${variables_18.button}
-    ${variables_36.cards}
+    ${variables_19.button}
+    ${variables_20.aiAssistantButton}
+    ${variables_38.cards}
     ${variables_8.catalog}
     ${variables_10.catalogClassic}
-    ${variables_22.code}
-    ${variables_37.codeWalkthrough}
+    ${variables_24.code}
+    ${variables_39.codeWalkthrough}
     ${docsDropdown}
-    ${variables_13.dropdown}
+    ${variables_14.dropdown}
     ${error}
     ${variables_9.filter}
-    ${variables_17.footer}
+    ${variables_18.footer}
     ${headingsTypography}
-    ${variables_32.httpTag}
+    ${variables_34.httpTag}
     ${inputs}
     ${variables_1.languagePicker}
-    ${variables_27.lastUpdated}
+    ${variables_29.lastUpdated}
     ${links}
     ${loadProgressBar}
-    ${variables_28.logo}
-    ${variables_24.markdown}
-    ${variables_25.markdownTabs}
-    ${variables_26.mermaid}
-    ${variables_21.menu}
-    ${variables_21.mobileMenu}
+    ${variables_30.logo}
+    ${variables_26.markdown}
+    ${variables_27.markdownTabs}
+    ${variables_28.mermaid}
+    ${variables_23.menu}
+    ${variables_23.mobileMenu}
     ${modal}
-    ${variables_19.navbar}
+    ${variables_21.navbar}
     ${pages}
-    ${variables_23.productPicker}
+    ${variables_25.productPicker}
     ${variables_11.responsePanelColors}
-    ${variables_20.search}
-    ${variables_12.select}
+    ${variables_22.search}
+    ${variables_13.select}
     ${variables_4.sidebar}
     ${sizeAndSpace}
     ${variables_6.tag}
     ${themeColors}
     ${tile}
     ${variables_7.toc}
-    ${variables_14.tooltip}
+    ${variables_15.tooltip}
     ${typography}
-    ${variables_31.userMenu}
-    ${variables_33.versionPicker}
+    ${variables_33.userMenu}
+    ${variables_35.versionPicker}
     ${zIndexDepth}
     ${scorecardColors}
-    ${variables_29.statusCode}
+    ${variables_31.statusCode}
     ${tab}
     ${icon}
     ${tree}
-    ${variables_30.segmented}
-    ${variables_35.switcher}
-    ${variables_15.checkbox}
+    ${variables_32.segmented}
+    ${variables_37.switcher}
+    ${variables_16.checkbox}
     ${variables_3.feedback}
     ${variables_2.scorecard}
-    ${variables_34.datePicker}
+    ${variables_36.datePicker}
     ${replay}
-    ${variables_38.skipContent}
-    ${variables_39.pageActions}
+    ${variables_40.skipContent}
+    ${variables_41.pageActions}
 
     background-color: var(--bg-color);
     color: var(--text-color-primary);

package/lib/core/types/l10n.d.ts

@@ -1,5 +1,5 @@
 import type { TOptions } from 'i18next';
-export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'search.loading' | 'search.noResults.title' | 'search.keys.navigate' | 'search.keys.select' | 'search.keys.exit' | 'search.label' | 'search.cancel' | 'search.recent' | 'search.navbar.label' | 'search.suggested' | 'search.showMore' | 'search.filter.title' | 'search.filter.reset' | 'search.filter.field.reset' | 'search.ai.welcomeText' | 'search.ai.newConversation' | 'search.ai.backToSearch' | 'search.ai.placeholder' | 'search.ai.generatingResponse' | 'search.ai.followUpQuestion' | 'search.ai.suggestionsTitle' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.ai.resourcesFound.basedOn' | 'search.ai.resourcesFound.resources' | 'search.ai.button' | 'search.ai.label' | 'search.ai.disclaimer' | 'search.ai.error.description' | 'search.ai.error.description.forbidden' | 'search.ai.error.description.unauthorized' | 'search.ai.error.header' | 'search.ai.error.header.forbidden' | 'search.ai.error.header.unauthorized' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.notFound.title' | 'page.notFound.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.add' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'catalog.catalogs.all.title' | 'catalog.catalogs.all.description' | 'catalog.catalogs.all.switcherLabel' | 'catalog.catalogs.service.title' | 'catalog.catalogs.service.description' | 'catalog.catalogs.service.switcherLabel' | 'catalog.catalogs.user.title' | 'catalog.catalogs.user.description' | 'catalog.catalogs.user.switcherLabel' | 'catalog.catalogs.team.title' | 'catalog.catalogs.team.description' | 'catalog.catalogs.team.switcherLabel' | 'catalog.catalogs.domain.title' | 'catalog.catalogs.domain.description' | 'catalog.catalogs.domain.switcherLabel' | 'catalog.catalogs.apiDescription.title' | 'catalog.catalogs.apiDescription.description' | 'catalog.catalogs.apiDescription.switcherLabel' | 'catalog.catalogs.dataSchema.title' | 'catalog.catalogs.dataSchema.description' | 'catalog.catalogs.dataSchema.switcherLabel' | 'catalog.catalogs.apiOperation.title' | 'catalog.catalogs.apiOperation.description' | 'catalog.catalogs.apiOperation.switcherLabel' | 'catalog.entity.metadata.title' | 'catalog.entity.schema.title' | 'catalog.entity.properties.apiDescription.title' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeToSingleColumn' | 'sidebar.actions.changeToTwoColumns' | 'sidebar.actions.singleColumn' | 'sidebar.actions.twoColumns' | 'versionPicker.label' | 'versionPicker.unversioned' | 'codeSnippet.copy.buttonText' | 'codeSnippet.copy.tooltipText' | 'codeSnippet.copy.toasterText' | 'markdown.editPage.text' | 'feedback.settings.comment.submitText' | 'feedback.settings.comment.label' | 'feedback.settings.comment.send' | 'feedback.settings.comment.cancel' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.submit' | 'feedback.cancel' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.optionalEmail.placeholder' | 'feedback.settings.optionalEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'codeSnippet.expand.tooltipText' | 'codeSnippet.collapse.tooltipText' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'mobileMenu.version' | 'navbar.products' | 'page.nextButton' | 'page.previousButton' | 'page.actions.copyButtonText' | 'page.actions.copyTitle' | 'page.actions.copyDescription' | 'page.actions.viewAsMdTitle' | 'page.actions.viewAsMdButtonText' | 'page.actions.viewAsMdDescription' | 'page.actions.chatGptTitle' | 'page.actions.chatGptButtonText' | 'page.actions.chatGptDescription' | 'page.actions.claudeTitle' | 'page.actions.claudeButtonText' | 'page.actions.claudeDescription' | 'page.actions.cursorMcpButtonText' | 'page.actions.cursorMcpTitle' | 'page.actions.cursorMcpDescription' | 'openapi.download.description.title' | 'openapi.info.title' | 'openapi.info.contact.url' | 'openapi.info.contact.name' | 'openapi.info.license' | 'openapi.info.termsOfService' | 'openapi.info.metadata.title' | 'openapi.key' | 'openapi.value' | 'openapi.enum' | 'openapi.items' | 'openapi.default' | 'openapi.variable' | 'openapi.variables' | 'openapi.actions.show' | 'openapi.actions.hide' | 'openapi.actions.more' | 'openapi.languages.title' | 'openapi.servers.title' | 'openapi.operations' | 'openapi.webhooks' | 'openapi.description' | 'openapi.badges.deprecated' | 'openapi.badges.required' | 'openapi.badges.webhook' | 'openapi.request' | 'openapi.path' | 'openapi.query' | 'openapi.cookie' | 'openapi.header' | 'openapi.body' | 'openapi.responses' | 'openapi.response' | 'openapi.callbacks' | 'openapi.callbackRequest' | 'openapi.callbackResponse' | 'openapi.payload' | 'openapi.discriminator' | 'openapi.contentType' | 'openapi.tryIt' | 'openapi.loading' | 'openapi.example' | 'openapi.examples' | 'openapi.additionalProperties' | 'openapi.patternProperties' | 'openapi.required' | 'openapi.recursive' | 'openapi.complex' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.viewSecurityDetails' | 'openapi.noResponseExample' | 'openapi.discriminator.searchPlaceholder' | 'openapi.discriminator.searchNoResults' | 'openapi.noResponseContent' | 'openapi.noRequestPayload' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.showOptionalScopes' | 'openapi.hideOptionalScopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'openapi.schemaCatalogLink.title' | 'openapi.schemaCatalogLink.copyButtonTooltip' | 'openapi.schemaCatalogLink.copiedTooltip' | 'openapi.mcp.title' | 'openapi.mcp.endpoint' | 'openapi.mcp.tools' | 'openapi.mcp.protocolVersion' | 'openapi.mcp.capabilities' | 'openapi.mcp.experimentalCapabilities' | 'openapi.mcp.inputSchema' | 'openapi.mcp.inputExample' | 'openapi.mcp.outputSchema' | 'openapi.mcp.outputExample' | 'asyncapi.download.description.title' | 'asyncapi.info.title' | 'graphql.queries' | 'graphql.mutations' | 'graphql.subscriptions' | 'graphql.directives' | 'graphql.objects' | 'graphql.interfaces' | 'graphql.unions' | 'graphql.enums' | 'graphql.inputs' | 'graphql.scalars' | 'graphql.arguments.label' | 'graphql.arguments.show' | 'graphql.arguments.hide' | 'graphql.arguments.here' | 'graphql.returnTypes.label' | 'graphql.returnTypes.show' | 'graphql.returnTypes.hide' | 'graphql.possibleTypes' | 'graphql.defaultValue' | 'graphql.deprecationReason' | 'graphql.requiredScopes' | 'graphql.viewSecurityDetails' | 'graphql.objectScopes' | 'graphql.fieldScopes' | 'graphql.implementedInterfaces' | 'graphql.nonNull' | 'graphql.required' | 'graphql.deprecated' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced' | 'graphql.content.fragment' | 'codeWalkthrough.download' | 'codeWalkthrough.preview' | 'time.justNow' | 'time.past.second' | 'time.past.seconds' | 'time.past.minute' | 'time.past.minutes' | 'time.past.hour' | 'time.past.hours' | 'time.past.day' | 'time.past.days' | 'time.past.week' | 'time.past.weeks' | 'time.past.month' | 'time.past.months' | 'time.past.year' | 'time.past.years' | 'page.internalServerError.title' | 'page.internalServerError.description' | 'page.skipToContent.label';
+export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'search.loading' | 'search.noResults.title' | 'search.keys.navigate' | 'search.keys.select' | 'search.keys.exit' | 'search.label' | 'search.cancel' | 'search.recent' | 'search.navbar.label' | 'search.suggested' | 'search.showMore' | 'search.filter.title' | 'search.filter.reset' | 'search.filter.field.reset' | 'search.ai.welcomeText' | 'search.ai.newConversation' | 'search.ai.backToSearch' | 'search.ai.placeholder' | 'search.ai.generatingResponse' | 'search.ai.followUpQuestion' | 'search.ai.suggestionsTitle' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.ai.resourcesFound.basedOn' | 'search.ai.resourcesFound.resources' | 'search.ai.button' | 'search.ai.label' | 'search.ai.disclaimer' | 'search.ai.error.description' | 'search.ai.error.description.forbidden' | 'search.ai.error.description.unauthorized' | 'search.ai.error.header' | 'search.ai.error.header.forbidden' | 'search.ai.error.header.unauthorized' | 'aiAssistant.trigger' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.notFound.title' | 'page.notFound.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.add' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'catalog.catalogs.all.title' | 'catalog.catalogs.all.description' | 'catalog.catalogs.all.switcherLabel' | 'catalog.catalogs.service.title' | 'catalog.catalogs.service.description' | 'catalog.catalogs.service.switcherLabel' | 'catalog.catalogs.user.title' | 'catalog.catalogs.user.description' | 'catalog.catalogs.user.switcherLabel' | 'catalog.catalogs.team.title' | 'catalog.catalogs.team.description' | 'catalog.catalogs.team.switcherLabel' | 'catalog.catalogs.domain.title' | 'catalog.catalogs.domain.description' | 'catalog.catalogs.domain.switcherLabel' | 'catalog.catalogs.apiDescription.title' | 'catalog.catalogs.apiDescription.description' | 'catalog.catalogs.apiDescription.switcherLabel' | 'catalog.catalogs.dataSchema.title' | 'catalog.catalogs.dataSchema.description' | 'catalog.catalogs.dataSchema.switcherLabel' | 'catalog.catalogs.apiOperation.title' | 'catalog.catalogs.apiOperation.description' | 'catalog.catalogs.apiOperation.switcherLabel' | 'catalog.entity.metadata.title' | 'catalog.entity.schema.title' | 'catalog.entity.properties.apiDescription.title' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeToSingleColumn' | 'sidebar.actions.changeToTwoColumns' | 'sidebar.actions.singleColumn' | 'sidebar.actions.twoColumns' | 'versionPicker.label' | 'versionPicker.unversioned' | 'codeSnippet.copy.buttonText' | 'codeSnippet.copy.tooltipText' | 'codeSnippet.copy.toasterText' | 'markdown.editPage.text' | 'feedback.settings.comment.submitText' | 'feedback.settings.comment.label' | 'feedback.settings.comment.send' | 'feedback.settings.comment.cancel' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.submit' | 'feedback.cancel' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.optionalEmail.placeholder' | 'feedback.settings.optionalEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'codeSnippet.expand.tooltipText' | 'codeSnippet.collapse.tooltipText' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'mobileMenu.version' | 'navbar.products' | 'page.nextButton' | 'page.previousButton' | 'page.actions.copyButtonText' | 'page.actions.copyTitle' | 'page.actions.copyDescription' | 'page.actions.viewAsMdTitle' | 'page.actions.viewAsMdButtonText' | 'page.actions.viewAsMdDescription' | 'page.actions.chatGptTitle' | 'page.actions.chatGptButtonText' | 'page.actions.chatGptDescription' | 'page.actions.claudeTitle' | 'page.actions.claudeButtonText' | 'page.actions.claudeDescription' | 'page.actions.cursorMcpButtonText' | 'page.actions.cursorMcpTitle' | 'page.actions.cursorMcpDescription' | 'openapi.download.description.title' | 'openapi.info.title' | 'openapi.info.contact.url' | 'openapi.info.contact.name' | 'openapi.info.license' | 'openapi.info.termsOfService' | 'openapi.info.metadata.title' | 'openapi.key' | 'openapi.value' | 'openapi.enum' | 'openapi.items' | 'openapi.default' | 'openapi.variable' | 'openapi.variables' | 'openapi.actions.show' | 'openapi.actions.hide' | 'openapi.actions.more' | 'openapi.languages.title' | 'openapi.servers.title' | 'openapi.operations' | 'openapi.webhooks' | 'openapi.description' | 'openapi.badges.deprecated' | 'openapi.badges.required' | 'openapi.badges.webhook' | 'openapi.request' | 'openapi.path' | 'openapi.query' | 'openapi.cookie' | 'openapi.header' | 'openapi.body' | 'openapi.responses' | 'openapi.response' | 'openapi.callbacks' | 'openapi.callbackRequest' | 'openapi.callbackResponse' | 'openapi.payload' | 'openapi.discriminator' | 'openapi.contentType' | 'openapi.tryIt' | 'openapi.loading' | 'openapi.example' | 'openapi.examples' | 'openapi.additionalProperties' | 'openapi.patternProperties' | 'openapi.required' | 'openapi.recursive' | 'openapi.complex' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.viewSecurityDetails' | 'openapi.noResponseExample' | 'openapi.discriminator.searchPlaceholder' | 'openapi.discriminator.searchNoResults' | 'openapi.noResponseContent' | 'openapi.noRequestPayload' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.showOptionalScopes' | 'openapi.hideOptionalScopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'openapi.schemaCatalogLink.title' | 'openapi.schemaCatalogLink.copyButtonTooltip' | 'openapi.schemaCatalogLink.copiedTooltip' | 'openapi.mcp.title' | 'openapi.mcp.endpoint' | 'openapi.mcp.tools' | 'openapi.mcp.protocolVersion' | 'openapi.mcp.capabilities' | 'openapi.mcp.experimentalCapabilities' | 'openapi.mcp.inputSchema' | 'openapi.mcp.inputExample' | 'openapi.mcp.outputSchema' | 'openapi.mcp.outputExample' | 'asyncapi.download.description.title' | 'asyncapi.info.title' | 'graphql.queries' | 'graphql.mutations' | 'graphql.subscriptions' | 'graphql.directives' | 'graphql.objects' | 'graphql.interfaces' | 'graphql.unions' | 'graphql.enums' | 'graphql.inputs' | 'graphql.scalars' | 'graphql.arguments.label' | 'graphql.arguments.show' | 'graphql.arguments.hide' | 'graphql.arguments.here' | 'graphql.returnTypes.label' | 'graphql.returnTypes.show' | 'graphql.returnTypes.hide' | 'graphql.possibleTypes' | 'graphql.defaultValue' | 'graphql.deprecationReason' | 'graphql.requiredScopes' | 'graphql.viewSecurityDetails' | 'graphql.objectScopes' | 'graphql.fieldScopes' | 'graphql.implementedInterfaces' | 'graphql.nonNull' | 'graphql.required' | 'graphql.deprecated' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced' | 'graphql.content.fragment' | 'codeWalkthrough.download' | 'codeWalkthrough.preview' | 'time.justNow' | 'time.past.second' | 'time.past.seconds' | 'time.past.minute' | 'time.past.minutes' | 'time.past.hour' | 'time.past.hours' | 'time.past.day' | 'time.past.days' | 'time.past.week' | 'time.past.weeks' | 'time.past.month' | 'time.past.months' | 'time.past.year' | 'time.past.years' | 'page.internalServerError.title' | 'page.internalServerError.description' | 'page.skipToContent.label';
 export type Locale = {
     code: string;
     name: string;

package/lib/icons/RedoclyIcon/RedoclyIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const RedoclyIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+} & {
+    color?: string;
+    size?: string;
+    className?: string;
+} & React.SVGProps<SVGSVGElement>, "data-component-name">;

package/lib/icons/RedoclyIcon/RedoclyIcon.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RedoclyIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("g", { clipPath: "url(#clip0_4053_1165)" },
+        react_1.default.createElement("path", { d: "M14.625 6.19973C14.625 8.69176 12.6173 10.712 10.1406 10.712H2.8125V10.2717C5.04753 10.2717 6.85938 8.44864 6.85938 6.19973C6.85938 3.95082 5.04753 2.12772 2.8125 2.12772V1.6875H10.1406C12.6173 1.6875 14.625 3.70769 14.625 6.19973Z", fill: "#2467F2" }),
+        react_1.default.createElement("path", { d: "M14.625 16.875C14.625 14.383 12.6173 12.3628 10.1406 12.3628H2.8125V12.803C5.04753 12.803 6.85938 14.6261 6.85938 16.875H14.625Z", fill: "#2467F2" })),
+    react_1.default.createElement("defs", null,
+        react_1.default.createElement("clipPath", { id: "clip0_4053_1165" },
+            react_1.default.createElement("rect", { width: "18", height: "18", fill: "white" })))));
+exports.RedoclyIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/RedoclyIcon/RedoclyIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=RedoclyIcon.js.map

package/lib/index.d.ts

@@ -29,6 +29,7 @@ export * from './components/Buttons/CopyButton';
 export * from './components/Buttons/EditPageButton';
 export * from './components/Buttons/EmailButton';
 export * from './components/Buttons/NewTabButton';
+export * from './components/Buttons/AIAssistantButton';
 export * from './components/Markdown/Markdown';
 export * from './components/Markdown/styles/baseTable';
 export * from './components/Markdown/styles/headingAnchor';
@@ -256,6 +257,7 @@ export * from './icons/RabbitMQIcon/RabbitMQIcon';
 export * from './icons/CurveAutoColonIcon/CurveAutoColonIcon';
 export * from './icons/AiStarsIcon/AiStarsIcon';
 export * from './icons/AiStarsGradientIcon/AiStarsGradientIcon';
+export * from './icons/RedoclyIcon/RedoclyIcon';
 export * from './icons/WorkflowHierarchyIcon/WorkflowHierarchyIcon';
 export * from './icons/GenericIcon/GenericIcon';
 export * from './icons/ShareIcon/ShareIcon';

package/lib/index.js

@@ -60,6 +60,7 @@ __exportStar(require("./components/Buttons/CopyButton"), exports);
 __exportStar(require("./components/Buttons/EditPageButton"), exports);
 __exportStar(require("./components/Buttons/EmailButton"), exports);
 __exportStar(require("./components/Buttons/NewTabButton"), exports);
+__exportStar(require("./components/Buttons/AIAssistantButton"), exports);
 /* Markdown */
 __exportStar(require("./components/Markdown/Markdown"), exports);
 __exportStar(require("./components/Markdown/styles/baseTable"), exports);
@@ -309,6 +310,7 @@ __exportStar(require("./icons/RabbitMQIcon/RabbitMQIcon"), exports);
 __exportStar(require("./icons/CurveAutoColonIcon/CurveAutoColonIcon"), exports);
 __exportStar(require("./icons/AiStarsIcon/AiStarsIcon"), exports);
 __exportStar(require("./icons/AiStarsGradientIcon/AiStarsGradientIcon"), exports);
+__exportStar(require("./icons/RedoclyIcon/RedoclyIcon"), exports);
 __exportStar(require("./icons/WorkflowHierarchyIcon/WorkflowHierarchyIcon"), exports);
 __exportStar(require("./icons/GenericIcon/GenericIcon"), exports);
 __exportStar(require("./icons/ShareIcon/ShareIcon"), exports);

package/lib/layouts/RootLayout.js

@@ -8,11 +8,16 @@ const react_1 = __importDefault(require("react"));
 const Navbar_1 = require("../components/Navbar/Navbar");
 const Footer_1 = require("../components/Footer/Footer");
 const SkipContent_1 = require("../components/SkipContent/SkipContent");
+const AIAssistantButton_1 = require("../components/Buttons/AIAssistantButton");
+const hooks_1 = require("../core/hooks");
 function RootLayout({ children }) {
+    const { useSearch } = (0, hooks_1.useThemeHooks)();
+    const { askAi } = useSearch();
     return (react_1.default.createElement("div", { "data-component-name": "layouts/RootLayout" },
         react_1.default.createElement(SkipContent_1.SkipContent, null),
         react_1.default.createElement(Navbar_1.Navbar, null),
         children,
-        react_1.default.createElement(Footer_1.Footer, null)));
+        react_1.default.createElement(Footer_1.Footer, null),
+        askAi && react_1.default.createElement(AIAssistantButton_1.AIAssistantButton, null)));
 }
 //# sourceMappingURL=RootLayout.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.59.0-next.0",
+  "version": "0.59.0-next.1",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",

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);
+`;