reshaped 2.11.12 → 3.0.1

package/components/Accordion/AccordionControlled.js

@@ -1,23 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import { classNames } from "../../utilities/helpers.js";
-import useElementId from "../../hooks/useElementId.js";
-import AccordionContext from "./Accordion.context.js";
-const AccordionControlled = (props) => {
-    const { children, onToggle, active, iconPosition, iconSize, className, attributes } = props;
-    const rootClassNames = classNames(className);
-    const id = useElementId();
-    const value = React.useMemo(() => ({
-        triggerId: `${id}-trigger`,
-        contentId: `${id}-content`,
-        active,
-        onToggle,
-        iconPosition,
-        iconSize,
-    }), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [active]);
-    return (_jsx("div", Object.assign({}, attributes, { className: rootClassNames, children: _jsx(AccordionContext.Provider, { value: value, children: children }) })));
-};
-export default AccordionControlled;

package/components/Accordion/AccordionTrigger.js

@@ -1,24 +0,0 @@
-"use client";
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import { classNames } from "../../utilities/helpers.js";
-import Actionable from "../Actionable/index.js";
-import View from "../View/index.js";
-import Icon from "../Icon/index.js";
-import IconChevronDown from "../../icons/ChevronDown.js";
-import AccordionContext from "./Accordion.context.js";
-import s from "./Accordion.module.css";
-const AccordionTrigger = (props) => {
-    const { children } = props;
-    const { active, onToggle, triggerId, contentId, iconPosition = "end", iconSize, } = React.useContext(AccordionContext);
-    const iconClassNames = classNames(s.icon, active && s["icon--active"]);
-    const handleClick = () => {
-        onToggle === null || onToggle === void 0 ? void 0 : onToggle(!active);
-    };
-    const attributes = { "aria-expanded": active, "aria-controls": contentId, id: triggerId };
-    if (typeof children === "function") {
-        return _jsx(_Fragment, { children: children(Object.assign(Object.assign({}, attributes), { onClick: handleClick }), { active }) });
-    }
-    return (_jsx(Actionable, { onClick: handleClick, fullWidth: true, attributes: attributes, children: _jsxs(View, { gap: 2, direction: iconPosition === "start" ? "row-reverse" : "row", align: "center", children: [_jsx(View.Item, { grow: true, children: children }), _jsx(Icon, { size: iconSize || 4, svg: IconChevronDown, className: iconClassNames })] }) }));
-};
-export default AccordionTrigger;

package/components/Accordion/AccordionUncontrolled.js

@@ -1,25 +0,0 @@
-"use client";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import AccordionControlled from "./AccordionControlled.js";
-const AccordionUncontrolled = (props) => {
-    const { defaultActive, onToggle } = props, controlledProps = __rest(props, ["defaultActive", "onToggle"]);
-    const [active, setActive] = React.useState(defaultActive || false);
-    const handleToggle = (active) => {
-        setActive(active);
-        onToggle === null || onToggle === void 0 ? void 0 : onToggle(active);
-    };
-    return _jsx(AccordionControlled, Object.assign({}, controlledProps, { onToggle: handleToggle, active: active }));
-};
-export default AccordionUncontrolled;

package/components/ActionBar/ActionBar.types.d.ts

@@ -1,10 +0,0 @@
-import type React from "react";
-import type { ViewProps } from "../View";
-import type * as G from "../../types/global";
-export type Props = Pick<ViewProps, "paddingBlock" | "paddingInline" | "padding"> & {
-    position?: "top" | "bottom";
-    elevated?: boolean;
-    children?: React.ReactNode;
-    className?: G.ClassName;
-    attributes?: G.Attributes<"div", Props>;
-};

package/components/Actionable/Actionable.js

