@energysage/es-ds-components 5.0.2 → 5.2.0

package/app/components/icon/location.vue

@@ -1,45 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconLocation',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhMapPin } 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="M5.636 3.636A9 9 0 0 1 21 10c0 1.017-.108 1.912-.389 2.76-.283.853-.724 1.608-1.33 2.365a.985.985 0 0 1-.025.03l-6.5 7.5a1 1 0 0 1-1.512 0l-6.5-7.5a1.017 1.017 0 0 1-.024-.03c-.607-.757-1.048-1.512-1.331-2.365C3.108 11.912 3 11.017 3 10a9 9 0 0 1 2.636-6.364Z"
-            fill="none" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M12 8a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-4 2a4 4 0 1 1 8 0 4 4 0 0 1-8 0Z" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M5.636 3.636A9 9 0 0 1 21 10c0 1.017-.108 1.912-.389 2.76-.283.853-.724 1.608-1.33 2.365a.985.985 0 0 1-.025.03l-6.5 7.5a1 1 0 0 1-1.512 0l-6.5-7.5a1.017 1.017 0 0 1-.024-.03c-.607-.757-1.048-1.512-1.331-2.365C3.108 11.912 3 11.017 3 10a9 9 0 0 1 2.636-6.364ZM12 3a7 7 0 0 0-7 7c0 .875.093 1.545.287 2.131.192.577.497 1.122.982 1.729L12 20.473l5.731-6.613c.485-.607.79-1.152.981-1.729.195-.586.288-1.256.288-2.131a7 7 0 0 0-7-7Z" />
-    </svg>
+    <ph-map-pin :size="width" />
 </template>

package/app/components/icon/lock-off.vue

@@ -1,45 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconLockOff',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhLockOpen } 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="M2 12a3 3 0 0 1 3-3h14a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3v-8Z"
-            fill="none" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M5 11a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1H5Zm-3 1a3 3 0 0 1 3-3h14a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3v-8Z" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M9 3a2 2 0 0 0-2 2v5a1 1 0 1 1-2 0V5a4 4 0 0 1 4-4h6a4 4 0 0 1 4 4v1a1 1 0 1 1-2 0V5a2 2 0 0 0-2-2H9Z" />
-    </svg>
+    <ph-lock-open :size="width" />
 </template>

package/app/components/icon/lock-on.vue

@@ -1,48 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconLockOn',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhLock } 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="M2 12a3 3 0 0 1 3-3h14a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3v-8Z"
-            fill="none" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M5 11a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1H5Zm-3 1a3 3 0 0 1 3-3h14a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3v-8Z" />
-        <path
-            d="M6.172 3.172A4 4 0 0 1 9 2h6a4 4 0 0 1 4 4v4a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6a4 4 0 0 1 1.172-2.828Z"
-            fill="none" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M9 4a2 2 0 0 0-2 2v3h10V6a2 2 0 0 0-2-2H9Zm-2.828-.828A4 4 0 0 1 9 2h6a4 4 0 0 1 4 4v4a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6a4 4 0 0 1 1.172-2.828Z" />
-    </svg>
+    <ph-lock :size="width" />
 </template>

package/app/components/icon/minus.vue

@@ -1,38 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconMinus',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhMinus } 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 12a1 1 0 0 1 1-1h16a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1Z" />
-    </svg>
+    <ph-minus :size="width" />
 </template>

package/app/components/icon/money-bag.vue

