@codecademy/gamut-icons 8.0.2-alpha.daf06c.0 → 8.0.2-alpha.fa9cd1.0

package/dist/icons/mini/MiniAddIcon.js

@@ -24,7 +24,6 @@ export var MiniAddIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 12 12",
-    fill: "currentColor",
     role: "img",
     "aria-hidden": "true",
     width: width,
@@ -32,14 +31,23 @@ export var MiniAddIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
-      id: titleId,
-      children: 'mini-add-icon'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      d: "M0 6a.75.75 0 00.75.75h4.375a.125.125 0 01.125.125v4.375a.75.75 0 001.5 0V6.875a.125.125 0 01.125-.125h4.375a.75.75 0 000-1.5H6.875a.125.125 0 01-.125-.125V.75a.75.75 0 00-1.5 0v4.375a.125.125 0 01-.125.125H.75A.75.75 0 000 6z"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: 'mini-add-icon',
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'mini-add-icon'
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M0 6a.75.75 0 00.75.75h4.375a.125.125 0 01.125.125v4.375a.75.75 0 001.5 0V6.875a.125.125 0 01.125-.125h4.375a.75.75 0 000-1.5H6.875a.125.125 0 01-.125-.125V.75a.75.75 0 00-1.5 0v4.375a.125.125 0 01-.125.125H.75A.75.75 0 000 6z"
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: 'url(#mini-add-icon)',
+      children: /*#__PURE__*/_jsx("rect", {
+        width: '24',
+        height: '24',
+        fill: 'red'
+      })
     })]
   }));
 });

package/dist/icons/mini/MiniArrowDownIcon.js

@@ -24,7 +24,6 @@ export var MiniArrowDownIcon = /*#__PURE__*/React.forwardRef(function (_ref, svg
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 140 140",
-    fill: "currentColor",
     role: "img",
     "aria-hidden": "true",
     width: width,
@@ -32,14 +31,23 @@ export var MiniArrowDownIcon = /*#__PURE__*/React.forwardRef(function (_ref, svg
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
-      id: titleId,
-      children: 'Mini Bold Interface Arrows Down'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      d: "M27.93 102.07l35 35a10 10 0 0014.14 0l35-35a10 10 0 00-14.14-14.14l-13.66 13.66A2.5 2.5 0 0180 99.82V10a10 10 0 00-20 0v89.82a2.5 2.5 0 01-4.27 1.77L42.07 87.93a10 10 0 00-14.14 14.14z"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: 'mini-bold-interface-arrows-down',
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'Mini Bold Interface Arrows Down'
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M27.93 102.07l35 35a10 10 0 0014.14 0l35-35a10 10 0 00-14.14-14.14l-13.66 13.66A2.5 2.5 0 0180 99.82V10a10 10 0 00-20 0v89.82a2.5 2.5 0 01-4.27 1.77L42.07 87.93a10 10 0 00-14.14 14.14z"
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: 'url(#mini-bold-interface-arrows-down)',
+      children: /*#__PURE__*/_jsx("rect", {
+        width: '24',
+        height: '24',
+        fill: 'red'
+      })
     })]
   }));
 });

package/dist/icons/mini/MiniArrowLeftIcon.js

@@ -24,7 +24,6 @@ export var MiniArrowLeftIcon = /*#__PURE__*/React.forwardRef(function (_ref, svg
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     viewBox: "0 0 16 16",
     xmlns: "http://www.w3.org/2000/svg",
-    fill: "currentColor",
     role: "img",
     "aria-hidden": "true",
     width: width,
@@ -32,14 +31,23 @@ export var MiniArrowLeftIcon = /*#__PURE__*/React.forwardRef(function (_ref, svg
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
-      id: titleId,
-      children: 'mini-bold-interface-arrow-left'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      d: "M14.8 6.8H4.098l1.95-1.952a1.2 1.2 0 00-1.696-1.696l-4 4a1.198 1.198 0 000 1.696l4 4a1.2 1.2 0 101.696-1.696L4.098 9.2H14.8a1.2 1.2 0 000-2.4z"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: 'mini-bold-interface-arrow-left',
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'mini-bold-interface-arrow-left'
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M14.8 6.8H4.098l1.95-1.952a1.2 1.2 0 00-1.696-1.696l-4 4a1.198 1.198 0 000 1.696l4 4a1.2 1.2 0 101.696-1.696L4.098 9.2H14.8a1.2 1.2 0 000-2.4z"
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: 'url(#mini-bold-interface-arrow-left)',
+      children: /*#__PURE__*/_jsx("rect", {
+        width: '24',
+        height: '24',
+        fill: 'red'
+      })
     })]
   }));
 });

