@sprinklrjs/spaceweb 10.1.0 → 12.14.4

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 flex-shrink-0', 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/breadcrumb/breadcrumb-item.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { BreadcrumbItemProps } from './types';
+declare const BreadcrumbItem: {
+    ({ children, isLastChild, overrides, onClick, index, startEnhancer, endEnhancer, separator, gap, ...restProps }: BreadcrumbItemProps): JSX.Element;
+    displayName: string;
+};
+export default BreadcrumbItem;

package/esm/breadcrumb/breadcrumb-item.js

@@ -0,0 +1,39 @@
+import { __assign, __read, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import _noop from 'lodash/noop';
+import { Typography } from '../typography';
+import { Link } from '../link';
+import { StyledStartEnhancer, StyledEndEnhancer, StyledListItem, StyledSeparator, DEFAULT_SEPARATOR, } from './styled-components';
+import { useOverrides, mergeOverrides } from '../overrides';
+var breadcrumbItemOverrides = {
+    Link: {
+        style: [
+            'inline-flex text-16 leading-10',
+            function (_, _a) {
+                var $isLastChild = _a.$isLastChild;
+                return !$isLastChild ? { color: 'inherit', ':focus': { textDecoration: 'underline' } } : {};
+            },
+        ],
+    },
+};
+var BreadcrumbItem = function (_a) {
+    var children = _a.children, _b = _a.isLastChild, isLastChild = _b === void 0 ? false : _b, overrides = _a.overrides, _c = _a.onClick, onClick = _c === void 0 ? _noop : _c, _d = _a.index, index = _d === void 0 ? 0 : _d, startEnhancer = _a.startEnhancer, endEnhancer = _a.endEnhancer, _e = _a.separator, separator = _e === void 0 ? DEFAULT_SEPARATOR : _e, _f = _a.gap, gap = _f === void 0 ? 4 : _f, restProps = __rest(_a, ["children", "isLastChild", "overrides", "onClick", "index", "startEnhancer", "endEnhancer", "separator", "gap"]);
+    var sharedProps = {
+        $gap: gap,
+        $withStartEnhancer: !!startEnhancer,
+        $withEndEnhancer: !!endEnhancer,
+        $isLastChild: isLastChild,
+    };
+    var mergedOverrides = mergeOverrides(breadcrumbItemOverrides, overrides);
+    var _g = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.ListItem, StyledListItem), 2), ListItem = _g[0], listItemProps = _g[1];
+    var _h = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Link, !isLastChild ? Link : Typography), 2), LinkOverride = _h[0], linkOverrideProps = _h[1];
+    var _j = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.StartEnhancer, StyledStartEnhancer), 2), StartEnhancer = _j[0], startEnhancerProps = _j[1];
+    var _k = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.EndEnhancer, StyledEndEnhancer), 2), EndEnhancer = _k[0], endEnhancerProps = _k[1];
+    var _l = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Separator, StyledSeparator), 2), BreadcrumbSeparator = _l[0], separatorWrapperProps = _l[1];
+    var renderEnhancer = function (enhancer) {
+        return typeof enhancer === 'function' ? enhancer(sharedProps) : enhancer;
+    };
+    return (_jsxs(ListItem, __assign({ "data-testid": "breadcrumb-list-item-".concat(index) }, sharedProps, listItemProps, { children: [_jsxs(LinkOverride, __assign({ "data-testid": "breadcrumb-item-link-".concat(index), onClick: function (e) { return onClick(e, index); } }, sharedProps, restProps, linkOverrideProps, { children: [startEnhancer && (_jsx(StartEnhancer, __assign({ "data-testid": "breadcrumb-item-startenhancer-".concat(index) }, sharedProps, startEnhancerProps, { children: renderEnhancer(startEnhancer) }), void 0)), children, endEnhancer && (_jsx(EndEnhancer, __assign({ "data-testid": "breadcrumb-item-endenhancer-".concat(index) }, sharedProps, endEnhancerProps, { children: renderEnhancer(endEnhancer) }), void 0))] }), void 0), !isLastChild && (_jsx(BreadcrumbSeparator, __assign({ "data-testid": "breadcrumb-item-separator-".concat(index), "aria-hidden": true }, sharedProps, separatorWrapperProps, { children: separator }), void 0))] }), void 0));
+};
+BreadcrumbItem.displayName = 'BreadcrumbItem';
+export default BreadcrumbItem;

