lau-ecom-design-system 1.0.17 → 1.0.19

package/src/components/LauEcomDropdown/LauEcomDropdown.vue

@@ -1,203 +1,203 @@
-<script lang="ts" setup>
-import { computed, ref } from "vue";
-import {
-  LauEcomUpcIconArrowDown,
-  LauEcomUpcIconExclamationTriangle,
-} from "../LauEcomIcon";
-import { DropdownItem } from "./types";
-import { Colors } from "../../utils";
-
-interface Props {
-  id?: string;
-  label?: string;
-  isDisabled?: boolean;
-  placeholder?: string;
-  dropdownItems: DropdownItem[];
-  errorMessage?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  id: "label",
-  label: "Dropdown label",
-  isDisabled: false,
-  placeholder: "Placeholder",
-  errorMessage: "",
-});
-
-const isOpen = ref(false);
-const selectedItem = ref<DropdownItem | null>(null);
-
-const handleDropdownOpen = () => {
-  if (props.isDisabled) return;
-  isOpen.value = !isOpen.value;
-};
-
-const selectDropdownItem = (index: number) => {
-  selectedItem.value = props.dropdownItems[index];
-  isOpen.value = false;
-};
-
-const lauEcomLabelClasses = computed(() => {
-  return {
-    "lau-ecom-label core-font-body-bold-06-12px": true,
-    "lau-ecom-label--disabled": props.isDisabled,
-  };
-});
-
-const lauEcomDropdownClasses = computed(() => {
-  return {
-    "lau-ecom-dropdown core-font-body-reg-04-16px": true,
-    "lau-ecom-dropdown--open": isOpen.value,
-    "lau-ecom-dropdown--disabled": props.isDisabled,
-    "lau-ecom-dropdown--error": props.errorMessage,
-  };
-});
-
-const lauEcomIconClasses = computed(() => {
-  return {
-    "lau-ecom-icon": true,
-    "lau-ecom-icon--open": isOpen.value,
-    "lau-ecom-icon--disabled": props.isDisabled,
-  };
-});
-
-const iconArrowDownColor = computed(() => {
-  if (props.isDisabled) return Colors["upc-color-neutral-70"];
-  if (props.errorMessage) return Colors["upc-color-red-60-base"];
-  return Colors["upc-color-neutral-100"];
-});
-</script>
-
-<template>
-  <div>
-    <label :class="lauEcomLabelClasses" :for="id">{{ label }}</label>
-    <div class="dsEcom-relative">
-      <div class="dsEcom-relative">
-        <input
-          :id="id"
-          :name="id"
-          :disabled="isDisabled"
-          :placeholder="placeholder"
-          :value="selectedItem?.name"
-          readonly
-          :class="lauEcomDropdownClasses"
-          @click="handleDropdownOpen"
-        />
-        <span :class="lauEcomIconClasses">
-          <LauEcomUpcIconArrowDown :color="iconArrowDownColor" />
-        </span>
-      </div>
-      <ul
-        v-if="dropdownItems.length > 0"
-        v-show="isOpen"
-        class="lau-ecom-dropdown-list core-font-body-reg-04-16px"
-      >
-        <li
-          v-for="(dropdownItem, index) in dropdownItems"
-          :key="`dropdown-item-${index + 1}`"
-          class="lau-ecom-dropdown-list-item"
-          @click="selectDropdownItem(index)"
-        >
-          <span>{{ dropdownItem.name }}</span>
-        </li>
-      </ul>
-    </div>
-    <div
-      v-if="errorMessage"
-      class="lau-ecom-dropdown__error core-font-body-reg-06-12px"
-    >
-      <span>
-        <LauEcomUpcIconExclamationTriangle
-          width="16"
-          height="16"
-          :color="Colors['upc-color-red-60-base']"
-        />
-      </span>
-      <p class="dsEcom-ml-1">
-        {{ errorMessage }}
-      </p>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.lau-ecom-label {
-  @apply dsEcom-text-upc-color-neutral-100;
-}
-
-.lau-ecom-label--disabled {
-  @apply dsEcom-text-upc-color-neutral-70;
-}
-
-.lau-ecom-dropdown {
-  @apply dsEcom-w-full
-    dsEcom-h-auto
-    dsEcom-cursor-pointer
-    dsEcom-bg-upc-color-neutral-10
-    dsEcom-px-3
-    dsEcom-py-[11px]
-    dsEcom-rounded-[2px]
-    dsEcom-border
-    dsEcom-border-upc-color-neutral-80
-    hover:dsEcom-border-upc-epg-color-purple-80
-    focus:dsEcom-border-upc-epg-color-purple-60-base
-    focus:dsEcom-outline-none;
-}
-
-.lau-ecom-dropdown--disabled {
-  @apply !dsEcom-border-upc-color-neutral-70
-    !dsEcom-bg-upc-color-neutral-20;
-}
-
-.lau-ecom-dropdown--error {
-  @apply !dsEcom-border-upc-color-red-60-base;
-}
-
-.lau-ecom-dropdown--open {
-  @apply dsEcom-border-upc-epg-color-purple-60-base;
-}
-
-.lau-ecom-icon {
-  @apply dsEcom-absolute
-    dsEcom-right-4
-    dsEcom-top-3
-    dsEcom-transition-all
-    dsEcom-duration-300
-    dsEcom-cursor-pointer;
-}
-
-.lau-ecom-icon--open {
-  @apply dsEcom-rotate-180;
-}
-
-.lau-ecom-icon--disabled {
-  @apply dsEcom-cursor-default;
-}
-
-.lau-ecom-dropdown-list {
-  @apply dsEcom-absolute
-    dsEcom-top-full
-    dsEcom-left-0
-    dsEcom-w-full
-    dsEcom-z-20
-    dsEcom-py-1
-    dsEcom-shadow-upc-shadow-subtle
-    dsEcom-bg-upc-color-neutral-10;
-}
-
-.lau-ecom-dropdown-list-item {
-  @apply dsEcom-py-2
-    dsEcom-px-3
-    dsEcom-cursor-pointer
-    hover:dsEcom-bg-upc-color-neutral-30
-    active:dsEcom-bg-upc-color-neutral-40
-    focus:dsEcom-bg-upc-color-neutral-40;
-}
-
-.lau-ecom-dropdown__error {
-  @apply dsEcom-flex
-    dsEcom-items-center
-    dsEcom-mt-[2px]
-    dsEcom-text-upc-color-red-60-base;
-}
-</style>
+<script lang="ts" setup>
+import { computed, ref } from "vue";
+import {
+  LauEcomUpcIconArrowDown,
+  LauEcomUpcIconExclamationTriangle,
+} from "../LauEcomIcon";
+import { DropdownItem } from "./types";
+import { Colors } from "../../utils";
+
+interface Props {
+  id?: string;
+  label?: string;
+  isDisabled?: boolean;
+  placeholder?: string;
+  dropdownItems: DropdownItem[];
+  errorMessage?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  id: "label",
+  label: "Dropdown label",
+  isDisabled: false,
+  placeholder: "Placeholder",
+  errorMessage: "",
+});
+
+const isOpen = ref(false);
+const selectedItem = ref<DropdownItem | null>(null);
+
+const handleDropdownOpen = () => {
+  if (props.isDisabled) return;
+  isOpen.value = !isOpen.value;
+};
+
+const selectDropdownItem = (index: number) => {
+  selectedItem.value = props.dropdownItems[index];
+  isOpen.value = false;
+};
+
+const lauEcomLabelClasses = computed(() => {
+  return {
+    "lau-ecom-label core-font-body-bold-06-12px": true,
+    "lau-ecom-label--disabled": props.isDisabled,
+  };
+});
+
+const lauEcomDropdownClasses = computed(() => {
+  return {
+    "lau-ecom-dropdown core-font-body-reg-04-16px": true,
+    "lau-ecom-dropdown--open": isOpen.value,
+    "lau-ecom-dropdown--disabled": props.isDisabled,
+    "lau-ecom-dropdown--error": props.errorMessage,
+  };
+});
+
+const lauEcomIconClasses = computed(() => {
+  return {
+    "lau-ecom-icon": true,
+    "lau-ecom-icon--open": isOpen.value,
+    "lau-ecom-icon--disabled": props.isDisabled,
+  };
+});
+
+const iconArrowDownColor = computed(() => {
+  if (props.isDisabled) return Colors["upc-color-neutral-70"];
+  if (props.errorMessage) return Colors["upc-color-red-60-base"];
+  return Colors["upc-color-neutral-100"];
+});
+</script>
+
+<template>
+  <div>
+    <label :class="lauEcomLabelClasses" :for="id">{{ label }}</label>
+    <div class="dsEcom-relative">
+      <div class="dsEcom-relative">
+        <input
+          :id="id"
+          :name="id"
+          :disabled="isDisabled"
+          :placeholder="placeholder"
+          :value="selectedItem?.name"
+          readonly
+          :class="lauEcomDropdownClasses"
+          @click="handleDropdownOpen"
+        />
+        <span :class="lauEcomIconClasses">
+          <LauEcomUpcIconArrowDown :color="iconArrowDownColor" />
+        </span>
+      </div>
+      <ul
+        v-if="dropdownItems.length > 0"
+        v-show="isOpen"
+        class="lau-ecom-dropdown-list core-font-body-reg-04-16px"
+      >
+        <li
+          v-for="(dropdownItem, index) in dropdownItems"
+          :key="`dropdown-item-${index + 1}`"
+          class="lau-ecom-dropdown-list-item"
+          @click="selectDropdownItem(index)"
+        >
+          <span>{{ dropdownItem.name }}</span>
+        </li>
+      </ul>
+    </div>
+    <div
+      v-if="errorMessage"
+      class="lau-ecom-dropdown__error core-font-body-reg-06-12px"
+    >
+      <span>
+        <LauEcomUpcIconExclamationTriangle
+          width="16"
+          height="16"
+          :color="Colors['upc-color-red-60-base']"
+        />
+      </span>
+      <p class="dsEcom-ml-1">
+        {{ errorMessage }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.lau-ecom-label {
+  @apply dsEcom-text-neutral-100;
+}
+
+.lau-ecom-label--disabled {
+  @apply dsEcom-text-neutral-70;
+}
+
+.lau-ecom-dropdown {
+  @apply dsEcom-w-full
+    dsEcom-h-auto
+    dsEcom-cursor-pointer
+    dsEcom-bg-neutral-10
+    dsEcom-px-3
+    dsEcom-py-[11px]
+    dsEcom-rounded-[2px]
+    dsEcom-border
+    dsEcom-border-neutral-80
+    hover:dsEcom-border-stroke-secondary-60
+    focus:dsEcom-border-stroke-secondary-60
+    focus:dsEcom-outline-none;
+}
+
+.lau-ecom-dropdown--disabled {
+  @apply !dsEcom-border-neutral-70
+    !dsEcom-bg-neutral-20;
+}
+
+.lau-ecom-dropdown--error {
+  @apply !dsEcom-border-feedback-error-60;
+}
+
+.lau-ecom-dropdown--open {
+  @apply dsEcom-border-stroke-secondary-60;
+}
+
+.lau-ecom-icon {
+  @apply dsEcom-absolute
+    dsEcom-right-4
+    dsEcom-top-3
+    dsEcom-transition-all
+    dsEcom-duration-300
+    dsEcom-cursor-pointer;
+}
+
+.lau-ecom-icon--open {
+  @apply dsEcom-rotate-180;
+}
+
+.lau-ecom-icon--disabled {
+  @apply dsEcom-cursor-default;
+}
+
+.lau-ecom-dropdown-list {
+  @apply dsEcom-absolute
+    dsEcom-top-full
+    dsEcom-left-0
+    dsEcom-w-full
+    dsEcom-z-20
+    dsEcom-py-1
+    dsEcom-shadow-upc-shadow-subtle
+    dsEcom-bg-neutral-10;
+}
+
+.lau-ecom-dropdown-list-item {
+  @apply dsEcom-py-2
+    dsEcom-px-3
+    dsEcom-cursor-pointer
+    hover:dsEcom-bg-neutral-30
+    active:dsEcom-bg-neutral-40
+    focus:dsEcom-bg-neutral-40;
+}
+
+.lau-ecom-dropdown__error {
+  @apply dsEcom-flex
+    dsEcom-items-center
+    dsEcom-mt-[2px]
+    dsEcom-text-primary-60;
+}
+</style>

package/src/components/LauEcomIcon/LauEcomCoreIconBook.vue

@@ -1,29 +1,26 @@
-<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 56 56"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M48.2456 12.9563C44.9473 11.4584 41.4388 10.6268 37.8824 10.5C34.4988 10.6121 31.157 11.3696 28 12.7401C24.8429 11.3698 21.5011 10.6123 18.1176 10.5C14.5612 10.6266 11.0527 11.4582 7.75435 12.9563C7.53054 13.0617 7.3395 13.239 7.20527 13.4659C7.07104 13.6928 6.99962 13.9592 7 14.2316V44.1138C7 44.4815 7.13015 44.834 7.36181 45.094C7.59347 45.354 7.90768 45.5 8.2353 45.5H47.7647C48.0923 45.5 48.4065 45.354 48.6382 45.094C48.8699 44.834 49 44.4815 49 44.1138V14.2316C49 13.9593 48.9284 13.6931 48.7942 13.4663C48.66 13.2395 48.4692 13.0621 48.2456 12.9563ZM46.5294 15.1853V40.1475C43.7441 39.0706 40.8275 38.4815 37.8824 38.4009C34.9372 38.4811 32.0206 39.0702 29.2353 40.1475V15.1853C32.0062 14.026 34.9267 13.38 37.8824 13.2724C40.838 13.3804 43.7584 14.0265 46.5294 15.1853ZM45.6021 42.724H30.1609C32.6512 41.7777 35.2541 41.2575 37.8824 41.1807C40.5105 41.2612 43.1129 41.7852 45.6021 42.735M9.47059 15.1853C12.2415 14.026 15.162 13.38 18.1176 13.2724C21.0733 13.3804 23.9937 14.0265 26.7647 15.1853V40.1475C23.979 39.0731 21.0625 38.4865 18.1176 38.4083C15.1724 38.4885 12.2559 39.0776 9.47059 40.1549V15.1853ZM25.8374 42.724H10.3962C12.8865 41.7777 15.4894 41.2575 18.1176 41.1807C20.7458 41.2612 23.3482 41.7852 25.8374 42.735"
-      :fill="color"
-    />
-  </svg>
-</template>
+<script lang="ts" setup>
+withDefaults(
+  defineProps<{
+    width?: string;
+    height?: string;
+  }>(),
+  {
+    width: "24",
+    height: "24",
+  },
+);
+</script>
+
+<template>
+  <svg
+    :width="width"
+    :height="height"
+    viewBox="0 0 56 56"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M48.2456 12.9563C44.9473 11.4584 41.4388 10.6268 37.8824 10.5C34.4988 10.6121 31.157 11.3696 28 12.7401C24.8429 11.3698 21.5011 10.6123 18.1176 10.5C14.5612 10.6266 11.0527 11.4582 7.75435 12.9563C7.53054 13.0617 7.3395 13.239 7.20527 13.4659C7.07104 13.6928 6.99962 13.9592 7 14.2316V44.1138C7 44.4815 7.13015 44.834 7.36181 45.094C7.59347 45.354 7.90768 45.5 8.2353 45.5H47.7647C48.0923 45.5 48.4065 45.354 48.6382 45.094C48.8699 44.834 49 44.4815 49 44.1138V14.2316C49 13.9593 48.9284 13.6931 48.7942 13.4663C48.66 13.2395 48.4692 13.0621 48.2456 12.9563ZM46.5294 15.1853V40.1475C43.7441 39.0706 40.8275 38.4815 37.8824 38.4009C34.9372 38.4811 32.0206 39.0702 29.2353 40.1475V15.1853C32.0062 14.026 34.9267 13.38 37.8824 13.2724C40.838 13.3804 43.7584 14.0265 46.5294 15.1853ZM45.6021 42.724H30.1609C32.6512 41.7777 35.2541 41.2575 37.8824 41.1807C40.5105 41.2612 43.1129 41.7852 45.6021 42.735M9.47059 15.1853C12.2415 14.026 15.162 13.38 18.1176 13.2724C21.0733 13.3804 23.9937 14.0265 26.7647 15.1853V40.1475C23.979 39.0731 21.0625 38.4865 18.1176 38.4083C15.1724 38.4885 12.2559 39.0776 9.47059 40.1549V15.1853ZM25.8374 42.724H10.3962C12.8865 41.7777 15.4894 41.2575 18.1176 41.1807C20.7458 41.2612 23.3482 41.7852 25.8374 42.735"
+    />
+  </svg>
+</template>

package/src/components/LauEcomIcon/LauEcomCoreIconFileCode.vue

@@ -1,31 +1,28 @@
-<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
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M21.4647 9.30812C21.4809 9.35355 21.4904 9.40108 21.4929 9.44924C21.4929 9.45276 21.4947 9.45806 21.4965 9.46335C21.4982 9.46864 21.5 9.47393 21.5 9.47746V19.0596C21.5002 19.3145 21.4501 19.5669 21.3526 19.8024C21.2551 20.0379 21.1121 20.2519 20.9319 20.4321C20.7516 20.6123 20.5375 20.7552 20.3019 20.8527C20.0663 20.9501 19.8138 21.0002 19.5588 21H5.44118C5.18621 21.0002 4.9337 20.9501 4.6981 20.8527C4.4625 20.7552 4.24844 20.6123 4.06814 20.4321C3.88785 20.2519 3.74487 20.0379 3.64739 19.8024C3.5499 19.5669 3.49982 19.3145 3.5 19.0596V4.94747C3.50055 4.43236 3.70502 3.9384 4.06874 3.5735C4.43246 3.2086 4.92587 3.00242 5.44118 3H15.0129C15.02 3 15.0253 3.00176 15.0306 3.00353C15.0359 3.00529 15.0412 3.00706 15.0482 3.00706C15.0965 3.00894 15.1441 3.01847 15.1894 3.03528C15.1965 3.03881 15.2053 3.04234 15.2141 3.04586C15.2229 3.04939 15.2318 3.05292 15.2388 3.05645C15.2958 3.08341 15.3482 3.11912 15.3941 3.16229L21.3376 9.10349C21.3816 9.1488 21.4174 9.20131 21.4435 9.25872C21.4526 9.26777 21.4558 9.27972 21.4589 9.29085C21.4605 9.29708 21.4622 9.30305 21.4647 9.30812ZM17.1729 8.94826H19.6929L15.5565 4.81341V7.33242C15.5583 7.76039 15.7292 8.17031 16.032 8.47294C16.3347 8.77556 16.7448 8.9464 17.1729 8.94826ZM20.1827 19.6833C20.3482 19.5178 20.4412 19.2935 20.4412 19.0596V10.0067H17.1729C16.4636 10.0059 15.7836 9.72393 15.282 9.22257C14.7805 8.72121 14.4984 8.04144 14.4976 7.33242V4.06546H5.44118C5.20716 4.06546 4.98273 4.15839 4.81726 4.3238C4.65179 4.48921 4.55882 4.71355 4.55882 4.94747V19.0596C4.55882 19.2935 4.65179 19.5178 4.81726 19.6833C4.98273 19.8487 5.20716 19.9416 5.44118 19.9416H19.5588C19.7928 19.9416 20.0173 19.8487 20.1827 19.6833ZM10.8694 12.1728C10.7698 12.0744 10.6354 12.0192 10.4953 12.0192C10.3552 12.0192 10.2208 12.0744 10.1212 12.1728L7.80589 14.4872C7.70743 14.5868 7.65221 14.7212 7.65221 14.8612C7.65221 15.0012 7.70743 15.1356 7.80589 15.2352L10.1212 17.5496C10.1702 17.5988 10.2285 17.6379 10.2927 17.6645C10.3569 17.6912 10.4258 17.7049 10.4953 17.7049C10.5648 17.7049 10.6337 17.6912 10.6979 17.6645C10.7621 17.6379 10.8204 17.5988 10.8694 17.5496C10.9679 17.45 11.0231 17.3156 11.0231 17.1756C11.0231 17.0356 10.9679 16.9012 10.8694 16.8016L8.92824 14.8612L10.8694 12.9208C10.9196 12.8723 10.9596 12.8142 10.9868 12.7499C11.0141 12.6857 11.0282 12.6166 11.0282 12.5468C11.0282 12.477 11.0141 12.4079 10.9868 12.3437C10.9596 12.2794 10.9196 12.2213 10.8694 12.1728ZM14.1306 12.1728C14.0321 12.2724 13.9769 12.4068 13.9769 12.5468C13.9769 12.6868 14.0321 12.8212 14.1306 12.9208L16.0718 14.8612L14.1306 16.8016C14.0321 16.9012 13.9769 17.0356 13.9769 17.1756C13.9769 17.3156 14.0321 17.45 14.1306 17.5496C14.1796 17.5988 14.2379 17.6379 14.3021 17.6645C14.3663 17.6912 14.4352 17.7049 14.5047 17.7049C14.5742 17.7049 14.6431 17.6912 14.7073 17.6645C14.7715 17.6379 14.8298 17.5988 14.8788 17.5496L17.1941 15.2352C17.2926 15.1356 17.3478 15.0012 17.3478 14.8612C17.3478 14.7212 17.2926 14.5868 17.1941 14.4872L14.8788 12.1728C14.7792 12.0744 14.6448 12.0192 14.5047 12.0192C14.3646 12.0192 14.2302 12.0744 14.1306 12.1728Z"
-      :fill="color"
-    />
-  </svg>
-</template>
+<script lang="ts" setup>
+withDefaults(
+  defineProps<{
+    width?: string;
+    height?: string;
+  }>(),
+  {
+    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
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M21.4647 9.30812C21.4809 9.35355 21.4904 9.40108 21.4929 9.44924C21.4929 9.45276 21.4947 9.45806 21.4965 9.46335C21.4982 9.46864 21.5 9.47393 21.5 9.47746V19.0596C21.5002 19.3145 21.4501 19.5669 21.3526 19.8024C21.2551 20.0379 21.1121 20.2519 20.9319 20.4321C20.7516 20.6123 20.5375 20.7552 20.3019 20.8527C20.0663 20.9501 19.8138 21.0002 19.5588 21H5.44118C5.18621 21.0002 4.9337 20.9501 4.6981 20.8527C4.4625 20.7552 4.24844 20.6123 4.06814 20.4321C3.88785 20.2519 3.74487 20.0379 3.64739 19.8024C3.5499 19.5669 3.49982 19.3145 3.5 19.0596V4.94747C3.50055 4.43236 3.70502 3.9384 4.06874 3.5735C4.43246 3.2086 4.92587 3.00242 5.44118 3H15.0129C15.02 3 15.0253 3.00176 15.0306 3.00353C15.0359 3.00529 15.0412 3.00706 15.0482 3.00706C15.0965 3.00894 15.1441 3.01847 15.1894 3.03528C15.1965 3.03881 15.2053 3.04234 15.2141 3.04586C15.2229 3.04939 15.2318 3.05292 15.2388 3.05645C15.2958 3.08341 15.3482 3.11912 15.3941 3.16229L21.3376 9.10349C21.3816 9.1488 21.4174 9.20131 21.4435 9.25872C21.4526 9.26777 21.4558 9.27972 21.4589 9.29085C21.4605 9.29708 21.4622 9.30305 21.4647 9.30812ZM17.1729 8.94826H19.6929L15.5565 4.81341V7.33242C15.5583 7.76039 15.7292 8.17031 16.032 8.47294C16.3347 8.77556 16.7448 8.9464 17.1729 8.94826ZM20.1827 19.6833C20.3482 19.5178 20.4412 19.2935 20.4412 19.0596V10.0067H17.1729C16.4636 10.0059 15.7836 9.72393 15.282 9.22257C14.7805 8.72121 14.4984 8.04144 14.4976 7.33242V4.06546H5.44118C5.20716 4.06546 4.98273 4.15839 4.81726 4.3238C4.65179 4.48921 4.55882 4.71355 4.55882 4.94747V19.0596C4.55882 19.2935 4.65179 19.5178 4.81726 19.6833C4.98273 19.8487 5.20716 19.9416 5.44118 19.9416H19.5588C19.7928 19.9416 20.0173 19.8487 20.1827 19.6833ZM10.8694 12.1728C10.7698 12.0744 10.6354 12.0192 10.4953 12.0192C10.3552 12.0192 10.2208 12.0744 10.1212 12.1728L7.80589 14.4872C7.70743 14.5868 7.65221 14.7212 7.65221 14.8612C7.65221 15.0012 7.70743 15.1356 7.80589 15.2352L10.1212 17.5496C10.1702 17.5988 10.2285 17.6379 10.2927 17.6645C10.3569 17.6912 10.4258 17.7049 10.4953 17.7049C10.5648 17.7049 10.6337 17.6912 10.6979 17.6645C10.7621 17.6379 10.8204 17.5988 10.8694 17.5496C10.9679 17.45 11.0231 17.3156 11.0231 17.1756C11.0231 17.0356 10.9679 16.9012 10.8694 16.8016L8.92824 14.8612L10.8694 12.9208C10.9196 12.8723 10.9596 12.8142 10.9868 12.7499C11.0141 12.6857 11.0282 12.6166 11.0282 12.5468C11.0282 12.477 11.0141 12.4079 10.9868 12.3437C10.9596 12.2794 10.9196 12.2213 10.8694 12.1728ZM14.1306 12.1728C14.0321 12.2724 13.9769 12.4068 13.9769 12.5468C13.9769 12.6868 14.0321 12.8212 14.1306 12.9208L16.0718 14.8612L14.1306 16.8016C14.0321 16.9012 13.9769 17.0356 13.9769 17.1756C13.9769 17.3156 14.0321 17.45 14.1306 17.5496C14.1796 17.5988 14.2379 17.6379 14.3021 17.6645C14.3663 17.6912 14.4352 17.7049 14.5047 17.7049C14.5742 17.7049 14.6431 17.6912 14.7073 17.6645C14.7715 17.6379 14.8298 17.5988 14.8788 17.5496L17.1941 15.2352C17.2926 15.1356 17.3478 15.0012 17.3478 14.8612C17.3478 14.7212 17.2926 14.5868 17.1941 14.4872L14.8788 12.1728C14.7792 12.0744 14.6448 12.0192 14.5047 12.0192C14.3646 12.0192 14.2302 12.0744 14.1306 12.1728Z"
+    />
+  </svg>
+</template>

package/src/components/LauEcomIcon/LauEcomUpcIconCertificate.vue

@@ -1,31 +1,28 @@
-<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>
+<script lang="ts" setup>
+withDefaults(
+  defineProps<{
+    width?: string;
+    height?: string;
+  }>(),
+  {
+    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"
+    />
+  </svg>
+</template>