monica-alexandria 2.3.0 → 2.5.1

package/dist/index.es.js

@@ -127,7 +127,7 @@ import r from"styled-components";const a=r.button`
     &:hover{
         background: var(--focusLight);
     }
-`,g=r(e)`
+`,m=r(e)`
     background: transparent;
     border: 1px solid transparent;
 
@@ -149,7 +149,7 @@ import r from"styled-components";const a=r.button`
             fill: var(--focusLight);
         }
     }
-`,m=r(o)`
+`,g=r(o)`
     background: transparent;
     border: 1px solid transparent;
 
@@ -449,7 +449,7 @@ import r from"styled-components";const a=r.button`
             fill: var(--errorLight)
         }
     }
-`,R=r(e)`
+`,S=r(e)`
     background: ${r=>"dark"===r.theme?"var(--gloom)":"var(--grey)"};
     border: 1px solid ${r=>"dark"===r.theme?"var(--gloom)":"var(--grey)"};
     border-radius: var(--normalRadius);
@@ -466,7 +466,7 @@ import r from"styled-components";const a=r.button`
         background: ${r=>"dark"===r.theme?"var(--gloomDark)":"var(--greyLight)"};
         border: 1px solid ${r=>"dark"===r.theme?"var(--gloomDark)":"var(--greyLight)"};
     }
-`,S=r(o)`
+`,R=r(o)`
     background: ${r=>"dark"===r.theme?"var(--gloom)":"var(--grey)"};
     border: 1px solid ${r=>"dark"===r.theme?"var(--gloom)":"var(--grey)"};
     border-radius: var(--normalRadius);
@@ -523,7 +523,7 @@ import r from"styled-components";const a=r.button`
             fill: ${r=>"dark"===r.theme?"var(--gloom)":"var(--grey)"};
         }
     }
-`,N=r(o)`
+`,P=r(o)`
     background: transparent;
     border: 1px solid transparent;
 
@@ -546,7 +546,7 @@ import r from"styled-components";const a=r.button`
             fill: ${r=>"dark"===r.theme?"var(--gloom)":"var(--grey)"};
         }
     }
-`,P=r(i)`
+`,N=r(i)`
     background: transparent;
     border: 1px solid transparent;
 
@@ -631,7 +631,30 @@ import r from"styled-components";const a=r.button`
         transition-property: opacity, transform;
         transition-duration: .5s;
     }
-`,C=r(B)`
+`,C=r.div`
+    position: relative;
+
+    ul{
+        position: absolute;
+        z-index: 5;
+        top: 4rem;
+        left: 0;
+        background: ${r=>"dark"===r.theme?"var(--dark)":"var(--white)"};
+        border-radius: var(--normalRadius);
+        box-shadow: ${r=>"dark"===r.theme?"var(--outShine)":"var(--outShadow)"};
+        width: 100%;
+        overflow: hidden;
+
+        li{
+            padding: var(--smallDist);
+            cursor: pointer;
+
+            &:hover{
+                background: ${r=>"dark"===r.theme?"var(--gloom)":"var(--grey)"};
+            }
+        }
+    }
+`,E=r(B)`
     
     aside{
         display: block;
@@ -646,7 +669,7 @@ import r from"styled-components";const a=r.button`
             display: none;
         }
     }
-`,E=r.div`
+`,G=r.div`
     position: absolute;
     top: 1.2rem;
     right: 2rem;
@@ -655,7 +678,7 @@ import r from"styled-components";const a=r.button`
         height: var(--smallText);
         fill: ${r=>"dark"===r.theme?"var(--gloomLight)":"var(--greyDark)"};
     }
-`,G=r.div`
+`,H=r.div`
     position: absolute;
     top: 1.2rem;
     right: 2rem;
@@ -664,12 +687,12 @@ import r from"styled-components";const a=r.button`
         height: var(--smallText);
         fill: var(--error);
     }
-`,H=r.div`
+`,J=r.div`
     display: flex;
     align-items: center;
     gap: 1rem;
     margin: var(--tinyDist);
