@jobber/components 4.85.4-CJS-to-ESM.2 → 4.85.4-CJS-to-ESM.4

package/dist/InternalChipDismissible-1086e333.js

@@ -0,0 +1,158 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { s as styleInject } from './style-inject.es-a0e1a0ba.js';
+import { u as useInternalChipDismissibleInput, a as useScrollToActive, b as useInView, c as useRepositionMenu, d as useInternalChipDismissible } from './useScrollToActive-ace6c5ba.js';
+import debounce from 'lodash/debounce';
+import '@jobber/hooks/useLiveAnnounce';
+import '@jobber/design';
+import 'react-popper';
+import classnames from 'classnames';
+import 'lodash/sortBy';
+import { T as Text } from './Text-c9162504.js';
+import { B as Button } from './Button-9ae092b3.js';
+import { S as Spinner } from './Spinner-5d8359b8.js';
+import { useAssert } from '@jobber/hooks/useAssert';
+import { I as Icon } from './Icon-22723fe6.js';
+import { A as Avatar } from './Avatar-6ffee4bd.js';
+import { T as Typography } from './Typography-7cc5daf5.js';
+import { T as Tooltip } from './Tooltip-d1fc7e74.js';
+
+var css_248z$1 = "/**\n * Used in the wrapping chips component:\n * - InternalChipSingleSelect\n * - InternalChipMultiSelect\n */\n\n.zn6onyiQVmA- {\n  display: -ms-flexbox;\n  display: flex;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.PEnZzMEgbhU- {\n  display: inline-grid;\n  position: relative;\n  max-width: 100%;\n  box-sizing: border-box;\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border: calc(16px / 16) solid rgb(217, 223, 225);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: calc(16px / 2);\n  border-radius: var(--radius-larger);\n  color: rgb(77, 105, 116);\n  color: var(--color-text--secondary);\n  text-align: left;\n  vertical-align: middle;\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n  transition: 200ms ease-in-out;\n  transition: var(--timing-base) ease-in-out;\n  transition-property: background-color, box-shadow, color;\n  grid-template-columns: -webkit-max-content;\n  grid-template-columns: max-content;\n  -ms-flex-align: center;\n      align-items: center;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n.dtysUhwYdG4-,\n.xGaMCAYsdwA- {\n  padding: calc((16px / 4) + (16px / 8)) calc(16px / 2);\n  padding: calc(calc(16px / 4) + calc(16px / 8)) calc(16px / 2);\n  padding: calc(var(--space-smaller) + var(--space-smallest)) var(--space-small);\n}\n\n.dtysUhwYdG4- {\n  grid-template-columns: -webkit-min-content 1fr;\n  grid-template-columns: min-content 1fr;\n}\n\n.xGaMCAYsdwA- {\n  grid-template-columns: 1fr -webkit-min-content;\n  grid-template-columns: 1fr min-content;\n}\n\n.dtysUhwYdG4-.xGaMCAYsdwA- {\n  grid-template-columns: -webkit-min-content 1fr -webkit-min-content;\n  grid-template-columns: min-content 1fr min-content;\n}\n\n.SNT7gGV-h-o-,\n.W4D98cvEth4- ~ .PEnZzMEgbhU- {\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  cursor: pointer;\n  -webkit-appearance: none;\n          appearance: none;\n}\n\n/**\n * Interaction\n */\n\n.PEnZzMEgbhU-:focus,\n.W4D98cvEth4-:focus ~ .PEnZzMEgbhU- {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n  outline: none;\n}\n\n.SNT7gGV-h-o-:hover,\n.W4D98cvEth4- ~ .PEnZzMEgbhU-:not(._0hEzaTXK9M0-):hover,\n.W4D98cvEth4-:focus ~ .PEnZzMEgbhU-:not(._0hEzaTXK9M0-) {\n  background-color: rgb(244, 246, 250);\n  background-color: var(--color-surface--hover);\n}\n\n/**\n * States\n */\n\n.PEnZzMEgbhU-._0hEzaTXK9M0- {\n  border-color: rgb(1, 41, 57);\n  border-color: var(--color-surface--reverse);\n  color: rgba(255, 255, 255, 1);\n  color: var(--color-text--reverse);\n  background-color: rgb(1, 41, 57);\n  background-color: var(--color-surface--reverse);\n}\n\n.PEnZzMEgbhU-.JApS2787BU8- {\n  border-color: rgb(128, 25, 0);\n  border-color: var(--color-critical--onSurface);\n  color: rgb(128, 25, 0);\n  color: var(--color-critical--onSurface);\n  background-color: rgb(255, 226, 219);\n  background-color: var(--color-critical--surface);\n}\n\n.PEnZzMEgbhU-.Kg0c8WVgMpg- {\n  border-color: rgb(225, 225, 225);\n  border-color: var(--color-disabled--secondary);\n  color: rgb(181, 181, 181);\n  color: var(--color-disabled);\n  background-color: rgb(225, 225, 225);\n  background-color: var(--color-disabled--secondary);\n}\n\n._0hEzaTXK9M0-.Kg0c8WVgMpg- {\n  border-color: rgb(181, 181, 181);\n  border-color: var(--color-disabled);\n  color: rgba(255, 255, 255, 1);\n  color: var(--color-white);\n  background-color: rgb(181, 181, 181);\n  background-color: var(--color-disabled);\n}\n\n.JApS2787BU8-.Kg0c8WVgMpg- {\n  border-color: rgb(201, 66, 33);\n  border-color: var(--color-critical);\n}\n\n/**\n * Input checkbox/radio\n *\n * Hide checkbox on UI but not screen readers and still allow focus state\n */\n\n.W4D98cvEth4- {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  -webkit-clip-path: inset(100%);\n          clip-path: inset(100%);\n  white-space: nowrap;\n}\n\n/**\n * Button\n */\n\n._0-ZWexS4Gfg- {\n  display: -ms-flexbox;\n  display: flex;\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  transition: background-color 200ms ease;\n}\n\n._0-ZWexS4Gfg-:hover,\n._0-ZWexS4Gfg-:focus {\n  background-color: rgb(244, 246, 250);\n  background-color: var(--color-surface--hover);\n}\n\n._0-ZWexS4Gfg-:focus,\n.SNT7gGV-h-o- ._0-ZWexS4Gfg-:hover {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n  outline: none;\n}\n\n/**\n * Override icon default colors.\n *\n * NOTE: This is a workaround since some icons have default colors that we don't\n * want to override until the component color prop overrides it.\n * DO NOT COPY!\n */\n\n.DQPnZP4UZpw- > svg {\n  fill: rgba(101, 120, 132, 1);\n  fill: var(--color-interactive--subtle);\n}\n\n.DQPnZP4UZpw- {\n  display: -ms-flexbox;\n  display: flex;\n}\n";
+var styles$1 = {"wrapper":"zn6onyiQVmA-","chip":"PEnZzMEgbhU-","hasPrefix":"dtysUhwYdG4-","hasSuffix":"xGaMCAYsdwA-","clickable":"SNT7gGV-h-o-","input":"W4D98cvEth4-","active":"_0hEzaTXK9M0-","invalid":"JApS2787BU8-","disabled":"Kg0c8WVgMpg-","button":"_0-ZWexS4Gfg-","icon":"DQPnZP4UZpw-"};
+styleInject(css_248z$1);
+
+function InternalChipButton({ icon, invalid, disabled, label, onClick, }) {
+    const buttonRef = useRef();
+    return (React.createElement("div", { ref: buttonRef, className: styles$1.button, tabIndex: 0, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, onClick: handleClick, role: "button", "aria-label": `Remove ${label}`, "aria-hidden": true, "aria-disabled": disabled, "data-testid": "remove-chip-button" },
+        React.createElement(Icon, { name: icon, color: getColor() })));
+    function handleKeyUp(event) {
+        if (document.activeElement === buttonRef.current &&
+            (event.key === " " || event.key === "Enter")) {
+            event.stopPropagation();
+            buttonRef.current.click();
+        }
+    }
+    function handleKeyDown(event) {
+        if (document.activeElement === buttonRef.current && event.key === " ") {
+            // Don't scroll down
+            event.preventDefault();
+        }
+    }
+    function getColor() {
+        if (disabled)
+            return "disabled";
+        if (invalid)
+            return "critical";
+        return "greyBlue";
+    }
+    function handleClick(event) {
+        event.stopPropagation();
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    }
+}
+
+function InternalChipAffix({ affix, active, invalid, disabled, }) {
+    assertProps();
+    if ((affix === null || affix === void 0 ? void 0 : affix.type) === Avatar) {
+        return React.createElement(Avatar, Object.assign({}, affix.props, { size: "small" }));
+    }
+    if ((affix === null || affix === void 0 ? void 0 : affix.type) === Icon) {
+        return renderChipIcon(affix);
+    }
+    if ((affix === null || affix === void 0 ? void 0 : affix.type) === InternalChipButton) {
+        return React.createElement(InternalChipButton, Object.assign({}, affix.props));
+    }
+    return React.createElement(React.Fragment, null);
+    function renderChipIcon(icon) {
+        const color = getIconColor();
+        return (React.createElement("div", { className: styles$1.icon }, React.cloneElement(icon, Object.assign({ size: "base" }, (color && { color: color })))));
+    }
+    function getIconColor() {
+        if (disabled && !active)
+            return "disabled";
+        if (invalid && !disabled)
+            return "critical";
+        if (active)
+            return "white";
+        return;
+    }
+    function assertProps() {
+        const isAvatar = (affix === null || affix === void 0 ? void 0 : affix.type) === Avatar || false;
+        const isIcon = (affix === null || affix === void 0 ? void 0 : affix.type) === Icon || false;
+        const isChipButton = (affix === null || affix === void 0 ? void 0 : affix.type) === InternalChipButton || false;
+        useAssert(!!affix && !(isAvatar || isIcon || isChipButton), `Prefix prop only accepts "<Avatar />" or "<Icon />" component. You have "${affix === null || affix === void 0 ? void 0 : affix.type}".`);
+    }
+}
+
+function InternalChip({ label, active = false, disabled = false, invalid = false, prefix, suffix, tabIndex, ariaLabel, onClick, onKeyDown, }) {
+    const [truncateRef, setTruncateRef] = useState();
+    const isClickable = onClick && !disabled;
+    const classNames = classnames(styles$1.chip, {
+        [styles$1.clickable]: isClickable,
+        [styles$1.active]: active,
+        [styles$1.disabled]: disabled,
+        [styles$1.invalid]: invalid,
+        [styles$1.hasPrefix]: prefix,
+        [styles$1.hasSuffix]: suffix,
+    });
+    const affixProps = { active, invalid, disabled };
+    const Tag = onClick ? "button" : "div";
+    const chip = (React.createElement(Tag, Object.assign({ className: classNames }, (isClickable && { onClick, disabled }), { onKeyDown: onKeyDown, "data-testid": "chip-wrapper", "aria-label": ariaLabel, tabIndex: tabIndex, role: tabIndex !== undefined ? "option" : undefined }),
+        React.createElement(InternalChipAffix, Object.assign({ affix: prefix }, affixProps)),
+        React.createElement(Typography, { element: "span", numberOfLines: 1, size: "base" },
+            React.createElement("span", { ref: setTruncateRef }, label)),
+        React.createElement(InternalChipAffix, Object.assign({ affix: suffix }, affixProps))));
+    return isTruncated() ? React.createElement(Tooltip, { message: label }, chip) : chip;
+    function isTruncated() {
+        var _a;
+        const truncateParentHeight = ((_a = truncateRef === null || truncateRef === void 0 ? void 0 : truncateRef.parentElement) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0;
+        const truncateChildHeight = (truncateRef === null || truncateRef === void 0 ? void 0 : truncateRef.offsetHeight) || 0;
+        return truncateChildHeight >= truncateParentHeight * 2;
+    }
+}
+
+var css_248z = ".sCNIjluCskc- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  box-sizing: border-box;\n  border: calc(16px / 16) solid transparent;\n  border: var(--border-base) solid transparent;\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n  transition: all 200ms;\n  transition: all var(--timing-base);\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.MFUlz1WQLdk- {\n  -ms-flex: 1;\n      flex: 1;\n  min-width: 120px;\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n  border: none;\n  border-radius: 0;\n  color: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  font-size: calc(calc(16px * 1) * 0.875);\n  font-size: var(--typography--fontSize-base);\n  line-height: 1.25;\n  line-height: var(--typography--lineHeight-base);\n  background: transparent;\n  -webkit-appearance: none;\n          appearance: none;\n}\n\n.MFUlz1WQLdk-:focus {\n  outline: none;\n}\n\n.V9eYJdjPAeY- {\n  position: relative;\n  z-index: 6;\n  z-index: var(--elevation-menu);\n  width: 100%;\n}\n\n.LdytkOeCU9c- {\n  max-height: 320px;\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  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n  overflow-y: scroll;\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n.y7Cz2u8BuNE-,\n._-7bmao8Q9As- {\n  display: -ms-flexbox;\n  display: flex;\n  width: 100%;\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  -webkit-appearance: none;\n          appearance: none;\n  -ms-flex-align: center;\n      align-items: center;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n.y7Cz2u8BuNE-:focus {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n}\n\n.y7Cz2u8BuNE-:focus,\n.iCwWdcmtInc- {\n  outline: none;\n  background-color: rgb(244, 246, 250);\n  background-color: var(--color-surface--hover);\n}\n\n._-7bmao8Q9As- {\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n";
+var styles = {"wrapper":"sCNIjluCskc-","input":"MFUlz1WQLdk-","menu":"V9eYJdjPAeY-","menuList":"LdytkOeCU9c-","menuListOption":"y7Cz2u8BuNE-","loadingIndicator":"_-7bmao8Q9As-","activeOption":"iCwWdcmtInc-"};
+styleInject(css_248z);
+
+function InternalChipDismissibleInput(props) {
+    const { activator = React.createElement(Button, { icon: "add", type: "secondary", ariaLabel: "Add" }), attachTo, isLoadingMore = false, onLoadMore, } = props;
+    const { activeIndex, allOptions, hasAvailableOptions, inputRef, menuId, menuOpen, searchValue, generateDescendantId, handleBlur, handleOpenMenu, handleSearchChange, handleCancelBlur, handleEnableBlur, handleSetActiveOnMouseOver, handleKeyDown, handleSelectOption, handleDebouncedSearch, } = useInternalChipDismissibleInput(props);
+    const menuRef = useScrollToActive(activeIndex);
+    const { ref: visibleChildRef, isInView } = useInView();
+    const { styles: popperStyles, attributes, update, setPositionedElementRef, } = useRepositionMenu(attachTo);
+    useEffect(() => {
+        if (menuOpen && update)
+            update();
+    }, [allOptions]);
+    useEffect(() => {
+        handleDebouncedSearch();
+        return handleDebouncedSearch.cancel;
+    }, [searchValue]);
+    useEffect(() => {
+        isInView && onLoadMore && onLoadMore(searchValue);
+    }, [isInView]);
+    if (!menuOpen) {
+        return React.cloneElement(activator, { onClick: handleOpenMenu });
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement("input", { ref: inputRef, className: styles.input, type: "text", role: "combobox", "aria-label": "Press up and down arrow to cycle through the options or type to narrow down the results", "aria-autocomplete": "list", "aria-owns": menuId, "aria-expanded": hasAvailableOptions, "aria-activedescendant": generateDescendantId(activeIndex), value: searchValue, onChange: handleSearchChange, onKeyDown: handleKeyDown, onBlur: debounce(handleBlur, 200), onFocus: handleOpenMenu, autoFocus: true }),
+        (hasAvailableOptions || isLoadingMore) && (React.createElement("div", Object.assign({ ref: setPositionedElementRef, className: styles.menu, style: popperStyles.popper }, attributes.popper),
+            React.createElement("div", { ref: menuRef, role: "listbox", id: menuId, className: styles.menuList, "data-testid": "chip-menu" },
+                allOptions.map((option, i) => (React.createElement("button", { key: option.value, role: "option", type: "button", id: generateDescendantId(i), className: classnames(styles.menuListOption, {
+                        [styles.activeOption]: activeIndex === i,
+                    }), onClick: () => handleSelectOption(option), onMouseEnter: handleSetActiveOnMouseOver(i), onMouseDown: handleCancelBlur, onMouseUp: handleEnableBlur },
+                    React.createElement("span", { "aria-hidden": true }, option.prefix),
+                    React.createElement(Text, null, option.label)))),
+                React.createElement("div", { ref: visibleChildRef }),
+                isLoadingMore && (React.createElement("div", { className: styles.loadingIndicator },
+                    React.createElement(Spinner, { size: "small", inline: true }))))))));
+}
+
+function InternalChipDismissible(props) {
+    const { availableChipOptions, ref: wrapperRef, sortedVisibleChipOptions, handleChipAdd, handleChipClick, handleChipKeyDown, handleChipRemove, handleCustomAdd, handleWrapperKeyDown, } = useInternalChipDismissible(props);
+    return (React.createElement("div", { ref: wrapperRef, className: styles.wrapper, "data-testid": "dismissible-chips", onKeyDown: handleWrapperKeyDown, role: "listbox" },
+        sortedVisibleChipOptions.map(chip => (React.createElement(InternalChip, Object.assign({ key: chip.value }, chip, { onKeyDown: handleChipKeyDown(chip.value), onClick: handleChipClick(chip.value), ariaLabel: `${chip.label}. Press delete or backspace to remove ${chip.label}`, tabIndex: 0, suffix: React.createElement(InternalChipButton, { icon: "remove", invalid: chip.invalid, disabled: chip.disabled, label: chip.label, onClick: handleChipRemove(chip.value) }) })))),
+        React.createElement(InternalChipDismissibleInput, { activator: props.activator, attachTo: wrapperRef, isLoadingMore: props.isLoadingMore, options: availableChipOptions, onOptionSelect: handleChipAdd, onCustomOptionSelect: handleCustomAdd, onSearch: props.onSearch, onLoadMore: props.onLoadMore })));
+}
+
+export { InternalChip as I, InternalChipDismissible as a, InternalChipButton as b, styles$1 as s };

