@lobehub/ui 4.32.2 → 4.33.1

package/es/Menu/sharedStyle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"sharedStyle.mjs","names":["cssVar"],"sources":["../../src/Menu/sharedStyle.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  danger: css`\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    font-size: 12px;\n    color: ${cssVar.colorTextTertiary};\n  `,\n\n  groupLabel: css`\n    user-select: none;\n\n    padding-block: 8px 4px;\n    padding-inline: 12px;\n\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 16px;\n    color: ${cssVar.colorTextTertiary};\n    text-transform: capitalize;\n  `,\n\n  icon: 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-end: 8px;\n  `,\n\n  item: css`\n    cursor: pointer;\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: 36px;\n    padding-block: 8px;\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  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  popup: css`\n    min-width: 120px;\n    padding: 4px;\n    border-radius: ${cssVar.borderRadius};\n\n    background: ${cssVar.colorBgElevated};\n    outline: none;\n    box-shadow:\n      0 0 15px 0 #00000008,\n      0 2px 30px 0 #00000014,\n      0 0 0 1px ${cssVar.colorBorder} inset;\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\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: 20px;\n    height: 20px;\n    margin-inline-start: auto;\n    padding-inline-start: 8px;\n  `,\n}));\n"],"mappings":";;;AAEA,MAAa,SAAS,oBAAoB,EAAE,YAAK,wBAAc;CAC7D,QAAQ,KAAG;aACAA,SAAO,WAAW;;;oBAGXA,SAAO,aAAa;;;CAItC,OAAO,KAAG;;;aAGCA,SAAO,kBAAkB;;CAGpC,OAAO,KAAG;;;;aAICA,SAAO,kBAAkB;;CAGpC,YAAY,KAAG;;;;;;;;;aASJA,SAAO,kBAAkB;;;CAIpC,MAAM,KAAG;;;;;;;;;;CAWT,MAAM,KAAG;;;;;;;;;;;;;;qBAcUA,SAAO,eAAe;;;;aAI9BA,SAAO,UAAU;;;;4BAIFA,SAAO,cAAc;;;oBAG7BA,SAAO,kBAAkB;;;;oBAIzBA,SAAO,mBAAmB;;;;;eAK/BA,SAAO,kBAAkB;;;;;;;;;oBASpBA,SAAO,kBAAkB;;;;;;oBAMzBA,SAAO,kBAAkB;;;CAI3C,aAAa,KAAG;;;;;;CAOhB,OAAO,KAAG;;;;;;;;;;;;;CAcV,OAAO,KAAG;;;qBAGSA,SAAO,aAAa;;kBAEvBA,SAAO,gBAAgB;;;;;kBAKvBA,SAAO,YAAY;;CAEnC,YAAY,KAAG;;;;0CAIyBA,SAAO,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoC7D,WAAW,KAAG;;;;kBAIEA,SAAO,YAAY;;CAGnC,cAAc,KAAG;;;;;;;;;;;CAWlB,EAAE"}
+{"version":3,"file":"sharedStyle.mjs","names":["cssVar"],"sources":["../../src/Menu/sharedStyle.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  danger: css`\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    font-size: 12px;\n    color: ${cssVar.colorTextTertiary};\n  `,\n\n  groupLabel: css`\n    user-select: none;\n\n    padding-block: 8px 4px;\n    padding-inline: 12px;\n\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 16px;\n    color: ${cssVar.colorTextTertiary};\n    text-transform: capitalize;\n  `,\n\n  icon: 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-end: 8px;\n  `,\n\n  item: css`\n    cursor: pointer;\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: 36px;\n    padding-block: 8px;\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  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  popup: css`\n    min-width: 120px;\n    padding: 4px;\n    border-radius: ${cssVar.borderRadius};\n\n    background: ${cssVar.colorBgElevated};\n    outline: none;\n    box-shadow:\n      0 0 15px 0 #00000008,\n      0 2px 30px 0 #00000014,\n      0 0 0 1px ${cssVar.colorBorder} inset;\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      --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: 20px;\n    height: 20px;\n    margin-inline-start: auto;\n    padding-inline-start: 8px;\n  `,\n}));\n"],"mappings":";;;AAEA,MAAa,SAAS,oBAAoB,EAAE,YAAK,wBAAc;CAC7D,QAAQ,KAAG;aACAA,SAAO,WAAW;;;oBAGXA,SAAO,aAAa;;;CAItC,OAAO,KAAG;;;aAGCA,SAAO,kBAAkB;;CAGpC,OAAO,KAAG;;;;aAICA,SAAO,kBAAkB;;CAGpC,YAAY,KAAG;;;;;;;;;aASJA,SAAO,kBAAkB;;;CAIpC,MAAM,KAAG;;;;;;;;;;CAWT,MAAM,KAAG;;;;;;;;;;;;;;qBAcUA,SAAO,eAAe;;;;aAI9BA,SAAO,UAAU;;;;4BAIFA,SAAO,cAAc;;;oBAG7BA,SAAO,kBAAkB;;;;oBAIzBA,SAAO,mBAAmB;;;;;eAK/BA,SAAO,kBAAkB;;;;;;;;;oBASpBA,SAAO,kBAAkB;;;;;;oBAMzBA,SAAO,kBAAkB;;;CAI3C,aAAa,KAAG;;;;;;CAOhB,OAAO,KAAG;;;;;;;;;;;;;CAcV,OAAO,KAAG;;;qBAGSA,SAAO,aAAa;;kBAEvBA,SAAO,gBAAgB;;;;;kBAKvBA,SAAO,YAAY;;CAEnC,YAAY,KAAG;;;;0CAIyBA,SAAO,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyC7D,WAAW,KAAG;;;;kBAIEA,SAAO,YAAY;;CAGnC,cAAc,KAAG;;;;;;;;;;;CAWlB,EAAE"}

