@sprinklrjs/spaceweb 10.1.0

package/avatar/avatar-group.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { AvatarGroupProps } from './types';
+declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLElement>>;
+export { AvatarGroup };

package/avatar/avatar-group.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AvatarGroup = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint import/prefer-default-export: 0 */
+var React = (0, tslib_1.__importStar)(require("react"));
+var useOverrides_1 = require("../overrides/useOverrides");
+var mergeOverrides_1 = require("../overrides/mergeOverrides");
+var style_1 = require("../style");
+var avatar_1 = require("./avatar");
+var styled_component_1 = require("./styled-component");
+var spacingVsMargin = {
+    sm: '-12px',
+    md: '-8px',
+    none: '0',
+    lg: '6px',
+};
+var AvatarGroup = React.forwardRef(function (_a, ref) {
+    var children = _a.children, _b = _a.max, max = _b === void 0 ? 5 : _b, size = _a.size, shape = _a.shape, _c = _a.spacing, spacing = _c === void 0 ? 'sm' : _c, _d = _a.overrides, overrides = _d === void 0 ? {} : _d, className = _a.className;
+    var utils = (0, style_1.useStyle)();
+    var theme = utils.theme;
+    var _e = (0, tslib_1.__read)((0, useOverrides_1.useOverrides)(overrides.Root, styled_component_1.StyledAvatarGroup), 2), Root = _e[0], rootProps = _e[1];
+    var _f = (0, tslib_1.__read)((0, useOverrides_1.useOverrides)(overrides.ExtraAvatar, avatar_1.Avatar), 2), ExtraAvatar = _f[0], extraAvatarProps = _f[1];
+    var sharedProps = {
+        $spacing: spacing,
+        $size: size,
+        $shape: shape,
+        $max: max,
+        $extraAvatar: false,
+    };
+    var validChildren = React.Children.toArray(children).filter(React.isValidElement);
+    var extraAvatars = validChildren.length > max ? validChildren.length - max : 0;
+    var childToRender = validChildren.slice(0, validChildren.length - extraAvatars);
+    if (extraAvatars > 0) {
+        var props = extraAvatarProps;
+        childToRender.push((0, jsx_runtime_1.jsx)(ExtraAvatar, (0, tslib_1.__assign)({}, props, { name: "+".concat(extraAvatars), initials: "+".concat(extraAvatars), color: theme.spr.ui05, overrides: (0, mergeOverrides_1.mergeOverrides)({ Initials: { style: (0, tslib_1.__assign)({}, theme.typography.l2) } }, props.overrides) }), void 0));
+    }
+    return ((0, jsx_runtime_1.jsx)(Root, (0, tslib_1.__assign)({ "data-spaceweb": "avatar-group", className: className }, sharedProps, rootProps, { ref: ref }, { children: childToRender.map(function (child, index) {
+            return React.cloneElement(child, {
+                key: String(index),
+                size: child.props.size || size,
+                shape: child.props.shape || shape,
+                overrides: (0, mergeOverrides_1.mergeOverrides)({
+                    Root: {
+                        style: { marginLeft: index !== 0 ? spacingVsMargin[spacing] : 0 },
+                    },
+                }, (child.props.overrides || {})),
+            });
+        }) }), void 0));
+});
+exports.AvatarGroup = AvatarGroup;
+AvatarGroup.displayName = 'AvatarGroup';

package/avatar/avatar.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import { AvatarProps } from './types';
+declare const Avatar: (props: AvatarProps) => ReactElement;
+export { Avatar };

