@eturnity/eturnity_reusable_components 8.22.4 → 8.22.6

package/dist/main.es170.js

@@ -2,22 +2,29 @@ import "./main.es3.js";
 import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
 const _hoisted_1 = {
   xmlns: "http://www.w3.org/2000/svg",
-  width: "14",
-  height: "14",
+  width: "82",
+  height: "82",
   fill: "none"
 };
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#fff",
-  d: "M5.333 14 0 8.667 1.067 7.6 6.4 12.933zM8.422 9.978 4 10l.022-4.422 1.65 1.65 1.556-1.556-1.65-1.65L10 4l-.022 4.422-1.65-1.65-1.556 1.556zM7.6 1.067 12.933 6.4 14 5.333 8.667 0z"
+  fill: "#000",
+  d: "M9.998 10.513h24V9.488h-24zM9.998 17.513h5v-1.025h-5zM33.997 17.513h-5v-1.025h5zM18.998 17.513h6v-1.025h-6zM72.002 65.512h-24v-1.025h24zM53.002 72.512h-5v-1.025h5zM67.001 72.512h5v-1.025h-5zM63.002 72.512h-6v-1.025h6z"
 }, null, -1);
-const _hoisted_3 = [
-  _hoisted_2
+const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#000",
+  "fill-rule": "evenodd",
+  d: "M0 0v82h82V0zm1.025 80.251V1.025h79.226zm.726.724h79.224V1.751z",
+  "clip-rule": "evenodd"
+}, null, -1);
+const _hoisted_4 = [
+  _hoisted_2,
+  _hoisted_3
 ];
 function render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_4);
 }
-const length_3d = { render };
+const ed_icon_optimizer_path = { render };
 export {
-  length_3d as default,
+  ed_icon_optimizer_path as default,
   render
 };

package/dist/main.es171.js

