@kvaser/canking-api 7.1.0-beta.231

package/dist/controls/CanKingDataProvider.d.ts

@@ -0,0 +1,116 @@
+/**
+ * This module includes CanKing data provider React components.
+ * The CanKingDataProvider component is needed to be at the root of the component tree to
+ * make it possible to use the CanKing UI Controls.
+ *
+ * @example
+ * ```tsx
+ * const container = document.getElementById('root') as HTMLElement;
+ * const root = createRoot(container);
+ * root.render(
+ *   <React.StrictMode>
+ *     <CanKingDataProvider>
+ *       <App />
+ *     </CanKingDataProvider>
+ *   </React.StrictMode>,
+ * );
+ * ```
+ *
+ * @packageDocumentation
+ */
+import React from 'react';
+import { Device, NodeStatus, LogMessage, MeasurementSetup, OnlineStatus, IUserSettings, IWorkspacePaneData } from '../models';
+/**
+ * Possible CanKing event channels for an extension to listen to.
+ */
+type extensionEventChannels = 'devices-changed' | 'new-log-messages' | 'online-status-changed' | 'periodic-trans-started' | 'periodic-trans-stopped' | 'new-measurement-data' | 'new-measurement-status' | 'user-settings-changed' | 'meas-setup-changed' | 'workspace-panes-changed';
+/**
+ * Starts a subscription to an event raised by CanKing.
+ *
+ * @typeParam T - Type of the data that will be sent by the event.
+ * @param key - A unique key for this subscription, this key should be used when calling removeEventListener to unsubcribe
+ *              from the event. The uuid package can be used for generating unique keys.
+ * @param event - The event channel to subscibe to.
+ * @param callback - A callback that will be called when new data arrives on the channel.
+ * @param options - Optional options including following options:
+ *                  numberOfHistoryFrames - used when adding a 'new-measurement-data' event listener to control number of frames to read from history at initialization.
+ * @returns A promise that will resolve with start values for the event.
+ * @internal
+ */
+export declare function addEventListener<T>(key: string, event: extensionEventChannels, callback: (data: T) => void, options?: {
+    numberOfHistoryFrames?: number;
+}): Promise<T>;
+/**
+ * Unsubscribes from an event.
+ *
+ * @param key - The key that was used when addEventListener was called.
+ * @param event - The event channel to unsubscribe from.
+ * @internal
+ */
+export declare const removeEventListener: (key: string, event: extensionEventChannels) => Promise<void>;
+/**
+ * The UserSettings context
+ * @internal
+ */
+export declare const UserSettingsContext: React.Context<IUserSettings>;
+/**
+ * The Devices context
+ * @internal
+ */
+export declare const DevicesContext: React.Context<Device[]>;
+/**
+ * The MeasurementStatus context
+ * @internal
+ */
+export declare const MeasurementStatusContext: React.Context<NodeStatus[]>;
+/**
+ * The MeasurementSetup context
+ * @internal
+ */
+export declare const MeasurementSetupContext: React.Context<MeasurementSetup>;
+/**
+ * The OnlineStatus context
+ * @internal
+ */
+export declare const OnlineStatusContext: React.Context<OnlineStatus>;
+/**
+ * The RunningPeriodicTransmissions context
+ * @internal
+ */
+export declare const RunningPeriodicTransmissionsContext: React.Context<string[]>;
+/**
+ * The LogMessages context
+ * @internal
+ */
+export declare const LogMessagesContext: React.Context<LogMessage[]>;
+/**
+ * The WorkspacePanes context
+ * @internal
+ */
+export declare const WorkspacePanesContext: React.Context<[IWorkspacePaneData[], React.Dispatch<React.SetStateAction<IWorkspacePaneData[]>>]>;
+/**
+ * Creates a data provider to access CanKing data.
+ * The CanKingDataProvider component is needed to be at the root of the component tree to
+ * make it possible to use the CanKing UI Controls.
+ *
+ * @example
+ * ```tsx
+ * const container = document.getElementById('root') as HTMLElement;
+ * const root = createRoot(container);
+ * root.render(
+ *   <React.StrictMode>
+ *     <CanKingDataProvider>
+ *       <App />
+ *     </CanKingDataProvider>
+ *   </React.StrictMode>,
+ * );
+ * ```
+ *
+ * @param props Component properties.
+ * @returns The CanKingDataProvider React component.
+ */
+declare const CanKingDataProvider: ({ initialUserSettings, children, }: {
+    initialUserSettings?: IUserSettings;
+    children?: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export default CanKingDataProvider;

package/dist/controls/CheckboxControl.d.ts

@@ -0,0 +1,30 @@
+import { SxProps, Theme } from '@mui/material';
+/**
+ * Properties of the CheckboxControl React component.
+ */
+export interface CheckboxControlProps {
+    /** The component id. */
+    id?: string;
+    /** A text label to be displayed. */
+    label: string;
+    /** The current check state. */
+    checked: boolean;
+    /**
+     * Callback that is called when the checked state has changed.
+     * @param checked The new checked state.
+     */
+    onChange: (checked: boolean) => void;
+    /** Set to true to disable this control. */
+    disabled?: boolean;
+    /** The optional size, defaults to 'small'. */
+    size?: 'small' | 'medium';
+    /** Optional sx props. */
+    sx?: SxProps<Theme>;
+}
+/**
+ * Creates a checkbox UI control.
+ * @param props Component properties.
+ * @returns The CheckboxControl React component.
+ */
+declare function CheckboxControl({ id, label, checked, onChange, disabled, size, sx, }: CheckboxControlProps): import("react/jsx-runtime").JSX.Element;
+export default CheckboxControl;

package/dist/controls/ContextMenu.d.ts

@@ -0,0 +1,44 @@
+/**
+ * This module includes a context menu UI control.
+ *
+ * To be able to use these controls the CanKingDataProvider component must be present in the
+ * component tree above your component. Normally the CanKingDataProvider is added
+ * at the root of the component tree.
+ *
+ * @packageDocumentation
+ */
+import React from 'react';
+/**
+ * Menu option that describes one menu item.
+ */
+export type ContextMenuOption = {
+    /** A unique value that identifies this menu item. */
+    value: number;
+    /** The text to be displayed in the context menu. */
+    displayText: string;
+    /** An optional icon to be displayed together with the displayText. */
+    icon?: React.ReactNode;
+    /** An optional shortcut string to be displayed together with the displayText. */
+    shortcut?: string;
+};
+/**
+ * Properties of the ContextMenu React component.
+ */
+export interface ContextMenuProps {
+    /** The menu item options. */
+    options: ContextMenuOption[];
+    /**
+     * A callback that will be called when the user selects one of the menu items in this context menu.
+     * @param value Value of the selected menu option.
+     */
+    onSelect: (value: number) => void;
+    /** Children nodes that will be using this context menu. */
+    children?: React.ReactNode;
+}
+/**
+ * Creates a context menu UI control.
+ * @param props Component properties.
+ * @returns The ContextMenu React component.
+ */
+declare function ContextMenu({ options, onSelect, children }: ContextMenuProps): import("react/jsx-runtime").JSX.Element;
+export default ContextMenu;

package/dist/controls/DropdownButton.d.ts

@@ -0,0 +1,73 @@
+/**
+ * This module includes a drop down button UI control, a button with a drop down menu.
+ *
+ * To be able to use these controls the CanKingDataProvider component must be present in the
+ * component tree above your component. Normally the CanKingDataProvider is added
+ * at the root of the component tree.
+ *
+ * @packageDocumentation
+ */
+import React from 'react';
+/**
+ * Base properties of any child component of the DropdownButton component.
+ */
+export interface DropdownButtonChildrenProps {
+    /**
+     * Callback that is called when the drop down menu is closed.
+     */
+    onClose?: () => void;
+}
+/**
+ * Properties of the DropdownButtonTextItems React component.
+ */
+export interface DropdownButtonTextItemsProps extends DropdownButtonChildrenProps {
+    /**
+     * The items that will be displayed in the drop down control.
+     * Each item has a unique key and a display text.
+     */
+    items: {
+        key: string;
+        text: string;
+    }[];
+    /**
+     * Callback that is called when the user selects one of the drop down items.
+     * @param itemKey The key of the selected item.
+     */
+    onSelect: (itemKey: string) => void;
+}
+/**
+ * Creates a drop down control that displays a menu with text strings.
+ * @param props Component properties.
+ * @returns The DropdownButtonTextItems React component.
+ */
+export declare function DropdownButtonTextItems({ items, onSelect, onClose }: DropdownButtonTextItemsProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Properties of the DropdownButton React component.
+ */
+export interface DropdownButtonProps {
+    /** The component id. */
+    id?: string;
+    /** A start icon displayed inside the button. */
+    startIcon?: React.ReactNode;
+    /** An end icon displayed inside the button. */
+    endIcon?: React.ReactNode;
+    /** The text to be displayed inside the button. */
+    text?: string;
+    /** Button variant. */
+    variant?: 'text' | 'outlined' | 'contained';
+    /** Button color. */
+    color?: 'inherit' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
+    /** Button size. */
+    size?: 'small' | 'medium' | 'large';
+    /** Set to true to disable this button. */
+    disabled?: boolean;
+    /** The drop down items that will be displayed when the user clicks on this button. */
+    children: React.ReactElement<DropdownButtonChildrenProps>;
+}
+/**
+ * Creates a drop down button control.
+ * @param props Component properties.
+ * @returns The DropdownButton React component.
+ */
+declare function DropdownButton({ id, startIcon, endIcon, text, variant, color, size, disabled, children, }: DropdownButtonProps): import("react/jsx-runtime").JSX.Element;
+export default DropdownButton;

package/dist/controls/DropdownPanel.d.ts

@@ -0,0 +1,41 @@
+/**
+ * This module includes a drop down panel UI control, a panel that will be displayed when
+ * the mouse is hovering over a specific area.
+ *
+ * To be able to use these controls the CanKingDataProvider component must be present in the
+ * component tree above your component. Normally the CanKingDataProvider is added
+ * at the root of the component tree.
+ *
+ * @packageDocumentation
+ */
+import React from 'react';
+/**
+ * Properties of the DropdownPanel React component.
+ */
+export interface DropdownPanelProps {
+    /** The component id. */
+    id?: string;
+    /** The position of the panel in relation to the parent. */
+    position: 'left' | 'top' | 'right' | 'bottom';
+    /** The parent's width in pixels. */
+    parentWidth: number;
+    /** The parent's height in pixels. */
+    parentHeight: number;
+    /** The maximum length of the panel, either height or width depending on position. */
+    maxLength: number;
+    /** The size of the panel, either height or width depending on position. */
+    dropDownSize: number;
+    /** Force the panel to be visible even if not hovered. */
+    forceShow?: boolean;
+    /** The time in milliseconds until the panel will auto-hide */
+    autoHideTimeout?: number;
+    /** The children that will be displayed in the panel. */
+    children?: React.ReactNode;
+}
+/**
+ * Creates a drop down panel control.
+ * @param props Component properties.
+ * @returns The DropdownPanel React component.
+ */
+declare function DropdownPanel({ id, position, parentWidth, parentHeight, maxLength, dropDownSize, autoHideTimeout, forceShow, children, }: DropdownPanelProps): import("react/jsx-runtime").JSX.Element;
+export default DropdownPanel;

package/dist/controls/FillBox.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A Box UI control that will fill up it's parent's view completely.
+ * A padding of 4px will be used.
+ */
+declare const FillBox: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: import("react").Ref<HTMLDivElement>;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export default FillBox;

package/dist/controls/FormControlRow.d.ts

@@ -0,0 +1,30 @@
+/**
+ * This module includes a form row UI control, a container component that can be used to
+ * display form controls on one row.
+ *
+ * To be able to use these controls the CanKingDataProvider component must be present in the
+ * component tree above your component. Normally the CanKingDataProvider is added
+ * at the root of the component tree.
+ *
+ * @packageDocumentation
+ */
+import React from 'react';
+import { ResponsiveStyleValue } from '@mui/system';
+/**
+ * Properties of the FormControlRow React component.
+ */
+export interface FormControlRowProps {
+    /** Expand this control to use the full width. */
+    fullWidth?: boolean;
+    /** The spacing between the child controls. */
+    spacing?: ResponsiveStyleValue<number | string>;
+    /** Alignment of the child controls. */
+    alignItems?: 'center' | 'end' | 'flex-end' | 'flex-start' | 'self-end' | 'self-start' | 'start' | 'baseline' | 'normal' | 'stretch' | undefined;
+}
+/**
+ * Creates a form control row.
+ * @param props Component properties.
+ * @returns The FormControlRow React component.
+ */
+declare function FormControlRow({ children, fullWidth, spacing, alignItems, }: React.PropsWithChildren<FormControlRowProps>): import("react/jsx-runtime").JSX.Element;
+export default FormControlRow;

package/dist/controls/InlineEditor.d.ts

@@ -0,0 +1,26 @@
+import { Variant } from '@mui/material/styles/createTypography';
+/**
+ * Properties of the InlineEditor React component.
+ */
+export interface InlineEditorProps {
+    /** Flag indicating if in edit mode or not. */
+    editMode: boolean;
+    /** The current value. */
+    value: string;
+    /**
+     * Callback that will be called when the value has been changed.
+     * @param value The new value.
+     */
+    onValueChange: (value: string) => void;
+    /** An aria label. */
+    ariaLabel?: string;
+    /** The variant of the text control. */
+    variant?: Variant;
+}
+/**
+ * Creates an inline editor.
+ * @param props Component properties.
+ * @returns The InlineEditor React component.
+ */
+declare function InlineEditor({ editMode, value, onValueChange, ariaLabel, variant }: InlineEditorProps): import("react/jsx-runtime").JSX.Element;
+export default InlineEditor;

package/dist/controls/LocalizedStrings.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Localized strings interface
+ */
+export interface ILocalizedStrings {
+    getString(key: string, ...args: Array<number | string>): string;
+}
+/**
+ * A string map type.
+ */
+export type StringsMap = {
+    [key: string]: string;
+};
+/**
+ * Default ILocalizedStrings implementation.
+ */
+export declare class LocalizedStrings implements ILocalizedStrings {
+    private language;
+    private strings;
+    constructor(language: string, strings: StringsMap);
+    getString(key: string, ...args: Array<number | string>): string;
+}

package/dist/controls/NumberRangeControl.d.ts

@@ -0,0 +1,80 @@
+/**
+ * Properties of the NumberRangeControl React component.
+ */
+export interface NumberRangeControlProps {
+    /** The min value. */
+    minValue: string;
+    /** The max value. */
+    maxValue: string;
+    /**
+     * Callback that is called on a change event.
+     * @param newMinValue The new min value.
+     * @param newMaxValue The new max value.
+     */
+    onChange?: (newMinValue: string, newMaxValue: string) => void;
+    /**
+     * Callback that is called on a blur event.
+     * @param newMinValue The new min value.
+     * @param newMaxValue The new max value.
+     */
+    onBlur?: (newMinValue: string, newMaxValue: string) => void;
+    /** The current min error state. */
+    minError?: boolean;
+    /**
+     * Callback that is called when the min errors state has changed.
+     * @param errors The new min errors state.
+     */
+    onMinErrorChange?: (errors: boolean) => void;
+    /** The current max error state. */
+    maxError?: boolean;
+    /**
+     * Callback that is called when the max errors state has changed.
+     * @param errors The new max errors state.
+     */
+    onMaxErrorChange?: (errors: boolean) => void;
+    /**
+     * Callback that will be called when the value has been changed or the control has lost focus.
+     * This callback is called before onChange and if the returned err value is true then onChange
+     * won't be called.
+     * The implemtation of this callback is allowed to modify the specified value and return
+     * the modified value in the val property of the returned object.
+     * @param value The new text value.
+     * @param trigger The trigger of this callback, either on 'change' or on 'blur'.
+     * @returns An object with the validated text value (val) and an error state (err).
+     */
+    onMinValidate?: (value: string, trigger: 'change' | 'blur') => {
+        val: string;
+        err: boolean;
+    };
+    /**
+     * Callback that will be called when the value has been changed or the control has lost focus.
+     * This callback is called before onChange and if the returned err value is true then onChange
+     * won't be called.
+     * The implemtation of this callback is allowed to modify the specified value and return
+     * the modified value in the val property of the returned object.
+     * @param value The new text value.
+     * @param trigger The trigger of this callback, either on 'change' or on 'blur'.
+     * @returns An object with the validated text value (val) and an error state (err).
+     */
+    onMaxValidate?: (value: string, trigger: 'change' | 'blur') => {
+        val: string;
+        err: boolean;
+    };
+    /** Set to true to disable the min value field. */
+    minDisabled?: boolean;
+    /** Set to true to disable the max value field. */
+    maxDisabled?: boolean;
+    /** A unit text that will be displayed next to the values. */
+    unit?: string;
+    /** Lower value limit. */
+    lowerLimit?: number;
+    /** Upper value limit. */
+    upperLimit?: number;
+}
+/**
+ * Creates a number range control.
+ * @param props Component properties.
+ * @returns The NumberRangeControl React component.
+ */
+declare function NumberRangeControl({ minValue, maxValue, onChange, onBlur, minError, onMinErrorChange, maxError, onMaxErrorChange, onMinValidate, onMaxValidate, minDisabled, maxDisabled, unit, lowerLimit, upperLimit, }: NumberRangeControlProps): import("react/jsx-runtime").JSX.Element;
+export default NumberRangeControl;

package/dist/controls/OneLineButton.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Creates a one line button.
+ */
+declare const OneLineButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: import("react").Ref<HTMLButtonElement>;
+}, "variant" | "color" | "style" | "action" | "className" | "children" | "tabIndex" | "disabled" | "size" | "href" | "sx" | "classes" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "fullWidth" | "disableElevation" | "endIcon" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    component?: React.ElementType;
+}, {}, {}>;
+export default OneLineButton;

package/dist/controls/RadioControl.d.ts

@@ -0,0 +1,25 @@
+import { SxProps, Theme } from '@mui/material';
+/**
+ * Properties of the RadioControl React component.
+ */
+export interface RadioControlProps {
+    /** The component id. */
+    id?: string;
+    /** The label to be displayed next to the radio button. */
+    label: string;
+    /** The value that this radio button represents. */
+    value: string;
+    /** Set to true to disable this control. */
+    disabled?: boolean;
+    /** The component size. */
+    size?: 'small' | 'medium';
+    /** Optional sx properties. */
+    sx?: SxProps<Theme>;
+}
+/**
+ * Creates a radio button control.
+ * @param props Component properties.
+ * @returns The RadioControl React component.
+ */
+declare function RadioControl({ id, label, value, disabled, size, sx, }: RadioControlProps): import("react/jsx-runtime").JSX.Element;
+export default RadioControl;

package/dist/controls/RadioGroupControl.d.ts

@@ -0,0 +1,31 @@
+/**
+ * This module includes a radio button group UI control.
+ *
+ * To be able to use these controls the CanKingDataProvider component must be present in the
+ * component tree above your component. Normally the CanKingDataProvider is added
+ * at the root of the component tree.
+ *
+ * @packageDocumentation
+ */
+import React from 'react';
+/**
+ * Properties of the RadioGroupControl React component.
+ */
+export interface RadioGroupControlProps {
+    /** The component id. */
+    id?: string;
+    /** Value of the currently selected radio button in this group. */
+    value: string;
+    /**
+     * Callback that is called when a new radio button has been selected.
+     * @param value The new value.
+     */
+    onChange: (value: string) => void;
+}
+/**
+ * Creates a radio button group control.
+ * @param props Component properties.
+ * @returns The RadioGroupControl React component.
+ */
+declare function RadioGroupControl({ children, id, value, onChange, }: React.PropsWithChildren<RadioGroupControlProps>): import("react/jsx-runtime").JSX.Element;
+export default RadioGroupControl;

package/dist/controls/SectionControl.d.ts

@@ -0,0 +1,40 @@
+/**
+ * This module includes a section UI control, to be used for organizing UI controls into
+ * collapsible sections.
+ *
+ * To be able to use these controls the CanKingDataProvider component must be present in the
+ * component tree above your component. Normally the CanKingDataProvider is added
+ * at the root of the component tree.
+ *
+ * @packageDocumentation
+ */
+import React from 'react';
+/**
+ * Properties of the SectionControl React component.
+ */
+export interface SectionControlProps {
+    /** Text alignment to used in the divider. */
+    textAlign?: 'center' | 'right' | 'left';
+    /** Text to be displayed in the divider. */
+    text?: string;
+    /** A summary that will be added to text when the section is collapsed. */
+    summary?: string;
+    /** Children that will be included in this section. */
+    children?: React.ReactNode;
+    /** Sets to true if this section should be collapsible. */
+    collapsible?: boolean;
+    /** The current collapsed state. */
+    collapsed?: boolean;
+    /**
+     * Callback that will be called when this section has been collpsed or expanded.
+     * @param value The new collapsed state.
+     */
+    collapsedChange?: (value: boolean) => void;
+}
+/**
+ * Creates a section control.
+ * @param props Component properties.
+ * @returns The SectionControl React component.
+ */
+declare function SectionControl({ textAlign, text, summary, children, collapsible, collapsed, collapsedChange, }: SectionControlProps): import("react/jsx-runtime").JSX.Element;
+export default SectionControl;

package/dist/controls/SelectControl.d.ts

@@ -0,0 +1,55 @@
+/**
+ * A select option.
+ */
+export type SelectOption = {
+    /** The unique value. */
+    value: number;
+    /** The display text. */
+    displayText: string;
+};
+/**
+ * Properties of the SelectControl React component.
+ */
+export interface SelectControlProps {
+    /** The component id. */
+    id: string;
+    /** A label text that will be displayed in front of the select control. */
+    label: string;
+    /** Set to true to display the label. */
+    showLabel?: boolean;
+    /** A helper text that will be displayed underneath the select control. */
+    helperText?: string;
+    /** The options to be available inside the select control. */
+    options: SelectOption[] | Map<string, SelectOption[]>;
+    /** Value of the selected option or '' if no option has been selected. */
+    value: number | '';
+    /**
+     * Callback that will be called when a new option has been selected.
+     * @param value The new selected value.
+     */
+    onChange: (value: number | '') => void;
+    /** Set to true to disable this control. */
+    disabled?: boolean;
+    /** Set to true if the value of this control is required. */
+    required?: boolean;
+    /** Margins between controls inside this control. */
+    margin?: 'dense' | 'normal' | 'none';
+    /** The component size. */
+    size?: 'small' | 'medium';
+    /** Set to true to expand this control to use the full width of its parent. */
+    fullWidth?: boolean;
+    /** The min width of this control. */
+    minWidth?: number | string;
+    /**
+     * Set to true to display each option as '<value> - <displayText>', otherwise each option will
+     * be displayed with its displayText only.
+     */
+    prefixTextWithValue?: boolean;
+}
+/**
+ * Creates a select control.
+ * @param props Component properties.
+ * @returns The SelectControl React component.
+ */
+declare function SelectControl({ id, label, showLabel, helperText, options, value, onChange, disabled, required, margin, size, fullWidth, minWidth, prefixTextWithValue, }: SelectControlProps): import("react/jsx-runtime").JSX.Element;
+export default SelectControl;

package/dist/controls/SizedBox.d.ts

@@ -0,0 +1,11 @@
+/**
+ * A Box UI control that will be sized to the specified height and width.
+ * A padding of 4px will be used.
+ */
+declare const SizedBox: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: import("react").Ref<HTMLDivElement>;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    height?: number;
+    width?: number;
+}, {}, {}>;
+export default SizedBox;