monica-alexandria 3.19.0 → 3.19.2

package/dist/index.es.js

@@ -663,7 +663,7 @@ import e,{createContext as t,useContext as n,useEffect as r,useState as a}from"r
       fill: ${e=>e.theme.color};
     }
   }
-`,we=t=>e.createElement(ye,null,e.createElement(pe,{value:t.value,className:t.className,placeholder:t.placeholder,id:t.id,autoComplete:"off",type:"text",onChange:t.onChange,defaultValue:t.defaultValue,onKeyPress:t.onKeyPress,onKeyDown:t.onKeyDown,disabled:t.disabled}),e.createElement(ve,null,t.placeholder),t.list?e.createElement(b,{size:"small",text:t.add,iconLeft:"Add",className:"FormAddButton",onClick:t.onAdd}):null,t.required?e.createElement(de,{className:"ValidatorRequired"},e.createElement(d,{Icon:"Asterisk"})):null,t.errors?e.createElement(ie,{className:"ValidatorErrors"},t.errors.map(((t,n)=>e.createElement(se,{key:n},e.createElement(d,{Icon:"Error"}),e.createElement("h6",null,t))))):null,t.successes?e.createElement(ie,{className:"ValidatorSuccesses"},t.successes.map(((t,n)=>e.createElement(le,{key:n},e.createElement(d,{Icon:"Check"}),e.createElement("h6",null,t))))):null,t.helpers?e.createElement(ie,{className:"ValidatorHelpers"},t.helpers.map(((t,n)=>e.createElement(ue,{key:n},e.createElement(d,{Icon:"Warning"}),e.createElement("h6",null,t))))):null,t.tips?e.createElement(ie,{className:"ValidatorTips"},t.tips.map(((t,n)=>e.createElement(ce,{key:n},e.createElement(d,{Icon:"Tip"}),e.createElement("h6",null,t))))):null,t.list?e.createElement(_e,null,t.defaultListItem?e.createElement(Ee,null,e.createElement("li",null,e.createElement(d,{Icon:t.icon_ListItem}),e.createElement("h6",null,t.defaultListItem),t.deleteDefaultListItem?e.createElement(A,{onClick:t.onDeleteDefault,size:"small",iconLeft:"Delete"}):null)):null,t.list.map(((n,r)=>e.createElement(Ee,{key:r},e.createElement("li",null,e.createElement(d,{Icon:t.icon_ListItem,class_Icon:t.class_iconListItem}),e.createElement("h6",null,n),e.createElement(A,{onClick:()=>t.onDelete(r),size:"small",iconLeft:"Delete"}),t.listItemExtra))))):null),xe=i.div`
+`,we=t=>e.createElement(ye,null,e.createElement(pe,{value:t.value,className:t.className,placeholder:t.placeholder,id:t.id,autoComplete:"off",type:"text",onChange:t.onChange,defaultValue:t.defaultValue,onKeyPress:t.onKeyPress,onKeyDown:t.onKeyDown,disabled:t.disabled}),e.createElement(ve,null,t.placeholder),t.list?e.createElement(b,{size:"small",text:t.add,iconLeft:"Add",className:"FormAddButton",onClick:t.onAdd}):null,t.required?e.createElement(de,{className:"ValidatorRequired"},e.createElement(d,{Icon:"Asterisk"})):null,t.errors?e.createElement(ie,{className:"ValidatorErrors"},t.errors.map(((t,n)=>e.createElement(se,{key:n},e.createElement(d,{Icon:"Error"}),e.createElement("h6",null,t))))):null,t.successes?e.createElement(ie,{className:"ValidatorSuccesses"},t.successes.map(((t,n)=>e.createElement(le,{key:n},e.createElement(d,{Icon:"Check"}),e.createElement("h6",null,t))))):null,t.helpers?e.createElement(ie,{className:"ValidatorHelpers"},t.helpers.map(((t,n)=>e.createElement(ue,{key:n},e.createElement(d,{Icon:"Warning"}),e.createElement("h6",null,t))))):null,t.tips?e.createElement(ie,{className:"ValidatorTips"},t.tips.map(((t,n)=>e.createElement(ce,{key:n},e.createElement(d,{Icon:"Tip"}),e.createElement("h6",null,t))))):null,t.list?e.createElement(_e,null,t.defaultListItem?e.createElement(Ee,null,e.createElement("li",null,e.createElement(d,{Icon:t.icon_ListItem}),e.createElement("h6",null,t.defaultListItem),t.deleteDefaultListItem?e.createElement(A,{onClick:t.onDeleteDefault,size:"small",iconLeft:"Delete"}):null)):null,t.list.map(((n,r)=>e.createElement(Ee,{key:r},e.createElement("li",null,e.createElement(d,{Icon:t.icon_ListItem,class_Icon:t.class_iconListItem}),e.createElement("h6",null,n),e.createElement(A,{onClick:()=>t.onDelete(r),size:"small",iconLeft:"Delete"})),t.listItemExtra)))):null),xe=i.div`
     position: relative;
 
     select{
@@ -1282,13 +1282,17 @@ import e,{createContext as t,useContext as n,useEffect as r,useState as a}from"r
         padding: 1rem 2rem;
     }
 `,Tn=t=>e.createElement(zn,null,e.createElement(sn,{onClick_Logo:t.onClick_Logo}),t.no_Cta?e.createElement("div",null):e.createElement(hn,{onClick_Cta:t.onClick_Cta,text_Cta:t.text_Cta}),"Protected"===t.role?e.createElement(Sn,{role:t.role,img_Account:t.img_Account,img_Account_Main:t.img_Account,imgAlt_Account:t.imgAlt_Account,imgAlt_Account_Main:t.imgAlt_Account,links:t.links,firstname_Account:t.firstname_Account,text_Account_Main:t.firstname_Account,onClick_Account:t.onClick_Account,onCLick_Account_Main:t.onClick_Account,text_Title_Main:t.text_Title_Main,text_Theme_Main:t.text_Theme_Main,onClick_Settings_Main:t.onClick_Settings_Main,text_Settings_Main:t.text_Settings_Main,onCLick_Logout:t.onCLick_Logout,text_Logout:t.text_Logout,text_Title_Region:t.text_Title_Region,text_Title_Language:t.text_Title_Language,onClick_Greek_Language:t.onClick_Greek_Language,onClick_English_Language:t.onClick_English_Language,onClick_German_Language:t.onClick_German_Language}):e.createElement(Rn,{role:t.role,links:t.links,onClick_Login:t.onClick_Login,text_Login:t.text_Login,text_Title_Main:t.text_Title_Main,text_Theme_Main:t.text_Theme_Main,text_Title_Region:t.text_Title_Region,text_Title_Language:t.text_Title_Language,onClick_Greek_Language:t.onClick_Greek_Language,onClick_English_Language:t.onClick_English_Language,onClick_German_Language:t.onClick_German_Language})),Bn=i.div`
