twenty-ui 2.45.0 → 2.47.0

package/dist/components/code-editor.mjs

@@ -1,21 +1,23 @@
 import { t as n } from "../isDefined-fMi6eQ4r.js";
-import { n as Y, r as Z } from "../theme-CjHovJAZ.js";
-import { t as oo } from "../Loader-BLkXvZli.js";
-import { t as ro } from "../ResizeHandle-CGYGfOVF.js";
-import { jsx as i, jsxs as x } from "react/jsx-runtime";
-import { useEffect as E, useId as eo, useState as f } from "react";
-import to, { loader as no } from "@monaco-editor/react";
-var z = "baseCodeEditorTheme", r = (o) => {
+import { n as Y, r as Z } from "../theme-B2EaXhye.js";
+import { t as oo } from "../Loader-DtHWQH8w.js";
+import { t as ro } from "../ResizeHandle-Bjg4R0c-.js";
+import { useRender as eo } from "@base-ui/react/use-render";
+import { clsx as to } from "clsx";
+import { useEffect as E, useId as no, useState as p } from "react";
+import { Fragment as ao, jsx as l, jsxs as x } from "react/jsx-runtime";
+import io, { loader as so } from "@monaco-editor/react";
+var $ = "baseCodeEditorTheme", r = (o) => {
   if (o.trim() === "transparent") return "#00000000";
   const t = o.match(/color\(display-p3\s+([\d.]+)\s+([\d.]+)\s+([\d.]+)(?:\s+\/\s+([\d.]+))?\)/);
   if (n(t)) {
-    const [, a, d, s, v] = t;
-    if (!n(a) || !n(d) || !n(s)) return o;
-    const u = Math.round(parseFloat(a) * 255).toString(16).padStart(2, "0"), p = Math.round(parseFloat(d) * 255).toString(16).padStart(2, "0"), b = Math.round(parseFloat(s) * 255).toString(16).padStart(2, "0");
-    return n(v) ? `#${u}${p}${b}${Math.round(parseFloat(v) * 255).toString(16).padStart(2, "0")}` : `#${u}${p}${b}`;
+    const [, i, c, u, g] = t;
+    if (!n(i) || !n(c) || !n(u)) return o;
+    const a = Math.round(parseFloat(i) * 255).toString(16).padStart(2, "0"), k = Math.round(parseFloat(c) * 255).toString(16).padStart(2, "0"), b = Math.round(parseFloat(u) * 255).toString(16).padStart(2, "0");
+    return n(g) ? `#${a}${k}${b}${Math.round(parseFloat(g) * 255).toString(16).padStart(2, "0")}` : `#${a}${k}${b}`;
   }
   return o;
-}, ao = (o, t) => ({
+}, lo = (o, t) => ({
   base: t === "dark" ? "vs-dark" : "vs",
   inherit: !0,
   rules: [
@@ -99,98 +101,98 @@ var z = "baseCodeEditorTheme", r = (o) => {
     "editorBracketMatch.background": r(o.background.transparent.light),
     "editorBracketMatch.border": r(o.border.color.medium)
   }
-}), io = "_editorLoader_zilk9_1", so = "_container_zilk9_20", lo = "_editorWrapper_zilk9_24", S = {
-  editorLoader: io,
-  container: so,
-  editorWrapper: lo
-}, I, co = () => (I ??= import("monaco-editor").then((o) => {
-  no.config({ monaco: o });
-}), I), j = (o, t, a) => {
-  o.editor.defineTheme(z, ao(t, a)), o.editor.setTheme(z);
-}, yo = ({ value: o, language: t, onMount: a, onChange: d, setMarkers: s, onValidate: v, height: u = 450, variant: p = "default", transparentBackground: b, isLoading: N = !1, options: O, resizable: y = !1, resizeLabel: P = "Resize editor", contentPadding: w = "default", autoHeight: W = !1 }) => {
-  const g = Z(), _ = Y(), [h, R] = f(void 0), [k, A] = f(void 0), [V, T] = f(!1), [q, G] = f(!1), [K, B] = f(void 0), [D, J] = f(typeof u == "number" ? u : 450), F = eo(), M = W && !y, H = typeof g.spacingMultiplicator == "number" ? g.spacingMultiplicator * 4 : void 0, C = M ? K ?? u : y ? D : u, Q = {
+}), co = "_editorWrapper_zilk9_24", uo = "_editorLoader_zilk9_1", go = "_container_zilk9_20", S = {
+  editorWrapper: co,
+  editorLoader: uo,
+  container: go
+}, z, fo = () => (z ??= import("monaco-editor").then((o) => {
+  so.config({ monaco: o });
+}), z), I = (o, t, i) => {
+  o.editor.defineTheme($, lo(t, i)), o.editor.setTheme($);
+}, So = ({ value: o, language: t, onMount: i, onChange: c, setMarkers: u, onValidate: g, height: a = 450, variant: k = "default", transparentBackground: b, isLoading: j = !1, options: O, resizable: y = !1, resizeLabel: P = "Resize editor", contentPadding: w = "default", autoHeight: R = !1 }) => {
+  const f = Z(), _ = Y(), [h, W] = p(void 0), [m, A] = p(void 0), [V, F] = p(!1), [q, G] = p(!1), [K, T] = p(void 0), [B, J] = p(typeof a == "number" ? a : 450), D = no(), M = R && !y, H = typeof f.spacingMultiplicator == "number" ? f.spacingMultiplicator * 4 : void 0, C = M ? K ?? a : y ? B : a, Q = {
     ...w === "comfortable" ? { lineDecorationsWidth: H } : {},
     padding: {
       bottom: H,
       top: H
     }
-  }, { padding: fo, ...U } = O ?? {}, $ = (e, l) => {
-    const c = e?.getModel();
-    if (!n(c)) return;
-    const m = s?.(c.getValue());
-    n(m) && l?.editor.setModelMarkers(c, "customMarker", m);
+  }, { padding: mo, ...U } = O ?? {}, N = (e, d) => {
+    const s = e?.getModel();
+    if (!n(s)) return;
+    const v = u?.(s.getValue());
+    n(v) && d?.editor.setModelMarkers(s, "customMarker", v);
   }, X = (e) => {
     V && e.stopPropagation();
   };
   return E(() => {
     let e = !0;
-    return co().then(() => {
+    return fo().then(() => {
       e && G(!0);
     }), () => {
       e = !1;
     };
   }, []), E(() => {
-    n(h) && j(h, g, _);
+    n(h) && I(h, f, _);
   }, [
     _,
     h,
-    g
+    f
   ]), E(() => {
-    if (!M || !n(k)) {
-      B(void 0);
+    if (!M || !n(m)) {
+      T(void 0);
       return;
     }
     const e = () => {
-      const c = k.getContentHeight();
-      !Number.isFinite(c) || c <= 0 || B((m) => m === c ? m : c);
+      const s = m.getContentHeight();
+      !Number.isFinite(s) || s <= 0 || T((v) => v === s ? v : s);
     };
     e();
-    const l = k.onDidContentSizeChange(e);
+    const d = m.onDidContentSizeChange(e);
     return () => {
-      l.dispose();
+      d.dispose();
     };
-  }, [k, M]), N || !q ? /* @__PURE__ */ i("div", {
+  }, [m, M]), j || !q ? /* @__PURE__ */ l("div", {
     className: S.editorLoader,
-    "data-variant": p,
+    "data-variant": k,
     style: { "--code-editor-height": typeof C == "number" ? `${C}px` : C },
-    children: /* @__PURE__ */ i(oo, {})
+    children: /* @__PURE__ */ l(oo, {})
   }) : /* @__PURE__ */ x("div", {
     className: S.container,
     onKeyDown: X,
     children: [
-      /* @__PURE__ */ i("input", {
+      /* @__PURE__ */ l("input", {
         type: "hidden",
         "data-testid": "code-editor-value",
         value: o ?? "",
         readOnly: !0
       }),
-      /* @__PURE__ */ i("div", {
-        id: F,
+      /* @__PURE__ */ l("div", {
+        id: D,
         className: S.editorWrapper,
-        "data-variant": p,
+        "data-variant": k,
         "data-transparent-background": b || void 0,
-        children: /* @__PURE__ */ i(to, {
+        children: /* @__PURE__ */ l(io, {
           height: C,
           value: o,
           language: t,
           loading: "",
-          onMount: (e, l) => {
-            R(l), A(e), j(l, g, _), e.onDidFocusEditorWidget(() => {
-              T(!0);
+          onMount: (e, d) => {
+            W(d), A(e), I(d, f, _), e.onDidFocusEditorWidget(() => {
+              F(!0);
             }), e.onDidBlurEditorWidget(() => {
-              T(!1);
-            }), a?.(e, l), $(e, l);
+              F(!1);
+            }), i?.(e, d), N(e, d);
           },
           onChange: (e) => {
-            n(e) && (d?.(e), $(k, h));
+            n(e) && (c?.(e), N(m, h));
           },
           onValidate: (e) => {
-            v?.(e);
+            g?.(e);
           },
           options: {
             formatOnPaste: !0,
             formatOnType: !0,
-            fontFamily: g.code.font.family,
+            fontFamily: f.code.font.family,
             bracketPairColorization: { enabled: !1 },
             overviewRulerLanes: 0,
             scrollBeyondLastLine: !1,
@@ -204,28 +206,33 @@ var z = "baseCodeEditorTheme", r = (o) => {
           }
         })
       }),
-      y && /* @__PURE__ */ i(ro, {
+      y && /* @__PURE__ */ l(ro, {
         "aria-label": P,
-        "aria-controls": F,
-        value: D,
+        "aria-controls": D,
+        value: B,
         onValueChange: J
       })
     ]
   });
-}, uo = "_editorHeader_19qlo_1", go = "_elementContainer_19qlo_15", L = {
-  editorHeader: uo,
-  elementContainer: go
-}, _o = ({ title: o, leftNodes: t, rightNodes: a }) => /* @__PURE__ */ x("div", {
-  className: L.editorHeader,
-  children: [/* @__PURE__ */ x("div", {
-    className: L.elementContainer,
-    children: [t && t.map((d, s) => /* @__PURE__ */ i("div", { children: d }, `left-${s}`)), o]
-  }), /* @__PURE__ */ i("div", {
-    className: L.elementContainer,
-    children: a && a.map((d, s) => /* @__PURE__ */ i("div", { children: d }, `right-${s}`))
-  })]
+}, po = "_editorHeader_19qlo_1", ko = "_elementContainer_19qlo_15", L = {
+  editorHeader: po,
+  elementContainer: ko
+}, Lo = ({ title: o, startElement: t, endElement: i, className: c, render: u, ref: g, ...a }) => eo({
+  render: u,
+  ref: g,
+  props: {
+    ...a,
+    className: to(L.editorHeader, c),
+    children: /* @__PURE__ */ x(ao, { children: [/* @__PURE__ */ x("div", {
+      className: L.elementContainer,
+      children: [t, o]
+    }), /* @__PURE__ */ l("div", {
+      className: L.elementContainer,
+      children: i
+    })] })
+  }
 });
 export {
-  yo as CodeEditor,
-  _o as CodeEditorHeader
+  So as CodeEditor,
+  Lo as CodeEditorHeader
 };

package/dist/components/data-display/AvatarGroup/AvatarGroup.d.ts

@@ -1,2 +1,2 @@
 import { AvatarGroupProps } from './types/AvatarGroupProps';
-export declare const AvatarGroup: ({ avatars, className, maxVisible, overflowAvatar, overflowCount, overflowShape, overlap, overlapOffset, }: AvatarGroupProps) => import("react").JSX.Element | null;
+export declare const AvatarGroup: ({ avatars, className, maxVisible, total, renderOverflow, overflowShape, overlap, overlapOffset, render, ref, ...props }: AvatarGroupProps) => import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | null;

package/dist/components/data-display/AvatarGroup/__stories__/AvatarGroupIdentityExample.d.ts

@@ -0,0 +1 @@
+export declare const AvatarGroupIdentityExample: () => import("react").JSX.Element;

package/dist/components/data-display/AvatarGroup/__stories__/AvatarGroupStatefulAvatar.d.ts

@@ -0,0 +1,3 @@
+export declare const AvatarGroupStatefulAvatar: ({ name }: {
+    name: string;
+}) => import("react").JSX.Element;

package/dist/components/data-display/AvatarGroup/types/AvatarGroupProps.d.ts

@@ -1,11 +1,11 @@
+import { useRender } from '@base-ui/react/use-render';
 import { ReactNode } from 'react';
 import { AvatarShape } from '../../../../primitives/data-display/Avatar/types/AvatarShape';
-export type AvatarGroupProps = {
+export type AvatarGroupProps = Omit<useRender.ComponentProps<'div'>, 'children'> & {
     avatars: ReactNode[];
-    className?: string;
     maxVisible?: number;
-    overflowAvatar?: ReactNode;
-    overflowCount?: number;
+    total?: number;
+    renderOverflow?: (hiddenCount: number) => ReactNode;
     overflowShape?: AvatarShape;
     overlap?: 'left' | 'right';
     overlapOffset?: string;

package/dist/components/data-display/CommandBlock/CommandBlock.d.ts

@@ -1,7 +1,2 @@
-import { ReactElement } from 'react';
-type CommandBlockProps = {
-    commands: string[];
-    button?: ReactElement;
-};
-export declare const CommandBlock: ({ commands, button }: CommandBlockProps) => import("react").JSX.Element;
-export {};
+import { CommandBlockProps } from './types/CommandBlockProps';
+export declare const CommandBlock: ({ commands, actions, render, ref, className, ...props }: CommandBlockProps) => import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;

package/dist/components/data-display/CommandBlock/types/CommandBlockProps.d.ts

@@ -0,0 +1,6 @@
+import { useRender } from '@base-ui/react/use-render';
+import { ReactNode } from 'react';
+export type CommandBlockProps = Omit<useRender.ComponentProps<'div'>, 'children'> & {
+    commands: readonly string[];
+    actions?: ReactNode;
+};

package/dist/components/data-display/MetricRow/MetricRow.d.ts

@@ -1,2 +1,2 @@
 import { MetricRowProps } from './types/MetricRowProps';
-export declare const MetricRow: ({ children, startIcon: StartIcon, value, progress, progressColor, progressValueText, render, ref, className, ...props }: MetricRowProps) => import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare const MetricRow: ({ children, startIcon, value, progress, progressColor, progressValueText, render, ref, className, ...props }: MetricRowProps) => import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;

package/dist/components/data-display/MetricRow/types/MetricRowProps.d.ts

@@ -1,9 +1,8 @@
 import { useRender } from '@base-ui/react/use-render';
 import { ReactNode } from 'react';
-import { IconComponent } from '../../../../icon';
 export type MetricRowProps = Omit<useRender.ComponentProps<'div'>, 'children'> & {
-    children: string;
-    startIcon?: IconComponent;
+    children: ReactNode;
+    startIcon?: ReactNode;
     value: ReactNode;
     progress?: number;
     progressColor?: string;

package/dist/components/data-display/StackIcon/StackIcon.d.ts

@@ -0,0 +1,2 @@
+import { StackIconProps } from './types/StackIconProps';
+export declare const StackIcon: ({ icon, stackedIcon, className, render, ref, ...props }: StackIconProps) => import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;

package/dist/components/data-display/StackIcon/types/StackIconProps.d.ts

@@ -0,0 +1,6 @@
+import { useRender } from '@base-ui/react/use-render';
+import { ReactNode } from 'react';
+export type StackIconProps = Omit<useRender.ComponentProps<'div'>, 'children'> & {
+    icon: ReactNode;
+    stackedIcon: ReactNode;
+};

package/dist/components/data-display/TintedIconTile/TintedIconTile.d.ts

@@ -1,2 +1,2 @@
 import { TintedIconTileProps } from './types/TintedIconTileProps';
-export declare const TintedIconTile: ({ Icon, color, size: sizeFromProps, stroke: strokeFromProps, }: TintedIconTileProps) => import("react").JSX.Element;
+export declare const TintedIconTile: ({ icon, color, className, style, render, ref, ...props }: TintedIconTileProps) => import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;

package/dist/components/data-display/TintedIconTile/types/TintedIconTileProps.d.ts

@@ -1,7 +1,6 @@
-import { IconComponent } from '../../../../icon/types/IconComponent';
-export type TintedIconTileProps = {
-    Icon: IconComponent;
+import { useRender } from '@base-ui/react/use-render';
+import { ReactNode } from 'react';
+export type TintedIconTileProps = Omit<useRender.ComponentProps<'div'>, 'children' | 'color'> & {
+    icon: ReactNode;
     color?: string | null;
-    size?: number;
-    stroke?: number;
 };

package/dist/components/data-display/index.d.ts

@@ -0,0 +1,18 @@
+export { AvatarGroup } from './AvatarGroup/AvatarGroup';
+export type { AvatarGroupProps } from './AvatarGroup/types/AvatarGroupProps';
+export { CommandBlock } from './CommandBlock/CommandBlock';
+export type { CommandBlockProps } from './CommandBlock/types/CommandBlockProps';
+export { JsonTree } from './JsonTree/JsonTree';
+export type { GetJsonNodeHighlighting } from './JsonTree/types/GetJsonNodeHighlighting';
+export type { JsonNodeHighlighting } from './JsonTree/types/JsonNodeHighlighting';
+export type { JsonTreeEntry } from './JsonTree/types/JsonTreeEntry';
+export type { JsonTreeProps } from './JsonTree/types/JsonTreeProps';
+export type { ShouldExpandNodeInitiallyProps } from './JsonTree/types/ShouldExpandNodeInitiallyProps';
+export { MetricRow } from './MetricRow/MetricRow';
+export type { MetricRowProps } from './MetricRow/types/MetricRowProps';
+export { StackIcon } from './StackIcon/StackIcon';
+export type { StackIconProps } from './StackIcon/types/StackIconProps';
+export { TintedIconTile } from './TintedIconTile/TintedIconTile';
+export type { TintedIconTileProps } from './TintedIconTile/types/TintedIconTileProps';
+export type { IconTileColorShades } from './TintedIconTile/utils/getIconTileColorShades';
+export { getIconTileColorShades } from './TintedIconTile/utils/getIconTileColorShades';

package/dist/components/data-display.cjs

@@ -0,0 +1 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../data-display-DjhAHvj1.cjs"),o=require("../TintedIconTile-CU2hCerq.cjs");exports.AvatarGroup=e.AvatarGroup;exports.CommandBlock=e.CommandBlock;exports.JsonTree=e.JsonTree;exports.MetricRow=e.MetricRow;exports.StackIcon=e.StackIcon;exports.TintedIconTile=o.TintedIconTile;exports.getIconTileColorShades=o.getIconTileColorShades;

package/dist/components/data-display.mjs

@@ -0,0 +1,11 @@
+import { a, i as r, n as t, r as e, t as s } from "../data-display-DU3G8ZyI.js";
+import { n as i, t as c } from "../TintedIconTile-4BGa8g8n.js";
+export {
+  a as AvatarGroup,
+  r as CommandBlock,
+  e as JsonTree,
+  t as MetricRow,
+  s as StackIcon,
+  c as TintedIconTile,
+  i as getIconTileColorShades
+};

package/dist/components/feedback/Callout/Callout.d.ts

@@ -1,2 +1,3 @@
-import { CalloutProps } from './types/CalloutProps';
-export declare const Callout: ({ variant, title, description, fullWidth, Icon, action, isClosable, closeLabel, onClose, }: CalloutProps) => import("react").JSX.Element | null;
+export declare const Callout: (({ status, variant, color, title, description, fullWidth, icon, action, closeLabel, onDismiss, className, render, ref, ...props }: import('..').CalloutProps) => import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>) & {
+    Action: ({ className, ...props }: import('..').CalloutActionProps) => import("react").JSX.Element;
+};

package/dist/components/feedback/Callout/internal/CalloutAction.d.ts

@@ -0,0 +1,2 @@
+import { CalloutActionProps } from '../types/CalloutActionProps';
+export declare const CalloutAction: ({ className, ...props }: CalloutActionProps) => import("react").JSX.Element;

package/dist/components/feedback/Callout/internal/CalloutComponent.d.ts

@@ -0,0 +1,2 @@
+import { CalloutProps } from '../types/CalloutProps';
+export declare const CalloutComponent: ({ status, variant, color, title, description, fullWidth, icon, action, closeLabel, onDismiss, className, render, ref, ...props }: CalloutProps) => import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;

package/dist/components/feedback/Callout/types/CalloutActionProps.d.ts

@@ -0,0 +1,2 @@
+import { ButtonProps } from '../../../../primitives/input/Button/types/ButtonProps';
+export type CalloutActionProps = Omit<ButtonProps, 'size' | 'variant'>;

package/dist/components/feedback/Callout/types/CalloutColor.d.ts

@@ -0,0 +1,2 @@
+import { BannerColor } from '../../../../primitives/feedback/Banner/types/BannerColor';
+export type CalloutColor = BannerColor;

package/dist/components/feedback/Callout/types/CalloutProps.d.ts

@@ -1,16 +1,18 @@
-import { IconComponent } from '../../../../icon/types/IconComponent';
+import { useRender } from '@base-ui/react/use-render';
+import { ReactNode } from 'react';
+import { CalloutColor } from './CalloutColor';
+import { CalloutState } from './CalloutState';
+import { CalloutStatus } from './CalloutStatus';
 import { CalloutVariant } from './CalloutVariant';
-export type CalloutProps = {
-    variant: CalloutVariant;
-    title: string;
-    description?: string;
+export type CalloutProps = Omit<useRender.ComponentProps<'div', CalloutState>, 'title' | 'color' | 'children'> & {
+    status?: CalloutStatus;
+    variant?: CalloutVariant;
+    color?: CalloutColor;
+    title: ReactNode;
+    description?: ReactNode;
     fullWidth?: boolean;
-    Icon?: IconComponent;
-    action?: {
-        label: string;
-        onClick: () => void;
-    };
-    isClosable?: boolean;
+    icon?: ReactNode;
+    action?: ReactNode;
     closeLabel?: string;
-    onClose?: () => void;
+    onDismiss?: () => void;
 };

package/dist/components/feedback/Callout/types/CalloutState.d.ts

@@ -0,0 +1,8 @@
+import { CalloutColor } from './CalloutColor';
+import { CalloutStatus } from './CalloutStatus';
+import { CalloutVariant } from './CalloutVariant';
+export type CalloutState = {
+    status: CalloutStatus;
+    variant: CalloutVariant;
+    color: CalloutColor;
+};

package/dist/components/feedback/Callout/types/CalloutStatus.d.ts

@@ -0,0 +1,2 @@
+import { BannerStatus } from '../../../../primitives/feedback/Banner/types/BannerStatus';
+export type CalloutStatus = BannerStatus;

package/dist/components/feedback/Callout/types/CalloutVariant.d.ts

@@ -1 +1 @@
-export type CalloutVariant = 'info' | 'warning' | 'error' | 'neutral' | 'success';
+export type CalloutVariant = 'soft';

package/dist/components/feedback/InlineBanner/InlineBanner.d.ts

@@ -1,2 +1,3 @@
-import { InlineBannerProps } from './types/InlineBannerProps';
-export declare const InlineBanner: ({ color, message, variant, embedded, button, LeftIcon, className, }: InlineBannerProps) => import("react").JSX.Element;
+export declare const InlineBanner: (({ children, layout, variant, embedded, icon, className, ...props }: import('..').InlineBannerProps) => import("react").JSX.Element) & {
+    Action: ({ className, ...props }: import('../../..').BannerActionProps) => import("react").JSX.Element;
+};

package/dist/components/feedback/InlineBanner/internal/InlineBannerComponent.d.ts

@@ -0,0 +1,2 @@
+import { InlineBannerProps } from '../types/InlineBannerProps';
+export declare const InlineBannerComponent: ({ children, layout, variant, embedded, icon, className, ...props }: InlineBannerProps) => import("react").JSX.Element;

package/dist/components/feedback/InlineBanner/types/InlineBannerLayout.d.ts

@@ -0,0 +1 @@
+export type InlineBannerLayout = 'standard' | 'compact';

package/dist/components/feedback/InlineBanner/types/InlineBannerProps.d.ts

@@ -1,12 +1,6 @@
-import { IconComponent } from '../../../../icon/types/IconComponent';
-import { BannerColor } from '../../../../primitives/feedback/Banner/Banner';
-import { InlineBannerButtonProps } from './InlineBannerButtonProps';
-export type InlineBannerProps = {
-    color?: BannerColor;
-    message: string;
-    variant?: 'standard' | 'compact';
+import { BannerProps } from '../../../../primitives/feedback/Banner/types/BannerProps';
+import { InlineBannerLayout } from './InlineBannerLayout';
+export type InlineBannerProps = BannerProps & {
+    layout?: InlineBannerLayout;
     embedded?: boolean;
-    button?: InlineBannerButtonProps;
-    LeftIcon?: IconComponent;
-    className?: string;
 };

package/dist/components/feedback/Toast/Toast.d.ts

@@ -1,2 +1,2 @@
 import { ToastProps } from './types/ToastProps';
-export declare const Toast: ({ children, description, icon, iconLabel, action, progress, duration, onCancel, onClose, cancelLabel, closeLabel, variant, role, className, onMouseEnter, onMouseLeave, onFocus, onBlur, render, ref, ...props }: ToastProps) => import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare const Toast: ({ children, description, icon, iconLabel, action, progress, duration, onCancel, onClose, cancelLabel, closeLabel, status, role, className, onMouseEnter, onMouseLeave, onFocus, onBlur, render, ref, ...props }: ToastProps) => import("react").JSX.Element;

package/dist/components/feedback/Toast/hooks/useToast.d.ts

@@ -1,7 +1,8 @@
 export declare const useToast: () => {
     enqueueToast: {
-        (options: import('../types/ToastOptions').ToastOptions): string;
-        (options: import('../types/ToastOptions').ToastOptions | undefined): string | undefined;
+        (options: import('../..').ToastOptions): string;
+        (options: import('../..').ToastOptions | undefined): string | undefined;
     };
     closeToast: (id?: string) => void;
+    updateToast: (changes: import('../..').ToastUpdate) => void;
 };

package/dist/components/feedback/Toast/internal/components/ToastCountdownEffect.d.ts

@@ -0,0 +1,9 @@
+import { ToastProps } from '../../types/ToastProps';
+import { createToastCountdown } from '../utils/createToastCountdown';
+type ToastCountdownEffectProps = Pick<ToastProps, 'progress' | 'onClose'> & {
+    clock: ReturnType<typeof createToastCountdown>;
+    duration: number;
+    isPaused: boolean;
+};
+export declare const ToastCountdownEffect: ({ clock, duration, progress, isPaused, onClose, }: ToastCountdownEffectProps) => null;
+export {};

package/dist/components/feedback/Toast/internal/components/ToastFocusEffect.d.ts

@@ -0,0 +1,7 @@
+type ToastFocusEffectProps = {
+    element: HTMLDivElement | null;
+    isFocused: boolean;
+    onFocusChange: (isFocused: boolean) => void;
+};
+export declare const ToastFocusEffect: ({ element, isFocused, onFocusChange, }: ToastFocusEffectProps) => null;
+export {};

package/dist/components/feedback/Toast/internal/components/ToastProgress.d.ts

@@ -1,9 +1,10 @@
 type ToastProgressProps = {
     progress?: number;
     duration: number;
+    remainingDuration: number;
+    revision: number;
     isPaused: boolean;
     barColor: string;
-    onClose?: () => void;
 };
-export declare const ToastProgress: ({ progress, duration, isPaused, barColor, onClose, }: ToastProgressProps) => import("react").JSX.Element;
+export declare const ToastProgress: ({ progress, duration, remainingDuration, revision, isPaused, barColor, }: ToastProgressProps) => import("react").JSX.Element | null;
 export {};

package/dist/components/feedback/Toast/internal/contexts/ToastTimingContext.d.ts

@@ -0,0 +1,4 @@
+export declare const ToastTimingContext: import('react').Context<{
+    durationRevision: number;
+    isActive: boolean;
+}>;

package/dist/components/feedback/Toast/internal/hooks/useToastCountdown.d.ts

@@ -0,0 +1,23 @@
+export declare const useToastCountdown: ({ duration, isPaused, }: {
+    duration: number;
+    isPaused: boolean;
+}) => {
+    countdown: {
+        duration: number;
+        remainingDuration: number;
+        revision: number;
+        isPaused: boolean;
+    };
+    clock: {
+        update: (nextConfiguration: {
+            duration: number;
+            durationRevision: number;
+            isPaused: boolean;
+            isProgress: boolean;
+            isActive: boolean;
+            onClose?: () => void;
+        }) => void;
+        close: () => void;
+        stop: () => void;
+    };
+};

package/dist/components/feedback/Toast/internal/hooks/useUpdateToast.d.ts

@@ -0,0 +1,4 @@
+import { ToastUpdate } from '../../types/ToastUpdate';
+export declare const useUpdateToast: () => {
+    updateToast: (changes: ToastUpdate) => void;
+};

package/dist/components/feedback/Toast/internal/types/ToastEntry.d.ts

@@ -2,5 +2,6 @@ import { ToastNotification } from '../../types/ToastNotification';
 export type ToastEntry = {
     notification: ToastNotification;
     dedupeKey?: string;
+    durationRevision?: number;
     status: 'visible' | 'closing';
 };

package/dist/components/feedback/Toast/internal/utils/createToastCountdown.d.ts

@@ -0,0 +1,22 @@
+type CountdownConfiguration = {
+    duration: number;
+    durationRevision: number;
+    isPaused: boolean;
+    isProgress: boolean;
+    isActive: boolean;
+    onClose?: () => void;
+};
+type CountdownSnapshot = {
+    duration: number;
+    remainingDuration: number;
+    revision: number;
+    isPaused: boolean;
+};
+export declare const createToastCountdown: ({ onChange, }: {
+    onChange: (snapshot: CountdownSnapshot) => void;
+}) => {
+    update: (nextConfiguration: CountdownConfiguration) => void;
+    close: () => void;
+    stop: () => void;
+};
+export {};

package/dist/components/feedback/Toast/internal/utils/isCountdownDuration.d.ts

@@ -0,0 +1 @@
+export declare const isCountdownDuration: (duration: number) => boolean;

package/dist/components/feedback/Toast/internal/utils/updateToastInStore.d.ts

@@ -0,0 +1,5 @@
+import { ToastUpdate } from '../../types/ToastUpdate';
+import { createToastStore } from '../stores/createToastStore';
+export declare const updateToastInStore: ({ store, id, ...changes }: ToastUpdate & {
+    store: ReturnType<typeof createToastStore>;
+}) => void;