@energysage/es-ds-components 5.1.0 → 5.2.0

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>

package/app/components/icon/circle-alert.vue

@@ -1,46 +1,16 @@
-<!-- eslint-disable max-len -->
-<script lang="ts">
-export default {
-    name: 'IconCircleAlert',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhWarningCircle } 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="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="M12 6a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0V7a1 1 0 0 1 1-1Zm0 9.5a1 1 0 0 1 1 1v.5a1 1 0 1 1-2 0v-.5a1 1 0 0 1 1-1Z" />
-    </svg>
+    <ph-warning-circle :size="width" />
 </template>

package/app/components/icon/circle-check.vue

@@ -1,46 +1,16 @@
-<!-- eslint-disable max-len -->
-<script lang="ts">
-export default {
-    name: 'IconCircleCheck',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhCheckCircle } 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="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="M16.64 8.732a1 1 0 0 1 .128 1.408l-5 6a1 1 0 0 1-1.475.067l-3-3a1 1 0 1 1 1.414-1.414l2.226 2.226 4.299-5.16a1 1 0 0 1 1.408-.127Z" />
-        <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" />
-    </svg>
+    <ph-check-circle :size="width" />
 </template>

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

@@ -1,47 +1,16 @@
-<!-- eslint-disable max-len -->
+<script setup lang="ts">
+import { PhCaretCircleDown } from '@phosphor-icons/vue';
 
-<script lang="ts">
-export default {
-    name: 'IconCircleChevronDown',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+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="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="M7.293 9.793a1 1 0 0 1 1.414 0L12 13.086l3.293-3.293a1 1 0 1 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 0-1.414Z" />
-    </svg>
+    <ph-caret-circle-down :size="width" />
 </template>