cleek 1.6.4 → 1.7.3

package/dist/cleek.es.js

@@ -1,4 +1,23 @@
-import { defineComponent, computed, watch, h, resolveComponent, openBlock, createElementBlock, createBlock, createCommentVNode, normalizeClass, renderSlot, mergeProps, withKeys, withModifiers, createElementVNode, pushScopeId, popScopeId, normalizeStyle, withCtx, createTextVNode, toDisplayString, withDirectives, vModelText, createVNode, Fragment, renderList, vModelRadio, vModelCheckbox } from "vue";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value2) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value: value2 }) : obj[key] = value2;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { defineComponent, computed, watch, h, resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, createCommentVNode, renderSlot, mergeProps, withKeys, withModifiers, createElementVNode, pushScopeId, popScopeId, normalizeStyle, withCtx, createTextVNode, toDisplayString, withDirectives, isRef, vModelText, createVNode, Fragment, renderList, vModelRadio, vModelCheckbox } from "vue";
 var validators = {
   size: (type) => {
     return ["", "xs", "s", "m", "l", "xl"].includes(type);
@@ -13,7 +32,7 @@ var validators = {
     return ["left", "center", "right"].includes(type);
   },
   buttonType: (type) => {
-    return ["filled", "outlined", "text"].includes(type);
+    return ["filled", "outlined", "flat"].includes(type);
   },
   radioOptions: (options) => {
     let isValid = true;
@@ -87,16 +106,16 @@ function _createClass(Constructor, protoProps, staticProps) {
     _defineProperties(Constructor, staticProps);
   return Constructor;
 }
-function _defineProperty(obj, key, value) {
+function _defineProperty(obj, key, value2) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
-      value,
+      value: value2,
       enumerable: true,
       configurable: true,
       writable: true
     });
   } else {
-    obj[key] = value;
+    obj[key] = value2;
   }
   return obj;
 }
@@ -10858,16 +10877,16 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
 } : function(obj) {
   return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
 };
-var defineProperty = function(obj, key, value) {
+var defineProperty = function(obj, key, value2) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
-      value,
+      value: value2,
       enumerable: true,
       configurable: true,
       writable: true
     });
   } else {
-    obj[key] = value;
+    obj[key] = value2;
   }
   return obj;
 };
@@ -10910,8 +10929,8 @@ function styleToObject(style) {
   }).reduce(function(output, pair) {
     var idx = pair.indexOf(":");
     var prop = humps.camelize(pair.slice(0, idx));
-    var value = pair.slice(idx + 1).trim();
-    output[prop] = value;
+    var value2 = pair.slice(idx + 1).trim();
+    output[prop] = value2;
     return output;
   }, {});
 }
