@kvdbil/components 13.7.1 → 13.8.0

package/cjs/components/Button/index.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components"),l=require("../../theme.js"),r=require("../Spinner/index.js"),i=require("../../typography/ButtonText/index.js"),a=require("./styles.js");function s(x){return x&&typeof x=="object"&&"default"in x?x:{default:x}}var o=s(e),n=s(t);const u=n.default.button`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components"),l=require("../../theme.js"),r=require("../Spinner/index.js"),i=require("../../typography/ButtonText/index.js"),a=require("./styles.js");function s(x){return x&&typeof x=="object"&&"default"in x?x:{default:x}}var o=s(e),n=s(t);const d=n.default.button`
   ${i.BasicButtonFontStyle}
   box-sizing: border-box;
   outline: none;
@@ -10,7 +10,7 @@
   width: ${({fullWidth:x})=>x&&"100%"};
   display: flex;
   align-items: center;
-  justify-content: ${({sufixIcon:x,prefixIcon:b,isLoading:z})=>z||!x&&!b?"center":"space-between"};
+  justify-content: ${({sufixIcon:x,prefixIcon:h,isLoading:S})=>S||!x&&!h?"center":"space-between"};
 
   ${({size:x="small"})=>a.fontSizes[x]||i.ButtonRegularTextStyle}
   ${({size:x})=>t.css`
@@ -19,21 +19,22 @@
     ${x==="large"&&a.largeSizeStyles()}
   `}
   background-color: transparent;
-  transition: color 0.3s ease, background-color 0.3s ease, border 0.3s ease;
-  ${({variant:x="solid",color:b="primary",disabled:z,theme:S})=>t.css`
-    ${z?a.disabledColorStyles(S,x):a.colorStyles[x](S,b)}
+  transition: color 0.3s ease, background-color 0.3s ease, border 0.3s ease,
+    filter 0.3s;
+  ${({variant:x="solid",color:h="primary",colorShade:S="main",disabled:v,theme:$})=>t.css`
+    ${v?a.disabledColorStyles($,x):a.colorStyles[x]($,h,S)}
   `}
   &:focus-visible {
     box-shadow: 0px 0px 0px 1px ${({theme:x})=>x.colors.gray.light5};
   }
-`,d={smaller:"1rem",small:"1rem",regular:"1.5rem",large:"1.5rem"},f={smaller:"0.5rem",small:"0.5rem",regular:"1rem",large:"1rem"},c=n.default.span`
+`,u={smaller:"1rem",small:"1rem",regular:"1.5rem",large:"1.5rem"},c={smaller:"0.5rem",small:"0.5rem",regular:"1rem",large:"1rem"},f=n.default.span`
   display: flex;
-  margin-right: ${({type:x,size:b})=>x==="prefix"?f[b]:0};
-  margin-left: ${({type:x,size:b})=>x==="sufix"?f[b]:0};
-  font-size: ${({size:x})=>d[x]};
+  margin-right: ${({type:x,size:h})=>x==="prefix"?c[h]:0};
+  margin-left: ${({type:x,size:h})=>x==="sufix"?c[h]:0};
+  font-size: ${({size:x})=>u[x]};
   opacity: ${({isLoading:x})=>x?0:1};
 `,m=n.default(r.default)`
   position: absolute;
 `,p=n.default.span`
   opacity: ${({isLoading:x})=>x?0:1};
