@autoguru/overdrive 4.1.3 → 4.1.4

package/dist/components/LoadingBox/LoadingBox.js

@@ -1,7 +1,39 @@
+"use strict";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["className", "randomWidth", "blinking", "backgroundColour", "display", "is"];
+
+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 { 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}%`;
+import { Box } from "../Box/index.js";
+import * as styles from "./LoadingBox.css.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const LoadingBox = _ref => {
+  let {
+    className = '',
+    randomWidth = false,
+    blinking = true,
+    backgroundColour = 'gray200',
+    display = 'block',
+    is = 'span'
+  } = _ref,
+      boxStyles = _objectWithoutProperties(_ref, _excluded);
+
+  return _jsx(Box, _objectSpread(_objectSpread({
+    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, "%");

package/dist/components/LoadingBox/index.js

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

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

@@ -1,10 +1,18 @@
+"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';
+import { vars } from "../../themes/base/vars.css.js";
 export const variant = styleVariants({
-    primary: {
-        color: vars.colours.intent.primary.background.strong,
-    },
-    secondary: {
-        color: vars.typography.colour.dark,
-    },
-});
+  primary: {
+    color: vars.colours.intent.primary.background.strong
+  },
+  secondary: {
+    color: vars.typography.colour.dark
+  }
+}, "variant");
+
+__vanilla_filescope__.endFileScope();

package/dist/components/Meta/Meta.js

@@ -1,8 +1,28 @@
+"use strict";
+
 import * as React from 'react';
-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)));
+import { Inline } from "../index.js";
+import { Icon } from "../Icon/index.js";
+import { Text } from "../Text/index.js";
+import * as styles from "./Meta.css.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const Meta = _ref => {
+  let {
+    icon,
+    label,
+    variant = 'primary'
+  } = _ref;
+  return _jsxs(Inline, {
+    noWrap: true,
+    is: "span",
+    space: "2",
+    alignY: "center",
+    children: [icon && _jsx(Icon, {
+      icon: icon,
+      className: styles.variant[variant]
+    }), _jsx(Text, {
+      children: label
+    })]
+  });
+};

package/dist/components/Meta/index.js

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

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

@@ -1,10 +1,18 @@
+"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',
-});
+  outline: '0'
+}, "container");
 export const content = style({
-    overflowY: 'auto',
-    overscrollBehavior: 'contain',
-    webkitOverflowScrolling: 'touch',
-    '-webkit-overflow-scrolling': 'touch',
-});
+  overflowY: 'auto',
+  overscrollBehavior: 'contain',
+  webkitOverflowScrolling: 'touch',
+  '-webkit-overflow-scrolling': 'touch'
+}, "content");
+
+__vanilla_filescope__.endFileScope();

package/dist/components/MinimalModal/MinimalModal.js

@@ -1,29 +1,64 @@
+"use strict";
+
 import * as React from 'react';
 import { useLayoutEffect, useRef } from 'react';
-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)))));
-};
+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";
+import { jsx as _jsx } from "react/jsx-runtime";
+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 _jsx(Modal, {
+    isOpen: isOpen,
+    onRequestClose: onRequestClose,
+    children: _jsx(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,
+      children: _jsx(Box, {
+        is: "article",
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": titleId,
+        display: "flex",
+        flexDirection: "column",
+        children: _jsx(Box, {
+          is: "main",
+          display: "flex",
+          flexDirection: "column",
+          flexGrow: 1,
+          height: "full",
+          className: styles.content,
+          children: children
+        })
+      })
+    })
+  });
+};

package/dist/components/MinimalModal/index.js

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

package/dist/components/Modal/Modal.css.js

@@ -1,36 +1,44 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+
+__vanilla_filescope__.setFileScope("lib/components/Modal/Modal.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({
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  zIndex: 1000
+}, "root");
+export const transition = style({
+  transition: "transform .175s ".concat(vars.animation.easing.standard, ", opacity 0.3s ").concat(vars.animation.easing.standard)
+}, "transition");
+export const entry = style({
+  '@media': {
+    'screen and (prefers-reduced-motion)': {
+      transform: 'none !important'
+    }
+  },
+  transform: 'scale(.95)'
+}, "entry");
+export const backdrop = styleVariants({
+  root: {
     top: 0,
     right: 0,
     bottom: 0,
     left: 0,
-    zIndex: 1000,
-});
-export const transition = style({
-    transition: `transform .175s ${vars.animation.easing.standard}, opacity 0.3s ${vars.animation.easing.standard}`,
-});
-export const entry = style({
-    '@media': {
-        'screen and (prefers-reduced-motion)': {
-            transform: 'none !important',
-        },
-    },
-    transform: 'scale(.95)',
-});
-export const backdrop = styleVariants({
-    root: {
-        top: 0,
-        right: 0,
-        bottom: 0,
-        left: 0,
-        zIndex: 999,
-        backgroundColor: vars.colours.intent.neutral.background.standard,
-        opacity: 0.75,
-        backdropFilter: 'blur(5px)',
-    },
-    invisible: {
-        backgroundColor: 'transparent',
-        backdropFilter: 'none',
-    },
-});
+    zIndex: 999,
+    backgroundColor: vars.colours.intent.neutral.background.standard,
+    opacity: 0.75,
+    backdropFilter: 'blur(5px)'
+  },
+  invisible: {
+    backgroundColor: 'transparent',
+    backdropFilter: 'none'
+  }
+}, "backdrop");
+
+__vanilla_filescope__.endFileScope();

package/dist/components/Modal/Modal.js

@@ -1,86 +1,142 @@
+"use strict";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["onRequestClose", "isOpen"];
+
+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 { warning } from '@autoguru/utilities';
 import * as React from 'react';
 import { useEffect, useReducer } from 'react';
 import FocusLock from 'react-focus-lock';
-import { useEventCallback } from '../../utils';
-import { Box } from '../Box';
-import { Portal } from '../Portal';
-import * as styles from './Modal.css';
+import { useEventCallback } from "../../utils/index.js";
+import { Box } from "../Box/index.js";
+import { Portal } from "../Portal/index.js";
+import * as styles from "./Modal.css.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
 const reducer = (prevState, action) => {
-    switch (action) {
-        case 'OPEN_MODAL': {
-            switch (prevState) {
-                case 'INITIAL':
-                case 'CLOSING':
-                case 'CLOSED': {
-                    return 'OPENING';
-                }
-                default:
-                    return prevState;
+  switch (action) {
+    case 'OPEN_MODAL':
+      {
+        switch (prevState) {
+          case 'INITIAL':
+          case 'CLOSING':
+          case 'CLOSED':
+            {
+              return 'OPENING';
             }
+
+          default:
+            return prevState;
         }
-        case 'CLOSE_MODAL': {
-            switch (prevState) {
-                case 'OPEN':
-                case 'OPENING': {
-                    return 'CLOSING';
-                }
-                default:
-                    return prevState;
+      }
+
+    case 'CLOSE_MODAL':
+      {
+        switch (prevState) {
+          case 'OPEN':
+          case 'OPENING':
+            {
+              return 'CLOSING';
             }
+
+          default:
+            return prevState;
         }
-        case 'ANIMATION_COMPLETE': {
-            switch (prevState) {
-                case 'CLOSING': {
-                    return 'CLOSED';
-                }
-                case 'OPENING': {
-                    return 'OPEN';
-                }
-                default:
-                    return prevState;
+      }
+
+    case 'ANIMATION_COMPLETE':
+      {
+        switch (prevState) {
+          case 'CLOSING':
+            {
+              return 'CLOSED';
             }
-        }
-        default:
+
+          case 'OPENING':
+            {
+              return 'OPEN';
+            }
+
+          default:
             return prevState;
-    }
-};
-export const Modal = ({ isOpen, hideBackdrop = false, onRequestClose, children, }) => {
-    const [state, dispatch] = useReducer(reducer, 'INITIAL');
-    const handleBackdropClick = useEventCallback((event) => {
-        if (event.target !== event.currentTarget)
-            return;
-        if (typeof onRequestClose === 'function')
-            onRequestClose('backdrop');
-    });
-    useEffect(() => {
-        dispatch(isOpen ? 'OPEN_MODAL' : 'CLOSE_MODAL');
-    }, [isOpen]);
-    useEffect(() => {
-        if (state === 'CLOSING') {
-            const timer = setTimeout(() => {
-                dispatch('ANIMATION_COMPLETE');
-            }, 300);
-            return () => clearTimeout(timer);
         }
-        return undefined;
-    }, [state]);
-    return (React.createElement(Portal, null, state === 'OPENING' || state === 'OPEN' || state === 'CLOSING' ? (React.createElement(FocusLock, { returnFocus: true, autoFocus: false, onActivation: () => {
-            dispatch('ANIMATION_COMPLETE');
-        } },
-        React.createElement(Box, { "aria-hidden": "true", position: "fixed", pointerEvents: state === 'CLOSING' ? 'none' : undefined, opacity: state === 'OPEN' ? undefined : 0, className: [
-                styles.backdrop.root,
-                styles.transition,
-                hideBackdrop && styles.backdrop.invisible,
-            ], onClick: handleBackdropClick }),
-        React.createElement(Box, { role: "presentation", position: "fixed", overflow: "hidden", opacity: state === 'OPEN' ? undefined : 0, className: [
-                styles.root,
-                styles.transition,
-                state === 'OPENING' && styles.entry,
-            ] }, children))) : null));
+      }
+
+    default:
+      return prevState;
+  }
 };
-export const withModal = (WrappedComponent) => ({ onRequestClose, isOpen, ...rest }) => {
-    warning(false, 'Using withModal is now an anti-pattern. Use <Modal /> instead');
-    return (React.createElement(Modal, { isOpen: isOpen, onRequestClose: onRequestClose },
-        React.createElement(WrappedComponent, { isOpen: isOpen, onRequestClose: onRequestClose, ...rest })));
+
+export const Modal = _ref => {
+  let {
+    isOpen,
+    hideBackdrop = false,
+    onRequestClose,
+    children
+  } = _ref;
+  const [state, dispatch] = useReducer(reducer, 'INITIAL');
+  const handleBackdropClick = useEventCallback(event => {
+    if (event.target !== event.currentTarget) return;
+    if (typeof onRequestClose === 'function') onRequestClose('backdrop');
+  });
+  useEffect(() => {
+    dispatch(isOpen ? 'OPEN_MODAL' : 'CLOSE_MODAL');
+  }, [isOpen]);
+  useEffect(() => {
+    if (state === 'CLOSING') {
+      const timer = setTimeout(() => {
+        dispatch('ANIMATION_COMPLETE');
+      }, 300);
+      return () => clearTimeout(timer);
+    }
+
+    return undefined;
+  }, [state]);
+  return _jsx(Portal, {
+    children: state === 'OPENING' || state === 'OPEN' || state === 'CLOSING' ? _jsxs(FocusLock, {
+      returnFocus: true,
+      autoFocus: false,
+      onActivation: () => {
+        dispatch('ANIMATION_COMPLETE');
+      },
+      children: [_jsx(Box, {
+        "aria-hidden": "true",
+        position: "fixed",
+        pointerEvents: state === 'CLOSING' ? 'none' : undefined,
+        opacity: state === 'OPEN' ? undefined : 0,
+        className: [styles.backdrop.root, styles.transition, hideBackdrop && styles.backdrop.invisible],
+        onClick: handleBackdropClick
+      }), _jsx(Box, {
+        role: "presentation",
+        position: "fixed",
+        overflow: "hidden",
+        opacity: state === 'OPEN' ? undefined : 0,
+        className: [styles.root, styles.transition, state === 'OPENING' && styles.entry],
+        children: children
+      })]
+    }) : null
+  });
 };
+export const withModal = WrappedComponent => _ref2 => {
+  let {
+    onRequestClose,
+    isOpen
+  } = _ref2,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+
+  process.env.NODE_ENV !== "production" ? warning(false, 'Using withModal is now an anti-pattern. Use <Modal /> instead') : void 0;
+  return _jsx(Modal, {
+    isOpen: isOpen,
+    onRequestClose: onRequestClose,
+    children: _jsx(WrappedComponent, _objectSpread({
+      isOpen: isOpen,
+      onRequestClose: onRequestClose
+    }, rest))
+  });
+};

package/dist/components/Modal/index.js

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

package/dist/components/NumberInput/NumberInput.js

@@ -1,34 +1,65 @@
+"use strict";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["ref"],
+      _excluded2 = ["field", "eventHandlers", "validation", "isLoading", "suffixed", "prefixed", "preventMouseWheel"];
+
+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 { useCallback, useEffect, useRef } from 'react';
-import { Box } from '../Box';
-import { withEnhancedInput } from '../private/InputBase';
+import { Box } from "../Box/index.js";
+import { withEnhancedInput } from "../private/InputBase/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 const isEdge = typeof navigator !== 'undefined' && /edge/i.test(navigator.userAgent);
 const type = isEdge ? 'text' : 'number';
-export const NumberInput = withEnhancedInput(({ field: { ref, ...incomingFieldProps }, eventHandlers, validation, isLoading, suffixed, prefixed, preventMouseWheel = false, ...rest }) => {
-    const inputRef = useRef(ref?.current);
-    const preventWheel = useCallback((e) => {
-        e.preventDefault();
-        e.stopPropagation();
-    }, []);
-    useEffect(() => {
-        let mouseWheelListener;
-        let onWheelListener;
-        let wheelListener;
-        if (preventMouseWheel && inputRef?.current) {
-            mouseWheelListener = inputRef.current.addEventListener('mousewheel', preventWheel);
-            onWheelListener = inputRef.current.addEventListener('onwheel', preventWheel);
-            wheelListener = inputRef.current.addEventListener('wheel', preventWheel);
-        }
-        return () => {
-            if (mouseWheelListener)
-                inputRef.current.removeEventListener('mousewheel', mouseWheelListener);
-            if (onWheelListener)
-                inputRef.current.removeEventListener('onwheel', onWheelListener);
-            if (wheelListener)
-                inputRef.current.removeEventListener('wheel', wheelListener);
-        };
-    }, [preventMouseWheel, inputRef.current]);
-    return (React.createElement(Box, { is: "input", ref: inputRef, ...eventHandlers, ...incomingFieldProps, ...rest, autoComplete: "off", type: type }));
+export const NumberInput = withEnhancedInput(_ref => {
+  let {
+    field: {
+      ref
+    },
+    eventHandlers,
+    validation,
+    isLoading,
+    suffixed,
+    prefixed,
+    preventMouseWheel = false
+  } = _ref,
+      incomingFieldProps = _objectWithoutProperties(_ref.field, _excluded),
+      rest = _objectWithoutProperties(_ref, _excluded2);
+
+  const inputRef = useRef(ref === null || ref === void 0 ? void 0 : ref.current);
+  const preventWheel = useCallback(e => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+  useEffect(() => {
+    let mouseWheelListener;
+    let onWheelListener;
+    let wheelListener;
+
+    if (preventMouseWheel && inputRef !== null && inputRef !== void 0 && inputRef.current) {
+      mouseWheelListener = inputRef.current.addEventListener('mousewheel', preventWheel);
+      onWheelListener = inputRef.current.addEventListener('onwheel', preventWheel);
+      wheelListener = inputRef.current.addEventListener('wheel', preventWheel);
+    }
+
+    return () => {
+      if (mouseWheelListener) inputRef.current.removeEventListener('mousewheel', mouseWheelListener);
+      if (onWheelListener) inputRef.current.removeEventListener('onwheel', onWheelListener);
+      if (wheelListener) inputRef.current.removeEventListener('wheel', wheelListener);
+    };
+  }, [preventMouseWheel, inputRef.current]);
+  return _jsx(Box, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    is: "input",
+    ref: inputRef
+  }, eventHandlers), incomingFieldProps), rest), {}, {
+    autoComplete: "off",
+    type: type
+  }));
 }, {
-    primitiveType: type,
-});
+  primitiveType: type
+});

package/dist/components/NumberInput/index.js

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