lau-ecom-design-system 1.0.0 → 1.0.2

package/src/components/LauEcomIcon/LauEcomUpcIconCertificate.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+withDefaults(
+  defineProps<{
+    color?: string;
+    width?: string;
+    height?: string;
+  }>(),
+  {
+    color: "#000",
+    width: "24",
+    height: "24",
+  },
+);
+</script>
+
+<template>
+  <svg
+    :width="width"
+    :height="height"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M25.375 22.9881C25.2761 22.9896 25.178 22.9694 25.0864 22.9286C24.9947 22.8878 24.9115 22.8273 24.8416 22.7506C24.7717 22.674 24.7165 22.5827 24.6793 22.4823C24.6421 22.3818 24.6236 22.2742 24.625 22.1658C24.6158 22.0553 24.6288 21.9439 24.6633 21.8395C24.6977 21.7351 24.7527 21.6404 24.8242 21.5619C24.8958 21.4834 24.9822 21.4232 25.0774 21.3854C25.1726 21.3477 25.2742 21.3334 25.375 21.3435C25.6722 21.3392 25.9561 21.2079 26.1662 20.9775C26.3763 20.7471 26.4961 20.4358 26.5 20.11V7.7753C26.4961 7.44949 26.3763 7.13822 26.1662 6.90782C25.9561 6.67742 25.6722 6.5461 25.375 6.54184H6.625C6.32784 6.5461 6.04394 6.67742 5.8338 6.90782C5.62366 7.13822 5.50388 7.44949 5.5 7.7753V20.11C5.50388 20.4358 5.62366 20.7471 5.8338 20.9775C6.04394 21.2079 6.32784 21.3392 6.625 21.3435H15.0625C15.1614 21.3419 15.2595 21.3622 15.3511 21.403C15.4428 21.4437 15.526 21.5043 15.5959 21.5809C15.6658 21.6576 15.721 21.7488 15.7582 21.8493C15.7954 21.9498 15.8139 22.0574 15.8125 22.1658C15.8217 22.2763 15.8087 22.3877 15.7742 22.492C15.7398 22.5964 15.6848 22.6912 15.6133 22.7697C15.5417 22.8481 15.4553 22.9084 15.3601 22.9461C15.2649 22.9839 15.1633 22.9982 15.0625 22.9881H6.625C5.92881 22.9881 5.26113 22.6849 4.76884 22.1451C4.27656 21.6054 4 20.8733 4 20.11V7.7753C4.034 7.0336 4.32429 6.33391 4.81186 5.81842C5.29944 5.30292 5.94773 5.0103 6.625 5H25.375C26.0712 5 26.7389 5.30323 27.2312 5.84297C27.7234 6.38272 28 7.11478 28 7.87809V20.2128C27.95 20.9482 27.6547 21.6378 27.1705 22.1497C26.6864 22.6616 26.0472 22.9601 25.375 22.9881ZM17.2187 22.805C17.1538 22.7684 17.0911 22.7266 17.0312 22.6797C16.8063 22.5152 16.6321 22.2798 16.5316 22.0045C16.4312 21.7293 16.4093 21.4271 16.4687 21.1379L16.75 19.0821L15.4375 17.5402C15.2471 17.3494 15.1105 17.1028 15.0441 16.8295C14.9776 16.5562 14.984 16.2678 15.0625 15.9984C15.1501 15.7332 15.3005 15.4982 15.4982 15.3176C15.6958 15.137 15.9337 15.0172 16.1875 14.9705L18.0625 14.6621L18.9062 12.8119C19.039 12.5597 19.2305 12.3507 19.4611 12.2063C19.6917 12.0618 19.9532 11.987 20.2187 11.9896C20.4843 11.987 20.7458 12.0618 20.9764 12.2063C21.207 12.3507 21.3984 12.5597 21.5312 12.8119L22.375 14.6621L24.25 14.9705C24.5037 15.0172 24.7416 15.137 24.9393 15.3176C25.137 15.4982 25.2873 15.7332 25.375 15.9984C25.4535 16.2678 25.4598 16.5562 25.3934 16.8295C25.3269 17.1028 25.1904 17.3494 25 17.5402L23.5937 18.9793L23.875 21.0351C23.9252 21.3241 23.8989 21.6229 23.7992 21.8961C23.6996 22.1693 23.5307 22.4055 23.3125 22.5769C23.2526 22.6227 23.1899 22.6632 23.125 22.6984V26.1746C23.1342 26.2851 23.1211 26.3965 23.0867 26.5008C23.0523 26.6052 22.9973 26.7 22.9258 26.7784C22.8542 26.8569 22.7677 26.9172 22.6726 26.9549C22.5774 26.9927 22.4758 27.007 22.375 26.9969H17.9687C17.8699 26.9984 17.7717 26.9782 17.6801 26.9374C17.5885 26.8966 17.5052 26.8361 17.4353 26.7594C17.3654 26.6827 17.3102 26.5915 17.273 26.491C17.2358 26.3906 17.2173 26.283 17.2187 26.1746V22.805ZM19.9338 20.1754C19.9032 20.1858 19.8731 20.1983 19.8437 20.2128L17.7996 21.3334L18.25 18.5681L16.375 16.5123L19 16.1012L20.2187 13.4287L21.3437 15.9984L23.9687 16.4096L22.0937 18.4653L22.5625 21.3434L20.2187 20.0072L19.9338 20.1754ZM21.7187 22.6797V25.455H18.7187V22.6797L20.2187 21.7546L21.7187 22.6797Z"
+      :fill="color"
+    />
+  </svg>
+</template>