-`,g={smaller:1,small:1,regular:1.5,large:1.5},y=e.forwardRef(({size:x="small",color:b="primary",variant:z="solid",fullWidth:S=!1,isDisabled:j=!1,isLoading:$=!1,children:q,sufixIcon:v,prefixIcon:E,minWidth:B,as:I="button",...W},w)=>{return o.default.createElement(u,{...W,as:I,minWidth:B,color:b,disabled:j||$,fullWidth:S,theme:l.default,variant:z,size:x,isLoading:$,ref:w,prefixIcon:E,sufixIcon:v},o.default.createElement(o.default.Fragment,null,E&&o.default.createElement(c,{size:x,type:"prefix",isLoading:$},E),(L=$,typeof(h=q)=="string"||typeof h=="number"?o.default.createElement(p,{isLoading:L},h):o.default.isValidElement(h)?o.default.cloneElement(h,{style:{...h.props.style,opacity:L?0:1}}):h),v&&o.default.createElement(c,{size:x,type:"sufix",isLoading:$},v),$&&o.default.createElement(m,{color:l.default.colors.gray.light1,size:g[x]})));var h,L});y.displayName="Button",exports.Button=y,exports.default=y;
+`,g={smaller:1,small:1,regular:1.5,large:1.5},y=e.forwardRef(({size:x="small",color:h="primary",colorShade:S="main",variant:v="solid",fullWidth:$=!1,isDisabled:q=!1,isLoading:z=!1,children:B,sufixIcon:E,prefixIcon:L,minWidth:I,as:W="button",...w},k)=>{return o.default.createElement(d,{...w,as:W,minWidth:I,color:h,colorShade:S,disabled:q||z,fullWidth:$,theme:l.default,variant:v,size:x,isLoading:z,ref:k,prefixIcon:L,sufixIcon:E},o.default.createElement(o.default.Fragment,null,L&&o.default.createElement(f,{size:x,type:"prefix",isLoading:z},L),(j=z,typeof(b=B)=="string"||typeof b=="number"?o.default.createElement(p,{isLoading:j},b):o.default.isValidElement(b)?o.default.cloneElement(b,{style:{...b.props.style,opacity:j?0:1}}):b),E&&o.default.createElement(f,{size:x,type:"sufix",isLoading:z},E),z&&o.default.createElement(m,{color:l.default.colors.gray.light1,size:g[x]})));var b,j});y.displayName="Button",exports.Button=y,exports.default=y;

package/cjs/components/Button/styles.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var o=require("../../typography/ButtonText/index.js");require("react"),require("styled-components");const r={smaller:o.ButtonSmallTextStyle,small:o.ButtonRegularTextStyle,regular:o.ButtonRegularTextStyle,large:o.ButtonLargeTextStyle},l=(s,a)=>`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var o=require("../../typography/ButtonText/index.js");require("react"),require("styled-components");const r={smaller:o.ButtonSmallTextStyle,small:o.ButtonRegularTextStyle,regular:o.ButtonRegularTextStyle,large:o.ButtonLargeTextStyle},e=(s,a)=>`
   color: ${s.colors[a].main};
   border: 2px solid ${s.colors[a].main};
   background-color: transparent;
@@ -12,7 +12,7 @@
     border: 2px solid ${s.colors[a].light};
     color: ${s.colors[a].light};
   }
-`,n=(s,a)=>`
+`,l=(s,a)=>`
   color: ${a!=="neutral"?s.colors[a].main:s.colors.neutral.light};
   background-color: transparent;
 
@@ -23,30 +23,30 @@
   :active {
     color: ${s.colors[a].dark};
   }
-`,e=s=>`
+`,n=s=>`
   color: ${s.colors.gray.light1};
   cursor: not-allowed;
-`,t={solid:(s,a)=>`
+`,t={solid:(s,a,i)=>`
   color: ${s.colors.text.light};
-  background-color: ${s.colors[a].main};
+  background-color: ${s.colors[a][i]};
 
   :hover {
     border-color: ${s.colors[a].dark};
-    background-color: ${s.colors[a].dark};
+    filter: brightness(0.9)
   }
 
   :active {
     border-color: ${s.colors[a].light};
-    background-color: ${s.colors[a].light}
+    filter: brightness(1.1)
   }
-`,outline:l,flat:n};exports.colorStyles=t,exports.disabledColorStyles=(s,a)=>a==="solid"?`
-    ${e(s)};
+`,outline:e,flat:l};exports.colorStyles=t,exports.disabledColorStyles=(s,a)=>a==="solid"?`
+    ${n(s)};
     background-color: ${s.colors.gray.light4};`:a==="outline"?`
-    ${e(s)};
-    border: 2px solid ${s.colors.gray.light1};`:e(s),exports.flatColorStyles=n,exports.fontSizes=r,exports.largeSizeStyles=()=>`
+    ${n(s)};
+    border: 2px solid ${s.colors.gray.light1};`:n(s),exports.flatColorStyles=l,exports.fontSizes=r,exports.largeSizeStyles=()=>`
   padding: 0.25rem 1.5rem;
   min-height: 3.75rem;