@@ -1,55 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { classNames } from "../../utilities/helpers.js";
-import * as keys from "../../constants/keys.js";
-import s from "./Actionable.module.css";
-const Actionable = forwardRef((props, ref) => {
-    const { children, href, onClick, type, disabled, insetFocus, borderRadius, as, fullWidth, className, attributes, } = props;
-    const rootClassNames = classNames(s.root, className, disabled && s["--disabled"], borderRadius && s[`--radius-${borderRadius}`], insetFocus && s["--inset"], fullWidth && s["--full-width"]);
-    const rootAttributes = Object.assign({}, attributes);
-    const hasClickHandler = onClick || (attributes === null || attributes === void 0 ? void 0 : attributes.onClick);
-    const hasFocusHandler = (attributes === null || attributes === void 0 ? void 0 : attributes.onFocus) || (attributes === null || attributes === void 0 ? void 0 : attributes.onBlur);
-    const isLink = Boolean(href || (attributes === null || attributes === void 0 ? void 0 : attributes.href));
-    const isButton = Boolean(hasClickHandler || hasFocusHandler || type);
-    const renderedAsButton = !isLink && isButton && (!as || as === "button");
-    let TagName;
-    if (isLink) {
-        TagName = "a";
-        rootAttributes.href = disabled ? undefined : href || (attributes === null || attributes === void 0 ? void 0 : attributes.href);
-    }
-    else if (renderedAsButton) {
-        TagName = "button";
-        rootAttributes.type = type || (attributes === null || attributes === void 0 ? void 0 : attributes.type) || "button";
-        rootAttributes.disabled = disabled || (attributes === null || attributes === void 0 ? void 0 : attributes.disabled);
-    }
-    else if (isButton) {
-        const isFocusable = as === "label";
-        const simulateButton = !isFocusable || hasClickHandler || hasFocusHandler;
-        TagName = as || "span";
-        rootAttributes.role = simulateButton ? "button" : undefined;
-        rootAttributes.tabIndex = simulateButton ? 0 : undefined;
-    }
-    else {
-        TagName = as || "span";
-    }
-    const handlePress = (event) => {
-        var _a;
-        if (disabled)
-            return;
-        onClick === null || onClick === void 0 ? void 0 : onClick(event);
-        (_a = attributes === null || attributes === void 0 ? void 0 : attributes.onClick) === null || _a === void 0 ? void 0 : _a.call(attributes, event);
-    };
-    const handleKeyDown = (event) => {
-        const isSpace = event.key === keys.SPACE;
-        const isEnter = event.key === keys.ENTER;
-        if (!isSpace && !isEnter)
-            return;
-        if (rootAttributes.role !== "button")
-            return;
-        event.preventDefault();
-        handlePress(event);
-    };
-    return (_jsx(TagName, Object.assign({ ref: ref }, rootAttributes, { className: rootClassNames, onClick: handlePress, onKeyDown: handleKeyDown, children: children })));
-});
-export default Actionable;

package/components/Actionable/Actionable.types.d.ts

