monica-alexandria 2.2.0 → 2.5.0

package/dist/index.es.js

@@ -95,7 +95,7 @@ import r from"styled-components";const a=r.button`
     &:hover{
         background: var(--focusLight);
     }
-`,v=r(o)`
+`,s=r(o)`
     background: var(--focus);
     border-radius: var(--normalRadius);
     border: 1px solid var(--focus);
@@ -111,7 +111,7 @@ import r from"styled-components";const a=r.button`
     &:hover{
         background: var(--focusLight);
     }
-`,s=r(i)`
+`,v=r(i)`
     background: var(--focus);
     border-radius: var(--normalRadius);
     border: 1px solid var(--focus);
@@ -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;
 
@@ -193,7 +193,7 @@ import r from"styled-components";const a=r.button`
             fill: var(--focusLight);
         }
     }
-`,c=r(e)`
+`,p=r(e)`
     background: var(--main);
     border-radius: var(--normalRadius);
     border: 1px solid var(--main);
@@ -210,7 +210,7 @@ import r from"styled-components";const a=r.button`
         background: var(--mainLight);
         border: 1px solid var(--mainLight);
     }
-`,p=r(o)`
+`,c=r(o)`
     background: var(--main);
     border-radius: var(--normalRadius);
     border: 1px solid var(--main);
@@ -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);
@@ -500,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)"};
     }
-`,j=r(e)`
+`,T=r(e)`
     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)"};
         }
     }
-`,T=r(i)`
+`,N=r(i)`
     background: transparent;
     border: 1px solid transparent;
 
@@ -569,7 +569,7 @@ import r from"styled-components";const a=r.button`
             fill: ${r=>"dark"===r.theme?"var(--gloom)":"var(--grey)"};
         }
     }
-`,I=r.input`
+`,j=r.input`
     width: 100%;
     border: none;
     background: ${r=>"dark"===r.theme?"var(--dark)":"var(--white)"};
@@ -583,13 +583,13 @@ import r from"styled-components";const a=r.button`
         outline: 0;
         box-shadow: ${r=>"dark"===r.theme?"var(--insetShineFocus)":"var(--insetShadowFocus)"};
     }
-`,N=r(I)`
+`,I=r(j)`
     padding: var(--inputSmallPads);
     font-size: var(--inputSmallText);
-`,F=r(I)`
+`,F=r(j)`
     padding: var(--inputNormalPads);
     font-size: var(--inputNormalText);
-`,O=r(I)`
+`,O=r(j)`
     padding: var(--inputLargePads);
     font-size: var(--inputLargeText);
 `,Y=r.label`
@@ -613,6 +613,14 @@ import r from"styled-components";const a=r.button`
         }
     }
 
+    section{
+        display: none;
+    }
+
+    input:focus ~ section{
+        display: block;
+    }
+
     label{
         position: absolute;
         top: .8rem;
@@ -624,11 +632,67 @@ import r from"styled-components";const a=r.button`
         transition-duration: .5s;
     }
 `,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;
+        position: absolute;
+        right: .5rem;
+        top: .3rem;
+    }
+
+    input:placeholder-shown{
+
+        ~ aside{
+            display: none;
+        }
+    }
+`,G=r.div`
+    position: absolute;
+    top: 1.2rem;
+    right: 2rem;
+
+    svg{
+        height: var(--smallText);
+        fill: ${r=>"dark"===r.theme?"var(--gloomLight)":"var(--greyDark)"};
+    }
+`,H=r.div`
+    position: absolute;
+    top: 1.2rem;
+    right: 2rem;
+
+    svg{
+        height: var(--smallText);
+        fill: var(--error);
+    }
+`,J=r.div`
     display: flex;
     align-items: center;
     gap: 1rem;
     margin: var(--tinyDist);
-`,E=r(C)`
+`,K=r(J)`
     
     svg{
         width: var(--smallIcon);
@@ -638,7 +702,7 @@ import r from"styled-components";const a=r.button`
     h6{
         color: var(--error);
     }