package/es/Mermaid/FullFeatured.mjs

@@ -4,8 +4,8 @@ import FlexBasic_default from "../Flex/FlexBasic.mjs";
 import Text_default from "../Text/Text.mjs";
 import { stopPropagation } from "../utils/dom.mjs";
 import ActionIcon_default from "../ActionIcon/ActionIcon.mjs";
-import CopyButton_default from "../CopyButton/CopyButton.mjs";
 import MaterialFileTypeIcon_default from "../MaterialFileTypeIcon/MaterialFileTypeIcon.mjs";
+import CopyButton_default from "../CopyButton/CopyButton.mjs";
 import { bodyVariants, headerVariants, variants } from "../Highlighter/style.mjs";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/es/Mermaid/Mermaid.d.mts

@@ -1,8 +1,8 @@
 import { MermaidProps } from "./type.mjs";
-import * as react57 from "react";
+import * as react82 from "react";
 
 //#region src/Mermaid/Mermaid.d.ts
-declare const Mermaid: react57.NamedExoticComponent<MermaidProps>;
+declare const Mermaid: react82.NamedExoticComponent<MermaidProps>;
 //#endregion
 export { Mermaid };
 //# sourceMappingURL=Mermaid.d.mts.map

package/es/Mermaid/SyntaxMermaid/index.d.mts

@@ -1,8 +1,8 @@
 import { SyntaxMermaidProps } from "../type.mjs";
-import * as react58 from "react";
+import * as react84 from "react";
 
 //#region src/Mermaid/SyntaxMermaid/index.d.ts
-declare const SyntaxMermaid: react58.NamedExoticComponent<SyntaxMermaidProps>;
+declare const SyntaxMermaid: react84.NamedExoticComponent<SyntaxMermaidProps>;
 //#endregion
 export { SyntaxMermaid };
 //# sourceMappingURL=index.d.mts.map

package/es/Modal/Modal.d.mts

@@ -1,8 +1,8 @@
 import { ModalProps } from "./type.mjs";
-import * as react76 from "react";
+import * as react51 from "react";
 
 //#region src/Modal/Modal.d.ts
-declare const Modal: react76.NamedExoticComponent<ModalProps>;
+declare const Modal: react51.NamedExoticComponent<ModalProps>;
 //#endregion
 export { Modal };
 //# sourceMappingURL=Modal.d.mts.map

package/es/Modal/ModalProvider.d.mts

@@ -1,9 +1,9 @@
 import { ModalContextValue } from "./type.mjs";
-import * as react77 from "react";
+import * as react52 from "react";
 import { ReactNode } from "react";
 
 //#region src/Modal/ModalProvider.d.ts
-declare const ModalProvider: react77.NamedExoticComponent<{
+declare const ModalProvider: react52.NamedExoticComponent<{
   children: ReactNode;
   value: ModalContextValue;
 }>;

package/es/Modal/imperative.d.mts

@@ -1,5 +1,5 @@
 import { ImperativeModalProps, ModalInstance, RawModalComponent, RawModalComponentProps, RawModalInstance, RawModalKeyOptions, RawModalOptions } from "./type.mjs";
-import * as react_jsx_runtime35 from "react/jsx-runtime";
+import * as react_jsx_runtime41 from "react/jsx-runtime";
 
 //#region src/Modal/imperative.d.ts
 type ModalHostProps = {
@@ -7,7 +7,7 @@ type ModalHostProps = {
 };
 declare const ModalHost: ({
   root
-}: ModalHostProps) => react_jsx_runtime35.JSX.Element | null;
+}: ModalHostProps) => react_jsx_runtime41.JSX.Element | null;
 declare const createModal: (props: ImperativeModalProps) => ModalInstance;
 declare function createRawModal<P extends RawModalComponentProps>(component: RawModalComponent<P>, props: Omit<P, 'open' | 'onClose'>, options?: RawModalOptions): RawModalInstance<P>;
 declare function createRawModal<P, OpenKey extends keyof P, CloseKey extends keyof P>(component: RawModalComponent<P>, props: Omit<P, OpenKey | CloseKey>, options: RawModalKeyOptions<OpenKey, CloseKey>): RawModalInstance<P, OpenKey, CloseKey>;

package/es/MotionProvider/index.d.mts

@@ -1,4 +1,4 @@
-import * as react54 from "react";
+import * as react73 from "react";
 import { Context, ReactNode } from "react";
 import * as motion_react0 from "motion/react";
 import * as m from "motion/react-m";
@@ -6,7 +6,7 @@ import * as m from "motion/react-m";
 //#region src/MotionProvider/index.d.ts
 type MotionComponentType = typeof motion_react0.motion | typeof m;
 declare const MotionComponent: Context<MotionComponentType>;
