@energysage/es-ds-components 0.0.1 → 3.0.0-alpha.10

package/components/es-zip-code-form.vue

@@ -0,0 +1,204 @@
+<script setup lang="ts">
+const props = defineProps({
+    constrained: {
+        type: Boolean,
+        default: false,
+    },
+    dark: {
+        type: Boolean,
+        default: false,
+    },
+    fieldName: {
+        type: String,
+        default: 'zip_code',
+    },
+    inputId: {
+        type: String,
+        required: true,
+    },
+    newTab: {
+        type: Boolean,
+        default: false,
+    },
+    placeholder: {
+        type: String,
+        default: 'ZIP code',
+    },
+    showPrivacySection: {
+        type: Boolean,
+        default: true,
+    },
+    privacyPolicyLink: {
+        type: String,
+        default: '',
+    },
+    privacyPolicyNewTab: {
+        type: Boolean,
+        default: false,
+    },
+    stackUntil: {
+        type: String,
+        default: '',
+    },
+    url: {
+        type: String,
+        required: true,
+    },
+    zipCodeValue: {
+        type: String,
+        default: '',
+    },
+    selectedProduct: {
+        type: String,
+        default: '',
+    },
+});
+
+const state = reactive({
+    zipCode: props.zipCodeValue,
+});
+
+watch(
+    () => props.zipCodeValue,
+    (newVal) => {
+        state.zipCode = newVal;
+    },
+);
+
+const stackBreak = computed(() => {
+    let { stackUntil } = props;
+    if (stackUntil === 'xs') {
+        stackUntil = '';
+    }
+    return stackUntil ? `${stackUntil}-` : '';
+});
+
+/* Set up validation using Vuelidate */
+const rules = {
+    zipCode: {
+        [vuelidateKeys.MAX_LENGTH]: vuelidateMaxLength(5),
+        [vuelidateKeys.MIN_LENGTH]: vuelidateMinLength(5),
+        [vuelidateKeys.INTEGER]: vuelidateInteger,
+        [vuelidateKeys.REQUIRED]: vuelidateRequired,
+    },
+};
+
+const { v$, validateState } = useEsForms(rules, state);
+
+const ctaForm = useTemplateRef<HTMLFormElement>('ctaForm');
+
+const handleSubmit = () => {
+    if (v$.value.$invalid) {
+        v$.value.$touch();
+    } else {
+        ctaForm.value?.submit();
+    }
+};
+</script>
+
+<template>
+    <div
+        class="EsZipCodeForm d-flex"
+        :class="{
+            'EsZipCodeForm--constrained': constrained,
+            'text-white': dark,
+        }"
+        v-bind="$attrs">
+        <div class="d-flex flex-column">
+            <form
+                ref="ctaForm"
+                class="justify-content-center w-100"
+                :class="{
+                    [`d-${stackBreak}flex`]: stackUntil,
+                    'mb-100': showPrivacySection,
+                }"
+                :action="url"
+                method="get"
+                novalidate
+                :target="newTab ? '_blank' : '_self'"
+                @submit.prevent.stop="handleSubmit">
+                <es-form-input
+                    :id="inputId"
+                    v-model="state.zipCode"
+                    :state="validateState('zipCode')"
+                    autocomplete="postal-code"
+                    class="mb-100"
+                    :class="{
+                        [`mb-${stackBreak}0 mr-${stackBreak}50`]: stackUntil,
+                    }"
+                    inputmode="numeric"
+                    label-sr-only
+                    maxlength="5"
+                    :name="fieldName"
+                    pattern="\d*"
+                    :placeholder="placeholder"
+                    required>
+                    <template #prefixIcon>
+                        <icon-location class="text-gray-800" />
+                    </template>
+                    <template #label>
+                        {{ placeholder }}
+                    </template>
+                    <template #errorMessage>
+                        <span :class="{ 'text-white': dark }">
+                            <slot name="errorMessage"> Please enter a 5-digit zip code. </slot>
+                        </span>
+                    </template>
+                </es-form-input>
+                <input
+                    v-if="selectedProduct"
+                    type="hidden"
+                    name="product"
+                    :value="selectedProduct" />
+                <es-button
+                    class="text-nowrap w-100"
+                    :class="{
+                        [`ml-${stackBreak}50 w-${stackBreak}auto`]: stackUntil,
+                        'px-100': constrained,
+                    }"
+                    type="submit"
+                    :variant="dark ? 'dark-bg' : 'primary'">
+                    <slot name="buttonText"> Submit </slot>
+                </es-button>
+            </form>
+            <div
+                v-if="showPrivacySection"
+                class="d-flex text-left"
+                :class="{ 'font-size-75': constrained }">
+                <icon-lock-on
+                    aria-hidden="true"
+                    class="privacy-lock-icon flex-shrink-0 mr-50 position-relative"
+                    :class="{ 'mt-25': !constrained }"
+                    height="1.125rem"
+                    width="1.125rem" />
+                <div>
+                    <span>
+                        <slot name="privacyExplanation"> Your information is safe with us. </slot>
+                    </span>
+                    <nuxt-link
+                        v-if="privacyPolicyLink"
+                        :href="privacyPolicyLink"
+                        class="text-nowrap"
+                        :class="dark ? 'text-white' : ''"
+                        :target="privacyPolicyNewTab ? '_blank' : '_self'">
+                        <slot name="privacyPolicyLinkText"> Privacy Policy </slot>
+                    </nuxt-link>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.EsZipCodeForm {
+    .privacy-lock-icon {
+        top: -0.02em;
+    }
+
+    &--constrained {
+        .privacy-lock-icon {
+            top: 0.02em;
+        }
+    }
+}
+</style>

