@autoguru/overdrive 3.0.0-next.8 → 4.0.2

package/dist/components/LoadingBox/LoadingBox.js

@@ -1,24 +1,7 @@
-"use strict";
-
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["className", "randomWidth", "blinking", "backgroundColour", "display", "is"];
 import * as React from 'react';
-import { Box } from "../Box/index.js";
-import * as styles from "./LoadingBox.css.js";
-export const LoadingBox = _ref => {
-  let {
-    className = '',
-    randomWidth = false,
-    blinking = true,
-    backgroundColour = 'gray200',
-    display = 'block',
-    is = 'span'
-  } = _ref,
-      boxStyles = _objectWithoutProperties(_ref, _excluded);
-
-  return <Box is={is} display={display} width={randomWidth ? undefined : 'full'} backgroundColour={backgroundColour} {...boxStyles} className={[styles.root, blinking && styles.blinking, className]} style={{
-    width: randomWidth ? getRandomIntWidth(60, 40) : undefined
-  }} />;
-};
-
-const getRandomIntWidth = (max, min) => "".concat(Math.random() * (max - min) + min, "%");
+import { Box } from '../Box';
+import * as styles from './LoadingBox.css';
+export const LoadingBox = ({ className = '', randomWidth = false, blinking = true, backgroundColour = 'gray200', display = 'block', is = 'span', ...boxStyles }) => (React.createElement(Box, { is: is, display: display, width: randomWidth ? undefined : 'full', backgroundColour: backgroundColour, ...boxStyles, className: [styles.root, blinking && styles.blinking, className], style: {
+        width: randomWidth ? getRandomIntWidth(60, 40) : undefined,
+    } }));
+const getRandomIntWidth = (max, min) => `${Math.random() * (max - min) + min}%`;

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

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

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

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

package/dist/components/LoadingBox/index.js

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

package/dist/components/LoadingBox/stories.js

@@ -1,18 +1,26 @@
 "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 { boxArgTypes } from "../Box/argTypes.js";
 import { LoadingBox } from "./index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 export default {
   title: 'Components/Loading/Box',
   component: LoadingBox,
-  decorators: [story => <div style={{
-    width: '50%',
-    height: '100%',
-    margin: '0 auto'
-  }}>
-				{story()}
-			</div>],
+  decorators: [story => _jsx("div", {
+    style: {
+      width: '50%',
+      height: '100%',
+      margin: '0 auto'
+    },
+    children: story()
+  })],
   parameters: {
     chromatic: {
       disable: true
@@ -21,7 +29,7 @@ export default {
   argTypes: boxArgTypes
 };
 
-const Template = args => <LoadingBox {...args} />;
+const Template = args => _jsx(LoadingBox, _objectSpread({}, args));
 
 const standardProps = {};
 export const standard = Template.bind(standardProps);

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

@@ -0,0 +1,2 @@
+export declare const variant: Record<"primary" | "secondary", string>;
+//# sourceMappingURL=Meta.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Meta.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Meta/Meta.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,OAAO,yCAOlB,CAAC"}

package/dist/components/Meta/Meta.css.js

@@ -1,18 +1,10 @@
-"use strict";
-
-import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
-
-__vanilla_filescope__.setFileScope("lib/components/Meta/Meta.css.ts", "@autoguru/overdrive");
-
 import { styleVariants } from '@vanilla-extract/css';
-import { vars } from "../../themes/base/vars.css.js";
+import { vars } from '../../themes/base/vars.css';
 export const variant = styleVariants({
-  primary: {
-    color: vars.colours.intent.primary.background.strong
-  },
-  secondary: {
-    color: vars.typography.colour.dark
-  }
-}, "variant");
-
-__vanilla_filescope__.endFileScope();
+    primary: {
+        color: vars.colours.intent.primary.background.strong,
+    },
+    secondary: {
+        color: vars.typography.colour.dark,
+    },
+});

package/dist/components/Meta/Meta.d.ts

