reshaped 2.7.5-beta.0 → 2.8.1

package/dist/components/Accordion/AccordionUncontrolled.js

@@ -0,0 +1,25 @@
+"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/dist/components/ActionBar/ActionBar.d.ts

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

package/dist/components/ActionBar/ActionBar.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "../../utilities/helpers.js";
+import View from "../View/index.js";
+import s from "./ActionBar.module.css";
+const ActionBar = (props) => {
+    const { position = "bottom", padding, paddingBlock = 3, paddingInline = 4, children, elevated, className, attributes, } = props;
+    const rootClassNames = classNames(s.root, elevated && s["--elevated"], position && s[`--position-${position}`], className);
+    return (_jsx(View, { className: rootClassNames, attributes: attributes, paddingBlock: padding || paddingBlock, paddingInline: padding || paddingInline, children: children }));
+};
+export default ActionBar;

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

@@ -0,0 +1,10 @@
+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/dist/components/Actionable/Actionable.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import s from "./Actionable.module.css";
+const Actionable = (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 repeatRef = React.useRef(false);
+    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);
+    let TagName;
+    if (isLink) {
+        rootAttributes.href = disabled ? undefined : href || (attributes === null || attributes === void 0 ? void 0 : attributes.href);
+        TagName = "a";
+    }
+    else if (isButton && (!as || as === "button")) {
+        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;
+        /**
+         * - Holding enter keep onClick getting triggered
+         * - Storybook environment is triggering onClick twice on each enter press
+         */
+        if (repeatRef.current)
+            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 simulatingButton = rootAttributes.role === "button";
+        // These cases are handled correctly by the browsers
+        if (simulatingButton || isLink)
+            return;
+        const isSpace = event.key === " ";
+        const isEnter = event.key === "Enter";
+        if (!isSpace && !isEnter)
+            return;
+        event.preventDefault();
+        handlePress(event);
+        repeatRef.current = true;
+        requestAnimationFrame(() => {
+            repeatRef.current = false;
+        });
+    };
+    return (_jsx(TagName, Object.assign({ ref: ref }, rootAttributes, { className: rootClassNames, onClick: handlePress, onKeyDown: handleKeyDown, children: children })));
+};
+export default React.forwardRef(Actionable);

package/dist/components/Actionable/Actionable.module.css

@@ -0,0 +1 @@
+.root{background:none;border:0;color:inherit;display:inline-block;font-size:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0;text-align:initial;text-decoration:none;vertical-align:top;-webkit-tap-highlight-color:transparent}.root:focus{outline:none;z-index:var(--rs-z-index-raised)}[role=button].root,button.root{cursor:pointer;user-select:none}.root.--disabled,.root[disabled]{cursor:not-allowed}.root.--disabled:active,.root[disabled]:active{transform:none}.--full-width{width:100%}[data-rs-keyboard] .root:focus{box-shadow:var(--rs-focus-shadow)}[data-rs-keyboard] .root.--inset:focus{box-shadow:var(--rs-focus-inset-shadow)}[data-rs-keyboard] .root.--radius-inherit:focus{box-shadow:none}[data-rs-keyboard] .root.--radius-inherit:focus>*{box-shadow:var(--rs-focus-shadow)}[data-rs-keyboard] .root.--radius-inherit.--inset:focus>*{box-shadow:var(--rs-focus-inset-shadow)}

package/dist/components/Alert/Alert.d.ts

@@ -0,0 +1,3 @@
+import * as T from "./Alert.types";
+declare const Alert: (props: T.Props) => import("react/jsx-runtime").JSX.Element;
+export default Alert;

package/dist/components/Alert/Alert.js

@@ -0,0 +1,21 @@
+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: 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/dist/components/Alert/Alert.types.d.ts

@@ -0,0 +1,14 @@
+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/dist/components/Autocomplete/Autocomplete.d.ts

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

package/dist/components/Autocomplete/Autocomplete.js

@@ -0,0 +1,73 @@
+"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 * 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(),
+    }, [handleOpen], { ref: inputRef });
+    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 hanleClick = (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: hanleClick })));
+};
+Autocomplete.Item = AutocompleteItem;
+export default Autocomplete;

