@indico-data/design-system 2.1.2 → 2.2.0

package/src/legacy/components/ListTable/Header/Header.tsx

@@ -6,7 +6,7 @@ import { numberUtils } from '@/legacy/utils';
 
 import { BorderSelect } from '@/legacy/components/dropdowns';
 import { Button } from '@/legacy/components/buttons';
-import { Icon } from '@/legacy/components/Icon';
+import { Icon } from '@/components/icons';
 
 import { StyledHeader } from './Header.styles';
 
@@ -57,7 +57,6 @@ export const Header = (props: Props) => {
               <Icon
                 name="fa-arrow-down"
                 ariaLabel="descending"
-                size={[16]}
                 style={{ transform: sortBy.descending ? '' : 'rotate(180deg)' }}
               />
             </Button>

package/src/legacy/components/ListTable/ListTable.stories.tsx

@@ -1,10 +1,11 @@
 import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Button, Icon } from '@/legacy/components';
+import { Button } from '@/legacy/components';
 
 import { ListTable } from './ListTable';
 import { mockUserHeaders, mockDocProcHeaders, mockAllUsers, mockDocProcReport } from './mock-data';
+import { Icon } from '@/components/icons';
 
 const meta = {
   component: ListTable,

package/src/legacy/components/Navigation/Drawer/Drawer.tsx

@@ -12,7 +12,7 @@
 */
 import React from 'react';
 import { IconName, PermafrostComponent } from '@/types';
-import { Icon } from '../../Icon';
+import { Icon } from '@/components/icons';
 import { DrawerLinkList } from './DrawerLinkList';
 import { ListItem } from './types';
 import './Drawer.scss';
@@ -77,7 +77,7 @@ export const Drawer = (props: Props) => {
             headerComponent
           ) : (
             <span>
-              {logoIcon ? <Icon name={logoIcon} size={[24]} data-testid="logo-icon" /> : null}
+              {logoIcon ? <Icon name={logoIcon} size="lg" data-testid="logo-icon" /> : null}
               <p
                 data-testid="logo-text"
                 className="pf__drawer__header__logo-text"

package/src/legacy/components/Navigation/Drawer/DrawerLinkList.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { PermafrostComponent } from '@/types';
 import { StyledDrawerLinkList } from './DrawerLinkList.styles';
-import { Icon } from '../../Icon';
+import { Icon } from '@/components/icons';
 import { ListItem } from './types';
 import { NavLink } from 'react-router-dom';
 
@@ -43,7 +43,7 @@ export const DrawerLinkList = (props: Props) => {
             >
               <li className="drawer__list__item__link">
                 <span className={`drawer__list__item__icon`}>
-                  <Icon size={[22]} name={item.icon} ariaLabel={`${item.label} icon`} />
+                  <Icon size="lg" name={item.icon} ariaLabel={`${item.label} icon`} />
                 </span>
                 <span
                   className={`drawer__list__item__label ${

package/src/legacy/components/Toggle/Toggle.styles.ts

@@ -68,7 +68,7 @@ export const StyledToggle = styled.label`
   }
 
   .checked-icon {
-    fill: #fff;
+    color: #fff;
     display: none;
     left: 3px;
   }

package/src/legacy/components/Toggle/Toggle.tsx

@@ -3,16 +3,17 @@
 import React from 'react';
 import classNames from 'classnames';
 
-import { Icon } from '@/legacy/components';
+import { Icon } from '@/components/icons';
 import { PermafrostComponent, IconName } from '@/types';
 import { StyledToggle } from './Toggle.styles';
+import { IconSizes } from '@/components/icons/types';
 
 type Props = {
   disabled: boolean;
   onChange: any;
   value: boolean;
   ['aria-label']?: string;
-  iconSize?: number | string;
+  iconSize?: IconSizes;
   checkedIconName?: IconName;
   notCheckedIconName?: IconName;
 } & PermafrostComponent;
@@ -29,6 +30,8 @@ export const Toggle = (props: Props) => {
     iconSize,
   } = props;
 
+  const defaultIconStyle = { width: '5px', height: '5px' };
+
   return (
     <StyledToggle
       className={classNames(className, {
@@ -47,10 +50,20 @@ export const Toggle = (props: Props) => {
       <span className="slider round" />
 
       {checkedIconName && (
-        <Icon name={checkedIconName} size={[iconSize || 5]} className="checked-icon" />
+        <Icon
+          size={iconSize}
+          name={checkedIconName}
+          className="checked-icon"
+          style={iconSize ? undefined : defaultIconStyle}
+        />
       )}
       {notCheckedIconName && (
-        <Icon name={notCheckedIconName} size={[iconSize || 5]} className="not-checked-icon" />
+        <Icon
+          size={iconSize}
+          name={notCheckedIconName}
+          className="not-checked-icon"
+          style={iconSize ? undefined : defaultIconStyle}
+        />
       )}
     </StyledToggle>
   );

package/src/legacy/components/basic-section/SectionTable/SectionTable.tsx

@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import classNames from 'classnames';
 
 import { IconName } from '@/types';
-import { Icon } from '@/legacy/components/Icon';
+import { Icon } from '@/components/icons';
 import { BorderSelect } from '@/legacy/components/dropdowns';
 
 import { StyledSectionTable } from './SectionTable.styles';

package/src/legacy/components/buttons/Button/Button.tsx

@@ -66,7 +66,7 @@ export function Button(props: ButtonProps): React.ReactElement {
       type={type || 'button'}
       {...rest}
     >
-      {busy && <CircleSpinner size="0.9em" style={{ marginRight: '0.5em' }} />}
+      {busy && <CircleSpinner className="mr-2" />}
 
       {children}
     </StyledButton>

package/src/legacy/components/buttons/IconButton/IconButton.tsx

@@ -8,7 +8,8 @@ import { AriaButtonProps } from '@react-types/button';
 
 import { SPACING } from '@/legacy/tokens';
 import { IconName, PermafrostComponent } from '@/types';
-import { Icon, CircleSpinner } from '@/legacy/components';
+import { Icon } from '@/components/icons';
+import { CircleSpinner } from '@/legacy/components';
 import { ButtonSize, IconButtonVariant } from '../types';
 
 import { StyledIconButton, StyledIconButtonLink } from './IconButton.styles';
@@ -81,7 +82,6 @@ export function IconButton(props: Props) {
 
   const iconElement = busy ? (
     <CircleSpinner
-      size="1em"
       style={{
         marginTop: `${adjustAlignment}px`,
         marginBottom: `${Math.abs(adjustAlignment)}px`,

package/src/legacy/components/dropdowns/BorderSelect/BorderSelect.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { v4 as uuid } from 'uuid';
 import classNames from 'classnames';
 
-import { Icon } from '../../Icon';
+import { Icon } from '@/components/icons';
 import { PermafrostComponent } from '@/types';
 
 import { StyledSelect, StyledValidationError } from './BorderSelect.styles';

package/src/legacy/components/dropdowns/MultiCombobox/MultiCombobox.stories.tsx

@@ -3,10 +3,10 @@
 import React, { useRef } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Icon, IconButton } from '@/legacy/components';
 import { ComboboxOption } from '../types';
 import { MultiCombobox } from './MultiCombobox';
 import { useCombobox } from '../useCombobox';
+import { Button, Icon } from '@/index';
 
 const options = [
   { value: 'angie', label: 'angie - Labeler' },
@@ -35,13 +35,14 @@ function StoryRender(props: any) {
   return (
     <>
       <MultiCombobox ref={selectEl} {...props} />
-      <IconButton
-        adjustAlignment={0}
+      <Button
         iconName="trash"
-        onPress={() => clearValue()}
-        label="clear selections"
-        style={{ marginTop: '1em' }}
-      />
+        onClick={() => clearValue()}
+        ariaLabel="clear selections"
+        className="mt-4"
+      >
+        clear selections
+      </Button>
     </>
   );
 }

package/src/legacy/components/dropdowns/MultiCombobox/MultiCombobox.styles.ts

@@ -68,7 +68,9 @@ export const StyledMultiCombobox = styled(ReactSelect)`
     }
 
     &__remove {
-      padding-right: ${spacingCommon};
+      margin-right: ${spacingCommon};
+      margin-left: 4px;
+      padding: 0;
 
       :hover {
         cursor: pointer;

package/src/legacy/components/dropdowns/MultiCombobox/MultiCombobox.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { components } from 'react-select';
 
 import { PermafrostComponent } from '@/types';
-import { Icon } from '../../Icon';
+import { Icon } from '@/components/icons';
 import { addCustomProps } from '../utils';
 import type { ComboboxProps, ComboboxOption } from '../types';
 
@@ -62,7 +62,7 @@ export const MultiCombobox = React.forwardRef((props: Props, ref: any) => {
   const MultiValueRemove = (props: any) => {
     return (
       <components.MultiValueRemove {...props}>
-        <Icon name="x-close" ariaLabel="remove" size={[10]} />
+        <Icon name="x-close" ariaLabel="remove" size="xs" />
       </components.MultiValueRemove>
     );
   };

package/src/legacy/components/dropdowns/Select/Select.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { v4 as uuid } from 'uuid';
 
-import { Icon } from '@/legacy/components/Icon';
+import { Icon } from '@/components/icons';
 import { PermafrostComponent } from '@/types';
 
 import { StyledSelect } from './Select.styles';
@@ -61,8 +61,8 @@ export const Select = (props: Props) => {
             );
           })}
         </select>
-
-        <Icon className="chevron" name="chevron-down" size={size === 'small' ? [10] : [12]} />
+        {/* TODO: Fix this size mismatch when bringing Select into DS */}
+        <Icon className="chevron" name="chevron-down" size={size === 'small' ? 'xs' : 'sm'} />
       </div>
     </StyledSelect>
   );

package/src/legacy/components/dropdowns/SingleCombobox/SingleCombobox.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { components } from 'react-select';
 
-import { Icon } from '@/legacy/components/Icon';
+import { Icon } from '@/components/icons';
 import { PermafrostComponent } from '@/types';
 import { addCustomProps } from '../utils';
 
@@ -53,7 +53,7 @@ export const SingleCombobox = React.forwardRef((props: Props, ref: any) => {
   const DropdownIndicator = (props: any) => {
     return (
       <components.DropdownIndicator {...props}>
-        <Icon name="fa-caret-down" ariaLabel="open dropdown" size={[14]} />
+        <Icon name="fa-caret-down" ariaLabel="open dropdown" />
       </components.DropdownIndicator>
     );
   };

package/src/legacy/components/index.ts

@@ -2,7 +2,7 @@ export { Accordion } from './Accordion';
 export { Section, SectionBlock, SectionBody, SectionHeader, SectionTable } from './basic-section';
 export { Button, IconButton } from './buttons';
 export { BorderSelect, MultiCombobox, Select, SingleCombobox } from './dropdowns';
-export { Icon, faIcons, indicons } from './Icon';
+
 export {
   EditableInput,
   NumberInput,

package/src/legacy/components/inputs/EditableInput/EditableInput.tsx

@@ -8,7 +8,7 @@ import classNames from 'classnames';
 
 import { stringUtils } from '@/legacy/utils';
 
-import { Icon } from '@/legacy/components/Icon';
+import { Icon } from '@/components/icons';
 import { PermafrostComponent } from '@/types';
 
 import { StyledEditableInput } from './EditableInput.styles';

package/src/legacy/components/inputs/NoInputDatePicker/NoInputDatePicker.stories.tsx

@@ -27,7 +27,7 @@ export const Single: Story = {
     label: 'Pick a date:',
     value: today,
     triggerIcon: 'calendar',
-    triggerIconSize: [20],
+    triggerIconSize: 'lg',
     clearOnClose: true,
     onChange: (date: Date | DateRange | undefined) => {
       // eslint-disable-next-line no-console
@@ -43,7 +43,7 @@ export const Range: Story = {
     value: today,
     isRangePicker: true,
     triggerIcon: 'calendar',
-    triggerIconSize: [20],
+    triggerIconSize: 'lg',
     onChange: (date: Date | DateRange | undefined) => {
       // eslint-disable-next-line no-console
       console.log(date);

package/src/legacy/components/inputs/NoInputDatePicker/NoInputDatePicker.tsx

@@ -12,9 +12,10 @@ import {
 } from 'react-day-picker';
 import { usePopper } from 'react-popper';
 import { IconName, PermafrostComponent } from '@/types';
-import { Icon } from '@/index';
+import { Icon } from '@/components/icons';
 
 import { StyledNoInputDatePicker } from './NoInputDatePicker.styles';
+import { IconSizes } from '@/components/icons/types';
 
 type Props = PermafrostComponent & {
   ariaLabel?: string;
@@ -28,7 +29,7 @@ type Props = PermafrostComponent & {
   selectedRange?: DateRange | undefined;
   value: Date | undefined;
   triggerIcon: IconName;
-  triggerIconSize: [string | number];
+  triggerIconSize: IconSizes;
   isRangePicker?: boolean;
   isOpen?: boolean;
   clearOnClose?: boolean;
@@ -49,7 +50,7 @@ function CustomCaption(props: CaptionProps) {
           }
         }}
       >
-        <Icon size={[10]} ariaLabel="Previous Month" name="chevron-left" />
+        <Icon size="sm" ariaLabel="Previous Month" name="chevron-left" />
       </button>
       <h2 className="custom__caption__text">{format(props.displayMonth, 'MMM yyyy')}</h2>
       <button
@@ -62,7 +63,7 @@ function CustomCaption(props: CaptionProps) {
           }
         }}
       >
-        <Icon size={[10]} ariaLabel="Next Month" name="chevron-right" />
+        <Icon size="sm" ariaLabel="Next Month" name="chevron-right" />
       </button>
     </div>
   );

package/src/legacy/components/inputs/NumberInput/NumberInput.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { v4 as uuid } from 'uuid';
 
 import { Button } from '@/legacy/components/buttons';
-import { Icon } from '@/legacy/components/Icon';
+import { Icon } from '@/components/icons';
 import { PermafrostComponent } from '@/types';
 
 import { StyledNumberField } from './NumberInput.styles';

package/src/legacy/components/inputs/SearchInput/SearchInput.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { v4 as uuid } from 'uuid';
 import classNames from 'classnames';
 
-import { Icon } from '@/legacy/components/Icon';
+import { Icon } from '@/components/icons';
 import { PermafrostComponent } from '@/types';
 
 import { StyledSearchField } from './SearchInput.styles';

package/src/legacy/components/loading-indicators/CircleSpinner/CircleSpinner.tsx

@@ -2,23 +2,24 @@
 
 import React from 'react';
 
-import { Icon } from '../../Icon';
+import { Icon } from '@/components/icons';
 import { PermafrostComponent } from '@/types';
+import { IconSizes } from '@/components/icons/types';
 
 type Props = PermafrostComponent & {
   ariaLabel?: string;
-  size?: string;
-  style?: { [key: string]: string };
+  size?: IconSizes;
+  style?: React.CSSProperties;
   fill?: string;
 };
 
 export function CircleSpinner(props: Props): React.ReactElement {
-  const { className, fill, id, size, style, ariaLabel = 'Loading...' } = props;
+  const { className, fill, id, size = 'sm', style, ariaLabel = 'Loading...' } = props;
 
-  const loaderSize = size || '12px';
-  const loaderStyle = {
+  const loaderStyle: React.CSSProperties = {
     position: 'relative',
     top: '1px',
+    color: fill || 'currentColor',
     ...style,
   };
 
@@ -28,9 +29,8 @@ export function CircleSpinner(props: Props): React.ReactElement {
       className={`spin ${className || ''}`}
       data-cy={props['data-cy']}
       id={id}
-      size={[loaderSize]}
+      size={size}
       style={loaderStyle}
-      fill={fill || 'currentColor'}
       ariaLabel={ariaLabel}
     />
   );

package/src/legacy/components/user-feedback/Shrug/Shrug.styles.ts

@@ -19,5 +19,7 @@ export const StyledShrug = styled.div`
   svg {
     fill: ${COLORS.iron};
     opacity: 0.5;
+    width: 260px;
+    height: 84px;
   }
 `;

package/src/legacy/components/user-feedback/Shrug/Shrug.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 
 import { Button } from '@/legacy/components/buttons';
-import { Icon } from '@/legacy/components/Icon';
+import { Icon } from '@/components/icons';
 import { PermafrostComponent } from '@/types';
 
 import { StyledShrug } from './Shrug.styles';
@@ -22,7 +22,7 @@ export function Shrug(props: Props): React.ReactElement {
   const { actionLink, actionText, buttonAction, buttonText, className, id, message } = props;
   return (
     <StyledShrug className={className} data-cy={props['data-cy']} id={id}>
-      <Icon name="shrug" size={['260px', '84px']} />
+      <Icon name="shrug" />
       {typeof message === 'string' ? (
         <p className="t-subhead-large" {...props?.messageProps}>
           {message}
@@ -31,12 +31,12 @@ export function Shrug(props: Props): React.ReactElement {
         message
       )}
       {actionLink && actionText && (
-        <Link to={actionLink} className="button blue cta" style={{ marginTop: '20px' }}>
+        <Link to={actionLink} className="button blue cta mt-5">
           {actionText}
         </Link>
       )}
       {buttonAction && buttonText && (
-        <Button onClick={buttonAction} style={{ marginTop: '20px' }} variant="cta">
+        <Button onClick={buttonAction} className="mt-5" variant="cta">
           {buttonText}
         </Button>
       )}

package/src/styles/index.scss

@@ -4,6 +4,7 @@
 // Components
 @import '../legacy/components/Navigation/Drawer/Drawer.scss';
 @import '../components/button/styles/Button.scss';
+@import '../components/icons/styles/Icon.scss';
 
 // Helper Classes
 @import 'typography';

package/src/styles/variables/_icons.scss

@@ -0,0 +1,7 @@
+:root {
+  --pf-icon-size-xs: 0.6rem; // eww, probably want this to be 0.5 eventually but we use 0.6 (10px) commonly in the codebase
+  --pf-icon-size-sm: 0.75rem;
+  --pf-icon-size-md: 1rem;
+  --pf-icon-size-lg: 1.5rem;
+  --pf-icon-size-xl: 2rem;
+}

package/src/styles/variables/index.scss

@@ -1,5 +1,6 @@
 @import 'typography';
 @import 'colors';
+@import 'icons';
 @import 'borders';
 @import 'padding';
-@import 'margin';
+@import 'margin';

package/src/types.ts

@@ -1,13 +1,3 @@
-import { faIcons } from './legacy/components/Icon/faIcons';
-import { indicons } from './legacy/components/Icon/indicons';
-
-const allIcons = {
-  ...faIcons,
-  ...indicons,
-} as const;
-
-export type IconName = keyof typeof allIcons;
-
 export type PermafrostComponent = {
   id?: string;
   className?: string;
@@ -22,3 +12,6 @@ export type ButtonSize = 'normal' | 'large';
 import { ListItem } from './legacy/components/Navigation/Drawer/types';
 
 export type { ListItem };
+
+import { IconName } from '../build/generated/iconTypes';
+export type { IconName };

package/tsconfig.json

@@ -22,6 +22,6 @@
       "@/*": ["src/*"]
     }
   },
-  "include": ["./src/**/*"],
+  "include": ["src", "build/generated"],
   "exclude": ["node_modules", "lib"]
 }

package/lib/legacy/components/Icon/Icon.d.ts

@@ -1,17 +0,0 @@
-import React from 'react';
-import { PermafrostComponent, IconName } from '@/types';
-type Props = PermafrostComponent & {
-    ariaLabel?: string;
-    fill?: string;
-    name: IconName;
-    size?: [string | number] | [string | number, string | number];
-    style?: any;
-    onClick?(): void;
-    ref?: React.Ref<SVGSVGElement>;
-};
-/**
- * Generic icon component, hidden from Assistive Technology by default.
- * If icon should be available to AT, pass the desired name into the `ariaLabel` prop.
- */
-export declare function Icon({ style, ...props }: Props): React.ReactElement | null;
-export {};

package/lib/legacy/components/Icon/Icon.stories.d.ts

@@ -1,42 +0,0 @@
-import React from 'react';
-import { StoryObj } from '@storybook/react';
-import { Icon } from './Icon';
-declare const meta: {
-    component: typeof Icon;
-    title: string;
-    argTypes: {
-        ariaLabel: {
-            control: {
-                disable: boolean;
-            };
-        };
-        size: {
-            description: string;
-        };
-        name: {
-            control: {
-                type: string;
-                options: ("search" | "split" | "indico-o-white" | "account" | "address" | "api-doc" | "arrow-dots" | "arrow-down" | "arrow-up-circle" | "arrows-cursor" | "bookmark" | "bookmarks" | "bookmark-saved" | "branch" | "calendar" | "check-circle" | "circle-help" | "check" | "checkbox" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "classification-document" | "classification-image" | "classification-page" | "classify-and-unbundle" | "clipboard" | "coffee-1" | "coffee-2" | "coffee-fail" | "coffeecup" | "coffeesteam" | "cog" | "collection" | "compare" | "company-name" | "confidence-bar-1" | "confidence-bar-2" | "confidence-bar-3" | "confidence-bar-4" | "confidence-bars" | "configure" | "choose-library" | "crowdlabel" | "currency" | "dashboard" | "data-and-access" | "database" | "document" | "date" | "draggable" | "droplet" | "edit" | "education" | "ellipsis" | "elmos-fire" | "email" | "enterprise" | "exclamation-circle-stroke" | "extraction" | "eye" | "file" | "fileHappy" | "filter" | "filter-outline" | "folder" | "form" | "gallery" | "find-documents" | "graphiql" | "grid-view" | "happy" | "help-solid" | "help" | "highlight" | "highlight-outline" | "indico-logo-white" | "indico-o" | "info" | "kabob" | "key" | "label" | "layout-complex" | "layout-simple" | "list-view" | "libraries" | "location" | "logout" | "lock" | "menu" | "model-import" | "model-starter" | "moon" | "moonbow" | "no-collections" | "no-libraries" | "no_results" | "no-format" | "object-detection" | "organizations" | "output" | "page-thumbnail" | "pay-as-you-go" | "person" | "phone" | "pin" | "plus" | "pointer" | "popup" | "price" | "preview-view" | "radio-button" | "recruiter" | "regex" | "reject" | "repair" | "research" | "reset" | "retrain" | "sad" | "search-thin" | "shrug" | "signature" | "sort-down" | "step-forward" | "sun" | "surround" | "surround-outline" | "text" | "thumbs-down" | "thumbs-up" | "time" | "trash" | "unlock" | "upload" | "url" | "user" | "wand" | "warning" | "warning-stroke" | "workflows" | "x-close" | "zoom-in" | "zoom-out" | "fa-dot-circle" | "fa-file" | "fa-file-alt" | "fa-file-pdf" | "fa-file-word" | "fa-check-square" | "fa-square" | "fa-angle-double-left" | "fa-arrow-circle-right" | "fa-arrow-down" | "fa-arrow-left" | "fa-arrow-right" | "fa-arrow-up" | "fa-ban" | "fa-caret-down" | "fa-caret-up" | "fa-chart-bar" | "fa-check" | "fa-check-circle" | "fa-circle-notch" | "fa-clipboard" | "fa-clock" | "fa-clone" | "fa-cloud" | "fa-cog" | "fa-cogs" | "fa-coins" | "fa-cube" | "fa-cut" | "fa-download" | "fa-exclamation-circle" | "fa-exclamation-triangle" | "fa-external-link-alt" | "fa-eye-dropper" | "fa-file-download" | "fa-file-export" | "fa-file-upload" | "fa-filter" | "fa-ghost" | "fa-hat-wizard" | "fa-info-circle" | "fa-key" | "fa-keyboard" | "fa-layer-group" | "fa-pencil-alt" | "fa-plus" | "fa-plus-square" | "fa-question-circle" | "fa-robot" | "fa-search" | "fa-sign-out-alt" | "fa-sliders-h" | "fa-sync-alt" | "fa-tag" | "fa-times" | "fa-times-circle" | "fa-tint" | "fa-toggle-off" | "fa-toggle-on" | "fa-trash" | "fa-trash-alt" | "fa-undo" | "fa-user" | "fa-users" | "fa-mouse-pointer" | "fa-step-forward" | "fa-search-minus" | "fa-search-plus" | "fa-table" | "fa-image" | "fa-link" | "fa-list")[];
-            };
-        };
-    };
-    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react/dist/types-bf5e6555").R, {
-        id?: string | undefined;
-        className?: string | undefined;
-        'data-cy'?: string | undefined;
-        'data-testid'?: string | undefined;
-        ariaLabel?: string | undefined;
-        fill?: string | undefined;
-        name: "search" | "split" | "indico-o-white" | "account" | "address" | "api-doc" | "arrow-dots" | "arrow-down" | "arrow-up-circle" | "arrows-cursor" | "bookmark" | "bookmarks" | "bookmark-saved" | "branch" | "calendar" | "check-circle" | "circle-help" | "check" | "checkbox" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "classification-document" | "classification-image" | "classification-page" | "classify-and-unbundle" | "clipboard" | "coffee-1" | "coffee-2" | "coffee-fail" | "coffeecup" | "coffeesteam" | "cog" | "collection" | "compare" | "company-name" | "confidence-bar-1" | "confidence-bar-2" | "confidence-bar-3" | "confidence-bar-4" | "confidence-bars" | "configure" | "choose-library" | "crowdlabel" | "currency" | "dashboard" | "data-and-access" | "database" | "document" | "date" | "draggable" | "droplet" | "edit" | "education" | "ellipsis" | "elmos-fire" | "email" | "enterprise" | "exclamation-circle-stroke" | "extraction" | "eye" | "file" | "fileHappy" | "filter" | "filter-outline" | "folder" | "form" | "gallery" | "find-documents" | "graphiql" | "grid-view" | "happy" | "help-solid" | "help" | "highlight" | "highlight-outline" | "indico-logo-white" | "indico-o" | "info" | "kabob" | "key" | "label" | "layout-complex" | "layout-simple" | "list-view" | "libraries" | "location" | "logout" | "lock" | "menu" | "model-import" | "model-starter" | "moon" | "moonbow" | "no-collections" | "no-libraries" | "no_results" | "no-format" | "object-detection" | "organizations" | "output" | "page-thumbnail" | "pay-as-you-go" | "person" | "phone" | "pin" | "plus" | "pointer" | "popup" | "price" | "preview-view" | "radio-button" | "recruiter" | "regex" | "reject" | "repair" | "research" | "reset" | "retrain" | "sad" | "search-thin" | "shrug" | "signature" | "sort-down" | "step-forward" | "sun" | "surround" | "surround-outline" | "text" | "thumbs-down" | "thumbs-up" | "time" | "trash" | "unlock" | "upload" | "url" | "user" | "wand" | "warning" | "warning-stroke" | "workflows" | "x-close" | "zoom-in" | "zoom-out" | "fa-dot-circle" | "fa-file" | "fa-file-alt" | "fa-file-pdf" | "fa-file-word" | "fa-check-square" | "fa-square" | "fa-angle-double-left" | "fa-arrow-circle-right" | "fa-arrow-down" | "fa-arrow-left" | "fa-arrow-right" | "fa-arrow-up" | "fa-ban" | "fa-caret-down" | "fa-caret-up" | "fa-chart-bar" | "fa-check" | "fa-check-circle" | "fa-circle-notch" | "fa-clipboard" | "fa-clock" | "fa-clone" | "fa-cloud" | "fa-cog" | "fa-cogs" | "fa-coins" | "fa-cube" | "fa-cut" | "fa-download" | "fa-exclamation-circle" | "fa-exclamation-triangle" | "fa-external-link-alt" | "fa-eye-dropper" | "fa-file-download" | "fa-file-export" | "fa-file-upload" | "fa-filter" | "fa-ghost" | "fa-hat-wizard" | "fa-info-circle" | "fa-key" | "fa-keyboard" | "fa-layer-group" | "fa-pencil-alt" | "fa-plus" | "fa-plus-square" | "fa-question-circle" | "fa-robot" | "fa-search" | "fa-sign-out-alt" | "fa-sliders-h" | "fa-sync-alt" | "fa-tag" | "fa-times" | "fa-times-circle" | "fa-tint" | "fa-toggle-off" | "fa-toggle-on" | "fa-trash" | "fa-trash-alt" | "fa-undo" | "fa-user" | "fa-users" | "fa-mouse-pointer" | "fa-step-forward" | "fa-search-minus" | "fa-search-plus" | "fa-table" | "fa-image" | "fa-link" | "fa-list";
-        size?: [string | number] | [string | number, string | number] | undefined;
-        style?: any;
-        onClick?: (() => void) | undefined;
-        ref?: React.Ref<SVGSVGElement> | undefined;
-    }>) => import("react/jsx-runtime").JSX.Element)[];
-};
-export default meta;
-type Story = StoryObj<typeof Icon>;
-export declare const General: Story;
-export declare const Indicon: Story;
-export declare const FontAwesome: Story;
-export declare const SizeSpecified: Story;