@lobehub/ui 5.47.6 → 5.48.1

package/es/ThemeProvider/GlobalStyle/essential.mjs

@@ -7,6 +7,13 @@ import { css } from "antd-style";
 * independent of `enableGlobalStyle`, which only gates document-level resets.
 */
 var essential_default = (token) => css`
+  :root {
+    /* Outer hairline painted on the page behind an elevated surface. Dark alpha is much
+       higher on purpose: a white hairline lightens toward a raised surface, and below ~16%
+       it lands on the surface's own colour and the edge vanishes. */
+    --lobe-ring: 0 0 0 1px ${token.isDarkMode ? "rgb(255 255 255 / 18%)" : "rgb(0 0 0 / 5%)"};
+  }
+
   @layer lobe-popup {
     .${CLASSNAMES.ContextTrigger}[data-popup-open],
       .${CLASSNAMES.DropdownMenuTrigger}[data-popup-open] {

package/es/ThemeProvider/GlobalStyle/essential.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"essential.mjs","names":[],"sources":["../../../src/ThemeProvider/GlobalStyle/essential.ts"],"sourcesContent":["import { css, type Theme } from 'antd-style';\n\nimport { CLASSNAMES } from '@/styles/classNames';\n\n/**\n * Styles that library components rely on to render correctly (Flex layout,\n * popup trigger states, brand animations). Always injected by ThemeProvider,\n * independent of `enableGlobalStyle`, which only gates document-level resets.\n */\nexport default (token: Theme) => css`\n  @layer lobe-popup {\n    .${CLASSNAMES.ContextTrigger}[data-popup-open],\n      .${CLASSNAMES.DropdownMenuTrigger}[data-popup-open] {\n      background: ${token.colorFillTertiary};\n    }\n  }\n\n  @layer lobe-base {\n    :where(.lobe-flex) {\n      /* Define defaults on the element itself to avoid CSS variable inheritance leaking to nested Flex */\n      --lobe-flex: 0 1 auto;\n      --lobe-flex-direction: column;\n      --lobe-flex-wrap: nowrap;\n      --lobe-flex-justify: flex-start;\n      --lobe-flex-align: stretch;\n      --lobe-flex-width: auto;\n      --lobe-flex-height: auto;\n      --lobe-flex-padding: 0;\n\n      /* Keep padding-inline/block aligned with padding by default, and prevent inheriting from parent */\n      --lobe-flex-padding-inline: var(--lobe-flex-padding);\n      --lobe-flex-padding-block: var(--lobe-flex-padding);\n      --lobe-flex-gap: 0;\n\n      display: flex;\n      flex: var(--lobe-flex);\n      flex-flow: var(--lobe-flex-direction) var(--lobe-flex-wrap);\n      gap: var(--lobe-flex-gap);\n      align-items: var(--lobe-flex-align);\n      justify-content: var(--lobe-flex-justify);\n\n      width: var(--lobe-flex-width);\n      height: var(--lobe-flex-height);\n      padding: var(--lobe-flex-padding);\n      padding-block: var(--lobe-flex-padding-block);\n      padding-inline: var(--lobe-flex-padding-inline);\n    }\n\n    .lobe-flex-hidden {\n      display: none;\n    }\n  }\n\n  /* Brand Loading */\n  @keyframes draw {\n    0% {\n      stroke-dashoffset: 1000;\n    }\n\n    100% {\n      stroke-dashoffset: 0;\n    }\n  }\n\n  @keyframes fill {\n    30% {\n      fill-opacity: 0.05;\n    }\n\n    100% {\n      fill-opacity: 1;\n    }\n  }\n\n  .lobe-brand-loading path {\n    fill: currentcolor;\n    fill-opacity: 0;\n    stroke: currentcolor;\n    stroke-dasharray: 1000;\n    stroke-dashoffset: 1000;\n    stroke-width: 0.25em;\n\n    animation:\n      draw 2s cubic-bezier(0.4, 0, 0.2, 1) infinite,\n      fill 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n  }\n`;\n"],"mappings":";;;;;;;;AASA,IAAA,qBAAgB,UAAiB,GAAG;;OAE7B,WAAW,eAAe;SACxB,WAAW,oBAAoB;oBACpB,MAAM,kBAAkB"}
+{"version":3,"file":"essential.mjs","names":[],"sources":["../../../src/ThemeProvider/GlobalStyle/essential.ts"],"sourcesContent":["import { css, type Theme } from 'antd-style';\n\nimport { CLASSNAMES } from '@/styles/classNames';\n\n/**\n * Styles that library components rely on to render correctly (Flex layout,\n * popup trigger states, brand animations). Always injected by ThemeProvider,\n * independent of `enableGlobalStyle`, which only gates document-level resets.\n */\nexport default (token: Theme) => css`\n  :root {\n    /* Outer hairline painted on the page behind an elevated surface. Dark alpha is much\n       higher on purpose: a white hairline lightens toward a raised surface, and below ~16%\n       it lands on the surface's own colour and the edge vanishes. */\n    --lobe-ring: 0 0 0 1px ${token.isDarkMode ? 'rgb(255 255 255 / 18%)' : 'rgb(0 0 0 / 5%)'};\n  }\n\n  @layer lobe-popup {\n    .${CLASSNAMES.ContextTrigger}[data-popup-open],\n      .${CLASSNAMES.DropdownMenuTrigger}[data-popup-open] {\n      background: ${token.colorFillTertiary};\n    }\n  }\n\n  @layer lobe-base {\n    :where(.lobe-flex) {\n      /* Define defaults on the element itself to avoid CSS variable inheritance leaking to nested Flex */\n      --lobe-flex: 0 1 auto;\n      --lobe-flex-direction: column;\n      --lobe-flex-wrap: nowrap;\n      --lobe-flex-justify: flex-start;\n      --lobe-flex-align: stretch;\n      --lobe-flex-width: auto;\n      --lobe-flex-height: auto;\n      --lobe-flex-padding: 0;\n\n      /* Keep padding-inline/block aligned with padding by default, and prevent inheriting from parent */\n      --lobe-flex-padding-inline: var(--lobe-flex-padding);\n      --lobe-flex-padding-block: var(--lobe-flex-padding);\n      --lobe-flex-gap: 0;\n\n      display: flex;\n      flex: var(--lobe-flex);\n      flex-flow: var(--lobe-flex-direction) var(--lobe-flex-wrap);\n      gap: var(--lobe-flex-gap);\n      align-items: var(--lobe-flex-align);\n      justify-content: var(--lobe-flex-justify);\n\n      width: var(--lobe-flex-width);\n      height: var(--lobe-flex-height);\n      padding: var(--lobe-flex-padding);\n      padding-block: var(--lobe-flex-padding-block);\n      padding-inline: var(--lobe-flex-padding-inline);\n    }\n\n    .lobe-flex-hidden {\n      display: none;\n    }\n  }\n\n  /* Brand Loading */\n  @keyframes draw {\n    0% {\n      stroke-dashoffset: 1000;\n    }\n\n    100% {\n      stroke-dashoffset: 0;\n    }\n  }\n\n  @keyframes fill {\n    30% {\n      fill-opacity: 0.05;\n    }\n\n    100% {\n      fill-opacity: 1;\n    }\n  }\n\n  .lobe-brand-loading path {\n    fill: currentcolor;\n    fill-opacity: 0;\n    stroke: currentcolor;\n    stroke-dasharray: 1000;\n    stroke-dashoffset: 1000;\n    stroke-width: 0.25em;\n\n    animation:\n      draw 2s cubic-bezier(0.4, 0, 0.2, 1) infinite,\n      fill 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n  }\n`;\n"],"mappings":";;;;;;;;AASA,IAAA,qBAAgB,UAAiB,GAAG;;;;;6BAKP,MAAM,aAAa,2BAA2B,kBAAkB;;;;OAItF,WAAW,eAAe;SACxB,WAAW,oBAAoB;oBACpB,MAAM,kBAAkB"}

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

@@ -39,6 +39,14 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
       opacity: 0;
     }
 
+    /* Base UI sets animation-name: none on initially-open panels */
+    [style*='animation-name: none'] &,
+    [style*='animation-name:none'] & {
+      translate: none;
+      opacity: 1;
+      transition: none;
+    }
+
     @media (prefers-reduced-motion: reduce) {
       transition-duration: 0s;
     }
@@ -156,6 +164,12 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
       height: 0;
     }
 
+    &[data-starting-style][style*='animation-name: none'],
+    &[data-starting-style][style*='animation-name:none'] {
+      height: auto;
+      transition: none;
+    }
+
     @media (prefers-reduced-motion: reduce) {
       transition-duration: 0s;
     }

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Accordion/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { focusRing } from '@/base-ui/focusRing';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  action: css`\n    display: flex;\n    flex-shrink: 0;\n    gap: 4px;\n    align-items: center;\n\n    opacity: 0;\n\n    transition: opacity 150ms ${cssVar.motionEaseOut};\n  `,\n  actionAlwaysVisible: css`\n    opacity: 1;\n  `,\n  actionBorderless: css`\n    padding-inline-end: var(--accordion-hover-inset, 8px);\n  `,\n  actionOutlined: css`\n    padding-inline-end: 16px;\n  `,\n  content: css`\n    font-size: 14px;\n    line-height: 1.6;\n    transition:\n      opacity 200ms ${cssVar.motionEaseOut},\n      translate 200ms ${cssVar.motionEaseOut};\n\n    [data-starting-style] & {\n      translate: 0 6px;\n      opacity: 0;\n    }\n\n    [data-ending-style] & {\n      translate: 0 -6px;\n      opacity: 0;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  contentBorderless: css`\n    padding-block: 0 12px;\n  `,\n  contentIndent: css`\n    padding-inline-start: 24px;\n  `,\n  contentIndentOutlined: css`\n    padding-inline-start: 40px;\n  `,\n  contentOutlined: css`\n    padding-block: 4px 14px;\n    padding-inline: 16px;\n  `,\n  header: css`\n    position: relative;\n\n    display: flex;\n    align-items: center;\n\n    margin: 0;\n\n    font-size: inherit;\n    font-weight: inherit;\n\n    transition: background 150ms ${cssVar.motionEaseOut};\n\n    &:hover:not(:has([data-disabled])) {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &:hover .accordion-action,\n    &:focus-within .accordion-action {\n      opacity: 1;\n    }\n  `,\n  headerBorderless: css`\n    margin-inline: calc(var(--accordion-hover-inset, 8px) * -1);\n    border-radius: ${cssVar.borderRadius};\n  `,\n  headerFilled: css`\n    border-radius: ${cssVar.borderRadius};\n    background: ${cssVar.colorFillTertiary};\n\n    &:hover:not(:has([data-disabled])) {\n      background: ${cssVar.colorFillSecondary};\n    }\n  `,\n  headerInline: css`\n    margin-inline: 0;\n\n    > .accordion-action {\n      padding-block: 4px;\n    }\n  `,\n  contentInline: css`\n    padding-block: 0;\n  `,\n  indicator: css`\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n\n    color: ${cssVar.colorTextDescription};\n\n    transition: transform 200ms ${cssVar.motionEaseOut};\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  indicatorInline: css`\n    justify-content: center;\n    width: 18px;\n    height: 18px;\n    margin-inline-start: -6px;\n\n    [data-panel-open] & {\n      transform: rotate(90deg);\n    }\n  `,\n  indicatorEnd: css`\n    margin-inline-start: auto;\n\n    [data-panel-open] & {\n      transform: rotate(180deg);\n    }\n  `,\n  indicatorStart: css`\n    [data-panel-open] & {\n      transform: rotate(90deg);\n    }\n  `,\n  item: css`\n    display: flex;\n    flex-direction: column;\n  `,\n  itemOutlined: css`\n    & + & {\n      border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n    }\n  `,\n  panel: css`\n    overflow: hidden;\n    height: auto;\n    transition: height 200ms ${cssVar.motionEaseOut};\n\n    interpolate-size: allow-keywords;\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      height: 0;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  root: css`\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n  `,\n  rootOutlined: css`\n    overflow: hidden;\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: ${cssVar.borderRadiusLG};\n  `,\n  trigger: css`\n    cursor: pointer;\n    user-select: none;\n\n    display: flex;\n    flex: 1;\n    gap: 8px;\n    align-items: center;\n\n    min-width: 0;\n    border: 0;\n    border-radius: inherit;\n\n    font: inherit;\n    font-size: 14px;\n    color: ${cssVar.colorText};\n    text-align: start;\n\n    background: none;\n    outline: none;\n\n    ${focusRing};\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: ${cssVar.colorTextDisabled};\n    }\n  `,\n  triggerBorderless: css`\n    padding-block: 8px;\n    padding-inline: var(--accordion-hover-inset, 8px);\n  `,\n  triggerFilled: css`\n    padding-block: 8px;\n    padding-inline: 16px;\n  `,\n  triggerOutlined: css`\n    padding-block: 12px;\n    padding-inline: 16px;\n\n    &[data-panel-open] {\n      padding-block-end: 8px;\n    }\n  `,\n}));\n\nexport const rootVariants = cva(styles.root, {\n  defaultVariants: { variant: 'borderless' },\n  variants: {\n    variant: {\n      borderless: null,\n      filled: null,\n      outlined: styles.rootOutlined,\n    },\n  },\n});\n\nexport const itemVariants = cva(styles.item, {\n  defaultVariants: { variant: 'borderless' },\n  variants: {\n    variant: {\n      borderless: null,\n      filled: null,\n      outlined: styles.itemOutlined,\n    },\n  },\n});\n\nexport const headerVariants = cva(styles.header, {\n  compoundVariants: [\n    { class: styles.headerInline, inline: true, variant: 'borderless' },\n    { class: styles.headerInline, inline: true, variant: 'filled' },\n  ],\n  defaultVariants: { inline: false, variant: 'borderless' },\n  variants: {\n    inline: {\n      false: null,\n      true: null,\n    },\n    variant: {\n      borderless: styles.headerBorderless,\n      filled: styles.headerFilled,\n      outlined: null,\n    },\n  },\n});\n\nexport const triggerVariants = cva(styles.trigger, {\n  defaultVariants: { variant: 'borderless' },\n  variants: {\n    variant: {\n      borderless: styles.triggerBorderless,\n      filled: styles.triggerFilled,\n      outlined: styles.triggerOutlined,\n    },\n  },\n});\n\nexport const indicatorVariants = cva(styles.indicator, {\n  defaultVariants: { placement: 'start' },\n  variants: {\n    placement: {\n      end: styles.indicatorEnd,\n      inline: styles.indicatorInline,\n      start: styles.indicatorStart,\n    },\n  },\n});\n\nexport const contentVariants = cva(styles.content, {\n  compoundVariants: [\n    {\n      class: styles.contentInline,\n      inline: true,\n      variant: 'borderless',\n    },\n    {\n      class: styles.contentIndent,\n      indent: true,\n      variant: 'borderless',\n    },\n    {\n      class: styles.contentIndent,\n      indent: true,\n      variant: 'filled',\n    },\n    {\n      class: styles.contentIndentOutlined,\n      indent: true,\n      variant: 'outlined',\n    },\n  ],\n  defaultVariants: { indent: true, inline: false, variant: 'borderless' },\n  variants: {\n    indent: {\n      false: null,\n      true: null,\n    },\n    inline: {\n      false: null,\n      true: null,\n    },\n    variant: {\n      borderless: styles.contentBorderless,\n      filled: styles.contentBorderless,\n      outlined: styles.contentOutlined,\n    },\n  },\n});\n\nexport const actionVariants = cva(styles.action, {\n  defaultVariants: { alwaysVisible: false, variant: 'borderless' },\n  variants: {\n    alwaysVisible: {\n      false: null,\n      true: styles.actionAlwaysVisible,\n    },\n    variant: {\n      borderless: styles.actionBorderless,\n      filled: styles.actionOutlined,\n      outlined: styles.actionOutlined,\n    },\n  },\n});\n"],"mappings":";;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,QAAQ,GAAG;;;;;;;;gCAQmB,OAAO,cAAc;;CAEnD,qBAAqB,GAAG;;;CAGxB,kBAAkB,GAAG;;;CAGrB,gBAAgB,GAAG;;;CAGnB,SAAS,GAAG;;;;sBAIQ,OAAO,cAAc;wBACnB,OAAO,cAAc;;;;;;;;;;;;;;;;CAgB3C,mBAAmB,GAAG;;;CAGtB,eAAe,GAAG;;;CAGlB,uBAAuB,GAAG;;;CAG1B,iBAAiB,GAAG;;;;CAIpB,QAAQ,GAAG;;;;;;;;;;;mCAWsB,OAAO,cAAc;;;oBAGpC,OAAO,kBAAkB;;;;;;;;CAQ3C,kBAAkB,GAAG;;qBAEF,OAAO,aAAa;;CAEvC,cAAc,GAAG;qBACE,OAAO,aAAa;kBACvB,OAAO,kBAAkB;;;oBAGvB,OAAO,mBAAmB;;;CAG5C,cAAc,GAAG;;;;;;;CAOjB,eAAe,GAAG;;;CAGlB,WAAW,GAAG;;;;;aAKH,OAAO,qBAAqB;;kCAEP,OAAO,cAAc;;;;;;CAMrD,iBAAiB,GAAG;;;;;;;;;;CAUpB,cAAc,GAAG;;;;;;;CAOjB,gBAAgB,GAAG;;;;;CAKnB,MAAM,GAAG;;;;CAIT,cAAc,GAAG;;sCAEmB,OAAO,qBAAqB;;;CAGhE,OAAO,GAAG;;;+BAGmB,OAAO,cAAc;;;;;;;;;;;;;CAalD,MAAM,GAAG;;;;;CAKT,cAAc,GAAG;;wBAEK,OAAO,qBAAqB;qBAC/B,OAAO,eAAe;;CAEzC,SAAS,GAAG;;;;;;;;;;;;;;;aAeD,OAAO,UAAU;;;;;;MAMxB,UAAU;;;;eAID,OAAO,kBAAkB;;;CAGtC,mBAAmB,GAAG;;;;CAItB,eAAe,GAAG;;;;CAIlB,iBAAiB,GAAG;;;;;;;;AAQtB,EAAE;AAEF,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB,EAAE,SAAS,aAAa;CACzC,UAAU,EACR,SAAS;EACP,YAAY;EACZ,QAAQ;EACR,UAAU,OAAO;CACnB,EACF;AACF,CAAC;AAED,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB,EAAE,SAAS,aAAa;CACzC,UAAU,EACR,SAAS;EACP,YAAY;EACZ,QAAQ;EACR,UAAU,OAAO;CACnB,EACF;AACF,CAAC;AAED,MAAa,iBAAiB,IAAI,OAAO,QAAQ;CAC/C,kBAAkB,CAChB;EAAE,OAAO,OAAO;EAAc,QAAQ;EAAM,SAAS;CAAa,GAClE;EAAE,OAAO,OAAO;EAAc,QAAQ;EAAM,SAAS;CAAS,CAChE;CACA,iBAAiB;EAAE,QAAQ;EAAO,SAAS;CAAa;CACxD,UAAU;EACR,QAAQ;GACN,OAAO;GACP,MAAM;EACR;EACA,SAAS;GACP,YAAY,OAAO;GACnB,QAAQ,OAAO;GACf,UAAU;EACZ;CACF;AACF,CAAC;AAED,MAAa,kBAAkB,IAAI,OAAO,SAAS;CACjD,iBAAiB,EAAE,SAAS,aAAa;CACzC,UAAU,EACR,SAAS;EACP,YAAY,OAAO;EACnB,QAAQ,OAAO;EACf,UAAU,OAAO;CACnB,EACF;AACF,CAAC;AAED,MAAa,oBAAoB,IAAI,OAAO,WAAW;CACrD,iBAAiB,EAAE,WAAW,QAAQ;CACtC,UAAU,EACR,WAAW;EACT,KAAK,OAAO;EACZ,QAAQ,OAAO;EACf,OAAO,OAAO;CAChB,EACF;AACF,CAAC;AAED,MAAa,kBAAkB,IAAI,OAAO,SAAS;CACjD,kBAAkB;EAChB;GACE,OAAO,OAAO;GACd,QAAQ;GACR,SAAS;EACX;EACA;GACE,OAAO,OAAO;GACd,QAAQ;GACR,SAAS;EACX;EACA;GACE,OAAO,OAAO;GACd,QAAQ;GACR,SAAS;EACX;EACA;GACE,OAAO,OAAO;GACd,QAAQ;GACR,SAAS;EACX;CACF;CACA,iBAAiB;EAAE,QAAQ;EAAM,QAAQ;EAAO,SAAS;CAAa;CACtE,UAAU;EACR,QAAQ;GACN,OAAO;GACP,MAAM;EACR;EACA,QAAQ;GACN,OAAO;GACP,MAAM;EACR;EACA,SAAS;GACP,YAAY,OAAO;GACnB,QAAQ,OAAO;GACf,UAAU,OAAO;EACnB;CACF;AACF,CAAC;AAED,MAAa,iBAAiB,IAAI,OAAO,QAAQ;CAC/C,iBAAiB;EAAE,eAAe;EAAO,SAAS;CAAa;CAC/D,UAAU;EACR,eAAe;GACb,OAAO;GACP,MAAM,OAAO;EACf;EACA,SAAS;GACP,YAAY,OAAO;GACnB,QAAQ,OAAO;GACf,UAAU,OAAO;EACnB;CACF;AACF,CAAC"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Accordion/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { focusRing } from '@/base-ui/focusRing';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  action: css`\n    display: flex;\n    flex-shrink: 0;\n    gap: 4px;\n    align-items: center;\n\n    opacity: 0;\n\n    transition: opacity 150ms ${cssVar.motionEaseOut};\n  `,\n  actionAlwaysVisible: css`\n    opacity: 1;\n  `,\n  actionBorderless: css`\n    padding-inline-end: var(--accordion-hover-inset, 8px);\n  `,\n  actionOutlined: css`\n    padding-inline-end: 16px;\n  `,\n  content: css`\n    font-size: 14px;\n    line-height: 1.6;\n    transition:\n      opacity 200ms ${cssVar.motionEaseOut},\n      translate 200ms ${cssVar.motionEaseOut};\n\n    [data-starting-style] & {\n      translate: 0 6px;\n      opacity: 0;\n    }\n\n    [data-ending-style] & {\n      translate: 0 -6px;\n      opacity: 0;\n    }\n\n    /* Base UI sets animation-name: none on initially-open panels */\n    [style*='animation-name: none'] &,\n    [style*='animation-name:none'] & {\n      translate: none;\n      opacity: 1;\n      transition: none;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  contentBorderless: css`\n    padding-block: 0 12px;\n  `,\n  contentIndent: css`\n    padding-inline-start: 24px;\n  `,\n  contentIndentOutlined: css`\n    padding-inline-start: 40px;\n  `,\n  contentOutlined: css`\n    padding-block: 4px 14px;\n    padding-inline: 16px;\n  `,\n  header: css`\n    position: relative;\n\n    display: flex;\n    align-items: center;\n\n    margin: 0;\n\n    font-size: inherit;\n    font-weight: inherit;\n\n    transition: background 150ms ${cssVar.motionEaseOut};\n\n    &:hover:not(:has([data-disabled])) {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &:hover .accordion-action,\n    &:focus-within .accordion-action {\n      opacity: 1;\n    }\n  `,\n  headerBorderless: css`\n    margin-inline: calc(var(--accordion-hover-inset, 8px) * -1);\n    border-radius: ${cssVar.borderRadius};\n  `,\n  headerFilled: css`\n    border-radius: ${cssVar.borderRadius};\n    background: ${cssVar.colorFillTertiary};\n\n    &:hover:not(:has([data-disabled])) {\n      background: ${cssVar.colorFillSecondary};\n    }\n  `,\n  headerInline: css`\n    margin-inline: 0;\n\n    > .accordion-action {\n      padding-block: 4px;\n    }\n  `,\n  contentInline: css`\n    padding-block: 0;\n  `,\n  indicator: css`\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n\n    color: ${cssVar.colorTextDescription};\n\n    transition: transform 200ms ${cssVar.motionEaseOut};\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  indicatorInline: css`\n    justify-content: center;\n    width: 18px;\n    height: 18px;\n    margin-inline-start: -6px;\n\n    [data-panel-open] & {\n      transform: rotate(90deg);\n    }\n  `,\n  indicatorEnd: css`\n    margin-inline-start: auto;\n\n    [data-panel-open] & {\n      transform: rotate(180deg);\n    }\n  `,\n  indicatorStart: css`\n    [data-panel-open] & {\n      transform: rotate(90deg);\n    }\n  `,\n  item: css`\n    display: flex;\n    flex-direction: column;\n  `,\n  itemOutlined: css`\n    & + & {\n      border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n    }\n  `,\n  panel: css`\n    overflow: hidden;\n    height: auto;\n    transition: height 200ms ${cssVar.motionEaseOut};\n\n    interpolate-size: allow-keywords;\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      height: 0;\n    }\n\n    &[data-starting-style][style*='animation-name: none'],\n    &[data-starting-style][style*='animation-name:none'] {\n      height: auto;\n      transition: none;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  root: css`\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n  `,\n  rootOutlined: css`\n    overflow: hidden;\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: ${cssVar.borderRadiusLG};\n  `,\n  trigger: css`\n    cursor: pointer;\n    user-select: none;\n\n    display: flex;\n    flex: 1;\n    gap: 8px;\n    align-items: center;\n\n    min-width: 0;\n    border: 0;\n    border-radius: inherit;\n\n    font: inherit;\n    font-size: 14px;\n    color: ${cssVar.colorText};\n    text-align: start;\n\n    background: none;\n    outline: none;\n\n    ${focusRing};\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: ${cssVar.colorTextDisabled};\n    }\n  `,\n  triggerBorderless: css`\n    padding-block: 8px;\n    padding-inline: var(--accordion-hover-inset, 8px);\n  `,\n  triggerFilled: css`\n    padding-block: 8px;\n    padding-inline: 16px;\n  `,\n  triggerOutlined: css`\n    padding-block: 12px;\n    padding-inline: 16px;\n\n    &[data-panel-open] {\n      padding-block-end: 8px;\n    }\n  `,\n}));\n\nexport const rootVariants = cva(styles.root, {\n  defaultVariants: { variant: 'borderless' },\n  variants: {\n    variant: {\n      borderless: null,\n      filled: null,\n      outlined: styles.rootOutlined,\n    },\n  },\n});\n\nexport const itemVariants = cva(styles.item, {\n  defaultVariants: { variant: 'borderless' },\n  variants: {\n    variant: {\n      borderless: null,\n      filled: null,\n      outlined: styles.itemOutlined,\n    },\n  },\n});\n\nexport const headerVariants = cva(styles.header, {\n  compoundVariants: [\n    { class: styles.headerInline, inline: true, variant: 'borderless' },\n    { class: styles.headerInline, inline: true, variant: 'filled' },\n  ],\n  defaultVariants: { inline: false, variant: 'borderless' },\n  variants: {\n    inline: {\n      false: null,\n      true: null,\n    },\n    variant: {\n      borderless: styles.headerBorderless,\n      filled: styles.headerFilled,\n      outlined: null,\n    },\n  },\n});\n\nexport const triggerVariants = cva(styles.trigger, {\n  defaultVariants: { variant: 'borderless' },\n  variants: {\n    variant: {\n      borderless: styles.triggerBorderless,\n      filled: styles.triggerFilled,\n      outlined: styles.triggerOutlined,\n    },\n  },\n});\n\nexport const indicatorVariants = cva(styles.indicator, {\n  defaultVariants: { placement: 'start' },\n  variants: {\n    placement: {\n      end: styles.indicatorEnd,\n      inline: styles.indicatorInline,\n      start: styles.indicatorStart,\n    },\n  },\n});\n\nexport const contentVariants = cva(styles.content, {\n  compoundVariants: [\n    {\n      class: styles.contentInline,\n      inline: true,\n      variant: 'borderless',\n    },\n    {\n      class: styles.contentIndent,\n      indent: true,\n      variant: 'borderless',\n    },\n    {\n      class: styles.contentIndent,\n      indent: true,\n      variant: 'filled',\n    },\n    {\n      class: styles.contentIndentOutlined,\n      indent: true,\n      variant: 'outlined',\n    },\n  ],\n  defaultVariants: { indent: true, inline: false, variant: 'borderless' },\n  variants: {\n    indent: {\n      false: null,\n      true: null,\n    },\n    inline: {\n      false: null,\n      true: null,\n    },\n    variant: {\n      borderless: styles.contentBorderless,\n      filled: styles.contentBorderless,\n      outlined: styles.contentOutlined,\n    },\n  },\n});\n\nexport const actionVariants = cva(styles.action, {\n  defaultVariants: { alwaysVisible: false, variant: 'borderless' },\n  variants: {\n    alwaysVisible: {\n      false: null,\n      true: styles.actionAlwaysVisible,\n    },\n    variant: {\n      borderless: styles.actionBorderless,\n      filled: styles.actionOutlined,\n      outlined: styles.actionOutlined,\n    },\n  },\n});\n"],"mappings":"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"}

