@sprinklrjs/spaceweb 10.1.0

package/esm/avatar/useAvatarColor.js

@@ -0,0 +1,23 @@
+import { useMemo } from 'react';
+import { AVATAR_GRADIENT_COLORS } from './constants';
+var getLinearGradientColor = function (index) {
+    var gradientColor = AVATAR_GRADIENT_COLORS[index];
+    return "".concat("linear-gradient(137deg,".concat(gradientColor[0], " 0%, ").concat(gradientColor[1], " 96%"), " )");
+};
+var getRandomBgColor = function () {
+    return getLinearGradientColor(Math.floor(Math.random() * AVATAR_GRADIENT_COLORS.length));
+};
+//NOTE: Hash logic based on https://werxltd.com/wp/2010/05/13/javascript-implementation-of-javas-string-hashcode-method/
+var getColorForName = function (name) {
+    var hash = 0;
+    // eslint-disable-next-line no-plusplus
+    for (var i = 0; i < name.length; i++) {
+        var chr = name.charCodeAt(i);
+        hash = (hash << 5) - hash + chr; // eslint-disable-line no-bitwise
+        hash |= 0; // eslint-disable-line no-bitwise
+    }
+    return getLinearGradientColor(Math.abs(hash) % (AVATAR_GRADIENT_COLORS.length - 1));
+};
+export var useAvatarColor = function (name) {
+    return useMemo(function () { return (name ? getColorForName(name) : getRandomBgColor()); }, [name]);
+};

package/esm/avatar/utils/cleanupDisplayName.d.ts

@@ -0,0 +1 @@
+export declare const cleanupDisplayName: (displayName: string) => string;

package/esm/avatar/utils/cleanupDisplayName.js

