@codecademy/gamut-icons 8.0.2-alpha.20ae90.0 → 8.0.2-alpha.2d7974.0

package/dist/icons/regular/CheckHeavyIcon.js

@@ -24,32 +24,22 @@ export var CheckHeavyIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
-    fill: "#fff",
+    fill: "currentColor",
     role: "img",
     "aria-hidden": "true",
-    "pointer-events": "none",
     width: width,
     height: height,
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title ? /*#__PURE__*/_jsx("title", {
+    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
+      id: titleId,
+      children: 'check'
+    }) : title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsxs("mask", {
-      id: 'check-heavy',
-      children: [/*#__PURE__*/_jsx("title", {
-        children: 'check-heavy'
-      }), /*#__PURE__*/_jsx("path", {
-        d: "M23.146 5.4l-2.792-2.8a.5.5 0 00-.708 0L7.854 14.4a.5.5 0 01-.708 0l-2.792-2.8a.5.5 0 00-.708 0L.854 14.4a.5.5 0 000 .707L7.146 21.4a.5.5 0 00.708 0L23.146 6.1a.5.5 0 000-.7z"
-      })]
-    }), /*#__PURE__*/_jsx("g", {
-      mask: 'url(#check-heavy)',
-      children: /*#__PURE__*/_jsx("rect", {
-        width: '100%',
-        height: '100%',
-        fill: 'currentColor'
-      })
+    }) : null, /*#__PURE__*/_jsx("path", {
+      d: "M23.146 5.4l-2.792-2.8a.5.5 0 00-.708 0L7.854 14.4a.5.5 0 01-.708 0l-2.792-2.8a.5.5 0 00-.708 0L.854 14.4a.5.5 0 000 .707L7.146 21.4a.5.5 0 00.708 0L23.146 6.1a.5.5 0 000-.7z"
     })]
   }));
 });

package/dist/icons/regular/CheckIcon.js

@@ -23,36 +23,26 @@ export var CheckIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
     props = _objectWithoutProperties(_ref, ["title", "titleId", "size", "height", "width"]);
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     viewBox: "0 0 24 24",
-    fill: "#fff",
+    fill: "currentColor",
     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 ? /*#__PURE__*/_jsx("title", {
+    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
+      id: titleId,
+      children: 'check'
+    }) : title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsxs("mask", {
-      id: 'check',
-      children: [/*#__PURE__*/_jsx("title", {
-        children: 'check'
-      }), /*#__PURE__*/_jsx("path", {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M23.552 3.93a1.5 1.5 0 01.017 2.122l-13.778 14a1.5 1.5 0 01-2.056.077L.513 13.813a1.5 1.5 0 011.974-2.258l6.158 5.385L21.431 3.948a1.5 1.5 0 012.121-.017z",
-        fill: "#fff"
-      })]
-    }), /*#__PURE__*/_jsx("g", {
-      mask: 'url(#check)',
-      children: /*#__PURE__*/_jsx("rect", {
-        width: '100%',
-        height: '100%',
-        fill: 'currentColor'
-      })
+    }) : null, /*#__PURE__*/_jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M23.552 3.93a1.5 1.5 0 01.017 2.122l-13.778 14a1.5 1.5 0 01-2.056.077L.513 13.813a1.5 1.5 0 011.974-2.258l6.158 5.385L21.431 3.948a1.5 1.5 0 012.121-.017z",
+      fill: "currentColor"
     })]
   }));
 });

package/dist/icons/regular/ChecklistIcon.js

@@ -24,49 +24,39 @@ export var ChecklistIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef)
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
-    fill: "#fff",
+    fill: "currentColor",
     role: "img",
     "aria-hidden": "true",