-declare const MotionProvider: react54.NamedExoticComponent<{
+declare const MotionProvider: react73.NamedExoticComponent<{
   children: ReactNode;
   motion: MotionComponentType;
 }>;

package/es/Popover/ArrowIcon.d.mts

@@ -1,7 +1,7 @@
-import * as react_jsx_runtime28 from "react/jsx-runtime";
+import * as react_jsx_runtime8 from "react/jsx-runtime";
 
 //#region src/Popover/ArrowIcon.d.ts
-declare const PopoverArrowIcon: react_jsx_runtime28.JSX.Element;
+declare const PopoverArrowIcon: react_jsx_runtime8.JSX.Element;
 //#endregion
 export { PopoverArrowIcon };
 //# sourceMappingURL=ArrowIcon.d.mts.map

package/es/Popover/atoms.d.mts

@@ -1,13 +1,13 @@
 import { PopoverPlacement } from "./type.mjs";
-import * as react72 from "react";
+import * as react19 from "react";
 import { ComponentProps, ComponentPropsWithRef } from "react";
-import * as react_jsx_runtime29 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 import * as _base_ui_react_popover0 from "@base-ui/react/popover";
 import { Popover } from "@base-ui/react/popover";
 
 //#region src/Popover/atoms.d.ts
 declare const PopoverRoot: typeof Popover.Root;
-declare const PopoverBackdrop: react72.ForwardRefExoticComponent<_base_ui_react_popover0.PopoverBackdropProps & react72.RefAttributes<HTMLDivElement>>;
+declare const PopoverBackdrop: react19.ForwardRefExoticComponent<_base_ui_react_popover0.PopoverBackdropProps & react19.RefAttributes<HTMLDivElement>>;
 type PopoverTriggerElementProps = Omit<ComponentPropsWithRef<typeof Popover.Trigger>, 'children' | 'render'> & {
   children: ComponentProps<typeof Popover.Trigger>['children'];
 };
@@ -18,7 +18,7 @@ declare const PopoverTriggerElement: {
     nativeButton,
     ref: refProp,
     ...rest
-  }: PopoverTriggerElementProps): react_jsx_runtime29.JSX.Element;
+  }: PopoverTriggerElementProps): react_jsx_runtime2.JSX.Element;
   displayName: string;
 };
 type PopoverPortalAtomProps = Omit<ComponentProps<typeof Popover.Portal>, 'container'> & {
@@ -37,7 +37,7 @@ declare const PopoverPortal: {
     root,
     children,
     ...rest
-  }: PopoverPortalAtomProps): react_jsx_runtime29.JSX.Element | null;
+  }: PopoverPortalAtomProps): react_jsx_runtime2.JSX.Element | null;
   displayName: string;
 };
 type PopoverPositionerAtomProps = ComponentProps<typeof Popover.Positioner> & {
@@ -54,7 +54,7 @@ declare const PopoverPositioner: {
     side,
     sideOffset,
     ...rest
-  }: PopoverPositionerAtomProps): react_jsx_runtime29.JSX.Element;
+  }: PopoverPositionerAtomProps): react_jsx_runtime2.JSX.Element;
   displayName: string;
 };
 type PopoverPopupAtomProps = ComponentProps<typeof Popover.Popup>;
@@ -62,7 +62,7 @@ declare const PopoverPopup: {
   ({
     className,
     ...rest
-  }: PopoverPopupAtomProps): react_jsx_runtime29.JSX.Element;
+  }: PopoverPopupAtomProps): react_jsx_runtime2.JSX.Element;
   displayName: string;
 };
 type PopoverArrowAtomProps = ComponentProps<typeof Popover.Arrow>;
@@ -71,7 +71,7 @@ declare const PopoverArrow: {
     className,
     children,
     ...rest
-  }: PopoverArrowAtomProps): react_jsx_runtime29.JSX.Element;
+  }: PopoverArrowAtomProps): react_jsx_runtime2.JSX.Element;
   displayName: string;
 };
 type PopoverViewportAtomProps = ComponentProps<typeof Popover.Viewport>;
@@ -79,7 +79,7 @@ declare const PopoverViewport: {
   ({
     className,
     ...rest
-  }: PopoverViewportAtomProps): react_jsx_runtime29.JSX.Element;
+  }: PopoverViewportAtomProps): react_jsx_runtime2.JSX.Element;
   displayName: string;
 };
 //#endregion

package/es/Popover/context.d.mts

@@ -1,11 +1,11 @@
-import * as react74 from "react";
+import * as react21 from "react";
 import { ReactNode } from "react";
 
 //#region src/Popover/context.d.ts
 type PopoverContextValue = {
   close: () => void;
 };
