@seed-design/react 1.2.8 → 1.2.10

package/lib/components/RadioGroupField/RadioGroupField.namespace.cjs

@@ -1,16 +1,20 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const RadioGroupField = require('./RadioGroupField.cjs');
-
-
-
-exports.Description = RadioGroupField.RadioGroupFieldDescription;
-exports.ErrorMessage = RadioGroupField.RadioGroupFieldErrorMessage;
-exports.Footer = RadioGroupField.RadioGroupFieldFooter;
-exports.Header = RadioGroupField.RadioGroupFieldHeader;
-exports.IndicatorText = RadioGroupField.RadioGroupFieldIndicatorText;
-exports.Label = RadioGroupField.RadioGroupFieldLabel;
-exports.RequiredIndicator = RadioGroupField.RadioGroupFieldRequiredIndicator;
-exports.Root = RadioGroupField.RadioGroupFieldRoot;
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_RadioGroupField = require("./RadioGroupField.cjs");
+//#region src/components/RadioGroupField/RadioGroupField.namespace.ts
+var RadioGroupField_namespace_exports = /* @__PURE__ */ require_runtime.__exportAll({
+	Description: () => require_RadioGroupField.RadioGroupFieldDescription,
+	ErrorMessage: () => require_RadioGroupField.RadioGroupFieldErrorMessage,
+	Footer: () => require_RadioGroupField.RadioGroupFieldFooter,
+	Header: () => require_RadioGroupField.RadioGroupFieldHeader,
+	IndicatorText: () => require_RadioGroupField.RadioGroupFieldIndicatorText,
+	Label: () => require_RadioGroupField.RadioGroupFieldLabel,
+	RequiredIndicator: () => require_RadioGroupField.RadioGroupFieldRequiredIndicator,
+	Root: () => require_RadioGroupField.RadioGroupFieldRoot
+});
+//#endregion
+Object.defineProperty(exports, "RadioGroupField_namespace_exports", {
+	enumerable: true,
+	get: function() {
+		return RadioGroupField_namespace_exports;
+	}
+});

package/lib/components/RadioGroupField/RadioGroupField.namespace.js

@@ -1 +1,15 @@
-export { RadioGroupFieldDescription as Description, RadioGroupFieldErrorMessage as ErrorMessage, RadioGroupFieldFooter as Footer, RadioGroupFieldHeader as Header, RadioGroupFieldIndicatorText as IndicatorText, RadioGroupFieldLabel as Label, RadioGroupFieldRequiredIndicator as RequiredIndicator, RadioGroupFieldRoot as Root } from './RadioGroupField.js';
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { RadioGroupFieldDescription, RadioGroupFieldErrorMessage, RadioGroupFieldFooter, RadioGroupFieldHeader, RadioGroupFieldIndicatorText, RadioGroupFieldLabel, RadioGroupFieldRequiredIndicator, RadioGroupFieldRoot } from "./RadioGroupField.js";
+//#region src/components/RadioGroupField/RadioGroupField.namespace.ts
+var RadioGroupField_namespace_exports = /* @__PURE__ */ __exportAll({
+	Description: () => RadioGroupFieldDescription,
+	ErrorMessage: () => RadioGroupFieldErrorMessage,
+	Footer: () => RadioGroupFieldFooter,
+	Header: () => RadioGroupFieldHeader,
+	IndicatorText: () => RadioGroupFieldIndicatorText,
+	Label: () => RadioGroupFieldLabel,
+	RequiredIndicator: () => RadioGroupFieldRequiredIndicator,
+	Root: () => RadioGroupFieldRoot
+});
+//#endregion
+export { RadioGroupField_namespace_exports };

package/lib/components/RadioGroupField/index.cjs

