@codecademy/gamut-icons 8.1.2-alpha.b29ebf.0 → 8.1.2-alpha.dfdc7f.0

package/dist/icons/regular/CloseCircleIcon.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 CloseCircleIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
@@ -21,6 +22,7 @@ export var CloseCircleIcon = /*#__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('CloseCircleIcon');
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
@@ -33,14 +35,15 @@ export var CloseCircleIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRe
     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-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default'),
-      children: [/*#__PURE__*/_jsx("title", {
-        children: 'remove-circle'
-      }), /*#__PURE__*/_jsx("path", {
+      id: "".concat(maskId),
+      children: [/*#__PURE__*/_jsx("path", {
         fill: "none",
         stroke: "#fff",
         strokeLinecap: "round",
@@ -58,7 +61,7 @@ export var CloseCircleIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRe
         strokeWidth: 1.5
       })]
     }), /*#__PURE__*/_jsx("g", {
-      mask: "url(#remove-circle-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default', ")"),
+      mask: "url(#".concat(maskId, ")"),
       children: /*#__PURE__*/_jsx("rect", {
         width: "100%",
         height: "100%",

package/dist/icons/regular/CloseIcon.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 CloseIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
@@ -21,6 +22,7 @@ export var CloseIcon = /*#__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('CloseIcon');
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
@@ -33,23 +35,24 @@ export var CloseIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
     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-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default'),
-      children: [/*#__PURE__*/_jsx("title", {
-        children: 'close'
-      }), /*#__PURE__*/_jsx("path", {
+    }) : null, /*#__PURE__*/_jsx("mask", {
+      id: "".concat(maskId),
+      children: /*#__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-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default', ")"),
+      mask: "url(#".concat(maskId, ")"),
       children: /*#__PURE__*/_jsx("rect", {
         width: "100%",
         height: "100%",

package/dist/icons/regular/CloudCheckIcon.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 CloudCheckIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
@@ -21,6 +22,7 @@ export var CloudCheckIcon = /*#__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('CloudCheckIcon');
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     viewBox: "0 0 24 24",
     fill: "#fff",
@@ -33,14 +35,15 @@ export var CloudCheckIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef
     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-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default'),
-      children: [/*#__PURE__*/_jsx("title", {
-        children: 'Cloud Check Icon'
-      }), /*#__PURE__*/_jsx("path", {
+      id: "".concat(maskId),
+      children: [/*#__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",
@@ -52,7 +55,7 @@ export var CloudCheckIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef
         fill: "#fff"
       })]
     }), /*#__PURE__*/_jsx("g", {
-      mask: "url(#cloud-check-icon-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default', ")"),
+      mask: "url(#".concat(maskId, ")"),
       children: /*#__PURE__*/_jsx("rect", {
         width: "100%",
         height: "100%",

package/dist/icons/regular/CloudIcon.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 CloudIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
@@ -21,6 +22,7 @@ export var CloudIcon = /*#__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('CloudIcon');
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     viewBox: "0 0 24 24",
     fill: "#fff",
@@ -33,19 +35,20 @@ export var CloudIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
     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-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default'),
-      children: [/*#__PURE__*/_jsx("title", {
-        children: 'Cloud Icon'
-      }), /*#__PURE__*/_jsx("path", {
+    }) : null, /*#__PURE__*/_jsx("mask", {
+      id: "".concat(maskId),
+      children: /*#__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-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default', ")"),
+      mask: "url(#".concat(maskId, ")"),
       children: /*#__PURE__*/_jsx("rect", {
         width: "100%",
         height: "100%",

package/dist/icons/regular/CommentsIcon.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 CommentsIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
@@ -21,6 +22,7 @@ export var CommentsIcon = /*#__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('CommentsIcon');
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
@@ -33,23 +35,24 @@ export var CommentsIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef)
     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-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default'),
-      children: [/*#__PURE__*/_jsx("title", {
-        children: 'messages-bubble-square-text'
-      }), /*#__PURE__*/_jsx("path", {
+    }) : null, /*#__PURE__*/_jsx("mask", {
+      id: "".concat(maskId),
+      children: /*#__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-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default', ")"),
+      mask: "url(#".concat(maskId, ")"),
       children: /*#__PURE__*/_jsx("rect", {
         width: "100%",
         height: "100%",

package/dist/icons/regular/CommunityIcon.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 CommunityIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
@@ -21,6 +22,7 @@ export var CommunityIcon = /*#__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('CommunityIcon');
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
@@ -33,14 +35,15 @@ export var CommunityIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef)
     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-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default'),
-      children: [/*#__PURE__*/_jsx("title", {
-        children: 'family-home'
-      }), /*#__PURE__*/_jsx("path", {
+      id: "".concat(maskId),
+      children: [/*#__PURE__*/_jsx("path", {
         fill: "none",
         stroke: "#fff",
         strokeLinecap: "round",
@@ -83,7 +86,7 @@ export var CommunityIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef)
         strokeWidth: 1.5
       })]
     }), /*#__PURE__*/_jsx("g", {
-      mask: "url(#family-home-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default', ")"),
+      mask: "url(#".concat(maskId, ")"),
       children: /*#__PURE__*/_jsx("rect", {
         width: "100%",
         height: "100%",

package/dist/icons/regular/ConversationChatIcon.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 ConversationChatIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
@@ -21,6 +22,7 @@ export var ConversationChatIcon = /*#__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('ConversationChatIcon');
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 140 140",
@@ -33,14 +35,15 @@ export var ConversationChatIcon = /*#__PURE__*/React.forwardRef(function (_ref,
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title ? /*#__PURE__*/_jsx("title", {
+    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
+      id: titleId,
+      children: 'conversation-chat-1'
+    }) : title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsxs("mask", {
-      id: "conversation-chat-1-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default'),
-      children: [/*#__PURE__*/_jsx("title", {
-        children: 'conversation-chat-1'
-      }), /*#__PURE__*/_jsxs("g", {
+    }) : null, /*#__PURE__*/_jsx("mask", {
+      id: "".concat(maskId),
+      children: /*#__PURE__*/_jsxs("g", {
         fill: "none",
         stroke: "#fff",
         strokeLinecap: "round",
@@ -51,9 +54,9 @@ export var ConversationChatIcon = /*#__PURE__*/React.forwardRef(function (_ref,
         }), /*#__PURE__*/_jsx("path", {
           d: "M39.375 74.375l-17.5 17.5v-26.25h-8.75a8.75 8.75 0 01-8.75-8.75v-43.75a8.75 8.75 0 018.75-8.75h61.25a8.75 8.75 0 018.75 8.75v17.5"
         })]
-      })]
+      })
     }), /*#__PURE__*/_jsx("g", {
-      mask: "url(#conversation-chat-1-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default', ")"),
+      mask: "url(#".concat(maskId, ")"),
       children: /*#__PURE__*/_jsx("rect", {
         width: "100%",
         height: "100%",

package/dist/icons/regular/CopyIcon.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 CopyIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
@@ -21,6 +22,7 @@ export var CopyIcon = /*#__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('CopyIcon');
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
@@ -33,14 +35,15 @@ export var CopyIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title ? /*#__PURE__*/_jsx("title", {
+    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
+      id: titleId,
+      children: 'copy-paste'
+    }) : title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
     }) : null, /*#__PURE__*/_jsxs("mask", {
-      id: "copy-paste-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default'),
-      children: [/*#__PURE__*/_jsx("title", {
-        children: 'copy-paste'
-      }), /*#__PURE__*/_jsx("path", {
+      id: "".concat(maskId),
+      children: [/*#__PURE__*/_jsx("path", {
         d: "M20.25 8.249v-3a1.5 1.5 0 00-1.5-1.5h-4m-8.5 0h-4a1.5 1.5 0 00-1.5 1.5v16.5a1.5 1.5 0 001.5 1.5h6",
         fill: "none",
         stroke: "#fff",
@@ -75,7 +78,7 @@ export var CopyIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
         d: "M14.25 14.249h6m-6 3h6m-6 3h2.25"
       })]
     }), /*#__PURE__*/_jsx("g", {
-      mask: "url(#copy-paste-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default', ")"),
+      mask: "url(#".concat(maskId, ")"),
       children: /*#__PURE__*/_jsx("rect", {
         width: "100%",
         height: "100%",

package/dist/icons/regular/CreditCardIcon.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 CreditCardIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
@@ -21,6 +22,7 @@ export var CreditCardIcon = /*#__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('CreditCardIcon');
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
@@ -33,22 +35,23 @@ export var CreditCardIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title ? /*#__PURE__*/_jsx("title", {
+    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
+      id: titleId,
+      children: 'credit-card'
+    }) : title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsxs("mask", {
-      id: "credit-card-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default'),
-      children: [/*#__PURE__*/_jsx("title", {
-        children: 'credit-card'
-      }), /*#__PURE__*/_jsx("path", {
+    }) : null, /*#__PURE__*/_jsx("mask", {
+      id: "".concat(maskId),
+      children: /*#__PURE__*/_jsx("path", {
         d: "M.504 4h23v16h-23zm0 4h23m-3 4h-3m-6 0h-8m3 3h-3",
         fill: "none",
         stroke: "#fff",
         strokeLinecap: "round",
         strokeLinejoin: "round"
-      })]
+      })
     }), /*#__PURE__*/_jsx("g", {
-      mask: "url(#credit-card-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default', ")"),
+      mask: "url(#".concat(maskId, ")"),
       children: /*#__PURE__*/_jsx("rect", {
         width: "100%",
         height: "100%",

package/dist/icons/regular/CubeIcon.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 CubeIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
@@ -21,6 +22,7 @@ export var CubeIcon = /*#__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('CubeIcon');
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     fill: "#fff",
     xmlns: "http://www.w3.org/2000/svg",
@@ -33,20 +35,21 @@ export var CubeIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title ? /*#__PURE__*/_jsx("title", {
+    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
+      id: titleId,
+      children: 'cube'
+    }) : title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsxs("mask", {
-      id: "cube-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default'),
-      children: [/*#__PURE__*/_jsx("title", {
-        children: 'cube'
-      }), /*#__PURE__*/_jsx("path", {
+    }) : null, /*#__PURE__*/_jsx("mask", {
+      id: "".concat(maskId),
+      children: /*#__PURE__*/_jsx("path", {
         d: "M10.267.101c-.136.063-.982.842-2.32 2.137-1.159 1.122-2.198 2.107-2.31 2.19a2.184 2.184 0 00-.347.338C5.099 5.015.621 9.326.392 9.482a1.056 1.056 0 00-.285.331C.001 10.02 0 10.122 0 20.653v10.631l.12.238c.088.174.184.27.358.358l.238.12h10.631c10.531 0 10.633-.001 10.84-.107.115-.059.264-.187.331-.285.156-.229 4.467-4.707 4.716-4.898.102-.079.254-.235.338-.347.083-.112 1.068-1.151 2.19-2.31 1.295-1.338 2.074-2.184 2.137-2.32.095-.205.099-.608.099-10.64V.667l-.12-.213a1.013 1.013 0 00-.332-.332l-.213-.12H20.907c-10.032 0-10.435.004-10.64.099m7.383 2.232c-.157.169-.652.685-1.1 1.147l-.814.841-3.522-.014-3.522-.014L9.867 3.16l1.174-1.133h6.894l-.285.306m9.763.841l-1.147 1.147-3.858-.014-3.859-.014 1.086-1.132 1.085-1.132 3.92-.001 3.92-.001-1.147 1.147m1.414 8.932l-1.147 1.147V5.734L28.813 4.6l1.134-1.134.013 3.746.014 3.747-1.147 1.147M13.126 7.027c-.355.374-.999 1.047-1.432 1.495l-.787.815-3.702-.015-3.701-.015 1.532-1.48 1.532-1.48h7.204l-.646.68m9.62.813l-1.494 1.494-3.767-.014-3.768-.013 1.421-1.48 1.422-1.48h7.68L22.746 7.84m1.414 8.933l-1.493 1.493v-7.519l1.48-1.48 1.48-1.481.013 3.746.014 3.747-1.494 1.494M10.347 15.52v4.16h-8.32v-8.32h8.32v4.16m10.293 0v4.16h-8.32v-8.32h8.32v4.16m9.267 5.489c-.037.052-.553.596-1.147 1.209l-1.08 1.114v-7.251l1.133-1.134 1.134-1.135.013 3.551c.011 2.784 0 3.572-.053 3.646m-4.254.774v3.649l-1.48 1.532-1.48 1.532-.013-3.701-.014-3.7 1.48-1.481c.814-.814 1.486-1.481 1.494-1.481.007 0 .013 1.642.013 3.65m-15.319 4.044L10.32 30l-4.147.014-4.146.013v-8.374h8.32l-.013 4.174m10.306.013v4.187l-4.147-.013L12.347 30l-.014-4.173-.014-4.174h8.321v4.187",
         fillRule: "evenodd",
         fill: "#fff"
-      })]
+      })
     }), /*#__PURE__*/_jsx("g", {
-      mask: "url(#cube-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default', ")"),
+      mask: "url(#".concat(maskId, ")"),
       children: /*#__PURE__*/_jsx("rect", {
         width: "100%",
         height: "100%",

package/dist/icons/regular/DataFileBarsShareIcon.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 DataFileBarsShareIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
@@ -21,6 +22,7 @@ export var DataFileBarsShareIcon = /*#__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('DataFileBarsShareIcon');
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
@@ -33,14 +35,15 @@ export var DataFileBarsShareIcon = /*#__PURE__*/React.forwardRef(function (_ref,
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title ? /*#__PURE__*/_jsx("title", {
+    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
+      id: titleId,
+      children: 'data-file-bars-share'
+    }) : title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
     }) : null, /*#__PURE__*/_jsxs("mask", {
-      id: "data-file-bars-share-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default'),
-      children: [/*#__PURE__*/_jsx("title", {
-        children: 'data-file-bars-share'
-      }), /*#__PURE__*/_jsx("circle", {
+      id: "".concat(maskId),
+      children: [/*#__PURE__*/_jsx("circle", {
         cx: 13.5,
         cy: 18,
         r: 2.25,
@@ -76,7 +79,7 @@ export var DataFileBarsShareIcon = /*#__PURE__*/React.forwardRef(function (_ref,
         d: "M15.425 16.845l3.65-2.19m-3.487 4.18l3.324 1.33M3.75 14.25h4.5m0 0v-7.5m3 5.25V8.25m-6 6v-4.5m2.25 10.5H2.25a1.5 1.5 0 01-1.5-1.5V2.25a1.5 1.5 0 011.5-1.5h10.629a1.5 1.5 0 011.06.439l2.872 2.872a1.5 1.5 0 01.439 1.06V7.5"
       })]
     }), /*#__PURE__*/_jsx("g", {
-      mask: "url(#data-file-bars-share-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default', ")"),
+      mask: "url(#".concat(maskId, ")"),
       children: /*#__PURE__*/_jsx("rect", {
         width: "100%",
         height: "100%",

package/dist/icons/regular/DataTransferVerticalIcon.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 DataTransferVerticalIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
@@ -21,6 +22,7 @@ export var DataTransferVerticalIcon = /*#__PURE__*/React.forwardRef(function (_r
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? size : _ref$width,
     props = _objectWithoutProperties(_ref, ["title", "titleId", "size", "height", "width"]);
+  var maskId = useIconId('DataTransferVerticalIcon');
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
@@ -33,23 +35,24 @@ export var DataTransferVerticalIcon = /*#__PURE__*/React.forwardRef(function (_r
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title ? /*#__PURE__*/_jsx("title", {
+    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
+      id: titleId,
+      children: 'data-transfer-vertical'
+    }) : title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsxs("mask", {
-      id: "data-transfer-vertical-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default'),
-      children: [/*#__PURE__*/_jsx("title", {
-        children: 'data-transfer-vertical'
-      }), /*#__PURE__*/_jsx("path", {
+    }) : null, /*#__PURE__*/_jsx("mask", {
+      id: "".concat(maskId),
+      children: /*#__PURE__*/_jsx("path", {
         fill: "none",
         stroke: "#fff",
         strokeLinecap: "round",
         strokeLinejoin: "round",
         strokeWidth: 1.5,
         d: "M9 10.5v12.75m3-3l-3 3-3-3m9-6.75V.75m-3 3l3-3 3 3"
-      })]
+      })
     }), /*#__PURE__*/_jsx("g", {
-      mask: "url(#data-transfer-vertical-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default', ")"),
+      mask: "url(#".concat(maskId, ")"),
       children: /*#__PURE__*/_jsx("rect", {
         width: "100%",
         height: "100%",

package/dist/icons/regular/DeleteFilledIcon.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 DeleteFilledIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
@@ -21,6 +22,7 @@ export var DeleteFilledIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgR
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? size : _ref$width,
     props = _objectWithoutProperties(_ref, ["title", "titleId", "size", "height", "width"]);
+  var maskId = useIconId('DeleteFilledIcon');
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
@@ -33,18 +35,19 @@ export var DeleteFilledIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgR
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title ? /*#__PURE__*/_jsx("title", {
+    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
+      id: titleId,
+      children: 'delete-2'
+    }) : title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsxs("mask", {
-      id: "delete-2-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default'),
-      children: [/*#__PURE__*/_jsx("title", {
-        children: 'delete-2'
-      }), /*#__PURE__*/_jsx("path", {
+    }) : null, /*#__PURE__*/_jsx("mask", {
+      id: "".concat(maskId),
+      children: /*#__PURE__*/_jsx("path", {
         d: "M20.488 3.515a11.994 11.994 0 100 16.97 12.014 12.014 0 000-16.97zm-3.779 11.764a1 1 0 01-1.409 1.415l-3.11-3.11a.252.252 0 00-.354 0l-3.109 3.11a1.019 1.019 0 01-1.415 0 1 1 0 010-1.415l3.11-3.109a.249.249 0 000-.353l-3.11-3.11a1 1 0 011.41-1.415l3.109 3.11a.25.25 0 00.354 0l3.11-3.11a1 1 0 011.414 1.415l-3.11 3.11a.25.25 0 000 .353z"
-      })]
+      })
     }), /*#__PURE__*/_jsx("g", {
-      mask: "url(#delete-2-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default', ")"),
+      mask: "url(#".concat(maskId, ")"),
       children: /*#__PURE__*/_jsx("rect", {
         width: "100%",
         height: "100%",