@ringcentral/spring-ui 1.7.0

package/src/Select/Select.type.d.ts

@@ -0,0 +1,118 @@
+import { HTMLDataAttribute, StandardProps, UnionOmit } from '@ringcentral/spring-base';
+import { ComponentProps, InputHTMLAttributes, ReactElement, ReactNode } from 'react';
+import type { FormFieldProps, FormFieldVariant } from '../FormField';
+import type { MenuProps } from '../Menu';
+import type { VirtualizedMenuProps } from '../VirtualizedMenu';
+import type { SelectMode } from '../MenuItem';
+import type { SelectClassesKey } from './Select.classes';
+export declare type SelectVariant = UnionOmit<FormFieldVariant, 'quiet'>;
+export declare type SelectProps<T = unknown> = StandardProps<{
+    /**
+     * The variant of the Select.
+     *
+     * @default 'standard'
+     */
+    variant?: SelectVariant;
+    /**
+     * The selection mode of the Select.
+     * @default 'single'
+     */
+    selectMode?: SelectMode;
+    /**
+     * The default selected value(s). Use when the component is uncontrolled.
+     * - When `selectMode` is `'single'`, this should be a single value or `null`.
+     * - When `selectMode` is `'multiple'`, this should be an array (default: `[]`).
+     */
+    defaultValue?: T;
+    /**
+     * The selected value.
+     */
+    value?: T;
+    /**
+     * Callback fired when an option is selected.
+     */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>, child: React.ReactNode) => void;
+    /**
+     * Text to show when there is no selected value.
+     */
+    placeholder?: ReactNode;
+    /**
+     * Renders the selected value. If displayEmpty is enabled, the value
+     * argument will be null.
+     *
+     * @param value The `value` provided to the component.
+     * @returns {ReactNode}
+     * @default (value) => (Array.isArray(value) ? value.join(', ') : String(value))
+     */
+    renderValue?: (value: T) => ReactNode;
+    /**
+     * Displays a value instead of a placeholder, even if no value is selected.
+     * Make sure to return a meaningful value in the `renderValue` prop.
+     */
+    displayEmpty?: boolean;
+    /**
+     * Controls whether the Select is open. If unset, the Select will be closed
+     * by default until the user interacts to open it. By setting this property,
+     * the Select will be in controlled mode, meaning you are responsible for
+     * setting the open state using the `onOpen` and `onClose` callbacks.
+     */
+    open?: boolean;
+    /**
+     * Controls whether the Select is open by default. If unset or `false`, the
+     * Select will be closed by default until the user interacts to open it.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * When enabled, the menu items will be rendered in a virtualized list.
+     * Set this prop to `true` when you have a large number of options to render.
+     */
+    virtualize?: boolean;
+    /**
+     * The data to render when the `virtualize` prop is `true`.
+     */
+    data?: T extends unknown[] ? T : T[];
+    /**
+     * A handler that should return the index of the selected item in the `data` array.
+     * This prop is not used when the `virtualize` prop is `false`.
+     * @default (value) => data.findIndex((v) => v === value)
+     */
+    getSelectedIndex?: (value: T) => number;
+    /**
+     * Callback fired when the Select is opened. When in controlled mode and using
+     * the `open` prop this will be called when the user requests to open the Select,
+     * when in uncontrolled mode this will be called when the Select is opened.
+     */
+    onOpen?: () => void;
+    /**
+     * Callback fired when the Select is closed. When in controlled mode and using
+     * the `open` prop this will be called when the user requests to close the Select,
+     * when in uncontrolled mode this will be called when the Select is closed.
+     */
+    onClose?: () => void;
+    /**
+     *
+     * Props applied to selector.
+     */
+    selectorProps?: ComponentProps<'div'>;
+    /**
+     * Props applied to the underlying Menu component.
+     * If `virtualize` is `true`, use the `VirtualizedMenuProps` prop instead.
+     */
+    MenuProps?: Omit<MenuProps, 'open' | 'anchorEl' | 'onClose' | 'children'> & HTMLDataAttribute;
+    /**
+     * Props applied to the underlying VirtualizedMenu component.
+     * If `virtualize` is `false`, use the `MenuProps` prop instead.
+     */
+    VirtualizedMenuProps?: Omit<VirtualizedMenuProps, 'open' | 'onClose' | 'children'> & HTMLDataAttribute;
+    /**
+     * Props applied to the underlying <input> element.
+     * You can pass the `name` prop directly to the Select component.
+     */
+    inputProps?: InputHTMLAttributes<HTMLInputElement>;
+    children?: FormFieldProps['children'] | VirtualizedMenuProps['children'];
+} & Omit<FormFieldProps, 'onChange' | 'classes' | 'variant' | 'children'> & Pick<InputHTMLAttributes<HTMLInputElement>, 'name'>, SelectClassesKey, 'div'>;
+export interface SelectComponent {
+    <V = unknown>(props: SelectProps<V>): ReactElement;
+    displayName?: string;
+}

