@energysage/es-ds-components 5.0.2 → 5.2.0

package/app/components/icon/bolt.vue

@@ -1,38 +1,16 @@
-<!-- eslint-disable max-len -->
-<script lang="ts">
-export default {
-    name: 'IconBolt',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhLightning } from '@phosphor-icons/vue';
+
+interface Props {
+    height?: string;
+    width?: string;
+}
+withDefaults(defineProps<Props>(), {
+    height: '24px',
+    width: '24px',
+});
 </script>
 
 <template>
-    <svg
-        :style="{
-            height: height,
-            width: width,
-        }"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="currentColor">
-        <path
-            d="M16.986 11.967a.852.852 0 0 0-.739-.425h-2.793l.475-8.695a.845.845 0 0 0-.654-.874.854.854 0 0 0-.976.492L6.967 14.998a.836.836 0 0 0 .076.798.845.845 0 0 0 .705.382h2.3l-.789 6.835a.845.845 0 0 0 .84.943.844.844 0 0 0 .74-.425l6.147-10.715a.844.844 0 0 0 0-.85Zm-5.57 7.14.425-3.684a.86.86 0 0 0-.213-.663.854.854 0 0 0-.637-.28H9.03l2.946-6.912-.254 4.772a.828.828 0 0 0 .229.629c.161.17.382.263.62.263h2.216l-3.363 5.867-.008.009Z" />
-    </svg>
+    <ph-lightning :size="width" />
 </template>

package/app/components/icon/calculator.vue

@@ -1,37 +1,16 @@
-<!-- eslint-disable max-len -->
-<script lang="ts">
-export default {
-    name: 'IconCalculator',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhCalculator } from '@phosphor-icons/vue';
+
+interface Props {
+    height?: string;
+    width?: string;
+}
+withDefaults(defineProps<Props>(), {
+    height: '24px',
+    width: '24px',
+});
 </script>
+
 <template>
-    <svg
-        :style="{
-            height: height,
-            width: width,
-        }"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="currentColor">
-        <path
-            d="M20.1792 2H3.82079C3.36936 2 3 2.33733 3 2.74963V21.2504c0 .4123.36936.7496.82079.7496H20.1792c.4514 0 .8208-.3373.8208-.7496V2.74963C21 2.33733 20.6306 2 20.1792 2Zm-.8208 18.5007H4.64159V3.49925H19.3584V20.5007ZM5.80711 11.8201c0-.4123.36936-.7496.8208-.7496h1.92065c.45144 0 .8208.3373.8208.7496 0 .4123-.36936.7496-.8208.7496H6.62791c-.45144 0-.8208-.3373-.8208-.7496Zm7.97809 0c0 .4123-.3693.7496-.8208.7496h-1.9206c-.4515 0-.8208-.3373-.8208-.7496 0-.4123.3693-.7496.8208-.7496h1.9206c.4515 0 .8208.3373.8208.7496Zm4.4159 0c0 .4123-.3694.7496-.8208.7496h-1.9207c-.4514 0-.8207-.3373-.8207-.7496 0-.4123.3693-.7496.8207-.7496h1.9207c.4514 0 .8208.3373.8208.7496ZM5.80711 15.1484c0-.4123.36936-.7496.8208-.7496h1.92065c.45144 0 .8208.3373.8208.7496 0 .4123-.36936.7497-.8208.7497H6.62791c-.45144 0-.8208-.3374-.8208-.7497Zm7.97809 0c0 .4123-.3693.7497-.8208.7497h-1.9206c-.4515 0-.8208-.3374-.8208-.7497 0-.4123.3693-.7496.8208-.7496h1.9206c.4515 0 .8208.3373.8208.7496Zm4.4159 0c0 .4123-.3694.7497-.8208.7497h-1.9207c-.4514 0-.8207-.3374-.8207-.7497 0-.4123.3693-.7496.8207-.7496h1.9207c.4514 0 .8208.3373.8208.7496ZM5.80711 18.4768c0-.4123.36936-.7497.8208-.7497h1.92065c.45144 0 .8208.3374.8208.7497 0 .4123-.36936.7496-.8208.7496H6.62791c-.45144 0-.8208-.3373-.8208-.7496Zm7.97809 0c0 .4123-.3693.7496-.8208.7496h-1.9206c-.4515 0-.8208-.3373-.8208-.7496 0-.4123.3693-.7497.8208-.7497h1.9206c.4515 0 .8208.3374.8208.7497Zm4.4159 0c0 .4123-.3694.7496-.8208.7496h-1.9207c-.4514 0-.8207-.3373-.8207-.7496 0-.4123.3693-.7497.8207-.7497h1.9207c.4514 0 .8208.3374.8208.7497ZM7.01368 9.06897H17.1341c.5827 0 1.067-.42729 1.067-.95203v-2.3913c0-.52474-.4761-.95203-1.067-.95203H7.01368c-.58276 0-1.06703.42729-1.06703.95203v2.3913c0 .52474.47606.95203 1.06703.95203Zm.57456-2.79611h8.96306v1.29686H7.59644V6.27286h-.0082Z" />
-    </svg>
+    <ph-calculator :size="width" />
 </template>

