/*!
 * Copyright © 2024 Splunk Inc.
 * SPLUNK CONFIDENTIAL – Use or disclosure of this material in whole or
 * in part without a valid written license from Splunk Inc. is PROHIBITED.
 */
module.exports =
/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			i: moduleId,
/******/ 			l: false,
/******/ 			exports: {}
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.l = true;
/******/
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/
/******/
/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;
/******/
/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;
/******/
/******/ 	// define getter function for harmony exports
/******/ 	__webpack_require__.d = function(exports, name, getter) {
/******/ 		if(!__webpack_require__.o(exports, name)) {
/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ 		}
/******/ 	};
/******/
/******/ 	// define __esModule on exports
/******/ 	__webpack_require__.r = function(exports) {
/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ 		}
/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
/******/ 	};
/******/
/******/ 	// create a fake namespace object
/******/ 	// mode & 1: value is a module id, require it
/******/ 	// mode & 2: merge all properties of value into the ns
/******/ 	// mode & 4: return value when already ns object
/******/ 	// mode & 8|1: behave like require
/******/ 	__webpack_require__.t = function(value, mode) {
/******/ 		if(mode & 1) value = __webpack_require__(value);
/******/ 		if(mode & 8) return value;
/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ 		var ns = Object.create(null);
/******/ 		__webpack_require__.r(ns);
/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ 		return ns;
/******/ 	};
/******/
/******/ 	// getDefaultExport function for compatibility with non-harmony modules
/******/ 	__webpack_require__.n = function(module) {
/******/ 		var getter = module && module.__esModule ?
/******/ 			function getDefault() { return module['default']; } :
/******/ 			function getModuleExports() { return module; };
/******/ 		__webpack_require__.d(getter, 'a', getter);
/******/ 		return getter;
/******/ 	};
/******/
/******/ 	// Object.prototype.hasOwnProperty.call
/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "";
/******/
/******/
/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(__webpack_require__.s = 97);
/******/ })
/************************************************************************/
/******/ ({

/***/ 0:
/***/ (function(module, exports) {

module.exports = require("react");

/***/ }),

/***/ 1:
/***/ (function(module, exports) {

module.exports = require("prop-types");

/***/ }),

/***/ 13:
/***/ (function(module, exports) {

module.exports = require("@splunk/react-ui/ColumnLayout");

/***/ }),

/***/ 15:
/***/ (function(module, exports) {

module.exports = require("@babel/runtime/helpers/typeof");

/***/ }),

/***/ 16:
/***/ (function(module, exports) {

module.exports = require("@splunk/visualizations-shared/colorUtils");

/***/ }),

/***/ 2:
/***/ (function(module, exports) {

module.exports = require("styled-components");

/***/ }),

/***/ 27:
/***/ (function(module, exports) {

module.exports = require("@splunk/visualization-themes/variables");

/***/ }),

/***/ 6:
/***/ (function(module, exports) {

module.exports = require("@splunk/react-ui/Heading");

/***/ }),

/***/ 62:
/***/ (function(module, exports) {

module.exports = require("@splunk/react-ui/Select");

/***/ }),

/***/ 69:
/***/ (function(module, exports) {

module.exports = require("lodash/omit");

/***/ }),

/***/ 70:
/***/ (function(module, exports) {

module.exports = require("lodash/cloneDeep");

/***/ }),

/***/ 71:
/***/ (function(module, exports) {

module.exports = require("@splunk/react-ui/Message");

/***/ }),

/***/ 72:
/***/ (function(module, exports) {

module.exports = require("@splunk/react-ui/Tooltip");

/***/ }),

/***/ 73:
/***/ (function(module, exports) {

module.exports = require("@splunk/themes/SplunkThemeProvider");

/***/ }),

/***/ 8:
/***/ (function(module, exports) {

module.exports = require("@babel/runtime/helpers/slicedToArray");

/***/ }),

/***/ 97:
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _babel_runtime_helpers_typeof__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(15);
/* harmony import */ var _babel_runtime_helpers_typeof__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_typeof__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(8);
/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(0);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(1);
/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_3__);
/* harmony import */ var _splunk_react_ui_Heading__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(6);
/* harmony import */ var _splunk_react_ui_Heading__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_ui_Heading__WEBPACK_IMPORTED_MODULE_4__);
/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(2);
/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_5__);
/* harmony import */ var lodash_omit__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(69);
/* harmony import */ var lodash_omit__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(lodash_omit__WEBPACK_IMPORTED_MODULE_6__);
/* harmony import */ var lodash_cloneDeep__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(70);
/* harmony import */ var lodash_cloneDeep__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(lodash_cloneDeep__WEBPACK_IMPORTED_MODULE_7__);
/* harmony import */ var _splunk_react_ui_ColumnLayout__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(13);
/* harmony import */ var _splunk_react_ui_ColumnLayout__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_ui_ColumnLayout__WEBPACK_IMPORTED_MODULE_8__);
/* harmony import */ var _splunk_react_ui_Select__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(62);
/* harmony import */ var _splunk_react_ui_Select__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_ui_Select__WEBPACK_IMPORTED_MODULE_9__);
/* harmony import */ var _splunk_react_ui_Message__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(71);
/* harmony import */ var _splunk_react_ui_Message__WEBPACK_IMPORTED_MODULE_10___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_ui_Message__WEBPACK_IMPORTED_MODULE_10__);
/* harmony import */ var _splunk_react_ui_Tooltip__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(72);
/* harmony import */ var _splunk_react_ui_Tooltip__WEBPACK_IMPORTED_MODULE_11___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_ui_Tooltip__WEBPACK_IMPORTED_MODULE_11__);
/* harmony import */ var _splunk_themes_SplunkThemeProvider__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(73);
/* harmony import */ var _splunk_themes_SplunkThemeProvider__WEBPACK_IMPORTED_MODULE_12___default = /*#__PURE__*/__webpack_require__.n(_splunk_themes_SplunkThemeProvider__WEBPACK_IMPORTED_MODULE_12__);
/* harmony import */ var _splunk_visualizations_shared_colorUtils__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(16);
/* harmony import */ var _splunk_visualizations_shared_colorUtils__WEBPACK_IMPORTED_MODULE_13___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_colorUtils__WEBPACK_IMPORTED_MODULE_13__);
/* harmony import */ var _splunk_visualization_themes_variables__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(27);
/* harmony import */ var _splunk_visualization_themes_variables__WEBPACK_IMPORTED_MODULE_14___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualization_themes_variables__WEBPACK_IMPORTED_MODULE_14__);


