@autoguru/overdrive 4.3.4 → 4.3.5

package/dist/components/StandardModal/StandardModal.js

@@ -1,129 +1,56 @@
-"use strict";
-
 import { WindowCloseIcon } from '@autoguru/icons';
 import clsx from 'clsx';
 import * as React from 'react';
 import { useLayoutEffect, useRef } from 'react';
-import { useEventCallback, useId } from "../../utils/index.js";
-import { Box } from "../Box/index.js";
-import { Button } from "../Button/index.js";
-import { Heading } from "../Heading/index.js";
-import { Icon } from "../Icon/index.js";
-import { Modal } from "../Modal/index.js";
-import { useTextStyles } from "../Text/index.js";
-import * as styles from "./StandardModal.css.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export let ESize;
-
+import { useEventCallback, useId } from '../../utils';
+import { Box } from '../Box';
+import { Button } from '../Button';
+import { Heading } from '../Heading';
+import { Icon } from '../Icon';
+import { Modal } from '../Modal';
+import { useTextStyles } from '../Text';
+import * as styles from './StandardModal.css';
+export var ESize;
 (function (ESize) {
-  ESize["Skinny"] = "skinny";
-  ESize["Narrow"] = "narrow";
-  ESize["Standard"] = "standard";
+    ESize["Skinny"] = "skinny";
+    ESize["Narrow"] = "narrow";
+    ESize["Standard"] = "standard";
 })(ESize || (ESize = {}));
-
-export const StandardModal = _ref => {
-  let {
-    isOpen,
-    size = 'standard',
-    className = '',
-    title,
-    onRequestClose,
-    children
-  } = _ref;
-  const titleId = useId();
-  const locked = useRef(true);
-  const closeButtonHandler = useEventCallback(() => {
-    if (typeof onRequestClose === 'function') onRequestClose('button');
-  });
-  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 _jsx(Modal, {
-    isOpen: isOpen,
-    onRequestClose: onRequestClose,
-    children: _jsx(Box, {
-      className: styles.container,
-      height: "full",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      "aria-hidden": isOpen ? 'false' : 'true',
-      role: "none presentation",
-      onMouseDown: unlockModal,
-      onClick: backdropHandler,
-      children: _jsxs(Box, {
-        is: "article",
-        overflow: "hidden",
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-labelledby": titleId,
-        display: "flex",
-        flexDirection: "column",
-        backgroundColour: "white",
-        marginTop: "8",
-        className: clsx([styles.modal, {
-          [styles.modalSizeStandard]: size === 'standard'
-        }, {
-          [styles.modalSizeNarrow]: size === 'narrow'
-        }, {
-          [styles.modalSizeSkinny]: size === 'skinny'
-        }, className]),
-        children: [_jsxs(Box, {
-          is: "header",
-          flexShrink: 0,
-          position: "relative",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          width: "full",
-          paddingY: "3",
-          paddingLeft: "5",
-          paddingRight: "2",
-          borderWidthBottom: "1",
-          borderColour: "light",
-          children: [_jsx(Box, {
-            flexGrow: 1,
-            id: titleId,
-            children: _jsx(Heading, {
-              is: "h4",
-              children: title
-            })
-          }), _jsx(Button, {
-            minimal: true,
-            rounded: true,
-            variant: "secondary",
-            size: "small",
-            "aria-label": "close",
-            onClick: closeButtonHandler,
-            children: _jsx(Icon, {
-              className: useTextStyles({
-                colour: 'muted'
-              }),
-              icon: WindowCloseIcon,
-              size: "medium"
-            })
-          })]
-        }), _jsx(Box, {
-          is: "main",
-          display: "flex",
-          flexDirection: "column",
-          flexGrow: 1,
-          height: "full",
-          className: styles.content,
-          children: children
-        })]
-      })
-    })
-  });
-};
+export const StandardModal = ({ isOpen, size = 'standard', className = '', title, onRequestClose, children, }) => {
+    const titleId = useId();
+    const locked = useRef(true);
+    const closeButtonHandler = useEventCallback(() => {
+        if (typeof onRequestClose === 'function')
+            onRequestClose('button');
+    });
+    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, 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", overflow: "hidden", role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, display: "flex", flexDirection: "column", backgroundColour: "white", marginTop: "8", className: clsx([
+                    styles.modal,
+                    { [styles.modalSizeStandard]: size === 'standard' },
+                    { [styles.modalSizeNarrow]: size === 'narrow' },
+                    { [styles.modalSizeSkinny]: size === 'skinny' },
+                    className,
+                ]) },
+                React.createElement(Box, { is: "header", flexShrink: 0, position: "relative", display: "flex", alignItems: "center", justifyContent: "center", width: "full", paddingY: "3", paddingLeft: "5", paddingRight: "2", borderWidthBottom: "1", borderColour: "light" },
+                    React.createElement(Box, { flexGrow: 1, id: titleId },
+                        React.createElement(Heading, { is: "h4" }, title)),
+                    React.createElement(Button, { minimal: true, rounded: true, variant: "secondary", size: "small", "aria-label": "close", onClick: closeButtonHandler },
+                        React.createElement(Icon, { className: useTextStyles({ colour: 'muted' }), icon: WindowCloseIcon, size: "medium" }))),
+                React.createElement(Box, { is: "main", display: "flex", flexDirection: "column", flexGrow: 1, height: "full", className: styles.content }, children)))));
+};

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

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

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

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

