@autoguru/overdrive 4.3.4 → 4.3.5

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

@@ -0,0 +1,2 @@
+export { OrderedList } from './OrderedList';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/OrderedList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/OrderedList/index.js

@@ -1,3 +1 @@
-"use strict";
-
-export { OrderedList } from "./OrderedList.js";
+export { OrderedList } from './OrderedList';

package/dist/components/OutsideClick/OutsideClick.d.ts

@@ -0,0 +1,8 @@
+import { FunctionComponent, ReactElement, RefObject } from 'react';
+export declare const useOutsideClick: (refs: Array<RefObject<HTMLElement>>, onClickAway: () => void) => void;
+export interface Props {
+    children: ReactElement;
+    onOutsideClick?(): void;
+}
+export declare const OutsideClick: FunctionComponent<Props>;
+//# sourceMappingURL=OutsideClick.d.ts.map

package/dist/components/OutsideClick/OutsideClick.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OutsideClick.d.ts","sourceRoot":"","sources":["../../../lib/components/OutsideClick/OutsideClick.tsx"],"names":[],"mappings":"AACA,OAAO,EAGN,iBAAiB,EACjB,YAAY,EACZ,SAAS,EAGT,MAAM,OAAO,CAAC;AAIf,eAAO,MAAM,eAAe,SACrB,MAAM,UAAU,WAAW,CAAC,CAAC,eACtB,MAAM,IAAI,SA6BvB,CAAC;AAmBF,MAAM,WAAW,KAAK;IACrB,QAAQ,EAAE,YAAY,CAAC;IAEvB,cAAc,CAAC,IAAI,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,YAAY,EAAE,iBAAiB,CAAC,KAAK,CAmBjD,CAAC"}

package/dist/components/OutsideClick/OutsideClick.js

@@ -1,45 +1,40 @@
-"use strict";
-
 import { warning } from '@autoguru/utilities';
-import { Children, cloneElement, useEffect, useRef } from 'react';
-import { noop } from "../../utils/index.js";
+import { Children, cloneElement, useEffect, useRef, } from 'react';
+import { noop } from '../../utils';
 export const useOutsideClick = (refs, onClickAway) => {
-  const callbackRef = useRef(onClickAway);
-  useEffect(() => {
-    callbackRef.current = onClickAway;
-  }, [onClickAway]);
-  useEffect(() => {
-    if (typeof document === 'undefined' || typeof onClickAway !== 'function') return undefined;
-    return bindEvent(document, 'mouseup', event => {
-      const shouldClose = refs.map(item => item.current).every(element => !(element !== null && element !== void 0 && element.contains(event.target)));
-
-      if (shouldClose) {
-        callbackRef.current();
-      }
-    });
-  }, [refs]);
+    const callbackRef = useRef(onClickAway);
+    useEffect(() => {
+        callbackRef.current = onClickAway;
+    }, [onClickAway]);
+    useEffect(() => {
+        if (typeof document === 'undefined' ||
+            typeof onClickAway !== 'function')
+            return undefined;
+        return bindEvent(document, 'mouseup', (event) => {
+            const shouldClose = refs
+                .map((item) => item.current)
+                .every((element) => !element?.contains(event.target));
+            if (shouldClose) {
+                callbackRef.current();
+            }
+        });
+    }, [refs]);
 };
-
 const bindEvent = (node, event, callback) => {
-  node.addEventListener(event, callback, {
-    passive: true
-  });
-  return () => {
-    node.removeEventListener(event, callback);
-  };
+    node.addEventListener(event, callback, {
+        passive: true,
+    });
+    return () => {
+        node.removeEventListener(event, callback);
+    };
+};
+export const OutsideClick = ({ children, onOutsideClick = noop, }) => {
+    const child = Children.only(children);
+    const rootClickRef = useRef(null);
+    const hasRef = Object.prototype.hasOwnProperty.call(child.props, 'ref');
+    warning(!hasRef, 'This component overrides the child ref, use with caution.');
+    useOutsideClick([rootClickRef], onOutsideClick);
+    return cloneElement(child, {
+        ref: rootClickRef,
+    });
 };