package/avatar/avatar.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Avatar = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var box_1 = require("../box");
+var user_1 = (0, tslib_1.__importDefault)(require("../icon/components/user"));
+var styled_component_1 = require("./styled-component");
+var useAvatarColor_1 = require("./useAvatarColor");
+var style_1 = require("../style");
+var helpers_1 = require("../helpers");
+var cleanupDisplayName_1 = require("./utils/cleanupDisplayName");
+var overrides_1 = require("../overrides");
+var useIsomorphicLayoutEffect_1 = require("../hooks/useIsomorphicLayoutEffect");
+/**
+ * Regular expression matching phone numbers. Applied after chars matching UNWANTED_CHARS_REGEX have been removed
+ * and number has been trimmed for whitespaces
+ */
+var PHONENUMBER_REGEX = /^\d+[\d\s]*(:?ext|x|)\s*\d+$/i;
+function getInitials(name) {
+    var words = name.split(' ');
+    var initials = words.map(function (word) { return word[0]; });
+    return initials.slice(0, 2).join('').toUpperCase();
+}
+var Icon = function (_a) {
+    var overrides = _a.overrides, className = _a.className, props = (0, tslib_1.__rest)(_a, ["overrides", "className"]);
+    var _b = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.UserIcon, user_1.default), 2), UserIcon = _b[0], iconProps = _b[1];
+    return ((0, jsx_runtime_1.jsx)(box_1.Box, (0, tslib_1.__assign)({ className: ['h-full w-full flex items-center justify-center', className] }, props, { children: (0, jsx_runtime_1.jsx)(UserIcon, (0, tslib_1.__assign)({ "data-testid": "user-icon", className: "w-1/2 h-1/2" }, iconProps), void 0) }), void 0));
+};
+var Avatar = function (props) {
+    var _a = (0, tslib_1.__read)((0, react_1.useState)(null), 2), imageRef = _a[0], setImageRef = _a[1];
+    var _b = (0, tslib_1.__read)((0, react_1.useState)(false), 2), imageLoaded = _b[0], setImageLoaded = _b[1];
+    var _c = props.shape, shape = _c === void 0 ? 'circle' : _c, _d = props.size, size = _d === void 0 ? 'md' : _d, className = props.className, color = props.color, allowPhoneInitials = props.allowPhoneInitials, name = props.name, overrides = props.overrides, initials = props.initials, src = props.src;
+    var displayName = (0, cleanupDisplayName_1.cleanupDisplayName)(name);
+    var randomBgColor = (0, useAvatarColor_1.useAvatarColor)(displayName);
+    var isPhoneNumber = PHONENUMBER_REGEX.test(displayName);
+    var px2rem = (0, style_1.useStyle)().px2rem;
+    var avatarSize = typeof size === 'string' ? styled_component_1.avatarSizeConfig[size].size : px2rem(size);
+    var sharedProps = (0, tslib_1.__assign)({ $avatarSize: size, $color: color || randomBgColor, $didImageFailToLoad: !imageLoaded }, (0, helpers_1.add$props)({ shape: shape, imageLoaded: imageLoaded }));
+    (0, useIsomorphicLayoutEffect_1.useIsomorphicLayoutEffect)(function () {
+        if (!imageRef || !src) {
+            setImageLoaded(false);
+            return undefined;
+        }
+        if (imageRef) {
+            imageRef.onload = function () { return setImageLoaded(true); };
+            imageRef.onerror = function () { return setImageLoaded(false); };
+            /**
+             * Important to set src once onload listener is attached.
+             * In some cases, image loads before these listeners are attached.
+             */
+            imageRef.src = src;
+        }
+        return function () {
+            if (imageRef) {
+                imageRef.onload = null;
+                imageRef.onerror = null;
+            }
+        };
+    }, [src, imageRef]);
+    var _e = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Root, styled_component_1.StyledRoot), 2), Root = _e[0], rootProps = _e[1];
+    var _f = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Avatar, styled_component_1.StyledAvatar), 2), AvatarImage = _f[0], avatarImageProps = _f[1];
+    var _g = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Initials, styled_component_1.StyledInitials), 2), Initials = _g[0], initialsProps = _g[1];
+    return ((0, jsx_runtime_1.jsxs)(Root, (0, tslib_1.__assign)({ "aria-label": imageLoaded ? null : name, className: className, "data-spaceweb": "avatar", "$size": avatarSize }, sharedProps, rootProps, { children: [!imageLoaded &&
+                (isPhoneNumber && !allowPhoneInitials ? ((0, jsx_runtime_1.jsx)(Icon, (0, tslib_1.__assign)({ overrides: overrides }, sharedProps, initialsProps), void 0)) : ((0, jsx_runtime_1.jsx)(Initials, (0, tslib_1.__assign)({}, sharedProps, initialsProps, { children: initials || getInitials(displayName) }), void 0))), (0, jsx_runtime_1.jsx)(AvatarImage, (0, tslib_1.__assign)({ ref: setImageRef, src: src, alt: name, "$size": avatarSize }, sharedProps, avatarImageProps), void 0)] }), void 0));
+};
+exports.Avatar = Avatar;