package/src/components/LauEcomIcon/LauEcomUpcIconCheckCircle.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+withDefaults(
+  defineProps<{
+    color?: string;
+    width?: string;
+    height?: string;
+  }>(),
+  {
+    color: "#000",
+    width: "24",
+    height: "24",
+  },
+);
+</script>
+
+<template>
+  <svg
+    :width="width"
+    :height="height"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M6.99987 19.4832C8.47991 20.4722 10.22 21 12 21C14.3861 20.9972 16.6736 20.0481 18.3609 18.3609C20.0481 16.6736 20.9972 14.3861 21 12C21 10.22 20.4722 8.47991 19.4832 6.99987C18.4943 5.51983 17.0887 4.36628 15.4442 3.68509C13.7996 3.0039 11.99 2.82567 10.2442 3.17294C8.49836 3.5202 6.89471 4.37737 5.63604 5.63604C4.37737 6.89471 3.5202 8.49836 3.17294 10.2442C2.82567 11.99 3.0039 13.7996 3.68509 15.4442C4.36628 17.0887 5.51983 18.4943 6.99987 19.4832ZM7.58812 5.39716C8.89404 4.52457 10.4294 4.05883 12 4.05883C14.1052 4.062 16.1232 4.89968 17.6118 6.38825C19.1003 7.87682 19.938 9.89485 19.9412 12C19.9412 13.5706 19.4754 15.106 18.6028 16.4119C17.7303 17.7178 16.49 18.7356 15.039 19.3367C13.5879 19.9377 11.9912 20.095 10.4508 19.7886C8.91032 19.4822 7.49534 18.7259 6.38474 17.6153C5.27415 16.5047 4.51783 15.0897 4.21141 13.5492C3.905 12.0088 4.06226 10.4121 4.66331 8.96105C5.26436 7.50999 6.2822 6.26974 7.58812 5.39716ZM9.7532 15.2903C9.82257 15.322 9.89787 15.3385 9.97411 15.3388C10.0936 15.3359 10.2094 15.2965 10.3059 15.2259L16.6729 9.95296C16.7784 9.86217 16.8441 9.7336 16.8559 9.5949C16.8676 9.45619 16.8245 9.31841 16.7357 9.21117C16.647 9.10393 16.5197 9.03578 16.3812 9.02138C16.2428 9.00698 16.1042 9.04746 15.9953 9.13414L10.0306 14.0753L8.66823 12.5083C8.623 12.4551 8.56769 12.4115 8.5055 12.3798C8.44331 12.3482 8.37546 12.3292 8.30589 12.324C8.23631 12.3187 8.16638 12.3273 8.10015 12.3493C8.03391 12.3712 7.97268 12.406 7.91999 12.4518C7.81501 12.5449 7.75096 12.6757 7.74172 12.8158C7.73247 12.9558 7.77876 13.0939 7.87058 13.2L9.57176 15.1553C9.62198 15.2127 9.68383 15.2587 9.7532 15.2903Z"
+      :fill="color"
+    />
+  </svg>
+</template>

package/src/components/LauEcomIcon/LauEcomUpcIconCreditCard.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+withDefaults(
+  defineProps<{
+    color?: string;
+    width?: string;
+    height?: string;
+  }>(),
+  {
+    color: "#000",
+    width: "24",
+    height: "24",
+  },
+);
+</script>
+
+<template>
+  <svg
+    :width="width"
+    :height="height"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M25.4118 7H6.58824C6.24827 6.99973 5.9116 7.07177 5.59747 7.21198C5.28334 7.35219 4.99791 7.55782 4.75753 7.81713C4.51714 8.07643 4.3265 8.38431 4.19651 8.72316C4.06653 9.062 3.99975 9.42517 4 9.79188V22.2081C3.99975 22.5748 4.06653 22.938 4.19651 23.2768C4.3265 23.6157 4.51714 23.9236 4.75753 24.1829C4.99791 24.4422 5.28334 24.6478 5.59747 24.788C5.9116 24.9282 6.24827 25.0003 6.58824 25H25.4118C25.7517 25.0003 26.0884 24.9282 26.4025 24.788C26.7167 24.6478 27.0021 24.4422 27.2425 24.1829C27.4829 23.9236 27.6735 23.6157 27.8035 23.2768C27.9335 22.938 28.0002 22.5748 28 22.2081V9.79188C28.0002 9.42517 27.9335 9.062 27.8035 8.72316C27.6735 8.38431 27.4829 8.07643 27.2425 7.81713C27.0021 7.55782 26.7167 7.35219 26.4025 7.21198C26.0884 7.07177 25.7517 6.99973 25.4118 7ZM26.5882 22.198C26.5882 22.5345 26.4643 22.8573 26.2437 23.0953C26.023 23.3333 25.7238 23.467 25.4118 23.467H6.58824C6.27622 23.467 5.97698 23.3333 5.75635 23.0953C5.53571 22.8573 5.41177 22.5345 5.41177 22.198V14.797H26.5882V22.198ZM5.41177 11.7513V9.79188C5.41177 9.45531 5.53571 9.13253 5.75635 8.89453C5.97698 8.65654 6.27622 8.52284 6.58824 8.52284H25.4118C25.7238 8.52284 26.023 8.65654 26.2437 8.89453C26.4643 9.13253 26.5882 9.45531 26.5882 9.79188V11.7614H5.41177V11.7513ZM8.21647 21.2132H13.8635C14.0507 21.2132 14.2303 21.133 14.3627 20.9902C14.495 20.8474 14.5694 20.6537 14.5694 20.4518C14.5694 20.2498 14.495 20.0562 14.3627 19.9134C14.2303 19.7706 14.0507 19.6904 13.8635 19.6904H8.21647C8.02926 19.6904 7.84972 19.7706 7.71734 19.9134C7.58496 20.0562 7.51059 20.2498 7.51059 20.4518C7.51059 20.6537 7.58496 20.8474 7.71734 20.9902C7.84972 21.133 8.02926 21.2132 8.21647 21.2132ZM19.5388 21.2132H16.7153C16.5281 21.2132 16.3485 21.133 16.2162 20.9902C16.0838 20.8474 16.0094 20.6537 16.0094 20.4518C16.0094 20.2498 16.0838 20.0562 16.2162 19.9134C16.3485 19.7706 16.5281 19.6904 16.7153 19.6904H19.5388C19.726 19.6904 19.9056 19.7706 20.038 19.9134C20.1703 20.0562 20.2447 20.2498 20.2447 20.4518C20.2447 20.6537 20.1703 20.8474 20.038 20.9902C19.9056 21.133 19.726 21.2132 19.5388 21.2132Z"
+      :fill="color"
+    />
+  </svg>
+</template>

