@sprinklrjs/spaceweb 11.0.0 → 12.33.2-rc.1

package/esm/date-time/variants.js

@@ -0,0 +1,84 @@
+var _a;
+import { DATE_TIME_VARIANTS } from './types';
+export var DEFAULT_VARIANT = DATE_TIME_VARIANTS.SHORT_DATE; //dd/mm/yyyy in en_US
+export var VARIANTS_DATE_FORMAT_OPTIONS = (_a = {},
+    _a[DATE_TIME_VARIANTS.SHORT_DATE] = { year: 'numeric', month: 'numeric', day: 'numeric' },
+    _a[DATE_TIME_VARIANTS.MEDIUM_DATE] = {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+    },
+    _a[DATE_TIME_VARIANTS.LONG_DATE] = {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+    },
+    _a[DATE_TIME_VARIANTS.FULL_DATE] = {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        weekday: 'long',
+    },
+    _a[DATE_TIME_VARIANTS.SHORT_TIME] = {
+        hour: 'numeric',
+        minute: 'numeric',
+        hour12: true,
+    },
+    _a[DATE_TIME_VARIANTS.MEDIUM_TIME] = {
+        hour: 'numeric',
+        minute: 'numeric',
+        second: 'numeric',
+        hour12: true,
+    },
+    _a[DATE_TIME_VARIANTS.LONG_TIME] = {
+        hour: 'numeric',
+        minute: 'numeric',
+        second: 'numeric',
+        hour12: false,
+        timeZoneName: 'short',
+    },
+    _a[DATE_TIME_VARIANTS.FULL_TIME] = {
+        hour: 'numeric',
+        minute: 'numeric',
+        second: 'numeric',
+        hour12: false,
+        timeZoneName: 'long',
+    },
+    _a[DATE_TIME_VARIANTS.SHORT_DATE_TIME] = {
+        year: 'numeric',
+        month: 'numeric',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: 'numeric',
+        hour12: true,
+    },
+    _a[DATE_TIME_VARIANTS.MEDIUM_DATE_TIME] = {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: 'numeric',
+        hour12: true,
+    },
+    _a[DATE_TIME_VARIANTS.LONG_DATE_TIME] = {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: 'numeric',
+        second: 'numeric',
+        hour12: true,
+        timeZoneName: 'short',
+    },
+    _a[DATE_TIME_VARIANTS.FULL_DATE_TIME] = {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        weekday: 'long',
+        hour: 'numeric',
+        minute: 'numeric',
+        second: 'numeric',
+        hour12: false,
+        timeZoneName: 'long',
+    },
+    _a);

package/esm/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/esm/form-control/form-control.js

@@ -1,7 +1,6 @@
 import { __assign, __read } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import _uniqueId from 'lodash/uniqueId';
-import { useMemo, useRef } from 'react';
+import { useMemo, forwardRef } from 'react';
 import * as React from 'react';
 import { add$props } from '../helpers';
 import { Stack, StackItem } from '../stack';
@@ -11,6 +10,7 @@ import { useOverrides } from '../overrides';
 import { StatefulTooltip } from '../tooltip';
 import { FormControlProvider } from './context';
 import { StyledCaption, StyledControlContainer, StyledInfoIconContainer, StyledLabel, StyledLabelContainer, StyledRequiredDot, StyledRoot, StyledSubText, } from './styled-component';
+import useUniqueId from '../hooks/useUniqueId';
 function chooseRenderedHint(caption, error, positive, sharedProps) {
     if (error && typeof error !== 'boolean') {
         return typeof error === 'function' ? error(sharedProps) : error;
@@ -23,32 +23,38 @@ function chooseRenderedHint(caption, error, positive, sharedProps) {
     }
     return null;
 }
-var FormControl = function (_a) {
+var FormControl = 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 = useRef(_uniqueId('sw-id-'));
+    var a11yCaptionId = useUniqueId();
+    var a11LabelId = useUniqueId();
+    var a11SubTextId = useUniqueId();
+    var fieldUniqueId = useUniqueId();
     // First try to infer id from props or children. Create new id if needed.
-    var a11yFieldId = useRef(htmlFor || onlyChildProps.id || _uniqueId('sw-id-'));
-    var sharedProps = __assign(__assign({}, add$props({ required: required, layout: layout, intent: intent, disabled: disabled })), { $error: !!error, $positive: !!positive });
+    var a11yFieldId = htmlFor || onlyChildProps.id || fieldUniqueId;
+    var sharedProps = __assign(__assign({}, 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) ? (_jsxs(Stack, __assign({ direction: "horizontal", gap: 2, shrink: true }, { children: [_jsx(ErrorIcon, { size: 14 }, void 0), _jsx(StackItem, { children: hint }, void 0)] }), void 0)) : (hint);
     var _b = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.LabelContainer, StyledLabelContainer), 2), LabelContainer = _b[0], labelContainerProps = _b[1], _c = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Label, StyledLabel), 2), Label = _c[0], labelProps = _c[1], _d = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.RequiredDot, StyledRequiredDot), 2), RequiredDot = _d[0], requiredDotProps = _d[1], _e = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Root, StyledRoot), 2), Root = _e[0], rootProps = _e[1], _f = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.SubText, StyledSubText), 2), SubText = _f[0], subTextProps = _f[1], _g = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.InfoIconContainer, StyledInfoIconContainer), 2), InfoIconContainer = _g[0], infoIconContainerProps = _g[1], _h = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.ControlContainer, StyledControlContainer), 2), ControlContainer = _h[0], controlContainerProps = _h[1], _j = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Caption, StyledCaption), 2), Caption = _j[0], captionProps = _j[1], _k = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.SubTextTooltip, StatefulTooltip), 2), SubTextTooltip = _k[0], subTextTooltipProps = _k[1];
     var formControlProviderValue = useMemo(function () { return ({ intent: intent }); }, [intent]);
     var shouldRenderSubTextInTooltip = layout === 'horizontal' || subTextAsIcon;
