@kvdbil/components 15.1.5 → 16.0.0

package/cjs/theme.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.default={typography:{fontBaseFamily:"'Open Sans', sans-serif",fontAlternativeFamily:"'Next Book', sans-serif",fontBaseRegularWeight:400,fontBaseBoldWeight:600,fontAlternativeRegularWeight:400,fontAlternativeBoldWeight:700},colors:{primary:{darker:"#d98500",dark:"#e8a100",main:"#f5b400",light:"#f7cf57",lighter:"#fce5ab",lighter2:"#fff7e5"},secondary:{darker:"#00474d",dark:"#007069",main:"#2a9d8f",light:"#6bb8a6",lighter:"#bae3cc",lighter2:"#e5f5ed"},tertiary:{darker:"#5e2636",dark:"#a63640",main:"#ef5b5b",light:"#f5968a",lighter:"#f5c7bf",lighter2:"#fcedeb"},info:{darker:"#17395d",dark:"#004773",main:"#007ab8",light:"#57c2ff",lighter:"#abe0ff",lighter2:"#e5f5ff"},success:{darker:"#175c36",dark:"#269940",main:"#59d771",light:"#91e5a1",lighter:"#c7f2cf",lighter2:"#edfaf0"},warning:{darker:"#d98500",dark:"#e8a100",main:"#f5b400",light:"#f7cf57",lighter:"#fce5ab",lighter2:"#fff7e5"},error:{darker:"#5e2636",dark:"#a63640",main:"#ef5b5b",light:"#f5968a",lighter:"#f5c7bf",lighter2:"#fcedeb"},neutral:{darker:"#1a2030",dark:"#1a2030",main:"#1a2030",light:"#474d59",lighter:"#5e6369",lighter2:"#707378"},text:{dark:"#1a2030",light:"#ffffff",disabled:"#8c8f91"},background:{dark:"#1a2030",gray:"#f2f2f2",sand:"#f2efe6",light:"#ffffff"},common:{black:"#000000",white:"#ffffff",purple:{darker:"#42214f",dark:"#732e70",main:"#a13d8f",light:"#c27db5",lighter:"#e0bfd9",lighter2:"#f5edf2"}},gray:{dark1:"#1a2030",dark2:"#303842",dark3:"#474d59",dark4:"#5e6369",dark5:"#707378",light1:"#8c8f91",light2:"#a3a6a8",light3:"#c7c7c4",light4:"#d9d9d6",light5:"#e8e8e8",light6:"#f2f2f2"}},elevations:{elevation2:"0px 1px 5px rgba(0, 0, 0, 0.15), 0px 2px 4px rgba(0, 0, 0, 0.09), 0px 2px 4px rgba(0, 0, 0, 0.1)",elevation4:"0px 1px 10px rgba(0, 0, 0, 0.15), 0px 4px 5px rgba(0, 0, 0, 0.09), 0px 2px 4px rgba(0, 0, 0, 0.1)",elevation8:"0px 4px 5px rgba(0, 0, 0, 0.15), 0px 3px 14px rgba(0, 0, 0, 0.09), 0px 8px 10px rgba(0, 0, 0, 0.1)",elevation16:"0px 8px 10px rgba(0, 0, 0, 0.15), 0px 6px 30px rgba(0, 0, 0, 0.09), 0px 16px 24px rgba(0, 0, 0, 0.1)",elevation24:"0px 11px 15px rgba(0, 0, 0, 0.15), 0px 9px 46px rgba(0, 0, 0, 0.09), 0px 24px 38px rgba(0, 0, 0, 0.1)"}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.default={typography:{fontBaseFamily:"'Open Sans', sans-serif",fontAlternativeFamily:"'Next Book', sans-serif",fontBaseRegularWeight:400,fontBaseBoldWeight:600,fontAlternativeRegularWeight:400,fontAlternativeBoldWeight:700},colors:{primary:{darker:"#c48900",dark:"#e8a100",mainAlt:"#e8a100",main:"#f5b400",light:"#f7cf57",lighter:"#fbe7ab",lighter2:"#fff7e5",lighter3:"#fdf9f1"},secondary:{darker:"#00474d",dark:"#1b6359",mainAlt:"#228277",main:"#299d8f",light:"#32bfaf",lighter:"#a4ddcb",lighter2:"#d6f0e8",lighter3:"#f4fbf8"},tertiary:{darker:"#5e2636",dark:"#9c333c",mainAlt:"#c94d4d",main:"#f05c5c",light:"#f59085",lighter:"#fac7c3",lighter2:"#fcedeb",lighter3:"#fbf5f4"},info:{darker:"#004773",dark:"#005e8c",mainAlt:"#007ab8",main:"#499ad4",light:"#3bb7e2",lighter:"#abe0ff",lighter2:"#e5f5ff",lighter3:"#f4f8fb"},success:{darker:"#0b4222",dark:"#006629",mainAlt:"#00aa47",main:"#3ac25e",light:"#59d771",lighter:"#c7f2cf",lighter2:"#edfaf0",lighter3:"#f4fbf7"},warning:{darker:"#c48900",dark:"#e8a100",mainAlt:"#e8a100",main:"#f5b400",light:"#f7cf57",lighter:"#fbe7ab",lighter2:"#fff7e5",lighter3:"#fdf9f1"},error:{darker:"#841c24",dark:"#aa2228",mainAlt:"#e9191d",main:"#ff5153",light:"#ff8888",lighter:"#ffc2c2",lighter2:"#ffd6d6",lighter3:"#fbf4f4"},purple:{darker:"#42214f",dark:"#8f367f",mainAlt:"#a33e90",main:"#cf59bf",light:"#e28dde",lighter:"#e0bfd9",lighter2:"#f5edf2",lighter3:"#fbf4f9"},text:{dark:"#1a2030",disabled:"#babcc2",light:"#ffffff"},background:{light:"#ffffff",lightGray:"#fafafa",gray:"#f2f2f2",sand:"#f2efe6",dark:"#1a2030"},common:{black:"#000000",white:"#ffffff"},grayscaleToned:{dark1:"#1a2030",dark2:"#313645",dark3:"#484d59",dark4:"#5f636e",dark5:"#71757f",light1:"#8d8f97",light2:"#a4a6ac",light3:"#babcc2",light4:"#d1d2d6",light5:"#e8e9ea",light6:"#f2f2f2",light7:"#fafafa"},grayscaleNeutral:{dark1:"#000000",dark2:"#191919",dark3:"#333333",dark4:"#4c4c4c",dark5:"#666666",light1:"#7f7f7f",light2:"#999999",light3:"#b2b2b2",light4:"#cccccc",light5:"#e5e5e5",light6:"#f0f0f0",light7:"#fbfbfb"}},elevations:{elevation2:"0px 1px 5px rgba(0, 0, 0, 0.15), 0px 2px 4px rgba(0, 0, 0, 0.09), 0px 2px 4px rgba(0, 0, 0, 0.1)",elevation4:"0px 1px 10px rgba(0, 0, 0, 0.15), 0px 4px 5px rgba(0, 0, 0, 0.09), 0px 2px 4px rgba(0, 0, 0, 0.1)",elevation8:"0px 4px 5px rgba(0, 0, 0, 0.15), 0px 3px 14px rgba(0, 0, 0, 0.09), 0px 8px 10px rgba(0, 0, 0, 0.1)",elevation16:"0px 8px 10px rgba(0, 0, 0, 0.15), 0px 6px 30px rgba(0, 0, 0, 0.09), 0px 16px 24px rgba(0, 0, 0, 0.1)",elevation24:"0px 11px 15px rgba(0, 0, 0, 0.15), 0px 9px 46px rgba(0, 0, 0, 0.09), 0px 24px 38px rgba(0, 0, 0, 0.1)"}};

package/cjs/typography/BodyText/index.js

@@ -1,8 +1,8 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("styled-components"),o=require("../../shared/media-queries.js");var s,r=(s=t)&&s.__esModule?s:{default:s};const i=t.css`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("styled-components"),o=require("../../shared/media-queries.js");var s,i=(s=t)&&s.__esModule?s:{default:s};const r=t.css`
   font-feature-settings: 'lnum' on;
 `,n=t.css`
   font-family: ${({theme:e})=>e.typography.fontBaseFamily};
-  ${i}
+  ${r}
 `,a=t.css`
   ${n}
   font-weight: ${({theme:e})=>e.typography.fontBaseRegularWeight};
@@ -17,34 +17,40 @@
   ${a}
   font-size: 0.75rem;
   line-height: 1.5rem;
-`,m=r.default.p`
+`,m=t.css`
   ${a}
-`,h=t.css`
+  font-size: 0.625rem;
+  line-height: 1rem;
+`,h=i.default.p`
+  ${a}
+`,y=t.css`
   font-family: Georgia, Cambria, Cochin, Times, 'Times New Roman', serif;
   font-style: italic;
   font-weight: ${({theme:e})=>e.typography.fontBaseRegularWeight};
   font-size: 1rem;
   line-height: 1.5rem;
-  ${i}
-`,y=r.default.p`
-  ${h}
-`,u=r.default.p`
+  ${r}
+`,u=i.default.p`
+  ${y}
+`,d=i.default.p`
   ${l}
-`,d=t.css`
+`,g=t.css`
   ${p}
   font-size: 1rem;
   line-height: 1.5rem;
-`,g=r.default.p`
-  ${d}
-`,x=r.default.p`
+`,x=i.default.p`
+  ${g}
+`,$=i.default.p`
   ${f}
-`,$=t.css`
+`,c=i.default.p`
+  ${m}
+`,B=t.css`
   ${p}
   font-size: 0.75rem;
   line-height: 1.5rem;
-`,c=r.default.p`
-  ${$}
-`,B=t.css`
+`,S=i.default.p`
+  ${B}
+`,z=t.css`
   font-family: ${({theme:e})=>e.typography.fontAlternativeFamily};
   font-weight: ${({theme:e})=>e.typography.fontAlternativeBoldWeight};
   font-size: 1rem;
@@ -55,6 +61,6 @@
   ${o.mq("laptop")} {
     font-size: 0.75rem;
   }
-`,S=r.default.p`
-  ${B}
-`,z=()=>e.jsx("div",{});exports.BodyLink=g,exports.BodyLinkStyle=d,exports.BodyText=u,exports.BodyTextStyle=l,exports.BodyTexts=z,exports.Caption=x,exports.CaptionLink=c,exports.CaptionLinkStyle=$,exports.CaptionStyle=f,exports.Quote=y,exports.QuoteStyle=h,exports.Status=S,exports.StatusStyle=B,exports.StyledBodyText=m,exports.default=z;
+`,C=i.default.p`
+  ${z}
+`,v=()=>e.jsx("div",{});exports.BodyLink=x,exports.BodyLinkStyle=g,exports.BodyText=d,exports.BodyTextStyle=l,exports.BodyTexts=v,exports.Caption=$,exports.Caption2=c,exports.Caption2Style=m,exports.CaptionLink=S,exports.CaptionLinkStyle=B,exports.CaptionStyle=f,exports.Quote=u,exports.QuoteStyle=y,exports.Status=C,exports.StatusStyle=z,exports.StyledBodyText=h,exports.default=v;

package/cjs/utils/utils.js

@@ -1,4 +1,4 @@
-"use strict";const e=require("styled-components").css`
+"use strict";const r=require("styled-components").css`
   appearance: none;
   background-color: transparent;
   border: 0;
@@ -6,4 +6,4 @@
   font-family: inherit;
   outline: none;
   padding: 0;
-`;exports.getLuminosity=e=>{let r=0,t=0,n=0;return 4===e.length?(r=parseInt("0x"+e[1]+e[1]),t=parseInt("0x"+e[2]+e[2]),n=parseInt("0x"+e[3]+e[3])):7===e.length&&(r=parseInt("0x"+e[1]+e[2]),t=parseInt("0x"+e[3]+e[4]),n=parseInt("0x"+e[5]+e[6])),(Math.max(Number(r/255),Number(t/255),Number(n/255))+Math.min(Number(r/255),Number(t/255),Number(n/255)))/2*100},exports.hexToRGB=(e,r=1)=>`rgba(${parseInt(e.slice(1,3),16)}, ${parseInt(e.slice(3,5),16)}, ${parseInt(e.slice(5,7),16)}, ${r})`,exports.resetButtonStyle=e;
+`,e=r=>({darker:r.colors.grayscaleNeutral.dark1,dark:r.colors.grayscaleNeutral.dark1,mainAlt:r.colors.grayscaleToned.dark1,main:r.colors.grayscaleToned.dark1,light:r.colors.grayscaleToned.light1});exports.getLuminosity=r=>{let e=0,t=0,a=0;return 4===r.length?(e=parseInt("0x"+r[1]+r[1]),t=parseInt("0x"+r[2]+r[2]),a=parseInt("0x"+r[3]+r[3])):7===r.length&&(e=parseInt("0x"+r[1]+r[2]),t=parseInt("0x"+r[3]+r[4]),a=parseInt("0x"+r[5]+r[6])),(Math.max(Number(e/255),Number(t/255),Number(a/255))+Math.min(Number(e/255),Number(t/255),Number(a/255)))/2*100},exports.hexToRGB=(r,e=1)=>`rgba(${parseInt(r.slice(1,3),16)}, ${parseInt(r.slice(3,5),16)}, ${parseInt(r.slice(5,7),16)}, ${e})`,exports.neutralColorSwap=e,exports.resetButtonStyle=r,exports.resolveColorWithNeutral=(r,t)=>"neutral"===t?e(r):r.colors[t];

package/esm/ColorCard.js

@@ -1,25 +1,25 @@
-import{jsxs as a,jsx as e,Fragment as s}from"react/jsx-runtime";import r from"styled-components";import{getLuminosity as m}from"./utils/utils.js";import n from"./theme.js";const p=r.ul`
+import{jsxs as a,jsx as l,Fragment as s}from"react/jsx-runtime";import r from"styled-components";import{getLuminosity as m}from"./utils/utils.js";import n from"./theme.js";const p=r.ul`
   padding-left: 2rem;
 `,c=r.li`
   list-style: none;
   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.03);
