@pequity/squirrel 6.0.10 → 6.0.12

package/dist/cjs/chunks/p-info-icon.js

@@ -0,0 +1,37 @@
+"use strict";
+const vue = require("vue");
+const pIcon_vue_vue_type_script_setup_true_lang = require("./p-icon.js");
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    name: "PInfoIcon"
+  },
+  __name: "p-info-icon",
+  props: {
+    text: { default: null }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      const _component_VTooltip = vue.resolveComponent("VTooltip");
+      return vue.openBlock(), vue.createBlock(_component_VTooltip, {
+        "popper-triggers": ["hover"],
+        delay: { show: 750, hide: 0 },
+        disabled: !_ctx.$slots.default && !_ctx.text
+      }, {
+        popper: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "default", {}, () => [
+            vue.createTextVNode(vue.toDisplayString(_ctx.text), 1)
+          ])
+        ]),
+        default: vue.withCtx(() => [
+          vue.createVNode(pIcon_vue_vue_type_script_setup_true_lang._sfc_main, {
+            icon: "info",
+            class: "block h-3 w-3",
+            width: "12"
+          })
+        ]),
+        _: 3
+      }, 8, ["disabled"]);
+    };
+  }
+});
+exports._sfc_main = _sfc_main;

package/dist/cjs/chunks/p-ring-loader.js

@@ -8,7 +8,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "p-ring-loader",
   props: {
     size: { default: 80 },
-    color: { default: "var(--color-p-blue-60)" }
+    color: { default: "" }
   },
   setup(__props) {
     const props = __props;
@@ -20,6 +20,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       return vue.openBlock(), vue.createBlock(pIcon_vue_vue_type_script_setup_true_lang._sfc_main, {
         icon: "svg-spinners:90-ring-with-bg",
         width: spinnerSize.value,
+        class: "text-p-blue-60",
         style: vue.normalizeStyle(style.value)
       }, null, 8, ["width", "style"]);
     };

package/dist/cjs/index.js

@@ -20,7 +20,7 @@ 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 = require("./p-info-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");
 const pInputNumber = require("./p-input-number.js");
@@ -968,7 +968,7 @@ exports.PDropdownSelect = pDropdownSelect_vue_vue_type_script_setup_true_lang._s
 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;
+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;
 exports.PInputNumber = pInputNumber;

package/dist/cjs/p-icon.js

@@ -29,6 +29,11 @@ const P_ICON_ALIASES = {
   more: "lineicons:more-alt",
   filters: "mage:filter",
   "bar-chart": "material-symbols:bar-chart-4-bars-rounded",
-  list: "material-symbols:format-list-bulleted"
+  list: "material-symbols:format-list-bulleted",
+  formula: "fluent:math-formula-20-filled",
+  refresh: "ri:loop-left-line",
+  download: "tdesign:download",
+  upload: "tdesign:upload",
+  info: "streamline:information-circle"
 };
 exports.P_ICON_ALIASES = P_ICON_ALIASES;

package/dist/cjs/p-info-icon.js

@@ -1,34 +1,3 @@
 "use strict";
-const vue = require("vue");
-const _pluginVue_exportHelper = require("./chunks/_plugin-vue_export-helper.js");
-const _sfc_main = /* @__PURE__ */ vue.defineComponent({
-  ...{
-    name: "PInfoIcon"
-  },
-  __name: "p-info-icon",
-  props: {
-    text: { default: null }
-  },
-  setup(__props) {
-    return (_ctx, _cache) => {
-      const _component_VTooltip = vue.resolveComponent("VTooltip");
-      return vue.openBlock(), vue.createBlock(_component_VTooltip, {
-        "popper-triggers": ["hover"],
-        delay: { show: 750, hide: 0 },
-        disabled: !_ctx.$slots.default && !_ctx.text
-      }, {
-        popper: vue.withCtx(() => [
-          vue.renderSlot(_ctx.$slots, "default", {}, () => [
-            vue.createTextVNode(vue.toDisplayString(_ctx.text), 1)
-          ], true)
-        ]),
-        default: vue.withCtx(() => [
-          _cache[0] || (_cache[0] = vue.createElementVNode("i", { class: "bg-info-circle-icon block h-3 w-3" }, null, -1))
-        ]),
-        _: 3
-      }, 8, ["disabled"]);
-    };
-  }
-});
-const PInfoIcon = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-804e74f5"]]);
-module.exports = PInfoIcon;
+const pInfoIcon_vue_vue_type_script_setup_true_lang = require("./chunks/p-info-icon.js");
+module.exports = pInfoIcon_vue_vue_type_script_setup_true_lang._sfc_main;

