@sprinklrjs/spaceweb 10.1.0 → 11.0.0

package/esm/banner/banner-item.js

@@ -0,0 +1,12 @@
+import { __assign, __read, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, memo } from 'react';
+import { useOverrides } from '../overrides';
+import { StyledBannerItem } from './styled-component';
+var BannerItem = forwardRef(function (_a, ref) {
+    var _b = _a.overrides, overrides = _b === void 0 ? {} : _b, children = _a.children, restProps = __rest(_a, ["overrides", "children"]);
+    var _c = __read(useOverrides(overrides.Root, StyledBannerItem), 2), Root = _c[0], rootProps = _c[1];
+    return (_jsx(Root, __assign({ "data-spaceweb": "banner-item", role: "listitem" }, rootProps, restProps, { ref: ref }, { children: children }), void 0));
+});
+BannerItem.displayName = 'BannerItem';
+export default memo(BannerItem);

package/esm/banner/banner.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<import("../types").SpacewebComponentProps<React.AllHTMLAttributes<HTMLElement>>, "title"> & {
+    intent?: "success" | "warning" | "error" | undefined;
+    $as?: string | undefined;
+    collapsible?: boolean | undefined;
+    title: React.ReactNode;
+    children?: React.ReactNode;
+    maxItemContainerHeight?: string | undefined;
+    overrides?: {
+        Root?: import("../overrides").Override<Record<string, any>> | undefined;
+        BannerItemContainer?: import("../overrides").Override<Record<string, any>> | undefined;
+        HeaderTitle?: import("../overrides").Override<Record<string, any>> | undefined;
+        HeaderIcon?: import("../overrides").Override<Record<string, any>> | undefined;
+        HeaderContainer?: import("../overrides").Override<Record<string, any>> | undefined;
+        TitleContainer?: import("../overrides").Override<Record<string, any>> | undefined;
+        ToggleButton?: import("../overrides").Override<Record<string, any>> | undefined;
+    } | undefined;
+} & React.RefAttributes<HTMLElement>>>;
+export default _default;

package/esm/banner/banner.js

@@ -0,0 +1,54 @@
+import { __assign, __read, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, memo, useState } from 'react';
+import { useOverrides } from '../overrides';
+import { StyledBanner, StyledBannerItemContainer, StyledHeaderContainer, StyledTitle, StyledTitleContainer, } from './styled-component';
+import ErrorIcon from '../icon/components/error-clr';
+import AlertIcon from '../icon/components/alert-solid';
+import TickCircleIcon from '../icon/components/tickCircle-solid';
+import { useStyle } from '../style';
+import { StyledButtonLink } from '../link/styled-components';
+import { useLocale } from '../locale';
+import useStickyElement from '../hooks/useStickyElement';
+function Icon(_a) {
+    var className = _a.className, _b = _a.intent, intent = _b === void 0 ? 'error' : _b, restProps = __rest(_a, ["className", "intent"]);
+    var theme = useStyle().theme;
+    var intentToIconMap = {
+        error: {
+            BaseIcon: ErrorIcon,
+            prop: [{ fill: theme.spr.supportError }],
+        },
+        warning: {
+            BaseIcon: AlertIcon,
+            prop: [{ fill: theme.spr.supportWarning }],
+        },
+        success: {
+            BaseIcon: TickCircleIcon,
+            prop: [{ fill: theme.spr.supportSuccess }],
+        },
+    };
+    var _c = intentToIconMap[intent], BaseIcon = _c.BaseIcon, prop = _c.prop;
+    return _jsx(BaseIcon, __assign({ className: ['mr-1.5', prop, className] }, restProps, { size: 14 }), void 0);
+}
+function BaseToggleButton(_a) {
+    var show = _a.show, className = _a.className, onToggle = _a.onToggle, props = __rest(_a, ["show", "className", "onToggle"]);
+    var locale = useLocale();
+    var label = show ? locale.banner.toggleButtonHideLabel : locale.banner.toggleButtonShowLabel;
+    var ariaLabel = show ? locale.banner.toggleButtonHideAriaLabel : locale.banner.toggleButtonShowAriaLabel;
+    return (_jsx(StyledButtonLink, __assign({ "data-testid": "banner-toggle-button", "aria-label": ariaLabel, className: ['typography-l2 pl-2', className], onClick: function () { return onToggle(!show); }, "$show": show }, props, { children: label }), void 0));
+}
+var Banner = forwardRef(function (_a, ref) {
+    var _b = _a.intent, intent = _b === void 0 ? 'error' : _b, collapsible = _a.collapsible, title = _a.title, children = _a.children, _c = _a.overrides, overrides = _c === void 0 ? {} : _c, $as = _a.$as, role = _a.role, maxItemContainerHeight = _a.maxItemContainerHeight, restProps = __rest(_a, ["intent", "collapsible", "title", "children", "overrides", "$as", "role", "maxItemContainerHeight"]);
+    var _d = __read(useOverrides(overrides.Root, StyledBanner), 2), Root = _d[0], rootProps = _d[1];
+    var _e = __read(useOverrides(overrides.BannerItemContainer, StyledBannerItemContainer), 2), BannerItemContainer = _e[0], bannerItemContainerProps = _e[1];
+    var _f = __read(useOverrides(overrides.HeaderContainer, StyledHeaderContainer), 2), HeaderContainer = _f[0], headerContainerProps = _f[1];
+    var _g = __read(useOverrides(overrides.TitleContainer, StyledTitleContainer), 2), TitleContainer = _g[0], titleContainerProps = _g[1];
+    var _h = __read(useOverrides(overrides.HeaderTitle, StyledTitle), 2), HeaderTitle = _h[0], headerTitleProps = _h[1];
+    var _j = __read(useOverrides(overrides.HeaderIcon, Icon), 2), HeaderIcon = _j[0], headerIconProps = _j[1];
+    var _k = __read(useOverrides(overrides.ToggleButton, BaseToggleButton), 2), ToggleButton = _k[0], toggleButtonProps = _k[1];
+    var _l = __read(useState(true), 2), show = _l[0], setShow = _l[1];
+    var _m = useStickyElement(), isSticky = _m.isSticky, setStickySentinelRef = _m.setStickySentinelRef;
+    return (_jsxs(Root, __assign({ "data-spaceweb": "banner", "data-testid": "banner", intent: intent, collapsible: collapsible }, restProps, rootProps, { ref: ref }, { children: [_jsx("div", { ref: setStickySentinelRef }, void 0), _jsxs(HeaderContainer, __assign({}, headerContainerProps, { "$sticky": isSticky }, { children: [_jsxs(TitleContainer, __assign({}, titleContainerProps, { children: [_jsx(HeaderIcon, __assign({ intent: intent }, headerIconProps), void 0), _jsx(HeaderTitle, __assign({}, headerTitleProps, { children: title }), void 0)] }), void 0), collapsible && _jsx(ToggleButton, __assign({ show: show, onToggle: setShow }, toggleButtonProps), void 0)] }), void 0), show && children && (_jsx(BannerItemContainer, __assign({ "$as": $as, role: $as === 'ol' || $as === 'ul' ? 'list' : role, "$maxHeight": maxItemContainerHeight }, bannerItemContainerProps, { children: children }), void 0))] }), void 0));
+});
+Banner.displayName = 'Banner';
+export default memo(Banner);

