@sprinklrjs/spaceweb 11.0.0 → 12.14.4

package/esm/utils/intlNumberFormatUtils/types.d.ts

@@ -0,0 +1,21 @@
+export declare const NUMBER_VARIANTS: {
+    readonly EXPANDED_AUTO_FORMAT: "expandedAutoFormat";
+    readonly COMPACT_AUTO_FORMAT: "compactAutoFormat";
+    readonly EXPANDED_DECIMAL_FORMAT: "expandedDecimalFormat";
+    readonly COMPACT_DECIMAL_FORMAT: "compactDecimalFormat";
+};
+export declare type ExpandedAutoFormat = {
+    type: typeof NUMBER_VARIANTS.EXPANDED_AUTO_FORMAT;
+};
+export declare type CompactAutoFormat = {
+    type: typeof NUMBER_VARIANTS.COMPACT_AUTO_FORMAT;
+};
+export declare type ExpandedDecimalFormat = {
+    type: typeof NUMBER_VARIANTS.EXPANDED_DECIMAL_FORMAT;
+    decimalDigits: number;
+};
+export declare type CompactDecimalFormat = {
+    type: typeof NUMBER_VARIANTS.COMPACT_DECIMAL_FORMAT;
+    decimalDigits: number;
+};
+export declare type NumberVariant = ExpandedAutoFormat | CompactAutoFormat | ExpandedDecimalFormat | CompactDecimalFormat;

package/esm/utils/intlNumberFormatUtils/types.js

@@ -0,0 +1,6 @@
+export var NUMBER_VARIANTS = {
+    EXPANDED_AUTO_FORMAT: 'expandedAutoFormat',
+    COMPACT_AUTO_FORMAT: 'compactAutoFormat',
+    EXPANDED_DECIMAL_FORMAT: 'expandedDecimalFormat',
+    COMPACT_DECIMAL_FORMAT: 'compactDecimalFormat',
+};

package/form-control/form-control.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { FormControlProps } from './types';
-declare const FormControl: ({ overrides, label, caption, disabled, error, positive, htmlFor, children, intent, required, layout, $as, className, subText, subTextAsIcon, }: FormControlProps) => React.ReactElement;
+declare const FormControl: React.ForwardRefExoticComponent<FormControlProps & React.RefAttributes<HTMLElement>>;
 export { FormControl };

package/form-control/form-control.js

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormControl = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var uniqueId_1 = (0, tslib_1.__importDefault)(require("lodash/uniqueId"));
 var react_1 = require("react");
 var React = (0, tslib_1.__importStar)(require("react"));
+var react_uid_1 = require("react-uid");
 var helpers_1 = require("../helpers");
 var stack_1 = require("../stack");
 var info_1 = (0, tslib_1.__importDefault)(require("../icon/components/info"));
@@ -26,32 +26,37 @@ function chooseRenderedHint(caption, error, positive, sharedProps) {
     }
     return null;
 }
-var FormControl = function (_a) {
+var FormControl = (0, react_1.forwardRef)(function (_a, ref) {
     var overrides = _a.overrides, label = _a.label, caption = _a.caption, disabled = _a.disabled, error = _a.error, positive = _a.positive, htmlFor = _a.htmlFor, children = _a.children, intent = _a.intent, required = _a.required, layout = _a.layout, $as = _a.$as, className = _a.className, subText = _a.subText, subTextAsIcon = _a.subTextAsIcon;
     var onlyChildProps = React.Children.only(children).props;
-    var a11yCaptionId = (0, react_1.useRef)((0, uniqueId_1.default)('sw-id-'));
+    var a11yCaptionId = (0, react_uid_1.useUID)();
+    var a11LabelId = (0, react_uid_1.useUID)();
+    var a11SubTextId = (0, react_uid_1.useUID)();
+    var fieldUniqueId = (0, react_uid_1.useUID)();
     // First try to infer id from props or children. Create new id if needed.
-    var a11yFieldId = (0, react_1.useRef)(htmlFor || onlyChildProps.id || (0, uniqueId_1.default)('sw-id-'));
-    var sharedProps = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, helpers_1.add$props)({ required: required, layout: layout, intent: intent, disabled: disabled })), { $error: !!error, $positive: !!positive });
+    var a11yFieldId = htmlFor || onlyChildProps.id || fieldUniqueId;
+    var sharedProps = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, helpers_1.add$props)({ required: required, layout: layout, intent: intent, disabled: disabled })), { $error: !!error, $positive: !!positive, $hasSubText: !!subText, $subTextAsIcon: subTextAsIcon });
     var hint = chooseRenderedHint(caption, error, positive, sharedProps);
     var hintEl = intent === 'error' && (caption || error) ? ((0, jsx_runtime_1.jsxs)(stack_1.Stack, (0, tslib_1.__assign)({ direction: "horizontal", gap: 2, shrink: true }, { children: [(0, jsx_runtime_1.jsx)(error_clr_1.default, { size: 14 }, void 0), (0, jsx_runtime_1.jsx)(stack_1.StackItem, { children: hint }, void 0)] }), void 0)) : (hint);
     var _b = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.LabelContainer, styled_component_1.StyledLabelContainer), 2), LabelContainer = _b[0], labelContainerProps = _b[1], _c = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Label, styled_component_1.StyledLabel), 2), Label = _c[0], labelProps = _c[1], _d = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.RequiredDot, styled_component_1.StyledRequiredDot), 2), RequiredDot = _d[0], requiredDotProps = _d[1], _e = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Root, styled_component_1.StyledRoot), 2), Root = _e[0], rootProps = _e[1], _f = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.SubText, styled_component_1.StyledSubText), 2), SubText = _f[0], subTextProps = _f[1], _g = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.InfoIconContainer, styled_component_1.StyledInfoIconContainer), 2), InfoIconContainer = _g[0], infoIconContainerProps = _g[1], _h = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.ControlContainer, styled_component_1.StyledControlContainer), 2), ControlContainer = _h[0], controlContainerProps = _h[1], _j = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Caption, styled_component_1.StyledCaption), 2), Caption = _j[0], captionProps = _j[1], _k = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.SubTextTooltip, tooltip_1.StatefulTooltip), 2), SubTextTooltip = _k[0], subTextTooltipProps = _k[1];
     var formControlProviderValue = (0, react_1.useMemo)(function () { return ({ intent: intent }); }, [intent]);
     var shouldRenderSubTextInTooltip = layout === 'horizontal' || subTextAsIcon;