-    position: fixed;
-    left: 0;
-    top: 6rem;
-    z-index: 5;
-    width: 8.5rem;
-    height: 100vh;
-    border-right: 1px solid ${e=>e.theme.mid};
+  position: fixed;
+  left: 0;
+  top: 6rem;
+  z-index: 5;
+  width: 8.5rem;
+  height: 100vh;
+  border-right: 1px solid ${e=>e.theme.mid};
+
+  @media ${device.md} {
+    display: none;
+  }
 `,Zn=t=>e.createElement(Bn,null,t.children),jn=i.li`
     cursor: pointer;
     transition-property: transform;
@@ -1636,180 +1640,179 @@ import e,{createContext as t,useContext as n,useEffect as r,useState as a}from"r
     width: 100%;
   }
 `,Ir=t=>{const{alerts:a,setAlerts:i}=n(Ne);return r((()=>{a.length&&a.forEach((e=>{(e=>{let n=t.duration?t.duration:4e3;setTimeout((()=>{let t=JSON.parse(JSON.stringify(a));t.splice(e,1),i(t)}),n)})(e)}))}),[a]),e.createElement(kr,{storybook:t.storybook},a.slice(0,3).map(((t,n)=>e.createElement(Mr,{status:t.message.status,key:n},e.createElement(Lr,null,e.createElement(d,{class_Icon:"Loading"===t.message.status?"Loading":"",Icon:"Error"===t.message.status?"Xicon":"Loading"===t.message.status?"Loading":"Check"})),e.createElement(Cr,null,e.createElement("h6",null,t.message.text))))))},Ar=i.div`
-    padding-top: 6rem;
-    position: relative;
+  padding-top: 6rem;
+  position: relative;
 
-    .HideScroll{
-        height: calc(100vh - 6rem);
-        overflow: hidden;
-    }
+  .HideScroll {
+    height: calc(100vh - 6rem);
+    overflow: hidden;
+  }
 `,Sr=i.div`
-    padding: 0 4rem;
+  padding: 0 4rem;
 
-    @media ${Q.md} {
-        padding: 0 2rem;
-    }
+  @media ${Q.md} {
+    padding: 0 2rem;
+  }
 `,$r=i.div`
-    display: grid;
-    grid-template-columns: minmax(40rem, 40%) 1fr;
-    grid-gap: 4rem;
-    padding: 0 4rem;
+  display: grid;
+  grid-template-columns: minmax(40rem, 40%) 1fr;
+  grid-gap: 4rem;
+  padding: 0 4rem;
 
-    @media ${Q.md} {
-        grid-template-columns: 1fr;
-        padding: 0 2rem;
-    }
+  @media ${Q.md} {
+    grid-template-columns: 1fr;
+    padding: 0 2rem;
+  }
 `,Nr=i.div`