-declare const PopoverProvider: react74.NamedExoticComponent<{
+declare const PopoverProvider: react21.NamedExoticComponent<{
   children: ReactNode;
   value: PopoverContextValue;
 }>;

package/es/ScrollArea/ScrollArea.d.mts

@@ -0,0 +1,8 @@
+import { ScrollAreaProps } from "./type.mjs";
+import { FC } from "react";
+
+//#region src/ScrollArea/ScrollArea.d.ts
+declare const ScrollArea: FC<ScrollAreaProps>;
+//#endregion
+export { ScrollArea };
+//# sourceMappingURL=ScrollArea.d.mts.map

package/es/ScrollArea/ScrollArea.mjs

@@ -0,0 +1,32 @@
+'use client';
+
+import { ScrollAreaContent, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from "./atoms.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/ScrollArea/ScrollArea.tsx
+const ScrollArea = ({ children, contentProps, corner = false, cornerProps, scrollFade = false, scrollbarProps, thumbProps, viewportProps, ...rest }) => {
+	return /* @__PURE__ */ jsxs(ScrollAreaRoot, {
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx(ScrollAreaViewport, {
+				scrollFade,
+				...viewportProps,
+				children: /* @__PURE__ */ jsx(ScrollAreaContent, {
+					...contentProps,
+					children
+				})
+			}),
+			/* @__PURE__ */ jsx(ScrollAreaScrollbar, {
+				...scrollbarProps,
+				children: /* @__PURE__ */ jsx(ScrollAreaThumb, { ...thumbProps })
+			}),
+			corner && /* @__PURE__ */ jsx(ScrollAreaCorner, { ...cornerProps })
+		]
+	});
+};
+ScrollArea.displayName = "ScrollArea";
+var ScrollArea_default = ScrollArea;
+
+//#endregion
+export { ScrollArea_default as default };
+//# sourceMappingURL=ScrollArea.mjs.map

package/es/ScrollArea/ScrollArea.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.mjs","names":["ScrollArea: FC<ScrollAreaProps>"],"sources":["../../src/ScrollArea/ScrollArea.tsx"],"sourcesContent":["'use client';\n\nimport { type FC } from 'react';\n\nimport {\n  ScrollAreaContent,\n  ScrollAreaCorner,\n  ScrollAreaRoot,\n  ScrollAreaScrollbar,\n  ScrollAreaThumb,\n  ScrollAreaViewport,\n} from './atoms';\nimport type { ScrollAreaProps } from './type';\n\nconst ScrollArea: FC<ScrollAreaProps> = ({\n  children,\n  contentProps,\n  corner = false,\n  cornerProps,\n  scrollFade = false,\n  scrollbarProps,\n  thumbProps,\n  viewportProps,\n  ...rest\n}) => {\n  return (\n    <ScrollAreaRoot {...rest}>\n      <ScrollAreaViewport scrollFade={scrollFade} {...viewportProps}>\n        <ScrollAreaContent {...contentProps}>{children}</ScrollAreaContent>\n      </ScrollAreaViewport>\n      <ScrollAreaScrollbar {...scrollbarProps}>\n        <ScrollAreaThumb {...thumbProps} />\n      </ScrollAreaScrollbar>\n      {corner && <ScrollAreaCorner {...cornerProps} />}\n    </ScrollAreaRoot>\n  );\n};\n\nScrollArea.displayName = 'ScrollArea';\n\nexport default ScrollArea;\n"],"mappings":";;;;;;AAcA,MAAMA,cAAmC,EACvC,UACA,cACA,SAAS,OACT,aACA,aAAa,OACb,gBACA,YACA,eACA,GAAG,WACC;AACJ,QACE,qBAAC;EAAe,GAAI;;GAClB,oBAAC;IAA+B;IAAY,GAAI;cAC9C,oBAAC;KAAkB,GAAI;KAAe;MAA6B;KAChD;GACrB,oBAAC;IAAoB,GAAI;cACvB,oBAAC,mBAAgB,GAAI,aAAc;KACf;GACrB,UAAU,oBAAC,oBAAiB,GAAI,cAAe;;GACjC;;AAIrB,WAAW,cAAc;AAEzB,yBAAe"}

package/es/ScrollArea/atoms.d.mts

@@ -0,0 +1,63 @@
+import React from "react";
+import * as react_jsx_runtime9 from "react/jsx-runtime";
+import { ScrollArea } from "@base-ui/react/scroll-area";
+
+//#region src/ScrollArea/atoms.d.ts
+type ScrollAreaRootProps = React.ComponentProps<typeof ScrollArea.Root>;
+type ScrollAreaViewportProps = React.ComponentProps<typeof ScrollArea.Viewport> & {
+  /**
+   * Enable gradient scroll fade on the viewport edges.
+   * @default false
+   */
+  scrollFade?: boolean;
+};
+type ScrollAreaContentProps = React.ComponentProps<typeof ScrollArea.Content>;
+type ScrollAreaScrollbarProps = React.ComponentProps<typeof ScrollArea.Scrollbar>;
+type ScrollAreaThumbProps = React.ComponentProps<typeof ScrollArea.Thumb>;
+type ScrollAreaCornerProps = React.ComponentProps<typeof ScrollArea.Corner>;
+declare const ScrollAreaRoot: {
+  ({
+    className,
+    ...rest
+  }: ScrollAreaRootProps): react_jsx_runtime9.JSX.Element;
+  displayName: string;
+};
+declare const ScrollAreaViewport: {
+  ({
+    className,
+    scrollFade,
+    ...rest
+  }: ScrollAreaViewportProps): react_jsx_runtime9.JSX.Element;
+  displayName: string;
+};
+declare const ScrollAreaContent: {
+  ({
+    className,
+    ...rest
+  }: ScrollAreaContentProps): react_jsx_runtime9.JSX.Element;
+  displayName: string;
+};
+declare const ScrollAreaScrollbar: {
+  ({
+    className,
+    ...rest
+  }: ScrollAreaScrollbarProps): react_jsx_runtime9.JSX.Element;
+  displayName: string;
+};
+declare const ScrollAreaThumb: {
+  ({
+    className,
+    ...rest
+  }: ScrollAreaThumbProps): react_jsx_runtime9.JSX.Element;
+  displayName: string;
+};
+declare const ScrollAreaCorner: {
+  ({
+    className,
+    ...rest
+  }: ScrollAreaCornerProps): react_jsx_runtime9.JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { ScrollAreaContent, ScrollAreaContentProps, ScrollAreaCorner, ScrollAreaCornerProps, ScrollAreaRoot, ScrollAreaRootProps, ScrollAreaScrollbar, ScrollAreaScrollbarProps, ScrollAreaThumb, ScrollAreaThumbProps, ScrollAreaViewport, ScrollAreaViewportProps };
+//# sourceMappingURL=atoms.d.mts.map

package/es/ScrollArea/atoms.mjs

@@ -0,0 +1,59 @@
+'use client';
+
+import globalStyle_default from "./globalStyle.mjs";
+import { styles } from "./style.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { ScrollArea } from "@base-ui/react/scroll-area";
+
+//#region src/ScrollArea/atoms.tsx
+const mergeStateClassName = (base, className) => {
+	if (typeof className === "function") return (state) => cx(base, className(state));
+	return cx(base, className);
+};
+const ScrollAreaRoot = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx(ScrollArea.Root, {
+		...rest,
+		className: mergeStateClassName(styles.root, className)
+	});
+};
+ScrollAreaRoot.displayName = "ScrollAreaRoot";
+const ScrollAreaViewport = ({ className, scrollFade = false, ...rest }) => {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(globalStyle_default, {}), /* @__PURE__ */ jsx(ScrollArea.Viewport, {
+		...rest,
+		className: mergeStateClassName(cx(styles.viewport, scrollFade && styles.viewportFade), className)
+	})] });
+};
+ScrollAreaViewport.displayName = "ScrollAreaViewport";
+const ScrollAreaContent = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx(ScrollArea.Content, {
+		...rest,
+		className: mergeStateClassName(styles.content, className)
+	});
+};
+ScrollAreaContent.displayName = "ScrollAreaContent";
+const ScrollAreaScrollbar = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {
+		...rest,
+		className: mergeStateClassName(styles.scrollbar, className)
+	});
+};
+ScrollAreaScrollbar.displayName = "ScrollAreaScrollbar";
+const ScrollAreaThumb = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx(ScrollArea.Thumb, {
+		...rest,
+		className: mergeStateClassName(styles.thumb, className)
+	});
+};
+ScrollAreaThumb.displayName = "ScrollAreaThumb";
+const ScrollAreaCorner = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx(ScrollArea.Corner, {
+		...rest,
+		className: mergeStateClassName(styles.corner, className)
+	});
+};
+ScrollAreaCorner.displayName = "ScrollAreaCorner";
+
+//#endregion
+export { ScrollAreaContent, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport };
+//# sourceMappingURL=atoms.mjs.map

