@energysage/es-ds-components 5.1.0 → 5.3.0

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

@@ -1,46 +1,16 @@
-<!-- eslint-disable max-len -->
-<script lang="ts">
-export default {
-    name: 'IconCircleChevronRight',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhCaretCircleRight } 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="M9.793 7.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L13.086 12 9.793 8.707a1 1 0 0 1 0-1.414Z" />
-    </svg>
+    <ph-caret-circle-right :size="width" />
 </template>

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

@@ -1,46 +1,16 @@
-<!-- eslint-disable max-len -->
-<script lang="ts">
-export default {
-    name: 'IconCircleChevronUp',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhCaretCircleUp } 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="M11.293 8.793a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1-1.414 1.414L12 10.914l-3.293 3.293a1 1 0 0 1-1.414-1.414l4-4Z" />
-    </svg>
+    <ph-caret-circle-up :size="width" />
 </template>

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

@@ -1,46 +1,16 @@
-<!-- eslint-disable max-len -->
-<script lang="ts">
-export default {
-    name: 'IconCircleMinus',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhMinusCircle } 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="M7 12a1 1 0 0 1 1-1h8a1 1 0 1 1 0 2H8a1 1 0 0 1-1-1Z" />
-        <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-minus-circle :size="width" />
 </template>

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

@@ -1,46 +1,16 @@
-<!-- eslint-disable max-len -->
-<script lang="ts">
-export default {
-    name: 'IconCirclePlus',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhPlusCircle } 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 7a1 1 0 0 1 1 1v3h3a1 1 0 1 1 0 2h-3v3a1 1 0 1 1-2 0v-3H8a1 1 0 1 1 0-2h3V8a1 1 0 0 1 1-1Z" />
-        <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-plus-circle :size="width" />
 </template>

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

@@ -1,46 +1,16 @@
-<!-- eslint-disable max-len -->
-<script lang="ts">
-export default {
-    name: 'IconCircleX',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhXCircle } 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="M8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z" />
-        <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-x-circle :size="width" />
 </template>

package/app/components/icon/circle.vue

@@ -1,42 +1,16 @@
-<!-- eslint-disable max-len -->
-<script lang="ts">
-export default {
-    name: 'IconCircle',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhCircle } 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" />
-    </svg>
+    <ph-circle :size="width" />
 </template>

package/app/components/icon/clock.vue

@@ -1,46 +1,16 @@
-<!-- eslint-disable max-len -->
-<script lang="ts">
-export default {
-    name: 'IconClock',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhClock } 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="M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12Z"
-            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 5a1 1 0 0 1 1 1v6.172a1 1 0 0 0 .293.707l2.414 2.414a1 1 0 0 1-1.414 1.414l-2.414-2.414a3 3 0 0 1-.879-2.12V6a1 1 0 0 1 1-1Z" />
-    </svg>
+    <ph-clock :size="width" />
 </template>

package/app/components/icon/copy.vue

@@ -1,45 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconCopy',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhCopySimple } 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="M7.879 1.879A3 3 0 0 1 10 1h4.685a3 3 0 0 1 2.097.855l3.315 3.242A3 3 0 0 1 21 7.242V16a3 3 0 0 1-3 3h-1v1a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V9a3 3 0 0 1 3-3h1V4a3 3 0 0 1 .879-2.121Z"
-            fill="none" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M7.879 1.879A3 3 0 0 1 10 1h4.685a3 3 0 0 1 2.097.855l3.315 3.242A3 3 0 0 1 21 7.242V16a3 3 0 0 1-3 3h-8a3 3 0 0 1-3-3V4a3 3 0 0 1 .879-2.121ZM10 3a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V7.242a1.001 1.001 0 0 0-.301-.715l-3.315-3.242A1 1 0 0 0 14.685 3H10Z" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M6 8a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-2a1 1 0 1 1 2 0v2a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V9a3 3 0 0 1 3-3h2a1 1 0 0 1 0 2H6Z" />
-    </svg>
+    <ph-copy-simple :size="width" />
 </template>

package/app/components/icon/envelope.vue

@@ -1,45 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconEnvelope',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhEnvelope } 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="M1.879 3.879A3 3 0 0 1 4 3h16a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V6a3 3 0 0 1 .879-2.121Z"
-            fill="none" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M4 5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H4ZM1.879 3.879A3 3 0 0 1 4 3h16a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V6a3 3 0 0 1 .879-2.121Z" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="m8.876 14.782-7.5-6.001 1.249-1.562 7.5 6.001a3 3 0 0 0 3.75 0l7.5-6 1.25 1.56-7.501 6.002a5 5 0 0 1-6.248 0Z" />
-    </svg>
+    <ph-envelope :size="width" />
 </template>

package/app/components/icon/eye.vue

@@ -1,41 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconEye',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhEye } 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="M11.992 4c4.502 0 8.202 4 10.103 6.4.7 1 .7 2.3 0 3.2-1.9 2.4-5.601 6.4-10.102 6.4C7.49 20 3.79 16.1 1.99 13.6c-.4-.4-.6-1-.6-1.6 0-.6.2-1.2.6-1.7C3.79 8 7.491 4 11.992 4Z"
-            fill="none" />
-        <path
-            d="M22.095 10.4C20.195 8 16.494 4 11.993 4 7.49 4 3.79 8 1.99 10.3c-.4.5-.6 1.1-.6 1.7 0 .6.2 1.2.6 1.6 1.8 2.5 5.501 6.4 10.002 6.4 4.502 0 8.202-4 10.103-6.4.7-.9.7-2.2 0-3.2Zm-1.6 2.1c-1.3 1.6-4.702 5.5-8.503 5.5-3.8 0-7.201-3.9-8.501-5.6-.1-.1-.1-.3-.1-.4 0-.1.1-.3.1-.4C4.79 9.9 8.19 6 11.993 6c3.8 0 7.201 3.9 8.501 5.6.2.3.2.6 0 .9Z" />
-        <path
-            d="M11.992 8c-2.2 0-4 1.8-4 4s1.8 4 4 4c2.201 0 4.001-1.8 4.001-4s-1.8-4-4-4Zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2Z" />
-    </svg>
+    <ph-eye :size="width" />
 </template>

package/app/components/icon/flag.vue

@@ -1,37 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconFlag',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhFlag } 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="M15.6369 8.87295L18.7994 5.19737C19.0191 4.94421 19.0669 4.5879 18.9236 4.27848C18.7803 3.97843 18.4745 3.78153 18.1306 3.78153H5.91083V2.93765C5.91083 2.42194 5.48089 2 4.95541 2C4.42994 2 4 2.42194 4 2.93765V21.0624C4 21.5781 4.42994 22 4.95541 22C5.48089 22 5.91083 21.5781 5.91083 21.0624V13.9644H18.1306C18.4745 13.9644 18.7803 13.7675 18.9236 13.4674C19.0669 13.1674 19.0191 12.8111 18.7994 12.5485L15.6369 8.87295ZM5.91083 12.2391V5.49742H16.2484L13.8217 8.31974C13.5446 8.63854 13.5446 9.10736 13.8217 9.42616L16.2484 12.2485H5.91083V12.2391Z"
-            fill-rule="evenodd" />
-    </svg>
+    <ph-flag :size="width" />
 </template>