monica-alexandria 2.5.1 → 2.5.2

package/dist/index.es.js

@@ -589,18 +589,18 @@ import r from"styled-components";const a=r.button`
 `,F=r(j)`
     padding: var(--inputNormalPads);
     font-size: var(--inputNormalText);
-`,O=r(j)`
+`,X=r(j)`
     padding: var(--inputLargePads);
     font-size: var(--inputLargeText);
-`,Y=r.label`
+`,O=r.label`
     color: ${r=>"dark"===r.theme?"var(--blanc)":"var(--black)"};
-`,M=r(Y)`
+`,Y=r(O)`
     font-size: var(--inputSmallText);
-`,q=r(Y)`
+`,M=r(O)`
     font-size: var(--inputNormalText);
-`,A=r(Y)`
+`,q=r(O)`
     font-size: var(--inputLargeText);
-`,B=r.div`
+`,A=r.div`
     position: relative;
     margin-top: 4rem;
 
@@ -631,7 +631,7 @@ import r from"styled-components";const a=r.button`
         transition-property: opacity, transform;
         transition-duration: .5s;
     }
-`,C=r.div`
+`,B=r.div`
     position: relative;
 
     ul{
@@ -654,7 +654,7 @@ import r from"styled-components";const a=r.button`
             }
         }
     }
-`,E=r(B)`
+`,C=r(A)`
     
     aside{
         display: block;
@@ -669,7 +669,7 @@ import r from"styled-components";const a=r.button`
             display: none;
         }
     }
-`,G=r.div`
+`,E=r.div`
     position: absolute;
     top: 1.2rem;
     right: 2rem;
@@ -678,7 +678,7 @@ import r from"styled-components";const a=r.button`
         height: var(--smallText);
         fill: ${r=>"dark"===r.theme?"var(--gloomLight)":"var(--greyDark)"};
     }
-`,H=r.div`
+`,G=r.div`
     position: absolute;
     top: 1.2rem;
     right: 2rem;
@@ -687,12 +687,12 @@ import r from"styled-components";const a=r.button`
         height: var(--smallText);
         fill: var(--error);
     }
-`,J=r.div`
+`,H=r.div`
     display: flex;
     align-items: center;
     gap: 1rem;
     margin: var(--tinyDist);
-`,K=r(J)`
+`,J=r(H)`
     
     svg{
         width: var(--smallIcon);
@@ -702,7 +702,7 @@ import r from"styled-components";const a=r.button`
     h6{
         color: var(--error);
     }
-`,Q=r(J)`
+`,K=r(H)`
     
     svg{
         width: var(--smallIcon);
@@ -712,7 +712,7 @@ import r from"styled-components";const a=r.button`
     h6{
         color: var(--success);
     }
-`,U=r(J)`
+`,Q=r(H)`
     
     svg{
         width: var(--smallIcon);
@@ -722,11 +722,11 @@ import r from"styled-components";const a=r.button`
     h6{
         color: var(--greyDark);
     }
-`,V=r.div`
+`,U=r.div`
     display: grid;
     grid-template-columns: repeat(${r=>r.columns}, 1fr);
     grid-gap: 2rem;
-`,W=r.div`
+`,V=r.div`
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -741,7 +741,7 @@ import r from"styled-components";const a=r.button`
     &:hover{
         box-shadow: ${r=>"dark"===r.theme?"var(--outShineFocus)":"var(--outShadowFocus)"};
     }
-`,X=r.div`
+`,W=r.div`
 
 `,Z=r.div`
     display: flex;
@@ -1075,7 +1075,7 @@ import r from"styled-components";const a=r.button`
     form{
         margin-top: 4rem;
     }
-`,Or=r.div`
+`,Xr=r.div`
     padding: var(--smallDist);
 
     ul{
@@ -1091,7 +1091,7 @@ import r from"styled-components";const a=r.button`
             }
         }
     }
-`,Yr=r.div`
+`,Or=r.div`
     position: fixed;
     top: 0;
     left: 0;
@@ -1099,7 +1099,28 @@ import r from"styled-components";const a=r.button`
     height: 100vh;
     width: 100%;
     background: ${r=>"dark"===r.theme?"var(--blancOverlay)":"var(--blackOverlay)"};
-`,Mr=r.div`
+
+    .slider{
+        
+        &-enter{
+            transform: translateX(-110%);
+
+            &-active{
+                transform: translateX(0);
+                transition: all .5s ease;
+            }
+        }
+
+        &-exit{
+            
+            &-active{
+                transform: translateX(-110%);
+                transition: all .5s ease;
+            }
+        }
+    }
+
+`,Yr=r.div`
     position: fixed;
     right: 0;
     z-index: 501;
@@ -1116,11 +1137,11 @@ import r from"styled-components";const a=r.button`
     @media ${nr.sm} {
         width: 100%;
     }