package/esm/banner/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Banner } from './banner';
+export { default as BannerItem } from './banner-item';
+export { StyledBanner, StyledBannerItem, StyledTitle } from './styled-component';
+export type { BannerProps, BannerItemProps } from './types';
+export type { BannerLocale } from './locale';

package/esm/banner/index.js

@@ -0,0 +1,3 @@
+export { default as Banner } from './banner';
+export { default as BannerItem } from './banner-item';
+export { StyledBanner, StyledBannerItem, StyledTitle } from './styled-component';

package/esm/banner/locale.d.ts

@@ -0,0 +1,6 @@
+export declare type BannerLocale = {
+    toggleButtonShowLabel: string;
+    toggleButtonHideLabel: string;
+    toggleButtonShowAriaLabel: string;
+    toggleButtonHideAriaLabel: string;
+};

package/esm/banner/locale.js

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

package/esm/banner/styled-component.d.ts

@@ -0,0 +1,6 @@
+export declare const StyledBanner: import("../style/styled").StyledComponent;
+export declare const StyledBannerItemContainer: import("../style/styled").StyledComponent;
+export declare const StyledTitleContainer: import("../style/styled").StyledComponent;
+export declare const StyledHeaderContainer: import("../style/styled").StyledComponent;
+export declare const StyledTitle: import("../style/styled").StyledComponent;
+export declare const StyledBannerItem: import("../style/styled").StyledComponent;

package/esm/banner/styled-component.js

@@ -0,0 +1,35 @@
+import cx from '../classNames';
+import { styled } from '../style';
+var getBannerIntentStyles = function (_a, _b) {
+    var theme = _a.theme;
+    var intent = _b.intent;
+    switch (intent) {
+        case 'error':
+        default:
+            return {
+                borderColor: theme.spr.supportError,
+            };
+        case 'warning':
+            return {
+                borderColor: theme.spr.supportWarning,
+            };
+        case 'success':
+            return {
+                borderColor: theme.spr.supportSuccess,
+            };
+    }
+};
+export var StyledBanner = styled('div', 'box-border w-full rounded-8 border-solid border-1 font-medium overflow-auto pb-2', getBannerIntentStyles);
+export var StyledBannerItemContainer = styled('div', 'box-border list-inside list-none typography-bl1 px-2 mt-0.5', function (_a, _b) {
+    var theme = _a.theme, getStyle = _a.getStyle;
+    var $as = _b.$as, $maxHeight = _b.$maxHeight;
+    return getStyle(cx({ 'list-decimal': $as === 'ol', 'list-disc': $as === 'ul' }), { maxHeight: $maxHeight });
+});
+export var StyledTitleContainer = styled('div', 'flex flex-row justify-center items-center');
+export var StyledHeaderContainer = styled('div', 'flex flex-row justify-between sticky top-0 spr-ui-01 px-2 pt-2', function (_a, _b) {
+    var theme = _a.theme;
+    var $sticky = _b.$sticky;
+    return ({ boxShadow: $sticky ? theme.spr.shadow01 : 'none' });
+});
+export var StyledTitle = styled('div', 'typography-bl1 font-600');
+export var StyledBannerItem = styled('li', 'typography-bl1');

package/esm/banner/types.d.ts