package/components/icon/arrow-clockwise.vue

@@ -0,0 +1,51 @@
+<script lang="ts">
+export default {
+    name: 'IconArrowClockwise',
+    props: {
+        /**
+         * Width
+         */
+        width: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+        /**
+         * Height
+         */
+        height: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+        orientation: {
+            type: String,
+            default: 'clockwise',
+            required: false,
+        },
+    },
+};
+</script>
+<template>
+    <svg
+        :class="{
+            'counter-clockwise': orientation === 'counter-clockwise',
+        }"
+        :style="{
+            height: height,
+            width: width,
+        }"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor">
+        <!-- eslint-disable-next-line max-len -->
+        <path
+            d="M3.246 7.123c.997-1.81 2.591-3.418 4.485-4.222 1.894-.905 4.087-1.106 6.08-.704 2.193.403 3.788 1.408 5.183 3.016.2.201.4.503.598.704l.4-2.513c.099-.603.597-.905 1.195-.905.499.1.897.704.798 1.206l-.897 5.127c0 .301-.2.502-.4.603-.198.1-.398.201-.597.201h-.2l-4.983-.905a1.042 1.042 0 0 1-.798-1.206c.1-.503.598-.905 1.197-.804l2.79.603c-.1-.302-.299-.503-.598-.804-1.096-1.307-2.492-2.111-4.086-2.413-1.595-.402-3.39-.2-4.884.503A7.896 7.896 0 0 0 4.94 8.028c-.797 1.507-1.096 3.216-.897 4.925.2 1.709.897 3.317 2.093 4.524 1.097 1.206 2.692 2.11 4.286 2.311 1.595.302 3.39 0 4.785-.703a8.444 8.444 0 0 0 3.488-3.518c.2-.503.798-.704 1.296-.503.498.201.698.804.498 1.307-.797 2.11-2.292 3.619-4.186 4.624-1.395.703-2.89 1.005-4.485 1.005-.598 0-1.096 0-1.695-.1-2.093-.403-3.987-1.408-5.382-2.916a10.256 10.256 0 0 1-2.691-5.629c-.2-2.211.2-4.322 1.196-6.232Z" />
+    </svg>
+</template>
+
+<style lang="scss" scoped>
+.counter-clockwise {
+    transform: scale(-1, 1);
+}
+</style>

package/components/icon/arrow-counter-clockwise.vue