package/src/Select/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Select.classes';
+export * from './Select';
+export * from './Select.type';
+export * from './useSelect';

package/src/Select/useSelect.d.ts

@@ -0,0 +1,16 @@
+import { KeyboardEvent } from 'react';
+export declare type UseSelectParameters = {
+    open: boolean;
+    handleOpen: (open: boolean) => void;
+};
+export declare const useSelect: (props: UseSelectParameters) => {
+    getButtonProps: (otherHandlers?: {}) => {
+        onClick: () => void;
+        onKeyDown: (e: KeyboardEvent) => void;
+        'aria-expanded': boolean;
+        'aria-haspopup': "listbox";
+    };
+    getListboxProps: () => {
+        role: string;
+    };
+};

package/src/SingleFilter/FilterButton/FilterButton.classes.d.ts

@@ -0,0 +1,7 @@
+import type { CamelCase } from 'type-fest';
+export declare type BaseFilterButtonClassesKey = 'root';
+export declare type FilterButtonClassesKey = CamelCase<BaseFilterButtonClassesKey>;
+export declare type FilterButtonClasses = {
+    name: 'filter-button';
+    classes: BaseFilterButtonClassesKey;
+};

package/src/SingleFilter/FilterButton/FilterButton.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { FilterButtonProps } from './FilterButton.type';
+import filterButtonStyle from './styles/FilterButton.css';
+declare const FilterButton: import("react").ForwardRefExoticComponent<Pick<FilterButtonProps, "value" | "children" | "onKeyDown" | "onKeyUp" | "onClick" | "disabled" | "aria-hidden" | "dir" | "form" | "slot" | "style" | "title" | "aria-live" | "aria-atomic" | "role" | "classes" | "name" | "selected" | "className" | "accessKey" | "draggable" | "hidden" | "lang" | "translate" | "id" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "key" | "defaultChecked" | "defaultValue" | "formAction" | "formMethod" | "formNoValidate" | "formTarget" | "placeholder" | "type" | "onFocusVisible" | "onFocus" | "onBlur" | "onMouseEnter" | "onMouseLeave" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | `data-${string}` | "autoFocus" | "formEncType" | "rootRef" | "focusableWhenDisabled" | "rootElementName"> & import("react").RefAttributes<HTMLButtonElement>>;
+export { FilterButton, filterButtonStyle };

package/src/SingleFilter/FilterButton/FilterButton.type.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import { UseButtonParameters } from '@mui/base';
+import { StandardProps } from '@ringcentral/spring-base';
+import { FilterButtonClassesKey } from './FilterButton.classes';
+export declare type FilterButtonValue = string | number;
+export declare type FilterButtonProps = StandardProps<{
+    /**
+     * Text of filter button will be transformed to upper case
+     */
+    children: string;
+    /**
+     * Callback fired when the button is clicked.
+     *
+     * @param {React.MouseEvent<HTMLElement>} event The event source of the callback.
+     * @param {any} value of the selected button.
+     */
+    onClick?: (event: React.MouseEvent<HTMLElement>, value: FilterButtonValue) => void;
+    /**
+     * If `true`, the button is rendered in an active state.
+     */
+    selected?: boolean;
+    /**
+     * The value to associate with the button when selected in Filters.
+     * Defaults to use children if not provided.
+     */
+    value?: FilterButtonValue;
+} & Omit<UseButtonParameters, 'href' | 'to'>, FilterButtonClassesKey, 'button'>;