package/dist/components/Avatar/Avatar.d.ts

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

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,29 @@
+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/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,6 @@
+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/dist/components/Badge/Badge.js

@@ -0,0 +1,19 @@
+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/dist/components/Badge/BadgeContainer.d.ts

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

package/dist/components/Badge/BadgeContainer.js

@@ -0,0 +1,9 @@
+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/dist/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,3 @@
+import * as T from "./Breadcrumbs.types";
+declare const Breadcrumbs: (props: T.Props) => import("react/jsx-runtime").JSX.Element;
+export default Breadcrumbs;

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import View from "../View/index.js";
+import Icon from "../Icon/index.js";
+import Text from "../Text/index.js";
+import Button from "../Button/index.js";
+import IconChevronRight from "../../icons/ChevronRight.js";
+import IconDotsHorizontal from "../../icons/DotsHorizontal.js";
+const Breadcrumbs = (props) => {
+    const { children, separator, color, defaultVisibleItems, ariaLabel, className, attributes } = props;
+    const visibleItems = defaultVisibleItems && defaultVisibleItems >= 2 ? defaultVisibleItems : null;
+    const [expanded, setExpanded] = React.useState(false);
+    const rootClassNames = classNames(className);
+    const childrenLength = React.Children.count(children);
+    let renderIndex = 0;
+    const handleExpand = () => {
+        setExpanded(true);
+    };
+    return (_jsx("nav", Object.assign({}, attributes, { "aria-label": ariaLabel || (attributes === null || attributes === void 0 ? void 0 : attributes["aria-label"]), className: rootClassNames, children: _jsx(View, { as: "ol", direction: "row", gap: 2, align: "center", children: React.Children.map(children, (child, index) => {
+                if (!child)
+                    return null;
+                const lastCollapsedIndex = childrenLength - (visibleItems || 0);
+                const isBeforeCollapse = renderIndex === 0;
+                const isAfterCollapse = renderIndex > lastCollapsedIndex;
+                const isDisplayed = !visibleItems || isBeforeCollapse || isAfterCollapse || expanded;
+                const isCollapseButton = renderIndex === lastCollapsedIndex;
+                renderIndex += 1;
+                let itemNode = null;
+                if (isDisplayed) {
+                    itemNode = child;
+                }
+                else if (isCollapseButton) {
+                    itemNode = (_jsx(Button.Aligner, { children: _jsx(Button, { variant: "ghost", size: "small", icon: IconDotsHorizontal, onClick: handleExpand }) }));
+                }
+                if (itemNode === null)
+                    return null;
+                return (_jsxs(View, { as: "li", gap: 2, direction: "row", align: "center", children: [index > 0 && (isDisplayed || isCollapseButton) && (_jsx(Text, { color: "neutral-faded", children: separator || _jsx(Icon, { svg: IconChevronRight, size: 3 }) })), _jsx(Text, { variant: "body-3", color: color === "primary" ? "primary" : "neutral-faded", children: itemNode })] }, index));
+            }) }) })));
+};
+export default Breadcrumbs;

package/dist/components/Breadcrumbs/Breadcrumbs.types.d.ts

@@ -0,0 +1,13 @@
+import type React from "react";
+import type { LinkProps } from "../Link";
+import type * as G from "../../types/global";
+export type Props = {
+    children: React.ReactElement | React.ReactElement[];
+    separator?: React.ReactNode;
+    color?: "neutral" | "primary";
+    defaultVisibleItems?: number;
+    ariaLabel?: string;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"nav", Props>;
+};
+export type ItemProps = Pick<LinkProps, "icon" | "href" | "onClick" | "disabled" | "children">;

package/dist/components/Breadcrumbs/BreadcrumbsItem.d.ts

@@ -0,0 +1,3 @@
+import type * as T from "./Breadcrumbs.types";
+declare const BreadcrumbsItem: (props: T.ItemProps) => import("react/jsx-runtime").JSX.Element;
+export default BreadcrumbsItem;