package/es/base-ui/DraggablePanel/atoms.mjs

@@ -205,7 +205,7 @@ const DraggablePanelHandle = memo(({ className, style, wideArea = true, ...rest
 			if (!draggedRef.current) controller.reset();
 		},
 		onLostPointerCapture: () => {
-			if (draggingRef.current) controller.drag.cancel();
+			if (draggingRef.current) controller.drag.end();
 			pressedRef.current = null;
 			draggingRef.current = false;
 		},

package/es/base-ui/DraggablePanel/atoms.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"atoms.mjs","names":["useControlledState","getHandleSize"],"sources":["../../../src/base-ui/DraggablePanel/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { ChevronLeft } from 'lucide-react';\nimport type { HTMLMotionProps, MotionStyle } from 'motion/react';\nimport { useTransform } from 'motion/react';\nimport {\n  type CSSProperties,\n  memo,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport ActionIcon from '@/base-ui/ActionIcon';\nimport { useMotionComponent } from '@/MotionProvider';\nimport type { DivProps } from '@/types';\n\nimport { DraggablePanelContext, useDraggablePanelContext } from './context';\nimport type { Placement } from './core/axes';\nimport { AXES } from './core/axes';\nimport type { PanelControllerOptions } from './core/controller';\nimport { createPanelController } from './core/controller';\nimport { coarsePointer, handleSize as getHandleSize } from './core/env';\nimport { useIsomorphicLayoutEffect, useStore } from './core/internal';\nimport { timing } from './core/transition';\nimport { BOW, handleVariants, rootVariants, styles, toggleVariants } from './style';\n\nconst PAN_THRESHOLD = 3;\n\nconst BOW_CX = 15;\nconst BOW_CY = BOW.half + 8;\nconst BOW_W = BOW_CX * 2;\nconst BOW_H = BOW_CY * 2;\n\nconst bowPath = (direction: 1 | -1, verticalSeam: boolean) => {\n  const k = BOW.half * BOW.curve;\n  const b = BOW_CX + BOW.bulge * direction;\n  const a0 = BOW_CY - BOW.half;\n  const a1 = BOW_CY + BOW.half;\n  // `a` runs along the seam, `b` across it; a horizontal seam swaps the two.\n  const pt = (along: number, across: number) =>\n    verticalSeam ? `${along} ${across}` : `${across} ${along}`;\n  return [\n    `M${pt(BOW_CX, a0)}`,\n    `C${pt(BOW_CX, a0 + k)} ${pt(b, BOW_CY - k)} ${pt(b, BOW_CY)}`,\n    `C${pt(b, BOW_CY + k)} ${pt(BOW_CX, a1 - k)} ${pt(BOW_CX, a1)}`,\n  ].join(' ');\n};\n\nconst BOW_PATHS = {\n  horizontalSeam: [bowPath(-1, false), bowPath(1, false)],\n  verticalSeam: [bowPath(-1, true), bowPath(1, true)],\n};\n\n/** The chevron points the way a click moves the panel. */\nconst CHEVRON_TURN = { bottom: 270, left: 0, right: 180, top: 90 } as const;\n\nconst chevronPath = (cx: number, cy: number) =>\n  `M${cx + 2.4} ${cy - 4.8} L${cx - 2.4} ${cy} L${cx + 2.4} ${cy + 4.8}`;\n\nconst ORIGIN_MAP = {\n  bottom: 'center bottom',\n  left: 'left center',\n  right: 'right center',\n  top: 'center top',\n} as const;\n\nconst COLLAPSED_SCALE = 0.97;\n\nconst EDGE_INSET = {\n  bottom: 'insetBlockEnd',\n  left: 'insetInlineStart',\n  right: 'insetInlineEnd',\n  top: 'insetBlockStart',\n} as const;\n\nexport interface DraggablePanelRootProps extends Omit<DivProps, 'onDrag'> {\n  backgroundColor?: string;\n  collapseThreshold?: number;\n  defaultExpand?: boolean;\n  defaultSize?: number;\n  expand?: boolean;\n  expandable?: boolean;\n  max?: number;\n  min?: number;\n  mode?: 'fixed' | 'float';\n  onExpandChange?: (expand: boolean) => void;\n  onSizeChange?: (size: number, delta: number) => void;\n  onSizeDragging?: (size: number, delta: number) => void;\n  placement?: Placement;\n  showBorder?: boolean;\n  size?: number;\n}\n\nexport const DraggablePanelRoot = memo<DraggablePanelRootProps>(\n  ({\n    backgroundColor,\n    children,\n    className,\n    collapseThreshold,\n    defaultExpand = true,\n    defaultSize,\n    expand,\n    expandable = true,\n    max,\n    min = 0,\n    mode = 'fixed',\n    onExpandChange,\n    onSizeChange,\n    onSizeDragging,\n    placement = 'right',\n    showBorder = true,\n    size,\n    style,\n    ...rest\n  }) => {\n    const axis = AXES[placement];\n    const fallbackSize = axis.vertical ? 180 : 280;\n    const resolvedDefaultSize = defaultSize ?? fallbackSize;\n\n    const [isExpand, setIsExpand] = useControlledState(defaultExpand, {\n      onChange: onExpandChange,\n      value: expand,\n    });\n    const [innerSize, setInnerSize] = useState(resolvedDefaultSize);\n    const currentSize = size ?? innerSize;\n\n    const commitSize = useCallback(\n      (next: number, delta: number) => {\n        if (size === undefined) setInnerSize(next);\n        onSizeChange?.(next, delta);\n      },\n      [onSizeChange, size],\n    );\n\n    const options: PanelControllerOptions = {\n      collapseThreshold,\n      defaultSize: resolvedDefaultSize,\n      expand: isExpand,\n      max,\n      min,\n      onExpandChange: setIsExpand,\n      onSizeChange: commitSize,\n      onSizeDragging,\n      placement,\n      size: currentSize,\n    };\n\n    const [controller] = useState(() => createPanelController(options));\n    const state = useStore(controller.subscribe, () => controller.state);\n    const elementRef = useRef<HTMLElement>(null);\n\n    useIsomorphicLayoutEffect(() => {\n      controller.sync(options);\n    });\n\n    useIsomorphicLayoutEffect(() => {\n      const node = elementRef.current;\n      return node ? controller.attach(node) : undefined;\n    }, [controller]);\n\n    const toggleExpand = useCallback(() => {\n      if (expandable) setIsExpand(!isExpand);\n    }, [expandable, isExpand, setIsExpand]);\n\n    const context = useMemo(\n      () => ({\n        axis,\n        controller,\n        expand: isExpand,\n        expandable,\n        placement,\n        showBorder,\n        state,\n        toggleExpand,\n      }),\n      [axis, controller, isExpand, expandable, placement, showBorder, state, toggleExpand],\n    );\n\n    return (\n      <DraggablePanelContext value={context}>\n        <aside\n          className={cx(rootVariants({ mode, placement }), className)}\n          data-expand={isExpand}\n          data-expandable={expandable}\n          data-resizing={state.dragging}\n          ref={elementRef}\n          style={\n            {\n              '--draggable-panel-bg': backgroundColor || '',\n              'flexDirection': axis.vertical ? 'column' : 'row',\n              ...style,\n            } as CSSProperties\n          }\n          {...rest}\n        >\n          {children}\n        </aside>\n      </DraggablePanelContext>\n    );\n  },\n);\n\nDraggablePanelRoot.displayName = 'DraggablePanelRoot';\n\nexport interface DraggablePanelContentProps extends Omit<DivProps, 'onDrag'> {}\n\nexport const DraggablePanelContent = memo<DraggablePanelContentProps>(\n  ({ children, className, style, ...rest }) => {\n    const Motion = useMotionComponent();\n    const { axis, controller, expand, placement, state } = useDraggablePanelContext();\n    const extent = useTransform(controller.motion.size, (value) => Math.max(0, value));\n    // Subscribed, not read: a collapse that changes only the target would otherwise\n    // leave the content unclipped and painted outside the zero-width box.\n    const target = useStore(controller.subscribe, () => controller.target);\n    const clipping = state.dragging || state.folding || target === 0;\n    const shrunk = state.collapsing || !expand;\n\n    return (\n      <Motion.div\n        inert={!expand}\n        style={\n          {\n            display: 'flex',\n            flexDirection: axis.vertical ? 'column' : 'row',\n            flexShrink: 0,\n            justifyContent: axis.anchorEnd ? 'flex-end' : 'flex-start',\n            overflow: clipping ? 'clip' : 'visible',\n            [axis.cross]: '100%',\n            [axis.extent]: extent,\n          } as MotionStyle\n        }\n      >\n        <Motion.div\n          animate={{ scale: shrunk ? COLLAPSED_SCALE : 1 }}\n          className={cx(styles.content, className)}\n          transition={timing()}\n          style={\n            {\n              transformOrigin: ORIGIN_MAP[placement],\n              [axis.cross]: '100%',\n              [axis.extent]: controller.motion.content,\n              ...style,\n            } as MotionStyle\n          }\n          {...(rest as HTMLMotionProps<'div'>)}\n        >\n          {children}\n        </Motion.div>\n      </Motion.div>\n    );\n  },\n);\n\nDraggablePanelContent.displayName = 'DraggablePanelContent';\n\nexport interface DraggablePanelHandleProps extends Omit<DivProps, 'onDrag'> {\n  wideArea?: boolean;\n}\n\nexport const DraggablePanelHandle = memo<DraggablePanelHandleProps>(\n  ({ className, style, wideArea = true, ...rest }) => {\n    const { axis, controller, expand, showBorder, state } = useDraggablePanelContext();\n    const size = useStore(coarsePointer.subscribe, () => getHandleSize(wideArea));\n    const target = useStore(controller.subscribe, () => controller.target);\n    useEffect(() => () => controller.drag.cancel(), [controller]);\n\n    const pressedRef = useRef<{ x: number; y: number } | null>(null);\n    const draggingRef = useRef(false);\n    const draggedRef = useRef(false);\n    const { max, min } = controller.bounds();\n\n    if (!expand) return null;\n\n    return (\n      <div\n        aria-orientation={axis.ariaOrientation}\n        aria-valuemax={Number.isFinite(max) ? max : undefined}\n        aria-valuemin={min}\n        aria-valuenow={target}\n        aria-valuetext={`${target} pixels`}\n        className={cx(handleVariants({ edge: axis.edge }), className)}\n        data-border={showBorder}\n        data-resizing={state.dragging || undefined}\n        role=\"separator\"\n        tabIndex={0}\n        style={\n          {\n            '--draggable-panel-handle-size': `${size}px`,\n            [EDGE_INSET[axis.edge]]: -size / 2,\n            ...style,\n          } as CSSProperties\n        }\n        onKeyDown={(event) => controller.resizeByKey(event)}\n        onDoubleClick={() => {\n          if (!draggedRef.current) controller.reset();\n        }}\n        onLostPointerCapture={() => {\n          if (draggingRef.current) controller.drag.cancel();\n          pressedRef.current = null;\n          draggingRef.current = false;\n        }}\n        onPointerCancel={() => {\n          controller.drag.cancel();\n          pressedRef.current = null;\n          draggingRef.current = false;\n        }}\n        onPointerDown={(event) => {\n          draggedRef.current = false;\n          pressedRef.current = { x: event.clientX, y: event.clientY };\n          // A synthetic pointerdown carries no active pointer, and capturing throws.\n          try {\n            event.currentTarget.setPointerCapture(event.pointerId);\n          } catch {\n            /* empty */\n          }\n        }}\n        onPointerMove={(event) => {\n          if (!pressedRef.current) return;\n          const offset = {\n            x: event.clientX - pressedRef.current.x,\n            y: event.clientY - pressedRef.current.y,\n          };\n          if (!draggingRef.current) {\n            if (Math.hypot(offset.x, offset.y) < PAN_THRESHOLD) return;\n            draggingRef.current = true;\n            draggedRef.current = true;\n            controller.drag.start();\n          }\n          controller.drag.move(offset);\n        }}\n        onPointerUp={() => {\n          if (draggingRef.current) controller.drag.end();\n          pressedRef.current = null;\n          draggingRef.current = false;\n        }}\n        {...rest}\n      />\n    );\n  },\n);\n\nDraggablePanelHandle.displayName = 'DraggablePanelHandle';\n\nexport interface DraggablePanelToggleProps extends Omit<DivProps, 'onDrag'> {\n  showHandleWhenCollapsed?: boolean;\n}\n\nexport const DraggablePanelToggle = memo<DraggablePanelToggleProps>(\n  ({ className, showHandleWhenCollapsed, style, ...rest }) => {\n    const { axis, expand, expandable, placement, toggleExpand } = useDraggablePanelContext();\n\n    if (!expandable) return null;\n\n    const turn = CHEVRON_TURN[placement] + (expand ? 0 : 180);\n    const chevX = axis.vertical ? BOW_CY : BOW_CX;\n    const chevY = axis.vertical ? BOW_CX : BOW_CY;\n\n    return (\n      <div\n        className={cx(toggleVariants({ placement }), className)}\n        style={{ opacity: expand ? undefined : showHandleWhenCollapsed ? 1 : 0, ...style }}\n        {...rest}\n      >\n        <button\n          aria-label={expand ? 'Collapse panel' : 'Expand panel'}\n          type=\"button\"\n          onClick={toggleExpand}\n        >\n          <svg\n            fill=\"none\"\n            height={axis.vertical ? BOW_W : BOW_H}\n            viewBox={`0 0 ${axis.vertical ? BOW_H : BOW_W} ${axis.vertical ? BOW_W : BOW_H}`}\n            width={axis.vertical ? BOW_H : BOW_W}\n          >\n            {BOW_PATHS[axis.vertical ? 'horizontalSeam' : 'verticalSeam'].map((d) => (\n              <path d={d} data-bow=\"\" key={d} strokeLinecap=\"round\" strokeWidth={BOW.stroke} />\n            ))}\n            <g\n              style={{\n                rotate: `${turn}deg`,\n                transformOrigin: `${chevX}px ${chevY}px`,\n                transition: 'rotate 0.25s var(--ant-motion-ease-out, ease)',\n              }}\n            >\n              <path\n                d={chevronPath(chevX, chevY)}\n                stroke=\"currentColor\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={1.6}\n              />\n            </g>\n          </svg>\n        </button>\n      </div>\n    );\n  },\n);\n\nDraggablePanelToggle.displayName = 'DraggablePanelToggle';\n\nexport type DraggablePanelContainerProps = DivProps;\n\nexport const DraggablePanelContainer = memo<DraggablePanelContainerProps>(\n  ({ className, ...rest }) => <div className={cx(styles.container, className)} {...rest} />,\n);\n\nDraggablePanelContainer.displayName = 'DraggablePanelContainer';\n\nexport type DraggablePanelBodyProps = DivProps;\n\nexport const DraggablePanelBody = memo<DraggablePanelBodyProps>(({ className, style, ...rest }) => (\n  <div className={cx(styles.body, className)} style={{ flex: 1, ...style }} {...rest} />\n));\n\nDraggablePanelBody.displayName = 'DraggablePanelBody';\n\nexport type DraggablePanelFooterProps = DivProps;\n\nexport const DraggablePanelFooter = memo<DraggablePanelFooterProps>(({ className, ...rest }) => (\n  <div className={cx(styles.footer, className)} {...rest} />\n));\n\nDraggablePanelFooter.displayName = 'DraggablePanelFooter';\n\nexport interface DraggablePanelHeaderProps extends Omit<DivProps, 'children' | 'title'> {\n  extra?: ReactNode;\n  onCollapse?: () => void;\n  title?: ReactNode;\n}\n\nexport const DraggablePanelHeader = memo<DraggablePanelHeaderProps>(\n  ({ className, extra, onCollapse, title, ...rest }) => {\n    const { toggleExpand } = useDraggablePanelContext();\n\n    return (\n      <div className={cx(styles.header, className)} {...rest}>\n        <ActionIcon icon={ChevronLeft} size={'small'} onClick={onCollapse ?? toggleExpand} />\n        {title}\n        {extra}\n      </div>\n    );\n  },\n);\n\nDraggablePanelHeader.displayName = 'DraggablePanelHeader';\n"],"mappings":";;;;;;;;;;;;;;;;;AAgCA,MAAM,gBAAgB;AAEtB,MAAM,SAAS;AACf,MAAM,SAAS,IAAI,OAAO;AAC1B,MAAM,QAAQ;AACd,MAAM,QAAQ,SAAS;AAEvB,MAAM,WAAW,WAAmB,iBAA0B;CAC5D,MAAM,IAAI,IAAI,OAAO,IAAI;CACzB,MAAM,IAAI,SAAS,IAAI,QAAQ;CAC/B,MAAM,KAAK,SAAS,IAAI;CACxB,MAAM,KAAK,SAAS,IAAI;CAExB,MAAM,MAAM,OAAe,WACzB,eAAe,GAAG,MAAM,GAAG,WAAW,GAAG,OAAO,GAAG;CACrD,OAAO;EACL,IAAI,GAAG,QAAQ,EAAE;EACjB,IAAI,GAAG,QAAQ,KAAK,CAAC,EAAE,GAAG,GAAG,GAAG,SAAS,CAAC,EAAE,GAAG,GAAG,GAAG,MAAM;EAC3D,IAAI,GAAG,GAAG,SAAS,CAAC,EAAE,GAAG,GAAG,QAAQ,KAAK,CAAC,EAAE,GAAG,GAAG,QAAQ,EAAE;CAC9D,CAAC,CAAC,KAAK,GAAG;AACZ;AAEA,MAAM,YAAY;CAChB,gBAAgB,CAAC,QAAQ,IAAI,KAAK,GAAG,QAAQ,GAAG,KAAK,CAAC;CACtD,cAAc,CAAC,QAAQ,IAAI,IAAI,GAAG,QAAQ,GAAG,IAAI,CAAC;AACpD;;AAGA,MAAM,eAAe;CAAE,QAAQ;CAAK,MAAM;CAAG,OAAO;CAAK,KAAK;AAAG;AAEjE,MAAM,eAAe,IAAY,OAC/B,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,IAAI,KAAK,IAAI,GAAG,GAAG,IAAI,KAAK,IAAI,GAAG,KAAK;AAEnE,MAAM,aAAa;CACjB,QAAQ;CACR,MAAM;CACN,OAAO;CACP,KAAK;AACP;AAEA,MAAM,kBAAkB;AAExB,MAAM,aAAa;CACjB,QAAQ;CACR,MAAM;CACN,OAAO;CACP,KAAK;AACP;AAoBA,MAAa,qBAAqB,MAC/B,EACC,iBACA,UACA,WACA,mBACA,gBAAgB,MAChB,aACA,QACA,aAAa,MACb,KACA,MAAM,GACN,OAAO,SACP,gBACA,cACA,gBACA,YAAY,SACZ,aAAa,MACb,MACA,OACA,GAAG,WACC;CACJ,MAAM,OAAO,KAAK;CAClB,MAAM,eAAe,KAAK,WAAW,MAAM;CAC3C,MAAM,sBAAsB,eAAe;CAE3C,MAAM,CAAC,UAAU,eAAeA,cAAmB,eAAe;EAChE,UAAU;EACV,OAAO;CACT,CAAC;CACD,MAAM,CAAC,WAAW,gBAAgB,SAAS,mBAAmB;CAC9D,MAAM,cAAc,QAAQ;CAU5B,MAAM,UAAkC;EACtC;EACA,aAAa;EACb,QAAQ;EACR;EACA;EACA,gBAAgB;EAChB,cAfiB,aAChB,MAAc,UAAkB;GAC/B,IAAI,SAAS,KAAA,GAAW,aAAa,IAAI;GACzC,eAAe,MAAM,KAAK;EAC5B,GACA,CAAC,cAAc,IAAI,CAUI;EACvB;EACA;EACA,MAAM;CACR;CAEA,MAAM,CAAC,cAAc,eAAe,sBAAsB,OAAO,CAAC;CAClE,MAAM,QAAQ,SAAS,WAAW,iBAAiB,WAAW,KAAK;CACnE,MAAM,aAAa,OAAoB,IAAI;CAE3C,gCAAgC;EAC9B,WAAW,KAAK,OAAO;CACzB,CAAC;CAED,gCAAgC;EAC9B,MAAM,OAAO,WAAW;EACxB,OAAO,OAAO,WAAW,OAAO,IAAI,IAAI,KAAA;CAC1C,GAAG,CAAC,UAAU,CAAC;CAEf,MAAM,eAAe,kBAAkB;EACrC,IAAI,YAAY,YAAY,CAAC,QAAQ;CACvC,GAAG;EAAC;EAAY;EAAU;CAAW,CAAC;CAEtC,MAAM,UAAU,eACP;EACL;EACA;EACA,QAAQ;EACR;EACA;EACA;EACA;EACA;CACF,IACA;EAAC;EAAM;EAAY;EAAU;EAAY;EAAW;EAAY;EAAO;CAAY,CACrF;CAEA,OACE,oBAAC,uBAAD;EAAuB,OAAO;EAC5B,UAAA,oBAAC,SAAD;GACE,WAAW,GAAG,aAAa;IAAE;IAAM;GAAU,CAAC,GAAG,SAAS;GAC1D,eAAa;GACb,mBAAiB;GACjB,iBAAe,MAAM;GACrB,KAAK;GACL,OACE;IACE,wBAAwB,mBAAmB;IAC3C,iBAAiB,KAAK,WAAW,WAAW;IAC5C,GAAG;GACL;GAEF,GAAI;GAEH;EACI,CAAA;CACc,CAAA;AAE3B,CACF;AAEA,mBAAmB,cAAc;AAIjC,MAAa,wBAAwB,MAClC,EAAE,UAAU,WAAW,OAAO,GAAG,WAAW;CAC3C,MAAM,SAAS,mBAAmB;CAClC,MAAM,EAAE,MAAM,YAAY,QAAQ,WAAW,UAAU,yBAAyB;CAChF,MAAM,SAAS,aAAa,WAAW,OAAO,OAAO,UAAU,KAAK,IAAI,GAAG,KAAK,CAAC;CAGjF,MAAM,SAAS,SAAS,WAAW,iBAAiB,WAAW,MAAM;CACrE,MAAM,WAAW,MAAM,YAAY,MAAM,WAAW,WAAW;CAC/D,MAAM,SAAS,MAAM,cAAc,CAAC;CAEpC,OACE,oBAAC,OAAO,KAAR;EACE,OAAO,CAAC;EACR,OACE;GACE,SAAS;GACT,eAAe,KAAK,WAAW,WAAW;GAC1C,YAAY;GACZ,gBAAgB,KAAK,YAAY,aAAa;GAC9C,UAAU,WAAW,SAAS;IAC7B,KAAK,QAAQ;IACb,KAAK,SAAS;EACjB;EAGF,UAAA,oBAAC,OAAO,KAAR;GACE,SAAS,EAAE,OAAO,SAAS,kBAAkB,EAAE;GAC/C,WAAW,GAAG,OAAO,SAAS,SAAS;GACvC,YAAY,OAAO;GACnB,OACE;IACE,iBAAiB,WAAW;KAC3B,KAAK,QAAQ;KACb,KAAK,SAAS,WAAW,OAAO;IACjC,GAAG;GACL;GAEF,GAAK;GAEJ;EACS,CAAA;CACF,CAAA;AAEhB,CACF;AAEA,sBAAsB,cAAc;AAMpC,MAAa,uBAAuB,MACjC,EAAE,WAAW,OAAO,WAAW,MAAM,GAAG,WAAW;CAClD,MAAM,EAAE,MAAM,YAAY,QAAQ,YAAY,UAAU,yBAAyB;CACjF,MAAM,OAAO,SAAS,cAAc,iBAAiBC,WAAc,QAAQ,CAAC;CAC5E,MAAM,SAAS,SAAS,WAAW,iBAAiB,WAAW,MAAM;CACrE,sBAAsB,WAAW,KAAK,OAAO,GAAG,CAAC,UAAU,CAAC;CAE5D,MAAM,aAAa,OAAwC,IAAI;CAC/D,MAAM,cAAc,OAAO,KAAK;CAChC,MAAM,aAAa,OAAO,KAAK;CAC/B,MAAM,EAAE,KAAK,QAAQ,WAAW,OAAO;CAEvC,IAAI,CAAC,QAAQ,OAAO;CAEpB,OACE,oBAAC,OAAD;EACE,oBAAkB,KAAK;EACvB,iBAAe,OAAO,SAAS,GAAG,IAAI,MAAM,KAAA;EAC5C,iBAAe;EACf,iBAAe;EACf,kBAAgB,GAAG,OAAO;EAC1B,WAAW,GAAG,eAAe,EAAE,MAAM,KAAK,KAAK,CAAC,GAAG,SAAS;EAC5D,eAAa;EACb,iBAAe,MAAM,YAAY,KAAA;EACjC,MAAK;EACL,UAAU;EACV,OACE;GACE,iCAAiC,GAAG,KAAK;IACxC,WAAW,KAAK,QAAQ,CAAC,OAAO;GACjC,GAAG;EACL;EAEF,YAAY,UAAU,WAAW,YAAY,KAAK;EAClD,qBAAqB;GACnB,IAAI,CAAC,WAAW,SAAS,WAAW,MAAM;EAC5C;EACA,4BAA4B;GAC1B,IAAI,YAAY,SAAS,WAAW,KAAK,OAAO;GAChD,WAAW,UAAU;GACrB,YAAY,UAAU;EACxB;EACA,uBAAuB;GACrB,WAAW,KAAK,OAAO;GACvB,WAAW,UAAU;GACrB,YAAY,UAAU;EACxB;EACA,gBAAgB,UAAU;GACxB,WAAW,UAAU;GACrB,WAAW,UAAU;IAAE,GAAG,MAAM;IAAS,GAAG,MAAM;GAAQ;GAE1D,IAAI;IACF,MAAM,cAAc,kBAAkB,MAAM,SAAS;GACvD,QAAQ,CAER;EACF;EACA,gBAAgB,UAAU;GACxB,IAAI,CAAC,WAAW,SAAS;GACzB,MAAM,SAAS;IACb,GAAG,MAAM,UAAU,WAAW,QAAQ;IACtC,GAAG,MAAM,UAAU,WAAW,QAAQ;GACxC;GACA,IAAI,CAAC,YAAY,SAAS;IACxB,IAAI,KAAK,MAAM,OAAO,GAAG,OAAO,CAAC,IAAI,eAAe;IACpD,YAAY,UAAU;IACtB,WAAW,UAAU;IACrB,WAAW,KAAK,MAAM;GACxB;GACA,WAAW,KAAK,KAAK,MAAM;EAC7B;EACA,mBAAmB;GACjB,IAAI,YAAY,SAAS,WAAW,KAAK,IAAI;GAC7C,WAAW,UAAU;GACrB,YAAY,UAAU;EACxB;EACA,GAAI;CACL,CAAA;AAEL,CACF;AAEA,qBAAqB,cAAc;AAMnC,MAAa,uBAAuB,MACjC,EAAE,WAAW,yBAAyB,OAAO,GAAG,WAAW;CAC1D,MAAM,EAAE,MAAM,QAAQ,YAAY,WAAW,iBAAiB,yBAAyB;CAEvF,IAAI,CAAC,YAAY,OAAO;CAExB,MAAM,OAAO,aAAa,cAAc,SAAS,IAAI;CACrD,MAAM,QAAQ,KAAK,WAAW,SAAS;CACvC,MAAM,QAAQ,KAAK,WAAW,SAAS;CAEvC,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,eAAe,EAAE,UAAU,CAAC,GAAG,SAAS;EACtD,OAAO;GAAE,SAAS,SAAS,KAAA,IAAY,0BAA0B,IAAI;GAAG,GAAG;EAAM;EACjF,GAAI;EAEJ,UAAA,oBAAC,UAAD;GACE,cAAY,SAAS,mBAAmB;GACxC,MAAK;GACL,SAAS;GAET,UAAA,qBAAC,OAAD;IACE,MAAK;IACL,QAAQ,KAAK,WAAW,QAAQ;IAChC,SAAS,OAAO,KAAK,WAAW,QAAQ,MAAM,GAAG,KAAK,WAAW,QAAQ;IACzE,OAAO,KAAK,WAAW,QAAQ;IAJjC,UAAA,CAMG,UAAU,KAAK,WAAW,mBAAmB,eAAe,CAAC,KAAK,MACjE,oBAAC,QAAD;KAAS;KAAG,YAAS;KAAW,eAAc;KAAQ,aAAa,IAAI;IAAS,GAAnD,CAAmD,CACjF,GACD,oBAAC,KAAD;KACE,OAAO;MACL,QAAQ,GAAG,KAAK;MAChB,iBAAiB,GAAG,MAAM,KAAK,MAAM;MACrC,YAAY;KACd;KAEA,UAAA,oBAAC,QAAD;MACE,GAAG,YAAY,OAAO,KAAK;MAC3B,QAAO;MACP,eAAc;MACd,gBAAe;MACf,aAAa;KACd,CAAA;IACA,CAAA,CACA;;EACC,CAAA;CACL,CAAA;AAET,CACF;AAEA,qBAAqB,cAAc;AAInC,MAAa,0BAA0B,MACpC,EAAE,WAAW,GAAG,WAAW,oBAAC,OAAD;CAAK,WAAW,GAAG,OAAO,WAAW,SAAS;CAAG,GAAI;AAAO,CAAA,CAC1F;AAEA,wBAAwB,cAAc;AAItC,MAAa,qBAAqB,MAA+B,EAAE,WAAW,OAAO,GAAG,WACtF,oBAAC,OAAD;CAAK,WAAW,GAAG,OAAO,MAAM,SAAS;CAAG,OAAO;EAAE,MAAM;EAAG,GAAG;CAAM;CAAG,GAAI;AAAO,CAAA,CACtF;AAED,mBAAmB,cAAc;AAIjC,MAAa,uBAAuB,MAAiC,EAAE,WAAW,GAAG,WACnF,oBAAC,OAAD;CAAK,WAAW,GAAG,OAAO,QAAQ,SAAS;CAAG,GAAI;AAAO,CAAA,CAC1D;AAED,qBAAqB,cAAc;AAQnC,MAAa,uBAAuB,MACjC,EAAE,WAAW,OAAO,YAAY,OAAO,GAAG,WAAW;CACpD,MAAM,EAAE,iBAAiB,yBAAyB;CAElD,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,OAAO,QAAQ,SAAS;EAAG,GAAI;EAAlD,UAAA;GACE,oBAAC,YAAD;IAAY,MAAM;IAAa,MAAM;IAAS,SAAS,cAAc;GAAe,CAAA;GACnF;GACA;EACE;;AAET,CACF;AAEA,qBAAqB,cAAc"}
+{"version":3,"file":"atoms.mjs","names":["useControlledState","getHandleSize"],"sources":["../../../src/base-ui/DraggablePanel/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { ChevronLeft } from 'lucide-react';\nimport type { HTMLMotionProps, MotionStyle } from 'motion/react';\nimport { useTransform } from 'motion/react';\nimport {\n  type CSSProperties,\n  memo,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport ActionIcon from '@/base-ui/ActionIcon';\nimport { useMotionComponent } from '@/MotionProvider';\nimport type { DivProps } from '@/types';\n\nimport { DraggablePanelContext, useDraggablePanelContext } from './context';\nimport type { Placement } from './core/axes';\nimport { AXES } from './core/axes';\nimport type { PanelControllerOptions } from './core/controller';\nimport { createPanelController } from './core/controller';\nimport { coarsePointer, handleSize as getHandleSize } from './core/env';\nimport { useIsomorphicLayoutEffect, useStore } from './core/internal';\nimport { timing } from './core/transition';\nimport { BOW, handleVariants, rootVariants, styles, toggleVariants } from './style';\n\nconst PAN_THRESHOLD = 3;\n\nconst BOW_CX = 15;\nconst BOW_CY = BOW.half + 8;\nconst BOW_W = BOW_CX * 2;\nconst BOW_H = BOW_CY * 2;\n\nconst bowPath = (direction: 1 | -1, verticalSeam: boolean) => {\n  const k = BOW.half * BOW.curve;\n  const b = BOW_CX + BOW.bulge * direction;\n  const a0 = BOW_CY - BOW.half;\n  const a1 = BOW_CY + BOW.half;\n  // `a` runs along the seam, `b` across it; a horizontal seam swaps the two.\n  const pt = (along: number, across: number) =>\n    verticalSeam ? `${along} ${across}` : `${across} ${along}`;\n  return [\n    `M${pt(BOW_CX, a0)}`,\n    `C${pt(BOW_CX, a0 + k)} ${pt(b, BOW_CY - k)} ${pt(b, BOW_CY)}`,\n    `C${pt(b, BOW_CY + k)} ${pt(BOW_CX, a1 - k)} ${pt(BOW_CX, a1)}`,\n  ].join(' ');\n};\n\nconst BOW_PATHS = {\n  horizontalSeam: [bowPath(-1, false), bowPath(1, false)],\n  verticalSeam: [bowPath(-1, true), bowPath(1, true)],\n};\n\n/** The chevron points the way a click moves the panel. */\nconst CHEVRON_TURN = { bottom: 270, left: 0, right: 180, top: 90 } as const;\n\nconst chevronPath = (cx: number, cy: number) =>\n  `M${cx + 2.4} ${cy - 4.8} L${cx - 2.4} ${cy} L${cx + 2.4} ${cy + 4.8}`;\n\nconst ORIGIN_MAP = {\n  bottom: 'center bottom',\n  left: 'left center',\n  right: 'right center',\n  top: 'center top',\n} as const;\n\nconst COLLAPSED_SCALE = 0.97;\n\nconst EDGE_INSET = {\n  bottom: 'insetBlockEnd',\n  left: 'insetInlineStart',\n  right: 'insetInlineEnd',\n  top: 'insetBlockStart',\n} as const;\n\nexport interface DraggablePanelRootProps extends Omit<DivProps, 'onDrag'> {\n  backgroundColor?: string;\n  collapseThreshold?: number;\n  defaultExpand?: boolean;\n  defaultSize?: number;\n  expand?: boolean;\n  expandable?: boolean;\n  max?: number;\n  min?: number;\n  mode?: 'fixed' | 'float';\n  onExpandChange?: (expand: boolean) => void;\n  onSizeChange?: (size: number, delta: number) => void;\n  onSizeDragging?: (size: number, delta: number) => void;\n  placement?: Placement;\n  showBorder?: boolean;\n  size?: number;\n}\n\nexport const DraggablePanelRoot = memo<DraggablePanelRootProps>(\n  ({\n    backgroundColor,\n    children,\n    className,\n    collapseThreshold,\n    defaultExpand = true,\n    defaultSize,\n    expand,\n    expandable = true,\n    max,\n    min = 0,\n    mode = 'fixed',\n    onExpandChange,\n    onSizeChange,\n    onSizeDragging,\n    placement = 'right',\n    showBorder = true,\n    size,\n    style,\n    ...rest\n  }) => {\n    const axis = AXES[placement];\n    const fallbackSize = axis.vertical ? 180 : 280;\n    const resolvedDefaultSize = defaultSize ?? fallbackSize;\n\n    const [isExpand, setIsExpand] = useControlledState(defaultExpand, {\n      onChange: onExpandChange,\n      value: expand,\n    });\n    const [innerSize, setInnerSize] = useState(resolvedDefaultSize);\n    const currentSize = size ?? innerSize;\n\n    const commitSize = useCallback(\n      (next: number, delta: number) => {\n        if (size === undefined) setInnerSize(next);\n        onSizeChange?.(next, delta);\n      },\n      [onSizeChange, size],\n    );\n\n    const options: PanelControllerOptions = {\n      collapseThreshold,\n      defaultSize: resolvedDefaultSize,\n      expand: isExpand,\n      max,\n      min,\n      onExpandChange: setIsExpand,\n      onSizeChange: commitSize,\n      onSizeDragging,\n      placement,\n      size: currentSize,\n    };\n\n    const [controller] = useState(() => createPanelController(options));\n    const state = useStore(controller.subscribe, () => controller.state);\n    const elementRef = useRef<HTMLElement>(null);\n\n    useIsomorphicLayoutEffect(() => {\n      controller.sync(options);\n    });\n\n    useIsomorphicLayoutEffect(() => {\n      const node = elementRef.current;\n      return node ? controller.attach(node) : undefined;\n    }, [controller]);\n\n    const toggleExpand = useCallback(() => {\n      if (expandable) setIsExpand(!isExpand);\n    }, [expandable, isExpand, setIsExpand]);\n\n    const context = useMemo(\n      () => ({\n        axis,\n        controller,\n        expand: isExpand,\n        expandable,\n        placement,\n        showBorder,\n        state,\n        toggleExpand,\n      }),\n      [axis, controller, isExpand, expandable, placement, showBorder, state, toggleExpand],\n    );\n\n    return (\n      <DraggablePanelContext value={context}>\n        <aside\n          className={cx(rootVariants({ mode, placement }), className)}\n          data-expand={isExpand}\n          data-expandable={expandable}\n          data-resizing={state.dragging}\n          ref={elementRef}\n          style={\n            {\n              '--draggable-panel-bg': backgroundColor || '',\n              'flexDirection': axis.vertical ? 'column' : 'row',\n              ...style,\n            } as CSSProperties\n          }\n          {...rest}\n        >\n          {children}\n        </aside>\n      </DraggablePanelContext>\n    );\n  },\n);\n\nDraggablePanelRoot.displayName = 'DraggablePanelRoot';\n\nexport interface DraggablePanelContentProps extends Omit<DivProps, 'onDrag'> {}\n\nexport const DraggablePanelContent = memo<DraggablePanelContentProps>(\n  ({ children, className, style, ...rest }) => {\n    const Motion = useMotionComponent();\n    const { axis, controller, expand, placement, state } = useDraggablePanelContext();\n    const extent = useTransform(controller.motion.size, (value) => Math.max(0, value));\n    // Subscribed, not read: a collapse that changes only the target would otherwise\n    // leave the content unclipped and painted outside the zero-width box.\n    const target = useStore(controller.subscribe, () => controller.target);\n    const clipping = state.dragging || state.folding || target === 0;\n    const shrunk = state.collapsing || !expand;\n\n    return (\n      <Motion.div\n        inert={!expand}\n        style={\n          {\n            display: 'flex',\n            flexDirection: axis.vertical ? 'column' : 'row',\n            flexShrink: 0,\n            justifyContent: axis.anchorEnd ? 'flex-end' : 'flex-start',\n            overflow: clipping ? 'clip' : 'visible',\n            [axis.cross]: '100%',\n            [axis.extent]: extent,\n          } as MotionStyle\n        }\n      >\n        <Motion.div\n          animate={{ scale: shrunk ? COLLAPSED_SCALE : 1 }}\n          className={cx(styles.content, className)}\n          transition={timing()}\n          style={\n            {\n              transformOrigin: ORIGIN_MAP[placement],\n              [axis.cross]: '100%',\n              [axis.extent]: controller.motion.content,\n              ...style,\n            } as MotionStyle\n          }\n          {...(rest as HTMLMotionProps<'div'>)}\n        >\n          {children}\n        </Motion.div>\n      </Motion.div>\n    );\n  },\n);\n\nDraggablePanelContent.displayName = 'DraggablePanelContent';\n\nexport interface DraggablePanelHandleProps extends Omit<DivProps, 'onDrag'> {\n  wideArea?: boolean;\n}\n\nexport const DraggablePanelHandle = memo<DraggablePanelHandleProps>(\n  ({ className, style, wideArea = true, ...rest }) => {\n    const { axis, controller, expand, showBorder, state } = useDraggablePanelContext();\n    const size = useStore(coarsePointer.subscribe, () => getHandleSize(wideArea));\n    const target = useStore(controller.subscribe, () => controller.target);\n    useEffect(() => () => controller.drag.cancel(), [controller]);\n\n    const pressedRef = useRef<{ x: number; y: number } | null>(null);\n    const draggingRef = useRef(false);\n    const draggedRef = useRef(false);\n    const { max, min } = controller.bounds();\n\n    if (!expand) return null;\n\n    return (\n      <div\n        aria-orientation={axis.ariaOrientation}\n        aria-valuemax={Number.isFinite(max) ? max : undefined}\n        aria-valuemin={min}\n        aria-valuenow={target}\n        aria-valuetext={`${target} pixels`}\n        className={cx(handleVariants({ edge: axis.edge }), className)}\n        data-border={showBorder}\n        data-resizing={state.dragging || undefined}\n        role=\"separator\"\n        tabIndex={0}\n        style={\n          {\n            '--draggable-panel-handle-size': `${size}px`,\n            [EDGE_INSET[axis.edge]]: -size / 2,\n            ...style,\n          } as CSSProperties\n        }\n        onKeyDown={(event) => controller.resizeByKey(event)}\n        onDoubleClick={() => {\n          if (!draggedRef.current) controller.reset();\n        }}\n        // Capture can be stolen mid-drag (another setPointerCapture, an OOPIF under the\n        // cursor) and the pointerup then never reaches us; the pointer is wherever the\n        // user last dragged it, so commit rather than snap back.\n        onLostPointerCapture={() => {\n          if (draggingRef.current) controller.drag.end();\n          pressedRef.current = null;\n          draggingRef.current = false;\n        }}\n        onPointerCancel={() => {\n          controller.drag.cancel();\n          pressedRef.current = null;\n          draggingRef.current = false;\n        }}\n        onPointerDown={(event) => {\n          draggedRef.current = false;\n          pressedRef.current = { x: event.clientX, y: event.clientY };\n          // A synthetic pointerdown carries no active pointer, and capturing throws.\n          try {\n            event.currentTarget.setPointerCapture(event.pointerId);\n          } catch {\n            /* empty */\n          }\n        }}\n        onPointerMove={(event) => {\n          if (!pressedRef.current) return;\n          const offset = {\n            x: event.clientX - pressedRef.current.x,\n            y: event.clientY - pressedRef.current.y,\n          };\n          if (!draggingRef.current) {\n            if (Math.hypot(offset.x, offset.y) < PAN_THRESHOLD) return;\n            draggingRef.current = true;\n            draggedRef.current = true;\n            controller.drag.start();\n          }\n          controller.drag.move(offset);\n        }}\n        onPointerUp={() => {\n          if (draggingRef.current) controller.drag.end();\n          pressedRef.current = null;\n          draggingRef.current = false;\n        }}\n        {...rest}\n      />\n    );\n  },\n);\n\nDraggablePanelHandle.displayName = 'DraggablePanelHandle';\n\nexport interface DraggablePanelToggleProps extends Omit<DivProps, 'onDrag'> {\n  showHandleWhenCollapsed?: boolean;\n}\n\nexport const DraggablePanelToggle = memo<DraggablePanelToggleProps>(\n  ({ className, showHandleWhenCollapsed, style, ...rest }) => {\n    const { axis, expand, expandable, placement, toggleExpand } = useDraggablePanelContext();\n\n    if (!expandable) return null;\n\n    const turn = CHEVRON_TURN[placement] + (expand ? 0 : 180);\n    const chevX = axis.vertical ? BOW_CY : BOW_CX;\n    const chevY = axis.vertical ? BOW_CX : BOW_CY;\n\n    return (\n      <div\n        className={cx(toggleVariants({ placement }), className)}\n        style={{ opacity: expand ? undefined : showHandleWhenCollapsed ? 1 : 0, ...style }}\n        {...rest}\n      >\n        <button\n          aria-label={expand ? 'Collapse panel' : 'Expand panel'}\n          type=\"button\"\n          onClick={toggleExpand}\n        >\n          <svg\n            fill=\"none\"\n            height={axis.vertical ? BOW_W : BOW_H}\n            viewBox={`0 0 ${axis.vertical ? BOW_H : BOW_W} ${axis.vertical ? BOW_W : BOW_H}`}\n            width={axis.vertical ? BOW_H : BOW_W}\n          >\n            {BOW_PATHS[axis.vertical ? 'horizontalSeam' : 'verticalSeam'].map((d) => (\n              <path d={d} data-bow=\"\" key={d} strokeLinecap=\"round\" strokeWidth={BOW.stroke} />\n            ))}\n            <g\n              style={{\n                rotate: `${turn}deg`,\n                transformOrigin: `${chevX}px ${chevY}px`,\n                transition: 'rotate 0.25s var(--ant-motion-ease-out, ease)',\n              }}\n            >\n              <path\n                d={chevronPath(chevX, chevY)}\n                stroke=\"currentColor\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={1.6}\n              />\n            </g>\n          </svg>\n        </button>\n      </div>\n    );\n  },\n);\n\nDraggablePanelToggle.displayName = 'DraggablePanelToggle';\n\nexport type DraggablePanelContainerProps = DivProps;\n\nexport const DraggablePanelContainer = memo<DraggablePanelContainerProps>(\n  ({ className, ...rest }) => <div className={cx(styles.container, className)} {...rest} />,\n);\n\nDraggablePanelContainer.displayName = 'DraggablePanelContainer';\n\nexport type DraggablePanelBodyProps = DivProps;\n\nexport const DraggablePanelBody = memo<DraggablePanelBodyProps>(({ className, style, ...rest }) => (\n  <div className={cx(styles.body, className)} style={{ flex: 1, ...style }} {...rest} />\n));\n\nDraggablePanelBody.displayName = 'DraggablePanelBody';\n\nexport type DraggablePanelFooterProps = DivProps;\n\nexport const DraggablePanelFooter = memo<DraggablePanelFooterProps>(({ className, ...rest }) => (\n  <div className={cx(styles.footer, className)} {...rest} />\n));\n\nDraggablePanelFooter.displayName = 'DraggablePanelFooter';\n\nexport interface DraggablePanelHeaderProps extends Omit<DivProps, 'children' | 'title'> {\n  extra?: ReactNode;\n  onCollapse?: () => void;\n  title?: ReactNode;\n}\n\nexport const DraggablePanelHeader = memo<DraggablePanelHeaderProps>(\n  ({ className, extra, onCollapse, title, ...rest }) => {\n    const { toggleExpand } = useDraggablePanelContext();\n\n    return (\n      <div className={cx(styles.header, className)} {...rest}>\n        <ActionIcon icon={ChevronLeft} size={'small'} onClick={onCollapse ?? toggleExpand} />\n        {title}\n        {extra}\n      </div>\n    );\n  },\n);\n\nDraggablePanelHeader.displayName = 'DraggablePanelHeader';\n"],"mappings":"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"}

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

@@ -186,10 +186,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
 
     background: ${cssVar.colorBgElevated};
     outline: none;
-    box-shadow:
-      0 0 0 1px ${cssVar.colorBorder},
-      0 4px 12px 0 rgb(0 0 0 / 8%),
-      0 1px 3px 0 rgb(0 0 0 / 6%);
+    box-shadow: ${cssVar.boxShadowSecondary}, var(--lobe-ring);
 
     &[data-has-header],
     &:has(> [data-slot='header']) {

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    /* A menu item pinned in a slot keeps the same inset as the rows above it. */\n    &:has(> [role^='menuitem']) {\n      padding-block: 4px;\n      padding-inline: 0;\n    }\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    &:has(> [role^='menuitem']) {\n      padding-block: 4px;\n      padding-inline: 0;\n    }\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    --lobe-menu-popup-padding: 4px;\n\n    overflow-y: auto;\n\n    min-width: 220px;\n    max-height: var(--available-height);\n    padding: var(--lobe-menu-popup-padding);\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    &:has(> [data-slot='header']) {\n      padding-block-start: 0;\n    }\n\n    &[data-has-footer],\n    &:has(> [data-slot='footer']) {\n      padding-block-end: 0;\n    }\n\n    &:has(> [data-virtual]) {\n      --lobe-virtual-scroll-inset: var(--lobe-menu-popup-padding);\n\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\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;;;;;;;;CASrD,QAAQ,GAAG;;;;kCAIqB,OAAO,YAAY;;;;;;;CAQnD,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;;;;;;;;qBAQS,OAAO,aAAa;;kBAEvB,OAAO,gBAAgB;;;kBAGvB,OAAO,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCnC,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    /* A menu item pinned in a slot keeps the same inset as the rows above it. */\n    &:has(> [role^='menuitem']) {\n      padding-block: 4px;\n      padding-inline: 0;\n    }\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    &:has(> [role^='menuitem']) {\n      padding-block: 4px;\n      padding-inline: 0;\n    }\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    --lobe-menu-popup-padding: 4px;\n\n    overflow-y: auto;\n\n    min-width: 220px;\n    max-height: var(--available-height);\n    padding: var(--lobe-menu-popup-padding);\n    border-radius: ${cssVar.borderRadius};\n\n    background: ${cssVar.colorBgElevated};\n    outline: none;\n    box-shadow: ${cssVar.boxShadowSecondary}, var(--lobe-ring);\n\n    &[data-has-header],\n    &:has(> [data-slot='header']) {\n      padding-block-start: 0;\n    }\n\n    &[data-has-footer],\n    &:has(> [data-slot='footer']) {\n      padding-block-end: 0;\n    }\n\n    &:has(> [data-virtual]) {\n      --lobe-virtual-scroll-inset: var(--lobe-menu-popup-padding);\n\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\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;;;;;;;;CASrD,QAAQ,GAAG;;;;kCAIqB,OAAO,YAAY;;;;;;;CAQnD,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;;;;;;;;qBAQS,OAAO,aAAa;;kBAEvB,OAAO,gBAAgB;;kBAEvB,OAAO,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8B1C,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/style.mjs

@@ -44,9 +44,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     max-height: calc(100dvh - 32px - var(--floating-panel-reserve-block-end, 0px));
     border-radius: 12px;
 
-    box-shadow:
-      0 6px 24px 0 rgb(0 0 0 / 8%),
-      0 2px 6px 0 rgb(0 0 0 / 4%);
+    box-shadow: ${cssVar.boxShadowSecondary}, var(--lobe-ring);
   `,
 	panelTop: css`
     transform-origin: 100% 0;

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\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"}
+{"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: ${cssVar.boxShadowSecondary}, var(--lobe-ring);\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;;;;;;;kBAOM,OAAO,mBAAmB;;CAE1C,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/FloatingSheet/style.mjs

@@ -16,7 +16,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     border-radius: 12px;
   `,
 	elevated: css`
-    box-shadow: ${cssVar.boxShadowSecondary};
+    box-shadow: ${cssVar.boxShadowSecondary}, var(--lobe-ring);
   `,
 	embedded: css`
     border: 1px solid ${cssVar.colorBorderSecondary};

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/FloatingSheet/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nconst transitionDuration = '0.3s';\nconst transitionEasing = 'cubic-bezier(0.32, 0.72, 0, 1)';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  root: css`\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n    background: ${cssVar.colorBgContainer};\n  `,\n  overlayRadius: css`\n    border-radius: 12px 12px 0 0;\n  `,\n  inlineRadius: css`\n    border-radius: 12px;\n  `,\n  elevated: css`\n    box-shadow: ${cssVar.boxShadowSecondary};\n  `,\n  embedded: css`\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    box-shadow: none;\n  `,\n  overlay: css`\n    position: absolute;\n    z-index: 10;\n    inset-block-end: 0;\n    inset-inline: 0;\n  `,\n  inline: css`\n    position: relative;\n    z-index: 1;\n    flex-shrink: 0;\n  `,\n  transition: css`\n    transition:\n      height ${transitionDuration} ${transitionEasing},\n      margin-block-start ${transitionDuration} ${transitionEasing};\n  `,\n  hidden: css`\n    visibility: hidden;\n  `,\n  header: css`\n    cursor: grab;\n    user-select: none;\n\n    display: flex;\n    flex-direction: column;\n    flex-shrink: 0;\n    align-items: center;\n\n    padding-block: 8px 4px;\n    padding-inline: 16px;\n  `,\n  headerDragging: css`\n    cursor: grabbing;\n  `,\n  handle: css`\n    width: 32px;\n    height: 4px;\n    margin-block-end: 8px;\n    border-radius: 2px;\n\n    background: ${cssVar.colorBorderSecondary};\n  `,\n  headerContent: css`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    width: 100%;\n    min-height: 24px;\n  `,\n  headerTitle: css`\n    flex: 1;\n    min-width: 0;\n  `,\n  headerActions: css`\n    display: flex;\n    flex-shrink: 0;\n    gap: 4px;\n    align-items: center;\n  `,\n  content: css`\n    overflow: auto;\n    flex: 1;\n    min-height: 0;\n  `,\n}));\n"],"mappings":";;AAEA,MAAM,qBAAqB;AAC3B,MAAM,mBAAmB;AAEzB,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;;;;kBAIO,OAAO,iBAAiB;;CAExC,eAAe,GAAG;;;CAGlB,cAAc,GAAG;;;CAGjB,UAAU,GAAG;kBACG,OAAO,mBAAmB;;CAE1C,UAAU,GAAG;wBACS,OAAO,qBAAqB;;;CAGlD,SAAS,GAAG;;;;;;CAMZ,QAAQ,GAAG;;;;;CAKX,YAAY,GAAG;;eAEF,mBAAmB,GAAG,iBAAiB;2BAC3B,mBAAmB,GAAG,iBAAiB;;CAEhE,QAAQ,GAAG;;;CAGX,QAAQ,GAAG;;;;;;;;;;;;CAYX,gBAAgB,GAAG;;;CAGnB,QAAQ,GAAG;;;;;;kBAMK,OAAO,qBAAqB;;CAE5C,eAAe,GAAG;;;;;;;;CAQlB,aAAa,GAAG;;;;CAIhB,eAAe,GAAG;;;;;;CAMlB,SAAS,GAAG;;;;;AAKd,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/FloatingSheet/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nconst transitionDuration = '0.3s';\nconst transitionEasing = 'cubic-bezier(0.32, 0.72, 0, 1)';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  root: css`\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n    background: ${cssVar.colorBgContainer};\n  `,\n  overlayRadius: css`\n    border-radius: 12px 12px 0 0;\n  `,\n  inlineRadius: css`\n    border-radius: 12px;\n  `,\n  elevated: css`\n    box-shadow: ${cssVar.boxShadowSecondary}, var(--lobe-ring);\n  `,\n  embedded: css`\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    box-shadow: none;\n  `,\n  overlay: css`\n    position: absolute;\n    z-index: 10;\n    inset-block-end: 0;\n    inset-inline: 0;\n  `,\n  inline: css`\n    position: relative;\n    z-index: 1;\n    flex-shrink: 0;\n  `,\n  transition: css`\n    transition:\n      height ${transitionDuration} ${transitionEasing},\n      margin-block-start ${transitionDuration} ${transitionEasing};\n  `,\n  hidden: css`\n    visibility: hidden;\n  `,\n  header: css`\n    cursor: grab;\n    user-select: none;\n\n    display: flex;\n    flex-direction: column;\n    flex-shrink: 0;\n    align-items: center;\n\n    padding-block: 8px 4px;\n    padding-inline: 16px;\n  `,\n  headerDragging: css`\n    cursor: grabbing;\n  `,\n  handle: css`\n    width: 32px;\n    height: 4px;\n    margin-block-end: 8px;\n    border-radius: 2px;\n\n    background: ${cssVar.colorBorderSecondary};\n  `,\n  headerContent: css`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    width: 100%;\n    min-height: 24px;\n  `,\n  headerTitle: css`\n    flex: 1;\n    min-width: 0;\n  `,\n  headerActions: css`\n    display: flex;\n    flex-shrink: 0;\n    gap: 4px;\n    align-items: center;\n  `,\n  content: css`\n    overflow: auto;\n    flex: 1;\n    min-height: 0;\n  `,\n}));\n"],"mappings":";;AAEA,MAAM,qBAAqB;AAC3B,MAAM,mBAAmB;AAEzB,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;;;;kBAIO,OAAO,iBAAiB;;CAExC,eAAe,GAAG;;;CAGlB,cAAc,GAAG;;;CAGjB,UAAU,GAAG;kBACG,OAAO,mBAAmB;;CAE1C,UAAU,GAAG;wBACS,OAAO,qBAAqB;;;CAGlD,SAAS,GAAG;;;;;;CAMZ,QAAQ,GAAG;;;;;CAKX,YAAY,GAAG;;eAEF,mBAAmB,GAAG,iBAAiB;2BAC3B,mBAAmB,GAAG,iBAAiB;;CAEhE,QAAQ,GAAG;;;CAGX,QAAQ,GAAG;;;;;;;;;;;;CAYX,gBAAgB,GAAG;;;CAGnB,QAAQ,GAAG;;;;;;kBAMK,OAAO,qBAAqB;;CAE5C,eAAe,GAAG;;;;;;;;CAQlB,aAAa,GAAG;;;;CAIhB,eAAe,GAAG;;;;;;CAMlB,SAAS,GAAG;;;;;AAKd,EAAE"}

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

