@autoguru/overdrive 4.1.3 → 4.1.4

package/dist/components/Tooltip/Tooltip.js

@@ -1,33 +1,62 @@
+"use strict";
+
 import * as React from 'react';
-import { Children, cloneElement, useCallback, useRef, useState, } from 'react';
-import { Box } from '../Box';
-import { Positioner } from '../Positioner';
-import { EAlignment } from '../Positioner/alignment';
-import { Text } from '../Text';
-import * as styles from './Tooltip.css';
-export const Tooltip = ({ alignment = EAlignment.RIGHT, label, children, }) => {
-    const [isOpen, setIsOpen] = useState(false);
-    const childRef = useRef(null);
-    const triggerRef = useRef(null);
-    const leaveTimer = useRef();
-    const enterHandler = useCallback(() => {
-        if (leaveTimer.current) {
-            clearTimeout(leaveTimer.current);
-        }
-        setIsOpen(true);
-    }, [setIsOpen]);
-    const leaveHandler = useCallback(() => {
-        leaveTimer.current = setTimeout(() => {
-            setIsOpen(false);
-        }, 1e3 / 2);
-    }, [setIsOpen]);
-    return (React.createElement(React.Fragment, null,
-        cloneElement(Children.only(children), {
-            ref: triggerRef,
-            onMouseEnter: enterHandler,
-            onMouseLeave: leaveHandler,
-        }),
-        React.createElement(Positioner, { triggerRef: triggerRef, alignment: alignment, isOpen: isOpen },
-            React.createElement(Box, { ref: childRef, className: styles.root, width: "full", pointerEvents: "none", userSelect: "none", overflow: "hidden", borderRadius: "1", boxShadow: "4", backgroundColour: "gray900", padding: "4" },
-                React.createElement(Text, { colour: "white" }, label)))));
-};
+import { Children, cloneElement, useCallback, useRef, useState } from 'react';
+import { Box } from "../Box/index.js";
+import { Positioner } from "../Positioner/index.js";
+import { EAlignment } from "../Positioner/alignment.js";
+import { Text } from "../Text/index.js";
+import * as styles from "./Tooltip.css.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const Tooltip = _ref => {
+  let {
+    alignment = EAlignment.RIGHT,
+    label,
+    children
+  } = _ref;
+  const [isOpen, setIsOpen] = useState(false);
+  const childRef = useRef(null);
+  const triggerRef = useRef(null);
+  const leaveTimer = useRef();
+  const enterHandler = useCallback(() => {
+    if (leaveTimer.current) {
+      clearTimeout(leaveTimer.current);
+    }
+
+    setIsOpen(true);
+  }, [setIsOpen]);
+  const leaveHandler = useCallback(() => {
+    leaveTimer.current = setTimeout(() => {
+      setIsOpen(false);
+    }, 1e3 / 2);
+  }, [setIsOpen]);
+  return _jsxs(_Fragment, {
+    children: [cloneElement(Children.only(children), {
+      ref: triggerRef,
+      onMouseEnter: enterHandler,
+      onMouseLeave: leaveHandler
+    }), _jsx(Positioner, {
+      triggerRef: triggerRef,
+      alignment: alignment,
+      isOpen: isOpen,
+      children: _jsx(Box, {
+        ref: childRef,
+        className: styles.root,
+        width: "full",
+        pointerEvents: "none",
+        userSelect: "none",
+        overflow: "hidden",
+        borderRadius: "1",
+        boxShadow: "4",
+        backgroundColour: "gray900",
+        padding: "4",
+        children: _jsx(Text, {
+          colour: "white",
+          children: label
+        })
+      })
+    })]
+  });
+};

package/dist/components/Tooltip/index.js

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

package/dist/components/VisuallyHidden/VisuallyHidden.css.js

@@ -1,7 +1,15 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+
+__vanilla_filescope__.setFileScope("lib/components/VisuallyHidden/VisuallyHidden.css.ts", "@autoguru/overdrive");
+
 import { style } from '@vanilla-extract/css';
 export const root = style({
-    clip: 'rect(1px, 1px, 1px, 1px)',
-    height: 1,
-    whiteSpace: 'nowrap',
-    width: 1,
-});
+  clip: 'rect(1px, 1px, 1px, 1px)',
+  height: 1,
+  whiteSpace: 'nowrap',
+  width: 1
+}, "root");
+
+__vanilla_filescope__.endFileScope();

package/dist/components/VisuallyHidden/VisuallyHidden.js

@@ -1,4 +1,20 @@
+"use strict";
+
 import * as React from 'react';