package/avatar/constants.d.ts

@@ -0,0 +1 @@
+export declare const AVATAR_GRADIENT_COLORS: string[][];

package/avatar/constants.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AVATAR_GRADIENT_COLORS = void 0;
+exports.AVATAR_GRADIENT_COLORS = [
+    // Avatar User Default/Orange-Pink
+    ['#FBAB32', '#E65299'],
+    // Avatar User Default/Green-Blue
+    ['#7EC565', '#31C7ED'],
+    // Avatar User Default/Light-Blue
+    ['#31C7ED', '#2996D0'],
+    // Avatar User Default/Lime-Green
+    ['#CED54A', '#7EC565'],
+    // Avatar User Default/Magenta-Purple
+    ['#E1549B', '#B960A7'],
+    // Avatar User Default/Green-Yellow
+    ['#CED54A', '#FBAB32'],
+    // Avatar User Default/Yellow-Green
+    ['#CED54A', '#31C7ED'],
+    // Avatar User Default/Chartreuse
+    ['#E9ECAF', '#C9D036'],
+    // Avatar User Default/Green
+    ['#C6E5BB', '#70BF54'],
+    // Avatar User Default/Orange
+    ['#FDDAA4', '#FAA21B'],
+    // Avatar User Default/Pink
+    ['#F3A9CC', '#E0277F'],
+    // Avatar User Default/Blue
+    ['#A0D0EA', '#118ACB'],
+    // Avatar User Default/Purple
+    ['#DFE386', '#AA519F'],
+    // Avatar User Default/Aqua
+    ['#99E3F6', '#00BAE9'],
+    // Avatar User Default/Lavender-Yellow
+    ['#CFB0FF', '#FFD04F'],
+    // Avatar User Default/Yellow-Pink
+    ['#FFCF4A', '#FF6594'],
+    // Avatar User Default/Pink-Purple
+    ['#FF6993', '#D3B3F2'],
+    // Avatar User Default/Turquoise-Yellow
+    ['#8FECCD', '#FFD27A'],
+    // Avatar User Default/Turquoise-Pink
+    ['#C2F0E0', '#FF7788'],
+    // Avatar User Default/Turquoise-Blue
+    ['#9FE9C2', '#61AAFF'],
+    // Avatar User Default/Yellow-Green
+    ['#FFEA4F', '#2E9975'],
+    // Avatar User Default/Blue-Turquoise
+    ['#54BEEE', '#5CC8C3'],
+    // Avatar User Default/Coral
+    ['#FB8F53', '#FF6594'],
+    // Avatar User Default/Pink-Purple
+    ['#F59DED', '#B2A5FF'],
+    // Avatar User Default/Orange-Pink
+    ['#FFD27A', '#FF70F2'],
+    // Avatar User Default/LightBlue-Purple
+    ['#76EFE9', '#917EFF'],
+    // Avatar User Default/Turquoise-Fuscia
+    ['#7BF2ED', '#FA70ED'],
+    // Avatar User Default/Turquoise
+    ['#C2F0E0', '#38A5A0'],
+];

package/avatar/index.d.ts

@@ -0,0 +1,5 @@
+export { Avatar } from './avatar';
+export { AvatarGroup } from './avatar-group';
+export { StyledAvatarGroup, StyledAvatar, StyledInitials, StyledRoot } from './styled-component';
+export { useAvatarColor } from './useAvatarColor';
+export type { Spacing, Shape, Size, AvatarGroupProps, AvatarSharedProps, AvatarProps, AvatarState, } from './types';

