@eturnity/eturnity_reusable_components 8.22.5 → 8.22.6

package/dist/main.es120.js

@@ -1,25 +1,20 @@
 import "./main.es3.js";
-import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+import { openBlock, createElementBlock, createStaticVNode } from "./main.es6.js";
 const _hoisted_1 = {
   xmlns: "http://www.w3.org/2000/svg",
-  width: "10",
-  height: "12",
+  width: "14",
+  height: "14",
   fill: "none"
 };
-const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#000",
-  "fill-rule": "evenodd",
-  d: "M1.953.14C1.332.14.828.645.828 1.267v9.468c0 .622.504 1.125 1.125 1.125h6.094c.621 0 1.125-.503 1.125-1.125V3.78c0-.298-.119-.584-.33-.795L6.33.47a1.13 1.13 0 0 0-.796-.33zm-.375 1.126c0-.207.168-.375.375-.375h3.58q.098 0 .182.046h-.246v2.204c0 .621.503 1.125 1.125 1.125h1.781v-.668q.046.084.047.181v6.955a.375.375 0 0 1-.375.375H1.953a.375.375 0 0 1-.375-.375zm6.735 2.25-.001-.002-2.093-2.093v1.72c0 .207.168.375.375.375z",
-  "clip-rule": "evenodd"
-}, null, -1);
-const _hoisted_3 = [
+const _hoisted_2 = /* @__PURE__ */ createStaticVNode('<path fill="#B2B9C5" d="M12.8 5.98v5h-1.6v-5z"></path><path fill="#B2B9C5" fill-rule="evenodd" d="M12 5.98a1 1 0 1 0 0-2 1 1 0 0 0 0 2m0 1a2 2 0 1 0 0-4 2 2 0 0 0 0 4M12 12.98a1 1 0 1 0 0-2 1 1 0 0 0 0 2m0 1a2 2 0 1 0 0-4 2 2 0 0 0 0 4M5 5.98a1 1 0 1 0 0-2 1 1 0 0 0 0 2m0 1a2 2 0 1 0 0-4 2 2 0 0 0 0 4M5 12.98a1 1 0 1 0 0-2 1 1 0 0 0 0 2m0 1a2 2 0 1 0 0-4 2 2 0 0 0 0 4" clip-rule="evenodd"></path><path fill="#B2B9C5" d="M5.8 5.979v5H4.2v-5zM11.002 5.78h-5v-1.6h5zM11.002 12.781h-5v-1.6h5zM3.427 2.295l1.158 1.158-1.132 1.132-1.158-1.158z"></path><path fill="#B2B9C5" d="m6.72 5.589 1.047 1.047-1.131 1.131L5.589 6.72zM9.47 8.34l-1.11-1.11-1.13 1.13 1.11 1.111zM1.862.73l1.016 1.017-1.131 1.131L.731 1.862z"></path><path fill="#B2B9C5" d="M0 0h3L0 3zM10 10H7l3-3z"></path>', 5);
+const _hoisted_7 = [
   _hoisted_2
 ];
 function render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_7);
 }
-const documents = { render };
+const distort_tool2 = { render };
 export {
-  documents as default,
+  distort_tool2 as default,
   render
 };

package/dist/main.es121.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: "16",
+  width: "12",
   height: "16",
   fill: "none"
 };
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
   fill: "#263238",
-  "fill-rule": "evenodd",
-  d: "M15 4.5A1.5 1.5 0 0 0 13.5 3h-11A1.5 1.5 0 0 0 1 4.5v7A1.5 1.5 0 0 0 2.5 13h8.086a1.5 1.5 0 0 0 1.06-.44l2.915-2.914A1.5 1.5 0 0 0 15 8.586zM13.5 4a.5.5 0 0 1 .5.5v4h-2.5A1.5 1.5 0 0 0 10 10v2H2.5a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .5-.5zM11 11.793 13.293 9.5H11.5a.5.5 0 0 0-.5.5z",
-  "clip-rule": "evenodd"
+  d: "M21.746 13H15v14h10.5V16.754zm-4.882 4.191h2.913v2.914h-2.913zm6.764 6.712h-6.764v-1.61h6.764z"
 }, 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 documents_landscape = { render };