package/app/components/icon/calendar.vue

@@ -1,46 +1,16 @@
-<!-- eslint-disable max-len -->
-<script lang="ts">
-export default {
-    name: 'IconCalendar',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhCalendarDots } from '@phosphor-icons/vue';
+
+interface Props {
+    height?: string;
+    width?: string;
+}
+withDefaults(defineProps<Props>(), {
+    height: '24px',
+    width: '24px',
+});
 </script>
+
 <template>
-    <svg
-        :style="{
-            height: height,
-            width: width,
-        }"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="currentColor">
-        <path
-            d="M6 3a5 5 0 0 0-5 5v10a5 5 0 0 0 5 5h12a5 5 0 0 0 5-5V8a5 5 0 0 0-5-5H6Z"
-            fill="none" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M6 5a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V8a3 3 0 0 0-3-3H6ZM1 8a5 5 0 0 1 5-5h12a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H6a5 5 0 0 1-5-5V8Z" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M8 1a1 1 0 0 1 1 1v4a1 1 0 0 1-2 0V2a1 1 0 0 1 1-1Zm8 0a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0V2a1 1 0 0 1 1-1ZM1 10a1 1 0 0 1 1-1h20a1 1 0 1 1 0 2H2a1 1 0 0 1-1-1Z" />
-    </svg>
+    <ph-calendar-dots :size="width" />
 </template>

package/app/components/icon/cart.vue

@@ -1,46 +1,16 @@
-<!-- eslint-disable max-len -->
-<script lang="ts">
-export default {
-    name: 'IconCart',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhShoppingCartSimple } from '@phosphor-icons/vue';
+
+interface Props {
+    height?: string;
+    width?: string;
+}
+withDefaults(defineProps<Props>(), {
+    height: '24px',
+    width: '24px',
+});
 </script>
+
 <template>
-    <svg
-        :style="{
-            height: height,
-            width: width,
-        }"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="currentColor">
-        <path
-            d="M4.227 6.366A1 1 0 0 1 5 6h13.79a3 3 0 0 1 2.985 3.299l-.6 6A3 3 0 0 1 18.19 18H8.64a3.001 3.001 0 0 1-2.943-2.412L4.02 7.196a1 1 0 0 1 .208-.83Z"
-            fill="none" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M4.227 6.366A1 1 0 0 1 5 6h13.79a3 3 0 0 1 2.985 3.299l-.6 6A3 3 0 0 1 18.19 18H8.64a3.001 3.001 0 0 1-2.943-2.412L4.02 7.196a1 1 0 0 1 .208-.83ZM6.22 8l1.439 7.196a1 1 0 0 0 .98.804h9.551a1 1 0 0 0 .995-.9l.6-6A1 1 0 0 0 18.79 8H6.22Z" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M1 3a1 1 0 0 1 1-1h1.22a2 2 0 0 1 1.94 1.514l.81 3.244a1 1 0 0 1-1.94.484L3.22 4H2a1 1 0 0 1-1-1Zm6 18a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2H8a1 1 0 0 1-1-1Zm8 0a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1Z" />
-    </svg>
+    <ph-shopping-cart-simple :size="width" />
 </template>

package/app/components/icon/chat-bubble.vue

@@ -1,40 +1,16 @@
-<!-- eslint-disable max-len -->
-<script lang="ts">
-export default {
-    name: 'IconChatBubble',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhChat } from '@phosphor-icons/vue';
+
+interface Props {
+    height?: string;
+    width?: string;
+}
+withDefaults(defineProps<Props>(), {
+    height: '24px',
+    width: '24px',
+});
 </script>
+
 <template>
