@jobber/components 4.59.0 → 4.59.1-st-spike-w.0

package/dist/{Chip-4f12eec8.js → Chip-12a64c38.js}

@@ -1,37 +1,28 @@
-'use strict';
-
-var React = require('react');
-var uuid = require('uuid');
-var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
-var classnames = require('classnames');
-var useAssert = require('@jobber/hooks/useAssert');
-var Icon = require('./Icon-405a216c.js');
-var Avatar = require('./Avatar-1aa30ee1.js');
-var Typography = require('./Typography-83915c54.js');
-var Tooltip = require('./Tooltip-6b12f1c2.js');
-var sortBy = require('lodash/sortBy');
-var useLiveAnnounce = require('@jobber/hooks/useLiveAnnounce');
-var debounce = require('lodash/debounce');
-var reactPopper = require('react-popper');
-var Text = require('./Text-54334431.js');
-var Button = require('./Button-db6114a6.js');
-var Spinner = 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 classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
-var sortBy__default = /*#__PURE__*/_interopDefaultLegacy(sortBy);
-var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
+import React, { useRef, useState, useEffect } from 'react';
+import { v1 } from 'uuid';
+import { s as styleInject } from './style-inject.es-a0e1a0ba.js';
+import classnames from 'classnames';
+import { useAssert } from '@jobber/hooks/useAssert';
+import { I as Icon } from './Icon-22723fe6.js';
+import { A as Avatar } from './Avatar-b2e862de.js';
+import { T as Typography } from './Typography-09952a2f.js';
+import { T as Tooltip } from './Tooltip-c80b9fb7.js';
+import sortBy from 'lodash/sortBy';
+import { useLiveAnnounce } from '@jobber/hooks/useLiveAnnounce';
+import debounce from 'lodash/debounce';
+import { usePopper } from 'react-popper';
+import { T as Text } from './Text-703e2c21.js';
+import { B as Button } from './Button-319d8fa0.js';
+import { S as Spinner } from './Spinner-5d8359b8.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(225, 225, 225);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: calc(16px / 2);\n  border-radius: var(--radius-larger);\n  color: rgba(101, 120, 132, 1);\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 calc(16px / 4) calc(16px / 8)\n    rgb(231, 213, 87);\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(250, 246, 219);\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(250, 246, 219);\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 calc(16px / 4) calc(16px / 8)\n    rgb(231, 213, 87);\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);
+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() })));
+    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")) {
@@ -60,19 +51,19 @@ function InternalChipButton({ icon, invalid, disabled, label, onClick, }) {
 
 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) === Avatar) {
+        return React.createElement(Avatar, Object.assign({}, affix.props, { size: "small" }));
     }
-    if ((affix === null || affix === void 0 ? void 0 : affix.type) === Icon.Icon) {
+    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__default["default"].createElement(InternalChipButton, Object.assign({}, affix.props));
+        return React.createElement(InternalChipButton, Object.assign({}, affix.props));
     }