-import { Box } from '../Box';
-import * as styles from './VisuallyHidden.css';
-export const VisuallyHidden = ({ children, is }) => (React.createElement(Box, { is: is, position: "absolute", overflow: "hidden", userSelect: "none", className: styles.root }, children));
+import { Box } from "../Box/index.js";
+import * as styles from "./VisuallyHidden.css.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const VisuallyHidden = _ref => {
+  let {
+    children,
+    is
+  } = _ref;
+  return _jsx(Box, {
+    is: is,
+    position: "absolute",
+    overflow: "hidden",
+    userSelect: "none",
+    className: styles.root,
+    children: children
+  });
+};

package/dist/components/VisuallyHidden/index.js

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

package/dist/components/index.js

@@ -1,51 +1,53 @@
-export * from './OverdriveProvider';
-export * from './ThemeProvider';
-export * from './Actions';
-export * from './Alert';
-export * from './Anchor';
-export * from './AutoSuggest';
-export * from './Badge';
-export * from './Box';
-export * from './BulletList';
-export * from './BulletText';
-export * from './Button';
-export * from './CheckBox';
-export * from './Columns';
-export * from './DateInput';
-export * from './Flyout';
-export * from './Heading';
-export * from './Icon';
-export * from './Inline';
-export * from './LinearProgressIndicator';
-export * from './LoadingBox';
-export * from './Meta';
-export * from './Modal';
-export * from './NumberInput';
-export * from './OrderedList';
-export * from './OutsideClick';
-export * from './Pagination';
-export * from './Portal';
-export * from './Positioner';
-export * from './ProgressBar';
-export * from './ProgressBarGroup';
-export * from './ProgressSpinner';
-export * from './Radio';
-export * from './Section';
-export * from './SelectInput';
-export * from './SimplePagination';
-export * from './Stack';
-export * from './StandardModal';
-export * from './StarRating';
-export * from './Stepper';
-export * from './Switch';
-export * from './Table';
-export * from './Tabs';
-export * from './Text';
-export * from './TextAreaInput';
-export * from './TextContainer';
-export * from './TextInput';
-export * from './TextLink';
-export * from './Toaster';
-export * from './Tooltip';
-export * from './VisuallyHidden';
-export * from './MinimalModal';
+"use strict";
+
+export * from "./OverdriveProvider/index.js";
+export * from "./ThemeProvider/index.js";
+export * from "./Actions/index.js";
+export * from "./Alert/index.js";
+export * from "./Anchor/index.js";
+export * from "./AutoSuggest/index.js";
+export * from "./Badge/index.js";
+export * from "./Box/index.js";
+export * from "./BulletList/index.js";
+export * from "./BulletText/index.js";
+export * from "./Button/index.js";
+export * from "./CheckBox/index.js";
+export * from "./Columns/index.js";
+export * from "./DateInput/index.js";
+export * from "./Flyout/index.js";
+export * from "./Heading/index.js";
+export * from "./Icon/index.js";
+export * from "./Inline/index.js";
+export * from "./LinearProgressIndicator/index.js";
+export * from "./LoadingBox/index.js";
+export * from "./Meta/index.js";
+export * from "./Modal/index.js";
+export * from "./NumberInput/index.js";
+export * from "./OrderedList/index.js";
+export * from "./OutsideClick/index.js";
+export * from "./Pagination/index.js";
+export * from "./Portal/index.js";
+export * from "./Positioner/index.js";
+export * from "./ProgressBar/index.js";
+export * from "./ProgressBarGroup/index.js";
+export * from "./ProgressSpinner/index.js";
+export * from "./Radio/index.js";
+export * from "./Section/index.js";
+export * from "./SelectInput/index.js";
+export * from "./SimplePagination/index.js";
+export * from "./Stack/index.js";
+export * from "./StandardModal/index.js";
+export * from "./StarRating/index.js";
+export * from "./Stepper/index.js";
+export * from "./Switch/index.js";
+export * from "./Table/index.js";
+export * from "./Tabs/index.js";
+export * from "./Text/index.js";
+export * from "./TextAreaInput/index.js";
+export * from "./TextContainer/index.js";
+export * from "./TextInput/index.js";
+export * from "./TextLink/index.js";
+export * from "./Toaster/index.js";
+export * from "./Tooltip/index.js";
+export * from "./VisuallyHidden/index.js";
+export * from "./MinimalModal/index.js";

package/dist/components/private/CheckableBase/CheckableBase.css.js

@@ -1,46 +1,54 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+
+__vanilla_filescope__.setFileScope("lib/components/private/CheckableBase/CheckableBase.css.ts", "@autoguru/overdrive");
+
 import { style, styleVariants } from '@vanilla-extract/css';
