@lobehub/ui 4.33.0 → 4.33.2

package/es/LobeSelect/atoms.d.mts

@@ -1,16 +1,16 @@
 import { LobeSelectSize, LobeSelectVariant } from "./type.mjs";
 import { LOBE_SELECT_CONTAINER_ATTR } from "./constants.mjs";
-import * as react15 from "react";
+import * as react82 from "react";
 import { ComponentProps, ComponentPropsWithRef } from "react";
-import * as react_jsx_runtime8 from "react/jsx-runtime";
+import * as react_jsx_runtime21 from "react/jsx-runtime";
 import * as _base_ui_react_select0 from "@base-ui/react/select";
 import { Select } from "@base-ui/react/select";
 import * as node_modules__base_ui_react_esm_separator_Separator0 from "node_modules/@base-ui/react/esm/separator/Separator";
 
 //#region src/LobeSelect/atoms.d.ts
 declare const LobeSelectRoot: typeof Select.Root;
-declare const LobeSelectBackdrop: react15.ForwardRefExoticComponent<_base_ui_react_select0.SelectBackdropProps & react15.RefAttributes<HTMLDivElement>>;
-declare const LobeSelectSeparator: react15.ForwardRefExoticComponent<node_modules__base_ui_react_esm_separator_Separator0.SeparatorProps & react15.RefAttributes<HTMLDivElement>>;
+declare const LobeSelectBackdrop: react82.ForwardRefExoticComponent<_base_ui_react_select0.SelectBackdropProps & react82.RefAttributes<HTMLDivElement>>;
+declare const LobeSelectSeparator: react82.ForwardRefExoticComponent<node_modules__base_ui_react_esm_separator_Separator0.SeparatorProps & react82.RefAttributes<HTMLDivElement>>;
 type LobeSelectTriggerProps = Omit<ComponentPropsWithRef<typeof Select.Trigger>, 'children' | 'render'> & {
   children: ComponentProps<typeof Select.Trigger>['children'];
   shadow?: boolean;
@@ -27,7 +27,7 @@ declare const LobeSelectTrigger: {
     variant,
     ref: refProp,
     ...rest
-  }: LobeSelectTriggerProps): react_jsx_runtime8.JSX.Element;
+  }: LobeSelectTriggerProps): react_jsx_runtime21.JSX.Element;
   displayName: string;
 };
 type LobeSelectIconProps = ComponentProps<typeof Select.Icon>;
@@ -35,7 +35,7 @@ declare const LobeSelectIcon: {
   ({
     className,
     ...rest
-  }: LobeSelectIconProps): react_jsx_runtime8.JSX.Element;
+  }: LobeSelectIconProps): react_jsx_runtime21.JSX.Element;
   displayName: string;
 };
 type LobeSelectValueProps = ComponentProps<typeof Select.Value>;
@@ -43,7 +43,7 @@ declare const LobeSelectValue: {
   ({
     className,
     ...rest
-  }: LobeSelectValueProps): react_jsx_runtime8.JSX.Element;
+  }: LobeSelectValueProps): react_jsx_runtime21.JSX.Element;
   displayName: string;
 };
 type LobeSelectPortalProps = ComponentProps<typeof Select.Portal> & {
@@ -56,7 +56,7 @@ declare const LobeSelectPortal: {
   ({
     container,
     ...rest
-  }: LobeSelectPortalProps): react_jsx_runtime8.JSX.Element;
+  }: LobeSelectPortalProps): react_jsx_runtime21.JSX.Element;
   displayName: string;
 };
 type LobeSelectPositionerProps = ComponentProps<typeof Select.Positioner>;
@@ -68,7 +68,7 @@ declare const LobeSelectPositioner: {
     side,
     sideOffset,
     ...rest
-  }: LobeSelectPositionerProps): react_jsx_runtime8.JSX.Element;
+  }: LobeSelectPositionerProps): react_jsx_runtime21.JSX.Element;
   displayName: string;
 };
 type LobeSelectPopupProps = ComponentProps<typeof Select.Popup>;