@@ -1,18 +0,0 @@
-import type React from "react";
-import type * as G from "../../types/global";
-export type Props = {
-    children?: React.ReactNode;
-    onClick?: (e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
-    href?: string;
-    type?: React.ButtonHTMLAttributes<HTMLButtonElement>["type"];
-    disabled?: boolean;
-    fullWidth?: boolean;
-    insetFocus?: boolean;
-    borderRadius?: "inherit";
-    as?: keyof JSX.IntrinsicElements;
-    className?: G.ClassName;
-    attributes?: Omit<G.Attributes<"button">, "ref"> & Omit<JSX.IntrinsicElements["a"], keyof G.Attributes<"button">> & {
-        ref?: React.RefObject<HTMLButtonElement | HTMLAnchorElement>;
-    };
-};
-export type Ref = React.Ref<HTMLButtonElement | HTMLAnchorElement>;

package/components/Alert/Alert.js

@@ -1,21 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import Icon from "../Icon/index.js";
-import View from "../View/index.js";
-import Text from "../Text/index.js";
-const Alert = (props) => {
-    const { title, children, icon, actionsSlot, color = "neutral", inline, bleed, className, attributes, } = props;
-    const isNeutral = color === "neutral";
-    const renderContent = () => {
-        if (inline) {
-            return (_jsxs(_Fragment, { children: [title && (_jsx(Text, { variant: "body-3", weight: "medium", as: "span", children: title })), title && children && " ", children && (_jsx(Text, { variant: "body-3", as: "span", children: children }))] }));
-        }
-        return (_jsxs(View, { gap: 1, children: [title && (_jsx(Text, { variant: "body-3", weight: "medium", children: title })), children && _jsx(Text, { variant: "body-3", children: children })] }));
-    };
-    const applyActions = (content) => {
-        if (!actionsSlot)
-            return content;
-        return (_jsxs(View, { gap: inline ? 4 : 2, direction: inline ? "row" : "column", children: [inline ? _jsx(View.Item, { grow: true, children: content }) : content, actionsSlot && (_jsx(Text, { variant: "body-3", weight: "medium", children: _jsx(View, { direction: "row", gap: 3, children: actionsSlot }) }))] }));
-    };
-    return (_jsx(View, { direction: "row", gap: 3, padding: 4, bleed: bleed, borderRadius: "medium", borderColor: `${color}-faded`, backgroundColor: `${color}-faded`, className: className, attributes: Object.assign(Object.assign({}, attributes), { role: color === "critical" ? "alert" : "status" }), children: icon ? (_jsxs(_Fragment, { children: [_jsx(Icon, { svg: icon, size: 5, color: isNeutral ? "primary" : color }), _jsx(View.Item, { grow: true, children: applyActions(renderContent()) })] })) : (applyActions(renderContent())) }));
-};
-export default Alert;

package/components/Alert/Alert.types.d.ts

@@ -1,14 +0,0 @@
-import type React from "react";
-import type { IconProps } from "../Icon";
-import type * as G from "../../types/global";
-export type Props = {
-    icon?: IconProps["svg"];
-    title?: React.ReactNode;
-    children?: React.ReactNode;
-    actionsSlot?: React.ReactNode;
-    color?: "neutral" | "critical" | "warning" | "positive" | "primary";
-    inline?: boolean;
-    bleed?: G.Responsive<number>;
-    className?: G.ClassName;
-    attributes?: G.Attributes<"div", Props>;
-};

package/components/Alert/tests/Alert.stories.js

@@ -1,95 +0,0 @@
-import { Example } from "../../../utilities/storybook/index.js";
-import Alert from "../index.js";
-import Link from "../../Link/index.js";
-import IconZap from "../../../icons/Zap.js";
-export default {
-    title: "Components/Alert",
-    component: Alert,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/alert",
-        },
-    },
-};
-export const color = () => (<Example>
-		<Example.Item title="color: neutral">
-			<Alert title="Alert title goes here" icon={IconZap} actionsSlot={<>
-						<Link variant="plain">View now</Link>
-						<Link variant="plain">Dismiss</Link>
-					</>}>
-				Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
-				been the industry's standard
-			</Alert>
-		</Example.Item>
-
-		<Example.Item title="color: primary">
-			<Alert color="primary" title="Alert title goes here" icon={IconZap} actionsSlot={<>
-						<Link variant="plain">View now</Link>
-						<Link variant="plain">Dismiss</Link>
-					</>}>
-				Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
-				been the industry's standard
-			</Alert>
-		</Example.Item>
-
-		<Example.Item title="color: critical">
-			<Alert color="critical" title="Alert title goes here" icon={IconZap} actionsSlot={<>
-						<Link variant="plain" color="critical">
-							View now
-						</Link>
-						<Link variant="plain" color="critical">
-							Dismiss
-						</Link>
-					</>}>
-				Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
-				been the industry's standard
-			</Alert>
-		</Example.Item>
-
-		<Example.Item title="color: positive">
-			<Alert color="positive" title="Alert title goes here" icon={IconZap} actionsSlot={<>
-						<Link variant="plain" color="positive">
-							View now
-						</Link>
-						<Link variant="plain" color="positive">
-							Dismiss
-						</Link>
-					</>}>
-				Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
-				been the industry's standard
-			</Alert>
-		</Example.Item>
-
-		<Example.Item title="color: warning">
-			<Alert color="warning" title="Alert title goes here" icon={IconZap} actionsSlot={<>
-						<Link variant="plain">View now</Link>
-						<Link variant="plain">Dismiss</Link>
-					</>}>
-				Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
-				been the industry's standard
-			</Alert>
-		</Example.Item>
-	</Example>);
-export const inline = () => (<Example>
-		<Example.Item title="inline: true">
-			<Alert inline title="Alert title goes here" icon={IconZap} actionsSlot={<>
-						<Link variant="plain">View now</Link>
-						<Link variant="plain">Dismiss</Link>
-					</>}>
-				Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
-				been the industry's standard
-			</Alert>
-		</Example.Item>
-	</Example>);
-export const bleed = () => (<Example>
-		<Example.Item title="bleed: 4">
-			<Alert bleed={4} icon={IconZap}>
-				Content
-			</Alert>
-		</Example.Item>
-		<Example.Item title={["responsive bleed", "[s] 4", "[m+] 0"]}>
-			<Alert bleed={{ s: 4, m: 0 }} icon={IconZap}>
-				Content
-			</Alert>
-		</Example.Item>
-	</Example>);