@@ -0,0 +1,10 @@
+import { IconType } from '@autoguru/icons';
+import { FunctionComponent } from 'react';
+import * as styles from './Meta.css';
+export interface Props {
+    icon: IconType;
+    label: string;
+    variant?: keyof typeof styles.variant;
+}
+export declare const Meta: FunctionComponent<Props>;
+//# sourceMappingURL=Meta.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Meta.d.ts","sourceRoot":"","sources":["../../../lib/components/Meta/Meta.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAM1C,OAAO,KAAK,MAAM,MAAM,YAAY,CAAC;AAErC,MAAM,WAAW,KAAK;IACrB,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,OAAO,CAAC;CACtC;AAED,eAAO,MAAM,IAAI,EAAE,iBAAiB,CAAC,KAAK,CASzC,CAAC"}

package/dist/components/Meta/Meta.js

@@ -1,18 +1,8 @@
-"use strict";
-
 import * as React from 'react';
-import { Inline } from "../index.js";
-import { Icon } from "../Icon/index.js";
-import { Text } from "../Text/index.js";
-import * as styles from "./Meta.css.js";
-export const Meta = _ref => {
-  let {
-    icon,
-    label,
-    variant = 'primary'
-  } = _ref;
-  return <Inline noWrap is="span" space="2" alignY="center">
-		{icon && <Icon icon={icon} className={styles.variant[variant]} />}
-		<Text>{label}</Text>
-	</Inline>;
-};
+import { Inline } from '..';
+import { Icon } from '../Icon';
+import { Text } from '../Text';
+import * as styles from './Meta.css';
+export const Meta = ({ icon, label, variant = 'primary', }) => (React.createElement(Inline, { noWrap: true, is: "span", space: "2", alignY: "center" },
+    icon && React.createElement(Icon, { icon: icon, className: styles.variant[variant] }),
+    React.createElement(Text, null, label)));

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

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

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

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

package/dist/components/Meta/index.js

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

package/dist/components/Meta/stories.js

@@ -1,8 +1,15 @@
 "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 { AccountEditIcon, AlertCircleIcon, CalendarIcon, CarMultipleIcon, CurrencyUsdIcon, PlusIcon, StarIcon } from '@autoguru/icons';
 import * as React from 'react';
 import { Meta } from "./index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 const iconOptions = {
   CalendarIcon,
   AccountEditIcon,
@@ -25,7 +32,7 @@ export default {
   }
 };
 
-const Template = args => <Meta {...args} />;
+const Template = args => _jsx(Meta, _objectSpread({}, args));
 
 const standardProps = {
   variant: 'primary',

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

@@ -0,0 +1,3 @@
+export declare const container: string;
+export declare const content: string;
+//# sourceMappingURL=MinimalModal.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MinimalModal.css.d.ts","sourceRoot":"","sources":["../../../lib/components/MinimalModal/MinimalModal.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,QAEpB,CAAC;AAEH,eAAO,MAAM,OAAO,QAMlB,CAAC"}

package/dist/components/MinimalModal/MinimalModal.css.js

@@ -1,18 +1,10 @@
-"use strict";
-
-import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
-
-__vanilla_filescope__.setFileScope("lib/components/MinimalModal/MinimalModal.css.ts", "@autoguru/overdrive");
-
 import { style } from '@vanilla-extract/css';
 export const container = style({
-  outline: '0'
-}, "container");
+    outline: '0',
+});
 export const content = style({
-  overflowY: 'auto',
-  overscrollBehavior: 'contain',
-  webkitOverflowScrolling: 'touch',
-  '-webkit-overflow-scrolling': 'touch'
-}, "content");
-
-__vanilla_filescope__.endFileScope();
+    overflowY: 'auto',
+    overscrollBehavior: 'contain',
+    webkitOverflowScrolling: 'touch',
+    '-webkit-overflow-scrolling': 'touch',
+});

package/dist/components/MinimalModal/MinimalModal.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentProps, FunctionComponent } from 'react';
+import { Modal } from '../Modal';
+export interface Props extends ComponentProps<typeof Modal> {
+    className?: string;
+}
+export declare const MinimalModal: FunctionComponent<Props>;
+//# sourceMappingURL=MinimalModal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MinimalModal.d.ts","sourceRoot":"","sources":["../../../lib/components/MinimalModal/MinimalModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACX,cAAc,EACd,iBAAiB,EAEjB,MAAM,OAAO,CAAC;AAMf,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAIjC,MAAM,WAAW,KAAM,SAAQ,cAAc,CAAC,OAAO,KAAK,CAAC;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,YAAY,EAAE,iBAAiB,CAAC,KAAK,CA+DjD,CAAC"}