+const document = { render };
 export {
-  documents_landscape as default,
+  document as default,
   render
 };

package/dist/main.es122.js

@@ -2,13 +2,15 @@ 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: "100",
-  height: "30",
+  width: "10",
+  height: "12",
   fill: "none"
 };
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "red",
-  d: "M100 19H4l5-4H6l-6 5 6 5h3l-5-4h96ZM0 9h96l-5-4h3l6 5-6 5h-3l5-4H0Z"
+  fill: "#000",
+  "fill-rule": "evenodd",
+  d: "M1.953.14C1.332.14.828.645.828 1.267v9.468c0 .622.504 1.125 1.125 1.125h6.094c.621 0 1.125-.503 1.125-1.125V3.78c0-.298-.119-.584-.33-.795L6.33.47a1.13 1.13 0 0 0-.796-.33zm-.375 1.126c0-.207.168-.375.375-.375h3.58q.098 0 .182.046h-.246v2.204c0 .621.503 1.125 1.125 1.125h1.781v-.668q.046.084.047.181v6.955a.375.375 0 0 1-.375.375H1.953a.375.375 0 0 1-.375-.375zm6.735 2.25-.001-.002-2.093-2.093v1.72c0 .207.168.375.375.375z",
+  "clip-rule": "evenodd"
 }, null, -1);
 const _hoisted_3 = [
   _hoisted_2
@@ -16,8 +18,8 @@ const _hoisted_3 = [
 function render(_ctx, _cache) {
   return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
 }
-const double_arrow_long = { render };
+const documents = { render };
 export {
-  double_arrow_long as default,
+  documents as default,
   render
 };

package/dist/main.es123.js

@@ -8,7 +8,9 @@ const _hoisted_1 = {
 };
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
   fill: "#263238",
-  d: "m26.642 14.734-1.08-1.306a1.13 1.13 0 0 0-.895-.428h-9.334c-.365 0-.684.163-.902.428l-1.073 1.306a1.52 1.52 0 0 0-.358.988v9.722C13 26.3 13.7 27 14.556 27h10.888C26.3 27 27 26.3 27 25.444v-9.722c0-.373-.132-.723-.358-.988M20 24.278 15.722 20h2.722v-1.556h3.112V20h2.722zm-5.351-9.722.63-.778h9.333l.731.778z"
+  "fill-rule": "evenodd",
+  d: "M15 4.5A1.5 1.5 0 0 0 13.5 3h-11A1.5 1.5 0 0 0 1 4.5v7A1.5 1.5 0 0 0 2.5 13h8.086a1.5 1.5 0 0 0 1.06-.44l2.915-2.914A1.5 1.5 0 0 0 15 8.586zM13.5 4a.5.5 0 0 1 .5.5v4h-2.5A1.5 1.5 0 0 0 10 10v2H2.5a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .5-.5zM11 11.793 13.293 9.5H11.5a.5.5 0 0 0-.5.5z",
+  "clip-rule": "evenodd"
 }, null, -1);
 const _hoisted_3 = [
   _hoisted_2
@@ -16,8 +18,8 @@ const _hoisted_3 = [
 function render(_ctx, _cache) {
   return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
 }
-const downarrow = { render };
+const documents_landscape = { render };
 export {
-  downarrow as default,
+  documents_landscape as default,
   render
 };

package/dist/main.es124.js

@@ -2,29 +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",
-  width: "14",
-  height: "14",
+  width: "100",
+  height: "30",
   fill: "none"
 };
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#fff",
-  d: "m11 6.5-4 4-4-4"
+  fill: "red",
+  d: "M100 19H4l5-4H6l-6 5 6 5h3l-5-4h96ZM0 9h96l-5-4h3l6 5-6 5h-3l5-4H0Z"
 }, null, -1);
