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

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/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/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/SvgViewer/variables.dark.js

@@ -3,6 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.svgViewerDarkMode = void 0;
 const styled_components_1 = require("styled-components");
 exports.svgViewerDarkMode = (0, styled_components_1.css) `
-  --svg-viewer-bg-color: var(--color-warm-grey-3);
+  --svg-viewer-bg-color: var(--color-warm-grey-9);
 `;
 //# sourceMappingURL=variables.dark.js.map

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

package/lib/components/Tooltip/JsTooltip.js

@@ -269,7 +269,7 @@ const TooltipBody = styled_components_1.default.span `
     var(--tooltip-border-color, transparent);
   box-shadow: var(--bg-raised-shadow);
 
-  width: ${({ width }) => width || 'auto'};
+  width: ${({ width }) => width || 'max-content'};
   ${({ placement }) => (0, styled_components_1.css) `
     ${PLACEMENTS[placement]};
   `}

package/lib/core/constants/toast.d.ts

@@ -0,0 +1 @@
+export declare const TOAST_SLIDE_DURATION_MS = 300;

package/lib/core/constants/toast.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TOAST_SLIDE_DURATION_MS = void 0;
+exports.TOAST_SLIDE_DURATION_MS = 300;
+//# sourceMappingURL=toast.js.map

package/lib/core/contexts/Toast/ToastContext.d.ts

@@ -0,0 +1,2 @@
+import type { ToastContextValue } from '../../../core/types';
+export declare const ToastContext: import("react").Context<ToastContextValue | null>;

package/lib/core/contexts/Toast/ToastContext.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToastContext = void 0;
+const react_1 = require("react");
+exports.ToastContext = (0, react_1.createContext)(null);
+//# sourceMappingURL=ToastContext.js.map

package/lib/core/contexts/Toast/ToastProvider.d.ts

@@ -0,0 +1,3 @@
+import type { ReactElement } from 'react';
+import type { ToastProviderProps } from '../../../core/types/toast';
+export declare function ToastProvider({ children, mountId }: ToastProviderProps): ReactElement;