@sprinklrjs/spaceweb 10.1.0

package/esm/tag/styled-components.js

@@ -0,0 +1,46 @@
+import { __assign } from "tslib";
+import { borderRadius as borderRadiusLonghand, borderStyle, borderColor, borderWidth, margin, } from '../helpers/longHandHelpers';
+import { getComponentSizeTheme, getComponentTheme } from '../helpers/themeHelpers';
+import { getFocusVisibleStyles } from '../helpers/commonStyles';
+import { styled } from '../style';
+import { getIntentStyles } from './intentStyles';
+export var StyledStartEnhancer = styled('div', 'inline-flex items-center', function (_a) {
+    var px2rem = _a.px2rem;
+    return ({
+        marginRight: px2rem(6),
+    });
+});
+export var StyledRoot = styled('span', 'inline-flex items-center box-border', function (utils, _a) {
+    var _b;
+    var $withStartEnhancer = _a.$withStartEnhancer, $size = _a.$size, $closeable = _a.$closeable, $intent = _a.$intent, $variant = _a.$variant, $clickable = _a.$clickable, $isFocusVisible = _a.$isFocusVisible;
+    var direction = utils.direction, theme = utils.theme, px2rem = utils.px2rem;
+    var paddingStartDir = direction === 'rtl' ? 'paddingRight' : 'paddingLeft';
+    var paddingEndDir = direction === 'rtl' ? 'paddingLeft' : 'paddingRight';
+    var borderRadius = getComponentTheme(theme, 'tag').borderRadius;
+    var height = getComponentSizeTheme(theme, 'tag', $size, 'lg').height;
+    var paddingStart = $size === 'sm' ? px2rem(10) : theme.padding['3'];
+    if ($withStartEnhancer)
+        paddingStart = theme.padding['1'];
+    var paddingEnd = $closeable ? '0' : paddingStart;
+    var typographyStyles = $intent === 'default'
+        ? __assign(__assign({}, theme.typography.l2), { fontWeight: theme.fontWeight.normal }) : __assign(__assign({}, theme.typography.l2), { fontWeight: theme.fontWeight.semibold });
+    var hoverStyles = __assign({ boxShadow: 'inset 0px 0px 100px rgba(0, 0, 0, 0.08)' }, borderColor(theme.spr.border06));
+    var activeStyles = __assign({}, borderColor(theme.spr.interactive01));
+    return __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign((_b = { height: height }, _b[paddingStartDir] = paddingStart, _b[paddingEndDir] = paddingEnd, _b.maxWidth = 'none', _b), typographyStyles), margin(0)), borderStyle('solid')), borderColor(theme.borderColor.transparent)), borderWidth('1px')), borderRadiusLonghand(borderRadius)), getIntentStyles(theme, $intent, $variant)), ($clickable && __assign({ cursor: 'pointer', 
+        // temporary boxShadow onHover
+        ':hover': hoverStyles, ':active': activeStyles }, getFocusVisibleStyles(utils)))), { ':focus': __assign({}, ($isFocusVisible && hoverStyles)) });
+});
+export var StyledAction = styled('span', 'cursor-pointer inline-flex items-center justify-center pl-2 pr-2', function (_a) {
+    var _b;
+    var px2rem = _a.px2rem, direction = _a.direction;
+    var marginStartDir = direction === 'rtl' ? 'marginRight' : 'marginLeft';
+    return _b = {},
+        _b[marginStartDir] = px2rem(6),
+        _b;
+});
+export var StyledText = styled('span', 'truncate', function (_a) {
+    var px2rem = _a.px2rem;
+    return ({
+        maxWidth: px2rem(128),
+    });
+});

package/esm/tag/tag.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { TagProps } from './types';
+declare const Tag: import("react").ForwardRefExoticComponent<TagProps & import("react").RefAttributes<HTMLElement>>;
+export default Tag;

package/esm/tag/tag.js