@@ -76,7 +76,7 @@ declare const LobeSelectPopup: {
   ({
     className,
     ...rest
-  }: LobeSelectPopupProps): react_jsx_runtime8.JSX.Element;
+  }: LobeSelectPopupProps): react_jsx_runtime21.JSX.Element;
   displayName: string;
 };
 type LobeSelectListProps = ComponentProps<typeof Select.List>;
@@ -84,7 +84,7 @@ declare const LobeSelectList: {
   ({
     className,
     ...rest
-  }: LobeSelectListProps): react_jsx_runtime8.JSX.Element;
+  }: LobeSelectListProps): react_jsx_runtime21.JSX.Element;
   displayName: string;
 };
 type LobeSelectItemProps = ComponentProps<typeof Select.Item>;
@@ -92,7 +92,7 @@ declare const LobeSelectItem: {
   ({
     className,
     ...rest
-  }: LobeSelectItemProps): react_jsx_runtime8.JSX.Element;
+  }: LobeSelectItemProps): react_jsx_runtime21.JSX.Element;
   displayName: string;
 };
 type LobeSelectItemTextProps = ComponentProps<typeof Select.ItemText>;
@@ -100,7 +100,7 @@ declare const LobeSelectItemText: {
   ({
     className,
     ...rest
-  }: LobeSelectItemTextProps): react_jsx_runtime8.JSX.Element;
+  }: LobeSelectItemTextProps): react_jsx_runtime21.JSX.Element;
   displayName: string;
 };
 type LobeSelectItemIndicatorProps = ComponentProps<typeof Select.ItemIndicator>;
@@ -108,7 +108,7 @@ declare const LobeSelectItemIndicator: {
   ({
     className,
     ...rest
-  }: LobeSelectItemIndicatorProps): react_jsx_runtime8.JSX.Element;
+  }: LobeSelectItemIndicatorProps): react_jsx_runtime21.JSX.Element;
   displayName: string;
 };
 type LobeSelectGroupProps = ComponentProps<typeof Select.Group>;
@@ -116,7 +116,7 @@ declare const LobeSelectGroup: {
   ({
     className,
     ...rest
-  }: LobeSelectGroupProps): react_jsx_runtime8.JSX.Element;
+  }: LobeSelectGroupProps): react_jsx_runtime21.JSX.Element;
   displayName: string;
 };
 type LobeSelectGroupLabelProps = ComponentProps<typeof Select.GroupLabel>;
@@ -124,7 +124,7 @@ declare const LobeSelectGroupLabel: {
   ({
     className,
     ...rest
-  }: LobeSelectGroupLabelProps): react_jsx_runtime8.JSX.Element;
+  }: LobeSelectGroupLabelProps): react_jsx_runtime21.JSX.Element;
   displayName: string;
 };
 type LobeSelectScrollUpArrowProps = ComponentProps<typeof Select.ScrollUpArrow>;
@@ -132,7 +132,7 @@ declare const LobeSelectScrollUpArrow: {
   ({
     className,
     ...rest
-  }: LobeSelectScrollUpArrowProps): react_jsx_runtime8.JSX.Element;
+  }: LobeSelectScrollUpArrowProps): react_jsx_runtime21.JSX.Element;
   displayName: string;
 };
 type LobeSelectScrollDownArrowProps = ComponentProps<typeof Select.ScrollDownArrow>;
@@ -140,7 +140,7 @@ declare const LobeSelectScrollDownArrow: {
   ({
     className,
     ...rest
-  }: LobeSelectScrollDownArrowProps): react_jsx_runtime8.JSX.Element;
+  }: LobeSelectScrollDownArrowProps): react_jsx_runtime21.JSX.Element;
   displayName: string;
 };
 type LobeSelectArrowProps = ComponentProps<typeof Select.Arrow>;
@@ -148,7 +148,7 @@ declare const LobeSelectArrow: {
   ({
     className,
     ...rest
-  }: LobeSelectArrowProps): react_jsx_runtime8.JSX.Element;
+  }: LobeSelectArrowProps): react_jsx_runtime21.JSX.Element;
   displayName: string;
 };
 //#endregion