@@ -0,0 +1,37 @@
+<script lang="ts">
+export default {
+    name: 'ArrowCounterClockwiseIcon',
+    props: {
+        /**
+         * Width
+         */
+        width: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+        /**
+         * Height
+         */
+        height: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+    },
+};
+</script>
+<template>
+    <svg
+        :style="{
+            height: height,
+            width: width,
+        }"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor">
+        <!-- eslint-disable-next-line max-len -->
+        <path
+            d="M20.754 7.123c-.997-1.81-2.591-3.418-4.485-4.222-1.894-.905-4.087-1.106-6.08-.704C7.996 2.6 6.4 3.605 5.006 5.213c-.2.201-.4.503-.598.704l-.4-2.513c-.099-.603-.597-.905-1.195-.905-.499.1-.897.704-.798 1.206l.897 5.127c0 .301.2.502.4.603.198.1.398.201.597.201h.2l4.983-.905c.499-.1.897-.603.798-1.206a1.034 1.034 0 0 0-1.196-.804l-2.791.603c.1-.302.299-.503.598-.804 1.096-1.307 2.492-2.111 4.086-2.413 1.595-.402 3.39-.2 4.884.503a7.896 7.896 0 0 1 3.589 3.418c.797 1.507 1.096 3.216.897 4.925-.2 1.709-.897 3.317-2.094 4.524-1.096 1.206-2.69 2.11-4.285 2.311-1.595.302-3.39 0-4.785-.703a8.444 8.444 0 0 1-3.488-3.518c-.2-.503-.798-.704-1.296-.503-.499.201-.698.804-.499 1.307.798 2.11 2.293 3.619 4.187 4.624 1.395.703 2.89 1.005 4.485 1.005.598 0 1.096 0 1.695-.1 2.093-.403 3.986-1.408 5.382-2.916a10.257 10.257 0 0 0 2.691-5.629c.2-2.211-.2-4.322-1.196-6.232Z" />
+    </svg>
+</template>

package/components/icon/arrow-cycle.vue

@@ -0,0 +1,43 @@
+<!-- eslint-disable max-len -->
+<script lang="ts">
+export default {
+    name: 'IconArrowCycle',
+    props: {
+        /**
+         * Width
+         */
+        width: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+        /**
+         * Height
+         */
+        height: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+    },
+};
+</script>
+<template>
+    <svg
+        :style="{
+            height: height,
+            width: width,
+        }"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor">
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M11.806 3C6.929 3 3 6.565 3 12a1 1 0 1 1-2 0C1 5.435 5.85 1 11.806 1c4.759 0 8.742 2.543 10.141 6.68a1 1 0 0 1-1.894.64C18.973 5.127 15.853 3 11.806 3ZM22 11a1 1 0 0 1 1 1c0 6.565-4.85 11-10.806 11-4.758 0-8.742-2.543-10.141-6.68a1 1 0 0 1 1.894-.64c1.08 3.193 4.2 5.32 8.247 5.32C17.071 21 21 17.435 21 12a1 1 0 0 1 1-1Z" />
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M22.242 3.03a1 1 0 0 1 .728 1.213l-1 4a1 1 0 0 1-1.212.727l-4-1a1 1 0 1 1 .485-1.94l3.03.757.757-3.03a1 1 0 0 1 1.212-.727ZM2.03 15.758a1 1 0 0 1 1.213-.728l4 1a1 1 0 1 1-.486 1.94l-3.03-.757-.757 3.03a1 1 0 1 1-1.94-.485l1-4Z" />
+    </svg>
+</template>

package/components/icon/arrow-left.vue

@@ -0,0 +1,39 @@
+<!-- eslint-disable max-len -->
+<script lang="ts">
+export default {
+    name: 'ArrowLeftIcon',
+    props: {
+        /**
+         * Width
+         */
+        width: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+        /**
+         * Height
+         */
+        height: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+    },
+};
+</script>
+<template>
+    <svg
+        :style="{
+            height: height,
+            width: width,
+        }"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor">
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M11.707 4.293a1 1 0 0 1 0 1.414L6.414 11H20a1 1 0 1 1 0 2H6.414l5.293 5.293a1 1 0 0 1-1.414 1.414l-7-7a1 1 0 0 1 0-1.414l7-7a1 1 0 0 1 1.414 0Z" />
+    </svg>
+</template>

package/components/icon/arrow-right.vue

@@ -0,0 +1,39 @@
+<!-- eslint-disable max-len -->
+<script lang="ts">
+export default {
+    name: 'ArrowRightIcon',
+    props: {
+        /**
+         * Width
+         */
+        width: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+        /**
+         * Height
+         */
+        height: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+    },
+};
+</script>
+<template>
+    <svg
+        :style="{
+            height: height,
+            width: width,
+        }"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor">
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M12.293 4.293a1 1 0 0 1 1.414 0l7 7a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414-1.414L17.586 13H4a1 1 0 1 1 0-2h13.586l-5.293-5.293a1 1 0 0 1 0-1.414Z" />
+    </svg>
+</template>

package/components/icon/arrow-up.vue

