@codecademy/gamut

73.6.173.6.2-alpha.981230.0
~

Modified (2 files)

Index: package/dist/Loading/Spinner.js
===================================================================
--- package/dist/Loading/Spinner.js
+++ package/dist/Loading/Spinner.js
@@ -1,5 +1,28 @@
+import _styled from "@emotion/styled/base";
+import { css } from '@codecademy/gamut-styles';
+import { keyframes } from '@emotion/react';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Using keyframes since the <animationTransform> element doesn't animate in Safari
+const rotate = keyframes({
+  from: {
+    transform: 'rotate(0deg)'
+  },
+  to: {
+    transform: 'rotate(360deg)'
+  }
+});
+const SpinnerRing = /*#__PURE__*/_styled("g", {
+  target: "e1n61yq00",
+  label: "SpinnerRing"
+})(css({
+  animation: `${rotate} 1s linear infinite`,
+  transformBox: 'view-box',
+  transformOrigin: 'center',
+  '@media (prefers-reduced-motion: reduce)': {
+    animationDuration: '3s'
+  }
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9Mb2FkaW5nL1NwaW5uZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWVvQiIsImZpbGUiOiIuLi8uLi9zcmMvTG9hZGluZy9TcGlubmVyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgeyBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBGdW5jdGlvbkNvbXBvbmVudCwgU1ZHUHJvcHMgfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCB0eXBlIFNwaW5uZXJQcm9wcyA9IFNWR1Byb3BzPFNWR1NWR0VsZW1lbnQ+ICYge1xuICBzaXplPzogbnVtYmVyIHwgc3RyaW5nO1xufTtcblxuLy8gVXNpbmcga2V5ZnJhbWVzIHNpbmNlIHRoZSA8YW5pbWF0aW9uVHJhbnNmb3JtPiBlbGVtZW50IGRvZXNuJ3QgYW5pbWF0ZSBpbiBTYWZhcmlcbmNvbnN0IHJvdGF0ZSA9IGtleWZyYW1lcyh7XG4gIGZyb206IHsgdHJhbnNmb3JtOiAncm90YXRlKDBkZWcpJyB9LFxuICB0bzogeyB0cmFuc2Zvcm06ICdyb3RhdGUoMzYwZGVnKScgfSxcbn0pO1xuXG5jb25zdCBTcGlubmVyUmluZyA9IHN0eWxlZC5nKFxuICBjc3Moe1xuICAgIGFuaW1hdGlvbjogYCR7cm90YXRlfSAxcyBsaW5lYXIgaW5maW5pdGVgLFxuICAgIHRyYW5zZm9ybUJveDogJ3ZpZXctYm94JyxcbiAgICB0cmFuc2Zvcm1PcmlnaW46ICdjZW50ZXInLFxuICAgICdAbWVkaWEgKHByZWZlcnMtcmVkdWNlZC1tb3Rpb246IHJlZHVjZSknOiB7XG4gICAgICBhbmltYXRpb25EdXJhdGlvbjogJzNzJyxcbiAgICB9LFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IFNwaW5uZXI6IEZ1bmN0aW9uQ29tcG9uZW50PFNwaW5uZXJQcm9wcz4gPSAoe1xuICBzaXplID0gMjQsXG4gIC4uLnByb3BzXG59KSA9PiB7XG4gIHJldHVybiAoXG4gICAgPHN2ZyBoZWlnaHQ9e3NpemV9IHZpZXdCb3g9XCIwIDAgMTAwMCAxMDAwXCIgd2lkdGg9e3NpemV9IHsuLi5wcm9wc30+XG4gICAgICA8dGl0bGU+U3Bpbm5lcjwvdGl0bGU+XG4gICAgICA8U3Bpbm5lclJpbmc+XG4gICAgICAgIDxjaXJjbGUgY3g9XCI5MzcuNVwiIGN5PVwiNTAwXCIgZmlsbD1cImN1cnJlbnRDb2xvclwiIHI9XCI2Mi41XCIgLz5cbiAgICAgICAgPHBhdGhcbiAgICAgICAgICBkPVwiTTEwMDAgNTAwSDg3NWMwLTIyLjItMS45LTQ0LTUuNi02NS4xbDEyMy4xLTIxLjdoLjFjNC44IDI4LjIgNy40IDU3LjIgNy40IDg2Ljh6XCJcbiAgICAgICAgICBmaWxsPVwiY3VycmVudENvbG9yXCJcbiAgICAgICAgLz5cbiAgICAgICAgPHBhdGhcbiAgICAgICAgICBkPVwiTTk5Mi41IDQxMy4ybC0xMjMuMSAyMS43Yy0zLjgtMjEuOC05LjUtNDIuOS0xNi45LTYzLjJMOTY5LjkgMzI5bC4xLS4xYzkuOCAyNy4xIDE3LjQgNTUuMiAyMi41IDg0LjN6XCJcbiAgICAgICAgICBmaWxsPVwiY3VycmVudENvbG9yXCJcbiAgICAgICAgICBvcGFjaXR5PVwiLjk2XCJcbiAgICAgICAgLz5cbiAgICAgICAgPHBhdGhcbiAgICAgICAgICBkPVwiTTk2OS45IDMyOC45bC0uMS4xLTExNy4zIDQyLjdjLTcuNS0yMC42LTE2LjgtNDAuNC0yNy43LTU5LjJMOTMzIDI0OS45bC4xLS4xYTUwMy4zIDUwMy4zIDAgMCAxIDM2LjggNzkuMXpcIlxuICAgICAgICAgIGZpbGw9XCJjdXJyZW50Q29sb3JcIlxuICAgICAgICAgIG9wYWNpdHk9XCIuOTJcIlxuICAgICAgICAvPlxuICAgICAgICA8cGF0aFxuICAgICAgICAgIGQ9XCJNOTMzLjEgMjQ5LjlsLTEwOC4yIDYyLjZjLTEwLjktMTguOS0yMy42LTM2LjktMzcuNi01My41bDk1LjctODAuNGMxOC43IDIyLjIgMzUuNCA0Ni4xIDUwLjEgNzEuM3pcIlxuICAgICAgICAgIGZpbGw9XCJjdXJyZW50Q29sb3JcIlxuICAgICAgICAgIG9wYWNpdHk9XCIuODhcIlxuICAgICAgICAvPlxuICAgICAgICA8cGF0aFxuICAgICAgICAgIGQ9XCJNODgzIDE3OC42TDc4Ny4zIDI1OWMtMTQuMS0xNi43LTI5LjUtMzIuMi00Ni4yLTQ2LjJsODAuMy05NS44YzIyLjMgMTguNyA0Mi45IDM5LjMgNjEuNiA2MS42elwiXG4gICAgICAgICAgZmlsbD1cImN1cnJlbnRDb2xvclwiXG4gICAgICAgICAgb3BhY2l0eT1cIi44NFwiXG4gICAgICAgIC8+XG4gICAgICAgIDxwYXRoXG4gICAgICAgICAgZD1cIk04MjEuNCAxMTYuOUw3NDEgMjEyLjdjLTE2LjctMTQtMzQuNi0yNi42LTUzLjUtMzcuNmw2Mi40LTEwOC4yLjEtLjFjMjUuMyAxNC44IDQ5LjIgMzEuNSA3MS40IDUwLjF6XCJcbiAgICAgICAgICBmaWxsPVwiY3VycmVudENvbG9yXCJcbiAgICAgICAgICBvcGFjaXR5PVwiLjhcIlxuICAgICAgICAvPlxuICAgICAgICA8cGF0aFxuICAgICAgICAgIGQ9XCJNNzUwLjEgNjYuOWwtNjIuNSAxMDguMmMtMTguOC0xMC45LTM4LjYtMjAuMS01OS4yLTI3LjdMNjcxIDMwLjFsLjEtLjFjMjcuNSAxMC4xIDUzLjkgMjIuNCA3OSAzNi45elwiXG4gICAgICAgICAgZmlsbD1cImN1cnJlbnRDb2xvclwiXG4gICAgICAgICAgb3BhY2l0eT1cIi43NlwiXG4gICAgICAgIC8+XG4gICAgICAgIDxwYXRoXG4gICAgICAgICAgZD1cIk02NzEuMSAzMGwtLjEuMS00Mi43IDExNy40Yy0yMC4zLTcuNC00MS40LTEzLjEtNjMuMi0xNi45bDIxLjctMTIzdi0uMWMyOS4xIDUuMSA1Ny4yIDEyLjcgODQuMyAyMi41elwiXG4gICAgICAgICAgZmlsbD1cImN1cnJlbnRDb2xvclwiXG4gICAgICAgICAgb3BhY2l0eT1cIi43MlwiXG4gICAgICAgIC8+XG4gICAgICAgIDxwYXRoXG4gICAgICAgICAgZD1cIk01ODYuOCA3LjVsLTIxLjcgMTIzLjFjLTIxLjEtMy43LTQyLjktNS42LTY1LjEtNS42VjBjMjkuNiAwIDU4LjYgMi42IDg2LjggNy41elwiXG4gICAgICAgICAgZmlsbD1cImN1cnJlbnRDb2xvclwiXG4gICAgICAgICAgb3BhY2l0eT1cIi42OFwiXG4gICAgICAgIC8+XG4gICAgICAgIDxwYXRoXG4gICAgICAgICAgZD1cIk01MDAgMHYxMjVjLTIyLjIgMC00NCAxLjktNjUuMSA1LjZsLTIxLjctMTIzdi0uMUM0NDEuNCAyLjYgNDcwLjQgMCA1MDAgMHpcIlxuICAgICAgICAgIGZpbGw9XCJjdXJyZW50Q29sb3JcIlxuICAgICAgICAgIG9wYWNpdHk9XCIuNjRcIlxuICAgICAgICAvPlxuICAgICAgICA8cGF0aFxuICAgICAgICAgIGQ9XCJNNDEzLjIgNy42bDIxLjcgMTIzLjFjLTIxLjggMy44LTQyLjkgOS41LTYzLjIgMTYuOUwzMjkgMzAuMWwtLjEtLjFjMjcuMS05LjkgNTUuMi0xNy40IDg0LjMtMjIuNHpcIlxuICAgICAgICAgIGZpbGw9XCJjdXJyZW50Q29sb3JcIlxuICAgICAgICAgIG9wYWNpdHk9XCIuNlwiXG4gICAgICAgIC8+XG4gICAgICAgIDxwYXRoXG4gICAgICAgICAgZD1cIk0zMjkgMzAuMWw0Mi43IDExNy40Yy0yMC42IDcuNS00MC40IDE2LjgtNTkuMiAyNy43TDI1MCA2N2wtLjEtLjFDMjc1IDUyLjQgMzAxLjQgNDAuMSAzMjkgMzAuMXpcIlxuICAgICAgICAgIGZpbGw9XCJjdXJyZW50Q29sb3JcIlxuICAgICAgICAgIG9wYWNpdHk9XCIuNTZcIlxuICAgICAgICAvPlxuICAgICAgICA8cGF0aFxuICAgICAgICAgIGQ9XCJNMzcxLjcgODUyLjVMMzI5IDk2OS45bC0uMS4xYy0yNy42LTEwLTUzLjktMjIuNC03OS0zNi45bC4xLS4xIDYyLjUtMTA4LjJjMTguNyAxMC45IDM4LjYgMjAuMSA1OS4yIDI3Ljd6XCJcbiAgICAgICAgICBmaWxsPVwiY3VycmVudENvbG9yXCJcbiAgICAgICAgICBvcGFjaXR5PVwiLjA0XCJcbiAgICAgICAgLz5cbiAgICAgICAgPHBhdGhcbiAgICAgICAgICBkPVwiTTI1MCA2N2w2Mi41IDEwOC4yYy0xOC45IDExLTM2LjkgMjMuNi01My41IDM3LjZMMTc4LjYgMTE3YzIyLjItMTguNyA0Ni4xLTM1LjQgNzEuNC01MHpcIlxuICAgICAgICAgIGZpbGw9XCJjdXJyZW50Q29sb3JcIlxuICAgICAgICAgIG9wYWNpdHk9XCIuNTJcIlxuICAgICAgICAvPlxuICAgICAgICA8cGF0aFxuICAgICAgICAgIGQ9XCJNMzEyLjUgODI0LjhMMjUwIDkzM2wtLjEuMWMtMjUuMi0xNC42LTQ5LjEtMzEuNC03MS40LTUwLjFsODAuNC05NS43YzE2LjcgMTMuOSAzNC42IDI2LjYgNTMuNiAzNy41elwiXG4gICAgICAgICAgZmlsbD1cImN1cnJlbnRDb2xvclwiXG4gICAgICAgICAgb3BhY2l0eT1cIi4wOFwiXG4gICAgICAgIC8+XG4gICAgICAgIDxwYXRoXG4gICAgICAgICAgZD1cIk0xNzguNiAxMTdsODAuNCA5NS44Yy0xNi43IDE0LjEtMzIuMiAyOS41LTQ2LjIgNDYuMkwxMTcgMTc4LjZjMTguNy0yMi4zIDM5LjMtNDIuOSA2MS42LTYxLjZ6XCJcbiAgICAgICAgICBmaWxsPVwiY3VycmVudENvbG9yXCJcbiAgICAgICAgICBvcGFjaXR5PVwiLjQ4XCJcbiAgICAgICAgLz5cbiAgICAgICAgPHBhdGhcbiAgICAgICAgICBkPVwiTTI1OC45IDc4Ny4yTDE3OC42IDg4M2MtMjIuMy0xOC43LTQyLjktMzkuMy02MS42LTYxLjZsOTUuOC04MC4zYzE0IDE2LjcgMjkuNCAzMi4xIDQ2LjEgNDYuMXpcIlxuICAgICAgICAgIGZpbGw9XCJjdXJyZW50Q29sb3JcIlxuICAgICAgICAgIG9wYWNpdHk9XCIuMTJcIlxuICAgICAgICAvPlxuICAgICAgICA8cGF0aFxuICAgICAgICAgIGQ9XCJNMTE3IDE3OC42bDk1LjggODAuNGMtMTQgMTYuNi0yNi42IDM0LjUtMzcuNiA1My41TDY3IDI1MGwtLjEtLjFjMTQuNy0yNS4yIDMxLjQtNDkuMSA1MC4xLTcxLjN6XCJcbiAgICAgICAgICBmaWxsPVwiY3VycmVudENvbG9yXCJcbiAgICAgICAgICBvcGFjaXR5PVwiLjQ0XCJcbiAgICAgICAgLz5cbiAgICAgICAgPHBhdGhcbiAgICAgICAgICBkPVwiTTIxMi44IDc0MS4xTDExNyA4MjEuNGMtMTguNy0yMi4yLTM1LjQtNDYuMS01MC4xLTcxLjRsLjEtLjEgMTA4LjItNjIuNGMxMSAxOSAyMy42IDM2LjkgMzcuNiA1My42elwiXG4gICAgICAgICAgZmlsbD1cImN1cnJlbnRDb2xvclwiXG4gICAgICAgICAgb3BhY2l0eT1cIi4xNlwiXG4gICAgICAgIC8+XG4gICAgICAgIDxwYXRoXG4gICAgICAgICAgZD1cIk02NyAyNTBsMTA4LjIgNjIuNWMtMTAuOSAxOC44LTIwLjEgMzguNi0yNy43IDU5LjJMMzAuMSAzMjlsLS4xLS4xYzEwLTI3LjYgMjIuNC01My45IDM2LjktNzlsLjEuMXpcIlxuICAgICAgICAgIGZpbGw9XCJjdXJyZW50Q29sb3JcIlxuICAgICAgICAgIG9wYWNpdHk9XCIuNFwiXG4gICAgICAgIC8+XG4gICAgICAgIDxwYXRoXG4gICAgICAgICAgZD1cIk0xNzUuMiA2ODcuNkw2NyA3NTBsLS4xLjFDNTIuNCA3MjUgNDAgNjk4LjcgMzAgNjcxLjFsLjEtLjEgMTE3LjQtNDIuN2M3LjYgMjAuNiAxNi44IDQwLjUgMjcuNyA1OS4zelwiXG4gICAgICAgICAgZmlsbD1cImN1cnJlbnRDb2xvclwiXG4gICAgICAgICAgb3BhY2l0eT1cIi4yXCJcbiAgICAgICAgLz5cbiAgICAgICAgPHBhdGhcbiAgICAgICAgICBkPVwiTTMwLjEgMzI5bDExNy40IDQyLjdjLTcuNCAyMC4zLTEzLjEgNDEuNC0xNi45IDYzLjJsLTEyMy0yMS43aC0uMWM1LjEtMjkgMTIuNi01Ny4yIDIyLjUtODQuMmguMXpcIlxuICAgICAgICAgIGZpbGw9XCJjdXJyZW50Q29sb3JcIlxuICAgICAgICAgIG9wYWNpdHk9XCIuMzZcIlxuICAgICAgICAvPlxuICAgICAgICA8cGF0aFxuICAgICAgICAgIGQ9XCJNMTQ3LjUgNjI4LjNMMzAuMSA2NzFsLS4xLjFjLTkuOS0yNy4xLTE3LjQtNTUuMi0yMi41LTg0LjJoLjFsMTIzLjEtMjEuN2MzLjcgMjEuNyA5LjQgNDIuOCAxNi44IDYzLjF6XCJcbiAgICAgICAgICBmaWxsPVwiY3VycmVudENvbG9yXCJcbiAgICAgICAgICBvcGFjaXR5PVwiLjI0XCJcbiAgICAgICAgLz5cbiAgICAgICAgPHBhdGhcbiAgICAgICAgICBkPVwiTTcuNiA0MTMuMmwxMjMuMSAyMS43Yy0zLjcgMjEuMS01LjYgNDIuOS01LjYgNjUuMUgwYzAtMjkuNiAyLjYtNTguNiA3LjYtODYuOHpcIlxuICAgICAgICAgIGZpbGw9XCJjdXJyZW50Q29sb3JcIlxuICAgICAgICAgIG9wYWNpdHk9XCIuMzJcIlxuICAgICAgICAvPlxuICAgICAgICA8cGF0aFxuICAgICAgICAgIGQ9XCJNMTMwLjYgNTY1LjFsLTEyMyAyMS43aC0uMUE1MDYuNyA1MDYuNyAwIDAgMSAwIDUwMGgxMjVjMCAyMi4yIDEuOSA0NCA1LjYgNjUuMXpcIlxuICAgICAgICAgIGZpbGw9XCJjdXJyZW50Q29sb3JcIlxuICAgICAgICAgIG9wYWNpdHk9XCIuMjhcIlxuICAgICAgICAvPlxuICAgICAgPC9TcGlubmVyUmluZz5cbiAgICA8L3N2Zz5cbiAgKTtcbn07XG4iXX0= */");
 export const Spinner = ({
   size = 24,
   ...props
 }) => {
@@ -9,119 +32,113 @@
     width: size,
     ...props,
     children: [/*#__PURE__*/_jsx("title", {
       children: "Spinner"
-    }), /*#__PURE__*/_jsx("circle", {
-      cx: "937.5",
-      cy: "500",
-      fill: "currentColor",
-      r: "62.5"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M1000 500H875c0-22.2-1.9-44-5.6-65.1l123.1-21.7h.1c4.8 28.2 7.4 57.2 7.4 86.8z",
-      fill: "currentColor"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M992.5 413.2l-123.1 21.7c-3.8-21.8-9.5-42.9-16.9-63.2L969.9 329l.1-.1c9.8 27.1 17.4 55.2 22.5 84.3z",
-      fill: "currentColor",
-      opacity: ".96"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M969.9 328.9l-.1.1-117.3 42.7c-7.5-20.6-16.8-40.4-27.7-59.2L933 249.9l.1-.1a503.3 503.3 0 0 1 36.8 79.1z",
-      fill: "currentColor",
-      opacity: ".92"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M933.1 249.9l-108.2 62.6c-10.9-18.9-23.6-36.9-37.6-53.5l95.7-80.4c18.7 22.2 35.4 46.1 50.1 71.3z",
-      fill: "currentColor",
-      opacity: ".88"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M883 178.6L787.3 259c-14.1-16.7-29.5-32.2-46.2-46.2l80.3-95.8c22.3 18.7 42.9 39.3 61.6 61.6z",
-      fill: "currentColor",
-      opacity: ".84"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M821.4 116.9L741 212.7c-16.7-14-34.6-26.6-53.5-37.6l62.4-108.2.1-.1c25.3 14.8 49.2 31.5 71.4 50.1z",
-      fill: "currentColor",
-      opacity: ".8"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M750.1 66.9l-62.5 108.2c-18.8-10.9-38.6-20.1-59.2-27.7L671 30.1l.1-.1c27.5 10.1 53.9 22.4 79 36.9z",
-      fill: "currentColor",
-      opacity: ".76"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M671.1 30l-.1.1-42.7 117.4c-20.3-7.4-41.4-13.1-63.2-16.9l21.7-123v-.1c29.1 5.1 57.2 12.7 84.3 22.5z",
-      fill: "currentColor",
-      opacity: ".72"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M586.8 7.5l-21.7 123.1c-21.1-3.7-42.9-5.6-65.1-5.6V0c29.6 0 58.6 2.6 86.8 7.5z",
-      fill: "currentColor",
-      opacity: ".68"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M500 0v125c-22.2 0-44 1.9-65.1 5.6l-21.7-123v-.1C441.4 2.6 470.4 0 500 0z",
-      fill: "currentColor",
-      opacity: ".64"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M413.2 7.6l21.7 123.1c-21.8 3.8-42.9 9.5-63.2 16.9L329 30.1l-.1-.1c27.1-9.9 55.2-17.4 84.3-22.4z",
-      fill: "currentColor",
-      opacity: ".6"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M329 30.1l42.7 117.4c-20.6 7.5-40.4 16.8-59.2 27.7L250 67l-.1-.1C275 52.4 301.4 40.1 329 30.1z",
-      fill: "currentColor",
-      opacity: ".56"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M371.7 852.5L329 969.9l-.1.1c-27.6-10-53.9-22.4-79-36.9l.1-.1 62.5-108.2c18.7 10.9 38.6 20.1 59.2 27.7z",
-      fill: "currentColor",
-      opacity: ".04"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M250 67l62.5 108.2c-18.9 11-36.9 23.6-53.5 37.6L178.6 117c22.2-18.7 46.1-35.4 71.4-50z",
-      fill: "currentColor",
-      opacity: ".52"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M312.5 824.8L250 933l-.1.1c-25.2-14.6-49.1-31.4-71.4-50.1l80.4-95.7c16.7 13.9 34.6 26.6 53.6 37.5z",
-      fill: "currentColor",
-      opacity: ".08"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M178.6 117l80.4 95.8c-16.7 14.1-32.2 29.5-46.2 46.2L117 178.6c18.7-22.3 39.3-42.9 61.6-61.6z",
-      fill: "currentColor",
-      opacity: ".48"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M258.9 787.2L178.6 883c-22.3-18.7-42.9-39.3-61.6-61.6l95.8-80.3c14 16.7 29.4 32.1 46.1 46.1z",
-      fill: "currentColor",
-      opacity: ".12"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M117 178.6l95.8 80.4c-14 16.6-26.6 34.5-37.6 53.5L67 250l-.1-.1c14.7-25.2 31.4-49.1 50.1-71.3z",
-      fill: "currentColor",
-      opacity: ".44"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M212.8 741.1L117 821.4c-18.7-22.2-35.4-46.1-50.1-71.4l.1-.1 108.2-62.4c11 19 23.6 36.9 37.6 53.6z",
-      fill: "currentColor",
-      opacity: ".16"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M67 250l108.2 62.5c-10.9 18.8-20.1 38.6-27.7 59.2L30.1 329l-.1-.1c10-27.6 22.4-53.9 36.9-79l.1.1z",
-      fill: "currentColor",
-      opacity: ".4"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M175.2 687.6L67 750l-.1.1C52.4 725 40 698.7 30 671.1l.1-.1 117.4-42.7c7.6 20.6 16.8 40.5 27.7 59.3z",
-      fill: "currentColor",
-      opacity: ".2"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M30.1 329l117.4 42.7c-7.4 20.3-13.1 41.4-16.9 63.2l-123-21.7h-.1c5.1-29 12.6-57.2 22.5-84.2h.1z",
-      fill: "currentColor",
-      opacity: ".36"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M147.5 628.3L30.1 671l-.1.1c-9.9-27.1-17.4-55.2-22.5-84.2h.1l123.1-21.7c3.7 21.7 9.4 42.8 16.8 63.1z",
-      fill: "currentColor",
-      opacity: ".24"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M7.6 413.2l123.1 21.7c-3.7 21.1-5.6 42.9-5.6 65.1H0c0-29.6 2.6-58.6 7.6-86.8z",
-      fill: "currentColor",
-      opacity: ".32"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M130.6 565.1l-123 21.7h-.1A506.7 506.7 0 0 1 0 500h125c0 22.2 1.9 44 5.6 65.1z",
-      fill: "currentColor",
-      opacity: ".28"
-    }), /*#__PURE__*/_jsx("animateTransform", {
-      attributeName: "transform",
-      begin: "0",
-      dur: "1s",
-      from: "0",
-      repeatCount: "indefinite",
-      to: "360",
-      type: "rotate"
+    }), /*#__PURE__*/_jsxs(SpinnerRing, {
+      children: [/*#__PURE__*/_jsx("circle", {
+        cx: "937.5",
+        cy: "500",
+        fill: "currentColor",
+        r: "62.5"
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M1000 500H875c0-22.2-1.9-44-5.6-65.1l123.1-21.7h.1c4.8 28.2 7.4 57.2 7.4 86.8z",
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M992.5 413.2l-123.1 21.7c-3.8-21.8-9.5-42.9-16.9-63.2L969.9 329l.1-.1c9.8 27.1 17.4 55.2 22.5 84.3z",
+        fill: "currentColor",
+        opacity: ".96"
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M969.9 328.9l-.1.1-117.3 42.7c-7.5-20.6-16.8-40.4-27.7-59.2L933 249.9l.1-.1a503.3 503.3 0 0 1 36.8 79.1z",
+        fill: "currentColor",
+        opacity: ".92"
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M933.1 249.9l-108.2 62.6c-10.9-18.9-23.6-36.9-37.6-53.5l95.7-80.4c18.7 22.2 35.4 46.1 50.1 71.3z",
+        fill: "currentColor",
+        opacity: ".88"
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M883 178.6L787.3 259c-14.1-16.7-29.5-32.2-46.2-46.2l80.3-95.8c22.3 18.7 42.9 39.3 61.6 61.6z",
+        fill: "currentColor",
+        opacity: ".84"
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M821.4 116.9L741 212.7c-16.7-14-34.6-26.6-53.5-37.6l62.4-108.2.1-.1c25.3 14.8 49.2 31.5 71.4 50.1z",
+        fill: "currentColor",
+        opacity: ".8"
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M750.1 66.9l-62.5 108.2c-18.8-10.9-38.6-20.1-59.2-27.7L671 30.1l.1-.1c27.5 10.1 53.9 22.4 79 36.9z",
+        fill: "currentColor",
+        opacity: ".76"
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M671.1 30l-.1.1-42.7 117.4c-20.3-7.4-41.4-13.1-63.2-16.9l21.7-123v-.1c29.1 5.1 57.2 12.7 84.3 22.5z",
+        fill: "currentColor",
+        opacity: ".72"
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M586.8 7.5l-21.7 123.1c-21.1-3.7-42.9-5.6-65.1-5.6V0c29.6 0 58.6 2.6 86.8 7.5z",
+        fill: "currentColor",
+        opacity: ".68"
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M500 0v125c-22.2 0-44 1.9-65.1 5.6l-21.7-123v-.1C441.4 2.6 470.4 0 500 0z",
+        fill: "currentColor",
+        opacity: ".64"
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M413.2 7.6l21.7 123.1c-21.8 3.8-42.9 9.5-63.2 16.9L329 30.1l-.1-.1c27.1-9.9 55.2-17.4 84.3-22.4z",
+        fill: "currentColor",
+        opacity: ".6"
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M329 30.1l42.7 117.4c-20.6 7.5-40.4 16.8-59.2 27.7L250 67l-.1-.1C275 52.4 301.4 40.1 329 30.1z",
+        fill: "currentColor",
+        opacity: ".56"
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M371.7 852.5L329 969.9l-.1.1c-27.6-10-53.9-22.4-79-36.9l.1-.1 62.5-108.2c18.7 10.9 38.6 20.1 59.2 27.7z",
+        fill: "currentColor",
+        opacity: ".04"
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M250 67l62.5 108.2c-18.9 11-36.9 23.6-53.5 37.6L178.6 117c22.2-18.7 46.1-35.4 71.4-50z",
+        fill: "currentColor",
+        opacity: ".52"
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M312.5 824.8L250 933l-.1.1c-25.2-14.6-49.1-31.4-71.4-50.1l80.4-95.7c16.7 13.9 34.6 26.6 53.6 37.5z",
+        fill: "currentColor",
+        opacity: ".08"
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M178.6 117l80.4 95.8c-16.7 14.1-32.2 29.5-46.2 46.2L117 178.6c18.7-22.3 39.3-42.9 61.6-61.6z",
+        fill: "currentColor",
+        opacity: ".48"
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M258.9 787.2L178.6 883c-22.3-18.7-42.9-39.3-61.6-61.6l95.8-80.3c14 16.7 29.4 32.1 46.1 46.1z",
+        fill: "currentColor",
+        opacity: ".12"
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M117 178.6l95.8 80.4c-14 16.6-26.6 34.5-37.6 53.5L67 250l-.1-.1c14.7-25.2 31.4-49.1 50.1-71.3z",
+        fill: "currentColor",
+        opacity: ".44"
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M212.8 741.1L117 821.4c-18.7-22.2-35.4-46.1-50.1-71.4l.1-.1 108.2-62.4c11 19 23.6 36.9 37.6 53.6z",
+        fill: "currentColor",
+        opacity: ".16"
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M67 250l108.2 62.5c-10.9 18.8-20.1 38.6-27.7 59.2L30.1 329l-.1-.1c10-27.6 22.4-53.9 36.9-79l.1.1z",
+        fill: "currentColor",
+        opacity: ".4"
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M175.2 687.6L67 750l-.1.1C52.4 725 40 698.7 30 671.1l.1-.1 117.4-42.7c7.6 20.6 16.8 40.5 27.7 59.3z",
+        fill: "currentColor",
+        opacity: ".2"
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M30.1 329l117.4 42.7c-7.4 20.3-13.1 41.4-16.9 63.2l-123-21.7h-.1c5.1-29 12.6-57.2 22.5-84.2h.1z",
+        fill: "currentColor",
+        opacity: ".36"
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M147.5 628.3L30.1 671l-.1.1c-9.9-27.1-17.4-55.2-22.5-84.2h.1l123.1-21.7c3.7 21.7 9.4 42.8 16.8 63.1z",
+        fill: "currentColor",
+        opacity: ".24"
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M7.6 413.2l123.1 21.7c-3.7 21.1-5.6 42.9-5.6 65.1H0c0-29.6 2.6-58.6 7.6-86.8z",
+        fill: "currentColor",
+        opacity: ".32"
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M130.6 565.1l-123 21.7h-.1A506.7 506.7 0 0 1 0 500h125c0 22.2 1.9 44 5.6 65.1z",
+        fill: "currentColor",
+        opacity: ".28"
+      })]
     })]
   });
 };
\ No newline at end of file
Index: package/package.json
===================================================================
--- package/package.json
+++ package/package.json
@@ -1,16 +1,16 @@
 {
   "name": "@codecademy/gamut",
   "description": "Styleguide & Component library for Codecademy",
-  "version": "73.6.1",
+  "version": "73.6.2-alpha.981230.0",
   "author": "Codecademy Engineering <[email protected]>",
   "bin": "./bin/gamut.mjs",
   "dependencies": {
-    "@codecademy/gamut-icons": "10.2.0",
-    "@codecademy/gamut-illustrations": "1.1.0",
-    "@codecademy/gamut-patterns": "1.1.0",
-    "@codecademy/gamut-styles": "21.2.0",
-    "@codecademy/variance": "1.1.0",
+    "@codecademy/gamut-icons": "10.2.1-alpha.981230.0",
+    "@codecademy/gamut-illustrations": "1.1.1-alpha.981230.0",
+    "@codecademy/gamut-patterns": "1.1.1-alpha.981230.0",
+    "@codecademy/gamut-styles": "21.2.1-alpha.981230.0",
+    "@codecademy/variance": "1.1.1-alpha.981230.0",
     "@formatjs/intl-locale": "5.3.1",
     "@react-aria/interactions": "3.25.0",
     "@types/marked": "^4.0.8",
     "@vidstack/react": "^1.12.12",