@splunk/react-ui 4.5.3 → 4.8.0

package/Card.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 113);
+/******/ 	return __webpack_require__(__webpack_require__.s = 120);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,14 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 113:
+/***/ 11:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/Clickable");
+
+/***/ }),
+
+/***/ 120:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -236,7 +243,7 @@ Footer.propTypes = Footer_propTypes;
 var i18n_ = __webpack_require__(5);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Anchor"
-var Anchor_ = __webpack_require__(75);
+var Anchor_ = __webpack_require__(84);
 var Anchor_default = /*#__PURE__*/__webpack_require__.n(Anchor_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Button"
@@ -252,7 +259,7 @@ var useSplunkTheme_ = __webpack_require__(38);
 var useSplunkTheme_default = /*#__PURE__*/__webpack_require__.n(useSplunkTheme_);
 
 // EXTERNAL MODULE: ./src/icons/MoreVertical.tsx
-var MoreVertical = __webpack_require__(56);
+var MoreVertical = __webpack_require__(61);
 
 // CONCATENATED MODULE: ./src/Card/HeaderStyles.ts
 
@@ -381,19 +388,18 @@ 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__(12);
+var Clickable_ = __webpack_require__(11);
 var Clickable_default = /*#__PURE__*/__webpack_require__.n(Clickable_);
 
 // CONCATENATED MODULE: ./src/Card/CardStyles.ts
 
 
 
-
 var cardTransitionTime = '0.2s';
 var Styled = external_styled_components_default.a.div.withConfig({
   displayName: "CardStyles__Styled",
   componentId: "ola3x0-0"
-})(["", ";flex-direction:column;align-items:stretch;min-width:100px;flex:1;vertical-align:top;", " transition:height ", ",width ", ",min-width ", ",max-width ", ",margin ", ",box-shadow ", ",border-color ", ";", " &[data-clickable='true']{cursor:pointer;", " &:hover{", "}&:focus{", "}}", ""], themes_["mixins"].reset('inline-flex'), Object(themes_["pick"])({
+})(["", ";flex-direction:column;align-items:stretch;min-width:100px;flex:1;vertical-align:top;", " transition:height ", ",width ", ",min-width ", ",max-width ", ",margin ", ",box-shadow ", ",border-color ", ";", " &[data-clickable='true']{cursor:pointer;", " &:hover{", "}&:focus{", "}}"], themes_["mixins"].reset('inline-flex'), Object(themes_["pick"])({
   enterprise: Object(external_styled_components_["css"])(["background-color:", ";border:1px solid transparent;"], themes_["variables"].backgroundColor),
   prisma: Object(external_styled_components_["css"])(["background-color:", ";border-radius:", ";box-shadow:", ";"], themes_["variables"].backgroundColorSection, themes_["variables"].borderRadius, themes_["variables"].embossShadow)
 }), cardTransitionTime, cardTransitionTime, cardTransitionTime, cardTransitionTime, cardTransitionTime, cardTransitionTime, cardTransitionTime, function (_ref) {
@@ -413,10 +419,7 @@ var Styled = external_styled_components_default.a.div.withConfig({
 }), Object(themes_["pick"])({
   enterprise: Object(external_styled_components_["css"])(["box-shadow:", ";"], themes_["variables"].focusShadow),
   prisma: Object(external_styled_components_["css"])(["box-shadow:", ";background-color:", ";"], themes_["variables"].embossShadow, themes_["mixins"].overlayColors(themes_["variables"].backgroundColorSection, themes_["variables"].interactiveColorOverlayHover))
-}), function (_ref3) {
-  var rendersAsButton = _ref3.rendersAsButton;
-  return rendersAsButton && Object(external_styled_components_["css"])(["& ", "{flex-basis:0;}"], StyledBox);
-});
+}));
 var StyledClickable = Styled.withComponent(Clickable_default.a);
 /* A child element we add to <button>s to make flexbox work.
    Without this wrapper element, child elements won't flex
@@ -434,7 +437,7 @@ var StyledFirefoxFlexHack = external_styled_components_default.a.div.withConfig(
 }));
 
 // EXTERNAL MODULE: ./src/CardLayout/CardLayoutContext.tsx
-var CardLayoutContext = __webpack_require__(58);
+var CardLayoutContext = __webpack_require__(63);
 
 // 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); }
@@ -607,7 +610,6 @@ var Card_Card = /*#__PURE__*/function (_Component) {
         }, _sharedProps, _otherProps, {
           onClick: onClick ? this.handleCardClick : undefined,
           openInNewContext: openInNewContext,
-          rendersAsButton: onClick && !to,
           to: to || undefined
         }), /*#__PURE__*/external_react_default.a.createElement(StyledFirefoxFlexHack, null, _children));
       }
