@logrock/pebbles - npm Package Compare versions

Comparing version 4.0.2 to 4.1.0

dist/components/InputBox/InputBox.d.ts

@@ -18,4 +18,5 @@ import React, { FC } from "react";
     type?: string;
+    spaced?: boolean;
 };
 declare const InputBox: FC<InputBoxProps>;
 export default InputBox;

dist/components/InputBox/InputBox.styled.d.ts

 import { InputBoxProps } from "./InputBox";
-export declare const StyledDiv: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledDiv: import("styled-components").StyledComponent<"div", any, {
+    spaced?: boolean | undefined;
+}, never>;
 export declare const Label: import("styled-components").StyledComponent<"span", any, {}, never>;
@@ -4,0 +6,0 @@ export declare const HelperDiv: import("styled-components").StyledComponent<"div", any, {}, never>;

dist/components/Select/Select.d.ts

 /// <reference types="react" />
 import { BaseItemType, SelectProps } from "./Select.types";
-declare const Select: <ItemType extends BaseItemType>({ autoCompleteItems, renderItem, inputProps, renderHeader, onItemSelected, }: SelectProps<ItemType>) => JSX.Element;
+declare const Select: <ItemType extends BaseItemType>({ autoCompleteItems, renderItem, inputProps, renderHeader, onItemSelected, spaced, }: SelectProps<ItemType>) => JSX.Element;
 export default Select;

dist/components/Select/Select.styled.d.ts

@@ -1,1 +0,9 @@
-export {};
+export declare const SelectWrapper: import("styled-components").StyledComponent<"div", any, {
+    focus?: boolean | undefined;
+    spaced?: boolean | undefined;
+}, never>;
+export declare const SelectItems: import("styled-components").StyledComponent<"div", any, {
+    focus?: boolean | undefined;
+    helper?: string | undefined;
+    description?: string | undefined;
+}, never>;

dist/components/Select/Select.types.d.ts

@@ -28,2 +28,3 @@ import { FC } from "react";
     inputProps?: InputBoxProps;
+    spaced?: boolean;
 };

dist/logrock-pebbles.es.js

@@ -581,2 +581,3 @@ var __defProp = Object.defineProperty;
 const inputBox = {
+  spacing: spacings.xxbig,
   fontFamily: "Archivo",
@@ -661,2 +662,28 @@ fontWeight: "normal",
 };
+const checkBox = {
+  checkMark: {
+    color: shades[0],
+    width: "3px",
+    height: "6px",
+    left: "5px",
+    top: "2px"
+  },
+  width: spacings.md,
+  height: spacings.md,
+  marginRight: spacings.sm,
+  default: {
+    background: shades[0],
+    borderColor: neutral[300],
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderRadius: "1.33333px"
+  },
+  checked: {
+    background: primary["500"],
+    borderColor: primary["500"],
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderRadius: "1.33333px"
+  }
+};
 const theme$1 = {
@@ -717,3 +744,4 @@ name: "light",
   inputBox,
-  select
+  select,
+  checkBox
 };
