@splunk/react-ui 4.4.0 → 4.5.1

package/Card.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 108);
+/******/ 	return __webpack_require__(__webpack_require__.s = 113);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 108:
+/***/ 113:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -236,11 +236,11 @@ Footer.propTypes = Footer_propTypes;
 var i18n_ = __webpack_require__(5);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Anchor"
-var Anchor_ = __webpack_require__(73);
+var Anchor_ = __webpack_require__(75);
 var Anchor_default = /*#__PURE__*/__webpack_require__.n(Anchor_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Button"
-var Button_ = __webpack_require__(16);
+var Button_ = __webpack_require__(17);
 var Button_default = /*#__PURE__*/__webpack_require__.n(Button_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Dropdown"
@@ -252,7 +252,7 @@ var useSplunkTheme_ = __webpack_require__(38);
 var useSplunkTheme_default = /*#__PURE__*/__webpack_require__.n(useSplunkTheme_);
 
 // EXTERNAL MODULE: ./src/icons/MoreVertical.tsx
-var MoreVertical = __webpack_require__(54);
+var MoreVertical = __webpack_require__(56);
 
 // CONCATENATED MODULE: ./src/Card/HeaderStyles.ts
 
@@ -381,7 +381,7 @@ function Header(_ref) {
 Header.propTypes = Header_propTypes;
 /* harmony default export */ var Card_Header = (Header);
 // EXTERNAL MODULE: external "@splunk/react-ui/Clickable"
-var Clickable_ = __webpack_require__(11);
+var Clickable_ = __webpack_require__(12);
 var Clickable_default = /*#__PURE__*/__webpack_require__.n(Clickable_);
 
 // CONCATENATED MODULE: ./src/Card/CardStyles.ts
@@ -433,6 +433,9 @@ var StyledFirefoxFlexHack = external_styled_components_default.a.div.withConfig(
   prisma: Object(external_styled_components_["css"])(["border-radius:", ";"], themes_["variables"].borderRadius)
 }));
 
+// EXTERNAL MODULE: ./src/CardLayout/CardLayoutContext.tsx
+var CardLayoutContext = __webpack_require__(58);
+
 // CONCATENATED MODULE: ./src/Card/Card.tsx
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
@@ -486,6 +489,9 @@ function Card_objectWithoutPropertiesLoose(source, excluded) { if (source == nul
 
 
 
+
+/** @public */
+
 var Card_propTypes = {
   children: external_prop_types_default.a.node,
   elementRef: external_prop_types_default.a.oneOfType([external_prop_types_default.a.func, external_prop_types_default.a.object]),
@@ -515,19 +521,23 @@ function isClickable(props) {
   return !!props.onClick || !!props.to;
 }
 
-function getSharedProps(props) {
-  var margin = props.margin,
-      maxWidth = props.maxWidth,
-      minWidth = props.minWidth,
+function getSharedProps(props, context) {
+  var minWidthProp = props.minWidth,
+      maxWidthProp = props.maxWidth,
+      marginProp = props.margin,
+      style = props.style,
       selected = props.selected,
       showBorder = props.showBorder,
-      style = props.style,
-      otherProps = Card_objectWithoutProperties(props, ["margin", "maxWidth", "minWidth", "selected", "showBorder", "style"]);
+      otherProps = Card_objectWithoutProperties(props, ["minWidth", "maxWidth", "margin", "style", "selected", "showBorder"]);
+
+  var minWidthContext = context.minWidth,
+      maxWidthContext = context.maxWidth,
+      marginContext = context.margin;
 
   var cardStyle = _objectSpread({
-    minWidth: minWidth,
-    maxWidth: maxWidth,
-    margin: margin
+    minWidth: minWidthProp || minWidthContext,
+    maxWidth: maxWidthProp || maxWidthContext,
+    margin: marginProp || marginContext
   }, style);
 
   var sharedProps = {
@@ -574,7 +584,7 @@ var Card_Card = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       if (isClickable(this.props)) {
-        var _getSharedProps = getSharedProps(this.props),
+        var _getSharedProps = getSharedProps(this.props, this.context),
             _getSharedProps2 = _slicedToArray(_getSharedProps, 2),
             _sharedProps = _getSharedProps2[0],
             _ownProps = _getSharedProps2[1];
@@ -602,7 +612,7 @@ var Card_Card = /*#__PURE__*/function (_Component) {
         }), /*#__PURE__*/external_react_default.a.createElement(StyledFirefoxFlexHack, null, _children));
       }
 
-      var _getSharedProps3 = getSharedProps(this.props),
+      var _getSharedProps3 = getSharedProps(this.props, this.context),
           _getSharedProps4 = _slicedToArray(_getSharedProps3, 2),
           sharedProps = _getSharedProps4[0],
           ownProps = _getSharedProps4[1];
@@ -629,6 +639,8 @@ _defineProperty(Card_Card, "propTypes", Card_propTypes);
 
 _defineProperty(Card_Card, "defaultProps", defaultProps);
 
+_defineProperty(Card_Card, "contextType", CardLayoutContext["a" /* default */]);
+
 _defineProperty(Card_Card, "Header", Card_Header);
 
 _defineProperty(Card_Card, "Body", Card_Body);
@@ -643,14 +655,14 @@ _defineProperty(Card_Card, "Footer", Card_Footer);
 
 /***/ }),
 
-/***/ 11:
+/***/ 12:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Clickable");
 
 /***/ }),
 
-/***/ 16:
+/***/ 17:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Button");
@@ -692,14 +704,14 @@ module.exports = require("@splunk/ui-utils/i18n");
 
 /***/ }),
 
