imbric-theme 1.0.9 → 1.1.1

package/atoms/Icon/constants.js

@@ -93,7 +93,6 @@ export const iconsMap = {
 	L4.6,9.7c-0.3-0.3-0.7-0.3-1,0c-0.3,0.3-0.3,0.7,0,1L7,14.1c0.3,0.3,0.7,0.3,1,0L11.4,10.7z"/>
     ),
   },
-
   fileDownload: {
     viewBox: '0 0 21 21',
     svg: (
@@ -107,8 +106,6 @@ export const iconsMap = {
       </g>
     ),
   },
-
-
   pauseCircle: {
     viewBox: '0 0 28 28',
     svg: (
@@ -1082,11 +1079,321 @@ export const iconsMap = {
       </>
     ),
   },
+  iconScore5: {
+    viewBox: '0 0 24 24',
+    svg: (
+      <>
+        <g id="Layer_2">
+          <g id="Export">
+            <path class="st0" d="M12,0.6c6.3,0,11.4,5.1,11.4,11.4S18.3,23.4,12,23.4S0.6,18.3,0.6,12C0.6,5.7,5.7,0.6,12,0.6 M12,0
+			C5.4,0,0,5.4,0,12s5.4,12,12,12s12-5.4,12-12S18.6,0,12,0z"/>
+            <path class="st0" d="M9.6,11.1c-0.1,0-0.2-0.1-0.2-0.1c-0.3-0.6-1-0.8-1.6-0.5c-0.2,0.1-0.4,0.3-0.5,0.5c-0.1,0.1-0.2,0.2-0.4,0.1
+			c-0.1-0.1-0.2-0.2-0.1-0.4C7.2,9.8,8.3,9.5,9.1,10c0.3,0.2,0.6,0.4,0.7,0.7c0.1,0.1,0,0.3-0.1,0.4C9.7,11.1,9.6,11.1,9.6,11.1z"/>
+            <path class="st0" d="M14.8,11.1c-0.2,0-0.3-0.1-0.3-0.3c0-0.1,0-0.1,0-0.1c0.5-0.9,1.5-1.2,2.4-0.7c0.3,0.2,0.6,0.4,0.7,0.7
+			c0.1,0.1,0,0.3-0.1,0.4c-0.1,0.1-0.3,0-0.4-0.1c0,0,0,0,0,0c-0.3-0.6-1-0.8-1.6-0.5c-0.2,0.1-0.4,0.3-0.5,0.5
+			C15,11,14.9,11.1,14.8,11.1z"/>
+            <path class="st0" d="M12,19.3c-1.2,0-2.2-0.8-2.4-1.8c0,0,0,0,0,0v-3.3c0-0.2,0.1-0.3,0.3-0.3h4.2c0.2,0,0.3,0.1,0.3,0.3v3.3
+			c0,0,0,0,0,0C14.2,18.6,13.2,19.3,12,19.3z M10.2,17.5c0.1,0.7,0.9,1.3,1.8,1.3s1.7-0.5,1.8-1.3v-3h-3.6V17.5z M14.1,17.5
+			L14.1,17.5z"/>
+          </g>
+        </g>
+      </>
+    ),
+  },
+  iconScore5_done: {
+    viewBox: '0 0 24 24',
+    svg: (
+      <>
+        <g>
+          <path class="st0" d="M10.2,17.5c0.1,0.7,0.9,1.3,1.8,1.3s1.7-0.5,1.8-1.3v-3h-3.6V17.5z" />
+          <path class="st0" d="M12,0C5.4,0,0,5.4,0,12c0,6.6,5.4,12,12,12s12-5.4,12-12C24,5.4,18.6,0,12,0z M7.8,10.5
+		c-0.2,0.1-0.4,0.3-0.5,0.5c-0.1,0.1-0.2,0.2-0.4,0.1c-0.1-0.1-0.2-0.2-0.1-0.4C7.2,9.8,8.3,9.5,9.1,10c0.3,0.2,0.6,0.4,0.7,0.7
+		c0.1,0.1,0,0.3-0.1,0.4H9.6c-0.1,0-0.2-0.1-0.2-0.1C9.1,10.4,8.4,10.2,7.8,10.5z M14.4,17.5c-0.2,1.1-1.2,1.8-2.4,1.8
+		s-2.2-0.8-2.4-1.8v-3.3c0-0.2,0.1-0.3,0.3-0.3h4.2c0.2,0,0.3,0.1,0.3,0.3V17.5z M17.5,11.1c-0.1,0.1-0.3,0-0.4-0.1
+		c-0.3-0.6-1-0.8-1.6-0.5c-0.2,0.1-0.4,0.3-0.5,0.5c0,0-0.1,0.1-0.2,0.1c-0.2,0-0.3-0.1-0.3-0.3c0-0.1,0-0.1,0-0.1
+		C15,9.8,16,9.5,16.9,10c0.3,0.2,0.6,0.4,0.7,0.7C17.7,10.8,17.6,11,17.5,11.1z"/>
+        </g>
+      </>
+    ),
+  },
+  iconScore4: {
+    viewBox: '0 0 24 24',
+    svg: (
+      <>
+        <g id="Layer_2">
+          <g id="Export">
+            <path class="st0" d="M12,0.6c6.3,0,11.4,5.1,11.4,11.4S18.3,23.4,12,23.4S0.6,18.3,0.6,12C0.6,5.7,5.7,0.6,12,0.6 M12,0
+			C5.4,0,0,5.4,0,12s5.4,12,12,12s12-5.4,12-12S18.6,0,12,0z"/>
+            <path class="st0" d="M16.9,10.6h-1.7c-0.2,0-0.3-0.1-0.3-0.3s0.1-0.3,0.3-0.3h1.7c0.2,0,0.3,0.1,0.3,0.3S17,10.6,16.9,10.6
+			L16.9,10.6z"/>
+            <path class="st0" d="M8.8,10.6H7.1c-0.2,0-0.3-0.1-0.3-0.3s0.1-0.3,0.3-0.3h1.7c0.2,0,0.3,0.1,0.3,0.3S9,10.6,8.8,10.6z" />
+            <path class="st0" d="M12,17.8c-0.2,0-0.4,0-0.5,0c-1.4-0.1-2.7-0.6-3.8-1.4c-0.1-0.1-0.2-0.3-0.1-0.4c0.1-0.1,0.3-0.2,0.4-0.1l0,0
+			c1,0.7,2.2,1.2,3.5,1.3c1.6,0.1,3.2-0.3,4.5-1.3c0.1-0.1,0.3-0.1,0.4,0c0.1,0.1,0.1,0.3,0,0.4c0,0,0,0,0,0
+			C15.1,17.3,13.5,17.8,12,17.8z"/>
+          </g>
+        </g>
+      </>
+    ),
+  },
+  iconScore4_done: {
+    viewBox: '0 0 24 24',
+    svg: (
+      <>
+        <path class="st0" d="M12,0C5.4,0,0,5.4,0,12c0,6.6,5.4,12,12,12s12-5.4,12-12C24,5.4,18.6,0,12,0z M6.8,10.3c0-0.2,0.1-0.3,0.3-0.3
+	h1.7c0.2,0,0.3,0.1,0.3,0.3S9,10.6,8.8,10.6H7.1C6.9,10.6,6.8,10.5,6.8,10.3z M16.4,16.3c-1.3,1-2.9,1.5-4.4,1.5c-0.2,0-0.4,0-0.5,0
+	c-1.4-0.1-2.7-0.6-3.8-1.4c-0.1-0.1-0.2-0.3-0.1-0.4c0.1-0.1,0.3-0.2,0.4-0.1c1,0.7,2.2,1.2,3.5,1.3c1.6,0.1,3.2-0.3,4.5-1.3
+	c0.1-0.1,0.3-0.1,0.4,0C16.5,16,16.5,16.2,16.4,16.3z M16.9,10.6h-1.7c-0.2,0-0.3-0.1-0.3-0.3S15,10,15.2,10h1.7
+	c0.2,0,0.3,0.1,0.3,0.3S17,10.6,16.9,10.6z"/>
+      </>
+    ),
+  },
+  iconScore3: {
+    viewBox: '0 0 24 24',
+    svg: (
+      <>
+        <g id="Layer_2">
+          <g id="Export">
+            <path class="st0" d="M12,0.6c6.3,0,11.4,5.1,11.4,11.4S18.3,23.4,12,23.4S0.6,18.3,0.6,12C0.6,5.7,5.7,0.6,12,0.6 M12,0
+			C5.4,0,0,5.4,0,12s5.4,12,12,12s12-5.4,12-12S18.6,0,12,0z"/>
+            <path class="st0" d="M16.9,10.6h-1.7c-0.2,0-0.3-0.1-0.3-0.3s0.1-0.3,0.3-0.3h1.7c0.2,0,0.3,0.1,0.3,0.3S17,10.6,16.9,10.6
+			L16.9,10.6z"/>
+            <path class="st0" d="M8.8,10.6H7.1c-0.2,0-0.3-0.1-0.3-0.3s0.1-0.3,0.3-0.3h1.7c0.2,0,0.3,0.1,0.3,0.3S9,10.6,8.8,10.6z" />
+            <path class="st0" d="M16.2,16.5H7.8c-0.2,0-0.3-0.1-0.3-0.3s0.1-0.3,0.3-0.3h8.3c0.2,0,0.3,0.1,0.3,0.3S16.3,16.5,16.2,16.5z" />
+          </g>
+        </g>
+      </>
+    ),
+  },
+  iconScore3_done: {
+    viewBox: '0 0 24 24',
+    svg: (
+      <>
+        <path class="st0" d="M12,0C5.4,0,0,5.4,0,12c0,6.6,5.4,12,12,12s12-5.4,12-12C24,5.4,18.6,0,12,0z M6.8,10.3c0-0.2,0.1-0.3,0.3-0.3
+	h1.7c0.2,0,0.3,0.1,0.3,0.3S9,10.6,8.8,10.6H7.1C6.9,10.6,6.8,10.5,6.8,10.3z M16.2,16.5H7.8c-0.2,0-0.3-0.1-0.3-0.3
+	c0-0.2,0.1-0.3,0.3-0.3h8.3c0.2,0,0.3,0.1,0.3,0.3C16.4,16.4,16.3,16.5,16.2,16.5z M16.9,10.6h-1.7c-0.2,0-0.3-0.1-0.3-0.3
+	S15,10,15.2,10h1.7c0.2,0,0.3,0.1,0.3,0.3S17,10.6,16.9,10.6z"/>
+      </>
+    ),
+  },
+  iconScore2: {
+    viewBox: '0 0 24 24',
+    svg: (
+      <>
+        <g id="Layer_2">
+          <g id="Export">
+            <path class="st0" d="M12,0.6c6.3,0,11.4,5.1,11.4,11.4S18.3,23.4,12,23.4S0.6,18.3,0.6,12C0.6,5.7,5.7,0.6,12,0.6 M12,0
+			C5.4,0,0,5.4,0,12s5.4,12,12,12s12-5.4,12-12S18.6,0,12,0z"/>
+            <path class="st0" d="M16.2,17.8c-0.1,0-0.1,0-0.2,0c-1.3-0.9-2.9-1.4-4.5-1.3C10.2,16.6,9,17,8,17.7c-0.1,0.1-0.3,0.1-0.4-0.1
+			c-0.1-0.1-0.1-0.3,0.1-0.4c1.1-0.8,2.4-1.3,3.8-1.4c1.7-0.1,3.4,0.4,4.9,1.4c0.1,0.1,0.2,0.3,0.1,0.4
+			C16.4,17.7,16.3,17.8,16.2,17.8L16.2,17.8z"/>
+            <path class="st0" d="M8.2,11.4c-0.7,0-1.2-0.4-1.6-0.9c-0.1-0.1,0-0.3,0.1-0.4c0.1-0.1,0.3,0,0.4,0.1c0,0,0,0,0,0
+			c0.3,0.6,1,0.8,1.6,0.5c0.2-0.1,0.4-0.3,0.5-0.5C9.3,10,9.5,10,9.7,10c0.1,0.1,0.2,0.2,0.1,0.4C9.5,11,8.9,11.4,8.2,11.4z"/>
+            <path class="st0" d="M16,11.4c-0.7,0-1.2-0.4-1.6-0.9c-0.1-0.1,0-0.3,0.1-0.4c0.1-0.1,0.3,0,0.4,0.1c0,0,0,0,0,0
+			c0.3,0.6,1,0.8,1.6,0.5c0.2-0.1,0.4-0.3,0.5-0.5c0.1-0.1,0.2-0.2,0.4-0.1c0.1,0.1,0.2,0.2,0.1,0.4c0,0,0,0,0,0
+			C17.3,11,16.7,11.4,16,11.4z"/>
+          </g>
+        </g>
+      </>
+    ),
+  },
+  iconScore2_done: {
+    viewBox: '0 0 24 24',
+    svg: (
+      <>
+        <path class="st0" d="M12,0C5.4,0,0,5.4,0,12c0,6.6,5.4,12,12,12s12-5.4,12-12C24,5.4,18.6,0,12,0z M6.6,10.5c-0.1-0.1,0-0.3,0.1-0.4
+	c0.1-0.1,0.3,0,0.4,0.1c0.3,0.6,1,0.8,1.6,0.5c0.2-0.1,0.4-0.3,0.5-0.5C9.3,10,9.5,10,9.7,10c0.1,0.1,0.2,0.2,0.1,0.4
+	c-0.3,0.6-0.9,1-1.6,1S7,11,6.6,10.5z M16.5,17.6c-0.1,0.1-0.2,0.2-0.3,0.2c-0.1,0-0.1,0-0.2,0c-1.3-0.9-2.9-1.4-4.5-1.3
+	C10.2,16.6,9,17,8,17.7c-0.1,0.1-0.3,0.1-0.4-0.1c-0.1-0.1-0.1-0.3,0.1-0.4c1.1-0.8,2.4-1.3,3.8-1.4c1.7-0.1,3.4,0.4,4.9,1.4
+	C16.5,17.3,16.6,17.5,16.5,17.6z M17.5,10.5c-0.2,0.5-0.8,0.9-1.5,0.9s-1.2-0.4-1.6-0.9c-0.1-0.1,0-0.3,0.1-0.4
+	c0.1-0.1,0.3,0,0.4,0.1c0.3,0.6,1,0.8,1.6,0.5c0.2-0.1,0.4-0.3,0.5-0.5c0.1-0.1,0.2-0.2,0.4-0.1C17.5,10.2,17.6,10.3,17.5,10.5z"/>
+      </>
+    ),
+  },
+  iconScore1: {
+    viewBox: '0 0 24 24',
+    svg: (
+      <>
+        <g id="Layer_2">
+          <g id="Export">
+            <path class="st0" d="M12,0.6c6.3,0,11.4,5.1,11.4,11.4S18.3,23.4,12,23.4S0.6,18.3,0.6,12C0.6,5.7,5.7,0.6,12,0.6 M12,0
+			C5.4,0,0,5.4,0,12s5.4,12,12,12s12-5.4,12-12S18.6,0,12,0z"/>
+            <path class="st0" d="M8.8,5.1h-1l0.7-0.7c0.1-0.1,0.1-0.3,0-0.4c-0.1-0.1-0.3-0.1-0.4,0L6.9,5.1c0,0,0,0.1-0.1,0.1l0,0
+			c0,0.1,0,0.1,0,0.2l0,0c0,0.1,0.1,0.1,0.2,0.2l0,0c0,0,0.1,0,0.1,0h1.7c0.2,0,0.3-0.1,0.3-0.3C9.1,5.2,9,5.1,8.8,5.1z"/>
+            <path class="st0" d="M4.3,5.1h1L4.6,4.3c-0.1-0.1-0.1-0.3,0-0.4c0.1-0.1,0.3-0.1,0.4,0l1.2,1.2c0,0,0,0.1,0.1,0.1l0,0
+			c0,0.1,0,0.1,0,0.2l0,0c0,0.1-0.1,0.1-0.2,0.2l0,0c0,0-0.1,0-0.1,0H4.3C4.2,5.6,4,5.5,4,5.3C4,5.2,4.2,5.1,4.3,5.1z"/>
+            <path class="st0" d="M8.8,6.7h-1l0.7,0.7c0.1,0.1,0.1,0.3,0,0.4C8.4,8,8.2,8,8.1,7.9L6.9,6.7c0,0,0-0.1-0.1-0.1l0,0
+			c0-0.1,0-0.1,0-0.2l0,0c0-0.1,0.1-0.1,0.2-0.2l0,0c0,0,0.1,0,0.1,0h1.7c0.2,0,0.3,0.1,0.3,0.3C9.1,6.6,9,6.7,8.8,6.7z"/>
+            <path class="st0" d="M4.3,6.7h1L4.6,7.5c-0.1,0.1-0.1,0.3,0,0.4C4.7,8,4.9,8,5,7.9l1.2-1.2c0,0,0-0.1,0.1-0.1l0,0
+			c0-0.1,0-0.1,0-0.2l0,0c0-0.1-0.1-0.1-0.2-0.2l0,0c0,0-0.1,0-0.1,0H4.3C4.2,6.2,4,6.3,4,6.5C4,6.6,4.2,6.7,4.3,6.7z"/>
+            <path class="st0" d="M16.6,9.8h-1.7c-0.2,0-0.3,0.1-0.3,0.3s0.1,0.3,0.3,0.3h1.7c0.2,0,0.3-0.1,0.3-0.3S16.8,9.8,16.6,9.8z" />
+            <path class="st0" d="M8.5,9.8H6.9c-0.2,0-0.3,0.1-0.3,0.3s0.1,0.3,0.3,0.3h1.7c0.2,0,0.3-0.1,0.3-0.3S8.7,9.8,8.5,9.8z" />
+            <path class="st0" d="M15.9,15.7c-0.1,0-0.1,0-0.2,0c-1.3-0.9-2.9-1.4-4.5-1.3c-1.3,0.1-2.5,0.5-3.5,1.3c-0.1,0.1-0.3,0.1-0.4,0
+			c-0.1-0.1-0.1-0.3,0-0.4c0,0,0,0,0.1-0.1c1.1-0.8,2.4-1.3,3.8-1.4c1.7-0.1,3.4,0.4,4.9,1.4c0.1,0.1,0.2,0.3,0.1,0.4
+			C16.1,15.7,16,15.7,15.9,15.7L15.9,15.7z"/>
+          </g>
+        </g>
+      </>
+    ),
+  },
+  iconScore1_done: {
+    viewBox: '0 0 24 24',
+    svg: (
+      <>
+        <path class="st0" d="M12,0C5.4,0,0,5.4,0,12c0,6.6,5.4,12,12,12s12-5.4,12-12C24,5.4,18.6,0,12,0z M6.8,5.2c0.1,0,0.1-0.1,0.1-0.1
+	L8.1,4c0.1-0.1,0.3-0.1,0.4,0c0.1,0.1,0.1,0.3,0,0.4L7.8,5.1h1c0.2,0,0.3,0.1,0.3,0.2c0,0.2-0.1,0.3-0.3,0.3H7.1H7
+	C6.9,5.5,6.8,5.5,6.8,5.4C6.8,5.3,6.8,5.3,6.8,5.2z M6.8,6.4c0-0.1,0.1-0.1,0.2-0.2h0.1h1.7c0.2,0,0.3,0.1,0.3,0.3
+	c0,0.1-0.1,0.2-0.3,0.2h-1l0.7,0.7c0.1,0.1,0.1,0.3,0,0.4C8.4,8,8.2,8,8.1,7.9L6.9,6.7c0,0,0-0.1-0.1-0.1C6.8,6.5,6.8,6.5,6.8,6.4z
+	 M6.3,6.6c-0.1,0-0.1,0.1-0.1,0.1L5,7.9C4.9,8,4.7,8,4.6,7.9c-0.1-0.1-0.1-0.3,0-0.4l0.7-0.8h-1C4.2,6.7,4,6.6,4,6.5
+	c0-0.2,0.2-0.3,0.3-0.3H6h0.1c0.1,0.1,0.2,0.1,0.2,0.2C6.3,6.5,6.3,6.5,6.3,6.6z M6.3,5.4c0,0.1-0.1,0.1-0.2,0.2H6H4.3
+	C4.2,5.6,4,5.5,4,5.3c0-0.1,0.2-0.2,0.3-0.2h1L4.6,4.3C4.5,4.2,4.5,4,4.6,3.9c0.1-0.1,0.3-0.1,0.4,0l1.2,1.2c0,0,0,0.1,0.1,0.1
+	C6.3,5.3,6.3,5.3,6.3,5.4z M6.6,10.1c0-0.2,0.1-0.3,0.3-0.3h1.6c0.2,0,0.4,0.1,0.4,0.3s-0.1,0.3-0.3,0.3H6.9
+	C6.7,10.4,6.6,10.3,6.6,10.1z M16.2,15.6c-0.1,0.1-0.2,0.1-0.3,0.1c-0.1,0-0.1,0-0.2,0c-1.3-0.9-2.9-1.4-4.5-1.3
+	c-1.3,0.1-2.5,0.5-3.5,1.3c-0.1,0.1-0.3,0.1-0.4,0c-0.1-0.1-0.1-0.3,0-0.4c0,0,0,0,0.1-0.1c1.1-0.8,2.4-1.3,3.8-1.4
+	c1.7-0.1,3.4,0.4,4.9,1.4C16.2,15.3,16.3,15.5,16.2,15.6z M16.6,10.4h-1.7c-0.2,0-0.3-0.1-0.3-0.3s0.1-0.3,0.3-0.3h1.7
+	c0.2,0,0.3,0.1,0.3,0.3S16.8,10.4,16.6,10.4z"/>
+      </>
+    ),
+  },
+  iconReload: {
+    viewBox: '0 0 24 24',
+    svg: (
+      <>
+        <g>
+          <g>
+            <path d="M5.5,4.8C9,1.6,14.3,1.5,17.9,4.4l-2.8,0.1c-0.4,0-0.7,0.3-0.6,0.7c0,0.4,0.3,0.6,0.7,0.6c0,0,0,0,0,0l4.4-0.2
+			c0.4,0,0.6-0.3,0.6-0.7v0c0,0,0,0,0,0v0l0,0L20,0.6C20,0.3,19.7,0,19.3,0c-0.4,0-0.7,0.3-0.6,0.7l0.1,2.7c-1.8-1.5-4-2.3-6.3-2.4
+			C9.6,0.8,6.8,1.8,4.6,3.8c-3,2.7-4.2,6.8-3.3,10.6c0.1,0.3,0.3,0.5,0.6,0.5c0.1,0,0.1,0,0.2,0c0.4-0.1,0.6-0.4,0.5-0.8
+			C1.8,10.7,2.9,7.1,5.5,4.8z"/>
+            <path d="M22.7,9.6c-0.1-0.4-0.4-0.6-0.8-0.5c-0.4,0.1-0.6,0.4-0.5,0.8c0.8,3.4-0.3,7-2.9,9.3c-1.8,1.7-4.1,2.5-6.4,2.5
+			c-2.2,0-4.4-0.7-6.1-2.2l2.9-0.3c0.4,0,0.6-0.4,0.6-0.7c0-0.4-0.4-0.6-0.7-0.6l-4.4,0.4c-0.4,0-0.6,0.4-0.6,0.7l0.4,4.4
+			c0,0.3,0.3,0.6,0.7,0.6c0,0,0,0,0.1,0c0.4,0,0.6-0.4,0.6-0.7l-0.2-2.7c1.8,1.4,4,2.3,6.3,2.4c0.2,0,0.4,0,0.6,0
+			c2.7,0,5.3-1,7.3-2.8C22.4,17.5,23.6,13.5,22.7,9.6z"/>
+          </g>
+        </g>
+      </>
+    ),
+  },
+  iconWindows: {
+    viewBox: '0 0 24 24',
+    svg: (
+      <>
+        <g id="Page-1">
+          <g id="Dribbble-Light-Preview" transform="translate(-60.000000, -7439.000000)">
+            <g id="icons" transform="translate(56.000000, 160.000000)">
+              <path id="windows-_x5B__x23_174_x5D_" class="st0" d="M15,7291.5c0,2.4,0,6.5,0,9.6c4.3,0.6,8.7,1.2,13,1.8c0-3.8,0-7.5,0-11.1
+				C23.7,7291.9,19.3,7291.5,15,7291.5 M4,7291.5v8.1c3.3,0.4,6.5,0.9,9.8,1.3c0-3.2,0-6.3,0-9.5C10.5,7291.6,7.3,7291.5,4,7291.5
+				 M4,7282.4v8.1c3.3,0,6.5,0,9.8,0c0-3.1,0-6.3,0-9.4C10.5,7281.5,7.3,7281.9,4,7282.4 M28,7290.4c-4.3,0-8.7,0.1-13,0.1
+				c0-3.2,0-6.4,0-9.6c4.3-0.7,8.7-1.3,13-1.9C28,7282.8,28,7286.6,28,7290.4"/>
+            </g>
+          </g>
+        </g>
+      </>
+    ),
+  },
+  iconDotCircle: {
+    viewBox: '0 0 24 24',
+    svg: (
+      <>
+        <path d="M12,6.7c2.9,0,5.2,2.4,5.2,5.3s-2.4,5.2-5.2,5.2S6.7,14.9,6.7,12S9.1,6.7,12,6.7" />
+        <path d="M12,24C5.4,24,0,18.6,0,12S5.4,0,12,0s12,5.4,12,12S18.6,24,12,24z M12,1.5C6.2,1.5,1.5,6.2,1.5,12S6.2,22.5,12,22.5
+	S22.5,17.8,22.5,12S17.8,1.5,12,1.5z"/>
+      </>
+    ),
+  },
+  iconApple: {
+    viewBox: '0 0 24 24',
+    svg: (
+      <>
+        <g id="Page-1">
+          <g id="Dribbble-Light-Preview" transform="translate(-102.000000, -7439.000000)">
+            <g id="icons" transform="translate(56.000000, 160.000000)">
+              <path id="apple-_x5B__x23_173_x5D_" class="st0" d="M61.7,7282.8c0.9-1,1.5-2.4,1.3-3.8c-1.3,0-2.8,0.8-3.7,1.8
+				c-0.8,0.9-1.5,2.3-1.3,3.7C59.4,7284.6,60.8,7283.8,61.7,7282.8 M64.8,7291.7c0,3.6,3.3,4.8,3.4,4.9c0,0.1-0.5,1.7-1.7,3.4
+				c-1,1.5-2.1,2.9-3.8,2.9c-1.7,0-2.2-1-4.1-1c-1.9,0-2.5,0.9-4.1,1c-1.6,0.1-2.9-1.6-4-3c-2.2-3-3.8-8.4-1.6-12.1
+				c1.1-1.8,3.1-3,5.2-3c1.6,0,3.1,1,4.1,1c1,0,2.8-1.3,4.8-1.1c0.8,0,3.1,0.3,4.6,2.4C67.4,7287.3,64.8,7288.7,64.8,7291.7"/>
+            </g>
+          </g>
+        </g>
+      </>
+    ),
+  },
+  iconAndroid: {
+    viewBox: '0 0 24 24',
+    svg: (
+      <>
+        <path d="M16.1,0.8l-1.2,1.6c1.8,0.9,3.1,2.5,3.3,4.4H5.8C5.9,5,7.2,3.3,9.1,2.5L7.9,0.8c-0.1-0.1,0-0.2,0.1-0.3s0.2,0,0.3,0.1
+	l1.2,1.7C10.2,2,11.1,1.8,12,1.8s1.8,0.2,2.6,0.5l1.2-1.7c0.1-0.1,0.2-0.1,0.3-0.1S16.2,0.7,16.1,0.8L16.1,0.8z M9.4,5.1
+	c0.4,0,0.7-0.3,0.7-0.7c0-0.4-0.3-0.7-0.7-0.7C9,3.7,8.7,4.1,8.7,4.4C8.7,4.8,9,5.1,9.4,5.1z M14.7,5.1c0.4,0,0.7-0.3,0.7-0.7
+	c0-0.4-0.3-0.7-0.7-0.7c-0.4,0-0.7,0.3-0.7,0.7C14,4.8,14.3,5.1,14.7,5.1z M2.2,14.6V9.1c0-0.8,0.6-1.4,1.4-1.4C4.4,7.7,5,8.3,5,9.1
+	v5.5c0,0.8-0.6,1.4-1.4,1.4C2.8,16.1,2.2,15.5,2.2,14.6z M19,14.6V9.1c0-0.8,0.6-1.4,1.4-1.4s1.4,0.7,1.4,1.4v5.5
+	c0,0.8-0.6,1.4-1.4,1.4S19,15.5,19,14.6z M5.8,17.8V7.7h12.4v10.1c0,0.6-0.5,1.1-1.1,1.1h-1.2v3.1c0,0.8-0.6,1.4-1.4,1.4
+	c-0.8,0-1.4-0.6-1.4-1.4V19h-2.2v3.1c0,0.8-0.6,1.4-1.4,1.4c-0.8,0-1.4-0.6-1.4-1.4V19H6.9C6.3,19,5.8,18.4,5.8,17.8L5.8,17.8z"/>
+      </>
+    ),
+  },
+  iconDesktop: {
+    viewBox: '0 0 24 24',
+    svg: (
+      <>
+        <path d="M22,1.6H2c-1.1,0-2,0.9-2,2v12c0,1.1,0.9,2,2,2h7v2.8H5.6v2h12.8v-2h-3.3v-2.8H22c1.1,0,2-0.9,2-2v-12
+	C24,2.5,23.1,1.6,22,1.6z M13.1,20.4H11v-2.8h2.1V20.4z M22,15.6H2v-12h20V15.6z"/>
+      </>
+    ),
+  },
+  iconComments: {
+    viewBox: '0 0 24 24',
+    svg: (
+      <>
+        <g id="comments-Regular">
+          <path id="comments-Regular-2" class="st0" d="M19.4,6.2h-0.3V4.6C19.1,2.1,17,0,14.5,0H4.6C2.1,0,0,2.1,0,4.6v12.3
+		c0,0.4,0.2,0.7,0.6,0.9c0.1,0,0.2,0.1,0.3,0.1c0.2,0,0.5-0.1,0.7-0.3l2.1-2.2h1.2v1.5c0,2.5,2.1,4.6,4.6,4.6h10.7l2.1,2.2
+		c0.2,0.2,0.4,0.3,0.7,0.3c0.1,0,0.2,0,0.3-0.1c0.3-0.1,0.6-0.5,0.6-0.9V10.8C24,8.2,21.9,6.2,19.4,6.2z M3.3,13.5
+		c-0.2,0-0.5,0.1-0.7,0.3l-0.8,0.8v-10c0-1.5,1.2-2.8,2.8-2.8h9.8c1.5,0,2.8,1.2,2.8,2.8v6.2c0,1.5-1.2,2.8-2.8,2.8H3.3z M22.2,20.8
+		L21.3,20c-0.2-0.2-0.4-0.3-0.7-0.3H9.5c-1.5,0-2.8-1.2-2.8-2.8v-1.5h7.7c2.5,0,4.6-2.1,4.6-4.6V8h0.3c1.5,0,2.8,1.2,2.8,2.8V20.8z"
+          />
+        </g>
+      </>
+    ),
+  },
+  iconFlash: {
+    viewBox: '0 0 24 24',
+    svg: (
+      <>
+        <path class="st0" d="M9.6,25c-0.2,0-0.4,0-0.6-0.1c-0.5-0.2-1.4-0.8-1.4-2.7v-7.7H4.9c-1.7,0-2.3-0.8-2.5-1.3
+	C2.1,12.8,2,11.9,3,10.7l9.1-10.4c1.2-1.4,2.3-1.3,2.8-1.2c0.5,0.2,1.4,0.8,1.4,2.7v7.6H19c1.7,0,2.3,0.8,2.5,1.2
+	c0.2,0.5,0.4,1.4-0.7,2.7l-9.1,10.4C10.9,24.7,10.1,25,9.6,25z M9.8,23.1L9.8,23.1L9.8,23.1z M4.2,12.4c0.1,0,0.3,0.1,0.7,0.1h3.7
+	c0.6,0,1,0.4,1,1v8.7c0,0.4,0,0.6,0.1,0.7c0.1-0.1,0.3-0.2,0.6-0.5L19.4,12c0.2-0.3,0.3-0.5,0.3-0.5c-0.1,0-0.3-0.1-0.7-0.1h-3.7
+	c-0.6,0-1-0.4-1-1V1.8c0-0.4,0-0.6-0.1-0.7c-0.1,0.1-0.3,0.2-0.6,0.5L4.5,12C4.4,12.2,4.3,12.4,4.2,12.4z"/>
+      </>
+    ),
+  },
+  iconBuilding: {
+    viewBox: '0 0 24 24',
+    svg: (
+      <>
+        <g>
+          <g>
+            <path d="M23,24H10.5c-0.6,0-1-0.4-1-1v-3.4H7.1V23c0,0.6-0.4,1-1,1H1c-0.6,0-1-0.4-1-1V1.7C0,0.8,0.8,0,1.7,0h13.2
+			c1,0,1.7,0.8,1.7,1.7v19.1c0,0.6-0.4,1-1,1s-1-0.4-1-1V2H2v20h3.1v-3.4c0-0.6,0.4-1,1-1h4.4c0.6,0,1,0.4,1,1V22H22V6.4h-4.1
+			c-0.6,0-1-0.4-1-1s0.4-1,1-1h4.4c1.1,0,1.7,0.9,1.7,1.7V23C24,23.6,23.6,24,23,24z M19.3,15.9c-0.6,0-1-0.4-1-1v-1.5
+			c0-0.6,0.4-1,1-1s1,0.4,1,1v1.5C20.3,15.5,19.9,15.9,19.3,15.9z M12,15.9c-0.6,0-1-0.4-1-1v-1.5c0-0.6,0.4-1,1-1c0.6,0,1,0.4,1,1
+			v1.5C13,15.5,12.6,15.9,12,15.9z M8.3,15.9c-0.6,0-1-0.4-1-1v-1.5c0-0.6,0.4-1,1-1s1,0.4,1,1v1.5C9.3,15.5,8.9,15.9,8.3,15.9z
+			 M4.7,15.9c-0.6,0-1-0.4-1-1v-1.5c0-0.6,0.4-1,1-1s1,0.4,1,1v1.5C5.7,15.5,5.2,15.9,4.7,15.9z M19.3,11.5c-0.6,0-1-0.4-1-1V9.1
+			c0-0.6,0.4-1,1-1s1,0.4,1,1v1.5C20.3,11.1,19.9,11.5,19.3,11.5z M12,11.5c-0.6,0-1-0.4-1-1V9.1c0-0.6,0.4-1,1-1c0.6,0,1,0.4,1,1
+			v1.5C13,11.1,12.6,11.5,12,11.5z M8.3,11.5c-0.6,0-1-0.4-1-1V9.1c0-0.6,0.4-1,1-1s1,0.4,1,1v1.5C9.3,11.1,8.9,11.5,8.3,11.5z
+			 M4.7,11.5c-0.6,0-1-0.4-1-1V9.1c0-0.6,0.4-1,1-1s1,0.4,1,1v1.5C5.7,11.1,5.2,11.5,4.7,11.5z M12,7.1c-0.6,0-1-0.4-1-1V4.7
+			c0-0.6,0.4-1,1-1c0.6,0,1,0.4,1,1v1.5C13,6.7,12.6,7.1,12,7.1z M8.3,7.1c-0.6,0-1-0.4-1-1V4.7c0-0.6,0.4-1,1-1s1,0.4,1,1v1.5
+			C9.3,6.7,8.9,7.1,8.3,7.1z M4.7,7.1c-0.6,0-1-0.4-1-1V4.7c0-0.6,0.4-1,1-1s1,0.4,1,1v1.5C5.7,6.7,5.2,7.1,4.7,7.1z"/>
+          </g>
+        </g>
+      </>
+    ),
+  },
 }
 
 
 export const options = {
-  sizes: ['xs', 'sm', 'md', 'lg', 'xl'],
+  sizes: ['xs', 'sm', 'md', 'lg', 'xl', 'xl2'],
   names: Object.keys(iconsMap),
   colors: ['base', 'highlight', 'muted', 'primary', 'inverted', 'error', 'success'],
   backgrounds: [

package/atoms/Icon/helpers.js

@@ -4,6 +4,7 @@ const iconSize = {
   md: 35,
   lg: 50,
   xl: 70,
+  xl2: 80,
 }
 
 export const mapSize = (size) => iconSize[size]

package/atoms/Input/Input.module.css

@@ -83,6 +83,6 @@
 }
 
 .is-date {
-  width: 85px;
+  width: 100px;
   padding: 10px 6px;
 }

package/atoms/Label/Label.module.css

@@ -7,6 +7,7 @@
   font-size: var(--font-size-mini);
   font-weight: var(--font-weight-light);
   line-height: var(--line-height-tight);
+  align-items: center;
 }
 
 .is-hint {

package/atoms/Modal/Modal.js

@@ -8,9 +8,9 @@ import Icon from '../Icon'
 import Container from '../../layout/Container'
 import isEmpty from '../../utils/isEmpty'
 
-
 import useMedia from '../../hook/useMedia'
 import Heading from '../Heading'
+import { Horizontal } from '../../layout/Spacer/components/Horizontal'
 
 // Sync with ./Modal.module.css#L13-L17
 const FADE_OUT_ANIMATION_TIME = 400
@@ -28,9 +28,21 @@ const handleSecondaryAction = ({ onSecondaryAction }) => () => {
   onSecondaryAction()
 }
 
+const handleArrowsActionLeft = ({ onArrowsActionLeft }) => () => {
+  onArrowsActionLeft()
+}
+
+const handleArrowsActionRight = ({ onArrowsActionRight }) => () => {
+  onArrowsActionRight()
+}
+
 export const Modal = ({
   onClose,
   secondaryAction,
+  viewSecondaryAction,
+  arrowsActionLeft,
+  arrowsActionRight,
+  viewArrowsAction,
   children,
   getStyles,
   type,
@@ -69,17 +81,58 @@ export const Modal = ({
               size={isDesktop ? 'lg' : 'md'}
             />
           )}
-          {secondaryAction && !isEmpty(secondaryAction) && (
-            <Icon
-              color="inverted"
-              name={secondaryAction?.icon}
-              background="muted"
-              onClick={handleSecondaryAction({
-                onSecondaryAction: secondaryAction?.handler,
-              })}
-            />
+          {viewSecondaryAction && secondaryAction && !isEmpty(secondaryAction) && (
+            <>
+              <Icon
+                color={isDesktop && type === 'secondary' ? 'primary' : 'primary'}
+                name={secondaryAction?.icon}
+                background={isDesktop ? 'transparent' : 'muted'}
+                onClick={handleSecondaryAction({
+                  onSecondaryAction: secondaryAction?.handler,
+                })}
+                size={isDesktop ? 'lg' : 'md'}
+              />
+
+              <Horizontal size="xs" />
+
+            </>
+
+          )}
+
+
+
+          {viewArrowsAction && arrowsActionLeft && arrowsActionRight && !isEmpty(arrowsActionLeft) && !isEmpty(arrowsActionRight) && (
+            <>
+
+              {arrowsActionRight.view ? <Icon
+                color={isDesktop && type === 'secondary' ? 'primary' : 'primary'}
+                name={arrowsActionRight?.icon}
+                background={isDesktop ? 'transparent' : 'muted'}
+                onClick={handleArrowsActionRight({
+                  onArrowsActionRight: arrowsActionRight?.handler,
+                })}
+                size={isDesktop ? 'lg' : 'md'}
+              /> : null}
+
+              {arrowsActionLeft.view ? <Icon
+                color={isDesktop && type === 'secondary' ? 'primary' : 'primary'}
+                name={arrowsActionLeft?.icon}
+                background={isDesktop ? 'transparent' : 'muted'}
+                onClick={handleArrowsActionLeft({
+                  onArrowsActionLeft: arrowsActionLeft?.handler,
+                })}
+                size={isDesktop ? 'lg' : 'md'}
+              /> : null}
+
+              <Horizontal size="xs" />
+
+            </>
+
           )}
 
+
+
+
           {isClickTitle ?
 
             <span style={{ cursor: 'pointer', textDecoration: 'underline', color: 'var(--color-primary)' }} onClick={onClickTitle}>
@@ -127,6 +180,8 @@ Modal.propTypes = {
   isFullWidthSoft: PropTypes.bool,
   titleModal: PropTypes.string,
   isClickTitle: PropTypes.bool,
+  viewSecondaryAction: PropTypes.bool,
+  viewArrowsAction: PropTypes.bool,
 }
 
 Modal.defaultProps = {
@@ -135,7 +190,9 @@ Modal.defaultProps = {
   titleModal: 'Ejemplo titulo',
   isFullWidth: false,
   isFullWidthSoft: false,
-  isClickTitle: false
+  isClickTitle: false,
+  viewSecondaryAction: false,
+  viewArrowsAction: false
 }
 
 export default withStyles(styles)(Modal)

package/atoms/Paragraph/Paragraph.module.css

@@ -42,6 +42,10 @@
   font-size: var(--paragraph-font-size-lg);
 }
 
+.size-xl {
+  font-size: var(--paragraph-font-size-xl);
+}
+
 .weight-normal {
   font-weight: var(--font-weight-normal);
 }
@@ -69,4 +73,4 @@
 
 .is-centered {
   text-align: center;
-}
+}

package/atoms/Paragraph/constants.js

@@ -1,5 +1,5 @@
 export const options = {
   colors: ['base', 'muted', 'inverted', 'primary', 'tertiary'],
-  sizes: ['xs', 'sm', 'md', 'lg'],
+  sizes: ['xs', 'sm', 'md', 'lg', 'xl'],
   weights: ['normal', 'medium', 'semibold'],
 }

package/atoms/Textarea/Textarea.js

@@ -20,6 +20,7 @@ export const Textarea = ({
   viewBoxCopyCode,
   txtBtnCopyCode,
   txtTootipCopyCode,
+  maxlength,
 }) => {
 
 
@@ -103,6 +104,7 @@ export const Textarea = ({
         onChange={onChange}
         value={value}
         disabled={disabled}
+        maxlength={maxlength}
       >
         {children}
       </textarea>
@@ -121,6 +123,7 @@ Textarea.propTypes = {
   viewBoxCopyCode: PropTypes.bool,
   txtBtnCopyCode: PropTypes.string,
   txtTootipCopyCode: PropTypes.string,
+  maxlength: PropTypes.string,
 }
 
 Textarea.defaultProps = {
@@ -131,7 +134,8 @@ Textarea.defaultProps = {
   disabled: false,
   viewBoxCopyCode: false,
   txtBtnCopyCode: 'COPIAR',
-  txtTootipCopyCode: 'yeeeee'
+  txtTootipCopyCode: 'yeeeee',
+  maxlength: '',
 }
 
 export default withStyles(styles)(Textarea)

package/hook/useStateDate.js

@@ -1,23 +1,21 @@
 import { useEffect, useState } from 'react'
-import {
-    addDays,
-  } from "date-fns";
-
-const useStateDate = () => {
-
-    const [state, setState] = useState([
-        {
-          startDate: addDays(new Date(), -59),
-          endDate: new Date(),
-          key: 'selection',
-        }
-      ]);
-
-
-      useEffect(() => {
-
-      }, [state]);
-
+import { addDays, startOfMonth, endOfDay } from 'date-fns'
+
+const useStateDate = (rangeDefault) => {
+  const [state, setState] = useState([
+    {
+      startDate:
+        rangeDefault === 'quarter'
+          ? addDays(new Date(), -79)
+          : startOfMonth(new Date()),
+      endDate: endOfDay(new Date()),
+      key: 'selection',
+    },
+  ])
+
+  // startDate: startOfMonth(new Date()),
+  // endDate: endOfDay(new Date())
+  useEffect(() => { }, [state])
 
   return { state, setState }
 }

package/layout/DynamicTable/DynamicTable.js

@@ -35,16 +35,20 @@ export const DynamicTable = ({
   isViewLeftBtn,
   isViewLeftBtnSecondary,
   isViewLeftBtnTertiary,
+  isViewLeftBtnExtra,
   isViewDownloadDoc,
   typeBtn,
   typeBtnSecondary,
   typeBtnTertiary,
+  typeBtnExtra,
   titleBtn,
   titleBtnSecondary,
   titleBtnTertiary,
+  titleBtnExtra,
   handleBtn,
   handleBtnSecondary,
   handleBtnTertiary,
+  handleBtnExtra,
   handleAddColumn,
   handleFilterTable,
   handleFilterSecondaryTable,
@@ -72,6 +76,7 @@ export const DynamicTable = ({
   titleHeadingTableSecundary,
   handleChangeCheckboxDate,
   isMultiSelectFilter,
+  dateRangeDefault,
 }) => {
 
   const [tableData, setTableData] = useState(optionsData)
@@ -214,8 +219,6 @@ export const DynamicTable = ({
 
           <>
 
-            <Horizontal size="sm" />
-
             <div className={getStyles('opFunctionBox3')}>
 
               <Button
@@ -227,9 +230,35 @@ export const DynamicTable = ({
               </Button>
 
             </div>
+
+            <Horizontal size="sm" />
+
+          </>
+        ) : null}
+
+
+        {isViewLeftBtnExtra ? (
+
+          <>
+
+            <div className={getStyles('opFunctionBox3')}>
+
+              <Button
+                type={typeBtnExtra}
+                isInline={true}
+                onClick={handleBtnExtra}
+              >
+                {titleBtnExtra}
+              </Button>
+
+            </div>
+
+            <Horizontal size="sm" />
+
           </>
         ) : null}
 
+
         {isViewRange ? (
           <div className={getStyles('opFunctionBox1')}>
             <DatePicker
@@ -237,6 +266,7 @@ export const DynamicTable = ({
               onChangeRange={handleSelectRange}
               sinceDateRange={labelSinceDateRange}
               tillDateRange={labelTillDateRange}
+              rangeDefault={dateRangeDefault}
             />
           </div>
         ) : null}
@@ -469,16 +499,21 @@ DynamicTable.propTypes = {
   handleBtn: PropTypes.func,
   isViewLeftBtnSecondary: PropTypes.bool,
   isViewLeftBtnTertiary: PropTypes.bool,
+  isViewLeftBtnExtra: PropTypes.bool,
   typeBtnSecondary: PropTypes.string,
   typeBtnTertiary: PropTypes.string,
+  typeBtnExtra: PropTypes.string,
   titleBtnSecondary: PropTypes.string,
   titleBtnTertiary: PropTypes.string,
+  titleBtnExtra: PropTypes.string,
   handleBtnSecondary: PropTypes.func,
   handleBtnTertiary: PropTypes.func,
+  handleBtnExtra: PropTypes.func,
   txtTootipFileDownload: PropTypes.string,
   titleHeadingTable: PropTypes.string,
   titleHeadingTableSecundary: PropTypes.string,
   isMultiSelectFilter: PropTypes.bool,
+  dateRangeDefault: PropTypes.string,
 }
 
 DynamicTable.defaultProps = {
@@ -515,16 +550,21 @@ DynamicTable.defaultProps = {
   handleBtn: () => { },
   isViewLeftBtnSecondary: false,
   isViewLeftBtnTertiary: false,
+  isViewLeftBtnExtra: false,
   typeBtnSecondary: 'primary',
   typeBtnTertiary: 'primary',
+  typeBtnExtra: 'primary',
   titleBtnSecondary: '',
   titleBtnTertiary: '',
+  titleBtnExtra: '',
   handleBtnSecondary: () => { },
   handleBtnTertiary: () => { },
+  handleBtnExtra: () => { },
   txtTootipFileDownload: '',
   titleHeadingTable: 'Total: 200',
   titleHeadingTableSecundary: '',
   isMultiSelectFilter: false,
+  dateRangeDefault: 'quarter',
 }
 
 export default withStyles(styles)(DynamicTable)

package/molecules/DatePicker/DatePicker.js

@@ -33,12 +33,12 @@ import {
 
 
 
-export const DatePicker = ({ getStyles, isLayoutDate, onChangeRange, sinceDateRange, tillDateRange, disabledInputRange }) => {
+export const DatePicker = ({ getStyles, isLayoutDate, onChangeRange, sinceDateRange, tillDateRange, disabledInputRange, rangeDefault }) => {
 
-  const [isShowCalendar, setShowCalendar] = useState(false);
+  const [isShowCalendar, setShowCalendar] = useState(false)
 
 
-  const { state, setState } = useStateDate();
+  const { state, setState } = useStateDate(rangeDefault)
 
 
   // const [state, setState] = useState([
@@ -234,6 +234,7 @@ DatePicker.propTypes = {
   sinceDateRange: PropTypes.string,
   tillDateRange: PropTypes.string,
   disabledInputRange: PropTypes.bool,
+  rangeDefault: PropTypes.string,
 }
 
 DatePicker.defaultProps = {
@@ -242,7 +243,8 @@ DatePicker.defaultProps = {
   onChangeRange: () => { },
   sinceDateRange: 'Desde',
   tillDateRange: 'Hasta',
-  disabledInputRange: false
+  disabledInputRange: false,
+  rangeDefault: 'quarter'
 }
 
 export default withStyles(styles)(DatePicker)

package/molecules/RowTable/RowTable.js

@@ -33,6 +33,7 @@ export const RowTable = ({
   onClickActionClone,
   onClickActionCheckbox,
   txtTootipIconUserView,
+  onClickActionPlusCircle,
   txtTootipIconFileDownload,
   txtTootipIconListInvoice,
   txtTootipIconListListXLS,
@@ -44,7 +45,8 @@ export const RowTable = ({
   txtTootipIconLink,
   txtTootipIconClone,
   txtTootipIconCheckbox,
-  onClickCheckboxRow
+  onClickCheckboxRow,
+  txtTootipIconPlusCircle
 }) => {
 
 
@@ -761,23 +763,24 @@ export const RowTable = ({
 
                                   : null}
 
-                                {itemTd.viewUserView ?
 
-                                  item.viewUserView === undefined ?
+                                {itemTd.viewFileDownload ?
+
+                                  item.viewFileDownload === undefined ?
 
                                     <>
                                       <span
                                         data-tip
-                                        data-for='userView'
+                                        data-for='fileDownload'
                                         onMouseEnter={handleMouseEnter}
                                         onMouseLeave={handleMouseLeave}
                                       >
                                         <>
                                           <Icon
-                                            id="userView"
+                                            id="fileDownload"
                                             background="base"
-                                            name="userView"
-                                            onClick={(e) => { onClickActionUserView(e, item) }}
+                                            name="fileDownload"
+                                            onClick={(e) => { onClickActionFileDownload(e, item) }}
                                           />
                                           <Horizontal size="xs" />
                                         </>
@@ -785,29 +788,29 @@ export const RowTable = ({
                                       </span>
 
                                       {isToolTipMounted ? (
-                                        <ReactTooltip id='userView' type='error'>
-                                          <span>{txtTootipIconUserView}</span>
+                                        <ReactTooltip id='fileDownload' type='error'>
+                                          <span>{txtTootipIconFileDownload}</span>
                                         </ReactTooltip>
                                       ) : null}
                                     </>
 
                                     :
 
-                                    item.viewUserView ?
+                                    item.viewFileDownload ?
 
                                       <>
                                         <span
                                           data-tip
-                                          data-for='userView'
+                                          data-for='fileDownload'
                                           onMouseEnter={handleMouseEnter}
                                           onMouseLeave={handleMouseLeave}
                                         >
                                           <>
                                             <Icon
-                                              id="userView"
+                                              id="fileDownload"
                                               background="base"
-                                              name="userView"
-                                              onClick={(e) => { onClickActionUserView(e, item) }}
+                                              name="fileDownload"
+                                              onClick={(e) => { onClickActionFileDownload(e, item) }}
                                             />
                                             <Horizontal size="xs" />
                                           </>
@@ -815,8 +818,8 @@ export const RowTable = ({
                                         </span>
 
                                         {isToolTipMounted ? (
-                                          <ReactTooltip id='userView' type='error'>
-                                            <span>{txtTootipIconUserView}</span>
+                                          <ReactTooltip id='fileDownload' type='error'>
+                                            <span>{txtTootipIconFileDownload}</span>
                                           </ReactTooltip>
                                         ) : null}
                                       </>
@@ -826,23 +829,92 @@ export const RowTable = ({
                                   : null}
 
 
-                                {itemTd.viewFileDownload ?
 
-                                  item.viewFileDownload === undefined ?
+
+                                {itemTd.viewCheckbox ?
+
+                                  item.viewCheckbox === undefined ?
 
                                     <>
                                       <span
                                         data-tip
-                                        data-for='fileDownload'
+                                        data-for='checkbox'
+                                        onMouseEnter={handleMouseEnter}
+                                        onMouseLeave={handleMouseLeave}
+                                      >
+                                        <>
+
+                                          <Toggle
+                                            id={'idToggle' + item.id}
+                                            checked={item.isSelected}
+                                            label=""
+                                            onChangeCheckbox={(e) => { onClickActionCheckbox(e, item) }}
+                                          />
+
+                                          {/* <Horizontal size="xs" /> */}
+                                        </>
+
+                                      </span>
+
+                                      {isToolTipMounted ? (
+                                        <ReactTooltip id='checkbox' type='error'>
+                                          <span>{txtTootipIconCheckbox}</span>
+                                        </ReactTooltip>
+                                      ) : null}
+                                    </>
+
+                                    :
+
+                                    item.viewCheckbox ?
+
+                                      <>
+                                        <span
+                                          data-tip
+                                          data-for='checkbox'
+                                          onMouseEnter={handleMouseEnter}
+                                          onMouseLeave={handleMouseLeave}
+                                        >
+                                          <>
+                                            <Toggle
+                                              id={'idToggle' + item.id}
+                                              checked={item.isSelected}
+                                              label=""
+                                              onChangeCheckbox={(e) => { onClickActionCheckbox(e, item) }}
+                                            />
+
+                                            {/* <Horizontal size="xs" /> */}
+                                          </>
+
+                                        </span>
+
+                                        {isToolTipMounted ? (
+                                          <ReactTooltip id='checkbox' type='error'>
+                                            <span>{txtTootipIconCheckbox}</span>
+                                          </ReactTooltip>
+                                        ) : null}
+                                      </>
+
+                                      : null
+
+                                  : null}
+
+                                {itemTd.viewUserView ?
+
+                                  item.viewUserView === undefined ?
+
+                                    <>
+                                      <span
+                                        data-tip
+                                        data-for='userView'
                                         onMouseEnter={handleMouseEnter}
                                         onMouseLeave={handleMouseLeave}
                                       >
                                         <>
                                           <Icon
-                                            id="fileDownload"
+                                            id="userView"
                                             background="base"
-                                            name="fileDownload"
-                                            onClick={(e) => { onClickActionFileDownload(e, item) }}
+                                            name="userView"
+                                            onClick={(e) => { onClickActionUserView(e, item) }}
                                           />
                                           <Horizontal size="xs" />
                                         </>
@@ -850,29 +922,29 @@ export const RowTable = ({
                                       </span>
 
                                       {isToolTipMounted ? (
-                                        <ReactTooltip id='fileDownload' type='error'>
-                                          <span>{txtTootipIconFileDownload}</span>
+                                        <ReactTooltip id='userView' type='error'>
+                                          <span>{txtTootipIconUserView}</span>
                                         </ReactTooltip>
                                       ) : null}
                                     </>
 
                                     :
 
-                                    item.viewFileDownload ?
+                                    item.viewUserView ?
 
                                       <>
                                         <span
                                           data-tip
-                                          data-for='fileDownload'
+                                          data-for='userView'
                                           onMouseEnter={handleMouseEnter}
                                           onMouseLeave={handleMouseLeave}
                                         >
                                           <>
                                             <Icon
-                                              id="fileDownload"
+                                              id="userView"
                                               background="base"
-                                              name="fileDownload"
-                                              onClick={(e) => { onClickActionFileDownload(e, item) }}
+                                              name="userView"
+                                              onClick={(e) => { onClickActionUserView(e, item) }}
                                             />
                                             <Horizontal size="xs" />
                                           </>
@@ -880,8 +952,8 @@ export const RowTable = ({
                                         </span>
 
                                         {isToolTipMounted ? (
-                                          <ReactTooltip id='fileDownload' type='error'>
-                                            <span>{txtTootipIconFileDownload}</span>
+                                          <ReactTooltip id='userView' type='error'>
+                                            <span>{txtTootipIconUserView}</span>
                                           </ReactTooltip>
                                         ) : null}
                                       </>
@@ -891,67 +963,62 @@ export const RowTable = ({
                                   : null}
 
 
+                                {itemTd.viewPlusCircle ?
 
-
-                                {itemTd.viewCheckbox ?
-
-                                  item.viewCheckbox === undefined ?
+                                  item.viewPlusCircle === undefined ?
 
                                     <>
                                       <span
                                         data-tip
-                                        data-for='checkbox'
+                                        data-for='plusCircle'
                                         onMouseEnter={handleMouseEnter}
                                         onMouseLeave={handleMouseLeave}
                                       >
                                         <>
-
-                                          <Toggle
-                                            id={'idToggle' + item.id}
-                                            checked={item.isSelected}
-                                            label=""
-                                            onChangeCheckbox={(e) => { onClickActionCheckbox(e, item) }}
+                                          <Icon
+                                            id="plusCircle"
+                                            background="base"
+                                            name="plusCircle"
+                                            onClick={(e) => { onClickActionPlusCircle(e, item) }}
                                           />
-
-                                          {/* <Horizontal size="xs" /> */}
+                                          <Horizontal size="xs" />
                                         </>
 
                                       </span>
 
                                       {isToolTipMounted ? (
-                                        <ReactTooltip id='checkbox' type='error'>
-                                          <span>{txtTootipIconCheckbox}</span>
+                                        <ReactTooltip id='plusCircle' type='error'>
+                                          <span>{txtTootipIconPlusCircle}</span>
                                         </ReactTooltip>
                                       ) : null}
                                     </>
 
                                     :
 
-                                    item.viewCheckbox ?
+                                    item.viewPlusCircle ?
 
                                       <>
                                         <span
                                           data-tip
-                                          data-for='checkbox'
+                                          data-for='plusCircle'
                                           onMouseEnter={handleMouseEnter}
                                           onMouseLeave={handleMouseLeave}
                                         >
                                           <>
-                                            <Toggle
-                                              id={'idToggle' + item.id}
-                                              checked={item.isSelected}
-                                              label=""
-                                              onChangeCheckbox={(e) => { onClickActionCheckbox(e, item) }}
+                                            <Icon
+                                              id="plusCircle"
+                                              background="base"
+                                              name="plusCircle"
+                                              onClick={(e) => { onClickActionPlusCircle(e, item) }}
                                             />
-
-                                            {/* <Horizontal size="xs" /> */}
+                                            <Horizontal size="xs" />
                                           </>
 
                                         </span>
 
                                         {isToolTipMounted ? (
-                                          <ReactTooltip id='checkbox' type='error'>
-                                            <span>{txtTootipIconCheckbox}</span>
+                                          <ReactTooltip id='plusCircle' type='error'>
+                                            <span>{txtTootipIconPlusCircle}</span>
                                           </ReactTooltip>
                                         ) : null}
                                       </>
@@ -961,6 +1028,7 @@ export const RowTable = ({
                                   : null}
 
 
+
                                 {itemTd.viewTrash ?
 
                                   item.viewTrash === undefined ?
@@ -1103,7 +1171,7 @@ export const RowTable = ({
                                           ?
                                           <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{(item[itemTd.accessor] / 1000).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
                                           :
-                                          <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor].toFixed(2).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
+                                          <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor]?.toFixed(2)?.toString()?.replace(/\./g, ',')} { item[itemTd.accessor] ? itemTd.characterExtra : ''}</td>
                                         :
                                         <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor]}</td>
 
@@ -1172,6 +1240,7 @@ RowTable.propTypes = {
   onClickActionLink: PropTypes.func,
   onClickActionClone: PropTypes.func,
   onClickActionCheckbox: PropTypes.func,
+  onClickActionPlusCircle: PropTypes.func,
   txtTootipIconUserView: PropTypes.string,
   txtTootipIconListInvoice: PropTypes.string,
   txtTootipIconListListXLS: PropTypes.string,
@@ -1183,6 +1252,7 @@ RowTable.propTypes = {
   txtTootipIconLink: PropTypes.string,
   txtTootipIconClone: PropTypes.string,
   txtTootipIconCheckbox: PropTypes.string,
+  txtTootipIconPlusCircle: PropTypes.string,
   colorRow: PropTypes.string,
   isCheckedCheckbox: PropTypes.bool
 }
@@ -1203,6 +1273,7 @@ RowTable.defaultProps = {
   onClickActionLink: () => { },
   onClickActionClone: () => { },
   onClickActionCheckbox: () => { },
+  onClickActionPlusCircle: () => { },
   txtTootipIconUserView: '',
   txtTootipIconListInvoice: '',
   txtTootipIconListListXLS: '',
@@ -1214,7 +1285,7 @@ RowTable.defaultProps = {
   txtTootipIconLink: '',
   txtTootipIconClone: '',
   txtTootipIconCheckbox: '',
-
+  txtTootipIconPlusCircle: '',
   isCheckedCheckbox: false
 
 }

package/molecules/RowTable/RowTable.module.css

@@ -44,6 +44,7 @@
   text-align: right;
   inline-size: max-content;
   display: inline-flex;
+  float: inline-end;
   /* width: max-content;
   inline-size: max-content;
   height: max-content;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "imbric-theme",
-  "version": "1.0.9",
+  "version": "1.1.1",
   "description": "Components library IMBRIC",
   "private": false,
   "main": "index.js",
@@ -51,6 +51,7 @@
   "license": "MIT",
   "dependencies": {
     "classnames": "2.3.1",
+    "country-flag-emoji-polyfill": "0.1.8",
     "formik": "2.2.9",
     "moment": "2.29.3",
     "moment-timezone": "0.5.34",

package/styles/GrupoMutua.css

@@ -370,6 +370,7 @@
     --paragraph-font-size-sm: 1.2rem;
     --paragraph-font-size-md: 1.4rem;
     --paragraph-font-size-lg: 1.6rem;
+    --paragraph-font-size-xl: 2rem;
 
     --textarea-border-radius: 10px;
 

package/styles/default.css

@@ -370,6 +370,7 @@
     --paragraph-font-size-sm: 1.2rem;
     --paragraph-font-size-md: 1.4rem;
     --paragraph-font-size-lg: 1.6rem;
+    --paragraph-font-size-xl: 2rem;
 
     --textarea-border-radius: 10px;
 

package/styles/globals.css

@@ -1,7 +1,7 @@
 html,
 body {
   height: 100%;
-  font-family: var(--font-family-sans);
+  font-family: "Twemoji Country Flags", var(--font-family-sans);
   font-size: var(--font-size-base);
 }
 

package/styles/radiotaxiaragon.css

@@ -370,6 +370,7 @@
     --paragraph-font-size-sm: 1.2rem;
     --paragraph-font-size-md: 1.4rem;
     --paragraph-font-size-lg: 1.6rem;
+    --paragraph-font-size-xl: 2rem;
 
     --textarea-border-radius: 10px;
 

package/styles/spartan.css

@@ -370,6 +370,7 @@
     --paragraph-font-size-sm: 1.2rem;
     --paragraph-font-size-md: 1.4rem;
     --paragraph-font-size-lg: 1.6rem;
+    --paragraph-font-size-xl: 2rem;
 
     --textarea-border-radius: 10px;
 

package/styles/tagos.css

@@ -370,6 +370,8 @@
     --paragraph-font-size-sm: 1.2rem;
     --paragraph-font-size-md: 1.4rem;
     --paragraph-font-size-lg: 1.6rem;
+    --paragraph-font-size-xl: 2rem;
+    --paragraph-font-size-xl: 2rem;
 
     --textarea-border-radius: 10px;
 

package/styles/taxisvalencia.css

@@ -370,6 +370,7 @@
     --paragraph-font-size-sm: 1.2rem;
     --paragraph-font-size-md: 1.4rem;
     --paragraph-font-size-lg: 1.6rem;
+    --paragraph-font-size-xl: 2rem;
 
     --textarea-border-radius: 10px;
 

package/atoms/Icon/save-file-svgrepo-com.svg

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 25.4.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
-<path d="M21.7,23.8H0.2V2.3c0-1.1,0.9-2,2-2h17.2l4.3,3.7v17.8C23.8,22.8,22.8,23.8,21.7,23.8z M1.8,22.3h20c0.3,0,0.5-0.2,0.5-0.5
-	V4.6l-3.3-2.9H2.3C2,1.7,1.8,2,1.8,2.3V22.3z"/>
-<path d="M18.1,9.7H5.9V0.2h12.3V9.7z M7.4,8.2h9.3V1.7H7.4V8.2z"/>
-<path d="M20,23.8H4V13.5h16V23.8z M5.5,22.3h13V15h-13V22.3z"/>
-</svg>