@@ -0,0 +1,55 @@
+import { __assign, __read, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback } from 'react';
+import { IconButton } from '../button';
+import { getComponentTheme } from '../helpers/themeHelpers';
+import { useFocusVisible } from '../hooks/useFocusVisible';
+import CloseIcon from '../icon/components/close';
+import { useOverrides } from '../overrides';
+import { useStyle } from '../style';
+import { StyledAction, StyledRoot, StyledStartEnhancer, StyledText } from './styled-components';
+import { getTextFromChildren } from './utils';
+var Tag = forwardRef(function (props, ref) {
+    var children = props.children, _a = props.closeable, closeable = _a === void 0 ? true : _a, _b = props.size, size = _b === void 0 ? 'lg' : _b, _c = props.isFocused, isFocused = _c === void 0 ? false : _c, _d = props.isHovered, isHovered = _d === void 0 ? false : _d, onActionClick = props.onActionClick, onActionKeyDown = props.onActionKeyDown, _e = props.onClick, onClick = _e === void 0 ? null : _e, _f = props.onKeyDown, onKeyDown = _f === void 0 ? null : _f, overrides = props.overrides, title = props.title, _g = props.variant, variant = _g === void 0 ? 'light' : _g, _h = props.intent, intent = _h === void 0 ? 'default' : _h, className = props.className, startEnhancer = props.startEnhancer, restProps = __rest(props, ["children", "closeable", "size", "isFocused", "isHovered", "onActionClick", "onActionKeyDown", "onClick", "onKeyDown", "overrides", "title", "variant", "intent", "className", "startEnhancer"]);
+    var _j = useFocusVisible(), $isFocusVisible = _j.$isFocusVisible, onBlur = _j.onBlur, onFocus = _j.onFocus;
+    var theme = useStyle().theme;
+    var handleKeyDown = useCallback(function (event) {
+        if (event.currentTarget !== event.target) {
+            return;
+        }
+        var key = event.key;
+        if (onClick && key === 'Enter') {
+            onClick(event);
+        }
+        if (closeable && (key === 'Backspace' || key === 'Delete')) {
+            onActionClick === null || onActionClick === void 0 ? void 0 : onActionClick(event);
+            onActionKeyDown === null || onActionKeyDown === void 0 ? void 0 : onActionKeyDown(event);
+        }
+        if (onKeyDown) {
+            onKeyDown(event);
+        }
+    }, [closeable, onActionClick, onActionKeyDown, onClick, onKeyDown]);
+    var _k = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Root, StyledRoot), 2), Root = _k[0], rootProps = _k[1];
+    var _l = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Action, StyledAction), 2), Action = _l[0], actionProps = _l[1];
+    var _m = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.ActionIcon, CloseIcon), 2), ActionIcon = _m[0], actionIconProps = _m[1];
+    var _o = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Text, StyledText), 2), Text = _o[0], textProps = _o[1];
+    var _p = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.StartEnhancer, StyledStartEnhancer), 2), StartEnhancer = _p[0], startEnhancerProps = _p[1];
+    var clickable = typeof onClick === 'function';
+    var sharedProps = {
+        $clickable: clickable,
+        $closeable: closeable,
+        $isFocused: isFocused,
+        $isHovered: isHovered,
+        $variant: variant,
+        $isFocusVisible: $isFocusVisible,
+        $size: size,
+        $withStartEnhancer: !!startEnhancer,
+        $intent: intent,
+    };
+    var titleText = title || getTextFromChildren(children);
+    var actionSize = 8;
+    var actionButtonBorderRadius = getComponentTheme(theme, 'tag').actionButtonBorderRadius;
+    return (_jsxs(Root, __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 && (_jsx(StartEnhancer, __assign({}, sharedProps, startEnhancerProps, { children: typeof startEnhancer === 'function' ? startEnhancer(sharedProps) : startEnhancer }), void 0)), _jsx(Text, __assign({ title: titleText }, sharedProps, textProps, { children: children }), void 0), closeable ? (_jsx(Action, __assign({ "aria-hidden": true, role: "presentation", onClick: onActionClick }, sharedProps, actionProps, { children: _jsx(IconButton, __assign({ type: "button", size: "xxxs", shape: "square", className: "hover:spr-clr-grey" }, { children: _jsx(ActionIcon, __assign({}, actionIconProps), void 0) }), void 0) }), void 0)) : null] }), void 0));
+});
+Tag.displayName = 'Tag';
+export default Tag;

