@sprinklrjs/spaceweb 10.1.0 → 12.14.4

package/banner/banner.js

@@ -0,0 +1,56 @@
+"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 overrides_1 = require("../overrides");
+var styled_component_1 = require("./styled-component");
+var error_clr_1 = (0, tslib_1.__importDefault)(require("../icon/components/error-clr"));
+var alert_solid_1 = (0, tslib_1.__importDefault)(require("../icon/components/alert-solid"));
+var tickCircle_solid_1 = (0, tslib_1.__importDefault)(require("../icon/components/tickCircle-solid"));
+var style_1 = require("../style");
+var styled_components_1 = require("../link/styled-components");
+var locale_1 = require("../locale");
+var useStickyElement_1 = (0, tslib_1.__importDefault)(require("../hooks/useStickyElement"));
+function Icon(_a) {
+    var className = _a.className, _b = _a.intent, intent = _b === void 0 ? 'error' : _b, restProps = (0, tslib_1.__rest)(_a, ["className", "intent"]);
+    var theme = (0, style_1.useStyle)().theme;
+    var intentToIconMap = {
+        error: {
+            BaseIcon: error_clr_1.default,
+            prop: [{ fill: theme.spr.supportError }],
+        },
+        warning: {
+            BaseIcon: alert_solid_1.default,
+            prop: [{ fill: theme.spr.supportWarning }],
+        },
+        success: {
+            BaseIcon: tickCircle_solid_1.default,
+            prop: [{ fill: theme.spr.supportSuccess }],
+        },
+    };
+    var _c = intentToIconMap[intent], BaseIcon = _c.BaseIcon, prop = _c.prop;
+    return (0, jsx_runtime_1.jsx)(BaseIcon, (0, tslib_1.__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 = (0, tslib_1.__rest)(_a, ["show", "className", "onToggle"]);
+    var locale = (0, locale_1.useLocale)();
+    var label = show ? locale.banner.toggleButtonHideLabel : locale.banner.toggleButtonShowLabel;
+    var ariaLabel = show ? locale.banner.toggleButtonHideAriaLabel : locale.banner.toggleButtonShowAriaLabel;
+    return ((0, jsx_runtime_1.jsx)(styled_components_1.StyledButtonLink, (0, tslib_1.__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 = (0, react_1.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 = (0, tslib_1.__rest)(_a, ["intent", "collapsible", "title", "children", "overrides", "$as", "role", "maxItemContainerHeight"]);
+    var _d = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.Root, styled_component_1.StyledBanner), 2), Root = _d[0], rootProps = _d[1];
+    var _e = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.BannerItemContainer, styled_component_1.StyledBannerItemContainer), 2), BannerItemContainer = _e[0], bannerItemContainerProps = _e[1];
+    var _f = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.HeaderContainer, styled_component_1.StyledHeaderContainer), 2), HeaderContainer = _f[0], headerContainerProps = _f[1];
+    var _g = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.TitleContainer, styled_component_1.StyledTitleContainer), 2), TitleContainer = _g[0], titleContainerProps = _g[1];
+    var _h = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.HeaderTitle, styled_component_1.StyledTitle), 2), HeaderTitle = _h[0], headerTitleProps = _h[1];
+    var _j = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.HeaderIcon, Icon), 2), HeaderIcon = _j[0], headerIconProps = _j[1];
+    var _k = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.ToggleButton, BaseToggleButton), 2), ToggleButton = _k[0], toggleButtonProps = _k[1];
+    var _l = (0, tslib_1.__read)((0, react_1.useState)(true), 2), show = _l[0], setShow = _l[1];
+    var _m = (0, useStickyElement_1.default)(), isSticky = _m.isSticky, setStickySentinelRef = _m.setStickySentinelRef;
+    return ((0, jsx_runtime_1.jsxs)(Root, (0, tslib_1.__assign)({ "data-spaceweb": "banner", "data-testid": "banner", intent: intent, collapsible: collapsible }, restProps, rootProps, { ref: ref }, { children: [(0, jsx_runtime_1.jsx)("div", { ref: setStickySentinelRef }, void 0), (0, jsx_runtime_1.jsxs)(HeaderContainer, (0, tslib_1.__assign)({}, headerContainerProps, { "$sticky": isSticky }, { children: [(0, jsx_runtime_1.jsxs)(TitleContainer, (0, tslib_1.__assign)({}, titleContainerProps, { children: [(0, jsx_runtime_1.jsx)(HeaderIcon, (0, tslib_1.__assign)({ intent: intent }, headerIconProps), void 0), (0, jsx_runtime_1.jsx)(HeaderTitle, (0, tslib_1.__assign)({}, headerTitleProps, { children: title }), void 0)] }), void 0), collapsible && (0, jsx_runtime_1.jsx)(ToggleButton, (0, tslib_1.__assign)({ show: show, onToggle: setShow }, toggleButtonProps), void 0)] }), void 0), show && children && ((0, jsx_runtime_1.jsx)(BannerItemContainer, (0, tslib_1.__assign)({ "$as": $as, role: $as === 'ol' || $as === 'ul' ? 'list' : role, "$maxHeight": maxItemContainerHeight }, bannerItemContainerProps, { children: children }), void 0))] }), void 0));
+});
+Banner.displayName = 'Banner';
+exports.default = (0, react_1.memo)(Banner);

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

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledTitle = exports.StyledBannerItem = exports.StyledBanner = exports.BannerItem = exports.Banner = void 0;
+var banner_1 = require("./banner");
+Object.defineProperty(exports, "Banner", { enumerable: true, get: function () { return __importDefault(banner_1).default; } });
+var banner_item_1 = require("./banner-item");
+Object.defineProperty(exports, "BannerItem", { enumerable: true, get: function () { return __importDefault(banner_item_1).default; } });
+var styled_component_1 = require("./styled-component");
+Object.defineProperty(exports, "StyledBanner", { enumerable: true, get: function () { return styled_component_1.StyledBanner; } });
+Object.defineProperty(exports, "StyledBannerItem", { enumerable: true, get: function () { return styled_component_1.StyledBannerItem; } });
+Object.defineProperty(exports, "StyledTitle", { enumerable: true, get: function () { return styled_component_1.StyledTitle; } });