package/dist/icons/mini/MiniArrowRightIcon.js

@@ -24,7 +24,6 @@ export var MiniArrowRightIcon = /*#__PURE__*/React.forwardRef(function (_ref, sv
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 16 16",
-    fill: "currentColor",
     role: "img",
     "aria-hidden": "true",
     width: width,
@@ -32,14 +31,23 @@ export var MiniArrowRightIcon = /*#__PURE__*/React.forwardRef(function (_ref, sv
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
-      id: titleId,
-      children: 'mini-arrow-right'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      d: "M11.665 3.192l4 4a1.143 1.143 0 010 1.616l-4 4a1.143 1.143 0 01-1.616-1.616l1.561-1.561a.286.286 0 00-.202-.488H1.143a1.143 1.143 0 010-2.286h10.265a.286.286 0 00.202-.488l-1.56-1.561a1.143 1.143 0 011.615-1.616z"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: 'mini-arrow-right',
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'mini-arrow-right'
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M11.665 3.192l4 4a1.143 1.143 0 010 1.616l-4 4a1.143 1.143 0 01-1.616-1.616l1.561-1.561a.286.286 0 00-.202-.488H1.143a1.143 1.143 0 010-2.286h10.265a.286.286 0 00.202-.488l-1.56-1.561a1.143 1.143 0 011.615-1.616z"
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: 'url(#mini-arrow-right)',
+      children: /*#__PURE__*/_jsx("rect", {
+        width: '24',
+        height: '24',
+        fill: 'red'
+      })
     })]
   }));
 });

package/dist/icons/mini/MiniArrowUpIcon.js

@@ -24,7 +24,6 @@ export var MiniArrowUpIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRe
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     viewBox: "0 0 16 16",
     xmlns: "http://www.w3.org/2000/svg",
-    fill: "currentColor",
     role: "img",
     "aria-hidden": "true",
     width: width,
@@ -32,14 +31,23 @@ export var MiniArrowUpIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRe
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
-      id: titleId,
-      children: 'mini-bold-interface-arrow-up'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      d: "M12.848 4.352l-4-4a1.198 1.198 0 00-1.696 0l-4 4a1.2 1.2 0 001.696 1.696L6.8 4.098V14.8a1.2 1.2 0 002.4 0V4.098l1.952 1.95a1.2 1.2 0 101.696-1.696z"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: 'mini-bold-interface-arrow-up',
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'mini-bold-interface-arrow-up'
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M12.848 4.352l-4-4a1.198 1.198 0 00-1.696 0l-4 4a1.2 1.2 0 001.696 1.696L6.8 4.098V14.8a1.2 1.2 0 002.4 0V4.098l1.952 1.95a1.2 1.2 0 101.696-1.696z"
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: 'url(#mini-bold-interface-arrow-up)',
+      children: /*#__PURE__*/_jsx("rect", {
+        width: '24',
+        height: '24',
+        fill: 'red'
+      })
     })]
   }));
 });

package/dist/icons/mini/MiniCheckCircleIcon.js

@@ -24,7 +24,6 @@ export var MiniCheckCircleIcon = /*#__PURE__*/React.forwardRef(function (_ref, s
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 140 140",
-    fill: "currentColor",
     role: "img",
     "aria-hidden": "true",
     width: width,
@@ -32,14 +31,23 @@ export var MiniCheckCircleIcon = /*#__PURE__*/React.forwardRef(function (_ref, s
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
-      id: titleId,
-      children: 'interface-validation-check-circle'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      d: "M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm36 59L66.24 98.74a10 10 0 01-14.15 0L34 80.68a10.013 10.013 0 0114.18-14.14l11 11 32.64-32.67A10.01 10.01 0 01106 59z"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: 'interface-validation-check-circle',
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'interface-validation-check-circle'
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm36 59L66.24 98.74a10 10 0 01-14.15 0L34 80.68a10.013 10.013 0 0114.18-14.14l11 11 32.64-32.67A10.01 10.01 0 01106 59z"
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: 'url(#interface-validation-check-circle)',
+      children: /*#__PURE__*/_jsx("rect", {
+        width: '24',
+        height: '24',
+        fill: 'red'
+      })
     })]
   }));
 });