-
-export const OutsideClick = _ref => {
-  let {
-    children,
-    onOutsideClick = noop
-  } = _ref;
-  const child = Children.only(children);
-  const rootClickRef = useRef(null);
-  const hasRef = Object.prototype.hasOwnProperty.call(child.props, 'ref');
-  process.env.NODE_ENV !== "production" ? warning(!hasRef, 'This component overrides the child ref, use with caution.') : void 0;
-  useOutsideClick([rootClickRef], onOutsideClick);
-  return cloneElement(child, {
-    ref: rootClickRef
-  });
-};

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

@@ -0,0 +1,2 @@
+export { useOutsideClick, OutsideClick } from './OutsideClick';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/OutsideClick/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/OutsideClick/index.js

@@ -1,3 +1 @@
-"use strict";
-
-export { useOutsideClick, OutsideClick } from "./OutsideClick.js";
+export { useOutsideClick, OutsideClick } from './OutsideClick';

package/dist/components/OverdriveProvider/OverdriveProvider.d.ts

@@ -0,0 +1,8 @@
+import { ComponentProps, FunctionComponent, ReactNode } from 'react';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
+export interface Props extends ComponentProps<typeof ThemeProvider> {
+    noBodyLevelTheming: boolean;
+    children?: ReactNode;
+}
+export declare const OverdriveProvider: FunctionComponent<Props>;
+//# sourceMappingURL=OverdriveProvider.d.ts.map

package/dist/components/OverdriveProvider/OverdriveProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverdriveProvider.d.ts","sourceRoot":"","sources":["../../../lib/components/OverdriveProvider/OverdriveProvider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAGhF,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAE/D,MAAM,WAAW,KAAM,SAAQ,cAAc,CAAC,OAAO,aAAa,CAAC;IAIlE,kBAAkB,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,KAAK,CA8BtD,CAAC"}

package/dist/components/OverdriveProvider/OverdriveProvider.js

@@ -1,36 +1,20 @@
-"use strict";
-
 import * as React from 'react';
 import { useEffect } from 'react';
-import { isBrowser } from "../../utils/index.js";
-import { ThemeProvider } from "../ThemeProvider/ThemeProvider.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export const OverdriveProvider = _ref => {
-  let {
-    noBodyLevelTheming = false,
-    vars,
-    themeClass,
-    tokens,
-    breakpoints,
-    children
-  } = _ref;
-  useEffect(() => {
-    if (!isBrowser) return;
-
-    if (!noBodyLevelTheming) {
-      document.body.classList.add(themeClass);
-      document.body.style.backgroundColor = vars.body.backgroundColour;
-      document.body.style.color = vars.body.colour;
-    } else {
-      document.body.style.backgroundColor = tokens.body.backgroundColour;
-      document.body.style.color = tokens.body.colour;
-    }
-  }, [vars]);
-  return _jsx(ThemeProvider, {
-    vars: vars,
-    themeClass: themeClass,
-    tokens: tokens,
-    breakpoints: breakpoints,
-    children: children
-  });
-};
+import { isBrowser } from '../../utils';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
+export const OverdriveProvider = ({ noBodyLevelTheming = false, vars, themeClass, tokens, breakpoints, children, }) => {
+    useEffect(() => {
+        if (!isBrowser)
+            return;
+        if (!noBodyLevelTheming) {
+            document.body.classList.add(themeClass);
+            document.body.style.backgroundColor = vars.body.backgroundColour;
+            document.body.style.color = vars.body.colour;
+        }
+        else {
+            document.body.style.backgroundColor = tokens.body.backgroundColour;
+            document.body.style.color = tokens.body.colour;
+        }
+    }, [vars]);
+    return (React.createElement(ThemeProvider, { vars: vars, themeClass: themeClass, tokens: tokens, breakpoints: breakpoints }, children));
+};

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

@@ -0,0 +1,2 @@
+export { OverdriveProvider } from './OverdriveProvider';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/OverdriveProvider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/components/OverdriveProvider/index.js

@@ -1,3 +1 @@
-"use strict";
-
-export { OverdriveProvider } from "./OverdriveProvider.js";
+export { OverdriveProvider } from './OverdriveProvider';

package/dist/components/Pagination/Bubble.d.ts

@@ -0,0 +1,12 @@
+import type { FunctionComponent, MouseEventHandler } from 'react';
+import { ReactNode } from 'react';
+export interface Props {
+    selected?: boolean;
+    disabled?: boolean;
+    gap?: boolean;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    className?: string;
+    children: ReactNode;
+}
+export declare const Bubble: FunctionComponent<Props>;
+//# sourceMappingURL=Bubble.d.ts.map

