monica-alexandria 2.9.0 → 2.9.2

package/dist/index.es.js

@@ -338,11 +338,11 @@ import e from"react";import t from"styled-components";const a=t.button`
         outline: 0;
         box-shadow: ${e=>e.theme.inFocus};
     }
-`,L=t.label`
+`,y=t.label`
     color: ${e=>e.theme.color};
-`,y=t(k)`
+`,L=t(k)`
     padding-top: 3rem;
-`,I=t(L)`
+`,I=t(y)`
     font-size: var(--smallText);
 `,$=t.div`
     position: relative;
@@ -396,7 +396,32 @@ import e from"react";import t from"styled-components";const a=t.button`
             display: none;
         }
     }
-`,z=t=>e.createElement($,null,e.createElement(y,{placeholder:t.placeholder}),e.createElement(I,null,t.placeholder)),H=`(max-width: ${`${576}px`})`,B=`(max-width: ${`${768}px`})`,C=`(max-width: ${`${992}px`})`,A=`(max-width: ${`${1440}px`})`,V=t.div`
+`,z=t=>e.createElement($,null,e.createElement(L,{placeholder:t.placeholder}),e.createElement(I,null,t.placeholder)),H=t.div`
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 5000;
+    width: 100%;
+    min-height: 100vh;
+    background: ${e=>e.theme.overlay};
+`,C=t.div`
+    position: fixed;
+    top: 6.5rem;
+    left: 50%;
+    max-width: 35rem;
+    width: calc(100vw - 4rem);
+    transform: translateX(-50%);
+    z-index: 5001;
+    padding: var(--normalPads);
+    border-radius: var(--smallRadius);
+    background: ${e=>e.theme.background};
+`,B=t.div`
+    margin-top: 2rem;
+    padding: 1rem 2rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+`,A=t=>e.createElement(H,null,e.createElement(C,null,e.createElement("h4",null,t.question),e.createElement(B,null,e.createElement(w,{onClick:t.onClick,buttonIconLeft:t.primaryIcon,buttonText:t.primaryText}),e.createElement(b,{onClick:t.onClick,buttonIconLeft:t.secondaryIcon,buttonText:t.secondaryText})))),T=`(max-width: ${`${576}px`})`,R=`(max-width: ${`${768}px`})`,V=`(max-width: ${`${992}px`})`,S=`(max-width: ${`${1440}px`})`,F=t.div`
     padding-top: 6rem;
     position: relative;
 
@@ -404,41 +429,41 @@ import e from"react";import t from"styled-components";const a=t.button`
         height: calc(100vh - 6rem);
         overflow: hidden;
     }
-`,R=t.div`
+`,q=t.div`
     display: grid;
     grid-template-columns: minmax(40rem, 40%) 1fr;
     grid-gap: 4rem;
     padding: 0 4rem;
 
-    @media ${C} {
+    @media ${V} {
         grid-template-columns: 1fr;
     }
-`,T=t.div`
+`,D=t.div`
     display: grid;
     grid-template-columns: 1fr 40%;
     grid-gap: 4rem;
     padding: 0 4rem;
 
-    @media ${C} {
+    @media ${V} {
         grid-template-columns: 1fr;
     }
-`,S=t.div`
+`,P=t.div`
     padding: 0 4rem 2rem 13rem;
-`,F=t.div`
+`,j=t.div`
     width: 100%;
-`,q=t.div`
+`,N=t.div`
     width: 100%;
 
-    @media ${C} {
+    @media ${V} {
         display: none;
     }
-`,D=t.div`
+`,X=t.div`
     padding-top: 8rem;
-`,P=t.div`
+`,O=t.div`
     padding: 2rem 0;
-`,j=t.div`
+`,Q=t.div`
     
-`,N=t.div`
+`,Y=t.div`
     position: relative;
 
     header{
@@ -447,11 +472,11 @@ import e from"react";import t from"styled-components";const a=t.button`
     }
 
     
-`,O=t.div`
+`,U=t.div`
     padding-left: 4rem;
-`,Q=t.div`
+`,W=t.div`
     padding-right: 4rem;
