@pequity/squirrel 7.0.3 → 7.1.1

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

@@ -2,6 +2,7 @@ import PBtn from '@squirrel/components/p-btn/p-btn.vue';
 import { sanitizeUrl } from '@squirrel/utils/sanitization';
 import { createWrapperFor } from '@tests/vitest.helpers';
 import { describe } from 'vitest';
+import { ref } from 'vue';
 
 vi.mock('@squirrel/utils/sanitization', () => {
   return {
@@ -109,43 +110,40 @@ describe('PBtn.vue', () => {
       expect(button.text()).toContain(`This is a button`);
     });
 
-    it.each([
-      ['button', undefined],
-      ['a', 'https://pequity.com/'],
-      ['a', { name: 'home', params: { id: 1 } }],
-    ])('gets disabled when the element is a %s and points to %s', async (el, to) => {
-      const wrapper = createWrapperFor(PBtn, {
-        props: {
-          to,
-        },
-        attrs: {
-          disabled: true,
-        },
-        global: {
-          stubs: { RouterLink: { template: '<a class="router-link-stub"><slot /></a>' } },
-        },
-      });
-
-      const button = await wrapper.find(el);
-
-      await button.trigger('click');
+    it.each(['https://pequity.com/', { name: 'home', params: { id: 1 } }])(
+      'gets disabled when the link points to %s',
+      async (to) => {
+        const wrapper = createWrapperFor(
+          {
+            template: `
+            <PBtn :disabled="disabled" :to="to" >Button</PBtn>
+            <button class="set-disabled" @click="disabled = true" :to="to">Set disabled</button>
+          `,
+            components: { PBtn },
+            setup() {
+              const disabled = ref(null);
+
+              return { disabled, to };
+            },
+          },
+          {
+            global: {
+              stubs: { RouterLink: { template: '<a class="router-link-stub"><slot /></a>' } },
+            },
+          }
+        );
 
-      if (el === 'button') {
-        expect(wrapper.emitted().click).toBeFalsy();
-      }
-      expect(button.attributes()).toHaveProperty('disabled');
-      expect(button.attributes()['aria-disabled']).toBe('true');
+        const pBtn = await wrapper.findComponent({ name: 'PBtn' });
 
-      await wrapper.setProps({ disabled: false });
+        expect(pBtn.attributes()).not.toHaveProperty('disabled');
+        expect(pBtn.attributes()['aria-disabled']).toBe('false');
 
-      await button.trigger('click');
+        await wrapper.find('.set-disabled').trigger('click');
 
-      if (el === 'button') {
-        expect(wrapper.emitted().click[0][0] instanceof MouseEvent).toBe(true);
+        expect(pBtn.attributes().disabled).toBe('true');
+        expect(pBtn.attributes()['aria-disabled']).toBe('true');
       }
-      expect(button.attributes()).not.toHaveProperty('disabled');
-      expect(button.attributes()['aria-disabled']).toBe('false');
-    });
+    );
 
     it('has a loading state', async () => {
       const wrapper = createWrapperFor(PBtn, {
@@ -257,7 +255,7 @@ describe('PBtn.vue', () => {
 
   describe('icon button', () => {
     it.each([
-      ['sm', ['shrink-0', 'text-[20px]']],
+      ['sm', ['shrink-0', 'text-base', 'p-0.5']],
       ['md', ['shrink-0', 'text-xl']],
       ['lg', ['shrink-0', 'text-2xl']],
     ])('renders a button with icon of size %s', async (size, classes) => {
@@ -273,7 +271,7 @@ describe('PBtn.vue', () => {
     });
 
     it.each([
-      ['sm', ['shrink-0', 'text-[20px]']],
+      ['sm', ['shrink-0', 'text-base', 'p-0.5']],
       ['md', ['shrink-0', 'text-xl']],
       ['lg', ['shrink-0', 'text-2xl']],
     ])('renders a button with a right icon of size %s', async (size, classes) => {
@@ -289,7 +287,7 @@ describe('PBtn.vue', () => {
     });
 
     it.each([
-      ['sm', ['shrink-0', 'text-[20px]'], ['has-[.slot-wrapper:empty]:px-1.5']],
+      ['sm', ['shrink-0', 'text-base', 'p-0.5'], ['has-[.slot-wrapper:empty]:px-1.5']],
       ['md', ['shrink-0', 'text-xl'], ['has-[.slot-wrapper:empty]:px-2.5']],
       ['lg', ['shrink-0', 'text-2xl'], ['has-[.slot-wrapper:empty]:px-3']],
     ])('renders a button with an icon without text of size %s', async (size, classes, buttonClasses) => {

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

@@ -1,26 +1,5 @@
 <template>
-  <a
-    v-if="typeof to === 'string' && isExternalLink(to)"
-    v-bind="$attrs"
-    :href="sanitizeUrl(to)"
-    target="_blank"
-    :class="classes.button"
-    :disabled="!!$attrs.disabled ? true : null"
-    :aria-disabled="!!$attrs.disabled"
-  >
-    <slot></slot>
-  </a>
-  <Component
-    :is="to ? 'RouterLink' : 'button'"
-    v-else
-    :type="to ? null : nativeType"
-    :to="to ? to : null"
-    :aria-selected="selected"
-    :class="classes.button"
-    v-bind="$attrs"
-    :disabled="!!$attrs.disabled || loading ? true : null"
-    :aria-disabled="$attrs.disabled"
-  >
+  <Component :is="isExternal ? 'a' : to ? 'RouterLink' : 'button'" v-bind="btnAttrs" :class="classes.button">
     <div :class="[{ invisible: loading }, classes.content]">
       <PIcon v-if="icon" :icon="icon" :class="classes.icon" />
       <span class="slot-wrapper empty:hidden">
@@ -28,7 +7,7 @@
       </span>
       <PIcon v-if="iconRight" :icon="iconRight" :class="classes.icon" />
     </div>
-    <PRingLoader v-if="loading" :size="loaderSize" :class="classes.loader" />
+    <PRingLoader v-if="loading" :size="LOADER_SIZES[props.size]" :class="classes.loader" />
   </Component>
 </template>
 
@@ -39,7 +18,7 @@ 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 { computed, type PropType } from 'vue';
+import { computed, type PropType, useAttrs } from 'vue';
 import { type RouteLocationRaw } from 'vue-router';
 
 type Icon = InstanceType<typeof PIcon>['$props']['icon'];
@@ -86,7 +65,7 @@ const btnClasses = {
       sm: {
         button: 'px-3 has-[.slot-wrapper:empty]:px-1.5 py-1.5 text-sm leading-5',
         content: 'gap-1',
-        icon: 'text-[20px]',
+        icon: 'text-base p-0.5',
       },
       md: {
         button: 'px-6 has-[.slot-wrapper:empty]:px-2.5 has-[.slot-wrapper:empty]:py-2.5 py-2 text-base',
@@ -119,9 +98,10 @@ type ButtonType = NonNullable<VariantProps<typeof btn>['type']>;
 <script setup lang="ts">
 defineOptions({
   name: 'PBtn',
-  inheritAttrs: false,
 });
 
+const attrs = useAttrs();
+
 const props = defineProps({
   /**
    * The button style e.g primary, secondary, primary-outline, secondary-outline, error, success, primary-link
@@ -197,7 +177,23 @@ const classes = computed(() => {
   return { button: button(), content: content(), loader: loader(), icon: icon() };
 });
 
-const loaderSize = computed(() => {
-  return Number(`${LOADER_SIZES[props.size]}`);
+const isExternal = computed(() => isExternalLink(String(props.to)));
+
+const btnAttrs = computed(() => {
+  const res: Record<string, unknown> = {
+    target: isExternal.value ? '_blank' : null,
+    to: !isExternal.value && props.to ? props.to : null,
+    type: props.to ? null : props.nativeType,
+    disabled: attrs.disabled || props.loading ? '' : null,
+    'aria-selected': !isExternal.value ? props.selected : false,
+    'aria-disabled': attrs.disabled || props.loading,
+  };
+
+  // We need to add the href attribute conditionally so that it doesn't override the RouterLink's href
+  if (isExternal.value) {
+    res.href = sanitizeUrl(String(props.to));
+  }
+
+  return res;
 });
 </script>

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

@@ -37,7 +37,6 @@ export default defineComponent({
     items: {
       type: Array,
       default: () => [],
-      required: true,
     },
     itemText: {
       type: String,

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

@@ -595,7 +595,7 @@ describe('PDropdownSelect.vue', () => {
 
     await wrapper.findByText('ff-a57d-beba44884da2').trigger('click');
 
-    await wrapper.find('button.clear').trigger('click');
+    await wrapper.find('button[aria-label="Clear search input"]').trigger('click');
 
     const newItems = wrapper.findAll('[p-select-list-option-item]');
 

package/squirrel/components/p-icon/p-icon.types.ts

@@ -33,6 +33,7 @@ export const P_ICON_ALIASES = {
   download: 'tdesign:download',
   upload: 'tdesign:upload',
   info: 'streamline:information-circle',
+  search: 'streamline:magnifying-glass-solid',
 } as const;
 
 export type PIconAlias = keyof typeof P_ICON_ALIASES;

package/squirrel/components/p-input-search/p-input-search.spec.js

@@ -8,12 +8,12 @@ describe('PInputSearch.vue', () => {
     const input = await wrapper.find('input');
     const button = wrapper.find('button.cursor-pointer');
     const icons = wrapper.findAll('i');
-    const searchIcon = wrapper.find('i.search');
+    const searchIcon = wrapper.findComponent({ name: 'PIcon' });
     const enterIcon = wrapper.find('i.enter');
 
     expect(input.exists()).toBe(true);
     expect(button.exists()).toBe(false);
-    expect(icons.length).toBe(1);
+    expect(icons.length).toBe(0);
     expect(searchIcon.exists()).toBe(true);
     expect(enterIcon.exists()).toBe(false);
   });
@@ -39,7 +39,7 @@ describe('PInputSearch.vue', () => {
 
     await wrapper.find('input').setValue('test');
 
-    const button = await wrapper.find('button.cursor-pointer');
+    const button = await wrapper.find('button[aria-label="Clear search input"]');
 
     expect(button.exists()).toBe(true);
   });
@@ -78,7 +78,7 @@ describe('PInputSearch.vue', () => {
     const icons = await wrapper.findAll('i');
     const enterIcon = wrapper.find('i.enter.v-popper--has-tooltip');
 
-    expect(icons.length).toBe(2);
+    expect(icons.length).toBe(1);
     expect(enterIcon.exists()).toBe(true);
   });
 });

package/squirrel/components/p-input-search/p-input-search.vue

@@ -11,173 +11,113 @@
     @keydown.enter="keydownEnter"
   >
     <template #prefix>
-      <i class="icon absolute bg-no-repeat outline-none" :class="searchIconClasses"></i>
+      <PIcon icon="search" class="absolute text-p-gray-40" :class="searchIconClasses[size]" />
     </template>
     <template #suffix>
       <i
         v-if="query && showEnterIcon && showEnterIconOnFocus"
         v-tooltip.bottom="{ content: 'Press enter to search', delay: { show: 100, hide: 0 } }"
-        class="icon absolute bg-no-repeat outline-none"
-        :class="enterIconClasses"
+        class="enter absolute bg-no-repeat outline-none"
+        :class="enterIconClasses[size]"
       ></i>
       <button
         v-if="query"
         role="button"
         aria-label="Clear search input"
-        class="icon absolute cursor-pointer bg-no-repeat"
-        :class="clearIconClasses"
+        class="absolute cursor-pointer"
+        :class="clearIconClasses[size]"
         @click="clearSearch"
-      />
+      >
+        <PIcon icon="cancel-circle" class="text-p-gray-40 hover:text-p-gray-50" />
+      </button>
     </template>
   </PInput>
 </template>
 
-<script lang="ts">
+<script setup 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 PInput from '@squirrel/components/p-input/p-input.vue';
-import { defineComponent, type PropType } from 'vue';
+import { type PropType, ref, useTemplateRef, watch } from 'vue';
 
 type PInputInstance = InstanceType<typeof PInput>;
 
-export default defineComponent({
+defineOptions({
   name: 'PInputSearch',
-  components: {
-    PInput,
-  },
   inheritAttrs: false,
-  props: {
-    modelValue: {
-      type: String,
-      default: '',
-    },
-    size: {
-      type: String as PropType<Size>,
-      default: 'md',
-      validator(value: Size) {
-        return SIZES.includes(value);
-      },
-    },
-    showEnterIcon: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['update:modelValue', 'enter'],
-  data() {
-    return {
-      query: this.modelValue,
-      showEnterIconOnFocus: false,
-    };
-  },
-  computed: {
-    searchIconClasses() {
-      return `search search-${this.size}`;
-    },
-    enterIconClasses() {
-      return `enter enter-${this.size}`;
-    },
-    clearIconClasses() {
-      return `clear clear-${this.size}`;
-    },
+});
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string];
+  enter: [value: string];
+}>();
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: '',
   },
-  watch: {
-    modelValue(value) {
-      this.query = value;
-    },
-    query(value) {
-      this.$emit('update:modelValue', value);
+  size: {
+    type: String as PropType<Size>,
+    default: 'md',
+    validator(value: Size) {
+      return SIZES.includes(value);
     },
   },
-  methods: {
-    clearSearch() {
-      this.query = '';
-      requestAnimationFrame(() => {
-        (this.$refs.searchInput as PInputInstance)?.$el.querySelector('input').focus();
-      });
-    },
-    keydownEnter() {
-      this.$emit('enter', this.query);
-    },
+  showEnterIcon: {
+    type: Boolean,
+    default: false,
   },
 });
+
+// Data
+const searchIconClasses = {
+  sm: 'text-xs top-2.5 left-2',
+  md: 'text-base top-3 left-3',
+  lg: 'text-lg top-4 left-5',
+} as const;
+const clearIconClasses = {
+  sm: 'text-base top-1.5 right-2',
+  md: 'text-xl top-2 right-2.5',
+  lg: 'text-3xl top-[5px] right-2.5',
+} as const;
+const enterIconClasses = {
+  sm: 'bg-[length:1rem_1rem] w-[1rem] h-[1rem] right-7 top-2',
+  md: 'bg-[length:1.5rem_1.5rem] w-[1.5rem] h-[1.5rem] right-9 top-2',
+  lg: 'bg-[length:2rem_2rem] w-[2rem] h-[2rem] right-[46px] top-2',
+} as const;
+const showEnterIconOnFocus = ref(false);
+const searchInput = useTemplateRef<PInputInstance>('searchInput');
+const query = ref(props.modelValue);
+
+// Watchers
+watch(
+  () => props.modelValue,
+  (nV) => {
+    query.value = nV;
+  }
+);
+
+watch(query, (nV) => {
+  emit('update:modelValue', nV);
+});
+
+// Methods
+const clearSearch = () => {
+  query.value = '';
+
+  requestAnimationFrame(() => {
+    searchInput.value?.$el.querySelector('input').focus();
+  });
+};
+
+const keydownEnter = () => {
+  emit('enter', query.value);
+};
 </script>
 
 <style scoped lang="scss">
-.icon.clear {
-  background-image: url('@squirrel/assets/clear-input-faded.svg');
-  background-position: center center;
-  transition: background-image 0.4s;
-}
-.icon.clear-sm {
-  background-size: 0.875rem 0.875rem;
-  width: 0.875rem;
-  height: 0.875rem;
-  bottom: 0.5rem;
-  right: 0.375rem;
-}
-.icon.clear-md {
-  background-size: 1rem 1rem;
-  height: 1rem;
-  width: 1rem;
-  bottom: 0.75rem;
-  right: 0.5rem;
-}
-.icon.clear-lg {
-  background-size: 1rem 1rem;
-  height: 1rem;
-  width: 1rem;
-  bottom: 1rem;
-  right: 0.5rem;
-}
-.icon.clear:hover {
-  background-image: url('@squirrel/assets/clear-input-hovered.svg');
-}
-.icon.search {
-  background-image: url('@squirrel/assets/magnifying-glass.svg');
-}
-.icon.search-sm {
-  background-size: 0.75rem 0.75rem;
-  left: 0.5rem;
-  bottom: 0.625rem;
-  width: 0.75rem;
-  height: 0.75rem;
-}
-.icon.search-md {
-  background-size: 1rem 1rem;
-  width: 1rem;
-  height: 1rem;
-  left: 0.75rem;
-  bottom: 0.75rem;
-}
-.icon.search-lg {
-  background-size: 1rem 1rem;
-  width: 1rem;
-  height: 1rem;
-  left: 1.125rem;
-  bottom: 1rem;
-}
-.icon.enter {
+.enter {
   background-image: url('@squirrel/assets/keyboard-press-enter.svg');
 }
-.icon.enter-sm {
-  background-size: 1rem 1rem;
-  width: 1rem;
-  height: 1rem;
-  right: 1.5rem;
-  bottom: 0.5rem;
-}
-.icon.enter-md {
-  background-size: 1.5rem 1.5rem;
-  width: 1.5rem;
-  height: 1.5rem;
-  right: 2.0625rem;
-  bottom: 0.5rem;
-}
-.icon.enter-lg {
-  background-size: 1.5rem 1.5rem;
-  width: 1.5rem;
-  height: 1.5rem;
-  right: 2.5rem;
-  bottom: 0.75rem;
-}
 </style>

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

@@ -10,7 +10,7 @@
         :size="size"
         type="secondary-outline-blue"
         :disabled="item.disabled"
-        :icon="String(item.icon)"
+        :icon="item.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,

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

@@ -471,7 +471,7 @@ describe('PSelectList.vue', () => {
 
     await wrapper.findByText('ff-a57d-beba44884da2').trigger('click');
 
-    await wrapper.find('button.clear').trigger('click');
+    await wrapper.find('button[aria-label="Clear search input"]').trigger('click');
 
     const newItems = wrapper.findAll('[p-select-list-option-item]');
 

package/squirrel/assets/clear-input-faded.svg

@@ -1,10 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_1634_880)">
-<path d="M16 8C16 6.41775 15.5308 4.87104 14.6518 3.55544C13.7727 2.23985 12.5233 1.21447 11.0615 0.608967C9.59966 0.00346629 7.99113 -0.15496 6.43928 0.153721C4.88743 0.462403 3.46197 1.22433 2.34315 2.34315C1.22433 3.46197 0.462403 4.88743 0.153721 6.43928C-0.15496 7.99113 0.00346629 9.59966 0.608967 11.0615C1.21447 12.5233 2.23985 13.7727 3.55544 14.6518C4.87104 15.5308 6.41775 16 8 16C10.1217 16 12.1566 15.1571 13.6569 13.6569C15.1571 12.1566 16 10.1217 16 8ZM11.14 10.1867C11.2642 10.3116 11.3339 10.4805 11.3339 10.6567C11.3339 10.8328 11.2642 11.0018 11.14 11.1267C11.078 11.1892 11.0043 11.2388 10.9231 11.2726C10.8418 11.3064 10.7547 11.3239 10.6667 11.3239C10.5787 11.3239 10.4915 11.3064 10.4103 11.2726C10.329 11.2388 10.2553 11.1892 10.1933 11.1267L8.12 9.05334C8.08809 9.02429 8.04649 9.0082 8.00334 9.0082C7.96019 9.0082 7.91858 9.02429 7.88667 9.05334L5.81334 11.1267C5.6858 11.2359 5.52175 11.293 5.35397 11.2865C5.18618 11.28 5.02702 11.2104 4.90829 11.0917C4.78957 10.973 4.72001 10.8138 4.71353 10.646C4.70705 10.4783 4.76412 10.3142 4.87334 10.1867L6.94667 8.11334C6.97572 8.08142 6.99181 8.03982 6.99181 7.99667C6.99181 7.95352 6.97572 7.91192 6.94667 7.88L4.87334 5.80667C4.81085 5.7447 4.76126 5.67096 4.72741 5.58972C4.69356 5.50848 4.67614 5.42135 4.67614 5.33334C4.67614 5.24533 4.69356 5.15819 4.72741 5.07695C4.76126 4.99571 4.81085 4.92198 4.87334 4.86C4.99825 4.73584 5.16721 4.66614 5.34334 4.66614C5.51946 4.66614 5.68843 4.73584 5.81334 4.86L7.88667 6.93334C7.90163 6.94928 7.91971 6.96199 7.93977 6.97068C7.95984 6.97936 7.98147 6.98384 8.00334 6.98384C8.0252 6.98384 8.04684 6.97936 8.0669 6.97068C8.08697 6.96199 8.10504 6.94928 8.12 6.93334L10.1933 4.86C10.2555 4.79784 10.3293 4.74854 10.4105 4.7149C10.4917 4.68126 10.5788 4.66394 10.6667 4.66394C10.7546 4.66394 10.8416 4.68126 10.9228 4.7149C11.0041 4.74854 11.0778 4.79784 11.14 4.86C11.2022 4.92216 11.2515 4.99596 11.2851 5.07717C11.3188 5.15839 11.3361 5.24543 11.3361 5.33334C11.3361 5.42124 11.3188 5.50829 11.2851 5.5895C11.2515 5.67072 11.2022 5.74451 11.14 5.80667L9.06667 7.88C9.05073 7.89497 9.03802 7.91304 9.02933 7.93311C9.02065 7.95317 9.01616 7.97481 9.01616 7.99667C9.01616 8.01854 9.02065 8.04017 9.02933 8.06024C9.03802 8.0803 9.05073 8.09837 9.06667 8.11334L11.14 10.1867Z" fill="#A0AEC0"/>
-</g>
-<defs>
-<clipPath id="clip0_1634_880">
-<rect width="16" height="16" fill="white"/>
-</clipPath>
-</defs>
-</svg>

package/squirrel/assets/clear-input-hovered.svg

@@ -1,10 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_1634_896)">
-<path d="M16 8C16 6.41775 15.5308 4.87104 14.6518 3.55544C13.7727 2.23985 12.5233 1.21447 11.0615 0.608967C9.59966 0.00346629 7.99113 -0.15496 6.43928 0.153721C4.88743 0.462403 3.46197 1.22433 2.34315 2.34315C1.22433 3.46197 0.462403 4.88743 0.153721 6.43928C-0.15496 7.99113 0.00346629 9.59966 0.608967 11.0615C1.21447 12.5233 2.23985 13.7727 3.55544 14.6518C4.87104 15.5308 6.41775 16 8 16C10.1217 16 12.1566 15.1571 13.6569 13.6569C15.1571 12.1566 16 10.1217 16 8ZM11.14 10.1867C11.2642 10.3116 11.3339 10.4805 11.3339 10.6567C11.3339 10.8328 11.2642 11.0018 11.14 11.1267C11.078 11.1892 11.0043 11.2388 10.9231 11.2726C10.8418 11.3064 10.7547 11.3239 10.6667 11.3239C10.5787 11.3239 10.4915 11.3064 10.4103 11.2726C10.329 11.2388 10.2553 11.1892 10.1933 11.1267L8.12 9.05334C8.08809 9.02429 8.04649 9.0082 8.00334 9.0082C7.96019 9.0082 7.91858 9.02429 7.88667 9.05334L5.81334 11.1267C5.6858 11.2359 5.52175 11.293 5.35397 11.2865C5.18618 11.28 5.02702 11.2104 4.90829 11.0917C4.78957 10.973 4.72001 10.8138 4.71353 10.646C4.70705 10.4783 4.76412 10.3142 4.87334 10.1867L6.94667 8.11334C6.97572 8.08142 6.99181 8.03982 6.99181 7.99667C6.99181 7.95352 6.97572 7.91192 6.94667 7.88L4.87334 5.80667C4.81085 5.7447 4.76126 5.67096 4.72741 5.58972C4.69356 5.50848 4.67614 5.42135 4.67614 5.33334C4.67614 5.24533 4.69356 5.15819 4.72741 5.07695C4.76126 4.99571 4.81085 4.92198 4.87334 4.86C4.99825 4.73584 5.16721 4.66614 5.34334 4.66614C5.51946 4.66614 5.68843 4.73584 5.81334 4.86L7.88667 6.93334C7.90163 6.94928 7.91971 6.96199 7.93977 6.97068C7.95984 6.97936 7.98147 6.98384 8.00334 6.98384C8.0252 6.98384 8.04684 6.97936 8.0669 6.97068C8.08697 6.96199 8.10504 6.94928 8.12 6.93334L10.1933 4.86C10.2555 4.79784 10.3293 4.74854 10.4105 4.7149C10.4917 4.68126 10.5788 4.66394 10.6667 4.66394C10.7546 4.66394 10.8416 4.68126 10.9228 4.7149C11.0041 4.74854 11.0778 4.79784 11.14 4.86C11.2022 4.92216 11.2515 4.99596 11.2851 5.07717C11.3188 5.15839 11.3361 5.24543 11.3361 5.33334C11.3361 5.42124 11.3188 5.50829 11.2851 5.5895C11.2515 5.67072 11.2022 5.74451 11.14 5.80667L9.06667 7.88C9.05073 7.89497 9.03802 7.91304 9.02933 7.93311C9.02065 7.95317 9.01616 7.97481 9.01616 7.99667C9.01616 8.01854 9.02065 8.04017 9.02933 8.06024C9.03802 8.0803 9.05073 8.09837 9.06667 8.11334L11.14 10.1867Z" fill="#424E6E"/>
-</g>
-<defs>
-<clipPath id="clip0_1634_896">
-<rect width="16" height="16" fill="white"/>
-</clipPath>
-</defs>
-</svg>

package/squirrel/assets/magnifying-glass.svg

@@ -1,10 +0,0 @@
-<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_9127_330342)">
-<path d="M11.705 10.295L9.38501 8.00004C10.0193 7.0497 10.3178 5.91467 10.2331 4.77526C10.1484 3.63584 9.68546 2.5574 8.91771 1.71124C8.14996 0.86508 7.12147 0.299735 5.99563 0.105014C4.8698 -0.0897079 3.71117 0.0973621 2.70383 0.636506C1.69648 1.17565 0.898177 2.03595 0.435738 3.08073C-0.0267015 4.12552 -0.126757 5.29487 0.151467 6.40303C0.429691 7.51119 1.07024 8.4946 1.97135 9.19704C2.87246 9.89948 3.98246 10.2807 5.12501 10.28C6.13901 10.2811 7.13002 9.97801 7.97001 9.41004L10.295 11.735C10.4824 11.9213 10.7358 12.0258 11 12.0258C11.2642 12.0258 11.5176 11.9213 11.705 11.735C11.8018 11.6418 11.8788 11.5299 11.9314 11.4062C11.9839 11.2825 12.011 11.1495 12.011 11.015C12.011 10.8806 11.9839 10.7476 11.9314 10.6239C11.8788 10.5002 11.8018 10.3883 11.705 10.295ZM5.12501 1.50004C5.84176 1.50004 6.54241 1.71251 7.13843 2.11061C7.73445 2.50871 8.19908 3.07456 8.47359 3.73666C8.74811 4.39875 8.82019 5.12736 8.68072 5.8304C8.54125 6.53345 8.1965 7.17937 7.69004 7.68653C7.18357 8.19369 6.53813 8.53934 5.83527 8.67977C5.13242 8.82021 4.40371 8.74913 3.74125 8.47553C3.07878 8.20193 2.51228 7.73808 2.11336 7.14261C1.71444 6.54714 1.501 5.84678 1.50001 5.13004C1.50001 4.16817 1.88177 3.24562 2.56145 2.565C3.24112 1.88439 4.16314 1.50136 5.12501 1.50004Z" fill="#718096"/>
-</g>
-<defs>
-<clipPath id="clip0_9127_330342">
-<rect width="12" height="12" fill="white"/>
-</clipPath>
-</defs>
-</svg>