@sprinklrjs/spaceweb 10.1.0

package/esm/icon/icon.js

@@ -0,0 +1,16 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { StyledSvg } from './styled-components';
+var Icon = forwardRef(function (props, ref) {
+    var children = props.children, title = props.title, size = props.size, restProps = __rest(props, ["children", "title", "size"]);
+    var sharedProps = {
+        $size: size,
+    };
+    return (_jsxs(StyledSvg, __assign({ "data-spaceweb": "icon", ref: ref }, sharedProps, restProps, { children: [title ? _jsx("title", { children: title }, void 0) : null, children] }), void 0));
+});
+Icon.defaultProps = {
+    size: 12,
+};
+Icon.displayName = 'Icon';
+export default Icon;

package/esm/icon/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Icon } from './icon';
+export * from './types';

package/esm/icon/index.js

@@ -0,0 +1,2 @@
+export { default as Icon } from './icon';
+export * from './types';

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

@@ -0,0 +1 @@
+export declare const StyledSvg: import("../style/styled").StyledComponent;

package/esm/icon/styled-components.js

@@ -0,0 +1,10 @@
+import { styled } from '../style';
+var baseDimension = function (_a, props) {
+    var px2rem = _a.px2rem;
+    var sizeInRem = px2rem(props.$size);
+    return {
+        height: sizeInRem,
+        width: sizeInRem,
+    };
+};
+export var StyledSvg = styled('svg', 'inline-block fill-current', baseDimension);

package/esm/icon/types.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { SpacewebComponentProps } from '../types';
+export declare type Size = number;
+export declare type IconProps = SpacewebComponentProps<React.SVGAttributes<SVGSVGElement>> & {
+    /** Size of element, will be passed to the svg width/height style. Can also be a value included in */
+    size?: Size;
+    /** Allows you to set the SVG `<title>` label, which is used for accessibility */
+    title?: string;
+    ref?: React.Ref<HTMLElement>;
+} & Record<string, any>;

package/esm/icon/types.js

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

package/esm/image/Image.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+declare const Image: React.ForwardRefExoticComponent<Omit<React.ImgHTMLAttributes<HTMLImageElement>, "style" | "className"> & {
+    $as?: React.ElementType<any> | undefined;
+    className?: import("..").Styles;
+    style?: import("..").Styles;
+} & {
+    alt: string;
+    disabled?: boolean | undefined;
+    height?: number | undefined;
+    overrides?: import("./types").ImageOverrides | undefined;
+    src: string;
+    srcset?: string | undefined;
+    width?: number | undefined;
+} & React.RefAttributes<HTMLImageElement>>;
+export default Image;

package/esm/image/Image.js

@@ -0,0 +1,28 @@
+import { __assign, __read, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { useOverrides } from '../overrides';
+import styled from '../style/styled';
+import DefaultFallbackImg from './defaultFallbackImg';
+// Lineheight 1px is required on the container of the image becuase if image is small (smaller than the line height),
+// you may start seeing mystery space appearing above the image instead.
+// https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image - Explanation for why image has extra space below it
+// https://stackoverflow.com/questions/17905827/why-does-my-image-have-space-underneath#answer-17905828:~:text=if%20yo[…]0above%20the%20image%20instead -
+// explanation for why lineheight is reuired on container
+var StyledRoot = styled('div', { lineHeight: '1px' });
+var StyledImg = styled('img', 'align-middle', { objectFit: 'cover' });
+var Image = React.forwardRef(function (props, ref) {
+    var overrides = props.overrides, restProps = __rest(props, ["overrides"]);
+    var _a = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Root, StyledRoot), 2), Root = _a[0], rootProps = _a[1];
+    var _b = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Image, StyledImg), 2), Img = _b[0], imageProps = _b[1];
+    var _c = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.FallbackImg, DefaultFallbackImg), 2), FallbackImg = _c[0], fallbackImgProps = _c[1];
+    var _d = __read(React.useState(false), 2), errored = _d[0], setErrored = _d[1];
+    var errorHandler = React.useCallback(function (e) {
+        var _a;
+        setErrored(true);
+        (_a = restProps === null || restProps === void 0 ? void 0 : restProps.onError) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+    }, [setErrored, restProps === null || restProps === void 0 ? void 0 : restProps.onError]);
+    return (_jsx(Root, __assign({ "data-spaceweb": "image" }, rootProps, { children: errored ? (_jsx(FallbackImg, __assign({ height: restProps === null || restProps === void 0 ? void 0 : restProps.height, width: restProps.width }, fallbackImgProps), void 0)) : (_jsx(Img, __assign({ "data-testid": "image" }, restProps, imageProps, { onError: errorHandler, ref: ref }), void 0)) }), void 0));
+});
+Image.displayName = 'Image';
+export default Image;