@@ -653,13 +655,6 @@ _defineProperty(Card_Card, "Footer", Card_Footer);
 
 
 
-/***/ }),
-
-/***/ 12:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-ui/Clickable");
-
 /***/ }),
 
 /***/ 17:
@@ -704,14 +699,39 @@ module.exports = require("@splunk/ui-utils/i18n");
 
 /***/ }),
 
-/***/ 56:
+/***/ 6:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return SVG; });
+/* 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 styled_components__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_1__);
+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); }
+
+
+
+var Styled = styled_components__WEBPACK_IMPORTED_MODULE_1___default.a.svg.withConfig({
+  displayName: "SVG__Styled",
+  componentId: "sc-1bz0ryh-0"
+})(["flex:0 0 auto;"]);
+function SVG(props) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(Styled, _extends({
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props));
+}
+
+/***/ }),
+
+/***/ 61:
 /***/ (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__(57);
+/* harmony import */ var _splunk_react_icons_MoreVertical__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(62);
 /* 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);
@@ -742,14 +762,14 @@ function MoreVertical(props) {
 
 /***/ }),
 
-/***/ 57:
+/***/ 62:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/MoreVertical");
 
 /***/ }),
 
-/***/ 58:
+/***/ 63:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -763,31 +783,6 @@ CardLayoutContext.displayName = 'CardLayout';
 
 /***/ }),
 
-/***/ 6:
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return SVG; });
-/* 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 styled_components__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
-/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_1__);
-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); }
-
-
-
-var Styled = styled_components__WEBPACK_IMPORTED_MODULE_1___default.a.svg.withConfig({
-  displayName: "SVG__Styled",
-  componentId: "sc-1bz0ryh-0"
-})(["flex:0 0 auto;"]);
-function SVG(props) {
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(Styled, _extends({
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props));
-}
-
-/***/ }),
-
 /***/ 7:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
@@ -906,17 +901,17 @@ Icon.defaultProps = defaultProps;
 
 /***/ }),
 
-/***/ 75:
+/***/ 8:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-ui/Anchor");
+module.exports = require("@splunk/react-ui/Box");
 
 /***/ }),
 
-/***/ 8:
+/***/ 84:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-ui/Box");
+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 = 146);
+/******/ 	return __webpack_require__(__webpack_require__.s = 153);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 146:
+/***/ 153:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -141,7 +141,7 @@ var Styled = external_styled_components_default.a.div.withConfig({
 }));
 
 // EXTERNAL MODULE: ./src/CardLayout/CardLayoutContext.tsx
-var CardLayoutContext = __webpack_require__(58);
+var CardLayoutContext = __webpack_require__(63);
 
 // 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); }
@@ -228,7 +228,7 @@ module.exports = require("styled-components");
 
 /***/ }),
 
-/***/ 58:
+/***/ 63:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";

package/Chip.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 147);
+/******/ 	return __webpack_require__(__webpack_require__.s = 154);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,14 +101,14 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 12:
+/***/ 11:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Clickable");
 
 /***/ }),
 
-/***/ 147:
+/***/ 154:
 /***/ (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__(42);
+var omit_ = __webpack_require__(43);
 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__(22);
+var CrossMark = __webpack_require__(20);
 
 // 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__(12);
+var Clickable_ = __webpack_require__(11);
 var Clickable_default = /*#__PURE__*/__webpack_require__.n(Clickable_);
 
 // EXTERNAL MODULE: external "@splunk/themes"
@@ -552,14 +552,14 @@ module.exports = require("react");
 
 /***/ }),
 
-/***/ 22:
+/***/ 20:
 /***/ (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__(26);
+/* harmony import */ var _splunk_react_icons_Close__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(22);
 /* 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);
@@ -602,7 +602,7 @@ function CrossMark(props) {
 
 /***/ }),
 
-/***/ 26:
+/***/ 22:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/Close");
@@ -623,7 +623,7 @@ module.exports = require("@splunk/ui-utils/color");
 
 /***/ }),
 