package/esm/tag/types.d.ts

@@ -0,0 +1,53 @@
+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 Variant = 'solid' | 'light';
+export declare type Size = 'sm' | 'lg';
+export declare type TagOverrides = {
+    Root?: Override<SharedProps & Record<string, any>>;
+    Action?: Override<SharedProps & Record<string, any>>;
+    ActionIcon?: Override<SharedProps & Record<string, any>>;
+    Text?: Override<SharedProps & Record<string, any>>;
+    StartEnhancer?: Override<SharedProps & Record<string, any>>;
+};
+export declare type TagProps = {
+    closeable?: boolean;
+    isFocused?: boolean;
+    isHovered?: boolean;
+    children?: React.ReactNode;
+    title?: string;
+    onActionClick?: (e: Event, children?: React.ReactNode) => any;
+    onActionKeyDown?: (e: Event, children?: React.ReactNode) => any;
+    onClick?: (event: Event) => any;
+    onKeyDown?: (event: Event) => any;
+    className?: ClassName;
+    overrides?: TagOverrides;
+    startEnhancer?: React.ReactNode | ((props: {
+        $withStartEnhancer: boolean;
+        $size: Size;
+        $intent: Intent;
+        $variant: Variant;
+    }) => React.ReactNode);
+    intent?: Intent;
+    variant?: Variant;
+    size?: Size;
+};
+export declare type AvatarTagProps = Omit<TagProps, 'size' | 'overrides'> & {
+    avatarProps: AvatarProps;
+    overrides?: TagProps['overrides'] & {
+        StartEnhancer?: Override<Record<string, any>>;
+    };
+};
+export declare type SharedProps = {
+    $clickable?: boolean;
+    $closeable?: boolean;
+    $isFocused?: boolean;
+    $isHovered?: boolean;
+    $isFocusVisible: boolean;
+    $withStartEnhancer: boolean;
+    $intent?: Intent;
+    $variant?: Variant;
+    $size?: Size;
+};

package/esm/tag/types.js

@@ -0,0 +1 @@
+export {};

package/esm/tag/utils.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare function getTextFromChildren(children: React.ReactNode): string | null;

package/esm/tag/utils.js

@@ -0,0 +1,19 @@
+import * as React from 'react';
+var JOINABLE_TYPES = new Set(['string', 'number']);
+// Checks the children of a React component to ensure every value is a number
+// or a string. If they are, they are joined and returned. Useful for collecting
+// text from the child of a node to use as an attribute.
+export function getTextFromChildren(children) {
+    var childList = React.Children.toArray(children).filter(function (child) { return child !== null && child !== undefined; });
+    if (!childList.length) {
+        return null;
+    }
+    var isJoinable = childList.every(function (child) { return JOINABLE_TYPES.has(typeof child); });
+    if (!isJoinable) {
+        return null;
+    }
+    // Join on an empty string to preserve React's whitespace handling:
+    // <Tag>foo{'bar'}baz</Tag> => 'foobar'
+    // <Tag>foo {'bar'} baz</Tag> => 'foo bar baz'
+    return childList.join('');
+}

package/esm/test-utils/test-provider/TestProvider.d.ts

@@ -0,0 +1,6 @@
+import { ReactElement } from 'react';
+import * as React from 'react';
+import SpacewebProvider from '../../spacewebProvider';
+declare type WithOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+declare const TestProvider: (props: WithOptional<WithOptional<React.ComponentProps<typeof SpacewebProvider>, 'theme'>, 'styleEngine'>) => ReactElement;
+export default TestProvider;

package/esm/test-utils/test-provider/TestProvider.js

@@ -0,0 +1,14 @@
+import { __assign } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import SpacewebProvider from '../../spacewebProvider';
+import { getStyleEngine } from '../../styleEngine';
+import { useTheme } from '../../theme';
+import { convertToTestableTheme } from './helpers';
+var TestProvider = function (props) {
+    var themeModule = useTheme();
+    var testableTheme = useMemo(function () { return convertToTestableTheme(themeModule); }, [themeModule]);
+    var _a = props.styleEngine, styleEngine = _a === void 0 ? getStyleEngine() : _a, _b = props.theme, theme = _b === void 0 ? testableTheme : _b;
+    return _jsx(SpacewebProvider, __assign({ theme: theme, styleEngine: styleEngine }, props, { debug: true }), void 0);
+};
+export default TestProvider;

