@dnanpm/styleguide 3.7.1 → 3.8.1

package/build/cjs/components/TooltipMenu/TooltipMenu.d.ts

@@ -1,42 +1,42 @@
-import type { ReactNode } from 'react';
-import React from 'react';
-import type { Props as IconProps } from '../Icon/Icon';
-export interface TooltipMenuProps {
-    /** Text selector */
-    selector: string;
-    /** Allows to pass a custom className */
-    className?: string;
-    /** Tooltip menu content */
-    children: ReactNode;
-    /** Text selector color.Default: #121212 */
-    color?: string;
-    /** Text selector active color. Default: #121212 */
-    activeColor?: string;
-    /** Size of chevron icon. Default: 1.5rem  */
-    iconSize?: string;
-    /** Overlap other elements */
-    zIndex?: string;
-    /** Tooltip position from top. Default: 2rem */
-    tooltipTop?: string;
-    /** Tooltip position from right. Default: 1.25rem */
-    tooltipRight?: string;
-    /**
-     * Tooltip icon for selector. Default: ''
-     *
-     * @deprecated Use property `tooltipIcon`
-     */
-    tooltipIconName?: string;
-    /**
-     * Tooltip icon for selector
-     */
-    tooltipIcon?: IconProps['icon'];
-    /** Tooltip icon size for selector. Default: '1.5rem' */
-    tooltipIconSize?: string;
-    /** Show hide animated chevron. Default: '' */
-    tooltipChevron?: boolean;
-    /** Arrow position if needed some adjust. Defaul: -0.25rem. */
-    arrowPosition?: string;
-}
-/** @visibleName Tooltip Menu */
-declare const TooltipMenu: ({ selector, className, color, children, iconSize, zIndex, tooltipTop, tooltipRight, activeColor, tooltipIconName, tooltipIcon, tooltipIconSize, tooltipChevron, arrowPosition, }: TooltipMenuProps) => React.JSX.Element;
-export default TooltipMenu;
+import type { ReactNode } from 'react';
+import React from 'react';
+import type { Props as IconProps } from '../Icon/Icon';
+export interface TooltipMenuProps {
+    /** Text selector */
+    selector: string;
+    /** Allows to pass a custom className */
+    className?: string;
+    /** Tooltip menu content */
+    children: ReactNode;
+    /** Text selector color.Default: #121212 */
+    color?: string;
+    /** Text selector active color. Default: #121212 */
+    activeColor?: string;
+    /** Size of chevron icon. Default: 1.5rem  */
+    iconSize?: string;
+    /** Overlap other elements */
+    zIndex?: string;
+    /** Tooltip position from top. Default: 2rem */
+    tooltipTop?: string;
+    /** Tooltip position from right. Default: 1.25rem */
+    tooltipRight?: string;
+    /**
+     * Tooltip icon for selector. Default: ''
+     *
+     * @deprecated Use property `tooltipIcon`
+     */
+    tooltipIconName?: string;
+    /**
+     * Tooltip icon for selector
+     */
+    tooltipIcon?: IconProps['icon'];
+    /** Tooltip icon size for selector. Default: '1.5rem' */
+    tooltipIconSize?: string;
+    /** Show hide animated chevron. Default: '' */
+    tooltipChevron?: boolean;
+    /** Arrow position if needed some adjust. Defaul: -0.25rem. */
+    arrowPosition?: string;
+}
+/** @visibleName Tooltip Menu */
+declare const TooltipMenu: ({ selector, className, color, children, iconSize, zIndex, tooltipTop, tooltipRight, activeColor, tooltipIconName, tooltipIcon, tooltipIconSize, tooltipChevron, arrowPosition, }: TooltipMenuProps) => React.JSX.Element;
+export default TooltipMenu;

package/build/cjs/components/TooltipMenu/TooltipMenu.js

@@ -25,10 +25,10 @@ const Selector = styled["default"].div `
         transform: ${p => (p.showDropdown ? 'rotate(180deg)' : 'rotate(0deg)')};
         transition: transform 0.15s linear;
     }
-`;
+`;
 const Container = styled["default"].div `
     position: relative;
