solace-ui-components 16.1.0

package/dist/components/form/SolacePicker.d.ts

@@ -0,0 +1,146 @@
+import { PopoverOrigin } from "@mui/material";
+import { ReactNode } from "react";
+import SolaceComponentProps from "../SolaceComponentProps";
+export interface SolaceColors {
+    bgColor: string;
+    fgColor: string;
+}
+export declare const SolacePickerIconWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const EmptyMessageContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare type SolacePickerTypes = "colors" | "icons";
+/**
+ * Utility function to convert a color object to a value
+ * @param param {object}
+ * @returns string
+ */
+export declare const color2value: ({ fgColor, bgColor }: SolaceColors) => string;
+/**
+ *
+ * @param value Utility function to convert a string value to object
+ * @returns object with fgColor and bgColor
+ */
+export declare const value2color: (value: string) => SolaceColors;
+/**
+ * Icons are not provided by MRC but maas-icons repo.
+ * These are the ones that shoud be used.
+ */
+export declare type SolaceEnvironmentIcons = "MAINTENANCE" | "CONSTRUCTION" | "TOOLKIT" | "TERMINAL" | "BUG" | "TEST_TUBE" | "NEW_RELEASE" | "CONTENT_SEARCH" | "BROKER" | "ROCKET_LAUNCH" | "VERIFIED" | "DEPLOYED_CODE";
+export interface SolacePickerChangeEvent {
+    name: string;
+    value: string;
+}
+export interface SolacePickerProps<T extends string> extends SolaceComponentProps {
+    /**
+     * Unique identifier ... if `id` is not specified, `name` value will be used in order to make `label` and `helperText` accessible for screen readers
+     */
+    id?: string;
+    /**
+     * Type of picker: "colors" or "icons"
+     */
+    variant: SolacePickerTypes;
+    /**
+     * Name attribute to assign to the `input` element
+     */
+    name: string;
+    /**
+     * When #variant is "icons", you must provide the icons from maas-icons (24px). Also see #SolaceEnvironmentIcons
+     */
+    icons?: {
+        [key in T]: JSX.Element;
+    };
+    /**
+     * When #variant is "icons", you can specify the order of the icons to be displayed
+     */
+    iconKeyOrderedList?: T[];
+    /**
+     * the label content to display on the screen
+     */
+    label?: string | JSX.Element;
+    /**
+     * The value of the `input` element, required for controlled component
+     */
+    value?: string;
+    /**
+     * Content to display as supportive/explanitory text
+     */
+    helperText?: string | JSX.Element;
+    /**
+     * The text to display as the tooltip hint
+     */
+    title?: string;
+    /**
+     * Boolean flag to mark the `input` in error state
+     */
+    hasErrors?: boolean;
+    /**
+     * Boolean flag used to display an indicator of whether or not this `input` is mandatory
+     */
+    required?: boolean;
+    /**
+     * Boolean flag to control whether to stack the label on top of the `input` element (false) or place them inline to one another (true)
+     */
+    inlineLabel?: boolean;
+    /**
+     * Boolean flag to disable the `input`
+     */
+    disabled?: boolean;
+    /**
+     * Boolean flag to set the `input` in a read-only state
+     */
+    readOnly?: boolean;
+    /**
+     * Callback function to trigger whenever the value of the `input` is changed
+     */
+    onChange?: (event: SolacePickerChangeEvent) => void;
+    /**
+     * Boolean flag to show the select option that has empty value
+     */
+    displayEmpty?: boolean;
+    /**
+     * Boolean flag to show the select options
+     */
+    open?: boolean;
+    /**
+     * Callback function to trigger whenever the dropdown opens
+     */
+    onOpen?: () => void;
+    /**
+     * Callback function to trigger whenever the dropdown closes
+     */
+    onClose?: () => void;
+    /**
+     * Custom anchorOrigin of the menu
+     */
+    menuAnchorOrigin?: PopoverOrigin;
+    /**
+     * Custom transformOrigin of the menu
+     */
+    menuTransformOrigin?: PopoverOrigin;
+    /**
+     * Number of colors or icons to display per row
+     */
+    numOfItemsPerRow?: number;
+    /**
+     * Optional flag to specify the number of rows to be displayed, default to 5.
+     */
+    numOfRowsDisplayed?: number;
+    /**
+     * Content control panel to be displayed on top of the menu items. Only applicable when variant is "icons".
+     * This is useful when you want to provide additional controls to the user, such as search, filter, etc.
+     */
+    contentControlPanel?: JSX.Element;
+    /**
+     * Callback function to return option display value based on selected option value
+     */
+    getOptionDisplayValue?: (value: unknown) => ReactNode;
+    /**
+     * If true, will focus on the first menuitem
+     */
+    autoFocusItem?: boolean;
+    /**
+     * Empty state message
+     */
+    emptyStateMessage?: string;
+}
+declare function SolacePicker<T extends string>({ id, name, variant, icons, iconKeyOrderedList, label, value, helperText, title, hasErrors, required, disabled, readOnly, inlineLabel, displayEmpty, onChange, dataQa, dataTags, open, onOpen, onClose, menuAnchorOrigin, menuTransformOrigin, numOfItemsPerRow, numOfRowsDisplayed, contentControlPanel, getOptionDisplayValue, autoFocusItem, emptyStateMessage }: SolacePickerProps<T>): JSX.Element;
+export default SolacePicker;