package/dist/cjs/p-input-number.js

@@ -1,5 +1,5 @@
 "use strict";
-const pInfoIcon = require("./p-info-icon.js");
+const pInfoIcon_vue_vue_type_script_setup_true_lang = require("./chunks/p-info-icon.js");
 const inputClassesMixin = require("./inputClassesMixin.js");
 const number = require("./number.js");
 const lodashEs = require("lodash-es");
@@ -22,7 +22,7 @@ const ALL_OPTIONS = [
 const _sfc_main = vue.defineComponent({
   name: "PInputNumber",
   components: {
-    PInfoIcon: pInfoIcon
+    PInfoIcon: pInfoIcon_vue_vue_type_script_setup_true_lang._sfc_main
   },
   mixins: [inputClassesMixin],
   inheritAttrs: false,

package/dist/cjs/p-table-header-cell.js

@@ -1,5 +1,5 @@
 "use strict";
-const pInfoIcon = require("./p-info-icon.js");
+const pInfoIcon_vue_vue_type_script_setup_true_lang = require("./chunks/p-info-icon.js");
 const pTableFilterIcon = require("./p-table-filter-icon.js");
 const vue = require("vue");
 const _pluginVue_exportHelper = require("./chunks/_plugin-vue_export-helper.js");
@@ -8,7 +8,7 @@ const _sfc_main = vue.defineComponent({
   name: "PTableHeaderCell",
   components: {
     PTableFilterIcon: pTableFilterIcon,
-    PInfoIcon: pInfoIcon
+    PInfoIcon: pInfoIcon_vue_vue_type_script_setup_true_lang._sfc_main
   },
   props: {
     text: {

package/dist/es/chunks/p-info-icon.js

@@ -0,0 +1,38 @@
+import { defineComponent, resolveComponent, createBlock, openBlock, withCtx, createVNode, renderSlot, createTextVNode, toDisplayString } from "vue";
+import { _ as _sfc_main$1 } from "./p-icon.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "PInfoIcon"
+  },
+  __name: "p-info-icon",
+  props: {
+    text: { default: null }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      const _component_VTooltip = resolveComponent("VTooltip");
+      return openBlock(), createBlock(_component_VTooltip, {
+        "popper-triggers": ["hover"],
+        delay: { show: 750, hide: 0 },
+        disabled: !_ctx.$slots.default && !_ctx.text
+      }, {
+        popper: withCtx(() => [
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createTextVNode(toDisplayString(_ctx.text), 1)
+          ])
+        ]),
+        default: withCtx(() => [
+          createVNode(_sfc_main$1, {
+            icon: "info",
+            class: "block h-3 w-3",
+            width: "12"
+          })
+        ]),
+        _: 3
+      }, 8, ["disabled"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/es/chunks/p-ring-loader.js

@@ -7,7 +7,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "p-ring-loader",
   props: {
     size: { default: 80 },
-    color: { default: "var(--color-p-blue-60)" }
+    color: { default: "" }
   },
   setup(__props) {
     const props = __props;
@@ -19,6 +19,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(_sfc_main$1, {
         icon: "svg-spinners:90-ring-with-bg",
         width: spinnerSize.value,
+        class: "text-p-blue-60",
         style: normalizeStyle(style.value)
       }, null, 8, ["width", "style"]);
     };

package/dist/es/index.js

@@ -19,45 +19,45 @@ 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 { default as default10 } from "./p-info-icon.js";
-import { _ as _5 } from "./chunks/p-inline-date-picker.js";
-import { default as default11 } from "./p-input.js";
-import { default as default12 } from "./p-input-number.js";
-import { _ as _6 } from "./chunks/p-input-percent.js";
+import { _ as _5 } from "./chunks/p-info-icon.js";
+import { _ as _6 } 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 PInputSearch from "./p-input-search.js";
-import { _ as _7 } from "./chunks/p-link.js";
-import { default as default13 } from "./p-loading.js";
+import { _ as _8 } from "./chunks/p-link.js";
+import { default as default12 } from "./p-loading.js";
 import { usePLoading } from "./usePLoading.js";
-import { default as default14 } from "./p-modal.js";
+import { default as default13 } from "./p-modal.js";
 import { usePModal } from "./usePModal.js";
-import { _ as _8 } from "./chunks/p-pagination.js";
-import { _ as _9 } from "./chunks/p-pagination-info.js";
-import { default as default15 } from "./p-progress-bar.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 { _ as _9 } from "./chunks/p-pagination.js";
+import { _ as _10 } 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 { SIZES } from "./p-select-list.js";
 import { useSelectList } from "./useSelectList.js";
 import { toString } from "./string.js";
 import { splitStringForHighlight } from "./text.js";
-import { default as default16 } from "./p-select-pill.js";
-import { default as default17 } from "./p-skeleton-loader.js";
+import { default as default15 } from "./p-select-pill.js";
+import { default as default16 } from "./p-skeleton-loader.js";
 import { colsInjectionKey, isFirstColFixedInjectionKey, isLastColFixedInjectionKey, isColsResizableInjectionKey } from "./p-table.js";
 import { MIN_WIDTH_COL_RESIZE } from "./p-table.js";
 import { usePTableColResize } from "./usePTableColResize.js";
 import PTableHeaderCell from "./p-table-header-cell.js";
 import { usePTableRowVirtualizer } from "./usePTableRowVirtualizer.js";
-import { default as default18 } from "./p-table-filter-icon.js";
-import { _ as _13 } from "./chunks/p-table-loader.js";
+import { default as default17 } from "./p-table-filter-icon.js";
+import { _ as _14 } from "./chunks/p-table-loader.js";
 import { SORTING_TYPES } from "./p-table-sort.js";
-import { default as default19 } from "./p-table-td.js";
-import { _ as _14 } from "./chunks/p-tabs.js";
-import { default as default20 } from "./p-textarea.js";
-import { default as default21 } from "./p-toggle.js";
+import { default as default18 } from "./p-table-td.js";
+import { _ as _15 } 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";
 import { CURRENCY_INPUT_DEFAULTS } from "./currency.js";
 import { getNextActiveElement, isElement, isVisible } from "./dom.js";
-import { default as default22 } from "./inputClassesMixin.js";
+import { default as default21 } from "./inputClassesMixin.js";
 import { ERROR_MSG, INPUT_BASE, INPUT_ERROR, INPUT_NORMAL, INPUT_SIZES, LABEL_BASE, LABEL_REQUIRED, LABEL_SIZES, SELECT_ARROW, SELECT_BASE, SELECT_SIZES, SPACING_LEFT, SPACING_PREFIX, SPACING_RIGHT, SPACING_SUFFIX, TEXTAREA_BASE } from "./inputClassesShared.js";
 import { setupListKeyboardNavigation } from "./listKeyboardNavigation.js";
 import { toNumberOrNull } from "./number.js";
@@ -977,34 +977,34 @@ export {
   default9 as PDropdown,
   a as PDropdownSelect,
   pFileUpload as PFileUpload,
-  default18 as PFilterIcon,
+  default17 as PFilterIcon,
   _4 as PIcon,
-  default10 as PInfoIcon,
-  _5 as PInlineDatePicker,
-  default11 as PInput,
-  default12 as PInputNumber,
-  _6 as PInputPercent,
+  _5 as PInfoIcon,
+  _6 as PInlineDatePicker,
+  default10 as PInput,
+  default11 as PInputNumber,
+  _7 as PInputPercent,
   PInputSearch,
-  _7 as PLink,
-  default13 as PLoading,
-  default14 as PModal,
-  _8 as PPagination,
-  _9 as PPaginationInfo,
-  default15 as PProgressBar,
-  _10 as PRingLoader,
-  _11 as PSelect,
-  _12 as PSelectBtn,
+  _8 as PLink,
+  default12 as PLoading,
+  default13 as PModal,
+  _9 as PPagination,
+  _10 as PPaginationInfo,
+  default14 as PProgressBar,
+  _11 as PRingLoader,
+  _12 as PSelect,
+  _13 as PSelectBtn,
   _sfc_main$2 as PSelectList,
-  default16 as PSelectPill,
-  default17 as PSkeletonLoader,
+  default15 as PSelectPill,
+  default16 as PSkeletonLoader,
   pTable as PTable,
   PTableHeaderCell,
-  _13 as PTableLoader,
+  _14 as PTableLoader,
   pTableSort as PTableSort,
-  default19 as PTableTd,
-  _14 as PTabs,
-  default20 as PTextarea,
-  default21 as PToggle,
+  default18 as PTableTd,
+  _15 as PTabs,
+  default19 as PTextarea,
+  default20 as PToggle,
   P_ICON_ALIASES,
   SELECT_ARROW,
   SELECT_BASE,
@@ -1021,7 +1021,7 @@ export {
   getColorDeep,
   getNextActiveElement,
   getScreen,
-  default22 as inputClassesMixin,
+  default21 as inputClassesMixin,
   isColsResizableInjectionKey,
   isElement,
   isFirstColFixedInjectionKey,

package/dist/es/p-icon.js

@@ -27,7 +27,12 @@ const P_ICON_ALIASES = {
   more: "lineicons:more-alt",
   filters: "mage:filter",
   "bar-chart": "material-symbols:bar-chart-4-bars-rounded",
-  list: "material-symbols:format-list-bulleted"
+  list: "material-symbols:format-list-bulleted",
+  formula: "fluent:math-formula-20-filled",
+  refresh: "ri:loop-left-line",
+  download: "tdesign:download",
+  upload: "tdesign:upload",
+  info: "streamline:information-circle"
 };
 export {
   P_ICON_ALIASES

package/dist/es/p-info-icon.js

@@ -1,35 +1,4 @@
-import { defineComponent, resolveComponent, createBlock, openBlock, withCtx, createElementVNode, renderSlot, createTextVNode, toDisplayString } from "vue";
-import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "PInfoIcon"
-  },
-  __name: "p-info-icon",
-  props: {
-    text: { default: null }
-  },
-  setup(__props) {
-    return (_ctx, _cache) => {
-      const _component_VTooltip = resolveComponent("VTooltip");
-      return openBlock(), createBlock(_component_VTooltip, {
-        "popper-triggers": ["hover"],
-        delay: { show: 750, hide: 0 },
-        disabled: !_ctx.$slots.default && !_ctx.text
-      }, {
-        popper: withCtx(() => [
-          renderSlot(_ctx.$slots, "default", {}, () => [
-            createTextVNode(toDisplayString(_ctx.text), 1)
-          ], true)
-        ]),
-        default: withCtx(() => [
-          _cache[0] || (_cache[0] = createElementVNode("i", { class: "bg-info-circle-icon block h-3 w-3" }, null, -1))
-        ]),
-        _: 3
-      }, 8, ["disabled"]);
-    };
-  }
-});
-const PInfoIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-804e74f5"]]);
+import { _ as _sfc_main } from "./chunks/p-info-icon.js";
 export {
-  PInfoIcon as default
+  _sfc_main as default
 };

package/dist/es/p-input-number.js

@@ -1,4 +1,4 @@
-import PInfoIcon from "./p-info-icon.js";
+import { _ as _sfc_main$1 } from "./chunks/p-info-icon.js";
 import inputClassesMixin from "./inputClassesMixin.js";
 import { toNumberOrNull } from "./number.js";
 import { kebabCase } from "lodash-es";
@@ -21,7 +21,7 @@ const ALL_OPTIONS = [
 const _sfc_main = defineComponent({
   name: "PInputNumber",
   components: {
-    PInfoIcon
+    PInfoIcon: _sfc_main$1
   },
   mixins: [inputClassesMixin],
   inheritAttrs: false,

package/dist/es/p-table-header-cell.js

@@ -1,4 +1,4 @@
-import PInfoIcon from "./p-info-icon.js";
+import { _ as _sfc_main$1 } from "./chunks/p-info-icon.js";
 import PTableFilterIcon from "./p-table-filter-icon.js";
 import { defineComponent, resolveComponent, createElementBlock, openBlock, createElementVNode, createCommentVNode, createVNode, normalizeStyle, normalizeClass, toDisplayString, createBlock } from "vue";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
@@ -7,7 +7,7 @@ const _sfc_main = defineComponent({
   name: "PTableHeaderCell",
   components: {
     PTableFilterIcon,
-    PInfoIcon
+    PInfoIcon: _sfc_main$1
   },
   props: {
     text: {

package/dist/squirrel/components/p-alert/p-alert.vue.d.ts

@@ -21,6 +21,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         validator(value: keyof typeof ALERT_TYPES): boolean;
     };
 }>> & Readonly<{}>, {
-    type: "error" | "success" | "info" | "warning";
+    type: "info" | "error" | "success" | "warning";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/squirrel/components/p-btn/p-btn.vue.d.ts

@@ -67,7 +67,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>, {}, {}, {
     classes(): string;
     loaderSize(): number;
-    loaderColor(): "var(--color-p-blue-60)" | "var(--color-p-blue-15)" | "var(--color-p-purple-60)";
+    loaderColor(): "var(--color-p-blue-15)" | "var(--color-p-purple-60)" | "var(--color-p-blue-60)";
 }, {
     isExternalLink: (url: string) => boolean;
     sanitizeUrl: (url: string) => string;

package/dist/squirrel/components/p-drawer/p-drawer.vue.d.ts

@@ -173,21 +173,21 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }, {}, {
     PAlert: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
         type: {
-            type: import("vue").PropType<"error" | "success" | "info" | "warning">;
+            type: import("vue").PropType<"info" | "error" | "success" | "warning">;
             default: string;
-            validator(value: "error" | "success" | "info" | "warning"): boolean;
+            validator(value: "info" | "error" | "success" | "warning"): boolean;
         };
     }>, {}, {}, {
         classes(): string;
         svgColor(): undefined;
     }, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
         type: {
-            type: import("vue").PropType<"error" | "success" | "info" | "warning">;
+            type: import("vue").PropType<"info" | "error" | "success" | "warning">;
             default: string;
-            validator(value: "error" | "success" | "info" | "warning"): boolean;
+            validator(value: "info" | "error" | "success" | "warning"): boolean;
         };
     }>> & Readonly<{}>, {
-        type: "error" | "success" | "info" | "warning";
+        type: "info" | "error" | "success" | "warning";
     }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
     PCloseBtn: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
         variant: {

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

@@ -28,5 +28,10 @@ export declare const P_ICON_ALIASES: {
     readonly filters: "mage:filter";
     readonly 'bar-chart': "material-symbols:bar-chart-4-bars-rounded";
     readonly list: "material-symbols:format-list-bulleted";
+    readonly formula: "fluent:math-formula-20-filled";
+    readonly refresh: "ri:loop-left-line";
+    readonly download: "tdesign:download";
+    readonly upload: "tdesign:upload";
+    readonly info: "streamline:information-circle";
 };
 export type PIconAlias = keyof typeof P_ICON_ALIASES;

package/dist/squirrel.css

@@ -49,9 +49,9 @@ div[id^=popper_].dropdown .v-popper__inner .dropdown-menu .dropdown-header {
 
     padding-right: 1rem;
 
-    padding-top: 0.25rem;
+    padding-top: 0.5rem;
 
-    padding-bottom: 0.25rem;
+    padding-bottom: 0.5rem;
 
     font-size: 0.75rem;
 
@@ -59,6 +59,8 @@ div[id^=popper_].dropdown .v-popper__inner .dropdown-menu .dropdown-header {
 
     text-transform: uppercase;
 
+    line-height: 1.25rem;
+
     color: rgb(var(--color-p-gray-40))
 }
 div[id^=popper_].dropdown .v-popper__inner .dropdown-menu .dropdown-item {
@@ -77,15 +79,17 @@ div[id^=popper_].dropdown .v-popper__inner .dropdown-menu .dropdown-item {
 
     padding-right: 1rem;
 
-    padding-top: 0.25rem;
+    padding-top: 0.5rem;
 
-    padding-bottom: 0.25rem;
+    padding-bottom: 0.5rem;
 
     text-align: left;
 
     font-size: 0.875rem;
 
-    font-weight: 500
+    font-weight: 500;
+
+    line-height: 1.25rem
 }
 div[id^=popper_].dropdown .v-popper__inner .dropdown-menu .dropdown-item:active,
 div[id^=popper_].dropdown .v-popper__inner .dropdown-menu .dropdown-item.active {
@@ -335,11 +339,7 @@ to {
   height: 1.5rem;
   right: 2.5rem;
   bottom: 0.75rem;
-}
-.bg-info-circle-icon[data-v-804e74f5] {
-  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_4002_33291)'%3e%3cpath%20d='M0.5%206C0.5%207.45869%201.07946%208.85764%202.11091%209.88909C3.14236%2010.9205%204.54131%2011.5%206%2011.5C7.45869%2011.5%208.85764%2010.9205%209.88909%209.88909C10.9205%208.85764%2011.5%207.45869%2011.5%206C11.5%204.54131%2010.9205%203.14236%209.88909%202.11091C8.85764%201.07946%207.45869%200.5%206%200.5C4.54131%200.5%203.14236%201.07946%202.11091%202.11091C1.07946%203.14236%200.5%204.54131%200.5%206Z'%20stroke='%231A123B'%20stroke-miterlimit='10'/%3e%3cpath%20d='M6.5%203.5H5.5V2.5H6.5V3.5Z'%20fill='%231A123B'/%3e%3cpath%20d='M4.5%205H6V9M4.5%208.5H7.5'%20stroke='%231A123B'%20stroke-miterlimit='10'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_4002_33291'%3e%3crect%20width='12'%20height='12'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
-}
-.fadeInDown[data-v-9ad56d4f] {
+}.fadeInDown[data-v-9ad56d4f] {
   animation-duration: 0.4s;
   animation-fill-mode: both;
   animation-name: fadeInDown-9ad56d4f;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "6.0.10",
+  "version": "6.0.12",
   "packageManager": "pnpm@9.15.5",
   "type": "module",
   "scripts": {
@@ -49,26 +49,26 @@
   "devDependencies": {
     "@commitlint/cli": "^19.7.1",
     "@commitlint/config-conventional": "^19.7.1",
-    "@pequity/eslint-config": "^1.1.0",
+    "@pequity/eslint-config": "^1.1.1",
     "@playwright/test": "^1.50.1",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-a11y": "^8.5.3",
-    "@storybook/addon-actions": "^8.5.3",
-    "@storybook/addon-essentials": "^8.5.3",
-    "@storybook/addon-interactions": "^8.5.3",
-    "@storybook/addon-links": "^8.5.3",
-    "@storybook/blocks": "^8.5.3",
-    "@storybook/manager-api": "^8.5.3",
-    "@storybook/test": "^8.5.3",
+    "@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.0",
-    "@storybook/theming": "^8.5.3",
-    "@storybook/vue3": "^8.5.3",
-    "@storybook/vue3-vite": "^8.5.3",
+    "@storybook/theming": "^8.5.6",
+    "@storybook/vue3": "^8.5.6",
+    "@storybook/vue3-vite": "^8.5.6",
     "@tanstack/vue-virtual": "3.13.0",
     "@types/jsdom": "^21.1.7",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^22.13.1",
+    "@types/node": "^22.13.4",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vitest/coverage-v8": "^3.0.5",
     "@vue/compiler-sfc": "3.5.13",
@@ -76,7 +76,7 @@
     "@vuepic/vue-datepicker": "11.0.1",
     "autoprefixer": "^10.4.20",
     "dayjs": "1.11.13",
-    "eslint": "^9.20.0",
+    "eslint": "^9.20.1",
     "eslint-plugin-storybook": "^0.11.2",
     "floating-vue": "5.2.2",
     "glob": "^11.0.1",
@@ -86,14 +86,14 @@
     "lint-staged": "^15.4.3",
     "lodash-es": "4.17.21",
     "make-coverage-badge": "^1.2.0",
-    "postcss": "^8.5.1",
+    "postcss": "^8.5.2",
     "prettier": "^3.4.2",
     "prettier-plugin-tailwindcss": "^0.6.11",
     "resolve-tspaths": "^0.8.23",
     "rimraf": "^6.0.1",
-    "sass": "^1.84.0",
+    "sass": "^1.85.0",
     "semantic-release": "^24.2.2",
-    "storybook": "^8.5.3",
+    "storybook": "^8.5.6",
     "svgo": "^3.3.2",
     "tailwindcss": "^3.4.17",
     "typescript": "5.7.3",

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

@@ -243,10 +243,10 @@ div[id^='popper_'].dropdown .v-popper__inner .dropdown-menu {
   @apply py-2;
 }
 div[id^='popper_'].dropdown .v-popper__inner .dropdown-menu .dropdown-header {
-  @apply block whitespace-nowrap px-4 py-1 text-xs font-semibold uppercase text-p-gray-40;
+  @apply block whitespace-nowrap px-4 py-2 text-xs font-semibold uppercase leading-5 text-p-gray-40;
 }
 div[id^='popper_'].dropdown .v-popper__inner .dropdown-menu .dropdown-item {
-  @apply clear-both block w-full cursor-pointer whitespace-nowrap px-4 py-1 text-left text-sm font-medium;
+  @apply clear-both block w-full cursor-pointer whitespace-nowrap px-4 py-2 text-left text-sm font-medium leading-5;
 }
 div[id^='popper_'].dropdown .v-popper__inner .dropdown-menu .dropdown-item:active,
 div[id^='popper_'].dropdown .v-popper__inner .dropdown-menu .dropdown-item.active {

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

@@ -28,6 +28,11 @@ export const P_ICON_ALIASES = {
   filters: 'mage:filter',
   'bar-chart': 'material-symbols:bar-chart-4-bars-rounded',
   list: 'material-symbols:format-list-bulleted',
+  formula: 'fluent:math-formula-20-filled',
+  refresh: 'ri:loop-left-line',
+  download: 'tdesign:download',
+  upload: 'tdesign:upload',
+  info: 'streamline:information-circle',
 } as const;
 
 export type PIconAlias = keyof typeof P_ICON_ALIASES;

package/squirrel/components/p-info-icon/p-info-icon.spec.js

@@ -5,12 +5,13 @@ describe('PInfoIcon.vue', () => {
   it('renders an info icon', async () => {
     const wrapper = createWrapperFor(PInfoIcon, {
       props: { text: 'Lorem ipsum dolor sit amet.' },
+      global: { PIcon: true },
     });
 
-    const iClasses = ['bg-info-circle-icon', 'block', 'h-3', 'w-3'];
+    const iClasses = ['block', 'h-3', 'w-3'];
     const divClasses = ['v-popper', 'v-popper--theme-tooltip'];
 
-    const i = wrapper.find('i');
+    const i = wrapper.findComponent({ name: 'PIcon' });
 
     expect(divClasses.every((c) => wrapper.classes().includes(c))).toBe(true);
     expect(i.exists()).toBe(true);

package/squirrel/components/p-info-icon/p-info-icon.vue

@@ -1,6 +1,6 @@
 <template>
   <VTooltip :popper-triggers="['hover']" :delay="{ show: 750, hide: 0 }" :disabled="!$slots.default && !text">
-    <i class="bg-info-circle-icon block h-3 w-3"></i>
+    <PIcon icon="info" class="block h-3 w-3" width="12" />
     <template #popper>
       <slot>{{ text }}</slot>
     </template>
@@ -8,6 +8,8 @@
 </template>
 
 <script setup lang="ts">
+import PIcon from '@squirrel/components/p-icon/p-icon.vue';
+
 defineOptions({
   name: 'PInfoIcon',
 });
@@ -20,9 +22,3 @@ withDefaults(defineProps<Props>(), {
   text: null,
 });
 </script>
-
-<style scoped>
-.bg-info-circle-icon {
-  background-image: url('@squirrel/assets/info-circle-icon.svg');
-}
-</style>

package/squirrel/components/p-ring-loader/p-ring-loader.spec.js

@@ -22,6 +22,7 @@ describe('PRingLoader.vue', () => {
       icon: 'svg-spinners:90-ring-with-bg',
       style: 'color: rgb(204, 204, 204);',
       width: '62.44',
+      class: 'text-p-blue-60',
     });
   });
 

package/squirrel/components/p-ring-loader/p-ring-loader.vue

@@ -1,5 +1,5 @@
 <template>
-  <PIcon icon="svg-spinners:90-ring-with-bg" :width="spinnerSize" :style="style" />
+  <PIcon icon="svg-spinners:90-ring-with-bg" :width="spinnerSize" class="text-p-blue-60" :style="style" />
 </template>
 
 <script setup lang="ts">
@@ -17,7 +17,7 @@ type Props = {
 
 const props = withDefaults(defineProps<Props>(), {
   size: 80,
-  color: 'var(--color-p-blue-60)',
+  color: '',
 });
 
 const spinnerSize = computed(() => props.size * 0.892);

package/squirrel/components/p-table-header-cell/p-table-header-cell.spec.js

@@ -9,11 +9,12 @@ describe('PTableHeaderCell.vue', () => {
         text: 'Test text',
         textClass: 'test-class',
       },
+      global: { stubs: { PInfoIcon: true } },
     });
 
     const div = await wrapper.find('div.test-class');
     const icon = wrapper.findComponent(PFilterIcon);
-    const tooltipIcon = await wrapper.find('i');
+    const tooltipIcon = await wrapper.findComponent({ name: 'PInfoIcon' });
 
     expect(wrapper.classes()).toEqual(['flex', 'items-center', 'overflow-hidden']);
     expect(icon.exists()).toBe(true);
@@ -52,17 +53,18 @@ describe('PTableHeaderCell.vue', () => {
     expect(div.classes()).toContain('text-active-blue');
   });
 
-  it('when tooltip text is provided', async () => {
+  it('displays a tooltip when tooltip text is provided', async () => {
     const wrapper = createWrapperFor(PTableHeaderCell, {
       props: {
         text: 'Test text',
         textClass: 'test-class',
         tooltipText: 'This is a tooltip',
       },
+      global: { stubs: { PInfoIcon: true } },
     });
 
-    const tooltipIcon = wrapper.find('i');
-    const tooltipIconDivElClasses = [...tooltipIcon.element.parentNode.parentNode.classList];
+    const tooltipIcon = await wrapper.findComponent({ name: 'PInfoIcon' });
+    const tooltipIconDivElClasses = [...wrapper.find('p-info-icon-stub').element.parentNode.classList];
 
     expect(tooltipIconDivElClasses).toEqual(['relative', 'ml-1', 'mr-auto', 'h-3', 'w-3', 'shrink-0']);
     expect(tooltipIcon.exists()).toBe(true);