@pequity/squirrel 6.0.13 → 6.0.14

package/dist/cjs/index.js

@@ -13,13 +13,12 @@ const pDrawer = require("./p-drawer.js");
 const pDropdown = require("./p-dropdown.js");
 const pDropdownSelect_vue_vue_type_script_setup_true_lang = require("./chunks/p-dropdown-select.js");
 const vue = require("vue");
-const pFileUpload$1 = require("./p-file-upload.js");
+const pFileUpload = require("./p-file-upload.js");
+const pIcon_vue_vue_type_script_setup_true_lang = require("./chunks/p-icon.js");
 const useInputClasses = require("./useInputClasses.js");
 const lodashEs = require("lodash-es");
 const vueToastification = require("vue-toastification");
-const _pluginVue_exportHelper = require("./chunks/_plugin-vue_export-helper.js");
 const pIcon = require("./p-icon.js");
-const pIcon_vue_vue_type_script_setup_true_lang = require("./chunks/p-icon.js");
 const pInfoIcon_vue_vue_type_script_setup_true_lang = require("./chunks/p-info-icon.js");
 const pInlineDatePicker_vue_vue_type_script_setup_true_lang = require("./chunks/p-inline-date-picker.js");
 const pInput = require("./p-input.js");
@@ -46,6 +45,7 @@ const pSkeletonLoader = require("./p-skeleton-loader.js");
 const pTable$1 = require("./p-table.js");
 const usePTableColResize = require("./usePTableColResize.js");
 const pTableHeaderCell = require("./p-table-header-cell.js");
+const _pluginVue_exportHelper = require("./chunks/_plugin-vue_export-helper.js");
 const usePTableRowVirtualizer = require("./usePTableRowVirtualizer.js");
 const pTableFilterIcon = require("./p-table-filter-icon.js");
 const pTableLoader_vue_vue_type_script_setup_true_lang = require("./chunks/p-table-loader.js");
@@ -66,8 +66,6 @@ const pagination = require("./pagination.js");
 const sanitization = require("./sanitization.js");
 const tailwind = require("./tailwind.js");
 const index = require("./chunks/index.js");
-const _imports_0$1 = "data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M5.8335%206.25016L10.0002%202.0835L14.1668%206.25016'%20stroke='%23767189'%20stroke-width='1.25'%20/%3e%3cpath%20d='M10%202.0835V13.7502'%20stroke='%23767189'%20stroke-width='1.25'%20/%3e%3cpath%20d='M2.91675%2015V18.3333H17.0834V15'%20stroke='%23767189'%20stroke-width='1.25'%20/%3e%3c/svg%3e";
-const _imports_1$1 = "data:image/svg+xml,%3csvg%20width='48'%20height='48'%20viewBox='0%200%2048%2048'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M33%2012H14V44H42V21L33%2012Z'%20stroke='%231A123B'%20stroke-width='3'%20/%3e%3cpath%20d='M9%2036H6V4H25L28%207'%20stroke='%231A123B'%20stroke-width='3'%20/%3e%3cpath%20d='M37%2030H19M28%2021V39'%20stroke='%231A123B'%20stroke-width='3'%20/%3e%3c/svg%3e";
 const _hoisted_1$3 = ["data-has-error"];
 const _hoisted_2$3 = {
   key: 0,
@@ -182,7 +180,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
         }
         if (props.fileTypes.length === 0) ;
         else {
-          const extension = pFileUpload$1.getFileExtension(fileName) ? `.${pFileUpload$1.getFileExtension(fileName)}` : "";
+          const extension = pFileUpload.getFileExtension(fileName) ? `.${pFileUpload.getFileExtension(fileName)}` : "";
           const isValidExtension = extension ? props.fileTypes.includes(extension) : false;
           if (!isValidExtension) {
             toast.error(`${extension} files are not allowed.`);
@@ -190,7 +188,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
           }
         }
         if ((file.size || 0) > props.maxSizeInBytes) {
-          toast.error(`File size of ${fileName} exceeds ${pFileUpload$1.formatBytes(props.maxSizeInBytes)}.`);
+          toast.error(`File size of ${fileName} exceeds ${pFileUpload.formatBytes(props.maxSizeInBytes)}.`);
           continue;
         }
         res.push(file);
@@ -259,19 +257,21 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
         }, [
           !maxFilesReached.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$3, [
             !isDraggingOver.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$3, [
-              _cache[4] || (_cache[4] = vue.createElementVNode("img", {
-                src: _imports_0$1,
-                class: "h-8 w-8"
-              }, null, -1)),
+              vue.createVNode(pIcon_vue_vue_type_script_setup_true_lang._sfc_main, {
+                icon: "upload",
+                width: "32",
+                class: "text-p-gray-50"
+              }),
               vue.createElementVNode("div", _hoisted_4$3, [
                 _cache[3] || (_cache[3] = vue.createTextVNode(" Drag or ")),
                 vue.createElementVNode("span", _hoisted_5$3, "select " + vue.toDisplayString(fileWord.value), 1)
               ])
             ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$3, [
-              _cache[5] || (_cache[5] = vue.createElementVNode("img", {
-                src: _imports_1$1,
-                class: "h-8 w-8"
-              }, null, -1)),
+              vue.createVNode(pIcon_vue_vue_type_script_setup_true_lang._sfc_main, {
+                icon: "tdesign:drag-drop",
+                width: "32",
+                class: "text-primary"
+              }),
               vue.createElementVNode("div", _hoisted_7, "Drop " + vue.toDisplayString(fileWord.value), 1)
             ])),
             vue.createElementVNode("input", {
@@ -304,9 +304,15 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
                   title: file.name
                 }, vue.toDisplayString(file.name), 9, _hoisted_10),
                 vue.createElementVNode("button", {
-                  class: "bg-file-upload-x-icon h-4 w-4 shrink-0 cursor-pointer",
+                  class: "h-5 shrink-0 cursor-pointer overflow-hidden",
                   onClick: vue.withModifiers(($event) => removeFile(index2), ["stop"])
-                }, null, 8, _hoisted_11)
+                }, [
+                  vue.createVNode(pIcon_vue_vue_type_script_setup_true_lang._sfc_main, {
+                    icon: "weui:close2-outlined",
+                    width: "20",
+                    class: "text-p-gray-60 hover:text-on-error"
+                  })
+                ], 8, _hoisted_11)
               ], 2);
             }), 128))
           ])
