@zohodesk/components 1.0.0-alpha-249 → 1.0.0-alpha-250

package/lib/LightNightMode/Colors.json

@@ -0,0 +1,497 @@
+[
+   {
+      "lightColor": "#c8cbdc",
+      "equalNightColors": "#3e4d63, #5a616f, #c8cbdc, #384157, #828994",
+      "equalPureDarkColors": "#585858, #3e4d63"
+   },
+   {
+      "lightColor": "#788190",
+      "equalNightColors": "#828994, #a8b0bd, #788190",
+      "equalPureDarkColors": "#828994"
+   },
+   {
+      "lightColor": "#d5dde7",
+      "equalNightColors": "#384157, #2d3748, #d5dde7, #828994, #262f3d, rgba(255 255 255 / 0.2)",
+      "equalPureDarkColors": "#585858, #383838, #161515, #333, #384157"
+   },
+   {
+      "lightColor": "#0a73eb",
+      "equalNightColors": "#479dff, #828994, #334b68",
+      "equalPureDarkColors": "#479dff"
+   },
+   {
+      "lightColor": "#f6f8fb",
+      "equalNightColors": "#262f3d, #384157, #f6f8fb, #2e3642, #1b212b, #e2e4e6, rgba(255 255 255 / 0.03), #000",
+      "equalPureDarkColors": "#2b2b2b, #262626, #212121, #262f3d"
+   },
+   {
+      "lightColor": "#f1f7fe",
+      "equalNightColors": "#2c3b4d",
+      "equalPureDarkColors": "#252d37, #383838"
+   },
+   {
+      "lightColor": "rgba(255 255 255 / 0.5)",
+      "equalNightColors": "rgba(22 27 35 / 0.5)",
+      "equalPureDarkColors": ""
+   },
+   {
+      "lightColor": "#000",
+      "equalNightColors": "#e2e4e6, #a8b0bd, #3e4d63",
+      "equalPureDarkColors": "#e2e4e6"
+   },
+   {
+      "lightColor": "#fff",
+      "equalNightColors": "#232b38, #fff, #e2e4e6, #479dff, #433c32, #313d54, #272727",
+      "equalPureDarkColors": "#212121, #232b38, #161515"
+   },
+   {
+      "lightColor": "rgba(0 0 0 / 0.11)",
+      "equalNightColors": "rgba(255 255 255 / 0.14)",
+      "equalPureDarkColors": ""
+   },
+   {
+      "lightColor": "rgba(255 255 255 / 0.14)",
+      "equalNightColors": "rgba(0 0 0 / 0.11)",
+      "equalPureDarkColors": ""
+   },
+   {
+      "lightColor": "#0053b8",
+      "equalNightColors": "#6eb2ff, #0053b8, #1065cc",
+      "equalPureDarkColors": "#6eb2ff"
+   },
+   {
+      "lightColor": "rgba(10 115 235 / 0.2)",
+      "equalNightColors": "rgba(10 115 235 / 0.2)",
+      "equalPureDarkColors": ""
+   },
+   {
+      "lightColor": "#5a616f",
+      "equalNightColors": "#a8b0bd, #2c3b4d",
+      "equalPureDarkColors": "#999, #a8b0bd"
+   },
+   {
+      "lightColor": "#de3535",
+      "equalNightColors": "#ff6b6b",
+      "equalPureDarkColors": "#ff6b6b"
+   },
+   {
+      "lightColor": "#ab1a18",
+      "equalNightColors": "#cc302d",
+      "equalPureDarkColors": "#cc302d"
+   },
+   {
+      "lightColor": "#26a942",
+      "equalNightColors": "#4ac064",
+      "equalPureDarkColors": "#4ac064"
+   },
+   {
+      "lightColor": "#0e7526",
+      "equalNightColors": "#1b8c35",
+      "equalPureDarkColors": "#1b8c35"
+   },
+   {
+      "lightColor": "#f6b041",
+      "equalNightColors": "#f6b041",
+      "equalPureDarkColors": "#f6b041"
+   },
+   {
+      "lightColor": "#e7ecf4",
+      "equalNightColors": "#161b23, #384157, #2d3748, #1b212b, rgba(255 255 255 / 0.03), #1c2534",
+      "equalPureDarkColors": "#161b23"
+   },
+   {
+      "lightColor": "#ebf0f5",
+      "equalNightColors": "#2d3748, #384157, #ebf0f5",
+      "equalPureDarkColors": "#161515, #222, #2e2e2e, #2b2b2b, #2d3748"
+   },
+   {
+      "lightColor": "rgba(0 0 0 / 0.95)",
+      "equalNightColors": "#3e4d63",
+      "equalPureDarkColors": "#585858, #3e4d63"
+   },
+   {
+      "lightColor": "#b7d1f0",
+      "equalNightColors": "#3f536b",
+      "equalPureDarkColors": "#2c4664, #3f536b"
+   },
+   {
+      "lightColor": "#ecf4fd",
+      "equalNightColors": "#262f3d, #25333a",
+      "equalPureDarkColors": "#2b2b2b, #262626, #212121, #262f3d"
+   },
+   {
+      "lightColor": "#fdf3f3",
+      "equalNightColors": "rgba(255 107 107 / 0.05), #31323f, #503348, #2e2e3b, rgba(255 128 31 / 0.05), rgba(255 107 107 / 0.05), #fdf3f3",
+      "equalPureDarkColors": ""
+   },
+   {
+      "lightColor": "rgba(0 0 0 / 0.02)",
+      "equalNightColors": "rgba(225 225 225 / 0.06)",
+      "equalPureDarkColors": ""
+   },
+   {
+      "lightColor": "rgba(0 0 0 / 0.12)",
+      "equalNightColors": "rgba(225 225 225 / 0.12)",
+      "equalPureDarkColors": ""
+   },
+   {
+      "lightColor": "rgba(225 225 225 / 0.15)",
+      "equalNightColors": "rgba(225 225 225 / 0.12)",
+      "equalPureDarkColors": ""
+   },
+   {
+      "lightColor": "rgba(0 0 0 / 0.16)",
+      "equalNightColors": "rgba(168 176 189 / 0.3)",
+      "equalPureDarkColors": ""
+   },
+   {
+      "lightColor": "rgba(225 225 225 / 0.17)",
+      "equalNightColors": "rgba(225 225 225 / 0.14)",
+      "equalPureDarkColors": ""
+   },
+   {
+      "lightColor": "rgba(44 51 77 / 0.1)",
+      "equalNightColors": "rgba(225 225 225 / 0.12)",
+      "equalPureDarkColors": ""
+   },
+   {
+      "lightColor": "rgba(225 225 225 / 0.12)",
+      "equalNightColors": "rgba(225 225 225 / 0.12)",
+      "equalPureDarkColors": ""
+   },
+   {
+      "lightColor": "rgba(225 225 225 / 0.06)",
+      "equalNightColors": "rgba(225 225 225 / 0.06)",
+      "equalPureDarkColors": ""
+   },
+   {
+      "lightColor": "#2381ed",
+      "equalNightColors": "rgba(255 255 255 / 0.15)",
+      "equalPureDarkColors": ""
+   },
+   {
+      "lightColor": "#ff6f00",
+      "equalNightColors": "#ff801f",
+      "equalPureDarkColors": "#ff801f"
+   },
+   {
+      "lightColor": "#1e2633",
+      "equalNightColors": "#e2e4e6, #3e4d63, #1e2633",
+      "equalPureDarkColors": "#e2e4e6"
+   },
+   {
+      "lightColor": "#f2faf5",
+      "equalNightColors": "#232b38, #28373f",
+      "equalPureDarkColors": "#212121, #232b38, #161515"
+   },
+   {
+      "lightColor": "#fcebeb",
+      "equalNightColors": "#583a45, #864654, #fcebeb",
+      "equalPureDarkColors": "#583a45"
+   },
+   {
+      "lightColor": "rgba(55 84 170 / 0.25)",
+      "equalNightColors": "rgba(0 0 0 / 0.3), rgba(0 0 0 / 0.4)",
+      "equalPureDarkColors": ""
+   },
+   {
+      "lightColor": "#5cc1a5",
+      "equalNightColors": "#5cc1a5, #4ac064",
+      "equalPureDarkColors": "#5cc1a5"
+   },
+   {
+      "lightColor": "#010101",
+      "equalNightColors": "#ff6b6b, #e2e4e6",
+      "equalPureDarkColors": "#ff6b6b"
+   },
+   {
+      "lightColor": "#bdd9f9",
+      "equalNightColors": "#2d3748, #2d4869",
+      "equalPureDarkColors": "#161515, #222, #2e2e2e, #2b2b2b, #2d3748"
+   },
+   {
+      "lightColor": "#f8eaae",
+      "equalNightColors": "#2d3748, #574c3d",
+      "equalPureDarkColors": "#161515, #222, #2e2e2e, #2b2b2b, #2d3748"
+   },
+   {
+      "lightColor": "#2c334d",
+      "equalNightColors": "#151c28, #1b212b",
+      "equalPureDarkColors": "#101010"
+   },
+   {
+      "lightColor": "rgba(0 0 0 / 0.45)",
+      "equalNightColors": "rgba(0 0 0 / 0.8)",
+      "equalPureDarkColors": ""
+   },
+   {
+      "lightColor": "rgba(0 0 0 / 0.9)",
+      "equalNightColors": "rgba(0 0 0 / 0.8)",
+      "equalPureDarkColors": ""
+   },
+   {
+      "lightColor": "rgba(44 51 77 / 0.45)",
+      "equalNightColors": "rgba(44 51 77 / 0.75)",
+      "equalPureDarkColors": ""
+   },
+   {
+      "lightColor": "#f6f7f8",
+      "equalNightColors": "#262f3d",
+      "equalPureDarkColors": "#2b2b2b, #262626, #212121, #262f3d"
+   },
+   {
+      "lightColor": "rgba(55 84 170 / 0.25)",
+      "equalNightColors": "rgba(0 0 0 / 0.4)",
+      "equalPureDarkColors": ""
+   },
+   {
+      "lightColor": "#e9f7ef",
+      "equalNightColors": "#2c4e42",
+      "equalPureDarkColors": "#2c4e42"
+   },
+   {
+      "lightColor": "#fff1e6",
+      "equalNightColors": "#583c2c",
+      "equalPureDarkColors": "#583c2c"
+   },
+   {
+      "lightColor": "#fff6f0",
+      "equalNightColors": "#31333c",
+      "equalPureDarkColors": "#31333c"
+   },
+   {
+      "lightColor": "rgba(44 51 77 / 0.94)",
+      "equalNightColors": "rgba(27 33 43 / 0.9)",
+      "equalPureDarkColors": ""
+   },
+   {
+      "lightColor": "#221f1f",
+      "equalNightColors": "#479dff",
+      "equalPureDarkColors": "#479dff"
+   },
+   {
+      "lightColor": "rgba(10 115 235 / 0.25)",
+      "equalNightColors": "#334b68",
+      "equalPureDarkColors": "#334b68"
+   },
+   {
+      "lightColor": "#3f70b7",
+      "equalNightColors": "#479dff",
+      "equalPureDarkColors": "#479dff"
+   },
+   {
+      "lightColor": "#e56471",
+      "equalNightColors": "#ff6b6b",
+      "equalPureDarkColors": "#ff6b6b"
+   },
+   {
+      "lightColor": "#a6add7",
+      "equalNightColors": "#828994",
+      "equalPureDarkColors": "#828994"
+   },
+   {
+      "lightColor": "#3f70b7",
+      "equalNightColors": "#334b68",
+      "equalPureDarkColors": "#334b68"
+   },
+   {
+      "lightColor": "rgba(55 84 170 / 0.25)",
+      "equalNightColors": "rgba(0 0 0 / 0.3)",
+      "equalPureDarkColors": ""
+   },
+   {
+      "lightColor": "#dfe6f2",
+      "equalNightColors": "#384157",
+      "equalPureDarkColors": "#585858, #383838, #161515, #333, #384157"
+   },
+   {
+      "lightColor": "#eceff3",
+      "equalNightColors": "#1b212b",
+      "equalPureDarkColors": "#171717, #101010"
+   },
+   {
+      "lightColor": "#e8f6ff",
+      "equalNightColors": "rgba(71 157 255 / 0.25)",
+      "equalPureDarkColors": ""
+   },
+   {
+      "lightColor": "#c2e9ff",
+      "equalNightColors": "#223b5a",
+      "equalPureDarkColors": "#223b5a"
+   },
+   {
+      "lightColor": "rgba(178 190 197 / 0.38)",
+      "equalNightColors": "rgba(120 129 144 / 0.38)",
+      "equalPureDarkColors": ""
+   },
+   {
+      "lightColor": "rgba(120 129 144 / 40)",
+      "equalNightColors": "#384157",
+      "equalPureDarkColors": "#585858, #383838, #161515, #333, #384157"
+   },
+   {
+      "lightColor": "rgba(0 0 0 / 0.09)",
+      "equalNightColors": "rgba(0 0 0 / 0.4)",
+      "equalPureDarkColors": ""
+   },
+   {
+      "lightColor": "rgba(0 0 0 / 0.06)",
+      "equalNightColors": "rgba(0 0 0 / 0.4)",
+      "equalPureDarkColors": ""
+   },
+   {
+      "lightColor": "#edf4fd",
+      "equalNightColors": "transparent",
+      "equalPureDarkColors": "transparent"
+   },
+   {
+      "lightColor": "#fefcf3",
+      "equalNightColors": "transparent",
+      "equalPureDarkColors": "transparent"
+   },
+   {
+      "lightColor": "#e7f1fd",
+      "equalNightColors": "#253142",
+      "equalPureDarkColors": "#253142"
+   },
+   {
+      "lightColor": "#fefae8",
+      "equalNightColors": "#2d3239",
+      "equalPureDarkColors": "rgba(245, 176, 65, 0.05)"
+   },
+   {
+      "lightColor": "#f6a459",
+      "equalNightColors": "#f5b041",
+      "equalPureDarkColors": "#f5b041"
+   },
+   {
+      "lightColor": "#f3f6f9",
+      "equalNightColors": "#2d3748",
+      "equalPureDarkColors": "#161515, #222, #2e2e2e, #2b2b2b, #2d3748"
+   },
+   {
+      "lightColor": "#fcfffb",
+      "equalNightColors": "#293242",
+      "equalPureDarkColors": "#293242"
+   },
+   {
+      "lightColor": "#f4feef",
+      "equalNightColors": "#2a4042",
+      "equalPureDarkColors": "#2f3f42"
+   },
+   {
+      "lightColor": "#fdfdfd",
+      "equalNightColors": "#202937",
+      "equalPureDarkColors": "##202937"
+   },
+   {
+      "lightColor": "#e6eaf0",
+      "equalNightColors": "#2f3744",
+      "equalPureDarkColors": "#161515"
+   },
+   {
+      "lightColor": "#e7e9ec",
+      "equalNightColors": "#2d3748",
+      "equalPureDarkColors": "#161515, #222, #2e2e2e, #2b2b2b, #2d3748"
+   },
+   {
+      "lightColor": "#42485f",
+      "equalNightColors": "#2d3748",
+      "equalPureDarkColors": "#161515, #222, #2e2e2e, #2b2b2b, #2d3748"
+   },
+   {
+      "lightColor": "rgba(44 51 77 / 40)",
+      "equalNightColors": "rgba(27 33 43 / 40)",
+      "equalPureDarkColors": ""
+   },
+   {
+      "lightColor": "rgba(200 203 220 / 0.5)",
+      "equalNightColors": "#39414e",
+      "equalPureDarkColors": "rgba(255, 255, 255, 0.08)"
+   },
+   {
+      "lightColor": "rgba(200 203 220 / 0.7)",
+      "equalNightColors": "#39414e",
+      "equalPureDarkColors": "rgba(255, 255, 255, 0.08)"
+   },
+   {
+      "lightColor": "#383f57",
+      "equalNightColors": "#232b38",
+      "equalPureDarkColors": "#212121, #232b38, #161515"
+   },
+   {
+      "lightColor": "#444a61",
+      "equalNightColors": "#444a61",
+      "equalPureDarkColors": ""
+   },
+   {
+      "lightColor": "#444a61",
+      "equalNightColors": "#262f3d",
+      "equalPureDarkColors": "#2b2b2b, #262626, #212121, #262f3d"
+   },
+   {
+      "lightColor": "#333a53",
+      "equalNightColors": "#232b38",
+      "equalPureDarkColors": "#212121, #232b38, #161515"
+   },
+   {
+      "lightColor": "#6cbbfc",
+      "equalNightColors": "#479dff",
+      "equalPureDarkColors": "#479dff"
+   },
+   {
+      "lightColor": "#61667a",
+      "equalNightColors": "#828994",
+      "equalPureDarkColors": "#828994"
+   },
+   {
+      "lightColor": "#5f6478",
+      "equalNightColors": "#5f6478",
+      "equalPureDarkColors": "rgba(255, 255, 255, 0.15)"
+   },
+   {
+      "lightColor": "#232b38",
+      "equalNightColors": "#383f57",
+      "equalPureDarkColors": "#383f57"
+   },
+   {
+      "lightColor": "#226db4",
+      "equalNightColors": "#e2e4e6",
+      "equalPureDarkColors": "#e2e4e6"
+   },
+   {
+      "lightColor": "rgba(222 53 53 / 0.3)",
+      "equalNightColors": "#4f3842",
+      "equalPureDarkColors": "#4f3842"
+   },
+   {
+      "lightColor": "#fef7ec",
+      "equalNightColors": "#433f39",
+      "equalPureDarkColors": "#433f39"
+   },
+   {
+      "lightColor": "rgba(131 134 146 / 0.9)",
+      "equalNightColors": "rgba(62 77 99 / 0.9)",
+      "equalPureDarkColors": ""
+   },
+   {
+      "lightColor": "rgba(131 134 146 / 1)",
+      "equalNightColors": "#3e4d63",
+      "equalPureDarkColors": "#585858, #3e4d63"
+   },
+   {
+      "lightColor": "#f1dbdb",
+      "equalNightColors": "#2d3748",
+      "equalPureDarkColors": "#161515, #222, #2e2e2e, #2b2b2b, #2d3748"
+   },
+   {
+      "lightColor": "#fdf4f4",
+      "equalNightColors": "rgba(255 107 107 / 0.05)",
+      "equalPureDarkColors": ""
+   },
+   {
+      "lightColor": "#f2f2f2",
+      "equalNightColors": "#262f3d",
+      "equalPureDarkColors": "#2b2b2b, #262626, #212121, #262f3d"
+   }
+]

