monica-alexandria 1.6.0 → 2.2.0

package/dist/index.es.js

@@ -226,7 +226,7 @@ import r from"styled-components";const a=r.button`
     &:hover{
         background: var(--mainLight);
     }
-`,k=r(i)`
+`,u=r(i)`
     background: var(--main);
     border-radius: var(--normalRadius);
     border: 1px solid var(--main);
@@ -242,7 +242,7 @@ import r from"styled-components";const a=r.button`
     &:hover{
         background: var(--mainLight);
     }
-`,u=r(e)`
+`,k=r(e)`
     background: transparent;
     border: 1px solid transparent;
 
@@ -380,22 +380,80 @@ import r from"styled-components";const a=r.button`
     border-radius: var(--normalRadius);
 
     span{
-        color: ${r=>"dark"===r.theme?"var(--blanc)":"var(--black)"};
+        color: var(--error)
     }
 
     svg{
-        fill: ${r=>"dark"===r.theme?"var(--blanc)":"var(--black)"};
+        fill: var(--error)
     }
 
     &:hover{
         background: ${r=>"dark"===r.theme?"var(--gloomDark)":"var(--greyLight)"};
         border: 1px solid ${r=>"dark"===r.theme?"var(--gloomDark)":"var(--greyLight)"};
+
+        span{
+            color: var(--errorLight)
+        }
+
+        svg{
+            fill: var(--errorLight)
+        }
     }
 `,L=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);
 
+    span{
+        color: var(--error)
+    }
+
+    svg{
+        fill: var(--error)
+    }
+
+    &:hover{
+        background: ${r=>"dark"===r.theme?"var(--gloomDark)":"var(--greyLight)"};
+        border: 1px solid ${r=>"dark"===r.theme?"var(--gloomDark)":"var(--greyLight)"};
+
+        span{
+            color: var(--errorLight)
+        }
+
+        svg{
+            fill: var(--errorLight)
+        }
+    }
+`,D=r(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);
+
+    span{
+        color: var(--error)
+    }
+
+    svg{
+        fill: var(--error)
+    }
+
+    &:hover{
+        background: ${r=>"dark"===r.theme?"var(--gloomDark)":"var(--greyLight)"};
+        border: 1px solid ${r=>"dark"===r.theme?"var(--gloomDark)":"var(--greyLight)"};
+
+        span{
+            color: var(--errorLight)
+        }
+
+        svg{
+            fill: var(--errorLight)
+        }
+    }
+`,R=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);
+
     span{
         color: ${r=>"dark"===r.theme?"var(--blanc)":"var(--black)"};
     }
@@ -408,7 +466,24 @@ 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)"};
     }
-`,D=r(i)`
+`,S=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);
+
+    span{
+        color: ${r=>"dark"===r.theme?"var(--red)":"var(--black)"};
+    }
+
+    svg{
+        fill: ${r=>"dark"===r.theme?"var(--blanc)":"var(--black)"};
+    }
+
+    &:hover{
+        background: ${r=>"dark"===r.theme?"var(--gloomDark)":"var(--greyLight)"};
+        border: 1px solid ${r=>"dark"===r.theme?"var(--gloomDark)":"var(--greyLight)"};
+    }
+`,z=r(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);
@@ -425,7 +500,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)"};
     }
-`,R=r(e)`
+`,j=r(e)`
     background: transparent;
     border: 1px solid transparent;
 
@@ -448,7 +523,7 @@ import r from"styled-components";const a=r.button`
             fill: ${r=>"dark"===r.theme?"var(--gloom)":"var(--grey)"};
         }
     }
-`,S=r(o)`
+`,P=r(o)`
     background: transparent;
     border: 1px solid transparent;
 
@@ -471,7 +546,7 @@ import r from"styled-components";const a=r.button`
             fill: ${r=>"dark"===r.theme?"var(--gloom)":"var(--grey)"};
         }
     }
-`,z=r(i)`
+`,T=r(i)`
     background: transparent;
     border: 1px solid transparent;
 
@@ -494,7 +569,7 @@ import r from"styled-components";const a=r.button`
             fill: ${r=>"dark"===r.theme?"var(--gloom)":"var(--grey)"};
         }
     }
-`,P=r.input`
+`,I=r.input`
     width: 100%;
     border: none;
     background: ${r=>"dark"===r.theme?"var(--dark)":"var(--white)"};
@@ -508,24 +583,24 @@ import r from"styled-components";const a=r.button`
         outline: 0;
         box-shadow: ${r=>"dark"===r.theme?"var(--insetShineFocus)":"var(--insetShadowFocus)"};
     }
-`,T=r(P)`
+`,N=r(I)`
     padding: var(--inputSmallPads);
     font-size: var(--inputSmallText);
-`,j=r(P)`
+`,F=r(I)`
     padding: var(--inputNormalPads);
     font-size: var(--inputNormalText);
-`,I=r(P)`
+`,O=r(I)`
     padding: var(--inputLargePads);
     font-size: var(--inputLargeText);
-`,N=r.label`
+`,Y=r.label`
     color: ${r=>"dark"===r.theme?"var(--blanc)":"var(--black)"};
-`,F=r(N)`
+`,M=r(Y)`
     font-size: var(--inputSmallText);
-`,O=r(N)`
+`,q=r(Y)`
     font-size: var(--inputNormalText);
-`,Y=r(N)`
+`,A=r(Y)`
     font-size: var(--inputLargeText);
-`,M=r.div`
+`,B=r.div`
     position: relative;
     margin-top: 4rem;
 