package/esm/test-utils/test-provider/helpers.d.ts

@@ -0,0 +1,27 @@
+import { Direction, ThemeModule } from '@sprinklrjs/spaceweb-themes/types';
+import { StyleUtils } from '../../types';
+declare type Breakpoint = [string, string];
+declare type ScreenList = {
+    [name: string]: string;
+};
+/**
+ * Gets screens by breakpoint name from the theme
+ */
+export declare const getScreens: () => ScreenList;
+/**
+ * Gets a tuple of all breakpoints from the theme
+ */
+export declare const getBreakpoints: () => Breakpoint[];
+/**
+ * Setup events for responsive testing
+ */
+export declare const setupBreakpoints: () => void;
+/**
+ * Gets CSS declaration of the first element matching `[data-testid=]`
+ */
+export declare const getCSSByTestId: (testId: string) => CSSStyleDeclaration;
+export declare const getCSSByBasewebId: (basewebId: string) => CSSStyleDeclaration;
+export declare const getCSSFromEl: (el: any) => CSSStyleDeclaration;
+export declare const convertToTestableTheme: (testTheme: ThemeModule) => ThemeModule;
+export declare const getTestStyleUtils: (direction?: Direction) => StyleUtils;
+export {};

package/esm/test-utils/test-provider/helpers.js

@@ -0,0 +1,55 @@
+import { __assign } from "tslib";
+import matchMediaPolyfill from 'mq-polyfill';
+import { Client, Server } from 'styletron-engine-atomic';
+import { driver } from 'styletron-standard';
+import hyperspaceLight from '@sprinklrjs/spaceweb-themes/hyperspace/light';
+import _buildUtils from '../../style/_buildUtils';
+import { SPACEWEB_STYLE_PREFIX } from '../../styleEngine';
+import { covertCSSVariablesToValue } from '../../helpers';
+/**
+ * Gets screens by breakpoint name from the theme
+ */
+export var getScreens = function () { return hyperspaceLight.theme.screens; };
+/**
+ * Gets a tuple of all breakpoints from the theme
+ */
+export var getBreakpoints = function () { return Object.entries(getScreens()); };
+/**
+ * Setup events for responsive testing
+ */
+export var setupBreakpoints = function () {
+    matchMediaPolyfill(window);
+    Object.values(getScreens()).forEach(function (maxWidth) { return window.matchMedia("(max-width: ".concat(maxWidth, ")")); });
+    window.resizeTo = function resizeTo(width, height) {
+        Object.assign(this, {
+            innerWidth: width,
+            innerHeight: height,
+            outerWidth: width,
+            outerHeight: height,
+        }).dispatchEvent(new this.Event('resize'));
+    };
+};
+/**
+ * Gets CSS declaration of the first element matching `[data-testid=]`
+ */
+export var getCSSByTestId = function (testId) {
+    var el = window.document.querySelectorAll("[data-testid=\"".concat(testId, "\"]"))[0];
+    return window.getComputedStyle(el);
+};
+export var getCSSByBasewebId = function (basewebId) {
+    var el = window.document.querySelectorAll("[data-baseweb=\"".concat(basewebId, "\"]"))[0];
+    return window.getComputedStyle(el);
+};
+export var getCSSFromEl = function (el) { return window.getComputedStyle(el); };
+export var convertToTestableTheme = function (testTheme) {
+    var classes = testTheme.classes, theme = testTheme.theme;
+    return __assign(__assign({}, testTheme), { classes: covertCSSVariablesToValue(classes), theme: covertCSSVariablesToValue(theme) });
+};
+export var getTestStyleUtils = function (direction) {
+    if (direction === void 0) { direction = 'ltr'; }
+    var isServer = typeof window === 'undefined';
+    var options = { prefix: SPACEWEB_STYLE_PREFIX };
+    var styletron = isServer ? new Server(options) : new Client(options);
+    var css = function (arg) { return driver(arg, styletron); };
+    return _buildUtils(__assign({ direction: direction }, convertToTestableTheme(hyperspaceLight)), css);
+};

