@squiz/resource-browser 1.32.1-alpha.12

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-rb-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/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,18 @@
+import type { Config } from 'jest';
+
+// Sync object
+const config: Config = {
+  preset: 'ts-jest',
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
+  testTimeout: 60_000,
+  testEnvironment: 'jsdom',
+  passWithNoTests: true,
+  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/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/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/GenericIconMap.d.ts

@@ -0,0 +1,10 @@
+import { ArrowRight, ArrowDown, Selected, Root, ResourceSelect, Close } 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;
+};
+export default GenericIconMap;

package/lib/Icons/Generics/GenericIconMap.js

@@ -0,0 +1,14 @@
+"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,
+};
+// 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/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,6 @@
+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';

package/lib/Icons/Generics/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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; } });

package/lib/Icons/Icon.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+export declare const iconSources: {
+    generic: {
+        'arrow-right': typeof import("./Generics").ArrowRight;
+        'arrow-down': typeof import("./Generics").ArrowDown;
+        'resource-select': typeof import("./Generics").ResourceSelect;
+        selected: typeof import("./Generics").Selected;
+        root: typeof import("./Generics").Root;
+        close: typeof import("./Generics").Close;
+    };
+    matrix: {
+        audio: typeof import("./MatrixResources").Audio;
+        excel: typeof import("./MatrixResources").Excel;
+        folder: typeof import("./MatrixResources").Folder;
+        generic_file: typeof import("./MatrixResources").GenericFile;
+        image: typeof import("./MatrixResources").Image;
+        page_standard: typeof import("./MatrixResources").Page;
+        pdf: typeof import("./MatrixResources").Pdf;
+        powerpoint: typeof import("./MatrixResources").Powerpoint;
+        site: typeof import("./MatrixResources").Site;
+        video: typeof import("./MatrixResources").Video;
+        word: typeof import("./MatrixResources").Word;
+    };
+};
+export type ResourceSources = keyof typeof iconSources;
+export type IconOptions = keyof (typeof iconSources)[ResourceSources];
+/**
+ * Renders an icon based on the resource source and the icon name
+ * @param {{resourceSource?: ResourceSources; icon?: IconOptions; props: React.HTMLAttributes<HTMLOrSVGElement>}} props - The props for the Icon component
+ * @returns {React.FunctionComponent} - The icon component
+ * @example
+ * <Icon />
+ * @example
+ * <Icon resourceSource="generic" icon="generic_file" />
+ * @example
+ * <Icon resourceSource="matrix" icon="page" />
+ * @example
+ * <Icon resourceSource="matrix" icon="page" height={24} width={24} />
+ * @example
+ * <Icon resourceSource="matrix" icon="page" className="custom-class" />
+ */
+declare function Icon({ resourceSource, icon, isDecorative, ...props }: {
+    icon?: IconOptions;
+    resourceSource?: ResourceSources;
+    isDecorative?: boolean;
+} & React.HTMLAttributes<HTMLElement> & React.SVGAttributes<SVGElement>): JSX.Element;
+export default Icon;

package/lib/Icons/Icon.js

@@ -0,0 +1,44 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.iconSources = void 0;
+const react_1 = __importDefault(require("react"));
+const GenericIconMap_1 = __importDefault(require("./Generics/GenericIconMap"));
+const MatrixResourceMap_1 = __importDefault(require("./MatrixResources/MatrixResourceMap"));
+exports.iconSources = {
+    generic: GenericIconMap_1.default,
+    matrix: MatrixResourceMap_1.default,
+};
+/**
+ * Renders an icon based on the resource source and the icon name
+ * @param {{resourceSource?: ResourceSources; icon?: IconOptions; props: React.HTMLAttributes<HTMLOrSVGElement>}} props - The props for the Icon component
+ * @returns {React.FunctionComponent} - The icon component
+ * @example
+ * <Icon />
+ * @example
+ * <Icon resourceSource="generic" icon="generic_file" />
+ * @example
+ * <Icon resourceSource="matrix" icon="page" />
+ * @example
+ * <Icon resourceSource="matrix" icon="page" height={24} width={24} />
+ * @example
+ * <Icon resourceSource="matrix" icon="page" className="custom-class" />
+ */
+function Icon({ resourceSource = 'generic', icon, isDecorative = true, ...props }) {
+    // Loop through the resource sources
+    for (const source in exports.iconSources) {
+        // If the resource source is the current source and the icon is in the current source map, render the icon
+        if (resourceSource === source && icon && icon in exports.iconSources[source]) {
+            // Get the icon from the current source map
+            const Icon = exports.iconSources[source][icon];
+            // Render the icon
+            return react_1.default.createElement(Icon, { isDecorative: isDecorative, ...props });
+        }
+    }
+    // If the icon is not defined, render the default icon
+    const DefaultIcon = MatrixResourceMap_1.default['generic_file'];
+    return react_1.default.createElement(DefaultIcon, { isDecorative: isDecorative, ...props });
+}
+exports.default = Icon;

package/lib/Icons/MatrixResources/Audio.d.ts

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