package/es/ScrollArea/atoms.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"atoms.mjs","names":["BaseScrollArea","ScrollAreaGlobalStyle"],"sources":["../../src/ScrollArea/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';\nimport { cx } from 'antd-style';\nimport type React from 'react';\n\nimport ScrollAreaGlobalStyle from './globalStyle';\nimport { styles } from './style';\n\nconst mergeStateClassName = <TState,>(\n  base: string,\n  className: string | ((state: TState) => string | undefined) | undefined,\n) => {\n  if (typeof className === 'function') return (state: TState) => cx(base, className(state));\n  return cx(base, className);\n};\n\nexport type ScrollAreaRootProps = React.ComponentProps<typeof BaseScrollArea.Root>;\nexport type ScrollAreaViewportProps = React.ComponentProps<typeof BaseScrollArea.Viewport> & {\n  /**\n   * Enable gradient scroll fade on the viewport edges.\n   * @default false\n   */\n  scrollFade?: boolean;\n};\nexport type ScrollAreaContentProps = React.ComponentProps<typeof BaseScrollArea.Content>;\nexport type ScrollAreaScrollbarProps = React.ComponentProps<typeof BaseScrollArea.Scrollbar>;\nexport type ScrollAreaThumbProps = React.ComponentProps<typeof BaseScrollArea.Thumb>;\nexport type ScrollAreaCornerProps = React.ComponentProps<typeof BaseScrollArea.Corner>;\n\nexport const ScrollAreaRoot = ({ className, ...rest }: ScrollAreaRootProps) => {\n  return (\n    <BaseScrollArea.Root {...rest} className={mergeStateClassName(styles.root, className) as any} />\n  );\n};\n\nScrollAreaRoot.displayName = 'ScrollAreaRoot';\n\nexport const ScrollAreaViewport = ({\n  className,\n  scrollFade = false,\n  ...rest\n}: ScrollAreaViewportProps) => {\n  return (\n    <>\n      <ScrollAreaGlobalStyle />\n      <BaseScrollArea.Viewport\n        {...rest}\n        className={\n          mergeStateClassName(\n            cx(styles.viewport, scrollFade && styles.viewportFade),\n            className,\n          ) as any\n        }\n      />\n    </>\n  );\n};\n\nScrollAreaViewport.displayName = 'ScrollAreaViewport';\n\nexport const ScrollAreaContent = ({ className, ...rest }: ScrollAreaContentProps) => {\n  return (\n    <BaseScrollArea.Content\n      {...rest}\n      className={mergeStateClassName(styles.content, className) as any}\n    />\n  );\n};\n\nScrollAreaContent.displayName = 'ScrollAreaContent';\n\nexport const ScrollAreaScrollbar = ({ className, ...rest }: ScrollAreaScrollbarProps) => {\n  return (\n    <BaseScrollArea.Scrollbar\n      {...rest}\n      className={mergeStateClassName(styles.scrollbar, className) as any}\n    />\n  );\n};\n\nScrollAreaScrollbar.displayName = 'ScrollAreaScrollbar';\n\nexport const ScrollAreaThumb = ({ className, ...rest }: ScrollAreaThumbProps) => {\n  return (\n    <BaseScrollArea.Thumb\n      {...rest}\n      className={mergeStateClassName(styles.thumb, className) as any}\n    />\n  );\n};\n\nScrollAreaThumb.displayName = 'ScrollAreaThumb';\n\nexport const ScrollAreaCorner = ({ className, ...rest }: ScrollAreaCornerProps) => {\n  return (\n    <BaseScrollArea.Corner\n      {...rest}\n      className={mergeStateClassName(styles.corner, className) as any}\n    />\n  );\n};\n\nScrollAreaCorner.displayName = 'ScrollAreaCorner';\n"],"mappings":";;;;;;;;;AASA,MAAM,uBACJ,MACA,cACG;AACH,KAAI,OAAO,cAAc,WAAY,SAAQ,UAAkB,GAAG,MAAM,UAAU,MAAM,CAAC;AACzF,QAAO,GAAG,MAAM,UAAU;;AAgB5B,MAAa,kBAAkB,EAAE,WAAW,GAAG,WAAgC;AAC7E,QACE,oBAACA,WAAe;EAAK,GAAI;EAAM,WAAW,oBAAoB,OAAO,MAAM,UAAU;GAAW;;AAIpG,eAAe,cAAc;AAE7B,MAAa,sBAAsB,EACjC,WACA,aAAa,OACb,GAAG,WAC0B;AAC7B,QACE,4CACE,oBAACC,wBAAwB,EACzB,oBAACD,WAAe;EACd,GAAI;EACJ,WACE,oBACE,GAAG,OAAO,UAAU,cAAc,OAAO,aAAa,EACtD,UACD;GAEH,IACD;;AAIP,mBAAmB,cAAc;AAEjC,MAAa,qBAAqB,EAAE,WAAW,GAAG,WAAmC;AACnF,QACE,oBAACA,WAAe;EACd,GAAI;EACJ,WAAW,oBAAoB,OAAO,SAAS,UAAU;GACzD;;AAIN,kBAAkB,cAAc;AAEhC,MAAa,uBAAuB,EAAE,WAAW,GAAG,WAAqC;AACvF,QACE,oBAACA,WAAe;EACd,GAAI;EACJ,WAAW,oBAAoB,OAAO,WAAW,UAAU;GAC3D;;AAIN,oBAAoB,cAAc;AAElC,MAAa,mBAAmB,EAAE,WAAW,GAAG,WAAiC;AAC/E,QACE,oBAACA,WAAe;EACd,GAAI;EACJ,WAAW,oBAAoB,OAAO,OAAO,UAAU;GACvD;;AAIN,gBAAgB,cAAc;AAE9B,MAAa,oBAAoB,EAAE,WAAW,GAAG,WAAkC;AACjF,QACE,oBAACA,WAAe;EACd,GAAI;EACJ,WAAW,oBAAoB,OAAO,QAAQ,UAAU;GACxD;;AAIN,iBAAiB,cAAc"}

