@kvdbil/components 14.3.6 → 14.3.8

package/cjs/components/RadioButton/index.js

@@ -95,4 +95,4 @@
   user-select: none;
   color: ${({theme:e,isDisabled:r})=>r?e.colors.text.disabled:e.colors.text.dark};
   margin-left: 0.5rem;
-`,f=({name:r=i.generateNameHash("radio-button"),size:s="regular",checked:l=!1,isDisabled:a=!1,color:t="secondary",onChange:d,label:c,...n})=>e.jsxs(u,{children:[e.jsxs(o.default,{onClick:d,isActive:l,isDisabled:a,color:t,children:[e.jsx(b,{"data-validate":"checked",checked:l,type:"radio",name:r,id:r,onChange:d,disabled:a,"aria-label":r,...n}),e.jsx(h,{size:s,color:t,isChecked:l,isDisabled:a,children:e.jsx(p,{className:"circle circle--outer",children:e.jsx(x,{className:"circle circle--inner"})})})]}),c&&e.jsx(g,{as:"label",htmlFor:r,isDisabled:a,children:c})]});exports.RadioButton=f,exports.default=f;
+`,f=({name:r=i.generateNameHash("radio-button"),size:s="regular",checked:l=!1,isDisabled:a=!1,color:t="secondary",onChange:d,label:c,...n})=>e.jsxs(u,{children:[e.jsxs(o.default,{onClick:d,isActive:l,isDisabled:a,color:t,children:[e.jsx(b,{"data-validate":"checked",checked:l,type:"radio",name:r,id:r,disabled:a,"aria-label":r,"aria-checked":l,...n}),e.jsx(h,{size:s,color:t,isChecked:l,isDisabled:a,children:e.jsx(p,{className:"circle circle--outer",children:e.jsx(x,{className:"circle circle--inner"})})})]}),c&&e.jsx(g,{as:"label",htmlFor:r,isDisabled:a,children:c})]});exports.RadioButton=f,exports.default=f;

package/cjs/components/Select/index.js

