@sprinklrjs/spaceweb 12.33.2 → 14.11.0

package/esm/helpers/longHandHelpers.js

@@ -1,36 +1,36 @@
 export var borderRadius = function (value) { return ({
-    borderTopRightRadius: value,
-    borderTopLeftRadius: value,
-    borderBottomRightRadius: value,
-    borderBottomLeftRadius: value,
+    borderStartEndRadius: value,
+    borderStartStartRadius: value,
+    borderEndEndRadius: value,
+    borderEndStartRadius: value,
 }); };
 export var borderWidth = function (value) { return ({
-    borderTopWidth: value,
-    borderRightWidth: value,
-    borderBottomWidth: value,
-    borderLeftWidth: value,
+    borderBlockStartWidth: value,
+    borderInlineEndWidth: value,
+    borderBlockEndWidth: value,
+    borderInlineStartWidth: value,
 }); };
 export var borderStyle = function (value) { return ({
-    borderTopStyle: value,
-    borderBottomStyle: value,
-    borderRightStyle: value,
-    borderLeftStyle: value,
+    borderBlockStartStyle: value,
+    borderBlockEndStyle: value,
+    borderInlineEndStyle: value,
+    borderInlineStartStyle: value,
 }); };
 export var borderColor = function (value) { return ({
-    borderTopColor: value,
-    borderRightColor: value,
-    borderBottomColor: value,
-    borderLeftColor: value,
+    borderBlockStartColor: value,
+    borderInlineEndColor: value,
+    borderBlockEndColor: value,
+    borderInlineStartColor: value,
 }); };
 export var padding = function (value) { return ({
-    paddingTop: value,
-    paddingRight: value,
-    paddingBottom: value,
-    paddingLeft: value,
+    paddingBlockStart: value,
+    paddingInlineEnd: value,
+    paddingBlockEnd: value,
+    paddingInlineStart: value,
 }); };
 export var margin = function (value) { return ({
-    marginTop: value,
-    marginRight: value,
-    marginBottom: value,
-    marginLeft: value,
+    marginBlockStart: value,
+    marginInlineEnd: value,
+    marginBlockEnd: value,
+    marginInlineStart: value,
 }); };

package/esm/helpers/themeHelpers.d.ts

@@ -1,5 +1,8 @@
 import { Theme } from '@sprinklrjs/spaceweb-themes/types';
 import { Size } from '../types';
+export declare const isDarkTheme: (theme: any) => boolean;
 export declare const getComponentTheme: (theme: Theme, componentName: string) => any;
+export declare const getDeprecatedComponentTheme: (theme: Theme, componentName: string) => any;
+export declare const getDeprecatedComponentSizeTheme: (theme: Theme, componentName: string, size: Size | undefined, defaultSize: Size) => any;
 export declare const getComponentSizeTheme: (theme: Theme, componentName: string, size: Size | undefined, defaultSize: Size) => any;
 export declare const getDefaultSize: (theme: Theme) => 'md' | 'xxxs';

package/esm/helpers/themeHelpers.js

