@sprinklrjs/spaceweb 12.33.2 → 14.11.3

package/esm/banner/cvaConfig.d.ts

@@ -0,0 +1,2 @@
+export declare const bannerRootCVA: ({ theme, deprecatedAIThemeEnabled }: import("..").ThemeContext, sharedProps: Record<string, unknown>) => string;
+export declare const bannerIconFillColor: ({ theme, deprecatedAIThemeEnabled }: import("..").ThemeContext, sharedProps: Record<string, unknown>) => string;

package/esm/banner/cvaConfig.js

@@ -0,0 +1,38 @@
+import { cvaWrapper } from '../style/cvaWrapper';
+export var bannerRootCVA = cvaWrapper('banner', 'root', [
+    'box-border w-full rounded-8 border-solid border-1 overflow-auto pb-2',
+    {
+        variants: {
+            $intent: {
+                info: 'spr-border-quaternary',
+                error: 'spr-border-error',
+                warning: 'spr-border-warning',
+                success: 'spr-border-success',
+            },
+        },
+        defaultVariants: {
+            $intent: 'error',
+        },
+    },
+]);
+export var bannerIconFillColor = cvaWrapper('banner', 'icon', [
+    'mr-1 shrink-0',
+    {
+        variants: {
+            $intent: {
+                info: 'spr-text-secondary',
+                error: 'spr-icon-error',
+                warning: 'spr-icon-warning spr-text-secondary',
+                success: 'spr-icon-success',
+            },
+        },
+        compoundVariants: [
+            {
+                $intent: 'warning',
+                $mode: 'dark',
+                className: 'spr-text-inverse',
+            },
+        ],
+        defaultVariants: { $intent: 'error' },
+    },
+]);

package/esm/banner/locale.d.ts

@@ -1,6 +1,11 @@
-export declare type BannerLocale = {
+export type BannerLocale = {
     toggleButtonShowLabel: string;
     toggleButtonHideLabel: string;
     toggleButtonShowAriaLabel: string;
     toggleButtonHideAriaLabel: string;
+    closeIconTooltipContent: string;
+    errorTitle: string;
+    warningTitle: string;
+    successTitle: string;
+    infoTitle: string;
 };

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

@@ -1,6 +1,7 @@
-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;
+export declare const StyledHeaderEndContainer: import("../style").StyledComponent;
+export declare const StyledBanner: import("../style").StyledComponent;
+export declare const StyledBannerItemContainer: import("../style").StyledComponent;
+export declare const StyledTitleContainer: import("../style").StyledComponent;
+export declare const StyledHeaderContainer: import("../style").StyledComponent;
+export declare const StyledTitle: import("../style").StyledComponent;
+export declare const StyledBannerItem: import("../style").StyledComponent;

package/esm/banner/styled-component.js

@@ -1,35 +1,23 @@
-import cx from '../classNames';
+import classnames 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 });
+import { bannerRootCVA } from './cvaConfig';
+export var StyledHeaderEndContainer = styled('div', 'flex flex-row items-start self-start gap-2 pl-1 shrink-0');
+export var StyledBanner = styled('div', bannerRootCVA);
+export var StyledBannerItemContainer = styled('div', 'box-border list-inside list-none text-14 leading-150 font-400 mt-1 pl-8 pr-3 max-h-[--sw-max-height]', function (_utils, _a) {
+    var $as = _a.$as, $maxHeight = _a.$maxHeight;
+    return classnames({
+        'list-decimal': $as === 'ol',
+        'list-disc': $as === 'ul',
+        'overflow-y-hidden': Boolean($maxHeight),
+    });
 });
-export var StyledTitleContainer = styled('div', 'flex flex-row justify-center items-start');
-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 StyledTitleContainer = styled('div', 'flex flex-row items-start flex-1 min-w-0');
+export var StyledHeaderContainer = styled('div', 'flex flex-row items-center justify-between sticky top-0 spr-bg-primary px-3 pt-2', function (_utils, _a) {
+    var $sticky = _a.$sticky;
+    return classnames({ 'spr-shadow-100': $sticky });
 });
-export var StyledTitle = styled('div', 'typography-bl1 font-600');
-export var StyledBannerItem = styled('li', 'typography-bl1');
+export var StyledTitle = styled('div', 'leading-150 min-w-0', function (_, _a) {
+    var $hasDescription = _a.$hasDescription;
+    return $hasDescription ? 'text-14 font-400' : 'text-16 font-600';
+});
+export var StyledBannerItem = styled('li', 'text-14 leading-150 font-400');