package/src/components/LauEcomIcon/LauEcomUpcIconExclamationCircle.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+withDefaults(
+  defineProps<{
+    color?: string;
+    width?: string;
+    height?: string;
+  }>(),
+  {
+    color: "#000",
+    width: "24",
+    height: "24",
+  },
+);
+</script>
+
+<template>
+  <svg
+    :width="width"
+    :height="height"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M12 21C10.22 21 8.47991 20.4722 6.99987 19.4832C5.51983 18.4943 4.36628 17.0887 3.68509 15.4442C3.0039 13.7996 2.82567 11.99 3.17294 10.2442C3.5202 8.49836 4.37737 6.89471 5.63604 5.63604C6.89471 4.37737 8.49836 3.5202 10.2442 3.17294C11.99 2.82567 13.7996 3.0039 15.4442 3.68509C17.0887 4.36628 18.4943 5.51983 19.4832 6.99987C20.4722 8.47991 21 10.22 21 12C20.9972 14.3861 20.0481 16.6736 18.3609 18.3609C16.6736 20.0481 14.3861 20.9972 12 21ZM12 4.05883C10.4294 4.05883 8.89404 4.52457 7.58812 5.39716C6.2822 6.26974 5.26436 7.50999 4.66331 8.96105C4.06226 10.4121 3.905 12.0088 4.21141 13.5492C4.51783 15.0897 5.27415 16.5047 6.38474 17.6153C7.49534 18.7259 8.91032 19.4822 10.4508 19.7886C11.9912 20.095 13.5879 19.9377 15.039 19.3367C16.49 18.7356 17.7303 17.7178 18.6028 16.4119C19.4754 15.106 19.9412 13.5706 19.9412 12C19.938 9.89485 19.1003 7.87682 17.6118 6.38825C16.1232 4.89968 14.1052 4.062 12 4.05883ZM12 13.2282C11.8599 13.2273 11.7258 13.1712 11.6267 13.0721C11.5276 12.9731 11.4715 12.8389 11.4706 12.6988V8.47059C11.4706 8.33018 11.5264 8.19552 11.6257 8.09624C11.7249 7.99695 11.8596 7.94118 12 7.94118C12.1404 7.94118 12.2751 7.99695 12.3744 8.09624C12.4736 8.19552 12.5294 8.33018 12.5294 8.47059V12.6988C12.5295 12.7684 12.5159 12.8373 12.4893 12.9015C12.4627 12.9658 12.4237 13.0242 12.3746 13.0734C12.3254 13.1226 12.267 13.1616 12.2027 13.1881C12.1384 13.2147 12.0696 13.2283 12 13.2282ZM11.6337 16.0086C11.7328 16.1077 11.8669 16.1638 12.0071 16.1647C12.0766 16.1648 12.1455 16.1512 12.2098 16.1246C12.274 16.098 12.3324 16.059 12.3816 16.0098C12.4308 15.9607 12.4698 15.9023 12.4964 15.838C12.5229 15.7737 12.5366 15.7048 12.5365 15.6353V15.5435C12.5365 15.4031 12.4807 15.2685 12.3814 15.1692C12.2821 15.0699 12.1475 15.0141 12.0071 15.0141C11.8666 15.0141 11.732 15.0699 11.6327 15.1692C11.5334 15.2685 11.4776 15.4031 11.4776 15.5435V15.6353C11.4786 15.7754 11.5346 15.9095 11.6337 16.0086Z"
+      :fill="color"
+    />
+  </svg>
+</template>

package/src/components/LauEcomIcon/LauEcomUpcIconGlobe.vue

@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+withDefaults(
+  defineProps<{
+    color?: string;
+    width?: string;
+    height?: string;
+  }>(),
+  {
+    color: "#000",
+    width: "24",
+    height: "24",
+  },
+);
+</script>
+
+<template>
+  <svg
+    :width="width"
+    :height="height"
+    viewBox="0 0 25 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12.5071 3C10.7267 2.9986 8.98599 3.52526 7.50502 4.51334C6.02404 5.50142 4.86939 6.90654 4.18712 8.55095C3.50485 10.1954 3.32561 12.0052 3.67208 13.7515C4.01854 15.4978 4.87515 17.1021 6.13354 18.3615C7.39193 19.6208 8.99557 20.4787 10.7416 20.8265C12.4876 21.1744 14.2976 20.9966 15.9425 20.3156C17.5875 19.6346 18.9935 18.4811 19.9827 17.0009C20.972 15.5207 21.5 13.7803 21.5 12C21.4991 9.61456 20.5515 7.32699 18.8654 5.63957C17.1793 3.95215 14.8925 3.00281 12.5071 3ZM20.4395 12C20.4394 12.9094 20.279 13.8116 19.9658 14.6654C18.7338 15.3223 17.4187 15.8099 16.0562 16.1147C16.2273 15.1492 16.3383 14.1741 16.3885 13.1948C17.787 12.8961 19.1446 12.4309 20.4324 11.8091C20.4324 11.8727 20.4395 11.9364 20.4395 12ZM4.57463 12C4.57463 11.9364 4.5817 11.8727 4.5817 11.8091C5.86951 12.4309 7.22718 12.8961 8.62569 13.1948C8.67583 14.1741 8.7868 15.1492 8.95798 16.1147C7.59443 15.8133 6.27886 15.3256 5.04831 14.6654C4.73513 13.8116 4.57478 12.9094 4.57463 12ZM15.3633 12C15.3633 12.1061 15.3562 12.205 15.3562 12.3111C14.4152 12.4736 13.4621 12.5564 12.5071 12.5585C11.5521 12.5564 10.599 12.4736 9.6579 12.3111C9.6579 12.205 9.65083 12.1061 9.65083 12C9.65272 10.9045 9.73306 9.81062 9.8912 8.72663C10.7539 8.88742 11.6296 8.96789 12.5071 8.96701C13.3844 8.96436 14.2598 8.88392 15.1229 8.72663C15.2811 9.81062 15.3614 10.9045 15.3633 12ZM16.1551 8.49332C17.1317 8.24182 18.0777 7.88382 18.976 7.42577C19.6611 8.39327 20.1201 9.50225 20.3193 10.6709C19.0835 11.3086 17.7723 11.7884 16.4167 12.099V12.0071C16.4221 10.8308 16.3347 9.65587 16.1551 8.49332ZM8.59034 12.099C7.23516 11.7871 5.92418 11.3073 4.68775 10.6709C4.8851 9.50171 5.34431 8.39234 6.03103 7.42577C6.92997 7.88257 7.8758 8.24051 8.85193 8.49332C8.67969 9.65431 8.59226 10.8263 8.59034 12V12.099ZM9.70032 13.3928C10.6289 13.5378 11.5672 13.611 12.5071 13.6119C13.4469 13.6113 14.3853 13.5381 15.3138 13.3928C15.253 14.3779 15.1278 15.358 14.9391 16.3268C14.1347 16.4542 13.3215 16.5181 12.5071 16.5177C11.6928 16.5148 10.8798 16.451 10.075 16.3268C9.88241 15.3586 9.75721 14.3783 9.70032 13.3928ZM18.2903 6.58445C17.5466 6.94364 16.7701 7.23012 15.9713 7.43991C15.7801 6.46044 15.525 5.49452 15.2078 4.54831C16.3809 4.9755 17.437 5.67305 18.2903 6.58445ZM13.9635 4.20189C14.3812 5.33097 14.7075 6.49182 14.9391 7.67321C14.1376 7.8277 13.3233 7.90582 12.5071 7.90652C11.6908 7.90617 10.8765 7.82805 10.075 7.67321C10.3081 6.49217 10.6343 5.33143 11.0507 4.20189C11.531 4.1118 12.0184 4.06448 12.5071 4.06049C12.9958 4.06448 13.4831 4.1118 13.9635 4.20189ZM9.7993 4.54831C9.48536 5.4955 9.23035 6.46121 9.03575 7.43991C8.23961 7.22911 7.46547 6.94266 6.72388 6.58445C7.57583 5.67474 8.62914 4.97738 9.7993 4.54831ZM5.79066 16.2137C6.88293 16.6763 8.02018 17.0246 9.18421 17.2529C9.35389 17.9953 9.55892 18.7235 9.7993 19.4446C8.14123 18.8429 6.7308 17.7061 5.79066 16.2137ZM11.0507 19.7981C10.7632 19.0255 10.5201 18.2371 10.3225 17.4368C11.0466 17.5348 11.7764 17.5844 12.5071 17.5852C13.2378 17.5844 13.9676 17.5348 14.6917 17.4368C14.4941 18.2371 14.251 19.0255 13.9635 19.7981C13.4831 19.8882 12.9958 19.9355 12.5071 19.9395C12.0184 19.9355 11.531 19.8882 11.0507 19.7981ZM15.2148 19.4517C15.4552 18.7306 15.6603 17.9953 15.8299 17.26C16.9937 17.0306 18.1308 16.6824 19.2235 16.2207C18.2792 17.7094 16.8702 18.8451 15.2148 19.4517Z"
+      :fill="color"
+    />
+  </svg>
+</template>

