@oliasoft-open-source/react-ui-library 3.12.0-beta-19 → 3.12.0-beta-21

package/dist/components/heading/heading.stories.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Heading } from './heading';
+import { Flex } from '../layout/flex/flex';
+import { Icon } from '../icon/icon';
+import { IconType } from "../../common-enum";
+export default {
+    title: 'Basic/Heading',
+    component: Heading,
+    args: {
+        children: 'Heading',
+        top: false,
+    },
+};
+const Template = (args) => (_jsx(Heading
+// eslint-disable-next-line react/jsx-props-no-spreading
+, { ...args }));
+export const Default = Template.bind({});
+export const Top = Template.bind({});
+Top.args = {
+    top: true,
+};
+export const CustomMargin = Template.bind({});
+CustomMargin.args = {
+    marginBottom: 50,
+};
+export const Help = Template.bind({});
+Help.args = {
+    helpText: 'Help!',
+    onClickHelp: () => console.log('Help received :)'),
+};
+export const LibraryIcon = Template.bind({});
+LibraryIcon.args = {
+    libraryIcon: {
+        onClick: () => { },
+        tooltip: 'Edit in library',
+    },
+};
+export const CustomIcon = Template.bind({});
+CustomIcon.args = {
+    icon: _jsx(Icon, { icon: IconType.ADD }),
+    onIconClick: () => console.log('clicked icon!'),
+};
+export const JSXContent = Template.bind({});
+JSXContent.args = {
+    children: (_jsxs(Flex, { alignItems: "center", gap: "10px", children: ["Subheading", _jsx(Icon, { icon: IconType.SUCCESS })] })),
+};