package/components/Autocomplete/Autocomplete.js

@@ -1,78 +0,0 @@
-"use client";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import TextField from "../TextField/index.js";
-import DropdownMenu from "../DropdownMenu/index.js";
-import useHotkeys from "../../hooks/useHotkeys.js";
-import { getActiveElement } from "../../utilities/a11y/focus.js";
-import * as keys from "../../constants/keys.js";
-const AutocompleteContext = React.createContext({});
-const Autocomplete = (props) => {
-    const { children, onChange, onItemSelect, name } = props, textFieldProps = __rest(props, ["children", "onChange", "onItemSelect", "name"]);
-    const inputRef = React.useRef(null);
-    const [active, setActive] = React.useState(false);
-    // Prevent dropdown from opening on selecting an item
-    const [locked, setLocked] = React.useState(false);
-    const hasChildren = !!React.Children.toArray(children).filter(Boolean).length;
-    const handleOpen = React.useCallback(() => setActive(true), []);
-    const handleClose = () => setActive(false);
-    useHotkeys({
-        [`${keys.UP},${keys.DOWN}`]: () => handleOpen(),
-        [keys.ENTER]: () => {
-            const el = getActiveElement();
-            el === null || el === void 0 ? void 0 : el.click();
-        },
-    }, [handleOpen], { ref: inputRef, preventDefault: true });
-    const handleChange = (args) => {
-        onChange === null || onChange === void 0 ? void 0 : onChange(args);
-        setLocked(false);
-        handleOpen();
-    };
-    const handleItemClick = (args) => {
-        onChange === null || onChange === void 0 ? void 0 : onChange({ value: args.value, name });
-        onItemSelect === null || onItemSelect === void 0 ? void 0 : onItemSelect({ value: args.value });
-        setLocked(true);
-    };
-    const handleFocus = (e) => {
-        var _a;
-        requestAnimationFrame(() => {
-            if (!locked)
-                return;
-            setActive(false);
-            setLocked(false);
-        });
-        (_a = textFieldProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, e);
-    };
-    return (_jsx(AutocompleteContext.Provider, { value: { onItemClick: handleItemClick }, children: _jsxs(DropdownMenu, { position: "bottom", width: "trigger", triggerType: "focus", trapFocusMode: "selection-menu", active: !locked && hasChildren && active, onClose: handleClose, onOpen: handleOpen, disableHideAnimation: true, children: [_jsx(DropdownMenu.Trigger, { children: (_a) => {
-                        var { ref } = _a, attributes = __rest(_a, ["ref"]);
-                        return (_jsx(TextField, Object.assign({}, textFieldProps, { name: name, onChange: handleChange, 
-                            // Ignoring the type check since TS can't infer the correct html element type
-                            attributes: Object.assign(Object.assign({}, textFieldProps.attributes), { ref }), inputAttributes: Object.assign(Object.assign({}, textFieldProps.inputAttributes), { onFocus: (e) => {
-                                    var _a;
-                                    (_a = attributes.onFocus) === null || _a === void 0 ? void 0 : _a.call(attributes);
-                                    handleFocus(e);
-                                }, ref: inputRef, role: "combobox" }) })));
-                    } }), _jsx(DropdownMenu.Content, { children: children })] }) }));
-};
-const AutocompleteItem = (props) => {
-    const { value, onClick } = props, menuItemProps = __rest(props, ["value", "onClick"]);
-    const { onItemClick } = React.useContext(AutocompleteContext);
-    const handleClick = (e) => {
-        onClick === null || onClick === void 0 ? void 0 : onClick(e);
-        onItemClick({ value });
-    };
-    return (_jsx(DropdownMenu.Item, Object.assign({}, menuItemProps, { attributes: Object.assign(Object.assign({}, menuItemProps.attributes), { role: "option" }), onClick: handleClick })));
-};
-Autocomplete.Item = AutocompleteItem;
-export default Autocomplete;