-    return ((0, jsx_runtime_1.jsx)(context_1.FormControlProvider, (0, tslib_1.__assign)({ value: formControlProviderValue }, { children: (0, jsx_runtime_1.jsxs)(Root, (0, tslib_1.__assign)({ "data-testid": "form-control", "data-spaceweb": "form-control", className: className, "$as": $as }, sharedProps, rootProps, { children: [label && ((0, jsx_runtime_1.jsxs)(LabelContainer, (0, tslib_1.__assign)({ "data-testid": "form-control-label-container" }, sharedProps, labelContainerProps, { children: [(0, jsx_runtime_1.jsx)(Label, (0, tslib_1.__assign)({ "data-spaceweb": "form-control-label", htmlFor: a11yFieldId.current }, sharedProps, labelProps, { children: typeof label === 'function' ? label(sharedProps) : label }), void 0), required && (0, jsx_runtime_1.jsx)(RequiredDot, (0, tslib_1.__assign)({ "data-testid": "form-required" }, requiredDotProps), void 0), subText && shouldRenderSubTextInTooltip ? ((0, jsx_runtime_1.jsx)(SubTextTooltip, (0, tslib_1.__assign)({ content: subText, size: "md" }, subTextTooltipProps, { children: (0, jsx_runtime_1.jsx)(InfoIconContainer, (0, tslib_1.__assign)({}, infoIconContainerProps, { children: (0, jsx_runtime_1.jsx)(info_1.default, { className: "h-2 w-2" }, void 0) }), void 0) }), void 0)) : null] }), void 0)), subText && !shouldRenderSubTextInTooltip ? ((0, jsx_runtime_1.jsx)(SubText, (0, tslib_1.__assign)({}, subTextProps, { children: typeof subText === 'function' ? subText(sharedProps) : subText }), void 0)) : null, (0, jsx_runtime_1.jsxs)(ControlContainer, (0, tslib_1.__assign)({ "data-spaceweb": "form-control-container" }, sharedProps, controlContainerProps, { children: [React.Children.map(children, function (child, index) {
+    return ((0, jsx_runtime_1.jsx)(context_1.FormControlProvider, (0, tslib_1.__assign)({ value: formControlProviderValue }, { children: (0, jsx_runtime_1.jsxs)(Root, (0, tslib_1.__assign)({ ref: ref, "data-testid": "form-control", "data-spaceweb": "form-control", className: className, "$as": $as }, sharedProps, rootProps, { children: [label && ((0, jsx_runtime_1.jsxs)(LabelContainer, (0, tslib_1.__assign)({ "data-testid": "form-control-label-container" }, sharedProps, labelContainerProps, { children: [(0, jsx_runtime_1.jsx)(Label, (0, tslib_1.__assign)({ id: a11LabelId, "data-spaceweb": "form-control-label", htmlFor: a11yFieldId }, sharedProps, labelProps, { children: typeof label === 'function' ? label(sharedProps) : label }), void 0), required && (0, jsx_runtime_1.jsx)(RequiredDot, (0, tslib_1.__assign)({ "data-testid": "form-required" }, requiredDotProps), void 0), subText && shouldRenderSubTextInTooltip ? ((0, jsx_runtime_1.jsx)(SubTextTooltip, (0, tslib_1.__assign)({ content: subText, size: "md" }, subTextTooltipProps, { children: (0, jsx_runtime_1.jsx)(InfoIconContainer, (0, tslib_1.__assign)({}, infoIconContainerProps, { children: (0, jsx_runtime_1.jsx)(info_1.default, { className: "h-2 w-2" }, void 0) }), void 0) }), void 0)) : null] }), void 0)), subText && !shouldRenderSubTextInTooltip ? ((0, jsx_runtime_1.jsx)(SubText, (0, tslib_1.__assign)({ id: a11SubTextId }, subTextProps, { children: typeof subText === 'function' ? subText(sharedProps) : subText }), void 0)) : null, (0, jsx_runtime_1.jsxs)(ControlContainer, (0, tslib_1.__assign)({ "data-spaceweb": "form-control-container" }, sharedProps, controlContainerProps, { children: [React.Children.map(children, function (child, index) {
                             if (!child)
                                 return null;
                             var key = child.key || String(index);
                             return React.cloneElement(child, {
                                 key: key,
-                                id: a11yFieldId.current,
-                                'aria-errormessage': error ? a11yCaptionId.current : null,
-                                'aria-describedby': caption || positive ? a11yCaptionId.current : null,
+                                id: a11yFieldId,
+                                'aria-errormessage': error ? a11yCaptionId : null,
+                                'aria-describedby': caption || positive || subText
+                                    ? "".concat(subText ? a11SubTextId : '', " ").concat(caption ? a11yCaptionId : '', " ")
+                                    : null,
                                 'aria-required': required ? 'true' : 'false',
                                 disabled: onlyChildProps.disabled || disabled,
                                 error: typeof onlyChildProps.error !== 'undefined' ? onlyChildProps.error : error,
                                 positive: typeof onlyChildProps.positive !== 'undefined' ? onlyChildProps.positive : positive,
                             });
-                        }), (caption || error || positive) && ((0, jsx_runtime_1.jsx)(Caption, (0, tslib_1.__assign)({ "data-spaceweb": "form-control-caption", id: a11yCaptionId.current }, sharedProps, captionProps, { children: hintEl }), void 0))] }), void 0)] }), void 0) }), void 0));
-};
+                        }), (caption || error || positive) && ((0, jsx_runtime_1.jsx)(Caption, (0, tslib_1.__assign)({ "data-spaceweb": "form-control-caption", id: a11yCaptionId }, sharedProps, captionProps, { children: hintEl }), void 0))] }), void 0)] }), void 0) }), void 0));
+});
 exports.FormControl = FormControl;