-/***/ 42:
+/***/ 43:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/omit");

package/Clickable.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 133);
+/******/ 	return __webpack_require__(__webpack_require__.s = 140);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 11:
+/***/ 12:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -128,7 +128,7 @@ function updateReactRef(ref, current) {
 
 /***/ }),
 
-/***/ 133:
+/***/ 140:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -177,9 +177,10 @@ var StyledA = external_styled_components_default.a.a.withConfig({
 
 var propTypes = {
   children: external_prop_types_default.a.node,
-  onClick: external_prop_types_default.a.func
+  onClick: external_prop_types_default.a.func,
+  prefix: external_prop_types_default.a.string
 };
-var NavigationContext = /*#__PURE__*/external_react_default.a.createContext(undefined);
+var NavigationContext = /*#__PURE__*/external_react_default.a.createContext({});
 /**
  * Used to provide an override for the `onClick` for links for single page applications so that
  * internal links can navigate without a page reload.
@@ -187,17 +188,21 @@ var NavigationContext = /*#__PURE__*/external_react_default.a.createContext(unde
 
 function NavigationProvider(_ref) {
   var children = _ref.children,
-      onClick = _ref.onClick;
+      onClick = _ref.onClick,
+      prefix = _ref.prefix;
   // @docs-props-type NavigationProviderProps
   return /*#__PURE__*/external_react_default.a.createElement(NavigationContext.Provider, {
-    value: onClick
+    value: {
+      onClick: onClick,
+      prefix: prefix
+    }
   }, children);
 }
 
 NavigationProvider.propTypes = propTypes;
 
 // EXTERNAL MODULE: ./src/utils/updateReactRef.ts
-var updateReactRef = __webpack_require__(11);
+var updateReactRef = __webpack_require__(12);
 
 // 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); }
@@ -239,8 +244,9 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 var WITH_SCHEME = /^[a-z0-9]+:/;
 var SCHEME_RELATIVE = /^\/\//;
+var IS_RELATIVE = /^\//;
 var isInternalLink = function isInternalLink(to) {
-  return !WITH_SCHEME.test(to) && !SCHEME_RELATIVE.test(to);
+  return to != null && !WITH_SCHEME.test(to) && !SCHEME_RELATIVE.test(to);
 };
 var Clickable_propTypes = {
   children: external_prop_types_default.a.node,
@@ -248,6 +254,7 @@ var Clickable_propTypes = {
   elementRef: external_prop_types_default.a.oneOfType([external_prop_types_default.a.func, external_prop_types_default.a.object]),
   onClick: external_prop_types_default.a.func,
   openInNewContext: external_prop_types_default.a.bool,
+  navigationLabel: external_prop_types_default.a.string,
   to: external_prop_types_default.a.string
 };
 var defaultProps = {
@@ -258,6 +265,14 @@ var defaultProps = {
 function isLink(props) {
   return !!props.to && !props.disabled;
 }
+
+function getPrefixedURL(to, prefix) {
+  if (prefix != null && isInternalLink(to) && IS_RELATIVE.test(to)) {
+    return "".concat(prefix).concat(to);
+  }
+
+  return to;
+}
 /**
  * `Clickable` renders as a `button` element, or as an `a` element if the `to` prop is set
  * and the `disabled` prop is `false`. This is called link mode.
@@ -302,9 +317,18 @@ var Clickable_Clickable = /*#__PURE__*/function (_Component) {
         if (_this.props.onClick) {
           _this.props.onClick(e);
         } else if (isLink(_this.props) && providedOnClick) {
+          var prefix = _this.context.prefix;
+          var label = _this.props.navigationLabel;
+
+          if (!label && Object(external_lodash_["isString"])(_this.props.children)) {
+            label = _this.props.children;
+          }
+
           providedOnClick(e, {
-            to: _this.props.to,
-            openInNewContext: _this.props.openInNewContext
+            to: getPrefixedURL(_this.props.to, prefix),
+            originalTo: _this.props.to,
+            openInNewContext: _this.props.openInNewContext,
+            label: label
           });
         }
       };
@@ -329,7 +353,10 @@ var Clickable_Clickable = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var onClick = this.createHandleOnClick(this.context); // Only set the href attribute when enabled, and therefore using an <a> tag
+      var _this$context = this.context,
+          onClick = _this$context.onClick,
+          prefix = _this$context.prefix;
+      var handleOnClick = this.createHandleOnClick(onClick); // Only set the href attribute when enabled, and therefore using an <a> tag
 
       if (isLink(this.props)) {
         var _this$props = this.props,
@@ -343,10 +370,10 @@ var Clickable_Clickable = /*#__PURE__*/function (_Component) {
         return /*#__PURE__*/external_react_default.a.createElement(StyledA, _extends({
           "data-test": "clickable",
           ref: this.handleMount,
-          href: to,
+          href: getPrefixedURL(this.props.to, prefix),
           target: target,
           rel: rel,
-          onClick: onClick
+          onClick: handleOnClick
         }, Object(external_lodash_["omit"])(_otherProps, 'disabled', 'elementRef', 'onClick')), _children);
       } // button variant
 
@@ -361,7 +388,7 @@ var Clickable_Clickable = /*#__PURE__*/function (_Component) {
         "data-test": "clickable",
         ref: this.handleMount,
         type: type || 'button',
-        onClick: onClick
+        onClick: handleOnClick
       }, Object(external_lodash_["omit"])(otherProps, 'elementRef', 'onClick', 'openInNewContext', 'to')), children);
     }
   }]);

package/CloseButton.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 148);
+/******/ 	return __webpack_require__(__webpack_require__.s = 155);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 148:
+/***/ 155:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -123,14 +123,14 @@ 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__(22);
+var CrossMark = __webpack_require__(20);
 
 // 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/ButtonSimple"