package/avatar/index.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAvatarColor = exports.StyledRoot = exports.StyledInitials = exports.StyledAvatar = exports.StyledAvatarGroup = exports.AvatarGroup = exports.Avatar = void 0;
+var avatar_1 = require("./avatar");
+Object.defineProperty(exports, "Avatar", { enumerable: true, get: function () { return avatar_1.Avatar; } });
+var avatar_group_1 = require("./avatar-group");
+Object.defineProperty(exports, "AvatarGroup", { enumerable: true, get: function () { return avatar_group_1.AvatarGroup; } });
+var styled_component_1 = require("./styled-component");
+Object.defineProperty(exports, "StyledAvatarGroup", { enumerable: true, get: function () { return styled_component_1.StyledAvatarGroup; } });
+Object.defineProperty(exports, "StyledAvatar", { enumerable: true, get: function () { return styled_component_1.StyledAvatar; } });
+Object.defineProperty(exports, "StyledInitials", { enumerable: true, get: function () { return styled_component_1.StyledInitials; } });
+Object.defineProperty(exports, "StyledRoot", { enumerable: true, get: function () { return styled_component_1.StyledRoot; } });
+var useAvatarColor_1 = require("./useAvatarColor");
+Object.defineProperty(exports, "useAvatarColor", { enumerable: true, get: function () { return useAvatarColor_1.useAvatarColor; } });

package/avatar/package.json

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

package/avatar/styled-component.d.ts

@@ -0,0 +1,36 @@
+export declare const avatarSizeConfig: {
+    sm: {
+        size: string;
+        rectangleBorderRadius: string;
+        fontSize: string;
+    };
+    md: {
+        size: string;
+        rectangleBorderRadius: string;
+        fontSize: string;
+    };
+    lg: {
+        size: string;
+        rectangleBorderRadius: string;
+        fontSize: string;
+    };
+    xl: {
+        size: string;
+        rectangleBorderRadius: string;
+        fontSize: string;
+    };
+    xxl: {
+        size: string;
+        rectangleBorderRadius: string;
+        fontSize: string;
+    };
+    xxxl: {
+        size: string;
+        rectangleBorderRadius: string;
+        fontSize: string;
+    };
+};
+export declare const StyledAvatarGroup: import("../style/styled").StyledComponent;
+export declare const StyledRoot: import("../style/styled").StyledComponent;
+export declare const StyledInitials: import("../style/styled").StyledComponent;
+export declare const StyledAvatar: import("../style/styled").StyledComponent;