package/dist/components/form/SolaceRadio.d.ts

@@ -0,0 +1,62 @@
+/// <reference types="react" />
+import SolaceComponentProps from "../SolaceComponentProps";
+export interface SolaceRadioChangeEvent {
+    name: string;
+    value: boolean;
+}
+export interface SolaceRadioProps extends SolaceComponentProps {
+    /**
+     * Unique identifier ... if `id` is not specified, `name` value will be used in order to make `label` accessible for screen readers
+     */
+    id?: string;
+    /**
+     * Name attribute to assign to the `radio` element
+     */
+    name: string;
+    /**
+     * Value assign to the `radio` element
+     */
+    value?: string;
+    /**
+     * the label content to display on the screen
+     */
+    label?: string | JSX.Element;
+    /**
+     * The text to display as the tooltip hint
+     */
+    title?: string;
+    /**
+     * Content to display as supportive/explanitory text
+     */
+    subText?: string | JSX.Element;
+    /**
+     * allow subText to be displayed at 55% black (default to 80%)
+     */
+    lightSubText?: boolean;
+    /**
+     * Boolean flag to check or uncheck the `radio`
+     */
+    checked?: boolean;
+    /**
+     * Boolean flag used to display an indicator of whether or not this `radio` is mandatory
+     */
+    required?: boolean;
+    /**
+     * Boolean flag to disable the `radio`
+     */
+    disabled?: boolean;
+    /**
+     * Display the label with a larger font
+     */
+    largeLabel?: boolean;
+    /**
+     * Callback function to trigger whenever the value of the `radio` is changed
+     */
+    onChange?: (event: SolaceRadioChangeEvent) => void;
+    /**
+     * Boolean flag to set the radio to readOnly
+     */
+    readOnly?: boolean;
+}
+declare function SolaceRadio({ id, name, label, value, title, subText, lightSubText, checked, required, disabled, largeLabel, onChange, dataQa, dataTags, readOnly }: SolaceRadioProps): JSX.Element;
+export default SolaceRadio;

package/dist/components/form/SolaceRadioGroup.d.ts