package/esm/test-utils/test-provider/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TestProvider } from './TestProvider';
+export { getScreens, getBreakpoints, setupBreakpoints, getCSSByTestId, getCSSByBasewebId, getCSSFromEl, getTestStyleUtils, } from './helpers';

package/esm/test-utils/test-provider/index.js

@@ -0,0 +1,2 @@
+export { default as TestProvider } from './TestProvider';
+export { getScreens, getBreakpoints, setupBreakpoints, getCSSByTestId, getCSSByBasewebId, getCSSFromEl, getTestStyleUtils, } from './helpers';

package/esm/test-utils/test-provider/testableThemes.d.ts

@@ -0,0 +1,5 @@
+import { ThemeModule } from '@sprinklrjs/spaceweb-themes/types';
+export declare const sprLight: ThemeModule;
+export declare const sprDark: ThemeModule;
+export declare const hyperspaceLight: ThemeModule;
+export declare const hyperspaceDark: ThemeModule;

package/esm/test-utils/test-provider/testableThemes.js

@@ -0,0 +1,9 @@
+import baseSprLight from '@sprinklrjs/spaceweb-themes/space/light';
+import baseSprDark from '@sprinklrjs/spaceweb-themes/space/dark';
+import baseHyperspaceLight from '@sprinklrjs/spaceweb-themes/hyperspace/light';
+import baseHyperspaceDark from '@sprinklrjs/spaceweb-themes/hyperspace/dark';
+import { convertToTestableTheme } from './helpers';
+export var sprLight = convertToTestableTheme(baseSprLight);
+export var sprDark = convertToTestableTheme(baseSprDark);
+export var hyperspaceLight = convertToTestableTheme(baseHyperspaceLight);
+export var hyperspaceDark = convertToTestableTheme(baseHyperspaceDark);

package/esm/textarea/basewebAdapters.d.ts

@@ -0,0 +1,3 @@
+import { TextareaProps } from './types';
+declare function useTextareaAdapter<T extends TextareaProps>(props: T): Omit<T, 'size' | 'variant' | 'className' | 'style' | 'intent' | 'autoSize'>;
+export default useTextareaAdapter;

package/esm/textarea/basewebAdapters.js

@@ -0,0 +1,32 @@
+import { __assign, __rest } from "tslib";
+import { useMemo } from 'react';
+import { borderStyle } from '../helpers/longHandHelpers';
+import { getTextareaInputContainerStyles, getTextareaInputStyles } from './styled-components';
+import { useConvertOverrides } from '../helpers/baseui/useConvertOverrides';
+import { add$props } from '../helpers';
+import { useContextualFormProps } from '../form-control/context';
+import { useDebouncedEventHandler } from '../hooks/useDebouncedEventHandler';
+import _noop from 'lodash/noop';
+function useTextareaAdapter(props) {
+    var _a;
+    var _b = 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 = __rest(_b, ["size", "variant", "className", "style", "intent", "autoSize"]);
+    var sharedProps = add$props({ size: size, variant: variant, intent: intent });
+    var inputContainerStyles = useMemo(function () { return [className, style, getTextareaInputContainerStyles]; }, [className, style]);
+    var handleChange = useDebouncedEventHandler((_a = props.debouncedOnChange) !== null && _a !== void 0 ? _a : _noop, props.onChange, props.debounceInterval || 200);
+    var overrides = useConvertOverrides({
+        Root: {
+            style: [__assign({ backgroundColor: 'transparent' }, borderStyle('none'))],
+        },
+        InputContainer: {
+            style: inputContainerStyles,
+            props: sharedProps,
+        },
+        Input: {
+            style: getTextareaInputStyles,
+            props: __assign({ onChange: handleChange, $autoSize: autoSize }, sharedProps),
+        },
+    }, restProps.overrides);
+    var rows = autoSize && !restProps.rows ? 1 : restProps.rows;
+    return __assign(__assign({}, restProps), { overrides: overrides, rows: rows });
+}
+export default useTextareaAdapter;