@@ -316,12 +322,11 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
         }, vue.toDisplayString(__props.errorMsg), 3), [
           [vue.vShow, __props.errorMsg]
         ]),
-        vue.createElementVNode("div", _hoisted_12, vue.toDisplayString(__props.multiple ? `Max ${__props.maxNumberOfFiles}` : "One") + " " + vue.toDisplayString(acceptFileTypes.value) + " " + vue.toDisplayString(__props.multiple ? "files" : "file") + " with size less than " + vue.toDisplayString(vue.unref(pFileUpload$1.formatBytes)(__props.maxSizeInBytes)) + " " + vue.toDisplayString(__props.multiple ? "each" : ""), 1)
+        vue.createElementVNode("div", _hoisted_12, vue.toDisplayString(__props.multiple ? `Max ${__props.maxNumberOfFiles}` : "One") + " " + vue.toDisplayString(acceptFileTypes.value) + " " + vue.toDisplayString(__props.multiple ? "files" : "file") + " with size less than " + vue.toDisplayString(vue.unref(pFileUpload.formatBytes)(__props.maxSizeInBytes)) + " " + vue.toDisplayString(__props.multiple ? "each" : ""), 1)
       ], 10, _hoisted_1$3);
     };
   }
 });
-const pFileUpload = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$3, [["__scopeId", "data-v-216025be"]]);
 const _hoisted_1$2 = ["data-has-error"];
 const _hoisted_2$2 = { class: "text-p-purple-60" };
 const _hoisted_3$2 = { class: "flex flex-row" };
@@ -966,9 +971,9 @@ exports.PDatePicker = pDatePicker_vue_vue_type_script_setup_true_lang._sfc_main;
 exports.PDrawer = pDrawer;
 exports.PDropdown = pDropdown;
 exports.PDropdownSelect = pDropdownSelect_vue_vue_type_script_setup_true_lang._sfc_main;
+exports.PIcon = pIcon_vue_vue_type_script_setup_true_lang._sfc_main;
 exports.useInputClasses = useInputClasses.useInputClasses;
 exports.P_ICON_ALIASES = pIcon.P_ICON_ALIASES;
-exports.PIcon = pIcon_vue_vue_type_script_setup_true_lang._sfc_main;
 exports.PInfoIcon = pInfoIcon_vue_vue_type_script_setup_true_lang._sfc_main;
 exports.PInlineDatePicker = pInlineDatePicker_vue_vue_type_script_setup_true_lang._sfc_main;
 exports.PInput = pInput;
@@ -1027,7 +1032,7 @@ exports.createTV = index.fe;
 exports.defaultConfig = index.ie;
 exports.tv = index.ce;
 exports.voidEmpty = index.x;
-exports.PFileUpload = pFileUpload;
+exports.PFileUpload = _sfc_main$3;
 exports.PSelectList = _sfc_main$2;
 exports.PTable = pTable;
 exports.PTableSort = pTableSort;

package/dist/cjs/inputClasses.js