-const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
-  stroke: "#6F20DC",
-  "stroke-linecap": "round",
-  "stroke-linejoin": "round",
-  d: "M13 13H1m10-6.5-4 4m0 0-4-4m4 4V1"
-}, null, -1);
-const _hoisted_4 = [
-  _hoisted_2,
-  _hoisted_3
+const _hoisted_3 = [
+  _hoisted_2
 ];
 function render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_4);
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
 }
-const download = { render };
+const double_arrow_long = { render };
 export {
-  download as default,
+  double_arrow_long as default,
   render
 };

package/dist/main.es125.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: "10",
+  width: "16",
   height: "16",
   fill: "none"
 };
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#B2B9C5",
-  d: "M4 2a2 2 0 1 1-4 0 2 2 0 0 1 4 0M10 2a2 2 0 1 1-4 0 2 2 0 0 1 4 0M4 8a2 2 0 1 1-4 0 2 2 0 0 1 4 0M10 8a2 2 0 1 1-4 0 2 2 0 0 1 4 0M4 14a2 2 0 1 1-4 0 2 2 0 0 1 4 0M10 14a2 2 0 1 1-4 0 2 2 0 0 1 4 0"
+  fill: "#263238",
+  d: "m26.642 14.734-1.08-1.306a1.13 1.13 0 0 0-.895-.428h-9.334c-.365 0-.684.163-.902.428l-1.073 1.306a1.52 1.52 0 0 0-.358.988v9.722C13 26.3 13.7 27 14.556 27h10.888C26.3 27 27 26.3 27 25.444v-9.722c0-.373-.132-.723-.358-.988M20 24.278 15.722 20h2.722v-1.556h3.112V20h2.722zm-5.351-9.722.63-.778h9.333l.731.778z"
 }, 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 drag_icon = { render };
+const downarrow = { render };
 export {
-  drag_icon as default,
+  downarrow as default,
   render
 };

package/dist/main.es126.js

@@ -2,18 +2,19 @@ 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: "26",
-  height: "26",
+  width: "14",
+  height: "14",
   fill: "none"
 };
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#0068DE",
-  d: "m0 0 26 26H0z"
+  fill: "#fff",
+  d: "m11 6.5-4 4-4-4"
 }, null, -1);
 const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
-  stroke: "#fff",
+  stroke: "#6F20DC",
   "stroke-linecap": "round",
-  d: "m12.482 20.485-7.778-7.778M8.945 21.192l-4.95-4.949"
+  "stroke-linejoin": "round",
+  d: "M13 13H1m10-6.5-4 4m0 0-4-4m4 4V1"
 }, null, -1);
 const _hoisted_4 = [
   _hoisted_2,
@@ -22,8 +23,8 @@ const _hoisted_4 = [
 function render(_ctx, _cache) {
   return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_4);
 }
-const draggable_corner = { render };
+const download = { render };
 export {
-  draggable_corner as default,
+  download as default,
   render
 };

package/dist/main.es127.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: "14",
+  width: "10",
   height: "16",
   fill: "none"
 };
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
   fill: "#B2B9C5",
-  "fill-rule": "evenodd",
-  d: "m6 .936 2.499 2.142L6 5.221V3.864H3.833c-.202.461-.572.831-1.033 1.033v6.334c.461.202.831.572 1.033 1.033h6.334c.201-.46.57-.83 1.03-1.032V4.896a2 2 0 1 1 1.6.003v6.33a2 2 0 1 1-2.63 2.635H3.833A2 2 0 1 1 1.2 11.23V4.898a2 2 0 1 1 2.633-2.634H6zm7 12.128a1 1 0 0 0-.99-1h-.02a1 1 0 1 0 1.01 1M3 3.064a1 1 0 1 1-2 0 1 1 0 0 1 2 0m10.002 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0m-10.002 10a1 1 0 1 1-2 0 1 1 0 0 1 2 0",
-  "clip-rule": "evenodd"
+  d: "M4 2a2 2 0 1 1-4 0 2 2 0 0 1 4 0M10 2a2 2 0 1 1-4 0 2 2 0 0 1 4 0M4 8a2 2 0 1 1-4 0 2 2 0 0 1 4 0M10 8a2 2 0 1 1-4 0 2 2 0 0 1 4 0M4 14a2 2 0 1 1-4 0 2 2 0 0 1 4 0M10 14a2 2 0 1 1-4 0 2 2 0 0 1 4 0"
 }, 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 draw_tool = { render };
