@sprinklrjs/spaceweb 10.1.0 → 12.0.0-ci.0

package/esm/helpers/StyledTombstone.d.ts

@@ -0,0 +1 @@
+export declare const StyledTombstone: import("../style/styled").StyledComponent;

package/esm/helpers/StyledTombstone.js

@@ -0,0 +1,17 @@
+import styled from '../style/styled';
+export var StyledTombstone = styled('div', 'spr-ui-03 h-full w-full', {
+    animationDuration: '1s',
+    animationIterationCount: 'infinite',
+    animationTimingFunction: 'ease-in-out',
+    animationName: {
+        '0%': {
+            opacity: '1',
+        },
+        '50%': {
+            opacity: '0.4',
+        },
+        '100%': {
+            opacity: '1',
+        },
+    },
+});

package/esm/helpers/colors.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="lodash" />
+export declare function hexToRgb(hex: string): [R: number, G: number, B: number];
+export declare function RgbToHex(rgb: readonly [number, number, number]): string;
+/**
+ * https://medium.muz.li/the-science-of-color-contrast-an-expert-designers-guide-33e84c41d156
+ * https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum#dfn-contrast-ratio
+ */
+export declare const getRelativeLuminance: ((rgb: readonly [number, number, number]) => number) & import("lodash").MemoizedFunction;
+export declare function getContrastRatio(color1: string, color2: string): number;
+export declare function RgbToHsl(rgb: readonly [number, number, number]): [H: number, S: number, L: number];
+export declare function HslToRgb(hsl: readonly [number, number, number]): [R: number, G: number, B: number];

package/esm/helpers/colors.js

@@ -0,0 +1,49 @@
+import { __read } from "tslib";
+import memoize from 'lodash/memoize';
+export function hexToRgb(hex) {
+    var r = parseInt(hex.substring(1, 3), 16);
+    var g = parseInt(hex.substring(3, 5), 16);
+    var b = parseInt(hex.substring(5, 7), 16);
+    return [r, g, b];
+}
+export function RgbToHex(rgb) {
+    return "#".concat(rgb.map(function (n) { return Math.round(n).toString(16).padStart(2, '0'); }).join(''));
+}
+/**
+ * https://medium.muz.li/the-science-of-color-contrast-an-expert-designers-guide-33e84c41d156
+ * https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum#dfn-contrast-ratio
+ */
+export var getRelativeLuminance = memoize(function (rgb) {
+    var _a = __read(rgb.map(function (c) { return c / 255; }).map(function (c) { return (c <= 0.04045 ? c / 12.92 : Math.pow(((c + 0.055) / 1.055), 2.4)); }), 3), r = _a[0], g = _a[1], b = _a[2];
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}, function (rgb) { return rgb.join(','); });
+export function getContrastRatio(color1, color2) {
+    var rgb1 = hexToRgb(color1);
+    var rgb2 = hexToRgb(color2);
+    var l1 = getRelativeLuminance(rgb1);
+    var l2 = getRelativeLuminance(rgb2);
+    return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
+}
+// https://www.rapidtables.com/convert/color
+export function RgbToHsl(rgb) {
+    var _a = __read(rgb.map(function (n) { return n / 255; }), 3), R = _a[0], G = _a[1], B = _a[2];
+    var L = Math.max(R, G, B);
+    var S = L - Math.min(R, G, B);
+    // eslint-disable-next-line no-nested-ternary -- Can't really make this readable
+    var H = S ? (L === R ? (G - B) / S : L === G ? 2 + (B - R) / S : 4 + (R - G) / S) : 0;
+    return [
+        Math.round(60 * H < 0 ? 60 * H + 360 : 60 * H),
+        // eslint-disable-next-line no-nested-ternary -- Can't really make this readable
+        Math.round(100 * (S ? (L <= 0.5 ? S / (2 * L - S) : S / (2 - (2 * L - S))) : 0)),
+        Math.round((100 * (2 * L - S)) / 2),
+    ];
+}
+export function HslToRgb(hsl) {
+    var H = Math.round(hsl[0]);
+    var S = Math.round(hsl[1]) / 100;
+    var L = Math.round(hsl[2]) / 100;
+    var k = function (n) { return (n + H / 30) % 12; };
+    var A = S * Math.min(L, 1 - L);
+    var f = function (n) { return L - A * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1))); };
+    return [Math.round(255 * f(0)), Math.round(255 * f(8)), Math.round(255 * f(4))];
+}

package/esm/helpers/commonStyles.d.ts