package/src/components/LauEcomIcon/LauEcomUpcIconInfoCircle.vue

@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+withDefaults(
+  defineProps<{
+    color?: string;
+    width?: string;
+    height?: string;
+  }>(),
+  {
+    color: "#000",
+    width: "24",
+    height: "24",
+  },
+);
+</script>
+
+<template>
+  <svg
+    :width="width"
+    :height="height"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M13.2353 16.2353C13.2353 16.3757 13.1795 16.5104 13.0802 16.6096C12.981 16.7089 12.8463 16.7647 12.7059 16.7647C12.3783 16.7647 12.0641 16.6346 11.8324 16.4029C11.6007 16.1712 11.4706 15.857 11.4706 15.5294V12C11.4706 11.9532 11.452 11.9083 11.4189 11.8752C11.3858 11.8421 11.3409 11.8235 11.2941 11.8235C11.1537 11.8235 11.0191 11.7677 10.9198 11.6685C10.8205 11.5692 10.7647 11.4345 10.7647 11.2941C10.7647 11.1537 10.8205 11.019 10.9198 10.9198C11.0191 10.8205 11.1537 10.7647 11.2941 10.7647C11.6217 10.7647 11.9359 10.8948 12.1676 11.1265C12.3993 11.3582 12.5294 11.6724 12.5294 12V15.5294C12.5294 15.5762 12.548 15.6211 12.5811 15.6542C12.6142 15.6873 12.6591 15.7059 12.7059 15.7059C12.8463 15.7059 12.981 15.7617 13.0802 15.8609C13.1795 15.9602 13.2353 16.0949 13.2353 16.2353ZM11.6471 9C11.8216 9 11.9922 8.94825 12.1373 8.8513C12.2824 8.75434 12.3955 8.61654 12.4622 8.45531C12.529 8.29408 12.5465 8.11667 12.5125 7.94551C12.4784 7.77435 12.3944 7.61713 12.271 7.49373C12.1476 7.37033 11.9904 7.28629 11.8192 7.25225C11.648 7.2182 11.4706 7.23568 11.3094 7.30246C11.1482 7.36924 11.0104 7.48233 10.9134 7.62744C10.8165 7.77254 10.7647 7.94313 10.7647 8.11765C10.7647 8.35166 10.8577 8.57609 11.0231 8.74156C11.1886 8.90704 11.413 9 11.6471 9ZM21 12C21 13.78 20.4722 15.5201 19.4832 17.0001C18.4943 18.4802 17.0887 19.6337 15.4442 20.3149C13.7996 20.9961 11.99 21.1743 10.2442 20.8271C8.49836 20.4798 6.89471 19.6226 5.63604 18.364C4.37737 17.1053 3.5202 15.5016 3.17294 13.7558C2.82567 12.01 3.0039 10.2004 3.68509 8.55585C4.36628 6.91131 5.51983 5.50571 6.99987 4.51677C8.47991 3.52784 10.22 3 12 3C14.3861 3.0028 16.6736 3.95191 18.3609 5.63913C20.0481 7.32635 20.9972 9.61391 21 12ZM19.9412 12C19.9412 10.4294 19.4754 8.89404 18.6028 7.58812C17.7303 6.2822 16.49 5.26436 15.039 4.66331C13.5879 4.06226 11.9912 3.905 10.4508 4.21141C8.91032 4.51782 7.49534 5.27415 6.38474 6.38474C5.27415 7.49533 4.51783 8.91031 4.21141 10.4508C3.905 11.9912 4.06226 13.5879 4.66331 15.039C5.26436 16.49 6.2822 17.7303 7.58812 18.6028C8.89404 19.4754 10.4294 19.9412 12 19.9412C14.1054 19.9388 16.1239 19.1014 17.6127 17.6127C19.1014 16.1239 19.9388 14.1054 19.9412 12Z"
+      :fill="color"
+    />
+  </svg>
+</template>

