@lobehub/ui 5.41.0 → 5.42.0

package/es/base-ui/DropdownMenu/sharedStyle.mjs

@@ -185,6 +185,15 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     &[data-has-footer] {
       padding-block-end: 0;
     }
+
+    /* Base UI moves data-highlighted with the arrow keys, but :hover keeps painting
+       whatever the resting cursor sits on, so two items light up at once. */
+    &:has([data-highlighted]) {
+      [role^='menuitem']:hover:not([data-highlighted]),
+      [role='option']:hover:not([data-highlighted]) {
+        background: transparent !important;
+      }
+    }
   `,
 	popupWithSlots: css`
     overflow: hidden;

package/es/base-ui/DropdownMenu/sharedStyle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"sharedStyle.mjs","names":[],"sources":["../../../src/base-ui/DropdownMenu/sharedStyle.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  danger: css`\n    --lobe-menu-icon-color: ${cssVar.colorError};\n\n    color: ${cssVar.colorError} !important;\n\n    &:hover {\n      background: ${cssVar.colorErrorBg} !important;\n    }\n  `,\n\n  empty: css`\n    cursor: default;\n    font-style: italic;\n    color: ${cssVar.colorTextTertiary};\n  `,\n\n  extra: css`\n    margin-inline-start: auto;\n    padding-inline-start: 16px;\n\n    font-family: ${cssVar.fontFamilyCode};\n    font-size: 12px;\n    color: ${cssVar.colorTextTertiary};\n  `,\n\n  footer: css`\n    flex-shrink: 0;\n    padding-block: 8px;\n    padding-inline: 12px;\n    border-block-start: 1px solid ${cssVar.colorBorder};\n  `,\n\n  header: css`\n    flex-shrink: 0;\n    padding-block: 8px;\n    padding-inline: 12px;\n    border-block-end: 1px solid ${cssVar.colorBorder};\n  `,\n\n  groupLabel: css`\n    user-select: none;\n\n    padding-block: 8px 4px;\n    padding-inline: 12px;\n\n    font-size: 10px;\n    font-weight: 600;\n    line-height: 14px;\n    color: ${cssVar.colorTextTertiary};\n    text-transform: uppercase;\n    letter-spacing: 0.6px;\n\n    [role='group']:first-child > & {\n      padding-block-start: 4px;\n    }\n  `,\n\n  icon: css`\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n\n    width: 14px;\n    height: 14px;\n    margin-inline-end: 12px;\n\n    color: var(--lobe-menu-icon-color, ${cssVar.colorTextSecondary});\n\n    & svg {\n      width: 100%;\n      height: 100%;\n    }\n  `,\n\n  item: css`\n    user-select: none;\n\n    position: relative;\n\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n\n    width: 100%;\n    min-height: 32px;\n    padding-block: 6px;\n    padding-inline: 12px;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    font-size: 14px;\n    line-height: 20px;\n    color: ${cssVar.colorText};\n\n    outline: none;\n\n    transition: all 150ms ${cssVar.motionEaseOut};\n\n    &:hover {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &:active {\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: ${cssVar.colorTextDisabled};\n      opacity: 0.5;\n\n      &:hover {\n        background: transparent;\n      }\n    }\n\n    &[data-highlighted]:not([data-disabled]) {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &[data-state='open']:not([data-disabled]),\n    &[data-open]:not([data-disabled]),\n    &[aria-expanded='true']:not([data-disabled]) {\n      background: ${cssVar.colorFillTertiary};\n    }\n  `,\n\n  itemContent: css`\n    display: flex;\n    flex: 1;\n    gap: 0;\n    align-items: center;\n  `,\n\n  itemContentAlignStart: css`\n    align-items: flex-start;\n  `,\n\n  iconAlignStart: css`\n    align-self: flex-start;\n    margin-block-start: 2px;\n  `,\n\n  label: css`\n    overflow: hidden;\n    flex: 1;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n\n    & a,\n    & a:visited,\n    & a:hover,\n    & a:active {\n      color: inherit;\n    }\n  `,\n\n  labelGroup: css`\n    overflow: hidden;\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n\n    min-width: 0;\n  `,\n\n  desc: css`\n    overflow: hidden;\n\n    font-size: 12px;\n    line-height: 16px;\n    color: ${cssVar.colorTextTertiary};\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n\n  popup: css`\n    overflow-y: auto;\n\n    min-width: 220px;\n    max-height: var(--available-height);\n    padding: 4px;\n    border-radius: ${cssVar.borderRadius};\n\n    background: ${cssVar.colorBgElevated};\n    outline: none;\n    box-shadow:\n      0 0 0 1px ${cssVar.colorBorder},\n      0 4px 12px 0 rgb(0 0 0 / 8%),\n      0 1px 3px 0 rgb(0 0 0 / 6%);\n\n    &[data-has-header] {\n      padding-block-start: 0;\n    }\n\n    &[data-has-footer] {\n      padding-block-end: 0;\n    }\n  `,\n\n  popupWithSlots: css`\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n    max-height: var(--available-height);\n  `,\n\n  slotViewport: css`\n    overflow-y: auto;\n    flex: 1;\n    min-height: 0;\n  `,\n\n  positioner: css`\n    --lobe-dropdown-animation-duration: 140ms;\n    --lobe-dropdown-animation-scale-y: 0.92;\n    --lobe-dropdown-animation-ease-in: ease-in;\n    --lobe-dropdown-animation-ease-out: ${cssVar.motionEaseOut};\n\n    z-index: 1100;\n\n    & > * {\n      will-change: opacity, transform;\n      transform-origin: var(--transform-origin);\n      animation: none;\n    }\n\n    &[data-open] > * {\n      transform: scaleY(1);\n      opacity: 1;\n      transition:\n        opacity var(--lobe-dropdown-animation-duration) var(--lobe-dropdown-animation-ease-out),\n        transform var(--lobe-dropdown-animation-duration) var(--lobe-dropdown-animation-ease-out);\n    }\n\n    &[data-open] > *[data-starting-style] {\n      transform: scaleY(var(--lobe-dropdown-animation-scale-y));\n      opacity: 0;\n    }\n\n    &[data-closed] > * {\n      transform: scaleY(var(--lobe-dropdown-animation-scale-y));\n      opacity: 0;\n      transition:\n        opacity var(--lobe-dropdown-animation-duration) var(--lobe-dropdown-animation-ease-in),\n        transform var(--lobe-dropdown-animation-duration) var(--lobe-dropdown-animation-ease-in);\n    }\n\n    &[data-hover-trigger] {\n      --lobe-dropdown-animation-duration: 140ms;\n    }\n\n    &[data-submenu],\n    &[data-nested] {\n      --lobe-dropdown-animation-duration: 0ms;\n      --lobe-dropdown-animation-scale-y: 1;\n\n      z-index: 1199;\n    }\n\n    &[data-side='left'],\n    &[data-side='right'] {\n      --lobe-dropdown-animation-duration: 0ms;\n      --lobe-dropdown-animation-scale-y: 1;\n    }\n  `,\n\n  separator: css`\n    height: 1px;\n    margin-block: 4px;\n    margin-inline: 0;\n    background: ${cssVar.colorBorder};\n  `,\n\n  submenuArrow: css`\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n\n    width: 16px;\n    height: 16px;\n    margin-inline-start: 8px;\n\n    color: var(--lobe-menu-icon-color, ${cssVar.colorTextSecondary});\n\n    & svg {\n      width: 12px;\n      height: 12px;\n    }\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,QAAQ,GAAG;8BACiB,OAAO,WAAW;;aAEnC,OAAO,WAAW;;;oBAGX,OAAO,aAAa;;;CAItC,OAAO,GAAG;;;aAGC,OAAO,kBAAkB;;CAGpC,OAAO,GAAG;;;;mBAIO,OAAO,eAAe;;aAE5B,OAAO,kBAAkB;;CAGpC,QAAQ,GAAG;;;;oCAIuB,OAAO,YAAY;;CAGrD,QAAQ,GAAG;;;;kCAIqB,OAAO,YAAY;;CAGnD,YAAY,GAAG;;;;;;;;;aASJ,OAAO,kBAAkB;;;;;;;;CASpC,MAAM,GAAG;;;;;;;;;;yCAU8B,OAAO,mBAAmB;;;;;;;CAQjE,MAAM,GAAG;;;;;;;;;;;;;qBAaU,OAAO,eAAe;;;;aAI9B,OAAO,UAAU;;;;4BAIF,OAAO,cAAc;;;oBAG7B,OAAO,kBAAkB;;;;oBAIzB,OAAO,mBAAmB;;;;;eAK/B,OAAO,kBAAkB;;;;;;;;;oBASpB,OAAO,kBAAkB;;;;;;oBAMzB,OAAO,kBAAkB;;;CAI3C,aAAa,GAAG;;;;;;CAOhB,uBAAuB,GAAG;;;CAI1B,gBAAgB,GAAG;;;;CAKnB,OAAO,GAAG;;;;;;;;;;;;;CAcV,YAAY,GAAG;;;;;;;;CASf,MAAM,GAAG;;;;;aAKE,OAAO,kBAAkB;;;;CAKpC,OAAO,GAAG;;;;;;qBAMS,OAAO,aAAa;;kBAEvB,OAAO,gBAAgB;;;kBAGvB,OAAO,YAAY;;;;;;;;;;;;CAanC,gBAAgB,GAAG;;;;;;CAOnB,cAAc,GAAG;;;;;CAMjB,YAAY,GAAG;;;;0CAIyB,OAAO,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkD7D,WAAW,GAAG;;;;kBAIE,OAAO,YAAY;;CAGnC,cAAc,GAAG;;;;;;;;;;yCAUsB,OAAO,mBAAmB;;;;;;;AAOnE,EAAE"}
+{"version":3,"file":"sharedStyle.mjs","names":[],"sources":["../../../src/base-ui/DropdownMenu/sharedStyle.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  danger: css`\n    --lobe-menu-icon-color: ${cssVar.colorError};\n\n    color: ${cssVar.colorError} !important;\n\n    &:hover {\n      background: ${cssVar.colorErrorBg} !important;\n    }\n  `,\n\n  empty: css`\n    cursor: default;\n    font-style: italic;\n    color: ${cssVar.colorTextTertiary};\n  `,\n\n  extra: css`\n    margin-inline-start: auto;\n    padding-inline-start: 16px;\n\n    font-family: ${cssVar.fontFamilyCode};\n    font-size: 12px;\n    color: ${cssVar.colorTextTertiary};\n  `,\n\n  footer: css`\n    flex-shrink: 0;\n    padding-block: 8px;\n    padding-inline: 12px;\n    border-block-start: 1px solid ${cssVar.colorBorder};\n  `,\n\n  header: css`\n    flex-shrink: 0;\n    padding-block: 8px;\n    padding-inline: 12px;\n    border-block-end: 1px solid ${cssVar.colorBorder};\n  `,\n\n  groupLabel: css`\n    user-select: none;\n\n    padding-block: 8px 4px;\n    padding-inline: 12px;\n\n    font-size: 10px;\n    font-weight: 600;\n    line-height: 14px;\n    color: ${cssVar.colorTextTertiary};\n    text-transform: uppercase;\n    letter-spacing: 0.6px;\n\n    [role='group']:first-child > & {\n      padding-block-start: 4px;\n    }\n  `,\n\n  icon: css`\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n\n    width: 14px;\n    height: 14px;\n    margin-inline-end: 12px;\n\n    color: var(--lobe-menu-icon-color, ${cssVar.colorTextSecondary});\n\n    & svg {\n      width: 100%;\n      height: 100%;\n    }\n  `,\n\n  item: css`\n    user-select: none;\n\n    position: relative;\n\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n\n    width: 100%;\n    min-height: 32px;\n    padding-block: 6px;\n    padding-inline: 12px;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    font-size: 14px;\n    line-height: 20px;\n    color: ${cssVar.colorText};\n\n    outline: none;\n\n    transition: all 150ms ${cssVar.motionEaseOut};\n\n    &:hover {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &:active {\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: ${cssVar.colorTextDisabled};\n      opacity: 0.5;\n\n      &:hover {\n        background: transparent;\n      }\n    }\n\n    &[data-highlighted]:not([data-disabled]) {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &[data-state='open']:not([data-disabled]),\n    &[data-open]:not([data-disabled]),\n    &[aria-expanded='true']:not([data-disabled]) {\n      background: ${cssVar.colorFillTertiary};\n    }\n  `,\n\n  itemContent: css`\n    display: flex;\n    flex: 1;\n    gap: 0;\n    align-items: center;\n  `,\n\n  itemContentAlignStart: css`\n    align-items: flex-start;\n  `,\n\n  iconAlignStart: css`\n    align-self: flex-start;\n    margin-block-start: 2px;\n  `,\n\n  label: css`\n    overflow: hidden;\n    flex: 1;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n\n    & a,\n    & a:visited,\n    & a:hover,\n    & a:active {\n      color: inherit;\n    }\n  `,\n\n  labelGroup: css`\n    overflow: hidden;\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n\n    min-width: 0;\n  `,\n\n  desc: css`\n    overflow: hidden;\n\n    font-size: 12px;\n    line-height: 16px;\n    color: ${cssVar.colorTextTertiary};\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n\n  popup: css`\n    overflow-y: auto;\n\n    min-width: 220px;\n    max-height: var(--available-height);\n    padding: 4px;\n    border-radius: ${cssVar.borderRadius};\n\n    background: ${cssVar.colorBgElevated};\n    outline: none;\n    box-shadow:\n      0 0 0 1px ${cssVar.colorBorder},\n      0 4px 12px 0 rgb(0 0 0 / 8%),\n      0 1px 3px 0 rgb(0 0 0 / 6%);\n\n    &[data-has-header] {\n      padding-block-start: 0;\n    }\n\n    &[data-has-footer] {\n      padding-block-end: 0;\n    }\n\n    /* Base UI moves data-highlighted with the arrow keys, but :hover keeps painting\n       whatever the resting cursor sits on, so two items light up at once. */\n    &:has([data-highlighted]) {\n      [role^='menuitem']:hover:not([data-highlighted]),\n      [role='option']:hover:not([data-highlighted]) {\n        background: transparent !important;\n      }\n    }\n  `,\n\n  popupWithSlots: css`\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n    max-height: var(--available-height);\n  `,\n\n  slotViewport: css`\n    overflow-y: auto;\n    flex: 1;\n    min-height: 0;\n  `,\n\n  positioner: css`\n    --lobe-dropdown-animation-duration: 140ms;\n    --lobe-dropdown-animation-scale-y: 0.92;\n    --lobe-dropdown-animation-ease-in: ease-in;\n    --lobe-dropdown-animation-ease-out: ${cssVar.motionEaseOut};\n\n    z-index: 1100;\n\n    & > * {\n      will-change: opacity, transform;\n      transform-origin: var(--transform-origin);\n      animation: none;\n    }\n\n    &[data-open] > * {\n      transform: scaleY(1);\n      opacity: 1;\n      transition:\n        opacity var(--lobe-dropdown-animation-duration) var(--lobe-dropdown-animation-ease-out),\n        transform var(--lobe-dropdown-animation-duration) var(--lobe-dropdown-animation-ease-out);\n    }\n\n    &[data-open] > *[data-starting-style] {\n      transform: scaleY(var(--lobe-dropdown-animation-scale-y));\n      opacity: 0;\n    }\n\n    &[data-closed] > * {\n      transform: scaleY(var(--lobe-dropdown-animation-scale-y));\n      opacity: 0;\n      transition:\n        opacity var(--lobe-dropdown-animation-duration) var(--lobe-dropdown-animation-ease-in),\n        transform var(--lobe-dropdown-animation-duration) var(--lobe-dropdown-animation-ease-in);\n    }\n\n    &[data-hover-trigger] {\n      --lobe-dropdown-animation-duration: 140ms;\n    }\n\n    &[data-submenu],\n    &[data-nested] {\n      --lobe-dropdown-animation-duration: 0ms;\n      --lobe-dropdown-animation-scale-y: 1;\n\n      z-index: 1199;\n    }\n\n    &[data-side='left'],\n    &[data-side='right'] {\n      --lobe-dropdown-animation-duration: 0ms;\n      --lobe-dropdown-animation-scale-y: 1;\n    }\n  `,\n\n  separator: css`\n    height: 1px;\n    margin-block: 4px;\n    margin-inline: 0;\n    background: ${cssVar.colorBorder};\n  `,\n\n  submenuArrow: css`\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n\n    width: 16px;\n    height: 16px;\n    margin-inline-start: 8px;\n\n    color: var(--lobe-menu-icon-color, ${cssVar.colorTextSecondary});\n\n    & svg {\n      width: 12px;\n      height: 12px;\n    }\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,QAAQ,GAAG;8BACiB,OAAO,WAAW;;aAEnC,OAAO,WAAW;;;oBAGX,OAAO,aAAa;;;CAItC,OAAO,GAAG;;;aAGC,OAAO,kBAAkB;;CAGpC,OAAO,GAAG;;;;mBAIO,OAAO,eAAe;;aAE5B,OAAO,kBAAkB;;CAGpC,QAAQ,GAAG;;;;oCAIuB,OAAO,YAAY;;CAGrD,QAAQ,GAAG;;;;kCAIqB,OAAO,YAAY;;CAGnD,YAAY,GAAG;;;;;;;;;aASJ,OAAO,kBAAkB;;;;;;;;CASpC,MAAM,GAAG;;;;;;;;;;yCAU8B,OAAO,mBAAmB;;;;;;;CAQjE,MAAM,GAAG;;;;;;;;;;;;;qBAaU,OAAO,eAAe;;;;aAI9B,OAAO,UAAU;;;;4BAIF,OAAO,cAAc;;;oBAG7B,OAAO,kBAAkB;;;;oBAIzB,OAAO,mBAAmB;;;;;eAK/B,OAAO,kBAAkB;;;;;;;;;oBASpB,OAAO,kBAAkB;;;;;;oBAMzB,OAAO,kBAAkB;;;CAI3C,aAAa,GAAG;;;;;;CAOhB,uBAAuB,GAAG;;;CAI1B,gBAAgB,GAAG;;;;CAKnB,OAAO,GAAG;;;;;;;;;;;;;CAcV,YAAY,GAAG;;;;;;;;CASf,MAAM,GAAG;;;;;aAKE,OAAO,kBAAkB;;;;CAKpC,OAAO,GAAG;;;;;;qBAMS,OAAO,aAAa;;kBAEvB,OAAO,gBAAgB;;;kBAGvB,OAAO,YAAY;;;;;;;;;;;;;;;;;;;;;CAsBnC,gBAAgB,GAAG;;;;;;CAOnB,cAAc,GAAG;;;;;CAMjB,YAAY,GAAG;;;;0CAIyB,OAAO,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkD7D,WAAW,GAAG;;;;kBAIE,OAAO,YAAY;;CAGnC,cAAc,GAAG;;;;;;;;;;yCAUsB,OAAO,mBAAmB;;;;;;;AAOnE,EAAE"}

package/es/base-ui/FloatingPanel/FloatingPanel.mjs

@@ -1,6 +1,7 @@
 "use client";
 import { ModalBackdrop, ModalClose, ModalContent, ModalFooter, ModalHeader, ModalPopup, ModalPortal, ModalRoot, ModalTitle } from "../Modal/atoms.mjs";
 import { styles } from "./style.mjs";
+import { ToastDodge } from "./ToastDodge.mjs";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "antd-style";
@@ -94,13 +95,16 @@ const getPlacementStyle = (placement, offset) => {
 	const { x, y } = resolveOffset(offset);
 	const isTop = placement.startsWith("top");
 	const isLeft = placement.endsWith("Left");
+	const px = (value) => typeof value === "number" ? `${value}px` : value;
+	const blockInset = `calc(${px(y)} + var(--floating-panel-reserve-block-end, 0px))`;
+	const inlineInset = `calc(${px(x)} + var(--floating-panel-reserve-inline-end, 0px))`;
 	return {
 		alignItems: isTop ? "flex-start" : "flex-end",
 		justifyContent: isLeft ? "flex-start" : "flex-end",
-		paddingBlockEnd: isTop ? void 0 : y,
-		paddingBlockStart: isTop ? y : void 0,
-		paddingInlineEnd: isLeft ? void 0 : x,
-		paddingInlineStart: isLeft ? x : void 0
+		paddingBlockEnd: isTop ? void 0 : blockInset,
+		paddingBlockStart: isTop ? blockInset : void 0,
+		paddingInlineEnd: isLeft ? void 0 : inlineInset,
+		paddingInlineStart: isLeft ? inlineInset : void 0
 	};
 };
 const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
@@ -276,6 +280,7 @@ const FloatingPanel = memo(({ afterClose, ariaLabel, children, className, classN
 					...semanticStyles?.panel
 				},
 				children: [
+					placement === "bottomRight" && /* @__PURE__ */ jsx(ToastDodge, {}),
 					resizable && resizeHandles.map((handle) => /* @__PURE__ */ jsx("div", {
 						"aria-hidden": true,
 						"data-floating-panel-resize-handle": handle,

package/es/base-ui/FloatingPanel/FloatingPanel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingPanel.mjs","names":[],"sources":["../../../src/base-ui/FloatingPanel/FloatingPanel.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { X } from 'lucide-react';\nimport type { MotionProps } from 'motion/react';\nimport type { CSSProperties, PointerEvent as ReactPointerEvent } from 'react';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport type { ModalRootProps } from '../Modal';\nimport {\n  ModalBackdrop,\n  ModalClose,\n  ModalContent,\n  ModalFooter,\n  ModalHeader,\n  ModalPopup,\n  ModalPortal,\n  ModalRoot,\n  ModalTitle,\n} from '../Modal';\nimport { styles } from './style';\nimport type {\n  FloatingPanelOffset,\n  FloatingPanelPlacement,\n  FloatingPanelProps,\n  FloatingPanelResizeHandle,\n  FloatingPanelSize,\n} from './type';\n\nconst DEFAULT_MIN_HEIGHT = 180;\nconst DEFAULT_MIN_WIDTH = 320;\n\ninterface InternalFloatingPanelSize extends FloatingPanelSize {\n  sourceHeight?: number | string;\n  sourceWidth?: number | string;\n}\n\nconst defaultMotionProps: MotionProps = {\n  animate: { opacity: 1, scale: 1, x: 0, y: 0 },\n  exit: {\n    opacity: 0,\n    scale: 0.98,\n    transition: { duration: 0.14, ease: [0.4, 0, 1, 1] },\n    y: 12,\n  },\n  initial: { opacity: 0, scale: 0.98, y: 12 },\n  transition: { duration: 0.2, ease: [0.32, 0.72, 0, 1] },\n};\n\nconst topMotionProps: MotionProps = {\n  animate: { opacity: 1, scale: 1, x: 0, y: 0 },\n  exit: {\n    opacity: 0,\n    scale: 0.98,\n    transition: { duration: 0.14, ease: [0.4, 0, 1, 1] },\n    y: -12,\n  },\n  initial: { opacity: 0, scale: 0.98, y: -12 },\n  transition: { duration: 0.2, ease: [0.32, 0.72, 0, 1] },\n};\n\nconst resolveOffset = (offset: FloatingPanelOffset) => {\n  if (typeof offset === 'object') {\n    return {\n      x: offset.x ?? 8,\n      y: offset.y ?? 8,\n    };\n  }\n\n  return { x: offset, y: offset };\n};\n\nconst getPlacementStyle = (\n  placement: FloatingPanelPlacement,\n  offset: FloatingPanelOffset,\n): CSSProperties => {\n  const { x, y } = resolveOffset(offset);\n  const isTop = placement.startsWith('top');\n  const isLeft = placement.endsWith('Left');\n\n  return {\n    alignItems: isTop ? 'flex-start' : 'flex-end',\n    justifyContent: isLeft ? 'flex-start' : 'flex-end',\n    paddingBlockEnd: isTop ? undefined : y,\n    paddingBlockStart: isTop ? y : undefined,\n    paddingInlineEnd: isLeft ? undefined : x,\n    paddingInlineStart: isLeft ? x : undefined,\n  };\n};\n\nconst clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);\n\nconst getViewportMaxSize = () => ({\n  height: Math.max(DEFAULT_MIN_HEIGHT, window.innerHeight - 16),\n  width: Math.max(DEFAULT_MIN_WIDTH, window.innerWidth - 16),\n});\n\nconst getResizeHandles = (placement: FloatingPanelPlacement): FloatingPanelResizeHandle[] => {\n  switch (placement) {\n    case 'bottomLeft': {\n      return ['top', 'right', 'topRight'];\n    }\n    case 'topLeft': {\n      return ['bottom', 'right', 'bottomRight'];\n    }\n    case 'topRight': {\n      return ['bottom', 'left', 'bottomLeft'];\n    }\n    default: {\n      return ['top', 'left', 'topLeft'];\n    }\n  }\n};\n\nconst getResizeHandleClassName = (s: typeof styles, handle: FloatingPanelResizeHandle) => {\n  const handleClassMap: Record<FloatingPanelResizeHandle, string> = {\n    bottom: s.resizeHandleBottom,\n    bottomLeft: s.resizeHandleBottomLeft,\n    bottomRight: s.resizeHandleBottomRight,\n    left: s.resizeHandleLeft,\n    right: s.resizeHandleRight,\n    top: s.resizeHandleTop,\n    topLeft: s.resizeHandleTopLeft,\n    topRight: s.resizeHandleTopRight,\n  };\n\n  return handleClassMap[handle];\n};\n\nconst resolveResizeSize = ({\n  handle,\n  maxHeight,\n  maxWidth,\n  minHeight,\n  minWidth,\n  startHeight,\n  startWidth,\n  startX,\n  startY,\n  x,\n  y,\n}: {\n  handle: FloatingPanelResizeHandle;\n  maxHeight: number;\n  maxWidth: number;\n  minHeight: number;\n  minWidth: number;\n  startHeight: number;\n  startWidth: number;\n  startX: number;\n  startY: number;\n  x: number;\n  y: number;\n}): FloatingPanelSize => {\n  const deltaX = x - startX;\n  const deltaY = y - startY;\n  const growsLeft = handle.includes('Left') || handle === 'left';\n  const growsRight = handle.includes('Right') || handle === 'right';\n  const growsTop = handle.includes('top') || handle === 'top';\n  const growsBottom = handle.includes('bottom') || handle === 'bottom';\n\n  const nextWidth = growsLeft ? startWidth - deltaX : growsRight ? startWidth + deltaX : startWidth;\n  const nextHeight = growsTop\n    ? startHeight - deltaY\n    : growsBottom\n      ? startHeight + deltaY\n      : startHeight;\n\n  return {\n    height: clamp(nextHeight, minHeight, maxHeight),\n    width: clamp(nextWidth, minWidth, maxWidth),\n  };\n};\n\nconst FloatingPanel = memo<FloatingPanelProps>(\n  ({\n    afterClose,\n    ariaLabel,\n    children,\n    className,\n    classNames,\n    closable = true,\n    closeIcon,\n    closeLabel = 'Close',\n    defaultOpen,\n    actions,\n    footer,\n    getContainer,\n    height,\n    keyboard = true,\n    mask = false,\n    maskClosable = true,\n    maxHeight,\n    maxWidth,\n    minHeight = DEFAULT_MIN_HEIGHT,\n    minWidth = DEFAULT_MIN_WIDTH,\n    modal = false,\n    motionProps,\n    offset = 8,\n    onClose,\n    onOpenChange,\n    onResize,\n    onResizeEnd,\n    open,\n    placement = 'bottomRight',\n    resizable = true,\n    styles: semanticStyles,\n    title,\n    width = 640,\n    zIndex,\n  }) => {\n    const s = styles;\n    const isTop = placement.startsWith('top');\n    const container = getContainer === false ? undefined : getContainer;\n    const [resizeSize, setResizeSize] = useState<InternalFloatingPanelSize>();\n    const latestResizeSizeRef = useRef<FloatingPanelSize | undefined>(undefined);\n    const resizeCleanupRef = useRef<(() => void) | undefined>(undefined);\n    const activeResizeSize =\n      resizeSize?.sourceWidth === width && resizeSize.sourceHeight === height\n        ? resizeSize\n        : undefined;\n\n    useEffect(\n      () => () => {\n        resizeCleanupRef.current?.();\n      },\n      [],\n    );\n\n    const popupStyle = useMemo(\n      () => ({\n        ...getPlacementStyle(placement, offset),\n        ...semanticStyles?.wrapper,\n      }),\n      [offset, placement, semanticStyles?.wrapper],\n    );\n\n    const handleOpenChange = useCallback<NonNullable<ModalRootProps['onOpenChange']>>(\n      (nextOpen, eventDetails) => {\n        if (!nextOpen) {\n          if (keyboard === false && eventDetails.reason === 'escape-key') return;\n          if (maskClosable === false && eventDetails.reason === 'outside-press') return;\n          onClose?.();\n        }\n\n        onOpenChange?.(nextOpen, eventDetails);\n      },\n      [keyboard, maskClosable, onClose, onOpenChange],\n    );\n\n    const showHeader = title !== undefined || actions !== undefined || closable;\n    const resolvedMotionProps = motionProps ?? (isTop ? topMotionProps : defaultMotionProps);\n    const resizeHandles = useMemo(() => getResizeHandles(placement), [placement]);\n\n    const handleResizeStart = useCallback(\n      (handle: FloatingPanelResizeHandle) => (event: ReactPointerEvent<HTMLDivElement>) => {\n        event.preventDefault();\n        event.stopPropagation();\n\n        const panel = event.currentTarget.parentElement;\n        if (!panel) return;\n\n        const rect = panel.getBoundingClientRect();\n        const viewportMaxSize = getViewportMaxSize();\n        const resolvedMaxWidth = Math.max(minWidth, maxWidth ?? viewportMaxSize.width);\n        const resolvedMaxHeight = Math.max(minHeight, maxHeight ?? viewportMaxSize.height);\n        const startX = event.clientX;\n        const startY = event.clientY;\n\n        const handleResizeMove = (moveEvent: PointerEvent) => {\n          const nextSize = resolveResizeSize({\n            handle,\n            maxHeight: resolvedMaxHeight,\n            maxWidth: resolvedMaxWidth,\n            minHeight,\n            minWidth,\n            startHeight: rect.height,\n            startWidth: rect.width,\n            startX,\n            startY,\n            x: moveEvent.clientX,\n            y: moveEvent.clientY,\n          });\n\n          const nextState = { ...nextSize, sourceHeight: height, sourceWidth: width };\n          latestResizeSizeRef.current = nextSize;\n          setResizeSize(nextState);\n          onResize?.(nextSize);\n        };\n\n        const handleResizeEnd = () => {\n          resizeCleanupRef.current?.();\n          resizeCleanupRef.current = undefined;\n\n          if (latestResizeSizeRef.current) onResizeEnd?.(latestResizeSizeRef.current);\n        };\n\n        resizeCleanupRef.current?.();\n        window.addEventListener('pointermove', handleResizeMove);\n        window.addEventListener('pointerup', handleResizeEnd);\n        resizeCleanupRef.current = () => {\n          window.removeEventListener('pointermove', handleResizeMove);\n          window.removeEventListener('pointerup', handleResizeEnd);\n        };\n      },\n      [height, maxHeight, maxWidth, minHeight, minWidth, onResize, onResizeEnd, width],\n    );\n\n    return (\n      <ModalRoot\n        defaultOpen={defaultOpen}\n        modal={modal}\n        open={open}\n        zIndex={zIndex}\n        onExitComplete={afterClose}\n        onOpenChange={handleOpenChange}\n      >\n        <ModalPortal container={container}>\n          {mask && (\n            <ModalBackdrop className={classNames?.backdrop} style={semanticStyles?.backdrop} />\n          )}\n          <ModalPopup\n            aria-label={ariaLabel}\n            className={cx(s.wrapper, classNames?.wrapper)}\n            motionProps={resolvedMotionProps}\n            panelClassName={cx(s.panel, isTop && s.panelTop, className, classNames?.panel)}\n            popupStyle={popupStyle}\n            width={activeResizeSize?.width ?? width}\n            style={{\n              height: activeResizeSize?.height ?? height,\n              minHeight,\n              minWidth,\n              width: activeResizeSize?.width,\n              ...semanticStyles?.panel,\n            }}\n          >\n            {resizable &&\n              resizeHandles.map((handle) => (\n                <div\n                  aria-hidden\n                  data-floating-panel-resize-handle={handle}\n                  key={handle}\n                  style={semanticStyles?.resizeHandle}\n                  className={cx(\n                    s.resizeHandle,\n                    getResizeHandleClassName(s, handle),\n                    classNames?.resizeHandle,\n                  )}\n                  onPointerDown={handleResizeStart(handle)}\n                />\n              ))}\n            {showHeader && (\n              <ModalHeader\n                className={cx(s.header, classNames?.header)}\n                style={semanticStyles?.header}\n              >\n                {title !== undefined ? (\n                  <ModalTitle\n                    className={cx(s.title, classNames?.title)}\n                    style={semanticStyles?.title}\n                  >\n                    {title}\n                  </ModalTitle>\n                ) : (\n                  <span />\n                )}\n                <div className={s.headerActions}>\n                  {actions && (\n                    <div\n                      className={cx(s.actions, classNames?.actions)}\n                      style={semanticStyles?.actions}\n                    >\n                      {actions}\n                    </div>\n                  )}\n                  {closable && (\n                    <ModalClose\n                      aria-label={closeLabel}\n                      className={cx(s.close, classNames?.close)}\n                      style={semanticStyles?.close}\n                    >\n                      {closeIcon ?? <X size={16} />}\n                    </ModalClose>\n                  )}\n                </div>\n              </ModalHeader>\n            )}\n            <ModalContent className={cx(s.body, classNames?.body)} style={semanticStyles?.body}>\n              {children}\n            </ModalContent>\n            {footer && (\n              <ModalFooter\n                className={cx(s.footer, classNames?.footer)}\n                style={semanticStyles?.footer}\n              >\n                {footer}\n              </ModalFooter>\n            )}\n          </ModalPopup>\n        </ModalPortal>\n      </ModalRoot>\n    );\n  },\n);\n\nFloatingPanel.displayName = 'FloatingPanel';\n\nexport { FloatingPanel };\n"],"mappings":"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"}
+{"version":3,"file":"FloatingPanel.mjs","names":[],"sources":["../../../src/base-ui/FloatingPanel/FloatingPanel.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { X } from 'lucide-react';\nimport type { MotionProps } from 'motion/react';\nimport type { CSSProperties, PointerEvent as ReactPointerEvent } from 'react';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport type { ModalRootProps } from '../Modal';\nimport {\n  ModalBackdrop,\n  ModalClose,\n  ModalContent,\n  ModalFooter,\n  ModalHeader,\n  ModalPopup,\n  ModalPortal,\n  ModalRoot,\n  ModalTitle,\n} from '../Modal';\nimport { styles } from './style';\nimport { ToastDodge } from './ToastDodge';\nimport type {\n  FloatingPanelOffset,\n  FloatingPanelPlacement,\n  FloatingPanelProps,\n  FloatingPanelResizeHandle,\n  FloatingPanelSize,\n} from './type';\n\nconst DEFAULT_MIN_HEIGHT = 180;\nconst DEFAULT_MIN_WIDTH = 320;\n\ninterface InternalFloatingPanelSize extends FloatingPanelSize {\n  sourceHeight?: number | string;\n  sourceWidth?: number | string;\n}\n\nconst defaultMotionProps: MotionProps = {\n  animate: { opacity: 1, scale: 1, x: 0, y: 0 },\n  exit: {\n    opacity: 0,\n    scale: 0.98,\n    transition: { duration: 0.14, ease: [0.4, 0, 1, 1] },\n    y: 12,\n  },\n  initial: { opacity: 0, scale: 0.98, y: 12 },\n  transition: { duration: 0.2, ease: [0.32, 0.72, 0, 1] },\n};\n\nconst topMotionProps: MotionProps = {\n  animate: { opacity: 1, scale: 1, x: 0, y: 0 },\n  exit: {\n    opacity: 0,\n    scale: 0.98,\n    transition: { duration: 0.14, ease: [0.4, 0, 1, 1] },\n    y: -12,\n  },\n  initial: { opacity: 0, scale: 0.98, y: -12 },\n  transition: { duration: 0.2, ease: [0.32, 0.72, 0, 1] },\n};\n\nconst resolveOffset = (offset: FloatingPanelOffset) => {\n  if (typeof offset === 'object') {\n    return {\n      x: offset.x ?? 8,\n      y: offset.y ?? 8,\n    };\n  }\n\n  return { x: offset, y: offset };\n};\n\nconst getPlacementStyle = (\n  placement: FloatingPanelPlacement,\n  offset: FloatingPanelOffset,\n): CSSProperties => {\n  const { x, y } = resolveOffset(offset);\n  const isTop = placement.startsWith('top');\n  const isLeft = placement.endsWith('Left');\n\n  const px = (value: number | string) => (typeof value === 'number' ? `${value}px` : value);\n  const blockInset = `calc(${px(y)} + var(--floating-panel-reserve-block-end, 0px))`;\n  const inlineInset = `calc(${px(x)} + var(--floating-panel-reserve-inline-end, 0px))`;\n\n  return {\n    alignItems: isTop ? 'flex-start' : 'flex-end',\n    justifyContent: isLeft ? 'flex-start' : 'flex-end',\n    paddingBlockEnd: isTop ? undefined : blockInset,\n    paddingBlockStart: isTop ? blockInset : undefined,\n    paddingInlineEnd: isLeft ? undefined : inlineInset,\n    paddingInlineStart: isLeft ? inlineInset : undefined,\n  };\n};\n\nconst clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);\n\nconst getViewportMaxSize = () => ({\n  height: Math.max(DEFAULT_MIN_HEIGHT, window.innerHeight - 16),\n  width: Math.max(DEFAULT_MIN_WIDTH, window.innerWidth - 16),\n});\n\nconst getResizeHandles = (placement: FloatingPanelPlacement): FloatingPanelResizeHandle[] => {\n  switch (placement) {\n    case 'bottomLeft': {\n      return ['top', 'right', 'topRight'];\n    }\n    case 'topLeft': {\n      return ['bottom', 'right', 'bottomRight'];\n    }\n    case 'topRight': {\n      return ['bottom', 'left', 'bottomLeft'];\n    }\n    default: {\n      return ['top', 'left', 'topLeft'];\n    }\n  }\n};\n\nconst getResizeHandleClassName = (s: typeof styles, handle: FloatingPanelResizeHandle) => {\n  const handleClassMap: Record<FloatingPanelResizeHandle, string> = {\n    bottom: s.resizeHandleBottom,\n    bottomLeft: s.resizeHandleBottomLeft,\n    bottomRight: s.resizeHandleBottomRight,\n    left: s.resizeHandleLeft,\n    right: s.resizeHandleRight,\n    top: s.resizeHandleTop,\n    topLeft: s.resizeHandleTopLeft,\n    topRight: s.resizeHandleTopRight,\n  };\n\n  return handleClassMap[handle];\n};\n\nconst resolveResizeSize = ({\n  handle,\n  maxHeight,\n  maxWidth,\n  minHeight,\n  minWidth,\n  startHeight,\n  startWidth,\n  startX,\n  startY,\n  x,\n  y,\n}: {\n  handle: FloatingPanelResizeHandle;\n  maxHeight: number;\n  maxWidth: number;\n  minHeight: number;\n  minWidth: number;\n  startHeight: number;\n  startWidth: number;\n  startX: number;\n  startY: number;\n  x: number;\n  y: number;\n}): FloatingPanelSize => {\n  const deltaX = x - startX;\n  const deltaY = y - startY;\n  const growsLeft = handle.includes('Left') || handle === 'left';\n  const growsRight = handle.includes('Right') || handle === 'right';\n  const growsTop = handle.includes('top') || handle === 'top';\n  const growsBottom = handle.includes('bottom') || handle === 'bottom';\n\n  const nextWidth = growsLeft ? startWidth - deltaX : growsRight ? startWidth + deltaX : startWidth;\n  const nextHeight = growsTop\n    ? startHeight - deltaY\n    : growsBottom\n      ? startHeight + deltaY\n      : startHeight;\n\n  return {\n    height: clamp(nextHeight, minHeight, maxHeight),\n    width: clamp(nextWidth, minWidth, maxWidth),\n  };\n};\n\nconst FloatingPanel = memo<FloatingPanelProps>(\n  ({\n    afterClose,\n    ariaLabel,\n    children,\n    className,\n    classNames,\n    closable = true,\n    closeIcon,\n    closeLabel = 'Close',\n    defaultOpen,\n    actions,\n    footer,\n    getContainer,\n    height,\n    keyboard = true,\n    mask = false,\n    maskClosable = true,\n    maxHeight,\n    maxWidth,\n    minHeight = DEFAULT_MIN_HEIGHT,\n    minWidth = DEFAULT_MIN_WIDTH,\n    modal = false,\n    motionProps,\n    offset = 8,\n    onClose,\n    onOpenChange,\n    onResize,\n    onResizeEnd,\n    open,\n    placement = 'bottomRight',\n    resizable = true,\n    styles: semanticStyles,\n    title,\n    width = 640,\n    zIndex,\n  }) => {\n    const s = styles;\n    const isTop = placement.startsWith('top');\n    const container = getContainer === false ? undefined : getContainer;\n    const [resizeSize, setResizeSize] = useState<InternalFloatingPanelSize>();\n    const latestResizeSizeRef = useRef<FloatingPanelSize | undefined>(undefined);\n    const resizeCleanupRef = useRef<(() => void) | undefined>(undefined);\n    const activeResizeSize =\n      resizeSize?.sourceWidth === width && resizeSize.sourceHeight === height\n        ? resizeSize\n        : undefined;\n\n    useEffect(\n      () => () => {\n        resizeCleanupRef.current?.();\n      },\n      [],\n    );\n\n    const popupStyle = useMemo(\n      () => ({\n        ...getPlacementStyle(placement, offset),\n        ...semanticStyles?.wrapper,\n      }),\n      [offset, placement, semanticStyles?.wrapper],\n    );\n\n    const handleOpenChange = useCallback<NonNullable<ModalRootProps['onOpenChange']>>(\n      (nextOpen, eventDetails) => {\n        if (!nextOpen) {\n          if (keyboard === false && eventDetails.reason === 'escape-key') return;\n          if (maskClosable === false && eventDetails.reason === 'outside-press') return;\n          onClose?.();\n        }\n\n        onOpenChange?.(nextOpen, eventDetails);\n      },\n      [keyboard, maskClosable, onClose, onOpenChange],\n    );\n\n    const showHeader = title !== undefined || actions !== undefined || closable;\n    const resolvedMotionProps = motionProps ?? (isTop ? topMotionProps : defaultMotionProps);\n    const resizeHandles = useMemo(() => getResizeHandles(placement), [placement]);\n\n    const handleResizeStart = useCallback(\n      (handle: FloatingPanelResizeHandle) => (event: ReactPointerEvent<HTMLDivElement>) => {\n        event.preventDefault();\n        event.stopPropagation();\n\n        const panel = event.currentTarget.parentElement;\n        if (!panel) return;\n\n        const rect = panel.getBoundingClientRect();\n        const viewportMaxSize = getViewportMaxSize();\n        const resolvedMaxWidth = Math.max(minWidth, maxWidth ?? viewportMaxSize.width);\n        const resolvedMaxHeight = Math.max(minHeight, maxHeight ?? viewportMaxSize.height);\n        const startX = event.clientX;\n        const startY = event.clientY;\n\n        const handleResizeMove = (moveEvent: PointerEvent) => {\n          const nextSize = resolveResizeSize({\n            handle,\n            maxHeight: resolvedMaxHeight,\n            maxWidth: resolvedMaxWidth,\n            minHeight,\n            minWidth,\n            startHeight: rect.height,\n            startWidth: rect.width,\n            startX,\n            startY,\n            x: moveEvent.clientX,\n            y: moveEvent.clientY,\n          });\n\n          const nextState = { ...nextSize, sourceHeight: height, sourceWidth: width };\n          latestResizeSizeRef.current = nextSize;\n          setResizeSize(nextState);\n          onResize?.(nextSize);\n        };\n\n        const handleResizeEnd = () => {\n          resizeCleanupRef.current?.();\n          resizeCleanupRef.current = undefined;\n\n          if (latestResizeSizeRef.current) onResizeEnd?.(latestResizeSizeRef.current);\n        };\n\n        resizeCleanupRef.current?.();\n        window.addEventListener('pointermove', handleResizeMove);\n        window.addEventListener('pointerup', handleResizeEnd);\n        resizeCleanupRef.current = () => {\n          window.removeEventListener('pointermove', handleResizeMove);\n          window.removeEventListener('pointerup', handleResizeEnd);\n        };\n      },\n      [height, maxHeight, maxWidth, minHeight, minWidth, onResize, onResizeEnd, width],\n    );\n\n    return (\n      <ModalRoot\n        defaultOpen={defaultOpen}\n        modal={modal}\n        open={open}\n        zIndex={zIndex}\n        onExitComplete={afterClose}\n        onOpenChange={handleOpenChange}\n      >\n        <ModalPortal container={container}>\n          {mask && (\n            <ModalBackdrop className={classNames?.backdrop} style={semanticStyles?.backdrop} />\n          )}\n          <ModalPopup\n            aria-label={ariaLabel}\n            className={cx(s.wrapper, classNames?.wrapper)}\n            motionProps={resolvedMotionProps}\n            panelClassName={cx(s.panel, isTop && s.panelTop, className, classNames?.panel)}\n            popupStyle={popupStyle}\n            width={activeResizeSize?.width ?? width}\n            style={{\n              height: activeResizeSize?.height ?? height,\n              minHeight,\n              minWidth,\n              width: activeResizeSize?.width,\n              ...semanticStyles?.panel,\n            }}\n          >\n            {placement === 'bottomRight' && <ToastDodge />}\n            {resizable &&\n              resizeHandles.map((handle) => (\n                <div\n                  aria-hidden\n                  data-floating-panel-resize-handle={handle}\n                  key={handle}\n                  style={semanticStyles?.resizeHandle}\n                  className={cx(\n                    s.resizeHandle,\n                    getResizeHandleClassName(s, handle),\n                    classNames?.resizeHandle,\n                  )}\n                  onPointerDown={handleResizeStart(handle)}\n                />\n              ))}\n            {showHeader && (\n              <ModalHeader\n                className={cx(s.header, classNames?.header)}\n                style={semanticStyles?.header}\n              >\n                {title !== undefined ? (\n                  <ModalTitle\n                    className={cx(s.title, classNames?.title)}\n                    style={semanticStyles?.title}\n                  >\n                    {title}\n                  </ModalTitle>\n                ) : (\n                  <span />\n                )}\n                <div className={s.headerActions}>\n                  {actions && (\n                    <div\n                      className={cx(s.actions, classNames?.actions)}\n                      style={semanticStyles?.actions}\n                    >\n                      {actions}\n                    </div>\n                  )}\n                  {closable && (\n                    <ModalClose\n                      aria-label={closeLabel}\n                      className={cx(s.close, classNames?.close)}\n                      style={semanticStyles?.close}\n                    >\n                      {closeIcon ?? <X size={16} />}\n                    </ModalClose>\n                  )}\n                </div>\n              </ModalHeader>\n            )}\n            <ModalContent className={cx(s.body, classNames?.body)} style={semanticStyles?.body}>\n              {children}\n            </ModalContent>\n            {footer && (\n              <ModalFooter\n                className={cx(s.footer, classNames?.footer)}\n                style={semanticStyles?.footer}\n              >\n                {footer}\n              </ModalFooter>\n            )}\n          </ModalPopup>\n        </ModalPortal>\n      </ModalRoot>\n    );\n  },\n);\n\nFloatingPanel.displayName = 'FloatingPanel';\n\nexport { FloatingPanel };\n"],"mappings":"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"}

package/es/base-ui/FloatingPanel/ToastDodge.mjs

@@ -0,0 +1,81 @@
+import { PANEL_ALIGN_INLINE_VAR, PANEL_RESERVE_VAR, TOAST_SHIFT_X_VAR, TOAST_SHIFT_Y_VAR, TOAST_WIDTH_VAR, resolveToastDodge } from "../Toast/dodge.mjs";
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/base-ui/FloatingPanel/ToastDodge.tsx
+const TOAST_VARS = [
+	TOAST_SHIFT_X_VAR,
+	TOAST_SHIFT_Y_VAR,
+	TOAST_WIDTH_VAR
+];
+let owner;
+const ToastDodge = () => {
+	const probeRef = useRef(null);
+	const reserveRef = useRef(0);
+	const tokenRef = useRef({});
+	const insetRef = useRef(void 0);
+	useEffect(() => {
+		const root = document.documentElement;
+		const panel = probeRef.current?.parentElement;
+		const token = tokenRef.current;
+		const wrapper = panel?.parentElement;
+		const clear = () => {
+			reserveRef.current = 0;
+			if (wrapper instanceof HTMLElement) {
+				wrapper.style.removeProperty(PANEL_RESERVE_VAR);
+				wrapper.style.removeProperty(PANEL_ALIGN_INLINE_VAR);
+			}
+			if (owner !== token) return;
+			owner = void 0;
+			for (const name of TOAST_VARS) root.style.removeProperty(name);
+		};
+		if (!panel) return;
+		const apply = () => {
+			if (!(panel instanceof HTMLElement) || !(wrapper instanceof HTMLElement)) return;
+			if (!insetRef.current) {
+				const padding = getComputedStyle(wrapper);
+				insetRef.current = {
+					x: Number.parseFloat(padding.paddingInlineEnd) || 0,
+					y: Number.parseFloat(padding.paddingBlockEnd) || 0
+				};
+			}
+			const inset = insetRef.current;
+			const maxHeight = Number.parseFloat(getComputedStyle(panel).maxHeight);
+			const reserved = reserveRef.current;
+			const clamped = panel.offsetHeight >= maxHeight - .5 ? reserved : 0;
+			const dodge = resolveToastDodge({
+				panelHeight: panel.offsetHeight + clamped,
+				panelOffsetX: inset.x,
+				panelOffsetY: inset.y,
+				panelWidth: panel.offsetWidth,
+				viewportHeight: wrapper.clientHeight,
+				viewportWidth: wrapper.clientWidth
+			});
+			owner = token;
+			reserveRef.current = dodge.reserve;
+			root.style.setProperty(TOAST_SHIFT_X_VAR, `${dodge.shiftX}px`);
+			root.style.setProperty(TOAST_SHIFT_Y_VAR, `${dodge.shiftY}px`);
+			wrapper.style.setProperty(PANEL_RESERVE_VAR, `${dodge.reserve}px`);
+			wrapper.style.setProperty(PANEL_ALIGN_INLINE_VAR, `${dodge.alignInline}px`);
+			if (dodge.width === 360) root.style.removeProperty(TOAST_WIDTH_VAR);
+			else root.style.setProperty(TOAST_WIDTH_VAR, `${dodge.width}px`);
+		};
+		const observer = new ResizeObserver(apply);
+		observer.observe(panel);
+		window.addEventListener("resize", apply);
+		apply();
+		return () => {
+			observer.disconnect();
+			window.removeEventListener("resize", apply);
+			clear();
+		};
+	}, []);
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		hidden: true,
+		ref: probeRef
+	});
+};
+//#endregion
+export { ToastDodge };
+
+//# sourceMappingURL=ToastDodge.mjs.map

package/es/base-ui/FloatingPanel/ToastDodge.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastDodge.mjs","names":[],"sources":["../../../src/base-ui/FloatingPanel/ToastDodge.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport {\n  PANEL_ALIGN_INLINE_VAR,\n  PANEL_RESERVE_VAR,\n  resolveToastDodge,\n  TOAST_SHIFT_X_VAR,\n  TOAST_SHIFT_Y_VAR,\n  TOAST_WIDTH,\n  TOAST_WIDTH_VAR,\n} from '../Toast/dodge';\n\nconst TOAST_VARS = [TOAST_SHIFT_X_VAR, TOAST_SHIFT_Y_VAR, TOAST_WIDTH_VAR];\n\n// A closing panel unmounts after its exit animation, so it can outlive the\n// panel that replaced it. Only the panel that wrote the vars may clear them.\nlet owner: object | undefined;\n\n// Mounted inside the panel so it lives exactly as long as the panel does, and\n// reads its own parentElement to measure it.\nexport const ToastDodge = () => {\n  const probeRef = useRef<HTMLSpanElement>(null);\n  const reserveRef = useRef(0);\n  const tokenRef = useRef({});\n  const insetRef = useRef<{ x: number; y: number }>(undefined);\n\n  useEffect(() => {\n    const root = document.documentElement;\n    const panel = probeRef.current?.parentElement;\n\n    const token = tokenRef.current;\n    const wrapper = panel?.parentElement;\n    const clear = () => {\n      reserveRef.current = 0;\n      // The reserve lives on this panel's own wrapper, so it is always ours to\n      // drop; the toast vars are global and only the last writer may clear them.\n      if (wrapper instanceof HTMLElement) {\n        wrapper.style.removeProperty(PANEL_RESERVE_VAR);\n        wrapper.style.removeProperty(PANEL_ALIGN_INLINE_VAR);\n      }\n      if (owner !== token) return;\n      owner = undefined;\n      for (const name of TOAST_VARS) root.style.removeProperty(name);\n    };\n\n    if (!panel) return;\n\n    const apply = () => {\n      if (!(panel instanceof HTMLElement) || !(wrapper instanceof HTMLElement)) return;\n      // Read the resting insets once, before anything is reserved: the wrapper\n      // padding animates, so sampling it later feeds the transition's midpoint\n      // back into the verdict and the reserve ratchets upward every frame.\n      if (!insetRef.current) {\n        const padding = getComputedStyle(wrapper);\n        insetRef.current = {\n          x: Number.parseFloat(padding.paddingInlineEnd) || 0,\n          y: Number.parseFloat(padding.paddingBlockEnd) || 0,\n        };\n      }\n      // Layout size, never getBoundingClientRect: the rect carries the entrance\n      // animation's transform, so measuring mid-flight reports a scaled-down\n      // panel and the toast lands short of the gutter.\n      const inset = insetRef.current;\n      // Measure the panel as if it were not already yielding, otherwise the\n      // reserve it applies shrinks the panel and flips the next verdict.\n      // Only add the reserve back when max-height is what is holding the panel\n      // down; a panel shorter than its cap was never shrunk by it.\n      const maxHeight = Number.parseFloat(getComputedStyle(panel).maxHeight);\n      const reserved = reserveRef.current;\n      const clamped = panel.offsetHeight >= maxHeight - 0.5 ? reserved : 0;\n      const dodge = resolveToastDodge({\n        panelHeight: panel.offsetHeight + clamped,\n        panelOffsetX: inset.x,\n        panelOffsetY: inset.y,\n        panelWidth: panel.offsetWidth,\n        viewportHeight: wrapper.clientHeight,\n        viewportWidth: wrapper.clientWidth,\n      });\n\n      owner = token;\n      reserveRef.current = dodge.reserve;\n      root.style.setProperty(TOAST_SHIFT_X_VAR, `${dodge.shiftX}px`);\n      root.style.setProperty(TOAST_SHIFT_Y_VAR, `${dodge.shiftY}px`);\n      wrapper.style.setProperty(PANEL_RESERVE_VAR, `${dodge.reserve}px`);\n      wrapper.style.setProperty(PANEL_ALIGN_INLINE_VAR, `${dodge.alignInline}px`);\n      if (dodge.width === TOAST_WIDTH) root.style.removeProperty(TOAST_WIDTH_VAR);\n      else root.style.setProperty(TOAST_WIDTH_VAR, `${dodge.width}px`);\n    };\n\n    const observer = new ResizeObserver(apply);\n    observer.observe(panel);\n    window.addEventListener('resize', apply);\n    apply();\n\n    return () => {\n      observer.disconnect();\n      window.removeEventListener('resize', apply);\n      clear();\n    };\n  }, []);\n\n  return <span aria-hidden hidden ref={probeRef} />;\n};\n"],"mappings":";;;;AAYA,MAAM,aAAa;CAAC;CAAmB;CAAmB;AAAe;AAIzE,IAAI;AAIJ,MAAa,mBAAmB;CAC9B,MAAM,WAAW,OAAwB,IAAI;CAC7C,MAAM,aAAa,OAAO,CAAC;CAC3B,MAAM,WAAW,OAAO,CAAC,CAAC;CAC1B,MAAM,WAAW,OAAiC,KAAA,CAAS;CAE3D,gBAAgB;EACd,MAAM,OAAO,SAAS;EACtB,MAAM,QAAQ,SAAS,SAAS;EAEhC,MAAM,QAAQ,SAAS;EACvB,MAAM,UAAU,OAAO;EACvB,MAAM,cAAc;GAClB,WAAW,UAAU;GAGrB,IAAI,mBAAmB,aAAa;IAClC,QAAQ,MAAM,eAAe,iBAAiB;IAC9C,QAAQ,MAAM,eAAe,sBAAsB;GACrD;GACA,IAAI,UAAU,OAAO;GACrB,QAAQ,KAAA;GACR,KAAK,MAAM,QAAQ,YAAY,KAAK,MAAM,eAAe,IAAI;EAC/D;EAEA,IAAI,CAAC,OAAO;EAEZ,MAAM,cAAc;GAClB,IAAI,EAAE,iBAAiB,gBAAgB,EAAE,mBAAmB,cAAc;GAI1E,IAAI,CAAC,SAAS,SAAS;IACrB,MAAM,UAAU,iBAAiB,OAAO;IACxC,SAAS,UAAU;KACjB,GAAG,OAAO,WAAW,QAAQ,gBAAgB,KAAK;KAClD,GAAG,OAAO,WAAW,QAAQ,eAAe,KAAK;IACnD;GACF;GAIA,MAAM,QAAQ,SAAS;GAKvB,MAAM,YAAY,OAAO,WAAW,iBAAiB,KAAK,CAAC,CAAC,SAAS;GACrE,MAAM,WAAW,WAAW;GAC5B,MAAM,UAAU,MAAM,gBAAgB,YAAY,KAAM,WAAW;GACnE,MAAM,QAAQ,kBAAkB;IAC9B,aAAa,MAAM,eAAe;IAClC,cAAc,MAAM;IACpB,cAAc,MAAM;IACpB,YAAY,MAAM;IAClB,gBAAgB,QAAQ;IACxB,eAAe,QAAQ;GACzB,CAAC;GAED,QAAQ;GACR,WAAW,UAAU,MAAM;GAC3B,KAAK,MAAM,YAAY,mBAAmB,GAAG,MAAM,OAAO,GAAG;GAC7D,KAAK,MAAM,YAAY,mBAAmB,GAAG,MAAM,OAAO,GAAG;GAC7D,QAAQ,MAAM,YAAY,mBAAmB,GAAG,MAAM,QAAQ,GAAG;GACjE,QAAQ,MAAM,YAAY,wBAAwB,GAAG,MAAM,YAAY,GAAG;GAC1E,IAAI,MAAM,UAAA,KAAuB,KAAK,MAAM,eAAe,eAAe;QACrE,KAAK,MAAM,YAAY,iBAAiB,GAAG,MAAM,MAAM,GAAG;EACjE;EAEA,MAAM,WAAW,IAAI,eAAe,KAAK;EACzC,SAAS,QAAQ,KAAK;EACtB,OAAO,iBAAiB,UAAU,KAAK;EACvC,MAAM;EAEN,aAAa;GACX,SAAS,WAAW;GACpB,OAAO,oBAAoB,UAAU,KAAK;GAC1C,MAAM;EACR;CACF,GAAG,CAAC,CAAC;CAEL,OAAO,oBAAC,QAAD;EAAM,eAAA;EAAY,QAAA;EAAO,KAAK;CAAW,CAAA;AAClD"}

package/es/base-ui/FloatingPanel/style.mjs

@@ -1,3 +1,4 @@
+import { TOAST_DODGE_DURATION, TOAST_DODGE_EASE } from "../Toast/dodge.mjs";
 import { createStaticStyles } from "antd-style";
 //#region src/base-ui/FloatingPanel/style.ts
 const styles = createStaticStyles(({ css, cssVar }) => ({
@@ -40,7 +41,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     transform-origin: 100% 100%;
 
     width: calc(100dvw - 32px);
-    max-height: calc(100dvh - 32px);
+    max-height: calc(100dvh - 32px - var(--floating-panel-reserve-block-end, 0px));
     border-radius: 12px;
 
     box-shadow:
@@ -169,6 +170,15 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
   `,
 	wrapper: css`
     overflow: hidden;
+    transition:
+      padding-block-end ${TOAST_DODGE_DURATION} ${TOAST_DODGE_EASE},
+      padding-block-start ${TOAST_DODGE_DURATION} ${TOAST_DODGE_EASE},
+      padding-inline-end ${TOAST_DODGE_DURATION} ${TOAST_DODGE_EASE},
+      padding-inline-start ${TOAST_DODGE_DURATION} ${TOAST_DODGE_EASE};
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   `
 }));
 //#endregion

package/es/base-ui/FloatingPanel/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/FloatingPanel/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  body: css`\n    overflow: hidden auto;\n    flex: 1;\n    min-height: 0;\n    padding: 0;\n  `,\n  close: css`\n    position: static;\n\n    width: 32px;\n    height: 32px;\n    margin-inline-end: -4px;\n    border-radius: 8px;\n  `,\n  actions: css`\n    display: flex;\n    flex: none;\n    gap: 4px;\n    align-items: center;\n  `,\n  footer: css`\n    flex: none;\n    border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n  `,\n  header: css`\n    flex: none;\n    min-height: 48px;\n    border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n  `,\n  headerActions: css`\n    display: flex;\n    flex: none;\n    gap: 4px;\n    align-items: center;\n  `,\n  panel: css`\n    transform-origin: 100% 100%;\n\n    width: calc(100dvw - 32px);\n    max-height: calc(100dvh - 32px);\n    border-radius: 12px;\n\n    box-shadow:\n      0 6px 24px 0 rgb(0 0 0 / 8%),\n      0 2px 6px 0 rgb(0 0 0 / 4%);\n  `,\n  panelTop: css`\n    transform-origin: 100% 0;\n  `,\n  resizeHandle: css`\n    touch-action: none;\n    position: absolute;\n    z-index: 1;\n    background: transparent;\n\n    &::after {\n      content: '';\n\n      position: absolute;\n\n      border-radius: 999px;\n\n      opacity: 0;\n      background: ${cssVar.colorPrimary};\n\n      transition: opacity 120ms ease;\n    }\n\n    &:hover::after,\n    &:focus-visible::after {\n      opacity: 0.55;\n    }\n  `,\n  resizeHandleBottom: css`\n    cursor: ns-resize;\n    inset-block-end: -4px;\n    inset-inline: 16px;\n    height: 8px;\n\n    &::after {\n      inset-block-end: 3px;\n      inset-inline: 0;\n      height: 2px;\n    }\n  `,\n  resizeHandleBottomLeft: css`\n    cursor: nesw-resize;\n\n    inset-block-end: -5px;\n    inset-inline-start: -5px;\n\n    width: 16px;\n    height: 16px;\n  `,\n  resizeHandleBottomRight: css`\n    cursor: nwse-resize;\n\n    inset-block-end: -5px;\n    inset-inline-end: -5px;\n\n    width: 16px;\n    height: 16px;\n  `,\n  resizeHandleLeft: css`\n    cursor: ew-resize;\n    inset-block: 16px;\n    inset-inline-start: -4px;\n    width: 8px;\n\n    &::after {\n      inset-block: 0;\n      inset-inline-start: 3px;\n      width: 2px;\n    }\n  `,\n  resizeHandleRight: css`\n    cursor: ew-resize;\n    inset-block: 16px;\n    inset-inline-end: -4px;\n    width: 8px;\n\n    &::after {\n      inset-block: 0;\n      inset-inline-end: 3px;\n      width: 2px;\n    }\n  `,\n  resizeHandleTop: css`\n    cursor: ns-resize;\n    inset-block-start: -4px;\n    inset-inline: 16px;\n    height: 8px;\n\n    &::after {\n      inset-block-start: 3px;\n      inset-inline: 0;\n      height: 2px;\n    }\n  `,\n  resizeHandleTopLeft: css`\n    cursor: nwse-resize;\n\n    inset-block-start: -5px;\n    inset-inline-start: -5px;\n\n    width: 16px;\n    height: 16px;\n  `,\n  resizeHandleTopRight: css`\n    cursor: nesw-resize;\n\n    inset-block-start: -5px;\n    inset-inline-end: -5px;\n\n    width: 16px;\n    height: 16px;\n  `,\n  title: css`\n    overflow: hidden;\n    flex: 1;\n\n    min-width: 0;\n\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n  wrapper: css`\n    overflow: hidden;\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;;;;;;CAMT,OAAO,GAAG;;;;;;;;CAQV,SAAS,GAAG;;;;;;CAMZ,QAAQ,GAAG;;oCAEuB,OAAO,qBAAqB;;CAE9D,QAAQ,GAAG;;;kCAGqB,OAAO,qBAAqB;;CAE5D,eAAe,GAAG;;;;;;CAMlB,OAAO,GAAG;;;;;;;;;;;CAWV,UAAU,GAAG;;;CAGb,cAAc,GAAG;;;;;;;;;;;;;;oBAcC,OAAO,aAAa;;;;;;;;;;CAUtC,oBAAoB,GAAG;;;;;;;;;;;;CAYvB,wBAAwB,GAAG;;;;;;;;;CAS3B,yBAAyB,GAAG;;;;;;;;;CAS5B,kBAAkB,GAAG;;;;;;;;;;;;CAYrB,mBAAmB,GAAG;;;;;;;;;;;;CAYtB,iBAAiB,GAAG;;;;;;;;;;;;CAYpB,qBAAqB,GAAG;;;;;;;;;CASxB,sBAAsB,GAAG;;;;;;;;;CASzB,OAAO,GAAG;;;;;;;;;CASV,SAAS,GAAG;;;AAGd,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/FloatingPanel/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nimport { TOAST_DODGE_DURATION, TOAST_DODGE_EASE } from '../Toast/dodge';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  body: css`\n    overflow: hidden auto;\n    flex: 1;\n    min-height: 0;\n    padding: 0;\n  `,\n  close: css`\n    position: static;\n\n    width: 32px;\n    height: 32px;\n    margin-inline-end: -4px;\n    border-radius: 8px;\n  `,\n  actions: css`\n    display: flex;\n    flex: none;\n    gap: 4px;\n    align-items: center;\n  `,\n  footer: css`\n    flex: none;\n    border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n  `,\n  header: css`\n    flex: none;\n    min-height: 48px;\n    border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n  `,\n  headerActions: css`\n    display: flex;\n    flex: none;\n    gap: 4px;\n    align-items: center;\n  `,\n  panel: css`\n    transform-origin: 100% 100%;\n\n    width: calc(100dvw - 32px);\n    max-height: calc(100dvh - 32px - var(--floating-panel-reserve-block-end, 0px));\n    border-radius: 12px;\n\n    box-shadow:\n      0 6px 24px 0 rgb(0 0 0 / 8%),\n      0 2px 6px 0 rgb(0 0 0 / 4%);\n  `,\n  panelTop: css`\n    transform-origin: 100% 0;\n  `,\n  resizeHandle: css`\n    touch-action: none;\n    position: absolute;\n    z-index: 1;\n    background: transparent;\n\n    &::after {\n      content: '';\n\n      position: absolute;\n\n      border-radius: 999px;\n\n      opacity: 0;\n      background: ${cssVar.colorPrimary};\n\n      transition: opacity 120ms ease;\n    }\n\n    &:hover::after,\n    &:focus-visible::after {\n      opacity: 0.55;\n    }\n  `,\n  resizeHandleBottom: css`\n    cursor: ns-resize;\n    inset-block-end: -4px;\n    inset-inline: 16px;\n    height: 8px;\n\n    &::after {\n      inset-block-end: 3px;\n      inset-inline: 0;\n      height: 2px;\n    }\n  `,\n  resizeHandleBottomLeft: css`\n    cursor: nesw-resize;\n\n    inset-block-end: -5px;\n    inset-inline-start: -5px;\n\n    width: 16px;\n    height: 16px;\n  `,\n  resizeHandleBottomRight: css`\n    cursor: nwse-resize;\n\n    inset-block-end: -5px;\n    inset-inline-end: -5px;\n\n    width: 16px;\n    height: 16px;\n  `,\n  resizeHandleLeft: css`\n    cursor: ew-resize;\n    inset-block: 16px;\n    inset-inline-start: -4px;\n    width: 8px;\n\n    &::after {\n      inset-block: 0;\n      inset-inline-start: 3px;\n      width: 2px;\n    }\n  `,\n  resizeHandleRight: css`\n    cursor: ew-resize;\n    inset-block: 16px;\n    inset-inline-end: -4px;\n    width: 8px;\n\n    &::after {\n      inset-block: 0;\n      inset-inline-end: 3px;\n      width: 2px;\n    }\n  `,\n  resizeHandleTop: css`\n    cursor: ns-resize;\n    inset-block-start: -4px;\n    inset-inline: 16px;\n    height: 8px;\n\n    &::after {\n      inset-block-start: 3px;\n      inset-inline: 0;\n      height: 2px;\n    }\n  `,\n  resizeHandleTopLeft: css`\n    cursor: nwse-resize;\n\n    inset-block-start: -5px;\n    inset-inline-start: -5px;\n\n    width: 16px;\n    height: 16px;\n  `,\n  resizeHandleTopRight: css`\n    cursor: nesw-resize;\n\n    inset-block-start: -5px;\n    inset-inline-end: -5px;\n\n    width: 16px;\n    height: 16px;\n  `,\n  title: css`\n    overflow: hidden;\n    flex: 1;\n\n    min-width: 0;\n\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n  wrapper: css`\n    overflow: hidden;\n    transition:\n      padding-block-end ${TOAST_DODGE_DURATION} ${TOAST_DODGE_EASE},\n      padding-block-start ${TOAST_DODGE_DURATION} ${TOAST_DODGE_EASE},\n      padding-inline-end ${TOAST_DODGE_DURATION} ${TOAST_DODGE_EASE},\n      padding-inline-start ${TOAST_DODGE_DURATION} ${TOAST_DODGE_EASE};\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  `,\n}));\n"],"mappings":";;;AAIA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;;;;;;CAMT,OAAO,GAAG;;;;;;;;CAQV,SAAS,GAAG;;;;;;CAMZ,QAAQ,GAAG;;oCAEuB,OAAO,qBAAqB;;CAE9D,QAAQ,GAAG;;;kCAGqB,OAAO,qBAAqB;;CAE5D,eAAe,GAAG;;;;;;CAMlB,OAAO,GAAG;;;;;;;;;;;CAWV,UAAU,GAAG;;;CAGb,cAAc,GAAG;;;;;;;;;;;;;;oBAcC,OAAO,aAAa;;;;;;;;;;CAUtC,oBAAoB,GAAG;;;;;;;;;;;;CAYvB,wBAAwB,GAAG;;;;;;;;;CAS3B,yBAAyB,GAAG;;;;;;;;;CAS5B,kBAAkB,GAAG;;;;;;;;;;;;CAYrB,mBAAmB,GAAG;;;;;;;;;;;;CAYtB,iBAAiB,GAAG;;;;;;;;;;;;CAYpB,qBAAqB,GAAG;;;;;;;;;CASxB,sBAAsB,GAAG;;;;;;;;;CASzB,OAAO,GAAG;;;;;;;;;CASV,SAAS,GAAG;;;0BAGY,qBAAqB,GAAG,iBAAiB;4BACvC,qBAAqB,GAAG,iBAAiB;2BAC1C,qBAAqB,GAAG,iBAAiB;6BACvC,qBAAqB,GAAG,iBAAiB;;;;;;AAMtE,EAAE"}

package/es/base-ui/Input/style.d.mts

@@ -24,7 +24,7 @@ declare const styles: {
 declare const rootVariants: (props?: ({
   shadow?: boolean | null | undefined;
   size?: "large" | "middle" | "small" | null | undefined;
-  variant?: "borderless" | "filled" | "outlined" | null | undefined;
+  variant?: "filled" | "borderless" | "outlined" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
 export { rootVariants, styles };

package/es/base-ui/ScrollArea/style.mjs

@@ -74,6 +74,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
   `,
 	viewport: css`
     position: relative;
+    overscroll-behavior: auto;
     height: 100%;
     outline: none;
 

package/es/base-ui/ScrollArea/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/ScrollArea/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nimport { focusRing } from '@/base-ui/focusRing';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  content: css`\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n\n    font-size: ${cssVar.fontSizeSM};\n    line-height: 1.375rem;\n    color: ${cssVar.colorText};\n  `,\n\n  corner: css`\n    background: ${cssVar.colorFillSecondary};\n  `,\n\n  root: css`\n    position: relative;\n    box-sizing: border-box;\n  `,\n\n  scrollbar: css`\n    pointer-events: none;\n\n    margin: 8px;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    opacity: 0;\n    background: transparent;\n\n    transition: opacity 150ms;\n\n    &::before {\n      content: '';\n      position: absolute;\n    }\n\n    &[data-scrolling] {\n      transition-duration: 0ms;\n    }\n\n    &[data-hovering],\n    &[data-scrolling] {\n      pointer-events: auto;\n      opacity: 1;\n    }\n\n    &[data-orientation='vertical'] {\n      width: 4px;\n\n      &::before {\n        inset-inline-start: 50%;\n        transform: translateX(-50%);\n        width: 20px;\n        height: 100%;\n      }\n    }\n\n    &[data-orientation='horizontal'] {\n      height: 4px;\n\n      &::before {\n        inset-block-end: -8px;\n        inset-inline: 0;\n        width: 100%;\n        height: 20px;\n      }\n    }\n  `,\n\n  thumb: css`\n    width: 100%;\n    height: 100%;\n    border-radius: inherit;\n    background: ${cssVar.colorTextQuaternary};\n  `,\n\n  viewport: css`\n    position: relative;\n    height: 100%;\n    outline: none;\n\n    ${focusRing};\n  `,\n\n  viewportFade: css`\n    --scroll-area-overflow-y-start: inherit;\n    --scroll-area-overflow-y-end: inherit;\n    --lobe-scroll-area-fade-size: 40px;\n    --lobe-scroll-area-fade-top: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-y-start, 0px)\n    );\n    --lobe-scroll-area-fade-bottom: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-y-end, 0px)\n    );\n\n    /* Fade the CONTENT via mask, so it works on background images too. */\n    mask-image: linear-gradient(\n      to bottom,\n      transparent 0,\n      #000 var(--lobe-scroll-area-fade-top),\n      #000 calc(100% - var(--lobe-scroll-area-fade-bottom)),\n      transparent 100%\n    );\n    mask-repeat: no-repeat;\n    mask-size: 100% 100%;\n\n    /* Scroll-driven animation: use scroll position to drive the mask. */\n    @supports (animation-timeline: scroll()) {\n      /*\n       * Important: drive fade by *distance to edges* (first/last 40px),\n       * so reaching top/bottom doesn't cause a sudden snap.\n       */\n      @keyframes lobe-scroll-area-fade-top-in {\n        from {\n          --lobe-scroll-area-fade-top: 0;\n        }\n\n        to {\n          --lobe-scroll-area-fade-top: var(--lobe-scroll-area-fade-size);\n        }\n      }\n\n      @keyframes lobe-scroll-area-fade-bottom-out {\n        from {\n          --lobe-scroll-area-fade-bottom: var(--lobe-scroll-area-fade-size);\n        }\n\n        to {\n          --lobe-scroll-area-fade-bottom: 0;\n        }\n      }\n\n      animation-name: lobe-scroll-area-fade-top-in, lobe-scroll-area-fade-bottom-out;\n      animation-duration: 1ms, 1ms;\n      animation-timing-function: linear, linear;\n      animation-fill-mode: both, both;\n      animation-timeline: scroll(self y), scroll(self y);\n\n      animation-range:\n        0 var(--lobe-scroll-area-fade-size),\n        calc(100% - var(--lobe-scroll-area-fade-size)) 100%;\n    }\n  `,\n\n  viewportFadeHorizontal: css`\n    --scroll-area-overflow-x-start: inherit;\n    --scroll-area-overflow-x-end: inherit;\n    --lobe-scroll-area-fade-size: 40px;\n    --lobe-scroll-area-fade-left: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-x-start, 0px)\n    );\n    --lobe-scroll-area-fade-right: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-x-end, 0px)\n    );\n\n    /* Fade the CONTENT via mask, so it works on background images too. */\n    mask-image: linear-gradient(\n      to right,\n      transparent 0,\n      #000 var(--lobe-scroll-area-fade-left),\n      #000 calc(100% - var(--lobe-scroll-area-fade-right)),\n      transparent 100%\n    );\n    mask-repeat: no-repeat;\n    mask-size: 100% 100%;\n\n    /* Scroll-driven animation: use scroll position to drive the mask. */\n    @supports (animation-timeline: scroll()) {\n      /*\n       * Important: drive fade by *distance to edges* (first/last 40px),\n       * so reaching start/end doesn't cause a sudden snap.\n       */\n      @keyframes lobe-scroll-area-fade-left-in {\n        from {\n          --lobe-scroll-area-fade-left: 0;\n        }\n\n        to {\n          --lobe-scroll-area-fade-left: var(--lobe-scroll-area-fade-size);\n        }\n      }\n\n      @keyframes lobe-scroll-area-fade-right-out {\n        from {\n          --lobe-scroll-area-fade-right: var(--lobe-scroll-area-fade-size);\n        }\n\n        to {\n          --lobe-scroll-area-fade-right: 0;\n        }\n      }\n\n      animation-name: lobe-scroll-area-fade-left-in, lobe-scroll-area-fade-right-out;\n      animation-duration: 1ms, 1ms;\n      animation-timing-function: linear, linear;\n      animation-fill-mode: both, both;\n      animation-timeline: scroll(self x), scroll(self x);\n\n      animation-range:\n        0 var(--lobe-scroll-area-fade-size),\n        calc(100% - var(--lobe-scroll-area-fade-size)) 100%;\n    }\n  `,\n\n  viewportFadeBoth: css`\n    --scroll-area-overflow-x-start: inherit;\n    --scroll-area-overflow-x-end: inherit;\n    --scroll-area-overflow-y-start: inherit;\n    --scroll-area-overflow-y-end: inherit;\n    --lobe-scroll-area-fade-size: 40px;\n    --lobe-scroll-area-fade-top: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-y-start, 0px)\n    );\n    --lobe-scroll-area-fade-bottom: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-y-end, 0px)\n    );\n    --lobe-scroll-area-fade-left: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-x-start, 0px)\n    );\n    --lobe-scroll-area-fade-right: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-x-end, 0px)\n    );\n\n    mask-composite: intersect;\n\n    /*\n     * Combine vertical + horizontal fades by intersecting two gradient masks\n     * so the four corners stay transparent only when both axes overflow.\n     */\n    mask-image:\n      linear-gradient(\n        to bottom,\n        transparent 0,\n        #000 var(--lobe-scroll-area-fade-top),\n        #000 calc(100% - var(--lobe-scroll-area-fade-bottom)),\n        transparent 100%\n      ),\n      linear-gradient(\n        to right,\n        transparent 0,\n        #000 var(--lobe-scroll-area-fade-left),\n        #000 calc(100% - var(--lobe-scroll-area-fade-right)),\n        transparent 100%\n      );\n    mask-repeat: no-repeat, no-repeat;\n    mask-size:\n      100% 100%,\n      100% 100%;\n\n    @supports (animation-timeline: scroll()) {\n      @keyframes lobe-scroll-area-fade-top-in-both {\n        from {\n          --lobe-scroll-area-fade-top: 0;\n        }\n\n        to {\n          --lobe-scroll-area-fade-top: var(--lobe-scroll-area-fade-size);\n        }\n      }\n\n      @keyframes lobe-scroll-area-fade-bottom-out-both {\n        from {\n          --lobe-scroll-area-fade-bottom: var(--lobe-scroll-area-fade-size);\n        }\n\n        to {\n          --lobe-scroll-area-fade-bottom: 0;\n        }\n      }\n\n      @keyframes lobe-scroll-area-fade-left-in-both {\n        from {\n          --lobe-scroll-area-fade-left: 0;\n        }\n\n        to {\n          --lobe-scroll-area-fade-left: var(--lobe-scroll-area-fade-size);\n        }\n      }\n\n      @keyframes lobe-scroll-area-fade-right-out-both {\n        from {\n          --lobe-scroll-area-fade-right: var(--lobe-scroll-area-fade-size);\n        }\n\n        to {\n          --lobe-scroll-area-fade-right: 0;\n        }\n      }\n\n      animation-name:\n        lobe-scroll-area-fade-top-in-both, lobe-scroll-area-fade-bottom-out-both,\n        lobe-scroll-area-fade-left-in-both, lobe-scroll-area-fade-right-out-both;\n      animation-duration: 1ms, 1ms, 1ms, 1ms;\n      animation-timing-function: linear, linear, linear, linear;\n      animation-fill-mode: both, both, both, both;\n      animation-timeline: scroll(self y), scroll(self y), scroll(self x), scroll(self x);\n\n      animation-range:\n        0 var(--lobe-scroll-area-fade-size),\n        calc(100% - var(--lobe-scroll-area-fade-size)) 100%,\n        0 var(--lobe-scroll-area-fade-size),\n        calc(100% - var(--lobe-scroll-area-fade-size)) 100%;\n    }\n  `,\n}));\n"],"mappings":";;;AAIA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,SAAS,GAAG;;;;;iBAKG,OAAO,WAAW;;aAEtB,OAAO,UAAU;;CAG5B,QAAQ,GAAG;kBACK,OAAO,mBAAmB;;CAG1C,MAAM,GAAG;;;;CAKT,WAAW,GAAG;;;;qBAIK,OAAO,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CzC,OAAO,GAAG;;;;kBAIM,OAAO,oBAAoB;;CAG3C,UAAU,GAAG;;;;;MAKT,UAAU;;CAGd,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8DjB,wBAAwB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8D3B,kBAAkB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyGvB,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/ScrollArea/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nimport { focusRing } from '@/base-ui/focusRing';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  content: css`\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n\n    font-size: ${cssVar.fontSizeSM};\n    line-height: 1.375rem;\n    color: ${cssVar.colorText};\n  `,\n\n  corner: css`\n    background: ${cssVar.colorFillSecondary};\n  `,\n\n  root: css`\n    position: relative;\n    box-sizing: border-box;\n  `,\n\n  scrollbar: css`\n    pointer-events: none;\n\n    margin: 8px;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    opacity: 0;\n    background: transparent;\n\n    transition: opacity 150ms;\n\n    &::before {\n      content: '';\n      position: absolute;\n    }\n\n    &[data-scrolling] {\n      transition-duration: 0ms;\n    }\n\n    &[data-hovering],\n    &[data-scrolling] {\n      pointer-events: auto;\n      opacity: 1;\n    }\n\n    &[data-orientation='vertical'] {\n      width: 4px;\n\n      &::before {\n        inset-inline-start: 50%;\n        transform: translateX(-50%);\n        width: 20px;\n        height: 100%;\n      }\n    }\n\n    &[data-orientation='horizontal'] {\n      height: 4px;\n\n      &::before {\n        inset-block-end: -8px;\n        inset-inline: 0;\n        width: 100%;\n        height: 20px;\n      }\n    }\n  `,\n\n  thumb: css`\n    width: 100%;\n    height: 100%;\n    border-radius: inherit;\n    background: ${cssVar.colorTextQuaternary};\n  `,\n\n  viewport: css`\n    position: relative;\n    overscroll-behavior: auto;\n    height: 100%;\n    outline: none;\n\n    ${focusRing};\n  `,\n\n  viewportFade: css`\n    --scroll-area-overflow-y-start: inherit;\n    --scroll-area-overflow-y-end: inherit;\n    --lobe-scroll-area-fade-size: 40px;\n    --lobe-scroll-area-fade-top: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-y-start, 0px)\n    );\n    --lobe-scroll-area-fade-bottom: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-y-end, 0px)\n    );\n\n    /* Fade the CONTENT via mask, so it works on background images too. */\n    mask-image: linear-gradient(\n      to bottom,\n      transparent 0,\n      #000 var(--lobe-scroll-area-fade-top),\n      #000 calc(100% - var(--lobe-scroll-area-fade-bottom)),\n      transparent 100%\n    );\n    mask-repeat: no-repeat;\n    mask-size: 100% 100%;\n\n    /* Scroll-driven animation: use scroll position to drive the mask. */\n    @supports (animation-timeline: scroll()) {\n      /*\n       * Important: drive fade by *distance to edges* (first/last 40px),\n       * so reaching top/bottom doesn't cause a sudden snap.\n       */\n      @keyframes lobe-scroll-area-fade-top-in {\n        from {\n          --lobe-scroll-area-fade-top: 0;\n        }\n\n        to {\n          --lobe-scroll-area-fade-top: var(--lobe-scroll-area-fade-size);\n        }\n      }\n\n      @keyframes lobe-scroll-area-fade-bottom-out {\n        from {\n          --lobe-scroll-area-fade-bottom: var(--lobe-scroll-area-fade-size);\n        }\n\n        to {\n          --lobe-scroll-area-fade-bottom: 0;\n        }\n      }\n\n      animation-name: lobe-scroll-area-fade-top-in, lobe-scroll-area-fade-bottom-out;\n      animation-duration: 1ms, 1ms;\n      animation-timing-function: linear, linear;\n      animation-fill-mode: both, both;\n      animation-timeline: scroll(self y), scroll(self y);\n\n      animation-range:\n        0 var(--lobe-scroll-area-fade-size),\n        calc(100% - var(--lobe-scroll-area-fade-size)) 100%;\n    }\n  `,\n\n  viewportFadeHorizontal: css`\n    --scroll-area-overflow-x-start: inherit;\n    --scroll-area-overflow-x-end: inherit;\n    --lobe-scroll-area-fade-size: 40px;\n    --lobe-scroll-area-fade-left: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-x-start, 0px)\n    );\n    --lobe-scroll-area-fade-right: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-x-end, 0px)\n    );\n\n    /* Fade the CONTENT via mask, so it works on background images too. */\n    mask-image: linear-gradient(\n      to right,\n      transparent 0,\n      #000 var(--lobe-scroll-area-fade-left),\n      #000 calc(100% - var(--lobe-scroll-area-fade-right)),\n      transparent 100%\n    );\n    mask-repeat: no-repeat;\n    mask-size: 100% 100%;\n\n    /* Scroll-driven animation: use scroll position to drive the mask. */\n    @supports (animation-timeline: scroll()) {\n      /*\n       * Important: drive fade by *distance to edges* (first/last 40px),\n       * so reaching start/end doesn't cause a sudden snap.\n       */\n      @keyframes lobe-scroll-area-fade-left-in {\n        from {\n          --lobe-scroll-area-fade-left: 0;\n        }\n\n        to {\n          --lobe-scroll-area-fade-left: var(--lobe-scroll-area-fade-size);\n        }\n      }\n\n      @keyframes lobe-scroll-area-fade-right-out {\n        from {\n          --lobe-scroll-area-fade-right: var(--lobe-scroll-area-fade-size);\n        }\n\n        to {\n          --lobe-scroll-area-fade-right: 0;\n        }\n      }\n\n      animation-name: lobe-scroll-area-fade-left-in, lobe-scroll-area-fade-right-out;\n      animation-duration: 1ms, 1ms;\n      animation-timing-function: linear, linear;\n      animation-fill-mode: both, both;\n      animation-timeline: scroll(self x), scroll(self x);\n\n      animation-range:\n        0 var(--lobe-scroll-area-fade-size),\n        calc(100% - var(--lobe-scroll-area-fade-size)) 100%;\n    }\n  `,\n\n  viewportFadeBoth: css`\n    --scroll-area-overflow-x-start: inherit;\n    --scroll-area-overflow-x-end: inherit;\n    --scroll-area-overflow-y-start: inherit;\n    --scroll-area-overflow-y-end: inherit;\n    --lobe-scroll-area-fade-size: 40px;\n    --lobe-scroll-area-fade-top: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-y-start, 0px)\n    );\n    --lobe-scroll-area-fade-bottom: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-y-end, 0px)\n    );\n    --lobe-scroll-area-fade-left: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-x-start, 0px)\n    );\n    --lobe-scroll-area-fade-right: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-x-end, 0px)\n    );\n\n    mask-composite: intersect;\n\n    /*\n     * Combine vertical + horizontal fades by intersecting two gradient masks\n     * so the four corners stay transparent only when both axes overflow.\n     */\n    mask-image:\n      linear-gradient(\n        to bottom,\n        transparent 0,\n        #000 var(--lobe-scroll-area-fade-top),\n        #000 calc(100% - var(--lobe-scroll-area-fade-bottom)),\n        transparent 100%\n      ),\n      linear-gradient(\n        to right,\n        transparent 0,\n        #000 var(--lobe-scroll-area-fade-left),\n        #000 calc(100% - var(--lobe-scroll-area-fade-right)),\n        transparent 100%\n      );\n    mask-repeat: no-repeat, no-repeat;\n    mask-size:\n      100% 100%,\n      100% 100%;\n\n    @supports (animation-timeline: scroll()) {\n      @keyframes lobe-scroll-area-fade-top-in-both {\n        from {\n          --lobe-scroll-area-fade-top: 0;\n        }\n\n        to {\n          --lobe-scroll-area-fade-top: var(--lobe-scroll-area-fade-size);\n        }\n      }\n\n      @keyframes lobe-scroll-area-fade-bottom-out-both {\n        from {\n          --lobe-scroll-area-fade-bottom: var(--lobe-scroll-area-fade-size);\n        }\n\n        to {\n          --lobe-scroll-area-fade-bottom: 0;\n        }\n      }\n\n      @keyframes lobe-scroll-area-fade-left-in-both {\n        from {\n          --lobe-scroll-area-fade-left: 0;\n        }\n\n        to {\n          --lobe-scroll-area-fade-left: var(--lobe-scroll-area-fade-size);\n        }\n      }\n\n      @keyframes lobe-scroll-area-fade-right-out-both {\n        from {\n          --lobe-scroll-area-fade-right: var(--lobe-scroll-area-fade-size);\n        }\n\n        to {\n          --lobe-scroll-area-fade-right: 0;\n        }\n      }\n\n      animation-name:\n        lobe-scroll-area-fade-top-in-both, lobe-scroll-area-fade-bottom-out-both,\n        lobe-scroll-area-fade-left-in-both, lobe-scroll-area-fade-right-out-both;\n      animation-duration: 1ms, 1ms, 1ms, 1ms;\n      animation-timing-function: linear, linear, linear, linear;\n      animation-fill-mode: both, both, both, both;\n      animation-timeline: scroll(self y), scroll(self y), scroll(self x), scroll(self x);\n\n      animation-range:\n        0 var(--lobe-scroll-area-fade-size),\n        calc(100% - var(--lobe-scroll-area-fade-size)) 100%,\n        0 var(--lobe-scroll-area-fade-size),\n        calc(100% - var(--lobe-scroll-area-fade-size)) 100%;\n    }\n  `,\n}));\n"],"mappings":";;;AAIA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,SAAS,GAAG;;;;;iBAKG,OAAO,WAAW;;aAEtB,OAAO,UAAU;;CAG5B,QAAQ,GAAG;kBACK,OAAO,mBAAmB;;CAG1C,MAAM,GAAG;;;;CAKT,WAAW,GAAG;;;;qBAIK,OAAO,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CzC,OAAO,GAAG;;;;kBAIM,OAAO,oBAAoB;;CAG3C,UAAU,GAAG;;;;;;MAMT,UAAU;;CAGd,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8DjB,wBAAwB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8D3B,kBAAkB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyGvB,EAAE"}

package/es/base-ui/Text/style.d.mts

@@ -42,7 +42,7 @@ declare const variants: (props?: ({
   mark?: boolean | null | undefined;
   shiny?: boolean | null | undefined;
   strong?: boolean | null | undefined;
-  type?: "danger" | "warning" | "success" | "info" | "secondary" | null | undefined;
+  type?: "danger" | "success" | "info" | "warning" | "secondary" | null | undefined;
   underline?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion

package/es/base-ui/Toast/dodge.mjs

@@ -0,0 +1,51 @@
+const TOAST_DODGE_DURATION = "608ms";
+const TOAST_DODGE_EASE = "linear(0, 0.08, 0.249, 0.437, 0.607, 0.745, 0.847, 0.917, 0.963, 0.99, 1.004, 1.011, 1.012, 1.011, 1.009, 1.007, 1.005, 1.003, 1.002, 1)";
+const TOAST_SHIFT_X_VAR = "--toast-shift-x";
+const TOAST_SHIFT_Y_VAR = "--toast-shift-y";
+const TOAST_WIDTH_VAR = "--toast-width";
+const PANEL_RESERVE_VAR = "--floating-panel-reserve-block-end";
+const PANEL_ALIGN_INLINE_VAR = "--floating-panel-reserve-inline-end";
+const resolveToastDodge = ({ panelHeight, panelOffsetX, panelOffsetY, panelWidth, viewportHeight, viewportWidth }) => {
+	const shiftX = Math.max(0, panelWidth + panelOffsetX + 12 - 16);
+	const shiftY = Math.max(0, panelHeight + panelOffsetY + 12 - 16);
+	const lane = viewportWidth - shiftX - 32;
+	const headroom = viewportHeight - shiftY - 32;
+	const alignBlock = Math.max(0, 16 - panelOffsetY);
+	const alignInline = Math.max(0, 16 - panelOffsetX);
+	if (lane >= 360) return {
+		alignInline: 0,
+		mode: "left",
+		reserve: alignBlock,
+		shiftX,
+		shiftY: 0,
+		width: 360
+	};
+	if (headroom >= 88) return {
+		alignInline,
+		mode: "up",
+		reserve: 0,
+		shiftX: 0,
+		shiftY,
+		width: 360
+	};
+	if (lane >= 260) return {
+		alignInline: 0,
+		mode: "shrink",
+		reserve: alignBlock,
+		shiftX,
+		shiftY: 0,
+		width: lane
+	};
+	return {
+		alignInline,
+		mode: "reserve",
+		reserve: Math.max(0, 116 - panelOffsetY),
+		shiftX: 0,
+		shiftY: 0,
+		width: 360
+	};
+};
+//#endregion
+export { PANEL_ALIGN_INLINE_VAR, PANEL_RESERVE_VAR, TOAST_DODGE_DURATION, TOAST_DODGE_EASE, TOAST_SHIFT_X_VAR, TOAST_SHIFT_Y_VAR, TOAST_WIDTH_VAR, resolveToastDodge };
+
+//# sourceMappingURL=dodge.mjs.map

package/es/base-ui/Toast/dodge.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dodge.mjs","names":[],"sources":["../../../src/base-ui/Toast/dodge.ts"],"sourcesContent":["export const TOAST_WIDTH = 360;\nexport const TOAST_MIN_WIDTH = 260;\nexport const TOAST_EDGE = 16;\nexport const TOAST_ROW_HEIGHT = 88;\nexport const TOAST_DODGE_GUTTER = 12;\n\n// Spring baked as linear(): stiffness 460 / damping 53 / mass 2.3, zeta ~0.81\n// with 1.2% overshoot. The duration is the spring's settle time — change them\n// together with the curve, not independently.\nexport const TOAST_DODGE_DURATION = '608ms';\nexport const TOAST_DODGE_EASE =\n  'linear(0, 0.08, 0.249, 0.437, 0.607, 0.745, 0.847, 0.917, 0.963, 0.99, 1.004, 1.011, 1.012, 1.011, 1.009, 1.007, 1.005, 1.003, 1.002, 1)';\n\nexport const TOAST_SHIFT_X_VAR = '--toast-shift-x';\nexport const TOAST_SHIFT_Y_VAR = '--toast-shift-y';\nexport const TOAST_WIDTH_VAR = '--toast-width';\nexport const PANEL_RESERVE_VAR = '--floating-panel-reserve-block-end';\nexport const PANEL_ALIGN_INLINE_VAR = '--floating-panel-reserve-inline-end';\n\nexport interface ToastDodgeInput {\n  panelHeight: number;\n  panelOffsetX: number;\n  panelOffsetY: number;\n  panelWidth: number;\n  viewportHeight: number;\n  viewportWidth: number;\n}\n\nexport type ToastDodgeMode = 'left' | 'reserve' | 'shrink' | 'up';\n\nexport interface ToastDodgeResult {\n  alignInline: number;\n  mode: ToastDodgeMode;\n  reserve: number;\n  shiftX: number;\n  shiftY: number;\n  width: number;\n}\n\nexport const resolveToastDodge = ({\n  panelHeight,\n  panelOffsetX,\n  panelOffsetY,\n  panelWidth,\n  viewportHeight,\n  viewportWidth,\n}: ToastDodgeInput): ToastDodgeResult => {\n  const shiftX = Math.max(0, panelWidth + panelOffsetX + TOAST_DODGE_GUTTER - TOAST_EDGE);\n  const shiftY = Math.max(0, panelHeight + panelOffsetY + TOAST_DODGE_GUTTER - TOAST_EDGE);\n  const lane = viewportWidth - shiftX - TOAST_EDGE * 2;\n  const headroom = viewportHeight - shiftY - TOAST_EDGE * 2;\n\n  // The panel sits closer to the edge than the toast does, so the pair reads as\n  // misaligned until the panel is pushed out to the toast's inset. Which axis\n  // needs it follows which edge the two end up sharing.\n  const alignBlock = Math.max(0, TOAST_EDGE - panelOffsetY);\n  const alignInline = Math.max(0, TOAST_EDGE - panelOffsetX);\n\n  if (lane >= TOAST_WIDTH) {\n    return {\n      alignInline: 0,\n      mode: 'left',\n      reserve: alignBlock,\n      shiftX,\n      shiftY: 0,\n      width: TOAST_WIDTH,\n    };\n  }\n\n  if (headroom >= TOAST_ROW_HEIGHT) {\n    return { alignInline, mode: 'up', reserve: 0, shiftX: 0, shiftY, width: TOAST_WIDTH };\n  }\n\n  if (lane >= TOAST_MIN_WIDTH) {\n    return { alignInline: 0, mode: 'shrink', reserve: alignBlock, shiftX, shiftY: 0, width: lane };\n  }\n\n  // ponytail: the reserve budget is one toast row, not the live stack height —\n  // measuring the stack would feed panel resizes back into the measurement.\n  // A taller stack overflows upward here; per-stack reserve if that shows up.\n  return {\n    alignInline,\n    mode: 'reserve',\n    reserve: Math.max(0, TOAST_EDGE + TOAST_ROW_HEIGHT + TOAST_DODGE_GUTTER - panelOffsetY),\n    shiftX: 0,\n    shiftY: 0,\n    width: TOAST_WIDTH,\n  };\n};\n"],"mappings":"AASA,MAAa,uBAAuB;AACpC,MAAa,mBACX;AAEF,MAAa,oBAAoB;AACjC,MAAa,oBAAoB;AACjC,MAAa,kBAAkB;AAC/B,MAAa,oBAAoB;AACjC,MAAa,yBAAyB;AAsBtC,MAAa,qBAAqB,EAChC,aACA,cACA,cACA,YACA,gBACA,oBACuC;CACvC,MAAM,SAAS,KAAK,IAAI,GAAG,aAAa,eAAA,KAAA,EAA8C;CACtF,MAAM,SAAS,KAAK,IAAI,GAAG,cAAc,eAAA,KAAA,EAA8C;CACvF,MAAM,OAAO,gBAAgB,SAAS;CACtC,MAAM,WAAW,iBAAiB,SAAS;CAK3C,MAAM,aAAa,KAAK,IAAI,GAAA,KAAgB,YAAY;CACxD,MAAM,cAAc,KAAK,IAAI,GAAA,KAAgB,YAAY;CAEzD,IAAI,QAAA,KACF,OAAO;EACL,aAAa;EACb,MAAM;EACN,SAAS;EACT;EACA,QAAQ;EACR,OAAA;CACF;CAGF,IAAI,YAAA,IACF,OAAO;EAAE;EAAa,MAAM;EAAM,SAAS;EAAG,QAAQ;EAAG;EAAQ,OAAA;CAAmB;CAGtF,IAAI,QAAA,KACF,OAAO;EAAE,aAAa;EAAG,MAAM;EAAU,SAAS;EAAY;EAAQ,QAAQ;EAAG,OAAO;CAAK;CAM/F,OAAO;EACL;EACA,MAAM;EACN,SAAS,KAAK,IAAI,GAAG,MAAqD,YAAY;EACtF,QAAQ;EACR,QAAQ;EACR,OAAA;CACF;AACF"}

package/es/base-ui/Toast/style.mjs

@@ -1,4 +1,5 @@
 import { focusRing, focusRingColor } from "../focusRing.mjs";
+import { TOAST_DODGE_DURATION, TOAST_DODGE_EASE } from "./dodge.mjs";
 import { createStaticStyles } from "antd-style";
 import { cva } from "class-variance-authority";
 //#region src/base-ui/Toast/style.ts
@@ -309,7 +310,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     position: fixed;
     z-index: 100000;
 
-    width: 360px;
+    width: var(--toast-width, 360px);
     max-width: calc(100vw - var(--toast-viewport-offset-x, 16px) * 2);
 
     outline: 0;
@@ -330,6 +331,18 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
 	viewportBottomRight: css`
     inset-block-end: var(--toast-viewport-offset-y, 16px);
     inset-inline-end: var(--toast-viewport-offset-x, 16px);
+
+    /* Percentages in translate() resolve against the element itself, not the
+       viewport, so the dodge offsets have to stay in px. */
+    transform: translate(
+      calc(-1 * var(--toast-shift-x, 0px)),
+      calc(-1 * var(--toast-shift-y, 0px))
+    );
+    transition: transform ${TOAST_DODGE_DURATION} ${TOAST_DODGE_EASE};
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   `,
 	viewportTop: css`
     inset-block-start: var(--toast-viewport-offset-y, 16px);

package/es/base-ui/Toast/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Toast/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { focusRing, focusRingColor } from '@/base-ui/focusRing';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  action: css`\n    cursor: pointer;\n\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n\n    height: 28px;\n    padding-inline: 12px;\n    border: none;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 1;\n\n    transition:\n      background 0.2s,\n      color 0.2s;\n\n    ${focusRing};\n  `,\n\n  actionDanger: css`\n    color: ${cssVar.colorBgLayout};\n    background: ${cssVar.colorError};\n\n    &:hover {\n      background: ${cssVar.colorErrorHover};\n    }\n\n    &:active {\n      background: ${cssVar.colorErrorActive};\n    }\n\n    ${focusRingColor(cssVar.colorError)};\n  `,\n\n  actionGhost: css`\n    border: 1px solid ${cssVar.colorBorder};\n    color: ${cssVar.colorText};\n    background: transparent;\n\n    &:hover {\n      border-color: ${cssVar.colorPrimary};\n      color: ${cssVar.colorPrimary};\n    }\n\n    &:active {\n      border-color: ${cssVar.colorPrimaryActive};\n      color: ${cssVar.colorPrimaryActive};\n    }\n  `,\n\n  actionPrimary: css`\n    color: ${cssVar.colorBgLayout};\n    background: ${cssVar.colorPrimary};\n\n    &:hover {\n      background: ${cssVar.colorPrimaryHover};\n    }\n\n    &:active {\n      background: ${cssVar.colorPrimaryActive};\n    }\n  `,\n\n  actionSecondary: css`\n    color: ${cssVar.colorText};\n    background: ${cssVar.colorFillSecondary};\n\n    &:hover {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &:active {\n      background: ${cssVar.colorFill};\n    }\n  `,\n\n  actionText: css`\n    color: ${cssVar.colorPrimary};\n    background: transparent;\n\n    &:hover {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &:active {\n      background: ${cssVar.colorFillSecondary};\n    }\n  `,\n\n  actions: css`\n    display: flex;\n    flex-grow: 1;\n    flex-shrink: 0;\n    gap: 8px;\n    align-items: center;\n    align-self: flex-end;\n    justify-content: flex-end;\n\n    margin-block-start: 8px;\n  `,\n\n  close: css`\n    cursor: pointer;\n\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n\n    width: 20px;\n    height: 20px;\n    margin-inline-start: auto;\n    padding: 0;\n    border: none;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    color: ${cssVar.colorTextSecondary};\n\n    background: transparent;\n\n    transition: all 0.2s;\n\n    &:hover {\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n  `,\n\n  content: css`\n    overflow: hidden;\n    transition: opacity 0.2s;\n\n    &[data-behind] {\n      pointer-events: none;\n      opacity: 0;\n    }\n\n    &[data-expanded] {\n      pointer-events: auto;\n      opacity: 1;\n    }\n  `,\n\n  contentArea: css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    min-width: 0;\n  `,\n\n  description: css`\n    margin: 0;\n    font-size: 13px;\n    line-height: 1.5;\n    color: ${cssVar.colorTextSecondary};\n  `,\n\n  descriptionStandalone: css`\n    color: ${cssVar.colorText};\n  `,\n\n  icon: css`\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n  `,\n\n  root: css`\n    --toast-gap: 12px;\n    --toast-peek: 12px;\n    --toast-scale: calc(1 - var(--toast-index) * 0.05);\n    --toast-shrink: calc(1 - var(--toast-scale));\n    --toast-collapsed-height: var(--toast-frontmost-height, var(--toast-height));\n\n    cursor: default;\n    user-select: none;\n\n    position: absolute;\n    z-index: calc(1000 - var(--toast-index));\n    inset-inline: 0;\n\n    box-sizing: border-box;\n    width: 100%;\n    height: var(--toast-collapsed-height);\n    padding-block: 12px;\n    padding-inline: 16px;\n    border-radius: var(--toast-border-radius, ${cssVar.borderRadiusLG});\n\n    color: ${cssVar.colorText};\n\n    background: ${cssVar.colorBgElevated};\n    background-clip: padding-box;\n    box-shadow:\n      0 0 0 1px ${cssVar.colorBorderSecondary},\n      0 4px 12px rgb(0 0 0 / 10%),\n      0 16px 32px -8px rgb(0 0 0 / 12%);\n\n    transition:\n      transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),\n      opacity 0.4s,\n      height 0.15s;\n\n    /* Fill gap between stacked toasts to prevent hover flicker */\n    &::after {\n      content: '';\n      position: absolute;\n      inset-inline: 0;\n      height: calc(var(--toast-gap) + var(--toast-peek) + 8px);\n    }\n\n    &[data-limited] {\n      opacity: 0;\n    }\n\n    &[data-swiping] {\n      transition: none;\n    }\n  `,\n\n  // Bottom positions - stack upward\n  rootBottom: css`\n    inset-block: auto 0;\n    transform-origin: bottom center;\n    transform: translateX(var(--toast-swipe-movement-x))\n      translateY(\n        calc(\n          var(--toast-swipe-movement-y) - (var(--toast-index) * var(--toast-peek)) -\n            (var(--toast-shrink) * var(--toast-collapsed-height))\n        )\n      )\n      scale(var(--toast-scale));\n\n    &::after {\n      inset-block-start: 100%;\n    }\n\n    &[data-expanded] {\n      transform: translateX(var(--toast-swipe-movement-x))\n        translateY(\n          calc(\n            var(--toast-swipe-movement-y) + var(--toast-offset-y) * -1 + var(--toast-index) *\n              var(--toast-gap) * -1\n          )\n        )\n        scale(1);\n      height: var(--toast-height);\n    }\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: translateY(150%);\n      opacity: 0;\n    }\n  `,\n\n  // Top positions - stack downward\n  rootTop: css`\n    inset-block: 0 auto;\n    transform-origin: top center;\n    transform: translateX(var(--toast-swipe-movement-x))\n      translateY(\n        calc(\n          var(--toast-swipe-movement-y) + (var(--toast-index) * var(--toast-peek)) +\n            (var(--toast-shrink) * var(--toast-collapsed-height))\n        )\n      )\n      scale(var(--toast-scale));\n\n    &::after {\n      inset-block-end: 100%;\n    }\n\n    &[data-expanded] {\n      transform: translateX(var(--toast-swipe-movement-x))\n        translateY(\n          calc(\n            var(--toast-swipe-movement-y) + var(--toast-offset-y) + var(--toast-index) *\n              var(--toast-gap)\n          )\n        )\n        scale(1);\n      height: var(--toast-height);\n    }\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: translateY(-150%);\n      opacity: 0;\n    }\n  `,\n\n  title: css`\n    margin: 0;\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 1.5;\n    color: ${cssVar.colorText};\n  `,\n\n  titleRow: css`\n    display: flex;\n    gap: 8px;\n    align-items: flex-start;\n  `,\n\n  toastBody: css`\n    display: flex;\n    gap: 12px;\n    align-items: flex-start;\n  `,\n\n  toastBodyCenter: css`\n    display: flex;\n    gap: 12px;\n    align-items: flex-start;\n  `,\n\n  viewport: css`\n    position: fixed;\n    z-index: 100000;\n\n    width: 360px;\n    max-width: calc(100vw - var(--toast-viewport-offset-x, 16px) * 2);\n\n    outline: 0;\n\n    @media (width <= 480px) {\n      width: calc(100vw - var(--toast-viewport-offset-x, 16px) * 2);\n    }\n  `,\n\n  viewportBottom: css`\n    inset-block-end: var(--toast-viewport-offset-y, 16px);\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n  `,\n\n  viewportBottomLeft: css`\n    inset-block-end: var(--toast-viewport-offset-y, 16px);\n    inset-inline-start: var(--toast-viewport-offset-x, 16px);\n  `,\n\n  viewportBottomRight: css`\n    inset-block-end: var(--toast-viewport-offset-y, 16px);\n    inset-inline-end: var(--toast-viewport-offset-x, 16px);\n  `,\n\n  viewportTop: css`\n    inset-block-start: var(--toast-viewport-offset-y, 16px);\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n  `,\n\n  viewportTopLeft: css`\n    inset-block-start: var(--toast-viewport-offset-y, 16px);\n    inset-inline-start: var(--toast-viewport-offset-x, 16px);\n  `,\n\n  viewportTopRight: css`\n    inset-block-start: var(--toast-viewport-offset-y, 16px);\n    inset-inline-end: var(--toast-viewport-offset-x, 16px);\n  `,\n}));\n\nexport const viewportVariants = cva(styles.viewport, {\n  defaultVariants: {\n    position: 'bottom-right',\n  },\n  variants: {\n    position: {\n      'bottom': styles.viewportBottom,\n      'bottom-left': styles.viewportBottomLeft,\n      'bottom-right': styles.viewportBottomRight,\n      'top': styles.viewportTop,\n      'top-left': styles.viewportTopLeft,\n      'top-right': styles.viewportTopRight,\n    },\n  },\n});\n\nexport const rootVariants = cva(styles.root, {\n  defaultVariants: {\n    position: 'bottom-right',\n  },\n  variants: {\n    position: {\n      'bottom': styles.rootBottom,\n      'bottom-left': styles.rootBottom,\n      'bottom-right': styles.rootBottom,\n      'top': styles.rootTop,\n      'top-left': styles.rootTop,\n      'top-right': styles.rootTop,\n    },\n  },\n});\n\nexport const actionVariants = cva(styles.action, {\n  defaultVariants: {\n    variant: 'primary',\n  },\n  variants: {\n    variant: {\n      danger: styles.actionDanger,\n      ghost: styles.actionGhost,\n      primary: styles.actionPrimary,\n      secondary: styles.actionSecondary,\n      text: styles.actionText,\n    },\n  },\n});\n"],"mappings":";;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,QAAQ,GAAG;;;;;;;;;;;qBAWQ,OAAO,eAAe;;;;;;;;;;MAUrC,UAAU;;CAGd,cAAc,GAAG;aACN,OAAO,cAAc;kBAChB,OAAO,WAAW;;;oBAGhB,OAAO,gBAAgB;;;;oBAIvB,OAAO,iBAAiB;;;MAGtC,eAAe,OAAO,UAAU,EAAE;;CAGtC,aAAa,GAAG;wBACM,OAAO,YAAY;aAC9B,OAAO,UAAU;;;;sBAIR,OAAO,aAAa;eAC3B,OAAO,aAAa;;;;sBAIb,OAAO,mBAAmB;eACjC,OAAO,mBAAmB;;;CAIvC,eAAe,GAAG;aACP,OAAO,cAAc;kBAChB,OAAO,aAAa;;;oBAGlB,OAAO,kBAAkB;;;;oBAIzB,OAAO,mBAAmB;;;CAI5C,iBAAiB,GAAG;aACT,OAAO,UAAU;kBACZ,OAAO,mBAAmB;;;oBAGxB,OAAO,kBAAkB;;;;oBAIzB,OAAO,UAAU;;;CAInC,YAAY,GAAG;aACJ,OAAO,aAAa;;;;oBAIb,OAAO,kBAAkB;;;;oBAIzB,OAAO,mBAAmB;;;CAI5C,SAAS,GAAG;;;;;;;;;;;CAYZ,OAAO,GAAG;;;;;;;;;;;;;qBAaS,OAAO,eAAe;;aAE9B,OAAO,mBAAmB;;;;;;;eAOxB,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;CAI5C,SAAS,GAAG;;;;;;;;;;;;;;CAeZ,aAAa,GAAG;;;;;;CAOhB,aAAa,GAAG;;;;aAIL,OAAO,mBAAmB;;CAGrC,uBAAuB,GAAG;aACf,OAAO,UAAU;;CAG5B,MAAM,GAAG;;;;;;CAOT,MAAM,GAAG;;;;;;;;;;;;;;;;;;;gDAmBqC,OAAO,eAAe;;aAEzD,OAAO,UAAU;;kBAEZ,OAAO,gBAAgB;;;kBAGvB,OAAO,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;CA2B5C,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCf,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCZ,OAAO,GAAG;;;;;;aAMC,OAAO,UAAU;;CAG5B,UAAU,GAAG;;;;;CAMb,WAAW,GAAG;;;;;CAMd,iBAAiB,GAAG;;;;;CAMpB,UAAU,GAAG;;;;;;;;;;;;;CAcb,gBAAgB,GAAG;;;;;CAMnB,oBAAoB,GAAG;;;;CAKvB,qBAAqB,GAAG;;;;CAKxB,aAAa,GAAG;;;;;CAMhB,iBAAiB,GAAG;;;;CAKpB,kBAAkB,GAAG;;;;AAIvB,EAAE;AAEF,MAAa,mBAAmB,IAAI,OAAO,UAAU;CACnD,iBAAiB,EACf,UAAU,eACZ;CACA,UAAU,EACR,UAAU;EACR,UAAU,OAAO;EACjB,eAAe,OAAO;EACtB,gBAAgB,OAAO;EACvB,OAAO,OAAO;EACd,YAAY,OAAO;EACnB,aAAa,OAAO;CACtB,EACF;AACF,CAAC;AAED,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB,EACf,UAAU,eACZ;CACA,UAAU,EACR,UAAU;EACR,UAAU,OAAO;EACjB,eAAe,OAAO;EACtB,gBAAgB,OAAO;EACvB,OAAO,OAAO;EACd,YAAY,OAAO;EACnB,aAAa,OAAO;CACtB,EACF;AACF,CAAC;AAED,MAAa,iBAAiB,IAAI,OAAO,QAAQ;CAC/C,iBAAiB,EACf,SAAS,UACX;CACA,UAAU,EACR,SAAS;EACP,QAAQ,OAAO;EACf,OAAO,OAAO;EACd,SAAS,OAAO;EAChB,WAAW,OAAO;EAClB,MAAM,OAAO;CACf,EACF;AACF,CAAC"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Toast/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { focusRing, focusRingColor } from '@/base-ui/focusRing';\n\nimport { TOAST_DODGE_DURATION, TOAST_DODGE_EASE } from './dodge';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  action: css`\n    cursor: pointer;\n\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n\n    height: 28px;\n    padding-inline: 12px;\n    border: none;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 1;\n\n    transition:\n      background 0.2s,\n      color 0.2s;\n\n    ${focusRing};\n  `,\n\n  actionDanger: css`\n    color: ${cssVar.colorBgLayout};\n    background: ${cssVar.colorError};\n\n    &:hover {\n      background: ${cssVar.colorErrorHover};\n    }\n\n    &:active {\n      background: ${cssVar.colorErrorActive};\n    }\n\n    ${focusRingColor(cssVar.colorError)};\n  `,\n\n  actionGhost: css`\n    border: 1px solid ${cssVar.colorBorder};\n    color: ${cssVar.colorText};\n    background: transparent;\n\n    &:hover {\n      border-color: ${cssVar.colorPrimary};\n      color: ${cssVar.colorPrimary};\n    }\n\n    &:active {\n      border-color: ${cssVar.colorPrimaryActive};\n      color: ${cssVar.colorPrimaryActive};\n    }\n  `,\n\n  actionPrimary: css`\n    color: ${cssVar.colorBgLayout};\n    background: ${cssVar.colorPrimary};\n\n    &:hover {\n      background: ${cssVar.colorPrimaryHover};\n    }\n\n    &:active {\n      background: ${cssVar.colorPrimaryActive};\n    }\n  `,\n\n  actionSecondary: css`\n    color: ${cssVar.colorText};\n    background: ${cssVar.colorFillSecondary};\n\n    &:hover {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &:active {\n      background: ${cssVar.colorFill};\n    }\n  `,\n\n  actionText: css`\n    color: ${cssVar.colorPrimary};\n    background: transparent;\n\n    &:hover {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &:active {\n      background: ${cssVar.colorFillSecondary};\n    }\n  `,\n\n  actions: css`\n    display: flex;\n    flex-grow: 1;\n    flex-shrink: 0;\n    gap: 8px;\n    align-items: center;\n    align-self: flex-end;\n    justify-content: flex-end;\n\n    margin-block-start: 8px;\n  `,\n\n  close: css`\n    cursor: pointer;\n\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n\n    width: 20px;\n    height: 20px;\n    margin-inline-start: auto;\n    padding: 0;\n    border: none;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    color: ${cssVar.colorTextSecondary};\n\n    background: transparent;\n\n    transition: all 0.2s;\n\n    &:hover {\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n  `,\n\n  content: css`\n    overflow: hidden;\n    transition: opacity 0.2s;\n\n    &[data-behind] {\n      pointer-events: none;\n      opacity: 0;\n    }\n\n    &[data-expanded] {\n      pointer-events: auto;\n      opacity: 1;\n    }\n  `,\n\n  contentArea: css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    min-width: 0;\n  `,\n\n  description: css`\n    margin: 0;\n    font-size: 13px;\n    line-height: 1.5;\n    color: ${cssVar.colorTextSecondary};\n  `,\n\n  descriptionStandalone: css`\n    color: ${cssVar.colorText};\n  `,\n\n  icon: css`\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n  `,\n\n  root: css`\n    --toast-gap: 12px;\n    --toast-peek: 12px;\n    --toast-scale: calc(1 - var(--toast-index) * 0.05);\n    --toast-shrink: calc(1 - var(--toast-scale));\n    --toast-collapsed-height: var(--toast-frontmost-height, var(--toast-height));\n\n    cursor: default;\n    user-select: none;\n\n    position: absolute;\n    z-index: calc(1000 - var(--toast-index));\n    inset-inline: 0;\n\n    box-sizing: border-box;\n    width: 100%;\n    height: var(--toast-collapsed-height);\n    padding-block: 12px;\n    padding-inline: 16px;\n    border-radius: var(--toast-border-radius, ${cssVar.borderRadiusLG});\n\n    color: ${cssVar.colorText};\n\n    background: ${cssVar.colorBgElevated};\n    background-clip: padding-box;\n    box-shadow:\n      0 0 0 1px ${cssVar.colorBorderSecondary},\n      0 4px 12px rgb(0 0 0 / 10%),\n      0 16px 32px -8px rgb(0 0 0 / 12%);\n\n    transition:\n      transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),\n      opacity 0.4s,\n      height 0.15s;\n\n    /* Fill gap between stacked toasts to prevent hover flicker */\n    &::after {\n      content: '';\n      position: absolute;\n      inset-inline: 0;\n      height: calc(var(--toast-gap) + var(--toast-peek) + 8px);\n    }\n\n    &[data-limited] {\n      opacity: 0;\n    }\n\n    &[data-swiping] {\n      transition: none;\n    }\n  `,\n\n  // Bottom positions - stack upward\n  rootBottom: css`\n    inset-block: auto 0;\n    transform-origin: bottom center;\n    transform: translateX(var(--toast-swipe-movement-x))\n      translateY(\n        calc(\n          var(--toast-swipe-movement-y) - (var(--toast-index) * var(--toast-peek)) -\n            (var(--toast-shrink) * var(--toast-collapsed-height))\n        )\n      )\n      scale(var(--toast-scale));\n\n    &::after {\n      inset-block-start: 100%;\n    }\n\n    &[data-expanded] {\n      transform: translateX(var(--toast-swipe-movement-x))\n        translateY(\n          calc(\n            var(--toast-swipe-movement-y) + var(--toast-offset-y) * -1 + var(--toast-index) *\n              var(--toast-gap) * -1\n          )\n        )\n        scale(1);\n      height: var(--toast-height);\n    }\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: translateY(150%);\n      opacity: 0;\n    }\n  `,\n\n  // Top positions - stack downward\n  rootTop: css`\n    inset-block: 0 auto;\n    transform-origin: top center;\n    transform: translateX(var(--toast-swipe-movement-x))\n      translateY(\n        calc(\n          var(--toast-swipe-movement-y) + (var(--toast-index) * var(--toast-peek)) +\n            (var(--toast-shrink) * var(--toast-collapsed-height))\n        )\n      )\n      scale(var(--toast-scale));\n\n    &::after {\n      inset-block-end: 100%;\n    }\n\n    &[data-expanded] {\n      transform: translateX(var(--toast-swipe-movement-x))\n        translateY(\n          calc(\n            var(--toast-swipe-movement-y) + var(--toast-offset-y) + var(--toast-index) *\n              var(--toast-gap)\n          )\n        )\n        scale(1);\n      height: var(--toast-height);\n    }\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: translateY(-150%);\n      opacity: 0;\n    }\n  `,\n\n  title: css`\n    margin: 0;\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 1.5;\n    color: ${cssVar.colorText};\n  `,\n\n  titleRow: css`\n    display: flex;\n    gap: 8px;\n    align-items: flex-start;\n  `,\n\n  toastBody: css`\n    display: flex;\n    gap: 12px;\n    align-items: flex-start;\n  `,\n\n  toastBodyCenter: css`\n    display: flex;\n    gap: 12px;\n    align-items: flex-start;\n  `,\n\n  viewport: css`\n    position: fixed;\n    z-index: 100000;\n\n    width: var(--toast-width, 360px);\n    max-width: calc(100vw - var(--toast-viewport-offset-x, 16px) * 2);\n\n    outline: 0;\n\n    @media (width <= 480px) {\n      width: calc(100vw - var(--toast-viewport-offset-x, 16px) * 2);\n    }\n  `,\n\n  viewportBottom: css`\n    inset-block-end: var(--toast-viewport-offset-y, 16px);\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n  `,\n\n  viewportBottomLeft: css`\n    inset-block-end: var(--toast-viewport-offset-y, 16px);\n    inset-inline-start: var(--toast-viewport-offset-x, 16px);\n  `,\n\n  viewportBottomRight: css`\n    inset-block-end: var(--toast-viewport-offset-y, 16px);\n    inset-inline-end: var(--toast-viewport-offset-x, 16px);\n\n    /* Percentages in translate() resolve against the element itself, not the\n       viewport, so the dodge offsets have to stay in px. */\n    transform: translate(\n      calc(-1 * var(--toast-shift-x, 0px)),\n      calc(-1 * var(--toast-shift-y, 0px))\n    );\n    transition: transform ${TOAST_DODGE_DURATION} ${TOAST_DODGE_EASE};\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  `,\n\n  viewportTop: css`\n    inset-block-start: var(--toast-viewport-offset-y, 16px);\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n  `,\n\n  viewportTopLeft: css`\n    inset-block-start: var(--toast-viewport-offset-y, 16px);\n    inset-inline-start: var(--toast-viewport-offset-x, 16px);\n  `,\n\n  viewportTopRight: css`\n    inset-block-start: var(--toast-viewport-offset-y, 16px);\n    inset-inline-end: var(--toast-viewport-offset-x, 16px);\n  `,\n}));\n\nexport const viewportVariants = cva(styles.viewport, {\n  defaultVariants: {\n    position: 'bottom-right',\n  },\n  variants: {\n    position: {\n      'bottom': styles.viewportBottom,\n      'bottom-left': styles.viewportBottomLeft,\n      'bottom-right': styles.viewportBottomRight,\n      'top': styles.viewportTop,\n      'top-left': styles.viewportTopLeft,\n      'top-right': styles.viewportTopRight,\n    },\n  },\n});\n\nexport const rootVariants = cva(styles.root, {\n  defaultVariants: {\n    position: 'bottom-right',\n  },\n  variants: {\n    position: {\n      'bottom': styles.rootBottom,\n      'bottom-left': styles.rootBottom,\n      'bottom-right': styles.rootBottom,\n      'top': styles.rootTop,\n      'top-left': styles.rootTop,\n      'top-right': styles.rootTop,\n    },\n  },\n});\n\nexport const actionVariants = cva(styles.action, {\n  defaultVariants: {\n    variant: 'primary',\n  },\n  variants: {\n    variant: {\n      danger: styles.actionDanger,\n      ghost: styles.actionGhost,\n      primary: styles.actionPrimary,\n      secondary: styles.actionSecondary,\n      text: styles.actionText,\n    },\n  },\n});\n"],"mappings":";;;;;AAOA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,QAAQ,GAAG;;;;;;;;;;;qBAWQ,OAAO,eAAe;;;;;;;;;;MAUrC,UAAU;;CAGd,cAAc,GAAG;aACN,OAAO,cAAc;kBAChB,OAAO,WAAW;;;oBAGhB,OAAO,gBAAgB;;;;oBAIvB,OAAO,iBAAiB;;;MAGtC,eAAe,OAAO,UAAU,EAAE;;CAGtC,aAAa,GAAG;wBACM,OAAO,YAAY;aAC9B,OAAO,UAAU;;;;sBAIR,OAAO,aAAa;eAC3B,OAAO,aAAa;;;;sBAIb,OAAO,mBAAmB;eACjC,OAAO,mBAAmB;;;CAIvC,eAAe,GAAG;aACP,OAAO,cAAc;kBAChB,OAAO,aAAa;;;oBAGlB,OAAO,kBAAkB;;;;oBAIzB,OAAO,mBAAmB;;;CAI5C,iBAAiB,GAAG;aACT,OAAO,UAAU;kBACZ,OAAO,mBAAmB;;;oBAGxB,OAAO,kBAAkB;;;;oBAIzB,OAAO,UAAU;;;CAInC,YAAY,GAAG;aACJ,OAAO,aAAa;;;;oBAIb,OAAO,kBAAkB;;;;oBAIzB,OAAO,mBAAmB;;;CAI5C,SAAS,GAAG;;;;;;;;;;;CAYZ,OAAO,GAAG;;;;;;;;;;;;;qBAaS,OAAO,eAAe;;aAE9B,OAAO,mBAAmB;;;;;;;eAOxB,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;CAI5C,SAAS,GAAG;;;;;;;;;;;;;;CAeZ,aAAa,GAAG;;;;;;CAOhB,aAAa,GAAG;;;;aAIL,OAAO,mBAAmB;;CAGrC,uBAAuB,GAAG;aACf,OAAO,UAAU;;CAG5B,MAAM,GAAG;;;;;;CAOT,MAAM,GAAG;;;;;;;;;;;;;;;;;;;gDAmBqC,OAAO,eAAe;;aAEzD,OAAO,UAAU;;kBAEZ,OAAO,gBAAgB;;;kBAGvB,OAAO,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;CA2B5C,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCf,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCZ,OAAO,GAAG;;;;;;aAMC,OAAO,UAAU;;CAG5B,UAAU,GAAG;;;;;CAMb,WAAW,GAAG;;;;;CAMd,iBAAiB,GAAG;;;;;CAMpB,UAAU,GAAG;;;;;;;;;;;;;CAcb,gBAAgB,GAAG;;;;;CAMnB,oBAAoB,GAAG;;;;CAKvB,qBAAqB,GAAG;;;;;;;;;;4BAUE,qBAAqB,GAAG,iBAAiB;;;;;;CAOnE,aAAa,GAAG;;;;;CAMhB,iBAAiB,GAAG;;;;CAKpB,kBAAkB,GAAG;;;;AAIvB,EAAE;AAEF,MAAa,mBAAmB,IAAI,OAAO,UAAU;CACnD,iBAAiB,EACf,UAAU,eACZ;CACA,UAAU,EACR,UAAU;EACR,UAAU,OAAO;EACjB,eAAe,OAAO;EACtB,gBAAgB,OAAO;EACvB,OAAO,OAAO;EACd,YAAY,OAAO;EACnB,aAAa,OAAO;CACtB,EACF;AACF,CAAC;AAED,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB,EACf,UAAU,eACZ;CACA,UAAU,EACR,UAAU;EACR,UAAU,OAAO;EACjB,eAAe,OAAO;EACtB,gBAAgB,OAAO;EACvB,OAAO,OAAO;EACd,YAAY,OAAO;EACnB,aAAa,OAAO;CACtB,EACF;AACF,CAAC;AAED,MAAa,iBAAiB,IAAI,OAAO,QAAQ;CAC/C,iBAAiB,EACf,SAAS,UACX;CACA,UAAU,EACR,SAAS;EACP,QAAQ,OAAO;EACf,OAAO,OAAO;EACd,SAAS,OAAO;EAChB,WAAW,OAAO;EAClB,MAAM,OAAO;CACf,EACF;AACF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "5.41.0",
+  "version": "5.42.0",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",
@@ -222,7 +222,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
-  "packageManager": "pnpm@11.18.0",
+  "packageManager": "pnpm@12.3.4+sha512.961aa41fb077da3a04a441d9f8e15ebc0c96da8ef710b2eb67bf9ee7cb0610eabd48f1fd85f51cffe73846785fa0f87c56a3a872a1d893f8446741b5cce45457",
   "engines": {
     "node": ">=22.22.0"
   },