-`,J=r(H)`
+`,K=r(J)`
     
     svg{
         width: var(--smallIcon);
@@ -679,7 +702,7 @@ import r from"styled-components";const a=r.button`
     h6{
         color: var(--error);
     }
-`,K=r(H)`
+`,Q=r(J)`
     
     svg{
         width: var(--smallIcon);
@@ -689,7 +712,7 @@ import r from"styled-components";const a=r.button`
     h6{
         color: var(--success);
     }
-`,Q=r(H)`
+`,U=r(J)`
     
     svg{
         width: var(--smallIcon);
@@ -699,11 +722,11 @@ import r from"styled-components";const a=r.button`
     h6{
         color: var(--greyDark);
     }
-`,U=r.div`
+`,V=r.div`
     display: grid;
     grid-template-columns: repeat(${r=>r.columns}, 1fr);
     grid-gap: 2rem;
-`,V=r.div`
+`,W=r.div`
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -718,13 +741,13 @@ import r from"styled-components";const a=r.button`
     &:hover{
         box-shadow: ${r=>"dark"===r.theme?"var(--outShineFocus)":"var(--outShadowFocus)"};
     }
-`,W=r.div`
-
 `,X=r.div`
+
+`,Z=r.div`
     display: flex;
     align-items: center;
     gap: 1rem;
-`,Z=r(r.form`
+`,_=r(r.form`
     position: relative;
 
     select{
@@ -759,7 +782,7 @@ import r from"styled-components";const a=r.button`
     svg{
         height: var(--buttonNormalIcon);
     }
-`,_=r(Z)`
+`,rr=r(_)`
     select{
         color: ${r=>"dark"===r.theme?"var(--blanc);":"var(--black);"};
         background: ${r=>"dark"===r.theme?"var(--gloomDark);":"var(--greyLight);"};
@@ -769,7 +792,31 @@ import r from"styled-components";const a=r.button`
     svg{
         fill: ${r=>"dark"===r.theme?"var(--blanc);":"var(--black);"};
     }
-`,rr={xs:576,sm:768,md:992,lg:1200,xl:1440,wd:1800},ar={xs:`${rr.xs}px`,sm:`${rr.sm}px`,md:`${rr.md}px`,lg:`${rr.ls}px`,xl:`${rr.xl}px`,wd:`${rr.wd}px`},er={xs:`(max-width: ${ar.xs})`,sm:`(max-width: ${ar.sm})`,md:`(max-width: ${ar.md})`,lg:`(max-width: ${ar.lg})`,xl:`(max-width: ${ar.xl})`,wd:`(max-width: ${ar.wd})`},or=r.nav`
+`,ar=r.textarea`
+    width: 100%;
+    border: none;
+    background: ${r=>"dark"===r.theme?"var(--dark)":"var(--white)"};
+    color: ${r=>"dark"===r.theme?"var(--blanc)":"var(--black)"};
+    box-shadow: ${r=>"dark"===r.theme?"var(--insetShine)":"var(--insetShadow)"};
+    border-radius: var(--normalRadius);
+    transition-property: box-shadow;
+    transition-duration: .5s;
+    resize: none;
+
+    &:focus{
+        outline: 0;
+        box-shadow: ${r=>"dark"===r.theme?"var(--insetShineFocus)":"var(--insetShadowFocus)"};
+    }
+`,er=r(ar)`
+    padding: var(--inputSmallPads);
+    font-size: var(--inputSmallText);
+`,or=r(ar)`
+    padding: var(--inputNormalPads);
+    font-size: var(--inputNormalText);
+`,ir=r(ar)`
+    padding: var(--inputLargePads);
+    font-size: var(--inputLargeText);
+`,tr={xs:576,sm:768,md:992,lg:1200,xl:1440,wd:1800},dr={xs:`${tr.xs}px`,sm:`${tr.sm}px`,md:`${tr.md}px`,lg:`${tr.ls}px`,xl:`${tr.xl}px`,wd:`${tr.wd}px`},nr={xs:`(max-width: ${dr.xs})`,sm:`(max-width: ${dr.sm})`,md:`(max-width: ${dr.md})`,lg:`(max-width: ${dr.lg})`,xl:`(max-width: ${dr.xl})`,wd:`(max-width: ${dr.wd})`},lr=r.nav`
     display: grid;
     align-items: center;
     grid-gap: 1rem;
@@ -782,7 +829,7 @@ import r from"styled-components";const a=r.button`
     padding: 1rem 4rem;
     background: ${r=>"dark"===r.theme?"var(--dark)":"var(--white)"};
     box-shadow: ${r=>"dark"===r.theme?"0 1px 3px var(--shine)":"0 1px 3px var(--shadow)"};
-`,ir=r.div`
+`,sr=r.div`
     display: flex;
     gap: 1rem;
     align-items: center;
@@ -807,7 +854,7 @@ import r from"styled-components";const a=r.button`
             transform: rotate(55deg);
         }
     }
-`,tr=r.div`
+`,vr=r.div`
 
     h6{
         color: var(--focus) !important;
@@ -816,75 +863,100 @@ import r from"styled-components";const a=r.button`
         font-weight: 600;
     }
 
-    @media ${er.md} {
+    @media ${nr.md} {
         display: none;
     }
-`,dr=r.div`
+`,mr=r.div`
     justify-self: center;
 
-    @media ${er.sm} {
+    @media ${nr.sm} {
         justify-self: flex-end;
     }
-`,nr=r.div`
+`,gr=r.div`
     justify-self: flex-end;
     display: flex;
     align-items: center;
     gap: 1rem;
 
-    @media ${er.sm} {
+    @media ${nr.sm} {
         display: none;
     }
-`,lr=r.div`
+`,hr=r.div`
+    justify-self: flex-end;
+    display: none;
+    align-items: center;
+    gap: 1rem;
+
+    @media ${nr.sm} {
+        display: flex;
+    }
+`,pr=r.div`
     padding: 7rem 4rem 2rem 4rem;
-`,sr=r.div`
+`,cr=r.div`
     padding-top: 2rem 4rem;
-`,vr=r.div`
+`,ur=r.div`
     padding-top: 7rem;
-`,gr=r.div`
+`,kr=r.div`
     display: grid;
     grid-template-columns: calc(60% - 4rem) 40%;
     grid-gap: 4rem;
     align-items: flex-start;
 
-    @media ${er.md} {
+    @media ${nr.md} {
         grid-template-columns: 1fr;
     }
-`,mr=r.div`
+`,br=r.div`
     display: grid;
     grid-template-columns: 40% calc(60% - 4rem);
     grid-gap: 4rem;
     align-items: flex-start;
 
-    @media ${er.md} {
+    @media ${nr.md} {
         grid-template-columns: 1fr;
     }
-`,hr=r.div`
+`,fr=r.div`
     width: 100%;
-`,pr=r.div`
+`,xr=r.div`
     width: 100%;
 
-    @media ${er.md} {
+    @media ${nr.md} {
         display: none;
     }
-`,cr=r.div`
+`,$r=r.div`
+    background: ${r=>"dark"===r.theme?"var(--dark)":"var(--white)"};
+    transition-property: background;
+    transition-duration: .5s;
+    height: 100%;
+    min-height: calc(100vh);
+    width: 100%;
+
+    html{
+        color: ${r=>"dark"===r.theme?"var(--blanc)":"var(--black)"};
+    }
+
+    h1,h2,h3,h4,h5,h6,p{
+        color: ${r=>"dark"===r.theme?"var(--blanc)":"var(--black)"};
+        transition: color .5s;
+    }
+`,yr=r.div`
     
     img{
         height: 4rem;
     }
-`,ur=r.div`
+`,wr=r.div`
     max-width: 45rem;
-`,kr=r.div`
+`,Lr=r.div`
     max-width: 45rem;
 
     h1{
         margin: var(--smallDist);
     }
-`,br=r.form`
+`,Dr=r.form`
     padding: var(--normalDist);
     background: ${r=>"dark"===r.theme?"var(--gloomDark)":"var(--greyLight)"};
     border-radius: var(--normalRadius);
     box-shadow: ${r=>"dark"===r.theme?"var(--outShine)":"var(--outShadow)"};
-`,fr=r.div`
+`,Sr=r.div`
     display: flex;
     gap: 1rem;
     align-items: center;
@@ -896,7 +968,7 @@ import r from"styled-components";const a=r.button`
         gap: .5rem;
         align-items: center;
     }
-`,xr=r.div`
+`,Rr=r.div`
     display: flex;
     align-items: flex-start;
     gap: 1rem;
@@ -904,17 +976,17 @@ import r from"styled-components";const a=r.button`
     input{
         margin-top: .3rem;
     }
-`,$r=r.div`
+`,zr=r.div`
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-gap: 1rem;
     margin: 2rem 1rem;
-`,yr=r.div`
+`,Tr=r.div`
     display: flex;
     align-items: center;
     justify-content: center;
     margin-top: 4rem;
-`,wr=r.div`
+`,Pr=r.div`
     
     section{
 
@@ -922,7 +994,7 @@ import r from"styled-components";const a=r.button`
             margin-bottom: 2rem;
         }
     }