@@ -0,0 +1,75 @@
+import React from "react";
+import SolaceComponentProps from "../SolaceComponentProps";
+export interface SolaceRadioGroupChangeEvent {
+    name: string;
+    value: string;
+}
+export interface SolaceRadioGroupProps extends SolaceComponentProps {
+    /**
+     * Unique identifier ... if `id` is not specified, `name` value will be used in order to make `label` accessible for screen readers
+     */
+    id?: string;
+    /**
+     * Name attribute to assign to the `radio group` element
+     */
+    name: string;
+    /**
+     * the label content to display on the screen
+     */
+    label?: string | JSX.Element;
+    /**
+     * Boolean flag to render stack label for a group of select components
+     */
+    stackLabel?: boolean;
+    /**
+     * Boolean flag to allow font size of 16px (default to 14px) for stack label
+     */
+    large?: boolean;
+    /**
+     * Boolean flag to allow font weight of medium (default to regular) for stack label
+     */
+    bold?: boolean;
+    /**
+     * Content to display as supportive/explanatory text
+     */
+    helperText?: string | JSX.Element;
+    /**
+     * Boolean flag to mark the `input` in error state
+     */
+    hasErrors?: boolean;
+    /**
+     * The value of the selected 'radio' managed by this group
+     */
+    value?: string;
+    /**
+     * Boolean flag to control whether to stack the label on top of the `input` element (false) or place them inline to one another (true)
+     */
+    inlineLabel?: boolean;
+    /**
+     * Boolean flag to control whether to arrange the `input` elements horizontally
+     */
+    inline?: boolean;
+    /**
+     * Boolean flag used to display an indicator of whether or not this `radio group` is mandatory
+     */
+    required?: boolean;
+    /**
+     * Boolean flag to disable the `radio group`
+     */
+    disabled?: boolean;
+    /**
+     * Boolean flag to disable the `radio group`
+     */
+    readOnly?: boolean;
+    /**
+     * Callback function to trigger whenever the value of the `radio group` is changed
+     */
+    onChange?: (event: SolaceRadioGroupChangeEvent) => void;
+    /**
+     * Callback function to trigger whenever the value of the `radio group` is changed
+     */
+    children: Array<React.ReactNode>;
+}
+declare function SolaceRadioGroup({ id, name, label, stackLabel, // use stack label for radio group
+large, bold, value, helperText, hasErrors, readOnly, required, disabled, inlineLabel, inline, onChange, children }: SolaceRadioGroupProps): JSX.Element;
+export default SolaceRadioGroup;

package/dist/components/form/SolaceSelect.d.ts

@@ -0,0 +1,99 @@
+import { PopoverOrigin } from "@mui/material";
+import { ReactNode } from "react";
+import SolaceComponentProps from "../SolaceComponentProps";
+export interface SolaceSelectChangeEvent {
+    name: string;
+    value: string;
+}
+export interface SolaceSelectProps extends SolaceComponentProps {
+    /**
+     * Unique identifier ... if `id` is not specified, `name` value will be used in order to make `label` and `helperText` accessible for screen readers
+     */
+    id?: string;
+    /**
+     * Name attribute to assign to the `input` element
+     */
+    name: string;
+    /**
+     * the label content to display on the screen
+     */
+    label?: string | JSX.Element;
+    /**
+     * The value of the `input` element, required for controlled component
+     */
+    value?: string;
+    /**
+     * Content to display as supportive/explanitory text
+     */
+    helperText?: string | JSX.Element;
+    /**
+     * The text to display as the tooltip hint
+     */
+    title?: string;
+    /**
+     * Boolean flag to mark the `input` in error state
+     */
+    hasErrors?: boolean;
+    /**
+     * Boolean flag used to display an indicator of whether or not this `input` is mandatory
+     */
+    required?: boolean;
+    /**
+     * Boolean flag to control whether to stack the label on top of the `input` element (false) or place them inline to one another (true)
+     */
+    inlineLabel?: boolean;
+    /**
+     * Boolean flag to disable the `input`
+     */
+    disabled?: boolean;
+    /**
+     * Boolean flag to set the `input` in a read-only state
+     */
+    readOnly?: boolean;
+    /**
+     * Callback function to trigger whenever the value of the `input` is changed
+     */
+    onChange?: (event: SolaceSelectChangeEvent) => void;
+    /**
+     * Callback function to return option display value based on selected option value
+     */
+    getOptionDisplayValue?: (value: unknown) => ReactNode;
+    /**
+     * An array of MenuItems to render as the select options
+     */
+    children: Array<JSX.Element>;
+    /**
+     * Custom Width of the component.
+     */
+    width?: string;
+    /**
+     * Custom maxHeight of the component.
+     */
+    maxHeight?: string;
+    /**
+     * Boolean flag to show the select option that has empty value
+     */
+    displayEmpty?: boolean;
+    /**
+     * Boolean flag to show the select options
+     */
+    open?: boolean;
+    /**
+     * Callback function to trigger whenever the dropdown opens
+     */
+    onOpen?: () => void;
+    /**
+     * Callback function to trigger whenever the dropdown closes
+     */
+    onClose?: () => void;
+    /**
+     * Custom anchorOrigin of the menu
+     */
+    menuAnchorOrigin?: PopoverOrigin;
+    /**
+     * Custom transformOrigin of the menu
+     */
+    menuTransformOrigin?: PopoverOrigin;
+}
+declare function SolaceSelect({ id, name, label, value, helperText, title, hasErrors, required, disabled, readOnly, inlineLabel, displayEmpty, onChange, getOptionDisplayValue, dataQa, dataTags, children, width, maxHeight, open, onOpen, onClose, menuAnchorOrigin, menuTransformOrigin }: SolaceSelectProps): JSX.Element;
+export default SolaceSelect;

