@sprinklrjs/spaceweb 12.33.2 → 14.11.0

package/list/styled-component.d.ts

@@ -1,10 +1,18 @@
 export declare const LIST_MIN_WIDTH = 150;
-export declare const StyledList: import("../style/styled").StyledComponent;
-export declare const StyledListItem: import("../style/styled").StyledComponent;
-export declare const StyledListItemText: import("../style/styled").StyledComponent;
-export declare const StyledPrimaryText: import("../style/styled").StyledComponent;
-export declare const StyledSecondaryText: import("../style/styled").StyledComponent;
-export declare const StyledListItemDivider: import("../style/styled").StyledComponent;
-export declare const StyledStartEnhancer: import("../style/styled").StyledComponent;
-export declare const StyledEndEnhancer: import("../style/styled").StyledComponent;
-export declare const StyledChildContainer: import("../style/styled").StyledComponent;
+export declare const StyledList: import("../style").StyledComponent;
+export declare const getBackgroundColorThemeOverride: ({ theme }: {
+    theme: any;
+}, { $button, $disabled, $isFocusVisible, $selected }: {
+    $button: any;
+    $disabled: any;
+    $isFocusVisible: any;
+    $selected: any;
+}) => [import("styletron-standard").StyleObject];
+export declare const StyledListItem: import("../style").StyledComponent;
+export declare const StyledListItemText: import("../style").StyledComponent;
+export declare const StyledPrimaryText: import("../style").StyledComponent;
+export declare const StyledSecondaryText: import("../style").StyledComponent;
+export declare const StyledListItemDivider: import("../style").StyledComponent;
+export declare const StyledStartEnhancer: import("../style").StyledComponent;
+export declare const StyledEndEnhancer: import("../style").StyledComponent;
+export declare const StyledChildContainer: import("../style").StyledComponent;

package/list/styled-component.js

@@ -1,84 +1,62 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledChildContainer = exports.StyledEndEnhancer = exports.StyledStartEnhancer = exports.StyledListItemDivider = exports.StyledSecondaryText = exports.StyledPrimaryText = exports.StyledListItemText = exports.StyledListItem = exports.StyledList = exports.LIST_MIN_WIDTH = void 0;
+exports.StyledChildContainer = exports.StyledEndEnhancer = exports.StyledStartEnhancer = exports.StyledListItemDivider = exports.StyledSecondaryText = exports.StyledPrimaryText = exports.StyledListItemText = exports.StyledListItem = exports.getBackgroundColorThemeOverride = exports.StyledList = exports.LIST_MIN_WIDTH = void 0;
 var tslib_1 = require("tslib");
-var classNames_1 = (0, tslib_1.__importDefault)(require("../classNames"));
-var longHandHelpers_1 = require("../helpers/longHandHelpers");
 var themeHelpers_1 = require("../helpers/themeHelpers");
 var style_1 = require("../style");
+var cvaConfigs_1 = require("./cvaConfigs");
 exports.LIST_MIN_WIDTH = 150;
-exports.StyledList = (0, style_1.styled)('ul', 
-// bottom spacing will be added by ListItem
-'box-border spr-ui-01 py-1 px-1 my-0', (0, longHandHelpers_1.borderRadius)('inherit'), function (_a) {
-    var px2rem = _a.px2rem;
-    return ({ minWidth: px2rem(exports.LIST_MIN_WIDTH) });
-}, function (_, _a) {
-    var $showFocusOutline = _a.$showFocusOutline;
-    return ($showFocusOutline ? 'focus-visible:outline-01' : '');
-});
-var backgroundColor = function (_a, _b) {
-    var theme = _a.theme;
-    var $button = _b.$button, $selected = _b.$selected, $disabled = _b.$disabled, $highlighted = _b.$highlighted, $isFocusVisible = _b.$isFocusVisible;
-    var hoverBackgroundColor = (0, themeHelpers_1.getComponentTheme)(theme, 'list').hoverBackgroundColor;
-    var styles = { backgroundColor: theme.spr.ui01 };
+exports.StyledList = (0, style_1.styled)('ul', cvaConfigs_1.listCVA);
+var backgroundColor = function (_, _a) {
+    var $button = _a.$button, $selected = _a.$selected, $disabled = _a.$disabled, $highlighted = _a.$highlighted, $isFocusVisible = _a.$isFocusVisible;
+    var stylesAtomic = ['spr-ui-01'];
     if ($button && !$disabled) {
-        styles[':hover'] = { backgroundColor: hoverBackgroundColor };
+        stylesAtomic.push('hover:spr-ui-05');
         if ($isFocusVisible) {
-            styles[':focus-within'] = { backgroundColor: hoverBackgroundColor };
+            stylesAtomic.push('focus-within:spr-ui-05');
         }
+        stylesAtomic['__useCssInJs'] = 1;
     }
     if (($selected || $highlighted) && !$disabled) {
-        styles.backgroundColor = hoverBackgroundColor;
+        stylesAtomic.push('spr-ui-05');
+    }
+    return stylesAtomic.join(' ');
+};
+var getBackgroundColorThemeOverride = function (_a, _b) {
+    var theme = _a.theme;
+    var $button = _b.$button, $disabled = _b.$disabled, $isFocusVisible = _b.$isFocusVisible, $selected = _b.$selected;
+    var overrideStyleObj = [{}];
+    var listTheme = (0, themeHelpers_1.getComponentTheme)(theme, 'list');
+    if (listTheme) {
+        var buttonSizeThemeStyleObj = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, ((listTheme === null || listTheme === void 0 ? void 0 : listTheme.hoverBackgroundColor) && $button && !$disabled
+            ? {
+                ':hover': { backgroundColor: listTheme.hoverBackgroundColor },
+            }
+            : {})), ((listTheme === null || listTheme === void 0 ? void 0 : listTheme.hoverBackgroundColor) && $isFocusVisible
+            ? {
+                ':focus-within': { backgroundColor: listTheme.hoverBackgroundColor },
+            }
+            : {})), ((listTheme === null || listTheme === void 0 ? void 0 : listTheme.selectedEnhancerBackground) && $selected
+            ? { '::before': { backgroundColor: listTheme.selectedEnhancerBackground } }
+            : {}));
+        overrideStyleObj.push(buttonSizeThemeStyleObj);
     }