@@ -1,37 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconMoneyBag',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhMoney } 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,
-        }"
-        viewBox="0 0 24 24"
-        fill="currentColor"
-        xmlns="http://www.w3.org/2000/svg">
-        <path
-            d="M21.307 15.285c-.09-3.659-2.002-6.403-5.29-7.614l1.598-3.7a1.443 1.443 0 0 0-.313-1.606 1.436 1.436 0 0 0-1.607-.28l-2.801 1.293a2.078 2.078 0 0 1-1.821-.025L9.219 2.44a1.732 1.732 0 0 0-1.936.272 1.715 1.715 0 0 0-.462 1.895l1.137 3.049c-3.263 1.195-5.166 3.947-5.265 7.63v5.109a3.566 3.566 0 0 0 3.56 3.56h11.494c1.961 0 3.362-1.369 3.56-3.494v-5.175ZM8.222 3.749c.05-.05.19-.148.379-.05l1.854.915c.956.478 2.06.486 3.032.041l2.851-1.244L14.6 7.424H9.367L8.14 4.12c-.074-.198.042-.322.091-.371h-.008Zm9.525 18.804H6.261a2.168 2.168 0 0 1-2.167-2.16v-5.075c.05-1.903.741-5.265 4.787-6.493h6.172c4.111 1.244 4.804 4.598 4.853 6.55v4.986c-.14 1.376-.947 2.192-2.159 2.192Zm-3.568-5.076a2.19 2.19 0 0 1-1.705 2.126v.51a.531.531 0 0 1-.528.528.531.531 0 0 1-.527-.527v-.544a2.168 2.168 0 0 1-1.599-2.093c0-.289.24-.528.528-.528.288 0 .527.24.527.528a1.13 1.13 0 0 0 1.129 1.129c.626 0 1.129-.503 1.129-1.13 0-.625-.503-1.128-1.129-1.128-1.112-.017-1.994-.906-1.994-1.994 0-.898.593-1.648 1.409-1.895v-.552c0-.289.239-.528.527-.528.289 0 .528.24.528.528v.519a1.996 1.996 0 0 1 1.516 1.928.531.531 0 0 1-.527.527.531.531 0 0 1-.528-.527.939.939 0 1 0-1.879 0c0 .519.412.93.923.94 1.22 0 2.192.98 2.192 2.183h.008Z" />
-    </svg>
+    <ph-money :size="width" />
 </template>

package/app/components/icon/open-envelope.vue

@@ -1,45 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconOpenEnvelope',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhEnvelopeOpen } 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="M9.133 2.787a5 5 0 0 1 5.735 0l6 4.2A5 5 0 0 1 23 11.083V19a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3v-7.917a5 5 0 0 1 2.132-4.096l6-4.2Z"
-            fill="none" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M12 3.883a3 3 0 0 0-1.72.542l-6 4.2A3 3 0 0 0 3 11.083V19a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-7.917a3 3 0 0 0-1.28-2.458l-6-4.2A3 3 0 0 0 12 3.883ZM9.133 2.787a5 5 0 0 1 5.735 0l6 4.2A5 5 0 0 1 23 11.083V19a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3v-7.917a5 5 0 0 1 2.132-4.096l6-4.2Z" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="m8.876 15.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-open :size="width" />
 </template>

package/app/components/icon/paper.vue

@@ -1,45 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconPaper',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhFile } 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="M3.879 1.879A3 3 0 0 1 6 1h7.56a3 3 0 0 1 2.097.855l4.44 4.342A3.003 3.003 0 0 1 21 8.342V20a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V4a3 3 0 0 1 .879-2.121Z"
-            fill="none" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M3.879 1.879A3 3 0 0 1 6 1h7.56a3 3 0 0 1 2.097.855l4.44 4.342A3.003 3.003 0 0 1 21 8.342V20a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V4a3 3 0 0 1 .879-2.121ZM6 3a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8.342a1.001 1.001 0 0 0-.301-.715l-4.44-4.342A1 1 0 0 0 13.56 3H6Z" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M13 6V2h2v4a1 1 0 0 0 1 1h4v2h-4a3 3 0 0 1-3-3Z" />
-    </svg>
+    <ph-file :size="width" />
 </template>

package/app/components/icon/pencil.vue