package/dist/components/form/SolaceSelectAutocomplete.d.ts

@@ -0,0 +1,188 @@
+import React from "react";
+import SolaceComponentProps from "../SolaceComponentProps";
+export interface SolaceSelectAutoCompleteProps<T, V> extends SolaceComponentProps {
+    /**
+     * Unique identifier ... if `id` is not specified, `name` value will be used in order to make `label` and `helperText` accessible for screen readers
+     */
+    id?: string;
+    /**
+     * Controls the position of the ellipsis when text overflows
+     * @default 'end'
+     */
+    textEllipsisPosition?: "start" | "middle" | "end";
+    /**
+     * Name attribute to assign to the `input` element
+     */
+    name: string;
+    /**
+     * the label content to display on the screen
+     */
+    label?: string | JSX.Element;
+    /**
+     * The value of the autocomplete
+     */
+    value?: V | V[];
+    /**
+     * Content to display as supportive/explanatory text
+     */
+    helperText?: string | JSX.Element;
+    /**
+     * The text to display as the tooltip hint
+     */
+    title?: string;
+    /**
+     * The text to display as the input placeholder
+     */
+    placeholder?: string;
+    /**
+     * Boolean flag to mark the `input` in error state
+     */
+    hasErrors?: boolean;
+    /**
+     * Boolean flag used to display an indicator of whether or not this `input` is mandatory
+     */
+    required?: boolean;
+    /**
+     * Boolean flag to control whether to stack the label on top of the `input` element (false) or place them inline to one another (true)
+     */
+    inlineLabel?: boolean;
+    /**
+     * Boolean flag to disable the `input`
+     */
+    disabled?: boolean;
+    /**
+     * Boolean flag to set the `input` in a read-only state
+     */
+    readOnly?: boolean;
+    /**
+     * allow multiple selection
+     */
+    multiple?: boolean;
+    /**
+     * Callback function to trigger whenever the value of the `input` is changed
+     */
+    onChange?: (event: {
+        name: string;
+        value: V | V[] | null;
+    }) => void;
+    /**
+     * The component type to use for rendering all option instances
+     */
+    itemComponent: (item: T) => React.ReactNode;
+    /**
+     * The mapping callback which will map/translate the original option object to the formatted type required by the itemComponent
+     */
+    itemMappingCallback: (item: V) => T;
+    /**
+     * The callback function which generates the display label for the selected option
+     */
+    optionsLabelCallback: (item: T) => string;
+    /**
+     * An array of SolaceSelectAutocompleteItems to render as the select options
+     */
+    options: Array<V>;
+    /**
+     * Custom renderer for selected values when we have multi-selection
+     */
+    renderTags?: (value: V[]) => React.ReactNode;
+    /**
+     * The maximum number of tags that will be visible when not focused. Set -1 to disable the limit.
+     */
+    limitTags?: number;
+    /**
+     * The label to display when the tags are truncated by limitTags.
+     */
+    getLimitTagsText?: (more: number) => string;
+    /**
+     * Fetch updated list of options
+     */
+    fetchOptionsCallback: (searchTerm: string) => void;
+    /**
+     * The callback to notify container that the select closed (can use this to clear fetched options)
+     */
+    onCloseCallback?: () => void;
+    /**
+     * Used to determine if the option represents the given value.
+     */
+    isOptionEqualToValueCallback?: (option: V, value: V) => boolean;
+    /**
+     * Used to determine the disabled state for a given option.
+     */
+    getOptionDisabledCallback?: (option: V) => boolean;
+    /**
+     * Whether there should be a divider after the option
+     */
+    getShowOptionDividerCallback?: (option: V) => boolean;
+    /**
+     * Used to determin the key for a given option
+     */
+    getOptionKeyCallback?: (option: V) => string;
+    /**
+     * The callback function which generates group heading
+     */
+    groupByCallback?: (option: V) => string;
+    /**
+     * Whether to clear search input when the option is selected
+     */
+    shouldClearSearchOnSelectCallback?: (option: V) => boolean;
+    /**
+     * Used to determine if an option has validation error, applicable to multiple select
+     */
+    getOptionValidationErrorCallback?: (option: V) => string | JSX.Element;
+    /**
+     * Used to validate search input, applicable to multiple select
+     */
+    validateInputCallback?: (searchTerm: string) => string | JSX.Element;
+    /**
+     * Whether to show divider between group headings
+     */
+    showGroupDivider?: boolean;
+    /**
+     * Custom Width of the component.
+     */
+    width?: string;
+    /**
+     * for adding a reference to the TextField component
+     */
+    inputRef?: (input: HTMLInputElement) => void;
+    /**
+     * Boolean flag to open the dropdown on focus
+     */
+    openOnFocus?: boolean;
+    /**
+     * Boolean flag to disable close on select. It is enabled by default for multiple select
+     */
+    disableCloseOnSelect?: boolean;
+    /**
+     * Boolean flag to clear search input on select. It is only applicable to multiple select and is false by default
+     */
+    clearSearchOnSelect?: boolean;
+    /**
+     * Custom max-height of the expanded dropdown,
+     * MaxHeight supports standard css units (px,rems, etc.)
+     */
+    maxHeight?: string;
+    /**
+     * Boolean flag to make the component full width
+     */
+    fullWidth?: boolean;
+    /**
+     * Custom min-width of the component
+     */
+    minWidth?: string;
+    /**
+     * Maximum width of selected value tag rendered by default renderer, applicable to multiple select
+     */
+    tagMaxWidth?: string;
+    /**
+     * Will display supplementalText or secondaryAction icon (used with SolaceSelectAutocompleteItem) inside input box if present in the selected option, not applicable to multiple select.
+     */
+    showSupplementalTextOrSecondaryAction?: boolean;
+    /**
+     * Will display left icon (used with SolaceSelectAutocompleteItem) inside input box if present in the selected option, not applicable to multiple select.
+     */
+    showLeftIcon?: boolean;
+}
+declare function SolaceSelectAutocomplete<T, V>({ id, name, label, value, helperText, title, placeholder, hasErrors, required, inlineLabel, disabled, readOnly, multiple, onChange, itemComponent, itemMappingCallback, optionsLabelCallback, getShowOptionDividerCallback, shouldClearSearchOnSelectCallback, groupByCallback, showGroupDivider, dataQa, dataTags, options, renderTags, limitTags, getLimitTagsText, fetchOptionsCallback, onCloseCallback, isOptionEqualToValueCallback, getOptionDisabledCallback, getOptionKeyCallback, getOptionValidationErrorCallback, validateInputCallback, width, inputRef, openOnFocus, disableCloseOnSelect, clearSearchOnSelect, maxHeight, // default value set by MUI so that dropdown calculation can work if value is omited
+fullWidth, minWidth, tagMaxWidth, showSupplementalTextOrSecondaryAction, showLeftIcon, textEllipsisPosition }: SolaceSelectAutoCompleteProps<T, V>): JSX.Element;
+export default SolaceSelectAutocomplete;