@@ -548,12 +623,12 @@ import r from"styled-components";const a=r.button`
         transition-property: opacity, transform;
         transition-duration: .5s;
     }
-`,q=r.div`
+`,C=r.div`
     display: flex;
     align-items: center;
     gap: 1rem;
     margin: var(--tinyDist);
-`,A=r(q)`
+`,E=r(C)`
     
     svg{
         width: var(--smallIcon);
@@ -563,7 +638,7 @@ import r from"styled-components";const a=r.button`
     h6{
         color: var(--error);
     }
-`,B=r(q)`
+`,G=r(C)`
     
     svg{
         width: var(--smallIcon);
@@ -573,7 +648,7 @@ import r from"styled-components";const a=r.button`
     h6{
         color: var(--success);
     }
-`,C=r(q)`
+`,H=r(C)`
     
     svg{
         width: var(--smallIcon);
@@ -583,7 +658,32 @@ import r from"styled-components";const a=r.button`
     h6{
         color: var(--greyDark);
     }
-`,E={xs:576,sm:768,md:992,lg:1200,xl:1440,wd:1800},G={xs:`${E.xs}px`,sm:`${E.sm}px`,md:`${E.md}px`,lg:`${E.ls}px`,xl:`${E.xl}px`,wd:`${E.wd}px`},H={xs:`(max-width: ${G.xs})`,sm:`(max-width: ${G.sm})`,md:`(max-width: ${G.md})`,lg:`(max-width: ${G.lg})`,xl:`(max-width: ${G.xl})`,wd:`(max-width: ${G.wd})`},J=r.nav`
+`,J=r.div`
+    display: grid;
+    grid-template-columns: repeat(${r=>r.columns}, 1fr);
+    grid-gap: 2rem;
+`,K=r.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: 2rem;
+    border-radius: var(--normalRadius);
+    padding: var(--normalDist);
+    cursor: pointer;
+    box-shadow: ${r=>"dark"===r.theme?"var(--outShine)":"var(--outShadow)"};
+    transition-property: box-shadow, transform;
+    transition-duration: .5s;
+
+    &:hover{
+        box-shadow: ${r=>"dark"===r.theme?"var(--outShineFocus)":"var(--outShadowFocus)"};
+    }
+`,Q=r.div`
+
+`,U=r.div`
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+`,V={xs:576,sm:768,md:992,lg:1200,xl:1440,wd:1800},W={xs:`${V.xs}px`,sm:`${V.sm}px`,md:`${V.md}px`,lg:`${V.ls}px`,xl:`${V.xl}px`,wd:`${V.wd}px`},X={xs:`(max-width: ${W.xs})`,sm:`(max-width: ${W.sm})`,md:`(max-width: ${W.md})`,lg:`(max-width: ${W.lg})`,xl:`(max-width: ${W.xl})`,wd:`(max-width: ${W.wd})`},Z=r.nav`
     display: grid;
     align-items: center;
     grid-gap: 1rem;
@@ -596,7 +696,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)"};
-`,K=r.div`
+`,_=r.div`
     display: flex;
     gap: 1rem;
     align-items: center;
@@ -621,7 +721,7 @@ import r from"styled-components";const a=r.button`
             transform: rotate(55deg);
         }
     }
-`,Q=r.div`
+`,rr=r.div`
 
     h6{
         color: var(--focus) !important;
@@ -630,78 +730,134 @@ import r from"styled-components";const a=r.button`
         font-weight: 600;
     }
 
-    @media ${H.md} {
+    @media ${X.md} {
         display: none;
     }
-`,U=r.div`
+`,ar=r.div`
     justify-self: center;
 
-    @media ${H.sm} {
+    @media ${X.sm} {
         justify-self: flex-end;
     }
-`,V=r.div`
+`,er=r.div`
     justify-self: flex-end;
     display: flex;
     align-items: center;
     gap: 1rem;
 
-    @media ${H.sm} {
+    @media ${X.sm} {
         display: none;
     }
-`,W=r.div`
+`,or=r.div`
     padding: 7rem 4rem 2rem 4rem;
-`,X=r.div`
+`,ir=r.div`
     padding-top: 2rem 4rem;
-`,Z=r.div`
+`,tr=r.div`
     padding-top: 7rem;
-`,_=r.div`
+`,dr=r.div`
     display: grid;
     grid-template-columns: calc(60% - 4rem) 40%;
     grid-gap: 4rem;
     align-items: flex-start;
 
-    @media ${H.md} {
+    @media ${X.md} {
         grid-template-columns: 1fr;
     }
-`,rr=r.div`
+`,nr=r.div`
     display: grid;
     grid-template-columns: 40% calc(60% - 4rem);
     grid-gap: 4rem;
     align-items: flex-start;
 
-    @media ${H.md} {
+    @media ${X.md} {
         grid-template-columns: 1fr;
     }
-`,ar=r.div`
+`,lr=r.div`
     width: 100%;
-`,er=r.div`
+`,vr=r.div`
     width: 100%;
 
-    @media ${H.md} {
+    @media ${X.md} {
         display: none;
     }
-`,or=r.div`
+`,sr=r.div`
     
     img{
         height: 4rem;
     }
-`,ir=r.div`
+`,gr=r.div`
     max-width: 45rem;
 
     h1{
         margin: var(--smallDist);
     }
-`,tr=r.form`
+`,mr=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)"};
-`,dr=r.div`
+`,hr=r.div`
     display: flex;
     align-items: center;
     justify-content: center;
     margin-top: 4rem;
