@pikas-ui/button - npm Package Compare versions

Comparing version 1.0.20 to 1.0.21

dist/button/Button.d.ts

 import { CSS, BorderRadiusType, FontsSizesType, FontsWeightsType, ColorsType } from '@pikas-ui/styles';
 import React from 'react';
-import { IconProps } from '@pikas-ui/icons';
+import { IconStyleType, IconProps } from '@pikas-ui/icons';
 import { ButtonTypeType, ButtonPaddingType, ButtonGapType, ButtonTextTransformType, ButtonEffectType, ButtonTargetType } from '../types.js';
@@ -13,3 +13,6 @@
     onClick?: () => void;
-    style?: CSS;
+    styles?: {
+        button: CSS;
+        icon: IconStyleType;
+    };
     form?: string;
@@ -16,0 +19,0 @@ loading?: boolean;

dist/button/Button.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }var _styles = require('@pikas-ui/styles');var _react = require('react'); var _react2 = _interopRequireDefault(_react);var _loader = require('@pikas-ui/loader');var _fontcolorcontrast = require('font-color-contrast'); var _fontcolorcontrast2 = _interopRequireDefault(_fontcolorcontrast);const P=_styles.styled.call(void 0, "button",{all:"unset",cursor:"pointer",outline:"none",display:"flex",alignItems:"center",justifyContent:"center",userSelect:"none",space:2,borderStyle:"solid",position:"relative",boxShadow:"$ELEVATION_BOTTOM_1",whiteSpace:"nowrap",boxSizing:"border-box",variants:{effect:{globalScale:{transition:"transform 250ms ease","&:hover":{transform:"scale(1.025)",transition:"transform 250ms ease"},"&:active":{transform:"scale(0.95)",transition:"transform 250ms ease"}},boxScale:{transition:"transform 250ms ease","&:after":{background:"inherit",content:"",position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:-1,transition:"transform 250ms ease",borderRadius:"inherit"},"&:hover:after":{transform:"scale(1.1)",transition:"transform 250ms"},"&:active":{transform:"scale(0.95)",transition:"transform 250ms ease"}},opacity:{transition:"opacity 500ms","&:hover":{opacity:.8},"&:active":{opacity:1,transition:"opacity 0s"}}},padding:{sm:{padding:"4px 24px"},md:{padding:"8px 32px"},lg:{padding:"16px 40px"}},state:{true:{cursor:"initial",opacity:.5}}}}),j=_styles.styled.call(void 0, "div",{display:"flex",alignItems:"center",justifyContent:"center",variants:{textTransform:{capitalize:{textTransform:"capitalize"},uppercase:{textTransform:"uppercase"},default:{"span::first-letter":{textTransform:"uppercase"}},none:{}},gap:{sm:{customGap:4},md:{customGap:8},lg:{customGap:16}}}}),H=_styles.styled.call(void 0, "div",{display:"flex",alignItems:"center",justifyContent:"center",position:"absolute",top:0,left:0,right:0,bottom:0}),X= exports.Button =_react.forwardRef.call(void 0, function({type:i,fullWidth:d,id:m,name:$,color:e,colorHex:a,textColor:p,textColorHex:f,style:y,padding:g,form:E,loading:s,disabled:o,borderRadius:T,fontSize:C,textTransform:R,fontWeight:b,effect:h,onClick:x,children:W,gap:L,href:w,LeftIcon:S,RightIcon:B,outlined:v,borderWidth:k,target:A},F){const z=_react.useCallback.call(void 0, ()=>{o||s||_optionalChain([x, 'optionalCall', _ => _()])},[o,x,s]),l=_react.useCallback.call(void 0, ()=>{if(e)return _styles.theme.colors[e].value;if(a)return a},[e,a]),r=_react.useCallback.call(void 0, ()=>{if(p)return _styles.theme.colors[p].value;if(f)return f;if(e)return v?_styles.theme.colors[e].value:_fontcolorcontrast2.default.call(void 0, _styles.theme.colors[e||"PRIMARY"].value,.7)},[p,f]),M=()=>_react2.default.createElement(_react2.default.Fragment,null,_react2.default.createElement(H,null,_react2.default.createElement(_loader.BeatLoader,{size:_styles.theme.fontSizes["EM-XX-SMALL"].value,colorHex:r(),loading:s})),_react2.default.createElement(j,{textTransform:R,gap:L,css:{opacity:s?0:1}},S?_react2.default.createElement(S,{size:"1em",colorHex:r()}):null,_react2.default.createElement("span",null,W),B?_react2.default.createElement(B,{size:"1em",colorHex:r()}):null)),I=()=>v?{backgroundColor:"$TRANSPARENT",borderColor:l(),color:r()}:{backgroundColor:l(),borderColor:l(),color:r()};return i==="link"?_react2.default.createElement(P,{as:"a",href:w,target:A,type:i,id:m,onClick:z,state:o,padding:g,effect:o?void 0:h,css:{width:d?"100%":"auto",br:T,fontWeight:`$${b}`,borderWidth:k,fontSize:`$${C}`,...I(),...y}},M()):_react2.default.createElement(P,{ref:F,form:E,type:i,id:m,name:$,onClick:z,state:o,padding:g,effect:o?void 0:h,css:{width:d?"100%":"auto",br:T,fontWeight:`$${b}`,borderWidth:k,fontSize:`$${C}`,...I(),...y}},M())});X.defaultProps={type:"button",fullWidth:!1,disabled:!1,loading:!1,borderRadius:"md",fontSize:"EM-MEDIUM",padding:"md",textTransform:"default",color:"PRIMARY",fontWeight:"NORMAL",gap:"md",effect:"opacity",borderWidth:2,outlined:!1};exports.Button = X;
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }var _styles = require('@pikas-ui/styles');var _react = require('react'); var _react2 = _interopRequireDefault(_react);var _loader = require('@pikas-ui/loader');var _fontcolorcontrast = require('font-color-contrast'); var _fontcolorcontrast2 = _interopRequireDefault(_fontcolorcontrast);const P=_styles.styled.call(void 0, "button",{all:"unset",cursor:"pointer",outline:"none",display:"flex",alignItems:"center",justifyContent:"center",userSelect:"none",space:2,borderStyle:"solid",position:"relative",boxShadow:"$ELEVATION_BOTTOM_1",whiteSpace:"nowrap",boxSizing:"border-box",variants:{effect:{globalScale:{transition:"transform 250ms ease","&:hover":{transform:"scale(1.025)",transition:"transform 250ms ease"},"&:active":{transform:"scale(0.95)",transition:"transform 250ms ease"}},boxScale:{transition:"transform 250ms ease","&:after":{background:"inherit",content:"",position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:-1,transition:"transform 250ms ease",borderRadius:"inherit"},"&:hover:after":{transform:"scale(1.1)",transition:"transform 250ms"},"&:active":{transform:"scale(0.95)",transition:"transform 250ms ease"}},opacity:{transition:"opacity 500ms","&:hover":{opacity:.8},"&:active":{opacity:1,transition:"opacity 0s"}}},padding:{sm:{padding:"4px 24px"},md:{padding:"8px 32px"},lg:{padding:"16px 40px"}},state:{true:{cursor:"initial",opacity:.5}}}}),j=_styles.styled.call(void 0, "div",{display:"flex",alignItems:"center",justifyContent:"center",variants:{textTransform:{capitalize:{textTransform:"capitalize"},uppercase:{textTransform:"uppercase"},default:{"span::first-letter":{textTransform:"uppercase"}},none:{}},gap:{sm:{customGap:4},md:{customGap:8},lg:{customGap:16}}}}),H=_styles.styled.call(void 0, "div",{display:"flex",alignItems:"center",justifyContent:"center",position:"absolute",top:0,left:0,right:0,bottom:0}),X= exports.Button =_react.forwardRef.call(void 0, function({type:a,fullWidth:m,id:y,name:$,color:e,colorHex:p,textColor:f,textColorHex:l,styles:s,padding:g,form:E,loading:i,disabled:o,borderRadius:T,fontSize:b,textTransform:R,fontWeight:C,effect:S,onClick:h,children:W,gap:L,href:w,LeftIcon:x,RightIcon:B,outlined:v,borderWidth:k,target:A},F){const z=_react.useCallback.call(void 0, ()=>{o||i||_optionalChain([h, 'optionalCall', _ => _()])},[o,h,i]),u=_react.useCallback.call(void 0, ()=>{if(e)return _styles.theme.colors[e].value;if(p)return p},[e,p]),n=_react.useCallback.call(void 0, ()=>{if(f)return _styles.theme.colors[f].value;if(l)return l;if(e)return v?_styles.theme.colors[e].value:_fontcolorcontrast2.default.call(void 0, _styles.theme.colors[e||"PRIMARY"].value,.7)},[f,l]),I=()=>_react2.default.createElement(_react2.default.Fragment,null,_react2.default.createElement(H,null,_react2.default.createElement(_loader.BeatLoader,{size:_styles.theme.fontSizes["EM-XX-SMALL"].value,colorHex:n(),loading:i})),_react2.default.createElement(j,{textTransform:R,gap:L,css:{opacity:i?0:1}},x?_react2.default.createElement(x,{size:"1em",colorHex:n(),styles:_optionalChain([s, 'optionalAccess', _2 => _2.icon])}):null,_react2.default.createElement("span",null,W),B?_react2.default.createElement(B,{size:"1em",colorHex:n(),styles:_optionalChain([s, 'optionalAccess', _3 => _3.icon])}):null)),M=()=>v?{backgroundColor:"$TRANSPARENT",borderColor:u(),color:n()}:{backgroundColor:u(),borderColor:u(),color:n()};return a==="link"?_react2.default.createElement(P,{as:"a",href:w,target:A,type:a,id:y,onClick:z,state:o,padding:g,effect:o?void 0:S,css:{width:m?"100%":"auto",br:T,fontWeight:`$${C}`,borderWidth:k,fontSize:`$${b}`,...M(),..._optionalChain([s, 'optionalAccess', _4 => _4.button])}},I()):_react2.default.createElement(P,{ref:F,form:E,type:a,id:y,name:$,onClick:z,state:o,padding:g,effect:o?void 0:S,css:{width:m?"100%":"auto",br:T,fontWeight:`$${C}`,borderWidth:k,fontSize:`$${b}`,...M(),..._optionalChain([s, 'optionalAccess', _5 => _5.button])}},I())});X.defaultProps={type:"button",fullWidth:!1,disabled:!1,loading:!1,borderRadius:"md",fontSize:"EM-MEDIUM",padding:"md",textTransform:"default",color:"PRIMARY",fontWeight:"NORMAL",gap:"md",effect:"opacity",borderWidth:2,outlined:!1};exports.Button = X;
 //# sourceMappingURL=Button.js.map