+const drag_icon = { render };
 export {
-  draw_tool as default,
+  drag_icon as default,
   render
 };

package/dist/main.es128.js

@@ -2,22 +2,28 @@ 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: "18",
+  width: "26",
+  height: "26",
   fill: "none"
 };
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#B2B9C5",
-  d: "M19 14a2 2 0 1 1-4 0 2 2 0 0 1 4 0M25 14a2 2 0 1 1-4 0 2 2 0 0 1 4 0M19 20a2 2 0 1 1-4 0 2 2 0 0 1 4 0M25 20a2 2 0 1 1-4 0 2 2 0 0 1 4 0M19 26a2 2 0 1 1-4 0 2 2 0 0 1 4 0M25 26a2 2 0 1 1-4 0 2 2 0 0 1 4 0"
+  fill: "#0068DE",
+  d: "m0 0 26 26H0z"
 }, null, -1);
-const _hoisted_3 = [
-  _hoisted_2
+const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
+  stroke: "#fff",
+  "stroke-linecap": "round",
+  d: "m12.482 20.485-7.778-7.778M8.945 21.192l-4.95-4.949"
+}, 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 duplicate1 = { render };
+const draggable_corner = { render };
 export {
-  duplicate1 as default,
+  draggable_corner as default,
   render
 };

package/dist/main.es129.js

@@ -2,27 +2,24 @@ 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",
+  width: "14",
   height: "16",
   fill: "none"
 };
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#263238",
-  d: "M25.65 27h-11.4c-.7 0-1.3-.6-1.3-1.3V14.3c0-.7.6-1.3 1.3-1.3h4.7v2h-3.1c-.5 0-.9.4-.9.9v8.3c0 .4.4.8.9.8h8.3c.5 0 .9-.4.9-.9V21h2v4.7c-.1.7-.7 1.3-1.4 1.3M20.95 13h6v6z"
+  fill: "#B2B9C5",
+  "fill-rule": "evenodd",
+  d: "m6 .936 2.499 2.142L6 5.221V3.864H3.833c-.202.461-.572.831-1.033 1.033v6.334c.461.202.831.572 1.033 1.033h6.334c.201-.46.57-.83 1.03-1.032V4.896a2 2 0 1 1 1.6.003v6.33a2 2 0 1 1-2.63 2.635H3.833A2 2 0 1 1 1.2 11.23V4.898a2 2 0 1 1 2.633-2.634H6zm7 12.128a1 1 0 0 0-.99-1h-.02a1 1 0 1 0 1.01 1M3 3.064a1 1 0 1 1-2 0 1 1 0 0 1 2 0m10.002 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0m-10.002 10a1 1 0 1 1-2 0 1 1 0 0 1 2 0",
+  "clip-rule": "evenodd"
 }, null, -1);
-const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#263238",
-  d: "m25.81 15.61-1.415-1.413-7.142 7.141 1.415 1.415z"
-}, null, -1);
-const _hoisted_4 = [
-  _hoisted_2,
-  _hoisted_3
+const _hoisted_3 = [
+  _hoisted_2
 ];
 function render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_4);
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
 }
-const duplicate2 = { render };
+const draw_tool = { render };
 export {
-  duplicate2 as default,
+  draw_tool as default,
   render
 };

package/dist/main.es13.js

@@ -1,261 +1,69 @@
 import styled from "./main.es7.js";
-import InfoText from "./main.es19.js";
+import PanelRangeInfo from "./main.es18.js";
+import IconCollection from "./main.es19.js";
 import "./main.es3.js";