package/components/Autocomplete/Autocomplete.types.d.ts

@@ -1,16 +0,0 @@
-import type { TextFieldProps } from "../TextField";
-import type { MenuItemProps } from "../MenuItem";
-export type Props = TextFieldProps & {
-    onItemSelect?: (args: {
-        value: string;
-    }) => void;
-    children: React.ReactNode;
-};
-export type ItemProps = MenuItemProps & {
-    value: string;
-};
-export type Context = {
-    onItemClick: (args: {
-        value: string;
-    }) => void;
-};

package/components/Avatar/Avatar.js

@@ -1,29 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames, responsivePropDependency } from "../../utilities/helpers.js";
-import getHeightStyles from "../../styles/height/index.js";
-import Icon from "../Icon/index.js";
-import View from "../View/index.js";
-import s from "./Avatar.module.css";
-const Avatar = (props) => {
-    const { color = "neutral", variant, src, size = 12, squared, initials, icon, alt, className, attributes, } = props;
-    const radius = squared
-        ? responsivePropDependency(size, (size) => {
-            if (size >= 24)
-                return "large";
-            if (size >= 12)
-                return "medium";
-            return "small";
-        })
-        : "circular";
-    const heightStyles = getHeightStyles(size);
-    const rootClassNames = classNames(s.root, className, heightStyles === null || heightStyles === void 0 ? void 0 : heightStyles.classNames, color && s[`--color-${color}`], variant && s[`--variant-${variant}`]);
-    const renderContent = () => {
-        if (src)
-            return (_jsx("img", { role: !initials ? "presentation" : undefined, src: src, alt: alt, className: s.img }));
-        if (icon)
-            return (_jsx(Icon, { svg: icon, size: responsivePropDependency(size, (size) => Math.ceil(size * 0.4)) }));
-        return initials;
-    };
-    return (_jsx(View, { borderRadius: radius, attributes: Object.assign(Object.assign({}, attributes), { style: Object.assign({}, heightStyles === null || heightStyles === void 0 ? void 0 : heightStyles.variables) }), backgroundColor: variant === "faded" ? `${color}-${variant}` : color, className: rootClassNames, children: renderContent() }));
-};
-export default Avatar;

package/components/Avatar/Avatar.types.d.ts

@@ -1,30 +0,0 @@
-import type { IconProps } from "../Icon";
-import type * as G from "../../types/global";
-type WithImage = {
-    src: string;
-    initials?: string;
-    icon?: IconProps["svg"];
-    alt?: string;
-};
-type WithInitials = {
-    src?: never;
-    initials: string;
-    icon?: never;
-    alt?: never;
-};
-type WithIcon = {
-    src?: never;
-    initials?: never;
-    icon: IconProps["svg"];
-    alt?: never;
-};
-type WithContent = WithImage | WithInitials | WithIcon;
-export type Props = WithContent & {
-    squared?: boolean;
-    variant?: "solid" | "faded";
-    color?: "neutral" | "critical" | "warning" | "positive" | "primary";
-    size?: G.Responsive<number>;
-    className?: G.ClassName;
-    attributes?: G.Attributes<"div", Props>;
-};
-export {};

package/components/Badge/Badge.d.ts

@@ -1,6 +0,0 @@
-import type * as T from "./Badge.types";
-declare const Badge: {
-    (props: T.Props): import("react/jsx-runtime").JSX.Element;
-    Container: (props: T.ContainerProps) => import("react/jsx-runtime").JSX.Element;
-};
-export default Badge;

package/components/Badge/Badge.js