@@ -0,0 +1,39 @@
+<!-- eslint-disable max-len -->
+<script lang="ts">
+export default {
+    name: 'ArrowUpIcon',
+    props: {
+        /**
+         * Width
+         */
+        width: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+        /**
+         * Height
+         */
+        height: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+    },
+};
+</script>
+<template>
+    <svg
+        :style="{
+            height: height,
+            width: width,
+        }"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor">
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M11.293 3.293a1 1 0 0 1 1.414 0l7 7a1 1 0 0 1-1.414 1.414L13 6.414V20a1 1 0 1 1-2 0V6.414l-5.293 5.293a1 1 0 0 1-1.414-1.414l7-7Z" />
+    </svg>
+</template>

package/components/icon/arrow.vue

@@ -0,0 +1,68 @@
+<!-- eslint-disable max-len -->
+<script lang="ts">
+export default {
+    name: 'IconArrow',
+    props: {
+        /**
+         * Width
+         */
+        width: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+        /**
+         * Height
+         */
+        height: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+        orientation: {
+            type: String,
+            default: 'top',
+            required: false,
+        },
+    },
+    computed: {
+        classFromOrientation() {
+            return `orientation-${this.orientation}`;
+        },
+    },
+};
+</script>
+<template>
+    <svg
+        :style="{
+            height: height,
+            width: width,
+        }"
+        :class="classFromOrientation"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor">
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M12 3a1 1 0 0 1 1 1v13.586l5.293-5.293a1 1 0 0 1 1.414 1.414l-7 7a1 1 0 0 1-1.414 0l-7-7a1 1 0 1 1 1.414-1.414L11 17.586V4a1 1 0 0 1 1-1Z" />
+    </svg>
+</template>
+
+<style lang="scss" scoped>
+.orientation-down {
+    transform: rotate(0deg);
+}
+
+.orientation-left {
+    transform: rotate(90deg);
+}
+
+.orientation-top {
+    transform: rotate(180deg);
+}
+
+.orientation-right {
+    transform: rotate(270deg);
+}
+</style>

package/components/icon/bank.vue

@@ -0,0 +1,38 @@
+<!-- eslint-disable max-len -->
+<script lang="ts">
+export default {
+    name: 'IconBank',
+    props: {
+        /**
+         * Width
+         */
+        width: {
+            type: String,
+            default: '32px',
+            required: false,
+        },
+        /**
+         * Height
+         */
+        height: {
+            type: String,
+            default: '32px',
+            required: false,
+        },
+    },
+};
+</script>
+<template>
+    <svg
+        :style="{
+            height: height,
+            width: width,
+        }"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 57 55"
+        fill="currentColor">
+        <path
+            d="M55.2 48.5H53v-3.7c0-.5-.4-.8-.9-.8h-3.5V21.3H54a.8.8 0 0 0 .5-1.6l-26-18.6a.9.9 0 0 0-1 0L1.7 19.7c-.3.3-.4.6-.3 1 0 .3.4.6.8.6h5.2V44H3.9c-.4 0-.8.3-.8.8v3.7H.8c-.4 0-.8.4-.8.8v4.5c0 .5.4.9.8.9h54.4c.5 0 .8-.4.8-.9v-4.5c0-.4-.3-.8-.8-.8ZM46.9 44h-4.5V21.3H47V44ZM32 44V21.3h8.7V44H32Zm-16.6 0V21.3H24V44h-8.6Zm10.3-22.7h4.6V44h-4.6V21.3ZM28 2.8l23.2 16.8H4.8L28 2.8ZM9 21.3h4.7V44H9V21.3ZM4.9 45.7h46.5v2.8H4.8v-2.8ZM54.3 53H1.7v-2.8h52.6V53Z"
+            fill-rule="evenodd" />
+    </svg>
+</template>

package/components/icon/battery.vue