@@ -2,13 +2,13 @@ import "./main.es3.js";
 import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
 const _hoisted_1 = {
   xmlns: "http://www.w3.org/2000/svg",
-  width: "14",
-  height: "14",
+  width: "96",
+  height: "191",
   fill: "none"
 };
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#263238",
-  d: "M12.444 0H1.556C.7 0 0 .7 0 1.556v10.888C0 13.3.7 14 1.556 14h10.888C13.3 14 14 13.3 14 12.444V1.556C14 .7 13.3 0 12.444 0M7.801 3.158l.825-.825L9.722 3.43l1.097-1.097.824.825-1.096 1.096 1.096 1.097-.824.825-1.097-1.09-1.096 1.097L7.8 5.36l1.097-1.097zm-5.273.513h3.889v1.167h-3.89zm4.083 6.44H5.056v1.556H3.889V10.11H2.333V8.944H3.89V7.39h1.167v1.555H6.61zm5.056.972h-3.89V9.917h3.89zm0-1.944h-3.89V7.972h3.89z"
+  fill: "#000",
+  d: "M96 191H0V0h96zm-95-1h94V96H1zm73-27H22v-40h52zm-51-1h50v-38H23zm8.718-34.621a.5.5 0 0 1 .5.5v30.244a.5.5 0 0 1-1 0V143.5h-6.066v-1h6.066v-14.621a.5.5 0 0 1 .5-.5m13.656 0a.5.5 0 0 1 .5.5v30.244a.5.5 0 0 1-1 0v-30.244a.5.5 0 0 1 .5-.5m13.655 0a.5.5 0 0 1 .5.5v30.244a.5.5 0 0 1-1 0v-30.244a.5.5 0 0 1 .5-.5m-22.298 7.816a.5.5 0 0 1 .5.5v14.61a.5.5 0 0 1-.5.5h-.575a.5.5 0 0 1-.5-.5v-14.61a.5.5 0 0 1 .5-.5zm13.657 0a.5.5 0 0 1 .5.5v14.61a.5.5 0 0 1-.5.5h-.575a.5.5 0 0 1-.5-.5v-14.61a.5.5 0 0 1 .5-.5zm13.658 0a.5.5 0 0 1 .5.5v6.573h6.302v1.463h-6.302v6.574a.5.5 0 0 1-.5.5h-.575a.5.5 0 0 1-.5-.5v-14.61a.5.5 0 0 1 .5-.5zM1.707 95H95V1.707zM1 94.293 94.293 1H1z"
 }, null, -1);
 const _hoisted_3 = [
   _hoisted_2
@@ -16,8 +16,8 @@ const _hoisted_3 = [
 function render(_ctx, _cache) {
   return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
 }
-const length_calculator = { render };
+const ed_integratedbatteryinverter = { render };
 export {
-  length_calculator as default,
+  ed_integratedbatteryinverter as default,
   render
 };

package/dist/main.es172.js

@@ -1,20 +1,23 @@
 import "./main.es3.js";
-import { openBlock, createElementBlock, createStaticVNode } from "./main.es6.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
 const _hoisted_1 = {
   xmlns: "http://www.w3.org/2000/svg",
-  width: "34",
-  height: "32",
+  width: "96",
+  height: "96",
   fill: "none"
 };
-const _hoisted_2 = /* @__PURE__ */ createStaticVNode('<path fill="#666" d="m30.027 35.049 5.445-5.861.5 5.925z"></path><path stroke="#666" stroke-miterlimit="10" d="m34.527 33.687-6.5-4.5"></path><path stroke="#666" stroke-dasharray="2 2" stroke-miterlimit="10" d="m20.027 23.687 8 5.5"></path><path fill="#666" d="m9.973 35.049-5.445-5.861-.5 5.925z"></path><path stroke="#666" stroke-miterlimit="10" d="m5.473 33.687 6.5-4.5"></path><path stroke="#666" stroke-dasharray="2 2" stroke-miterlimit="10" d="m19.973 23.687-8 5.5"></path><path fill="#666" d="M24.027 9.287h-8l4-4.4z"></path><path stroke="#666" stroke-miterlimit="10" d="M20.027 6.187v9"></path><path stroke="#666" stroke-dasharray="2 2" stroke-miterlimit="10" d="M20.027 15.187v8"></path><path stroke="#666" d="m12.027 18.687 8-4.5 8 4.5m-16 0 8 4.5m-8-4.5v10.5l8 5m0-11 8-4.5m-8 4.5v11m8-15.5v10.5l-8 5"></path>', 10);
-const _hoisted_12 = [
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#000",
+  d: "M96 96H0V0h96zM1.706 95H95V1.706zM1 94.292 94.292 1H1z"
+}, null, -1);
+const _hoisted_3 = [
   _hoisted_2
 ];
 function render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_12);
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
 }
-const length_in_2d_active = { render };
+const ed_inverterBlank = { render };
 export {
-  length_in_2d_active as default,
+  ed_inverterBlank as default,
   render
 };

package/dist/main.es173.js

@@ -1,20 +1,23 @@
 import "./main.es3.js";
-import { openBlock, createElementBlock, createStaticVNode } from "./main.es6.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
 const _hoisted_1 = {
   xmlns: "http://www.w3.org/2000/svg",
-  width: "42",
-  height: "42",
+  width: "64",
+  height: "98",
   fill: "none"
 };