-    return (_jsx(FormControlProvider, __assign({ value: formControlProviderValue }, { children: _jsxs(Root, __assign({ "data-testid": "form-control", "data-spaceweb": "form-control", className: className, "$as": $as }, sharedProps, rootProps, { children: [label && (_jsxs(LabelContainer, __assign({ "data-testid": "form-control-label-container" }, sharedProps, labelContainerProps, { children: [_jsx(Label, __assign({ "data-spaceweb": "form-control-label", htmlFor: a11yFieldId.current }, sharedProps, labelProps, { children: typeof label === 'function' ? label(sharedProps) : label }), void 0), required && _jsx(RequiredDot, __assign({ "data-testid": "form-required" }, requiredDotProps), void 0), subText && shouldRenderSubTextInTooltip ? (_jsx(SubTextTooltip, __assign({ content: subText, size: "md" }, subTextTooltipProps, { children: _jsx(InfoIconContainer, __assign({}, infoIconContainerProps, { children: _jsx(InfoIcon, { className: "h-2 w-2" }, void 0) }), void 0) }), void 0)) : null] }), void 0)), subText && !shouldRenderSubTextInTooltip ? (_jsx(SubText, __assign({}, subTextProps, { children: typeof subText === 'function' ? subText(sharedProps) : subText }), void 0)) : null, _jsxs(ControlContainer, __assign({ "data-spaceweb": "form-control-container" }, sharedProps, controlContainerProps, { children: [React.Children.map(children, function (child, index) {
+    var subTextToRender = typeof subText === 'function' ? subText(sharedProps) : subText;
+    return (_jsx(FormControlProvider, __assign({ value: formControlProviderValue }, { children: _jsxs(Root, __assign({ ref: ref, "data-testid": "form-control", "data-spaceweb": "form-control", className: className, "$as": $as }, sharedProps, rootProps, { children: [label && (_jsxs(LabelContainer, __assign({ "data-testid": "form-control-label-container" }, sharedProps, labelContainerProps, { children: [_jsx(Label, __assign({ id: a11LabelId, "data-spaceweb": "form-control-label", htmlFor: a11yFieldId }, sharedProps, labelProps, { children: typeof label === 'function' ? label(sharedProps) : label }), void 0), required && _jsx(RequiredDot, __assign({ "data-testid": "form-required" }, requiredDotProps), void 0), subText && shouldRenderSubTextInTooltip ? (_jsx(SubTextTooltip, __assign({ content: subTextToRender, size: "md" }, subTextTooltipProps, { children: _jsx(InfoIconContainer, __assign({}, infoIconContainerProps, { children: _jsx(InfoIcon, { className: "h-2 w-2" }, void 0) }), void 0) }), void 0)) : null] }), void 0)), subText && !shouldRenderSubTextInTooltip ? (_jsx(SubText, __assign({ id: a11SubTextId }, subTextProps, { children: subTextToRender }), void 0)) : null, _jsxs(ControlContainer, __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) && (_jsx(Caption, __assign({ "data-spaceweb": "form-control-caption", id: a11yCaptionId.current }, sharedProps, captionProps, { children: hintEl }), void 0))] }), void 0)] }), void 0) }), void 0));
-};
+                        }), (caption || error || positive) && (_jsx(Caption, __assign({ "data-spaceweb": "form-control-caption", id: a11yCaptionId }, sharedProps, captionProps, { children: hintEl }), void 0))] }), void 0)] }), void 0) }), void 0));
+});
 export { FormControl };

