@sprinklrjs/spaceweb 11.0.0 → 12.14.4

package/breadcrumb/breadcrumb.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_2 = (0, tslib_1.__importDefault)(require("react"));
+var breadcrumb_item_1 = (0, tslib_1.__importDefault)(require("./breadcrumb-item"));
+var overrides_1 = require("../overrides");
+var styled_components_1 = require("./styled-components");
+var Breadcrumb = function (_a) {
+    var children = _a.children, _b = _a.separator, separator = _b === void 0 ? styled_components_1.DEFAULT_SEPARATOR : _b, _c = _a.gap, gap = _c === void 0 ? 4 : _c, _d = _a.overrides, overrides = _d === void 0 ? {} : _d;
+    var _e = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Root, styled_components_1.StyledWrapper), 2), Root = _e[0], rootProps = _e[1];
+    var sharedProps = { $gap: gap };
+    var validChildren = react_2.default.Children.toArray(children).filter(react_2.default.isValidElement);
+    var breadcrumbItems = validChildren.map(function (child, index) {
+        var _a, _b, _c;
+        return child.type === breadcrumb_item_1.default ? (react_2.default.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,
+        })) : ((0, react_1.createElement)(breadcrumb_item_1.default, (0, tslib_1.__assign)({}, sharedProps, { key: "breadcrumbItem-".concat(index), separator: separator, gap: gap }), child));
+    });
+    return ((0, jsx_runtime_1.jsx)("nav", { children: (0, jsx_runtime_1.jsx)(Root, (0, tslib_1.__assign)({ "data-testid": "breadcrumb-root" }, sharedProps, rootProps, { children: react_2.default.Children.map(breadcrumbItems, function (breadcrumbItem, index) {
+                var isLastChild = index === breadcrumbItems.length - 1;
+                return react_2.default.cloneElement(breadcrumbItem, { isLastChild: isLastChild, index: index });
+            }) }), void 0) }, void 0));
+};
+Breadcrumb.displayName = 'Breadcrumb';
+exports.default = Breadcrumb;

package/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/breadcrumb/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_SEPARATOR = exports.StyledStartEnhancer = exports.StyledWrapper = exports.StyledListItem = exports.StyledEndEnhancer = exports.StyledSeparator = exports.BreadcrumbItem = exports.Breadcrumb = void 0;
+var breadcrumb_1 = require("./breadcrumb");
+Object.defineProperty(exports, "Breadcrumb", { enumerable: true, get: function () { return __importDefault(breadcrumb_1).default; } });
+var breadcrumb_item_1 = require("./breadcrumb-item");
+Object.defineProperty(exports, "BreadcrumbItem", { enumerable: true, get: function () { return __importDefault(breadcrumb_item_1).default; } });
+var styled_components_1 = require("./styled-components");
+Object.defineProperty(exports, "StyledSeparator", { enumerable: true, get: function () { return styled_components_1.StyledSeparator; } });
+Object.defineProperty(exports, "StyledEndEnhancer", { enumerable: true, get: function () { return styled_components_1.StyledEndEnhancer; } });
+Object.defineProperty(exports, "StyledListItem", { enumerable: true, get: function () { return styled_components_1.StyledListItem; } });
+Object.defineProperty(exports, "StyledWrapper", { enumerable: true, get: function () { return styled_components_1.StyledWrapper; } });
+Object.defineProperty(exports, "StyledStartEnhancer", { enumerable: true, get: function () { return styled_components_1.StyledStartEnhancer; } });
+Object.defineProperty(exports, "DEFAULT_SEPARATOR", { enumerable: true, get: function () { return styled_components_1.DEFAULT_SEPARATOR; } });

package/breadcrumb/package.json

@@ -0,0 +1,4 @@
+{
+  "sideEffects": false,
+  "module": "../esm/breadcrumb/index.js"
+}