@@ -39,7 +39,9 @@ const inputClasses = index.ce({
       }
     },
     rounded: {
-      true: "rounded-full"
+      true: {
+        input: "rounded-full"
+      }
     }
   },
   compoundVariants: [
@@ -111,13 +113,13 @@ const selectClasses = index.ce({
   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/dist/es/index.js

@@ -9,33 +9,32 @@ import { default as default7 } from "./p-close-btn.js";
 import { _ as _3 } from "./chunks/p-date-picker.js";
 import { default as default8 } from "./p-drawer.js";
 import { default as default9 } from "./p-dropdown.js";
-import { _ as _imports_0$2 } from "./chunks/p-dropdown-select.js";
+import { _ as _imports_0$1 } from "./chunks/p-dropdown-select.js";
 import { a } from "./chunks/p-dropdown-select.js";
-import { defineComponent, shallowRef, ref, computed, onMounted, createElementBlock, openBlock, normalizeClass, createCommentVNode, createElementVNode, withDirectives, unref, toDisplayString, withModifiers, createTextVNode, Fragment, renderList, vShow, useAttrs, resolveDirective, normalizeStyle, createVNode, isRef, renderSlot, provide, onBeforeUnmount, watch, mergeProps, toHandlers } from "vue";
+import { defineComponent, shallowRef, ref, computed, onMounted, createElementBlock, openBlock, normalizeClass, createCommentVNode, createElementVNode, withDirectives, unref, toDisplayString, withModifiers, createVNode, createTextVNode, Fragment, renderList, vShow, useAttrs, resolveDirective, normalizeStyle, isRef, renderSlot, provide, onBeforeUnmount, watch, mergeProps, toHandlers } from "vue";
 import { formatBytes, getFileExtension } from "./p-file-upload.js";
+import { _ as _sfc_main$4 } from "./chunks/p-icon.js";
 import { useInputClasses } from "./useInputClasses.js";
 import { uniq, kebabCase } from "lodash-es";
 import { useToast } from "vue-toastification";
-import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 import { P_ICON_ALIASES } from "./p-icon.js";
-import { _ as _4 } from "./chunks/p-icon.js";
-import { _ as _5 } from "./chunks/p-info-icon.js";
-import { _ as _6 } from "./chunks/p-inline-date-picker.js";
+import { _ as _4 } from "./chunks/p-info-icon.js";
+import { _ as _5 } from "./chunks/p-inline-date-picker.js";
 import { default as default10 } from "./p-input.js";
 import { default as default11 } from "./p-input-number.js";
-import { _ as _7 } from "./chunks/p-input-percent.js";
+import { _ as _6 } from "./chunks/p-input-percent.js";
 import PInputSearch from "./p-input-search.js";
-import { _ as _8 } from "./chunks/p-link.js";
+import { _ as _7 } from "./chunks/p-link.js";
 import { default as default12 } from "./p-loading.js";
 import { usePLoading } from "./usePLoading.js";
 import { default as default13 } from "./p-modal.js";
 import { usePModal } from "./usePModal.js";
-import { _ as _9 } from "./chunks/p-pagination.js";
-import { _ as _10 } from "./chunks/p-pagination-info.js";
+import { _ as _8 } from "./chunks/p-pagination.js";
+import { _ as _9 } from "./chunks/p-pagination-info.js";
 import { default as default14 } from "./p-progress-bar.js";
-import { _ as _11 } from "./chunks/p-ring-loader.js";
-import { _ as _12 } from "./chunks/p-select.js";
-import { _ as _13 } from "./chunks/p-select-btn.js";
+import { _ as _10 } from "./chunks/p-ring-loader.js";
+import { _ as _11 } from "./chunks/p-select.js";
+import { _ as _12 } from "./chunks/p-select-btn.js";
 import { SIZES } from "./p-select-list.js";
 import { useSelectList } from "./useSelectList.js";
 import { toString } from "./string.js";
@@ -46,12 +45,13 @@ import { colsInjectionKey, isFirstColFixedInjectionKey, isLastColFixedInjectionK
 import { MIN_WIDTH_COL_RESIZE } from "./p-table.js";
 import { usePTableColResize } from "./usePTableColResize.js";
 import PTableHeaderCell from "./p-table-header-cell.js";
+import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 import { usePTableRowVirtualizer } from "./usePTableRowVirtualizer.js";
 import { default as default17 } from "./p-table-filter-icon.js";
-import { _ as _14 } from "./chunks/p-table-loader.js";
+import { _ as _13 } from "./chunks/p-table-loader.js";
 import { SORTING_TYPES } from "./p-table-sort.js";
 import { default as default18 } from "./p-table-td.js";
-import { _ as _15 } from "./chunks/p-tabs.js";
+import { _ as _14 } from "./chunks/p-tabs.js";
 import { default as default19 } from "./p-textarea.js";
 import { default as default20 } from "./p-toggle.js";
 import { squirrelTailwindConfig } from "./config.js";
@@ -66,8 +66,6 @@ import { createPagingRange } from "./pagination.js";
 import { sanitizeUrl } from "./sanitization.js";
 import { getColor, getColorDeep, getScreen } from "./tailwind.js";
 import { M, N, f, i, c, x } from "./chunks/index.js";
-const _imports_0$1 = "data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M5.8335%206.25016L10.0002%202.0835L14.1668%206.25016'%20stroke='%23767189'%20stroke-width='1.25'%20/%3e%3cpath%20d='M10%202.0835V13.7502'%20stroke='%23767189'%20stroke-width='1.25'%20/%3e%3cpath%20d='M2.91675%2015V18.3333H17.0834V15'%20stroke='%23767189'%20stroke-width='1.25'%20/%3e%3c/svg%3e";
-const _imports_1$1 = "data:image/svg+xml,%3csvg%20width='48'%20height='48'%20viewBox='0%200%2048%2048'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M33%2012H14V44H42V21L33%2012Z'%20stroke='%231A123B'%20stroke-width='3'%20/%3e%3cpath%20d='M9%2036H6V4H25L28%207'%20stroke='%231A123B'%20stroke-width='3'%20/%3e%3cpath%20d='M37%2030H19M28%2021V39'%20stroke='%231A123B'%20stroke-width='3'%20/%3e%3c/svg%3e";
 const _hoisted_1$3 = ["data-has-error"];
 const _hoisted_2$3 = {
   key: 0,
@@ -259,19 +257,21 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
         }, [
           !maxFilesReached.value ? (openBlock(), createElementBlock("div", _hoisted_2$3, [
             !isDraggingOver.value ? (openBlock(), createElementBlock("div", _hoisted_3$3, [
-              _cache[4] || (_cache[4] = createElementVNode("img", {
-                src: _imports_0$1,
-                class: "h-8 w-8"
-              }, null, -1)),
+              createVNode(_sfc_main$4, {
+                icon: "upload",
+                width: "32",
+                class: "text-p-gray-50"
+              }),
               createElementVNode("div", _hoisted_4$3, [
                 _cache[3] || (_cache[3] = createTextVNode(" Drag or ")),
                 createElementVNode("span", _hoisted_5$3, "select " + toDisplayString(fileWord.value), 1)
               ])
             ])) : (openBlock(), createElementBlock("div", _hoisted_6$3, [
-              _cache[5] || (_cache[5] = createElementVNode("img", {
-                src: _imports_1$1,
-                class: "h-8 w-8"
-              }, null, -1)),
+              createVNode(_sfc_main$4, {
+                icon: "tdesign:drag-drop",
+                width: "32",
+                class: "text-primary"
+              }),
               createElementVNode("div", _hoisted_7, "Drop " + toDisplayString(fileWord.value), 1)
             ])),
             createElementVNode("input", {
@@ -304,9 +304,15 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
                   title: file.name
                 }, toDisplayString(file.name), 9, _hoisted_10),
                 createElementVNode("button", {
-                  class: "bg-file-upload-x-icon h-4 w-4 shrink-0 cursor-pointer",
+                  class: "h-5 shrink-0 cursor-pointer overflow-hidden",
                   onClick: withModifiers(($event) => removeFile(index), ["stop"])
-                }, null, 8, _hoisted_11)
+                }, [
+                  createVNode(_sfc_main$4, {
+                    icon: "weui:close2-outlined",
+                    width: "20",
+                    class: "text-p-gray-60 hover:text-on-error"
+                  })
+                ], 8, _hoisted_11)
               ], 2);
             }), 128))
           ])