package/esm/textarea/index.d.ts

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

package/esm/textarea/index.js

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

package/esm/textarea/styled-components.d.ts

@@ -0,0 +1,11 @@
+export declare const getTextareaInputStyles: (import("..").StyleFn<import("../input").SharedProps> | (({}: {}, { $autoSize }: {
+    $autoSize: any;
+}) => "overflow-hidden" | "resize") | (({ theme }: {
+    theme: any;
+}) => {
+    width: string;
+    '::placeholder': {
+        color: any;
+    };
+}))[];
+export declare const getTextareaInputContainerStyles: import("..").Styles[];

package/esm/textarea/styled-components.js

@@ -0,0 +1,14 @@
+import { getInputContainerStyles, getInputStyles } from '../input/styled-components';
+//todo: need to use withThemeOverride to create overriden styled version of comps
+export var getTextareaInputStyles = [
+    getInputStyles,
+    function (_a, _b) {
+        var $autoSize = _b.$autoSize;
+        return ($autoSize ? 'overflow-hidden' : 'resize');
+    },
+    function (_a) {
+        var theme = _a.theme;
+        return ({ width: '100vw', '::placeholder': { color: theme.spr.textPlaceholder } });
+    },
+];
+export var getTextareaInputContainerStyles = [getInputContainerStyles, 'max-w-full', { width: 'min-content' }];

package/esm/textarea/textarea.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+import { TextareaProps, StatefulTextareaProps } from './types';
+export declare const Textarea: {
+    (props: TextareaProps): ReactElement;
+    displayName: string;
+};
+export declare const StatefulTextarea: {
+    (props: StatefulTextareaProps): ReactElement;
+    displayName: string;
+};

package/esm/textarea/textarea.js

@@ -0,0 +1,33 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Textarea as BaseTextarea, StatefulTextarea as BaseStatefulTextarea } from 'baseui/textarea';
+import useTextareaAdapter from './basewebAdapters';
+import useAutoFocus from '../hooks/useAutoFocus';
+import useAutoSizeTextarea from './useAutoSizeTextarea';
+// @ts-ignore
+BaseTextarea.displayName = 'BaseUITextarea';
+BaseStatefulTextarea.displayName = 'BaseUIStatefulTextarea';
+export var Textarea = function (props) {
+    var autoFocus = props.autoFocus, restProps = __rest(props, ["autoFocus"]);
+    var autoFocusRef = useAutoFocus({ autoFocus: autoFocus, inputRef: restProps.inputRef });
+    var inputRef = useAutoSizeTextarea({
+        value: restProps.value,
+        autoSize: restProps.autoSize,
+        inputRef: autoFocusRef,
+    });
+    var adaptedProps = useTextareaAdapter(restProps);
+    return _jsx(BaseTextarea, __assign({}, adaptedProps, { inputRef: inputRef }), void 0);
+};
+Textarea.displayName = 'Textarea';
+export var StatefulTextarea = function (props) {
+    var autoFocus = props.autoFocus, restProps = __rest(props, ["autoFocus"]);
+    var autoFocusRef = useAutoFocus({ autoFocus: autoFocus, inputRef: restProps.inputRef });
+    var inputRef = useAutoSizeTextarea({
+        value: restProps.value,
+        autoSize: restProps.autoSize,
+        inputRef: autoFocusRef,
+    });
+    var adaptedProps = useTextareaAdapter(restProps);
+    return _jsx(BaseStatefulTextarea, __assign({}, adaptedProps, { inputRef: inputRef }), void 0);
+};
+StatefulTextarea.displayName = 'StatefulTextarea';

package/esm/textarea/types.d.ts

