reshaped 2.8.0 → 2.8.2

package/dist/components/Container/Container.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 "./Container.module.css";
+const Container = (props) => {
+    const { children, padding = 4, width, className, attributes } = props;
+    const rootClassNames = classNames(s.root, className);
+    return (_jsx(View, { attributes: attributes, className: rootClassNames, paddingInline: padding, width: width, maxWidth: "100%", children: children }));
+};
+export default Container;

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

@@ -0,0 +1,9 @@
+import type React from "react";
+import type { ViewProps } from "../View";
+import type * as G from "../../types/global";
+export type Props = Pick<ViewProps, "padding"> & {
+    width?: G.Responsive<string | number>;
+    children?: React.ReactNode;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"div">;
+};

package/dist/components/Dismissible/Dismissible.d.ts

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

package/dist/components/Dismissible/Dismissible.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "../../utilities/helpers.js";
+import Button from "../Button/index.js";
+import IconClose from "../../icons/Close.js";
+import s from "./Dismissible.module.css";
+const Dismissible = (props) => {
+    const { children, align, onClose, hideCloseButton, variant, closeAriaLabel, className, attributes, } = props;
+    const rootClassNames = classNames(s.root, className, variant && s[`--variant-${variant}`], align && s[`--align-${align}`], hideCloseButton && s["--hide-close"]);
+    const WrapperTag = variant === "media" ? "div" : Button.Aligner;
+    return (_jsxs("div", Object.assign({}, attributes, { className: rootClassNames, children: [children, !hideCloseButton && (_jsx(WrapperTag, { className: s.close, children: _jsx(Button, Object.assign({ size: "small" }, (variant === "media" ? { color: "black", variant: "faded" } : { variant: "ghost" }), { onClick: onClose, attributes: { "aria-label": onClose ? closeAriaLabel : undefined }, icon: IconClose })) }))] })));
+};
+export default Dismissible;

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

@@ -0,0 +1,20 @@
+import type React from "react";
+import type * as G from "../../types/global";
+type WithClose = {
+    hideCloseButton: true;
+    closeAriaLabel?: string;
+};
+type WithoutClose = {
+    hideCloseButton?: false;
+    closeAriaLabel: string;
+};
+export type CloseProps = WithClose | WithoutClose;
+export type Props = CloseProps & {
+    variant?: "media";
+    align?: "top" | "center";
+    children?: React.ReactNode;
+    onClose?: () => void;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"div", Props>;
+};
+export {};

package/dist/components/Divider/Divider.d.ts

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

package/dist/components/Divider/Divider.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames, responsiveClassNames } from "../../utilities/helpers.js";
+import s from "./Divider.module.css";
+const Divider = (props) => {
+    const { vertical, blank, className, attributes } = props;
+    const rootClassNames = classNames(s.root, className, blank && s["--blank"], ...responsiveClassNames(s, "--vertical", vertical));
+    // Only support aria-orientation for non-responsive dividers
+    let ariaOrientation;
+    if (typeof vertical === "boolean" || vertical === undefined) {
+        ariaOrientation = vertical ? "vertical" : "horizontal";
+    }
+    return (_jsx("div", Object.assign({}, attributes, { role: "separator", "aria-orientation": ariaOrientation, className: rootClassNames })));
+};
+export default Divider;

package/dist/components/DropdownMenu/DropdownMenu.d.ts