-const _hoisted_2 = /* @__PURE__ */ createStaticVNode('<path fill="#B2B9C5" d="M0 0h40v40H0z"></path><path fill="#fff" d="m30.027 35.049 5.445-5.861.5 5.925z"></path><path stroke="#fff" stroke-miterlimit="10" d="m34.527 33.687-6.5-4.5"></path><path stroke="#fff" stroke-dasharray="2 2" stroke-miterlimit="10" d="m20.027 23.687 8 5.5"></path><path fill="#fff" d="m9.973 35.049-5.445-5.861-.5 5.925z"></path><path stroke="#fff" stroke-miterlimit="10" d="m5.473 33.687 6.5-4.5"></path><path stroke="#fff" stroke-dasharray="2 2" stroke-miterlimit="10" d="m19.973 23.687-8 5.5"></path><path fill="#fff" d="M24.027 9.287h-8l4-4.4z"></path><path stroke="#fff" stroke-miterlimit="10" d="M20.027 6.187v9"></path><path stroke="#fff" stroke-dasharray="2 2" stroke-miterlimit="10" d="M20.027 15.187v8"></path><path stroke="#fff" d="m12.027 18.687 8-4.5 8 4.5m-16 0 8 4.5m-8-4.5v10.5l8 5m0-11 8-4.5m-8 4.5v11m8-15.5v10.5l-8 5"></path>', 11);
-const _hoisted_13 = [
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#000",
+  d: "M64 98H0V0h64zM1 49.5V97h62V49.5zm0-1h62V1H1z"
+}, null, -1);
+const _hoisted_3 = [
   _hoisted_2
 ];
 function render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_13);
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
 }
-const length_in_2d_inctive = { render };
+const ed_mainsconnection = { render };
 export {
-  length_in_2d_inctive as default,
+  ed_mainsconnection as default,
   render
 };

package/dist/main.es174.js

@@ -2,13 +2,13 @@ import "./main.es3.js";
 import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
 const _hoisted_1 = {
   xmlns: "http://www.w3.org/2000/svg",
-  width: "12",
-  height: "16",
+  width: "64",
+  height: "98",
   fill: "none"
 };
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#263238",
-  d: "M17.9 26.3c0 .35.28.7.7.7h2.8c.42 0 .7-.35.7-.7v-.7h-4.2zM20 13a4.87 4.87 0 0 0-4.9 4.9c0 1.68.84 3.15 2.1 3.99v1.61c0 .35.28.7.7.7h4.2c.42 0 .7-.35.7-.7v-1.61c1.26-.91 2.1-2.38 2.1-3.99 0-2.73-2.17-4.9-4.9-4.9"
+  fill: "#000",
+  d: "M64 98H0V0h64zM1 33.5V97h62V33.5zm0-1h62V1H1z"
 }, null, -1);
 const _hoisted_3 = [
   _hoisted_2
@@ -16,8 +16,8 @@ const _hoisted_3 = [
 function render(_ctx, _cache) {
   return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
 }
-const light_bulb = { render };
+const ed_meterBlank = { render };
 export {
-  light_bulb as default,
+  ed_meterBlank as default,
   render
 };

package/dist/main.es175.js

@@ -2,17 +2,22 @@ import "./main.es3.js";
 import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
 const _hoisted_1 = {
   xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 14 14"
+  width: "64",
+  height: "98",
+  fill: "none"
 };
-const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", { d: "M7.595 1.205 4.123 4.676a1.25 1.25 0 0 0-.363.884v6.26c0 .69.564 1.253 1.253 1.253h5.64c.5 0 .952-.3 1.153-.758l2.042-4.769c.527-1.24-.382-2.619-1.73-2.619h-3.54l.596-2.87a.95.95 0 0 0-.257-.858.93.93 0 0 0-1.322.006M1.253 13.073c.69 0 1.253-.564 1.253-1.253V6.807c0-.69-.563-1.253-1.253-1.253C.564 5.554 0 6.118 0 6.807v5.013c0 .69.564 1.253 1.253 1.253" }, null, -1);
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#000",
+  d: "M64 98H0V0h64zM1 97h62V33.25H1zm0-64.75h62V1H1zM19.053 16h38.595v1H19.053v4L6.35 16.5 19.053 12z"
+}, null, -1);
 const _hoisted_3 = [
   _hoisted_2
 ];
 function render(_ctx, _cache) {
   return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
 }
-const like = { render };
+const ed_meter_arrowleft = { render };
 export {
-  like as default,
+  ed_meter_arrowleft as default,
   render
 };

package/dist/main.es176.js