package/dist/InternalChipDismissible-5220f657.js

@@ -0,0 +1,169 @@
+'use strict';
+
+var React = require('react');
+var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
+var useScrollToActive = require('./useScrollToActive-056749d8.js');
+var debounce = require('lodash/debounce');
+require('@jobber/hooks/useLiveAnnounce');
+require('@jobber/design');
+require('react-popper');
+var classnames = require('classnames');
+require('lodash/sortBy');
+var Text = require('./Text-259af966.js');
+var Button = require('./Button-b73a5e01.js');
+var Spinner = require('./Spinner-9d8fc7ff.js');
+var useAssert = require('@jobber/hooks/useAssert');
+var Icon = require('./Icon-405a216c.js');
+var Avatar = require('./Avatar-76a799fa.js');
+var Typography = require('./Typography-c45bf216.js');
+var Tooltip = require('./Tooltip-ef3d6ef4.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 css_248z$1 = "/**\n * Used in the wrapping chips component:\n * - InternalChipSingleSelect\n * - InternalChipMultiSelect\n */\n\n.zn6onyiQVmA- {\n  display: -ms-flexbox;\n  display: flex;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.PEnZzMEgbhU- {\n  display: inline-grid;\n  position: relative;\n  max-width: 100%;\n  box-sizing: border-box;\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border: calc(16px / 16) solid rgb(217, 223, 225);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: calc(16px / 2);\n  border-radius: var(--radius-larger);\n  color: rgb(77, 105, 116);\n  color: var(--color-text--secondary);\n  text-align: left;\n  vertical-align: middle;\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n  transition: 200ms ease-in-out;\n  transition: var(--timing-base) ease-in-out;\n  transition-property: background-color, box-shadow, color;\n  grid-template-columns: -webkit-max-content;\n  grid-template-columns: max-content;\n  -ms-flex-align: center;\n      align-items: center;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n.dtysUhwYdG4-,\n.xGaMCAYsdwA- {\n  padding: calc((16px / 4) + (16px / 8)) calc(16px / 2);\n  padding: calc(calc(16px / 4) + calc(16px / 8)) calc(16px / 2);\n  padding: calc(var(--space-smaller) + var(--space-smallest)) var(--space-small);\n}\n\n.dtysUhwYdG4- {\n  grid-template-columns: -webkit-min-content 1fr;\n  grid-template-columns: min-content 1fr;\n}\n\n.xGaMCAYsdwA- {\n  grid-template-columns: 1fr -webkit-min-content;\n  grid-template-columns: 1fr min-content;\n}\n\n.dtysUhwYdG4-.xGaMCAYsdwA- {\n  grid-template-columns: -webkit-min-content 1fr -webkit-min-content;\n  grid-template-columns: min-content 1fr min-content;\n}\n\n.SNT7gGV-h-o-,\n.W4D98cvEth4- ~ .PEnZzMEgbhU- {\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  cursor: pointer;\n  -webkit-appearance: none;\n          appearance: none;\n}\n\n/**\n * Interaction\n */\n\n.PEnZzMEgbhU-:focus,\n.W4D98cvEth4-:focus ~ .PEnZzMEgbhU- {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n  outline: none;\n}\n\n.SNT7gGV-h-o-:hover,\n.W4D98cvEth4- ~ .PEnZzMEgbhU-:not(._0hEzaTXK9M0-):hover,\n.W4D98cvEth4-:focus ~ .PEnZzMEgbhU-:not(._0hEzaTXK9M0-) {\n  background-color: rgb(244, 246, 250);\n  background-color: var(--color-surface--hover);\n}\n\n/**\n * States\n */\n\n.PEnZzMEgbhU-._0hEzaTXK9M0- {\n  border-color: rgb(1, 41, 57);\n  border-color: var(--color-surface--reverse);\n  color: rgba(255, 255, 255, 1);\n  color: var(--color-text--reverse);\n  background-color: rgb(1, 41, 57);\n  background-color: var(--color-surface--reverse);\n}\n\n.PEnZzMEgbhU-.JApS2787BU8- {\n  border-color: rgb(128, 25, 0);\n  border-color: var(--color-critical--onSurface);\n  color: rgb(128, 25, 0);\n  color: var(--color-critical--onSurface);\n  background-color: rgb(255, 226, 219);\n  background-color: var(--color-critical--surface);\n}\n\n.PEnZzMEgbhU-.Kg0c8WVgMpg- {\n  border-color: rgb(225, 225, 225);\n  border-color: var(--color-disabled--secondary);\n  color: rgb(181, 181, 181);\n  color: var(--color-disabled);\n  background-color: rgb(225, 225, 225);\n  background-color: var(--color-disabled--secondary);\n}\n\n._0hEzaTXK9M0-.Kg0c8WVgMpg- {\n  border-color: rgb(181, 181, 181);\n  border-color: var(--color-disabled);\n  color: rgba(255, 255, 255, 1);\n  color: var(--color-white);\n  background-color: rgb(181, 181, 181);\n  background-color: var(--color-disabled);\n}\n\n.JApS2787BU8-.Kg0c8WVgMpg- {\n  border-color: rgb(201, 66, 33);\n  border-color: var(--color-critical);\n}\n\n/**\n * Input checkbox/radio\n *\n * Hide checkbox on UI but not screen readers and still allow focus state\n */\n\n.W4D98cvEth4- {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  -webkit-clip-path: inset(100%);\n          clip-path: inset(100%);\n  white-space: nowrap;\n}\n\n/**\n * Button\n */\n\n._0-ZWexS4Gfg- {\n  display: -ms-flexbox;\n  display: flex;\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  transition: background-color 200ms ease;\n}\n\n._0-ZWexS4Gfg-:hover,\n._0-ZWexS4Gfg-:focus {\n  background-color: rgb(244, 246, 250);\n  background-color: var(--color-surface--hover);\n}\n\n._0-ZWexS4Gfg-:focus,\n.SNT7gGV-h-o- ._0-ZWexS4Gfg-:hover {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n  outline: none;\n}\n\n/**\n * Override icon default colors.\n *\n * NOTE: This is a workaround since some icons have default colors that we don't\n * want to override until the component color prop overrides it.\n * DO NOT COPY!\n */\n\n.DQPnZP4UZpw- > svg {\n  fill: rgba(101, 120, 132, 1);\n  fill: var(--color-interactive--subtle);\n}\n\n.DQPnZP4UZpw- {\n  display: -ms-flexbox;\n  display: flex;\n}\n";
+var styles$1 = {"wrapper":"zn6onyiQVmA-","chip":"PEnZzMEgbhU-","hasPrefix":"dtysUhwYdG4-","hasSuffix":"xGaMCAYsdwA-","clickable":"SNT7gGV-h-o-","input":"W4D98cvEth4-","active":"_0hEzaTXK9M0-","invalid":"JApS2787BU8-","disabled":"Kg0c8WVgMpg-","button":"_0-ZWexS4Gfg-","icon":"DQPnZP4UZpw-"};
+styleInject_es.styleInject(css_248z$1);
+
+function InternalChipButton({ icon, invalid, disabled, label, onClick, }) {
+    const buttonRef = React.useRef();
+    return (React__default["default"].createElement("div", { ref: buttonRef, className: styles$1.button, tabIndex: 0, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, onClick: handleClick, role: "button", "aria-label": `Remove ${label}`, "aria-hidden": true, "aria-disabled": disabled, "data-testid": "remove-chip-button" },
+        React__default["default"].createElement(Icon.Icon, { name: icon, color: getColor() })));
+    function handleKeyUp(event) {
+        if (document.activeElement === buttonRef.current &&
+            (event.key === " " || event.key === "Enter")) {
+            event.stopPropagation();
+            buttonRef.current.click();
+        }
+    }
+    function handleKeyDown(event) {
+        if (document.activeElement === buttonRef.current && event.key === " ") {
+            // Don't scroll down
+            event.preventDefault();
+        }
+    }
+    function getColor() {
+        if (disabled)
+            return "disabled";
+        if (invalid)
+            return "critical";
+        return "greyBlue";
+    }
+    function handleClick(event) {
+        event.stopPropagation();
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    }
+}
+
+function InternalChipAffix({ affix, active, invalid, disabled, }) {
+    assertProps();
+    if ((affix === null || affix === void 0 ? void 0 : affix.type) === Avatar.Avatar) {
+        return React__default["default"].createElement(Avatar.Avatar, Object.assign({}, affix.props, { size: "small" }));
+    }
+    if ((affix === null || affix === void 0 ? void 0 : affix.type) === Icon.Icon) {
+        return renderChipIcon(affix);
+    }
+    if ((affix === null || affix === void 0 ? void 0 : affix.type) === InternalChipButton) {
+        return React__default["default"].createElement(InternalChipButton, Object.assign({}, affix.props));
+    }
+    return React__default["default"].createElement(React__default["default"].Fragment, null);
+    function renderChipIcon(icon) {
+        const color = getIconColor();
+        return (React__default["default"].createElement("div", { className: styles$1.icon }, React__default["default"].cloneElement(icon, Object.assign({ size: "base" }, (color && { color: color })))));
+    }
+    function getIconColor() {
+        if (disabled && !active)
+            return "disabled";
+        if (invalid && !disabled)
+            return "critical";
+        if (active)
+            return "white";
+        return;
+    }
+    function assertProps() {
+        const isAvatar = (affix === null || affix === void 0 ? void 0 : affix.type) === Avatar.Avatar || false;
+        const isIcon = (affix === null || affix === void 0 ? void 0 : affix.type) === Icon.Icon || false;
+        const isChipButton = (affix === null || affix === void 0 ? void 0 : affix.type) === InternalChipButton || false;
+        useAssert.useAssert(!!affix && !(isAvatar || isIcon || isChipButton), `Prefix prop only accepts "<Avatar />" or "<Icon />" component. You have "${affix === null || affix === void 0 ? void 0 : affix.type}".`);
+    }
+}
+
+function InternalChip({ label, active = false, disabled = false, invalid = false, prefix, suffix, tabIndex, ariaLabel, onClick, onKeyDown, }) {
+    const [truncateRef, setTruncateRef] = React.useState();
+    const isClickable = onClick && !disabled;
+    const classNames = classnames__default["default"](styles$1.chip, {
+        [styles$1.clickable]: isClickable,
+        [styles$1.active]: active,
+        [styles$1.disabled]: disabled,
+        [styles$1.invalid]: invalid,
+        [styles$1.hasPrefix]: prefix,
+        [styles$1.hasSuffix]: suffix,
+    });
+    const affixProps = { active, invalid, disabled };
+    const Tag = onClick ? "button" : "div";
+    const chip = (React__default["default"].createElement(Tag, Object.assign({ className: classNames }, (isClickable && { onClick, disabled }), { onKeyDown: onKeyDown, "data-testid": "chip-wrapper", "aria-label": ariaLabel, tabIndex: tabIndex, role: tabIndex !== undefined ? "option" : undefined }),
+        React__default["default"].createElement(InternalChipAffix, Object.assign({ affix: prefix }, affixProps)),
+        React__default["default"].createElement(Typography.Typography, { element: "span", numberOfLines: 1, size: "base" },
+            React__default["default"].createElement("span", { ref: setTruncateRef }, label)),
+        React__default["default"].createElement(InternalChipAffix, Object.assign({ affix: suffix }, affixProps))));
+    return isTruncated() ? React__default["default"].createElement(Tooltip.Tooltip, { message: label }, chip) : chip;
+    function isTruncated() {
+        var _a;
+        const truncateParentHeight = ((_a = truncateRef === null || truncateRef === void 0 ? void 0 : truncateRef.parentElement) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0;
+        const truncateChildHeight = (truncateRef === null || truncateRef === void 0 ? void 0 : truncateRef.offsetHeight) || 0;
+        return truncateChildHeight >= truncateParentHeight * 2;
+    }
+}
+
+var css_248z = ".sCNIjluCskc- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  box-sizing: border-box;\n  border: calc(16px / 16) solid transparent;\n  border: var(--border-base) solid transparent;\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n  transition: all 200ms;\n  transition: all var(--timing-base);\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.MFUlz1WQLdk- {\n  -ms-flex: 1;\n      flex: 1;\n  min-width: 120px;\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n  border: none;\n  border-radius: 0;\n  color: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  font-size: calc(calc(16px * 1) * 0.875);\n  font-size: var(--typography--fontSize-base);\n  line-height: 1.25;\n  line-height: var(--typography--lineHeight-base);\n  background: transparent;\n  -webkit-appearance: none;\n          appearance: none;\n}\n\n.MFUlz1WQLdk-:focus {\n  outline: none;\n}\n\n.V9eYJdjPAeY- {\n  position: relative;\n  z-index: 6;\n  z-index: var(--elevation-menu);\n  width: 100%;\n}\n\n.LdytkOeCU9c- {\n  max-height: 320px;\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  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n  overflow-y: scroll;\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n.y7Cz2u8BuNE-,\n._-7bmao8Q9As- {\n  display: -ms-flexbox;\n  display: flex;\n  width: 100%;\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  -webkit-appearance: none;\n          appearance: none;\n  -ms-flex-align: center;\n      align-items: center;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n.y7Cz2u8BuNE-:focus {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n}\n\n.y7Cz2u8BuNE-:focus,\n.iCwWdcmtInc- {\n  outline: none;\n  background-color: rgb(244, 246, 250);\n  background-color: var(--color-surface--hover);\n}\n\n._-7bmao8Q9As- {\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n";
+var styles = {"wrapper":"sCNIjluCskc-","input":"MFUlz1WQLdk-","menu":"V9eYJdjPAeY-","menuList":"LdytkOeCU9c-","menuListOption":"y7Cz2u8BuNE-","loadingIndicator":"_-7bmao8Q9As-","activeOption":"iCwWdcmtInc-"};
+styleInject_es.styleInject(css_248z);
+
+function InternalChipDismissibleInput(props) {
+    const { activator = React__default["default"].createElement(Button.Button, { icon: "add", type: "secondary", ariaLabel: "Add" }), attachTo, isLoadingMore = false, onLoadMore, } = props;
+    const { activeIndex, allOptions, hasAvailableOptions, inputRef, menuId, menuOpen, searchValue, generateDescendantId, handleBlur, handleOpenMenu, handleSearchChange, handleCancelBlur, handleEnableBlur, handleSetActiveOnMouseOver, handleKeyDown, handleSelectOption, handleDebouncedSearch, } = useScrollToActive.useInternalChipDismissibleInput(props);
+    const menuRef = useScrollToActive.useScrollToActive(activeIndex);
+    const { ref: visibleChildRef, isInView } = useScrollToActive.useInView();
+    const { styles: popperStyles, attributes, update, setPositionedElementRef, } = useScrollToActive.useRepositionMenu(attachTo);
+    React.useEffect(() => {
+        if (menuOpen && update)
+            update();
+    }, [allOptions]);
+    React.useEffect(() => {
+        handleDebouncedSearch();
+        return handleDebouncedSearch.cancel;
+    }, [searchValue]);
+    React.useEffect(() => {
+        isInView && onLoadMore && onLoadMore(searchValue);
+    }, [isInView]);
+    if (!menuOpen) {
+        return React__default["default"].cloneElement(activator, { onClick: handleOpenMenu });
+    }
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement("input", { ref: inputRef, className: styles.input, type: "text", role: "combobox", "aria-label": "Press up and down arrow to cycle through the options or type to narrow down the results", "aria-autocomplete": "list", "aria-owns": menuId, "aria-expanded": hasAvailableOptions, "aria-activedescendant": generateDescendantId(activeIndex), value: searchValue, onChange: handleSearchChange, onKeyDown: handleKeyDown, onBlur: debounce__default["default"](handleBlur, 200), onFocus: handleOpenMenu, autoFocus: true }),
+        (hasAvailableOptions || isLoadingMore) && (React__default["default"].createElement("div", Object.assign({ ref: setPositionedElementRef, className: styles.menu, style: popperStyles.popper }, attributes.popper),
+            React__default["default"].createElement("div", { ref: menuRef, role: "listbox", id: menuId, className: styles.menuList, "data-testid": "chip-menu" },
+                allOptions.map((option, i) => (React__default["default"].createElement("button", { key: option.value, role: "option", type: "button", id: generateDescendantId(i), className: classnames__default["default"](styles.menuListOption, {
+                        [styles.activeOption]: activeIndex === i,
+                    }), onClick: () => handleSelectOption(option), onMouseEnter: handleSetActiveOnMouseOver(i), onMouseDown: handleCancelBlur, onMouseUp: handleEnableBlur },
+                    React__default["default"].createElement("span", { "aria-hidden": true }, option.prefix),
+                    React__default["default"].createElement(Text.Text, null, option.label)))),
+                React__default["default"].createElement("div", { ref: visibleChildRef }),
+                isLoadingMore && (React__default["default"].createElement("div", { className: styles.loadingIndicator },
+                    React__default["default"].createElement(Spinner.Spinner, { size: "small", inline: true }))))))));
+}
+
+function InternalChipDismissible(props) {
+    const { availableChipOptions, ref: wrapperRef, sortedVisibleChipOptions, handleChipAdd, handleChipClick, handleChipKeyDown, handleChipRemove, handleCustomAdd, handleWrapperKeyDown, } = useScrollToActive.useInternalChipDismissible(props);
+    return (React__default["default"].createElement("div", { ref: wrapperRef, className: styles.wrapper, "data-testid": "dismissible-chips", onKeyDown: handleWrapperKeyDown, role: "listbox" },
+        sortedVisibleChipOptions.map(chip => (React__default["default"].createElement(InternalChip, Object.assign({ key: chip.value }, chip, { onKeyDown: handleChipKeyDown(chip.value), onClick: handleChipClick(chip.value), ariaLabel: `${chip.label}. Press delete or backspace to remove ${chip.label}`, tabIndex: 0, suffix: React__default["default"].createElement(InternalChipButton, { icon: "remove", invalid: chip.invalid, disabled: chip.disabled, label: chip.label, onClick: handleChipRemove(chip.value) }) })))),
+        React__default["default"].createElement(InternalChipDismissibleInput, { activator: props.activator, attachTo: wrapperRef, isLoadingMore: props.isLoadingMore, options: availableChipOptions, onOptionSelect: handleChipAdd, onCustomOptionSelect: handleCustomAdd, onSearch: props.onSearch, onLoadMore: props.onLoadMore })));
+}
+
+exports.InternalChip = InternalChip;
+exports.InternalChipButton = InternalChipButton;
+exports.InternalChipDismissible = InternalChipDismissible;
+exports.styles = styles$1;

