@cube-dev/ui-kit 0.9.6 → 0.9.7

package/cjs/components/actions/Action.js

@@ -0,0 +1,136 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Action = exports.performClickHandler = exports.parseTo = exports.openLink = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const list_1 = require("../../styles/list");
+const Base_1 = require("../Base");
+const interactions_1 = require("@react-aria/interactions");
+const interactions_2 = require("../../utils/interactions");
+const button_1 = require("@react-aria/button");
+const react_2 = require("../../utils/react");
+const styles_1 = require("../../utils/styles");
+const filterBaseProps_1 = require("../../utils/filterBaseProps");
+const provider_1 = require("../../provider");
+const utils_1 = require("@react-spectrum/utils");
+const FILTER_OPTIONS = { propNames: new Set(['onMouseEnter', 'onMouseLeave']) };
+/**
+ * Helper to open link.
+ * @param {String} href
+ * @param {String|Boolean} [target]
+ */
+function openLink(href, target) {
+    const link = document.createElement('a');
+    link.href = href;
+    if (target) {
+        link.target = target === true ? '_blank' : target;
+    }
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+}
+exports.openLink = openLink;
+function parseTo(to) {
+    const newTab = to && typeof to === 'string' && to.startsWith('!');
+    const nativeRoute = to && typeof to === 'string' && to.startsWith('@');
+    const href = to && typeof to === 'string'
+        ? newTab || nativeRoute
+            ? to.slice(1)
+            : to
+        : undefined;
+    return {
+        newTab,
+        nativeRoute,
+        href,
+    };
+}
+exports.parseTo = parseTo;
+function performClickHandler(evt, router, to, onPress) {
+    const { newTab, nativeRoute, href } = parseTo(to);
+    onPress === null || onPress === void 0 ? void 0 : onPress(evt);
+    if (!to)
+        return;
+    if (evt.shiftKey || evt.metaKey || newTab) {
+        openLink(href, true);
+        return;
+    }
+    if (nativeRoute) {
+        openLink(href || window.location.href);
+    }
+    else if (href && href.startsWith('#')) {
+        const id = href.slice(1);
+        const element = document.getElementById(id);
+        if (element) {
+            element.scrollIntoView({
+                behavior: 'smooth',
+                block: 'start',
+                inline: 'nearest',
+            });
+            return;
+        }
+    }
+    if (router) {
+        router.push(href);
+    }
+    else if (href) {
+        window.location.href = href;
+    }
+}
+exports.performClickHandler = performClickHandler;
+const DEFAULT_STYLES = {
+    reset: 'button',
+    position: 'relative',
+    margin: 0,
+    fontFamily: 'var(--font)',
+    fontWeight: 'inherit',
+    border: 0,
+    padding: 0,
+    outline: {
+        '': '#purple-03.0',
+        focused: '#purple-03',
+    },
+    transition: 'theme',
+    cursor: 'pointer',
+};
+const STYLE_PROPS = [...list_1.CONTAINER_STYLES, ...list_1.TEXT_STYLES];
+exports.Action = (0, react_1.forwardRef)(({ to, as, htmlType, label, theme, css, mods, onPress, ...props }, ref) => {
+    as = to ? 'a' : as || 'button';
+    const router = (0, react_1.useContext)(provider_1.UIKitContext).router;
+    const isDisabled = props.isDisabled;
+    const { newTab, href } = parseTo(to);
+    const target = newTab ? '_blank' : undefined;
+    const domRef = (0, utils_1.useFocusableRef)(ref);
+    const styles = (0, styles_1.extractStyles)(props, STYLE_PROPS, DEFAULT_STYLES);
+    const customOnPress = (0, react_1.useCallback)((evt) => {
+        performClickHandler(evt, router, to, onPress);
+    }, [router, to, onPress]);
+    let { buttonProps, isPressed } = (0, button_1.useButton)({
+        ...props,
+        onPress: customOnPress,
+    }, domRef);
+    let { hoverProps, isHovered } = (0, interactions_1.useHover)({ isDisabled });
+    let { focusProps, isFocused } = (0, interactions_2.useFocus)({ isDisabled }, true);
+    const customProps = to
+        ? {
+            onClick(evt) {
+                evt.preventDefault();
+            },
+        }
+        : {};
+    return ((0, jsx_runtime_1.jsx)(Base_1.Base, { mods: {
+            hovered: isHovered && !isDisabled,
+            pressed: isPressed && !isDisabled,
+            focused: isFocused && !isDisabled,
+            disabled: isDisabled,
+            ...mods,
+        }, "aria-label": label, "data-theme": theme, ...(0, react_2.mergeProps)(buttonProps, hoverProps, focusProps, customProps, (0, filterBaseProps_1.filterBaseProps)(props, FILTER_OPTIONS)), type: htmlType || 'button', rel: as === 'a' && newTab ? 'rel="noopener noreferrer"' : undefined, ref: domRef, as: as, isDisabled: isDisabled, styles: styles, target: target, href: href, css: css }, void 0));
+});
+
+        

