@splunk/themes 0.22.0 → 0.23.0

package/mixins/typography.js

@@ -4,66 +4,52 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.typographyVariants = exports["default"] = void 0;
-
 var _styledComponents = require("styled-components");
-
 var _merge = _interopRequireDefault(require("lodash/merge"));
-
 var _variables = _interopRequireDefault(require("../variables"));
-
 var _pick = _interopRequireDefault(require("../pick"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _templateObject2() {
   var data = _taggedTemplateLiteral(["\n                    margin: 0;\n                    padding: 0;\n                "]);
-
   _templateObject2 = function _templateObject2() {
     return data;
   };
-
   return data;
 }
-
 function _templateObject() {
   var data = _taggedTemplateLiteral(["\n        ", "\n\n        color: ", ";\n        font-family: ", ";\n        font-size: ", ";\n        font-weight: ", ";\n        line-height: ", ";\n    "]);
-
   _templateObject = function _templateObject() {
     return data;
   };
-
   return data;
 }
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-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); }
-
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var typographyVariants = ['body', 'title1', 'title2', 'title3', 'title4', 'title5', 'title6', 'title7', 'largeBody', 'smallBody', 'footnote', 'monoBody', 'monoSmallBody'];
-exports.typographyVariants = typographyVariants;
 
+// Keep in sync with react-ui/Typography for documentation
+// TODO: SUI-5042 Improve docs-gen to render extended 3rd party types
+// TODO: SUI-5043 UtilPage doesn't render public types
+exports.typographyVariants = typographyVariants;
 function isTypographyVariant(s) {
   if (typeof s !== 'string') {
     return false;
   }
-
   return typographyVariants.includes(s);
 }
