@pequity/squirrel 6.0.13 → 6.1.0

package/squirrel/components/p-btn/p-btn.vue

@@ -21,25 +21,36 @@
     :disabled="!!$attrs.disabled || loading ? true : null"
     :aria-disabled="$attrs.disabled"
   >
-    <div :class="{ invisible: loading }"><slot></slot></div>
+    <div :class="[{ invisible: loading }, classes.content]">
+      <PIcon v-if="icon" :icon="icon" :class="classes.icon" />
+      <span class="slot-wrapper empty:hidden">
+        <slot></slot>
+      </span>
+      <PIcon v-if="iconRight" :icon="iconRight" :class="classes.icon" />
+    </div>
     <PRingLoader v-if="loading" :size="loaderSize" :class="classes.loader" />
   </Component>
 </template>
 
 <script lang="ts">
 import { type Size, SIZES } from '@squirrel/components/p-btn/p-btn.types';
+import PIcon from '@squirrel/components/p-icon/p-icon.vue';
 import PRingLoader from '@squirrel/components/p-ring-loader/p-ring-loader.vue';
 import { isExternalLink } from '@squirrel/utils/link';
 import { sanitizeUrl } from '@squirrel/utils/sanitization';
 import { tv, type VariantProps } from 'tailwind-variants';