-`,exports.outlineColorStyles=l,exports.regularSizeStyles=()=>`
+`,exports.outlineColorStyles=e,exports.regularSizeStyles=()=>`
   padding: 0.25rem 1.5rem;
   min-height: 3rem;
 `,exports.smallerAndSmallSizeStyles=()=>`

package/esm/components/Button/index.js

@@ -1,5 +1,5 @@
-import r,{forwardRef as w}from"react";import n,{css as y}from"styled-components";import f from"../../theme.js";import h from"../Spinner/index.js";import{BasicButtonFontStyle as C,ButtonRegularTextStyle as R}from"../../typography/ButtonText/index.js";import{fontSizes as T,smallerAndSmallSizeStyles as z,regularSizeStyles as A,largeSizeStyles as _,disabledColorStyles as k,colorStyles as F}from"./styles.js";const p=0,N=n.button`
-  ${C}
+import r,{forwardRef as h}from"react";import n,{css as f}from"styled-components";import g from"../../theme.js";import C from"../Spinner/index.js";import{BasicButtonFontStyle as R,ButtonRegularTextStyle as T}from"../../typography/ButtonText/index.js";import{fontSizes as z,smallerAndSmallSizeStyles as A,regularSizeStyles as _,largeSizeStyles as k,disabledColorStyles as F,colorStyles as N}from"./styles.js";const c=0,O=n.button`
+  ${R}
   box-sizing: border-box;
   outline: none;
   cursor: pointer;
@@ -12,28 +12,29 @@ import r,{forwardRef as w}from"react";import n,{css as y}from"styled-components"
   align-items: center;
   justify-content: ${({sufixIcon:e,prefixIcon:t,isLoading:s})=>!s&&(e||t)?"space-between":"center"};
 