package/avatar/styled-component.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledAvatar = exports.StyledInitials = exports.StyledRoot = exports.StyledAvatarGroup = exports.avatarSizeConfig = void 0;
+var tslib_1 = require("tslib");
+var styled_1 = (0, tslib_1.__importDefault)(require("../style/styled"));
+var longHandHelpers_1 = require("../helpers/longHandHelpers");
+exports.avatarSizeConfig = {
+    sm: { size: '24px', rectangleBorderRadius: '6px', fontSize: '8px' },
+    md: { size: '34px', rectangleBorderRadius: '8px', fontSize: '10px' },
+    lg: { size: '40px', rectangleBorderRadius: '8px', fontSize: '12px' },
+    xl: { size: '48px', rectangleBorderRadius: '8px', fontSize: '16px' },
+    xxl: { size: '84px', rectangleBorderRadius: '12px', fontSize: '16px' },
+    xxxl: { size: '96px', rectangleBorderRadius: '12px', fontSize: '16px' },
+};
+var getSizeConfig = function (size) { var _a; return (_a = exports.avatarSizeConfig[size]) !== null && _a !== void 0 ? _a : exports.avatarSizeConfig.md; };
+var getFontSize = function (size) {
+    if (size < 24)
+        return '8px';
+    else if (size < 36)
+        return '12px';
+    else if (size < 48)
+        return '16px';
+    else if (size < 60)
+        return '20px';
+    else if (size < 72)
+        return '24px';
+    else if (size < 84)
+        return '28px';
+    else
+        return '36px';
+};
+exports.StyledAvatarGroup = (0, styled_1.default)('div', 'flex');
+exports.StyledRoot = (0, styled_1.default)('div', 'box-border inline-block', function (_, _a) {
+    var $shape = _a.$shape, $color = _a.$color, $didImageFailToLoad = _a.$didImageFailToLoad, $avatarSize = _a.$avatarSize, $size = _a.$size;
+    var avatarSizeTheme = getSizeConfig($avatarSize);
+    var borderRadius = $shape === 'circle' ? '50%' : avatarSizeTheme.rectangleBorderRadius;
+    return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, longHandHelpers_1.borderRadius)(borderRadius)), { background: $didImageFailToLoad ? $color : undefined, height: $didImageFailToLoad ? $size : undefined, width: $didImageFailToLoad ? $size : undefined });
+});
+exports.StyledInitials = (0, styled_1.default)('div', 'items-center justify-center h-full flex font-semibold spr-text-01', function (_, _a) {
+    var $avatarSize = _a.$avatarSize;
+    var fontSize = typeof $avatarSize === 'number' ? getFontSize($avatarSize) : getSizeConfig($avatarSize).fontSize;
+    return {
+        fontSize: fontSize,
+    };
+});
+// borderRadius should be inherited
+exports.StyledAvatar = (0, styled_1.default)('img', 'box-border object-cover', function (_, _a) {
+    var $size = _a.$size, $imageLoaded = _a.$imageLoaded;
+    return ((0, tslib_1.__assign)({ display: $imageLoaded ? 'block' : 'none', height: $size, width: $size }, (0, longHandHelpers_1.borderRadius)('inherit')));
+});

package/avatar/types.d.ts

@@ -0,0 +1,50 @@
+/// <reference types="react" />
+import { Override } from '../overrides';
+import { ClassName } from '../types';
+export declare type Shape = 'circle' | 'rectangle';
+export declare type Spacing = 'sm' | 'md' | 'none' | 'lg';
+export declare type Size = 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';
+export declare type AvatarGroupProps = {
+    className?: ClassName;
+    spacing?: Spacing;
+    max?: number;
+    size?: Size | number;
+    shape?: Shape;
+    overrides?: {
+        Root?: Override<AvatarGroupSharedProps & Record<string, any>>;
+        ExtraAvatar?: Override<AvatarProps & Record<string, any>>;
+    };
+    children?: React.ReactNode;
+};
+export declare type AvatarGroupSharedProps = {
+    $spacing: Spacing;
+    $size?: Size | number;
+    $shape?: Shape;
+    $max: number;
+    $extraAvatar: boolean;
+};
+export declare type AvatarSharedProps = {
+    $didImageFailToLoad: boolean;
+    $size?: string;
+    $shape: Shape;
+    $color?: string;
+    $avatarSize: string;
+};
+declare type AvatarOverrides = {
+    Root?: Override<AvatarSharedProps & Record<string, any>>;
+    Avatar?: Override<AvatarSharedProps & Record<string, any>>;
+    Initials?: Override<AvatarSharedProps & Record<string, any>>;
+    UserIcon?: Override<AvatarSharedProps & Record<string, any>>;
+};
+export declare type AvatarProps = {
+    name: string;
+    src?: string;
+    className?: ClassName;
+    shape?: Shape;
+    size?: Size | number;
+    initials?: string;
+    color?: string;
+    overrides?: AvatarOverrides;
+    allowPhoneInitials?: boolean;
+};
+export type { AvatarState } from 'baseui/avatar';

package/avatar/types.js

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

package/avatar/useAvatarColor.d.ts

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

package/avatar/useAvatarColor.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAvatarColor = void 0;
+var react_1 = require("react");
+var constants_1 = require("./constants");
+var getLinearGradientColor = function (index) {
+    var gradientColor = constants_1.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() * constants_1.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) % (constants_1.AVATAR_GRADIENT_COLORS.length - 1));
+};
+var useAvatarColor = function (name) {
+    return (0, react_1.useMemo)(function () { return (name ? getColorForName(name) : getRandomBgColor()); }, [name]);
+};
+exports.useAvatarColor = useAvatarColor;