@@ -1,18 +1,17 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const RadioGroupField = require('./RadioGroupField.cjs');
-const RadioGroupField_namespace = require('./RadioGroupField.namespace.cjs');
-
-
-
-exports.RadioGroupFieldDescription = RadioGroupField.RadioGroupFieldDescription;
-exports.RadioGroupFieldErrorMessage = RadioGroupField.RadioGroupFieldErrorMessage;
-exports.RadioGroupFieldFooter = RadioGroupField.RadioGroupFieldFooter;
-exports.RadioGroupFieldHeader = RadioGroupField.RadioGroupFieldHeader;
-exports.RadioGroupFieldIndicatorText = RadioGroupField.RadioGroupFieldIndicatorText;
-exports.RadioGroupFieldLabel = RadioGroupField.RadioGroupFieldLabel;
-exports.RadioGroupFieldRequiredIndicator = RadioGroupField.RadioGroupFieldRequiredIndicator;
-exports.RadioGroupFieldRoot = RadioGroupField.RadioGroupFieldRoot;
-exports.RadioGroupField = RadioGroupField_namespace;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_RadioGroupField = require("./RadioGroupField.cjs");
+const require_RadioGroupField_namespace = require("./RadioGroupField.namespace.cjs");
+Object.defineProperty(exports, "RadioGroupField", {
+	enumerable: true,
+	get: function() {
+		return require_RadioGroupField_namespace.RadioGroupField_namespace_exports;
+	}
+});
+exports.RadioGroupFieldDescription = require_RadioGroupField.RadioGroupFieldDescription;
+exports.RadioGroupFieldErrorMessage = require_RadioGroupField.RadioGroupFieldErrorMessage;
+exports.RadioGroupFieldFooter = require_RadioGroupField.RadioGroupFieldFooter;
+exports.RadioGroupFieldHeader = require_RadioGroupField.RadioGroupFieldHeader;
+exports.RadioGroupFieldIndicatorText = require_RadioGroupField.RadioGroupFieldIndicatorText;
+exports.RadioGroupFieldLabel = require_RadioGroupField.RadioGroupFieldLabel;
+exports.RadioGroupFieldRequiredIndicator = require_RadioGroupField.RadioGroupFieldRequiredIndicator;
+exports.RadioGroupFieldRoot = require_RadioGroupField.RadioGroupFieldRoot;

package/lib/components/RadioGroupField/index.js

@@ -1,3 +1,3 @@
-export { RadioGroupFieldDescription, RadioGroupFieldErrorMessage, RadioGroupFieldFooter, RadioGroupFieldHeader, RadioGroupFieldIndicatorText, RadioGroupFieldLabel, RadioGroupFieldRequiredIndicator, RadioGroupFieldRoot } from './RadioGroupField.js';
-import * as RadioGroupField_namespace from './RadioGroupField.namespace.js';
-export { RadioGroupField_namespace as RadioGroupField };
+import { RadioGroupFieldDescription, RadioGroupFieldErrorMessage, RadioGroupFieldFooter, RadioGroupFieldHeader, RadioGroupFieldIndicatorText, RadioGroupFieldLabel, RadioGroupFieldRequiredIndicator, RadioGroupFieldRoot } from "./RadioGroupField.js";
+import { RadioGroupField_namespace_exports } from "./RadioGroupField.namespace.js";
+export { RadioGroupField_namespace_exports as RadioGroupField, RadioGroupFieldDescription, RadioGroupFieldErrorMessage, RadioGroupFieldFooter, RadioGroupFieldHeader, RadioGroupFieldIndicatorText, RadioGroupFieldLabel, RadioGroupFieldRequiredIndicator, RadioGroupFieldRoot };

package/lib/components/ReactionButton/ReactionButton.cjs

