monica-alexandria 1.5.0

package/dist/index.es.js

@@ -0,0 +1,427 @@
+import r from"styled-components";const a=r.button`
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    outline: 0;
+    border: none;
+    cursor: pointer;
+    transition-property: background;
+    transition-duration: .5s;
+
+    svg{
+        transition-property: fill;
+        transition-duration: .5s;
+    }
+
+    span{
+        white-space: nowrap;
+        transition-property: color;
+        transition-duration: .5s;
+    }
+
+    &:active{
+        transform: scale(.97);
+    }
+`,o=r(a)`
+    font-size: var(--buttonSmallText);
+    padding: var(--buttonSmallPads);
+
+    svg{
+        width: var(--buttonSmallIcon);
+    }
+`,i=r(a)`
+    font-size: var(--buttonNormalText);
+    padding: var(--buttonNormalPads);
+
+    svg{
+        height: var(--buttonNormalIcon);
+    }
+`,t=r(a)`
+    font-size: var(--buttonLargeText);
+    padding: var(--buttonLargePads);
+
+    svg{
+        height: var(--buttonLargeIcon);
+    }
+`,e=r(o)`
+    background: linear-gradient(to right, var(--focus) -50%, var(--main) 150%);
+    border-radius: var(--normalRadius);
+
+    span{
+        color: var(--white);
+    }
+
+    &:hover{
+        background: linear-gradient(to right, var(--focus) -80%, var(--main) 120%);
+    }
+`,n=r(i)`
+    background: linear-gradient(to right, var(--focus) -50%, var(--main) 150%);
+    border-radius: var(--normalRadius);
+
+    span{
+        color: var(--white);
+    }
+
+    &:hover{
+        background: linear-gradient(to right, var(--focus) -80%, var(--main) 120%);
+    }
+`,d=r(t)`
+    background: linear-gradient(to right, var(--focus) -50%, var(--main) 150%);
+    border-radius: var(--normalRadius);
+
+    span{
+        color: var(--white);
+    }
+
+    &:hover{
+        background: linear-gradient(to right, var(--focus) -80%, var(--main) 120%);
+    }
+`,s=r(o)`
+    background-color: var(--focus);
+    border-radius: var(--normalRadius);
+    border: 1px solid var(--focus);
+
+    span{
+        color: var(--white);
+    }
+
+    svg{
+        fill: var(--white);
+    }
+
+    &:hover{
+        background-color: var(--focusLight);
+    }
+`,l=r(i)`
+    background-color: var(--focus);
+    border-radius: var(--normalRadius);
+    border: 1px solid var(--focus);
+
+    span{
+        color: var(--white);
+    }
+
+    svg{
+        fill: var(--white);
+    }
+
+    &:hover{
+        background-color: var(--focusLight);
+    }
+`,v=r(t)`
+    background-color: var(--focus);
+    border-radius: var(--normalRadius);
+    border: 1px solid var(--focus);
+
+    span{
+        color: var(--white);
+    }
+
+    svg{
+        fill: var(--white);
+    }
+
+    &:hover{
+        background-color: var(--focusLight);
+    }
+`,m=r(o)`
+    background: transparent;
+    border: 1px solid transparent;
+
+    span{
+        color: var(--focus);
+    }
+
+    &:hover{
+        color: var(--focusLight);
+    }
+`,p=r(i)`
+    background: transparent;
+    border: 1px solid transparent;
+
+    span{
+        color: var(--focus);
+    }
+
+    &:hover{
+        color: var(--focusLight);
+    }
+`,c=r(t)`
+    background: transparent;
+    border: 1px solid transparent;
+
+    span{
+        color: var(--focus);
+    }
+
+    &:hover{
+        color: var(--focusLight);
+    }
+`,g=r(o)`
+    background: var(--main);
+    border-radius: var(--normalRadius);
+    border: 1px solid var(--main);
+
+    span{
+        color: var(--white);
+    }
+
+    svg{
+        fill: var(--white);
+    }
+
+    &:hover{
+        background: var(--mainLight);
+    }
+`,u=r(i)`
+    background: var(--main);
+    border-radius: var(--normalRadius);
+    border: 1px solid var(--main);
+
+    span{
+        color: var(--white);
+    }
+
+    svg{
+        fill: var(--white);
+    }
+
+    &:hover{
+        background: var(--mainLight);
+    }
+`,h=r(t)`
+    background: var(--main);
+    border-radius: var(--normalRadius);
+    border: 1px solid var(--main);
+
+    span{
+        color: var(--white);
+    }
+
+    svg{
+        fill: var(--white);
+    }
+
+    &:hover{
+        background: var(--mainLight);
+    }
+`,b=r(o)`
+    background: transparent;
+    border: 1px solid transparent;
+
+    span{
+        color: var(--main);
+    }
+
+    &:hover{
+        color: var(--mainLight);
+    }
+`,f=r(i)`
+    background: transparent;
+    border: 1px solid transparent;
+
+    span{
+        color: var(--main);
+    }
+
+    &:hover{
+        color: var(--mainLight);
+    }
+`,x=r(t)`
+    background: transparent;
+    border: 1px solid transparent;
+
+    span{
+        color: var(--main);
+    }
+
+    &:hover{
+        color: var(--mainLight);
+    }
+`,w={xs:576,sm:768,md:992,lg:1200,xl:1440,wd:1800},k={xs:`${w.xs}px`,sm:`${w.sm}px`,md:`${w.md}px`,lg:`${w.ls}px`,xl:`${w.xl}px`,wd:`${w.wd}px`},$={xs:`(max-width: ${k.xs})`,sm:`(max-width: ${k.sm})`,md:`(max-width: ${k.md})`,lg:`(max-width: ${k.lg})`,xl:`(max-width: ${k.xl})`,wd:`(max-width: ${k.wd})`},y=r.nav`
+    display: grid;
+    align-items: center;
+    grid-gap: 1rem;
+    grid-template-columns: auto 1fr auto;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 15;
+    width: 100%;
+    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)"};
+`,L=r.div`
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    cursor: pointer;
+
+    img{
+        height: 4rem;
+        transition-property: transform;
+        transition-duration: .5s;
+    }
+
+    &:hover{
+
+        img{
+            transform: rotate(25deg);
+        }
+    }
+
+    &:active{
+
+        img{
+            transform: rotate(55deg);
+        }
+    }
+`,z=r.div`
+
+    h6{
+        color: var(--focus) !important;
+        font-size: 1.2rem;
+        font-family: "fontMedium", sans-serif;
+        font-weight: 600;
+    }
+
+    @media ${$.md} {
+        display: none;
+    }
+`,S=r.div`
+    justify-self: center;
+
+    @media ${$.sm} {
+        justify-self: flex-end;
+    }
+`,R=r.div`
+    justify-self: flex-end;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+
+    @media ${$.sm} {
+        display: none;
+    }
+`,T=r.div`
+    padding: 7rem 4rem 2rem 4rem;
+`,P=r.div`
+    padding-top: 7rem;
+`,N=r.div`
+    display: grid;
+    grid-template-columns: calc(60% - 4rem) 40%;
+    grid-gap: 4rem;
+    align-items: flex-start;
+
+    @media ${$.md} {
+        grid-template-columns: 1fr;
+    }
+`,j=r.div`
+    display: grid;
+    grid-template-columns: 40% calc(60% - 4rem);
+    grid-gap: 4rem;
+    align-items: flex-start;
+
+    @media ${$.md} {
+        grid-template-columns: 1fr;
+    }
+`,I=r.div`
+    width: 100%;
+`,F=r.div`
+    width: 100%;
+
+    @media ${$.md} {
+        display: none;
+    }
+`,O=r.input`
+    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;
+
+    &:focus{
+        outline: 0;
+        box-shadow: ${r=>"dark"===r.theme?"var(--insetShineFocus)":"var(--insetShadowFocus)"};
+    }
+`,Y=r(O)`
+    padding: var(--inputSmallPads);
+    font-size: var(--inputSmallText);
+`,D=r(O)`
+    padding: var(--inputNormalPads);
+    font-size: var(--inputNormalText);
+`,M=r(O)`
+    padding: var(--inputLargePads);
+    font-size: var(--inputLargeText);
+`,q=r.label`
+    color: ${r=>"dark"===r.theme?"var(--blanc)":"var(--black)"};
+`,A=r(q)`
+    font-size: var(--inputSmallText);
+`,B=r(q)`
+    font-size: var(--inputNormalText);
+`,C=r(q)`
+    font-size: var(--inputLargeText);
+`,E=r.div`
+    position: relative;
+    margin-top: 4rem;
+
+    input:placeholder-shown{
+
+        ~ label{
+            transform: translateY(0rem);
+            visibility: hidden;
+            opacity: 0;
+        }
+    }
+
+    label{
+        position: absolute;
+        top: .8rem;
+        left: 1.6rem;
+        transform: translateY(-3rem);
+        visibility: visible;
+        opacity: 1;
+        transition-property: opacity, transform;
+        transition-duration: .5s;
+    }
+`,G=r.div`
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 500;
+    height: 100vh;
+    width: 100%;
+    background: ${r=>"dark"===r.theme?"var(--blancOverlay)":"var(--blackOverlay)"};
+`,H=r.div`
+    position: fixed;
+    right: 0;
+    z-index: 501;
+    width: calc(60% + 8rem);
+    min-width: 40rem;
+    height: 100vh;
+    background: ${r=>"dark"===r.theme?"var(--dark)":"var(--white)"};
+    box-shadow: ${r=>"dark"===r.theme?"var(--sliderShine)":"var(--sliderShadow)"};
+
+    @media ${$.md} {
+        width: calc(80% + 8rem);
+    }
+
+    @media ${$.sm} {
+        width: 100%;
+    }
+`,J=r.div`
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: var(--smallPads);
+    background-color: ${r=>"dark"===r.theme?"var(--gloomDark)":"var(--greyLight)"};
+
+    @media ${$.sm} {
+        h3{
+            display: none;
+        }
+    }
+`;export{d as CtaButtonLarge,n as CtaButtonNormal,e as CtaButtonSmall,v as FocusButtonLarge,l as FocusButtonNormal,s as FocusButtonSmall,c as FocusPlainButtonLarge,p as FocusPlainButtonNormal,m as FocusPlainButtonSmall,E as InputGroup,M as InputLarge,D as InputNormal,Y as InputSmall,C as LabelLarge,B as LabelNormal,A as LabelSmall,h as MainButtonLarge,u as MainButtonNormal,g as MainButtonSmall,x as MainPlainButtonLarge,f as MainPlainButtonNormal,b as MainPlainButtonSmall,y as Navbar,S as NavbarCta,R as NavbarList,L as NavbarLogo,z as NavbarText,I as PageAlwaysVisible,j as PageForty,F as PageMobileHidden,T as PagePaddings,N as PageSixty,P as PageTopPaddings,G as Slider,H as SliderContainer,J as SliderTitle,w as breakPoints,k as breakSize,$ as device};