@sprinklrjs/spaceweb 12.14.4 → 12.33.2

package/snackbar/constants.d.ts

@@ -2,5 +2,5 @@ import * as React from 'react';
 import { IconProps } from '../icon';
 import { Intent } from './types';
 export declare const TRANSITION_DURATION = 1000;
-export declare const INTENT_TO_ICON: Record<Intent, React.ComponentType<IconProps>>;
+export declare const INTENT_TO_ICON: Record<Intent, React.ComponentType<React.PropsWithChildren<IconProps>>>;
 export declare const TYPE_TO_HIDE_DURATION: Record<Intent, number>;

package/snackbar/useSnackbar.js

@@ -14,7 +14,9 @@ var useHideOnClickAway = function (_a) {
                 handleClose('clickaway');
             }
         }
-    }, [open, hideOnClickAway]);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- handleClose not required
+    [open, hideOnClickAway]);
     (0, react_1.useEffect)(function () {
         document.addEventListener('click', handleDocumentClick);
         return function () { return document.removeEventListener('click', handleDocumentClick); };
@@ -29,29 +31,36 @@ var useAutoHide = function (_a) {
             return function () { return window.clearTimeout(autoHideTimeoutRef.current); };
         }
         return undefined;
-    }, [open, autoHide, autoHideDuration]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- handleClose not required
+    }, [open, autoHide, autoHideDuration, autoHideTimeoutRef]);
 };
 var useDomVisibility = function (_a) {
     var message = _a.message, open = _a.open, enter = _a.enter, handleClose = _a.handleClose, intent = _a.intent;
     var _b = (0, tslib_1.__read)((0, react_1.useState)(false), 2), domVisibility = _b[0], setDomVisibility = _b[1];
+    var removeFromDomTimeoutRef = (0, react_1.useRef)();
     // handle exit, enter on message change
     (0, react_1.useEffect)(function () {
         if (!message)
             return undefined;
         // enter new snackbar immediately if none is opened already else wait for exit transition to finish.
-        var timeoutId = window.setTimeout(enter, open ? constants_1.TRANSITION_DURATION : 0);
+        var timeoutId = window.setTimeout(function () {
+            window.clearTimeout(removeFromDomTimeoutRef.current);
+            setDomVisibility(true);
+            enter();
+        }, open ? constants_1.TRANSITION_DURATION : 0);
         setDomVisibility(true);
         // exit previously opened snackbar
         open && handleClose('messageChange');
         return function () { return window.clearTimeout(timeoutId); };
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- handleClose not required
     }, [message, intent]);
     // remove from DOM, once transition is over
     (0, useUpdateEffect_1.default)(function () {
         if (open)
             return undefined;
-        var timeoutId = window.setTimeout(function () { return setDomVisibility(false); }, constants_1.TRANSITION_DURATION);
+        removeFromDomTimeoutRef.current = window.setTimeout(function () { return setDomVisibility(false); }, constants_1.TRANSITION_DURATION);
         return function () {
-            window.clearTimeout(timeoutId);
+            window.clearTimeout(removeFromDomTimeoutRef.current);
         };
     }, [open]);
     return domVisibility;
@@ -61,11 +70,11 @@ var useSnackbar = function (_a) {
     var _b = (0, tslib_1.__read)((0, react_1.useState)(false), 2), open = _b[0], setOpen = _b[1];
     var _c = (0, tslib_1.__read)((0, react_1.useState)({ intent: nextIntent, message: nextMessage }), 2), snackbarContent = _c[0], setSnackbarContent = _c[1];
     var autoHideTimeoutRef = (0, react_1.useRef)();
-    var handleClose = function (reason) {
+    var handleClose = (0, react_1.useCallback)(function (reason) {
         setOpen(false);
         window.clearTimeout(autoHideTimeoutRef.current);
         onClose === null || onClose === void 0 ? void 0 : onClose(reason);
-    };
+    }, [onClose]);
     var enter = function () {
         // set the intent and message to be rendered in the Snackbar which we are entering
         setSnackbarContent({ intent: nextIntent, message: nextMessage });

package/spacewebProvider/AiIconLinearGradients.d.ts

@@ -0,0 +1,2 @@
+declare const AiIconLinearGradients: () => import("react/jsx-runtime").JSX.Element;
+export default AiIconLinearGradients;

package/spacewebProvider/AiIconLinearGradients.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var style_1 = require("../style");
+var commonStyles_1 = require("../helpers/commonStyles");
+var AiIconLinearGradients = function () {
+    var theme = (0, style_1.useStyle)().theme;
+    return ((0, jsx_runtime_1.jsx)("svg", (0, tslib_1.__assign)({ style: commonStyles_1.accessibilityStyles }, { children: (0, jsx_runtime_1.jsx)("defs", { children: theme.name.includes('light') ? ((0, jsx_runtime_1.jsxs)("linearGradient", (0, tslib_1.__assign)({ id: "aiGradientID", x1: "10.065", y1: "-152.894", x2: ".289", y2: "-163.48", gradientTransform: "matrix(1 0 0 -1 0 -149.213)", gradientUnits: "userSpaceOnUse" }, { children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0", stopColor: "#de46e1" }, void 0), (0, jsx_runtime_1.jsx)("stop", { offset: ".487", stopColor: "#8e43ff" }, void 0), (0, jsx_runtime_1.jsx)("stop", { offset: "1", stopColor: "#0e61f6" }, void 0)] }), void 0)) : ((0, jsx_runtime_1.jsxs)("linearGradient", (0, tslib_1.__assign)({ id: "aiGradientID", x1: "8.96", y1: "2.66", x2: "-2.87898", y2: "15.0443", gradientUnits: "userSpaceOnUse" }, { children: [(0, jsx_runtime_1.jsx)("stop", { stopColor: "#DE46E1" }, void 0), (0, jsx_runtime_1.jsx)("stop", { offset: "0.486707", stopColor: "#8E43FF" }, void 0), (0, jsx_runtime_1.jsx)("stop", { offset: "1", stopColor: "#0E61F6" }, void 0)] }), void 0)) }, void 0) }), void 0));
+};
+exports.default = AiIconLinearGradients;

package/spacewebProvider/CustomBaseProvider.d.ts

@@ -1,17 +1,8 @@
 import * as React from 'react';
 import { ReactElement } from 'react';
-import { Theme } from 'baseui/theme';
-import { Direction } from '@sprinklrjs/spaceweb-themes/types';
-import { Override } from '../overrides';
 declare const CustomBaseProvider: (props: {
-    theme: Theme & {
-        direction: Direction;
-    };
-    children: React.ReactElement;
-    overrides?: {
-        AppContainer?: Override<any>;
-        LayersContainer?: Override<any>;
-    };
+    children: React.ReactNode;
     zIndex?: number;
+    host?: HTMLElement | null;
 }) => ReactElement;
 export default CustomBaseProvider;

package/spacewebProvider/CustomBaseProvider.js

@@ -2,16 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var useConvertOverrides_1 = require("../helpers/baseui/useConvertOverrides");
-var React = (0, tslib_1.__importStar)(require("react"));
-var baseui_1 = require("baseui");
-// @ts-ignore
-baseui_1.BaseProvider.displayName = 'BaseUIProvider';
-// NOTE: Reason https://baseweb.design/components/layer/#layersmanager
-var BaseProviderOverrides = {
-    AppContainer: { props: { 'data-testid': 'spaceweb-app-container' }, style: { height: '100%' } },
-    // Spaceweb has its own LayersContainer, no need to render Baseweb's container.
-    LayersContainer: React.forwardRef(function () { return null; }),
-};
-var CustomBaseProvider = function (props) { return ((0, jsx_runtime_1.jsx)(baseui_1.BaseProvider, (0, tslib_1.__assign)({}, props, { overrides: (0, useConvertOverrides_1.useConvertOverrides)(BaseProviderOverrides, props.overrides, [props.overrides]) }), void 0)); };
+// todo: add dependency. ideally this should not be reqd with react-18. but baseui internally uses this.
+var react_uid_1 = require("react-uid");
+var layer_1 = require("../layer");
+var CustomBaseProvider = function (props) { return ((0, jsx_runtime_1.jsx)(layer_1.LayersManager, (0, tslib_1.__assign)({ zIndex: props.zIndex, host: props.host }, { children: (0, jsx_runtime_1.jsx)(react_uid_1.UIDReset, (0, tslib_1.__assign)({ prefix: "bui" }, { children: props.children }), void 0) }), void 0)); };
 exports.default = CustomBaseProvider;

package/spacewebProvider/SpacewebProvider.js

@@ -4,15 +4,17 @@ var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var CustomBaseProvider_1 = (0, tslib_1.__importDefault)(require("./CustomBaseProvider"));
-var focusVisible_1 = require("baseui/utils/focusVisible");
+var focusVisible_1 = require("../baseui/utils/focusVisible");
 var DocumentProvider_1 = require("./DocumentProvider");
 var styleEngine_1 = require("../styleEngine");
-var themes_1 = (0, tslib_1.__importDefault)(require("../themes"));
 var locale_1 = require("../locale");
-var layer_1 = require("../layer");
+// import { LAYERS_DEFAULT_ZINDEX } from '../layer';
 var theme_1 = require("../theme");
+var AiIconLinearGradients_1 = (0, tslib_1.__importDefault)(require("./AiIconLinearGradients"));
+var useHasMounted_1 = require("../hooks/useHasMounted");
+var LAYERS_DEFAULT_ZINDEX = 9999;
 function SpacewebProvider(props) {
-    var children = props.children, _a = props.layersZIndex, layersZIndex = _a === void 0 ? layer_1.LAYERS_DEFAULT_ZINDEX : _a, overrides = props.overrides, theme = props.theme, locale = props.locale, _b = props.debug, debug = _b === void 0 ? false : _b, density = props.density, langCode = props.langCode;
+    var children = props.children, _a = props.layersZIndex, layersZIndex = _a === void 0 ? LAYERS_DEFAULT_ZINDEX : _a, overrides = props.overrides, theme = props.theme, locale = props.locale, _b = props.debug, debug = _b === void 0 ? false : _b, density = props.density, langCode = props.langCode;
     var doc = (0, DocumentProvider_1.useDocument)();
     var styleEngine = props.styleEngine || (0, styleEngine_1.getStyleEngine)(doc);
     // TODO: This must be removed once baseui code exposes focusVisible from utils/index
@@ -26,8 +28,8 @@ function SpacewebProvider(props) {
     var direction = props.direction || outerTheme.direction || 'ltr';
     var localeValue = (0, react_1.useMemo)(function () { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, locale), { langCode: langCode })); }, [locale, langCode]);
     var themeValue = (0, react_1.useMemo)(function () { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, theme), { direction: direction })); }, [theme, direction]);
-    var baseProviderTheme = (0, react_1.useMemo)(function () { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, themes_1.default[theme.theme.name]), { direction: direction })); }, [direction, theme]);
-    return ((0, jsx_runtime_1.jsx)(styleEngine_1.StyleProvider, (0, tslib_1.__assign)({ debug: debug, styleEngine: styleEngine }, { children: (0, jsx_runtime_1.jsx)(theme_1.ThemeProvider, (0, tslib_1.__assign)({ theme: themeValue, containerElement: doc === null || doc === void 0 ? void 0 : doc.documentElement, density: density }, { children: (0, jsx_runtime_1.jsx)(locale_1.LocaleProvider, (0, tslib_1.__assign)({ locale: localeValue }, { children: (0, jsx_runtime_1.jsx)(CustomBaseProvider_1.default, (0, tslib_1.__assign)({ overrides: overrides, theme: baseProviderTheme }, { children: (0, jsx_runtime_1.jsx)(layer_1.LayersManager, (0, tslib_1.__assign)({ zIndex: layersZIndex, host: doc === null || doc === void 0 ? void 0 : doc.body }, { children: children }), void 0) }), void 0) }), void 0) }), void 0) }), void 0));
+    var hasMounted = (0, useHasMounted_1.useHasMounted)();
+    return ((0, jsx_runtime_1.jsx)(styleEngine_1.StyleProvider, (0, tslib_1.__assign)({ debug: debug, styleEngine: styleEngine }, { children: (0, jsx_runtime_1.jsx)(theme_1.ThemeProvider, (0, tslib_1.__assign)({ theme: themeValue, containerElement: hasMounted ? doc.documentElement : undefined, density: density }, { children: (0, jsx_runtime_1.jsx)(locale_1.LocaleProvider, (0, tslib_1.__assign)({ locale: localeValue }, { children: (0, jsx_runtime_1.jsxs)(CustomBaseProvider_1.default, (0, tslib_1.__assign)({ zIndex: layersZIndex, host: doc === null || doc === void 0 ? void 0 : doc.body }, { children: [children, (0, jsx_runtime_1.jsx)(AiIconLinearGradients_1.default, {}, void 0)] }), void 0) }), void 0) }), void 0) }), void 0));
 }
 function SpacewebProviderWithDoc(_a) {
     var ownerDocument = _a.ownerDocument, children = _a.children, rest = (0, tslib_1.__rest)(_a, ["ownerDocument", "children"]);

package/style/styled.d.ts

@@ -4,7 +4,7 @@
 import { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
 import * as React from 'react';
 import { Styles } from '../types';
-declare type Tag = keyof JSX.IntrinsicElements | React.ComponentType<any>;
+declare type Tag = keyof JSX.IntrinsicElements | React.ComponentType<React.PropsWithChildren<any>>;
 declare type StyledFunc = (ComponentOrTag: Tag, ...args: Styles[]) => StyledComponent;
 export declare type StyledComponent = ForwardRefExoticComponent<PropsWithoutRef<any> & RefAttributes<HTMLElement | React.ComponentClass>>;
 declare const styled: StyledFunc;

package/style/useMemoizedStyletron.d.ts

@@ -1,5 +1,6 @@
+import { useStyletron } from 'styletron-react';
 /**
  * styletron returns new `styletronCSS` function each time the hook is called. This hook memorizes the css function and returns same reference every time.
  */
-declare const useMemoizedStyletron: () => [(a: import("styletron-standard").StyleObject) => string, import("baseui").Theme];
+declare const useMemoizedStyletron: () => ReturnType<typeof useStyletron>;
 export default useMemoizedStyletron;

package/style/useMemoizedStyletron.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
-var baseui_1 = require("baseui");
+var styletron_react_1 = require("styletron-react");
 var react_1 = require("react");
 var rtl_css_js_1 = (0, tslib_1.__importDefault)(require("rtl-css-js"));
 var useLatest_1 = require("../hooks/useLatest");
@@ -11,11 +11,11 @@ var identity = function (x) { return x; };
  * styletron returns new `styletronCSS` function each time the hook is called. This hook memorizes the css function and returns same reference every time.
  */
 var useMemoizedStyletron = function () {
-    var _a = (0, tslib_1.__read)((0, baseui_1.useStyletron)(), 2), styletronCSS = _a[0], theme = _a[1];
+    var _a = (0, tslib_1.__read)((0, styletron_react_1.useStyletron)(), 1), styletronCSS = _a[0];
     var ctx = (0, context_1.useTheme)();
     var cssRef = (0, useLatest_1.useLatest)(styletronCSS);
     var decorator = ctx.direction === 'rtl' ? rtl_css_js_1.default : identity;
     var css = (0, react_1.useCallback)(function (arg) { return cssRef.current(decorator(arg)); }, [cssRef, decorator]);
-    return [css, theme];
+    return [css];
 };
 exports.default = useMemoizedStyletron;

package/switch/index.d.ts

@@ -1,3 +1,3 @@
 export { Switch, StatefulSwitch } from './switch';
-export { StatefulContainer, StyledRoot, StyledLabel, StyledInput, StyledToggle, StyledToggleTrack, } from 'baseui/checkbox';
+export { StatefulContainer, StyledRoot, StyledLabel, StyledInput, StyledToggle, StyledToggleTrack, } from '../baseui/checkbox';
 export * from './types';

package/switch/index.js

@@ -5,7 +5,7 @@ var tslib_1 = require("tslib");
 var switch_1 = require("./switch");
 Object.defineProperty(exports, "Switch", { enumerable: true, get: function () { return switch_1.Switch; } });
 Object.defineProperty(exports, "StatefulSwitch", { enumerable: true, get: function () { return switch_1.StatefulSwitch; } });
-var checkbox_1 = require("baseui/checkbox");
+var checkbox_1 = require("../baseui/checkbox");
 Object.defineProperty(exports, "StatefulContainer", { enumerable: true, get: function () { return checkbox_1.StatefulContainer; } });
 Object.defineProperty(exports, "StyledRoot", { enumerable: true, get: function () { return checkbox_1.StyledRoot; } });
 Object.defineProperty(exports, "StyledLabel", { enumerable: true, get: function () { return checkbox_1.StyledLabel; } });

package/switch/styled-components.js

@@ -66,12 +66,10 @@ var getLabelOverrides = function (_a, _b) {
     var styles = {
         fontSize: px2rem(13),
         color: $disabled ? theme.spr.text02 : theme.spr.text01,
-        paddingLeft: px2rem(8),
         wordBreak: 'break-word',
     };
     if ($size === 'lg') {
         styles.fontSize = px2rem(14);
-        styles.paddingLeft = px2rem(10);
     }
     if ($size === 'sm') {
         styles.fontSize = px2rem(12);

package/switch/switch.js

@@ -4,7 +4,7 @@ exports.StatefulSwitch = exports.Switch = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var checkbox_1 = require("../checkbox");
-var checkbox_2 = require("baseui/checkbox");
+var checkbox_2 = require("../baseui/checkbox");
 var basewebAdapter_1 = require("./basewebAdapter");
 var useCombinedRef_1 = require("../hooks/useCombinedRef");
 var Switch = function (props) {

package/switch/types.d.ts

@@ -1,5 +1,5 @@
 import { CheckboxProps as BaseSwitchProps, StatefulCheckboxProps as BaseStatefulSwitchProps } from '../checkbox';
-import { SharedProps as BaseSharedProps } from 'baseui/input';
+import { SharedProps as BaseSharedProps } from '../baseui/input';
 import { Override } from '../overrides';
 import { Intent } from '../types';
 export declare type SwitchSize = 'sm' | 'md' | 'lg';

package/tabs/contexts.d.ts

@@ -8,5 +8,5 @@ export declare const useStatefulTabsContext: () => {
     activeTabId: Key;
     onChange: ChangEventHandler;
 };
-export declare const TabListContext: import("react").Context<Pick<TabListProps, "position" | "overrides" | "onChange" | "variant" | "activeTabId">>;
-export declare const useTabListContext: () => Pick<TabListProps, "position" | "overrides" | "onChange" | "variant" | "activeTabId">;
+export declare const TabListContext: import("react").Context<Pick<TabListProps, "position" | "onChange" | "overrides" | "variant" | "activeTabId">>;
+export declare const useTabListContext: () => Pick<TabListProps, "position" | "onChange" | "overrides" | "variant" | "activeTabId">;

package/tabs/styled-components.d.ts

@@ -5,6 +5,6 @@ export declare const Root: (props: PropsWithChildren<SharedPropsTabs>) => ReactE
 export declare const tabsStyles: (utils: any, { $variant, $position }: {
     $variant: any;
     $position: any;
-}) => string;
+}) => any;
 export declare const tabStyle: StyleFn<SharedPropsTab>;
 export declare const StyledTabsPanel: import("../style/styled").StyledComponent;

package/tabs/tab-list.js

@@ -37,7 +37,8 @@ var TabList = function (props) {
             })
             : null;
     }, [handleKeyDown, activeTabId, statefulTabsContext]);
-    return ((0, jsx_runtime_1.jsx)(contexts_1.TabListContext.Provider, (0, tslib_1.__assign)({ value: contextValue }, { children: (0, jsx_runtime_1.jsx)(TabListComp, (0, tslib_1.__assign)({ "data-spaceweb": "tablist", role: "tablist", ref: parentElementRef }, restProps, sharedProps, tabListProps, { className: [styled_components_1.tabsStyles, className] }, { children: react_1.Children.map(props.children, renderTabChild) }), void 0) }), void 0));
+    var validChildren = react_1.Children.toArray(props.children).filter(react_1.isValidElement);
+    return ((0, jsx_runtime_1.jsx)(contexts_1.TabListContext.Provider, (0, tslib_1.__assign)({ value: contextValue }, { children: (0, jsx_runtime_1.jsx)(TabListComp, (0, tslib_1.__assign)({ "data-spaceweb": "tablist", role: "tablist", ref: parentElementRef }, restProps, sharedProps, tabListProps, { className: [styled_components_1.tabsStyles, className] }, { children: validChildren.map(renderTabChild) }), void 0) }), void 0));
 };
 exports.TabList = TabList;
 exports.TabList.displayName = 'TabList';

package/tag/intentStyles.d.ts

@@ -1,4 +1,8 @@
 import { Theme } from '@sprinklrjs/spaceweb-themes/types';
 import { StyleObject } from '../types';
 import { Intent, Variant } from './types';
-export declare const getIntentStyles: (theme: Theme, intent: Intent, variant: Variant) => StyleObject;
+export declare const getIntentStyles: (theme: Theme, intent: Intent, variant: Variant) => {
+    styles: StyleObject;
+    hoverStyles: StyleObject;
+    activeStyles: StyleObject;
+};

package/tag/intentStyles.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getIntentStyles = void 0;
+var tslib_1 = require("tslib");
+var longHandHelpers_1 = require("../helpers/longHandHelpers");
 var getColorMap = function (theme) { return ({
     default: {
         solid: {
@@ -72,18 +74,42 @@ var getColorMap = function (theme) { return ({
             fontHover: theme.spr.clrOrange,
         },
     },
+    ai: {
+        solid: {
+            bg: theme.spr.ui01,
+            bgHover: theme.ai.highlight,
+            bgActive: theme.spr.ui01,
+            borderHover: theme.spr.clrViolet,
+            borderActive: theme.spr.clrViolet,
+            boxShadowActive: 'none',
+            boxShadowHover: 'none',
+            font: theme.spr.text01,
+            fontHover: theme.spr.text01,
+        },
+        light: {
+            bg: theme.spr.ui01,
+            bgHover: theme.ai.highlight,
+            bgActive: theme.spr.ui01,
+            borderHover: theme.spr.clrViolet,
+            borderActive: theme.spr.clrViolet,
+            boxShadowActive: 'none',
+            boxShadowHover: 'none',
+            font: theme.spr.text01,
+            fontHover: theme.spr.text01,
+        },
+    },
 }); };
 var getIntentStyles = function (theme, intent, variant) {
     var _a;
     var colorMap = getColorMap(theme);
     var variantStyles = (_a = colorMap[intent]) === null || _a === void 0 ? void 0 : _a[variant];
     return {
-        backgroundColor: variantStyles === null || variantStyles === void 0 ? void 0 : variantStyles.bg,
-        color: variantStyles === null || variantStyles === void 0 ? void 0 : variantStyles.font,
-        '&:hover': {
-            backgroundColor: variantStyles === null || variantStyles === void 0 ? void 0 : variantStyles.bgHover,
-            color: variantStyles === null || variantStyles === void 0 ? void 0 : variantStyles.fontHover,
+        styles: {
+            backgroundColor: variantStyles === null || variantStyles === void 0 ? void 0 : variantStyles.bg,
+            color: variantStyles === null || variantStyles === void 0 ? void 0 : variantStyles.font,
         },
+        hoverStyles: (0, tslib_1.__assign)((0, tslib_1.__assign)({ backgroundColor: variantStyles === null || variantStyles === void 0 ? void 0 : variantStyles.bgHover, color: variantStyles === null || variantStyles === void 0 ? void 0 : variantStyles.fontHover }, ((variantStyles === null || variantStyles === void 0 ? void 0 : variantStyles.borderHover) && (0, longHandHelpers_1.borderColor)(variantStyles.borderHover))), ((variantStyles === null || variantStyles === void 0 ? void 0 : variantStyles.boxShadowHover) && { boxShadow: variantStyles.boxShadowHover })),
+        activeStyles: (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, ((variantStyles === null || variantStyles === void 0 ? void 0 : variantStyles.borderActive) && (0, longHandHelpers_1.borderColor)(variantStyles.borderActive))), ((variantStyles === null || variantStyles === void 0 ? void 0 : variantStyles.bgActive) && { backgroundColor: variantStyles.bgActive })), ((variantStyles === null || variantStyles === void 0 ? void 0 : variantStyles.boxShadowActive) && { boxShadow: variantStyles.boxShadowActive })),
     };
 };
 exports.getIntentStyles = getIntentStyles;

package/tag/styled-components.js

@@ -25,11 +25,12 @@ exports.StyledRoot = (0, style_1.styled)('span', 'inline-flex items-center box-b
     var _c = (0, utils_1.getTagSizeTheme)(theme, $size), height = _c.height, borderRadius = _c.borderRadius, paddingX = _c.paddingX, paddingY = _c.paddingY;
     var paddingStart = $withStartEnhancer ? '0' : paddingX;
     var paddingEnd = $closeable ? '0' : paddingX;
-    var typographyStyles = $intent === 'default'
+    var typographyStyles = $intent === 'default' || $intent === 'ai'
         ? (0, tslib_1.__assign)((0, tslib_1.__assign)({}, theme.typography.l2), { fontWeight: theme.fontWeight.normal }) : (0, tslib_1.__assign)((0, tslib_1.__assign)({}, theme.typography.l2), { fontWeight: theme.fontWeight.semibold });
-    var hoverStyles = (0, tslib_1.__assign)({ boxShadow: 'inset 0px 0px 100px rgba(0, 0, 0, 0.08)' }, (0, longHandHelpers_1.borderColor)(theme.spr.border06));
-    var activeStyles = (0, tslib_1.__assign)({}, (0, longHandHelpers_1.borderColor)(theme.spr.interactive01));
-    return (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((_b = { height: height }, _b[paddingStartDir] = paddingStart, _b[paddingEndDir] = paddingEnd, _b.paddingTop = paddingY, _b.paddingBottom = paddingY, _b.maxWidth = 'none', _b), typographyStyles), (0, longHandHelpers_1.margin)(0)), (0, longHandHelpers_1.borderStyle)('solid')), (0, longHandHelpers_1.borderColor)(theme.borderColor.transparent)), (0, longHandHelpers_1.borderWidth)('1px')), (0, longHandHelpers_1.borderRadius)(borderRadius)), (0, intentStyles_1.getIntentStyles)(theme, $intent, $variant)), ($clickable && (0, tslib_1.__assign)({ cursor: 'pointer', 
+    var _d = (0, intentStyles_1.getIntentStyles)(theme, $intent, $variant), intentStyles = _d.styles, intentHoverStyles = _d.hoverStyles, intentActiveStyles = _d.activeStyles;
+    var hoverStyles = (0, tslib_1.__assign)((0, tslib_1.__assign)({ boxShadow: 'inset 0px 0px 100px rgba(0, 0, 0, 0.08)' }, (0, longHandHelpers_1.borderColor)(theme.spr.border06)), intentHoverStyles);
+    var activeStyles = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, longHandHelpers_1.borderColor)(theme.spr.interactive01)), intentActiveStyles);
+    return (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((_b = { height: height }, _b[paddingStartDir] = paddingStart, _b[paddingEndDir] = paddingEnd, _b.paddingTop = paddingY, _b.paddingBottom = paddingY, _b.maxWidth = 'none', _b), typographyStyles), (0, longHandHelpers_1.margin)(0)), (0, longHandHelpers_1.borderStyle)('solid')), (0, longHandHelpers_1.borderColor)(theme.borderColor.transparent)), (0, longHandHelpers_1.borderWidth)('1px')), (0, longHandHelpers_1.borderRadius)(borderRadius)), intentStyles), ($clickable && (0, tslib_1.__assign)({ cursor: 'pointer', 
         // temporary boxShadow onHover
         ':hover': hoverStyles, ':active': activeStyles }, (0, commonStyles_1.getFocusVisibleStyles)(utils)))), { ':focus': (0, tslib_1.__assign)({}, ($isFocusVisible && hoverStyles)) });
 });

