@jobber/components 2.86.0 → 2.86.2

package/dist/Chips/index.js

@@ -2,532 +2,534 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var __chunk_1 = require('../chunk-b67af3cb.js');
 var React = require('react');
-var React__default = _interopDefault(React);
-var __chunk_2 = require('../chunk-17e02351.js');
-var classnames = _interopDefault(require('classnames'));
-var index = require('../Typography/index.js');
-var index$1 = require('../Text/index.js');
-require('@jobber/design');
-var index$2 = require('../Icon/index.js');
+var tslib_es6 = require('../tslib.es6-5b50eb8e.js');
+var classnames = require('classnames');
+var styleInject_es = require('../style-inject.es-dcee06b6.js');
+var hooks = require('@jobber/hooks');
+var Icon = require('../Icon-d5ad1a6d.js');
+var Avatar = require('../Avatar-cfd04e86.js');
+var Typography = require('../Typography-7e542a72.js');
+var Tooltip = require('../Tooltip-4396164d.js');
 var uuid = require('uuid');
-require('react-router-dom');
-var index$5 = require('../Button/index.js');
-require('framer-motion');
-var index$7 = require('../Spinner/index.js');
-var index$3 = require('../Avatar/index.js');
+var lodash = require('lodash');
+var reactPopper = require('react-popper');
+var Text = require('../Text-9bc093e9.js');
+var Button = require('../Button-5b2f1636.js');
+var Spinner = require('../Spinner-18d3dee6.js');
+require('@jobber/design');
 require('color');
-var hooks = require('@jobber/hooks');
 require('react-dom');
-var index$4 = require('../Tooltip/index.js');
-var reactPopper = require('react-popper');
-var lodash = require('lodash');
+require('framer-motion');
+require('react-router-dom');
+
+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 css = "/**\n * Used in the wrapping chips component:\n * - InternalChipSingleSelect\n * - InternalChipMultiSelect\n */\n\n.uhcyg-a-GLRKF_7oHwvMP {\n  display: -ms-flexbox;\n  display: flex;\n  grid-gap: var(--space-small);\n  grid-gap: var(--space-small);\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._2XfthED8eqbKIyTNoH1aWp {\n  display: inline-grid;\n  position: relative;\n  max-width: 100%;\n  box-sizing: border-box;\n  padding: var(--space-small);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: var(--radius-larger);\n  color: var(--color-text--secondary);\n  text-align: left;\n  vertical-align: middle;\n  background-color: var(--color-surface);\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  grid-gap: var(--space-small);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n}\n\n._4U2lNr3Kk6xnNZTk3Fxgm,\n.fl19i7ccgBu7NZkxnpvcI {\n  padding: calc(var(--space-smaller) + var(--space-smallest)) var(--space-small);\n}\n\n._4U2lNr3Kk6xnNZTk3Fxgm {\n  grid-template-columns: -webkit-min-content 1fr;\n  grid-template-columns: min-content 1fr;\n}\n\n.fl19i7ccgBu7NZkxnpvcI {\n  grid-template-columns: 1fr -webkit-min-content;\n  grid-template-columns: 1fr min-content;\n}\n\n._4U2lNr3Kk6xnNZTk3Fxgm.fl19i7ccgBu7NZkxnpvcI {\n  grid-template-columns: -webkit-min-content 1fr -webkit-min-content;\n  grid-template-columns: min-content 1fr min-content;\n}\n\n._3Uf2El5YBbG3DmUWHBhuea,\n._35he2rVDYRU4YQko5r4adP ~ ._2XfthED8eqbKIyTNoH1aWp {\n  box-shadow: var(--shadow-base);\n  cursor: pointer;\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n}\n\n/**\n * Interaction\n */\n\n._3Uf2El5YBbG3DmUWHBhuea:hover,\n._2XfthED8eqbKIyTNoH1aWp:focus {\n  outline: none;\n  background-color: var(--color-surface--hover);\n}\n\n._2XfthED8eqbKIyTNoH1aWp:focus,\n._35he2rVDYRU4YQko5r4adP:focus ~ ._2XfthED8eqbKIyTNoH1aWp {\n  box-shadow: var(--shadow-focus);\n}\n\n._35he2rVDYRU4YQko5r4adP:focus ~ ._2XfthED8eqbKIyTNoH1aWp:not(._18wCcoIrboygQTnIVm8yzS) {\n  outline: none;\n  background-color: var(--color-surface--hover);\n}\n\n/**\n * States\n */\n\n._2XfthED8eqbKIyTNoH1aWp._18wCcoIrboygQTnIVm8yzS {\n  border-color: var(--color-surface--reverse);\n  color: var(--color-text--reverse);\n  background-color: var(--color-surface--reverse);\n}\n\n._2XfthED8eqbKIyTNoH1aWp._1FTJ2ALrm1mVaT7HdMFFGN {\n  border-color: var(--color-critical--onSurface);\n  color: var(--color-critical--onSurface);\n  background-color: var(--color-critical--surface);\n}\n\n._2XfthED8eqbKIyTNoH1aWp.B1ELFzeQy9Ihy9oYcv-px {\n  border-color: var(--color-disabled--secondary);\n  color: var(--color-disabled);\n  background-color: var(--color-disabled--secondary);\n}\n\n._18wCcoIrboygQTnIVm8yzS.B1ELFzeQy9Ihy9oYcv-px {\n  border-color: var(--color-disabled);\n  color: var(--color-white);\n  background-color: var(--color-disabled);\n}\n\n._1FTJ2ALrm1mVaT7HdMFFGN.B1ELFzeQy9Ihy9oYcv-px {\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._35he2rVDYRU4YQko5r4adP {\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._1M_ek3kiaa7OApx5rwBEc3 {\n  display: -ms-flexbox;\n  display: flex;\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  transition: background-color 200ms ease;\n}\n\n._1M_ek3kiaa7OApx5rwBEc3:hover,\n._1M_ek3kiaa7OApx5rwBEc3:focus {\n  background-color: var(--color-surface--hover);\n}\n\n._1M_ek3kiaa7OApx5rwBEc3:focus,\n._3Uf2El5YBbG3DmUWHBhuea ._1M_ek3kiaa7OApx5rwBEc3:hover {\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._3AG5dSWeyKYD1Xfu9fN_DL > svg {\n  fill: var(--color-interactive--subtle);\n}\n\n._3AG5dSWeyKYD1Xfu9fN_DL {\n  display: -ms-flexbox;\n  display: flex;\n}\n";
-var styles = {"wrapper":"uhcyg-a-GLRKF_7oHwvMP","chip":"_2XfthED8eqbKIyTNoH1aWp","hasPrefix":"_4U2lNr3Kk6xnNZTk3Fxgm","hasSuffix":"fl19i7ccgBu7NZkxnpvcI","clickable":"_3Uf2El5YBbG3DmUWHBhuea","input":"_35he2rVDYRU4YQko5r4adP","active":"_18wCcoIrboygQTnIVm8yzS","invalid":"_1FTJ2ALrm1mVaT7HdMFFGN","disabled":"B1ELFzeQy9Ihy9oYcv-px","button":"_1M_ek3kiaa7OApx5rwBEc3","icon":"_3AG5dSWeyKYD1Xfu9fN_DL"};
-__chunk_2.styleInject(css);
+var css$1 = "/**\n * Used in the wrapping chips component:\n * - InternalChipSingleSelect\n * - InternalChipMultiSelect\n */\n\n.uhcyg-a-GLRKF_7oHwvMP {\n  display: -ms-flexbox;\n  display: flex;\n  grid-gap: var(--space-small);\n  grid-gap: var(--space-small);\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._2XfthED8eqbKIyTNoH1aWp {\n  display: inline-grid;\n  position: relative;\n  max-width: 100%;\n  box-sizing: border-box;\n  padding: var(--space-small);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: var(--radius-larger);\n  color: var(--color-text--secondary);\n  text-align: left;\n  vertical-align: middle;\n  background-color: var(--color-surface);\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  grid-gap: var(--space-small);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n}\n\n._4U2lNr3Kk6xnNZTk3Fxgm,\n.fl19i7ccgBu7NZkxnpvcI {\n  padding: calc(var(--space-smaller) + var(--space-smallest)) var(--space-small);\n}\n\n._4U2lNr3Kk6xnNZTk3Fxgm {\n  grid-template-columns: -webkit-min-content 1fr;\n  grid-template-columns: min-content 1fr;\n}\n\n.fl19i7ccgBu7NZkxnpvcI {\n  grid-template-columns: 1fr -webkit-min-content;\n  grid-template-columns: 1fr min-content;\n}\n\n._4U2lNr3Kk6xnNZTk3Fxgm.fl19i7ccgBu7NZkxnpvcI {\n  grid-template-columns: -webkit-min-content 1fr -webkit-min-content;\n  grid-template-columns: min-content 1fr min-content;\n}\n\n._3Uf2El5YBbG3DmUWHBhuea,\n._35he2rVDYRU4YQko5r4adP ~ ._2XfthED8eqbKIyTNoH1aWp {\n  box-shadow: var(--shadow-base);\n  cursor: pointer;\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n}\n\n/**\n * Interaction\n */\n\n._3Uf2El5YBbG3DmUWHBhuea:hover,\n._2XfthED8eqbKIyTNoH1aWp:focus {\n  outline: none;\n  background-color: var(--color-surface--hover);\n}\n\n._2XfthED8eqbKIyTNoH1aWp:focus,\n._35he2rVDYRU4YQko5r4adP:focus ~ ._2XfthED8eqbKIyTNoH1aWp {\n  box-shadow: var(--shadow-focus);\n}\n\n._35he2rVDYRU4YQko5r4adP:focus ~ ._2XfthED8eqbKIyTNoH1aWp:not(._18wCcoIrboygQTnIVm8yzS) {\n  outline: none;\n  background-color: var(--color-surface--hover);\n}\n\n/**\n * States\n */\n\n._2XfthED8eqbKIyTNoH1aWp._18wCcoIrboygQTnIVm8yzS {\n  border-color: var(--color-surface--reverse);\n  color: var(--color-text--reverse);\n  background-color: var(--color-surface--reverse);\n}\n\n._2XfthED8eqbKIyTNoH1aWp._1FTJ2ALrm1mVaT7HdMFFGN {\n  border-color: var(--color-critical--onSurface);\n  color: var(--color-critical--onSurface);\n  background-color: var(--color-critical--surface);\n}\n\n._2XfthED8eqbKIyTNoH1aWp.B1ELFzeQy9Ihy9oYcv-px {\n  border-color: var(--color-disabled--secondary);\n  color: var(--color-disabled);\n  background-color: var(--color-disabled--secondary);\n}\n\n._18wCcoIrboygQTnIVm8yzS.B1ELFzeQy9Ihy9oYcv-px {\n  border-color: var(--color-disabled);\n  color: var(--color-white);\n  background-color: var(--color-disabled);\n}\n\n._1FTJ2ALrm1mVaT7HdMFFGN.B1ELFzeQy9Ihy9oYcv-px {\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._35he2rVDYRU4YQko5r4adP {\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._1M_ek3kiaa7OApx5rwBEc3 {\n  display: -ms-flexbox;\n  display: flex;\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  transition: background-color 200ms ease;\n}\n\n._1M_ek3kiaa7OApx5rwBEc3:hover,\n._1M_ek3kiaa7OApx5rwBEc3:focus {\n  background-color: var(--color-surface--hover);\n}\n\n._1M_ek3kiaa7OApx5rwBEc3:focus,\n._3Uf2El5YBbG3DmUWHBhuea ._1M_ek3kiaa7OApx5rwBEc3:hover {\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._3AG5dSWeyKYD1Xfu9fN_DL > svg {\n  fill: var(--color-interactive--subtle);\n}\n\n._3AG5dSWeyKYD1Xfu9fN_DL {\n  display: -ms-flexbox;\n  display: flex;\n}\n";
+var styles$1 = {"wrapper":"uhcyg-a-GLRKF_7oHwvMP","chip":"_2XfthED8eqbKIyTNoH1aWp","hasPrefix":"_4U2lNr3Kk6xnNZTk3Fxgm","hasSuffix":"fl19i7ccgBu7NZkxnpvcI","clickable":"_3Uf2El5YBbG3DmUWHBhuea","input":"_35he2rVDYRU4YQko5r4adP","active":"_18wCcoIrboygQTnIVm8yzS","invalid":"_1FTJ2ALrm1mVaT7HdMFFGN","disabled":"B1ELFzeQy9Ihy9oYcv-px","button":"_1M_ek3kiaa7OApx5rwBEc3","icon":"_3AG5dSWeyKYD1Xfu9fN_DL"};
+styleInject_es.styleInject(css$1);
 