-    "pointer-events": "none",
     width: width,
     height: height,
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title ? /*#__PURE__*/_jsx("title", {
+    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
+      id: titleId,
+      children: 'checklist'
+    }) : title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsxs("mask", {
-      id: 'checklist',
-      children: [/*#__PURE__*/_jsx("title", {
-        children: 'checklist'
-      }), /*#__PURE__*/_jsx("rect", {
-        x: 0.75,
-        y: 0.749,
-        width: 22.5,
-        height: 22.5,
-        rx: 1.5,
-        ry: 1.5,
-        fill: "none",
-        stroke: "#fff",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: 1.5
-      }), /*#__PURE__*/_jsx("path", {
-        fill: "none",
-        stroke: "#fff",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: 1.5,
-        d: "M12 4.499l-4.5 6-3-3m9.75.75h4.5M12 13.499l-4.5 6-3-3m9.75.75h4.5"
-      })]
-    }), /*#__PURE__*/_jsx("g", {
-      mask: 'url(#checklist)',
-      children: /*#__PURE__*/_jsx("rect", {
-        width: '100%',
-        height: '100%',
-        fill: 'currentColor'
-      })
+    }) : null, /*#__PURE__*/_jsx("rect", {
+      x: 0.75,
+      y: 0.749,
+      width: 22.5,
+      height: 22.5,
+      rx: 1.5,
+      ry: 1.5,
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 1.5
+    }), /*#__PURE__*/_jsx("path", {
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 1.5,
+      d: "M12 4.499l-4.5 6-3-3m9.75.75h4.5M12 13.499l-4.5 6-3-3m9.75.75h4.5"
     })]
   }));
 });

package/dist/icons/regular/ClockIcon.js

@@ -24,46 +24,36 @@ export var ClockIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
-    fill: "#fff",
+    fill: "currentColor",
     role: "img",
     "aria-hidden": "true",
-    "pointer-events": "none",
     width: width,
     height: height,
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title ? /*#__PURE__*/_jsx("title", {
+    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
+      id: titleId,
+      children: 'time-clock-circle'
+    }) : title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsxs("mask", {
-      id: 'time-clock-circle',
-      children: [/*#__PURE__*/_jsx("title", {
-        children: 'time-clock-circle'
-      }), /*#__PURE__*/_jsx("circle", {
-        cx: 12,
-        cy: 12,
-        r: 10.5,
-        fill: "none",
-        stroke: "#fff",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: 1.5
-      }), /*#__PURE__*/_jsx("path", {
-        fill: "none",
-        stroke: "#fff",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: 1.5,
-        d: "M12 12V8.25M12 12l4.687 4.688"
-      })]
-    }), /*#__PURE__*/_jsx("g", {
-      mask: 'url(#time-clock-circle)',
-      children: /*#__PURE__*/_jsx("rect", {
-        width: '100%',
-        height: '100%',
-        fill: 'currentColor'
-      })
+    }) : null, /*#__PURE__*/_jsx("circle", {
+      cx: 12,
+      cy: 12,
+      r: 10.5,
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 1.5
+    }), /*#__PURE__*/_jsx("path", {
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 1.5,
+      d: "M12 12V8.25M12 12l4.687 4.688"
     })]
   }));
 });

package/dist/icons/regular/CloseCircleIcon.js

@@ -24,46 +24,36 @@ export var CloseCircleIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRe
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
-    fill: "#fff",
+    fill: "currentColor",
     role: "img",
     "aria-hidden": "true",
-    "pointer-events": "none",
     width: width,
     height: height,
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title ? /*#__PURE__*/_jsx("title", {
+    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
+      id: titleId,
+      children: 'remove-circle'
+    }) : title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsxs("mask", {
-      id: 'remove-circle',
-      children: [/*#__PURE__*/_jsx("title", {
-        children: 'remove-circle'
-      }), /*#__PURE__*/_jsx("path", {
-        fill: "none",
-        stroke: "#fff",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: 1.5,
-        d: "M15.182 8.818l-6.364 6.363m0-6.363l6.364 6.363"
-      }), /*#__PURE__*/_jsx("circle", {
-        cx: 12,
-        cy: 12,
-        r: 11.25,
-        fill: "none",
-        stroke: "#fff",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: 1.5
-      })]
-    }), /*#__PURE__*/_jsx("g", {
-      mask: 'url(#remove-circle)',
-      children: /*#__PURE__*/_jsx("rect", {
-        width: '100%',
-        height: '100%',
-        fill: 'currentColor'
-      })
+    }) : null, /*#__PURE__*/_jsx("path", {
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 1.5,
+      d: "M15.182 8.818l-6.364 6.363m0-6.363l6.364 6.363"
+    }), /*#__PURE__*/_jsx("circle", {
+      cx: 12,
+      cy: 12,
+      r: 11.25,
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 1.5
     })]
   }));
 });

