@squiz/generic-browser-lib 1.35.1-alpha.34

package/.storybook/main.ts

@@ -0,0 +1,23 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    {
+      name: '@storybook/addon-styling',
+      options: {
+        postCss: true,
+      },
+    },
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+};
+export default config;

package/.storybook/preview-head.html

@@ -0,0 +1,15 @@
+<script>
+  window.global = window;
+  setTimeout(function () {
+    document.body.classList.add('squiz-gb-scope');
+  }, 0);
+</script>
+
+<style>
+  .sb-show-main.sb-main-padded {
+    padding: 0;
+  }
+  body {
+    font-family: 'Open Sans';
+  }
+</style>

package/.storybook/preview.ts

@@ -0,0 +1,16 @@
+import type { Preview } from '@storybook/react';
+import '../src/index.scss';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

package/README.md

@@ -0,0 +1,10 @@
+# `@squiz/generic-browser-lib`
+
+> Package contains atomic elements used within Resource browser and Component browser components.
+
+## Usage
+
+```
+import { PreviewPanelHOC, PreviewPanelProps } from '@squiz/generic-browser-lib';
+
+```

package/build.js

@@ -0,0 +1,21 @@
+const esbuild = require('esbuild');
+const { sassPlugin } = require('esbuild-sass-plugin');
+const postcss = require('postcss');
+const postcssConfig = require('./postcss.config').plugins;
+
+esbuild
+  .build({
+    entryPoints: ['src/index.scss'],
+    bundle: true,
+    outdir: 'lib',
+    plugins: [
+      sassPlugin({
+        type: 'css',
+        transform: async (source) => {
+          const { css } = postcss(postcssConfig).process(source);
+          return css;
+        },
+      }),
+    ],
+  })
+  .catch(() => process.exit(1));

package/jest.config.ts

@@ -0,0 +1,29 @@
+import type { Config } from 'jest';
+
+// Sync object
+const config: Config = {
+  preset: 'ts-jest',
+  clearMocks: true,
+  collectCoverage: true,
+  collectCoverageFrom: ['src/**/*.{ts,tsx}', '!src/**/*.stories.{ts,tsx}'],
+  coverageThreshold: {
+    global: {
+      branches: 90,
+      functions: 90,
+      lines: 90,
+      statements: 90,
+    },
+  },
+  errorOnDeprecated: true,
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
+  testTimeout: 60_000,
+  testEnvironment: 'jsdom',
+  testPathIgnorePatterns: ['/lib/', `/node_modules/`],
+  maxWorkers: 1,
+  moduleNameMapper: {
+    '^.+\\.(css|scss)$': '<rootDir>/src/__mocks__/styleMock.ts',
+  },
+  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
+};
+
+export default config;

package/lib/Hooks/useAsync.d.ts

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,53 @@
+"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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,23 @@
+"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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,23 @@
+"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

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

package/lib/Icons/Generics/Back.js

@@ -0,0 +1,12 @@
+"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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,23 @@
+"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

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

package/lib/Icons/Generics/Empty.js

@@ -0,0 +1,12 @@
+"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

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

package/lib/Icons/Generics/Error.js

@@ -0,0 +1,12 @@
+"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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,18 @@
+"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;

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

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

package/lib/Icons/Generics/ResourceSelect.js