package/cjs/components/actions/Button/Button.js

@@ -0,0 +1,297 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = exports.provideStyles = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Action_1 = require("../Action");
+const icons_1 = require("@ant-design/icons");
+const StylesProvider_1 = require("../../../providers/StylesProvider");
+const warnings_1 = require("../../../utils/warnings");
+function provideStyles({ size, type, theme, isLoading, icon, children, label, }) {
+    children = children || icon ? children : label;
+    return {
+        ...STYLES_BY_SIZE[size || 'default'],
+        ...DEFAULT_STYLES,
+        ...(theme === 'danger' ? DANGER_STYLES_BY_TYPE : DEFAULT_STYLES_BY_TYPE)[type || 'default'],
+        ...((isLoading || icon) && !children
+            ? {
+                padding: '0',
+                width: '(2.5x + 1lh)',
+                height: '(2.5x + 1lh)',
+            }
+            : null),
+    };
+}
+exports.provideStyles = provideStyles;
+const DEFAULT_STYLES_BY_TYPE = {
+    primary: {
+        border: {
+            '': '#clear',
+            pressed: '#purple-text',
+        },
+        fill: {
+            hovered: '#purple-text',
+            'pressed | !hovered': '#purple',
+            '[disabled]': '#dark.04',
+        },
+        color: {
+            '': '#white',
+            '[disabled]': '#dark.30',
+        },
+    },
+    default: {
+        border: {
+            '': '#clear',
+            pressed: '#purple.30',
+        },
+        fill: {
+            '': '#purple.10',
+            hovered: '#purple.16',
+            pressed: '#purple.10',
+            '[disabled]': '#dark.04',
+        },
+        color: {
+            '': '#purple',
+            '[disabled]': '#dark.30',
+        },
+    },
+    clear: {
+        border: {
+            '': '#clear',
+            pressed: '#purple-text.10',
+        },
+        fill: {
+            '': '#purple.0',
+            hovered: '#purple.16',
+            pressed: '#purple.10',
+            '[disabled]': '#purple.0',
+        },
+        color: {
+            '': '#purple-text',
+            '[disabled]': '#dark.30',
+        },
+    },
+    outline: {
+        border: {
+            '': '#purple.30',
+            pressed: '#purple-text.10',
+            '[disabled]': '#dark.12',
+        },
+        fill: {
+            '': '#purple.0',
+            hovered: '#purple.16',
+            pressed: '#purple.10',
+            '[disabled]': '#purple.0',
+        },
+        color: {
+            '': '#purple-text',
+            '[disabled]': '#dark.30',
+        },
+    },
+    link: {
+        fontWeight: 500,
+        padding: '0',
+        radius: {
+            '': '0',
+            focused: true,
+        },
+        fill: '#clear',
+        color: {
+            '': '#purple-text',
+            pressed: '#purple',
+            '[disabled]': '#dark.30',
+        },
+        shadow: {
+            '': '0 @border-width 0 0 #purple-03.20',
+            focused: '0 0 0 @outline-width #purple-03.20',
+            'pressed | hovered | [disabled]': '0 0 0 0 #purple.20',
+        },
+    },
+    neutral: {
+        border: '0',
+        fill: {
+            '': '#dark.0',
+            hovered: '#dark.04',
+            '[disabled]': '#dark.04',
+        },
+        color: {
+            '': '#dark.75',
+            hovered: '#dark.75',
+            pressed: '#purple',
+            '[disabled]': '#dark.30',
+        },
+        padding: '(1x - 1px) (1.5x - 1px)',
+        height: 'min (2x + 1lh)',
+    },
+};
+const DANGER_STYLES_BY_TYPE = {
+    primary: {
+        border: {
+            '': '#clear',
+            pressed: '#danger-text',
+        },
+        fill: {
+            hovered: '#danger-text',
+            'pressed | !hovered': '#danger',
+            '[disabled]': '#dark.04',
+        },
+        color: {
+            '': '#white',
+            '[disabled]': '#dark.30',
+        },
+    },
+    default: {
+        border: {
+            '': '#clear',
+            pressed: '#danger.30',
+        },
+        fill: {
+            '': '#danger.05',
+            hovered: '#danger.1',
+            pressed: '#danger.05',
+            '[disabled]': '#dark.04',
+        },
+        color: {
+            '': '#danger',
+            '[disabled]': '#dark.30',
+        },
+    },
+    clear: {
+        border: {
+            '': '#clear',
+            pressed: '#danger-text.10',
+        },
+        fill: {
+            '': '#danger.0',
+            hovered: '#danger.1',
+            pressed: '#danger.05',
+            '[disabled]': '#danger.0',
+        },
+        color: {
+            '': '#danger-text',
+            '[disabled]': '#dark.30',
+        },
+    },
+    outline: {
+        border: {
+            '': '#danger.30',
+            pressed: '#danger-text.10',
+            '[disabled]': '#dark.04',
+        },
+        fill: {
+            '': '#danger.0',
+            hovered: '#danger.1',
+            pressed: '#danger.05',
+            '[disabled]': '#danger.0',
+        },
+        color: {
+            '': '#danger-text',
+            '[disabled]': '#dark.30',
+        },
+    },
+    link: {
+        ...DEFAULT_STYLES_BY_TYPE.link,
+        color: {
+            '': '#danger-text',
+            pressed: '#danger',
+            '[disabled]': '#dark.30',
+        },
+        shadow: {
+            '': '0 @border-width 0 0 #danger.20',
+            focused: '0 0 0 @outline-width #danger.20',
+            'pressed | hovered | [disabled]': '0 0 0 0 #danger.20',
+        },
+    },
+    neutral: {
+        border: '0',
+        fill: {
+            '': '#dark.0',
+            hovered: '#dark.04',
+            '[disabled]': '#dark.04',
+        },
+        color: {
+            '': '#dark.75',
+            hovered: '#dark.75',
+            pressed: '#danger',
+            '[disabled]': '#dark.30',
+        },
+        textAlign: 'left',
+        padding: '(1x - 1px) (1.5x - 1px)',
+        height: 'min (2x + 1lh)',
+    },
+};
+const STYLES_BY_SIZE = {
+    small: {
+        padding: '(.75x - 1px) (1.5x - 1px)',
+    },
+    default: {
+        padding: '(1.25x - 1px) (2x - 1px)',
+    },
+};
+const DEFAULT_STYLES = {
+    display: 'inline-grid',
+    placeItems: 'center stretch',
+    placeContent: 'center',
+    gap: '1x',
+    flow: 'column',
+    radius: true,
+    fontWeight: 500,
+    preset: 'default',
+    textDecoration: 'none',
+    transition: 'theme',
+    whiteSpace: 'nowrap',
+    '& .anticon.anticon-loading': {
+        transition: 'display .2s steps(1, start), margin .2s linear, opacity .2s linear',
+        // lineHeight: 0,
+    },
+};
+exports.Button = (0, react_1.forwardRef)((allProps, ref) => {
+    let { type, size, label, styles, children, theme, css, icon, mods, ...props } = allProps;
+    const isDisabled = props.isDisabled;
+    const isLoading = props.isLoading;
+    const isSelected = props.isSelected;
+    const propsForStyles = {
+        ...props,
+        label,
+        isLoading,
+        isDisabled,
+        theme,
+        size,
+        type,
+        icon,
+        children,
+    };
+    const contextStyles = (0, StylesProvider_1.useContextStyles)('Button', propsForStyles);
+    if (!children) {
+        if (icon) {
+            if (!label) {
+                (0, warnings_1.accessibilityWarning)('If you provide `icon` property for a Button and do not provide any children then you should specify the `label` property to make sure the Button element stays accessible.');
+            }
+        }
+        else {
+            if (!label) {
+                (0, warnings_1.accessibilityWarning)('If you provide no children for a Button then you should specify the `label` property to make sure the Button element stays accessible.');
+            }
+        }
+    }
+    children = children || icon ? children : label;
+    styles = {
+        ...provideStyles(propsForStyles),
+        ...contextStyles,
+        ...styles,
+    };
+    if (isLoading && !children && styles) {
+        styles.fontSize = '1em';
+        styles.lineHeight = '1em';
+    }
+    return ((0, jsx_runtime_1.jsxs)(Action_1.Action, { as: props.to ? 'a' : undefined, css: css, ...props, ref: ref, isDisabled: isLoading || isDisabled, theme: theme, "data-type": type, "data-is-loading": isLoading ? '' : undefined, "data-is-selected": isSelected ? '' : undefined, "data-size": size, mods: mods, styles: styles, label: label, children: [icon || isLoading ? !isLoading ? icon : (0, jsx_runtime_1.jsx)(icons_1.LoadingOutlined, {}, void 0) : null, children] }, void 0));
+});
+
+        

