monica-alexandria 3.0.1 → 3.0.2

package/dist/index.es.js

@@ -115,7 +115,7 @@ import e,{useState as t}from"react";import a from"styled-components";import{CSST
         background: ${e=>"dark"===e.theme?"var(--gloomDark)":"var(--greyLight)"};
         border: 1px solid ${e=>"dark"===e.theme?"var(--gloomDark)":"var(--greyLight)"};
     }
-`,v=t=>e.createElement(u,{size:t.size,onClick:t.onClick},t.buttonIconLeft?e.createElement(i,{Icon:t.buttonIconLeft}):null,t.buttonText?e.createElement("span",null,t.buttonText):null,t.buttonIconRight?e.createElement(i,{Icon:t.buttonIconRight}):null),p=a(n)`
+`,p=t=>e.createElement(u,{size:t.size,onClick:t.onClick},t.buttonIconLeft?e.createElement(i,{Icon:t.buttonIconLeft}):null,t.buttonText?e.createElement("span",null,t.buttonText):null,t.buttonIconRight?e.createElement(i,{Icon:t.buttonIconRight}):null),v=a(n)`
     background: transparent;
     border: 1px solid transparent;
 
@@ -138,7 +138,7 @@ import e,{useState as t}from"react";import a from"styled-components";import{CSST
             fill: ${e=>e.theme.low};
         }
     }
-`,w=t=>e.createElement(p,{size:t.size,onClick:t.onClick},t.buttonIconLeft?e.createElement(i,{Icon:t.buttonIconLeft}):null,t.buttonText?e.createElement("span",null,t.buttonText):null,t.buttonIconRight?e.createElement(i,{Icon:t.buttonIconRight}):null),E=a(n)`
+`,w=t=>e.createElement(v,{size:t.size,onClick:t.onClick},t.buttonIconLeft?e.createElement(i,{Icon:t.buttonIconLeft}):null,t.buttonText?e.createElement("span",null,t.buttonText):null,t.buttonIconRight?e.createElement(i,{Icon:t.buttonIconRight}):null),E=a(n)`
     background: var(--main);
     border-radius: var(--normalRadius);
     border: 1px solid var(--main);
@@ -396,7 +396,7 @@ import e,{useState as t}from"react";import a from"styled-components";import{CSST
             display: none;
         }
     }
-`,B=t=>e.createElement(T,null,e.createElement(z,{placeholder:t.placeholder}),e.createElement(H,null,t.placeholder)),A=`(max-width: ${`${576}px`})`,R=`(max-width: ${`${768}px`})`,S=`(max-width: ${`${992}px`})`,V=`(max-width: ${`${1440}px`})`,N=a.div`
+`,A=t=>e.createElement(T,null,e.createElement(z,{placeholder:t.placeholder}),e.createElement(H,null,t.placeholder)),B=`(max-width: ${`${576}px`})`,R=`(max-width: ${`${768}px`})`,S=`(max-width: ${`${992}px`})`,_=`(max-width: ${`${1440}px`})`,V=a.div`
     position: fixed;
     top: 0;
     left: 0;
@@ -404,7 +404,7 @@ import e,{useState as t}from"react";import a from"styled-components";import{CSST
     width: 100%;
     min-height: 100vh;
     background: ${e=>e.theme.overlay};
-`,X=a.div`
+`,N=a.div`
     position: fixed;
     top: 6.5rem;
     left: 50%;
@@ -415,7 +415,7 @@ import e,{useState as t}from"react";import a from"styled-components";import{CSST
     padding: var(--normalPads);
     border-radius: var(--smallRadius);
     background: ${e=>e.theme.background};
-`,_=a.div`
+`,X=a.div`
     margin-top: 2rem;
     padding: 1rem 2rem;
     display: flex;
@@ -431,7 +431,7 @@ import e,{useState as t}from"react";import a from"styled-components";import{CSST
             }
         }
     }
-`,F=t=>e.createElement(N,null,e.createElement(X,null,e.createElement("h4",null,t.question),e.createElement(_,null,e.createElement(f,{onClick:t.onClickPrimary,buttonIconLeft:t.primaryIcon,buttonText:t.primaryText}),e.createElement(x,{onClick:t.onClickSecondary,buttonIconLeft:t.secondaryIcon,buttonText:t.secondaryText})))),D=a.nav`
+`,F=t=>e.createElement(V,null,e.createElement(N,null,e.createElement("h4",null,t.question),e.createElement(X,null,e.createElement(f,{onClick:t.onClickPrimary,buttonIconLeft:t.primaryIcon,buttonText:t.primaryText}),e.createElement(x,{onClick:t.onClickSecondary,buttonIconLeft:t.secondaryIcon,buttonText:t.secondaryText})))),j=a.nav`
     position: fixed;
     left: 0;
     top: 6rem;
@@ -500,7 +500,7 @@ import e,{useState as t}from"react";import a from"styled-components";import{CSST
             }
         }
     }
-`,j=a.li`
+`,D=a.li`
     cursor: pointer;
     transition-property: transform;
     transition-duration: .5s;
@@ -557,7 +557,7 @@ import e,{useState as t}from"react";import a from"styled-components";import{CSST
             transition-duration: .5s;
         }
     }
-`,q=t=>e.createElement(j,null,e.createElement("h5",{className:"ToolsNavTitle"},t.title),e.createElement("picture",null,e.createElement(i,{Icon:t.icon}))),P=t=>e.createElement(D,null,e.createElement("ul",null,t.children)),O=a.div`
+`,q=t=>e.createElement(D,null,e.createElement("h5",{className:"ToolsNavTitle"},t.title),e.createElement("picture",null,e.createElement(i,{Icon:t.icon}))),P=t=>e.createElement(j,null,e.createElement("ul",null,t.children)),O=a.div`
     padding-top: 6rem;
     position: relative;
 
