renusify 3.0.0 → 3.0.1

package/components/avatar/index.vue

@@ -180,8 +180,7 @@ const saveImage = () => {
     overflow: hidden;
     background-color: var(--color-sheet);
 
-    :deep(img),
-    :deep(svg) {
+    img, svg{
       width: 100%;
       height: 100%;
       object-fit: cover;

package/components/button/index.vue

@@ -270,9 +270,9 @@ $btn-sizes: (
     'xs': 1.5rem, // 24px - 6 units
     'sm': 2rem, // 32px - 8 units
     'md': 2.5rem, // 40px - 10 units
-    'lg': 2.75rem, // 44px - 11 units
-    'xl': 3.25rem, // 52px - 13 units
-    'xxl': 3.75rem, // 60px - 15 units
+    'lg': 3rem, // 48px - 12 units
+    'xl': 3.5rem, // 56px - 14 units
+    'xxl': 4rem, // 64px - 16 units
 ) !default;
 
 $btn-font-sizes: (
@@ -313,7 +313,7 @@ $fab-icon-sizes: (
   }
 
   height: $height;
-  padding: 0 math.div($height, 2);
+  padding: 0 math.div($height, 3);
   font-size: $font-size;
   border-radius: math.div($height, 10);
 }

package/components/confirm/index.vue

@@ -20,16 +20,16 @@
         </r-col>
       </r-row>
       <r-row class="h-end no-gutters">
-        <r-btn :loading="this.loading"
+        <r-btn :loading="loading"
                @click.stop="cancel"
                class="color-error-text mx-1"
                outlined
                rounded
-               v-if="!this.loading">
+               v-if="!loading">
           {{ cancelText || $t('cancel', 'renusify') }}
         </r-btn>
         <r-btn :disabled="hard&&!valid"
-               :loading="this.loading"
+               :loading="loading"
                @click.stop="confirm"
                class="color-success-text"
                outlined

package/components/form/checkboxInput/index.vue

@@ -1,10 +1,10 @@
 <template>
   <r-input :class="{
         [`${$r.prefix}checkbox`]:true,
-        'checkbox-readonly': this.readonly,
+        'checkbox-readonly': readonly,
     }" :modelValue="lazyValue" hide>
     <template v-slot="{isRequired}">
-      <div class="d-flex v-end">
+      <div class="checkbox-holder">
             <span class="checkbox-input" :class="{
                 [size]:true,
                    'br-circle':rounded,
@@ -102,6 +102,10 @@ const toggle = () => {
   width: 100%;
   cursor: pointer;
 
+  .checkbox-holder{
+    display: flex;
+    align-items: center;
+  }
   .checkbox-label {
     color: var(--color-on-sheet);
   }

package/components/form/fileInput/index.vue

@@ -99,7 +99,7 @@ const props = defineProps({
 
   /**
    * Additional metadata fields for files
-   * @type {Array}
+   * @type {Array[String]}
    */
   meta: Array,
 

package/components/form/fileInput/single.vue

@@ -3,14 +3,15 @@
     <div class="file-holder text-center">
       <div v-if="file || modelValue" class="image-canvas">
         <r-btn class="image-close color-white" icon size="xs">
-          <r-icon @click.prevent="fileDelete()" class="color-error-text" v-html="$r.icons.delete"></r-icon>
+          <r-icon @click.prevent="fileDelete()" class="color-error-text"
+                  v-html="$r.icons.delete"></r-icon>
         </r-btn>
         <r-progress-circle
-            :indeterminate="false"
-            :model-value="uploadPercentage"
-            :width="2"
-            class="image-progress"
-            size="50"
+          :indeterminate="false"
+          :model-value="uploadPercentage"
+          :width="2"
+          class="image-progress"
+          size="50"
         >
           {{ `% ${uploadPercentage}` }}
         </r-progress-circle>
@@ -25,48 +26,48 @@
       </div>
       <div class="file-meta pa-1" v-if="meta && uploadPercentage===100">
         <r-text-input
-            v-for="(m,k) in meta"
-            :key="k"
-            v-model="metaList[m]"
-            :label="$t(m,'renusify')"
-            :rules="metaRequired?['required']:[]"
-            @update:model-value="emitFileLink"
+          v-for="(m,k) in meta"
+          :key="k"
+          v-model="metaList[m]"
+          :label="$t(m,'renusify')"
+          :rules="metaRequired?['required']:[]"
+          @update:model-value="emitFileLink"
         ></r-text-input>
       </div>
     </div>
 
     <r-icon
-        v-if="showAdd"
-        class="pick-icon cursor-pointer d-flex h-center v-center color-one-text"
-        height="100"
-        width="100"
-        v-html="$r.icons.plus"
-        @click.prevent.stop="pickFile"
+      v-if="showAdd"
+      class="pick-icon cursor-pointer d-flex h-center v-center color-one-text"
+      height="100"
+      width="100"
+      v-html="$r.icons.plus"
+      @click.prevent.stop="pickFile"
     ></r-icon>
     <input
-        v-if="showFile"
-        ref="fileInput"
-        :accept="accept"
-        style="display: none"
-        type="file"
-        @change="addFile"
+      v-if="showFile"
+      ref="fileInput"
+      :accept="accept"
+      style="display: none"
+      type="file"
+      @change="addFile"
     >
     <r-modal v-model="showCrop" max-width="300px" no-close-btn>
       <r-cropper
-          v-if="wPH && file"
-          :img-src="file"
-          :select-img="false"
-          :w-p-h="wPH || 1"
-          get-blob
-          show-cropped
-          @cropped="handleCropped"
+        v-if="wPH && file"
+        :img-src="file"
+        :select-img="false"
+        :w-p-h="wPH || 1"
+        get-blob
+        show-cropped
+        @cropped="handleCropped"
       ></r-cropper>
     </r-modal>
   </div>
 </template>
 
 <script setup>
-import {ref, computed, watch, onMounted, nextTick, inject} from 'vue'
+import { ref, computed, watch, onMounted, nextTick, inject } from 'vue'
 
 const props = defineProps({
   accept: {
@@ -106,6 +107,7 @@ const file = ref(null)
 const file_type = ref(null)
 const uploadPercentage = ref(0)
 const $axios = inject('axios')
+const $helper = inject('renusify').$helper
 let CancelTokenSource = null
 
 // Computed properties
@@ -200,7 +202,7 @@ const checkSave = () => {
     // Calculate allowed aspect ratios
     const allowedWPH = calculateAllowedWPH(props.wPH)
 
-    img.onload = function () {
+    img.onload = function() {
       const currentWPH = parseFloat((this.width / this.height).toFixed(4))
 
       if (!allowedWPH.includes(currentWPH)) {
@@ -287,8 +289,8 @@ const saveImage = async () => {
       onUploadProgress: (progressEvent) => {
         if (progressEvent.total) {
           uploadPercentage.value = Math.min(
-              parseInt(Math.floor((progressEvent.loaded * 100) / progressEvent.total)),
-              98
+            parseInt(Math.floor((progressEvent.loaded * 100) / progressEvent.total)),
+            98
           )
         }
       },
@@ -311,7 +313,7 @@ const deleteImage = async () => {
 
   try {
     const response = await $axios.delete(props.uploadLink, {
-      data: {link: fileLink.value},
+      data: { link: fileLink.value },
       headers: props.headers
     })
     return response
@@ -329,7 +331,7 @@ const handleCropped = (croppedFile) => {
 
 const setValue = (value) => {
   if (value) {
-    const fixUrl = window.$helper?.fix_url || ((url) => url)
+    const fixUrl = $helper?.fix_url || ((url) => url)
     fileLink.value = props.meta ? fixUrl(value['url']) : fixUrl(value)
     metaList.value = props.meta ? value['meta'] : {}
     showAdd.value = false
@@ -350,7 +352,7 @@ const getUrl = (value) => {
 
 const emitFileLink = () => {
   if (props.meta) {
-    emit('file-link', {'url': fileLink.value, 'meta': metaList.value})
+    emit('file-link', { 'url': fileLink.value, 'meta': metaList.value })
   } else {
     emit('file-link', fileLink.value)
   }
@@ -358,9 +360,12 @@ const emitFileLink = () => {
 }
 
 // Watch for modelValue changes
-watch(() => props.modelValue, (newVal) => {
-  setValue(newVal)
-}, {immediate: true})
+
+watch(() => props.modelValue, (newVal, oldVal) => {
+  if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
+    setValue(newVal)
+  }
+}, { immediate: true })
 
 // Initialize
 onMounted(() => {
@@ -372,4 +377,4 @@ defineExpose({
   fileDelete,
   pickFile
 })
-</script>
+</script>

package/components/form/telInput/index.vue

@@ -146,7 +146,7 @@ const emitValue = () => {
   nextTick(() => {
     tel.value.phone = tel.value.phone.replaceAll(' ', '')
     if (tel.value.phone.startsWith('0')) {
-      tel.value.phone = tel.value.phone.substring(1, this.tel.phone.length)
+      tel.value.phone = tel.value.phone.substring(1, tel.value.phone.length)
       emit('update:modelValue', tel.value.country_code + ' ' + tel.value.phone)
     } else {
       emit('update:modelValue', tel.value.country_code + ' ' + tel.value.phone)

package/components/img/index.vue

@@ -256,13 +256,14 @@ const getSize = () => {
   return false
 }
 
-const activate = () => {
+const activate = (n=0) => {
+  if (n>10)return;
   getSize()
   if (size.value.width !== 0 || size.value.height) {
     load.value = true
   } else {
     nextTick(() => {
-      activate()
+      activate(n++)
     })
   }
 }

package/components/infinite/index.js

@@ -3,4 +3,5 @@ export * as l_card from '../card/index.js'
 export * as l_container from '../container/index.js'
 export * as l_row from '../container/row.js'
 export * as l_col from '../container/col.js'
-export * as l_switch from '../form/switchInput/index.js'
+export * as l_switch from '../form/switchInput/index.js'
+export * as d_scroll from '../../directive/scroll/index.js'

package/components/infinite/index.vue

@@ -1,20 +1,21 @@
 <template>
   <r-container :class="[$r.prefix+'infinite']">
     <div ref="chat"
-         v-scroll.[modifier]="onScroll"
+         v-scroll="{handler:onScroll,target:target}"
          :style="{'max-height': height,'height': height}"
-         class="infinite-page-container">
+         class="infinite-page-container" :class="{'overflow-div':height}">
       <transition-group :class="{'flex-column-reverse':isChat}"
                         :name="isChat?'slide-up':'slide-down'"
-                        class="row" tag="div">
+                        class="row"
+                        tag="div">
         <!-- Default slot for contents. Provide items, total props -->
         <slot :items="datacollection" :total="total">{{ datacollection }}</slot>
+        <r-col class="col-12" key="loading">
+          <r-progress-line color="color-two"
+                           v-show="loading"></r-progress-line>
+        </r-col>
       </transition-group>
     </div>
-    <r-progress-line v-show="loading"
-                     color="color-two"
-
-    ></r-progress-line>
     <div v-if="noItem"
          class="text-center title-2"
     >{{ noItemMsg }}
@@ -22,7 +23,16 @@
   </r-container>
 </template>
 <script setup>
-import {ref, computed, onMounted, onUnmounted, onActivated, onDeactivated, watch, inject} from 'vue'
+import {
+  ref,
+  computed,
+  onMounted,
+  onUnmounted,
+  onActivated,
+  onDeactivated,
+  watch,
+  inject,nextTick
+} from 'vue'
 
 const props = defineProps({
   /**
@@ -125,7 +135,7 @@ const loading = ref(false)
 const total = ref(0)
 const noItem = ref(false)
 
-const modifier = computed(() => props.height ? 'div' : 'window')
+const target = computed(() => props.height ? false : 'window')
 
 // Methods
 const onScroll = (e) => {
@@ -145,13 +155,13 @@ const onScroll = (e) => {
       }
     }
   } else {
-    if (active.value && document.body.offsetHeight < ((window.innerHeight + window.scrollY) + props.distanceLoad)) {
-      if (!loading.value) {
-        page.value++
-        if (datacollection.value.length < total.value) {
-          get()
-        }
-      }
+    if (active.value &&
+        (document.body.offsetHeight < ((window.innerHeight + window.scrollY) + props.distanceLoad)) &&
+        !loading.value &&
+        (datacollection.value.length < total.value)
+    ) {
+      page.value++
+      get()
     }
   }
 }
@@ -161,15 +171,21 @@ const get = () => {
   loading.value = true
   noItem.value = false
 
-  const params = {page: page.value}
+  let end = true
+  let params = {'page': page.value}
+
+  if (props.live === true) {
+    params = {'page': 1}
+    end = false
+  }
   if (typeof props.query === 'object') {
     Object.assign(params, props.query)
   }
 
   $axios.get(props.url, {params, headers: props.headers})
-      .then((res) => {
-        push(res.data.data)
-        total.value = res.data.total
+      .then(({data}) => {
+        push(data.data, end)
+        total.value = data.total
         if (total.value === 0) {
           noItem.value = true
         }
@@ -180,27 +196,48 @@ const get = () => {
       })
 }
 
-const push = (data) => {
-  const lng = data.length
-  for (let key = 0; key < lng; key++) {
-    datacollection.value.push(data[key])
-  }
-  let el = chat.value
-  let can = false
-  if (isChat.value) {
-    can = el.scrollHeight <= el.scrollTop + el.clientHeight
+const push = (data, end = false) => {
+  if (!end) {
+    let d = data
+    const lng = datacollection.value.length
+    for (let key = 0; key < lng; key++) {
+      if (key <= data.length) {
+        if ($helper.searchArray(d, '_id', datacollection.value[key]['_id']) === false) {
+          d.push(datacollection.value[key])
+        }
+      } else {
+        d.push(datacollection.value[key])
+      }
+    }
+    datacollection.value = d
   } else {
-    can = el.scrollTop === 0
+    let d = datacollection.value
+    const lng = data.length
+    for (let key = 0; key < lng; key++) {
+      if ($helper.searchArray(d, '_id', data[key]['_id']) === false) {
+        d.push(data[key])
+      }
+    }
+    datacollection.value = d
   }
-  if (props.isChat) {
+  nextTick(() => {
+    let el = chat.value
+    let can = false
+    if (props.isChat) {
+      can = el.scrollHeight <= el.scrollTop + el.clientHeight
+    } else {
+      can = el.scrollTop === 0
+    }
 
-    if (first.value || can) {
-      el.scrollTop = el.scrollHeight;
-      first.value = false
+    if (props.isChat) {
+      if (first.value || can) {
+        el.scrollTop = el.scrollHeight
+        first.value = false
+      }
+    } else if (can) {
+      el.scrollTop = 0
     }
-  } else if (can) {
-    el.scrollTop = 0;
-  }
+  })
 }
 
 let liveInterval = null
@@ -231,6 +268,7 @@ onDeactivated(() => {
 
 watch(() => props.live, (newValue) => {
   if (newValue) {
+    get()
     setupLiveUpdates()
   } else {
     clearInterval(liveInterval)
@@ -248,7 +286,11 @@ onUnmounted(() => {
 @use "../../style" as *;
 
 .#{$prefix}infinite {
-  margin-bottom: 100px;
-  width: 100%
+  width: 100%;
+
+  .overflow-div {
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
 }
 </style>

package/components/menu/index.vue

@@ -1,13 +1,15 @@
 <template>
   <div ref="menuRef" v-click-outside="close" :class="$r.prefix+'menu'">
     <div class="d-flex h-start flex-row v-center">
-      <span class="menu-label" v-if="label" @click.prevent="open">{{ label }}</span>
+      <slot name="label">
+        <span class="menu-label" v-if="label" @click.prevent="open">{{ label }}</span>
+      </slot>
       <transition name="fade" mode="out-in">
         <!-- Header Navigation Menu Icons -->
-        <r-btn icon text v-if="show" key="on" @click.prevent="close">
+        <r-btn icon text v-if="show" key="on" size="sm" @click.prevent="close">
           <r-icon v-html="$r.icons.chevron_up"></r-icon>
         </r-btn>
-        <r-btn icon text v-else key="off" @click.prevent="open">
+        <r-btn icon text v-else key="off" size="sm" @click.prevent="open">
           <r-icon v-html="icon||$r.icons.chevron_down"></r-icon>
         </r-btn>
 

package/components/slider/index.vue

@@ -48,7 +48,7 @@
 </template>
 
 <script setup>
-import {ref, computed, onMounted, onUnmounted} from 'vue'
+import {ref, computed, onMounted, onUnmounted,watch} from 'vue'
 
 /**
  * @example // Slider usage
@@ -338,6 +338,7 @@ const goToSlide = (i) => {
   emit('index', currentIndex.value)
 }
 
+watch(()=>props.slides,()=>{init()})
 onMounted(() => {
   init()
 })

package/components/swiper/index.vue

@@ -2,13 +2,13 @@
   <div :class="`${$r.prefix}swiper`"
        ref="swiperRef"
   >
-    <!-- @slot Left navigation slot
-     @binding {Function} left - Function to navigate left/previous -->
-    <slot name="left" :left="left"></slot>
+    <!-- @slot Previous navigation slot
+     @binding {Function} previous - Function to navigate previous -->
+    <slot name="previous" :previous="previous"></slot>
 
-    <!-- @slot Right navigation slot
-     @binding {Function} right - Function to navigate right/next -->
-    <slot name="right" :right="right"></slot>
+    <!-- @slot Next navigation slot
+     @binding {Function} next - Function to navigate next -->
+    <slot name="next" :next="next"></slot>
 
     <div class="swiper-container"
          ref="containerRef"
@@ -49,7 +49,7 @@
 </template>
 
 <script setup>
-import {ref, computed, onMounted, onUnmounted, inject, nextTick, watch} from 'vue'
+import { ref, computed, onMounted, onUnmounted, inject, nextTick, watch } from 'vue'
 
 /**
  * @example // Swiper usage
@@ -114,7 +114,7 @@ const props = defineProps({
   numShow: [Number, Object]
 })
 
-const {$r} = inject('renusify')
+const { $r } = inject('renusify')
 
 const timer = ref(null)
 const inMove = ref(false)
@@ -138,18 +138,6 @@ const itemWidth = computed(() => {
 })
 
 
-const canGoNext = computed(() => {
-  const r = $r.rtl ? 1 : -1
-  const maxX = (containerRef.value?.scrollWidth - swiperRef.value?.offsetWidth) / r
-  return x.value * r < maxX
-})
-
-const canGoPrev = computed(() => {
-  const r = $r.rtl ? 1 : -1
-  return x.value * r > 0
-})
-
-
 /**
  * Navigates to a specific slide
  * @param {Number} n - Slide number (1-indexed)
@@ -165,41 +153,19 @@ const goToSlide = (n) => {
 }
 
 /**
- * Navigates to the next/right slide
- * @param {Number|null} customX - Custom distance to move in pixels
+ * Navigates to the next slide
  */
-const right = (customX = null) => {
-  if (!canGoNext.value) return
-
-  const moveX = customX || itemWidth.value || 200
-  clearTimeout(timer.value)
-
-  timer.value = nextTick(() => {
-    inMove.value = true
-    const direction = $r.rtl ? 1 : -1
-    x.value = prePosition.value - (moveX * direction)
-    end()
-    clearTimeout(timer.value)
-  })
+const next = () => {
+  if(currentSlide.value+1>slides.value)return
+  goToSlide(currentSlide.value+1)
 }
 
 /**
- * Navigates to the previous/left slide
- * @param {Number|null} customX - Custom distance to move in pixels
+ * Navigates to the previous slide
  */
-const left = (customX = null) => {
-  if (!canGoPrev.value) return
-
-  const moveX = customX || itemWidth.value || 200
-  clearTimeout(timer.value)
-
-  timer.value = setTimeout(() => {
-    inMove.value = true
-    const direction = $r.rtl ? 1 : -1
-    x.value = prePosition.value + (moveX * direction)
-    end()
-    clearTimeout(timer.value)
-  }, 50)
+const previous = () => {
+  if(currentSlide.value===1)return
+  goToSlide(currentSlide.value-1)
 }
 
 /**
@@ -293,7 +259,22 @@ watch(() => props.items, () => {
   currentSlide.value = 1
 
   handleResize()
-}, {deep: true})
+}, { deep: true })
+
+defineExpose({
+  /**
+   * Navigates to the previous slide
+   */
+  previous,
+  /**
+   * Navigates to the next slide
+   */
+  next,
+  /**
+   * Return Current Slide
+   */
+  currentSlide
+})
 </script>
 
 <style lang="scss">

package/directive/scroll/index.js

@@ -5,7 +5,7 @@
  *     <div class="scroll-areas">
  *       <div class="scroll-area">
  *         <h3>Window Scroll</h3>
- *         <div v-scroll.window="handleWindowScroll" class="scroll-content window-scroll">
+ *         <div v-scroll="{handler:handleWindowScroll,target:'window'}" class="scroll-content window-scroll">
  *           <div class="scroll-info">
  *             <div class="info-item">
  *               <span>Scroll Top:</span>
@@ -242,35 +242,39 @@
  * }
  * </style>
  * */
-function mounted (el, binding) {
-  const callback = binding.value
-  const options = binding.options || {
-    passive: true
-  }
+function mounted(el, binding) {
+    let callback = binding.value
+    if (typeof binding.value === 'object') {
+        binding = binding.value
+        callback = binding.handler
+    }
+    const options = binding.options || {
+        passive: true
+    }
     let target = el
-    if (binding.modifiers.window) {
+    if (binding.target === 'window') {
         target = window
-    } else if (binding.arg) {
-        target = document.querySelector(binding.arg)
+    } else if (binding.target) {
+        target = document.querySelector(binding.target)
+    }
+    if (!target) return
+    target.addEventListener('scroll', callback, options)
+    el._onScroll = {
+        callback,
+        options,
+        target
     }
-  if (!target) return
-  target.addEventListener('scroll', callback, options)
-  el._onScroll = {
-    callback,
-    options,
-    target
-  }
 }
 
-function unmounted (el) {
-  if (!el._onScroll) return
-  const {
-    callback,
-    options,
-    target
-  } = el._onScroll
-  target.removeEventListener('scroll', callback, options)
-  delete el._onScroll
+function unmounted(el) {
+    if (!el._onScroll) return
+    const {
+        callback,
+        options,
+        target
+    } = el._onScroll
+    target.removeEventListener('scroll', callback, options)
+    delete el._onScroll
 }
 
 export default {

package/index.js

@@ -18,38 +18,28 @@ function breakpoint() {
     const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
     const height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
     const points = {
-        'xs': 0,
-        'sm': 576,
+        'sm': 0,
         'md': 768,
-        'lg': 1024,
-        'xl': 1440
+        'lg': 1200
     }
     let data = {
         points: points,
-        xsOnly: width < points.sm,
-        smOnly: points.sm <= width && width < points.md,
-        smAndDown: width < points.md,
-        smAndUp: width >= points.sm,
+        smOnly: width < points.md,
         mdOnly: points.md <= width && width < points.lg,
         mdAndDown: width < points.lg,
         mdAndUp: width >= points.md,
         lgOnly: points.lg <= width && width < points.xl,
         lgAndDown: width < points.xl,
         lgAndUp: width >= points.lg,
-        xlOnly: points.xl <= width,
         width: width,
         height: height
     }
-    if (data.xsOnly) {
-        data.name = 'xs'
-    } else if (data.smOnly) {
+    if (data.smOnly) {
         data.name = 'sm'
     } else if (data.mdOnly) {
         data.name = 'md'
     } else if (data.lgOnly) {
         data.name = 'lg'
-    } else if (data.xlOnly) {
-        data.name = 'xl'
     }
     return data
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "renusify",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "Vue3 Framework",
   "keywords": [
     "vuejs",

package/style/variables/base.scss

@@ -25,10 +25,9 @@ $borders: (
 $cursor: ('pointer', 'auto', 'grab', 'grabbing') !default;
 
 $grid-breakpoints: (
-        'xs': 0,
-        'sm': 36rem, // Small devices (landscape phones, 576px)
-        'md': 48rem, // Medium devices (tablets, 768px)
-        'lg': 64rem, // Large devices (desktops, 1024px)
+        'sm': 0,
+        'md': 48rem, // Small devices (tablets, 768px)
+        'lg': 75rem, // Large devices (laptops, 1200px)
 ) !default;
 
 $base-font-size: 1rem;
@@ -39,10 +38,9 @@ $grid-columns: 12 !default;
 $container-padding-x: math.div($grid-gutter, 2) !default;
 
 $grid-gutters: (
-        'xs': math.div($grid-gutter, 12),
-        'sm': math.div($grid-gutter, 6),
+        'sm': math.div($grid-gutter, 12),
         'md': math.div($grid-gutter, 3),
-        'lg':$grid-gutter
+        'lg':$grid-gutter,
 ) !default;
 
 $box-shadows: (
@@ -56,8 +54,8 @@ $box-shadows: (
 ) !default;
 
 $container-max-widths: (
-        'md': map.get($grid-breakpoints, 'md')- 3rem,
-        'lg': map.get($grid-breakpoints, 'lg')- 4rem
+        'md': map.get($grid-breakpoints, 'md') - 3rem,
+        'lg': map.get($grid-breakpoints, 'lg') - 4rem
 ) !default;
 
 $font-weights: (

package/tools/icons.js

@@ -23,7 +23,7 @@ export let Icons = {
     'attachment': '<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M7.5 18A5.5 5.5 0 0 1 2 12.5A5.5 5.5 0 0 1 7.5 7H18a4 4 0 0 1 4 4a4 4 0 0 1-4 4H9.5A2.5 2.5 0 0 1 7 12.5A2.5 2.5 0 0 1 9.5 10H17v1.5H9.5a1 1 0 0 0-1 1a1 1 0 0 0 1 1H18a2.5 2.5 0 0 0 2.5-2.5A2.5 2.5 0 0 0 18 8.5H7.5a4 4 0 0 0-4 4a4 4 0 0 0 4 4H17V18H7.5Z"/></svg>',
     'send': '<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m2 21l21-9L2 3v7l15 2l-15 2v7Z"/></svg>',
     'sticker': '<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M5.5 2C3.56 2 2 3.56 2 5.5v13C2 20.44 3.56 22 5.5 22H16l6-6V5.5C22 3.56 20.44 2 18.5 2h-13m.25 2h12.5A1.75 1.75 0 0 1 20 5.75V15h-1.5c-1.94 0-3.5 1.56-3.5 3.5V20H5.75A1.75 1.75 0 0 1 4 18.25V5.75A1.75 1.75 0 0 1 5.75 4m8.69 2.77c-.16 0-.32.02-.47.06c-.94.26-1.47 1.22-1.23 2.17c.05.15.12.3.21.44l3.23-.88c0-.17-.02-.34-.06-.51c-.21-.75-.9-1.28-1.68-1.28M8.17 8.5c-.17 0-.32 0-.47.05c-.93.26-1.48 1.22-1.23 2.15c.03.16.12.3.21.46l3.23-.88c0-.17-.02-.34-.06-.5A1.72 1.72 0 0 0 8.17 8.5m8.55 2.76l-9.13 2.51a5.266 5.266 0 0 0 5.36 1.64a5.273 5.273 0 0 0 3.77-4.15Z"/></svg>',
-    'search': '<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5l-1.5 1.5l-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16A6.5 6.5 0 0 1 3 9.5A6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14S14 12 14 9.5S12 5 9.5 5Z"/></svg>',
+    'search': '<svg width="24" height="24" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.25 15.5625C4.215 15.5625 0.9375 12.285 0.9375 8.25C0.9375 4.215 4.215 0.9375 8.25 0.9375C12.285 0.9375 15.5625 4.215 15.5625 8.25C15.5625 12.285 12.285 15.5625 8.25 15.5625ZM8.25 2.0625C4.8375 2.0625 2.0625 4.8375 2.0625 8.25C2.0625 11.6625 4.8375 14.4375 8.25 14.4375C11.6625 14.4375 14.4375 11.6625 14.4375 8.25C14.4375 4.8375 11.6625 2.0625 8.25 2.0625Z" fill="currentColor"/><path d="M15.12 17.0925C15.06 17.0925 15 17.085 14.9475 17.0775C14.595 17.0325 13.9575 16.7925 13.5975 15.72C13.41 15.1575 13.4775 14.595 13.785 14.1675C14.0925 13.74 14.61 13.5 15.2025 13.5C15.9675 13.5 16.5675 13.7925 16.8375 14.31C17.1075 14.8275 17.0325 15.4875 16.605 16.125C16.0725 16.9275 15.495 17.0925 15.12 17.0925ZM14.67 15.3675C14.7975 15.7575 14.9775 15.9525 15.0975 15.9675C15.2175 15.9825 15.4425 15.84 15.675 15.5025C15.8925 15.18 15.9075 14.9475 15.855 14.8425C15.8025 14.7375 15.5925 14.625 15.2025 14.625C14.97 14.625 14.7975 14.7 14.7 14.8275C14.61 14.955 14.595 15.15 14.67 15.3675Z" fill="currentColor"/></svg>',
     'drag': '<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M7 19v-2h2v2H7m4 0v-2h2v2h-2m4 0v-2h2v2h-2m-8-4v-2h2v2H7m4 0v-2h2v2h-2m4 0v-2h2v2h-2m-8-4V9h2v2H7m4 0V9h2v2h-2m4 0V9h2v2h-2M7 7V5h2v2H7m4 0V5h2v2h-2m4 0V5h2v2h-2Z"/></svg>',
     'setting': '<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M19.14 12.94c.04-.3.06-.61.06-.94c0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.488.488 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6s3.6 1.62 3.6 3.6s-1.62 3.6-3.6 3.6z"/></svg>',
     'star': '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2L9.19 8.62L2 9.24l5.45 4.73L5.82 21L12 17.27Z"/></svg>',