package/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/breadcrumb/styled-components.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_SEPARATOR = exports.StyledListItem = exports.StyledSeparator = exports.StyledWrapper = exports.StyledEndEnhancer = exports.StyledStartEnhancer = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var style_1 = require("../style");
+var chevron_right_1 = (0, tslib_1.__importDefault)(require("../icon/components/chevron-right"));
+exports.StyledStartEnhancer = (0, style_1.styled)('div', 'inline-flex items-center mr-1');
+exports.StyledEndEnhancer = (0, style_1.styled)('div', 'inline-flex items-center ml-1');
+exports.StyledWrapper = (0, style_1.styled)('ul', 'm-0 p-0 inline-flex items-center flex-wrap');
+exports.StyledSeparator = (0, style_1.styled)('span', 'inline-flex items-center', function (_, _a) {
+    var $gap = _a.$gap;
+    return {
+        marginLeft: "".concat($gap * 4, "px"),
+        marginRight: "".concat($gap * 4, "px"),
+    };
+});
+exports.StyledListItem = (0, style_1.styled)('li', 'm-0 inline-flex items-center');
+exports.DEFAULT_SEPARATOR = (0, jsx_runtime_1.jsx)(chevron_right_1.default, { size: 10 }, void 0);

package/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/breadcrumb/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/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;
@@ -22,6 +23,7 @@ declare const Button: React.ForwardRefExoticComponent<Omit<{
     startEnhancer?: React.ReactNode;
     type?: "button" | "reset" | "submit" | undefined;
     tooltipContent?: React.ReactNode | import("baseui/popover").StatefulContentRenderProp;
+    tabIndex?: number | undefined;
 }, "style" | "className"> & {
     $as?: React.ElementType<any> | undefined;
     className?: import("..").Styles;

package/button/Button.js

@@ -14,10 +14,14 @@ var helpers_1 = require("../helpers");
 var base_button_1 = require("../base-button");
 var tooltip_1 = require("../tooltip");
 var context_1 = require("../form-control/context");
+var useStyle_1 = (0, tslib_1.__importDefault)(require("../style/useStyle"));
+var themeHelpers_1 = require("../helpers/themeHelpers");
 button_1.Button.displayName = 'BaseUIButton';
 var Button = React.forwardRef(function (props, ref) {
     var buttonRef = ref;
-    var _a = (0, context_1.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 = (0, tslib_1.__rest)(_a, ["variant", "intent", "size", "fullWidth", "className", "style", "overrides", "tooltipContent"]);
+    var _a = (0, context_1.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 = (0, tslib_1.__rest)(_a, ["variant", "intent", "size", "fullWidth", "className", "style", "overrides", "tooltipContent"]);
+    var _d = (0, useStyle_1.default)(), getStyle = _d.getStyle, isRTL = _d.isRTL, theme = _d.theme;
+    var size = _size !== null && _size !== void 0 ? _size : (0, themeHelpers_1.getDefaultSize)(theme);
     var buttonOverrides = React.useMemo(function () { return (0, omit_1.default)(overrides, 'StatefulTooltip'); }, [overrides]);
     var adaptedProps = (0, basewebAdapter_1.default)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, restProps), { variant: variant, overrides: buttonOverrides }));
     var convertedOverrides = (0, useConvertOverrides_1.useConvertOverrides)(adaptedProps.overrides || {});
@@ -38,6 +42,14 @@ 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'),
+        },
     }, (0, pick_1.default)(adaptedProps.overrides, 'BaseButton'));
     var _e = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.StatefulTooltip, tooltip_1.StatefulTooltip), 2), StatefulTooltip = _e[0], statefulTooltipProps = _e[1];
     var buttonEl = ((0, jsx_runtime_1.jsx)(button_1.Button, (0, tslib_1.__assign)({ "data-spaceweb": "button", "data-testid": "button" }, adaptedProps, { onClick: adaptedProps.onClick, overrides: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, convertedOverrides), mergedOverrides), ref: buttonRef }), void 0));

package/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/button/IconButton/IconButton.js

@@ -7,16 +7,19 @@ var overrides_1 = require("../../overrides");
 var style_1 = require("../../style");
 var Button_1 = (0, tslib_1.__importDefault)(require("../Button"));
 var styled_components_1 = require("./styled-components");