package/es/ScrollArea/globalStyle.mjs

@@ -0,0 +1,29 @@
+'use client';
+
+import { createGlobalStyle, css } from "antd-style";
+
+//#region src/ScrollArea/globalStyle.ts
+/**
+* Register animatable custom properties used by scroll-driven animations.
+*
+* Without @property registration, custom properties interpolate discretely,
+* which can cause visible snapping at scroll boundaries.
+*/
+const ScrollAreaGlobalStyle = createGlobalStyle(() => css`
+    @property --lobe-scroll-area-fade-top {
+      inherits: true;
+      initial-value: 0;
+      syntax: '<length>';
+    }
+
+    @property --lobe-scroll-area-fade-bottom {
+      inherits: true;
+      initial-value: 0;
+      syntax: '<length>';
+    }
+  `);
+var globalStyle_default = ScrollAreaGlobalStyle;
+
+//#endregion
+export { globalStyle_default as default };
+//# sourceMappingURL=globalStyle.mjs.map

package/es/ScrollArea/globalStyle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"globalStyle.mjs","names":[],"sources":["../../src/ScrollArea/globalStyle.ts"],"sourcesContent":["'use client';\n\nimport { createGlobalStyle, css } from 'antd-style';\n\n/**\n * Register animatable custom properties used by scroll-driven animations.\n *\n * Without @property registration, custom properties interpolate discretely,\n * which can cause visible snapping at scroll boundaries.\n */\nconst ScrollAreaGlobalStyle = createGlobalStyle(\n  () => css`\n    @property --lobe-scroll-area-fade-top {\n      inherits: true;\n      initial-value: 0;\n      syntax: '<length>';\n    }\n\n    @property --lobe-scroll-area-fade-bottom {\n      inherits: true;\n      initial-value: 0;\n      syntax: '<length>';\n    }\n  `,\n);\n\nexport default ScrollAreaGlobalStyle;\n"],"mappings":";;;;;;;;;;;AAUA,MAAM,wBAAwB,wBACtB,GAAG;;;;;;;;;;;;IAaV;AAED,0BAAe"}

package/es/ScrollArea/index.d.mts

@@ -0,0 +1,4 @@
+import { ScrollAreaContent, ScrollAreaContentProps, ScrollAreaCorner, ScrollAreaCornerProps, ScrollAreaRoot, ScrollAreaRootProps, ScrollAreaScrollbar, ScrollAreaScrollbarProps, ScrollAreaThumb, ScrollAreaThumbProps, ScrollAreaViewport, ScrollAreaViewportProps } from "./atoms.mjs";
+import { ScrollAreaProps } from "./type.mjs";
+import { ScrollArea } from "./ScrollArea.mjs";
+export { ScrollAreaContent, type ScrollAreaContentProps, ScrollAreaCorner, type ScrollAreaCornerProps, type ScrollAreaProps, ScrollAreaRoot, type ScrollAreaRootProps, ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb, type ScrollAreaThumbProps, ScrollAreaViewport, type ScrollAreaViewportProps, ScrollArea as default };

package/es/ScrollArea/index.d.ts

@@ -0,0 +1 @@
+export * from './index.d.mts';

package/es/ScrollArea/index.js

@@ -0,0 +1 @@
+export * from './index.mjs';

package/es/ScrollArea/index.mjs