package/esm/image/defaultFallbackImg.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import { DefaultFallbackProps } from './types';
+declare const DefaultFallbackImg: ({ width, height, iconSize, overrides }: DefaultFallbackProps) => ReactElement;
+export default DefaultFallbackImg;

package/esm/image/defaultFallbackImg.js

@@ -0,0 +1,13 @@
+import { __assign, __read } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import ImagePreviewIcon from '../icon/components/imagePreview';
+import { useOverrides } from '../overrides/useOverrides';
+import { styled } from '../style';
+var StyledRoot = styled('div', 'flex justify-center items-center spr-ui-02');
+var DefaultFallbackImg = function (_a) {
+    var width = _a.width, height = _a.height, iconSize = _a.iconSize, overrides = _a.overrides;
+    var _b = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Root, StyledRoot), 2), Root = _b[0], rootProps = _b[1];
+    var _c = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Svg, ImagePreviewIcon), 2), Svg = _c[0], svgProps = _c[1];
+    return (_jsx(Root, __assign({ "data-testid": "fallback-image", "data-spaceweb": "fallback-image" }, rootProps, { className: [{ height: "".concat(height, "px"), width: "".concat(width, "px") }, rootProps === null || rootProps === void 0 ? void 0 : rootProps.className] }, { children: _jsx(Svg, __assign({ size: iconSize !== null && iconSize !== void 0 ? iconSize : 40 }, svgProps, { className: ['spr-icon-03 mx-1 my-1', svgProps === null || svgProps === void 0 ? void 0 : svgProps.className] }), void 0) }), void 0));
+};
+export default DefaultFallbackImg;

package/esm/image/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Image } from './Image';
+export type { ImageProps } from './types';

package/esm/image/index.js

@@ -0,0 +1 @@
+export { default as Image } from './Image';

package/esm/image/types.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { Override } from '../overrides';
+import { SpacewebComponentProps } from '../types';
+export declare type ImageOverrides = {
+    Image?: Override<{}>;
+    Root?: Override<{}>;
+    FallbackImg?: Override<{}>;
+};
+export declare type ImageProps = SpacewebComponentProps<React.ImgHTMLAttributes<HTMLImageElement>> & {
+    alt: string;
+    disabled?: boolean;
+    height?: number;
+    overrides?: ImageOverrides;
+    src: string;
+    srcset?: string;
+    width?: number;
+};
+export declare type DefaultFallbackProps = SpacewebComponentProps & {
+    height?: number;
+    width?: number;
+    /** @deprecated */
+    iconSize?: number;
+    overrides?: {
+        Root?: Override<{}>;
+        Svg?: Override<{}>;
+    };
+};

package/esm/image/types.js

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

package/esm/index.d.ts

@@ -0,0 +1,3 @@
+export * from './classNames';
+export * from './spacewebProvider';
+export * from './types';

package/esm/index.js

@@ -0,0 +1,3 @@
+export * from './classNames';
+export * from './spacewebProvider';
+export * from './types';

package/esm/input/basewebAdapters.d.ts

@@ -0,0 +1,7 @@
+import { InputProps, StatefulInputProps } from './types';
+import { BaseInputOverrides } from 'baseui/input';
+declare type AdapterProps = Omit<InputProps | StatefulInputProps, 'autoFocus'>;
+declare const useInputBasewebAdapter: (props: AdapterProps) => Omit<AdapterProps, "size" | "style" | "className" | "overrides" | "variant" | "intent"> & {
+    overrides?: BaseInputOverrides<any> | undefined;
+};
+export default useInputBasewebAdapter;

package/esm/input/basewebAdapters.js

