@jobber/components 4.85.5-test-eleme.4 → 4.85.6-CJS-to-ESM.1

package/dist/AnimatedPresence/{index.js → index.cjs}

@@ -1,8 +1,6 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var AnimatedPresence = require('../AnimatedPresence-20a02aaa.js');
+var AnimatedPresence = require('../AnimatedPresence-DFaAEYUa.js');
 require('react');
 require('framer-motion');
 require('@jobber/design');

package/dist/AnimatedPresence/index.mjs

@@ -0,0 +1,4 @@
+export { A as AnimatedPresence } from '../AnimatedPresence-D73apgLB.js';
+import 'react';
+import 'framer-motion';
+import '@jobber/design';

package/dist/AnimatedPresence-D73apgLB.js

@@ -0,0 +1,98 @@
+import React, { useState, useEffect, Children } from 'react';
+import { useReducedMotion, AnimatePresence, motion } from 'framer-motion';
+import { tokens } from '@jobber/design';
+
+const TIMING_QUICK = toSeconds(tokens["timing-quick"]);
+const TIMING_BASE = toSeconds(tokens["timing-base"]);
+const baseTransition = {
+    visible: { opacity: 1 },
+    hidden: { opacity: 0 },
+};
+const fade = {
+    visible: { opacity: 1 },
+    hidden: { opacity: 0 },
+};
+const popIn = {
+    visible: Object.assign({ scale: 1 }, baseTransition.visible),
+    hidden: Object.assign({ scale: 0.95 }, baseTransition.hidden),
+};
+const fromTop = {
+    visible: Object.assign({ y: 0 }, baseTransition.visible),
+    hidden: Object.assign({ y: -tokens["space-base"] }, baseTransition.hidden),
+};
+const fromBottom = {
+    visible: Object.assign({ y: 0 }, baseTransition.visible),
+    hidden: Object.assign({ y: tokens["space-base"] }, baseTransition.hidden),
+};
+const fromLeft = {
+    visible: Object.assign({ x: 0 }, baseTransition.visible),
+    hidden: Object.assign({ x: -tokens["space-base"] }, baseTransition.hidden),
+};
+const fromRight = {
+    visible: Object.assign({ x: 0 }, baseTransition.visible),
+    hidden: Object.assign({ x: tokens["space-base"] }, baseTransition.hidden),
+};
+const fromLeftToRight = {
+    initial: Object.assign({ x: -tokens["space-base"] }, baseTransition.hidden),
+    visible: Object.assign({ x: 0 }, baseTransition.visible),
+    hidden: Object.assign({ x: tokens["space-base"] }, baseTransition.hidden),
+};
+const fromRightToLeft = {
+    initial: Object.assign({ x: tokens["space-base"] }, baseTransition.hidden),
+    visible: Object.assign({ x: 0 }, baseTransition.visible),
+    hidden: Object.assign({ x: -tokens["space-base"] }, baseTransition.hidden),
+};
+function toSeconds(ms) {
+    return ms / 1000;
+}
+
+function usePreviousValue(value) {
+    const [previousValue, setPreviousValue] = useState(value);
+    useEffect(() => {
+        setPreviousValue(value);
+    }, [value]);
+    return [previousValue, setPreviousValue];
+}
+
+const transitions = {
+    fromBottom,
+    fromTop,
+    fromLeft,
+    fromRight,
+    popIn,
+    fromLeftToRight,
+    fromRightToLeft,
+    fade,
+};
+function AnimatedPresence(props) {
+    const shouldReduceMotion = useReducedMotion();
+    if (shouldReduceMotion) {
+        return React.createElement(React.Fragment, null, props.children);
+    }
+    return React.createElement(InternalAnimatedPresence, Object.assign({}, props));
+}
+function InternalAnimatedPresence({ transition = "fromTop", initial = false, children, }) {
+    const transitionVariation = transitions[transition];
+    const hasInitialTransition = "initial" in transitionVariation;
+    const childCount = Children.count(children);
+    // Set the initial value to 0 so it staggers the animation on mount when
+    // initial is true.
+    const [lastChildIndex, setLastChildIndex] = usePreviousValue(0);
+    // Whenever the children count changes, update the last index.
+    useEffect(() => {
+        setLastChildIndex(childCount - 1);
+    }, [childCount]);
+    return (React.createElement(AnimatePresence, { initial: initial, mode: "popLayout" }, Children.map(children, (child, i) => child && (React.createElement(motion.div, { layout: true, variants: transitionVariation, initial: hasInitialTransition ? "initial" : "hidden", animate: "visible", exit: "hidden", transition: {
+            duration: TIMING_BASE,
+            delay: generateDelayTime(i),
+        } }, child)))));
+    function generateDelayTime(index) {
+        // Don't add a delay if it's already rendered.
+        if (lastChildIndex > index)
+            return 0;
+        // Stagger the animation starting after the previous last child index.
+        return (index - lastChildIndex) * TIMING_QUICK;
+    }
+}
+
+export { AnimatedPresence as A };