-    display: grid;
-    grid-template-columns: 1fr minmax(40rem, 40%);
-    grid-gap: 4rem;
-    padding: 0 4rem;
+  display: grid;
+  grid-template-columns: 1fr minmax(40rem, 40%);
+  grid-gap: 4rem;
+  padding: 0 4rem;
 
-    @media ${Q.md} {
-        grid-template-columns: 1fr;
-        padding: 0 2rem;
-    }
+  @media ${Q.md} {
+    grid-template-columns: 1fr;
+    padding: 0 2rem;
+  }
 `,Rr=i.div`
-    padding: 0 4rem 2rem 13rem;
+  padding: 0 4rem 2rem 13rem;
+
+  @media ${Q.md} {
+    padding: 0 4rem 2rem 4rem;
+  }
 `,zr=i.div`
-    display: grid;
-    grid-template-columns: 1fr minmax(40rem, 40%);
-    grid-gap: 4rem;
-    padding: 0 4rem 2rem 13rem;
+  display: grid;
+  grid-template-columns: 1fr minmax(40rem, 40%);
+  grid-gap: 4rem;
+  padding: 0 4rem 2rem 13rem;
 
-    @media ${Q.md} {
-        grid-template-columns: 1fr;
-    }
+  @media ${Q.md} {
+    grid-template-columns: 1fr;
+    padding: 0 4rem 2rem 4rem;
+  }
 `,Tr=i.div`
-    display: grid;
-    grid-template-columns: minmax(40rem, 40%) 1fr;
-    grid-gap: 4rem;
-    padding: 0 4rem 2rem 13rem;
+  display: grid;
+  grid-template-columns: minmax(40rem, 40%) 1fr;
+  grid-gap: 4rem;
+  padding: 0 4rem 2rem 13rem;
 
-    @media ${Q.md} {
-        grid-template-columns: 1fr;
-    }
+  @media ${Q.md} {
+    grid-template-columns: 1fr;
+    padding: 0 4rem 2rem 4rem;
+  }
 `,Br=i.div`
-    width: 100%;
+  width: 100%;
 `,Zr=i.div`
-    width: 100%;
+  width: 100%;
 
-    @media ${Q.md} {
-        display: none;
-    }
+  @media ${Q.md} {
+    display: none;
+  }
 `,jr=i.div`
-    padding-top: 8rem;
+  padding-top: 8rem;
 `,Pr=i.div`
-    padding: 2rem 0;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 1rem;
-`,Hr=i.div`
-    
-`,Dr=i.div`
-    position: relative;
-
-    header{
-
-        
-    }
+  padding: 2rem 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 1rem;
+`,Hr=i.div``,Dr=i.div`
+  position: relative;
 
-    
+  header {
+  }
 `,Fr=i.div`
-    padding-left: 4rem;
+  padding-left: 4rem;
 `,Gr=i.div`
-    padding-right: 4rem;
+  padding-right: 4rem;
 `,Or=i($r)`
-    padding: 0;
+  padding: 0;
 