-var ButtonSimple_ = __webpack_require__(43);
+var ButtonSimple_ = __webpack_require__(45);
 var ButtonSimple_default = /*#__PURE__*/__webpack_require__.n(ButtonSimple_);
 
 // EXTERNAL MODULE: external "@splunk/themes"
@@ -194,14 +194,14 @@ module.exports = require("react");
 
 /***/ }),
 
-/***/ 22:
+/***/ 20:
 /***/ (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__(26);
+/* harmony import */ var _splunk_react_icons_Close__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(22);
 /* 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) {
 
 /***/ }),
 
-/***/ 26:
+/***/ 22:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/Close");
@@ -258,7 +258,7 @@ module.exports = require("styled-components");
 
 /***/ }),
 
-/***/ 43:
+/***/ 45:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/ButtonSimple");

package/Code.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 149);
+/******/ 	return __webpack_require__(__webpack_require__.s = 156);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 149:
+/***/ 156:
 /***/ (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__(72);
+var prism_empty = __webpack_require__(81);
 var prism_empty_default = /*#__PURE__*/__webpack_require__.n(prism_empty);
 
 // EXTERNAL MODULE: external "styled-components"
@@ -139,11 +139,11 @@ var themes_ = __webpack_require__(0);
 var Styled = external_styled_components_default.a.pre.withConfig({
   displayName: "CodeStyles__Styled",
   componentId: "sc-1eq4k68-0"
-})(["", ";", " line-height:17px;text-align:left;tab-size:4;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;hyphens:none;overflow-x:auto;margin-bottom:1.3em;"], themes_["mixins"].reset('block'), Object(themes_["pick"])({
+})(["", ";", " line-height:17px;text-align:left;tab-size:4;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;hyphens:none;overflow-x:auto;margin-bottom:1.3em;&:focus-visible{outline:solid ", ";}"], themes_["mixins"].reset('block'), Object(themes_["pick"])({
   enterprise: {
     dark: Object(external_styled_components_["css"])(["color:", ";"], themes_["variables"].gray92)
   }
-}));
+}), themes_["variables"].focusColor);
 var StyledCode = external_styled_components_default.a.code.withConfig({
   displayName: "CodeStyles__StyledCode",
   componentId: "sc-1eq4k68-1"
@@ -343,7 +343,8 @@ function Code(_ref) {
   var codeContent = render(tokens);
   return /*#__PURE__*/external_react_default.a.createElement(Styled, _extends({
     "data-test": "code",
-    ref: elementRef
+    ref: elementRef,
+    tabIndex: 0
   }, otherProps), /*#__PURE__*/external_react_default.a.createElement(StyledCode, {
     className: "language-".concat(language)
   }, codeContent));
@@ -377,7 +378,7 @@ module.exports = require("lodash");
 
 /***/ }),
 
-/***/ 72:
+/***/ 81:
 /***/ (function(module, exports, __webpack_require__) {