package/dist/components/Pagination/Bubble.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Bubble.d.ts","sourceRoot":"","sources":["../../../lib/components/Pagination/Bubble.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEX,iBAAiB,EACjB,iBAAiB,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOlC,MAAM,WAAW,KAAK;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACpB;AAED,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,KAAK,CAyC3C,CAAC"}

package/dist/components/Pagination/Bubble.js

@@ -1,43 +1,21 @@
-"use strict";
-
 import clsx from 'clsx';
 import * as React from 'react';
-import { Box } from "../Box/index.js";
-import { useTextStyles } from "../Text/index.js";
-import * as styles from "./Pagination.css.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export const Bubble = _ref => {
-  let {
-    className = '',
-    selected = false,
-    gap = false,
-    children,
-    disabled,
-    onClick
-  } = _ref;
-  let backgroundColour = 'transparent';
-  if (selected) backgroundColour = 'green900';else if (disabled) backgroundColour = 'gray200';
-  return _jsx(Box, {
-    is: "button",
-    backgroundColour: backgroundColour,
-    display: "flex",
-    overflow: "hidden",
-    alignItems: "center",
-    flexDirection: "row",
-    justifyContent: "center",
-    textAlign: "center",
-    borderRadius: "pill",
-    pointerEvents: disabled ? 'none' : void 0,
-    className: clsx(className, useTextStyles({
-      fontWeight: 'bold',
-      colour: selected ? 'white' : 'light',
-      size: '3'
-    }), {
-      [styles.selectedItem]: selected,
-      [styles.disabled]: gap,
-      [styles.activeItem]: !gap
-    }),
-    onClick: onClick,
-    children: gap ? '...' : children
-  });
-};
+import { Box } from '../Box';
+import { useTextStyles } from '../Text';
+import * as styles from './Pagination.css';
+export const Bubble = ({ className = '', selected = false, gap = false, children, disabled, onClick, }) => {
+    let backgroundColour = 'transparent';
+    if (selected)
+        backgroundColour = 'green900';
+    else if (disabled)
+        backgroundColour = 'gray200';
+    return (React.createElement(Box, { is: "button", backgroundColour: backgroundColour, display: "flex", overflow: "hidden", alignItems: "center", flexDirection: "row", justifyContent: "center", textAlign: "center", borderRadius: "pill", pointerEvents: disabled ? 'none' : void 0, className: clsx(className, useTextStyles({
+            fontWeight: 'bold',
+            colour: selected ? 'white' : 'light',
+            size: '3',
+        }), {
+            [styles.selectedItem]: selected,
+            [styles.disabled]: gap,
+            [styles.activeItem]: !gap,
+        }), onClick: onClick }, gap ? '...' : children));
+};

package/dist/components/Pagination/Pagination.css.d.ts

@@ -0,0 +1,4 @@
+export declare const disabled: string;
+export declare const selectedItem: string;
+export declare const activeItem: string;
+//# sourceMappingURL=Pagination.css.d.ts.map

package/dist/components/Pagination/Pagination.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Pagination/Pagination.css.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,QAAQ,QAEnB,CAAC;AAEH,eAAO,MAAM,YAAY,QAEvB,CAAC;AAEH,eAAO,MAAM,UAAU,QAiBrB,CAAC"}

package/dist/components/Pagination/Pagination.css.js

@@ -1,34 +1,26 @@
-"use strict";
-
-import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
-
-__vanilla_filescope__.setFileScope("lib/components/Pagination/Pagination.css.ts", "@autoguru/overdrive");
-
 import { style } from '@vanilla-extract/css';