package/cjs/components/actions/Button/Submit.js

@@ -0,0 +1,29 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Submit = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Button_1 = require("./Button");
+const provider_1 = require("../../../provider");
+const Form_1 = require("../../forms/Form/Form");
+function Submit(props, ref) {
+    props = (0, provider_1.useProviderProps)(props);
+    props = (0, Form_1.useFormProps)(props);
+    const { form, ...otherProps } = props;
+    const formData = form.getFieldsValue();
+    const isValid = !Object.keys(formData).find((name) => {
+        return form.isFieldInvalid(name);
+    });
+    return ((0, jsx_runtime_1.jsx)(Button_1.Button, { ref: ref, type: "primary", htmlType: "submit", isLoading: form.isSubmitting, isDisabled: !isValid, ...otherProps }, void 0));
+}
+const _Submit = (0, react_1.forwardRef)(Submit);
+exports.Submit = _Submit;
+
+        

package/cjs/components/actions/Button/index.js

@@ -0,0 +1,23 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Button"), exports);
+__exportStar(require("./Submit"), exports);
+
+        

package/cjs/components/actions/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,28 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonGroup = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("../../../utils/react");
+const Space_1 = require("../../layout/Space");
+const StylesProvider_1 = require("../../../providers/StylesProvider");
+exports.ButtonGroup = (0, react_1.forwardRef)((props, ref) => {
+    let { styles, ...otherProps } = (0, react_2.useSlotProps)(props, 'buttonGroup');
+    const contextStyles = (0, StylesProvider_1.useContextStyles)('ButtonGroup', otherProps);
+    styles = styles
+        ? {
+            ...contextStyles,
+            ...styles,
+        }
+        : contextStyles;
+    return (0, jsx_runtime_1.jsx)(Space_1.Space, { gridArea: "buttonGroup", styles: styles, ref: ref, ...props }, void 0);
+});
+
+        