-`,G=r(C)`
+`,Q=r(J)`
     
     svg{
         width: var(--smallIcon);
@@ -648,7 +712,7 @@ import r from"styled-components";const a=r.button`
     h6{
         color: var(--success);
     }
-`,H=r(C)`
+`,U=r(J)`
     
     svg{
         width: var(--smallIcon);
@@ -658,11 +722,11 @@ import r from"styled-components";const a=r.button`
     h6{
         color: var(--greyDark);
     }
-`,J=r.div`
+`,V=r.div`
     display: grid;
     grid-template-columns: repeat(${r=>r.columns}, 1fr);
     grid-gap: 2rem;
-`,K=r.div`
+`,W=r.div`
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -677,13 +741,82 @@ import r from"styled-components";const a=r.button`
     &:hover{
         box-shadow: ${r=>"dark"===r.theme?"var(--outShineFocus)":"var(--outShadowFocus)"};
     }
-`,Q=r.div`
+`,X=r.div`
 
-`,U=r.div`
+`,Z=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`
+`,_=r(r.form`
+    position: relative;
+
+    select{
+        width: 100%;
+        cursor: pointer;
+        appearance: none;
+        outline: 0;
+    }
+
+    svg{
+        position: absolute;
+        display: block;
+        top: 1rem;
+        right: 1rem;
+        z-index: 5;
+        pointer-events: none;
+    }
+
+`)`
+    select{
+        padding: var(--buttonNormalPads);
+        font-size: var(--buttonNormalText);
+        border-radius: var(--normalRadius);
+        padding-right: 4rem;
+    }
+
+    option{
+        padding: var(--buttonNormalPads);
+        font-size: var(--buttonNormalText);
+    }
+
+    svg{
+        height: var(--buttonNormalIcon);
+    }
+`,rr=r(_)`
+    select{
+        color: ${r=>"dark"===r.theme?"var(--blanc);":"var(--black);"};
+        background: ${r=>"dark"===r.theme?"var(--gloomDark);":"var(--greyLight);"};
+        border: 1px solid ${r=>"dark"===r.theme?"var(--gloomDark);":"var(--greyLight);"};
+    }
+
+    svg{
+        fill: ${r=>"dark"===r.theme?"var(--blanc);":"var(--black);"};
+    }
+`,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;
@@ -696,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)"};
-`,_=r.div`
+`,sr=r.div`
     display: flex;
     gap: 1rem;
     align-items: center;
@@ -721,7 +854,7 @@ import r from"styled-components";const a=r.button`
             transform: rotate(55deg);
         }
     }
-`,rr=r.div`
+`,vr=r.div`
 
     h6{
         color: var(--focus) !important;
@@ -730,78 +863,121 @@ import r from"styled-components";const a=r.button`
         font-weight: 600;
     }
 
