monica-alexandria 2.9.3 → 2.9.4

package/dist/index.es.js

@@ -317,7 +317,7 @@ import e from"react";import t from"styled-components";const a=t.button`
             padding: 1rem 0;
         }
     }
-`;const k=t.input`
+`;const y=t.input`
     width: 100%;
     border: none;
     background: ${e=>e.theme.background};
@@ -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};
     }
-`,y=t.label`
+`,k=t.label`
     color: ${e=>e.theme.color};
-`,L=t(k)`
+`,L=t(y)`
     padding-top: 3rem;
-`,I=t(y)`
+`,I=t(k)`
     font-size: var(--smallText);
 `,$=t.div`
     position: relative;
@@ -396,7 +396,7 @@ import e from"react";import t from"styled-components";const a=t.button`
             display: none;
         }
     }
-`,z=t=>e.createElement($,null,e.createElement(L,{placeholder:t.placeholder}),e.createElement(I,null,t.placeholder)),H=t.div`
+`,z=t=>e.createElement($,null,e.createElement(L,{placeholder:t.placeholder}),e.createElement(I,null,t.placeholder)),H=`(max-width: ${`${576}px`})`,C=`(max-width: ${`${768}px`})`,B=`(max-width: ${`${992}px`})`,A=`(max-width: ${`${1440}px`})`,T=t.div`
     position: fixed;
     top: 0;
     left: 0;
