@autoguru/overdrive 3.0.0-next.8 → 4.0.2

package/dist/components/OrderedList/OrderedList.js

@@ -1,51 +1,30 @@
-"use strict";
-
 import clsx from 'clsx';
 import * as React from 'react';
-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";
-const cycles = ['decimal', 'lower-roman', 'lower-alpha', 'upper-alpha', 'lower-roman'];
+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',
+];
 const OrderedListContext = createContext(-1);
-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 <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}>
-			<OrderedListContext.Provider value={myCycle}>
-				<Stack space="2">{children}</Stack>
-			</OrderedListContext.Provider>
-		</Box>;
+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))));
 };
-
-const Item = _ref2 => {
-  let {
-    className = '',
-    children
-  } = _ref2;
-  return <Box is="li" className={className}>
-		{children}
-	</Box>;
-};
-
-OrderedList.Item = Item;
+const Item = ({ className = '', children }) => (React.createElement(Box, { is: "li", className: className }, children));
+OrderedList.Item = Item;

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/OrderedList/stories.js

@@ -1,45 +1,63 @@
 "use strict";
 
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 import * as React from 'react';
 import { Text } from "../Text/index.js";
 import { OrderedList } from "./index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 export default {
   title: 'Foundation/List/OrderedList',
   component: OrderedList
 };
 
-const Template = args => <OrderedList {...args}>
-		<OrderedList.Item>
-			<Text>Strawberry</Text>
-		</OrderedList.Item>
-		<OrderedList.Item>
-			<Text>Watermelon</Text>
-			<OrderedList>
-				<OrderedList.Item>
-					<Text>Mango</Text>
-				</OrderedList.Item>
-				<OrderedList.Item>
-					<Text>Banana</Text>
-				</OrderedList.Item>
-				<OrderedList.Item>
-					<Text>Apple</Text>
-					<OrderedList>
-						<OrderedList.Item>
-							<Text>Grape</Text>
-						</OrderedList.Item>
-						<OrderedList.Item>
-							<Text>Orange</Text>
-						</OrderedList.Item>
-					</OrderedList>
-				</OrderedList.Item>
-				<OrderedList.Item>
-					<Text>Pineapple</Text>
-				</OrderedList.Item>
-			</OrderedList>
-		</OrderedList.Item>
-		<OrderedList.Item>
-			<Text>Pear</Text>
-		</OrderedList.Item>
-	</OrderedList>;
+const Template = args => _jsxs(OrderedList, _objectSpread(_objectSpread({}, args), {}, {
+  children: [_jsx(OrderedList.Item, {
+    children: _jsx(Text, {
+      children: "Strawberry"
+    })
+  }), _jsxs(OrderedList.Item, {
+    children: [_jsx(Text, {
+      children: "Watermelon"
+    }), _jsxs(OrderedList, {
+      children: [_jsx(OrderedList.Item, {
+        children: _jsx(Text, {
+          children: "Mango"
+        })
+      }), _jsx(OrderedList.Item, {
+        children: _jsx(Text, {
+          children: "Banana"
+        })
+      }), _jsxs(OrderedList.Item, {
+        children: [_jsx(Text, {
+          children: "Apple"
+        }), _jsxs(OrderedList, {
+          children: [_jsx(OrderedList.Item, {
+            children: _jsx(Text, {
+              children: "Grape"
+            })
+          }), _jsx(OrderedList.Item, {
+            children: _jsx(Text, {
+              children: "Orange"
+            })
+          })]
+        })]
+      }), _jsx(OrderedList.Item, {
+        children: _jsx(Text, {
+          children: "Pineapple"
+        })
+      })]
+    })]
+  }), _jsx(OrderedList.Item, {
+    children: _jsx(Text, {
+      children: "Pear"
+    })
+  })]
+}));
 
 export const standard = Template.bind({});

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/OutsideClick/stories.js

@@ -1,9 +1,16 @@
 "use strict";
 
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 import { action } from '@storybook/addon-actions';
 import * as React from 'react';
 import { Button } from "../Button/index.js";
 import { OutsideClick } from "./index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 export default {
   title: 'Utility/OutsideClick',
   component: OutsideClick,
@@ -21,9 +28,11 @@ export default {
   }
 };
 
-const Template = args => <OutsideClick {...args}>
-		<Button>Click anywhere but here</Button>
-	</OutsideClick>;
+const Template = args => _jsx(OutsideClick, _objectSpread(_objectSpread({}, args), {}, {
+  children: _jsx(Button, {
+    children: "Click anywhere but here"
+  })
+}));
 
 const standardProps = {
   onOutsideClick() {

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

@@ -0,0 +1,7 @@
+import { ComponentProps, FunctionComponent } from 'react';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
+export interface Props extends ComponentProps<typeof ThemeProvider> {
+    noBodyLevelTheming: boolean;
+}
+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,EAAa,MAAM,OAAO,CAAC;AAGrE,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAE/D,MAAM,WAAW,KAAM,SAAQ,cAAc,CAAC,OAAO,aAAa,CAAC;IAIlE,kBAAkB,EAAE,OAAO,CAAC;CAC5B;AAED,eAAO,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,KAAK,CA8BtD,CAAC"}

package/dist/components/OverdriveProvider/OverdriveProvider.js

@@ -1,30 +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";
-export const OverdriveProvider = _ref => {
-  let {
-    noBodyLevelTheming = false,
-    vars,
-    themeClass,
-    tokens,
-    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 <ThemeProvider vars={vars} themeClass={themeClass} tokens={tokens}>
-			{children}
-		</ThemeProvider>;
-};
+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,10 @@
+import type { FunctionComponent, MouseEventHandler } from 'react';
+export interface Props {
+    selected?: boolean;
+    disabled?: boolean;
+    gap?: boolean;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    className?: string;
+}
+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;AAQf,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;CACnB;AAED,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,KAAK,CAyC3C,CAAC"}

package/dist/components/Pagination/Bubble.js

@@ -1,30 +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";
-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 <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}
-		</Box>;
-};
+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"}