-    return styles;
+    return overrideStyleObj;
 };
+exports.getBackgroundColorThemeOverride = getBackgroundColorThemeOverride;
 var getListItemCompactStyles = function (_a) {
     var theme = _a.theme;
     if (theme.density === 'COMPACT')
-        return 'py-1 px-2 typography-l2 rounded-4 mb-0.5 last-child:mb-0';
-    else
-        return 'py-1.5 px-2 typography-l1 rounded-6 mb-0.5 last-child:mb-0';
+        return 'py-1 px-2 text-12 leading-4 font-400 rounded-4 mb-1 last:mb-0';
+    return 'pt-[--sw-padding-block-start] pb-[--sw-padding-block-end] px-2 text-14 leading-150 font-400 rounded-8 mb-1 last:mb-0';
 };
-exports.StyledListItem = (0, style_1.styled)('li', getListItemCompactStyles, function (_a, props) {
-    var getStyle = _a.getStyle, theme = _a.theme;
-    return getStyle((0, classNames_1.default)('relative flex justify-start fill-current spr-ui-01', {
-        'items-start': props.$alignItems === 'start',
-        'items-center': props.$alignItems === 'center',
-        'cursor-pointer': props.$button && !props.$disabled,
-        'spr-text-03 spr-icon-disable cursor-not-allowed': props.$disabled,
-    }));
-}, backgroundColor, 'focus-visible:outline-01 focus-visible:-outline-offset-2 focus-visible:rounded-6', function (_a, props) {
-    var getStyle = _a.getStyle, px2rem = _a.px2rem, theme = _a.theme;
-    var selectedEnhancerBackground = (0, themeHelpers_1.getComponentTheme)(theme, 'list').selectedEnhancerBackground;
-    return (0, tslib_1.__assign)({}, (props.$selected && {
-        '::before': (0, tslib_1.__assign)({ content: '" "', width: px2rem(2), backgroundColor: selectedEnhancerBackground }, getStyle('h-full absolute top-0 left-0')),
-    }));
-});
-exports.StyledListItemText = (0, style_1.styled)('div', 'flex-auto flex flex-col');
-exports.StyledPrimaryText = (0, style_1.styled)('div', 'typography-l1');
-exports.StyledSecondaryText = (0, style_1.styled)('div', 'spr-text-02 typography-l3', function (_a) {
-    var px2rem = _a.px2rem;
-    return ({
-        marginTop: px2rem(2),
-    });
-});
-exports.StyledListItemDivider = (0, style_1.styled)('li', 'block h-px spr-ui-03 mb-0.5 last-child:mb-0');
-exports.StyledStartEnhancer = (0, style_1.styled)('div', 'inline-flex pr-2', function (_a, props) {
-    var getStyle = _a.getStyle;
-    return getStyle((0, classNames_1.default)({
-        'mt-1': props.$alignItems === 'start',
-    }));
-});
-exports.StyledEndEnhancer = (0, style_1.styled)('div', 'inline-flex pl-2', function (_a, props) {
-    var getStyle = _a.getStyle;
-    return getStyle((0, classNames_1.default)({
-        'mt-1': props.$alignItems === 'start',
-    }));
-});
-exports.StyledChildContainer = (0, style_1.styled)('div', 'flex-auto', function (_a, props) {
-    var theme = _a.theme, px2rem = _a.px2rem;
-    return ({
-        fontWeight: props.$selected ? 700 : 400,
-        fontSize: px2rem(13),
-    });
-});
+exports.StyledListItem = (0, style_1.styledWithCssVariables)('li', { '--sw-padding-block-start': '0.55rem', '--sw-padding-block-end': '0.55rem' }, getListItemCompactStyles, cvaConfigs_1.listItemCVA, 
+// @ts-expect-error
+exports.getBackgroundColorThemeOverride);
+exports.StyledListItemText = (0, style_1.styled)('div', cvaConfigs_1.listItemTextCVA);
+exports.StyledPrimaryText = (0, style_1.styled)('div', cvaConfigs_1.primaryTextCVA);
+exports.StyledSecondaryText = (0, style_1.styled)('div', cvaConfigs_1.secondaryTextCVA);
+exports.StyledListItemDivider = (0, style_1.styled)('li', cvaConfigs_1.listItemDividerCVA);
+exports.StyledStartEnhancer = (0, style_1.styled)('div', cvaConfigs_1.startEnhancerCVA);
+exports.StyledEndEnhancer = (0, style_1.styled)('div', cvaConfigs_1.endEnhancerCVA);
+exports.StyledChildContainer = (0, style_1.styled)('div', cvaConfigs_1.childContainerCVA);