package/dist/InternalGridCell-58643b70.js

@@ -0,0 +1,44 @@
+'use strict';
+
+var React = require('react');
+var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var css_248z = ".YJHtDDKq6WI- {\n  grid-column: initial;\n  grid-column-end: span var(--gridCell--size-xs);\n}@media (min-width: 490px) {.YJHtDDKq6WI- {\n    grid-column-end: span var(--gridCell--size-sm);\n}\n  }@media (--small-screens-and-up) {.YJHtDDKq6WI- {\n    grid-column-end: span var(--gridCell--size-sm);\n}\n  }@media (min-width: 768px) {.YJHtDDKq6WI- {\n    grid-column-end: span var(--gridCell--size-md);\n}\n  }@media (--medium-screens-and-up) {.YJHtDDKq6WI- {\n    grid-column-end: span var(--gridCell--size-md);\n}\n  }@media (min-width: 1080px) {.YJHtDDKq6WI- {\n    grid-column-end: span var(--gridCell--size-lg);\n}\n  }@media (--large-screens-and-up) {.YJHtDDKq6WI- {\n    grid-column-end: span var(--gridCell--size-lg);\n}\n  }@media (min-width: 1440px) {.YJHtDDKq6WI- {\n    grid-column-end: span var(--gridCell--size-xl);\n}\n  }@media (--extra-large-screens-and-up) {.YJHtDDKq6WI- {\n    grid-column-end: span var(--gridCell--size-xl);\n}\n  }\n";
+var styles = {"gridCell":"YJHtDDKq6WI-"};
+styleInject_es.styleInject(css_248z);
+
+/**
+ * Breakpoints that we support
+ */
+const breakpoints = ["xs", "sm", "md", "lg", "xl"];
+const MAX_COLUMNS = 12;
+const GRID_CELL_TEST_ID = "ATL-Grid-GridCell";
+function InternalGridCell({ size, children, }) {
+    /**
+     * Build CSS variables for column sizes for all possible breakpoints to size
+     * the column
+     */
+    const cssSizeVariables = breakpoints.reduce(getSizeCSSVariables(size), {});
+    return (React__default["default"].createElement("div", { "data-testid": GRID_CELL_TEST_ID, className: styles.gridCell, style: cssSizeVariables }, children));
+}
+function getSizeCSSVariables(size) {
+    return (breakpointsObj, currentSize) => {
+        let columnSize = size[currentSize];
+        // If a column size isn't provided in the size prop, use the previous
+        // breakpoint's value
+        if (!columnSize) {
+            const existingValues = Object.values(breakpointsObj);
+            const lastKnownValue = existingValues[existingValues.length - 1];
+            columnSize = lastKnownValue || MAX_COLUMNS;
+        }
+        breakpointsObj[`--gridCell--size-${currentSize}`] = columnSize;
+        return breakpointsObj;
+    };
+}
+
+exports.GRID_CELL_TEST_ID = GRID_CELL_TEST_ID;
+exports.InternalGridCell = InternalGridCell;

