@splunk/react-ui 4.21.0 → 4.22.0

package/Chip.js

@@ -1,495 +1,516 @@
-/******/ (() => { // webpackBootstrap
-/******/ 	"use strict";
-/******/ 	// The require scope
-/******/ 	var __webpack_require__ = {};
-/******/ 	
-/************************************************************************/
-/******/ 	/* webpack/runtime/compat get default export */
-/******/ 	(() => {
-/******/ 		// getDefaultExport function for compatibility with non-harmony modules
-/******/ 		__webpack_require__.n = (module) => {
-/******/ 			var getter = module && module.__esModule ?
-/******/ 				() => (module['default']) :
-/******/ 				() => (module);
-/******/ 			__webpack_require__.d(getter, { a: getter });
-/******/ 			return getter;
-/******/ 		};
-/******/ 	})();
-/******/ 	
-/******/ 	/* webpack/runtime/define property getters */
-/******/ 	(() => {
-/******/ 		// define getter functions for harmony exports
-/******/ 		__webpack_require__.d = (exports, definition) => {
-/******/ 			for(var key in definition) {
-/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
-/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
-/******/ 				}
-/******/ 			}
-/******/ 		};
-/******/ 	})();
-/******/ 	
-/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
-/******/ 	(() => {
-/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
-/******/ 	})();
-/******/ 	
-/******/ 	/* webpack/runtime/make namespace object */
-/******/ 	(() => {
-/******/ 		// define __esModule on exports
-/******/ 		__webpack_require__.r = (exports) => {
-/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
-/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-/******/ 			}
-/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
-/******/ 		};
-/******/ 	})();
-/******/ 	
-/************************************************************************/
-var __webpack_exports__ = {};
-// ESM COMPAT FLAG
-__webpack_require__.r(__webpack_exports__);
-
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, {
-  "default": () => (/* reexport */ Chip_Chip)
-});
-
-;// CONCATENATED MODULE: external "react"
-const external_react_namespaceObject = require("react");
-var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_namespaceObject);
-;// CONCATENATED MODULE: external "lodash/omit"
-const omit_namespaceObject = require("lodash/omit");
-var omit_default = /*#__PURE__*/__webpack_require__.n(omit_namespaceObject);
-;// CONCATENATED MODULE: external "prop-types"
-const external_prop_types_namespaceObject = require("prop-types");
-var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_namespaceObject);
-;// CONCATENATED MODULE: external "@splunk/react-icons/Cross"
-const Cross_namespaceObject = require("@splunk/react-icons/Cross");
-var Cross_default = /*#__PURE__*/__webpack_require__.n(Cross_namespaceObject);
-;// CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Close"
-const Close_namespaceObject = require("@splunk/react-icons/enterprise/Close");
-var Close_default = /*#__PURE__*/__webpack_require__.n(Close_namespaceObject);
-;// CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-const i18n_namespaceObject = require("@splunk/ui-utils/i18n");
-;// CONCATENATED MODULE: external "@splunk/ui-utils/color"
-const color_namespaceObject = require("@splunk/ui-utils/color");
-;// CONCATENATED MODULE: external "@splunk/themes"
-const themes_namespaceObject = require("@splunk/themes");
-;// CONCATENATED MODULE: external "styled-components"
-const external_styled_components_namespaceObject = require("styled-components");
-var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_namespaceObject);
-;// CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-const Clickable_namespaceObject = require("@splunk/react-ui/Clickable");
-var Clickable_default = /*#__PURE__*/__webpack_require__.n(Clickable_namespaceObject);
-;// CONCATENATED MODULE: ./src/Chip/ChipStyles.ts
-
-
-
-var StyledBasic = external_styled_components_default().div.withConfig({
-  displayName: "ChipStyles__StyledBasic",
-  componentId: "sc-1sd3tsh-0"
-})(["", ";background-color:", ";border:1px solid transparent;flex:0 1 auto;max-width:calc(100% - 3px);border-radius:2px;", ";", " ", " ", ""], themes_namespaceObject.mixins.reset('inline-flex'), (0,themes_namespaceObject.pickVariant)('$appearance', {
-  "default": {
-    enterprise: {
-      dark: themes_namespaceObject.variables.gray45,
-      light: themes_namespaceObject.variables.gray92
-    },
-    prisma: themes_namespaceObject.variables.neutral100
-  },
-  info: {
-    enterprise: themes_namespaceObject.variables.infoColorL30
-  },
-  success: {
-    enterprise: themes_namespaceObject.variables.successColorL30
-  },
-  warning: {
-    enterprise: themes_namespaceObject.variables.warningColorL30
-  },
-  error: {
-    enterprise: themes_namespaceObject.variables.errorColorL30,
-    prisma: themes_namespaceObject.variables.accentColorNegative
-  },
-  outline: {
-    prisma: 'transparent'
-  },
-  custom: function custom(_ref) {
-    var $backgroundColor = _ref.$backgroundColor;
-    return $backgroundColor;
-  }
-}), function (_ref2) {
-  var $appearance = _ref2.$appearance;
-  return $appearance === 'outline' && (0,external_styled_components_namespaceObject.css)(["border-color:", ";"], themes_namespaceObject.variables.interactiveColorBorder);
-}, (0,themes_namespaceObject.pick)({
-  enterprise: (0,external_styled_components_namespaceObject.css)(["color:", ";line-height:", ";margin:0 2px 2px 0;"], themes_namespaceObject.variables.textGray, themes_namespaceObject.variables.lineHeight),
-  prisma: (0,external_styled_components_namespaceObject.css)(["color:", ";line-height:16px;margin:1px;"], function (_ref3) {
-    var $appearance = _ref3.$appearance;
-    return $appearance === 'error' ? themes_namespaceObject.variables.contentColorInverted : themes_namespaceObject.variables.contentColorDefault;
-  })
-}), (0,themes_namespaceObject.pick)({
-  enterprise: {
-    comfortable: (0,external_styled_components_namespaceObject.css)(["height:calc(", " - 6px);padding:4px 7px;"], themes_namespaceObject.variables.inputHeight),
-    compact: (0,external_styled_components_namespaceObject.css)(["height:calc(", " - 6px);padding:2px 4px;"], themes_namespaceObject.variables.inputHeight)
-  },
-  prisma: {
-    comfortable: (0,external_styled_components_namespaceObject.css)(["height:calc(", " - 8px);padding:7px 7px;font-size:", ";"], themes_namespaceObject.variables.inputHeight, themes_namespaceObject.variables.fontSizeSmall),
-    compact: (0,external_styled_components_namespaceObject.css)(["height:calc(", " - 8px);padding:3px 7px;font-size:", ";"], themes_namespaceObject.variables.inputHeight, themes_namespaceObject.variables.fontSizeSmall)
-  }
-}), function (_ref4) {
-  var $disabled = _ref4.$disabled;
-  return $disabled && (0,external_styled_components_namespaceObject.css)(["background-color:", ";"], (0,themes_namespaceObject.pickVariant)('$appearance', {
-    "default": {
-      enterprise: {
-        dark: 'rgba(0, 0, 0, 0.15)',
-        light: 'rgba(0, 0, 0, 0.05)'
-      },
-      prisma: themes_namespaceObject.variables.interactiveColorBackgroundDisabled
-    },
-    info: {
-      enterprise: themes_namespaceObject.mixins.colorWithAlpha(themes_namespaceObject.variables.infoColorL10, 0.3)
-    },
-    success: {
-      enterprise: themes_namespaceObject.mixins.colorWithAlpha(themes_namespaceObject.variables.successColorL10, 0.3)
-    },
-    warning: {
-      enterprise: themes_namespaceObject.mixins.colorWithAlpha(themes_namespaceObject.variables.warningColorL10, 0.3)
-    },
-    error: {
-      enterprise: themes_namespaceObject.mixins.colorWithAlpha(themes_namespaceObject.variables.errorColorL10, 0.3),
-      prisma: themes_namespaceObject.variables.interactiveColorBackgroundDisabled
-    },
-    outline: {
-      prisma: themes_namespaceObject.variables.interactiveColorBackgroundDisabled
-    },
-    custom: {
-      enterprise: {
-        dark: 'rgba(0, 0, 0, 0.15)',
-        light: 'rgba(0, 0, 0, 0.05)'
-      },
-      prisma: themes_namespaceObject.variables.interactiveColorBackgroundDisabled
+/******/ (() => {
+    // webpackBootstrap
+    /******/ "use strict";
+    /******/ // The require scope
+    /******/    var e = {};
+    /******/
+    /************************************************************************/
+    /******/ /* webpack/runtime/compat get default export */
+    /******/    (() => {
+        /******/ // getDefaultExport function for compatibility with non-harmony modules
+        /******/ e.n = r => {
+            /******/ var a = r && r.__esModule ? 
+            /******/ () => r["default"]
+            /******/ : () => r
+            /******/;
+            e.d(a, {
+                a
+            });
+            /******/            return a;
+            /******/        };
+        /******/    })();
+    /******/
+    /******/ /* webpack/runtime/define property getters */
+    /******/    (() => {
+        /******/ // define getter functions for harmony exports
+        /******/ e.d = (r, a) => {
+            /******/ for (var o in a) {
+                /******/ if (e.o(a, o) && !e.o(r, o)) {
+                    /******/ Object.defineProperty(r, o, {
+                        enumerable: true,
+                        get: a[o]
+                    });
+                    /******/                }
+                /******/            }
+            /******/        };
+        /******/    })();
+    /******/
+    /******/ /* webpack/runtime/hasOwnProperty shorthand */
+    /******/    (() => {
+        /******/ e.o = (e, r) => Object.prototype.hasOwnProperty.call(e, r)
+        /******/;
+    })();
+    /******/
+    /******/ /* webpack/runtime/make namespace object */
+    /******/    (() => {
+        /******/ // define __esModule on exports
+        /******/ e.r = e => {
+            /******/ if (typeof Symbol !== "undefined" && Symbol.toStringTag) {
+                /******/ Object.defineProperty(e, Symbol.toStringTag, {
+                    value: "Module"
+                });
+                /******/            }
+            /******/            Object.defineProperty(e, "__esModule", {
+                value: true
+            });
+            /******/        };
+        /******/    })();
+    /******/
+    /************************************************************************/    var r = {};
+    // ESM COMPAT FLAG
+        e.r(r);
+    // EXPORTS
+        e.d(r, {
+        default: () => /* reexport */ V
+    });
+    // CONCATENATED MODULE: external "react"
+    const a = require("react");
+    var o =  e.n(a);
+    // CONCATENATED MODULE: external "lodash/omit"
+    const n = require("lodash/omit");
+    var t =  e.n(n);
+    // CONCATENATED MODULE: external "prop-types"
+    const i = require("prop-types");
+    var l =  e.n(i);
+    // CONCATENATED MODULE: external "@splunk/react-icons/Cross"
+    const s = require("@splunk/react-icons/Cross");
+    var c =  e.n(s);
+    // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Close"
+    const p = require("@splunk/react-icons/enterprise/Close");
+    var u =  e.n(p);
+    // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
+    const d = require("@splunk/ui-utils/i18n");
+    // CONCATENATED MODULE: external "@splunk/ui-utils/color"
+    const f = require("@splunk/ui-utils/color");
+    // CONCATENATED MODULE: external "@splunk/themes"
+    const v = require("@splunk/themes");
+    // CONCATENATED MODULE: external "styled-components"
+    const b = require("styled-components");
+    var g =  e.n(b);
+    // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
+    const m = require("@splunk/react-ui/Clickable");
+    var h =  e.n(m);
+    // CONCATENATED MODULE: ./src/Chip/ChipStyles.ts
+    var C = g().div.withConfig({
+        displayName: "ChipStyles__StyledBasic",
+        componentId: "sc-1sd3tsh-0"
+    })([ "", ";background-color:", ";border:1px solid transparent;flex:0 1 auto;max-width:calc(100% - 3px);border-radius:2px;", ";", " ", " ", "" ], v.mixins.reset("inline-flex"), (0, 
+    v.pickVariant)("$appearance", {
+        default: {
+            enterprise: {
+                dark: v.variables.gray45,
+                light: v.variables.gray92
+            },
+            prisma: v.variables.neutral100
+        },
+        info: {
+            enterprise: v.variables.infoColorL30
+        },
+        success: {
+            enterprise: v.variables.successColorL30
+        },
+        warning: {
+            enterprise: v.variables.warningColorL30
+        },
+        error: {
+            enterprise: v.variables.errorColorL30,
+            prisma: v.variables.accentColorNegative
+        },
+        outline: {
+            prisma: "transparent"
+        },
+        custom: function e(r) {
+            var a = r.$backgroundColor;
+            return a;
+        }
+    }), (function(e) {
+        var r = e.$appearance;
+        return r === "outline" && (0, b.css)([ "border-color:", ";" ], v.variables.interactiveColorBorder);
+    }), (0, v.pick)({
+        enterprise: (0, b.css)([ "color:", ";line-height:", ";margin:0 2px 2px 0;" ], v.variables.textGray, v.variables.lineHeight),
+        prisma: (0, b.css)([ "color:", ";line-height:16px;margin:1px;" ], (function(e) {
+            var r = e.$appearance;
+            return r === "error" ? v.variables.contentColorInverted : v.variables.contentColorDefault;
+        }))
+    }), (0, v.pick)({
+        enterprise: {
+            comfortable: (0, b.css)([ "height:calc(", " - 6px);padding:4px 7px;" ], v.variables.inputHeight),
+            compact: (0, b.css)([ "height:calc(", " - 6px);padding:2px 4px;" ], v.variables.inputHeight)
+        },
+        prisma: {
+            comfortable: (0, b.css)([ "height:calc(", " - 8px);padding:7px 7px;font-size:", ";" ], v.variables.inputHeight, v.variables.fontSizeSmall),
+            compact: (0, b.css)([ "height:calc(", " - 8px);padding:3px 7px;font-size:", ";" ], v.variables.inputHeight, v.variables.fontSizeSmall)
+        }
+    }), (function(e) {
+        var r = e.$disabled;
+        return r && (0, b.css)([ "background-color:", ";" ], (0, v.pickVariant)("$appearance", {
+            default: {
+                enterprise: {
+                    dark: "rgba(0, 0, 0, 0.15)",
+                    light: "rgba(0, 0, 0, 0.05)"
+                },
+                prisma: v.variables.interactiveColorBackgroundDisabled
+            },
+            info: {
+                enterprise: v.mixins.colorWithAlpha(v.variables.infoColorL10, .3)
+            },
+            success: {
+                enterprise: v.mixins.colorWithAlpha(v.variables.successColorL10, .3)
+            },
+            warning: {
+                enterprise: v.mixins.colorWithAlpha(v.variables.warningColorL10, .3)
+            },
+            error: {
+                enterprise: v.mixins.colorWithAlpha(v.variables.errorColorL10, .3),
+                prisma: v.variables.interactiveColorBackgroundDisabled
+            },
+            outline: {
+                prisma: v.variables.interactiveColorBackgroundDisabled
+            },
+            custom: {
+                enterprise: {
+                    dark: "rgba(0, 0, 0, 0.15)",
+                    light: "rgba(0, 0, 0, 0.05)"
+                },
+                prisma: v.variables.interactiveColorBackgroundDisabled
+            }
+        }));
+    }));
+    var y = g()(C).withConfig({
+        displayName: "ChipStyles__Styled",
+        componentId: "sc-1sd3tsh-1"
+    })([ "align-items:center;" ]);
+    var x = g().div.withConfig({
+        displayName: "ChipStyles__StyledInner",
+        componentId: "sc-1sd3tsh-2"
+    })([ "", ";" ], (0, v.pick)({
+        enterprise: (0, b.css)([ "display:flex;max-width:100%;" ]),
+        prisma: (0, b.css)([ "display:grid;max-width:100%;height:16px;column-gap:", ";", ";" ], (0, 
+        v.pick)({
+            prisma: {
+                compact: v.variables.spacingXSmall,
+                comfortable: v.variables.spacingSmall
+            }
+        }), (function(e) {
+            var r = e.$icon, a = e.$removable;
+            var o = (0, b.css)([ "grid-template-columns:1fr;" ]);
+            if (r && a) {
+                o = (0, b.css)([ "grid-template-columns:0fr 1fr 0fr;" ]);
+            } else if (r) {
+                o = (0, b.css)([ "grid-template-columns:0fr 1fr;" ]);
+            } else if (a) {
+                o = (0, b.css)([ "grid-template-columns:1fr 0fr;" ]);
+            }
+            return o;
+        }))
+    }));
+    var $ = g().div.withConfig({
+        displayName: "ChipStyles__StyledIcon",
+        componentId: "sc-1sd3tsh-3"
+    })([ "", ";margin-right:", ";color:", ";" ], (0, v.pick)({
+        prisma: {
+            compact: (0, b.css)([ "font-size:14px;display:inline-flex;svg{height:16px;vertical-align:baseline;}" ]),
+            comfortable: (0, b.css)([ "font-size:18px;display:inline-flex;align-self:center;svg{height:16px;vertical-align:baseline;}" ])
+        },
+        enterprise: (0, b.css)([ "flex:0 0 auto;" ])
+    }), (0, v.pick)({
+        enterprise: "3px"
+    }), (0, v.pickVariant)("$disabled", {
+        true: v.variables.contentColorDisabled,
+        false: {
+            enterprise: function e(r) {
+                var a = r.$foregroundColor;
+                return a || v.variables.contentColorDefault;
+            },
+            prisma: function e(r) {
+                var a = r.$foregroundColor, o = r.$appearance;
+                return a || (o === "error" ? v.variables.contentColorInverted : v.variables.contentColorDefault);
+            }
+        }
+    }));
+    var k = g().div.withConfig({
+        displayName: "ChipStyles__StyledLabel",
+        componentId: "sc-1sd3tsh-4"
+    })([ "", " ", ";color:", ";" ], v.mixins.ellipsis(), (0, v.pick)({
+        enterprise: (0, b.css)([ "flex:0 1 auto;" ])
+    }), (0, v.pickVariant)("$disabled", {
+        true: v.variables.contentColorDisabled,
+        false: {
+            enterprise: function e(r) {
+                var a = r.$appearance, o = r.$foregroundColor;
+                return o || (a === "default" || a === "outline" ? v.variables.contentColorDefault : v.variables.gray30);
+            },
+            prisma: function e(r) {
+                var a = r.$appearance, o = r.$foregroundColor;
+                return o || (a === "error" ? v.variables.contentColorInverted : v.variables.contentColorActive);
+            }
+        }
+    }));
+    var S = g().span.withConfig({
+        displayName: "ChipStyles__StyledRemove",
+        componentId: "sc-1sd3tsh-5"
+    })([ "", ";" ], (0, v.pick)({
+        enterprise: (0, b.css)([ "flex:0 0 auto;padding-left:", ";font-size:", ";color:", ";" ], v.variables.spacingQuarter, (0, 
+        v.pick)({
+            compact: "9px",
+            comfortable: "10.5px"
+        }), (0, v.pickVariant)("$disabled", {
+            true: v.variables.contentColorDisabled,
+            false: {
+                enterprise: function e(r) {
+                    var a = r.$foregroundColor, o = r.$appearance;
+                    return a || (o === "default" || o === "outline" ? v.variables.textGray : v.variables.gray30);
+                }
+            }
+        })),
+        prisma: (0, b.css)([ "font-size:", ";display:flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:12px;font-size:9px;color:", ";" ], (0, 
+        v.pick)({
+            compact: "9px",
+            comfortable: "10.5px"
+        }), (function(e) {
+            var r = e.$disabled, a = e.$foregroundColor;
+            return r ? v.variables.contentColorDisabled : a || "inherit";
+        }))
+    }));
+    var w = g()(C.withComponent(h())).withConfig({
+        displayName: "ChipStyles__StyledClickable",
+        componentId: "sc-1sd3tsh-6"
+    })([ "flex:0 1 auto;line-height:16px;cursor:pointer;&:focus{", ";}&:not([disabled]):hover{", ";}", ";" ], (0, 
+    v.pick)({
+        enterprise: (0, b.css)([ "box-shadow:", ";color:", ";" ], v.variables.focusShadow, v.variables.linkColor),
+        prisma: (0, b.css)([ "color:", ";", "{background-color:", ";box-shadow:0 0 0 3px ", ";}" ], v.variables.contentColorActive, 
+        /* sc-sel */
+        S, v.variables.interactiveColorOverlayHover, v.variables.focusColor)
+    }), (0, v.pick)({
+        enterprise: (0, b.css)([ "background-color:", ";", "{color:", ";}" ], (0, v.pickVariant)("$appearance", {
+            default: {
+                dark: v.variables.gray30,
+                light: v.variables.gray96
+            },
+            info: v.variables.infoColorL20,
+            success: v.variables.successColorL20,
+            warning: v.variables.warningColorL20,
+            error: v.variables.errorColorL20,
+            custom: {
+                dark: v.variables.gray30,
+                light: v.variables.gray96
+            }
+        }), 
+        /* sc-sel */
+        S, (function(e) {
+            var r = e.$foregroundColor;
+            return r || v.variables.linkColor;
+        })),
+        prisma: (0, b.css)([ "color:", ";", "{background-color:", ";", ";}" ], v.variables.contentColorActive, 
+        /* sc-sel */
+        S, v.variables.interactiveColorOverlayHover, (function(e) {
+            var r = e.$appearance;
+            return r === "error" && (0, b.css)([ "color:", ";" ], v.variables.contentColorInverted);
+        }))
+    }), (0, v.pick)({
+        prisma: (0, b.css)([ "&:not([disabled]):active ", "{background-color:", ";}" ], 
+        /* sc-sel */
+        S, v.variables.interactiveColorOverlayActive)
+    }));
+    // CONCATENATED MODULE: ./src/Chip/Chip.tsx
+    function O() {
+        O = Object.assign || function(e) {
+            for (var r = 1; r < arguments.length; r++) {
+                var a = arguments[r];
+                for (var o in a) {
+                    if (Object.prototype.hasOwnProperty.call(a, o)) {
+                        e[o] = a[o];
+                    }
+                }
+            }
+            return e;
+        };
+        return O.apply(this, arguments);
     }
-  }));
-});
-var Styled = external_styled_components_default()(StyledBasic).withConfig({
-  displayName: "ChipStyles__Styled",
-  componentId: "sc-1sd3tsh-1"
-})(["align-items:center;"]);
-var StyledInner = external_styled_components_default().div.withConfig({
-  displayName: "ChipStyles__StyledInner",
-  componentId: "sc-1sd3tsh-2"
-})(["", ";"], (0,themes_namespaceObject.pick)({
-  enterprise: (0,external_styled_components_namespaceObject.css)(["display:flex;max-width:100%;"]),
-  prisma: (0,external_styled_components_namespaceObject.css)(["display:grid;max-width:100%;height:16px;column-gap:", ";", ";"], (0,themes_namespaceObject.pick)({
-    prisma: {
-      compact: themes_namespaceObject.variables.spacingXSmall,
-      comfortable: themes_namespaceObject.variables.spacingSmall
+    function _(e, r) {
+        return q(e) || E(e, r) || j(e, r) || R();
     }
-  }), function (_ref5) {
-    var $icon = _ref5.$icon,
-        $removable = _ref5.$removable;
-    var gridColumns = (0,external_styled_components_namespaceObject.css)(["grid-template-columns:1fr;"]);
-
-    if ($icon && $removable) {
-      gridColumns = (0,external_styled_components_namespaceObject.css)(["grid-template-columns:0fr 1fr 0fr;"]);
-    } else if ($icon) {
-      gridColumns = (0,external_styled_components_namespaceObject.css)(["grid-template-columns:0fr 1fr;"]);
-    } else if ($removable) {
-      gridColumns = (0,external_styled_components_namespaceObject.css)(["grid-template-columns:1fr 0fr;"]);
+    function R() {
+        throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
     }
-
-    return gridColumns;
-  })
-}));
-var StyledIcon = external_styled_components_default().div.withConfig({
-  displayName: "ChipStyles__StyledIcon",
-  componentId: "sc-1sd3tsh-3"
-})(["", ";margin-right:", ";color:", ";"], (0,themes_namespaceObject.pick)({
-  prisma: {
-    compact: (0,external_styled_components_namespaceObject.css)(["font-size:14px;display:inline-flex;svg{height:16px;vertical-align:baseline;}"]),
-    comfortable: (0,external_styled_components_namespaceObject.css)(["font-size:18px;display:inline-flex;align-self:center;svg{height:16px;vertical-align:baseline;}"])
-  },
-  enterprise: (0,external_styled_components_namespaceObject.css)(["flex:0 0 auto;"])
-}), (0,themes_namespaceObject.pick)({
-  enterprise: '3px'
-}), (0,themes_namespaceObject.pickVariant)('$disabled', {
-  "true": themes_namespaceObject.variables.contentColorDisabled,
-  "false": {
-    enterprise: function enterprise(_ref6) {
-      var $foregroundColor = _ref6.$foregroundColor;
-      return $foregroundColor || themes_namespaceObject.variables.contentColorDefault;
-    },
-    prisma: function prisma(_ref7) {
-      var $foregroundColor = _ref7.$foregroundColor,
-          $appearance = _ref7.$appearance;
-      return $foregroundColor || ($appearance === 'error' ? themes_namespaceObject.variables.contentColorInverted : themes_namespaceObject.variables.contentColorDefault);
+    function j(e, r) {
+        if (!e) return;
+        if (typeof e === "string") return I(e, r);
+        var a = Object.prototype.toString.call(e).slice(8, -1);
+        if (a === "Object" && e.constructor) a = e.constructor.name;
+        if (a === "Map" || a === "Set") return Array.from(e);
+        if (a === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a)) return I(e, r);
     }
-  }
-}));
-var StyledLabel = external_styled_components_default().div.withConfig({
-  displayName: "ChipStyles__StyledLabel",
-  componentId: "sc-1sd3tsh-4"
-})(["", " ", ";color:", ";"], themes_namespaceObject.mixins.ellipsis(), (0,themes_namespaceObject.pick)({
-  enterprise: (0,external_styled_components_namespaceObject.css)(["flex:0 1 auto;"])
-}), (0,themes_namespaceObject.pickVariant)('$disabled', {
-  "true": themes_namespaceObject.variables.contentColorDisabled,
-  "false": {
-    enterprise: function enterprise(_ref8) {
-      var $appearance = _ref8.$appearance,
-          $foregroundColor = _ref8.$foregroundColor;
-      return $foregroundColor || ($appearance === 'default' || $appearance === 'outline' ? themes_namespaceObject.variables.contentColorDefault : themes_namespaceObject.variables.gray30);
-    },
-    prisma: function prisma(_ref9) {
-      var $appearance = _ref9.$appearance,
-          $foregroundColor = _ref9.$foregroundColor;
-      return $foregroundColor || ($appearance === 'error' ? themes_namespaceObject.variables.contentColorInverted : themes_namespaceObject.variables.contentColorActive);
+    function I(e, r) {
+        if (r == null || r > e.length) r = e.length;
+        for (var a = 0, o = new Array(r); a < r; a++) {
+            o[a] = e[a];
+        }
+        return o;
     }
-  }
-}));
-var StyledRemove = external_styled_components_default().span.withConfig({
-  displayName: "ChipStyles__StyledRemove",
-  componentId: "sc-1sd3tsh-5"
-})(["", ";"], (0,themes_namespaceObject.pick)({
-  enterprise: (0,external_styled_components_namespaceObject.css)(["flex:0 0 auto;padding-left:", ";font-size:", ";color:", ";"], themes_namespaceObject.variables.spacingQuarter, (0,themes_namespaceObject.pick)({
-    compact: '9px',
-    comfortable: '10.5px'
-  }), (0,themes_namespaceObject.pickVariant)('$disabled', {
-    "true": themes_namespaceObject.variables.contentColorDisabled,
-    "false": {
-      enterprise: function enterprise(_ref10) {
-        var $foregroundColor = _ref10.$foregroundColor,
-            $appearance = _ref10.$appearance;
-        return $foregroundColor || ($appearance === 'default' || $appearance === 'outline' ? themes_namespaceObject.variables.textGray : themes_namespaceObject.variables.gray30);
-      }
+    function E(e, r) {
+        if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(e))) return;
+        var a = [];
+        var o = true;
+        var n = false;
+        var t = undefined;
+        try {
+            for (var i = e[Symbol.iterator](), l; !(o = (l = i.next()).done); o = true) {
+                a.push(l.value);
+                if (r && a.length === r) break;
+            }
+        } catch (e) {
+            n = true;
+            t = e;
+        } finally {
+            try {
+                if (!o && i["return"] != null) i["return"]();
+            } finally {
+                if (n) throw t;
+            }
+        }
+        return a;
     }
-  })),
-  prisma: (0,external_styled_components_namespaceObject.css)(["font-size:", ";display:flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:12px;font-size:9px;color:", ";"], (0,themes_namespaceObject.pick)({
-    compact: '9px',
-    comfortable: '10.5px'
-  }), function (_ref11) {
-    var $disabled = _ref11.$disabled,
-        $foregroundColor = _ref11.$foregroundColor;
-    return $disabled ? themes_namespaceObject.variables.contentColorDisabled : $foregroundColor || 'inherit';
-  })
-}));
-var StyledClickable = external_styled_components_default()(StyledBasic.withComponent((Clickable_default()))).withConfig({
-  displayName: "ChipStyles__StyledClickable",
-  componentId: "sc-1sd3tsh-6"
-})(["flex:0 1 auto;line-height:16px;cursor:pointer;&:focus{", ";}&:not([disabled]):hover{", ";}", ";"], (0,themes_namespaceObject.pick)({
-  enterprise: (0,external_styled_components_namespaceObject.css)(["box-shadow:", ";color:", ";"], themes_namespaceObject.variables.focusShadow, themes_namespaceObject.variables.linkColor),
-  prisma: (0,external_styled_components_namespaceObject.css)(["color:", ";", "{background-color:", ";box-shadow:0 0 0 3px ", ";}"], themes_namespaceObject.variables.contentColorActive,
-  /* sc-sel */
-  StyledRemove, themes_namespaceObject.variables.interactiveColorOverlayHover, themes_namespaceObject.variables.focusColor)
-}), (0,themes_namespaceObject.pick)({
-  enterprise: (0,external_styled_components_namespaceObject.css)(["background-color:", ";", "{color:", ";}"], (0,themes_namespaceObject.pickVariant)('$appearance', {
-    "default": {
-      dark: themes_namespaceObject.variables.gray30,
-      light: themes_namespaceObject.variables.gray96
-    },
-    info: themes_namespaceObject.variables.infoColorL20,
-    success: themes_namespaceObject.variables.successColorL20,
-    warning: themes_namespaceObject.variables.warningColorL20,
-    error: themes_namespaceObject.variables.errorColorL20,
-    custom: {
-      dark: themes_namespaceObject.variables.gray30,
-      light: themes_namespaceObject.variables.gray96
+    function q(e) {
+        if (Array.isArray(e)) return e;
     }
-  }),
-  /* sc-sel */
-  StyledRemove, function (_ref12) {
-    var $foregroundColor = _ref12.$foregroundColor;
-    return $foregroundColor || themes_namespaceObject.variables.linkColor;
-  }),
-  prisma: (0,external_styled_components_namespaceObject.css)(["color:", ";", "{background-color:", ";", ";}"], themes_namespaceObject.variables.contentColorActive,
-  /* sc-sel */
-  StyledRemove, themes_namespaceObject.variables.interactiveColorOverlayHover, function (_ref13) {
-    var $appearance = _ref13.$appearance;
-    return $appearance === 'error' && (0,external_styled_components_namespaceObject.css)(["color:", ";"], themes_namespaceObject.variables.contentColorInverted);
-  })
-}), (0,themes_namespaceObject.pick)({
-  prisma: (0,external_styled_components_namespaceObject.css)(["&:not([disabled]):active ", "{background-color:", ";}"],
-  /* sc-sel */
-  StyledRemove, themes_namespaceObject.variables.interactiveColorOverlayActive)
-}));
-
-;// CONCATENATED MODULE: ./src/Chip/Chip.tsx
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-
-
-
-
-
-
-
-
-
-var propTypes = {
-  appearance: external_prop_types_default().oneOf(['info', 'success', 'warning', 'error', 'outline']),
-  backgroundColor: (external_prop_types_default()).string,
-  children: (external_prop_types_default()).node.isRequired,
-  disabled: (external_prop_types_default()).bool,
-  elementRef: external_prop_types_default().oneOfType([(external_prop_types_default()).func, (external_prop_types_default()).object]),
-  foregroundColor: (external_prop_types_default()).string,
-  icon: (external_prop_types_default()).node,
-  onRequestRemove: (external_prop_types_default()).func,
-
-  /** Includes this value in `onRequestRemove` callbacks. */
-  value: (external_prop_types_default()).any
-};
-var defaultProps = {
-  disabled: false
-};
-
-function isInteractive(props) {
-  return !!props.onRequestRemove;
-}
-
-function getSharedProps(props) {
-  var appearance = props.appearance,
-      backgroundColor = props.backgroundColor,
-      disabled = props.disabled,
-      foregroundColor = props.foregroundColor,
-      icon = props.icon,
-      otherProps = _objectWithoutProperties(props, ["appearance", "backgroundColor", "disabled", "foregroundColor", "icon"]); // Validate that the color being rendered into the CSS is restricted to only values that are of CSS type <color>.
-
-
-  var $foregroundColor = foregroundColor && (0,color_namespaceObject.isCSSColor)(foregroundColor) ? foregroundColor : undefined;
-  var $backgroundColor = backgroundColor && (0,color_namespaceObject.isCSSColor)(backgroundColor) ? backgroundColor : undefined;
-  var sharedProps = {
-    'data-test': 'chip',
-    $appearance: appearance || ($backgroundColor ? 'custom' : 'default'),
-    $backgroundColor: $backgroundColor,
-    $foregroundColor: $foregroundColor,
-    disabled: disabled,
-    icon: icon
-  };
-  return [sharedProps, otherProps];
-}
-
-function ChipInteractive(props) {
-  var _getSharedProps = getSharedProps(props),
-      _getSharedProps2 = _slicedToArray(_getSharedProps, 2),
-      sharedProps = _getSharedProps2[0],
-      ownProps = _getSharedProps2[1];
-
-  var $appearance = sharedProps.$appearance,
-      $foregroundColor = sharedProps.$foregroundColor,
-      disabled = sharedProps.disabled,
-      icon = sharedProps.icon,
-      otherSharedProps = _objectWithoutProperties(sharedProps, ["$appearance", "$foregroundColor", "disabled", "icon"]);
-
-  var children = ownProps.children,
-      elementRef = ownProps.elementRef,
-      onRequestRemove = ownProps.onRequestRemove,
-      value = ownProps.value,
-      otherProps = _objectWithoutProperties(ownProps, ["children", "elementRef", "onRequestRemove", "value"]);
-
-  var _useSplunkTheme = (0,themes_namespaceObject.useSplunkTheme)(),
-      isEnterprise = _useSplunkTheme.isEnterprise;
-
-  var handleRemoveClick = (0,external_react_namespaceObject.useCallback)(function (e) {
-    onRequestRemove(e, {
-      value: value
-    });
-  }, [onRequestRemove, value]);
-  return /*#__PURE__*/external_react_default().createElement(StyledClickable, _extends({
-    $appearance: $appearance,
-    $disabled: disabled,
-    $foregroundColor: $foregroundColor,
-    "data-test-value": value,
-    disabled: disabled,
-    elementRef: elementRef,
-    onClick: handleRemoveClick
-  }, otherSharedProps, omit_default()(otherProps, Object.keys(propTypes))), /*#__PURE__*/external_react_default().createElement(StyledInner, {
-    $icon: !!icon,
-    $removable: true
-  }, icon && /*#__PURE__*/external_react_default().createElement(StyledIcon, {
-    $appearance: $appearance,
-    $disabled: disabled,
-    $foregroundColor: $foregroundColor
-  }, icon), /*#__PURE__*/external_react_default().createElement(StyledLabel, {
-    "data-test": "label",
-    $appearance: $appearance,
-    $disabled: disabled,
-    $foregroundColor: $foregroundColor
-  }, children), /*#__PURE__*/external_react_default().createElement(StyledRemove, {
-    $appearance: $appearance,
-    $disabled: disabled,
-    $foregroundColor: $foregroundColor
-  }, isEnterprise ? /*#__PURE__*/external_react_default().createElement((Close_default()), {
-    "data-test": "cross",
-    hideDefaultTooltip: true,
-    screenReaderText: (0,i18n_namespaceObject._)('Remove'),
-    size: 0.85
-  }) : /*#__PURE__*/external_react_default().createElement((Cross_default()), {
-    "aria-label": (0,i18n_namespaceObject._)('Remove'),
-    "data-test": "cross",
-    height: "20px",
-    width: "20px"
-  }))));
-}
-
-function ChipNonInteractive(props) {
-  var _getSharedProps3 = getSharedProps(props),
-      _getSharedProps4 = _slicedToArray(_getSharedProps3, 2),
-      sharedProps = _getSharedProps4[0],
-      ownProps = _getSharedProps4[1];
-
-  var $appearance = sharedProps.$appearance,
-      $foregroundColor = sharedProps.$foregroundColor,
-      disabled = sharedProps.disabled,
-      icon = sharedProps.icon,
-      otherSharedProps = _objectWithoutProperties(sharedProps, ["$appearance", "$foregroundColor", "disabled", "icon"]);
-
-  var children = ownProps.children,
-      elementRef = ownProps.elementRef,
-      otherProps = _objectWithoutProperties(ownProps, ["children", "elementRef"]);
-
-  return /*#__PURE__*/external_react_default().createElement(Styled, _extends({
-    $appearance: $appearance,
-    $disabled: disabled,
-    ref: elementRef
-  }, otherSharedProps, omit_default()(otherProps, Object.keys(propTypes))), /*#__PURE__*/external_react_default().createElement(StyledInner, {
-    $icon: !!icon,
-    $removable: false
-  }, icon && /*#__PURE__*/external_react_default().createElement(StyledIcon, {
-    $appearance: $appearance,
-    $disabled: disabled,
-    $foregroundColor: $foregroundColor
-  }, icon), /*#__PURE__*/external_react_default().createElement(StyledLabel, {
-    "data-test": "label",
-    $appearance: $appearance,
-    $disabled: disabled,
-    $foregroundColor: $foregroundColor
-  }, children)));
-}
-
-function Chip(props) {
-  // @docs-props-type ChipPropsBase
-  return isInteractive(props) ? /*#__PURE__*/external_react_default().createElement(ChipInteractive, props) : /*#__PURE__*/external_react_default().createElement(ChipNonInteractive, props);
-}
-
-Chip.propTypes = propTypes;
-Chip.defaultProps = defaultProps;
-/* harmony default export */ const Chip_Chip = (Chip);
-;// CONCATENATED MODULE: ./src/Chip/index.ts
-
-
-module.exports = __webpack_exports__;
-/******/ })()
-;
+    function A(e, r) {
+        if (e == null) return {};
+        var a = D(e, r);
+        var o, n;
+        if (Object.getOwnPropertySymbols) {
+            var t = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < t.length; n++) {
+                o = t[n];
+                if (r.indexOf(o) >= 0) continue;
+                if (!Object.prototype.propertyIsEnumerable.call(e, o)) continue;
+                a[o] = e[o];
+            }
+        }
+        return a;
+    }
+    function D(e, r) {
+        if (e == null) return {};
+        var a = {};
+        var o = Object.keys(e);
+        var n, t;
+        for (t = 0; t < o.length; t++) {
+            n = o[t];
+            if (r.indexOf(n) >= 0) continue;
+            a[n] = e[n];
+        }
+        return a;
+    }
+    var L = {
+        appearance: l().oneOf([ "info", "success", "warning", "error", "outline" ]),
+        backgroundColor: l().string,
+        children: l().node.isRequired,
+        disabled: l().bool,
+        elementRef: l().oneOfType([ l().func, l().object ]),
+        foregroundColor: l().string,
+        icon: l().node,
+        onRequestRemove: l().func,
+        /** Includes this value in `onRequestRemove` callbacks. */
+        value: l().any
+    };
+    var z = {
+        disabled: false
+    };
+    function N(e) {
+        return !!e.onRequestRemove;
+    }
+    function P(e) {
+        var r = e.appearance, a = e.backgroundColor, o = e.disabled, n = e.foregroundColor, t = e.icon, i = A(e, [ "appearance", "backgroundColor", "disabled", "foregroundColor", "icon" ]);
+ // Validate that the color being rendered into the CSS is restricted to only values that are of CSS type <color>.
+                var l = n && (0, f.isCSSColor)(n) ? n : undefined;
+        var s = a && (0, f.isCSSColor)(a) ? a : undefined;
+        var c = {
+            "data-test": "chip",
+            $appearance: r || (s ? "custom" : "default"),
+            $backgroundColor: s,
+            $foregroundColor: l,
+            disabled: o,
+            icon: t
+        };
+        return [ c, i ];
+    }
+    function T(e) {
+        var r = P(e), n = _(r, 2), i = n[0], l = n[1];
+        var s = i.$appearance, p = i.$foregroundColor, f = i.disabled, b = i.icon, g = A(i, [ "$appearance", "$foregroundColor", "disabled", "icon" ]);
+        var m = l.children, h = l.elementRef, C = l.onRequestRemove, y = l.value, R = A(l, [ "children", "elementRef", "onRequestRemove", "value" ]);
+        var j = (0, v.useSplunkTheme)(), I = j.isEnterprise;
+        var E = (0, a.useCallback)((function(e) {
+            C(e, {
+                value: y
+            });
+        }), [ C, y ]);
+        
+        return o().createElement(w, O({
+            $appearance: s,
+            $disabled: f,
+            $foregroundColor: p,
+            "data-test-value": y,
+            disabled: f,
+            elementRef: h,
+            onClick: E
+        }, g, t()(R, Object.keys(L))),  o().createElement(x, {
+            $icon: !!b,
+            $removable: true
+        }, b &&  o().createElement($, {
+            $appearance: s,
+            $disabled: f,
+            $foregroundColor: p
+        }, b),  o().createElement(k, {
+            "data-test": "label",
+            $appearance: s,
+            $disabled: f,
+            $foregroundColor: p
+        }, m),  o().createElement(S, {
+            $appearance: s,
+            $disabled: f,
+            $foregroundColor: p
+        }, I ?  o().createElement(u(), {
+            "data-test": "cross",
+            hideDefaultTooltip: true,
+            screenReaderText: (0, d._)("Remove"),
+            size: .85
+        }) :  o().createElement(c(), {
+            "aria-label": (0, d._)("Remove"),
+            "data-test": "cross",
+            height: "20px",
+            width: "20px"
+        }))));
+    }
+    function H(e) {
+        var r = P(e), a = _(r, 2), n = a[0], i = a[1];
+        var l = n.$appearance, s = n.$foregroundColor, c = n.disabled, p = n.icon, u = A(n, [ "$appearance", "$foregroundColor", "disabled", "icon" ]);
+        var d = i.children, f = i.elementRef, v = A(i, [ "children", "elementRef" ]);
+        
+        return o().createElement(y, O({
+            $appearance: l,
+            $disabled: c,
+            ref: f
+        }, u, t()(v, Object.keys(L))),  o().createElement(x, {
+            $icon: !!p,
+            $removable: false
+        }, p &&  o().createElement($, {
+            $appearance: l,
+            $disabled: c,
+            $foregroundColor: s
+        }, p),  o().createElement(k, {
+            "data-test": "label",
+            $appearance: l,
+            $disabled: c,
+            $foregroundColor: s
+        }, d)));
+    }
+    function B(e) {
+        // @docs-props-type ChipPropsBase
+        return N(e) ?  o().createElement(T, e) :  o().createElement(H, e);
+    }
+    B.propTypes = L;
+    B.defaultProps = z;
+    /* harmony default export */    const V = B;
+    // CONCATENATED MODULE: ./src/Chip/index.ts
+    module.exports = r;
+    /******/})();