package/src/SingleFilter/FilterButton/index.d.ts

@@ -0,0 +1,3 @@
+export * from './FilterButton.classes';
+export * from './FilterButton';
+export * from './FilterButton.type';

package/src/SingleFilter/SingleFilter.classes.d.ts

@@ -0,0 +1,7 @@
+import type { CamelCase } from 'type-fest';
+export declare type BaseSingleFilterClassesKey = 'root' | 'more';
+export declare type SingleFilterClassesKey = CamelCase<BaseSingleFilterClassesKey>;
+export declare type SingleFilterClasses = {
+    name: 'single-filter';
+    classes: BaseSingleFilterClassesKey;
+};

package/src/SingleFilter/SingleFilter.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { SingleFilterProps } from './SingleFilter.type';
+import singleFilterStyle from './styles/SingleFilter.css';
+declare const SingleFilter: import("react").ForwardRefExoticComponent<Pick<SingleFilterProps, "value" | "children" | "onKeyDown" | "onKeyUp" | "onClick" | "aria-hidden" | "data" | "dir" | "slot" | "style" | "title" | "aria-live" | "aria-atomic" | "role" | "classes" | "className" | "accessKey" | "draggable" | "hidden" | "lang" | "translate" | "id" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "key" | "defaultChecked" | "defaultValue" | "placeholder" | "onFocus" | "onBlur" | "onMouseEnter" | "onMouseLeave" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | `data-${string}` | "defaultData" | "onDataChange" | "visibleCount" | "MoreButtonProps"> & import("react").RefAttributes<HTMLDivElement>>;
+export { SingleFilter, singleFilterStyle };

package/src/SingleFilter/SingleFilter.type.d.ts

@@ -0,0 +1,44 @@
+import { HTMLDataAttribute, StandardProps } from '@ringcentral/spring-base';
+import { AriaAttributes } from 'react';
+import { IconButtonProps } from '../IconButton';
+import { FilterButtonProps, FilterButtonValue } from './FilterButton';
+import { SingleFilterClassesKey } from './SingleFilter.classes';
+export declare type FilterItemData = {
+    label: string;
+} & Pick<FilterButtonProps, 'value' | 'disabled'> & HTMLDataAttribute & AriaAttributes;
+export declare type SingleFilterProps = StandardProps<{
+    /**
+     * The default value. Use when the component is not controlled.
+     */
+    defaultValue?: FilterButtonValue;
+    /**
+     * The value of the selected filter.
+     */
+    value?: FilterButtonValue;
+    /**
+     * The default data of filters. Use when the component is not controlled.
+     */
+    defaultData?: FilterItemData[];
+    /**
+     * The data of filters.
+     */
+    data?: FilterItemData[];
+    /**
+     * Callback fired when current selected filter is changed.
+     *
+     * @param value The value of current selected filter.
+     */
+    onSelect?: (value: FilterButtonValue) => void;
+    /**
+     * Callback fired when data of filters is changed.
+     *
+     * @param data Current data of filters.
+     */
+    onDataChange?: (data: FilterItemData[]) => void;
+    /** The max count of visible filters
+     *
+     * @default 2
+     */
+    visibleCount?: number;
+    MoreButtonProps?: Omit<IconButtonProps, 'variant' | 'size'> & HTMLDataAttribute;
+}, SingleFilterClassesKey, 'div'>;

package/src/SingleFilter/index.d.ts

@@ -0,0 +1,4 @@
+export * from './FilterButton';
+export * from './SingleFilter.classes';
+export * from './SingleFilter';
+export * from './SingleFilter.type';

package/src/Skeleton/Skeleton.classes.d.ts

