@codecademy/brand 5.11.0-alpha.93b754c9d.0 → 5.11.0

package/dist/AppBar/index.d.ts

@@ -1,6 +1,6 @@
 import { ContentContainer, WithChildrenProp } from '@codecademy/gamut';
 import * as React from 'react';
-export interface AppBarProps extends WithChildrenProp, Pick<React.ComponentProps<typeof ContentContainer>, 'aria-label' | 'as'> {
+export interface AppBarProps extends WithChildrenProp, Pick<React.ComponentProps<typeof ContentContainer>, 'aria-label' | 'as' | 'className'> {
     /**
      * Whether the container should be larger than the default content size.
      */

package/dist/AppBar/index.js

@@ -2,19 +2,17 @@ import { ContentContainer } from '@codecademy/gamut';
 import * as React from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const AppBar = ({
-  'aria-label': ariaLabel,
-  as,
   wide,
-  children
+  children,
+  ...rest
 }) => {
   return /*#__PURE__*/_jsx(ContentContainer, {
-    "aria-label": ariaLabel,
-    as: as,
     display: "flex",
     alignItems: "center",
     height: "100%",
     size: wide ? 'wide' : 'medium',
     zIndex: 14,
+    ...rest,
     children: children
   });
 };

package/dist/CoachingSessionCard/index.js

@@ -1,88 +1,65 @@
-import { Box, Card, FillButton, FlexBox, StrokeButton, Text, TextButton } from '@codecademy/gamut';
+import { Card, FillButton, FlexBox, StrokeButton, Text, TextButton } from '@codecademy/gamut';
 import { CalendarIcon, ClockIcon } from '@codecademy/gamut-icons';
 import { formatInTimeZone } from 'date-fns-tz';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const formatTime = (timeString, format) => {
   return formatInTimeZone(new Date(timeString), Intl.DateTimeFormat().resolvedOptions().timeZone, format);
 };
-const formatDaysLeft = timeString => {
-  const start = new Date(timeString).getTime();
-  if (Number.isNaN(start)) return '';
-  const now = Date.now();
-  const dayInMs = 24 * 60 * 60 * 1000;
-  const daysLeft = Math.max(0, Math.ceil((start - now) / dayInMs));
-  if (daysLeft === 0) {
-    return 'today';
-  }
-  return `in ${daysLeft} day${daysLeft === 1 ? '' : 's'}`;
-};
 export const CoachingSessionCard = ({
   session,
   ctas
 }) => /*#__PURE__*/_jsx(Card, {
   borderRadius: "xl",
   p: 32,
-  border: 1,
-  borderColor: "border-primary",
+  height: "auto",
   children: /*#__PURE__*/_jsxs(FlexBox, {
     column: true,
-    justifyContent: "space-between",
-    height: "100%",
-    children: [/*#__PURE__*/_jsxs(Box, {
-      children: [/*#__PURE__*/_jsxs(Text, {
-        mb: 4,
-        children: [/*#__PURE__*/_jsx(Text, {
-          fontWeight: "bold",
-          children: session.coachOfferingCategoryName
-        }), ' ', "coaching session with", ' ', /*#__PURE__*/_jsx(Text, {
-          fontWeight: "bold",
-          children: session.participantName
-        }), /*#__PURE__*/_jsxs(Text, {
-          fontWeight: "bold",
-          children: [" ", formatDaysLeft(session.startTime)]
+    children: [/*#__PURE__*/_jsxs(Text, {
+      mb: 12,
+      children: [/*#__PURE__*/_jsx(Text, {
+        fontWeight: "bold",
+        children: session.coachOfferingCategoryName
+      }), ' ', "coaching session with", ' ', /*#__PURE__*/_jsx(Text, {
+        fontWeight: "bold",
+        children: session.participantName
+      })]
+    }), /*#__PURE__*/_jsxs(FlexBox, {
+      alignItems: "center",
+      gap: 16,
+      mb: 24,
+      children: [/*#__PURE__*/_jsxs(FlexBox, {
+        alignItems: "center",
+        gap: 8,
+        children: [/*#__PURE__*/_jsx(CalendarIcon, {
+          size: 16
+        }), /*#__PURE__*/_jsx(Text, {
+          variant: "p-small",
+          color: "text-secondary",
+          children: new Date(session.startTime).toLocaleDateString(undefined, {
+            weekday: 'long',
+            month: 'long',
+            day: 'numeric',
+            year: 'numeric'
+          })
         })]
       }), /*#__PURE__*/_jsxs(FlexBox, {
-        column: true,
-        alignItems: "flex-start",
-        gap: 4,
-        mb: 4,
-        children: [/*#__PURE__*/_jsxs(FlexBox, {
-          alignItems: "center",
-          gap: 4,
-          py: 8,
-          children: [/*#__PURE__*/_jsx(CalendarIcon, {
-            size: 16
-          }), /*#__PURE__*/_jsx(Text, {
-            variant: "p-small",
-            color: "text-secondary",
-            children: new Date(session.startTime).toLocaleDateString(undefined, {
-              weekday: 'long',
-              month: 'long',
-              day: 'numeric',
-              year: 'numeric'
-            })
-          })]
-        }), /*#__PURE__*/_jsxs(FlexBox, {
-          alignItems: "center",
-          gap: 4,
-          py: 8,
-          children: [/*#__PURE__*/_jsx(ClockIcon, {
-            size: 16
-          }), /*#__PURE__*/_jsx(Text, {
-            variant: "p-small",
-            color: "text-secondary",
-            children: `${formatTime(session.startTime, 'h:mm aa')} - ${formatTime(session.endTime, 'h:mm aa z')}`
-          })]
-        }), session.status && /*#__PURE__*/_jsxs(Text, {
+        alignItems: "center",
+        gap: 8,
+        children: [/*#__PURE__*/_jsx(ClockIcon, {
+          size: 16
+        }), /*#__PURE__*/_jsx(Text, {
           variant: "p-small",
-          fontWeight: "bold",
-          children: ["Status: ", session.status]
+          color: "text-secondary",
+          children: `${formatTime(session.startTime, 'h:mm aa')} - ${formatTime(session.endTime, 'h:mm aa z')}`
         })]
+      }), session.status && /*#__PURE__*/_jsxs(Text, {
+        variant: "p-small",
+        fontWeight: "bold",
+        children: ["Status: ", session.status]
       })]
     }), /*#__PURE__*/_jsx(FlexBox, {
       alignItems: "center",
       gap: 8,
-      flexWrap: "wrap",
       children: ctas?.map(cta => {
         const Button = cta.buttonType === 'fill' ? FillButton : cta.buttonType === 'stroke' ? StrokeButton : TextButton;
         return /*#__PURE__*/_jsx(Button, {

package/dist/Loading/elements.d.ts

@@ -0,0 +1,19 @@
+export type LoadingPathShape = 'c' | 'inner' | 'outer' | 'underline';
+export declare const LoadingIcon: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    theme?: import("@emotion/react").Theme;
+}, import("react").SVGProps<SVGSVGElement>, {}>;
+export declare const PrimaryPath: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    shape: LoadingPathShape;
+}, import("react").SVGProps<SVGPathElement>, {}>;
+export declare const SecondaryPath: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    shape: LoadingPathShape;
+}, import("react").SVGProps<SVGPathElement>, {}>;

package/dist/Loading/elements.js

@@ -0,0 +1,120 @@
+import _styled from "@emotion/styled/base";
+import { css, pxRem } from '@codecademy/gamut-styles';
+import { keyframes } from '@emotion/react';
+const DRAW_DURATION = '3s';
+const C_OFFSET = 169;
+const INNER_OFFSET = 287;
+const OUTER_OFFSET = 361;
+const UNDERLINE_OFFSET = 77;
+const drawC = keyframes`
+  50% {
+    stroke-dashoffset: 0;
+  }
+`;
+const drawCFast = keyframes`
+  10% {
+    stroke-dashoffset: ${C_OFFSET};
+  }
+  50% {
+    stroke-dashoffset: 0;
+  }
+  85% {
+    stroke-dashoffset: ${C_OFFSET};
+  }
+`;
+const drawInner = keyframes`
+  50% {
+    stroke-dashoffset: 0;
+  }
+`;
+const drawInnerFast = keyframes`
+  10% {
+    stroke-dashoffset: ${INNER_OFFSET};
+  }
+  50% {
+    stroke-dashoffset: 0;
+  }
+  85% {
+    stroke-dashoffset: ${INNER_OFFSET};
+  }
+`;
+const drawOuter = keyframes`
+  50% {
+    stroke-dashoffset: 0;
+  }
+`;
+const drawOuterFast = keyframes`
+  10% {
+    stroke-dashoffset: ${OUTER_OFFSET};
+  }
+  50% {
+    stroke-dashoffset: 0;
+  }
+  85% {
+    stroke-dashoffset: ${OUTER_OFFSET};
+  }
+`;
+const drawUnderline = keyframes`
+  50% {
+    stroke-dashoffset: 0;
+  }
+`;
+const drawUnderlineFast = keyframes`
+  10% {
+    stroke-dashoffset: ${UNDERLINE_OFFSET};
+  }
+  50% {
+    stroke-dashoffset: 0;
+  }
+  85% {
+    stroke-dashoffset: ${UNDERLINE_OFFSET};
+  }
+`;
+const pathAnimationConfig = {
+  underline: {
+    offset: UNDERLINE_OFFSET,
+    animation: drawUnderline,
+    animationFast: drawUnderlineFast
+  },
+  c: {
+    offset: C_OFFSET,
+    animation: drawC,
+    animationFast: drawCFast
+  },
+  inner: {
+    offset: INNER_OFFSET,
+    animation: drawInner,
+    animationFast: drawInnerFast
+  },
+  outer: {
+    offset: OUTER_OFFSET,
+    animation: drawOuter,
+    animationFast: drawOuterFast
+  }
+};
+const getPathStyles = (pathType, fast = false) => {
+  const config = pathAnimationConfig[pathType];
+  return css({
+    strokeDasharray: config.offset,
+    strokeDashoffset: config.offset,
+    animation: `${fast ? config.animationFast : config.animation} ${DRAW_DURATION} infinite`
+  });
+};
+export const LoadingIcon = /*#__PURE__*/_styled('svg', {
+  target: "e162ofti2",
+  label: "LoadingIcon"
+})(css({
+  width: pxRem(120)
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9Mb2FkaW5nL2VsZW1lbnRzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF1SDJCIiwiZmlsZSI6Ii4uLy4uL3NyYy9Mb2FkaW5nL2VsZW1lbnRzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgcHhSZW0gfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHsga2V5ZnJhbWVzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG5jb25zdCBEUkFXX0RVUkFUSU9OID0gJzNzJztcblxuY29uc3QgQ19PRkZTRVQgPSAxNjk7XG5jb25zdCBJTk5FUl9PRkZTRVQgPSAyODc7XG5jb25zdCBPVVRFUl9PRkZTRVQgPSAzNjE7XG5jb25zdCBVTkRFUkxJTkVfT0ZGU0VUID0gNzc7XG5cbmNvbnN0IGRyYXdDID0ga2V5ZnJhbWVzYFxuICA1MCUge1xuICAgIHN0cm9rZS1kYXNob2Zmc2V0OiAwO1xuICB9XG5gO1xuXG5jb25zdCBkcmF3Q0Zhc3QgPSBrZXlmcmFtZXNgXG4gIDEwJSB7XG4gICAgc3Ryb2tlLWRhc2hvZmZzZXQ6ICR7Q19PRkZTRVR9O1xuICB9XG4gIDUwJSB7XG4gICAgc3Ryb2tlLWRhc2hvZmZzZXQ6IDA7XG4gIH1cbiAgODUlIHtcbiAgICBzdHJva2UtZGFzaG9mZnNldDogJHtDX09GRlNFVH07XG4gIH1cbmA7XG5cbmNvbnN0IGRyYXdJbm5lciA9IGtleWZyYW1lc2BcbiAgNTAlIHtcbiAgICBzdHJva2UtZGFzaG9mZnNldDogMDtcbiAgfVxuYDtcblxuY29uc3QgZHJhd0lubmVyRmFzdCA9IGtleWZyYW1lc2BcbiAgMTAlIHtcbiAgICBzdHJva2UtZGFzaG9mZnNldDogJHtJTk5FUl9PRkZTRVR9O1xuICB9XG4gIDUwJSB7XG4gICAgc3Ryb2tlLWRhc2hvZmZzZXQ6IDA7XG4gIH1cbiAgODUlIHtcbiAgICBzdHJva2UtZGFzaG9mZnNldDogJHtJTk5FUl9PRkZTRVR9O1xuICB9XG5gO1xuXG5jb25zdCBkcmF3T3V0ZXIgPSBrZXlmcmFtZXNgXG4gIDUwJSB7XG4gICAgc3Ryb2tlLWRhc2hvZmZzZXQ6IDA7XG4gIH1cbmA7XG5cbmNvbnN0IGRyYXdPdXRlckZhc3QgPSBrZXlmcmFtZXNgXG4gIDEwJSB7XG4gICAgc3Ryb2tlLWRhc2hvZmZzZXQ6ICR7T1VURVJfT0ZGU0VUfTtcbiAgfVxuICA1MCUge1xuICAgIHN0cm9rZS1kYXNob2Zmc2V0OiAwO1xuICB9XG4gIDg1JSB7XG4gICAgc3Ryb2tlLWRhc2hvZmZzZXQ6ICR7T1VURVJfT0ZGU0VUfTtcbiAgfVxuYDtcblxuY29uc3QgZHJhd1VuZGVybGluZSA9IGtleWZyYW1lc2BcbiAgNTAlIHtcbiAgICBzdHJva2UtZGFzaG9mZnNldDogMDtcbiAgfVxuYDtcblxuY29uc3QgZHJhd1VuZGVybGluZUZhc3QgPSBrZXlmcmFtZXNgXG4gIDEwJSB7XG4gICAgc3Ryb2tlLWRhc2hvZmZzZXQ6ICR7VU5ERVJMSU5FX09GRlNFVH07XG4gIH1cbiAgNTAlIHtcbiAgICBzdHJva2UtZGFzaG9mZnNldDogMDtcbiAgfVxuICA4NSUge1xuICAgIHN0cm9rZS1kYXNob2Zmc2V0OiAke1VOREVSTElORV9PRkZTRVR9O1xuICB9XG5gO1xuXG5leHBvcnQgdHlwZSBMb2FkaW5nUGF0aFNoYXBlID0gJ2MnIHwgJ2lubmVyJyB8ICdvdXRlcicgfCAndW5kZXJsaW5lJztcblxuY29uc3QgcGF0aEFuaW1hdGlvbkNvbmZpZyA9IHtcbiAgdW5kZXJsaW5lOiB7XG4gICAgb2Zmc2V0OiBVTkRFUkxJTkVfT0ZGU0VULFxuICAgIGFuaW1hdGlvbjogZHJhd1VuZGVybGluZSxcbiAgICBhbmltYXRpb25GYXN0OiBkcmF3VW5kZXJsaW5lRmFzdCxcbiAgfSxcbiAgYzoge1xuICAgIG9mZnNldDogQ19PRkZTRVQsXG4gICAgYW5pbWF0aW9uOiBkcmF3QyxcbiAgICBhbmltYXRpb25GYXN0OiBkcmF3Q0Zhc3QsXG4gIH0sXG4gIGlubmVyOiB7XG4gICAgb2Zmc2V0OiBJTk5FUl9PRkZTRVQsXG4gICAgYW5pbWF0aW9uOiBkcmF3SW5uZXIsXG4gICAgYW5pbWF0aW9uRmFzdDogZHJhd0lubmVyRmFzdCxcbiAgfSxcbiAgb3V0ZXI6IHtcbiAgICBvZmZzZXQ6IE9VVEVSX09GRlNFVCxcbiAgICBhbmltYXRpb246IGRyYXdPdXRlcixcbiAgICBhbmltYXRpb25GYXN0OiBkcmF3T3V0ZXJGYXN0LFxuICB9LFxufSBhcyBjb25zdDtcblxuY29uc3QgZ2V0UGF0aFN0eWxlcyA9IChwYXRoVHlwZTogTG9hZGluZ1BhdGhTaGFwZSwgZmFzdCA9IGZhbHNlKSA9PiB7XG4gIGNvbnN0IGNvbmZpZyA9IHBhdGhBbmltYXRpb25Db25maWdbcGF0aFR5cGVdO1xuICByZXR1cm4gY3NzKHtcbiAgICBzdHJva2VEYXNoYXJyYXk6IGNvbmZpZy5vZmZzZXQsXG4gICAgc3Ryb2tlRGFzaG9mZnNldDogY29uZmlnLm9mZnNldCxcbiAgICBhbmltYXRpb246IGAke1xuICAgICAgZmFzdCA/IGNvbmZpZy5hbmltYXRpb25GYXN0IDogY29uZmlnLmFuaW1hdGlvblxuICAgIH0gJHtEUkFXX0RVUkFUSU9OfSBpbmZpbml0ZWAsXG4gIH0pO1xufTtcblxuZXhwb3J0IGNvbnN0IExvYWRpbmdJY29uID0gc3R5bGVkKCdzdmcnKShcbiAgY3NzKHtcbiAgICB3aWR0aDogcHhSZW0oMTIwKSxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBQcmltYXJ5UGF0aCA9IHN0eWxlZCgncGF0aCcpPHsgc2hhcGU6IExvYWRpbmdQYXRoU2hhcGUgfT4oXG4gICh7IHNoYXBlIH0pID0+IGdldFBhdGhTdHlsZXMoc2hhcGUsIGZhbHNlKVxuKTtcblxuZXhwb3J0IGNvbnN0IFNlY29uZGFyeVBhdGggPSBzdHlsZWQoJ3BhdGgnKTx7IHNoYXBlOiBMb2FkaW5nUGF0aFNoYXBlIH0+KFxuICAoeyBzaGFwZSB9KSA9PiBnZXRQYXRoU3R5bGVzKHNoYXBlLCB0cnVlKVxuKTtcbiJdfQ== */");
+export const PrimaryPath = /*#__PURE__*/_styled('path', {
+  target: "e162ofti1",
+  label: "PrimaryPath"
+})(({
+  shape
+}) => getPathStyles(shape, false), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9Mb2FkaW5nL2VsZW1lbnRzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE2SDJCIiwiZmlsZSI6Ii4uLy4uL3NyYy9Mb2FkaW5nL2VsZW1lbnRzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgcHhSZW0gfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHsga2V5ZnJhbWVzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG5jb25zdCBEUkFXX0RVUkFUSU9OID0gJzNzJztcblxuY29uc3QgQ19PRkZTRVQgPSAxNjk7XG5jb25zdCBJTk5FUl9PRkZTRVQgPSAyODc7XG5jb25zdCBPVVRFUl9PRkZTRVQgPSAzNjE7XG5jb25zdCBVTkRFUkxJTkVfT0ZGU0VUID0gNzc7XG5cbmNvbnN0IGRyYXdDID0ga2V5ZnJhbWVzYFxuICA1MCUge1xuICAgIHN0cm9rZS1kYXNob2Zmc2V0OiAwO1xuICB9XG5gO1xuXG5jb25zdCBkcmF3Q0Zhc3QgPSBrZXlmcmFtZXNgXG4gIDEwJSB7XG4gICAgc3Ryb2tlLWRhc2hvZmZzZXQ6ICR7Q19PRkZTRVR9O1xuICB9XG4gIDUwJSB7XG4gICAgc3Ryb2tlLWRhc2hvZmZzZXQ6IDA7XG4gIH1cbiAgODUlIHtcbiAgICBzdHJva2UtZGFzaG9mZnNldDogJHtDX09GRlNFVH07XG4gIH1cbmA7XG5cbmNvbnN0IGRyYXdJbm5lciA9IGtleWZyYW1lc2BcbiAgNTAlIHtcbiAgICBzdHJva2UtZGFzaG9mZnNldDogMDtcbiAgfVxuYDtcblxuY29uc3QgZHJhd0lubmVyRmFzdCA9IGtleWZyYW1lc2BcbiAgMTAlIHtcbiAgICBzdHJva2UtZGFzaG9mZnNldDogJHtJTk5FUl9PRkZTRVR9O1xuICB9XG4gIDUwJSB7XG4gICAgc3Ryb2tlLWRhc2hvZmZzZXQ6IDA7XG4gIH1cbiAgODUlIHtcbiAgICBzdHJva2UtZGFzaG9mZnNldDogJHtJTk5FUl9PRkZTRVR9O1xuICB9XG5gO1xuXG5jb25zdCBkcmF3T3V0ZXIgPSBrZXlmcmFtZXNgXG4gIDUwJSB7XG4gICAgc3Ryb2tlLWRhc2hvZmZzZXQ6IDA7XG4gIH1cbmA7XG5cbmNvbnN0IGRyYXdPdXRlckZhc3QgPSBrZXlmcmFtZXNgXG4gIDEwJSB7XG4gICAgc3Ryb2tlLWRhc2hvZmZzZXQ6ICR7T1VURVJfT0ZGU0VUfTtcbiAgfVxuICA1MCUge1xuICAgIHN0cm9rZS1kYXNob2Zmc2V0OiAwO1xuICB9XG4gIDg1JSB7XG4gICAgc3Ryb2tlLWRhc2hvZmZzZXQ6ICR7T1VURVJfT0ZGU0VUfTtcbiAgfVxuYDtcblxuY29uc3QgZHJhd1VuZGVybGluZSA9IGtleWZyYW1lc2BcbiAgNTAlIHtcbiAgICBzdHJva2UtZGFzaG9mZnNldDogMDtcbiAgfVxuYDtcblxuY29uc3QgZHJhd1VuZGVybGluZUZhc3QgPSBrZXlmcmFtZXNgXG4gIDEwJSB7XG4gICAgc3Ryb2tlLWRhc2hvZmZzZXQ6ICR7VU5ERVJMSU5FX09GRlNFVH07XG4gIH1cbiAgNTAlIHtcbiAgICBzdHJva2UtZGFzaG9mZnNldDogMDtcbiAgfVxuICA4NSUge1xuICAgIHN0cm9rZS1kYXNob2Zmc2V0OiAke1VOREVSTElORV9PRkZTRVR9O1xuICB9XG5gO1xuXG5leHBvcnQgdHlwZSBMb2FkaW5nUGF0aFNoYXBlID0gJ2MnIHwgJ2lubmVyJyB8ICdvdXRlcicgfCAndW5kZXJsaW5lJztcblxuY29uc3QgcGF0aEFuaW1hdGlvbkNvbmZpZyA9IHtcbiAgdW5kZXJsaW5lOiB7XG4gICAgb2Zmc2V0OiBVTkRFUkxJTkVfT0ZGU0VULFxuICAgIGFuaW1hdGlvbjogZHJhd1VuZGVybGluZSxcbiAgICBhbmltYXRpb25GYXN0OiBkcmF3VW5kZXJsaW5lRmFzdCxcbiAgfSxcbiAgYzoge1xuICAgIG9mZnNldDogQ19PRkZTRVQsXG4gICAgYW5pbWF0aW9uOiBkcmF3QyxcbiAgICBhbmltYXRpb25GYXN0OiBkcmF3Q0Zhc3QsXG4gIH0sXG4gIGlubmVyOiB7XG4gICAgb2Zmc2V0OiBJTk5FUl9PRkZTRVQsXG4gICAgYW5pbWF0aW9uOiBkcmF3SW5uZXIsXG4gICAgYW5pbWF0aW9uRmFzdDogZHJhd0lubmVyRmFzdCxcbiAgfSxcbiAgb3V0ZXI6IHtcbiAgICBvZmZzZXQ6IE9VVEVSX09GRlNFVCxcbiAgICBhbmltYXRpb246IGRyYXdPdXRlcixcbiAgICBhbmltYXRpb25GYXN0OiBkcmF3T3V0ZXJGYXN0LFxuICB9LFxufSBhcyBjb25zdDtcblxuY29uc3QgZ2V0UGF0aFN0eWxlcyA9IChwYXRoVHlwZTogTG9hZGluZ1BhdGhTaGFwZSwgZmFzdCA9IGZhbHNlKSA9PiB7XG4gIGNvbnN0IGNvbmZpZyA9IHBhdGhBbmltYXRpb25Db25maWdbcGF0aFR5cGVdO1xuICByZXR1cm4gY3NzKHtcbiAgICBzdHJva2VEYXNoYXJyYXk6IGNvbmZpZy5vZmZzZXQsXG4gICAgc3Ryb2tlRGFzaG9mZnNldDogY29uZmlnLm9mZnNldCxcbiAgICBhbmltYXRpb246IGAke1xuICAgICAgZmFzdCA/IGNvbmZpZy5hbmltYXRpb25GYXN0IDogY29uZmlnLmFuaW1hdGlvblxuICAgIH0gJHtEUkFXX0RVUkFUSU9OfSBpbmZpbml0ZWAsXG4gIH0pO1xufTtcblxuZXhwb3J0IGNvbnN0IExvYWRpbmdJY29uID0gc3R5bGVkKCdzdmcnKShcbiAgY3NzKHtcbiAgICB3aWR0aDogcHhSZW0oMTIwKSxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBQcmltYXJ5UGF0aCA9IHN0eWxlZCgncGF0aCcpPHsgc2hhcGU6IExvYWRpbmdQYXRoU2hhcGUgfT4oXG4gICh7IHNoYXBlIH0pID0+IGdldFBhdGhTdHlsZXMoc2hhcGUsIGZhbHNlKVxuKTtcblxuZXhwb3J0IGNvbnN0IFNlY29uZGFyeVBhdGggPSBzdHlsZWQoJ3BhdGgnKTx7IHNoYXBlOiBMb2FkaW5nUGF0aFNoYXBlIH0+KFxuICAoeyBzaGFwZSB9KSA9PiBnZXRQYXRoU3R5bGVzKHNoYXBlLCB0cnVlKVxuKTtcbiJdfQ== */");
+export const SecondaryPath = /*#__PURE__*/_styled('path', {
+  target: "e162ofti0",
+  label: "SecondaryPath"
+})(({
+  shape
+}) => getPathStyles(shape, true), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9Mb2FkaW5nL2VsZW1lbnRzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpSTZCIiwiZmlsZSI6Ii4uLy4uL3NyYy9Mb2FkaW5nL2VsZW1lbnRzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgcHhSZW0gfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHsga2V5ZnJhbWVzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG5jb25zdCBEUkFXX0RVUkFUSU9OID0gJzNzJztcblxuY29uc3QgQ19PRkZTRVQgPSAxNjk7XG5jb25zdCBJTk5FUl9PRkZTRVQgPSAyODc7XG5jb25zdCBPVVRFUl9PRkZTRVQgPSAzNjE7XG5jb25zdCBVTkRFUkxJTkVfT0ZGU0VUID0gNzc7XG5cbmNvbnN0IGRyYXdDID0ga2V5ZnJhbWVzYFxuICA1MCUge1xuICAgIHN0cm9rZS1kYXNob2Zmc2V0OiAwO1xuICB9XG5gO1xuXG5jb25zdCBkcmF3Q0Zhc3QgPSBrZXlmcmFtZXNgXG4gIDEwJSB7XG4gICAgc3Ryb2tlLWRhc2hvZmZzZXQ6ICR7Q19PRkZTRVR9O1xuICB9XG4gIDUwJSB7XG4gICAgc3Ryb2tlLWRhc2hvZmZzZXQ6IDA7XG4gIH1cbiAgODUlIHtcbiAgICBzdHJva2UtZGFzaG9mZnNldDogJHtDX09GRlNFVH07XG4gIH1cbmA7XG5cbmNvbnN0IGRyYXdJbm5lciA9IGtleWZyYW1lc2BcbiAgNTAlIHtcbiAgICBzdHJva2UtZGFzaG9mZnNldDogMDtcbiAgfVxuYDtcblxuY29uc3QgZHJhd0lubmVyRmFzdCA9IGtleWZyYW1lc2BcbiAgMTAlIHtcbiAgICBzdHJva2UtZGFzaG9mZnNldDogJHtJTk5FUl9PRkZTRVR9O1xuICB9XG4gIDUwJSB7XG4gICAgc3Ryb2tlLWRhc2hvZmZzZXQ6IDA7XG4gIH1cbiAgODUlIHtcbiAgICBzdHJva2UtZGFzaG9mZnNldDogJHtJTk5FUl9PRkZTRVR9O1xuICB9XG5gO1xuXG5jb25zdCBkcmF3T3V0ZXIgPSBrZXlmcmFtZXNgXG4gIDUwJSB7XG4gICAgc3Ryb2tlLWRhc2hvZmZzZXQ6IDA7XG4gIH1cbmA7XG5cbmNvbnN0IGRyYXdPdXRlckZhc3QgPSBrZXlmcmFtZXNgXG4gIDEwJSB7XG4gICAgc3Ryb2tlLWRhc2hvZmZzZXQ6ICR7T1VURVJfT0ZGU0VUfTtcbiAgfVxuICA1MCUge1xuICAgIHN0cm9rZS1kYXNob2Zmc2V0OiAwO1xuICB9XG4gIDg1JSB7XG4gICAgc3Ryb2tlLWRhc2hvZmZzZXQ6ICR7T1VURVJfT0ZGU0VUfTtcbiAgfVxuYDtcblxuY29uc3QgZHJhd1VuZGVybGluZSA9IGtleWZyYW1lc2BcbiAgNTAlIHtcbiAgICBzdHJva2UtZGFzaG9mZnNldDogMDtcbiAgfVxuYDtcblxuY29uc3QgZHJhd1VuZGVybGluZUZhc3QgPSBrZXlmcmFtZXNgXG4gIDEwJSB7XG4gICAgc3Ryb2tlLWRhc2hvZmZzZXQ6ICR7VU5ERVJMSU5FX09GRlNFVH07XG4gIH1cbiAgNTAlIHtcbiAgICBzdHJva2UtZGFzaG9mZnNldDogMDtcbiAgfVxuICA4NSUge1xuICAgIHN0cm9rZS1kYXNob2Zmc2V0OiAke1VOREVSTElORV9PRkZTRVR9O1xuICB9XG5gO1xuXG5leHBvcnQgdHlwZSBMb2FkaW5nUGF0aFNoYXBlID0gJ2MnIHwgJ2lubmVyJyB8ICdvdXRlcicgfCAndW5kZXJsaW5lJztcblxuY29uc3QgcGF0aEFuaW1hdGlvbkNvbmZpZyA9IHtcbiAgdW5kZXJsaW5lOiB7XG4gICAgb2Zmc2V0OiBVTkRFUkxJTkVfT0ZGU0VULFxuICAgIGFuaW1hdGlvbjogZHJhd1VuZGVybGluZSxcbiAgICBhbmltYXRpb25GYXN0OiBkcmF3VW5kZXJsaW5lRmFzdCxcbiAgfSxcbiAgYzoge1xuICAgIG9mZnNldDogQ19PRkZTRVQsXG4gICAgYW5pbWF0aW9uOiBkcmF3QyxcbiAgICBhbmltYXRpb25GYXN0OiBkcmF3Q0Zhc3QsXG4gIH0sXG4gIGlubmVyOiB7XG4gICAgb2Zmc2V0OiBJTk5FUl9PRkZTRVQsXG4gICAgYW5pbWF0aW9uOiBkcmF3SW5uZXIsXG4gICAgYW5pbWF0aW9uRmFzdDogZHJhd0lubmVyRmFzdCxcbiAgfSxcbiAgb3V0ZXI6IHtcbiAgICBvZmZzZXQ6IE9VVEVSX09GRlNFVCxcbiAgICBhbmltYXRpb246IGRyYXdPdXRlcixcbiAgICBhbmltYXRpb25GYXN0OiBkcmF3T3V0ZXJGYXN0LFxuICB9LFxufSBhcyBjb25zdDtcblxuY29uc3QgZ2V0UGF0aFN0eWxlcyA9IChwYXRoVHlwZTogTG9hZGluZ1BhdGhTaGFwZSwgZmFzdCA9IGZhbHNlKSA9PiB7XG4gIGNvbnN0IGNvbmZpZyA9IHBhdGhBbmltYXRpb25Db25maWdbcGF0aFR5cGVdO1xuICByZXR1cm4gY3NzKHtcbiAgICBzdHJva2VEYXNoYXJyYXk6IGNvbmZpZy5vZmZzZXQsXG4gICAgc3Ryb2tlRGFzaG9mZnNldDogY29uZmlnLm9mZnNldCxcbiAgICBhbmltYXRpb246IGAke1xuICAgICAgZmFzdCA/IGNvbmZpZy5hbmltYXRpb25GYXN0IDogY29uZmlnLmFuaW1hdGlvblxuICAgIH0gJHtEUkFXX0RVUkFUSU9OfSBpbmZpbml0ZWAsXG4gIH0pO1xufTtcblxuZXhwb3J0IGNvbnN0IExvYWRpbmdJY29uID0gc3R5bGVkKCdzdmcnKShcbiAgY3NzKHtcbiAgICB3aWR0aDogcHhSZW0oMTIwKSxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBQcmltYXJ5UGF0aCA9IHN0eWxlZCgncGF0aCcpPHsgc2hhcGU6IExvYWRpbmdQYXRoU2hhcGUgfT4oXG4gICh7IHNoYXBlIH0pID0+IGdldFBhdGhTdHlsZXMoc2hhcGUsIGZhbHNlKVxuKTtcblxuZXhwb3J0IGNvbnN0IFNlY29uZGFyeVBhdGggPSBzdHlsZWQoJ3BhdGgnKTx7IHNoYXBlOiBMb2FkaW5nUGF0aFNoYXBlIH0+KFxuICAoeyBzaGFwZSB9KSA9PiBnZXRQYXRoU3R5bGVzKHNoYXBlLCB0cnVlKVxuKTtcbiJdfQ== */");

package/dist/Loading/index.js

@@ -1,22 +1,39 @@
-import { useCurrentMode } from '@codecademy/gamut-styles';
-import { useTheme } from '@emotion/react';
-import cx from 'classnames';
+import { theme, useCurrentMode } from '@codecademy/gamut-styles';
 import * as React from 'react';
-
-// eslint-disable-next-line gamut/no-css-standalone
-import styles from './styles.module.scss';
+import { LoadingIcon, PrimaryPath, SecondaryPath } from './elements';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const PATHS = {
+  c: {
+    d: 'M18.7 57.6c0 4.2.4 7.4 1.2 9.8 2.3 7.1 8.4 11 16.3 11 5.9 0 10.6-2.4 13.7-6.1.2-.4.3-.8-.1-1.2l-5.2-4.5c-.4-.3-.8-.3-1.2.1-2 2.2-4 3.5-7.3 3.5-3.5 0-6.2-1.7-7.4-5.1-.7-2-.8-4.4-.8-7.4 0-3.1.2-5.4.8-7.4 1.1-3.5 3.9-5.2 7.4-5.2 3.3 0 5.3 1.2 7.3 3.5.3.4.7.5 1.2.2l5.2-4.5c.4-.3.3-.8.1-1.2-3.1-3.8-7.8-6.2-13.7-6.2-7.9 0-14 3.9-16.3 11-.8 2.3-1.2 5.5-1.2 9.7',
+    secondaryStrokeWidth: 3
+  },
+  underline: {
+    d: 'M120.7 97.2c.5 0 .8-.3.8-.8v-7.5c0-.5-.3-.8-.8-.8h-28c-.5 0-.8.3-.8.8v7.5c0 .5.3.8.8.8h28',
+    secondaryStrokeWidth: 3
+  },
+  outer: {
+    d: 'M42.7 1.5H2.1 2c-.3.2-.5.5-.5.8v94c0 .3.1.5.3.7.1.1.3.1.5.1h80.8c.3 0 .5-.1.6-.3.1-.1.2-.3.2-.5v-94c0-.2-.1-.4-.2-.6-.1-.1-.3-.2-.6-.2H42.7',
+    secondaryStrokeWidth: 3
+  },
+  inner: {
+    d: 'M42.7 88H11.3h-.1c-.3-.1-.5-.4-.5-.7V11.5c0-.4.2-.6.5-.8h63.1c.3.1.5.4.5.8v75.7c0 .4-.2.6-.5.7H42.7',
+    secondaryStrokeWidth: 3
+  }
+};
+const getStrokeColors = mode => ({
+  primary: mode === 'light' ? theme.colors['gray-300'] : theme.colors['navy-600'],
+  secondary: mode === 'light' ? theme.colors['blue-800'] : theme.colors['navy-200']
+});
 export const Loading = ({
   className
 }) => {
-  const {
-    colors
-  } = useTheme();
   const mode = useCurrentMode();
-  const color1 = mode === 'light' ? colors['gray-300'] : colors['navy-600'];
-  const color2 = mode === 'light' ? colors['blue-800'] : colors['navy-200'];
-  const icon = /*#__PURE__*/_jsxs("svg", {
-    className: cx(styles.loading, className),
+  const {
+    primary,
+    secondary
+  } = getStrokeColors(mode);
+  return /*#__PURE__*/_jsxs(LoadingIcon, {
+    className: className,
     "data-testid": "loading",
     xmlns: "https://www.w3.org/2000/svg",
     width: "123",
@@ -24,59 +41,19 @@ export const Loading = ({
     viewBox: "0 0 123 98.7",
     children: [/*#__PURE__*/_jsx("title", {
       children: "Loading Icon"
-    }), /*#__PURE__*/_jsx("path", {
-      className: cx(styles.path, styles.c),
-      stroke: color1,
-      fill: "none",
-      strokeMiterlimit: "10",
-      d: "M18.7 57.6c0 4.2.4 7.4 1.2 9.8 2.3 7.1 8.4 11 16.3 11 5.9 0 10.6-2.4 13.7-6.1.2-.4.3-.8-.1-1.2l-5.2-4.5c-.4-.3-.8-.3-1.2.1-2 2.2-4 3.5-7.3 3.5-3.5 0-6.2-1.7-7.4-5.1-.7-2-.8-4.4-.8-7.4 0-3.1.2-5.4.8-7.4 1.1-3.5 3.9-5.2 7.4-5.2 3.3 0 5.3 1.2 7.3 3.5.3.4.7.5 1.2.2l5.2-4.5c.4-.3.3-.8.1-1.2-3.1-3.8-7.8-6.2-13.7-6.2-7.9 0-14 3.9-16.3 11-.8 2.3-1.2 5.5-1.2 9.7"
-    }), /*#__PURE__*/_jsx("path", {
-      className: cx(styles.path, styles.underline),
-      stroke: color1,
-      fill: "none",
-      strokeMiterlimit: "10",
-      d: "M120.7 97.2c.5 0 .8-.3.8-.8v-7.5c0-.5-.3-.8-.8-.8h-28c-.5 0-.8.3-.8.8v7.5c0 .5.3.8.8.8h28"
-    }), /*#__PURE__*/_jsx("path", {
-      className: cx(styles.path, styles.outer),
-      stroke: color1,
-      fill: "none",
-      strokeMiterlimit: "10",
-      d: "M42.7 1.5H2.1 2c-.3.2-.5.5-.5.8v94c0 .3.1.5.3.7.1.1.3.1.5.1h80.8c.3 0 .5-.1.6-.3.1-.1.2-.3.2-.5v-94c0-.2-.1-.4-.2-.6-.1-.1-.3-.2-.6-.2H42.7"
-    }), /*#__PURE__*/_jsx("path", {
-      className: cx(styles.path, styles.inner),
-      stroke: color1,
-      fill: "none",
-      strokeMiterlimit: "10",
-      d: "M42.7 88H11.3h-.1c-.3-.1-.5-.4-.5-.7V11.5c0-.4.2-.6.5-.8h63.1c.3.1.5.4.5.8v75.7c0 .4-.2.6-.5.7H42.7"
-    }), /*#__PURE__*/_jsx("path", {
-      className: cx(styles.pathTwo, styles.c),
-      stroke: color2,
-      fill: "none",
-      strokeWidth: "3",
-      strokeMiterlimit: "10",
-      d: "M18.7 57.6c0 4.2.4 7.4 1.2 9.8 2.3 7.1 8.4 11 16.3 11 5.9 0 10.6-2.4 13.7-6.1.2-.4.3-.8-.1-1.2l-5.2-4.5c-.4-.3-.8-.3-1.2.1-2 2.2-4 3.5-7.3 3.5-3.5 0-6.2-1.7-7.4-5.1-.7-2-.8-4.4-.8-7.4 0-3.1.2-5.4.8-7.4 1.1-3.5 3.9-5.2 7.4-5.2 3.3 0 5.3 1.2 7.3 3.5.3.4.7.5 1.2.2l5.2-4.5c.4-.3.3-.8.1-1.2-3.1-3.8-7.8-6.2-13.7-6.2-7.9 0-14 3.9-16.3 11-.8 2.3-1.2 5.5-1.2 9.7"
-    }), /*#__PURE__*/_jsx("path", {
-      className: cx(styles.pathTwo, styles.underline),
-      stroke: color2,
-      fill: "none",
-      strokeWidth: "3",
-      strokeMiterlimit: "10",
-      d: "M120.7 97.2c.5 0 .8-.3.8-.8v-7.5c0-.5-.3-.8-.8-.8h-28c-.5 0-.8.3-.8.8v7.5c0 .5.3.8.8.8h28"
-    }), /*#__PURE__*/_jsx("path", {
-      className: cx(styles.pathTwo, styles.outer),
-      stroke: color2,
-      fill: "none",
-      strokeWidth: "3",
-      strokeMiterlimit: "10",
-      d: "M42.7 1.5H2.1 2c-.3.2-.5.5-.5.8v94c0 .3.1.5.3.7.1.1.3.1.5.1h80.8c.3 0 .5-.1.6-.3.1-.1.2-.3.2-.5v-94c0-.2-.1-.4-.2-.6-.1-.1-.3-.2-.6-.2H42.7"
-    }), /*#__PURE__*/_jsx("path", {
-      className: cx(styles.pathTwo, styles.inner),
-      stroke: color2,
-      fill: "none",
-      strokeWidth: "3",
-      strokeMiterlimit: "10",
-      d: "M42.7 88H11.3h-.1c-.3-.1-.5-.4-.5-.7V11.5c0-.4.2-.6.5-.8h63.1c.3.1.5.4.5.8v75.7c0 .4-.2.6-.5.7H42.7"
-    })]
+    }), Object.keys(PATHS).map(shape => /*#__PURE__*/_jsx(PrimaryPath, {
+      shape: shape,
+      stroke: primary,
+      fill: "none",
+      strokeMiterlimit: 10,
+      d: PATHS[shape].d
+    }, `primary-${shape}`)), Object.keys(PATHS).map(shape => /*#__PURE__*/_jsx(SecondaryPath, {
+      shape: shape,
+      stroke: secondary,
+      fill: "none",
+      strokeWidth: PATHS[shape].secondaryStrokeWidth,
+      strokeMiterlimit: 10,
+      d: PATHS[shape].d
+    }, `secondary-${shape}`))]
   });
-  return icon;
 };

package/dist/index.d.ts

@@ -5,8 +5,6 @@ export * from './AccordionButtonDeprecated';
 export * from './AbbreviatedCommunityEventCard';
 export * from './AppBar';
 export * from './AppBar/AppBarSection';
-export * from './AppBarDeprecated';
-export * from './AppBarDeprecated/AppBarSectionDeprecated';
 export * from './AppHeader';
 export * from './AppHeader/AppHeaderElements/AppHeaderDropdown';
 export * from './AppHeader/AppHeaderElements/AppHeaderLink';

package/dist/index.js

@@ -5,8 +5,6 @@ export * from './AccordionButtonDeprecated';
 export * from './AbbreviatedCommunityEventCard';
 export * from './AppBar';
 export * from './AppBar/AppBarSection';
-export * from './AppBarDeprecated';
-export * from './AppBarDeprecated/AppBarSectionDeprecated';
 export * from './AppHeader';
 export * from './AppHeader/AppHeaderElements/AppHeaderDropdown';
 export * from './AppHeader/AppHeaderElements/AppHeaderLink';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codecademy/brand",
-  "version": "5.11.0-alpha.93b754c9d.0",
+  "version": "5.11.0",
   "description": "Brand component library for Codecademy",
   "license": "MIT",
   "repository": "git@github.com:codecademy-engineering/mono.git",

package/dist/AppBarDeprecated/AppBarSectionDeprecated.d.ts

@@ -1,14 +0,0 @@
-import { WithChildrenProp } from '@codecademy/gamut';
-import * as React from 'react';
-export interface AppBarSectionPropsDeprecated extends WithChildrenProp {
-    /**
-     * Position of the the section within the AppBar.
-     */
-    position?: 'left' | 'center' | 'right';
-    className?: string;
-}
-/**
- * @deprecated use `<AppBarSection>` instead
- * this component still exists since `<Footer>` in le-shared uses classnames
- */
-export declare const AppBarSectionDeprecated: React.FC<AppBarSectionPropsDeprecated>;

package/dist/AppBarDeprecated/AppBarSectionDeprecated.js

@@ -1,25 +0,0 @@
-import cx from 'classnames';
-import * as React from 'react';
-
-// eslint-disable-next-line gamut/no-css-standalone
-import styles from './styles/index.module.scss';
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @deprecated use `<AppBarSection>` instead
- * this component still exists since `<Footer>` in le-shared uses classnames
- */
-export const AppBarSectionDeprecated = ({
-  position,
-  className,
-  children
-}) => {
-  const classes = cx(styles.section, {
-    [styles.sectionRight]: position === 'right',
-    [styles.sectionLeft]: position === 'left',
-    [styles.sectionCenter]: position === 'center'
-  }, className);
-  return /*#__PURE__*/_jsx("div", {
-    className: classes,
-    children: children
-  });
-};

package/dist/AppBarDeprecated/index.d.ts

@@ -1,14 +0,0 @@
-import { WithChildrenProp } from '@codecademy/gamut';
-import * as React from 'react';
-export interface AppBarPropsDeprecated extends WithChildrenProp {
-    className?: string;
-    /**
-     * Whether the container should be larger than the default content size.
-     */
-    wide?: boolean;
-}
-/**
- * @deprecated use `<AppBar>` instead
- * this component still exists since `<Footer>` in le-shared uses classnames
- */
-export declare const AppBarDeprecated: React.FC<AppBarPropsDeprecated>;

package/dist/AppBarDeprecated/index.js

@@ -1,26 +0,0 @@
-import { ContentContainer } from '@codecademy/gamut';
-import cx from 'classnames';
-import * as React from 'react';
-
-// eslint-disable-next-line gamut/no-css-standalone
-import styles from './styles/index.module.scss';
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @deprecated use `<AppBar>` instead
- * this component still exists since `<Footer>` in le-shared uses classnames
- */
-export const AppBarDeprecated = ({
-  wide,
-  children,
-  className
-}) => {
-  const classes = cx(styles.wrapper, className);
-  return /*#__PURE__*/_jsx(ContentContainer, {
-    className: classes,
-    display: "flex",
-    alignItems: "center",
-    height: "100%",
-    size: wide ? 'wide' : 'medium',
-    children: children
-  });
-};

package/dist/AppBarDeprecated/styles/index.module.scss

@@ -1,37 +0,0 @@
-$appbar-gutter: 8px;
-$appbar-tab-width: 48px;
-$appbar-z: 14;
-
-.wrapper {
-  display: flex;
-  align-items: center;
-  height: 100%;
-  z-index: $appbar-z;
-}
-
-.section {
-  display: flex;
-  align-items: center;
-  height: 100%;
-  z-index: 1;
-}
-
-.sectionRight {
-  justify-content: flex-end;
-  white-space: nowrap;
-}
-
-.sectionLeft {
-  flex: 1;
-}
-
-.sectionRight,
-.sectionLeft {
-  flex: 1;
-}
-
-.sectionCenter {
-  flex: 2;
-  justify-content: center;
-  text-align: center;
-}

package/dist/Loading/styles.module.scss

@@ -1,129 +0,0 @@
-$c-offset: 169;
-$inner-offset: 287;
-$outer-offset: 361;
-$underline-offset: 77;
-$animation-duration: 3s;
-
-@keyframes draw-c {
-  50% {
-    stroke-dashoffset: 0;
-  }
-}
-@keyframes draw-c-fast {
-  10% {
-    stroke-dashoffset: $c-offset;
-  }
-  50% {
-    stroke-dashoffset: 0;
-  }
-  85% {
-    stroke-dashoffset: $c-offset;
-  }
-}
-
-@keyframes draw-inner {
-  50% {
-    stroke-dashoffset: 0;
-  }
-}
-@keyframes draw-inner-fast {
-  10% {
-    stroke-dashoffset: $inner-offset;
-  }
-  50% {
-    stroke-dashoffset: 0;
-  }
-  85% {
-    stroke-dashoffset: $inner-offset;
-  }
-}
-
-@keyframes draw-outer {
-  50% {
-    stroke-dashoffset: 0;
-  }
-}
-@keyframes draw-outer-fast {
-  10% {
-    stroke-dashoffset: $outer-offset;
-  }
-  50% {
-    stroke-dashoffset: 0;
-  }
-  85% {
-    stroke-dashoffset: $outer-offset;
-  }
-}
-
-@keyframes draw-underline {
-  50% {
-    stroke-dashoffset: 0;
-  }
-}
-@keyframes draw-underline-fast {
-  10% {
-    stroke-dashoffset: $underline-offset;
-  }
-  50% {
-    stroke-dashoffset: 0;
-  }
-  85% {
-    stroke-dashoffset: $underline-offset;
-  }
-}
-
-.fullPage {
-  width: 100%;
-  height: calc(100vh - 4rem);
-}
-
-.loading {
-  width: 120px;
-}
-
-.underline {
-  stroke-dasharray: $underline-offset;
-  stroke-dashoffset: $underline-offset;
-}
-.c {
-  stroke-dasharray: $c-offset;
-  stroke-dashoffset: $c-offset;
-}
-.inner {
-  stroke-dasharray: $inner-offset;
-  stroke-dashoffset: $inner-offset;
-}
-.outer {
-  stroke-dasharray: $outer-offset;
-  stroke-dashoffset: $outer-offset;
-}
-
-.path {
-  &.underline {
-    animation: draw-underline $animation-duration infinite;
-  }
-  &.c {
-    animation: draw-c $animation-duration infinite;
-  }
-  &.outer {
-    animation: draw-outer $animation-duration infinite;
-  }
-  &.inner {
-    animation: draw-inner $animation-duration infinite;
-  }
-}
-
-.pathTwo {
-  &.underline {
-    animation: draw-underline-fast $animation-duration infinite;
-  }
-  &.c {
-    animation: draw-c-fast $animation-duration infinite;
-  }
-  &.outer {
-    animation: draw-outer-fast $animation-duration infinite;
-  }
-  &.inner {
-    animation: draw-inner-fast $animation-duration infinite;
-  }
-}