package/dist/icons/regular/CloseIcon.js

@@ -24,37 +24,27 @@ export var CloseIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
-    fill: "#fff",
+    fill: "currentColor",
     role: "img",
     "aria-hidden": "true",
-    "pointer-events": "none",
     width: width,
     height: height,
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title ? /*#__PURE__*/_jsx("title", {
+    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
+      id: titleId,
+      children: 'close'
+    }) : title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsxs("mask", {
-      id: 'close',
-      children: [/*#__PURE__*/_jsx("title", {
-        children: 'close'
-      }), /*#__PURE__*/_jsx("path", {
-        fill: "none",
-        stroke: "#fff",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: 1.5,
-        d: "M.75 23.249l22.5-22.5m0 22.5L.75.749"
-      })]
-    }), /*#__PURE__*/_jsx("g", {
-      mask: 'url(#close)',
-      children: /*#__PURE__*/_jsx("rect", {
-        width: '100%',
-        height: '100%',
-        fill: 'currentColor'
-      })
+    }) : null, /*#__PURE__*/_jsx("path", {
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 1.5,
+      d: "M.75 23.249l22.5-22.5m0 22.5L.75.749"
     })]
   }));
 });

package/dist/icons/regular/CloudCheckIcon.js

@@ -23,41 +23,31 @@ export var CloudCheckIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef
     props = _objectWithoutProperties(_ref, ["title", "titleId", "size", "height", "width"]);
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     viewBox: "0 0 24 24",
-    fill: "#fff",
+    fill: "currentColor",
     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 ? /*#__PURE__*/_jsx("title", {
+    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
+      id: titleId,
+      children: 'Cloud Check Icon'
+    }) : title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsxs("mask", {
-      id: 'cloud-check-icon',
-      children: [/*#__PURE__*/_jsx("title", {
-        children: 'Cloud Check Icon'
-      }), /*#__PURE__*/_jsx("path", {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M15.178 6.58a6.27 6.27 0 00-4.186-.785 6.277 6.277 0 00-5.12 4.83.208.208 0 01-.189.166 3.756 3.756 0 00-3.475 3.74A3.543 3.543 0 003.22 17.16a4.39 4.39 0 002.91 1.126h11.323a.758.758 0 00.107-.008 4.75 4.75 0 004.232-4.72 4.757 4.757 0 00-1.58-3.528l-1.183 1.183a3.05 3.05 0 011.093 2.345 3.089 3.089 0 01-2.731 3.061H6.145a2.75 2.75 0 01-1.755-.647 1.918 1.918 0 01-.515-1.44 2.09 2.09 0 012.518-2.044.834.834 0 001-.766 4.61 4.61 0 016.55-3.908l1.235-1.235z",
-        fill: "#fff"
-      }), /*#__PURE__*/_jsx("path", {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M18.207 7.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 111.414-1.414l1.293 1.293 4.293-4.293a1 1 0 011.414 0z",
-        fill: "#fff"
-      })]
-    }), /*#__PURE__*/_jsx("g", {
-      mask: 'url(#cloud-check-icon)',
-      children: /*#__PURE__*/_jsx("rect", {
-        width: '100%',
-        height: '100%',
-        fill: 'currentColor'
-      })
+    }) : null, /*#__PURE__*/_jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M15.178 6.58a6.27 6.27 0 00-4.186-.785 6.277 6.277 0 00-5.12 4.83.208.208 0 01-.189.166 3.756 3.756 0 00-3.475 3.74A3.543 3.543 0 003.22 17.16a4.39 4.39 0 002.91 1.126h11.323a.758.758 0 00.107-.008 4.75 4.75 0 004.232-4.72 4.757 4.757 0 00-1.58-3.528l-1.183 1.183a3.05 3.05 0 011.093 2.345 3.089 3.089 0 01-2.731 3.061H6.145a2.75 2.75 0 01-1.755-.647 1.918 1.918 0 01-.515-1.44 2.09 2.09 0 012.518-2.044.834.834 0 001-.766 4.61 4.61 0 016.55-3.908l1.235-1.235z",
+      fill: "currentColor"
+    }), /*#__PURE__*/_jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M18.207 7.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 111.414-1.414l1.293 1.293 4.293-4.293a1 1 0 011.414 0z",
+      fill: "currentColor"
     })]
   }));
 });

