EightfoldAI · dkilgore-eightfold · May 17, 2023 · May 16, 2023 · May 17, 2023
diff --git a/src/components/Empty/Empty.stories.tsx b/src/components/Empty/Empty.stories.tsx
@@ -44,6 +44,8 @@ export const Error_State = Empty_Story.bind({});
 export const Empty_Messages = Empty_Story.bind({});
 export const No_Search_Results = Empty_Story.bind({});
 export const Tasks_Complete = Empty_Story.bind({});
+export const Empty_Plan = Empty_Story.bind({});
+export const Empty_Profile = Empty_Story.bind({});
 export const Custom_Image = Empty_Story.bind({});
 
 const emptyArgs: Object = {
@@ -78,9 +80,25 @@ Tasks_Complete.args = {
   mode: EmptyMode.tasks,
 };
 
+Empty_Plan.args = {
+  ...emptyArgs,
+  mode: EmptyMode.plan,
+};
+
+Empty_Profile.args = {
+  ...emptyArgs,
+  mode: EmptyMode.profile,
+};
+
 Custom_Image.args = {
   ...emptyArgs,
-  image: <Icon color="#8ED0FA" path={IconName.mdiWrenchOutline} size="120px" />,
+  image: (
+    <Icon
+      color="var(--empty-svg-primary-30-color)"
+      path={IconName.mdiWrenchOutline}
+      size="120px"
+    />
+  ),
   imageStyle: {},
   mode: '',
 };
diff --git a/src/components/Empty/Empty.test.tsx b/src/components/Empty/Empty.test.tsx
@@ -1,7 +1,11 @@
+import '@testing-library/jest-dom/extend-expect';
+
 import React from 'react';
 import Enzyme, { mount } from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
-import { Empty } from './';
+import { Empty, EmptyMode } from './';
+import { ConfigProvider } from '../ConfigProvider';
+import { render, waitFor } from '@testing-library/react';
 
 Enzyme.configure({ adapter: new Adapter() });
 
@@ -15,11 +19,30 @@ describe('Empty', () => {
   });
 
   test('empty includes the description class name', () => {
-    const wrapper = mount(
+    const { container } = render(
       <Empty description="Test" descriptionClassNames="description-class" />
     );
-    expect(
-      wrapper.getDOMNode().querySelector('.description-class')
-    ).toBeTruthy();
+    expect(container.querySelector('.description-class')).toBeTruthy();
+  });
+
+  test('empty gets theme from config provider', () => {
+    const { container } = render(
+      <ConfigProvider
+        themeOptions={{
+          name: 'red',
+        }}
+      >
+        <Empty
+          description="Test"
+          descriptionClassNames="description-class"
+          mode={EmptyMode.error}
+        />
+      </ConfigProvider>
+    );
+    const svgElement = container.querySelector('svg');
+    const pathElement = svgElement.querySelectorAll('path')[0];
+    expect(pathElement).toBeInTheDocument();
+    const fillValue = pathElement.getAttribute('fill');
+    expect(fillValue).toBe('currentColor');
   });
 });
diff --git a/src/components/Empty/Empty.tsx b/src/components/Empty/Empty.tsx
@@ -3,6 +3,8 @@ import { mergeClasses } from '../../shared/utilities';
 import { EmptyMode, EmptyProps } from './Empty.types';
 import { DefaultEmptyDataImg } from './SVG/DefaultEmptyDataImg';
 import { DefaultEmptyMessagesImg } from './SVG/DefaultEmptyMessagesImg';
+import { DefaultEmptyPlanImg } from './SVG/DefaultEmptyPlanImg';
+import { DefaultEmptyProfileImg } from './SVG/DefaultEmptyProfileImg';
 import { DefaultEmptySearchImg } from './SVG/DefaultEmptySearchImg';
 import { DefaultServerErrorImg } from './SVG/DefaultServerErrorImg';
 import { DefaultTasksCompleteImg } from './SVG/DefaultTasksCompleteImg';
@@ -12,6 +14,8 @@ import styles from './empty.module.scss';
 
 const defaultEmptyDataImg = <DefaultEmptyDataImg />;
 const defaultEmptyMessagesImg = <DefaultEmptyMessagesImg />;