-    <svg
-        :style="{
-            height: height,
-            width: width,
-        }"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="currentColor">
-        <path
-            d="M13.905 2.044c3.557 0 5.508 0 6.842 1.344 1.325 1.363 1.325 3.338 1.325 6.914 0 3.575-.11 5.66-1.325 6.886-1.216 1.225-4.075 1.344-7.405 1.344-.41 0-.816.091-1.189.265L7.126 21.98a.902.902 0 0 1-.48.137.848.848 0 0 1-.436-.12.91.91 0 0 1-.472-.795v-2.88a4.089 4.089 0 0 1-2.296-1.134c-1.334-1.335-1.334-3.31-1.334-6.886s.009-5.597 1.334-6.914c1.325-1.317 3.321-1.317 6.833-1.344h3.63Z"
-            fill="none" />
-        <path
-            d="M21.493 2.445C20.075 1 17.879 1 13.976 1H9.984C6.1 1 3.924 1 2.457 2.445.99 3.891 1 6.1 1 10.033s0 6.092 1.457 7.557a4.542 4.542 0 0 0 2.536 1.245v3.161a1.008 1.008 0 0 0 .519.873c.144.088.31.133.479.13.187.002.37-.05.529-.15l5.57-3.492a3.1 3.1 0 0 1 1.297-.291c3.674 0 6.818-.13 8.146-1.476C22.86 16.245 23 13.957 23 10.033c0-3.924-.04-6.092-1.507-7.588Zm-1.418 13.73c-.858.863-4.83.873-6.737.883a4.97 4.97 0 0 0-2.216.522l-.1.05-3.993 2.55v-2.218a1.01 1.01 0 0 0-.256-.677.996.996 0 0 0-.642-.327 3.353 3.353 0 0 1-2.216-.783c-.879-.883-.879-2.64-.879-6.142 0-3.503 0-5.26.879-6.143.878-.883 2.625-.883 6.109-.883h3.992c3.484 0 5.23 0 6.11.883.878.884.878 2.64.878 6.143 0 3.503-.04 5.259-.929 6.142Z" />
-    </svg>
+    <ph-chat :size="width" />
 </template>

package/app/components/icon/chat-dots.vue

@@ -1,42 +1,16 @@
-<!-- eslint-disable max-len -->
-<script lang="ts">
-export default {
-    name: 'IconChatDots',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhChatDots } from '@phosphor-icons/vue';
+
+interface Props {
+    height?: string;
+    width?: string;
+}
+withDefaults(defineProps<Props>(), {
+    height: '24px',
+    width: '24px',
+});
 </script>
+
 <template>
-    <svg
-        :style="{
-            height: height,
-            width: width,
-        }"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="currentColor">
-        <path
-            d="M13.905 2.044c3.557 0 5.508 0 6.842 1.344 1.325 1.363 1.325 3.338 1.325 6.914 0 3.575-.11 5.66-1.325 6.886-1.216 1.225-4.075 1.344-7.405 1.344-.41 0-.816.091-1.189.265L7.126 21.98a.902.902 0 0 1-.48.137.848.848 0 0 1-.436-.12.91.91 0 0 1-.472-.795v-2.88a4.089 4.089 0 0 1-2.296-1.134c-1.334-1.335-1.334-3.31-1.334-6.886s.009-5.597 1.334-6.914c1.325-1.317 3.321-1.317 6.833-1.344h3.63Z"
-            fill="none" />
-        <path
-            d="M21.493 2.445C20.075 1 17.879 1 13.976 1H9.984C6.1 1 3.924 1 2.457 2.445.99 3.891 1 6.1 1 10.033s0 6.092 1.457 7.557a4.542 4.542 0 0 0 2.536 1.245v3.161a1.008 1.008 0 0 0 .519.873c.144.088.31.133.479.13.187.002.37-.05.529-.15l5.57-3.492a3.1 3.1 0 0 1 1.297-.291c3.674 0 6.818-.13 8.146-1.476C22.86 16.245 23 13.957 23 10.033c0-3.924-.04-6.092-1.507-7.588Zm-1.418 13.73c-.858.863-4.83.873-6.737.883a4.97 4.97 0 0 0-2.216.522l-.1.05-3.993 2.55v-2.218a1.01 1.01 0 0 0-.256-.677.996.996 0 0 0-.642-.327 3.353 3.353 0 0 1-2.216-.783c-.879-.883-.879-2.64-.879-6.142 0-3.503 0-5.26.879-6.143.878-.883 2.625-.883 6.109-.883h3.992c3.484 0 5.23 0 6.11.883.878.884.878 2.64.878 6.143 0 3.503-.04 5.259-.929 6.142Z" />
-        <path
-            d="M8 9a1 1 0 0 1 1 1v.01a1 1 0 1 1-2 0V10a1 1 0 0 1 1-1Zm4 0a1 1 0 0 1 1 1v.01a1 1 0 1 1-2 0V10a1 1 0 0 1 1-1Zm4 0a1 1 0 0 1 1 1v.01a1 1 0 1 1-2 0V10a1 1 0 0 1 1-1Z" />
-    </svg>
+    <ph-chat-dots :size="width" />
 </template>