package/dist/icons/mini/MiniChevronDownIcon.js

@@ -24,7 +24,6 @@ export var MiniChevronDownIcon = /*#__PURE__*/React.forwardRef(function (_ref, s
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 140 140",
-    fill: "currentColor",
     role: "img",
     "aria-hidden": "true",
     width: width,
@@ -35,8 +34,18 @@ export var MiniChevronDownIcon = /*#__PURE__*/React.forwardRef(function (_ref, s
     children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      d: "M137.07 34a10 10 0 00-14.14 0L71.77 85.13a2.5 2.5 0 01-3.54 0L17.07 34A10 10 0 002.93 48.11l56.46 56.47a15 15 0 0021.22 0l56.46-56.47a10 10 0 000-14.11z"
+    }) : null, /*#__PURE__*/_jsx("mask", {
+      id: '',
+      children: /*#__PURE__*/_jsx("path", {
+        d: "M137.07 34a10 10 0 00-14.14 0L71.77 85.13a2.5 2.5 0 01-3.54 0L17.07 34A10 10 0 002.93 48.11l56.46 56.47a15 15 0 0021.22 0l56.46-56.47a10 10 0 000-14.11z"
+      })
+    }), /*#__PURE__*/_jsx("g", {
+      mask: 'url(#)',
+      children: /*#__PURE__*/_jsx("rect", {
+        width: '24',
+        height: '24',
+        fill: 'red'
+      })
     })]
   }));
 });

package/dist/icons/mini/MiniChevronLeftIcon.js

@@ -24,7 +24,6 @@ export var MiniChevronLeftIcon = /*#__PURE__*/React.forwardRef(function (_ref, s
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 140 140",
-    fill: "currentColor",
     role: "img",
     "aria-hidden": "true",
     width: width,
@@ -35,8 +34,18 @@ export var MiniChevronLeftIcon = /*#__PURE__*/React.forwardRef(function (_ref, s
     children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      d: "M54.87 71.77a2.5 2.5 0 010-3.54L106 17.07A10 10 0 1091.89 2.93L35.43 59.39a15 15 0 000 21.22l56.46 56.46A10 10 0 10106 122.93z"
+    }) : null, /*#__PURE__*/_jsx("mask", {
+      id: '',
+      children: /*#__PURE__*/_jsx("path", {
+        d: "M54.87 71.77a2.5 2.5 0 010-3.54L106 17.07A10 10 0 1091.89 2.93L35.43 59.39a15 15 0 000 21.22l56.46 56.46A10 10 0 10106 122.93z"
+      })
+    }), /*#__PURE__*/_jsx("g", {
+      mask: 'url(#)',
+      children: /*#__PURE__*/_jsx("rect", {
+        width: '24',
+        height: '24',
+        fill: 'red'
+      })
     })]
   }));
 });

package/dist/icons/mini/MiniChevronRightIcon.js

@@ -24,7 +24,6 @@ export var MiniChevronRightIcon = /*#__PURE__*/React.forwardRef(function (_ref,
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 140 140",
-    fill: "currentColor",
     role: "img",
     "aria-hidden": "true",
     width: width,
@@ -35,8 +34,18 @@ export var MiniChevronRightIcon = /*#__PURE__*/React.forwardRef(function (_ref,
     children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      d: "M34 137.07a10 10 0 010-14.14l51.13-51.16a2.5 2.5 0 000-3.54L34 17.07A10 10 0 0148.11 2.93l56.46 56.46a15 15 0 010 21.22l-56.46 56.46a10 10 0 01-14.11 0z"
+    }) : null, /*#__PURE__*/_jsx("mask", {
+      id: '',
+      children: /*#__PURE__*/_jsx("path", {
+        d: "M34 137.07a10 10 0 010-14.14l51.13-51.16a2.5 2.5 0 000-3.54L34 17.07A10 10 0 0148.11 2.93l56.46 56.46a15 15 0 010 21.22l-56.46 56.46a10 10 0 01-14.11 0z"
+      })
+    }), /*#__PURE__*/_jsx("g", {
+      mask: 'url(#)',
+      children: /*#__PURE__*/_jsx("rect", {
+        width: '24',
+        height: '24',
+        fill: 'red'
+      })
     })]
   }));
 });