@@ -0,0 +1,45 @@
+import { __assign, __rest } from "tslib";
+import { useConvertOverrides } from '../helpers/baseui/useConvertOverrides';
+import { add$props } from '../helpers';
+import { borderRadius, borderStyle, padding } from '../helpers/longHandHelpers';
+import { getInputContainerStyles, getInputStyles, getEnhancerStyles } from './styled-components';
+import ClearIconButton from '../helpers/ClearIconButton';
+import { useContextualFormProps } from '../form-control/context';
+import { useDebouncedEventHandler } from '../hooks/useDebouncedEventHandler';
+import _noop from 'lodash/noop';
+var useInputBasewebAdapter = function (props) {
+    var _a = useContextualFormProps(props), size = _a.size, variant = _a.variant, className = _a.className, style = _a.style, intent = _a.intent, overrides = _a.overrides, onChange = _a.onChange, debouncedOnChange = _a.debouncedOnChange, debounceInterval = _a.debounceInterval, restProps = __rest(_a, ["size", "variant", "className", "style", "intent", "overrides", "onChange", "debouncedOnChange", "debounceInterval"]);
+    var handleChange = useDebouncedEventHandler(debouncedOnChange !== null && debouncedOnChange !== void 0 ? debouncedOnChange : _noop, onChange, debounceInterval || 200);
+    var sharedProps = add$props({ size: size, variant: variant, intent: intent });
+    var convertedOverrides = useConvertOverrides({
+        Root: {
+            style: [
+                __assign(__assign(__assign({ backgroundColor: 'transparent' }, borderStyle('none')), padding(0)), borderRadius(0)),
+                className,
+                style,
+            ],
+            props: sharedProps,
+        },
+        InputContainer: {
+            style: getInputContainerStyles,
+            props: sharedProps,
+        },
+        Input: {
+            style: [getInputStyles, borderRadius('inherit')],
+            props: sharedProps,
+        },
+        StartEnhancer: {
+            style: getEnhancerStyles,
+            props: add$props({ isStart: true, intent: intent, variant: variant }),
+        },
+        EndEnhancer: {
+            style: getEnhancerStyles,
+            props: add$props({ isStart: false, intent: intent, variant: variant }),
+        },
+        ClearIcon: {
+            component: ClearIconButton,
+        },
+    }, overrides, [overrides, className, style, size, variant, intent, handleChange]);
+    return __assign(__assign({}, restProps), { onChange: handleChange, overrides: convertedOverrides });
+};
+export default useInputBasewebAdapter;

package/esm/input/index.d.ts

@@ -0,0 +1,4 @@
+export { StatefulContainer, StyledRoot, StyledInputEnhancer, StyledStartEnhancer, StyledEndEnhancer, StyledInputContainer, StyledInput, STATE_CHANGE_TYPE, ADJOINED, CUSTOM_INPUT_TYPE, } from 'baseui/input';
+export type { BaseInput, ENHANCER_POSITION, BaseInputOverrides, BaseInputProps, State, InternalState, StatefulContainerProps, } from 'baseui/input';
+export { Input, StatefulInput, MaskedInput } from './input';
+export * from './types';

package/esm/input/index.js

@@ -0,0 +1,3 @@
+export { StatefulContainer, StyledRoot, StyledInputEnhancer, StyledStartEnhancer, StyledEndEnhancer, StyledInputContainer, StyledInput, STATE_CHANGE_TYPE, ADJOINED, CUSTOM_INPUT_TYPE, } from 'baseui/input';
+export { Input, StatefulInput, MaskedInput } from './input';
+export * from './types';

package/esm/input/input.d.ts

@@ -0,0 +1,14 @@
+import { ReactElement } from 'react';
+import { InputProps, StatefulInputProps, MaskedInputProps } from './types';
+export declare const Input: {
+    (props: InputProps): ReactElement;
+    displayName: string;
+};
+export declare const StatefulInput: {
+    (props: StatefulInputProps): ReactElement;
+    displayName: string;
+};
+export declare const MaskedInput: {
+    (props: MaskedInputProps): ReactElement;
+    displayName: string;
+};

package/esm/input/input.js