@@ -1,4 +1,5 @@
-export var getComponentTheme = function (theme, componentName) { return theme[componentName]; };
+import _merge from './deepMerge';
+export var isDarkTheme = function (theme) { var _a; return (_a = theme === null || theme === void 0 ? void 0 : theme.name) === null || _a === void 0 ? void 0 : _a.includes('dark'); };
 var sizeAdapter = {
     xxxxs: 'sizeXxxxs',
     xxxs: 'sizeXxxs',
@@ -8,11 +9,24 @@ var sizeAdapter = {
     md: 'sizeMd',
     lg: 'sizeLg',
     xl: 'sizeXl',
+    small: 'sizeSmall',
+    medium: 'sizeMedium',
+    large: 'sizeLarge',
+    'x-large': 'sizeExtraLarge',
+};
+export var getComponentTheme = function (theme, componentName) { return theme === null || theme === void 0 ? void 0 : theme[componentName]; };
+export var getDeprecatedComponentTheme = function (theme, componentName) {
+    return _merge({}, theme.deprecatedComponentTheme[componentName], theme[componentName]);
 };
 /*
   NOTE: Need to add defaultSize as Button only supports xs - lg, whereas
   it's consumers like IconButton support xs - xl, due to which accessing component theme breaks in Button for xl
  */
+export var getDeprecatedComponentSizeTheme = function (theme, componentName, size, defaultSize) {
+    var _a, _b;
+    var componentTheme = (_a = getDeprecatedComponentTheme(theme, componentName)) !== null && _a !== void 0 ? _a : {};
+    return (_b = componentTheme[sizeAdapter[size !== null && size !== void 0 ? size : defaultSize]]) !== null && _b !== void 0 ? _b : componentTheme[sizeAdapter[defaultSize]];
+};
 export var getComponentSizeTheme = function (theme, componentName, size, defaultSize) {
     var _a, _b;
     var componentTheme = (_a = getComponentTheme(theme, componentName)) !== null && _a !== void 0 ? _a : {};

package/esm/hooks/useAutoFocus.d.ts

@@ -1,8 +1,8 @@
 import { RefObject, Ref } from 'react';
-import { FocusPosition } from '../input';
-declare type Params<T> = {
+import { FocusPosition } from '../input/types';
+type Params<T> = {
     autoFocus?: FocusPosition;
     inputRef?: Ref<T>;
 };
-declare const useAutoFocus: <T extends HTMLTextAreaElement | HTMLInputElement>({ autoFocus, inputRef, }: Params<T>) => RefObject<T>;
+declare const useAutoFocus: <T extends HTMLInputElement | HTMLTextAreaElement>({ autoFocus, inputRef, }: Params<T>) => RefObject<T>;
 export default useAutoFocus;

package/esm/hooks/useCombinedRef.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-export declare type Ref<T> = React.RefCallback<T> | React.MutableRefObject<T> | null;
-declare type Refs<T> = (Ref<T | null> | null | undefined)[];
+export type Ref<T> = React.RefCallback<T> | React.MutableRefObject<T> | null;
+type Refs<T> = (Ref<T | null> | null | undefined)[];
 export declare function combineRefs<T>(...refs: Refs<T>): (element: T) => void;
 export declare function useCombineRefObjects<T>(...refs: Refs<T>): React.RefObject<T>;
 declare function useCombinedRefs<T>(...refs: Refs<T>): React.RefCallback<T | null>;

package/esm/hooks/useDebouncedEventHandler.d.ts

@@ -2,5 +2,5 @@
  *  Created by Aneree on 10/12/20.
  */
 import { ReactEventHandler } from 'react';
-declare const useDebouncedEventHandler: <EH extends ReactEventHandler<Element>>(func: EH, defaultHandler?: EH | undefined, debounceInterval?: number) => (event: Parameters<EH>[0]) => void;
+declare const useDebouncedEventHandler: <EH extends ReactEventHandler>(func: EH, defaultHandler?: EH | undefined, debounceInterval?: number) => (event: Parameters<EH>[0]) => void;
 export { useDebouncedEventHandler };

package/esm/hooks/useFocusVisible.d.ts

@@ -1,4 +1,4 @@
-export declare const useFocusVisible: (props?: Record<string, any> | undefined) => {
+export declare const useFocusVisible: (props?: Record<string, any>) => {
     $isFocusVisible: boolean;
     onFocus: (...args: unknown[]) => void;
     onBlur: (...args: unknown[]) => void;

package/esm/hooks/useHover.d.ts

@@ -0,0 +1,5 @@
+import { Dispatch, SetStateAction } from 'react';
+export declare const useHover: () => [{
+    onMouseEnter: () => void;
+    onMouseLeave: () => void;
+}, boolean, Dispatch<SetStateAction<boolean>>];

package/esm/hooks/useHover.js

@@ -0,0 +1,15 @@
+import { __read } from "tslib";
+import { useCallback, useState } from 'react';
+export var useHover = function () {
+    var _a = __read(useState(false), 2), isHovering = _a[0], setHover = _a[1];
+    var onMouseEnter = useCallback(function () { return setHover(true); }, []);
+    var onMouseLeave = useCallback(function () { return setHover(false); }, []);
+    return [
+        {
+            onMouseEnter: onMouseEnter,
+            onMouseLeave: onMouseLeave,
+        },
+        isHovering,
+        setHover,
+    ];
+};

package/esm/hooks/useKeyPressListener.d.ts

@@ -0,0 +1,7 @@
+type Params = {
+    keyCode: string;
+    shouldStopPropagation: boolean;
+    onKeyPress?: () => void;
+};
+export declare const useKeyPressListener: ({ keyCode, shouldStopPropagation, onKeyPress }: Params) => void;
+export {};

package/esm/hooks/useKeyPressListener.js

@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+export var useKeyPressListener = function (_a) {
+    var keyCode = _a.keyCode, shouldStopPropagation = _a.shouldStopPropagation, onKeyPress = _a.onKeyPress;
+    useEffect(function () {
+        var stopKeyPressPropagation = function (event) {
+            if (event.code === keyCode) {
+                if (shouldStopPropagation) {
+                    event.stopPropagation();
+                }
+                onKeyPress === null || onKeyPress === void 0 ? void 0 : onKeyPress();
+            }
+        };
+        document.addEventListener('keydown', stopKeyPressPropagation, true);
+        return function () {
+            document.removeEventListener('keydown', stopKeyPressPropagation, true);
+        };
+    }, [shouldStopPropagation, onKeyPress, keyCode]);
+};

package/esm/hooks/useLatestCallback.d.ts

@@ -0,0 +1 @@
+export declare const useLatestCallback: <T extends (...args: any[]) => any>(callback: T) => T;

package/esm/hooks/useLatestCallback.js

@@ -0,0 +1,13 @@
+import { __read, __spreadArray } from "tslib";
+import { useCallback } from 'react';
+import { useLatest } from './useLatest';
+export var useLatestCallback = function (callback) {
+    var latestCallback = useLatest(callback);
+    return useCallback(function () {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        return latestCallback.current.apply(latestCallback, __spreadArray([], __read(args), false));
+    }, [latestCallback]);
+};

package/esm/hooks/useMatchMedia.d.ts

@@ -1,3 +1,3 @@
 export declare const isBrowser: boolean;
-declare const useMedia: (query: string, defaultState?: boolean | undefined) => boolean;
+declare const useMedia: (query: string, defaultState?: boolean) => boolean;
 export default useMedia;

package/esm/hooks/useMatchMedia.js

@@ -26,11 +26,12 @@ var useMedia = function (query, defaultState) {
             }
             setState(!!mediaQueryList.matches);
         };
-        // addListener is deprecated but older version of safari still have not implemented addEventListener so adding check
+        // addListener is deprecated but older version of Safari still have not implemented addEventListener so adding check
         if ('addEventListener' in mediaQueryList) {
             mediaQueryList.addEventListener('change', onChange);
         }
         else {
+            // @ts-ignore -- Safari
             mediaQueryList.addListener(onChange);
         }
         setState(mediaQueryList.matches);
@@ -40,6 +41,7 @@ var useMedia = function (query, defaultState) {
                 mediaQueryList.removeEventListener('change', onChange);
             }
             else {
+                // @ts-ignore -- Safari
                 mediaQueryList.removeListener(onChange);
             }
         };

package/esm/hooks/useMeasure.d.ts

@@ -1,6 +1,6 @@
-export declare type UseMeasureRect = Pick<DOMRectReadOnly, 'x' | 'y' | 'top' | 'left' | 'right' | 'bottom' | 'height' | 'width'>;
-export declare type UseMeasure<E extends Element = Element> = (element: E) => void;
-export declare type UseMeasureResult<E extends Element = Element> = [UseMeasure<E>, UseMeasureRect];
+export type UseMeasureRect = Pick<DOMRectReadOnly, 'x' | 'y' | 'top' | 'left' | 'right' | 'bottom' | 'height' | 'width'>;
+export type UseMeasure<E extends Element = Element> = (element: E) => void;
+export type UseMeasureResult<E extends Element = Element> = [UseMeasure<E>, UseMeasureRect];
 declare function _useMeasure<E extends Element = Element>(): UseMeasureResult<E>;
 export declare const useMeasure: typeof _useMeasure;
 export {};

package/esm/hooks/useSVGAnimation.d.ts

@@ -0,0 +1,13 @@
+import { MouseEventHandler } from 'react';
+import { AnimationType } from '../icon';
+type Params<T extends {
+    animate?: AnimationType | boolean;
+}> = Omit<T, 'animate' | 'onMouseEnter' | 'onMouseLeave'> & {
+    animate?: AnimationType | boolean;
+    onMouseEnter?: MouseEventHandler<SVGSVGElement>;
+    onMouseLeave?: MouseEventHandler<SVGSVGElement>;
+};
+export declare const useSVGAnimation: <T extends {
+    animate?: boolean | AnimationType | undefined;
+}>({ animate, onMouseEnter, onMouseLeave, ...restProps }: Params<T>) => [boolean, Omit<Params<T>, "animate">];
+export {};

package/esm/hooks/useSVGAnimation.js

@@ -0,0 +1,30 @@
+import { __assign, __read, __rest } from "tslib";
+import { useCallback, useState } from 'react';
+import usePreferredReducedMotion from './usePreferredReducedMotion';
+export var useSVGAnimation = function (_a) {
+    var animate = _a.animate, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, restProps = __rest(_a, ["animate", "onMouseEnter", "onMouseLeave"]);
+    var preferredReducedMotion = usePreferredReducedMotion();
+    var _b = __read(useState(false), 2), isHovering = _b[0], setHover = _b[1];
+    var handleOnMouseEnter = useCallback(function (e) {
+        setHover(true);
+        onMouseEnter && onMouseEnter(e);
+    }, [onMouseEnter]);
+    var handleOnMouseLeave = useCallback(function (e) {
+        setHover(false);
+        onMouseLeave && onMouseLeave(e);
+    }, [onMouseLeave]);
+    var animating;
+    if (preferredReducedMotion) {
+        animating = false;
+    }
+    else if (typeof animate === 'boolean') {
+        animating = animate;
+    }
+    else {
+        animating = animate === 'always' ? true : animate === 'hover' && isHovering;
+    }
+    return [
+        animating,
+        __assign(__assign({}, restProps), { onMouseEnter: animate === 'hover' ? handleOnMouseEnter : onMouseEnter, onMouseLeave: animate === 'hover' ? handleOnMouseLeave : onMouseLeave }),
+    ];
+};

package/esm/hooks/useScrollCapture.d.ts

@@ -1,4 +1,4 @@
-declare type Options = {
+type Options = {
     enabled?: boolean;
 };
 declare const useScrollCapture: ({ enabled }: Options) => (el: HTMLElement) => void;

package/esm/hooks/useTabsKeyboardNavigation.d.ts

@@ -3,7 +3,7 @@ export declare enum KEYBOARD_ACTION {
     next = "next",
     previous = "previous"
 }
-declare type Layout = 'horizontal' | 'vertical';
+type Layout = 'horizontal' | 'vertical';
 export declare const useTabsKeyboardNavigation: ({ layout, activateOnFocus, }: {
     layout?: Layout | undefined;
     activateOnFocus?: boolean | undefined;

package/esm/hooks/useTabsKeyboardNavigation.js

@@ -1,4 +1,6 @@
+// libs
 import { useCallback, useRef } from 'react';
+// hooks
 import { useTheme } from '../theme';
 export var KEYBOARD_ACTION;
 (function (KEYBOARD_ACTION) {
@@ -57,10 +59,7 @@ export var useTabsKeyboardNavigation = function (_a) {
             else {
                 nextChild = children[activeChildIndex + 1];
             }
-            //stop scrolling when tabs are vertically aligned
-            if (layout === 'vertical') {
-                event.preventDefault();
-            }
+            event.preventDefault();
         }
         else if (keyAction === KEYBOARD_ACTION.previous) {
             if (activeChildIndex === 0) {
@@ -69,10 +68,7 @@ export var useTabsKeyboardNavigation = function (_a) {
             else {
                 nextChild = children[activeChildIndex - 1];
             }
-            //stop scrolling when tabs are vertically aligned
-            if (layout === 'vertical') {
-                event.preventDefault();
-            }
+            event.preventDefault();
         }
         else {
             switch (event.key) {
@@ -90,6 +86,7 @@ export var useTabsKeyboardNavigation = function (_a) {
         }
         if (nextChild) {
             nextChild.focus();
+            nextChild.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
             if (activateOnFocus) {
                 nextChild.click();
             }

package/esm/hooks/useTransitionState.d.ts

@@ -1,4 +1,4 @@
 import { useState } from 'react';
-declare type UseTransitionState = typeof useState;
+type UseTransitionState = typeof useState;
 export declare const useTransitionState: UseTransitionState;
 export {};

package/esm/hooks/useVisibilityToggle.d.ts

@@ -0,0 +1,7 @@
+declare const useVisibilityToggle: (initialValue?: (() => boolean) | boolean) => {
+    isVisible: boolean;
+    show: () => void;
+    hide: () => void;
+    toggle: () => void;
+};
+export { useVisibilityToggle };

package/esm/hooks/useVisibilityToggle.js

@@ -0,0 +1,19 @@
+import { __read } from "tslib";
+import { useCallback, useState } from 'react';
+var useVisibilityToggle = function (initialValue) {
+    var _a = __read(useState(initialValue !== null && initialValue !== void 0 ? initialValue : false), 2), isVisible = _a[0], toggleVisibility = _a[1];
+    var show = useCallback(function () {
+        toggleVisibility(true);
+    }, [toggleVisibility]);
+    var hide = useCallback(function () {
+        toggleVisibility(false);
+    }, [toggleVisibility]);
+    var toggle = useCallback(function () { return toggleVisibility(function (prev) { return !prev; }); }, [toggleVisibility]);
+    return {
+        isVisible: isVisible,
+        show: show,
+        hide: hide,
+        toggle: toggle,
+    };
+};
+export { useVisibilityToggle };

package/esm/icon/components/alert-solid.js

@@ -4,5 +4,5 @@ import { useStyle } from '../../style';
 import Icon from '../icon';
 export default function AlertSolid(props) {
     var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
-    return (_jsx(Icon, __assign({ viewBox: "0 0 14 14", "data-icon-name": "AlertSolid" }, props, { children: _jsx("path", { d: "M7.063.012a6.994 6.994 0 1 0 6.994 6.994A6.996 6.996 0 0 0 7.063.012zm0 7.693a.701.701 0 0 1-.7-.699V4.21a.701.701 0 0 1 .7-.7.701.701 0 0 1 .7.7v2.797a.701.701 0 0 1-.7.7zm0 2.798a.701.701 0 0 1-.7-.7.701.701 0 0 1 .7-.699.701.701 0 0 1 .7.7.701.701 0 0 1-.7.699z" }, void 0) }), void 0));
+    return (_jsx(Icon, __assign({ viewBox: "0 0 14 14", "data-icon-name": "AlertSolid" }, props, { children: _jsx("path", { d: "M7.063.012a6.994 6.994 0 1 0 6.994 6.994A6.996 6.996 0 0 0 7.063.012zm0 7.693a.701.701 0 0 1-.7-.699V4.21a.701.701 0 0 1 .7-.7.701.701 0 0 1 .7.7v2.797a.701.701 0 0 1-.7.7zm0 2.798a.701.701 0 0 1-.7-.7.701.701 0 0 1 .7-.699.701.701 0 0 1 .7.7.701.701 0 0 1-.7.699z" }) })));
 }

package/esm/icon/components/alert-warning.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IconProps } from '../types';
+export default function AlertWarning(props: IconProps): React.ReactElement;

package/esm/icon/components/alert-warning.js

@@ -0,0 +1,8 @@
+import { __assign } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useStyle } from '../../style';
+import Icon from '../icon';
+export default function AlertWarning(props) {
+    var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
+    return (_jsx(Icon, __assign({ viewBox: "0 0 14 14", "data-icon-name": "AlertWarning" }, props, { children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7 0a7 7 0 10.001 14.001A7 7 0 007 0zm1.733 10.141c-.722.68-1.237 1.104-1.574 1.296-.348.2-.63.296-.862.296a.686.686 0 01-.525-.211c-.129-.138-.194-.327-.194-.562 0-.664.382-2.225 1.167-4.77a.985.985 0 00.047-.304h-.007a.566.566 0 00-.283.104c-.135.084-1.057.462-1.24.537a.13.13 0 01-.146-.209c.523-.575 1.008-.992 1.444-1.238.45-.253.826-.376 1.151-.376.195 0 .35.046.462.138a.494.494 0 01.179.395c0 .104-.053.42-.508 1.942-.54 1.813-.813 2.915-.813 3.278 0 .044.01.078.029.104.007.01.013.016.017.02.142-.028.87-.35 1.51-.652a.13.13 0 01.146.212zm-.085-6.357c-.183.2-.394.302-.627.302a.64.64 0 01-.482-.203.72.72 0 01-.19-.516c0-.265.087-.494.258-.68a.83.83 0 01.63-.287c.196 0 .36.067.489.198.127.13.192.298.192.498 0 .26-.091.49-.27.688z" }) })));
+}

package/esm/icon/components/alert.js

@@ -4,5 +4,5 @@ import { useStyle } from '../../style';
 import Icon from '../icon';
 export default function Alert(props) {
     var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
-    return (_jsxs(Icon, __assign({ viewBox: "0 0 12 12", "data-icon-name": "Alert" }, props, { children: [_jsx("path", { d: "M5.904 6.5a.5.5 0 0 1-.5-.5V3.25a.5.5 0 1 1 1 0V6a.5.5 0 0 1-.5.5z" }, void 0), _jsx("circle", { cx: "5.904", cy: "8.161", r: ".589" }, void 0), _jsx("path", { d: "M6 12c-3.308 0-6-2.69-6-6s2.692-6 6-6 6 2.692 6 6-2.691 6-6 6zM6 1C3.244 1 1 3.243 1 6s2.244 5 5 5 5-2.243 5-5-2.243-5-5-5z" }, void 0)] }), void 0));
+    return (_jsxs(Icon, __assign({ viewBox: "0 0 12 12", "data-icon-name": "Alert" }, props, { children: [_jsx("path", { d: "M5.904 6.5a.5.5 0 0 1-.5-.5V3.25a.5.5 0 1 1 1 0V6a.5.5 0 0 1-.5.5z" }), _jsx("circle", { cx: "5.904", cy: "8.161", r: ".589" }), _jsx("path", { d: "M6 12c-3.308 0-6-2.69-6-6s2.692-6 6-6 6 2.692 6 6-2.691 6-6 6zM6 1C3.244 1 1 3.243 1 6s2.244 5 5 5 5-2.243 5-5-2.243-5-5-5z" })] })));
 }

package/esm/icon/components/calendar-solid.js

@@ -4,5 +4,5 @@ import { useStyle } from '../../style';
 import Icon from '../icon';
 export default function CalendarSolid(props) {
     var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
-    return (_jsx(Icon, __assign({ viewBox: "0 0 15 15", "data-icon-name": "CalendarSolid" }, props, { children: _jsx("path", { d: "M12.4 1.6c.9 0 1.7.8 1.7 1.7v1.2H0V3.3c0-.9.8-1.7 1.7-1.7h.9V0h1.6v1.6h5.6V0h1.6v1.6h1zM0 13.4V6.1h14.1v7.3c0 .9-.8 1.6-1.7 1.6H1.7C.8 15 0 14.3 0 13.4z" }, void 0) }), void 0));
+    return (_jsx(Icon, __assign({ viewBox: "0 0 15 15", "data-icon-name": "CalendarSolid" }, props, { children: _jsx("path", { d: "M12.4 1.6c.9 0 1.7.8 1.7 1.7v1.2H0V3.3c0-.9.8-1.7 1.7-1.7h.9V0h1.6v1.6h5.6V0h1.6v1.6h1zM0 13.4V6.1h14.1v7.3c0 .9-.8 1.6-1.7 1.6H1.7C.8 15 0 14.3 0 13.4z" }) })));
 }

package/esm/icon/components/chevron-down-solid.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IconProps } from '../types';
+export default function ChevronDownSolid(props: IconProps): React.ReactElement;

package/esm/icon/components/chevron-down-solid.js

@@ -0,0 +1,8 @@
+import { __assign } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useStyle } from '../../style';
+import Icon from '../icon';
+export default function ChevronDownSolid(props) {
+    var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
+    return (_jsx(Icon, __assign({ viewBox: "0 0 14 14", "data-icon-name": "ChevronDownSolid" }, props, { children: _jsx("path", { d: "M11.72 2.901H2.28a.779.779 0 00-.636 1.23l4.72 6.64a.779.779 0 001.27 0l4.722-6.64a.779.779 0 00-.634-1.23z" }) })));
+}

package/esm/icon/components/chevron-down.js

@@ -4,5 +4,5 @@ import { useStyle } from '../../style';
 import Icon from '../icon';
 export default function ChevronDown(props) {
     var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
-    return (_jsx(Icon, __assign({ viewBox: "0 0 14 14", "data-icon-name": "ChevronDown" }, props, { children: _jsx("path", { d: "M7 10.922a.84.84 0 01-.597-.248L.247 4.518a.843.843 0 111.194-1.192L7 8.884l5.56-5.558a.844.844 0 011.193 1.192l-6.156 6.156a.84.84 0 01-.597.248z" }, void 0) }), void 0));
+    return (_jsx(Icon, __assign({ viewBox: "0 0 14 14", "data-icon-name": "ChevronDown" }, props, { children: _jsx("path", { d: "M7 10.922a.84.84 0 01-.597-.248L.247 4.518a.843.843 0 111.194-1.192L7 8.884l5.56-5.558a.844.844 0 011.193 1.192l-6.156 6.156a.84.84 0 01-.597.248z" }) })));
 }

package/esm/icon/components/chevron-left.js

@@ -4,5 +4,5 @@ import { useStyle } from '../../style';
 import Icon from '../icon';
 export default function ChevronLeft(props) {
     var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
-    return (_jsx(Icon, __assign({ viewBox: "0 0 14 14", "data-icon-name": "ChevronLeft" }, props, { className: isRTL ? [{ transform: 'scaleX(-1)' }, props.className] : props.className }, { children: _jsx("path", { d: "M10.693 13.728a.931.931 0 00-.001-1.316L5.282 7l5.41-5.41A.93.93 0 009.379.271h-.001l-6.07 6.07a.931.931 0 000 1.316l6.069 6.07a.931.931 0 001.316 0z" }, void 0) }), void 0));
+    return (_jsx(Icon, __assign({ viewBox: "0 0 14 14", "data-icon-name": "ChevronLeft" }, props, { className: isRTL ? ['-scale-x-100', props.className] : props.className }, { children: _jsx("path", { d: "M10.693 13.728a.931.931 0 00-.001-1.316L5.282 7l5.41-5.41A.93.93 0 009.379.271h-.001l-6.07 6.07a.931.931 0 000 1.316l6.069 6.07a.931.931 0 001.316 0z" }) })));
 }

package/esm/icon/components/chevron-right.js

@@ -4,5 +4,5 @@ import { useStyle } from '../../style';
 import Icon from '../icon';
 export default function ChevronRight(props) {
     var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
-    return (_jsx(Icon, __assign({ viewBox: "0 0 14 14", "data-icon-name": "ChevronRight" }, props, { className: isRTL ? [{ transform: 'scaleX(-1)' }, props.className] : props.className }, { children: _jsx("path", { d: "M3.307.272a.931.931 0 00.001 1.316L8.718 7l-5.41 5.41a.93.93 0 001.313 1.318h.001l6.07-6.07a.931.931 0 000-1.316L4.623.272a.931.931 0 00-1.316 0z" }, void 0) }), void 0));
+    return (_jsx(Icon, __assign({ viewBox: "0 0 14 14", "data-icon-name": "ChevronRight" }, props, { className: isRTL ? ['-scale-x-100', props.className] : props.className }, { children: _jsx("path", { d: "M3.307.272a.931.931 0 00.001 1.316L8.718 7l-5.41 5.41a.93.93 0 001.313 1.318h.001l6.07-6.07a.931.931 0 000-1.316L4.623.272a.931.931 0 00-1.316 0z" }) })));
 }

package/esm/icon/components/clock-icon.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IconProps } from '../types';
+export default function ClockIcon(props: IconProps): React.ReactElement;

package/esm/icon/components/clock-icon.js

@@ -0,0 +1,8 @@
+import { __assign } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useStyle } from '../../style';
+import Icon from '../icon';
+export default function ClockIcon(props) {
+    var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
+    return (_jsx(Icon, __assign({ viewBox: "0 0 14 14", "data-icon-name": "ClockIcon" }, props, { children: _jsx("path", { d: "M7,0a7,7,0,1,0,7,7A7.00055,7.00055,0,0,0,7,0ZM9.72222,9.72222a.77454.77454,0,0,1-1.09666,0l-2.17-2.17A.7772.7772,0,0,1,6.22222,7V3.88889A.78007.78007,0,0,1,7,3.11111H7a.78007.78007,0,0,1,.77778.77778V6.68111L9.72222,8.62556A.77454.77454,0,0,1,9.72222,9.72222Z" }) })));
+}

package/esm/icon/components/close.js

@@ -4,5 +4,5 @@ import { useStyle } from '../../style';
 import Icon from '../icon';
 export default function Close(props) {
     var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
-    return (_jsx(Icon, __assign({ viewBox: "0 0 14 14", "data-icon-name": "Close" }, props, { children: _jsx("path", { d: "M12.8 12.7c.3-.3.3-.8 0-1L8 7l4.6-4.7c.3-.3.3-.8 0-1.1-.3-.3-.8-.3-1.1 0L6.9 6 2.3 1.3C2 1 1.5 1 1.2 1.3s-.3.7 0 1L5.9 7l-4.7 4.7c-.3.3-.3.8 0 1.1.3.3.8.3 1 0l4.7-4.7 4.7 4.6c.3.3.8.3 1.2 0z" }, void 0) }), void 0));
+    return (_jsx(Icon, __assign({ viewBox: "0 0 14 14", "data-icon-name": "Close" }, props, { children: _jsx("path", { d: "M12.8 12.7c.3-.3.3-.8 0-1L8 7l4.6-4.7c.3-.3.3-.8 0-1.1-.3-.3-.8-.3-1.1 0L6.9 6 2.3 1.3C2 1 1.5 1 1.2 1.3s-.3.7 0 1L5.9 7l-4.7 4.7c-.3.3-.3.8 0 1.1.3.3.8.3 1 0l4.7-4.7 4.7 4.6c.3.3.8.3 1.2 0z" }) })));
 }

package/esm/icon/components/delete-solid.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IconProps } from '../types';
+export default function DeleteSolid(props: IconProps): React.ReactElement;

package/esm/icon/components/delete-solid.js

@@ -0,0 +1,8 @@
+import { __assign } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useStyle } from '../../style';
+import Icon from '../icon';
+export default function DeleteSolid(props) {
+    var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
+    return (_jsx(Icon, __assign({ viewBox: "0 0 14 14", "data-icon-name": "DeleteSolid" }, props, { children: _jsx("path", { d: "M13.418 1.386h-5.8V.6a.582.582 0 00-1.166 0v.787H.582a.582.582 0 100 1.165h.34l1.096 8.442a.583.583 0 00.071.208c.417 1.845 1.39 2.754 2.983 2.754h4.071c1.37 0 2.43-1.163 2.755-2.973a.566.566 0 00.027-.082l1.121-8.35h.372a.582.582 0 100-1.164zm-8.624 9.711a.472.472 0 01-.052.002.58.58 0 01-.579-.53l-.51-5.837a.584.584 0 011.16-.102l.51 5.836a.583.583 0 01-.529.631zm2.81-.58a.582.582 0 11-1.164 0V4.66a.582.582 0 111.164 0zm2.267.05v.003a.58.58 0 01-.63.526h-.003a.58.58 0 01-.526-.63l.51-5.836a.582.582 0 111.16.102z" }) })));
+}

package/esm/icon/components/error-clr.js

@@ -4,5 +4,5 @@ import { useStyle } from '../../style';
 import Icon from '../icon';
 export default function ErrorClr(props) {
     var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
-    return (_jsxs(Icon, __assign({ viewBox: "0 0 14 14", "data-icon-name": "ErrorClr" }, props, { children: [_jsx("path", { fill: "#FF6060", d: "M6.304 1.636c.385-.63 1.008-.63 1.391-.002l2.147 3.52 3.987 6.541c.385.63.097 1.142-.64 1.142H.81c-.737 0-1.024-.51-.639-1.142l6.133-10.06z" }, void 0), _jsx("path", { fill: "#FFF", d: "M6.69 9.895h.843v.841H6.69zm0-4.624h.843v3.783H6.69z" }, void 0)] }), void 0));
+    return (_jsxs(Icon, __assign({ viewBox: "0 0 14 14", "data-icon-name": "ErrorClr" }, props, { children: [_jsx("path", { fill: theme.spr.supportError, d: "M6.304 1.636c.385-.63 1.008-.63 1.391-.002l2.147 3.52 3.987 6.541c.385.63.097 1.142-.64 1.142H.81c-.737 0-1.024-.51-.639-1.142l6.133-10.06z" }), _jsx("path", { fill: "#FFF", d: "M6.69 9.895h.843v.841H6.69zm0-4.624h.843v3.783H6.69z" })] })));
 }

package/esm/icon/components/error.js

@@ -4,5 +4,5 @@ import { useStyle } from '../../style';
 import Icon from '../icon';
 export default function Error(props) {
     var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
-    return (_jsxs(Icon, __assign({ viewBox: "0 0 14 11.98", "data-icon-name": "Error" }, props, { children: [_jsx("path", { d: "M13.78 9.73L8.26.7a1.48 1.48 0 00-2.53 0L.22 9.73a1.48 1.48 0 001.26 2.25h11.04a1.48 1.48 0 001.26-2.25zm-1 1.2a.5.5 0 01-.26.06H1.48a.5.5 0 01-.42-.75l5.52-9.02A.5.5 0 017 1a.49.49 0 01.26.07.48.48 0 01.16.16l5.52 9.02a.5.5 0 01-.16.68z" }, void 0), _jsx("path", { d: "M7 7.6a.44.44 0 00.48-.37V4.55A.44.44 0 007 4.17a.44.44 0 00-.48.38v2.68A.44.44 0 007 7.6zM7 8.63a.72.72 0 10.72.72.72.72 0 00-.72-.72z" }, void 0)] }), void 0));
+    return (_jsxs(Icon, __assign({ viewBox: "0 0 14 11.98", "data-icon-name": "Error" }, props, { children: [_jsx("path", { d: "M13.78 9.73L8.26.7a1.48 1.48 0 00-2.53 0L.22 9.73a1.48 1.48 0 001.26 2.25h11.04a1.48 1.48 0 001.26-2.25zm-1 1.2a.5.5 0 01-.26.06H1.48a.5.5 0 01-.42-.75l5.52-9.02A.5.5 0 017 1a.49.49 0 01.26.07.48.48 0 01.16.16l5.52 9.02a.5.5 0 01-.16.68z" }), _jsx("path", { d: "M7 7.6a.44.44 0 00.48-.37V4.55A.44.44 0 007 4.17a.44.44 0 00-.48.38v2.68A.44.44 0 007 7.6zM7 8.63a.72.72 0 10.72.72.72.72 0 00-.72-.72z" })] })));
 }

package/esm/icon/components/form.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IconProps } from '../types';
+export default function Form(props: IconProps): React.ReactElement;

package/esm/icon/components/form.js

@@ -0,0 +1,8 @@
+import { __assign } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useStyle } from '../../style';
+import Icon from '../icon';
+export default function Form(props) {
+    var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
+    return (_jsx(Icon, __assign({ viewBox: "0 0 14 14", "data-icon-name": "Form" }, props, { children: _jsx("path", { d: "M12.182 3.797L8.804.419a1.397 1.397 0 00-.986-.406H2.804a1.397 1.397 0 00-1.392 1.399l-.007 11.19A1.397 1.397 0 002.797 14h8.399a1.403 1.403 0 001.399-1.399V4.79a1.403 1.403 0 00-.413-.993zm-2.685 7.386H4.503a.7.7 0 110-1.4h4.994a.7.7 0 110 1.4zm0-2.501H4.503a.7.7 0 110-1.4h4.994a.7.7 0 110 1.4zM8.4 4.909a.701.701 0 01-.7-.7V1.062l3.847 3.847z" }) })));
+}

package/esm/icon/components/imagePreview.js

@@ -4,5 +4,5 @@ import { useStyle } from '../../style';
 import Icon from '../icon';
 export default function ImagePreview(props) {
     var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
-    return (_jsxs(Icon, __assign({ viewBox: "0 0 14 14", "data-icon-name": "ImagePreview" }, props, { children: [_jsx("circle", { fillRule: "evenodd", clipRule: "evenodd", cx: "12.5", cy: "3.35", r: "1.5" }, void 0), _jsx("path", { d: "M9.33 14H0l3.87-5.5c.36-.52 1.29-.51 1.64 0L9.33 14zm1.52-.01l-1.52-2.18 1.2-1.4c.09-.13.25-.22.3-.19.11 0 .22.06.3.17L14 14h-3.15v-.01z" }, void 0)] }), void 0));
+    return (_jsxs(Icon, __assign({ viewBox: "0 0 14 14", "data-icon-name": "ImagePreview" }, props, { children: [_jsx("circle", { fillRule: "evenodd", clipRule: "evenodd", cx: "12.5", cy: "3.35", r: "1.5" }), _jsx("path", { d: "M9.33 14H0l3.87-5.5c.36-.52 1.29-.51 1.64 0L9.33 14zm1.52-.01l-1.52-2.18 1.2-1.4c.09-.13.25-.22.3-.19.11 0 .22.06.3.17L14 14h-3.15v-.01z" })] })));
 }

package/esm/icon/components/info-circle.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IconProps } from '../types';
+export default function InfoCircle(props: IconProps): React.ReactElement;

package/esm/icon/components/info-circle.js

@@ -0,0 +1,8 @@
+import { __assign } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useStyle } from '../../style';
+import Icon from '../icon';
+export default function InfoCircle(props) {
+    var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
+    return (_jsx(Icon, __assign({ viewBox: "0 0 14 14", "data-icon-name": "InfoCircle" }, props, { children: _jsx("path", { d: "M7 0a7 7 0 107 7 7 7 0 00-7-7zm.7 10.768a.7.7 0 11-1.4 0V6.6a.7.7 0 111.4 0zM7 5.028a.898.898 0 11.898-.898.898.898 0 01-.898.898z", fillRule: "evenodd" }) })));
+}

package/esm/icon/components/info-solid.d.ts

@@ -0,0 +1,3 @@
+import { ReactElement } from 'react';
+import { IconProps } from '../types';
+export default function SolidAlertWarning(props: IconProps): ReactElement;

package/esm/icon/components/info-solid.js

@@ -0,0 +1,6 @@
+import { __assign } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import Icon from '../icon';
+export default function SolidAlertWarning(props) {
+    return (_jsx(Icon, __assign({ viewBox: "0 0 14 14", "data-icon-name": "SolidAlertWarning" }, props, { children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7 0a7 7 0 10.001 14.001A7 7 0 007 0zm1.733 10.141c-.722.68-1.237 1.104-1.574 1.296-.348.2-.63.296-.862.296a.686.686 0 01-.525-.211c-.129-.138-.194-.327-.194-.562 0-.664.382-2.225 1.167-4.77a.985.985 0 00.047-.304h-.007a.566.566 0 00-.283.104c-.135.084-1.057.462-1.24.537a.13.13 0 01-.146-.209c.523-.575 1.008-.992 1.444-1.238.45-.253.826-.376 1.151-.376.195 0 .35.046.462.138a.494.494 0 01.179.395c0 .104-.053.42-.508 1.942-.54 1.813-.813 2.915-.813 3.278 0 .044.01.078.029.104.007.01.013.016.017.02.142-.028.87-.35 1.51-.652a.13.13 0 01.146.212zm-.085-6.357c-.183.2-.394.302-.627.302a.64.64 0 01-.482-.203.72.72 0 01-.19-.516c0-.265.087-.494.258-.68a.83.83 0 01.63-.287c.196 0 .36.067.489.198.127.13.192.298.192.498 0 .26-.091.49-.27.688z" }) })));
+}

package/esm/icon/components/info.js

@@ -4,5 +4,5 @@ import { useStyle } from '../../style';
 import Icon from '../icon';
 export default function Info(props) {
     var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
-    return (_jsx(Icon, __assign({ viewBox: "0 0 14 14", "data-icon-name": "Info" }, props, { children: _jsx("path", { d: "M9.627 11.36a.196.196 0 0 0-.245-.067c-.962.455-2.053.936-2.267.978a.189.189 0 0 1-.025-.029.256.256 0 0 1-.043-.157c0-.544.41-2.198 1.22-4.916.682-2.284.76-2.757.76-2.914a.742.742 0 0 0-.268-.592c-.166-.138-.4-.208-.692-.208-.488 0-1.052.185-1.727.566-.653.369-1.382.993-2.166 1.857a.196.196 0 0 0 .219.312c.275-.112 1.658-.678 1.86-.805.164-.104.307-.156.424-.156a.14.14 0 0 1 .01 0c.002.008.004.02.004.037 0 .119-.025.26-.073.418-1.179 3.819-1.751 6.16-1.751 7.156 0 .352.097.635.29.842.197.211.462.318.788.318.348 0 .77-.145 1.294-.444.506-.29 1.278-.925 2.36-1.944a.195.195 0 0 0 .028-.253zM9.589.297A.985.985 0 0 0 8.857 0c-.366 0-.684.144-.946.429a1.46 1.46 0 0 0-.389 1.021c0 .314.097.575.287.774a.96.96 0 0 0 .722.305c.35 0 .667-.153.94-.453a1.49 1.49 0 0 0 .406-1.033c0-.299-.097-.55-.288-.746z", fillRule: "evenodd", clipRule: "evenodd" }, void 0) }), void 0));
+    return (_jsx(Icon, __assign({ viewBox: "0 0 14 14", "data-icon-name": "Info" }, props, { children: _jsx("path", { d: "M9.627 11.36a.196.196 0 0 0-.245-.067c-.962.455-2.053.936-2.267.978a.189.189 0 0 1-.025-.029.256.256 0 0 1-.043-.157c0-.544.41-2.198 1.22-4.916.682-2.284.76-2.757.76-2.914a.742.742 0 0 0-.268-.592c-.166-.138-.4-.208-.692-.208-.488 0-1.052.185-1.727.566-.653.369-1.382.993-2.166 1.857a.196.196 0 0 0 .219.312c.275-.112 1.658-.678 1.86-.805.164-.104.307-.156.424-.156a.14.14 0 0 1 .01 0c.002.008.004.02.004.037 0 .119-.025.26-.073.418-1.179 3.819-1.751 6.16-1.751 7.156 0 .352.097.635.29.842.197.211.462.318.788.318.348 0 .77-.145 1.294-.444.506-.29 1.278-.925 2.36-1.944a.195.195 0 0 0 .028-.253zM9.589.297A.985.985 0 0 0 8.857 0c-.366 0-.684.144-.946.429a1.46 1.46 0 0 0-.389 1.021c0 .314.097.575.287.774a.96.96 0 0 0 .722.305c.35 0 .667-.153.94-.453a1.49 1.49 0 0 0 .406-1.033c0-.299-.097-.55-.288-.746z", fillRule: "evenodd", clipRule: "evenodd" }) })));
 }

package/esm/icon/components/no-video.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IconProps } from '../types';
+export default function SolidNoVideo(props: IconProps): React.ReactElement;