-  border: 1px solid ${n.colors.gray.light2};
+  border: 1px solid ${n.colors.grayscaleToned.light2};
   border-radius: 4px;
   font-family: 'Ralway', sans-serif;
   margin-top: 0.75rem;
-`,t=r.span`
+`,d=r.span`
   text-transform: capitalize;
   padding: 0.5em;
   display: block;
-  border-bottom: 1px solid ${n.colors.gray.light2};
+  border-bottom: 1px solid ${n.colors.grayscaleToned.light2};
 `,f=r.li`
   display: block;
-  background: ${({hex:i})=>i};
-  color: ${({hex:i})=>m(i)<40?"#fff":"#000"};
+  background: ${({hex:o})=>o};
+  color: ${({hex:o})=>m(o)<40?"#fff":"#000"};
   padding: 1em;
 `,g=r.ul`
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
-`,d=i=>Object.entries(i).map(([l,o])=>typeof o=="string"?a(f,{hex:o,children:[l," (",o,")"]},o):a(s,{children:[e(t,{children:l}),e(p,{children:d(o)})]})),x=({colorName:i,variants:l})=>a(c,{children:[e(t,{children:i}),e(g,{children:d(l)})]});export{x as default};
+`,t=o=>Object.entries(o).map(([e,i])=>typeof i=="string"?a(f,{hex:i,children:[e," (",i,")"]},i):a(s,{children:[l(d,{children:e}),l(p,{children:t(i)})]})),x=({colorName:o,variants:e})=>a(c,{children:[l(d,{children:o}),l(g,{children:t(e)})]});export{x as default};