-import { defineComponent, type PropType } from 'vue';
-import { type RouteLocationRaw, RouterLink } from 'vue-router';
+import { computed, type PropType } from 'vue';
+import { type RouteLocationRaw } from 'vue-router';
+
+type Icon = InstanceType<typeof PIcon>['$props']['icon'];
 
 const btnClasses = {
   slots: {
     button:
       'relative inline-block rounded font-medium outline-none disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:cursor-default aria-disabled:opacity-50',
+    content: 'flex items-center justify-center has-[.slot-wrapper:empty]:gap-0',
     loader: 'absolute bottom-0 left-0 right-0 top-0 flex items-center justify-center font-medium',
+    icon: 'shrink-0',
   },
   variants: {
     type: {
@@ -72,9 +83,21 @@ const btnClasses = {
       'secondary-ghost-dark': { button: 'text-white hover:bg-p-purple-50', loader: 'text-p-blue-15' },
     },
     size: {
-      sm: { button: 'px-2 py-1 text-sm' },
-      md: { button: 'px-6 py-2 text-base' },
-      lg: { button: 'px-6 py-2.5 text-lg' },
+      sm: {
+        button: 'px-2 has-[.slot-wrapper:empty]:px-1 py-1 text-sm',
+        content: 'gap-1',
+        icon: 'text-lg',
+      },
+      md: {
+        button: 'px-6 has-[.slot-wrapper:empty]:px-2 py-2 text-base',
+        content: 'gap-2',
+        icon: 'text-xl',
+      },
+      lg: {
+        button: 'px-6 has-[.slot-wrapper:empty]:px-2.5 py-2.5 text-lg',
+        content: 'gap-2.5',
+        icon: 'text-2xl',
+      },
     },
   },
   defaultVariants: {
@@ -84,87 +107,97 @@ const btnClasses = {
 } as const;
 
 const btn = tv(btnClasses);
+
 const BUTTON_TYPES = Object.keys(btnClasses.variants.type);
 const BUTTON_NATIVE_TYPES = ['button', 'submit', 'reset'] as const;
 const LOADER_SIZES = { sm: 24, md: 30, lg: 40 } as const satisfies { [key in Size]: number };
 
 type ButtonNativeType = (typeof BUTTON_NATIVE_TYPES)[number];
 type ButtonType = NonNullable<VariantProps<typeof btn>['type']>;
+</script>
 
-export default defineComponent({
+<script setup lang="ts">
+defineOptions({
   name: 'PBtn',
-  components: {
-    PRingLoader,
-    RouterLink,
-  },
   inheritAttrs: false,
-  props: {
-    /**
-     * The button style e.g primary, secondary, primary-outline, secondary-outline, error, success, primary-link
-     */
-    type: {
-      type: String as PropType<ButtonType>,
-      default: 'primary',
-      validator(value: ButtonType) {
-        return BUTTON_TYPES.includes(value);
-      },
-    },
-    /**
-     * The button native type e.g button, submit, reset
-     */
-    nativeType: {
-      type: String as PropType<ButtonNativeType>,
-      default: 'button',
-      validator(value: ButtonNativeType) {
-        return BUTTON_NATIVE_TYPES.includes(value);
-      },
-    },
-    /**
-     * The button size e.g sm, md, lg
-     */
-    size: {
-      type: String as PropType<Size>,
-      default: 'md',
-      validator(value: Size) {
-        return SIZES.includes(value);
-      },
-    },
-    /**
-     * Whether the button is loading
-     */
-    loading: {
-      type: Boolean,
-      default: false,
-    },
-    /**
-     * Whether the button is selected (sets aria-selected attribute)
-     */
-    selected: {
-      type: Boolean,
-      default: false,
-    },
-    /**
-     * Exactly as the `to` prop in `RouterLink`, when used, it renders a link that triggers a navigation on click.
-     * See https://router.vuejs.org/api/#RouteLocationRaw
-     */
-    to: {
-      type: [Object, String] as PropType<RouteLocationRaw>,
-      default: '',
+});
+
+const props = defineProps({
+  /**
+   * The button style e.g primary, secondary, primary-outline, secondary-outline, error, success, primary-link
+   */
+  type: {
+    type: String as PropType<ButtonType>,
+    default: 'primary',
+    validator(value: ButtonType) {
+      return BUTTON_TYPES.includes(value);
     },
   },
-  computed: {
-    classes() {
-      const { button, loader } = btn({ type: this.type, size: this.size });
-
-      return { button: button(), loader: loader() };
+  /**
+   * The button native type e.g button, submit, reset
+   */
+  nativeType: {
+    type: String as PropType<ButtonNativeType>,
+    default: 'button',
+    validator(value: ButtonNativeType) {
+      return BUTTON_NATIVE_TYPES.includes(value);
     },
-    loaderSize() {
-      return Number(`${LOADER_SIZES[this.size]}`);
+  },
+  /**
+   * The button size e.g sm, md, lg
+   */
+  size: {
+    type: String as PropType<Size>,
+    default: 'md',
+    validator(value: Size) {
+      return SIZES.includes(value);
     },
   },
-  methods: {
-    isExternalLink,
-    sanitizeUrl,
+  /**
+   * Whether the button is loading
+   */
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * Whether the button is selected (sets aria-selected attribute)
+   */
+  selected: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * Exactly as the `to` prop in `RouterLink`, when used, it renders a link that triggers a navigation on click.
+   * See https://router.vuejs.org/api/#RouteLocationRaw
+   */
+  to: {
+    type: [Object, String] as PropType<RouteLocationRaw>,
+    default: '',
   },
+  /**
+   * The icon to display on the button
+   */
+  icon: {
+    type: String as PropType<Icon>,
+    default: '',
+  },
+  iconRight: {
+    type: String as PropType<Icon>,
+    default: '',
+  },
+});
+
+const classes = computed(() => {
+  const { button, content, loader, icon } = btn({
+    type: props.type,
+    size: props.size,
+  });
+
+  return { button: button(), content: content(), loader: loader(), icon: icon() };
+});
+
+const loaderSize = computed(() => {
+  return Number(`${LOADER_SIZES[props.size]}`);
 });
 </script>

package/squirrel/components/p-dropdown/p-dropdown.vue

@@ -1,6 +1,5 @@
 <template>
   <VDropdown ref="vPopper" v-bind="{ ...defaultAttrs, ...$attrs }" @show="onShow" @hide="destroy">
-    <!-- @vue-expect-error -->
     <template v-for="(_, slot) in $slots" #[slot]="scope">
       <slot :name="slot" v-bind="scope || {}" />
     </template>

package/squirrel/components/p-file-upload/p-file-upload.vue

@@ -18,13 +18,13 @@
     >
       <div v-if="!maxFilesReached" class="flex h-28 flex-col items-center justify-center">
         <div v-if="!isDraggingOver" class="flex flex-col items-center">
-          <img src="@squirrel/assets/file-upload-upload-icon.svg" class="h-8 w-8" />
+          <PIcon icon="upload" width="32" class="text-p-gray-50" />
           <div class="mt-2 text-p-gray-50">
             Drag or <span class="text-p-blue-60">select {{ fileWord }}</span>
           </div>
         </div>
         <div v-else class="flex flex-col items-center">
-          <img src="@squirrel/assets/file-upload-drag-over-icon.svg" class="h-8 w-8" />
+          <PIcon icon="tdesign:drag-drop" width="32" class="text-primary" />
           <div class="mt-2 text-p-purple-60">Drop {{ fileWord }}</div>
         </div>
         <input
@@ -52,10 +52,9 @@
           @click.stop=""
         >
           <div class="truncate" :title="file.name">{{ file.name }}</div>
-          <button
-            class="bg-file-upload-x-icon h-4 w-4 shrink-0 cursor-pointer"
-            @click.stop="removeFile(index)"
-          ></button>
+          <button class="h-5 shrink-0 cursor-pointer overflow-hidden" @click.stop="removeFile(index)">
+            <PIcon icon="weui:close2-outlined" width="20" class="text-p-gray-60 hover:text-on-error" />
+          </button>
         </div>
       </div>
     </div>
@@ -71,6 +70,7 @@
 <script setup lang="ts">
 import { type FileUploadFile } from '@squirrel/components/p-file-upload/p-file-upload.types';
 import { formatBytes, getFileExtension } from '@squirrel/components/p-file-upload/p-file-upload.utils';
+import PIcon from '@squirrel/components/p-icon/p-icon.vue';
 import { useInputClasses } from '@squirrel/composables/useInputClasses';
 import { uniq } from 'lodash-es';
 import { computed, onMounted, type PropType, ref, shallowRef } from 'vue';
@@ -254,13 +254,3 @@ onMounted(() => {
   }
 });
 </script>
-
-<style scoped>
-.bg-file-upload-x-icon {
-  background-image: url('@squirrel/assets/file-upload-x-icon.svg');
-}
-
-.bg-file-upload-x-icon:hover {
-  background-image: url('@squirrel/assets/file-upload-x-icon-hover.svg');
-}
-</style>

package/squirrel/components/p-inline-date-picker/p-inline-date-picker.vue

@@ -45,7 +45,7 @@ const attrs = useAttrs();
 const { labelClasses, errorMsgClasses } = useInputClasses(props);
 
 // Computed
-const datePickerProps = computed(() => {
+const datePickerProps = computed<VueDatePickerProps>(() => {
   const { modelValue: _, ...propsWithoutModelValue } = props;
   const { class: classes, style, ...attrsWithoutClassAndStyle } = attrs;
 

package/squirrel/components/p-select/p-select.spec.js

@@ -26,7 +26,7 @@ const baseClasses = () => [
   'h-10',
   'pl-4',
   'text-base',
-  'bg-[right_1rem_center]',
+  'bg-[position:right_1rem_center]',
   'pr-10',
 ];
 

package/squirrel/components/p-select-btn/p-select-btn.stories.js

@@ -52,9 +52,11 @@ export const Default = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
-    await userEvent.click(canvas.getByText(/Meris/i));
+    const btn = canvas.getByRole('button', { name: /Aleksandr Chappel/i });
 
-    await expect(canvas.getByText(/Meris/i).parentNode.getAttribute('aria-selected')).toBe('true');
+    await userEvent.click(btn);
+
+    await expect(btn.getAttribute('aria-selected')).toBe('true');
   },
 };
 
@@ -72,9 +74,9 @@ export const DisabledOption = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
-    const disabledEl = canvas.getByText(/Van/i);
+    const disabledBtn = canvas.getByRole('button', { name: /Van Deyes/i });
 
-    await expect(disabledEl.parentNode.hasAttribute('disabled')).toBe(true);
+    await expect(disabledBtn.hasAttribute('disabled')).toBe(true);
     await expect(canvas.getByText(/Meris/i).parentNode.hasAttribute('disabled')).toBe(false);
     await expect(canvas.getByText(/Chick/i).parentNode.hasAttribute('disabled')).toBe(false);
   },
@@ -245,3 +247,42 @@ export const MultipleSelected = {
     },
   },
 };
+
+export const WithIcons = {
+  args: {
+    items: [
+      { value: 1, text: 'Aleksandr Chappel', icon: 'archive' },
+      { value: 2, text: 'Van Deyes', icon: 'edit' },
+      { value: 3, text: 'Meris Hardman', icon: 'delete' },
+      { value: 4, text: 'Chick Catto', icon: 'send' },
+      { value: 5, text: "Alys O'Flynn", icon: 'settings' },
+    ],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'We can pass an `icon` attribute to the list of options to add an icon to an option.',
+      },
+    },
+  },
+};
+
+export const WithIconsOnly = {
+  args: {
+    items: [
+      { value: 1, icon: 'archive' },
+      { value: 2, icon: 'edit' },
+      { value: 3, icon: 'delete' },
+      { value: 4, icon: 'send' },
+      { value: 5, icon: 'settings' },
+    ],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'We can pass an `icon` attribute without a `text` attribute to the list of options to only display an icon.',
+      },
+    },
+  },
+};

package/squirrel/components/p-select-btn/p-select-btn.vue

@@ -2,7 +2,7 @@
   <div :class="{ flex: grow }">
     <div
       v-for="(item, index) in items"
-      :key="item[itemValue] as Key"
+      :key="String(item[itemValue])"
       v-tooltip="{ content: tooltipText(item) }"
       :class="['inline-flex', { '*:px-0 *:py-0': noPadding, grow }]"
     >
@@ -10,6 +10,7 @@
         :size="size"
         type="secondary-outline-blue"
         :disabled="item.disabled"
+        :icon="String(item.icon)"
         :class="{
           'rounded-none': index !== 0 && index !== items.length - 1 && items.length > 1,
           'rounded-br-none rounded-tr-none': index === 0 && items.length > 1,
@@ -31,7 +32,6 @@ import { type Size } from '@squirrel/components/p-btn/p-btn.types';
 import PBtn from '@squirrel/components/p-btn/p-btn.vue';
 
 type BtnGroupItem = Record<string, string | number | boolean>;
-type Key = string | number;
 
 type Props = {
   modelValue?: string | number | null | BtnGroupItem[];

package/squirrel/components/p-tabs/p-tabs.stories.js

@@ -1,4 +1,4 @@
-import FileUploadIcon from '@squirrel/assets/file-upload-upload-icon.svg?inline';
+import PaginateRightIcon from '@squirrel/assets/pagination-right-icon.svg?inline';
 import PTabs from '@squirrel/components/p-tabs/p-tabs.vue';
 import { action } from '@storybook/addon-actions';
 
@@ -34,7 +34,7 @@ export const Default = {
       {
         title: 'Tab 2',
         name: 'tab2',
-        icon: FileUploadIcon,
+        icon: PaginateRightIcon,
       },
       {
         title: 'Tab 3',

package/squirrel/composables/useInputClasses.spec.js

@@ -125,7 +125,7 @@ describe('useInputClasses', () => {
     });
     const baseSelectClasses = [
       'appearance-none',
-      'bg-[right_1rem_center]',
+      'bg-[position:right_1rem_center]',
       'bg-no-repeat',
       'pr-10',
       'squirrel-bg-chevron-down',
@@ -146,7 +146,7 @@ describe('useInputClasses', () => {
     });
     const baseSelectClasses = [
       'appearance-none',
-      'bg-[right_0.675rem_center]',
+      'bg-[position:right_0.675rem_center]',
       'bg-no-repeat',
       'pr-8',
       'squirrel-bg-chevron-down',
@@ -166,7 +166,7 @@ describe('useInputClasses', () => {
     });
     const baseSelectClasses = [
       'appearance-none',
-      'bg-[right_1.25rem_center]',
+      'bg-[position:right_1.25rem_center]',
       'bg-no-repeat',
       'pr-12',
       'squirrel-bg-chevron-down',

package/squirrel/utils/inputClasses.ts

@@ -39,7 +39,9 @@ const inputClasses = tv({
       },
     },
     rounded: {
-      true: 'rounded-full',
+      true: {
+        input: 'rounded-full',
+      },
     },
   },
   compoundVariants: [
@@ -113,13 +115,13 @@ const selectClasses = tv({
   variants: {
     size: {
       sm: {
-        input: 'bg-[right_0.675rem_center] pr-8',
+        input: 'bg-[position:right_0.675rem_center] pr-8',
       },
       md: {
-        input: 'bg-[right_1rem_center] pr-10',
+        input: 'bg-[position:right_1rem_center] pr-10',
       },
       lg: {
-        input: 'bg-[right_1.25rem_center] pr-12',
+        input: 'bg-[position:right_1.25rem_center] pr-12',
       },
     },
   },

package/squirrel/utils/inputClassesMixin.spec.js

@@ -136,7 +136,7 @@ describe('inputClassesMixin', () => {
     });
     const baseSelectClasses = [
       'appearance-none',
-      'bg-[right_1rem_center]',
+      'bg-[position:right_1rem_center]',
       'bg-no-repeat',
       'pr-10',
       'squirrel-bg-chevron-down',
@@ -157,7 +157,7 @@ describe('inputClassesMixin', () => {
     });
     const baseSelectClasses = [
       'appearance-none',
-      'bg-[right_0.675rem_center]',
+      'bg-[position:right_0.675rem_center]',
       'bg-no-repeat',
       'pr-8',
       'squirrel-bg-chevron-down',
@@ -177,7 +177,7 @@ describe('inputClassesMixin', () => {
     });
     const baseSelectClasses = [
       'appearance-none',
-      'bg-[right_1.25rem_center]',
+      'bg-[position:right_1.25rem_center]',
       'bg-no-repeat',
       'pr-12',
       'squirrel-bg-chevron-down',

package/squirrel/assets/file-upload-drag-over-icon.svg

@@ -1,5 +0,0 @@
-<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M33 12H14V44H42V21L33 12Z" stroke="#1A123B" stroke-width="3" />
-  <path d="M9 36H6V4H25L28 7" stroke="#1A123B" stroke-width="3" />
-  <path d="M37 30H19M28 21V39" stroke="#1A123B" stroke-width="3" />
-</svg>

package/squirrel/assets/file-upload-upload-icon.svg

@@ -1,5 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M5.8335 6.25016L10.0002 2.0835L14.1668 6.25016" stroke="#767189" stroke-width="1.25" />
-  <path d="M10 2.0835V13.7502" stroke="#767189" stroke-width="1.25" />
-  <path d="M2.91675 15V18.3333H17.0834V15" stroke="#767189" stroke-width="1.25" />
-</svg>

package/squirrel/assets/file-upload-x-icon-hover.svg

@@ -1,8 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path
-    d="M0 8C0 9.58225 0.469192 11.129 1.34824 12.4446C2.22729 13.7602 3.47672 14.7855 4.93853 15.391C6.40034 15.9965 8.00887 16.155 9.56072 15.8463C11.1126 15.5376 12.538 14.7757 13.6569 13.6569C14.7757 12.538 15.5376 11.1126 15.8463 9.56072C16.155 8.00887 15.9965 6.40034 15.391 4.93853C14.7855 3.47672 13.7602 2.22729 12.4446 1.34824C11.129 0.469192 9.58225 0 8 0C5.87827 0 3.84344 0.842855 2.34315 2.34315C0.842855 3.84344 0 5.87827 0 8ZM14.3333 8C14.3333 9.25262 13.9619 10.4771 13.266 11.5186C12.5701 12.5601 11.5809 13.3719 10.4237 13.8512C9.2664 14.3306 7.99298 14.456 6.76443 14.2116C5.53588 13.9673 4.40739 13.3641 3.52166 12.4783C2.63592 11.5926 2.03273 10.4641 1.78836 9.23557C1.54399 8.00703 1.66941 6.7336 2.14876 5.57634C2.62812 4.41907 3.43988 3.42994 4.48139 2.73403C5.5229 2.03811 6.74739 1.66667 8 1.66667C9.67916 1.66843 11.289 2.33626 12.4764 3.52361C13.6637 4.71096 14.3316 6.32084 14.3333 8Z"
-    fill="#BB1410" />
-  <path
-    d="M5.88634 4.71322C5.73075 4.55763 5.51972 4.47021 5.29967 4.47021C5.07963 4.47021 4.8686 4.55763 4.71301 4.71322C4.55741 4.86881 4.47 5.07984 4.47 5.29989C4.47 5.51993 4.55741 5.73096 4.71301 5.88655L6.71301 7.88655C6.72914 7.9021 6.74197 7.92074 6.75073 7.94136C6.7595 7.96198 6.76401 7.98415 6.76401 8.00655C6.76401 8.02896 6.7595 8.05113 6.75073 8.07175C6.74197 8.09237 6.72914 8.11101 6.71301 8.12655L4.71301 10.1266C4.63561 10.2034 4.57417 10.2948 4.53225 10.3955C4.49033 10.4962 4.46875 10.6042 4.46875 10.7132C4.46875 10.8223 4.49033 10.9303 4.53225 11.031C4.57417 11.1317 4.63561 11.223 4.71301 11.2999C4.78939 11.3781 4.88063 11.4403 4.98138 11.4827C5.08213 11.5251 5.19035 11.547 5.29967 11.547C5.409 11.547 5.51721 11.5251 5.61796 11.4827C5.71871 11.4403 5.80996 11.3781 5.88634 11.2999L7.88634 9.29989C7.91934 9.27037 7.96207 9.25405 8.00634 9.25405C8.05062 9.25405 8.09334 9.27037 8.12634 9.29989L10.1263 11.2999C10.2027 11.3781 10.294 11.4403 10.3947 11.4827C10.4955 11.5251 10.6037 11.547 10.713 11.547C10.8223 11.547 10.9305 11.5251 11.0313 11.4827C11.132 11.4403 11.2233 11.3781 11.2997 11.2999C11.3771 11.223 11.4385 11.1317 11.4804 11.031C11.5224 10.9303 11.5439 10.8223 11.5439 10.7132C11.5439 10.6042 11.5224 10.4962 11.4804 10.3955C11.4385 10.2948 11.3771 10.2034 11.2997 10.1266L9.29967 8.12655C9.27016 8.09355 9.25384 8.05083 9.25384 8.00655C9.25384 7.96228 9.27016 7.91955 9.29967 7.88655L11.2997 5.88655C11.4553 5.73096 11.5427 5.51993 11.5427 5.29989C11.5427 5.07984 11.4553 4.86881 11.2997 4.71322C11.1441 4.55763 10.9331 4.47021 10.713 4.47021C10.493 4.47021 10.2819 4.55763 10.1263 4.71322L8.12634 6.71322C8.09334 6.74274 8.05062 6.75906 8.00634 6.75906C7.96207 6.75906 7.91934 6.74274 7.88634 6.71322L5.88634 4.71322Z"
-    fill="#BB1410" />
-</svg>

package/squirrel/assets/file-upload-x-icon.svg

@@ -1,8 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path
-    d="M0 8C0 9.58225 0.469192 11.129 1.34824 12.4446C2.22729 13.7602 3.47672 14.7855 4.93853 15.391C6.40034 15.9965 8.00887 16.155 9.56072 15.8463C11.1126 15.5376 12.538 14.7757 13.6569 13.6569C14.7757 12.538 15.5376 11.1126 15.8463 9.56072C16.155 8.00887 15.9965 6.40034 15.391 4.93853C14.7855 3.47672 13.7602 2.22729 12.4446 1.34824C11.129 0.469192 9.58225 0 8 0C5.87827 0 3.84344 0.842855 2.34315 2.34315C0.842855 3.84344 0 5.87827 0 8ZM14.3333 8C14.3333 9.25262 13.9619 10.4771 13.266 11.5186C12.5701 12.5601 11.5809 13.3719 10.4237 13.8512C9.2664 14.3306 7.99298 14.456 6.76443 14.2116C5.53588 13.9673 4.40739 13.3641 3.52166 12.4783C2.63592 11.5926 2.03273 10.4641 1.78836 9.23557C1.54399 8.00703 1.66941 6.7336 2.14876 5.57634C2.62812 4.41907 3.43988 3.42994 4.48139 2.73403C5.5229 2.03811 6.74739 1.66667 8 1.66667C9.67916 1.66843 11.289 2.33626 12.4764 3.52361C13.6637 4.71096 14.3316 6.32084 14.3333 8Z"
-    fill="#718096" />
-  <path
-    d="M5.88634 4.71322C5.73075 4.55763 5.51972 4.47021 5.29967 4.47021C5.07963 4.47021 4.8686 4.55763 4.71301 4.71322C4.55741 4.86881 4.47 5.07984 4.47 5.29989C4.47 5.51993 4.55741 5.73096 4.71301 5.88655L6.71301 7.88655C6.72914 7.9021 6.74197 7.92074 6.75073 7.94136C6.7595 7.96198 6.76401 7.98415 6.76401 8.00655C6.76401 8.02896 6.7595 8.05113 6.75073 8.07175C6.74197 8.09237 6.72914 8.11101 6.71301 8.12655L4.71301 10.1266C4.63561 10.2034 4.57417 10.2948 4.53225 10.3955C4.49033 10.4962 4.46875 10.6042 4.46875 10.7132C4.46875 10.8223 4.49033 10.9303 4.53225 11.031C4.57417 11.1317 4.63561 11.223 4.71301 11.2999C4.78939 11.3781 4.88063 11.4403 4.98138 11.4827C5.08213 11.5251 5.19035 11.547 5.29967 11.547C5.409 11.547 5.51721 11.5251 5.61796 11.4827C5.71871 11.4403 5.80996 11.3781 5.88634 11.2999L7.88634 9.29989C7.91934 9.27037 7.96207 9.25405 8.00634 9.25405C8.05062 9.25405 8.09334 9.27037 8.12634 9.29989L10.1263 11.2999C10.2027 11.3781 10.294 11.4403 10.3947 11.4827C10.4955 11.5251 10.6037 11.547 10.713 11.547C10.8223 11.547 10.9305 11.5251 11.0313 11.4827C11.132 11.4403 11.2233 11.3781 11.2997 11.2999C11.3771 11.223 11.4385 11.1317 11.4804 11.031C11.5224 10.9303 11.5439 10.8223 11.5439 10.7132C11.5439 10.6042 11.5224 10.4962 11.4804 10.3955C11.4385 10.2948 11.3771 10.2034 11.2997 10.1266L9.29967 8.12655C9.27016 8.09355 9.25384 8.05083 9.25384 8.00655C9.25384 7.96228 9.27016 7.91955 9.29967 7.88655L11.2997 5.88655C11.4553 5.73096 11.5427 5.51993 11.5427 5.29989C11.5427 5.07984 11.4553 4.86881 11.2997 4.71322C11.1441 4.55763 10.9331 4.47021 10.713 4.47021C10.493 4.47021 10.2819 4.55763 10.1263 4.71322L8.12634 6.71322C8.09334 6.74274 8.05062 6.75906 8.00634 6.75906C7.96207 6.75906 7.91934 6.74274 7.88634 6.71322L5.88634 4.71322Z"
-    fill="#718096" />
-</svg>