@@ -0,0 +1,40 @@
+<!-- eslint-disable max-len -->
+<script lang="ts">
+export default {
+    name: 'IconBattery',
+    props: {
+        /**
+         * Width
+         */
+        width: {
+            type: String,
+            default: '32px',
+            required: false,
+        },
+        /**
+         * Height
+         */
+        height: {
+            type: String,
+            default: '32px',
+            required: false,
+        },
+    },
+};
+</script>
+
+<template>
+    <svg
+        :style="{
+            height: height,
+            width: width,
+        }"
+        viewBox="0 0 32 32"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M22.647 3.735h-2.295V1.499A.498.498 0 0 0 19.853 1h-7.706a.498.498 0 0 0-.499.499v2.236H9.36A2.358 2.358 0 0 0 7 6.088V27.81a2.357 2.357 0 0 0 2.353 2.354h13.294A2.357 2.357 0 0 0 25 27.809V6.09a2.357 2.357 0 0 0-2.353-2.354ZM12.646 1.998h6.714v1.737h-6.714V1.998Zm11.356 25.811c0 .752-.61 1.362-1.355 1.362H9.353c-.75 0-1.355-.61-1.355-1.362V6.09c0-.752.61-1.356 1.355-1.356h13.294c.75 0 1.355.61 1.355 1.355V27.81Z" />
+        <path
+            d="M21.291 20.978H10.716a.498.498 0 0 0-.5.499v3.386c0 .276.224.499.5.499H21.29a.498.498 0 0 0 .5-.499v-3.386a.498.498 0 0 0-.5-.5Zm-.498 3.386h-9.584v-2.389h9.584v2.39ZM21.291 14.757H10.716a.498.498 0 0 0-.5.499v3.386c0 .276.224.499.5.499H21.29a.498.498 0 0 0 .5-.499v-3.386a.498.498 0 0 0-.5-.5Zm-.498 3.386h-9.584v-2.388h9.584v2.388ZM21.291 8.541H10.716a.498.498 0 0 0-.5.5v3.386c0 .276.224.499.5.499H21.29a.498.498 0 0 0 .5-.5V9.04a.498.498 0 0 0-.5-.498Zm-.498 3.387h-9.584V9.539h9.584v2.389Z" />
+    </svg>
+</template>

package/components/icon/bell.vue

@@ -0,0 +1,42 @@
+<!-- eslint-disable max-len -->
+<script lang="ts">
+export default {
+    name: 'IconBell',
+    props: {
+        /**
+         * Width
+         */
+        width: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+        /**
+         * Height
+         */
+        height: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+    },
+};
+</script>
+<template>
+    <svg
+        :style="{
+            height: height,
+            width: width,
+        }"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor">
+        <path
+            d="M15 4v.375c2.818.934 4.978 3.525 5.015 6.614v3.8c0 .724.098 1.259.368 1.671l.286.437c.857 1.305-.045 3.103-1.654 3.103h-3.142a3.999 3.999 0 0 1-7.746 0H4.985c-1.606 0-2.513-1.796-1.654-3.103h.001l.286-.438c.27-.411.367-.944.367-1.669v-3.797C4.007 7.897 6.17 5.284 9 4.359V4a3 3 0 1 1 6 0Z"
+            fill="none" />
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M12 3a1 1 0 0 0-1 1h2a1 1 0 0 0-1-1Zm3 1.375V4a3 3 0 0 0-6 0v.359c-2.83.925-4.993 3.538-5.015 6.634v3.797c0 .725-.097 1.258-.367 1.67l-.286.436v.001C2.471 18.204 3.378 20 4.984 20h3.142a4 4 0 0 0 7.746 0h3.142c1.61 0 2.511-1.798 1.654-3.103l-.286-.437c-.27-.412-.368-.947-.368-1.671v-3.8c-.037-3.09-2.197-5.68-5.015-6.614ZM11.223 6h.038l1.458.003c2.84.007 5.26 2.305 5.296 5.004v3.782c0 .856.104 1.865.695 2.767l.287.438A.15.15 0 0 1 19 18H5l.003-.004v-.002l.287-.438c.592-.902.695-1.911.695-2.766v-3.786C6.006 8.313 8.404 6.01 11.223 6Zm2.51 14h-3.465A1.997 1.997 0 0 0 12 21a2 2 0 0 0 1.732-1Z" />
+    </svg>
+</template>

package/components/icon/block.vue

@@ -0,0 +1,46 @@
+<!-- eslint-disable max-len -->
+<script lang="ts">
+export default {
+    name: 'IconBlock',
+    props: {
+        /**
+         * Width
+         */
+        width: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+        /**
+         * Height
+         */
+        height: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+    },
+};
+</script>
+<template>
+    <svg
+        :style="{
+            height: height,
+            width: width,
+        }"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor">
+        <path
+            d="M23 12c0 6.075-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1s11 4.925 11 11Z"
+            fill="none" />
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18ZM1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12Z" />
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="m19.707 5.707-14 14-1.414-1.414 14-14 1.414 1.414Z" />
+    </svg>
+</template>