@@ -0,0 +1,16 @@
+var UNWANTED_ENCLOSURES_REGEX = /[\(\[\{][^\)\]\}]*[\)\]\}]/g;
+/**
+ * Regular expression matching special ASCII characters except space, plus some unicode special characters.
+ * Applies after unwanted enclosures have been removed
+ */
+var UNWANTED_CHARS_REGEX = /[\0-\u001F\!-/:-@\[-`\{-\u00BF\u0250-\u036F\uD800-\uFFFF]/g;
+/** Regular expression matching one or more spaces. */
+var MULTIPLE_WHITESPACES_REGEX = /\s+/g;
+export var cleanupDisplayName = function (displayName) {
+    var cleanedDisplayName = displayName;
+    cleanedDisplayName = cleanedDisplayName.replace(UNWANTED_ENCLOSURES_REGEX, '');
+    cleanedDisplayName = cleanedDisplayName.replace(UNWANTED_CHARS_REGEX, '');
+    cleanedDisplayName = cleanedDisplayName.replace(MULTIPLE_WHITESPACES_REGEX, ' ');
+    cleanedDisplayName = cleanedDisplayName.trim();
+    return cleanedDisplayName;
+};

package/esm/badge/badge.d.ts

@@ -0,0 +1,4 @@
+import { PropsWithChildren, ReactElement } from 'react';
+import { BadgeProps } from './types';
+declare const Badge: ({ children, overrides, content, size, intent, horizontalPosition, verticalPosition, overlap, }: PropsWithChildren<BadgeProps>) => ReactElement;
+export default Badge;

package/esm/badge/badge.js

@@ -0,0 +1,19 @@
+import { __assign, __read } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useOverrides } from '../overrides/useOverrides';
+import { StyledAnchor, StyledRoot } from './styled-component';
+var Badge = function (_a) {
+    var children = _a.children, _b = _a.overrides, overrides = _b === void 0 ? {} : _b, content = _a.content, _c = _a.size, size = _c === void 0 ? 'lg' : _c, _d = _a.intent, intent = _d === void 0 ? 'error' : _d, _e = _a.horizontalPosition, horizontalPosition = _e === void 0 ? 'right' : _e, _f = _a.verticalPosition, verticalPosition = _f === void 0 ? 'bottom' : _f, _g = _a.overlap, overlap = _g === void 0 ? 'rectangle' : _g;
+    var _h = __read(useOverrides(overrides.Root, StyledRoot), 2), Root = _h[0], rootProps = _h[1];
+    var _j = __read(useOverrides(overrides.Anchor, StyledAnchor), 2), Anchor = _j[0], anchorProps = _j[1];
+    var sharedProps = {
+        $size: size,
+        $intent: intent,
+        $content: content,
+        $horizontalPosition: horizontalPosition,
+        $verticalPosition: verticalPosition,
+        $overlap: overlap,
+    };
+    return (_jsxs(Root, __assign({ "data-spaceweb": "badge" }, rootProps, sharedProps, { children: [children, _jsx(Anchor, __assign({}, anchorProps, sharedProps, { children: typeof content === 'function' ? content(sharedProps) : content }), void 0)] }), void 0));
+};
+export default Badge;

package/esm/badge/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Badge } from './badge';
+export { StyledAnchor, StyledRoot } from './styled-component';
+export type { Size, Intent, Overlap, BadgeProps, SharedProps } from './types';

package/esm/badge/index.js

@@ -0,0 +1,2 @@
+export { default as Badge } from './badge';
+export { StyledAnchor, StyledRoot } from './styled-component';

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

@@ -0,0 +1,2 @@
+export declare const StyledRoot: import("../style/styled").StyledComponent;
+export declare const StyledAnchor: import("../style/styled").StyledComponent;

package/esm/badge/styled-component.js

@@ -0,0 +1,56 @@
+import { __assign } from "tslib";
+import { styled } from '../style';
+import { borderRadius } from '../helpers/longHandHelpers';
+export var StyledRoot = styled('div', {
+    position: 'relative',
+    display: 'inline-flex',
+});
+var sizeMap = {
+    sm: '35%',
+    lg: '50%',
+};
+var isCustomContent = function (content) { return typeof content === 'function'; };
+var anchorOffset = function (_, _a) {
+    var $horizontalPosition = _a.$horizontalPosition, $verticalPosition = _a.$verticalPosition, $overlap = _a.$overlap;
+    var offset = $overlap === 'rectangle' ? 0 : '14%';
+    var horizontalOffset = $horizontalPosition === 'left' ? { left: offset } : { right: offset };
+    var verticalOffset = $verticalPosition === 'top' ? { top: offset } : { bottom: offset };
+    var transform = $verticalPosition === 'top'
+        ? {
+            transform: $horizontalPosition === 'left'
+                ? 'translate(calc(-100% + min(1rem, 50%)), -50%)' // min of 1rem( for large elements ) and 50%( for small elements )
+                : 'translate(calc(100% - min(1rem, 50%)), -50%)',
+        }
+        : {
+            transform: $horizontalPosition === 'left'
+                ? 'translate(calc(-100% + min(1rem, 50%)), 50%)'
+                : 'translate(calc(100% - min(1rem, 50%)), 50%)',
+        };
+    return __assign(__assign(__assign({}, horizontalOffset), verticalOffset), transform);
+};
+var backgroundColor = function (_a, _b) {
+    var theme = _a.theme;
+    var $intent = _b.$intent, $content = _b.$content;
+    var bgColor;
+    // when custom content provided, colorVariant should not have any effect.
+    if (isCustomContent($content))
+        bgColor = 'transparent';
+    else if ($intent === 'success')
+        bgColor = theme.spr.supportSuccess;
+    else if ($intent === 'error')
+        bgColor = theme.spr.supportError;
+    else
+        bgColor = theme.spr.supportWarning;
+    return { backgroundColor: bgColor };
+};
+var padding = function (_, _a) {
+    var $size = _a.$size, $content = _a.$content;
+    if (isCustomContent($content))
+        return {}; // no padding for customContent
+    var p = $size === 'sm' ? '2px' : '6px';
+    return { paddingLeft: p, paddingRight: p };
+};
+export var StyledAnchor = styled('span', 'absolute flex items-center justify-center spr-text-05 text-xs border border-solid spr-border-05 box-border typography-l2', anchorOffset, backgroundColor, function (utils, props) {
+    var $size = props.$size;
+    return __assign({ minWidth: sizeMap[$size], height: sizeMap[$size] }, borderRadius('50rem'));
+}, padding);

package/esm/badge/types.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { Override } from '../overrides/types';
+export declare type Intent = 'success' | 'error' | 'warning';
+export declare type Overlap = 'circle' | 'rectangle';
+export declare type Size = 'sm' | 'lg';
+export declare type BadgeProps = {
+    horizontalPosition?: 'left' | 'right';
+    verticalPosition?: 'top' | 'bottom';
+    overlap?: Overlap;
+    content?: number | string | ((sharedProps: SharedProps) => React.ReactNode);
+    size?: Size;
+    intent?: Intent;
+    overrides?: {
+        Root?: Override<unknown>;
+        Anchor?: Override<unknown>;
+    };
+};
+export declare type SharedProps = {
+    $content?: React.ReactNode;
+    $horizontalPosition: 'left' | 'right';
+    $verticalPosition: 'top' | 'bottom';
+    $overlap: Overlap;
+    $size: Size;
+    $intent?: Intent;
+};

package/esm/badge/types.js

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

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const BaseButton: import("react").ForwardRefExoticComponent<Omit<import("react").AllHTMLAttributes<HTMLElement>, "style" | "className"> & {
+    $as?: import("react").ElementType<any> | undefined;
+    className?: import("..").Styles;
+    style?: import("..").Styles;
+} & import("react").RefAttributes<HTMLElement>>;

package/esm/base-button/BaseButton.js

@@ -0,0 +1,26 @@
+import { __assign } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback } from 'react';
+import { useFocusVisible } from '../hooks/useFocusVisible';
+import { StyledBaseButton } from './styled-components';
+var isNotAllyElement = function (props) { return props.$as && !(props.$as === 'button' || props.$as === 'a'); };
+export var BaseButton = forwardRef(function (props, ref) {
+    var baseButtonProps = {};
+    var focusProps = useFocusVisible(props);
+    var handleKeyPress = useCallback(function (event) {
+        var _a, _b;
+        event.preventDefault();
+        if (event.key === 'Enter' || event.key === ' ') {
+            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, event);
+        }
+        (_b = props.onKeyPress) === null || _b === void 0 ? void 0 : _b.call(props, event);
+    }, [props.onClick, props.onKeyPress]);
+    if (isNotAllyElement(props)) {
+        baseButtonProps.onKeyPress = handleKeyPress;
+        baseButtonProps.role = 'button';
+        baseButtonProps.tabIndex = props.disabled ? -1 : props.tabIndex || 0;
+        baseButtonProps['aria-disabled'] = Boolean(props.disabled);
+    }
+    return _jsx(StyledBaseButton, __assign({}, props, baseButtonProps, focusProps, { ref: ref }), void 0);
+});
+BaseButton.displayName = 'BaseButton';

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

@@ -0,0 +1,3 @@
+export { BaseButton } from './BaseButton';
+export { StyledBaseButton, buttonResetStyles } from './styled-components';
+export type { BaseButtonProps } from './types';

package/esm/base-button/index.js

@@ -0,0 +1,2 @@
+export { BaseButton } from './BaseButton';
+export { StyledBaseButton, buttonResetStyles } from './styled-components';

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

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

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

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

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

@@ -0,0 +1,2 @@
+import { SpacewebComponentProps } from '../types';
+export declare type BaseButtonProps = SpacewebComponentProps;

package/esm/base-button/types.js

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

package/esm/box/Box.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+declare const Box: import("react").ForwardRefExoticComponent<Omit<import("react").AllHTMLAttributes<HTMLElement>, "style" | "className"> & {
+    $as?: import("react").ElementType<any> | undefined;
+    className?: import("..").Styles;
+    style?: import("..").Styles;
+} & {
+    overrides?: {
+        Box?: import("../overrides").Override<Record<string, any>> | undefined;
+    } | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;
+export default Box;

package/esm/box/Box.js

@@ -0,0 +1,13 @@
+import { __assign, __read, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useOverrides } from '../overrides';
+import { styled } from '../style';
+var StyledBox = styled('div');
+var Box = forwardRef(function (props, ref) {
+    var _a = props.overrides, overrides = _a === void 0 ? {} : _a, boxProps = __rest(props, ["overrides"]);
+    var _b = __read(useOverrides(overrides.Box, StyledBox), 2), Comp = _b[0], overrideProps = _b[1];
+    return _jsx(Comp, __assign({ "data-spaceweb": "box", "data-testid": "box" }, boxProps, overrideProps, { ref: ref }), void 0);
+});
+Box.displayName = 'Box';
+export default Box;

package/esm/box/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Box } from './Box';
+export * from './types';

package/esm/box/index.js

@@ -0,0 +1,2 @@
+export { default as Box } from './Box';
+export * from './types';

package/esm/box/types.d.ts

@@ -0,0 +1,7 @@
+import { Override } from '../overrides';
+import { SpacewebComponentProps } from '../types';
+export declare type BoxProps = SpacewebComponentProps & {
+    overrides?: {
+        Box?: Override<Record<string, any>>;
+    };
+};

package/esm/box/types.js

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

package/esm/button/Button.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+declare const Button: React.ForwardRefExoticComponent<Omit<{
+    $as?: React.ElementType<any> | undefined;
+    className?: import("..").Styles;
+    style?: import("..").Styles;
+    size?: import("./types").Size | undefined;
+    shape?: import("./types").Shape | undefined;
+    variant?: import("..").Variant | undefined;
+    intent?: import("..").Intent | undefined;
+    isLoading?: boolean | undefined;
+    isSelected?: boolean | undefined;
+    disabled?: boolean | undefined;
+    fullWidth?: boolean | undefined;
+    autoFocus?: boolean | undefined;
+    href?: string | undefined;
+    target?: string | undefined;
+    rel?: string | undefined;
+    children?: React.ReactNode;
+    endEnhancer?: React.ReactNode;
+    onClick?: ((event: React.MouseEvent<HTMLElement, MouseEvent>) => any) | undefined;
+    overrides?: import("./types").ButtonOverrides | undefined;
+    startEnhancer?: React.ReactNode;
+    type?: "button" | "reset" | "submit" | undefined;
+    tooltipContent?: React.ReactNode | ((args: {
+        close: () => void;
+    }) => React.ReactNode);
+}, "style" | "className"> & {
+    $as?: React.ElementType<any> | undefined;
+    className?: import("..").Styles;
+    style?: import("..").Styles;
+} & React.RefAttributes<HTMLButtonElement>>;
+export default Button;

package/esm/button/Button.js

@@ -0,0 +1,48 @@
+import { __assign, __read, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import _pick from 'lodash/pick';
+import _omit from 'lodash/omit';
+import { Button as BaseUIButton } from 'baseui/button';
+import { useConvertOverrides } from '../helpers/baseui/useConvertOverrides';
+import { mergeOverrides, useOverrides } from '../overrides';
+import { getButtonStyles, StyledLoadingSpinnerContainer } from './styled-components';
+import adaptBaseButtonProps from './basewebAdapter';
+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';
+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 buttonOverrides = React.useMemo(function () { return _omit(overrides, 'StatefulTooltip'); }, [overrides]);
+    var adaptedProps = adaptBaseButtonProps(__assign(__assign({}, restProps), { variant: variant, overrides: buttonOverrides }));
+    var convertedOverrides = useConvertOverrides(adaptedProps.overrides || {});
+    var mergedOverrides = mergeOverrides({
+        BaseButton: {
+            props: __assign({ className: [getButtonStyles, className, style] }, add$props({ variant: variant, intent: intent, size: size, fullWidth: fullWidth })),
+            component: BaseButton, //using StyledBaseButton instead of BaseButton as all the handling is done by baseui's Button.
+        },
+        LoadingSpinnerContainer: {
+            component: StyledLoadingSpinnerContainer,
+            props: {
+                $size: size,
+            },
+        },
+        LoadingSpinner: {
+            style: {
+                height: '100%',
+                width: '100%',
+            },
+        },
+    }, _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));
+    if (adaptedProps.disabled && tooltipContent) {
+        return (_jsx(DisabledTooltipContainer, __assign({ placement: "bottom", content: tooltipContent }, statefulTooltipProps, { children: buttonEl }), void 0));
+    }
+    return tooltipContent ? (_jsx(StatefulTooltip, __assign({ placement: "bottom", content: tooltipContent }, statefulTooltipProps, { children: buttonEl }), void 0)) : (buttonEl);
+});
+Button.displayName = 'Button';
+export default Button;

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

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

package/esm/button/IconButton/IconButton.js

@@ -0,0 +1,20 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, Children } from 'react';
+import { mergeOverrides } from '../../overrides';
+import { useStyle } from '../../style';
+import Button from '../Button';
+import { iconButtonStyles, renderIconButtonChild } from './styled-components';
+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 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));
+});
+IconButton.displayName = 'IconButton';
+export default IconButton;

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

@@ -0,0 +1,3 @@
+import IconButton from './IconButton';
+export default IconButton;
+export * from './types';

package/esm/button/IconButton/index.js

@@ -0,0 +1,3 @@
+import IconButton from './IconButton';
+export default IconButton;
+export * from './types';

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { IconProps } from '../../icon';
+import { Styles } from '../../types';
+export declare const iconButtonStyles: Styles;
+export declare const renderIconButtonChild: (theme: any, size: any, child: React.ReactElement<IconProps>) => React.ReactElement<IconProps, string | React.JSXElementConstructor<any>> | null;

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

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { getComponentSizeTheme } from '../../helpers/themeHelpers';
+import { borderRadius, padding } from '../../helpers/longHandHelpers';
+import { createButtonStyles } from '../styled-components';
+var SHAPE_VS_THEME_KEY = {
+    round: 'shapeRound',
+    square: 'shapeSquare',
+};
+var getButtonShapeThemeKey = function (shape) { var _a; return (_a = SHAPE_VS_THEME_KEY[shape]) !== null && _a !== void 0 ? _a : SHAPE_VS_THEME_KEY.round; };
+var getButtonSizeTheme = function (theme, size) { return getComponentSizeTheme(theme, 'iconButton', size, 'md'); };
+var getDimensions = function (_a, _b) {
+    var theme = _a.theme, px2rem = _a.px2rem;
+    var $size = _b.$size;
+    var size = getButtonSizeTheme(theme, $size).buttonSize;
+    return { height: px2rem(size), width: px2rem(size) };
+};
+var resetPadding = function (_a) {
+    var theme = _a.theme;
+    return padding(theme.padding['0']);
+};
+var makeGetStyleFromTheme = function (theme, shape, bordered) {
+    var btnShapeKey = getButtonShapeThemeKey(shape);
+    var iconButton = theme.iconButton;
+    return function (btnStateKey, defaultKey) {
+        var _a, _b;
+        var defaultColor = defaultKey
+            ? (_a = iconButton[btnShapeKey][btnStateKey]) !== null && _a !== void 0 ? _a : iconButton[btnShapeKey][defaultKey]
+            : iconButton[btnShapeKey][btnStateKey];
+        return bordered ? (_b = iconButton["".concat(btnShapeKey, "Bordered")][btnStateKey]) !== null && _b !== void 0 ? _b : defaultColor : defaultColor;
+    };
+};
+var getVariantStyles = function (_a, props) {
+    var theme = _a.theme;
+    var _b = props.$bordered, $bordered = _b === void 0 ? false : _b, _c = props.$shape, $shape = _c === void 0 ? 'round' : _c;
+    var styleFromThemeGetter = makeGetStyleFromTheme(theme, $shape, $bordered);
+    return createButtonStyles({
+        color: styleFromThemeGetter('color'),
+        activeColor: styleFromThemeGetter('activeColor'),
+        hoverColor: styleFromThemeGetter('hoverColor'),
+        disabledColor: styleFromThemeGetter('disabledColor'),
+        borderColor: styleFromThemeGetter('borderColor'),
+        hoverBorderColor: styleFromThemeGetter('hoverBorderColor'),
+        activeBorderColor: styleFromThemeGetter('activeBorderColor'),
+        disabledBorderColor: styleFromThemeGetter('disabledBorderColor'),
+        backgroundColor: styleFromThemeGetter('backgroundColor'),
+        hoverBackgroundColor: styleFromThemeGetter('hoverBackgroundColor'),
+        activeBackgroundColor: styleFromThemeGetter('activeBackgroundColor'),
+        disabledBackgroundColor: styleFromThemeGetter('disabledBackgroundColor'),
+    }, props);
+};
+export var iconButtonStyles = [
+    function (_a) {
+        var theme = _a.theme;
+        return ({ minWidth: theme.iconButton.minWidth });
+    },
+    function (_a, _b) {
+        var theme = _a.theme;
+        var $shape = _b.$shape, $size = _b.$size;
+        var squareButtonSizeRadius = getButtonSizeTheme(theme, $size).squareBorderRadius;
+        var squareBorderRadius = squareButtonSizeRadius ? "".concat(squareButtonSizeRadius, "px") : theme.iconButton.shapeSquare.borderRadius;
+        return $shape === 'square' ? borderRadius(squareBorderRadius) : undefined;
+    },
+    resetPadding,
+    getDimensions,
+    getVariantStyles,
+];
+export var renderIconButtonChild = function (theme, size, child) {
+    return React.isValidElement(child)
+        ? React.cloneElement(child, {
+            size: child.props.size || getButtonSizeTheme(theme, size).iconSize,
+        })
+        : null;
+};

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

@@ -0,0 +1,10 @@
+import { ButtonProps, ButtonSharedProps } from '../types';
+import { Size } from '../../types';
+export declare type IconButtonProps = Omit<ButtonProps, 'size'> & {
+    size?: Size;
+    bordered?: boolean;
+};
+export declare type SharedProps = Omit<ButtonSharedProps, '$size'> & {
+    $size?: Size;
+    $bordered?: boolean;
+};

package/esm/button/IconButton/types.js

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

package/esm/button/IconTextButton/IconTextButton.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare const IconTextButton: import("react").ForwardRefExoticComponent<Omit<import("..").ButtonProps, "variant"> & {
+    icon?: import("react").ComponentType<import("../../icon").IconProps> | undefined;
+    variant?: import("./types").Variant | undefined;
+    bordered?: boolean | undefined;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+export default IconTextButton;

package/esm/button/IconTextButton/IconTextButton.js

@@ -0,0 +1,24 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { mergeOverrides } from '../../overrides';
+import Button from '../Button';
+import { iconTextButtonStyle, startEnhancerStyle } from './styled-components';
+var IconTextButton = forwardRef(function (props, ref) {
+    var _a = props.variant, variant = _a === void 0 ? 'default' : _a, bordered = props.bordered, Icon = props.icon, _b = props.size, size = _b === void 0 ? 'md' : _b, buttonProps = __rest(props, ["variant", "bordered", "icon", "size"]);
+    var sharedProps = { $iconTextVariant: variant, $bordered: bordered };
+    var overrides = mergeOverrides({
+        BaseButton: {
+            style: iconTextButtonStyle,
+            props: sharedProps,
+        },
+        StartEnhancer: {
+            style: startEnhancerStyle,
+            props: sharedProps,
+        },
+    }, props.overrides || {});
+    var StyledIcon = Icon ? _jsx(Icon, { size: 12 }, void 0) : null;
+    return (_jsx(Button, __assign({}, buttonProps, { size: size, ref: ref, variant: "minimal", shape: "default", startEnhancer: StyledIcon, overrides: overrides }), void 0));
+});
+IconTextButton.displayName = 'IconTextButton';
+export default IconTextButton;

package/esm/button/IconTextButton/index.d.ts

@@ -0,0 +1,3 @@
+import IconTextButton from './IconTextButton';
+export default IconTextButton;
+export * from './types';

package/esm/button/IconTextButton/index.js

@@ -0,0 +1,3 @@
+import IconTextButton from './IconTextButton';
+export default IconTextButton;
+export * from './types';

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

@@ -0,0 +1,3 @@
+import { Styles } from '../../types';
+export declare const iconTextButtonStyle: Styles;
+export declare const startEnhancerStyle: Styles;

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

@@ -0,0 +1,46 @@
+import { __assign } from "tslib";
+import { borderColor } from '../../helpers/longHandHelpers';
+var getVariantStyles = function (_a, _b) {
+    var theme = _a.theme;
+    var $iconTextVariant = _b.$iconTextVariant, $isSelected = _b.$isSelected;
+    if ($iconTextVariant === 'default') {
+        return {
+            color: $isSelected ? theme.spr.text04 : theme.spr.text01,
+            ':active': {
+                color: theme.spr.text04,
+            },
+            ':active svg': {
+                color: theme.spr.focus01,
+            },
+            backgroundColor: 'transparent',
+        };
+    }
+    return { backgroundColor: 'transparent' };
+};
+var getIconVariantStyles = function (_a, _b) {
+    var theme = _a.theme;
+    var $iconTextVariant = _b.$iconTextVariant, $isSelected = _b.$isSelected;
+    switch ($iconTextVariant) {
+        case 'default':
+        default:
+            return {
+                color: $isSelected ? theme.spr.focus01 : theme.spr.icon02,
+            };
+        case 'bulk':
+            return { color: theme.spr.icon04 };
+    }
+};
+export var iconTextButtonStyle = [
+    function (utils, props) { return (__assign({}, (props.$bordered
+        ? __assign(__assign({}, borderColor(utils.theme.spr.border03)), { ':hover': __assign(__assign({}, borderColor(utils.theme.spr.border06)), { backgroundColor: utils.theme.spr.ui02 }), ':active': __assign(__assign({}, borderColor(utils.theme.spr.interactive01)), { backgroundColor: utils.theme.spr.ui05 }) }) : borderColor('transparent')))); },
+    getVariantStyles,
+];
+export var startEnhancerStyle = [
+    function (_a) {
+        var px2rem = _a.px2rem;
+        return ({
+            marginRight: px2rem(8),
+        });
+    },
+    getIconVariantStyles,
+];

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

@@ -0,0 +1,13 @@
+import { ComponentType } from 'react';
+import { ButtonProps, ButtonSharedProps } from '../types';
+import { IconProps } from '../../icon';
+export declare type Variant = 'default' | 'bulk';
+export declare type IconTextButtonProps = Omit<ButtonProps, 'variant'> & {
+    icon?: ComponentType<IconProps>;
+    variant?: Variant;
+    bordered?: boolean;
+};
+export declare type SharedProps = ButtonSharedProps & {
+    $iconTextVariant?: Variant;
+    $bordered?: boolean;
+};

package/esm/button/IconTextButton/types.js

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