@codecademy/gamut-icons 8.1.1 → 8.1.2-alpha.82f224.0

package/dist/icons/mini/MiniAddIcon.js

@@ -8,6 +8,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import * as React from 'react';
 import { Svg } from '../../props';
+import { useIconId } from '../../useIconId';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var MiniAddIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
@@ -21,25 +22,36 @@ export var MiniAddIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? size : _ref$width,
     props = _objectWithoutProperties(_ref, ["title", "titleId", "size", "height", "width"]);
+  var maskId = useIconId('MiniAddIcon');
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 12 12",
-    fill: "currentColor",
+    fill: "#fff",
     role: "img",
     "aria-hidden": "true",
+    "pointer-events": "none",
     width: width,
     height: height,
     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-".concat(maskId),
+      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-".concat(maskId, ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/mini/MiniArrowDownIcon.js

@@ -8,6 +8,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import * as React from 'react';
 import { Svg } from '../../props';
+import { useIconId } from '../../useIconId';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var MiniArrowDownIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
@@ -21,25 +22,36 @@ export var MiniArrowDownIcon = /*#__PURE__*/React.forwardRef(function (_ref, svg
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? size : _ref$width,
     props = _objectWithoutProperties(_ref, ["title", "titleId", "size", "height", "width"]);
+  var maskId = useIconId('MiniArrowDownIcon');
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 140 140",
-    fill: "currentColor",
+    fill: "#fff",
     role: "img",
     "aria-hidden": "true",
+    "pointer-events": "none",
     width: width,
     height: height,
     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-".concat(maskId),
+      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-".concat(maskId, ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/mini/MiniArrowLeftIcon.js

@@ -8,6 +8,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import * as React from 'react';
 import { Svg } from '../../props';
+import { useIconId } from '../../useIconId';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var MiniArrowLeftIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
@@ -21,25 +22,36 @@ export var MiniArrowLeftIcon = /*#__PURE__*/React.forwardRef(function (_ref, svg
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? size : _ref$width,
     props = _objectWithoutProperties(_ref, ["title", "titleId", "size", "height", "width"]);
+  var maskId = useIconId('MiniArrowLeftIcon');
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     viewBox: "0 0 16 16",
     xmlns: "http://www.w3.org/2000/svg",
-    fill: "currentColor",
+    fill: "#fff",
     role: "img",
     "aria-hidden": "true",
+    "pointer-events": "none",
     width: width,
     height: height,
     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-".concat(maskId),
+      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-".concat(maskId, ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/mini/MiniArrowRightIcon.js

@@ -8,6 +8,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import * as React from 'react';
 import { Svg } from '../../props';
+import { useIconId } from '../../useIconId';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var MiniArrowRightIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
@@ -21,25 +22,36 @@ export var MiniArrowRightIcon = /*#__PURE__*/React.forwardRef(function (_ref, sv
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? size : _ref$width,
     props = _objectWithoutProperties(_ref, ["title", "titleId", "size", "height", "width"]);
+  var maskId = useIconId('MiniArrowRightIcon');
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 16 16",
-    fill: "currentColor",
+    fill: "#fff",
     role: "img",
     "aria-hidden": "true",
+    "pointer-events": "none",
     width: width,
     height: height,
     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-".concat(maskId),
+      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-".concat(maskId, ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/mini/MiniArrowUpIcon.js

@@ -8,6 +8,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import * as React from 'react';
 import { Svg } from '../../props';
+import { useIconId } from '../../useIconId';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var MiniArrowUpIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
@@ -21,25 +22,36 @@ export var MiniArrowUpIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRe
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? size : _ref$width,
     props = _objectWithoutProperties(_ref, ["title", "titleId", "size", "height", "width"]);
+  var maskId = useIconId('MiniArrowUpIcon');
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     viewBox: "0 0 16 16",
     xmlns: "http://www.w3.org/2000/svg",
-    fill: "currentColor",
+    fill: "#fff",
     role: "img",
     "aria-hidden": "true",
+    "pointer-events": "none",
     width: width,
     height: height,
     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-".concat(maskId),
+      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-".concat(maskId, ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/mini/MiniCheckCircleIcon.js

@@ -8,6 +8,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import * as React from 'react';
 import { Svg } from '../../props';
+import { useIconId } from '../../useIconId';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var MiniCheckCircleIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
@@ -21,25 +22,36 @@ export var MiniCheckCircleIcon = /*#__PURE__*/React.forwardRef(function (_ref, s
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? size : _ref$width,
     props = _objectWithoutProperties(_ref, ["title", "titleId", "size", "height", "width"]);
+  var maskId = useIconId('MiniCheckCircleIcon');
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 140 140",
-    fill: "currentColor",
+    fill: "#fff",
     role: "img",
     "aria-hidden": "true",
+    "pointer-events": "none",
     width: width,
     height: height,
     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-".concat(maskId),
+      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-".concat(maskId, ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/mini/MiniChevronDownIcon.js

@@ -8,6 +8,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import * as React from 'react';
 import { Svg } from '../../props';
+import { useIconId } from '../../useIconId';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var MiniChevronDownIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
@@ -21,12 +22,14 @@ export var MiniChevronDownIcon = /*#__PURE__*/React.forwardRef(function (_ref, s
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? size : _ref$width,
     props = _objectWithoutProperties(_ref, ["title", "titleId", "size", "height", "width"]);
+  var maskId = useIconId('MiniChevronDownIcon');
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 140 140",
-    fill: "currentColor",
+    fill: "#fff",
     role: "img",
     "aria-hidden": "true",
+    "pointer-events": "none",
     width: width,
     height: height,
     ref: svgRef,
@@ -35,8 +38,20 @@ 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__*/_jsxs("mask", {
+      id: "mini-chevron-down-".concat(maskId),
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'mini-chevron-down'
+      }), /*#__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(#mini-chevron-down-".concat(maskId, ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/mini/MiniChevronLeftIcon.js

@@ -8,6 +8,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import * as React from 'react';
 import { Svg } from '../../props';
+import { useIconId } from '../../useIconId';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var MiniChevronLeftIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
@@ -21,12 +22,14 @@ export var MiniChevronLeftIcon = /*#__PURE__*/React.forwardRef(function (_ref, s
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? size : _ref$width,
     props = _objectWithoutProperties(_ref, ["title", "titleId", "size", "height", "width"]);
+  var maskId = useIconId('MiniChevronLeftIcon');
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 140 140",
-    fill: "currentColor",
+    fill: "#fff",
     role: "img",
     "aria-hidden": "true",
+    "pointer-events": "none",
     width: width,
     height: height,
     ref: svgRef,
@@ -35,8 +38,20 @@ 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__*/_jsxs("mask", {
+      id: "mini-chevron-left-".concat(maskId),
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'mini-chevron-left'
+      }), /*#__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(#mini-chevron-left-".concat(maskId, ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/mini/MiniChevronRightIcon.js

@@ -8,6 +8,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import * as React from 'react';
 import { Svg } from '../../props';
+import { useIconId } from '../../useIconId';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var MiniChevronRightIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
@@ -21,12 +22,14 @@ export var MiniChevronRightIcon = /*#__PURE__*/React.forwardRef(function (_ref,
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? size : _ref$width,
     props = _objectWithoutProperties(_ref, ["title", "titleId", "size", "height", "width"]);
+  var maskId = useIconId('MiniChevronRightIcon');
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 140 140",
-    fill: "currentColor",
+    fill: "#fff",
     role: "img",
     "aria-hidden": "true",
+    "pointer-events": "none",
     width: width,
     height: height,
     ref: svgRef,
@@ -35,8 +38,20 @@ 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__*/_jsxs("mask", {
+      id: "mini-chevron-right-".concat(maskId),
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'mini-chevron-right'
+      }), /*#__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(#mini-chevron-right-".concat(maskId, ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/mini/MiniChevronUpIcon.js

@@ -8,6 +8,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import * as React from 'react';
 import { Svg } from '../../props';
+import { useIconId } from '../../useIconId';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var MiniChevronUpIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
@@ -21,12 +22,14 @@ export var MiniChevronUpIcon = /*#__PURE__*/React.forwardRef(function (_ref, svg
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? size : _ref$width,
     props = _objectWithoutProperties(_ref, ["title", "titleId", "size", "height", "width"]);
+  var maskId = useIconId('MiniChevronUpIcon');
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 140 140",
-    fill: "currentColor",
+    fill: "#fff",
     role: "img",
     "aria-hidden": "true",
+    "pointer-events": "none",
     width: width,
     height: height,
     ref: svgRef,
@@ -35,8 +38,20 @@ 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__*/_jsxs("mask", {
+      id: "mini-chevron-up-".concat(maskId),
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'mini-chevron-up'
+      }), /*#__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(#mini-chevron-up-".concat(maskId, ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/mini/MiniDeleteIcon.js

@@ -8,6 +8,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import * as React from 'react';
 import { Svg } from '../../props';
+import { useIconId } from '../../useIconId';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var MiniDeleteIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
@@ -21,26 +22,37 @@ export var MiniDeleteIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? size : _ref$width,
     props = _objectWithoutProperties(_ref, ["title", "titleId", "size", "height", "width"]);
+  var maskId = useIconId('MiniDeleteIcon');
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     viewBox: "0 0 16 16",
-    fill: "currentColor",
+    fill: "#fff",
     xmlns: "http://www.w3.org/2000/svg",
     role: "img",
     "aria-hidden": "true",
+    "pointer-events": "none",
     width: width,
     height: height,
     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-".concat(maskId),
+      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-".concat(maskId, ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/mini/MiniInfoCircleIcon.js

@@ -8,6 +8,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import * as React from 'react';
 import { Svg } from '../../props';
+import { useIconId } from '../../useIconId';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var MiniInfoCircleIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
@@ -21,25 +22,36 @@ export var MiniInfoCircleIcon = /*#__PURE__*/React.forwardRef(function (_ref, sv
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? size : _ref$width,
     props = _objectWithoutProperties(_ref, ["title", "titleId", "size", "height", "width"]);
+  var maskId = useIconId('MiniInfoCircleIcon');
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 140 140",
-    fill: "currentColor",
+    fill: "#fff",
     role: "img",
     "aria-hidden": "true",
+    "pointer-events": "none",
     width: width,
     height: height,
     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-".concat(maskId),
+      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-".concat(maskId, ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });