@logrock/pebbles - npm Package Compare versions

Comparing version 5.0.2 to 5.1.0

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

@@ -1,2 +0,2 @@
-import { FC } from "react";
+import React, { FC } from "react";
 import { InputBoxProps } from "../InputBox";
@@ -25,3 +25,3 @@ export interface BaseItemType {
     }>;
-    renderHeader?: FC;
+    renderHeader?: React.ReactNode;
     onItemSelected?: (item: ItemType) => void;
@@ -28,0 +28,0 @@ inputProps?: InputBoxProps;

dist/logrock-pebbles.es.js

@@ -1492,3 +1492,3 @@ var __defProp = Object.defineProperty;
 };
-const DefaultItem = styled.button`
+const DefaultItem$1 = styled.button`
   ${paragraphMediumCSS}
@@ -1515,3 +1515,3 @@ box-sizing: border-box;
   var _a, _b, _c, _d;
-  return jsx(DefaultItem, __spreadProps(__spreadValues({}, props), {
+  return jsx(DefaultItem$1, __spreadProps(__spreadValues({}, props), {
     children: ((_a = props == null ? void 0 : props.item) == null ? void 0 : _a.name) || ((_b = props == null ? void 0 : props.item) == null ? void 0 : _b.label) || ((_d = (_c = props == null ? void 0 : props.item) == null ? void 0 : _c.toString) == null ? void 0 : _d.call(_c))
@@ -1580,3 +1580,2 @@ }));
   var _a, _b;
-  const Header = renderHeader || (() => null);
   const Item = renderItem || SimpleItem;
@@ -1661,3 +1660,3 @@ const [currentHighlight, setCurrentHighlight] = useState(0);
       description: inputProps == null ? void 0 : inputProps.description,
-      children: [(autoCompleteItems == null ? void 0 : autoCompleteItems.length) > 0 && jsx(Header, {}), autoCompleteItems == null ? void 0 : autoCompleteItems.map((item, index) => jsx(Item, {
+      children: [renderHeader || null, autoCompleteItems == null ? void 0 : autoCompleteItems.map((item, index) => jsx(Item, {
         item,
@@ -1675,2 +1674,95 @@ onClick: () => {
 };
+const DefaultItem = styled.button`
+  ${paragraphMediumCSS}
+  display: flex;
+  box-sizing: border-box;
+  padding: 18px 10px;
+
+  border: none;
+
+  background: ${({
+  theme: theme2,
+  highlighted
+}) => highlighted ? theme2.select.items.hover.background : "none"};
+
+  text-align: left;
+
+  &:hover {
+    background: ${({
+  theme: theme2
+}) => theme2.select.items.hover.background};
+  }
+`;
+const TR$1 = styled.tr`
+  display: flex;
+  width: 100%;
+`;
+const IDTD$1 = styled.td`
+  flex-basis: ${({
+  theme: theme2
+}) => theme2.spacings.huge};
+  flex-grow: 0;
+  padding-right: ${({
+  theme: theme2
+}) => theme2.spacings.md};
+`;
+const NameTD$1 = styled.td`
+  flex-grow: 1;
+`;
+const TableItem = (props) => {
+  var _a, _b, _c, _d, _e;
+  return jsx(DefaultItem, __spreadProps(__spreadValues({}, props), {
+    children: jsxs(TR$1, {
+      children: [jsx(IDTD$1, {
+        children: (_a = props == null ? void 0 : props.item) == null ? void 0 : _a.id
+      }), jsx(NameTD$1, {
+        children: ((_b = props == null ? void 0 : props.item) == null ? void 0 : _b.name) || ((_c = props == null ? void 0 : props.item) == null ? void 0 : _c.label) || ((_e = (_d = props == null ? void 0 : props.item) == null ? void 0 : _d.toString) == null ? void 0 : _e.call(_d))
+      })]
+    })
+  }));
+};
+const THead = styled.thead`
+  ${paragraphMediumCSS}
+  display: flex;
+  box-sizing: border-box;
+  padding: 18px 10px;
+
+  border: none;
+
+  background: ${({
+  theme: theme2,
+  highlighted
+}) => highlighted ? theme2.select.items.hover.background : "none"};
+
+  text-align: left;
+`;
+const TR = styled.th`
+  display: flex;
+  width: 100%;
+
+  font-weight: bold;
+`;
+const IDTD = styled.td`
+  flex-basis: ${({
+  theme: theme2
+}) => theme2.spacings.huge};
+  flex-grow: 0;
+  padding-right: ${({
+  theme: theme2
+}) => theme2.spacings.md};
+`;
+const NameTD = styled.td`
+  flex-grow: 1;
+`;
+const TableHeader = (props) => {
+  return jsx(THead, __spreadProps(__spreadValues({}, props), {
+    children: jsxs(TR, {
+      children: [jsx(IDTD, {
+        children: props.id
+      }), jsx(NameTD, {
+        children: props.name
+      })]
+    })
+  }));
+};
 const CheckMark = styled.span`
@@ -1762,2 +1854,2 @@ position: relative;
 };
-export { Button, CheckBox, DisplayLarge, DisplaySmall, HeadingH1, HeadingH2, HeadingH3, HeadingH4, HeadingH5, HeadingH6, InputBox, OverlineLarge, OverlineMedium, OverlineSmall, ParagraphLarge, ParagraphMedium, ParagraphSmall, ParagraphXSmall, Select, theme as darkTheme, theme$1 as lightTheme };
+export { Button, CheckBox, DisplayLarge, DisplaySmall, HeadingH1, HeadingH2, HeadingH3, HeadingH4, HeadingH5, HeadingH6, InputBox, OverlineLarge, OverlineMedium, OverlineSmall, ParagraphLarge, ParagraphMedium, ParagraphSmall, ParagraphXSmall, Select, SimpleItem, TableHeader, TableItem, theme as darkTheme, theme$1 as lightTheme };

dist/logrock-pebbles.umd.js

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

dist/main.d.ts

@@ -10,3 +10,6 @@ export { light as lightTheme } from "./theme";
 export { default as Select } from "./components/Select";
+export { default as SimpleItem } from "./components/Select/items/SimpleItem";
+export { default as TableItem } from "./components/Select/items/TableItem";
+export { default as TableHeader } from "./components/Select/headers/TableHeader";
 export { default as CheckBox } from "./components/CheckBox";
 export type { CheckBoxProps } from "./components/CheckBox";

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

775771

increased by0.56%

Number of package files

40

increased by5.26%

Lines of code

2985

increased by5.22%

No dependency changes