@@ -1,19 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames } from "../../utilities/helpers.js";
-import Text from "../Text/index.js";
-import Icon from "../Icon/index.js";
-import IconClose from "../../icons/Close.js";
-import Actionable from "../Actionable/index.js";
-import BadgeContainer from "./BadgeContainer.js";
-import s from "./Badge.module.css";
-const Badge = (props) => {
-    const { children, color, rounded, size = "medium", icon, endIcon, variant, hidden, href, onClick, onDismiss, dismissAriaLabel, className, attributes, } = props;
-    const isActionable = !!(onClick || href);
-    const iconSize = size === "large" ? 4 : 3.5;
-    const rootClassName = classNames(s.root, className, rounded && s["--rounded"], hidden && s["--hidden"], size && s[`--size-${size}`], color && s[`--color-${color}`], variant && s[`--variant-${variant}`], isActionable && s["--actionable"]);
-    return (_jsxs(Actionable, { onClick: onClick, href: href, className: rootClassName, attributes: attributes, children: [icon && _jsx(Icon, { svg: icon, autoWidth: true, size: iconSize }), children && (_jsx(Text, { variant: size === "large" ? "body-3" : "caption-1", weight: "medium", attributes: {
-                    "aria-hidden": hidden ? "true" : undefined,
-                }, children: children })), endIcon && _jsx(Icon, { svg: endIcon, autoWidth: true, size: iconSize }), onDismiss && (_jsx(Actionable, { onClick: onDismiss, className: s.dismiss, as: "span", attributes: { "aria-label": dismissAriaLabel }, children: _jsx(Icon, { svg: IconClose, size: iconSize }) }))] }));
-};
-Badge.Container = BadgeContainer;
-export default Badge;

package/components/Badge/Badge.module.css

@@ -1 +0,0 @@
-.root{align-items:center;backface-visibility:hidden;background:var(--rs-color-background-neutral);border:1px solid var(--rs-color-background-neutral);border-radius:var(--rs-unit-radius-small);box-sizing:border-box;color:var(--rs-color-foreground-neutral);display:inline-flex;gap:var(--rs-badge-gap);justify-content:center;min-width:calc(var(--rs-badge-line-height) + 2px + (var(--rs-badge-p-v) * 2));padding:var(--rs-badge-p-v) var(--rs-badge-p-h);transition:var(--rs-duration-medium) var(--rs-easing-standard);transition-property:transform,opacity;vertical-align:top}.dismiss{transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}.root.--actionable:hover{opacity:.8}.root .dismiss:hover{opacity:.72}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);border-color:var(--rs-color-background-neutral-faded);color:var(--rs-color-foreground-neutral-faded)}.root.--variant-outline{background:none;border-color:var(--rs-color-border-neutral-faded)}.root.--color-positive{background:var(--rs-color-background-positive);border-color:var(--rs-color-background-positive);color:var(--rs-color-on-background-positive)}.root.--color-positive.--variant-faded{background:var(--rs-color-background-positive-faded);border-color:var(--rs-color-background-positive-faded);color:var(--rs-color-foreground-positive)}.root.--color-positive.--variant-outline{background:none;border-color:var(--rs-color-border-positive);color:var(--rs-color-foreground-positive)}.root.--color-critical{background:var(--rs-color-background-critical);border-color:var(--rs-color-background-critical);color:var(--rs-color-on-background-critical)}.root.--color-critical.--variant-faded{background:var(--rs-color-background-critical-faded);border-color:var(--rs-color-background-critical-faded);color:var(--rs-color-foreground-critical)}.root.--color-critical.--variant-outline{background:none;border-color:var(--rs-color-border-critical);color:var(--rs-color-foreground-critical)}.root.--color-warning{background:var(--rs-color-background-warning);border-color:var(--rs-color-background-warning);color:var(--rs-color-on-background-warning)}.root.--color-warning.--variant-faded{background:var(--rs-color-background-warning-faded);border-color:var(--rs-color-background-warning-faded);color:var(--rs-color-foreground-warning)}.root.--color-warning.--variant-outline{background:none;border-color:var(--rs-color-border-warning);color:var(--rs-color-foreground-warning)}.root.--color-primary{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.root.--color-primary.--variant-faded{background:var(--rs-color-background-primary-faded);border-color:var(--rs-color-background-primary-faded);color:var(--rs-color-foreground-primary)}.root.--color-primary.--variant-outline{background:none;border-color:var(--rs-color-border-primary);color:var(--rs-color-foreground-primary)}.root.--size-small{--rs-badge-p-v:0px;--rs-badge-p-h:var(--rs-unit-x1);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x2);--rs-badge-gap:calc(var(--rs-unit-x1) / 2)}.root.--size-medium{--rs-badge-p-v:calc(var(--rs-unit-x1) - 1px);--rs-badge-p-h:calc(var(--rs-unit-x2) - 1px);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x3);--rs-badge-gap:var(--rs-unit-x1)}.root.--size-large{--rs-badge-p-v:calc(var(--rs-unit-x1) - 1px);--rs-badge-p-h:calc(var(--rs-unit-x2) - 1px);--rs-badge-line-height:var(--rs-line-height-body-3);--rs-badge-empty-size:var(--rs-unit-x4);--rs-badge-gap:var(--rs-unit-x1)}.root.--rounded{border-radius:999px}.root:empty{height:var(--rs-badge-empty-size);min-width:auto;padding:0;width:var(--rs-badge-empty-size)}.root.--hidden{opacity:0;transform:scale(.2)}.container{display:inline-block;position:relative;vertical-align:top}.container .root{inset-inline-end:0;pointer-events:none;position:absolute;transform:translate(50%,var(--rs-badge-translate-y)) scale(1);z-index:10}.container .root.--hidden{transform:translate(50%,var(--rs-badge-translate-y)) scale(.2)}[dir=rtl] .container .root{transform:translate(-50%,var(--rs-badge-translate-y)) scale(1)}[dir=rtl] .container .root.--hidden{transform:translate(-50%,var(--rs-badge-translate-y)) scale(.2)}.--container-overlap .root{inset-inline-end:14%}.--container-position-top-end .root{--rs-badge-translate-y:-50%;top:0}.--container-position-top-end.--container-overlap .root{top:14%}.--container-position-bottom-end .root{--rs-badge-translate-y:50%;bottom:0}.--container-position-bottom-end.--container-overlap .root{bottom:14%}