@@ -0,0 +1,4 @@
+import { ScrollAreaContent, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from "./atoms.mjs";
+import ScrollArea_default from "./ScrollArea.mjs";
+
+export { ScrollAreaContent, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport, ScrollArea_default as default };

package/es/ScrollArea/style.mjs

@@ -0,0 +1,172 @@
+import { createStaticStyles } from "antd-style";
+
+//#region src/ScrollArea/style.ts
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => ({
+	content: css$1`
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    padding-block: 12px;
+    padding-inline: 16px 24px;
+
+    font-size: ${cssVar$1.fontSizeSM};
+    line-height: 1.375rem;
+    color: ${cssVar$1.colorText};
+  `,
+	corner: css$1`
+    background: ${cssVar$1.colorFillSecondary};
+  `,
+	root: css$1`
+    position: relative;
+    box-sizing: border-box;
+    border-radius: ${cssVar$1.borderRadiusLG};
+    background: ${cssVar$1.colorBgLayout};
+  `,
+	scrollbar: css$1`
+    pointer-events: none;
+
+    position: relative;
+
+    display: flex;
+    justify-content: center;
+
+    margin: 8px;
+    border-radius: ${cssVar$1.borderRadiusSM};
+
+    opacity: 0;
+    background: transparent;
+
+    transition: opacity 150ms;
+
+    &::before {
+      content: '';
+      position: absolute;
+    }
+
+    &[data-scrolling] {
+      transition-duration: 0ms;
+    }
+
+    &[data-hovering],
+    &[data-scrolling] {
+      pointer-events: auto;
+      opacity: 1;
+    }
+
+    &[data-orientation='vertical'] {
+      width: 4px;
+
+      &::before {
+        inset-inline-start: 50%;
+        transform: translateX(-50%);
+        width: 20px;
+        height: 100%;
+      }
+    }
+
+    &[data-orientation='horizontal'] {
+      height: 4px;
+
+      &::before {
+        inset-block-end: -8px;
+        inset-inline: 0;
+        width: 100%;
+        height: 20px;
+      }
+    }
+  `,
+	thumb: css$1`
+    width: 100%;
+    border-radius: inherit;
+    background: ${cssVar$1.colorTextQuaternary};
+  `,
+	viewport: css$1`
+    position: relative;
+
+    height: 100%;
+    border-radius: ${cssVar$1.borderRadius};
+
+    background: ${cssVar$1.colorBgLayout};
+    outline: none;
+
+    &:focus-visible {
+      outline: 2px solid ${cssVar$1.colorPrimary};
+      outline-offset: 2px;
+    }
+  `,
+	viewportFade: css$1`
+    --scroll-area-overflow-y-start: inherit;
+    --scroll-area-overflow-y-end: inherit;
+    --lobe-scroll-area-fade-size: 40px;
+    --lobe-scroll-area-fade-top: min(
+      var(--lobe-scroll-area-fade-size),
+      var(--scroll-area-overflow-y-start, 0px)
+    );
+    --lobe-scroll-area-fade-bottom: min(
+      var(--lobe-scroll-area-fade-size),
+      var(--scroll-area-overflow-y-end, 0px)
+    );
+
+    /* Fade the CONTENT via mask, so it works on background images too. */
+    mask-image: linear-gradient(
+      to bottom,
+      transparent 0,
+      #000 var(--lobe-scroll-area-fade-top),
+      #000 calc(100% - var(--lobe-scroll-area-fade-bottom)),
+      transparent 100%
+    );
+    mask-image: linear-gradient(
+      to bottom,
+      transparent 0,
+      #000 var(--lobe-scroll-area-fade-top),
+      #000 calc(100% - var(--lobe-scroll-area-fade-bottom)),
+      transparent 100%
+    );
+    mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    mask-size: 100% 100%;
+    mask-size: 100% 100%;
+
+    /* Scroll-driven animation: use scroll position to drive the mask. */
+    @supports (animation-timeline: scroll()) {
+      /*
+       * Important: drive fade by *distance to edges* (first/last 40px),
+       * so reaching top/bottom doesn't cause a sudden snap.
+       */
+      @keyframes lobe-scroll-area-fade-top-in {
+        from {
+          --lobe-scroll-area-fade-top: 0;
+        }
+
+        to {
+          --lobe-scroll-area-fade-top: var(--lobe-scroll-area-fade-size);
+        }
+      }
+
+      @keyframes lobe-scroll-area-fade-bottom-out {
+        from {
+          --lobe-scroll-area-fade-bottom: var(--lobe-scroll-area-fade-size);
+        }
+
+        to {
+          --lobe-scroll-area-fade-bottom: 0;
+        }
+      }
+
+      animation-name: lobe-scroll-area-fade-top-in, lobe-scroll-area-fade-bottom-out;
+      animation-duration: 1ms, 1ms;
+      animation-timing-function: linear, linear;
+      animation-fill-mode: both, both;
+      animation-timeline: scroll(self y), scroll(self y);
+
+      animation-range:
+        0 var(--lobe-scroll-area-fade-size),
+        calc(100% - var(--lobe-scroll-area-fade-size)) 100%;
+    }
+  `
+}));
+
+//#endregion
+export { styles };
+//# sourceMappingURL=style.mjs.map