@@ -2,13 +2,13 @@ import "./main.es3.js";
 import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
 const _hoisted_1 = {
   xmlns: "http://www.w3.org/2000/svg",
-  width: "16",
-  height: "10",
+  width: "64",
+  height: "98",
   fill: "none"
 };
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#263238",
-  d: "M27 17.455c0 .7-.573 1.272-1.273 1.272q-.172.002-.324-.044l-2.266 2.259c.032.102.045.216.045.33 0 .7-.573 1.274-1.273 1.274a1.276 1.276 0 0 1-1.228-1.604l-1.623-1.623a1.1 1.1 0 0 1-.33.045c-.115 0-.23-.013-.332-.045l-2.895 2.902q.046.153.045.325c0 .7-.573 1.272-1.273 1.272S13 23.245 13 22.545s.573-1.272 1.273-1.272q.172-.002.324.044l2.902-2.895a1.277 1.277 0 0 1 1.228-1.604 1.277 1.277 0 0 1 1.229 1.604l1.622 1.623c.102-.032.216-.045.331-.045s.23.013.331.045l2.26-2.266a1.1 1.1 0 0 1-.046-.324c0-.7.573-1.273 1.273-1.273S27 16.755 27 17.455"
+  fill: "#000",
+  d: "M64 98H0V0h64zM1 97h62V33.25H1zm0-64.75h62V1H1zM57.65 16.5 44.946 21v-4H6.352v-1h38.595v-4z"
 }, null, -1);
 const _hoisted_3 = [
   _hoisted_2
@@ -16,8 +16,8 @@ const _hoisted_3 = [
 function render(_ctx, _cache) {
   return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
 }
-const line_graph = { render };
+const ed_meter_arrowright = { render };
 export {
-  line_graph as default,
+  ed_meter_arrowright as default,
   render
 };

package/dist/main.es177.js

@@ -1,20 +1,23 @@
 import "./main.es3.js";
-import { openBlock, createElementBlock, createStaticVNode } from "./main.es6.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
 const _hoisted_1 = {
   xmlns: "http://www.w3.org/2000/svg",
-  width: "42",
-  height: "42",
+  width: "64",
+  height: "98",
   fill: "none"
 };
-const _hoisted_2 = /* @__PURE__ */ createStaticVNode('<path fill="#B2B9C5" d="M40 35.3H0v5h40z"></path><path fill="#fff" d="M25.1 32.3c-.4 2.8-2.5 5-5.1 5s-4.7-2.2-5.1-5zM2 33.3c2.8 0 5 2.2 5 5H2zM33 38.3c0-2.8 2.2-5 5-5v5z"></path><path fill="#fff" d="M25.1 32.3c-.4 2.8-2.5 5-5.1 5s-4.7-2.2-5.1-5zM2 33.3c2.8 0 5 2.2 5 5H2zM33 38.3c0-2.8 2.2-5 5-5v5z"></path><path fill="#009688" d="M40 15.3H0v18h40z"></path><path fill="#fff" d="M20 30.3c2.817 0 5.1-2.686 5.1-6s-2.283-6-5.1-6-5.1 2.686-5.1 6 2.283 6 5.1 6M7 17.3c0 2.8-2.2 5-5 5v-5zM2 26.3c2.8 0 5 2.2 5 5H2zM33 31.3c0-2.8 2.2-5 5-5v5zM38 22.3c-2.8 0-5-2.2-5-5h5z"></path><path fill="#F44A4A" d="M20 9.5h-8.8c0 5.9 4.9 11.8 8.8 15.6 3.9-3.9 8.8-9.8 8.8-15.6z"></path><path fill="#F44A4A" d="M20 18.3A8.8 8.8 0 1 0 20 .7a8.8 8.8 0 0 0 0 17.6"></path><path fill="#fff" d="M20 12.4a2.9 2.9 0 1 0 0-5.8 2.9 2.9 0 0 0 0 5.8"></path>', 8);
-const _hoisted_10 = [
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#000",
+  d: "M64 98H0V0h64zM1 97h62V33.25H1zm0-64.75h62V1H1zM57.648 16.5 44.946 21v-4H19.054v4L6.352 16.5 19.054 12v4h25.892v-4z"
+}, null, -1);
+const _hoisted_3 = [
   _hoisted_2
 ];
 function render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_10);
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
 }