package/esm/form-control/styled-component.js

@@ -14,20 +14,31 @@ var getIntentColor = function (_a, _b) {
             return { color: theme.spr.text02 };
     }
 };
-export var StyledSubText = styled('div', 'spr-text-02 typography-l3 mb-1');
+export var StyledSubText = styled('div', 'spr-text-02 mb-1', {
+    fontSize: '13px',
+    lineHeight: '16px',
+    fontWeight: 400,
+});
 export var StyledInfoIconContainer = 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) });
 });
-export var StyledRequiredDot = styled('span', 'ml-1 spr-support-error rounded-full h-1 w-1 flex-shrink-0');
+export var StyledRequiredDot = styled('span', 'spr-support-error rounded-full h-1 w-1 flex-shrink-0 ml-1');
 export var StyledRoot = styled('div', 'flex', function (utils, _a) {
     var $layout = _a.$layout;
     return $layout === 'horizontal' ? 'flex-row items-baseline' : 'flex-col';
 });
-export var StyledCaption = styled('div', 'typography-l2 my-1', getIntentColor);
-export var StyledLabelContainer = styled('div', 'flex items-center mb-1 w-full', function (utils, _a) {
+export var StyledCaption = styled('div', 'typography-l2 mt-1', getIntentColor);
+export var StyledLabelContainer = 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' : '');
+});
+export var StyledLabel = styled('label', 'spr-text-02', {
+    fontSize: '14px',
+    lineHeight: '18px',
+    fontWeight: 400,
 });
-export var StyledLabel = styled('label', 'typography-l1 text-14 spr-text-02');
 export var StyledControlContainer = styled('div', 'w-full');

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