package/esm/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { BreadcrumbProps } from './types';
+declare const Breadcrumb: {
+    ({ children, separator, gap, overrides, }: BreadcrumbProps): JSX.Element;
+    displayName: string;
+};
+export default Breadcrumb;

package/esm/breadcrumb/breadcrumb.js

@@ -0,0 +1,27 @@
+import { __assign, __read } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import React from 'react';
+import BreadcrumbItem from './breadcrumb-item';
+import { useOverrides } from '../overrides';
+import { DEFAULT_SEPARATOR, StyledWrapper } from './styled-components';
+var Breadcrumb = function (_a) {
+    var children = _a.children, _b = _a.separator, separator = _b === void 0 ? DEFAULT_SEPARATOR : _b, _c = _a.gap, gap = _c === void 0 ? 4 : _c, _d = _a.overrides, overrides = _d === void 0 ? {} : _d;
+    var _e = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Root, StyledWrapper), 2), Root = _e[0], rootProps = _e[1];
+    var sharedProps = { $gap: gap };
+    var validChildren = React.Children.toArray(children).filter(React.isValidElement);
+    var breadcrumbItems = validChildren.map(function (child, index) {
+        var _a, _b, _c;
+        return child.type === BreadcrumbItem ? (React.cloneElement(child, {
+            key: (_a = child.key) !== null && _a !== void 0 ? _a : "breadcrumbItem-".concat(index),
+            separator: (_b = child.props.separator) !== null && _b !== void 0 ? _b : separator,
+            gap: (_c = child.props.gap) !== null && _c !== void 0 ? _c : gap,
+        })) : (_createElement(BreadcrumbItem, __assign({}, sharedProps, { key: "breadcrumbItem-".concat(index), separator: separator, gap: gap }), child));
+    });
+    return (_jsx("nav", { children: _jsx(Root, __assign({ "data-testid": "breadcrumb-root" }, sharedProps, rootProps, { children: React.Children.map(breadcrumbItems, function (breadcrumbItem, index) {
+                var isLastChild = index === breadcrumbItems.length - 1;
+                return React.cloneElement(breadcrumbItem, { isLastChild: isLastChild, index: index });
+            }) }), void 0) }, void 0));
+};
+Breadcrumb.displayName = 'Breadcrumb';
+export default Breadcrumb;

package/esm/breadcrumb/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Breadcrumb } from './breadcrumb';
+export { default as BreadcrumbItem } from './breadcrumb-item';
+export { StyledSeparator, StyledEndEnhancer, StyledListItem, StyledWrapper, StyledStartEnhancer, DEFAULT_SEPARATOR, } from './styled-components';
+export type { BreadcrumbItemProps, BreadcrumbProps, BreadcrumbSharedProps, BreadcrumbItemSharedProps } from './types';

package/esm/breadcrumb/index.js

@@ -0,0 +1,3 @@
+export { default as Breadcrumb } from './breadcrumb';
+export { default as BreadcrumbItem } from './breadcrumb-item';
+export { StyledSeparator, StyledEndEnhancer, StyledListItem, StyledWrapper, StyledStartEnhancer, DEFAULT_SEPARATOR, } from './styled-components';

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const StyledStartEnhancer: import("../style/styled").StyledComponent;
+export declare const StyledEndEnhancer: import("../style/styled").StyledComponent;
+export declare const StyledWrapper: import("../style/styled").StyledComponent;
+export declare const StyledSeparator: import("../style/styled").StyledComponent;
+export declare const StyledListItem: import("../style/styled").StyledComponent;
+export declare const DEFAULT_SEPARATOR: JSX.Element;