package/esm/components/Accordion/index.js

@@ -1,20 +1,20 @@
-import{jsx as i,jsxs as s}from"react/jsx-runtime";import{useState as f}from"react";import n from"styled-components";import{UnmountClosed as g}from"react-collapse";import{mq as y}from"../../shared/media-queries.js";import $ from"../../icons/components/ArrowDownIcon.js";const x=n.div`
+import{jsx as n,jsxs as s}from"react/jsx-runtime";import{useState as f}from"react";import r from"styled-components";import{UnmountClosed as g}from"react-collapse";import{mq as y}from"../../shared/media-queries.js";import $ from"../../icons/components/ArrowDownIcon.js";const x=r.div`
   display: flex;
   flex-direction: column;
   .ReactCollapse--collapse {
     transition: height 300ms;
   }
-`,u=n.ul`
+`,u=r.ul`
   margin: 0;
   padding: 0;
   list-style: none;
-`,b=n.div`
+`,b=r.div`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   cursor: pointer;
   margin: 0.5rem 0;
-`,w=n.div`
+`,w=r.div`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -22,19 +22,19 @@ import{jsx as i,jsxs as s}from"react/jsx-runtime";import{useState as f}from"reac
   color: ${({theme:e})=>e.colors.text.dark};
   transition: 200ms ease-in-out;
   transform: ${({isOpen:e})=>`rotate(${e?"180deg":"0deg"})`};
-`,O=n.li`
-  border-top: ${({theme:e})=>`1px solid ${e.colors.gray.light2}`};
+`,O=r.li`
+  border-top: ${({theme:e})=>`1px solid ${e.colors.grayscaleToned.light2}`};
   padding: ${({isOpen:e})=>e?"0.5rem 0 1rem 0":"0.5rem 0"};
 
   &:last-child {
-    border-bottom: ${({theme:e})=>`1px solid ${e.colors.gray.light2}`};
+    border-bottom: ${({theme:e})=>`1px solid ${e.colors.grayscaleToned.light2}`};
   }
-`,k=n.span`
+`,k=r.span`
   color: ${({theme:e})=>e.colors.text.dark};
   font-family: ${({theme:e})=>e.typography.fontBaseFamily};
   font-size: 0.9375rem;
   font-weight: ${({theme:e})=>e.typography.fontBaseBoldWeight};
-`,B=n.div`
+`,B=r.div`
   font-family: ${({theme:e})=>e.typography.fontBaseFamily};
   color: ${({theme:e})=>e.colors.text.dark};
   font-size: 0.9375rem;
@@ -48,4 +48,4 @@ import{jsx as i,jsxs as s}from"react/jsx-runtime";import{useState as f}from"reac
     margin-top: 0;
     margin-bottom: 0;
   }