@@ -676,7 +676,7 @@ import e,{useState as t}from"react";import a from"styled-components";import{CSST
     align-items: flex-start;
     grid-gap: 2rem;
 
-    @media ${V}{
+    @media ${_}{
         grid-template-columns: 1fr 1fr;
     }
 
@@ -688,7 +688,7 @@ import e,{useState as t}from"react";import a from"styled-components";import{CSST
         grid-template-columns: 1fr 1fr;
     }
 
-    @media ${A}{
+    @media ${B}{
         grid-template-columns: 1fr;
     }
 `,ce=a(ie)`
@@ -733,7 +733,7 @@ import e,{useState as t}from"react";import a from"styled-components";import{CSST
     background: var(--main);
     height: 100%;
     width: 100%;
-`,ve=a.div`
+`,pe=a.div`
     position: relative;
 
     .Steps{
@@ -758,7 +758,7 @@ import e,{useState as t}from"react";import a from"styled-components";import{CSST
         transform: translateX(-110%);
         transition: all .4s ease;
     }
-`,pe=a.div`
+`,ve=a.div`
     padding: var(--smallDist);
     border-radius: var(--normalRadius);
     box-shadow: ${e=>e.theme.out};
@@ -850,7 +850,51 @@ import e,{useState as t}from"react";import a from"styled-components";import{CSST
     @media ${R} {
         justify-self: flex-end;
     }
-`,He=t=>e.createElement(ze,null,e.createElement(o,{size:"normal",buttonText:t.text_Cta})),Te=t=>e.createElement(HamWrapper,null,e.createElement(HamTitle,{onClick:t.onClick_hamTitle},e.createElement(IconSvg,{Icon:"Back"}),e.createElement("h4",null,t.text_hamTitle)),t.list_Menu.map((()=>e.createElement(HamItem,null,e.createElement("main",null,e.createElement("picture",null,e.createElement("img",{src:image})),e.createElement("h5",null,text)))))),Be=a.div`
+`,He=t=>e.createElement(ze,null,e.createElement(o,{size:"normal",buttonText:t.text_Cta})),Te=a.div`
+    justify-self: flex-end;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    position: relative;
+`,Ae=a.div`
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    cursor: pointer;
+    background: ${e=>e.theme.mid};
+    border: 1px solid ${e=>e.theme.mid};
+    border-radius: 2rem;
+    padding: .1rem 2rem .1rem .1rem;
+    transition-property: background, border;
+    transition-duration: .5s;
+
+    picture{
+        height: 3rem;
+        width: 3rem;
+        border-radius: 50%;
+        overflow: hidden;
+        border: 1px solid ${e=>e.theme.background};
+
+        img{
+            height: 100%;
+            width: 100%;
+            object-fit: cover;
+        }
+    }
+
+    &:hover{
+        background: ${e=>e.theme.low};
+        border: 1px solid ${e=>e.theme.low};
+    }
+
+    @media ${R}{
+        padding: 0;
+
+        h5{
+            display: none;
+        }
+    }
+`,Be=t=>e.createElement(Te,null,e.createElement(Ae,null,e.createElement("picture",null,e.createElement("img",{src:t.user_Image,alt:t.user_ImageAlt})),e.createElement("h5",null,t.user_Name)),e.createElement(p,{size:"small",buttonIconLeft:"Ham",onClick:t.onClick_Ham}),t.hamState&&e.createElement(Ham_,null)),Re=t=>e.createElement(HamWrapper,null,e.createElement(HamTitle,{onClick:t.onClick_hamTitle},e.createElement(IconSvg,{Icon:"Back"}),e.createElement("h4",null,t.text_hamTitle)),t.list_Menu.map((()=>e.createElement(HamItem,null,e.createElement("main",null,e.createElement("picture",null,e.createElement("img",{src:image})),e.createElement("h5",null,text)))))),Se=a.div`
     position: absolute;
     top: 5rem;
     right: 0rem;
@@ -905,13 +949,13 @@ import e,{useState as t}from"react";import a from"styled-components";import{CSST
         transform: translateX(110%);
         transition: all .4s ease;
     }
-`,Ae=a=>{const[n,l]=t(null),o=e=>{const t=e.offsetHeight;l(t)};return e.createElement(Be,{style:{height:n}},e.createElement(r,{in:"Main"===a.activeMenu,timeout:500,unmountOnExit:!0,classNames:"Menu-primary",onEnter:o},e.createElement("div",{className:"Menu"},e.createElement(Te,null))),e.createElement(r,{in:"Account"===a.activeMenu,timeout:500,unmountOnExit:!0,classNames:"Menu-secondary",onEnter:o},e.createElement("div",{className:"Menu"})),e.createElement(r,{in:"Language"===a.activeMenu,timeout:500,unmountOnExit:!0,classNames:"Menu-secondary",onEnter:o},e.createElement("div",{className:"Menu"})),e.createElement(r,{in:"Region"===a.activeMenu,timeout:500,unmountOnExit:!0,classNames:"Menu-secondary",onEnter:o},e.createElement("div",{className:"Menu"})))},Re=a.div`
+`,_e=a=>{const[n,l]=t(null),o=e=>{const t=e.offsetHeight;l(t)};return e.createElement(Se,{style:{height:n}},e.createElement(r,{in:"Main"===a.activeMenu,timeout:500,unmountOnExit:!0,classNames:"Menu-primary",onEnter:o},e.createElement("div",{className:"Menu"},e.createElement(Re,null))),e.createElement(r,{in:"Account"===a.activeMenu,timeout:500,unmountOnExit:!0,classNames:"Menu-secondary",onEnter:o},e.createElement("div",{className:"Menu"})),e.createElement(r,{in:"Language"===a.activeMenu,timeout:500,unmountOnExit:!0,classNames:"Menu-secondary",onEnter:o},e.createElement("div",{className:"Menu"})),e.createElement(r,{in:"Region"===a.activeMenu,timeout:500,unmountOnExit:!0,classNames:"Menu-secondary",onEnter:o},e.createElement("div",{className:"Menu"})))},Ve=a.div`
     justify-self: flex-end;
     display: flex;
     align-items: center;
     gap: 1rem;
     position: relative;
-`,Se=a.div`
+`,Ne=a.div`
     display: flex;
     align-items: center;
     gap: 1rem;
@@ -919,7 +963,7 @@ import e,{useState as t}from"react";import a from"styled-components";import{CSST
     @media ${R} {
         display: none;
     }
-`,Ve=t=>e.createElement(Re,null,e.createElement(Se,null,e.createElement(x,{size:"small",buttonText:t.text_Login,onClick:t.onClick_Login})),e.createElement(v,{size:"small",buttonIconLeft:"Ham",onClick:t.onClick_Ham}),t.hamState?e.createElement(Ae,null):null),Ne=a.nav`
+`,Xe=t=>e.createElement(Ve,null,e.createElement(Ne,null,e.createElement(x,{size:"small",buttonText:t.text_Login,onClick:t.onClick_Login})),e.createElement(p,{size:"small",buttonIconLeft:"Ham",onClick:t.onClick_Ham}),t.hamState?e.createElement(_e,null):null),Fe=a.nav`
     display: grid;
     align-items: center;
     grid-gap: 1rem;
@@ -936,4 +980,4 @@ import e,{useState as t}from"react";import a from"styled-components";import{CSST
     @media ${R} {
         padding: 1rem 2rem;
     }
-`,Xe=t=>e.createElement(Ne,null,e.createElement(Ce,{theme:t.theme}),e.createElement(He,{text_Cta:t.text_Cta}),"Loggedin"===t.userRole?e.createElement("h1",null,"This is visitor"):e.createElement(Ve,{hamState:t.hamState,text_Login:t.text_Login,onClick_Login:t.onClick_Login,onClick_Ham:t.onClick_Ham}));export{Le as Builder_Group,Z as CardButton,$ as Card_Cover,F as Confirmation_,s as Edit_,d as Focus_,g as Focus_Plain,T as FormGroup,z as FormInput,H as FormLabel,B as Form_Input,w as Grey_Link,i as IconSvg,f as Main_,x as Main_Plain,O as Page,U as PageAlwaysVisible,ie as PageCards,G as PageDesktopOnly,J as PageDesktopPadding,Q as PageForty,ee as PageSingle,te as PageSingleHeader,re as PageSingleRight,ae as PageSingleleft,W as PageSixty,ne as PageSub,oe as PageSubActions,le as PageSubTitle,K as PageTitle,Y as PageTools,ce as PageToolsCards,D as SideNav,Ee as Slider,ye as SliderContainer,ke as SliderGrid,fe as SliderOverlay,xe as SliderTitle,be as SliderWrapper,Me as Slider_,he as Steps,we as StepsActions,ue as StepsComplete,ve as StepsContainer,ge as StepsCurrent,pe as StepsWrapper,de as Theme,me as ThemeDark,se as ThemeLight,P as Tool_Box,q as Tool_Box_Button,k as White_Plain,o as _Cta,v as _Grey,Xe as _Nav};
+`,je=t=>e.createElement(Fe,null,e.createElement(Ce,{theme:t.theme}),e.createElement(He,{text_Cta:t.text_Cta}),"Registered"===t.userRole?e.createElement(Be,{user_Name:t.user_Name,user_Image:t.user_Image,user_ImageAlt:t.user_ImageAlt}):e.createElement(Xe,{hamState:t.hamState,text_Login:t.text_Login,onClick_Login:t.onClick_Login,onClick_Ham:t.onClick_Ham}));export{Le as Builder_Group,Z as CardButton,$ as Card_Cover,F as Confirmation_,o as Cta_,s as Edit_,d as Focus_,g as Focus_Plain,T as FormGroup,z as FormInput,H as FormLabel,A as Form_Input,p as Grey_,w as Grey_Link,i as IconSvg,f as Main_,x as Main_Plain,je as Nav_,O as Page,U as PageAlwaysVisible,ie as PageCards,G as PageDesktopOnly,J as PageDesktopPadding,Q as PageForty,ee as PageSingle,te as PageSingleHeader,re as PageSingleRight,ae as PageSingleleft,W as PageSixty,ne as PageSub,oe as PageSubActions,le as PageSubTitle,K as PageTitle,Y as PageTools,ce as PageToolsCards,j as SideNav,Ee as Slider,ye as SliderContainer,ke as SliderGrid,fe as SliderOverlay,xe as SliderTitle,be as SliderWrapper,Me as Slider_,he as Steps,we as StepsActions,ue as StepsComplete,pe as StepsContainer,ge as StepsCurrent,ve as StepsWrapper,de as Theme,me as ThemeDark,se as ThemeLight,P as Tool_Box,q as Tool_Box_Button,k as White_Plain};

package/dist/index.js

@@ -60,7 +60,7 @@
             color: var(--mainLight);
         }
     }
-`,u=n.default(o)`
+`,m=n.default(o)`
     background: var(--focus);
     border-radius: var(--normalRadius);
     border: 1px solid var(--focus);
@@ -76,7 +76,7 @@
     &:hover{
         background: var(--focusLight);
     }
-`,m=n.default(o)`
+`,u=n.default(o)`
     background: transparent;
     border: 1px solid transparent;
 
@@ -396,7 +396,7 @@
             display: none;
         }
     }
-`,I=`(max-width: ${`${576}px`})`,S=`(max-width: ${`${768}px`})`,T=`(max-width: ${`${992}px`})`,z=`(max-width: ${`${1440}px`})`,H=n.default.div`
+`,I=`(max-width: ${`${576}px`})`,S=`(max-width: ${`${768}px`})`,z=`(max-width: ${`${992}px`})`,T=`(max-width: ${`${1440}px`})`,H=n.default.div`
     position: fixed;
     top: 0;
     left: 0;
@@ -404,7 +404,7 @@
     width: 100%;
     min-height: 100vh;
     background: ${e=>e.theme.overlay};
-`,B=n.default.div`
+`,_=n.default.div`
     position: fixed;
     top: 6.5rem;
     left: 50%;
@@ -431,7 +431,7 @@
             }
         }
     }
-`,_=n.default.nav`
+`,B=n.default.nav`
     position: fixed;
     left: 0;
     top: 6rem;
@@ -571,31 +571,31 @@
     grid-gap: 4rem;
     padding: 0 4rem;
 
-    @media ${T} {
+    @media ${z} {
         grid-template-columns: 1fr;
     }
-`,F=n.default.div`
+`,N=n.default.div`
     display: grid;
     grid-template-columns: 1fr 40%;
     grid-gap: 4rem;
     padding: 0 4rem;
 
-    @media ${T} {
+    @media ${z} {
         grid-template-columns: 1fr;
     }
-`,N=n.default.div`
+`,F=n.default.div`
     padding: 0 4rem 2rem 13rem;
 `,D=n.default.div`
     width: 100%;
 `,X=n.default.div`
     width: 100%;
 
-    @media ${T} {
+    @media ${z} {
         display: none;
     }
-`,q=n.default.div`
-    padding-top: 8rem;
 `,j=n.default.div`
+    padding-top: 8rem;
+`,q=n.default.div`
     padding: 2rem 0;
 `,O=n.default.div`
     
@@ -676,11 +676,11 @@
     align-items: flex-start;
     grid-gap: 2rem;
 
-    @media ${z}{
+    @media ${T}{
         grid-template-columns: 1fr 1fr;
     }
 
-    @media ${T}{
+    @media ${z}{
         grid-template-columns: 1fr 1fr 1fr;
     }
 
@@ -786,13 +786,13 @@
     height: 100%;
     max-width: 60%;
     background-color: ${e=>e.theme.background};
-`,ue=n.default.div`
+`,me=n.default.div`
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: 6rem;
     padding: 0 4rem;
-`,me=n.default.div`
+`,ue=n.default.div`
     padding: 2rem 4rem 10rem 4rem;
     background: ${e=>e.theme.low};
     height: 100%;
@@ -841,7 +841,7 @@
         font-weight: 600;
     }
 
-    @media ${T} {
+    @media ${z} {
         display: none;
     }
 `,ve=e=>l.default.createElement(he,null,"dark"===e.theme?l.default.createElement("img",{alt:"Doitforme dark logo",src:"https://genius1071.friktoriaservers.net/doitforme/logo/logo_dark.svg"}):l.default.createElement("img",{alt:"Doitforme light logo",src:"https://genius1071.friktoriaservers.net/doitforme/logo/logo_light.svg"}),l.default.createElement(ge,null,l.default.createElement("h2",null,"Doitforme"),l.default.createElement("h6",null,"v3.0.0 'Morning'"))),we=n.default.div`
@@ -850,7 +850,51 @@
     @media ${S} {
         justify-self: flex-end;
     }
-`,xe=e=>l.default.createElement(we,null,l.default.createElement(d,{size:"normal",buttonText:e.text_Cta})),Ee=e=>l.default.createElement(HamWrapper,null,l.default.createElement(HamTitle,{onClick:e.onClick_hamTitle},l.default.createElement(IconSvg,{Icon:"Back"}),l.default.createElement("h4",null,e.text_hamTitle)),e.list_Menu.map((()=>l.default.createElement(HamItem,null,l.default.createElement("main",null,l.default.createElement("picture",null,l.default.createElement("img",{src:image})),l.default.createElement("h5",null,text)))))),be=n.default.div`
+`,xe=e=>l.default.createElement(we,null,l.default.createElement(d,{size:"normal",buttonText:e.text_Cta})),Ee=n.default.div`
+    justify-self: flex-end;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    position: relative;
+`,be=n.default.div`
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    cursor: pointer;
+    background: ${e=>e.theme.mid};
+    border: 1px solid ${e=>e.theme.mid};
+    border-radius: 2rem;
+    padding: .1rem 2rem .1rem .1rem;
+    transition-property: background, border;
+    transition-duration: .5s;
+
+    picture{
+        height: 3rem;
+        width: 3rem;
+        border-radius: 50%;
+        overflow: hidden;
+        border: 1px solid ${e=>e.theme.background};
+
+        img{
+            height: 100%;
+            width: 100%;
+            object-fit: cover;
+        }
+    }
+
+    &:hover{
+        background: ${e=>e.theme.low};
+        border: 1px solid ${e=>e.theme.low};
+    }
+
+    @media ${S}{
+        padding: 0;
+
+        h5{
+            display: none;
+        }
+    }
+`,ye=e=>l.default.createElement(Ee,null,l.default.createElement(be,null,l.default.createElement("picture",null,l.default.createElement("img",{src:e.user_Image,alt:e.user_ImageAlt})),l.default.createElement("h5",null,e.user_Name)),l.default.createElement(p,{size:"small",buttonIconLeft:"Ham",onClick:e.onClick_Ham}),e.hamState&&l.default.createElement(Ham_,null)),ke=e=>l.default.createElement(HamWrapper,null,l.default.createElement(HamTitle,{onClick:e.onClick_hamTitle},l.default.createElement(IconSvg,{Icon:"Back"}),l.default.createElement("h4",null,e.text_hamTitle)),e.list_Menu.map((()=>l.default.createElement(HamItem,null,l.default.createElement("main",null,l.default.createElement("picture",null,l.default.createElement("img",{src:image})),l.default.createElement("h5",null,text)))))),Me=n.default.div`
     position: absolute;
     top: 5rem;
     right: 0rem;
@@ -905,13 +949,13 @@
         transform: translateX(110%);
         transition: all .4s ease;
     }
-`,ye=t=>{const[r,n]=e.useState(null),o=e=>{const t=e.offsetHeight;n(t)};return l.default.createElement(be,{style:{height:r}},l.default.createElement(a.CSSTransition,{in:"Main"===t.activeMenu,timeout:500,unmountOnExit:!0,classNames:"Menu-primary",onEnter:o},l.default.createElement("div",{className:"Menu"},l.default.createElement(Ee,null))),l.default.createElement(a.CSSTransition,{in:"Account"===t.activeMenu,timeout:500,unmountOnExit:!0,classNames:"Menu-secondary",onEnter:o},l.default.createElement("div",{className:"Menu"})),l.default.createElement(a.CSSTransition,{in:"Language"===t.activeMenu,timeout:500,unmountOnExit:!0,classNames:"Menu-secondary",onEnter:o},l.default.createElement("div",{className:"Menu"})),l.default.createElement(a.CSSTransition,{in:"Region"===t.activeMenu,timeout:500,unmountOnExit:!0,classNames:"Menu-secondary",onEnter:o},l.default.createElement("div",{className:"Menu"})))},ke=n.default.div`
+`,Le=t=>{const[r,n]=e.useState(null),o=e=>{const t=e.offsetHeight;n(t)};return l.default.createElement(Me,{style:{height:r}},l.default.createElement(a.CSSTransition,{in:"Main"===t.activeMenu,timeout:500,unmountOnExit:!0,classNames:"Menu-primary",onEnter:o},l.default.createElement("div",{className:"Menu"},l.default.createElement(ke,null))),l.default.createElement(a.CSSTransition,{in:"Account"===t.activeMenu,timeout:500,unmountOnExit:!0,classNames:"Menu-secondary",onEnter:o},l.default.createElement("div",{className:"Menu"})),l.default.createElement(a.CSSTransition,{in:"Language"===t.activeMenu,timeout:500,unmountOnExit:!0,classNames:"Menu-secondary",onEnter:o},l.default.createElement("div",{className:"Menu"})),l.default.createElement(a.CSSTransition,{in:"Region"===t.activeMenu,timeout:500,unmountOnExit:!0,classNames:"Menu-secondary",onEnter:o},l.default.createElement("div",{className:"Menu"})))},Ze=n.default.div`
     justify-self: flex-end;
     display: flex;
     align-items: center;
     gap: 1rem;
     position: relative;
-`,Me=n.default.div`
+`,$e=n.default.div`
     display: flex;
     align-items: center;
     gap: 1rem;
@@ -919,7 +963,7 @@
     @media ${S} {
         display: none;
     }
-`,Le=e=>l.default.createElement(ke,null,l.default.createElement(Me,null,l.default.createElement(x,{size:"small",buttonText:e.text_Login,onClick:e.onClick_Login})),l.default.createElement(p,{size:"small",buttonIconLeft:"Ham",onClick:e.onClick_Ham}),e.hamState?l.default.createElement(ye,null):null),Ze=n.default.nav`
+`,Ce=e=>l.default.createElement(Ze,null,l.default.createElement($e,null,l.default.createElement(x,{size:"small",buttonText:e.text_Login,onClick:e.onClick_Login})),l.default.createElement(p,{size:"small",buttonIconLeft:"Ham",onClick:e.onClick_Ham}),e.hamState?l.default.createElement(Le,null):null),Ie=n.default.nav`
     display: grid;
     align-items: center;
     grid-gap: 1rem;
@@ -936,4 +980,4 @@
     @media ${S} {
         padding: 1rem 2rem;
     }
-`;exports.Builder_Group=e=>l.default.createElement(pe,null,l.default.createElement("h4",null,e.title),e.children),exports.CardButton=y,exports.Card_Cover=e=>l.default.createElement(k,{center:e.center,onClick:e.onClick},l.default.createElement("header",null,e.img?l.default.createElement("picture",null,l.default.createElement("img",{src:e.img})):e.icon?l.default.createElement("figure",null,l.default.createElement(c,{Icon:e.icon})):e.map?l.default.createElement("map",null,l.default.createElement("iframe",{title:"Doitforme",src:e.map,frameborder:"0",allowfullscreen:"","aria-hidden":"false",tabindex:"0"})):null),l.default.createElement("main",null,e.title?l.default.createElement("h3",null,e.title):e.smallTitle?l.default.createElement("h5",null,e.smallTitle):null,e.children)),exports.Confirmation_=e=>l.default.createElement(H,null,l.default.createElement(B,null,l.default.createElement("h4",null,e.question),l.default.createElement(A,null,l.default.createElement(v,{onClick:e.onClickPrimary,buttonIconLeft:e.primaryIcon,buttonText:e.primaryText}),l.default.createElement(x,{onClick:e.onClickSecondary,buttonIconLeft:e.secondaryIcon,buttonText:e.secondaryText})))),exports.Edit_=e=>l.default.createElement(s,{size:"normal",onClick:e.onClick},l.default.createElement(c,{Icon:e.buttonIcon})),exports.Focus_=e=>l.default.createElement(u,{size:e.size,onClick:e.onClick},e.buttonIconLeft?l.default.createElement(c,{Icon:e.buttonIconLeft}):null,e.buttonText?l.default.createElement("span",null,e.buttonText):null,e.buttonIconRight?l.default.createElement(c,{Icon:e.buttonIconRight}):null),exports.Focus_Plain=e=>l.default.createElement(m,{size:e.size,onClick:e.onClick,onFocus:e.onFocus},e.buttonIconLeft?l.default.createElement(c,{Icon:e.buttonIconLeft}):null,e.buttonText?l.default.createElement("span",null,e.buttonText):null,e.buttonIconRight?l.default.createElement(c,{Icon:e.buttonIconRight}):null),exports.FormGroup=C,exports.FormInput=Z,exports.FormLabel=$,exports.Form_Input=e=>l.default.createElement(C,null,l.default.createElement(Z,{placeholder:e.placeholder}),l.default.createElement($,null,e.placeholder)),exports.Grey_Link=e=>l.default.createElement(h,{size:e.size,onClick:e.onClick},e.buttonIconLeft?l.default.createElement(c,{Icon:e.buttonIconLeft}):null,e.buttonText?l.default.createElement("span",null,e.buttonText):null,e.buttonIconRight?l.default.createElement(c,{Icon:e.buttonIconRight}):null),exports.IconSvg=c,exports.Main_=v,exports.Main_Plain=x,exports.Page=R,exports.PageAlwaysVisible=D,exports.PageCards=K,exports.PageDesktopOnly=X,exports.PageDesktopPadding=q,exports.PageForty=V,exports.PageSingle=O,exports.PageSingleHeader=G,exports.PageSingleRight=Q,exports.PageSingleleft=W,exports.PageSixty=F,exports.PageSub=Y,exports.PageSubActions=J,exports.PageSubTitle=U,exports.PageTitle=j,exports.PageTools=N,exports.PageToolsCards=ee,exports.SideNav=_,exports.Slider=de,exports.SliderContainer=me,exports.SliderGrid=fe,exports.SliderOverlay=ce,exports.SliderTitle=ue,exports.SliderWrapper=se,exports.Slider_=e=>l.default.createElement(de,null,l.default.createElement(ce,{onClick:e.onClose}),l.default.createElement(se,null,l.default.createElement(ue,null,l.default.createElement("h2",null,e.title),l.default.createElement(v,{size:"normal",buttonText:"Done",buttonIconRight:"Check",onClick:e.onClose})),l.default.createElement(me,null,e.children))),exports.Steps=ae,exports.StepsActions=ie,exports.StepsComplete=le,exports.StepsContainer=ne,exports.StepsCurrent=re,exports.StepsWrapper=oe,exports.Theme=te,exports.ThemeDark={id:"dark",background:"var(--dark)",color:"var(--blanc)",low:"var(--gloomDark)",mid:"var(--gloom)",high:"var(--gloomLight)",overlay:"var(--blancOverlay)",in:"var(--insetShine)",inFocus:"var(--insetShineFocus)",out:"var(--outShine)",outFocus:"var(--outShineFocus)"},exports.ThemeLight={id:"light",background:"var(--white)",color:"var(--black)",low:"var(--greyLight)",mid:"var(--grey)",high:"var(--greyDark)",overlay:"var(--blackOverlay)",in:"var(--insetShadow)",inFocus:"var(--insetShadowFocus)",out:"var(--outShadow)",outFocus:"var(--outShadowFocus)"},exports.Tool_Box=e=>l.default.createElement(_,null,l.default.createElement("ul",null,e.children)),exports.Tool_Box_Button=e=>l.default.createElement(P,null,l.default.createElement("h5",{className:"ToolsNavTitle"},e.title),l.default.createElement("picture",null,l.default.createElement(c,{Icon:e.icon}))),exports.White_Plain=e=>l.default.createElement(E,{size:e.size,onClick:e.onClick},e.buttonIconLeft?l.default.createElement(c,{Icon:e.buttonIconLeft}):null,e.buttonText?l.default.createElement("span",null,e.buttonText):null,e.buttonIconRight?l.default.createElement(c,{Icon:e.buttonIconRight}):null),exports._Cta=d,exports._Grey=p,exports._Nav=e=>l.default.createElement(Ze,null,l.default.createElement(ve,{theme:e.theme}),l.default.createElement(xe,{text_Cta:e.text_Cta}),"Loggedin"===e.userRole?l.default.createElement("h1",null,"This is visitor"):l.default.createElement(Le,{hamState:e.hamState,text_Login:e.text_Login,onClick_Login:e.onClick_Login,onClick_Ham:e.onClick_Ham}));
+`;exports.Builder_Group=e=>l.default.createElement(pe,null,l.default.createElement("h4",null,e.title),e.children),exports.CardButton=y,exports.Card_Cover=e=>l.default.createElement(k,{center:e.center,onClick:e.onClick},l.default.createElement("header",null,e.img?l.default.createElement("picture",null,l.default.createElement("img",{src:e.img})):e.icon?l.default.createElement("figure",null,l.default.createElement(c,{Icon:e.icon})):e.map?l.default.createElement("map",null,l.default.createElement("iframe",{title:"Doitforme",src:e.map,frameborder:"0",allowfullscreen:"","aria-hidden":"false",tabindex:"0"})):null),l.default.createElement("main",null,e.title?l.default.createElement("h3",null,e.title):e.smallTitle?l.default.createElement("h5",null,e.smallTitle):null,e.children)),exports.Confirmation_=e=>l.default.createElement(H,null,l.default.createElement(_,null,l.default.createElement("h4",null,e.question),l.default.createElement(A,null,l.default.createElement(v,{onClick:e.onClickPrimary,buttonIconLeft:e.primaryIcon,buttonText:e.primaryText}),l.default.createElement(x,{onClick:e.onClickSecondary,buttonIconLeft:e.secondaryIcon,buttonText:e.secondaryText})))),exports.Cta_=d,exports.Edit_=e=>l.default.createElement(s,{size:"normal",onClick:e.onClick},l.default.createElement(c,{Icon:e.buttonIcon})),exports.Focus_=e=>l.default.createElement(m,{size:e.size,onClick:e.onClick},e.buttonIconLeft?l.default.createElement(c,{Icon:e.buttonIconLeft}):null,e.buttonText?l.default.createElement("span",null,e.buttonText):null,e.buttonIconRight?l.default.createElement(c,{Icon:e.buttonIconRight}):null),exports.Focus_Plain=e=>l.default.createElement(u,{size:e.size,onClick:e.onClick,onFocus:e.onFocus},e.buttonIconLeft?l.default.createElement(c,{Icon:e.buttonIconLeft}):null,e.buttonText?l.default.createElement("span",null,e.buttonText):null,e.buttonIconRight?l.default.createElement(c,{Icon:e.buttonIconRight}):null),exports.FormGroup=C,exports.FormInput=Z,exports.FormLabel=$,exports.Form_Input=e=>l.default.createElement(C,null,l.default.createElement(Z,{placeholder:e.placeholder}),l.default.createElement($,null,e.placeholder)),exports.Grey_=p,exports.Grey_Link=e=>l.default.createElement(h,{size:e.size,onClick:e.onClick},e.buttonIconLeft?l.default.createElement(c,{Icon:e.buttonIconLeft}):null,e.buttonText?l.default.createElement("span",null,e.buttonText):null,e.buttonIconRight?l.default.createElement(c,{Icon:e.buttonIconRight}):null),exports.IconSvg=c,exports.Main_=v,exports.Main_Plain=x,exports.Nav_=e=>l.default.createElement(Ie,null,l.default.createElement(ve,{theme:e.theme}),l.default.createElement(xe,{text_Cta:e.text_Cta}),"Registered"===e.userRole?l.default.createElement(ye,{user_Name:e.user_Name,user_Image:e.user_Image,user_ImageAlt:e.user_ImageAlt}):l.default.createElement(Ce,{hamState:e.hamState,text_Login:e.text_Login,onClick_Login:e.onClick_Login,onClick_Ham:e.onClick_Ham})),exports.Page=R,exports.PageAlwaysVisible=D,exports.PageCards=K,exports.PageDesktopOnly=X,exports.PageDesktopPadding=j,exports.PageForty=V,exports.PageSingle=O,exports.PageSingleHeader=G,exports.PageSingleRight=Q,exports.PageSingleleft=W,exports.PageSixty=N,exports.PageSub=Y,exports.PageSubActions=J,exports.PageSubTitle=U,exports.PageTitle=q,exports.PageTools=F,exports.PageToolsCards=ee,exports.SideNav=B,exports.Slider=de,exports.SliderContainer=ue,exports.SliderGrid=fe,exports.SliderOverlay=ce,exports.SliderTitle=me,exports.SliderWrapper=se,exports.Slider_=e=>l.default.createElement(de,null,l.default.createElement(ce,{onClick:e.onClose}),l.default.createElement(se,null,l.default.createElement(me,null,l.default.createElement("h2",null,e.title),l.default.createElement(v,{size:"normal",buttonText:"Done",buttonIconRight:"Check",onClick:e.onClose})),l.default.createElement(ue,null,e.children))),exports.Steps=ae,exports.StepsActions=ie,exports.StepsComplete=le,exports.StepsContainer=ne,exports.StepsCurrent=re,exports.StepsWrapper=oe,exports.Theme=te,exports.ThemeDark={id:"dark",background:"var(--dark)",color:"var(--blanc)",low:"var(--gloomDark)",mid:"var(--gloom)",high:"var(--gloomLight)",overlay:"var(--blancOverlay)",in:"var(--insetShine)",inFocus:"var(--insetShineFocus)",out:"var(--outShine)",outFocus:"var(--outShineFocus)"},exports.ThemeLight={id:"light",background:"var(--white)",color:"var(--black)",low:"var(--greyLight)",mid:"var(--grey)",high:"var(--greyDark)",overlay:"var(--blackOverlay)",in:"var(--insetShadow)",inFocus:"var(--insetShadowFocus)",out:"var(--outShadow)",outFocus:"var(--outShadowFocus)"},exports.Tool_Box=e=>l.default.createElement(B,null,l.default.createElement("ul",null,e.children)),exports.Tool_Box_Button=e=>l.default.createElement(P,null,l.default.createElement("h5",{className:"ToolsNavTitle"},e.title),l.default.createElement("picture",null,l.default.createElement(c,{Icon:e.icon}))),exports.White_Plain=e=>l.default.createElement(E,{size:e.size,onClick:e.onClick},e.buttonIconLeft?l.default.createElement(c,{Icon:e.buttonIconLeft}):null,e.buttonText?l.default.createElement("span",null,e.buttonText):null,e.buttonIconRight?l.default.createElement(c,{Icon:e.buttonIconRight}):null);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "monica-alexandria",
-  "version": "3.0.1",
+  "version": "3.0.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/export/components/elements/button/{_Cta.js → Cta_.js}

@@ -15,7 +15,7 @@ const Cta = styled(Button)`
     }
 `
 
-export const _Cta = (props) => {
+export const Cta_ = (props) => {
   return (
     <Cta size={props.size} onClick={props.onClick}>
         <span>{props.buttonText}</span>

package/src/export/components/elements/button/{_Grey.js → Grey_.js}

@@ -22,7 +22,7 @@ const Grey = styled(Button)`
     }
 `
 
-export const _Grey = (props) => {
+export const Grey_ = (props) => {
   return (
     <Grey size={props.size} onClick={props.onClick}>
         {props.buttonIconLeft ?

package/src/export/components/elements/button/index.js

@@ -1,8 +1,8 @@
-export * from './_Cta.js'
+export * from './Cta_.js'
 export * from './Edit_.js'
 export * from './Focus_.js'
 export * from './Focus_Plain.js'
-export * from './_Grey.js'
+export * from './Grey_.js'
 export * from './Grey_Link.js'
 export * from './Main_.js'
 export * from './Main_Plain.js'

package/src/export/components/nav/{_Nav.js → Nav_.js}

@@ -3,6 +3,7 @@ import styled from 'styled-components'
 import { device } from '../../helpers/MediaQ'
 import { Nav_Logo } from './Nav_Logo'
 import { Nav_Mid } from './Nav_Mid'
+import { Nav_Protected } from './Nav_Protected'
 import { Nav_Unprotected } from './Nav_Unprotected'
 
 const Nav = styled.nav`
@@ -24,16 +25,20 @@ const Nav = styled.nav`
     }
 `
 
-export const _Nav = (props) => {
+export const Nav_ = (props) => {
   return (
     <Nav>
         <Nav_Logo theme = {props.theme} />
         <Nav_Mid 
             text_Cta = {props.text_Cta}
         />
-        {props.userRole === 'Loggedin' ?
-            <h1>This is visitor</h1>
-        : 
+        {props.userRole === 'Registered' ?
+            <Nav_Protected 
+                user_Name = {props.user_Name}
+                user_Image = {props.user_Image}
+                user_ImageAlt = {props.user_ImageAlt}
+            />
+        :
             <Nav_Unprotected 
                 hamState = {props.hamState}
                 text_Login = {props.text_Login}

package/src/export/components/nav/Nav_Mid.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
 import { device } from '../../helpers/MediaQ'
-import { _Cta } from '../elements/button/_Cta'
+import { Cta_ } from '../elements/button/Cta_'
 
 export const NavMid = styled.div`
     justify-self: center;
@@ -14,7 +14,7 @@ export const NavMid = styled.div`
 export const Nav_Mid = (props) => {
   return (
     <NavMid>
-        <_Cta 
+        <Cta_ 
             size = 'normal'
             buttonText = {props.text_Cta}
         />

package/src/export/components/nav/Nav_Protected.js

@@ -0,0 +1,73 @@
+import React from 'react'
+import styled from 'styled-components'
+import { device } from '../../helpers/MediaQ'
+import { Grey_ } from '../elements'
+
+const NavProtected = styled.div`
+    justify-self: flex-end;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    position: relative;
+`
+
+const NavUser = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    cursor: pointer;
+    background: ${p => p.theme.mid};
+    border: 1px solid ${p => p.theme.mid};
+    border-radius: 2rem;
+    padding: .1rem 2rem .1rem .1rem;
+    transition-property: background, border;
+    transition-duration: .5s;
+
+    picture{
+        height: 3rem;
+        width: 3rem;
+        border-radius: 50%;
+        overflow: hidden;
+        border: 1px solid ${p => p.theme.background};
+
+        img{
+            height: 100%;
+            width: 100%;
+            object-fit: cover;
+        }
+    }
+
+    &:hover{
+        background: ${p => p.theme.low};
+        border: 1px solid ${p => p.theme.low};
+    }
+
+    @media ${device.sm}{
+        padding: 0;
+
+        h5{
+            display: none;
+        }
+    }
+`
+
+export const Nav_Protected = (props) => {
+  return (
+    <NavProtected>
+        <NavUser>
+            <picture>
+                <img src={props.user_Image} alt={props.user_ImageAlt}/>
+            </picture>
+            <h5>{props.user_Name}</h5>
+        </NavUser>
+        <Grey_ 
+            size = 'small'
+            buttonIconLeft = 'Ham'
+            onClick = {props.onClick_Ham}
+        />
+        {props.hamState &&
+            <Ham_/>
+        }
+    </NavProtected>
+  )
+}

package/src/export/components/nav/Nav_Theming.js

@@ -0,0 +1,52 @@
+import React from 'react'
+import styled from 'styled-components'
+
+const NavTheming = styled.div`
+    display: flex;
+    align-items: center;
+    gap: .5rem;
+
+    picture{
+      svg{
+        fill: ${p => p.theme.color};
+        width: var(--normalIcon);
+      }
+    }
+
+    section{
+        width: 4rem;
+        margin-bottom: .2rem;
+        height: 1.7rem;
+        border-radius: 1rem;
+        background: ${p => p.theme.low};
+        position: relative;
+        cursor: pointer;
+
+        div{
+            position: absolute;
+            top: .1rem;
+            left: .1rem;
+            height: 1.5rem;
+            width: 1.5rem;
+            border-radius: 50%;
+            background: var(--main);
+            transition: transform .5s;
+        }
+
+        .Light{
+            transform: translateX(0);
+        }
+
+        .Dark{
+            transform: translateX(2.3rem);
+        }
+    }
+`
+
+export const Nav_Theming = () => {
+  return (
+    <NavTheming>
+        
+    </NavTheming>
+  )
+}

package/src/export/components/nav/Nav_Unprotected.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
 import { device } from '../../helpers/MediaQ'
-import { _Grey } from '../elements/button/_Grey'
+import { Gr, Grey_, Grey_ey_ } from '../elements/button/Grey_'
 import { Main_Plain } from '../elements/button/Main_Plain'
 import { Nav_Ham } from './Nav_Ham'
 
@@ -33,7 +33,7 @@ export const Nav_Unprotected = (props) => {
                 onClick = {props.onClick_Login}
             />
         </NavDesktop>
-        <_Grey 
+        <Grey_ 
             size = 'small'
             buttonIconLeft = 'Ham'
             onClick = {props.onClick_Ham}

package/src/export/components/nav/index.js

@@ -1 +1 @@
-export * from './_Nav.js'
+export * from './Nav_.js'