@codecademy/gamut-icons 8.0.2-alpha.2c40eb.0 → 8.0.2-alpha.b6f449.0

package/dist/icons/regular/UploadIcon.js

@@ -32,19 +32,28 @@ export var UploadIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
-      id: titleId,
-      children: 'upload-bottom'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 1.5,
-      d: "M12.001 15.75v-12m4.5 4.5l-4.5-4.5-4.5 4.5m15.75 7.5v1.5a3 3 0 01-3 3h-16.5a3 3 0 01-3-3v-1.5"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: '',
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'upload-bottom'
+      }), /*#__PURE__*/_jsx("path", {
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5,
+        d: "M12.001 15.75v-12m4.5 4.5l-4.5-4.5-4.5 4.5m15.75 7.5v1.5a3 3 0 01-3 3h-16.5a3 3 0 01-3-3v-1.5"
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: '',
+      children: /*#__PURE__*/_jsx("rect", {
+        width: '24',
+        height: '24',
+        fill: 'currentColor'
+      })
     })]
   }));
 });

package/dist/icons/regular/VideoPlayerMovieIcon.js

@@ -32,26 +32,35 @@ export var VideoPlayerMovieIcon = /*#__PURE__*/React.forwardRef(function (_ref,
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
-      id: titleId,
-      children: 'video-player-movie'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      d: "M23.25 9v12.75a1.5 1.5 0 01-1.5 1.5H2.25a1.5 1.5 0 01-1.5-1.5V9m22.5-3H.75V2.25a1.5 1.5 0 011.5-1.5h19.5a1.5 1.5 0 011.5 1.5zM7.5 6L9 .75M15 6L16.5.75",
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 1.5
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M9.488 18.66a.856.856 0 01-1.238-.766v-5.788a.856.856 0 011.238-.766l5.789 2.895a.855.855 0 010 1.53z",
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 1.5
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: '',
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'video-player-movie'
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M23.25 9v12.75a1.5 1.5 0 01-1.5 1.5H2.25a1.5 1.5 0 01-1.5-1.5V9m22.5-3H.75V2.25a1.5 1.5 0 011.5-1.5h19.5a1.5 1.5 0 011.5 1.5zM7.5 6L9 .75M15 6L16.5.75",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M9.488 18.66a.856.856 0 01-1.238-.766v-5.788a.856.856 0 011.238-.766l5.789 2.895a.855.855 0 010 1.53z",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: '',
+      children: /*#__PURE__*/_jsx("rect", {
+        width: '24',
+        height: '24',
+        fill: 'currentColor'
+      })
     })]
   }));
 });

package/dist/icons/regular/ViewIcon.js

@@ -32,26 +32,35 @@ export var ViewIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
-      id: titleId,
-      children: 'view-1'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      d: "M12 5.251C7.969 5.183 3.8 8 1.179 10.885a1.663 1.663 0 000 2.226C3.743 15.935 7.9 18.817 12 18.748c4.1.069 8.258-2.813 10.824-5.637a1.663 1.663 0 000-2.226C20.2 8 16.031 5.183 12 5.251z",
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 1.5
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M15.75 12A3.75 3.75 0 1112 8.249 3.749 3.749 0 0115.75 12z",
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 1.5
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: '',
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'view-1'
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M12 5.251C7.969 5.183 3.8 8 1.179 10.885a1.663 1.663 0 000 2.226C3.743 15.935 7.9 18.817 12 18.748c4.1.069 8.258-2.813 10.824-5.637a1.663 1.663 0 000-2.226C20.2 8 16.031 5.183 12 5.251z",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M15.75 12A3.75 3.75 0 1112 8.249 3.749 3.749 0 0115.75 12z",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: '',
+      children: /*#__PURE__*/_jsx("rect", {
+        width: '24',
+        height: '24',
+        fill: 'currentColor'
+      })
     })]
   }));
 });

package/dist/icons/regular/ViewOffIcon.js

