@jobber/components 4.7.1-pre.5 → 4.7.1-pre.7

package/dist/DataTable/index.js

@@ -5,13 +5,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var reactTable = require('@tanstack/react-table');
 var classnames = require('classnames');
 var React = require('react');
-var useResizeObserver = require('@jobber/hooks/dist/useResizeObserver');
+var require$$0 = require('@apollo/client');
+var require$$1 = require('lodash');
+var require$$3 = require('@jobber/formatters');
+var useEventListener = require('@use-it/event-listener');
+var require$$1$1 = require('zxcvbn');
+var require$$1$2 = require('use-resize-observer/polyfilled');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var tslib_es6 = require('../tslib.es6-5b8768b7.js');
 var Option = require('../Option-1447547b.js');
 var Button = require('../Button-69409e46.js');
 var Text = require('../Text-e7ed0974.js');
-var jobberHooks = require('@jobber/hooks/dist/index');
+var jobberHooks = require('@jobber/hooks/index');
 require('../FormField-03e36a98.js');
 require('uuid');
 require('react-hook-form');
@@ -26,27 +31,680 @@ require('../Typography-fd6f932a.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n["default"] = e;
-  return Object.freeze(n);
+	if (e && e.__esModule) return e;
+	var n = Object.create(null);
+	if (e) {
+		Object.keys(e).forEach(function (k) {
+			if (k !== 'default') {
+				var d = Object.getOwnPropertyDescriptor(e, k);
+				Object.defineProperty(n, k, d.get ? d : {
+					enumerable: true,
+					get: function () { return e[k]; }
+				});
+			}
+		});
+	}
+	n["default"] = e;
+	return Object.freeze(n);
 }
 
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var require$$0__default = /*#__PURE__*/_interopDefaultLegacy(require$$0);
+var require$$1__default = /*#__PURE__*/_interopDefaultLegacy(require$$1);
+var require$$3__default = /*#__PURE__*/_interopDefaultLegacy(require$$3);
+var useEventListener__default = /*#__PURE__*/_interopDefaultLegacy(useEventListener);
+var require$$1__default$1 = /*#__PURE__*/_interopDefaultLegacy(require$$1$1);
+var require$$1__default$2 = /*#__PURE__*/_interopDefaultLegacy(require$$1$2);
 var jobberHooks__namespace = /*#__PURE__*/_interopNamespace(jobberHooks);
 
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+var useAssert$2 = {};
+
+var useAssert$1 = {};
+
+// for now just expose the builtin process global from node.js
+var process = commonjsGlobal.process;
+
+var __importDefault$2 = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(useAssert$1, "__esModule", { value: true });
+useAssert$1.useAssert = void 0;
+const process_1 = __importDefault$2(process);
+function useAssert(shouldShow, message, options) {
+    if (process_1.default.env.NODE_ENV !== "production" && shouldShow) {
+        if (options === null || options === void 0 ? void 0 : options.warn) {
+            console.warn(message);
+        }
+        else {
+            throw new Error(message);
+        }
+    }
+}
+useAssert$1.useAssert = useAssert;
+
+(function (exports) {
+	Object.defineProperty(exports, "__esModule", { value: true });
+	exports.useAssert = void 0;
+	var useAssert_1 = useAssert$1;
+	Object.defineProperty(exports, "useAssert", { enumerable: true, get: function () { return useAssert_1.useAssert; } });
+} (useAssert$2));
+
+var useCollectionQuery$2 = {};
+
+var useCollectionQuery$1 = {};
+
+var uniqueNodes$1 = {};
+
+Object.defineProperty(uniqueNodes$1, "__esModule", { value: true });
+uniqueNodes$1.uniqueNodes = void 0;
+function uniqueNodes(nodes) {
+    const result = new Map();
+    nodes.forEach(node => {
+        result.set(`${node.__typename}-${node.id}`, node);
+    });
+    return Array.from(result.values());
+}
+uniqueNodes$1.uniqueNodes = uniqueNodes;
+
+var uniqueEdges$1 = {};
+
+Object.defineProperty(uniqueEdges$1, "__esModule", { value: true });
+uniqueEdges$1.uniqueEdges = uniqueEdges$1.createEdge = void 0;
+function createEdge(node) {
+    return {
+        node: node,
+        cursor: "",
+        __typename: `${node.__typename}Edge`,
+    };
+}
+uniqueEdges$1.createEdge = createEdge;
+function uniqueEdges(edges) {
+    const result = new Map();
+    edges.forEach(edge => {
+        result.set(`${edge.__typename}-${edge.node.__typename}-${edge.node.id}`, edge);
+    });
+    return Array.from(result.values());
+}
+uniqueEdges$1.uniqueEdges = uniqueEdges;
+
+var useIsMounted$2 = {};
+
+var useIsMounted$1 = {};
+
+Object.defineProperty(useIsMounted$1, "__esModule", { value: true });
+useIsMounted$1.useIsMounted = void 0;
+const react_1$6 = React__default["default"];
+/**
+ * Why does this work?
+ *
+ * The following is from the react docs:
+ *    [The return function from `useLayoutEffect`] is the optional cleanup mechanism for effects.
+ *    Every effect may return a function that cleans up after it.
+ *
+ *    When exactly does React clean up an effect? React performs the cleanup when the component unmounts.
+ *    The cleanup for useLayoutEffect is called after component unmounts and before before browser painting
+ *    the screen
+ *
+ * What does that mean for us? When this hook is initially loaded, we then trigger a `useLayoutEffect` that
+ * sets the isMounted to true right after the component is mounted.
+ * When the component unmounts, it calls the cleanup function that sets `isMounted` to false.
+ * This `useLayoutEffect` hook will only be run once.
+ */
+function useIsMounted() {
+    const isMounted = (0, react_1$6.useRef)(false);
+    (0, react_1$6.useLayoutEffect)(() => {
+        isMounted.current = true;
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+    return isMounted;
+}
+useIsMounted$1.useIsMounted = useIsMounted;
+
+(function (exports) {
+	Object.defineProperty(exports, "__esModule", { value: true });
+	exports.useIsMounted = void 0;
+	var useIsMounted_1 = useIsMounted$1;
+	Object.defineProperty(exports, "useIsMounted", { enumerable: true, get: function () { return useIsMounted_1.useIsMounted; } });
+} (useIsMounted$2));
+
+Object.defineProperty(useCollectionQuery$1, "__esModule", { value: true });
+useCollectionQuery$1.isAlreadyUpdated = useCollectionQuery$1.useCollectionQuery = void 0;
+const client_1 = require$$0__default["default"];
+const lodash_1 = require$$1__default["default"];
+const react_1$5 = React__default["default"];
+const formatters_1 = require$$3__default["default"];
+const uniqueNodes_1 = uniqueNodes$1;
+const uniqueEdges_1 = uniqueEdges$1;
+const useIsMounted_1 = useIsMounted$2;
+function useCollectionQuery({ query, queryOptions, getCollectionByPath, subscription, }) {
+    var _a, _b;
+    const { data, loading, refetch, error, fetchMore, subscribeToMore } = (0, client_1.useQuery)(query, queryOptions);
+    const isMounted = (0, useIsMounted_1.useIsMounted)();
+    const [loadingRefresh, setLoadingRefresh] = (0, react_1$5.useState)(false);
+    const [loadingNextPage, setLoadingNextPage] = (0, react_1$5.useState)(false);
+    const loadingInitialContent = loading && !loadingRefresh && !loadingNextPage;
+    const isSearching = !!((_a = queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.variables) === null || _a === void 0 ? void 0 : _a.searchTerm);
+    const refresh = (0, react_1$5.useCallback)(() => {
+        if (loadingInitialContent || loadingRefresh) {
+            return;
+        }
+        setLoadingRefresh(true);
+        fetchMore({
+            // a workaround fix for the error described in this post
+            // https://github.com/apollographql/apollo-client/issues/7491#issuecomment-767985363
+            // These changes can be reverted once we can update to version 3.4
+            // (the current release candidate)
+            variables: {},
+            updateQuery: (prev, { fetchMoreResult }) => fetchMoreResult || prev,
+        })
+            .catch(err => formatters_1.config.errorNotifier("Refetch Error", err))
+            .finally(() => {
+            if (isMounted.current) {
+                setLoadingRefresh(false);
+            }
+        });
+    }, [
+        loadingInitialContent,
+        loadingRefresh,
+        setLoadingRefresh,
+        refetch,
+        isMounted,
+    ]);
+    const nextPage = (0, react_1$5.useCallback)(() => {
+        var _a;
+        if (loadingInitialContent || loadingRefresh || loadingNextPage) {
+            return;
+        }
+        const pageInfo = (_a = getCollectionByPath(data)) === null || _a === void 0 ? void 0 : _a.pageInfo;
+        if (!pageInfo || !pageInfo.hasNextPage) {
+            return;
+        }
+        setLoadingNextPage(true);
+        fetchMore({
+            variables: {
+                cursor: pageInfo.endCursor,
+            },
+            updateQuery: (prev, { fetchMoreResult }) => fetchMoreUpdateQueryHandler(prev, fetchMoreResult, getCollectionByPath),
+        })
+            .catch(err => formatters_1.config.errorNotifier("FetchMore Error", err))
+            .finally(() => {
+            if (isMounted.current) {
+                setLoadingNextPage(false);
+            }
+        });
+    }, [
+        data,
+        loadingInitialContent,
+        loadingRefresh,
+        fetchMore,
+        loadingNextPage,
+        setLoadingNextPage,
+        getCollectionByPath,
+        isMounted,
+    ]);
+    (0, react_1$5.useEffect)(() => {
+        if (subscription == undefined)
+            return;
+        const subscriptionOptions = subscription.options || {};
+        return subscribeToMore(Object.assign(Object.assign({}, subscriptionOptions), { document: subscription.document, updateQuery: (prev, { subscriptionData }) => subscribeToMoreHandler(isSearching, prev, getCollectionByPath, subscriptionData === null || subscriptionData === void 0 ? void 0 : subscriptionData.data, subscription.getNodeByPath), onError: err => formatters_1.config.errorNotifier("Subscribe to More Error", err) }));
+    }, 
+    // Disabling this linter so we can force this only run once. If we didn't
+    // do this we would need to ensure subscription, subscribeToMore, and getNodeByPath
+    // all use useCallback.
+    [(_b = queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.variables) === null || _b === void 0 ? void 0 : _b.searchTerm]);
+    return {
+        data,
+        error,
+        refresh,
+        loadingRefresh,
+        nextPage,
+        loadingNextPage,
+        loadingInitialContent,
+    };
+}
+useCollectionQuery$1.useCollectionQuery = useCollectionQuery;
+/**
+ * The following method uses an `output` variable, and indirectly modifies it through the `outputCollection` variable.
+ * This type of indirect modification is prone to bugs, but I couldn't think of a better way to write this code.
+ *
+ * Here's what I was balancing:
+ * 1. We need to copy the structure of prev to ensure that when we're combining two objects, we're not losing properties
+ * 2. We need to extract a key from an unknown path that's given to us by getCollectionByPath and then we need to modify
+ *    that, and ensure that it's properly set on the cloned output object.
+ * 3. We want to keep the interface to this hook as simple and easy to use as possible
+ *
+ * The alternative approaches that were rejected:
+ * 1. We replace the getCollectionByPath with a keyPath string. (Eg. "data.conversation.message") and then we use lodash
+ *    `get` and `set` which should remove all the object manipulation. But, this approach loses us the type safety that
+ *    getCollectionByPath gives us
+ * 2. We could add a setCollection function to the list of arguments for this hook. This leaves us with type safety but
+ *    makes the `useCollectionQuery` interface more complicated by adding arguments
+ */
+function fetchMoreUpdateQueryHandler(prev, fetchMoreResult, getCollectionByPath) {
+    const nextCollection = getCollectionByPath(fetchMoreResult);
+    const output = (0, lodash_1.cloneDeep)(prev);
+    const outputCollection = getCollectionByPath(output);
+    if (outputCollection === undefined || nextCollection === undefined) {
+        return output;
+    }
+    if (outputCollection.nodes && nextCollection.nodes) {
+        outputCollection.nodes = getUpdatedNodes(outputCollection.nodes, nextCollection.nodes);
+    }
+    if (outputCollection.edges && nextCollection.edges) {
+        outputCollection.edges = getUpdatedEdges(outputCollection.edges, nextCollection.edges);
+    }
+    Object.assign(outputCollection, Object.assign({ pageInfo: (0, lodash_1.cloneDeep)(nextCollection.pageInfo) }, getTotalCount(nextCollection.totalCount)));
+    return output;
+}
+function subscribeToMoreHandler(isSearching, prev, getCollectionByPath, subscriptionData, getNodeByPath) {
+    const node = getNodeByPath(subscriptionData);
+    const output = (0, lodash_1.cloneDeep)(prev);
+    const outputCollection = getCollectionByPath(output);
+    if (outputCollection == undefined || node == undefined)
+        return output;
+    if (isAlreadyUpdated(outputCollection, node) || isSearching) {
+        return prev;
+    }
+    if (outputCollection.nodes) {
+        outputCollection.nodes = getUpdatedNodes(outputCollection.nodes, [node], false);
+    }
+    if (outputCollection.edges) {
+        outputCollection.edges = getUpdatedEdges(outputCollection.edges, [(0, uniqueEdges_1.createEdge)(node)], false);
+    }
+    Object.assign(outputCollection, Object.assign({ pageInfo: (0, lodash_1.cloneDeep)(outputCollection.pageInfo) }, getTotalCount(outputCollection.totalCount, 1)));
+    return output;
+}
+function getTotalCount(totalCount, additionalCount = 0) {
+    return totalCount !== undefined
+        ? { totalCount: totalCount + additionalCount }
+        : {};
+}
+function isAlreadyUpdated(outputCollection, newNode) {
+    let edgesAlreadyUpdated = true;
+    let nodesAlreadyUpdated = true;
+    if (outputCollection.edges) {
+        edgesAlreadyUpdated = outputCollection.edges.some(edge => {
+            return edge.node.id === newNode.id;
+        });
+    }
+    if (outputCollection.nodes) {
+        nodesAlreadyUpdated = outputCollection.nodes.some(node => {
+            return node.id === newNode.id;
+        });
+    }
+    return edgesAlreadyUpdated && nodesAlreadyUpdated;
+}
+useCollectionQuery$1.isAlreadyUpdated = isAlreadyUpdated;
+function getUpdatedEdges(prevEdges, nextEdges, appendToEnd = true) {
+    const newEdges = appendToEnd
+        ? [...prevEdges, ...nextEdges]
+        : [...nextEdges, ...prevEdges];
+    return (0, uniqueEdges_1.uniqueEdges)(newEdges);
+}
+function getUpdatedNodes(prevNodes, nextNodes, appendToEnd = true) {
+    const newNodes = appendToEnd
+        ? [...prevNodes, ...nextNodes]
+        : [...nextNodes, ...prevNodes];
+    return (0, uniqueNodes_1.uniqueNodes)(newNodes);
+}
+
+(function (exports) {
+	Object.defineProperty(exports, "__esModule", { value: true });
+	exports.useCollectionQuery = void 0;
+	var useCollectionQuery_1 = useCollectionQuery$1;
+	Object.defineProperty(exports, "useCollectionQuery", { enumerable: true, get: function () { return useCollectionQuery_1.useCollectionQuery; } });
+} (useCollectionQuery$2));
+
+var useFocusTrap$2 = {};
+
+var useFocusTrap$1 = {};
+
+Object.defineProperty(useFocusTrap$1, "__esModule", { value: true });
+useFocusTrap$1.useFocusTrap = void 0;
+const react_1$4 = React__default["default"];
+/**
+ * Traps the focus within the children of the ref element.
+ *
+ * @param active - Turns the focus trapping on or off. Also adds aria-hidden on the
+ * body but not the dialog.
+ *
+ * @returns ref
+ */
+function useFocusTrap(active) {
+    // There's an ongoing issue with useRef return type clashing with an element's
+    // ref prop type. TLDR: Use null because useRef doesn't expect undefined.
+    // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/35572
+    const ref = (0, react_1$4.useRef)(null);
+    function handleKeyDown(event) {
+        if (!(active && ref.current) || event.key !== "Tab") {
+            return;
+        }
+        const { firstElement, lastElement } = getElements(ref.current);
+        if (event.shiftKey) {
+            if (document.activeElement === firstElement) {
+                lastElement.focus();
+                event.preventDefault();
+            }
+        }
+        else {
+            if (document.activeElement === lastElement) {
+                firstElement.focus();
+                event.preventDefault();
+            }
+        }
+    }
+    (0, react_1$4.useEffect)(() => {
+        var _a, _b;
+        if (active) {
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
+            (_b = ref.current) === null || _b === void 0 ? void 0 : _b.addEventListener("keydown", handleKeyDown);
+        }
+        return () => {
+            var _a;
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [active]);
+    return ref;
+}
+useFocusTrap$1.useFocusTrap = useFocusTrap;
+function getElements(ref) {
+    const focusables = [
+        "button",
+        "[href]",
+        "input",
+        "select",
+        "textarea",
+        '[tabindex]:not([tabindex="-1"])',
+    ];
+    const elements = ref.querySelectorAll(focusables.join(", "));
+    const firstElement = ref;
+    const lastElement = elements[elements.length - 1];
+    return { firstElement, lastElement };
+}
+
+(function (exports) {
+	Object.defineProperty(exports, "__esModule", { value: true });
+	exports.useFocusTrap = void 0;
+	var useFocusTrap_1 = useFocusTrap$1;
+	Object.defineProperty(exports, "useFocusTrap", { enumerable: true, get: function () { return useFocusTrap_1.useFocusTrap; } });
+} (useFocusTrap$2));
+
+var useFormState$2 = {};
+
+var useFormState$1 = {};
+
+Object.defineProperty(useFormState$1, "__esModule", { value: true });
+useFormState$1.useFormState = void 0;
+const react_1$3 = React__default["default"];
+function useFormState() {
+    const [formState, setFormState] = (0, react_1$3.useState)({
+        isDirty: false,
+        isValid: true,
+    });
+    return [formState, setFormState];
+}
+useFormState$1.useFormState = useFormState;
+
+(function (exports) {
+	Object.defineProperty(exports, "__esModule", { value: true });
+	exports.useFormState = void 0;
+	var useFormState_1 = useFormState$1;
+	Object.defineProperty(exports, "useFormState", { enumerable: true, get: function () { return useFormState_1.useFormState; } });
+} (useFormState$2));
+
+var useLiveAnnounce$2 = {};
+
+var useLiveAnnounce$1 = {};
+
+Object.defineProperty(useLiveAnnounce$1, "__esModule", { value: true });
+useLiveAnnounce$1.useLiveAnnounce = void 0;
+const react_1$2 = React__default["default"];
+/**
+ * Announce a message on voice over whenever you do an action. This is
+ * especially helpful when you have an action that adds or deletes an element
+ * from the screen.
+ */
+function useLiveAnnounce() {
+    const [announcedMessage, setAnnouncedMessage] = (0, react_1$2.useState)("");
+    (0, react_1$2.useEffect)(() => {
+        let target;
+        if (announcedMessage) {
+            target = createAnnouncedElement();
+            setTimeout(() => target.append(announcedMessage), 100);
+        }
+        return () => target === null || target === void 0 ? void 0 : target.remove();
+    }, [announcedMessage]);
+    return {
+        liveAnnounce: (message) => {
+            setAnnouncedMessage(message);
+        },
+    };
+}
+useLiveAnnounce$1.useLiveAnnounce = useLiveAnnounce;
+// eslint-disable-next-line max-statements
+function createAnnouncedElement() {
+    const el = document.createElement("div");
+    el.style.position = "absolute";
+    el.style.width = "1px";
+    el.style.height = "1px";
+    el.style.overflow = "hidden";
+    el.style.clipPath = " inset(100%)";
+    el.style.whiteSpace = " nowrap";
+    el.style.top = "0";
+    el.setAttribute("role", "status");
+    el.setAttribute("aria-atomic", "true");
+    el.setAttribute("aria-live", "assertive");
+    document.body.appendChild(el);
+    return el;
+}
+
+(function (exports) {
+	Object.defineProperty(exports, "__esModule", { value: true });
+	exports.useLiveAnnounce = void 0;
+	var useLiveAnnounce_1 = useLiveAnnounce$1;
+	Object.defineProperty(exports, "useLiveAnnounce", { enumerable: true, get: function () { return useLiveAnnounce_1.useLiveAnnounce; } });
+} (useLiveAnnounce$2));
+
+var useOnKeyDown$2 = {};
+
+var useOnKeyDown$1 = {};
+
+var __importDefault$1 = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(useOnKeyDown$1, "__esModule", { value: true });
+useOnKeyDown$1.useOnKeyDown = void 0;
+const event_listener_1 = __importDefault$1(useEventListener__default["default"]);
+function useOnKeyDown(callback, keys) {
+    (0, event_listener_1.default)("keydown", handler);
+    function handler(event) {
+        const keyboardEvent = event;
+        if (typeof keys === "string" && keyboardEvent.key === keys) {
+            callback(event);
+            return;
+        }
+        if (Array.isArray(keys) &&
+            keys.some(item => {
+                if (typeof item === "string")
+                    return keyboardEvent.key === item;
+                return Object.keys(item).every(index => keyboardEvent[index] === item[index]);
+            })) {
+            callback(event);
+            return;
+        }
+        if (!Array.isArray(keys) &&
+            typeof keys !== "string" &&
+            Object.keys(keys).every(index => keyboardEvent[index] === keys[index])) {
+            callback(event);
+            return;
+        }
+    }
+}
+useOnKeyDown$1.useOnKeyDown = useOnKeyDown;
+
+(function (exports) {
+	Object.defineProperty(exports, "__esModule", { value: true });
+	exports.useOnKeyDown = void 0;
+	var useOnKeyDown_1 = useOnKeyDown$1;
+	Object.defineProperty(exports, "useOnKeyDown", { enumerable: true, get: function () { return useOnKeyDown_1.useOnKeyDown; } });
+} (useOnKeyDown$2));
+
+var usePasswordStrength$2 = {};
+
+var usePasswordStrength$1 = {};
+
+var __importDefault = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(usePasswordStrength$1, "__esModule", { value: true });
+usePasswordStrength$1.usePasswordStrength = void 0;
+const react_1$1 = React__default["default"];
+const zxcvbn_1 = __importDefault(require$$1__default$1["default"]);
+function usePasswordStrength(password, dictionary) {
+    const { guesses, score, feedback: { warning, suggestions }, crack_times_display: { offline_fast_hashing_1e10_per_second: timeToCrack }, } = (0, react_1$1.useMemo)(() => (0, zxcvbn_1.default)(password, dictionary), [password, dictionary]);
+    return {
+        guesses,
+        score,
+        warning,
+        suggestions,
+        timeToCrack,
+    };
+}
+usePasswordStrength$1.usePasswordStrength = usePasswordStrength;
+
+(function (exports) {
+	Object.defineProperty(exports, "__esModule", { value: true });
+	exports.usePasswordStrength = void 0;
+	var usePasswordStrength_1 = usePasswordStrength$1;
+	Object.defineProperty(exports, "usePasswordStrength", { enumerable: true, get: function () { return usePasswordStrength_1.usePasswordStrength; } });
+} (usePasswordStrength$2));
+
+var useRefocusOnActivator$2 = {};
+
+var useRefocusOnActivator$1 = {};
+
+Object.defineProperty(useRefocusOnActivator$1, "__esModule", { value: true });
+useRefocusOnActivator$1.useRefocusOnActivator = void 0;
+const react_1 = React__default["default"];
+/**
+ * Brings back the focus to the element that opened an overlaid element once
+ * said overlaid element is dismissed.
+ *
+ * @param active - Determines if it should focus or not
+ */
+function useRefocusOnActivator(active) {
+    (0, react_1.useEffect)(() => {
+        let activator;
+        if (active && !activator) {
+            activator = document.activeElement;
+        }
+        return () => {
+            if (active) {
+                if (activator instanceof HTMLElement) {
+                    activator.focus();
+                }
+                activator = undefined;
+            }
+        };
+    }, [active]);
+}
+useRefocusOnActivator$1.useRefocusOnActivator = useRefocusOnActivator;
+
+(function (exports) {
+	Object.defineProperty(exports, "__esModule", { value: true });
+	exports.useRefocusOnActivator = void 0;
+	var useRefocusOnActivator_1 = useRefocusOnActivator$1;
+	Object.defineProperty(exports, "useRefocusOnActivator", { enumerable: true, get: function () { return useRefocusOnActivator_1.useRefocusOnActivator; } });
+} (useRefocusOnActivator$2));
+
+var useResizeObserver$1 = {};
+
+var useResizeObserver = {};
+
+(function (exports) {
+	var __importDefault = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
+	    return (mod && mod.__esModule) ? mod : { "default": mod };
+	};
+	Object.defineProperty(exports, "__esModule", { value: true });
+	exports.useResizeObserver = exports.Breakpoints = void 0;
+	const react_1 = React__default["default"];
+	// Importing the polyfilled version of ResizeObserver
+	// eslint-disable-next-line import/no-internal-modules
+	const polyfilled_1 = __importDefault(require$$1__default$2["default"]);
+	const lodash_1 = require$$1__default["default"];
+	exports.Breakpoints = {
+	    base: 640,
+	    small: 500,
+	    smaller: 265,
+	    large: 750,
+	    larger: 1024,
+	};
+	const wait = 100;
+	function useResizeObserver({ widths = exports.Breakpoints, heights = exports.Breakpoints, } = {}) {
+	    const [exactSize, setSize] = (0, react_1.useState)({
+	        width: undefined,
+	        height: undefined,
+	    });
+	    const onResize = (0, react_1.useMemo)(() => (0, lodash_1.throttle)(setSize, wait), [wait]);
+	    const { ref } = (0, polyfilled_1.default)({
+	        onResize,
+	    });
+	    const exactWidth = exactSize.width;
+	    const exactHeight = exactSize.height;
+	    const sizes = {
+	        width: getSize(widths, exactSize.width),
+	        height: getSize(heights, exactSize.height),
+	        exactWidth,
+	        exactHeight,
+	    };
+	    return [ref, sizes];
+	}
+	exports.useResizeObserver = useResizeObserver;
+	/**
+	 * To get the proper size we want to make sure that our value is greater
+	 * then the comparable, but less then the next largest number in our
+	 * object.
+	 */
+	function getSize(sizes, comparable) {
+	    if (!comparable || !sizes) {
+	        return undefined;
+	    }
+	    /**
+	     * Sort the values of our object so that we know they are in proper
+	     * order to be compared by
+	     */
+	    const sortedSizes = Object.values(sizes)
+	        .sort((a, b) => a - b)
+	        .reverse();
+	    return (sortedSizes.find(value => value <= comparable) ||
+	        sortedSizes[sortedSizes.length - 1]);
+	}
+} (useResizeObserver));
+
+(function (exports) {
+	var __createBinding = (commonjsGlobal && commonjsGlobal.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+	    if (k2 === undefined) k2 = k;
+	    var desc = Object.getOwnPropertyDescriptor(m, k);
+	    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+	      desc = { enumerable: true, get: function() { return m[k]; } };
+	    }
+	    Object.defineProperty(o, k2, desc);
+	}) : (function(o, m, k, k2) {
+	    if (k2 === undefined) k2 = k;
+	    o[k2] = m[k];
+	}));
+	var __exportStar = (commonjsGlobal && commonjsGlobal.__exportStar) || function(m, exports) {
+	    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+	};
+	Object.defineProperty(exports, "__esModule", { value: true });
+	__exportStar(useResizeObserver, exports);
+} (useResizeObserver$1));
+
 var css_248z$3 = ".m5A5oeRFaMs- {\n  position: relative;\n  border: calc(16px / 16) solid rgb(225, 225, 225);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n}\n\n.cY-5BrIIUg8- {\n  overflow: auto;\n}\n\n.y8xnHe7fwrI- {\n  width: 100%;\n  border-collapse: collapse;\n  text-align: left;\n}\n\n.y8xnHe7fwrI- thead tr th {\n  padding: calc(16px * 1);\n  padding: var(--space-base);\n  border-bottom: calc(16px / 16) solid rgb(225, 225, 225);\n  border-bottom: var(--border-base) solid var(--color-border);\n  color: rgb(1, 41, 57);\n  color: var(--color-heading);\n  white-space: nowrap;\n}\n\n.y8xnHe7fwrI- thead tr th :first-child {\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.y8xnHe7fwrI- tbody tr {\n  border-bottom: calc(16px / 16) solid rgb(225, 225, 225);\n  border-bottom: var(--border-base) solid var(--color-border);\n}\n\n.y8xnHe7fwrI- tbody tr:last-child {\n  border-bottom: none;\n}\n\n.y8xnHe7fwrI- tbody tr td {\n  padding: calc(16px * 1);\n  padding: var(--space-base);\n}\n\n.y8xnHe7fwrI- tfoot {\n  position: sticky;\n  z-index: 1;\n  width: 100%;\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  border-top: calc(16px / 8) solid rgb(225, 225, 225);\n  border-top: var(--border-thick) solid var(--color-border);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n  bottom: 0;\n}\n\n.y8xnHe7fwrI- tfoot tr th {\n  padding: calc(16px * 1);\n  padding: var(--space-base);\n}\n\n.t8QYvdtkQXQ- thead tr th:first-child,\n.t8QYvdtkQXQ- tbody tr td:first-child {\n  position: sticky;\n  left: 0;\n  z-index: 1;\n  height: calc((16px * 3) + (16px / 4));\n  height: calc(calc(16px * 3) + calc(16px / 4));\n  height: calc(var(--space-largest) + var(--space-smaller));\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n.t8QYvdtkQXQ- th:first-child::after,\n.t8QYvdtkQXQ- td:first-child::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: 0;\n  right: calc(-1 * (16px / 2));\n  right: calc(-1 * calc(16px / 2));\n  right: calc(-1 * var(--space-small));\n  width: calc(16px / 2);\n  width: var(--space-small);\n  height: 100%;\n  background: linear-gradient(\n    90deg,\n    rgba(0, 0, 0, 0.1) 0%,\n    rgba(0, 0, 0, 0) 80%\n  );\n  background: linear-gradient(\n    90deg,\n    rgba(var(--color-black--rgb), 0.1) 0%,\n    rgba(var(--color-black--rgb), 0) 80%\n  );\n}\n\n.Y21JuHX6fhk- {\n  position: sticky;\n  top: 0;\n  right: 0;\n  left: 0;\n  z-index: 2;\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  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n.PJEX8dlqCMA-:first-child:hover {\n  background: rgb(250, 246, 219);\n  background: var(--color-surface--hover);\n  cursor: pointer;\n}\n\n._9ps4aWGs8W0-:hover {\n  background: rgb(250, 246, 219);\n  background: var(--color-surface--hover);\n  cursor: pointer;\n}\n\n._59XEEB8l5pI-:hover,\n._59XEEB8l5pI-:hover :first-child {\n  background: rgb(244, 244, 244);\n  background: var(--color-surface--background);\n  cursor: pointer;\n}\n\n.a2BGGBkY5J8- {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  top: calc(16px * 3);\n  top: var(--space-largest);\n  right: 0;\n  bottom: calc(16px * 3);\n  bottom: var(--space-largest);\n  left: 0;\n  width: 100%;\n  -ms-flex-pack: center;\n      justify-content: center;\n  -ms-flex-align: center;\n      align-items: center;\n}\n";
 var styles$3 = {"dataTableContainer":"m5A5oeRFaMs-","tableContainer":"cY-5BrIIUg8-","table":"y8xnHe7fwrI-","pinFirstColumn":"t8QYvdtkQXQ-","stickyHeader":"Y21JuHX6fhk-","pinFirstHeaderSortable":"PJEX8dlqCMA-","sortableColumn":"_9ps4aWGs8W0-","clickableRow":"_59XEEB8l5pI-","emptyState":"a2BGGBkY5J8-"};
 styleInject_es.styleInject(css_248z$3);
