@squiz/resource-browser 1.35.1-alpha.6 → 1.38.0-alpha.2

package/src/PreviewPanel/details/MatrixResource.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { Resource } from '../../types';
-import Icon, { IconOptions } from '../../Icons/Icon';
+import { Icon, IconOptions } from '@squiz/generic-browser-lib';
 import StatusIndicator from '../../StatusIndicator/StatusIndicator';
 
 type MatrixResourceProps = {

package/src/ResourceBreadcrumb/ResourceBreadcrumb.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useCallback, useEffect } from 'react';
 
-import Icon, { IconOptions } from '../Icons/Icon';
+import { Icon, IconOptions } from '@squiz/generic-browser-lib';
 import { Hierarchy } from '../types';
 
 export interface ResourceBreadcrumbProps<T> {

package/src/ResourceList/ResourceList.tsx

@@ -1,11 +1,9 @@
 import React, { useEffect, useRef } from 'react';
 import { OverlayTriggerState } from 'react-stately';
 import { DOMAttributes, FocusableElement } from '@react-types/shared';
+import { ResourceItem, ResourceState, SkeletonList } from '@squiz/generic-browser-lib';
 
-import ResourceItem from '../ResourceItem/ResourceItem';
 import { Resource } from '../types';
-import { SkeletonListItem } from '../Skeleton/ListItem/SkeletonListItem';
-import ResourceState from '../ResourceState/ResourceState';
 
 export interface ResourceListProps {
   resources: Array<Resource>;
@@ -43,31 +41,24 @@ const ResourceList = function ({
     }
   }, [resources]);
 
+  if (isLoading) {
+    return <SkeletonList itemCount={8} ariaLabel="loading Resource list" className="text-sm font-semibold" />;
+  }
+
   return (
     <ul
       ref={listRef}
       tabIndex={-1}
-      aria-label={`${isLoading ? 'loading' : ''} Resource list`}
+      aria-label={`Resource list`}
       className="flex flex-col text-sm font-semibold px-7 my-4 focus-visible:outline-0"
     >
-      {isLoading && (
-        <>
-          {[...Array(8)].map((_item, index: number) => {
-            return <SkeletonListItem key={index} />;
-          })}
-        </>
-      )}
-
       {/* Error State */}
-      {!isLoading && error && <ResourceState state="error" message={error.message} handleReload={handleReload} />}
+      {error && <ResourceState state="error" message={error.message} handleReload={handleReload} />}
 
       {/* Empty State */}
-      {!isLoading && !error && resources.length === 0 && (
-        <ResourceState state="empty" handleReload={handleReturnToRoot} />
-      )}
+      {!error && resources.length === 0 && <ResourceState state="empty" handleReload={handleReturnToRoot} />}
 
-      {!isLoading &&
-        !error &&
+      {!error &&
         resources.map((resource) => {
           return (
             <ResourceItem

package/src/ResourcePicker/ResourcePicker.tsx

@@ -3,8 +3,8 @@ import AdsClickRoundedIcon from '@mui/icons-material/AdsClickRounded';
 import AddCircleOutlineRoundedIcon from '@mui/icons-material/AddCircleOutlineRounded';
 import PhotoLibraryRoundedIcon from '@mui/icons-material/PhotoLibraryRounded';
 import { DOMAttributes } from '@react-types/shared';
+import { ModalTrigger } from '@squiz/generic-browser-lib';
 import { Resource } from '../types';
-import ModalTrigger from '../Modal/ModalTrigger';
 import { ErrorState } from './States/Error';
 import { LoadingState } from './States/Loading';
 import { SelectedState } from './States/Selected';

package/src/ResourcePicker/States/Error.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
-
-import Icon, { IconOptions } from '../../Icons/Icon';
-import { ResetButton } from '../ResetButton';
+import { Icon, IconOptions, ResetButton } from '@squiz/generic-browser-lib';
 
 export type ErrorStateProps = {
   error: Error;

package/src/ResourcePicker/States/Loading.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-
-import Spinner from '../../Spinner/Spinner';
+import { Spinner } from '@squiz/generic-browser-lib';
 
 export const LoadingState = () => (
   <div className="col-start-2 col-end-2">

package/src/ResourcePicker/States/Selected.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import prettyBytes from 'pretty-bytes';
+import { Icon, IconOptions, ResetButton } from '@squiz/generic-browser-lib';
 
 import { Resource } from '../../types';
-import Icon, { IconOptions } from '../../Icons/Icon';
 import StatusIndicator from '../../StatusIndicator/StatusIndicator';
-import { ResetButton } from '../ResetButton';
 
 export type SelectedStateProps = {
   resource: Resource;

package/src/ResourcePickerContainer/ResourcePickerContainer.spec.tsx

@@ -584,4 +584,32 @@ describe('ResourcePickerContainer', () => {
       },
     ]);
   });
+
+  it('handleDetailSelect() works', async () => {
+    const onChangeMock = jest.fn();
+    const onCloseMock = jest.fn();
+    const { getAllByText } = render(
+      <ResourcePickerContainer {...baseProps} onChange={onChangeMock} onClose={onCloseMock} />,
+    );
+
+    await waitFor(() => {
+      expect(getAllByText('Test system')[0]).toBeInTheDocument();
+    });
+
+    const user = userEvent.setup();
+    user.click(screen.getByRole('button', { name: 'Drill down to Test Website children' }));
+    await waitFor(() => expect(screen.getByRole('button', { name: 'page Test Page' })).toBeInTheDocument());
+
+    // Select the resource
+    user.click(screen.getByRole('button', { name: 'page Test Page' }));
+
+    // Wait for the preview panel to open
+    await waitFor(() => expect(screen.getByText('Mocked Page')).toBeInTheDocument());
+    await waitFor(() => expect(screen.getByText('#123')).toBeInTheDocument());
+
+    user.click(screen.getByRole('button', { name: 'Select' }));
+
+    await waitFor(() => expect(onChangeMock).toHaveBeenCalled());
+    await waitFor(() => expect(onCloseMock).toHaveBeenCalled());
+  });
 });

package/src/ResourcePickerContainer/ResourcePickerContainer.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useCallback, useEffect } from 'react';
 import { DOMAttributes, FocusableElement } from '@react-types/shared';
 import { useOverlayTriggerState } from 'react-stately';
+import { useAsync } from '@squiz/generic-browser-lib';
 
 import SourceList from '../SourceList/SourceList';
 import ResourceList from '../ResourceList/ResourceList';
@@ -10,7 +11,6 @@ import SourceDropdown from '../SourceDropdown/SourceDropdown';
 
 import { Source, Resource, HydratedResourceReference, ScopedSource } from '../types';
 import { useResourcePath } from '../Hooks/useResourcePath';
-import { useAsync } from '../Hooks/useAsync';
 import { useChildResources } from '../Hooks/useChildResources';
 
 interface ResourcePickerContainerProps {
@@ -155,14 +155,16 @@ function ResourcePickerContainer({
             />
           )}
         </div>
-        <PreviewPanel
-          resource={selectedResource}
-          modalState={previewModalState}
-          previewModalOverlayProps={previewModalOverlayProps}
-          allowedTypes={allowedTypes}
-          onSelect={handleDetailSelect}
-          onClose={handleDetailClose}
-        />
+        <div className="sm:overflow-y-scroll sm:flex-1 sm:grow-[2] bg-white">
+          <PreviewPanel
+            resource={selectedResource}
+            modalState={previewModalState}
+            previewModalOverlayProps={previewModalOverlayProps}
+            allowedTypes={allowedTypes}
+            onSelect={handleDetailSelect}
+            onClose={handleDetailClose}
+          />
+        </div>
       </div>
     </div>
   );

package/src/SourceDropdown/SourceDropdown.spec.tsx

@@ -207,7 +207,11 @@ describe('SourceDropdown', () => {
       expect(screen.getByRole('button', { name: 'Site Node 4' })).toBeTruthy();
     });
 
-    user.type(buttonDropdown, '{escape}');
+    //fireEvent.keyDown(buttonDropdown, { keyCode: 13 })
+
+    userEvent.keyboard('{escape}');
+
+    //user.type(buttonDropdown, '{escape}');
 
     await waitFor(() => {
       expect(screen.queryByRole('button', { name: 'All available sources' })).toBeFalsy();

package/src/SourceDropdown/SourceDropdown.tsx

@@ -1,9 +1,8 @@
 import React, { useState, useRef } from 'react';
 import { useFocusWithin, useKeyboard } from '@react-aria/interactions';
+import { Icon, IconOptions, Spinner } from '@squiz/generic-browser-lib';
 
 import type { Source, ScopedSource } from '../types';
-import Spinner from '../Spinner/Spinner';
-import Icon, { IconOptions } from '../Icons/Icon';
 
 import uuid from '../uuid';
 import { useCategorisedSources } from '../Hooks/useCategorisedSources';
@@ -92,7 +91,7 @@ export default function SourceDropdown({
       <ul
         id={`${uniqueId}-button-menu`}
         aria-hidden={!isOpen}
-        className={`absolute z-50 top-[calc(100%+5px)] -left-0.5 w-[calc(100%+4px)] bg-gray-100 border-2 rounded border-gray-300 p-2 ${
+        className={`absolute z-50 top-[calc(100%+5px)] -left-0.5 w-[calc(100%+4px)] bg-gray-100 border-2 rounded border-gray-300 p-2 overflow-y-scroll max-h-80 ${
           !isOpen ? 'hidden' : ''
         }`}
       >

package/src/SourceList/SourceList.tsx

@@ -1,13 +1,11 @@
 import React, { useEffect, useRef } from 'react';
 import { OverlayTriggerState } from 'react-stately';
 import { DOMAttributes, FocusableElement } from '@react-types/shared';
+import { SkeletonList, ResourceItem, ResourceState } from '@squiz/generic-browser-lib';
+import clsx from 'clsx';
 
-import ResourceItem from '../ResourceItem/ResourceItem';
 import { Source, ScopedSource } from '../types';
-import { SkeletonList } from '../Skeleton/List/SkeletonList';
-import clsx from 'clsx';
 import { useCategorisedSources } from '../Hooks/useCategorisedSources';
-import ResourceState from '../ResourceState/ResourceState';
 
 export interface SourceListProps {
   sources: Source[];
@@ -37,28 +35,25 @@ const SourceList = function ({
     }
   }, []);
 
+  if (isLoading) {
+    return (
+      <div className="flex flex-col bg-gray-100 min-h-full" aria-label="loading Source list">
+        <SkeletonList itemCount={3} />
+        <SkeletonList itemCount={3} />
+      </div>
+    );
+  }
+
   return (
     <ul
       ref={listRef}
       tabIndex={-1}
-      aria-label={`${isLoading ? 'loading' : ''} Source list`}
-      className={clsx('flex flex-col bg-gray-100 min-h-full focus-visible:outline-0', !isLoading && 'px-7 py-4')}
+      aria-label={`Source list`}
+      className={clsx('flex flex-col bg-gray-100 min-h-full focus-visible:outline-0 px-7 py-4')}
     >
-      {isLoading && (
-        <>
-          <li>
-            <SkeletonList itemCount={3} />
-          </li>
-          <li>
-            <SkeletonList itemCount={3} />
-          </li>
-        </>
-      )}
-
-      {!isLoading && error && <ResourceState state="error" message={error.message} handleReload={handleReload} />}
+      {error && <ResourceState state="error" message={error.message} handleReload={handleReload} />}
 
-      {!isLoading &&
-        !error &&
+      {!error &&
         categorisedSources.map(({ key, label, sources }, index) => {
           return (
             <li key={key} className={`flex flex-col text-sm font-semibold text-grey-800 ${index > 0 ? 'mt-3' : ''}`}>
@@ -77,6 +72,7 @@ const SourceList = function ({
                         previewModalState={previewModalState}
                         onSelect={onSourceSelect}
                         className="mt-3 rounded-lg"
+                        showChevron
                       />
                     );
                   })}

package/src/index.scss

@@ -4,9 +4,7 @@
 @import 'tailwindcss/utilities';
 
 // Components
-@import './Spinner/spinner';
-@import './Skeleton/skeleton';
-@import './ResourceBreadcrumb/ResourceBreadcrumb';
+@import './ResourceBreadcrumb/resource-breadcrumb';
 @import './ResourcePicker/resource-picker';
 
 *,

package/tailwind.config.cjs

@@ -1,6 +1,11 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}', './node_modules/flowbite/**/*.js'],
+  content: [
+    '../generic-browser-lib/src/**/*.{js,ts,jsx,tsx}',
+    './index.html',
+    './src/**/*.{js,ts,jsx,tsx}',
+    './node_modules/flowbite/**/*.js',
+  ],
   theme: {
     extend: {
       borderWidth: {

package/vite.config.js

@@ -0,0 +1,20 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+// Dependencies from within the monorepo need to be configured in a special way, relates to:
+// https://github.com/vitejs/vite/issues/5668
+export default defineConfig({
+  optimizeDeps: {
+    include: ['@squiz/generic-browser-lib'],
+  },
+  plugins: [
+    react({
+      babel: {
+        parserOpts: {
+          plugins: ['decorators-legacy'],
+        },
+      },
+    }),
+  ],
+});

package/lib/Hooks/useAsync.d.ts

@@ -1,21 +0,0 @@
-import { DependencyList } from 'react';
-export type UseAsyncProps<TReturnType, TDefaultValueType> = {
-    /** The async callback to call for fetching data. */
-    callback: () => TReturnType | Promise<TReturnType>;
-    /** The default value to populate the data as when initially mounted or reloading data. */
-    defaultValue: TReturnType | TDefaultValueType;
-};
-/**
- * Hook for invoking a piece of async code and keeping track of its state.
- *
- * Data is loaded in 3 different ways:
- * 1. On initial mount.
- * 2. When any of the `deps` change.
- * 3. When the `relaod` function is called.
- */
-export declare const useAsync: <TReturnType, TDefaultValueType>({ callback, defaultValue }: UseAsyncProps<TReturnType, TDefaultValueType>, deps: DependencyList) => {
-    data: TReturnType | TDefaultValueType;
-    error: Error | null;
-    isLoading: boolean;
-    reload: () => void;
-};

package/lib/Hooks/useAsync.js

@@ -1,53 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useAsync = void 0;
-const react_1 = require("react");
-/**
- * Hook for invoking a piece of async code and keeping track of its state.
- *
- * Data is loaded in 3 different ways:
- * 1. On initial mount.
- * 2. When any of the `deps` change.
- * 3. When the `relaod` function is called.
- */
-const useAsync = ({ callback, defaultValue }, deps) => {
-    const [data, setData] = (0, react_1.useState)(defaultValue);
-    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
-    const [error, setError] = (0, react_1.useState)(null);
-    const reload = (0, react_1.useCallback)(() => {
-        setIsLoading(true);
-        setError(null);
-        setData(defaultValue);
-        try {
-            const result = callback();
-            if (result instanceof Promise) {
-                // if the callback returned a promise wait for it to either resolve or reject.
-                result
-                    .then((resolved) => {
-                    setData(resolved);
-                    setIsLoading(false);
-                })
-                    .catch((e) => {
-                    setError(e instanceof Error ? e : new Error(String(e)));
-                    setIsLoading(false);
-                });
-            }
-            else {
-                // if the callback returned something other than a promise assume it is the data we want.
-                setData(result);
-                setIsLoading(false);
-            }
-        }
-        catch (e) {
-            // callback threw outside of the scope of the promise.
-            setError(e instanceof Error ? e : new Error(String(e)));
-            setIsLoading(false);
-        }
-    }, deps);
-    // reload data on dependency change (and initial mount)
-    (0, react_1.useEffect)(() => {
-        reload();
-    }, deps);
-    return { data, error, isLoading, reload };
-};
-exports.useAsync = useAsync;

package/lib/Icons/Generics/ArrowDown.d.ts

@@ -1,15 +0,0 @@
-import React from 'react';
-/**
- * Renders the ArrowDown icon
- * @param {React.SVGProps<SVGSVGElement>} props - The props for the ArrowDown component
- * @returns {JSX.Element} - The ArrowDown component
- * @example
- * <ArrowDown />
- * @example
- * <ArrowDown height={24} width={24} />
- * @example
- * <ArrowDown className="custom-class" />
- */
-export default function ArrowDown({ isDecorative, ...props }: {
-    isDecorative: boolean;
-} & React.SVGProps<SVGSVGElement>): JSX.Element;

package/lib/Icons/Generics/ArrowDown.js

@@ -1,23 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-/**
- * Renders the ArrowDown icon
- * @param {React.SVGProps<SVGSVGElement>} props - The props for the ArrowDown component
- * @returns {JSX.Element} - The ArrowDown component
- * @example
- * <ArrowDown />
- * @example
- * <ArrowDown height={24} width={24} />
- * @example
- * <ArrowDown className="custom-class" />
- */
-function ArrowDown({ isDecorative, ...props }) {
-    return (react_1.default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
-        react_1.default.createElement("path", { d: "M8.12508 8.99999L12.0051 12.88L15.8851 8.99999C16.2751 8.60999 16.9051 8.60999 17.2951 8.99999C17.6851 9.38999 17.6851 10.02 17.2951 10.41L12.7051 15C12.3151 15.39 11.6851 15.39 11.2951 15L6.70508 10.41C6.51783 10.2232 6.4126 9.96951 6.4126 9.70499C6.4126 9.44047 6.51783 9.18682 6.70508 8.99999C7.09508 8.61999 7.73508 8.60999 8.12508 8.99999Z", fill: "#707070" }),
-        !isDecorative && react_1.default.createElement("title", null, "arrow down icon")));
-}
-exports.default = ArrowDown;

package/lib/Icons/Generics/ArrowRight.d.ts

@@ -1,15 +0,0 @@
-import React from 'react';
-/**
- * Renders the ArrowRight icon
- * @param {React.SVGProps<SVGSVGElement>} props - The props for the ArrowRight component
- * @returns {JSX.Element} - The ArrowRight component
- * @example
- * <ArrowRight />
- * @example
- * <ArrowRight height={24} width={24} />
- * @example
- * <ArrowRight className="custom-class" />
- */
-export default function ArrowRight({ isDecorative, ...props }: {
-    isDecorative: boolean;
-} & React.SVGProps<SVGSVGElement>): JSX.Element;

package/lib/Icons/Generics/ArrowRight.js

@@ -1,23 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-/**
- * Renders the ArrowRight icon
- * @param {React.SVGProps<SVGSVGElement>} props - The props for the ArrowRight component
- * @returns {JSX.Element} - The ArrowRight component
- * @example
- * <ArrowRight />
- * @example
- * <ArrowRight height={24} width={24} />
- * @example
- * <ArrowRight className="custom-class" />
- */
-function ArrowRight({ isDecorative, ...props }) {
-    return (react_1.default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
-        react_1.default.createElement("path", { d: "M9.00001 15.875L12.88 11.995L9.00001 8.11501C8.81275 7.92817 8.70752 7.67452 8.70752 7.41001C8.70752 7.14549 8.81275 6.89184 9.00001 6.70501C9.39001 6.31501 10.02 6.31501 10.41 6.70501L15 11.295C15.39 11.685 15.39 12.315 15 12.705L10.41 17.295C10.02 17.685 9.39001 17.685 9.00001 17.295C8.62001 16.905 8.61001 16.265 9.00001 15.875Z", fill: "#707070" }),
-        !isDecorative && react_1.default.createElement("title", null, "arrow right icon")));
-}
-exports.default = ArrowRight;

package/lib/Icons/Generics/Back.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-export default function Back({ isDecorative, ...props }: {
-    isDecorative: boolean;
-} & React.SVGProps<SVGSVGElement>): JSX.Element;

package/lib/Icons/Generics/Back.js

@@ -1,12 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-function Back({ isDecorative, ...props }) {
-    return (react_1.default.createElement("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
-        react_1.default.createElement("path", { d: "M15.2912 7.00501H4.12124L9.00124 2.12501C9.39124 1.73501 9.39124 1.09501 9.00124 0.705006C8.61124 0.315006 7.98124 0.315006 7.59124 0.705006L1.00124 7.29501C0.61124 7.68501 0.61124 8.31501 1.00124 8.70501L7.59124 15.295C7.98124 15.685 8.61124 15.685 9.00124 15.295C9.39124 14.905 9.39124 14.275 9.00124 13.885L4.12124 9.00501H15.2912C15.8412 9.00501 16.2912 8.55501 16.2912 8.00501C16.2912 7.45501 15.8412 7.00501 15.2912 7.00501Z", fill: "#3D3D3D" }),
-        !isDecorative && react_1.default.createElement("title", null, "back icon")));
-}
-exports.default = Back;

package/lib/Icons/Generics/Close.d.ts

@@ -1,15 +0,0 @@
-import React from 'react';
-/**
- * Renders the Close icon
- * @param {React.SVGProps<SVGSVGElement>} props - The props for the Close component
- * @returns {JSX.Element} - The Close component
- * @example
- * <Close />
- * @example
- * <Close height={24} width={24} />
- * @example
- * <Close className="custom-class" />
- */
-export default function Close({ isDecorative, ...props }: {
-    isDecorative: boolean;
-} & React.SVGProps<SVGSVGElement>): JSX.Element;

package/lib/Icons/Generics/Close.js

@@ -1,23 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-/**
- * Renders the Close icon
- * @param {React.SVGProps<SVGSVGElement>} props - The props for the Close component
- * @returns {JSX.Element} - The Close component
- * @example
- * <Close />
- * @example
- * <Close height={24} width={24} />
- * @example
- * <Close className="custom-class" />
- */
-function Close({ isDecorative, ...props }) {
-    return (react_1.default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
-        react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2 12C2 6.47 6.47 2 12 2C17.53 2 22 6.47 22 12C22 17.53 17.53 22 12 22C6.47 22 2 17.53 2 12ZM14.89 16.3C15.28 16.69 15.91 16.69 16.3 16.3C16.68 15.91 16.68 15.27 16.3 14.89L13.41 12L16.3 9.11C16.69 8.72 16.69 8.09 16.3 7.7C15.91 7.31 15.28 7.31 14.89 7.7L12 10.59L9.11 7.7C8.72 7.31 8.09 7.31 7.7 7.7C7.51275 7.88683 7.40751 8.14048 7.40751 8.405C7.40751 8.66952 7.51275 8.92317 7.7 9.11L10.59 12L7.7 14.89C7.51275 15.0768 7.40751 15.3305 7.40751 15.595C7.40751 15.8595 7.51275 16.1132 7.7 16.3C8.09 16.69 8.72 16.69 9.11 16.3L12 13.41L14.89 16.3Z", fill: "#949494" }),
-        !isDecorative && react_1.default.createElement("title", null, "close icon")));
-}
-exports.default = Close;

package/lib/Icons/Generics/Empty.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-export default function Empty({ isDecorative, ...props }: {
-    isDecorative: boolean;
-} & React.SVGProps<SVGSVGElement>): JSX.Element;

package/lib/Icons/Generics/Empty.js

@@ -1,12 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-function Empty({ isDecorative, ...props }) {
-    return (react_1.default.createElement("svg", { width: "42", height: "42", viewBox: "0 0 42 42", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
-        react_1.default.createElement("path", { d: "M1.3925 3.82749C0.612495 4.60749 0.612495 5.88749 1.3925 6.66749L4.5125 9.78749C2.0125 13.5475 0.752495 18.1875 1.3325 23.1675C2.37249 32.2475 9.75249 39.6275 18.8325 40.6675C23.8125 41.2475 28.4525 39.9875 32.2125 37.4875L35.3325 40.6075C36.1125 41.3875 37.3725 41.3875 38.1525 40.6075C38.9325 39.8275 38.9325 38.5675 38.1525 37.7875L4.21249 3.82749C3.4325 3.04749 2.17249 3.04749 1.3925 3.82749ZM21.1925 36.8075C12.3725 36.8075 5.19249 29.6275 5.19249 20.8075C5.19249 17.8475 6.01249 15.0875 7.43249 12.6875L29.3125 34.5675C26.9125 35.9875 24.1525 36.8075 21.1925 36.8075ZM13.0725 7.04749L10.1725 4.12749C13.3325 2.0275 17.1125 0.807495 21.1925 0.807495C32.2325 0.807495 41.1925 9.76749 41.1925 20.8075C41.1925 24.8875 39.9725 28.6675 37.8725 31.8275L34.9525 28.9075C36.3725 26.5275 37.1925 23.7675 37.1925 20.8075C37.1925 11.9875 30.0125 4.80749 21.1925 4.80749C18.2325 4.80749 15.4725 5.62749 13.0725 7.04749Z", fill: "#949494" }),
-        !isDecorative && react_1.default.createElement("title", null, "empty icon")));
-}
-exports.default = Empty;

package/lib/Icons/Generics/Error.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-export default function Error({ isDecorative, ...props }: {
-    isDecorative: boolean;
-} & React.SVGProps<SVGSVGElement>): JSX.Element;

package/lib/Icons/Generics/Error.js

@@ -1,12 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-function Error({ isDecorative, ...props }) {
-    return (react_1.default.createElement("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
-        react_1.default.createElement("path", { d: "M30.6498 6H17.3698C16.8498 6 16.3298 6.22 15.9698 6.58L6.58977 15.96C6.22977 16.32 6.00977 16.84 6.00977 17.36V30.62C6.00977 31.16 6.22977 31.66 6.58977 32.04L15.9498 41.4C16.3298 41.78 16.8498 42 17.3698 42H30.6298C31.1698 42 31.6698 41.78 32.0498 41.42L41.4098 32.06C41.7898 31.68 41.9898 31.18 41.9898 30.64V17.36C41.9898 16.82 41.7698 16.32 41.4098 15.94L32.0498 6.58C31.6898 6.22 31.1698 6 30.6498 6ZM24.0098 34.6C22.5698 34.6 21.4098 33.44 21.4098 32C21.4098 30.56 22.5698 29.4 24.0098 29.4C25.4498 29.4 26.6098 30.56 26.6098 32C26.6098 33.44 25.4498 34.6 24.0098 34.6ZM24.0098 26C22.9098 26 22.0098 25.1 22.0098 24V16C22.0098 14.9 22.9098 14 24.0098 14C25.1098 14 26.0098 14.9 26.0098 16V24C26.0098 25.1 25.1098 26 24.0098 26Z", fill: "#D72321" }),
-        !isDecorative && react_1.default.createElement("title", null, "error icon")));
-}
-exports.default = Error;

package/lib/Icons/Generics/GenericIconMap.d.ts

@@ -1,14 +0,0 @@
-import { ArrowRight, ArrowDown, Selected, Root, ResourceSelect, Close, Error, Retry, Empty, Back } from '.';
-declare const GenericIconMap: {
-    'arrow-right': typeof ArrowRight;
-    'arrow-down': typeof ArrowDown;
-    'resource-select': typeof ResourceSelect;
-    selected: typeof Selected;
-    root: typeof Root;
-    close: typeof Close;
-    error: typeof Error;
-    retry: typeof Retry;
-    empty: typeof Empty;
-    back: typeof Back;
-};
-export default GenericIconMap;

package/lib/Icons/Generics/GenericIconMap.js

@@ -1,18 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const _1 = require(".");
-// Define our map of matrix types to icons
-const GenericIconMap = {
-    'arrow-right': _1.ArrowRight,
-    'arrow-down': _1.ArrowDown,
-    'resource-select': _1.ResourceSelect,
-    selected: _1.Selected,
-    root: _1.Root,
-    close: _1.Close,
-    error: _1.Error,
-    retry: _1.Retry,
-    empty: _1.Empty,
-    back: _1.Back,
-};
-// Export our map
-exports.default = GenericIconMap;