package/dist/icons/mini/MiniChevronUpIcon.js

@@ -24,7 +24,6 @@ export var MiniChevronUpIcon = /*#__PURE__*/React.forwardRef(function (_ref, svg
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 140 140",
-    fill: "currentColor",
     role: "img",
     "aria-hidden": "true",
     width: width,
@@ -35,8 +34,18 @@ export var MiniChevronUpIcon = /*#__PURE__*/React.forwardRef(function (_ref, svg
     children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      d: "M122.93 106L71.77 54.87a2.5 2.5 0 00-3.54 0L17.07 106A10 10 0 112.93 91.89l56.46-56.46a15 15 0 0121.22 0l56.46 56.46A10 10 0 11122.93 106z"
+    }) : null, /*#__PURE__*/_jsx("mask", {
+      id: '',
+      children: /*#__PURE__*/_jsx("path", {
+        d: "M122.93 106L71.77 54.87a2.5 2.5 0 00-3.54 0L17.07 106A10 10 0 112.93 91.89l56.46-56.46a15 15 0 0121.22 0l56.46 56.46A10 10 0 11122.93 106z"
+      })
+    }), /*#__PURE__*/_jsx("g", {
+      mask: 'url(#)',
+      children: /*#__PURE__*/_jsx("rect", {
+        width: '24',
+        height: '24',
+        fill: 'red'
+      })
     })]
   }));
 });

package/dist/icons/mini/MiniDeleteIcon.js

@@ -23,7 +23,7 @@ export var MiniDeleteIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef
     props = _objectWithoutProperties(_ref, ["title", "titleId", "size", "height", "width"]);
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     viewBox: "0 0 16 16",
-    fill: "currentColor",
+    fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     role: "img",
     "aria-hidden": "true",
@@ -32,15 +32,24 @@ export var MiniDeleteIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
-      id: titleId,
-      children: 'customized interface-delete'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      d: "M9.457 8.175a.23.23 0 010-.327l4.261-4.261a.923.923 0 10-1.305-1.305l-4.261 4.26a.23.23 0 01-.327 0l-4.26-4.26a.923.923 0 00-1.306 1.305L6.52 7.848a.23.23 0 010 .327l-4.26 4.26a.923.923 0 001.304 1.306L7.825 9.48a.23.23 0 01.327 0l4.261 4.26a.923.923 0 001.305-1.304l-4.26-4.261z",
-      fill: "currentColor"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: 'customized-interface-delete',
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'customized interface-delete'
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M9.457 8.175a.23.23 0 010-.327l4.261-4.261a.923.923 0 10-1.305-1.305l-4.261 4.26a.23.23 0 01-.327 0l-4.26-4.26a.923.923 0 00-1.306 1.305L6.52 7.848a.23.23 0 010 .327l-4.26 4.26a.923.923 0 001.304 1.306L7.825 9.48a.23.23 0 01.327 0l4.261 4.26a.923.923 0 001.305-1.304l-4.26-4.261z",
+        fill: "#fff"
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: 'url(#customized-interface-delete)',
+      children: /*#__PURE__*/_jsx("rect", {
+        width: '24',
+        height: '24',
+        fill: 'red'
+      })
     })]
   }));
 });

package/dist/icons/mini/MiniInfoCircleIcon.js

@@ -24,7 +24,6 @@ export var MiniInfoCircleIcon = /*#__PURE__*/React.forwardRef(function (_ref, sv
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 140 140",
-    fill: "currentColor",
     role: "img",
     "aria-hidden": "true",
     width: width,
@@ -32,14 +31,23 @@ export var MiniInfoCircleIcon = /*#__PURE__*/React.forwardRef(function (_ref, sv
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
-      id: titleId,
-      children: 'interface-alert-information-circle'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      d: "M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm7.5 105a7.5 7.5 0 01-15 0V70a7.5 7.5 0 0115 0zM70 50a10 10 0 1110-10 10 10 0 01-10 10z"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: 'interface-alert-information-circle',
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'interface-alert-information-circle'
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm7.5 105a7.5 7.5 0 01-15 0V70a7.5 7.5 0 0115 0zM70 50a10 10 0 1110-10 10 10 0 01-10 10z"
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: 'url(#interface-alert-information-circle)',
+      children: /*#__PURE__*/_jsx("rect", {
+        width: '24',
+        height: '24',
+        fill: 'red'
+      })
     })]
   }));
 });