+var themeHelpers_1 = require("../../helpers/themeHelpers");
 var IconButton = (0, react_1.forwardRef)(function (props, ref) {
     var theme = (0, style_1.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 = (0, tslib_1.__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 = (0, tslib_1.__rest)(props, ["bordered", "size", "className", "style", "variant", "shape"]);
+    var size = _size !== null && _size !== void 0 ? _size : (0, themeHelpers_1.getDefaultSize)(theme);
     var overrides = (0, overrides_1.mergeOverrides)({
         BaseButton: {
             style: [styled_components_1.iconButtonStyles, className, style],
             props: { $bordered: bordered, $size: size, $isIconButton: true },
         },
     }, buttonProps.overrides);
-    return ((0, jsx_runtime_1.jsx)(Button_1.default, (0, tslib_1.__assign)({ variant: variant, shape: shape }, buttonProps, { overrides: overrides, ref: ref }, { children: react_1.Children.map(props.children, styled_components_1.renderIconButtonChild.bind(null, theme, size)) }), void 0));
+    var ariaLabel = typeof buttonProps.tooltipContent === 'string' && !buttonProps.isLoading ? buttonProps.tooltipContent : undefined;
+    return ((0, jsx_runtime_1.jsx)(Button_1.default, (0, tslib_1.__assign)({ variant: variant, shape: shape }, (ariaLabel ? { 'aria-label': ariaLabel } : {}), buttonProps, { overrides: overrides, ref: ref }, { children: react_1.Children.map(props.children, styled_components_1.renderIconButtonChild.bind(null, theme, size)) }), void 0));
 });
 IconButton.displayName = 'IconButton';
 exports.default = IconButton;

package/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/button/basewebAdapter.d.ts

@@ -17,14 +17,16 @@ declare const _default: (props: Omit<ButtonProps, 'size'>) => {
     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 | import("baseui/popover").StatefulContentRenderProp;
 };
 export default _default;

package/button/styled-components.js

@@ -63,8 +63,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 (0, longHandHelpers_1.borderRadius)(theme.borderRadius.full);
@@ -74,7 +75,7 @@ var getBorderRadiiStyles = function (_a, _b) {
             return (0, longHandHelpers_1.borderRadius)(px2rem(theme.borderRadius['16']));
         default:
     }
-    return (0, longHandHelpers_1.borderRadius)(theme.button.borderRadius);
+    return (0, longHandHelpers_1.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;
@@ -128,13 +129,13 @@ var createButtonStyles = function (_a, _b) {
 };
 exports.createButtonStyles = createButtonStyles;
 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 = (0, exports.createButtonStyles)({
@@ -158,36 +159,39 @@ var getVariantStyles = function (utils, props) {
                 : (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__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 (0, exports.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 (0, exports.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 = (0, exports.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;
@@ -201,11 +205,12 @@ var getBaseStyles = function (_a, _b) {
 };
 exports.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'],
         };

package/button/types.d.ts

@@ -4,6 +4,7 @@ import { Override, StyleOverride } from '../overrides';
 import { StatefulTooltipProps } from '../tooltip';
 import { ClassName, Intent, Variant, SpacewebComponentProps, Size } from '../types';
 import { ValueOf } from '../utility-types';
+import { AriaRole } from 'react';
 export declare type Shape = 'default' | 'round' | 'square' | 'pill';
 export type { Size };
 export declare type ButtonOverrides = {
@@ -35,6 +36,7 @@ export declare type ButtonProps = SpacewebComponentProps<{
     disabled?: boolean;
     fullWidth?: boolean;
     autoFocus?: boolean;
+    role?: AriaRole | undefined;
     href?: string;
     target?: string;
     rel?: string;
@@ -45,5 +47,6 @@ export declare type ButtonProps = SpacewebComponentProps<{
     startEnhancer?: React.ReactNode;
     type?: 'submit' | 'reset' | 'button';
     tooltipContent?: StatefulTooltipProps['content'];
+    tabIndex?: number | undefined;
 }>;
 export declare type VariantAdapterProps = Record<Variant, ValueOf<typeof KIND>>;

package/button-group/ButtonGroup.d.ts

@@ -14,6 +14,7 @@ declare const ButtonGroup: import("react").ForwardRefExoticComponent<Omit<{
     intent?: import("..").Intent | undefined;
     variant?: import("..").Variant | import("../button/IconTextButton").Variant | undefined;
     activateOnFocus?: boolean | undefined;
+    role?: import("react").AriaRole | undefined;
 }, "style" | "className"> & {
     $as?: import("react").ElementType<any> | undefined;
     className?: import("..").Styles;

package/button-group/ButtonGroup.js

@@ -9,14 +9,18 @@ var overrides_1 = require("../overrides");
 var styled_components_1 = require("./styled-components");
 var useCombinedRef_1 = (0, tslib_1.__importDefault)(require("../hooks/useCombinedRef"));
 var useTabsKeyboardNavigation_1 = require("../hooks/useTabsKeyboardNavigation");
+var style_1 = require("../style");
+var themeHelpers_1 = require("../helpers/themeHelpers");
 var ButtonGroup = (0, react_1.forwardRef)(function (_a, ref) {
-    var className = _a.className, style = _a.style, activateOnFocus = _a.activateOnFocus, _b = _a.overrides, overrides = _b === void 0 ? {} : _b, props = (0, tslib_1.__rest)(_a, ["className", "style", "activateOnFocus", "overrides"]);
-    var _c = (0, useTabsKeyboardNavigation_1.useTabsKeyboardNavigation)({ activateOnFocus: activateOnFocus }), parentElementRef = _c.parentElementRef, onKeyDown = _c.onKeyDown;
+    var _b;
+    var className = _a.className, style = _a.style, activateOnFocus = _a.activateOnFocus, _c = _a.overrides, overrides = _c === void 0 ? {} : _c, role = _a.role, props = (0, tslib_1.__rest)(_a, ["className", "style", "activateOnFocus", "overrides", "role"]);
+    var _d = (0, useTabsKeyboardNavigation_1.useTabsKeyboardNavigation)({ activateOnFocus: activateOnFocus }), parentElementRef = _d.parentElementRef, onKeyDown = _d.onKeyDown;
     var combinedRef = (0, useCombinedRef_1.default)(ref, parentElementRef);
-    var _d = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.Root, styled_components_1.StyledRoot), 2), Root = _d[0], rootProps = _d[1];
+    var theme = (0, style_1.useStyle)().theme;
+    var _e = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.Root, styled_components_1.StyledRoot), 2), Root = _e[0], rootProps = _e[1];
     var renderChild = (0, react_1.useMemo)(function () { return styled_components_1.renderButtonGroupChild.bind(null, (0, tslib_1.__assign)((0, tslib_1.__assign)({}, props), { onKeyDown: onKeyDown })); }, [props, onKeyDown]);
-    var sharedProps = (0, helpers_1.add$props)((0, pick_1.default)(props, ['intent', 'size', 'variant', 'shape', 'mode']));
-    return ((0, jsx_runtime_1.jsx)(Root, (0, tslib_1.__assign)({ "data-spaceweb": "button-group", "aria-multiselectable": props.mode === 'checkbox', className: className, style: style, ref: combinedRef }, sharedProps, rootProps, { children: react_1.Children.map(props.children, renderChild) }), void 0));
+    var sharedProps = (0, helpers_1.add$props)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, pick_1.default)(props, ['intent', 'variant', 'shape', 'mode'])), { size: (_b = props.size) !== null && _b !== void 0 ? _b : (0, themeHelpers_1.getDefaultSize)(theme) }));
+    return ((0, jsx_runtime_1.jsx)(Root, (0, tslib_1.__assign)({ "data-spaceweb": "button-group", "aria-multiselectable": props.mode === 'checkbox', className: className, style: style, ref: combinedRef, role: role }, sharedProps, rootProps, { children: react_1.Children.map(props.children, renderChild) }), void 0));
 });
 ButtonGroup.defaultProps = {
     mode: 'radio',

package/button-group/StatefulButtonGroup.d.ts

@@ -14,6 +14,7 @@ declare const StatefulButtonGroup: import("react").ForwardRefExoticComponent<Omi
     intent?: import("..").Intent | undefined;
     variant?: import("..").Variant | import("../button/IconTextButton").Variant | undefined;
     activateOnFocus?: boolean | undefined;
+    role?: import("react").AriaRole | undefined;
 }, "style" | "className"> & {
     $as?: import("react").ElementType<any> | undefined;
     className?: import("..").Styles;

package/button-group/styled-components.d.ts

@@ -1,6 +1,39 @@
 import * as React from 'react';
 import { StyleObject, StyleUtils } from '../types';
 import { ButtonGroupChildProps, ButtonGroupProps } from './types';
+export declare const buttonGroupButtonSizeMap: {
+    xxxs: {
+        height: string;
+        marginTop: string;
+        marginBottom: string;
+        containerBorderRadius: string;
+    };
+    xs: {
+        height: string;
+        marginTop: string;
+        marginBottom: string;
+        containerBorderRadius: string;
+    };
+    sm: {
+        height: string;
+        marginTop: string;
+        marginBottom: string;
+        containerBorderRadius: string;
+    };
+    md: {
+        height: string;
+        marginTop: string;
+        marginBottom: string;
+        containerBorderRadius: string;
+    };
+    lg: {
+        height: string;
+        marginTop: string;
+        marginBottom: string;
+        containerBorderRadius: string;
+    };
+};
+export declare const getButtonGroupSizeTheme: (theme: any, size: any, prop: any) => any;
 export declare const StyledRoot: import("../style/styled").StyledComponent;
 export declare const hyperspaceButtonOverrides: (utils: StyleUtils, props: any) => StyleObject;
 export declare const renderButtonGroupChild: (props: Omit<{
@@ -18,6 +51,7 @@ export declare const renderButtonGroupChild: (props: Omit<{
     intent?: import("../types").Intent | undefined;
     variant?: import("../types").Variant | import("../button/IconTextButton").Variant | undefined;
     activateOnFocus?: boolean | undefined;
+    role?: React.AriaRole | undefined;
 }, "style" | "className"> & {
     $as?: React.ElementType<any> | undefined;
     className?: import("../types").Styles;

package/button-group/styled-components.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderButtonGroupChild = exports.hyperspaceButtonOverrides = exports.StyledRoot = void 0;
+exports.renderButtonGroupChild = exports.hyperspaceButtonOverrides = exports.StyledRoot = exports.getButtonGroupSizeTheme = exports.buttonGroupButtonSizeMap = void 0;
 var tslib_1 = require("tslib");
 var React = (0, tslib_1.__importStar)(require("react"));
 var isArray_1 = (0, tslib_1.__importDefault)(require("lodash/isArray"));
@@ -9,29 +9,74 @@ var styled_components_1 = require("../button/styled-components");
 var longHandHelpers_1 = require("../helpers/longHandHelpers");
 var commonStyles_1 = require("../helpers/commonStyles");
 var styled_1 = (0, tslib_1.__importDefault)(require("../style/styled"));
+var themeHelpers_1 = require("../helpers/themeHelpers");
 // NOTE - This method is meant to be used by ButtonGroup only and not a generic one. This shouldn't be used to take style specific decisions.
 var isHyperSpaceUI = function (theme) { return theme.name.includes('hyperspace'); };
-exports.StyledRoot = (0, styled_1.default)('div', 'inline-flex items-center', function (_a) {
+exports.buttonGroupButtonSizeMap = {
+    xxxs: {
+        height: '20px',
+        marginTop: '1px',
+        marginBottom: '1px',
+        containerBorderRadius: '5px',
+    },
+    xs: {
+        height: '26px',
+        marginTop: '2px',
+        marginBottom: '2px',
+        containerBorderRadius: '7px',
+    },
+    sm: {
+        height: '26px',
+        marginTop: '2px',
+        marginBottom: '2px',
+        containerBorderRadius: '7px',
+    },
+    md: {
+        height: '32px',
+        marginTop: '3px',
+        marginBottom: '3px',
+        containerBorderRadius: '8px',
+    },
+    lg: {
+        height: '32px',
+        marginTop: '3px',
+        marginBottom: '3px',
+        containerBorderRadius: '8px',
+    },
+};
+var getButtonGroupSizeTheme = function (theme, size, prop) {
+    var _a, _b;
+    return ((_a = (0, themeHelpers_1.getComponentSizeTheme)(theme, 'buttonGroup', size, (0, themeHelpers_1.getDefaultSize)(theme))) === null || _a === void 0 ? void 0 : _a[prop]) ||
+        ((_b = exports.buttonGroupButtonSizeMap[size || (0, themeHelpers_1.getDefaultSize)(theme)]) === null || _b === void 0 ? void 0 : _b[prop]) ||
+        exports.buttonGroupButtonSizeMap[(0, themeHelpers_1.getDefaultSize)(theme)][prop];
+};
+exports.getButtonGroupSizeTheme = getButtonGroupSizeTheme;
+exports.StyledRoot = (0, styled_1.default)('div', 'inline-flex items-center', function (_a, _b) {
     var theme = _a.theme, px2rem = _a.px2rem;
+    var $size = _b.$size;
     if (!isHyperSpaceUI(theme))
         return {};
-    return (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({ backgroundColor: theme.spr.ui01 }, (0, longHandHelpers_1.borderStyle)('solid')), (0, longHandHelpers_1.borderColor)(theme.spr.ui03)), (0, longHandHelpers_1.borderWidth)('1px')), (0, longHandHelpers_1.borderRadius)(px2rem(8)));
+    var containerBorderRadius = (0, exports.getButtonGroupSizeTheme)(theme, $size, 'containerBorderRadius');
+    return (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({ backgroundColor: theme.spr.ui01 }, (0, longHandHelpers_1.borderStyle)('solid')), (0, longHandHelpers_1.borderColor)(theme.spr.ui03)), (0, longHandHelpers_1.borderWidth)('1px')), (0, longHandHelpers_1.borderRadius)(containerBorderRadius));
 });
 var isSelected = function (selected, index) { return ((0, isArray_1.default)(selected) ? selected.includes(index) : selected === index); };
 var isAnyButtonSelected = function (selected) { return (typeof selected === 'number' && selected >= 0) || Boolean(selected === null || selected === void 0 ? void 0 : selected.length); };
 var hyperspaceButtonOverrides = function (utils, props) {
     var theme = utils.theme, px2rem = utils.px2rem;
-    var $isIconButton = props.$isIconButton, $index = props.$index, $childrenCount = props.$childrenCount, $isSelected = props.$isSelected;
-    return (0, merge_1.default)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({ marginTop: px2rem(2), marginBottom: px2rem(2), 
+    var $isIconButton = props.$isIconButton, $index = props.$index, $childrenCount = props.$childrenCount, $isSelected = props.$isSelected, $size = props.$size;
+    var height = (0, exports.getButtonGroupSizeTheme)(theme, $size, 'height');
+    var marginTop = (0, exports.getButtonGroupSizeTheme)(theme, $size, 'marginTop');
+    var marginBottom = (0, exports.getButtonGroupSizeTheme)(theme, $size, 'marginBottom');
+    return (0, merge_1.default)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({ 
         // 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(16) }, (0, longHandHelpers_1.borderRadius)(px2rem(5))), (!$isIconButton
+        marginLeft: $index === 0 ? px2rem(2) : '0px', marginRight: $index === $childrenCount - 1 ? px2rem(2) : px2rem(3), fontSize: px2rem(12), lineHeight: px2rem(16) }, (0, longHandHelpers_1.borderRadius)(px2rem(4))), (!$isIconButton
         ? {
             paddingTop: px2rem(8),
             paddingBottom: px2rem(8),
             paddingLeft: px2rem(12),
             paddingRight: px2rem(12),
         }
-        : { height: px2rem(32), width: px2rem(32), marginTop: px2rem(3), marginBottom: px2rem(3) })), (0, styled_components_1.createButtonStyles)({
+        : { height: height, width: height, marginTop: marginTop, marginBottom: marginBottom })), (0, styled_components_1.createButtonStyles)({
         color: theme.spr.text01,
         hoverColor: theme.spr.text01,
         activeColor: theme.spr.text04,
@@ -45,8 +90,11 @@ var hyperspaceButtonOverrides = function (utils, props) {
 exports.hyperspaceButtonOverrides = hyperspaceButtonOverrides;
 var baseButtonStyle = function (childrenCount, index, utils, props) {
     var theme = utils.theme;
-    var $variant = props.$variant;
-    var baseStyles = { fontWeight: theme.fontWeight.normal };
+    var $variant = props.$variant, $size = props.$size;
+    var height = (0, exports.getButtonGroupSizeTheme)(theme, $size, 'height');
+    var marginTop = (0, exports.getButtonGroupSizeTheme)(theme, $size, 'marginTop');
+    var marginBottom = (0, exports.getButtonGroupSizeTheme)(theme, $size, 'marginBottom');
+    var baseStyles = { fontWeight: theme.fontWeight.normal, height: height, marginTop: marginTop, marginBottom: marginBottom };
     if (isHyperSpaceUI(theme)) {
         return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, baseStyles), (0, exports.hyperspaceButtonOverrides)(utils, (0, tslib_1.__assign)((0, tslib_1.__assign)({}, props), { $index: index, $childrenCount: childrenCount })));
     }

package/button-group/types.d.ts

@@ -3,6 +3,7 @@ import { Overrides, Override } from '../overrides';
 import { Variant, Size, ClassName, SpacewebComponentProps, Intent } from '../types';
 import { Variant as IconTextButtonVariant } from '../button/IconTextButton';
 import { Shape, ButtonSharedProps } from '../button';
+import { AriaRole } from 'react';
 declare type ButtonGroupOverrides = {
     Root?: Override<any>;
 };
@@ -20,6 +21,7 @@ export declare type ButtonGroupProps = SpacewebComponentProps<{
     intent?: Intent;
     variant?: Variant | IconTextButtonVariant;
     activateOnFocus?: boolean;
+    role?: AriaRole | undefined;
 }>;
 export declare type ButtonGroupChildProps = {
     className?: ClassName;