-/***/ 54:
+/***/ 56:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return MoreVertical; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _splunk_react_icons_MoreVertical__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(55);
+/* harmony import */ var _splunk_react_icons_MoreVertical__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(57);
 /* harmony import */ var _splunk_react_icons_MoreVertical__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_icons_MoreVertical__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _ThemedIcon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
 /* harmony import */ var _SVG__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6);
@@ -730,13 +742,27 @@ function MoreVertical(props) {
 
 /***/ }),
 
-/***/ 55:
+/***/ 57:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/MoreVertical");
 
 /***/ }),
 
+/***/ 58:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* unused harmony export CardLayoutContext */
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+
+var CardLayoutContext = /*#__PURE__*/Object(react__WEBPACK_IMPORTED_MODULE_0__["createContext"])({});
+CardLayoutContext.displayName = 'CardLayout';
+/* harmony default export */ __webpack_exports__["a"] = (CardLayoutContext);
+
+/***/ }),
+
 /***/ 6:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
@@ -880,7 +906,7 @@ Icon.defaultProps = defaultProps;
 
 /***/ }),
 
-/***/ 73:
+/***/ 75:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Anchor");

package/CardLayout.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 157);
+/******/ 	return __webpack_require__(__webpack_require__.s = 146);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 157:
+/***/ 146:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -140,6 +140,9 @@ var Styled = external_styled_components_default.a.div.withConfig({
   right: Object(external_styled_components_["css"])(["justify-content:flex-end;"])
 }));
 
+// EXTERNAL MODULE: ./src/CardLayout/CardLayoutContext.tsx
+var CardLayoutContext = __webpack_require__(58);
+
 // CONCATENATED MODULE: ./src/CardLayout/CardLayout.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); }
 
@@ -156,6 +159,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 
 