package/src/components/LauEcomIcon/LauEcomUpcIconInnova.vue

@@ -0,0 +1,122 @@
+<script lang="ts" setup>
+withDefaults(
+  defineProps<{
+    color?: string;
+    width?: string;
+    height?: string;
+  }>(),
+  {
+    color: "#000",
+    width: "24",
+    height: "24",
+  },
+);
+</script>
+
+<template>
+  <svg
+    width="168"
+    height="102"
+    viewBox="0 0 168 102"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clip-path="url(#clip0_621_329)">
+      <path
+        d="M92.6205 26.5424H101.555V29.9797H99.7687V39.8992C99.7687 47.092 96.2293 49.7113 90.344 49.7113C84.4587 49.7113 80.9521 47.0548 80.9521 39.862V29.9797H79.1293V26.5424H88.0635V29.9797H85.4723V40.6759C85.4723 44.4644 86.8742 46.1294 90.344 46.1294C93.8139 46.1294 95.2157 44.5016 95.2157 40.709V29.9756H92.6246V26.5382L92.6205 26.5424Z"
+        fill="#191919"
+      />
+      <path
+        d="M113.403 26.5424C118.904 26.5424 121.463 29.236 121.463 33.9459C121.463 38.6557 118.696 41.3493 113.088 41.3493H109.512V45.9889H112.7V49.1783H102.993V45.9889H104.992V29.9797H102.993V26.5424H113.403ZM112.602 37.9822C115.933 37.9822 117.016 36.5321 117.016 34.0161C117.016 31.5001 115.998 30.1532 113.023 30.1532H109.52V37.9822H112.602Z"
+        fill="#191919"
+      />
+      <path
+        d="M136.858 30.0499C135.91 29.8021 134.86 29.6946 133.74 29.6946C129.571 29.6946 127.642 32.2437 127.642 36.7428V38.2301C127.642 43.7208 129.919 46.2368 134.091 46.2368C135.142 46.2368 136.229 46.0963 137.247 45.8112V42.3409H141.064V47.0507C139.944 48.2901 137.418 49.7072 133.74 49.7072C127.221 49.7072 122.913 45.3857 122.913 37.6972V37.6269C122.913 30.5788 126.767 26.0425 133.392 26.0425C137.247 26.0425 139.699 27.3191 140.786 28.4883V33.2683H136.862V30.0458L136.858 30.0499Z"
+        fill="#191919"
+      />
+      <g clip-path="url(#clip1_621_329)">
+        <path
+          d="M27.8954 67.3997C27.8382 67.81 27.7965 68.215 27.7965 68.6253C27.7965 70.4977 28.343 71.434 29.9148 71.434C30.9817 71.434 32.0487 70.7397 32.8189 69.7614L33.0844 69.9823C31.9758 71.3866 30.7475 72.0599 29.3371 72.0599C27.7653 72.0599 26.053 71.1815 26.053 68.6621C26.053 65.6482 28.5095 62.3872 31.575 62.3872C33.2665 62.3872 34.1357 63.2235 34.1357 64.4227C34.1357 66.0112 32.158 67.3945 27.9058 67.3945M27.9683 67.0894C31.9185 66.9684 32.5847 65.359 32.5847 63.9967C32.5847 63.1814 32.1423 62.8132 31.497 62.8132C29.9876 62.8132 28.4731 64.8277 27.9735 67.0894"
+          fill="#191919"
+        />
+        <path
+          d="M39.3038 66.3848H39.3454L40.2094 64.7332C41.1566 62.8818 41.9425 62.3506 42.7909 62.3506C43.5559 62.3506 44.0192 62.9239 44.0192 63.5761C44.0192 64.2283 43.5976 64.6175 43.0303 64.6175C42.463 64.6175 42.0414 64.1494 42.0414 63.3762C41.5574 63.4972 40.9537 64.2756 40.2666 65.5538L39.5224 66.9371L40.9328 70.4401C41.2972 71.3184 41.4793 71.5183 42.666 71.6025V71.8497L39.7826 71.9338L38.5127 67.9206H38.4711L37.5447 69.6511C36.4777 71.7077 35.7126 72.2389 34.9632 72.2389C34.0732 72.2389 33.61 71.6708 33.61 71.0186C33.61 70.4085 33.9691 69.9772 34.5989 69.9772C35.161 69.9772 35.5877 70.4874 35.5877 71.2185C35.9885 71.0923 36.7588 70.1771 37.4406 68.9568L38.2889 67.4315L36.9565 64.1073C36.613 63.2553 36.4725 63.0081 35.161 63.0081V62.7661L38.0443 62.4768L39.2934 66.3901L39.3038 66.3848Z"
+          fill="#191919"
+        />
+        <path
+          d="M48.3702 71.5971C48.1672 71.676 47.1003 72.0442 46.3144 72.0442C45.2839 72.0442 44.7218 71.576 44.7218 70.6977C44.7218 70.4294 44.7843 70.1086 44.8831 69.7614L46.7152 63.8548C46.9181 63.2025 46.4341 62.9396 45.185 62.8554V62.6135L48.8334 62.4872L46.5746 69.7825C46.4549 70.1875 46.3717 70.4925 46.3717 70.7187C46.3717 71.3288 46.8557 71.4919 48.365 71.413V71.5971H48.3702ZM49.0572 58.4583C49.765 57.48 50.0669 57.075 50.6082 57.075C50.9725 57.075 51.316 57.4011 51.316 57.7692C51.316 58.2584 50.9153 58.6055 49.8015 59.3787L47.3657 61.0881H47.1419L49.0572 58.4635V58.4583Z"
+          fill="#191919"
+        />
+        <path
+          d="M50.2283 68.6673C50.2283 66.0585 52.5443 62.3925 55.386 62.3925C56.4946 62.3925 57.1399 62.8027 57.6448 63.4918L57.9467 62.6134L59.6381 62.3872L58.5504 65.6903L56.7964 72.0441C56.073 74.6687 54.902 75.9573 52.1644 75.9573C50.171 75.9573 49.0833 75.0421 49.0833 74.0638C49.0833 73.2065 49.5881 72.6805 50.2699 72.6805C50.8736 72.6805 51.2379 73.0908 51.2379 73.7219C51.2379 74.1322 50.9777 74.5162 50.5926 74.7634C50.8788 75.2525 51.342 75.5997 52.1435 75.5997C53.7986 75.5997 54.725 74.1322 55.3496 71.8547L55.7347 70.3873L55.6931 70.3715C54.8655 71.3708 54.1629 71.8968 53.0127 71.8968C51.4982 71.8968 50.2335 70.7134 50.2335 68.6779M51.9666 68.7988C51.9666 70.3294 52.5703 71.0816 53.7205 71.0816C54.6105 71.0816 55.2142 70.5924 55.8388 69.593L57.3533 64.5016C57.0306 63.5443 56.4061 62.7712 55.5005 62.7712C53.2053 62.7712 51.977 66.9632 51.977 68.7988"
+          fill="#191919"
+        />
+        <path
+          d="M62.0531 67.3997C61.9958 67.81 61.9542 68.215 61.9542 68.6253C61.9542 70.4977 62.5006 71.434 64.0724 71.434C65.1394 71.434 66.2063 70.7397 66.9766 69.7614L67.242 69.9823C66.1334 71.3866 64.9052 72.0599 63.4947 72.0599C61.9229 72.0599 60.2106 71.1815 60.2106 68.6621C60.2106 65.6482 62.6672 62.3872 65.7327 62.3872C67.4242 62.3872 68.2933 63.2235 68.2933 64.4227C68.2933 66.0112 66.3156 67.3945 62.0635 67.3945M62.1259 67.0894C66.0762 66.9684 66.7424 65.359 66.7424 63.9967C66.7424 63.1814 66.3 62.8132 65.6546 62.8132C64.1453 62.8132 62.6308 64.8277 62.1311 67.0894"
+          fill="#191919"
+        />
+        <path
+          d="M73.0608 62.9395L71.286 69.3354C71.1819 69.7193 71.1247 70.0665 71.1247 70.3347C71.1247 70.9448 71.4473 71.2499 72.1708 71.2499C72.6548 71.2499 73.3626 71.15 73.9664 70.9659V71.15C73.4407 71.4971 72.3113 72.0652 71.3276 72.0652C70.0161 72.0652 69.4332 71.4971 69.4332 70.4767C69.4332 70.1717 69.4956 69.8245 69.5945 69.4353L71.4682 62.9395H69.7142L69.8391 62.5713H71.5723L72.4414 59.5785L74.1745 59.3103L73.1649 62.5661H75.6214L75.5017 62.9343H73.066L73.0608 62.9395Z"
+          fill="#191919"
+        />
+        <path
+          d="M76.8601 67.3997C76.8028 67.81 76.7612 68.215 76.7612 68.6253C76.7612 70.4977 77.3077 71.434 78.8795 71.434C79.9464 71.434 81.0134 70.7397 81.7836 69.7614L82.0491 69.9823C80.9405 71.3866 79.7122 72.0599 78.3018 72.0599C76.73 72.0599 75.0177 71.1815 75.0177 68.6621C75.0177 65.6482 77.4742 62.3872 80.5397 62.3872C82.2312 62.3872 83.1004 63.2235 83.1004 64.4227C83.1004 66.0112 81.1226 67.3945 76.8705 67.3945M76.933 67.0894C80.8832 66.9684 81.5494 65.359 81.5494 63.9967C81.5494 63.1814 81.107 62.8132 80.4617 62.8132C78.9523 62.8132 77.4378 64.8277 76.9382 67.0894"
+          fill="#191919"
+        />
+        <path
+          d="M83.5115 74.3899C85.0417 73.6956 85.8484 72.8225 85.9681 71.9073L85.8484 71.8495C85.6871 71.9494 85.4841 72.0493 85.2603 72.0493C84.719 72.0493 84.2922 71.6022 84.2922 71.0079C84.2922 70.3399 84.7763 69.7666 85.4633 69.7666C86.3324 69.7666 86.8737 70.4188 86.8737 71.355C86.8737 72.8593 85.9473 74.0007 83.829 74.9159L83.5063 74.3847L83.5115 74.3899Z"
+          fill="#191919"
+        />
+        <path
+          d="M93.8739 58.6633H95.9921V60.7988H93.8739V58.6633ZM93.8739 61.5877H95.9921V72.2755H93.8739V61.5877Z"
+          fill="#191919"
+        />
+        <path
+          d="M100.989 64.0442H98.8703V72.2704H100.989V64.0442Z"
+          fill="#191919"
+        />
+        <path
+          d="M103.102 61.5878H102.003C101.577 61.5878 100.968 62.0559 100.775 62.4451V61.5878H98.8703V63.5076H102.04H102.571C102.847 63.5076 103.102 63.7653 103.102 64.0441V72.2756H105.22V63.7232C105.22 62.5451 104.267 61.5825 103.102 61.5825"
+          fill="#191919"
+        />
+        <path
+          d="M121.37 61.6089H119.257C118.164 61.6089 117.258 62.4557 117.154 63.534H120.844C121.12 63.534 121.375 63.7917 121.375 64.0704V69.8404C121.375 70.1191 121.12 70.3769 120.844 70.3769H119.787C119.512 70.3769 119.257 70.1244 119.257 69.8404V64.0704H117.138V70.1612C117.138 71.3341 118.091 72.2967 119.257 72.2967H121.37C122.53 72.2967 123.488 71.3341 123.488 70.1612V63.7496C123.488 62.5714 122.536 61.6089 121.37 61.6089Z"
+          fill="#191919"
+        />
+        <path
+          d="M138.914 61.5878H136.796C135.635 61.5878 134.683 62.5503 134.683 63.7285V64.7962H136.796V64.0493C136.796 63.7706 137.051 63.5128 137.327 63.5128H138.383C138.659 63.5128 138.914 63.7706 138.914 64.0493V69.8193C138.914 70.098 138.659 70.3558 138.383 70.3558H137.327C137.051 70.3558 136.796 70.1033 136.796 69.8193V68.3255C136.796 68.0467 137.051 67.789 137.327 67.789H138.383V66.0796H136.796C135.635 66.0796 134.683 67.0421 134.683 68.2203V70.1454C134.683 71.3183 135.635 72.2808 136.796 72.2808H137.899C138.321 72.2808 138.935 71.7917 139.128 71.4024V72.2808H141.033V63.7232C141.033 62.5451 140.08 61.5825 138.914 61.5825"
+          fill="#191919"
+        />
+        <path
+          d="M130.384 71.7234L133.096 61.5879H130.764L129.582 67.1001L129.494 67.6366L130.384 71.7234Z"
+          fill="#191919"
+        />
+        <path
+          d="M129.265 69.0672L127.594 61.5879H125.268L128.12 72.2757H129.962L129.265 69.0672Z"
+          fill="#191919"
+        />
+        <path
+          d="M110.175 64.0442H108.056V72.2704H110.175V64.0442Z"
+          fill="#191919"
+        />
+        <path
+          d="M112.288 61.5878H111.184C110.763 61.5878 110.149 62.0559 109.956 62.4451V61.5878H108.051V63.5076H111.221H111.752C112.027 63.5076 112.282 63.7653 112.282 64.0441V72.2756H114.396V63.7232C114.396 62.5451 113.443 61.5825 112.282 61.5825"
+          fill="#191919"
+        />
+      </g>
+    </g>
+    <defs>
+      <clipPath id="clip0_621_329">
+        <rect width="167.106" height="102" fill="white" />
+      </clipPath>
+      <clipPath id="clip1_621_329">
+        <rect
+          width="114.99"
+          height="18.8825"
+          fill="white"
+          transform="translate(26.0425 57.075)"
+        />
+      </clipPath>
+    </defs>
+  </svg>
+</template>