-`,l=({items:e,...m})=>{const[d,c]=f({}),a=o=>{c(t=>({...t,[o]:!t[o]}))},p=o=>()=>{a(o)},h=o=>t=>{t.key==="Enter"&&a(o)};return i(x,{...m,children:i(u,{className:"accordionList",children:e.map((o,t)=>{const r=!!d[t];return s(O,{isOpen:r,className:"accordionItem",children:[s(b,{onClick:p(t),onKeyPress:h(t),className:"accordionItemTitle",role:"button",tabIndex:0,"aria-expanded":r,id:`panel${t}-header`,"aria-controls":`panel${t}-content`,children:[i(k,{as:"span",children:o.title}),i(w,{isOpen:r,children:i($,{})})]}),i(g,{isOpened:r,children:i(B,{"aria-labelledby":`panel${t}-header`,id:`panel${t}-content`,role:"region",className:"wysiwyg",dangerouslySetInnerHTML:{__html:o.text}})},t)]},o.title)})})})};export{l as Accordion,l as default};
+`,l=({items:e,...m})=>{const[d,c]=f({}),a=o=>{c(t=>({...t,[o]:!t[o]}))},p=o=>()=>{a(o)},h=o=>t=>{t.key==="Enter"&&a(o)};return n(x,{...m,children:n(u,{className:"accordionList",children:e.map((o,t)=>{const i=!!d[t];return s(O,{isOpen:i,className:"accordionItem",children:[s(b,{onClick:p(t),onKeyPress:h(t),className:"accordionItemTitle",role:"button",tabIndex:0,"aria-expanded":i,id:`panel${t}-header`,"aria-controls":`panel${t}-content`,children:[n(k,{as:"span",children:o.title}),n(w,{isOpen:i,children:n($,{})})]}),n(g,{isOpened:i,children:n(B,{"aria-labelledby":`panel${t}-header`,id:`panel${t}-content`,role:"region",className:"wysiwyg",dangerouslySetInnerHTML:{__html:o.text}})},t)]},o.title)})})})};export{l as Accordion,l as default};

package/esm/components/Breadcrumbs/BreadcrumbsItem.js

@@ -1,4 +1,4 @@
-import{jsx as t,Fragment as n,jsxs as i}from"react/jsx-runtime";import o from"styled-components";import{BodyTextStyle as a,BodyText as s}from"../../typography/BodyText/index.js";import"../../shared/media-queries.js";const h=o.li`
+import{jsx as o,Fragment as n,jsxs as i}from"react/jsx-runtime";import t from"styled-components";import{BodyTextStyle as a,BodyText as s}from"../../typography/BodyText/index.js";import"../../shared/media-queries.js";const c=t.li`
   display: flex;
   align-items: center;
   margin: 0;