@@ -1191,2 +1219,3 @@ const theme = __spreadProps(__spreadValues({}, theme$1), {
   flex-direction: column;
+  margin-top: ${({ theme: theme2, spaced }) => spaced ? theme2.inputBox.spacing : 0};
 `;
@@ -1289,2 +1318,3 @@ const Label = styled.span`
   return jsxs(StyledDiv, {
+    spaced: props.spaced,
     children: [jsx(Label, {
@@ -1348,10 +1378,6 @@ children: props.description
 };
-const AutoCompleteWrapper = styled.div`
+const SelectWrapper = styled.div`
   display: flex;
-  position: ${({
-  focus
-}) => focus ? "fixed" : "relative"};
-  z-index: ${({
-  focus
-}) => focus ? "99999" : "9"};
+  position: ${({ focus }) => focus ? "fixed" : "relative"};
+  z-index: ${({ focus }) => focus ? "99999" : "9"};
   top: 0;
@@ -1363,11 +1389,6 @@ right: 0;
   flex-flow: column nowrap;
-  padding: ${({
-  theme: theme2,
-  focus
-}) => focus ? theme2.spacings.md : void 0};
+  margin-top: ${({ theme: theme2, spaced }) => spaced ? theme2.inputBox.spacing : 0};
+  padding: ${({ theme: theme2, focus }) => focus ? theme2.spacings.md : void 0};
 
-  background: ${({
-  theme: theme2,
-  focus
-}) => focus ? theme2.colors.shades["0"] : "none"};
+  background: ${({ theme: theme2, focus }) => focus ? theme2.colors.shades["0"] : "none"};
 
@@ -1382,6 +1403,4 @@ ${up("desktop")} {
 `;
-const AutoCompleteItems = styled.div`
-  display: ${({
-  focus
-}) => focus ? "flex" : "none"};
+const SelectItems = styled.div`
+  display: ${({ focus }) => focus ? "flex" : "none"};
   box-sizing: border-box;
@@ -1394,25 +1413,19 @@ flex-flow: column nowrap;
 
-  background: ${({
-  theme: theme2
-}) => theme2.colors.shades["0"]};
-  box-shadow: ${({
-  theme: theme2,
-  focus
-}) => focus ? void 0 : theme2.select.items.shadow};
+  background: ${({ theme: theme2 }) => theme2.colors.shades["0"]};
+  box-shadow: ${({ theme: theme2, focus }) => focus ? void 0 : theme2.select.items.shadow};
 
   ${up("desktop")} {
-    display: ${({
-  focus
-}) => focus ? "flex" : "none"};
+    display: ${({ focus }) => focus ? "flex" : "none"};
     position: absolute;
     z-index: 9999;
-    top: ${({
-  theme: theme2
-}) => theme2.spacings.xxlg};
+    top: ${({ theme: theme2, description, helper }) => `calc(
+        ${theme2.spacings.xxlg} 
+        + ${description ? theme2.inputBox.label.lineHeight : "0px"} 
+        + -${helper ? theme2.inputBox.helper.fontSize : "0px"}
+        + ${helper ? "14px" : "0px"}
+      )`};
     flex-grow: unset;
     flex-shrink: unset;
 
-    box-shadow: ${({
-  theme: theme2
-}) => theme2.select.items.shadow};
+    box-shadow: ${({ theme: theme2 }) => theme2.select.items.shadow};
   }
@@ -1425,4 +1438,6 @@ `;
   renderHeader,
-  onItemSelected
+  onItemSelected,
+  spaced
 }) => {
+  var _a, _b;
   const Header = renderHeader || (() => null);
@@ -1468,4 +1483,5 @@ const Item = renderItem || SimpleItem;
   }, [autoCompleteItems]);
-  return jsxs(AutoCompleteWrapper, {
+  return jsxs(SelectWrapper, {
     focus: hasFocus,
+    spaced: spaced || (inputProps == null ? void 0 : inputProps.spaced),
     children: [jsx(InputBox, __spreadProps(__spreadValues({}, inputProps), {
@@ -1475,10 +1491,13 @@ onFocus: () => setHasFocus(true),
       hint: {
-        icon: jsx(Icon, {
+        icon: ((_a = inputProps == null ? void 0 : inputProps.hint) == null ? void 0 : _a.icon) || jsx(Icon, {
           path: mdiUnfoldMoreHorizontal,
           size: 0.7
         }, void 0),
-        content: ""
-      }
-    }), void 0), showDropdown && jsxs(AutoCompleteItems, {
+        content: ((_b = inputProps == null ? void 0 : inputProps.hint) == null ? void 0 : _b.content) || ""
+      },
+      spaced: false
+    }), void 0), showDropdown && jsxs(SelectItems, {
       focus: hasFocus,
+      helper: inputProps == null ? void 0 : inputProps.helper,
+      description: inputProps == null ? void 0 : inputProps.description,
       children: [(autoCompleteItems == null ? void 0 : autoCompleteItems.length) > 0 && jsx(Header, {}, void 0), autoCompleteItems == null ? void 0 : autoCompleteItems.map((item, index) => jsx(Item, {
@@ -1485,0 +1504,0 @@ item,

dist/logrock-pebbles.umd.js

@@ -1,206 +0,206 @@
-var Pe=Object.defineProperty,Le=Object.defineProperties;var Oe=Object.getOwnPropertyDescriptors;var A=Object.getOwnPropertySymbols;var oo=Object.prototype.hasOwnProperty,eo=Object.prototype.propertyIsEnumerable;var io=(i,r,a)=>r in i?Pe(i,r,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[r]=a,H=(i,r)=>{for(var a in r||(r={}))oo.call(r,a)&&io(i,a,r[a]);if(A)for(var a of A(r))eo.call(r,a)&&io(i,a,r[a]);return i},k=(i,r)=>Le(i,Oe(r));var to=(i,r)=>{var a={};for(var s in i)oo.call(i,s)&&r.indexOf(s)<0&&(a[s]=i[s]);if(i!=null&&A)for(var s of A(i))r.indexOf(s)<0&&eo.call(i,s)&&(a[s]=i[s]);return a};(function(i,r){typeof exports=="object"&&typeof module!="undefined"?r(exports,require("styled-breakpoints"),require("styled-components"),require("react"),require("@mdi/js"),require("@mdi/react")):typeof define=="function"&&define.amd?define(["exports","styled-breakpoints","styled-components","react","@mdi/js","@mdi/react"],r):(i=typeof globalThis!="undefined"?globalThis:i||self,r(i["@logrock/pebbles"]={},i["styled-breakpoints"],i.styled,i.React,i.mdijs,i.Icon))})(this,function(i,r,a,s,j,no){"use strict";function E(o){return o&&typeof o=="object"&&"default"in o?o:{default:o}}var t=E(a),ro=E(s),_=E(no);const g={"50":"#F9FAFB","100":"#F3F4F6","200":"#E5E7EB","300":"#D1D5DB","400":"#9CA3AF","500":"#6B7280","600":"#4B5563","700":"#374151","800":"#1F2937","900":"#111827"},m={"50":"#FDF5E1","100":"#F9E0A5","200":"#F7D586","300":"#F5CB68","400":"#F1B72C","500":"#F1B72C","600":"#E6A50F","700":"#C08A0C","800":"#996E0A","900":"#735307"},ao={"50":"#DCE6FD","100":"#B9CCFB","200":"#96B3F8","300":"#729AF6","400":"#4F81F4","500":"#2C67F1","600":"#0E4DE0","700":"#0B3EB3","800":"#092E86","900":"#061F59"},lo={"50":"#F0FDF4","100":"#DCFCE7","200":"#BBF7D0","300":"#86EFAC","400":"#4ADE80","500":"#22C55E","600":"#16A34A","700":"#15803D","800":"#166534","900":"#14532D"},po={"50":"#FEF1DC","100":"#FBD696","200":"#F9C873","300":"#F8BA50","400":"#F6AD2D","500":"#F59E0B","600":"#DF9009","700":"#B27307","800":"#9C6506","900":"#593A04"},c={"50":"#FEF2F2","100":"#FEE2E2","200":"#FECACA","300":"#FCA5A5","400":"#F87171","500":"#EF4444","600":"#DC2626","700":"#B91C1C","800":"#991B1B","900":"#7F1D1D"},z={"0":"#FFFFFF","100":"#000000"},go={fontFamily:"Archivo, sans-serif",desktop:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"52px",lineHeight:"56px",tracking:"-0.02em"},mobile:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"52px",lineHeight:"56px",tracking:"-0.02em"}},so={fontFamily:"Archivo, sans-serif",desktop:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"44px",lineHeight:"48px",tracking:"-0.02em"},mobile:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"52px",lineHeight:"56px",tracking:"-0.02em"}},ho={fontFamily:"Archivo, sans-serif",desktop:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"40px",lineHeight:"48px",tracking:"-0.02em"},mobile:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"36px",lineHeight:"44px",tracking:"-0.02em"}},co={fontFamily:"Archivo, sans-serif",desktop:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"36px",lineHeight:"44px",tracking:"-0.02em"},mobile:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"32px",lineHeight:"40px",tracking:"-0.02em"}},fo={fontFamily:"Archivo, sans-serif",desktop:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"32px",lineHeight:"40px",tracking:"-0.02em"},mobile:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"28px",lineHeight:"36px",tracking:"-0.02em"}},yo={fontFamily:"Archivo, sans-serif",desktop:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"28px",lineHeight:"36px",tracking:"-0.02em"},mobile:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"24px",lineHeight:"32px",tracking:"-0.02em"}},uo={fontFamily:"Archivo, sans-serif",desktop:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"24px",lineHeight:"32px",tracking:"-0.02em"},mobile:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"20px",lineHeight:"28px",tracking:"-0.02em"}},xo={fontFamily:"Archivo, sans-serif",desktop:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"20px",lineHeight:"28px",tracking:"-0.02em"},mobile:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"18px",lineHeight:"24px",tracking:"-0.02em"}},bo={fontFamily:"Archivo, sans-serif",fontSize:"18px",lineHeight:"28px",weights:{normal:400,bold:500,bolder:600}},mo={fontFamily:"Archivo, sans-serif",fontSize:"16px",lineHeight:"24px",weights:{normal:400,bold:500,bolder:600}},$o={fontFamily:"Archivo, sans-serif",fontSize:"14px",lineHeight:"20px",weights:{normal:400,bold:500,bolder:600}},Ho={fontFamily:"Archivo, sans-serif",fontSize:"12px",lineHeight:"20px",weights:{normal:400,bold:500,bolder:600}},ko={fontFamily:"Archivo, sans-serif",fontSize:"14px",lineHeight:"20px",weight:600,textTransform:"uppercase"},So={fontFamily:"Archivo, sans-serif",fontSize:"12px",lineHeight:"20px",weight:600,textTransform:"uppercase"},wo={fontFamily:"Archivo, sans-serif",fontSize:"11px",lineHeight:"20px",weight:600,textTransform:"uppercase"},vo={background:"linear-gradient(98.41deg, #FF5F6D 0%, #FFC371 100%)"},Fo={background:"linear-gradient(98.41deg, #16BFFD 0%, #CB3066 100%)"},zo={background:"linear-gradient(98.41deg, #EECDA3 0%, #EF629F 100%)"},Bo={background:"linear-gradient(98.41deg, #4CA1AF 0%, #C4E0E5 100%)"},Co={background:"linear-gradient(98.41deg, #F1F2B5 0%, #135058 100%, #135058 100%)"},Do={background:"linear-gradient(98.41deg, #FF6E7F 0%, #BFE9FF 100%)"},Ao={background:"linear-gradient(98.41deg, #1D2B64 0%, #F8CDDA 100%)"},Eo={background:"linear-gradient(98.41deg, #FC00FF 0%, #00B6DE 100%)"},Po={background:"linear-gradient(98.41deg, #02AAB0 0%, #00CDAC 100%)"},Lo={background:"linear-gradient(98.41deg, #4568DC 0%, #B06AB3 100%)"},f={xxsm:"4px",xsm:"8px",sm:"12px",md:"16px",big:"20px",xbig:"24px",xxbig:"28px",xxxbig:"32px",lg:"40px",xlg:"48px",xxlg:"64px",xxxlg:"80px",huge:"96px",xhuge:"128px",xxhuge:"160px",xxxhuge:"192px"},R={primary:{background:m["500"],borderColor:m["500"],borderWidth:0,contentColor:z["100"]},secondary:{background:m["200"],borderColor:m["200"],borderWidth:0,contentColor:z["100"]},tertiary:{background:"transparent",borderColor:"transparent",borderWidth:0,contentColor:m["800"]},outlined:{background:"transparent",borderColor:g["200"],borderWidth:"1px",contentColor:g["700"]}},W={primary:{background:c["500"],borderColor:c["500"],borderWidth:0,contentColor:z["0"]},secondary:{background:c["50"],borderColor:c["50"],borderWidth:0,contentColor:c["600"]},tertiary:{background:"transparent",borderColor:"transparent",borderWidth:0,contentColor:c["600"]},outlined:{background:"transparent",borderColor:c["300"],borderWidth:"1px",contentColor:c["500"]}},M={primary:{background:g["200"],borderColor:g["200"],borderWidth:0,contentColor:g["400"]},secondary:{background:g["200"],borderColor:g["200"],borderWidth:0,contentColor:g["400"]},tertiary:{background:"transparent",borderColor:"transparent",borderWidth:0,contentColor:g["300"]},outlined:{background:"transparent",borderColor:g["400"],borderWidth:"1px",contentColor:g["300"]}},Oo={fontFamily:"Archivo, sans-serif",fontWeight:500,regular:{xSmall:{borderRadius:"2px",fontSize:"14px",iconPadding:f.xxsm,horizontalPadding:"10px",verticalPadding:"6px"},small:{borderRadius:"2px",fontSize:"14px",iconPadding:f.xxsm,horizontalPadding:f.md,verticalPadding:f.xsm},medium:{borderRadius:"2px",fontSize:"16px",iconPadding:f.xxsm,horizontalPadding:f.big,verticalPadding:f.xsm},large:{borderRadius:"2px",fontSize:"18px",iconPadding:f.xxsm,horizontalPadding:f.xbig,verticalPadding:"14px"},primary:R,destructive:W,disabled:M},icon:{xSmall:{borderRadius:"2px",size:"14px",horizontalPadding:"11px",verticalPadding:"10px"},small:{borderRadius:"2px",size:"14px",horizontalPadding:"13px",verticalPadding:"14px"},medium:{borderRadius:"2px",size:f.md,horizontalPadding:"14px",verticalPadding:f.md},large:{borderRadius:"2px",size:f.md,horizontalPadding:f.md,verticalPadding:"22px"},primary:R,destructive:W,disabled:M}},S={xSmall:"0px 1px 2px rgba(16, 24, 40, 0.05)",small:"0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px -1px rgba(16, 24, 40, 0.1)",medium:"0px 4px 6px -1px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.1)",large:"0px 10px 15px -3px rgba(16, 24, 40, 0.1), 0px 4px 6px -4px rgba(16, 24, 40, 0.1)",xLarge:"0px 20px 25px -5px rgba(16, 24, 40, 0.1), 0px 8px 10px -6px rgba(16, 24, 40, 0.1)",xxLarge:"0px 25px 50px -12px rgba(16, 24, 40, 0.25)",upXSmall:"0px -1px 2px rgba(16, 24, 40, 0.05)",upSmall:"0px -1px 3px rgba(16, 24, 40, 0.1), 0px -1px 2px -1px rgba(16, 24, 40, 0.1)",upMedium:"0px -4px 6px -1px rgba(16, 24, 40, 0.1), 0px -2px 4px -2px rgba(16, 24, 40, 0.1)",upLarge:"0px -10px 15px -3px rgba(16, 24, 40, 0.1), 0px -4px 6px -4px rgba(16, 24, 40, 0.1)",upXLarge:"0px -20px 25px -5px rgba(16, 24, 40, 0.1), 0px -8px 10px -6px rgba(16, 24, 40, 0.1)",upXxLarge:"0px -25px 50px -12px rgba(16, 24, 40, 0.25)"},jo={fontFamily:"Archivo",fontWeight:"normal",fontStyle:"normal",fontSize:"16px",lineHeight:"24px",fontFeatureSettings:"'salt' on",padding:"10px 12px",boxSizing:"border-box",boxShadow:S.xSmall,borderRadius:"2px",border:"1px solid #D1D5DB",margin:"8px 0px",background:"white",height:"50px",width:"100%",error:{color:c[900],border:`1px solid ${c[300]}`,boxShadow:S.xSmall,hintColor:g[500],helperColor:c[600],focused:{boxSizing:"border-box",boxShadow:`0px 0px 0px 4px ${c["100"]}`,borderRadius:"2px",border:`1px solid ${c["300"]}`}},info:{color:g[900],border:"1px solid #D1D5DB",boxShadow:S.xSmall,hintColor:g[500],helperColor:g[500],focused:{boxSizing:"border-box",boxShadow:`0px 0px 0px 4px ${m["100"]}`,borderRadius:"2px",border:`1px solid ${m["300"]}`}},label:{color:"black",fontStyle:"normal",fontSize:"16px",lineHeight:"24px",fontWeight:500},helper:{fontStyle:"normal",fontSize:"14px",lineHeight:"20px",fontWeight:500,margin:"0px 8px"},disabled:{boxSizing:"border-box",boxShadow:S.xSmall,borderRadius:"2px",border:`1px solid ${g["300"]}`},hint:{background:"white",top:"1px",right:"2px",margin:"1px 0px"},placeholder:{color:g[400]}},_o={items:{hover:{background:m["50"]},shadow:"1px 1px 2px rgba(0, 0, 0, 0.3)"}},T={name:"light",breakpoints:{mobile:"1023px",desktop:"1024px"},spacings:f,colors:{neutral:g,primary:m,secondary:ao,error:c,success:lo,warning:po,shades:z},typography:{displayLarge:go,displaySmall:so,headingH1:ho,headingH2:co,headingH3:fo,headingH4:yo,headingH5:uo,headingH6:xo,paragraphLarge:bo,paragraphMedium:mo,paragraphSmall:$o,paragraphXSmall:Ho,overlineLarge:ko,overlineMedium:So,overlineSmall:wo},shadows:S,blurs:{none:"0",small:"8px",medium:"16px",large:"24px",xLarge:"40px"},gradients:{sunburst:vo,blueMoon:Ao,blueberryWine:Lo,cherryCola:zo,coldSky:Bo,darkWineSea:Fo,morningSakura:Do,oliveGarden:Co,synthwave:Eo,teaLeaves:Po},buttons:Oo,inputBox:jo,select:_o},Ro=k(H({},T),{name:"dark"}),B=({underlined:o,strikedThrough:e})=>{const n=[];return o&&n.push("underline"),e&&n.push("line-through"),n.join(" ")},Wo=t.default.h1`
+var Wo=Object.defineProperty,_o=Object.defineProperties;var Mo=Object.getOwnPropertyDescriptors;var D=Object.getOwnPropertySymbols;var ie=Object.prototype.hasOwnProperty,te=Object.prototype.propertyIsEnumerable;var ne=(t,r,a)=>r in t?Wo(t,r,{enumerable:!0,configurable:!0,writable:!0,value:a}):t[r]=a,H=(t,r)=>{for(var a in r||(r={}))ie.call(r,a)&&ne(t,a,r[a]);if(D)for(var a of D(r))te.call(r,a)&&ne(t,a,r[a]);return t},w=(t,r)=>_o(t,Mo(r));var re=(t,r)=>{var a={};for(var h in t)ie.call(t,h)&&r.indexOf(h)<0&&(a[h]=t[h]);if(t!=null&&D)for(var h of D(t))r.indexOf(h)<0&&te.call(t,h)&&(a[h]=t[h]);return a};(function(t,r){typeof exports=="object"&&typeof module!="undefined"?r(exports,require("styled-breakpoints"),require("styled-components"),require("react"),require("@mdi/js"),require("@mdi/react")):typeof define=="function"&&define.amd?define(["exports","styled-breakpoints","styled-components","react","@mdi/js","@mdi/react"],r):(t=typeof globalThis!="undefined"?globalThis:t||self,r(t["@logrock/pebbles"]={},t["styled-breakpoints"],t.styled,t.React,t.mdijs,t.Icon))})(this,function(t,r,a,h,j,ae){"use strict";function E(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var n=E(a),le=E(h),R=E(ae);const g={"50":"#F9FAFB","100":"#F3F4F6","200":"#E5E7EB","300":"#D1D5DB","400":"#9CA3AF","500":"#6B7280","600":"#4B5563","700":"#374151","800":"#1F2937","900":"#111827"},x={"50":"#FDF5E1","100":"#F9E0A5","200":"#F7D586","300":"#F5CB68","400":"#F1B72C","500":"#F1B72C","600":"#E6A50F","700":"#C08A0C","800":"#996E0A","900":"#735307"},de={"50":"#DCE6FD","100":"#B9CCFB","200":"#96B3F8","300":"#729AF6","400":"#4F81F4","500":"#2C67F1","600":"#0E4DE0","700":"#0B3EB3","800":"#092E86","900":"#061F59"},ge={"50":"#F0FDF4","100":"#DCFCE7","200":"#BBF7D0","300":"#86EFAC","400":"#4ADE80","500":"#22C55E","600":"#16A34A","700":"#15803D","800":"#166534","900":"#14532D"},pe={"50":"#FEF1DC","100":"#FBD696","200":"#F9C873","300":"#F8BA50","400":"#F6AD2D","500":"#F59E0B","600":"#DF9009","700":"#B27307","800":"#9C6506","900":"#593A04"},f={"50":"#FEF2F2","100":"#FEE2E2","200":"#FECACA","300":"#FCA5A5","400":"#F87171","500":"#EF4444","600":"#DC2626","700":"#B91C1C","800":"#991B1B","900":"#7F1D1D"},S={"0":"#FFFFFF","100":"#000000"},se={fontFamily:"Archivo, sans-serif",desktop:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"52px",lineHeight:"56px",tracking:"-0.02em"},mobile:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"52px",lineHeight:"56px",tracking:"-0.02em"}},he={fontFamily:"Archivo, sans-serif",desktop:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"44px",lineHeight:"48px",tracking:"-0.02em"},mobile:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"52px",lineHeight:"56px",tracking:"-0.02em"}},ce={fontFamily:"Archivo, sans-serif",desktop:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"40px",lineHeight:"48px",tracking:"-0.02em"},mobile:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"36px",lineHeight:"44px",tracking:"-0.02em"}},fe={fontFamily:"Archivo, sans-serif",desktop:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"36px",lineHeight:"44px",tracking:"-0.02em"},mobile:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"32px",lineHeight:"40px",tracking:"-0.02em"}},ye={fontFamily:"Archivo, sans-serif",desktop:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"32px",lineHeight:"40px",tracking:"-0.02em"},mobile:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"28px",lineHeight:"36px",tracking:"-0.02em"}},xe={fontFamily:"Archivo, sans-serif",desktop:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"28px",lineHeight:"36px",tracking:"-0.02em"},mobile:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"24px",lineHeight:"32px",tracking:"-0.02em"}},be={fontFamily:"Archivo, sans-serif",desktop:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"24px",lineHeight:"32px",tracking:"-0.02em"},mobile:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"20px",lineHeight:"28px",tracking:"-0.02em"}},ue={fontFamily:"Archivo, sans-serif",desktop:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"20px",lineHeight:"28px",tracking:"-0.02em"},mobile:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"18px",lineHeight:"24px",tracking:"-0.02em"}},me={fontFamily:"Archivo, sans-serif",fontSize:"18px",lineHeight:"28px",weights:{normal:400,bold:500,bolder:600}},$e={fontFamily:"Archivo, sans-serif",fontSize:"16px",lineHeight:"24px",weights:{normal:400,bold:500,bolder:600}},ke={fontFamily:"Archivo, sans-serif",fontSize:"14px",lineHeight:"20px",weights:{normal:400,bold:500,bolder:600}},He={fontFamily:"Archivo, sans-serif",fontSize:"12px",lineHeight:"20px",weights:{normal:400,bold:500,bolder:600}},Se={fontFamily:"Archivo, sans-serif",fontSize:"14px",lineHeight:"20px",weight:600,textTransform:"uppercase"},we={fontFamily:"Archivo, sans-serif",fontSize:"12px",lineHeight:"20px",weight:600,textTransform:"uppercase"},ve={fontFamily:"Archivo, sans-serif",fontSize:"11px",lineHeight:"20px",weight:600,textTransform:"uppercase"},Fe={background:"linear-gradient(98.41deg, #FF5F6D 0%, #FFC371 100%)"},ze={background:"linear-gradient(98.41deg, #16BFFD 0%, #CB3066 100%)"},Be={background:"linear-gradient(98.41deg, #EECDA3 0%, #EF629F 100%)"},Ce={background:"linear-gradient(98.41deg, #4CA1AF 0%, #C4E0E5 100%)"},De={background:"linear-gradient(98.41deg, #F1F2B5 0%, #135058 100%, #135058 100%)"},Ee={background:"linear-gradient(98.41deg, #FF6E7F 0%, #BFE9FF 100%)"},Ae={background:"linear-gradient(98.41deg, #1D2B64 0%, #F8CDDA 100%)"},Le={background:"linear-gradient(98.41deg, #FC00FF 0%, #00B6DE 100%)"},Oe={background:"linear-gradient(98.41deg, #02AAB0 0%, #00CDAC 100%)"},je={background:"linear-gradient(98.41deg, #4568DC 0%, #B06AB3 100%)"},s={xxsm:"4px",xsm:"8px",sm:"12px",md:"16px",big:"20px",xbig:"24px",xxbig:"28px",xxxbig:"32px",lg:"40px",xlg:"48px",xxlg:"64px",xxxlg:"80px",huge:"96px",xhuge:"128px",xxhuge:"160px",xxxhuge:"192px"},W={primary:{background:x["500"],borderColor:x["500"],borderWidth:0,contentColor:S["100"]},secondary:{background:x["200"],borderColor:x["200"],borderWidth:0,contentColor:S["100"]},tertiary:{background:"transparent",borderColor:"transparent",borderWidth:0,contentColor:x["800"]},outlined:{background:"transparent",borderColor:g["200"],borderWidth:"1px",contentColor:g["700"]}},_={primary:{background:f["500"],borderColor:f["500"],borderWidth:0,contentColor:S["0"]},secondary:{background:f["50"],borderColor:f["50"],borderWidth:0,contentColor:f["600"]},tertiary:{background:"transparent",borderColor:"transparent",borderWidth:0,contentColor:f["600"]},outlined:{background:"transparent",borderColor:f["300"],borderWidth:"1px",contentColor:f["500"]}},M={primary:{background:g["200"],borderColor:g["200"],borderWidth:0,contentColor:g["400"]},secondary:{background:g["200"],borderColor:g["200"],borderWidth:0,contentColor:g["400"]},tertiary:{background:"transparent",borderColor:"transparent",borderWidth:0,contentColor:g["300"]},outlined:{background:"transparent",borderColor:g["400"],borderWidth:"1px",contentColor:g["300"]}},Re={fontFamily:"Archivo, sans-serif",fontWeight:500,regular:{xSmall:{borderRadius:"2px",fontSize:"14px",iconPadding:s.xxsm,horizontalPadding:"10px",verticalPadding:"6px"},small:{borderRadius:"2px",fontSize:"14px",iconPadding:s.xxsm,horizontalPadding:s.md,verticalPadding:s.xsm},medium:{borderRadius:"2px",fontSize:"16px",iconPadding:s.xxsm,horizontalPadding:s.big,verticalPadding:s.xsm},large:{borderRadius:"2px",fontSize:"18px",iconPadding:s.xxsm,horizontalPadding:s.xbig,verticalPadding:"14px"},primary:W,destructive:_,disabled:M},icon:{xSmall:{borderRadius:"2px",size:"14px",horizontalPadding:"11px",verticalPadding:"10px"},small:{borderRadius:"2px",size:"14px",horizontalPadding:"13px",verticalPadding:"14px"},medium:{borderRadius:"2px",size:s.md,horizontalPadding:"14px",verticalPadding:s.md},large:{borderRadius:"2px",size:s.md,horizontalPadding:s.md,verticalPadding:"22px"},primary:W,destructive:_,disabled:M}},v={xSmall:"0px 1px 2px rgba(16, 24, 40, 0.05)",small:"0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px -1px rgba(16, 24, 40, 0.1)",medium:"0px 4px 6px -1px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.1)",large:"0px 10px 15px -3px rgba(16, 24, 40, 0.1), 0px 4px 6px -4px rgba(16, 24, 40, 0.1)",xLarge:"0px 20px 25px -5px rgba(16, 24, 40, 0.1), 0px 8px 10px -6px rgba(16, 24, 40, 0.1)",xxLarge:"0px 25px 50px -12px rgba(16, 24, 40, 0.25)",upXSmall:"0px -1px 2px rgba(16, 24, 40, 0.05)",upSmall:"0px -1px 3px rgba(16, 24, 40, 0.1), 0px -1px 2px -1px rgba(16, 24, 40, 0.1)",upMedium:"0px -4px 6px -1px rgba(16, 24, 40, 0.1), 0px -2px 4px -2px rgba(16, 24, 40, 0.1)",upLarge:"0px -10px 15px -3px rgba(16, 24, 40, 0.1), 0px -4px 6px -4px rgba(16, 24, 40, 0.1)",upXLarge:"0px -20px 25px -5px rgba(16, 24, 40, 0.1), 0px -8px 10px -6px rgba(16, 24, 40, 0.1)",upXxLarge:"0px -25px 50px -12px rgba(16, 24, 40, 0.25)"},We={spacing:s.xxbig,fontFamily:"Archivo",fontWeight:"normal",fontStyle:"normal",fontSize:"16px",lineHeight:"24px",fontFeatureSettings:"'salt' on",padding:"10px 12px",boxSizing:"border-box",boxShadow:v.xSmall,borderRadius:"2px",border:"1px solid #D1D5DB",margin:"8px 0px",background:"white",height:"50px",width:"100%",error:{color:f[900],border:`1px solid ${f[300]}`,boxShadow:v.xSmall,hintColor:g[500],helperColor:f[600],focused:{boxSizing:"border-box",boxShadow:`0px 0px 0px 4px ${f["100"]}`,borderRadius:"2px",border:`1px solid ${f["300"]}`}},info:{color:g[900],border:"1px solid #D1D5DB",boxShadow:v.xSmall,hintColor:g[500],helperColor:g[500],focused:{boxSizing:"border-box",boxShadow:`0px 0px 0px 4px ${x["100"]}`,borderRadius:"2px",border:`1px solid ${x["300"]}`}},label:{color:"black",fontStyle:"normal",fontSize:"16px",lineHeight:"24px",fontWeight:500},helper:{fontStyle:"normal",fontSize:"14px",lineHeight:"20px",fontWeight:500,margin:"0px 8px"},disabled:{boxSizing:"border-box",boxShadow:v.xSmall,borderRadius:"2px",border:`1px solid ${g["300"]}`},hint:{background:"white",top:"1px",right:"2px",margin:"1px 0px"},placeholder:{color:g[400]}},_e={items:{hover:{background:x["50"]},shadow:"1px 1px 2px rgba(0, 0, 0, 0.3)"}},Me={checkMark:{color:S[0],width:"3px",height:"6px",left:"5px",top:"2px"},width:s.md,height:s.md,marginRight:s.sm,default:{background:S[0],borderColor:g[300],borderWidth:"1px",borderStyle:"solid",borderRadius:"1.33333px"},checked:{background:x["500"],borderColor:x["500"],borderWidth:"1px",borderStyle:"solid",borderRadius:"1.33333px"}},P={name:"light",breakpoints:{mobile:"1023px",desktop:"1024px"},spacings:s,colors:{neutral:g,primary:x,secondary:de,error:f,success:ge,warning:pe,shades:S},typography:{displayLarge:se,displaySmall:he,headingH1:ce,headingH2:fe,headingH3:ye,headingH4:xe,headingH5:be,headingH6:ue,paragraphLarge:me,paragraphMedium:$e,paragraphSmall:ke,paragraphXSmall:He,overlineLarge:Se,overlineMedium:we,overlineSmall:ve},shadows:v,blurs:{none:"0",small:"8px",medium:"16px",large:"24px",xLarge:"40px"},gradients:{sunburst:Fe,blueMoon:Ae,blueberryWine:je,cherryCola:Be,coldSky:Ce,darkWineSea:ze,morningSakura:Ee,oliveGarden:De,synthwave:Le,teaLeaves:Oe},buttons:Re,inputBox:We,select:_e,checkBox:Me},Pe=w(H({},P),{name:"dark"}),B=({underlined:e,strikedThrough:o})=>{const i=[];return e&&i.push("underline"),o&&i.push("line-through"),i.join(" ")},Te=n.default.h1`
   margin: 0;
 
-  color: ${({theme:o})=>o.colors.neutral["900"]};
-  font-family: ${({theme:o})=>o.typography.displayLarge.fontFamily};
-  font-size: ${({theme:o})=>o.typography.displayLarge.mobile.fontSize};
-  font-weight: ${({theme:o,weight:e})=>e?o.typography.displayLarge.mobile.weights[e]:o.typography.displayLarge.mobile.weights.normal};
-  letter-spacing: ${({theme:o})=>o.typography.displayLarge.mobile.tracking};
-  line-height: ${({theme:o})=>o.typography.displayLarge.mobile.lineHeight};
+  color: ${({theme:e})=>e.colors.neutral["900"]};
+  font-family: ${({theme:e})=>e.typography.displayLarge.fontFamily};
+  font-size: ${({theme:e})=>e.typography.displayLarge.mobile.fontSize};
+  font-weight: ${({theme:e,weight:o})=>o?e.typography.displayLarge.mobile.weights[o]:e.typography.displayLarge.mobile.weights.normal};
+  letter-spacing: ${({theme:e})=>e.typography.displayLarge.mobile.tracking};
+  line-height: ${({theme:e})=>e.typography.displayLarge.mobile.lineHeight};
 
   ${r.up("desktop")} {
-    font-size: ${({theme:o})=>o.typography.displayLarge.desktop.fontSize};
-    font-weight: ${({theme:o,weight:e})=>e?o.typography.displayLarge.desktop.weights[e]:o.typography.displayLarge.desktop.weights.normal};
-    letter-spacing: ${({theme:o})=>o.typography.displayLarge.desktop.tracking};
-    line-height: ${({theme:o})=>o.typography.displayLarge.desktop.lineHeight};
+    font-size: ${({theme:e})=>e.typography.displayLarge.desktop.fontSize};
+    font-weight: ${({theme:e,weight:o})=>o?e.typography.displayLarge.desktop.weights[o]:e.typography.displayLarge.desktop.weights.normal};
+    letter-spacing: ${({theme:e})=>e.typography.displayLarge.desktop.tracking};
+    line-height: ${({theme:e})=>e.typography.displayLarge.desktop.lineHeight};
   }
-`,Mo=t.default.h2`
+`,Xe=n.default.h2`
   margin: 0;
 
-  color: ${({theme:o})=>o.colors.neutral["900"]};
-  font-family: ${({theme:o})=>o.typography.displaySmall.fontFamily};
-  font-size: ${({theme:o})=>o.typography.displaySmall.mobile.fontSize};
-  font-weight: ${({theme:o,weight:e})=>e?o.typography.displaySmall.mobile.weights[e]:o.typography.displaySmall.mobile.weights.normal};
-  letter-spacing: ${({theme:o})=>o.typography.displaySmall.mobile.tracking};
-  line-height: ${({theme:o})=>o.typography.displaySmall.mobile.lineHeight};
+  color: ${({theme:e})=>e.colors.neutral["900"]};
+  font-family: ${({theme:e})=>e.typography.displaySmall.fontFamily};
+  font-size: ${({theme:e})=>e.typography.displaySmall.mobile.fontSize};
+  font-weight: ${({theme:e,weight:o})=>o?e.typography.displaySmall.mobile.weights[o]:e.typography.displaySmall.mobile.weights.normal};
+  letter-spacing: ${({theme:e})=>e.typography.displaySmall.mobile.tracking};
+  line-height: ${({theme:e})=>e.typography.displaySmall.mobile.lineHeight};
 
   ${r.up("desktop")} {
-    font-size: ${({theme:o})=>o.typography.displaySmall.desktop.fontSize};
-    font-weight: ${({theme:o,weight:e})=>e?o.typography.displaySmall.desktop.weights[e]:o.typography.displaySmall.desktop.weights.normal};
-    letter-spacing: ${({theme:o})=>o.typography.displaySmall.desktop.tracking};
-    line-height: ${({theme:o})=>o.typography.displaySmall.desktop.lineHeight};
+    font-size: ${({theme:e})=>e.typography.displaySmall.desktop.fontSize};
+    font-weight: ${({theme:e,weight:o})=>o?e.typography.displaySmall.desktop.weights[o]:e.typography.displaySmall.desktop.weights.normal};
+    letter-spacing: ${({theme:e})=>e.typography.displaySmall.desktop.tracking};
+    line-height: ${({theme:e})=>e.typography.displaySmall.desktop.lineHeight};
   }
-`,To=t.default.h1`
+`,Ne=n.default.h1`
   margin: 0;
 
-  color: ${({theme:o})=>o.colors.neutral["900"]};
-  font-family: ${({theme:o})=>o.typography.headingH1.fontFamily};
-  font-size: ${({theme:o})=>o.typography.headingH1.mobile.fontSize};
-  font-weight: ${({theme:o,weight:e})=>e?o.typography.headingH1.mobile.weights[e]:o.typography.headingH1.mobile.weights.normal};
-  letter-spacing: ${({theme:o})=>o.typography.headingH1.mobile.tracking};
-  line-height: ${({theme:o})=>o.typography.headingH1.mobile.lineHeight};
+  color: ${({theme:e})=>e.colors.neutral["900"]};
+  font-family: ${({theme:e})=>e.typography.headingH1.fontFamily};
+  font-size: ${({theme:e})=>e.typography.headingH1.mobile.fontSize};
+  font-weight: ${({theme:e,weight:o})=>o?e.typography.headingH1.mobile.weights[o]:e.typography.headingH1.mobile.weights.normal};
+  letter-spacing: ${({theme:e})=>e.typography.headingH1.mobile.tracking};
+  line-height: ${({theme:e})=>e.typography.headingH1.mobile.lineHeight};
 
   ${r.up("desktop")} {
-    font-size: ${({theme:o})=>o.typography.headingH1.desktop.fontSize};
-    font-weight: ${({theme:o,weight:e})=>e?o.typography.headingH1.desktop.weights[e]:o.typography.headingH1.desktop.weights.normal};
-    letter-spacing: ${({theme:o})=>o.typography.headingH1.desktop.tracking};
-    line-height: ${({theme:o})=>o.typography.headingH1.desktop.lineHeight};
+    font-size: ${({theme:e})=>e.typography.headingH1.desktop.fontSize};
+    font-weight: ${({theme:e,weight:o})=>o?e.typography.headingH1.desktop.weights[o]:e.typography.headingH1.desktop.weights.normal};
+    letter-spacing: ${({theme:e})=>e.typography.headingH1.desktop.tracking};
+    line-height: ${({theme:e})=>e.typography.headingH1.desktop.lineHeight};
   }
-`,Xo=t.default.h2`
+`,Ue=n.default.h2`
   margin: 0;
 
-  color: ${({theme:o})=>o.colors.neutral["900"]};
-  font-family: ${({theme:o})=>o.typography.headingH2.fontFamily};
-  font-size: ${({theme:o})=>o.typography.headingH2.mobile.fontSize};
-  font-weight: ${({theme:o,weight:e})=>e?o.typography.headingH2.mobile.weights[e]:o.typography.headingH2.mobile.weights.normal};
-  letter-spacing: ${({theme:o})=>o.typography.headingH2.mobile.tracking};
-  line-height: ${({theme:o})=>o.typography.headingH2.mobile.lineHeight};
+  color: ${({theme:e})=>e.colors.neutral["900"]};
+  font-family: ${({theme:e})=>e.typography.headingH2.fontFamily};
+  font-size: ${({theme:e})=>e.typography.headingH2.mobile.fontSize};
+  font-weight: ${({theme:e,weight:o})=>o?e.typography.headingH2.mobile.weights[o]:e.typography.headingH2.mobile.weights.normal};
+  letter-spacing: ${({theme:e})=>e.typography.headingH2.mobile.tracking};
+  line-height: ${({theme:e})=>e.typography.headingH2.mobile.lineHeight};
 
   ${r.up("desktop")} {
-    font-size: ${({theme:o})=>o.typography.headingH2.desktop.fontSize};
-    font-weight: ${({theme:o,weight:e})=>e?o.typography.headingH2.desktop.weights[e]:o.typography.headingH2.desktop.weights.normal};
-    letter-spacing: ${({theme:o})=>o.typography.headingH2.desktop.tracking};
-    line-height: ${({theme:o})=>o.typography.headingH2.desktop.lineHeight};
+    font-size: ${({theme:e})=>e.typography.headingH2.desktop.fontSize};
+    font-weight: ${({theme:e,weight:o})=>o?e.typography.headingH2.desktop.weights[o]:e.typography.headingH2.desktop.weights.normal};
+    letter-spacing: ${({theme:e})=>e.typography.headingH2.desktop.tracking};
+    line-height: ${({theme:e})=>e.typography.headingH2.desktop.lineHeight};
   }
-`,No=t.default.h3`
+`,Ve=n.default.h3`
   margin: 0;
 
-  color: ${({theme:o})=>o.colors.neutral["900"]};
-  font-family: ${({theme:o})=>o.typography.headingH3.fontFamily};
-  font-size: ${({theme:o})=>o.typography.headingH3.mobile.fontSize};
-  font-weight: ${({theme:o,weight:e})=>e?o.typography.headingH3.mobile.weights[e]:o.typography.headingH3.mobile.weights.normal};
-  letter-spacing: ${({theme:o})=>o.typography.headingH3.mobile.tracking};
-  line-height: ${({theme:o})=>o.typography.headingH3.mobile.lineHeight};
+  color: ${({theme:e})=>e.colors.neutral["900"]};
+  font-family: ${({theme:e})=>e.typography.headingH3.fontFamily};
+  font-size: ${({theme:e})=>e.typography.headingH3.mobile.fontSize};
+  font-weight: ${({theme:e,weight:o})=>o?e.typography.headingH3.mobile.weights[o]:e.typography.headingH3.mobile.weights.normal};
+  letter-spacing: ${({theme:e})=>e.typography.headingH3.mobile.tracking};
+  line-height: ${({theme:e})=>e.typography.headingH3.mobile.lineHeight};
 
   ${r.up("desktop")} {
-    font-size: ${({theme:o})=>o.typography.headingH3.desktop.fontSize};
-    font-weight: ${({theme:o,weight:e})=>e?o.typography.headingH3.desktop.weights[e]:o.typography.headingH3.desktop.weights.normal};
-    letter-spacing: ${({theme:o})=>o.typography.headingH3.desktop.tracking};
-    line-height: ${({theme:o})=>o.typography.headingH3.desktop.lineHeight};
+    font-size: ${({theme:e})=>e.typography.headingH3.desktop.fontSize};
+    font-weight: ${({theme:e,weight:o})=>o?e.typography.headingH3.desktop.weights[o]:e.typography.headingH3.desktop.weights.normal};
+    letter-spacing: ${({theme:e})=>e.typography.headingH3.desktop.tracking};
+    line-height: ${({theme:e})=>e.typography.headingH3.desktop.lineHeight};
   }
-`,Uo=t.default.h4`
+`,qe=n.default.h4`
   margin: 0;
 
-  color: ${({theme:o})=>o.colors.neutral["900"]};
-  font-family: ${({theme:o})=>o.typography.headingH4.fontFamily};
-  font-size: ${({theme:o})=>o.typography.headingH4.mobile.fontSize};
-  font-weight: ${({theme:o,weight:e})=>e?o.typography.headingH4.mobile.weights[e]:o.typography.headingH4.mobile.weights.normal};
-  letter-spacing: ${({theme:o})=>o.typography.headingH4.mobile.tracking};
-  line-height: ${({theme:o})=>o.typography.headingH4.mobile.lineHeight};
+  color: ${({theme:e})=>e.colors.neutral["900"]};
+  font-family: ${({theme:e})=>e.typography.headingH4.fontFamily};
+  font-size: ${({theme:e})=>e.typography.headingH4.mobile.fontSize};
+  font-weight: ${({theme:e,weight:o})=>o?e.typography.headingH4.mobile.weights[o]:e.typography.headingH4.mobile.weights.normal};
+  letter-spacing: ${({theme:e})=>e.typography.headingH4.mobile.tracking};
+  line-height: ${({theme:e})=>e.typography.headingH4.mobile.lineHeight};
 
   ${r.up("desktop")} {
-    font-size: ${({theme:o})=>o.typography.headingH4.desktop.fontSize};
-    font-weight: ${({theme:o,weight:e})=>e?o.typography.headingH4.desktop.weights[e]:o.typography.headingH4.desktop.weights.normal};
-    letter-spacing: ${({theme:o})=>o.typography.headingH4.desktop.tracking};
-    line-height: ${({theme:o})=>o.typography.headingH4.desktop.lineHeight};
+    font-size: ${({theme:e})=>e.typography.headingH4.desktop.fontSize};
+    font-weight: ${({theme:e,weight:o})=>o?e.typography.headingH4.desktop.weights[o]:e.typography.headingH4.desktop.weights.normal};
+    letter-spacing: ${({theme:e})=>e.typography.headingH4.desktop.tracking};
+    line-height: ${({theme:e})=>e.typography.headingH4.desktop.lineHeight};
   }
-`,Vo=t.default.h5`
+`,Ge=n.default.h5`
   margin: 0;
 
-  color: ${({theme:o})=>o.colors.neutral["900"]};
-  font-family: ${({theme:o})=>o.typography.headingH5.fontFamily};
-  font-size: ${({theme:o})=>o.typography.headingH5.mobile.fontSize};
-  font-weight: ${({theme:o,weight:e})=>e?o.typography.headingH5.mobile.weights[e]:o.typography.headingH5.mobile.weights.normal};
-  letter-spacing: ${({theme:o})=>o.typography.headingH5.mobile.tracking};
-  line-height: ${({theme:o})=>o.typography.headingH5.mobile.lineHeight};
+  color: ${({theme:e})=>e.colors.neutral["900"]};
+  font-family: ${({theme:e})=>e.typography.headingH5.fontFamily};
+  font-size: ${({theme:e})=>e.typography.headingH5.mobile.fontSize};
+  font-weight: ${({theme:e,weight:o})=>o?e.typography.headingH5.mobile.weights[o]:e.typography.headingH5.mobile.weights.normal};
+  letter-spacing: ${({theme:e})=>e.typography.headingH5.mobile.tracking};
+  line-height: ${({theme:e})=>e.typography.headingH5.mobile.lineHeight};
 
   ${r.up("desktop")} {
-    font-size: ${({theme:o})=>o.typography.headingH5.desktop.fontSize};
-    font-weight: ${({theme:o,weight:e})=>e?o.typography.headingH5.desktop.weights[e]:o.typography.headingH5.desktop.weights.normal};
-    letter-spacing: ${({theme:o})=>o.typography.headingH5.desktop.tracking};
-    line-height: ${({theme:o})=>o.typography.headingH5.desktop.lineHeight};
+    font-size: ${({theme:e})=>e.typography.headingH5.desktop.fontSize};
+    font-weight: ${({theme:e,weight:o})=>o?e.typography.headingH5.desktop.weights[o]:e.typography.headingH5.desktop.weights.normal};
+    letter-spacing: ${({theme:e})=>e.typography.headingH5.desktop.tracking};
+    line-height: ${({theme:e})=>e.typography.headingH5.desktop.lineHeight};
   }
-`,qo=t.default.h6`
+`,Ie=n.default.h6`
   margin: 0;
 
-  color: ${({theme:o})=>o.colors.neutral["900"]};
-  font-family: ${({theme:o})=>o.typography.headingH6.fontFamily};
-  font-size: ${({theme:o})=>o.typography.headingH6.mobile.fontSize};
-  font-weight: ${({theme:o,weight:e})=>e?o.typography.headingH6.mobile.weights[e]:o.typography.headingH6.mobile.weights.normal};
-  letter-spacing: ${({theme:o})=>o.typography.headingH6.mobile.tracking};
-  line-height: ${({theme:o})=>o.typography.headingH6.mobile.lineHeight};
+  color: ${({theme:e})=>e.colors.neutral["900"]};
+  font-family: ${({theme:e})=>e.typography.headingH6.fontFamily};
+  font-size: ${({theme:e})=>e.typography.headingH6.mobile.fontSize};
+  font-weight: ${({theme:e,weight:o})=>o?e.typography.headingH6.mobile.weights[o]:e.typography.headingH6.mobile.weights.normal};
+  letter-spacing: ${({theme:e})=>e.typography.headingH6.mobile.tracking};
+  line-height: ${({theme:e})=>e.typography.headingH6.mobile.lineHeight};
 
   ${r.up("desktop")} {
-    font-size: ${({theme:o})=>o.typography.headingH6.desktop.fontSize};
-    font-weight: ${({theme:o,weight:e})=>e?o.typography.headingH6.desktop.weights[e]:o.typography.headingH6.desktop.weights.normal};
-    letter-spacing: ${({theme:o})=>o.typography.headingH6.desktop.tracking};
-    line-height: ${({theme:o})=>o.typography.headingH6.desktop.lineHeight};
+    font-size: ${({theme:e})=>e.typography.headingH6.desktop.fontSize};
+    font-weight: ${({theme:e,weight:o})=>o?e.typography.headingH6.desktop.weights[o]:e.typography.headingH6.desktop.weights.normal};
+    letter-spacing: ${({theme:e})=>e.typography.headingH6.desktop.tracking};
+    line-height: ${({theme:e})=>e.typography.headingH6.desktop.lineHeight};
   }
-`,Go=t.default.p`
+`,Je=n.default.p`
   margin: 0;
 
-  color: ${({theme:o})=>o.colors.neutral["900"]};
-  font-family: ${({theme:o})=>o.typography.paragraphLarge.fontFamily};
-  font-size: ${({theme:o})=>o.typography.paragraphLarge.fontSize};
-  font-style: ${({italic:o})=>o?"italic":"normal"};
-  font-weight: ${({theme:o,weight:e})=>e?o.typography.paragraphLarge.weights[e]:o.typography.paragraphLarge.weights.normal};
-  line-height: ${({theme:o})=>o.typography.paragraphLarge.lineHeight};
+  color: ${({theme:e})=>e.colors.neutral["900"]};
+  font-family: ${({theme:e})=>e.typography.paragraphLarge.fontFamily};
+  font-size: ${({theme:e})=>e.typography.paragraphLarge.fontSize};
+  font-style: ${({italic:e})=>e?"italic":"normal"};
+  font-weight: ${({theme:e,weight:o})=>o?e.typography.paragraphLarge.weights[o]:e.typography.paragraphLarge.weights.normal};
+  line-height: ${({theme:e})=>e.typography.paragraphLarge.lineHeight};
   text-decoration: ${B};
-`,X=a.css`
+`,T=a.css`
   margin: 0;
 
-  color: ${({theme:o})=>o.colors.neutral["900"]};
-  font-family: ${({theme:o})=>o.typography.paragraphMedium.fontFamily};
-  font-size: ${({theme:o})=>o.typography.paragraphMedium.fontSize};
-  font-style: ${({italic:o})=>o?"italic":"normal"};
-  font-weight: ${({theme:o,weight:e})=>e?o.typography.paragraphMedium.weights[e]:o.typography.paragraphMedium.weights.normal};
-  line-height: ${({theme:o})=>o.typography.paragraphMedium.lineHeight};
+  color: ${({theme:e})=>e.colors.neutral["900"]};
+  font-family: ${({theme:e})=>e.typography.paragraphMedium.fontFamily};
+  font-size: ${({theme:e})=>e.typography.paragraphMedium.fontSize};
+  font-style: ${({italic:e})=>e?"italic":"normal"};
+  font-weight: ${({theme:e,weight:o})=>o?e.typography.paragraphMedium.weights[o]:e.typography.paragraphMedium.weights.normal};
+  line-height: ${({theme:e})=>e.typography.paragraphMedium.lineHeight};
   text-decoration: ${B};
-`,Io=t.default.p`
-  ${X}
-`,Jo=t.default.p`
+`,Ye=n.default.p`
+  ${T}
+`,Ke=n.default.p`
   margin: 0;
 
-  color: ${({theme:o})=>o.colors.neutral["900"]};
-  font-family: ${({theme:o})=>o.typography.paragraphSmall.fontFamily};
-  font-size: ${({theme:o})=>o.typography.paragraphSmall.fontSize};
-  font-style: ${({italic:o})=>o?"italic":"normal"};
-  font-weight: ${({theme:o,weight:e})=>e?o.typography.paragraphSmall.weights[e]:o.typography.paragraphSmall.weights.normal};
-  line-height: ${({theme:o})=>o.typography.paragraphSmall.lineHeight};
+  color: ${({theme:e})=>e.colors.neutral["900"]};
+  font-family: ${({theme:e})=>e.typography.paragraphSmall.fontFamily};
+  font-size: ${({theme:e})=>e.typography.paragraphSmall.fontSize};
+  font-style: ${({italic:e})=>e?"italic":"normal"};
+  font-weight: ${({theme:e,weight:o})=>o?e.typography.paragraphSmall.weights[o]:e.typography.paragraphSmall.weights.normal};
+  line-height: ${({theme:e})=>e.typography.paragraphSmall.lineHeight};
   text-decoration: ${B};
-`,Yo=t.default.p`
+`,Qe=n.default.p`
   margin: 0;
 
-  color: ${({theme:o})=>o.colors.neutral["900"]};
-  font-family: ${({theme:o})=>o.typography.paragraphXSmall.fontFamily};
-  font-size: ${({theme:o})=>o.typography.paragraphXSmall.fontSize};
-  font-style: ${({italic:o})=>o?"italic":"normal"};
-  font-weight: ${({theme:o,weight:e})=>e?o.typography.paragraphXSmall.weights[e]:o.typography.paragraphXSmall.weights.normal};
-  line-height: ${({theme:o})=>o.typography.paragraphXSmall.lineHeight};
+  color: ${({theme:e})=>e.colors.neutral["900"]};
+  font-family: ${({theme:e})=>e.typography.paragraphXSmall.fontFamily};
+  font-size: ${({theme:e})=>e.typography.paragraphXSmall.fontSize};
+  font-style: ${({italic:e})=>e?"italic":"normal"};
+  font-weight: ${({theme:e,weight:o})=>o?e.typography.paragraphXSmall.weights[o]:e.typography.paragraphXSmall.weights.normal};
+  line-height: ${({theme:e})=>e.typography.paragraphXSmall.lineHeight};
   text-decoration: ${B};
-`,Ko=t.default.p`
+`,Ze=n.default.p`
   margin: 0;
 
-  color: ${({theme:o})=>o.colors.neutral["900"]};
-  font-family: ${({theme:o})=>o.typography.overlineLarge.fontFamily};
-  font-size: ${({theme:o})=>o.typography.overlineLarge.fontSize};
-  font-weight: ${({theme:o})=>o.typography.overlineLarge.weight};
+  color: ${({theme:e})=>e.colors.neutral["900"]};
+  font-family: ${({theme:e})=>e.typography.overlineLarge.fontFamily};
+  font-size: ${({theme:e})=>e.typography.overlineLarge.fontSize};
+  font-weight: ${({theme:e})=>e.typography.overlineLarge.weight};
   letter-spacing: 1px;
-  line-height: ${({theme:o})=>o.typography.overlineLarge.lineHeight};
+  line-height: ${({theme:e})=>e.typography.overlineLarge.lineHeight};
   text-transform: uppercase;
-`,Qo=t.default.p`
+`,eo=n.default.p`
   margin: 0;
 
-  color: ${({theme:o})=>o.colors.neutral["900"]};
-  font-family: ${({theme:o})=>o.typography.overlineMedium.fontFamily};
-  font-size: ${({theme:o})=>o.typography.overlineMedium.fontSize};
-  font-weight: ${({theme:o})=>o.typography.overlineMedium.weight};
+  color: ${({theme:e})=>e.colors.neutral["900"]};
+  font-family: ${({theme:e})=>e.typography.overlineMedium.fontFamily};
+  font-size: ${({theme:e})=>e.typography.overlineMedium.fontSize};
+  font-weight: ${({theme:e})=>e.typography.overlineMedium.weight};
   letter-spacing: 1px;
-  line-height: ${({theme:o})=>o.typography.overlineMedium.lineHeight};
+  line-height: ${({theme:e})=>e.typography.overlineMedium.lineHeight};
   text-transform: uppercase;
-`,Zo=t.default.p`
+`,oo=n.default.p`
   margin: 0;
 
-  color: ${({theme:o})=>o.colors.neutral["900"]};
-  font-family: ${({theme:o})=>o.typography.overlineSmall.fontFamily};
-  font-size: ${({theme:o})=>o.typography.overlineSmall.fontSize};
-  font-weight: ${({theme:o})=>o.typography.overlineSmall.weight};
+  color: ${({theme:e})=>e.colors.neutral["900"]};
+  font-family: ${({theme:e})=>e.typography.overlineSmall.fontFamily};
+  font-size: ${({theme:e})=>e.typography.overlineSmall.fontSize};
+  font-weight: ${({theme:e})=>e.typography.overlineSmall.weight};
   letter-spacing: 1px;
-  line-height: ${({theme:o})=>o.typography.overlineSmall.lineHeight};
+  line-height: ${({theme:e})=>e.typography.overlineSmall.lineHeight};
   text-transform: uppercase;
-`;var P={exports:{}},w={};/*
+`;var A={exports:{}},F={};/*
 object-assign
 (c) Sindre Sorhus
 @license MIT
-*/var N=Object.getOwnPropertySymbols,oe=Object.prototype.hasOwnProperty,ee=Object.prototype.propertyIsEnumerable;function ie(o){if(o==null)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(o)}function te(){try{if(!Object.assign)return!1;var o=new String("abc");if(o[5]="de",Object.getOwnPropertyNames(o)[0]==="5")return!1;for(var e={},n=0;n<10;n++)e["_"+String.fromCharCode(n)]=n;var p=Object.getOwnPropertyNames(e).map(function(d){return e[d]});if(p.join("")!=="0123456789")return!1;var l={};return"abcdefghijklmnopqrst".split("").forEach(function(d){l[d]=d}),Object.keys(Object.assign({},l)).join("")==="abcdefghijklmnopqrst"}catch{return!1}}te();/** @license React v17.0.2
+*/var X=Object.getOwnPropertySymbols,io=Object.prototype.hasOwnProperty,to=Object.prototype.propertyIsEnumerable;function no(e){if(e==null)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}function ro(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de",Object.getOwnPropertyNames(e)[0]==="5")return!1;for(var o={},i=0;i<10;i++)o["_"+String.fromCharCode(i)]=i;var d=Object.getOwnPropertyNames(o).map(function(p){return o[p]});if(d.join("")!=="0123456789")return!1;var l={};return"abcdefghijklmnopqrst".split("").forEach(function(p){l[p]=p}),Object.keys(Object.assign({},l)).join("")==="abcdefghijklmnopqrst"}catch{return!1}}ro();/** @license React v17.0.2
  * react-jsx-runtime.production.min.js
@@ -212,3 +212,3 @@ *
  * LICENSE file in the root directory of this source tree.
- */var ne=ro.default,U=60103;if(w.Fragment=60107,typeof Symbol=="function"&&Symbol.for){var V=Symbol.for;U=V("react.element"),w.Fragment=V("react.fragment")}var re=ne.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,ae=Object.prototype.hasOwnProperty,le={key:!0,ref:!0,__self:!0,__source:!0};function q(o,e,n){var p,l={},d=null,x=null;n!==void 0&&(d=""+n),e.key!==void 0&&(d=""+e.key),e.ref!==void 0&&(x=e.ref);for(p in e)ae.call(e,p)&&!le.hasOwnProperty(p)&&(l[p]=e[p]);if(o&&o.defaultProps)for(p in e=o.defaultProps,e)l[p]===void 0&&(l[p]=e[p]);return{$$typeof:U,type:o,key:d,ref:x,props:l,_owner:re.current}}w.jsx=q,w.jsxs=q,P.exports=w;const h=P.exports.jsx,$=P.exports.jsxs,G=a.css`
+ */var ao=le.default,N=60103;if(F.Fragment=60107,typeof Symbol=="function"&&Symbol.for){var U=Symbol.for;N=U("react.element"),F.Fragment=U("react.fragment")}var lo=ao.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,go=Object.prototype.hasOwnProperty,po={key:!0,ref:!0,__self:!0,__source:!0};function V(e,o,i){var d,l={},p=null,u=null;i!==void 0&&(p=""+i),o.key!==void 0&&(p=""+o.key),o.ref!==void 0&&(u=o.ref);for(d in o)go.call(o,d)&&!po.hasOwnProperty(d)&&(l[d]=o[d]);if(e&&e.defaultProps)for(d in o=e.defaultProps,o)l[d]===void 0&&(l[d]=o[d]);return{$$typeof:N,type:e,key:p,ref:u,props:l,_owner:lo.current}}F.jsx=V,F.jsxs=V,A.exports=F;const c=A.exports.jsx,$=A.exports.jsxs,q=a.css`
   display: flex;
@@ -218,7 +218,7 @@ flex-flow: row nowrap;
   border-style: solid;
-  font-family: ${({theme:o})=>o.buttons.fontFamily};
+  font-family: ${({theme:e})=>e.buttons.fontFamily};
 
   &,
   & * {
-    font-weight: ${({theme:o})=>o.buttons.fontWeight};
+    font-weight: ${({theme:e})=>e.buttons.fontWeight};
   }
@@ -230,55 +230,55 @@
   }
-`,I=a.css`
+`,G=a.css`
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
-`,pe=a.css`
-  ${({buttonSize:o,theme:e})=>a.css`
-    padding: ${e.buttons.regular[o||"medium"].verticalPadding}
-      ${e.buttons.regular[o||"medium"].horizontalPadding};
+`,so=a.css`
+  ${({buttonSize:e,theme:o})=>a.css`
+    padding: ${o.buttons.regular[e||"medium"].verticalPadding}
+      ${o.buttons.regular[e||"medium"].horizontalPadding};
 
-    border-radius: ${e.buttons.regular[o||"medium"].borderRadius};
-    font-size: ${e.buttons.regular[o||"medium"].fontSize};
+    border-radius: ${o.buttons.regular[e||"medium"].borderRadius};
+    font-size: ${o.buttons.regular[e||"medium"].fontSize};
   `}
+`,I=a.css`
+  ${({theme:e,buttonStyle:o})=>a.css`
+    background: ${e.buttons.regular.disabled[o||"primary"].background};
+    border-color: ${e.buttons.regular.disabled[o||"primary"].borderColor};
+    border-width: ${e.buttons.regular.disabled[o||"primary"].borderWidth};
+    color: ${e.buttons.regular.disabled[o||"primary"].contentColor};
+  `}
 `,J=a.css`
-  ${({theme:o,buttonStyle:e})=>a.css`
-    background: ${o.buttons.regular.disabled[e||"primary"].background};
-    border-color: ${o.buttons.regular.disabled[e||"primary"].borderColor};
-    border-width: ${o.buttons.regular.disabled[e||"primary"].borderWidth};
-    color: ${o.buttons.regular.disabled[e||"primary"].contentColor};
+  ${({theme:e,buttonStyle:o,variant:i})=>a.css`
+    background: ${e.buttons.regular[i||"primary"][o||"primary"].background};
+    border-color: ${e.buttons.regular[i||"primary"][o||"primary"].borderColor};
+    border-width: ${e.buttons.regular[i||"primary"][o||"primary"].borderWidth};
+    color: ${e.buttons.regular[i||"primary"][o||"primary"].contentColor};
   `}
-`,Y=a.css`
-  ${({theme:o,buttonStyle:e,variant:n})=>a.css`
-    background: ${o.buttons.regular[n||"primary"][e||"primary"].background};
-    border-color: ${o.buttons.regular[n||"primary"][e||"primary"].borderColor};
-    border-width: ${o.buttons.regular[n||"primary"][e||"primary"].borderWidth};
-    color: ${o.buttons.regular[n||"primary"][e||"primary"].contentColor};
-  `}
-`,de=t.default.button`
+`,ho=n.default.button`
+  ${q}
+  ${so}
+  
+  ${({disabled:e})=>e?I:J}
+`,co=a.css`
+  margin-right: ${({theme:e,buttonSize:o})=>e.buttons.regular[o||"medium"].iconPadding};
+`,fo=n.default.div`
   ${G}
-  ${pe}
-  
-  ${({disabled:o})=>o?J:Y}
-`,ge=a.css`
-  margin-right: ${({theme:o,buttonSize:e})=>o.buttons.regular[e||"medium"].iconPadding};
-`,se=t.default.div`
-  ${I}
-  ${ge}
-`,he=a.css`
-  margin-left: ${({theme:o,buttonSize:e})=>o.buttons.regular[e||"medium"].iconPadding};
-`,ce=t.default.div`
-  ${I}
-  ${he}
-`,fe=a.css`
-  ${({buttonSize:o,theme:e})=>a.css`
-    padding: ${e.buttons.icon[o||"medium"].verticalPadding}
-      ${e.buttons.icon[o||"medium"].horizontalPadding};
+  ${co}
+`,yo=a.css`
+  margin-left: ${({theme:e,buttonSize:o})=>e.buttons.regular[o||"medium"].iconPadding};
+`,xo=n.default.div`
+  ${G}
+  ${yo}
+`,bo=a.css`
+  ${({buttonSize:e,theme:o})=>a.css`
+    padding: ${o.buttons.icon[e||"medium"].verticalPadding}
+      ${o.buttons.icon[e||"medium"].horizontalPadding};
 
-    border-radius: ${e.buttons.icon[o||"medium"].borderRadius};
-    font-size: ${e.buttons.icon[o||"medium"].fontSize};
+    border-radius: ${o.buttons.icon[e||"medium"].borderRadius};
+    font-size: ${o.buttons.icon[e||"medium"].fontSize};
   `}
-`,ye=a.css`
-  width: ${({theme:o,buttonSize:e})=>o.buttons.icon[e||"medium"].buttonSize};
-  height: ${({theme:o,buttonSize:e})=>o.buttons.icon[e||"medium"].buttonSize};
-`,ue=t.default.div`
+`,uo=a.css`
+  width: ${({theme:e,buttonSize:o})=>e.buttons.icon[o||"medium"].buttonSize};
+  height: ${({theme:e,buttonSize:o})=>e.buttons.icon[o||"medium"].buttonSize};
+`,mo=n.default.div`
   display: flex;
@@ -289,52 +289,53 @@ flex-flow: row nowrap;
 
-  ${ye}
-`,xe=t.default.button`
-  ${G}
-  ${fe}
+  ${uo}
+`,$o=n.default.button`
+  ${q}
+  ${bo}
 
-  ${({disabled:o})=>o?J:Y}
-`,be=v=>{var C=v,{buttonSize:o="medium",variant:e="primary",buttonStyle:n="primary",iconOnly:p=!1,startIcon:l=null,endIcon:d=null,children:x}=C,b=to(C,["buttonSize","variant","buttonStyle","iconOnly","startIcon","endIcon","children"]);return p?h(xe,k(H({},b),{variant:e,buttonStyle:n,buttonSize:o,children:h(ue,{buttonSize:o,children:l||d},void 0)}),void 0):$(de,k(H({},b),{variant:e,buttonStyle:n,buttonSize:o,children:[l&&h(se,{buttonSize:o,children:l},void 0),x,d&&h(ce,{buttonSize:o,children:d},void 0)]}),void 0)},u="info",me=t.default.div`
+  ${({disabled:e})=>e?I:J}
+`,ko=K=>{var k=K,{buttonSize:e="medium",variant:o="primary",buttonStyle:i="primary",iconOnly:d=!1,startIcon:l=null,endIcon:p=null,children:u}=k,m=re(k,["buttonSize","variant","buttonStyle","iconOnly","startIcon","endIcon","children"]);return d?c($o,w(H({},m),{variant:o,buttonStyle:i,buttonSize:e,children:c(mo,{buttonSize:e,children:l||p},void 0)}),void 0):$(ho,w(H({},m),{variant:o,buttonStyle:i,buttonSize:e,children:[l&&c(fo,{buttonSize:e,children:l},void 0),u,p&&c(xo,{buttonSize:e,children:p},void 0)]}),void 0)},b="info",Ho=n.default.div`
   display: flex;
   flex-direction: column;
-`,L=t.default.span`
-  color: ${({theme:o})=>o.inputBox.label.color};
-  font-family: ${({theme:o})=>o.inputBox.fontFamily};
-  font-size: ${({theme:o})=>o.inputBox.label.fontSize};
-  font-style: ${({theme:o})=>o.inputBox.label.fontStyle};
-  font-weight: ${({theme:o})=>o.inputBox.fontWeight};
-  line-height: ${({theme:o})=>o.inputBox.label.lineHeight};
-  font-feature-settings: ${({theme:o})=>o.inputBox.fontFeatureSettings};
-`,$e=t.default.div`
+  margin-top: ${({theme:e,spaced:o})=>o?e.inputBox.spacing:0};
+`,L=n.default.span`
+  color: ${({theme:e})=>e.inputBox.label.color};
+  font-family: ${({theme:e})=>e.inputBox.fontFamily};
+  font-size: ${({theme:e})=>e.inputBox.label.fontSize};
+  font-style: ${({theme:e})=>e.inputBox.label.fontStyle};
+  font-weight: ${({theme:e})=>e.inputBox.fontWeight};
+  line-height: ${({theme:e})=>e.inputBox.label.lineHeight};
+  font-feature-settings: ${({theme:e})=>e.inputBox.fontFeatureSettings};
+`,So=n.default.div`
   display: flex;
-`,He=t.default(L)`
-  margin: ${({theme:o})=>o.inputBox.helper.margin};
+`,wo=n.default(L)`
+  margin: ${({theme:e})=>e.inputBox.helper.margin};
 
-  color: ${({theme:o,status:e})=>o.inputBox[e||u].helperColor};
-  font-size: ${({theme:o})=>o.inputBox.helper.fontSize};
-  font-style: ${({theme:o})=>o.inputBox.helper.fontStyle};
-  font-weight: ${({theme:o})=>o.inputBox.helper.fontWeight};
-  line-height: ${({theme:o})=>o.inputBox.helper.lineHeight};
-`,ke=t.default.div`
-  color: ${({theme:o,status:e})=>o.inputBox[e||u].helperColor};
-`,Se=t.default.div`
+  color: ${({theme:e,status:o})=>e.inputBox[o||b].helperColor};
+  font-size: ${({theme:e})=>e.inputBox.helper.fontSize};
+  font-style: ${({theme:e})=>e.inputBox.helper.fontStyle};
+  font-weight: ${({theme:e})=>e.inputBox.helper.fontWeight};
+  line-height: ${({theme:e})=>e.inputBox.helper.lineHeight};
+`,vo=n.default.div`
+  color: ${({theme:e,status:o})=>e.inputBox[o||b].helperColor};
+`,Fo=n.default.div`
   display: flex;
   position: absolute;
-  top: ${({theme:o})=>o.inputBox.hint.top};
-  right: ${({theme:o})=>o.inputBox.hint.right};
+  top: ${({theme:e})=>e.inputBox.hint.top};
+  right: ${({theme:e})=>e.inputBox.hint.right};
   flex-direction: row;
-  margin: ${({theme:o})=>o.inputBox.margin};
-  padding: ${({theme:o})=>o.inputBox.padding};
-`,we=t.default(L)`
-  margin: ${({theme:o})=>o.inputBox.hint.margin};
+  margin: ${({theme:e})=>e.inputBox.margin};
+  padding: ${({theme:e})=>e.inputBox.padding};
+`,zo=n.default(L)`
+  margin: ${({theme:e})=>e.inputBox.hint.margin};
 
-  color: ${({theme:o,status:e})=>o.inputBox[e||u].hintColor};
-`,ve=t.default.div`
+  color: ${({theme:e,status:o})=>e.inputBox[o||b].hintColor};
+`,Bo=n.default.div`
   margin: 4px 4px;
 
-  color: ${({theme:o,status:e})=>o.inputBox[e||u].hintColor};
-`,Fe=t.default.div`
+  color: ${({theme:e,status:o})=>e.inputBox[o||b].hintColor};
+`,Co=n.default.div`
   position: relative;
-`,ze=t.default.input`
+`,Do=n.default.input`
   display: flex;
-  box-sizing: ${({theme:o})=>o.inputBox.boxSizing};
+  box-sizing: ${({theme:e})=>e.inputBox.boxSizing};
   flex-direction: row;
@@ -344,35 +345,35 @@ flex-grow: 0;
   align-self: stretch;
-  width: ${({theme:o})=>o.inputBox.width};
-  height: ${({theme:o})=>o.inputBox.height};
-  margin: ${({theme:o})=>o.inputBox.margin};
-  padding: ${({theme:o})=>o.inputBox.padding};
+  width: ${({theme:e})=>e.inputBox.width};
+  height: ${({theme:e})=>e.inputBox.height};
+  margin: ${({theme:e})=>e.inputBox.margin};
+  padding: ${({theme:e})=>e.inputBox.padding};
 
-  border: ${({theme:o,status:e})=>o.inputBox[e||u].border};
-  border-radius: ${({theme:o})=>o.inputBox.borderRadius};
+  border: ${({theme:e,status:o})=>e.inputBox[o||b].border};
+  border-radius: ${({theme:e})=>e.inputBox.borderRadius};
 
-  background: ${({theme:o})=>o.inputBox.background};
-  box-shadow: ${({theme:o,status:e})=>o.inputBox[e||u].boxShadow};
+  background: ${({theme:e})=>e.inputBox.background};
+  box-shadow: ${({theme:e,status:o})=>e.inputBox[o||b].boxShadow};
 
-  color: ${({theme:o,status:e})=>o.inputBox[e||u].color};
+  color: ${({theme:e,status:o})=>e.inputBox[o||b].color};
 
   &:focus {
-    box-sizing: ${({theme:o,status:e})=>o.inputBox[e||u].focused.boxSizing};
+    box-sizing: ${({theme:e,status:o})=>e.inputBox[o||b].focused.boxSizing};
 
-    border: ${({theme:o,status:e})=>o.inputBox[e||u].focused.border};
-    border-radius: ${({theme:o,status:e})=>o.inputBox[e||u].focused.borderRadius};
+    border: ${({theme:e,status:o})=>e.inputBox[o||b].focused.border};
+    border-radius: ${({theme:e,status:o})=>e.inputBox[o||b].focused.borderRadius};
     outline: none;
 
-    background: ${({theme:o})=>o.inputBox.background};
-    box-shadow: ${({theme:o,status:e})=>o.inputBox[e||u].focused.boxShadow};
+    background: ${({theme:e})=>e.inputBox.background};
+    box-shadow: ${({theme:e,status:o})=>e.inputBox[o||b].focused.boxShadow};
   }
   &:disabled {
-    box-sizing: ${({theme:o})=>o.inputBox.disabled.boxSizing};
+    box-sizing: ${({theme:e})=>e.inputBox.disabled.boxSizing};
     align-items: center;
-    padding: ${({theme:o})=>o.inputBox.padding};
+    padding: ${({theme:e})=>e.inputBox.padding};
 
-    border: ${({theme:o})=>o.inputBox.disabled.border};
-    border-radius: ${({theme:o})=>o.inputBox.disabled.borderRadius};
+    border: ${({theme:e})=>e.inputBox.disabled.border};
+    border-radius: ${({theme:e})=>e.inputBox.disabled.borderRadius};
 
-    background: ${({theme:o})=>o.inputBox.background};
-    box-shadow: ${({theme:o})=>o.inputBox.disabled.boxShadow};
+    background: ${({theme:e})=>e.inputBox.background};
+    box-shadow: ${({theme:e})=>e.inputBox.disabled.boxShadow};
   }
@@ -383,6 +384,6 @@ &:placeholder {
 
-    color: ${({theme:o})=>o.inputBox.placeholder.color};
+    color: ${({theme:e})=>e.inputBox.placeholder.color};
   }
-`,K=o=>$(me,{children:[h(L,{children:o.description},void 0),$(Fe,{children:[h(ze,H({status:o.status,placeholder:o.placeholder,disabled:o.disabled,onChange:o.onChange,type:o.type||"text"},o),void 0),o.hint&&$(Se,{children:[h(we,{status:o.status,children:o.hint.content},void 0),o.hint.icon&&h(ve,{status:o.status,children:o.hint.icon},void 0)]},void 0)]},void 0),$($e,{children:[o.status==="error"&&h(ke,{status:o.status,children:h(_.default,{path:j.mdiAlert,size:.7},void 0)},void 0),h(He,{status:o.status,children:o.helper},void 0)]},void 0)]},void 0),Be=t.default.button`
-  ${X}
+`,Y=e=>$(Ho,{spaced:e.spaced,children:[c(L,{children:e.description},void 0),$(Co,{children:[c(Do,H({status:e.status,placeholder:e.placeholder,disabled:e.disabled,onChange:e.onChange,type:e.type||"text"},e),void 0),e.hint&&$(Fo,{children:[c(zo,{status:e.status,children:e.hint.content},void 0),e.hint.icon&&c(Bo,{status:e.status,children:e.hint.icon},void 0)]},void 0)]},void 0),$(So,{children:[e.status==="error"&&c(vo,{status:e.status,children:c(R.default,{path:j.mdiAlert,size:.7},void 0)},void 0),c(wo,{status:e.status,children:e.helper},void 0)]},void 0)]},void 0),Eo=n.default.button`
+  ${T}
   box-sizing: border-box;
@@ -393,3 +394,3 @@ padding: 18px 10px;
 
-  background: ${({theme:o,highlighted:e})=>e?o.select.items.hover.background:"none"};
+  background: ${({theme:e,highlighted:o})=>o?e.select.items.hover.background:"none"};
 
@@ -399,8 +400,8 @@ text-align: left;
   &:hover {
-    background: ${({theme:o})=>o.select.items.hover.background};
+    background: ${({theme:e})=>e.select.items.hover.background};
   }
-`,Ce=o=>{var e,n,p,l;return h(Be,k(H({},o),{children:((e=o==null?void 0:o.item)==null?void 0:e.name)||((n=o==null?void 0:o.item)==null?void 0:n.label)||((l=(p=o==null?void 0:o.item)==null?void 0:p.toString)==null?void 0:l.call(p))}),void 0)},De=t.default.div`
+`,Ao=e=>{var o,i,d,l;return c(Eo,w(H({},e),{children:((o=e==null?void 0:e.item)==null?void 0:o.name)||((i=e==null?void 0:e.item)==null?void 0:i.label)||((l=(d=e==null?void 0:e.item)==null?void 0:d.toString)==null?void 0:l.call(d))}),void 0)},Lo=n.default.div`
   display: flex;
-  position: ${({focus:o})=>o?"fixed":"relative"};
-  z-index: ${({focus:o})=>o?"99999":"9"};
+  position: ${({focus:e})=>e?"fixed":"relative"};
+  z-index: ${({focus:e})=>e?"99999":"9"};
   top: 0;
@@ -412,5 +413,6 @@ right: 0;
   flex-flow: column nowrap;
-  padding: ${({theme:o,focus:e})=>e?o.spacings.md:void 0};
+  margin-top: ${({theme:e,spaced:o})=>o?e.inputBox.spacing:0};
+  padding: ${({theme:e,focus:o})=>o?e.spacings.md:void 0};
 
-  background: ${({theme:o,focus:e})=>e?o.colors.shades["0"]:"none"};
+  background: ${({theme:e,focus:o})=>o?e.colors.shades["0"]:"none"};
 
@@ -424,4 +426,4 @@ ${r.up("desktop")} {
   }
-`,Ae=t.default.div`
-  display: ${({focus:o})=>o?"flex":"none"};
+`,Oo=n.default.div`
+  display: ${({focus:e})=>e?"flex":"none"};
   box-sizing: border-box;
@@ -434,15 +436,20 @@ flex-flow: column nowrap;
 
-  background: ${({theme:o})=>o.colors.shades["0"]};
-  box-shadow: ${({theme:o,focus:e})=>e?void 0:o.select.items.shadow};
+  background: ${({theme:e})=>e.colors.shades["0"]};
+  box-shadow: ${({theme:e,focus:o})=>o?void 0:e.select.items.shadow};
 
   ${r.up("desktop")} {
-    display: ${({focus:o})=>o?"flex":"none"};
+    display: ${({focus:e})=>e?"flex":"none"};
     position: absolute;
     z-index: 9999;
-    top: ${({theme:o})=>o.spacings.xxlg};
+    top: ${({theme:e,description:o,helper:i})=>`calc(
+        ${e.spacings.xxlg} 
+        + ${o?e.inputBox.label.lineHeight:"0px"} 
+        + -${i?e.inputBox.helper.fontSize:"0px"}
+        + ${i?"14px":"0px"}
+      )`};
     flex-grow: unset;
     flex-shrink: unset;
 
-    box-shadow: ${({theme:o})=>o.select.items.shadow};
+    box-shadow: ${({theme:e})=>e.select.items.shadow};
   }
-`,Ee=({autoCompleteItems:o,renderItem:e,inputProps:n,renderHeader:p,onItemSelected:l})=>{const d=p||(()=>null),x=e||Ce,[b,v]=s.useState(!1),[C,F]=s.useState(0),[Q,Z]=s.useState(!1),O=s.useCallback(D=>{switch(D.key){case"Escape":v(!1);break;case"ArrowUp":F(y=>y&&y-1);break;case"ArrowDown":F(y=>y<o.length-1?y+1:y);break;case"Enter":F(y=>(v(!1),o.length&&l&&typeof l=="function"&&l(o[y]),0));break}},[o,l]);return s.useEffect(()=>(document.addEventListener("keydown",O,!1),()=>{document.removeEventListener("keydown",O,!1)}),[O]),s.useEffect(()=>{v(!0)},[o]),$(De,{focus:Q,children:[h(K,k(H({},n),{onFocus:()=>Z(!0),onBlur:()=>Z(!1),hint:{icon:h(_.default,{path:j.mdiUnfoldMoreHorizontal,size:.7},void 0),content:""}}),void 0),b&&$(Ae,{focus:Q,children:[(o==null?void 0:o.length)>0&&h(d,{},void 0),o==null?void 0:o.map((D,y)=>h(x,{item:D,onClick:()=>{v(!1),l&&typeof l=="function"&&l(o[y]),F(0)},onMouseEnter:()=>F(y),highlighted:C===y},D.id))]},void 0)]},void 0)};i.Button=be,i.DisplayLarge=Wo,i.DisplaySmall=Mo,i.HeadingH1=To,i.HeadingH2=Xo,i.HeadingH3=No,i.HeadingH4=Uo,i.HeadingH5=Vo,i.HeadingH6=qo,i.InputBox=K,i.OverlineLarge=Ko,i.OverlineMedium=Qo,i.OverlineSmall=Zo,i.ParagraphLarge=Go,i.ParagraphMedium=Io,i.ParagraphSmall=Jo,i.ParagraphXSmall=Yo,i.Select=Ee,i.darkTheme=Ro,i.lightTheme=T,Object.defineProperty(i,"__esModule",{value:!0}),i[Symbol.toStringTag]="Module"});
+`,jo=({autoCompleteItems:e,renderItem:o,inputProps:i,renderHeader:d,onItemSelected:l,spaced:p})=>{var ee,oe;const u=d||(()=>null),m=o||Ao,[K,k]=h.useState(!1),[Ro,z]=h.useState(0),[Q,Z]=h.useState(!1),O=h.useCallback(C=>{switch(C.key){case"Escape":k(!1);break;case"ArrowUp":z(y=>y&&y-1);break;case"ArrowDown":z(y=>y<e.length-1?y+1:y);break;case"Enter":z(y=>(k(!1),e.length&&l&&typeof l=="function"&&l(e[y]),0));break}},[e,l]);return h.useEffect(()=>(document.addEventListener("keydown",O,!1),()=>{document.removeEventListener("keydown",O,!1)}),[O]),h.useEffect(()=>{k(!0)},[e]),$(Lo,{focus:Q,spaced:p||(i==null?void 0:i.spaced),children:[c(Y,w(H({},i),{onFocus:()=>Z(!0),onBlur:()=>Z(!1),hint:{icon:((ee=i==null?void 0:i.hint)==null?void 0:ee.icon)||c(R.default,{path:j.mdiUnfoldMoreHorizontal,size:.7},void 0),content:((oe=i==null?void 0:i.hint)==null?void 0:oe.content)||""},spaced:!1}),void 0),K&&$(Oo,{focus:Q,helper:i==null?void 0:i.helper,description:i==null?void 0:i.description,children:[(e==null?void 0:e.length)>0&&c(u,{},void 0),e==null?void 0:e.map((C,y)=>c(m,{item:C,onClick:()=>{k(!1),l&&typeof l=="function"&&l(e[y]),z(0)},onMouseEnter:()=>z(y),highlighted:Ro===y},C.id))]},void 0)]},void 0)};t.Button=ko,t.DisplayLarge=Te,t.DisplaySmall=Xe,t.HeadingH1=Ne,t.HeadingH2=Ue,t.HeadingH3=Ve,t.HeadingH4=qe,t.HeadingH5=Ge,t.HeadingH6=Ie,t.InputBox=Y,t.OverlineLarge=Ze,t.OverlineMedium=eo,t.OverlineSmall=oo,t.ParagraphLarge=Je,t.ParagraphMedium=Ye,t.ParagraphSmall=Ke,t.ParagraphXSmall=Qe,t.Select=jo,t.darkTheme=Pe,t.lightTheme=P,Object.defineProperty(t,"__esModule",{value:!0}),t[Symbol.toStringTag]="Module"});

dist/main.d.ts

@@ -10,1 +10,2 @@ export { light as lightTheme } from "./theme";
 export { default as Select } from "./components/Select";
+export type { CheckBoxProps } from "./components/CheckBox";

dist/types/theme.d.ts

@@ -193,2 +193,3 @@ import * as CSS from "csstype";
 export interface InputBox {
+    spacing?: CSS.Property.MarginTop;
     fontFamily: CSS.Property.FontFamily;
@@ -263,2 +264,23 @@ fontWeight: CSS.Property.FontWeight;
 }
+export interface CheckBoc {
+    background: CSS.Property.Background;
+    borderColor: CSS.Property.BorderColor;
+    borderWidth: CSS.Property.BorderWidth;
+    borderRadius: CSS.Property.BorderRadius;
+    borderStyle: CSS.Property.BorderStyle;
+}
+export interface CheckBox {
+    checkMark: {
+        color: CSS.Property.Color;
+        width: CSS.Property.Width;
+        height: CSS.Property.Height;
+        top: CSS.Property.Top;
+        left: CSS.Property.Left;
+    };
+    width: CSS.Property.Width;
+    height: CSS.Property.Height;
+    marginRight: CSS.Property.MarginRight;
+    default: CheckBoc;
+    checked: CheckBoc;
+}
 export default interface Theme {
@@ -279,3 +301,4 @@ breakpoints: {
     select: Select;
+    checkBox: CheckBox;
 }
 export {};

package.json

@@ -17,3 +17,3 @@ {
   },
-  "version": "4.0.2",
+  "version": "4.1.0",
   "scripts": {
@@ -20,0 +20,0 @@ "build": "tsc --noEmit && vite build",

No alert changes

Improved metrics

Total package byte prevSize

759625

increased by0.56%

Number of package files

34

increased by13.33%

Lines of code

2510

increased by3.38%

No dependency changes