package/esm/breadcrumb/styled-components.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { styled } from '../style';
+import ChevronRightIcon from '../icon/components/chevron-right';
+export var StyledStartEnhancer = styled('div', 'inline-flex items-center mr-1');
+export var StyledEndEnhancer = styled('div', 'inline-flex items-center ml-1');
+export var StyledWrapper = styled('ul', 'm-0 p-0 inline-flex items-center flex-wrap');
+export var StyledSeparator = styled('span', 'inline-flex items-center', function (_, _a) {
+    var $gap = _a.$gap;
+    return {
+        marginLeft: "".concat($gap * 4, "px"),
+        marginRight: "".concat($gap * 4, "px"),
+    };
+});
+export var StyledListItem = styled('li', 'm-0 inline-flex items-center');
+export var DEFAULT_SEPARATOR = _jsx(ChevronRightIcon, { size: 10 }, void 0);

package/esm/breadcrumb/types.d.ts

@@ -0,0 +1,38 @@
+import React, { ReactNode } from 'react';
+import { Override } from '../overrides';
+import { LinkProps } from '../link';
+export declare type Enhancer<SharedProps> = ReactNode | ((props: SharedProps) => ReactNode);
+export declare type BreadcrumbItemSharedProps = {
+    $isLastChild?: boolean;
+    $withStartEnhancer: boolean;
+    $withEndEnhancer: boolean;
+    $gap: number;
+};
+export declare type BreadcrumbSharedProps = {
+    $gap: number;
+};
+export declare type BreadcrumbProps = {
+    separator?: ReactNode;
+    gap?: number;
+    overrides?: {
+        Root?: Override<Record<string, any>>;
+    };
+    children: ReactNode;
+};
+export declare type BreadcrumbItemProps = Omit<LinkProps, 'onClick'> & {
+    isLastChild?: boolean;
+    gap?: number;
+    onClick?: (event: React.MouseEvent<HTMLElement>, index: number) => void;
+    index?: number;
+    separator?: ReactNode;
+    startEnhancer?: Enhancer<BreadcrumbItemSharedProps>;
+    endEnhancer?: Enhancer<BreadcrumbItemSharedProps>;
+    overrides?: {
+        Link?: Override<Record<string, any>>;
+        StartEnhancer?: Override<Record<string, any>>;
+        EndEnhancer?: Override<Record<string, any>>;
+        ListItem?: Override<Record<string, any>>;
+        Separator?: Override<Record<string, any>>;
+    };
+    children: ReactNode;
+};

package/esm/breadcrumb/types.js

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

package/esm/button/Button.d.ts