package/dist/components/help-icon/help-icon.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode, MouseEvent } from 'react';
+export interface IHelpIconProps {
+    text?: string | number | ReactNode;
+    onClick?: (event?: MouseEvent<HTMLDivElement>) => void;
+    icon?: ReactNode;
+    active?: boolean;
+    maxWidth?: string | number;
+    testId?: string;
+}
+export declare const HelpIcon: ({ text, onClick, icon, active, maxWidth, testId, }: IHelpIconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/help-icon/help-icon.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import cx from 'classnames';
+import { Tooltip } from '../tooltip/tooltip';
+import styles from './help-icon.module.less';
+import { Icon } from '../icon/icon';
+// Only show the tooltip if there is text to show
+const HelpIconTooltip = ({ children, text, maxWidth, }) => {
+    const show = Boolean(text);
+    return show ? (_jsx(Tooltip, { text: text, display: "inline-flex", maxWidth: maxWidth, children: children })) : (_jsx(_Fragment, { children: children }));
+};
+export const HelpIcon = ({ text, onClick, icon = 'help', active = false, maxWidth = '300px', testId, }) => {
+    const onClickHelpIcon = (e) => {
+        if (onClick) {
+            e.stopPropagation();
+            onClick();
+        }
+    };
+    return (_jsx("div", { className: cx(styles.helpIcon, onClick ? styles.clickable : '', active ? styles.active : ''), onClick: onClickHelpIcon, "data-testid": testId, children: _jsx(HelpIconTooltip, { text: text, maxWidth: maxWidth, children: _jsx(Icon, { icon: icon }) }) }));
+};

package/dist/components/help-icon/help-icon.stories.d.ts

@@ -0,0 +1,10 @@
+import { IHelpIconProps } from './help-icon';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IHelpIconProps>;
+export declare const Text: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IHelpIconProps>;
+export declare const JSXText: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IHelpIconProps>;
+export declare const OnClick: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IHelpIconProps>;
+export declare const Library: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IHelpIconProps>;
+export declare const Lock: () => import("react/jsx-runtime").JSX.Element;
+export declare const TestId: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IHelpIconProps>;

package/dist/components/help-icon/help-icon.stories.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { HelpIcon } from './help-icon';
+import { IconType } from "../../common-enum";
+export default {
+    title: 'Basic/HelpIcon',
+    component: HelpIcon,
+};
+const Template = (args) => _jsx(HelpIcon, { ...args });
+export const Default = Template.bind({});
+export const Text = Template.bind({});
+Text.args = {
+    text: 'Tooltip goes here',
+};
+export const JSXText = Template.bind({});
+JSXText.args = {
+    text: (_jsxs("div", { children: ["Tooltip ", _jsx("em", { children: "goes" }), " ", _jsx("strong", { children: "here" })] })),
+};
+export const OnClick = Template.bind({});
+OnClick.args = {
+    onClick: () => console.log('Help clicked'),
+};
+export const Library = Template.bind({});
+Library.args = {
+    text: 'Open in library',
+    onClick: () => console.log('Library clicked'),
+    icon: 'library',
+    testId: 'library',
+};
+export const Lock = () => {
+    const [locked, setLocked] = useState(false);
+    return (_jsx(HelpIcon, { onClick: () => setLocked(!locked), icon: locked ? IconType.LOCK : IconType.UNLOCK, active: locked, testId: "lock" }));
+};
+export const TestId = Template.bind({});
+TestId.args = {
+    testId: 'help',
+};

package/dist/components/icon/icon.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode, MouseEventHandler } from 'react';
+export interface IconProps {
+    icon: ReactNode | string;
+    onClick?: MouseEventHandler<HTMLDivElement>;
+    clickable?: boolean;
+    color?: string;
+    size?: string | number;
+    testId?: string;
+}
+/**
+ * Icon wrapper component to support different icon formats:
+ *     - string names (default recommendation)
+ *     - react-icons
+ *     - SVG (for special cases)
+ */
+export declare const Icon: ({ icon, onClick, clickable, color, size, testId, }: IconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/icon/icon.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isValidElement, useContext, } from 'react';
+import cx from 'classnames';
+import { ReactSVG } from 'react-svg';
+import styles from './icon.module.less';
+import { DisabledContext } from '../../helpers/disabled-context';
+import { NamedIcon } from './named-icon';
+/**
+ * Icon wrapper component to support different icon formats:
+ *     - string names (default recommendation)
+ *     - react-icons
+ *     - SVG (for special cases)
+ */
+export const Icon = ({ icon, onClick, clickable = false, color, size, testId, }) => {
+    const disabledContext = useContext(DisabledContext);
+    const style = {
+        color,
+        fill: color,
+        fontSize: size || 'inherit',
+        width: size || 'auto',
+        height: size || 'auto',
+    };
+    return (_jsx("div", { className: cx(styles.wrapper, (clickable || onClick) && !disabledContext ? styles.clickable : ''), style: style, onClick: (evt) => onClick && !disabledContext ? onClick(evt) : undefined, "data-testid": testId, children: isValidElement(icon) ? (icon) : typeof icon === 'string' &&
+            (icon.includes('.svg') || icon.includes('image/svg')) ? (_jsx(ReactSVG, { className: styles.customSvg, beforeInjection: (svg) => {
+                if (size) {
+                    svg.setAttribute('width', String(size));
+                    svg.setAttribute('height', String(size));
+                }
+            }, src: icon })) : typeof icon === 'string' &&
+            (icon.includes('.png') || icon.includes('image/png')) ? (_jsx("img", { alt: "icon", className: styles.customPng, src: icon })) : typeof icon === 'string' ? (_jsx(NamedIcon, { icon: icon })) : null }));
+};

package/dist/components/icon/icon.stories.d.ts