package/dist/components/form/SolaceSelectAutocompleteItem.d.ts

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+export interface SolaceSelectAutocompleteItemProps {
+    /**
+     * Name attribute to show as menu item label.
+     */
+    name: string;
+    /**
+     * The value of the current autocomplete item, must have reference equality with the option value in order to be selected.
+     */
+    value: string;
+    /**
+     * Content to display as supportive/explanitory text
+     */
+    subText?: string;
+    /**
+     * Content to display as supportive/explanitory text
+     */
+    supplementalText?: string;
+    /**
+     * Adds a divider to the bottom of menuItem
+     */
+    divider?: boolean;
+    /**
+     * Optional attribute to group Menu items and show categoryHeading
+     */
+    categoryHeading?: string;
+    /**
+     * Optional attribute allowing the multiline className to be added to the menu item
+     */
+    isNew?: boolean;
+    /**
+     * Adds an Icon to left handside of the menu item name for Supporting visuals and helping differentiate between menu options
+     */
+    icon?: JSX.Element | HTMLElement;
+    /**
+     * Adds a secondary action (ex. more info icon button) to the right end of menu item
+     */
+    secondaryAction?: JSX.Element | HTMLElement;
+}
+export declare const getOptionLabel: (option: SolaceSelectAutocompleteItemProps) => string;
+export declare const getShowOptionDivider: (option: SolaceSelectAutocompleteItemProps) => boolean;
+export declare const isOptionEqual: (option: SolaceSelectAutocompleteItemProps, value: SolaceSelectAutocompleteItemProps) => boolean;
+export declare const getGroupBy: (option: SolaceSelectAutocompleteItemProps) => string;
+declare function SolaceSelectAutocompleteItem({ name, subText, supplementalText, isNew, icon, secondaryAction }: SolaceSelectAutocompleteItemProps): JSX.Element;
+export default SolaceSelectAutocompleteItem;