@@ -24,23 +24,23 @@ import{jsx as t,Fragment as n,jsxs as i}from"react/jsx-runtime";import o from"st
       overflow: hidden;
     }
   `}
-`,c=o(s)`
+`,h=t(s)`
   color: ${({theme:e})=>e.colors.text.dark};
   overflow: hidden;
   text-overflow: ellipsis;
-`,m=o.span`
+`,m=t.span`
   display: inline-flex;
   padding-right: 0.5rem;
   svg {
     width: 1rem;
     height: 1rem;
   }
-`,p=o.span`
+`,p=t.span`
   display: inline-flex;
   padding: 0 0.5rem;
-  color: ${({theme:e})=>e.colors.gray.light1};
+  color: ${({theme:e})=>e.colors.grayscaleToned.light1};
   svg {
     width: 1rem;
     height: 1rem;
   }
-`,f=({link:e,separator:r,isLast:l,onlyLastTruncated:d})=>t(n,{children:i(h,{$onlyLastTruncated:d,children:[e.prefixIcon&&t(m,{children:e.prefixIcon}),l?t(c,{as:"span",children:e.component}):i(n,{children:[e.component,t(p,{children:r})]})]})});export{f as default};
+`,f=({link:e,separator:r,isLast:l,onlyLastTruncated:d})=>o(n,{children:i(c,{$onlyLastTruncated:d,children:[e.prefixIcon&&o(m,{children:e.prefixIcon}),l?o(h,{as:"span",children:e.component}):i(n,{children:[e.component,o(p,{children:r})]})]})});export{f as default};

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 E,regularSizeStyles as F,largeSizeStyles as R,disabledColorStyles as V,colorStyles as C}from"./styles.js";const c=0,D=t.button`
+import{jsx as l,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 $ from"../../theme.js";import B from"../Spinner/index.js";import{BasicButtonFontStyle as j,ButtonRegularTextStyle as k}from"../../typography/ButtonText/index.js";import{fontSizes as T,smallSizeStyles as A,regularSizeStyles as C,largeSizeStyles as E,disabledColorStyles as F,colorStyles as R}from"./styles.js";import"../../utils/utils.js";const c=0,V=t.button`
   ${j}
   box-sizing: border-box;
   outline: none;
@@ -6,17 +6,18 @@ import{jsx as s,jsxs as I,Fragment as W}from"react/jsx-runtime";import g,{forwar
   user-select: none;
   position: relative;
   border: none;
+  border-radius: 0.5rem;
   min-width: ${({minWidth:e})=>e||"auto"};
   width: ${({fullWidth:e})=>e&&"100%"};
   display: flex;
   align-items: center;
-  justify-content: ${({sufixIcon:e,prefixIcon:i,isLoading:l})=>!l&&(e||i)?"space-between":"center"};
+  justify-content: ${({sufixIcon:e,prefixIcon:i,isLoading:s})=>!s&&(e||i)?"space-between":"center"};
 
-  ${({size:e="small"})=>A[e]||k}
-  ${({size:e})=>u`
-    ${(e==="smaller"||e==="small")&&E()}
-    ${e==="regular"&&F()}
-    ${e==="large"&&R()}
+  ${({$size:e="small"})=>T[e]||k}
+  ${({$size:e})=>u`
+    ${e==="small"&&A()}
+    ${e==="regular"&&C()}
+    ${e==="large"&&E()}
   `}
   background-color: transparent;
   transition:
@@ -24,20 +25,21 @@ import{jsx as s,jsxs as I,Fragment as W}from"react/jsx-runtime";import g,{forwar
     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?V(a,e):C[e](a,i,l)}
+  ${({$variant:e="solid",$color:i,$colorShade:s="main",disabled:n,theme:a})=>u`
+    ${n?F(a,e):R[e]({theme:a,$color:i,$colorShade:s,$variant:e})}
   `}
   &:focus-visible {
-    box-shadow: 0px 0px 0px 1px ${({theme:e})=>e.colors.gray.light5};
+    box-shadow: 0px 0px 0px 1px
+      ${({theme:e})=>e.colors.grayscaleToned.light5};
   }
-`,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`
+`,D={small:"1rem",regular:"1.25rem",large:"1.5rem"},h={small:"0.5rem",regular:"1rem",large:"1rem"},y=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})=>M[e]};
+  font-size: ${({size:e})=>D[e]};
   opacity: ${({isLoading:e})=>e?c:1};
-`,N=t(B)`
+`,M=t(B)`
   position: absolute;
-`,T=t.span`
+`,N=t.span`
   opacity: ${({isLoading:e})=>e?c:1};
-`,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};
+`,q={small:1,regular:1.25,large:1.5},f=w(({size:e="small",color:i,colorShade:s="mainAlt",variant:n="solid",fullWidth:a=!1,isDisabled:x=!1,isLoading:r=!1,children:b,sufixIcon:d,prefixIcon:m,minWidth:z,as:S="button",...L},v)=>l(V,{...L,as:S,minWidth:z,$color:i,$colorShade:s,disabled:x||r,fullWidth:a,theme:$,$variant:n,$size:e,isLoading:r,ref:v,prefixIcon:m,sufixIcon:d,children:I(W,{children:[m&&l(y,{size:e,type:"prefix",isLoading:r,children:m}),((o,p)=>typeof o=="string"||typeof o=="number"?l(N,{isLoading:p,children:o}):g.isValidElement(o)?g.cloneElement(o,{style:{...o.props.style,opacity:p?c:1}}):o)(b,r),d&&l(y,{size:e,type:"sufix",isLoading:r,children:d}),r&&l(M,{customColor:$.colors.grayscaleToned.light1,size:q[e]})]})}));f.displayName="Button";export{f as Button,f as default};

package/esm/components/Button/styles.js

@@ -1,52 +1,52 @@
-import{ButtonLargeTextStyle as i,ButtonRegularTextStyle as e,ButtonSmallTextStyle as c}from"../../typography/ButtonText/index.js";import"react/jsx-runtime";import"styled-components";const s={smaller:c,small:e,regular:e,large:i},a=()=>`
+import{ButtonLargeTextStyle as n,ButtonRegularTextStyle as c,ButtonSmallTextStyle as s}from"../../typography/ButtonText/index.js";import{resolveColorWithNeutral as t}from"../../utils/utils.js";import"react/jsx-runtime";import"styled-components";const d={small:s,regular:c,large:n},g=()=>`
   padding: 0.25rem 0.75rem;
   min-height: 2.5rem;
-`,n=()=>`
+`,m=()=>`
   padding: 0.25rem 1.5rem;
   min-height: 3rem;
-`,d=()=>`
+`,h=()=>`
   padding: 0.25rem 1.5rem;
   min-height: 3.75rem;
-`,g=(o,r,t)=>`
-  color: ${o.colors.text.light};
-  background-color: ${o.colors[r][t]};
+`,$=({theme:r,$color:e,$colorShade:o})=>{const l=t(r,e),a=e==="neutral"?l.mainAlt:r.colors[e][o];return`
+  color: ${r.colors.text.light};
+  background-color: ${a};
 
-  :hover {
-    border-color: ${o.colors[r].dark};
+  &:hover {
+    border-color: ${l.dark};
     filter: brightness(0.9)
   }
 
-  :active {
-    border-color: ${o.colors[r].light};
+  &:active {
+    border-color: ${l.light};
     filter: brightness(1.1)
   }
-`,m=(o,r)=>`
-  color: ${o.colors[r].main};
-  border: 2px solid ${o.colors[r].main};
+`},u=({theme:r,$color:e})=>{const o=t(r,e);return`
+  color: ${o.mainAlt};
+  border: 2px solid ${o.mainAlt};
   background-color: transparent;
 
-  :hover {
-      border: 2px solid ${o.colors[r].dark};
-      color: ${o.colors[r].dark};
+  &:hover {
+      border: 2px solid ${o.dark};
+      color: ${o.dark};
   }
 
-  :active {
-    border: 2px solid ${o.colors[r].light};
-    color: ${o.colors[r].light};
+  &:active {
+    border: 2px solid ${o.light};
+    color: ${o.light};
   }
-`,h=(o,r)=>`
-  color: ${o.colors[r].main};
+`},p=({theme:r,$color:e})=>{const o=t(r,e);return`
+  color: ${o.mainAlt};
 
   background-color: transparent;
 
-  :hover, :active {
-    color: ${o.colors[r].dark};
+  &:hover, &:active {
+    color: ${o.dark};
   }
-`,l=o=>`
-  color: ${o.colors.gray.light1};
+`},i=r=>`
+  color: ${r.colors.grayscaleToned.light1};
   cursor: not-allowed;
-`,$=(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),S={solid:g,outline:m,flat:h};export{S as colorStyles,$ as disabledColorStyles,s as fontSizes,d as largeSizeStyles,n as regularSizeStyles,a as smallerAndSmallSizeStyles};
+`,S=(r,e)=>e==="solid"?`
+    ${i(r)};
+    background-color: ${r.colors.grayscaleToned.light4};`:e==="outline"?`
+    ${i(r)};
+    border: 2px solid ${r.colors.grayscaleToned.light1};`:i(r),b={solid:$,outline:u,flat:p};export{b as colorStyles,S as disabledColorStyles,d as fontSizes,h as largeSizeStyles,m as regularSizeStyles,g as smallSizeStyles};

package/esm/components/Card/index.js

@@ -1,14 +1,14 @@
-import{jsxs as s,jsx as i}from"react/jsx-runtime";import l from"styled-components";import n from"../../theme.js";const m=l.div``,p=l.div`
-  background: ${({topBorder:r})=>r};
+import{jsxs as s,jsx as i}from"react/jsx-runtime";import l from"styled-components";import n from"../../theme.js";const c=l.div``,m=l.div`
+  background: ${({topBorder:o})=>o};
   height: 0.25rem;
-`,g=l.div`
+`,p=l.div`
   background: ${n.colors.background.light};
 
-  ${({noFrame:r,topBorder:o,lineBorder:e,theme:d})=>!o&&(!r||e)&&`border-top: 1px solid ${d.colors.gray.light5};`}
+  ${({noFrame:o,topBorder:r,lineBorder:e,theme:d})=>!r&&(!o||e)&&`border-top: 1px solid ${d.colors.grayscaleToned.light5};`}
 
-  ${({noFrame:r,lineBorder:o,theme:e})=>(!r||o)&&`border-bottom: 1px solid ${e.colors.gray.light5};
+  ${({noFrame:o,lineBorder:r,theme:e})=>(!o||r)&&`border-bottom: 1px solid ${e.colors.grayscaleToned.light5};
   `}
 
