@redocly/theme 0.64.0-next.2 → 0.64.0-next.4

package/lib/components/Admonition/Admonition.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { JSX } from 'react';
 type AdmonitionTypeProps = {
-    type: 'warning' | 'success' | 'danger' | 'info';
+    type: 'warning' | 'success' | 'danger' | 'info' | 'default';
 };
 export type AdmonitionProps = Partial<AdmonitionTypeProps> & {
     name?: string;

package/lib/components/Admonition/Admonition.js

@@ -43,11 +43,13 @@ const WarningCycleIcon_1 = require("../../icons/WarningCycleIcon/WarningCycleIco
 const CheckmarkOutlineIcon_1 = require("../../icons/CheckmarkOutlineIcon/CheckmarkOutlineIcon");
 const ErrorIcon_1 = require("../../icons/ErrorIcon/ErrorIcon");
 const InformationIcon_1 = require("../../icons/InformationIcon/InformationIcon");
+const IdeaIcon_1 = require("../../icons/IdeaIcon/IdeaIcon");
 const IconsMap = {
     warning: WarningCycleIcon_1.WarningCycleIcon,
     success: CheckmarkOutlineIcon_1.CheckmarkOutlineIcon,
     danger: ErrorIcon_1.ErrorIcon,
     info: InformationIcon_1.InformationIcon,
+    default: IdeaIcon_1.IdeaIcon,
 };
 function Admonition({ type = 'info', name, children, className, 'data-source': dataSource, 'data-hash': dataHash, }) {
     const Icon = IconsMap[type] || IconsMap['info'];

package/lib/components/Admonition/variables.dark.js

@@ -14,5 +14,8 @@ exports.admonitionDarkMode = (0, styled_components_1.css) `
 
   --admonition-success-bg-color: color-mix(in srgb, var(--color-green-1) 40%, transparent); // @presenter Color
   --admonition-success-border: var(--admonition-border-width) var(--admonition-border-style) color-mix(in srgb, var(--color-green-3) 40%, transparent); // @presenter Border
+
+  --admonition-default-bg-color: color-mix(in srgb, var(--color-primary-bg, var(--admonition-default-bg-color-legacy)) 40%, transparent); // @presenter Color
+  --admonition-default-border: var(--admonition-border-width) var(--admonition-border-style) color-mix(in srgb, var(--color-primary-border, var(--admonition-default-border-color-legacy)) 40%, transparent); // @presenter Border
 `;
 //# sourceMappingURL=variables.dark.js.map

package/lib/components/Admonition/variables.js

@@ -91,6 +91,19 @@ exports.admonition = (0, styled_components_1.css) `
   --admonition-success-border-width: var(--admonition-border-width); // @presenter Color
   --admonition-success-border: var(--admonition-success-border-width) var(--admonition-success-border-style) var(--admonition-success-border-color); // @presenter Border
 
+  /**
+  * @tokens Admonition type primary
+  */
+
+  --admonition-default-bg-color: var(--color-primary-bg, var(--admonition-default-bg-color-legacy)); // @presenter Color
+  --admonition-default-text-color: var(--admonition-heading-text-color); // @presenter Color
+  --admonition-default-heading-text-color: var(--admonition-heading-text-color); // @presenter Color
+  --admonition-default-icon-color: var(--color-primary-base, var(--admonition-default-icon-color-legacy)); // @presenter Color
+  --admonition-default-border-color: var(--color-primary-border, var(--admonition-default-border-color-legacy)); // @presenter Color
+  --admonition-default-border-style: var(--admonition-border-style); // @presenter Color
+  --admonition-default-border-width: var(--admonition-border-width); // @presenter Color
+  --admonition-default-border: var(--admonition-default-border-width) var(--admonition-default-border-style) var(--admonition-default-border-color); // @presenter Border
+  
   // @tokens End
 `;
 //# sourceMappingURL=variables.js.map

package/lib/components/Button/variables.dark.js

@@ -19,8 +19,8 @@ exports.buttonDarkMode = (0, styled_components_1.css) `
   --button-bg-color-secondary-hover: var(--color-warm-grey-5);
   --button-bg-color-secondary-pressed: var(--color-warm-grey-6);
   --button-bg-color-secondary-danger-pressed: var(--color-raspberry-9);
-  --button-bg-color-primary-hover: var(--color-blue-5);
-  --button-bg-color-primary-pressed: var(--color-blue-4);
+  --button-bg-color-primary-hover: var(--color-primary-hover, var(--button-bg-color-primary-hover-legacy));
+  --button-bg-color-primary-pressed: var(--color-primary-active, var(--button-bg-color-primary-pressed-legacy));
   --button-bg-color-primary-danger-hover: var(--color-raspberry-5);
   --button-bg-color-primary-danger-pressed: var(--color-raspberry-4);
   --button-bg-color-disabled: var(--color-warm-grey-3);

package/lib/components/Button/variables.js

@@ -26,9 +26,9 @@ exports.button = (0, styled_components_1.css) `
   --button-content-color-primary-hover: var(--color-blue-7); // @presenter Color
   --button-content-color-primary-pressed: var(--color-blue-8); // @presenter Color
 
-  --button-bg-color-primary: var(--color-blue-6); // @presenter Color
-  --button-bg-color-primary-hover: var(--color-blue-7); // @presenter Color
-  --button-bg-color-primary-pressed: var(--color-blue-8); // @presenter Color
+  --button-bg-color-primary: var(--color-primary-base, var(--button-bg-color-primary-legacy)); // @presenter Color
+  --button-bg-color-primary-hover: var(--color-primary-hover, var(--button-bg-color-primary-hover-legacy)); // @presenter Color
+  --button-bg-color-primary-pressed: var(--color-primary-active, var(--button-bg-color-primary-pressed-legacy)); // @presenter Color
 
   --button-bg-color-primary-danger: var(--color-raspberry-6); // @presenter Color
   --button-bg-color-primary-danger-hover: var(--color-raspberry-7); // @presenter Color

package/lib/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityVersionItem.js

@@ -130,7 +130,9 @@ const VersionIcon = styled_components_1.default.div `
   height: var(--catalog-history-sidebar-version-icon-size);
   flex-shrink: 0;
   border-radius: 50%;
-  background-color: ${({ $isCurrent }) => $isCurrent ? 'var(--color-primary-base)' : 'var(--catalog-avatar-bg-color)'};
+  background-color: ${({ $isCurrent }) => $isCurrent
+    ? 'var(--color-primary-base, var(--color-blueberry-6))'
+    : 'var(--catalog-avatar-bg-color)'};
   transition: background-color 0.2s ease;
   margin-right: var(--catalog-history-sidebar-version-icon-margin-right);
 

package/lib/components/Catalog/CatalogTags.js

@@ -29,6 +29,7 @@ function CatalogTags({ items, itemsToShow = 1, showPlaceholder = false, showAvat
     if (shouldUseVariantWithTooltip) {
         const displayedItems = items.slice(0, itemsToShow);
         const remainingCount = items.length - itemsToShow;
+        const moreLabel = translate('catalog.tags.more', 'more');
         return (react_1.default.createElement(Tooltip_1.Tooltip, { tip: items.join(', '), placement: "bottom", className: "catalog" },
             react_1.default.createElement(CatalogTagsWrapper, { "data-component-name": "Catalog/CatalogTags" },
                 displayedItems.map((item, index) => (react_1.default.createElement(Tag_1.Tag, Object.assign({ key: `${item}-${index}` }, tagProps, (showAvatars && {
@@ -36,9 +37,11 @@ function CatalogTags({ items, itemsToShow = 1, showPlaceholder = false, showAvat
                     style: Object.assign(Object.assign({}, tagProps === null || tagProps === void 0 ? void 0 : tagProps.style), { paddingLeft: 'var(--catalog-tags-tag-left-padding)' }),
                 }), { textTransform: "none", maxLength: maxLength }),
                     react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, item)))),
-                remainingCount > 0 && react_1.default.createElement(MoreTagsButton, null,
+                remainingCount > 0 && (react_1.default.createElement(MoreTagsButton, null,
                     "+ ",
-                    remainingCount))));
+                    remainingCount,
+                    " ",
+                    react_1.default.createElement("span", { "data-translation-key": "catalog.tags.more" }, moreLabel))))));
     }
     return (react_1.default.createElement(CatalogTagsWrapper, { "data-component-name": "Catalog/CatalogTags" }, items.map((item, index) => (react_1.default.createElement(Tag_1.Tag, Object.assign({ key: `${item}-${index}` }, tagProps, (showAvatars && {
         icon: react_1.default.createElement(CatalogAvatar_1.CatalogAvatar, { value: item, size: "small" }),

package/lib/components/Filter/variables.js

@@ -24,7 +24,7 @@ exports.filter = (0, styled_components_1.css) `
   --filter-option-margin: 0;
 
   --filter-option-label-font-size: var(--font-size-base);
-  --filter-option-label-color: var(--text-color-secondary);
+  --filter-option-label-color: var(--text-color-primary);
 
   --filter-option-checkbox-padding-left: var(--spacing-xs);
 

package/lib/components/LanguagePicker/LanguagePicker.js

@@ -31,14 +31,13 @@ function LanguagePicker(props) {
         active: locale.code === currentLocale.code,
         suffix: locale.code === currentLocale.code && react_1.default.createElement(CheckmarkIcon_1.CheckmarkIcon, null),
     }));
-    return (react_1.default.createElement(LanguageDropdown, { triggerEvent: "click", placement: props.placement, alignment: props.alignment, trigger: languagePickerButton },
+    return (react_1.default.createElement(LanguageDropdown, { triggerEvent: "click", placement: props.placement, alignment: props.alignment, trigger: languagePickerButton, dataAttributes: {
+            'data-component-name': 'LanguagePicker/LanguagePicker',
+            'data-current-locale': currentLocale.code,
+        } },
         react_1.default.createElement(DropdownMenu_1.DropdownMenu, { items: languageItems })));
 }
-const LanguageDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown).attrs(() => ({
-    dataAttributes: {
-        'data-component-name': 'LanguagePicker/LanguagePicker',
-    },
-})) `
+const LanguageDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown) `
   display: none;
   height: auto;
   @media screen and (min-width: ${utils_1.breakpoints.medium}) {

package/lib/components/Link/Link.js

@@ -48,9 +48,9 @@ exports.Link = Link;
 const React = __importStar(require("react"));
 const react_1 = require("react");
 const react_router_dom_1 = require("react-router-dom");
-const contexts_1 = require("../../core/contexts");
+const ThemeDataContext_1 = require("../../core/contexts/ThemeDataContext");
 function Link(props) {
-    const context = (0, react_1.useContext)(contexts_1.ThemeDataContext);
+    const context = (0, react_1.useContext)(ThemeDataContext_1.ThemeDataContext);
     if (context === null || context === void 0 ? void 0 : context.components) {
         const { LinkComponent } = context.components;
         return React.createElement(LinkComponent, Object.assign({}, props));

package/lib/components/Menu/MenuItem.js

@@ -200,6 +200,7 @@ const MenuItemLabelWrapper = styled_components_1.default.li `
     (0, styled_components_1.css) `
       color: ${deprecated ? 'var(--menu-content-color-disabled)' : 'var(--menu-item-color-active)'};
       background-color: var(--menu-item-bg-color-active);
+      font-weight: var(--menu-item-font-weight-active);
 
       ${ChevronDownIcon_1.ChevronDownIcon} path {
         fill: var(--menu-item-color-active);

package/lib/components/Menu/variables.dark.js

@@ -7,5 +7,7 @@ exports.menuDarkMode = (0, styled_components_1.css) `
   --menu-content-title-color: var(--text-color-secondary); // @presenter Color
   --menu-content-color-active: var(--text-color-primary); // @presenter Color
   --menu-content-color-disabled: var(--text-color-disabled); // @presenter Color
+
+  --menu-item-bg-color-active: var(--color-primary-bg, var(--menu-item-bg-color-active-legacy)); // @presenter Color
 `;
 //# sourceMappingURL=variables.dark.js.map

package/lib/components/Menu/variables.js

@@ -21,6 +21,7 @@ exports.menu = (0, styled_components_1.css) `
   --menu-item-font-family: var(--sidebar-font-family); // @presenter FontFamily
   --menu-item-font-size: var(--sidebar-font-size); // @presenter FontSize
   --menu-item-font-weight: var(--font-weight-regular); // @presenter FontSize
+  --menu-item-font-weight-active: var(--font-weight-medium); // @presenter FontWeight
   --menu-item-line-height: var(--line-height-base); // @presenter LineHeight
 
     /**
@@ -30,11 +31,11 @@ exports.menu = (0, styled_components_1.css) `
   --menu-item-text-color: var(--sidebar-text-color); // @presenter Color
   --menu-item-bg-color: transparent; // @presenter Color
   --menu-item-bg-color-hover: var(--color-hover-base); // @presenter Color
-  --menu-item-bg-color-active: var(--tree-bg-color-active); // @presenter Color
+  --menu-item-bg-color-active: var(--color-primary-bg, var(--menu-item-bg-color-active-legacy)); // @presenter Color
 
   --menu-item-color-hover: var(--tree-content-color-hover); // @presenter Color
-  --menu-item-color-active: var(--tree-content-color-default); // @presenter Color
-
+  --menu-item-color-active: var(--color-primary-text, var(--menu-item-color-active-legacy)); // @presenter Color
+  
   /**
    * @tokens Menu item spacing
    * @presenter Spacing

package/lib/components/Search/SearchAiMessage.js

@@ -56,6 +56,13 @@ function MarkdownSegment({ text }) {
     const markdown = useMarkdownText(text);
     return react_1.default.createElement(ResponseText, { as: "div", children: markdown, "data-testid": "response-text" });
 }
+function getToolCallDisplayText(toolName) {
+    var _a;
+    return ((_a = constants_1.TOOL_CALL_DISPLAY_TEXT[toolName]) !== null && _a !== void 0 ? _a : {
+        inProgressText: `Executing ${toolName}...`,
+        completedText: `${toolName} executed`,
+    });
+}
 function SearchAiMessageComponent({ role, content, isThinking, resources, className, messageId, feedback, onFeedbackChange, toolCalls = [], contentSegments = [{ type: 'text', text: content }], }) {
     var _a;
     const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
@@ -100,14 +107,10 @@ function SearchAiMessageComponent({ role, content, isThinking, resources, classN
         react_1.default.createElement(MessageContentWrapper, null, role === constants_2.AiSearchConversationRole.ASSISTANT ? (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(MessageWrapper, { role: role },
                 contentSegments.map((segment, index) => {
-                    var _a, _b, _c, _d, _e, _f;
                     if (segment.type === 'tool') {
                         const toolCallCompleted = Boolean(segment.toolCall.result);
-                        const toolCallCompletedText = (_b = (_a = constants_1.TOOL_CALL_DISPLAY_TEXT[segment.toolCall.name]) === null || _a === void 0 ? void 0 : _a.completedText) !== null && _b !== void 0 ? _b : `${translate('search.ai.toolResult.found', 'Found')} ${(_d = (_c = segment.toolCall.result) === null || _c === void 0 ? void 0 : _c.documentCount) !== null && _d !== void 0 ? _d : 0} ${translate('search.ai.toolResult.found.documents', 'documents')}`;
-                        const toolCallInProgressText = (_f = (_e = constants_1.TOOL_CALL_DISPLAY_TEXT[segment.toolCall.name]) === null || _e === void 0 ? void 0 : _e.inProgressText) !== null && _f !== void 0 ? _f : translate('search.ai.toolCall.searching', 'Searching...');
-                        const toolCallDisplayText = toolCallCompleted
-                            ? toolCallCompletedText
-                            : toolCallInProgressText;
+                        const { inProgressText, completedText } = getToolCallDisplayText(segment.toolCall.name);
+                        const toolCallDisplayText = toolCallCompleted ? completedText : inProgressText;
                         return (react_1.default.createElement(ToolCallsInfoWrapper, { key: `tool-${index}`, "data-testid": "tool-calls-info" },
                             react_1.default.createElement(ToolCallInfoItem, null,
                                 react_1.default.createElement(DocumentIcon_1.DocumentIcon, { size: "14px", color: "--search-ai-text-color" }),

package/lib/components/SvgViewer/SvgViewer.js

@@ -116,8 +116,6 @@ function SvgViewer({ isOpen, onClose, children, labels = {}, }) {
         }
     }, [onClose, zoomIn, zoomOut, resetView]);
     const handleWheel = (0, react_1.useCallback)((e) => {
-        e.preventDefault();
-        e.stopPropagation();
         setIsWheelZooming(true);
         if (wheelTimeoutRef.current)
             clearTimeout(wheelTimeoutRef.current);
@@ -158,7 +156,6 @@ function SvgViewer({ isOpen, onClose, children, labels = {}, }) {
         }
     }, [position, scale]);
     const handleTouchMove = (0, react_1.useCallback)((e) => {
-        e.preventDefault();
         if (e.touches.length === 2 && pinchState) {
             const distance = getTouchDistance(e.touches);
             setScale(clampScale(pinchState.scale * (distance / pinchState.distance)));

package/lib/components/SvgViewer/variables.js

@@ -8,7 +8,7 @@ exports.svgViewer = (0, styled_components_1.css) `
    */
 
   --svg-viewer-overlay-bg-color: var(--bg-color-modal-overlay); // @presenter Color
-  --svg-viewer-bg-color: var(--bg-color); // @presenter Color
+  --svg-viewer-bg-color: var(--bg-color-raised); // @presenter Color
   --svg-viewer-border-radius: var(--border-radius-xl); // @presenter BorderRadius
   --svg-viewer-box-shadow: var(--bg-raised-shadow); // @presenter BoxShadow
 

package/lib/components/Switch/variables.dark.js

@@ -4,7 +4,7 @@ exports.switcherDarkMode = void 0;
 const styled_components_1 = require("styled-components");
 exports.switcherDarkMode = (0, styled_components_1.css) `
     --switch-bg-color: transparent; // @presenter Color
-    --switch-bg-color-selected: var(--color-warm-grey-7); // @presenter Color
+    --switch-bg-color-selected: var(--color-primary-base, var(--switch-bg-color-selected-legacy)); // @presenter Color
     --switch-bg-color-hover: transparent; // @presenter Color
     --switch-bg-color-pressed: transparent; // @presenter Color
     --switch-bg-color-disabled: transparent; // @presenter Color
@@ -14,7 +14,7 @@ exports.switcherDarkMode = (0, styled_components_1.css) `
     --switch-border-color-hover: var(--color-warm-grey-7); // @presenter Color
     --switch-border-color-pressed: var(--color-warm-grey-8); // @presenter Color
     --switch-border-color-disabled: var(--color-warm-grey-5); // @presenter Color
-    --switch-border-color-selected: var(--color-warm-grey-7); // @presenter Color
+    --switch-border-color-selected: var(--color-primary-base, var(--switch-border-color-selected-legacy)); // @presenter Color
     --switch-border-width: var(--border-width); // @presenter Border
     --switch-border-radius: var(--border-radius); // @presenter BorderRadius
 

package/lib/components/Switch/variables.js

@@ -4,7 +4,7 @@ exports.switcher = void 0;
 const styled_components_1 = require("styled-components");
 exports.switcher = (0, styled_components_1.css) `
     --switch-bg-color: var(--color-warm-grey-4); // @presenter Color
-    --switch-bg-color-selected: var(--color-warm-grey-9); // @presenter Color
+    --switch-bg-color-selected: var(--color-primary-base, var(--switch-bg-color-selected-legacy)); // @presenter Color
     --switch-bg-color-hover: var(--color-warm-grey-5); // @presenter Color
     --switch-bg-color-pressed: var(--color-warm-grey-6); // @presenter Color
     --switch-bg-color-disabled: var(--color-warm-grey-3); // @presenter Color

package/lib/components/TableOfContent/TableOfContent.js

@@ -122,6 +122,7 @@ const TableOfContentMenuItem = styled_components_1.default.a `
   &.active {
     color: var(--toc-item-text-color-active);
     border-left: solid 2px var(--toc-item-border-color-active);
+    font-weight: var(--toc-item-font-weight-active);
   }
 
   :empty {

package/lib/components/TableOfContent/variables.js

@@ -26,12 +26,13 @@ exports.toc = (0, styled_components_1.css) `
 
   --toc-item-font-weight: var(--font-weight-regular); // @presenter FontWeight
   --toc-item-text-color: var(--text-color-description); // @presenter Color
-  --toc-item-text-color-active: var(--text-color-primary); // @presenter Color
+  --toc-item-text-color-active: var(--color-primary-text, var(--toc-item-text-color-active-legacy)); // @presenter Color
   --toc-item-bg-color: transparent; // @presenter Color
   --toc-item-nested-offset: calc(var(--toc-spacing-unit) * 2); // @presenter Spacing
   --toc-item-padding-vertical: calc(var(--toc-spacing-unit) / 2); // @presenter Spacing
   --toc-item-padding-horizontal: calc(var(--toc-spacing-unit) * 2); // @presenter Spacing
-  --toc-item-border-color-active: var(--border-color-invers);
+  --toc-item-border-color-active: var(--color-primary-base, var(--toc-item-border-color-active-legacy));
+  --toc-item-font-weight-active: var(--font-weight-medium); // @presenter FontWeight
 
   /**
     * @tokens TOC header

package/lib/components/Toast/Toast.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { ReactElement } from 'react';
+import type { ToastItem } from '../../core/types';
+export interface ToastComponentProps {
+    toast: ToastItem;
+    onDismiss: (id: string) => void;
+    stackIndex: number;
+    stackZIndex?: number;
+    className?: string;
+}
+declare function ToastComponent({ toast, onDismiss, stackIndex, stackZIndex, className, }: ToastComponentProps): ReactElement;
+export declare const Toast: React.MemoExoticComponent<typeof ToastComponent>;
+export declare const spin: import("styled-components").Keyframes;
+export {};

package/lib/components/Toast/Toast.js

@@ -0,0 +1,239 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+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.spin = exports.Toast = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const CheckmarkFilledIcon_1 = require("../../icons/CheckmarkFilledIcon/CheckmarkFilledIcon");
+const CircleDashIcon_1 = require("../../icons/CircleDashIcon/CircleDashIcon");
+const CloseIcon_1 = require("../../icons/CloseIcon/CloseIcon");
+const ErrorFilledIcon_1 = require("../../icons/ErrorFilledIcon/ErrorFilledIcon");
+const InformationFilledIcon_1 = require("../../icons/InformationFilledIcon/InformationFilledIcon");
+const WarningFilledIcon_1 = require("../../icons/WarningFilledIcon/WarningFilledIcon");
+const hooks_1 = require("../../core/hooks");
+const Button_1 = require("../../components/Button/Button");
+const toast_1 = require("../../core/constants/toast");
+function renderToastIcon(type) {
+    switch (type) {
+        case 'success':
+            return react_1.default.createElement(CheckmarkFilledIcon_1.CheckmarkFilledIcon, { size: "--toast-icon-size", color: "--toast-icon-color-success" });
+        case 'warning':
+            return react_1.default.createElement(WarningFilledIcon_1.WarningFilledIcon, { size: "--toast-icon-size", color: "--toast-icon-color-warning" });
+        case 'error':
+            return react_1.default.createElement(ErrorFilledIcon_1.ErrorFilledIcon, { size: "--toast-icon-size", color: "--toast-icon-color-error" });
+        case 'loading':
+            return react_1.default.createElement(CircleDashIcon_1.CircleDashIcon, { size: "--toast-icon-size", color: "--toast-icon-color-loading" });
+        case 'info':
+        default:
+            return react_1.default.createElement(InformationFilledIcon_1.InformationFilledIcon, { size: "--toast-icon-size", color: "--toast-icon-color-info" });
+    }
+}
+function renderDismissButton(onClick) {
+    return (react_1.default.createElement(CloseButton, { "aria-label": "Dismiss notification", title: "Dismiss notification", icon: react_1.default.createElement(CloseIcon_1.CloseIcon, { size: "--toast-close-button-icon-size", color: "--toast-close-button-icon-color" }), onClick: onClick }));
+}
+function ToastComponent({ toast, onDismiss, stackIndex, stackZIndex = 1, className, }) {
+    const { wrapperRef, hasDetails, dismissToast, handleMouseEnter, handleMouseLeave, ariaRole, ariaLive, } = (0, hooks_1.useToastLogic)({
+        toast,
+        onDismiss,
+        stackIndex,
+    });
+    const icon = renderToastIcon(toast.type);
+    const content = !hasDetails ? (react_1.default.createElement(SimpleToastSurface, { "$isExiting": toast.isExiting, "aria-live": ariaLive, role: ariaRole },
+        react_1.default.createElement(ContentWrapper, null,
+            react_1.default.createElement(IconWrapper, null, icon),
+            react_1.default.createElement(SimpleContent, null,
+                react_1.default.createElement(SimpleText, null, toast.title))),
+        renderDismissButton(dismissToast))) : (react_1.default.createElement(DetailedToastSurface, { "$isExiting": toast.isExiting, "aria-live": ariaLive, role: ariaRole },
+        react_1.default.createElement(ContentWrapper, null,
+            react_1.default.createElement(IconWrapper, null, icon),
+            react_1.default.createElement(Body, null,
+                react_1.default.createElement(TitleRow, null,
+                    react_1.default.createElement(TitleText, null, toast.title),
+                    renderDismissButton(dismissToast)),
+                toast.description ? (react_1.default.createElement(DescriptionRow, null,
+                    react_1.default.createElement(DescriptionText, null, toast.description))) : null))));
+    return (react_1.default.createElement(ToastWrapper, { ref: wrapperRef, "$stackZIndex": stackZIndex, className: className, "data-component-name": "Toast/Toast", "data-testid": `toast-${toast.type}`, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }, content));
+}
+exports.Toast = (0, react_1.memo)(ToastComponent);
+const slideIn = (0, styled_components_1.keyframes) `
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+`;
+const slideOut = (0, styled_components_1.keyframes) `
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+`;
+exports.spin = (0, styled_components_1.keyframes) `
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+`;
+const ToastWrapper = styled_components_1.default.div `
+  position: relative;
+  z-index: ${({ $stackZIndex }) => $stackZIndex};
+  width: 100%;
+  pointer-events: auto;
+  will-change: transform;
+`;
+const ToastSurface = styled_components_1.default.div `
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  min-width: var(--toast-min-width);
+  max-width: var(--toast-max-width);
+  background-color: var(--toast-bg-color);
+  border: var(--toast-border);
+  border-radius: var(--toast-border-radius);
+  box-shadow: var(--toast-box-shadow);
+  color: var(--toast-text-color);
+  font-family: var(--toast-font-family);
+  animation: ${({ $isExiting }) => $isExiting
+    ? (0, styled_components_1.css) `
+          ${slideOut} ${toast_1.TOAST_SLIDE_DURATION_MS}ms ease-in forwards
+        `
+    : (0, styled_components_1.css) `
+          ${slideIn} ${toast_1.TOAST_SLIDE_DURATION_MS}ms ease-out
+        `};
+
+  @media (max-width: 480px) {
+    min-width: 0;
+    max-width: none;
+  }
+`;
+const SimpleToastSurface = (0, styled_components_1.default)(ToastSurface) `
+  gap: var(--toast-simple-gap);
+  padding: var(--toast-simple-padding);
+`;
+const DetailedToastSurface = (0, styled_components_1.default)(ToastSurface) `
+  padding: var(--toast-detailed-padding);
+`;
+const ContentWrapper = styled_components_1.default.div `
+  display: flex;
+  flex: 1 1 auto;
+  gap: var(--toast-content-gap);
+  min-width: 0;
+`;
+const IconWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--toast-icon-size);
+  min-width: var(--toast-icon-size);
+  height: var(--toast-icon-line-height);
+
+  ${CircleDashIcon_1.CircleDashIcon} {
+    animation: ${exports.spin} var(--toast-loading-animation-duration) linear infinite;
+  }
+`;
+const flexItemStyles = (0, styled_components_1.css) `
+  flex: 1 1 auto;
+  min-width: 0;
+`;
+const SimpleContent = styled_components_1.default.div `
+  ${flexItemStyles}
+`;
+const Body = styled_components_1.default.div `
+  display: flex;
+  ${flexItemStyles}
+  flex-direction: column;
+`;
+const TitleRow = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  gap: var(--toast-title-gap);
+  min-width: 0;
+`;
+const DescriptionRow = styled_components_1.default.div `
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--toast-description-gap);
+  min-width: 0;
+`;
+const textStyles = (0, styled_components_1.css) `
+  margin: 0;
+  font-size: var(--toast-text-font-size);
+  line-height: var(--toast-text-line-height);
+  color: var(--toast-text-color);
+  overflow-wrap: anywhere;
+`;
+const TitleText = styled_components_1.default.p `
+  ${textStyles}
+  ${flexItemStyles}
+  font-weight: var(--toast-title-font-weight);
+`;
+const SimpleText = styled_components_1.default.p `
+  ${textStyles}
+  font-weight: var(--toast-body-font-weight);
+`;
+const DescriptionText = styled_components_1.default.p `
+  ${textStyles}
+  ${flexItemStyles}
+  font-weight: var(--toast-body-font-weight);
+`;
+const CloseButton = (0, styled_components_1.default)(Button_1.Button).attrs({
+    variant: 'ghost',
+    size: 'small',
+}) `
+  flex: 0 0 auto;
+  min-height: unset;
+  margin: 0;
+  padding: var(--toast-close-button-padding);
+  color: var(--toast-close-button-icon-color);
+
+  &:hover,
+  &:focus-visible {
+    border: none;
+  }
+`;
+//# sourceMappingURL=Toast.js.map

package/lib/components/Toast/variables.d.ts

@@ -0,0 +1 @@
+export declare const toast: import("styled-components").FlattenSimpleInterpolation;

package/lib/components/Toast/variables.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toast = void 0;
+const styled_components_1 = require("styled-components");
+/* eslint-disable theme/no-raw-colors-in-styles */
+exports.toast = (0, styled_components_1.css) `
+  /**
+    * @tokens Toast
+    * @presenter BoxShadow
+    */
+
+  --toast-box-shadow: 2px 2px 12px 0 rgba(0, 0, 0, 0.04), 2px 2px 24px 8px rgba(0, 0, 0, 0.04);
+
+  /**
+    * @tokens Toast surface
+    */
+  --toast-min-width: 240px;
+  --toast-max-width: 360px;
+  --toast-bg-color: var(--layer-color); // @presenter Color
+  --toast-border: var(--border-width) var(--border-style) var(--border-color-secondary); // @presenter Border
+  --toast-border-radius: var(--border-radius-md); // @presenter BorderRadius
+  --toast-font-family: var(--font-family-base); // @presenter FontFamily
+
+  /**
+    * @tokens Toast spacing
+    */
+  --toast-simple-gap: var(--spacing-unit);
+  --toast-simple-padding: var(--spacing-xs) var(--spacing-sm);
+  --toast-detailed-padding: var(--spacing-sm);
+  --toast-content-gap: var(--spacing-xs);
+  --toast-title-gap: var(--spacing-xs);
+  --toast-description-gap: var(--spacing-xs);
+
+  /**
+    * @tokens Toast icon
+    */
+  --toast-icon-size: 14px;
+  --toast-icon-line-height: var(--line-height-base); // @presenter LineHeight
+  --toast-icon-color-info: var(--color-info-base); // @presenter Color
+  --toast-icon-color-success: var(--color-success-base); // @presenter Color
+  --toast-icon-color-warning: var(--color-warning-base); // @presenter Color
+  --toast-icon-color-error: var(--color-error-base); // @presenter Color
+  --toast-icon-color-loading: var(--loading-spinner-color); // @presenter Color
+  --toast-loading-animation-duration: 3s;
+
+  /**
+    * @tokens Toast typography
+    */
+  --toast-text-font-size: var(--font-size-base); // @presenter FontSize
+  --toast-text-line-height: var(--line-height-base); // @presenter LineHeight
+  --toast-text-color: var(--text-color-primary); // @presenter Color
+  --toast-title-font-weight: var(--font-weight-semibold); // @presenter FontWeight
+  --toast-body-font-weight: var(--font-weight-regular); // @presenter FontWeight
+
+  /**
+    * @tokens Toast close button
+    */
+  --toast-close-button-padding: 3px;
+  --toast-close-button-icon-size: 14px;
+  --toast-close-button-icon-color: var(--icon-color-secondary); // @presenter Color
+
+  // @tokens End
+`;
+//# sourceMappingURL=variables.js.map