package/dist/components/MinimalModal/MinimalModal.js

@@ -1,40 +1,29 @@
-"use strict";
-
 import * as React from 'react';
 import { useLayoutEffect, useRef } from 'react';
-import { useEventCallback, useId } from "../../utils/index.js";
-import { Box } from "../Box/index.js";
-import { Modal } from "../Modal/index.js";
-import * as styles from "./MinimalModal.css.js";
-export const MinimalModal = _ref => {
-  let {
-    isOpen,
-    className = '',
-    onRequestClose,
-    children
-  } = _ref;
-  const titleId = useId();
-  const locked = useRef(true);
-  const unlockModal = useEventCallback(event => {
-    locked.current = event.target !== event.currentTarget;
-  });
-  const backdropHandler = useEventCallback(event => {
-    if (locked.current || event.target !== event.currentTarget) return;
-    if (typeof onRequestClose === 'function') onRequestClose('backdrop');
-  });
-  useLayoutEffect(() => {
-    document.body.style.overflow = isOpen ? 'hidden' : '';
-    return () => {
-      document.body.style.overflow = '';
-    };
-  }, [isOpen]);
-  return <Modal isOpen={isOpen} onRequestClose={onRequestClose}>
-			<Box className={[styles.container, className]} height="full" display="flex" alignItems="center" justifyContent="center" aria-hidden={isOpen ? 'false' : 'true'} role="none presentation" onMouseDown={unlockModal} onClick={backdropHandler}>
-				<Box is="article" role="dialog" aria-modal="true" aria-labelledby={titleId} display="flex" flexDirection="column">
-					<Box is="main" display="flex" flexDirection="column" flexGrow={1} height="full" className={styles.content}>
-						{children}
-					</Box>
-				</Box>
-			</Box>
-		</Modal>;
-};
+import { useEventCallback, useId } from '../../utils';
+import { Box } from '../Box';
+import { Modal } from '../Modal';
+import * as styles from './MinimalModal.css';
+export const MinimalModal = ({ isOpen, className = '', onRequestClose, children, }) => {
+    const titleId = useId();
+    const locked = useRef(true);
+    const unlockModal = useEventCallback((event) => {
+        locked.current = event.target !== event.currentTarget;
+    });
+    const backdropHandler = useEventCallback((event) => {
+        if (locked.current || event.target !== event.currentTarget)
+            return;
+        if (typeof onRequestClose === 'function')
+            onRequestClose('backdrop');
+    });
+    useLayoutEffect(() => {
+        document.body.style.overflow = isOpen ? 'hidden' : '';
+        return () => {
+            document.body.style.overflow = '';
+        };
+    }, [isOpen]);
+    return (React.createElement(Modal, { isOpen: isOpen, onRequestClose: onRequestClose },
+        React.createElement(Box, { className: [styles.container, className], height: "full", display: "flex", alignItems: "center", justifyContent: "center", "aria-hidden": isOpen ? 'false' : 'true', role: "none presentation", onMouseDown: unlockModal, onClick: backdropHandler },
+            React.createElement(Box, { is: "article", role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, display: "flex", flexDirection: "column" },
+                React.createElement(Box, { is: "main", display: "flex", flexDirection: "column", flexGrow: 1, height: "full", className: styles.content }, children)))));
+};

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

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

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

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

package/dist/components/MinimalModal/index.js

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

package/dist/components/MinimalModal/stories.js

@@ -1,10 +1,19 @@
 "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 { Box } from "../Box/index.js";
 import { Text } from "../Text/index.js";
 import { MinimalModal } from "./index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 export default {
   title: 'Components/MinimalModal',
   component: MinimalModal,
@@ -15,151 +24,40 @@ export default {
   }
 };
 