package/dist/icons/regular/CloudIcon.js

@@ -23,34 +23,24 @@ export var CloudIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
     props = _objectWithoutProperties(_ref, ["title", "titleId", "size", "height", "width"]);
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     viewBox: "0 0 24 24",
-    fill: "#fff",
+    fill: "currentColor",
     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 ? /*#__PURE__*/_jsx("title", {
+    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
+      id: titleId,
+      children: 'Cloud Icon'
+    }) : title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsxs("mask", {
-      id: 'cloud-icon',
-      children: [/*#__PURE__*/_jsx("title", {
-        children: 'Cloud Icon'
-      }), /*#__PURE__*/_jsx("path", {
-        d: "M21.792 13.557a4.757 4.757 0 00-1.45-3.406 4.667 4.667 0 00-2.807-1.295.208.208 0 01-.158-.1 6.277 6.277 0 00-11.505 1.868.208.208 0 01-.189.167 3.756 3.756 0 00-3.475 3.74A3.543 3.543 0 003.22 17.16a4.39 4.39 0 002.91 1.126h11.323a.758.758 0 00.107-.008 4.75 4.75 0 004.232-4.72zM17.39 16.62H6.145a2.75 2.75 0 01-1.755-.647 1.918 1.918 0 01-.515-1.44 2.09 2.09 0 012.518-2.044.834.834 0 001-.766 4.61 4.61 0 018.774-1.695.799.799 0 00.784.475 3.054 3.054 0 013.17 3.055 3.089 3.089 0 01-2.73 3.062z",
-        fill: "#fff"
-      })]
-    }), /*#__PURE__*/_jsx("g", {
-      mask: 'url(#cloud-icon)',
-      children: /*#__PURE__*/_jsx("rect", {
-        width: '100%',
-        height: '100%',
-        fill: 'currentColor'
-      })
+    }) : null, /*#__PURE__*/_jsx("path", {
+      d: "M21.792 13.557a4.757 4.757 0 00-1.45-3.406 4.667 4.667 0 00-2.807-1.295.208.208 0 01-.158-.1 6.277 6.277 0 00-11.505 1.868.208.208 0 01-.189.167 3.756 3.756 0 00-3.475 3.74A3.543 3.543 0 003.22 17.16a4.39 4.39 0 002.91 1.126h11.323a.758.758 0 00.107-.008 4.75 4.75 0 004.232-4.72zM17.39 16.62H6.145a2.75 2.75 0 01-1.755-.647 1.918 1.918 0 01-.515-1.44 2.09 2.09 0 012.518-2.044.834.834 0 001-.766 4.61 4.61 0 018.774-1.695.799.799 0 00.784.475 3.054 3.054 0 013.17 3.055 3.089 3.089 0 01-2.73 3.062z",
+      fill: "currentColor"
     })]
   }));
 });

package/dist/icons/regular/CommentsIcon.js

@@ -24,37 +24,27 @@ export var CommentsIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef)
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
-    fill: "#fff",
+    fill: "currentColor",
     role: "img",
     "aria-hidden": "true",