-import _export_sfc from "./main.es10.js";
-import { withKeys, withModifiers } from "./main.es5.js";
-import { resolveComponent, openBlock, createBlock, withCtx, createVNode, createTextVNode, createCommentVNode } from "./main.es6.js";
-import { toDisplayString } from "./main.es20.js";
-const Container = styled.div`
-    display: inline-block;
-  `;
-const flexAttrs = {
-  size: String,
-  disabled: Boolean
-};
-const FlexWrapper = styled("div", flexAttrs)`
-    display: grid;
-    grid-template-columns: auto 1fr;
-    grid-gap: ${(props) => props.size === "medium" ? "20px" : props.size === "small" ? "10px" : "20px"};
-    align-items: center;
-    cursor: ${(props) => props.disabled ? "not-allowed" : "pointer"};
-  `;
-const toggleAttrs = {
-  size: String,
-  fontColor: String,
-  disabled: Boolean,
-  backgroundColor: String,
-  isChecked: Boolean
-};
-const LabelText = styled("div", toggleAttrs)`
-    color: ${(props) => props.fontColor ? props.fontColor : props.theme.colors.darkGray};
-    font-size: ${(props) => props.size === "medium" ? "16px" : props.size === "small" ? "13px" : "16px"};
-  `;
-const ToggleWrapper = styled("span", toggleAttrs)`
-  display: inline-block;
-  border: ${(props) => props.disabled ? "1px solid " + props.theme.colors.disabled : props.isChecked ? props.backgroundColor ? "1px solid " + props.backgroundColor : "1px solid " + props.theme.colors.green : "1px solid " + props.theme.colors.grey3}
-  position: relative;
-  cursor: ${(props) => props.disabled ? "not-allowed" : "pointer"};
-  width: ${(props) => props.size === "medium" ? "50px" : props.size === "small" ? "29px" : "50px"};
-  height: ${(props) => props.size === "medium" ? "24px" : props.size === "small" ? "16px" : "24px"};
-  border-radius: 100px;
-
-  &:focus {
-    outline: 0;
-  }
-
-  @media (max-width: ${(props) => props.theme.screen.mobile}) {
-    width: 80px;
-    height: 40px;
-  }
-`;
-const backgroundAttrs = {
-  backgroundColor: String,
-  isChecked: Boolean,
-  disabled: Boolean
-};
-const ToggleBackground = styled("span", backgroundAttrs)`
-    display: block;
-    border-radius: 100px;
-    height: 100%;
-    width: 100%;
-    background-color: ${(props) => props.disabled ? props.theme.colors.grey5 : props.isChecked ? props.backgroundColor ? props.backgroundColor : props.theme.colors.green : props.theme.colors.grey3};
-    transition: 0.4s ease;
-  `;
-const toggleProps = {
-  isChecked: Boolean,
-  toggleColor: String,
-  size: String,
-  disabled: Boolean
-};
-const ToggleDot = styled("span", toggleProps)`
-    position: absolute;
-    height: ${(props) => props.size === "medium" ? "14px" : props.size === "small" ? "10px" : "14px"};
-    width: ${(props) => props.size === "medium" ? "14px" : props.size === "small" ? "10px" : "14px"};
-    left: 3px;
-    bottom: ${(props) => props.size === "medium" ? "5px" : props.size === "small" ? "2px" : "5px"};
-    background-color: ${(props) => props.disabled ? props.theme.colors.disabled : props.isChecked ? props.toggleColor ? props.toggleColor : props.theme.colors.white : props.theme.colors.white};
-    border-radius: 100%;
-    transition: transform 0.4s ease;
-    transform: ${(props) => props.isChecked ? props.size === "medium" ? "translateX(25px)" : props.size === "small" ? "translateX(12px)" : "translateX(25px)" : "translateX(0)"};
-
-    @media (max-width: ${(props) => props.theme.screen.mobile}) {
-      height: 24px;
-      width: 24px;
-      transform: ${(props) => props.isChecked ? "translateX(25px)" : "translateX(0)"};
-      bottom: 8px;
-    }
-  `;
-const labelAttrs = {
-  hasInfoMessage: Boolean
-};
-const LabelContainer = styled("div", labelAttrs)`
-    display: inline-grid;
-    grid-template-columns: ${(props) => props.hasInfoMessage ? "auto 1fr" : "auto"};
-    grid-gap: 12px;
-    align-items: center;
+import "./main.es20.js";
+import _export_sfc from "./main.es11.js";
+import { resolveComponent, openBlock, createElementBlock, createVNode, withCtx, createTextVNode, withDirectives, createElementVNode as createBaseVNode, Fragment } from "./main.es6.js";
+import { vModelText } from "./main.es5.js";
+const PageContainer = styled.div`
+    padding: 40px;
   `;
 const _sfc_main = {
-  name: "Toggle",
+  name: "App",
   components: {
-    Container,
-    ToggleBackground,
-    ToggleDot,
-    ToggleWrapper,
-    FlexWrapper,
-    LabelText,
-    InfoText,
-    LabelContainer
+    PageContainer,
+    PanelRangeInfo,
+    IconCollection
   },
-  props: {
-    label: {
-      required: false,
-      default: "",
-      type: String
-    },
-    isChecked: {
-      required: true,
-      default: false,
-      type: Boolean
-    },
-    toggleColor: {
-      required: false,
-      default: "",
-      type: String
-    },
-    backgroundColor: {
-      required: false,
-      default: "",
-      type: String
-    },
-    size: {
-      required: false,
-      default: "small",
-      type: String
-    },
-    labelAlign: {
-      required: false,
-      default: "right",
-      type: String
-    },
-    fontColor: {
-      required: false,
-      default: "",
-      type: String
-    },
-    disabled: {
-      required: false,
-      default: false,
-      type: Boolean
+  data() {
+    return {
+      value: 42
+    };
+  },
+  computed: {},
+  methods: {
+    blurHandler(e) {
+      console.log("blur", e);
     },
-    infoTextMessage: {
-      required: false,
-      default: "",
-      type: String
+    changeHandler(e) {
+      console.log("change", e);
     },
-    dataId: {
-      type: String,
-      default: ""
+    focusHandler(e) {
+      console.log("focus", e);
     },
-    dataQaId: {
-      type: String,
-      default: ""
-    }
-  },
-  methods: {
-    onToggleChange() {
-      if (this.disabled) {
-        return;
-      }
-      this.$emit("on-toggle-change", !this.isChecked);
+    inputHandler(e) {
+      console.log("input", e);
+      setTimeout(() => {
+        this.value = e;
+      }, 1e3);
     }
   }
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_LabelText = resolveComponent("LabelText");
-  const _component_InfoText = resolveComponent("InfoText");
-  const _component_LabelContainer = resolveComponent("LabelContainer");
-  const _component_ToggleBackground = resolveComponent("ToggleBackground");
-  const _component_ToggleDot = resolveComponent("ToggleDot");
-  const _component_ToggleWrapper = resolveComponent("ToggleWrapper");
-  const _component_FlexWrapper = resolveComponent("FlexWrapper");
-  const _component_Container = resolveComponent("Container");
-  return openBlock(), createBlock(_component_Container, null, {
-    default: withCtx(() => [createVNode(_component_FlexWrapper, {
-      "data-id": $props.dataId,
-      "data-qa-id": $props.dataQaId,
-      "data-test-id": "page_wrapper",
-      disabled: $props.disabled,
-      size: $props.size,
-      onClick: $options.onToggleChange
-    }, {
-      default: withCtx(() => [$props.label && $props.labelAlign === "left" ? (openBlock(), createBlock(_component_LabelContainer, {
-        key: 0,
-        "data-test-id": "label_left_container",
-        "has-info-message": !!$props.infoTextMessage
-      }, {
-        default: withCtx(() => [createVNode(_component_LabelText, {
-          "data-test-id": "label_left_text",
-          "font-color": $props.fontColor,
-          size: $props.size
-        }, {
-          default: withCtx(() => [createTextVNode(toDisplayString($props.label), 1)]),
-          _: 1
-        }, 8, ["font-color", "size"]), createTextVNode(), $props.infoTextMessage ? (openBlock(), createBlock(_component_InfoText, {
-          key: 0,
-          text: $props.infoTextMessage
-        }, null, 8, ["text"])) : createCommentVNode("", true)]),
-        _: 1
-      }, 8, ["has-info-message"])) : createCommentVNode("", true), createTextVNode(), createVNode(_component_ToggleWrapper, {
-        "background-color": $props.backgroundColor,
-        checked: $props.isChecked,
-        "data-test-id": "toggle_wrapper",
-        disabled: $props.disabled,
-        "is-checked": $props.isChecked,
-        role: "checkbox",
-        size: $props.size,
-        tabindex: "0",
-        onKeydown: withKeys(withModifiers($options.onToggleChange, ["prevent"]), ["space"])
-      }, {
-        default: withCtx(() => [createVNode(_component_ToggleBackground, {
-          "background-color": $props.backgroundColor,
-          "data-test-id": "toggle_background",
-          disabled: $props.disabled,
-          "is-checked": $props.isChecked
-        }, null, 8, ["background-color", "disabled", "is-checked"]), createTextVNode(), createVNode(_component_ToggleDot, {
-          "data-test-id": "toggle_dot",
-          disabled: $props.disabled,
-          "is-checked": $props.isChecked,
-          size: $props.size,
-          "toggle-color": $props.toggleColor
-        }, null, 8, ["disabled", "is-checked", "size", "toggle-color"])]),
-        _: 1
-      }, 8, ["background-color", "checked", "disabled", "is-checked", "size", "onKeydown"]), createTextVNode(), $props.label && $props.labelAlign === "right" ? (openBlock(), createBlock(_component_LabelContainer, {
-        key: 1,
-        "data-test-id": "label_right_container",
-        "has-info-message": !!$props.infoTextMessage
-      }, {
-        default: withCtx(() => [createVNode(_component_LabelText, {
-          "data-test-id": "label_left_text",
-          "font-color": $props.fontColor,
-          size: $props.size
-        }, {
-          default: withCtx(() => [createTextVNode(toDisplayString($props.label), 1)]),
-          _: 1
-        }, 8, ["font-color", "size"]), createTextVNode(), $props.infoTextMessage ? (openBlock(), createBlock(_component_InfoText, {
-          key: 0,
-          "data-test-id": "info_text",
-          text: $props.infoTextMessage,
-          onClick: _cache[0] || (_cache[0] = withModifiers(() => {
-          }, ["stop"]))
-        }, null, 8, ["text"])) : createCommentVNode("", true)]),
-        _: 1
-      }, 8, ["has-info-message"])) : createCommentVNode("", true)]),
-      _: 1
-    }, 8, ["data-id", "data-qa-id", "disabled", "size", "onClick"])]),
+  const _component_PanelRangeInfo = resolveComponent("PanelRangeInfo");
+  const _component_PageContainer = resolveComponent("PageContainer");
+  const _component_IconCollection = resolveComponent("IconCollection");
+  return openBlock(), createElementBlock(Fragment, null, [createVNode(_component_PageContainer, null, {
+    default: withCtx(() => [createVNode(_component_PanelRangeInfo, {
+      "arrow-color": $data.value < 8 ? "yellow" : "lime",
+      height: "42px",
+      "max-value": 12,
+      "min-value": 8,
+      value: $data.value,
+      width: "120px"
+    }, null, 8, ["arrow-color", "value"])]),
     _: 1
-  });
+  }), createTextVNode(), createVNode(_component_IconCollection, {
+    color: "red"
+  }), createTextVNode(), withDirectives(createBaseVNode("input", {
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $data.value = $event),
+    max: "30",
+    min: "0",
+    type: "range"
+  }, null, 512), [[vModelText, $data.value]])], 64);
 }
-const Toggle = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+const Test = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  Toggle as default
+  Test as default
 };