-
 function getStylesForVariant(variant) {
   var color = _variables["default"].contentColorDefault;
   var family = _variables["default"].fontFamily;
   var lineHeight = _variables["default"].lineHeight; // eslint-disable-line prefer-destructuring
-
   var size = _variables["default"].fontSize;
-  var weight = 'normal'; // TODO: After sections are removed from Heading update HeadingStyles accordingly to preserve section styles as typography variants SUI-5268
+  var weight = 'normal';
 
+  // TODO: After sections are removed from Heading update HeadingStyles accordingly to preserve section styles as typography variants SUI-5268
   switch (variant) {
     case 'title1':
       color = _variables["default"].contentColorActive;
@@ -80,7 +66,6 @@ function getStylesForVariant(variant) {
         prisma: _variables["default"].fontWeightBold
       });
       break;
-
     case 'title2':
       color = _variables["default"].contentColorActive;
       lineHeight = (0, _pick["default"])({
@@ -96,7 +81,6 @@ function getStylesForVariant(variant) {
         prisma: _variables["default"].fontWeightBold
       });
       break;
-
     case 'title3':
       color = _variables["default"].contentColorActive;
       lineHeight = (0, _pick["default"])({
@@ -112,7 +96,6 @@ function getStylesForVariant(variant) {
         prisma: _variables["default"].fontWeightBold
       });
       break;
-
     case 'title4':
       color = _variables["default"].contentColorActive;
       lineHeight = (0, _pick["default"])({
@@ -125,7 +108,6 @@ function getStylesForVariant(variant) {
       });
       weight = _variables["default"].fontWeightBold;
       break;
-
     case 'title5':
       color = _variables["default"].contentColorActive;
       lineHeight = _variables["default"].lineHeight;
@@ -138,7 +120,6 @@ function getStylesForVariant(variant) {
         prisma: _variables["default"].fontWeightBold
       });
       break;
-
     case 'title6':
       color = _variables["default"].contentColorActive;
       lineHeight = (0, _pick["default"])({
@@ -151,39 +132,33 @@ function getStylesForVariant(variant) {
       });
       weight = _variables["default"].fontWeightSemiBold;
       break;
-
     case 'title7':
       color = _variables["default"].contentColorActive;
       lineHeight = '16px';
       size = _variables["default"].fontSizeSmall;
       weight = _variables["default"].fontWeightSemiBold;
       break;
-
     case 'largeBody':
       color = _variables["default"].contentColorDefault;
       lineHeight = '24px';
       size = _variables["default"].fontSizeLarge;
       weight = 'normal';
       break;
-
     case 'smallBody':
       color = _variables["default"].contentColorDefault;
       lineHeight = '16px';
       size = _variables["default"].fontSizeSmall;
       weight = 'normal';
       break;
-
     case 'footnote':
       color = _variables["default"].contentColorDefault;
       lineHeight = '13px';
       size = '10px';
       weight = 'normal';
       break;
-
     case 'monoBody':
       family = _variables["default"].monoFontFamily;
       break;
-
     case 'monoSmallBody':
       color = _variables["default"].contentColorDefault;
       family = _variables["default"].monoFontFamily;
@@ -191,24 +166,20 @@ function getStylesForVariant(variant) {
       size = _variables["default"].fontSizeSmall;
       weight = 'normal';
       break;
-
     case 'body':
       // Theme defaults set the 'body' style
       break;
-
     default:
       {
         if (false) {
           // eslint-disable-next-line no-console
           console.log("Unknown typography variant, ".concat(variant, ". Using default values for theme."));
-        } // Make sure this "never" happens https://www.typescriptlang.org/docs/handbook/2/narrowing.html#exhaustiveness-checking
-
-
+        }
+        // Make sure this "never" happens https://www.typescriptlang.org/docs/handbook/2/narrowing.html#exhaustiveness-checking
         var exhaustiveCheck = variant;
         return exhaustiveCheck;
       }
   }
-
   return {
     color: color,
     family: family,
@@ -218,7 +189,6 @@ function getStylesForVariant(variant) {
     withReset: true
   };
 }
-
 var colorPropToVariableMap = {
   active: _variables["default"].contentColorActive,
   "default": _variables["default"].contentColorDefault,
@@ -230,8 +200,9 @@ var colorPropToVariableMap = {
 var familyPropToVariableMap = {
   sansSerif: _variables["default"].sansFontFamily,
   monospace: _variables["default"].monoFontFamily
-}; // As defined by [font-weight | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#common_weight_name_mapping)
+};
 
+// As defined by [font-weight | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#common_weight_name_mapping)
 var weightPropToValueMap = {
   light: _variables["default"].fontWeightLight,
   normal: _variables["default"].fontWeightNormal,
@@ -240,6 +211,7 @@ var weightPropToValueMap = {
   extraBold: _variables["default"].fontWeightExtraBold,
   heavy: _variables["default"].fontWeightHeavy
 };
+
 /**
  * A mixin for styling text content using predefined typography variants
  * and/or customizing font-settings with system parameters: e.g. size, weight, font-family.
@@ -289,7 +261,6 @@ var weightPropToValueMap = {
 function typography(variantOrParams, additionalParams) {
   var variant = isTypographyVariant(variantOrParams) ? variantOrParams : undefined;
   var params;
-
   if (variant && additionalParams !== undefined) {
     params = additionalParams;
   } else if (variant === undefined && _typeof(variantOrParams) === 'object' && additionalParams === undefined) {
@@ -297,9 +268,9 @@ function typography(variantOrParams, additionalParams) {
   } else {
     params = {};
   }
+  var variantParams = variant ? getStylesForVariant(variant) : {};
 
-  var variantParams = variant ? getStylesForVariant(variant) : {}; // Transform params to be ready for css literal below: i.e size="24" -> "24px"
-
+  // Transform params to be ready for css literal below: i.e size="24" -> "24px"
   var transformedParams = _objectSpread(_objectSpread({}, params), {}, {
     size: params.size ? "".concat(params.size, "px") : undefined,
     lineHeight: params.lineHeight ? "".concat(params.lineHeight, "px") : undefined,
@@ -307,7 +278,6 @@ function typography(variantOrParams, additionalParams) {
     family: params.family ? familyPropToVariableMap[params.family] : undefined,
     weight: params.weight ? weightPropToValueMap[params.weight] : undefined
   });
-
   var defaultTypographyParams = {
     color: _variables["default"].contentColorDefault,
     family: _variables["default"].fontFamily,
@@ -323,6 +293,5 @@ function typography(variantOrParams, additionalParams) {
     }, finalParams.color, finalParams.family, finalParams.size, finalParams.weight, finalParams.lineHeight);
   };
 }
-
 var _default = typography;
 exports["default"] = _default;

package/mixins/utilityMixins.js

@@ -13,31 +13,20 @@ exports.screenReaderContent = screenReaderContent;
 exports.overlayColors = overlayColors;
 exports.colorWithAlpha = colorWithAlpha;
 exports["default"] = exports.reset = void 0;
-
 var _tinycolor = _interopRequireDefault(require("tinycolor2"));
-
 var _styledComponents = require("styled-components");
-
 var _colorBlend = require("color-blend");
-
 var _variables = _interopRequireDefault(require("../variables"));
-
 var _pick = _interopRequireDefault(require("../pick"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _templateObject() {
   var data = _taggedTemplateLiteral(["\n        /* Generic resets */\n        animation: none 0s ease 0s 1 normal none running;\n        backface-visibility: visible;\n        background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;\n        border: medium none currentColor;\n        border-collapse: separate;\n        border-image: none;\n        border-radius: 0;\n        border-spacing: 0;\n        bottom: auto;\n        box-shadow: none;\n        caption-side: top;\n        clear: none;\n        clip: auto;\n        color-scheme: ", ";\n        columns: auto;\n        column-count: auto;\n        column-fill: balance;\n        column-gap: normal;\n        column-rule: medium none currentColor;\n        column-span: 1;\n        column-width: auto;\n        content: normal;\n        counter-increment: none;\n        counter-reset: none;\n        empty-cells: show;\n        float: none;\n        font-style: normal;\n        font-variant: normal;\n        font-weight: normal;\n        font-stretch: normal;\n        height: auto;\n        hyphens: none;\n        left: auto;\n        letter-spacing: normal;\n        list-style: disc outside none;\n        margin: 0;\n        max-height: none;\n        max-width: none;\n        min-height: 0;\n        min-width: 0;\n        opacity: 1;\n        orphans: 2;\n        overflow: visible;\n        overflow-x: visible;\n        overflow-y: visible;\n        padding: 0;\n        page-break-after: auto;\n        page-break-before: auto;\n        page-break-inside: auto;\n        perspective: none;\n        perspective-origin: 50% 50%;\n        pointer-events: auto;\n        position: static;\n        right: auto;\n        tab-size: 8;\n        table-layout: auto;\n        text-align: left;\n        text-align-last: auto;\n        text-decoration: none;\n        text-indent: 0;\n        text-shadow: none;\n        text-transform: none;\n        top: auto;\n        transform: none;\n        transform-origin: 50% 50% 0;\n        transform-style: flat;\n        transition: none 0s ease 0s;\n        user-select: auto;\n        vertical-align: baseline;\n        white-space: normal;\n        widows: 2;\n        width: auto;\n        word-spacing: normal;\n        z-index: auto;\n        /* Splunk-specific resets */\n        border-width: 1px;\n        box-sizing: border-box;\n        color: ", ";\n        cursor: inherit;\n        display: ", ";\n        font-family: ", ";\n        font-size: ", ";\n        line-height: ", ";\n        outline: medium none ", ";\n        visibility: inherit;\n    "]);
-
   _templateObject = function _templateObject() {
     return data;
   };
-
   return data;
 }
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
 /**
  * @file
  * A collection of style-related helper functions. All of them return a single object containing
@@ -62,6 +51,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
  * @param {string} [display=inline] Set the `display` property (block, inline-block, …)
  * @public
  */
+
 var reset = function reset() {
   var display = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'inline';
   return function () {
@@ -79,6 +69,7 @@ var reset = function reset() {
     }), display, _variables["default"].fontFamily, _variables["default"].fontSize, _variables["default"].lineHeight, _variables["default"].focusColor);
   };
 };
+
 /**
  * `clearfix` is used on a container to ensure its height is at least as tall as any floating
  * children.
@@ -94,10 +85,7 @@ var reset = function reset() {
  *  ```
  * @public
  */
-
-
 exports.reset = reset;
-
 function clearfix() {
   return {
     '&::after': {
@@ -107,6 +95,7 @@ function clearfix() {
     }
   };
 }
+
 /**
  * Use `ellipsis` for overflowing text. Requires `display` to be set to `inline-block` or `block`.
  *
@@ -122,8 +111,6 @@ function clearfix() {
  *  ```
  * @public
  */
-
-
 function ellipsis() {
   return {
     overflow: 'hidden',
@@ -131,6 +118,7 @@ function ellipsis() {
     whiteSpace: 'nowrap'
   };
 }
+
 /**
  * Force an element to be exactly 100% wide so that it doesn't overflow the page.
  *
@@ -150,8 +138,6 @@ function ellipsis() {
  *  ```
  *  @public
  */
-
-
 function printWidth100Percent() {
   return {
     maxWidth: '100% !important',
@@ -159,6 +145,7 @@ function printWidth100Percent() {
     overflow: 'hidden !important'
   };
 }
+
 /**
  * Hide an element (such as a button).
  *
@@ -177,13 +164,12 @@ function printWidth100Percent() {
  *  ```
  * @public
  */
-
-
 function printHide() {
   return {
     display: 'none !important'
   };
 }
+
 /**
  * Remove background gradients and images.
  *
@@ -202,13 +188,12 @@ function printHide() {
  *  ```
  * @public
  */
-
-
 function printNoBackground() {
   return {
     background: 'none !important'
   };
 }
+
 /**
  * Ensure that all text wraps so that it doesn't overflow the page.
  *
@@ -227,8 +212,6 @@ function printNoBackground() {
  *  ```
  * @public
  */
-
-
 function printWrapAll() {
   // TS: have to assert as CSSObject because csstype doesn't allow !important
   return {
@@ -238,6 +221,7 @@ function printWrapAll() {
     whiteSpace: 'normal !important'
   };
 }
+
 /**
  * Visually hide content. Typically used to target content for assistive technologies.
  *
@@ -251,8 +235,6 @@ function printWrapAll() {
  *  ```
  * @public
  */
-
-
 function screenReaderContent() {
   return {
     position: 'absolute',
@@ -265,7 +247,6 @@ function screenReaderContent() {
     border: 0
   };
 }
-
 /**
  * Calculates how one color would appear over another using a normal blend mode.
  * Colors can either be strings or functions, such as variable functions.
@@ -294,6 +275,7 @@ function overlayColors(c1, c2) {
     return (0, _tinycolor["default"])(c3).toRgbString();
   };
 }
+
 /**
  * Sets the alpha value on a given color.
  *
@@ -313,21 +295,16 @@ function overlayColors(c1, c2) {
  * @param {number} alpha The alpha value accepts range between 0-1.
  * @public
  */
-
-
 function colorWithAlpha(color, alpha) {
   return function (props) {
     var colorValue = typeof color === 'function' ? color(props) : color;
-
     if (false && (alpha < 0 || alpha > 1)) {
       // eslint-disable-next-line no-console
       console.warn("The alpha value \"".concat(alpha, "\" is not within acceptable 0-1 range."));
     }
-
     return (0, _tinycolor["default"])(colorValue).setAlpha(alpha).toRgbString();
   };
 }
-
 var _default = {
   reset: reset,
   clearfix: clearfix,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/themes",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "description": "Theme variables and mixins for the Splunk design language",
   "scripts": {
     "babel": "babel src -d . --ignore src/babel-plugin-base64-png,src/tests --ignore \"**/docs\" --extensions .js,.ts,.tsx",
@@ -26,6 +26,8 @@
     "@storybook/manager-api": ">= 7.x",
     "@storybook/react": ">= 7.x",
     "@storybook/theming": ">= 7.x",
+    "@types/lodash": "^4.14.156",
+    "@types/react": "^16.9.38",
     "react": "^16.8",
     "styled-components": "^5.3.10"
   },
@@ -48,6 +50,12 @@
     "@storybook/react": {
       "optional": true
     },
+    "@types/lodash": {
+      "optional": true
+    },
+    "@types/react": {
+      "optional": true
+    },
     "@storybook/theming": {
       "optional": true
     }
@@ -63,7 +71,7 @@
     "@babel/cli": "^7.2.0",
     "@babel/core": "^7.2.0",
     "@splunk/babel-preset": "^4.0.0",
-    "@splunk/eslint-config": "^4.0.0",
+    "@splunk/eslint-config": "^5.0.0",
     "@storybook/blocks": "^7.6.17",
     "@storybook/components": "^7.6.17",
     "@storybook/manager-api": "^7.6.17",
@@ -78,16 +86,16 @@
     "@types/tinycolor2": "^1.4.2",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
-    "babel-eslint": "^10.1.0",
     "babel-plugin-transform-define": "^2.0.0",
     "cross-env": "^6.0.3",
-    "eslint": "^7.4.0",
-    "eslint-config-airbnb": "^18.2.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-react": "^7.20.3",
-    "eslint-plugin-react-hooks": "^4.0.5",
+    "eslint": "^8.57.1",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-import-resolver-webpack": "^0.13.4",
+    "eslint-plugin-import": "^2.30.1",
+    "eslint-plugin-jsx-a11y": "^6.10.0",
+    "eslint-plugin-react": "^7.36.1",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "jest": "^26.6.3",
     "jest-styled-components": "^7.0.8",
     "react": "^16.12.0",

package/pick.js

@@ -5,11 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.isInterpolationResult = isInterpolationResult;
 exports["default"] = exports.getThemeVariant = void 0;
-
 var _utils = require("./utils");
-
-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); }
-
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var valueToKey = {
   enterprise: 'family',
   prisma: 'family',
@@ -18,42 +15,38 @@ var valueToKey = {
   compact: 'density',
   comfortable: 'density'
 };
-
 function isInterpolationResult(tree) {
   // for this to work as expected for objects/CSSProperties, it may be necessary to change
   // it to only consider objects that have valid pick tree keys (but no other keys)
   // as trees
   return _typeof(tree) !== 'object' || Array.isArray(tree) || tree === null;
 }
+
 /**
  * This function is exported for use in pickVariant exclusively.
  */
-
-
 var getThemeVariant = function getThemeVariant(tree, theme) {
   // If it's not an object with one of the six keys, it must be an end value.
   var treeKey = Object.keys(tree).shift();
-
   if (!treeKey) {
     throw new Error('A pick tree cannot be empty.');
   }
-
   var themeKey = valueToKey[treeKey];
-
   if (!themeKey) {
     throw new Error("Invalid pick tree key: ".concat(treeKey));
-  } // Recursively crawl the tree.
-
+  }
 
+  // Recursively crawl the tree.
   var themeCurrentValue = theme[themeKey];
-  var treeValue = tree[themeCurrentValue]; // If it's not an object or it's a null value, it must be the end value.
+  var treeValue = tree[themeCurrentValue];
 
+  // If it's not an object or it's a null value, it must be the end value.
   if (isInterpolationResult(treeValue)) {
     return treeValue; // this may be undefined, when the css does not support the theme
   }
-
   return getThemeVariant(treeValue, theme);
 };
+
 /**
  * Pick is used to create theme-specific css.
  *
@@ -88,10 +81,7 @@ var getThemeVariant = function getThemeVariant(tree, theme) {
  * @returns {function} The returned function is called by `styled-components`, which provides the theme context.
  * @public
  */
-
-
 exports.getThemeVariant = getThemeVariant;
-
 var pick = function pick(tree) {
   return function (_ref) {
     var theme = _ref.theme;
@@ -99,6 +89,5 @@ var pick = function pick(tree) {
     return getThemeVariant(tree, themeCleaned);
   };
 };
-
 var _default = pick;
 exports["default"] = _default;

package/pickVariant.js

@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _pick = require("./pick");
-
 var _utils = require("./utils");
-
 /**
  * Pick Variant is used to create theme-specific css.
  *
@@ -46,22 +43,19 @@ var _utils = require("./utils");
  * @returns {function} The returned function is called by `styled-components`, which provides the props and theme context.
  * @public
  */
+
 var pickVariant = function pickVariant(propName, tree) {
   return function (props) {
     var _props$theme;
-
     // TS: must assume prop value can be used as string key
     var variantKey = props[propName];
     var subTree = tree[variantKey];
-
     if ((0, _pick.isInterpolationResult)(subTree)) {
       return subTree;
     }
-
     var theme = (0, _utils.addThemeDefaults)((_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.splunkThemeV1);
     return (0, _pick.getThemeVariant)(subTree, theme);
   };
 };
-
 var _default = pickVariant;
 exports["default"] = _default;