package/dist/components/Breadcrumbs/BreadcrumbsItem.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Text from "../Text/index.js";
+import Link from "../Link/index.js";
+const BreadcrumbsItem = (props) => {
+    const { children, onClick, href, icon, disabled } = props;
+    if (!href && !onClick && !disabled) {
+        return (_jsx(Text, { variant: "body-3", weight: "medium", color: "neutral", children: children }));
+    }
+    return (_jsx(Link, { onClick: onClick, href: href, icon: icon, disabled: disabled, variant: "plain", color: "inherit", children: children }));
+};
+export default BreadcrumbsItem;

package/dist/components/Breadcrumbs/index.d.ts

@@ -0,0 +1,8 @@
+import BreadcrumbsItem from "./BreadcrumbsItem";
+type CompoundComponent = typeof Breadcrumbs & {
+    Item: typeof BreadcrumbsItem;
+};
+declare const Breadcrumbs: (props: import("./Breadcrumbs.types").Props) => import("react/jsx-runtime").JSX.Element;
+export type { Props as BreadcrumbsProps } from "./Breadcrumbs.types";
+declare const _default: CompoundComponent;
+export default _default;

package/dist/components/Button/Button.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/helpers.js";
+import Icon from "../Icon/index.js";
+import Loader from "../Loader/index.js";
+import Actionable from "../Actionable/index.js";
+import ButtonGroup from "./ButtonGroup.js";
+import ButtonAligner from "./ButtonAligner.js";
+import s from "./Button.module.css";
+const ButtonBase = (props, ref) => {
+    const { variant = "solid", color = "neutral", elevated, highlighted, fullWidth, loading, disabled, type, href, size = "medium", className, children, rounded, attributes, onClick, icon, endIcon, } = props;
+    const iconOnly = (icon || endIcon) && !children;
+    const rootClassName = classNames(s.root, className, color && s[`--color-${color}`], variant && s[`--variant-${variant}`], responsiveClassNames(s, "--size", size), responsiveClassNames(s, "--full-width", fullWidth), elevated && variant !== "ghost" && s["--elevated"], rounded && s["--rounded"], disabled && s["--disabled"], loading && s["--loading"], highlighted && s["--highlighted"], iconOnly && s["--icon-only"]);
+    const renderIcon = (position) => {
+        const isStartValid = position === "start" && icon;
+        const isEndValid = position === "end" && endIcon;
+        const isInvalid = !(isStartValid || isEndValid);
+        if (isInvalid)
+            return null;
+        const iconClassName = classNames(s.icon, position === "end" && s["--icon-position-end"]);
+        const iconSize = responsivePropDependency(size, (size) => {
+            if (size === "large")
+                return 5;
+            if (size === "xlarge")
+                return 6;
+            return 4;
+        });
+        return (_jsx(Icon, { className: iconClassName, svg: (position === "start" ? icon : endIcon), size: iconSize, autoWidth: true }));
+    };
+    return (_jsxs(Actionable, { disabled: disabled || loading, className: rootClassName, attributes: Object.assign(Object.assign({}, attributes), { "data-rs-aligner-target": true }), type: type, onClick: onClick, href: href, ref: ref, children: [loading && (_jsx("div", { className: s.loader, children: _jsx(Loader, { size: "small", color: "inherit" }) })), renderIcon("start"), children && _jsx("span", { className: s.text, children: children }), renderIcon("end")] }));
+};
+const Button = React.forwardRef(ButtonBase);
+Button.Group = ButtonGroup;
+Button.Aligner = ButtonAligner;
+export default Button;

package/dist/components/Button/Button.module.css