@@ -32,26 +32,35 @@ export var ViewOffIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
-      id: titleId,
-      children: 'view-off'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 1.5,
-      d: "M2.783 21l18.75-18M8.964 19.051A9.985 9.985 0 0012 19.5c4.1.069 8.258-2.813 10.824-5.637a1.663 1.663 0 000-2.226A20.568 20.568 0 0019.75 8.88m-5.337-2.598A9.549 9.549 0 0012 6c-4.031-.067-8.2 2.752-10.821 5.635a1.663 1.663 0 000 2.226 20.8 20.8 0 002.6 2.4M8.25 12.75A3.749 3.749 0 0112 9"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M15.75 12.749h0A3.75 3.75 0 0112 16.5",
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 1.5
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: '',
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'view-off'
+      }), /*#__PURE__*/_jsx("path", {
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5,
+        d: "M2.783 21l18.75-18M8.964 19.051A9.985 9.985 0 0012 19.5c4.1.069 8.258-2.813 10.824-5.637a1.663 1.663 0 000-2.226A20.568 20.568 0 0019.75 8.88m-5.337-2.598A9.549 9.549 0 0012 6c-4.031-.067-8.2 2.752-10.821 5.635a1.663 1.663 0 000 2.226 20.8 20.8 0 002.6 2.4M8.25 12.75A3.749 3.749 0 0112 9"
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M15.75 12.749h0A3.75 3.75 0 0112 16.5",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: '',
+      children: /*#__PURE__*/_jsx("rect", {
+        width: '24',
+        height: '24',
+        fill: 'currentColor'
+      })
     })]
   }));
 });

package/dist/icons/regular/VisaIcon.js

@@ -32,24 +32,33 @@ export var VisaIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
-      id: titleId,
-      children: 'visa'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      d: "M.504 3.5h23v17h-23z",
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M4.957 10h1.281l.362 3.6a.448.448 0 00.85.148L9.3 9.891m1.813.078l-.812 4.062m4.531-4.109s-1.375-.36-1.844.422.266 1.281.75 1.578 1.016.75.875 1.281-.734 1.313-2.3.766m3.687.062l1.88-3.789a.436.436 0 01.825.158l.3 3.569m-2.407-1.141h2.328",
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: '',
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'visa'
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M.504 3.5h23v17h-23z",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M4.957 10h1.281l.362 3.6a.448.448 0 00.85.148L9.3 9.891m1.813.078l-.812 4.062m4.531-4.109s-1.375-.36-1.844.422.266 1.281.75 1.578 1.016.75.875 1.281-.734 1.313-2.3.766m3.687.062l1.88-3.789a.436.436 0 01.825.158l.3 3.569m-2.407-1.141h2.328",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: '',
+      children: /*#__PURE__*/_jsx("rect", {
+        width: '24',
+        height: '24',
+        fill: 'currentColor'
+      })
     })]
   }));
 });

package/dist/icons/regular/YoutubeIcon.js

@@ -32,16 +32,25 @@ export var YoutubeIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
-      id: titleId,
-      children: 'social-video-youtube'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__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"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: '',
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'social-video-youtube'
+      }), /*#__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: '',
+      children: /*#__PURE__*/_jsx("rect", {
+        width: '24',
+        height: '24',
+        fill: 'currentColor'
+      })
     })]
   }));
 });

package/dist/icons/regular/ZoomIcon.js

@@ -32,19 +32,28 @@ export var ZoomIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
-      id: titleId,
-      children: 'zoom-in'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__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: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 1.5
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: '',
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'zoom-in'
+      }), /*#__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: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: '',
+      children: /*#__PURE__*/_jsx("rect", {
+        width: '24',
+        height: '24',
+        fill: 'currentColor'
+      })
     })]
   }));
 });

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

@@ -1 +1,9 @@
-<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>
+    <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>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/gamut-icons",
   "description": "Icon library for codecademy.com",
-  "version": "8.0.2-alpha.2c40eb.0",
+  "version": "8.0.2-alpha.b6f449.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.2c40eb.0",
+    "@codecademy/gamut-tests": "5.0.2-alpha.b6f449.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.2c40eb.0",
+    "@codecademy/gamut-styles": "16.0.0-alpha.b6f449.0",
     "@codecademy/variance": "0.21.0"
   },
   "peerDependencies": {
@@ -39,5 +39,5 @@
     "lodash": "^4.17.5",
     "react": "^17.0.2 || ^18.2.0"
   },
-  "gitHead": "511889a0ea31f4e8c1847c66934719eab6754b9d"
+  "gitHead": "f38c7bd60707a890eb0b805646bfa3e7049e50a9"
 }