package/list/types.d.ts

@@ -2,9 +2,9 @@ import { KeyboardEvent, MouseEvent, ReactNode } from 'react';
 import { Override } from '../overrides/types';
 import { SpacewebComponentProps } from '../types';
 import { StatefulTooltipProps } from '../tooltip';
-export declare type AlignItems = 'start' | 'center';
-export declare type Enhancer<SharedProps> = ReactNode | ((props: SharedProps) => ReactNode);
-export declare type ListItemSharedProps = {
+export type AlignItems = 'start' | 'center';
+export type Enhancer<SharedProps> = ReactNode | ((props: SharedProps) => ReactNode);
+export type ListItemSharedProps = {
     $withStartEnhancer: boolean;
     $withEndEnhancer: boolean;
     $alignItems: AlignItems;
@@ -13,7 +13,7 @@ export declare type ListItemSharedProps = {
     $highlighted: boolean;
     $button: boolean;
 };
-export declare type ListItemProps = SpacewebComponentProps & {
+export type ListItemProps = SpacewebComponentProps & {
     alignItems?: AlignItems;
     autoFocus?: boolean;
     button?: boolean;
@@ -33,7 +33,7 @@ export declare type ListItemProps = SpacewebComponentProps & {
     startEnhancer?: Enhancer<ListItemSharedProps>;
     tooltipContent?: StatefulTooltipProps['content'];
 };
-export declare type ListProps = SpacewebComponentProps & {
+export type ListProps = SpacewebComponentProps & {
     children?: ReactNode;
     virtual?: boolean;
     overrides?: {
@@ -42,9 +42,10 @@ export declare type ListProps = SpacewebComponentProps & {
     scrollElement?: HTMLElement | null;
     overscanCount?: number;
     estimateItemSize?: number;
+    autoScrollToSelectedItem?: boolean;
     $showFocusOutline?: boolean;
 };
-export declare type ListItemTextProps = {
+export type ListItemTextProps = {
     children?: ReactNode;
     overrides?: {
         PrimaryText?: Override<Record<string, any>>;
@@ -53,7 +54,7 @@ export declare type ListItemTextProps = {
     };
     secondary?: ReactNode;
 };
-export declare type DividerProps = SpacewebComponentProps & {
+export type DividerProps = SpacewebComponentProps & {
     /**
      * If true, remove top padding and border. When rendering first subheader of the list.
      */

package/loader/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const DEFAULT_SIZE = 16;
+export declare const DEFAULT_DELAY = 0;

package/loader/constants.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_DELAY = exports.DEFAULT_SIZE = void 0;
+exports.DEFAULT_SIZE = 16;
+exports.DEFAULT_DELAY = 0;

package/loader/index.d.ts

@@ -1,3 +1,4 @@
-export { default as Loader, DEFAULT_SIZE, DEFAULT_DELAY } from './loader';
+export { default as Loader } from './loader';
 export type { SharedProps, LoaderProps, Variant } from './types';
 export { StyledRoot } from './styled-component';
+export { DEFAULT_SIZE, DEFAULT_DELAY } from './constants';

package/loader/index.js

@@ -3,10 +3,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledRoot = exports.DEFAULT_DELAY = exports.DEFAULT_SIZE = exports.Loader = void 0;
+exports.DEFAULT_DELAY = exports.DEFAULT_SIZE = exports.StyledRoot = exports.Loader = void 0;
 var loader_1 = require("./loader");
 Object.defineProperty(exports, "Loader", { enumerable: true, get: function () { return __importDefault(loader_1).default; } });
-Object.defineProperty(exports, "DEFAULT_SIZE", { enumerable: true, get: function () { return loader_1.DEFAULT_SIZE; } });
-Object.defineProperty(exports, "DEFAULT_DELAY", { enumerable: true, get: function () { return loader_1.DEFAULT_DELAY; } });
 var styled_component_1 = require("./styled-component");
 Object.defineProperty(exports, "StyledRoot", { enumerable: true, get: function () { return styled_component_1.StyledRoot; } });
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "DEFAULT_SIZE", { enumerable: true, get: function () { return constants_1.DEFAULT_SIZE; } });
+Object.defineProperty(exports, "DEFAULT_DELAY", { enumerable: true, get: function () { return constants_1.DEFAULT_DELAY; } });

package/loader/loader.d.ts

@@ -1,8 +1,24 @@
 /// <reference types="react" />
-import { LoaderProps } from './types';
-export declare const DEFAULT_SIZE = 16;
-export declare const DEFAULT_DELAY = 0;
-declare const Loader: import("react").ForwardRefExoticComponent<LoaderProps & {
+import type { ClassName } from '../types';
+import type { SharedProps, Variant } from './types';
+declare const Loader: import("react").ForwardRefExoticComponent<Omit<import("react").AllHTMLAttributes<HTMLElement>, "className" | "style"> & {
+    $as?: import("react").ElementType | undefined;
+    className?: ClassName;
+    style?: import("../types").Styles;
+} & {
+    intent?: import("../types").Intent | undefined;
+    variant?: Variant | undefined;
+    size?: number | undefined;
+    delay?: number | undefined;
+    loadingContent?: import("react").ReactNode;
+    overrides?: {
+        Root?: import("../overrides").Override<SharedProps & Record<string, any>> | undefined;
+        Text?: import("../overrides").Override<SharedProps & Record<string, any>> | undefined;
+        Loader?: import("../overrides").Override<SharedProps & Record<string, any>> | undefined;
+        BeatLoaderBall?: import("../overrides").Override<SharedProps & Record<string, any>> | undefined;
+        SpinnerStick?: import("../overrides").Override<SharedProps & Record<string, any>> | undefined;
+    } | undefined;
+} & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;
 export default Loader;

package/loader/loader.js

@@ -1,32 +1,37 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_DELAY = exports.DEFAULT_SIZE = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
+// libs
 var react_1 = require("react");
-var times_1 = (0, tslib_1.__importDefault)(require("lodash/times"));
-var typography_1 = require("../helpers/typography");
-var overrides_1 = require("../overrides");
-var typography_2 = require("../typography");
+var times_1 = tslib_1.__importDefault(require("lodash/times"));
+// component
+var typography_1 = require("../typography");
 var styled_component_1 = require("./styled-component");
-exports.DEFAULT_SIZE = 16;
-exports.DEFAULT_DELAY = 0;
+// utils
+var typography_2 = require("../helpers/typography");
+// hooks
+var overrides_1 = require("../overrides");
+var locale_1 = require("../locale");
+// constants
+var constants_1 = require("./constants");
+var LOADER_COMPONENT = {
+    clip: styled_component_1.StyledClipLoader,
+    spinner: styled_component_1.StyledSpinner,
+    beat: styled_component_1.StyledBeatLoader,
+};
 var Loader = (0, react_1.forwardRef)(function (_a, ref) {
-    var _b = _a.delay, delay = _b === void 0 ? exports.DEFAULT_DELAY : _b, loadingContent = _a.loadingContent, _c = _a.variant, variant = _c === void 0 ? 'beat' : _c, _d = _a.size, size = _d === void 0 ? exports.DEFAULT_SIZE : _d, overrides = _a.overrides, restProps = (0, tslib_1.__rest)(_a, ["delay", "loadingContent", "variant", "size", "overrides"]);
+    var _b;
+    var _c = _a.delay, delay = _c === void 0 ? constants_1.DEFAULT_DELAY : _c, loadingContent = _a.loadingContent, _d = _a.variant, variant = _d === void 0 ? 'beat' : _d, _e = _a.size, size = _e === void 0 ? constants_1.DEFAULT_SIZE : _e, overrides = _a.overrides, _f = _a.intent, intent = _f === void 0 ? 'default' : _f, className = _a.className, style = _a.style, restProps = tslib_1.__rest(_a, ["delay", "loadingContent", "variant", "size", "overrides", "intent", "className", "style"]);
     // should be visible from start if delay is 0
-    var _e = (0, tslib_1.__read)((0, react_1.useState)(!delay), 2), visible = _e[0], updateVisibleState = _e[1];
-    var LoaderComponent;
-    if (variant === 'beat')
-        LoaderComponent = styled_component_1.StyledBeatLoader;
-    else if (variant === 'clip')
-        LoaderComponent = styled_component_1.StyledClipLoader;
-    else
-        LoaderComponent = styled_component_1.StyledSpinner;
-    var _f = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Root, styled_component_1.StyledRoot), 2), Root = _f[0], rootProps = _f[1];
-    var _g = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Text, typography_2.Typography), 2), Text = _g[0], textProps = _g[1];
-    var _h = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Loader, LoaderComponent), 2), LoaderInternal = _h[0], loaderProps = _h[1];
-    var _j = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.BeatLoaderBall, styled_component_1.StyledBeatLoaderBall), 2), BeatLoaderBall = _j[0], beatLoaderBallProps = _j[1];
-    var _k = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.SpinnerStick, styled_component_1.StyledSpinnerStick), 2), SpinnerStick = _k[0], spinnerStickProps = _k[1];
+    var _g = tslib_1.__read((0, react_1.useState)(!delay), 2), visible = _g[0], updateVisibleState = _g[1];
+    var loaderAriaLabel = (0, locale_1.useLocale)().loader.loaderAriaLabel;
+    var LoaderComponent = (_b = LOADER_COMPONENT[variant]) !== null && _b !== void 0 ? _b : styled_component_1.StyledClipLoader;
+    var _h = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Root, styled_component_1.StyledRoot), 2), Root = _h[0], rootProps = _h[1];
+    var _j = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Text, typography_1.Typography), 2), Text = _j[0], textProps = _j[1];
+    var _k = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Loader, LoaderComponent), 2), LoaderInternal = _k[0], loaderProps = _k[1];
+    var _l = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.BeatLoaderBall, styled_component_1.StyledBeatLoaderBall), 2), BeatLoaderBall = _l[0], beatLoaderBallProps = _l[1];
+    var _m = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.SpinnerStick, styled_component_1.StyledSpinnerStick), 2), SpinnerStick = _m[0], spinnerStickProps = _m[1];
     (0, react_1.useEffect)(function () {
         var delayTimer;
         if (delay) {
@@ -39,12 +44,13 @@ var Loader = (0, react_1.forwardRef)(function (_a, ref) {
         $hasLoadingContent: !!loadingContent,
         $variant: variant,
         $size: size,
+        $intent: intent,
     };
-    var content = (0, typography_1.isTypographyNode)(loadingContent)
+    var content = (0, typography_2.isTypographyNode)(loadingContent)
         ? loadingContent
-        : loadingContent && ((0, jsx_runtime_1.jsx)(Text, (0, tslib_1.__assign)({ variant: "bs3" }, sharedProps, textProps, { className: [textProps.className, 'spr-text-02 mt-1'] }, { children: loadingContent }), void 0));
-    // todo: aria-label localization
-    return visible ? ((0, jsx_runtime_1.jsxs)(Root, (0, tslib_1.__assign)({ "data-spaceweb": "loader", "data-testid": "loader" }, sharedProps, restProps, rootProps, { ref: ref }, { children: [(0, jsx_runtime_1.jsxs)(LoaderInternal, (0, tslib_1.__assign)({ "aria-label": "Loading", role: "progressbar", "aria-busy": true }, sharedProps, loaderProps, { children: [variant === 'beat' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(BeatLoaderBall, (0, tslib_1.__assign)({}, sharedProps, { "$index": 1 }, beatLoaderBallProps), void 0), (0, jsx_runtime_1.jsx)(BeatLoaderBall, (0, tslib_1.__assign)({}, sharedProps, { "$index": 2 }, beatLoaderBallProps), void 0), (0, jsx_runtime_1.jsx)(BeatLoaderBall, (0, tslib_1.__assign)({}, sharedProps, { "$index": 3 }, beatLoaderBallProps), void 0)] }, void 0)), variant === 'spinner' && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, times_1.default)(8).map(function (index) { return ((0, jsx_runtime_1.jsx)(SpinnerStick, (0, tslib_1.__assign)({}, sharedProps, { "$index": index + 1 }, spinnerStickProps), index)); }) }, void 0))] }), void 0), content] }), void 0)) : null;
+        : loadingContent && ((0, jsx_runtime_1.jsx)(Text, tslib_1.__assign({ variant: "bs3" }, sharedProps, textProps, { className: [textProps.className, 'spr-text-02 mt-1'] }, { children: loadingContent })));
+    return visible ? ((0, jsx_runtime_1.jsxs)(Root, tslib_1.__assign({ "data-spaceweb": "loader", "data-testid": "loader" }, sharedProps, restProps, rootProps, { style: [style, rootProps === null || rootProps === void 0 ? void 0 : rootProps.style], className: [className, rootProps === null || rootProps === void 0 ? void 0 : rootProps.className], ref: ref }, { children: [(0, jsx_runtime_1.jsxs)(LoaderInternal, tslib_1.__assign({ "aria-label": loaderAriaLabel, role: "progressbar", "aria-busy": true }, sharedProps, loaderProps, { children: [variant === 'beat' && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, times_1.default)(3).map(function (index) { return ((0, jsx_runtime_1.jsx)(BeatLoaderBall, tslib_1.__assign({}, sharedProps, { "$index": index + 1 }, beatLoaderBallProps), index)); }) })), variant === 'spinner' && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, times_1.default)(8).map(function (index) { return ((0, jsx_runtime_1.jsx)(SpinnerStick, tslib_1.__assign({}, sharedProps, { "$index": index + 1 }, spinnerStickProps), index)); }) }))] })), content] }))) : null;
 });
 Loader.displayName = 'Loader';