package/dist/{AnimatedPresence-20a02aaa.js → AnimatedPresence-DFaAEYUa.js}

@@ -4,10 +4,6 @@ var React = require('react');
 var framerMotion = require('framer-motion');
 var design = require('@jobber/design');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
 const TIMING_QUICK = toSeconds(design.tokens["timing-quick"]);
 const TIMING_BASE = toSeconds(design.tokens["timing-base"]);
 const baseTransition = {
@@ -73,9 +69,9 @@ const transitions = {
 function AnimatedPresence(props) {
     const shouldReduceMotion = framerMotion.useReducedMotion();
     if (shouldReduceMotion) {
-        return React__default["default"].createElement(React__default["default"].Fragment, null, props.children);
+        return React.createElement(React.Fragment, null, props.children);
     }
-    return React__default["default"].createElement(InternalAnimatedPresence, Object.assign({}, props));
+    return React.createElement(InternalAnimatedPresence, Object.assign({}, props));
 }
 function InternalAnimatedPresence({ transition = "fromTop", initial = false, children, }) {
     const transitionVariation = transitions[transition];
@@ -88,7 +84,7 @@ function InternalAnimatedPresence({ transition = "fromTop", initial = false, chi
     React.useEffect(() => {
         setLastChildIndex(childCount - 1);
     }, [childCount]);
-    return (React__default["default"].createElement(framerMotion.AnimatePresence, { initial: initial, mode: "popLayout" }, React.Children.map(children, (child, i) => child && (React__default["default"].createElement(framerMotion.motion.div, { layout: true, variants: transitionVariation, initial: hasInitialTransition ? "initial" : "hidden", animate: "visible", exit: "hidden", transition: {
+    return (React.createElement(framerMotion.AnimatePresence, { initial: initial, mode: "popLayout" }, React.Children.map(children, (child, i) => child && (React.createElement(framerMotion.motion.div, { layout: true, variants: transitionVariation, initial: hasInitialTransition ? "initial" : "hidden", animate: "visible", exit: "hidden", transition: {
             duration: TIMING_BASE,
             delay: generateDelayTime(i),
         } }, child)))));

package/dist/AnimatedSwitcher/index.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var AnimatedSwitcher = require('../AnimatedSwitcher-UmlTf067.js');
+require('react');
+require('framer-motion');
+require('../Icon-B9XNdA1T.js');
+require('@jobber/design');
+
+
+
+exports.AnimatedSwitcher = AnimatedSwitcher.AnimatedSwitcher;

package/dist/AnimatedSwitcher/index.mjs

@@ -0,0 +1,5 @@
+export { A as AnimatedSwitcher } from '../AnimatedSwitcher-B4fUExeN.js';
+import 'react';
+import 'framer-motion';
+import '../Icon-CoHJokXb.js';
+import '@jobber/design';

package/dist/AnimatedSwitcher-B4fUExeN.js

@@ -0,0 +1,90 @@
+import React, { useState } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { I as Icon } from './Icon-CoHJokXb.js';
+
+const DURATION_SIMPLE = 0.1;
+const DURATION_AVERAGE = 0.2;
+const FADE = {
+    visible: { opacity: 1 },
+    hidden: { opacity: 0 },
+};
+const SLIDE_IN_UP = {
+    visible: { y: 0, opacity: 1 },
+    hidden: { y: "10%", opacity: 0 },
+};
+const SLIDE_IN_DOWN = {
+    visible: { y: 0, opacity: 1 },
+    hidden: { y: "-10%", opacity: 0 },
+};
+const SPIN_COUNTER_CLOCK_WISE = {
+    visible: {
+        rotate: 0,
+        scale: 1,
+        transition: { duration: DURATION_AVERAGE, ease: "easeOut" },
+    },
+    hidden: {
+        rotate: 180,
+        scale: 0.6,
+        transition: { duration: DURATION_AVERAGE, ease: "easeIn" },
+    },
+};
+const SPIN_CLOCK_WISE = {
+    visible: {
+        rotate: 0,
+        scale: 1,
+        transition: { duration: DURATION_AVERAGE, ease: "easeOut" },
+    },
+    hidden: {
+        rotate: -180,
+        scale: 0.6,
+        transition: { duration: DURATION_AVERAGE, ease: "easeIn" },
+    },
+};
+
+function AnimatedSwitcher({ initialChild, switched, switchTo, type = "slideFromBottom", }) {
+    const [ref, setRef] = useState(null);
+    const isSwitchingBetweenIcons = initialChild.type === Icon && switchTo.type === Icon;
+    const { key, transition, child, duration } = getChildData();
+    return (React.createElement(AnimatePresence, { mode: "wait", initial: false },
+        React.createElement(motion.div, { ref: setRef, key: key, variants: transition, initial: "hidden", animate: "visible", exit: "hidden", transition: { duration }, style: { display: getDisplayValue() } }, child)));
+    function getDisplayValue() {
+        if (ref === null || ref === void 0 ? void 0 : ref.firstElementChild) {
+            return window.getComputedStyle(ref.firstElementChild).display;
+        }
+    }
+    function getChildData() {
+        let data = { key: `${initialChild.type}_1`, child: initialChild };
+        if (switched) {
+            data = { key: `${switchTo.type}_2`, child: switchTo };
+        }
+        return Object.assign(Object.assign({}, data), { transition: getTransitionType(), duration: getTransitionDuration() });
+    }
+    function getTransitionType() {
+        if (isSwitchingBetweenIcons) {
+            if (switched)
+                return SPIN_COUNTER_CLOCK_WISE;
+            return SPIN_CLOCK_WISE;
+        }
+        else if (type === "fade") {
+            return FADE;
+        }
+        else {
+            if (switched)
+                return SLIDE_IN_UP;
+            return SLIDE_IN_DOWN;
+        }
+    }
+    function getTransitionDuration() {
+        switch (type) {
+            case "fade":
+                return DURATION_AVERAGE;
+            default:
+                return DURATION_SIMPLE;
+        }
+    }
+}
+AnimatedSwitcher.Icon = function AnimatedSwitcherIcon({ switchToIcon, switched, initialIcon, }) {
+    return (React.createElement(AnimatedSwitcher, { switched: switched, initialChild: React.createElement(Icon, { name: initialIcon }), switchTo: React.createElement(Icon, { name: switchToIcon }) }));
+};
+
+export { AnimatedSwitcher as A };

package/dist/{AnimatedSwitcher-3d45ec5d.js → AnimatedSwitcher-UmlTf067.js}

@@ -2,11 +2,7 @@
 
 var React = require('react');
 var framerMotion = require('framer-motion');
-var Icon = require('./Icon-405a216c.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var Icon = require('./Icon-B9XNdA1T.js');
 
 const DURATION_SIMPLE = 0.1;
 const DURATION_AVERAGE = 0.2;
@@ -51,8 +47,8 @@ function AnimatedSwitcher({ initialChild, switched, switchTo, type = "slideFromB
     const [ref, setRef] = React.useState(null);
     const isSwitchingBetweenIcons = initialChild.type === Icon.Icon && switchTo.type === Icon.Icon;
     const { key, transition, child, duration } = getChildData();
-    return (React__default["default"].createElement(framerMotion.AnimatePresence, { mode: "wait", initial: false },
-        React__default["default"].createElement(framerMotion.motion.div, { ref: setRef, key: key, variants: transition, initial: "hidden", animate: "visible", exit: "hidden", transition: { duration }, style: { display: getDisplayValue() } }, child)));
+    return (React.createElement(framerMotion.AnimatePresence, { mode: "wait", initial: false },
+        React.createElement(framerMotion.motion.div, { ref: setRef, key: key, variants: transition, initial: "hidden", animate: "visible", exit: "hidden", transition: { duration }, style: { display: getDisplayValue() } }, child)));
     function getDisplayValue() {
         if (ref === null || ref === void 0 ? void 0 : ref.firstElementChild) {
             return window.getComputedStyle(ref.firstElementChild).display;
@@ -90,7 +86,7 @@ function AnimatedSwitcher({ initialChild, switched, switchTo, type = "slideFromB
     }
 }
 AnimatedSwitcher.Icon = function AnimatedSwitcherIcon({ switchToIcon, switched, initialIcon, }) {
-    return (React__default["default"].createElement(AnimatedSwitcher, { switched: switched, initialChild: React__default["default"].createElement(Icon.Icon, { name: initialIcon }), switchTo: React__default["default"].createElement(Icon.Icon, { name: switchToIcon }) }));
+    return (React.createElement(AnimatedSwitcher, { switched: switched, initialChild: React.createElement(Icon.Icon, { name: initialIcon }), switchTo: React.createElement(Icon.Icon, { name: switchToIcon }) }));
 };
 
 exports.AnimatedSwitcher = AnimatedSwitcher;

package/dist/Autocomplete/Menu.d.ts

@@ -1,4 +1,4 @@
-import { RefObject } from "react";
+import React, { RefObject } from "react";
 import { Option } from "./Option";
 interface MenuProps {
     readonly visible: boolean;
@@ -10,5 +10,5 @@ interface MenuProps {
     readonly attachTo: RefObject<Element | null>;
     onOptionSelect(chosenOption: Option): void;
 }
-export declare function Menu({ visible, options, selectedOption, onOptionSelect, attachTo, }: MenuProps): JSX.Element;
+export declare function Menu({ visible, options, selectedOption, onOptionSelect, attachTo, }: MenuProps): React.ReactPortal;
 export {};

package/dist/Autocomplete/index.cjs

@@ -0,0 +1,34 @@
+'use strict';
+
+var Autocomplete = require('../Autocomplete-CDpl009j.js');
+require('../tslib.es6-ld72nsZq.js');
+require('react');
+require('../debounce-B-pQrPa0.js');
+require('../_commonjsHelpers-BJu3ubxk.js');
+require('../isObjectLike-CsWGWxp9.js');
+require('../isSymbol-CqL-NQwG.js');
+require('../style-inject.es-XZHJH68X.js');
+require('classnames');
+require('react-dom');
+require('react-popper');
+require('@jobber/hooks/useOnKeyDown');
+require('@jobber/hooks/useSafeLayoutEffect');
+require('../Text-D9gsHxbp.js');
+require('../Typography-Dx8KtnBw.js');
+require('../Icon-B9XNdA1T.js');
+require('@jobber/design');
+require('../Heading-suKDLmO4.js');
+require('../getAtlantisConfig-mcMVqf6m.js');
+require('../InputText-D1KkzO4T.js');
+require('../FormField-BBg_JAlJ.js');
+require('react-hook-form');
+require('@jobber/hooks/useShowClear');
+require('../Button-D3mW3Hcg.js');
+require('react-router-dom');
+require('../InputValidation-DIwnbDDv.js');
+require('framer-motion');
+require('../Spinner-DT15aa_r.js');
+
+
+
+exports.Autocomplete = Autocomplete.Autocomplete;

package/dist/Autocomplete/index.mjs

@@ -0,0 +1,28 @@
+export { A as Autocomplete } from '../Autocomplete-DcuJsI7Z.js';
+import '../tslib.es6-Df1SgIEn.js';
+import 'react';
+import '../debounce-asENWBkf.js';
+import '../_commonjsHelpers-BFTU3MAI.js';
+import '../isObjectLike-91E0YOes.js';
+import '../isSymbol-BEvcpX3s.js';
+import '../style-inject.es-tgCJW-Cu.js';
+import 'classnames';
+import 'react-dom';
+import 'react-popper';
+import '@jobber/hooks/useOnKeyDown';
+import '@jobber/hooks/useSafeLayoutEffect';
+import '../Text-DEviM1Tv.js';
+import '../Typography-G8pA_xwj.js';
+import '../Icon-CoHJokXb.js';
+import '@jobber/design';
+import '../Heading-CL3UujY7.js';
+import '../getAtlantisConfig-6FPWID0P.js';
+import '../InputText-CgykvJl2.js';
+import '../FormField-C-d0U7Ww.js';
+import 'react-hook-form';
+import '@jobber/hooks/useShowClear';
+import '../Button-CWVwgwhn.js';
+import 'react-router-dom';
+import '../InputValidation-BmgvSw0e.js';
+import 'framer-motion';
+import '../Spinner-BOhyUAA_.js';

package/dist/{Autocomplete/index.js → Autocomplete-CDpl009j.js}

@@ -1,40 +1,20 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib_es6 = require('../tslib.es6-754e2961.js');
+var tslib_es6 = require('./tslib.es6-ld72nsZq.js');
 var React = require('react');
-var debounce = require('lodash/debounce');
-var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
+var debounce = require('./debounce-B-pQrPa0.js');
+var styleInject_es = require('./style-inject.es-XZHJH68X.js');
 var classnames = require('classnames');
 var ReactDOM = require('react-dom');
 var reactPopper = require('react-popper');
 var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
 var useSafeLayoutEffect = require('@jobber/hooks/useSafeLayoutEffect');
-var useIsMounted = require('@jobber/hooks/useIsMounted');
-var Text = require('../Text-259af966.js');
-var Icon = require('../Icon-405a216c.js');
-var Heading = require('../Heading-1e8e4bd3.js');
-var InputText = require('../InputText-55b6cb65.js');
-require('../Typography-c45bf216.js');
-require('@jobber/design');
-require('../getAtlantisConfig-0f3e8af2.js');
-require('../FormField-6ff183f8.js');
-require('react-hook-form');
-require('@jobber/hooks/useShowClear');
-require('../Button-b73a5e01.js');
-require('react-router-dom');
-require('../InputValidation-05e839fa.js');
-require('framer-motion');
-require('../Spinner-9d8fc7ff.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
-var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+var Text = require('./Text-D9gsHxbp.js');
+var Icon = require('./Icon-B9XNdA1T.js');
+var Heading = require('./Heading-suKDLmO4.js');
+var InputText = require('./InputText-D1KkzO4T.js');
 
-var css_248z = ".v0Cys9vQ-NE- {\n  position: relative;\n  width: 100%;\n}\n\n.CX-N-e0e6og- {\n  display: none;\n  position: absolute;\n  z-index: calc(6 + 1001);\n  z-index: calc(var(--elevation-menu) + var(--elevation-modal));\n  width: 100%;\n  /* Unfortunately this is how we define our line item picker height in jobber online.\n  This is a concession to maintain visual parity. */\n  max-height: 300px;\n  box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n      rgba(0, 0, 0, 0.1),\n    0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n  box-shadow: var(--shadow-base);\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  border: calc(16px / 16) solid var(--color-color-border);\n  border: var(--border-base) solid var(--color-color-border);\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n  overflow: auto;\n  scroll-behavior: smooth;\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n.CX-N-e0e6og- h5 {\n  padding: calc(16px / 2) 0 calc(16px / 4) calc(16px / 2);\n  padding: var(--space-small) 0 var(--space-smaller) var(--space-small);\n  border-bottom: calc(16px / 16) solid rgb(1, 41, 57);\n  border-bottom: var(--border-base) solid var(--color-border--section);\n}\n\n.CX-N-e0e6og-._4PlUaegVpkk- {\n  display: block;\n}\n\n.CX-N-e0e6og-._4PlUaegVpkk-:empty {\n  display: none;\n}\n\n.ucQtG0iwqbo- {\n  display: -ms-flexbox;\n  display: flex;\n  width: 100%;\n  -ms-flex-direction: row;\n      flex-direction: row;\n  -ms-flex-wrap: nowrap;\n      flex-wrap: nowrap;\n  -ms-flex-pack: start;\n      justify-content: flex-start;\n  -ms-flex-line-pack: stretch;\n      align-content: stretch;\n  -ms-flex-align: center;\n      align-items: center;\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border: none;\n  text-align: left;\n  list-style: none;\n  background-color: transparent;\n  cursor: pointer;\n  transition: all 200ms;\n  transition: all var(--timing-base);\n}\n\n.ucQtG0iwqbo-:hover,\n.ucQtG0iwqbo-:focus,\n.ucQtG0iwqbo-.r8HS-ma79QE- {\n  background-color: rgb(244, 246, 250);\n  background-color: var(--color-surface--hover);\n  outline-color: rgb(147, 161, 169);\n  outline-color: var(--color-focus);\n}\n\n.ucQtG0iwqbo-.ydwLX44YFZc-:not(:last-child) {\n  border-bottom: calc(16px / 16) solid rgb(217, 223, 225);\n  border-bottom: var(--border-base) solid var(--color-border);\n}\n\n.CX-N-e0e6og-:hover .ucQtG0iwqbo-.r8HS-ma79QE-:not(:hover) {\n  background-color: transparent;\n  outline-color: transparent;\n}\n\n.v0Cys9vQ-NE- .PvUgNoAUG7A-:not(:first-child) {\n  padding-top: calc(16px / 2);\n  padding-top: var(--space-small);\n}\n\n.ucQtG0iwqbo- .DAOOFUZ1BRM- {\n  -ms-flex: 0 1 auto;\n      flex: 0 1 auto;\n  -ms-flex-item-align: auto;\n      align-self: auto;\n  width: calc(16px * 1.5);\n  width: var(--space-large);\n}\n\n.ucQtG0iwqbo- .cjKJFup6hGY- {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -ms-flex: 1 100%;\n      flex: 1 100%;\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n}\n\n.ucQtG0iwqbo- .hG5zNBuI2wA- {\n  -ms-flex: 2;\n      flex: 2;\n}\n\n.ucQtG0iwqbo- ._3CwjFCbhqi4- {\n  -ms-flex: 1;\n      flex: 1;\n  -ms-flex-item-align: end;\n      align-self: flex-end;\n  text-align: right;\n}\n";
+var css_248z = ".v0Cys9vQ-NE- {\n  position: relative;\n  width: 100%;\n}\n\n.CX-N-e0e6og- {\n  display: none;\n  position: absolute;\n  z-index: calc(var(--elevation-menu) + var(--elevation-modal));\n  width: 100%;\n  /* Unfortunately this is how we define our line item picker height in jobber online.\n  This is a concession to maintain visual parity. */\n  max-height: 300px;\n  box-shadow: var(--shadow-base);\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  border: var(--border-base) solid var(--color-color-border);\n  border-radius: var(--radius-base);\n  overflow: auto;\n  scroll-behavior: smooth;\n  background-color: var(--color-surface);\n}\n\n.CX-N-e0e6og- h5 {\n  padding: var(--space-small) 0 var(--space-smaller) var(--space-small);\n  border-bottom: var(--border-base) solid var(--color-border--section);\n}\n\n.CX-N-e0e6og-._4PlUaegVpkk- {\n  display: block;\n}\n\n.CX-N-e0e6og-._4PlUaegVpkk-:empty {\n  display: none;\n}\n\n.ucQtG0iwqbo- {\n  display: -ms-flexbox;\n  display: flex;\n  width: 100%;\n  -ms-flex-direction: row;\n      flex-direction: row;\n  -ms-flex-wrap: nowrap;\n      flex-wrap: nowrap;\n  -ms-flex-pack: start;\n      justify-content: flex-start;\n  -ms-flex-line-pack: stretch;\n      align-content: stretch;\n  -ms-flex-align: center;\n      align-items: center;\n  padding: var(--space-small);\n  border: none;\n  text-align: left;\n  list-style: none;\n  background-color: transparent;\n  cursor: pointer;\n  transition: all var(--timing-base);\n}\n\n.ucQtG0iwqbo-:hover,\n.ucQtG0iwqbo-:focus,\n.ucQtG0iwqbo-.r8HS-ma79QE- {\n  background-color: var(--color-surface--hover);\n  outline-color: var(--color-focus);\n}\n\n.ucQtG0iwqbo-.ydwLX44YFZc-:not(:last-child) {\n  border-bottom: var(--border-base) solid var(--color-border);\n}\n\n.CX-N-e0e6og-:hover .ucQtG0iwqbo-.r8HS-ma79QE-:not(:hover) {\n  background-color: transparent;\n  outline-color: transparent;\n}\n\n.v0Cys9vQ-NE- .PvUgNoAUG7A-:not(:first-child) {\n  padding-top: var(--space-small);\n}\n\n.ucQtG0iwqbo- .DAOOFUZ1BRM- {\n  -ms-flex: 0 1 auto;\n      flex: 0 1 auto;\n  -ms-flex-item-align: auto;\n      align-self: auto;\n  width: var(--space-large);\n}\n\n.ucQtG0iwqbo- .cjKJFup6hGY- {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -ms-flex: 1 100%;\n      flex: 1 100%;\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n}\n\n.ucQtG0iwqbo- .hG5zNBuI2wA- {\n  -ms-flex: 2;\n      flex: 2;\n}\n\n.ucQtG0iwqbo- ._3CwjFCbhqi4- {\n  -ms-flex: 1;\n      flex: 1;\n  -ms-flex-item-align: end;\n      align-self: flex-end;\n  text-align: right;\n}\n";
 var styles = {"autocomplete":"v0Cys9vQ-NE-","options":"CX-N-e0e6og-","visible":"_4PlUaegVpkk-","option":"ucQtG0iwqbo-","active":"r8HS-ma79QE-","separator":"ydwLX44YFZc-","heading":"PvUgNoAUG7A-","icon":"DAOOFUZ1BRM-","text":"cjKJFup6hGY-","label":"hG5zNBuI2wA-","details":"_3CwjFCbhqi4-"};
 styleInject_es.styleInject(css_248z);
 
@@ -43,9 +23,6 @@ var IndexChange;
     IndexChange[IndexChange["Previous"] = -1] = "Previous";
     IndexChange[IndexChange["Next"] = 1] = "Next";
 })(IndexChange || (IndexChange = {}));
-// Adding useIsMounted is what tipped this to 13 statements.
-// Any additions beyond useIsMounted should probably see this component refactored a bit
-// eslint-disable-next-line max-statements
 function Menu({ visible, options, selectedOption, onOptionSelect, attachTo, }) {
     const [highlightedIndex, setHighlightedIndex] = React.useState(0);
     const { menuRef, setMenuRef, styles: popperStyles, attributes, targetWidth, } = useRepositionMenu(attachTo, visible);
@@ -55,26 +32,25 @@ function Menu({ visible, options, selectedOption, onOptionSelect, attachTo, }) {
     const initialHighlight = options.some(detectGroups) ? 1 : 0;
     setupKeyListeners();
     React.useEffect(() => setHighlightedIndex(initialHighlight), [options]);
-    const mounted = useIsMounted.useIsMounted();
-    const menu = (React__default["default"].createElement("div", Object.assign({ className: classnames__default["default"](styles.options, { [styles.visible]: visible }), ref: setMenuRef, style: Object.assign(Object.assign({}, popperStyles.popper), { width: targetWidth }) }, attributes.popper), options.map((option, index) => {
-        const optionClass = classnames__default["default"](styles.option, {
+    const menu = (React.createElement("div", Object.assign({ className: classnames(styles.options, { [styles.visible]: visible }), ref: setMenuRef, style: Object.assign(Object.assign({}, popperStyles.popper), { width: targetWidth }) }, attributes.popper), options.map((option, index) => {
+        const optionClass = classnames(styles.option, {
             [styles.active]: index === highlightedIndex,
             [styles.separator]: addSeparators,
         });
         if (isGroup(option)) {
-            return (React__default["default"].createElement("div", { key: option.label, className: styles.heading },
-                React__default["default"].createElement(Heading.Heading, { level: 5 }, option.label)));
+            return (React.createElement("div", { key: option.label, className: styles.heading },
+                React.createElement(Heading.Heading, { level: 5 }, option.label)));
         }
-        return (React__default["default"].createElement("button", { className: optionClass, key: option.value, onMouseDown: onOptionSelect.bind(undefined, option) },
-            React__default["default"].createElement("div", { className: styles.icon }, isOptionSelected(selectedOption, option) && (React__default["default"].createElement(Icon.Icon, { name: "checkmark", size: "small" }))),
-            React__default["default"].createElement("div", { className: styles.text },
-                React__default["default"].createElement("div", { className: styles.label },
-                    React__default["default"].createElement(Text.Text, null, option.label),
-                    option.description !== undefined && (React__default["default"].createElement(Text.Text, { variation: "subdued" }, option.description))),
-                option.details !== undefined && (React__default["default"].createElement("div", { className: styles.details },
-                    React__default["default"].createElement(Text.Text, null, option.details))))));
+        return (React.createElement("button", { className: optionClass, key: option.value, onMouseDown: onOptionSelect.bind(undefined, option) },
+            React.createElement("div", { className: styles.icon }, isOptionSelected(selectedOption, option) && (React.createElement(Icon.Icon, { name: "checkmark", size: "small" }))),
+            React.createElement("div", { className: styles.text },
+                React.createElement("div", { className: styles.label },
+                    React.createElement(Text.Text, null, option.label),
+                    option.description !== undefined && (React.createElement(Text.Text, { variation: "subdued" }, option.description))),
+                option.details !== undefined && (React.createElement("div", { className: styles.details },
+                    React.createElement(Text.Text, null, option.details))))));
     })));
-    return mounted.current ? ReactDOM.createPortal(menu, document.body) : menu;
+    return ReactDOM.createPortal(menu, document.body);
     function setupKeyListeners() {
         React.useEffect(() => {
             var _a, _b;
@@ -149,7 +125,7 @@ function AutocompleteInternal(_a, ref) {
     const [menuVisible, setMenuVisible] = React.useState(false);
     const [inputText, setInputText] = React.useState((_b = value === null || value === void 0 ? void 0 : value.label) !== null && _b !== void 0 ? _b : "");
     const autocompleteRef = React.useRef(null);
-    const delayedSearch = debounce__default["default"](updateSearch, debounceRate);
+    const delayedSearch = debounce.debounce(updateSearch, debounceRate);
     React.useEffect(() => {
         delayedSearch();
         return delayedSearch.cancel;
@@ -158,9 +134,9 @@ function AutocompleteInternal(_a, ref) {
         var _a;
         updateInput((_a = value === null || value === void 0 ? void 0 : value.label) !== null && _a !== void 0 ? _a : "");
     }, [value]);
-    return (React__default["default"].createElement("div", { className: styles.autocomplete, ref: autocompleteRef },
-        React__default["default"].createElement(InputText.InputText, Object.assign({ ref: ref, autocomplete: false, size: size, value: inputText, onChange: handleInputChange, placeholder: placeholder, onFocus: handleInputFocus, onBlur: handleInputBlur, validations: validations }, inputProps)),
-        menuVisible && (React__default["default"].createElement(Menu, { attachTo: autocompleteRef, visible: menuVisible && options.length > 0, options: options, selectedOption: value, onOptionSelect: handleMenuChange }))));
+    return (React.createElement("div", { className: styles.autocomplete, ref: autocompleteRef },
+        React.createElement(InputText.InputText, Object.assign({ ref: ref, autocomplete: false, size: size, value: inputText, onChange: handleInputChange, placeholder: placeholder, onFocus: handleInputFocus, onBlur: handleInputBlur, validations: validations }, inputProps)),
+        menuVisible && (React.createElement(Menu, { attachTo: autocompleteRef, visible: menuVisible && options.length > 0, options: options, selectedOption: value, onOptionSelect: handleMenuChange }))));
     function updateInput(newText) {
         setInputText(newText);
         if (newText === "") {