package/lib/LightNightMode/docs/AlternativeColors.docs.js

@@ -0,0 +1,153 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Container = _interopRequireDefault(require("../../Layout/Container"));
+
+var _Box = _interopRequireDefault(require("../../Layout/Box"));
+
+var _Colors = _interopRequireDefault(require("./../Colors.json"));
+
+var _docStyleModule = _interopRequireDefault(require("../../common/docStyle.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+var AlternativeColors = /*#__PURE__*/function (_React$Component) {
+  _inherits(AlternativeColors, _React$Component);
+
+  var _super = _createSuper(AlternativeColors);
+
+  function AlternativeColors() {
+    _classCallCheck(this, AlternativeColors);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(AlternativeColors, [{
+    key: "render",
+    value: function render() {
+      var _this$props$colors = this.props.colors,
+          colors = _this$props$colors === void 0 ? _Colors["default"] : _this$props$colors;
+      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Container["default"], {
+        className: _docStyleModule["default"].m20,
+        isCover: false
+      }, /*#__PURE__*/_react["default"].createElement(_Container["default"], null, /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+        className: _docStyleModule["default"].para
+      }, "Note: In some places, for single light mode color we used multipe night mode color values based on the places. Here in this docs, you can see the gold-border highlighted color in each row. So, that gold-highlighted is the ", /*#__PURE__*/_react["default"].createElement("b", null, "primary night mode color"), ". For more details kindly check this ", /*#__PURE__*/_react["default"].createElement("a", {
+        target: "_blank",
+        href: "https://sheet.zoho.com/sheet/open/122xr236d82d3bc7c4b8d9bff2e160a9ae7a4"
+      }, /*#__PURE__*/_react["default"].createElement("b", null, "sheet")), ".")), /*#__PURE__*/_react["default"].createElement(_Container["default"], {
+        alignBox: "row",
+        className: _docStyleModule["default"].head
+      }, /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+        className: _docStyleModule["default"].lft
+      }, "Light Mode Colors"), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+        flexible: true,
+        className: _docStyleModule["default"].rgt
+      }, "Alternate Night Mode Colors"), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+        flexible: true,
+        className: _docStyleModule["default"].rgt
+      }, "Alternate Pure Dark Mode Colors")), /*#__PURE__*/_react["default"].createElement(_Container["default"], {
+        alignBox: "row",
+        className: _docStyleModule["default"].content
+      }, /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+        flexible: true
+      }, colors.map(function (index, i) {
+        return /*#__PURE__*/_react["default"].createElement(_Container["default"], {
+          alignBox: "row",
+          key: i,
+          isCover: false,
+          className: _docStyleModule["default"].trow
+        }, /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+          className: _docStyleModule["default"].lft
+        }, /*#__PURE__*/_react["default"].createElement("span", {
+          style: {
+            backgroundColor: "".concat(index.lightColor)
+          },
+          className: _docStyleModule["default"].rect
+        }), /*#__PURE__*/_react["default"].createElement("span", {
+          className: _docStyleModule["default"].colorvalue,
+          onClick: function onClick() {
+            return navigator.clipboard.writeText(index.lightColor);
+          },
+          "data-title": "Copy ".concat(index.lightColor)
+        }, index.lightColor)), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+          flexible: true,
+          className: _docStyleModule["default"].rgt
+        }, index.equalNightColors.toString().split(", ").map(function (clrValue, j) {
+          return /*#__PURE__*/_react["default"].createElement("div", {
+            className: _docStyleModule["default"].nestedDiv,
+            key: j
+          }, /*#__PURE__*/_react["default"].createElement("span", {
+            style: {
+              backgroundColor: "".concat(clrValue)
+            },
+            className: "".concat(_docStyleModule["default"].rect, " ").concat(_docStyleModule["default"].gold)
+          }), /*#__PURE__*/_react["default"].createElement("span", {
+            className: _docStyleModule["default"].colorvalue,
+            onClick: function onClick() {
+              return navigator.clipboard.writeText(clrValue);
+            },
+            "data-title": "Copy ".concat(clrValue)
+          }, clrValue));
+        })), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+          flexible: true,
+          className: _docStyleModule["default"].rgt
+        }, index.equalPureDarkColors.toString().split(", ").map(function (clrValue, j) {
+          return /*#__PURE__*/_react["default"].createElement("div", {
+            className: _docStyleModule["default"].nestedDiv,
+            key: j
+          }, /*#__PURE__*/_react["default"].createElement("span", {
+            style: {
+              backgroundColor: "".concat(clrValue)
+            },
+            className: "".concat(_docStyleModule["default"].rect, " ").concat(_docStyleModule["default"].gold)
+          }), /*#__PURE__*/_react["default"].createElement("span", {
+            className: _docStyleModule["default"].colorvalue,
+            onClick: function onClick() {
+              return navigator.clipboard.writeText(clrValue);
+            },
+            "data-title": "Copy ".concat(clrValue)
+          }, clrValue));
+        })));
+      })))));
+    }
+  }]);
+
+  return AlternativeColors;
+}(_react["default"].Component);
+
+exports["default"] = AlternativeColors;
+
+if (false) {
+  AlternativeColors.docs = {
+    componentGroup: 'LightNightMode'
+  };
+}