-  ${({noFrame:r,lineBorder:o,theme:e})=>!r&&!o&&`border-right: 1px solid ${e.colors.gray.light5};
-     border-left: 1px solid ${e.colors.gray.light5};`}
-`,t=({children:r,topBorder:o,noFrame:e=!1,lineBorder:d=!1,as:a="div"})=>s(m,{as:a,children:[o&&i(p,{topBorder:o}),i(g,{topBorder:o,noFrame:e,lineBorder:d,children:r})]});export{t as Card,t as default};
+  ${({noFrame:o,lineBorder:r,theme:e})=>!o&&!r&&`border-right: 1px solid ${e.colors.grayscaleToned.light5};
+     border-left: 1px solid ${e.colors.grayscaleToned.light5};`}
+`,t=({children:o,topBorder:r,noFrame:e=!1,lineBorder:d=!1,as:a="div"})=>s(c,{as:a,children:[r&&i(m,{topBorder:r}),i(p,{topBorder:r,noFrame:e,lineBorder:d,children:o})]});export{t as Card,t as default};

package/esm/components/CheckBox/index.js

@@ -1,4 +1,4 @@
-import{jsxs as b,jsx as s}from"react/jsx-runtime";import t,{css as r}from"styled-components";import m from"../../icons/components/CheckmarkIcon.js";import{generateNameHash as g}from"../../shared/helpers.js";import i from"../../theme.js";import{BodyText as f}from"../../typography/BodyText/index.js";import{BackgroundStyles as u}from"../IconButton.js";import"../../shared/media-queries.js";const k=r`
+import{jsxs as b,jsx as s}from"react/jsx-runtime";import a,{css as r}from"styled-components";import m from"../../icons/components/CheckmarkIcon.js";import{generateNameHash as g}from"../../shared/helpers.js";import i from"../../theme.js";import{BodyText as f}from"../../typography/BodyText/index.js";import{BackgroundStyles as u}from"../IconButton.js";import"../../shared/media-queries.js";import"../../utils/utils.js";const k=r`
   width: 24px;
   height: 24px;
 
@@ -16,7 +16,7 @@ import{jsxs as b,jsx as s}from"react/jsx-runtime";import t,{css as r}from"styled
   }
 `,n={regular:k,large:$},y=r`
   cursor: default;
-  border: 2px solid ${i.colors.gray.light2};
+  border: 2px solid ${i.colors.grayscaleToned.light2};
 `,v=e=>r`
   svg {
     opacity: 1;
@@ -28,16 +28,16 @@ import{jsxs as b,jsx as s}from"react/jsx-runtime";import t,{css as r}from"styled
   background: ${i.colors[e].main};
   border: 2px solid ${i.colors[e].main};
 `,z=r`
-  background: ${i.colors.gray.light2};
+  background: ${i.colors.grayscaleToned.light2};
   z-index: 1;
 `,D=r`
   border: 2px solid ${i.colors.error.dark};
-`,w=t.div`
+`,w=a.div`
   display: flex;
   align-items: flex-start;
   box-sizing: border-box;
   position: relative;
-`,C=t.input.attrs({type:"checkbox"})`
+`,C=a.input.attrs({type:"checkbox"})`
   position: absolute;
   appearance: none;
   width: 100%;
@@ -53,7 +53,7 @@ import{jsxs as b,jsx as s}from"react/jsx-runtime";import t,{css as r}from"styled
     transition: background-color 400ms;
     ${u}
   }
-`,S=t.span`
+`,S=a.span`
   box-sizing: border-box;
   cursor: pointer;
   display: flex;
@@ -62,7 +62,7 @@ import{jsxs as b,jsx as s}from"react/jsx-runtime";import t,{css as r}from"styled
   justify-content: center;
   z-index: 0;
 
-  border: 2px solid ${i.colors.gray.dark5};
+  border: 2px solid ${i.colors.grayscaleToned.dark5};
 
   ${e=>n[e.size]};
 
@@ -75,10 +75,10 @@ import{jsxs as b,jsx as s}from"react/jsx-runtime";import t,{css as r}from"styled
   ${e=>e.isDisabled&&y};
   ${e=>e.hasError&&D};
   ${e=>e.isChecked&&e.isDisabled&&z};
-`,j=t(f)`
+`,T=a(f)`
   flex: 1;
   cursor: ${({isDisabled:e})=>e?"default":"pointer"};
   user-select: none;
   color: ${({theme:e,isDisabled:o})=>o?e.colors.text.disabled:e.colors.text.dark};
   margin-left: 0.5rem;
-`,h=({name:e=g("check-box"),isDisabled:o=!1,size:a="regular",checked:l=!1,color:d="secondary",hasError:p=!1,label:c,...x})=>b(w,{children:[s(C,{...x,type:"checkbox",checked:l,"data-validate":"checked",name:e,id:e,color:d,disabled:o,isDisabled:o,boxSize:a}),s(S,{size:a,color:d,isChecked:l,isDisabled:o,hasError:p,children:s(m,{})}),c&&s(j,{as:"label",htmlFor:e,isDisabled:o,children:c})]});export{h as CheckBox,h as default};
+`,h=({name:e=g("check-box"),isDisabled:o=!1,size:t="regular",checked:l=!1,color:d="secondary",hasError:p=!1,label:c,...x})=>b(w,{children:[s(C,{...x,type:"checkbox",checked:l,"data-validate":"checked",name:e,id:e,color:d,disabled:o,isDisabled:o,boxSize:t}),s(S,{size:t,color:d,isChecked:l,isDisabled:o,hasError:p,children:s(m,{})}),c&&s(T,{as:"label",htmlFor:e,isDisabled:o,children:c})]});export{h as CheckBox,h as default};

package/esm/components/Chip/index.js

@@ -1,14 +1,14 @@
-import{jsx as i,jsxs as v}from"react/jsx-runtime";import t from"styled-components";import y from"../../icons/components/CloseIcon.js";import{getFontSize as C,getCursorType as m,getBackgroundColor as $,getColor as x,getBorderColor as k,getHoverBorderColor as B,getHoverBackgroundColor as z,getHoverColor as D,getActiveBackgroundColor as p,getActiveBorderColor as j,getActiveColor as H,getSufixHoverBackgroundColor as w}from"./styles.js";const A={smaller:"0.25rem 1rem",small:"0.25rem 1rem",regular:"0.25rem 1rem",large:"0.5rem 1rem"},S=t.div`
+import{jsx as i,jsxs as x}from"react/jsx-runtime";import t from"styled-components";import v from"../../icons/components/CloseIcon.js";import{getFontSize as y,getCursorType as p,getBackgroundColor as C,getColor as $,getBorderColor as k,getHoverBorderColor as z,getHoverBackgroundColor as B,getHoverColor as D,getActiveBackgroundColor as b,getActiveBorderColor as j,getActiveColor as H,getSufixHoverBackgroundColor as w}from"./styles.js";import"../../utils/utils.js";const A={small:"2px 16px",regular:"3px 16px",large:"7px 16px"},S=t.div`
   font-family: ${({theme:e})=>e.typography.fontBaseFamily};