@@ -0,0 +1,28 @@
+"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 ResourceSelected icon
+ * @param {React.SVGProps<SVGSVGElement>} props - The props for the ResourceSelected component
+ * @returns {JSX.Element} - The ResourceSelected component
+ * @example
+ * <ResourceSelected />
+ * @example
+ * <ResourceSelected height={24} width={24} />
+ * @example
+ * <ResourceSelected className="custom-class" />
+ */
+function ResourceSelected({ isDecorative, ...props }) {
+    return (react_1.default.createElement("svg", { width: "72", height: "72", viewBox: "0 0 72 72", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
+        react_1.default.createElement("mask", { id: "mask0_1232_8208", 
+            // style="mask-type:alpha"
+            maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "72", height: "72" },
+            react_1.default.createElement("rect", { width: "72", height: "72", fill: "#D9D9D9" })),
+        react_1.default.createElement("g", { mask: "url(#mask0_1232_8208)" },
+            react_1.default.createElement("path", { d: "M35.1 53.9999C30.3 53.7499 26.25 51.8999 22.95 48.4499C19.65 44.9999 18 40.8499 18 35.9999C18 30.9999 19.75 26.7499 23.25 23.2499C26.75 19.7499 31 17.9999 36 17.9999C40.85 17.9999 45 19.6499 48.45 22.9499C51.9 26.2499 53.75 30.2999 54 35.0999L47.7 33.2249C47.05 30.5249 45.65 28.3124 43.5 26.5874C41.35 24.8624 38.85 23.9999 36 23.9999C32.7 23.9999 29.875 25.1749 27.525 27.5249C25.175 29.8749 24 32.6999 24 35.9999C24 38.8499 24.8625 41.3499 26.5875 43.4999C28.3125 45.6499 30.525 47.0499 33.225 47.6999L35.1 53.9999ZM36 65.9999C31.85 65.9999 27.95 65.2124 24.3 63.6374C20.65 62.0624 17.475 59.9249 14.775 57.2249C12.075 54.5249 9.9375 51.3499 8.3625 47.6999C6.7875 44.0499 6 40.1499 6 35.9999C6 31.8499 6.7875 27.9499 8.3625 24.2999C9.9375 20.6499 12.075 17.4749 14.775 14.7749C17.475 12.0749 20.65 9.93741 24.3 8.36241C27.95 6.78741 31.85 5.99991 36 5.99991C40.15 5.99991 44.05 6.78741 47.7 8.36241C51.35 9.93741 54.525 12.0749 57.225 14.7749C59.925 17.4749 62.0625 20.6499 63.6375 24.2999C65.2125 27.9499 66 31.8499 66 35.9999V37.3499C66 37.7999 65.95 38.2499 65.85 38.6999L60 36.8999V35.9999C60 29.2999 57.675 23.6249 53.025 18.9749C48.375 14.3249 42.7 11.9999 36 11.9999C29.3 11.9999 23.625 14.3249 18.975 18.9749C14.325 23.6249 12 29.2999 12 35.9999C12 42.6999 14.325 48.3749 18.975 53.0249C23.625 57.6749 29.3 59.9999 36 59.9999H36.9L38.7 65.8499C38.25 65.9499 37.8 65.9999 37.35 65.9999H36ZM60.525 66.4499L48.75 54.6749L46.5 61.4999C46.25 62.1999 45.775 62.5374 45.075 62.5124C44.375 62.4874 43.9 62.1249 43.65 61.4249L36.825 38.6999C36.625 38.1499 36.75 37.6499 37.2 37.1999C37.65 36.7499 38.15 36.6249 38.7 36.8249L61.425 43.6499C62.125 43.8999 62.4875 44.3749 62.5125 45.0749C62.5375 45.7749 62.2 46.2499 61.5 46.4999L54.675 48.7499L66.45 60.5249C66.75 60.8249 66.9 61.1749 66.9 61.5749C66.9 61.9749 66.75 62.3249 66.45 62.6249L62.625 66.4499C62.325 66.7499 61.975 66.8999 61.575 66.8999C61.175 66.8999 60.825 66.7499 60.525 66.4499Z", fill: "#BABABA" })),
+        !isDecorative && react_1.default.createElement("title", null, "resource select icon")));
+}
+exports.default = ResourceSelected;

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

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

package/lib/Icons/Generics/Retry.js

@@ -0,0 +1,12 @@
+"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 Retry({ isDecorative, ...props }) {
+    return (react_1.default.createElement("svg", { width: "17", height: "20", viewBox: "0 0 17 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
+        react_1.default.createElement("path", { d: "M8.46194 3.64249V0.852487C8.46194 0.402487 7.92194 0.182487 7.61194 0.502487L3.81194 4.29249C3.61194 4.49249 3.61194 4.80249 3.81194 5.00249L7.60194 8.79249C7.92194 9.10249 8.46194 8.88249 8.46194 8.43249V5.64249C12.1919 5.64249 15.1419 9.06249 14.3219 12.9325C13.8519 15.2025 12.0119 17.0325 9.75194 17.5025C6.18194 18.2525 3.00194 15.8025 2.52194 12.4925C2.45194 12.0125 2.03194 11.6425 1.54194 11.6425C0.941942 11.6425 0.461942 12.1725 0.541942 12.7725C1.16194 17.1625 5.34194 20.4125 10.0719 19.4925C13.1919 18.8825 15.7019 16.3725 16.3119 13.2525C17.3019 8.12249 13.4019 3.64249 8.46194 3.64249Z", fill: "#3D3D3D" }),
+        !isDecorative && react_1.default.createElement("title", null, "retry icon")));
+}
+exports.default = Retry;

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

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

package/lib/Icons/Generics/Root.js

@@ -0,0 +1,23 @@
+"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 Root icon
+ * @param {React.SVGProps<SVGSVGElement>} props - The props for the Root component
+ * @returns {JSX.Element} - The Root component
+ * @example
+ * <Root />
+ * @example
+ * <Root height={24} width={24} />
+ * @example
+ * <Root className="custom-class" />
+ */
+function Root({ 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: "M4.20374 18H15.2037C15.7537 18 16.2037 17.55 16.2037 17C16.2037 16.45 15.7537 16 15.2037 16H4.20374C3.65374 16 3.20374 16.45 3.20374 17C3.20374 17.55 3.65374 18 4.20374 18ZM4.20374 13H12.2037C12.7537 13 13.2037 12.55 13.2037 12C13.2037 11.45 12.7537 11 12.2037 11H4.20374C3.65374 11 3.20374 11.45 3.20374 12C3.20374 12.55 3.65374 13 4.20374 13ZM3.20374 7C3.20374 7.55 3.65374 8 4.20374 8H15.2037C15.7537 8 16.2037 7.55 16.2037 7C16.2037 6.45 15.7537 6 15.2037 6H4.20374C3.65374 6 3.20374 6.45 3.20374 7ZM20.5037 14.88L17.6237 12L20.5037 9.12C20.8937 8.73 20.8937 8.1 20.5037 7.71C20.1137 7.32 19.4837 7.32 19.0937 7.71L15.5037 11.3C15.1137 11.69 15.1137 12.32 15.5037 12.71L19.0937 16.3C19.4837 16.69 20.1137 16.69 20.5037 16.3C20.8837 15.91 20.8937 15.27 20.5037 14.88Z", fill: "#707070" }),
+        !isDecorative && react_1.default.createElement("title", null, "root icon")));
+}
+exports.default = Root;

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

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