-`,nr=r.div`
+`,cr=r.div`
+    
+    section{
+
+        h3{
+            margin-bottom: 2rem;
+        }
+    }
+`,pr=r.div`
+    
+    picture{
+        width: 100%;
+        height: 25rem;
+        display: block;
+        overflow: hidden;
+        border-radius: var(--normalRadius);
+
+        img{
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+    }
+
+    ul{
+        margin-top: 1rem;
+        display: flex;
+        gap: 1rem;
+    }
+`,ur=r.div`
+    display: grid;
+    grid-template-columns: 20rem 1fr;
+    grid-gap: 2rem;
+    
+    picture{
+        width: 100%;
+        height: 20rem;
+        display: block;
+        overflow: hidden;
+        border-radius: 50%;
+
+        img{
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+    }
+
+    ul{
+        margin-top: 1rem;
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+`;r.ul`
+    
+`;const kr=r.div`
     position: fixed;
     top: 0;
     left: 0;
@@ -709,7 +865,7 @@ import r from"styled-components";const a=r.button`
     height: 100vh;
     width: 100%;
     background: ${r=>"dark"===r.theme?"var(--blancOverlay)":"var(--blackOverlay)"};
-`,lr=r.div`
+`,br=r.div`
     position: fixed;
     right: 0;
     z-index: 501;
@@ -719,18 +875,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 ${H.md} {
+    @media ${X.md} {
         width: calc(80% + 8rem);
     }
 
-    @media ${H.sm} {
+    @media ${X.sm} {
         width: 100%;
     }
-`,vr=r.div`
+`,fr=r.div`
     max-height: calc(100vh - 9rem);
     overflow-x: hidden;
     overflow-y: auto;
-`,sr=r.div`
+`,xr=r.div`
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -738,11 +894,11 @@ import r from"styled-components";const a=r.button`
     padding: var(--smallDist);
     background-color: ${r=>"dark"===r.theme?"var(--gloomDark)":"var(--greyLight)"};
 
-    @media ${H.sm} {
+    @media ${X.sm} {
         justify-content: flex-end;
 
         h3{
             display: none;
         }
     }
-`;export{dr as AuthActions,tr as AuthForm,or as AuthLogo,ir as AuthWrapper,n as CtaButtonLarge,d as CtaButtonNormal,t as CtaButtonSmall,A as ErrorValidator,s as FocusButtonLarge,v as FocusButtonNormal,l as FocusButtonSmall,h as FocusPlainButtonLarge,m as FocusPlainButtonNormal,g as FocusPlainButtonSmall,D as GreyButtonLarge,L as GreyButtonNormal,w as GreyButtonSmall,z as GreyLinkButtonLarge,S as GreyLinkButtonNormal,R as GreyLinkButtonSmall,M as InputGroup,I as InputLarge,j as InputNormal,T as InputSmall,Y as LabelLarge,O as LabelNormal,F as LabelSmall,k as MainButtonLarge,p as MainButtonNormal,c as MainButtonSmall,f as MainPlainButtonLarge,b as MainPlainButtonNormal,u as MainPlainButtonSmall,J as Navbar,U as NavbarCta,V as NavbarList,K as NavbarLogo,Q as NavbarText,ar as PageAlwaysVisible,rr as PageForty,er as PageMobileHidden,W as PagePaddings,X as PageSamePaddings,_ as PageSixty,Z as PageTopPaddings,nr as Slider,lr as SliderContainer,sr as SliderTitle,vr as SliderWrapper,B as SuccessValidator,C as TipValidator,y as WhitePlainButtonLarge,$ as WhitePlainButtonNormal,x as WhitePlainButtonSmall,E as breakPoints,G as breakSize,H as device};
+`;export{hr as AuthActions,mr as AuthForm,sr as AuthLogo,gr as AuthWrapper,U as BoxActions,Q as BoxContent,J as BoxGrid,K as BoxWrapper,n as CtaButtonLarge,d as CtaButtonNormal,t as CtaButtonSmall,D as DeleteButtonLarge,L as DeleteButtonNormal,w as DeleteButtonSmall,ur as EditUploadAvatar,pr as EditUploadCover,cr as EditWrapper,E as ErrorValidator,s as FocusButtonLarge,v as FocusButtonNormal,l as FocusButtonSmall,h as FocusPlainButtonLarge,m as FocusPlainButtonNormal,g as FocusPlainButtonSmall,z as GreyButtonLarge,S as GreyButtonNormal,R as GreyButtonSmall,T as GreyLinkButtonLarge,P as GreyLinkButtonNormal,j as GreyLinkButtonSmall,B as InputGroup,O as InputLarge,F as InputNormal,N as InputSmall,A as LabelLarge,q as LabelNormal,M as LabelSmall,u as MainButtonLarge,p as MainButtonNormal,c as MainButtonSmall,f as MainPlainButtonLarge,b as MainPlainButtonNormal,k as MainPlainButtonSmall,Z as Navbar,ar as NavbarCta,er as NavbarList,_ as NavbarLogo,rr as NavbarText,lr as PageAlwaysVisible,nr as PageForty,vr as PageMobileHidden,or as PagePaddings,ir as PageSamePaddings,dr as PageSixty,tr as PageTopPaddings,kr as Slider,br as SliderContainer,xr as SliderTitle,fr as SliderWrapper,G as SuccessValidator,H as TipValidator,y as WhitePlainButtonLarge,$ as WhitePlainButtonNormal,x as WhitePlainButtonSmall,V as breakPoints,W as breakSize,X as device};

package/dist/index.js

@@ -22,7 +22,7 @@
     &:active{
         transform: scale(.97);
     }
-`,t=a.default(e)`
+`,o=a.default(e)`
     font-size: var(--buttonSmallText);
     padding: ${r=>r.noPads?"0":"var(--buttonSmallPads)"};
 
@@ -30,7 +30,7 @@
     svg{
         width: var(--buttonSmallIcon);
     }
-`,o=a.default(e)`
+`,t=a.default(e)`
     font-size: var(--buttonNormalText);
     padding: ${r=>r.noPads?"0":"var(--buttonNormalPads)"};
 
@@ -46,7 +46,7 @@
     svg{
         height: var(--buttonLargeIcon);
     }
-`,d=a.default(t)`
+`,d=a.default(o)`
     background: linear-gradient(to right, var(--focus) -50%, var(--main) 150%);
     border-radius: var(--normalRadius);
 
@@ -57,7 +57,7 @@
     &:hover{
         background: linear-gradient(to right, var(--focus) -80%, var(--main) 120%);
     }
-`,l=a.default(o)`
+`,l=a.default(t)`
     background: linear-gradient(to right, var(--focus) -50%, var(--main) 150%);
     border-radius: var(--normalRadius);
 
@@ -79,7 +79,7 @@
     &:hover{
         background: linear-gradient(to right, var(--focus) -80%, var(--main) 120%);
     }
-`,s=a.default(t)`
+`,s=a.default(o)`
     background: var(--focus);
     border-radius: var(--normalRadius);
     border: 1px solid var(--focus);
@@ -95,7 +95,7 @@
     &:hover{
         background: var(--focusLight);
     }
-`,v=a.default(o)`
+`,v=a.default(t)`
     background: var(--focus);
     border-radius: var(--normalRadius);
     border: 1px solid var(--focus);
@@ -127,7 +127,7 @@
     &:hover{
         background: var(--focusLight);
     }
-`,m=a.default(t)`
+`,m=a.default(o)`
     background: transparent;
     border: 1px solid transparent;
 
@@ -149,7 +149,7 @@
             fill: var(--focusLight);
         }
     }
-`,u=a.default(o)`
+`,u=a.default(t)`
     background: transparent;
     border: 1px solid transparent;
 
@@ -193,7 +193,7 @@
             fill: var(--focusLight);
         }
     }
