@sprinklrjs/spaceweb 14.12.0 → 14.12.2

package/esm/phone-input/country-select.js

@@ -1,20 +1,23 @@
 import { __assign, __read, __rest } from "tslib";
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useRef } from 'react';
 import * as React from 'react';
 import _pick from 'lodash/pick';
 import { Select as DefaultSelect } from '../select';
 import { ListItem } from '../list';
 import { Typography } from '../typography';
+import { Box } from '../box';
 import FlagContainer from './flag-container';
 import { useLocale } from '../locale';
 import { mergeOverrides, useOverrides } from '../overrides';
-import { iso2FlagEmoji, countrySelectFilterOptions } from './utils';
+import { iso2FlagEmoji, countrySelectFilterOptions, resolveCountryLabelParts } from './utils';
 import { COUNTRY_SELECT_OPTIONS } from './constants';
 import { POPOVER_MARGIN } from '../popover/types';
 var SelectListItem = React.forwardRef(function (_a, ref) {
-    var mapIsoToLabel = _a.mapIsoToLabel, _b = _a.$item, id = _b.id, label = _b.label, dialCode = _b.dialCode, rest = __rest(_a, ["mapIsoToLabel", "$item"]);
-    return (_jsxs(ListItem, __assign({}, rest, { startEnhancer: iso2FlagEmoji(id), ref: ref }, { children: [dialCode, _jsxs(Typography, __assign({ "data-testid": id, "data-entity-type": "country-label", className: "spr-text-03 ml-1" }, { children: ["(", mapIsoToLabel ? mapIsoToLabel(id) : label, ")"] }))] })));
+    var mapIsoToLabel = _a.mapIsoToLabel, country = _a.$item, rest = __rest(_a, ["mapIsoToLabel", "$item"]);
+    var id = country.id, dialCode = country.dialCode;
+    var _b = resolveCountryLabelParts(country, mapIsoToLabel), primaryName = _b.primaryName, nativeName = _b.nativeName, nativeLang = _b.nativeLang;
+    return (_jsxs(ListItem, __assign({}, rest, { startEnhancer: iso2FlagEmoji(id), ref: ref }, { children: [dialCode, _jsxs(Typography, __assign({ "data-testid": id, "data-entity-type": "country-label", className: "spr-text-03 ml-1" }, { children: ["(", primaryName, nativeName && nativeLang ? (_jsxs(_Fragment, { children: [' (', _jsx(Box, __assign({ "$as": "span", lang: nativeLang }, { children: nativeName })), ")"] })) : null, _jsx(Box, __assign({ "$as": "span" }, { children: ")" }))] }))] })));
 });
 var CountrySelect = function (props) {
     var size = props.size, disabled = props.disabled, inputRef = props.inputRef, onChange = props.onChange, countries = props.countries, value = props.value, mapIsoToLabel = props.mapIsoToLabel, maxDropdownHeight = props.maxDropdownHeight, maxDropdownWidth = props.maxDropdownWidth, overrides = props.overrides;

package/esm/phone-input/types.d.ts

@@ -7,6 +7,14 @@ export type Country = {
     id: keyof typeof COUNTRIES;
     label: string;
     dialCode: string;
+    /**
+     * The portion of `label` (without the wrapping parentheses) that is rendered in a language
+     * other than the component's default (English), e.g. `'भारत'` for India. Used to apply the
+     * correct `lang` attribute to that segment for screen reader pronunciation (WCAG 3.1.2).
+     */
+    nativeName?: string;
+    /** BCP 47 language tag for `nativeName`, e.g. `'hi'` for Hindi. */
+    nativeLang?: string;
 };
 export type State = {
     country: Country;
@@ -22,11 +30,26 @@ export type PhoneInputOverrides = {
     FlagContainer?: Override<SharedProps & Record<string, any>>;
     DialCode?: Override<SharedProps & Record<string, any>>;
 };
+/**
+ * Custom country label for `mapIsoToLabel`. Provide both `nativeName` and `nativeLang` when a
+ * native-language segment should be marked with `lang` (WCAG 3.1.2); otherwise only `label` is used.
+ */
+export type CustomCountryLabel = {
+    label: string;
+    nativeName?: string;
+    nativeLang?: string;
+};
 export type PhoneInputProps = Omit<InputProps, 'value' | 'onChange'> & {
     onInputChange?: (event: React.SyntheticEvent<HTMLInputElement>) => unknown;
     onChange?: (value: Value) => void;
     value?: Value;
-    mapIsoToLabel?: (iso: string) => string;
+    /**
+     * Maps an ISO country code to the dropdown label. Return a `string` to replace the whole label
+     * (legacy behavior), or a `CustomCountryLabel` with both `nativeName` and `nativeLang` to mark
+     * a native-language segment with `lang` (WCAG 3.1.2). Object results missing either native field
+     * are flattened into a single label string.
+     */
+    mapIsoToLabel?: (iso: string) => string | CustomCountryLabel;
     maxDropdownHeight?: string;
     countries?: Array<Country>;
     maxDropdownWidth?: string;

package/esm/phone-input/useStatefulPhoneInput.d.ts

@@ -9,7 +9,7 @@ declare const useStatefulPhoneInput: ({ clearable, disabled, id, initialState, i
     intent: import("..").Intent | undefined;
     maxDropdownHeight: string;
     maxDropdownWidth: string;
-    mapIsoToLabel: ((iso: string) => string) | undefined;
+    mapIsoToLabel: ((iso: string) => string | import("./types").CustomCountryLabel) | undefined;
     name: string | undefined;
     overrides: import("../input").BaseInputOverrides & {
         Root?: import("../overrides").Override<import("../input").SharedProps & Record<string, any>> | undefined;

package/esm/phone-input/utils.d.ts

@@ -1,5 +1,5 @@
 import type { Value as ValueT } from '../select/types';
-import type { Value, Country } from './types';
+import type { Value, Country, CustomCountryLabel } from './types';
 export declare const iso2FlagEmoji: (iso: string) => string | undefined;
 export declare const sanitize: (value?: string) => string;
 export declare const getPhoneNumberWithCountryDialCode: (value: Value) => string | undefined;
@@ -11,3 +11,27 @@ export declare const getDefaultValue: (countries?: Country[]) => {
     country: Country;
     phoneNumber: string;
 };
+export type CountryLabelParts = {
+    primaryName: string;
+    nativeName?: string;
+    nativeLang?: string;
+};
+/**
+ * Splits a country's `label` (e.g. `'India (भारत)'`) into the default-language name and the
+ * trailing native-language segment (if any), so the native segment can be given its own `lang`
+ * attribute for correct screen reader pronunciation (WCAG 3.1.2 - Language of Parts).
+ *
+ * Requires both `nativeName` and `nativeLang`. Falls back to the whole `label` as `primaryName`
+ * if either is missing or `nativeName` is not actually a trailing `label` suffix, so incomplete
+ * data never breaks rendering or ships a native segment without a language tag.
+ */
+export declare const getCountryLabelParts: ({ label, nativeName, nativeLang }: Country) => CountryLabelParts;
+/**
+ * Resolves the label parts to render for a country option, honoring an optional `mapIsoToLabel`
+ * override (string or `{ label, nativeName?, nativeLang? }`).
+ *
+ * String overrides replace the whole label (legacy behavior). Object overrides only split out a
+ * `lang`-tagged native segment when both `nativeName` and `nativeLang` are provided; otherwise the
+ * visible text is flattened into `primaryName` so display stays correct without invalid markup.
+ */
+export declare const resolveCountryLabelParts: (country: Country, mapIsoToLabel?: ((iso: string) => string | CustomCountryLabel) | undefined) => CountryLabelParts;

package/esm/phone-input/utils.js

@@ -30,3 +30,52 @@ export var countrySelectFilterOptions = function (options, filterValue, excludeO
 export var getDefaultValue = function (countries) {
     return countries && !_isEmpty(countries) ? { country: COUNTRIES[countries[0].id], phoneNumber: '' } : defaultValue;
 };
+/**
+ * Splits a country's `label` (e.g. `'India (भारत)'`) into the default-language name and the
+ * trailing native-language segment (if any), so the native segment can be given its own `lang`
+ * attribute for correct screen reader pronunciation (WCAG 3.1.2 - Language of Parts).
+ *
+ * Requires both `nativeName` and `nativeLang`. Falls back to the whole `label` as `primaryName`
+ * if either is missing or `nativeName` is not actually a trailing `label` suffix, so incomplete
+ * data never breaks rendering or ships a native segment without a language tag.
+ */
+export var getCountryLabelParts = function (_a) {
+    var label = _a.label, nativeName = _a.nativeName, nativeLang = _a.nativeLang;
+    if (!nativeName || !nativeLang) {
+        return { primaryName: label };
+    }
+    var nativeNameSuffix = "(".concat(nativeName, ")");
+    var suffixStartIndex = label.lastIndexOf(nativeNameSuffix);
+    var isSuffixAtEnd = suffixStartIndex !== -1 && suffixStartIndex + nativeNameSuffix.length === label.length;
+    if (!isSuffixAtEnd) {
+        return { primaryName: label };
+    }
+    return { primaryName: label.slice(0, suffixStartIndex).trimEnd(), nativeName: nativeName, nativeLang: nativeLang };
+};
+/**
+ * Resolves the label parts to render for a country option, honoring an optional `mapIsoToLabel`
+ * override (string or `{ label, nativeName?, nativeLang? }`).
+ *
+ * String overrides replace the whole label (legacy behavior). Object overrides only split out a
+ * `lang`-tagged native segment when both `nativeName` and `nativeLang` are provided; otherwise the
+ * visible text is flattened into `primaryName` so display stays correct without invalid markup.
+ */
+export var resolveCountryLabelParts = function (country, mapIsoToLabel) {
+    if (!mapIsoToLabel) {
+        return getCountryLabelParts(country);
+    }
+    var mapped = mapIsoToLabel(country.id);
+    if (typeof mapped === 'string') {
+        return { primaryName: mapped };
+    }
+    if (!mapped.nativeName || !mapped.nativeLang) {
+        return {
+            primaryName: mapped.nativeName ? "".concat(mapped.label, " (").concat(mapped.nativeName, ")") : mapped.label,
+        };
+    }
+    return {
+        primaryName: mapped.label,
+        nativeName: mapped.nativeName,
+        nativeLang: mapped.nativeLang,
+    };
+};

package/input/base-input.js

@@ -143,7 +143,7 @@ var BaseInput = function (_a) {
     var hasScroll = inputRef.current && inputRef.current.scrollHeight > inputRef.current.clientHeight;
     var charCount = typeof value === 'string' ? value.length : 0;
     var ariaLabel = 'Clear value';
-    return ((0, jsx_runtime_1.jsxs)(InputContainer, tslib_1.__assign({ "data-spaceweb": "base-input" }, sharedProps, inputContainerProps, { children: [(0, jsx_runtime_1.jsx)(Before, tslib_1.__assign({}, sharedProps, beforeProps)), (0, jsx_runtime_1.jsx)(Input, tslib_1.__assign({ ref: inputRef, "aria-activedescendant": props['aria-activedescendant'], "aria-autocomplete": props['aria-autocomplete'], "aria-controls": props['aria-controls'], "aria-errormessage": props['aria-errormessage'], "aria-haspopup": props['aria-haspopup'], "aria-label": props['aria-label'], "aria-labelledby": props['aria-labelledby'], "aria-describedby": props['aria-describedby'], "aria-required": props['aria-required'], "aria-invalid": props['aria-invalid'], autoComplete: _autoComplete, disabled: disabled, readOnly: readOnly, id: id, inputMode: inputMode, maxLength: maxLength, name: name, onBlur: handleOnBlur, onChange: handleChange, onFocus: handleOnFocus, onKeyDown: handleKeyDown, onScroll: handleBoxShadow, onKeyPress: onKeyPress, onKeyUp: onKeyUp, pattern: pattern, placeholder: placeholder, type: getInputType(), required: required, role: role, value: value, min: min, max: max, step: step, draggable: draggable, onDragStart: draggable ? handleOnDragStart : undefined, rows: type === constants_1.CUSTOM_INPUT_TYPE.textarea ? rows : null }, sharedProps, inputProps)), showClearIcon ? ((0, jsx_runtime_1.jsx)(ClearIconContainer, tslib_1.__assign({ "$alignTop": type === constants_1.CUSTOM_INPUT_TYPE.textarea }, sharedProps, clearIconContainerProps, { children: (0, jsx_runtime_1.jsx)(ClearIcon, tslib_1.__assign({ title: ariaLabel, "aria-label": ariaLabel, onClick: onClearIconClick, onKeyDown: function (event) {
+    return ((0, jsx_runtime_1.jsxs)(InputContainer, tslib_1.__assign({ "data-spaceweb": "base-input" }, sharedProps, inputContainerProps, { children: [(0, jsx_runtime_1.jsx)(Before, tslib_1.__assign({}, sharedProps, beforeProps)), (0, jsx_runtime_1.jsx)(Input, tslib_1.__assign({ ref: inputRef, "aria-activedescendant": props['aria-activedescendant'], "aria-autocomplete": props['aria-autocomplete'], "aria-controls": props['aria-controls'], "aria-errormessage": props['aria-errormessage'], "aria-haspopup": props['aria-haspopup'], "aria-label": props['aria-label'], "aria-labelledby": props['aria-labelledby'], "aria-describedby": props['aria-describedby'], "aria-required": props['aria-required'], "aria-invalid": props['aria-invalid'], "aria-expanded": props['aria-expanded'], autoComplete: _autoComplete, disabled: disabled, readOnly: readOnly, id: id, inputMode: inputMode, maxLength: maxLength, name: name, onBlur: handleOnBlur, onChange: handleChange, onFocus: handleOnFocus, onKeyDown: handleKeyDown, onScroll: handleBoxShadow, onKeyPress: onKeyPress, onKeyUp: onKeyUp, pattern: pattern, placeholder: placeholder, type: getInputType(), required: required, role: role, value: value, min: min, max: max, step: step, draggable: draggable, onDragStart: draggable ? handleOnDragStart : undefined, rows: type === constants_1.CUSTOM_INPUT_TYPE.textarea ? rows : null }, sharedProps, inputProps)), showClearIcon ? ((0, jsx_runtime_1.jsx)(ClearIconContainer, tslib_1.__assign({ "$alignTop": type === constants_1.CUSTOM_INPUT_TYPE.textarea }, sharedProps, clearIconContainerProps, { children: (0, jsx_runtime_1.jsx)(ClearIcon, tslib_1.__assign({ title: ariaLabel, "aria-label": ariaLabel, onClick: onClearIconClick, onKeyDown: function (event) {
                         if (event.key && (event.key === 'Enter' || event.key === ' ')) {
                             event.preventDefault();
                             onClearIconClick();

package/list/divider.js

@@ -6,15 +6,17 @@ var react_1 = require("react");
 var overrides_1 = require("../overrides");
 var list_item_1 = tslib_1.__importDefault(require("./list-item"));
 var styled_component_1 = require("./styled-component");
+var utils_1 = require("./utils");
 var Divider = (0, react_1.forwardRef)(function (_a, ref) {
     var children = _a.children, _b = _a.first, first = _b === void 0 ? false : _b, _c = _a.overrides, overrides = _c === void 0 ? {} : _c, className = _a.className, restProps = tslib_1.__rest(_a, ["children", "first", "overrides", "className"]);
     var _d = tslib_1.__read((0, overrides_1.useOverrides)(overrides.Separator, styled_component_1.StyledListItemDivider), 2), Separator = _d[0], separatorProps = _d[1];
     var _e = tslib_1.__read((0, overrides_1.useOverrides)(overrides.SubHeader, list_item_1.default), 2), SubHeader = _e[0], subHeaderProps = _e[1];
+    var propsWithoutContainerAria = (0, utils_1.omitContainerAriaProps)(restProps);
     return children ? ((0, jsx_runtime_1.jsx)(SubHeader, tslib_1.__assign({ className: [
             'spr-border-primary border-solid border-b-0 border-l-0 border-r-0 mx-0 rounded-0',
             first ? 'border-t-0 pt-0' : 'border-t',
             className,
-        ], "aria-disabled": true }, restProps, subHeaderProps, { ref: ref }, { children: children }))) : ((0, jsx_runtime_1.jsx)(Separator, tslib_1.__assign({ "data-spaceweb": "divider", "aria-disabled": true, className: className }, restProps, { ref: ref }, separatorProps)));
+        ], role: "presentation" }, propsWithoutContainerAria, subHeaderProps, { ref: ref }, { children: children }))) : ((0, jsx_runtime_1.jsx)(Separator, tslib_1.__assign({ "data-spaceweb": "divider", role: "presentation", className: className }, propsWithoutContainerAria, { ref: ref }, separatorProps)));
 });
 Divider.displayName = 'Divider';
 exports.default = Divider;

package/list/list.js

@@ -13,14 +13,14 @@ var constants_1 = require("./constants");
 var style_1 = require("../style");
 var getCloneElement = function (item, virtualRow, totalCount) {
     var _a, _b;
-    return React.cloneElement(item, {
-        style: [{ '--sw-translate-y': "".concat(virtualRow.start, "px") }, item.props.style],
-        className: ['w-full absolute top-0 left-0 box-border translate-y-[--sw-translate-y]'],
+    return React.cloneElement(item, tslib_1.__assign({ style: [{ '--sw-translate-y': "".concat(virtualRow.start, "px") }, item.props.style], className: ['w-full absolute top-0 left-0 box-border translate-y-[--sw-translate-y]'], 
         // @ts-expect-error TS(2339): Property 'ref' does not exist on type 'ReactElemen... Remove this comment to see the full error message
-        ref: (0, useCombinedRef_1.combineRefs)(virtualRow.measureElement, item.ref),
-        'aria-posinset': (_a = item.props['aria-posinset']) !== null && _a !== void 0 ? _a : virtualRow.index + 1,
-        'aria-setsize': (_b = item.props['aria-setsize']) !== null && _b !== void 0 ? _b : totalCount,
-    });
+        ref: (0, useCombinedRef_1.combineRefs)(virtualRow.measureElement, item.ref) }, ((0, utils_1.isPresentationalRole)(item.props.role)
+        ? {}
+        : {
+            'aria-posinset': (_a = item.props['aria-posinset']) !== null && _a !== void 0 ? _a : virtualRow.index + 1,
+            'aria-setsize': (_b = item.props['aria-setsize']) !== null && _b !== void 0 ? _b : totalCount,
+        })));
 };
 var List = React.forwardRef(function (_a, forwardedRef) {
     var _b = _a.overrides, overrides = _b === void 0 ? {} : _b, children = _a.children, virtual = _a.virtual, scrollElement = _a.scrollElement, _c = _a.overscanCount, overscanCount = _c === void 0 ? constants_1.DEFAULT_OVER_SCAN_COUNT : _c, _d = _a.estimateItemSize, estimateItemSize = _d === void 0 ? constants_1.DEFAULT_LIST_ITEM_HEIGHT : _d, _e = _a.role, role = _e === void 0 ? 'list' : _e, autoScrollToSelectedItem = _a.autoScrollToSelectedItem, style = _a.style, className = _a.className, _f = _a.keepFirstItemMounted, keepFirstItemMounted = _f === void 0 ? false : _f, restProps = tslib_1.__rest(_a, ["overrides", "children", "virtual", "scrollElement", "overscanCount", "estimateItemSize", "role", "autoScrollToSelectedItem", "style", "className", "keepFirstItemMounted"]);
@@ -52,13 +52,10 @@ var List = React.forwardRef(function (_a, forwardedRef) {
         // eslint-disable-next-line react-hooks/exhaustive-deps -- scrollToIndex on mount only
     }, []);
     if (virtual) {
-        return ((0, jsx_runtime_1.jsx)(Root, tslib_1.__assign({ "data-spaceweb": "list", "$as": "div", role: role }, restProps, rootProps, { ref: combinedRef, style: [{ '--sw-min-width': px2rem(styled_component_1.LIST_MIN_WIDTH) }, style, rootProps === null || rootProps === void 0 ? void 0 : rootProps.style], className: [className, rootProps === null || rootProps === void 0 ? void 0 : rootProps.className] }, { children: (0, jsx_runtime_1.jsx)(box_1.Box
-            // NOTE: resetting margin and padding here. should be removed when normalize css merges
-            , tslib_1.__assign({ 
-                // NOTE: resetting margin and padding here. should be removed when normalize css merges
-                className: "w-full relative p-0 m-0", style: {
+        var _h = (0, utils_1.splitA11yProps)(restProps), a11yProps = _h.a11yProps, otherProps = _h.otherProps;
+        return ((0, jsx_runtime_1.jsx)(Root, tslib_1.__assign({ "data-spaceweb": "list", "$as": "div" }, otherProps, rootProps, { ref: combinedRef, style: [{ '--sw-min-width': px2rem(styled_component_1.LIST_MIN_WIDTH) }, style, rootProps === null || rootProps === void 0 ? void 0 : rootProps.style], className: [className, rootProps === null || rootProps === void 0 ? void 0 : rootProps.className] }, { children: (0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ className: "w-full relative p-0", style: {
                     height: "".concat(rowVirtualizer.getTotalSize(), "px"),
-                }, "$as": "ul" }, { children: rowVirtualizer
+                }, "$as": "ul", role: role }, a11yProps, { children: rowVirtualizer
                     .getVirtualItems()
                     .map(function (virtualRow) { return getCloneElement(childrenArr[virtualRow.index], virtualRow, childrenArr.length); }) })) })));
     }

package/list/utils.d.ts

@@ -4,3 +4,11 @@ export declare const measureElement: typeof measureElementType;
  * Keeps the first item mounted even when it falls outside the range.
  */
 export declare const customRangeExtractor: (range: Range) => number[];
+export declare const splitA11yProps: (props: Record<string, unknown>) => {
+    a11yProps: Record<string, unknown>;
+    otherProps: Record<string, unknown>;
+};
+export declare const isPresentationalRole: (role?: string | null) => boolean;
+export declare const omitContainerAriaProps: ({ "aria-posinset": _ariaPosInSet, "aria-setsize": _ariaSetSize, ...rest }: Record<string, unknown>) => {
+    [x: string]: unknown;
+};

package/list/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.customRangeExtractor = exports.measureElement = void 0;
+exports.omitContainerAriaProps = exports.isPresentationalRole = exports.splitA11yProps = exports.customRangeExtractor = exports.measureElement = void 0;
 var tslib_1 = require("tslib");
 var react_virtual_1 = require("@tanstack/react-virtual");
 var parseMeasurement = function (str) { return parseFloat(str) || 0; };
@@ -28,3 +28,33 @@ var customRangeExtractor = function (range) {
     return tslib_1.__spreadArray([0], tslib_1.__read(defaultIndices), false);
 };
 exports.customRangeExtractor = customRangeExtractor;
+var isA11yProp = function (key) { return key === 'id' || key === 'tabIndex' || key.startsWith('aria-'); };
+var splitA11yProps = function (props) {
+    var e_1, _a;
+    var a11yProps = {};
+    var otherProps = {};
+    try {
+        for (var _b = tslib_1.__values(Object.entries(props)), _c = _b.next(); !_c.done; _c = _b.next()) {
+            var _d = tslib_1.__read(_c.value, 2), key = _d[0], value = _d[1];
+            (isA11yProp(key) ? a11yProps : otherProps)[key] = value;
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    return { a11yProps: a11yProps, otherProps: otherProps };
+};
+exports.splitA11yProps = splitA11yProps;
+var isPresentationalRole = function (role) {
+    return role === 'presentation' || role === 'none' || role === 'separator';
+};
+exports.isPresentationalRole = isPresentationalRole;
+var omitContainerAriaProps = function (_a) {
+    var _ariaPosInSet = _a["aria-posinset"], _ariaSetSize = _a["aria-setsize"], rest = tslib_1.__rest(_a, ['aria-posinset', 'aria-setsize']);
+    return rest;
+};
+exports.omitContainerAriaProps = omitContainerAriaProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sprinklrjs/spaceweb",
-  "version": "14.12.0",
+  "version": "14.12.2",
   "description": "Components for SpaceWeb",
   "main": "index.js",
   "module": "./esm/index.js",
@@ -100,7 +100,7 @@
     "ts-node": "^10.4.0"
   },
   "peerDependencies": {
-    "@sprinklrjs/spaceweb-themes": "14.12.0",
+    "@sprinklrjs/spaceweb-themes": "14.12.2",
     "react": ">=17.0.2 <19.0.0",
     "react-dom": ">=17.0.2 <19.0.0"
   }