package/banner/locale.d.ts

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

package/banner/locale.js

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

package/banner/package.json

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

package/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/banner/styled-component.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledBannerItem = exports.StyledTitle = exports.StyledHeaderContainer = exports.StyledTitleContainer = exports.StyledBannerItemContainer = exports.StyledBanner = void 0;
+var tslib_1 = require("tslib");
+var classNames_1 = (0, tslib_1.__importDefault)(require("../classNames"));
+var style_1 = require("../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,
+            };
+    }
+};
+exports.StyledBanner = (0, style_1.styled)('div', 'box-border w-full rounded-8 border-solid border-1 font-medium overflow-auto pb-2', getBannerIntentStyles);
+exports.StyledBannerItemContainer = (0, style_1.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((0, classNames_1.default)({ 'list-decimal': $as === 'ol', 'list-disc': $as === 'ul' }), { maxHeight: $maxHeight });
+});
+exports.StyledTitleContainer = (0, style_1.styled)('div', 'flex flex-row justify-center items-center');
+exports.StyledHeaderContainer = (0, style_1.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' });
+});
+exports.StyledTitle = (0, style_1.styled)('div', 'typography-bl1 font-600');
+exports.StyledBannerItem = (0, style_1.styled)('li', 'typography-bl1');

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

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

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

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var noop_1 = (0, tslib_1.__importDefault)(require("lodash/noop"));
+var typography_1 = require("../typography");
+var link_1 = require("../link");
+var styled_components_1 = require("./styled-components");
+var overrides_1 = require("../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_1.default : _c, _d = _a.index, index = _d === void 0 ? 0 : _d, startEnhancer = _a.startEnhancer, endEnhancer = _a.endEnhancer, _e = _a.separator, separator = _e === void 0 ? styled_components_1.DEFAULT_SEPARATOR : _e, _f = _a.gap, gap = _f === void 0 ? 4 : _f, restProps = (0, tslib_1.__rest)(_a, ["children", "isLastChild", "overrides", "onClick", "index", "startEnhancer", "endEnhancer", "separator", "gap"]);
+    var sharedProps = {
+        $gap: gap,
+        $withStartEnhancer: !!startEnhancer,
+        $withEndEnhancer: !!endEnhancer,
+        $isLastChild: isLastChild,
+    };
+    var mergedOverrides = (0, overrides_1.mergeOverrides)(breadcrumbItemOverrides, overrides);
+    var _g = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.ListItem, styled_components_1.StyledListItem), 2), ListItem = _g[0], listItemProps = _g[1];
+    var _h = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Link, !isLastChild ? link_1.Link : typography_1.Typography), 2), LinkOverride = _h[0], linkOverrideProps = _h[1];
+    var _j = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.StartEnhancer, styled_components_1.StyledStartEnhancer), 2), StartEnhancer = _j[0], startEnhancerProps = _j[1];
+    var _k = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.EndEnhancer, styled_components_1.StyledEndEnhancer), 2), EndEnhancer = _k[0], endEnhancerProps = _k[1];
+    var _l = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Separator, styled_components_1.StyledSeparator), 2), BreadcrumbSeparator = _l[0], separatorWrapperProps = _l[1];
+    var renderEnhancer = function (enhancer) {
+        return typeof enhancer === 'function' ? enhancer(sharedProps) : enhancer;
+    };
+    return ((0, jsx_runtime_1.jsxs)(ListItem, (0, tslib_1.__assign)({ "data-testid": "breadcrumb-list-item-".concat(index) }, sharedProps, listItemProps, { children: [(0, jsx_runtime_1.jsxs)(LinkOverride, (0, tslib_1.__assign)({ "data-testid": "breadcrumb-item-link-".concat(index), onClick: function (e) { return onClick(e, index); } }, sharedProps, restProps, linkOverrideProps, { children: [startEnhancer && ((0, jsx_runtime_1.jsx)(StartEnhancer, (0, tslib_1.__assign)({ "data-testid": "breadcrumb-item-startenhancer-".concat(index) }, sharedProps, startEnhancerProps, { children: renderEnhancer(startEnhancer) }), void 0)), children, endEnhancer && ((0, jsx_runtime_1.jsx)(EndEnhancer, (0, tslib_1.__assign)({ "data-testid": "breadcrumb-item-endenhancer-".concat(index) }, sharedProps, endEnhancerProps, { children: renderEnhancer(endEnhancer) }), void 0))] }), void 0), !isLastChild && ((0, jsx_runtime_1.jsx)(BreadcrumbSeparator, (0, tslib_1.__assign)({ "data-testid": "breadcrumb-item-separator-".concat(index), "aria-hidden": true }, sharedProps, separatorWrapperProps, { children: separator }), void 0))] }), void 0));
+};
+BreadcrumbItem.displayName = 'BreadcrumbItem';
+exports.default = BreadcrumbItem;

package/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/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;
@@ -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/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,9 +42,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'),
+        },
     }, (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, { overrides: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, convertedOverrides), mergedOverrides), ref: buttonRef }), void 0));
+    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));
     if (adaptedProps.disabled && tooltipContent) {
         return ((0, jsx_runtime_1.jsx)(tooltip_1.DisabledTooltipContainer, (0, tslib_1.__assign)({ placement: "bottom", content: tooltipContent }, statefulTooltipProps, { children: buttonEl }), 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

@@ -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/button/basewebAdapter.js

@@ -7,6 +7,6 @@ var variantMap = {
     primary: button_1.KIND.primary,
     secondary: button_1.KIND.secondary,
     tertiary: button_1.KIND.tertiary,
-    minimal: button_1.KIND.minimal,
+    minimal: button_1.KIND.tertiary,
 };
 exports.default = (function (props) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, omit_1.default)(props, 'variant')), { kind: props.variant ? variantMap[props.variant] : button_1.KIND.primary })); });