@@ -0,0 +1,28 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Input as BaseInput, StatefulInput as BaseStatefulInput, MaskedInput as BaseMaskedInput } from 'baseui/input';
+import useInputBasewebAdapter from './basewebAdapters';
+import useAutoFocus from '../hooks/useAutoFocus';
+// @ts-ignore
+BaseInput.displayName = 'BaseUIInput';
+export var Input = function (props) {
+    var autoFocus = props.autoFocus, restProps = __rest(props, ["autoFocus"]);
+    var adaptedProps = useInputBasewebAdapter(restProps);
+    var inputRef = useAutoFocus({ autoFocus: autoFocus, inputRef: adaptedProps.inputRef });
+    return _jsx(BaseInput, __assign({}, adaptedProps, { inputRef: inputRef }), void 0);
+};
+Input.displayName = 'Input';
+export var StatefulInput = function (props) {
+    var autoFocus = props.autoFocus, restProps = __rest(props, ["autoFocus"]);
+    var adaptedProps = useInputBasewebAdapter(restProps);
+    var inputRef = useAutoFocus({ autoFocus: autoFocus, inputRef: adaptedProps.inputRef });
+    return _jsx(BaseStatefulInput, __assign({}, adaptedProps, { inputRef: inputRef }), void 0);
+};
+StatefulInput.displayName = 'StatefulInput';
+export var MaskedInput = function (props) {
+    var autoFocus = props.autoFocus, restProps = __rest(props, ["autoFocus"]);
+    var adaptedProps = useInputBasewebAdapter(restProps);
+    var inputRef = useAutoFocus({ autoFocus: autoFocus, inputRef: adaptedProps.inputRef });
+    return _jsx(BaseMaskedInput, __assign({}, adaptedProps, { inputRef: inputRef }), void 0);
+};
+MaskedInput.displayName = 'MaskedInput';

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

@@ -0,0 +1,6 @@
+import { StyleFn, Styles } from '../types';
+import { SharedProps } from './types';
+export declare const getInputContainerStyles: Styles;
+export declare const getEnhancerStyles: Styles;
+export declare const getPlaceholderTypography: Styles;
+export declare const getInputStyles: StyleFn<SharedProps>;

package/esm/input/styled-components.js

@@ -0,0 +1,129 @@
+import { __assign } from "tslib";
+import { ADJOINED } from 'baseui/input';
+import { getComponentSizeTheme } from '../helpers/themeHelpers';
+import { borderWidth, borderColor, borderStyle, borderRadius } from '../helpers/longHandHelpers';
+import { intentColor } from '../helpers/intentHelper';
+var inputBorderRadius = function (_a, _b) {
+    var theme = _a.theme;
+    var _c = _b.$variant, $variant = _c === void 0 ? 'default' : _c, $adjoined = _b.$adjoined;
+    if ($variant === 'line') {
+        return borderRadius(0);
+    }
+    var styles = borderRadius(theme.input.borderRadius);
+    switch ($adjoined) {
+        case ADJOINED.left:
+            return __assign(__assign({}, styles), { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 });
+        case ADJOINED.right:
+            return __assign(__assign({}, styles), { borderTopRightRadius: 0, borderBottomRightRadius: 0 });
+        case ADJOINED.both:
+            return borderRadius(0);
+        case ADJOINED.none:
+        default:
+            return styles;
+    }
+};
+var inputBorderColor = function (utils, props) {
+    var theme = utils.theme;
+    var $intent = props.$intent, $isFocused = props.$isFocused, $disabled = props.$disabled;
+    switch ($intent) {
+        case 'default':
+        default: {
+            if ($isFocused) {
+                return borderColor(theme.spr.interactive01);
+            }
+            return __assign(__assign(__assign({}, borderColor(theme.spr.field)), ($disabled && borderColor(theme.input.disabledBorderColor))), { ':hover': $disabled ? {} : borderColor(theme.spr.border06) });
+        }
+        case 'success':
+        case 'warning':
+        case 'error':
+            return borderColor(intentColor(utils, props));
+    }
+};
+var inputBorderWidth = function (utils, _a) {
+    var $variant = _a.$variant;
+    return $variant === 'line' ? __assign(__assign({}, borderWidth(0)), { borderBottomWidth: '1px' }) : borderWidth('1px');
+};
+var inputBackgroundColor = function (_a, _b) {
+    var theme = _a.theme;
+    var $disabled = _b.$disabled;
+    return $disabled ? { backgroundColor: theme.spr.ui02 } : { backgroundColor: theme.spr.ui01 };
+};
+export var getInputContainerStyles = [
+    borderStyle('solid'),
+    inputBorderWidth,
+    inputBorderColor,
+    inputBackgroundColor,
+    inputBorderRadius,
+    {
+        outline: 'none',
+        boxSizing: 'border-box',
+        transitionProperty: undefined,
+        transitionDuration: undefined,
+        transitionTimingFunction: undefined,
+    },
+];
+var enhancerBorderRadius = function (utils, _a) {
+    var $isStart = _a.$isStart, $variant = _a.$variant;
+    var theme = utils.theme;
+    if ($variant === 'line') {
+        return 'rounded-0';
+    }
+    return $isStart
+        ? __assign(__assign({}, borderRadius(theme.input.borderRadius)), { borderTopRightRadius: 0, borderBottomRightRadius: 0 }) : __assign(__assign({}, borderRadius(theme.input.borderRadius)), { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 });
+};
+var enhancerBorderWidth = function (_a, _b) {
+    var _c;
+    var theme = _a.theme;
+    var $variant = _b.$variant, $isStart = _b.$isStart;
+    return $variant === 'line'
+        ? __assign(__assign({}, borderWidth(0)), { borderBottomWidth: '1px' }) : __assign(__assign({}, borderWidth(theme.borderWidth['1'])), (_c = {}, _c[$isStart ? 'borderRightWidth' : 'borderLeftWidth'] = theme.borderWidth['0'], _c));
+};
+var enhancerBorderColor = function (utils, props) {
+    return borderColor(intentColor(utils, props, utils.theme.spr.field));
+};
+export var getEnhancerStyles = [
+    borderStyle('solid'),
+    inputBackgroundColor,
+    enhancerBorderColor,
+    enhancerBorderWidth,
+    enhancerBorderRadius,
+    'spr-text-01 pl-4 pr-4',
+    { outline: 'none' },
+];
+export var getPlaceholderTypography = function (_a) {
+    var theme = _a.theme;
+    return ({
+        color: theme.spr.textPlaceholder,
+        fontWeight: theme.fontWeight.regular,
+    });
+};
+export var getInputStyles = function (utils, props) {
+    var theme = utils.theme;
+    var $disabled = props.$disabled, _a = props.$variant, $variant = _a === void 0 ? 'default' : _a, $size = props.$size;
+    var styles = {
+        //todo: need clean up
+        lineHeight: '',
+        paddingLeft: '',
+        paddingRight: '',
+        paddingTop: '',
+        paddingBottom: '',
+        fontSize: '',
+        color: theme.spr.text01,
+        fontWeight: theme.fontWeight.medium,
+        '::placeholder': getPlaceholderTypography(utils, props),
+    };
+    if ($disabled) {
+        styles.color = theme.spr.text02;
+        // baseweb applies this style in order to support style in safari
+        styles['-webkit-text-fill-color'] = theme.spr.text02;
+    }
+    var inputSizeTheme = getComponentSizeTheme(theme, 'input', $size, 'lg');
+    styles.lineHeight = inputSizeTheme.lineHeight;
+    styles.paddingLeft = styles.paddingRight = inputSizeTheme.paddingX;
+    styles.paddingTop = styles.paddingBottom = inputSizeTheme.paddingY;
+    styles.fontSize = inputSizeTheme.fontSize;
+    if ($variant === 'line') {
+        styles.paddingLeft = styles.paddingRight = '0';
+    }
+    return styles;
+};