@@ -0,0 +1,27 @@
+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';
+export declare type TextareaProps = SpacewebComponentProps<Omit<BaseTextareaProps, 'size' | 'overrides' | 'autoFocus'>> & {
+    size?: InputSize;
+    variant?: InputVariant;
+    overrides?: {
+        [key in keyof BaseTextareaProps['overrides']]?: Override<any>;
+    };
+    intent?: Intent;
+    debouncedOnChange?: BaseTextareaProps['onChange'];
+    debounceInterval?: number;
+    autoFocus?: FocusPosition;
+    autoSize?: boolean;
+};
+export declare type StatefulTextareaProps = SpacewebComponentProps<Omit<BaseStatefulTextareaProps, 'size' | 'overrides' | 'autoFocus'>> & {
+    size?: InputSize;
+    variant?: InputVariant;
+    overrides?: {
+        [key in keyof BaseStatefulTextareaProps['overrides']]?: Override<any>;
+    };
+    debouncedOnChange?: BaseStatefulTextareaProps['onChange'];
+    debounceInterval?: number;
+    autoFocus?: FocusPosition;
+    autoSize?: boolean;
+};

package/esm/textarea/types.js

@@ -0,0 +1 @@
+export {};

package/esm/textarea/useAutoSizeTextarea.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { TextareaProps } from './types';
+declare const useAutoSizeTextarea: ({ value, inputRef, autoSize, }: {
+    value: TextareaProps['value'];
+    inputRef: React.RefObject<HTMLTextAreaElement>;
+    autoSize: TextareaProps['autoSize'];
+}) => React.RefObject<HTMLTextAreaElement>;
+export default useAutoSizeTextarea;

package/esm/textarea/useAutoSizeTextarea.js

@@ -0,0 +1,14 @@
+import { useLayoutEffect } from 'react';
+var useAutoSizeTextarea = function (_a) {
+    var value = _a.value, inputRef = _a.inputRef, autoSize = _a.autoSize;
+    useLayoutEffect(function () {
+        if (autoSize && inputRef.current) {
+            inputRef.current.style.height = 'auto';
+            if (inputRef.current.scrollHeight > 0) {
+                inputRef.current.style.height = "".concat(inputRef.current.scrollHeight, "px");
+            }
+        }
+    }, [value, autoSize, inputRef]);
+    return inputRef;
+};
+export default useAutoSizeTextarea;

package/esm/theme/context.d.ts

@@ -0,0 +1,14 @@
+import { ReactElement, PropsWithChildren } from 'react';
+import { ThemeContext } from '../types';
+import { ThemeProviderT } from './types';
+import type { Density } from '@sprinklrjs/spaceweb-themes/types';
+export declare const themeContext: import("react").Context<ThemeContext>;
+export declare const useTheme: () => ThemeContext;
+declare type Props = PropsWithChildren<{
+    theme?: ThemeProviderT;
+    containerElement?: HTMLElement | null;
+    density?: Density;
+}>;
+export declare const ThemeProvider: (props: Props) => ReactElement;
+export declare const ThemeConsumer: import("react").Consumer<ThemeContext>;
+export {};

package/esm/theme/context.js