package/es/LobeSwitch/LobeSwitch.d.mts

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

package/es/LobeSwitch/atoms.d.mts

@@ -1,6 +1,6 @@
 import { LobeSwitchChangeEventHandler, LobeSwitchContextType, LobeSwitchIconProps, LobeSwitchRootProps, LobeSwitchThumbProps } from "./type.mjs";
 import { styles } from "./style.mjs";
-import * as react_jsx_runtime5 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/LobeSwitch/atoms.d.ts
 declare const useLobeSwitchContext: () => LobeSwitchContextType;
@@ -24,7 +24,7 @@ declare const LobeSwitchRoot: {
     id,
     name,
     ...rest
-  }: LobeSwitchRootInternalProps): react_jsx_runtime5.JSX.Element;
+  }: LobeSwitchRootInternalProps): react_jsx_runtime0.JSX.Element;
   displayName: string;
 };
 declare const LobeSwitchThumb: {
@@ -35,7 +35,7 @@ declare const LobeSwitchThumb: {
     transition,
     children,
     ...rest
-  }: LobeSwitchThumbProps): react_jsx_runtime5.JSX.Element;
+  }: LobeSwitchThumbProps): react_jsx_runtime0.JSX.Element;
   displayName: string;
 };
 declare const LobeSwitchIcon: {
@@ -48,7 +48,7 @@ declare const LobeSwitchIcon: {
   }: LobeSwitchIconProps & {
     children?: React.ReactNode;
     size?: "default" | "small";
-  }): react_jsx_runtime5.JSX.Element;
+  }): react_jsx_runtime0.JSX.Element;
   displayName: string;
 };
 //#endregion

package/es/LobeSwitch/atoms.mjs