-`,Lr=r.div`
+`,Nr=r.div`
     
     picture{
         width: 100%;
@@ -943,7 +1015,7 @@ import r from"styled-components";const a=r.button`
         display: flex;
         gap: 1rem;
     }
-`,Dr=r.div`
+`,jr=r.div`
     display: grid;
     grid-template-columns: 20rem 1fr;
     grid-gap: 2rem;
@@ -968,7 +1040,7 @@ import r from"styled-components";const a=r.button`
         flex-direction: column;
         gap: 1rem;
     }
-`,Rr=r.ul`
+`,Ir=r.ul`
     background: ${r=>"dark"===r.theme?"var(--gloomDark)":"var(--greyLight)"};
     padding: var(--smallDist);
     border-radius: var(--smallRadius);
@@ -993,30 +1065,7 @@ import r from"styled-components";const a=r.button`
     li{
         margin-top: .5rem;
     }
-`,Sr=r.div`
-    position: relative;
-
-    ul{
-        position: absolute;
-        z-index: 5;
-        top: 4rem;
-        left: 0;
-        background: ${r=>"dark"===r.theme?"var(--dark)":"var(--white)"};
-        border-radius: var(--normalRadius);
-        box-shadow: ${r=>"dark"===r.theme?"var(--outShine)":"var(--outShadow)"};
-        width: 100%;
-        overflow: hidden;
-
-        li{
-            padding: var(--smallDist);
-            cursor: pointer;
-
-            &:hover{
-                background: ${r=>"dark"===r.theme?"var(--gloom)":"var(--grey)"};
-            }
-        }
-    }
-`,zr=r.div`
+`,Fr=r.div`
     display: grid;
     grid-template-columns: auto 1fr;
     align-items: flex-start;
@@ -1026,9 +1075,23 @@ import r from"styled-components";const a=r.button`
     form{
         margin-top: 4rem;
     }
-`,Tr=r.ul`
+`,Or=r.div`
+    padding: var(--smallDist);
 
-`,Nr=r.div`
+    ul{
+        margin-top: 1rem;
+
+        li{
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+
+            svg{
+                width: var(--smallText);
+            }
+        }
+    }
+`,Yr=r.div`
     position: fixed;
     top: 0;
     left: 0;
@@ -1036,7 +1099,7 @@ import r from"styled-components";const a=r.button`
     height: 100vh;
     width: 100%;
     background: ${r=>"dark"===r.theme?"var(--blancOverlay)":"var(--blackOverlay)"};
-`,Pr=r.div`
+`,Mr=r.div`
     position: fixed;
     right: 0;
     z-index: 501;
@@ -1046,18 +1109,18 @@ import r from"styled-components";const a=r.button`
     background: ${r=>"dark"===r.theme?"var(--dark)":"var(--white)"};
     box-shadow: ${r=>"dark"===r.theme?"var(--sliderShine)":"var(--sliderShadow)"};
 