-`,h=a.default(t)`
+`,h=a.default(o)`
     background: var(--main);
     border-radius: var(--normalRadius);
     border: 1px solid var(--main);
@@ -210,7 +210,7 @@
         background: var(--mainLight);
         border: 1px solid var(--mainLight);
     }
-`,c=a.default(o)`
+`,c=a.default(t)`
     background: var(--main);
     border-radius: var(--normalRadius);
     border: 1px solid var(--main);
@@ -242,7 +242,7 @@
     &:hover{
         background: var(--mainLight);
     }
-`,k=a.default(t)`
+`,k=a.default(o)`
     background: transparent;
     border: 1px solid transparent;
 
@@ -264,7 +264,7 @@
             fill: var(--mainLight);
         }
     }
-`,x=a.default(o)`
+`,x=a.default(t)`
     background: transparent;
     border: 1px solid transparent;
 
@@ -308,7 +308,7 @@
             fill: var(--mainLight);
         }
     }
-`,$=a.default(t)`
+`,$=a.default(o)`
     background: transparent;
     border: 1px solid transparent;
 
@@ -330,7 +330,7 @@
             fill: ${r=>"dark"===r.theme?"var(--gloomDark)":"var(--greyLight)"};
         }
     }
-`,y=a.default(o)`
+`,y=a.default(t)`
     background: transparent;
     border: 1px solid transparent;
 
@@ -374,7 +374,82 @@
             fill: ${r=>"dark"===r.theme?"var(--gloomDark)":"var(--greyLight)"};
         }
     }