@@ -404,24 +404,34 @@ import e from"react";import t from"styled-components";const a=t.button`
     width: 100%;
     min-height: 100vh;
     background: ${e=>e.theme.overlay};
-`,C=t.div`
+`,R=t.div`
     position: fixed;
     top: 6.5rem;
     left: 50%;
-    max-width: 35rem;
     width: calc(100vw - 4rem);
+    max-width: 50rem;
     transform: translateX(-50%);
     z-index: 5001;
     padding: var(--normalPads);
     border-radius: var(--smallRadius);
     background: ${e=>e.theme.background};
-`,B=t.div`
+`,V=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.onClickPrimary,buttonIconLeft:t.primaryIcon,buttonText:t.primaryText}),e.createElement(b,{onClick:t.onClickSecondary,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`
+
+    @media ${C}{
+        
+        button{
+
+            span{
+                display: none;
+            }
+        }
+    }
+`,S=t=>e.createElement(T,null,e.createElement(R,null,e.createElement("h4",null,t.question),e.createElement(V,null,e.createElement(w,{onClick:t.onClickPrimary,buttonIconLeft:t.primaryIcon,buttonText:t.primaryText}),e.createElement(b,{onClick:t.onClickSecondary,buttonIconLeft:t.secondaryIcon,buttonText:t.secondaryText})))),F=t.div`
     padding-top: 6rem;
     position: relative;
 
@@ -435,7 +445,7 @@ import e from"react";import t from"styled-components";const a=t.button`
     grid-gap: 4rem;
     padding: 0 4rem;
 
-    @media ${V} {
+    @media ${B} {
         grid-template-columns: 1fr;
     }
 `,P=t.div`
@@ -444,7 +454,7 @@ import e from"react";import t from"styled-components";const a=t.button`
     grid-gap: 4rem;
     padding: 0 4rem;
 
-    @media ${V} {
+    @media ${B} {
         grid-template-columns: 1fr;
     }
 `,D=t.div`
@@ -454,7 +464,7 @@ import e from"react";import t from"styled-components";const a=t.button`
 `,N=t.div`
     width: 100%;
 
-    @media ${V} {
+    @media ${B} {
         display: none;
     }
 `,X=t.div`
@@ -540,19 +550,19 @@ import e from"react";import t from"styled-components";const a=t.button`
     align-items: flex-start;
     grid-gap: 2rem;
 
-    @media ${S}{
+    @media ${A}{
         grid-template-columns: 1fr 1fr;
     }
 
-    @media ${V}{
+    @media ${B}{
         grid-template-columns: 1fr 1fr 1fr;
     }
 
-    @media ${R}{
+    @media ${C}{
         grid-template-columns: 1fr 1fr;
     }
 
-    @media ${T}{
+    @media ${H}{
         grid-template-columns: 1fr;
     }
 `,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`
@@ -568,14 +578,14 @@ import e from"react";import t from"styled-components";const a=t.button`
         transition-duration: .5s;
     }
 
-    svg{
+    /* svg{
         fill: ${e=>e.theme.color};
         transition-property: fill;
         transition-duration: .5s;
-    }
+    } */
 
     nav,div,button,section,main,aside{
         transition-property: background;
         transition-duration: .5s;
     }
-`;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,P as PageSixty,G as PageSub,K as PageSubActions,J as PageSubTitle,O as PageTitle,D as PageTools,ae as Theme,te as ThemeDark,ee as ThemeLight,f as White_Plain};
+`;export{Z as CardButton,S 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,P as PageSixty,G as PageSub,K as PageSubActions,J as PageSubTitle,O as PageTitle,D as PageTools,ae as Theme,te as ThemeDark,ee as ThemeLight,f as White_Plain};

package/dist/index.js

@@ -396,7 +396,7 @@
             display: none;
         }
     }
-`,k=r.default.div`
+`,k=`(max-width: ${`${576}px`})`,L=`(max-width: ${`${768}px`})`,I=`(max-width: ${`${992}px`})`,$=`(max-width: ${`${1440}px`})`,z=r.default.div`
     position: fixed;
     top: 0;
     left: 0;
@@ -404,24 +404,34 @@
     width: 100%;
     min-height: 100vh;
     background: ${e=>e.theme.overlay};
-`,L=r.default.div`
+`,C=r.default.div`
     position: fixed;
     top: 6.5rem;
     left: 50%;
-    max-width: 35rem;
     width: calc(100vw - 4rem);
+    max-width: 50rem;
     transform: translateX(-50%);
     z-index: 5001;
     padding: var(--normalPads);
     border-radius: var(--smallRadius);
     background: ${e=>e.theme.background};
-`,I=r.default.div`
+`,H=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`
+
+    @media ${L}{
+        
+        button{
+
+            span{
+                display: none;
+            }
+        }
+    }
+`,A=r.default.div`
     padding-top: 6rem;
     position: relative;
 
@@ -435,7 +445,7 @@
     grid-gap: 4rem;
     padding: 0 4rem;
 
-    @media ${C} {
+    @media ${I} {
         grid-template-columns: 1fr;
     }
 `,T=r.default.div`
@@ -444,7 +454,7 @@
     grid-gap: 4rem;
     padding: 0 4rem;
 
-    @media ${C} {
+    @media ${I} {
         grid-template-columns: 1fr;
     }
 `,P=r.default.div`
@@ -454,7 +464,7 @@
 `,R=r.default.div`
     width: 100%;
 
-    @media ${C} {
+    @media ${I} {
         display: none;
     }
 `,V=r.default.div`
@@ -540,19 +550,19 @@
     align-items: flex-start;
     grid-gap: 2rem;
 
-    @media ${H}{
+    @media ${$}{
         grid-template-columns: 1fr 1fr;
     }
 
-    @media ${C}{
+    @media ${I}{
         grid-template-columns: 1fr 1fr 1fr;
     }
 
-    @media ${z}{
+    @media ${L}{
         grid-template-columns: 1fr 1fr;
     }
 
-    @media ${$}{
+    @media ${k}{
         grid-template-columns: 1fr;
     }
 `,Q=r.default.div`
@@ -568,14 +578,14 @@
         transition-duration: .5s;
     }
 
-    svg{
+    /* svg{
         fill: ${e=>e.theme.color};
         transition-property: fill;
         transition-duration: .5s;
-    }
+    } */
 
     nav,div,button,section,main,aside{
         transition-property: background;
         transition-duration: .5s;
     }
-`;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.onClickPrimary,buttonIconLeft:e.primaryIcon,buttonText:e.primaryText}),l.default.createElement(v,{onClick:e.onClickSecondary,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=Z,exports.FormInput=M,exports.FormLabel=y,exports.Form_Input=e=>l.default.createElement(Z,null,l.default.createElement(M,{placeholder:e.placeholder}),l.default.createElement(y,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);
+`;exports.CardButton=x,exports.Confirmation_=e=>l.default.createElement(z,null,l.default.createElement(C,null,l.default.createElement("h4",null,e.question),l.default.createElement(H,null,l.default.createElement(g,{onClick:e.onClickPrimary,buttonIconLeft:e.primaryIcon,buttonText:e.primaryText}),l.default.createElement(v,{onClick:e.onClickSecondary,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=Z,exports.FormInput=M,exports.FormLabel=y,exports.Form_Input=e=>l.default.createElement(Z,null,l.default.createElement(M,{placeholder:e.placeholder}),l.default.createElement(y,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.3",
+  "version": "2.9.4",
   "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

@@ -1,5 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
+import { device } from '../../helpers/MediaQ'
 import { Main_ } from '../elements/button/Main_'
 import { Main_Plain } from '../elements/button/Main_Plain'
 
@@ -17,8 +18,8 @@ const ConfirmationContainer = styled.div`
     position: fixed;
     top: 6.5rem;
     left: 50%;
-    max-width: 35rem;
     width: calc(100vw - 4rem);
+    max-width: 50rem;
     transform: translateX(-50%);
     z-index: 5001;
     padding: var(--normalPads);
@@ -32,6 +33,16 @@ const ConfirmationActions = styled.div`
     display: flex;
     align-items: center;
     justify-content: space-between;
+
+    @media ${device.sm}{
+        
+        button{
+
+            span{
+                display: none;
+            }
+        }
+    }
 `
 
 export const Confirmation_ = (props) => {

package/src/export/styles/Theme.js

@@ -41,11 +41,11 @@ export const Theme = styled.div`
         transition-duration: .5s;
     }
 
-    svg{
+    /* svg{
         fill: ${p => p.theme.color};
         transition-property: fill;
         transition-duration: .5s;
-    }
+    } */
 
     nav,div,button,section,main,aside{
         transition-property: background;