@@ -0,0 +1,12 @@
+import { MenuItemProps } from "../MenuItem";
+import type * as T from "./DropdownMenu.types";
+declare const DropdownMenu: {
+    (props: T.Props): import("react/jsx-runtime").JSX.Element;
+    Trigger: (props: import("../_private/Flyout").FlyoutTriggerProps) => import("react/jsx-runtime").JSX.Element;
+    Content: (props: T.ContentProps) => import("react/jsx-runtime").JSX.Element;
+    Section: (props: T.SectionProps) => import("react/jsx-runtime").JSX.Element;
+    Item: (props: Omit<MenuItemProps, "roundedCorners">) => import("react/jsx-runtime").JSX.Element;
+    SubMenu: (props: T.SubMenuProps) => import("react/jsx-runtime").JSX.Element;
+    SubTrigger: (props: T.SubTriggerProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default DropdownMenu;

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -0,0 +1,90 @@
+"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 Popover from "../Popover/index.js";
+import MenuItem from "../MenuItem/index.js";
+import Icon from "../Icon/index.js";
+import { useFlyoutContext } from "../_private/Flyout/index.js";
+import IconChevronRight from "../../icons/ChevronRight.js";
+import useHotkeys from "../../hooks/useHotkeys.js";
+import useRTL from "../../hooks/useRTL.js";
+import { getActiveElement } from "../../utilities/a11y.js";
+import { classNames } from "../../utilities/helpers.js";
+import * as keys from "../../constants/keys.js";
+import s from "./DropdownMenu.module.css";
+const DropdownMenuSubContext = React.createContext(null);
+const DropdownMenu = (props) => {
+    const { children, position = "bottom-start", triggerType = "click", trapFocusMode = "action-menu" } = props, popoverProps = __rest(props, ["children", "position", "triggerType", "trapFocusMode"]);
+    return (_jsx(Popover, Object.assign({}, popoverProps, { position: position, padding: 0, trapFocusMode: trapFocusMode, triggerType: triggerType, children: children })));
+};
+const DropdownMenuContent = (props) => {
+    const { children, attributes, className } = props;
+    const subMenuInstance = React.useContext(DropdownMenuSubContext);
+    const [rtl] = useRTL();
+    const { ref } = useHotkeys({
+        [rtl ? keys.RIGHT : keys.LEFT]: () => {
+            var _a;
+            (_a = subMenuInstance === null || subMenuInstance === void 0 ? void 0 : subMenuInstance.current) === null || _a === void 0 ? void 0 : _a.close();
+        },
+        [keys.ENTER]: () => {
+            const el = getActiveElement();
+            el === null || el === void 0 ? void 0 : el.click();
+        },
+    }, [subMenuInstance === null || subMenuInstance === void 0 ? void 0 : subMenuInstance.current]);
+    const contentClassName = classNames(s.menu, className);
+    return (_jsx(Popover.Content, { className: contentClassName, attributes: Object.assign(Object.assign({}, attributes), { ref }), children: children }));
+};
+const DropdownMenuSection = (props) => {
+    const { children } = props;
+    return (_jsx("div", { className: s.section, role: "group", children: children }));
+};
+const DropdownMenuItem = (props) => {
+    const { onClick } = props;
+    const { handleClose } = useFlyoutContext();
+    const handleClick = (e) => {
+        if (handleClose)
+            handleClose({ closeParents: true });
+        if (onClick)
+            onClick(e);
+    };
+    return (_jsx(MenuItem, Object.assign({}, props, { roundedCorners: true, className: s.item, attributes: Object.assign({ role: "menuitem" }, props.attributes), onClick: handleClick })));
+};
+const DropdownMenuSubMenu = (props) => {
+    const { children } = props;
+    const dropdownMenuRef = React.useRef();
+    return (_jsx(DropdownMenuSubContext.Provider, { value: dropdownMenuRef, children: _jsx(DropdownMenu, { triggerType: "hover", position: "end-top", contentGap: 0.5, instanceRef: dropdownMenuRef, children: children }) }));
+};
+const DropdownMenuSubTriggerItem = (props) => {
+    const { children, attributes } = props, menuItemProps = __rest(props, ["children", "attributes"]);
+    const subMenuInstance = React.useContext(DropdownMenuSubContext);
+    const [rtl] = useRTL();
+    const { ref } = useHotkeys({
+        [rtl ? keys.LEFT : keys.RIGHT]: () => {
+            var _a;
+            (_a = subMenuInstance === null || subMenuInstance === void 0 ? void 0 : subMenuInstance.current) === null || _a === void 0 ? void 0 : _a.open();
+        },
+    }, [], { ref: attributes === null || attributes === void 0 ? void 0 : attributes.ref });
+    return (_jsx(DropdownMenuItem, Object.assign({}, menuItemProps, { attributes: Object.assign(Object.assign({}, attributes), { ref }), endSlot: _jsx(Icon, { autoWidth: true, svg: IconChevronRight, className: s.arrow }), children: children })));
+};
+const DropdownMenuSubTrigger = (props) => {
+    const { children } = props;
+    return (_jsx(DropdownMenu.Trigger, { children: (attributes) => (_jsx(DropdownMenuSubTriggerItem, { attributes: attributes, children: children })) }));
+};
+DropdownMenu.Trigger = Popover.Trigger;
+DropdownMenu.Content = DropdownMenuContent;
+DropdownMenu.Section = DropdownMenuSection;
+DropdownMenu.Item = DropdownMenuItem;
+DropdownMenu.SubMenu = DropdownMenuSubMenu;
+DropdownMenu.SubTrigger = DropdownMenuSubTrigger;
+export default DropdownMenu;

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

@@ -0,0 +1,16 @@
+import type React from "react";
+import type { PopoverProps } from "../Popover";
+import type { FlyoutContentProps } from "../_private/Flyout";
+export type Props = Pick<PopoverProps, "children" | "position" | "forcePosition" | "triggerType" | "contentGap" | "onOpen" | "onClose" | "active" | "defaultActive" | "width" | "disableHideAnimation" | "instanceRef"> & {
+    trapFocusMode?: Extract<PopoverProps["trapFocusMode"], "action-menu" | "selection-menu">;
+};
+export type ContentProps = Pick<FlyoutContentProps, "attributes" | "children" | "className">;
+export type SectionProps = {
+    children: React.ReactNode;
+};
+export type SubMenuProps = {
+    children: React.ReactNode;
+};
+export type SubTriggerProps = {
+    children: React.ReactNode;
+};

package/dist/components/FileUpload/FileUpload.d.ts

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

package/dist/components/FileUpload/FileUpload.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "../../utilities/helpers.js";
+import View from "../View/index.js";
+import HiddenVisually from "../HiddenVisually/index.js";
+import useToggle from "../../hooks/useToggle.js";
+import s from "./FileUpload.module.css";
+const FileUploadTrigger = (props) => {
+    const { children } = props;
+    return _jsx("span", { className: s.trigger, children: children });
+};
+const FileUpload = (props) => {
+    const { name, children, className, attributes, inputAttributes, onChange } = props;
+    const highlightToggle = useToggle();
+    const rootClassNames = classNames(s.root, highlightToggle.active && s["--highlighted"], className);
+    const handleDragOver = (event) => {
+        var _a;
+        event.preventDefault();
+        (_a = attributes === null || attributes === void 0 ? void 0 : attributes.onDragOver) === null || _a === void 0 ? void 0 : _a.call(attributes, event);
+    };
+    const handleDragEnter = (event) => {
+        var _a;
+        highlightToggle.activate();
+        (_a = attributes === null || attributes === void 0 ? void 0 : attributes.onDragEnter) === null || _a === void 0 ? void 0 : _a.call(attributes, event);
+    };
+    const handleDragLeave = (event) => {
+        var _a;
+        // Ignore elements inside the field
+        if (event.currentTarget.contains(event.relatedTarget))
+            return;
+        highlightToggle.deactivate();
+        (_a = attributes === null || attributes === void 0 ? void 0 : attributes.onDragLeave) === null || _a === void 0 ? void 0 : _a.call(attributes, event);
+    };
+    const handleDrop = (event) => {
+        var _a;
+        event.preventDefault();
+        highlightToggle.deactivate();
+        onChange === null || onChange === void 0 ? void 0 : onChange({ name, value: Array.from(event.dataTransfer.files), event });
+        (_a = attributes === null || attributes === void 0 ? void 0 : attributes.onDrop) === null || _a === void 0 ? void 0 : _a.call(attributes, event);
+    };
+    const handleChange = (event) => {
+        var _a;
+        const nextValue = event.target.files;
+        if (!nextValue)
+            return;
+        onChange === null || onChange === void 0 ? void 0 : onChange({ name, event, value: Array.from(nextValue) });
+        (_a = inputAttributes === null || inputAttributes === void 0 ? void 0 : inputAttributes.onChange) === null || _a === void 0 ? void 0 : _a.call(inputAttributes, event);
+    };
+    return (_jsx("div", Object.assign({}, attributes, { className: rootClassNames, onDragOver: handleDragOver, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDrop: handleDrop, children: _jsxs(View, { as: "label", className: s.triggerLayer, padding: 6, borderRadius: "medium", gap: 2, align: "center", textAlign: "center", animated: true, children: [_jsx(View.Item, { children: children }), _jsx(HiddenVisually, { children: _jsx("input", Object.assign({}, inputAttributes, { type: "file", className: s.field, name: name, onChange: handleChange })) })] }) })));
+};
+FileUpload.Trigger = FileUploadTrigger;
+export default FileUpload;

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

@@ -0,0 +1,13 @@
+import type React from "react";
+import type * as G from "../../types/global";
+export type Props = {
+    name: string;
+    children?: React.ReactNode;
+    onChange?: G.ChangeHandler<File[], React.DragEvent<HTMLDivElement> | React.ChangeEvent<HTMLInputElement>>;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"div", Props>;
+    inputAttributes?: G.Attributes<"input">;
+};
+export type TriggerProps = {
+    children: React.ReactNode;
+};

package/dist/components/FormControl/FormControl.d.ts

@@ -0,0 +1,8 @@
+import type * as T from "./FormControl.types";
+declare const FormControl: {
+    (props: T.Props): import("react/jsx-runtime").JSX.Element;
+    Label: (props: T.LabelProps) => import("react/jsx-runtime").JSX.Element;
+    Helper: (props: T.CaptionProps) => import("react/jsx-runtime").JSX.Element;
+    Error: (props: T.CaptionProps) => import("react/jsx-runtime").JSX.Element | null;
+};
+export default FormControl;

package/dist/components/FormControl/FormControl.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import useElementId from "../../hooks/useElementId.js";
+import Text from "../Text/index.js";
+import { Provider, useFormControlPrivate } from "./FormControl.context.js";
+import s from "./FormControl.module.css";
+const getCaptionId = (id, variant) => `${id}-${variant || "caption"}`;
+const FormControl = (props) => {
+    const { children, id: passedId, required, hasError, group, disabled, size } = props;
+    const id = useElementId(passedId);
+    const WrapperTagName = group ? "fieldset" : "div";
+    const [helperRendered, setHelperRendered] = React.useState(false);
+    const [errorRendered, setErrorRendered] = React.useState(false);
+    const describedby = [
+        helperRendered && getCaptionId(id),
+        errorRendered && getCaptionId(id, "error"),
+    ]
+        .filter(Boolean)
+        .join(" ");
+    const attributes = { id, "aria-describedby": describedby };
+    const errorRef = () => {
+        setErrorRendered(true);
+    };
+    const helperRef = () => {
+        setHelperRendered(true);
+    };
+    return (_jsx(WrapperTagName, { children: _jsx(Provider, { value: { required, hasError, errorRef, helperRef, attributes, group, disabled, size }, children: children }) }));
+};
+const FormControlLabel = (props) => {
+    const { children } = props;
+    const { attributes, required, group, disabled, size } = useFormControlPrivate();
+    const id = `${attributes.id}-label`;
+    const tagProps = group
+        ? { as: "legend", attributes: { id } }
+        : {
+            as: "label",
+            attributes: { id, htmlFor: attributes.id },
+        };
+    return (_jsxs(Text, Object.assign({}, tagProps, { variant: size === "large" ? "body-2" : "body-3", weight: "medium", className: s.label, color: disabled ? "disabled" : undefined, children: [children, required && (_jsx(Text, { color: disabled ? "disabled" : "critical", as: "span", children: "*" }))] })));
+};
+/* Private component */
+const FormControlCaption = (props) => {
+    const { children, variant, disabled } = props;
+    const { attributes, size, helperRef, errorRef } = useFormControlPrivate();
+    const id = getCaptionId(attributes.id, variant);
+    const color = variant === "error" ? "critical" : "neutral-faded";
+    const ref = variant === "error" ? errorRef : helperRef;
+    return (_jsx(Text, { as: "span", variant: size === "large" ? "body-3" : "caption-1", color: disabled && !variant ? "disabled" : color, attributes: { id, role: color ? "alert" : undefined, ref }, className: s.caption, children: children }));
+};
+const FormControlHelper = (props) => {
+    const { children } = props;
+    const { disabled } = useFormControlPrivate();
+    return _jsx(FormControlCaption, { disabled: disabled, children: children });
+};
+const FormControlError = (props) => {
+    const { children } = props;
+    const { hasError } = useFormControlPrivate();
+    if (!hasError)
+        return null;
+    return _jsx(FormControlCaption, { variant: "error", children: children });
+};
+FormControl.Label = FormControlLabel;
+FormControl.Helper = FormControlHelper;
+FormControl.Error = FormControlError;
+export default FormControl;

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

@@ -0,0 +1,33 @@
+import type React from "react";
+export type Props = {
+    children: React.ReactNode;
+    size?: "medium" | "large";
+    hasError?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    group?: boolean;
+    id?: string;
+};
+export type LabelProps = {
+    children: React.ReactNode;
+};
+export type CaptionProps = {
+    children: React.ReactNode;
+};
+export type PrivateCaptionProps = CaptionProps & {
+    variant?: "error";
+    disabled?: boolean;
+};
+type Attributes = {
+    [K in keyof React.HTMLAttributes<HTMLElement>]?: React.HTMLAttributes<HTMLElement>[K];
+};
+export type Context = {
+    required?: boolean;
+    group?: boolean;
+    attributes: Attributes & {
+        id: string;
+    };
+    helperRef: () => void;
+    errorRef: () => void;
+} & Pick<Props, "hasError" | "disabled" | "size">;
+export {};

package/dist/components/Hidden/Hidden.d.ts

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

package/dist/components/Hidden/Hidden.js

@@ -0,0 +1,11 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { classNames, responsiveClassNames } from "../../utilities/helpers.js";
+import s from "./Hidden.module.css";
+const Hidden = (props) => {
+    const { as: TagName = "div", children, visibility, hide, displayStyle } = props;
+    const rootClassNames = classNames(s.root, ...responsiveClassNames(s, "--hidden", hide), visibility && s["--visibility"], displayStyle && s[`--display-${displayStyle}`]);
+    if (typeof children === "function")
+        return _jsx(_Fragment, { children: children(rootClassNames) });
+    return _jsx(TagName, { className: rootClassNames, children: children });
+};
+export default Hidden;

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

@@ -0,0 +1,9 @@
+import type React from "react";
+import type * as G from "../../types/global";
+export type Props = {
+    hide?: G.Responsive<boolean>;
+    visibility?: boolean;
+    as?: keyof JSX.IntrinsicElements;
+    displayStyle?: "inline" | "flex";
+    children: ((className: string) => React.ReactNode) | React.ReactNode;
+};

package/dist/components/HiddenVisually/HiddenVisually.d.ts

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

package/dist/components/HiddenVisually/HiddenVisually.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import s from "./HiddenVisually.module.css";
+const HiddenVisually = (props) => {
+    const { children } = props;
+    return _jsx("div", { className: s.root, children: children });
+};
+export default HiddenVisually;

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

@@ -0,0 +1,4 @@
+import type React from "react";
+export type Props = {
+    children?: React.ReactNode;
+};

package/dist/components/Hotkey/Hotkey.d.ts

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

package/dist/components/Hotkey/Hotkey.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Text from "../Text/index.js";
+import { classNames } from "../../utilities/helpers.js";
+import s from "./Hotkey.module.css";
+const Hotkey = (props) => {
+    const { children, active, className, attributes } = props;
+    const rootClassNames = classNames(s.root, active && s["--active"], className);
+    return (_jsx(Text, { as: "kbd", variant: "caption-1", weight: "medium", color: "neutral-faded", className: rootClassNames, attributes: attributes, children: children }));
+};
+export default Hotkey;

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

@@ -0,0 +1,8 @@
+import type React from "react";
+import type * as G from "../../types/global";
+export type Props = {
+    children: React.ReactNode;
+    active?: boolean;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"span", Props>;
+};

package/dist/components/Icon/Icon.d.ts

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

package/dist/components/Icon/Icon.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import getHeightStyles from "../../styles/height/index.js";
+import s from "./Icon.module.css";
+const Icon = (props) => {
+    const { svg: Component, className, color, size = "1em", autoWidth, attributes } = props;
+    const heightStyles = getHeightStyles(size);
+    const rootClassName = classNames(s.root, className, heightStyles === null || heightStyles === void 0 ? void 0 : heightStyles.classNames, color && s[`--color-${color}`], autoWidth && s["--auto"]);
+    const icon = React.isValidElement(Component) ? (Component) : (
+    // @ts-ignore
+    _jsx(Component, {}));
+    const style = Object.assign(Object.assign({}, attributes === null || attributes === void 0 ? void 0 : attributes.style), heightStyles === null || heightStyles === void 0 ? void 0 : heightStyles.variables);
+    return (
+    // All icons are decorative, a11y attributes should be set for buttons wrapping them
+    _jsx("span", Object.assign({}, attributes, { "aria-hidden": "true", className: rootClassName, style: style, children: React.cloneElement(icon, { focusable: false }) })));
+};
+export default Icon;

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

@@ -0,0 +1,10 @@
+import type React from "react";
+import type * as G from "../../types/global";
+export type Props = {
+    svg: React.ReactElement | React.ComponentType;
+    size?: G.Responsive<number | string>;
+    color?: "neutral" | "neutral-faded" | "positive" | "critical" | "warning" | "primary" | "disabled";
+    autoWidth?: boolean;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"span", Props>;
+};

package/dist/components/Image/Image.d.ts

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

package/dist/components/Image/Image.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import s from "./Image.module.css";
+import getRadiusStyles from "../../styles/radius/index.js";
+import getWidthStyles from "../../styles/width/index.js";
+import getHeightStyles from "../../styles/height/index.js";
+const Image = (props) => {
+    const { src, alt, width, height, onLoad, onError, fallback, displayMode = "cover", borderRadius, className, attributes, imageAttributes, } = props;
+    const [status, setStatus] = React.useState("loading");
+    const radiusStyles = getRadiusStyles(borderRadius);
+    const widthStyles = getWidthStyles(width);
+    const heightStyles = getHeightStyles(height);
+    const baseClassNames = classNames(s.root, radiusStyles === null || radiusStyles === void 0 ? void 0 : radiusStyles.classNames, widthStyles === null || widthStyles === void 0 ? void 0 : widthStyles.classNames, heightStyles === null || heightStyles === void 0 ? void 0 : heightStyles.classNames, displayMode && s[`--display-mode-${displayMode}`], className);
+    const imgClassNames = classNames(s.image, baseClassNames);
+    const fallbackClassNames = classNames(s.fallback, baseClassNames);
+    const style = Object.assign(Object.assign({}, widthStyles === null || widthStyles === void 0 ? void 0 : widthStyles.variables), heightStyles === null || heightStyles === void 0 ? void 0 : heightStyles.variables);
+    const handleLoad = (e) => {
+        setStatus("success");
+        onLoad === null || onLoad === void 0 ? void 0 : onLoad(e);
+    };
+    const handleError = (e) => {
+        setStatus("error");
+        onError === null || onError === void 0 ? void 0 : onError(e);
+    };
+    React.useEffect(() => {
+        setStatus("loading");
+    }, [src]);
+    if ((status === "error" || !src) && !!fallback) {
+        if (typeof fallback === "string") {
+            return (_jsx("img", Object.assign({}, attributes, { src: fallback, alt: alt, role: alt ? undefined : "presentation", className: fallbackClassNames, style: style })));
+        }
+        return (_jsx("div", Object.assign({}, attributes, { className: fallbackClassNames, style: style, children: fallback })));
+    }
+    return (_jsx("img", Object.assign({}, attributes, imageAttributes, { src: src, alt: alt, role: alt ? undefined : "presentation", onLoad: handleLoad, onError: handleError, className: imgClassNames, style: style })));
+};
+export default Image;

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

@@ -0,0 +1,19 @@
+import type React from "react";
+import type * as G from "../../types/global";
+import type * as TStyles from "../../styles/types";
+export type Props = {
+    src?: string;
+    alt?: string;
+    width?: G.Responsive<string | number>;
+    height?: G.Responsive<string | number>;
+    onLoad?: (e: React.SyntheticEvent) => void;
+    onError?: (e: React.SyntheticEvent) => void;
+    fallback?: string | React.ReactNode | boolean;
+    displayMode?: "cover" | "contain";
+    borderRadius?: Extract<TStyles.Radius, "small" | "medium" | "large">;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"div", Props & {
+        ref: any;
+    }>;
+    imageAttributes?: G.Attributes<"img", Props>;
+};

package/dist/components/Link/Link.js

@@ -0,0 +1,12 @@
+import { 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 Icon from "../Icon/index.js";
+import s from "./Link.module.css";
+const Link = (props, ref) => {
+    const { icon, disabled, href, color = "primary", variant = "underline", className, children, attributes, type, onClick, } = props;
+    const rootClassNames = classNames(s.root, className, disabled && s["--disabled"], variant && s[`--variant-${variant}`], color && s[`--color-${color}`], icon && s["--with-icon"]);
+    return (_jsxs(Actionable, { href: href, disabled: disabled, className: rootClassNames, attributes: attributes, type: type, onClick: onClick, ref: ref, children: [icon && _jsx(Icon, { svg: icon }), children] }));
+};
+export default React.forwardRef(Link);

package/dist/components/Loader/Loader.d.ts

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

package/dist/components/Loader/Loader.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames, responsiveClassNames } from "../../utilities/helpers.js";
+import s from "./Loader.module.css";
+const Loader = (props) => {
+    const { size = "small", color = "primary", className, attributes } = props;
+    const ariaLabel = attributes === null || attributes === void 0 ? void 0 : attributes["aria-label"];
+    const rootClassNames = classNames(s.root, className, responsiveClassNames(s, "--size", size), color && s[`--color-${color}`]);
+    return (_jsx("span", Object.assign({}, attributes, { role: "progressbar", "aria-live": ariaLabel ? "assertive" : undefined, "aria-label": ariaLabel, className: rootClassNames, children: _jsx("span", { className: s.inner }) })));
+};
+export default Loader;

package/dist/components/MenuItem/MenuItem.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/helpers.js";
+import Actionable from "../Actionable/index.js";
+import Icon from "../Icon/index.js";
+import View from "../View/index.js";
+import MenuItemAligner from "./MenuItemAligner.js";
+import s from "./MenuItem.module.css";
+const MenuItemBase = (props, ref) => {
+    const { icon, startSlot, endSlot, children, color = "primary", selected, disabled, onClick, href, size = "medium", roundedCorners, className, attributes, } = props;
+    const rootClassNames = classNames(s.root, className, responsiveClassNames(s, "--size", size), responsiveClassNames(s, "--rounded-corners", roundedCorners), color && s[`--color-${color}`], selected && s["--selected"], disabled && s["--disabled"]);
+    const gapSize = responsivePropDependency(size, (size) => (size === "large" ? 3 : 2));
+    const iconSize = responsivePropDependency(size, (size) => (size === "large" ? 5 : 4));
+    return (_jsx(Actionable, { disabled: disabled, className: rootClassNames, attributes: Object.assign(Object.assign({}, attributes), { "data-rs-aligner-target": true }), onClick: onClick, href: href, ref: ref, children: _jsxs(View, { direction: "row", gap: gapSize, align: "center", children: [icon && _jsx(Icon, { svg: icon, className: s.icon, size: iconSize }), !icon && startSlot, children && (_jsx(View.Item, { grow: true, className: s.content, children: children })), endSlot] }) }));
+};
+const MenuItem = React.forwardRef(MenuItemBase);
+MenuItem.Aligner = MenuItemAligner;
+export default MenuItem;

package/dist/components/MenuItem/MenuItemAligner.d.ts

@@ -0,0 +1,3 @@
+import { type AlignerProps } from "../_private/Aligner";
+declare const MenuItemAligner: (props: AlignerProps) => import("react/jsx-runtime").JSX.Element;
+export default MenuItemAligner;