+
 var propTypes = {
   alignCards: external_prop_types_default.a.oneOf(['left', 'center', 'right']),
   cardMaxWidth: external_prop_types_default.a.oneOfType([external_prop_types_default.a.number, external_prop_types_default.a.string]),
@@ -182,13 +186,10 @@ function CardLayout(_ref) {
       wrapCards = _ref$wrapCards === void 0 ? true : _ref$wrapCards,
       otherProps = _objectWithoutProperties(_ref, ["alignCards", "cardMaxWidth", "cardMinWidth", "cardWidth", "children", "elementRef", "gutterSize", "style", "wrapCards"]);
 
-  var clonedChildren = external_react_["Children"].toArray(children).filter(external_react_["isValidElement"]).map(function (child) {
-    return /*#__PURE__*/Object(external_react_["cloneElement"])(child, {
-      minWidth: cardWidth || cardMinWidth || undefined,
-      maxWidth: cardWidth || cardMaxWidth || undefined,
-      margin: gutterSize / 2
-    });
-  });
+  var validChildren = external_react_["Children"].toArray(children).filter(external_react_["isValidElement"]);
+  var minWidth = cardWidth || cardMinWidth || undefined;
+  var maxWidth = cardWidth || cardMaxWidth || undefined;
+  var margin = gutterSize / 2;
   return /*#__PURE__*/external_react_default.a.createElement(Styled, _extends({
     ref: elementRef,
     style: _objectSpread({
@@ -197,7 +198,13 @@ function CardLayout(_ref) {
     "data-test": "card-layout",
     $alignCards: alignCards,
     $wrapCards: wrapCards
-  }, otherProps), clonedChildren);
+  }, otherProps), /*#__PURE__*/external_react_default.a.createElement(CardLayoutContext["a" /* default */].Provider, {
+    value: {
+      minWidth: minWidth,
+      maxWidth: maxWidth,
+      margin: margin
+    }
+  }, validChildren));
 }
 
 CardLayout.propTypes = propTypes;
@@ -219,6 +226,20 @@ module.exports = require("react");
 
 module.exports = require("styled-components");
 
+/***/ }),
+
+/***/ 58:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* unused harmony export CardLayoutContext */
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+
+var CardLayoutContext = /*#__PURE__*/Object(react__WEBPACK_IMPORTED_MODULE_0__["createContext"])({});
+CardLayoutContext.displayName = 'CardLayout';
+/* harmony default export */ __webpack_exports__["a"] = (CardLayoutContext);
+
 /***/ })
 
 /******/ });

package/Chip.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 160);
+/******/ 	return __webpack_require__(__webpack_require__.s = 147);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,14 +101,14 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 11:
+/***/ 12:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Clickable");
 
 /***/ }),
 
-/***/ 160:
+/***/ 147:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -129,7 +129,7 @@ var color_ = __webpack_require__(33);
 var i18n_ = __webpack_require__(5);
 
 // EXTERNAL MODULE: external "lodash/omit"
-var omit_ = __webpack_require__(32);
+var omit_ = __webpack_require__(42);
 var omit_default = /*#__PURE__*/__webpack_require__.n(omit_);
 
 // EXTERNAL MODULE: external "prop-types"
@@ -137,14 +137,14 @@ var external_prop_types_ = __webpack_require__(1);
 var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
 // EXTERNAL MODULE: ./src/icons/CrossMark.tsx
-var CrossMark = __webpack_require__(21);
+var CrossMark = __webpack_require__(22);
 
 // EXTERNAL MODULE: external "styled-components"
 var external_styled_components_ = __webpack_require__(3);
 var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Clickable"
-var Clickable_ = __webpack_require__(11);
+var Clickable_ = __webpack_require__(12);
 var Clickable_default = /*#__PURE__*/__webpack_require__.n(Clickable_);
 
 // EXTERNAL MODULE: external "@splunk/themes"