package/form-control/styled-component.js

@@ -17,20 +17,31 @@ var getIntentColor = function (_a, _b) {
             return { color: theme.spr.text02 };
     }
 };
-exports.StyledSubText = (0, style_1.styled)('div', 'spr-text-02 typography-l3 mb-1');
+exports.StyledSubText = (0, style_1.styled)('div', 'spr-text-02 mb-1', {
+    fontSize: '13px',
+    lineHeight: '16px',
+    fontWeight: 400,
+});
 exports.StyledInfoIconContainer = (0, style_1.styled)('div', 'spr-ui-03 rounded-full flex items-center justify-center ml-2 flex-shrink-0', function (_a) {
     var px2rem = _a.px2rem;
     return ({ height: px2rem(14), width: px2rem(14) });
 });
-exports.StyledRequiredDot = (0, style_1.styled)('span', 'ml-1 spr-support-error rounded-full h-1 w-1 flex-shrink-0');
+exports.StyledRequiredDot = (0, style_1.styled)('span', 'spr-support-error rounded-full h-1 w-1 flex-shrink-0 ml-1');
 exports.StyledRoot = (0, style_1.styled)('div', 'flex', function (utils, _a) {
     var $layout = _a.$layout;
     return $layout === 'horizontal' ? 'flex-row items-baseline' : 'flex-col';
 });