package/dist/InternalGridCell-eca14dd0.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { s as styleInject } from './style-inject.es-a0e1a0ba.js';
+
+var css_248z = ".YJHtDDKq6WI- {\n  grid-column: initial;\n  grid-column-end: span var(--gridCell--size-xs);\n}@media (min-width: 490px) {.YJHtDDKq6WI- {\n    grid-column-end: span var(--gridCell--size-sm);\n}\n  }@media (--small-screens-and-up) {.YJHtDDKq6WI- {\n    grid-column-end: span var(--gridCell--size-sm);\n}\n  }@media (min-width: 768px) {.YJHtDDKq6WI- {\n    grid-column-end: span var(--gridCell--size-md);\n}\n  }@media (--medium-screens-and-up) {.YJHtDDKq6WI- {\n    grid-column-end: span var(--gridCell--size-md);\n}\n  }@media (min-width: 1080px) {.YJHtDDKq6WI- {\n    grid-column-end: span var(--gridCell--size-lg);\n}\n  }@media (--large-screens-and-up) {.YJHtDDKq6WI- {\n    grid-column-end: span var(--gridCell--size-lg);\n}\n  }@media (min-width: 1440px) {.YJHtDDKq6WI- {\n    grid-column-end: span var(--gridCell--size-xl);\n}\n  }@media (--extra-large-screens-and-up) {.YJHtDDKq6WI- {\n    grid-column-end: span var(--gridCell--size-xl);\n}\n  }\n";
+var styles = {"gridCell":"YJHtDDKq6WI-"};
+styleInject(css_248z);
+
+/**
+ * Breakpoints that we support
+ */
+const breakpoints = ["xs", "sm", "md", "lg", "xl"];
+const MAX_COLUMNS = 12;
+const GRID_CELL_TEST_ID = "ATL-Grid-GridCell";
+function InternalGridCell({ size, children, }) {
+    /**
+     * Build CSS variables for column sizes for all possible breakpoints to size
+     * the column
+     */
+    const cssSizeVariables = breakpoints.reduce(getSizeCSSVariables(size), {});
+    return (React.createElement("div", { "data-testid": GRID_CELL_TEST_ID, className: styles.gridCell, style: cssSizeVariables }, children));
+}
+function getSizeCSSVariables(size) {
+    return (breakpointsObj, currentSize) => {
+        let columnSize = size[currentSize];
+        // If a column size isn't provided in the size prop, use the previous
+        // breakpoint's value
+        if (!columnSize) {
+            const existingValues = Object.values(breakpointsObj);
+            const lastKnownValue = existingValues[existingValues.length - 1];
+            columnSize = lastKnownValue || MAX_COLUMNS;
+        }
+        breakpointsObj[`--gridCell--size-${currentSize}`] = columnSize;
+        return breakpointsObj;
+    };
+}
+
+export { GRID_CELL_TEST_ID as G, InternalGridCell as I };