-import { vars } from "../../themes/base/vars.css.js";
+import { vars } from '../../themes/base/vars.css';
 const paginationBubbleSize = '36px';
 export const disabled = style({
-  color: vars.colours.background.neutral
-}, "disabled");
+    color: vars.colours.background.neutral,
+});
 export const selectedItem = style({
-  transition: 'none'
-}, "selectedItem");
+    transition: 'none',
+});
 export const activeItem = style({
-  lineHeight: "calc(".concat(paginationBubbleSize, " - 3px)"),
-  width: paginationBubbleSize,
-  height: paginationBubbleSize,
-  cursor: 'pointer',
-  transition: "background-color 0.2s ".concat(vars.animation.easing.decelerate, " 0s, box-shadow 0.2s ").concat(vars.animation.easing.decelerate, " 0s"),
-  selectors: {
-    ["&:not(".concat(selectedItem, "):hover")]: {
-      backgroundColor: vars.colours.background.body,
-      boxShadow: "inset 0 0 0 1px ".concat(vars.colours.intent.primary.background.strong, ", ").concat(vars.elevation['1'])
+    lineHeight: `calc(${paginationBubbleSize} - 3px)`,
+    width: paginationBubbleSize,
+    height: paginationBubbleSize,
+    cursor: 'pointer',
+    transition: `background-color 0.2s ${vars.animation.easing.decelerate} 0s, box-shadow 0.2s ${vars.animation.easing.decelerate} 0s`,
+    selectors: {
+        [`&:not(${selectedItem}):hover`]: {
+            backgroundColor: vars.colours.background.body,
+            boxShadow: `inset 0 0 0 1px ${vars.colours.intent.primary.background.strong}, ${vars.elevation['1']}`,
+        },
+        [`&:not(${selectedItem}):active`]: {
+            backgroundColor: vars.colours.background.body,
+            boxShadow: `inset 0 0 0 1px ${vars.colours.intent.primary.background.strong}, ${vars.elevation['1']}`,
+        },
     },
-    ["&:not(".concat(selectedItem, "):active")]: {
-      backgroundColor: vars.colours.background.body,
-      boxShadow: "inset 0 0 0 1px ".concat(vars.colours.intent.primary.background.strong, ", ").concat(vars.elevation['1'])
-    }
-  }
-}, "activeItem");
-
-__vanilla_filescope__.endFileScope();
+});

package/dist/components/Pagination/Pagination.d.ts

@@ -0,0 +1,16 @@
+import { FunctionComponent } from 'react';
+interface OnChangeObject {
+    pageNumber: number;
+}
+export declare type TOnChangeEventHandler = (event: OnChangeObject) => void;
+export interface Props {
+    numPagesDisplayed?: number;
+    activePage: number;
+    total: number;
+    pageSize: number;
+    loading?: boolean;
+    onChange?: TOnChangeEventHandler;
+}
+export declare const Pagination: FunctionComponent<Props>;
+export {};
+//# sourceMappingURL=Pagination.d.ts.map

package/dist/components/Pagination/Pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../lib/components/Pagination/Pagination.tsx"],"names":[],"mappings":"AAGA,OAAO,EACN,iBAAiB,EAIjB,MAAM,OAAO,CAAC;AAWf,UAAU,cAAc;IACvB,UAAU,EAAE,MAAM,CAAC;CACnB;AAED,oBAAY,qBAAqB,GAAG,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;AAEpE,MAAM,WAAW,KAAK;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,qBAAqB,CAAC;CACjC;AA8DD,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,KAAK,CA2D/C,CAAC"}

package/dist/components/Pagination/Pagination.js

@@ -1,182 +1,87 @@
-"use strict";
-
 import { ChevronLeftIcon, ChevronRightIcon } from '@autoguru/icons';
 import clsx from 'clsx';
 import * as React from 'react';