@@ -0,0 +1 @@
+.root{--rs-p-v:var(--rs-button-p-v);--rs-p-h:var(--rs-button-p-h);align-items:center;border:var(--rs-button-border-width) solid transparent;border-radius:var(--rs-button-radius);box-sizing:border-box;cursor:pointer;display:inline-flex;justify-content:center;overflow:hidden;padding:calc(var(--rs-unit-x1) - var(--rs-button-border-width)) calc(var(--rs-p-h) - var(--rs-button-border-width));position:relative;text-align:initial;text-decoration:none;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,box-shadow,border-color,color,transform;z-index:0;-webkit-tap-highlight-color:transparent;font-family:var(--rs-font-family-body);font-size:var(--rs-button-font-size);font-weight:var(--rs-font-weight-medium);line-height:var(--rs-button-line-height);min-height:calc(var(--rs-button-line-height) + var(--rs-p-v) * 2);min-width:calc(var(--rs-button-line-height) - (var(--rs-unit-x1) * 2) + (var(--rs-button-p-h) * 2))}.root:active{transform:scale(.98)}.loader{align-items:center;display:none;inset:0;justify-content:center;position:absolute}.icon{margin-inline-end:var(--rs-button-gap)}.icon.--icon-position-end{margin-inline-end:0;margin-inline-start:var(--rs-button-gap)}.icon:last-child{margin-inline-end:0}.text{align-items:center;display:flex;gap:var(--rs-button-gap)}.icon,.text{position:relative;z-index:5}.root.--loading{cursor:default}.root.--loading:active{transform:none}.root.--loading .icon,.root.--loading .text{visibility:hidden}.root.--loading .loader{display:flex}.--elevated{box-shadow:var(--rs-shadow-raised)}.root.--icon-only .icon{margin:0 calc(var(--rs-unit-x1) * -1)}.root.--rounded{border-radius:999px}.--size-small{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-radius:var(--rs-unit-radius-small)}.--size-medium{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-radius:var(--rs-unit-radius-small)}.--size-large{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-radius:var(--rs-unit-radius-medium)}.--size-xlarge{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-gap:var(--rs-unit-x3);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-radius:var(--rs-unit-radius-medium)}.--full-width{text-align:center;width:100%}.root.--variant-faded.--color-critical:before,.root.--variant-faded.--color-inherit:before,.root.--variant-faded.--color-neutral:before,.root.--variant-faded.--color-positive:before,.root.--variant-faded.--color-primary:before,.root.--variant-ghost.--color-inherit:before,.root.--variant-outline.--color-inherit:before,.root.--variant-solid.--color-black:before,.root.--variant-solid.--color-white:before{content:"";inset:0;opacity:0;position:absolute;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}.root.--variant-solid{--rs-button-border-width:0px}.root.--variant-solid.--color-neutral{background-color:var(--rs-color-background-neutral);color:var(--rs-color-foreground-neutral)}.root.--variant-solid.--color-neutral.--highlighted,.root.--variant-solid.--color-neutral:hover:not(.--loading){background-color:var(--rs-color-background-neutral-highlighted)}.root.--variant-solid.--color-primary{background-color:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.root.--variant-solid.--color-primary.--highlighted,.root.--variant-solid.--color-primary:hover:not(.--loading){background-color:var(--rs-color-background-primary-highlighted)}.root.--variant-solid.--color-critical{background-color:var(--rs-color-background-critical);color:var(--rs-color-on-background-critical)}.root.--variant-solid.--color-critical.--highlighted,.root.--variant-solid.--color-critical:hover:not(.--loading){background-color:var(--rs-color-background-critical-highlighted)}.root.--variant-solid.--color-positive{background-color:var(--rs-color-background-positive);color:var(--rs-color-on-background-positive)}.root.--variant-solid.--color-positive.--highlighted,.root.--variant-solid.--color-positive:hover:not(.--loading){background-color:var(--rs-color-background-positive-highlighted)}.root.--variant-solid.--color-white{background-color:var(--rs-color-white);color:var(--rs-color-black)}.root.--variant-solid.--color-white:before{background-color:var(--rs-color-black)}.root.--variant-solid.--color-white.--highlighted:before,.root.--variant-solid.--color-white:hover:not(.--loading):before{opacity:.04}.root.--variant-solid.--color-black{background-color:var(--rs-color-black);color:var(--rs-color-white)}.root.--variant-solid.--color-black:before{background-color:var(--rs-color-white)}.root.--variant-solid.--color-black.--highlighted:before,.root.--variant-solid.--color-black:hover:not(.--loading):before{opacity:.2}.root.--variant-faded{--rs-button-border-width:0px}.root.--variant-faded.--color-neutral{--rs-button-border-width:1px;background-color:var(--rs-color-background-elevation-base);border-color:var(--rs-color-border-neutral-faded);color:var(--rs-color-foreground-neutral)}.root.--variant-faded.--color-neutral:before{background-color:var(--rs-color-foreground-neutral)}.root.--variant-faded.--color-neutral.--highlighted:before,.root.--variant-faded.--color-neutral:hover:not(.--loading):before{opacity:.04}.root.--variant-faded.--color-primary{background-color:var(--rs-color-background-primary-faded);color:var(--rs-color-foreground-primary)}.root.--variant-faded.--color-primary:before{background-color:var(--rs-color-foreground-primary)}.root.--variant-faded.--color-primary.--highlighted:before,.root.--variant-faded.--color-primary:hover:not(.--loading):before{opacity:.06}.root.--variant-faded.--color-critical{background-color:var(--rs-color-background-critical-faded);color:var(--rs-color-foreground-critical)}.root.--variant-faded.--color-critical:before{background-color:var(--rs-color-foreground-critical)}.root.--variant-faded.--color-critical.--highlighted:before,.root.--variant-faded.--color-critical:hover:not(.--loading):before{opacity:.06}.root.--variant-faded.--color-positive{background-color:var(--rs-color-background-positive-faded);color:var(--rs-color-foreground-positive)}.root.--variant-faded.--color-positive:before{background-color:var(--rs-color-foreground-positive)}.root.--variant-faded.--color-positive.--highlighted:before,.root.--variant-faded.--color-positive:hover:not(.--loading):before{opacity:.06}.root.--variant-faded.--color-inherit{color:inherit}.root.--variant-faded.--color-inherit:before{background-color:currentcolor;opacity:.16}.root.--variant-faded.--color-inherit.--highlighted:before,.root.--variant-faded.--color-inherit:hover:not(.--loading):before{opacity:.24}.root.--variant-faded.--color-black{background-color:rgba(var(--rs-color-rgb-black),28%);color:var(--rs-color-white)}.root.--variant-faded.--color-black.--highlighted,.root.--variant-faded.--color-black:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-black),36%)}.root.--variant-faded.--color-white{background-color:rgba(var(--rs-color-rgb-white),28%);color:var(--rs-color-black)}.root.--variant-faded.--color-white.--highlighted,.root.--variant-faded.--color-white:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-white),36%)}.root.--variant-outline{--rs-button-border-width:1px}.root.--variant-outline.--color-neutral{background-color:transparent;border-color:var(--rs-color-border-neutral);color:var(--rs-color-foreground-neutral)}.root.--variant-outline.--color-neutral.--highlighted,.root.--variant-outline.--color-neutral:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-neutral),28%)}.root.--variant-outline.--color-primary{background-color:transparent;border-color:var(--rs-color-border-primary);color:var(--rs-color-foreground-primary)}.root.--variant-outline.--color-primary.--highlighted,.root.--variant-outline.--color-primary:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-primary),10%)}.root.--variant-outline.--color-critical{background-color:transparent;border-color:var(--rs-color-border-critical);color:var(--rs-color-foreground-critical)}.root.--variant-outline.--color-critical.--highlighted,.root.--variant-outline.--color-critical:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-critical),10%)}.root.--variant-outline.--color-positive{background-color:transparent;border-color:var(--rs-color-border-positive);color:var(--rs-color-foreground-positive)}.root.--variant-outline.--color-positive.--highlighted,.root.--variant-outline.--color-positive:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-positive),10%)}.root.--variant-outline.--color-white{background-color:transparent;border-color:var(--rs-color-white);color:var(--rs-color-white)}.root.--variant-outline.--color-white.--highlighted,.root.--variant-outline.--color-white:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-white),12%)}.root.--variant-outline.--color-black{background-color:transparent;border-color:var(--rs-color-black);color:var(--rs-color-black)}.root.--variant-outline.--color-black.--highlighted,.root.--variant-outline.--color-black:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-black),4%)}.root.--variant-outline.--color-inherit{background-color:transparent;border-color:currentcolor;color:inherit}.root.--variant-outline.--color-inherit:before{background-color:currentcolor;content:"";inset:0;opacity:0;position:absolute;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}.root.--variant-outline.--color-inherit.--highlighted,.root.--variant-outline.--color-inherit:hover:not(.--loading){background-color:transparent}.root.--variant-outline.--color-inherit.--highlighted:before,.root.--variant-outline.--color-inherit:hover:not(.--loading):before{opacity:.1}.root.--variant-ghost{--rs-button-border-width:0px;--rs-p-h:max(calc(var(--rs-button-p-h) - var(--rs-unit-x1)),var(--rs-unit-x2))}.root.--variant-ghost.--color-neutral{background:transparent;color:var(--rs-color-foreground-neutral)}.root.--variant-ghost.--color-neutral.--highlighted,.root.--variant-ghost.--color-neutral:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-neutral),40%)}.root.--variant-ghost.--color-primary{background:transparent;color:var(--rs-color-foreground-primary)}.root.--variant-ghost.--color-primary.--highlighted,.root.--variant-ghost.--color-primary:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-primary),12%)}.root.--variant-ghost.--color-critical{background:transparent;color:var(--rs-color-foreground-critical)}.root.--variant-ghost.--color-critical.--highlighted,.root.--variant-ghost.--color-critical:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-critical),12%)}.root.--variant-ghost.--color-positive{background:transparent;color:var(--rs-color-foreground-positive)}.root.--variant-ghost.--color-positive.--highlighted,.root.--variant-ghost.--color-positive:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-positive),12%)}.root.--variant-ghost.--color-white{background:transparent;color:var(--rs-color-white)}.root.--variant-ghost.--color-white.--highlighted,.root.--variant-ghost.--color-white:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-white),8%)}.root.--variant-ghost.--color-black{background:transparent;color:var(--rs-color-black)}.root.--variant-ghost.--color-black.--highlighted,.root.--variant-ghost.--color-black:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-black),8%)}.root.--variant-ghost.--color-inherit{background-color:transparent;color:inherit}.root.--variant-ghost.--color-inherit:before{background-color:currentcolor}.root.--variant-ghost.--color-inherit.--highlighted,.root.--variant-ghost.--color-inherit:hover:not(.--loading){background-color:transparent}.root.--variant-ghost.--color-inherit.--highlighted:before,.root.--variant-ghost.--color-inherit:hover:not(.--loading):before{opacity:.08}.root.--disabled,.root.--disabled:hover:not(.--loading){background-color:var(--rs-color-background-disabled)!important;border-color:var(--rs-color-border-disabled)!important;color:var(--rs-color-foreground-disabled)!important}.root.--disabled:before,.root.--disabled:hover:not(.--loading):before{opacity:0!important}.root.--disabled.--variant-faded,.root.--disabled:hover:not(.--loading).--variant-faded{background-color:var(--rs-color-background-disabled-faded)!important}.root.--disabled.--variant-outline,.root.--disabled:hover:not(.--loading).--variant-outline{background-color:transparent!important}.root.--disabled.--variant-ghost,.root.--disabled:hover:not(.--loading).--variant-ghost{background-color:transparent!important;border-color:transparent!important}.root.--disabled:active,.root.--disabled:hover:not(.--loading):active{transform:none!important}.group .root{border-radius:0}.group .root:first-child{border-end-start-radius:var(--rs-button-radius);border-start-start-radius:var(--rs-button-radius)}.group .root:not(:first-child){border-inline-start:1px solid var(--rs-button-group-separator-color)}.group .root:last-child{border-end-end-radius:var(--rs-button-radius);border-start-end-radius:var(--rs-button-radius)}.group .root.--variant-solid.--color-neutral{--rs-button-group-separator-color:var(--rs-color-border-neutral)}.group .root.--variant-ghost.--color-neutral{--rs-button-group-separator-color:var(--rs-color-border-neutral-faded)}.group .root.--variant-solid.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-positive)}.group .root.--variant-ghost.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-positive-faded)}.group .root.--variant-solid.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-critical)}.group .root.--variant-ghost.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-critical-faded)}.group .root.--variant-solid.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-primary)}.group .root.--variant-ghost.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-primary-faded)}.group .root.--variant-faded.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-positive-faded)}.group .root.--variant-faded.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-critical-faded)}.group .root.--variant-faded.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-primary-faded)}.group .root.--variant-solid.--color-black{--rs-button-group-separator-color:rgba(var(--rs-color-rgb-white),0.28)}.group .root.--variant-faded.--color-black{--rs-button-group-separator-color:rgba(var(--rs-color-rgb-white),0.14)}.group .root.--variant-faded.--color-white,.group .root.--variant-ghost.--color-black,.group .root.--variant-solid.--color-white{--rs-button-group-separator-color:rgba(var(--rs-color-rgb-black),0.2)}.group .root.--variant-ghost.--color-white{--rs-button-group-separator-color:rgba(var(--rs-color-rgb-white),0.28)}.aligner{line-height:0}@media (--rs-viewport-m ){.--size-small--m{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-radius:var(--rs-unit-radius-small)}.--size-medium--m{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-radius:var(--rs-unit-radius-small)}.--size-large--m{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-radius:var(--rs-unit-radius-medium)}.--size-xlarge--m{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-gap:var(--rs-unit-x3);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-radius:var(--rs-unit-radius-medium)}.--full-width-true--m{text-align:center;width:100%}.--full-width-false--m{text-align:initial;width:auto}}@media (--rs-viewport-l ){.--size-small--l{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-radius:var(--rs-unit-radius-small)}.--size-medium--l{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-radius:var(--rs-unit-radius-small)}.--size-large--l{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-radius:var(--rs-unit-radius-medium)}.--size-xlarge--l{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-gap:var(--rs-unit-x3);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-radius:var(--rs-unit-radius-medium)}.--full-width-true--l{text-align:center;width:100%}.--full-width-false--l{text-align:initial;width:auto}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-radius:var(--rs-unit-radius-small)}.--size-medium--xl{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-radius:var(--rs-unit-radius-small)}.--size-large--xl{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-radius:var(--rs-unit-radius-medium)}.--size-xlarge--xl{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-gap:var(--rs-unit-x3);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-radius:var(--rs-unit-radius-medium)}.--full-width-true--xl{text-align:center;width:100%}.--full-width-false--xl{text-align:initial;width:auto}}