@@ -5,7 +5,7 @@ import { rootVariants, styles, thumbVariants } from "./style.mjs";
 import { createContext, useContext, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { cx } from "antd-style";
-import useControlledState from "use-merge-value";
+import useMergeState from "use-merge-value";
 import { Switch } from "@base-ui/react/switch";
 
 //#region src/LobeSwitch/atoms.tsx
@@ -19,7 +19,7 @@ const LobeSwitchRoot = ({ checked, className, defaultChecked, onCheckedChange, o
 	const Motion = useMotionComponent();
 	const [isPressed, setIsPressed] = useState(false);
 	const lastEventRef = useRef(null);
-	const [isChecked, setIsChecked] = useControlledState(defaultChecked ?? false, {
+	const [isChecked, setIsChecked] = useMergeState(defaultChecked ?? false, {
 		defaultValue: defaultChecked,
 		onChange: (value) => {
 			if (lastEventRef.current) onCheckedChange?.(value, lastEventRef.current);

package/es/LobeSwitch/atoms.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"atoms.mjs","names":[],"sources":["../../src/LobeSwitch/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Switch } from '@base-ui/react/switch';\nimport { cx } from 'antd-style';\nimport type { KeyboardEvent, MouseEvent } from 'react';\nimport { createContext, useContext, useMemo, useRef, useState } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { useMotionComponent } from '@/MotionProvider';\n\nimport { rootVariants, styles, thumbVariants } from './style';\nimport type {\n  LobeSwitchChangeEventHandler,\n  LobeSwitchContextType,\n  LobeSwitchIconPosition,\n  LobeSwitchIconProps,\n  LobeSwitchRootProps,\n  LobeSwitchThumbProps,\n} from './type';\n\nconst LobeSwitchContext = createContext<LobeSwitchContextType | null>(null);\n\nexport const useLobeSwitchContext = () => {\n  const context = useContext(LobeSwitchContext);\n  if (!context) {\n    throw new Error('useLobeSwitchContext must be used within a LobeSwitchRoot');\n  }\n  return context;\n};\n\ntype LobeSwitchRootInternalProps = Omit<LobeSwitchRootProps, 'onCheckedChange' | 'onClick'> & {\n  onCheckedChange?: LobeSwitchChangeEventHandler;\n  onClick?: LobeSwitchChangeEventHandler;\n};\n\nexport const LobeSwitchRoot = ({\n  checked,\n  className,\n  defaultChecked,\n  onCheckedChange,\n  onClick,\n  size = 'default',\n  children,\n  disabled,\n  readOnly,\n  required,\n  inputRef,\n  id,\n  name,\n  ...rest\n}: LobeSwitchRootInternalProps) => {\n  const Motion = useMotionComponent();\n  const [isPressed, setIsPressed] = useState(false);\n  const lastEventRef = useRef<MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>>(\n    null,\n  );\n\n  const [isChecked, setIsChecked] = useControlledState(defaultChecked ?? false, {\n    defaultValue: defaultChecked,\n    onChange: (value: boolean) => {\n      if (lastEventRef.current) {\n        onCheckedChange?.(value, lastEventRef.current);\n      }\n    },\n    value: checked,\n  });\n\n  const baseClassName = rootVariants({ size });\n\n  const contextValue = useMemo(\n    () => ({\n      isChecked: Boolean(isChecked),\n      isPressed,\n      setIsChecked: (value: boolean) => setIsChecked(value),\n      setIsPressed,\n    }),\n    [isChecked, isPressed, setIsChecked],\n  );\n\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    lastEventRef.current = event;\n    onClick?.(!isChecked, event);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      lastEventRef.current = event;\n    }\n    (rest as any).onKeyDown?.(event);\n  };\n\n  return (\n    <LobeSwitchContext.Provider value={contextValue}>\n      <Switch.Root\n        checked={isChecked}\n        defaultChecked={defaultChecked}\n        disabled={disabled}\n        id={id}\n        inputRef={inputRef}\n        name={name}\n        onCheckedChange={setIsChecked}\n        readOnly={readOnly}\n        render={\n          <Motion.button\n            {...rest}\n            className={cx(baseClassName, className)}\n            initial={false}\n            onClick={handleClick}\n            onKeyDown={handleKeyDown}\n            onTap={() => setIsPressed(false)}\n            onTapCancel={() => setIsPressed(false)}\n            onTapStart={() => setIsPressed(true)}\n            whileTap=\"tap\"\n          />\n        }\n        required={required}\n      >\n        {children}\n      </Switch.Root>\n    </LobeSwitchContext.Provider>\n  );\n};\n\nLobeSwitchRoot.displayName = 'LobeSwitchRoot';\n\nexport const LobeSwitchThumb = ({\n  className,\n  pressedAnimation,\n  size = 'default',\n  transition = { damping: 25, stiffness: 300, type: 'spring' },\n  children,\n  ...rest\n}: LobeSwitchThumbProps) => {\n  const Motion = useMotionComponent();\n  const { isPressed } = useLobeSwitchContext();\n  const baseClassName = thumbVariants({ size });\n\n  const defaultPressedAnimation = {\n    width: size === 'small' ? 16 : 22,\n  };\n\n  return (\n    <Switch.Thumb\n      render={\n        <Motion.span\n          animate={isPressed ? pressedAnimation || defaultPressedAnimation : undefined}\n          className={cx(baseClassName, className)}\n          layout\n          transition={transition}\n          {...rest}\n        >\n          {children}\n        </Motion.span>\n      }\n    />\n  );\n};\n\nLobeSwitchThumb.displayName = 'LobeSwitchThumb';\n\nconst getIconPositionClass = (position: LobeSwitchIconPosition, size: 'default' | 'small') => {\n  if (position === 'thumb') return styles.iconThumb;\n  if (position === 'left') return size === 'small' ? styles.iconLeftSmall : styles.iconLeft;\n  return size === 'small' ? styles.iconRightSmall : styles.iconRight;\n};\n\nexport const LobeSwitchIcon = ({\n  children,\n  className,\n  position,\n  transition = { bounce: 0, type: 'spring' },\n  ...rest\n}: LobeSwitchIconProps & { children?: React.ReactNode; size?: 'default' | 'small' }) => {\n  const Motion = useMotionComponent();\n  const { isChecked } = useLobeSwitchContext();\n  const size = (rest as any).size || 'default';\n\n  const isAnimated = useMemo(() => {\n    if (position === 'right') return !isChecked;\n    if (position === 'left') return isChecked;\n    if (position === 'thumb') return true;\n    return false;\n  }, [position, isChecked]);\n\n  const positionClass = getIconPositionClass(position, size);\n\n  return (\n    <Motion.span\n      animate={isAnimated ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0 }}\n      className={cx(styles.icon, positionClass, className)}\n      transition={transition}\n      {...rest}\n    >\n      {children}\n    </Motion.span>\n  );\n};\n\nLobeSwitchIcon.displayName = 'LobeSwitchIcon';\n\nexport { styles as lobeSwitchStyles } from './style';\n"],"mappings":"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"}
+{"version":3,"file":"atoms.mjs","names":["useControlledState"],"sources":["../../src/LobeSwitch/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Switch } from '@base-ui/react/switch';\nimport { cx } from 'antd-style';\nimport type { KeyboardEvent, MouseEvent } from 'react';\nimport { createContext, useContext, useMemo, useRef, useState } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { useMotionComponent } from '@/MotionProvider';\n\nimport { rootVariants, styles, thumbVariants } from './style';\nimport type {\n  LobeSwitchChangeEventHandler,\n  LobeSwitchContextType,\n  LobeSwitchIconPosition,\n  LobeSwitchIconProps,\n  LobeSwitchRootProps,\n  LobeSwitchThumbProps,\n} from './type';\n\nconst LobeSwitchContext = createContext<LobeSwitchContextType | null>(null);\n\nexport const useLobeSwitchContext = () => {\n  const context = useContext(LobeSwitchContext);\n  if (!context) {\n    throw new Error('useLobeSwitchContext must be used within a LobeSwitchRoot');\n  }\n  return context;\n};\n\ntype LobeSwitchRootInternalProps = Omit<LobeSwitchRootProps, 'onCheckedChange' | 'onClick'> & {\n  onCheckedChange?: LobeSwitchChangeEventHandler;\n  onClick?: LobeSwitchChangeEventHandler;\n};\n\nexport const LobeSwitchRoot = ({\n  checked,\n  className,\n  defaultChecked,\n  onCheckedChange,\n  onClick,\n  size = 'default',\n  children,\n  disabled,\n  readOnly,\n  required,\n  inputRef,\n  id,\n  name,\n  ...rest\n}: LobeSwitchRootInternalProps) => {\n  const Motion = useMotionComponent();\n  const [isPressed, setIsPressed] = useState(false);\n  const lastEventRef = useRef<MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>>(\n    null,\n  );\n\n  const [isChecked, setIsChecked] = useControlledState(defaultChecked ?? false, {\n    defaultValue: defaultChecked,\n    onChange: (value: boolean) => {\n      if (lastEventRef.current) {\n        onCheckedChange?.(value, lastEventRef.current);\n      }\n    },\n    value: checked,\n  });\n\n  const baseClassName = rootVariants({ size });\n\n  const contextValue = useMemo(\n    () => ({\n      isChecked: Boolean(isChecked),\n      isPressed,\n      setIsChecked: (value: boolean) => setIsChecked(value),\n      setIsPressed,\n    }),\n    [isChecked, isPressed, setIsChecked],\n  );\n\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    lastEventRef.current = event;\n    onClick?.(!isChecked, event);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      lastEventRef.current = event;\n    }\n    (rest as any).onKeyDown?.(event);\n  };\n\n  return (\n    <LobeSwitchContext.Provider value={contextValue}>\n      <Switch.Root\n        checked={isChecked}\n        defaultChecked={defaultChecked}\n        disabled={disabled}\n        id={id}\n        inputRef={inputRef}\n        name={name}\n        onCheckedChange={setIsChecked}\n        readOnly={readOnly}\n        render={\n          <Motion.button\n            {...rest}\n            className={cx(baseClassName, className)}\n            initial={false}\n            onClick={handleClick}\n            onKeyDown={handleKeyDown}\n            onTap={() => setIsPressed(false)}\n            onTapCancel={() => setIsPressed(false)}\n            onTapStart={() => setIsPressed(true)}\n            whileTap=\"tap\"\n          />\n        }\n        required={required}\n      >\n        {children}\n      </Switch.Root>\n    </LobeSwitchContext.Provider>\n  );\n};\n\nLobeSwitchRoot.displayName = 'LobeSwitchRoot';\n\nexport const LobeSwitchThumb = ({\n  className,\n  pressedAnimation,\n  size = 'default',\n  transition = { damping: 25, stiffness: 300, type: 'spring' },\n  children,\n  ...rest\n}: LobeSwitchThumbProps) => {\n  const Motion = useMotionComponent();\n  const { isPressed } = useLobeSwitchContext();\n  const baseClassName = thumbVariants({ size });\n\n  const defaultPressedAnimation = {\n    width: size === 'small' ? 16 : 22,\n  };\n\n  return (\n    <Switch.Thumb\n      render={\n        <Motion.span\n          animate={isPressed ? pressedAnimation || defaultPressedAnimation : undefined}\n          className={cx(baseClassName, className)}\n          layout\n          transition={transition}\n          {...rest}\n        >\n          {children}\n        </Motion.span>\n      }\n    />\n  );\n};\n\nLobeSwitchThumb.displayName = 'LobeSwitchThumb';\n\nconst getIconPositionClass = (position: LobeSwitchIconPosition, size: 'default' | 'small') => {\n  if (position === 'thumb') return styles.iconThumb;\n  if (position === 'left') return size === 'small' ? styles.iconLeftSmall : styles.iconLeft;\n  return size === 'small' ? styles.iconRightSmall : styles.iconRight;\n};\n\nexport const LobeSwitchIcon = ({\n  children,\n  className,\n  position,\n  transition = { bounce: 0, type: 'spring' },\n  ...rest\n}: LobeSwitchIconProps & { children?: React.ReactNode; size?: 'default' | 'small' }) => {\n  const Motion = useMotionComponent();\n  const { isChecked } = useLobeSwitchContext();\n  const size = (rest as any).size || 'default';\n\n  const isAnimated = useMemo(() => {\n    if (position === 'right') return !isChecked;\n    if (position === 'left') return isChecked;\n    if (position === 'thumb') return true;\n    return false;\n  }, [position, isChecked]);\n\n  const positionClass = getIconPositionClass(position, size);\n\n  return (\n    <Motion.span\n      animate={isAnimated ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0 }}\n      className={cx(styles.icon, positionClass, className)}\n      transition={transition}\n      {...rest}\n    >\n      {children}\n    </Motion.span>\n  );\n};\n\nLobeSwitchIcon.displayName = 'LobeSwitchIcon';\n\nexport { styles as lobeSwitchStyles } from './style';\n"],"mappings":"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"}

package/es/Markdown/Markdown.d.mts

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

package/es/Markdown/Typography.d.mts

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

package/es/Markdown/components/SearchResultCards/index.d.mts

@@ -1,6 +1,6 @@
 import { FlexboxProps } from "../../../Flex/type.mjs";
 import "../../../Flex/index.mjs";
-import * as react85 from "react";
+import * as react79 from "react";
 import { Ref } from "react";
 
 //#region src/Markdown/components/SearchResultCards/index.d.ts
@@ -14,7 +14,7 @@ interface SearchResultCardsProps extends FlexboxProps {
   dataSource: string[] | SearchResultItem[];
   ref?: Ref<HTMLDivElement>;
 }
-declare const SearchResultCards: react85.NamedExoticComponent<SearchResultCardsProps>;
+declare const SearchResultCards: react79.NamedExoticComponent<SearchResultCardsProps>;
 //#endregion
 export { SearchResultCards, SearchResultCardsProps };
 //# sourceMappingURL=index.d.mts.map

package/es/MaskShadow/MaskShadow.d.mts

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

package/es/Menu/Menu.d.mts

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

package/es/Mermaid/Mermaid.d.mts

@@ -1,8 +1,8 @@
 import { MermaidProps } from "./type.mjs";
-import * as react1 from "react";
+import * as react22 from "react";
 
 //#region src/Mermaid/Mermaid.d.ts
-declare const Mermaid: react1.NamedExoticComponent<MermaidProps>;
+declare const Mermaid: react22.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 react0 from "react";
+import * as react23 from "react";
 
 //#region src/Mermaid/SyntaxMermaid/index.d.ts
-declare const SyntaxMermaid: react0.NamedExoticComponent<SyntaxMermaidProps>;
+declare const SyntaxMermaid: react23.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 react65 from "react";
+import * as react20 from "react";
 
 //#region src/Modal/Modal.d.ts
-declare const Modal: react65.NamedExoticComponent<ModalProps>;
+declare const Modal: react20.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 react66 from "react";
+import * as react18 from "react";
 import { ReactNode } from "react";
 
 //#region src/Modal/ModalProvider.d.ts
-declare const ModalProvider: react66.NamedExoticComponent<{
+declare const ModalProvider: react18.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_runtime30 from "react/jsx-runtime";
+import * as react_jsx_runtime9 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_runtime30.JSX.Element | null;
+}: ModalHostProps) => react_jsx_runtime9.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 react86 from "react";
+import * as react80 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: react86.NamedExoticComponent<{
+declare const MotionProvider: react80.NamedExoticComponent<{
   children: ReactNode;
   motion: MotionComponentType;
 }>;

package/es/Popover/ArrowIcon.d.mts

@@ -1,7 +1,7 @@
-import * as react_jsx_runtime29 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 
 //#region src/Popover/ArrowIcon.d.ts
-declare const PopoverArrowIcon: react_jsx_runtime29.JSX.Element;
+declare const PopoverArrowIcon: react_jsx_runtime2.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 react63 from "react";
+import * as react14 from "react";
 import { ComponentProps, ComponentPropsWithRef } from "react";
-import * as react_jsx_runtime23 from "react/jsx-runtime";
+import * as react_jsx_runtime3 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: react63.ForwardRefExoticComponent<_base_ui_react_popover0.PopoverBackdropProps & react63.RefAttributes<HTMLDivElement>>;
+declare const PopoverBackdrop: react14.ForwardRefExoticComponent<_base_ui_react_popover0.PopoverBackdropProps & react14.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_runtime23.JSX.Element;
+  }: PopoverTriggerElementProps): react_jsx_runtime3.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_runtime23.JSX.Element | null;
+  }: PopoverPortalAtomProps): react_jsx_runtime3.JSX.Element | null;
   displayName: string;
 };
 type PopoverPositionerAtomProps = ComponentProps<typeof Popover.Positioner> & {
@@ -54,7 +54,7 @@ declare const PopoverPositioner: {
     side,
     sideOffset,
     ...rest
-  }: PopoverPositionerAtomProps): react_jsx_runtime23.JSX.Element;
+  }: PopoverPositionerAtomProps): react_jsx_runtime3.JSX.Element;
   displayName: string;
 };
 type PopoverPopupAtomProps = ComponentProps<typeof Popover.Popup>;