-  font-size: ${({size:e})=>C(e)};
+  font-size: ${({size:e})=>y(e)};
   font-weight: ${({theme:e})=>e.typography.fontBaseBoldWeight};
   line-height: 1.25;
   letter-spacing: 0.1px;
   display: inline-flex;
-  cursor: ${m};
+  cursor: ${p};
   align-items: center;
-  background: ${$};
-  color: ${x};
+  background: ${C};
+  color: ${$};
   justify-content: center;
   border-width: 1px;
   border-style: solid;
@@ -19,13 +19,14 @@ import{jsx as i,jsxs as v}from"react/jsx-runtime";import t from"styled-component
     color 0.3s ease,
     background-color 0.3s ease,
     border 0.3s ease;
+  box-sizing: border-box;
 
   ${e=>!e.isDisabled&&e.isClickable&&` &:hover {
-    border-color: ${B(e)};
-    background-color: ${z(e)};
+    border-color: ${z(e)};
+    background-color: ${B(e)};
     color: ${D(e)};
   } &:active {
-    background-color: ${p(e)};
+    background-color: ${b(e)};
     border-color: ${j(e)};
     color: ${H(e)};
   }`}
@@ -39,10 +40,10 @@ import{jsx as i,jsxs as v}from"react/jsx-runtime";import t from"styled-component
   margin-right: 0.625rem;
   display: flex;
   align-items: center;
-`,P=t.span`
+`,N=t.span`
   display: flex;
   align-items: center;
-  cursor: ${m};
+  cursor: ${p};
   padding: 0.5rem;
   margin-left: 0.25rem;
   margin-right: -0.25rem;
@@ -63,11 +64,11 @@ import{jsx as i,jsxs as v}from"react/jsx-runtime";import t from"styled-component
   }
 
   &:active:before {
-    background-color: ${p};
+    background-color: ${b};
     opacity: 1;
   }
 
   &:hover:before {
     opacity: 1;
   }
-`,b=({color:e="primary",children:l,component:u="div",isDisabled:r,onClick:s,size:h="regular",prefix:a,onDelete:n,variant:c="solid",...f})=>{const o=!!(s&&!r),d=!!(n&&!r);return i(S,{...f,role:o?"button":void 0,onClick:o?s:void 0,tabIndex:o?0:void 0,as:o?"button":u,color:e,isDisabled:r,size:h,isClickable:o,isDeletable:d,variant:c,hasPrefix:!!a,children:v(F,{children:[a&&i(I,{className:"prefix",children:a}),l,n&&i(P,{role:"button",onClick:d?g=>{g.stopPropagation(),n?.(g)}:void 0,color:e,variant:c,isClickable:o,isDisabled:r,isDeletable:!0,size:"regular",children:i(y,{})})]})})};export{b as Chip,b as default};
+`,m=({color:e="primary",children:l,component:u="div",isDisabled:r,onClick:s,size:h="regular",prefix:n,onDelete:a,variant:c="solid",...f})=>{const o=!!(s&&!r),d=!!(a&&!r);return i(S,{...f,role:o?"button":void 0,onClick:o?s:void 0,tabIndex:o?0:void 0,as:o?"button":u,color:e,isDisabled:r,size:h,isClickable:o,isDeletable:d,variant:c,hasPrefix:!!n,children:x(F,{children:[n&&i(I,{className:"prefix",children:n}),l,a&&i(N,{role:"button",onClick:d?g=>{g.stopPropagation(),a?.(g)}:void 0,color:e,variant:c,isClickable:o,isDisabled:r,isDeletable:!0,size:"regular",children:i(v,{})})]})})};export{m as Chip,m as default};

package/esm/components/Chip/styles.js