+const defaultEmptyPlanImg = <DefaultEmptyPlanImg />;
+const defaultEmptyProfileImg = <DefaultEmptyProfileImg />;
 const defaultEmptySearchImg = <DefaultEmptySearchImg />;
 const defaultServerErrorImg = <DefaultServerErrorImg />;
 const defaultTasksCompleteImg = <DefaultTasksCompleteImg />;
@@ -41,6 +45,10 @@ export const Empty: FC<EmptyProps> = React.forwardRef(
           return defaultServerErrorImg;
         case EmptyMode.messages:
           return defaultEmptyMessagesImg;
+        case EmptyMode.plan:
+          return defaultEmptyPlanImg;
+        case EmptyMode.profile:
+          return defaultEmptyProfileImg;
         case EmptyMode.search:
           return defaultEmptySearchImg;
         case EmptyMode.tasks:

diff --git a/src/components/Empty/Empty.types.ts b/src/components/Empty/Empty.types.ts
@@ -2,10 +2,12 @@ import { OcBaseProps } from '../OcBase';
 
 export enum EmptyMode {
   data = 'data',
+  error = 'error',
   messages = 'messages',
-  tasks = 'tasks',
+  plan = 'plan',
+  profile = 'profile',
   search = 'search',
-  error = 'error',
+  tasks = 'tasks',
 }
 
 export interface EmptyProps extends OcBaseProps<HTMLDivElement> {

diff --git a/src/components/Empty/SVG/DefaultEmptyDataImg.tsx b/src/components/Empty/SVG/DefaultEmptyDataImg.tsx
@@ -1,55 +1,66 @@
 import React from 'react';
+import styles from '../empty.module.scss';
 
 export const DefaultEmptyDataImg = (): JSX.Element => {
   return (
     <svg
       className={'empty-data-image-default'}
-      width="200"
+      fill="none"
       height="184"
+      width="200"
       viewBox="0 0 200 184"
-      fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
+        className={styles.primaryColor10}
         d="M39.0718 177.839C21.8078 171.861 3.66074 162.325 0.510726 150.175C-2.63929 138.025 9.18787 123.359 24.8068 115.637C40.5358 108.029 59.9069 107.449 71.9662 102.257C83.9156 96.9498 88.5731 86.9309 99.9189 77.9985C111.265 69.066 129.299 61.2199 140.372 64.9517C151.555 68.798 155.648 84.2069 164.716 96.6426C173.785 109.078 187.68 118.625 194.904 131.657C202.237 144.804 202.768 161.422 189.061 166.219C175.355 171.016 147.3 163.877 128.36 165.625C109.569 167.288 99.7624 177.823 86.4541 181.955C73.2954 186.004 56.4854 183.734 39.0718 177.839Z"
-        fill="#EBF7FF"
+        fill="currentColor"
       />
-      <path d="M26 108L38.5 59H160.5L174 108V154H26V108Z" fill="white" />
       <path
-        fillRule="evenodd"
+        className={styles.whiteColor}
+        d="M26 108L38.5 59H160.5L174 108V154H26V108Z"
+        fill="currentColor"
+      />
+      <path
+        className={styles.accentColor20}
         clipRule="evenodd"
         d="M118.495 108.258C118.495 117.504 110.214 123.333 99.9993 123.333C89.7843 123.333 81.5034 117.504 81.5034 108.258C81.5034 107.958 81.5121 105.994 81.5293 105.698H46.666L60.2683 72.6258C60.8547 71.0563 62.4813 70 64.3116 70H135.687C137.517 70 139.144 71.0563 139.73 72.6258L153.333 105.698H118.469C118.487 105.994 118.495 107.958 118.495 108.258Z"
-        fill="#B0F3FE"
+        fill="currentColor"
+        fillRule="evenodd"
       />
       <path
-        fillRule="evenodd"
+        className={styles.primaryColor30}
         clipRule="evenodd"
         d="M152.505 59.9999L47.4938 60.0006C43.6128 60.0006 40.0926 62.6542 38.7909 66.7166L27.5922 101.666L74.0905 101.666C78.722 101.666 83.0934 103.873 86.0399 107.654L92.9658 116.542C96.6469 121.266 103.355 121.266 107.037 116.542L113.962 107.654C116.909 103.873 121.28 101.666 125.912 101.666L172.408 101.666L161.208 66.7158C159.906 62.6534 156.386 59.9999 152.505 59.9999ZM173.651 108.333L125.912 108.333C123.217 108.333 120.638 109.615 118.876 111.876L111.95 120.763C105.729 128.747 94.2733 128.747 88.0518 120.763L81.126 111.876C79.3647 109.615 76.7854 108.333 74.0906 108.333L26.3492 108.333L26.3493 143.333C26.3493 148.934 30.548 153.333 35.5634 153.333L164.436 153.333C169.452 153.333 173.65 148.934 173.651 143.333L173.651 108.333ZM47.4937 53.3339L152.505 53.3333C159.195 53.3332 165.081 57.8972 167.226 64.5898L180 104.454L180 143.333C180 152.46 173.105 159.999 164.436 159.999L35.5635 160C26.8946 160 20.0001 152.46 20 143.333L20 104.454L32.7731 64.5908C34.9176 57.898 40.804 53.334 47.4937 53.3339Z"
-        fill="#8ED0FA"
+        fill="currentColor"
+        fillRule="evenodd"
       />
       <rect
-        x="93.334"
-        width="13.3333"
+        className={styles.accentColor20}
+        fill="currentColor"
         height="40"
         rx="6.66667"
-        fill="#B0F3FE"
+        width="13.3333"
+        x="93.334"
       />
       <rect
-        x="46.666"
-        y="6.66675"
-        width="13.3333"
+        className={styles.accentColor20}
+        fill="currentColor"
         height="40"
         rx="6.66667"
         transform="rotate(-30 46.666 6.66675)"
-        fill="#B0F3FE"
+        width="13.3333"
+        x="46.666"
+        y="6.66675"
       />
       <rect
-        x="141.666"
-        width="13.3333"
+        className={styles.accentColor20}
+        fill="currentColor"
         height="40"
         rx="6.66667"
         transform="rotate(30 141.666 0)"
-        fill="#B0F3FE"
+        width="13.3333"
+        x="141.666"
       />
     </svg>
   );

diff --git a/src/components/Empty/SVG/DefaultEmptyMessagesImg.tsx b/src/components/Empty/SVG/DefaultEmptyMessagesImg.tsx
@@ -1,41 +1,45 @@
 import React from 'react';
+import styles from '../empty.module.scss';
 
 export const DefaultEmptyMessagesImg = (): JSX.Element => {
   return (
     <svg
       className={'empty-messages-image-default'}
-      width="200"
+      fill="none"
       height="184"
+      width="200"
       viewBox="0 0 200 184"
-      fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
+        className={styles.primaryColor10}
         d="M39.0718 177.839C21.8078 171.861 3.66074 162.325 0.510726 150.175C-2.63929 138.025 9.18787 123.359 24.8068 115.637C40.5358 108.029 59.9069 107.449 71.9662 102.257C83.9156 96.9498 88.5731 86.9309 99.9189 77.9985C111.265 69.066 129.299 61.2199 140.372 64.9517C151.555 68.798 155.648 84.2069 164.716 96.6426C173.785 109.078 187.68 118.625 194.904 131.657C202.237 144.804 202.768 161.422 189.061 166.219C175.355 171.016 147.3 163.877 128.36 165.625C109.569 167.288 99.7624 177.823 86.4541 181.955C73.2954 186.004 56.4854 183.734 39.0718 177.839Z"
-        fill="#EBF7FF"
+        fill="currentColor"
       />
       <path
+        className={styles.whiteColorFillPrimaryColor30Stroke}
         d="M131.098 145.069C125.349 140.58 119.665 136.448 116.52 133.384C116.016 132.893 115.288 132.671 114.598 132.81C35.5718 148.779 -9.97428 65.6821 65.669 27.1035C65.7558 27.0592 65.8525 27.0185 65.9449 26.9875C142.983 1.22162 204.241 81.5443 135.362 124.844C134.772 125.214 134.381 125.876 134.381 126.572L134.381 143.483C134.381 145.166 132.424 146.105 131.098 145.069Z"
-        fill="white"
-        stroke="#8ED0FA"
         strokeWidth="6"
       />
       <path
+        className={styles.accentColor20}
         d="M66.3926 86.6624C70.9586 86.6624 74.3926 82.703 74.3926 78.1624C74.3926 73.6217 70.9586 69.6624 66.3926 69.6624C61.8266 69.6624 58.3926 73.6217 58.3926 78.1624C58.3926 82.703 61.8266 86.6624 66.3926 86.6624Z"
-        fill="#B0F3FE"
-        stroke="#B0F3FE"
+        fill="currentColor"
+        stroke="currentColor"
         strokeWidth="4"
       />
       <path
+        className={styles.accentColor20}
         d="M94.3926 86.6624C98.9586 86.6624 102.393 82.703 102.393 78.1624C102.393 73.6217 98.9586 69.6624 94.3926 69.6624C89.8266 69.6624 86.3926 73.6217 86.3926 78.1624C86.3926 82.703 89.8266 86.6624 94.3926 86.6624Z"
-        fill="#B0F3FE"
-        stroke="#B0F3FE"
+        fill="currentColor"
+        stroke="currentColor"
         strokeWidth="4"
       />
       <path
+        className={styles.accentColor20}
         d="M122.393 86.6624C126.959 86.6624 130.393 82.703 130.393 78.1624C130.393 73.6217 126.959 69.6624 122.393 69.6624C117.827 69.6624 114.393 73.6217 114.393 78.1624C114.393 82.703 117.827 86.6624 122.393 86.6624Z"
-        fill="#B0F3FE"
-        stroke="#B0F3FE"
+        fill="currentColor"
+        stroke="currentColor"
         strokeWidth="4"
       />
     </svg>

diff --git a/src/components/Empty/SVG/DefaultEmptyPlanImg.tsx b/src/components/Empty/SVG/DefaultEmptyPlanImg.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import styles from '../empty.module.scss';
+
+export const DefaultEmptyPlanImg = (): JSX.Element => {
+  return (
+    <svg
+      className={'empty-plan-image-default'}
+      fill="none"
+      height="187"
+      width="200"
+      viewBox="0 0 200 187"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        className={styles.primaryColor10}
+        d="M39.0718 180.839C21.8078 174.861 3.66074 165.325 0.510726 153.175C-2.63929 141.025 9.18787 126.359 24.8068 118.637C40.5358 111.029 59.9069 110.449 71.9662 105.257C83.9156 99.9498 88.5731 89.9309 99.9189 80.9985C111.265 72.066 129.299 64.2199 140.372 67.9517C151.555 71.798 155.648 87.2069 164.716 99.6426C173.785 112.078 187.68 121.625 194.904 134.657C202.237 147.804 202.768 164.422 189.061 169.219C175.355 174.016 147.3 166.877 128.36 168.625C109.569 170.288 99.7624 180.823 86.4541 184.955C73.2954 189.004 56.4854 186.734 39.0718 180.839Z"
+        fill="currentColor"
+      />
+      <path
+        className={styles.accentColor20}
+        d="M183 115.819V134H72V115.819L72.4336 111.923C73.0117 108.748 74.168 105.718 75.9023 102.832C77.9258 98.5034 80.6719 94.7517 84.1406 91.5772C88.4766 87.8255 93.9687 84.7953 100.617 82.4866C108.133 79.8893 117.094 78.5906 127.5 78.5906C143.977 78.5906 156.984 81.7651 166.523 88.1141C173.461 92.7315 178.375 98.792 181.266 106.295C182.422 109.758 183 112.933 183 115.819ZM155.25 32.7047C155.25 24.9128 152.504 18.4195 147.012 13.2248C141.809 7.74161 135.305 5 127.5 5C119.984 5 113.48 7.74161 107.988 13.2248C102.496 18.4195 99.75 24.9128 99.75 32.7047C99.75 40.2081 102.496 46.7013 107.988 52.1846C113.48 57.6678 119.984 60.4094 127.5 60.4094C135.305 60.4094 141.809 57.6678 147.012 52.1846C152.504 46.7013 155.25 40.2081 155.25 32.7047Z"
+        fill="currentColor"
+      />
+      <path
+        className={styles.whiteColor}
+        d="M159 112.96V131H48V112.96L48.4336 109.094C49.0117 105.944 50.168 102.937 51.9023 100.074C53.9258 95.7785 56.6719 92.0559 60.1406 88.906C64.4766 85.1834 69.9687 82.1767 76.6172 79.8859C84.1328 77.3087 93.0938 76.0201 103.5 76.0201C119.977 76.0201 132.984 79.17 142.523 85.4698C149.461 90.0515 154.375 96.0649 157.266 103.51C158.422 106.946 159 110.096 159 112.96ZM131.25 30.4899C131.25 22.7584 128.504 16.3154 123.012 11.1611C117.809 5.72036 111.305 3 103.5 3C95.9844 3 89.4805 5.72036 83.9883 11.1611C78.4961 16.3154 75.75 22.7584 75.75 30.4899C75.75 37.9351 78.4961 44.3781 83.9883 49.8188C89.4805 55.2595 95.9844 57.9799 103.5 57.9799C111.305 57.9799 117.809 55.2595 123.012 49.8188C128.504 44.3781 131.25 37.9351 131.25 30.4899Z"
+        fill="currentColor"
+      />
+      <path
+        className={styles.primaryColor30}
+        d="M159 112.96V131H48V112.96L48.4336 109.094C49.0117 105.944 50.168 102.937 51.9023 100.074C53.9258 95.7785 56.6719 92.0559 60.1406 88.906C64.4766 85.1834 69.9687 82.1767 76.6172 79.8859C84.1328 77.3087 93.0938 76.0201 103.5 76.0201C119.977 76.0201 132.984 79.17 142.523 85.4698C149.461 90.0515 154.375 96.0649 157.266 103.51C158.422 106.946 159 110.096 159 112.96ZM131.25 30.4899C131.25 22.7584 128.504 16.3154 123.012 11.1611C117.809 5.72036 111.305 3 103.5 3C95.9844 3 89.4805 5.72036 83.9883 11.1611C78.4961 16.3154 75.75 22.7584 75.75 30.4899C75.75 37.9351 78.4961 44.3781 83.9883 49.8188C89.4805 55.2595 95.9844 57.9799 103.5 57.9799C111.305 57.9799 117.809 55.2595 123.012 49.8188C128.504 44.3781 131.25 37.9351 131.25 30.4899Z"
+        stroke="currentColor"
+        stroke-width="6"
+      />
+      <path
+        className={styles.accentColor20}
+        d="M69 52.9545L58.65 40L25.4438 73.25L10.7812 58.5682L0 69.3636L25.4438 97L69 52.9545Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
diff --git a/src/components/Empty/SVG/DefaultEmptyProfileImg.tsx b/src/components/Empty/SVG/DefaultEmptyProfileImg.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import styles from '../empty.module.scss';
+
+export const DefaultEmptyProfileImg = (): JSX.Element => {
+  return (
+    <svg
+      className={'empty-profile-image-default'}
+      fill="none"
+      height="187"
+      width="200"
+      viewBox="0 0 200 187"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        className={styles.primaryColor10}
+        d="M39.0718 180.839C21.8078 174.861 3.66074 165.325 0.510726 153.175C-2.63929 141.025 9.18787 126.359 24.8068 118.637C40.5358 111.029 59.9069 110.449 71.9662 105.257C83.9156 99.9498 88.5731 89.9309 99.9189 80.9985C111.265 72.066 129.299 64.2199 140.372 67.9517C151.555 71.798 155.648 87.2069 164.716 99.6426C173.785 112.078 187.68 121.625 194.904 134.657C202.237 147.804 202.768 164.422 189.061 169.219C175.355 174.016 147.3 166.877 128.36 168.625C109.569 170.288 99.7624 180.823 86.4541 184.955C73.2954 189.004 56.4854 186.734 39.0718 180.839Z"
+        fill="currentColor"
+      />
+      <path
+        className={styles.whiteColor}
+        d="M159 112.96V131H48V112.96L48.4336 109.094C49.0117 105.944 50.168 102.937 51.9023 100.074C53.9258 95.7785 56.6719 92.0559 60.1406 88.906C64.4766 85.1834 69.9687 82.1767 76.6172 79.8859C84.1328 77.3087 93.0938 76.0201 103.5 76.0201C119.977 76.0201 132.984 79.17 142.523 85.4698C149.461 90.0515 154.375 96.0649 157.266 103.51C158.422 106.946 159 110.096 159 112.96ZM131.25 30.4899C131.25 22.7584 128.504 16.3154 123.012 11.1611C117.809 5.72036 111.305 3 103.5 3C95.9844 3 89.4805 5.72036 83.9883 11.1611C78.4961 16.3154 75.75 22.7584 75.75 30.4899C75.75 37.9351 78.4961 44.3781 83.9883 49.8188C89.4805 55.2595 95.9844 57.9799 103.5 57.9799C111.305 57.9799 117.809 55.2595 123.012 49.8188C128.504 44.3781 131.25 37.9351 131.25 30.4899Z"
+        fill="currentColor"
+      />
+      <path
+        className={styles.primaryColor30}
+        d="M159 112.96V131H48V112.96L48.4336 109.094C49.0117 105.944 50.168 102.937 51.9023 100.074C53.9258 95.7785 56.6719 92.0559 60.1406 88.906C64.4766 85.1834 69.9687 82.1767 76.6172 79.8859C84.1328 77.3087 93.0938 76.0201 103.5 76.0201C119.977 76.0201 132.984 79.17 142.523 85.4698C149.461 90.0515 154.375 96.0649 157.266 103.51C158.422 106.946 159 110.096 159 112.96ZM131.25 30.4899C131.25 22.7584 128.504 16.3154 123.012 11.1611C117.809 5.72036 111.305 3 103.5 3C95.9844 3 89.4805 5.72036 83.9883 11.1611C78.4961 16.3154 75.75 22.7584 75.75 30.4899C75.75 37.9351 78.4961 44.3781 83.9883 49.8188C89.4805 55.2595 95.9844 57.9799 103.5 57.9799C111.305 57.9799 117.809 55.2595 123.012 49.8188C128.504 44.3781 131.25 37.9351 131.25 30.4899Z"
+        stroke="currentColor"
+        stroke-width="6"
+      />
+      <path
+        className={styles.whiteColorFillPrimaryColor30Stroke}
+        d="M38.3391 79.9439L38.4197 80.0328L38.5072 80.1149C40.5896 82.0714 43.1391 83.0714 46 83.0714C48.8641 83.0714 51.4042 82.0657 53.4032 80.031C55.4671 77.9302 56.5439 75.3331 56.5439 72.3929C56.5439 69.4874 55.4889 66.9326 53.4044 64.932C51.4384 62.8098 48.9043 61.7143 46 61.7143C43.0627 61.7143 40.4866 62.8312 38.4214 64.9332C36.4255 66.9647 35.4561 69.5243 35.4561 72.3929C35.4561 75.2597 36.4211 77.829 38.3391 79.9439ZM71.497 50.1225L71.5776 50.2113L71.6651 50.2935C72.6031 51.1748 73 52.1184 73 53.2857V91.5C73 92.6673 72.6031 93.6109 71.6651 94.4922L71.5776 94.5744L71.497 94.6632C70.6671 95.5783 69.7223 96 68.4561 96H23.5439C22.2706 96 21.221 95.5693 20.2453 94.5761C19.3994 93.7151 19 92.7467 19 91.5V53.2857C19 52.0391 19.3994 51.0706 20.2453 50.2096C21.221 49.2165 22.2706 48.7857 23.5439 48.7857H27.2281H30.2281V45.7857V38.1071C30.2281 35.1584 30.9196 32.527 32.278 30.1504C33.79 27.5909 35.7154 25.649 38.0579 24.2581L38.074 24.2486L38.0899 24.2389C40.5481 22.7376 43.1658 22 46 22C48.8332 22 51.3721 22.7365 53.688 24.2098L53.7494 24.2489L53.8126 24.2849C56.2513 25.6749 58.1385 27.5927 59.5119 30.089L59.5464 30.1517L59.5838 30.2126C61.0393 32.583 61.7719 35.1916 61.7719 38.1071V45.7857V48.7857H64.7719H68.4561C69.7223 48.7857 70.6671 49.2074 71.497 50.1225ZM31.7719 45.7857V48.7857H34.7719H57.2281H60.2281V45.7857V38.1071C60.2281 34.1433 58.8317 30.6934 56.0353 27.9683C53.3568 25.1208 49.9429 23.6786 46 23.6786C42.0335 23.6786 38.5735 25.1356 35.7898 27.969C33.0922 30.7147 31.7719 34.1672 31.7719 38.1071V45.7857Z"
+        stroke-width="6"
+      />
+      <ellipse
+        className={styles.accentColor20}
+        cx="46"
+        cy="72.5"
+        fill="currentColor"
+        rx="8"
+        ry="8.5"
+      />
+    </svg>
+  );
+};