dist/buttonIcon/ButtonIcon.d.ts

 import { CSS, BorderRadiusType, SizesType, ColorsType } from '@pikas-ui/styles';
 import React from 'react';
 import { ButtonTypeType, ButtonPaddingType, ButtonEffectType, ButtonTargetType } from '../types.js';
-import { IconProps } from '@pikas-ui/icons';
+import { IconProps, IconStyleType } from '@pikas-ui/icons';
 
@@ -12,3 +12,6 @@ interface ButtonIconProps {
     onClick?: () => void;
-    style?: CSS;
+    styles?: {
+        button: CSS;
+        icon: IconStyleType;
+    };
     form?: string;
@@ -15,0 +18,0 @@ loading?: boolean;

dist/buttonIcon/ButtonIcon.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }var _styles = require('@pikas-ui/styles');var _react = require('react'); var _react2 = _interopRequireDefault(_react);var _loader = require('@pikas-ui/loader');var _fontcolorcontrast = require('font-color-contrast'); var _fontcolorcontrast2 = _interopRequireDefault(_fontcolorcontrast);const x=_styles.styled.call(void 0, "button",{all:"unset",cursor:"pointer",outline:"none",display:"flex",alignItems:"center",justifyContent:"center",userSelect:"none",space:2,borderStyle:"solid",position:"relative",boxShadow:"$ELEVATION_BOTTOM_1",whiteSpace:"nowrap",boxSizing:"border-box",variants:{effect:{globalScale:{transition:"transform 250ms ease","&:hover":{transform:"scale(1.025)",transition:"transform 250ms ease"},"&:active":{transform:"scale(0.95)",transition:"transform 250ms ease"}},boxScale:{transition:"transform 250ms ease","&:after":{background:"inherit",content:"",position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:-1,transition:"transform 250ms ease",borderRadius:"inherit"},"&:hover:after":{transform:"scale(1.1)",transition:"transform 250ms"},"&:active":{transform:"scale(0.95)",transition:"transform 250ms ease"}},opacity:{transition:"opacity 500ms","&:hover":{opacity:.8},"&:active":{opacity:1,transition:"opacity 0s"}}},padding:{sm:{padding:4},md:{padding:8},lg:{padding:16}},state:{true:{cursor:"initial",opacity:.5}}}}),j=_styles.styled.call(void 0, "div",{display:"flex",alignItems:"center",justifyContent:"center"}),D=_styles.styled.call(void 0, "div",{display:"flex",alignItems:"center",justifyContent:"center",position:"absolute",top:0,left:0,right:0,bottom:0}),W= exports.ButtonIcon =_react.forwardRef.call(void 0, function({type:s,id:u,name:P,color:o,colorHex:a,iconColor:f,iconColorHex:c,style:m,padding:y,form:z,loading:r,disabled:e,borderRadius:g,effect:C,onClick:b,href:M,outlined:T,Icon:R,size:S,borderWidth:B,target:E},O){const h=_react.useCallback.call(void 0, ()=>{e||r||_optionalChain([b, 'optionalCall', _ => _()])},[e,b,r]),p=_react.useCallback.call(void 0, ()=>{if(o)return _styles.theme.colors[o].value;if(a)return a},[o,a]),n=_react.useCallback.call(void 0, ()=>{if(f)return _styles.theme.colors[f].value;if(c)return c;if(o)return T?_styles.theme.colors[o].value:_fontcolorcontrast2.default.call(void 0, _styles.theme.colors[o||"PRIMARY"].value,.7)},[f,c]),v=()=>_react2.default.createElement(_react2.default.Fragment,null,_react2.default.createElement(D,null,_react2.default.createElement(_loader.ClipLoader,{size:_styles.Sizes[S||"md"],colorHex:n(),loading:r})),_react2.default.createElement(j,{css:{opacity:r?0:1}},_react2.default.createElement(R,{size:_styles.Sizes[S||"md"],colorHex:n()}))),I=()=>T?{backgroundColor:"$TRANSPARENT",borderColor:p(),color:n()}:{backgroundColor:p(),borderColor:p(),color:n()};return s==="link"?_react2.default.createElement(x,{as:"a",href:M,target:E,type:s,id:u,onClick:h,state:e,padding:y,effect:e?void 0:C,css:{br:g,borderWidth:B,...I(),...m}},v()):_react2.default.createElement(x,{ref:O,form:z,type:s,id:u,name:P,onClick:h,state:e,padding:y,effect:e?void 0:C,css:{br:g,borderWidth:B,...I(),...m}},v())});W.defaultProps={type:"button",disabled:!1,loading:!1,borderRadius:"md",color:"PRIMARY",size:"md",effect:"opacity",borderWidth:2};exports.ButtonIcon = W;
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }var _styles = require('@pikas-ui/styles');var _react = require('react'); var _react2 = _interopRequireDefault(_react);var _loader = require('@pikas-ui/loader');var _fontcolorcontrast = require('font-color-contrast'); var _fontcolorcontrast2 = _interopRequireDefault(_fontcolorcontrast);const x=_styles.styled.call(void 0, "button",{all:"unset",cursor:"pointer",outline:"none",display:"flex",alignItems:"center",justifyContent:"center",userSelect:"none",space:2,borderStyle:"solid",position:"relative",boxShadow:"$ELEVATION_BOTTOM_1",whiteSpace:"nowrap",boxSizing:"border-box",variants:{effect:{globalScale:{transition:"transform 250ms ease","&:hover":{transform:"scale(1.025)",transition:"transform 250ms ease"},"&:active":{transform:"scale(0.95)",transition:"transform 250ms ease"}},boxScale:{transition:"transform 250ms ease","&:after":{background:"inherit",content:"",position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:-1,transition:"transform 250ms ease",borderRadius:"inherit"},"&:hover:after":{transform:"scale(1.1)",transition:"transform 250ms"},"&:active":{transform:"scale(0.95)",transition:"transform 250ms ease"}},opacity:{transition:"opacity 500ms","&:hover":{opacity:.8},"&:active":{opacity:1,transition:"opacity 0s"}}},padding:{sm:{padding:4},md:{padding:8},lg:{padding:16}},state:{true:{cursor:"initial",opacity:.5}}}}),j=_styles.styled.call(void 0, "div",{display:"flex",alignItems:"center",justifyContent:"center"}),D=_styles.styled.call(void 0, "div",{display:"flex",alignItems:"center",justifyContent:"center",position:"absolute",top:0,left:0,right:0,bottom:0}),W= exports.ButtonIcon =_react.forwardRef.call(void 0, function({type:s,id:y,name:P,color:o,colorHex:a,iconColor:c,iconColorHex:f,styles:p,padding:m,form:z,loading:r,disabled:e,borderRadius:g,effect:b,onClick:C,href:M,outlined:T,Icon:R,size:S,borderWidth:B,target:E},O){const I=_react.useCallback.call(void 0, ()=>{e||r||_optionalChain([C, 'optionalCall', _ => _()])},[e,C,r]),l=_react.useCallback.call(void 0, ()=>{if(o)return _styles.theme.colors[o].value;if(a)return a},[o,a]),n=_react.useCallback.call(void 0, ()=>{if(c)return _styles.theme.colors[c].value;if(f)return f;if(o)return T?_styles.theme.colors[o].value:_fontcolorcontrast2.default.call(void 0, _styles.theme.colors[o||"PRIMARY"].value,.7)},[c,f]),h=()=>_react2.default.createElement(_react2.default.Fragment,null,_react2.default.createElement(D,null,_react2.default.createElement(_loader.ClipLoader,{size:_styles.Sizes[S||"md"],colorHex:n(),loading:r})),_react2.default.createElement(j,{css:{opacity:r?0:1}},_react2.default.createElement(R,{size:_styles.Sizes[S||"md"],colorHex:n(),styles:_optionalChain([p, 'optionalAccess', _2 => _2.icon])}))),v=()=>T?{backgroundColor:"$TRANSPARENT",borderColor:l(),color:n()}:{backgroundColor:l(),borderColor:l(),color:n()};return s==="link"?_react2.default.createElement(x,{as:"a",href:M,target:E,type:s,id:y,onClick:I,state:e,padding:m,effect:e?void 0:b,css:{br:g,borderWidth:B,...v(),..._optionalChain([p, 'optionalAccess', _3 => _3.button])}},h()):_react2.default.createElement(x,{ref:O,form:z,type:s,id:y,name:P,onClick:I,state:e,padding:m,effect:e?void 0:b,css:{br:g,borderWidth:B,...v(),..._optionalChain([p, 'optionalAccess', _4 => _4.button])}},h())});W.defaultProps={type:"button",disabled:!1,loading:!1,borderRadius:"md",color:"PRIMARY",size:"md",effect:"opacity",borderWidth:2};exports.ButtonIcon = W;
 //# sourceMappingURL=ButtonIcon.js.map