package/esm/input/types.d.ts

@@ -0,0 +1,39 @@
+import { InputProps as BaseInputProps, StatefulInputProps as BaseStatefulInputProps, SharedProps as BaseSharedProps, InputOverrides as BaseUIInputOverrides } from 'baseui/input';
+import { SpacewebComponentProps, Intent } from '../types';
+import { Override } from '../overrides';
+export declare type InputSize = 'sm' | 'md' | 'lg';
+export declare type InputVariant = 'default' | 'line';
+export declare type InputOverrides = {
+    [key in keyof BaseUIInputOverrides]?: Override<SharedProps & Record<string, any>>;
+};
+/**
+ * Position of the cursor when input element is focussed
+ * 1. 'start' - beginning of input value
+ * 2. 'end' - end of input value
+ * 3. number - [0, input.value.length] (specific position in input value)
+ * 4. boolean - true (end of input value)
+ *            - false (does not focus)
+ */
+export declare type FocusPosition = 'start' | 'end' | number | boolean;
+declare type CommonInputProps = {
+    variant?: InputVariant;
+    size?: InputSize;
+    overrides?: InputOverrides;
+    intent?: Intent;
+    debouncedOnChange?: BaseInputProps['onChange'];
+    debounceInterval?: number;
+    autoFocus?: FocusPosition;
+};
+export declare type SharedProps = Omit<BaseSharedProps, '$size' | '$positive' | '$error'> & {
+    $isStart: boolean;
+    $size: InputSize;
+    $variant: InputVariant;
+    $intent: Intent;
+};
+export declare type InputProps = Omit<SpacewebComponentProps<BaseInputProps>, 'size' | 'overrides' | 'positive' | 'error' | 'autoFocus'> & CommonInputProps;
+export declare type StatefulInputProps = Omit<SpacewebComponentProps<BaseStatefulInputProps>, 'size' | 'overrides' | 'positive' | 'error' | 'autoFocus'> & CommonInputProps;
+export interface MaskedInputProps extends InputProps {
+    mask?: string;
+    maskChar?: string;
+}
+export {};