package/tag/tag.js

@@ -4,7 +4,6 @@ var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var omit_1 = (0, tslib_1.__importDefault)(require("lodash/omit"));
-var button_1 = require("../button");
 var useFocusVisible_1 = require("../hooks/useFocusVisible");
 var close_1 = (0, tslib_1.__importDefault)(require("../icon/components/close"));
 var overrides_1 = require("../overrides");
@@ -13,6 +12,7 @@ var styled_components_1 = require("./styled-components");
 var utils_1 = require("./utils");
 var locale_1 = require("../locale");
 var longHandHelpers_1 = require("../helpers/longHandHelpers");
+var base_button_1 = require("../base-button");
 var Tag = (0, react_1.forwardRef)(function (props, ref) {
     var children = props.children, _a = props.closeable, closeable = _a === void 0 ? true : _a, _size = props.size, _b = props.isFocused, isFocused = _b === void 0 ? false : _b, _c = props.isHovered, isHovered = _c === void 0 ? false : _c, onActionClick = props.onActionClick, onActionKeyDown = props.onActionKeyDown, _d = props.onClick, onClick = _d === void 0 ? null : _d, _e = props.onKeyDown, onKeyDown = _e === void 0 ? null : _e, overrides = props.overrides, title = props.title, _f = props.variant, variant = _f === void 0 ? 'light' : _f, _g = props.intent, intent = _g === void 0 ? 'default' : _g, className = props.className, startEnhancer = props.startEnhancer, restProps = (0, tslib_1.__rest)(props, ["children", "closeable", "size", "isFocused", "isHovered", "onActionClick", "onActionKeyDown", "onClick", "onKeyDown", "overrides", "title", "variant", "intent", "className", "startEnhancer"]);
     var _h = (0, useFocusVisible_1.useFocusVisible)(), $isFocusVisible = _h.$isFocusVisible, onBlur = _h.onBlur, onFocus = _h.onFocus;
@@ -53,13 +53,9 @@ var Tag = (0, react_1.forwardRef)(function (props, ref) {
     };
     var titleText = title || (0, utils_1.getTextFromChildren)(children);
     var _p = (0, utils_1.getTagSizeTheme)(theme, size), clearableIconSize = _p.clearableIconSize, clearableIconButtonSize = _p.clearableIconButtonSize, clearableIconButtonBorderRadius = _p.clearableIconButtonBorderRadius;
-    var actionIconButtonOverrides = {
-        BaseButton: {
-            style: (0, tslib_1.__assign)({ height: clearableIconButtonSize, width: clearableIconButtonSize }, (0, longHandHelpers_1.borderRadius)(clearableIconButtonBorderRadius)),
-        },
-    };
+    var actionIconButtonOverrides = (0, tslib_1.__assign)({ height: clearableIconButtonSize, width: clearableIconButtonSize }, (0, longHandHelpers_1.borderRadius)(clearableIconButtonBorderRadius));
     var locale = (0, locale_1.useLocale)();
-    return ((0, jsx_runtime_1.jsxs)(Root, (0, tslib_1.__assign)({ ref: ref, "data-spaceweb": "tag", role: clickable ? 'button' : null, tabIndex: clickable ? 0 : null, onFocus: onFocus, onBlur: onBlur, className: className, onClick: onClick, onKeyDown: handleKeyDown }, sharedProps, restProps, rootProps, { children: [startEnhancer && ((0, jsx_runtime_1.jsx)(StartEnhancer, (0, tslib_1.__assign)({}, sharedProps, startEnhancerProps, { children: typeof startEnhancer === 'function' ? startEnhancer(sharedProps) : startEnhancer }), void 0)), (0, jsx_runtime_1.jsx)(Text, (0, tslib_1.__assign)({ title: titleText }, sharedProps, textProps, { children: children }), void 0), closeable ? ((0, jsx_runtime_1.jsx)(Action, (0, tslib_1.__assign)({ "aria-hidden": true, role: "presentation", onClick: onActionClick }, sharedProps, (0, omit_1.default)(actionProps, 'tabIndex'), { children: (0, jsx_runtime_1.jsx)(button_1.IconButton, (0, tslib_1.__assign)({ shape: "square", type: "button", className: "hover:spr-clr-grey", "aria-label": locale.tag.closeAriaLabel, overrides: actionIconButtonOverrides, tabIndex: actionProps === null || actionProps === void 0 ? void 0 : actionProps.tabIndex }, { children: (0, jsx_runtime_1.jsx)(ActionIcon, (0, tslib_1.__assign)({ size: clearableIconSize }, actionIconProps), void 0) }), void 0) }), void 0)) : null] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)(Root, (0, tslib_1.__assign)({ ref: ref, "data-spaceweb": "tag", role: clickable ? 'button' : null, tabIndex: clickable ? 0 : null, onFocus: onFocus, onBlur: onBlur, className: className, onClick: onClick, onKeyDown: handleKeyDown }, sharedProps, restProps, rootProps, { children: [startEnhancer && ((0, jsx_runtime_1.jsx)(StartEnhancer, (0, tslib_1.__assign)({}, sharedProps, startEnhancerProps, { children: typeof startEnhancer === 'function' ? startEnhancer(sharedProps) : startEnhancer }), void 0)), (0, jsx_runtime_1.jsx)(Text, (0, tslib_1.__assign)({ title: titleText }, sharedProps, textProps, { children: children }), void 0), closeable ? ((0, jsx_runtime_1.jsx)(Action, (0, tslib_1.__assign)({ "aria-hidden": true, role: "presentation", onClick: onActionClick }, sharedProps, (0, omit_1.default)(actionProps, 'tabIndex'), { children: (0, jsx_runtime_1.jsx)(base_button_1.BaseButton, (0, tslib_1.__assign)({ type: "button", className: ['hover:spr-clr-grey', actionIconButtonOverrides], "aria-label": locale.tag.closeAriaLabel, tabIndex: actionProps === null || actionProps === void 0 ? void 0 : actionProps.tabIndex }, { children: (0, jsx_runtime_1.jsx)(ActionIcon, (0, tslib_1.__assign)({ size: clearableIconSize }, actionIconProps), void 0) }), void 0) }), void 0)) : null] }), void 0));
 });
 Tag.displayName = 'Tag';
 exports.default = Tag;

package/tag/types.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { AvatarProps } from '../avatar';
 import { Override } from '../overrides';
 import { ClassName } from '../types';
-export declare type Intent = 'success' | 'error' | 'warning' | 'info' | 'default';
+export declare type Intent = 'success' | 'error' | 'warning' | 'info' | 'default' | 'ai';
 export declare type Variant = 'solid' | 'light';
 export declare type Size = 'xxxs' | 'sm' | 'lg';
 export declare type TagOverrides = {

package/textarea/basewebAdapters.js

@@ -4,7 +4,7 @@ var tslib_1 = require("tslib");
 var react_1 = require("react");
 var longHandHelpers_1 = require("../helpers/longHandHelpers");
 var styled_components_1 = require("./styled-components");
-var useConvertOverrides_1 = require("../helpers/baseui/useConvertOverrides");
+var overrides_1 = require("../overrides");
 var helpers_1 = require("../helpers");
 var context_1 = require("../form-control/context");
 var useDebouncedEventHandler_1 = require("../hooks/useDebouncedEventHandler");
@@ -12,22 +12,24 @@ var noop_1 = (0, tslib_1.__importDefault)(require("lodash/noop"));
 function useTextareaAdapter(props) {
     var _a;
     var _b = (0, context_1.useContextualFormProps)(props), size = _b.size, variant = _b.variant, className = _b.className, style = _b.style, intent = _b.intent, _c = _b.autoSize, autoSize = _c === void 0 ? false : _c, restProps = (0, tslib_1.__rest)(_b, ["size", "variant", "className", "style", "intent", "autoSize"]);
-    var sharedProps = (0, helpers_1.add$props)({ size: size, variant: variant, intent: intent });
+    var sharedProps = (0, react_1.useMemo)(function () { return (0, helpers_1.add$props)({ size: size, variant: variant, intent: intent }); }, [intent, size, variant]);
     var inputContainerStyles = (0, react_1.useMemo)(function () { return [className, style, styled_components_1.getTextareaInputContainerStyles]; }, [className, style]);
     var handleChange = (0, useDebouncedEventHandler_1.useDebouncedEventHandler)((_a = props.debouncedOnChange) !== null && _a !== void 0 ? _a : noop_1.default, props.onChange, props.debounceInterval || 200);
-    var overrides = (0, useConvertOverrides_1.useConvertOverrides)({
-        Root: {
-            style: [(0, tslib_1.__assign)((0, tslib_1.__assign)({ backgroundColor: 'transparent' }, (0, longHandHelpers_1.borderStyle)('none')), (0, longHandHelpers_1.borderRadius)('0px'))], // overriding baseweb borderRadius
-        },
-        InputContainer: {
-            style: inputContainerStyles,
-            props: sharedProps,
-        },
-        Input: {
-            style: styled_components_1.getTextareaInputStyles,
-            props: (0, tslib_1.__assign)({ $autoSize: autoSize, 'aria-required': restProps['aria-required'] }, sharedProps),
-        },
-    }, restProps.overrides);
+    var overrides = (0, react_1.useMemo)(function () {
+        return (0, overrides_1.mergeOverrides)({
+            Root: {
+                style: [(0, tslib_1.__assign)((0, tslib_1.__assign)({ backgroundColor: 'transparent' }, (0, longHandHelpers_1.borderStyle)('none')), (0, longHandHelpers_1.borderRadius)('0px'))], // overriding baseweb borderRadius
+            },
+            InputContainer: {
+                style: inputContainerStyles,
+                props: sharedProps,
+            },
+            Input: {
+                style: styled_components_1.getTextareaInputStyles,
+                props: (0, tslib_1.__assign)({ $autoSize: autoSize, 'aria-required': restProps['aria-required'] }, sharedProps),
+            },
+        }, restProps.overrides);
+    }, [autoSize, inputContainerStyles, sharedProps, restProps.overrides, restProps['aria-required']]);
     var rows = autoSize && !restProps.rows ? 1 : restProps.rows;
     return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, restProps), { overrides: overrides, rows: rows, onChange: handleChange });
 }

package/textarea/index.d.ts

@@ -1,3 +1,3 @@
 export { Textarea, StatefulTextarea } from './textarea';
-export { StatefulContainer, StyledTextareaContainer, StyledTextarea, STATE_CHANGE_TYPE } from 'baseui/textarea';
+export { StatefulContainer, StyledTextareaContainer, StyledTextarea, STATE_CHANGE_TYPE } from '../baseui/textarea';
 export * from './types';

package/textarea/index.js

@@ -5,7 +5,7 @@ var tslib_1 = require("tslib");
 var textarea_1 = require("./textarea");
 Object.defineProperty(exports, "Textarea", { enumerable: true, get: function () { return textarea_1.Textarea; } });
 Object.defineProperty(exports, "StatefulTextarea", { enumerable: true, get: function () { return textarea_1.StatefulTextarea; } });
-var textarea_2 = require("baseui/textarea");
+var textarea_2 = require("../baseui/textarea");
 Object.defineProperty(exports, "StatefulContainer", { enumerable: true, get: function () { return textarea_2.StatefulContainer; } });
 Object.defineProperty(exports, "StyledTextareaContainer", { enumerable: true, get: function () { return textarea_2.StyledTextareaContainer; } });
 Object.defineProperty(exports, "StyledTextarea", { enumerable: true, get: function () { return textarea_2.StyledTextarea; } });

package/textarea/styled-components.d.ts

@@ -1,4 +1,4 @@
-export declare const getTextareaInputStyles: (import("..").StyleFn<Partial<Pick<import("../input").SharedProps, "$disabled" | "$size" | "$variant">>> | (({}: {}, { $autoSize }: {
+export declare const getTextareaInputStyles: (import("..").StyleFn<Partial<Pick<import("../input").SharedProps, "$size" | "$disabled" | "$variant">>> | (({}: {}, { $autoSize }: {
     $autoSize: any;
 }) => "overflow-hidden" | "resize") | (({ theme }: {
     theme: any;

package/textarea/textarea.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StatefulTextarea = exports.Textarea = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var textarea_1 = require("baseui/textarea");
+var textarea_1 = require("../baseui/textarea");
 var basewebAdapters_1 = (0, tslib_1.__importDefault)(require("./basewebAdapters"));
 var useAutoFocus_1 = (0, tslib_1.__importDefault)(require("../hooks/useAutoFocus"));
 var useAutoSizeTextarea_1 = (0, tslib_1.__importDefault)(require("./useAutoSizeTextarea"));

package/textarea/types.d.ts

@@ -1,5 +1,5 @@
 import { Ref } from 'react';
-import { TextareaProps as BaseTextareaProps, StatefulTextareaProps as BaseStatefulTextareaProps } from 'baseui/textarea';
+import { TextareaProps as BaseTextareaProps, StatefulTextareaProps as BaseStatefulTextareaProps } from '../baseui/textarea';
 import { InputSize, InputVariant, FocusPosition } from '../input';
 import { Intent, SpacewebComponentProps } from '../types';
 import { Override } from '../overrides';

package/theme/Provider.js

@@ -5,10 +5,7 @@ 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 baseui_1 = require("baseui");
 var usePrevious_1 = (0, tslib_1.__importDefault)(require("../hooks/usePrevious"));
-var useMemoizedStyletron_1 = (0, tslib_1.__importDefault)(require("../style/useMemoizedStyletron"));
-var themes_1 = (0, tslib_1.__importDefault)(require("../themes"));
 var useIsomorphicLayoutEffect_1 = require("../hooks/useIsomorphicLayoutEffect");
 var context_1 = require("./context");
 var THEME_NAMES = ['hyperspace-light', 'space-light', 'space-dark', 'hyperspace-dark'];
@@ -18,9 +15,7 @@ var addDensityToTheme = function (theme, density) {
 };
 var ThemeProvider = function (props) {
     var theme = props.theme, children = props.children, elementToApplyClass = props.containerElement, density = props.density;
-    var _a = (0, tslib_1.__read)((0, react_1.useState)(null), 2), containerElementRef = _a[0], setContainerElementRef = _a[1];
     var outerTheme = (0, context_1.useTheme)();
-    var _b = (0, tslib_1.__read)((0, useMemoizedStyletron_1.default)(), 2), baseUITheme = _b[1];
     if (typeof outerTheme === 'undefined' && typeof theme === 'undefined') {
         throw new Error('No Theme present in context & props');
     }
@@ -50,16 +45,15 @@ var ThemeProvider = function (props) {
         }
         return addDensityToTheme(outerTheme, density);
     }, [theme, outerTheme, density]);
-    var themeName = value.theme.name, prevThemName = (0, usePrevious_1.default)(themeName), containerElement = elementToApplyClass !== null && elementToApplyClass !== void 0 ? elementToApplyClass : containerElementRef, prevContainerElement = (0, usePrevious_1.default)(containerElement);
+    var themeName = value.theme.name, prevThemName = (0, usePrevious_1.default)(themeName), containerElement = elementToApplyClass, prevContainerElement = (0, usePrevious_1.default)(containerElement);
     (0, useIsomorphicLayoutEffect_1.useIsomorphicLayoutEffect)(function () {
         prevThemName && (prevContainerElement === null || prevContainerElement === void 0 ? void 0 : prevContainerElement.classList.remove(prevThemName));
         THEME_NAMES.forEach(function (name) { return containerElement === null || containerElement === void 0 ? void 0 : containerElement.classList.remove(name); });
         containerElement === null || containerElement === void 0 ? void 0 : containerElement.classList.add(themeName);
     }, [themeName, prevThemName, containerElement, prevContainerElement]);
-    var baseuiThemeWithDirection = (0, react_1.useMemo)(function () { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, themes_1.default[themeName]), { direction: value.direction || 'ltr' })); }, [value.direction, themeName]);
     /**
      * Box component/styled cannot be used here as styletron might not be initialized when ThemeProvider renders for the first time.
      */
-    return ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ "data-testid": "theme-provider-container", style: { display: 'contents' }, ref: setContainerElementRef }, { children: (0, jsx_runtime_1.jsx)(baseui_1.ThemeProvider, (0, tslib_1.__assign)({ theme: baseuiThemeWithDirection !== null && baseuiThemeWithDirection !== void 0 ? baseuiThemeWithDirection : baseUITheme }, { children: (0, jsx_runtime_1.jsx)(Provider, (0, tslib_1.__assign)({ value: value }, { children: children }), void 0) }), void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ "data-testid": "theme-provider-container", style: { display: 'contents' }, className: elementToApplyClass ? undefined : themeName }, { children: (0, jsx_runtime_1.jsx)(Provider, (0, tslib_1.__assign)({ value: value }, { children: children }), void 0) }), void 0));
 };
 exports.ThemeProvider = ThemeProvider;