+Loader.__standard = 'Component';
 exports.default = Loader;

package/loader/styled-component.d.ts

@@ -1,6 +1,8 @@
-export declare const StyledRoot: import("../style/styled").StyledComponent;
-export declare const StyledClipLoader: import("../style/styled").StyledComponent;
-export declare const StyledBeatLoader: import("../style/styled").StyledComponent;
-export declare const StyledBeatLoaderBall: import("../style/styled").StyledComponent;
-export declare const StyledSpinner: import("../style/styled").StyledComponent;
-export declare const StyledSpinnerStick: import("../style/styled").StyledComponent;
+import type { CSSVariablesStyleFn } from '../types';
+export declare const StyledRoot: import("../style").StyledComponent;
+export declare const StyledClipLoader: import("../style").StyledComponent;
+export declare const StyledBeatLoader: import("../style").StyledComponent;
+export declare const StyledBeatLoaderBall: import("../style").StyledComponent;
+export declare const spinnerStickVariable: CSSVariablesStyleFn;
+export declare const StyledSpinner: import("../style").StyledComponent;
+export declare const StyledSpinnerStick: import("../style").StyledComponent;

package/loader/styled-component.js

@@ -1,85 +1,33 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledSpinnerStick = exports.StyledSpinner = exports.StyledBeatLoaderBall = exports.StyledBeatLoader = exports.StyledClipLoader = exports.StyledRoot = void 0;
+exports.StyledSpinnerStick = exports.StyledSpinner = exports.spinnerStickVariable = exports.StyledBeatLoaderBall = exports.StyledBeatLoader = exports.StyledClipLoader = exports.StyledRoot = void 0;
 var tslib_1 = require("tslib");