package/esm/input/types.js

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

package/esm/layer/LayersManager.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement, ReactNode } from 'react';
+export declare type LayersManagerProps = {
+    children: ReactNode;
+    zIndex?: number;
+    host?: HTMLElement | null;
+};
+declare const LayersManager: ({ children, zIndex: zIndexToOverride, host: hostToOverride, }: LayersManagerProps) => ReactElement | null;
+export default LayersManager;

package/esm/layer/LayersManager.js

@@ -0,0 +1,20 @@
+import { __assign } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LayersContext } from 'baseui/layer';
+import { useMemo } from 'react';
+import { useDocument } from '../spacewebProvider/DocumentProvider';
+import { LAYERS_DEFAULT_ZINDEX } from './constants';
+import useLayersContextValue from './useLayersContextValue';
+LayersContext.displayName = 'BaseUILayerContext';
+var LayersManager = function (_a) {
+    var children = _a.children, zIndexToOverride = _a.zIndex, hostToOverride = _a.host;
+    var ctxValue = useLayersContextValue();
+    var doc = useDocument();
+    var defaultHostContainer = doc === null || doc === void 0 ? void 0 : doc.body;
+    var value = useMemo(function () {
+        var _a, _b;
+        return (__assign(__assign({}, ctxValue), { host: (_a = hostToOverride !== null && hostToOverride !== void 0 ? hostToOverride : ctxValue.host) !== null && _a !== void 0 ? _a : defaultHostContainer, zIndex: (_b = zIndexToOverride !== null && zIndexToOverride !== void 0 ? zIndexToOverride : ctxValue.zIndex) !== null && _b !== void 0 ? _b : LAYERS_DEFAULT_ZINDEX }));
+    }, [ctxValue, hostToOverride, zIndexToOverride, defaultHostContainer]);
+    return _jsx(LayersContext.Provider, __assign({ value: value }, { children: children }), void 0);
+};
+export default LayersManager;

package/esm/layer/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const LAYERS_DEFAULT_ZINDEX = 9999;
+export declare const Z_INDEX: {
+    readonly OVERLAY: 9999;
+    readonly POPOVER: 10010;
+    readonly SNACKBAR: 10020;
+};

package/esm/layer/constants.js

@@ -0,0 +1,7 @@
+export var LAYERS_DEFAULT_ZINDEX = 9999;
+export var Z_INDEX = {
+    OVERLAY: LAYERS_DEFAULT_ZINDEX,
+    // NOTE: Popover/Tooltip should always be rendered on top of other layers(e.g. Modal)
+    POPOVER: 10010,
+    SNACKBAR: 10020, // Snackbar should have the highest zIndex
+};

package/esm/layer/index.d.ts

@@ -0,0 +1,2 @@
+export { default as LayersManager } from './LayersManager';
+export { LAYERS_DEFAULT_ZINDEX, Z_INDEX } from './constants';

package/esm/layer/index.js

@@ -0,0 +1,2 @@
+export { default as LayersManager } from './LayersManager';
+export { LAYERS_DEFAULT_ZINDEX, Z_INDEX } from './constants';

package/esm/layer/useLayersContextValue.d.ts

@@ -0,0 +1,3 @@
+import { LayersContext } from 'baseui/layer';
+declare const useLayersContextValue: () => React.ContextType<typeof LayersContext>;
+export default useLayersContextValue;

package/esm/layer/useLayersContextValue.js