package/es/ScrollArea/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":["cssVar"],"sources":["../../src/ScrollArea/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  content: css`\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n\n    padding-block: 12px;\n    padding-inline: 16px 24px;\n\n    font-size: ${cssVar.fontSizeSM};\n    line-height: 1.375rem;\n    color: ${cssVar.colorText};\n  `,\n\n  corner: css`\n    background: ${cssVar.colorFillSecondary};\n  `,\n\n  root: css`\n    position: relative;\n    box-sizing: border-box;\n    border-radius: ${cssVar.borderRadiusLG};\n    background: ${cssVar.colorBgLayout};\n  `,\n\n  scrollbar: css`\n    pointer-events: none;\n\n    position: relative;\n\n    display: flex;\n    justify-content: center;\n\n    margin: 8px;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    opacity: 0;\n    background: transparent;\n\n    transition: opacity 150ms;\n\n    &::before {\n      content: '';\n      position: absolute;\n    }\n\n    &[data-scrolling] {\n      transition-duration: 0ms;\n    }\n\n    &[data-hovering],\n    &[data-scrolling] {\n      pointer-events: auto;\n      opacity: 1;\n    }\n\n    &[data-orientation='vertical'] {\n      width: 4px;\n\n      &::before {\n        inset-inline-start: 50%;\n        transform: translateX(-50%);\n        width: 20px;\n        height: 100%;\n      }\n    }\n\n    &[data-orientation='horizontal'] {\n      height: 4px;\n\n      &::before {\n        inset-block-end: -8px;\n        inset-inline: 0;\n        width: 100%;\n        height: 20px;\n      }\n    }\n  `,\n\n  thumb: css`\n    width: 100%;\n    border-radius: inherit;\n    background: ${cssVar.colorTextQuaternary};\n  `,\n\n  viewport: css`\n    position: relative;\n\n    height: 100%;\n    border-radius: ${cssVar.borderRadius};\n\n    background: ${cssVar.colorBgLayout};\n    outline: none;\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimary};\n      outline-offset: 2px;\n    }\n  `,\n\n  viewportFade: css`\n    --scroll-area-overflow-y-start: inherit;\n    --scroll-area-overflow-y-end: inherit;\n    --lobe-scroll-area-fade-size: 40px;\n    --lobe-scroll-area-fade-top: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-y-start, 0px)\n    );\n    --lobe-scroll-area-fade-bottom: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-y-end, 0px)\n    );\n\n    /* Fade the CONTENT via mask, so it works on background images too. */\n    mask-image: linear-gradient(\n      to bottom,\n      transparent 0,\n      #000 var(--lobe-scroll-area-fade-top),\n      #000 calc(100% - var(--lobe-scroll-area-fade-bottom)),\n      transparent 100%\n    );\n    mask-image: linear-gradient(\n      to bottom,\n      transparent 0,\n      #000 var(--lobe-scroll-area-fade-top),\n      #000 calc(100% - var(--lobe-scroll-area-fade-bottom)),\n      transparent 100%\n    );\n    mask-repeat: no-repeat;\n    mask-repeat: no-repeat;\n    mask-size: 100% 100%;\n    mask-size: 100% 100%;\n\n    /* Scroll-driven animation: use scroll position to drive the mask. */\n    @supports (animation-timeline: scroll()) {\n      /*\n       * Important: drive fade by *distance to edges* (first/last 40px),\n       * so reaching top/bottom doesn't cause a sudden snap.\n       */\n      @keyframes lobe-scroll-area-fade-top-in {\n        from {\n          --lobe-scroll-area-fade-top: 0;\n        }\n\n        to {\n          --lobe-scroll-area-fade-top: var(--lobe-scroll-area-fade-size);\n        }\n      }\n\n      @keyframes lobe-scroll-area-fade-bottom-out {\n        from {\n          --lobe-scroll-area-fade-bottom: var(--lobe-scroll-area-fade-size);\n        }\n\n        to {\n          --lobe-scroll-area-fade-bottom: 0;\n        }\n      }\n\n      animation-name: lobe-scroll-area-fade-top-in, lobe-scroll-area-fade-bottom-out;\n      animation-duration: 1ms, 1ms;\n      animation-timing-function: linear, linear;\n      animation-fill-mode: both, both;\n      animation-timeline: scroll(self y), scroll(self y);\n\n      animation-range:\n        0 var(--lobe-scroll-area-fade-size),\n        calc(100% - var(--lobe-scroll-area-fade-size)) 100%;\n    }\n  `,\n}));\n"],"mappings":";;;AAEA,MAAa,SAAS,oBAAoB,EAAE,YAAK,wBAAc;CAC7D,SAAS,KAAG;;;;;;;;iBAQGA,SAAO,WAAW;;aAEtBA,SAAO,UAAU;;CAG5B,QAAQ,KAAG;kBACKA,SAAO,mBAAmB;;CAG1C,MAAM,KAAG;;;qBAGUA,SAAO,eAAe;kBACzBA,SAAO,cAAc;;CAGrC,WAAW,KAAG;;;;;;;;;qBASKA,SAAO,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CzC,OAAO,KAAG;;;kBAGMA,SAAO,oBAAoB;;CAG3C,UAAU,KAAG;;;;qBAIMA,SAAO,aAAa;;kBAEvBA,SAAO,cAAc;;;;2BAIZA,SAAO,aAAa;;;;CAK7C,cAAc,KAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsElB,EAAE"}

package/es/ScrollArea/type.d.mts

@@ -0,0 +1,17 @@
+import { ScrollAreaContentProps, ScrollAreaCornerProps, ScrollAreaRootProps, ScrollAreaScrollbarProps, ScrollAreaThumbProps, ScrollAreaViewportProps } from "./atoms.mjs";
+import { ReactNode } from "react";
+
+//#region src/ScrollArea/type.d.ts
+interface ScrollAreaProps extends Omit<ScrollAreaRootProps, 'children'> {
+  children?: ReactNode;
+  contentProps?: Omit<ScrollAreaContentProps, 'children'>;
+  corner?: boolean;
+  cornerProps?: ScrollAreaCornerProps;
+  scrollFade?: boolean;
+  scrollbarProps?: Omit<ScrollAreaScrollbarProps, 'children'>;
+  thumbProps?: ScrollAreaThumbProps;
+  viewportProps?: Omit<ScrollAreaViewportProps, 'children' | 'scrollFade'>;
+}
+//#endregion
+export { ScrollAreaProps };
+//# sourceMappingURL=type.d.mts.map