-import { useCallback, useMemo } from 'react';
-import { noop } from "../../utils/index.js";
-import { Box } from "../Box/index.js";
-import { Icon } from "../Icon/index.js";
-import { Inline } from "../Inline/index.js";
-import { useTextStyles } from "../Text/index.js";
-import { Bubble } from "./Bubble.js";
-import * as styles from "./Pagination.css.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-
-const NavButton = _ref => {
-  let {
-    icon,
-    disabled,
-    label = '',
-    onClick = noop
-  } = _ref;
-  return _jsx(Box, {
-    is: "button",
-    "aria-disabled": disabled,
-    "aria-label": label,
-    display: "flex",
-    overflow: "hidden",
-    alignItems: "center",
-    flexDirection: "row",
-    justifyContent: "center",
-    textAlign: "center",
-    borderRadius: "pill",
-    padding: "2",
-    userSelect: "none",
-    pointerEvents: disabled ? 'none' : void 0,
-    className: clsx(useTextStyles({
-      colour: 'light'
-    }), {
-      [styles.disabled]: disabled
-    }),
-    onClick: onClick,
-    children: _jsx(Icon, {
-      size: "medium",
-      icon: icon
-    })
-  });
+import { useCallback, useMemo, } from 'react';
+import { noop } from '../../utils';
+import { Box } from '../Box';
+import { Icon } from '../Icon';
+import { Inline } from '../Inline';
+import { useTextStyles } from '../Text';
+import { Bubble } from './Bubble';
+import * as styles from './Pagination.css';
+const NavButton = ({ icon, disabled, label = '', onClick = noop, }) => (React.createElement(Box, { is: "button", "aria-disabled": disabled, "aria-label": label, display: "flex", overflow: "hidden", alignItems: "center", flexDirection: "row", justifyContent: "center", textAlign: "center", borderRadius: "pill", padding: "2", userSelect: "none", pointerEvents: disabled ? 'none' : void 0, className: clsx(useTextStyles({ colour: 'light' }), {
+        [styles.disabled]: disabled,
+    }), onClick: onClick },
+    React.createElement(Icon, { size: "medium", icon: icon })));
+const Loading = ({ placeholderBubblesNum = 3, }) => (React.createElement(Inline, { is: "span", space: "3" },
+    React.createElement(NavButton, { disabled: true, icon: ChevronLeftIcon }),
+    Array.from({ length: placeholderBubblesNum })
+        .fill('')
+        .map((_, index) => (React.createElement(Bubble, { key: index, children: "", disabled: true, className: styles.disabled }))),
+    React.createElement(NavButton, { disabled: true, icon: ChevronRightIcon })));
+export const Pagination = ({ total, pageSize, activePage, numPagesDisplayed = 5, loading = false, onChange = noop, }) => {
+    const numPages = useMemo(() => calcPagesNum(total, pageSize), [
+        total,
+        pageSize,
+    ]);
+    const handleClick = useCallback((num) => () => {
+        onChange({ pageNumber: withinBoundaries(num, numPages) });
+    }, [numPages]);
+    const allowedActive = useMemo(() => withinBoundaries(activePage, numPages), [activePage, numPages]);
+    return !loading && total && pageSize && activePage && numPagesDisplayed ? (React.createElement(Inline, { is: "nav", space: "3", "aria-label": "pagination" },
+        React.createElement(NavButton, { disabled: activePage <= 1, label: "navigate back", icon: ChevronLeftIcon, onClick: handleClick(activePage - 1) }),
+        buildPagesList(numPages, allowedActive, numPagesDisplayed, numPages - numPagesDisplayed).map((num) => (React.createElement(Bubble, { key: num, gap: num < 0, selected: allowedActive === num, "aria-current": allowedActive === num ? 'page' : 'false', onClick: handleClick(num) }, num))),
+        React.createElement(NavButton, { disabled: activePage >= numPages, label: "navigate forward", icon: ChevronRightIcon, onClick: handleClick(allowedActive + 1) }))) : (React.createElement(Loading, { placeholderBubblesNum: 3 }));
 };
-
-const Loading = _ref2 => {
-  let {
-    placeholderBubblesNum = 3
-  } = _ref2;
-  return _jsxs(Inline, {
-    is: "span",
-    space: "3",
-    children: [_jsx(NavButton, {
-      disabled: true,
-      icon: ChevronLeftIcon
-    }), Array.from({
-      length: placeholderBubblesNum
-    }).fill('').map((_, index) => _jsx(Bubble, {
-      children: "",
-      disabled: true,
-      className: styles.disabled
-    }, index)), _jsx(NavButton, {
-      disabled: true,
-      icon: ChevronRightIcon
-    })]
-  });
-};
-
-export const Pagination = _ref3 => {
-  let {
-    total,
-    pageSize,
-    activePage,
-    numPagesDisplayed = 5,
-    loading = false,
-    onChange = noop
-  } = _ref3;
-  const numPages = useMemo(() => calcPagesNum(total, pageSize), [total, pageSize]);
-  const handleClick = useCallback(num => () => {
-    onChange({
-      pageNumber: withinBoundaries(num, numPages)
-    });
-  }, [numPages]);
-  const allowedActive = useMemo(() => withinBoundaries(activePage, numPages), [activePage, numPages]);
-  return !loading && total && pageSize && activePage && numPagesDisplayed ? _jsxs(Inline, {
-    is: "nav",
-    space: "3",
-    "aria-label": "pagination",
-    children: [_jsx(NavButton, {
-      disabled: activePage <= 1,
-      label: "navigate back",
-      icon: ChevronLeftIcon,
-      onClick: handleClick(activePage - 1)
-    }), buildPagesList(numPages, allowedActive, numPagesDisplayed, numPages - numPagesDisplayed).map(num => _jsx(Bubble, {
-      gap: num < 0,
-      selected: allowedActive === num,
-      "aria-current": allowedActive === num ? 'page' : 'false',
-      onClick: handleClick(num),
-      children: num
-    }, num)), _jsx(NavButton, {
-      disabled: activePage >= numPages,
-      label: "navigate forward",
-      icon: ChevronRightIcon,
-      onClick: handleClick(allowedActive + 1)
-    })]
-  }) : _jsx(Loading, {
-    placeholderBubblesNum: 3
-  });
-};
-
 function calcPagesNum(total, pageSize) {
-  return Math.ceil(total / pageSize);
+    return Math.ceil(total / pageSize);
 }
-
 function withinBoundaries(activePage, numPages) {
-  return Math.min(Math.max(1, activePage), numPages);
+    return Math.min(Math.max(1, activePage), numPages);
 }
-
 function generateDefaultArray(numPages) {
-  return Array.from({
-    length: numPages
-  }).fill(-1).map((_, index) => index + 1);
+    return Array.from({ length: numPages })
+        .fill(-1)
+        .map((_, index) => index + 1);
 }
-
 function generateJumpForwardArray(numPages, activePage, numPagesDisplayed) {
-  return generateDefaultArray(numPagesDisplayed).map((_, index) => {
-    const num = index + 1;
-    const gapIndex = numPagesDisplayed - 1;
-
-    if (num < gapIndex) {
-      return activePage + index;
-    }
-
-    if (num === gapIndex) {
-      return -1;
-    }
-
-    return numPages;
-  });
+    return generateDefaultArray(numPagesDisplayed).map((_, index) => {
+        const num = index + 1;
+        const gapIndex = numPagesDisplayed - 1;
+        if (num < gapIndex) {
+            return activePage + index;
+        }
+        if (num === gapIndex) {
+            return -1;
+        }
+        return numPages;
+    });
 }
-
 function generateNoJumpArray(numPagesDisplayed, rightBoundary) {
-  return generateDefaultArray(numPagesDisplayed).map((_, index) => rightBoundary + index + 1);
+    return generateDefaultArray(numPagesDisplayed).map((_, index) => rightBoundary + index + 1);
 }
-
 function generateJumpBackwardArray(numPages, numPagesDisplayed) {
-  return generateDefaultArray(numPagesDisplayed).map((_, index) => {
-    const num = index + 1;
-    const gapIndex = 2;
-
-    if (num === 1) {
-      return 1;
+    return generateDefaultArray(numPagesDisplayed).map((_, index) => {
+        const num = index + 1;
+        const gapIndex = 2;
+        if (num === 1) {
+            return 1;
+        }
+        if (num === gapIndex) {
+            return -1;
+        }
+        return numPages - 4 + index;
+    });
+}
+function buildPagesList(numPages, activePage, numPagesDisplayed, rightBoundary) {
+    if (numPages <= numPagesDisplayed) {
+        return generateDefaultArray(numPages);
     }
-
-    if (num === gapIndex) {
-      return -1;
+    if (activePage <= rightBoundary) {
+        return generateJumpForwardArray(numPages, activePage, numPagesDisplayed);
     }
-
-    return numPages - 4 + index;
-  });
+    if (activePage > rightBoundary && activePage <= rightBoundary + 2) {
+        return generateNoJumpArray(numPagesDisplayed, rightBoundary);
+    }
+    return generateJumpBackwardArray(numPages, numPagesDisplayed);
 }
-
-function buildPagesList(numPages, activePage, numPagesDisplayed, rightBoundary) {
-  if (numPages <= numPagesDisplayed) {
-    return generateDefaultArray(numPages);
-  }
-
-  if (activePage <= rightBoundary) {
-    return generateJumpForwardArray(numPages, activePage, numPagesDisplayed);
-  }
-
-  if (activePage > rightBoundary && activePage <= rightBoundary + 2) {
-    return generateNoJumpArray(numPagesDisplayed, rightBoundary);
-  }
-
-  return generateJumpBackwardArray(numPages, numPagesDisplayed);
-}

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

@@ -0,0 +1,2 @@
+export { Pagination } from './Pagination';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/Pagination/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/Pagination/index.js

@@ -1,3 +1 @@
-"use strict";
-
-export { Pagination } from "./Pagination.js";
+export { Pagination } from './Pagination';