package.json

 {
   "name": "@pikas-ui/button",
-  "version": "1.0.20",
+  "version": "1.0.21",
   "private": false,
@@ -33,5 +33,5 @@ "description": "",
   "dependencies": {
-    "@pikas-ui/icons": "1.0.20",
-    "@pikas-ui/loader": "1.0.20",
-    "@pikas-ui/styles": "1.0.20",
+    "@pikas-ui/icons": "1.0.21",
+    "@pikas-ui/loader": "1.0.21",
+    "@pikas-ui/styles": "1.0.21",
     "font-color-contrast": "^11.1.0",
@@ -38,0 +38,0 @@ "react": "^18.1.0",

README.md

@@ -53,3 +53,6 @@ # @pikas-ui/button
 | `color`         | The color of the button.                          | `ColorsType`                                   | `"PRIMARY"`   |
-| `style`         | The style of the button.                          | `CSS`                                          | -             |
+| `colorHex`      | The color of the button (hex).                    | `string`                                       | -             |
+| `textColor`     | The color of the button.                          | `ColorsType`                                   | -             |
+| `textColorHex`  | The color of the button (hex).                    | `string`                                       | -             |
+| `styles`        | The style of the button.                          | `object`                                       | -             |
 | `padding`       | The padding of the button.                        | `"sm", "md", "lg"`                             | `"md"`        |
@@ -95,3 +98,6 @@ | `form`          | The form of the button.                           | `string`                                       | -             |
 | `color`        | The color of the button.                          | `ColorsType`                           | `"PRIMARY"` |
-| `style`        | The style of the button.                          | `CSS`                                  | -           |
+| `colorHex`     | The color of the button (hex).                    | `string`                               | -           |
+| `iconColor`    | The color of the button.                          | `ColorsType`                           | -           |
+| `iconColorHex` | The color of the button (hex).                    | `string`                               | -           |
+| `styles`       | The style of the button.                          | `object`                               | -           |
 | `padding`      | The padding of the button.                        | `"sm", "md", "lg"`                     | `"md"`      |
@@ -98,0 +104,0 @@ | `form`         | The form of the button.                           | `string`                               | -           |

No alert changes

Improved metrics

Total package byte prevSize

78218

increased by3.23%

Lines of code

193

increased by4.32%

Number of lines in readme file

116

increased by5.45%

Dependency changes

• + Added@pikas-ui/icons@1.0.21(transitive)

• + Added@pikas-ui/loader@1.0.21(transitive)

• + Added@pikas-ui/styles@1.0.21(transitive)

• - Removed@pikas-ui/icons@1.0.20(transitive)

• - Removed@pikas-ui/loader@1.0.20(transitive)

• - Removed@pikas-ui/styles@1.0.20(transitive)

• Updated@pikas-ui/icons@1.0.21

• Updated@pikas-ui/loader@1.0.21

• Updated@pikas-ui/styles@1.0.21