@@ -245,48 +245,69 @@ var Styled = external_styled_components_default()(StyledBasic).withConfig({
 var StyledInner = external_styled_components_default.a.div.withConfig({
   displayName: "ChipStyles__StyledInner",
   componentId: "sc-1sd3tsh-2"
-})(["display:flex;max-width:100%;"]);
+})(["", ";"], Object(themes_["pick"])({
+  enterprise: Object(external_styled_components_["css"])(["display:flex;max-width:100%;"]),
+  prisma: Object(external_styled_components_["css"])(["display:grid;max-width:100%;height:16px;column-gap:", ";", ";"], Object(themes_["pick"])({
+    prisma: {
+      compact: themes_["variables"].spacingXSmall,
+      comfortable: themes_["variables"].spacingSmall
+    }
+  }), function (_ref5) {
+    var $icon = _ref5.$icon,
+        $removable = _ref5.$removable;
+    var gridColumns = Object(external_styled_components_["css"])(["grid-template-columns:1fr;"]);
+
+    if ($icon && $removable) {
+      gridColumns = Object(external_styled_components_["css"])(["grid-template-columns:0fr 1fr 0fr;"]);
+    } else if ($icon) {
+      gridColumns = Object(external_styled_components_["css"])(["grid-template-columns:0fr 1fr;"]);
+    } else if ($removable) {
+      gridColumns = Object(external_styled_components_["css"])(["grid-template-columns:1fr 0fr;"]);
+    }
+
+    return gridColumns;
+  })
+}));
 var StyledIcon = external_styled_components_default.a.div.withConfig({
   displayName: "ChipStyles__StyledIcon",
   componentId: "sc-1sd3tsh-3"
-})(["flex:0 0 auto;margin-right:", ";color:", ";", ";"], Object(themes_["pick"])({
-  enterprise: '3px',
+})(["", ";margin-right:", ";color:", ";"], Object(themes_["pick"])({
   prisma: {
-    compact: themes_["variables"].spacingXSmall,
-    comfortable: themes_["variables"].spacingSmall
-  }
+    compact: Object(external_styled_components_["css"])(["font-size:14px;display:inline-flex;svg{height:16px;vertical-align:baseline;}"]),
+    comfortable: Object(external_styled_components_["css"])(["font-size:18px;display:inline-flex;align-self:center;svg{height:16px;vertical-align:baseline;}"])
+  },
+  enterprise: Object(external_styled_components_["css"])(["flex:0 0 auto;"])
+}), Object(themes_["pick"])({
+  enterprise: '3px'
 }), Object(themes_["pickVariant"])('$disabled', {
   "true": themes_["variables"].contentColorDisabled,
   "false": {
-    enterprise: function enterprise(_ref5) {
-      var $foregroundColor = _ref5.$foregroundColor;
+    enterprise: function enterprise(_ref6) {
+      var $foregroundColor = _ref6.$foregroundColor;
       return $foregroundColor || themes_["variables"].contentColorDefault;
     },
-    prisma: function prisma(_ref6) {
-      var $foregroundColor = _ref6.$foregroundColor,
-          $appearance = _ref6.$appearance;
+    prisma: function prisma(_ref7) {
+      var $foregroundColor = _ref7.$foregroundColor,
+          $appearance = _ref7.$appearance;
       return $foregroundColor || ($appearance === 'error' ? themes_["variables"].contentColorInverted : themes_["variables"].contentColorDefault);
     }
   }
-}), Object(themes_["pick"])({
-  prisma: {
-    compact: Object(external_styled_components_["css"])(["font-size:14px;display:flex;align-items:center;"]),
-    comfortable: Object(external_styled_components_["css"])(["font-size:18px;display:flex;align-items:center;"])
-  }
 }));
 var StyledLabel = external_styled_components_default.a.div.withConfig({
   displayName: "ChipStyles__StyledLabel",
   componentId: "sc-1sd3tsh-4"
-})(["", " flex:0 1 auto;color:", ";"], themes_["mixins"].ellipsis(), Object(themes_["pickVariant"])('$disabled', {
+})(["", " ", ";color:", ";"], themes_["mixins"].ellipsis(), Object(themes_["pick"])({
+  enterprise: Object(external_styled_components_["css"])(["flex:0 1 auto;"])
+}), Object(themes_["pickVariant"])('$disabled', {
   "true": themes_["variables"].contentColorDisabled,
   "false": {
-    enterprise: function enterprise(_ref7) {
-      var $foregroundColor = _ref7.$foregroundColor;
+    enterprise: function enterprise(_ref8) {
+      var $foregroundColor = _ref8.$foregroundColor;
       return $foregroundColor || themes_["variables"].contentColorDefault;
     },
-    prisma: function prisma(_ref8) {
-      var $foregroundColor = _ref8.$foregroundColor,
-          $appearance = _ref8.$appearance;
+    prisma: function prisma(_ref9) {
+      var $foregroundColor = _ref9.$foregroundColor,
+          $appearance = _ref9.$appearance;
       return $foregroundColor || ($appearance === 'error' ? themes_["variables"].contentColorInverted : themes_["variables"].contentColorActive);
     }
   }
@@ -294,24 +315,21 @@ var StyledLabel = external_styled_components_default.a.div.withConfig({
 var StyledRemove = external_styled_components_default.a.span.withConfig({
   displayName: "ChipStyles__StyledRemove",
   componentId: "sc-1sd3tsh-5"
-})(["flex:0 0 auto;", ";"], Object(themes_["pick"])({
-  enterprise: Object(external_styled_components_["css"])(["padding-left:", ";font-size:", ";color:", ";"], themes_["variables"].spacingQuarter, Object(themes_["pick"])({
+})(["", ";"], Object(themes_["pick"])({
+  enterprise: Object(external_styled_components_["css"])(["flex:0 0 auto;padding-left:", ";font-size:", ";color:", ";"], themes_["variables"].spacingQuarter, Object(themes_["pick"])({
     compact: '9px',
     comfortable: '10.5px'
-  }), function (_ref9) {
-    var $disabled = _ref9.$disabled,
-        $foregroundColor = _ref9.$foregroundColor;
+  }), function (_ref10) {
+    var $disabled = _ref10.$disabled,
+        $foregroundColor = _ref10.$foregroundColor;
     return $disabled ? themes_["variables"].contentColorDisabled : $foregroundColor || themes_["variables"].textGray;
   }),
-  prisma: Object(external_styled_components_["css"])(["font-size:", ";display:flex;align-items:center;justify-content:center;margin-left:", ";width:16px;height:16px;border-radius:12px;font-size:9px;color:", ";"], Object(themes_["pick"])({
+  prisma: Object(external_styled_components_["css"])(["font-size:", ";display:flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:12px;font-size:9px;color:", ";"], Object(themes_["pick"])({
     compact: '9px',
     comfortable: '10.5px'
-  }), Object(themes_["pick"])({
-    compact: themes_["variables"].spacingXSmall,
-    comfortable: themes_["variables"].spacingSmall
-  }), function (_ref10) {
-    var $disabled = _ref10.$disabled,
-        $foregroundColor = _ref10.$foregroundColor;
+  }), function (_ref11) {
+    var $disabled = _ref11.$disabled,
+        $foregroundColor = _ref11.$foregroundColor;
     return $disabled ? themes_["variables"].contentColorDisabled : $foregroundColor || 'inherit';
   })
 }));
@@ -339,14 +357,14 @@ var StyledClickable = external_styled_components_default()(StyledBasic.withCompo
     }
   }),
   /* sc-sel */
-  StyledRemove, function (_ref11) {
-    var $foregroundColor = _ref11.$foregroundColor;
+  StyledRemove, function (_ref12) {
+    var $foregroundColor = _ref12.$foregroundColor;
     return $foregroundColor || themes_["variables"].linkColor;
   }),
   prisma: Object(external_styled_components_["css"])(["color:", ";", "{background-color:", ";", ";}"], themes_["variables"].contentColorActive,
   /* sc-sel */
-  StyledRemove, themes_["variables"].interactiveColorOverlayHover, function (_ref12) {
-    var $appearance = _ref12.$appearance;
+  StyledRemove, themes_["variables"].interactiveColorOverlayHover, function (_ref13) {
+    var $appearance = _ref13.$appearance;
     return $appearance === 'error' && Object(external_styled_components_["css"])(["color:", ";"], themes_["variables"].contentColorInverted);
   })
 }), Object(themes_["pick"])({
@@ -455,7 +473,10 @@ function ChipInteractive(props) {
     disabled: disabled,
     elementRef: elementRef,
     onClick: handleRemoveClick
-  }, otherSharedProps, omit_default()(otherProps, Object.keys(propTypes))), /*#__PURE__*/external_react_default.a.createElement(StyledInner, null, icon && /*#__PURE__*/external_react_default.a.createElement(StyledIcon, {
+  }, otherSharedProps, omit_default()(otherProps, Object.keys(propTypes))), /*#__PURE__*/external_react_default.a.createElement(StyledInner, {
+    $icon: !!icon,
+    $removable: true
+  }, icon && /*#__PURE__*/external_react_default.a.createElement(StyledIcon, {
     $appearance: $appearance,
     $disabled: disabled,
     $foregroundColor: $foregroundColor
@@ -495,7 +516,10 @@ function ChipNonInteractive(props) {
     $appearance: $appearance,
     $disabled: disabled,
     ref: elementRef
-  }, otherSharedProps, omit_default()(otherProps, Object.keys(propTypes))), /*#__PURE__*/external_react_default.a.createElement(StyledInner, null, icon && /*#__PURE__*/external_react_default.a.createElement(StyledIcon, {
+  }, otherSharedProps, omit_default()(otherProps, Object.keys(propTypes))), /*#__PURE__*/external_react_default.a.createElement(StyledInner, {
+    $icon: !!icon,
+    $removable: false
+  }, icon && /*#__PURE__*/external_react_default.a.createElement(StyledIcon, {
     $appearance: $appearance,
     $disabled: disabled,
     $foregroundColor: $foregroundColor
@@ -528,14 +552,14 @@ module.exports = require("react");
 
 /***/ }),
 
-/***/ 21:
+/***/ 22:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return CrossMark; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _splunk_react_icons_Close__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(25);
+/* harmony import */ var _splunk_react_icons_Close__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(26);
 /* harmony import */ var _splunk_react_icons_Close__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_icons_Close__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _ThemedIcon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
 /* harmony import */ var _SVG__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6);
@@ -578,7 +602,7 @@ function CrossMark(props) {
 
 /***/ }),
 
-/***/ 25:
+/***/ 26:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/Close");
@@ -592,17 +616,17 @@ module.exports = require("styled-components");
 
 /***/ }),
 
-/***/ 32:
+/***/ 33:
 /***/ (function(module, exports) {
 
-module.exports = require("lodash/omit");
+module.exports = require("@splunk/ui-utils/color");
 
 /***/ }),
 
-/***/ 33:
+/***/ 42:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/ui-utils/color");
+module.exports = require("lodash/omit");
 
 /***/ }),
 

package/Clickable.js

@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 12:
+/***/ 11:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -197,7 +197,7 @@ function NavigationProvider(_ref) {
 NavigationProvider.propTypes = propTypes;
 
 // EXTERNAL MODULE: ./src/utils/updateReactRef.ts
-var updateReactRef = __webpack_require__(12);
+var updateReactRef = __webpack_require__(11);
 
 // CONCATENATED MODULE: ./src/Clickable/Clickable.tsx
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

package/CloseButton.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 154);
+/******/ 	return __webpack_require__(__webpack_require__.s = 148);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 154:
+/***/ 148:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -123,7 +123,7 @@ var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_pr
 var i18n_ = __webpack_require__(5);
 
 // EXTERNAL MODULE: ./src/icons/CrossMark.tsx
-var CrossMark = __webpack_require__(21);
+var CrossMark = __webpack_require__(22);
 
 // EXTERNAL MODULE: external "styled-components"
 var external_styled_components_ = __webpack_require__(3);
@@ -194,14 +194,14 @@ module.exports = require("react");
 
 /***/ }),
 
-/***/ 21:
+/***/ 22:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return CrossMark; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _splunk_react_icons_Close__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(25);
+/* harmony import */ var _splunk_react_icons_Close__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(26);
 /* harmony import */ var _splunk_react_icons_Close__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_icons_Close__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _ThemedIcon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
 /* harmony import */ var _SVG__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6);
@@ -244,7 +244,7 @@ function CrossMark(props) {
 
 /***/ }),
 
-/***/ 25:
+/***/ 26:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/Close");

package/Code.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 143);
+/******/ 	return __webpack_require__(__webpack_require__.s = 149);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 143:
+/***/ 149:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -123,7 +123,7 @@ var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_pr
 var external_lodash_ = __webpack_require__(4);
 
 // EXTERNAL MODULE: ./src/Code/prism/prism.empty
-var prism_empty = __webpack_require__(69);
+var prism_empty = __webpack_require__(72);
 var prism_empty_default = /*#__PURE__*/__webpack_require__.n(prism_empty);
 
 // EXTERNAL MODULE: external "styled-components"
@@ -377,7 +377,7 @@ module.exports = require("lodash");
 
 /***/ }),
 
-/***/ 69:
+/***/ 72:
 /***/ (function(module, exports, __webpack_require__) {