@pequity/squirrel 6.0.12 → 6.0.14

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

@@ -1,10 +1,10 @@
-import { type InputSize } from './inputClassesShared';
+import { type Size } from '../components/p-btn/p-btn.types';
 import { type PropType } from 'vue';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     size: {
-        type: PropType<InputSize>;
+        type: PropType<Size>;
         default: string;
-        validator(value: InputSize): boolean;
+        validator(value: Size): boolean;
     };
     errorMsg: {
         type: StringConstructor;
@@ -18,18 +18,22 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
-}>, {}, {
-    errorMsgClasses: string;
-}, {
+}>, {}, {}, {
+    allClasses(): {
+        input: string;
+        label: string;
+        errorMessage: string;
+    };
     inputClasses(): string;
     labelClasses(): string;
+    errorMsgClasses(): string;
     selectClasses(): string;
     textareaClasses(): string;
 }, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     size: {
-        type: PropType<InputSize>;
+        type: PropType<Size>;
         default: string;
-        validator(value: InputSize): boolean;
+        validator(value: Size): boolean;
     };
     errorMsg: {
         type: StringConstructor;

package/dist/squirrel.css

@@ -263,77 +263,77 @@ from {
 to {
     opacity: 0;
 }
-}.icon.clear[data-v-2674242c] {
+}.icon.clear[data-v-78b7a6f8] {
   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%3cg%20clip-path='url(%23clip0_1634_880)'%3e%3cpath%20d='M16%208C16%206.41775%2015.5308%204.87104%2014.6518%203.55544C13.7727%202.23985%2012.5233%201.21447%2011.0615%200.608967C9.59966%200.00346629%207.99113%20-0.15496%206.43928%200.153721C4.88743%200.462403%203.46197%201.22433%202.34315%202.34315C1.22433%203.46197%200.462403%204.88743%200.153721%206.43928C-0.15496%207.99113%200.00346629%209.59966%200.608967%2011.0615C1.21447%2012.5233%202.23985%2013.7727%203.55544%2014.6518C4.87104%2015.5308%206.41775%2016%208%2016C10.1217%2016%2012.1566%2015.1571%2013.6569%2013.6569C15.1571%2012.1566%2016%2010.1217%2016%208ZM11.14%2010.1867C11.2642%2010.3116%2011.3339%2010.4805%2011.3339%2010.6567C11.3339%2010.8328%2011.2642%2011.0018%2011.14%2011.1267C11.078%2011.1892%2011.0043%2011.2388%2010.9231%2011.2726C10.8418%2011.3064%2010.7547%2011.3239%2010.6667%2011.3239C10.5787%2011.3239%2010.4915%2011.3064%2010.4103%2011.2726C10.329%2011.2388%2010.2553%2011.1892%2010.1933%2011.1267L8.12%209.05334C8.08809%209.02429%208.04649%209.0082%208.00334%209.0082C7.96019%209.0082%207.91858%209.02429%207.88667%209.05334L5.81334%2011.1267C5.6858%2011.2359%205.52175%2011.293%205.35397%2011.2865C5.18618%2011.28%205.02702%2011.2104%204.90829%2011.0917C4.78957%2010.973%204.72001%2010.8138%204.71353%2010.646C4.70705%2010.4783%204.76412%2010.3142%204.87334%2010.1867L6.94667%208.11334C6.97572%208.08142%206.99181%208.03982%206.99181%207.99667C6.99181%207.95352%206.97572%207.91192%206.94667%207.88L4.87334%205.80667C4.81085%205.7447%204.76126%205.67096%204.72741%205.58972C4.69356%205.50848%204.67614%205.42135%204.67614%205.33334C4.67614%205.24533%204.69356%205.15819%204.72741%205.07695C4.76126%204.99571%204.81085%204.92198%204.87334%204.86C4.99825%204.73584%205.16721%204.66614%205.34334%204.66614C5.51946%204.66614%205.68843%204.73584%205.81334%204.86L7.88667%206.93334C7.90163%206.94928%207.91971%206.96199%207.93977%206.97068C7.95984%206.97936%207.98147%206.98384%208.00334%206.98384C8.0252%206.98384%208.04684%206.97936%208.0669%206.97068C8.08697%206.96199%208.10504%206.94928%208.12%206.93334L10.1933%204.86C10.2555%204.79784%2010.3293%204.74854%2010.4105%204.7149C10.4917%204.68126%2010.5788%204.66394%2010.6667%204.66394C10.7546%204.66394%2010.8416%204.68126%2010.9228%204.7149C11.0041%204.74854%2011.0778%204.79784%2011.14%204.86C11.2022%204.92216%2011.2515%204.99596%2011.2851%205.07717C11.3188%205.15839%2011.3361%205.24543%2011.3361%205.33334C11.3361%205.42124%2011.3188%205.50829%2011.2851%205.5895C11.2515%205.67072%2011.2022%205.74451%2011.14%205.80667L9.06667%207.88C9.05073%207.89497%209.03802%207.91304%209.02933%207.93311C9.02065%207.95317%209.01616%207.97481%209.01616%207.99667C9.01616%208.01854%209.02065%208.04017%209.02933%208.06024C9.03802%208.0803%209.05073%208.09837%209.06667%208.11334L11.14%2010.1867Z'%20fill='%23A0AEC0'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_1634_880'%3e%3crect%20width='16'%20height='16'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
   background-position: center center;
   transition: background-image 0.4s;
 }
-.icon.clear-sm[data-v-2674242c] {
+.icon.clear-sm[data-v-78b7a6f8] {
   background-size: 0.875rem 0.875rem;
   width: 0.875rem;
   height: 0.875rem;
   bottom: 0.5rem;
   right: 0.375rem;
 }
-.icon.clear-md[data-v-2674242c] {
+.icon.clear-md[data-v-78b7a6f8] {
   background-size: 1rem 1rem;
   height: 1rem;
   width: 1rem;
   bottom: 0.75rem;
   right: 0.5rem;
 }
-.icon.clear-lg[data-v-2674242c] {
+.icon.clear-lg[data-v-78b7a6f8] {
   background-size: 1rem 1rem;
   height: 1rem;
   width: 1rem;
   bottom: 1rem;
   right: 0.5rem;
 }
-.icon.clear[data-v-2674242c]:hover {
+.icon.clear[data-v-78b7a6f8]: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%3cg%20clip-path='url(%23clip0_1634_896)'%3e%3cpath%20d='M16%208C16%206.41775%2015.5308%204.87104%2014.6518%203.55544C13.7727%202.23985%2012.5233%201.21447%2011.0615%200.608967C9.59966%200.00346629%207.99113%20-0.15496%206.43928%200.153721C4.88743%200.462403%203.46197%201.22433%202.34315%202.34315C1.22433%203.46197%200.462403%204.88743%200.153721%206.43928C-0.15496%207.99113%200.00346629%209.59966%200.608967%2011.0615C1.21447%2012.5233%202.23985%2013.7727%203.55544%2014.6518C4.87104%2015.5308%206.41775%2016%208%2016C10.1217%2016%2012.1566%2015.1571%2013.6569%2013.6569C15.1571%2012.1566%2016%2010.1217%2016%208ZM11.14%2010.1867C11.2642%2010.3116%2011.3339%2010.4805%2011.3339%2010.6567C11.3339%2010.8328%2011.2642%2011.0018%2011.14%2011.1267C11.078%2011.1892%2011.0043%2011.2388%2010.9231%2011.2726C10.8418%2011.3064%2010.7547%2011.3239%2010.6667%2011.3239C10.5787%2011.3239%2010.4915%2011.3064%2010.4103%2011.2726C10.329%2011.2388%2010.2553%2011.1892%2010.1933%2011.1267L8.12%209.05334C8.08809%209.02429%208.04649%209.0082%208.00334%209.0082C7.96019%209.0082%207.91858%209.02429%207.88667%209.05334L5.81334%2011.1267C5.6858%2011.2359%205.52175%2011.293%205.35397%2011.2865C5.18618%2011.28%205.02702%2011.2104%204.90829%2011.0917C4.78957%2010.973%204.72001%2010.8138%204.71353%2010.646C4.70705%2010.4783%204.76412%2010.3142%204.87334%2010.1867L6.94667%208.11334C6.97572%208.08142%206.99181%208.03982%206.99181%207.99667C6.99181%207.95352%206.97572%207.91192%206.94667%207.88L4.87334%205.80667C4.81085%205.7447%204.76126%205.67096%204.72741%205.58972C4.69356%205.50848%204.67614%205.42135%204.67614%205.33334C4.67614%205.24533%204.69356%205.15819%204.72741%205.07695C4.76126%204.99571%204.81085%204.92198%204.87334%204.86C4.99825%204.73584%205.16721%204.66614%205.34334%204.66614C5.51946%204.66614%205.68843%204.73584%205.81334%204.86L7.88667%206.93334C7.90163%206.94928%207.91971%206.96199%207.93977%206.97068C7.95984%206.97936%207.98147%206.98384%208.00334%206.98384C8.0252%206.98384%208.04684%206.97936%208.0669%206.97068C8.08697%206.96199%208.10504%206.94928%208.12%206.93334L10.1933%204.86C10.2555%204.79784%2010.3293%204.74854%2010.4105%204.7149C10.4917%204.68126%2010.5788%204.66394%2010.6667%204.66394C10.7546%204.66394%2010.8416%204.68126%2010.9228%204.7149C11.0041%204.74854%2011.0778%204.79784%2011.14%204.86C11.2022%204.92216%2011.2515%204.99596%2011.2851%205.07717C11.3188%205.15839%2011.3361%205.24543%2011.3361%205.33334C11.3361%205.42124%2011.3188%205.50829%2011.2851%205.5895C11.2515%205.67072%2011.2022%205.74451%2011.14%205.80667L9.06667%207.88C9.05073%207.89497%209.03802%207.91304%209.02933%207.93311C9.02065%207.95317%209.01616%207.97481%209.01616%207.99667C9.01616%208.01854%209.02065%208.04017%209.02933%208.06024C9.03802%208.0803%209.05073%208.09837%209.06667%208.11334L11.14%2010.1867Z'%20fill='%23424E6E'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_1634_896'%3e%3crect%20width='16'%20height='16'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
 }
-.icon.search[data-v-2674242c] {
+.icon.search[data-v-78b7a6f8] {
   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_9127_330342)'%3e%3cpath%20d='M11.705%2010.295L9.38501%208.00004C10.0193%207.0497%2010.3178%205.91467%2010.2331%204.77526C10.1484%203.63584%209.68546%202.5574%208.91771%201.71124C8.14996%200.86508%207.12147%200.299735%205.99563%200.105014C4.8698%20-0.0897079%203.71117%200.0973621%202.70383%200.636506C1.69648%201.17565%200.898177%202.03595%200.435738%203.08073C-0.0267015%204.12552%20-0.126757%205.29487%200.151467%206.40303C0.429691%207.51119%201.07024%208.4946%201.97135%209.19704C2.87246%209.89948%203.98246%2010.2807%205.12501%2010.28C6.13901%2010.2811%207.13002%209.97801%207.97001%209.41004L10.295%2011.735C10.4824%2011.9213%2010.7358%2012.0258%2011%2012.0258C11.2642%2012.0258%2011.5176%2011.9213%2011.705%2011.735C11.8018%2011.6418%2011.8788%2011.5299%2011.9314%2011.4062C11.9839%2011.2825%2012.011%2011.1495%2012.011%2011.015C12.011%2010.8806%2011.9839%2010.7476%2011.9314%2010.6239C11.8788%2010.5002%2011.8018%2010.3883%2011.705%2010.295ZM5.12501%201.50004C5.84176%201.50004%206.54241%201.71251%207.13843%202.11061C7.73445%202.50871%208.19908%203.07456%208.47359%203.73666C8.74811%204.39875%208.82019%205.12736%208.68072%205.8304C8.54125%206.53345%208.1965%207.17937%207.69004%207.68653C7.18357%208.19369%206.53813%208.53934%205.83527%208.67977C5.13242%208.82021%204.40371%208.74913%203.74125%208.47553C3.07878%208.20193%202.51228%207.73808%202.11336%207.14261C1.71444%206.54714%201.501%205.84678%201.50001%205.13004C1.50001%204.16817%201.88177%203.24562%202.56145%202.565C3.24112%201.88439%204.16314%201.50136%205.12501%201.50004Z'%20fill='%23718096'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_9127_330342'%3e%3crect%20width='12'%20height='12'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
 }
-.icon.search-sm[data-v-2674242c] {
+.icon.search-sm[data-v-78b7a6f8] {
   background-size: 0.75rem 0.75rem;
   left: 0.5rem;
   bottom: 0.625rem;
   width: 0.75rem;
   height: 0.75rem;
 }
-.icon.search-md[data-v-2674242c] {
+.icon.search-md[data-v-78b7a6f8] {
   background-size: 1rem 1rem;
   width: 1rem;
   height: 1rem;
   left: 0.75rem;
   bottom: 0.75rem;
 }
-.icon.search-lg[data-v-2674242c] {
+.icon.search-lg[data-v-78b7a6f8] {
   background-size: 1rem 1rem;
   width: 1rem;
   height: 1rem;
   left: 1.125rem;
   bottom: 1rem;
 }
-.icon.enter[data-v-2674242c] {
+.icon.enter[data-v-78b7a6f8] {
   background-image: url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_1627_786)'%3e%3crect%20width='24'%20height='24'%20rx='5'%20fill='%23ECF1FF'/%3e%3cpath%20d='M19.17%201.03744e-05H4.83C4.19619%20-0.00130459%203.56834%200.122398%202.98239%200.364037C2.39645%200.605676%201.86392%200.960506%201.41528%201.40822C0.966641%201.85592%200.610708%202.38772%200.367855%202.97316C0.125002%203.55861%20-1.36406e-06%204.1862%200%204.82001L0%2019.17C0%2020.451%200.508874%2021.6795%201.41467%2022.5853C2.32048%2023.4911%203.549%2024%204.83%2024H19.17C20.4502%2023.9974%2021.6772%2023.4876%2022.5824%2022.5824C23.4876%2021.6772%2023.9974%2020.4502%2024%2019.17V4.82001C23.9974%203.54075%2023.4873%202.31479%2022.5818%201.41115C21.6763%200.507508%2020.4493%207.63258e-06%2019.17%201.03744e-05ZM22%2019.17C22%2019.9206%2021.7018%2020.6404%2021.1711%2021.1711C20.6404%2021.7018%2019.9206%2022%2019.17%2022H4.83C4.07944%2022%203.35962%2021.7018%202.82889%2021.1711C2.29816%2020.6404%202%2019.9206%202%2019.17V4.82001C2.00265%204.07118%202.30197%203.35393%202.83242%202.82536C3.36286%202.29679%204.08117%202.00001%204.83%202.00001H19.17C19.9188%202.00001%2020.6371%202.29679%2021.1676%202.82536C21.698%203.35393%2021.9974%204.07118%2022%204.82001V19.17Z'%20fill='%234750EB'/%3e%3cpath%20d='M17.5%207.5C17.2348%207.5%2016.9804%207.60536%2016.7929%207.79289C16.6054%207.98043%2016.5%208.23478%2016.5%208.5V11.25C16.5%2011.3163%2016.4737%2011.3799%2016.4268%2011.4268C16.3799%2011.4737%2016.3163%2011.5%2016.25%2011.5H10.75C10.6837%2011.5%2010.6201%2011.4737%2010.5732%2011.4268C10.5263%2011.3799%2010.5%2011.3163%2010.5%2011.25V9.5C10.5012%209.30138%2010.4431%209.10691%2010.3333%208.94139C10.2235%208.77587%2010.0669%208.6468%209.88348%208.57063C9.70004%208.49446%209.49807%208.47465%209.30332%208.51372C9.10857%208.55279%208.92987%208.64897%208.79%208.79L5.79%2011.79C5.60375%2011.9774%205.49921%2012.2308%205.49921%2012.495C5.49921%2012.7592%205.60375%2013.0126%205.79%2013.2L8.79%2016.2C8.88261%2016.2945%208.99306%2016.3697%209.11493%2016.4212C9.23681%2016.4727%209.36769%2016.4995%209.5%2016.5C9.76522%2016.5%2010.0196%2016.3946%2010.2071%2016.2071C10.3946%2016.0196%2010.5%2015.7652%2010.5%2015.5V13.75C10.5%2013.6837%2010.5263%2013.6201%2010.5732%2013.5732C10.6201%2013.5263%2010.6837%2013.5%2010.75%2013.5H16.5C17.0304%2013.5%2017.5391%2013.2893%2017.9142%2012.9142C18.2893%2012.5391%2018.5%2012.0304%2018.5%2011.5V8.5C18.5%208.23478%2018.3946%207.98043%2018.2071%207.79289C18.0196%207.60536%2017.7652%207.5%2017.5%207.5Z'%20fill='%234750EB'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_1627_786'%3e%3crect%20width='24'%20height='24'%20rx='5'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
 }
-.icon.enter-sm[data-v-2674242c] {
+.icon.enter-sm[data-v-78b7a6f8] {
   background-size: 1rem 1rem;
   width: 1rem;
   height: 1rem;
   right: 1.5rem;
   bottom: 0.5rem;
 }
-.icon.enter-md[data-v-2674242c] {
+.icon.enter-md[data-v-78b7a6f8] {
   background-size: 1.5rem 1.5rem;
   width: 1.5rem;
   height: 1.5rem;
   right: 2.0625rem;
   bottom: 0.5rem;
 }
-.icon.enter-lg[data-v-2674242c] {
+.icon.enter-lg[data-v-78b7a6f8] {
   background-size: 1.5rem 1.5rem;
   width: 1.5rem;
   height: 1.5rem;
@@ -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.12",
+  "version": "6.0.14",
   "packageManager": "pnpm@9.15.5",
   "type": "module",
   "scripts": {
@@ -53,31 +53,31 @@
     "@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.0",
-    "@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",
     "@types/node": "^22.13.4",
     "@vitejs/plugin-vue": "^5.2.1",
-    "@vitest/coverage-v8": "^3.0.5",
+    "@vitest/coverage-v8": "^3.0.6",
     "@vue/compiler-sfc": "3.5.13",
     "@vue/test-utils": "^2.4.6",
     "@vuepic/vue-datepicker": "11.0.1",
     "autoprefixer": "^10.4.20",
     "dayjs": "1.11.13",
     "eslint": "^9.20.1",
-    "eslint-plugin-storybook": "^0.11.2",
+    "eslint-plugin-storybook": "^0.11.3",
     "floating-vue": "5.2.2",
     "glob": "^11.0.1",
     "husky": "^9.1.7",
@@ -87,22 +87,25 @@
     "lodash-es": "4.17.21",
     "make-coverage-badge": "^1.2.0",
     "postcss": "^8.5.2",
-    "prettier": "^3.4.2",
+    "prettier": "^3.5.1",
     "prettier-plugin-tailwindcss": "^0.6.11",
     "resolve-tspaths": "^0.8.23",
     "rimraf": "^6.0.1",
     "sass": "^1.85.0",
-    "semantic-release": "^24.2.2",
-    "storybook": "^8.5.6",
+    "semantic-release": "^24.2.3",
+    "storybook": "^8.5.7",
     "svgo": "^3.3.2",
     "tailwindcss": "^3.4.17",
     "typescript": "5.7.3",
     "vite": "^6.1.0",
-    "vitest": "^3.0.5",
+    "vitest": "^3.0.6",
     "vue": "3.5.13",
     "vue-currency-input": "3.2.1",
     "vue-router": "4.5.0",
     "vue-toastification": "2.0.0-rc.5",
     "vue-tsc": "2.2.0"
+  },
+  "dependencies": {
+    "tailwind-variants": "^0.3.1"
   }
 }

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-btn/p-btn.spec.js

@@ -163,7 +163,7 @@ describe('PBtn.vue', () => {
   it.each([
     ['sm', ['py-1', 'px-2', 'rounded', 'font-medium', 'text-sm']],
     ['md', ['py-2', 'px-6', 'rounded', 'font-medium', 'text-base']],
-    ['lg', ['py-3', 'px-6', 'rounded', 'font-medium', 'text-lg']],
+    ['lg', ['py-2.5', 'px-6', 'rounded', 'font-medium', 'text-lg']],
   ])('renders a button of size %s', async (size, classes) => {
     const wrapper = createWrapperFor(PBtn, { props: { size } });
 

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

@@ -1 +1,3 @@
-export type Size = 'sm' | 'md' | 'lg';
+export const SIZES = ['sm', 'md', 'lg'] as const;
+
+export type Size = (typeof SIZES)[number];

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

@@ -4,7 +4,7 @@
     v-bind="$attrs"
     :href="sanitizeUrl(to)"
     target="_blank"
-    :class="classes"
+    :class="classes.button"
     :disabled="!!$attrs.disabled ? true : null"
     :aria-disabled="!!$attrs.disabled"
   >
@@ -16,93 +16,80 @@
     :type="to ? null : nativeType"
     :to="to ? to : null"
     :aria-selected="selected"
-    :class="classes"
+    :class="classes.button"
     v-bind="$attrs"
     :disabled="!!$attrs.disabled || loading ? true : null"
     :aria-disabled="$attrs.disabled"
   >
     <div :class="{ invisible: loading }"><slot></slot></div>
-    <PRingLoader
-      v-if="loading"
-      :color="loaderColor"
-      :size="loaderSize"
-      class="absolute bottom-0 left-0 right-0 top-0 flex items-center justify-center"
-    />
+    <PRingLoader v-if="loading" :size="loaderSize" :class="classes.loader" />
   </Component>
 </template>
 
 <script lang="ts">
-import { type Size } from '@squirrel/components/p-btn/p-btn.types';
+import { type Size, SIZES } from '@squirrel/components/p-btn/p-btn.types';
 import PRingLoader from '@squirrel/components/p-ring-loader/p-ring-loader.vue';
 import { isExternalLink } from '@squirrel/utils/link';
 import { sanitizeUrl } from '@squirrel/utils/sanitization';
+import { tv, type VariantProps } from 'tailwind-variants';
 import { defineComponent, type PropType } from 'vue';
 import { type RouteLocationRaw, RouterLink } from 'vue-router';
 
-const BUTTON_TYPES = {
-  PRIMARY: 'primary',
-  SECONDARY: 'secondary',
-  PRIMARY_OUTLINE: 'primary-outline',
-  SECONDARY_OUTLINE: 'secondary-outline',
-  SECONDARY_OUTLINE_BLUE: 'secondary-outline-blue',
-  ERROR: 'error',
-  SUCCESS: 'success',
-  PRIMARY_LINK: 'primary-link',
-  SECONDARY_GHOST: 'secondary-ghost',
-  SECONDARY_GHOST_DARK: 'secondary-ghost-dark',
+const btnClasses = {
+  slots: {
+    button:
+      'relative inline-block rounded font-medium outline-none disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:cursor-default aria-disabled:opacity-50',
+    loader: 'absolute bottom-0 left-0 right-0 top-0 flex items-center justify-center font-medium',
+  },
+  variants: {
+    type: {
+      primary: {
+        button: 'bg-primary text-surface hover:bg-accent active:bg-p-blue-80',
+        loader: 'text-surface',
+      },
+      secondary: {
+        button: 'bg-p-gray-20 hover:bg-p-gray-30 active:bg-p-gray-40',
+        loader: 'text-p-purple-60',
+      },
+      'primary-outline': {
+        button: 'bg-p-blue-10 text-p-purple-60 ring-1 ring-inset ring-p-purple-60 hover:bg-p-gray-20',
+        loader: 'text-p-purple-60',
+      },
+      'secondary-outline': {
+        button:
+          'bg-surface text-p-purple-60 ring-1 ring-inset ring-p-gray-30 hover:bg-p-blue-10 aria-selected:bg-p-blue-10',
+        loader: 'text-p-purple-60',
+      },
+      'secondary-outline-blue': {
+        button:
+          'bg-surface text-p-purple-60 ring-1 ring-inset ring-p-gray-30 hover:bg-p-blue-10 aria-selected:bg-p-blue-15 aria-selected:text-p-blue-60',
+        loader: 'text-p-purple-60',
+      },
+      error: { button: 'bg-p-red-40 text-white hover:bg-p-red-50', loader: 'text-white' },
+      success: { button: 'bg-p-green-40 text-white hover:bg-p-green-50', loader: 'text-white' },
+      'primary-link': { button: 'bg-transparent text-primary underline hover:text-accent', loader: 'text-p-blue-60' },
+      'secondary-ghost': { button: 'text-on-surface hover:bg-p-gray-20', loader: 'text-p-purple-60' },
+      'secondary-ghost-dark': { button: 'text-white hover:bg-p-purple-50', loader: 'text-p-blue-15' },
+    },
+    size: {
+      sm: { button: 'px-2 py-1 text-sm' },
+      md: { button: 'px-6 py-2 text-base' },
+      lg: { button: 'px-6 py-2.5 text-lg' },
+    },
+  },
+  defaultVariants: {
+    type: 'primary',
+    size: 'md',
+  },
 } as const;
 
+const btn = tv(btnClasses);
+const BUTTON_TYPES = Object.keys(btnClasses.variants.type);
 const BUTTON_NATIVE_TYPES = ['button', 'submit', 'reset'] as const;
+const LOADER_SIZES = { sm: 24, md: 30, lg: 40 } as const satisfies { [key in Size]: number };
 
 type ButtonNativeType = (typeof BUTTON_NATIVE_TYPES)[number];
-type ButtonTypeKeys = keyof typeof BUTTON_TYPES;
-type ButtonType = (typeof BUTTON_TYPES)[ButtonTypeKeys];
-
-const DEFAULT_CLASSES = `relative inline-block outline-none disabled:opacity-50 disabled:cursor-default disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-default aria-disabled:pointer-events-none`;
-
-type ButtonClass = {
-  [key in ButtonType]: string;
-};
-
-const BUTTON_CLASSES: ButtonClass = {
-  [BUTTON_TYPES.PRIMARY]: 'text-surface bg-primary hover:bg-accent active:bg-p-blue-80',
-  [BUTTON_TYPES.SECONDARY]: 'bg-p-gray-20 hover:bg-p-gray-30 active:bg-p-gray-40',
-  [BUTTON_TYPES.PRIMARY_OUTLINE]: 'text-p-purple-60 bg-p-blue-10 ring-1 ring-inset ring-p-purple-60 hover:bg-p-gray-20',
-  [BUTTON_TYPES.SECONDARY_OUTLINE]:
-    'text-p-purple-60 bg-surface ring-1 ring-inset ring-p-gray-30 hover:bg-p-blue-10 aria-selected:bg-p-blue-10',
-  [BUTTON_TYPES.SECONDARY_OUTLINE_BLUE]:
-    'text-p-purple-60 bg-surface ring-1 ring-inset ring-p-gray-30 hover:bg-p-blue-10 aria-selected:bg-p-blue-15 aria-selected:text-p-blue-60',
-  [BUTTON_TYPES.ERROR]: 'text-white bg-p-red-40 hover:bg-p-red-50',
-  [BUTTON_TYPES.SUCCESS]: 'text-white bg-p-green-40 hover:bg-p-green-50',
-  [BUTTON_TYPES.PRIMARY_LINK]: 'text-primary bg-transparent hover:text-accent underline',
-  [BUTTON_TYPES.SECONDARY_GHOST]: 'text-on-surface hover:bg-p-gray-20',
-  [BUTTON_TYPES.SECONDARY_GHOST_DARK]: 'text-white hover:bg-p-purple-50',
-};
-
-const BUTTON_SIZES = {
-  sm: 'py-1 px-2 rounded font-medium text-sm',
-  md: 'py-2 px-6 rounded font-medium text-base',
-  lg: 'py-3 px-6 rounded font-medium text-lg',
-} as const satisfies { [key in Size]: string };
-
-const LOADER_SIZES = {
-  sm: 24,
-  md: 30,
-  lg: 40,
-} as const satisfies { [key in Size]: number };
-
-const LOADER_COLORS = {
-  [BUTTON_TYPES.PRIMARY]: 'var(--color-p-blue-15)',
-  [BUTTON_TYPES.SECONDARY]: 'var(--color-p-purple-60)',
-  [BUTTON_TYPES.PRIMARY_OUTLINE]: 'var(--color-p-blue-60)',
-  [BUTTON_TYPES.SECONDARY_OUTLINE]: 'var(--color-p-purple-60)',
-  [BUTTON_TYPES.SECONDARY_OUTLINE_BLUE]: 'var(--color-p-purple-60)',
-  [BUTTON_TYPES.ERROR]: 'var(--color-p-blue-15)',
-  [BUTTON_TYPES.SUCCESS]: 'var(--color-p-blue-15)',
-  [BUTTON_TYPES.PRIMARY_LINK]: 'var(--color-p-blue-60)',
-  [BUTTON_TYPES.SECONDARY_GHOST]: 'var(--color-p-purple-60)',
-  [BUTTON_TYPES.SECONDARY_GHOST_DARK]: 'var(--color-p-blue-15)',
-} as const;
+type ButtonType = NonNullable<VariantProps<typeof btn>['type']>;
 
 export default defineComponent({
   name: 'PBtn',
@@ -119,7 +106,7 @@ export default defineComponent({
       type: String as PropType<ButtonType>,
       default: 'primary',
       validator(value: ButtonType) {
-        return Object.values(BUTTON_TYPES).includes(value);
+        return BUTTON_TYPES.includes(value);
       },
     },
     /**
@@ -139,7 +126,7 @@ export default defineComponent({
       type: String as PropType<Size>,
       default: 'md',
       validator(value: Size) {
-        return Object.keys(BUTTON_SIZES).includes(value);
+        return SIZES.includes(value);
       },
     },
     /**
@@ -167,14 +154,13 @@ export default defineComponent({
   },
   computed: {
     classes() {
-      return `${DEFAULT_CLASSES} ${BUTTON_SIZES[this.size]} ${BUTTON_CLASSES[this.type]}`;
+      const { button, loader } = btn({ type: this.type, size: this.size });
+
+      return { button: button(), loader: loader() };
     },
     loaderSize() {
       return Number(`${LOADER_SIZES[this.size]}`);
     },
-    loaderColor() {
-      return LOADER_COLORS[this.type];
-    },
   },
   methods: {
     isExternalLink,

package/squirrel/components/p-file-upload/p-file-upload.spec.js

@@ -40,14 +40,9 @@ describe('PFileUpload.vue', () => {
       },
     });
 
-    expect(wrapper.find('label').classes()).toEqual([
-      'block',
-      'mb-1',
-      'font-medium',
-      'text-sm',
-      "after:content-['_*']",
-      'after:text-on-error',
-    ]);
+    const labelClasses = ['block', 'mb-1', 'font-medium', 'text-sm', 'after:content-["_*"]', 'after:text-on-error'];
+
+    expect(wrapper.find('label').classes()).toEqual(expect.arrayContaining(labelClasses));
   });
 
   it('sets the disabled state correctly', () => {

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

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

package/squirrel/components/p-inline-date-picker/p-inline-date-picker.spec.js

@@ -60,16 +60,9 @@ describe('PInlineDatePicker.vue', () => {
   it('adds the required class when the required prop is set', () => {
     const wrapper = createWrapper({ label: 'test datepicker', required: true });
 
-    expect(wrapper.find('label').classes()).toEqual([
-      'block',
-      'mb-1',
-      'font-medium',
-      'text-sm',
-      "after:content-['_*']",
-      'after:text-on-error',
-    ]);
-
-    expect(wrapper.props().required).toBe(true);
+    const labelClasses = ['block', 'mb-1', 'font-medium', 'text-sm', 'after:content-["_*"]', 'after:text-on-error'];
+
+    expect(wrapper.find('label').classes()).toEqual(expect.arrayContaining(labelClasses));
   });
 
   it('passes listeners to the datepicker', () => {

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

@@ -62,14 +62,9 @@ describe('PInput.vue', () => {
       },
     });
 
-    expect(wrapper.find('label').classes()).toEqual([
-      'block',
-      'mb-1',
-      'font-medium',
-      'text-sm',
-      "after:content-['_*']",
-      'after:text-on-error',
-    ]);
+    const res = ['block', 'mb-1', 'font-medium', 'text-sm', 'after:content-["_*"]', 'after:text-on-error'];
+
+    expect(wrapper.find('label').classes()).toEqual(expect.arrayContaining(res));
   });
 
   it('sets the disabled state correctly', () => {