@@ -1 +1 @@
-const e=(t="smaller")=>({smaller:"0.625rem",small:"0.75rem",regular:"1rem",large:"1rem"})[t],i=({isDisabled:t,variant:l,color:o,theme:r})=>t?r.colors.gray.light5:o==="neutralLight"?{solid:r.colors.background.gray,flat:r.colors.background.light,outline:"transparent"}[l]:{solid:r.colors[o].main,flat:r.colors.background.light,outline:"transparent"}[l],s=({isDisabled:t,variant:l,color:o,theme:r})=>t?r.colors.text.disabled:o==="neutralLight"?l==="outline"?r.colors.text.disabled:r.colors.text.dark:{solid:r.colors.text.light,flat:r.colors[o].main,outline:r.colors[o].main}[l],n=({color:t,isDisabled:l,variant:o,theme:r})=>l?r.colors.gray.light5:t==="neutralLight"?{solid:"transparent",flat:"transparent",outline:r.colors.text.disabled}[o]:{solid:r.colors[t].main,flat:"transparent",outline:r.colors[t].main}[o],c=({isDisabled:t,isClickable:l,isDeletable:o})=>t?"not-allowed":l||o?"pointer":"auto",g=({variant:t,color:l,theme:o})=>l==="neutralLight"?{solid:o.colors.gray.light4,flat:o.colors.background.light,outline:"transparent"}[t]:{solid:o.colors[l].dark,flat:o.colors.background.light,outline:"transparent"}[t],d=({variant:t,color:l,theme:o})=>l==="neutralLight"?{solid:o.colors.gray.light4,flat:"transparent",outline:o.colors.text.dark}[t]:{solid:o.colors[l].dark,flat:"transparent",outline:o.colors[l].dark}[t],h=({variant:t,color:l,theme:o})=>l==="neutralLight"?o.colors.text.dark:{solid:o.colors.text.light,flat:o.colors[l].dark,outline:o.colors[l].dark}[t],u=({variant:t,color:l,isClickable:o,isDisabled:r,theme:a})=>r?a.colors.gray.light5:l==="neutralLight"?{solid:a.colors.gray.light2,flat:a.colors.gray.light4,outline:a.colors.gray.light4}[t]:t==="solid"?o?a.colors[l].darker:a.colors[l].dark:a.colors.background.gray,k=({color:t,variant:l,isDisabled:o,theme:r})=>o?"transparent":t==="neutralLight"?r.colors.background.light:l==="solid"?r.colors[t].light:"transparent",m=({variant:t,color:l,theme:o})=>l==="neutralLight"?{solid:o.colors.background.light,flat:"transparent",outline:o.colors.background.light}[t]:{solid:o.colors[l].light,flat:"transparent",outline:o.colors[l].light}[t],b=({variant:t,color:l,theme:o})=>l==="neutralLight"?o.colors.text.dark:t==="solid"?o.colors.text.light:o.colors[l].light;export{k as getActiveBackgroundColor,m as getActiveBorderColor,b as getActiveColor,i as getBackgroundColor,n as getBorderColor,s as getColor,c as getCursorType,e as getFontSize,g as getHoverBackgroundColor,d as getHoverBorderColor,h as getHoverColor,u as getSufixHoverBackgroundColor};
+import{resolveColorWithNeutral as a}from"../../utils/utils.js";import"styled-components";const n=(r="small")=>({small:"0.75rem",regular:"1rem",large:"1rem"})[r],s=({isDisabled:r,variant:o,color:t,theme:e})=>r?e.colors.grayscaleToned.light5:t==="neutralLight"?{solid:e.colors.background.gray,flat:e.colors.background.light,outline:"transparent"}[o]:{solid:a(e,t).main,flat:e.colors.background.light,outline:"transparent"}[o],c=({isDisabled:r,variant:o,color:t,theme:e})=>{if(r)return e.colors.text.disabled;if(t==="neutralLight")return o==="outline"?e.colors.text.disabled:e.colors.text.dark;const l=a(e,t).main;return{solid:e.colors.text.light,flat:l,outline:l}[o]},g=({color:r,isDisabled:o,variant:t,theme:e})=>{if(o)return e.colors.grayscaleToned.light5;if(r==="neutralLight")return{solid:"transparent",flat:"transparent",outline:e.colors.text.disabled}[t];const l=a(e,r).main;return{solid:l,flat:"transparent",outline:l}[t]},d=({isDisabled:r,isClickable:o,isDeletable:t})=>r?"not-allowed":o||t?"pointer":"auto",u=({variant:r,color:o,theme:t})=>o==="neutralLight"?{solid:t.colors.grayscaleToned.light4,flat:t.colors.background.light,outline:"transparent"}[r]:{solid:a(t,o).dark,flat:t.colors.background.light,outline:"transparent"}[r],h=({variant:r,color:o,theme:t})=>{if(o==="neutralLight")return{solid:t.colors.grayscaleToned.light4,flat:"transparent",outline:t.colors.text.dark}[r];const e=a(t,o).dark;return{solid:e,flat:"transparent",outline:e}[r]},f=({variant:r,color:o,theme:t})=>{if(o==="neutralLight")return t.colors.text.dark;const e=a(t,o).dark;return{solid:t.colors.text.light,flat:e,outline:e}[r]},k=({variant:r,color:o,isClickable:t,isDisabled:e,theme:l})=>{if(e)return l.colors.grayscaleToned.light5;if(o==="neutralLight")return{solid:l.colors.grayscaleToned.light2,flat:l.colors.grayscaleToned.light4,outline:l.colors.grayscaleToned.light4}[r];const i=a(l,o);return r==="solid"?t?i.darker:i.dark:l.colors.background.gray},b=({color:r,variant:o,isDisabled:t,theme:e})=>t?"transparent":r==="neutralLight"?e.colors.background.light:o==="solid"?a(e,r).light:"transparent",m=({variant:r,color:o,theme:t})=>{if(o==="neutralLight")return{solid:t.colors.background.light,flat:"transparent",outline:t.colors.background.light}[r];const e=a(t,o).light;return{solid:e,flat:"transparent",outline:e}[r]},p=({variant:r,color:o,theme:t})=>o==="neutralLight"?t.colors.text.dark:r==="solid"?t.colors.text.light:a(t,o).light;export{b as getActiveBackgroundColor,m as getActiveBorderColor,p as getActiveColor,s as getBackgroundColor,g as getBorderColor,c as getColor,d as getCursorType,n as getFontSize,u as getHoverBackgroundColor,h as getHoverBorderColor,f as getHoverColor,k as getSufixHoverBackgroundColor};

package/esm/components/DayPicker/DayPickerNavBar.js

@@ -1,11 +1,11 @@
-import{jsxs as c,jsx as t}from"react/jsx-runtime";import o from"styled-components";import d from"../Icons/Arrow.js";import r from"../../theme.js";import{BodyText as p}from"../../typography/BodyText/index.js";import{formatMonthTitle as s}from"./localeUtils.js";import"../../shared/media-queries.js";const f=o.div`
+import{jsxs as c,jsx as t}from"react/jsx-runtime";import o from"styled-components";import d from"../Icons/Arrow.js";import e from"../../theme.js";import{BodyText as s}from"../../typography/BodyText/index.js";import{formatMonthTitle as p}from"./localeUtils.js";import"../../shared/media-queries.js";const f=o.div`
   display: flex;
   justify-content: space-between;
   padding: 0 2em;
-`,h=o(p)`
+`,h=o(s)`
   font-size: 1.5em;
-  color: ${r.colors.text.dark};
-`,e=o.button`
+  color: ${e.colors.text.dark};
+`,r=o.button`
   appearance: none;
   background-color: transparent;
   border: 0;
@@ -14,12 +14,12 @@ import{jsxs as c,jsx as t}from"react/jsx-runtime";import o from"styled-component
   outline: none;
   display: flex;
   align-items: center;
-`,i=o(d)`
+`,n=o(d)`
   width: 16px;
   height: 16px;
-  fill: ${r.colors.gray.dark3};
-`,x=o(i)`
+  fill: ${e.colors.grayscaleToned.dark3};
+`,x=o(n)`
   transform: rotate(90deg);
-`,k=o(i)`
+`,k=o(n)`
   transform: rotate(-90deg);
-`,g=({month:n,onPreviousClick:l,onNextClick:a,locale:m})=>c(f,{children:[t(e,{onClick:()=>l(),children:t(x,{title:"prev-month"})}),t(h,{as:"h3",children:s(n,m)}),t(e,{onClick:()=>a(),children:t(k,{title:"next-month"})})]});export{g as default};
+`,g=({month:i,onPreviousClick:l,onNextClick:a,locale:m})=>c(f,{children:[t(r,{onClick:()=>l(),children:t(x,{title:"prev-month"})}),t(h,{as:"h3",children:p(i,m)}),t(r,{onClick:()=>a(),children:t(k,{title:"next-month"})})]});export{g as default};