@xqmsg/ui-core 0.23.2 → 0.24.0

package/src/components/form/section/FormSection.stories.tsx

@@ -1,109 +1,109 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import * as Yup from 'yup';
-
-import { useFormHandler } from '../../../../src/components/form/hooks/useFormHandler';
-
-import { FormSection, FormSectionProps } from '.';
-import { FormStructure } from '../FormTypes';
-
-type FormSectionStoryValues = {
-  [k: string]: any;
-};
-
-const meta: Meta<FormSectionProps<'story', FormSectionStoryValues>> = {
-  title: 'Form section example',
-  component: FormSection,
-  argTypes: {
-    formStructure: {
-      control: null,
-      description: 'The form generated from `useFormHandler` hook.',
-    },
-    section: {
-      description: 'The section of the `FormStructure` to generate.',
-    },
-    form: {
-      description: 'The form object of `FormStructure<T>`.',
-    },
-  },
-
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-
-interface StoryFormSchema {
-  prop?: string;
-}
-
-const onStubbedSubmit = () => null;
-
-const storyFormDefaultValues: StoryFormSchema = {
-  prop: '',
-};
-
-const storyFormSchema: Yup.SchemaOf<StoryFormSchema> = Yup.object().shape({
-  prop: Yup.string().required(),
-});
-
-export default meta;
-const Template: Story<FormSectionProps<
-  'story',
-  FormSectionStoryValues
->> = args => {
-  const formHandler = useFormHandler<StoryFormSchema>(
-    onStubbedSubmit,
-    storyFormDefaultValues,
-    storyFormSchema,
-    false,
-    'all'
-  );
-
-  const { form } = formHandler;
-
-  const section = args.section as 'story';
-  const formStructure = args.formStructure as FormStructure<'story'>;
-
-  return (
-    <>
-      <FormSection
-        form={form}
-        formStructure={formStructure}
-        section={section}
-      />
-    </>
-  );
-};
-
-export const Default = Template.bind({});
-
-export const formSectionStoryArgs: Partial<FormSectionProps<
-  'story',
-  FormSectionStoryValues
->> = {
-  formStructure: {
-    story: [
-      {
-        label: 'Encryption Algorithm',
-        name: 'algorithm',
-        inputType: 'select',
-        isRequired: true,
-        ariaLabel: 'encryption algorithm input',
-        options: [
-          { value: 'aes', label: 'AES - Advanced Encryption Standard' },
-          { value: 'otp', label: 'OTP - One Time Pad' },
-        ],
-      },
-      {
-        label: 'Allow Team Members to Change Settings',
-        name: 'allow',
-        ariaLabel: 'allow team members input',
-        inputType: 'text',
-        isRequired: true,
-      },
-    ],
-  },
-  section: 'story',
-};
-
-Default.args = formSectionStoryArgs;
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import * as Yup from 'yup';
+
+import { useFormHandler } from '../../../../src/components/form/hooks/useFormHandler';
+
+import { FormSection, FormSectionProps } from '.';
+import { FormStructure } from '../FormTypes';
+
+type FormSectionStoryValues = {
+  [k: string]: any;
+};
+
+const meta: Meta<FormSectionProps<'story', FormSectionStoryValues>> = {
+  title: 'Form section example',
+  component: FormSection,
+  argTypes: {
+    formStructure: {
+      control: null,
+      description: 'The form generated from `useFormHandler` hook.',
+    },
+    section: {
+      description: 'The section of the `FormStructure` to generate.',
+    },
+    form: {
+      description: 'The form object of `FormStructure<T>`.',
+    },
+  },
+
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+interface StoryFormSchema {
+  prop?: string;
+}
+
+const onStubbedSubmit = () => null;
+
+const storyFormDefaultValues: StoryFormSchema = {
+  prop: '',
+};
+
+const storyFormSchema: Yup.SchemaOf<StoryFormSchema> = Yup.object().shape({
+  prop: Yup.string().required(),
+});
+
+export default meta;
+const Template: Story<FormSectionProps<
+  'story',
+  FormSectionStoryValues
+>> = args => {
+  const formHandler = useFormHandler<StoryFormSchema>(
+    onStubbedSubmit,
+    storyFormDefaultValues,
+    storyFormSchema,
+    false,
+    'all'
+  );
+
+  const { form } = formHandler;
+
+  const section = args.section as 'story';
+  const formStructure = args.formStructure as FormStructure<'story'>;
+
+  return (
+    <>
+      <FormSection
+        form={form}
+        formStructure={formStructure}
+        section={section}
+      />
+    </>
+  );
+};
+
+export const Default = Template.bind({});
+
+export const formSectionStoryArgs: Partial<FormSectionProps<
+  'story',
+  FormSectionStoryValues
+>> = {
+  formStructure: {
+    story: [
+      {
+        label: 'Encryption Algorithm',
+        name: 'algorithm',
+        inputType: 'select',
+        isRequired: true,
+        ariaLabel: 'encryption algorithm input',
+        options: [
+          { value: 'aes', label: 'AES - Advanced Encryption Standard' },
+          { value: 'otp', label: 'OTP - One Time Pad' },
+        ],
+      },
+      {
+        label: 'Allow Team Members to Change Settings',
+        name: 'allow',
+        ariaLabel: 'allow team members input',
+        inputType: 'text',
+        isRequired: true,
+      },
+    ],
+  },
+  section: 'story',
+};
+
+Default.args = formSectionStoryArgs;

package/src/components/form/section/index.tsx

@@ -1,87 +1,87 @@
-import { SimpleGrid } from '@chakra-ui/react';
-import React from 'react';
-import { FieldValues, UseFormReturn } from 'react-hook-form';
-import { Input } from '../../input';
-import { FormInput, FormStructure } from '../FormTypes';
-
-/**
- * @param T - represents the key/section in the `FormStructure`.
- * @param U - is the form value types for the `useFormHandler` hook.
- *
- * @param formStructure - the form of type form structure with their respective `FormSteps`.
- * @param section - the section (`FormStep`) we want to generate a section for.
- * @param form - the overall form containing methods (generated by `useFormHandler` hook).
- */
-export interface FormSectionProps<
-  T extends string | number | symbol,
-  U extends FieldValues
-> {
-  formStructure: FormStructure<T>;
-  section: T;
-  form: UseFormReturn<U>;
-  className?: string;
-  columns?: number;
-  spacing?: number;
-}
-
-/**
- *
- * @param props - of type `FormSectionProps<T, U>` where `T` represents the key in `FormSteps`,
- * can be generic key but is represented by value in `FormSteps` and `U` is the form value types for the
- * `useFormHandler` hook.
- *
- * @returns a list of input's for a specific form section.
- */
-export function FormSection<
-  T extends string | number | symbol,
-  U extends FieldValues
->({
-  formStructure,
-  section,
-  form,
-  className,
-  columns = 1,
-  spacing = 0,
-}: FormSectionProps<T, U>) {
-  return (
-    <SimpleGrid
-      columns={columns}
-      spacing={spacing}
-      className={`form-section ${className ?? ''}`}
-    >
-      {formStructure[section].map(
-        ({
-          label,
-          inputType,
-          name,
-          options,
-          isRequired,
-          maxLength,
-          ariaLabel,
-          disabled,
-          defaultValue,
-          variant,
-        }: FormInput) => (
-          <Input<U>
-            key={name}
-            control={form.control}
-            label={label}
-            inputType={inputType}
-            name={name}
-            ariaLabel={ariaLabel}
-            disabled={disabled}
-            options={options}
-            isRequired={isRequired}
-            maxLength={maxLength}
-            isInvalid={!!form.formState.errors[name]}
-            defaultValue={defaultValue}
-            setValue={form.setValue}
-            setError={form.setError}
-            clearErrors={form.clearErrors}
-            variant={variant ? variant : ''}
-          />
-        )
-      )}
-    </SimpleGrid>
-  );
-}
+import { SimpleGrid } from '@chakra-ui/react';
+import React from 'react';
+import { FieldValues, UseFormReturn } from 'react-hook-form';
+import { Input } from '../../input';
+import { FormInput, FormStructure } from '../FormTypes';
+
+/**
+ * @param T - represents the key/section in the `FormStructure`.
+ * @param U - is the form value types for the `useFormHandler` hook.
+ *
+ * @param formStructure - the form of type form structure with their respective `FormSteps`.
+ * @param section - the section (`FormStep`) we want to generate a section for.
+ * @param form - the overall form containing methods (generated by `useFormHandler` hook).
+ */
+export interface FormSectionProps<
+  T extends string | number | symbol,
+  U extends FieldValues
+> {
+  formStructure: FormStructure<T>;
+  section: T;
+  form: UseFormReturn<U>;
+  className?: string;
+  columns?: number;
+  spacing?: number;
+}
+
+/**
+ *
+ * @param props - of type `FormSectionProps<T, U>` where `T` represents the key in `FormSteps`,
+ * can be generic key but is represented by value in `FormSteps` and `U` is the form value types for the
+ * `useFormHandler` hook.
+ *
+ * @returns a list of input's for a specific form section.
+ */
+export function FormSection<
+  T extends string | number | symbol,
+  U extends FieldValues
+>({
+  formStructure,
+  section,
+  form,
+  className,
+  columns = 1,
+  spacing = 0,
+}: FormSectionProps<T, U>) {
+  return (
+    <SimpleGrid
+      columns={columns}
+      spacing={spacing}
+      className={`form-section ${className ?? ''}`}
+    >
+      {formStructure[section].map(
+        ({
+          label,
+          inputType,
+          name,
+          options,
+          isRequired,
+          maxLength,
+          ariaLabel,
+          disabled,
+          defaultValue,
+          variant,
+        }: FormInput) => (
+          <Input<U>
+            key={name}
+            control={form.control}
+            label={label}
+            inputType={inputType}
+            name={name}
+            ariaLabel={ariaLabel}
+            disabled={disabled}
+            options={options}
+            isRequired={isRequired}
+            maxLength={maxLength}
+            isInvalid={!!form.formState.errors[name]}
+            defaultValue={defaultValue}
+            setValue={form.setValue}
+            setError={form.setError}
+            clearErrors={form.clearErrors}
+            variant={variant ? variant : ''}
+          />
+        )
+      )}
+    </SimpleGrid>
+  );
+}

package/src/components/form/utils/formErrors.ts

@@ -1,34 +1,34 @@
-/* eslint-disable no-redeclare */
-import { AxiosError } from 'axios';
-
-export type ErrorResponse = {
-  message: string;
-};
-
-export function formatErrorResponse(error: AxiosError): ErrorResponse;
-export function formatErrorResponse(error: Error): ErrorResponse;
-export function formatErrorResponse(error: any): ErrorResponse {
-  // This is an error returned from the backend
-  if (error.response?.data?.status) {
-    return {
-      message: error.response?.data?.status,
-    };
-  }
-
-  // This is any generic error
-  if (error instanceof Error) {
-    return {
-      message: error.message,
-    };
-  }
-
-  // This would happen if a developer threw an error that isn't actually an error class. Don't do that...
-  console.error(
-    'Caught an error that is not an instance of an error! Replacing with a proper error but please fix this.',
-    error
-  );
-
-  return {
-    message: 'An unknown error has occurred',
-  };
-}
+/* eslint-disable no-redeclare */
+import { AxiosError } from 'axios';
+
+export type ErrorResponse = {
+  message: string;
+};
+
+export function formatErrorResponse(error: AxiosError): ErrorResponse;
+export function formatErrorResponse(error: Error): ErrorResponse;
+export function formatErrorResponse(error: any): ErrorResponse {
+  // This is an error returned from the backend
+  if (error.response?.data?.status) {
+    return {
+      message: error.response?.data?.status,
+    };
+  }
+
+  // This is any generic error
+  if (error instanceof Error) {
+    return {
+      message: error.message,
+    };
+  }
+
+  // This would happen if a developer threw an error that isn't actually an error class. Don't do that...
+  console.error(
+    'Caught an error that is not an instance of an error! Replacing with a proper error but please fix this.',
+    error
+  );
+
+  return {
+    message: 'An unknown error has occurred',
+  };
+}

package/src/components/icons/checkmark/checkmark.svg

@@ -1,3 +1,3 @@
-<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.7467 0.127888C12.0291 0.33708 12.0836 0.729242 11.8685 1.00381L5.01133 9.75378C4.89891 9.89724 4.72822 9.98649 4.54313 9.99859C4.35804 10.0107 4.17659 9.94447 4.04542 9.81694L0.188288 6.06695C-0.0627627 5.82288 -0.0627627 5.42715 0.188288 5.18307C0.439339 4.939 0.846372 4.939 1.09742 5.18307L4.43443 8.42738L10.8458 0.246255C11.0609 -0.0283092 11.4643 -0.0813041 11.7467 0.127888Z" fill="black"/>
-</svg>
+<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.7467 0.127888C12.0291 0.33708 12.0836 0.729242 11.8685 1.00381L5.01133 9.75378C4.89891 9.89724 4.72822 9.98649 4.54313 9.99859C4.35804 10.0107 4.17659 9.94447 4.04542 9.81694L0.188288 6.06695C-0.0627627 5.82288 -0.0627627 5.42715 0.188288 5.18307C0.439339 4.939 0.846372 4.939 1.09742 5.18307L4.43443 8.42738L10.8458 0.246255C11.0609 -0.0283092 11.4643 -0.0813041 11.7467 0.127888Z" fill="black"/>
+</svg>

package/src/components/icons/checkmark/index.tsx

@@ -1,13 +1,13 @@
-import React from 'react';
-import { ReactComponent as CheckmarkIcon } from './checkmark.svg';
-
-export interface CheckmarkProps {
-  boxSize: number | string;
-}
-
-/**
- * A functional React component utilized to render the `Checkmark` icon component
- */
-export const Checkmark: React.FC<CheckmarkProps> = ({ boxSize }) => {
-  return <CheckmarkIcon boxSize={boxSize} />;
-};
+import React from 'react';
+import { ReactComponent as CheckmarkIcon } from './checkmark.svg';
+
+export interface CheckmarkProps {
+  boxSize: number | string;
+}
+
+/**
+ * A functional React component utilized to render the `Checkmark` icon component
+ */
+export const Checkmark: React.FC<CheckmarkProps> = ({ boxSize }) => {
+  return <CheckmarkIcon boxSize={boxSize} />;
+};

package/src/components/icons/chevron/down/chevron-down.svg

@@ -1,3 +1,3 @@
-<svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0.184136 0.767507C0.422999 0.537831 0.802824 0.545278 1.0325 0.784142L4 3.93434L6.9675 0.784142C7.19718 0.545279 7.577 0.537831 7.81587 0.767507C8.05473 0.997183 8.06218 1.37701 7.8325 1.61587L4.4325 5.21587C4.31938 5.33352 4.16321 5.40001 4 5.40001C3.83679 5.40001 3.68062 5.33352 3.5675 5.21587L0.167501 1.61587C-0.0621751 1.37701 -0.0547276 0.997183 0.184136 0.767507Z" fill="#3C3C432E"/>
-</svg>
+<svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.184136 0.767507C0.422999 0.537831 0.802824 0.545278 1.0325 0.784142L4 3.93434L6.9675 0.784142C7.19718 0.545279 7.577 0.537831 7.81587 0.767507C8.05473 0.997183 8.06218 1.37701 7.8325 1.61587L4.4325 5.21587C4.31938 5.33352 4.16321 5.40001 4 5.40001C3.83679 5.40001 3.68062 5.33352 3.5675 5.21587L0.167501 1.61587C-0.0621751 1.37701 -0.0547276 0.997183 0.184136 0.767507Z" fill="#3C3C432E"/>
+</svg>

package/src/components/icons/chevron/down/index.tsx

@@ -1,14 +1,14 @@
-import React from 'react';
-import colors from '../../../../theme/foundations/colors';
-import { ReactComponent as ChevronDownIcon } from './chevron-down.svg';
-
-export interface ChevronDownProps {
-  boxSize: number | string;
-}
-
-/**
- * A functional React component utilized to render the `ChevronDown` icon component
- */
-export const ChevronDown: React.FC<ChevronDownProps> = ({ boxSize }) => {
-  return <ChevronDownIcon boxSize={boxSize} fill={colors.fill.action} />;
-};
+import React from 'react';
+import colors from '../../../../theme/foundations/colors';
+import { ReactComponent as ChevronDownIcon } from './chevron-down.svg';
+
+export interface ChevronDownProps {
+  boxSize: number | string;
+}
+
+/**
+ * A functional React component utilized to render the `ChevronDown` icon component
+ */
+export const ChevronDown: React.FC<ChevronDownProps> = ({ boxSize }) => {
+  return <ChevronDownIcon boxSize={boxSize} fill={colors.fill.action} />;
+};

package/src/components/icons/chevron/right/chevron-right.svg

@@ -1,3 +1,3 @@
-<svg width="6" height="8" viewBox="0 0 6 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0.767599 7.81586C0.537923 7.577 0.54537 7.19718 0.784233 6.9675L3.93443 4L0.784233 1.0325C0.54537 0.802823 0.537922 0.422997 0.767598 0.184134C0.997274 -0.0547285 1.3771 -0.0621767 1.61596 0.167499L5.21596 3.5675C5.33361 3.68062 5.4001 3.83679 5.4001 4C5.4001 4.16321 5.33361 4.31938 5.21596 4.4325L1.61596 7.8325C1.3771 8.06218 0.997275 8.05473 0.767599 7.81586Z" fill="#3C3C432E"/>
-</svg>
+<svg width="6" height="8" viewBox="0 0 6 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.767599 7.81586C0.537923 7.577 0.54537 7.19718 0.784233 6.9675L3.93443 4L0.784233 1.0325C0.54537 0.802823 0.537922 0.422997 0.767598 0.184134C0.997274 -0.0547285 1.3771 -0.0621767 1.61596 0.167499L5.21596 3.5675C5.33361 3.68062 5.4001 3.83679 5.4001 4C5.4001 4.16321 5.33361 4.31938 5.21596 4.4325L1.61596 7.8325C1.3771 8.06218 0.997275 8.05473 0.767599 7.81586Z" fill="#3C3C432E"/>
+</svg>

package/src/components/icons/chevron/right/index.tsx

@@ -1,13 +1,13 @@
-import React from 'react';
-import { ReactComponent as ChevronRightIcon } from './chevron-right.svg';
-
-export interface ChevronRightProps {
-  boxSize: number | string;
-}
-
-/**
- * A functional React component utilized to render the `ChevronRight` icon component
- */
-export const ChevronRight: React.FC<ChevronRightProps> = ({ boxSize }) => {
-  return <ChevronRightIcon boxSize={boxSize} />;
-};
+import React from 'react';
+import { ReactComponent as ChevronRightIcon } from './chevron-right.svg';
+
+export interface ChevronRightProps {
+  boxSize: number | string;
+}
+
+/**
+ * A functional React component utilized to render the `ChevronRight` icon component
+ */
+export const ChevronRight: React.FC<ChevronRightProps> = ({ boxSize }) => {
+  return <ChevronRightIcon boxSize={boxSize} />;
+};

package/src/components/icons/clock/clock.svg

@@ -1,3 +1,3 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 3V7H10M13 7C13 10.3137 10.3137 13 7 13C3.68629 13 1 10.3137 1 7C1 3.68629 3.68629 1 7 1C10.3137 1 13 3.68629 13 7Z" stroke="#0082ff" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 3V7H10M13 7C13 10.3137 10.3137 13 7 13C3.68629 13 1 10.3137 1 7C1 3.68629 3.68629 1 7 1C10.3137 1 13 3.68629 13 7Z" stroke="#0082ff" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/icons/clock/index.tsx

@@ -1,13 +1,13 @@
-import React from 'react';
-import { ReactComponent as ClockIcon } from './clock.svg';
-
-export interface ClockProps {
-  boxSize: number | string;
-}
-
-/**
- * A functional React component utilized to render the `Clock` icon component
- */
-export const Clock: React.FC<ClockProps> = ({ boxSize }) => {
-  return <ClockIcon boxSize={boxSize} />;
-};
+import React from 'react';
+import { ReactComponent as ClockIcon } from './clock.svg';
+
+export interface ClockProps {
+  boxSize: number | string;
+}
+
+/**
+ * A functional React component utilized to render the `Clock` icon component
+ */
+export const Clock: React.FC<ClockProps> = ({ boxSize }) => {
+  return <ClockIcon boxSize={boxSize} />;
+};

package/src/components/icons/close/close.svg

@@ -1,3 +1,3 @@
-<svg  viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M27.9995 56C43.4635 56 55.9995 43.464 55.9995 28C55.9995 12.536 43.4635 0 27.9995 0C12.5355 0 -0.000488281 12.536 -0.000488281 28C-0.000488281 43.464 12.5355 56 27.9995 56ZM21.9807 18.2688C20.9555 17.2437 19.2935 17.2437 18.2684 18.2688C17.2432 19.294 17.2432 20.956 18.2684 21.9812L24.2872 28L18.2684 34.0188C17.2432 35.044 17.2432 36.706 18.2684 37.7312C19.2935 38.7563 20.9555 38.7563 21.9807 37.7312L27.9995 31.7123L34.0184 37.7312C35.0435 38.7563 36.7055 38.7563 37.7307 37.7312C38.7558 36.706 38.7558 35.044 37.7307 34.0188L31.7118 28L37.7307 21.9812C38.7558 20.956 38.7558 19.294 37.7307 18.2688C36.7055 17.2437 35.0435 17.2437 34.0184 18.2688L27.9995 24.2877L21.9807 18.2688Z" fill="#3C3C43" fill-opacity="0.6"/>
-</svg>
+<svg  viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.9995 56C43.4635 56 55.9995 43.464 55.9995 28C55.9995 12.536 43.4635 0 27.9995 0C12.5355 0 -0.000488281 12.536 -0.000488281 28C-0.000488281 43.464 12.5355 56 27.9995 56ZM21.9807 18.2688C20.9555 17.2437 19.2935 17.2437 18.2684 18.2688C17.2432 19.294 17.2432 20.956 18.2684 21.9812L24.2872 28L18.2684 34.0188C17.2432 35.044 17.2432 36.706 18.2684 37.7312C19.2935 38.7563 20.9555 38.7563 21.9807 37.7312L27.9995 31.7123L34.0184 37.7312C35.0435 38.7563 36.7055 38.7563 37.7307 37.7312C38.7558 36.706 38.7558 35.044 37.7307 34.0188L31.7118 28L37.7307 21.9812C38.7558 20.956 38.7558 19.294 37.7307 18.2688C36.7055 17.2437 35.0435 17.2437 34.0184 18.2688L27.9995 24.2877L21.9807 18.2688Z" fill="#3C3C43" fill-opacity="0.6"/>
+</svg>

package/src/components/icons/close/index.tsx

@@ -1,21 +1,21 @@
-import React from 'react';
-import { ReactComponent as CloseIcon } from './close.svg';
-
-export interface CloseProps {
-  boxSize: number | string;
-  onClick: () => void;
-}
-
-/**
- * A functional React component utilized to render the `Close` icon component
- */
-export const Close: React.FC<CloseProps> = ({ boxSize, onClick }) => {
-  return (
-    <CloseIcon
-      width={boxSize}
-      height={boxSize}
-      onClick={onClick}
-      cursor="pointer"
-    />
-  );
-};
+import React from 'react';
+import { ReactComponent as CloseIcon } from './close.svg';
+
+export interface CloseProps {
+  boxSize: number | string;
+  onClick: () => void;
+}
+
+/**
+ * A functional React component utilized to render the `Close` icon component
+ */
+export const Close: React.FC<CloseProps> = ({ boxSize, onClick }) => {
+  return (
+    <CloseIcon
+      width={boxSize}
+      height={boxSize}
+      onClick={onClick}
+      cursor="pointer"
+    />
+  );
+};