@@ -9,9 +9,10 @@ export declare const chevronStyles: StyleFn<{
 export declare const transparentScrollbarStyles: StyleObject;
 export declare type OutlineProps = {
     $outlineColor?: string;
-    $outlineWidth?: string | number;
-    $outlineOffset?: string | number;
+    $outlineWidth?: StyleObject['outlineWidth'];
+    $outlineOffset?: StyleObject['outlineOffset'];
     $outlineStyle?: string;
 };
 export declare const getOutlineStyles: ({ theme }: StyleUtils, props?: OutlineProps | undefined) => StyleObject;
 export declare const getFocusVisibleStyles: (utils: StyleUtils, props?: OutlineProps | undefined) => StyleObject;
+export declare const accessibilityStyles: StyleObject;

package/esm/helpers/commonStyles.js

@@ -1,3 +1,5 @@
+import { __assign } from "tslib";
+import { borderColor, borderRadius, borderStyle, borderWidth } from './longHandHelpers';
 export var chevronStyles = function (_a, _b) {
     var theme = _a.theme, px2rem = _a.px2rem;
     var $isOpen = _b.$isOpen;
@@ -21,12 +23,7 @@ export var transparentScrollbarStyles = {
     '::-webkit-scrollbar': {
         backgroundColor: 'transparent',
     },
-    '::-webkit-scrollbar-thumb': {
-        backgroundColor: 'darkgrey',
-        border: '4px solid transparent',
-        borderRadius: '8px',
-        backgroundClip: 'padding-box',
-    },
+    '::-webkit-scrollbar-thumb': __assign(__assign(__assign(__assign(__assign({ backgroundColor: 'darkgrey' }, borderRadius('8px')), borderWidth('4px')), borderStyle('solid')), borderColor('transparent')), { backgroundClip: 'padding-box' }),
 };
 export var getOutlineStyles = function (_a, props) {
     var theme = _a.theme;
@@ -46,3 +43,16 @@ export var getFocusVisibleStyles = function (utils, props) {
         ':focus-visible': getOutlineStyles(utils, props),
     });
 };
+export var accessibilityStyles = {
+    position: 'fixed',
+    width: '0px',
+    height: '0px',
+    borderLeftWidth: 0,
+    borderRightWidth: 0,
+    borderTopWidth: 0,
+    borderBottomWidth: 0,
+    padding: 0,
+    overflow: 'hidden',
+    clip: 'rect(0, 0, 0, 0)',
+    clipPath: 'inset(100%)',
+};

package/esm/helpers/index.d.ts

@@ -17,9 +17,10 @@ export declare const add$props: (props: Record<string, unknown>) => Record<strin
  * @param value
  */
 export declare const covertCSSVariablesToValue: <T extends string | object>(value: T) => T;
+export declare const themeTokenToHex: (token: string) => string | null;
 /**
  * Converts hexadecimal color to RGB or RGBA (if alpha is provided)
  * @param hex hexadecimal color
  * @param alpha opacity
  */
-export declare const hex2rgb: (_hex: string, alpha?: string | undefined) => string | null;
+export declare const hex2rgb: (hex: string, alpha?: string | undefined) => string | null;

package/esm/helpers/index.js

@@ -1,4 +1,5 @@
 import { __assign, __read } from "tslib";
+import { hexToRgb as hexToRgbArr } from './colors';
 /**
  * Omits properties that starts with `$` (Styletron)
  * @param $props properties
@@ -44,22 +45,23 @@ export var covertCSSVariablesToValue = function (value) {
     }
     return value;
 };
+export var themeTokenToHex = function (token) {
+    var hex = covertCSSVariablesToValue(token);
+    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+    var parsed = hex.replace(shorthandRegex, function (m, r, g, b) {
+        return r + r + g + g + b + b;
+    });
+    return parsed;
+};
 /**
  * Converts hexadecimal color to RGB or RGBA (if alpha is provided)
  * @param hex hexadecimal color
  * @param alpha opacity
  */
-export var hex2rgb = function (_hex, alpha) {
-    var hex = covertCSSVariablesToValue(_hex);
-    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
-    var parsed = hex.replace(shorthandRegex, function (m, r, g, b) {
-        return r + r + g + g + b + b;
-    });
-    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(parsed);
-    if (result) {
-        return alpha
-            ? "rgba(".concat(parseInt(result[1], 16), ", ").concat(parseInt(result[2], 16), ", ").concat(parseInt(result[3], 16), ", ").concat(alpha, ")")
-            : "rgb(".concat(parseInt(result[1], 16), ", ").concat(parseInt(result[2], 16), ", ").concat(parseInt(result[3], 16), ")");
-    }
-    return null;
+export var hex2rgb = function (hex, alpha) {
+    var convertedHex = covertCSSVariablesToValue(hex);
+    if (!/^#[0-9a-f]{6}$/i.test(convertedHex))
+        return null;
+    var parsed = hexToRgbArr(convertedHex);
+    return alpha ? "rgba(".concat(parsed.join(', '), ", ").concat(alpha, ")") : "rgb(".concat(parsed.join(', '), ")");
 };

package/esm/helpers/styletron.d.ts

@@ -1,12 +0,0 @@
-/**
- * @deprecated use spaceweb/styled
- */
-export declare const styled: import("baseui").StyledFn<ThemeT>;
-/**
- * @deprecated
- */
-export declare const withStyle: import("baseui").WithStyleFn<ThemeT>;
-/**
- * @deprecated use spaceweb/useStyle
- */
-export declare const useStyletron: () => [(arg: import("styletron-standard").StyleObject) => string, ThemeT];

package/esm/helpers/styletron.js

@@ -1,13 +0,0 @@
-import { createThemedStyled, createThemedUseStyletron, createThemedWithStyle } from 'baseui';
-/**
- * @deprecated use spaceweb/styled
- */
-export var styled = createThemedStyled(); // remove once spaceweb/styled provides props to style callback
-/**
- * @deprecated
- */
-export var withStyle = createThemedWithStyle();
-/**
- * @deprecated use spaceweb/useStyle
- */
-export var useStyletron = createThemedUseStyletron();

package/esm/helpers/themeHelpers.d.ts

@@ -1,4 +1,6 @@
 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 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,5 +1,7 @@
+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'); };
 export var getComponentTheme = function (theme, componentName) { return theme[componentName]; };
 var sizeAdapter = {
+    xxxxs: 'sizeXxxxs',
     xxxs: 'sizeXxxs',
     xxs: 'sizeXxs',
     xs: 'sizeXs',
@@ -17,3 +19,15 @@ export var getComponentSizeTheme = function (theme, componentName, size, default
     var componentTheme = (_a = getComponentTheme(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 getDefaultSize = function (theme) {
+    switch (theme.density) {
+        case 'COMFORTABLE':
+            return 'md';
+        case 'SPACIOUS':
+            return 'md';
+        case 'COMPACT':
+            return 'xxxs';
+        default:
+            return 'md';
+    }
+};

package/esm/hooks/useAutoFocus.d.ts

@@ -1,9 +1,8 @@
-import * as React from 'react';
-import { InputProps } from '../input';
-import { TextareaProps } from '../textarea';
-declare type UseAutoFocus = {
-    (props: Pick<InputProps, 'autoFocus' | 'inputRef'>): React.RefObject<HTMLInputElement>;
-    (props: Pick<TextareaProps, 'autoFocus' | 'inputRef'>): React.RefObject<HTMLTextAreaElement>;
+import { RefObject, Ref } from 'react';
+import { FocusPosition } from '../input';
+declare type Params<T> = {
+    autoFocus?: FocusPosition;
+    inputRef?: Ref<T>;
 };
-declare const useAutoFocus: UseAutoFocus;
+declare const useAutoFocus: <T extends HTMLTextAreaElement | HTMLInputElement>({ autoFocus, inputRef, }: Params<T>) => RefObject<T>;
 export default useAutoFocus;

package/esm/hooks/useAutoFocus.js

@@ -1,26 +1,26 @@
-import * as React from 'react';
+import { useEffect } from 'react';
+import { useCombineRefObjects } from './useCombinedRef';
 var __DEV__ = process.env.NODE_ENV !== 'production';
 var useAutoFocus = function (_a) {
     var autoFocus = _a.autoFocus, inputRef = _a.inputRef;
-    var ownRef = React.useRef(null);
-    var ref = inputRef !== null && inputRef !== void 0 ? inputRef : ownRef;
-    React.useEffect(function () {
-        if (!ref.current || typeof autoFocus === 'undefined') {
+    var refObj = useCombineRefObjects(inputRef);
+    useEffect(function () {
+        if (!refObj.current || typeof autoFocus === 'undefined') {
             return;
         }
         var position;
         switch (typeof autoFocus) {
             case 'boolean':
                 if (autoFocus) {
-                    position = ref.current.value.length;
+                    position = refObj.current.value.length;
                 }
                 else {
                     return;
                 }
                 break;
             case 'number':
-                if (autoFocus >= ref.current.value.length) {
-                    position = ref.current.value.length;
+                if (autoFocus >= refObj.current.value.length) {
+                    position = refObj.current.value.length;
                 }
                 else if (autoFocus >= 0) {
                     position = autoFocus;
@@ -34,7 +34,7 @@ var useAutoFocus = function (_a) {
                     position = 0;
                 }
                 else if (autoFocus === 'end') {
-                    position = ref.current.value.length;
+                    position = refObj.current.value.length;
                 }
                 else {
                     return;
@@ -44,15 +44,21 @@ var useAutoFocus = function (_a) {
                 position = 0;
         }
         try {
-            ref.current.focus();
-            ref.current.setSelectionRange(position, position);
+            refObj.current.focus({ preventScroll: true });
+            refObj.current.setSelectionRange(position, position);
+            // moves cursor at the end of the text in input & textarea
+            // this would have been handled by browser, but we have to do it explicitly because of preventScroll option in ref.focus
+            if (position === refObj.current.value.length) {
+                refObj.current.scrollLeft = refObj.current.scrollWidth;
+                refObj.current.scrollTop = refObj.current.scrollHeight;
+            }
         }
         catch (err) {
             if (__DEV__) {
                 console.error(err);
             }
         }
-    }, [autoFocus]);
-    return ref;
+    }, [autoFocus, refObj]);
+    return refObj;
 };
 export default useAutoFocus;

package/esm/hooks/useCombinedRef.d.ts

@@ -2,5 +2,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 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>;
 export default useCombinedRefs;

package/esm/hooks/useCombinedRef.js

@@ -1,5 +1,6 @@
 import { __read, __spreadArray } from "tslib";
 import { useCallback } from 'react';
+import * as React from 'react';
 export function combineRefs() {
     var refs = [];
     for (var _i = 0; _i < arguments.length; _i++) {
@@ -18,6 +19,38 @@ export function combineRefs() {
         });
     };
 }
+export function useCombineRefObjects() {
+    var refs = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        refs[_i] = arguments[_i];
+    }
+    var targetRef = React.useRef(null);
+    React.useEffect(function () {
+        refs.forEach(function (ref) {
+            if (!ref)
+                return;
+            if (typeof ref === 'function') {
+                ref(targetRef.current);
+            }
+            else {
+                ref.current = targetRef.current;
+            }
+        });
+        return function () {
+            refs.forEach(function (ref) {
+                if (!ref)
+                    return;
+                if (typeof ref === 'function') {
+                    ref(targetRef.current);
+                }
+                else {
+                    ref.current = targetRef.current;
+                }
+            });
+        };
+    }, __spreadArray([], __read(refs), false)); // eslint-disable-line react-hooks/exhaustive-deps
+    return targetRef;
+}
 /*
  * combines multiple refs to single MutableRefObject - when one wants to assign same element/instance to multiple refs
  * https://github.com/facebook/react/issues/13029#issue-331682836

package/esm/hooks/useFocusVisible.js

@@ -1,6 +1,6 @@
 import { __read } from "tslib";
 import { useState, useCallback } from 'react';
-import { isFocusVisible } from 'baseui/utils/focusVisible';
+import { isFocusVisible } from '../baseui/utils/focusVisible';
 import useCombinedHandler from './useCombinedHandler';
 export var useFocusVisible = function (props) {
     var _a = __read(useState(false), 2), $isFocusVisible = _a[0], setIsFocusVisible = _a[1];

package/esm/hooks/useHasMounted.d.ts

@@ -0,0 +1,2 @@
+declare const useHasMounted: () => boolean;
+export { useHasMounted };

package/esm/hooks/useHasMounted.js

@@ -0,0 +1,11 @@
+import { __read } from "tslib";
+import { useEffect } from 'react';
+import { useTransitionState } from './useTransitionState';
+var useHasMounted = function () {
+    var _a = __read(useTransitionState(false), 2), hasMounted = _a[0], setHasMounted = _a[1];
+    useEffect(function () {
+        setHasMounted(true);
+    }, [setHasMounted]);
+    return hasMounted;
+};
+export { useHasMounted };

package/esm/hooks/useIsMobileDevice.d.ts

@@ -0,0 +1 @@
+export declare const useIsMobileDevice: () => boolean;

package/esm/hooks/useIsMobileDevice.js

@@ -0,0 +1,6 @@
+import { useTheme } from '../theme';
+import useMedia from './useMatchMedia';
+export var useIsMobileDevice = function () {
+    var currentTheme = useTheme();
+    return useMedia("(max-width: ".concat(currentTheme.theme.screens.md, ")"), false);
+};

package/esm/hooks/useMatchMedia.d.ts

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

package/esm/hooks/useMatchMedia.js

@@ -0,0 +1,49 @@
+import { __read } from "tslib";
+import { useEffect, useState } from 'react';
+export var isBrowser = typeof window !== 'undefined';
+var getInitialState = function (query, defaultState) {
+    // Prevent a React hydration mismatch when a default value is provided by not defaulting to window.matchMedia(query).matches.
+    if (defaultState !== undefined) {
+        return defaultState;
+    }
+    if (isBrowser) {
+        return window.matchMedia(query).matches;
+    }
+    // A default value has not been provided, and you are rendering on the server, warn of a possible hydration mismatch when defaulting to false.
+    if (process.env.NODE_ENV !== 'production') {
+        console.warn('`useMedia` When server side rendering, defaultState should be defined to prevent a hydration mismatches.');
+    }
+    return false;
+};
+var useMedia = function (query, defaultState) {
+    var _a = __read(useState(getInitialState(query, defaultState)), 2), state = _a[0], setState = _a[1];
+    useEffect(function () {
+        var mounted = true;
+        var mediaQueryList = window.matchMedia(query);
+        var onChange = function () {
+            if (!mounted) {
+                return;
+            }
+            setState(!!mediaQueryList.matches);
+        };
+        // 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 {
+            mediaQueryList.addListener(onChange);
+        }
+        setState(mediaQueryList.matches);
+        return function () {
+            mounted = false;
+            if ('removeEventListener' in mediaQueryList) {
+                mediaQueryList.removeEventListener('change', onChange);
+            }
+            else {
+                mediaQueryList.removeListener(onChange);
+            }
+        };
+    }, [query]);
+    return state;
+};
+export default useMedia;

package/esm/hooks/usePreferredReducedMotion.d.ts

@@ -0,0 +1,2 @@
+declare const usePreferredReducedMotion: () => boolean;
+export default usePreferredReducedMotion;

package/esm/hooks/usePreferredReducedMotion.js

@@ -0,0 +1,9 @@
+import { useMemo } from 'react';
+var usePreferredReducedMotion = function () {
+    return useMemo(function () {
+        return typeof window !== 'undefined' &&
+            'matchMedia' in window &&
+            window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    }, []);
+};
+export default usePreferredReducedMotion;

package/esm/hooks/useTransitionState.d.ts

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

package/esm/hooks/useTransitionState.js

@@ -0,0 +1,21 @@
+import { __read, __spreadArray } from "tslib";
+import { useCallback, useState, startTransition } from 'react';
+// eslint-disable-next-line arrow-parens
+export var useTransitionState = function () {
+    var params = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        params[_i] = arguments[_i];
+    }
+    var _a = __read(useState.apply(void 0, __spreadArray([], __read(params), false)), 2), state = _a[0], setState = _a[1];
+    var setTransitionSet = useCallback(function (val) {
+        if (startTransition) {
+            startTransition(function () {
+                setState(val);
+            });
+        }
+        else {
+            setState(val);
+        }
+    }, []);
+    return [state, setTransitionSet];
+};

package/esm/hooks/useUniqueId.d.ts

@@ -1,3 +1,6 @@
+import * as React from 'react';
 declare const useUniqueId: () => string;
-export declare const getUniqueId: () => string;
+export declare const UniqueIdConsumer: ({ children }: {
+    children: (id: string) => React.ReactElement;
+}) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 export default useUniqueId;

package/esm/hooks/useUniqueId.js

@@ -1,6 +1,8 @@
-import _uniqueId from 'lodash/uniqueId';
-import { useMemo } from 'react';
-var PREFIX = 'sw-id--';
-var useUniqueId = function () { return useMemo(function () { return _uniqueId(PREFIX); }, []); };
-export var getUniqueId = function () { return _uniqueId(PREFIX); };
+import { useUID as useReactUID } from 'react-uid';
+import * as React from 'react';
+var useUniqueId = React.useId ? function () { return React.useId(); } : function () { return useReactUID(); };
+export var UniqueIdConsumer = function (_a) {
+    var children = _a.children;
+    return children(useUniqueId());
+};
 export default useUniqueId;

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

@@ -1,6 +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 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));
 }

package/esm/icon/components/alert.js

@@ -1,6 +1,8 @@
 import { __assign } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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));
 }

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

@@ -1,6 +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 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));
 }

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

@@ -1,6 +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 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));
 }

package/esm/icon/components/chevron-left.d.ts

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

package/esm/icon/components/chevron-left.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 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));
+}

package/esm/icon/components/chevron-right.d.ts

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

package/esm/icon/components/chevron-right.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 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));
+}

package/esm/icon/components/close.js

@@ -1,6 +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 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));
 }