-    @media ${X.md} {
+    @media ${nr.md} {
         display: none;
     }
-`,ar=r.div`
+`,mr=r.div`
     justify-self: center;
 
-    @media ${X.sm} {
+    @media ${nr.sm} {
         justify-self: flex-end;
     }
-`,er=r.div`
+`,gr=r.div`
     justify-self: flex-end;
     display: flex;
     align-items: center;
     gap: 1rem;
 
-    @media ${X.sm} {
+    @media ${nr.sm} {
         display: none;
     }
-`,or=r.div`
+`,hr=r.div`
     padding: 7rem 4rem 2rem 4rem;
-`,ir=r.div`
+`,pr=r.div`
     padding-top: 2rem 4rem;
-`,tr=r.div`
+`,cr=r.div`
     padding-top: 7rem;
-`,dr=r.div`
+`,ur=r.div`
     display: grid;
     grid-template-columns: calc(60% - 4rem) 40%;
     grid-gap: 4rem;
     align-items: flex-start;
 
-    @media ${X.md} {
+    @media ${nr.md} {
         grid-template-columns: 1fr;
     }
-`,nr=r.div`
+`,kr=r.div`
     display: grid;
     grid-template-columns: 40% calc(60% - 4rem);
     grid-gap: 4rem;
     align-items: flex-start;
 
-    @media ${X.md} {
+    @media ${nr.md} {
         grid-template-columns: 1fr;
     }
-`,lr=r.div`
+`,br=r.div`
     width: 100%;
-`,vr=r.div`
+`,fr=r.div`
     width: 100%;
 
-    @media ${X.md} {
+    @media ${nr.md} {
         display: none;
     }
-`,sr=r.div`
+`,xr=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;
+    }
+`,$r=r.div`
     
     img{
         height: 4rem;
     }
-`,gr=r.div`
+`,yr=r.div`
+    max-width: 45rem;
+`,wr=r.div`
     max-width: 45rem;
 
     h1{
         margin: var(--smallDist);
     }
-`,mr=r.form`
+`,Lr=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)"};
-`,hr=r.div`
+`,Dr=r.div`
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    justify-content: space-between;
+    margin: 2rem 0;
+
+    aside{
+        display: flex;
+        gap: .5rem;
+        align-items: center;
+    }
+`,Sr=r.div`
+    display: flex;
+    align-items: flex-start;
+    gap: 1rem;
+
+    input{
+        margin-top: .3rem;
+    }
+`,Rr=r.div`
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 1rem;
+    margin: 2rem 1rem;
+`,zr=r.div`
     display: flex;
     align-items: center;
     justify-content: center;
     margin-top: 4rem;
-`,cr=r.div`
+`,Tr=r.div`
     
     section{
 
@@ -809,7 +985,7 @@ import r from"styled-components";const a=r.button`
             margin-bottom: 2rem;
         }
     }
-`,pr=r.div`
+`,Pr=r.div`
     
     picture{
         width: 100%;
@@ -830,7 +1006,7 @@ import r from"styled-components";const a=r.button`
         display: flex;
         gap: 1rem;
     }
-`,ur=r.div`
+`,Nr=r.div`
     display: grid;
     grid-template-columns: 20rem 1fr;
     grid-gap: 2rem;
@@ -855,9 +1031,58 @@ import r from"styled-components";const a=r.button`
         flex-direction: column;
         gap: 1rem;
     }
-`;r.ul`
+`,jr=r.ul`
+    background: ${r=>"dark"===r.theme?"var(--gloomDark)":"var(--greyLight)"};
+    padding: var(--smallDist);
+    border-radius: var(--smallRadius);
+    position: relative;
     
-`;const kr=r.div`
+    aside{
+        position: absolute;
+        right: 2rem;
+        top: -2rem;
+        height: 3.5rem;
+        width: 3.5rem;
+        background: ${r=>"dark"===r.theme?"var(--dark)":"var(--white)"};
+        padding: 1rem;
+        border-radius: 50%;
+
+        svg{
+            height: var(--smallText);
+            fill: ${r=>"dark"===r.theme?"var(--gloomLight)":"var(--greyDark)"};
+        }
+    }
+
+    li{
+        margin-top: .5rem;
+    }
+`,Ir=r.div`
+    display: grid;
+    grid-template-columns: auto 1fr;
+    align-items: flex-start;
+    grid-gap: 1rem;
+    width: 100%;
+
+    form{
+        margin-top: 4rem;
+    }
+`,Fr=r.div`
+    padding: var(--smallDist);
+
+    ul{
+        margin-top: 1rem;
+
+        li{
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+
+            svg{
+                width: var(--smallText);
+            }
+        }
+    }
+`,Or=r.div`
     position: fixed;
     top: 0;
     left: 0;
@@ -865,7 +1090,7 @@ import r from"styled-components";const a=r.button`
     height: 100vh;
     width: 100%;
     background: ${r=>"dark"===r.theme?"var(--blancOverlay)":"var(--blackOverlay)"};
-`,br=r.div`
+`,Yr=r.div`
     position: fixed;
     right: 0;
     z-index: 501;
@@ -875,18 +1100,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 ${X.md} {
+    @media ${nr.md} {
         width: calc(80% + 8rem);
     }
 
-    @media ${X.sm} {
+    @media ${nr.sm} {
         width: 100%;
     }
-`,fr=r.div`
+`,Mr=r.div`
     max-height: calc(100vh - 9rem);
     overflow-x: hidden;
     overflow-y: auto;
-`,xr=r.div`
+`,qr=r.div`
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -894,11 +1119,11 @@ import r from"styled-components";const a=r.button`
     padding: var(--smallDist);
     background-color: ${r=>"dark"===r.theme?"var(--gloomDark)":"var(--greyLight)"};
 
-    @media ${X.sm} {
+    @media ${nr.sm} {
         justify-content: flex-end;
 
         h3{
             display: none;
         }
     }
-`;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};
+`;export{zr as AuthActions,Rr as AuthCap,Sr as AuthCheck,yr as AuthContainer,Lr as AuthForm,$r as AuthLogo,Dr as AuthSecondary,wr 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,Fr as EditList,Ir as EditSelect,jr as EditTips,Nr as EditUploadAvatar,Pr as EditUploadCover,Tr 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,vr as NavbarText,br as PageAlwaysVisible,kr as PageForty,fr as PageMobileHidden,hr as PagePaddings,pr as PageSamePaddings,ur as PageSixty,cr as PageTopPaddings,Or as Slider,Yr as SliderContainer,qr as SliderTitle,Mr as SliderWrapper,Q as SuccessValidator,ir as TextareaLarge,or as TextareaNormal,er as TextareaSmall,xr as Theme,U as TipValidator,y as WhitePlainButtonLarge,$ as WhitePlainButtonNormal,x as WhitePlainButtonSmall,tr as breakPoints,dr as breakSize,nr as device};