-`,X=t(R)`
+`,G=t(q)`
     padding: 0;
 
     aside{
@@ -502,35 +527,35 @@ import e from"react";import t from"styled-components";const a=t.button`
         flex-direction: column;
         gap: 4rem;
     }
-`,Y=t.div`
+`,J=t.div`
     padding: 10rem 1rem 2rem 1rem;
     text-align: center;
-`,U=t.div`
+`,K=t.div`
     display: flex;
     align-items: center;
     gap: 1rem;
-`,W=t.div`
+`,_=t.div`
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     align-items: flex-start;
     grid-gap: 2rem;
 
-    @media ${A}{
+    @media ${S}{
         grid-template-columns: 1fr 1fr;
     }
 
-    @media ${C}{
+    @media ${V}{
         grid-template-columns: 1fr 1fr 1fr;
     }
 
-    @media ${B}{
+    @media ${R}{
         grid-template-columns: 1fr 1fr;
     }
 
-    @media ${H}{
+    @media ${T}{
         grid-template-columns: 1fr;
     }
-`,G={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)"},J={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)"},K=t.div`
+`,ee={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)"},te={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)"},ae=t.div`
     width: 100%;
     min-height: 100vh;
     background: ${e=>e.theme.background};
@@ -553,4 +578,4 @@ import e from"react";import t from"styled-components";const a=t.button`
         transition-property: background;
         transition-duration: .5s;
     }
-`;export{Z as CardButton,n as Cta_,o as Edit_,s as Focus_,d as Focus_Plain,$ as FormGroup,y as FormInput,I as FormLabel,z as Form_Input,v as Grey_,p as Grey_Link,c as IconSvg,w as Main_,b as Main_Plain,V as Page,F as PageAlwaysVisible,W as PageCards,q as PageDesktopOnly,D as PageDesktopPadding,R as PageForty,j as PageSingle,N as PageSingleHeader,Q as PageSingleRight,O as PageSingleleft,T as PageSixty,X as PageSub,U as PageSubActions,Y as PageSubTitle,P as PageTitle,S as PageTools,K as Theme,J as ThemeDark,G as ThemeLight,f as White_Plain};
+`;export{Z as CardButton,A as Confirmation_,n as Cta_,o as Edit_,s as Focus_,d as Focus_Plain,$ as FormGroup,L as FormInput,I as FormLabel,z as Form_Input,v as Grey_,p as Grey_Link,c as IconSvg,w as Main_,b as Main_Plain,F as Page,j as PageAlwaysVisible,_ as PageCards,N as PageDesktopOnly,X as PageDesktopPadding,q as PageForty,Q as PageSingle,Y as PageSingleHeader,W as PageSingleRight,U as PageSingleleft,D as PageSixty,G as PageSub,K as PageSubActions,J as PageSubTitle,O as PageTitle,P as PageTools,ae as Theme,te as ThemeDark,ee as ThemeLight,f as White_Plain};

package/dist/index.js

@@ -155,7 +155,7 @@
         background: var(--mainLight);
         border: 1px solid var(--mainLight);
     }
-`,g=r.default(n)`
+`,g=e=>l.default.createElement(h,{className:e.className,size:e.size,onClick:e.onClick},e.buttonIconLeft?l.default.createElement(o,{Icon:e.buttonIconLeft}):null,e.buttonText?l.default.createElement("span",null,e.buttonText):null,e.buttonIconRight?l.default.createElement(o,{Icon:e.buttonIconRight}):null),f=r.default(n)`
     background: transparent;
     border: 1px solid transparent;
 
@@ -177,7 +177,7 @@
             fill: var(--mainLight);
         }
     }
-`,v=r.default(n)`
+`,v=e=>l.default.createElement(f,{noPadding:e.noPadding,size:e.size,onClick:e.onClick},e.buttonIconLeft?l.default.createElement(o,{Icon:e.buttonIconLeft}):null,e.buttonText?l.default.createElement("span",null,e.buttonText):null,e.buttonIconRight?l.default.createElement(o,{Icon:e.buttonIconRight}):null),p=r.default(n)`
     background: transparent;
     border: 1px solid transparent;
 
@@ -199,7 +199,7 @@
             fill: ${e=>e.theme.low};
         }
     }
-`,f=r.default.div`
+`,w=r.default.div`
     box-shadow: ${e=>e.theme.out};
     border-radius: var(--smallRadius);
     transition: box-shadow .5s;
@@ -224,7 +224,7 @@
         box-shadow: ${e=>e.theme.outFocus};
         transition: box-shadow .5s;
     }
-`,p=r.default(f)`
+`,x=r.default(w)`
     
     header{
         display: flex;
@@ -255,7 +255,7 @@
         align-items: center;
         justify-content: center;
     }