@@ -235,7 +893,7 @@ function Header({ table, stickyHeader, sorting, onRowClick, }) {
 }
 
 function DataTable({ data, columns, pagination, sorting, height, stickyHeader, pinFirstColumn, onRowClick, emptyState, }) {
-    const [ref, { exactWidth }] = useResizeObserver.useResizeObserver();
+    const [ref, { exactWidth }] = useAssert$2.useResizeObserver();
     const tableSettings = createTableSettings(data, columns, {
         pagination,
         sorting,
@@ -251,10 +909,10 @@ function DataTable({ data, columns, pagination, sorting, height, stickyHeader, p
                 React__default["default"].createElement(Body, { table: table, onRowClick: onRowClick, height: height ? height * 0.7 : undefined, emptyState: emptyState }),
                 table.getRowModel().rows.length &&
                     exactWidth &&
-                    exactWidth > useResizeObserver.Breakpoints.small ? (React__default["default"].createElement(Footer, { table: table, viewType: "desktop" })) : null)),
+                    exactWidth > useAssert$2.Breakpoints.small ? (React__default["default"].createElement(Footer, { table: table, viewType: "desktop" })) : null)),
         table.getRowModel().rows.length &&
             exactWidth &&
-            exactWidth <= useResizeObserver.Breakpoints.small ? (React__default["default"].createElement(Footer, { table: table })) : null,
+            exactWidth <= useAssert$2.Breakpoints.small ? (React__default["default"].createElement(Footer, { table: table })) : null,
         pagination && (React__default["default"].createElement(Pagination, { table: table, itemsPerPage: pagination.itemsPerPage, totalItems: pagination.manualPagination
                 ? pagination.totalItems
                 : table.getCoreRowModel().rows.length }))));
@@ -273,8 +931,8 @@ const mockContainerWidth = (exactWidth) => {
 };
 
 Object.defineProperty(exports, 'createColumnHelper', {
-  enumerable: true,
-  get: function () { return reactTable.createColumnHelper; }
+	enumerable: true,
+	get: function () { return reactTable.createColumnHelper; }
 });
 exports.DataTable = DataTable;
 exports.mockContainerWidth = mockContainerWidth;