-function InternalChipButton(_a) {
-    var icon = _a.icon, invalid = _a.invalid, disabled = _a.disabled, label = _a.label, onClick = _a.onClick;
-    var buttonRef = React.useRef();
-    return (React__default.createElement("div", { ref: buttonRef, className: styles.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.createElement(index$2.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 InternalChipButton(_a) {
+    var icon = _a.icon, invalid = _a.invalid, disabled = _a.disabled, label = _a.label, onClick = _a.onClick;
+    var 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(_a) {
-    var affix = _a.affix, active = _a.active, invalid = _a.invalid, disabled = _a.disabled;
-    assertProps();
-    if ((affix === null || affix === void 0 ? void 0 : affix.type) === index$3.Avatar) {
-        return React__default.createElement(index$3.Avatar, __chunk_1.__assign({}, affix.props, { size: "small" }));
-    }
-    if ((affix === null || affix === void 0 ? void 0 : affix.type) === index$2.Icon) {
-        return renderChipIcon(affix);
-    }
-    if ((affix === null || affix === void 0 ? void 0 : affix.type) === InternalChipButton) {
-        return React__default.createElement(InternalChipButton, __chunk_1.__assign({}, affix.props));
-    }
-    return React__default.createElement(React__default.Fragment, null);
-    function renderChipIcon(icon) {
-        var color = getIconColor();
-        return (React__default.createElement("div", { className: styles.icon }, React__default.cloneElement(icon, __chunk_1.__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() {
-        var isAvatar = (affix === null || affix === void 0 ? void 0 : affix.type) === index$3.Avatar || false;
-        var isIcon = (affix === null || affix === void 0 ? void 0 : affix.type) === index$2.Icon || false;
-        var isChipButton = (affix === null || affix === void 0 ? void 0 : affix.type) === InternalChipButton || false;
-        hooks.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 InternalChipAffix(_a) {
+    var affix = _a.affix, active = _a.active, invalid = _a.invalid, disabled = _a.disabled;
+    assertProps();
+    if ((affix === null || affix === void 0 ? void 0 : affix.type) === Avatar.Avatar) {
+        return React__default["default"].createElement(Avatar.Avatar, tslib_es6.__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, tslib_es6.__assign({}, affix.props));
+    }
+    return React__default["default"].createElement(React__default["default"].Fragment, null);
+    function renderChipIcon(icon) {
+        var color = getIconColor();
+        return (React__default["default"].createElement("div", { className: styles$1.icon }, React__default["default"].cloneElement(icon, tslib_es6.__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() {
+        var isAvatar = (affix === null || affix === void 0 ? void 0 : affix.type) === Avatar.Avatar || false;
+        var isIcon = (affix === null || affix === void 0 ? void 0 : affix.type) === Icon.Icon || false;
+        var isChipButton = (affix === null || affix === void 0 ? void 0 : affix.type) === InternalChipButton || false;
+        hooks.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(_a) {
-    var _b;
-    var label = _a.label, _c = _a.active, active = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.invalid, invalid = _e === void 0 ? false : _e, prefix = _a.prefix, suffix = _a.suffix, tabIndex = _a.tabIndex, ariaLabel = _a.ariaLabel, onClick = _a.onClick, onKeyDown = _a.onKeyDown;
-    var _f = __chunk_1.__read(React.useState(), 2), truncateRef = _f[0], setTruncateRef = _f[1];
-    var isClickable = onClick && !disabled;
-    var classNames = classnames(styles.chip, (_b = {},
-        _b[styles.clickable] = isClickable,
-        _b[styles.active] = active,
-        _b[styles.disabled] = disabled,
-        _b[styles.invalid] = invalid,
-        _b[styles.hasPrefix] = prefix,
-        _b[styles.hasSuffix] = suffix,
-        _b));
-    var affixProps = { active: active, invalid: invalid, disabled: disabled };
-    var Tag = onClick ? "button" : "div";
-    var chip = (React__default.createElement(Tag, __chunk_1.__assign({ className: classNames }, (isClickable && { onClick: onClick, disabled: disabled }), { onKeyDown: onKeyDown, "data-testid": "chip-wrapper", "aria-label": ariaLabel, tabIndex: tabIndex, role: tabIndex !== undefined ? "option" : undefined }),
-        React__default.createElement(InternalChipAffix, __chunk_1.__assign({ affix: prefix }, affixProps)),
-        React__default.createElement(index.Typography, { element: "span", numberOfLines: 1, size: "base" },
-            React__default.createElement("span", { ref: setTruncateRef }, label)),
-        React__default.createElement(InternalChipAffix, __chunk_1.__assign({ affix: suffix }, affixProps))));
-    return isTruncated() ? React__default.createElement(index$4.Tooltip, { message: label }, chip) : chip;
-    function isTruncated() {
-        var _a;
-        var truncateParentHeight = ((_a = truncateRef === null || truncateRef === void 0 ? void 0 : truncateRef.parentElement) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0;
-        var truncateChildHeight = (truncateRef === null || truncateRef === void 0 ? void 0 : truncateRef.offsetHeight) || 0;
-        return truncateChildHeight >= truncateParentHeight * 2;
-    }
+function InternalChip(_a) {
+    var _b;
+    var label = _a.label, _c = _a.active, active = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.invalid, invalid = _e === void 0 ? false : _e, prefix = _a.prefix, suffix = _a.suffix, tabIndex = _a.tabIndex, ariaLabel = _a.ariaLabel, onClick = _a.onClick, onKeyDown = _a.onKeyDown;
+    var _f = tslib_es6.__read(React.useState(), 2), truncateRef = _f[0], setTruncateRef = _f[1];
+    var isClickable = onClick && !disabled;
+    var classNames = classnames__default["default"](styles$1.chip, (_b = {},
+        _b[styles$1.clickable] = isClickable,
+        _b[styles$1.active] = active,
+        _b[styles$1.disabled] = disabled,
+        _b[styles$1.invalid] = invalid,
+        _b[styles$1.hasPrefix] = prefix,
+        _b[styles$1.hasSuffix] = suffix,
+        _b));
+    var affixProps = { active: active, invalid: invalid, disabled: disabled };
+    var Tag = onClick ? "button" : "div";
+    var chip = (React__default["default"].createElement(Tag, tslib_es6.__assign({ className: classNames }, (isClickable && { onClick: onClick, disabled: disabled }), { onKeyDown: onKeyDown, "data-testid": "chip-wrapper", "aria-label": ariaLabel, tabIndex: tabIndex, role: tabIndex !== undefined ? "option" : undefined }),
+        React__default["default"].createElement(InternalChipAffix, tslib_es6.__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, tslib_es6.__assign({ affix: suffix }, affixProps))));
+    return isTruncated() ? React__default["default"].createElement(Tooltip.Tooltip, { message: label }, chip) : chip;
+    function isTruncated() {
+        var _a;
+        var truncateParentHeight = ((_a = truncateRef === null || truncateRef === void 0 ? void 0 : truncateRef.parentElement) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0;
+        var truncateChildHeight = (truncateRef === null || truncateRef === void 0 ? void 0 : truncateRef.offsetHeight) || 0;
+        return truncateChildHeight >= truncateParentHeight * 2;
+    }
 }
 
-function ChipDismissible(_a) {
-    var label = _a.label, disabled = _a.disabled, invalid = _a.invalid, prefix = _a.prefix, onClick = _a.onClick, onRequestRemove = _a.onRequestRemove;
-    return (React__default.createElement(InternalChip, { label: label, disabled: disabled, invalid: invalid, prefix: prefix, onClick: onClick, suffix: React__default.createElement(InternalChipButton, { icon: "remove", label: label, invalid: invalid, disabled: disabled, onClick: onRequestRemove }) }));
+function ChipDismissible(_a) {
+    var label = _a.label, disabled = _a.disabled, invalid = _a.invalid, prefix = _a.prefix, onClick = _a.onClick, onRequestRemove = _a.onRequestRemove;
+    return (React__default["default"].createElement(InternalChip, { label: label, disabled: disabled, invalid: invalid, prefix: prefix, onClick: onClick, suffix: React__default["default"].createElement(InternalChipButton, { icon: "remove", label: label, invalid: invalid, disabled: disabled, onClick: onRequestRemove }) }));
 }
 
-function InternalChipSingleSelect(_a) {
-    var children = _a.children, selected = _a.selected, _b = _a.name, name = _b === void 0 ? uuid.v1() : _b, onChange = _a.onChange, onClick = _a.onClick;
-    return (React__default.createElement("div", { className: styles.wrapper, "data-testid": "singleselect-chips" }, React__default.Children.map(children, function (child) {
-        var isSelected = child.props.value === selected;
-        return (React__default.createElement("label", null,
-            React__default.createElement("input", { type: "radio", checked: isSelected, className: styles.input, name: name, onClick: handleClick(child.props.value), onKeyUp: handleKeyUp(isSelected, child.props.value), onChange: function () {
-                    /* No op. onClick handles the change to allow deselecting. */
-                }, disabled: child.props.disabled }),
-            React__default.createElement(InternalChip, __chunk_1.__assign({}, child.props, { active: isSelected }))));
-    })));
-    function handleKeyUp(active, value) {
-        if (!active)
-            return;
-        return function (event) {
-            if (event.key === " ") {
-                // Wait for DOM changes before applying the new change.
-                setTimeout(function () { return handleChange(value); }, 0);
-            }
-        };
-    }
-    function handleClick(value) {
-        return function (event) {
-            onClick === null || onClick === void 0 ? void 0 : onClick(event, value);
-            handleChange(value);
-        };
-    }
-    function handleChange(value) {
-        var newValue = value !== selected ? value : undefined;
-        onChange(newValue);
-    }
+function InternalChipSingleSelect(_a) {
+    var children = _a.children, selected = _a.selected, _b = _a.name, name = _b === void 0 ? uuid.v1() : _b, onChange = _a.onChange, onClick = _a.onClick;
+    return (React__default["default"].createElement("div", { className: styles$1.wrapper, "data-testid": "singleselect-chips" }, React__default["default"].Children.map(children, function (child) {
+        var 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: function () {
+                    /* No op. onClick handles the change to allow deselecting. */
+                }, disabled: child.props.disabled }),
+            React__default["default"].createElement(InternalChip, tslib_es6.__assign({}, child.props, { active: isSelected }))));
+    })));
+    function handleKeyUp(active, value) {
+        if (!active)
+            return;
+        return function (event) {
+            if (event.key === " ") {
+                // Wait for DOM changes before applying the new change.
+                setTimeout(function () { return handleChange(value); }, 0);
+            }
+        };
+    }
+    function handleClick(value) {
+        return function (event) {
+            onClick === null || onClick === void 0 ? void 0 : onClick(event, value);
+            handleChange(value);
+        };
+    }
+    function handleChange(value) {
+        var newValue = value !== selected ? value : undefined;
+        onChange(newValue);
+    }
 }
 
-function InternalChipMultiSelect(_a) {
-    var children = _a.children, selected = _a.selected, onChange = _a.onChange, onClick = _a.onClick;
-    return (React__default.createElement("div", { className: styles.wrapper, "data-testid": "multiselect-chips" }, React__default.Children.map(children, function (chip) {
-        var isChipActive = isChipSelected(chip.props.value);
-        return (React__default.createElement("label", null,
-            React__default.createElement("input", { type: "checkbox", checked: isChipActive, className: styles.input, onClick: handleClick(chip.props.value), onChange: handleChange(chip.props.value), disabled: chip.props.disabled }),
-            React__default.createElement(InternalChip, __chunk_1.__assign({}, chip.props, { active: isChipActive, suffix: checkmarkIcon(isChipActive) }))));
-    })));
-    function isChipSelected(value) {
-        return selected.includes(value);
-    }
-    function handleClick(value) {
-        return function (event) { return onClick === null || onClick === void 0 ? void 0 : onClick(event, value); };
-    }
-    function handleChange(value) {
-        return function () {
-            if (isChipSelected(value)) {
-                handleDeselect(value);
-            }
-            else {
-                handleSelect(value);
-            }
-        };
-    }
-    function handleSelect(value) {
-        var newVal = __chunk_1.__spread(selected, [value]);
-        onChange(newVal);
-    }
-    function handleDeselect(value) {
-        var values = selected;
-        var newVal = values.filter(function (val) { return val !== value; });
-        onChange(newVal);
-    }
-    function checkmarkIcon(show) {
-        // Ideally, we should be returning a fragment `<></>` when a function
-        // returns a component / element. However, this one needs to return nothing
-        // to prevent it from randomly rendering a suffix.
-        //
-        // DO NOT COPY!
-        if (!show)
-            return;
-        return React__default.createElement(index$2.Icon, { name: "checkmark" });
-    }
+function InternalChipMultiSelect(_a) {
+    var children = _a.children, selected = _a.selected, onChange = _a.onChange, onClick = _a.onClick;
+    return (React__default["default"].createElement("div", { className: styles$1.wrapper, "data-testid": "multiselect-chips" }, React__default["default"].Children.map(children, function (chip) {
+        var 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, tslib_es6.__assign({}, chip.props, { active: isChipActive, suffix: checkmarkIcon(isChipActive) }))));
+    })));
+    function isChipSelected(value) {
+        return selected.includes(value);
+    }
+    function handleClick(value) {
+        return function (event) { return onClick === null || onClick === void 0 ? void 0 : onClick(event, value); };
+    }
+    function handleChange(value) {
+        return function () {
+            if (isChipSelected(value)) {
+                handleDeselect(value);
+            }
+            else {
+                handleSelect(value);
+            }
+        };
+    }
+    function handleSelect(value) {
+        var newVal = tslib_es6.__spread(selected, [value]);
+        onChange(newVal);
+    }
+    function handleDeselect(value) {
+        var values = selected;
+        var newVal = values.filter(function (val) { return val !== value; });
+        onChange(newVal);
+    }
+    function checkmarkIcon(show) {
+        // Ideally, we should be returning a fragment `<></>` when a function
+        // returns a component / element. However, this one needs to return nothing
+        // to prevent it from randomly rendering a suffix.
+        //
+        // DO NOT COPY!
+        if (!show)
+            return;
+        return React__default["default"].createElement(Icon.Icon, { name: "checkmark" });
+    }
 }
 
-var css$1 = ".UICoKaZcJNyJZu_jLSFe0 {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  box-sizing: border-box;\n  border: var(--border-base) solid transparent;\n  border-radius: var(--radius-base);\n  transition: all var(--timing-base);\n  grid-gap: var(--space-small);\n  grid-gap: var(--space-small);\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.iYpu9Vckapbgfo7nKby6- {\n  -ms-flex: 1;\n      flex: 1;\n  min-width: 120px;\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: var(--typography--fontSize-base);\n  line-height: var(--typography--lineHeight-base);\n  background: transparent;\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n}\n\n.iYpu9Vckapbgfo7nKby6-:focus {\n  outline: none;\n}\n\n._3Y-bhobfNvAAUslopzbOoq {\n  position: relative;\n  z-index: var(--elevation-menu);\n  width: 100%;\n}\n\n._3pV83Z-mpuL-nlud9deXib {\n  max-height: 320px;\n  box-shadow: var(--shadow-base);\n  padding: var(--space-small) 0;\n  border-radius: var(--radius-base);\n  overflow-y: scroll;\n  background-color: var(--color-surface);\n}\n\n.yZlvrckyLt2bbuJSDc3s_,\n._1JS35aIdiRtVwq3RLMJLlj {\n  display: -ms-flexbox;\n  display: flex;\n  width: 100%;\n  padding: var(--space-small);\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  -ms-flex-align: center;\n      align-items: center;\n  grid-gap: var(--space-small);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n}\n\n.yZlvrckyLt2bbuJSDc3s_:focus {\n  box-shadow: var(--shadow-focus);\n}\n\n.yZlvrckyLt2bbuJSDc3s_:focus,\n._1P6NA2S4eCq-AiLRgspXJX {\n  outline: none;\n  background-color: var(--color-surface--hover);\n}\n\n._1JS35aIdiRtVwq3RLMJLlj {\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n";
-var styles$1 = {"wrapper":"UICoKaZcJNyJZu_jLSFe0","input":"iYpu9Vckapbgfo7nKby6-","menu":"_3Y-bhobfNvAAUslopzbOoq","menuList":"_3pV83Z-mpuL-nlud9deXib","menuListOption":"yZlvrckyLt2bbuJSDc3s_","loadingIndicator":"_1JS35aIdiRtVwq3RLMJLlj","activeOption":"_1P6NA2S4eCq-AiLRgspXJX"};
-__chunk_2.styleInject(css$1);
+var css = ".UICoKaZcJNyJZu_jLSFe0 {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  box-sizing: border-box;\n  border: var(--border-base) solid transparent;\n  border-radius: var(--radius-base);\n  transition: all var(--timing-base);\n  grid-gap: var(--space-small);\n  grid-gap: var(--space-small);\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.iYpu9Vckapbgfo7nKby6- {\n  -ms-flex: 1;\n      flex: 1;\n  min-width: 120px;\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: var(--typography--fontSize-base);\n  line-height: var(--typography--lineHeight-base);\n  background: transparent;\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n}\n\n.iYpu9Vckapbgfo7nKby6-:focus {\n  outline: none;\n}\n\n._3Y-bhobfNvAAUslopzbOoq {\n  position: relative;\n  z-index: var(--elevation-menu);\n  width: 100%;\n}\n\n._3pV83Z-mpuL-nlud9deXib {\n  max-height: 320px;\n  box-shadow: var(--shadow-base);\n  padding: var(--space-small) 0;\n  border-radius: var(--radius-base);\n  overflow-y: scroll;\n  background-color: var(--color-surface);\n}\n\n.yZlvrckyLt2bbuJSDc3s_,\n._1JS35aIdiRtVwq3RLMJLlj {\n  display: -ms-flexbox;\n  display: flex;\n  width: 100%;\n  padding: var(--space-small);\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  -ms-flex-align: center;\n      align-items: center;\n  grid-gap: var(--space-small);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n}\n\n.yZlvrckyLt2bbuJSDc3s_:focus {\n  box-shadow: var(--shadow-focus);\n}\n\n.yZlvrckyLt2bbuJSDc3s_:focus,\n._1P6NA2S4eCq-AiLRgspXJX {\n  outline: none;\n  background-color: var(--color-surface--hover);\n}\n\n._1JS35aIdiRtVwq3RLMJLlj {\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n";
+var styles = {"wrapper":"UICoKaZcJNyJZu_jLSFe0","input":"iYpu9Vckapbgfo7nKby6-","menu":"_3Y-bhobfNvAAUslopzbOoq","menuList":"_3pV83Z-mpuL-nlud9deXib","menuListOption":"yZlvrckyLt2bbuJSDc3s_","loadingIndicator":"_1JS35aIdiRtVwq3RLMJLlj","activeOption":"_1P6NA2S4eCq-AiLRgspXJX"};
+styleInject_es.styleInject(css);
 
-function useInternalChipDismissible(_a) {
-    var children = _a.children, selected = _a.selected, onChange = _a.onChange, onClick = _a.onClick, onCustomAdd = _a.onCustomAdd;
-    var ref = React.useRef(null);
-    var chipOptions = children.map(function (chip) { return chip.props; });
-    var visibleChipOptions = chipOptions.filter(function (chip) {
-        return selected.includes(chip.value);
-    });
-    var sortedVisibleChipOptions = lodash.sortBy(visibleChipOptions, function (chip) {
-        return selected.indexOf(chip.value);
-    });
-    var availableChipOptions = chipOptions.filter(function (chip) { return !selected.includes(chip.value); });
-    var liveAnnounce = hooks.useLiveAnnounce().liveAnnounce;
-    var actions = {
-        handleChipRemove: function (value) {
-            return function () {
-                liveAnnounce(value + " Removed");
-                onChange(selected.filter(function (val) { return val !== value; }));
-            };
-        },
-        handleChipAdd: function (value) { return onChange(__chunk_1.__spread(selected, [value])); },
-        handleCustomAdd: onCustomAdd,
-        handleChipClick: function (value) {
-            if (onClick === undefined)
-                return;
-            return function (event) { return onClick(event, value); };
-        },
-        handleWrapperKeyDown: function (event) {
-            var target = event.target;
-            var isInputAndHasValue = target instanceof HTMLInputElement && target.value;
-            if (isInputAndHasValue)
-                return;
-            var nextElementToFocus = target.nextElementSibling;
-            var prevElementToFocus = target.previousElementSibling;
-            if (event.key === "ArrowLeft" &&
-                prevElementToFocus instanceof HTMLElement) {
-                prevElementToFocus.focus();
-            }
-            if (event.key === "ArrowRight" &&
-                nextElementToFocus instanceof HTMLElement) {
-                nextElementToFocus.focus();
-            }
-        },
-        handleChipKeyDown: function (value) {
-            return function (event) {
-                if (event.key === "Backspace" || event.key === "Delete") {
-                    var target = event.target;
-                    if (target instanceof HTMLElement) {
-                        var prevElement = target.previousElementSibling;
-                        var nextElement = target.nextElementSibling;
-                        if (prevElement instanceof HTMLElement) {
-                            prevElement.focus();
-                        }
-                        else if (nextElement instanceof HTMLElement) {
-                            nextElement.focus();
-                        }
-                    }
-                    actions.handleChipRemove(value)();
-                }
-            };
-        },
-    };
-    return __chunk_1.__assign(__chunk_1.__assign({}, actions), { ref: ref,
-        sortedVisibleChipOptions: sortedVisibleChipOptions,
-        availableChipOptions: availableChipOptions });
+function useInternalChipDismissible(_a) {
+    var children = _a.children, selected = _a.selected, onChange = _a.onChange, onClick = _a.onClick, onCustomAdd = _a.onCustomAdd;
+    var ref = React.useRef(null);
+    var chipOptions = children.map(function (chip) { return chip.props; });
+    var visibleChipOptions = chipOptions.filter(function (chip) {
+        return selected.includes(chip.value);
+    });
+    var sortedVisibleChipOptions = lodash.sortBy(visibleChipOptions, function (chip) {
+        return selected.indexOf(chip.value);
+    });
+    var availableChipOptions = chipOptions.filter(function (chip) { return !selected.includes(chip.value); });
+    var liveAnnounce = hooks.useLiveAnnounce().liveAnnounce;
+    var actions = {
+        handleChipRemove: function (value) {
+            return function () {
+                liveAnnounce(value + " Removed");
+                onChange(selected.filter(function (val) { return val !== value; }));
+            };
+        },
+        handleChipAdd: function (value) { return onChange(tslib_es6.__spread(selected, [value])); },
+        handleCustomAdd: onCustomAdd,
+        handleChipClick: function (value) {
+            if (onClick === undefined)
+                return;
+            return function (event) { return onClick(event, value); };
+        },
+        handleWrapperKeyDown: function (event) {
+            var target = event.target;
+            var isInputAndHasValue = target instanceof HTMLInputElement && target.value;
+            if (isInputAndHasValue)
+                return;
+            var nextElementToFocus = target.nextElementSibling;
+            var prevElementToFocus = target.previousElementSibling;
+            if (event.key === "ArrowLeft" &&
+                prevElementToFocus instanceof HTMLElement) {
+                prevElementToFocus.focus();
+            }
+            if (event.key === "ArrowRight" &&
+                nextElementToFocus instanceof HTMLElement) {
+                nextElementToFocus.focus();
+            }
+        },
+        handleChipKeyDown: function (value) {
+            return function (event) {
+                if (event.key === "Backspace" || event.key === "Delete") {
+                    var target = event.target;
+                    if (target instanceof HTMLElement) {
+                        var prevElement = target.previousElementSibling;
+                        var nextElement = target.nextElementSibling;
+                        if (prevElement instanceof HTMLElement) {
+                            prevElement.focus();
+                        }
+                        else if (nextElement instanceof HTMLElement) {
+                            nextElement.focus();
+                        }
+                    }
+                    actions.handleChipRemove(value)();
+                }
+            };
+        },
+    };
+    return tslib_es6.__assign(tslib_es6.__assign({}, actions), { ref: ref,
+        sortedVisibleChipOptions: sortedVisibleChipOptions,
+        availableChipOptions: availableChipOptions });
 }
 
-var menuId = uuid.v1();
-// eslint-disable-next-line max-statements
-function useInternalChipDismissibleInput(_a) {
-    var options = _a.options, _b = _a.isLoadingMore, isLoadingMore = _b === void 0 ? false : _b, onCustomOptionSelect = _a.onCustomOptionSelect, onOptionSelect = _a.onOptionSelect, onSearch = _a.onSearch;
-    var _c = __chunk_1.__read(React.useState([]), 2), allOptions = _c[0], setAllOptions = _c[1];
-    var _d = __chunk_1.__read(React.useState(""), 2), searchValue = _d[0], setSearchValue = _d[1];
-    var _e = __chunk_1.__read(React.useState(false), 2), menuOpen = _e[0], setMenuOpen = _e[1];
-    var _f = __chunk_1.__read(React.useState(0), 2), activeIndex = _f[0], setActiveIndex = _f[1];
-    var _g = __chunk_1.__read(React.useState(false), 2), shouldCancelBlur = _g[0], setShouldCancelBlur = _g[1];
-    var _h = __chunk_1.__read(React.useState(false), 2), shouldCancelEnter = _h[0], setShouldCancelEnter = _h[1];
-    var canAddCustomOption = onCustomOptionSelect !== undefined && !isLoadingMore;
-    var maxOptionIndex = allOptions.length - 1;
-    var liveAnnounce = hooks.useLiveAnnounce().liveAnnounce;
-    React.useEffect(function () {
-        setAllOptions(generateOptions(options, searchValue, canAddCustomOption));
-    }, [options]);
-    var computed = {
-        menuId: menuId,
-        inputRef: React.useRef(null),
-        activeOption: allOptions[activeIndex],
-        hasAvailableOptions: allOptions.length > 0,
-        nextOptionIndex: activeIndex < maxOptionIndex ? activeIndex + 1 : 0,
-        previousOptionIndex: activeIndex > 0 ? activeIndex - 1 : maxOptionIndex,
-    };
-    var actions = {
-        generateDescendantId: function (index) { return computed.menuId + "-" + index; },
-        handleReset: function () {
-            setActiveIndex(activeIndex === 0 ? activeIndex : activeIndex - 1);
-            setSearchValue("");
-        },
-        handleOpenMenu: function () { return setMenuOpen(true); },
-        handleCloseMenu: function () {
-            setMenuOpen(false);
-            setActiveIndex(0);
-        },
-        handleCancelBlur: function () { return setShouldCancelBlur(true); },
-        handleEnableBlur: function () { return setShouldCancelBlur(false); },
-        handleBlur: function () {
-            if (shouldCancelBlur)
-                return;
-            actions.handleReset();
-            actions.handleCloseMenu();
-        },
-        handleSearchChange: function (event) {
-            setActiveIndex(0);
-            setSearchValue(event.currentTarget.value);
-            setShouldCancelEnter(true);
-        },
-        handleSetActiveOnMouseOver: function (index) {
-            return function () { return setActiveIndex(index); };
-        },
-        handleSelectOption: function (selected) {
-            var _a;
-            if (allOptions.length === 0)
-                return;
-            var setValue = selected.custom ? onCustomOptionSelect : onOptionSelect;
-            if (setValue) {
-                setValue(selected.value);
-                liveAnnounce(selected.label + " Added");
-                actions.handleReset();
-                (_a = computed.inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            }
-        },
-        handleKeyDown: function (event) {
-            var callbacks = {
-                Enter: function () {
-                    if (shouldCancelEnter)
-                        return;
-                    actions.handleSelectOption(computed.activeOption);
-                },
-                Tab: function () { return actions.handleSelectOption(computed.activeOption); },
-                ",": function () {
-                    if (searchValue.length === 0)
-                        return;
-                    actions.handleSelectOption(generateCustomOptionObject(searchValue));
-                },
-                ArrowDown: function () {
-                    if (isLoadingMore && activeIndex === maxOptionIndex)
-                        return;
-                    setActiveIndex(computed.nextOptionIndex);
-                },
-                ArrowUp: function () { return setActiveIndex(computed.previousOptionIndex); },
-            };
-            if (searchValue.length === 0) {
-                callbacks.Backspace = function () {
-                    var _a;
-                    // If there's no text left to delete,
-                    // and delete is pressed again, focus on a chip instead.
-                    var target = (_a = computed.inputRef.current) === null || _a === void 0 ? void 0 : _a.previousElementSibling;
-                    if (target instanceof HTMLElement) {
-                        target.focus();
-                    }
-                };
-            }
-            handleKeydownEvents(callbacks, event);
-        },
-        handleDebouncedSearch: lodash.debounce(function () {
-            onSearch && onSearch(searchValue);
-            setAllOptions(generateOptions(options, searchValue, canAddCustomOption));
-            setShouldCancelEnter(false);
-        }, 300),
-    };
-    return __chunk_1.__assign(__chunk_1.__assign(__chunk_1.__assign(__chunk_1.__assign({}, actions), { activeIndex: activeIndex,
-        allOptions: allOptions }), computed), { menuOpen: menuOpen,
-        searchValue: searchValue,
-        shouldCancelBlur: shouldCancelBlur });
-}
-function generateOptions(options, searchValue, canAddCustomOption) {
-    var allOptions = options
-        .filter(function (option) {
-        return option.label.toLowerCase().match(searchValue.trim().toLowerCase());
-    })
-        .map(function (opt) { return (__chunk_1.__assign(__chunk_1.__assign({}, opt), { custom: false })); });
-    var _a = generateCustomOption(allOptions, searchValue, canAddCustomOption), shouldAddCustomOption = _a.shouldAddCustomOption, customOption = _a.customOption;
-    shouldAddCustomOption && allOptions.push(customOption);
-    return allOptions;
-}
-function generateCustomOption(options, searchValue, canAddCustomOption) {
-    function shouldAddCustomOption() {
-        var isMatchingOption = options.some(function (option) { return option.label.toLowerCase() === searchValue.trim().toLowerCase(); });
-        return !!searchValue && !isMatchingOption;
-    }
-    return {
-        shouldAddCustomOption: canAddCustomOption && shouldAddCustomOption(),
-        customOption: generateCustomOptionObject(searchValue),
-    };
-}
-function generateCustomOptionObject(searchValue) {
-    return {
-        value: searchValue,
-        label: searchValue,
-        prefix: React__default.createElement(index$2.Icon, { name: "add" }),
-        custom: true,
-    };
-}
-function handleKeydownEvents(callbacks, event) {
-    if (event.shiftKey)
-        return;
-    Object.entries(callbacks).forEach(function (_a) {
-        var _b = __chunk_1.__read(_a, 2), key = _b[0], callback = _b[1];
-        if (event.key === key) {
-            event.preventDefault();
-            callback(event);
-        }
-    });
+var menuId = uuid.v1();
+// eslint-disable-next-line max-statements
+function useInternalChipDismissibleInput(_a) {
+    var options = _a.options, _b = _a.isLoadingMore, isLoadingMore = _b === void 0 ? false : _b, onCustomOptionSelect = _a.onCustomOptionSelect, onOptionSelect = _a.onOptionSelect, onSearch = _a.onSearch;
+    var _c = tslib_es6.__read(React.useState([]), 2), allOptions = _c[0], setAllOptions = _c[1];
+    var _d = tslib_es6.__read(React.useState(""), 2), searchValue = _d[0], setSearchValue = _d[1];
+    var _e = tslib_es6.__read(React.useState(false), 2), menuOpen = _e[0], setMenuOpen = _e[1];
+    var _f = tslib_es6.__read(React.useState(0), 2), activeIndex = _f[0], setActiveIndex = _f[1];
+    var _g = tslib_es6.__read(React.useState(false), 2), shouldCancelBlur = _g[0], setShouldCancelBlur = _g[1];
+    var _h = tslib_es6.__read(React.useState(false), 2), shouldCancelEnter = _h[0], setShouldCancelEnter = _h[1];
+    var canAddCustomOption = onCustomOptionSelect !== undefined && !isLoadingMore;
+    var maxOptionIndex = allOptions.length - 1;
+    var liveAnnounce = hooks.useLiveAnnounce().liveAnnounce;
+    React.useEffect(function () {
+        setAllOptions(generateOptions(options, searchValue, canAddCustomOption));
+    }, [options]);
+    var computed = {
+        menuId: menuId,
+        inputRef: React.useRef(null),
+        activeOption: allOptions[activeIndex],
+        hasAvailableOptions: allOptions.length > 0,
+        nextOptionIndex: activeIndex < maxOptionIndex ? activeIndex + 1 : 0,
+        previousOptionIndex: activeIndex > 0 ? activeIndex - 1 : maxOptionIndex,
+    };
+    var actions = {
+        generateDescendantId: function (index) { return computed.menuId + "-" + index; },
+        handleReset: function () {
+            setActiveIndex(activeIndex === 0 ? activeIndex : activeIndex - 1);
+            setSearchValue("");
+        },
+        handleOpenMenu: function () { return setMenuOpen(true); },
+        handleCloseMenu: function () {
+            setMenuOpen(false);
+            setActiveIndex(0);
+        },
+        handleCancelBlur: function () { return setShouldCancelBlur(true); },
+        handleEnableBlur: function () { return setShouldCancelBlur(false); },
+        handleBlur: function () {
+            if (shouldCancelBlur)
+                return;
+            actions.handleReset();
+            actions.handleCloseMenu();
+        },
+        handleSearchChange: function (event) {
+            setActiveIndex(0);
+            setSearchValue(event.currentTarget.value);
+            setShouldCancelEnter(true);
+        },
+        handleSetActiveOnMouseOver: function (index) {
+            return function () { return setActiveIndex(index); };
+        },
+        handleSelectOption: function (selected) {
+            var _a;
+            if (allOptions.length === 0)
+                return;
+            var setValue = selected.custom ? onCustomOptionSelect : onOptionSelect;
+            if (setValue) {
+                setValue(selected.value);
+                liveAnnounce(selected.label + " Added");
+                actions.handleReset();
+                (_a = computed.inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        },
+        handleKeyDown: function (event) {
+            var callbacks = {
+                Enter: function () {
+                    if (shouldCancelEnter)
+                        return;
+                    actions.handleSelectOption(computed.activeOption);
+                },
+                Tab: function () { return actions.handleSelectOption(computed.activeOption); },
+                ",": function () {
+                    if (searchValue.length === 0)
+                        return;
+                    actions.handleSelectOption(generateCustomOptionObject(searchValue));
+                },
+                ArrowDown: function () {
+                    if (isLoadingMore && activeIndex === maxOptionIndex)
+                        return;
+                    setActiveIndex(computed.nextOptionIndex);
+                },
+                ArrowUp: function () { return setActiveIndex(computed.previousOptionIndex); },
+            };
+            if (searchValue.length === 0) {
+                callbacks.Backspace = function () {
+                    var _a;
+                    // If there's no text left to delete,
+                    // and delete is pressed again, focus on a chip instead.
+                    var target = (_a = computed.inputRef.current) === null || _a === void 0 ? void 0 : _a.previousElementSibling;
+                    if (target instanceof HTMLElement) {
+                        target.focus();
+                    }
+                };
+            }
+            handleKeydownEvents(callbacks, event);
+        },
+        handleDebouncedSearch: lodash.debounce(function () {
+            onSearch && onSearch(searchValue);
+            setAllOptions(generateOptions(options, searchValue, canAddCustomOption));
+            setShouldCancelEnter(false);
+        }, 300),
+    };
+    return tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, actions), { activeIndex: activeIndex,
+        allOptions: allOptions }), computed), { menuOpen: menuOpen,
+        searchValue: searchValue,
+        shouldCancelBlur: shouldCancelBlur });
+}
+function generateOptions(options, searchValue, canAddCustomOption) {
+    var allOptions = options
+        .filter(function (option) {
+        return option.label.toLowerCase().match(searchValue.trim().toLowerCase());
+    })
+        .map(function (opt) { return (tslib_es6.__assign(tslib_es6.__assign({}, opt), { custom: false })); });
+    var _a = generateCustomOption(allOptions, searchValue, canAddCustomOption), shouldAddCustomOption = _a.shouldAddCustomOption, customOption = _a.customOption;
+    shouldAddCustomOption && allOptions.push(customOption);
+    return allOptions;
+}
+function generateCustomOption(options, searchValue, canAddCustomOption) {
+    function shouldAddCustomOption() {
+        var isMatchingOption = options.some(function (option) { return option.label.toLowerCase() === searchValue.trim().toLowerCase(); });
+        return !!searchValue && !isMatchingOption;
+    }
+    return {
+        shouldAddCustomOption: canAddCustomOption && shouldAddCustomOption(),
+        customOption: generateCustomOptionObject(searchValue),
+    };
+}
+function generateCustomOptionObject(searchValue) {
+    return {
+        value: searchValue,
+        label: searchValue,
+        prefix: React__default["default"].createElement(Icon.Icon, { name: "add" }),
+        custom: true,
+    };
+}
+function handleKeydownEvents(callbacks, event) {
+    if (event.shiftKey)
+        return;
+    Object.entries(callbacks).forEach(function (_a) {
+        var _b = tslib_es6.__read(_a, 2), key = _b[0], callback = _b[1];
+        if (event.key === key) {
+            event.preventDefault();
+            callback(event);
+        }
+    });
 }
 
-function useInView() {
-    var ref = React.useRef(null);
-    var _a = __chunk_1.__read(React.useState(false), 2), isInView = _a[0], setIsInView = _a[1];
-    if (window.IntersectionObserver) {
-        var observer_1 = new IntersectionObserver(function (entries) {
-            setIsInView(entries[0].isIntersecting);
-        });
-        React.useEffect(function () {
-            ref.current && observer_1.observe(ref.current);
-            return function () {
-                if (!ref.current)
-                    return;
-                observer_1.unobserve(ref.current);
-            };
-        });
-    }
-    return { ref: ref, isInView: isInView };
+function useInView() {
+    var ref = React.useRef(null);
+    var _a = tslib_es6.__read(React.useState(false), 2), isInView = _a[0], setIsInView = _a[1];
+    if (window.IntersectionObserver) {
+        var observer_1 = new IntersectionObserver(function (entries) {
+            setIsInView(entries[0].isIntersecting);
+        });
+        React.useEffect(function () {
+            ref.current && observer_1.observe(ref.current);
+            return function () {
+                if (!ref.current)
+                    return;
+                observer_1.unobserve(ref.current);
+            };
+        });
+    }
+    return { ref: ref, isInView: isInView };
 }
 
-function useRepositionMenu(attachTo) {
-    var _a;
-    var _b = __chunk_1.__read(React.useState(), 2), positionElement = _b[0], setPositionedElementRef = _b[1];
-    var popper = reactPopper.usePopper(attachTo.current, positionElement, {
-        modifiers: [
-            { name: "offset", options: { offset: [0, 8] } },
-            { name: "flip", options: { fallbackPlacements: ["top"] } },
-        ],
-    });
-    var targetWidth = (_a = attachTo.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
-    return __chunk_1.__assign(__chunk_1.__assign({}, popper), { setPositionedElementRef: setPositionedElementRef, targetWidth: targetWidth });
+function useRepositionMenu(attachTo) {
+    var _a;
+    var _b = tslib_es6.__read(React.useState(), 2), positionElement = _b[0], setPositionedElementRef = _b[1];
+    var popper = reactPopper.usePopper(attachTo.current, positionElement, {
+        modifiers: [
+            { name: "offset", options: { offset: [0, 8] } },
+            { name: "flip", options: { fallbackPlacements: ["top"] } },
+        ],
+    });
+    var targetWidth = (_a = attachTo.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
+    return tslib_es6.__assign(tslib_es6.__assign({}, popper), { setPositionedElementRef: setPositionedElementRef, targetWidth: targetWidth });
 }
 
-function useScrollToActive(index) {
-    var ref = React.useRef(null);
-    React.useEffect(function () {
-        var _a, _b;
-        if (!window.HTMLElement.prototype.scrollIntoView)
-            return;
-        (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.children[index]) === null || _b === void 0 ? void 0 : _b.scrollIntoView({
-            behavior: "smooth",
-            block: "nearest",
-            inline: "start",
-        });
-    }, [index]);
-    return ref;
+function useScrollToActive(index) {
+    var ref = React.useRef(null);
+    React.useEffect(function () {
+        var _a, _b;
+        if (!window.HTMLElement.prototype.scrollIntoView)
+            return;
+        (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.children[index]) === null || _b === void 0 ? void 0 : _b.scrollIntoView({
+            behavior: "smooth",
+            block: "nearest",
+            inline: "start",
+        });
+    }, [index]);
+    return ref;
 }
 
-function InternalChipDismissibleInput(props) {
-    var _a = props.activator, activator = _a === void 0 ? React__default.createElement(index$5.Button, { icon: "add", type: "secondary", ariaLabel: "Add" }) : _a, attachTo = props.attachTo, _b = props.isLoadingMore, isLoadingMore = _b === void 0 ? false : _b, onLoadMore = props.onLoadMore;
-    var _c = useInternalChipDismissibleInput(props), activeIndex = _c.activeIndex, allOptions = _c.allOptions, hasAvailableOptions = _c.hasAvailableOptions, inputRef = _c.inputRef, menuId = _c.menuId, menuOpen = _c.menuOpen, searchValue = _c.searchValue, generateDescendantId = _c.generateDescendantId, handleBlur = _c.handleBlur, handleOpenMenu = _c.handleOpenMenu, handleSearchChange = _c.handleSearchChange, handleCancelBlur = _c.handleCancelBlur, handleEnableBlur = _c.handleEnableBlur, handleSetActiveOnMouseOver = _c.handleSetActiveOnMouseOver, handleKeyDown = _c.handleKeyDown, handleSelectOption = _c.handleSelectOption, handleDebouncedSearch = _c.handleDebouncedSearch;
-    var menuRef = useScrollToActive(activeIndex);
-    var _d = useInView(), visibleChildRef = _d.ref, isInView = _d.isInView;
-    var _e = useRepositionMenu(attachTo), popperStyles = _e.styles, attributes = _e.attributes, forceUpdate = _e.forceUpdate, setPositionedElementRef = _e.setPositionedElementRef;
-    React.useEffect(function () { return forceUpdate === null || forceUpdate === void 0 ? void 0 : forceUpdate(); }, [allOptions]);
-    React.useEffect(function () {
-        handleDebouncedSearch();
-        return handleDebouncedSearch.cancel;
-    }, [searchValue]);
-    React.useEffect(function () {
-        isInView && onLoadMore && onLoadMore(searchValue);
-    }, [isInView]);
-    if (!menuOpen) {
-        return React__default.cloneElement(activator, { onClick: handleOpenMenu });
-    }
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("input", { ref: inputRef, className: styles$1.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: lodash.debounce(handleBlur, 200), onFocus: handleOpenMenu, autoFocus: true }),
-        (hasAvailableOptions || isLoadingMore) && (React__default.createElement("div", __chunk_1.__assign({ ref: setPositionedElementRef, className: styles$1.menu, style: popperStyles.popper }, attributes.popper),
-            React__default.createElement("div", { ref: menuRef, role: "listbox", id: menuId, className: styles$1.menuList, "data-testid": "chip-menu" },
-                allOptions.map(function (option, i) {
-                    var _a;
-                    return (React__default.createElement("button", { key: option.value, role: "option", id: generateDescendantId(i), className: classnames(styles$1.menuListOption, (_a = {},
-                            _a[styles$1.activeOption] = activeIndex === i,
-                            _a)), onClick: function () { return handleSelectOption(option); }, onMouseEnter: handleSetActiveOnMouseOver(i), onMouseDown: handleCancelBlur, onMouseUp: handleEnableBlur },
-                        React__default.createElement("span", { "aria-hidden": true }, option.prefix),
-                        React__default.createElement(index$1.Text, null, option.label)));
-                }),
-                React__default.createElement("div", { ref: visibleChildRef }),
-                isLoadingMore && (React__default.createElement("div", { className: styles$1.loadingIndicator },
-                    React__default.createElement(index$7.Spinner, { size: "small", inline: true }))))))));
+function InternalChipDismissibleInput(props) {
+    var _a = props.activator, activator = _a === void 0 ? React__default["default"].createElement(Button.Button, { icon: "add", type: "secondary", ariaLabel: "Add" }) : _a, attachTo = props.attachTo, _b = props.isLoadingMore, isLoadingMore = _b === void 0 ? false : _b, onLoadMore = props.onLoadMore;
+    var _c = useInternalChipDismissibleInput(props), activeIndex = _c.activeIndex, allOptions = _c.allOptions, hasAvailableOptions = _c.hasAvailableOptions, inputRef = _c.inputRef, menuId = _c.menuId, menuOpen = _c.menuOpen, searchValue = _c.searchValue, generateDescendantId = _c.generateDescendantId, handleBlur = _c.handleBlur, handleOpenMenu = _c.handleOpenMenu, handleSearchChange = _c.handleSearchChange, handleCancelBlur = _c.handleCancelBlur, handleEnableBlur = _c.handleEnableBlur, handleSetActiveOnMouseOver = _c.handleSetActiveOnMouseOver, handleKeyDown = _c.handleKeyDown, handleSelectOption = _c.handleSelectOption, handleDebouncedSearch = _c.handleDebouncedSearch;
+    var menuRef = useScrollToActive(activeIndex);
+    var _d = useInView(), visibleChildRef = _d.ref, isInView = _d.isInView;
+    var _e = useRepositionMenu(attachTo), popperStyles = _e.styles, attributes = _e.attributes, forceUpdate = _e.forceUpdate, setPositionedElementRef = _e.setPositionedElementRef;
+    React.useEffect(function () { return forceUpdate === null || forceUpdate === void 0 ? void 0 : forceUpdate(); }, [allOptions]);
+    React.useEffect(function () {
+        handleDebouncedSearch();
+        return handleDebouncedSearch.cancel;
+    }, [searchValue]);
+    React.useEffect(function () {
+        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: lodash.debounce(handleBlur, 200), onFocus: handleOpenMenu, autoFocus: true }),
+        (hasAvailableOptions || isLoadingMore) && (React__default["default"].createElement("div", tslib_es6.__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(function (option, i) {
+                    var _a;
+                    return (React__default["default"].createElement("button", { key: option.value, role: "option", id: generateDescendantId(i), className: classnames__default["default"](styles.menuListOption, (_a = {},
+                            _a[styles.activeOption] = activeIndex === i,
+                            _a)), onClick: function () { return 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) {
-    var _a = useInternalChipDismissible(props), availableChipOptions = _a.availableChipOptions, wrapperRef = _a.ref, sortedVisibleChipOptions = _a.sortedVisibleChipOptions, handleChipAdd = _a.handleChipAdd, handleChipClick = _a.handleChipClick, handleChipKeyDown = _a.handleChipKeyDown, handleChipRemove = _a.handleChipRemove, handleCustomAdd = _a.handleCustomAdd, handleWrapperKeyDown = _a.handleWrapperKeyDown;
-    return (React__default.createElement("div", { ref: wrapperRef, className: styles$1.wrapper, "data-testid": "dismissible-chips", onKeyDown: handleWrapperKeyDown, role: "listbox" },
-        sortedVisibleChipOptions.map(function (chip) { return (React__default.createElement(InternalChip, __chunk_1.__assign({ key: chip.value }, chip, { onKeyDown: handleChipKeyDown(chip.value), onClick: handleChipClick(chip.value), ariaLabel: chip.value + ". Press delete or backspace to remove " + chip.value, tabIndex: 0, suffix: React__default.createElement(InternalChipButton, { icon: "remove", invalid: chip.invalid, disabled: chip.disabled, label: chip.label, onClick: handleChipRemove(chip.value) }) }))); }),
-        React__default.createElement(InternalChipDismissibleInput, { activator: props.activator, attachTo: wrapperRef, isLoadingMore: props.isLoadingMore, options: availableChipOptions, onOptionSelect: handleChipAdd, onCustomOptionSelect: handleCustomAdd, onSearch: props.onSearch, onLoadMore: props.onLoadMore })));
+function InternalChipDismissible(props) {
+    var _a = useInternalChipDismissible(props), availableChipOptions = _a.availableChipOptions, wrapperRef = _a.ref, sortedVisibleChipOptions = _a.sortedVisibleChipOptions, handleChipAdd = _a.handleChipAdd, handleChipClick = _a.handleChipClick, handleChipKeyDown = _a.handleChipKeyDown, handleChipRemove = _a.handleChipRemove, handleCustomAdd = _a.handleCustomAdd, handleWrapperKeyDown = _a.handleWrapperKeyDown;
+    return (React__default["default"].createElement("div", { ref: wrapperRef, className: styles.wrapper, "data-testid": "dismissible-chips", onKeyDown: handleWrapperKeyDown, role: "listbox" },
+        sortedVisibleChipOptions.map(function (chip) { return (React__default["default"].createElement(InternalChip, tslib_es6.__assign({ key: chip.value }, chip, { onKeyDown: handleChipKeyDown(chip.value), onClick: handleChipClick(chip.value), ariaLabel: chip.value + ". Press delete or backspace to remove " + chip.value, 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 })));
 }
 
-function Chips(props) {
-    switch (props.type) {
-        case "dismissible":
-            return React__default.createElement(InternalChipDismissible, __chunk_1.__assign({}, props));
-        case "multiselect":
-            return React__default.createElement(InternalChipMultiSelect, __chunk_1.__assign({}, props));
-        default:
-            return React__default.createElement(InternalChipSingleSelect, __chunk_1.__assign({}, props));
-    }
+function Chips(props) {
+    switch (props.type) {
+        case "dismissible":
+            return React__default["default"].createElement(InternalChipDismissible, tslib_es6.__assign({}, props));
+        case "multiselect":
+            return React__default["default"].createElement(InternalChipMultiSelect, tslib_es6.__assign({}, props));
+        default:
+            return React__default["default"].createElement(InternalChipSingleSelect, tslib_es6.__assign({}, props));
+    }
 }
 
-// Only need the component to pass in the data as a react children
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function Chip(props) {
-    // Throw error when <Chip /> gets used outside of the <Chips />
-    hooks.useAssert(true, "`<Chip>` component can only be used inside `<Chips>`");
-    return React__default.createElement(React__default.Fragment, null);
+// Only need the component to pass in the data as a react children
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function Chip(props) {
+    // Throw error when <Chip /> gets used outside of the <Chips />
+    hooks.useAssert(true, "`<Chip>` component can only be used inside `<Chips>`");
+    return React__default["default"].createElement(React__default["default"].Fragment, null);
 }
 
 exports.Chip = Chip;