package/dist/components/StandardModal/index.js

@@ -1,3 +1 @@
-"use strict";
-
-export { StandardModal, ESize as EStandardModalSize } from "./StandardModal.js";
+export { StandardModal, ESize as EStandardModalSize } from './StandardModal';

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

@@ -0,0 +1,2 @@
+export declare const star: Record<"default" | "empty", string>;
+//# sourceMappingURL=StarRating.css.d.ts.map

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

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

package/dist/components/StarRating/StarRating.css.js

@@ -1,18 +1,10 @@
-"use strict";
-
-import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
-
-__vanilla_filescope__.setFileScope("lib/components/StarRating/StarRating.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 star = styleVariants({
-  default: {
-    color: vars.colours.intent.shine.foreground
-  },
-  empty: {
-    color: vars.colours.intent.shine.background.standard
-  }
-}, "star");
-
-__vanilla_filescope__.endFileScope();
+    default: {
+        color: vars.colours.intent.shine.foreground,
+    },
+    empty: {
+        color: vars.colours.intent.shine.background.standard,
+    },
+});

package/dist/components/StarRating/StarRating.d.ts

@@ -0,0 +1,13 @@
+import { NamedExoticComponent } from 'react';
+export declare enum EStarRatingSize {
+    Medium = "medium",
+    Small = "small"
+}
+export interface Props {
+    className?: string;
+    rating: number;
+    size?: EStarRatingSize;
+    label?: string;
+}
+export declare const StarRating: NamedExoticComponent<Props>;
+//# sourceMappingURL=StarRating.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StarRating.d.ts","sourceRoot":"","sources":["../../../lib/components/StarRating/StarRating.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA2B,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAYtE,oBAAY,eAAe;IAC1B,MAAM,WAAW;IACjB,KAAK,UAAU;CACf;AAuBD,MAAM,WAAW,KAAK;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,UAAU,EAAE,oBAAoB,CAAC,KAAK,CA2BlD,CAAC"}

package/dist/components/StarRating/StarRating.js

@@ -1,101 +1,58 @@
-"use strict";
-
 import { StarHalfIcon, StarIcon } from '@autoguru/icons';
 import clsx from 'clsx';
 import * as React from 'react';
 import { memo } from 'react';
-import { Box, useBoxStyles } from "../Box/index.js";
-import { Icon } from "../Icon/index.js";
-import { Inline } from "../Inline/index.js";
-import { Text } from "../Text/index.js";
-import * as styles from "./StarRating.css.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, useBoxStyles } from '../Box';
+import { Icon } from '../Icon';
+import { Inline } from '../Inline';
+import { Text } from '../Text';
+import * as styles from './StarRating.css';
 const totalStars = 5;
-export let EStarRatingSize;
-
+export var EStarRatingSize;
 (function (EStarRatingSize) {
-  EStarRatingSize["Medium"] = "medium";
-  EStarRatingSize["Small"] = "small";
+    EStarRatingSize["Medium"] = "medium";
+    EStarRatingSize["Small"] = "small";
 })(EStarRatingSize || (EStarRatingSize = {}));