package/app/components/icon/check.vue

@@ -1,39 +1,16 @@
-<!-- eslint-disable max-len -->
-<script lang="ts">
-export default {
-    name: 'IconCheck',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhCheck } from '@phosphor-icons/vue';
+
+interface Props {
+    height?: string;
+    width?: string;
+}
+withDefaults(defineProps<Props>(), {
+    height: '24px',
+    width: '24px',
+});
 </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="M20.64 5.232a1 1 0 0 1 .128 1.408l-10 12a1 1 0 0 1-1.475.067l-6-6a1 1 0 1 1 1.414-1.414l5.226 5.226 9.299-11.16a1 1 0 0 1 1.408-.127Z" />
-    </svg>
+    <ph-check :size="width" />
 </template>

package/app/components/icon/chevron-down.vue

@@ -1,39 +1,16 @@
-<!-- eslint-disable max-len -->
-<script lang="ts">
-export default {
-    name: 'IconChevronDown',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhCaretDown } from '@phosphor-icons/vue';
+
+interface Props {
+    height?: string;
+    width?: string;
+}
+withDefaults(defineProps<Props>(), {
+    height: '24px',
+    width: '24px',
+});
 </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="M3.293 8.293a1 1 0 0 1 1.414 0L12 15.586l7.293-7.293a1 1 0 1 1 1.414 1.414l-8 8a1 1 0 0 1-1.414 0l-8-8a1 1 0 0 1 0-1.414Z" />
-    </svg>
+    <ph-caret-down :size="width" />
 </template>

package/app/components/icon/chevron-horizontal.vue

@@ -1,39 +1,16 @@
-<!-- eslint-disable max-len -->
-<script lang="ts">
-export default {
-    name: 'IconChevronHorizontal',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhCodeSimple } from '@phosphor-icons/vue';
+
+interface Props {
+    height?: string;
+    width?: string;
+}
+withDefaults(defineProps<Props>(), {
+    height: '24px',
+    width: '24px',
+});
 </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="M7.707 7.293a1 1 0 0 1 0 1.414L4.414 12l3.293 3.293a1 1 0 1 1-1.414 1.414l-4-4a1 1 0 0 1 0-1.414l4-4a1 1 0 0 1 1.414 0Zm8.586 0a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L19.586 12l-3.293-3.293a1 1 0 0 1 0-1.414Z" />
-    </svg>
+    <ph-code-simple :size="width" />
 </template>

package/app/components/icon/chevron-left.vue

@@ -1,39 +1,16 @@
-<!-- eslint-disable max-len -->
-<script lang="ts">
-export default {
-    name: 'IconChevronLeft',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhCaretLeft } from '@phosphor-icons/vue';
+
+interface Props {
+    height?: string;
+    width?: string;
+}
+withDefaults(defineProps<Props>(), {
+    height: '24px',
+    width: '24px',
+});
 </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="M15.707 3.293a1 1 0 0 1 0 1.414L8.414 12l7.293 7.293a1 1 0 0 1-1.414 1.414l-8-8a1 1 0 0 1 0-1.414l8-8a1 1 0 0 1 1.414 0Z" />
-    </svg>
+    <ph-caret-left :size="width" />
 </template>

package/app/components/icon/chevron-right.vue

@@ -1,39 +1,16 @@
-<!-- eslint-disable max-len -->
-<script lang="ts">
-export default {
-    name: 'IconChevronRight',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhCaretRight } from '@phosphor-icons/vue';
+
+interface Props {
+    height?: string;
+    width?: string;
+}
+withDefaults(defineProps<Props>(), {
+    height: '24px',
+    width: '24px',
+});
 </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="M7.293 3.293a1 1 0 0 1 1.414 0l8 8a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414-1.414L14.586 12 7.293 4.707a1 1 0 0 1 0-1.414Z" />
-    </svg>
+    <ph-caret-right :size="width" />
 </template>

package/app/components/icon/chevron-up.vue

@@ -1,39 +1,16 @@
-<!-- eslint-disable max-len -->
-<script lang="ts">
-export default {
-    name: 'IconChevronUp',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhCaretUp } from '@phosphor-icons/vue';
+
+interface Props {
+    height?: string;
+    width?: string;
+}
+withDefaults(defineProps<Props>(), {
+    height: '24px',
+    width: '24px',
+});
 </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 6.293a1 1 0 0 1 1.414 0l8 8a1 1 0 0 1-1.414 1.414L12 8.414l-7.293 7.293a1 1 0 0 1-1.414-1.414l8-8Z" />
-    </svg>
+    <ph-caret-up :size="width" />
 </template>