-const Template = args => <>
-		<MinimalModal {...args}>
-			<Box backgroundColour="white" paddingX="4" paddingY="3">
-				<Text>
-					Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-					Duis convallis neque a laoreet maximus. Vestibulum hendrerit
-					quam at mi venenatis faucibus at vel nisi. In ut risus et
-					ipsum tincidunt tempor. Suspendisse potenti. Praesent
-					faucibus posuere risus, at congue mauris porttitor ut. Donec
-					sit amet elit vitae purus dictum aliquet quis ut ligula.
-					Orci varius natoque penatibus et magnis dis parturient
-					montes, nascetur ridiculus mus. Vestibulum dui sapien,
-					porttitor ac erat vel, malesuada rutrum mauris. Nam arcu
-					tellus, pretium ut aliquet eget, ultrices vel est. Maecenas
-					dapibus volutpat eros a volutpat.
-				</Text>
-				<br />
-				<Text>
-					Sed ante dui, sagittis sit amet tortor nec, egestas
-					tincidunt mauris. Phasellus sed felis arcu. Etiam sit amet
-					pharetra risus, a posuere magna. Pellentesque finibus arcu
-					vitae orci luctus sagittis. Proin porta metus ut dapibus
-					pharetra. Sed interdum mi et tristique aliquam. Curabitur
-					finibus at dolor eu fermentum. Cras diam mauris, malesuada
-					quis lacinia eu, porttitor at lectus. Duis pellentesque ante
-					eget efficitur lacinia. Vivamus ornare venenatis tortor
-					euismod imperdiet.
-				</Text>
-				<br />
-				<Text>
-					Nulla condimentum iaculis nisi, quis lobortis ligula. Nulla
-					tempus semper velit, id ullamcorper orci molestie vel. Sed
-					maximus nisi ac risus malesuada, quis varius purus interdum.
-					Donec volutpat dolor in euismod hendrerit. Integer posuere
-					tortor sit amet turpis viverra euismod. Mauris scelerisque
-					ex diam, eget sodales erat accumsan vel. Etiam interdum odio
-					a tortor fermentum, molestie interdum tellus bibendum.
-					Vivamus vitae pulvinar ante. Aenean convallis aliquam velit
-					congue ultricies. Aenean vel blandit erat. Mauris quis
-					auctor nibh. Morbi dui ipsum, lobortis non nisi vitae,
-					convallis pulvinar nunc.
-				</Text>
-				<br />
-				<Text>
-					Morbi mollis massa in eros tempus, ut venenatis ligula
-					posuere. Nam ut ante lectus. Integer congue risus arcu, et
-					ornare odio hendrerit eu. Mauris arcu ligula, interdum vitae
-					consectetur vitae, volutpat a elit. Nulla luctus faucibus
-					ipsum vitae maximus. Quisque in est nec libero commodo
-					egestas. Donec faucibus, felis eget euismod facilisis, urna
-					tortor molestie ex, eu eleifend leo tellus vel ligula.
-					Mauris et urna massa. Integer ultrices massa commodo
-					eleifend facilisis. Vestibulum dapibus magna cursus metus
-					pellentesque tempor. Donec blandit elementum feugiat. Sed
-					nec congue est.
-				</Text>
-				<br />
-				<Text>
-					Nulla quam magna, aliquet et odio non, porta condimentum
-					tellus. Maecenas fringilla sodales erat eu facilisis. Nunc
-					rutrum purus quis diam tempus laoreet. Fusce gravida arcu et
-					lectus ultricies suscipit. Quisque sagittis tempus diam,
-					malesuada posuere lorem sagittis et. Duis eget eros nibh.
-					Aenean at augue tincidunt nunc consequat porta.
-				</Text>
-				<br />
-				<Text>
-					Nunc ac congue lacus, ac vulputate lectus. Suspendisse vel
-					malesuada tellus. In nec fringilla elit. Cras vitae metus et
-					leo convallis consectetur. Cras quis congue sapien, vitae
-					aliquet ante. Integer sed lorem pretium, vestibulum arcu eu,
-					imperdiet mauris. Nam blandit pharetra feugiat. Maecenas
-					eget ante metus. Vivamus pretium ipsum justo, a faucibus ex
-					dictum non. Vestibulum et dui diam.
-				</Text>
-			</Box>
-		</MinimalModal>
-		<Text>
-			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
-			convallis neque a laoreet maximus. Vestibulum hendrerit quam at mi
-			venenatis faucibus at vel nisi. In ut risus et ipsum tincidunt
-			tempor. Suspendisse potenti. Praesent faucibus posuere risus, at
-			congue mauris porttitor ut. Donec sit amet elit vitae purus dictum
-			aliquet quis ut ligula. Orci varius natoque penatibus et magnis dis
-			parturient montes, nascetur ridiculus mus. Vestibulum dui sapien,
-			porttitor ac erat vel, malesuada rutrum mauris. Nam arcu tellus,
-			pretium ut aliquet eget, ultrices vel est. Maecenas dapibus volutpat
-			eros a volutpat.
-		</Text>
-		<br />
-		<Text>
-			Sed ante dui, sagittis sit amet tortor nec, egestas tincidunt
-			mauris. Phasellus sed felis arcu. Etiam sit amet pharetra risus, a
-			posuere magna. Pellentesque finibus arcu vitae orci luctus sagittis.
-			Proin porta metus ut dapibus pharetra. Sed interdum mi et tristique
-			aliquam. Curabitur finibus at dolor eu fermentum. Cras diam mauris,
-			malesuada quis lacinia eu, porttitor at lectus. Duis pellentesque
-			ante eget efficitur lacinia. Vivamus ornare venenatis tortor euismod
-			imperdiet.
-		</Text>
-		<br />
-		<Text>
-			Nulla condimentum iaculis nisi, quis lobortis ligula. Nulla tempus
-			semper velit, id ullamcorper orci molestie vel. Sed maximus nisi ac
-			risus malesuada, quis varius purus interdum. Donec volutpat dolor in
-			euismod hendrerit. Integer posuere tortor sit amet turpis viverra
-			euismod. Mauris scelerisque ex diam, eget sodales erat accumsan vel.
-			Etiam interdum odio a tortor fermentum, molestie interdum tellus
-			bibendum. Vivamus vitae pulvinar ante. Aenean convallis aliquam
-			velit congue ultricies. Aenean vel blandit erat. Mauris quis auctor
-			nibh. Morbi dui ipsum, lobortis non nisi vitae, convallis pulvinar
-			nunc.
-		</Text>
-		<br />
-		<Text>
-			Morbi mollis massa in eros tempus, ut venenatis ligula posuere. Nam
-			ut ante lectus. Integer congue risus arcu, et ornare odio hendrerit
-			eu. Mauris arcu ligula, interdum vitae consectetur vitae, volutpat a
-			elit. Nulla luctus faucibus ipsum vitae maximus. Quisque in est nec
-			libero commodo egestas. Donec faucibus, felis eget euismod
-			facilisis, urna tortor molestie ex, eu eleifend leo tellus vel
-			ligula. Mauris et urna massa. Integer ultrices massa commodo
-			eleifend facilisis. Vestibulum dapibus magna cursus metus
-			pellentesque tempor. Donec blandit elementum feugiat. Sed nec congue
-			est.
-		</Text>
-		<br />
-		<Text>
-			Nulla quam magna, aliquet et odio non, porta condimentum tellus.
-			Maecenas fringilla sodales erat eu facilisis. Nunc rutrum purus quis
-			diam tempus laoreet. Fusce gravida arcu et lectus ultricies
-			suscipit. Quisque sagittis tempus diam, malesuada posuere lorem
-			sagittis et. Duis eget eros nibh. Aenean at augue tincidunt nunc
-			consequat porta.
-		</Text>
-		<br />
-		<Text>
-			Nunc ac congue lacus, ac vulputate lectus. Suspendisse vel malesuada
-			tellus. In nec fringilla elit. Cras vitae metus et leo convallis
-			consectetur. Cras quis congue sapien, vitae aliquet ante. Integer
-			sed lorem pretium, vestibulum arcu eu, imperdiet mauris. Nam blandit
-			pharetra feugiat. Maecenas eget ante metus. Vivamus pretium ipsum
-			justo, a faucibus ex dictum non. Vestibulum et dui diam.
-		</Text>
-	</>;
+const Template = args => _jsxs(_Fragment, {
+  children: [_jsx(MinimalModal, _objectSpread(_objectSpread({}, args), {}, {
+    children: _jsxs(Box, {
+      backgroundColour: "white",
+      paddingX: "4",
+      paddingY: "3",
+      children: [_jsx(Text, {
+        children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis convallis neque a laoreet maximus. Vestibulum hendrerit quam at mi venenatis faucibus at vel nisi. In ut risus et ipsum tincidunt tempor. Suspendisse potenti. Praesent faucibus posuere risus, at congue mauris porttitor ut. Donec sit amet elit vitae purus dictum aliquet quis ut ligula. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum dui sapien, porttitor ac erat vel, malesuada rutrum mauris. Nam arcu tellus, pretium ut aliquet eget, ultrices vel est. Maecenas dapibus volutpat eros a volutpat."
+      }), _jsx("br", {}), _jsx(Text, {
+        children: "Sed ante dui, sagittis sit amet tortor nec, egestas tincidunt mauris. Phasellus sed felis arcu. Etiam sit amet pharetra risus, a posuere magna. Pellentesque finibus arcu vitae orci luctus sagittis. Proin porta metus ut dapibus pharetra. Sed interdum mi et tristique aliquam. Curabitur finibus at dolor eu fermentum. Cras diam mauris, malesuada quis lacinia eu, porttitor at lectus. Duis pellentesque ante eget efficitur lacinia. Vivamus ornare venenatis tortor euismod imperdiet."
+      }), _jsx("br", {}), _jsx(Text, {
+        children: "Nulla condimentum iaculis nisi, quis lobortis ligula. Nulla tempus semper velit, id ullamcorper orci molestie vel. Sed maximus nisi ac risus malesuada, quis varius purus interdum. Donec volutpat dolor in euismod hendrerit. Integer posuere tortor sit amet turpis viverra euismod. Mauris scelerisque ex diam, eget sodales erat accumsan vel. Etiam interdum odio a tortor fermentum, molestie interdum tellus bibendum. Vivamus vitae pulvinar ante. Aenean convallis aliquam velit congue ultricies. Aenean vel blandit erat. Mauris quis auctor nibh. Morbi dui ipsum, lobortis non nisi vitae, convallis pulvinar nunc."
+      }), _jsx("br", {}), _jsx(Text, {
+        children: "Morbi mollis massa in eros tempus, ut venenatis ligula posuere. Nam ut ante lectus. Integer congue risus arcu, et ornare odio hendrerit eu. Mauris arcu ligula, interdum vitae consectetur vitae, volutpat a elit. Nulla luctus faucibus ipsum vitae maximus. Quisque in est nec libero commodo egestas. Donec faucibus, felis eget euismod facilisis, urna tortor molestie ex, eu eleifend leo tellus vel ligula. Mauris et urna massa. Integer ultrices massa commodo eleifend facilisis. Vestibulum dapibus magna cursus metus pellentesque tempor. Donec blandit elementum feugiat. Sed nec congue est."
+      }), _jsx("br", {}), _jsx(Text, {
+        children: "Nulla quam magna, aliquet et odio non, porta condimentum tellus. Maecenas fringilla sodales erat eu facilisis. Nunc rutrum purus quis diam tempus laoreet. Fusce gravida arcu et lectus ultricies suscipit. Quisque sagittis tempus diam, malesuada posuere lorem sagittis et. Duis eget eros nibh. Aenean at augue tincidunt nunc consequat porta."
+      }), _jsx("br", {}), _jsx(Text, {
+        children: "Nunc ac congue lacus, ac vulputate lectus. Suspendisse vel malesuada tellus. In nec fringilla elit. Cras vitae metus et leo convallis consectetur. Cras quis congue sapien, vitae aliquet ante. Integer sed lorem pretium, vestibulum arcu eu, imperdiet mauris. Nam blandit pharetra feugiat. Maecenas eget ante metus. Vivamus pretium ipsum justo, a faucibus ex dictum non. Vestibulum et dui diam."
+      })]
+    })
+  })), _jsx(Text, {
+    children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis convallis neque a laoreet maximus. Vestibulum hendrerit quam at mi venenatis faucibus at vel nisi. In ut risus et ipsum tincidunt tempor. Suspendisse potenti. Praesent faucibus posuere risus, at congue mauris porttitor ut. Donec sit amet elit vitae purus dictum aliquet quis ut ligula. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum dui sapien, porttitor ac erat vel, malesuada rutrum mauris. Nam arcu tellus, pretium ut aliquet eget, ultrices vel est. Maecenas dapibus volutpat eros a volutpat."
+  }), _jsx("br", {}), _jsx(Text, {
+    children: "Sed ante dui, sagittis sit amet tortor nec, egestas tincidunt mauris. Phasellus sed felis arcu. Etiam sit amet pharetra risus, a posuere magna. Pellentesque finibus arcu vitae orci luctus sagittis. Proin porta metus ut dapibus pharetra. Sed interdum mi et tristique aliquam. Curabitur finibus at dolor eu fermentum. Cras diam mauris, malesuada quis lacinia eu, porttitor at lectus. Duis pellentesque ante eget efficitur lacinia. Vivamus ornare venenatis tortor euismod imperdiet."
+  }), _jsx("br", {}), _jsx(Text, {
+    children: "Nulla condimentum iaculis nisi, quis lobortis ligula. Nulla tempus semper velit, id ullamcorper orci molestie vel. Sed maximus nisi ac risus malesuada, quis varius purus interdum. Donec volutpat dolor in euismod hendrerit. Integer posuere tortor sit amet turpis viverra euismod. Mauris scelerisque ex diam, eget sodales erat accumsan vel. Etiam interdum odio a tortor fermentum, molestie interdum tellus bibendum. Vivamus vitae pulvinar ante. Aenean convallis aliquam velit congue ultricies. Aenean vel blandit erat. Mauris quis auctor nibh. Morbi dui ipsum, lobortis non nisi vitae, convallis pulvinar nunc."
+  }), _jsx("br", {}), _jsx(Text, {
+    children: "Morbi mollis massa in eros tempus, ut venenatis ligula posuere. Nam ut ante lectus. Integer congue risus arcu, et ornare odio hendrerit eu. Mauris arcu ligula, interdum vitae consectetur vitae, volutpat a elit. Nulla luctus faucibus ipsum vitae maximus. Quisque in est nec libero commodo egestas. Donec faucibus, felis eget euismod facilisis, urna tortor molestie ex, eu eleifend leo tellus vel ligula. Mauris et urna massa. Integer ultrices massa commodo eleifend facilisis. Vestibulum dapibus magna cursus metus pellentesque tempor. Donec blandit elementum feugiat. Sed nec congue est."
+  }), _jsx("br", {}), _jsx(Text, {
+    children: "Nulla quam magna, aliquet et odio non, porta condimentum tellus. Maecenas fringilla sodales erat eu facilisis. Nunc rutrum purus quis diam tempus laoreet. Fusce gravida arcu et lectus ultricies suscipit. Quisque sagittis tempus diam, malesuada posuere lorem sagittis et. Duis eget eros nibh. Aenean at augue tincidunt nunc consequat porta."
+  }), _jsx("br", {}), _jsx(Text, {
+    children: "Nunc ac congue lacus, ac vulputate lectus. Suspendisse vel malesuada tellus. In nec fringilla elit. Cras vitae metus et leo convallis consectetur. Cras quis congue sapien, vitae aliquet ante. Integer sed lorem pretium, vestibulum arcu eu, imperdiet mauris. Nam blandit pharetra feugiat. Maecenas eget ante metus. Vivamus pretium ipsum justo, a faucibus ex dictum non. Vestibulum et dui diam."
+  })]
+});
 
 const standardProps = {
   isOpen: true,

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

@@ -0,0 +1,5 @@
+export declare const root: string;
+export declare const transition: string;
+export declare const entry: string;
+export declare const backdrop: Record<"root" | "invisible", string>;
+//# sourceMappingURL=Modal.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Modal/Modal.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,QAMf,CAAC;AAEH,eAAO,MAAM,UAAU,QAErB,CAAC;AAEH,eAAO,MAAM,KAAK,QAOhB,CAAC;AAEH,eAAO,MAAM,QAAQ,sCAenB,CAAC"}