package/dist/components/Button/ButtonAligner.d.ts

@@ -0,0 +1,3 @@
+import type * as T from "./Button.types";
+declare const ButtonAligner: (props: T.AlignerProps) => import("react/jsx-runtime").JSX.Element;
+export default ButtonAligner;

package/dist/components/Button/ButtonAligner.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Aligner from "../_private/Aligner/index.js";
+import s from "./Button.module.css";
+const ButtonAligner = (props) => {
+    return (_jsx(Aligner, Object.assign({}, props, { side: props.side || props.position, className: [s.aligner, props.className] })));
+};
+export default ButtonAligner;

package/dist/components/Button/ButtonGroup.d.ts

@@ -0,0 +1,3 @@
+import type * as T from "./Button.types";
+declare const ButtonGroup: (props: T.GroupProps) => import("react/jsx-runtime").JSX.Element;
+export default ButtonGroup;

package/dist/components/Button/ButtonGroup.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "../../utilities/helpers.js";
+import s from "./Button.module.css";
+const ButtonGroup = (props) => {
+    const { children, className, attributes } = props;
+    const groupClassNames = classNames(s.group, className);
+    return (_jsx("div", Object.assign({}, attributes, { className: groupClassNames, role: "group", children: children })));
+};
+export default ButtonGroup;

package/dist/components/Button/tests/Button.stories.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const variant: () => React.JSX.Element;
+export declare const icon: () => React.JSX.Element;
+export declare const elevated: () => React.JSX.Element;
+export declare const size: () => React.JSX.Element;
+export declare const rounded: () => React.JSX.Element;
+export declare const fullWidth: () => React.JSX.Element;
+export declare const loading: () => React.JSX.Element;
+export declare const highlighted: () => React.JSX.Element;
+export declare const disabled: () => React.JSX.Element;
+export declare const group: () => React.JSX.Element;
+export declare const aligner: () => React.JSX.Element;
+export declare const composition: () => React.JSX.Element;