-  ${({size:e="small"})=>T[e]||R}
-  ${({size:e})=>y`
-    ${(e==="smaller"||e==="small")&&z()}
-    ${e==="regular"&&A()}
-    ${e==="large"&&_()}
+  ${({size:e="small"})=>z[e]||T}
+  ${({size:e})=>f`
+    ${(e==="smaller"||e==="small")&&A()}
+    ${e==="regular"&&_()}
+    ${e==="large"&&k()}
   `}
   background-color: transparent;
-  transition: color 0.3s ease, background-color 0.3s ease, border 0.3s ease;
-  ${({variant:e="solid",color:t="primary",disabled:s,theme:a})=>y`
-    ${s?k(a,e):F[e](a,t)}
+  transition: color 0.3s ease, background-color 0.3s ease, border 0.3s ease,
+    filter 0.3s;
+  ${({variant:e="solid",color:t="primary",colorShade:s="main",disabled:m,theme:a})=>f`
+    ${m?F(a,e):N[e](a,t,s)}
   `}
   &:focus-visible {
     box-shadow: 0px 0px 0px 1px ${({theme:e})=>e.colors.gray.light5};
   }
-`,O={smaller:"1rem",small:"1rem",regular:"1.5rem",large:"1.5rem"},g={smaller:"0.5rem",small:"0.5rem",regular:"1rem",large:"1rem"},S=n.span`
+`,v={smaller:"1rem",small:"1rem",regular:"1.5rem",large:"1.5rem"},S={smaller:"0.5rem",small:"0.5rem",regular:"1rem",large:"1rem"},$=n.span`
   display: flex;
-  margin-right: ${({type:e,size:t})=>e==="prefix"?g[t]:0};
-  margin-left: ${({type:e,size:t})=>e==="sufix"?g[t]:0};
-  font-size: ${({size:e})=>O[e]};
-  opacity: ${({isLoading:e})=>e?p:1};
-`,v=n(h)`
+  margin-right: ${({type:e,size:t})=>e==="prefix"?S[t]:0};
+  margin-left: ${({type:e,size:t})=>e==="sufix"?S[t]:0};
+  font-size: ${({size:e})=>v[e]};
+  opacity: ${({isLoading:e})=>e?c:1};
+`,D=n(C)`
   position: absolute;
-`,D=n.span`
-  opacity: ${({isLoading:e})=>e?p:1};
-`,G={smaller:1,small:1,regular:1.5,large:1.5},c=w(({size:e="small",color:t="primary",variant:s="solid",fullWidth:a=!1,isDisabled:$=!1,isLoading:o=!1,children:b,sufixIcon:m,prefixIcon:i,minWidth:d,as:x="button",...E},B)=>{const j=(l,u)=>typeof l=="string"||typeof l=="number"?r.createElement(D,{isLoading:u},l):r.isValidElement(l)?r.cloneElement(l,{style:{...l.props.style,opacity:u?p:1}}):l;return r.createElement(N,{...E,as:x,minWidth:d,color:t,disabled:$||o,fullWidth:a,theme:f,variant:s,size:e,isLoading:o,ref:B,prefixIcon:i,sufixIcon:m},r.createElement(r.Fragment,null,i&&r.createElement(S,{size:e,type:"prefix",isLoading:o},i),j(b,o),m&&r.createElement(S,{size:e,type:"sufix",isLoading:o},m),o&&r.createElement(v,{color:f.colors.gray.light1,size:G[e]})))});c.displayName="Button";export{c as Button,c as default};
+`,G=n.span`
+  opacity: ${({isLoading:e})=>e?c:1};
+`,M={smaller:1,small:1,regular:1.5,large:1.5},u=h(({size:e="small",color:t="primary",colorShade:s="main",variant:m="solid",fullWidth:a=!1,isDisabled:b=!1,isLoading:o=!1,children:d,sufixIcon:i,prefixIcon:p,minWidth:x,as:E="button",...B},j)=>{const w=(l,y)=>typeof l=="string"||typeof l=="number"?r.createElement(G,{isLoading:y},l):r.isValidElement(l)?r.cloneElement(l,{style:{...l.props.style,opacity:y?c:1}}):l;return r.createElement(O,{...B,as:E,minWidth:x,color:t,colorShade:s,disabled:b||o,fullWidth:a,theme:g,variant:m,size:e,isLoading:o,ref:j,prefixIcon:p,sufixIcon:i},r.createElement(r.Fragment,null,p&&r.createElement($,{size:e,type:"prefix",isLoading:o},p),w(d,o),i&&r.createElement($,{size:e,type:"sufix",isLoading:o},i),o&&r.createElement(D,{color:g.colors.gray.light1,size:M[e]})))});u.displayName="Button";export{u as Button,u as default};

package/esm/components/Button/styles.js

@@ -1,26 +1,26 @@
-import{ButtonSmallTextStyle as a,ButtonRegularTextStyle as s,ButtonLargeTextStyle as c}from"../../typography/ButtonText/index.js";import"react";import"styled-components";const i={smaller:a,small:s,regular:s,large:c},d=()=>`
+import{ButtonSmallTextStyle as e,ButtonRegularTextStyle as t,ButtonLargeTextStyle as a}from"../../typography/ButtonText/index.js";import"react";import"styled-components";const c={smaller:e,small:t,regular:t,large:a},d=()=>`
   padding: 0.25rem 0.75rem;
   min-height: 2.5rem;
-`,e=()=>`
+`,g=()=>`
   padding: 0.25rem 1.5rem;
   min-height: 3rem;
-`,g=()=>`
+`,u=()=>`
   padding: 0.25rem 1.5rem;
   min-height: 3.75rem;
-`,u=(o,r)=>`
+`,y=(o,r,n)=>`
   color: ${o.colors.text.light};
-  background-color: ${o.colors[r].main};
+  background-color: ${o.colors[r][n]};
 
   :hover {
     border-color: ${o.colors[r].dark};
-    background-color: ${o.colors[r].dark};
+    filter: brightness(0.9)
   }
 
   :active {
     border-color: ${o.colors[r].light};
-    background-color: ${o.colors[r].light}
+    filter: brightness(1.1)
   }
-`,t=(o,r)=>`
+`,s=(o,r)=>`
   color: ${o.colors[r].main};
   border: 2px solid ${o.colors[r].main};
   background-color: transparent;
@@ -34,7 +34,7 @@ import{ButtonSmallTextStyle as a,ButtonRegularTextStyle as s,ButtonLargeTextStyl
     border: 2px solid ${o.colors[r].light};
     color: ${o.colors[r].light};
   }
-`,n=(o,r)=>`
+`,i=(o,r)=>`
   color: ${r!=="neutral"?o.colors[r].main:o.colors.neutral.light};
   background-color: transparent;
 
@@ -48,8 +48,8 @@ import{ButtonSmallTextStyle as a,ButtonRegularTextStyle as s,ButtonLargeTextStyl
 `,l=o=>`
   color: ${o.colors.gray.light1};
   cursor: not-allowed;
-`,$=(o,r)=>r==="solid"?`
+`,S=(o,r)=>r==="solid"?`
     ${l(o)};
     background-color: ${o.colors.gray.light4};`:r==="outline"?`
     ${l(o)};
-    border: 2px solid ${o.colors.gray.light1};`:l(o),y={solid:u,outline:t,flat:n};export{y as colorStyles,$ as disabledColorStyles,n as flatColorStyles,i as fontSizes,g as largeSizeStyles,t as outlineColorStyles,e as regularSizeStyles,d as smallerAndSmallSizeStyles};
+    border: 2px solid ${o.colors.gray.light1};`:l(o),$={solid:y,outline:s,flat:i};export{$ as colorStyles,S as disabledColorStyles,i as flatColorStyles,c as fontSizes,u as largeSizeStyles,s as outlineColorStyles,g as regularSizeStyles,d as smallerAndSmallSizeStyles};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kvdbil/components",
-  "version": "13.7.1",
+  "version": "13.8.0",
   "sideEffects": false,
   "main": "cjs/index.js",
   "module": "esm/index.js",

package/types/components/Button/index.d.ts

@@ -1,8 +1,9 @@
 import React, { ComponentPropsWithRef, CSSProperties, ReactNode } from 'react';
-import { Color, Variant, Size } from '../../Types';
+import { Color, Variant, Size, ColorShade } from '../../Types';
 interface Props {
     size?: Size;
     color?: Color;
+    colorShade?: ColorShade;
     variant?: Variant;
     fullWidth?: boolean;
     style?: CSSProperties;
@@ -15,5 +16,5 @@ interface Props {
     as?: keyof JSX.IntrinsicElements;
 }
 export declare type ButtonProps = ComponentPropsWithRef<'button'> & Props;
-export declare const Button: React.ForwardRefExoticComponent<Pick<ButtonProps, "form" | "slot" | "style" | "title" | "type" | "name" | "key" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "as" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "size" | "minWidth" | "fullWidth" | "sufixIcon" | "prefixIcon" | "isLoading" | "variant" | "isDisabled"> & React.RefAttributes<HTMLElement>>;
+export declare const Button: React.ForwardRefExoticComponent<Pick<ButtonProps, "form" | "slot" | "style" | "title" | "type" | "name" | "key" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "as" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "size" | "minWidth" | "fullWidth" | "sufixIcon" | "prefixIcon" | "isLoading" | "variant" | "colorShade" | "isDisabled"> & React.RefAttributes<HTMLElement>>;
 export default Button;

package/types/components/Button/styles.d.ts

@@ -1,5 +1,5 @@
 import { Theme } from '../../theme';
-import { Color, Variant } from '../../Types';
+import { Color, ColorShade, Variant } from '../../Types';
 export declare const fontSizes: {
     smaller: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
     small: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
@@ -13,7 +13,7 @@ export declare const outlineColorStyles: (theme: Theme, color: Color) => string;
 export declare const flatColorStyles: (theme: Theme, color: Color) => string;
 export declare const disabledColorStyles: (theme: Theme, variant: Variant) => string;
 export declare const colorStyles: {
-    solid: (theme: Theme, color: Color) => string;
+    solid: (theme: Theme, color: Color, colorShade: ColorShade) => string;
     outline: (theme: Theme, color: Color) => string;
     flat: (theme: Theme, color: Color) => string;
 };