-const local_subsidies = { render };
+const ed_meter_bidirectional = { render };
 export {
-  local_subsidies as default,
+  ed_meter_bidirectional as default,
   render
 };

package/dist/main.es178.js

@@ -2,15 +2,13 @@ import "./main.es3.js";
 import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
 const _hoisted_1 = {
   xmlns: "http://www.w3.org/2000/svg",
-  width: "13",
-  height: "16",
+  width: "136",
+  height: "64",
   fill: "none"
 };
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#263238",
-  "fill-rule": "evenodd",
-  d: "M14.75 18.25v.256c0 1.25.425 2.463 1.207 3.44L20 27l4.043-5.054a5.5 5.5 0 0 0 1.207-3.44v-.256a5.25 5.25 0 1 0-10.5 0M20 20a1.75 1.75 0 1 0 0-3.5 1.75 1.75 0 0 0 0 3.5",
-  "clip-rule": "evenodd"
+  fill: "#000",
+  d: "m99.124 30.377-.865.872H136v1.5h-22.672v8.392h4.539v10.667h-10.578V49.51h-2.821v-1.5h2.821v-3.072h-2.976v-1.5h2.976v-2.298h4.539v-8.392h-13.57l.867.873-1.057 1.066-1.61-1.625-1.608 1.624-1.057-1.065L95.403 32l-1.61-1.622 1.058-1.064 1.608 1.62 1.608-1.62zm9.665 12.264v7.667h7.578V42.64zM33.49 48.01h2.07v1.5h-3.57v-3.406h1.5zm10.354 1.5h-5.642v-1.5h5.642zm8.283 0h-5.642v-1.5h5.642zm8.283 0H54.77v-1.5h5.641zm8.283 0h-5.641v-1.5h5.641zm8.284 0h-5.642v-1.5h5.642zm8.283 0h-5.642v-1.5h5.642zm8.283 0h-5.642v-1.5h5.642zm8.283 0h-5.641v-1.5h5.641zM81.342 43.44h2.224v1.5h-3.724v-2.262h1.5zm11.123 1.5h-5.95v-1.5h5.95zm8.899 0h-5.949v-1.5h5.949zM33.49 43.796h-1.5v-3.404h1.5zm47.852-1.143h-1.5v-2.261h1.5zm15.55-18.561-15.55 3.863v6.318h-1.5v-5.945l-17.705 4.4-.09.021H49.903l.867.873-1.057 1.066-1.61-1.625-1.609 1.624-1.056-1.065L47.047 32l-1.608-1.622 1.056-1.064 1.608 1.62 1.609-1.62 1.057 1.064-.866.872h11.962l17.977-4.467v-.105h.427l16.261-4.04zm-48.355 0L33.49 27.83v6.443h-1.5v-6.07l-18.209 4.525-.089.021H0v-1.5h13.51l34.666-8.612z"
 }, null, -1);
 const _hoisted_3 = [
   _hoisted_2
@@ -18,8 +16,8 @@ const _hoisted_3 = [
 function render(_ctx, _cache) {
   return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
 }
-const location = { render };
+const ed_networkandsystemprotection_double = { render };
 export {
-  location as default,
+  ed_networkandsystemprotection_double as default,
   render
 };

package/dist/main.es179.js

@@ -2,15 +2,13 @@ import "./main.es3.js";
 import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
 const _hoisted_1 = {
   xmlns: "http://www.w3.org/2000/svg",
-  width: "12",
-  height: "16",
+  width: "88",
+  height: "64",
   fill: "none"
 };
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#263238",
-  "fill-rule": "evenodd",
-  d: "M16.5 18.25V16.5a3.5 3.5 0 1 1 7 0v1.75h1.75V27h-10.5v-8.75zm1.75-1.75a1.75 1.75 0 1 1 3.5 0v1.75h-3.5zm.875 7.875v-3.5h1.75v3.5z",
-  "clip-rule": "evenodd"
+  fill: "#000",
+  d: "m50.929 30.334-.976.98H88v1.374H65.17v8.455h4.623V51.81H59.172v-4.646h-2.879V45.79h2.879v-4.646h4.623v-8.455h-13.84l.976.98-.97.976-1.662-1.67-1.662 1.67-.97-.975L47.328 32l-1.66-1.666.972-.975 1.659 1.666 1.659-1.666zm9.618 12.184v7.917h7.871v-7.917zM33.56 45.789h2.191v1.375h-3.567v-2.708h1.375zm10.958 1.375H38.76V45.79h5.758zm8.766 0h-5.759V45.79h5.76zm-19.724-4h-1.376v-2.708h1.375zm14.99-19.798.167.667-15.158 3.75v6.429h-1.375v-6.088L13.82 32.669l-.08.02H0v-1.375h13.573l34.814-8.615z"
 }, null, -1);
 const _hoisted_3 = [
   _hoisted_2
@@ -18,8 +16,8 @@ const _hoisted_3 = [
 function render(_ctx, _cache) {
   return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
 }
-const lock = { render };
+const ed_networkandsystemprotection_single = { render };
 export {
-  lock as default,
+  ed_networkandsystemprotection_single as default,
   render
 };

package/dist/main.es18.js

@@ -1,78 +1,229 @@
 import styled from "./main.es7.js";
-import PlusButtonSvg from "./main.es268.js";
 import "./main.es3.js";
-import _export_sfc from "./main.es10.js";
-import { resolveComponent, openBlock, createBlock, withCtx, createVNode } from "./main.es6.js";
-const pageAttrs = {
-  shouldPosition: Boolean
-};
-const PageContainer = styled("div", pageAttrs)`
-    position: ${(props) => props.shouldPosition ? "fixed" : "unset"};
-    bottom: 30px;
-    right: 30px;
+import _export_sfc from "./main.es11.js";
+import { resolveComponent, openBlock, createBlock, withCtx, createVNode, createTextVNode } from "./main.es6.js";
+import { toDisplayString } from "./main.es22.js";
+const Container = styled.div`
+    position: relative;
+    display: flex;
+    height: 47px;
+    width: ${(props) => props.width};
   `;
-const ButtonContainer = styled.div`
-    height: 60px;
-    width: 60px;
-    background-color: ${(props) => props.theme.colors.green};
-    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-    border-radius: 100%;
-    cursor: pointer;
-    display: grid;
-    align-items: center;
-    justify-items: center;
-
-    &:hover {
-      background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
-        ${(props) => props.theme.colors.green};
-    }
+const TopValueContainer = styled("div", {
+  position: String
+})`
+    font-size: 11px;
+    left: ${(props) => props.position};
+    position: absolute;
+    display: flex;
+    justify-content: center
+    width: 0px;
+    color:${(props) => props.theme.colors.black};
+    item-align: center;
 
-    &:active,
-    &:focus {
-      background: ${(props) => props.theme.colors.green};
-    }
+  `;
+const BottomValueContainer = styled("div", {
+  position: String
+})`
+    font-size: 12px;
+    left: ${(props) => props.position};
+    width: 0px;
+    bottom: -2px;
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    item-align: center;
+    border-radius: 4px;
+    color: white;
+  `;
+const TextWrapper = styled("div", {
+  backgroundColor: String
+})`
+    padding: 2px 6px;
+    background-color: ${(props) => props.theme.colors[props.backgroundColor] || props.backgroundColor};
+    border-radius: 4px;
+  `;
+const Arrow = styled("div", {
+  backgroundColor: String
+})`
+    position: absolute;
+    bottom: -10px;
+    left: calc(50% - 6px);
+    width: 0;
+    height: 0;
+    border: 6px solid transparent;
+    border-top-color: ${(props) => props.theme.colors[props.backgroundColor] || props.backgroundColor};
+    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
+  `;
+const MainLine = styled.div`
+    display: block;
+    position: absolute;
+    bottom: 16px;
+    height: 4px;
+    width: 100%;
+    border-radius: 4px;
+    background-color: ${(props) => props.theme.colors.grey4};
+  `;
+const MainLineHighlight = styled("div", {
+  minPercent: Number,
+  maxPercent: Number
+})`
+    display: block;
+    position: absolute;
+    left: ${(props) => props.minPercent + "%"};
+    right: ${(props) => 100 - props.maxPercent + "%"};
+    bottom: 16px;
+    height: 4px;
+    background-color: white;
+  `;
+const VerticalMarker = styled("div")`
+    position: absolute;
+    width: 1px;
+    height: 8px;
+    background-color: white;
+    display: inline-block;
+    top: -6px;
+    left: 0px;
+  `;
+const VerticalMarkerArrow = styled("div", {
+  color: String
+})`
+    position: absolute;
+    width: 1px;
+    height: 4px;
+    background-color: ${(props) => props.color};
+    display: inline-block;
+    bottom: -14px;
+    left: 0px;
   `;
 const _sfc_main = {
-  name: "AddNewButton",
+  name: "ProgressBar",
   components: {
-    PageContainer,
-    ButtonContainer,
-    PlusButtonSvg
+    Container,
+    MainLineHighlight,
+    Arrow,
+    TopValueContainer,
+    BottomValueContainer,
+    MainLine,
+    VerticalMarker,
+    VerticalMarkerArrow,
+    TextWrapper
   },
   props: {
-    shouldPosition: {
-      required: false,
-      default: true,
-      type: Boolean
+    minValue: {
+      required: true,
+      type: Number
+    },
+    maxValue: {
+      required: true,
+      type: Number
     },
-    dataId: {
+    value: {
+      required: true,
+      type: Number
+    },
+    arrowColor: {
+      required: false,
       type: String,
-      default: ""
+      default: "white"
     },
-    dataQaId: {
+    width: {
+      required: false,
       type: String,
-      default: ""
+      default: null
+    }
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    minPercent() {
+      if (this.maxValue === this.minValue) {
+        return 50;
+      } else {
+        return 30;
+      }
+    },
+    maxPercent() {
+      if (this.maxValue === this.minValue) {
+        return 50;
+      } else {
+        return 70;
+      }
+    },
+    valuePercent() {
+      let percent;
+      if (this.maxValue === this.minValue) {
+        percent = this.minPercent + 10 * (this.value - this.minValue);
+      } else {
+        percent = this.minPercent + (this.maxPercent - this.minPercent) / (this.maxValue - this.minValue) * (this.value - this.minValue);
+      }
+      return Math.max(0, Math.min(100, percent));
+    },
+    colorVerticalMarkerArrow() {
+      if (this.value < this.maxValue && this.value > this.minValue) {
+        return "black";
+      } else {
+        return "white";
+      }
     }
   }
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_PlusButtonSvg = resolveComponent("PlusButtonSvg");
-  const _component_ButtonContainer = resolveComponent("ButtonContainer");
-  const _component_PageContainer = resolveComponent("PageContainer");
-  return openBlock(), createBlock(_component_PageContainer, {
-    "should-position": $props.shouldPosition
+  const _component_MainLine = resolveComponent("MainLine");
+  const _component_MainLineHighlight = resolveComponent("MainLineHighlight");
+  const _component_TextWrapper = resolveComponent("TextWrapper");
+  const _component_Arrow = resolveComponent("Arrow");
+  const _component_VerticalMarkerArrow = resolveComponent("VerticalMarkerArrow");
+  const _component_TopValueContainer = resolveComponent("TopValueContainer");
+  const _component_VerticalMarker = resolveComponent("VerticalMarker");
+  const _component_BottomValueContainer = resolveComponent("BottomValueContainer");
+  const _component_Container = resolveComponent("Container");
+  return openBlock(), createBlock(_component_Container, {
+    width: $props.width
   }, {
-    default: withCtx(() => [createVNode(_component_ButtonContainer, {
-      "data-id": $props.dataId,
-      "data-qa-id": $props.dataQaId
+    default: withCtx(() => [createVNode(_component_MainLine), createTextVNode(), createVNode(_component_MainLineHighlight, {
+      "max-percent": $options.maxPercent,
+      "min-percent": $options.minPercent
+    }, null, 8, ["max-percent", "min-percent"]), createTextVNode(), createVNode(_component_TopValueContainer, {
+      position: $options.valuePercent + "%"
+    }, {
+      default: withCtx(() => [createVNode(_component_TextWrapper, {
+        "background-color": $props.arrowColor
+      }, {
+        default: withCtx(() => [createTextVNode(toDisplayString($props.value), 1)]),
+        _: 1
+      }, 8, ["background-color"]), createTextVNode(), createVNode(_component_Arrow, {
+        "background-color": $props.arrowColor
+      }, null, 8, ["background-color"]), createTextVNode(), createVNode(_component_VerticalMarkerArrow, {
+        color: $options.colorVerticalMarkerArrow
+      }, null, 8, ["color"])]),
+      _: 1
+    }, 8, ["position"]), createTextVNode(), createVNode(_component_BottomValueContainer, {
+      position: $options.minPercent + "%"
+    }, {
+      default: withCtx(() => [createVNode(_component_TextWrapper, null, {
+        default: withCtx(() => [createTextVNode(toDisplayString($props.minValue), 1)]),
+        _: 1
+      }), createTextVNode(), createVNode(_component_VerticalMarker, {
+        side: "bottom"
+      })]),
+      _: 1
+    }, 8, ["position"]), createTextVNode(), createVNode(_component_BottomValueContainer, {
+      position: $options.maxPercent + "%"
     }, {
-      default: withCtx(() => [createVNode(_component_PlusButtonSvg)]),
+      default: withCtx(() => [createVNode(_component_TextWrapper, null, {
+        default: withCtx(() => [createTextVNode(toDisplayString($props.maxValue), 1)]),
+        _: 1
+      }), createTextVNode(), createVNode(_component_VerticalMarker, {
+        side: "bottom"
+      })]),
       _: 1
-    }, 8, ["data-id", "data-qa-id"])]),
+    }, 8, ["position"])]),
     _: 1
-  }, 8, ["should-position"]);
+  }, 8, ["width"]);
 }
-const AddNewButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+const PanelRangeInfo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  AddNewButton as default
+  PanelRangeInfo as default
 };

package/dist/main.es180.js

@@ -2,13 +2,13 @@ import "./main.es3.js";
 import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
 const _hoisted_1 = {
   xmlns: "http://www.w3.org/2000/svg",
-  width: "17",
-  height: "18",
+  width: "80",
+  height: "40",
   fill: "none"
 };
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#263238",
-  d: "m12.173 4.517 3.069 3.069.414.414h.02v.02l.98.98-.98.98V10h-.02l-.414.414-3.069 3.069-1.414-1.414L12.827 10H4.676V8h8.151l-2.069-2.069zM0 2v16h7v-2H2V2h5V0H0z"
+  fill: "#000",
+  d: "M80 0v40H0V0zM.213 39.787h79.574V.213H.213zm79.398-39L55.343 20 79.61 39.213H.787V.787zM79 39 55 20 79 1H1v38z"
 }, null, -1);
 const _hoisted_3 = [
   _hoisted_2
@@ -16,8 +16,8 @@ const _hoisted_3 = [
 function render(_ctx, _cache) {
   return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
 }
-const logout = { render };
+const ed_pvpanel__Stroke_ = { render };
 export {
-  logout as default,
+  ed_pvpanel__Stroke_ as default,
   render
 };