@@ -0,0 +1,26 @@
+import { Override } from '../overrides/types';
+import { SpacewebComponentProps } from '../types';
+import { ReactNode } from 'react';
+export declare type BannerProps = Omit<SpacewebComponentProps, 'title'> & {
+    intent?: 'error' | 'warning' | 'success';
+    $as?: string;
+    collapsible?: boolean;
+    title: ReactNode;
+    children?: ReactNode;
+    maxItemContainerHeight?: string;
+    overrides?: {
+        Root?: Override<Record<string, any>>;
+        BannerItemContainer?: Override<Record<string, any>>;
+        HeaderTitle?: Override<Record<string, any>>;
+        HeaderIcon?: Override<Record<string, any>>;
+        HeaderContainer?: Override<Record<string, any>>;
+        TitleContainer?: Override<Record<string, any>>;
+        ToggleButton?: Override<Record<string, any>>;
+    };
+};
+export declare type BannerItemProps = SpacewebComponentProps & {
+    children?: ReactNode;
+    overrides?: {
+        Root?: Override<Record<string, any>>;
+    };
+};

package/esm/banner/types.js

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

package/esm/button/Button.d.ts

@@ -21,9 +21,7 @@ declare const Button: React.ForwardRefExoticComponent<Omit<{
     overrides?: import("./types").ButtonOverrides | undefined;
     startEnhancer?: React.ReactNode;
     type?: "button" | "reset" | "submit" | undefined;
-    tooltipContent?: React.ReactNode | ((args: {
-        close: () => void;
-    }) => React.ReactNode);
+    tooltipContent?: React.ReactNode | import("baseui/popover").StatefulContentRenderProp;
 }, "style" | "className"> & {
     $as?: React.ElementType<any> | undefined;
     className?: import("..").Styles;

package/esm/button/Button.js

@@ -38,7 +38,7 @@ var Button = React.forwardRef(function (props, ref) {
         },
     }, _pick(adaptedProps.overrides, 'BaseButton'));
     var _e = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.StatefulTooltip, DefaultStatefulTooltip), 2), StatefulTooltip = _e[0], statefulTooltipProps = _e[1];
-    var buttonEl = (_jsx(BaseUIButton, __assign({ "data-spaceweb": "button", "data-testid": "button" }, adaptedProps, { overrides: __assign(__assign({}, convertedOverrides), mergedOverrides), ref: buttonRef }), void 0));
+    var buttonEl = (_jsx(BaseUIButton, __assign({ "data-spaceweb": "button", "data-testid": "button" }, adaptedProps, { onClick: adaptedProps.onClick, overrides: __assign(__assign({}, convertedOverrides), mergedOverrides), ref: buttonRef }), void 0));
     if (adaptedProps.disabled && tooltipContent) {
         return (_jsx(DisabledTooltipContainer, __assign({ placement: "bottom", content: tooltipContent }, statefulTooltipProps, { children: buttonEl }), void 0));
     }

package/esm/button/basewebAdapter.d.ts

@@ -1,13 +1,16 @@
 /// <reference types="react" />