package/dist/components/form/SolaceSelectAutocompleteResponsiveTags.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+export interface SolaceSelectAutocompleteResponsiveTagsProps {
+    containerWidth: number | undefined;
+    tags: {
+        id: string;
+        label: string;
+    }[];
+    tagMaxWidth?: string;
+    numOfRowsToShow?: number;
+    overflowIndicatorLabel?: string;
+    overflowIndicatorLabelSingular?: string;
+    overflowIndicatorLabelWidth?: number;
+    onDelete?: (id: string) => void;
+    dataQa?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+}
+declare function SolaceSelectAutocompleteResponsiveTags({ containerWidth, tags, tagMaxWidth, numOfRowsToShow, overflowIndicatorLabel, overflowIndicatorLabelSingular, overflowIndicatorLabelWidth, onDelete, dataQa, disabled, readOnly }: SolaceSelectAutocompleteResponsiveTagsProps): JSX.Element | null;
+declare const _default: React.MemoExoticComponent<typeof SolaceSelectAutocompleteResponsiveTags>;
+export default _default;

package/dist/components/form/SolaceStackLabel.d.ts

@@ -0,0 +1,41 @@
+/// <reference types="react" />
+export interface SolaceStackLabelProps {
+    /**
+     * Unique identifier of the label
+     */
+    id: string;
+    /**
+     * identifier used for specifying which form element this label is bound to
+     */
+    htmlForId?: string;
+    /**
+     * Boolean flag used to display an indicator of whether or not this `input` is mandatory
+     */
+    required?: boolean;
+    /**
+     * Boolean flag to disable the `input`
+     */
+    disabled?: boolean;
+    /**
+     * Boolean flag for readOnly labels, changes font color to 55% black
+     */
+    readOnly?: boolean;
+    /**
+     * Boolean flag to allow font size of 16px (default to 14px)
+     */
+    large?: boolean;
+    /**
+     * Boolean flag to allow font weight of medium (default to regular)
+     */
+    bold?: boolean;
+    /**
+     * Boolean flag to suppress line breaks (text wrapping) within the label
+     */
+    noWrap?: boolean;
+    /**
+     *
+     */
+    children?: React.ReactNode;
+}
+declare function SolaceStackLabel({ id, htmlForId, required, disabled, large, bold, readOnly, noWrap, children }: SolaceStackLabelProps): JSX.Element;
+export default SolaceStackLabel;

package/dist/components/form/SolaceStepper/SolaceStepIcon.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export declare type SolaceStepIconProps = {
+    active?: boolean;
+    completed?: boolean;
+    icon: React.ReactNode;
+    error?: boolean;
+};
+/**
+ * Renders a SolaceStepIcon component in a stepper.
+ *
+ * @param {SolaceStepIconProps} props - The props for the SolaceStepIcon component.
+ * @returns {JSX.Element} The rendered SolaceStepIcon component.
+ */
+export default function SolaceStepIcon(props: SolaceStepIconProps): JSX.Element;