package/cjs/components/actions/index.js

@@ -0,0 +1,29 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonGroup = exports.Button = void 0;
+const Button_1 = require("./Button");
+const ButtonGroup_1 = require("./ButtonGroup/ButtonGroup");
+Object.defineProperty(exports, "ButtonGroup", { enumerable: true, get: function () { return ButtonGroup_1.ButtonGroup; } });
+const Button = Object.assign(Button_1.Button, { Group: ButtonGroup_1.ButtonGroup });
+exports.Button = Button;
+__exportStar(require("./Button"), exports);
+__exportStar(require("./Action"), exports);
+
+        

package/cjs/components/content/ActiveZone/ActiveZone.js

@@ -0,0 +1,44 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActiveZone = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const interactions_1 = require("@react-aria/interactions");
+const react_2 = require("../../../utils/react");
+const list_1 = require("../../../styles/list");
+const Base_1 = require("../../Base");
+const styles_1 = require("../../../utils/styles");
+const filterBaseProps_1 = require("../../../utils/filterBaseProps");
+const utils_1 = require("@react-spectrum/utils");
+const focus_1 = require("@react-aria/focus");
+const interactions_2 = require("../../../utils/interactions");
+const DEFAULT_STYLES = {
+    display: 'inline-block',
+    position: 'relative',
+    opacity: {
+        '': 1,
+        '[disabled]': 0.4,
+    },
+    transition: 'theme',
+};
+const STYLE_PROPS = [...list_1.CONTAINER_STYLES, ...list_1.TEXT_STYLES];
+const ActiveZone = ({ as, label, onClick, ...props }, ref) => {
+    const isDisabled = props.isDisabled;
+    const styles = (0, styles_1.extractStyles)(props, STYLE_PROPS, DEFAULT_STYLES);
+    const domRef = (0, utils_1.useFocusableRef)(ref);
+    let { hoverProps, isHovered } = (0, interactions_1.useHover)({ isDisabled });
+    let { focusProps, isFocused } = (0, interactions_2.useFocus)({ isDisabled });
+    let { focusableProps } = (0, focus_1.useFocusable)(props, domRef);
+    return ((0, jsx_runtime_1.jsx)(Base_1.Base, { "data-is-hovered": isHovered && !isDisabled ? '' : null, "data-is-focused": isFocused && !isDisabled ? '' : null, "data-is-disabled": isDisabled || null, "aria-label": label, ...(0, react_2.mergeProps)(hoverProps, focusProps, focusableProps, { onClick }, (0, filterBaseProps_1.filterBaseProps)(props, { eventProps: true })), tabIndex: props.excludeFromTabOrder || isDisabled ? -1 : 0, as: as, styles: styles, ref: domRef }, void 0));
+};
+const _ActiveZone = (0, react_1.forwardRef)(ActiveZone);
+exports.ActiveZone = _ActiveZone;
+
+        