@@ -10931,16 +10950,16 @@ function convert(abstractElement) {
     return convert(child);
   });
   var mixins = Object.keys(abstractElement.attributes || {}).reduce(function(mixins2, key) {
-    var value = abstractElement.attributes[key];
+    var value2 = abstractElement.attributes[key];
     switch (key) {
       case "class":
-        mixins2.class = classToObject(value);
+        mixins2.class = classToObject(value2);
         break;
       case "style":
-        mixins2.style = styleToObject(value);
+        mixins2.style = styleToObject(value2);
         break;
       default:
-        mixins2.attrs[key] = value;
+        mixins2.attrs[key] = value2;
     }
     return mixins2;
   }, {
@@ -10966,8 +10985,8 @@ function log() {
     (_console = console).error.apply(_console, arguments);
   }
 }
-function objectWithKey(key, value) {
-  return Array.isArray(value) && value.length > 0 || !Array.isArray(value) && value ? defineProperty({}, key, value) : {};
+function objectWithKey(key, value2) {
+  return Array.isArray(value2) && value2.length > 0 || !Array.isArray(value2) && value2 ? defineProperty({}, key, value2) : {};
 }
 function classList(props) {
   var _classes;
@@ -11015,8 +11034,8 @@ var FontAwesomeIcon = defineComponent({
     flip: {
       type: String,
       default: null,
-      validator: function validator(value) {
-        return ["horizontal", "vertical", "both"].indexOf(value) > -1;
+      validator: function validator(value2) {
+        return ["horizontal", "vertical", "both"].indexOf(value2) > -1;
       }
     },
     icon: {
@@ -11034,8 +11053,8 @@ var FontAwesomeIcon = defineComponent({
     pull: {
       type: String,
       default: null,
-      validator: function validator2(value) {
-        return ["right", "left"].indexOf(value) > -1;
+      validator: function validator2(value2) {
+        return ["right", "left"].indexOf(value2) > -1;
       }
     },
     pulse: {
@@ -11045,8 +11064,8 @@ var FontAwesomeIcon = defineComponent({
     rotation: {
       type: [String, Number],
       default: null,
-      validator: function validator3(value) {
-        return [90, 180, 270].indexOf(Number.parseInt(value, 10)) > -1;
+      validator: function validator3(value2) {
+        return [90, 180, 270].indexOf(Number.parseInt(value2, 10)) > -1;
       }
     },
     swapOpacity: {
@@ -11056,8 +11075,8 @@ var FontAwesomeIcon = defineComponent({
     size: {
       type: String,
       default: null,
-      validator: function validator4(value) {
-        return ["lg", "xs", "sm", "1x", "2x", "3x", "4x", "5x", "6x", "7x", "8x", "9x", "10x"].indexOf(value) > -1;
+      validator: function validator4(value2) {
+        return ["lg", "xs", "sm", "1x", "2x", "3x", "4x", "5x", "6x", "7x", "8x", "9x", "10x"].indexOf(value2) > -1;
       }
     },
     spin: {
@@ -11101,8 +11120,8 @@ var FontAwesomeIcon = defineComponent({
         title: props.title
       }));
     });
-    watch(renderedIcon, function(value) {
-      if (!value) {
+    watch(renderedIcon, function(value2) {
+      if (!value2) {
         return log("Could not find one or more icon(s)", icon$$1.value, mask.value);
       }
     }, { immediate: true });
@@ -11151,8 +11170,8 @@ defineComponent({
     position: {
       type: String,
       default: null,
-      validator: function validator5(value) {
-        return ["bottom-left", "bottom-right", "top-left", "top-right"].indexOf(value) > -1;
+      validator: function validator5(value2) {
+        return ["bottom-left", "bottom-right", "top-left", "top-right"].indexOf(value2) > -1;
       }
     }
   },
@@ -11180,10 +11199,10 @@ defineComponent({
     };
   }
 });
-function render$i(_ctx, _cache, $props, $setup, $data, $options) {
+function render$g(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_font_awesome_icon = resolveComponent("font-awesome-icon");
   return openBlock(), createElementBlock("div", {
-    class: "ck-icon",
+    class: normalizeClass(["ck-icon", $options.computedClass]),
     onClick: _cache[0] || (_cache[0] = ($event) => $options.onClick($event))
   }, [
     $options.computediconPack === "font-awesome" ? (openBlock(), createBlock(_component_font_awesome_icon, {
@@ -11199,7 +11218,7 @@ function render$i(_ctx, _cache, $props, $setup, $data, $options) {
       "fixed-width": $props.fixedWidth,
       "swap-opacity": $props.swapOpacity
     }, null, 8, ["icon", "size", "rotation", "flip", "pull", "spin", "pulse", "inverse", "fixed-width", "swap-opacity"])) : createCommentVNode("", true)
-  ]);
+  ], 2);
 }
 var ckIcon_vue_vue_type_style_index_0_scoped_true_lang = "";
 var _export_sfc = (sfc, props) => {
@@ -11209,13 +11228,14 @@ var _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _sfc_main$h = {
+const _sfc_main$i = {
   name: "CkIcon",
   components: {
     FontAwesomeIcon
   },
   props: {
     icon: { type: [String, Array], default: "" },
+    color: { type: String, default: "" },
     iconPack: { type: String, default: "" },
     size: { type: String, default: null },
     rotation: { type: String, default: null },
@@ -11236,6 +11256,12 @@ const _sfc_main$h = {
       if (this.iconPack === "feather")
         return this.iconPack;
       return defaultPackage;
+    },
+    computedClass() {
+      const classList2 = [];
+      if (this.color)
+        classList2.push(`ck-component__color--${this.color}`);
+      return classList2;
     }
   },
   created() {
@@ -11249,9 +11275,9 @@ const _sfc_main$h = {
     }
   }
 };
-var ckIcon = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", render$i], ["__scopeId", "data-v-4026c04e"]]);
-const _hoisted_1$e = ["title", "aria-label", "disabled"];
-function render$h(_ctx, _cache, $props, $setup, $data, $options) {
+var ckIcon = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", render$g], ["__scopeId", "data-v-77d9963a"]]);
+const _hoisted_1$f = ["title", "aria-label", "disabled"];
+function render$f(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_ck_icon = resolveComponent("ck-icon");
   return openBlock(), createElementBlock("button", {
     type: "button",
@@ -11274,11 +11300,11 @@ function render$h(_ctx, _cache, $props, $setup, $data, $options) {
       icon: $props.iconRight,
       "icon-pack": $props.iconPack
     }, null, 8, ["icon", "icon-pack"])) : createCommentVNode("", true)
-  ], 10, _hoisted_1$e);
+  ], 10, _hoisted_1$f);
 }
 var ckButton_vue_vue_type_style_index_0_scoped_true_lang = "";
 const defaults = { type: "outlined" };
-const _sfc_main$g = {
+const _sfc_main$h = {
   name: "CkButton",
   components: {
     ckIcon
@@ -11328,15 +11354,15 @@ const _sfc_main$g = {
     }
   }
 };
-var ckButton = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", render$h], ["__scopeId", "data-v-79498e51"]]);
-const _withScopeId$2 = (n) => (pushScopeId("data-v-c7841510"), n = n(), popScopeId(), n);
-const _hoisted_1$d = ["disabled", "checked"];
+var ckButton = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", render$f], ["__scopeId", "data-v-dfa2f586"]]);
+const _withScopeId$2 = (n) => (pushScopeId("data-v-64a6608c"), n = n(), popScopeId(), n);
+const _hoisted_1$e = ["disabled", "checked"];
 const _hoisted_2$7 = /* @__PURE__ */ _withScopeId$2(() => /* @__PURE__ */ createElementVNode("div", { class: "ck-checkbox__element" }, null, -1));
 const _hoisted_3$5 = {
   key: 0,
   class: "c-Checkbox__label"
 };
-function render$g(_ctx, _cache, $props, $setup, $data, $options) {
+function render$e(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("label", mergeProps({ class: "ck-checkbox" }, $options.checkboxAttributes, {
     onKeydown: _cache[1] || (_cache[1] = withKeys(withModifiers(() => {
     }, ["prevent"]), ["space"])),
@@ -11355,7 +11381,7 @@ function render$g(_ctx, _cache, $props, $setup, $data, $options) {
         $options.value = $event.target.checked;
         $options.onChange($event);
       })
-    }, null, 40, _hoisted_1$d),
+    }, null, 40, _hoisted_1$e),
     _hoisted_2$7,
     _ctx.$slots.default ? (openBlock(), createElementBlock("span", _hoisted_3$5, [
       renderSlot(_ctx.$slots, "default", {}, void 0, true)
@@ -11363,7 +11389,7 @@ function render$g(_ctx, _cache, $props, $setup, $data, $options) {
   ], 16);
 }
 var ckCheckbox_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _sfc_main$f = {
+const _sfc_main$g = {
   name: "CkCheckbox",
   props: {
     modelValue: { type: Boolean, default: false },
@@ -11396,9 +11422,9 @@ const _sfc_main$f = {
     }
   }
 };
-var ckCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", render$g], ["__scopeId", "data-v-c7841510"]]);
-const _hoisted_1$c = ["src"];
-function render$f(_ctx, _cache, $props, $setup, $data, $options) {
+var ckCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", render$e], ["__scopeId", "data-v-64a6608c"]]);
+const _hoisted_1$d = ["src"];
+function render$d(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(["ck-img", $options.computedClass]),
     style: normalizeStyle($options.computedStyle),
@@ -11408,11 +11434,11 @@ function render$f(_ctx, _cache, $props, $setup, $data, $options) {
       src: $options.imageUrl,
       style: normalizeStyle($options.computedImgStyle),
       onError: _cache[0] || (_cache[0] = ($event) => _ctx.altNeeded = true)
-    }, null, 44, _hoisted_1$c)
+    }, null, 44, _hoisted_1$d)
   ], 6);
 }
 var ckImg_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _sfc_main$e = {
+const _sfc_main$f = {
   props: {
     src: { type: String, default: "" },
     isFullPath: { type: Boolean, default: false },
@@ -11423,6 +11449,7 @@ const _sfc_main$e = {
     height: { type: String, default: "" },
     zoom: { type: Boolean, default: false },
     zoomTitle: { type: String, default: "" },
+    hasBorder: { type: Boolean, default: false },
     radius: { type: String, default: "" },
     borderColor: { type: String, default: "" }
   },
@@ -11440,7 +11467,7 @@ const _sfc_main$e = {
       }
       if (size)
         classList2.push(`ck-img__size--${size}`);
-      if (this.realBorderColor) {
+      if (this.hasBorder) {
         classList2.push("ck-img__has-border");
         if (functions$1.isColorTemplateVariable(this.realBorderColor)) {
           classList2.push(`ck-component__border-color--${this.realBorderColor}`);
@@ -11458,7 +11485,7 @@ const _sfc_main$e = {
       }
       if (this.radius)
         styleList.push({ "border-radius": this.radius });
-      if (this.realBorderColor) {
+      if (this.hasBorder) {
         if (!functions$1.isColorTemplateVariable(this.realBorderColor)) {
           styleList.push({ "border-color": this.realBorderColor });
         }
@@ -11496,18 +11523,18 @@ const _sfc_main$e = {
     }
   }
 };
-var ckImg = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", render$f], ["__scopeId", "data-v-1c6a3b4e"]]);
-const _hoisted_1$b = ["for"];
-function render$e(_ctx, _cache, $props, $setup, $data, $options) {
+var ckImg = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", render$d], ["__scopeId", "data-v-38b603bf"]]);
+const _hoisted_1$c = ["for"];
+function render$c(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("label", {
     class: normalizeClass(["ck-label", $options.computedClass]),
     for: $props.for
   }, [
     renderSlot(_ctx.$slots, "default", {}, void 0, true)
-  ], 10, _hoisted_1$b);
+  ], 10, _hoisted_1$c);
 }
 var ckLabel_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _sfc_main$d = {
+const _sfc_main$e = {
   name: "CkLabel",
   props: {
     for: { type: String, default: "" },
@@ -11524,44 +11551,19 @@ const _sfc_main$d = {
     }
   }
 };
-var ckLabel = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", render$e], ["__scopeId", "data-v-4b8b9ab4"]]);
-const _hoisted_1$a = { class: "ck-input-text" };
-const _hoisted_2$6 = ["id", "placeholder"];
-function render$d(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_ck_label = resolveComponent("ck-label");
-  return openBlock(), createElementBlock("div", _hoisted_1$a, [
-    $props.label ? (openBlock(), createBlock(_component_ck_label, {
-      key: 0,
-      align: $props.labelAlign,
-      for: "ck-input-text"
-    }, {
-      default: withCtx(() => [
-        createTextVNode(toDisplayString($props.label), 1)
-      ]),
-      _: 1
-    }, 8, ["align"])) : createCommentVNode("", true),
-    withDirectives(createElementVNode("input", {
-      id: $props.label ? "ck-input-text" : "",
-      "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $options.value = $event),
-      type: "text",
-      placeholder: $props.placeholder,
-      class: normalizeClass($options.computedClass)
-    }, null, 10, _hoisted_2$6), [
-      [vModelText, $options.value]
-    ])
-  ]);
-}
+var ckLabel = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", render$c], ["__scopeId", "data-v-4b8b9ab4"]]);
 var ckInputText_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _sfc_main$c = {
-  name: "CkInputText",
-  components: {
-    ckLabel
-  },
+const _hoisted_1$b = { class: "ck-input-text" };
+const _hoisted_2$6 = ["placeholder", "id"];
+const __default__$2 = {
   props: {
     modelValue: { type: String, default: "" },
     label: { type: String, default: "" },
     placeholder: { type: String, default: "" },
     labelAlign: { type: String, default: "" },
+    icon: { type: [String, Array], default: void 0 },
+    iconPack: { type: String, default: void 0 },
+    iconRight: { type: String, default: void 0 },
     group: { type: String, default: "" },
     groupBreak: { type: String, default: "s" },
     groupVertical: { type: String, default: "" }
@@ -11579,11 +11581,56 @@ const _sfc_main$c = {
     computedClass() {
       const classList2 = [];
       classList2.push(functions$1.getGroupClass(this));
+      if (this.icon)
+        classList2.push("has-icon-left");
+      if (this.iconRight)
+        classList2.push("has-icon-right");
       return classList2;
     }
   }
 };
-var ckInputText = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", render$d], ["__scopeId", "data-v-75b88129"]]);
+const _sfc_main$d = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$2), {
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$b, [
+        __props.label ? (openBlock(), createBlock(ckLabel, {
+          key: 0,
+          align: __props.labelAlign,
+          for: "ck-input-text"
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(__props.label), 1)
+          ]),
+          _: 1
+        }, 8, ["align"])) : createCommentVNode("", true),
+        __props.icon ? (openBlock(), createBlock(ckIcon, {
+          key: 1,
+          class: "ck-input__icon-left",
+          color: "lightgrey",
+          icon: __props.icon,
+          "icon-pack": __props.iconPack
+        }, null, 8, ["icon", "icon-pack"])) : createCommentVNode("", true),
+        withDirectives(createElementVNode("input", {
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(value) ? value.value = $event : null),
+          type: "text",
+          placeholder: __props.placeholder,
+          class: normalizeClass(_ctx.computedClass),
+          id: __props.label ? "ck-input-text" : ""
+        }, null, 10, _hoisted_2$6), [
+          [vModelText, _ctx.value]
+        ]),
+        __props.iconRight ? (openBlock(), createBlock(ckIcon, {
+          key: 2,
+          class: "ck-input__icon-right",
+          color: "lightgrey",
+          icon: __props.iconRight,
+          "icon-pack": __props.iconPack
+        }, null, 8, ["icon", "icon-pack"])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+}));
+var ckInputText = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-f952e1d8"]]);
 var dist = function(t) {
   function e(i) {
     if (r[i])
@@ -12188,14 +12235,14 @@ var dist = function(t) {
   r(9)(i, {});
   i.locals && (t.exports = i.locals);
 }]);
-const _hoisted_1$9 = {
+const _hoisted_1$a = {
   key: 0,
   class: "ck-popup"
 };
 const _hoisted_2$5 = /* @__PURE__ */ createElementVNode("div", { class: "blackout" }, null, -1);
 const _hoisted_3$4 = { class: "ck-popup__slot-header" };
-const _hoisted_4$2 = { class: "ck-popup__slot-body" };
-const _hoisted_5 = {
+const _hoisted_4$3 = { class: "ck-popup__slot-body" };
+const _hoisted_5$1 = {
   key: 0,
   class: "ck-popup__slot-footer"
 };
@@ -12205,10 +12252,10 @@ const _hoisted_6 = {
 };
 const _hoisted_7 = /* @__PURE__ */ createTextVNode("Cancelar");
 const _hoisted_8 = /* @__PURE__ */ createTextVNode("Aceptar");
-function render$c(_ctx, _cache, $props, $setup, $data, $options) {
+function render$b(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_ck_icon = resolveComponent("ck-icon");
   const _component_ck_button = resolveComponent("ck-button");
-  return $options.value ? (openBlock(), createElementBlock("div", _hoisted_1$9, [
+  return $options.value ? (openBlock(), createElementBlock("div", _hoisted_1$a, [
     _hoisted_2$5,
     createElementVNode("div", {
       class: "popup-container",
@@ -12228,10 +12275,10 @@ function render$c(_ctx, _cache, $props, $setup, $data, $options) {
             onClick: _cache[0] || (_cache[0] = ($event) => $options.value = false)
           })) : createCommentVNode("", true)
         ]),
-        createElementVNode("div", _hoisted_4$2, [
+        createElementVNode("div", _hoisted_4$3, [
           renderSlot(_ctx.$slots, "body")
         ]),
-        _ctx.$slots.footer || $props.confirmButtons ? (openBlock(), createElementBlock("div", _hoisted_5, [
+        _ctx.$slots.footer || $props.confirmButtons ? (openBlock(), createElementBlock("div", _hoisted_5$1, [
           renderSlot(_ctx.$slots, "footer"),
           $props.confirmButtons ? (openBlock(), createElementBlock("div", _hoisted_6, [
             createVNode(_component_ck_button, {
@@ -12259,7 +12306,7 @@ function render$c(_ctx, _cache, $props, $setup, $data, $options) {
   ])) : createCommentVNode("", true);
 }
 var ckPopup_vue_vue_type_style_index_0_lang = "";
-const _sfc_main$b = {
+const _sfc_main$c = {
   components: {
     ckButton,
     ckIcon,
@@ -12297,16 +12344,16 @@ const _sfc_main$b = {
     }
   }
 };
-var ckPopup = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", render$c]]);
+var ckPopup = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", render$b]]);
 const _withScopeId$1 = (n) => (pushScopeId("data-v-73a891e8"), n = n(), popScopeId(), n);
-const _hoisted_1$8 = ["onKeyup"];
+const _hoisted_1$9 = ["onKeyup"];
 const _hoisted_2$4 = ["name", "value", "disabled"];
 const _hoisted_3$3 = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ createElementVNode("div", { class: "c-Radio__element" }, null, -1));
-const _hoisted_4$1 = {
+const _hoisted_4$2 = {
   key: 0,
   class: "c-Radio__label"
 };
-function render$b(_ctx, _cache, $props, $setup, $data, $options) {
+function render$a(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(true), createElementBlock(Fragment, null, renderList($props.options, (item, index) => {
     return openBlock(), createElementBlock("label", mergeProps({
       key: `radio-${index}`,
@@ -12331,12 +12378,12 @@ function render$b(_ctx, _cache, $props, $setup, $data, $options) {
         [vModelRadio, $options.value]
       ]),
       _hoisted_3$3,
-      item.label ? (openBlock(), createElementBlock("span", _hoisted_4$1, toDisplayString(item.label), 1)) : createCommentVNode("", true)
-    ], 16, _hoisted_1$8);
+      item.label ? (openBlock(), createElementBlock("span", _hoisted_4$2, toDisplayString(item.label), 1)) : createCommentVNode("", true)
+    ], 16, _hoisted_1$9);
   }), 128);
 }
 var ckRadio_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _sfc_main$a = {
+const _sfc_main$b = {
   name: "CkRadio",
   props: {
     modelValue: { type: String, default: void 0 },
@@ -12362,13 +12409,13 @@ const _sfc_main$a = {
     }
   },
   methods: {
-    handleChange(value) {
-      this.value = value;
-      this.$emit("change", value);
+    handleChange(value2) {
+      this.value = value2;
+      this.$emit("change", value2);
     }
   }
 };
-var ckRadio = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", render$b], ["__scopeId", "data-v-73a891e8"]]);
+var ckRadio = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", render$a], ["__scopeId", "data-v-73a891e8"]]);
 const qmStr = {
   capitalize(str) {
     return str.charAt(0).toUpperCase() + str.slice(1);
@@ -12405,17 +12452,17 @@ const qmStr = {
     return joinArray;
   }
 };
-const _hoisted_1$7 = {
+const _hoisted_1$8 = {
   class: "ck-select",
   action: "/action_page.php",
   method: "get"
 };
 const _hoisted_2$3 = ["placeholder"];
 const _hoisted_3$2 = { id: "ck-select__list" };
-const _hoisted_4 = ["value"];
-function render$a(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_4$1 = ["value"];
+function render$9(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_ck_label = resolveComponent("ck-label");
-  return openBlock(), createElementBlock("form", _hoisted_1$7, [
+  return openBlock(), createElementBlock("form", _hoisted_1$8, [
     $props.label ? (openBlock(), createBlock(_component_ck_label, {
       key: 0,
       align: $props.labelAlign,
@@ -12439,13 +12486,13 @@ function render$a(_ctx, _cache, $props, $setup, $data, $options) {
       (openBlock(true), createElementBlock(Fragment, null, renderList($props.options, (option) => {
         return openBlock(), createElementBlock("option", {
           value: option.name
-        }, null, 8, _hoisted_4);
+        }, null, 8, _hoisted_4$1);
       }), 256))
     ])
   ]);
 }
 var ckSelect_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _sfc_main$9 = {
+const _sfc_main$a = {
   name: "CkSelect",
   components: {
     ckLabel
@@ -12579,15 +12626,15 @@ const _sfc_main$9 = {
     }
   }
 };
-var ckSelect = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", render$a], ["__scopeId", "data-v-7751c2da"]]);
-const _withScopeId = (n) => (pushScopeId("data-v-2da281ed"), n = n(), popScopeId(), n);
-const _hoisted_1$6 = ["disabled"];
+var ckSelect = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", render$9], ["__scopeId", "data-v-b400aa20"]]);
+const _withScopeId = (n) => (pushScopeId("data-v-5251135b"), n = n(), popScopeId(), n);
+const _hoisted_1$7 = ["disabled"];
 const _hoisted_2$2 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("div", { class: "ck-switch__slider" }, null, -1));
 const _hoisted_3$1 = {
   key: 0,
   class: "ck-switch__content"
 };
-function render$9(_ctx, _cache, $props, $setup, $data, $options) {
+function render$8(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("label", mergeProps({ class: "ck-switch" }, $options.computedAttributes, {
     class: $options.computedClass,
     onKeydown: _cache[2] || (_cache[2] = withKeys(withModifiers(() => {
@@ -12604,7 +12651,7 @@ function render$9(_ctx, _cache, $props, $setup, $data, $options) {
       "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $options.value = $event),
       disabled: $props.disabled,
       onClick: _cache[1] || (_cache[1] = ($event) => $options.onTrigger())
-    }, null, 8, _hoisted_1$6), [
+    }, null, 8, _hoisted_1$7), [
       [vModelCheckbox, $options.value]
     ]),
     _hoisted_2$2,
@@ -12614,7 +12661,7 @@ function render$9(_ctx, _cache, $props, $setup, $data, $options) {
   ], 16);
 }
 var ckSwitch_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _sfc_main$8 = {
+const _sfc_main$9 = {
   name: "Switch",
   props: {
     modelValue: { type: Boolean, default: false },
@@ -12653,12 +12700,12 @@ const _sfc_main$8 = {
     }
   }
 };
-var ckSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", render$9], ["__scopeId", "data-v-2da281ed"]]);
-const _hoisted_1$5 = { class: "ck-switch-options__container-exterior" };
+var ckSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", render$8], ["__scopeId", "data-v-5251135b"]]);
+const _hoisted_1$6 = { class: "ck-switch-options__container-exterior" };
 const _hoisted_2$1 = ["onClick"];
-function render$8(_ctx, _cache, $props, $setup, $data, $options) {
+function render$7(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_ck_label = resolveComponent("ck-label");
-  return openBlock(), createElementBlock("div", _hoisted_1$5, [
+  return openBlock(), createElementBlock("div", _hoisted_1$6, [
     $props.label ? (openBlock(), createBlock(_component_ck_label, {
       key: 0,
       align: $props.labelAlign
@@ -12683,7 +12730,7 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
   ]);
 }
 var ckSwitchOptions_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _sfc_main$7 = {
+const _sfc_main$8 = {
   components: {
     ckLabel
   },
@@ -12731,19 +12778,19 @@ const _sfc_main$7 = {
     }
   }
 };
-var ckSwitchOptions = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", render$8], ["__scopeId", "data-v-2572a09c"]]);
-const _hoisted_1$4 = { class: "ck-tr" };
-function render$7(_ctx, _cache) {
-  return openBlock(), createElementBlock("tr", _hoisted_1$4, [
+var ckSwitchOptions = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", render$7], ["__scopeId", "data-v-61a29406"]]);
+const _hoisted_1$5 = { class: "ck-tr" };
+function render$6(_ctx, _cache) {
+  return openBlock(), createElementBlock("tr", _hoisted_1$5, [
     renderSlot(_ctx.$slots, "default", {}, void 0, true)
   ]);
 }
 var ckTr_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _sfc_main$6 = {};
-var ckTr = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", render$7], ["__scopeId", "data-v-c6fe8e88"]]);
-const _hoisted_1$3 = { class: "ck-th" };
-function render$6(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("th", _hoisted_1$3, [
+const _sfc_main$7 = {};
+var ckTr = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", render$6], ["__scopeId", "data-v-c6fe8e88"]]);
+const _hoisted_1$4 = { class: "ck-th" };
+function render$5(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("th", _hoisted_1$4, [
     createElementVNode("span", {
       class: normalizeClass($options.computedSpanClass),
       style: normalizeStyle($options.computedStyle)
@@ -12753,7 +12800,7 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
   ]);
 }
 var ckTh_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _sfc_main$5 = {
+const _sfc_main$6 = {
   props: {
     align: { type: String, default: "center", validator: validators.align },
     minWidth: { type: String, default: void 0 }
@@ -12774,8 +12821,8 @@ const _sfc_main$5 = {
     }
   }
 };
-var ckTh = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", render$6], ["__scopeId", "data-v-e9943550"]]);
-function render$5(_ctx, _cache, $props, $setup, $data, $options) {
+var ckTh = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", render$5], ["__scopeId", "data-v-e9943550"]]);
+function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_ck_th = resolveComponent("ck-th");
   return $options.isVisible ? (openBlock(), createBlock(_component_ck_th, {
     key: 0,
@@ -12788,7 +12835,7 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   }, 8, ["align", "min-width"])) : createCommentVNode("", true);
 }
-const _sfc_main$4 = {
+const _sfc_main$5 = {
   components: {
     ckTh
   },
@@ -12801,47 +12848,114 @@ const _sfc_main$4 = {
     }
   }
 };
-var ckTableTitle = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", render$5]]);
-const _hoisted_1$2 = { class: "ck-table" };
-const _hoisted_2 = { key: 0 };
-const _hoisted_3 = { key: 1 };
-function render$4(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_ck_table_title = resolveComponent("ck-table-title");
-  const _component_ck_tr = resolveComponent("ck-tr");
-  return openBlock(), createElementBlock("table", _hoisted_1$2, [
-    _ctx.$slots.header || $props.columns.length ? (openBlock(), createElementBlock("thead", _hoisted_2, [
-      renderSlot(_ctx.$slots, "header", {}, void 0, true),
-      createVNode(_component_ck_tr, null, {
-        default: withCtx(() => [
-          (openBlock(true), createElementBlock(Fragment, null, renderList($props.columns, (col) => {
-            return openBlock(), createBlock(_component_ck_table_title, {
-              key: col.title,
-              col
-            }, null, 8, ["col"]);
-          }), 128))
-        ]),
-        _: 1
-      })
-    ])) : createCommentVNode("", true),
-    createElementVNode("tbody", null, [
-      renderSlot(_ctx.$slots, "default", {}, void 0, true)
-    ]),
-    _ctx.$slots.footer ? (openBlock(), createElementBlock("tfoot", _hoisted_3, [
-      renderSlot(_ctx.$slots, "footeer", {}, void 0, true)
-    ])) : createCommentVNode("", true)
-  ]);
-}
-var ckTable_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _sfc_main$3 = {
-  components: {
-    ckTr,
-    ckTableTitle
+var ckTableTitle = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", render$4]]);
+var ckTable__headerItems_vue_vue_type_style_index_0_scoped_true_lang = "";
+const _hoisted_1$3 = { class: "ck-table__header-items" };
+const __default__$1 = {
+  props: {
+    refreshBtn: { type: Boolean, required: true },
+    hideItemsPerPage: { type: Boolean, required: true },
+    hideSearch: { type: Boolean, required: true }
   },
+  emits: ["refreshList", "update:search"]
+};
+const _sfc_main$4 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$1), {
+  setup(__props) {
+    const searchLocal = "holi";
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$3, [
+        !__props.refreshBtn ? (openBlock(), createBlock(ckButton, {
+          key: 0,
+          type: "flat",
+          icon: "redo-alt",
+          onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("refreshList"))
+        })) : createCommentVNode("", true),
+        !__props.hideItemsPerPage ? (openBlock(), createElementBlock("div", {
+          key: 1,
+          class: normalizeClass(["items-per-page", { "ck-component__group--left": !__props.hideSearch }])
+        }, "1 - 20 de 38", 2)) : createCommentVNode("", true),
+        !__props.hideSearch ? (openBlock(), createBlock(ckInputText, {
+          key: 2,
+          modelValue: searchLocal,
+          "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => searchLocal = $event),
+          placeholder: "Buscar...",
+          group: __props.hideItemsPerPage ? "" : "right"
+        }, null, 8, ["group"])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+}));
+var TableHeaderItems = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-09927bf3"]]);
+var ckTable_vue_vue_type_style_index_0_scoped_true_lang = "";
+const _hoisted_1$2 = { class: "ck-table" };
+const _hoisted_2 = {
+  key: 0,
+  class: "ck-table__header"
+};
+const _hoisted_3 = { class: "ck-table__table" };
+const _hoisted_4 = { key: 0 };
+const _hoisted_5 = { key: 1 };
+const __default__ = {
   props: {
-    columns: { type: Array, required: true, default: () => [] }
+    columns: { type: Array, required: true, default: () => [] },
+    search: { type: String, default: "asd" },
+    hideHeaderActions: { type: Boolean, default: false },
+    refreshBtn: { type: Boolean, default: false },
+    hideItemsPerPage: { type: Boolean, default: false },
+    hideSearch: { type: Boolean, default: false }
+  },
+  emits: ["refreshList", "update:search"],
+  computed: {
+    searchLocal: {
+      get() {
+        return this.search;
+      },
+      get(val) {
+        this.$emit("update:search", val);
+      }
+    }
   }
 };
-var ckTable = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", render$4], ["__scopeId", "data-v-6819d9a6"]]);
+const _sfc_main$3 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__), {
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$2, [
+        _ctx.$slots.header || !__props.hideHeaderActions ? (openBlock(), createElementBlock("div", _hoisted_2, [
+          renderSlot(_ctx.$slots, "header", {}, void 0, true),
+          !__props.hideHeaderActions ? (openBlock(), createBlock(TableHeaderItems, {
+            key: 0,
+            refreshBtn: __props.refreshBtn,
+            hideItemsPerPage: __props.hideItemsPerPage,
+            hideSearch: __props.hideSearch,
+            onRefreshList: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("refreshList", _ctx.$evemt))
+          }, null, 8, ["refreshBtn", "hideItemsPerPage", "hideSearch"])) : createCommentVNode("", true)
+        ])) : createCommentVNode("", true),
+        createElementVNode("table", _hoisted_3, [
+          __props.columns.length ? (openBlock(), createElementBlock("thead", _hoisted_4, [
+            createVNode(ckTr, null, {
+              default: withCtx(() => [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(__props.columns, (col) => {
+                  return openBlock(), createBlock(ckTableTitle, {
+                    key: col.title,
+                    col
+                  }, null, 8, ["col"]);
+                }), 128))
+              ]),
+              _: 1
+            })
+          ])) : createCommentVNode("", true),
+          createElementVNode("tbody", null, [
+            renderSlot(_ctx.$slots, "default", {}, void 0, true)
+          ]),
+          _ctx.$slots.footer ? (openBlock(), createElementBlock("tfoot", _hoisted_5, [
+            renderSlot(_ctx.$slots, "footeer", {}, void 0, true)
+          ])) : createCommentVNode("", true)
+        ])
+      ]);
+    };
+  }
+}));
+var ckTable = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-144557a6"]]);
 function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("td", {
     class: normalizeClass(["ck-td", $options.computedTdClass])
@@ -12938,7 +13052,7 @@ const _sfc_main$1 = {
     }
   }
 };
-var ckTextarea = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", render$2], ["__scopeId", "data-v-5ccf28fc"]]);
+var ckTextarea = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", render$2], ["__scopeId", "data-v-112af958"]]);
 var top = "top";
 var bottom = "bottom";
 var right = "right";
@@ -13006,11 +13120,11 @@ function applyStyles(_ref2) {
     }
     Object.assign(element.style, style);
     Object.keys(attributes).forEach(function(name2) {
-      var value = attributes[name2];
-      if (value === false) {
+      var value2 = attributes[name2];
+      if (value2 === false) {
         element.removeAttribute(name2);
       } else {
-        element.setAttribute(name2, value === true ? "" : value);
+        element.setAttribute(name2, value2 === true ? "" : value2);
       }
     });
   });
@@ -13182,11 +13296,11 @@ function getOffsetParent(element) {
 function getMainAxisFromPlacement(placement) {
   return ["top", "bottom"].indexOf(placement) >= 0 ? "x" : "y";
 }
-function within(min$1, value, max$1) {
-  return max(min$1, min(value, max$1));
+function within(min$1, value2, max$1) {
+  return max(min$1, min(value2, max$1));
 }
-function withinMaxClamp(min2, value, max2) {
-  var v = within(min2, value, max2);
+function withinMaxClamp(min2, value2, max2) {
+  var v = within(min2, value2, max2);
   return v > max2 ? max2 : v;
 }
 function getFreshSideObject() {
@@ -13200,9 +13314,9 @@ function getFreshSideObject() {
 function mergePaddingObject(paddingObject) {
   return Object.assign({}, getFreshSideObject(), paddingObject);
 }
-function expandToHashMap(value, keys) {
+function expandToHashMap(value2, keys) {
   return keys.reduce(function(hashMap, key) {
-    hashMap[key] = value;
+    hashMap[key] = value2;
     return hashMap;
   }, {});
 }
@@ -14252,19 +14366,19 @@ var TOUCH_OPTIONS = {
 var TIPPY_DEFAULT_APPEND_TO = function TIPPY_DEFAULT_APPEND_TO2() {
   return document.body;
 };
-function getValueAtIndexOrReturn(value, index, defaultValue) {
-  if (Array.isArray(value)) {
-    var v = value[index];
+function getValueAtIndexOrReturn(value2, index, defaultValue) {
+  if (Array.isArray(value2)) {
+    var v = value2[index];
     return v == null ? Array.isArray(defaultValue) ? defaultValue[index] : defaultValue : v;
   }
-  return value;
+  return value2;
 }
-function isType(value, type) {
-  var str = {}.toString.call(value);
+function isType(value2, type) {
+  var str = {}.toString.call(value2);
   return str.indexOf("[object") === 0 && str.indexOf(type + "]") > -1;
 }
-function invokeWithArgsOrReturn(value, args) {
-  return typeof value === "function" ? value.apply(void 0, args) : value;
+function invokeWithArgsOrReturn(value2, args) {
+  return typeof value2 === "function" ? value2.apply(void 0, args) : value2;
 }
 function debounce(fn2, ms) {
   if (ms === 0) {
@@ -14278,15 +14392,15 @@ function debounce(fn2, ms) {
     }, ms);
   };
 }
-function splitBySpaces(value) {
-  return value.split(/\s+/).filter(Boolean);
+function splitBySpaces(value2) {
+  return value2.split(/\s+/).filter(Boolean);
 }
-function normalizeToArray(value) {
-  return [].concat(value);
+function normalizeToArray(value2) {
+  return [].concat(value2);
 }
-function pushIfUnique(arr, value) {
-  if (arr.indexOf(value) === -1) {
-    arr.push(value);
+function pushIfUnique(arr, value2) {
+  if (arr.indexOf(value2) === -1) {
+    arr.push(value2);
   }
 }
 function unique(arr) {
@@ -14297,8 +14411,8 @@ function unique(arr) {
 function getBasePlacement(placement) {
   return placement.split("-")[0];
 }
-function arrayFrom(value) {
-  return [].slice.call(value);
+function arrayFrom(value2) {
+  return [].slice.call(value2);
 }
 function removeUndefinedProps(obj) {
   return Object.keys(obj).reduce(function(acc, key) {
@@ -14311,36 +14425,36 @@ function removeUndefinedProps(obj) {
 function div() {
   return document.createElement("div");
 }
-function isElement(value) {
+function isElement(value2) {
   return ["Element", "Fragment"].some(function(type) {
-    return isType(value, type);
+    return isType(value2, type);
   });
 }
-function isNodeList(value) {
-  return isType(value, "NodeList");
+function isNodeList(value2) {
+  return isType(value2, "NodeList");
 }
-function isMouseEvent(value) {
-  return isType(value, "MouseEvent");
+function isMouseEvent(value2) {
+  return isType(value2, "MouseEvent");
 }
-function isReferenceElement(value) {
-  return !!(value && value._tippy && value._tippy.reference === value);
+function isReferenceElement(value2) {
+  return !!(value2 && value2._tippy && value2._tippy.reference === value2);
 }
-function getArrayOfElements(value) {
-  if (isElement(value)) {
-    return [value];
+function getArrayOfElements(value2) {
+  if (isElement(value2)) {
+    return [value2];
   }
-  if (isNodeList(value)) {
-    return arrayFrom(value);
+  if (isNodeList(value2)) {
+    return arrayFrom(value2);
   }
-  if (Array.isArray(value)) {
-    return value;
+  if (Array.isArray(value2)) {
+    return value2;
   }
-  return arrayFrom(document.querySelectorAll(value));
+  return arrayFrom(document.querySelectorAll(value2));
 }
-function setTransitionDuration(els, value) {
+function setTransitionDuration(els, value2) {
   els.forEach(function(el) {
     if (el) {
-      el.style.transitionDuration = value + "ms";
+      el.style.transitionDuration = value2 + "ms";
     }
   });
 }
@@ -14554,16 +14668,16 @@ var innerHTML = function innerHTML2() {
 function dangerouslySetInnerHTML(element, html) {
   element[innerHTML()] = html;
 }
-function createArrowElement(value) {
+function createArrowElement(value2) {
   var arrow2 = div();
-  if (value === true) {
+  if (value2 === true) {
     arrow2.className = ARROW_CLASS;
   } else {
     arrow2.className = SVG_ARROW_CLASS;
-    if (isElement(value)) {
-      arrow2.appendChild(value);
+    if (isElement(value2)) {
+      arrow2.appendChild(value2);
     } else {
-      dangerouslySetInnerHTML(arrow2, value);
+      dangerouslySetInnerHTML(arrow2, value2);
     }
   }
   return arrow2;