-`;
+`;
 const Tooltip = styled["default"].div `
     background-color: ${theme["default"].color.background.white.default};
     padding: 0.5rem;
@@ -39,35 +39,35 @@ const Tooltip = styled["default"].div `
     top: ${p => p.tooltipTop};
     box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.48);
     z-index: ${p => p.zIndex};
-`;
+`;
 const ChildrenWrapper = styled["default"].span `
     > * {
         white-space: nowrap;
     }
-`;
-/** @visibleName Tooltip Menu */
-const TooltipMenu = ({ selector, className, color = theme["default"].color.text.black, children, iconSize = '1.5rem', zIndex = '1', tooltipTop = '2rem', tooltipRight = '-1.25rem', activeColor = color, tooltipIconName, tooltipIcon, tooltipIconSize = '1.5rem', tooltipChevron = true, arrowPosition = '-0.25rem', }) => {
-    const [showDropdown, setShowDropdown] = React.useState(false);
-    const ref = React.useRef(null);
-    const toggleState = () => {
-        setShowDropdown(!showDropdown);
-    };
-    useOutsideClick["default"](ref, () => {
-        if (showDropdown) {
-            setShowDropdown(false);
-        }
-    });
-    return (React__default["default"].createElement(Container, { className: className, ref: ref },
-        React__default["default"].createElement(Selector, { color: showDropdown ? activeColor : color, onClick: toggleState, showDropdown: showDropdown },
-            tooltipIcon && React__default["default"].createElement(Icon["default"], { icon: tooltipIcon, size: tooltipIconSize, position: "left" }),
-            tooltipIconName && (React__default["default"].createElement(Icon["default"], { name: tooltipIconName, size: tooltipIconSize, position: "left" })),
-            React__default["default"].createElement("span", null, selector),
-            tooltipChevron && React__default["default"].createElement(Icon["default"], { icon: icons.ChevronDown, size: iconSize, position: "right" })),
-        showDropdown && (React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement(TooltipMenuExportedStyles.TailShadow, { zIndex: zIndex, tooltipTop: tooltipTop, arrowPosition: arrowPosition }),
-            React__default["default"].createElement(TooltipMenuExportedStyles.Tail, { zIndex: zIndex, tooltipTop: tooltipTop, arrowPosition: arrowPosition }))),
-        showDropdown && (React__default["default"].createElement(Tooltip, { zIndex: zIndex, tooltipTop: tooltipTop, tooltipRight: tooltipRight },
-            React__default["default"].createElement(ChildrenWrapper, null, children)))));
+`;
+/** @visibleName Tooltip Menu */
+const TooltipMenu = ({ selector, className, color = theme["default"].color.text.black, children, iconSize = '1.5rem', zIndex = '1', tooltipTop = '2rem', tooltipRight = '-1.25rem', activeColor = color, tooltipIconName, tooltipIcon, tooltipIconSize = '1.5rem', tooltipChevron = true, arrowPosition = '-0.25rem', }) => {
+    const [showDropdown, setShowDropdown] = React.useState(false);
+    const ref = React.useRef(null);
+    const toggleState = () => {
+        setShowDropdown(!showDropdown);
+    };
+    useOutsideClick["default"](ref, () => {
+        if (showDropdown) {
+            setShowDropdown(false);
+        }
+    });
+    return (React__default["default"].createElement(Container, { className: className, ref: ref },
+        React__default["default"].createElement(Selector, { color: showDropdown ? activeColor : color, onClick: toggleState, showDropdown: showDropdown },
+            tooltipIcon && React__default["default"].createElement(Icon["default"], { icon: tooltipIcon, size: tooltipIconSize, position: "left" }),
+            tooltipIconName && (React__default["default"].createElement(Icon["default"], { name: tooltipIconName, size: tooltipIconSize, position: "left" })),
+            React__default["default"].createElement("span", null, selector),
+            tooltipChevron && React__default["default"].createElement(Icon["default"], { icon: icons.ChevronDown, size: iconSize, position: "right" })),
+        showDropdown && (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement(TooltipMenuExportedStyles.TailShadow, { zIndex: zIndex, tooltipTop: tooltipTop, arrowPosition: arrowPosition }),
+            React__default["default"].createElement(TooltipMenuExportedStyles.Tail, { zIndex: zIndex, tooltipTop: tooltipTop, arrowPosition: arrowPosition }))),
+        showDropdown && (React__default["default"].createElement(Tooltip, { zIndex: zIndex, tooltipTop: tooltipTop, tooltipRight: tooltipRight },
+            React__default["default"].createElement(ChildrenWrapper, null, children)))));
 };
 
 exports["default"] = TooltipMenu;

package/build/cjs/components/index.d.ts

@@ -1,48 +1,50 @@
-export { default as Accordion } from './Accordion/Accordion';
-export { default as AccordionItem } from './AccordionItem/AccordionItem';
-export { default as AmountSelector } from './AmountSelector/AmountSelector';
-export { default as Box } from './Box/Box';
-export { default as Button } from './Button/Button';
-export { default as ButtonArrow } from './Button/ButtonArrow';
-export { default as ButtonClose } from './Button/ButtonClose';
-export { default as ButtonIcon } from './Button/ButtonIcon';
-export { default as ButtonPrimary } from './Button/ButtonPrimary';
-export { default as ButtonRound } from './Button/ButtonRound';
-export { default as ButtonSecondary } from './Button/ButtonSecondary';
-export { default as Checkbox } from './Checkbox/Checkbox';
-export { default as Chip } from './Chip/Chip';
-export { default as DateTimePicker } from './DateTimePicker/DateTimePicker';
-export { default as Divider } from './Divider/Divider';
-export { default as DnaLogo } from './DnaLogo/DnaLogo';
-export { default as Drawer } from './Drawer/Drawer';
-export { default as EmptyState } from './EmptyState/EmptyState';
-export { default as Floater } from './Floater/Floater';
-export { default as Footer } from './Footer/Footer';
-export { default as Icon } from './Icon/Icon';
-export * from './Icons';
-export { default as InfoDialog } from './InfoDialog/InfoDialog';
-export { default as Input } from './Input/Input';
-export { default as Label } from './Label/Label';
-export { default as LabelText } from './LabelText/LabelText';
-export { default as MainHeaderNavigation } from './MainHeaderNavigation/MainHeaderNavigation';
-export { default as MainNavigation } from './MainNavigation/MainNavigation';
-export { default as Modal } from './Modal/Modal';
-export { default as Notification } from './Notification/Notification';
-export { default as NotificationBadge } from './NotificationBadge/NotificationBadge';
-export { default as Pill } from './Pill/Pill';
-export { default as PixelLoader } from './PixelLoader/PixelLoader';
-export { default as PriorityNavigation } from './PriorityNavigation/PriorityNavigation';
-export { default as PriorityNavigationItem } from './PriorityNavigationItem/PriorityNavigationItem';
-export { default as ProgressIndicator } from './ProgressIndicator/ProgressIndicator';
-export { default as RadioButton } from './RadioButton/RadioButton';
-export { default as ReadMore } from './ReadMore/ReadMore';
-export { default as Search } from './Search/Search';
-export { default as SecondaryNavigation } from './SecondaryNavigation/SecondaryNavigation';
-export { default as Selectbox } from './Selectbox/Selectbox';
-export { default as Switch } from './Switch/Switch';
-export { default as Tab } from './Tab/Tab';
-export { default as Tabs } from './Tabs/Tabs';
-export { default as Textarea } from './Textarea/Textarea';
-export { default as Toaster } from './Toaster/Toaster';
-export { default as Tooltip } from './Tooltip/Tooltip';
-export { default as TooltipMenu } from './TooltipMenu/TooltipMenu';
+export { default as Accordion } from './Accordion/Accordion';
+export { default as AccordionItem } from './AccordionItem/AccordionItem';
+export { default as AmountSelector } from './AmountSelector/AmountSelector';
+export { default as Box } from './Box/Box';
+export { default as Button } from './Button/Button';
+export { default as ButtonArrow } from './Button/ButtonArrow';
+export { default as ButtonClose } from './Button/ButtonClose';
+export { default as ButtonIcon } from './Button/ButtonIcon';
+export { default as ButtonPrimary } from './Button/ButtonPrimary';
+export { default as ButtonRound } from './Button/ButtonRound';
+export { default as ButtonSecondary } from './Button/ButtonSecondary';
+export { default as Carousel } from './Carousel/Carousel';
+export { default as Checkbox } from './Checkbox/Checkbox';
+export { default as Chip } from './Chip/Chip';
+export { default as DateTimePicker } from './DateTimePicker/DateTimePicker';
+export { default as Divider } from './Divider/Divider';
+export { default as DnaLogo } from './DnaLogo/DnaLogo';
+export { default as Drawer } from './Drawer/Drawer';
+export { default as EmptyState } from './EmptyState/EmptyState';
+export { default as Expander } from './Expander/Expander';
+export { default as Floater } from './Floater/Floater';
+export { default as Footer } from './Footer/Footer';
+export { default as Icon } from './Icon/Icon';
+export * from './Icons';
+export { default as InfoDialog } from './InfoDialog/InfoDialog';
+export { default as Input } from './Input/Input';
+export { default as Label } from './Label/Label';
+export { default as LabelText } from './LabelText/LabelText';
+export { default as MainHeaderNavigation } from './MainHeaderNavigation/MainHeaderNavigation';
+export { default as MainNavigation } from './MainNavigation/MainNavigation';
+export { default as Modal } from './Modal/Modal';
+export { default as Notification } from './Notification/Notification';
+export { default as NotificationBadge } from './NotificationBadge/NotificationBadge';
+export { default as Pill } from './Pill/Pill';
+export { default as PixelLoader } from './PixelLoader/PixelLoader';
+export { default as PriorityNavigation } from './PriorityNavigation/PriorityNavigation';
+export { default as PriorityNavigationItem } from './PriorityNavigationItem/PriorityNavigationItem';
+export { default as ProgressIndicator } from './ProgressIndicator/ProgressIndicator';
+export { default as RadioButton } from './RadioButton/RadioButton';
+export { default as ReadMore } from './ReadMore/ReadMore';
+export { default as Search } from './Search/Search';
+export { default as SecondaryNavigation } from './SecondaryNavigation/SecondaryNavigation';
+export { default as Selectbox } from './Selectbox/Selectbox';
+export { default as Switch } from './Switch/Switch';
+export { default as Tab } from './Tab/Tab';
+export { default as Tabs } from './Tabs/Tabs';
+export { default as Textarea } from './Textarea/Textarea';
+export { default as Toaster } from './Toaster/Toaster';
+export { default as Tooltip } from './Tooltip/Tooltip';
+export { default as TooltipMenu } from './TooltipMenu/TooltipMenu';

package/build/cjs/hooks/useCloseOutsideOrElementClicked.d.ts

@@ -1,13 +1,13 @@
-import type { RefObject } from 'react';
-/**
- * Hook to handle the click outside the referenced element
- *
- * @param ref - reference to the targeted element
- * @param closeWhenTagClicked - provided array of tag names in lowercase which will also close dropdown. Works if tag or first parent is clicked.
- * @param callback - callback
- */
-declare const useCloseOutsideOrElementClicked: ({ ref, closeWhenTagClicked }: {
-    ref: RefObject<Element>;
-    closeWhenTagClicked: string[];
-}, callback: () => void) => void;
-export default useCloseOutsideOrElementClicked;
+import type { RefObject } from 'react';
+/**
+ * Hook to handle the click outside the referenced element
+ *
+ * @param ref - reference to the targeted element
+ * @param closeWhenTagClicked - provided array of tag names in lowercase which will also close dropdown. Works if tag or first parent is clicked.
+ * @param callback - callback
+ */
+declare const useCloseOutsideOrElementClicked: ({ ref, closeWhenTagClicked }: {
+    ref: RefObject<Element>;
+    closeWhenTagClicked: string[];
+}, callback: () => void) => void;
+export default useCloseOutsideOrElementClicked;

package/build/cjs/hooks/useCloseOutsideOrElementClicked.js

@@ -4,35 +4,35 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 
-/**
- * Hook to handle the click outside the referenced element
- *
- * @param ref - reference to the targeted element
- * @param closeWhenTagClicked - provided array of tag names in lowercase which will also close dropdown. Works if tag or first parent is clicked.
- * @param callback - callback
- */
-const useCloseOutsideOrElementClicked = ({ ref, closeWhenTagClicked }, callback) => {
-    const handleClick = (e) => {
-        const target = e.target;
-        const parent = target.parentNode;
-        const isElementInList = closeWhenTagClicked.some(tag => {
-            var _a, _b, _c;
-            if (!target.parentNode) {
-                return tag === ((_a = target.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase());
-            }
-            return tag === ((_b = target.tagName) === null || _b === void 0 ? void 0 : _b.toLowerCase()) || tag === ((_c = parent.tagName) === null || _c === void 0 ? void 0 : _c.toLowerCase());
-        });
-        if ((ref.current && !ref.current.contains(target)) ||
-            (isElementInList && !target.dataset.noClose)) {
-            callback();
-        }
-    };
-    React.useEffect(() => {
-        document.addEventListener('click', handleClick);
-        return () => {
-            document.removeEventListener('click', handleClick);
-        };
-    });
+/**
+ * Hook to handle the click outside the referenced element
+ *
+ * @param ref - reference to the targeted element
+ * @param closeWhenTagClicked - provided array of tag names in lowercase which will also close dropdown. Works if tag or first parent is clicked.
+ * @param callback - callback
+ */
+const useCloseOutsideOrElementClicked = ({ ref, closeWhenTagClicked }, callback) => {
+    const handleClick = (e) => {
+        const target = e.target;
+        const parent = target.parentNode;
+        const isElementInList = closeWhenTagClicked.some(tag => {
+            var _a, _b, _c;
+            if (!target.parentNode) {
+                return tag === ((_a = target.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase());
+            }
+            return tag === ((_b = target.tagName) === null || _b === void 0 ? void 0 : _b.toLowerCase()) || tag === ((_c = parent.tagName) === null || _c === void 0 ? void 0 : _c.toLowerCase());
+        });
+        if ((ref.current && !ref.current.contains(target)) ||
+            (isElementInList && !target.dataset.noClose)) {
+            callback();
+        }
+    };
+    React.useEffect(() => {
+        document.addEventListener('click', handleClick);
+        return () => {
+            document.removeEventListener('click', handleClick);
+        };
+    });
 };
 
 exports["default"] = useCloseOutsideOrElementClicked;

package/build/cjs/hooks/useDebounce.d.ts

@@ -1,2 +1,2 @@
-declare const useDebounce: (callback: () => void, delay?: number) => () => void;
-export default useDebounce;
+declare const useDebounce: (callback: () => void, delay?: number) => () => void;
+export default useDebounce;

package/build/cjs/hooks/useDebounce.js

@@ -4,20 +4,20 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 
-const DEFAULT_DELAY = 400;
-const useDebounce = (
-// TODO: Eventually define generic type for function arguments if needed
-// callback: <T extends (...args: Parameters<T>) => void>(...args: T[]) => void,
-callback, delay = DEFAULT_DELAY) => {
-    const debounce = React.useRef();
-    return React.useCallback(() => {
-        if (debounce.current) {
-            clearTimeout(debounce.current);
-        }
-        debounce.current = setTimeout(() => {
-            callback();
-        }, delay);
-    }, [callback, delay]);
+const DEFAULT_DELAY = 400;
+const useDebounce = (
+// TODO: Eventually define generic type for function arguments if needed
+// callback: <T extends (...args: Parameters<T>) => void>(...args: T[]) => void,
+callback, delay = DEFAULT_DELAY) => {
+    const debounce = React.useRef();
+    return React.useCallback(() => {
+        if (debounce.current) {
+            clearTimeout(debounce.current);
+        }
+        debounce.current = setTimeout(() => {
+            callback();
+        }, delay);
+    }, [callback, delay]);
 };
 
 exports["default"] = useDebounce;

package/build/cjs/hooks/useDocHeight.d.ts

@@ -1,2 +1,2 @@
-declare const useDocHeight: () => void;
-export default useDocHeight;
+declare const useDocHeight: () => void;
+export default useDocHeight;

package/build/cjs/hooks/useDocHeight.js

@@ -5,21 +5,21 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var useDebounce = require('./useDebounce.js');
 
-const DEBOUNCE_DELAY = 100;
-const useDocHeight = () => {
-    const setDocHeight = React.useCallback(() => {
-        document.documentElement.style.setProperty('--vh100', `${window.innerHeight}px`);
-    }, []);
-    const debounceSetDocHeight = useDebounce["default"](setDocHeight, DEBOUNCE_DELAY);
-    React.useEffect(() => {
-        setDocHeight();
-        window.addEventListener('resize', debounceSetDocHeight);
-        window.addEventListener('orientationchange', debounceSetDocHeight);
-        return () => {
-            window.removeEventListener('resize', debounceSetDocHeight);
-            window.removeEventListener('orientationchange', debounceSetDocHeight);
-        };
-    }, [debounceSetDocHeight, setDocHeight]);
+const DEBOUNCE_DELAY = 100;
+const useDocHeight = () => {
+    const setDocHeight = React.useCallback(() => {
+        document.documentElement.style.setProperty('--vh100', `${window.innerHeight}px`);
+    }, []);
+    const debounceSetDocHeight = useDebounce["default"](setDocHeight, DEBOUNCE_DELAY);
+    React.useEffect(() => {
+        setDocHeight();
+        window.addEventListener('resize', debounceSetDocHeight);
+        window.addEventListener('orientationchange', debounceSetDocHeight);
+        return () => {
+            window.removeEventListener('resize', debounceSetDocHeight);
+            window.removeEventListener('orientationchange', debounceSetDocHeight);
+        };
+    }, [debounceSetDocHeight, setDocHeight]);
 };
 
 exports["default"] = useDocHeight;

package/build/cjs/hooks/useOutsideClick.d.ts

@@ -1,9 +1,9 @@
-import type { RefObject } from 'react';
-/**
- * Hook to handle the click outside the referenced element
- *
- * @param {RefObject<Element>} ref - reference to the targeted element
- * @param {Function} callback - callback
- */
-declare const useOutsideClick: (ref: RefObject<Element>, callback: () => void) => void;
-export default useOutsideClick;
+import type { RefObject } from 'react';
+/**
+ * Hook to handle the click outside the referenced element
+ *
+ * @param {RefObject<Element>} ref - reference to the targeted element
+ * @param {Function} callback - callback
+ */
+declare const useOutsideClick: (ref: RefObject<Element>, callback: () => void) => void;
+export default useOutsideClick;

package/build/cjs/hooks/useOutsideClick.js

@@ -4,24 +4,24 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 
-/**
- * Hook to handle the click outside the referenced element
- *
- * @param {RefObject<Element>} ref - reference to the targeted element
- * @param {Function} callback - callback
- */
-const useOutsideClick = (ref, callback) => {
-    const handleClick = (e) => {
-        if (ref.current && !ref.current.contains(e.target)) {
-            callback();
-        }
-    };
-    React.useEffect(() => {
-        document.addEventListener('click', handleClick);
-        return () => {
-            document.removeEventListener('click', handleClick);
-        };
-    });
+/**
+ * Hook to handle the click outside the referenced element
+ *
+ * @param {RefObject<Element>} ref - reference to the targeted element
+ * @param {Function} callback - callback
+ */
+const useOutsideClick = (ref, callback) => {
+    const handleClick = (e) => {
+        if (ref.current && !ref.current.contains(e.target)) {
+            callback();
+        }
+    };
+    React.useEffect(() => {
+        document.addEventListener('click', handleClick);
+        return () => {
+            document.removeEventListener('click', handleClick);
+        };
+    });
 };
 
 exports["default"] = useOutsideClick;

package/build/cjs/hooks/useResizeObserver.d.ts

@@ -1,7 +1,7 @@
-import type { RefObject } from 'react';
-declare const useResizeObserver: <T extends HTMLElement = HTMLElement>(ref?: RefObject<T> | undefined) => {
-    ref: RefObject<T> | undefined;
-    width: number;
-    height: number;
-};
-export default useResizeObserver;
+import type { RefObject } from 'react';
+declare const useResizeObserver: <T extends HTMLElement = HTMLElement>(ref?: RefObject<T> | undefined) => {
+    ref: RefObject<T> | undefined;
+    width: number;
+    height: number;
+};
+export default useResizeObserver;

package/build/cjs/hooks/useResizeObserver.js

@@ -4,34 +4,34 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 
-/**
- * Hook to get element dimensions when layout changes
- */
-const ResizeObserver = typeof window !== 'undefined' && window.ResizeObserver;
-const useResizeObserver = (ref) => {
-    const [size, setSize] = React.useState({ width: 0, height: 0 });
-    const resizeObserver = React.useRef(null);
-    const onResize = React.useCallback(entries => {
-        const { inlineSize, blockSize } = entries[0].borderBoxSize[0];
-        setSize({ width: inlineSize, height: blockSize });
-    }, []);
-    React.useEffect(() => {
-        if ((ref === null || ref === void 0 ? void 0 : ref.current) && ResizeObserver) {
-            if (resizeObserver.current) {
-                resizeObserver.current.disconnect();
-            }
-            resizeObserver.current = new ResizeObserver(onResize);
-            if (resizeObserver.current) {
-                resizeObserver.current.observe(ref.current);
-            }
-        }
-    }, [ref, onResize]);
-    React.useEffect(() => () => {
-        if (resizeObserver.current) {
-            resizeObserver.current.disconnect();
-        }
-    }, []);
-    return { ref, width: size.width, height: size.height };
+/**
+ * Hook to get element dimensions when layout changes
+ */
+const ResizeObserver = typeof window !== 'undefined' && window.ResizeObserver;
+const useResizeObserver = (ref) => {
+    const [size, setSize] = React.useState({ width: 0, height: 0 });
+    const resizeObserver = React.useRef(null);
+    const onResize = React.useCallback(entries => {
+        const { inlineSize, blockSize } = entries[0].borderBoxSize[0];
+        setSize({ width: inlineSize, height: blockSize });
+    }, []);
+    React.useEffect(() => {
+        if ((ref === null || ref === void 0 ? void 0 : ref.current) && ResizeObserver) {
+            if (resizeObserver.current) {
+                resizeObserver.current.disconnect();
+            }
+            resizeObserver.current = new ResizeObserver(onResize);
+            if (resizeObserver.current) {
+                resizeObserver.current.observe(ref.current);
+            }
+        }
+    }, [ref, onResize]);
+    React.useEffect(() => () => {
+        if (resizeObserver.current) {
+            resizeObserver.current.disconnect();
+        }
+    }, []);
+    return { ref, width: size.width, height: size.height };
 };
 
 exports["default"] = useResizeObserver;

package/build/cjs/hooks/useScrollPosition.d.ts

@@ -1,22 +1,22 @@
-import type { MutableRefObject } from 'react';
-/**
- * Hook to follow scroll position without rerendering the view.
- * Modified to ES6 and work with SSR (fixed window undefined error) and Rocket architecture from https://www.npmjs.com/package/@n8tb1t/use-scroll-position
- */
-interface ScrollPosition {
-    x: number;
-    y: number;
-}
-interface ScrollPositionProps {
-    prevPos: ScrollPosition;
-    currPos: ScrollPosition;
-}
-declare const useScrollPosition: {
-    (effect: ({ prevPos, currPos }: ScrollPositionProps) => void, element: MutableRefObject<Element> | undefined, useWindow: boolean, wait: number): void;
-    defaultProps: {
-        element: boolean;
-        useWindow: boolean;
-        wait: null;
-    };
-};
-export default useScrollPosition;
+import type { MutableRefObject } from 'react';
+/**
+ * Hook to follow scroll position without rerendering the view.
+ * Modified to ES6 and work with SSR (fixed window undefined error) and Rocket architecture from https://www.npmjs.com/package/@n8tb1t/use-scroll-position
+ */
+interface ScrollPosition {
+    x: number;
+    y: number;
+}
+interface ScrollPositionProps {
+    prevPos: ScrollPosition;
+    currPos: ScrollPosition;
+}
+declare const useScrollPosition: {
+    (effect: ({ prevPos, currPos }: ScrollPositionProps) => void, element: MutableRefObject<Element> | undefined, useWindow: boolean, wait: number): void;
+    defaultProps: {
+        element: boolean;
+        useWindow: boolean;
+        wait: null;
+    };
+};
+export default useScrollPosition;