-    aside{
+  aside {
+    header {
+      position: relative;
 
-        header{
-            position: relative;
-
-                picture{
-                    width: 100%;
-                    aspect-ratio: 3 / 2;
-                    display: block;
-                    overflow: hidden;
+      picture {
+        width: 100%;
+        aspect-ratio: 3 / 2;
+        display: block;
+        overflow: hidden;
 
-                img{
-                    height: 100%;
-                    width: 100%;
-                    object-fit: cover;
-                }
-            }
+        img {
+          height: 100%;
+          width: 100%;
+          object-fit: cover;
+        }
+      }
 
-            figure{
-                position: absolute;
-                bottom: -10rem;
-                left: calc(50%);
-                transform: translateX(-50%);
-                height: 20rem;
-                width: 20rem;
-                border-radius: 50%;
-                overflow: hidden;
-                border: 2px solid ${e=>e.theme.background};
+      figure {
+        position: absolute;
+        bottom: -10rem;
+        left: calc(50%);
+        transform: translateX(-50%);
+        height: 20rem;
+        width: 20rem;
+        border-radius: 50%;
+        overflow: hidden;
+        border: 2px solid ${e=>e.theme.background};
 
-            img{
-                height: 100%;
-                width: 100%;
-                object-fit: cover;
-            }
+        img {
+          height: 100%;
+          width: 100%;
+          object-fit: cover;
         }
+      }
     }
 
-        footer{
-            padding: 2rem 4rem;
-        }
+    footer {
+      padding: 2rem 4rem;
     }
+  }
 
-    main{
-        padding: 2rem 4rem;
-        display: flex;
-        flex-direction: column;
-        gap: 4rem;
-    }
+  main {
+    padding: 2rem 4rem;
+    display: flex;
+    flex-direction: column;
+    gap: 4rem;
+  }
 `,Vr=i.div`
-    padding: 10rem 1rem 2rem 1rem;
-    text-align: center;
+  padding: 10rem 1rem 2rem 1rem;
+  text-align: center;
 `,Wr=i.div`
-    display: flex;
-    align-items: center;
-    gap: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
 `,qr=i.div`
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    align-items: flex-start;
-    grid-gap: 2rem;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  align-items: flex-start;
+  grid-gap: 2rem;
 
-    @media ${Q.xl}{
-        grid-template-columns: 1fr 1fr;
-    }
+  @media ${Q.xl} {
+    grid-template-columns: 1fr 1fr;
+  }
 
-    @media ${Q.md}{
-        grid-template-columns: 1fr 1fr 1fr;
-    }
+  @media ${Q.md} {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
 
-    @media ${Q.sm}{
-        grid-template-columns: 1fr 1fr;
-    }
+  @media ${Q.sm} {
+    grid-template-columns: 1fr 1fr;
+  }
 
-    @media ${Q.xs}{
-        grid-template-columns: 1fr;
-    }
+  @media ${Q.xs} {
+    grid-template-columns: 1fr;
+  }
 `,Kr=i(qr)`
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
 `,Ur=i.div`
-    height: calc(100vh - 8rem);
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  height: calc(100vh - 8rem);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-    img{
-        object-fit: contain;
-    }
+  img {
+    object-fit: contain;
+  }
 `,Xr=i($r)`
     width: 100%;
 `,Jr=i.div`

package/dist/index.js

@@ -663,7 +663,7 @@
       fill: ${e=>e.theme.color};
     }
   }
-`,se=e=>a.default.createElement(le,null,a.default.createElement(oe,{value:e.value,className:e.className,placeholder:e.placeholder,id:e.id,autoComplete:"off",type:"text",onChange:e.onChange,defaultValue:e.defaultValue,onKeyPress:e.onKeyPress,onKeyDown:e.onKeyDown,disabled:e.disabled}),a.default.createElement(ie,null,e.placeholder),e.list?a.default.createElement(y,{size:"small",text:e.add,iconLeft:"Add",className:"FormAddButton",onClick:e.onAdd}):null,e.required?a.default.createElement(ee,{className:"ValidatorRequired"},a.default.createElement(u,{Icon:"Asterisk"})):null,e.errors?a.default.createElement(K,{className:"ValidatorErrors"},e.errors.map(((e,t)=>a.default.createElement(Q,{key:t},a.default.createElement(u,{Icon:"Error"}),a.default.createElement("h6",null,e))))):null,e.successes?a.default.createElement(K,{className:"ValidatorSuccesses"},e.successes.map(((e,t)=>a.default.createElement(J,{key:t},a.default.createElement(u,{Icon:"Check"}),a.default.createElement("h6",null,e))))):null,e.helpers?a.default.createElement(K,{className:"ValidatorHelpers"},e.helpers.map(((e,t)=>a.default.createElement(Y,{key:t},a.default.createElement(u,{Icon:"Warning"}),a.default.createElement("h6",null,e))))):null,e.tips?a.default.createElement(K,{className:"ValidatorTips"},e.tips.map(((e,t)=>a.default.createElement(X,{key:t},a.default.createElement(u,{Icon:"Tip"}),a.default.createElement("h6",null,e))))):null,e.list?a.default.createElement(ce,null,e.defaultListItem?a.default.createElement(ue,null,a.default.createElement("li",null,a.default.createElement(u,{Icon:e.icon_ListItem}),a.default.createElement("h6",null,e.defaultListItem),e.deleteDefaultListItem?a.default.createElement(b,{onClick:e.onDeleteDefault,size:"small",iconLeft:"Delete"}):null)):null,e.list.map(((t,n)=>a.default.createElement(ue,{key:n},a.default.createElement("li",null,a.default.createElement(u,{Icon:e.icon_ListItem,class_Icon:e.class_iconListItem}),a.default.createElement("h6",null,t),a.default.createElement(b,{onClick:()=>e.onDelete(n),size:"small",iconLeft:"Delete"}),e.listItemExtra))))):null),de=o.default.div`
+`,se=e=>a.default.createElement(le,null,a.default.createElement(oe,{value:e.value,className:e.className,placeholder:e.placeholder,id:e.id,autoComplete:"off",type:"text",onChange:e.onChange,defaultValue:e.defaultValue,onKeyPress:e.onKeyPress,onKeyDown:e.onKeyDown,disabled:e.disabled}),a.default.createElement(ie,null,e.placeholder),e.list?a.default.createElement(y,{size:"small",text:e.add,iconLeft:"Add",className:"FormAddButton",onClick:e.onAdd}):null,e.required?a.default.createElement(ee,{className:"ValidatorRequired"},a.default.createElement(u,{Icon:"Asterisk"})):null,e.errors?a.default.createElement(K,{className:"ValidatorErrors"},e.errors.map(((e,t)=>a.default.createElement(Q,{key:t},a.default.createElement(u,{Icon:"Error"}),a.default.createElement("h6",null,e))))):null,e.successes?a.default.createElement(K,{className:"ValidatorSuccesses"},e.successes.map(((e,t)=>a.default.createElement(J,{key:t},a.default.createElement(u,{Icon:"Check"}),a.default.createElement("h6",null,e))))):null,e.helpers?a.default.createElement(K,{className:"ValidatorHelpers"},e.helpers.map(((e,t)=>a.default.createElement(Y,{key:t},a.default.createElement(u,{Icon:"Warning"}),a.default.createElement("h6",null,e))))):null,e.tips?a.default.createElement(K,{className:"ValidatorTips"},e.tips.map(((e,t)=>a.default.createElement(X,{key:t},a.default.createElement(u,{Icon:"Tip"}),a.default.createElement("h6",null,e))))):null,e.list?a.default.createElement(ce,null,e.defaultListItem?a.default.createElement(ue,null,a.default.createElement("li",null,a.default.createElement(u,{Icon:e.icon_ListItem}),a.default.createElement("h6",null,e.defaultListItem),e.deleteDefaultListItem?a.default.createElement(b,{onClick:e.onDeleteDefault,size:"small",iconLeft:"Delete"}):null)):null,e.list.map(((t,n)=>a.default.createElement(ue,{key:n},a.default.createElement("li",null,a.default.createElement(u,{Icon:e.icon_ListItem,class_Icon:e.class_iconListItem}),a.default.createElement("h6",null,t),a.default.createElement(b,{onClick:()=>e.onDelete(n),size:"small",iconLeft:"Delete"})),e.listItemExtra)))):null),de=o.default.div`
     position: relative;
 
     select{
@@ -1282,13 +1282,17 @@
         padding: 1rem 2rem;
     }
 `,pn=o.default.div`
-    position: fixed;
-    left: 0;
-    top: 6rem;
-    z-index: 5;
-    width: 8.5rem;
-    height: 100vh;
-    border-right: 1px solid ${e=>e.theme.mid};
+  position: fixed;
+  left: 0;
+  top: 6rem;
+  z-index: 5;
+  width: 8.5rem;
+  height: 100vh;
+  border-right: 1px solid ${e=>e.theme.mid};
+
+  @media ${device.md} {
+    display: none;
+  }
 `,vn=o.default.li`
     cursor: pointer;
     transition-property: transform;
@@ -1636,180 +1640,179 @@
     width: 100%;
   }
 `,er=o.default.div`
-    padding-top: 6rem;
-    position: relative;
+  padding-top: 6rem;
+  position: relative;
 
-    .HideScroll{
-        height: calc(100vh - 6rem);
-        overflow: hidden;
-    }
+  .HideScroll {
+    height: calc(100vh - 6rem);
+    overflow: hidden;
+  }
 `,tr=o.default.div`
-    padding: 0 4rem;
+  padding: 0 4rem;
 
-    @media ${G.md} {
-        padding: 0 2rem;
-    }
+  @media ${G.md} {
+    padding: 0 2rem;
+  }
 `,nr=o.default.div`
-    display: grid;
-    grid-template-columns: minmax(40rem, 40%) 1fr;
-    grid-gap: 4rem;
-    padding: 0 4rem;
+  display: grid;
+  grid-template-columns: minmax(40rem, 40%) 1fr;
+  grid-gap: 4rem;
+  padding: 0 4rem;
 
-    @media ${G.md} {
-        grid-template-columns: 1fr;
-        padding: 0 2rem;
-    }
+  @media ${G.md} {
+    grid-template-columns: 1fr;
+    padding: 0 2rem;
+  }
 `,rr=o.default.div`
-    display: grid;
-    grid-template-columns: 1fr minmax(40rem, 40%);
-    grid-gap: 4rem;
-    padding: 0 4rem;
+  display: grid;
+  grid-template-columns: 1fr minmax(40rem, 40%);
+  grid-gap: 4rem;
+  padding: 0 4rem;
 
-    @media ${G.md} {
-        grid-template-columns: 1fr;
-        padding: 0 2rem;
-    }
+  @media ${G.md} {
+    grid-template-columns: 1fr;
+    padding: 0 2rem;
+  }
 `,ar=o.default.div`
-    padding: 0 4rem 2rem 13rem;
+  padding: 0 4rem 2rem 13rem;
+
+  @media ${G.md} {
+    padding: 0 4rem 2rem 4rem;
+  }
 `,or=o.default.div`
-    display: grid;
-    grid-template-columns: 1fr minmax(40rem, 40%);
-    grid-gap: 4rem;
-    padding: 0 4rem 2rem 13rem;
+  display: grid;
+  grid-template-columns: 1fr minmax(40rem, 40%);
+  grid-gap: 4rem;
+  padding: 0 4rem 2rem 13rem;
 
-    @media ${G.md} {
-        grid-template-columns: 1fr;
-    }
+  @media ${G.md} {
+    grid-template-columns: 1fr;
+    padding: 0 4rem 2rem 4rem;
+  }
 `,ir=o.default.div`
-    display: grid;
-    grid-template-columns: minmax(40rem, 40%) 1fr;
-    grid-gap: 4rem;
-    padding: 0 4rem 2rem 13rem;
+  display: grid;
+  grid-template-columns: minmax(40rem, 40%) 1fr;
+  grid-gap: 4rem;
+  padding: 0 4rem 2rem 13rem;
 
-    @media ${G.md} {
-        grid-template-columns: 1fr;
-    }
+  @media ${G.md} {
+    grid-template-columns: 1fr;
+    padding: 0 4rem 2rem 4rem;
+  }
 `,lr=o.default.div`
-    width: 100%;
+  width: 100%;
 `,cr=o.default.div`
-    width: 100%;
+  width: 100%;
 
-    @media ${G.md} {
-        display: none;
-    }
+  @media ${G.md} {
+    display: none;
+  }
 `,ur=o.default.div`
-    padding-top: 8rem;
+  padding-top: 8rem;
 `,sr=o.default.div`
-    padding: 2rem 0;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 1rem;
-`,dr=o.default.div`
-    
-`,fr=o.default.div`
-    position: relative;
-
-    header{
-
-        
-    }
+  padding: 2rem 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 1rem;
+`,dr=o.default.div``,fr=o.default.div`
+  position: relative;
 
-    
+  header {
+  }
 `,hr=o.default.div`
-    padding-left: 4rem;
+  padding-left: 4rem;
 `,mr=o.default.div`
-    padding-right: 4rem;
+  padding-right: 4rem;
 `,gr=o.default(nr)`
-    padding: 0;
+  padding: 0;
 
-    aside{
+  aside {
+    header {
+      position: relative;
 
-        header{
-            position: relative;
-
-                picture{
-                    width: 100%;
-                    aspect-ratio: 3 / 2;
-                    display: block;
-                    overflow: hidden;
+      picture {
+        width: 100%;
+        aspect-ratio: 3 / 2;
+        display: block;
+        overflow: hidden;
 
-                img{
-                    height: 100%;
-                    width: 100%;
-                    object-fit: cover;
-                }
-            }
+        img {
+          height: 100%;
+          width: 100%;
+          object-fit: cover;
+        }
+      }
 
-            figure{
-                position: absolute;
-                bottom: -10rem;
-                left: calc(50%);
-                transform: translateX(-50%);
-                height: 20rem;
-                width: 20rem;
-                border-radius: 50%;
-                overflow: hidden;
-                border: 2px solid ${e=>e.theme.background};
+      figure {
+        position: absolute;
+        bottom: -10rem;
+        left: calc(50%);
+        transform: translateX(-50%);
+        height: 20rem;
+        width: 20rem;
+        border-radius: 50%;
+        overflow: hidden;
+        border: 2px solid ${e=>e.theme.background};
 
-            img{
-                height: 100%;
-                width: 100%;
-                object-fit: cover;
-            }
+        img {
+          height: 100%;
+          width: 100%;
+          object-fit: cover;
         }
+      }
     }
 
-        footer{
-            padding: 2rem 4rem;
-        }
+    footer {
+      padding: 2rem 4rem;
     }
+  }
 
-    main{
-        padding: 2rem 4rem;
-        display: flex;
-        flex-direction: column;
-        gap: 4rem;
-    }
+  main {
+    padding: 2rem 4rem;
+    display: flex;
+    flex-direction: column;
+    gap: 4rem;
+  }
 `,pr=o.default.div`
-    padding: 10rem 1rem 2rem 1rem;
-    text-align: center;
+  padding: 10rem 1rem 2rem 1rem;
+  text-align: center;
 `,vr=o.default.div`
-    display: flex;
-    align-items: center;
-    gap: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
 `,yr=o.default.div`
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    align-items: flex-start;
-    grid-gap: 2rem;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  align-items: flex-start;
+  grid-gap: 2rem;
 
-    @media ${G.xl}{
-        grid-template-columns: 1fr 1fr;
-    }
+  @media ${G.xl} {
+    grid-template-columns: 1fr 1fr;
+  }
 
-    @media ${G.md}{
-        grid-template-columns: 1fr 1fr 1fr;
-    }
+  @media ${G.md} {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
 
-    @media ${G.sm}{
-        grid-template-columns: 1fr 1fr;
-    }
+  @media ${G.sm} {
+    grid-template-columns: 1fr 1fr;
+  }
 
-    @media ${G.xs}{
-        grid-template-columns: 1fr;
-    }
+  @media ${G.xs} {
+    grid-template-columns: 1fr;
+  }
 `,_r=o.default(yr)`
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
 `,xr=o.default.div`
-    height: calc(100vh - 8rem);
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  height: calc(100vh - 8rem);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-    img{
-        object-fit: contain;
-    }
+  img {
+    object-fit: contain;
+  }
 `,Er=o.default(nr)`
     width: 100%;
 `,wr=o.default.div`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "monica-alexandria",
-  "version": "3.19.0",
+  "version": "3.19.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/form/Input_.js

@@ -147,8 +147,8 @@ export const Input_ = (props) => {
                   size="small"
                   iconLeft="Delete"
                 />
-                {props.listItemExtra}
               </li>
+              {props.listItemExtra}
             </FormListItem>
           ))}
         </FormList>

package/src/export/components/sidebar/Sidebar_.js

@@ -1,20 +1,20 @@
-import React from 'react'
-import styled from 'styled-components'
+import React from "react";
+import styled from "styled-components";
 
 const Sidebar = styled.div`
-    position: fixed;
-    left: 0;
-    top: 6rem;
-    z-index: 5;
-    width: 8.5rem;
-    height: 100vh;
-    border-right: 1px solid ${p => p.theme.mid};
-`
+  position: fixed;
+  left: 0;
+  top: 6rem;
+  z-index: 5;
+  width: 8.5rem;
+  height: 100vh;
+  border-right: 1px solid ${(p) => p.theme.mid};
+
+  @media ${device.md} {
+    display: none;
+  }
+`;
 
 export const Sidebar_ = (props) => {
-  return (
-    <Sidebar>
-        {props.children}
-    </Sidebar>
-  )
-}
+  return <Sidebar>{props.children}</Sidebar>;
+};

package/src/export/styles/Page.js

@@ -2,221 +2,217 @@ import styled from "styled-components";
 import { device } from "../helpers/MediaQ";
 
 export const Page = styled.div`
-    padding-top: 6rem;
-    position: relative;
+  padding-top: 6rem;
+  position: relative;
 
-    .HideScroll{
-        height: calc(100vh - 6rem);
-        overflow: hidden;
-    }
-`
+  .HideScroll {
+    height: calc(100vh - 6rem);
+    overflow: hidden;
+  }
+`;
 
 export const PageFull = styled.div`
-    padding: 0 4rem;
+  padding: 0 4rem;
 
-    @media ${device.md} {
-        padding: 0 2rem;
-    }
-`
+  @media ${device.md} {
+    padding: 0 2rem;
+  }
+`;
 
 export const PageForty = styled.div`
-    display: grid;
-    grid-template-columns: minmax(40rem, 40%) 1fr;
-    grid-gap: 4rem;
-    padding: 0 4rem;
-
-    @media ${device.md} {
-        grid-template-columns: 1fr;
-        padding: 0 2rem;
-    }
-`
+  display: grid;
+  grid-template-columns: minmax(40rem, 40%) 1fr;
+  grid-gap: 4rem;
+  padding: 0 4rem;
+
+  @media ${device.md} {
+    grid-template-columns: 1fr;
+    padding: 0 2rem;
+  }
+`;
 
 export const PageSixty = styled.div`
-    display: grid;
-    grid-template-columns: 1fr minmax(40rem, 40%);
-    grid-gap: 4rem;
-    padding: 0 4rem;
-
-    @media ${device.md} {
-        grid-template-columns: 1fr;
-        padding: 0 2rem;
-    }
-`
+  display: grid;
+  grid-template-columns: 1fr minmax(40rem, 40%);
+  grid-gap: 4rem;
+  padding: 0 4rem;
+
+  @media ${device.md} {
+    grid-template-columns: 1fr;
+    padding: 0 2rem;
+  }
+`;
 
 export const PageTools = styled.div`
-    padding: 0 4rem 2rem 13rem;
-`
+  padding: 0 4rem 2rem 13rem;
+
+  @media ${device.md} {
+    padding: 0 4rem 2rem 4rem;
+  }
+`;
 
 export const PageToolsSixty = styled.div`
-    display: grid;
-    grid-template-columns: 1fr minmax(40rem, 40%);
-    grid-gap: 4rem;
-    padding: 0 4rem 2rem 13rem;
+  display: grid;
+  grid-template-columns: 1fr minmax(40rem, 40%);
+  grid-gap: 4rem;
+  padding: 0 4rem 2rem 13rem;
 
-    @media ${device.md} {
-        grid-template-columns: 1fr;
-    }
-`
+  @media ${device.md} {
+    grid-template-columns: 1fr;
+    padding: 0 4rem 2rem 4rem;
+  }
+`;
 
 export const PageToolsForty = styled.div`
-    display: grid;
-    grid-template-columns: minmax(40rem, 40%) 1fr;
-    grid-gap: 4rem;
-    padding: 0 4rem 2rem 13rem;
+  display: grid;
+  grid-template-columns: minmax(40rem, 40%) 1fr;
+  grid-gap: 4rem;
+  padding: 0 4rem 2rem 13rem;
 
-    @media ${device.md} {
-        grid-template-columns: 1fr;
-    }
-`
+  @media ${device.md} {
+    grid-template-columns: 1fr;
+    padding: 0 4rem 2rem 4rem;
+  }
+`;
 
 export const PageAlwaysVisible = styled.div`
-    width: 100%;
-`
+  width: 100%;
+`;
 
 export const PageDesktopOnly = styled.div`
-    width: 100%;
+  width: 100%;
 
-    @media ${device.md} {
-        display: none;
-    }
-`
+  @media ${device.md} {
+    display: none;
+  }
+`;
 
 export const PageDesktopPadding = styled.div`
-    padding-top: 8rem;
-`
+  padding-top: 8rem;
+`;
 
 export const PageTitle = styled.div`
-    padding: 2rem 0;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 1rem;
-`
+  padding: 2rem 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 1rem;
+`;
 
-export const PageSingle = styled.div`
-    
-`
+export const PageSingle = styled.div``;
 
 export const PageSingleHeader = styled.div`
-    position: relative;
-
-    header{
+  position: relative;
 
-        
-    }
-
-    
-`
+  header {
+  }
+`;
 
 export const PageSingleleft = styled.div`
-    padding-left: 4rem;
-` 
+  padding-left: 4rem;
+`;
 
 export const PageSingleRight = styled.div`
-    padding-right: 4rem;
-` 
+  padding-right: 4rem;
+`;
 
+export const PageSub = styled(PageForty)`
+  padding: 0;
 
+  aside {
+    header {
+      position: relative;
 
-export const PageSub = styled(PageForty)`
-    padding: 0;
-
-    aside{
-
-        header{
-            position: relative;
-
-                picture{
-                    width: 100%;
-                    aspect-ratio: 3 / 2;
-                    display: block;
-                    overflow: hidden;
-
-                img{
-                    height: 100%;
-                    width: 100%;
-                    object-fit: cover;
-                }
-            }
-
-            figure{
-                position: absolute;
-                bottom: -10rem;
-                left: calc(50%);
-                transform: translateX(-50%);
-                height: 20rem;
-                width: 20rem;
-                border-radius: 50%;
-                overflow: hidden;
-                border: 2px solid ${p => p.theme.background};
-
-            img{
-                height: 100%;
-                width: 100%;
-                object-fit: cover;
-            }
+      picture {
+        width: 100%;
+        aspect-ratio: 3 / 2;
+        display: block;
+        overflow: hidden;
+
+        img {
+          height: 100%;
+          width: 100%;
+          object-fit: cover;
         }
-    }
+      }
+
+      figure {
+        position: absolute;
+        bottom: -10rem;
+        left: calc(50%);
+        transform: translateX(-50%);
+        height: 20rem;
+        width: 20rem;
+        border-radius: 50%;
+        overflow: hidden;
+        border: 2px solid ${(p) => p.theme.background};
 
-        footer{
-            padding: 2rem 4rem;
+        img {
+          height: 100%;
+          width: 100%;
+          object-fit: cover;
         }
+      }
     }
 
-    main{
-        padding: 2rem 4rem;
-        display: flex;
-        flex-direction: column;
-        gap: 4rem;
+    footer {
+      padding: 2rem 4rem;
     }
-`
+  }
+
+  main {
+    padding: 2rem 4rem;
+    display: flex;
+    flex-direction: column;
+    gap: 4rem;
+  }
+`;
 
 export const PageSubTitle = styled.div`
-    padding: 10rem 1rem 2rem 1rem;
-    text-align: center;
-`
+  padding: 10rem 1rem 2rem 1rem;
+  text-align: center;
+`;
 
 export const PageSubActions = styled.div`
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-`
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+`;
 
 export const PageCards = styled.div`
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    align-items: flex-start;
-    grid-gap: 2rem;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  align-items: flex-start;
+  grid-gap: 2rem;
 
-    @media ${device.xl}{
-        grid-template-columns: 1fr 1fr;
-    }
+  @media ${device.xl} {
+    grid-template-columns: 1fr 1fr;
+  }
 
-    @media ${device.md}{
-        grid-template-columns: 1fr 1fr 1fr;
-    }
+  @media ${device.md} {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
 
-    @media ${device.sm}{
-        grid-template-columns: 1fr 1fr;
-    }
+  @media ${device.sm} {
+    grid-template-columns: 1fr 1fr;
+  }
 
-    @media ${device.xs}{
-        grid-template-columns: 1fr;
-    }
-`
+  @media ${device.xs} {
+    grid-template-columns: 1fr;
+  }
+`;
 
 export const PageToolsCards = styled(PageCards)`
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
-`
+  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+`;
 
 export const PageIllu = styled.div`
-    height: calc(100vh - 8rem);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    img{
-        object-fit: contain;
-    }
-`
-
+  height: calc(100vh - 8rem);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  img {
+    object-fit: contain;
+  }
+`;