-`;r.default(f)`
+`;r.default(w)`
     cursor: pointer;
     
     header{
@@ -317,7 +317,7 @@
             padding: 1rem 0;
         }
     }
-`;const w=r.default.input`
+`;const E=r.default.input`
     width: 100%;
     border: none;
     background: ${e=>e.theme.background};
@@ -338,13 +338,13 @@
         outline: 0;
         box-shadow: ${e=>e.theme.inFocus};
     }
-`,x=r.default.label`
+`,b=r.default.label`
     color: ${e=>e.theme.color};
-`,E=r.default(w)`
+`,M=r.default(E)`
     padding-top: 3rem;
-`,b=r.default(x)`
+`,Z=r.default(b)`
     font-size: var(--smallText);
-`,M=r.default.div`
+`,y=r.default.div`
     position: relative;
 
     label{
@@ -396,7 +396,32 @@
             display: none;
         }
     }
-`,Z=`(max-width: ${`${576}px`})`,y=`(max-width: ${`${768}px`})`,k=`(max-width: ${`${992}px`})`,L=`(max-width: ${`${1440}px`})`,I=r.default.div`
+`,k=r.default.div`
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 5000;
+    width: 100%;
+    min-height: 100vh;
+    background: ${e=>e.theme.overlay};
+`,L=r.default.div`
+    position: fixed;
+    top: 6.5rem;
+    left: 50%;
+    max-width: 35rem;
+    width: calc(100vw - 4rem);
+    transform: translateX(-50%);
+    z-index: 5001;
+    padding: var(--normalPads);
+    border-radius: var(--smallRadius);
+    background: ${e=>e.theme.background};
+`,I=r.default.div`
+    margin-top: 2rem;
+    padding: 1rem 2rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+`,$=`(max-width: ${`${576}px`})`,z=`(max-width: ${`${768}px`})`,C=`(max-width: ${`${992}px`})`,H=`(max-width: ${`${1440}px`})`,A=r.default.div`
     padding-top: 6rem;
     position: relative;
 
@@ -404,41 +429,41 @@
         height: calc(100vh - 6rem);
         overflow: hidden;
     }
-`,$=r.default.div`
+`,B=r.default.div`
     display: grid;
     grid-template-columns: minmax(40rem, 40%) 1fr;
     grid-gap: 4rem;
     padding: 0 4rem;
 
