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

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

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

package/dist/icons/regular/YoutubeIcon.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 YoutubeIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
@@ -21,6 +22,7 @@ export var YoutubeIcon = /*#__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('YoutubeIcon');
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
@@ -33,20 +35,21 @@ export var YoutubeIcon = /*#__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: 'social-video-youtube'
+    }) : title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
     }) : null, /*#__PURE__*/_jsxs("mask", {
-      id: "social-video-youtube-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default'),
-      children: [/*#__PURE__*/_jsx("title", {
-        children: 'social-video-youtube'
-      }), /*#__PURE__*/_jsx("path", {
+      id: "".concat(maskId),
+      children: [/*#__PURE__*/_jsx("path", {
         d: "M5.9 5.12v4.26a.75.75 0 001.5 0V5.12l2.85-3.8A.75.75 0 109 .42l-2.4 3.2L4.25.42a.75.75 0 10-1.2.9zm3.55-.24v3a2.25 2.25 0 004.5 0v-3a2.25 2.25 0 10-4.5 0zm1.5 0a.75.75 0 111.5 0v3a.75.75 0 01-1.5 0zm4.86 4.44a2.73 2.73 0 001.94.8 2.72 2.72 0 001.36-.38.74.74 0 00.64.38.75.75 0 00.75-.75v-6a.75.75 0 00-1.5 0v4a1.25 1.25 0 01-1.25 1.25 1.25 1.25 0 01-1.25-1.25v-4a.75.75 0 10-1.5 0v4a2.73 2.73 0 00.81 1.95zm2.69 8.05a.5.5 0 00-1 0v.5h1zm-4.5-.5a.5.5 0 00-.5.5v2a.5.5 0 001 0v-2a.5.5 0 00-.5-.5z"
       }), /*#__PURE__*/_jsx("path", {
         d: "M19 11.87H5a4.5 4.5 0 00-4.5 4.5v3a4.5 4.5 0 004.5 4.5h14a4.5 4.5 0 004.5-4.5v-3a4.5 4.5 0 00-4.5-4.5zm-11 4H6.5v4.48a.5.5 0 01-1 0v-4.48H4a.5.5 0 010-1h4a.5.5 0 110 1zm3.48 3.5v1a.5.5 0 01-.86.35 1.48 1.48 0 01-.64.15 1.5 1.5 0 01-1.5-1.5v-3a.5.5 0 011 0v3a.5.5 0 001 0v-3a.5.5 0 011 0zm4 0a1.5 1.5 0 01-1.5 1.5 1.48 1.48 0 01-.66-.16.5.5 0 01-.84-.36v-6a.5.5 0 011 0V16a1.48 1.48 0 01.5-.09 1.5 1.5 0 011.5 1.5zm2.59 1.5a1.69 1.69 0 01-1.59-1.62v-1.88a1.5 1.5 0 013 0v1a.5.5 0 01-.5.5H17.5v.38a.7.7 0 00.59.62c.23 0 .59-.1.59-.37a.5.5 0 011 0 1.46 1.46 0 01-1.59 1.37z"
       })]
     }), /*#__PURE__*/_jsx("g", {
-      mask: "url(#social-video-youtube-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default', ")"),
+      mask: "url(#".concat(maskId, ")"),
       children: /*#__PURE__*/_jsx("rect", {
         width: "100%",
         height: "100%",

package/dist/icons/regular/ZoomIcon.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 ZoomIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
@@ -21,6 +22,7 @@ export var ZoomIcon = /*#__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('ZoomIcon');
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
@@ -33,23 +35,24 @@ export var ZoomIcon = /*#__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: 'zoom-in'
+    }) : title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsxs("mask", {
-      id: "zoom-in-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default'),
-      children: [/*#__PURE__*/_jsx("title", {
-        children: 'zoom-in'
-      }), /*#__PURE__*/_jsx("path", {
+    }) : null, /*#__PURE__*/_jsx("mask", {
+      id: "".concat(maskId),
+      children: /*#__PURE__*/_jsx("path", {
         d: "M18.875 9.811A9.063 9.063 0 119.813.749a9.063 9.063 0 019.062 9.062zM5.25 9.749h9m-4.5 4.5v-9m6.471 10.97l7.029 7.03",
         fill: "none",
         stroke: "#fff",
         strokeLinecap: "round",
         strokeLinejoin: "round",
         strokeWidth: 1.5
-      })]
+      })
     }), /*#__PURE__*/_jsx("g", {
-      mask: "url(#zoom-in-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default', ")"),
+      mask: "url(#".concat(maskId, ")"),
       children: /*#__PURE__*/_jsx("rect", {
         width: "100%",
         height: "100%",

package/dist/svg/regular/search-icon.svg

@@ -1,9 +1 @@
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.a{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>search</title>
-      <mask id="mask0_1884_2837" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0">
-        <circle class="a" cx="9.813" cy="9.812" r="9.063" transform="translate(-3.056 4.62) rotate(-23.025)"/>
-        <line class="a" x1="16.221" y1="16.22" x2="23.25" y2="23.25"/>
-      </mask>
-      <g mask="url(#mask0_1884_2837)">
-        <rect width="24" height="24" fill="currentColor"/>
-      </g>
-    </svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.a{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>search</title><circle class="a" cx="9.813" cy="9.812" r="9.063" transform="translate(-3.056 4.62) rotate(-23.025)"/><line class="a" x1="16.221" y1="16.22" x2="23.25" y2="23.25"/></svg>

package/dist/useIconId.d.ts

@@ -0,0 +1 @@
+export declare function useIconId(id: string): string;

package/dist/useIconId.js

@@ -0,0 +1,8 @@
+import { useId } from '@reach/auto-id';
+import { useMemo } from 'react';
+export function useIconId(id) {
+  var generatedId = useId();
+  return useMemo(function () {
+    return "".concat(id, "-mask-").concat(generatedId);
+  }, [id, generatedId]);
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/gamut-icons",
   "description": "Icon library for codecademy.com",
-  "version": "8.1.2-alpha.b29ebf.0",
+  "version": "8.1.2-alpha.dfdc7f.0",
   "author": "Codecademy <dev@codecademy.com>",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -20,7 +20,7 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@codecademy/gamut-tests": "5.0.2-alpha.b29ebf.0",
+    "@codecademy/gamut-tests": "5.0.2-alpha.dfdc7f.0",
     "@svgr/cli": "5.5.0",
     "@testing-library/react": "^12.1.2",
     "svgo": "^1.3.2",
@@ -30,7 +30,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@codecademy/gamut-styles": "16.0.0-alpha.b29ebf.0",
+    "@codecademy/gamut-styles": "16.0.0-alpha.dfdc7f.0",
     "@codecademy/variance": "0.21.0"
   },
   "peerDependencies": {
@@ -39,5 +39,5 @@
     "lodash": "^4.17.5",
     "react": "^17.0.2 || ^18.2.0"
   },
-  "gitHead": "a9983fa03708e68f76790c6611226924447f9db5"
+  "gitHead": "db324ab5a0653f608185296be5f18e62d9d64fe1"
 }