@@ -0,0 +1,65 @@
+import { __assign, __read } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, useState } from 'react';
+import _merge from 'lodash/merge';
+import hyperspaceLight from '@sprinklrjs/spaceweb-themes/hyperspace/light';
+import { ThemeProvider as BaseUIThemProvider } from 'baseui';
+import usePrevious from '../hooks/usePrevious';
+import useMemoizedStyletron from '../style/useMemoizedStyletron';
+import SPACEWEB_THEME_VS_BASEUI_THEME from '../themes';
+import { useIsomorphicLayoutEffect } from '../hooks/useIsomorphicLayoutEffect';
+//todo: remove default sprLight, too many tests failing on removal
+export var themeContext = createContext(hyperspaceLight);
+export var useTheme = function () { return useContext(themeContext); };
+var THEME_NAMES = ['hyperspace-light', 'space-light', 'space-dark', 'hyperspace-dark'];
+var addDensityToTheme = function (theme, density) {
+    var _a;
+    return (__assign(__assign({}, theme), { theme: __assign(__assign({}, theme.theme), { density: density || ((_a = theme.theme) === null || _a === void 0 ? void 0 : _a.density) }) }));
+};
+export var ThemeProvider = function (props) {
+    var _a;
+    var theme = props.theme, children = props.children, elementToApplyClass = props.containerElement, density = props.density;
+    var _b = __read(useState(null), 2), containerElementRef = _b[0], setContainerElementRef = _b[1];
+    var outerTheme = useTheme();
+    var _c = __read(useMemoizedStyletron(), 2), baseUITheme = _c[1];
+    if (typeof outerTheme === 'undefined' && typeof theme === 'undefined') {
+        throw new Error('No Theme present in context & props');
+    }
+    var Provider = themeContext.Provider;
+    var value = useMemo(function () {
+        var _a, _b;
+        if (theme) {
+            var newTheme = void 0;
+            if (typeof theme === 'function') {
+                newTheme = theme(outerTheme);
+            }
+            else {
+                var newThemeName = (_a = theme.theme) === null || _a === void 0 ? void 0 : _a.name, outerThemeName = (_b = outerTheme === null || outerTheme === void 0 ? void 0 : outerTheme.theme) === null || _b === void 0 ? void 0 : _b.name, 
+                // theme should be merged if both the outerTheme & themeToOverride has same name
+                shouldMergeThemes = !newThemeName || !outerThemeName || newThemeName === outerThemeName;
+                if (shouldMergeThemes) {
+                    newTheme = _merge({}, outerTheme, theme);
+                }
+                else {
+                    newTheme = __assign({ direction: outerTheme === null || outerTheme === void 0 ? void 0 : outerTheme.direction }, theme);
+                }
+            }
+            if (typeof newTheme !== 'object') {
+                throw new Error('theme has to be an object of shape {theme : {}, classes : {}}');
+            }
+            return addDensityToTheme(newTheme, density);
+        }
+        return addDensityToTheme(outerTheme, density);
+    }, [theme, outerTheme, density]);
+    var themeName = value.theme.name, prevThemName = usePrevious(themeName), containerElement = elementToApplyClass !== null && elementToApplyClass !== void 0 ? elementToApplyClass : containerElementRef, prevContainerElement = usePrevious(containerElement);
+    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]);
+    /**
+     * Box component/styled cannot be used here as styletron might not be initialized when ThemeProvider renders for the first time.
+     */
+    return (_jsx("div", __assign({ "data-testid": "theme-provider-container", style: { display: 'contents' }, ref: setContainerElementRef }, { children: _jsx(BaseUIThemProvider, __assign({ theme: (_a = SPACEWEB_THEME_VS_BASEUI_THEME[themeName]) !== null && _a !== void 0 ? _a : baseUITheme }, { children: _jsx(Provider, __assign({ value: value }, { children: children }), void 0) }), void 0) }), void 0));
+};
+export var ThemeConsumer = themeContext.Consumer;

package/esm/theme/index.d.ts

@@ -0,0 +1,2 @@
+export * from './context';
+export * from './types';

package/esm/theme/index.js

@@ -0,0 +1,2 @@
+export * from './context';
+export * from './types';

package/esm/theme/types.d.ts

@@ -0,0 +1,6 @@
+import { ThemeContext } from '../types';
+declare type RecursivePartial<T> = {
+    [P in keyof T]?: T[P] extends (infer U)[] ? RecursivePartial<U>[] : T[P] extends object ? RecursivePartial<T[P]> : T[P];
+};
+export declare type ThemeProviderT = ((theme?: ThemeContext) => ThemeContext) | RecursivePartial<ThemeContext>;
+export {};

package/esm/theme/types.js

@@ -0,0 +1 @@
+export {};

package/esm/themes/dark-theme.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @author Yash Soni
+ * @author Ivan Torres
+ */
+import { Theme } from 'baseui/theme';
+export declare const DarkTheme: Theme;

package/esm/themes/dark-theme.js

@@ -0,0 +1,9 @@
+/**
+ * @author Yash Soni
+ * @author Ivan Torres
+ */
+import { __assign } from "tslib";
+/* eslint import/prefer-default-export: 0 */
+import { createTheme, DarkTheme as BaseuiTheme, darkThemePrimitives as primitives } from 'baseui';
+import { sharedPrimitives } from './shared';
+export var DarkTheme = __assign(__assign({}, createTheme(__assign(__assign({}, primitives), sharedPrimitives))), { name: 'dark', colors: BaseuiTheme.colors });