package/dist/LightBox/index.js

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var LightBox = require('../LightBox-a89d8863.js');
+require('react');
+require('framer-motion');
+require('react-dom');
+require('lodash/debounce');
+require('@jobber/hooks/useRefocusOnActivator');
+require('@jobber/hooks/useOnKeyDown');
+require('@jobber/hooks/useFocusTrap');
+require('../style-inject.es-9d2f5f4e.js');
+require('../ButtonDismiss-350af163.js');
+require('../Button-b73a5e01.js');
+require('classnames');
+require('react-router-dom');
+require('../Icon-405a216c.js');
+require('@jobber/design');
+require('../Typography-c45bf216.js');
+
+
+
+exports.LightBox = LightBox.LightBox;

package/dist/LightBox/index.mjs

@@ -0,0 +1,16 @@
+export { L as LightBox } from '../LightBox-2460f422.js';
+import 'react';
+import 'framer-motion';
+import 'react-dom';
+import 'lodash/debounce';
+import '@jobber/hooks/useRefocusOnActivator';
+import '@jobber/hooks/useOnKeyDown';
+import '@jobber/hooks/useFocusTrap';
+import '../style-inject.es-a0e1a0ba.js';
+import '../ButtonDismiss-614803be.js';
+import '../Button-9ae092b3.js';
+import 'classnames';
+import 'react-router-dom';
+import '../Icon-22723fe6.js';
+import '@jobber/design';
+import '../Typography-7cc5daf5.js';