@@ -1,45 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconPencil',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhPencilSimple } 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="M3.626 15.34 15.863 3.104l.016-.015a3.56 3.56 0 0 1 5.034 5.032l-.016.016L8.658 20.374a3 3 0 0 1-1.533.82l-3.929.787a1 1 0 0 1-1.177-1.177l.786-3.93a3 3 0 0 1 .82-1.533Z"
-            fill="none" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M17.268 4.526 5.04 16.756a1 1 0 0 0-.273.51l-.492 2.46 2.458-.493a1 1 0 0 0 .51-.273L19.475 6.73a1.56 1.56 0 0 0-2.206-2.204ZM3.626 15.34 15.863 3.103l.016-.015a3.56 3.56 0 0 1 5.034 5.032l-.016.016L8.658 20.374a3 3 0 0 1-1.533.82l-3.929.787a1 1 0 0 1-1.177-1.177l.786-3.93a3 3 0 0 1 .82-1.533Z" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="m16.793 10.207-3-3 1.414-1.414 3 3-1.414 1.414Z" />
-    </svg>
+    <ph-pencil-simple :size="width" />
 </template>

package/app/components/icon/person-add.vue

@@ -1,41 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconPersonAdd',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhUserPlus } 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="M17 7c0 2.75-2.25 5-5 5S7 9.75 7 7s2.25-5 5-5 5 2.25 5 5Z"
-            fill="none" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M12 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8ZM6 7a6 6 0 1 1 12 0A6 6 0 0 1 6 7Zm13 5a1 1 0 0 1 1 1v2h2a1 1 0 1 1 0 2h-2v2a1 1 0 1 1-2 0v-2h-2a1 1 0 1 1 0-2h2v-2a1 1 0 0 1 1-1ZM6.649 15a2 2 0 0 0-1.986 1.752l-.39 3.124A1 1 0 0 0 5.266 21H17a1 1 0 1 1 0 2H5.266a3 3 0 0 1-2.977-3.372l.39-3.124A4 4 0 0 1 6.649 13a1 1 0 1 1 0 2Z" />
-    </svg>
+    <ph-user-plus :size="width" />
 </template>

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

@@ -1,41 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconPersonCheck',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhUserCheck } 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="M17 7c0 2.75-2.25 5-5 5S7 9.75 7 7s2.25-5 5-5 5 2.25 5 5Z"
-            fill="none" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M12 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8ZM6 7a6 6 0 1 1 12 0A6 6 0 0 1 6 7Zm16.684 6.27a1 1 0 0 1 .046 1.414l-3.75 4a1 1 0 0 1-1.394.063l-2.25-2a1 1 0 0 1 1.328-1.494l1.522 1.353 3.084-3.29a1 1 0 0 1 1.414-.046ZM6.649 15a2 2 0 0 0-1.986 1.752l-.39 3.124A1 1 0 0 0 5.266 21H17a1 1 0 1 1 0 2H5.266a3 3 0 0 1-2.977-3.372l.39-3.124A4 4 0 0 1 6.649 13a1 1 0 1 1 0 2Z" />
-    </svg>
+    <ph-user-check :size="width" />
 </template>

package/app/components/icon/person-cross.vue

@@ -1,41 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconPersonCross',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhUserMinus } 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="M17 7c0 2.75-2.25 5-5 5S7 9.75 7 7s2.25-5 5-5 5 2.25 5 5Z"
-            fill="none" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M12 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8ZM6 7a6 6 0 1 1 12 0A6 6 0 0 1 6 7Zm.649 8a2 2 0 0 0-1.986 1.752l-.39 3.124A1 1 0 0 0 5.266 21H17a1 1 0 1 1 0 2H5.266a3 3 0 0 1-2.977-3.372l.39-3.124A4 4 0 0 1 6.649 13H7a1 1 0 1 1 0 2h-.351Zm9.644-1.707a1 1 0 0 1 1.414 0l1.793 1.793 1.793-1.793a1 1 0 0 1 1.414 1.414L20.914 16.5l1.793 1.793a1 1 0 0 1-1.414 1.414L19.5 17.914l-1.793 1.793a1 1 0 0 1-1.414-1.414l1.793-1.793-1.793-1.793a1 1 0 0 1 0-1.414Z" />
-    </svg>
+    <ph-user-minus :size="width" />
 </template>