@@ -0,0 +1,7 @@
+import type { CamelCase } from 'type-fest';
+export declare type BaseSkeletonClassesKey = 'root' | 'circular' | 'squircle' | 'rectangular' | 'text';
+export declare type SkeletonClassesKey = CamelCase<BaseSkeletonClassesKey>;
+export declare type SkeletonClasses = {
+    name: 'skeleton';
+    classes: BaseSkeletonClassesKey;
+};

package/src/Skeleton/Skeleton.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { SkeletonProps } from './Skeleton.type';
+import skeletonStyle from './styles/Skeleton.css';
+declare const Skeleton: import("react").ForwardRefExoticComponent<Pick<SkeletonProps, "classes" | "key" | `data-${string}` | keyof import("react").HTMLAttributes<HTMLDivElement> | "variant"> & import("react").RefAttributes<HTMLDivElement>>;
+export { Skeleton, skeletonStyle };

package/src/Skeleton/Skeleton.type.d.ts

@@ -0,0 +1,6 @@
+import { StandardProps } from '@ringcentral/spring-base';
+import { SkeletonClassesKey } from './Skeleton.classes';
+export declare type SkeletonProps = StandardProps<{
+    /** Sets the variant of the component. */
+    variant: 'text' | 'circular' | 'squircle' | 'rectangular';
+}, SkeletonClassesKey, 'div'>;

package/src/Skeleton/SkeletonContainer/SkeletonContainer.classes.d.ts

@@ -0,0 +1,7 @@
+import type { CamelCase } from 'type-fest';
+export declare type BaseSkeletonContainerClassesKey = '@keyframes' | 'root';
+export declare type SkeletonContainerClassesKey = CamelCase<BaseSkeletonContainerClassesKey>;
+export declare type SkeletonContainerClasses = {
+    name: 'skeleton-container';
+    classes: BaseSkeletonContainerClassesKey;
+};

package/src/Skeleton/SkeletonContainer/SkeletonContainer.d.ts

@@ -0,0 +1,5 @@
+import skeletonContainerStyle from './styles/SkeletonContainer.css';
+import { SkeletonContainerComponent } from './SkeletonContainer.type';
+declare const SkeletonContainer: SkeletonContainerComponent;
+export { SkeletonContainer };
+export { skeletonContainerStyle };

package/src/Skeleton/SkeletonContainer/SkeletonContainer.type.d.ts

@@ -0,0 +1,11 @@
+import { WithClassesProps, OverridableComponent, OverridableProps } from '@ringcentral/spring-base';
+import { SkeletonContainerClassesKey } from './SkeletonContainer.classes';
+declare type DefaultElementType = 'div';
+declare type ExtendElementType = 'div';
+declare type BaseSkeletonContainerProps = WithClassesProps<{}, SkeletonContainerClassesKey>;
+export declare type SkeletonContainerProps<T extends ExtendElementType = DefaultElementType> = OverridableProps<BaseSkeletonContainerProps, T>;
+export declare type SkeletonContainerComponent = OverridableComponent<{
+    props: BaseSkeletonContainerProps;
+    defaultComponent: DefaultElementType;
+}>;
+export {};

package/src/Skeleton/SkeletonContainer/index.d.ts

@@ -0,0 +1,3 @@
+export * from './SkeletonContainer.classes';
+export * from './SkeletonContainer';
+export * from './SkeletonContainer.type';

package/src/Skeleton/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Skeleton.classes';
+export * from './Skeleton';
+export * from './Skeleton.type';
+export * from './SkeletonContainer';

package/src/Slider/Slider.classes.d.ts