package/cjs/components/content/Avatar/Avatar.js

@@ -0,0 +1,39 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Avatar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Base_1 = require("../../Base");
+const list_1 = require("../../../styles/list");
+const styles_1 = require("../../../utils/styles");
+const filterBaseProps_1 = require("../../../utils/filterBaseProps");
+const DEFAULT_STYLES = {
+    display: 'grid',
+    gap: '1x',
+    flow: 'row',
+    fill: '#purple',
+    color: '#white',
+    radius: 'round',
+    placeContent: 'center',
+    width: '@avatar-size @avatar-size @avatar-size',
+    height: '@avatar-size @avatar-size @avatar-size',
+    fontSize: 'calc(@avatar-size / 2)',
+    lineHeight: 'calc(@avatar-size / 2)',
+    fontWeight: 500,
+};
+exports.Avatar = (0, react_1.forwardRef)(({ size = '4x', icon, children, ...props }, ref) => {
+    const styles = (0, styles_1.extractStyles)(props, list_1.CONTAINER_STYLES, {
+        ...DEFAULT_STYLES,
+        '--avatar-size': size,
+    });
+    return ((0, jsx_runtime_1.jsxs)(Base_1.Base, { ...(0, filterBaseProps_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref, "data-theme": "special", children: [icon, children] }, void 0));
+});
+
+        

package/cjs/components/content/Badge/Badge.js

@@ -0,0 +1,58 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Badge = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const themes_1 = __importDefault(require("../../../data/themes"));
+const list_1 = require("../../../styles/list");
+const styles_1 = require("../../../utils/styles");
+const filterBaseProps_1 = require("../../../utils/filterBaseProps");
+const styled_1 = require("../../../styled");
+const RawBadge = (0, styled_1.styled)({
+    name: 'Badge',
+    props: { role: 'region' },
+    styles: {
+        display: 'inline-flex',
+        placeContent: 'center',
+        placeItems: 'center',
+        padding: {
+            '': '0',
+            single: '0 1px',
+            multiple: '0 2px',
+        },
+        radius: 'round',
+        preset: 'tag',
+        width: 'min 16px',
+        height: '16px',
+        textAlign: 'center',
+        fontWeight: 600,
+        color: '#white',
+        fill: {
+            '': '#purple',
+            ...Object.keys(themes_1.default).reduce((map, type) => {
+                map[`[data-type="${type}"]`] = themes_1.default[type].color;
+                return map;
+            }, {}),
+        },
+    },
+});
+exports.Badge = (0, react_1.forwardRef)((allProps, ref) => {
+    let { type, children, ...props } = allProps;
+    const styles = (0, styles_1.extractStyles)(props, list_1.CONTAINER_STYLES);
+    return ((0, jsx_runtime_1.jsx)(RawBadge, { ...(0, filterBaseProps_1.filterBaseProps)(props, { eventProps: true }), "data-type": type, mods: {
+            single: typeof children === 'string' && children.length === 1,
+            multiple: typeof children === 'string' && children.length === 2,
+        }, styles: styles, ref: ref, children: children }, void 0));
+});
+
+