-import { vars } from '../../../themes/base/vars.css';
+import { vars } from "../../../themes/base/vars.css.js";
 export const root = style({
-    cursor: 'pointer',
-    transition: `background-color 0.2s ${vars.animation.easing.decelerate} 0s`,
-    ':hover': {
-        backgroundColor: vars.colours.background.body,
-    },
-});
+  cursor: 'pointer',
+  transition: "background-color 0.2s ".concat(vars.animation.easing.decelerate, " 0s"),
+  ':hover': {
+    backgroundColor: vars.colours.background.body
+  }
+}, "root");
 export const label = styleVariants({
-    disabled: {
-        color: vars.typography.colour.dark,
-    },
-});
+  disabled: {
+    color: vars.typography.colour.dark
+  }
+}, "label");
 export const nativeInput = styleVariants({
-    default: {
-        zIndex: 2,
-        top: 0,
-        left: 0,
-        cursor: 'inherit',
-        opacity: 0,
-    },
-    checked: {
-        outline: 'none',
-    },
-});
+  default: {
+    zIndex: 2,
+    top: 0,
+    left: 0,
+    cursor: 'inherit',
+    opacity: 0
+  },
+  checked: {
+    outline: 'none'
+  }
+}, "nativeInput");
 export const checkable = style({
-    width: `calc(${vars.space['4']} + (${vars.space[3]} * 2))`,
-    height: `calc(${vars.space['4']} + (${vars.space[3]} * 2))`,
-    marginTop: `calc(-1*${vars.space['3']})`,
-    marginBottom: `calc(-1*${vars.space['3']})`,
-});
+  width: "calc(".concat(vars.space['4'], " + (").concat(vars.space[3], " * 2))"),
+  height: "calc(".concat(vars.space['4'], " + (").concat(vars.space[3], " * 2))"),
+  marginTop: "calc(-1*".concat(vars.space['3'], ")"),
+  marginBottom: "calc(-1*".concat(vars.space['3'], ")")
+}, "checkable");
 export const checkableItem = style({
-    selectors: {
-        [`${nativeInput.default}:focus:checked ~${checkable} &`]: {
-            boxShadow: `0 0 0 2px ${vars.colours.intent.primary.background.strong}`,
-        },
-        [`${nativeInput.default}:focus:not(:checked) ~${checkable} >&`]: {
-            borderColor: vars.colours.intent.primary.background.strong,
-        },
+  selectors: {
+    ["".concat(nativeInput.default, ":focus:checked ~").concat(checkable, " &")]: {
+      boxShadow: "0 0 0 2px ".concat(vars.colours.intent.primary.background.strong)
     },
-});
+    ["".concat(nativeInput.default, ":focus:not(:checked) ~").concat(checkable, " >&")]: {
+      borderColor: vars.colours.intent.primary.background.strong
+    }
+  }
+}, "checkableItem");
 export const disabled = style({
-    opacity: 0.6,
-    pointerEvents: 'none',
-});
+  opacity: 0.6,
+  pointerEvents: 'none'
+}, "disabled");
+
+__vanilla_filescope__.endFileScope();

package/dist/components/private/CheckableBase/CheckableBase.js

@@ -1,30 +1,92 @@
+"use strict";
+
 import clsx from 'clsx';
 import * as React from 'react';
 import { forwardRef } from 'react';