@@ -0,0 +1,13 @@
+import type { CamelCase } from 'type-fest';
+declare type SliderOrientation = 'vertical' | 'horizontal';
+export declare type BaseSliderClassesKey = 'root' | 'rail' | `rail-${SliderOrientation}` | 'track' | `track-${SliderOrientation}` | 'empty' | 'track-empty' | 'thumb' | `thumb-${SliderOrientation}` | 'thumb-inner' | 'marks' | `marks-${SliderOrientation}` | 'mark-container' | `mark-container-${SliderOrientation}` | 'mark' | `mark-${SliderOrientation}` | 'mark-label' | 'has-marks' | 'value-label' | 'value-label-paper'
+/**
+ * @deprecated Kept for backward compatibility. Will be removed in a future major version.
+ */
+ | 'show-on-hover-only' | 'show-color-at-rest' | 'neutral' | 'success' | 'warning' | 'danger' | SliderOrientation;
+export declare type SliderClassesKey = CamelCase<BaseSliderClassesKey>;
+export declare type SliderClasses = {
+    name: 'slider';
+    classes: BaseSliderClassesKey;
+};
+export {};

package/src/Slider/Slider.d.ts

@@ -0,0 +1,10 @@
+import { ForwardedRef, PropsWithoutRef } from 'react';
+import { SliderProps } from './Slider.type';
+import sliderStyle from './styles/Slider.css';
+declare const InnerSlider: <V extends number | number[] = number>(inProps: Pick<SliderProps<V>, "value" | "children" | "onKeyDown" | "onKeyUp" | "onClick" | "disabled" | "aria-hidden" | "dir" | "slot" | "style" | "title" | "aria-live" | "aria-atomic" | "role" | "classes" | "name" | "className" | "accessKey" | "draggable" | "hidden" | "lang" | "translate" | "id" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "key" | "defaultChecked" | "defaultValue" | "max" | "min" | "placeholder" | "step" | "scale" | "onFocus" | "onBlur" | "onMouseEnter" | "onMouseLeave" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | `data-${string}` | "orientation" | "marks" | "showColorAtRest" | "shiftStep" | "disableSwap" | "onChangeCommitted" | "getAriaValueText" | "valueLabelDisplay" | "valueLabelFormat" | "valueLabelTooltipProps">, ref: ForwardedRef<HTMLSpanElement>) => JSX.Element;
+declare const Slider: (<V extends number | number[] = number>(props: Pick<SliderProps<V>, "value" | "children" | "onKeyDown" | "onKeyUp" | "onClick" | "disabled" | "aria-hidden" | "dir" | "slot" | "style" | "title" | "aria-live" | "aria-atomic" | "role" | "classes" | "name" | "className" | "accessKey" | "draggable" | "hidden" | "lang" | "translate" | "id" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "key" | "defaultChecked" | "defaultValue" | "max" | "min" | "placeholder" | "step" | "scale" | "onFocus" | "onBlur" | "onMouseEnter" | "onMouseLeave" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | `data-${string}` | "orientation" | "marks" | "showColorAtRest" | "shiftStep" | "disableSwap" | "onChangeCommitted" | "getAriaValueText" | "valueLabelDisplay" | "valueLabelFormat" | "valueLabelTooltipProps"> & {
+    ref?: ForwardedRef<HTMLSpanElement> | undefined;
+}) => ReturnType<typeof InnerSlider>) & {
+    displayName?: string | undefined;
+};
+export { Slider, sliderStyle };

package/src/Slider/Slider.type.d.ts

