imbric-theme 0.4.2 → 0.4.4

package/atoms/Icon/Icon.module.css

@@ -21,6 +21,26 @@
   padding: 15px;
 }
 
+.color-success path,
+.color-success circle {
+  fill: var(--color-tertiary-muted);
+}
+
+.color-success line,
+.color-success rect {
+  stroke: var(--color-tertiary-muted);
+}
+
+.color-error path,
+.color-error circle {
+  fill: var(--color-secondary-muted);
+}
+
+.color-error line,
+.color-error rect {
+  stroke: var(--color-secondary-muted);
+}
+
 .color-base path,
 .color-base circle {
   fill: var(--color-font-base);
@@ -75,6 +95,16 @@
   fill: var(--color-base-transparent) !important;
 }
 
+.background-success {
+  background: var(--color-tertiary-muted);
+  border-radius: var(--border-radius-full);
+}
+
+.background-error {
+  background: var(--color-secondary-muted);
+  border-radius: var(--border-radius-full);
+}
+
 .background-base {
   background: var(--color-gray-100);
   border-radius: var(--border-radius-full);

package/atoms/Icon/constants.js

@@ -743,18 +743,18 @@ export const iconsMap = {
     viewBox: '0 0 24 24',
     svg: (
       <>
-			<path d="M10.2,11.7c1.3,0,2.6-0.8,3.7-2.3c0.9-1.3,1.4-2.9,1.4-4.3C15.3,2.3,13,0,10.2,0C7.4,0,5.1,2.3,5.1,5.1
+        <path d="M10.2,11.7c1.3,0,2.6-0.8,3.7-2.3c0.9-1.3,1.4-2.9,1.4-4.3C15.3,2.3,13,0,10.2,0C7.4,0,5.1,2.3,5.1,5.1
 				c0,1.4,0.5,3,1.4,4.3C7.6,10.9,8.9,11.7,10.2,11.7z M10.2,0.8c2.4,0,4.3,1.9,4.3,4.3c0,1.2-0.5,2.7-1.3,3.8
 				c-0.9,1.2-1.9,1.9-3,1.9s-2.1-0.7-3-1.9C6.4,7.8,5.9,6.3,5.9,5.1C5.9,2.8,7.9,0.8,10.2,0.8z"/>
-			<path d="M12.2,21.6C12.2,21.6,12.2,21.6,12.2,21.6C12.2,21.6,12.2,21.6,12.2,21.6c-0.2-0.1-0.4-0.1-0.5,0
+        <path d="M12.2,21.6C12.2,21.6,12.2,21.6,12.2,21.6C12.2,21.6,12.2,21.6,12.2,21.6c-0.2-0.1-0.4-0.1-0.5,0
 				c-0.1,0.1-0.2,0.3-0.1,0.5c0.1,0.2,0.2,0.3,0.4,0.3c0.2,0,0.3-0.1,0.4-0.3C12.4,21.9,12.4,21.7,12.2,21.6z"/>
-			<path d="M17.3,13.2c0,0-0.1,0-0.1,0c-0.8-1-1.9-1.9-3.1-2.4c-0.2-0.1-0.3,0-0.5,0.1c-1,1-2.2,1.5-3.3,1.5c-1.2,0-2.3-0.5-3.3-1.5
+        <path d="M17.3,13.2c0,0-0.1,0-0.1,0c-0.8-1-1.9-1.9-3.1-2.4c-0.2-0.1-0.3,0-0.5,0.1c-1,1-2.2,1.5-3.3,1.5c-1.2,0-2.3-0.5-3.3-1.5
 				c-0.1-0.1-0.3-0.2-0.5-0.1c-1.5,0.7-2.8,1.8-3.7,3.2c-0.9,1.4-1.4,3.1-1.4,4.8v0c0,0.1,0,0.2,0.1,0.3c2.4,2.2,5.5,3.4,8.8,3.4
 				c0.2,0,0.3,0,0.5,0c0.2,0,0.4-0.2,0.4-0.4s-0.2-0.4-0.4-0.4c-0.2,0-0.3,0-0.5,0c-3,0-5.8-1.1-8.1-3c0-1.5,0.5-2.9,1.3-4.2
 				c0.8-1.2,1.8-2.1,3.1-2.8c1.1,1,2.4,1.6,3.7,1.6c1.3,0,2.6-0.5,3.7-1.6c0.8,0.4,1.6,1,2.2,1.7c-2.4,0.5-4.3,2.7-4.3,5.3
 				c0,3,2.4,5.4,5.4,5.4s5.4-2.4,5.4-5.4C22.7,15.6,20.3,13.2,17.3,13.2z M17.3,23.2c-2.5,0-4.6-2.1-4.6-4.6s2.1-4.6,4.6-4.6
 				s4.6,2.1,4.6,4.6S19.8,23.2,17.3,23.2z"/>
-			<path d="M20.7,18.2h-3v-3c0-0.2-0.2-0.4-0.4-0.4c-0.2,0-0.4,0.2-0.4,0.4v3h-3c-0.2,0-0.4,0.2-0.4,0.4c0,0.2,0.2,0.4,0.4,0.4h3v3
+        <path d="M20.7,18.2h-3v-3c0-0.2-0.2-0.4-0.4-0.4c-0.2,0-0.4,0.2-0.4,0.4v3h-3c-0.2,0-0.4,0.2-0.4,0.4c0,0.2,0.2,0.4,0.4,0.4h3v3
 				c0,0.2,0.2,0.4,0.4,0.4c0.2,0,0.4-0.2,0.4-0.4v-3h3c0.2,0,0.4-0.2,0.4-0.4C21.1,18.4,21,18.2,20.7,18.2z"/>
       </>
     ),
@@ -763,7 +763,7 @@ export const iconsMap = {
     viewBox: '0 0 24 24',
     svg: (
       <>
-			<path d="M19.2,10c-1.4,0-2.5,0.8-3.1,2c-0.6-0.5-1.2-0.9-1.9-1.3c-0.2-0.1-0.3,0-0.5,0.1c-1,1-2.2,1.5-3.3,1.5
+        <path d="M19.2,10c-1.4,0-2.5,0.8-3.1,2c-0.6-0.5-1.2-0.9-1.9-1.3c-0.2-0.1-0.3,0-0.5,0.1c-1,1-2.2,1.5-3.3,1.5
 				c-1.2,0-2.3-0.5-3.3-1.5c-0.1-0.1-0.3-0.2-0.5-0.1c-1.5,0.7-2.8,1.8-3.7,3.2c-0.9,1.4-1.4,3.1-1.4,4.8v0c0,0.1,0,0.2,0.1,0.3
 				c2.4,2.2,5.5,3.4,8.8,3.4c1.2,0,2.5-0.2,3.6-0.5c0.2-0.1,0.3-0.3,0.3-0.5s-0.3-0.3-0.5-0.3c-1.1,0.3-2.2,0.5-3.4,0.5
 				c-3,0-5.8-1.1-8.1-3c0-1.5,0.5-2.9,1.3-4.2c0.8-1.2,1.8-2.1,3.1-2.8c1.1,1,2.4,1.6,3.7,1.6c1.3,0,2.6-0.5,3.7-1.6
@@ -771,31 +771,30 @@ export const iconsMap = {
 				v5.7c0,0.2,0.2,0.4,0.4,0.4c0.2,0,0.4-0.2,0.4-0.4v-5.7c0-0.7,0.5-1.2,1.2-1.2c0.7,0,1.2,0.5,1.2,1.2v6.4c0,1-0.8,1.9-1.9,1.9
 				s-1.9-0.8-1.9-1.9v-7.9c0-1.4,1.1-2.5,2.5-2.5s2.5,1.1,2.5,2.5v7.2c0,0.2,0.2,0.4,0.4,0.4c0.2,0,0.4-0.2,0.4-0.4v-7.2
 				C22.5,11.5,21,10,19.2,10z"/>
-			<path d="M10.4,11.7c1.3,0,2.6-0.8,3.7-2.3c0.9-1.3,1.4-2.9,1.4-4.3c0-2.8-2.3-5.1-5.1-5.1C7.5,0,5.3,2.3,5.3,5.1
+        <path d="M10.4,11.7c1.3,0,2.6-0.8,3.7-2.3c0.9-1.3,1.4-2.9,1.4-4.3c0-2.8-2.3-5.1-5.1-5.1C7.5,0,5.3,2.3,5.3,5.1
 				c0,1.4,0.5,3,1.4,4.3C7.7,10.9,9,11.7,10.4,11.7z M10.4,0.8c2.4,0,4.3,1.9,4.3,4.3c0,1.2-0.5,2.7-1.3,3.8c-0.9,1.2-1.9,1.9-3,1.9
 				s-2.1-0.7-3-1.9C6.6,7.8,6.1,6.3,6.1,5.1C6.1,2.8,8,0.8,10.4,0.8z"/>
-			<path d="M15.4,21C15.4,21,15.4,21,15.4,21L15.4,21z"/>
-			<path d="M15,20.7c-0.2,0-0.3,0.1-0.4,0.3c-0.1,0.4,0.3,0.7,0.6,0.5c0.2-0.1,0.2-0.3,0.1-0.5C15.4,20.8,15.2,20.7,15,20.7z"/>
+        <path d="M15.4,21C15.4,21,15.4,21,15.4,21L15.4,21z" />
+        <path d="M15,20.7c-0.2,0-0.3,0.1-0.4,0.3c-0.1,0.4,0.3,0.7,0.6,0.5c0.2-0.1,0.2-0.3,0.1-0.5C15.4,20.8,15.2,20.7,15,20.7z" />
       </>
     ),
   },
-
   forAnother: {
     viewBox: '0 0 24 24',
     svg: (
       <>
-			<path d="M5.6,5.2c0,1.4,0.5,3,1.5,4.3c1,1.5,2.4,2.3,3.7,2.3s2.7-0.8,3.7-2.3C15.4,8.2,16,6.6,16,5.2C16,2.3,13.6,0,10.8,0
+        <path d="M5.6,5.2c0,1.4,0.5,3,1.5,4.3c1,1.5,2.4,2.3,3.7,2.3s2.7-0.8,3.7-2.3C15.4,8.2,16,6.6,16,5.2C16,2.3,13.6,0,10.8,0
 				C7.9,0,5.6,2.3,5.6,5.2z M10.8,0.8c2.4,0,4.3,1.9,4.3,4.3c0,1.2-0.5,2.7-1.3,3.8c-0.9,1.2-2,1.9-3,1.9s-2.1-0.7-3-1.9
 				C7,7.9,6.5,6.4,6.5,5.2C6.5,2.8,8.4,0.8,10.8,0.8z"/>
-			<path d="M13,22C13,22,13,22,13,22c0-0.1-0.1-0.1-0.1-0.1c-0.2-0.2-0.4-0.2-0.6,0c-0.2,0.2-0.2,0.4,0,0.6c0.2,0.2,0.4,0.2,0.6,0
+        <path d="M13,22C13,22,13,22,13,22c0-0.1-0.1-0.1-0.1-0.1c-0.2-0.2-0.4-0.2-0.6,0c-0.2,0.2-0.2,0.4,0,0.6c0.2,0.2,0.4,0.2,0.6,0
 				C13,22.3,13.1,22.2,13,22C13,22,13,22,13,22z"/>
-			<path d="M18,13.6c-0.9-1.2-2-2.2-3.4-2.8c-0.2-0.1-0.4,0-0.5,0.1c-1,1-2.2,1.5-3.4,1.5c-1.2,0-2.4-0.5-3.4-1.5
+        <path d="M18,13.6c-0.9-1.2-2-2.2-3.4-2.8c-0.2-0.1-0.4,0-0.5,0.1c-1,1-2.2,1.5-3.4,1.5c-1.2,0-2.4-0.5-3.4-1.5
 				c-0.1-0.1-0.3-0.2-0.5-0.1c-1.5,0.7-2.8,1.8-3.7,3.3c-0.9,1.5-1.4,3.1-1.4,4.9v0c0,0.1,0.1,0.2,0.1,0.3c2.4,2.2,5.6,3.4,8.9,3.4
 				c0.2,0,0.4,0,0.6,0c0.2,0,0.4-0.2,0.4-0.4c0-0.2-0.2-0.4-0.4-0.4c-0.2,0-0.4,0-0.6,0c-3,0-5.9-1.1-8.2-3.1c0-1.5,0.5-3,1.3-4.2
 				c0.8-1.2,1.8-2.2,3.1-2.8c1.1,1,2.4,1.6,3.8,1.6c1.3,0,2.6-0.5,3.8-1.6c0.9,0.5,1.7,1.1,2.4,1.8c-2.6,0.2-4.7,2.3-4.7,5
 				c0,2.8,2.2,5,5,5s5-2.2,5-5C22.2,16.1,20.4,14,18,13.6z M17.2,22.7c-2.3,0-4.2-1.9-4.2-4.2c0-2.3,1.9-4.2,4.2-4.2
 				s4.2,1.9,4.2,4.2C21.4,20.9,19.5,22.7,17.2,22.7z"/>
-			<path d="M20.7,17.4c0-0.2-0.2-0.3-0.3-0.3l-1.9-0.3l-0.9-1.7c-0.1-0.1-0.2-0.2-0.4-0.2s-0.3,0.1-0.4,0.2L16,16.9l-1.9,0.3
+        <path d="M20.7,17.4c0-0.2-0.2-0.3-0.3-0.3l-1.9-0.3l-0.9-1.7c-0.1-0.1-0.2-0.2-0.4-0.2s-0.3,0.1-0.4,0.2L16,16.9l-1.9,0.3
 				c-0.2,0-0.3,0.1-0.3,0.3c0,0.2,0,0.3,0.1,0.4l1.4,1.3l-0.3,1.9c0,0.2,0,0.3,0.2,0.4c0.1,0.1,0.3,0.1,0.4,0l1.7-0.9l1.7,0.9
 				c0.1,0,0.1,0,0.2,0c0.1,0,0.2,0,0.2-0.1c0.1-0.1,0.2-0.3,0.2-0.4l-0.3-1.9l1.4-1.3C20.7,17.8,20.7,17.6,20.7,17.4z M18.5,18.8
 				c-0.1,0.1-0.1,0.2-0.1,0.4l0.2,1.3l-1.2-0.6c-0.1,0-0.1,0-0.2,0c-0.1,0-0.1,0-0.2,0l-1.2,0.6l0.2-1.3c0-0.1,0-0.3-0.1-0.4
@@ -803,6 +802,84 @@ export const iconsMap = {
       </>
     ),
   },
+  sendEmail: {
+    viewBox: '0 0 24 24',
+    svg: (
+      <>
+        <path d="M24,5.8h-8.2v1.5h6.7v1L12,14.7L1.5,8.3V7.3h6.6V5.8H0v16.9h24V5.8z M22.5,19.7l-5.2-6.5l5.2-3.2V19.7z M12,16.3
+		c0.1,0,0.3,0,0.4-0.1L16,14l5.7,7.1H2.3L8,14l3.6,2.2C11.7,16.3,11.9,16.3,12,16.3z M6.7,13.2l-5.2,6.5v-9.6L6.7,13.2z"/>
+        <polygon points="12.7,10.8 12.7,5.2 14.7,5.2 12,1.4 9.3,5.2 11.3,5.2 11.3,10.8 	" />
+      </>
+    ),
+  },
+  listInvoice: {
+    viewBox: '0 0 24 24',
+    svg: (
+      <>
+        <path d="M23.9,2.3H9c0,0-0.1,0-0.1,0.1v1.4c0,0,0,0.1,0.1,0.1h15c0,0,0.1,0,0.1-0.1L23.9,2.3C24,2.3,24,2.3,23.9,2.3z" />
+        <circle cx="3.5" cy="12.5" r="1.9" />
+        <circle cx="3.5" cy="20.8" r="1.9" />
+        <path d="M9,6.3h7.1c0,0,0.1,0,0.1-0.1V4.9c0,0,0-0.1-0.1-0.1H9c0,0-0.1,0-0.1,0.1L9,6.3C8.9,6.3,9,6.3,9,6.3z" />
+        <path d="M23.9,10.5H9c0,0-0.1,0-0.1,0.1V12C8.9,12,9,12,9,12h15c0,0,0.1,0,0.1-0.1L23.9,10.5C24,10.5,24,10.5,23.9,10.5z" />
+        <path d="M9,14.6h7.1c0,0,0.1,0,0.1-0.1v-1.4c0,0,0-0.1-0.1-0.1H9c0,0-0.1,0-0.1,0.1L9,14.6C8.9,14.5,9,14.6,9,14.6z" />
+        <path d="M23.9,18.7H9c0,0-0.1,0-0.1,0.1v1.4c0,0,0,0.1,0.1,0.1h15c0,0,0.1,0,0.1-0.1L23.9,18.7C24,18.8,24,18.7,23.9,18.7z" />
+        <path d="M16.1,21.3H9c0,0-0.1,0-0.1,0.1v1.4c0,0,0,0.1,0.1,0.1h7.1c0,0,0.1,0,0.1-0.1L16.1,21.3C16.1,21.3,16.1,21.3,16.1,21.3z"
+        />
+        <polygon points="2.6,4.3 1.4,3 0,4.3 1.3,5.6 2.6,7 4,5.6 7.1,2.6 5.7,1.2 		" />
+      </>
+    ),
+  },
+  listXLS: {
+    viewBox: '0 0 24 24',
+    svg: (
+      <>
+        <path d="M20.8,21.6c0,0.4-0.4,0.8-0.8,0.8H4c-0.4,0-0.8-0.4-0.8-0.8v-2.4H1.6v2.4C1.6,22.9,2.7,24,4,24h16c1.3,0,2.4-1.1,2.4-2.4
+		v-2.4h-1.6V21.6z"/>
+        <polygon points="3.2,14.9 3.2,15.2 3.2,17.6 4.8,17.6 4.8,15.5 5.6,14.7 6.4,15.5 6.4,17.6 8,17.6 8,15.2 8,14.9 7.8,14.6 
+		6.7,13.6 7.8,12.6 8,12.3 8,12 8,9.6 6.4,9.6 6.4,11.7 5.6,12.5 4.8,11.7 4.8,9.6 3.2,9.6 3.2,12 3.2,12.3 3.4,12.6 4.5,13.6 
+		3.4,14.6 	"/>
+        <polygon points="16,16 16,17.6 20,17.6 20.8,17.6 20.8,16.8 20.8,13.6 20.8,12.8 20,12.8 17.6,12.8 17.6,11.2 20.8,11.2 20.8,9.6 
+		16.8,9.6 16,9.6 16,10.4 16,13.6 16,14.4 16.8,14.4 19.2,14.4 19.2,16 	"/>
+        <polygon points="9.6,9.6 9.6,16.8 9.6,17.6 10.4,17.6 14.4,17.6 14.4,16 11.2,16 11.2,9.6 	" />
+        <path d="M22.2,5l-4.8-4.8l-0.6,0.6l0,0l0.6-0.6L17.1,0h-0.3H4C2.7,0,1.6,1.1,1.6,2.4V8h1.6V2.4C3.2,2,3.6,1.6,4,1.6h12.5l4.3,4.3V8
+		h1.6V5.6V5.3L22.2,5z"/>
+      </>
+    ),
+  },
+  listCSV: {
+    viewBox: '0 0 24 24',
+    svg: (
+      <>
+        <polygon points="8,11.2 8,9.6 4,9.6 3.2,9.6 3.2,10.4 3.2,16.8 3.2,17.6 4,17.6 8,17.6 8,16 4.8,16 4.8,11.2 	" />
+        <path d="M20.8,21.6c0,0.4-0.4,0.8-0.8,0.8H4c-0.4,0-0.8-0.4-0.8-0.8v-2.4H1.6v2.4C1.6,22.9,2.7,24,4,24h16c1.3,0,2.4-1.1,2.4-2.4
+		v-2.4h-1.6V21.6z"/>
+        <path d="M22.2,5l-4.8-4.8l-0.6,0.6l0,0l0.6-0.6L17.1,0h-0.3H4C2.7,0,1.6,1.1,1.6,2.4V8h1.6V2.4C3.2,2,3.6,1.6,4,1.6h12.5l4.3,4.3V8
+		h1.6V5.6V5.3L22.2,5z"/>
+        <polygon points="9.6,16 9.6,17.6 13.6,17.6 14.4,17.6 14.4,16.8 14.4,13.6 14.4,12.8 13.6,12.8 11.2,12.8 11.2,11.2 14.4,11.2 
+		14.4,9.6 10.4,9.6 9.6,9.6 9.6,10.4 9.6,13.6 9.6,14.4 10.4,14.4 12.8,14.4 12.8,16 	"/>
+        <polygon points="16,9.6 16,15.2 16,15.5 16.2,15.8 16.8,15.2 16.8,15.2 16.2,15.8 17.8,17.4 18.4,17.9 19,17.4 20.6,15.8 
+		20.8,15.5 20.8,15.2 20.8,9.6 19.2,9.6 19.2,14.9 18.4,15.7 17.6,14.9 17.6,9.6 	"/>
+      </>
+    ),
+  },
+  listPDF: {
+    viewBox: '0 0 24 24',
+    svg: (
+      <>
+        <path d="M4.8,14.4h0.8C7,14.4,8,13.3,8,12S7,9.6,5.6,9.6H4H3.3v0.8v3.2v4h1.6V14.4z M6.4,12c0,0.4-0.4,0.8-0.8,0.8H4.8v-1.6h0.8
+		C6.1,11.2,6.4,11.6,6.4,12z"/>
+        <path d="M20.7,21.5c0,0.4-0.4,0.8-0.8,0.8H4c-0.4,0-0.8-0.4-0.8-0.8v-2.4H1.7v2.4c0,1.3,1.1,2.4,2.4,2.4H20c1.3,0,2.4-1.1,2.4-2.4
+		v-2.4h-1.6V21.5z"/>
+        <path d="M14.4,15.2V12c0-1.3-1.1-2.4-2.4-2.4h-1.6H9.6v0.8v6.4v0.8h0.8H12C13.3,17.6,14.4,16.5,14.4,15.2z M11.2,16v-4.8H12
+		c0.4,0,0.8,0.4,0.8,0.8v3.2c0,0.4-0.4,0.8-0.8,0.8H11.2z"/>
+        <polygon points="20.7,11.2 20.7,9.6 17.6,9.6 16.8,9.6 16,9.6 16,17.6 17.6,17.6 17.6,14.4 19.2,14.4 19.2,12.8 17.6,12.8 
+		17.6,11.2 	"/>
+        <path d="M22.1,5.1l-0.6,0.6l0,0L22.1,5.1l-4.8-4.8l-0.6,0.6l0,0l0.6-0.6l-0.2-0.2h-0.3H4c-1.3,0-2.4,1.1-2.4,2.4V8h1.6V2.5
+		C3.3,2,3.6,1.7,4,1.7h12.4L20.7,6V8h1.6V5.6V5.3L22.1,5.1z"/>
+      </>
+    ),
+  },
+
 
 
 }
@@ -811,7 +888,7 @@ export const iconsMap = {
 export const options = {
   sizes: ['xs', 'sm', 'md', 'lg', 'xl'],
   names: Object.keys(iconsMap),
-  colors: ['base', 'highlight', 'muted', 'primary', 'inverted'],
+  colors: ['base', 'highlight', 'muted', 'primary', 'inverted', 'error', 'success'],
   backgrounds: [
     'transparent',
     'base',
@@ -819,5 +896,7 @@ export const options = {
     'inverted',
     'muted',
     'spotlight',
+    'error',
+    'success',
   ],
 }

package/atoms/Input/Input.js

@@ -4,6 +4,9 @@ import PropTypes from 'prop-types'
 import styles from './Input.module.css'
 import { options } from './constants'
 import withStyles from '../../hocs/withStyles'
+import Icon from '../Icon'
+import { Horizontal } from '../../layout/Spacer/components'
+
 
 // const handleChange = ({ onChange }) => () => {
 //   onChange()
@@ -17,29 +20,93 @@ export const Input = ({
   isInline,
   isInlineCode,
   isInputFilter,
+  isInputSecondary,
   onChange,
+  onFocus,
+  onBlur,
   onClick,
+  onKeyDown,
   placeholder,
+  autocomplete,
+  disabled,
+  isViewIcon,
+  idIcon,
+  nameIcon,
+  sizeIcon,
+  colorIcon,
+  backgroundIcon,
   pattern,
 }) => (
-  <input
-    className={getStyles('input', {
-      'is-inline': isInline,
-      'is-inline-code': isInlineCode,
-      'is-input-filter': isInputFilter,
-    })}
-    type={type}
-    id={id}
-    value={value}
-    placeholder={placeholder}
-    onChange={onChange}
-    onClick={onClick}
-  ></input>
+
+  <>
+
+    {isViewIcon ?
+
+      <div className={getStyles('box-icon-input')}>
+
+        <Icon
+          id={idIcon}
+          name={nameIcon}
+          size={sizeIcon}
+          color={colorIcon}
+          background={backgroundIcon}
+        />
+
+        <Horizontal size="xs" />
+
+        <input
+          className={getStyles('input', {
+            'is-inline': isInline,
+            'is-inline-code': isInlineCode,
+            'is-input-filter': isInputFilter,
+            'is-input-secondary': isInputSecondary,
+          })}
+          type={type}
+          id={id}
+          value={value}
+          placeholder={placeholder}
+          onChange={onChange}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          onClick={onClick}
+          onKeyDown={onKeyDown}
+          autocomplete={autocomplete}
+          disabled={disabled}
+        ></input>
+
+      </div> :
+
+      <input
+        className={getStyles('input', {
+          'is-inline': isInline,
+          'is-inline-code': isInlineCode,
+          'is-input-filter': isInputFilter,
+          'is-input-secondary': isInputSecondary,
+        })}
+        type={type}
+        id={id}
+        value={value}
+        placeholder={placeholder}
+        onChange={onChange}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        onClick={onClick}
+        onKeyDown={onKeyDown}
+        autocomplete={autocomplete}
+        disabled={disabled}
+      ></input>
+
+    }
+
+  </>
 )
 
 Input.propTypes = {
   onChange: PropTypes.func.isRequired,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
   onClick: PropTypes.func,
+  onKeyDown: PropTypes.func,
   getStyles: PropTypes.func.isRequired,
   type: PropTypes.oneOf(options.types),
   id: PropTypes.string.isRequired,
@@ -48,6 +115,15 @@ Input.propTypes = {
   isInline: PropTypes.bool,
   isInlineCode: PropTypes.bool,
   isInputFilter: PropTypes.bool,
+  isInputSecondary: PropTypes.bool,
+  isViewIcon: PropTypes.bool,
+  idIcon: PropTypes.string,
+  nameIcon: PropTypes.string,
+  sizeIcon: PropTypes.string,
+  colorIcon: PropTypes.string,
+  backgroundIcon: PropTypes.string,
+  autocomplete: PropTypes.string,
+  disabled: PropTypes.bool,
 }
 
 Input.defaultProps = {
@@ -58,9 +134,21 @@ Input.defaultProps = {
   isInline: false,
   isInlineCode: false,
   isInputFilter: false,
-  onChange: () => {},
-  onClick: () => {},
-  getStyles: () => {},
+  isInputSecondary: false,
+  onChange: () => { },
+  onFocus: () => { },
+  onBlur: () => { },
+  onClick: () => { },
+  onKeyDown: () => { },
+  getStyles: () => { },
+  isViewIcon: false,
+  idIcon: 'Ejemplo',
+  nameIcon: 'user',
+  sizeIcon: 'md',
+  colorIcon: 'highlight',
+  backgroundIcon: 'base',
+  autocomplete: 'on',
+  disabled: false
 }
 
 export default withStyles(styles)(Input)

package/atoms/Input/Input.module.css

@@ -23,6 +23,10 @@
   outline: none;
 }
 
+.input:disabled {
+  background: #dedede;
+}
+
 .is-inline {
   max-width: max-content;
 }
@@ -45,3 +49,17 @@
   text-align: left;
   height: 28px;
 }
+
+.is-input-secondary {
+  border-radius: var(--border-radius-sm);
+  color: var(--color-font-base);
+  padding: 7px 9px;
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-light);
+  text-align: left;
+  height: 28px;
+}
+
+.box-icon-input {
+  display: flex;
+}

package/atoms/Modal/Modal.js

@@ -36,6 +36,7 @@ export const Modal = ({
   type,
   isPlayground,
   titleModal,
+  isFullWidth,
 }) => {
   const isDesktop = useMedia(['(min-width: 992px)'], [true])
   const [onFadeOut, setOnFadeOut] = useState(false)
@@ -51,7 +52,7 @@ export const Modal = ({
       onClick={handleClose}
     >
       <div
-        className={getStyles('modal', ['type'])}
+        className={getStyles(isFullWidth ? 'modal-full' : 'modal', ['type'])}
         onClick={createHandlerClick()}
       >
         <div className={getStyles('heading')}>
@@ -78,7 +79,9 @@ export const Modal = ({
 						{titleModal}
 					</Heading>
         </div>
-        <Container><div className={getStyles('container')}>{children}</div></Container>
+
+        {isFullWidth ? <div className={getStyles('container-full')}>{children}</div> : <Container><div className={getStyles('container')}>{children}</div></Container>}
+        
       </div>
     </div>
   )
@@ -94,13 +97,15 @@ Modal.propTypes = {
   }),
   type: PropTypes.oneOf(options.types),
   isPlayground: PropTypes.bool,
+  isFullWidth: PropTypes.bool,
   titleModal: PropTypes.string,
 }
 
 Modal.defaultProps = {
   getStyles: () => {},
   type: 'primary',
-  titleModal: 'Ejemplo titulo'
+  titleModal: 'Ejemplo titulo',
+  isFullWidth: false
 }
 
 export default withStyles(styles)(Modal)

package/atoms/Modal/Modal.module.css

@@ -24,15 +24,32 @@
   padding: 16px 32px;
 }
 
+.modal-full {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  padding: 16px 32px;
+}
+
 :not(.is-playground)>.modal {
   animation: fadeInModal 0.4s ease-in forwards;
   opacity: 0;
 }
 
+:not(.is-playground)>.modal-full {
+  animation: fadeInModal 0.4s ease-in forwards;
+  opacity: 0;
+}
+
 .backdrop.on-fade-out .modal {
   animation: fadeOutModal 0.4s ease-in forwards;
 }
 
+.backdrop.on-fade-out .modal-full {
+  animation: fadeOutModal 0.4s ease-in forwards;
+}
+
 .heading {
   display: flex;
   justify-content: space-between;
@@ -61,6 +78,12 @@
     overflow: auto; */
   }
 
+  .modal-full {
+    width: 100%;
+    height: 100%;
+    padding: 16px 32px;
+  }
+
   .heading {
     flex-direction: row-reverse;
   }
@@ -70,6 +93,11 @@
     overflow: auto;
     min-width: 100%;
   }
+
+  .container-full {
+    overflow: auto;
+    min-width: 100%;
+  }
 }
 
 @keyframes fadeInModal {

package/index.js

@@ -45,6 +45,7 @@ export { default as Task } from './molecules/Task'
 export { default as TaskCounter } from './molecules/TaskCounter'
 export { default as IconLabel } from './molecules/IconLabel'
 export { default as ItemMenu } from './molecules/ItemMenu'
+export { default as InputAutocomplete } from './molecules/InputAutocomplete'
 export { default as CheckList } from './molecules/CheckList'
 export { default as ColumnTable } from './molecules/ColumnTable'
 export { default as RowTable } from './molecules/RowTable'

package/molecules/CardDefault/CardDefault.js

@@ -0,0 +1,64 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import styles from './CardDefault.module.css'
+import { options } from './constants'
+import withStyles from '../../hocs/withStyles'
+import Button from '../../atoms/Button'
+import Paragraph from '../../atoms/Paragraph'
+import Spacer from '../../layout/Spacer'
+
+
+export const CardDefault = ({ children, titleCardDefault, titleBtnCardDefault, typeBtnCardDefault, onClickBtnCardDefault, getStyles }) => {
+
+
+  return <div className={getStyles('card-default')}>
+
+
+    <div className={getStyles('card-default-title')}>
+      {titleCardDefault}
+    </div>
+
+    <div className={getStyles('card-default-content')}>
+      {children}
+      <Spacer.Vertical size="md" />
+    </div>
+
+    <div className={getStyles('card-default-actions')}>
+
+      <Button
+        onClick={onClickBtnCardDefault}
+        type={typeBtnCardDefault}
+      >
+        {titleBtnCardDefault}
+      </Button>
+
+    </div>
+
+
+
+  </div>
+}
+
+CardDefault.propTypes = {
+  children: PropTypes.node.isRequired,
+  titleCardDefault: PropTypes.string.isRequired,
+  titleBtnCardDefault: PropTypes.string.isRequired,
+  typeBtnCardDefault: PropTypes.string.isRequired,
+  onClickBtnCardDefault: PropTypes.func,
+  getStyles: PropTypes.func.isRequired,
+  // type: PropTypes.oneOf(options.types),
+}
+
+// const renderValue = () => <Paragraph isCentered size="lg" weight="semibold"> 20 EUR </Paragraph>
+
+CardDefault.defaultProps = {
+  children: <Paragraph isCentered size="lg" weight="semibold"> 20 EUR </Paragraph>,
+  titleCardDefault: 'Saldo actual',
+  typeBtnCardDefault: 'primary',
+  titleBtnCardDefault: '+ Añadir fondos',
+  onClickBtnCardDefault: () => { },
+  getStyles: () => { },
+}
+
+export default withStyles(styles)(CardDefault)

package/molecules/CardDefault/CardDefault.module.css

@@ -0,0 +1,18 @@
+.card-default {
+  text-align: center;
+  box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);
+  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
+  display: block;
+  position: relative;
+  padding: 16px;
+  border-radius: 4px;
+  background: white;
+  color: rgba(0, 0, 0, 0.87);
+}
+
+.card-default-title {
+  font-weight: 400;
+  font-size: 18px;
+  letter-spacing: -0.03em;
+  margin: 0 0 16px;
+}

package/molecules/CardDefault/CardDefault.stories.js

@@ -0,0 +1,23 @@
+import { CardDefault, styles, options } from '.'
+
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(CardDefault, styles)
+const ListTemplate = getListTemplate(CardDefault, styles)
+
+export default {
+  title: 'Molecules/CardDefault',
+  component: CardDefault,
+  args: {},
+  argTypes: {
+    // types: getOptionsArgTypes(options.types),
+  },
+}
+
+export const Default = Template.bind({})
+// export const List = ListTemplate.bind({})
+// List.args = { items: options.types.map((type) => ({ type })) }

package/molecules/CardDefault/constants.js

@@ -0,0 +1 @@
+export const options = { types: [] }

package/molecules/CardDefault/index.js

@@ -0,0 +1,3 @@
+export { default, CardDefault } from './CardDefault'
+export { options } from './constants'
+export { default as styles } from './CardDefault.module.css'