@autoguru/overdrive 4.1.0 → 4.1.4

package/dist/components/OrderedList/OrderedList.css.js

@@ -1,10 +1,18 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+
+__vanilla_filescope__.setFileScope("lib/components/OrderedList/OrderedList.css.ts", "@autoguru/overdrive");
+
 import { styleVariants } from '@vanilla-extract/css';
-import { vars } from '../../themes/base/vars.css';
+import { vars } from "../../themes/base/vars.css.js";
 export const root = styleVariants({
-    default: {
-        listStyle: 'outside lower-roman',
-    },
-    firstOccurrence: {
-        paddingLeft: `calc(${vars.space['6']} * 2)`,
-    },
-});
+  default: {
+    listStyle: 'outside lower-roman'
+  },
+  firstOccurrence: {
+    paddingLeft: "calc(".concat(vars.space['6'], " * 2)")
+  }
+}, "root");
+
+__vanilla_filescope__.endFileScope();

package/dist/components/OrderedList/OrderedList.js

@@ -1,30 +1,64 @@
+"use strict";
+
 import clsx from 'clsx';
 import * as React from 'react';
-import { createContext, useContext, } from 'react';
-import { Box } from '../Box';
-import { Stack } from '../Stack';
-import { useTextStyles } from '../Text';
-import * as styles from './OrderedList.css';
-const cycles = [
-    'decimal',
-    'lower-roman',
-    'lower-alpha',
-    'upper-alpha',
-    'lower-roman',
-];
+import { createContext, useContext } from 'react';
+import { Box } from "../Box/index.js";
+import { Stack } from "../Stack/index.js";
+import { useTextStyles } from "../Text/index.js";
+import * as styles from "./OrderedList.css.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const cycles = ['decimal', 'lower-roman', 'lower-alpha', 'upper-alpha', 'lower-roman'];
 const OrderedListContext = createContext(-1);
-export const OrderedList = ({ children, className = '', type = null, start }) => {
-    const cycle = useContext(OrderedListContext);
-    let myCycle;
-    if (cycle + 1 > cycles.length) {
-        myCycle = type === null ? 0 : cycles.indexOf(type);
-    }
-    else {
-        myCycle = type === null ? cycle + 1 : cycles.indexOf(type);
-    }
-    return (React.createElement(Box, { is: "ol", paddingLeft: "6", marginTop: myCycle > 0 ? '2' : 'none', className: clsx(styles.root.default, useTextStyles({ colour: 'dark' }), { [styles.root.firstOccurrence]: cycle === -1 }, className), style: { listStyleType: cycles[myCycle] }, start: start },
-        React.createElement(OrderedListContext.Provider, { value: myCycle },
-            React.createElement(Stack, { space: "2" }, children))));
+export const OrderedList = _ref => {
+  let {
+    children,
+    className = '',
+    type = null,
+    start
+  } = _ref;
+  const cycle = useContext(OrderedListContext);
+  let myCycle;
+
+  if (cycle + 1 > cycles.length) {
+    myCycle = type === null ? 0 : cycles.indexOf(type);
+  } else {
+    myCycle = type === null ? cycle + 1 : cycles.indexOf(type);
+  }
+
+  return _jsx(Box, {
+    is: "ol",
+    paddingLeft: "6",
+    marginTop: myCycle > 0 ? '2' : 'none',
+    className: clsx(styles.root.default, useTextStyles({
+      colour: 'dark'
+    }), {
+      [styles.root.firstOccurrence]: cycle === -1
+    }, className),
+    style: {
+      listStyleType: cycles[myCycle]
+    },
+    start: start,
+    children: _jsx(OrderedListContext.Provider, {
+      value: myCycle,
+      children: _jsx(Stack, {
+        space: "2",
+        children: children
+      })
+    })
+  });
 };
-const Item = ({ className = '', children }) => (React.createElement(Box, { is: "li", className: className }, children));
-OrderedList.Item = Item;
+
+const Item = _ref2 => {
+  let {
+    className = '',
+    children
+  } = _ref2;
+  return _jsx(Box, {
+    is: "li",
+    className: className,
+    children: children
+  });
+};
+
+OrderedList.Item = Item;

package/dist/components/OrderedList/index.js

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

package/dist/components/OutsideClick/OutsideClick.js

@@ -1,40 +1,45 @@
+"use strict";
+
 import { warning } from '@autoguru/utilities';
-import { Children, cloneElement, useEffect, useRef, } from 'react';
-import { noop } from '../../utils';
+import { Children, cloneElement, useEffect, useRef } from 'react';
+import { noop } from "../../utils/index.js";
 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?.contains(event.target));
-            if (shouldClose) {
-                callbackRef.current();
-            }
-        });
-    }, [refs]);
-};
-const bindEvent = (node, event, callback) => {
-    node.addEventListener(event, callback, {
-        passive: true,
+  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();
+      }
     });
-    return () => {
-        node.removeEventListener(event, callback);
-    };
+  }, [refs]);
 };
-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,
-    });
+
+const bindEvent = (node, event, callback) => {
+  node.addEventListener(event, callback, {
+    passive: true
+  });
+  return () => {
+    node.removeEventListener(event, callback);
+  };
 };
+
+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.js

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

package/dist/components/OverdriveProvider/OverdriveProvider.js

@@ -1,20 +1,36 @@
+"use strict";
+
 import * as React from 'react';
 import { useEffect } from 'react';
-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));
-};
+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
+  });
+};

package/dist/components/OverdriveProvider/index.js

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

package/dist/components/Pagination/Bubble.js

@@ -1,21 +1,43 @@
+"use strict";
+
 import clsx from 'clsx';
 import * as React from 'react';
-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));
-};
+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
+  });
+};

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

@@ -1,26 +1,34 @@
+"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';
+import { vars } from "../../themes/base/vars.css.js";
 const paginationBubbleSize = '36px';
 export const disabled = style({
-    color: vars.colours.background.neutral,
-});
+  color: vars.colours.background.neutral
+}, "disabled");
 export const selectedItem = style({
-    transition: 'none',
-});
+  transition: 'none'
+}, "selectedItem");
 export const activeItem = style({
-    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']}`,
-        },
+  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'])
     },
-});
+    ["&: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.js

@@ -1,87 +1,182 @@
+"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';
-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 }));
+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
+    })
+  });
 };
+
+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;
-        }
-        if (num === gapIndex) {
-            return -1;
-        }
-        return numPages - 4 + index;
-    });
-}
-function buildPagesList(numPages, activePage, numPagesDisplayed, rightBoundary) {
-    if (numPages <= numPagesDisplayed) {
-        return generateDefaultArray(numPages);
+  return generateDefaultArray(numPagesDisplayed).map((_, index) => {
+    const num = index + 1;
+    const gapIndex = 2;
+
+    if (num === 1) {
+      return 1;
     }
-    if (activePage <= rightBoundary) {
-        return generateJumpForwardArray(numPages, activePage, numPagesDisplayed);
+
+    if (num === gapIndex) {
+      return -1;
     }
-    if (activePage > rightBoundary && activePage <= rightBoundary + 2) {
-        return generateNoJumpArray(numPagesDisplayed, rightBoundary);
-    }
-    return generateJumpBackwardArray(numPages, numPagesDisplayed);
+
+    return numPages - 4 + index;
+  });
 }
+
+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.js

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