-var longHandHelpers_1 = require("../helpers/longHandHelpers");
+// components
 var style_1 = require("../style");
-var clipAnimationStyles = function () { return ({
-    animationDuration: '0.75s',
-    animationIterationCount: 'infinite',
-    animationTimingFunction: 'linear',
-    // @ts-ignore animationName can be an object https://www.styletron.org/concepts/#keyframes
-    animationName: {
-        '0%': {
-            transform: 'rotate(0deg) scale(1)',
-        },
-        '50%': {
-            transform: 'rotate(180deg) scale(0.8)',
-        },
-        '100%': {
-            transform: 'rotate(360deg) scale(1)',
-        },
-    },
-}); };
-exports.StyledRoot = (0, style_1.styled)('div', 'inline-flex flex-col items-center spr-text-02');
-exports.StyledClipLoader = (0, style_1.styled)('div', 'border-solid rounded-full box-border', (0, longHandHelpers_1.borderWidth)('3px'), clipAnimationStyles, function (utils, props) {
-    var px2rem = utils.px2rem, theme = utils.theme;
-    var $size = props.$size;
-    return (0, tslib_1.__assign)((0, tslib_1.__assign)({ height: px2rem($size), width: px2rem($size) }, (0, longHandHelpers_1.borderColor)(theme.spr.focus01)), { borderBottomColor: 'transparent' });
-});
-var ballAnimationStyles = function (_, _a) {
-    var $index = _a.$index;
+// constants
+var constants_1 = require("./constants");
+// utils
+var intentHelper_1 = require("../helpers/intentHelper");
+var commonCssVariables = function (_a, _b) {
+    var px2rem = _a.px2rem;
+    var $size = _b.$size;
     return ({
-        animationDuration: '0.7s',
-        animationDelay: $index % 2 ? '0s' : '0.35s',
-        animationIterationCount: 'infinite',
-        animationTimingFunction: 'linear',
-        animationFillMode: 'both',
-        // @ts-ignore animationName can be an object https://www.styletron.org/concepts/#keyframes
-        animationName: {
-            '50%': {
-                transform: 'scale(0.75)',
-                opacity: 0.2,
-            },
-            '100%': {
-                transform: 'scale(1)',
-                opacity: 1,
-            },
-        },
+        '--sw-height': px2rem($size),
+        '--sw-width': px2rem($size),
     });
 };
-exports.StyledBeatLoader = (0, style_1.styled)('div');
-exports.StyledBeatLoaderBall = (0, style_1.styled)('div', 'spr-tooltip-01 rounded-full inline-block', ballAnimationStyles, function (utils, props) {
-    var px2rem = utils.px2rem;
-    var $size = props.$size;
-    return {
-        height: px2rem($size),
-        width: px2rem($size),
-        marginLeft: px2rem(2),
-        marginRight: px2rem(2),
-    };
-});
-var spinnerAnimationStyles = function (_, _a) {
+exports.StyledRoot = (0, style_1.styled)('div', 'inline-flex flex-col items-center spr-text-02');
+var clipCssVariable = function (utils, sharedProps) { return (tslib_1.__assign(tslib_1.__assign({}, commonCssVariables(utils, sharedProps)), { '--sw-border-bottom-color': 'transparent', '--sw-border-top-color': (0, intentHelper_1.intentColor)(utils, sharedProps), '--sw-border-right-color': (0, intentHelper_1.intentColor)(utils, sharedProps), '--sw-border-left-color': (0, intentHelper_1.intentColor)(utils, sharedProps) })); };
+exports.StyledClipLoader = (0, style_1.styledWithCssVariables)('div', clipCssVariable, 'border-solid rounded-full box-border animate-clip border-3 h-[--sw-height] w-[--sw-width]', 'border-b-[--sw-border-bottom-color] border-t-[--sw-border-top-color]' +
+    ' border-r-[--sw-border-right-color] border-l-[--sw-border-left-color]');
+exports.StyledBeatLoader = (0, style_1.styledWithCssVariables)('div', commonCssVariables);
+exports.StyledBeatLoaderBall = (0, style_1.styledWithCssVariables)('div', function (_, _a) {
     var $index = _a.$index;
-    return ({
-        animationDuration: '1000ms',
-        animationDelay: "".concat($index * 125, "ms"),
-        animationIterationCount: 'infinite',
-        animationTimingFunction: 'step-start',
-        // @ts-ignore animationName can be an object https://www.styletron.org/concepts/#keyframes
-        animationName: {
-            '10%': {
-                opacity: 0.125,
-            },
-            '100%': {
-                opacity: 1,
-            },
-        },
-    });
-};
-var spinnerStyles = function (utils, props) {
-    var px2rem = utils.px2rem;
-    var $size = props.$size, index = props.$index;
+    return ($index === 2 ? { '--sw-delay': '0s' } : { '--sw-delay': '0.35s' });
+}, 'rounded-full inline-block forced-colors:border-1 h-[--sw-height] w-[--sw-width] mx-0.5', 'animate-ball delay-[--sw-delay] spr-tooltip-01');
+var spinnerStickVariable = function (_a, _b) {
+    var px2rem = _a.px2rem;
+    var _c = _b.$size, $size = _c === void 0 ? constants_1.DEFAULT_SIZE : _c, index = _b.$index;
     var radius = $size / 2;
     var stickHeight = radius / 2;
     var stickWidth = radius / 4;
@@ -93,30 +41,21 @@ var spinnerStyles = function (utils, props) {
     var yOffset = Math.sin((Math.PI * angle) / 180) * baseRadius;
     var xOffset = Math.cos((Math.PI * angle) / 180) * baseRadius;
     return {
-        top: px2rem(radius + yOffset - stickHeightOffset),
-        left: px2rem(radius + xOffset - stickWidthOffset),
-        transform: "rotate(".concat(angle + 90, "deg)"),
+        '--sw-top': px2rem(radius + yOffset - stickHeightOffset),
+        '--sw-left-directional': px2rem(radius + xOffset - stickWidthOffset),
+        '--sw-transform': "rotate(".concat(angle + 90, "deg)"),
+        '--sw-height': px2rem($size / 4),
+        '--sw-width': px2rem($size / 8),
+        '--sw-delay': "".concat(index * 125, "ms"),
     };
 };
-exports.StyledSpinner = (0, style_1.styled)('div', function (utils, props) {
-    var px2rem = utils.px2rem;
-    var $size = props.$size;
-    return {
-        height: px2rem($size),
-        width: px2rem($size),
-        position: 'relative',
-    };
-});
-exports.StyledSpinnerStick = (0, style_1.styled)('div', 'box-border spr-tooltip-01', spinnerStyles, spinnerAnimationStyles, function (utils, props) {
-    var px2rem = utils.px2rem;
-    var $size = props.$size;
-    var radius = $size / 2;
-    var stickHeight = radius / 2;
-    var stickWidth = radius / 4;
-    return {
-        height: px2rem(stickHeight),
-        width: px2rem(stickWidth),
-        borderRadius: px2rem(16),
-        position: 'absolute',
-    };
-});
+exports.spinnerStickVariable = spinnerStickVariable;
+exports.StyledSpinner = (0, style_1.styledWithCssVariables)('div', commonCssVariables, 'h-[--sw-height] w-[--sw-width] relative');
+exports.StyledSpinnerStick = (0, style_1.styledWithCssVariables)('div', exports.spinnerStickVariable, function (_a, _b) {
+    var deprecatedAIThemeEnabled = _a.deprecatedAIThemeEnabled;
+    var $intent = _b.$intent;
+    if ($intent === 'ai') {
+        return deprecatedAIThemeEnabled ? 'ai-ui-01' : 'ai-ui-04';
+    }
+    return 'spr-tooltip-01';
+}, 'forced-colors:border-1 rounded-16 absolute h-[--sw-height] w-[--sw-width] animate-stick', 'delay-[--sw-delay] top-[--sw-top] left-[--sw-left-directional] st-trans-[--sw-transform]');

package/loader/types.d.ts

@@ -1,19 +1,21 @@
-import * as React from 'react';
+import { PropsWithChildren, ReactNode } from 'react';
 import { Override } from '../overrides';
-import { ClassName } from '../types';
-export declare type Variant = 'clip' | 'beat' | 'spinner';
-export declare type SharedProps = {
+import { Intent, SpacewebComponentProps } from '../types';
+export type Variant = 'clip' | 'beat' | 'spinner';
+export type SharedProps = {
     $variant: Variant;
     $hasLoadingContent: boolean;
     $hasDelay: boolean;
     $size?: number;
+    $intent?: Intent;
+    $index?: number;
 };
-export declare type LoaderProps = {
-    className?: ClassName;
+export type LoaderProps = PropsWithChildren<SpacewebComponentProps & {
+    intent?: Intent;
     variant?: Variant;
     size?: number;
     delay?: number;
-    loadingContent?: React.ReactNode;
+    loadingContent?: ReactNode;
     overrides?: {
         Root?: Override<SharedProps & Record<string, any>>;
         Text?: Override<SharedProps & Record<string, any>>;
@@ -21,4 +23,4 @@ export declare type LoaderProps = {
         BeatLoaderBall?: Override<SharedProps & Record<string, any>>;
         SpinnerStick?: Override<SharedProps & Record<string, any>>;
     };
-};
+}>;

package/locale/context.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Locale } from './types';
-declare type DeepPartial<T> = {
+type DeepPartial<T> = {
     [P in keyof T]?: T[P] extends Array<infer U> ? Array<DeepPartial<U>> : T[P] extends ReadonlyArray<infer U> ? ReadonlyArray<DeepPartial<U>> : DeepPartial<T[P]>;
 };
 export declare const localeContext: React.Context<Locale>;

package/locale/context.js

@@ -4,19 +4,19 @@ exports.LocaleProvider = exports.useLocale = exports.LocaleConsumer = exports.lo
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var merge_1 = (0, tslib_1.__importDefault)(require("lodash/merge"));
+var createSingletonContext_1 = require("@sprinklrjs/spaceweb/singleton/createSingletonContext");
+var deepMerge_1 = tslib_1.__importDefault(require("../helpers/deepMerge"));
 var en_US_1 = require("./en_US");
 // TODO: will be changed to `undefined` when MeetWrapper is implemented.
-exports.localeContext = (0, react_1.createContext)(en_US_1.DEFAULT_LOCALE);
-exports.localeContext.displayName = 'LocaleContext';
+exports.localeContext = (0, createSingletonContext_1.createSingletonContext)(en_US_1.DEFAULT_LOCALE, 'LocaleContext');
 exports.LocaleConsumer = exports.localeContext.Consumer;
 var useLocale = function () { return (0, react_1.useContext)(exports.localeContext); };
 exports.useLocale = useLocale;
 var LocaleProvider = function (props) {
     var Provider = exports.localeContext.Provider;
     var outerLocale = (0, exports.useLocale)();
-    var value = (0, react_1.useMemo)(function () { return (0, merge_1.default)({}, en_US_1.DEFAULT_LOCALE, outerLocale, props.locale); }, [props.locale, outerLocale]);
-    return (0, jsx_runtime_1.jsx)(Provider, (0, tslib_1.__assign)({ value: value }, { children: props.children }), void 0);
+    var value = (0, react_1.useMemo)(function () { return (0, deepMerge_1.default)({}, en_US_1.DEFAULT_LOCALE, outerLocale, props.locale); }, [props.locale, outerLocale]);
+    return (0, jsx_runtime_1.jsx)(Provider, tslib_1.__assign({ value: value }, { children: props.children }));
 };
 exports.LocaleProvider = LocaleProvider;
 exports.LocaleProvider.displayName = 'LocaleProvider';