@@ -62,7 +62,7 @@ declare const PopoverPopup: {
   ({
     className,
     ...rest
-  }: PopoverPopupAtomProps): react_jsx_runtime23.JSX.Element;
+  }: PopoverPopupAtomProps): react_jsx_runtime3.JSX.Element;
   displayName: string;
 };
 type PopoverArrowAtomProps = ComponentProps<typeof Popover.Arrow>;
@@ -71,7 +71,7 @@ declare const PopoverArrow: {
     className,
     children,
     ...rest
-  }: PopoverArrowAtomProps): react_jsx_runtime23.JSX.Element;
+  }: PopoverArrowAtomProps): react_jsx_runtime3.JSX.Element;
   displayName: string;
 };
 type PopoverViewportAtomProps = ComponentProps<typeof Popover.Viewport>;
@@ -79,7 +79,7 @@ declare const PopoverViewport: {
   ({
     className,
     ...rest
-  }: PopoverViewportAtomProps): react_jsx_runtime23.JSX.Element;
+  }: PopoverViewportAtomProps): react_jsx_runtime3.JSX.Element;
   displayName: string;
 };
 //#endregion

package/es/Popover/context.d.mts

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

package/es/ScrollArea/ScrollArea.mjs

@@ -24,9 +24,7 @@ const ScrollArea = ({ children, contentProps, corner = false, cornerProps, scrol
 		]
 	});
 };