@@ -0,0 +1,137 @@
+/// <reference types="react" />
+import { Mark, UseSliderParameters } from '@mui/base';
+import { StandardProps } from '@ringcentral/spring-base';
+import { TooltipProps } from '../Tooltip';
+import { SliderClassesKey } from './Slider.classes';
+declare type SliderColor = 'neutral' | 'success' | 'warning' | 'danger';
+export declare type SliderProps<V extends number | number[] = number> = StandardProps<{
+    /**
+     * The label of the slider.
+     */
+    'aria-label'?: string;
+    /**
+     * The id of the label for the slider.
+     */
+    'aria-labelledby'?: string;
+    /**
+     * A string value that provides a user-friendly name for the current value of the slider.
+     */
+    'aria-valuetext'?: string;
+    /**
+     * The default value. Use when the component is not controlled.
+     */
+    defaultValue?: V;
+    /**
+     * If `true`, the component is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider.
+     * This is important for screen reader users.
+     * @param {number} value The thumb label's value to format.
+     * @returns {string}
+     */
+    getAriaValueText?: (value: number) => string;
+    /**
+     * The maximum allowed value of the slider.
+     * Should not be equal to min.
+     * @default 100
+     */
+    max?: number;
+    /**
+     * The minimum allowed value of the slider.
+     * Should not be equal to max.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Name attribute of the hidden `input` element.
+     */
+    name?: string;
+    /**
+     * The color of the slider.
+     * @default neutral
+     */
+    color?: SliderColor;
+    /**
+     * Controls whether step marks will be displayed underneath the Slider.
+     * If a boolean is passed the labels rendered for the step marks will be the numerical value of the step.
+     * If an array of Mark is passed, the label rendered will be the label from each item of the array.
+     * @default false
+     */
+    marks?: boolean | (Omit<Mark, 'label'> & {
+        label: string;
+    })[];
+    /**
+     * Controls whether the semantic colors based on the `color` prop are shown on the track and thumb in the Slider's resting state or only when hovered.
+     * If `true`, the track and thumb will display their semantic color in the Slider's resting state.
+     * If `false`, the track and thumb will use their default neutral colors when the Slider isn't hovered, and will be filled with their semantic colors when the Slider is hovered.
+     * @default false
+     */
+    showColorAtRest?: boolean;
+    /**
+     * Controls how the value label is displayed.
+     * If `auto`, the value label will only display when the Slider is being hovered or focused.
+     * If `on`, the value label will display persistently.
+     * If `off`, the value label will not display.
+     * You can pass a function that returns a string to customize the value label via the `valueLabelFormat` prop.
+     * @default off
+     */
+    valueLabelDisplay?: 'on' | 'off' | 'auto';
+    /**
+     * Either a string to statically set the value label or a callback function to customize how the value label is formatted.
+     * Make sure to set the `valueLabelDisplay` prop to `on` or `auto`.
+     * @default (value) => value
+     */
+    valueLabelFormat?: string | ((value: number) => string);
+    /**
+     * Props applied to Tooltip component used to display the value label.
+     */
+    valueLabelTooltipProps?: Omit<TooltipProps, 'children' | 'open' | 'title'>;
+    /**
+     * Callback function that is fired when the slider's value changed.
+     *
+     * @param {Event} event The event source of the callback.
+     * You can pull out the new value by accessing `event.target.value` (any).
+     * **Warning**: This is a generic event not a change event.
+     * @param {number | number[]} value The new value.
+     * @param {number} activeThumb The index of the thumb currently being moved.
+     */
+    onChange?: (event: Event, value: V, activeThumb: number) => void;
+    /**
+     * Callback function that is fired when the `mouseup` is triggered.
+     *
+     * @param {React.SyntheticEvent | Event} event The event source of the callback. **Warning**: This is a generic event not a change event.
+     * @param {number | number[]} value The new value.
+     */
+    onChangeCommitted?: (event: React.SyntheticEvent | Event, value: V) => void;
+    /**
+     * A transformation function, to change the scale of the slider.
+     * Works on aria-valuenow, aria-valuemax, aria-valuemin of input and the value for getAriaValueText
+     * @default (value) => value
+     */
+    scale?: (value: number) => number;
+    /**
+     * The granularity with which the slider can step through values. (A "discrete" slider.)
+     * The `min` prop serves as the origin for the valid values.
+     * We recommend (max - min) to be evenly divisible by the step.
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Tab index attribute of the hidden `input` element.
+     */
+    tabIndex?: number;
+    /**
+     * The value of the slider.
+     * For range sliders, provide an array with multiple values.
+     */
+    value?: V;
+    /**
+     * The orientation of the slider.
+     * @default horizontal
+     */
+    orientation?: 'vertical' | 'horizontal';
+} & Pick<UseSliderParameters, 'shiftStep' | 'disableSwap'>, SliderClassesKey, 'span'>;
+export {};