package/components/Badge/Badge.types.d.ts

@@ -1,39 +0,0 @@
-import type React from "react";
-import type { ActionableProps } from "../Actionable";
-import type { IconProps } from "../Icon";
-import type * as G from "../../types/global";
-type BaseProps = {
-    size?: "small" | "medium" | "large";
-    icon?: IconProps["svg"];
-    endIcon?: IconProps["svg"];
-    rounded?: boolean;
-    hidden?: boolean;
-    className?: G.ClassName;
-} & Pick<ActionableProps, "href" | "onClick" | "attributes">;
-type WithChildren = BaseProps & {
-    children: React.ReactNode;
-    color?: "critical" | "warning" | "positive" | "primary";
-    variant?: "faded" | "outline";
-};
-type WithEmpty = BaseProps & {
-    color: "critical" | "warning" | "positive" | "primary";
-    children?: never;
-    variant?: never;
-};
-type WithDismissible = {
-    onDismiss: () => void;
-    dismissAriaLabel: string;
-};
-type WithoutDismissible = {
-    onDismiss?: never;
-    dismissAriaLabel?: string;
-};
-export type Props = (WithChildren | WithEmpty) & (WithDismissible | WithoutDismissible);
-export type ContainerProps = {
-    position?: "top-end" | "bottom-end";
-    overlap?: boolean;
-    children: React.ReactNode;
-    className?: G.ClassName;
-    attributes?: G.Attributes<"div", ContainerProps>;
-};
-export {};

package/components/Badge/BadgeContainer.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "../../utilities/helpers.js";
-import s from "./Badge.module.css";
-const BadgeContainer = (props) => {
-    const { children, position = "top-end", overlap, className, attributes } = props;
-    const rootClassNames = classNames(s.container, className, overlap && s["--container-overlap"], position && s[`--container-position-${position}`]);
-    return (_jsx("div", Object.assign({}, attributes, { className: rootClassNames, children: children })));
-};
-export default BadgeContainer;

package/components/Badge/tests/Badge.stories.d.ts

@@ -1,22 +0,0 @@
-import React from "react";
-declare const _default: {
-    title: string;
-    component: {
-        (props: import("./..").BadgeProps): React.JSX.Element;
-        Container: (props: import("../Badge.types").ContainerProps) => React.JSX.Element;
-    };
-    parameters: {
-        iframe: {
-            url: string;
-        };
-    };
-};
-export default _default;
-export declare const variant: () => React.JSX.Element;
-export declare const color: () => React.JSX.Element;
-export declare const sizes: () => React.JSX.Element;
-export declare const icon: () => React.JSX.Element;
-export declare const actionable: () => React.JSX.Element;
-export declare const rounded: () => React.JSX.Element;
-export declare const empty: () => React.JSX.Element;
-export declare const container: () => React.JSX.Element;