-
 var EStarType;
-
 (function (EStarType) {
-  EStarType[EStarType["Full"] = 0] = "Full";
-  EStarType[EStarType["Half"] = 1] = "Half";
-  EStarType[EStarType["Empty"] = 2] = "Empty";
+    EStarType[EStarType["Full"] = 0] = "Full";
+    EStarType[EStarType["Half"] = 1] = "Half";
+    EStarType[EStarType["Empty"] = 2] = "Empty";
 })(EStarType || (EStarType = {}));
-
-const starSizeMap = new Map([[EStarRatingSize.Medium, 'medium'], [EStarRatingSize.Small, 'small']]);
-const labelSizeMap = new Map([[EStarRatingSize.Small, '3'], [EStarRatingSize.Medium, '4']]);
-export const StarRating = memo(_ref => {
-  let {
-    className = '',
-    rating,
-    label = rating,
-    size = EStarRatingSize.Medium
-  } = _ref;
-  return _jsx(Box, {
-    className: className,
-    children: _jsxs(Inline, {
-      space: "4",
-      alignY: "center",
-      children: [_jsx(Inline, {
-        space: "none",
-        alignY: "center",
-        children: Array.from({
-          length: totalStars
-        }).fill(0).map((_, index) => _jsx(Star, {
-          index: index,
-          rating: rating,
-          size: size
-        }, index))
-      }), label === null ? null : _jsx(Text, {
-        size: labelSizeMap.get(size),
-        children: label
-      })]
-    })
-  });
-});
-
+const starSizeMap = new Map([
+    [EStarRatingSize.Medium, 'medium'],
+    [EStarRatingSize.Small, 'small'],
+]);
+const labelSizeMap = new Map([
+    [EStarRatingSize.Small, '3'],
+    [EStarRatingSize.Medium, '4'],
+]);
+export const StarRating = memo(({ className = '', rating, label = rating, size = EStarRatingSize.Medium, }) => (React.createElement(Box, { className: className },
+    React.createElement(Inline, { space: "4", alignY: "center" },
+        React.createElement(Inline, { space: "none", alignY: "center" }, Array.from({ length: totalStars })
+            .fill(0)
+            .map((_, index) => (React.createElement(Star, { key: index, index: index, rating: rating, size: size })))),
+        label === null ? null : (React.createElement(Text, { size: labelSizeMap.get(size) }, label))))));
 const getStarIconType = (index, rating) => {
-  if (index + 1 <= Math.floor(rating)) {
-    return EStarType.Full;
-  }
-
-  if (index + 1 > Math.ceil(rating)) {
-    return EStarType.Empty;
-  }
-
-  const decimalPart = Math.round((rating - index) * 1e1);
-
-  if (decimalPart <= 2) {
-    return EStarType.Empty;
-  }
-
-  if (decimalPart >= 8) {
-    return EStarType.Full;
-  }
-
-  return EStarType.Half;
+    if (index + 1 <= Math.floor(rating)) {
+        return EStarType.Full;
+    }
+    if (index + 1 > Math.ceil(rating)) {
+        return EStarType.Empty;
+    }
+    const decimalPart = Math.round((rating - index) * 1e1);
+    if (decimalPart <= 2) {
+        return EStarType.Empty;
+    }
+    if (decimalPart >= 8) {
+        return EStarType.Full;
+    }
+    return EStarType.Half;
+};
+const Star = ({ index, rating = 0, size = EStarRatingSize.Medium, }) => {
+    const starType = getStarIconType(index, rating);
+    const star = starType === EStarType.Half ? StarHalfIcon : StarIcon;
+    return (React.createElement(Icon, { key: index, icon: star, size: starSizeMap.get(size), className: clsx(useBoxStyles({ position: 'relative' }), styles.star.default, {
+            [styles.star.empty]: starType === EStarType.Empty,
+        }) }));
 };