/* eslint-disable react/no-multi-comp */














var ThemeVar = styled_components__WEBPACK_IMPORTED_MODULE_5___default.a.div.withConfig({
  displayName: "ThemesDoc__ThemeVar",
  componentId: "ycgc2f-0"
})(["margin-top:20px;cursor:pointer;"]);
var ThemeVarName = styled_components__WEBPACK_IMPORTED_MODULE_5___default.a.div.withConfig({
  displayName: "ThemesDoc__ThemeVarName",
  componentId: "ycgc2f-1"
})(["color:#5ca300;padding-bottom:5px;display:inline-block;padding-right:5px;font-weight:", ";"], function (props) {
  return props.highlighted ? 'bold' : 'normal';
});
var PairContainer = styled_components__WEBPACK_IMPORTED_MODULE_5___default.a.div.withConfig({
  displayName: "ThemesDoc__PairContainer",
  componentId: "ycgc2f-2"
})(["margin-left:40px;margin-top:10px;"]);
var PairTitle = styled_components__WEBPACK_IMPORTED_MODULE_5___default.a.span.withConfig({
  displayName: "ThemesDoc__PairTitle",
  componentId: "ycgc2f-3"
})(["display:inline-block;color:#8293a7;width:80px;"]);
var ColorPreview = styled_components__WEBPACK_IMPORTED_MODULE_5___default.a.div.withConfig({
  displayName: "ThemesDoc__ColorPreview",
  componentId: "ycgc2f-4"
})(["width:20px;height:20px;background:", ";display:inline-block;vertical-align:bottom;margin-right:5px;border:1px solid rgba(0,0,0,0.3);border-radius:5px;"], function (props) {
  return props.color;
});