package/src/components/LauEcomIcon/LauEcomUpcIconVirtualClass.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+withDefaults(
+  defineProps<{
+    color?: string;
+    width?: string;
+    height?: string;
+  }>(),
+  {
+    color: "#000",
+    width: "24",
+    height: "24",
+  },
+);
+</script>
+
+<template>
+  <svg
+    :width="width"
+    :height="height"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M26 13.6519C26 12.9078 25.0416 12.5171 24.444 13.0177L21.6409 15.3658C21.2349 15.7058 21.2349 16.2942 21.6409 16.6342L24.444 18.9823C25.0416 19.4829 26 19.0922 26 18.3481V13.6519Z"
+      :stroke="color"
+      stroke-width="1.4"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M18.8992 10H7.9845C6.88849 10 6 10.7675 6 11.7143V20.2857C6 21.2325 6.88849 22 7.9845 22H18.8992C19.9952 22 20.8837 21.2325 20.8837 20.2857V11.7143C20.8837 10.7675 19.9952 10 18.8992 10Z"
+      :stroke="color"
+      stroke-width="1.4"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>

package/src/components/LauEcomInput/LauEcomInput.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed, ref } from "vue";
-import { UpcSize } from "../../enums";
+import { LauEcomSize } from "../../enums";
 import {
   LauEcomUpcIconExclamationTriangle,
   LauEcomUpcIconNavCheckmark,
@@ -13,7 +13,7 @@ interface Props {
   placeholder?: string;
   isDisabled?: boolean;
   label?: string;
-  size?: UpcSize;
+  size?: LauEcomSize;
   name?: string;
   modelValue?: string | number;
   inputContainerClass?: string;
@@ -29,7 +29,7 @@ const props = withDefaults(defineProps<Props>(), {
   placeholder: "Placeholder",
   isDisabled: false,
   label: "Text label",
-  size: UpcSize.md,
+  size: LauEcomSize.md,
   name: "input",
   modelValue: "",
   inputContainerClass: "",
@@ -73,7 +73,7 @@ const inputContainerClasses = computed(() => {
   return [
     "dsEcom-relative",
     props.inputContainerClass ? props.inputContainerClass : "dsEcom-w-[284px]",
-    props.size === UpcSize.md ? "dsEcom-h-[42px]" : "dsEcom-h-[46px]",
+    props.size === LauEcomSize.md ? "dsEcom-h-[42px]" : "dsEcom-h-[46px]",
   ];
 });
 
@@ -81,7 +81,7 @@ const inputClasses = computed(() => {
   return [
     "lau-ecom-input core-font-body-reg-04-16px",
     props.inputClass,
-    props.size === UpcSize.md ? "dsEcom-py-[9px]" : "dsEcom-py-[11px]",
+    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 },
@@ -94,7 +94,7 @@ const inputClasses = computed(() => {
 const successClasses = computed(() => {
   return [
     "lau-ecom-success",
-    props.size === UpcSize.md ? "dsEcom-top-[10px]" : "dsEcom-top-3",
+    props.size === LauEcomSize.md ? "dsEcom-top-[10px]" : "dsEcom-top-3",
   ];
 });
 </script>

package/src/components/LauEcomRadioButton/LauEcomRadioButton.vue

@@ -1,7 +1,9 @@
 <script lang="ts" setup>
-import { computed, ref } from "vue";
+import { computed, ref, watch } from "vue";
+import { LauEcomInstance } from "../../enums";
 
 interface Props {
+  instance?: LauEcomInstance;
   id?: string;
   label?: string;
   value?: string | number | boolean;
@@ -11,12 +13,13 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  instance: LauEcomInstance.Upc,
   id: "",
   label: "default",
   value: "",
   modelValue: "",
   isRequired: false,
-  isDisabled: true,
+  isDisabled: false,
 });
 
 const emit = defineEmits<{
@@ -26,14 +29,25 @@ const emit = defineEmits<{
 const lauEcomRadioButtonClasses = computed(() => {
   return {
     "lau-ecom-radio-button": true,
+    "lau-ecom-radio-button--upc": props.instance === LauEcomInstance.Upc,
+    "lau-ecom-radio-button--cbt": props.instance === LauEcomInstance.Cibertec,
     "lau-ecom-radio-button--disabled": props.isDisabled,
+    "lau-ecom-radio-button--required": props.isRequired,
   };
 });
 
 const radioGroupValue = ref(props.modelValue);
+
 const handleChange = () => {
   emit("update:modelValue", String(props.value));
 };
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    radioGroupValue.value = newValue;
+  },
+);
 </script>
 
 <template>
@@ -62,9 +76,7 @@ const handleChange = () => {
     dsEcom-rounded-full
     dsEcom-border-[1px]
     dsEcom-border-solid
-    dsEcom-border-upc-color-neutral-90
-    hover:dsEcom-border-upc-color-red-60-base
-    checked:dsEcom-border-upc-color-red-60-base 
+    dsEcom-border-upc-color-neutral-90 
     checked:before:dsEcom-opacity-[0.16] 
     checked:after:dsEcom-content-[''] 
     checked:after:dsEcom-absolute 
@@ -72,16 +84,32 @@ const handleChange = () => {
     checked:after:dsEcom-top-1/2 
     checked:after:dsEcom-h-3 
     checked:after:dsEcom-w-3 
-    checked:after:dsEcom-rounded-full 
-    checked:after:dsEcom-bg-upc-color-red-60-base 
+    checked:after:dsEcom-rounded-full  
     checked:after:[transform:translate(-50%,-50%)] 
-    checked:focus:dsEcom-border-upc-color-red-60-base 
     checked:focus:before:dsEcom-scale-100;
 }
 
+.lau-ecom-radio-button--upc {
+  @apply hover:dsEcom-border-upc-color-red-60-base
+    checked:dsEcom-border-upc-color-red-60-base
+    checked:after:dsEcom-bg-upc-color-red-60-base
+    checked:focus:dsEcom-border-upc-color-red-60-base;
+}
+
+.lau-ecom-radio-button--cbt {
+  @apply hover:dsEcom-border-cbt-color-apple-green-60-base
+    checked:dsEcom-border-cbt-color-apple-green-60-base
+    checked:after:dsEcom-bg-cbt-color-apple-green-60-base
+    checked:focus:dsEcom-border-cbt-color-apple-green-60-base;
+}
+
 .lau-ecom-radio-button--disabled {
   @apply !dsEcom-border-upc-color-neutral-50
   checked:after:dsEcom-bg-upc-color-neutral-50 
   disabled:dsEcom-cursor-not-allowed;
 }
+
+.lau-ecom-radio-button--required {
+  @apply dsEcom-border-upc-color-red-60-base;
+}
 </style>

package/src/components/LauEcomRtb/LauEcomRtb.vue

@@ -0,0 +1,92 @@
+<script lang="ts" setup>
+import { computed } from "vue";
+import { Colors } from "../../utils";
+import {
+  LauEcomUpcIconCertificate,
+  LauEcomUpcIconCreditCard,
+  LauEcomUpcIconVirtualClass,
+} from "../LauEcomIcon";
+import { RtbType } from "./types";
+
+interface Props {
+  type?: RtbType;
+  title?: string;
+  text?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: RtbType.cbt,
+  title: "Aprenderas Haciendo",
+  text: "Resolverás casos reales, a través de clases prácticas. Obtendrás conocimiento para aplicarla en tu trabajo o proyecto personal.",
+});
+
+const isModalidadType = computed(() => {
+  return props.type === RtbType.modalidad;
+});
+
+const isCertificacionType = computed(() => {
+  return props.type === RtbType.certificacion;
+});
+
+const isMetodopagoType = computed(() => {
+  return props.type === RtbType.metodopago;
+});
+
+const isCbtType = computed(() => {
+  return props.type === RtbType.cbt;
+});
+</script>
+
+<template>
+  <div
+    v-if="isModalidadType"
+    class="core-font-body-reg-05-14px dsEcom-flex dsEcom-items-center dsEcom-gap-2"
+  >
+    <LauEcomUpcIconVirtualClass
+      width="32"
+      height="32"
+      :color="Colors['upc-epg-color-purple-60-base']"
+    />
+    Virtual en vivo
+  </div>
+  <div
+    v-if="isCertificacionType"
+    class="core-font-body-reg-05-14px dsEcom-flex dsEcom-items-center dsEcom-gap-2"
+  >
+    <LauEcomUpcIconCertificate
+      width="32"
+      height="32"
+      :color="Colors['upc-epg-color-purple-60-base']"
+    />
+    Certificado de EPG | UPC
+  </div>
+  <div
+    v-if="isMetodopagoType"
+    class="core-font-body-reg-05-14px dsEcom-flex dsEcom-items-center dsEcom-gap-2"
+  >
+    <LauEcomUpcIconCreditCard
+      width="32"
+      height="32"
+      :color="Colors['upc-epg-color-purple-60-base']"
+    />
+    Hasta 12 cuotas sin intereses en TC Dinners y BBVA
+  </div>
+  <div v-if="isCbtType" class="lau-ecom-rtb-cbt">
+    <slot name="icon" :color="Colors['cbt-color-apple-green-60-base']"></slot>
+    <p class="dsEcom-text-cbt-astro-blue-20 cbt-font-heading-07-28px">
+      {{ title }}
+    </p>
+    <p class="cbt-font-body-reg-02-16px dsEcom-text-color-cbt-color-neutral-80">
+      {{ text }}
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.lau-ecom-rtb-cbt {
+  @apply dsEcom-w-[384px] 
+    dsEcom-h-[292px] 
+    dsEcom-rounded-[16px]
+    dsEcom-p-6;
+}
+</style>

package/src/components/LauEcomStepbar/LauEcomStepbar.vue

@@ -2,12 +2,15 @@
 // import { ref } from 'vue';
 import { Step } from "./types";
 import LauEcomStepbarItem from "./LauEcomStepbarItem.vue";
+import { LauEcomInstance } from "../../enums";
 
 interface Props {
+  instance?: LauEcomInstance;
   steps: Step[];
   currentStep: number;
 }
 withDefaults(defineProps<Props>(), {
+  instance: LauEcomInstance.Upc,
   steps: () => [
     {
       numberStep: 1,
@@ -35,6 +38,7 @@ withDefaults(defineProps<Props>(), {
     <LauEcomStepbarItem
       v-for="(step, index) in steps"
       :key="`lau-ecom-stepbar-item-${index + 1}`"
+      :instance="instance"
       :step="step"
       :is-completed="currentStep > index + 1"
       :is-current-step="currentStep === index + 1"