monica-alexandria 3.4.3 → 3.4.4

package/dist/index.es.js

@@ -255,16 +255,16 @@ import e,{useState as t,createContext as n,useContext as r,useEffect as a}from"r
         display: flex;
         align-items: center;
         justify-content: center;
-        background: ${e=>"dark"===e.theme?"var(--gloomLight)":"var(--greyLight)"};
+        background: ${e=>e.theme.low};
 
         figure{
-            background: ${e=>"dark"===e.theme?"var(--dark)":"var(--white)"};
+            background: ${e=>e.theme.background};
             border-radius: 50%;
             padding: 3rem;
 
             svg{
                 width: 5rem;
-                fill: ${e=>"dark"===e.theme?"var(--gloomDark)":"var(--greyDark)"};
+                fill: ${e=>e.theme.low};
             }
         }
     }
@@ -1504,6 +1504,14 @@ import e,{useState as t,createContext as n,useContext as r,useEffect as a}from"r
     grid-gap: 2rem;
 `,On=o(jn)`
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+
+    @media ${N.md} {
+        grid-template-columns: 1fr 1fr 1fr;
+    }
+
+    @media ${N.sm} {
+        grid-template-columns: 1fr;
+    }
 `,qn=o(jn)`
     grid-template-columns: 1fr 1fr;
 `,Wn=o(jn)`

package/dist/index.js

@@ -255,16 +255,16 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        background: ${e=>"dark"===e.theme?"var(--gloomLight)":"var(--greyLight)"};
+        background: ${e=>e.theme.low};
 
         figure{
-            background: ${e=>"dark"===e.theme?"var(--dark)":"var(--white)"};
+            background: ${e=>e.theme.background};
             border-radius: 50%;
             padding: 3rem;
 
             svg{
                 width: 5rem;
-                fill: ${e=>"dark"===e.theme?"var(--gloomDark)":"var(--greyDark)"};
+                fill: ${e=>e.theme.low};
             }
         }
     }
@@ -1504,6 +1504,14 @@
     grid-gap: 2rem;
 `,_a=l.default(ka)`
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+
+    @media ${b.md} {
+        grid-template-columns: 1fr 1fr 1fr;
+    }
+
+    @media ${b.sm} {
+        grid-template-columns: 1fr;
+    }
 `,wa=l.default(ka)`
     grid-template-columns: 1fr 1fr;
 `,Ma=l.default(ka)`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "monica-alexandria",
-  "version": "3.4.3",
+  "version": "3.4.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/card/On_Click_Card.js

@@ -12,16 +12,16 @@ const OnClickCard = styled(Card)`
         display: flex;
         align-items: center;
         justify-content: center;
-        background: ${p => p.theme === 'dark' ? 'var(--gloomLight)' : 'var(--greyLight)'};
+        background: ${p => p.theme.low};
 
         figure{
-            background: ${p => p.theme === 'dark' ? 'var(--dark)' : 'var(--white)'};
+            background: ${p => p.theme.background};
             border-radius: 50%;
             padding: 3rem;
 
             svg{
                 width: 5rem;
-                fill: ${p => p.theme === 'dark' ? 'var(--gloomDark)' : 'var(--greyDark)'};
+                fill: ${p => p.theme.low};
             }
         }
     }

package/src/export/styles/Cards.js

@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import { device } from "../helpers/MediaQ";
 
 const Cards = styled.div`
     display: grid;
@@ -7,6 +8,14 @@ const Cards = styled.div`
 
 export const CardsTools = styled(Cards)`
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+
+    @media ${device.md} {
+        grid-template-columns: 1fr 1fr 1fr;
+    }
+
+    @media ${device.sm} {
+        grid-template-columns: 1fr;
+    }
 `
 
 export const CardsForty = styled(Cards)`