-import { Box, useBoxStyles } from '../../Box';
-import { Text, useTextStyles } from '../../Text';
-import * as styles from './CheckableBase.css';
-export const CheckableBase = forwardRef(({ className = '', label = '', checked = false, disabled = false, inputType, inputName, value, children, handleClick, handleChange, }, ref) => {
-    const onChange = (e) => {
-        if (typeof handleChange === 'function') {
-            handleChange(e.currentTarget.checked);
-        }
-    };
-    const nakedLabel = ['string', 'number'].includes(typeof label);
-    return (React.createElement(Box, { display: "flex", alignItems: "center", flexDirection: "row", justifyContent: "flexStart", padding: "3", paddingLeft: "none", position: "relative", className: [
-            styles.root,
-            useBoxStyles({ is: 'button' }),
-            className,
-            { [styles.disabled]: disabled },
-        ] },
-        React.createElement(Box, { ref: ref, is: "input", position: "absolute", width: "full", height: "full", margin: "none", padding: "none", name: inputName, value: value, checked: checked, disabled: disabled, type: inputType, pointerEvents: disabled ? 'none' : void 0, className: clsx(useBoxStyles({ is: 'button' }), styles.nativeInput.default, {
-                [styles.nativeInput.checked]: checked,
-            }), onClick: handleClick, onChange: onChange }),
-        React.createElement(Box, { display: "flex", alignItems: "center", justifyContent: "center", position: "relative", className: [
-                styles.checkable,
-                useBoxStyles({ is: 'button' }),
-            ] }, children),
-        React.createElement(Box, { is: "label", width: "full", pointerEvents: disabled ? 'none' : void 0, className: clsx(useBoxStyles({ is: 'button' }), useTextStyles({ size: '4' }), {
-                [styles.label.disabled]: disabled,
-            }) }, nakedLabel ? React.createElement(Text, { is: "span" }, label) : label)));
-});
+import { Box, useBoxStyles } from "../../Box/index.js";
+import { Text, useTextStyles } from "../../Text/index.js";
+import * as styles from "./CheckableBase.css.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const CheckableBase = forwardRef((_ref, ref) => {
+  let {
+    className = '',
+    label = '',
+    checked = false,
+    disabled = false,
+    inputType,
+    inputName,
+    value,
+    children,
+    handleClick,
+    handleChange
+  } = _ref;
+
+  const onChange = e => {
+    if (typeof handleChange === 'function') {
+      handleChange(e.currentTarget.checked);
+    }
+  };
+
+  const nakedLabel = ['string', 'number'].includes(typeof label);
+  return _jsxs(Box, {
+    display: "flex",
+    alignItems: "center",
+    flexDirection: "row",
+    justifyContent: "flexStart",
+    padding: "3",
+    paddingLeft: "none",
+    position: "relative",
+    className: [styles.root, useBoxStyles({
+      is: 'button'
+    }), className, {
+      [styles.disabled]: disabled
+    }],
+    children: [_jsx(Box, {
+      ref: ref,
+      is: "input",
+      position: "absolute",
+      width: "full",
+      height: "full",
+      margin: "none",
+      padding: "none",
+      name: inputName,
+      value: value,
+      checked: checked,
+      disabled: disabled,
+      type: inputType,
+      pointerEvents: disabled ? 'none' : void 0,
+      className: clsx(useBoxStyles({
+        is: 'button'
+      }), styles.nativeInput.default, {
+        [styles.nativeInput.checked]: checked
+      }),
+      onClick: handleClick,
+      onChange: onChange
+    }), _jsx(Box, {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      position: "relative",
+      className: [styles.checkable, useBoxStyles({
+        is: 'button'
+      })],
+      children: children
+    }), _jsx(Box, {
+      is: "label",
+      width: "full",
+      pointerEvents: disabled ? 'none' : void 0,
+      className: clsx(useBoxStyles({
+        is: 'button'
+      }), useTextStyles({
+        size: '4'
+      }), {
+        [styles.label.disabled]: disabled
+      }),
+      children: nakedLabel ? _jsx(Text, {
+        is: "span",
+        children: label
+      }) : label
+    })]
+  });
+});

package/dist/components/private/CheckableBase/index.js

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

package/dist/components/private/CheckableBase/useCheckableStyles.js

@@ -1,4 +1,6 @@
-import * as styles from './CheckableBase.css';
+"use strict";
+
+import * as styles from "./CheckableBase.css.js";
 export const useCheckableStyles = () => ({
-    checkableItem: styles.checkableItem,
-});
+  checkableItem: styles.checkableItem
+});

package/dist/components/private/InputBase/HintText.css.js

@@ -1,5 +1,13 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+
+__vanilla_filescope__.setFileScope("lib/components/private/InputBase/HintText.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";
 export const hintText = style({
-    transition: `color 0.2s ${vars.animation.easing.decelerate} 0s`,
-});
+  transition: "color 0.2s ".concat(vars.animation.easing.decelerate, " 0s")
+}, "hintText");
+
+__vanilla_filescope__.endFileScope();

package/dist/components/private/InputBase/HintText.js

@@ -1,16 +1,30 @@
+"use strict";
+
 import clsx from 'clsx';
 import * as React from 'react';
-import { useBoxStyles } from '../../Box';
-import { Text } from '../../Text';
-import * as styles from './HintText.css';
-export const HintText = ({ reserveHintSpace, disabled, hintText, className = '', }) => {
-    const boxStyles = useBoxStyles({
-        is: 'p',
-        marginTop: '2',
-        marginLeft: '4',
-    });
-    if (!hintText && !reserveHintSpace)
-        return null;
-    const showHintText = !disabled && hintText;
-    return (React.createElement(Text, { is: "p", size: "2", colour: "unset", className: clsx(boxStyles, styles.hintText, className) }, showHintText ? hintText : '\u00A0'));
-};
+import { useBoxStyles } from "../../Box/index.js";
+import { Text } from "../../Text/index.js";
+import * as styles from "./HintText.css.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const HintText = _ref => {
+  let {
+    reserveHintSpace,
+    disabled,
+    hintText,
+    className = ''
+  } = _ref;
+  const boxStyles = useBoxStyles({
+    is: 'p',
+    marginTop: '2',
+    marginLeft: '4'
+  });
+  if (!hintText && !reserveHintSpace) return null;
+  const showHintText = !disabled && hintText;
+  return _jsx(Text, {
+    is: "p",
+    size: "2",
+    colour: "unset",
+    className: clsx(boxStyles, styles.hintText, className),
+    children: showHintText ? hintText : '\u00A0'
+  });
+};