@@ -321,7 +327,6 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const pFileUpload = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-216025be"]]);
 const _hoisted_1$2 = ["data-has-error"];
 const _hoisted_2$2 = { class: "text-p-purple-60" };
 const _hoisted_3$2 = { class: "flex flex-row" };
@@ -330,7 +335,7 @@ const _hoisted_5$2 = ["title"];
 const _hoisted_6$2 = {
   key: 0,
   class: "ml-auto fill-p-purple-60 pl-2",
-  src: _imports_0$2
+  src: _imports_0$1
 };
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   ...{
@@ -969,33 +974,33 @@ export {
   default8 as PDrawer,
   default9 as PDropdown,
   a as PDropdownSelect,
-  pFileUpload as PFileUpload,
+  _sfc_main$3 as PFileUpload,
   default17 as PFilterIcon,
-  _4 as PIcon,
-  _5 as PInfoIcon,
-  _6 as PInlineDatePicker,
+  _sfc_main$4 as PIcon,
+  _4 as PInfoIcon,
+  _5 as PInlineDatePicker,
   default10 as PInput,
   default11 as PInputNumber,
-  _7 as PInputPercent,
+  _6 as PInputPercent,
   PInputSearch,
-  _8 as PLink,
+  _7 as PLink,
   default12 as PLoading,
   default13 as PModal,
-  _9 as PPagination,
-  _10 as PPaginationInfo,
+  _8 as PPagination,
+  _9 as PPaginationInfo,
   default14 as PProgressBar,
-  _11 as PRingLoader,
-  _12 as PSelect,
-  _13 as PSelectBtn,
+  _10 as PRingLoader,
+  _11 as PSelect,
+  _12 as PSelectBtn,
   _sfc_main$2 as PSelectList,
   default15 as PSelectPill,
   default16 as PSkeletonLoader,
   pTable as PTable,
   PTableHeaderCell,
-  _14 as PTableLoader,
+  _13 as PTableLoader,
   pTableSort as PTableSort,
   default18 as PTableTd,
-  _15 as PTabs,
+  _14 as PTabs,
   default19 as PTextarea,
   default20 as PToggle,
   P_ICON_ALIASES,

package/dist/es/inputClasses.js

@@ -37,7 +37,9 @@ const inputClasses = ce({
       }
     },
     rounded: {
-      true: "rounded-full"
+      true: {
+        input: "rounded-full"
+      }
     }
   },
   compoundVariants: [
@@ -109,13 +111,13 @@ const selectClasses = ce({
   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/dist/squirrel/components/p-table-header-cell/p-table-header-cell.vue.d.ts

@@ -26,7 +26,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>, {}, {
     DEFAULT_CLASSES: string;
 }, {
-    textColorClass(): "" | "text-active-blue" | "text-p-gray-60";
+    textColorClass(): "" | "text-p-gray-60" | "text-active-blue";
     style(): {
         color?: undefined;
     } | {

package/dist/squirrel/utils/inputClasses.d.ts

@@ -30,7 +30,9 @@ declare const inputClasses: import("tailwind-variants").TVReturnType<{
         };
     };
     rounded: {
-        true: string;
+        true: {
+            input: string;
+        };
     };
 }, {
     input: string;
@@ -68,7 +70,9 @@ declare const inputClasses: import("tailwind-variants").TVReturnType<{
         };
     };
     rounded: {
-        true: string;
+        true: {
+            input: string;
+        };
     };
 }, {
     size: {
@@ -102,7 +106,9 @@ declare const inputClasses: import("tailwind-variants").TVReturnType<{
         };
     };
     rounded: {
-        true: string;
+        true: {
+            input: string;
+        };
     };
 }>, {
     size: {
@@ -136,7 +142,9 @@ declare const inputClasses: import("tailwind-variants").TVReturnType<{
         };
     };
     rounded: {
-        true: string;
+        true: {
+            input: string;
+        };
     };
 }, {
     input: string;
@@ -174,7 +182,9 @@ declare const inputClasses: import("tailwind-variants").TVReturnType<{
         };
     };
     rounded: {
-        true: string;
+        true: {
+            input: string;
+        };
     };
 }, {
     input: string;
@@ -212,7 +222,9 @@ declare const inputClasses: import("tailwind-variants").TVReturnType<{
         };
     };
     rounded: {
-        true: string;
+        true: {
+            input: string;
+        };
     };
 }, {
     size: {
@@ -246,7 +258,9 @@ declare const inputClasses: import("tailwind-variants").TVReturnType<{
         };
     };
     rounded: {
-        true: string;
+        true: {
+            input: string;
+        };
     };
 }>, unknown, unknown, undefined>>;
 declare const textareaClasses: import("tailwind-variants").TVReturnType<{
@@ -295,7 +309,9 @@ declare const textareaClasses: import("tailwind-variants").TVReturnType<{
         };
     };
     rounded: {
-        true: string;
+        true: {
+            input: string;
+        };
     };
 }>, {
     size: {
@@ -329,7 +345,9 @@ declare const textareaClasses: import("tailwind-variants").TVReturnType<{
         };
     };
     rounded: {
-        true: string;
+        true: {
+            input: string;
+        };
     };
 }, {
     input: string;
@@ -367,7 +385,9 @@ declare const textareaClasses: import("tailwind-variants").TVReturnType<{
         };
     };
     rounded: {
-        true: string;
+        true: {
+            input: string;
+        };
     };
 }, {
     input: string;
@@ -405,7 +425,9 @@ declare const textareaClasses: import("tailwind-variants").TVReturnType<{
         };
     };
     rounded: {
-        true: string;
+        true: {
+            input: string;
+        };
     };
 }, {
     size: {
@@ -439,7 +461,9 @@ declare const textareaClasses: import("tailwind-variants").TVReturnType<{
         };
     };
     rounded: {
-        true: string;
+        true: {
+            input: string;
+        };
     };
 }>, {
     size: {
@@ -473,7 +497,9 @@ declare const textareaClasses: import("tailwind-variants").TVReturnType<{
         };
     };
     rounded: {
-        true: string;
+        true: {
+            input: string;
+        };
     };
 }, {
     input: string;
@@ -511,7 +537,9 @@ declare const textareaClasses: import("tailwind-variants").TVReturnType<{
         };
     };
     rounded: {
-        true: string;
+        true: {
+            input: string;
+        };
     };
 }, {
     input: string;
@@ -549,7 +577,9 @@ declare const textareaClasses: import("tailwind-variants").TVReturnType<{
         };
     };
     rounded: {
-        true: string;
+        true: {
+            input: string;
+        };
     };
 }, {
     size: {
@@ -583,7 +613,9 @@ declare const textareaClasses: import("tailwind-variants").TVReturnType<{
         };
     };
     rounded: {
-        true: string;
+        true: {
+            input: string;
+        };
     };
 }>, unknown, unknown, undefined>>>;
 declare const selectClasses: import("tailwind-variants").TVReturnType<{
@@ -644,7 +676,9 @@ declare const selectClasses: import("tailwind-variants").TVReturnType<{
         };
     };
     rounded: {
-        true: string;
+        true: {
+            input: string;
+        };
     };
 }>, {
     size: {
@@ -678,7 +712,9 @@ declare const selectClasses: import("tailwind-variants").TVReturnType<{
         };
     };
     rounded: {
-        true: string;
+        true: {
+            input: string;
+        };
     };
 }, {
     input: string;
@@ -716,7 +752,9 @@ declare const selectClasses: import("tailwind-variants").TVReturnType<{
         };
     };
     rounded: {
-        true: string;
+        true: {
+            input: string;
+        };
     };
 }, {
     input: string;
@@ -754,7 +792,9 @@ declare const selectClasses: import("tailwind-variants").TVReturnType<{
         };
     };
     rounded: {
-        true: string;
+        true: {
+            input: string;
+        };
     };
 }, {
     size: {
@@ -788,7 +828,9 @@ declare const selectClasses: import("tailwind-variants").TVReturnType<{
         };
     };
     rounded: {
-        true: string;
+        true: {
+            input: string;
+        };
     };
 }>, {
     size: {
@@ -822,7 +864,9 @@ declare const selectClasses: import("tailwind-variants").TVReturnType<{
         };
     };
     rounded: {
-        true: string;
+        true: {
+            input: string;
+        };
     };
 }, {
     input: string;
@@ -860,7 +904,9 @@ declare const selectClasses: import("tailwind-variants").TVReturnType<{
         };
     };
     rounded: {
-        true: string;
+        true: {
+            input: string;
+        };
     };
 }, {
     input: string;
@@ -898,7 +944,9 @@ declare const selectClasses: import("tailwind-variants").TVReturnType<{
         };
     };
     rounded: {
-        true: string;
+        true: {
+            input: string;
+        };
     };
 }, {
     size: {
@@ -932,7 +980,9 @@ declare const selectClasses: import("tailwind-variants").TVReturnType<{
         };
     };
     rounded: {
-        true: string;
+        true: {
+            input: string;
+        };
     };
 }>, unknown, unknown, undefined>>>;
 export { inputClasses, selectClasses, textareaClasses };