var Pair = function Pair(_ref) {
  var title = _ref.title,
      text = _ref.text;
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(PairContainer, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(PairTitle, null, "".concat(title, ":")), Object(_splunk_visualizations_shared_colorUtils__WEBPACK_IMPORTED_MODULE_13__["isColor"])(text) && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(ColorPreview, {
    color: text
  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("samp", null, text));
};

Pair.propTypes = {
  title: prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.string,
  text: prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.string
};
var themeFamilyMapping = {
  enterprise: {
    colorScheme: {
      dark: 'enterpriseDark',
      light: 'enterprise'
    }
  },
  prisma: {
    colorScheme: {
      dark: 'scp',
      light: 'enterprise'
    }
  }
};
var themeIdToVariant = {
  enterpriseLightComfortable: {
    colorScheme: 'light',
    density: 'comfortable',
    family: 'enterprise',
    label: 'Enterprise Light Comfortable'
  },
  enterpriseLightCompact: {
    colorScheme: 'light',
    density: 'compact',
    family: 'enterprise',
    label: 'Enterprise Light Compact'
  },
  enterpriseDarkComfortable: {
    colorScheme: 'dark',
    density: 'comfortable',
    family: 'enterprise',
    label: 'Enterprise Dark Comfortable'
  },
  enterpriseDarkCompact: {
    colorScheme: 'dark',
    density: 'compact',
    family: 'enterprise',
    label: 'Enterprise Dark Compact'
  },
  prismaLightComfortable: {
    colorScheme: 'light',
    density: 'comfortable',
    family: 'prisma',
    label: 'Prisma Light Comfortable'
  },
  prismaLightCompact: {
    colorScheme: 'light',
    density: 'compact',
    family: 'prisma',
    label: 'Prisma Light Compact'
  },
  prismaDarkComfortable: {
    colorScheme: 'dark',
    density: 'comfortable',
    family: 'prisma',
    label: 'Prisma Dark Comfortable'
  },
  prismaDarkCompact: {
    colorScheme: 'dark',
    density: 'compact',
    family: 'prisma',
    label: 'Prisma Dark Compact'
  }
};

var ThemesDoc = function ThemesDoc(props) {
  var renderVisualization = props.renderVisualization,
      themeVars = props.themes;

  var _useState = Object(react__WEBPACK_IMPORTED_MODULE_2__["useState"])(''),
      _useState2 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1___default()(_useState, 2),
      highlightedThemeVariable = _useState2[0],
      setHighlightedThemeVariable = _useState2[1];

  var _useState3 = Object(react__WEBPACK_IMPORTED_MODULE_2__["useState"])(themeIdToVariant.enterpriseLightComfortable),
      _useState4 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1___default()(_useState3, 2),
      selectedTheme = _useState4[0],
      setSelectedTheme = _useState4[1];

  var previewTheme = lodash_cloneDeep__WEBPACK_IMPORTED_MODULE_7___default()(themeVars); // if the highlighted theme variable is a color, color it red
  // TODO(fkurniawan): fix red highlighting. this broke ~v20.7.0, and approach needs to be modified again owing to SUI upgrade

  if (Object(_splunk_visualizations_shared_colorUtils__WEBPACK_IMPORTED_MODULE_13__["isColor"])(themeVars[highlightedThemeVariable])) {
    previewTheme[highlightedThemeVariable] = function () {
      return 'red';
    };
  }

  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(_splunk_react_ui_ColumnLayout__WEBPACK_IMPORTED_MODULE_8___default.a, {
    style: {
      marginTop: -20
    }
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(_splunk_react_ui_ColumnLayout__WEBPACK_IMPORTED_MODULE_8___default.a.Row, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(_splunk_react_ui_ColumnLayout__WEBPACK_IMPORTED_MODULE_8___default.a.Column, {
    span: 12
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(_splunk_react_ui_Heading__WEBPACK_IMPORTED_MODULE_4___default.a, {
    level: 4
  }, "Theme"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(_splunk_react_ui_Select__WEBPACK_IMPORTED_MODULE_9___default.a, {
    value: selectedTheme,
    onChange: function onChange(e, _ref2) {
      var value = _ref2.value;
      return setSelectedTheme(value);
    }
  }, Object.keys(themeIdToVariant).map(function (themeId) {
    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(_splunk_react_ui_Select__WEBPACK_IMPORTED_MODULE_9___default.a.Option, {
      key: themeId,
      label: themeIdToVariant[themeId].label,
      value: themeIdToVariant[themeId]
    });
  })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(_splunk_react_ui_ColumnLayout__WEBPACK_IMPORTED_MODULE_8___default.a.Row, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(_splunk_react_ui_ColumnLayout__WEBPACK_IMPORTED_MODULE_8___default.a.Column, {
    colStyle: {
      padding: 10
    },
    span: 4
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(_splunk_react_ui_Heading__WEBPACK_IMPORTED_MODULE_4___default.a, {
    level: 4
  }, "Preview"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(_splunk_themes_SplunkThemeProvider__WEBPACK_IMPORTED_MODULE_12___default.a, {
    family: selectedTheme.family,
    colorScheme: selectedTheme.colorScheme,
    density: selectedTheme.density
  }, renderVisualization()), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(_splunk_react_ui_Message__WEBPACK_IMPORTED_MODULE_10___default.a, {
    type: "info"
  }, "This preview may differ from the visualization's default look and feel. ", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("br", null), "It exists to show areas affected by theme variables.")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(_splunk_react_ui_ColumnLayout__WEBPACK_IMPORTED_MODULE_8___default.a.Column, {
    colStyle: {
      padding: 10
    },
    span: 8
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(_splunk_react_ui_Heading__WEBPACK_IMPORTED_MODULE_4___default.a, {
    level: 4
  }, "Variables"), Object.keys(previewTheme).map(function (varKey) {
    var _sharedThemeVariables, _themeFamilyMapping$s;

    var themeValue = previewTheme[varKey]({
      theme: {
        splunkThemeV1: lodash_omit__WEBPACK_IMPORTED_MODULE_6___default()(selectedTheme, ['label'])
      }
    }); // if a theme variable is in @splunk/visualization-themes and it has the same value
    // we assume we used the shared variable.

    var isFromSharedVariables = (_splunk_visualization_themes_variables__WEBPACK_IMPORTED_MODULE_14__ === null || _splunk_visualization_themes_variables__WEBPACK_IMPORTED_MODULE_14__ === void 0 ? void 0 : (_sharedThemeVariables = _splunk_visualization_themes_variables__WEBPACK_IMPORTED_MODULE_14__[themeFamilyMapping === null || themeFamilyMapping === void 0 ? void 0 : (_themeFamilyMapping$s = themeFamilyMapping[selectedTheme.family]) === null || _themeFamilyMapping$s === void 0 ? void 0 : _themeFamilyMapping$s[selectedTheme.colorScheme]]) === null || _sharedThemeVariables === void 0 ? void 0 : _sharedThemeVariables[varKey]) === themeValue; // for now we only show simple theme values (nested theme objects shouldn't have been introduced in the first place)

    var isJSON;

    try {
      isJSON = _babel_runtime_helpers_typeof__WEBPACK_IMPORTED_MODULE_0___default()(JSON.parse(themeValue)) === 'object';
    } catch (e) {} // eslint-disable-line no-empty


    return !isJSON && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(ThemeVar, {
      key: varKey,
      onMouseOver: function onMouseOver() {
        return setHighlightedThemeVariable(varKey);
      },
      onMouseOut: function onMouseOut() {
        return setHighlightedThemeVariable('');
      }
    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(ThemeVarName, {
      highlighted: varKey === highlightedThemeVariable
    }, "".concat(varKey)), isFromSharedVariables && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(_splunk_react_ui_Tooltip__WEBPACK_IMPORTED_MODULE_11___default.a, {
      content: "This is a shared theme variable from @splunk/visualization-themes"
    }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(Pair, {
      title: "Value",
      text: themeValue
    }));
  }))));
};

ThemesDoc.propTypes = {
  themes: prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.object.isRequired,
  // @TODO: replace with themes object from viz config when we add docs/descs to theme vars
  renderVisualization: prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.func.isRequired
};
/* harmony default export */ __webpack_exports__["default"] = (ThemesDoc);

/***/ })

/******/ });
//# sourceMappingURL=ThemesDoc.js.map