-exports.StyledCaption = (0, style_1.styled)('div', 'typography-l2 my-1', getIntentColor);
-exports.StyledLabelContainer = (0, style_1.styled)('div', 'flex items-center mb-1 w-full', function (utils, _a) {
+exports.StyledCaption = (0, style_1.styled)('div', 'typography-l2 mt-1', getIntentColor);
+exports.StyledLabelContainer = (0, style_1.styled)('div', 'flex items-center w-full', function (utils, _a) {
     var $layout = _a.$layout;
-    return $layout === 'horizontal' ? 'w-4/24 mr-2' : '';
+    return ($layout === 'horizontal' ? 'w-4/24 mr-2' : '');
+}, function (utils, _a) {
+    var $hasSubText = _a.$hasSubText, $subTextAsIcon = _a.$subTextAsIcon;
+    return (!$hasSubText || $subTextAsIcon ? 'mb-1' : '');
+});
+exports.StyledLabel = (0, style_1.styled)('label', 'spr-text-02', {
+    fontSize: '14px',
+    lineHeight: '18px',
+    fontWeight: 400,
 });
-exports.StyledLabel = (0, style_1.styled)('label', 'typography-l1 text-14 spr-text-02');
 exports.StyledControlContainer = (0, style_1.styled)('div', 'w-full');

package/helpers/ClearIconButton.js

@@ -4,9 +4,11 @@ var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var IconButton_1 = (0, tslib_1.__importDefault)(require("../button/IconButton"));
 var close_1 = (0, tslib_1.__importDefault)(require("../icon/components/close"));
+var locale_1 = require("../locale");
 var ClearIconButton = function (_a) {
     var size = _a.size, $size = _a.$size, $isOpen = _a.$isOpen, props = (0, tslib_1.__rest)(_a, ["size", "$size", "$isOpen"]);
-    return ((0, jsx_runtime_1.jsx)(IconButton_1.default, (0, tslib_1.__assign)({}, props, { overrides: {
+    var locale = (0, locale_1.useLocale)();
+    return ((0, jsx_runtime_1.jsx)(IconButton_1.default, (0, tslib_1.__assign)({ "aria-label": locale.input.clearAriaLabel }, props, { overrides: {
             BaseButton: {
                 style: [
                     'h-5 w-5 spr-text-02 hover:spr-text-01 focus:spr-text-01 hover:spr-ui-03 focus:spr-ui-03 bg-transparent',

package/helpers/StyledTombstone.d.ts

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

package/helpers/StyledTombstone.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledTombstone = void 0;
+var tslib_1 = require("tslib");
+var styled_1 = (0, tslib_1.__importDefault)(require("../style/styled"));
+exports.StyledTombstone = (0, styled_1.default)('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/helpers/baseui/useConvertOverrides.js

@@ -4,10 +4,15 @@ exports.convertOverrideObject = exports.mergeAndConvertOverrides = exports.useCo
 var tslib_1 = require("tslib");
 var reduce_1 = (0, tslib_1.__importDefault)(require("lodash/reduce"));
 var react_1 = require("react");
+var rtl_css_js_1 = (0, tslib_1.__importDefault)(require("rtl-css-js"));
 var overrides_1 = require("../../overrides");
 var _getStyleWithProps_1 = (0, tslib_1.__importDefault)(require("../../style/_getStyleWithProps"));
 var useStyle_1 = (0, tslib_1.__importDefault)(require("../../style/useStyle"));
-var convertOverrideObject = function (override, utils) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, override), { style: function (props) { return (0, _getStyleWithProps_1.default)(utils, props, override.style); } })); };
+var identity = function (x) { return x; };
+var convertOverrideObject = function (override, utils) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, override), { style: function (props) {
+        var decorator = utils.isRTL ? rtl_css_js_1.default : identity;
+        return decorator((0, _getStyleWithProps_1.default)(utils, props, override.style));
+    } })); };
 exports.convertOverrideObject = convertOverrideObject;
 var mergeAndConvertOverrides = function (target, source, utils) {
     if (source === void 0) { source = {}; }

package/helpers/commonStyles.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getFocusVisibleStyles = exports.getOutlineStyles = exports.transparentScrollbarStyles = exports.chevronStyles = void 0;
+var tslib_1 = require("tslib");
+var longHandHelpers_1 = require("./longHandHelpers");
 var chevronStyles = function (_a, _b) {
     var theme = _a.theme, px2rem = _a.px2rem;
     var $isOpen = _b.$isOpen;
@@ -25,12 +27,7 @@ exports.transparentScrollbarStyles = {
     '::-webkit-scrollbar': {
         backgroundColor: 'transparent',
     },
-    '::-webkit-scrollbar-thumb': {
-        backgroundColor: 'darkgrey',
-        border: '4px solid transparent',
-        borderRadius: '8px',
-        backgroundClip: 'padding-box',
-    },
+    '::-webkit-scrollbar-thumb': (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({ backgroundColor: 'darkgrey' }, (0, longHandHelpers_1.borderRadius)('8px')), (0, longHandHelpers_1.borderWidth)('4px')), (0, longHandHelpers_1.borderStyle)('solid')), (0, longHandHelpers_1.borderColor)('transparent')), { backgroundClip: 'padding-box' }),
 };
 var getOutlineStyles = function (_a, props) {
     var theme = _a.theme;

package/helpers/index.d.ts

@@ -17,6 +17,7 @@ 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

package/helpers/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.hex2rgb = exports.covertCSSVariablesToValue = exports.add$props = exports.omit$props = void 0;
+exports.hex2rgb = exports.themeTokenToHex = exports.covertCSSVariablesToValue = exports.add$props = exports.omit$props = void 0;
 var tslib_1 = require("tslib");
 /**
  * Omits properties that starts with `$` (Styletron)
@@ -50,6 +50,15 @@ var covertCSSVariablesToValue = function (value) {
     return value;
 };
 exports.covertCSSVariablesToValue = covertCSSVariablesToValue;
+var themeTokenToHex = function (token) {
+    var hex = (0, exports.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;
+};
+exports.themeTokenToHex = themeTokenToHex;
 /**
  * Converts hexadecimal color to RGB or RGBA (if alpha is provided)
  * @param hex hexadecimal color

package/helpers/themeHelpers.d.ts

@@ -2,3 +2,4 @@ import { Theme } from '@sprinklrjs/spaceweb-themes/types';
 import { Size } from '../types';
 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/helpers/themeHelpers.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getComponentSizeTheme = exports.getComponentTheme = void 0;
+exports.getDefaultSize = exports.getComponentSizeTheme = exports.getComponentTheme = void 0;
 var getComponentTheme = function (theme, componentName) { return theme[componentName]; };
 exports.getComponentTheme = getComponentTheme;
 var sizeAdapter = {
+    xxxxs: 'sizeXxxxs',
     xxxs: 'sizeXxxs',
     xxs: 'sizeXxs',
     xs: 'sizeXs',
@@ -22,3 +23,16 @@ var getComponentSizeTheme = function (theme, componentName, size, defaultSize) {
     return (_b = componentTheme[sizeAdapter[size !== null && size !== void 0 ? size : defaultSize]]) !== null && _b !== void 0 ? _b : componentTheme[sizeAdapter[defaultSize]];
 };
 exports.getComponentSizeTheme = getComponentSizeTheme;
+var getDefaultSize = function (theme) {
+    switch (theme.density) {
+        case 'COMFORTABLE':
+            return 'md';
+        case 'SPACIOUS':
+            return 'md';
+        case 'COMPACT':
+            return 'xxxs';
+        default:
+            return 'md';
+    }
+};
+exports.getDefaultSize = getDefaultSize;

package/hooks/useAutoFocus.js

@@ -48,6 +48,12 @@ var useAutoFocus = function (_a) {
         try {
             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__) {

package/hooks/useMatchMedia.js

@@ -29,11 +29,22 @@ var useMedia = function (query, defaultState) {
             }
             setState(!!mediaQueryList.matches);
         };
-        mediaQueryList.addEventListener('change', onChange);
+        // 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;
-            mediaQueryList.removeEventListener('change', onChange);
+            if ('removeEventListener' in mediaQueryList) {
+                mediaQueryList.removeEventListener('change', onChange);
+            }
+            else {
+                mediaQueryList.removeListener(onChange);
+            }
         };
     }, [query]);
     return state;

package/icon/components/alert-solid.js

@@ -2,8 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
+var style_1 = require("../../style");
 var icon_1 = (0, tslib_1.__importDefault)(require("../icon"));
 function AlertSolid(props) {
+    var _a = (0, style_1.useStyle)(), theme = _a.theme, isRTL = _a.isRTL;
     return ((0, jsx_runtime_1.jsx)(icon_1.default, (0, tslib_1.__assign)({ viewBox: "0 0 14 14", "data-icon-name": "AlertSolid" }, props, { children: (0, jsx_runtime_1.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));
 }
 exports.default = AlertSolid;

package/icon/components/alert.js

@@ -2,8 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
+var style_1 = require("../../style");
 var icon_1 = (0, tslib_1.__importDefault)(require("../icon"));
 function Alert(props) {
+    var _a = (0, style_1.useStyle)(), theme = _a.theme, isRTL = _a.isRTL;
     return ((0, jsx_runtime_1.jsxs)(icon_1.default, (0, tslib_1.__assign)({ viewBox: "0 0 12 12", "data-icon-name": "Alert" }, props, { children: [(0, jsx_runtime_1.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), (0, jsx_runtime_1.jsx)("circle", { cx: "5.904", cy: "8.161", r: ".589" }, void 0), (0, jsx_runtime_1.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));
 }
 exports.default = Alert;

package/icon/components/calendar-solid.js

@@ -2,8 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
+var style_1 = require("../../style");
 var icon_1 = (0, tslib_1.__importDefault)(require("../icon"));
 function CalendarSolid(props) {
+    var _a = (0, style_1.useStyle)(), theme = _a.theme, isRTL = _a.isRTL;
     return ((0, jsx_runtime_1.jsx)(icon_1.default, (0, tslib_1.__assign)({ viewBox: "0 0 15 15", "data-icon-name": "CalendarSolid" }, props, { children: (0, jsx_runtime_1.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));
 }
 exports.default = CalendarSolid;

package/icon/components/chevron-down.js

@@ -2,8 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
+var style_1 = require("../../style");
 var icon_1 = (0, tslib_1.__importDefault)(require("../icon"));
 function ChevronDown(props) {
+    var _a = (0, style_1.useStyle)(), theme = _a.theme, isRTL = _a.isRTL;
     return ((0, jsx_runtime_1.jsx)(icon_1.default, (0, tslib_1.__assign)({ viewBox: "0 0 14 14", "data-icon-name": "ChevronDown" }, props, { children: (0, jsx_runtime_1.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));
 }
 exports.default = ChevronDown;

package/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/icon/components/chevron-left.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var style_1 = require("../../style");
+var icon_1 = (0, tslib_1.__importDefault)(require("../icon"));
+function ChevronLeft(props) {
+    var _a = (0, style_1.useStyle)(), theme = _a.theme, isRTL = _a.isRTL;
+    return ((0, jsx_runtime_1.jsx)(icon_1.default, (0, tslib_1.__assign)({ viewBox: "0 0 14 14", "data-icon-name": "ChevronLeft" }, props, { className: isRTL ? [{ transform: 'scaleX(-1)' }, props.className] : props.className }, { children: (0, jsx_runtime_1.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));
+}
+exports.default = ChevronLeft;

package/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/icon/components/chevron-right.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var style_1 = require("../../style");
+var icon_1 = (0, tslib_1.__importDefault)(require("../icon"));
+function ChevronRight(props) {
+    var _a = (0, style_1.useStyle)(), theme = _a.theme, isRTL = _a.isRTL;
+    return ((0, jsx_runtime_1.jsx)(icon_1.default, (0, tslib_1.__assign)({ viewBox: "0 0 14 14", "data-icon-name": "ChevronRight" }, props, { className: isRTL ? [{ transform: 'scaleX(-1)' }, props.className] : props.className }, { children: (0, jsx_runtime_1.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));
+}
+exports.default = ChevronRight;

package/icon/components/close.js

@@ -2,8 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
+var style_1 = require("../../style");
 var icon_1 = (0, tslib_1.__importDefault)(require("../icon"));
 function Close(props) {
+    var _a = (0, style_1.useStyle)(), theme = _a.theme, isRTL = _a.isRTL;
     return ((0, jsx_runtime_1.jsx)(icon_1.default, (0, tslib_1.__assign)({ viewBox: "0 0 14 14", "data-icon-name": "Close" }, props, { children: (0, jsx_runtime_1.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));
 }
 exports.default = Close;

package/icon/components/error-clr.js

@@ -2,8 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
+var style_1 = require("../../style");
 var icon_1 = (0, tslib_1.__importDefault)(require("../icon"));
 function ErrorClr(props) {
+    var _a = (0, style_1.useStyle)(), theme = _a.theme, isRTL = _a.isRTL;
     return ((0, jsx_runtime_1.jsxs)(icon_1.default, (0, tslib_1.__assign)({ viewBox: "0 0 14 14", "data-icon-name": "ErrorClr" }, props, { children: [(0, jsx_runtime_1.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), (0, jsx_runtime_1.jsx)("path", { fill: "#FFF", d: "M6.69 9.895h.843v.841H6.69zm0-4.624h.843v3.783H6.69z" }, void 0)] }), void 0));
 }
 exports.default = ErrorClr;

package/icon/components/error-solid.js

@@ -2,8 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
+var style_1 = require("../../style");
 var icon_1 = (0, tslib_1.__importDefault)(require("../icon"));
 function ErrorSolid(props) {
+    var _a = (0, style_1.useStyle)(), theme = _a.theme, isRTL = _a.isRTL;
     return ((0, jsx_runtime_1.jsx)(icon_1.default, (0, tslib_1.__assign)({ viewBox: "0 0 14 11.77", "data-icon-name": "ErrorSolid" }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M13.87 10.4 7.77.42a.9.9 0 0 0-1.54 0L.13 10.4a.9.9 0 0 0 .78 1.38h12.18a.9.9 0 0 0 .78-1.38zM6.49 3.44a.46.46 0 0 1 .51-.4.46.46 0 0 1 .5.4v2.83a.46.46 0 0 1-.5.4.46.46 0 0 1-.5-.4zM7 9.29a.76.76 0 1 1 .76-.76.76.76 0 0 1-.76.76z", fillRule: "evenodd" }, void 0) }), void 0));
 }
 exports.default = ErrorSolid;

package/icon/components/error.js

@@ -2,8 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
+var style_1 = require("../../style");
 var icon_1 = (0, tslib_1.__importDefault)(require("../icon"));
 function Error(props) {
+    var _a = (0, style_1.useStyle)(), theme = _a.theme, isRTL = _a.isRTL;
     return ((0, jsx_runtime_1.jsxs)(icon_1.default, (0, tslib_1.__assign)({ viewBox: "0 0 14 11.98", "data-icon-name": "Error" }, props, { children: [(0, jsx_runtime_1.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), (0, jsx_runtime_1.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));
 }
 exports.default = Error;

package/icon/components/imagePreview.js

@@ -2,8 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
+var style_1 = require("../../style");
 var icon_1 = (0, tslib_1.__importDefault)(require("../icon"));
 function ImagePreview(props) {
+    var _a = (0, style_1.useStyle)(), theme = _a.theme, isRTL = _a.isRTL;
     return ((0, jsx_runtime_1.jsxs)(icon_1.default, (0, tslib_1.__assign)({ viewBox: "0 0 14 14", "data-icon-name": "ImagePreview" }, props, { children: [(0, jsx_runtime_1.jsx)("circle", { fillRule: "evenodd", clipRule: "evenodd", cx: "12.5", cy: "3.35", r: "1.5" }, void 0), (0, jsx_runtime_1.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));
 }
 exports.default = ImagePreview;

package/icon/components/info.js

@@ -2,8 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
+var style_1 = require("../../style");
 var icon_1 = (0, tslib_1.__importDefault)(require("../icon"));
 function Info(props) {
+    var _a = (0, style_1.useStyle)(), theme = _a.theme, isRTL = _a.isRTL;
     return ((0, jsx_runtime_1.jsx)(icon_1.default, (0, tslib_1.__assign)({ viewBox: "0 0 14 14", "data-icon-name": "Info" }, props, { children: (0, jsx_runtime_1.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));
 }
 exports.default = Info;

package/icon/components/play-video.js

@@ -2,8 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
+var style_1 = require("../../style");
 var icon_1 = (0, tslib_1.__importDefault)(require("../icon"));
 function PlayVideo(props) {
+    var _a = (0, style_1.useStyle)(), theme = _a.theme, isRTL = _a.isRTL;
     return ((0, jsx_runtime_1.jsxs)(icon_1.default, (0, tslib_1.__assign)({ viewBox: "0 0 12 12", "data-icon-name": "PlayVideo" }, props, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M6 12c-3.309 0-6-2.691-6-6s2.691-6 6-6 6 2.691 6 6-2.691 6-6 6zM6 .5A5.506 5.506 0 00.5 6c0 3.032 2.467 5.5 5.5 5.5 3.032 0 5.5-2.468 5.5-5.5C11.5 2.967 9.032.5 6 .5z" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M4.624 3.906l3.533 2.04c.08.046.08.163 0 .21l-3.533 2.04a.121.121 0 01-.182-.106V4.011c0-.093.101-.152.182-.105z" }, void 0)] }), void 0));
 }
 exports.default = PlayVideo;

package/icon/components/reset-color.d.ts

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

package/icon/components/reset-color.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var style_1 = require("../../style");
+var icon_1 = (0, tslib_1.__importDefault)(require("../icon"));
+function ResetColor(props) {
+    var _a = (0, style_1.useStyle)(), theme = _a.theme, isRTL = _a.isRTL;
+    return ((0, jsx_runtime_1.jsx)(icon_1.default, (0, tslib_1.__assign)({ viewBox: "0 0 12 12", "data-icon-name": "ResetColor" }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M4.44444 1.66669L4.69634 1.30338C5.11546 0.698908 6.02178 0.738542 6.38652 1.3773L7.57013 3.45004C8.31387 4.7577 8.83652 6.0973 9.18519 7.22231L4.44444 1.66669ZM3.14308 4.28626L1.10565 1.99387C0.677217 1.51182 1.01942 0.749859 1.66434 0.749859C1.87784 0.749859 2.08116 0.841161 2.223 1.00074L10.8943 10.756C11.3227 11.238 10.9806 12 10.3357 12C10.1222 12 9.91885 11.9087 9.77701 11.7491L8.73097 10.5722C7.94302 11.4637 6.73598 12 5.6 12C3.68 12 1.6 10.5469 1.6 8.33438C1.6 6.89807 2.30094 5.71492 3.14308 4.28626Z" }, void 0) }), void 0));
+}
+exports.default = ResetColor;

package/icon/components/search.js

@@ -2,8 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
+var style_1 = require("../../style");
 var icon_1 = (0, tslib_1.__importDefault)(require("../icon"));
 function Search(props) {
+    var _a = (0, style_1.useStyle)(), theme = _a.theme, isRTL = _a.isRTL;
     return ((0, jsx_runtime_1.jsx)(icon_1.default, (0, tslib_1.__assign)({ viewBox: "0 0 12 12", "data-icon-name": "Search" }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M11.854 11.149L7.75 7.037a4.32 4.32 0 00.946-2.68A4.356 4.356 0 004.348 0a4.357 4.357 0 000 8.713 4.299 4.299 0 002.7-.969l4.102 4.11a.496.496 0 00.704 0 .5.5 0 000-.705zM4.348 7.716a3.36 3.36 0 010-6.719 3.36 3.36 0 010 6.719z" }, void 0) }), void 0));
 }
 exports.default = Search;

package/icon/components/tick.js

@@ -2,8 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
+var style_1 = require("../../style");
 var icon_1 = (0, tslib_1.__importDefault)(require("../icon"));
 function Tick(props) {
+    var _a = (0, style_1.useStyle)(), theme = _a.theme, isRTL = _a.isRTL;
     return ((0, jsx_runtime_1.jsx)(icon_1.default, (0, tslib_1.__assign)({ viewBox: "0 0 14 14", "data-icon-name": "Tick" }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M4.792 12.037a.935.935 0 0 1-.657-.269L.28 7.975A.936.936 0 0 1 1.593 6.64L4.79 9.784l7.615-7.556a.936.936 0 0 1 1.32 1.329l-8.272 8.208a.935.935 0 0 1-.66.272z" }, void 0) }), void 0));
 }
 exports.default = Tick;

package/icon/components/tickCircle-solid.js

@@ -2,8 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
+var style_1 = require("../../style");
 var icon_1 = (0, tslib_1.__importDefault)(require("../icon"));
 function TickCircleSolid(props) {
+    var _a = (0, style_1.useStyle)(), theme = _a.theme, isRTL = _a.isRTL;
     return ((0, jsx_runtime_1.jsx)(icon_1.default, (0, tslib_1.__assign)({ viewBox: "0 0 14 14", "data-icon-name": "TickCircleSolid" }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "m9.53 4.44-3.64 3.6-1.42-1.4a.72.72 0 1 0-1 1.03l1.92 1.9a.72.72 0 0 0 1.01 0l4.14-4.11a.72.72 0 1 0-1.01-1.02zM7 0a7 7 0 1 1-7 7 7 7 0 0 1 7-7z", fillRule: "evenodd" }, void 0) }), void 0));
 }
 exports.default = TickCircleSolid;

package/icon/components/user.js

@@ -2,8 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
+var style_1 = require("../../style");
 var icon_1 = (0, tslib_1.__importDefault)(require("../icon"));
 function User(props) {
+    var _a = (0, style_1.useStyle)(), theme = _a.theme, isRTL = _a.isRTL;
     return ((0, jsx_runtime_1.jsxs)(icon_1.default, (0, tslib_1.__assign)({ viewBox: "0 0 14 14", "data-icon-name": "User" }, props, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M13.823 13.946c.003-.081.024-.159.024-.24a6.847 6.847 0 10-13.694-.001c0 .082.021.16.024.241z" }, void 0), (0, jsx_runtime_1.jsx)("circle", { cx: "7", cy: "2.889", r: "2.835" }, void 0)] }), void 0));
 }
 exports.default = User;

package/icon/components/video-non-playable.js

@@ -2,8 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
+var style_1 = require("../../style");
 var icon_1 = (0, tslib_1.__importDefault)(require("../icon"));
 function VideoNonPlayable(props) {
+    var _a = (0, style_1.useStyle)(), theme = _a.theme, isRTL = _a.isRTL;
     return ((0, jsx_runtime_1.jsx)(icon_1.default, (0, tslib_1.__assign)({ viewBox: "0 0 14 14", "data-icon-name": "VideoNonPlayable" }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M1 3.72v6.56a.092.092 0 00.09.1h.75l-.57 1h-.18A1.095 1.095 0 010 10.28V3.72a1.095 1.095 0 011.09-1.1h5.17l-.57 1h-4.6a.092.092 0 00-.09.1zm13 5.55a.734.734 0 01-.73.73.721.721 0 01-.34-.09L10.47 8.8v1.48a1.095 1.095 0 01-1.09 1.1H3.65l-.91 1.63a.59.59 0 01-.52.31.603.603 0 01-.29-.08.578.578 0 01-.21-.2l.94-1.66.57-1 3.84-6.76.57-1L8.62.9a.191.191 0 00.03-.08.67.67 0 01.18.07.595.595 0 01.23.81l-.51.92h.83a1.095 1.095 0 011.09 1.1v1.46l2.45-1.12a.707.707 0 01.34-.08.721.721 0 01.73.73zM9.48 3.72a.1.1 0 00-.1-.1H7.99l-3.78 6.76h5.17a.1.1 0 00.1-.1zM13 5.13l-2.5 1.14v1.45L13 8.85z" }, void 0) }), void 0));
 }
 exports.default = VideoNonPlayable;

package/index.d.ts

@@ -1,3 +1,5 @@
 export * from './classNames';
 export * from './spacewebProvider';
 export * from './types';
+import rtlCSSJS from 'rtl-css-js';
+export { rtlCSSJS };

package/index.js

@@ -1,6 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.rtlCSSJS = void 0;
 var tslib_1 = require("tslib");
 (0, tslib_1.__exportStar)(require("./classNames"), exports);
 (0, tslib_1.__exportStar)(require("./spacewebProvider"), exports);
 (0, tslib_1.__exportStar)(require("./types"), exports);
+var rtl_css_js_1 = (0, tslib_1.__importDefault)(require("rtl-css-js"));
+exports.rtlCSSJS = rtl_css_js_1.default;