@@ -16,16 +16,16 @@ export declare type FormControlOverrides = {
 export declare type FormControlProps = {
     children: React.ReactElement;
     disabled?: boolean;
-    label?: React.ReactNode;
+    label?: React.ReactNode | ((sharedProps: SharedProps) => React.ReactNode);
     /**
      * Help text to render b/w Label and the form field.
      */
-    subText?: React.ReactNode;
+    subText?: React.ReactNode | ((sharedProps: SharedProps) => React.ReactNode);
     /**
      * If true, render info icon and display subText in Tooltip
      */
     subTextAsIcon?: boolean;
-    caption?: React.ReactNode;
+    caption?: React.ReactNode | ((sharedProps: SharedProps) => React.ReactNode);
     error?: boolean | React.ReactNode;
     positive?: React.ReactNode;
     htmlFor?: string;
@@ -43,4 +43,6 @@ export declare type SharedProps = {
     $required: boolean;
     $layout: layout;
     $intent: Intent;
+    $hasSubText: boolean;
+    $subTextAsIcon?: boolean;
 };

package/esm/grid/Col.js

@@ -1,4 +1,4 @@
-import { __assign, __read, __spreadArray } from "tslib";
+import { __assign } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @author Ivan Torres
@@ -7,24 +7,34 @@ import { useMemo } from 'react';
 import { Box } from '../box';
 import useStyle from '../style/useStyle';
 import { filterOwnProps } from './utils';
-var getClassList = function (column, breakpoint) {
-    if (column === void 0) { column = {}; }
+var getGridRange = function (column, breakpointMinWidth) {
+    var _a;
     var colSpan = column.colSpan, colStart = column.colStart, colEnd = column.colEnd, rowSpan = column.rowSpan, rowStart = column.rowStart, rowEnd = column.rowEnd;
-    var classList = [];
-    var prefix = breakpoint ? "".concat(breakpoint, ":") : '';
-    if (colEnd)
-        classList.push("".concat(prefix, "col-end-").concat(colEnd));
-    if (colSpan)
-        classList.push("".concat(prefix, "col-span-").concat(colSpan));
-    if (colStart)
-        classList.push("".concat(prefix, "col-start-").concat(colStart));
-    if (rowEnd)
-        classList.push("".concat(prefix, "row-end-").concat(rowEnd));
-    if (rowSpan)
-        classList.push("".concat(prefix, "row-span-").concat(rowSpan));
-    if (rowStart)
-        classList.push("".concat(prefix, "row-start-").concat(rowStart));
-    return classList;
+    var gridRangeStyle = {};
+    if (typeof colSpan === 'number') {
+        gridRangeStyle.gridColumnStart = "span ".concat(colSpan);
+        gridRangeStyle.gridColumnEnd = "span ".concat(colSpan);
+    }
+    if (typeof rowSpan === 'number') {
+        gridRangeStyle.gridRowStart = "span ".concat(rowSpan);
+        gridRangeStyle.gridRowEnd = "span ".concat(rowSpan);
+    }
+    if (typeof colStart === 'number') {
+        gridRangeStyle.gridColumnStart = colStart;
+    }
+    if (typeof colEnd === 'number') {
+        gridRangeStyle.gridColumnEnd = colEnd;
+    }
+    if (typeof rowStart === 'number') {
+        gridRangeStyle.gridRowStart = rowStart;
+    }
+    if (typeof rowEnd === 'number') {
+        gridRangeStyle.gridRowEnd = rowEnd;
+    }
+    return breakpointMinWidth
+        ? (_a = {},
+            _a["@media screen and (min-width: ".concat(breakpointMinWidth, ")")] = gridRangeStyle,
+            _a) : gridRangeStyle;
 };
 export var Col = function (props) {
     var theme = useStyle().theme;
@@ -32,10 +42,10 @@ export var Col = function (props) {
     var className = props.className, style = props.style, children = props.children;
     var classList = [];
     var breakpoints = useMemo(function () { return Object.keys(screens); }, [screens]);
-    classList = classList.concat.apply(classList, __spreadArray([], __read(getClassList(props)), false));
+    classList.push(getGridRange(props));
     breakpoints.forEach(function (breakpoint) {
         if (props[breakpoint]) {
-            classList = classList.concat.apply(classList, __spreadArray([], __read(getClassList(props[breakpoint], breakpoint)), false));
+            classList.push(getGridRange(props[breakpoint], screens[breakpoint]));
         }
     });
     return (_jsx(Box, __assign({ "data-testid": "col" }, filterOwnProps(breakpoints, props), { className: [classList, className, style] }, { children: children }), void 0));

package/esm/helpers/ClearIconButton.js

@@ -2,9 +2,11 @@ import { __assign, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import IconButton from '../button/IconButton';
 import Close from '../icon/components/close';
+import { useLocale } from '../locale';
 var ClearIconButton = function (_a) {
     var size = _a.size, $size = _a.$size, $isOpen = _a.$isOpen, props = __rest(_a, ["size", "$size", "$isOpen"]);
-    return (_jsx(IconButton, __assign({}, props, { overrides: {
+    var locale = useLocale();
+    return (_jsx(IconButton, __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/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/commonStyles.d.ts

@@ -15,3 +15,4 @@ export declare type OutlineProps = {
 };
 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,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/esm/helpers/index.js

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

package/esm/helpers/styletron.d.ts

@@ -1,23 +0,0 @@
-/// <reference types="react" />
-/**
- * @deprecated use spaceweb/styled
- */
-export declare const styled: {
-    <C extends keyof JSX.IntrinsicElements | import("react").ComponentType<any>, P extends {}, Theme = ThemeT>(component: C, style: import("styletron-standard").StyleObject | ((props: Omit<P, "$theme"> & {
-        $theme: Theme;
-    }) => import("styletron-standard").StyleObject)): import("styletron-react").StyletronComponent<C, P>;
-    <C_1 extends keyof JSX.IntrinsicElements | import("react").ComponentType<any>>(component: C_1, style: import("styletron-standard").StyleObject): import("styletron-react").StyletronComponent<C_1, {}>;
-};
-/**
- * @deprecated
- */
-export declare const withStyle: {
-    <C extends import("styletron-react").StyletronComponent<any, any>, P extends {}, Theme = ThemeT>(component: C, style: import("styletron-standard").StyleObject | ((props: Omit<P, "$theme"> & {
-        $theme: Theme;
-    } & (C extends import("styletron-react").StyletronComponent<infer CC, infer PP> ? PP : never)) => import("styletron-standard").StyleObject)): C extends import("styletron-react").StyletronComponent<infer CC_1, infer PP_1> ? import("styletron-react").StyletronComponent<CC_1, P & PP_1> : never;
-    <C_1 extends import("styletron-react").StyletronComponent<any, any>>(component: C_1, style: import("styletron-standard").StyleObject): C_1;
-};
-/**
- * @deprecated use spaceweb/useStyle
- */
-export declare const useStyletron: () => [(a: 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

@@ -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/esm/helpers/themeHelpers.js

@@ -1,5 +1,6 @@
 export var getComponentTheme = function (theme, componentName) { return theme[componentName]; };
 var sizeAdapter = {
+    xxxxs: 'sizeXxxxs',
     xxxs: 'sizeXxxs',
     xxs: 'sizeXxs',
     xs: 'sizeXs',
@@ -17,3 +18,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.js

@@ -46,6 +46,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/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/useMatchMedia.js

@@ -26,11 +26,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/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));
 }