package/dist/icons/mini/MiniInfoOutlineIcon.js

@@ -24,7 +24,6 @@ export var MiniInfoOutlineIcon = /*#__PURE__*/React.forwardRef(function (_ref, s
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 140 140",
-    fill: "currentColor",
     role: "img",
     "aria-hidden": "true",
     width: width,
@@ -35,17 +34,27 @@ export var MiniInfoOutlineIcon = /*#__PURE__*/React.forwardRef(function (_ref, s
     children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsxs("g", {
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 10,
-      children: [/*#__PURE__*/_jsx("path", {
-        d: "M5 70a65 65 0 10130 0A65 65 0 105 70zm65 0v35"
-      }), /*#__PURE__*/_jsx("path", {
-        d: "M65 45a5 5 0 1010 0 5 5 0 10-10 0z"
-      })]
+    }) : null, /*#__PURE__*/_jsx("mask", {
+      id: '',
+      children: /*#__PURE__*/_jsxs("g", {
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 10,
+        children: [/*#__PURE__*/_jsx("path", {
+          d: "M5 70a65 65 0 10130 0A65 65 0 105 70zm65 0v35"
+        }), /*#__PURE__*/_jsx("path", {
+          d: "M65 45a5 5 0 1010 0 5 5 0 10-10 0z"
+        })]
+      })
+    }), /*#__PURE__*/_jsx("g", {
+      mask: 'url(#)',
+      children: /*#__PURE__*/_jsx("rect", {
+        width: '24',
+        height: '24',
+        fill: 'red'
+      })
     })]
   }));
 });

package/dist/icons/mini/MiniKebabMenuIcon.js

@@ -23,7 +23,7 @@ export var MiniKebabMenuIcon = /*#__PURE__*/React.forwardRef(function (_ref, svg
     props = _objectWithoutProperties(_ref, ["title", "titleId", "size", "height", "width"]);
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     viewBox: "0 0 16 16",
-    fill: "currentColor",
+    fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     role: "img",
     "aria-hidden": "true",
@@ -32,17 +32,26 @@ export var MiniKebabMenuIcon = /*#__PURE__*/React.forwardRef(function (_ref, svg
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
-      id: titleId,
-      children: 'kebab-menu'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("g", {
-      clipPath: "url(#mini-kebab-menu-icon_svg__mini-kebab-menu-icon_svg__clip0)",
-      fill: "currentColor",
-      children: /*#__PURE__*/_jsx("path", {
-        d: "M5.714 2.286a2.286 2.286 0 104.572 0 2.286 2.286 0 00-4.572 0zm0 5.714a2.286 2.286 0 104.572 0 2.286 2.286 0 00-4.572 0zm0 5.714a2.286 2.286 0 104.571 0 2.286 2.286 0 00-4.57 0z"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: 'kebab-menu',
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'kebab-menu'
+      }), /*#__PURE__*/_jsx("g", {
+        clipPath: "url(#mini-kebab-menu-icon_svg__mini-kebab-menu-icon_svg__clip0)",
+        fill: "#fff",
+        children: /*#__PURE__*/_jsx("path", {
+          d: "M5.714 2.286a2.286 2.286 0 104.572 0 2.286 2.286 0 00-4.572 0zm0 5.714a2.286 2.286 0 104.572 0 2.286 2.286 0 00-4.572 0zm0 5.714a2.286 2.286 0 104.571 0 2.286 2.286 0 00-4.57 0z"
+        })
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: 'url(#kebab-menu)',
+      children: /*#__PURE__*/_jsx("rect", {
+        width: '24',
+        height: '24',
+        fill: 'red'
       })
     })]
   }));

package/dist/icons/mini/MiniRemoveCircleIcon.js

@@ -24,7 +24,6 @@ export var MiniRemoveCircleIcon = /*#__PURE__*/React.forwardRef(function (_ref,
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 140 140",
-    fill: "currentColor",
     role: "img",
     "aria-hidden": "true",
     width: width,
@@ -32,14 +31,23 @@ export var MiniRemoveCircleIcon = /*#__PURE__*/React.forwardRef(function (_ref,
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
-      id: titleId,
-      children: 'interface-remove-circle'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      d: "M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm25 80H45a10 10 0 010-20h50a10 10 0 010 20z"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: 'interface-remove-circle',
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'interface-remove-circle'
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm25 80H45a10 10 0 010-20h50a10 10 0 010 20z"
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: 'url(#interface-remove-circle)',
+      children: /*#__PURE__*/_jsx("rect", {
+        width: '24',
+        height: '24',
+        fill: 'red'
+      })
     })]
   }));
 });