-    "pointer-events": "none",
     width: width,
     height: height,
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title ? /*#__PURE__*/_jsx("title", {
+    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
+      id: titleId,
+      children: 'messages-bubble-square-text'
+    }) : title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsxs("mask", {
-      id: 'messages-bubble-square-text',
-      children: [/*#__PURE__*/_jsx("title", {
-        children: 'messages-bubble-square-text'
-      }), /*#__PURE__*/_jsx("path", {
-        d: "M21.75 18.75h-10.5l-6 4.5v-4.5h-3a1.5 1.5 0 01-1.5-1.5v-15a1.5 1.5 0 011.5-1.5h19.5a1.5 1.5 0 011.5 1.5v15a1.5 1.5 0 01-1.5 1.5zM5.25 7.5h13.5M5.25 12h10.5",
-        fill: "none",
-        stroke: "#fff",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: 1.5
-      })]
-    }), /*#__PURE__*/_jsx("g", {
-      mask: 'url(#messages-bubble-square-text)',
-      children: /*#__PURE__*/_jsx("rect", {
-        width: '100%',
-        height: '100%',
-        fill: 'currentColor'
-      })
+    }) : null, /*#__PURE__*/_jsx("path", {
+      d: "M21.75 18.75h-10.5l-6 4.5v-4.5h-3a1.5 1.5 0 01-1.5-1.5v-15a1.5 1.5 0 011.5-1.5h19.5a1.5 1.5 0 011.5 1.5v15a1.5 1.5 0 01-1.5 1.5zM5.25 7.5h13.5M5.25 12h10.5",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 1.5
     })]
   }));
 });

package/dist/icons/regular/CommunityIcon.js

@@ -24,71 +24,61 @@ export var CommunityIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef)
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
-    fill: "#fff",
+    fill: "currentColor",
     role: "img",
     "aria-hidden": "true",
-    "pointer-events": "none",
     width: width,
     height: height,
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title ? /*#__PURE__*/_jsx("title", {
+    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
+      id: titleId,
+      children: 'family-home'
+    }) : title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsxs("mask", {
-      id: 'family-home',
-      children: [/*#__PURE__*/_jsx("title", {
-        children: 'family-home'
-      }), /*#__PURE__*/_jsx("path", {
-        fill: "none",
-        stroke: "#fff",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: 1.5,
-        d: "M23.25 9.75L12 1.5.75 9.75"
-      }), /*#__PURE__*/_jsx("circle", {
-        cx: 3.375,
-        cy: 16.392,
-        r: 2.625,
-        fill: "none",
-        stroke: "#fff",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: 1.5
-      }), /*#__PURE__*/_jsx("circle", {
-        cx: 20.625,
-        cy: 16.392,
-        r: 2.625,
-        fill: "none",
-        stroke: "#fff",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: 1.5
-      }), /*#__PURE__*/_jsx("circle", {
-        cx: 12,
-        cy: 16.392,
-        r: 2.625,
-        fill: "none",
-        stroke: "#fff",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: 1.5
-      }), /*#__PURE__*/_jsx("path", {
-        d: "M.75 20.613A4.5 4.5 0 017.514 22.5h.347a4.5 4.5 0 018.278 0h.347a4.5 4.5 0 016.764-1.887",
-        fill: "none",
-        stroke: "#fff",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: 1.5
-      })]
-    }), /*#__PURE__*/_jsx("g", {
-      mask: 'url(#family-home)',
-      children: /*#__PURE__*/_jsx("rect", {
-        width: '100%',
-        height: '100%',
-        fill: 'currentColor'
-      })
+    }) : null, /*#__PURE__*/_jsx("path", {
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 1.5,
+      d: "M23.25 9.75L12 1.5.75 9.75"
+    }), /*#__PURE__*/_jsx("circle", {
+      cx: 3.375,
+      cy: 16.392,
+      r: 2.625,
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 1.5
+    }), /*#__PURE__*/_jsx("circle", {
+      cx: 20.625,
+      cy: 16.392,
+      r: 2.625,
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 1.5
+    }), /*#__PURE__*/_jsx("circle", {
+      cx: 12,
+      cy: 16.392,
+      r: 2.625,
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 1.5
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M.75 20.613A4.5 4.5 0 017.514 22.5h.347a4.5 4.5 0 018.278 0h.347a4.5 4.5 0 016.764-1.887",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 1.5
     })]
   }));
 });