package/dist/squirrel.css

@@ -1109,7 +1109,7 @@ to {
   --color-warning: var(--color-barley-white);
   --color-on-warning: var(--color-horses-neck);
 }/* Select arrow - p-select, p-dropdown-select */.squirrel-bg-chevron-down {
-  background-image: url("data:image/svg+xml,%3csvg%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_812_23741)'%3e%3cpath%20d='M0.125117%203.60489L5.62512%209.83989C5.67465%209.89224%205.73434%209.93394%205.80053%209.96244C5.86673%209.99094%205.93805%2010.0056%206.01012%2010.0056C6.08219%2010.0056%206.1535%209.99094%206.2197%209.96244C6.2859%209.93394%206.34559%209.89224%206.39512%209.83989L11.8951%203.60489C11.9768%203.50177%2012.0145%203.37063%2012.0001%203.23989C11.9947%203.17327%2011.976%203.10841%2011.9451%203.04916C11.9141%202.9899%2011.8717%202.93744%2011.8201%202.89489L10.8951%202.11989C10.8446%202.07618%2010.7858%202.04304%2010.7223%202.02243C10.6587%202.00182%2010.5917%201.99415%2010.5251%201.99989C10.4589%202.00468%2010.3942%202.02262%2010.335%202.05267C10.2758%202.08272%2010.2231%202.12426%2010.1801%202.17489L6.09512%206.89989C6.06984%206.92492%206.0357%206.93897%206.00012%206.93897C5.96454%206.93897%205.9304%206.92492%205.90512%206.89989L1.82012%202.17489C1.73929%202.07834%201.62501%202.01585%201.50012%201.99989C1.43389%201.99347%201.36706%202.00034%201.30352%202.02009C1.23999%202.03984%201.18104%202.07206%201.13012%202.11489L0.180117%202.89489C0.128578%202.93744%200.0860938%202.9899%200.0551769%203.04916C0.0242601%203.10841%200.0055377%203.17327%200.000116678%203.23989C-0.00426061%203.30597%200.00453534%203.37227%200.0259937%203.43493C0.0474521%203.49759%200.0811453%203.55536%200.125117%203.60489Z'%20fill='%23718096'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_812_23741'%3e%3crect%20width='12'%20height='12'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e") !important;
+  background-image: url("data:image/svg+xml,%3csvg%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_812_23741)'%3e%3cpath%20d='M0.125117%203.60489L5.62512%209.83989C5.67465%209.89224%205.73434%209.93394%205.80053%209.96244C5.86673%209.99094%205.93805%2010.0056%206.01012%2010.0056C6.08219%2010.0056%206.1535%209.99094%206.2197%209.96244C6.2859%209.93394%206.34559%209.89224%206.39512%209.83989L11.8951%203.60489C11.9768%203.50177%2012.0145%203.37063%2012.0001%203.23989C11.9947%203.17327%2011.976%203.10841%2011.9451%203.04916C11.9141%202.9899%2011.8717%202.93744%2011.8201%202.89489L10.8951%202.11989C10.8446%202.07618%2010.7858%202.04304%2010.7223%202.02243C10.6587%202.00182%2010.5917%201.99415%2010.5251%201.99989C10.4589%202.00468%2010.3942%202.02262%2010.335%202.05267C10.2758%202.08272%2010.2231%202.12426%2010.1801%202.17489L6.09512%206.89989C6.06984%206.92492%206.0357%206.93897%206.00012%206.93897C5.96454%206.93897%205.9304%206.92492%205.90512%206.89989L1.82012%202.17489C1.73929%202.07834%201.62501%202.01585%201.50012%201.99989C1.43389%201.99347%201.36706%202.00034%201.30352%202.02009C1.23999%202.03984%201.18104%202.07206%201.13012%202.11489L0.180117%202.89489C0.128578%202.93744%200.0860938%202.9899%200.0551769%203.04916C0.0242601%203.10841%200.0055377%203.17327%200.000116678%203.23989C-0.00426061%203.30597%200.00453534%203.37227%200.0259937%203.43493C0.0474521%203.49759%200.0811453%203.55536%200.125117%203.60489Z'%20fill='%23718096'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_812_23741'%3e%3crect%20width='12'%20height='12'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
 }/* Popovers/Tooltips - floating-vue */.v-popper__popper.v-popper--theme-tooltip .v-popper__wrapper > .v-popper__inner {
   font-size: 0.875rem;
   max-width: 320px;
@@ -1200,14 +1200,7 @@ to {
   background-image: url("data:image/svg+xml,%3csvg%20width='33'%20height='30'%20viewBox='0%200%2033%2030'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M31.0143%2029.9524C31.1862%2029.9516%2031.3551%2029.9066%2031.5045%2029.8215C31.6539%2029.7365%2031.7789%2029.6144%2031.8674%2029.4669C31.9558%2029.3195%2032.0048%2029.1517%2032.0095%2028.9799C32.0142%2028.808%2031.9745%2028.6378%2031.8943%2028.4857L16.8943%200.485744C16.8006%200.337008%2016.6708%200.214443%2016.5169%200.129498C16.363%200.0445534%2016.1901%200%2016.0143%200C15.8385%200%2015.6656%200.0445534%2015.5117%200.129498C15.3578%200.214443%2015.228%200.337008%2015.1343%200.485744L0.134286%2028.4857C0.0463617%2028.6353%200%2028.8056%200%2028.9791C0%2029.1526%200.0463617%2029.3229%200.134286%2029.4724C0.221436%2029.6207%200.346313%2029.7432%200.496207%2029.8275C0.6461%2029.9118%200.815658%2029.9549%200.98762%2029.9524H31.0143ZM16.0143%2026.2857C15.6176%2026.2857%2015.2299%2026.1677%2014.9004%2025.9467C14.571%2025.7258%2014.3147%2025.4118%2014.1641%2025.0448C14.0136%2024.6778%2013.9755%2024.2743%2014.0549%2023.8857C14.1342%2023.497%2014.3274%2023.1407%2014.6098%2022.8621C14.8922%2022.5835%2015.251%2022.3951%2015.6407%2022.321C16.0304%2022.2468%2016.4334%2022.2903%2016.7983%2022.4458C17.1633%2022.6012%2017.4737%2022.8617%2017.6903%2023.1941C17.9068%2023.5265%2018.0196%2023.9158%2018.0143%2024.3124C18.0073%2024.8382%2017.7935%2025.3401%2017.4192%2025.7094C17.0448%2026.0787%2016.5401%2026.2858%2016.0143%2026.2857ZM16.0143%209.95241C16.3679%209.95241%2016.707%2010.0929%2016.9571%2010.3429C17.2071%2010.593%2017.3476%2010.9321%2017.3476%2011.2857V18.5791C17.3476%2018.9327%2017.2071%2019.2718%2016.9571%2019.5219C16.707%2019.7719%2016.3679%2019.9124%2016.0143%2019.9124C15.6607%2019.9124%2015.3215%2019.7719%2015.0715%2019.5219C14.8214%2019.2718%2014.681%2018.9327%2014.681%2018.5791V11.2857C14.681%2010.9321%2014.8214%2010.593%2015.0715%2010.3429C15.3215%2010.0929%2015.6607%209.95241%2016.0143%209.95241Z'%20fill='%23F2C94C'%20/%3e%3c/svg%3e");
 }
 
-/*# sourceMappingURL=squirrel.css.map */
-.bg-file-upload-x-icon[data-v-216025be] {
-  background-image: url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M0%208C0%209.58225%200.469192%2011.129%201.34824%2012.4446C2.22729%2013.7602%203.47672%2014.7855%204.93853%2015.391C6.40034%2015.9965%208.00887%2016.155%209.56072%2015.8463C11.1126%2015.5376%2012.538%2014.7757%2013.6569%2013.6569C14.7757%2012.538%2015.5376%2011.1126%2015.8463%209.56072C16.155%208.00887%2015.9965%206.40034%2015.391%204.93853C14.7855%203.47672%2013.7602%202.22729%2012.4446%201.34824C11.129%200.469192%209.58225%200%208%200C5.87827%200%203.84344%200.842855%202.34315%202.34315C0.842855%203.84344%200%205.87827%200%208ZM14.3333%208C14.3333%209.25262%2013.9619%2010.4771%2013.266%2011.5186C12.5701%2012.5601%2011.5809%2013.3719%2010.4237%2013.8512C9.2664%2014.3306%207.99298%2014.456%206.76443%2014.2116C5.53588%2013.9673%204.40739%2013.3641%203.52166%2012.4783C2.63592%2011.5926%202.03273%2010.4641%201.78836%209.23557C1.54399%208.00703%201.66941%206.7336%202.14876%205.57634C2.62812%204.41907%203.43988%203.42994%204.48139%202.73403C5.5229%202.03811%206.74739%201.66667%208%201.66667C9.67916%201.66843%2011.289%202.33626%2012.4764%203.52361C13.6637%204.71096%2014.3316%206.32084%2014.3333%208Z'%20fill='%23718096'%20/%3e%3cpath%20d='M5.88634%204.71322C5.73075%204.55763%205.51972%204.47021%205.29967%204.47021C5.07963%204.47021%204.8686%204.55763%204.71301%204.71322C4.55741%204.86881%204.47%205.07984%204.47%205.29989C4.47%205.51993%204.55741%205.73096%204.71301%205.88655L6.71301%207.88655C6.72914%207.9021%206.74197%207.92074%206.75073%207.94136C6.7595%207.96198%206.76401%207.98415%206.76401%208.00655C6.76401%208.02896%206.7595%208.05113%206.75073%208.07175C6.74197%208.09237%206.72914%208.11101%206.71301%208.12655L4.71301%2010.1266C4.63561%2010.2034%204.57417%2010.2948%204.53225%2010.3955C4.49033%2010.4962%204.46875%2010.6042%204.46875%2010.7132C4.46875%2010.8223%204.49033%2010.9303%204.53225%2011.031C4.57417%2011.1317%204.63561%2011.223%204.71301%2011.2999C4.78939%2011.3781%204.88063%2011.4403%204.98138%2011.4827C5.08213%2011.5251%205.19035%2011.547%205.29967%2011.547C5.409%2011.547%205.51721%2011.5251%205.61796%2011.4827C5.71871%2011.4403%205.80996%2011.3781%205.88634%2011.2999L7.88634%209.29989C7.91934%209.27037%207.96207%209.25405%208.00634%209.25405C8.05062%209.25405%208.09334%209.27037%208.12634%209.29989L10.1263%2011.2999C10.2027%2011.3781%2010.294%2011.4403%2010.3947%2011.4827C10.4955%2011.5251%2010.6037%2011.547%2010.713%2011.547C10.8223%2011.547%2010.9305%2011.5251%2011.0313%2011.4827C11.132%2011.4403%2011.2233%2011.3781%2011.2997%2011.2999C11.3771%2011.223%2011.4385%2011.1317%2011.4804%2011.031C11.5224%2010.9303%2011.5439%2010.8223%2011.5439%2010.7132C11.5439%2010.6042%2011.5224%2010.4962%2011.4804%2010.3955C11.4385%2010.2948%2011.3771%2010.2034%2011.2997%2010.1266L9.29967%208.12655C9.27016%208.09355%209.25384%208.05083%209.25384%208.00655C9.25384%207.96228%209.27016%207.91955%209.29967%207.88655L11.2997%205.88655C11.4553%205.73096%2011.5427%205.51993%2011.5427%205.29989C11.5427%205.07984%2011.4553%204.86881%2011.2997%204.71322C11.1441%204.55763%2010.9331%204.47021%2010.713%204.47021C10.493%204.47021%2010.2819%204.55763%2010.1263%204.71322L8.12634%206.71322C8.09334%206.74274%208.05062%206.75906%208.00634%206.75906C7.96207%206.75906%207.91934%206.74274%207.88634%206.71322L5.88634%204.71322Z'%20fill='%23718096'%20/%3e%3c/svg%3e");
-}
-.bg-file-upload-x-icon[data-v-216025be]:hover {
-  background-image: url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M0%208C0%209.58225%200.469192%2011.129%201.34824%2012.4446C2.22729%2013.7602%203.47672%2014.7855%204.93853%2015.391C6.40034%2015.9965%208.00887%2016.155%209.56072%2015.8463C11.1126%2015.5376%2012.538%2014.7757%2013.6569%2013.6569C14.7757%2012.538%2015.5376%2011.1126%2015.8463%209.56072C16.155%208.00887%2015.9965%206.40034%2015.391%204.93853C14.7855%203.47672%2013.7602%202.22729%2012.4446%201.34824C11.129%200.469192%209.58225%200%208%200C5.87827%200%203.84344%200.842855%202.34315%202.34315C0.842855%203.84344%200%205.87827%200%208ZM14.3333%208C14.3333%209.25262%2013.9619%2010.4771%2013.266%2011.5186C12.5701%2012.5601%2011.5809%2013.3719%2010.4237%2013.8512C9.2664%2014.3306%207.99298%2014.456%206.76443%2014.2116C5.53588%2013.9673%204.40739%2013.3641%203.52166%2012.4783C2.63592%2011.5926%202.03273%2010.4641%201.78836%209.23557C1.54399%208.00703%201.66941%206.7336%202.14876%205.57634C2.62812%204.41907%203.43988%203.42994%204.48139%202.73403C5.5229%202.03811%206.74739%201.66667%208%201.66667C9.67916%201.66843%2011.289%202.33626%2012.4764%203.52361C13.6637%204.71096%2014.3316%206.32084%2014.3333%208Z'%20fill='%23BB1410'%20/%3e%3cpath%20d='M5.88634%204.71322C5.73075%204.55763%205.51972%204.47021%205.29967%204.47021C5.07963%204.47021%204.8686%204.55763%204.71301%204.71322C4.55741%204.86881%204.47%205.07984%204.47%205.29989C4.47%205.51993%204.55741%205.73096%204.71301%205.88655L6.71301%207.88655C6.72914%207.9021%206.74197%207.92074%206.75073%207.94136C6.7595%207.96198%206.76401%207.98415%206.76401%208.00655C6.76401%208.02896%206.7595%208.05113%206.75073%208.07175C6.74197%208.09237%206.72914%208.11101%206.71301%208.12655L4.71301%2010.1266C4.63561%2010.2034%204.57417%2010.2948%204.53225%2010.3955C4.49033%2010.4962%204.46875%2010.6042%204.46875%2010.7132C4.46875%2010.8223%204.49033%2010.9303%204.53225%2011.031C4.57417%2011.1317%204.63561%2011.223%204.71301%2011.2999C4.78939%2011.3781%204.88063%2011.4403%204.98138%2011.4827C5.08213%2011.5251%205.19035%2011.547%205.29967%2011.547C5.409%2011.547%205.51721%2011.5251%205.61796%2011.4827C5.71871%2011.4403%205.80996%2011.3781%205.88634%2011.2999L7.88634%209.29989C7.91934%209.27037%207.96207%209.25405%208.00634%209.25405C8.05062%209.25405%208.09334%209.27037%208.12634%209.29989L10.1263%2011.2999C10.2027%2011.3781%2010.294%2011.4403%2010.3947%2011.4827C10.4955%2011.5251%2010.6037%2011.547%2010.713%2011.547C10.8223%2011.547%2010.9305%2011.5251%2011.0313%2011.4827C11.132%2011.4403%2011.2233%2011.3781%2011.2997%2011.2999C11.3771%2011.223%2011.4385%2011.1317%2011.4804%2011.031C11.5224%2010.9303%2011.5439%2010.8223%2011.5439%2010.7132C11.5439%2010.6042%2011.5224%2010.4962%2011.4804%2010.3955C11.4385%2010.2948%2011.3771%2010.2034%2011.2997%2010.1266L9.29967%208.12655C9.27016%208.09355%209.25384%208.05083%209.25384%208.00655C9.25384%207.96228%209.27016%207.91955%209.29967%207.88655L11.2997%205.88655C11.4553%205.73096%2011.5427%205.51993%2011.5427%205.29989C11.5427%205.07984%2011.4553%204.86881%2011.2997%204.71322C11.1441%204.55763%2010.9331%204.47021%2010.713%204.47021C10.493%204.47021%2010.2819%204.55763%2010.1263%204.71322L8.12634%206.71322C8.09334%206.74274%208.05062%206.75906%208.00634%206.75906C7.96207%206.75906%207.91934%206.74274%207.88634%206.71322L5.88634%204.71322Z'%20fill='%23BB1410'%20/%3e%3c/svg%3e");
-}
-.p-table[data-v-8560a8de] {
+/*# sourceMappingURL=squirrel.css.map */.p-table[data-v-8560a8de] {
   color: rgb(var(--color-night));
   height: 1px;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "6.0.13",
+  "version": "6.0.14",
   "packageManager": "pnpm@9.15.5",
   "type": "module",
   "scripts": {
@@ -53,18 +53,18 @@
     "@playwright/test": "^1.50.1",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-a11y": "^8.5.6",
-    "@storybook/addon-actions": "^8.5.6",
-    "@storybook/addon-essentials": "^8.5.6",
-    "@storybook/addon-interactions": "^8.5.6",
-    "@storybook/addon-links": "^8.5.6",
-    "@storybook/blocks": "^8.5.6",
-    "@storybook/manager-api": "^8.5.6",
-    "@storybook/test": "^8.5.6",
-    "@storybook/test-runner": "^0.21.1",
-    "@storybook/theming": "^8.5.6",
-    "@storybook/vue3": "^8.5.6",
-    "@storybook/vue3-vite": "^8.5.6",
+    "@storybook/addon-a11y": "^8.5.7",
+    "@storybook/addon-actions": "^8.5.7",
+    "@storybook/addon-essentials": "^8.5.7",
+    "@storybook/addon-interactions": "^8.5.7",
+    "@storybook/addon-links": "^8.5.7",
+    "@storybook/blocks": "^8.5.7",
+    "@storybook/manager-api": "^8.5.7",
+    "@storybook/test": "^8.5.7",
+    "@storybook/test-runner": "^0.21.2",
+    "@storybook/theming": "^8.5.7",
+    "@storybook/vue3": "^8.5.7",
+    "@storybook/vue3-vite": "^8.5.7",
     "@tanstack/vue-virtual": "3.13.0",
     "@types/jsdom": "^21.1.7",
     "@types/lodash-es": "^4.17.12",
@@ -93,7 +93,7 @@
     "rimraf": "^6.0.1",
     "sass": "^1.85.0",
     "semantic-release": "^24.2.3",
-    "storybook": "^8.5.6",
+    "storybook": "^8.5.7",
     "svgo": "^3.3.2",
     "tailwindcss": "^3.4.17",
     "typescript": "5.7.3",

package/squirrel/assets/squirrel.css

@@ -63,7 +63,7 @@
 
 /* Select arrow - p-select, p-dropdown-select */
 .squirrel-bg-chevron-down {
-  background-image: url('chevron-down.svg') !important;
+  background-image: url('chevron-down.svg');
 }
 
 /* Popovers/Tooltips - floating-vue */

package/squirrel/components/p-action-bar/p-action-bar.stories.js

@@ -1,4 +1,3 @@
-import FileUploadIcon from '@squirrel/assets/file-upload-upload-icon.svg?inline';
 import PaginateLeftIcon from '@squirrel/assets/pagination-left-icon.svg?inline';
 import PaginateRightIcon from '@squirrel/assets/pagination-right-icon.svg?inline';
 import PActionBar from '@squirrel/components/p-action-bar/p-action-bar.vue';
@@ -9,7 +8,7 @@ import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
 const actionBarActions = [
   {
     label: 'Upload',
-    icon: FileUploadIcon,
+    icon: PaginateRightIcon,
     name: 'upload',
   },
   {

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-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-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>