@ultraviolet/ui 3.8.2 → 3.10.0

package/dist/components/GlobalAlert/GlobalAlertLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalAlertLink.d.ts","sourceRoot":"","sources":["../../../src/components/GlobalAlert/GlobalAlertLink.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAE9B,KAAK,oBAAoB,GAAG,IAAI,CAC9B,cAAc,CAAC,OAAO,IAAI,CAAC,EAC3B,WAAW,GAAG,YAAY,GAAG,MAAM,GAAG,QAAQ,CAC/C,GACC,WAAW,CAAC,IAAI,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EAAE,MAAM,CAAC,CAAC,CAAA;AAExD,eAAO,MAAM,eAAe,GAAI,oIAY7B,oBAAoB,4CAsBtB,CAAA"}
+{"version":3,"file":"GlobalAlertLink.d.ts","sourceRoot":"","sources":["../../../src/components/GlobalAlert/GlobalAlertLink.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAE9B,KAAK,oBAAoB,GAAG,IAAI,CAC9B,cAAc,CAAC,OAAO,IAAI,CAAC,EAC3B,WAAW,GAAG,YAAY,GAAG,MAAM,GAAG,QAAQ,CAC/C,GACC,WAAW,CAAC,IAAI,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EAAE,MAAM,CAAC,CAAC,CAAA;AAExD,eAAO,MAAM,eAAe,uMAkC3B,CAAA"}

package/dist/components/GlobalAlert/GlobalAlertLink.js

@@ -1,41 +1,29 @@
-"use client";
+'use client';
+import { __name } from "../../_virtual/_rolldown/runtime.js";
+import { Link } from "../Link/index.js";
 import { jsx } from "react/jsx-runtime";
 import { useTheme } from "@ultraviolet/themes";
-import { Link } from "../Link/index.js";
-const GlobalAlertLink = ({
-  children,
-  href,
-  target,
-  download,
-  rel,
-  className,
-  onClick,
-  "aria-label": ariaLabel,
-  oneLine = false,
-  "data-testid": dataTestId,
-  style
-}) => {
-  const { theme } = useTheme();
-  return /* @__PURE__ */ jsx(
-    Link,
-    {
-      "aria-label": ariaLabel,
-      className,
-      "data-testid": dataTestId,
-      download,
-      href,
-      onClick,
-      oneLine,
-      prominence: theme === "light" ? "strong" : "stronger",
-      rel,
-      size: "small",
-      style,
-      target,
-      variant: "inline",
-      children
-    }
-  );
-};
-export {
-  GlobalAlertLink
+
+//#region src/components/GlobalAlert/GlobalAlertLink.tsx
+const GlobalAlertLink = ({ children, href, target, download, rel, className, onClick, "aria-label": ariaLabel, oneLine = false, "data-testid": dataTestId, style }) => {
+	const { theme } = useTheme();
+	return /* @__PURE__ */ jsx(Link, {
+		"aria-label": ariaLabel,
+		className,
+		"data-testid": dataTestId,
+		download,
+		href,
+		onClick,
+		oneLine,
+		prominence: theme === "light" ? "strong" : "stronger",
+		rel,
+		size: "small",
+		style,
+		target,
+		variant: "inline",
+		children
+	});
 };
+
+//#endregion
+export { GlobalAlertLink };

package/dist/components/GlobalAlert/index.d.ts

@@ -10,32 +10,28 @@ type GlobalAlertProps = {
     onClickButton?: () => void;
     style?: CSSProperties;
 };
-/**
- * GlobalAlert is a component that is used to display a global alert message.
- * It has its own internal state and can be closed by clicking on the close button.
- */
-export declare const GlobalAlert: {
-    ({ children, variant, onClose, closable, buttonText, onClickButton, className, "data-testid": dataTestId, style, }: GlobalAlertProps): import("react/jsx-runtime").JSX.Element | null;
-    Link: ({ children, href, target, download, rel, className, onClick, "aria-label": ariaLabel, oneLine, "data-testid": dataTestId, style, }: Omit<({
+export declare function GlobalAlert({ children, variant, onClose, closable, buttonText, onClickButton, className, 'data-testid': dataTestId, style }: GlobalAlertProps): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace GlobalAlert {
+    var Link: ({ children, href, target, download, rel, className, onClick, 'aria-label': ariaLabel, oneLine, 'data-testid': dataTestId, style, }: Omit<({
         children: ReactNode;
-        target?: import("react").HTMLAttributeAnchorTarget;
-        download?: string | boolean;
-        sentiment?: "primary" | "info";
-        prominence?: import("../Link").ProminenceProps;
-        size?: "small" | "large" | "xsmall";
-        iconPosition?: "left" | "right";
-        rel?: import("react").AnchorHTMLAttributes<HTMLAnchorElement>["rel"];
-        className?: string;
-        onClick?: import("react").MouseEventHandler<HTMLAnchorElement>;
-        'aria-label'?: string;
-        'aria-current'?: import("react").AnchorHTMLAttributes<HTMLAnchorElement>["aria-current"];
-        'aria-keyshortcuts'?: string;
-        oneLine?: boolean;
-        'data-testid'?: string;
-        variant?: "inline" | "standalone";
-        style?: CSSProperties;
+        target?: import("react").HTMLAttributeAnchorTarget | undefined;
+        download?: string | boolean | undefined;
+        sentiment?: "info" | "primary" | undefined;
+        prominence?: "default" | "strong" | "stronger" | "weak" | undefined;
+        size?: ("large" | "small" | "xsmall") | undefined;
+        iconPosition?: ("left" | "right") | undefined;
+        rel?: string | undefined;
+        className?: string | undefined;
+        onClick?: import("react").MouseEventHandler<HTMLAnchorElement> | undefined;
+        'aria-label'?: string | undefined;
+        'aria-current'?: "date" | "false" | "location" | "page" | "step" | "time" | "true" | boolean | undefined;
+        'aria-keyshortcuts'?: string | undefined;
+        oneLine?: boolean | undefined;
+        'data-testid'?: string | undefined;
+        variant?: "inline" | "standalone" | undefined;
+        style?: CSSProperties | undefined;
     } & ((Without<{
-        href?: string;
+        href?: string | undefined;
     }, {
         render: import("@ultraviolet/utils").RenderProp<import("react").AnchorHTMLAttributes<HTMLAnchorElement>>;
     }> & {
@@ -43,29 +39,29 @@ export declare const GlobalAlert: {
     }) | (Without<{
         render: import("@ultraviolet/utils").RenderProp<import("react").AnchorHTMLAttributes<HTMLAnchorElement>>;
     }, {
-        href?: string;
+        href?: string | undefined;
     }> & {
-        href?: string;
-    }))) & import("react").RefAttributes<HTMLAnchorElement>, "size" | "sentiment" | "render" | "prominence"> & Pick<({
+        href?: string | undefined;
+    }))) & import("react").RefAttributes<HTMLAnchorElement>, "prominence" | "render" | "sentiment" | "size"> & Pick<({
         children: ReactNode;
-        target?: import("react").HTMLAttributeAnchorTarget;
-        download?: string | boolean;
-        sentiment?: "primary" | "info";
-        prominence?: import("../Link").ProminenceProps;
-        size?: "small" | "large" | "xsmall";
-        iconPosition?: "left" | "right";
-        rel?: import("react").AnchorHTMLAttributes<HTMLAnchorElement>["rel"];
-        className?: string;
-        onClick?: import("react").MouseEventHandler<HTMLAnchorElement>;
-        'aria-label'?: string;
-        'aria-current'?: import("react").AnchorHTMLAttributes<HTMLAnchorElement>["aria-current"];
-        'aria-keyshortcuts'?: string;
-        oneLine?: boolean;
-        'data-testid'?: string;
-        variant?: "inline" | "standalone";
-        style?: CSSProperties;
+        target?: import("react").HTMLAttributeAnchorTarget | undefined;
+        download?: string | boolean | undefined;
+        sentiment?: "info" | "primary" | undefined;
+        prominence?: "default" | "strong" | "stronger" | "weak" | undefined;
+        size?: ("large" | "small" | "xsmall") | undefined;
+        iconPosition?: ("left" | "right") | undefined;
+        rel?: string | undefined;
+        className?: string | undefined;
+        onClick?: import("react").MouseEventHandler<HTMLAnchorElement> | undefined;
+        'aria-label'?: string | undefined;
+        'aria-current'?: "date" | "false" | "location" | "page" | "step" | "time" | "true" | boolean | undefined;
+        'aria-keyshortcuts'?: string | undefined;
+        oneLine?: boolean | undefined;
+        'data-testid'?: string | undefined;
+        variant?: "inline" | "standalone" | undefined;
+        style?: CSSProperties | undefined;
     } & ((Without<{
-        href?: string;
+        href?: string | undefined;
     }, {
         render: import("@ultraviolet/utils").RenderProp<import("react").AnchorHTMLAttributes<HTMLAnchorElement>>;
     }> & {
@@ -73,10 +69,9 @@ export declare const GlobalAlert: {
     }) | (Without<{
         render: import("@ultraviolet/utils").RenderProp<import("react").AnchorHTMLAttributes<HTMLAnchorElement>>;
     }, {
-        href?: string;
+        href?: string | undefined;
     }> & {
-        href?: string;
+        href?: string | undefined;
     }))) & import("react").RefAttributes<HTMLAnchorElement>, "href">) => import("react/jsx-runtime").JSX.Element;
-};
-export {};
+}
 //# sourceMappingURL=index.d.ts.map

package/dist/components/GlobalAlert/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/GlobalAlert/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAQrD,KAAK,gBAAgB,GAAG;IACtB,QAAQ,EAAE,SAAS,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,aAAa,CAAA;IAC3C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW;wHAUrB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqDlB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/GlobalAlert/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAQrD,KAAK,gBAAgB,GAAG;IACtB,QAAQ,EAAE,SAAS,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,aAAa,CAAA;IAC3C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;oCAM2B,EAC1B,QAAQ,EACR,OAAgB,EAChB,OAAO,EACP,QAAe,EACf,UAAU,EACV,aAAa,EACb,SAAS,EACT,aAAa,EAAE,UAAU,EACzB,KAAK,EACN,EAAE,gBAAgB"}

package/dist/components/GlobalAlert/index.js

@@ -1,80 +1,62 @@
-"use client";
-import { jsxs, jsx } from "react/jsx-runtime";
-import { CloseIcon } from "@ultraviolet/icons/CloseIcon";
-import { cn } from "@ultraviolet/utils";
-import { useReducer } from "react";
-import { Button } from "../Button/index.js";
+'use client';
+import { __name } from "../../_virtual/_rolldown/runtime.js";
 import { Stack } from "../Stack/index.js";
 import { Text } from "../Text/index.js";
+import { Button } from "../Button/index.js";
 import { GlobalAlertLink } from "./GlobalAlertLink.js";
 import { closeButton, container } from "./styles.css.js";
-const GlobalAlert = ({
-  children,
-  variant = "info",
-  onClose,
-  closable = true,
-  buttonText,
-  onClickButton,
-  className,
-  "data-testid": dataTestId,
-  style
-}) => {
-  const [opened, toggleOpened] = useReducer((value) => !value, true);
-  if (!opened) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs(
-    Stack,
-    {
-      alignItems: "center",
-      className: cn(className, container[variant]),
-      "data-testid": dataTestId,
-      "data-variant": variant,
-      direction: "row",
-      justifyContent: "center",
-      style,
-      children: [
-        /* @__PURE__ */ jsxs(
-          Stack,
-          {
-            alignItems: "center",
-            direction: "row",
-            gap: 2,
-            justifyContent: "center",
-            children: [
-              /* @__PURE__ */ jsx(Text, { as: "p", sentiment: "white", variant: "bodySmall", children }),
-              onClickButton && buttonText ? /* @__PURE__ */ jsx(
-                Button,
-                {
-                  onClick: onClickButton,
-                  sentiment: "white",
-                  size: "small",
-                  variant: "filled",
-                  children: buttonText
-                }
-              ) : null
-            ]
-          }
-        ),
-        closable ? /* @__PURE__ */ jsx(
-          Button,
-          {
-            className: closeButton,
-            onClick: () => {
-              toggleOpened();
-              onClose?.();
-            },
-            sentiment: "primary",
-            size: "xsmall",
-            variant: "filled",
-            children: /* @__PURE__ */ jsx(CloseIcon, {})
-          }
-        ) : null
-      ]
-    }
-  );
+import { cn } from "@ultraviolet/utils";
+import { useReducer } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CloseIcon } from "@ultraviolet/icons/CloseIcon";
+
+//#region src/components/GlobalAlert/index.tsx
+/**
+* GlobalAlert is a component that is used to display a global alert message.
+* It has its own internal state and can be closed by clicking on the close button.
+*/
+const GlobalAlert = ({ children, variant = "info", onClose, closable = true, buttonText, onClickButton, className, "data-testid": dataTestId, style }) => {
+	const [opened, toggleOpened] = useReducer((value) => !value, true);
+	if (!opened) return null;
+	return /* @__PURE__ */ jsxs(Stack, {
+		alignItems: "center",
+		className: cn(className, container[variant]),
+		"data-testid": dataTestId,
+		"data-variant": variant,
+		direction: "row",
+		justifyContent: "center",
+		style,
+		children: [/* @__PURE__ */ jsxs(Stack, {
+			alignItems: "center",
+			direction: "row",
+			gap: 2,
+			justifyContent: "center",
+			children: [/* @__PURE__ */ jsx(Text, {
+				as: "p",
+				sentiment: "white",
+				variant: "bodySmall",
+				children
+			}), onClickButton && buttonText ? /* @__PURE__ */ jsx(Button, {
+				onClick: onClickButton,
+				sentiment: "white",
+				size: "small",
+				variant: "filled",
+				children: buttonText
+			}) : null]
+		}), closable ? /* @__PURE__ */ jsx(Button, {
+			className: closeButton,
+			onClick: () => {
+				toggleOpened();
+				onClose === null || onClose === void 0 || onClose();
+			},
+			sentiment: "primary",
+			size: "xsmall",
+			variant: "filled",
+			children: /* @__PURE__ */ jsx(CloseIcon, {})
+		}) : null]
+	});
 };
 GlobalAlert.Link = GlobalAlertLink;
-export {
-  GlobalAlert
-};
+
+//#endregion
+export { GlobalAlert };

package/dist/components/GlobalAlert/styles.css.js

@@ -1,7 +1,12 @@
-/* empty css                          */
+/* empty css                      */
+
+//#region src/components/GlobalAlert/styles.css.ts
 var closeButton = "uv_1dgk2tq0";
-var container = { danger: "uv_1dgk2tq2 uv_1dgk2tq1", info: "uv_1dgk2tq3 uv_1dgk2tq1", promotional: "uv_1dgk2tq4 uv_1dgk2tq1" };
-export {
-  closeButton,
-  container
+var container = {
+	danger: "uv_1dgk2tq2 uv_1dgk2tq1",
+	info: "uv_1dgk2tq3 uv_1dgk2tq1",
+	promotional: "uv_1dgk2tq4 uv_1dgk2tq1"
 };
+
+//#endregion
+export { closeButton, container };

package/dist/components/InfiniteScroll/index.d.ts

@@ -35,6 +35,6 @@ type InfiniteScrollProps = {
  * You can add it at the end of a list of items and it will call the `onLoadMore` function when the user scrolls to the bottom of the list.
  * The component will take the first parent that has as the scroll to listen on it. In some rare cases, if you need to change the scroll listener, you can use the `scrollParentRef` prop.
  */
-export declare const InfiniteScroll: ({ className, "data-testid": dataTestId, onLoadMore, scrollParentRef, height, loader, id, as: Component, hasMore, heightThreshold, style, }: InfiniteScrollProps) => string | number | bigint | true | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element;
+export declare const InfiniteScroll: ({ className, 'data-testid': dataTestId, onLoadMore, scrollParentRef, height, loader, id, as: Component, hasMore, heightThreshold, style, }: InfiniteScrollProps) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined>;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/components/InfiniteScroll/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/InfiniteScroll/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAQ7E,KAAK,mBAAmB,GAAG;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;OAEG;IACH,UAAU,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IACtC;;OAEG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,GAAG,SAAS,CAAC,IAAI,CAAC,CAAA;IAC7D;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,EAAE,CAAC,EAAE,WAAW,CAAA;IAChB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,4IAY5B,mBAAmB,sTA8FrB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/InfiniteScroll/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAQ7E,KAAK,mBAAmB,GAAG;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;OAEG;IACH,UAAU,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IACtC;;OAEG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,GAAG,SAAS,CAAC,IAAI,CAAC,CAAA;IAC7D;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,EAAE,CAAC,EAAE,WAAW,CAAA;IAChB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,cAAc,2dA0G1B,CAAA"}

package/dist/components/InfiniteScroll/index.js

@@ -1,98 +1,78 @@
-"use client";
-import { jsx } from "react/jsx-runtime";
-import { useState, useRef, useCallback, useEffect, useMemo } from "react";
+'use client';
+import { __name } from "../../_virtual/_rolldown/runtime.js";
+import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/objectSpread2.js";
 import { Loader } from "../Loader/index.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/InfiniteScroll/index.tsx
 const HEIGHT_THRESHOLD = 100;
-const InfiniteScroll = ({
-  className,
-  "data-testid": dataTestId,
-  onLoadMore,
-  scrollParentRef,
-  height = "2.5rem",
-  loader,
-  id,
-  as: Component = "div",
-  hasMore = true,
-  heightThreshold = HEIGHT_THRESHOLD,
-  style
-}) => {
-  const [isLoading, setIsLoading] = useState(false);
-  const containerRef = useRef(null);
-  const debounce = useCallback((func, delay) => {
-    let timeoutId;
-    return () => {
-      if (timeoutId) {
-        clearTimeout(timeoutId);
-      }
-      timeoutId = setTimeout(() => {
-        func();
-      }, delay);
-    };
-  }, []);
-  const handleScroll = useCallback(
-    (scrollableContainer) => {
-      if (!containerRef.current) {
-        return;
-      }
-      if (!onLoadMore) {
-        return;
-      }
-      const { scrollTop, scrollHeight, clientHeight } = scrollableContainer;
-      if (scrollTop + clientHeight >= scrollHeight - heightThreshold) {
-        setIsLoading(true);
-        const result = onLoadMore();
-        if (result instanceof Promise) {
-          result.then(() => {
-            setIsLoading(false);
-          }).catch((error) => {
-            setIsLoading(false);
-            throw error;
-          });
-        }
-      }
-    },
-    [onLoadMore, heightThreshold]
-  );
-  useEffect(() => {
-    if (!hasMore) {
-      return;
-    }
-    let scrollableContainer = scrollParentRef?.current || containerRef.current?.parentElement;
-    while (scrollableContainer && scrollableContainer !== document.body) {
-      const { overflowY } = window.getComputedStyle(scrollableContainer);
-      if (overflowY === "auto" || overflowY === "scroll") {
-        break;
-      }
-      scrollableContainer = scrollableContainer.parentElement;
-    }
-    if (!scrollableContainer) {
-      return;
-    }
-    const debouncedHandleScroll = debounce(
-      () => handleScroll(scrollableContainer),
-      100
-    );
-    scrollableContainer.addEventListener("scroll", debouncedHandleScroll);
-    return () => {
-      scrollableContainer.removeEventListener("scroll", debouncedHandleScroll);
-    };
-  }, [debounce, handleScroll, hasMore, onLoadMore, scrollParentRef]);
-  const localLoader = useMemo(() => loader || /* @__PURE__ */ jsx(Loader, { active: true }), [loader]);
-  if (isLoading) {
-    return localLoader;
-  }
-  return /* @__PURE__ */ jsx(
-    Component,
-    {
-      className,
-      "data-testid": dataTestId,
-      id,
-      ref: containerRef,
-      role: "feed",
-      style: { height, ...style }
-    }
-  );
-};
-export {
-  InfiniteScroll
+/**
+* InfiniteScroll is a component that allows you to create a scrollable area with hidden pagination.
+* You can add it at the end of a list of items and it will call the `onLoadMore` function when the user scrolls to the bottom of the list.
+* The component will take the first parent that has as the scroll to listen on it. In some rare cases, if you need to change the scroll listener, you can use the `scrollParentRef` prop.
+*/
+const InfiniteScroll = ({ className, "data-testid": dataTestId, onLoadMore, scrollParentRef, height = "2.5rem", loader, id, as: Component = "div", hasMore = true, heightThreshold = HEIGHT_THRESHOLD, style }) => {
+	const [isLoading, setIsLoading] = useState(false);
+	const containerRef = useRef(null);
+	const debounce = useCallback((func, delay) => {
+		let timeoutId;
+		return () => {
+			if (timeoutId) clearTimeout(timeoutId);
+			timeoutId = setTimeout(() => {
+				func();
+			}, delay);
+		};
+	}, []);
+	const handleScroll = useCallback((scrollableContainer) => {
+		if (!containerRef.current) return;
+		if (!onLoadMore) return;
+		const { scrollTop, scrollHeight, clientHeight } = scrollableContainer;
+		if (scrollTop + clientHeight >= scrollHeight - heightThreshold) {
+			setIsLoading(true);
+			const result = onLoadMore();
+			if (result instanceof Promise) result.then(() => {
+				setIsLoading(false);
+			}).catch((error) => {
+				setIsLoading(false);
+				throw error;
+			});
+		}
+	}, [onLoadMore, heightThreshold]);
+	useEffect(() => {
+		var _scrollParentRef$curr;
+		var _containerRef$current;
+		if (!hasMore) return;
+		let scrollableContainer = (_scrollParentRef$curr = scrollParentRef === null || scrollParentRef === void 0 ? void 0 : scrollParentRef.current) !== null && _scrollParentRef$curr !== void 0 ? _scrollParentRef$curr : (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.parentElement;
+		while (scrollableContainer && scrollableContainer !== document.body) {
+			const { overflowY } = window.getComputedStyle(scrollableContainer);
+			if (overflowY === "auto" || overflowY === "scroll") break;
+			scrollableContainer = scrollableContainer.parentElement;
+		}
+		if (!scrollableContainer) return;
+		const debouncedHandleScroll = debounce(() => handleScroll(scrollableContainer), 100);
+		scrollableContainer.addEventListener("scroll", debouncedHandleScroll);
+		return () => {
+			scrollableContainer.removeEventListener("scroll", debouncedHandleScroll);
+		};
+	}, [
+		debounce,
+		handleScroll,
+		hasMore,
+		onLoadMore,
+		scrollParentRef
+	]);
+	const localLoader = useMemo(() => loader !== null && loader !== void 0 ? loader : /* @__PURE__ */ jsx(Loader, { active: true }), [loader]);
+	if (isLoading) return localLoader;
+	return /* @__PURE__ */ jsx(Component, {
+		className,
+		"data-testid": dataTestId,
+		id,
+		ref: containerRef,
+		role: "feed",
+		style: _objectSpread2({ height }, style)
+	});
 };
+
+//#endregion
+export { InfiniteScroll };

package/dist/components/Key/constants.js

@@ -1,11 +1,12 @@
+//#region src/components/Key/constants.ts
 const KEYS_MATCH = {
-  backspace: "⌫",
-  command: "⌘",
-  control: "⌃",
-  enter: "↵",
-  option: "⌥",
-  shift: "⇧"
-};
-export {
-  KEYS_MATCH
+	backspace: "⌫",
+	command: "⌘",
+	control: "⌃",
+	enter: "↵",
+	option: "⌥",
+	shift: "⇧"
 };
+
+//#endregion
+export { KEYS_MATCH };

package/dist/components/Key/index.d.ts

@@ -13,6 +13,6 @@ type KeyProps = {
 /**
  * Key is a visual component used to display keyboard shortcuts.
  */
-export declare const Key: ({ children, prominence, disabled, size, sentiment, id, className, "data-testid": dataTestId, style, }: KeyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Key: ({ children, prominence, disabled, size, sentiment, id, className, 'data-testid': dataTestId, style, }: KeyProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Key/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Key/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAM1C,KAAK,QAAQ,GAAG;IACd,QAAQ,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IACzB,SAAS,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IACjC,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,GAAG,GAAI,uGAUjB,QAAQ,4CA4CV,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Key/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAM1C,KAAK,QAAQ,GAAG;IACd,QAAQ,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IACzB,SAAS,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IACjC,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,GAAG,8JAsDf,CAAA"}