-
-const Star = _ref2 => {
-  let {
-    index,
-    rating = 0,
-    size = EStarRatingSize.Medium
-  } = _ref2;
-  const starType = getStarIconType(index, rating);
-  const star = starType === EStarType.Half ? StarHalfIcon : StarIcon;
-  return _jsx(Icon, {
-    icon: star,
-    size: starSizeMap.get(size),
-    className: clsx(useBoxStyles({
-      position: 'relative'
-    }), styles.star.default, {
-      [styles.star.empty]: starType === EStarType.Empty
-    })
-  }, index);
-};

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

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

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

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

package/dist/components/StarRating/index.js

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

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

@@ -0,0 +1,5 @@
+export declare const disabled: string;
+export declare const root: string;
+export declare const handle: Record<"default" | "disabled", string>;
+export declare const label: string;
+//# sourceMappingURL=Stepper.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Stepper/Stepper.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,QAAQ,QAAmC,CAAC;AAEzD,eAAO,MAAM,IAAI,QAOf,CAAC;AAEH,eAAO,MAAM,MAAM,wCAkBjB,CAAC;AAEH,eAAO,MAAM,KAAK,QAEhB,CAAC"}

package/dist/components/Stepper/Stepper.css.js

@@ -1,43 +1,33 @@
-"use strict";
-
-import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
-
-__vanilla_filescope__.setFileScope("lib/components/Stepper/Stepper.css.ts", "@autoguru/overdrive");
-
 import { style, styleVariants } from '@vanilla-extract/css';
-import { vars } from "../../themes/base/vars.css.js";
-export const disabled = style({
-  cursor: 'not-allowed'
-}, "disabled");
+import { vars } from '../../themes/base/vars.css';
+export const disabled = style({ cursor: 'not-allowed' });
 export const root = style({
-  width: 'max-content',
-  selectors: {
-    ["&:not(".concat(disabled, "):focus")]: {
-      borderColor: vars.colours.intent.information.background.mild
-    }
-  }
-}, "root");
-export const handle = styleVariants({
-  default: {
-    width: vars.space[6],
-    height: vars.space[6],
-    backgroundColor: vars.colours.intent.primary.background.standard,
-    transition: "background-color 0.1s ".concat(vars.animation.easing.standard),
+    width: 'max-content',
     selectors: {
-      ["".concat(root, ":not(").concat(disabled, ") &:hover")]: {
-        backgroundColor: vars.colours.intent.primary.background.strong
-      },
-      ["".concat(root, ":not(").concat(disabled, ") &:active")]: {
-        backgroundColor: vars.colours.intent.primary.background.strong
-      }
-    }
-  },
-  disabled: {
-    borderColor: vars.colours.background.neutral
-  }
-}, "handle");
+        [`&:not(${disabled}):focus`]: {
+            borderColor: vars.colours.intent.information.background.mild,
+        },
+    },
+});
+export const handle = styleVariants({
+    default: {
+        width: vars.space[6],
+        height: vars.space[6],
+        backgroundColor: vars.colours.intent.primary.background.standard,
+        transition: `background-color 0.1s ${vars.animation.easing.standard}`,
+        selectors: {
+            [`${root}:not(${disabled}) &:hover`]: {
+                backgroundColor: vars.colours.intent.primary.background.strong,
+            },
+            [`${root}:not(${disabled}) &:active`]: {
+                backgroundColor: vars.colours.intent.primary.background.strong,
+            },
+        },
+    },
+    disabled: {
+        borderColor: vars.colours.background.neutral,
+    },
+});
 export const label = style({
-  minWidth: vars.space['8']
-}, "label");
-
-__vanilla_filescope__.endFileScope();
+    minWidth: vars.space['8'],
+});

package/dist/components/Stepper/Stepper.d.ts

@@ -0,0 +1,13 @@
+import { FunctionComponent } from 'react';
+export interface Props {
+    className?: string;
+    disabled?: boolean;
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    format?(value: number): string;
+    onChange?(value: number): void;
+}
+export declare const Stepper: FunctionComponent<Props>;
+//# sourceMappingURL=Stepper.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../lib/components/Stepper/Stepper.tsx"],"names":[],"mappings":"AAIA,OAAO,EACN,iBAAiB,EAOjB,MAAM,OAAO,CAAC;AASf,MAAM,WAAW,KAAK;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,MAAM,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IAE/B,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CAC/B;AA+ED,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,KAAK,CA0I5C,CAAC"}