@@ -12,6 +12,7 @@ declare const Button: React.ForwardRefExoticComponent<Omit<{
     disabled?: boolean | undefined;
     fullWidth?: boolean | undefined;
     autoFocus?: boolean | undefined;
+    role?: React.AriaRole | undefined;
     href?: string | undefined;
     target?: string | undefined;
     rel?: string | undefined;
@@ -21,9 +22,8 @@ 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;
+    tabIndex?: number | undefined;
 }, "style" | "className"> & {
     $as?: React.ElementType<any> | undefined;
     className?: import("..").Styles;

package/esm/button/Button.js

@@ -12,10 +12,14 @@ import { add$props } from '../helpers';
 import { StyledBaseButton as BaseButton } from '../base-button';
 import { StatefulTooltip as DefaultStatefulTooltip, DisabledTooltipContainer } from '../tooltip';
 import { useContextualFormProps } from '../form-control/context';
+import useStyle from '../style/useStyle';
+import { getDefaultSize } from '../helpers/themeHelpers';
 BaseUIButton.displayName = 'BaseUIButton';
 var Button = React.forwardRef(function (props, ref) {
     var buttonRef = ref;
-    var _a = useContextualFormProps(props), _b = _a.variant, variant = _b === void 0 ? 'primary' : _b, _c = _a.intent, intent = _c === void 0 ? 'default' : _c, _d = _a.size, size = _d === void 0 ? 'lg' : _d, fullWidth = _a.fullWidth, className = _a.className, style = _a.style, overrides = _a.overrides, tooltipContent = _a.tooltipContent, restProps = __rest(_a, ["variant", "intent", "size", "fullWidth", "className", "style", "overrides", "tooltipContent"]);
+    var _a = useContextualFormProps(props), _b = _a.variant, variant = _b === void 0 ? 'primary' : _b, _c = _a.intent, intent = _c === void 0 ? 'default' : _c, _size = _a.size, fullWidth = _a.fullWidth, className = _a.className, style = _a.style, overrides = _a.overrides, tooltipContent = _a.tooltipContent, restProps = __rest(_a, ["variant", "intent", "size", "fullWidth", "className", "style", "overrides", "tooltipContent"]);
+    var _d = useStyle(), getStyle = _d.getStyle, isRTL = _d.isRTL, theme = _d.theme;
+    var size = _size !== null && _size !== void 0 ? _size : getDefaultSize(theme);
     var buttonOverrides = React.useMemo(function () { return _omit(overrides, 'StatefulTooltip'); }, [overrides]);
     var adaptedProps = adaptBaseButtonProps(__assign(__assign({}, restProps), { variant: variant, overrides: buttonOverrides }));
     var convertedOverrides = useConvertOverrides(adaptedProps.overrides || {});
@@ -36,9 +40,17 @@ var Button = React.forwardRef(function (props, ref) {
                 width: '100%',
             },
         },
+        StartEnhancer: {
+            // This check should not be required. Overrides should first be merged and then converted for baseui.
+            // In Button we are converting overrides(that's when rtlCssJs gets applied) and then merging, which is wrong.
+            style: getStyle(isRTL ? 'ml-1' : 'mr-1'),
+        },
+        EndEnhancer: {
+            style: getStyle(isRTL ? 'mr-1' : 'ml-1'),
+        },
     }, _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/IconButton/IconButton.d.ts

@@ -1,6 +1,4 @@
 /// <reference types="react" />
-declare const IconButton: import("react").ForwardRefExoticComponent<Omit<import("..").ButtonProps, "size"> & {
-    size?: import("..").Size | undefined;
-    bordered?: boolean | undefined;
-} & import("react").RefAttributes<HTMLButtonElement>>;
+import { IconButtonProps } from './types';
+declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export default IconButton;

package/esm/button/IconButton/IconButton.js

@@ -5,16 +5,19 @@ import { mergeOverrides } from '../../overrides';
 import { useStyle } from '../../style';
 import Button from '../Button';
 import { iconButtonStyles, renderIconButtonChild } from './styled-components';
+import { getDefaultSize } from '../../helpers/themeHelpers';
 var IconButton = forwardRef(function (props, ref) {
     var theme = useStyle().theme;
-    var bordered = props.bordered, _a = props.size, size = _a === void 0 ? 'md' : _a, className = props.className, style = props.style, _b = props.variant, variant = _b === void 0 ? 'minimal' : _b, _c = props.shape, shape = _c === void 0 ? 'round' : _c, buttonProps = __rest(props, ["bordered", "size", "className", "style", "variant", "shape"]);
+    var bordered = props.bordered, _size = props.size, className = props.className, style = props.style, _a = props.variant, variant = _a === void 0 ? 'minimal' : _a, _b = props.shape, shape = _b === void 0 ? 'round' : _b, buttonProps = __rest(props, ["bordered", "size", "className", "style", "variant", "shape"]);
+    var size = _size !== null && _size !== void 0 ? _size : getDefaultSize(theme);
     var overrides = mergeOverrides({
         BaseButton: {
             style: [iconButtonStyles, className, style],
             props: { $bordered: bordered, $size: size, $isIconButton: true },
         },
     }, buttonProps.overrides);
-    return (_jsx(Button, __assign({ variant: variant, shape: shape }, buttonProps, { overrides: overrides, ref: ref }, { children: Children.map(props.children, renderIconButtonChild.bind(null, theme, size)) }), void 0));
+    var ariaLabel = typeof buttonProps.tooltipContent === 'string' && !buttonProps.isLoading ? buttonProps.tooltipContent : undefined;
+    return (_jsx(Button, __assign({ variant: variant, shape: shape }, (ariaLabel ? { 'aria-label': ariaLabel } : {}), buttonProps, { overrides: overrides, ref: ref }, { children: Children.map(props.children, renderIconButtonChild.bind(null, theme, size)) }), void 0));
 });
 IconButton.displayName = 'IconButton';
 export default IconButton;

package/esm/button/IconButton/types.d.ts

@@ -1,10 +1,19 @@
 import { ButtonProps, ButtonSharedProps } from '../types';
 import { Size } from '../../types';
-export declare type IconButtonProps = Omit<ButtonProps, 'size'> & {
+import { StatefulTooltipProps } from '../../tooltip';
+declare type BaseIconButtonProps = Omit<ButtonProps, 'size'> & {
     size?: Size;
     bordered?: boolean;
 };
+declare type IconButtonPropsWithAriaLabel = BaseIconButtonProps & {
+    'aria-label': string;
+};
+declare type IconButtonPropsWithTooltip = BaseIconButtonProps & {
+    tooltipContent: StatefulTooltipProps['content'];
+};
+export declare type IconButtonProps = IconButtonPropsWithAriaLabel | IconButtonPropsWithTooltip;
 export declare type SharedProps = Omit<ButtonSharedProps, '$size'> & {
     $size?: Size;
     $bordered?: boolean;
 };
+export {};

package/esm/button/basewebAdapter.d.ts

@@ -1,29 +1,32 @@
 /// <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;
     shape?: import("./types").Shape | undefined;
     target?: string | undefined;
     type?: "button" | "reset" | "submit" | undefined;
+    tabIndex?: number | undefined;
+    role?: import("react").AriaRole | undefined;
     onClick?: ((event: import("react").MouseEvent<HTMLElement, MouseEvent>) => any) | undefined;
     $as?: import("react").ElementType<any> | undefined;
     startEnhancer?: import("react").ReactNode;
     endEnhancer?: import("react").ReactNode;
+    tooltipContent?: import("react").ReactNode | import("baseui/popover").StatefulContentRenderProp;
     intent?: import("..").Intent | undefined;
     isLoading?: boolean | undefined;
     isSelected?: boolean | undefined;
     fullWidth?: boolean | undefined;
-    tooltipContent?: import("react").ReactNode | ((args: {
-        close: () => void;
-    }) => import("react").ReactNode);
 };
 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/styled-components.js

@@ -60,8 +60,9 @@ var getPrimaryHoverColor = function (_a) {
     });
 };
 var getBorderRadiiStyles = function (_a, _b) {
+    var _c;
     var px2rem = _a.px2rem, theme = _a.theme;
-    var $shape = _b.$shape;
+    var $shape = _b.$shape, $size = _b.$size;
     switch ($shape) {
         case 'round':
             return borderRadius(theme.borderRadius.full);
@@ -71,7 +72,7 @@ var getBorderRadiiStyles = function (_a, _b) {
             return borderRadius(px2rem(theme.borderRadius['16']));
         default:
     }
-    return borderRadius(theme.button.borderRadius);
+    return borderRadius(((_c = getButtonSizeTheme(theme, $size)) === null || _c === void 0 ? void 0 : _c.borderRadius) || theme.button.borderRadius);
 };
 var getDimension = function (_a, _b) {
     var theme = _a.theme, px2rem = _a.px2rem;
@@ -124,13 +125,13 @@ export var createButtonStyles = function (_a, _b) {
         : {})), { ':active': activeStyles });
 };
 var getVariantStyles = function (utils, props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6;
     var theme = utils.theme;
     var $variant = props.$variant, $isFocusVisible = props.$isFocusVisible, $intent = props.$intent, $isSelected = props.$isSelected;
     switch ($variant) {
         case 'primary':
         default: {
-            var _4 = getPrimaryHighlightColor(utils, props), activeBackgroundColor = _4.backgroundColor, activeBorderColor = _4.borderColor, _5 = getPrimaryHoverColor(utils), hoverBackgroundColor = _5.backgroundColor, hoverBorderColor = _5.borderColor;
+            var _7 = getPrimaryHighlightColor(utils, props), activeBackgroundColor = _7.backgroundColor, activeBorderColor = _7.borderColor, _8 = getPrimaryHoverColor(utils), hoverBackgroundColor = _8.backgroundColor, hoverBorderColor = _8.borderColor;
             var backgroundColor = getIntentColor(utils, props), color = theme.spr.text05, borderColor = getIntentColor(utils, props);
             var primaryButtonTheme = ((_a = theme.button) === null || _a === void 0 ? void 0 : _a.primary) || {};
             var defaultIntentStyles = createButtonStyles({
@@ -154,36 +155,39 @@ var getVariantStyles = function (utils, props) {
                 : __assign(__assign(__assign({}, intentStyles), { ':hover': { opacity: '0.8' }, ':active': { opacity: '0.8' } }), ($isFocusVisible && { ':focus': { opacity: '0.8' } }));
         }
         case 'secondary': {
-            var _6 = theme.button.variantSecondary, color = _6.color, hoverBackgroundColor = _6.hoverBackgroundColor, activeBackgroundColor = _6.activeBackgroundColor;
+            var _9 = theme.button.variantSecondary, color = _9.color, hoverBackgroundColor = _9.hoverBackgroundColor, activeBackgroundColor = _9.activeBackgroundColor;
             var secondaryButtonTheme = ((_j = theme.button) === null || _j === void 0 ? void 0 : _j.secondary) || {};
             return createButtonStyles({
                 color: (_k = secondaryButtonTheme.color) !== null && _k !== void 0 ? _k : color,
-                backgroundColor: (_l = secondaryButtonTheme.backgroundColor) !== null && _l !== void 0 ? _l : theme.spr.ui01,
-                hoverBackgroundColor: (_m = secondaryButtonTheme.hoverBackgroundColor) !== null && _m !== void 0 ? _m : hoverBackgroundColor,
-                activeBackgroundColor: (_o = secondaryButtonTheme.activeBackgroundColor) !== null && _o !== void 0 ? _o : activeBackgroundColor,
-                borderColor: (_p = secondaryButtonTheme.borderColor) !== null && _p !== void 0 ? _p : theme.spr.interactive02,
-                hoverBorderColor: (_q = secondaryButtonTheme.hoverBorderColor) !== null && _q !== void 0 ? _q : theme.spr.border06,
-                activeBorderColor: (_r = secondaryButtonTheme.activeBorderColor) !== null && _r !== void 0 ? _r : theme.spr.interactive01,
+                disabledColor: (_l = secondaryButtonTheme.disabledColor) !== null && _l !== void 0 ? _l : theme.spr.text03,
+                backgroundColor: (_m = secondaryButtonTheme.backgroundColor) !== null && _m !== void 0 ? _m : theme.spr.ui01,
+                hoverBackgroundColor: (_o = secondaryButtonTheme.hoverBackgroundColor) !== null && _o !== void 0 ? _o : hoverBackgroundColor,
+                activeBackgroundColor: (_p = secondaryButtonTheme.activeBackgroundColor) !== null && _p !== void 0 ? _p : activeBackgroundColor,
+                disabledBackgroundColor: (_q = secondaryButtonTheme.disabledBackgroundColor) !== null && _q !== void 0 ? _q : theme.spr.ui05,
+                borderColor: (_r = secondaryButtonTheme.borderColor) !== null && _r !== void 0 ? _r : theme.spr.interactive02,
+                hoverBorderColor: (_s = secondaryButtonTheme.hoverBorderColor) !== null && _s !== void 0 ? _s : theme.spr.border06,
+                activeBorderColor: (_t = secondaryButtonTheme.activeBorderColor) !== null && _t !== void 0 ? _t : theme.spr.interactive01,
+                disabledBorderColor: (_u = secondaryButtonTheme.disabledBorderColor) !== null && _u !== void 0 ? _u : theme.spr.border02,
             }, props);
         }
         case 'tertiary': {
-            var tertiaryButtonTheme = ((_s = theme.button) === null || _s === void 0 ? void 0 : _s.tertiary) || {};
+            var tertiaryButtonTheme = ((_v = theme.button) === null || _v === void 0 ? void 0 : _v.tertiary) || {};
             return createButtonStyles({
-                color: (_t = tertiaryButtonTheme.color) !== null && _t !== void 0 ? _t : getIntentTextColor(utils, props),
-                backgroundColor: (_u = tertiaryButtonTheme.backgroundColor) !== null && _u !== void 0 ? _u : theme.spr.ui01,
-                hoverBackgroundColor: (_v = tertiaryButtonTheme.hoverBackgroundColor) !== null && _v !== void 0 ? _v : theme.spr.uiHover,
-                activeBackgroundColor: (_w = tertiaryButtonTheme.activeBackgroundColor) !== null && _w !== void 0 ? _w : theme.spr.uiFocus,
-                borderColor: (_x = tertiaryButtonTheme.borderColor) !== null && _x !== void 0 ? _x : getIntentColor(utils, props),
+                color: (_w = tertiaryButtonTheme.color) !== null && _w !== void 0 ? _w : getIntentTextColor(utils, props),
+                backgroundColor: (_x = tertiaryButtonTheme.backgroundColor) !== null && _x !== void 0 ? _x : theme.spr.ui01,
+                hoverBackgroundColor: (_y = tertiaryButtonTheme.hoverBackgroundColor) !== null && _y !== void 0 ? _y : theme.spr.uiHover,
+                activeBackgroundColor: (_z = tertiaryButtonTheme.activeBackgroundColor) !== null && _z !== void 0 ? _z : theme.spr.uiFocus,
+                borderColor: (_0 = tertiaryButtonTheme.borderColor) !== null && _0 !== void 0 ? _0 : getIntentColor(utils, props),
             }, props);
         }
         case 'minimal': {
-            var minimalButtonTheme = ((_y = theme.button) === null || _y === void 0 ? void 0 : _y.minimal) || {};
+            var minimalButtonTheme = ((_1 = theme.button) === null || _1 === void 0 ? void 0 : _1.minimal) || {};
             var styles = createButtonStyles({
-                color: (_z = minimalButtonTheme.color) !== null && _z !== void 0 ? _z : getIntentTextColor(utils, props),
-                backgroundColor: (_0 = minimalButtonTheme.backgroundColor) !== null && _0 !== void 0 ? _0 : 'transparent',
-                hoverBackgroundColor: (_1 = minimalButtonTheme.hoverBackgroundColor) !== null && _1 !== void 0 ? _1 : theme.spr.uiHover,
-                activeBackgroundColor: (_2 = minimalButtonTheme.activeBackgroundColor) !== null && _2 !== void 0 ? _2 : theme.spr.uiFocus,
-                borderColor: (_3 = minimalButtonTheme.borderColor) !== null && _3 !== void 0 ? _3 : 'transparent',
+                color: (_2 = minimalButtonTheme.color) !== null && _2 !== void 0 ? _2 : getIntentTextColor(utils, props),
+                backgroundColor: (_3 = minimalButtonTheme.backgroundColor) !== null && _3 !== void 0 ? _3 : 'transparent',
+                hoverBackgroundColor: (_4 = minimalButtonTheme.hoverBackgroundColor) !== null && _4 !== void 0 ? _4 : theme.spr.uiHover,
+                activeBackgroundColor: (_5 = minimalButtonTheme.activeBackgroundColor) !== null && _5 !== void 0 ? _5 : theme.spr.uiFocus,
+                borderColor: (_6 = minimalButtonTheme.borderColor) !== null && _6 !== void 0 ? _6 : 'transparent',
             }, props);
             styles.fontWeight = theme.fontWeight.normal;
             return styles;
@@ -197,11 +201,12 @@ var getBaseStyles = function (_a, _b) {
 };
 export var getButtonStyles = [
     function (utils, props) {
-        var $disabled = props.$disabled;
+        var $disabled = props.$disabled, $variant = props.$variant;
         var theme = utils.theme;
         return {
             cursor: $disabled ? 'not-allowed' : 'pointer',
-            opacity: $disabled ? '0.6' : '1',
+            // for secondary variant disabled state, we are using correct tokens instead of relying on opacity
+            opacity: $disabled && $variant !== 'secondary' ? '0.6' : '1',
             boxSizing: 'border-box',
             outlineWidth: theme.borderWidth['0'],
         };