@@ -0,0 +1,54 @@
+import { __assign } from "tslib";
+import { useCallback, useContext, useEffect, useMemo } from 'react';
+import { LayersContext } from 'baseui/layer';
+import { useDocument } from '../spacewebProvider/DocumentProvider';
+var handlersInitialized = false;
+var docClickHandlers = [];
+var escapeKeyHandlers = [];
+var addEscapeHandler = function (escapeKeyHandler) {
+    escapeKeyHandlers.push(escapeKeyHandler);
+};
+var removeEscapeHandler = function (escapeKeyHandler) {
+    escapeKeyHandlers = escapeKeyHandlers.filter(function (handler) { return handler !== escapeKeyHandler; });
+};
+var addDocClickHandler = function (docClickHandler) {
+    docClickHandlers.push(docClickHandler);
+};
+var removeDocClickHandler = function (docClickHandler) {
+    docClickHandlers = docClickHandlers.filter(function (handler) { return handler !== docClickHandler; });
+};
+var resetHandlers = function () {
+    handlersInitialized = false;
+    docClickHandlers = [];
+    escapeKeyHandlers = [];
+};
+var useLayersContextValue = function () {
+    var ctxValue = useContext(LayersContext);
+    var doc = useDocument();
+    var onDocumentClick = useCallback(function (event) {
+        docClickHandlers.forEach(function (handler) { return handler(event); });
+    }, []);
+    var onKeyUp = useCallback(function (event) {
+        if (event.key === 'Escape') {
+            var escapeKeyHandler = escapeKeyHandlers[escapeKeyHandlers.length - 1];
+            if (escapeKeyHandler) {
+                escapeKeyHandler(event);
+            }
+        }
+    }, []);
+    useEffect(function () {
+        if (handlersInitialized)
+            return undefined;
+        doc === null || doc === void 0 ? void 0 : doc.addEventListener('keyup', onKeyUp);
+        // using mousedown event so that callback runs before events on children inside of the layer
+        doc === null || doc === void 0 ? void 0 : doc.addEventListener('mousedown', onDocumentClick);
+        handlersInitialized = true;
+        return function () {
+            doc === null || doc === void 0 ? void 0 : doc.removeEventListener('keyup', onKeyUp);
+            doc === null || doc === void 0 ? void 0 : doc.removeEventListener('mousedown', onDocumentClick);
+            resetHandlers();
+        };
+    }, [doc, onDocumentClick, onKeyUp]);
+    return useMemo(function () { return (__assign(__assign({}, ctxValue), { addEscapeHandler: addEscapeHandler, removeEscapeHandler: removeEscapeHandler, addDocClickHandler: addDocClickHandler, removeDocClickHandler: removeDocClickHandler })); }, [ctxValue]);
+};
+export default useLayersContextValue;

package/esm/link/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Link } from './link';
+export * from './types';

package/esm/link/index.js

@@ -0,0 +1,2 @@
+export { default as Link } from './link';
+export * from './types';

package/esm/link/link.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+declare const Link: import("react").ForwardRefExoticComponent<Omit<import("react").AllHTMLAttributes<HTMLElement>, "style" | "className"> & {
+    $as?: import("react").ElementType<any> | undefined;
+    className?: import("..").Styles;
+    style?: import("..").Styles;
+} & {
+    href?: string | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;
+export default Link;

package/esm/link/link.js

@@ -0,0 +1,12 @@
+import { __assign } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { StyledLink, StyledButtonLink } from './styled-components';
+import { useFocusVisible } from '../hooks/useFocusVisible';
+var Link = forwardRef(function (props, ref) {
+    var focusVisibleProps = useFocusVisible(props);
+    var LinkComp = props.href ? StyledLink : StyledButtonLink;
+    return _jsx(LinkComp, __assign({ "data-spaceweb": "link", "data-testid": "link" }, props, focusVisibleProps, { ref: ref }), void 0);
+});
+Link.displayName = 'Link';
+export default Link;

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

@@ -0,0 +1,3 @@
+import { StyledComponent } from '../style/styled';
+export declare const StyledLink: StyledComponent;
+export declare const StyledButtonLink: StyledComponent;

package/esm/link/styled-components.js

@@ -0,0 +1,18 @@
+import styled from '../style/styled';
+import { buttonResetStyles } from '../base-button';
+var focusVisibleStyles = [
+    'focus-visible:rounded-2 focus-visible:underline',
+    'focus-visible:outline-01 focus-visible:outline-offset-1',
+];
+var linkStyles = [
+    'cursor-pointer spr-link no-underline hover:underline',
+    function (_a) {
+        var theme = _a.theme;
+        return ({
+            fontSize: theme.link.fontSize,
+        });
+    },
+    focusVisibleStyles,
+];
+export var StyledLink = styled('a', linkStyles);
+export var StyledButtonLink = styled('button', buttonResetStyles, linkStyles);