package/avatar/utils/cleanupDisplayName.d.ts

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

package/avatar/utils/cleanupDisplayName.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cleanupDisplayName = void 0;
+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;
+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;
+};
+exports.cleanupDisplayName = cleanupDisplayName;

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var useOverrides_1 = require("../overrides/useOverrides");
+var styled_component_1 = require("./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 = (0, tslib_1.__read)((0, useOverrides_1.useOverrides)(overrides.Root, styled_component_1.StyledRoot), 2), Root = _h[0], rootProps = _h[1];
+    var _j = (0, tslib_1.__read)((0, useOverrides_1.useOverrides)(overrides.Anchor, styled_component_1.StyledAnchor), 2), Anchor = _j[0], anchorProps = _j[1];
+    var sharedProps = {
+        $size: size,
+        $intent: intent,
+        $content: content,
+        $horizontalPosition: horizontalPosition,
+        $verticalPosition: verticalPosition,
+        $overlap: overlap,
+    };
+    return ((0, jsx_runtime_1.jsxs)(Root, (0, tslib_1.__assign)({ "data-spaceweb": "badge" }, rootProps, sharedProps, { children: [children, (0, jsx_runtime_1.jsx)(Anchor, (0, tslib_1.__assign)({}, anchorProps, sharedProps, { children: typeof content === 'function' ? content(sharedProps) : content }), void 0)] }), void 0));
+};
+exports.default = Badge;

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

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledRoot = exports.StyledAnchor = exports.Badge = void 0;
+var badge_1 = require("./badge");
+Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return __importDefault(badge_1).default; } });
+var styled_component_1 = require("./styled-component");
+Object.defineProperty(exports, "StyledAnchor", { enumerable: true, get: function () { return styled_component_1.StyledAnchor; } });
+Object.defineProperty(exports, "StyledRoot", { enumerable: true, get: function () { return styled_component_1.StyledRoot; } });

package/badge/package.json

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

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

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledAnchor = exports.StyledRoot = void 0;
+var tslib_1 = require("tslib");
+var style_1 = require("../style");
+var longHandHelpers_1 = require("../helpers/longHandHelpers");
+exports.StyledRoot = (0, style_1.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 (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__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 };
+};
+exports.StyledAnchor = (0, style_1.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 (0, tslib_1.__assign)({ minWidth: sizeMap[$size], height: sizeMap[$size] }, (0, longHandHelpers_1.borderRadius)('50rem'));
+}, padding);

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

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

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

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BaseButton = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var useFocusVisible_1 = require("../hooks/useFocusVisible");
+var styled_components_1 = require("./styled-components");
+var isNotAllyElement = function (props) { return props.$as && !(props.$as === 'button' || props.$as === 'a'); };
+exports.BaseButton = (0, react_1.forwardRef)(function (props, ref) {
+    var baseButtonProps = {};
+    var focusProps = (0, useFocusVisible_1.useFocusVisible)(props);
+    var handleKeyPress = (0, react_1.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 (0, jsx_runtime_1.jsx)(styled_components_1.StyledBaseButton, (0, tslib_1.__assign)({}, props, baseButtonProps, focusProps, { ref: ref }), void 0);
+});
+exports.BaseButton.displayName = 'BaseButton';

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buttonResetStyles = exports.StyledBaseButton = exports.BaseButton = void 0;
+var BaseButton_1 = require("./BaseButton");
+Object.defineProperty(exports, "BaseButton", { enumerable: true, get: function () { return BaseButton_1.BaseButton; } });
+var styled_components_1 = require("./styled-components");
+Object.defineProperty(exports, "StyledBaseButton", { enumerable: true, get: function () { return styled_components_1.StyledBaseButton; } });
+Object.defineProperty(exports, "buttonResetStyles", { enumerable: true, get: function () { return styled_components_1.buttonResetStyles; } });

package/base-button/package.json

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

package/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;