@@ -1,7 +1,7 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),o=require("react-select"),t=require("styled-components"),i=require("../../shared/constants.js"),a=require("../../theme.js"),l=require("../../typography/BodyText/index.js"),s=require("../FieldLabel.js");function d(e){return e&&e.__esModule?e:{default:e}}require("../../shared/media-queries.js");var n=d(o),u=d(t);const c=u.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),o=require("react-select"),t=require("styled-components"),i=require("../../shared/constants.js"),a=require("../../theme.js"),l=require("../../typography/BodyText/index.js"),s=require("../FieldLabel.js");function d(e){return e&&e.__esModule?e:{default:e}}require("../../shared/media-queries.js");var n=d(o),c=d(t);const u=c.default.div`
   font-family: ${({theme:e})=>e.typography.fontBaseFamily};
   position: relative;
-`,p=e=>e&&{paddingLeft:"2.5rem"},m=e=>e&&{border:`1px solid ${a.default.colors.gray.light1}`,color:a.default.colors.gray.dark1,fill:a.default.colors.gray.light1},f=e=>e&&{border:`2px solid ${a.default.colors.error.dark}`},g=u.default.div`
+`,p=e=>e&&{paddingLeft:"2.5rem"},m=e=>e&&{border:`1px solid ${a.default.colors.gray.light1}`,color:a.default.colors.gray.dark1,fill:a.default.colors.gray.light1},f=e=>e&&{border:`2px solid ${a.default.colors.error.dark}`},g=c.default.div`
   position: absolute;
   z-index: 1;
   top: 0.5rem;
@@ -13,12 +13,12 @@
   ${e=>e.isDisabled&&` fill: ${a.default.colors.gray.light1}; `}
 
   ${e=>e.isFocused&&` fill: ${e.theme.colors.text.dark}; `}
-`,h=u.default.span`
+`,h=c.default.span`
   ${l.CaptionStyle}
   display: block;
   margin-top: 0.25rem;
   color: ${({hasError:e})=>e?a.default.colors.error.dark:a.default.colors.text.disabled};
-`,x=u.default((r=>e.jsxs("svg",{...r,children:[e.jsx("symbol",{id:"icon-arrow",viewBox:"0 0 19 19",children:e.jsx("path",{d:"M2.03039 7.95496L9.80856 15.7331C9.90619 15.8308 10.0645 15.8308 10.1621 15.7331L17.9403 7.95496L19.0009 9.01562L11.2228 16.7938C10.5394 17.4772 9.43132 17.4772 8.7479 16.7938L0.969727 9.01562L2.03039 7.95496Z"})}),e.jsx("use",{xlinkHref:"#icon-arrow"})]})))`
+`,x=c.default((r=>e.jsxs("svg",{...r,children:[e.jsx("symbol",{id:"icon-arrow",viewBox:"0 0 19 19",children:e.jsx("path",{d:"M2.03039 7.95496L9.80856 15.7331C9.90619 15.8308 10.0645 15.8308 10.1621 15.7331L17.9403 7.95496L19.0009 9.01562L11.2228 16.7938C10.5394 17.4772 9.43132 17.4772 8.7479 16.7938L0.969727 9.01562L2.03039 7.95496Z"})}),e.jsx("use",{xlinkHref:"#icon-arrow"})]})))`
   width: 0.75rem;
   height: 0.75rem;
   margin: 0;
@@ -36,4 +36,4 @@
   transform: ${e=>e.$isMenuOpen?"rotate(-180deg)":"rotate(0deg)"};
 
   transform-origin: 50% 60%;
-`,b=({selectProps:{menuIsOpen:r=!1},isFocused:o=!1,isDisabled:t})=>e.jsx(x,{$isDisabled:t,$isFocused:o,$isMenuOpen:r,$theme:a.default});function y({className:o,color:t="primary",forwardRef:i,hasError:l=!1,height:d,helperText:u,isDisabled:x=!1,onBlur:y=(()=>null),onFocus:$=(()=>null),onInputChange:k=(()=>null),placeholder:F="",name:S,...j}){const[v,D]=r.useState(!1),[w,L]=r.useState(""),I=({isSelected:e,isFocused:r,isDisabled:o})=>e?a.default.colors[t].main:o?a.default.colors.background.light:r?a.default.colors.background.gray:a.default.colors.background.light,T=((e,r)=>r?a.default.colors.error.main:e?a.default.colors.text.dark:a.default.colors.gray.light1)(v,l),C=!j.label;return e.jsxs(c,{className:o,children:[!C&&j.label&&e.jsx(s.Label,{htmlFor:S,height:d,isFocused:v,hasValue:!(!j.value&&!w),disabled:x,theme:a.default,hasError:l,children:j.label}),j.prefix&&e.jsx(g,{isDisabled:x,isFocused:v,children:j.prefix}),e.jsx(n.default,{...j,inputId:S,name:S,ref:i,isDisabled:x,onInputChange:(e,r)=>{k(e,r),L(e)},placeholder:F,onFocus:e=>{D(!0),$(e)},onBlur:e=>{D(!1),y(e)},styles:{control:e=>({...e,borderRadius:0,color:a.default.colors.text.dark,fontFamily:a.default.typography.fontBaseFamily,fontSize:"1rem",fontWeight:400,cursor:"pointer",padding:"0.7rem 0.5rem",backgroundColor:a.default.colors.background.light,borderColor:T,boxShadow:"none",minHeight:"3rem","&:hover":{borderColor:"none"},...m(x),...f(l),...p(!!j.prefix)}),input:e=>({...e,height:"auto",margin:0,padding:0}),placeholder:e=>{const r={...e,fontSize:"1rem",lineHeight:"1.5rem",whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",margin:0};return C?{...r,color:a.default.colors.text.dark,fontWeight:600}:{...r,display:v?"static":"none"}},menuList:e=>({...e,padding:"0.5rem 0",paddingBottom:"5rem",marginTop:0,border:`1px solid ${T}`,borderTop:"none",display:"flex",flexDirection:"column",gap:"0.5rem"}),menu:e=>({...e,borderRadius:0,boxShadow:"none",zIndex:5,padding:"0",marginTop:"-0.1rem"}),option:(e,{isSelected:r,isFocused:o,isDisabled:t})=>({...e,padding:"0.5rem",lineHeight:"1.5rem",fontSize:"1rem",fontWeight:400,cursor:t?"not-allowed":"pointer","&:hover":{background:I({isSelected:r,isFocused:!0,isDisabled:t})},background:I({isSelected:r,isFocused:o}),...p(!!j.prefix)}),valueContainer:e=>({...e,position:"static",padding:d?d-1+"rem 0 ":0,height:d?"auto":"1.5rem"}),clearIndicator:e=>({...e,paddingTop:0,paddingBottom:0,paddingLeft:0,paddingRight:"0.2rem"})},components:{IndicatorSeparator:()=>null,DropdownIndicator:b,...j.components??{}}}),u&&e.jsx(h,{hasError:l,children:u})]})}exports.Select=y,exports.default=y;
+`,b=({selectProps:{menuIsOpen:r=!1},isFocused:o=!1,isDisabled:t})=>e.jsx(x,{$isDisabled:t,$isFocused:o,$isMenuOpen:r,$theme:a.default});function y({className:o,color:t="primary",forwardRef:i,hasError:l=!1,height:d,helperText:c,isDisabled:x=!1,onBlur:y=(()=>null),onFocus:$=(()=>null),onInputChange:k=(()=>null),placeholder:F="",name:S,...j}){const[v,D]=r.useState(!1),[w,L]=r.useState(""),I=({isSelected:e,isFocused:r,isDisabled:o})=>e?a.default.colors[t].main:o?a.default.colors.background.light:r?a.default.colors.background.gray:a.default.colors.background.light,T=((e,r)=>r?a.default.colors.error.main:e?a.default.colors.text.dark:a.default.colors.gray.light1)(v,l),C=!j.label;return e.jsxs(u,{className:o,children:[!C&&j.label&&e.jsx(s.Label,{htmlFor:S,height:d,isFocused:v,hasValue:!(!j.value&&!w),disabled:x,theme:a.default,hasError:l,children:j.label}),j.prefix&&e.jsx(g,{isDisabled:x,isFocused:v,children:j.prefix}),e.jsx(n.default,{...j,id:"react-select",inputId:S,name:S,ref:i,isDisabled:x,onInputChange:(e,r)=>{k(e,r),L(e)},placeholder:F,onFocus:e=>{D(!0),$(e)},onBlur:e=>{D(!1),y(e)},styles:{control:e=>({...e,borderRadius:0,color:a.default.colors.text.dark,fontFamily:a.default.typography.fontBaseFamily,fontSize:"1rem",fontWeight:400,cursor:"pointer",padding:"0.7rem 0.5rem",backgroundColor:a.default.colors.background.light,borderColor:T,boxShadow:"none",minHeight:"3rem","&:hover":{borderColor:"none"},...m(x),...f(l),...p(!!j.prefix)}),input:e=>({...e,height:"auto",margin:0,padding:0}),placeholder:e=>{const r={...e,fontSize:"1rem",lineHeight:"1.5rem",whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",margin:0};return C?{...r,color:a.default.colors.text.dark,fontWeight:600}:{...r,display:v?"static":"none"}},menuList:e=>({...e,padding:"0.5rem 0",paddingBottom:"5rem",marginTop:0,border:`1px solid ${T}`,borderTop:"none",display:"flex",flexDirection:"column",gap:"0.5rem"}),menu:e=>({...e,borderRadius:0,boxShadow:"none",zIndex:5,padding:"0",marginTop:"-0.1rem"}),option:(e,{isSelected:r,isFocused:o,isDisabled:t})=>({...e,padding:"0.5rem",lineHeight:"1.5rem",fontSize:"1rem",fontWeight:400,cursor:t?"not-allowed":"pointer","&:hover":{background:I({isSelected:r,isFocused:!0,isDisabled:t})},background:I({isSelected:r,isFocused:o}),...p(!!j.prefix)}),valueContainer:e=>({...e,position:"static",padding:d?d-1+"rem 0 ":0,height:d?"auto":"1.5rem"}),clearIndicator:e=>({...e,paddingTop:0,paddingBottom:0,paddingLeft:0,paddingRight:"0.2rem"})},components:{IndicatorSeparator:()=>null,DropdownIndicator:b,...j.components??{}}}),c&&e.jsx(h,{hasError:l,children:c})]})}exports.Select=y,exports.default=y;

package/esm/components/Button/index.js

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

package/esm/components/Icon/index.js

@@ -3,12 +3,12 @@ import{jsxs as s,Fragment as u,jsx as e}from"react/jsx-runtime";import{useState
   max-width: 700px;
 `,y=i(h)`
   margin: 0.5rem;
-`,$=i.ul`
+`,O=i.ul`
   display: flex;
   list-style: none;
   flex-wrap: wrap;
   padding: 0;
-`,O=i.li`
+`,$=i.li`
   background: ${({background:r})=>r};
   display: flex;
   justify-content: center;
@@ -29,4 +29,4 @@ import{jsxs as s,Fragment as u,jsx as e}from"react/jsx-runtime";import{useState
 `,v=i.span`
   font-size: ${({size:r})=>r};
   color: ${({color:r})=>r};
-`,z=({background:r=p.colors.background.light,color:l=p.colors.text.dark,icons:m,size:d="2rem"})=>{const[a,n]=x({isOpen:!1,message:"",type:"info",color:"neutral"}),g=async o=>{const c=`import { ${o} } from 'kvdbil-components';`;if(navigator.clipboard)try{await navigator.clipboard.writeText(c),n(t=>({...t,isOpen:!0,message:`copied import for ${o}`,type:"success",color:"success"}))}catch(t){n(f=>({...f,isOpen:!0,message:`Could not copy text: ${t}`,type:"error",color:"error"}))}};return s(u,{children:[s(w,{children:[e(y,{as:"h2",children:"Click to copy import declaration for icon"}),e($,{children:m.map(([o,c],t)=>s(O,{background:r,onClick:()=>{g(o)},children:[e(C,{children:o}),e(v,{size:d,color:l,children:e(c,{})})]},t))})]}),e(k,{message:a.message,isOpen:a.isOpen,type:a.type,color:a.color,onClose:()=>n(o=>({...o,isOpen:!1}))})]})};export{z as default};
+`,z=({background:r=p.colors.background.light,color:l=p.colors.text.dark,icons:m,size:d="2rem"})=>{const[a,n]=x({isOpen:!1,message:"",type:"info",color:"neutral"}),g=async o=>{const c=`import { ${o} } from 'kvdbil-components';`;if(navigator.clipboard)try{await navigator.clipboard.writeText(c),n(t=>({...t,isOpen:!0,message:`copied import for ${o}`,type:"success",color:"success"}))}catch(t){n(f=>({...f,isOpen:!0,message:`Could not copy text: ${t}`,type:"error",color:"error"}))}};return s(u,{children:[s(w,{children:[e(y,{as:"h2",children:"Click to copy import declaration for icon"}),e(O,{children:m.map(([o,c],t)=>s($,{background:r,onClick:()=>{g(o)},children:[e(C,{children:o}),e(v,{size:d,color:l,children:e(c,{})})]},t))})]}),e(k,{message:a.message,isOpen:a.isOpen,type:a.type,color:a.color,onClose:()=>n(o=>({...o,isOpen:!1}))})]})};export{z as default};

package/esm/components/RadioButton/index.js

@@ -1,4 +1,4 @@
-import{jsxs as b,jsx as o}from"react/jsx-runtime";import i,{css as l}from"styled-components";import{generateNameHash as g}from"../../shared/helpers.js";import r from"../../theme.js";import m from"../IconButton.js";import{BodyText as u}from"../../typography/BodyText/index.js";import"../../shared/media-queries.js";const x=l`
+import{jsxs as n,jsx as o}from"react/jsx-runtime";import i,{css as l}from"styled-components";import{generateNameHash as g}from"../../shared/helpers.js";import r from"../../theme.js";import m from"../IconButton.js";import{BodyText as u}from"../../typography/BodyText/index.js";import"../../shared/media-queries.js";const x=l`
   .circle {
     &--outer {
       height: 24px;
@@ -95,4 +95,4 @@ import{jsxs as b,jsx as o}from"react/jsx-runtime";import i,{css as l}from"styled
   user-select: none;
   color: ${({theme:e,isDisabled:a})=>a?e.colors.text.disabled:e.colors.text.dark};
   margin-left: 0.5rem;
-`,h=({name:e=g("radio-button"),size:a="regular",checked:c=!1,isDisabled:s=!1,color:t="secondary",onChange:d,label:n,...p})=>b(z,{children:[b(m,{onClick:d,isActive:c,isDisabled:s,color:t,children:[o(v,{"data-validate":"checked",checked:c,type:"radio",name:e,id:e,onChange:d,disabled:s,"aria-label":e,...p}),o(C,{size:a,color:t,isChecked:c,isDisabled:s,children:o(w,{className:"circle circle--outer",children:o(j,{className:"circle circle--inner"})})})]}),n&&o(B,{as:"label",htmlFor:e,isDisabled:s,children:n})]});export{h as RadioButton,h as default};
+`,b=({name:e=g("radio-button"),size:a="regular",checked:s=!1,isDisabled:c=!1,color:t="secondary",onChange:h,label:d,...p})=>n(z,{children:[n(m,{onClick:h,isActive:s,isDisabled:c,color:t,children:[o(v,{"data-validate":"checked",checked:s,type:"radio",name:e,id:e,disabled:c,"aria-label":e,"aria-checked":s,...p}),o(C,{size:a,color:t,isChecked:s,isDisabled:c,children:o(w,{className:"circle circle--outer",children:o(j,{className:"circle circle--inner"})})})]}),d&&o(B,{as:"label",htmlFor:e,isDisabled:c,children:d})]});export{b as RadioButton,b as default};

package/esm/components/Select/index.js

@@ -1,4 +1,4 @@
-import{jsxs as k,jsx as a}from"react/jsx-runtime";import{useState as F}from"react";import O from"react-select";import m from"styled-components";import{DEFAULT_TRANSITION_MS as S}from"../../shared/constants.js";import e from"../../theme.js";import{CaptionStyle as R}from"../../typography/BodyText/index.js";import{Label as H}from"../FieldLabel.js";import"../../shared/media-queries.js";const M=m.div`
+import{jsxs as k,jsx as l}from"react/jsx-runtime";import{useState as F}from"react";import O from"react-select";import m from"styled-components";import{DEFAULT_TRANSITION_MS as S}from"../../shared/constants.js";import e from"../../theme.js";import{CaptionStyle as R}from"../../typography/BodyText/index.js";import{Label as H}from"../FieldLabel.js";import"../../shared/media-queries.js";const M=m.div`
   font-family: ${({theme:o})=>o.typography.fontBaseFamily};
   position: relative;
 `,D=o=>o&&{paddingLeft:"2.5rem"},W=o=>o&&{border:`1px solid ${e.colors.gray.light1}`,color:e.colors.gray.dark1,fill:e.colors.gray.light1},j=o=>o&&{border:`2px solid ${e.colors.error.dark}`},A=m.div`
@@ -18,7 +18,7 @@ import{jsxs as k,jsx as a}from"react/jsx-runtime";import{useState as F}from"reac
   display: block;
   margin-top: 0.25rem;
   color: ${({hasError:o})=>o?e.colors.error.dark:e.colors.text.disabled};
-`,P=o=>k("svg",{...o,children:[a("symbol",{id:"icon-arrow",viewBox:"0 0 19 19",children:a("path",{d:"M2.03039 7.95496L9.80856 15.7331C9.90619 15.8308 10.0645 15.8308 10.1621 15.7331L17.9403 7.95496L19.0009 9.01562L11.2228 16.7938C10.5394 17.4772 9.43132 17.4772 8.7479 16.7938L0.969727 9.01562L2.03039 7.95496Z"})}),a("use",{xlinkHref:"#icon-arrow"})]}),V=m(P)`
+`,P=o=>k("svg",{...o,children:[l("symbol",{id:"icon-arrow",viewBox:"0 0 19 19",children:l("path",{d:"M2.03039 7.95496L9.80856 15.7331C9.90619 15.8308 10.0645 15.8308 10.1621 15.7331L17.9403 7.95496L19.0009 9.01562L11.2228 16.7938C10.5394 17.4772 9.43132 17.4772 8.7479 16.7938L0.969727 9.01562L2.03039 7.95496Z"})}),l("use",{xlinkHref:"#icon-arrow"})]}),V=m(P)`
   width: 0.75rem;
   height: 0.75rem;
   margin: 0;
@@ -36,4 +36,4 @@ import{jsxs as k,jsx as a}from"react/jsx-runtime";import{useState as F}from"reac
   transform: ${o=>o.$isMenuOpen?"rotate(-180deg)":"rotate(0deg)"};
 
   transform-origin: 50% 60%;
-`,G=(o,l)=>l?e.colors.error.main:o?e.colors.text.dark:e.colors.gray.light1,U=({selectProps:{menuIsOpen:o=!1},isFocused:l=!1,isDisabled:p})=>a(V,{$isDisabled:p,$isFocused:l,$isMenuOpen:o,$theme:e});function w({className:o,color:l="primary",forwardRef:p,hasError:s=!1,height:n,helperText:u,isDisabled:d=!1,onBlur:L=()=>null,onFocus:v=()=>null,onInputChange:C=()=>null,placeholder:I="",name:g,...i}){const[c,f]=F(!1),[T,B]=F(""),z=(r,t)=>{C(r,t),B(r)},b=({isSelected:r,isFocused:t,isDisabled:h})=>r?e.colors[l].main:h?e.colors.background.light:t?e.colors.background.gray:e.colors.background.light,E=r=>{f(!0),v(r)},N=r=>{f(!1),L(r)},x=G(c,s),$=!i.label;return k(M,{className:o,children:[!$&&i.label&&a(H,{htmlFor:g,height:n,isFocused:c,hasValue:!!(i.value||T),disabled:d,theme:e,hasError:s,children:i.label}),i.prefix&&a(A,{isDisabled:d,isFocused:c,children:i.prefix}),a(O,{...i,inputId:g,name:g,ref:p,isDisabled:d,onInputChange:z,placeholder:I,onFocus:E,onBlur:N,styles:{control:r=>({...r,borderRadius:0,color:e.colors.text.dark,fontFamily:e.typography.fontBaseFamily,fontSize:"1rem",fontWeight:400,cursor:"pointer",padding:"0.7rem 0.5rem",backgroundColor:e.colors.background.light,borderColor:x,boxShadow:"none",minHeight:"3rem","&:hover":{borderColor:"none"},...W(d),...j(s),...D(!!i.prefix)}),input:r=>({...r,height:"auto",margin:0,padding:0}),placeholder:r=>{const t={...r,fontSize:"1rem",lineHeight:"1.5rem",whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",margin:0};return $?{...t,color:e.colors.text.dark,fontWeight:600}:{...t,display:c?"static":"none"}},menuList:r=>({...r,padding:"0.5rem 0",paddingBottom:"5rem",marginTop:0,border:`1px solid ${x}`,borderTop:"none",display:"flex",flexDirection:"column",gap:"0.5rem"}),menu:r=>({...r,borderRadius:0,boxShadow:"none",zIndex:5,padding:"0",marginTop:"-0.1rem"}),option:(r,{isSelected:t,isFocused:h,isDisabled:y})=>({...r,padding:"0.5rem",lineHeight:"1.5rem",fontSize:"1rem",fontWeight:400,cursor:y?"not-allowed":"pointer","&:hover":{background:b({isSelected:t,isFocused:!0,isDisabled:y})},background:b({isSelected:t,isFocused:h}),...D(!!i.prefix)}),valueContainer:r=>({...r,position:"static",padding:n?`${n-1}rem 0 `:0,height:n?"auto":"1.5rem"}),clearIndicator:r=>({...r,paddingTop:0,paddingBottom:0,paddingLeft:0,paddingRight:"0.2rem"})},components:{IndicatorSeparator:()=>null,DropdownIndicator:U,...i.components??{}}}),u&&a(_,{hasError:s,children:u})]})}export{w as Select,w as default};
+`,G=(o,n)=>n?e.colors.error.main:o?e.colors.text.dark:e.colors.gray.light1,U=({selectProps:{menuIsOpen:o=!1},isFocused:n=!1,isDisabled:p})=>l(V,{$isDisabled:p,$isFocused:n,$isMenuOpen:o,$theme:e});function w({className:o,color:n="primary",forwardRef:p,hasError:t=!1,height:s,helperText:u,isDisabled:d=!1,onBlur:L=()=>null,onFocus:v=()=>null,onInputChange:C=()=>null,placeholder:I="",name:g,...i}){const[c,f]=F(!1),[T,B]=F(""),z=(r,a)=>{C(r,a),B(r)},b=({isSelected:r,isFocused:a,isDisabled:h})=>r?e.colors[n].main:h?e.colors.background.light:a?e.colors.background.gray:e.colors.background.light,E=r=>{f(!0),v(r)},N=r=>{f(!1),L(r)},x=G(c,t),$=!i.label;return k(M,{className:o,children:[!$&&i.label&&l(H,{htmlFor:g,height:s,isFocused:c,hasValue:!!(i.value||T),disabled:d,theme:e,hasError:t,children:i.label}),i.prefix&&l(A,{isDisabled:d,isFocused:c,children:i.prefix}),l(O,{...i,id:"react-select",inputId:g,name:g,ref:p,isDisabled:d,onInputChange:z,placeholder:I,onFocus:E,onBlur:N,styles:{control:r=>({...r,borderRadius:0,color:e.colors.text.dark,fontFamily:e.typography.fontBaseFamily,fontSize:"1rem",fontWeight:400,cursor:"pointer",padding:"0.7rem 0.5rem",backgroundColor:e.colors.background.light,borderColor:x,boxShadow:"none",minHeight:"3rem","&:hover":{borderColor:"none"},...W(d),...j(t),...D(!!i.prefix)}),input:r=>({...r,height:"auto",margin:0,padding:0}),placeholder:r=>{const a={...r,fontSize:"1rem",lineHeight:"1.5rem",whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",margin:0};return $?{...a,color:e.colors.text.dark,fontWeight:600}:{...a,display:c?"static":"none"}},menuList:r=>({...r,padding:"0.5rem 0",paddingBottom:"5rem",marginTop:0,border:`1px solid ${x}`,borderTop:"none",display:"flex",flexDirection:"column",gap:"0.5rem"}),menu:r=>({...r,borderRadius:0,boxShadow:"none",zIndex:5,padding:"0",marginTop:"-0.1rem"}),option:(r,{isSelected:a,isFocused:h,isDisabled:y})=>({...r,padding:"0.5rem",lineHeight:"1.5rem",fontSize:"1rem",fontWeight:400,cursor:y?"not-allowed":"pointer","&:hover":{background:b({isSelected:a,isFocused:!0,isDisabled:y})},background:b({isSelected:a,isFocused:h}),...D(!!i.prefix)}),valueContainer:r=>({...r,position:"static",padding:s?`${s-1}rem 0 `:0,height:s?"auto":"1.5rem"}),clearIndicator:r=>({...r,paddingTop:0,paddingBottom:0,paddingLeft:0,paddingRight:"0.2rem"})},components:{IndicatorSeparator:()=>null,DropdownIndicator:U,...i.components??{}}}),u&&l(_,{hasError:t,children:u})]})}export{w as Select,w as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kvdbil/components",
-  "version": "14.3.6",
+  "version": "14.3.8",
   "sideEffects": false,
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -31,7 +31,7 @@
     "react-collapse": ">= 5.0.1",
     "react-day-picker": ">= 7.4.8",
     "react-dom": ">= 17.0.0",
-    "react-select": "5.7.3",
+    "react-select": ">= 5.8.0",
     "react-transition-group": ">= 4.0.0",
     "styled-components": ">= 5.1.17"
   },
@@ -42,10 +42,7 @@
     "not op_mini all"
   ],
   "resolutions": {
-    "@types/react": "^17.0.2",
-    "@babel/traverse": ">=7.23.2",
-    "semver": "^7.5.2",
-    "terser": "^5.14.2"
+    "micromatch": ">=4.0.8"
   },
   "devDependencies": {
     "@babel/core": "^7.11.6",
@@ -60,23 +57,22 @@
     "@svgr/cli": "^8.0.0",
     "@team-griffin/install-self-peers": "^1.1.1",
     "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.4.8",
-    "@testing-library/react": "12.1.5",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
     "@testing-library/react-hooks": "^8.0.1",
-    "@testing-library/user-event": "^14.0.1",
+    "@testing-library/user-event": "^14.5.2",
     "@types/classnames": "^2.2.11",
     "@types/jest": "^29.5.12",
     "@types/node": "^22.4.1",
-    "@types/react": "^17.0.2",
-    "@types/react-collapse": "^5.0.0",
-    "@types/react-dom": "^17.0.2",
-    "@types/react-transition-group": "^4.4.0",
-    "@types/styled-components": "^5.1.34",
+    "@types/react": "^18.3.8",
+    "@types/react-collapse": "^5.0.4",
+    "@types/react-dom": "^18.3.0",
+    "@types/react-transition-group": "^4.4.11",
     "@types/uuid": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "^7.0.0",
     "@typescript-eslint/parser": "^7.0.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
-    "babel-plugin-styled-components": "^1.10.0",
+    "babel-plugin-styled-components": "^2.1.4",
     "cross-env": "^7.0.3",
     "esbuild": "^0.23.1",
     "eslint": "^8.0.0",
@@ -92,14 +88,14 @@
     "husky": "^9.1.5",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "jest-styled-components": "^7.0.3",
+    "jest-styled-components": "^7.2.0",
     "jest-watch-typeahead": "^2.2.2",
     "prettier": "^2.6.2",
-    "react": "^17.0.2",
+    "react": "^18.3.1",
     "react-collapse": "^5.0.1",
     "react-day-picker": "^7.4.8",
     "react-docgen-typescript": "^2.2.2",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.3.1",
     "react-is": "^18.3.1",
     "react-select": "5.8.0",
     "react-select-event": "5.5.1",
@@ -110,7 +106,7 @@
     "rollup-plugin-visualizer": "^5.5.2",
     "standard-version": "^9.3.1",
     "storybook": "^7.0.0",
-    "styled-components": "^5.2.0",
+    "styled-components": "^6.1.13",
     "ts-jest": "^29.2.4",
     "tslib": "^2.6.3",
     "typescript": "^5.5.4"

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

@@ -1,6 +1,7 @@
-declare const Item: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
+import React from 'react';
+declare const Item: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {
     isOpen: boolean;
-}, never>;
+}>> & string;
 interface Item {
     title: string;
     text: string;

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

@@ -14,6 +14,7 @@ interface Props {
     sufixIcon?: ReactNode;
     minWidth?: string;
     as?: keyof JSX.IntrinsicElements;
+    ref?: React.ForwardedRef<HTMLElement>;
 }
 export type ButtonProps = ComponentPropsWithRef<'button'> & Props;
 export declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLElement>>;

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

@@ -1,10 +1,10 @@
 import { Theme } from '../../theme';
 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>>;
-    regular: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
-    large: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+    smaller: import("styled-components").RuleSet<object>;
+    small: import("styled-components").RuleSet<object>;
+    regular: import("styled-components").RuleSet<object>;
+    large: import("styled-components").RuleSet<object>;
 };
 export declare const smallerAndSmallSizeStyles: () => string;
 export declare const regularSizeStyles: () => string;

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

@@ -4,7 +4,7 @@ export declare const getFontSize: (size?: Size) => string;
 export declare const getBackgroundColor: ({ isDisabled, variant, color, theme, }: ItemProps) => string;
 export declare const getColor: ({ isDisabled, variant, color, theme, }: ItemProps) => string;
 export declare const getBorderColor: ({ color, isDisabled, variant, theme, }: ItemProps) => string;
-export declare const getCursorType: ({ isDisabled, isClickable, isDeletable, }: ItemProps) => "auto" | "pointer" | "not-allowed";
+export declare const getCursorType: ({ isDisabled, isClickable, isDeletable, }: ItemProps) => "auto" | "not-allowed" | "pointer";
 export declare const getHoverBackgroundColor: ({ variant, color, theme, }: ItemProps) => string;
 export declare const getHoverBorderColor: ({ variant, color, theme }: ItemProps) => string;
 export declare const getHoverColor: ({ variant, color, theme }: ItemProps) => "#e8a100" | "#007069" | "#a63640" | "#004773" | "#269940" | "#1a2030" | "#ffffff";

package/types/components/DayPicker/DayPickerNavBar.d.ts

@@ -1,5 +1,5 @@
 import { Locale } from '../../Types';
-interface NavBarProps {
+export interface NavBarProps {
     month: Date;
     onPreviousClick(callback?: () => void): void;
     onNextClick(callback?: () => void): void;

package/types/components/DayPicker/style.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+declare const _default: import("styled-components").RuleSet<object>;
 export default _default;

package/types/components/FieldLabel.d.ts

@@ -1,8 +1,8 @@
-export declare const Label: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {
+export declare const Label: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {
     isFocused: boolean;
     hasValue: boolean;
     disabled: boolean;
     centered?: boolean;
     hasError: boolean;
     height?: number;
-}, never>;
+}>> & string;

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

@@ -4,7 +4,7 @@ type Justify = Exclude<CSSProperties['justifyContent'], number>;
 type Align = Exclude<CSSProperties['alignItems'], number>;
 type Direction = CSSProperties['flexDirection'];
 type DarkOrLight = 'dark' | 'light';
-export declare const colorAnimation: import("styled-components").Keyframes;
+export declare const colorAnimation: import("styled-components/dist/models/Keyframes").default;
 type ObjectPositionX = number | 'center' | 'left' | 'right';
 type ObjectPositionY = number | 'center' | 'top' | 'bottom';
 type DynamicGutter = {

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

@@ -1,4 +1,8 @@
-type IconModule = [string, CallableFunction];
+import React from 'react';
+type IconModule = [
+    string,
+    (icon: React.SVGProps<SVGSVGElement>) => JSX.Element
+];
 export interface IconsProps {
     background: string;
     color: string;

package/types/components/IconButton.d.ts

@@ -1,9 +1,9 @@
 import { KeyboardEvent, MouseEvent, ReactNode } from 'react';
 import { Color } from '../Types';
-export declare const BackgroundStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<{
+export declare const BackgroundStyles: import("styled-components").RuleSet<{
     color: Color;
     isDisabled: boolean;
-}, import("styled-components").DefaultTheme>>;
+}>;
 interface Props {
     color: Color;
     children: ReactNode;

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

@@ -3,5 +3,5 @@ export interface SpacerProps {
     hideOnMobile?: boolean;
     hideOnDesktop?: boolean;
 }
-declare const Spacer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, SpacerProps, never>;
+declare const Spacer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SpacerProps>> & string;
 export default Spacer;

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

@@ -1,4 +1,5 @@
-export declare const Container: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+import React from 'react';
+export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export interface SpinnerThinProps {
     size?: number;
     isDone?: boolean;
@@ -9,6 +10,6 @@ export interface SpinnerThinProps {
 type IconWrapperProps = SpinnerThinProps & {
     size: number;
 };
-export declare const IconWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, IconWrapperProps, never>;
+export declare const IconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IconWrapperProps>> & string;
 export declare const SpinnerThin: ({ isLoading, isDone, isError, size, ...rest }: SpinnerThinProps) => import("react/jsx-runtime").JSX.Element;
 export default SpinnerThin;

package/types/typography/BodyText/index.d.ts

@@ -1,15 +1,16 @@
-export declare const BodyTextStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
-export declare const CaptionStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
-export declare const StyledBodyText: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, {}, never>;
-export declare const QuoteStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
-export declare const Quote: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, {}, never>;
-export declare const BodyText: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, {}, never>;
-export declare const BodyLinkStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
-export declare const BodyLink: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, {}, never>;
-export declare const Caption: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, {}, never>;
-export declare const CaptionLinkStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
-export declare const CaptionLink: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, {}, never>;
-export declare const StatusStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
-export declare const Status: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, {}, never>;
+import React from 'react';
+export declare const BodyTextStyle: import("styled-components").RuleSet<object>;
+export declare const CaptionStyle: import("styled-components").RuleSet<object>;
+export declare const StyledBodyText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
+export declare const QuoteStyle: import("styled-components").RuleSet<object>;
+export declare const Quote: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
+export declare const BodyText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
+export declare const BodyLinkStyle: import("styled-components").RuleSet<object>;
+export declare const BodyLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
+export declare const Caption: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
+export declare const CaptionLinkStyle: import("styled-components").RuleSet<object>;
+export declare const CaptionLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
+export declare const StatusStyle: import("styled-components").RuleSet<object>;
+export declare const Status: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
 export declare const BodyTexts: () => import("react/jsx-runtime").JSX.Element;
 export default BodyTexts;

package/types/typography/ButtonText/index.d.ts

@@ -1,12 +1,13 @@
-export declare const BasicButtonFontStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
-export declare const ButtonLargeFontStyle: import("styled-components").FlattenSimpleInterpolation;
-export declare const ButtonLargeTextStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
-export declare const ButtonLarge: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const ButtonRegularFontStyle: import("styled-components").FlattenSimpleInterpolation;
-export declare const ButtonRegularTextStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
-export declare const Button: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const ButtonSmallFontStyle: import("styled-components").FlattenSimpleInterpolation;
-export declare const ButtonSmallTextStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
-export declare const ButtonSmall: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+import React from 'react';
+export declare const BasicButtonFontStyle: import("styled-components").RuleSet<object>;
+export declare const ButtonLargeFontStyle: import("styled-components").RuleSet<object>;
+export declare const ButtonLargeTextStyle: import("styled-components").RuleSet<object>;
+export declare const ButtonLarge: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const ButtonRegularFontStyle: import("styled-components").RuleSet<object>;
+export declare const ButtonRegularTextStyle: import("styled-components").RuleSet<object>;
+export declare const Button: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const ButtonSmallFontStyle: import("styled-components").RuleSet<object>;
+export declare const ButtonSmallTextStyle: import("styled-components").RuleSet<object>;
+export declare const ButtonSmall: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
 declare const Buttons: () => import("react/jsx-runtime").JSX.Element;
 export default Buttons;

package/types/typography/Heading/index.d.ts

@@ -1,18 +1,19 @@
-export declare const Display3Style: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
-export declare const Display3: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, {}, never>;
-export declare const Display2Style: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
-export declare const Display2: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, {}, never>;
-export declare const Display1Style: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
-export declare const Display1: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, {}, never>;
-export declare const HeadlineStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
-export declare const Headline: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, {}, never>;
-export declare const TitleStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
-export declare const Title: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, {}, never>;
-export declare const SubtitleStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
-export declare const Subtitle: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, {}, never>;
-export declare const TinyTitleRegularStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
-export declare const TinyTitleRegular: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, {}, never>;
-export declare const TinyTitleBoldStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
-export declare const TinyTitleBold: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, {}, never>;
+import React from 'react';
+export declare const Display3Style: import("styled-components").RuleSet<object>;
+export declare const Display3: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
+export declare const Display2Style: import("styled-components").RuleSet<object>;
+export declare const Display2: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
+export declare const Display1Style: import("styled-components").RuleSet<object>;
+export declare const Display1: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
+export declare const HeadlineStyle: import("styled-components").RuleSet<object>;
+export declare const Headline: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
+export declare const TitleStyle: import("styled-components").RuleSet<object>;
+export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
+export declare const SubtitleStyle: import("styled-components").RuleSet<object>;
+export declare const Subtitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
+export declare const TinyTitleRegularStyle: import("styled-components").RuleSet<object>;
+export declare const TinyTitleRegular: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
+export declare const TinyTitleBoldStyle: import("styled-components").RuleSet<object>;
+export declare const TinyTitleBold: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
 declare const Headings: () => import("react/jsx-runtime").JSX.Element;
 export default Headings;

package/types/utils/utils.d.ts

@@ -1,3 +1,3 @@
 export declare const getLuminosity: (hexColor: string) => number;
 export declare const hexToRGB: (hex: string, alpha?: number) => string;
-export declare const resetButtonStyle: import("styled-components").FlattenSimpleInterpolation;
+export declare const resetButtonStyle: import("styled-components").RuleSet<object>;