package/lib/Icons/Generics/Selected.js

@@ -0,0 +1,23 @@
+"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 Selected icon
+ * @param {React.SVGProps<SVGSVGElement>} props - The props for the Selected component
+ * @returns {JSX.Element} - The Selected component
+ * @example
+ * <Selected />
+ * @example
+ * <Selected height={24} width={24} />
+ * @example
+ * <Selected className="custom-class" />
+ */
+function Selected({ isDecorative, ...props }) {
+    return (react_1.default.createElement("svg", { width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
+        react_1.default.createElement("path", { d: "M5.80004 10.78L2.30004 7.28002C1.91004 6.89002 1.29004 6.89002 0.900044 7.28002C0.510044 7.67002 0.510044 8.29002 0.900044 8.68002L5.09004 12.87C5.48004 13.26 6.11004 13.26 6.50004 12.87L17.1 2.28002C17.49 1.89002 17.49 1.27002 17.1 0.880024C16.71 0.490024 16.09 0.490024 15.7 0.880024L5.80004 10.78Z", fill: "#044985" }),
+        !isDecorative && react_1.default.createElement("title", null, "selected icon")));
+}
+exports.default = Selected;

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

@@ -0,0 +1,10 @@
+export { default as ArrowRight } from './ArrowRight';
+export { default as ArrowDown } from './ArrowDown';
+export { default as Selected } from './Selected';
+export { default as Root } from './Root';
+export { default as ResourceSelect } from './ResourceSelect';
+export { default as Close } from './Close';
+export { default as Error } from './Error';
+export { default as Retry } from './Retry';
+export { default as Empty } from './Empty';
+export { default as Back } from './Back';

package/lib/Icons/Generics/index.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Back = exports.Empty = exports.Retry = exports.Error = exports.Close = exports.ResourceSelect = exports.Root = exports.Selected = exports.ArrowDown = exports.ArrowRight = void 0;
+// Exports all icons from the Generics folder
+var ArrowRight_1 = require("./ArrowRight");
+Object.defineProperty(exports, "ArrowRight", { enumerable: true, get: function () { return __importDefault(ArrowRight_1).default; } });
+var ArrowDown_1 = require("./ArrowDown");
+Object.defineProperty(exports, "ArrowDown", { enumerable: true, get: function () { return __importDefault(ArrowDown_1).default; } });
+var Selected_1 = require("./Selected");
+Object.defineProperty(exports, "Selected", { enumerable: true, get: function () { return __importDefault(Selected_1).default; } });
+var Root_1 = require("./Root");
+Object.defineProperty(exports, "Root", { enumerable: true, get: function () { return __importDefault(Root_1).default; } });
+var ResourceSelect_1 = require("./ResourceSelect");
+Object.defineProperty(exports, "ResourceSelect", { enumerable: true, get: function () { return __importDefault(ResourceSelect_1).default; } });
+var Close_1 = require("./Close");
+Object.defineProperty(exports, "Close", { enumerable: true, get: function () { return __importDefault(Close_1).default; } });
+var Error_1 = require("./Error");
+Object.defineProperty(exports, "Error", { enumerable: true, get: function () { return __importDefault(Error_1).default; } });
+var Retry_1 = require("./Retry");
+Object.defineProperty(exports, "Retry", { enumerable: true, get: function () { return __importDefault(Retry_1).default; } });
+var Empty_1 = require("./Empty");
+Object.defineProperty(exports, "Empty", { enumerable: true, get: function () { return __importDefault(Empty_1).default; } });
+var Back_1 = require("./Back");
+Object.defineProperty(exports, "Back", { enumerable: true, get: function () { return __importDefault(Back_1).default; } });