-`,L=a.default(t)`
+`,L=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);
+
+    span{
+        color: var(--error)
+    }
+
+    svg{
+        fill: var(--error)
+    }
+
+    &:hover{
+        background: ${r=>"dark"===r.theme?"var(--gloomDark)":"var(--greyLight)"};
+        border: 1px solid ${r=>"dark"===r.theme?"var(--gloomDark)":"var(--greyLight)"};
+
+        span{
+            color: var(--errorLight)
+        }
+
+        svg{
+            fill: var(--errorLight)
+        }
+    }
+`,S=a.default(t)`
+    background: ${r=>"dark"===r.theme?"var(--gloom)":"var(--grey)"};
+    border: 1px solid ${r=>"dark"===r.theme?"var(--gloom)":"var(--grey)"};
+    border-radius: var(--normalRadius);
+
+    span{
+        color: var(--error)
+    }
+
+    svg{
+        fill: var(--error)
+    }
+
+    &:hover{
+        background: ${r=>"dark"===r.theme?"var(--gloomDark)":"var(--greyLight)"};
+        border: 1px solid ${r=>"dark"===r.theme?"var(--gloomDark)":"var(--greyLight)"};
+
+        span{
+            color: var(--errorLight)
+        }
+
+        svg{
+            fill: var(--errorLight)
+        }
+    }
+`,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);
+
+    span{
+        color: var(--error)
+    }
+
+    svg{
+        fill: var(--error)
+    }
+
+    &:hover{
+        background: ${r=>"dark"===r.theme?"var(--gloomDark)":"var(--greyLight)"};
+        border: 1px solid ${r=>"dark"===r.theme?"var(--gloomDark)":"var(--greyLight)"};
+
+        span{
+            color: var(--errorLight)
+        }
+
+        svg{
+            fill: var(--errorLight)
+        }
+    }
+`,B=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);
@@ -391,13 +466,13 @@
         background: ${r=>"dark"===r.theme?"var(--gloomDark)":"var(--greyLight)"};
         border: 1px solid ${r=>"dark"===r.theme?"var(--gloomDark)":"var(--greyLight)"};
     }
-`,S=a.default(o)`
+`,P=a.default(t)`
     background: ${r=>"dark"===r.theme?"var(--gloom)":"var(--grey)"};
     border: 1px solid ${r=>"dark"===r.theme?"var(--gloom)":"var(--grey)"};
     border-radius: var(--normalRadius);
 
     span{
-        color: ${r=>"dark"===r.theme?"var(--blanc)":"var(--black)"};
+        color: ${r=>"dark"===r.theme?"var(--red)":"var(--black)"};
     }
 
     svg{
@@ -408,7 +483,7 @@
         background: ${r=>"dark"===r.theme?"var(--gloomDark)":"var(--greyLight)"};
         border: 1px solid ${r=>"dark"===r.theme?"var(--gloomDark)":"var(--greyLight)"};
     }
-`,P=a.default(i)`
+`,N=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);
@@ -425,7 +500,7 @@
         background: ${r=>"dark"===r.theme?"var(--gloomDark)":"var(--greyLight)"};
         border: 1px solid ${r=>"dark"===r.theme?"var(--gloomDark)":"var(--greyLight)"};
     }
-`,D=a.default(t)`
+`,R=a.default(o)`
     background: transparent;
     border: 1px solid transparent;
 
@@ -448,7 +523,7 @@
             fill: ${r=>"dark"===r.theme?"var(--gloom)":"var(--grey)"};
         }
     }
-`,B=a.default(o)`
+`,z=a.default(t)`
     background: transparent;
     border: 1px solid transparent;
 
@@ -471,7 +546,7 @@
             fill: ${r=>"dark"===r.theme?"var(--gloom)":"var(--grey)"};
         }
     }
-`,N=a.default(i)`
+`,T=a.default(i)`
     background: transparent;
     border: 1px solid transparent;
 
@@ -494,7 +569,7 @@
             fill: ${r=>"dark"===r.theme?"var(--gloom)":"var(--grey)"};
         }
     }
-`,z=a.default.input`
+`,F=a.default.input`
     width: 100%;
     border: none;
     background: ${r=>"dark"===r.theme?"var(--dark)":"var(--white)"};
@@ -508,24 +583,24 @@
         outline: 0;
         box-shadow: ${r=>"dark"===r.theme?"var(--insetShineFocus)":"var(--insetShadowFocus)"};
     }
-`,R=a.default(z)`
+`,j=a.default(F)`
     padding: var(--inputSmallPads);
     font-size: var(--inputSmallText);
-`,T=a.default(z)`
+`,I=a.default(F)`
     padding: var(--inputNormalPads);
     font-size: var(--inputNormalText);
-`,F=a.default(z)`
+`,M=a.default(F)`
     padding: var(--inputLargePads);
     font-size: var(--inputLargeText);
-`,I=a.default.label`
+`,A=a.default.label`
     color: ${r=>"dark"===r.theme?"var(--blanc)":"var(--black)"};
-`,M=a.default(I)`
+`,G=a.default(A)`
     font-size: var(--inputSmallText);
-`,j=a.default(I)`
+`,C=a.default(A)`
     font-size: var(--inputNormalText);
-`,G=a.default(I)`
+`,W=a.default(A)`
     font-size: var(--inputLargeText);
-`,A=a.default.div`
+`,E=a.default.div`
     position: relative;
     margin-top: 4rem;
 
@@ -548,12 +623,12 @@
         transition-property: opacity, transform;
         transition-duration: .5s;
     }
-`,C=a.default.div`
+`,V=a.default.div`
     display: flex;
     align-items: center;
     gap: 1rem;
     margin: var(--tinyDist);