package/dist/LightBox-2460f422.js

@@ -0,0 +1,109 @@
+import React, { useState, useEffect } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import ReactDOM from 'react-dom';
+import debounce from 'lodash/debounce';
+import { useRefocusOnActivator } from '@jobber/hooks/useRefocusOnActivator';
+import { useOnKeyDown } from '@jobber/hooks/useOnKeyDown';
+import { useFocusTrap } from '@jobber/hooks/useFocusTrap';
+import { s as styleInject } from './style-inject.es-a0e1a0ba.js';
+import { B as ButtonDismiss } from './ButtonDismiss-614803be.js';
+import { B as Button } from './Button-9ae092b3.js';
+
+var css_248z = "._3JgBCebdbNU-,\n.JJOBEL7d-10- {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: 50%;\n  z-index: 1;\n  z-index: var(--elevation-base);\n  -webkit-transform: translateY(-50%);\n          transform: translateY(-50%);\n}\n\n._3JgBCebdbNU- {\n  right: calc(16px * 1);\n  right: var(--space-base);\n}\n\n.JJOBEL7d-10- {\n  left: calc(16px * 1);\n  left: var(--space-base);\n}\n\n.fAep1A-0xIU- {\n  display: -ms-flexbox;\n  display: flex;\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 1001;\n  z-index: var(--elevation-modal);\n  width: 100%;\n  height: 100%;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-direction: column;\n      flex-direction: column;\n}\n\n.AfUUWErd5S4- {\n  display: -ms-flexbox;\n  display: flex;\n  z-index: 1;\n  z-index: var(--elevation-base);\n  padding: calc(16px / 2) calc(16px * 1);\n  padding: var(--space-small) var(--space-base);\n  color: rgb(193, 201, 206);\n  color: var(--color-text--reverse--secondary);\n  font-size: calc(16px * 1);\n  font-size: var(--typography--fontSize-large);\n  background-color: rgb(1, 41, 57);\n  background-color: var(--color-surface--reverse);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n}\n\n.jobber-retheme .AfUUWErd5S4- {\n  color: rgb(77, 105, 116);\n  color: var(--color-text--secondary);\n  background-color: rgb(238, 240, 242);\n  background-color: var(--color-surface--background);\n}\n\n.ysUYbBTaORk- {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.GSOVtN1Y3IU- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: center;\n      justify-content: center;\n  position: relative;\n  -ms-flex: 1 1 0px;\n      flex: 1 1 0;\n  min-height: 0;\n}\n\n.-V917BdNqSs- {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: rgba(0, 0, 0, 0.32);\n  background-color: var(--color-overlay);\n}\n\n.sjwUjzb3a5c- {\n  position: absolute;\n  top: 50%;\n  max-width: 100%;\n  max-height: 100%;\n  margin: auto;\n}\n";
+var styles = {"next":"_3JgBCebdbNU-","prev":"JJOBEL7d-10-","lightboxWrapper":"fAep1A-0xIU-","toolbar":"AfUUWErd5S4-","title":"ysUYbBTaORk-","imagesWrapper":"GSOVtN1Y3IU-","overlay":"-V917BdNqSs-","image":"sjwUjzb3a5c-"};
+styleInject(css_248z);
+
+/* eslint-disable max-statements */
+const swipeConfidenceThreshold = 10000;
+const swipePower = (offset, velocity) => {
+    return Math.abs(offset) * velocity;
+};
+const variants = {
+    enter: (direction) => {
+        return {
+            x: direction > 0 ? 1000 : -1000,
+            opacity: 0,
+        };
+    },
+    center: {
+        zIndex: 1,
+        x: 0,
+        opacity: 1,
+    },
+    exit: (direction) => {
+        return {
+            zIndex: 0,
+            x: direction < 0 ? 1000 : -1000,
+            opacity: 0,
+        };
+    },
+};
+const imageTransition = {
+    x: { type: "spring", stiffness: 300, damping: 30 },
+    opacity: { duration: 0.2 },
+};
+// A little bit more than the transition's duration
+// We're doing this to prevent a bug from framer-motion
+// https://github.com/framer/motion/issues/1769
+const debounceDuration = 250;
+function LightBox({ open, images, imageIndex = 0, onRequestClose, }) {
+    const [currentImageIndex, setCurrentImageIndex] = useState(imageIndex);
+    const [direction, setDirection] = useState(0);
+    const lightboxRef = useFocusTrap(open);
+    const debouncedHandleNext = debounce(handleMoveNext, debounceDuration);
+    const debouncedHandlePrevious = debounce(handleMovePrevious, debounceDuration);
+    useRefocusOnActivator(open);
+    useOnKeyDown(handleRequestClose, "Escape");
+    useOnKeyDown(debouncedHandlePrevious, {
+        key: "ArrowLeft",
+    });
+    useOnKeyDown(debouncedHandleNext, {
+        key: "ArrowRight",
+    });
+    useEffect(() => {
+        setCurrentImageIndex(imageIndex);
+    }, [imageIndex, open]);
+    const template = (React.createElement(React.Fragment, null, open && (React.createElement("div", { className: styles.lightboxWrapper, tabIndex: 0, "aria-label": "Lightbox", key: "Lightbox", ref: lightboxRef },
+        React.createElement("div", { className: styles.toolbar },
+            React.createElement("span", { className: styles.title }, images[currentImageIndex].title),
+            React.createElement(ButtonDismiss, { ariaLabel: "Close", onClick: handleRequestClose })),
+        React.createElement("div", { className: styles.imagesWrapper },
+            React.createElement(AnimatePresence, { initial: false },
+                React.createElement(motion.img, { key: currentImageIndex, variants: variants, src: images[currentImageIndex].url, custom: direction, className: styles.image, style: { y: "-50%" }, initial: "enter", animate: "center", exit: "exit", transition: imageTransition, drag: "x", dragConstraints: { left: 0, right: 0 }, dragElastic: 1, onDragEnd: handleOnDragEnd }))),
+        images.length > 1 && (React.createElement(React.Fragment, null,
+            React.createElement(PreviousButton, { onClick: debouncedHandlePrevious }),
+            React.createElement(NextButton, { onClick: debouncedHandleNext }))),
+        React.createElement("div", { className: styles.toolbar }, images[currentImageIndex].caption),
+        React.createElement("div", { className: styles.overlay, onClick: handleRequestClose })))));
+    return ReactDOM.createPortal(template, document.body);
+    function handleMovePrevious() {
+        setDirection(-1);
+        setCurrentImageIndex((currentImageIndex + images.length - 1) % images.length);
+    }
+    function handleMoveNext() {
+        setDirection(1);
+        setCurrentImageIndex((currentImageIndex + 1) % images.length);
+    }
+    function handleRequestClose() {
+        onRequestClose({ lastPosition: currentImageIndex });
+    }
+    function handleOnDragEnd(event, { offset, velocity }) {
+        const swipe = swipePower(offset.x, velocity.x);
+        if (swipe < -swipeConfidenceThreshold) {
+            handleMoveNext();
+        }
+        else if (swipe > swipeConfidenceThreshold) {
+            handleMovePrevious();
+        }
+    }
+}
+function PreviousButton({ onClick }) {
+    return (React.createElement("div", { className: styles.prev },
+        React.createElement(Button, { size: "large", variation: "subtle", type: "secondary", icon: "arrowLeft", ariaLabel: "Previous image", onClick: onClick })));
+}
+function NextButton({ onClick }) {
+    return (React.createElement("div", { className: styles.next },
+        React.createElement(Button, { size: "large", variation: "subtle", type: "secondary", icon: "arrowRight", ariaLabel: "Next image", onClick: onClick })));
+}
+
+export { LightBox as L };