-    @media ${er.md} {
+    @media ${nr.md} {
         width: calc(80% + 8rem);
     }
 
-    @media ${er.sm} {
+    @media ${nr.sm} {
         width: 100%;
     }
-`,jr=r.div`
+`,qr=r.div`
     max-height: calc(100vh - 9rem);
     overflow-x: hidden;
     overflow-y: auto;
-`,Ir=r.div`
+`,Ar=r.div`
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -1065,11 +1128,11 @@ import r from"styled-components";const a=r.button`
     padding: var(--smallDist);
     background-color: ${r=>"dark"===r.theme?"var(--gloomDark)":"var(--greyLight)"};
 
-    @media ${er.sm} {
+    @media ${nr.sm} {
         justify-content: flex-end;
 
         h3{
             display: none;
         }
     }
-`;export{yr as AuthActions,$r as AuthCap,xr as AuthCheck,ur as AuthContainer,br as AuthForm,cr as AuthLogo,fr as AuthSecondary,kr as AuthWrapper,X as BoxActions,W as BoxContent,U as BoxGrid,V as BoxWrapper,n as CtaButtonLarge,d as CtaButtonNormal,t as CtaButtonSmall,D as DeleteButtonLarge,L as DeleteButtonNormal,w as DeleteButtonSmall,Tr as EditList,Sr as EditSearch,zr as EditSelect,Rr as EditTips,Dr as EditUploadAvatar,Lr as EditUploadCover,wr as EditWrapper,J as ErrorValidator,v as FocusButtonLarge,s as FocusButtonNormal,l as FocusButtonSmall,h as FocusPlainButtonLarge,m as FocusPlainButtonNormal,g as FocusPlainButtonSmall,z as GreyButtonLarge,S as GreyButtonNormal,R as GreyButtonSmall,_ as GreyDropdownNormal,P as GreyLinkButtonLarge,N as GreyLinkButtonNormal,T as GreyLinkButtonSmall,C as InputAdd,B as InputGroup,E as InputIcon,O as InputLarge,G as InputMandatory,F as InputNormal,I as InputSmall,A as LabelLarge,q as LabelNormal,M as LabelSmall,u as MainButtonLarge,c as MainButtonNormal,p as MainButtonSmall,f as MainPlainButtonLarge,b as MainPlainButtonNormal,k as MainPlainButtonSmall,or as Navbar,dr as NavbarCta,nr as NavbarList,ir as NavbarLogo,tr as NavbarText,hr as PageAlwaysVisible,mr as PageForty,pr as PageMobileHidden,lr as PagePaddings,sr as PageSamePaddings,gr as PageSixty,vr as PageTopPaddings,Nr as Slider,Pr as SliderContainer,Ir as SliderTitle,jr as SliderWrapper,K as SuccessValidator,Q as TipValidator,y as WhitePlainButtonLarge,$ as WhitePlainButtonNormal,x as WhitePlainButtonSmall,rr as breakPoints,ar as breakSize,er as device};
+`;export{Tr as AuthActions,zr as AuthCap,Rr as AuthCheck,wr as AuthContainer,Dr as AuthForm,yr as AuthLogo,Sr as AuthSecondary,Lr as AuthWrapper,Z as BoxActions,X as BoxContent,V as BoxGrid,W as BoxWrapper,n as CtaButtonLarge,d as CtaButtonNormal,t as CtaButtonSmall,D as DeleteButtonLarge,L as DeleteButtonNormal,w as DeleteButtonSmall,Or as EditList,Fr as EditSelect,Ir as EditTips,jr as EditUploadAvatar,Nr as EditUploadCover,Pr as EditWrapper,K as ErrorValidator,v as FocusButtonLarge,s as FocusButtonNormal,l as FocusButtonSmall,h as FocusPlainButtonLarge,g as FocusPlainButtonNormal,m as FocusPlainButtonSmall,z as GreyButtonLarge,R as GreyButtonNormal,S as GreyButtonSmall,rr as GreyDropdownNormal,N as GreyLinkButtonLarge,P as GreyLinkButtonNormal,T as GreyLinkButtonSmall,E as InputAdd,B as InputGroup,G as InputIcon,O as InputLarge,H as InputMandatory,F as InputNormal,C as InputSearch,I as InputSmall,A as LabelLarge,q as LabelNormal,M as LabelSmall,u as MainButtonLarge,c as MainButtonNormal,p as MainButtonSmall,f as MainPlainButtonLarge,b as MainPlainButtonNormal,k as MainPlainButtonSmall,lr as Navbar,mr as NavbarCta,gr as NavbarList,sr as NavbarLogo,hr as NavbarMobile,vr as NavbarText,fr as PageAlwaysVisible,br as PageForty,xr as PageMobileHidden,pr as PagePaddings,cr as PageSamePaddings,kr as PageSixty,ur as PageTopPaddings,Yr as Slider,Mr as SliderContainer,Ar as SliderTitle,qr as SliderWrapper,Q as SuccessValidator,ir as TextareaLarge,or as TextareaNormal,er as TextareaSmall,$r as Theme,U as TipValidator,y as WhitePlainButtonLarge,$ as WhitePlainButtonNormal,x as WhitePlainButtonSmall,tr as breakPoints,dr as breakSize,nr as device};

package/dist/index.js

@@ -111,7 +111,7 @@
     &:hover{
         background: var(--focusLight);
     }
-`,g=a.default(i)`
+`,m=a.default(i)`
     background: var(--focus);
     border-radius: var(--normalRadius);
     border: 1px solid var(--focus);
@@ -127,7 +127,7 @@
     &:hover{
         background: var(--focusLight);
     }
-`,m=a.default(t)`
+`,g=a.default(t)`
     background: transparent;
     border: 1px solid transparent;
 
@@ -399,7 +399,7 @@
             fill: var(--errorLight)
         }
     }
-`,D=a.default(o)`
+`,S=a.default(o)`
     background: ${r=>"dark"===r.theme?"var(--gloom)":"var(--grey)"};
     border: 1px solid ${r=>"dark"===r.theme?"var(--gloom)":"var(--grey)"};
     border-radius: var(--normalRadius);
@@ -424,7 +424,7 @@
             fill: var(--errorLight)
         }
     }
-`,S=a.default(i)`
+`,D=a.default(i)`
     background: ${r=>"dark"===r.theme?"var(--gloom)":"var(--grey)"};
     border: 1px solid ${r=>"dark"===r.theme?"var(--gloom)":"var(--grey)"};
     border-radius: var(--normalRadius);
@@ -466,7 +466,7 @@
         background: ${r=>"dark"===r.theme?"var(--gloomDark)":"var(--greyLight)"};
         border: 1px solid ${r=>"dark"===r.theme?"var(--gloomDark)":"var(--greyLight)"};
     }
-`,B=a.default(o)`
+`,N=a.default(o)`
     background: ${r=>"dark"===r.theme?"var(--gloom)":"var(--grey)"};
     border: 1px solid ${r=>"dark"===r.theme?"var(--gloom)":"var(--grey)"};
     border-radius: var(--normalRadius);
@@ -483,7 +483,7 @@
         background: ${r=>"dark"===r.theme?"var(--gloomDark)":"var(--greyLight)"};
         border: 1px solid ${r=>"dark"===r.theme?"var(--gloomDark)":"var(--greyLight)"};
     }
-`,N=a.default(i)`
+`,B=a.default(i)`
     background: ${r=>"dark"===r.theme?"var(--gloom)":"var(--grey)"};
     border: 1px solid ${r=>"dark"===r.theme?"var(--gloom)":"var(--grey)"};
     border-radius: var(--normalRadius);
@@ -500,7 +500,7 @@
         background: ${r=>"dark"===r.theme?"var(--gloomDark)":"var(--greyLight)"};
         border: 1px solid ${r=>"dark"===r.theme?"var(--gloomDark)":"var(--greyLight)"};
     }
-`,R=a.default(t)`
+`,T=a.default(t)`
     background: transparent;
     border: 1px solid transparent;
 
@@ -523,7 +523,7 @@
             fill: ${r=>"dark"===r.theme?"var(--gloom)":"var(--grey)"};
         }
     }
-`,T=a.default(o)`
+`,R=a.default(o)`
     background: transparent;
     border: 1px solid transparent;
 
@@ -583,22 +583,22 @@
         outline: 0;
         box-shadow: ${r=>"dark"===r.theme?"var(--insetShineFocus)":"var(--insetShadowFocus)"};
     }
-`,A=a.default(I)`
+`,F=a.default(I)`
     padding: var(--inputSmallPads);
     font-size: var(--inputSmallText);
 `,j=a.default(I)`
     padding: var(--inputNormalPads);
     font-size: var(--inputNormalText);
-`,F=a.default(I)`
+`,A=a.default(I)`
     padding: var(--inputLargePads);
     font-size: var(--inputLargeText);
-`,C=a.default.label`
+`,M=a.default.label`
     color: ${r=>"dark"===r.theme?"var(--blanc)":"var(--black)"};
-`,M=a.default(C)`
+`,C=a.default(M)`
     font-size: var(--inputSmallText);
-`,G=a.default(C)`
+`,G=a.default(M)`
     font-size: var(--inputNormalText);
-`,E=a.default(C)`
+`,E=a.default(M)`
     font-size: var(--inputLargeText);
 `,W=a.default.div`
     position: relative;
@@ -631,7 +631,30 @@
         transition-property: opacity, transform;
         transition-duration: .5s;
     }
-`,V=a.default(W)`
+`,V=a.default.div`
+    position: relative;
+
+    ul{
+        position: absolute;
+        z-index: 5;
+        top: 4rem;
+        left: 0;
+        background: ${r=>"dark"===r.theme?"var(--dark)":"var(--white)"};
+        border-radius: var(--normalRadius);
+        box-shadow: ${r=>"dark"===r.theme?"var(--outShine)":"var(--outShadow)"};
+        width: 100%;
+        overflow: hidden;
+
+        li{
+            padding: var(--smallDist);
+            cursor: pointer;
+
+            &:hover{
+                background: ${r=>"dark"===r.theme?"var(--gloom)":"var(--grey)"};
+            }
+        }
+    }
+`,O=a.default(W)`
     
     aside{
         display: block;
@@ -646,7 +669,7 @@
             display: none;
         }
     }
-`,O=a.default.div`
+`,U=a.default.div`
     position: absolute;
     top: 1.2rem;
     right: 2rem;
@@ -655,7 +678,7 @@
         height: var(--smallText);
         fill: ${r=>"dark"===r.theme?"var(--gloomLight)":"var(--greyDark)"};
     }
-`,U=a.default.div`
+`,Y=a.default.div`
     position: absolute;
     top: 1.2rem;
     right: 2rem;
@@ -664,12 +687,12 @@
         height: var(--smallText);
         fill: var(--error);
     }
-`,Y=a.default.div`
+`,_=a.default.div`
     display: flex;
     align-items: center;
     gap: 1rem;
     margin: var(--tinyDist);
-`,_=a.default(Y)`
+`,q=a.default(_)`
     
     svg{
         width: var(--smallIcon);
@@ -679,7 +702,7 @@
     h6{
         color: var(--error);
     }
-`,q=a.default(Y)`
+`,H=a.default(_)`
     
     svg{
         width: var(--smallIcon);
@@ -689,7 +712,7 @@
     h6{
         color: var(--success);
     }
-`,H=a.default(Y)`
+`,J=a.default(_)`
     
     svg{
         width: var(--smallIcon);
@@ -699,11 +722,11 @@
     h6{
         color: var(--greyDark);
     }
-`,J=a.default.div`
+`,K=a.default.div`
     display: grid;
     grid-template-columns: repeat(${r=>r.columns}, 1fr);
     grid-gap: 2rem;
-`,K=a.default.div`
+`,Q=a.default.div`
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -718,13 +741,13 @@
     &:hover{
         box-shadow: ${r=>"dark"===r.theme?"var(--outShineFocus)":"var(--outShadowFocus)"};
     }
-`,Q=a.default.div`
-
 `,X=a.default.div`
+
+`,Z=a.default.div`
     display: flex;
     align-items: center;
     gap: 1rem;
-`,Z=a.default.form`
+`,rr=a.default.form`
     position: relative;
 
     select{
@@ -743,7 +766,7 @@
         pointer-events: none;
     }
 
-`,rr=a.default(Z)`
+`,ar=a.default(rr)`
     select{
         padding: var(--buttonNormalPads);
         font-size: var(--buttonNormalText);
@@ -759,7 +782,7 @@
     svg{
         height: var(--buttonNormalIcon);
     }
-`,ar=a.default(rr)`
+`,er=a.default(ar)`
     select{
         color: ${r=>"dark"===r.theme?"var(--blanc);":"var(--black);"};
         background: ${r=>"dark"===r.theme?"var(--gloomDark);":"var(--greyLight);"};
@@ -769,7 +792,31 @@
     svg{
         fill: ${r=>"dark"===r.theme?"var(--blanc);":"var(--black);"};
     }
-`,er={xs:576,sm:768,md:992,lg:1200,xl:1440,wd:1800},tr={xs:`${er.xs}px`,sm:`${er.sm}px`,md:`${er.md}px`,lg:`${er.ls}px`,xl:`${er.xl}px`,wd:`${er.wd}px`},or={xs:`(max-width: ${tr.xs})`,sm:`(max-width: ${tr.sm})`,md:`(max-width: ${tr.md})`,lg:`(max-width: ${tr.lg})`,xl:`(max-width: ${tr.xl})`,wd:`(max-width: ${tr.wd})`},ir=a.default.nav`
+`,tr=a.default.textarea`
+    width: 100%;
+    border: none;
+    background: ${r=>"dark"===r.theme?"var(--dark)":"var(--white)"};
+    color: ${r=>"dark"===r.theme?"var(--blanc)":"var(--black)"};
+    box-shadow: ${r=>"dark"===r.theme?"var(--insetShine)":"var(--insetShadow)"};
+    border-radius: var(--normalRadius);
+    transition-property: box-shadow;
+    transition-duration: .5s;
+    resize: none;
+
+    &:focus{
+        outline: 0;
+        box-shadow: ${r=>"dark"===r.theme?"var(--insetShineFocus)":"var(--insetShadowFocus)"};
+    }
+`,or=a.default(tr)`
+    padding: var(--inputSmallPads);
+    font-size: var(--inputSmallText);
+`,ir=a.default(tr)`
+    padding: var(--inputNormalPads);
+    font-size: var(--inputNormalText);
+`,dr=a.default(tr)`
+    padding: var(--inputLargePads);
+    font-size: var(--inputLargeText);
+`,lr={xs:576,sm:768,md:992,lg:1200,xl:1440,wd:1800},nr={xs:`${lr.xs}px`,sm:`${lr.sm}px`,md:`${lr.md}px`,lg:`${lr.ls}px`,xl:`${lr.xl}px`,wd:`${lr.wd}px`},sr={xs:`(max-width: ${nr.xs})`,sm:`(max-width: ${nr.sm})`,md:`(max-width: ${nr.md})`,lg:`(max-width: ${nr.lg})`,xl:`(max-width: ${nr.xl})`,wd:`(max-width: ${nr.wd})`},vr=a.default.nav`
     display: grid;
     align-items: center;
     grid-gap: 1rem;
@@ -782,7 +829,7 @@
     padding: 1rem 4rem;
     background: ${r=>"dark"===r.theme?"var(--dark)":"var(--white)"};
     box-shadow: ${r=>"dark"===r.theme?"0 1px 3px var(--shine)":"0 1px 3px var(--shadow)"};
-`,dr=a.default.div`
+`,mr=a.default.div`
     display: flex;
     gap: 1rem;
     align-items: center;
@@ -807,7 +854,7 @@
             transform: rotate(55deg);
         }
     }
-`,lr=a.default.div`
+`,gr=a.default.div`
 
     h6{
         color: var(--focus) !important;
@@ -816,75 +863,100 @@
         font-weight: 600;
     }
 
-    @media ${or.md} {
+    @media ${sr.md} {
         display: none;
     }
-`,nr=a.default.div`
+`,pr=a.default.div`
     justify-self: center;
 
-    @media ${or.sm} {
+    @media ${sr.sm} {
         justify-self: flex-end;
     }
-`,sr=a.default.div`
+`,ur=a.default.div`
     justify-self: flex-end;
     display: flex;
     align-items: center;
     gap: 1rem;
 
-    @media ${or.sm} {
+    @media ${sr.sm} {
         display: none;
     }
-`,vr=a.default.div`
+`,hr=a.default.div`
+    justify-self: flex-end;
+    display: none;
+    align-items: center;
+    gap: 1rem;
+
+    @media ${sr.sm} {
+        display: flex;
+    }
+`,cr=a.default.div`
     padding: 7rem 4rem 2rem 4rem;
-`,gr=a.default.div`
+`,fr=a.default.div`
     padding-top: 2rem 4rem;
-`,mr=a.default.div`
+`,kr=a.default.div`
     padding-top: 7rem;
-`,pr=a.default.div`
+`,xr=a.default.div`
     display: grid;
     grid-template-columns: calc(60% - 4rem) 40%;
     grid-gap: 4rem;
     align-items: flex-start;
 
-    @media ${or.md} {
+    @media ${sr.md} {
         grid-template-columns: 1fr;
     }
-`,ur=a.default.div`
+`,br=a.default.div`
     display: grid;
     grid-template-columns: 40% calc(60% - 4rem);
     grid-gap: 4rem;
     align-items: flex-start;
 
-    @media ${or.md} {
+    @media ${sr.md} {
         grid-template-columns: 1fr;
     }
-`,hr=a.default.div`
+`,yr=a.default.div`
     width: 100%;
-`,cr=a.default.div`
+`,$r=a.default.div`
     width: 100%;
 
-    @media ${or.md} {
+    @media ${sr.md} {
         display: none;
     }
-`,fr=a.default.div`
+`,wr=a.default.div`
+    background: ${r=>"dark"===r.theme?"var(--dark)":"var(--white)"};
+    transition-property: background;
+    transition-duration: .5s;
+    height: 100%;
+    min-height: calc(100vh);
+    width: 100%;
+
+    html{
+        color: ${r=>"dark"===r.theme?"var(--blanc)":"var(--black)"};
+    }
+
+    h1,h2,h3,h4,h5,h6,p{
+        color: ${r=>"dark"===r.theme?"var(--blanc)":"var(--black)"};
+        transition: color .5s;
+    }
+`,Lr=a.default.div`
     
     img{
         height: 4rem;
     }
-`,kr=a.default.div`
+`,Sr=a.default.div`
     max-width: 45rem;
-`,xr=a.default.div`
+`,Dr=a.default.div`
     max-width: 45rem;
 
     h1{
         margin: var(--smallDist);
     }
-`,br=a.default.form`
+`,Pr=a.default.form`
     padding: var(--normalDist);
     background: ${r=>"dark"===r.theme?"var(--gloomDark)":"var(--greyLight)"};
     border-radius: var(--normalRadius);
     box-shadow: ${r=>"dark"===r.theme?"var(--outShine)":"var(--outShadow)"};
-`,yr=a.default.div`
+`,Nr=a.default.div`
     display: flex;
     gap: 1rem;
     align-items: center;
@@ -896,7 +968,7 @@
         gap: .5rem;
         align-items: center;
     }
-`,$r=a.default.div`
+`,Br=a.default.div`
     display: flex;
     align-items: flex-start;
     gap: 1rem;
@@ -904,17 +976,17 @@
     input{
         margin-top: .3rem;
     }
-`,wr=a.default.div`
+`,Tr=a.default.div`
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-gap: 1rem;
     margin: 2rem 1rem;
-`,Lr=a.default.div`
+`,Rr=a.default.div`
     display: flex;
     align-items: center;
     justify-content: center;
     margin-top: 4rem;
-`,Dr=a.default.div`
+`,zr=a.default.div`
     
     section{
 
@@ -922,7 +994,7 @@
             margin-bottom: 2rem;
         }
     }
-`,Sr=a.default.div`
+`,Ir=a.default.div`
     
     picture{
         width: 100%;
@@ -943,7 +1015,7 @@
         display: flex;
         gap: 1rem;
     }
-`,Pr=a.default.div`
+`,Fr=a.default.div`
     display: grid;
     grid-template-columns: 20rem 1fr;
     grid-gap: 2rem;
@@ -968,7 +1040,7 @@
         flex-direction: column;
         gap: 1rem;
     }
-`,Br=a.default.ul`
+`,jr=a.default.ul`
     background: ${r=>"dark"===r.theme?"var(--gloomDark)":"var(--greyLight)"};
     padding: var(--smallDist);
     border-radius: var(--smallRadius);
@@ -993,30 +1065,7 @@
     li{
         margin-top: .5rem;
     }
-`,Nr=a.default.div`
-    position: relative;
-
-    ul{
-        position: absolute;
-        z-index: 5;
-        top: 4rem;
-        left: 0;
-        background: ${r=>"dark"===r.theme?"var(--dark)":"var(--white)"};
-        border-radius: var(--normalRadius);
-        box-shadow: ${r=>"dark"===r.theme?"var(--outShine)":"var(--outShadow)"};
-        width: 100%;
-        overflow: hidden;
-
-        li{
-            padding: var(--smallDist);
-            cursor: pointer;
-
-            &:hover{
-                background: ${r=>"dark"===r.theme?"var(--gloom)":"var(--grey)"};
-            }
-        }
-    }
-`,Rr=a.default.div`
+`,Ar=a.default.div`
     display: grid;
     grid-template-columns: auto 1fr;
     align-items: flex-start;
@@ -1026,9 +1075,23 @@
     form{
         margin-top: 4rem;
     }
-`,Tr=a.default.ul`
+`,Mr=a.default.div`
+    padding: var(--smallDist);
 
-`,zr=a.default.div`
+    ul{
+        margin-top: 1rem;
+
+        li{
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+
+            svg{
+                width: var(--smallText);
+            }
+        }
+    }
+`,Cr=a.default.div`
     position: fixed;
     top: 0;
     left: 0;
@@ -1036,7 +1099,7 @@
     height: 100vh;
     width: 100%;
     background: ${r=>"dark"===r.theme?"var(--blancOverlay)":"var(--blackOverlay)"};
-`,Ir=a.default.div`
+`,Gr=a.default.div`
     position: fixed;
     right: 0;
     z-index: 501;
@@ -1046,18 +1109,18 @@
     background: ${r=>"dark"===r.theme?"var(--dark)":"var(--white)"};
     box-shadow: ${r=>"dark"===r.theme?"var(--sliderShine)":"var(--sliderShadow)"};
 
-    @media ${or.md} {
+    @media ${sr.md} {
         width: calc(80% + 8rem);
     }
 
-    @media ${or.sm} {
+    @media ${sr.sm} {
         width: 100%;
     }
-`,Ar=a.default.div`
+`,Er=a.default.div`
     max-height: calc(100vh - 9rem);
     overflow-x: hidden;
     overflow-y: auto;
-`,jr=a.default.div`
+`,Wr=a.default.div`
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -1065,11 +1128,11 @@
     padding: var(--smallDist);
     background-color: ${r=>"dark"===r.theme?"var(--gloomDark)":"var(--greyLight)"};
 
-    @media ${or.sm} {
+    @media ${sr.sm} {
         justify-content: flex-end;
 
         h3{
             display: none;
         }
     }
-`;exports.AuthActions=Lr,exports.AuthCap=wr,exports.AuthCheck=$r,exports.AuthContainer=kr,exports.AuthForm=br,exports.AuthLogo=fr,exports.AuthSecondary=yr,exports.AuthWrapper=xr,exports.BoxActions=X,exports.BoxContent=Q,exports.BoxGrid=J,exports.BoxWrapper=K,exports.CtaButtonLarge=n,exports.CtaButtonNormal=l,exports.CtaButtonSmall=d,exports.DeleteButtonLarge=S,exports.DeleteButtonNormal=D,exports.DeleteButtonSmall=L,exports.EditList=Tr,exports.EditSearch=Nr,exports.EditSelect=Rr,exports.EditTips=Br,exports.EditUploadAvatar=Pr,exports.EditUploadCover=Sr,exports.EditWrapper=Dr,exports.ErrorValidator=_,exports.FocusButtonLarge=g,exports.FocusButtonNormal=v,exports.FocusButtonSmall=s,exports.FocusPlainButtonLarge=u,exports.FocusPlainButtonNormal=p,exports.FocusPlainButtonSmall=m,exports.GreyButtonLarge=N,exports.GreyButtonNormal=B,exports.GreyButtonSmall=P,exports.GreyDropdownNormal=ar,exports.GreyLinkButtonLarge=z,exports.GreyLinkButtonNormal=T,exports.GreyLinkButtonSmall=R,exports.InputAdd=V,exports.InputGroup=W,exports.InputIcon=O,exports.InputLarge=F,exports.InputMandatory=U,exports.InputNormal=j,exports.InputSmall=A,exports.LabelLarge=E,exports.LabelNormal=G,exports.LabelSmall=M,exports.MainButtonLarge=f,exports.MainButtonNormal=c,exports.MainButtonSmall=h,exports.MainPlainButtonLarge=b,exports.MainPlainButtonNormal=x,exports.MainPlainButtonSmall=k,exports.Navbar=ir,exports.NavbarCta=nr,exports.NavbarList=sr,exports.NavbarLogo=dr,exports.NavbarText=lr,exports.PageAlwaysVisible=hr,exports.PageForty=ur,exports.PageMobileHidden=cr,exports.PagePaddings=vr,exports.PageSamePaddings=gr,exports.PageSixty=pr,exports.PageTopPaddings=mr,exports.Slider=zr,exports.SliderContainer=Ir,exports.SliderTitle=jr,exports.SliderWrapper=Ar,exports.SuccessValidator=q,exports.TipValidator=H,exports.WhitePlainButtonLarge=w,exports.WhitePlainButtonNormal=$,exports.WhitePlainButtonSmall=y,exports.breakPoints=er,exports.breakSize=tr,exports.device=or;
+`;exports.AuthActions=Rr,exports.AuthCap=Tr,exports.AuthCheck=Br,exports.AuthContainer=Sr,exports.AuthForm=Pr,exports.AuthLogo=Lr,exports.AuthSecondary=Nr,exports.AuthWrapper=Dr,exports.BoxActions=Z,exports.BoxContent=X,exports.BoxGrid=K,exports.BoxWrapper=Q,exports.CtaButtonLarge=n,exports.CtaButtonNormal=l,exports.CtaButtonSmall=d,exports.DeleteButtonLarge=D,exports.DeleteButtonNormal=S,exports.DeleteButtonSmall=L,exports.EditList=Mr,exports.EditSelect=Ar,exports.EditTips=jr,exports.EditUploadAvatar=Fr,exports.EditUploadCover=Ir,exports.EditWrapper=zr,exports.ErrorValidator=q,exports.FocusButtonLarge=m,exports.FocusButtonNormal=v,exports.FocusButtonSmall=s,exports.FocusPlainButtonLarge=u,exports.FocusPlainButtonNormal=p,exports.FocusPlainButtonSmall=g,exports.GreyButtonLarge=B,exports.GreyButtonNormal=N,exports.GreyButtonSmall=P,exports.GreyDropdownNormal=er,exports.GreyLinkButtonLarge=z,exports.GreyLinkButtonNormal=R,exports.GreyLinkButtonSmall=T,exports.InputAdd=O,exports.InputGroup=W,exports.InputIcon=U,exports.InputLarge=A,exports.InputMandatory=Y,exports.InputNormal=j,exports.InputSearch=V,exports.InputSmall=F,exports.LabelLarge=E,exports.LabelNormal=G,exports.LabelSmall=C,exports.MainButtonLarge=f,exports.MainButtonNormal=c,exports.MainButtonSmall=h,exports.MainPlainButtonLarge=b,exports.MainPlainButtonNormal=x,exports.MainPlainButtonSmall=k,exports.Navbar=vr,exports.NavbarCta=pr,exports.NavbarList=ur,exports.NavbarLogo=mr,exports.NavbarMobile=hr,exports.NavbarText=gr,exports.PageAlwaysVisible=yr,exports.PageForty=br,exports.PageMobileHidden=$r,exports.PagePaddings=cr,exports.PageSamePaddings=fr,exports.PageSixty=xr,exports.PageTopPaddings=kr,exports.Slider=Cr,exports.SliderContainer=Gr,exports.SliderTitle=Wr,exports.SliderWrapper=Er,exports.SuccessValidator=H,exports.TextareaLarge=dr,exports.TextareaNormal=ir,exports.TextareaSmall=or,exports.Theme=wr,exports.TipValidator=J,exports.WhitePlainButtonLarge=w,exports.WhitePlainButtonNormal=$,exports.WhitePlainButtonSmall=y,exports.breakPoints=lr,exports.breakSize=nr,exports.device=sr;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "monica-alexandria",
-  "version": "2.3.0",
+  "version": "2.5.1",
   "description": "A styled-components styles library for Doitforme platorm and universal tweeks to create your own new styled library for your project",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/src/components/elements/Input.jsx

@@ -80,6 +80,31 @@ const InputGroup = styled.div`
     }
 `
 
+const InputSearch = styled.div`
+    position: relative;
+
+    ul{
+        position: absolute;
+        z-index: 5;
+        top: 4rem;
+        left: 0;
+        background: ${props => props.theme === 'dark' ? 'var(--dark)' : 'var(--white)'};
+        border-radius: var(--normalRadius);
+        box-shadow: ${props => props.theme === 'dark' ? 'var(--outShine)' : 'var(--outShadow)'};
+        width: 100%;
+        overflow: hidden;
+
+        li{
+            padding: var(--smallDist);
+            cursor: pointer;
+
+            &:hover{
+                background: ${props => props.theme === 'dark' ? 'var(--gloom)' : 'var(--grey)'};
+            }
+        }
+    }
+`
+
 const InputAdd = styled(InputGroup)`
     
     aside{
@@ -126,6 +151,7 @@ export {
     LabelSmall,
     LabelNormal,
     LabelLarge,
+    InputSearch,
     InputGroup,
     InputAdd,
     InputMandatory,

package/src/components/elements/Textarea.jsx

@@ -0,0 +1,39 @@
+import styled from "styled-components";
+
+const Textarea = styled.textarea`
+    width: 100%;
+    border: none;
+    background: ${props => props.theme === 'dark' ? "var(--dark)" : "var(--white)"};
+    color: ${props => props.theme === 'dark' ? "var(--blanc)" : "var(--black)"};
+    box-shadow: ${props => props.theme === 'dark' ? "var(--insetShine)" : "var(--insetShadow)"};
+    border-radius: var(--normalRadius);
+    transition-property: box-shadow;
+    transition-duration: .5s;
+    resize: none;
+
+    &:focus{
+        outline: 0;
+        box-shadow: ${props => props.theme === 'dark' ? "var(--insetShineFocus)" : "var(--insetShadowFocus)"};
+    }
+`
+
+const TextareaSmall = styled(Textarea)`
+    padding: var(--inputSmallPads);
+    font-size: var(--inputSmallText);
+`
+
+const TextareaNormal = styled(Textarea)`
+    padding: var(--inputNormalPads);
+    font-size: var(--inputNormalText);
+`
+
+const TextareaLarge = styled(Textarea)`
+    padding: var(--inputLargePads);
+    font-size: var(--inputLargeText);
+`
+
+export{
+    TextareaSmall,
+    TextareaNormal,
+    TextareaLarge
+}

package/src/components/elements/index.js

@@ -3,3 +3,4 @@ export * from './Input.jsx';
 export * from './Validators.jsx';
 export * from './Box.jsx';
 export * from './Dropdown.jsx';
+export * from './Textarea.jsx'

package/src/components/form/Edit.jsx

@@ -87,31 +87,6 @@ const EditTips = styled.ul`
     }
 `
 
-const EditSearch = styled.div`
-    position: relative;
-
-    ul{
-        position: absolute;
-        z-index: 5;
-        top: 4rem;
-        left: 0;
-        background: ${props => props.theme === 'dark' ? 'var(--dark)' : 'var(--white)'};
-        border-radius: var(--normalRadius);
-        box-shadow: ${props => props.theme === 'dark' ? 'var(--outShine)' : 'var(--outShadow)'};
-        width: 100%;
-        overflow: hidden;
-
-        li{
-            padding: var(--smallDist);
-            cursor: pointer;
-
-            &:hover{
-                background: ${props => props.theme === 'dark' ? 'var(--gloom)' : 'var(--grey)'};
-            }
-        }
-    }
-`
-
 const EditSelect = styled.div`
     display: grid;
     grid-template-columns: auto 1fr;
@@ -124,8 +99,22 @@ const EditSelect = styled.div`
     }
 `
 
-const EditList = styled.ul`
+const EditList = styled.div`
+    padding: var(--smallDist);
+
+    ul{
+        margin-top: 1rem;
+
+        li{
+            display: flex;
+            align-items: center;
+            gap: 1rem;
 
+            svg{
+                width: var(--smallText);
+            }
+        }
+    }
 `
 
 export {
@@ -133,7 +122,6 @@ export {
     EditUploadCover,
     EditUploadAvatar,
     EditTips,
-    EditSearch,
     EditSelect,
     EditList
 }

package/src/components/layout/Theme.jsx

@@ -0,0 +1,23 @@
+import styled from "styled-components";
+
+const Theme = styled.div`
+    background: ${props => props.theme === 'dark' ? 'var(--dark)' : 'var(--white)'};
+    transition-property: background;
+    transition-duration: .5s;
+    height: 100%;
+    min-height: calc(100vh);
+    width: 100%;
+
+    html{
+        color: ${props => props.theme === 'dark' ? "var(--blanc)" : "var(--black)"};
+    }
+
+    h1,h2,h3,h4,h5,h6,p{
+        color: ${props => props.theme === 'dark' ? "var(--blanc)" : "var(--black)"};
+        transition: color .5s;
+    }
+`
+
+export {
+    Theme
+}

package/src/components/layout/index.js

@@ -1 +1,2 @@
-export * from './Layout.jsx';
+export * from './Layout.jsx';
+export * from './Theme.jsx';

package/src/components/navbar/Navbar.jsx

@@ -77,10 +77,22 @@ const NavbarList = styled.div`
     }
 `
 
+const NavbarMobile = styled.div`
+    justify-self: flex-end;
+    display: none;
+    align-items: center;
+    gap: 1rem;
+
+    @media ${device.sm} {
+        display: flex;
+    }
+`
+
 export{
     Navbar,
     NavbarLogo,
     NavbarText,
     NavbarCta,
-    NavbarList
+    NavbarList,
+    NavbarMobile
 }