package/lib/Icons/MatrixResources/Audio.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 Audio icon
+ * @param {React.SVGProps<SVGSVGElement>} props - The props for the Audio component
+ * @returns {JSX.Element} - The Audio component
+ * @example
+ * <Audio />
+ * @example
+ * <Audio height={24} width={24} />
+ * @example
+ * <Audio className="custom-class" />
+ */
+function Audio({ isDecorative, ...props }) {
+    return (react_1.default.createElement("svg", { fill: "none", height: "24", viewBox: "0 0 24 24", width: "24", xmlns: "http://www.w3.org/2000/svg", ...props },
+        react_1.default.createElement("rect", { fill: "#cce9ed", height: "19", rx: "1.5", stroke: "#73c0cb", width: "19", x: "2.5", y: "2.5" }),
+        react_1.default.createElement("path", { d: "m9.5 7.4798c0-.23683.16616-.44118.39802-.48949l5.99998-1.25c.3105-.06468.602.17234.602.48949v1.2904c0 .23683-.1662.44118-.398.48949l-6 1.25c-.31051.06468-.602-.17234-.602-.48949z", fill: "#73c0cb", stroke: "#057e91" }),
+        react_1.default.createElement("path", { d: "m9 8c0-.55228.44772-1 1-1v9.5c0 .2761-.22386.5-.5.5s-.5-.2239-.5-.5z", fill: "#057e91" }),
+        react_1.default.createElement("circle", { cx: "7.5", cy: "16.5", fill: "#73c0cb", r: "2", stroke: "#057e91" }),
+        react_1.default.createElement("path", { d: "m16 7 1 .32v7.18c0 .2761-.2239.5-.5.5s-.5-.2239-.5-.5z", fill: "#057e91" }),
+        react_1.default.createElement("circle", { cx: "14.5", cy: "14.5", fill: "#73c0cb", r: "2", stroke: "#057e91" }),
+        !isDecorative && react_1.default.createElement("title", null, "audio icon")));
+}
+exports.default = Audio;

package/lib/Icons/MatrixResources/Excel.d.ts

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

package/lib/Icons/MatrixResources/Excel.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 });
+const react_1 = __importDefault(require("react"));
+/**
+ * Renders the Excel icon
+ * @param {React.SVGProps<SVGSVGElement>} props - The props for the Excel component
+ * @returns {JSX.Element} - The Excel component
+ * @example
+ * <Excel />
+ * @example
+ * <Excel height={24} width={24} />
+ * @example
+ * <Excel className="custom-class" />
+ */
+function Excel({ 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: "M14.1716 2.5H6C5.17157 2.5 4.5 3.17157 4.5 4V20C4.5 20.8284 5.17157 21.5 6 21.5H18C18.8284 21.5 19.5 20.8284 19.5 20V7.82843C19.5 7.16539 19.2366 6.5295 18.7678 6.06066L15.9393 3.23223C15.4705 2.76339 14.8346 2.5 14.1716 2.5Z", fill: "#E7E7E7", stroke: "#BCBCBC" }),
+        react_1.default.createElement("path", { d: "M14.5 3V6.5C14.5 7.05228 14.9477 7.5 15.5 7.5H19", stroke: "#BCBCBC" }),
+        react_1.default.createElement("rect", { y: "8", width: "12", height: "12", rx: "2", fill: "#4FAD6F" }),
+        react_1.default.createElement("path", { d: "M3.5 11.5L8.5 16.5", stroke: "white", strokeLinecap: "round" }),
+        react_1.default.createElement("path", { d: "M8.5 11.5L3.5 16.5", stroke: "white", strokeLinecap: "round" }),
+        !isDecorative && react_1.default.createElement("title", null, "excel icon")));
+}
+exports.default = Excel;

package/lib/Icons/MatrixResources/Folder.d.ts

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

package/lib/Icons/MatrixResources/Folder.js

@@ -0,0 +1,24 @@
+"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 Folder icon
+ * @param {React.SVGProps<SVGSVGElement>} props - The props for the Folder component
+ * @returns {JSX.Element} - The Folder component
+ * @example
+ * <Folder />
+ * @example
+ * <Folder height={24} width={24} />
+ * @example
+ * <Folder className="custom-class" />
+ */
+function Folder({ isDecorative, ...props }) {
+    return (react_1.default.createElement("svg", { fill: "none", height: "24", viewBox: "0 0 24 24", width: "24", xmlns: "http://www.w3.org/2000/svg", ...props },
+        react_1.default.createElement("path", { d: "m1 5c0-1.10457.89543-2 2-2h8.1177c.6752 0 1.3049.34077 1.6743.9061l2.208 3.37961-14 3.71429z", fill: "#efb324" }),
+        react_1.default.createElement("path", { d: "m3 6.5c-.82843 0-1.5.67157-1.5 1.5v11.5c0 .5523.44771 1 1 1h18.5c.8284 0 1.5-.6716 1.5-1.5v-11c0-.82843-.6716-1.5-1.5-1.5h-7.5106-2.8369z", fill: "#fbefd2", stroke: "#f5d584" }),
+        !isDecorative && react_1.default.createElement("title", null, "folder icon")));
+}
+exports.default = Folder;