package/src/Slider/SliderThumb.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { Transition } from 'framer-motion';
+import { UseSliderReturnValue } from '@mui/base';
+import { SliderProps } from './Slider.type';
+declare type SliderThumbProps = Pick<SliderProps, 'classes' | 'valueLabelDisplay' | 'valueLabelTooltipProps' | 'valueLabelFormat' | 'min' | 'max' | 'aria-label' | 'aria-valuetext' | 'getAriaValueText' | 'scale'> & Required<Pick<SliderProps, 'orientation' | 'min' | 'max'>> & Pick<UseSliderReturnValue, 'getThumbProps' | 'axisProps' | 'axis' | 'getHiddenInputProps'> & {
+    index: number;
+    value: number;
+    focusVisible?: boolean;
+    transition: Transition;
+    dragging: boolean;
+};
+declare const SliderThumb: {
+    (props: SliderThumbProps): JSX.Element;
+    displayName: string;
+};
+export { SliderThumb };

package/src/Slider/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Slider.classes';
+export * from './Slider';
+export * from './Slider.type';

package/src/Slider/utils.d.ts

@@ -0,0 +1 @@
+export declare const valueToPercent: (value: number, min: number, max: number) => number;

package/src/Snackbar/Snackbar.classes.d.ts

@@ -0,0 +1,7 @@
+import type { CamelCase } from 'type-fest';
+export declare type BaseSnackbarClassesKey = 'root';
+export declare type SnackbarClassesKey = CamelCase<BaseSnackbarClassesKey>;
+export declare type SnackbarClasses = {
+    name: 'snackbar';
+    classes: BaseSnackbarClassesKey;
+};

package/src/Snackbar/Snackbar.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { SnackbarProps } from './Snackbar.type';
+import snackbarStyle from './styles/Snackbar.css';
+declare const Snackbar: import("react").ForwardRefExoticComponent<Pick<SnackbarProps, "classes" | "key" | "action" | `data-${string}` | keyof import("react").HTMLAttributes<HTMLDivElement> | "component" | "open" | "icon" | "onClose" | "disablePortal" | "startSlot" | "closeText" | "severity" | "CloseButtonProps" | "autoHideDuration" | "closeButton"> & import("react").RefAttributes<HTMLDivElement>>;
+export { Snackbar, snackbarStyle };

package/src/Snackbar/Snackbar.hook.d.ts

@@ -0,0 +1 @@
+export declare const useSnackbarWrapper: (className: string) => HTMLElement | undefined;

package/src/Snackbar/Snackbar.type.d.ts

@@ -0,0 +1,27 @@
+import { PortalProps } from '@mui/base';
+import { StandardProps } from '@ringcentral/spring-base';
+import { SnackbarContentProps } from './SnackbarContent';
+import { SnackbarClassesKey } from './Snackbar.classes';
+export declare type SnackbarProps = StandardProps<{
+    /**
+     * To control whether to display the snackbar. It can be toggled when receive the close event.
+     *
+     * @default true
+     */
+    open?: boolean;
+    /**
+     * The number of milliseconds to wait before automatically calling the
+     * `onClose` function. `onClose` should then set the state of the `open`
+     * prop to hide the Snackbar. This behavior is disabled when it is `null`.
+     *
+     * The close button is not shown when a snackbar is set to hide automatically.
+     * @default 5000
+     */
+    autoHideDuration?: number | null;
+    /**
+     * is show closeButton or not,
+     *
+     * default will base on `onClose` be set or not
+     */
+    closeButton?: boolean;
+} & Pick<PortalProps, 'disablePortal'> & SnackbarContentProps, SnackbarClassesKey, 'div'>;

package/src/Snackbar/SnackbarContent/SnackbarContent.classes.d.ts

@@ -0,0 +1,8 @@
+import type { CamelCase } from 'type-fest';
+import { BaseAlertClassesKey } from '../../Alert/Alert.classes';
+export declare type BaseSnackbarContentClassesKey = BaseAlertClassesKey;
+export declare type SnackbarContentClassesKey = CamelCase<BaseSnackbarContentClassesKey>;
+export declare type SnackbarContentClasses = {
+    name: 'snackbar-content';
+    classes: BaseSnackbarContentClassesKey;
+};