@@ -1,49 +1,30 @@
-'use client';
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const reactionButton = require('@seed-design/css/recipes/reaction-button');
-const reactToggle = require('@seed-design/react-toggle');
-const clsx = require('clsx');
-const React = require('react');
-const usePendingButton = require('../LoadingIndicator/usePendingButton.cjs');
-
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
-  if (e) {
-    for (const k in e) {
-      if (k !== 'default') {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-
-const ReactionButton = React__namespace.forwardRef(
-  ({ size = "small", loading = false, className, ...otherProps }, ref) => {
-    const recipeClassName = reactionButton.reactionButton({ size });
-    const api = usePendingButton.usePendingButton({ loading, disabled: otherProps.disabled });
-    return /* @__PURE__ */ jsxRuntime.jsx(usePendingButton.PendingButtonProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(
-      reactToggle.Toggle.Root,
-      {
-        ref,
-        className: clsx(recipeClassName, className),
-        ...api.stateProps,
-        ...otherProps
-      }
-    ) });
-  }
-);
+"use client";
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_usePendingButton = require("../LoadingIndicator/usePendingButton.cjs");
+let _seed_design_react_toggle = require("@seed-design/react-toggle");
+let clsx = require("clsx");
+clsx = require_runtime.__toESM(clsx);
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _seed_design_css_recipes_reaction_button = require("@seed-design/css/recipes/reaction-button");
+//#region src/components/ReactionButton/ReactionButton.tsx
+var ReactionButton = react.forwardRef(({ size = "small", loading = false, className, ...otherProps }, ref) => {
+	const recipeClassName = (0, _seed_design_css_recipes_reaction_button.reactionButton)({ size });
+	const api = require_usePendingButton.usePendingButton({
+		loading,
+		disabled: otherProps.disabled
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_usePendingButton.PendingButtonProvider, {
+		value: api,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_seed_design_react_toggle.Toggle.Root, {
+			ref,
+			className: (0, clsx.default)(recipeClassName, className),
+			...api.stateProps,
+			...otherProps
+		})
+	});
+});
 ReactionButton.displayName = "ReactionButton";
-
+//#endregion
 exports.ReactionButton = ReactionButton;

package/lib/components/ReactionButton/ReactionButton.js

@@ -1,26 +1,27 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { reactionButton } from '@seed-design/css/recipes/reaction-button';
-import { Toggle } from '@seed-design/react-toggle';
-import clsx from 'clsx';
-import * as React from 'react';
-import { usePendingButton, PendingButtonProvider } from '../LoadingIndicator/usePendingButton.js';
-
-const ReactionButton = React.forwardRef(
-  ({ size = "small", loading = false, className, ...otherProps }, ref) => {
-    const recipeClassName = reactionButton({ size });
-    const api = usePendingButton({ loading, disabled: otherProps.disabled });
-    return /* @__PURE__ */ jsx(PendingButtonProvider, { value: api, children: /* @__PURE__ */ jsx(
-      Toggle.Root,
-      {
-        ref,
-        className: clsx(recipeClassName, className),
-        ...api.stateProps,
-        ...otherProps
-      }
-    ) });
-  }
-);
+"use client";
+import { PendingButtonProvider, usePendingButton } from "../LoadingIndicator/usePendingButton.js";
+import { Toggle } from "@seed-design/react-toggle";
+import clsx$1 from "clsx";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+import { reactionButton } from "@seed-design/css/recipes/reaction-button";
+//#region src/components/ReactionButton/ReactionButton.tsx
+var ReactionButton = React$1.forwardRef(({ size = "small", loading = false, className, ...otherProps }, ref) => {
+	const recipeClassName = reactionButton({ size });
+	const api = usePendingButton({
+		loading,
+		disabled: otherProps.disabled
+	});
+	return /* @__PURE__ */ jsx(PendingButtonProvider, {
+		value: api,
+		children: /* @__PURE__ */ jsx(Toggle.Root, {
+			ref,
+			className: clsx$1(recipeClassName, className),
+			...api.stateProps,
+			...otherProps
+		})
+	});
+});
 ReactionButton.displayName = "ReactionButton";
-
+//#endregion
 export { ReactionButton };

package/lib/components/ReactionButton/index.cjs

@@ -1,9 +1,3 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const ReactionButton = require('./ReactionButton.cjs');
-
-
-
-exports.ReactionButton = ReactionButton.ReactionButton;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_ReactionButton = require("./ReactionButton.cjs");
+exports.ReactionButton = require_ReactionButton.ReactionButton;

package/lib/components/ReactionButton/index.js

@@ -1 +1,2 @@
-export { ReactionButton } from './ReactionButton.js';
+import { ReactionButton } from "./ReactionButton.js";
+export { ReactionButton };

package/lib/components/ResponsivePair/ResponsivePair.cjs

@@ -1,58 +1,35 @@
-'use client';
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const reactSlot = require('@radix-ui/react-slot');
-const React = require('react');
-const styled = require('../../utils/styled.cjs');
-const Flex = require('../Flex/Flex.cjs');
-
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
-  if (e) {
-    for (const k in e) {
-      if (k !== 'default') {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-
-const ResponsivePair = React__namespace.forwardRef(
-  (props, ref) => {
-    const { wrap = "wrap-reverse", gap, children, ...rest } = props;
-    const childrenArray = React__namespace.Children.toArray(children);
-    const { style } = styled.useStyleProps({
-      minWidth: `calc(${100 / childrenArray.length}% - ${styled.handleDimension(gap)} / ${childrenArray.length})`,
-      flexGrow: 1
-    });
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      Flex.Flex,
-      {
-        ref,
-        display: "flex",
-        flexDirection: "row",
-        alignContent: "stretch",
-        flexWrap: wrap,
-        gap,
-        ...rest,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { style, children: childrenArray[0] }),
-          /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { style, children: childrenArray[1] })
-        ]
-      }
-    );
-  }
-);
-
+"use client";
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_styled = require("../../utils/styled.cjs");
+const require_Flex = require("../Flex/Flex.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _radix_ui_react_slot = require("@radix-ui/react-slot");
+//#region src/components/ResponsivePair/ResponsivePair.tsx
+var ResponsivePair = react.forwardRef((props, ref) => {
+	const { wrap = "wrap-reverse", gap, children, ...rest } = props;
+	const childrenArray = react.Children.toArray(children);
+	const { style } = require_styled.useStyleProps({
+		minWidth: `calc(${100 / childrenArray.length}% - ${require_styled.handleDimension(gap)} / ${childrenArray.length})`,
+		flexGrow: 1
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Flex.Flex, {
+		ref,
+		display: "flex",
+		flexDirection: "row",
+		alignContent: "stretch",
+		flexWrap: wrap,
+		gap,
+		...rest,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_slot.Slot, {
+			style,
+			children: childrenArray[0]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_slot.Slot, {
+			style,
+			children: childrenArray[1]
+		})]
+	});
+});
+//#endregion
 exports.ResponsivePair = ResponsivePair;

package/lib/components/ResponsivePair/ResponsivePair.js

@@ -1,35 +1,33 @@
-'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Slot } from '@radix-ui/react-slot';
-import * as React from 'react';
-import { useStyleProps, handleDimension } from '../../utils/styled.js';
-import { Flex } from '../Flex/Flex.js';
-
-const ResponsivePair = React.forwardRef(
-  (props, ref) => {
-    const { wrap = "wrap-reverse", gap, children, ...rest } = props;
-    const childrenArray = React.Children.toArray(children);
-    const { style } = useStyleProps({
-      minWidth: `calc(${100 / childrenArray.length}% - ${handleDimension(gap)} / ${childrenArray.length})`,
-      flexGrow: 1
-    });
-    return /* @__PURE__ */ jsxs(
-      Flex,
-      {
-        ref,
-        display: "flex",
-        flexDirection: "row",
-        alignContent: "stretch",
-        flexWrap: wrap,
-        gap,
-        ...rest,
-        children: [
-          /* @__PURE__ */ jsx(Slot, { style, children: childrenArray[0] }),
-          /* @__PURE__ */ jsx(Slot, { style, children: childrenArray[1] })
-        ]
-      }
-    );
-  }
-);
-
+"use client";
+import { handleDimension, useStyleProps } from "../../utils/styled.js";
+import { Flex } from "../Flex/Flex.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+//#region src/components/ResponsivePair/ResponsivePair.tsx
+var ResponsivePair = React$1.forwardRef((props, ref) => {
+	const { wrap = "wrap-reverse", gap, children, ...rest } = props;
+	const childrenArray = React$1.Children.toArray(children);
+	const { style } = useStyleProps({
+		minWidth: `calc(${100 / childrenArray.length}% - ${handleDimension(gap)} / ${childrenArray.length})`,
+		flexGrow: 1
+	});
+	return /* @__PURE__ */ jsxs(Flex, {
+		ref,
+		display: "flex",
+		flexDirection: "row",
+		alignContent: "stretch",
+		flexWrap: wrap,
+		gap,
+		...rest,
+		children: [/* @__PURE__ */ jsx(Slot, {
+			style,
+			children: childrenArray[0]
+		}), /* @__PURE__ */ jsx(Slot, {
+			style,
+			children: childrenArray[1]
+		})]
+	});
+});
+//#endregion
 export { ResponsivePair };

package/lib/components/ResponsivePair/index.cjs

@@ -1,9 +1,3 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const ResponsivePair = require('./ResponsivePair.cjs');
-
-
-
-exports.ResponsivePair = ResponsivePair.ResponsivePair;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_ResponsivePair = require("./ResponsivePair.cjs");
+exports.ResponsivePair = require_ResponsivePair.ResponsivePair;

package/lib/components/ResponsivePair/index.js

@@ -1 +1,2 @@
-export { ResponsivePair } from './ResponsivePair.js';
+import { ResponsivePair } from "./ResponsivePair.js";
+export { ResponsivePair };

package/lib/components/ScrollFog/ScrollFog.cjs

@@ -1,63 +1,51 @@
-'use client';
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const scrollFog = require('@seed-design/css/recipes/scroll-fog');
-const clsx = require('clsx');
-const React = require('react');
-const component = require('@seed-design/css/vars/component');
-
-const ScrollFog = React.forwardRef(
-  ({
-    className,
-    hideScrollBar,
-    placement = ["top", "bottom"],
-    size = component.scrollFog.base.enabled.root.size,
-    sizes,
-    style,
-    ...props
-  }, ref) => {
-    const [variantProps, restProps] = scrollFog.scrollFog.splitVariantProps({
-      hideScrollBar,
-      ...props
-    });
-    const scrollFogClassName = scrollFog.scrollFog(variantProps);
-    const sizePx = typeof size === "number" ? `${size}px` : size;
-    const sizeStyle = React.useMemo(() => {
-      const finalSizes = {
-        top: sizes?.top ? `${sizes.top}px` : sizePx,
-        bottom: sizes?.bottom ? `${sizes.bottom}px` : sizePx,
-        left: sizes?.left ? `${sizes.left}px` : sizePx,
-        right: sizes?.right ? `${sizes.right}px` : sizePx
-      };
-      return {
-        "--scroll-fog-size-top": finalSizes.top,
-        "--scroll-fog-size-bottom": finalSizes.bottom,
-        "--scroll-fog-size-left": finalSizes.left,
-        "--scroll-fog-size-right": finalSizes.right,
-        // placement에 포함된 방향만 1, 나머지는 0
-        "--scrollable-top": placement.includes("top") ? "1" : "0",
-        "--scrollable-bottom": placement.includes("bottom") ? "1" : "0",
-        "--scrollable-left": placement.includes("left") ? "1" : "0",
-        "--scrollable-right": placement.includes("right") ? "1" : "0"
-      };
-    }, [sizePx, sizes, placement]);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref,
-        className: clsx(scrollFogClassName, className),
-        style: {
-          ...style,
-          ...sizeStyle
-        },
-        ...restProps
-      }
-    );
-  }
-);
+"use client";
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+let clsx = require("clsx");
+clsx = require_runtime.__toESM(clsx);
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _seed_design_css_vars_component = require("@seed-design/css/vars/component");
+let _seed_design_css_recipes_scroll_fog = require("@seed-design/css/recipes/scroll-fog");
+//#region src/components/ScrollFog/ScrollFog.tsx
+var ScrollFog = (0, react.forwardRef)(({ className, hideScrollBar, placement = ["top", "bottom"], size = _seed_design_css_vars_component.scrollFog.base.enabled.root.size, sizes, style, ...props }, ref) => {
+	const [variantProps, restProps] = _seed_design_css_recipes_scroll_fog.scrollFog.splitVariantProps({
+		hideScrollBar,
+		...props
+	});
+	const scrollFogClassName = (0, _seed_design_css_recipes_scroll_fog.scrollFog)(variantProps);
+	const sizePx = typeof size === "number" ? `${size}px` : size;
+	const sizeStyle = (0, react.useMemo)(() => {
+		const finalSizes = {
+			top: sizes?.top ? `${sizes.top}px` : sizePx,
+			bottom: sizes?.bottom ? `${sizes.bottom}px` : sizePx,
+			left: sizes?.left ? `${sizes.left}px` : sizePx,
+			right: sizes?.right ? `${sizes.right}px` : sizePx
+		};
+		return {
+			"--scroll-fog-size-top": finalSizes.top,
+			"--scroll-fog-size-bottom": finalSizes.bottom,
+			"--scroll-fog-size-left": finalSizes.left,
+			"--scroll-fog-size-right": finalSizes.right,
+			"--scrollable-top": placement.includes("top") ? "1" : "0",
+			"--scrollable-bottom": placement.includes("bottom") ? "1" : "0",
+			"--scrollable-left": placement.includes("left") ? "1" : "0",
+			"--scrollable-right": placement.includes("right") ? "1" : "0"
+		};
+	}, [
+		sizePx,
+		sizes,
+		placement
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref,
+		className: (0, clsx.default)(scrollFogClassName, className),
+		style: {
+			...style,
+			...sizeStyle
+		},
+		...restProps
+	});
+});
 ScrollFog.displayName = "ScrollFog";
-
+//#endregion
 exports.ScrollFog = ScrollFog;