@@ -0,0 +1,25 @@
+import { IconProps } from './icon';
+declare const _default: {
+    title: string;
+    component: ({ icon, onClick, clickable, color, size, testId, }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    argTypes: {
+        color: {
+            control: string;
+        };
+        size: {
+            control: string;
+        };
+    };
+    args: {
+        icon: string;
+    };
+};
+export default _default;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IconProps>;
+export declare const NamedIcons: () => import("react/jsx-runtime").JSX.Element;
+export declare const Size: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IconProps>;
+export declare const ReactIcon: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IconProps>;
+export declare const Color: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IconProps>;
+export declare const CustomSVG: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IconProps>;
+export declare const Base64SVG: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IconProps>;
+export declare const Clickable: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IconProps>;

package/dist/components/icon/icon.stories.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FaAngleDoubleRight } from 'react-icons/fa';
+import svgIcon from '../../images/icons/icons8-junction.svg';
+import { Icon } from './icon';
+import { Grid } from '../layout/grid/grid';
+import { Flex } from '../layout/flex/flex';
+import { Text } from '../text/text';
+import { iconNames } from './named-icon';
+export default {
+    title: 'Basic/Icon',
+    component: Icon,
+    argTypes: {
+        color: { control: 'text' },
+        size: { control: 'text' },
+    },
+    args: {
+        icon: 'settings',
+    },
+};
+const Template = (args) => _jsx(Icon, { ...args });
+export const Default = Template.bind({});
+export const NamedIcons = () => (_jsx(Grid, { gap: true, columns: "1fr 1fr 1fr", children: iconNames.map((icon) => (_jsxs(Flex, { gap: "8px", children: [_jsx(Icon, { icon: icon }), _jsx(Text, { children: icon })] }, icon))) }));
+export const Size = Template.bind({});
+Size.args = { size: '100px' };
+export const ReactIcon = Template.bind({});
+ReactIcon.args = { icon: _jsx(FaAngleDoubleRight, {}) };
+export const Color = Template.bind({});
+Color.args = { color: 'var(--color-text-primary)' };
+export const CustomSVG = Template.bind({});
+CustomSVG.args = { icon: svgIcon, size: '14px' };
+export const Base64SVG = Template.bind({});
+Base64SVG.args = {
+    icon: `data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMzAgMzAiIHdpZHRoPSIzMHB4IiBoZWlnaHQ9IjMwcHgiPgogICAgPHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNIDUgNCBDIDQuNDQ4IDQgNCA0LjQ0OCA0IDUgTCA0IDkgQyA0IDkuMjU2IDQuMDk3OTY4NyA5LjUxMjAzMTIgNC4yOTI5Njg4IDkuNzA3MDMxMiBDIDQuNjgyOTY4NyAxMC4wOTgwMzEgNS4zMTYwMzEyIDEwLjA5ODAzMSA1LjcwNzAzMTIgOS43MDcwMzEyIEwgNyA4LjQxNDA2MjUgTCAxMS40MTQwNjIgMTIuODI4MTI1IEMgMTEuNzg5OTI0IDEzLjIwMzk4NyAxMiAxMy43MTA4NDQgMTIgMTQuMjQyMTg4IEwgMTIgMjAgQSAxLjAwMDEgMS4wMDAxIDAgMSAwIDE0IDIwIEwgMTQgMTQuMjQyMTg4IEMgMTQgMTMuMTgxNTMxIDEzLjU3ODI2MyAxMi4xNjQyMDIgMTIuODI4MTI1IDExLjQxNDA2MiBMIDguNDE0MDYyNSA3IEwgOS43MDcwMzEyIDUuNzA3MDMxMiBDIDEwLjA5ODAzMSA1LjMxNzAzMTMgMTAuMDk4MDMxIDQuNjgzOTY4OCA5LjcwNzAzMTIgNC4yOTI5Njg4IEMgOS41MTIwMzEyIDQuMDk3OTY4NyA5LjI1NiA0IDkgNCBMIDUgNCB6IE0gMjEgNCBDIDIwLjc0NCA0IDIwLjQ4Nzk2OSA0LjA5Nzk2ODcgMjAuMjkyOTY5IDQuMjkyOTY4OCBDIDE5LjkwMTk2OSA0LjY4Mzk2ODggMTkuOTAxOTY5IDUuMzE3MDMxMyAyMC4yOTI5NjkgNS43MDcwMzEyIEwgMjEuNTg1OTM4IDcgTCAxNy4xNzE4NzUgMTEuNDE0MDYyIEMgMTYuNDIxNzM3IDEyLjE2NDIwMiAxNiAxMy4xODE1MyAxNiAxNC4yNDIxODggTCAxNiAyMCBBIDEuMDAwMSAxLjAwMDEgMCAxIDAgMTggMjAgTCAxOCAxNC4yNDIxODggQyAxOCAxMy43MTA4NDMgMTguMjEwMDc2IDEzLjIwMzk4NyAxOC41ODU5MzggMTIuODI4MTI1IEwgMjMgOC40MTQwNjI1IEwgMjQuMjkyOTY5IDkuNzA3MDMxMiBDIDI0LjY4Mzk2OSAxMC4wOTgwMzEgMjUuMzE3MDMxIDEwLjA5ODAzMSAyNS43MDcwMzEgOS43MDcwMzEyIEMgMjUuOTAyMDMxIDkuNTEyMDMxMiAyNiA5LjI1NiAyNiA5IEwgMjYgNSBDIDI2IDQuNDQ4IDI1LjU1MiA0IDI1IDQgTCAyMSA0IHogTSA0Ljk4NDM3NSAxMi45ODYzMjggQSAxLjAwMDEgMS4wMDAxIDAgMCAwIDQgMTQgTCA0IDI0IEMgNCAyNS4wOTMwNjMgNC45MDY5MzcyIDI2IDYgMjYgTCAyNCAyNiBDIDI1LjA5MzA2MyAyNiAyNiAyNS4wOTMwNjMgMjYgMjQgTCAyNiAxNCBBIDEuMDAwMSAxLjAwMDEgMCAxIDAgMjQgMTQgTCAyNCAyNCBMIDYgMjQgTCA2IDE0IEEgMS4wMDAxIDEuMDAwMSAwIDAgMCA0Ljk4NDM3NSAxMi45ODYzMjggeiIvPgo8L3N2Zz4K`,
+    size: '14px',
+};
+export const Clickable = Template.bind({});
+Clickable.args = { onClick: () => { } };

