lau-ecom-design-system 1.0.21 → 1.0.23

package/dist/lau-ecom-design-system.ssr.js

@@ -565,11 +565,11 @@ var script$z = /*@__PURE__*/vue.defineComponent({
 });script$z.__file = "src/components/LauEcomIcon/LauEcomCbtIconGirlReading.vue";var _hoisted_1$v = ["width", "height"];
 var _hoisted_2$i = ["fill"];
 var _hoisted_3$e = ["fill"];
-var _hoisted_4$8 = ["fill"];
-var _hoisted_5$7 = ["fill"];
+var _hoisted_4$7 = ["fill"];
+var _hoisted_5$6 = ["fill"];
 var _hoisted_6$5 = ["fill"];
-var _hoisted_7$3 = ["fill"];
-var _hoisted_8$3 = ["fill"];
+var _hoisted_7$4 = ["fill"];
+var _hoisted_8$4 = ["fill"];
 var script$y = /*@__PURE__*/vue.defineComponent({
   __name: 'LauEcomCbtIconChart',
   props: {
@@ -606,19 +606,19 @@ var script$y = /*@__PURE__*/vue.defineComponent({
       }, null, 8 /* PROPS */, _hoisted_3$e), vue.createElementVNode("path", {
         d: "M41.1582 33.1329C41.3492 33.3228 41.7311 33.5127 42.1131 33.5127C42.8769 33.5127 43.4498 33.5127 44.0227 33.5127H44.5956C44.9775 33.5127 45.3594 33.3228 45.5504 33.1329C45.7414 32.943 45.9323 32.5633 45.9323 32.1835C45.9323 28.576 45.9323 24.9684 45.9323 21.3608C45.9323 20.981 45.7414 20.6013 45.5504 20.4114C45.3594 20.2215 44.9775 20.0316 44.5956 20.0316H44.0227C43.4498 20.0316 42.8769 20.0316 42.1131 20.0316C41.5402 20.0316 41.3492 20.0316 40.9673 20.4114C40.7763 20.6013 40.5854 20.981 40.5854 21.5506C40.5854 22.6899 40.5854 24.019 40.5854 25.1582V28.0063C40.5854 29.3354 40.5854 30.6646 40.5854 31.9937C40.7763 32.5633 40.7763 32.7532 41.1582 33.1329ZM42.8769 31.2342V22.3101H43.6408V31.2342H42.8769Z",
         fill: _ctx.color
-      }, null, 8 /* PROPS */, _hoisted_4$8), vue.createElementVNode("path", {
+      }, null, 8 /* PROPS */, _hoisted_4$7), vue.createElementVNode("path", {
         d: "M32.183 21.9304C31.992 21.7405 31.6101 21.5506 31.0372 21.5506C30.2733 21.5506 29.5095 21.5506 28.7456 21.5506C28.3637 21.5506 27.9818 21.7405 27.7908 21.9304C27.5998 22.1203 27.4089 22.5 27.4089 22.8797C27.4089 24.9684 27.4089 27.057 27.4089 29.1456V32.1835C27.4089 32.5633 27.5998 32.943 27.7908 33.1329C27.9818 33.3228 28.3637 33.5127 28.7456 33.5127H29.1275C29.8914 33.5127 30.6552 33.5127 31.4191 33.5127C31.801 33.5127 32.183 33.3228 32.3739 33.1329C32.5649 32.943 32.7558 32.5633 32.7558 32.1835C32.7558 31.0443 32.7558 30.0949 32.7558 28.9557V26.2975C32.7558 25.1582 32.7558 24.2089 32.7558 23.0696C32.3739 22.5 32.3739 22.1203 32.183 21.9304ZM30.2733 23.8291V31.2342H29.5095V23.8291H30.2733Z",
         fill: _ctx.color
-      }, null, 8 /* PROPS */, _hoisted_5$7), vue.createElementVNode("path", {
+      }, null, 8 /* PROPS */, _hoisted_5$6), vue.createElementVNode("path", {
         d: "M38.8667 24.2089C38.6757 24.019 38.2938 23.8291 37.9119 23.8291C36.957 23.8291 36.1932 23.8291 35.2384 23.8291C34.8564 23.8291 34.4745 24.019 34.2836 24.2089C34.0926 24.3987 33.9016 24.7785 33.9016 25.1582C33.9016 27.4367 33.9016 29.9051 33.9016 32.1835C33.9016 32.5633 34.0926 32.943 34.2836 33.1329C34.4745 33.3228 34.8564 33.5127 35.2384 33.5127H35.8113C36.5751 33.5127 37.148 33.5127 37.7209 33.5127C38.1028 33.5127 38.4848 33.3228 38.6757 33.1329C38.8667 32.943 39.0576 32.5633 39.0576 32.1835C39.0576 31.4241 39.0576 30.6646 39.0576 29.9051V27.6266C39.0576 26.8671 39.0576 26.1076 39.0576 25.1582C39.0576 24.7785 39.0576 24.3987 38.8667 24.2089ZM36.957 26.1076V31.2342H36.1932V26.1076H36.957Z",
         fill: _ctx.color
       }, null, 8 /* PROPS */, _hoisted_6$5), vue.createElementVNode("path", {
         d: "M20.5342 31.8038C20.5342 33.1329 20.9161 33.3228 22.0619 33.3228C22.2529 33.3228 22.6348 33.3228 22.8257 33.3228C23.2077 33.3228 23.7806 33.3228 24.1625 33.3228C24.1625 33.3228 24.1625 33.3228 24.3535 33.3228C24.7354 33.3228 25.1173 33.1329 25.3083 32.943C25.4992 32.7532 25.6902 32.3734 25.6902 31.8038C25.6902 30.6646 25.6902 29.3354 25.6902 28.0063C25.6902 27.6266 25.4992 27.2468 25.3083 26.8671C25.1173 26.6772 24.7354 26.4873 24.1625 26.4873C23.3986 26.4873 22.6348 26.4873 21.8709 26.4873C21.298 26.4873 20.9161 26.4873 20.7251 26.8671C20.5342 27.057 20.3432 27.4367 20.3432 28.0063C20.3432 28.3861 20.3432 28.7658 20.3432 29.3354V30.4747C20.5342 31.0443 20.5342 31.4241 20.5342 31.8038ZM22.8257 31.2342V28.9557H23.5896V31.2342H22.8257Z",
         fill: _ctx.color
-      }, null, 8 /* PROPS */, _hoisted_7$3), vue.createElementVNode("path", {
+      }, null, 8 /* PROPS */, _hoisted_7$4), vue.createElementVNode("path", {
         d: "M10.4131 37.1203L10.986 39.2089L12.8956 38.8291L12.5137 36.7405L10.4131 37.1203Z",
         fill: _ctx.color
-      }, null, 8 /* PROPS */, _hoisted_8$3)], 8 /* PROPS */, _hoisted_1$v);
+      }, null, 8 /* PROPS */, _hoisted_8$4)], 8 /* PROPS */, _hoisted_1$v);
     };
   }
 });script$y.__file = "src/components/LauEcomIcon/LauEcomCbtIconChart.vue";var _hoisted_1$u = ["width", "height"];
@@ -841,7 +841,52 @@ var script$r = /*@__PURE__*/vue.defineComponent({
       }, null, -1 /* HOISTED */)]), 8 /* PROPS */, _hoisted_1$o);
     };
   }