@@ -128,11 +128,10 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     width: calc(100% - 32px);
     max-width: 520px;
     max-height: calc(100dvh - 64px);
-    border: 1px solid ${cssVar.colorBorderSecondary};
     border-radius: 12px;
 
     background: ${cssVar.colorBgElevated};
-    box-shadow: ${cssVar.boxShadow};
+    box-shadow: ${cssVar.boxShadow}, var(--lobe-ring);
 
     transition:
       transform 220ms cubic-bezier(0.32, 0.72, 0, 1),

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Modal/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nimport { focusRing } from '@/base-ui/focusRing';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  backdrop: css`\n    position: fixed;\n    z-index: 1200;\n    inset: 0;\n\n    background: color-mix(in srgb, ${cssVar.colorBgContainer} 60%, transparent);\n\n    transition: opacity 180ms cubic-bezier(0.32, 0.72, 0, 1);\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      opacity: 0;\n    }\n  `,\n\n  close: css`\n    cursor: pointer;\n\n    position: absolute;\n    inset-block-start: 8px;\n    inset-inline-end: 12px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    width: 32px;\n    height: 32px;\n    padding: 0;\n    border: none;\n    border-radius: 12px;\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: transparent;\n\n    transition: all 160ms cubic-bezier(0.32, 0.72, 0, 1);\n\n    &:hover {\n      transform: scale(1.04);\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    ${focusRing};\n  `,\n\n  closeInline: css`\n    cursor: pointer;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    width: 32px;\n    height: 32px;\n    padding: 0;\n    border: none;\n    border-radius: 12px;\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: transparent;\n\n    transition: all 160ms cubic-bezier(0.32, 0.72, 0, 1);\n\n    &:hover {\n      transform: scale(1.04);\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    ${focusRing};\n  `,\n\n  content: css`\n    overflow: hidden auto;\n    padding-block: 0 16px;\n    padding-inline: 16px;\n  `,\n\n  contentNoHeader: css`\n    padding-block-start: 16px;\n  `,\n\n  footer: css`\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    justify-content: flex-end;\n\n    padding-block: 12px;\n    padding-inline: 16px;\n  `,\n\n  header: css`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    min-height: 48px;\n    padding-block: 8px;\n    padding-inline: 16px;\n  `,\n\n  headerDraggable: css`\n    cursor: default;\n    user-select: none;\n  `,\n\n  popup: css`\n    pointer-events: none;\n\n    position: fixed;\n    z-index: 1201;\n    inset: 0;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  `,\n\n  popupInner: css`\n    pointer-events: auto;\n\n    position: relative;\n\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n\n    box-sizing: border-box;\n    width: calc(100% - 32px);\n    max-width: 520px;\n    max-height: calc(100dvh - 64px);\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: 12px;\n\n    background: ${cssVar.colorBgElevated};\n    box-shadow: ${cssVar.boxShadow};\n\n    transition:\n      transform 220ms cubic-bezier(0.32, 0.72, 0, 1),\n      opacity 220ms cubic-bezier(0.32, 0.72, 0, 1);\n\n    &[data-starting-style] {\n      transform: scale(0.97);\n      opacity: 0;\n    }\n\n    &[data-ending-style] {\n      transform: scale(0.98);\n      opacity: 0;\n      transition-timing-function: cubic-bezier(0.4, 0, 1, 1);\n      transition-duration: 120ms;\n    }\n  `,\n\n  title: css`\n    margin: 0;\n\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 1.4;\n    color: ${cssVar.colorText};\n  `,\n\n  loadingSpinner: css`\n    @keyframes modal-spin {\n      to {\n        transform: rotate(360deg);\n      }\n    }\n\n    display: inline-block;\n\n    width: 14px;\n    height: 14px;\n    border: 2px solid currentcolor;\n    border-block-start-color: transparent;\n    border-radius: 50%;\n\n    animation: modal-spin 0.6s linear infinite;\n  `,\n\n  fullscreenPopupInner: css`\n    width: 100% !important;\n    max-width: 100% !important;\n    height: 100dvh !important;\n    max-height: 100dvh !important;\n    border: none;\n    border-radius: 12px;\n  `,\n\n  fullscreenToggle: css`\n    cursor: pointer;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    width: 28px;\n    height: 28px;\n    padding: 0;\n    border: none;\n    border-radius: 12px;\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: transparent;\n\n    transition: all 160ms cubic-bezier(0.32, 0.72, 0, 1);\n\n    &:hover {\n      transform: scale(1.04);\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    ${focusRing};\n  `,\n\n  headerActions: css`\n    display: flex;\n    gap: 4px;\n    align-items: center;\n    margin-inline-end: -4px;\n  `,\n\n  denyAnimation: css`\n    @keyframes modal-deny {\n      0%,\n      100% {\n        transform: translateX(0);\n      }\n\n      20% {\n        transform: translateX(-5px);\n      }\n\n      40% {\n        transform: translateX(5px);\n      }\n\n      60% {\n        transform: translateX(-3px);\n      }\n\n      80% {\n        transform: translateX(2px);\n      }\n    }\n\n    animation: modal-deny 280ms cubic-bezier(0.36, 0.66, 0.04, 1);\n  `,\n\n  viewport: css`\n    position: fixed;\n    z-index: 1200;\n    inset: 0;\n    overflow: auto;\n  `,\n}));\n"],"mappings":";;;AAIA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,UAAU,GAAG;;;;;qCAKsB,OAAO,iBAAiB;;;;;;;;;CAU3D,OAAO,GAAG;;;;;;;;;;;;;;;;;aAiBC,OAAO,kBAAkB;;;;;;;;eAQvB,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;MAGxC,UAAU;;CAGd,aAAa,GAAG;;;;;;;;;;;;;aAaL,OAAO,kBAAkB;;;;;;;;eAQvB,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;MAGxC,UAAU;;CAGd,SAAS,GAAG;;;;;CAMZ,iBAAiB,GAAG;;;CAIpB,QAAQ,GAAG;;;;;;;;;CAUX,QAAQ,GAAG;;;;;;;;;CAUX,iBAAiB,GAAG;;;;CAKpB,OAAO,GAAG;;;;;;;;;;;CAYV,YAAY,GAAG;;;;;;;;;;;;;wBAaO,OAAO,qBAAqB;;;kBAGlC,OAAO,gBAAgB;kBACvB,OAAO,UAAU;;;;;;;;;;;;;;;;;;CAmBjC,OAAO,GAAG;;;;;;aAMC,OAAO,UAAU;;CAG5B,gBAAgB,GAAG;;;;;;;;;;;;;;;;;CAkBnB,sBAAsB,GAAG;;;;;;;;CASzB,kBAAkB,GAAG;;;;;;;;;;;;;aAaV,OAAO,kBAAkB;;;;;;;;eAQvB,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;MAGxC,UAAU;;CAGd,eAAe,GAAG;;;;;;CAOlB,eAAe,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BlB,UAAU,GAAG;;;;;;AAMf,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Modal/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nimport { focusRing } from '@/base-ui/focusRing';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  backdrop: css`\n    position: fixed;\n    z-index: 1200;\n    inset: 0;\n\n    background: color-mix(in srgb, ${cssVar.colorBgContainer} 60%, transparent);\n\n    transition: opacity 180ms cubic-bezier(0.32, 0.72, 0, 1);\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      opacity: 0;\n    }\n  `,\n\n  close: css`\n    cursor: pointer;\n\n    position: absolute;\n    inset-block-start: 8px;\n    inset-inline-end: 12px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    width: 32px;\n    height: 32px;\n    padding: 0;\n    border: none;\n    border-radius: 12px;\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: transparent;\n\n    transition: all 160ms cubic-bezier(0.32, 0.72, 0, 1);\n\n    &:hover {\n      transform: scale(1.04);\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    ${focusRing};\n  `,\n\n  closeInline: css`\n    cursor: pointer;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    width: 32px;\n    height: 32px;\n    padding: 0;\n    border: none;\n    border-radius: 12px;\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: transparent;\n\n    transition: all 160ms cubic-bezier(0.32, 0.72, 0, 1);\n\n    &:hover {\n      transform: scale(1.04);\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    ${focusRing};\n  `,\n\n  content: css`\n    overflow: hidden auto;\n    padding-block: 0 16px;\n    padding-inline: 16px;\n  `,\n\n  contentNoHeader: css`\n    padding-block-start: 16px;\n  `,\n\n  footer: css`\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    justify-content: flex-end;\n\n    padding-block: 12px;\n    padding-inline: 16px;\n  `,\n\n  header: css`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    min-height: 48px;\n    padding-block: 8px;\n    padding-inline: 16px;\n  `,\n\n  headerDraggable: css`\n    cursor: default;\n    user-select: none;\n  `,\n\n  popup: css`\n    pointer-events: none;\n\n    position: fixed;\n    z-index: 1201;\n    inset: 0;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  `,\n\n  popupInner: css`\n    pointer-events: auto;\n\n    position: relative;\n\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n\n    box-sizing: border-box;\n    width: calc(100% - 32px);\n    max-width: 520px;\n    max-height: calc(100dvh - 64px);\n    border-radius: 12px;\n\n    background: ${cssVar.colorBgElevated};\n    box-shadow: ${cssVar.boxShadow}, var(--lobe-ring);\n\n    transition:\n      transform 220ms cubic-bezier(0.32, 0.72, 0, 1),\n      opacity 220ms cubic-bezier(0.32, 0.72, 0, 1);\n\n    &[data-starting-style] {\n      transform: scale(0.97);\n      opacity: 0;\n    }\n\n    &[data-ending-style] {\n      transform: scale(0.98);\n      opacity: 0;\n      transition-timing-function: cubic-bezier(0.4, 0, 1, 1);\n      transition-duration: 120ms;\n    }\n  `,\n\n  title: css`\n    margin: 0;\n\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 1.4;\n    color: ${cssVar.colorText};\n  `,\n\n  loadingSpinner: css`\n    @keyframes modal-spin {\n      to {\n        transform: rotate(360deg);\n      }\n    }\n\n    display: inline-block;\n\n    width: 14px;\n    height: 14px;\n    border: 2px solid currentcolor;\n    border-block-start-color: transparent;\n    border-radius: 50%;\n\n    animation: modal-spin 0.6s linear infinite;\n  `,\n\n  fullscreenPopupInner: css`\n    width: 100% !important;\n    max-width: 100% !important;\n    height: 100dvh !important;\n    max-height: 100dvh !important;\n    border: none;\n    border-radius: 12px;\n  `,\n\n  fullscreenToggle: css`\n    cursor: pointer;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    width: 28px;\n    height: 28px;\n    padding: 0;\n    border: none;\n    border-radius: 12px;\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: transparent;\n\n    transition: all 160ms cubic-bezier(0.32, 0.72, 0, 1);\n\n    &:hover {\n      transform: scale(1.04);\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    ${focusRing};\n  `,\n\n  headerActions: css`\n    display: flex;\n    gap: 4px;\n    align-items: center;\n    margin-inline-end: -4px;\n  `,\n\n  denyAnimation: css`\n    @keyframes modal-deny {\n      0%,\n      100% {\n        transform: translateX(0);\n      }\n\n      20% {\n        transform: translateX(-5px);\n      }\n\n      40% {\n        transform: translateX(5px);\n      }\n\n      60% {\n        transform: translateX(-3px);\n      }\n\n      80% {\n        transform: translateX(2px);\n      }\n    }\n\n    animation: modal-deny 280ms cubic-bezier(0.36, 0.66, 0.04, 1);\n  `,\n\n  viewport: css`\n    position: fixed;\n    z-index: 1200;\n    inset: 0;\n    overflow: auto;\n  `,\n}));\n"],"mappings":";;;AAIA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,UAAU,GAAG;;;;;qCAKsB,OAAO,iBAAiB;;;;;;;;;CAU3D,OAAO,GAAG;;;;;;;;;;;;;;;;;aAiBC,OAAO,kBAAkB;;;;;;;;eAQvB,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;MAGxC,UAAU;;CAGd,aAAa,GAAG;;;;;;;;;;;;;aAaL,OAAO,kBAAkB;;;;;;;;eAQvB,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;MAGxC,UAAU;;CAGd,SAAS,GAAG;;;;;CAMZ,iBAAiB,GAAG;;;CAIpB,QAAQ,GAAG;;;;;;;;;CAUX,QAAQ,GAAG;;;;;;;;;CAUX,iBAAiB,GAAG;;;;CAKpB,OAAO,GAAG;;;;;;;;;;;CAYV,YAAY,GAAG;;;;;;;;;;;;;;;kBAeC,OAAO,gBAAgB;kBACvB,OAAO,UAAU;;;;;;;;;;;;;;;;;;CAmBjC,OAAO,GAAG;;;;;;aAMC,OAAO,UAAU;;CAG5B,gBAAgB,GAAG;;;;;;;;;;;;;;;;;CAkBnB,sBAAsB,GAAG;;;;;;;;CASzB,kBAAkB,GAAG;;;;;;;;;;;;;aAaV,OAAO,kBAAkB;;;;;;;;eAQvB,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;MAGxC,UAAU;;CAGd,eAAe,GAAG;;;;;;CAOlB,eAAe,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BlB,UAAU,GAAG;;;;;;AAMf,EAAE"}

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