-    return React__default["default"].createElement(React__default["default"].Fragment, null);
+    return React.createElement(React.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 })))));
+        return (React.createElement("div", { className: styles$1.icon }, React.cloneElement(icon, Object.assign({ size: "base" }, (color && { color: color })))));
     }
     function getIconColor() {
         if (disabled && !active)
@@ -84,17 +75,17 @@ function InternalChipAffix({ affix, active, invalid, disabled, }) {
         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 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.useAssert(!!affix && !(isAvatar || isIcon || isChipButton), `Prefix prop only accepts "<Avatar />" or "<Icon />" component. You have "${affix === null || affix === void 0 ? void 0 : affix.type}".`);
+        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 [truncateRef, setTruncateRef] = useState();
     const isClickable = onClick && !disabled;
-    const classNames = classnames__default["default"](styles$1.chip, {
+    const classNames = classnames(styles$1.chip, {
         [styles$1.clickable]: isClickable,
         [styles$1.active]: active,
         [styles$1.disabled]: disabled,
@@ -104,12 +95,12 @@ function InternalChip({ label, active = false, disabled = false, invalid = false
     });
     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;
+    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;
@@ -118,14 +109,14 @@ function InternalChip({ label, active = false, disabled = false, invalid = false
     }
 }
 
-function InternalChipSingleSelect({ children, selected, name = uuid.v1(), onChange, onClick, }) {
-    return (React__default["default"].createElement("div", { className: styles$1.wrapper, "data-testid": "singleselect-chips" }, React__default["default"].Children.map(children, child => {
+function InternalChipSingleSelect({ children, selected, name = v1(), onChange, onClick, }) {
+    return (React.createElement("div", { className: styles$1.wrapper, "data-testid": "singleselect-chips" }, React.Children.map(children, child => {
         const isSelected = child.props.value === selected;
-        return (React__default["default"].createElement("label", null,
-            React__default["default"].createElement("input", { type: "radio", checked: isSelected, className: styles$1.input, name: name, onClick: handleClick(child.props.value), onKeyUp: handleKeyUp(isSelected, child.props.value), onChange: () => {
+        return (React.createElement("label", null,
+            React.createElement("input", { type: "radio", checked: isSelected, className: styles$1.input, name: name, onClick: handleClick(child.props.value), onKeyUp: handleKeyUp(isSelected, child.props.value), onChange: () => {
                     /* No op. onClick handles the change to allow deselecting. */
                 }, disabled: child.props.disabled }),
-            React__default["default"].createElement(InternalChip, Object.assign({}, child.props, { active: isSelected }))));
+            React.createElement(InternalChip, Object.assign({}, child.props, { active: isSelected }))));
     })));
     function handleKeyUp(active, value) {
         if (!active)
@@ -150,11 +141,11 @@ function InternalChipSingleSelect({ children, selected, name = uuid.v1(), onChan
 }
 
 function InternalChipMultiSelect({ children, selected, onChange, onClick, }) {
-    return (React__default["default"].createElement("div", { className: styles$1.wrapper, "data-testid": "multiselect-chips" }, React__default["default"].Children.map(children, chip => {
+    return (React.createElement("div", { className: styles$1.wrapper, "data-testid": "multiselect-chips" }, React.Children.map(children, chip => {
         const isChipActive = isChipSelected(chip.props.value);
-        return (React__default["default"].createElement("label", null,
-            React__default["default"].createElement("input", { type: "checkbox", checked: isChipActive, className: styles$1.input, onClick: handleClick(chip.props.value), onChange: handleChange(chip.props.value), disabled: chip.props.disabled }),
-            React__default["default"].createElement(InternalChip, Object.assign({}, chip.props, { active: isChipActive, suffix: checkmarkIcon(isChipActive) }))));
+        return (React.createElement("label", null,
+            React.createElement("input", { type: "checkbox", checked: isChipActive, className: styles$1.input, onClick: handleClick(chip.props.value), onChange: handleChange(chip.props.value), disabled: chip.props.disabled }),
+            React.createElement(InternalChip, Object.assign({}, chip.props, { active: isChipActive, suffix: checkmarkIcon(isChipActive) }))));
     })));
     function isChipSelected(value) {
         return selected.includes(value);
@@ -189,21 +180,21 @@ function InternalChipMultiSelect({ children, selected, onChange, onClick, }) {
         // DO NOT COPY!
         if (!show)
             return;
-        return React__default["default"].createElement(Icon.Icon, { name: "checkmark" });
+        return React.createElement(Icon, { name: "checkmark" });
     }
 }
 
 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 calc(16px / 4) calc(16px / 8)\n    rgb(231, 213, 87);\n  box-shadow: var(--shadow-focus);\n}\n\n.y7Cz2u8BuNE-:focus,\n.iCwWdcmtInc- {\n  outline: none;\n  background-color: rgb(250, 246, 219);\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);
+styleInject(css_248z);
 
 function useInternalChipDismissible({ children, selected, onChange, onClick, onCustomAdd, }) {
-    const ref = React.useRef(null);
+    const ref = useRef(null);
     const chipOptions = children.map(chip => chip.props);
     const visibleChipOptions = chipOptions.filter(chip => selected.includes(chip.value));
-    const sortedVisibleChipOptions = sortBy__default["default"](visibleChipOptions, chip => selected.indexOf(chip.value));
+    const sortedVisibleChipOptions = sortBy(visibleChipOptions, chip => selected.indexOf(chip.value));
     const availableChipOptions = chipOptions.filter(chip => !selected.includes(chip.value));
-    const { liveAnnounce } = useLiveAnnounce.useLiveAnnounce();
+    const { liveAnnounce } = useLiveAnnounce();
     const actions = {
         handleChipRemove: (value) => {
             return () => {
@@ -258,24 +249,24 @@ function useInternalChipDismissible({ children, selected, onChange, onClick, onC
         availableChipOptions });
 }
 
-const menuId = uuid.v1();
+const menuId = v1();
 // eslint-disable-next-line max-statements
 function useInternalChipDismissibleInput({ options, isLoadingMore = false, onCustomOptionSelect, onOptionSelect, onSearch, }) {
-    const [allOptions, setAllOptions] = React.useState([]);
-    const [searchValue, setSearchValue] = React.useState("");
-    const [menuOpen, setMenuOpen] = React.useState(false);
-    const [activeIndex, setActiveIndex] = React.useState(0);
-    const [shouldCancelBlur, setShouldCancelBlur] = React.useState(false);
-    const [shouldCancelEnter, setShouldCancelEnter] = React.useState(false);
+    const [allOptions, setAllOptions] = useState([]);
+    const [searchValue, setSearchValue] = useState("");
+    const [menuOpen, setMenuOpen] = useState(false);
+    const [activeIndex, setActiveIndex] = useState(0);
+    const [shouldCancelBlur, setShouldCancelBlur] = useState(false);
+    const [shouldCancelEnter, setShouldCancelEnter] = useState(false);
     const canAddCustomOption = onCustomOptionSelect !== undefined && !isLoadingMore;
     const maxOptionIndex = allOptions.length - 1;
-    const { liveAnnounce } = useLiveAnnounce.useLiveAnnounce();
-    React.useEffect(() => {
+    const { liveAnnounce } = useLiveAnnounce();
+    useEffect(() => {
         setAllOptions(generateOptions(options, searchValue, canAddCustomOption));
     }, [options]);
     const computed = {
         menuId,
-        inputRef: React.useRef(null),
+        inputRef: useRef(null),
         activeOption: allOptions[activeIndex],
         hasAvailableOptions: allOptions.length > 0,
         nextOptionIndex: activeIndex < maxOptionIndex ? activeIndex + 1 : 0,
@@ -353,7 +344,7 @@ function useInternalChipDismissibleInput({ options, isLoadingMore = false, onCus
             }
             handleKeydownEvents(callbacks, event);
         },
-        handleDebouncedSearch: debounce__default["default"](() => {
+        handleDebouncedSearch: debounce(() => {
             onSearch && onSearch(searchValue);
             setAllOptions(generateOptions(options, searchValue, canAddCustomOption));
             setShouldCancelEnter(false);
@@ -386,7 +377,7 @@ function generateCustomOptionObject(searchValue) {
     return {
         value: searchValue,
         label: searchValue,
-        prefix: React__default["default"].createElement(Icon.Icon, { name: "add" }),
+        prefix: React.createElement(Icon, { name: "add" }),
         custom: true,
     };
 }
@@ -402,13 +393,13 @@ function handleKeydownEvents(callbacks, event) {
 }
 
 function useInView() {
-    const ref = React.useRef(null);
-    const [isInView, setIsInView] = React.useState(false);
+    const ref = useRef(null);
+    const [isInView, setIsInView] = useState(false);
     if (window.IntersectionObserver) {
         const observer = new IntersectionObserver(entries => {
             setIsInView(entries[0].isIntersecting);
         });
-        React.useEffect(() => {
+        useEffect(() => {
             ref.current && observer.observe(ref.current);
             return () => {
                 if (!ref.current)
@@ -422,8 +413,8 @@ function useInView() {
 
 function useRepositionMenu(attachTo) {
     var _a;
-    const [positionElement, setPositionedElementRef] = React.useState();
-    const popper = reactPopper.usePopper(attachTo.current, positionElement, {
+    const [positionElement, setPositionedElementRef] = useState();
+    const popper = usePopper(attachTo.current, positionElement, {
         modifiers: [
             { name: "offset", options: { offset: [0, 8] } },
             { name: "flip", options: { fallbackPlacements: ["top"] } },
@@ -434,8 +425,8 @@ function useRepositionMenu(attachTo) {
 }
 
 function useScrollToActive(index) {
-    const ref = React.useRef(null);
-    React.useEffect(() => {
+    const ref = useRef(null);
+    useEffect(() => {
         var _a, _b;
         if (!window.HTMLElement.prototype.scrollIntoView)
             return;
@@ -449,54 +440,54 @@ function useScrollToActive(index) {
 }
 
 function InternalChipDismissibleInput(props) {
-    const { activator = React__default["default"].createElement(Button.Button, { icon: "add", type: "secondary", ariaLabel: "Add" }), attachTo, isLoadingMore = false, onLoadMore, } = 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);
-    React.useEffect(() => {
+    useEffect(() => {
         if (menuOpen && update)
             update();
     }, [allOptions]);
-    React.useEffect(() => {
+    useEffect(() => {
         handleDebouncedSearch();
         return handleDebouncedSearch.cancel;
     }, [searchValue]);
-    React.useEffect(() => {
+    useEffect(() => {
         isInView && onLoadMore && onLoadMore(searchValue);
     }, [isInView]);
     if (!menuOpen) {
-        return React__default["default"].cloneElement(activator, { onClick: handleOpenMenu });
+        return React.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, {
+    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__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 }))))))));
+                    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__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 })));
+    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 })));
 }
 
 function Chips(props) {
     switch (props.type) {
         case "dismissible":
-            return React__default["default"].createElement(InternalChipDismissible, Object.assign({}, props));
+            return React.createElement(InternalChipDismissible, Object.assign({}, props));
         case "multiselect":
-            return React__default["default"].createElement(InternalChipMultiSelect, Object.assign({}, props));
+            return React.createElement(InternalChipMultiSelect, Object.assign({}, props));
         default:
-            return React__default["default"].createElement(InternalChipSingleSelect, Object.assign({}, props));
+            return React.createElement(InternalChipSingleSelect, Object.assign({}, props));
     }
 }
 
@@ -504,11 +495,8 @@ function Chips(props) {
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function Chip(props) {
     // Throw error when <Chip /> gets used outside of the <Chips />
-    useAssert.useAssert(true, "`<Chip>` component can only be used inside `<Chips>`");
-    return React__default["default"].createElement(React__default["default"].Fragment, null);
+    useAssert(true, "`<Chip>` component can only be used inside `<Chips>`");
+    return React.createElement(React.Fragment, null);
 }
 
-exports.Chip = Chip;
-exports.Chips = Chips;
-exports.InternalChip = InternalChip;
-exports.InternalChipButton = InternalChipButton;
+export { Chips as C, InternalChip as I, InternalChipButton as a, Chip as b };

package/dist/{Chip-f8b8fd89.js → Chip-40f5214c.js}

@@ -1,22 +1,15 @@
-'use strict';
-
-var React = require('react');
-var classnames = require('classnames');
-var useInView = require('@jobber/hooks/useInView');
-var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
-var Avatar = require('./Avatar-1aa30ee1.js');
-var Icon = require('./Icon-405a216c.js');
-var Typography = require('./Typography-83915c54.js');
-var Tooltip = require('./Tooltip-6b12f1c2.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+import React, { useMemo, isValidElement } from 'react';
+import classnames from 'classnames';
+import { useInView } from '@jobber/hooks/useInView';
+import { s as styleInject } from './style-inject.es-a0e1a0ba.js';
+import { A as Avatar } from './Avatar-b2e862de.js';
+import { I as Icon } from './Icon-22723fe6.js';
+import { T as Typography } from './Typography-09952a2f.js';
+import { T as Tooltip } from './Tooltip-c80b9fb7.js';
 
 var css_248z = ":root {\n  --chip--gradient-color-variation: var(--chip-base-bg);\n  --chip--gradient-color-variation--hover: var(--chip-base--hover);\n}\n\n.af7U8MvcbHE- {\n  --chip-height: 40px;\n  --chip-radius: 20px;\n  --chip-disabled--bg: var(--color-grey--lighter);\n  --chip-bar-color: var(--color-greyBlue--light);\n  --chip-base-bg: var(--color-greyBlue--lightest);\n  --chip-base--hover: var(--color-greyBlue--lighter);\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  height: 40px;\n  height: var(--chip-height);\n  min-width: 0;\n  padding: calc(16px / 2) 16px;\n  padding: var(--space-small) var(--base-unit);\n  border: calc(16px / 16) solid transparent;\n  border: var(--border-base) solid transparent;\n  border-radius: 20px;\n  border-radius: var(--chip-radius);\n  color: rgb(1, 41, 57);\n  color: var(--color-heading);\n  text-align: left;\n  cursor: pointer;\n  transition: all var(--ease-both) 100ms;\n  transition: all var(--ease-both) var(--timing-quick);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.af7U8MvcbHE-:focus {\n  box-shadow: 0px 0px calc(16px / 4) calc(16px / 8)\n    rgb(231, 213, 87);\n  box-shadow: var(--shadow-focus);\n}\n\n.af7U8MvcbHE- .e905AYK4SCc- {\n  margin-left: calc(-1 * (16px / 2));\n  margin-left: calc(-1 * calc(16px / 2));\n  margin-left: calc(-1 * var(--space-small));\n  margin-right: calc(16px / 2);\n  margin-right: var(--space-small);\n}\n\n.af7U8MvcbHE- .ySADfZ0FckM- {\n  margin-left: calc(16px / 2);\n  margin-left: var(--space-small);\n  margin-right: calc(-1 * (16px / 2));\n  margin-right: calc(-1 * calc(16px / 2));\n  margin-right: calc(-1 * var(--space-small));\n}\n\n.af7U8MvcbHE- .e905AYK4SCc-,\n.af7U8MvcbHE- .ySADfZ0FckM- {\n  display: -ms-flexbox;\n  display: flex;\n  width: calc(16px * 1.5);\n  width: var(--space-large);\n  height: calc(16px * 1.5);\n  height: var(--space-large);\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n  border-radius: 100%;\n  border-radius: var(--radius-circle);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n\n.af7U8MvcbHE- .ySADfZ0FckM-:hover,\n.af7U8MvcbHE- .e905AYK4SCc-:hover {\n  background-color: rgb(181, 181, 181);\n  background-color: var(--color-disabled);\n}\n\n.af7U8MvcbHE- .e905AYK4SCc-.usdkmQ9Sxbk-,\n.af7U8MvcbHE- .ySADfZ0FckM-.usdkmQ9Sxbk- {\n  display: none;\n}\n\n.af7U8MvcbHE- .dg1-Izy1eQA- {\n  width: calc(16px / 16);\n  width: var(--space-minuscule);\n  height: 16px;\n  height: var(--base-unit);\n  margin: 0 calc(16px / 2);\n  margin: 0 var(--space-small);\n  background-color: var(--chip-bar-color);\n}\n\n.af7U8MvcbHE- .-lz0EYLTDgg- {\n  border-radius: 100%;\n  border-radius: var(--radius-circle);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n.wSI5L-5rODg- {\n  border: calc(16px / 16) solid transparent;\n  border: var(--border-base) solid transparent;\n  color: rgb(1, 41, 57);\n  color: var(--color-heading);\n  background-color: var(--chip-base-bg);\n  --chip--gradient-color-variation: var(--chip-base-bg);\n}\n\n.wSI5L-5rODg-:hover,\n.wSI5L-5rODg-:focus {\n  background-color: var(--chip-base--hover);\n  --chip--gradient-color-variation--hover: var(--chip-base--hover);\n}\n\n.SmUxkzpIC84-,\n.SmUxkzpIC84-:hover,\n.SmUxkzpIC84-:focus,\n.Mux23dmZSuw-.SmUxkzpIC84-,\n.Mux23dmZSuw-.SmUxkzpIC84-:hover,\n.Mux23dmZSuw-.SmUxkzpIC84-:focus {\n  border: calc(16px / 16) solid rgb(201, 66, 33);\n  border: var(--border-base) solid var(--color-critical);\n  background-color: rgb(255, 226, 219);\n  background-color: var(--color-critical--surface);\n  --chip--gradient-color-variation: var(--color-critical--surface);\n  --chip--gradient-color-variation--hover: var(--color-critical--surface);\n}\n\n.Mux23dmZSuw- {\n  border: calc(16px / 16) solid rgb(225, 225, 225);\n  border: var(--border-base) solid var(--color-disabled--secondary);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n  --chip--gradient-color-variation: var(--color-surface);\n}\n\n/* CAUTION: Order is important here since\n* there is are different styles for subtle:focus and subtle:hover\n* and we want hover to take priority\n*/\n\n.Mux23dmZSuw-:focus {\n  --chip--gradient-color-variation--hover: var(--color-surface);\n}\n\n.Mux23dmZSuw-:hover {\n  border: calc(16px / 16) solid var(--chip-base-bg);\n  border: var(--border-base) solid var(--chip-base-bg);\n  background-color: var(--chip-base-bg);\n  --chip--gradient-color-variation--hover: var(--chip-base-bg);\n}\n\n.MbRItb9vKhc-,\n.MbRItb9vKhc-:hover,\n.MbRItb9vKhc-:focus {\n  border: calc(16px / 16) solid var(--chip-disabled--bg);\n  border: var(--border-base) solid var(--chip-disabled--bg);\n  color: rgb(181, 181, 181);\n  color: var(--color-disabled);\n  background-color: var(--chip-disabled--bg);\n  cursor: auto;\n  --chip--gradient-color-variation: var(--chip-disabled--bg);\n  --chip--gradient-color-variation--hover: var(--chip-disabled--bg);\n}\n\n.MbRItb9vKhc- .dg1-Izy1eQA- {\n  background-color: rgb(181, 181, 181);\n  background-color: var(--color-disabled);\n}\n\n.af7U8MvcbHE-.MbRItb9vKhc- .ySADfZ0FckM- {\n  background-color: rgb(181, 181, 181);\n  background-color: var(--color-disabled);\n}\n\n.tJhURjR2Vec- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  overflow: hidden;\n  -ms-flex-wrap: nowrap;\n      flex-wrap: nowrap;\n}\n\n.tJhURjR2Vec- > * {\n  -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n}\n\n.tJhURjR2Vec- > p {\n  overflow: hidden;\n  white-space: nowrap;\n}\n\n.G3QXY0rNcK0- {\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: calc(16px * 1);\n  width: var(--space-base);\n  height: 100%;\n  background: linear-gradient(\n    to left,\n    var(--chip-base-bg) 5%,\n    rgba(255, 255, 255, 0)\n  );\n  background: linear-gradient(\n    to left,\n    var(--chip--gradient-color-variation) 5%,\n    rgba(255, 255, 255, 0)\n  );\n}\n\n.af7U8MvcbHE-:focus .G3QXY0rNcK0-,\n.af7U8MvcbHE-:hover .G3QXY0rNcK0- {\n  background: linear-gradient(\n    to left,\n    var(--chip-base--hover) 5%,\n    rgba(255, 255, 255, 0)\n  );\n  background: linear-gradient(\n    to left,\n    var(--chip--gradient-color-variation--hover) 5%,\n    rgba(255, 255, 255, 0)\n  );\n}\n\n.MUKEW6c2nNA- {\n  display: inline-block;\n  width: 1px;\n}\n";
 var styles = {"chip":"af7U8MvcbHE-","prefix":"e905AYK4SCc-","suffix":"ySADfZ0FckM-","empty":"usdkmQ9Sxbk-","chipBar":"dg1-Izy1eQA-","selected":"-lz0EYLTDgg-","base":"wSI5L-5rODg-","invalid":"SmUxkzpIC84-","subtle":"Mux23dmZSuw-","disabled":"MbRItb9vKhc-","chipContent":"tJhURjR2Vec-","truncateGradient":"G3QXY0rNcK0-","chipLabelRef":"MUKEW6c2nNA-"};
-styleInject_es.styleInject(css_248z);
+styleInject(css_248z);
 
 /**
  * Returns the first React Child that receives `true` from isCorrectComponent
@@ -25,28 +18,28 @@ styleInject_es.styleInject(css_248z);
  * @returns The first child component that returns true on isCorrectComponent
  */
 function useChildComponent(children, isCorrectComponent) {
-    return React.useMemo(() => {
-        return React__default["default"].Children.toArray(children).find(d => React.isValidElement(d) && isCorrectComponent(d));
+    return useMemo(() => {
+        return React.Children.toArray(children).find(d => isValidElement(d) && isCorrectComponent(d));
     }, [children]);
 }
 
 function ChipPrefix({ children }) {
-    const singleChild = useChildComponent(children, d => d.type === Avatar.Avatar || d.type === Icon.Icon);
-    return (React__default["default"].createElement("span", { className: classnames__default["default"](styles.prefix, !singleChild && styles.empty) }, singleChild));
+    const singleChild = useChildComponent(children, d => d.type === Avatar || d.type === Icon);
+    return (React.createElement("span", { className: classnames(styles.prefix, !singleChild && styles.empty) }, singleChild));
 }
 
 function ChipSuffix({ children, className }) {
     var _a;
-    let singleChild = useChildComponent(children, d => d.type === Icon.Icon);
+    let singleChild = useChildComponent(children, d => d.type === Icon);
     if (!allowedSuffixIcons.includes((_a = singleChild === null || singleChild === void 0 ? void 0 : singleChild.props) === null || _a === void 0 ? void 0 : _a.name)) {
         singleChild = undefined;
     }
-    return (React__default["default"].createElement("span", { className: classnames__default["default"](styles.suffix, className, !singleChild && styles.empty) }, singleChild));
+    return (React.createElement("span", { className: classnames(styles.suffix, className, !singleChild && styles.empty) }, singleChild));
 }
 const allowedSuffixIcons = ["cross", "add", "checkmark"];
 
 const Chip = ({ ariaLabel, disabled, heading, invalid, label, value, onClick, onKeyDown, children, role = "button", tabIndex = 0, variation = "base", }) => {
-    const classes = classnames__default["default"](styles.chip, {
+    const classes = classnames(styles.chip, {
         [styles.invalid]: invalid,
         [styles.base]: variation === "base",
         [styles.subtle]: variation === "subtle",
@@ -54,22 +47,22 @@ const Chip = ({ ariaLabel, disabled, heading, invalid, label, value, onClick, on
     });
     const prefix = useChildComponent(children, d => d.type === Chip.Prefix);
     const suffix = useChildComponent(children, d => d.type === Chip.Suffix);
-    const [labelRef, labelFullyVisible] = useInView.useInView();
-    const [headingRef, headingFullyVisible] = useInView.useInView();
+    const [labelRef, labelFullyVisible] = useInView();
+    const [headingRef, headingFullyVisible] = useInView();
     const tooltipMessage = getTooltipMessage(labelFullyVisible, headingFullyVisible, label, heading);
-    return (React__default["default"].createElement(Tooltip.Tooltip, { message: tooltipMessage },
-        React__default["default"].createElement("button", { className: classes, onClick: (ev) => onClick && onClick(value, ev), tabIndex: tabIndex, onKeyDown: onKeyDown, "aria-label": ariaLabel || label, disabled: disabled, role: role, type: "button" },
+    return (React.createElement(Tooltip, { message: tooltipMessage },
+        React.createElement("button", { className: classes, onClick: (ev) => onClick && onClick(value, ev), tabIndex: tabIndex, onKeyDown: onKeyDown, "aria-label": ariaLabel || label, disabled: disabled, role: role, type: "button" },
             prefix,
-            React__default["default"].createElement("div", { className: styles.chipContent },
-                heading && (React__default["default"].createElement(React__default["default"].Fragment, null,
-                    React__default["default"].createElement(Typography.Typography, { size: "base", fontWeight: "medium" },
+            React.createElement("div", { className: styles.chipContent },
+                heading && (React.createElement(React.Fragment, null,
+                    React.createElement(Typography, { size: "base", fontWeight: "medium" },
                         heading,
-                        React__default["default"].createElement("span", { ref: headingRef, className: styles.chipLabelRef })),
-                    label && React__default["default"].createElement("span", { className: styles.chipBar }))),
-                React__default["default"].createElement(Typography.Typography, { size: "base" },
+                        React.createElement("span", { ref: headingRef, className: styles.chipLabelRef })),
+                    label && React.createElement("span", { className: styles.chipBar }))),
+                React.createElement(Typography, { size: "base" },
                     label,
-                    React__default["default"].createElement("span", { ref: labelRef, className: styles.chipLabelRef })),
-                !labelFullyVisible && (React__default["default"].createElement("div", { className: styles.truncateGradient, "data-testid": "ATL-Chip-Truncation-Gradient" }))),
+                    React.createElement("span", { ref: labelRef, className: styles.chipLabelRef })),
+                !labelFullyVisible && (React.createElement("div", { className: styles.truncateGradient, "data-testid": "ATL-Chip-Truncation-Gradient" }))),
             suffix)));
 };
 function getTooltipMessage(labelFullyVisible, headingFullyVisible, label, heading) {
@@ -85,5 +78,4 @@ function getTooltipMessage(labelFullyVisible, headingFullyVisible, label, headin
 Chip.Prefix = ChipPrefix;
 Chip.Suffix = ChipSuffix;
 
-exports.Chip = Chip;
-exports.styles = styles;
+export { Chip as C, styles as s };

package/dist/Chips/index.js

@@ -1,38 +1,29 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var Chip = require('../Chip-4f12eec8.js');
-require('uuid');
-require('../style-inject.es-9d2f5f4e.js');
-require('classnames');
-require('@jobber/hooks/useAssert');
-require('../Icon-405a216c.js');
-require('@jobber/design');
-require('../Avatar-1aa30ee1.js');
-require('color');
-require('../Typography-83915c54.js');
-require('../Tooltip-6b12f1c2.js');
-require('react-dom');
-require('framer-motion');
-require('react-popper');
-require('lodash/sortBy');
-require('@jobber/hooks/useLiveAnnounce');
-require('lodash/debounce');
-require('../Text-54334431.js');
-require('../Button-db6114a6.js');
-require('react-router-dom');
-require('../Spinner-9d8fc7ff.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+import React from 'react';
+import { I as InternalChip, a as InternalChipButton } from '../Chip-12a64c38.js';
+export { b as Chip, C as Chips } from '../Chip-12a64c38.js';
+import 'uuid';
+import '../style-inject.es-a0e1a0ba.js';
+import 'classnames';
+import '@jobber/hooks/useAssert';
+import '../Icon-22723fe6.js';
+import '@jobber/design';
+import '../Avatar-b2e862de.js';
+import 'color';
+import '../Typography-09952a2f.js';
+import '../Tooltip-c80b9fb7.js';
+import 'react-dom';
+import 'framer-motion';
+import 'react-popper';
+import 'lodash/sortBy';
+import '@jobber/hooks/useLiveAnnounce';
+import 'lodash/debounce';
+import '../Text-703e2c21.js';
+import '../Button-319d8fa0.js';
+import 'react-router-dom';
+import '../Spinner-5d8359b8.js';
 
 function ChipDismissible({ label, disabled, invalid, prefix, onClick, onRequestRemove, }) {
-    return (React__default["default"].createElement(Chip.InternalChip, { label: label, disabled: disabled, invalid: invalid, prefix: prefix, onClick: onClick, suffix: React__default["default"].createElement(Chip.InternalChipButton, { icon: "remove", label: label, invalid: invalid, disabled: disabled, onClick: onRequestRemove }) }));
+    return (React.createElement(InternalChip, { label: label, disabled: disabled, invalid: invalid, prefix: prefix, onClick: onClick, suffix: React.createElement(InternalChipButton, { icon: "remove", label: label, invalid: invalid, disabled: disabled, onClick: onRequestRemove }) }));
 }
 
-exports.Chip = Chip.Chip;
-exports.Chips = Chip.Chips;
-exports.ChipDismissible = ChipDismissible;
+export { ChipDismissible };