-});script$r.__file = "src/components/LauEcomIcon/LauEcomUpcIconNavBack.vue";var LauEcomButtonType = /*#__PURE__*/function (LauEcomButtonType) {
+});script$r.__file = "src/components/LauEcomIcon/LauEcomUpcIconNavBack.vue";var _hoisted_1$n = ["width", "height"];
+var _hoisted_2$h = ["stroke"];
+var _hoisted_3$d = ["stroke"];
+var script$q = /*@__PURE__*/vue.defineComponent({
+  __name: 'LauEcomUpcIconSearch',
+  props: {
+    color: {
+      type: String,
+      required: false,
+      default: "currentColor"
+    },
+    width: {
+      type: String,
+      required: false,
+      default: "24"
+    },
+    height: {
+      type: String,
+      required: false,
+      default: "24"
+    }
+  },
+  setup: function setup(__props) {
+    return function (_ctx, _cache) {
+      return vue.openBlock(), vue.createElementBlock("svg", {
+        width: _ctx.width,
+        height: _ctx.height,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg"
+      }, [vue.createElementVNode("path", {
+        d: "M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z",
+        stroke: _ctx.color,
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      }, null, 8 /* PROPS */, _hoisted_2$h), vue.createElementVNode("path", {
+        d: "M21 21L16.65 16.65",
+        stroke: _ctx.color,
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      }, null, 8 /* PROPS */, _hoisted_3$d)], 8 /* PROPS */, _hoisted_1$n);
+    };
+  }
+});script$q.__file = "src/components/LauEcomIcon/LauEcomUpcIconSearch.vue";var LauEcomButtonType = /*#__PURE__*/function (LauEcomButtonType) {
   LauEcomButtonType["Primary"] = "primary";
   LauEcomButtonType["Secondary"] = "secondary";
   return LauEcomButtonType;
@@ -857,8 +902,8 @@ var script$r = /*@__PURE__*/vue.defineComponent({
   LauEcomSize["lg"] = "large";
   LauEcomSize["full"] = "full";
   return LauEcomSize;
-}({});var _hoisted_1$n = ["disabled"];
-var script$q = /*@__PURE__*/vue.defineComponent({
+}({});var _hoisted_1$m = ["disabled"];
+var script$p = /*@__PURE__*/vue.defineComponent({
   __name: 'LauEcomButton',
   props: {
     type: {
@@ -912,13 +957,13 @@ var script$q = /*@__PURE__*/vue.defineComponent({
       }, [_ctx.hasArrow ? (vue.openBlock(), vue.createBlock(vue.unref(script$O), {
         key: 0,
         class: vue.normalizeClass(iconClasses.value)
-      }, null, 8 /* PROPS */, ["class"])) : vue.createCommentVNode("v-if", true), vue.renderSlot(_ctx.$slots, "default")], 10 /* CLASS, PROPS */, _hoisted_1$n);
+      }, null, 8 /* PROPS */, ["class"])) : vue.createCommentVNode("v-if", true), vue.renderSlot(_ctx.$slots, "default")], 10 /* CLASS, PROPS */, _hoisted_1$m);
     };
   }
-});script$q.__scopeId = "data-v-7cd3bda6";
-script$q.__file = "src/components/LauEcomButton/LauEcomButton.vue";var _hoisted_1$m = ["id", "disabled", "value"];
-var _hoisted_2$h = ["for"];
-var script$p = /*@__PURE__*/vue.defineComponent({
+});script$p.__scopeId = "data-v-7cd3bda6";
+script$p.__file = "src/components/LauEcomButton/LauEcomButton.vue";var _hoisted_1$l = ["id", "disabled", "value"];
+var _hoisted_2$g = ["for"];
+var script$o = /*@__PURE__*/vue.defineComponent({
   __name: 'LauEcomRadioButton',
   props: {
     id: {
@@ -984,20 +1029,20 @@ var script$p = /*@__PURE__*/vue.defineComponent({
         disabled: _ctx.isDisabled,
         value: _ctx.value,
         onChange: handleChange
-      }, null, 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_1$m), [[vue.vModelRadio, radioGroupValue.value]]), vue.createElementVNode("span", {
+      }, null, 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_1$l), [[vue.vModelRadio, radioGroupValue.value]]), vue.createElementVNode("span", {
         for: _ctx.id
-      }, vue.toDisplayString(_ctx.label), 9 /* TEXT, PROPS */, _hoisted_2$h)]);
+      }, vue.toDisplayString(_ctx.label), 9 /* TEXT, PROPS */, _hoisted_2$g)]);
     };
   }
-});script$p.__scopeId = "data-v-1e1b236f";
-script$p.__file = "src/components/LauEcomRadioButton/LauEcomRadioButton.vue";var _hoisted_1$l = {
+});script$o.__scopeId = "data-v-1e1b236f";
+script$o.__file = "src/components/LauEcomRadioButton/LauEcomRadioButton.vue";var _hoisted_1$k = {
   class: "dsEcom-flex"
 };