@@ -61,16 +61,13 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     box-sizing: border-box;
     min-width: 120px;
     max-width: var(--available-width);
-    border: 1px solid ${cssVar.colorBorderSecondary};
     border-radius: ${cssVar.borderRadius};
 
     color: ${cssVar.colorText};
 
     background: ${cssVar.colorBgElevated};
     outline: none;
-    box-shadow:
-      0 0 15px 0 #00000008,
-      0 2px 30px 0 #00000014;
+    box-shadow: ${cssVar.boxShadowSecondary}, var(--lobe-ring);
 
     transition-timing-function: var(--lobe-popover-animation-ease-out);
     transition-duration: var(--lobe-popover-animation-duration);

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Popover/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  arrow: css`\n    --lobe-popover-arrow-offset-block: 5px;\n    --lobe-popover-arrow-offset-inline: 8px;\n\n    pointer-events: none;\n\n    position: absolute;\n    transform-origin: center;\n\n    display: flex;\n\n    width: 12px;\n    height: 6px;\n\n    transition:\n      inset-inline-start var(--lobe-popover-layout-duration) var(--lobe-popover-layout-ease),\n      inset-block-start var(--lobe-popover-layout-duration) var(--lobe-popover-layout-ease);\n\n    & > svg {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n\n    & [data-role='fill'] {\n      fill: ${cssVar.colorBgElevated};\n    }\n\n    & [data-role='stroke'] {\n      fill: none;\n      stroke: ${cssVar.colorBorder};\n      stroke-width: 1px;\n    }\n\n    &[data-side='top'] {\n      inset-block-end: calc(var(--lobe-popover-arrow-offset-block) * -1);\n      transform: rotate(180deg);\n    }\n\n    &[data-side='left'] {\n      inset-inline-end: calc(var(--lobe-popover-arrow-offset-inline) * -1);\n      transform: rotate(90deg);\n    }\n\n    &[data-side='right'] {\n      inset-inline-start: calc(var(--lobe-popover-arrow-offset-inline) * -1);\n      transform: rotate(-90deg);\n    }\n\n    &[data-side='bottom'] {\n      inset-block-start: calc(var(--lobe-popover-arrow-offset-block) * -1);\n    }\n  `,\n\n  popup: css`\n    position: relative;\n    transform-origin: var(--transform-origin);\n\n    box-sizing: border-box;\n    min-width: 120px;\n    max-width: var(--available-width);\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: ${cssVar.borderRadius};\n\n    color: ${cssVar.colorText};\n\n    background: ${cssVar.colorBgElevated};\n    outline: none;\n    box-shadow:\n      0 0 15px 0 #00000008,\n      0 2px 30px 0 #00000014;\n\n    transition-timing-function: var(--lobe-popover-animation-ease-out);\n    transition-duration: var(--lobe-popover-animation-duration);\n    transition-property: opacity, transform;\n\n    /* Base UI writes the old size into --popup-width/height on a trigger switch and the new size\n       one frame later; the box only morphs if width/height actually read them. */\n    &[data-layout-animation] {\n      width: var(--popup-width, auto);\n      height: var(--popup-height, auto);\n\n      transition-timing-function:\n        var(--lobe-popover-animation-ease-out), var(--lobe-popover-animation-ease-out),\n        var(--lobe-popover-layout-ease), var(--lobe-popover-layout-ease);\n      transition-duration:\n        var(--lobe-popover-animation-duration), var(--lobe-popover-animation-duration),\n        var(--lobe-popover-layout-duration), var(--lobe-popover-layout-duration);\n      transition-property: opacity, transform, width, height;\n    }\n\n    &[data-repop] {\n      transition: none;\n    }\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: translate3d(var(--lobe-popover-translate-x), var(--lobe-popover-translate-y), 0)\n        scale(var(--lobe-popover-animation-scale));\n      opacity: 0;\n    }\n\n    &[data-ending-style] {\n      transition-timing-function: var(--lobe-popover-animation-ease-in);\n      transition-duration: var(--lobe-popover-animation-duration-exit);\n    }\n\n    &[data-instant] {\n      transition: none;\n    }\n  `,\n\n  positioner: css`\n    --lobe-popover-animation-duration: 150ms;\n    --lobe-popover-animation-translate: 6px;\n    --lobe-popover-animation-scale: 0.96;\n    --lobe-popover-animation-ease-in: ease-in;\n    --lobe-popover-animation-duration-exit: 75ms;\n    --lobe-popover-animation-ease-out: ${cssVar.motionEaseOut};\n    --lobe-popover-translate-x: 0;\n    --lobe-popover-translate-y: calc(var(--lobe-popover-animation-translate) * -1);\n    --lobe-popover-layout-duration: 380ms;\n    --lobe-popover-layout-ease: linear(\n      0,\n      0.041,\n      0.14,\n      0.268,\n      0.407,\n      0.541,\n      0.661,\n      0.765,\n      0.849,\n      0.915,\n      0.964,\n      0.998,\n      1.02,\n      1.032,\n      1.038,\n      1.039,\n      1.036,\n      1.032,\n      1.027,\n      1.022,\n      1.016,\n      1.012,\n      1.008,\n      1.005,\n      1.003\n    );\n\n    z-index: 1100;\n\n    width: min(var(--positioner-width), var(--available-width));\n    height: var(--positioner-height);\n\n    transition-timing-function: var(--lobe-popover-animation-ease-out);\n    transition-duration: var(--lobe-popover-animation-duration);\n    transition-property: none;\n\n    &[data-layout-animation] {\n      transition-timing-function: var(--lobe-popover-layout-ease);\n      transition-duration: var(--lobe-popover-layout-duration);\n      transition-property:\n        inset-block-start, inset-inline-start, inset-inline-end, inset-block-end, transform;\n    }\n\n    &[data-instant],\n    &[data-repop] {\n      transition: none;\n    }\n\n    /* Fallback: never show a popover when the anchor is hidden or the positioner falls back to (0,0). */\n    &[data-anchor-hidden],\n    &[data-zero-origin='true'] {\n      pointer-events: none;\n      visibility: hidden;\n    }\n\n    &[data-placement='top'],\n    &[data-placement='topLeft'],\n    &[data-placement='topRight'] {\n      --lobe-popover-translate-x: 0;\n      --lobe-popover-translate-y: var(--lobe-popover-animation-translate);\n    }\n\n    &[data-placement='bottom'],\n    &[data-placement='bottomLeft'],\n    &[data-placement='bottomRight'] {\n      --lobe-popover-translate-x: 0;\n      --lobe-popover-translate-y: calc(var(--lobe-popover-animation-translate) * -1);\n    }\n\n    &[data-placement='left'],\n    &[data-placement='leftTop'],\n    &[data-placement='leftBottom'] {\n      --lobe-popover-translate-x: var(--lobe-popover-animation-translate);\n      --lobe-popover-translate-y: 0;\n    }\n\n    &[data-placement='right'],\n    &[data-placement='rightTop'],\n    &[data-placement='rightBottom'] {\n      --lobe-popover-translate-x: calc(var(--lobe-popover-animation-translate) * -1);\n      --lobe-popover-translate-y: 0;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      --lobe-popover-layout-duration: 0s;\n    }\n  `,\n\n  root: css`\n    user-select: none;\n    position: relative;\n    filter: drop-shadow(0 2px 8px rgb(0 0 0 / 12%));\n  `,\n\n  viewport: css`\n    --lobe-popover-viewport-inline-padding: 12px;\n    --lobe-popover-content-shift: 8px;\n    --lobe-popover-content-blur: 4px;\n\n    position: relative;\n    overflow: clip;\n    padding-block: 12px;\n    padding-inline: var(--lobe-popover-viewport-inline-padding);\n\n    /* Old and new content overlap in one clip box while the box morphs; blurring both layers\n       during the crossfade turns the misaligned overlap into a soft smear instead of garbled text. */\n    [data-previous],\n    [data-current] {\n      transform: translateX(0);\n      opacity: 1;\n      filter: blur(0);\n      transition:\n        transform var(--lobe-popover-layout-duration) var(--lobe-popover-layout-ease),\n        opacity calc(var(--lobe-popover-layout-duration) / 2) var(--lobe-popover-animation-ease-out),\n        filter calc(var(--lobe-popover-layout-duration) / 2) var(--lobe-popover-animation-ease-out);\n    }\n\n    [data-current] {\n      transition-delay:\n        0s, calc(var(--lobe-popover-layout-duration) / 6),\n        calc(var(--lobe-popover-layout-duration) / 6);\n    }\n\n    [data-previous][data-ending-style],\n    [data-current][data-starting-style] {\n      filter: blur(var(--lobe-popover-content-blur));\n    }\n\n    /* Freeze both layers at their own final width so neither re-wraps while the box morphs;\n       the viewport clip reveals the new content as the box grows over it. */\n    [data-previous] {\n      position: absolute;\n      inset-block-start: 12px;\n      inset-inline-start: var(--lobe-popover-viewport-inline-padding);\n      width: calc(var(--popup-width) - var(--lobe-popover-viewport-inline-padding) * 2 - 2px);\n    }\n\n    &[data-transitioning] [data-current] {\n      width: calc(var(--positioner-width) - var(--lobe-popover-viewport-inline-padding) * 2 - 2px);\n    }\n\n    &[data-repop] [data-previous] {\n      display: none;\n    }\n\n    &[data-repop] [data-current] {\n      transition: none;\n    }\n\n    &[data-activation-direction~='right'] [data-previous][data-ending-style] {\n      transform: translateX(calc(var(--lobe-popover-content-shift) * -1));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='right'] [data-current][data-starting-style] {\n      transform: translateX(var(--lobe-popover-content-shift));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='left'] [data-previous][data-ending-style] {\n      transform: translateX(var(--lobe-popover-content-shift));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='left'] [data-current][data-starting-style] {\n      transform: translateX(calc(var(--lobe-popover-content-shift) * -1));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='down'] [data-previous][data-ending-style] {\n      transform: translateY(calc(var(--lobe-popover-content-shift) * -1));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='down'] [data-current][data-starting-style] {\n      transform: translateY(var(--lobe-popover-content-shift));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='up'] [data-previous][data-ending-style] {\n      transform: translateY(var(--lobe-popover-content-shift));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='up'] [data-current][data-starting-style] {\n      transform: translateY(calc(var(--lobe-popover-content-shift) * -1));\n      opacity: 0;\n    }\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;cAyBE,OAAO,gBAAgB;;;;;gBAKrB,OAAO,YAAY;;;;;;;;;;;;;;;;;;;;;;;CAwBjC,OAAO,GAAG;;;;;;;wBAOY,OAAO,qBAAqB;qBAC/B,OAAO,aAAa;;aAE5B,OAAO,UAAU;;kBAEZ,OAAO,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8CvC,YAAY,GAAG;;;;;;yCAMwB,OAAO,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6F5D,MAAM,GAAG;;;;;CAMT,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+Ff,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Popover/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  arrow: css`\n    --lobe-popover-arrow-offset-block: 5px;\n    --lobe-popover-arrow-offset-inline: 8px;\n\n    pointer-events: none;\n\n    position: absolute;\n    transform-origin: center;\n\n    display: flex;\n\n    width: 12px;\n    height: 6px;\n\n    transition:\n      inset-inline-start var(--lobe-popover-layout-duration) var(--lobe-popover-layout-ease),\n      inset-block-start var(--lobe-popover-layout-duration) var(--lobe-popover-layout-ease);\n\n    & > svg {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n\n    & [data-role='fill'] {\n      fill: ${cssVar.colorBgElevated};\n    }\n\n    & [data-role='stroke'] {\n      fill: none;\n      stroke: ${cssVar.colorBorder};\n      stroke-width: 1px;\n    }\n\n    &[data-side='top'] {\n      inset-block-end: calc(var(--lobe-popover-arrow-offset-block) * -1);\n      transform: rotate(180deg);\n    }\n\n    &[data-side='left'] {\n      inset-inline-end: calc(var(--lobe-popover-arrow-offset-inline) * -1);\n      transform: rotate(90deg);\n    }\n\n    &[data-side='right'] {\n      inset-inline-start: calc(var(--lobe-popover-arrow-offset-inline) * -1);\n      transform: rotate(-90deg);\n    }\n\n    &[data-side='bottom'] {\n      inset-block-start: calc(var(--lobe-popover-arrow-offset-block) * -1);\n    }\n  `,\n\n  popup: css`\n    position: relative;\n    transform-origin: var(--transform-origin);\n\n    box-sizing: border-box;\n    min-width: 120px;\n    max-width: var(--available-width);\n    border-radius: ${cssVar.borderRadius};\n\n    color: ${cssVar.colorText};\n\n    background: ${cssVar.colorBgElevated};\n    outline: none;\n    box-shadow: ${cssVar.boxShadowSecondary}, var(--lobe-ring);\n\n    transition-timing-function: var(--lobe-popover-animation-ease-out);\n    transition-duration: var(--lobe-popover-animation-duration);\n    transition-property: opacity, transform;\n\n    /* Base UI writes the old size into --popup-width/height on a trigger switch and the new size\n       one frame later; the box only morphs if width/height actually read them. */\n    &[data-layout-animation] {\n      width: var(--popup-width, auto);\n      height: var(--popup-height, auto);\n\n      transition-timing-function:\n        var(--lobe-popover-animation-ease-out), var(--lobe-popover-animation-ease-out),\n        var(--lobe-popover-layout-ease), var(--lobe-popover-layout-ease);\n      transition-duration:\n        var(--lobe-popover-animation-duration), var(--lobe-popover-animation-duration),\n        var(--lobe-popover-layout-duration), var(--lobe-popover-layout-duration);\n      transition-property: opacity, transform, width, height;\n    }\n\n    &[data-repop] {\n      transition: none;\n    }\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: translate3d(var(--lobe-popover-translate-x), var(--lobe-popover-translate-y), 0)\n        scale(var(--lobe-popover-animation-scale));\n      opacity: 0;\n    }\n\n    &[data-ending-style] {\n      transition-timing-function: var(--lobe-popover-animation-ease-in);\n      transition-duration: var(--lobe-popover-animation-duration-exit);\n    }\n\n    &[data-instant] {\n      transition: none;\n    }\n  `,\n\n  positioner: css`\n    --lobe-popover-animation-duration: 150ms;\n    --lobe-popover-animation-translate: 6px;\n    --lobe-popover-animation-scale: 0.96;\n    --lobe-popover-animation-ease-in: ease-in;\n    --lobe-popover-animation-duration-exit: 75ms;\n    --lobe-popover-animation-ease-out: ${cssVar.motionEaseOut};\n    --lobe-popover-translate-x: 0;\n    --lobe-popover-translate-y: calc(var(--lobe-popover-animation-translate) * -1);\n    --lobe-popover-layout-duration: 380ms;\n    --lobe-popover-layout-ease: linear(\n      0,\n      0.041,\n      0.14,\n      0.268,\n      0.407,\n      0.541,\n      0.661,\n      0.765,\n      0.849,\n      0.915,\n      0.964,\n      0.998,\n      1.02,\n      1.032,\n      1.038,\n      1.039,\n      1.036,\n      1.032,\n      1.027,\n      1.022,\n      1.016,\n      1.012,\n      1.008,\n      1.005,\n      1.003\n    );\n\n    z-index: 1100;\n\n    width: min(var(--positioner-width), var(--available-width));\n    height: var(--positioner-height);\n\n    transition-timing-function: var(--lobe-popover-animation-ease-out);\n    transition-duration: var(--lobe-popover-animation-duration);\n    transition-property: none;\n\n    &[data-layout-animation] {\n      transition-timing-function: var(--lobe-popover-layout-ease);\n      transition-duration: var(--lobe-popover-layout-duration);\n      transition-property:\n        inset-block-start, inset-inline-start, inset-inline-end, inset-block-end, transform;\n    }\n\n    &[data-instant],\n    &[data-repop] {\n      transition: none;\n    }\n\n    /* Fallback: never show a popover when the anchor is hidden or the positioner falls back to (0,0). */\n    &[data-anchor-hidden],\n    &[data-zero-origin='true'] {\n      pointer-events: none;\n      visibility: hidden;\n    }\n\n    &[data-placement='top'],\n    &[data-placement='topLeft'],\n    &[data-placement='topRight'] {\n      --lobe-popover-translate-x: 0;\n      --lobe-popover-translate-y: var(--lobe-popover-animation-translate);\n    }\n\n    &[data-placement='bottom'],\n    &[data-placement='bottomLeft'],\n    &[data-placement='bottomRight'] {\n      --lobe-popover-translate-x: 0;\n      --lobe-popover-translate-y: calc(var(--lobe-popover-animation-translate) * -1);\n    }\n\n    &[data-placement='left'],\n    &[data-placement='leftTop'],\n    &[data-placement='leftBottom'] {\n      --lobe-popover-translate-x: var(--lobe-popover-animation-translate);\n      --lobe-popover-translate-y: 0;\n    }\n\n    &[data-placement='right'],\n    &[data-placement='rightTop'],\n    &[data-placement='rightBottom'] {\n      --lobe-popover-translate-x: calc(var(--lobe-popover-animation-translate) * -1);\n      --lobe-popover-translate-y: 0;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      --lobe-popover-layout-duration: 0s;\n    }\n  `,\n\n  root: css`\n    user-select: none;\n    position: relative;\n    filter: drop-shadow(0 2px 8px rgb(0 0 0 / 12%));\n  `,\n\n  viewport: css`\n    --lobe-popover-viewport-inline-padding: 12px;\n    --lobe-popover-content-shift: 8px;\n    --lobe-popover-content-blur: 4px;\n\n    position: relative;\n    overflow: clip;\n    padding-block: 12px;\n    padding-inline: var(--lobe-popover-viewport-inline-padding);\n\n    /* Old and new content overlap in one clip box while the box morphs; blurring both layers\n       during the crossfade turns the misaligned overlap into a soft smear instead of garbled text. */\n    [data-previous],\n    [data-current] {\n      transform: translateX(0);\n      opacity: 1;\n      filter: blur(0);\n      transition:\n        transform var(--lobe-popover-layout-duration) var(--lobe-popover-layout-ease),\n        opacity calc(var(--lobe-popover-layout-duration) / 2) var(--lobe-popover-animation-ease-out),\n        filter calc(var(--lobe-popover-layout-duration) / 2) var(--lobe-popover-animation-ease-out);\n    }\n\n    [data-current] {\n      transition-delay:\n        0s, calc(var(--lobe-popover-layout-duration) / 6),\n        calc(var(--lobe-popover-layout-duration) / 6);\n    }\n\n    [data-previous][data-ending-style],\n    [data-current][data-starting-style] {\n      filter: blur(var(--lobe-popover-content-blur));\n    }\n\n    /* Freeze both layers at their own final width so neither re-wraps while the box morphs;\n       the viewport clip reveals the new content as the box grows over it. */\n    [data-previous] {\n      position: absolute;\n      inset-block-start: 12px;\n      inset-inline-start: var(--lobe-popover-viewport-inline-padding);\n      width: calc(var(--popup-width) - var(--lobe-popover-viewport-inline-padding) * 2 - 2px);\n    }\n\n    &[data-transitioning] [data-current] {\n      width: calc(var(--positioner-width) - var(--lobe-popover-viewport-inline-padding) * 2 - 2px);\n    }\n\n    &[data-repop] [data-previous] {\n      display: none;\n    }\n\n    &[data-repop] [data-current] {\n      transition: none;\n    }\n\n    &[data-activation-direction~='right'] [data-previous][data-ending-style] {\n      transform: translateX(calc(var(--lobe-popover-content-shift) * -1));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='right'] [data-current][data-starting-style] {\n      transform: translateX(var(--lobe-popover-content-shift));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='left'] [data-previous][data-ending-style] {\n      transform: translateX(var(--lobe-popover-content-shift));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='left'] [data-current][data-starting-style] {\n      transform: translateX(calc(var(--lobe-popover-content-shift) * -1));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='down'] [data-previous][data-ending-style] {\n      transform: translateY(calc(var(--lobe-popover-content-shift) * -1));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='down'] [data-current][data-starting-style] {\n      transform: translateY(var(--lobe-popover-content-shift));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='up'] [data-previous][data-ending-style] {\n      transform: translateY(var(--lobe-popover-content-shift));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='up'] [data-current][data-starting-style] {\n      transform: translateY(calc(var(--lobe-popover-content-shift) * -1));\n      opacity: 0;\n    }\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;cAyBE,OAAO,gBAAgB;;;;;gBAKrB,OAAO,YAAY;;;;;;;;;;;;;;;;;;;;;;;CAwBjC,OAAO,GAAG;;;;;;;qBAOS,OAAO,aAAa;;aAE5B,OAAO,UAAU;;kBAEZ,OAAO,gBAAgB;;kBAEvB,OAAO,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0C1C,YAAY,GAAG;;;;;;yCAMwB,OAAO,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6F5D,MAAM,GAAG;;;;;CAMT,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+Ff,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/style.mjs