package/dist/components/icon/named-icon.d.ts

@@ -0,0 +1,6 @@
+export declare const iconNames: string[];
+interface NamedIconProps {
+    icon: string;
+}
+export declare const NamedIcon: ({ icon }: NamedIconProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/icon/named-icon.js

@@ -0,0 +1,418 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FaAngleDoubleLeft, FaAngleDoubleRight, FaAngleDown, FaAngleLeft, FaAngleRight, FaAngleUp, FaArrowDown, FaArrowLeft, FaArrowRight, FaArrowUp, FaArrowsAlt, FaBalanceScale, FaBell, FaBook, FaBuilding, FaCamera, FaCheck, FaCheckCircle, FaClone, FaCog, FaCompressArrowsAlt, FaEllipsisV, FaExclamation, FaExclamationTriangle, FaExpandAlt, FaExpandArrowsAlt, FaEye, FaEyeSlash, FaFastBackward, FaFastForward, FaFileAlt, FaFileExport, FaFileImport, FaFolder, FaGripLinesVertical, FaInfoCircle, FaKey, FaMinus, FaMoon, FaPaste, FaPause, FaPencilAlt, FaPlay, //pencil
+FaPlus, FaQuestion, FaQuestionCircle, FaRedo, FaRegCircle, FaRegClock, // for not found
+FaRegCopy, FaRulerVertical, FaSave, FaSearch, // copy outline
+FaSpinner, FaStar, FaStepBackward, FaStepForward, FaStopCircle, FaSun, FaSync, FaTimes, FaTimesCircle, FaTrash, FaUndo, FaUser, FaUsers, } from 'react-icons/fa';
+import { HiLockClosed, HiLockOpen, HiServer } from 'react-icons/hi';
+import { GrDrag } from 'react-icons/gr';
+import { BsArrowReturnRight, BsFillChatFill, BsLaptop, BsLightningCharge, } from 'react-icons/bs';
+import { TbArrowsSplit, TbBold, TbCode, TbFocusCentered, TbGauge, TbItalic, TbList, TbListNumbers, TbMapPin, TbNote, TbTarget, } from 'react-icons/tb';
+import { CgSortAz, CgSortZa } from 'react-icons/cg';
+import { RiBarChartFill, RiFilterFill, RiFilterOffFill, RiLayoutColumnLine, RiLayoutGridLine, RiLayoutRowLine, RiLineChartFill, RiPieChartFill, RiSquareLine, RiTableLine, } from 'react-icons/ri';
+import { BiLink, BiLinkExternal, BiUnlink, BiVideo } from 'react-icons/bi';
+import { AiOutlineInsertRowAbove, AiOutlineInsertRowBelow, AiOutlineMinusSquare, AiOutlinePlusSquare, } from 'react-icons/ai';
+import { IoWater } from 'react-icons/io5';
+import { VscCollapseAll, VscExpandAll } from 'react-icons/vsc';
+export const iconNames = [
+    'add',
+    'plus',
+    'add above',
+    'add below',
+    'arrow down',
+    'down',
+    'arrow left',
+    'left',
+    'arrow right',
+    'right',
+    'arrow up',
+    'up',
+    'bold',
+    'book',
+    'library',
+    'camera',
+    'close',
+    'times',
+    'chart',
+    'chart line',
+    'chart bar',
+    'chart pie',
+    'chat',
+    'check',
+    'checkmark',
+    'chevron up',
+    'chevron down',
+    'chevron left',
+    'chevron right',
+    'chevron double left',
+    'chevron double right',
+    'clock',
+    'clone',
+    'duplicate',
+    'code',
+    'collapse',
+    'collapse all',
+    'company',
+    'compare',
+    'copy',
+    'delete',
+    'trash',
+    'depth',
+    'download',
+    'export',
+    'drag',
+    'drag horizontal',
+    'edit',
+    'pencil',
+    'rename',
+    'electricity',
+    'error',
+    'exclamation',
+    'expand',
+    'expand all',
+    'external',
+    'fast forward',
+    'fast backward',
+    'file',
+    'filter',
+    'focus',
+    'folder',
+    'gauge',
+    'help',
+    'hide',
+    'indent',
+    'info',
+    'italic',
+    'key',
+    'laptop',
+    'layout columns',
+    'columns',
+    'layout grid',
+    'grid',
+    'layout rows',
+    'rows',
+    'layout single',
+    'square',
+    'link',
+    'list',
+    'legend',
+    'ul',
+    'list numbers',
+    'ol',
+    'location',
+    'lock',
+    'maximize',
+    'menu',
+    'minimize',
+    'minus',
+    'moon',
+    'move',
+    'note',
+    'notification',
+    'bell',
+    'paste',
+    'pause',
+    'play',
+    'question',
+    'redo',
+    'rotate',
+    'rotate right',
+    'refresh',
+    'sync',
+    'save',
+    'scale',
+    'search',
+    'server',
+    'settings',
+    'show',
+    'eye',
+    'sort',
+    'sort descending',
+    'sort down',
+    'sort amount down',
+    'sort ascending',
+    'sort up',
+    'sort amount up',
+    'spinner',
+    'split',
+    'star',
+    'step backward',
+    'step forward',
+    'stop',
+    'success',
+    'sun',
+    'table',
+    'target',
+    'undo',
+    'rotate left',
+    'unfilter',
+    'unlink',
+    'unlock',
+    'upload',
+    'import',
+    'user',
+    'users',
+    'group',
+    'video',
+    'warning',
+    'alert',
+    'water',
+    'droplet',
+];
+export const NamedIcon = ({ icon }) => {
+    switch (icon) {
+        case 'add':
+        case 'plus':
+            return _jsx(FaPlus, {});
+        case 'add above':
+            return _jsx(AiOutlineInsertRowAbove, {});
+        case 'add below':
+            return _jsx(AiOutlineInsertRowBelow, {});
+        case 'arrow down':
+        case 'down':
+            return _jsx(FaArrowDown, {});
+        case 'arrow left':
+        case 'left':
+            return _jsx(FaArrowLeft, {});
+        case 'arrow right':
+        case 'right':
+            return _jsx(FaArrowRight, {});
+        case 'arrow up':
+        case 'up':
+            return _jsx(FaArrowUp, {});
+        case 'bold':
+            return _jsx(TbBold, {});
+        case 'book':
+        case 'library':
+            return _jsx(FaBook, {});
+        case 'camera':
+            return _jsx(FaCamera, {});
+        case 'close':
+        case 'times':
+            return _jsx(FaTimes, {});
+        case 'chart':
+        case 'chart line':
+            return _jsx(RiLineChartFill, {});
+        case 'chart bar':
+            return _jsx(RiBarChartFill, {});
+        case 'chart pie':
+            return _jsx(RiPieChartFill, {});
+        case 'chat':
+            return _jsx(BsFillChatFill, {});
+        case 'check':
+        case 'checkmark':
+            return _jsx(FaCheck, {});
+        case 'chevron up':
+            return _jsx(FaAngleUp, {});
+        case 'chevron down':
+            return _jsx(FaAngleDown, {});
+        case 'chevron left':
+            return _jsx(FaAngleLeft, {});
+        case 'chevron right':
+            return _jsx(FaAngleRight, {});
+        case 'chevron double left':
+            return _jsx(FaAngleDoubleLeft, {});
+        case 'chevron double right':
+            return _jsx(FaAngleDoubleRight, {});
+        case 'clock':
+            return _jsx(FaRegClock, {});
+        case 'clone':
+        case 'duplicate':
+            return _jsx(FaClone, {});
+        case 'code':
+            return _jsx(TbCode, {});
+        case 'collapse':
+            return _jsx(AiOutlineMinusSquare, {});
+        case 'collapse all':
+            return _jsx(VscCollapseAll, {});
+        case 'company':
+            return _jsx(FaBuilding, {});
+        case 'compare':
+            return _jsx(FaBalanceScale, {});
+        case 'copy':
+            return _jsx(FaRegCopy, {});
+        case 'delete':
+        case 'trash':
+            return _jsx(FaTrash, {});
+        case 'depth':
+            return _jsx(FaRulerVertical, {});
+        case 'download':
+        case 'export':
+            return _jsx(FaFileExport, {});
+        case 'drag':
+            return _jsx(GrDrag, {});
+        case 'drag horizontal':
+            return _jsx(FaGripLinesVertical, {});
+        case 'edit':
+        case 'pencil':
+        case 'rename':
+            return _jsx(FaPencilAlt, {});
+        case 'electricity':
+            return _jsx(BsLightningCharge, {});
+        case 'error':
+            return _jsx(FaTimesCircle, {});
+        case 'exclamation':
+            return _jsx(FaExclamation, {});
+        case 'expand':
+            return _jsx(AiOutlinePlusSquare, {});
+        case 'expand all':
+            return _jsx(VscExpandAll, {});
+        case 'external':
+            return _jsx(BiLinkExternal, {});
+        case 'fast forward':
+            return _jsx(FaFastForward, {});
+        case 'fast backward':
+            return _jsx(FaFastBackward, {});
+        case 'file':
+            return _jsx(FaFileAlt, {});
+        case 'filter':
+            return _jsx(RiFilterFill, {});
+        case 'focus':
+            return _jsx(TbFocusCentered, {});
+        case 'folder':
+            return _jsx(FaFolder, {});
+        case 'gauge':
+            return _jsx(TbGauge, {});
+        case 'help':
+            return _jsx(FaQuestionCircle, {});
+        case 'hide':
+            return _jsx(FaEyeSlash, {});
+        case 'indent':
+            return _jsx(BsArrowReturnRight, {});
+        case 'info':
+            return _jsx(FaInfoCircle, {});
+        case 'italic':
+            return _jsx(TbItalic, {});
+        case 'key':
+            return _jsx(FaKey, {});
+        case 'laptop':
+            return _jsx(BsLaptop, {});
+        case 'layout columns':
+        case 'columns':
+            return _jsx(RiLayoutColumnLine, {});
+        case 'layout grid':
+        case 'grid':
+            return _jsx(RiLayoutGridLine, {});
+        case 'layout rows':
+        case 'rows':
+            return _jsx(RiLayoutRowLine, {});
+        case 'layout single':
+        case 'square':
+            return _jsx(RiSquareLine, {});
+        case 'link':
+            return _jsx(BiLink, {});
+        case 'list':
+        case 'legend':
+        case 'ul':
+            return _jsx(TbList, {});
+        case 'list numbers':
+        case 'ol':
+            return _jsx(TbListNumbers, {});
+        case 'location':
+            return _jsx(TbMapPin, {});
+        case 'lock':
+            return _jsx(HiLockClosed, {});
+        case 'maximize':
+            return _jsx(FaExpandArrowsAlt, {});
+        case 'menu':
+            return _jsx(FaEllipsisV, {});
+        case 'minimize':
+            return _jsx(FaCompressArrowsAlt, {});
+        case 'minus':
+            return _jsx(FaMinus, {});
+        case 'moon':
+            return _jsx(FaMoon, {});
+        case 'move':
+            return _jsx(FaArrowsAlt, {});
+        case 'note':
+            return _jsx(TbNote, {});
+        case 'notification':
+        case 'bell':
+            return _jsx(FaBell, {});
+        case 'paste':
+            return _jsx(FaPaste, {});
+        case 'pause':
+            return _jsx(FaPause, {});
+        case 'play':
+            return _jsx(FaPlay, {});
+        case 'question':
+            return _jsx(FaQuestion, {});
+        case 'redo':
+        case 'rotate':
+        case 'rotate right':
+            return _jsx(FaRedo, {});
+        case 'refresh':
+        case 'sync':
+            return _jsx(FaSync, {});
+        case 'save':
+            return _jsx(FaSave, {});
+        case 'scale':
+            return _jsx(FaExpandAlt, {});
+        case 'search':
+            return _jsx(FaSearch, {});
+        case 'server':
+            return _jsx(HiServer, {});
+        case 'settings':
+            return _jsx(FaCog, {});
+        case 'show':
+        case 'eye':
+            return _jsx(FaEye, {});
+        case 'sort':
+        case 'sort descending':
+        case 'sort down':
+        case 'sort amount down':
+            return _jsx(CgSortAz, {});
+        case 'sort ascending':
+        case 'sort up':
+        case 'sort amount up':
+            return _jsx(CgSortZa, {});
+        case 'spinner':
+            return _jsx(FaSpinner, {});
+        case 'split':
+            return _jsx(TbArrowsSplit, {});
+        case 'star':
+            return _jsx(FaStar, {});
+        case 'step backward':
+            return _jsx(FaStepBackward, {});
+        case 'step forward':
+            return _jsx(FaStepForward, {});
+        case 'stop':
+            return _jsx(FaStopCircle, {});
+        case 'success':
+            return _jsx(FaCheckCircle, {});
+        case 'sun':
+            return _jsx(FaSun, {});
+        case 'table':
+            return _jsx(RiTableLine, {});
+        case 'target':
+            return _jsx(TbTarget, {});
+        case 'undo':
+        case 'rotate left':
+            return _jsx(FaUndo, {});
+        case 'unfilter':
+            return _jsx(RiFilterOffFill, {});
+        case 'unlink':
+            return _jsx(BiUnlink, {});
+        case 'unlock':
+            return _jsx(HiLockOpen, {});
+        case 'upload':
+        case 'import':
+            return _jsx(FaFileImport, {});
+        case 'user':
+            return _jsx(FaUser, {});
+        case 'users':
+        case 'group':
+            return _jsx(FaUsers, {});
+        case 'video':
+            return _jsx(BiVideo, {});
+        case 'warning':
+        case 'alert':
+            return _jsx(FaExclamationTriangle, {});
+        case 'water':
+        case 'droplet':
+            return _jsx(IoWater, {});
+        case '':
+            return null;
+        default:
+            return _jsx(FaRegCircle, {}); //just a default icon so it's obvious when missing
+    }
+};