-var _hoisted_2$g = {
+var _hoisted_2$f = {
   class: "lau-ecom-label group upc-font-body-reg-05-14px"
 };
-var _hoisted_3$d = ["required", "disabled", "checked"];
-var script$o = /*@__PURE__*/vue.defineComponent({
+var _hoisted_3$c = ["required", "disabled", "checked"];
+var script$n = /*@__PURE__*/vue.defineComponent({
   __name: 'LauEcomCheckbox',
   props: {
     id: {
@@ -1067,14 +1112,14 @@ var script$o = /*@__PURE__*/vue.defineComponent({
       return "";
     });
     return function (_ctx, _cache) {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [vue.createElementVNode("label", _hoisted_2$g, [vue.createElementVNode("input", {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [vue.createElementVNode("label", _hoisted_2$f, [vue.createElementVNode("input", {
         class: vue.normalizeClass(lauEcomCheckboxClasses.value),
         type: "checkbox",
         required: _ctx.isRequired,
         disabled: _ctx.isDisabled,
         checked: isChecked.value,
         onChange: handleChange
-      }, null, 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_3$d), vue.createVNode(vue.unref(script$N), {
+      }, null, 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_3$c), vue.createVNode(vue.unref(script$N), {
         class: "icon-checkmark",
         width: "16",
         height: "16"
@@ -1088,25 +1133,25 @@ var script$o = /*@__PURE__*/vue.defineComponent({
       })], 2 /* CLASS */)]);
     };
   }
-});script$o.__scopeId = "data-v-51a6198f";
-script$o.__file = "src/components/LauEcomCheckbox/LauEcomCheckbox.vue";var _hoisted_1$k = {
+});script$n.__scopeId = "data-v-51a6198f";
+script$n.__file = "src/components/LauEcomCheckbox/LauEcomCheckbox.vue";var _hoisted_1$j = {
   class: "dsEcom-flex dsEcom-flex-col"
 };
-var _hoisted_2$f = ["id", "type", "placeholder", "name", "disabled", "value", "maxlength"];
-var _hoisted_3$c = {
+var _hoisted_2$e = ["id", "type", "placeholder", "name", "disabled", "value", "maxlength"];
+var _hoisted_3$b = {
   key: 1,
   class: "lau-ecom-error-message core-font-body-reg-06-12px"
 };
-var _hoisted_4$7 = {
+var _hoisted_4$6 = {
   class: "dsEcom-flex"
 };
-var _hoisted_5$6 = {
+var _hoisted_5$5 = {
   class: "dsEcom-ml-1"
 };
 var _hoisted_6$4 = {
   key: 0
 };
-var script$n = /*@__PURE__*/vue.defineComponent({
+var script$m = /*@__PURE__*/vue.defineComponent({
   __name: 'LauEcomInput',
   props: {
     id: {
@@ -1217,7 +1262,7 @@ var script$n = /*@__PURE__*/vue.defineComponent({
       return ["lau-ecom-success", props.size === LauEcomSize.md ? "dsEcom-top-[10px]" : "dsEcom-top-3"];
     });
     return function (_ctx, _cache) {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [_ctx.label ? (vue.openBlock(), vue.createElementBlock("label", {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [_ctx.label ? (vue.openBlock(), vue.createElementBlock("label", {
         key: 0,
         class: vue.normalizeClass(labelClasses.value)
       }, vue.toDisplayString(_ctx.label), 3 /* TEXT, CLASS */)) : vue.createCommentVNode("v-if", true), vue.createElementVNode("div", {
@@ -1232,82 +1277,85 @@ var script$n = /*@__PURE__*/vue.defineComponent({
         value: inputValue.value,
         maxlength: _ctx.limit,
         onInput: handleInput
-      }, null, 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_2$f), _ctx.hasSuccess && !errorMessageValue.value ? (vue.openBlock(), vue.createElementBlock("div", {
+      }, null, 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_2$e), _ctx.hasSuccess && !errorMessageValue.value ? (vue.openBlock(), vue.createElementBlock("div", {
         key: 0,
         class: vue.normalizeClass(successClasses.value)
       }, [vue.createVNode(vue.unref(script$N), {
         class: "dsEcom-fill-feedback-success-60",
         width: "24",
         height: "24"
-      })], 2 /* CLASS */)) : vue.createCommentVNode("v-if", true), errorMessageValue.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$c, [vue.createElementVNode("div", _hoisted_4$7, [vue.createVNode(vue.unref(script$M), {
+      })], 2 /* CLASS */)) : vue.createCommentVNode("v-if", true), errorMessageValue.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$b, [vue.createElementVNode("div", _hoisted_4$6, [vue.createVNode(vue.unref(script$M), {
         class: "dsEcom-fill-primary-60",
         width: "16",
         height: "16"
-      }), vue.createElementVNode("p", _hoisted_5$6, vue.toDisplayString(errorMessageValue.value), 1 /* TEXT */)]), inputValue.value.toString().length === _ctx.limit ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_6$4, vue.toDisplayString("".concat(inputValue.value.toString().length, "/").concat(_ctx.limit)), 1 /* TEXT */)) : vue.createCommentVNode("v-if", true)])) : vue.createCommentVNode("v-if", true)], 2 /* CLASS */)]);
+      }), vue.createElementVNode("p", _hoisted_5$5, vue.toDisplayString(errorMessageValue.value), 1 /* TEXT */)]), inputValue.value.toString().length === _ctx.limit ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_6$4, vue.toDisplayString("".concat(inputValue.value.toString().length, "/").concat(_ctx.limit)), 1 /* TEXT */)) : vue.createCommentVNode("v-if", true)])) : vue.createCommentVNode("v-if", true)], 2 /* CLASS */)]);
     };
   }
-});script$n.__scopeId = "data-v-df501de2";
-script$n.__file = "src/components/LauEcomInput/LauEcomInput.vue";var _hoisted_1$j = {
-  class: "dsEcom-flex dsEcom-flex-col"
+});script$m.__scopeId = "data-v-df501de2";
+script$m.__file = "src/components/LauEcomInput/LauEcomInput.vue";var _hoisted_1$i = {
+  class: "dsEcom-relative"
 };
-var _hoisted_2$e = ["id", "type", "placeholder", "name", "disabled", "value", "maxlength"];
-var _hoisted_3$b = {
-  key: 1,
-  class: "lau-ecom-error-message core-font-body-reg-06-12px"
+var _hoisted_2$d = {
+  class: "dsEcom-flex dsEcom-items-center dsEcom-gap-2 dsEcom-p-4"
 };
-var _hoisted_4$6 = {
-  class: "dsEcom-flex"
+var _hoisted_3$a = {
+  class: "dsEcom-flex dsEcom-items-center dsEcom-gap-2 dsEcom-flex-1"
 };
-var _hoisted_5$5 = {
-  class: "dsEcom-ml-1"
+var _hoisted_4$5 = {
+  class: "dsEcom-flex dsEcom-items-center dsEcom-gap-0 dsEcom-flex-1"
 };
+var _hoisted_5$4 = ["placeholder", "disabled"];
 var _hoisted_6$3 = {
-  key: 0
+  key: 2
 };
-var script$m = /*@__PURE__*/vue.defineComponent({
-  __name: 'LauEcomInput2',
+var _hoisted_7$3 = ["placeholder", "disabled"];
+var _hoisted_8$3 = {
+  class: "dsEcom-absolute dsEcom-right-0 dsEcom-inset-y-0 dsEcom-flex dsEcom-items-stretch"
+};
+var _hoisted_9$1 = {
+  class: "dsEcom-relative"
+};
+var _hoisted_10$1 = ["placeholder", "disabled"];
+var _hoisted_11$1 = {
+  class: "dsEcom-absolute dsEcom-right-0 dsEcom-inset-y-0 dsEcom-flex dsEcom-items-stretch"
+};
+
+// Log de versión del componente
+
+var script$l = /*@__PURE__*/vue.defineComponent({
+  __name: 'LauEcomInputSearch',
   props: {
-    id: {
-      type: String,
-      required: false,
-      default: "lauEcomInput"
-    },
-    type: {
-      type: String,
-      required: false,
-      default: "text"
-    },
     placeholder: {
       type: String,
       required: false,
-      default: "Placeholder"
+      default: "Quiero aprender..."
     },
     isDisabled: {
       type: Boolean,
       required: false,
       default: false
     },
-    label: {
+    modelValue: {
       type: String,
       required: false,
-      default: "Text label"
+      default: ""
     },
-    size: {
-      type: null,
+    forceClose: {
+      type: Boolean,
       required: false,
-      default: LauEcomSize.md
+      default: false
     },
-    name: {
+    buttonColorClass: {
       type: String,
       required: false,
-      default: "input"
+      default: "dsEcom-bg-primary-60 hover:dsEcom-bg-primary-70"
     },
-    modelValue: {
-      type: [String, Number],
+    buttonTextColorClass: {
+      type: String,
       required: false,
-      default: ""
+      default: "dsEcom-text-white"
     },
-    inputContainerClass: {
+    buttonClass: {
       type: String,
       required: false,
       default: ""
@@ -1315,132 +1363,57 @@ var script$m = /*@__PURE__*/vue.defineComponent({
     inputClass: {
       type: String,
       required: false,
-      default: ""
+      default: "dsEcom-h-10 dsEcom-rounded-lg"
     },
-    errorMessage: {
+    containerClass: {
       type: String,
       required: false,
       default: ""
     },
-    hasSuccess: {
+    expandedWidth: {
+      type: String,
+      required: false,
+      default: "50vw"
+    },
+    isMobileSearch: {
       type: Boolean,
       required: false,
       default: false
     },
-    limit: {
-      type: Number,
+    arrowColorClass: {
+      type: String,
       required: false,
-      default: 50
-    }
-  },
-  emits: ["update:modelValue"],
-  setup: function setup(__props, _ref) {
-    var __emit = _ref.emit;
-    var props = __props;
-    var emit = __emit;
-    var inputValue = vue.ref(props.modelValue);
-    var errorMessageValue = vue.ref(props.errorMessage);
-    var handleInput = function handleInput(event) {
-      var newValue = event.target.value;
-      if (newValue.length === props.limit) {
-        errorMessageValue.value = "Excediste el numero de caracteres";
-        inputValue.value = newValue;
-        emit("update:modelValue", newValue);
-        return;
-      } else {
-        errorMessageValue.value = props.errorMessage;
-      }
-      inputValue.value = newValue;
-      emit("update:modelValue", newValue);
-    };
-    var labelClasses = vue.computed(function () {
-      return {
-        "lau-ecom-label": true,
-        "lau-ecom-label--disabled": props.isDisabled
-      };
-    });
-    var inputContainerClasses = vue.computed(function () {
-      return ["dsEcom-relative", props.inputContainerClass ? props.inputContainerClass : "dsEcom-w-[284px]", props.size === LauEcomSize.md ? "dsEcom-h-[42px]" : "dsEcom-h-[46px]"];
-    });
-    var inputClasses = vue.computed(function () {
-      return ["lau-ecom-input core-font-body-reg-04-16px", props.inputClass, props.size === LauEcomSize.md ? "dsEcom-py-[9px]" : "dsEcom-py-[11px]", {
-        "lau-ecom-input--disabled": props.isDisabled
-      }, {
-        "lau-ecom-input--error": errorMessageValue.value
-      }, {
-        "lau-ecom-input-success": props.hasSuccess && !errorMessageValue.value
-      }, props.hasSuccess || errorMessageValue.value ? "placeholder:!dsEcom-text-neutral-100" : "placeholder:!dsEcom-text-neutral-80"];
-    });
-    var successClasses = vue.computed(function () {
-      return ["lau-ecom-success", props.size === LauEcomSize.md ? "dsEcom-top-[10px]" : "dsEcom-top-3"];
-    });
-    return function (_ctx, _cache) {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [_ctx.label ? (vue.openBlock(), vue.createElementBlock("label", {
-        key: 0,
-        class: vue.normalizeClass(labelClasses.value)
-      }, vue.toDisplayString(_ctx.label), 3 /* TEXT, CLASS */)) : vue.createCommentVNode("v-if", true), vue.createElementVNode("div", {
-        class: vue.normalizeClass(inputContainerClasses.value)
-      }, [vue.createElementVNode("input", {
-        id: _ctx.id,
-        class: vue.normalizeClass(inputClasses.value),
-        type: _ctx.type,
-        placeholder: _ctx.placeholder,
-        name: _ctx.name,
-        disabled: _ctx.isDisabled,
-        value: inputValue.value,
-        maxlength: _ctx.limit,
-        onInput: handleInput
-      }, null, 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_2$e), _ctx.hasSuccess && !errorMessageValue.value ? (vue.openBlock(), vue.createElementBlock("div", {
-        key: 0,
-        class: vue.normalizeClass(successClasses.value)
-      }, [vue.createVNode(vue.unref(script$N), {
-        class: "dsEcom-fill-feedback-success-60",
-        width: "24",
-        height: "24"
-      })], 2 /* CLASS */)) : vue.createCommentVNode("v-if", true), errorMessageValue.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$b, [vue.createElementVNode("div", _hoisted_4$6, [vue.createVNode(vue.unref(script$M), {
-        class: "dsEcom-fill-primary-60",
-        width: "16",
-        height: "16"
-      }), vue.createElementVNode("p", _hoisted_5$5, vue.toDisplayString(errorMessageValue.value), 1 /* TEXT */)]), inputValue.value.toString().length === _ctx.limit ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_6$3, vue.toDisplayString("".concat(inputValue.value.toString().length, "/").concat(_ctx.limit)), 1 /* TEXT */)) : vue.createCommentVNode("v-if", true)])) : vue.createCommentVNode("v-if", true)], 2 /* CLASS */)]);
-    };
-  }
-});script$m.__scopeId = "data-v-1dc17999";
-script$m.__file = "src/components/LauEcomInput2/LauEcomInput2.vue";var _hoisted_1$i = {
-  class: "dsEcom-relative"
-};
-var _hoisted_2$d = ["placeholder", "disabled"];
-var _hoisted_3$a = {
-  class: "dsEcom-relative"
-};
-var _hoisted_4$5 = ["placeholder", "disabled"];
-var _hoisted_5$4 = {
-  class: "dsEcom-absolute dsEcom-right-2 dsEcom-top-1/2 -dsEcom-translate-y-1/2 dsEcom-flex dsEcom-gap-2"
-};
-
-// Log de versión del componente
-
-var script$l = /*@__PURE__*/vue.defineComponent({
-  __name: 'LauEcomInputSearch',
-  props: {
-    placeholder: {
+      default: "dsEcom-text-neutral-100"
+    },
+    arrowButtonClass: {
       type: String,
       required: false,
-      default: "Quiero aprender..."
+      default: ""
     },
-    isDisabled: {
-      type: Boolean,
+    mobileInputWidth: {
+      type: String,
       required: false,
-      default: false
+      default: "240px"
     },
-    modelValue: {
+    mobileInputHeight: {
       type: String,
       required: false,
-      default: ""
+      default: "40px"
     },
-    forceClose: {
-      type: Boolean,
+    mobilePanelClass: {
+      type: String,
       required: false,
-      default: false
+      default: "dsEcom-bg-white"
+    },
+    expandedBackgroundClass: {
+      type: String,
+      required: false,
+      default: "dsEcom-bg-white"
+    },
+    overlayClass: {
+      type: String,
+      required: false,
+      default: "dsEcom-bg-black dsEcom-opacity-50"
     }
   },
   emits: {
@@ -1449,11 +1422,14 @@ var script$l = /*@__PURE__*/vue.defineComponent({
     },
     "search": function search(value) {
       return true;
+    },
+    "click:search-icon": function clickSearchIcon() {
+      return true;
     }
   },
   setup: function setup(__props, _ref) {
     var __emit = _ref.emit;
-    console.log('🔍 InputSearch Version: 1.0.20 - Debug Mode');
+    console.log('🔍 InputSearch Version: 1.0.25 - Debug Mode');
     var props = __props;
 
     // Log de props iniciales
@@ -1467,6 +1443,8 @@ var script$l = /*@__PURE__*/vue.defineComponent({
     var searchQuery = vue.ref(props.modelValue);
     var isExpanded = vue.ref(false);
     var showOverlay = vue.ref(false);
+    var isMobileView = vue.ref(false);
+    var isMobileSearchOpen = vue.ref(false);
     var handleSearch = function handleSearch() {
       console.log('🔍 Search triggered:', {
         query: searchQuery.value,
@@ -1476,6 +1454,7 @@ var script$l = /*@__PURE__*/vue.defineComponent({
       if (searchQuery.value && searchQuery.value.trim()) {
         emit("search", searchQuery.value);
         emit("update:modelValue", searchQuery.value);
+        emit("click:search-icon");
         closeSearch();
       }
     };
@@ -1509,8 +1488,8 @@ var script$l = /*@__PURE__*/vue.defineComponent({
       showOverlay.value = true;
     };
     var containerClasses = vue.computed(function () {
-      var classes = ["dsEcom-transition-transform dsEcom-duration-300 dsEcom-ease-in-out", {
-        "dsEcom-relative dsEcom-w-[250px] md:dsEcom-w-[350px]": !isExpanded.value
+      var classes = ["dsEcom-transition-transform dsEcom-duration-300 dsEcom-ease-in-out dsEcom-relative", {
+        "dsEcom-w-[250px] md:dsEcom-w-[350px]": !isExpanded.value
       }];
       console.log('🔍 Container classes updated:', {
         isExpanded: isExpanded.value
@@ -1518,8 +1497,8 @@ var script$l = /*@__PURE__*/vue.defineComponent({
       return classes;
     });
     var overlayClasses = vue.computed(function () {
-      return ["dsEcom-fixed dsEcom-inset-0 dsEcom-bg-black dsEcom-transition-opacity dsEcom-duration-300 dsEcom-ease-in-out dsEcom-z-40", {
-        "dsEcom-opacity-50": showOverlay.value,
+      return ["dsEcom-fixed dsEcom-inset-0 dsEcom-transition-opacity dsEcom-duration-300 dsEcom-ease-in-out dsEcom-z-40", props.overlayClass, {
+        "dsEcom-opacity-100": showOverlay.value,
         "dsEcom-opacity-0 dsEcom-pointer-events-none": !showOverlay.value
       }];
     });
@@ -1528,20 +1507,62 @@ var script$l = /*@__PURE__*/vue.defineComponent({
     var updateExpandedPosition = function updateExpandedPosition() {
       if (originalContainer.value && expandedContainer.value) {
         var rect = originalContainer.value.getBoundingClientRect();
-        var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-        expandedContainer.value.style.top = "".concat(rect.top + scrollTop, "px");
-        console.log('🔍 Updated expanded position:', {
-          top: rect.top + scrollTop
+        var viewportHeight = window.innerHeight;
+        var viewportWidth = window.innerWidth;
+        var topPosition;
+        if (rect.top < 0) {
+          topPosition = '20px';
+        } else if (rect.top > viewportHeight) {
+          topPosition = '20px';
+        } else {
+          topPosition = "".concat(rect.top, "px");
+        }
+
+        // Mantenemos la posición original del input
+        var leftPosition = "".concat(rect.left, "px");
+        expandedContainer.value.style.position = 'fixed';
+        expandedContainer.value.style.top = topPosition;
+        expandedContainer.value.style.left = leftPosition;
+        expandedContainer.value.style.transform = 'none';
+        expandedContainer.value.style.width = props.expandedWidth;
+        expandedContainer.value.style.maxWidth = '90vw';
+
+        // Ajustamos si se sale por la derecha
+        var expandedWidth = parseInt(props.expandedWidth);
+        if (rect.left + expandedWidth > viewportWidth) {
+          // Si se sale por la derecha, ajustamos el ancho para que quepa
+          var availableWidth = viewportWidth - rect.left - 32; // 32px de margen
+          expandedContainer.value.style.width = "".concat(availableWidth, "px");
+        }
+
+        // Log para debugging
+        console.log('🔍 Expanded position updated:', {
+          top: topPosition,
+          left: leftPosition,
+          width: expandedContainer.value.style.width,
+          originalLeft: rect.left,
+          viewportWidth: viewportWidth,
+          originalWidth: rect.width
         });
       }
     };
     vue.onMounted(function () {
-      console.log('🔍 Component mounted');
+      console.log('🔍 Component mounted with props:', {
+        buttonColorClass: props.buttonColorClass,
+        buttonTextColorClass: props.buttonTextColorClass,
+        arrowColorClass: props.arrowColorClass,
+        isMobileSearch: props.isMobileSearch,
+        mobileInputWidth: props.mobileInputWidth,
+        mobileInputHeight: props.mobileInputHeight
+      });
+      checkMobileView();
       window.addEventListener('resize', updateExpandedPosition);
+      window.addEventListener('resize', checkMobileView);
     });
     vue.onBeforeUnmount(function () {
       console.log('🔍 Component will unmount');
       window.removeEventListener('resize', updateExpandedPosition);
+      window.removeEventListener('resize', checkMobileView);
     });
     vue.watch(isExpanded, function (newValue) {
       console.log('🔍 isExpanded changed:', {
@@ -1572,68 +1593,195 @@ var script$l = /*@__PURE__*/vue.defineComponent({
         searchQuery.value = newValue;
       }
     });
+    vue.computed(function () {
+      var defaultClasses = "dsEcom-absolute dsEcom-right-0 dsEcom-top-1/2 -dsEcom-translate-y-1/2 dsEcom-p-2 dsEcom-rounded-r-lg dsEcom-transition-all dsEcom-duration-300";
+
+      // Si hay buttonClass, usamos esas clases directamente
+      if (props.buttonClass) {
+        return [defaultClasses, props.buttonClass];
+      }
+
+      // Si no, usamos las clases de color tradicionales
+      return [defaultClasses, props.buttonColorClass, props.buttonTextColorClass];
+    });
+    var checkMobileView = function checkMobileView() {
+      var wasMobile = isMobileView.value;
+      isMobileView.value = window.innerWidth < 768;
+      if (wasMobile !== isMobileView.value) {
+        console.log('🔍 Mobile view changed:', {
+          isMobileView: isMobileView.value,
+          width: window.innerWidth,
+          buttonColorClass: props.buttonColorClass,
+          buttonTextColorClass: props.buttonTextColorClass
+        });
+      }
+    };
+    var handleMobileSearchClick = function handleMobileSearchClick() {
+      console.log('🔍 Mobile Search Click:', {
+        buttonColorClass: props.buttonColorClass,
+        buttonTextColorClass: props.buttonTextColorClass,
+        arrowColorClass: props.arrowColorClass,
+        isMobileView: isMobileView.value
+      });
+      isMobileSearchOpen.value = true;
+      vue.nextTick(function () {
+        if (expandedContainer.value) {
+          var input = expandedContainer.value.querySelector('input');
+          input === null || input === void 0 || input.focus();
+        }
+      });
+    };
+    var handleMobileSearchClose = function handleMobileSearchClose() {
+      console.log('🔍 Mobile Search Close:', {
+        buttonColorClass: props.buttonColorClass,
+        buttonTextColorClass: props.buttonTextColorClass,
+        arrowColorClass: props.arrowColorClass
+      });
+      isMobileSearchOpen.value = false;
+      searchQuery.value = '';
+      emit('update:modelValue', '');
+    };
+    var handleMobileSearch = function handleMobileSearch() {
+      if (searchQuery.value && searchQuery.value.trim()) {
+        emit("search", searchQuery.value);
+        emit("update:modelValue", searchQuery.value);
+        emit("click:search-icon");
+        handleMobileSearchClose();
+      }
+    };
+    var handleMobileClear = function handleMobileClear() {
+      clearSearch();
+    };
     return function (_ctx, _cache) {
-      var _originalContainer$va;
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [vue.createElementVNode("div", {
-        class: vue.normalizeClass(containerClasses.value),
+      var _props$inputClass, _props$inputClass2, _props$inputClass3;
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [vue.createCommentVNode(" Versión móvil - Solo botón de búsqueda "), isMobileView.value && !isMobileSearchOpen.value ? (vue.openBlock(), vue.createElementBlock("button", {
+        key: 0,
+        onClick: handleMobileSearchClick,
+        class: vue.normalizeClass(["dsEcom-p-2 dsEcom-rounded-lg", [_ctx.buttonColorClass]])
+      }, [vue.createVNode(vue.unref(script$q), {
+        width: "24",
+        height: "24",
+        class: vue.normalizeClass([_ctx.buttonTextColorClass])
+      }, null, 8 /* PROPS */, ["class"])], 2 /* CLASS */)) : vue.createCommentVNode("v-if", true), vue.createCommentVNode(" Capa blanca móvil "), isMobileView.value && isMobileSearchOpen.value ? (vue.openBlock(), vue.createElementBlock("div", {
+        key: 1,
+        class: vue.normalizeClass(["dsEcom-fixed dsEcom-inset-0 dsEcom-z-50", [_ctx.mobilePanelClass]])
+      }, [vue.createElementVNode("div", _hoisted_2$d, [vue.createCommentVNode(" Input y botones "), vue.createElementVNode("div", _hoisted_3$a, [vue.createElementVNode("button", {
+        onClick: handleMobileSearchClose,
+        class: vue.normalizeClass(["dsEcom-p-2 dsEcom-rounded-lg", [_ctx.arrowButtonClass]])
+      }, [vue.createVNode(vue.unref(script$O), {
+        width: "24",
+        height: "24",
+        class: vue.normalizeClass(["dsEcom-transform dsEcom-rotate-[-90deg]", [_ctx.arrowColorClass]]),
+        color: "currentColor"
+      }, null, 8 /* PROPS */, ["class"])], 2 /* CLASS */), vue.createElementVNode("div", _hoisted_4$5, [vue.withDirectives(vue.createElementVNode("input", {
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = function ($event) {
+          return searchQuery.value = $event;
+        }),
+        type: "text",
+        placeholder: _ctx.placeholder,
+        disabled: _ctx.isDisabled,
+        style: vue.normalizeStyle({
+          width: props.mobileInputWidth,
+          height: props.mobileInputHeight
+        }),
+        class: "lau-ecom-input dsEcom-pl-4 dsEcom-pr-4 dsEcom-border dsEcom-border-neutral-80 dsEcom-rounded-l-lg dsEcom-focus:outline-none dsEcom-focus:ring-2 dsEcom-focus:ring-primary-60 dsEcom-flex-1",
+        onInput: handleInput,
+        onKeyup: vue.withKeys(handleMobileSearch, ["enter"])
+      }, null, 44 /* STYLE, PROPS, NEED_HYDRATION */, _hoisted_5$4), [[vue.vModelText, searchQuery.value]]), vue.createElementVNode("button", {
+        onClick: handleMobileSearch,
+        style: vue.normalizeStyle({
+          height: props.mobileInputHeight
+        }),
+        class: vue.normalizeClass(['dsEcom-px-3 dsEcom-rounded-r-lg dsEcom-border-0', _ctx.buttonColorClass, _ctx.buttonTextColorClass])
+      }, [vue.createVNode(vue.unref(script$q), {
+        width: "20",
+        height: "20",
+        color: "currentColor"
+      })], 6 /* CLASS, STYLE */)]), searchQuery.value.length >= 3 ? (vue.openBlock(), vue.createElementBlock("button", {
+        key: 0,
+        onClick: handleMobileClear,
+        class: "dsEcom-p-2 dsEcom-text-neutral-100 hover:dsEcom-text-neutral-80"
+      }, [vue.createVNode(vue.unref(script$J), {
+        width: "16",
+        height: "16"
+      })])) : vue.createCommentVNode("v-if", true)])])], 2 /* CLASS */)) : vue.createCommentVNode("v-if", true), vue.createCommentVNode(" Versión desktop "), !isMobileView.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$3, [vue.createElementVNode("div", {
+        class: vue.normalizeClass([containerClasses.value, props.containerClass]),
         ref_key: "originalContainer",
         ref: originalContainer
+      }, [vue.createElementVNode("div", {
+        class: vue.normalizeClass(["dsEcom-relative", {
+          'dsEcom-invisible': isExpanded.value
+        }])
       }, [vue.withDirectives(vue.createElementVNode("input", {
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = function ($event) {
+        "onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) {
           return searchQuery.value = $event;
         }),
         type: "text",
         placeholder: _ctx.placeholder,
         disabled: _ctx.isDisabled,
-        class: vue.normalizeClass(["lau-ecom-input dsEcom-border dsEcom-border-neutral-80 dsEcom-rounded-lg dsEcom-px-4 dsEcom-h-10 dsEcom-w-full dsEcom-focus:outline-none dsEcom-focus:ring-2 dsEcom-focus:ring-primary-60", {
-          'dsEcom-invisible': isExpanded.value
+        class: vue.normalizeClass(['lau-ecom-input dsEcom-border dsEcom-border-neutral-80 dsEcom-pl-4 dsEcom-pr-24 dsEcom-w-full dsEcom-focus:outline-none dsEcom-focus:ring-2 dsEcom-focus:ring-primary-60', props.inputClass, {
+          'dsEcom-opacity-0': isExpanded.value
         }]),
         onFocus: handleFocus,
         onInput: handleInput,
         onKeyup: vue.withKeys(handleSearch, ["enter"])
-      }, null, 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_2$d), [[vue.vModelText, searchQuery.value]]), searchQuery.value.length >= 3 && !isExpanded.value ? (vue.openBlock(), vue.createElementBlock("button", {
+      }, null, 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_7$3), [[vue.vModelText, searchQuery.value]]), vue.createElementVNode("div", _hoisted_8$3, [searchQuery.value.length >= 3 ? (vue.openBlock(), vue.createElementBlock("button", {
         key: 0,
+        onClick: clearSearch,
+        class: vue.normalizeClass(['dsEcom-flex dsEcom-items-center dsEcom-px-1.5 dsEcom-text-neutral-100 hover:dsEcom-text-neutral-80 dsEcom-transition-all dsEcom-duration-300', props.inputClass])
+      }, [vue.createVNode(vue.unref(script$J), {
+        width: "16",
+        height: "16"
+      })], 2 /* CLASS */)) : vue.createCommentVNode("v-if", true), vue.createElementVNode("button", {
         onClick: handleSearch,
-        class: "dsEcom-absolute dsEcom-right-2 dsEcom-top-1/2 -dsEcom-translate-y-1/2 dsEcom-bg-primary-60 hover:dsEcom-bg-primary-70 dsEcom-text-white dsEcom-p-2 dsEcom-rounded-lg dsEcom-transition-all dsEcom-duration-300"
-      }, [vue.createVNode(vue.unref(script$L), {
+        class: vue.normalizeClass(['dsEcom-flex dsEcom-items-center dsEcom-px-3 dsEcom-transition-all dsEcom-duration-300', (_props$inputClass = props.inputClass) !== null && _props$inputClass !== void 0 && _props$inputClass.includes('rounded') ? props.inputClass : 'dsEcom-rounded-r-lg', props.buttonColorClass, props.buttonTextColorClass, 'dsEcom-border-0']),
+        style: {
+          "margin": "1px",
+          "height": "calc(100% - 2px)"
+        }
+      }, [vue.createVNode(vue.unref(script$q), {
         width: "20",
-        height: "20"
-      })])) : vue.createCommentVNode("v-if", true)], 2 /* CLASS */), vue.createCommentVNode(" Overlay "), vue.createElementVNode("div", {
+        height: "20",
+        color: "currentColor"
+      })], 2 /* CLASS */)])], 2 /* CLASS */)], 2 /* CLASS */), vue.createCommentVNode(" Overlay "), vue.withDirectives(vue.createElementVNode("div", {
         class: vue.normalizeClass(overlayClasses.value),
         onClick: closeSearch
-      }, null, 2 /* CLASS */), vue.createCommentVNode(" Versión expandida "), vue.withDirectives(vue.createElementVNode("div", {
-        class: "dsEcom-fixed dsEcom-w-[656px] dsEcom-left-1/2 dsEcom-transform -dsEcom-translate-x-1/2 dsEcom-z-50",
-        style: vue.normalizeStyle({
-          top: isExpanded.value ? "".concat((_originalContainer$va = originalContainer.value) === null || _originalContainer$va === void 0 ? void 0 : _originalContainer$va.getBoundingClientRect().top, "px") : '0'
-        }),
+      }, null, 2 /* CLASS */), [[vue.vShow, isExpanded.value]]), vue.createCommentVNode(" Versión expandida "), vue.withDirectives(vue.createElementVNode("div", {
+        class: vue.normalizeClass(["dsEcom-fixed dsEcom-z-50 dsEcom-shadow-lg dsEcom-overflow-hidden", [(_props$inputClass2 = props.inputClass) !== null && _props$inputClass2 !== void 0 && _props$inputClass2.includes('rounded') ? props.inputClass : 'dsEcom-rounded-lg', _ctx.expandedBackgroundClass]]),
         ref_key: "expandedContainer",
         ref: expandedContainer
-      }, [vue.createElementVNode("div", _hoisted_3$a, [vue.withDirectives(vue.createElementVNode("input", {
-        "onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) {
+      }, [vue.createElementVNode("div", _hoisted_9$1, [vue.withDirectives(vue.createElementVNode("input", {
+        "onUpdate:modelValue": _cache[2] || (_cache[2] = function ($event) {
           return searchQuery.value = $event;
         }),
         type: "text",
         placeholder: _ctx.placeholder,
         disabled: _ctx.isDisabled,
-        class: "lau-ecom-input dsEcom-border dsEcom-border-neutral-80 dsEcom-rounded-lg dsEcom-px-4 dsEcom-h-10 dsEcom-w-full dsEcom-focus:outline-none dsEcom-focus:ring-2 dsEcom-focus:ring-primary-60 dsEcom-bg-white",
+        class: vue.normalizeClass(['lau-ecom-input dsEcom-border dsEcom-border-neutral-80 dsEcom-pl-4 dsEcom-pr-24 dsEcom-w-full dsEcom-focus:outline-none dsEcom-focus:ring-2 dsEcom-focus:ring-primary-60', props.inputClass]),
         onInput: handleInput,
         onKeyup: vue.withKeys(handleSearch, ["enter"]),
         autofocus: ""
-      }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_4$5), [[vue.vModelText, searchQuery.value]]), vue.createElementVNode("div", _hoisted_5$4, [searchQuery.value.length >= 3 ? (vue.openBlock(), vue.createElementBlock("button", {
+      }, null, 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_10$1), [[vue.vModelText, searchQuery.value]]), vue.createElementVNode("div", _hoisted_11$1, [searchQuery.value.length >= 3 ? (vue.openBlock(), vue.createElementBlock("button", {
         key: 0,
         onClick: clearSearch,
-        class: "dsEcom-text-neutral-100 hover:dsEcom-text-neutral-80 dsEcom-transition-all dsEcom-duration-300"
+        class: vue.normalizeClass(['dsEcom-flex dsEcom-items-center dsEcom-px-1.5 dsEcom-text-neutral-100 hover:dsEcom-text-neutral-80 dsEcom-transition-all dsEcom-duration-300', props.inputClass])
       }, [vue.createVNode(vue.unref(script$J), {
         width: "16",
         height: "16"
-      })])) : vue.createCommentVNode("v-if", true), searchQuery.value.length >= 3 ? (vue.openBlock(), vue.createElementBlock("button", {
-        key: 1,
+      })], 2 /* CLASS */)) : vue.createCommentVNode("v-if", true), vue.createElementVNode("button", {
         onClick: handleSearch,
-        class: "dsEcom-bg-primary-60 hover:dsEcom-bg-primary-70 dsEcom-text-white dsEcom-p-2 dsEcom-rounded-lg dsEcom-transition-all dsEcom-duration-300"
-      }, [vue.createVNode(vue.unref(script$L), {
+        class: vue.normalizeClass(['dsEcom-flex dsEcom-items-center dsEcom-px-3 dsEcom-transition-all dsEcom-duration-300', {
+          'dsEcom-rounded-r-lg': !((_props$inputClass3 = props.inputClass) !== null && _props$inputClass3 !== void 0 && _props$inputClass3.includes('rounded'))
+        }, props.buttonColorClass, props.buttonTextColorClass, 'dsEcom-border-0']),
+        style: {
+          "margin": "1px",
+          "height": "calc(100% - 2px)"
+        }
+      }, [vue.createVNode(vue.unref(script$q), {
         width: "20",
-        height: "20"
-      })])) : vue.createCommentVNode("v-if", true)])])], 4 /* STYLE */), [[vue.vShow, isExpanded.value]])]);
+        height: "20",
+        color: "currentColor"
+      })], 2 /* CLASS */)])])], 2 /* CLASS */), [[vue.vShow, isExpanded.value]])])) : vue.createCommentVNode("v-if", true)]);
     };
   }
 });script$l.__scopeId = "data-v-dd08f962";
@@ -2355,7 +2503,7 @@ var script$e = /*@__PURE__*/vue.defineComponent({
           "category-cookie": item,
           onOnToggle: item.onToggle
         }, null, 8 /* PROPS */, ["modelValue", "onUpdate:modelValue", "category-cookie", "onOnToggle"]);
-      }), 128 /* KEYED_FRAGMENT */))]), vue.createElementVNode("div", _hoisted_3$6, [vue.createVNode(script$q, {
+      }), 128 /* KEYED_FRAGMENT */))]), vue.createElementVNode("div", _hoisted_3$6, [vue.createVNode(script$p, {
         class: "!dsEcom-w-full mobiles:dsEcom-order-last",
         type: vue.unref(LauEcomButtonType).Secondary,
         onOnClick: handleReject
@@ -2364,7 +2512,7 @@ var script$e = /*@__PURE__*/vue.defineComponent({
           return _cache[1] || (_cache[1] = [vue.createTextVNode(" Rechazar ")]);
         }),
         _: 1 /* STABLE */
-      }, 8 /* PROPS */, ["type"]), vue.createVNode(script$q, {
+      }, 8 /* PROPS */, ["type"]), vue.createVNode(script$p, {
         class: "!dsEcom-w-full",
         type: vue.unref(LauEcomButtonType).Secondary,
         onOnClick: handleAcceptSelected
@@ -2373,7 +2521,7 @@ var script$e = /*@__PURE__*/vue.defineComponent({
           return _cache[2] || (_cache[2] = [vue.createTextVNode(" Aceptar seleccionadas ")]);
         }),
         _: 1 /* STABLE */
-      }, 8 /* PROPS */, ["type"]), vue.createVNode(script$q, {
+      }, 8 /* PROPS */, ["type"]), vue.createVNode(script$p, {
         class: "!dsEcom-w-full mobiles:dsEcom-order-first",
         onOnClick: handleAcceptAll
       }, {
@@ -2494,7 +2642,7 @@ var script$d = /*@__PURE__*/vue.defineComponent({
           return _cache[0] || (_cache[0] = [vue.createTextVNode(" Configurar cookies ")]);
         }),
         _: 1 /* STABLE */
-      }), vue.createVNode(script$q, {
+      }), vue.createVNode(script$p, {
         onOnClick: handleAccept
       }, {
         default: vue.withCtx(function () {
@@ -3186,7 +3334,7 @@ var script = /*@__PURE__*/vue.defineComponent({
         class: "dsEcom-bg-neutral-40 dsEcom-mb-4"
       }, null, -1 /* HOISTED */)), vue.createElementVNode("div", _hoisted_7, [_cache[1] || (_cache[1] = vue.createElementVNode("p", {
         class: "button-bold-05-20px"
-      }, "Total", -1 /* HOISTED */)), vue.createElementVNode("p", _hoisted_8, " S/" + vue.toDisplayString(_ctx.summaryData.total), 1 /* TEXT */)]), vue.createVNode(script$q, {
+      }, "Total", -1 /* HOISTED */)), vue.createElementVNode("p", _hoisted_8, " S/" + vue.toDisplayString(_ctx.summaryData.total), 1 /* TEXT */)]), vue.createVNode(script$p, {
         onOnClick: handleGoHomePage
       }, {
         default: vue.withCtx(function () {
@@ -3196,7 +3344,7 @@ var script = /*@__PURE__*/vue.defineComponent({
       })]);
     };
   }
-});script.__file = "src/components/LauEcomTyPage/LauEcomTyPage.vue";var components$1=/*#__PURE__*/Object.freeze({__proto__:null,LauEcomButton:script$q,LauEcomRadioButton:script$p,LauEcomCheckbox:script$o,LauEcomInput:script$n,LauEcomInput2:script$m,LauEcomInputSearch:script$l,LauEcomStepbar:script$j,LauEcomDropdown:script$i,LauEcomBannerCookies:script$d,LauEcomTextButton:script$h,LauEcomTab:script$c,LauEcomDisclamer:script$b,LauEcomFooter:script$8,LauEcomSubFooter:script$9,LauEcomRtb:script$7,LauEcomLoaderPage:script$6,LauEcomSwitch:script$g,LauEcomPaginator:script$3,LauEcomTag:script$2,LauEcomTyPage:script,LauEcomUpcIconNavArrow:script$O,LauEcomUpcIconNavCheckmark:script$N,LauEcomUpcIconExclamationTriangle:script$M,LauEcomUpcIconCheck:script$L,LauEcomUpcIconArrowDown:script$K,LauEcomCoreIconNavClose:script$J,LauEcomUpcIconGlobe:script$I,LauEcomCoreIconFileCode:script$H,LauEcomUpcIconCheckCircle:script$G,LauEcomUpcIconExclamationCircle:script$F,LauEcomUpcIconInfoCircle:script$E,LauEcomUpcIconVirtualClass:script$D,LauEcomUpcIconCertificate:script$C,LauEcomUpcIconCreditCard:script$B,LauEcomCbtIconWorldwide:script$A,LauEcomCbtIconGirlReading:script$z,LauEcomCbtIconChart:script$y,LauEcomCoreIconBook:script$x,LauEcomLogoWasc:script$w,LauEcomUpcIconInnova:script$v,LauEcomCbtLogoCbtVer:script$u,LauEcomCbtLogoLaureate:script$t,LauEcomCbtLogoUpcWhite:script$s,LauEcomUpcIconNavBack:script$r});// install function executed by Vue.use()
+});script.__file = "src/components/LauEcomTyPage/LauEcomTyPage.vue";var components$1=/*#__PURE__*/Object.freeze({__proto__:null,LauEcomButton:script$p,LauEcomRadioButton:script$o,LauEcomCheckbox:script$n,LauEcomInput:script$m,LauEcomInputSearch:script$l,LauEcomStepbar:script$j,LauEcomDropdown:script$i,LauEcomBannerCookies:script$d,LauEcomTextButton:script$h,LauEcomTab:script$c,LauEcomDisclamer:script$b,LauEcomFooter:script$8,LauEcomSubFooter:script$9,LauEcomRtb:script$7,LauEcomLoaderPage:script$6,LauEcomSwitch:script$g,LauEcomPaginator:script$3,LauEcomTag:script$2,LauEcomTyPage:script,LauEcomUpcIconNavArrow:script$O,LauEcomUpcIconNavCheckmark:script$N,LauEcomUpcIconExclamationTriangle:script$M,LauEcomUpcIconCheck:script$L,LauEcomUpcIconArrowDown:script$K,LauEcomCoreIconNavClose:script$J,LauEcomUpcIconGlobe:script$I,LauEcomCoreIconFileCode:script$H,LauEcomUpcIconCheckCircle:script$G,LauEcomUpcIconExclamationCircle:script$F,LauEcomUpcIconInfoCircle:script$E,LauEcomUpcIconVirtualClass:script$D,LauEcomUpcIconCertificate:script$C,LauEcomUpcIconCreditCard:script$B,LauEcomCbtIconWorldwide:script$A,LauEcomCbtIconGirlReading:script$z,LauEcomCbtIconChart:script$y,LauEcomCoreIconBook:script$x,LauEcomLogoWasc:script$w,LauEcomUpcIconInnova:script$v,LauEcomCbtLogoCbtVer:script$u,LauEcomCbtLogoLaureate:script$t,LauEcomCbtLogoUpcWhite:script$s,LauEcomUpcIconNavBack:script$r,LauEcomUpcIconSearch:script$q});// install function executed by Vue.use()
 var install = function installDesignSystem(app) {
   Object.entries(components$1).forEach(function (_ref) {
     var _ref2 = _slicedToArray(_ref, 2),
@@ -3204,7 +3352,7 @@ var install = function installDesignSystem(app) {
       component = _ref2[1];
     app.component(componentName, component);
   });
-};var components=/*#__PURE__*/Object.freeze({__proto__:null,'default':install,LauEcomButton:script$q,LauEcomRadioButton:script$p,LauEcomCheckbox:script$o,LauEcomInput:script$n,LauEcomInput2:script$m,LauEcomInputSearch:script$l,LauEcomStepbar:script$j,LauEcomDropdown:script$i,LauEcomBannerCookies:script$d,LauEcomTextButton:script$h,LauEcomTab:script$c,LauEcomDisclamer:script$b,LauEcomFooter:script$8,LauEcomSubFooter:script$9,LauEcomRtb:script$7,LauEcomLoaderPage:script$6,LauEcomSwitch:script$g,LauEcomPaginator:script$3,LauEcomTag:script$2,LauEcomTyPage:script,LauEcomUpcIconNavArrow:script$O,LauEcomUpcIconNavCheckmark:script$N,LauEcomUpcIconExclamationTriangle:script$M,LauEcomUpcIconCheck:script$L,LauEcomUpcIconArrowDown:script$K,LauEcomCoreIconNavClose:script$J,LauEcomUpcIconGlobe:script$I,LauEcomCoreIconFileCode:script$H,LauEcomUpcIconCheckCircle:script$G,LauEcomUpcIconExclamationCircle:script$F,LauEcomUpcIconInfoCircle:script$E,LauEcomUpcIconVirtualClass:script$D,LauEcomUpcIconCertificate:script$C,LauEcomUpcIconCreditCard:script$B,LauEcomCbtIconWorldwide:script$A,LauEcomCbtIconGirlReading:script$z,LauEcomCbtIconChart:script$y,LauEcomCoreIconBook:script$x,LauEcomLogoWasc:script$w,LauEcomUpcIconInnova:script$v,LauEcomCbtLogoCbtVer:script$u,LauEcomCbtLogoLaureate:script$t,LauEcomCbtLogoUpcWhite:script$s,LauEcomUpcIconNavBack:script$r});Object.entries(components).forEach(function (_ref) {
+};var components=/*#__PURE__*/Object.freeze({__proto__:null,'default':install,LauEcomButton:script$p,LauEcomRadioButton:script$o,LauEcomCheckbox:script$n,LauEcomInput:script$m,LauEcomInputSearch:script$l,LauEcomStepbar:script$j,LauEcomDropdown:script$i,LauEcomBannerCookies:script$d,LauEcomTextButton:script$h,LauEcomTab:script$c,LauEcomDisclamer:script$b,LauEcomFooter:script$8,LauEcomSubFooter:script$9,LauEcomRtb:script$7,LauEcomLoaderPage:script$6,LauEcomSwitch:script$g,LauEcomPaginator:script$3,LauEcomTag:script$2,LauEcomTyPage:script,LauEcomUpcIconNavArrow:script$O,LauEcomUpcIconNavCheckmark:script$N,LauEcomUpcIconExclamationTriangle:script$M,LauEcomUpcIconCheck:script$L,LauEcomUpcIconArrowDown:script$K,LauEcomCoreIconNavClose:script$J,LauEcomUpcIconGlobe:script$I,LauEcomCoreIconFileCode:script$H,LauEcomUpcIconCheckCircle:script$G,LauEcomUpcIconExclamationCircle:script$F,LauEcomUpcIconInfoCircle:script$E,LauEcomUpcIconVirtualClass:script$D,LauEcomUpcIconCertificate:script$C,LauEcomUpcIconCreditCard:script$B,LauEcomCbtIconWorldwide:script$A,LauEcomCbtIconGirlReading:script$z,LauEcomCbtIconChart:script$y,LauEcomCoreIconBook:script$x,LauEcomLogoWasc:script$w,LauEcomUpcIconInnova:script$v,LauEcomCbtLogoCbtVer:script$u,LauEcomCbtLogoLaureate:script$t,LauEcomCbtLogoUpcWhite:script$s,LauEcomUpcIconNavBack:script$r,LauEcomUpcIconSearch:script$q});Object.entries(components).forEach(function (_ref) {
   var _ref2 = _slicedToArray(_ref, 2),
     componentName = _ref2[0],
     component = _ref2[1];