-ScrollArea.displayName = "ScrollArea";
-var ScrollArea_default = ScrollArea;
 
 //#endregion
-export { ScrollArea_default as default };
+export { ScrollArea };
 //# sourceMappingURL=ScrollArea.mjs.map

package/es/ScrollArea/ScrollArea.mjs.map

@@ -1 +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"}
+{"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\nexport const 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"],"mappings":";;;;;;AAcA,MAAaA,cAAmC,EAC9C,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"}

package/es/ScrollArea/atoms.d.mts

@@ -1,5 +1,5 @@
 import React from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime36 from "react/jsx-runtime";
 import { ScrollArea } from "@base-ui/react/scroll-area";
 
 //#region src/ScrollArea/atoms.d.ts
@@ -19,7 +19,7 @@ declare const ScrollAreaRoot: {
   ({
     className,
     ...rest
-  }: ScrollAreaRootProps): react_jsx_runtime0.JSX.Element;
+  }: ScrollAreaRootProps): react_jsx_runtime36.JSX.Element;
   displayName: string;
 };
 declare const ScrollAreaViewport: {
@@ -27,35 +27,35 @@ declare const ScrollAreaViewport: {
     className,
     scrollFade,
     ...rest
-  }: ScrollAreaViewportProps): react_jsx_runtime0.JSX.Element;
+  }: ScrollAreaViewportProps): react_jsx_runtime36.JSX.Element;
   displayName: string;
 };
 declare const ScrollAreaContent: {
   ({
     className,
     ...rest
-  }: ScrollAreaContentProps): react_jsx_runtime0.JSX.Element;
+  }: ScrollAreaContentProps): react_jsx_runtime36.JSX.Element;
   displayName: string;
 };
 declare const ScrollAreaScrollbar: {
   ({
     className,
     ...rest
-  }: ScrollAreaScrollbarProps): react_jsx_runtime0.JSX.Element;
+  }: ScrollAreaScrollbarProps): react_jsx_runtime36.JSX.Element;
   displayName: string;
 };
 declare const ScrollAreaThumb: {
   ({
     className,
     ...rest
-  }: ScrollAreaThumbProps): react_jsx_runtime0.JSX.Element;
+  }: ScrollAreaThumbProps): react_jsx_runtime36.JSX.Element;
   displayName: string;
 };
 declare const ScrollAreaCorner: {
   ({
     className,
     ...rest
-  }: ScrollAreaCornerProps): react_jsx_runtime0.JSX.Element;
+  }: ScrollAreaCornerProps): react_jsx_runtime36.JSX.Element;
   displayName: string;
 };
 //#endregion

package/es/ScrollArea/index.d.mts

@@ -1,4 +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 };
+export { ScrollArea, ScrollAreaContent, type ScrollAreaContentProps, ScrollAreaCorner, type ScrollAreaCornerProps, type ScrollAreaProps, ScrollAreaRoot, type ScrollAreaRootProps, ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb, type ScrollAreaThumbProps, ScrollAreaViewport, type ScrollAreaViewportProps };

package/es/ScrollArea/index.mjs

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

package/es/ScrollArea/style.mjs

@@ -7,9 +7,6 @@ const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => ({
     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};
@@ -83,11 +80,7 @@ const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => ({
   `,
 	viewport: css$1`
     position: relative;
-
     height: 100%;
-    border-radius: ${cssVar$1.borderRadius};
-
-    background: ${cssVar$1.colorBgLayout};
     outline: none;
 
     &:focus-visible {
@@ -116,17 +109,8 @@ const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => ({
       #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()) {