-`,qr=r.div`
+`,Mr=r.div`
     max-height: calc(100vh - 9rem);
     overflow-x: hidden;
     overflow-y: auto;
-`,Ar=r.div`
+`,qr=r.div`
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -1135,4 +1156,4 @@ import r from"styled-components";const a=r.button`
             display: none;
         }
     }
-`;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};
+`;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,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,Xr as EditList,Fr as EditSelect,Ir as EditTips,jr as EditUploadAvatar,Nr as EditUploadCover,Pr as EditWrapper,J 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,C as InputAdd,A as InputGroup,E as InputIcon,X as InputLarge,G as InputMandatory,F as InputNormal,B as InputSearch,I as InputSmall,q as LabelLarge,M as LabelNormal,Y 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,Or as Slider,Yr as SliderContainer,qr as SliderTitle,Mr as SliderWrapper,K as SuccessValidator,ir as TextareaLarge,or as TextareaNormal,er as TextareaSmall,$r as Theme,Q as TipValidator,y as WhitePlainButtonLarge,$ as WhitePlainButtonNormal,x as WhitePlainButtonSmall,tr as breakPoints,dr as breakSize,nr as device};

package/dist/index.js

@@ -669,7 +669,7 @@
             display: none;
         }
     }
-`,U=a.default.div`
+`,X=a.default.div`
     position: absolute;
     top: 1.2rem;
     right: 2rem;
@@ -678,7 +678,7 @@
         height: var(--smallText);
         fill: ${r=>"dark"===r.theme?"var(--gloomLight)":"var(--greyDark)"};
     }
-`,Y=a.default.div`
+`,U=a.default.div`
     position: absolute;
     top: 1.2rem;
     right: 2rem;
@@ -687,12 +687,12 @@
         height: var(--smallText);
         fill: var(--error);
     }
-`,_=a.default.div`
+`,Y=a.default.div`
     display: flex;
     align-items: center;
     gap: 1rem;
     margin: var(--tinyDist);
-`,q=a.default(_)`
+`,_=a.default(Y)`
     
     svg{
         width: var(--smallIcon);
@@ -702,7 +702,7 @@
     h6{
         color: var(--error);
     }
-`,H=a.default(_)`
+`,q=a.default(Y)`
     
     svg{
         width: var(--smallIcon);
@@ -712,7 +712,7 @@
     h6{
         color: var(--success);
     }
-`,J=a.default(_)`
+`,H=a.default(Y)`
     
     svg{
         width: var(--smallIcon);
@@ -722,11 +722,11 @@
     h6{
         color: var(--greyDark);
     }
-`,K=a.default.div`
+`,J=a.default.div`
     display: grid;
     grid-template-columns: repeat(${r=>r.columns}, 1fr);
     grid-gap: 2rem;
-`,Q=a.default.div`
+`,K=a.default.div`
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -741,7 +741,7 @@
     &:hover{
         box-shadow: ${r=>"dark"===r.theme?"var(--outShineFocus)":"var(--outShadowFocus)"};
     }
-`,X=a.default.div`
+`,Q=a.default.div`
 
 `,Z=a.default.div`
     display: flex;
@@ -1099,6 +1099,27 @@
     height: 100vh;
     width: 100%;
     background: ${r=>"dark"===r.theme?"var(--blancOverlay)":"var(--blackOverlay)"};
+
+    .slider{
+        
+        &-enter{
+            transform: translateX(-110%);
+
+            &-active{
+                transform: translateX(0);
+                transition: all .5s ease;
+            }
+        }
+
+        &-exit{
+            
+            &-active{
+                transform: translateX(-110%);
+                transition: all .5s ease;
+            }
+        }
+    }
+
 `,Gr=a.default.div`
     position: fixed;
     right: 0;
@@ -1135,4 +1156,4 @@
             display: none;
         }
     }
-`;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;
+`;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=Q,exports.BoxGrid=J,exports.BoxWrapper=K,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=_,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=X,exports.InputLarge=A,exports.InputMandatory=U,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=q,exports.TextareaLarge=dr,exports.TextareaNormal=ir,exports.TextareaSmall=or,exports.Theme=wr,exports.TipValidator=H,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.5.1",
+  "version": "2.5.2",
   "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/slider/Slider.jsx

@@ -9,6 +9,27 @@ const Slider = styled.div`
     height: 100vh;
     width: 100%;
     background: ${props => props.theme === 'dark' ? "var(--blancOverlay)" : "var(--blackOverlay)"};
+
+    .slider{
+        
+        &-enter{
+            transform: translateX(-110%);
+
+            &-active{
+                transform: translateX(0);
+                transition: all .5s ease;
+            }
+        }
+
+        &-exit{
+            
+            &-active{
+                transform: translateX(-110%);
+                transition: all .5s ease;
+            }
+        }
+    }
+
 `
 
 const SliderContainer = styled.div`