-`,W=a.default(C)`
+`,O=a.default(V)`
     
     svg{
         width: var(--smallIcon);
@@ -563,7 +638,7 @@
     h6{
         color: var(--error);
     }
-`,V=a.default(C)`
+`,U=a.default(V)`
     
     svg{
         width: var(--smallIcon);
@@ -573,7 +648,7 @@
     h6{
         color: var(--success);
     }
-`,O=a.default(C)`
+`,Y=a.default(V)`
     
     svg{
         width: var(--smallIcon);
@@ -583,7 +658,32 @@
     h6{
         color: var(--greyDark);
     }
-`,Y={xs:576,sm:768,md:992,lg:1200,xl:1440,wd:1800},_={xs:`${Y.xs}px`,sm:`${Y.sm}px`,md:`${Y.md}px`,lg:`${Y.ls}px`,xl:`${Y.xl}px`,wd:`${Y.wd}px`},q={xs:`(max-width: ${_.xs})`,sm:`(max-width: ${_.sm})`,md:`(max-width: ${_.md})`,lg:`(max-width: ${_.lg})`,xl:`(max-width: ${_.xl})`,wd:`(max-width: ${_.wd})`},E=a.default.nav`
+`,_=a.default.div`
+    display: grid;
+    grid-template-columns: repeat(${r=>r.columns}, 1fr);
+    grid-gap: 2rem;
+`,q=a.default.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: 2rem;
+    border-radius: var(--normalRadius);
+    padding: var(--normalDist);
+    cursor: pointer;
+    box-shadow: ${r=>"dark"===r.theme?"var(--outShine)":"var(--outShadow)"};
+    transition-property: box-shadow, transform;
+    transition-duration: .5s;
+
+    &:hover{
+        box-shadow: ${r=>"dark"===r.theme?"var(--outShineFocus)":"var(--outShadowFocus)"};
+    }
+`,H=a.default.div`
+
+`,J=a.default.div`
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+`,K={xs:576,sm:768,md:992,lg:1200,xl:1440,wd:1800},Q={xs:`${K.xs}px`,sm:`${K.sm}px`,md:`${K.md}px`,lg:`${K.ls}px`,xl:`${K.xl}px`,wd:`${K.wd}px`},X={xs:`(max-width: ${Q.xs})`,sm:`(max-width: ${Q.sm})`,md:`(max-width: ${Q.md})`,lg:`(max-width: ${Q.lg})`,xl:`(max-width: ${Q.xl})`,wd:`(max-width: ${Q.wd})`},Z=a.default.nav`
     display: grid;
     align-items: center;
     grid-gap: 1rem;
@@ -596,7 +696,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)"};
-`,H=a.default.div`
+`,rr=a.default.div`
     display: flex;
     gap: 1rem;
     align-items: center;
@@ -621,7 +721,7 @@
             transform: rotate(55deg);
         }
     }
-`,J=a.default.div`
+`,ar=a.default.div`
 
     h6{
         color: var(--focus) !important;
@@ -630,78 +730,134 @@
         font-weight: 600;
     }
 
-    @media ${q.md} {
+    @media ${X.md} {
         display: none;
     }
-`,K=a.default.div`
+`,er=a.default.div`
     justify-self: center;
 
-    @media ${q.sm} {
+    @media ${X.sm} {
         justify-self: flex-end;
     }
-`,Q=a.default.div`
+`,or=a.default.div`
     justify-self: flex-end;
     display: flex;
     align-items: center;
     gap: 1rem;
 
-    @media ${q.sm} {
+    @media ${X.sm} {
         display: none;
     }
-`,U=a.default.div`
+`,tr=a.default.div`
     padding: 7rem 4rem 2rem 4rem;
-`,X=a.default.div`
+`,ir=a.default.div`
     padding-top: 2rem 4rem;
-`,Z=a.default.div`
+`,dr=a.default.div`
     padding-top: 7rem;
-`,rr=a.default.div`
+`,lr=a.default.div`
     display: grid;
     grid-template-columns: calc(60% - 4rem) 40%;
     grid-gap: 4rem;
     align-items: flex-start;
 
-    @media ${q.md} {
+    @media ${X.md} {
         grid-template-columns: 1fr;
     }
-`,ar=a.default.div`
+`,nr=a.default.div`
     display: grid;
     grid-template-columns: 40% calc(60% - 4rem);
     grid-gap: 4rem;
     align-items: flex-start;
 
-    @media ${q.md} {
+    @media ${X.md} {
         grid-template-columns: 1fr;
     }
-`,er=a.default.div`
+`,sr=a.default.div`
     width: 100%;
-`,tr=a.default.div`
+`,vr=a.default.div`
     width: 100%;
 
-    @media ${q.md} {
+    @media ${X.md} {
         display: none;
     }
-`,or=a.default.div`
+`,gr=a.default.div`
     
     img{
         height: 4rem;
     }
-`,ir=a.default.div`
+`,mr=a.default.div`
     max-width: 45rem;
 
     h1{
         margin: var(--smallDist);
     }
-`,dr=a.default.form`
+`,ur=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)"};
-`,lr=a.default.div`
+`,pr=a.default.div`
     display: flex;
     align-items: center;
     justify-content: center;
     margin-top: 4rem;
-`,nr=a.default.div`
+`,hr=a.default.div`
+    
+    section{
+
+        h3{
+            margin-bottom: 2rem;
+        }
+    }
+`,cr=a.default.div`
+    
+    picture{
+        width: 100%;
+        height: 25rem;
+        display: block;
+        overflow: hidden;
+        border-radius: var(--normalRadius);
+
+        img{
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+    }
+
+    ul{
+        margin-top: 1rem;
+        display: flex;
+        gap: 1rem;
+    }
+`,fr=a.default.div`
+    display: grid;
+    grid-template-columns: 20rem 1fr;
+    grid-gap: 2rem;
+    
+    picture{
+        width: 100%;
+        height: 20rem;
+        display: block;
+        overflow: hidden;
+        border-radius: 50%;
+
+        img{
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+    }
+
+    ul{
+        margin-top: 1rem;
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+`;a.default.ul`
+    
+`;const kr=a.default.div`
     position: fixed;
     top: 0;
     left: 0;
@@ -709,7 +865,7 @@
     height: 100vh;
     width: 100%;
     background: ${r=>"dark"===r.theme?"var(--blancOverlay)":"var(--blackOverlay)"};
-`,sr=a.default.div`
+`,xr=a.default.div`
     position: fixed;
     right: 0;
     z-index: 501;
@@ -719,18 +875,18 @@
     background: ${r=>"dark"===r.theme?"var(--dark)":"var(--white)"};
     box-shadow: ${r=>"dark"===r.theme?"var(--sliderShine)":"var(--sliderShadow)"};
 
-    @media ${q.md} {
+    @media ${X.md} {
         width: calc(80% + 8rem);
     }
 
-    @media ${q.sm} {
+    @media ${X.sm} {
         width: 100%;
     }
-`,vr=a.default.div`
+`,br=a.default.div`
     max-height: calc(100vh - 9rem);
     overflow-x: hidden;
     overflow-y: auto;
-`,gr=a.default.div`
+`,$r=a.default.div`
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -738,11 +894,11 @@
     padding: var(--smallDist);
     background-color: ${r=>"dark"===r.theme?"var(--gloomDark)":"var(--greyLight)"};
 
-    @media ${q.sm} {
+    @media ${X.sm} {
         justify-content: flex-end;
 
         h3{
             display: none;
         }
     }
-`;exports.AuthActions=lr,exports.AuthForm=dr,exports.AuthLogo=or,exports.AuthWrapper=ir,exports.CtaButtonLarge=n,exports.CtaButtonNormal=l,exports.CtaButtonSmall=d,exports.ErrorValidator=W,exports.FocusButtonLarge=g,exports.FocusButtonNormal=v,exports.FocusButtonSmall=s,exports.FocusPlainButtonLarge=p,exports.FocusPlainButtonNormal=u,exports.FocusPlainButtonSmall=m,exports.GreyButtonLarge=P,exports.GreyButtonNormal=S,exports.GreyButtonSmall=L,exports.GreyLinkButtonLarge=N,exports.GreyLinkButtonNormal=B,exports.GreyLinkButtonSmall=D,exports.InputGroup=A,exports.InputLarge=F,exports.InputNormal=T,exports.InputSmall=R,exports.LabelLarge=G,exports.LabelNormal=j,exports.LabelSmall=M,exports.MainButtonLarge=f,exports.MainButtonNormal=c,exports.MainButtonSmall=h,exports.MainPlainButtonLarge=b,exports.MainPlainButtonNormal=x,exports.MainPlainButtonSmall=k,exports.Navbar=E,exports.NavbarCta=K,exports.NavbarList=Q,exports.NavbarLogo=H,exports.NavbarText=J,exports.PageAlwaysVisible=er,exports.PageForty=ar,exports.PageMobileHidden=tr,exports.PagePaddings=U,exports.PageSamePaddings=X,exports.PageSixty=rr,exports.PageTopPaddings=Z,exports.Slider=nr,exports.SliderContainer=sr,exports.SliderTitle=gr,exports.SliderWrapper=vr,exports.SuccessValidator=V,exports.TipValidator=O,exports.WhitePlainButtonLarge=w,exports.WhitePlainButtonNormal=y,exports.WhitePlainButtonSmall=$,exports.breakPoints=Y,exports.breakSize=_,exports.device=q;
+`;exports.AuthActions=pr,exports.AuthForm=ur,exports.AuthLogo=gr,exports.AuthWrapper=mr,exports.BoxActions=J,exports.BoxContent=H,exports.BoxGrid=_,exports.BoxWrapper=q,exports.CtaButtonLarge=n,exports.CtaButtonNormal=l,exports.CtaButtonSmall=d,exports.DeleteButtonLarge=D,exports.DeleteButtonNormal=S,exports.DeleteButtonSmall=L,exports.EditUploadAvatar=fr,exports.EditUploadCover=cr,exports.EditWrapper=hr,exports.ErrorValidator=O,exports.FocusButtonLarge=g,exports.FocusButtonNormal=v,exports.FocusButtonSmall=s,exports.FocusPlainButtonLarge=p,exports.FocusPlainButtonNormal=u,exports.FocusPlainButtonSmall=m,exports.GreyButtonLarge=N,exports.GreyButtonNormal=P,exports.GreyButtonSmall=B,exports.GreyLinkButtonLarge=T,exports.GreyLinkButtonNormal=z,exports.GreyLinkButtonSmall=R,exports.InputGroup=E,exports.InputLarge=M,exports.InputNormal=I,exports.InputSmall=j,exports.LabelLarge=W,exports.LabelNormal=C,exports.LabelSmall=G,exports.MainButtonLarge=f,exports.MainButtonNormal=c,exports.MainButtonSmall=h,exports.MainPlainButtonLarge=b,exports.MainPlainButtonNormal=x,exports.MainPlainButtonSmall=k,exports.Navbar=Z,exports.NavbarCta=er,exports.NavbarList=or,exports.NavbarLogo=rr,exports.NavbarText=ar,exports.PageAlwaysVisible=sr,exports.PageForty=nr,exports.PageMobileHidden=vr,exports.PagePaddings=tr,exports.PageSamePaddings=ir,exports.PageSixty=lr,exports.PageTopPaddings=dr,exports.Slider=kr,exports.SliderContainer=xr,exports.SliderTitle=$r,exports.SliderWrapper=br,exports.SuccessValidator=U,exports.TipValidator=Y,exports.WhitePlainButtonLarge=w,exports.WhitePlainButtonNormal=y,exports.WhitePlainButtonSmall=$,exports.breakPoints=K,exports.breakSize=Q,exports.device=X;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "monica-alexandria",
-  "version": "1.6.0",
+  "version": "2.2.0",
   "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/Box.jsx

@@ -0,0 +1,41 @@
+import styled from "styled-components";
+
+const BoxGrid = styled.div`
+    display: grid;
+    grid-template-columns: repeat(${props => props.columns}, 1fr);
+    grid-gap: 2rem;
+`
+
+const BoxWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: 2rem;
+    border-radius: var(--normalRadius);
+    padding: var(--normalDist);
+    cursor: pointer;
+    box-shadow: ${props => props.theme === 'dark' ? 'var(--outShine)' : 'var(--outShadow)'};
+    transition-property: box-shadow, transform;
+    transition-duration: .5s;
+
+    &:hover{
+        box-shadow: ${props => props.theme === 'dark' ? 'var(--outShineFocus)' : 'var(--outShadowFocus)'};
+    }
+`
+
+const BoxContent = styled.div`
+
+`
+
+const BoxActions = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+`
+
+export{
+    BoxGrid,
+    BoxWrapper,
+    BoxContent,
+    BoxActions
+}

package/src/components/elements/Button.jsx

@@ -420,6 +420,87 @@ const WhitePlainButtonLarge = styled(ButtonLarge)`
     }
 `
 
+const DeleteButtonSmall = styled(ButtonSmall)`
+    background: ${props => props.theme === 'dark' ? 'var(--gloom)' : 'var(--grey)'};
+    border: 1px solid ${props => props.theme === 'dark' ? 'var(--gloom)' : 'var(--grey)'};
+    border-radius: var(--normalRadius);
+
+    span{
+        color: var(--error)
+    }
+
+    svg{
+        fill: var(--error)
+    }
+
+    &:hover{
+        background: ${props => props.theme === 'dark' ? 'var(--gloomDark)' : 'var(--greyLight)'};
+        border: 1px solid ${props => props.theme === 'dark' ? 'var(--gloomDark)' : 'var(--greyLight)'};
+
+        span{
+            color: var(--errorLight)
+        }
+
+        svg{
+            fill: var(--errorLight)
+        }
+    }
+`
+
+const DeleteButtonNormal = styled(ButtonNormal)`
+    background: ${props => props.theme === 'dark' ? 'var(--gloom)' : 'var(--grey)'};
+    border: 1px solid ${props => props.theme === 'dark' ? 'var(--gloom)' : 'var(--grey)'};
+    border-radius: var(--normalRadius);
+
+    span{
+        color: var(--error)
+    }
+
+    svg{
+        fill: var(--error)
+    }
+
+    &:hover{
+        background: ${props => props.theme === 'dark' ? 'var(--gloomDark)' : 'var(--greyLight)'};
+        border: 1px solid ${props => props.theme === 'dark' ? 'var(--gloomDark)' : 'var(--greyLight)'};
+
+        span{
+            color: var(--errorLight)
+        }
+
+        svg{
+            fill: var(--errorLight)
+        }
+    }
+`
+
+const DeleteButtonLarge = styled(ButtonLarge)`
+    background: ${props => props.theme === 'dark' ? 'var(--gloom)' : 'var(--grey)'};
+    border: 1px solid ${props => props.theme === 'dark' ? 'var(--gloom)' : 'var(--grey)'};
+    border-radius: var(--normalRadius);
+
+    span{
+        color: var(--error)
+    }
+
+    svg{
+        fill: var(--error)
+    }
+
+    &:hover{
+        background: ${props => props.theme === 'dark' ? 'var(--gloomDark)' : 'var(--greyLight)'};
+        border: 1px solid ${props => props.theme === 'dark' ? 'var(--gloomDark)' : 'var(--greyLight)'};
+
+        span{
+            color: var(--errorLight)
+        }
+
+        svg{
+            fill: var(--errorLight)
+        }
+    }
+`
+
 const GreyButtonSmall = styled(ButtonSmall)`
     background: ${props => props.theme === 'dark' ? 'var(--gloom)' : 'var(--grey)'};
     border: 1px solid ${props => props.theme === 'dark' ? 'var(--gloom)' : 'var(--grey)'};
@@ -445,7 +526,7 @@ const GreyButtonNormal = styled(ButtonNormal)`
     border-radius: var(--normalRadius);
 
     span{
-        color: ${props => props.theme === 'dark' ? 'var(--blanc)' : 'var(--black)'};
+        color: ${props => props.theme === 'dark' ? 'var(--red)' : 'var(--black)'};
     }
 
     svg{
@@ -571,6 +652,9 @@ export {
     WhitePlainButtonSmall,
     WhitePlainButtonNormal,
     WhitePlainButtonLarge,
+    DeleteButtonSmall,
+    DeleteButtonNormal,
+    DeleteButtonLarge,
     GreyButtonSmall,
     GreyButtonNormal,
     GreyButtonLarge,

package/src/components/elements/index.js

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

package/src/components/form/Edit.jsx

@@ -0,0 +1,71 @@
+import styled from "styled-components";
+
+const EditWrapper = styled.div`
+    
+    section{
+
+        h3{
+            margin-bottom: 2rem;
+        }
+    }
+`
+
+const EditUploadCover = styled.div`
+    
+    picture{
+        width: 100%;
+        height: 25rem;
+        display: block;
+        overflow: hidden;
+        border-radius: var(--normalRadius);
+
+        img{
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+    }
+
+    ul{
+        margin-top: 1rem;
+        display: flex;
+        gap: 1rem;
+    }
+`
+
+const EditUploadAvatar = styled.div`
+    display: grid;
+    grid-template-columns: 20rem 1fr;
+    grid-gap: 2rem;
+    
+    picture{
+        width: 100%;
+        height: 20rem;
+        display: block;
+        overflow: hidden;
+        border-radius: 50%;
+
+        img{
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+    }
+
+    ul{
+        margin-top: 1rem;
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+`
+
+const EditTips = styled.ul`
+    
+`
+
+export {
+    EditWrapper,
+    EditUploadCover,
+    EditUploadAvatar
+}