-    @media ${k} {
+    @media ${C} {
         grid-template-columns: 1fr;
     }
-`,z=r.default.div`
+`,T=r.default.div`
     display: grid;
     grid-template-columns: 1fr 40%;
     grid-gap: 4rem;
     padding: 0 4rem;
 
-    @media ${k} {
+    @media ${C} {
         grid-template-columns: 1fr;
     }
-`,H=r.default.div`
+`,P=r.default.div`
     padding: 0 4rem 2rem 13rem;
-`,C=r.default.div`
+`,S=r.default.div`
     width: 100%;
-`,A=r.default.div`
+`,R=r.default.div`
     width: 100%;
 
-    @media ${k} {
+    @media ${C} {
         display: none;
     }
-`,B=r.default.div`
+`,V=r.default.div`
     padding-top: 8rem;
-`,P=r.default.div`
+`,F=r.default.div`
     padding: 2rem 0;
-`,S=r.default.div`
+`,q=r.default.div`
     
-`,T=r.default.div`
+`,_=r.default.div`
     position: relative;
 
     header{
@@ -447,11 +472,11 @@
     }
 
     
-`,V=r.default.div`
+`,D=r.default.div`
     padding-left: 4rem;
-`,R=r.default.div`
+`,j=r.default.div`
     padding-right: 4rem;
-`,F=r.default($)`
+`,N=r.default(B)`
     padding: 0;
 
     aside{
@@ -502,35 +527,35 @@
         flex-direction: column;
         gap: 4rem;
     }
-`,q=r.default.div`
+`,O=r.default.div`
     padding: 10rem 1rem 2rem 1rem;
     text-align: center;
-`,D=r.default.div`
+`,G=r.default.div`
     display: flex;
     align-items: center;
     gap: 1rem;
-`,_=r.default.div`
+`,X=r.default.div`
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     align-items: flex-start;
     grid-gap: 2rem;
 
-    @media ${L}{
+    @media ${H}{
         grid-template-columns: 1fr 1fr;
     }
 
-    @media ${k}{
+    @media ${C}{
         grid-template-columns: 1fr 1fr 1fr;
     }
 
-    @media ${y}{
+    @media ${z}{
         grid-template-columns: 1fr 1fr;
     }
 
-    @media ${Z}{
+    @media ${$}{
         grid-template-columns: 1fr;
     }
-`,j=r.default.div`
+`,Q=r.default.div`
     width: 100%;
     min-height: 100vh;
     background: ${e=>e.theme.background};
@@ -553,4 +578,4 @@
         transition-property: background;
         transition-duration: .5s;
     }
-`;exports.CardButton=p,exports.Cta_=e=>l.default.createElement(c,{size:e.size,onClick:e.onClick},l.default.createElement("span",null,e.buttonText)),exports.Edit_=e=>l.default.createElement(d,{size:"normal",onClick:e.onClick},l.default.createElement(o,{Icon:e.buttonIcon})),exports.Focus_=e=>l.default.createElement(i,{size:e.size,onClick:e.onClick},e.buttonIconLeft?l.default.createElement(o,{Icon:e.buttonIconLeft}):null,e.buttonText?l.default.createElement("span",null,e.buttonText):null,e.buttonIconRight?l.default.createElement(o,{Icon:e.buttonIconRight}):null),exports.Focus_Plain=e=>l.default.createElement(s,{size:e.size,onClick:e.onClick,onFocus:e.onFocus},e.buttonIconLeft?l.default.createElement(o,{Icon:e.buttonIconLeft}):null,e.buttonText?l.default.createElement("span",null,e.buttonText):null,e.buttonIconRight?l.default.createElement(o,{Icon:e.buttonIconRight}):null),exports.FormGroup=M,exports.FormInput=E,exports.FormLabel=b,exports.Form_Input=e=>l.default.createElement(M,null,l.default.createElement(E,{placeholder:e.placeholder}),l.default.createElement(b,null,e.placeholder)),exports.Grey_=e=>l.default.createElement(u,{size:e.size,onClick:e.onClick},e.buttonIconLeft?l.default.createElement(o,{Icon:e.buttonIconLeft}):null,e.buttonText?l.default.createElement("span",null,e.buttonText):null,e.buttonIconRight?l.default.createElement(o,{Icon:e.buttonIconRight}):null),exports.Grey_Link=e=>l.default.createElement(m,{size:e.size,onClick:e.onClick},e.buttonIconLeft?l.default.createElement(o,{Icon:e.buttonIconLeft}):null,e.buttonText?l.default.createElement("span",null,e.buttonText):null,e.buttonIconRight?l.default.createElement(o,{Icon:e.buttonIconRight}):null),exports.IconSvg=o,exports.Main_=e=>l.default.createElement(h,{className:e.className,size:e.size,onClick:e.onClick},e.buttonIconLeft?l.default.createElement(o,{Icon:e.buttonIconLeft}):null,e.buttonText?l.default.createElement("span",null,e.buttonText):null,e.buttonIconRight?l.default.createElement(o,{Icon:e.buttonIconRight}):null),exports.Main_Plain=e=>l.default.createElement(g,{noPadding:e.noPadding,size:e.size,onClick:e.onClick},e.buttonIconLeft?l.default.createElement(o,{Icon:e.buttonIconLeft}):null,e.buttonText?l.default.createElement("span",null,e.buttonText):null,e.buttonIconRight?l.default.createElement(o,{Icon:e.buttonIconRight}):null),exports.Page=I,exports.PageAlwaysVisible=C,exports.PageCards=_,exports.PageDesktopOnly=A,exports.PageDesktopPadding=B,exports.PageForty=$,exports.PageSingle=S,exports.PageSingleHeader=T,exports.PageSingleRight=R,exports.PageSingleleft=V,exports.PageSixty=z,exports.PageSub=F,exports.PageSubActions=D,exports.PageSubTitle=q,exports.PageTitle=P,exports.PageTools=H,exports.Theme=j,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.White_Plain=e=>l.default.createElement(v,{size:e.size,onClick:e.onClick},e.buttonIconLeft?l.default.createElement(o,{Icon:e.buttonIconLeft}):null,e.buttonText?l.default.createElement("span",null,e.buttonText):null,e.buttonIconRight?l.default.createElement(o,{Icon:e.buttonIconRight}):null);
+`;exports.CardButton=x,exports.Confirmation_=e=>l.default.createElement(k,null,l.default.createElement(L,null,l.default.createElement("h4",null,e.question),l.default.createElement(I,null,l.default.createElement(g,{onClick:e.onClick,buttonIconLeft:e.primaryIcon,buttonText:e.primaryText}),l.default.createElement(v,{onClick:e.onClick,buttonIconLeft:e.secondaryIcon,buttonText:e.secondaryText})))),exports.Cta_=e=>l.default.createElement(c,{size:e.size,onClick:e.onClick},l.default.createElement("span",null,e.buttonText)),exports.Edit_=e=>l.default.createElement(d,{size:"normal",onClick:e.onClick},l.default.createElement(o,{Icon:e.buttonIcon})),exports.Focus_=e=>l.default.createElement(i,{size:e.size,onClick:e.onClick},e.buttonIconLeft?l.default.createElement(o,{Icon:e.buttonIconLeft}):null,e.buttonText?l.default.createElement("span",null,e.buttonText):null,e.buttonIconRight?l.default.createElement(o,{Icon:e.buttonIconRight}):null),exports.Focus_Plain=e=>l.default.createElement(s,{size:e.size,onClick:e.onClick,onFocus:e.onFocus},e.buttonIconLeft?l.default.createElement(o,{Icon:e.buttonIconLeft}):null,e.buttonText?l.default.createElement("span",null,e.buttonText):null,e.buttonIconRight?l.default.createElement(o,{Icon:e.buttonIconRight}):null),exports.FormGroup=y,exports.FormInput=M,exports.FormLabel=Z,exports.Form_Input=e=>l.default.createElement(y,null,l.default.createElement(M,{placeholder:e.placeholder}),l.default.createElement(Z,null,e.placeholder)),exports.Grey_=e=>l.default.createElement(u,{size:e.size,onClick:e.onClick},e.buttonIconLeft?l.default.createElement(o,{Icon:e.buttonIconLeft}):null,e.buttonText?l.default.createElement("span",null,e.buttonText):null,e.buttonIconRight?l.default.createElement(o,{Icon:e.buttonIconRight}):null),exports.Grey_Link=e=>l.default.createElement(m,{size:e.size,onClick:e.onClick},e.buttonIconLeft?l.default.createElement(o,{Icon:e.buttonIconLeft}):null,e.buttonText?l.default.createElement("span",null,e.buttonText):null,e.buttonIconRight?l.default.createElement(o,{Icon:e.buttonIconRight}):null),exports.IconSvg=o,exports.Main_=g,exports.Main_Plain=v,exports.Page=A,exports.PageAlwaysVisible=S,exports.PageCards=X,exports.PageDesktopOnly=R,exports.PageDesktopPadding=V,exports.PageForty=B,exports.PageSingle=q,exports.PageSingleHeader=_,exports.PageSingleRight=j,exports.PageSingleleft=D,exports.PageSixty=T,exports.PageSub=N,exports.PageSubActions=G,exports.PageSubTitle=O,exports.PageTitle=F,exports.PageTools=P,exports.Theme=Q,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.White_Plain=e=>l.default.createElement(p,{size:e.size,onClick:e.onClick},e.buttonIconLeft?l.default.createElement(o,{Icon:e.buttonIconLeft}):null,e.buttonText?l.default.createElement("span",null,e.buttonText):null,e.buttonIconRight?l.default.createElement(o,{Icon:e.buttonIconRight}):null);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "monica-alexandria",
-  "version": "2.9.0",
+  "version": "2.9.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/alerts/Confirmation_.js

@@ -41,12 +41,12 @@ export const Confirmation_ = (props) => {
             <h4>{props.question}</h4>
             <ConfirmationActions>
                 <Main_ 
-                    onClick = {props.onClick}
+                    onClick = {props.onClickPrimary}
                     buttonIconLeft = {props.primaryIcon}
                     buttonText = {props.primaryText}
                 />
                 <Main_Plain 
-                    onClick = {props.onClick}
+                    onClick = {props.onClickSecondary}
                     buttonIconLeft = {props.secondaryIcon}
                     buttonText = {props.secondaryText}
                 />

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

@@ -0,0 +1 @@
+export * from './Confirmation_.js'

package/src/export/components/index.js

@@ -1,2 +1,3 @@
 export * from './elements'
-export * from './forms'
+export * from './forms'
+export * from './alerts'