@@ -189,10 +189,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
 
     background: ${cssVar.colorBgElevated};
     background-clip: padding-box;
-    box-shadow:
-      0 0 0 1px ${cssVar.colorBorderSecondary},
-      0 4px 12px rgb(0 0 0 / 10%),
-      0 16px 32px -8px rgb(0 0 0 / 12%);
+    box-shadow: ${cssVar.boxShadowSecondary}, var(--lobe-ring);
 
     transition:
       transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),

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\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"}
+{"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: ${cssVar.boxShadowSecondary}, var(--lobe-ring);\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;;kBAEvB,OAAO,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;CAyB1C,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/es/base-ui/Tooltip/style.mjs

@@ -67,7 +67,6 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
        recorded unclamped sizes. A percentage cap is out too — it tracks the positioner, which
        snaps to the new size and would freeze the shrink half of the morph. */
     max-width: var(--available-width);
-    border: 1px solid ${cssVar.colorFill};
     border-radius: ${cssVar.borderRadiusSM};
 
     font-size: ${cssVar.fontSizeSM};
@@ -75,10 +74,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     color: ${cssVar.colorTextLabel};
 
     background: ${cssVar.colorBgElevated};
-    box-shadow:
-      0 1px 2px 0 rgb(0 0 0 / 3%),
-      0 1px 6px -1px rgb(0 0 0 / 2%),
-      0 2px 4px 0 rgb(0 0 0 / 2%);
+    box-shadow: ${cssVar.boxShadowTertiary}, var(--lobe-ring);
 
     /* Opacity gets its own monotonic curve: running it on the overshooting spring makes the
        fade look finished at ~0.96, pause, then visibly step to 1 at the clamp point — reads

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Tooltip/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  arrow: css`\n    --lobe-tooltip-arrow-offset-block: 4px;\n    --lobe-tooltip-arrow-offset-inline: 6px;\n\n    pointer-events: none;\n\n    position: absolute;\n    transform-origin: center;\n\n    display: flex;\n\n    width: 8px;\n    height: 4px;\n\n    transition:\n      inset-inline-start var(--lobe-tooltip-layout-duration) var(--lobe-tooltip-layout-ease),\n      inset-block-start var(--lobe-tooltip-layout-duration) var(--lobe-tooltip-layout-ease);\n\n    & > svg {\n      display: block;\n      width: 100%;\n      height: 100%;\n      fill: ${cssVar.colorBgElevated};\n    }\n\n    & [data-role='stroke'] {\n      stroke: ${cssVar.colorBorderSecondary};\n    }\n\n    &[data-side='top'] {\n      inset-block-end: calc(var(--lobe-tooltip-arrow-offset-block) * -1);\n      transform: rotate(180deg);\n    }\n\n    &[data-side='left'] {\n      inset-inline-end: calc(var(--lobe-tooltip-arrow-offset-inline) * -1);\n      transform: rotate(90deg);\n    }\n\n    &[data-side='right'] {\n      inset-inline-start: calc(var(--lobe-tooltip-arrow-offset-inline) * -1);\n      transform: rotate(-90deg);\n    }\n\n    &[data-side='bottom'] {\n      inset-block-start: calc(var(--lobe-tooltip-arrow-offset-block) * -1);\n    }\n  `,\n\n  popup: css`\n    /* Keep the popup on its own compositor layer for its whole lifetime: when the opacity\n       transition ends the browser otherwise drops the layer and re-rasterizes with pixel\n       snapping — a visible one-frame shift when the measured width is fractional\n       (single-line tooltips). */\n    will-change: transform, opacity;\n    user-select: none;\n\n    position: relative;\n    transform-origin: var(--transform-origin);\n\n    box-sizing: border-box;\n\n    /* The 320px cap lives on the viewport, not here: Base UI measures content with\n       --available-width set to max-content, and min(320px, max-content) is invalid, which\n       recorded unclamped sizes. A percentage cap is out too — it tracks the positioner, which\n       snaps to the new size and would freeze the shrink half of the morph. */\n    max-width: var(--available-width);\n    border: 1px solid ${cssVar.colorFill};\n    border-radius: ${cssVar.borderRadiusSM};\n\n    font-size: ${cssVar.fontSizeSM};\n    line-height: 1.2;\n    color: ${cssVar.colorTextLabel};\n\n    background: ${cssVar.colorBgElevated};\n    box-shadow:\n      0 1px 2px 0 rgb(0 0 0 / 3%),\n      0 1px 6px -1px rgb(0 0 0 / 2%),\n      0 2px 4px 0 rgb(0 0 0 / 2%);\n\n    /* Opacity gets its own monotonic curve: running it on the overshooting spring makes the\n       fade look finished at ~0.96, pause, then visibly step to 1 at the clamp point — reads\n       as a dropped frame. The spring stays on transform only. */\n    transition-timing-function:\n      var(--lobe-tooltip-fade-ease), var(--lobe-tooltip-animation-ease-out);\n    transition-duration: var(--lobe-tooltip-fade-duration), var(--lobe-tooltip-animation-duration);\n    transition-property: opacity, transform;\n\n    /* Base UI writes the old size into --popup-width/height on a trigger switch and the new size\n       one frame later; the box only morphs if width/height actually read them. */\n    &[data-layout-animation] {\n      width: var(--popup-width, auto);\n      height: var(--popup-height, auto);\n\n      transition-timing-function:\n        var(--lobe-tooltip-fade-ease), var(--lobe-tooltip-animation-ease-out),\n        var(--lobe-tooltip-layout-ease), var(--lobe-tooltip-layout-ease);\n      transition-duration:\n        var(--lobe-tooltip-fade-duration), var(--lobe-tooltip-animation-duration),\n        var(--lobe-tooltip-layout-duration), var(--lobe-tooltip-layout-duration);\n      transition-property: opacity, transform, width, height;\n    }\n\n    &[data-repop] {\n      transition: none;\n    }\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: translate3d(var(--lobe-tooltip-translate-x), var(--lobe-tooltip-translate-y), 0)\n        scale(var(--lobe-tooltip-animation-scale));\n      opacity: 0;\n    }\n\n    &[data-ending-style] {\n      transition-timing-function: var(--lobe-tooltip-animation-ease-in);\n      transition-duration: var(--lobe-tooltip-animation-duration-exit);\n    }\n\n    &[data-instant] {\n      transition: none;\n    }\n  `,\n\n  positioner: css`\n    /* Springs baked as linear(): stiffness 700 / damping 38 (enter) and 380 / 28 (glide),\n       both zeta ~0.72 with ~4% overshoot. Durations are the springs' settle times —\n       change them together with the curves, not independently. */\n    --lobe-tooltip-animation-duration: 280ms;\n    --lobe-tooltip-fade-duration: 160ms;\n    --lobe-tooltip-fade-ease: cubic-bezier(0.33, 1, 0.68, 1);\n    --lobe-tooltip-animation-duration-exit: 100ms;\n    --lobe-tooltip-animation-translate: 3px;\n    --lobe-tooltip-animation-scale: 0.97;\n    --lobe-tooltip-animation-ease-in: cubic-bezier(0.4, 0, 1, 1);\n    --lobe-tooltip-animation-ease-out: linear(\n      0,\n      0.041,\n      0.14,\n      0.268,\n      0.407,\n      0.541,\n      0.662,\n      0.765,\n      0.849,\n      0.915,\n      0.964,\n      0.998,\n      1.02,\n      1.032,\n      1.038,\n      1.039,\n      1.036,\n      1.032,\n      1.027,\n      1.022,\n      1.016,\n      1.012,\n      1.008,\n      1.005,\n      1.003\n    );\n    --lobe-tooltip-layout-duration: 380ms;\n    --lobe-tooltip-layout-ease: linear(\n      0,\n      0.041,\n      0.14,\n      0.268,\n      0.407,\n      0.541,\n      0.661,\n      0.765,\n      0.849,\n      0.915,\n      0.964,\n      0.998,\n      1.02,\n      1.032,\n      1.038,\n      1.039,\n      1.036,\n      1.032,\n      1.027,\n      1.022,\n      1.016,\n      1.012,\n      1.008,\n      1.005,\n      1.003\n    );\n    --lobe-tooltip-translate-x: 0;\n    --lobe-tooltip-translate-y: calc(var(--lobe-tooltip-animation-translate) * -1);\n\n    will-change: transform, opacity;\n\n    z-index: 114514;\n\n    width: min(var(--positioner-width), 320px, var(--available-width));\n    height: var(--positioner-height);\n\n    transition-timing-function: var(--lobe-tooltip-animation-ease-out);\n    transition-duration: var(--lobe-tooltip-animation-duration);\n    transition-property: none;\n\n    &[data-layout-animation] {\n      transition-timing-function: var(--lobe-tooltip-layout-ease);\n      transition-duration: var(--lobe-tooltip-layout-duration);\n      transition-property:\n        inset-block-start, inset-inline-start, inset-inline-end, inset-block-end, transform;\n    }\n\n    &[data-instant],\n    &[data-repop] {\n      transition: none;\n    }\n\n    /* Fallback: never show a tooltip when the anchor is hidden or the positioner falls back to (0,0). */\n    &[data-anchor-hidden],\n    &[data-zero-origin='true'] {\n      pointer-events: none;\n      visibility: hidden;\n    }\n\n    &[data-placement='top'],\n    &[data-placement='topLeft'],\n    &[data-placement='topRight'] {\n      --lobe-tooltip-translate-x: 0;\n      --lobe-tooltip-translate-y: var(--lobe-tooltip-animation-translate);\n    }\n\n    &[data-placement='bottom'],\n    &[data-placement='bottomLeft'],\n    &[data-placement='bottomRight'] {\n      --lobe-tooltip-translate-x: 0;\n      --lobe-tooltip-translate-y: calc(var(--lobe-tooltip-animation-translate) * -1);\n    }\n\n    &[data-placement='left'],\n    &[data-placement='leftTop'],\n    &[data-placement='leftBottom'] {\n      --lobe-tooltip-translate-x: var(--lobe-tooltip-animation-translate);\n      --lobe-tooltip-translate-y: 0;\n    }\n\n    &[data-placement='right'],\n    &[data-placement='rightTop'],\n    &[data-placement='rightBottom'] {\n      --lobe-tooltip-translate-x: calc(var(--lobe-tooltip-animation-translate) * -1);\n      --lobe-tooltip-translate-y: 0;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      --lobe-tooltip-animation-duration: 0s;\n      --lobe-tooltip-fade-duration: 0s;\n      --lobe-tooltip-animation-duration-exit: 0s;\n      --lobe-tooltip-layout-duration: 0s;\n    }\n  `,\n\n  viewport: css`\n    --lobe-tooltip-viewport-inline-padding: 8px;\n    --lobe-tooltip-content-shift: 8px;\n    --lobe-tooltip-content-blur: 4px;\n\n    position: relative;\n\n    overflow: clip;\n\n    max-width: calc(320px - 2px);\n    padding-block: 4px;\n    padding-inline: var(--lobe-tooltip-viewport-inline-padding);\n\n    overflow-wrap: break-word;\n    white-space: normal;\n\n    /* Old and new text overlap in one clip box while the box morphs; blurring both layers during\n       the crossfade turns the misaligned overlap into a soft smear instead of garbled text. */\n    [data-previous],\n    [data-current] {\n      transform: translateX(0);\n\n      display: flex;\n      gap: 6px;\n      align-items: center;\n\n      opacity: 1;\n      filter: blur(0);\n\n      transition:\n        transform var(--lobe-tooltip-layout-duration) var(--lobe-tooltip-layout-ease),\n        opacity calc(var(--lobe-tooltip-layout-duration) / 2) var(--lobe-tooltip-fade-ease),\n        filter calc(var(--lobe-tooltip-layout-duration) / 2) var(--lobe-tooltip-fade-ease);\n    }\n\n    [data-current] {\n      transition-delay:\n        0s, calc(var(--lobe-tooltip-layout-duration) / 6),\n        calc(var(--lobe-tooltip-layout-duration) / 6);\n    }\n\n    [data-previous][data-ending-style],\n    [data-current][data-starting-style] {\n      filter: blur(var(--lobe-tooltip-content-blur));\n    }\n\n    /* Freeze both layers at their own final width so neither re-wraps while the box morphs;\n       the viewport clip reveals the new text as the box grows over it. */\n    [data-previous] {\n      position: absolute;\n      inset-block-start: 4px;\n      inset-inline-start: var(--lobe-tooltip-viewport-inline-padding);\n      width: calc(var(--popup-width) - var(--lobe-tooltip-viewport-inline-padding) * 2 - 2px);\n    }\n\n    &[data-transitioning] [data-current] {\n      width: calc(var(--positioner-width) - var(--lobe-tooltip-viewport-inline-padding) * 2 - 2px);\n    }\n\n    &[data-repop] [data-previous] {\n      display: none;\n    }\n\n    &[data-repop] [data-current] {\n      transition: none;\n    }\n\n    &[data-activation-direction~='right'] [data-previous][data-ending-style] {\n      transform: translateX(calc(var(--lobe-tooltip-content-shift) * -1));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='right'] [data-current][data-starting-style] {\n      transform: translateX(var(--lobe-tooltip-content-shift));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='left'] [data-previous][data-ending-style] {\n      transform: translateX(var(--lobe-tooltip-content-shift));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='left'] [data-current][data-starting-style] {\n      transform: translateX(calc(var(--lobe-tooltip-content-shift) * -1));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='down'] [data-previous][data-ending-style] {\n      transform: translateY(calc(var(--lobe-tooltip-content-shift) * -1));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='down'] [data-current][data-starting-style] {\n      transform: translateY(var(--lobe-tooltip-content-shift));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='up'] [data-previous][data-ending-style] {\n      transform: translateY(var(--lobe-tooltip-content-shift));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='up'] [data-current][data-starting-style] {\n      transform: translateY(calc(var(--lobe-tooltip-content-shift) * -1));\n      opacity: 0;\n    }\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;;;cAsBE,OAAO,gBAAgB;;;;gBAIrB,OAAO,qBAAqB;;;;;;;;;;;;;;;;;;;;;;CAuB1C,OAAO,GAAG;;;;;;;;;;;;;;;;;;wBAkBY,OAAO,UAAU;qBACpB,OAAO,eAAe;;iBAE1B,OAAO,WAAW;;aAEtB,OAAO,eAAe;;kBAEjB,OAAO,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDvC,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuIf,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2Gf,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Tooltip/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  arrow: css`\n    --lobe-tooltip-arrow-offset-block: 4px;\n    --lobe-tooltip-arrow-offset-inline: 6px;\n\n    pointer-events: none;\n\n    position: absolute;\n    transform-origin: center;\n\n    display: flex;\n\n    width: 8px;\n    height: 4px;\n\n    transition:\n      inset-inline-start var(--lobe-tooltip-layout-duration) var(--lobe-tooltip-layout-ease),\n      inset-block-start var(--lobe-tooltip-layout-duration) var(--lobe-tooltip-layout-ease);\n\n    & > svg {\n      display: block;\n      width: 100%;\n      height: 100%;\n      fill: ${cssVar.colorBgElevated};\n    }\n\n    & [data-role='stroke'] {\n      stroke: ${cssVar.colorBorderSecondary};\n    }\n\n    &[data-side='top'] {\n      inset-block-end: calc(var(--lobe-tooltip-arrow-offset-block) * -1);\n      transform: rotate(180deg);\n    }\n\n    &[data-side='left'] {\n      inset-inline-end: calc(var(--lobe-tooltip-arrow-offset-inline) * -1);\n      transform: rotate(90deg);\n    }\n\n    &[data-side='right'] {\n      inset-inline-start: calc(var(--lobe-tooltip-arrow-offset-inline) * -1);\n      transform: rotate(-90deg);\n    }\n\n    &[data-side='bottom'] {\n      inset-block-start: calc(var(--lobe-tooltip-arrow-offset-block) * -1);\n    }\n  `,\n\n  popup: css`\n    /* Keep the popup on its own compositor layer for its whole lifetime: when the opacity\n       transition ends the browser otherwise drops the layer and re-rasterizes with pixel\n       snapping — a visible one-frame shift when the measured width is fractional\n       (single-line tooltips). */\n    will-change: transform, opacity;\n    user-select: none;\n\n    position: relative;\n    transform-origin: var(--transform-origin);\n\n    box-sizing: border-box;\n\n    /* The 320px cap lives on the viewport, not here: Base UI measures content with\n       --available-width set to max-content, and min(320px, max-content) is invalid, which\n       recorded unclamped sizes. A percentage cap is out too — it tracks the positioner, which\n       snaps to the new size and would freeze the shrink half of the morph. */\n    max-width: var(--available-width);\n    border-radius: ${cssVar.borderRadiusSM};\n\n    font-size: ${cssVar.fontSizeSM};\n    line-height: 1.2;\n    color: ${cssVar.colorTextLabel};\n\n    background: ${cssVar.colorBgElevated};\n    box-shadow: ${cssVar.boxShadowTertiary}, var(--lobe-ring);\n\n    /* Opacity gets its own monotonic curve: running it on the overshooting spring makes the\n       fade look finished at ~0.96, pause, then visibly step to 1 at the clamp point — reads\n       as a dropped frame. The spring stays on transform only. */\n    transition-timing-function:\n      var(--lobe-tooltip-fade-ease), var(--lobe-tooltip-animation-ease-out);\n    transition-duration: var(--lobe-tooltip-fade-duration), var(--lobe-tooltip-animation-duration);\n    transition-property: opacity, transform;\n\n    /* Base UI writes the old size into --popup-width/height on a trigger switch and the new size\n       one frame later; the box only morphs if width/height actually read them. */\n    &[data-layout-animation] {\n      width: var(--popup-width, auto);\n      height: var(--popup-height, auto);\n\n      transition-timing-function:\n        var(--lobe-tooltip-fade-ease), var(--lobe-tooltip-animation-ease-out),\n        var(--lobe-tooltip-layout-ease), var(--lobe-tooltip-layout-ease);\n      transition-duration:\n        var(--lobe-tooltip-fade-duration), var(--lobe-tooltip-animation-duration),\n        var(--lobe-tooltip-layout-duration), var(--lobe-tooltip-layout-duration);\n      transition-property: opacity, transform, width, height;\n    }\n\n    &[data-repop] {\n      transition: none;\n    }\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: translate3d(var(--lobe-tooltip-translate-x), var(--lobe-tooltip-translate-y), 0)\n        scale(var(--lobe-tooltip-animation-scale));\n      opacity: 0;\n    }\n\n    &[data-ending-style] {\n      transition-timing-function: var(--lobe-tooltip-animation-ease-in);\n      transition-duration: var(--lobe-tooltip-animation-duration-exit);\n    }\n\n    &[data-instant] {\n      transition: none;\n    }\n  `,\n\n  positioner: css`\n    /* Springs baked as linear(): stiffness 700 / damping 38 (enter) and 380 / 28 (glide),\n       both zeta ~0.72 with ~4% overshoot. Durations are the springs' settle times —\n       change them together with the curves, not independently. */\n    --lobe-tooltip-animation-duration: 280ms;\n    --lobe-tooltip-fade-duration: 160ms;\n    --lobe-tooltip-fade-ease: cubic-bezier(0.33, 1, 0.68, 1);\n    --lobe-tooltip-animation-duration-exit: 100ms;\n    --lobe-tooltip-animation-translate: 3px;\n    --lobe-tooltip-animation-scale: 0.97;\n    --lobe-tooltip-animation-ease-in: cubic-bezier(0.4, 0, 1, 1);\n    --lobe-tooltip-animation-ease-out: linear(\n      0,\n      0.041,\n      0.14,\n      0.268,\n      0.407,\n      0.541,\n      0.662,\n      0.765,\n      0.849,\n      0.915,\n      0.964,\n      0.998,\n      1.02,\n      1.032,\n      1.038,\n      1.039,\n      1.036,\n      1.032,\n      1.027,\n      1.022,\n      1.016,\n      1.012,\n      1.008,\n      1.005,\n      1.003\n    );\n    --lobe-tooltip-layout-duration: 380ms;\n    --lobe-tooltip-layout-ease: linear(\n      0,\n      0.041,\n      0.14,\n      0.268,\n      0.407,\n      0.541,\n      0.661,\n      0.765,\n      0.849,\n      0.915,\n      0.964,\n      0.998,\n      1.02,\n      1.032,\n      1.038,\n      1.039,\n      1.036,\n      1.032,\n      1.027,\n      1.022,\n      1.016,\n      1.012,\n      1.008,\n      1.005,\n      1.003\n    );\n    --lobe-tooltip-translate-x: 0;\n    --lobe-tooltip-translate-y: calc(var(--lobe-tooltip-animation-translate) * -1);\n\n    will-change: transform, opacity;\n\n    z-index: 114514;\n\n    width: min(var(--positioner-width), 320px, var(--available-width));\n    height: var(--positioner-height);\n\n    transition-timing-function: var(--lobe-tooltip-animation-ease-out);\n    transition-duration: var(--lobe-tooltip-animation-duration);\n    transition-property: none;\n\n    &[data-layout-animation] {\n      transition-timing-function: var(--lobe-tooltip-layout-ease);\n      transition-duration: var(--lobe-tooltip-layout-duration);\n      transition-property:\n        inset-block-start, inset-inline-start, inset-inline-end, inset-block-end, transform;\n    }\n\n    &[data-instant],\n    &[data-repop] {\n      transition: none;\n    }\n\n    /* Fallback: never show a tooltip when the anchor is hidden or the positioner falls back to (0,0). */\n    &[data-anchor-hidden],\n    &[data-zero-origin='true'] {\n      pointer-events: none;\n      visibility: hidden;\n    }\n\n    &[data-placement='top'],\n    &[data-placement='topLeft'],\n    &[data-placement='topRight'] {\n      --lobe-tooltip-translate-x: 0;\n      --lobe-tooltip-translate-y: var(--lobe-tooltip-animation-translate);\n    }\n\n    &[data-placement='bottom'],\n    &[data-placement='bottomLeft'],\n    &[data-placement='bottomRight'] {\n      --lobe-tooltip-translate-x: 0;\n      --lobe-tooltip-translate-y: calc(var(--lobe-tooltip-animation-translate) * -1);\n    }\n\n    &[data-placement='left'],\n    &[data-placement='leftTop'],\n    &[data-placement='leftBottom'] {\n      --lobe-tooltip-translate-x: var(--lobe-tooltip-animation-translate);\n      --lobe-tooltip-translate-y: 0;\n    }\n\n    &[data-placement='right'],\n    &[data-placement='rightTop'],\n    &[data-placement='rightBottom'] {\n      --lobe-tooltip-translate-x: calc(var(--lobe-tooltip-animation-translate) * -1);\n      --lobe-tooltip-translate-y: 0;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      --lobe-tooltip-animation-duration: 0s;\n      --lobe-tooltip-fade-duration: 0s;\n      --lobe-tooltip-animation-duration-exit: 0s;\n      --lobe-tooltip-layout-duration: 0s;\n    }\n  `,\n\n  viewport: css`\n    --lobe-tooltip-viewport-inline-padding: 8px;\n    --lobe-tooltip-content-shift: 8px;\n    --lobe-tooltip-content-blur: 4px;\n\n    position: relative;\n\n    overflow: clip;\n\n    max-width: calc(320px - 2px);\n    padding-block: 4px;\n    padding-inline: var(--lobe-tooltip-viewport-inline-padding);\n\n    overflow-wrap: break-word;\n    white-space: normal;\n\n    /* Old and new text overlap in one clip box while the box morphs; blurring both layers during\n       the crossfade turns the misaligned overlap into a soft smear instead of garbled text. */\n    [data-previous],\n    [data-current] {\n      transform: translateX(0);\n\n      display: flex;\n      gap: 6px;\n      align-items: center;\n\n      opacity: 1;\n      filter: blur(0);\n\n      transition:\n        transform var(--lobe-tooltip-layout-duration) var(--lobe-tooltip-layout-ease),\n        opacity calc(var(--lobe-tooltip-layout-duration) / 2) var(--lobe-tooltip-fade-ease),\n        filter calc(var(--lobe-tooltip-layout-duration) / 2) var(--lobe-tooltip-fade-ease);\n    }\n\n    [data-current] {\n      transition-delay:\n        0s, calc(var(--lobe-tooltip-layout-duration) / 6),\n        calc(var(--lobe-tooltip-layout-duration) / 6);\n    }\n\n    [data-previous][data-ending-style],\n    [data-current][data-starting-style] {\n      filter: blur(var(--lobe-tooltip-content-blur));\n    }\n\n    /* Freeze both layers at their own final width so neither re-wraps while the box morphs;\n       the viewport clip reveals the new text as the box grows over it. */\n    [data-previous] {\n      position: absolute;\n      inset-block-start: 4px;\n      inset-inline-start: var(--lobe-tooltip-viewport-inline-padding);\n      width: calc(var(--popup-width) - var(--lobe-tooltip-viewport-inline-padding) * 2 - 2px);\n    }\n\n    &[data-transitioning] [data-current] {\n      width: calc(var(--positioner-width) - var(--lobe-tooltip-viewport-inline-padding) * 2 - 2px);\n    }\n\n    &[data-repop] [data-previous] {\n      display: none;\n    }\n\n    &[data-repop] [data-current] {\n      transition: none;\n    }\n\n    &[data-activation-direction~='right'] [data-previous][data-ending-style] {\n      transform: translateX(calc(var(--lobe-tooltip-content-shift) * -1));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='right'] [data-current][data-starting-style] {\n      transform: translateX(var(--lobe-tooltip-content-shift));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='left'] [data-previous][data-ending-style] {\n      transform: translateX(var(--lobe-tooltip-content-shift));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='left'] [data-current][data-starting-style] {\n      transform: translateX(calc(var(--lobe-tooltip-content-shift) * -1));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='down'] [data-previous][data-ending-style] {\n      transform: translateY(calc(var(--lobe-tooltip-content-shift) * -1));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='down'] [data-current][data-starting-style] {\n      transform: translateY(var(--lobe-tooltip-content-shift));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='up'] [data-previous][data-ending-style] {\n      transform: translateY(var(--lobe-tooltip-content-shift));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='up'] [data-current][data-starting-style] {\n      transform: translateY(calc(var(--lobe-tooltip-content-shift) * -1));\n      opacity: 0;\n    }\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;;;cAsBE,OAAO,gBAAgB;;;;gBAIrB,OAAO,qBAAqB;;;;;;;;;;;;;;;;;;;;;;CAuB1C,OAAO,GAAG;;;;;;;;;;;;;;;;;;qBAkBS,OAAO,eAAe;;iBAE1B,OAAO,WAAW;;aAEtB,OAAO,eAAe;;kBAEjB,OAAO,gBAAgB;kBACvB,OAAO,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8CzC,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuIf,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2Gf,EAAE"}

package/es/styles/theme/antdTheme.mjs

@@ -1,6 +1,7 @@
 import { darkAlgorithm } from "./algorithms/darkAlgorithm.mjs";
 import { lightAlgorithm } from "./algorithms/lightAlgorithm.mjs";
 import { baseToken } from "./token/base.mjs";
+import { shadowToken } from "./token/shadow.mjs";
 //#region src/styles/theme/antdTheme.ts
 /**
 * create A LobeHub Style Antd Theme Object
@@ -9,8 +10,9 @@ import { baseToken } from "./token/base.mjs";
 * @param primaryColor
 */
 const createLobeAntdTheme = ({ neutralColor, appearance, primaryColor }) => {
+	const isDark = appearance === "dark";
 	return {
-		algorithm: appearance === "dark" ? darkAlgorithm : lightAlgorithm,
+		algorithm: isDark ? darkAlgorithm : lightAlgorithm,
 		components: {
 			Button: { contentFontSizeSM: 12 },
 			DatePicker: {
@@ -36,6 +38,7 @@ const createLobeAntdTheme = ({ neutralColor, appearance, primaryColor }) => {
 		},
 		token: {
 			...baseToken,
+			...shadowToken[isDark ? "dark" : "light"],
 			neutralColor,
 			primaryColor
 		}

package/es/styles/theme/antdTheme.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"antdTheme.mjs","names":[],"sources":["../../../src/styles/theme/antdTheme.ts"],"sourcesContent":["import type { ThemeConfig } from 'antd';\nimport type { ThemeAppearance } from 'antd-style';\n\nimport type { NeutralColors, PrimaryColors } from '../customTheme';\nimport { darkAlgorithm } from './algorithms/darkAlgorithm';\nimport { lightAlgorithm } from './algorithms/lightAlgorithm';\nimport { baseToken } from './token/base';\n\nexport interface LobeAntdThemeParams {\n  appearance: ThemeAppearance;\n  neutralColor?: NeutralColors;\n  primaryColor?: PrimaryColors;\n}\n\n/**\n * create A LobeHub Style Antd Theme Object\n * @param neutralColor\n * @param appearance\n * @param primaryColor\n */\nexport const createLobeAntdTheme = ({\n  neutralColor,\n  appearance,\n  primaryColor,\n}: LobeAntdThemeParams): ThemeConfig => {\n  const isDark = appearance === 'dark';\n\n  return {\n    algorithm: isDark ? darkAlgorithm : lightAlgorithm,\n    components: {\n      Button: {\n        contentFontSizeSM: 12,\n      },\n      DatePicker: {\n        activeBorderColor: baseToken.colorBorder,\n        hoverBorderColor: baseToken.colorBorder,\n      },\n      Input: {\n        activeBorderColor: baseToken.colorBorder,\n        hoverBorderColor: baseToken.colorBorder,\n      },\n      InputNumber: {\n        activeBorderColor: baseToken.colorBorder,\n        hoverBorderColor: baseToken.colorBorder,\n      },\n      Mentions: {\n        activeBorderColor: baseToken.colorBorder,\n        hoverBorderColor: baseToken.colorBorder,\n      },\n      Select: {\n        activeBorderColor: baseToken.colorBorder,\n        hoverBorderColor: baseToken.colorBorder,\n      },\n    },\n    token: {\n      ...baseToken,\n      // @ts-ignore\n      neutralColor,\n      primaryColor,\n    },\n  };\n};\n"],"mappings":";;;;;;;;;;AAoBA,MAAa,uBAAuB,EAClC,cACA,YACA,mBACsC;CAGtC,OAAO;EACL,WAHa,eAAe,SAGR,gBAAgB;EACpC,YAAY;GACV,QAAQ,EACN,mBAAmB,GACrB;GACA,YAAY;IACV,mBAAmB,UAAU;IAC7B,kBAAkB,UAAU;GAC9B;GACA,OAAO;IACL,mBAAmB,UAAU;IAC7B,kBAAkB,UAAU;GAC9B;GACA,aAAa;IACX,mBAAmB,UAAU;IAC7B,kBAAkB,UAAU;GAC9B;GACA,UAAU;IACR,mBAAmB,UAAU;IAC7B,kBAAkB,UAAU;GAC9B;GACA,QAAQ;IACN,mBAAmB,UAAU;IAC7B,kBAAkB,UAAU;GAC9B;EACF;EACA,OAAO;GACL,GAAG;GAEH;GACA;EACF;CACF;AACF"}
+{"version":3,"file":"antdTheme.mjs","names":[],"sources":["../../../src/styles/theme/antdTheme.ts"],"sourcesContent":["import type { ThemeConfig } from 'antd';\nimport type { ThemeAppearance } from 'antd-style';\n\nimport type { NeutralColors, PrimaryColors } from '../customTheme';\nimport { darkAlgorithm } from './algorithms/darkAlgorithm';\nimport { lightAlgorithm } from './algorithms/lightAlgorithm';\nimport { baseToken } from './token/base';\nimport { shadowToken } from './token/shadow';\n\nexport interface LobeAntdThemeParams {\n  appearance: ThemeAppearance;\n  neutralColor?: NeutralColors;\n  primaryColor?: PrimaryColors;\n}\n\n/**\n * create A LobeHub Style Antd Theme Object\n * @param neutralColor\n * @param appearance\n * @param primaryColor\n */\nexport const createLobeAntdTheme = ({\n  neutralColor,\n  appearance,\n  primaryColor,\n}: LobeAntdThemeParams): ThemeConfig => {\n  const isDark = appearance === 'dark';\n\n  return {\n    algorithm: isDark ? darkAlgorithm : lightAlgorithm,\n    components: {\n      Button: {\n        contentFontSizeSM: 12,\n      },\n      DatePicker: {\n        activeBorderColor: baseToken.colorBorder,\n        hoverBorderColor: baseToken.colorBorder,\n      },\n      Input: {\n        activeBorderColor: baseToken.colorBorder,\n        hoverBorderColor: baseToken.colorBorder,\n      },\n      InputNumber: {\n        activeBorderColor: baseToken.colorBorder,\n        hoverBorderColor: baseToken.colorBorder,\n      },\n      Mentions: {\n        activeBorderColor: baseToken.colorBorder,\n        hoverBorderColor: baseToken.colorBorder,\n      },\n      Select: {\n        activeBorderColor: baseToken.colorBorder,\n        hoverBorderColor: baseToken.colorBorder,\n      },\n    },\n    token: {\n      ...baseToken,\n      ...shadowToken[isDark ? 'dark' : 'light'],\n      // @ts-ignore\n      neutralColor,\n      primaryColor,\n    },\n  };\n};\n"],"mappings":";;;;;;;;;;;AAqBA,MAAa,uBAAuB,EAClC,cACA,YACA,mBACsC;CACtC,MAAM,SAAS,eAAe;CAE9B,OAAO;EACL,WAAW,SAAS,gBAAgB;EACpC,YAAY;GACV,QAAQ,EACN,mBAAmB,GACrB;GACA,YAAY;IACV,mBAAmB,UAAU;IAC7B,kBAAkB,UAAU;GAC9B;GACA,OAAO;IACL,mBAAmB,UAAU;IAC7B,kBAAkB,UAAU;GAC9B;GACA,aAAa;IACX,mBAAmB,UAAU;IAC7B,kBAAkB,UAAU;GAC9B;GACA,UAAU;IACR,mBAAmB,UAAU;IAC7B,kBAAkB,UAAU;GAC9B;GACA,QAAQ;IACN,mBAAmB,UAAU;IAC7B,kBAAkB,UAAU;GAC9B;EACF;EACA,OAAO;GACL,GAAG;GACH,GAAG,YAAY,SAAS,SAAS;GAEjC;GACA;EACF;CACF;AACF"}

package/es/styles/theme/token/dark.mjs

@@ -42,9 +42,6 @@ const darkBaseToken = {
 	...warningToken,
 	...errorToken,
 	...infoToken,
-	boxShadow: "0 20px 20px -8px rgba(0, 0, 0, 0.24)",
-	boxShadowSecondary: "0 8px 16px -4px rgba(0, 0, 0, 0.2)",
-	boxShadowTertiary: "0 3px 1px -1px rgba(26, 26, 26, 0.06)",
 	colorLink: infoToken.colorInfoText,
 	colorLinkActive: infoToken.colorInfoTextActive,
 	colorLinkHover: infoToken.colorInfoTextHover,

package/es/styles/theme/token/dark.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"dark.mjs","names":["blue"],"sources":["../../../../src/styles/theme/token/dark.ts"],"sourcesContent":["import type { AliasToken } from 'antd/es/theme/interface';\n\nimport { blue, gold, gray, lime, primary, red } from '@/color/colors';\n\nimport { generateColorNeutralPalette, generateColorPalette } from '../generateColorPalette';\n\nconst primaryToken = generateColorPalette({\n  appearance: 'dark',\n  scale: primary,\n  type: 'Primary',\n});\n\nconst neutralToken = generateColorNeutralPalette({\n  appearance: 'dark',\n  scale: gray,\n});\n\nconst successToken = generateColorPalette({\n  appearance: 'dark',\n  scale: lime,\n  type: 'Success',\n});\n\nconst warningToken = generateColorPalette({\n  appearance: 'dark',\n  scale: gold,\n  type: 'Warning',\n});\n\nconst errorToken = generateColorPalette({\n  appearance: 'dark',\n  scale: red,\n  type: 'Error',\n});\n\nconst infoToken = generateColorPalette({\n  appearance: 'dark',\n  scale: blue,\n  type: 'Info',\n});\n\nconst darkBaseToken: Partial<AliasToken> = {\n  ...primaryToken,\n  ...neutralToken,\n  ...successToken,\n  ...warningToken,\n  ...errorToken,\n  ...infoToken,\n\n  boxShadow: '0 20px 20px -8px rgba(0, 0, 0, 0.24)',\n  boxShadowSecondary: '0 8px 16px -4px rgba(0, 0, 0, 0.2)',\n  boxShadowTertiary: '0 3px 1px -1px rgba(26, 26, 26, 0.06)',\n  colorLink: infoToken.colorInfoText,\n  colorLinkActive: infoToken.colorInfoTextActive,\n\n  colorLinkHover: infoToken.colorInfoTextHover,\n  colorTextLightSolid: neutralToken.colorBgLayout,\n};\n\nexport default darkBaseToken;\n"],"mappings":";;;;;;;;AAMA,MAAM,eAAe,qBAAqB;CACxC,YAAY;CACZ,OAAO;CACP,MAAM;AACR,CAAC;AAED,MAAM,eAAe,4BAA4B;CAC/C,YAAY;CACZ,OAAO;AACT,CAAC;AAED,MAAM,eAAe,qBAAqB;CACxC,YAAY;CACZ,OAAO;CACP,MAAM;AACR,CAAC;AAED,MAAM,eAAe,qBAAqB;CACxC,YAAY;CACZ,OAAO;CACP,MAAM;AACR,CAAC;AAED,MAAM,aAAa,qBAAqB;CACtC,YAAY;CACZ,OAAO;CACP,MAAM;AACR,CAAC;AAED,MAAM,YAAY,qBAAqB;CACrC,YAAY;CACZ,OAAOA;CACP,MAAM;AACR,CAAC;AAED,MAAM,gBAAqC;CACzC,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CAEH,WAAW;CACX,oBAAoB;CACpB,mBAAmB;CACnB,WAAW,UAAU;CACrB,iBAAiB,UAAU;CAE3B,gBAAgB,UAAU;CAC1B,qBAAqB,aAAa;AACpC"}
+{"version":3,"file":"dark.mjs","names":["blue"],"sources":["../../../../src/styles/theme/token/dark.ts"],"sourcesContent":["import type { AliasToken } from 'antd/es/theme/interface';\n\nimport { blue, gold, gray, lime, primary, red } from '@/color/colors';\n\nimport { generateColorNeutralPalette, generateColorPalette } from '../generateColorPalette';\n\nconst primaryToken = generateColorPalette({\n  appearance: 'dark',\n  scale: primary,\n  type: 'Primary',\n});\n\nconst neutralToken = generateColorNeutralPalette({\n  appearance: 'dark',\n  scale: gray,\n});\n\nconst successToken = generateColorPalette({\n  appearance: 'dark',\n  scale: lime,\n  type: 'Success',\n});\n\nconst warningToken = generateColorPalette({\n  appearance: 'dark',\n  scale: gold,\n  type: 'Warning',\n});\n\nconst errorToken = generateColorPalette({\n  appearance: 'dark',\n  scale: red,\n  type: 'Error',\n});\n\nconst infoToken = generateColorPalette({\n  appearance: 'dark',\n  scale: blue,\n  type: 'Info',\n});\n\nconst darkBaseToken: Partial<AliasToken> = {\n  ...primaryToken,\n  ...neutralToken,\n  ...successToken,\n  ...warningToken,\n  ...errorToken,\n  ...infoToken,\n\n  colorLink: infoToken.colorInfoText,\n  colorLinkActive: infoToken.colorInfoTextActive,\n\n  colorLinkHover: infoToken.colorInfoTextHover,\n  colorTextLightSolid: neutralToken.colorBgLayout,\n};\n\nexport default darkBaseToken;\n"],"mappings":";;;;;;;;AAMA,MAAM,eAAe,qBAAqB;CACxC,YAAY;CACZ,OAAO;CACP,MAAM;AACR,CAAC;AAED,MAAM,eAAe,4BAA4B;CAC/C,YAAY;CACZ,OAAO;AACT,CAAC;AAED,MAAM,eAAe,qBAAqB;CACxC,YAAY;CACZ,OAAO;CACP,MAAM;AACR,CAAC;AAED,MAAM,eAAe,qBAAqB;CACxC,YAAY;CACZ,OAAO;CACP,MAAM;AACR,CAAC;AAED,MAAM,aAAa,qBAAqB;CACtC,YAAY;CACZ,OAAO;CACP,MAAM;AACR,CAAC;AAED,MAAM,YAAY,qBAAqB;CACrC,YAAY;CACZ,OAAOA;CACP,MAAM;AACR,CAAC;AAED,MAAM,gBAAqC;CACzC,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CAEH,WAAW,UAAU;CACrB,iBAAiB,UAAU;CAE3B,gBAAgB,UAAU;CAC1B,qBAAqB,aAAa;AACpC"}

package/es/styles/theme/token/light.mjs

@@ -42,9 +42,6 @@ const lightBaseToken = {
 	...warningToken,
 	...errorToken,
 	...infoToken,
-	boxShadow: "0 20px 20px -8px rgba(0, 0, 0, 0.24)",
-	boxShadowSecondary: "0 8px 16px -4px rgba(0, 0, 0, 0.2)",
-	boxShadowTertiary: "0 3px 1px -1px rgba(26, 26, 26, 0.06)",
 	colorLink: infoToken.colorInfoText,
 	colorLinkActive: infoToken.colorInfoTextActive,
 	colorLinkHover: infoToken.colorInfoTextHover,

package/es/styles/theme/token/light.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"light.mjs","names":[],"sources":["../../../../src/styles/theme/token/light.ts"],"sourcesContent":["import type { AliasToken } from 'antd/es/theme/interface';\n\nimport { geekblue, gold, gray, green, primary, volcano } from '@/color/colors';\n\nimport { generateColorNeutralPalette, generateColorPalette } from '../generateColorPalette';\n\nconst primaryToken = generateColorPalette({\n  appearance: 'light',\n  scale: primary,\n  type: 'Primary',\n});\n\nconst neutralToken = generateColorNeutralPalette({\n  appearance: 'light',\n  scale: gray,\n});\n\nconst successToken = generateColorPalette({\n  appearance: 'light',\n  scale: green,\n  type: 'Success',\n});\n\nconst warningToken = generateColorPalette({\n  appearance: 'light',\n  scale: gold,\n  type: 'Warning',\n});\n\nconst errorToken = generateColorPalette({\n  appearance: 'light',\n  scale: volcano,\n  type: 'Error',\n});\n\nconst infoToken = generateColorPalette({\n  appearance: 'light',\n  scale: geekblue,\n  type: 'Info',\n});\n\nconst lightBaseToken: Partial<AliasToken> = {\n  ...primaryToken,\n  ...neutralToken,\n  ...successToken,\n  ...warningToken,\n  ...errorToken,\n  ...infoToken,\n\n  boxShadow: '0 20px 20px -8px rgba(0, 0, 0, 0.24)',\n  boxShadowSecondary: '0 8px 16px -4px rgba(0, 0, 0, 0.2)',\n  boxShadowTertiary: '0 3px 1px -1px rgba(26, 26, 26, 0.06)',\n  colorLink: infoToken.colorInfoText,\n  colorLinkActive: infoToken.colorInfoTextActive,\n\n  colorLinkHover: infoToken.colorInfoTextHover,\n  colorTextLightSolid: neutralToken.colorBgLayout,\n};\n\nexport default lightBaseToken;\n"],"mappings":";;;;;;;;AAMA,MAAM,eAAe,qBAAqB;CACxC,YAAY;CACZ,OAAO;CACP,MAAM;AACR,CAAC;AAED,MAAM,eAAe,4BAA4B;CAC/C,YAAY;CACZ,OAAO;AACT,CAAC;AAED,MAAM,eAAe,qBAAqB;CACxC,YAAY;CACZ,OAAO;CACP,MAAM;AACR,CAAC;AAED,MAAM,eAAe,qBAAqB;CACxC,YAAY;CACZ,OAAO;CACP,MAAM;AACR,CAAC;AAED,MAAM,aAAa,qBAAqB;CACtC,YAAY;CACZ,OAAO;CACP,MAAM;AACR,CAAC;AAED,MAAM,YAAY,qBAAqB;CACrC,YAAY;CACZ,OAAO;CACP,MAAM;AACR,CAAC;AAED,MAAM,iBAAsC;CAC1C,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CAEH,WAAW;CACX,oBAAoB;CACpB,mBAAmB;CACnB,WAAW,UAAU;CACrB,iBAAiB,UAAU;CAE3B,gBAAgB,UAAU;CAC1B,qBAAqB,aAAa;AACpC"}
+{"version":3,"file":"light.mjs","names":[],"sources":["../../../../src/styles/theme/token/light.ts"],"sourcesContent":["import type { AliasToken } from 'antd/es/theme/interface';\n\nimport { geekblue, gold, gray, green, primary, volcano } from '@/color/colors';\n\nimport { generateColorNeutralPalette, generateColorPalette } from '../generateColorPalette';\n\nconst primaryToken = generateColorPalette({\n  appearance: 'light',\n  scale: primary,\n  type: 'Primary',\n});\n\nconst neutralToken = generateColorNeutralPalette({\n  appearance: 'light',\n  scale: gray,\n});\n\nconst successToken = generateColorPalette({\n  appearance: 'light',\n  scale: green,\n  type: 'Success',\n});\n\nconst warningToken = generateColorPalette({\n  appearance: 'light',\n  scale: gold,\n  type: 'Warning',\n});\n\nconst errorToken = generateColorPalette({\n  appearance: 'light',\n  scale: volcano,\n  type: 'Error',\n});\n\nconst infoToken = generateColorPalette({\n  appearance: 'light',\n  scale: geekblue,\n  type: 'Info',\n});\n\nconst lightBaseToken: Partial<AliasToken> = {\n  ...primaryToken,\n  ...neutralToken,\n  ...successToken,\n  ...warningToken,\n  ...errorToken,\n  ...infoToken,\n\n  colorLink: infoToken.colorInfoText,\n  colorLinkActive: infoToken.colorInfoTextActive,\n\n  colorLinkHover: infoToken.colorInfoTextHover,\n  colorTextLightSolid: neutralToken.colorBgLayout,\n};\n\nexport default lightBaseToken;\n"],"mappings":";;;;;;;;AAMA,MAAM,eAAe,qBAAqB;CACxC,YAAY;CACZ,OAAO;CACP,MAAM;AACR,CAAC;AAED,MAAM,eAAe,4BAA4B;CAC/C,YAAY;CACZ,OAAO;AACT,CAAC;AAED,MAAM,eAAe,qBAAqB;CACxC,YAAY;CACZ,OAAO;CACP,MAAM;AACR,CAAC;AAED,MAAM,eAAe,qBAAqB;CACxC,YAAY;CACZ,OAAO;CACP,MAAM;AACR,CAAC;AAED,MAAM,aAAa,qBAAqB;CACtC,YAAY;CACZ,OAAO;CACP,MAAM;AACR,CAAC;AAED,MAAM,YAAY,qBAAqB;CACrC,YAAY;CACZ,OAAO;CACP,MAAM;AACR,CAAC;AAED,MAAM,iBAAsC;CAC1C,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CAEH,WAAW,UAAU;CACrB,iBAAiB,UAAU;CAE3B,gBAAgB,UAAU;CAC1B,qBAAqB,aAAa;AACpC"}

package/es/styles/theme/token/shadow.mjs

@@ -0,0 +1,17 @@
+//#region src/styles/theme/token/shadow.ts
+const shadowToken = {
+	dark: {
+		boxShadow: "0 40px 80px rgba(0, 0, 0, 0.09), 0 20px 40px rgba(0, 0, 0, 0.08), 0 10px 20px rgba(0, 0, 0, 0.06), 0 5px 10px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.03)",
+		boxShadowSecondary: "0 17.5px 23.4px rgba(0, 0, 0, 0.06), 0 9.4px 12.5px rgba(0, 0, 0, 0.05), 0 5.25px 7px rgba(0, 0, 0, 0.03), 0 2.8px 3.7px -2px rgba(0, 0, 0, 0.02), 0 1.2px 1.5px rgba(0, 0, 0, 0.02)",
+		boxShadowTertiary: "0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.03)"
+	},
+	light: {
+		boxShadow: "0 40px 80px rgba(0, 0, 0, 0.06), 0 20px 40px rgba(0, 0, 0, 0.05), 0 10px 20px rgba(0, 0, 0, 0.04), 0 5px 10px rgba(0, 0, 0, 0.03), 0 2px 4px rgba(0, 0, 0, 0.02)",
+		boxShadowSecondary: "0 17.5px 23.4px rgba(0, 0, 0, 0.04), 0 9.4px 12.5px rgba(0, 0, 0, 0.03), 0 5.25px 7px rgba(0, 0, 0, 0.02), 0 2.8px 3.7px -2px rgba(0, 0, 0, 0.01), 0 1.2px 1.5px rgba(0, 0, 0, 0.01)",
+		boxShadowTertiary: "0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.02)"
+	}
+};
+//#endregion
+export { shadowToken };
+
+//# sourceMappingURL=shadow.mjs.map

package/es/styles/theme/token/shadow.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"shadow.mjs","names":[],"sources":["../../../../src/styles/theme/token/shadow.ts"],"sourcesContent":["import type { AliasToken } from 'antd/es/theme/interface';\n\n/* antd's formatToken recomputes boxShadow* after the mapping algorithm runs, so these only take\n   effect when passed through ThemeConfig.token, never from light/dark base tokens. */\nexport const shadowToken: Record<'light' | 'dark', Partial<AliasToken>> = {\n  dark: {\n    boxShadow:\n      '0 40px 80px rgba(0, 0, 0, 0.09), 0 20px 40px rgba(0, 0, 0, 0.08), 0 10px 20px rgba(0, 0, 0, 0.06), 0 5px 10px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.03)',\n    boxShadowSecondary:\n      '0 17.5px 23.4px rgba(0, 0, 0, 0.06), 0 9.4px 12.5px rgba(0, 0, 0, 0.05), 0 5.25px 7px rgba(0, 0, 0, 0.03), 0 2.8px 3.7px -2px rgba(0, 0, 0, 0.02), 0 1.2px 1.5px rgba(0, 0, 0, 0.02)',\n    boxShadowTertiary: '0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.03)',\n  },\n  light: {\n    boxShadow:\n      '0 40px 80px rgba(0, 0, 0, 0.06), 0 20px 40px rgba(0, 0, 0, 0.05), 0 10px 20px rgba(0, 0, 0, 0.04), 0 5px 10px rgba(0, 0, 0, 0.03), 0 2px 4px rgba(0, 0, 0, 0.02)',\n    boxShadowSecondary:\n      '0 17.5px 23.4px rgba(0, 0, 0, 0.04), 0 9.4px 12.5px rgba(0, 0, 0, 0.03), 0 5.25px 7px rgba(0, 0, 0, 0.02), 0 2.8px 3.7px -2px rgba(0, 0, 0, 0.01), 0 1.2px 1.5px rgba(0, 0, 0, 0.01)',\n    boxShadowTertiary: '0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.02)',\n  },\n};\n"],"mappings":";AAIA,MAAa,cAA6D;CACxE,MAAM;EACJ,WACE;EACF,oBACE;EACF,mBAAmB;CACrB;CACA,OAAO;EACL,WACE;EACF,oBACE;EACF,mBAAmB;CACrB;AACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "5.47.6",
+  "version": "5.48.1",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",