-import { KIND } from 'baseui/button';
 import { ButtonProps } from './types';
 declare const _default: (props: Omit<ButtonProps, 'size'>) => {
-    kind: import("../utility-types").ValueOf<KIND>;
+    kind: import("../utility-types").ValueOf<{
+        readonly primary: "primary";
+        readonly secondary: "secondary";
+        readonly tertiary: "tertiary";
+    }>;
     style?: import("..").Styles;
     disabled?: boolean | undefined;
     className?: import("..").Styles;
-    overrides?: import("./types").ButtonOverrides | undefined;
     children?: import("react").ReactNode;
+    overrides?: import("./types").ButtonOverrides | undefined;
     autoFocus?: boolean | undefined;
     href?: string | undefined;
     rel?: string | undefined;
@@ -22,8 +25,6 @@ declare const _default: (props: Omit<ButtonProps, 'size'>) => {
     isLoading?: boolean | undefined;
     isSelected?: boolean | undefined;
     fullWidth?: boolean | undefined;
-    tooltipContent?: import("react").ReactNode | ((args: {
-        close: () => void;
-    }) => import("react").ReactNode);
+    tooltipContent?: import("react").ReactNode | import("baseui/popover").StatefulContentRenderProp;
 };
 export default _default;

package/esm/button/basewebAdapter.js

@@ -5,6 +5,6 @@ var variantMap = {
     primary: KIND.primary,
     secondary: KIND.secondary,
     tertiary: KIND.tertiary,
-    minimal: KIND.minimal,
+    minimal: KIND.tertiary,
 };
 export default (function (props) { return (__assign(__assign({}, _omit(props, 'variant')), { kind: props.variant ? variantMap[props.variant] : KIND.primary })); });

package/esm/button/types.d.ts

@@ -46,4 +46,4 @@ export declare type ButtonProps = SpacewebComponentProps<{
     type?: 'submit' | 'reset' | 'button';
     tooltipContent?: StatefulTooltipProps['content'];
 }>;
-export declare type VariantAdapterProps = Record<Variant, ValueOf<KIND>>;
+export declare type VariantAdapterProps = Record<Variant, ValueOf<typeof KIND>>;

package/esm/button-group/ButtonGroup.js

@@ -14,7 +14,7 @@ var ButtonGroup = forwardRef(function (_a, ref) {
     var _d = __read(useOverrides(overrides.Root, StyledRoot), 2), Root = _d[0], rootProps = _d[1];
     var renderChild = useMemo(function () { return renderButtonGroupChild.bind(null, __assign(__assign({}, props), { onKeyDown: onKeyDown })); }, [props, onKeyDown]);
     var sharedProps = add$props(_pick(props, ['intent', 'size', 'variant', 'shape', 'mode']));
-    return (_jsx(Root, __assign({ "data-spaceweb": "button-group", className: className, style: style, ref: combinedRef }, sharedProps, rootProps, { children: Children.map(props.children, renderChild) }), void 0));
+    return (_jsx(Root, __assign({ "data-spaceweb": "button-group", "aria-multiselectable": props.mode === 'checkbox', className: className, style: style, ref: combinedRef }, sharedProps, rootProps, { children: Children.map(props.children, renderChild) }), void 0));
 });
 ButtonGroup.defaultProps = {
     mode: 'radio',

package/esm/button-group/index.d.ts

@@ -1,4 +1,3 @@
 export { default as ButtonGroup } from './ButtonGroup';
 export { default as StatefulButtonGroup } from './StatefulButtonGroup';
-export type { StatefulContainer, ButtonGroupOverrides, ButtonGroupProps, InitialState, State, StatefulButtonGroupProps, } from 'baseui/button-group';
-export { StyledRoot, MODE, STATE_CHANGE_TYPE } from 'baseui/button-group';
+export type { ButtonGroupChildProps, StatefulButtonGroupProps, ButtonGroupProps } from './types';

package/esm/button-group/index.js

@@ -1,3 +1,2 @@
 export { default as ButtonGroup } from './ButtonGroup';
 export { default as StatefulButtonGroup } from './StatefulButtonGroup';
-export { StyledRoot, MODE, STATE_CHANGE_TYPE } from 'baseui/button-group';

package/esm/button-group/styled-components.js

@@ -21,12 +21,12 @@ export var hyperspaceButtonOverrides = function (utils, props) {
     var $isIconButton = props.$isIconButton, $index = props.$index, $childrenCount = props.$childrenCount, $isSelected = props.$isSelected;
     return _merge(__assign(__assign(__assign(__assign(__assign(__assign({ marginTop: px2rem(2), marginBottom: px2rem(2), 
         // To keep all the buttons equidistant remove marginLeft from all buttons except the first one
-        marginLeft: $index === 0 ? px2rem(3) : '0px', marginRight: $index === $childrenCount - 1 ? px2rem(3) : px2rem(2), fontSize: px2rem(12), lineHeight: px2rem(18) }, borderRadius(px2rem(5))), (!$isIconButton
+        marginLeft: $index === 0 ? px2rem(3) : '0px', marginRight: $index === $childrenCount - 1 ? px2rem(3) : px2rem(2), fontSize: px2rem(12), lineHeight: px2rem(16) }, borderRadius(px2rem(5))), (!$isIconButton
         ? {
             paddingTop: px2rem(8),
             paddingBottom: px2rem(8),
-            paddingLeft: px2rem(22),
-            paddingRight: px2rem(22),
+            paddingLeft: px2rem(12),
+            paddingRight: px2rem(12),
         }
         : { height: px2rem(32), width: px2rem(32), marginTop: px2rem(3), marginBottom: px2rem(3) })), createButtonStyles({
         color: theme.spr.text01,
@@ -89,7 +89,7 @@ export var renderButtonGroupChild = function (props, child, index) {
         onKeyDown(event);
         (_b = (_a = child.props).onKeyDown) === null || _b === void 0 ? void 0 : _b.call(_a, event);
     };
-    return React.cloneElement(child, __assign({ disabled: child.props.disabled || disabled, variant: child.props.variant || variant, size: child.props.size || size, shape: child.props.shape || shape, intent: child.props.intent || intent, isSelected: isSelected(selected, index), className: [baseButtonStyle.bind(null, childrenCount, index), child.props.className], onClick: onChildClick, onKeyDown: onChildKeyDown }, (isAnyButtonSelected(selected)
+    return React.cloneElement(child, __assign({ disabled: child.props.disabled || disabled, variant: child.props.variant || variant, size: child.props.size || size, shape: child.props.shape || shape, intent: child.props.intent || intent, isSelected: isSelected(selected, index), 'aria-selected': isSelected(selected, index), className: [baseButtonStyle.bind(null, childrenCount, index), child.props.className], onClick: onChildClick, onKeyDown: onChildKeyDown }, (isAnyButtonSelected(selected)
         ? { tabIndex: (_a = child.props.tabIndex) !== null && _a !== void 0 ? _a : (isSelected(selected, index) ? 0 : -1) }
         : {})));
 };

package/esm/button-group/types.d.ts

@@ -33,6 +33,7 @@ export declare type ButtonGroupChildProps = {
     overrides?: Overrides<ButtonSharedProps>;
     onKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
     tabIndex?: number;
+    'aria-selected'?: boolean;
 };
 export declare type StatefulButtonGroupProps = ButtonGroupProps & {
     initialState?: number[];

package/esm/checkbox/basewebAdapters.d.ts

@@ -1,4 +1,7 @@
+import * as React from 'react';
+import type { Checkbox as BaseCheckbox, StatefulCheckbox as BaseStatefulCheckbox } from 'baseui/checkbox';
 import { CheckboxProps, StatefulCheckboxProps } from './types';
-declare type AdaptProps = CheckboxProps | StatefulCheckboxProps;
-export default function useCheckboxAdapter(props: AdaptProps): Omit<AdaptProps, 'size' | 'className' | 'style'>;
+declare type BaseuiAdaptedProps = React.ComponentProps<typeof BaseCheckbox> | React.ComponentProps<typeof BaseStatefulCheckbox>;
+declare type SpacewebProps = CheckboxProps | StatefulCheckboxProps;
+export default function useCheckboxAdapter(props: SpacewebProps): BaseuiAdaptedProps;
 export {};

package/esm/checkbox/basewebAdapters.js

@@ -3,6 +3,7 @@ import { add$props } from '../helpers';
 import { useConvertOverrides } from '../helpers/baseui/useConvertOverrides';
 import { getCheckmarkOverrides, getLabelOverrides, getRootOverrides } from './styled-components';
 import { useContextualFormProps } from '../form-control/context';
+import { useCombineRefObjects } from '../hooks/useCombinedRef';
 export default function useCheckboxAdapter(props) {
     var _a = useContextualFormProps(props), size = _a.size, className = _a.className, style = _a.style, overrides = _a.overrides, intent = _a.intent, $outlineStyle = _a.$outlineStyle, $outlineColor = _a.$outlineColor, $outlineOffset = _a.$outlineOffset, $outlineWidth = _a.$outlineWidth, restProps = __rest(_a, ["size", "className", "style", "overrides", "intent", "$outlineStyle", "$outlineColor", "$outlineOffset", "$outlineWidth"]);
     var convertedOverrides = useConvertOverrides({
@@ -27,5 +28,6 @@ export default function useCheckboxAdapter(props) {
         // https://prod-gitlab.sprinklr.com/sprinklr/frontend/spaceweb/-/issues/406 - baseui adds position absolute
         Input: { style: { position: 'static' } },
     }, overrides);
-    return __assign(__assign({}, restProps), { overrides: convertedOverrides });
+    var inputRefObj = useCombineRefObjects(props.inputRef);
+    return __assign(__assign({}, restProps), { overrides: convertedOverrides, inputRef: inputRefObj, onMouseEnter: props.onMouseEnter, onMouseLeave: props.onMouseLeave, onFocus: props.onFocus, onBlur: props.onBlur });
 }

package/esm/checkbox/index.d.ts

@@ -1,5 +1,5 @@
 export { Checkbox, StatefulCheckbox } from './checkbox';
-export { StatefulContainer, StyledRoot, StyledCheckmark, StyledLabel, StyledInput, StyledToggle, StyledToggleInner, StyledToggleTrack, } from 'baseui/checkbox';
+export { StatefulContainer, StyledRoot, StyledCheckmark, StyledLabel, StyledInput, StyledToggle, StyledToggleTrack, } from 'baseui/checkbox';
 export type { StateReducer, StatefulContainerProps, CheckboxOverrides, CheckboxState } from 'baseui/checkbox';
 export { STATE_TYPE, STYLE_TYPE } from 'baseui/checkbox';
 export * from './types';

package/esm/checkbox/index.js

@@ -1,4 +1,4 @@
 export { Checkbox, StatefulCheckbox } from './checkbox';
-export { StatefulContainer, StyledRoot, StyledCheckmark, StyledLabel, StyledInput, StyledToggle, StyledToggleInner, StyledToggleTrack, } from 'baseui/checkbox';
+export { StatefulContainer, StyledRoot, StyledCheckmark, StyledLabel, StyledInput, StyledToggle, StyledToggleTrack, } from 'baseui/checkbox';
 export { STATE_TYPE, STYLE_TYPE } from 'baseui/checkbox';
 export * from './types';

package/esm/checkbox/styled-components.js

@@ -31,7 +31,7 @@ var getBorderColor = function (utils, props) {
     if ($isHovered || $isFocusVisible) {
         return intentColor(utils, props, theme.spr.border06);
     }
-    return intentColor(utils, props, theme.spr.icon03);
+    return intentColor(utils, props, theme.spr.border04);
 };
 var getBackgroundColor = function (utils, props) {
     var $disabled = props.$disabled, $checked = props.$checked, $isIndeterminate = props.$isIndeterminate;

package/esm/checkbox/types.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { CheckboxProps as BaseCheckboxProps, StatefulCheckboxProps as BaseStatefulCheckboxProps } from 'baseui/checkbox';
 import { SharedProps as BaseSharedProps } from 'baseui/input';
 import { OutlineProps } from '../helpers/commonStyles';
@@ -12,17 +13,23 @@ export declare type SharedProps = BaseSharedProps & {
     $isIndeterminate: boolean;
     $size: CheckboxSize;
 };
-export declare type CheckboxProps = SpacewebComponentProps<Omit<BaseCheckboxProps, 'overrides' | 'size' | 'intent'>> & {
+declare type CommonProps = {
+    onMouseEnter?: (e: React.MouseEvent<HTMLInputElement>) => unknown;
+    onMouseLeave?: (e: React.MouseEvent<HTMLInputElement>) => unknown;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => unknown;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => unknown;
     size?: CheckboxSize;
     intent?: Intent;
+    inputRef?: React.Ref<HTMLInputElement>;
+};
+export declare type CheckboxProps = SpacewebComponentProps<Omit<BaseCheckboxProps, 'overrides' | keyof CommonProps>> & {
     overrides?: {
-        [key in keyof BaseCheckboxProps['overrides']]?: Override<SharedProps>;
+        [key in keyof Required<BaseCheckboxProps>['overrides']]?: Override<SharedProps>;
     };
-} & OutlineProps;
-export declare type StatefulCheckboxProps = SpacewebComponentProps<Omit<BaseStatefulCheckboxProps, 'overrides' | 'size' | 'intent'>> & {
-    size?: CheckboxSize;
-    intent?: Intent;
+} & OutlineProps & CommonProps;
+export declare type StatefulCheckboxProps = SpacewebComponentProps<Omit<BaseStatefulCheckboxProps, 'overrides' | keyof CommonProps>> & {
     overrides?: {
-        [key in keyof BaseStatefulCheckboxProps['overrides']]?: Override<SharedProps>;
+        [key in keyof Required<BaseStatefulCheckboxProps>['overrides']]?: Override<SharedProps>;
     };
-} & OutlineProps;
+} & OutlineProps & CommonProps;
+export {};

package/esm/date-input/DateInput.js

@@ -55,7 +55,7 @@ export var DateInput = function (_a) {
             _date = dateHelpers.parseString(dateString, formatString, dateFnsLocale);
         }
         var isValidDate = _date && dateHelpers.isValid(_date);
-        if (isValidDate) {
+        if (isValidDate && _date) {
             setError(false);
             setDate(formatDate({ date: _date, locale: dateFnsLocale, dateHelpers: dateHelpers, formatString: formatString }));
             onChange === null || onChange === void 0 ? void 0 : onChange(_date);
@@ -88,5 +88,5 @@ export var DateInput = function (_a) {
             },
         }, overrides);
     }, [adapter, onCalendarDateChange, locale, overrides, value, weekStartsOn, minDate, maxDate, timeSelect]);
-    return (_jsx(InputMask, __assign({ mask: getMask(), value: date, maskChar: maskChar, onChange: handleInputChange, disabled: restProps.disabled }, { children: function (props) { return _jsx(Input, __assign({}, props, restProps, { intent: error ? 'error' : 'default', overrides: mergedOverrides }), void 0); } }), void 0));
+    return (_jsx(InputMask, __assign({ mask: getMask(), value: date, maskChar: maskChar, onChange: handleInputChange, disabled: restProps.disabled, onBlur: restProps.onBlur }, { children: function (props) { return _jsx(Input, __assign({}, restProps, props, { intent: error ? 'error' : 'default', overrides: mergedOverrides }), void 0); } }), void 0));
 };

package/esm/date-picker/Calendar.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { SharedStyleProps } from './types';
-declare const _default: import("react").ForwardRefExoticComponent<Omit<import("baseui/datepicker").CalendarProps, "overrides"> & {
+declare const _default: import("react").ForwardRefExoticComponent<Omit<import("baseui/datepicker").CalendarProps<Date>, "overrides"> & {
     formatString?: string | undefined;
     overrides?: import("./types").DatepickerOverrides<SharedStyleProps> | undefined;
     adapter?: any;

package/esm/date-picker/Calendar.js

@@ -5,17 +5,19 @@ import { Calendar as BaseCalendar } from 'baseui/datepicker';
 import dateFnsAdapter from 'baseui/datepicker/utils/date-fns-adapter';
 import DateHelpers from 'baseui/datepicker/utils/date-helpers';
 import { DENSITY } from 'baseui/datepicker/constants';
+import _merge from 'lodash/merge';
 import ChevronDown from '../icon/components/chevron-down';
 import { useConvertOverrides } from '../helpers/baseui/useConvertOverrides';
 import { Popover } from '../popover';
 import { Menu, MenuItem } from '../menu';
 import { IconButton } from '../button';
-import { ThemeProvider } from '../theme';
+import { themeContext, useTheme } from '../theme';
 import { DateTimeContainer } from './DateTimeContainer';
 import withThemeOverride from '../helpers/baseui/withThemeOverride';
 import { getDayStyles, getCalendarContainerStyles } from './styled-components';
 import { DEFAULT_FORMAT_STRING } from './constants';
 import { prepareLocale } from './utils';
+import { useIsMobileDevice } from '../hooks/useIsMobileDevice';
 var CALENDAR_CUSTOM_THEME = { theme: { input: { borderRadius: '4px' } } };
 var MonthYearSelectMenu = function (props) {
     var _a = __read(useState(props.initialState.highlightedIndex), 2), highlightedIndex = _a[0], setHighlightedIndex = _a[1];
@@ -53,10 +55,15 @@ var ArrowButton = function (_a) {
         ] }, nextButtonProps, { children: _jsx(ChevronDown, { size: 8, className: ['transform', direction === 'next' ? '-rotate-90' : 'rotate-90'] }, void 0) }), void 0));
 };
 var Calendar = function (_a) {
-    var overrides = _a.overrides, _b = _a.adapter, adapter = _b === void 0 ? dateFnsAdapter : _b, _c = _a.formatString, formatString = _c === void 0 ? DEFAULT_FORMAT_STRING : _c, weekStartsOn = _a.weekStartsOn, props = __rest(_a, ["overrides", "adapter", "formatString", "weekStartsOn"]);
+    var _b;
+    var overrides = _a.overrides, _c = _a.adapter, adapter = _c === void 0 ? dateFnsAdapter : _c, _d = _a.formatString, formatString = _d === void 0 ? DEFAULT_FORMAT_STRING : _d, weekStartsOn = _a.weekStartsOn, props = __rest(_a, ["overrides", "adapter", "formatString", "weekStartsOn"]);
+    var currentTheme = useTheme();
+    var isMobileDevice = useIsMobileDevice();
+    var Provider = themeContext.Provider;
     var dateHelpers = useMemo(function () { return new DateHelpers(adapter); }, [adapter]);
     var todaySOD = adapter.startOfDay(new Date());
-    var _d = props.monthsShown, monthsShown = _d === void 0 ? 1 : _d, value = props.value, onChange = props.onChange, range = props.range, timeSelectStart = props.timeSelectStart, timeSelectEnd = props.timeSelectEnd;
+    var value = props.value, onChange = props.onChange, range = props.range, timeSelectStart = props.timeSelectStart, timeSelectEnd = props.timeSelectEnd;
+    var monthsShown = isMobileDevice ? 1 : (_b = props.monthsShown) !== null && _b !== void 0 ? _b : 1;
     var dateFnsLocale = useMemo(function () { return prepareLocale(props.locale, { weekStartsOn: weekStartsOn }); }, [weekStartsOn, props.locale]);
     var setTime = useCallback(function (_a) {
         var date = _a.date, hours = _a.hours, minutes = _a.minutes, seconds = _a.seconds;
@@ -197,7 +204,8 @@ var Calendar = function (_a) {
         props.minDate,
         props.maxDate,
     ]);
-    return (_jsx(ThemeProvider, __assign({ theme: CALENDAR_CUSTOM_THEME }, { children: _jsx(BaseCalendar, __assign({ orientation: "vertical" }, props, { onChange: handleCalendarDateChange, overrides: convertedOverrides, timeSelectEnd: false, locale: dateFnsLocale, 
+    var calendarTheme = useMemo(function () { return _merge({}, currentTheme, CALENDAR_CUSTOM_THEME); }, [currentTheme]);
+    return (_jsx(Provider, __assign({ value: calendarTheme }, { children: _jsx(BaseCalendar, __assign({ orientation: "vertical" }, props, { onChange: handleCalendarDateChange, overrides: convertedOverrides, timeSelectEnd: false, locale: dateFnsLocale, monthsShown: monthsShown, 
             //@ts-ignore baseweb has type inconsistency in declaration file
             density: DENSITY.high }), void 0) }), void 0));
 };

package/esm/date-picker/DateInput.d.ts

@@ -3,11 +3,12 @@ import DateHelpers from 'baseui/datepicker/utils/date-helpers';
 export declare const isDateValid: (value: any) => boolean;
 declare type DateInputProps = {
     locale?: any;
-    dateHelpers: DateHelpers;
+    dateHelpers: DateHelpers<Date>;
     onChange: (date: Date) => void;
     date?: Date | null;
     minDate?: Date;
     maxDate?: Date;
+    disabled?: boolean;
 };
-export declare const DateInput: React.MemoExoticComponent<({ dateHelpers, date, onChange, maxDate, minDate }: DateInputProps) => JSX.Element>;
+export declare const DateInput: React.MemoExoticComponent<({ dateHelpers, date, onChange, maxDate, minDate, disabled }: DateInputProps) => JSX.Element>;
 export {};

package/esm/date-picker/DateInput.js

@@ -94,9 +94,9 @@ var MAX_YEAR = 2100;
 export var isDateValid = function (value) { return value > 0 && value <= 31; };
 // eslint-disable-next-line max-statements
 export var DateInput = React.memo(function (_a) {
-    var dateHelpers = _a.dateHelpers, date = _a.date, onChange = _a.onChange, maxDate = _a.maxDate, minDate = _a.minDate;
+    var dateHelpers = _a.dateHelpers, date = _a.date, onChange = _a.onChange, maxDate = _a.maxDate, minDate = _a.minDate, disabled = _a.disabled;
     var _b = __read(React.useState(function () { return (date ? dateHelpers.formatDate(date, 'dd') : ''); }), 2), day = _b[0], setDay = _b[1];
-    var _c = __read(React.useState(function () { return (date ? dateHelpers.formatDate(date, 'yyyy') : ''); }), 2), year = _c[0], setYear = _c[1];
+    var _c = __read(React.useState(function () { return (date ? dateHelpers.getYear(date) : ''); }), 2), year = _c[0], setYear = _c[1];
     var _d = __read(React.useState(false), 2), error = _d[0], setError = _d[1];
     var minAllowedDate = 1;
     var maxAllowedDate = getDaysInMonth(date || new Date());
@@ -110,7 +110,7 @@ export var DateInput = React.memo(function (_a) {
             setError(true);
         }
         setDay(date ? dateHelpers.formatDate(date, 'dd') : '');
-        setYear(date ? dateHelpers.formatDate(date, 'yyyy') : '');
+        setYear(date ? dateHelpers.getYear(date) : '');
     }, [date, minDate, maxDate, dateHelpers]);
     var updateDate = function (nextDate) {
         if (isDateValid(nextDate)) {
@@ -210,7 +210,7 @@ export var DateInput = React.memo(function (_a) {
             'px-3 flex items-center border-1 border-solid rounded-4 border-box',
             function (_a) {
                 var theme = _a.theme, px2rem = _a.px2rem;
-                return (__assign(__assign({}, borderColor(error ? theme.spr.supportError : theme.spr.ui03)), { height: px2rem(35) }));
+                return (__assign(__assign(__assign({}, borderColor(error ? theme.spr.supportError : theme.spr.ui03)), { height: px2rem(35) }), (disabled ? { backgroundColor: theme.spr.ui02 } : { backgroundColor: theme.spr.ui01 })));
             },
-        ] }, { children: [_jsx(InputMask, __assign({ onBlur: dateBlur, onKeyDown: dateKeyDown, mask: "99", value: day, onChange: dayChange, maskChar: "_" }, { children: function (props) { return (_jsx(Input, __assign({}, props, { className: DATE_CLASSNAME, overrides: DATE_OVERRIDES, placeholder: "dd", size: "sm" }), void 0)); } }), void 0), _jsx(InputMask, __assign({ value: month, onKeyDown: monthKeyDown, mask: "aaa", maskChar: "_" }, { children: function (props) { return (_jsx(Input, __assign({}, props, { className: MONTH_CLASSNAME, overrides: MONTH_OVERRIDES, placeholder: "MM", size: "sm" }), void 0)); } }), void 0), _jsx(InputMask, __assign({ onBlur: yearBlur, onKeyDown: yearKeyDown, mask: "9999", value: year, onChange: yearChange, maskChar: "_" }, { children: function (props) { return (_jsx(Input, __assign({}, props, { className: YEAR_CLASSNAME, overrides: YEAR_OVERRIDES, placeholder: "yyyy", size: "sm" }), void 0)); } }), void 0)] }), void 0));
+        ] }, { children: [_jsx(InputMask, __assign({ onBlur: dateBlur, onKeyDown: dateKeyDown, mask: "99", value: day, onChange: dayChange, maskChar: "_", disabled: disabled }, { children: function (props) { return (_jsx(Input, __assign({}, props, { className: DATE_CLASSNAME, overrides: DATE_OVERRIDES, placeholder: "dd", size: "sm", disabled: disabled }), void 0)); } }), void 0), _jsx(InputMask, __assign({ value: month, onKeyDown: monthKeyDown, mask: "aaa", maskChar: "_", disabled: disabled }, { children: function (props) { return (_jsx(Input, __assign({}, props, { className: MONTH_CLASSNAME, overrides: MONTH_OVERRIDES, placeholder: "MM", size: "sm", disabled: disabled }), void 0)); } }), void 0), _jsx(InputMask, __assign({ onBlur: yearBlur, onKeyDown: yearKeyDown, mask: "9999", value: year, onChange: yearChange, maskChar: "_", disabled: disabled }, { children: function (props) { return (_jsx(Input, __assign({}, props, { className: YEAR_CLASSNAME, overrides: YEAR_OVERRIDES, placeholder: "yyyy", size: "sm", disabled: disabled }), void 0)); } }), void 0)] }), void 0));
 });

package/esm/date-picker/DatePickerInput.js

@@ -10,7 +10,7 @@ import ChevronDown from '../icon/components/chevron-down';
 import CalendarIcon from '../icon/components/calendar-solid';
 import ClearIconButton from '../helpers/ClearIconButton';
 import { mergeOverrides } from '../overrides';
-import { getComponentSizeTheme } from '../helpers/themeHelpers';
+import { getInputStyles } from '../input/styled-components';
 import cx from '../classNames';
 var InputBeforeEnhancer = function (_a) {
     var disabled = _a.disabled, onClick = _a.onClick;
@@ -84,15 +84,9 @@ var DatePickerInput = function (_a) {
         }, overrides);
     }, [overrides, onFocus, isOpen, inputWidth, disabled, autoSizeInput]);
     return (_jsxs(_Fragment, { children: [_jsx(Input, __assign({}, props, { value: value, onFocus: onFocus, disabled: disabled, overrides: INPUT_OVERRIDES }), void 0), _jsx(Box, __assign({ ref: ref, className: [
-                    function (_a) {
-                        var theme = _a.theme;
-                        var inputSizeTheme = getComponentSizeTheme(theme, 'input', props.size, 'lg');
-                        return {
-                            lineHeight: inputSizeTheme.lineHeight,
-                            paddingLeft: inputSizeTheme.paddingX,
-                            paddingRight: inputSizeTheme.paddingX,
-                            fontSize: inputSizeTheme.fontSize,
-                        };
+                    function (utils) {
+                        var inputStyles = getInputStyles(utils, { $size: props.size, $disabled: disabled });
+                        return inputStyles;
                     },
                     {
                         position: 'absolute',

package/esm/date-picker/DateTimeContainer.d.ts

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { CalendarProps as BaseCalendarProps } from 'baseui/datepicker';
+import { DateIOAdapter } from 'baseui/datepicker/utils/types';
 import { DatepickerOverrides } from './types';
 declare type Props = {
     range?: boolean;
-    adapter?: any;
+    adapter?: DateIOAdapter<Date>;
     timeSelectStart?: boolean;
     timeSelectEnd?: boolean;
     value?: Date | Date[] | null;
@@ -13,6 +14,7 @@ declare type Props = {
     locale?: any;
     minDate?: Date;
     maxDate?: Date;
+    disabled?: boolean;
 };
-export declare const DateTimeContainer: React.MemoExoticComponent<({ range, adapter, timeSelectStart, timeSelectEnd, value, monthsShown, onChange, overrides, locale: dateFnsLocale, minDate, maxDate, }: Props) => JSX.Element>;
+export declare const DateTimeContainer: React.MemoExoticComponent<({ range, adapter, timeSelectStart, timeSelectEnd, value, monthsShown, onChange, overrides, locale: dateFnsLocale, minDate, maxDate, disabled, }: Props) => JSX.Element>;
 export {};