package/dist/icons/mini/MiniRibbonIcon.js

@@ -24,7 +24,6 @@ export var MiniRibbonIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 16 16",
-    fill: "currentColor",
     role: "img",
     "aria-hidden": "true",
     width: width,
@@ -32,19 +31,28 @@ export var MiniRibbonIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
-      id: titleId,
-      children: 'mini-ribbon-icon'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      d: "M12.706 14.58l-4.118-2.662c-.17-.11-.377-.17-.588-.17-.211 0-.417.06-.588.17L3.294 14.58a.553.553 0 01-.52.037.483.483 0 01-.2-.163.409.409 0 01-.074-.232v-12c0-.236.105-.462.293-.629a1.07 1.07 0 01.707-.26h9c.265 0 .52.094.707.26a.842.842 0 01.293.629v12a.41.41 0 01-.074.232.483.483 0 01-.2.163.553.553 0 01-.52-.037v0z",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: 1.5,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: 'mini-ribbon-icon',
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'mini-ribbon-icon'
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M12.706 14.58l-4.118-2.662c-.17-.11-.377-.17-.588-.17-.211 0-.417.06-.588.17L3.294 14.58a.553.553 0 01-.52.037.483.483 0 01-.2-.163.409.409 0 01-.074-.232v-12c0-.236.105-.462.293-.629a1.07 1.07 0 01.707-.26h9c.265 0 .52.094.707.26a.842.842 0 01.293.629v12a.41.41 0 01-.074.232.483.483 0 01-.2.163.553.553 0 01-.52-.037v0z",
+        fill: "none",
+        stroke: "#fff",
+        strokeWidth: 1.5,
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: 'url(#mini-ribbon-icon)',
+      children: /*#__PURE__*/_jsx("rect", {
+        width: '24',
+        height: '24',
+        fill: 'red'
+      })
     })]
   }));
 });

package/dist/icons/mini/MiniStarIcon.js

@@ -24,7 +24,6 @@ export var MiniStarIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef)
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 140 140",
-    fill: "currentColor",
     role: "img",
     "aria-hidden": "true",
     width: width,
@@ -32,14 +31,23 @@ export var MiniStarIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef)
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
-      id: titleId,
-      children: 'interface-favorite-star'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      d: "M139.48 53.16A10.41 10.41 0 00131 46l-35.77-5.4L79.4 8.48a10.87 10.87 0 00-18.8 0L44.39 40.87 9 46a10.49 10.49 0 00-5.83 17.9L29 89.34l-6 35.32a10.48 10.48 0 0015.21 11.05L70.22 119l31.67 16.67a10.48 10.48 0 0015.21-11.05l-5.9-35.75 25.63-25a10.42 10.42 0 002.65-10.71z"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: 'interface-favorite-star',
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'interface-favorite-star'
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M139.48 53.16A10.41 10.41 0 00131 46l-35.77-5.4L79.4 8.48a10.87 10.87 0 00-18.8 0L44.39 40.87 9 46a10.49 10.49 0 00-5.83 17.9L29 89.34l-6 35.32a10.48 10.48 0 0015.21 11.05L70.22 119l31.67 16.67a10.48 10.48 0 0015.21-11.05l-5.9-35.75 25.63-25a10.42 10.42 0 002.65-10.71z"
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: 'url(#interface-favorite-star)',
+      children: /*#__PURE__*/_jsx("rect", {
+        width: '24',
+        height: '24',
+        fill: 'red'
+      })
     })]
   }));
 });