package/esm/banner/types.d.ts

@@ -1,11 +1,13 @@
 import { Override } from '../overrides/types';
 import { SpacewebComponentProps } from '../types';
-import { ReactNode } from 'react';
-export declare type BannerProps = Omit<SpacewebComponentProps, 'title'> & {
-    intent?: 'error' | 'warning' | 'success';
+import { MouseEvent, ReactNode } from 'react';
+export type BannerIntent = 'error' | 'warning' | 'success' | 'info';
+export type BannerProps = Omit<SpacewebComponentProps, 'title'> & {
+    intent?: BannerIntent;
     $as?: string;
+    /** @deprecated */
     collapsible?: boolean;
-    title: ReactNode;
+    titleEndEnhancer?: ReactNode;
     children?: ReactNode;
     maxItemContainerHeight?: string;
     overrides?: {
@@ -16,9 +18,20 @@ export declare type BannerProps = Omit<SpacewebComponentProps, 'title'> & {
         HeaderContainer?: Override<Record<string, any>>;
         TitleContainer?: Override<Record<string, any>>;
         ToggleButton?: Override<Record<string, any>>;
+        HeaderEndContainer?: Override<Record<string, any>>;
+        CloseButton?: Override<Record<string, any>>;
     };
-};
-export declare type BannerItemProps = SpacewebComponentProps & {
+    visible?: boolean;
+    closeable?: boolean;
+    onClose?: (event: MouseEvent) => void;
+} & ({
+    title: ReactNode;
+    description?: never;
+} | {
+    title?: never;
+    description: ReactNode;
+});
+export type BannerItemProps = SpacewebComponentProps & {
     children?: ReactNode;
     overrides?: {
         Root?: Override<Record<string, any>>;

package/esm/base-button/BaseButton.d.ts

@@ -1,6 +1,9 @@
-/// <reference types="react" />
-export declare const BaseButton: import("react").ForwardRefExoticComponent<Omit<import("react").AllHTMLAttributes<HTMLElement>, "style" | "className"> & {
-    $as?: import("react").ElementType<any> | undefined;
-    className?: import("..").Styles;
+import * as React from 'react';
+export declare const BaseButton: React.ForwardRefExoticComponent<Omit<React.AllHTMLAttributes<HTMLElement>, "className" | "style"> & {
+    $as?: React.ElementType | undefined;
+    className?: import("..").ClassName;
     style?: import("..").Styles;
-} & import("react").RefAttributes<HTMLElement>>;
+} & {
+    tooltipContent?: React.ReactNode | import("../baseui/popover").ContentRenderProp;
+    overrides?: import("./types").BaseButtonOverrides | undefined;
+} & React.RefAttributes<HTMLElement>>;

package/esm/base-button/BaseButton.js

@@ -1,26 +1,37 @@
-import { __assign } from "tslib";
+import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useCallback } from 'react';
 import { useFocusVisible } from '../hooks/useFocusVisible';
 import { StyledBaseButton } from './styled-components';
+import { useOverrides } from '../overrides';
+import DisabledTooltipContainer from '../tooltip/disabled-tooltip-container';
+import DefaultStatefulTooltip from '../tooltip/stateful-tooltip';
 var isNotAllyElement = function (props) { return props.$as && !(props.$as === 'button' || props.$as === 'a'); };
-export var BaseButton = forwardRef(function (props, ref) {
+export var BaseButton = forwardRef(function (_a, ref) {
+    var _b;
+    var tooltipContent = _a.tooltipContent, overrides = _a.overrides, restProps = __rest(_a, ["tooltipContent", "overrides"]);
     var baseButtonProps = {};
-    var focusProps = useFocusVisible(props);
+    var focusProps = useFocusVisible(restProps);
     var handleKeyPress = useCallback(function (event) {
         var _a, _b;
         event.preventDefault();
         if (event.key === 'Enter' || event.key === ' ') {
-            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, event);
+            (_a = restProps.onClick) === null || _a === void 0 ? void 0 : _a.call(restProps, event);
         }
-        (_b = props.onKeyPress) === null || _b === void 0 ? void 0 : _b.call(props, event);
-    }, [props.onClick, props.onKeyPress]);
-    if (isNotAllyElement(props)) {
+        (_b = restProps.onKeyPress) === null || _b === void 0 ? void 0 : _b.call(restProps, event);
+    }, [restProps.onClick, restProps.onKeyPress]);
+    var _c = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.StatefulTooltip, DefaultStatefulTooltip), 2), StatefulTooltip = _c[0], statefulTooltipProps = _c[1];
+    if (isNotAllyElement(restProps)) {
         baseButtonProps.onKeyPress = handleKeyPress;
-        baseButtonProps.role = 'button';
-        baseButtonProps.tabIndex = props.disabled ? -1 : props.tabIndex || 0;
-        baseButtonProps['aria-disabled'] = Boolean(props.disabled);
+        baseButtonProps.role = (_b = restProps.role) !== null && _b !== void 0 ? _b : 'button';
+        baseButtonProps.tabIndex = restProps.disabled ? -1 : restProps.tabIndex || 0;
+        baseButtonProps['aria-disabled'] = Boolean(restProps.disabled);
     }
-    return _jsx(StyledBaseButton, __assign({}, props, baseButtonProps, focusProps, { ref: ref }), void 0);
+    var buttonEl = _jsx(StyledBaseButton, __assign({ type: "button" }, restProps, baseButtonProps, focusProps, { ref: ref }));
+    if (restProps.disabled && tooltipContent) {
+        return (_jsx(DisabledTooltipContainer, __assign({ placement: "bottom", content: tooltipContent, viewportAsBoundary: true }, statefulTooltipProps, { children: buttonEl })));
+    }
+    return tooltipContent ? (_jsx(StatefulTooltip, __assign({ placement: "bottom", content: tooltipContent, viewportAsBoundary: true }, statefulTooltipProps, { children: buttonEl }))) : (buttonEl);
 });
 BaseButton.displayName = 'BaseButton';
+BaseButton.__standard = 'Component';

package/esm/base-button/styled-components.d.ts

@@ -1,3 +1,3 @@
-import { Styles } from '../types';
-export declare const buttonResetStyles: Styles;
-export declare const StyledBaseButton: import("../style/styled").StyledComponent;
+import { ClassName } from '../types';
+export declare const buttonResetStyles: ClassName;
+export declare const StyledBaseButton: import("../style").StyledComponent;

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

@@ -3,8 +3,8 @@ import { styled } from '../style';
 export var buttonResetStyles = [
     'inline-flex items-center justify-center',
     'm-0 p-0 border-0 rounded-0 border-none',
-    'cursor-pointer no-underline appearance-none select-none spr-text-01',
-    { backgroundColor: 'transparent', fontSize: 'inherit' },
-    'focus-visible:outline-01',
+    'cursor-pointer no-underline appearance-none select-none spr-text-01 font-size-inherit bg-transparent',
+    'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--spr-focus-01]',
+    'disabled:cursor-not-allowed',
 ];
 export var StyledBaseButton = styled.apply(void 0, __spreadArray(['button'], __read(buttonResetStyles), false));

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

@@ -1,2 +1,10 @@
 import { SpacewebComponentProps } from '../types';
-export declare type BaseButtonProps = SpacewebComponentProps;
+import { Override } from '../overrides';
+import { TooltipProps } from '../tooltip/types';
+export type BaseButtonOverrides = {
+    StatefulTooltip?: Override<Record<string, any>>;
+};
+export type BaseButtonProps = SpacewebComponentProps & {
+    tooltipContent?: TooltipProps['content'];
+    overrides?: BaseButtonOverrides;
+};

package/esm/baseui/accordion/accordion.d.ts

@@ -3,7 +3,7 @@ import type { AccordionProps, AccordionState, StateChangeType } from './types';
 export default class Accordion extends React.Component<AccordionProps, AccordionState> {
     static defaultProps: Partial<AccordionProps>;
     state: {
-        expanded: never[] | React.Key[];
+        expanded: React.Key[];
     };
     itemRefs: React.RefObject<HTMLDivElement>[];
     onPanelChange(key: React.Key, onChange: (...args: any[]) => {}, ...args: Array<any>): void;

package/esm/baseui/accordion/accordion.js

@@ -7,9 +7,9 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
-import { getOverrides } from '../helpers/overrides';
 import { Root as StyledRoot } from './styled-components';
 import { STATE_CHANGE_TYPE } from './constants';
+import { getOverrides } from '../../overrides';
 var Accordion = /** @class */ (function (_super) {
     __extends(Accordion, _super);
     function Accordion() {
@@ -134,7 +134,7 @@ var Accordion = /** @class */ (function (_super) {
         var _a = this.props.overrides, overrides = _a === void 0 ? {} : _a;
         var RootOverride = overrides.Root;
         var _b = __read(getOverrides(RootOverride, StyledRoot), 2), Root = _b[0], rootProps = _b[1];
-        return (_jsx(Root, __assign({ "data-baseweb": "accordion", "$disabled": this.props.disabled, "$isFocusVisible": false, onKeyDown: this.handleKeyDown.bind(this) }, rootProps, { children: this.getItems() }), void 0));
+        return (_jsx(Root, __assign({ "data-baseweb": "accordion", "$disabled": this.props.disabled, "$isFocusVisible": false, onKeyDown: this.handleKeyDown.bind(this) }, rootProps, { children: this.getItems() })));
     };
     Accordion.defaultProps = {
         accordion: true,

package/esm/baseui/accordion/index.d.ts

@@ -9,4 +9,4 @@ export { Root as StyledRoot, PanelContainer as StyledPanelContainer, Header as S
 export * from './types';
 export type { AccordionLocale } from './locale';
 /** @deprecated use SharedStylePropsArg instead. To be removed in future versions.*/
-export declare type SharedProps = SharedStylePropsArg;
+export type SharedProps = SharedStylePropsArg;

package/esm/baseui/accordion/locale.d.ts

@@ -1,4 +1,4 @@
-export declare type AccordionLocale = {
+export type AccordionLocale = {
     collapse: string;
     expand: string;
 };

package/esm/baseui/accordion/panel.js

@@ -7,20 +7,22 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
-import { LocaleContext } from '../locale';
-import { getOverrides } from '../helpers/overrides';
+import { useOverrides } from '../../overrides';
 import { PanelContainer as StyledPanelContainer, Header as StyledHeader, Content as StyledContent, ToggleIcon as StyledToggleIcon, ToggleIconGroup as StyledToggleIconGroup, ContentAnimationContainer as StyledContentAnimationContainer, } from './styled-components';
 import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible';
+import { useLocale } from '../../locale';
+import _noop from 'lodash/noop';
 var Panel = function (_a, 
 // @ts-ignore
 ref) {
-    var ariaControls = _a["aria-controls"], children = _a.children, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.expanded, expanded = _c === void 0 ? false : _c, _d = _a.onChange, onChange = _d === void 0 ? function () { } : _d, _e = _a.onClick, onClick = _e === void 0 ? function () { } : _e, _f = _a.onKeyDown, onKeyDown = _f === void 0 ? function () { } : _f, _g = _a.overrides, overrides = _g === void 0 ? {} : _g, _h = _a.title, title = _h === void 0 ? '' : _h, _j = _a.renderAll, renderAll = _j === void 0 ? false : _j;
+    var ariaControls = _a["aria-controls"], children = _a.children, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.expanded, expanded = _c === void 0 ? false : _c, _d = _a.onChange, onChange = _d === void 0 ? _noop : _d, _e = _a.onClick, onClick = _e === void 0 ? _noop : _e, _f = _a.onKeyDown, onKeyDown = _f === void 0 ? _noop : _f, _g = _a.overrides, overrides = _g === void 0 ? {} : _g, _h = _a.title, title = _h === void 0 ? '' : _h, _j = _a.renderAll, renderAll = _j === void 0 ? false : _j;
     var _k = __read(React.useState({
         expanded: expanded,
         isFocusVisible: false,
         elementHeight: 0,
         animationInProgress: false,
     }), 2), localState = _k[0], setLocalState = _k[1];
+    var locale = useLocale();
     var handleFocus = React.useCallback(function (event) {
         if (isFocusVisible(event)) {
             setLocalState(__assign(__assign({}, localState), { isFocusVisible: true }));
@@ -92,17 +94,17 @@ ref) {
         $isFocusVisible: localState.isFocusVisible,
     };
     var PanelContainerOverride = overrides.PanelContainer, HeaderOverride = overrides.Header, ContentOverride = overrides.Content, ContentAnimationContainerOverride = overrides.ContentAnimationContainer, ToggleIconOverride = overrides.ToggleIcon, ToggleIconGroupOverride = overrides.ToggleIconGroup;
-    var _l = __read(getOverrides(PanelContainerOverride, StyledPanelContainer), 2), PanelContainer = _l[0], panelContainerProps = _l[1];
-    var _m = __read(getOverrides(HeaderOverride, StyledHeader), 2), Header = _m[0], headerProps = _m[1];
-    var _o = __read(getOverrides(ContentOverride, StyledContent), 2), Content = _o[0], contentProps = _o[1];
-    var _p = __read(getOverrides(ContentAnimationContainerOverride, StyledContentAnimationContainer), 2), ContentAnimationContainer = _p[0], contentAnimationProps = _p[1];
-    var _q = __read(getOverrides(ToggleIconGroupOverride, StyledToggleIconGroup), 2), ToggleIconGroup = _q[0], toggleIconGroupProps = _q[1];
-    var _r = __read(getOverrides(ToggleIconOverride, StyledToggleIcon), 2), ToggleIcon = _r[0], toggleIconProps = _r[1];
-    return (_jsx(LocaleContext.Consumer, { children: function (locale) { return (_jsxs(PanelContainer, __assign({}, sharedProps, panelContainerProps, { children: [_jsxs(Header, __assign({ tabIndex: 0, role: "button", "aria-expanded": expanded, "aria-disabled": disabled || null }, sharedProps, headerProps, (ariaControls ? { 'aria-controls': ariaControls } : {}), { onClick: handleClick, onKeyDown: handleKeyDown, onFocus: forkFocus(headerProps, handleFocus), onBlur: forkBlur(headerProps, handleBlur), ref: ref }, { children: [title, _jsxs(ToggleIcon, __assign({ viewBox: "0 0 24 24", title: localState.expanded ? locale.accordion.collapse : locale.accordion.expand, size: 16 }, toggleIconProps, sharedProps, { children: [_jsx(ToggleIconGroup, __assign({}, sharedProps, toggleIconGroupProps, { children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6 12C6 11.4477 6.44772 11 7 11H17C17.5523 11 18 11.4477 18 12C18 12.5523 17.5523 13 17 13H7C6.44772 13 6 12.5523 6 12Z" }, void 0) }), void 0), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6 12C6 11.4477 6.44772 11 7 11H17C17.5523 11 18 11.4477 18 12C18 12.5523 17.5523 13 17 13H7C6.44772 13 6 12.5523 6 12Z" }, void 0)] }), void 0)] }), void 0), _jsx(ContentAnimationContainer, __assign({}, sharedProps, contentAnimationProps, { "$height": contentHeight, onTransitionEnd: function () {
-                        if (localState.animationInProgress) {
-                            setLocalState(__assign(__assign({}, localState), { animationInProgress: false }));
-                        }
-                    } }, { children: _jsx(Content, __assign({ ref: _animateRef }, sharedProps, contentProps, (ariaControls ? { id: ariaControls } : {}), { children: localState.expanded || renderAll || localState.animationInProgress ? children : null }), void 0) }), void 0)] }), void 0)); } }, void 0));
+    var _l = __read(useOverrides(PanelContainerOverride, StyledPanelContainer), 2), PanelContainer = _l[0], panelContainerProps = _l[1];
+    var _m = __read(useOverrides(HeaderOverride, StyledHeader), 2), Header = _m[0], headerProps = _m[1];
+    var _o = __read(useOverrides(ContentOverride, StyledContent), 2), Content = _o[0], contentProps = _o[1];
+    var _p = __read(useOverrides(ContentAnimationContainerOverride, StyledContentAnimationContainer), 2), ContentAnimationContainer = _p[0], contentAnimationProps = _p[1];
+    var _q = __read(useOverrides(ToggleIconGroupOverride, StyledToggleIconGroup), 2), ToggleIconGroup = _q[0], toggleIconGroupProps = _q[1];
+    var _r = __read(useOverrides(ToggleIconOverride, StyledToggleIcon), 2), ToggleIcon = _r[0], toggleIconProps = _r[1];
+    return (_jsxs(PanelContainer, __assign({}, sharedProps, panelContainerProps, { children: [_jsxs(Header, __assign({ tabIndex: 0, role: "button", "aria-expanded": expanded, "aria-disabled": disabled || null }, sharedProps, headerProps, (ariaControls ? { 'aria-controls': ariaControls } : {}), { onClick: handleClick, onKeyDown: handleKeyDown, onFocus: forkFocus(headerProps, handleFocus), onBlur: forkBlur(headerProps, handleBlur), ref: ref }, { children: [title, _jsxs(ToggleIcon, __assign({ viewBox: "0 0 24 24", title: localState.expanded ? locale.accordion.collapse : locale.accordion.expand, size: 16 }, toggleIconProps, sharedProps, { children: [_jsx(ToggleIconGroup, __assign({}, sharedProps, toggleIconGroupProps, { children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6 12C6 11.4477 6.44772 11 7 11H17C17.5523 11 18 11.4477 18 12C18 12.5523 17.5523 13 17 13H7C6.44772 13 6 12.5523 6 12Z" }) })), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6 12C6 11.4477 6.44772 11 7 11H17C17.5523 11 18 11.4477 18 12C18 12.5523 17.5523 13 17 13H7C6.44772 13 6 12.5523 6 12Z" })] }))] })), _jsx(ContentAnimationContainer, __assign({}, sharedProps, contentAnimationProps, { "$height": contentHeight, onTransitionEnd: function () {
+                    if (localState.animationInProgress) {
+                        setLocalState(__assign(__assign({}, localState), { animationInProgress: false }));
+                    }
+                } }, { children: _jsx(Content, __assign({ ref: _animateRef }, sharedProps, contentProps, (ariaControls ? { id: ariaControls } : {}), { children: localState.expanded || renderAll || localState.animationInProgress ? children : null })) }))] })));
 };
 var ForwardedPanel = React.forwardRef(Panel);
 ForwardedPanel.displayName = 'Panel';

package/esm/baseui/accordion/stateful-panel.js

@@ -4,5 +4,5 @@ import StatefulContainer from './stateful-panel-container';
 import Panel from './panel';
 export default function StatefulPanel(props) {
     var children = props.children, restProps = __rest(props, ["children"]);
-    return (_jsx(StatefulContainer, __assign({}, restProps, { children: function (componentProps) { return _jsx(Panel, __assign({}, componentProps, { children: children }), void 0); } }), void 0));
+    return (_jsx(StatefulContainer, __assign({}, restProps, { children: function (componentProps) { return _jsx(Panel, __assign({}, componentProps, { children: children })); } })));
 }

package/esm/baseui/accordion/stateless-accordion.js

@@ -8,16 +8,16 @@ LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
 import { isElement, isPortal } from 'react-is';
-import { getOverrides } from '../helpers/overrides';
 import { Root as StyledRoot } from './styled-components';
+import { useOverrides } from '../../overrides';
 function StatelessAccordion(_a) {
     var _b = _a.accordion, accordion = _b === void 0 ? true : _b, children = _a.children, disabled = _a.disabled, expanded = _a.expanded, onChange = _a.onChange, _c = _a.overrides, overrides = _c === void 0 ? {} : _c, renderAll = _a.renderAll;
     var RootOverrides = overrides.Root, PanelOverrides = __rest(overrides, ["Root"]);
-    var _d = __read(getOverrides(RootOverrides, StyledRoot), 2), Root = _d[0], rootProps = _d[1];
+    var _d = __read(useOverrides(RootOverrides, StyledRoot), 2), Root = _d[0], rootProps = _d[1];
     return (_jsx(Root, __assign({ "data-baseweb": "accordion" }, rootProps, { children: React.Children.map(children, function (child, index) {
             var normalizedChild = isElement(child) || isPortal(child) ? (child) : (
             // if primitive value - wrap it in a fragment
-            _jsx(_Fragment, { children: child }, void 0));
+            _jsx(_Fragment, { children: child }));
             var key = normalizedChild.key || String(index);
             return React.cloneElement(normalizedChild, {
                 disabled: normalizedChild.props.disabled || disabled,
@@ -52,6 +52,6 @@ function StatelessAccordion(_a) {
                 overrides: normalizedChild.props.overrides || PanelOverrides,
                 renderAll: renderAll,
             });
-        }) }), void 0));
+        }) })));
 }
 export default StatelessAccordion;

package/esm/baseui/accordion/styled-components.d.ts

@@ -1,10 +1,10 @@
 /**
  * Main component container element
  */
-export declare const Root: import("../../style/styled").StyledComponent;
-export declare const PanelContainer: import("../../style/styled").StyledComponent;
-export declare const Header: import("../../style/styled").StyledComponent;
-export declare const ToggleIcon: import("../../style/styled").StyledComponent;
-export declare const ToggleIconGroup: import("../../style/styled").StyledComponent;
-export declare const Content: import("../../style/styled").StyledComponent;
-export declare const ContentAnimationContainer: import("../../style/styled").StyledComponent;
+export declare const Root: import("../../style").StyledComponent;
+export declare const PanelContainer: import("../../style").StyledComponent;
+export declare const Header: import("../../style").StyledComponent;
+export declare const ToggleIcon: import("../../style").StyledComponent;
+export declare const ToggleIconGroup: import("../../style").StyledComponent;
+export declare const Content: import("../../style").StyledComponent;
+export declare const ContentAnimationContainer: import("../../style").StyledComponent;

package/esm/baseui/accordion/styled-components.js

@@ -10,9 +10,14 @@ import { styled } from '../../style';
  */
 export var Root = styled('ul', 'my-0 px-0 w-full list-none');
 Root.displayName = 'Root';
-export var PanelContainer = styled('li', 'spr-border-03 list-none w-full border-b-1', { borderBottomStyle: 'solid' });
+export var PanelContainer = styled('li', 'spr-border-03 list-none w-full border-b-1', {
+    // @ts-ignore -- CSS-in-JS -- TS2345: Argument of type '{ borderBlockEndStyle: string; }' is not assignable to...
+    borderBlockEndStyle: 'solid',
+});
 PanelContainer.displayName = 'PanelContainer';
-export var Header = styled('div', 'm-0 px-5 py-4 flex items-center justify-between nav-ui-01 text-16 leading-8 font-500', function (_, props) {
+export var Header = styled('div', 'm-0 px-5 py-4 flex items-center justify-between nav-ui-01 text-16 leading-5 font-500', 
+// @ts-ignore -- CSS-in-JS -- TS2345: Argument of type '(_: StyleUtils, props: any) => { cursor: string; out...
+function (_, props) {
     var $disabled = props.$disabled;
     return {
         cursor: $disabled ? 'not-allowed' : 'pointer',
@@ -20,21 +25,26 @@ export var Header = styled('div', 'm-0 px-5 py-4 flex items-center justify-betwe
     };
 });
 Header.displayName = 'Header';
-export var ToggleIcon = styled('svg', 'h-4 w-4 inline-block flex-shrink-0', function (_a, props) {
+// @ts-ignore -- CSS-in-JS -- TS2345: Argument of type '({ theme }: StyleUtils, props: any) => { fill: any; ...
+export var ToggleIcon = styled('svg', 'h-4 w-4 inline-block shrink-0', function (_a, props) {
     var theme = _a.theme;
     var $disabled = props.$disabled, $color = props.$color;
     return {
-        color: $color || theme.nav.ui01,
+        fill: $color || theme.spr.icon01,
         cursor: $disabled ? 'not-allowed' : 'pointer',
     };
 });
 ToggleIcon.displayName = 'ToggleIcon';
-export var ToggleIconGroup = styled('g', 'origin-center transition-transform duration-500 ease-out', function (_, _a) {
+export var ToggleIconGroup = styled('g', 'origin-center transition-transform duration-500 ease-out', 
+// @ts-ignore -- CSS-in-JS -- TS2345: Argument of type '(_: StyleUtils, { $expanded }: any) => { transform: ...
+function (_, _a) {
     var $expanded = _a.$expanded;
     return ({ transform: $expanded ? 'rotate(0)' : 'rotate(-90deg)' });
 });
 ToggleIconGroup.displayName = 'ToggleIconGroup';
-export var Content = styled('div', 'px-6 pt-6 pb-10 text-14 leading-8 m-0 nav-text-01 overflow-hidden duration-500 ease-out delay-200 box-border', function (_, props) {
+export var Content = styled('div', 'px-6 pt-6 pb-10 text-14 leading-5 m-0 overflow-hidden duration-500 ease-out delay-200 box-border', 
+// @ts-ignore -- CSS-in-JS -- TS2345: Argument of type '(_: StyleUtils, props: any) => { boxSizing: string; ...
+function (_, props) {
     var $expanded = props.$expanded;
     return {
         boxSizing: 'border-box',
@@ -44,6 +54,7 @@ export var Content = styled('div', 'px-6 pt-6 pb-10 text-14 leading-8 m-0 nav-te
     };
 });
 Content.displayName = 'Content';
+// @ts-ignore -- CSS-in-JS -- TS2345: Argument of type '(_: StyleUtils, props: any) => { height: string; tra...
 export var ContentAnimationContainer = styled('div', 'overflow-hidden duration-500 ease-out', function (_, props) {
     var $height = props.$height;
     return {

package/esm/baseui/accordion/types.d.ts

@@ -1,39 +1,39 @@
 import type * as React from 'react';
-import type { Override } from '../helpers/overrides';
+import type { Override } from '../../overrides';
 import type { STATE_CHANGE_TYPE } from './constants';
-export declare type AccordionState = {
+export type AccordionState = {
     expanded: Array<React.Key>;
 };
-export declare type PanelState = {
+export type PanelState = {
     expanded: boolean;
 };
-export declare type StateChangeType = keyof typeof STATE_CHANGE_TYPE;
-export declare type StateReducer = (stateChangeType: StateChangeType, nextState: AccordionState, currentState: AccordionState) => AccordionState;
-export declare type PanelStateReducer = (stateChangeType: StateChangeType, nextState: PanelState, currentState: PanelState) => PanelState;
-export declare type AccordionOverrides = {
-    Content?: Override;
-    ContentAnimationContainer?: Override;
-    Header?: Override;
-    PanelContainer?: Override;
-    Root?: Override;
-    ToggleIcon?: Override;
-    ToggleIconGroup?: Override;
+export type StateChangeType = keyof typeof STATE_CHANGE_TYPE;
+export type StateReducer = (stateChangeType: StateChangeType, nextState: AccordionState, currentState: AccordionState) => AccordionState;
+export type PanelStateReducer = (stateChangeType: StateChangeType, nextState: PanelState, currentState: PanelState) => PanelState;
+export type AccordionOverrides = {
+    Content?: Override<Record<string, any>>;
+    ContentAnimationContainer?: Override<Record<string, any>>;
+    Header?: Override<Record<string, any>>;
+    PanelContainer?: Override<Record<string, any>>;
+    Root?: Override<Record<string, any>>;
+    ToggleIcon?: Override<Record<string, any>>;
+    ToggleIconGroup?: Override<Record<string, any>>;
 };
-export declare type PanelOverrides = {
-    PanelContainer?: Override;
-    Header?: Override;
-    ToggleIcon?: Override;
-    ToggleIconGroup?: Override;
-    Content?: Override;
-    ContentAnimationContainer?: Override;
+export type PanelOverrides = {
+    PanelContainer?: Override<Record<string, any>>;
+    Header?: Override<Record<string, any>>;
+    ToggleIcon?: Override<Record<string, any>>;
+    ToggleIconGroup?: Override<Record<string, any>>;
+    Content?: Override<Record<string, any>>;
+    ContentAnimationContainer?: Override<Record<string, any>>;
 };
-export declare type OnChangeHandler = (a: {
+export type OnChangeHandler = (a: {
     expanded: boolean;
 }) => unknown;
-export declare type AccordionOnChangeHandler = (a: {
+export type AccordionOnChangeHandler = (a: {
     expanded: Array<React.Key>;
 }) => unknown;
-export declare type AccordionProps = {
+export type AccordionProps = {
     /** Determines how many panels may be expanded at a time. If set to
      * true it will collapse a current panel when a new panel is expanded.
      * If set to false more than one panel may be expanded at a time. */
@@ -56,11 +56,11 @@ export declare type AccordionProps = {
      */
     renderAll?: boolean;
 };
-export declare type StatelessAccordionOnChangeHandler = (a: {
+export type StatelessAccordionOnChangeHandler = (a: {
     expanded: Array<React.Key>;
     key: React.Key;
 }) => unknown;
-export declare type StatelessAccordionProps = {
+export type StatelessAccordionProps = {
     /** Determines how many panels may be expanded at a time. If set to
      * true it will collapse a current panel when a new panel is expanded.
      * If set to false more than one panel may be expanded at a time. */
@@ -85,7 +85,7 @@ export declare type StatelessAccordionProps = {
      */
     renderAll?: boolean;
 };
-declare type SharedPanelProps = {
+type SharedPanelProps = {
     /** The content visible when Panel is expanded. */
     children: React.ReactNode;
     /** Defaults to the disabled value provided by the parent Accordion component. */
@@ -117,11 +117,11 @@ declare type SharedPanelProps = {
      */
     renderAll?: boolean;
 };
-export declare type PanelProps = SharedPanelProps & {
+export type PanelProps = SharedPanelProps & {
     /** Defines if the panel is expanded. If set to true the panel is rendered expanded. */
     expanded?: boolean;
 };
-declare type SharedStatefulPanelContainerProps = {
+type SharedStatefulPanelContainerProps = {
     /** Initial state of a stateful panel component.
      * The expanded prop indicates if the panel is initially expanded.
      * If set to true the panel will be expanded initially */
@@ -129,11 +129,11 @@ declare type SharedStatefulPanelContainerProps = {
     onChange?: OnChangeHandler;
     stateReducer?: PanelStateReducer;
 };
-export declare type StatefulPanelContainerProps = SharedStatefulPanelContainerProps & {
+export type StatefulPanelContainerProps = SharedStatefulPanelContainerProps & {
     children: (props: Omit<PanelProps, 'children'>) => React.ReactNode;
 };
-export declare type StatefulPanelProps = SharedStatefulPanelContainerProps & SharedPanelProps;
-export declare type SharedStylePropsArg = {
+export type StatefulPanelProps = SharedStatefulPanelContainerProps & SharedPanelProps;
+export type SharedStylePropsArg = {
     $color?: string;
     $disabled: boolean | undefined | null;
     $expanded?: boolean | null;