reshaped 2.8.0 → 2.8.1

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
+import HiddenInput from "../_private/HiddenInput/index.js";
+import { useFormControl } from "../FormControl/index.js";
+import { useCheckboxGroup } from "../CheckboxGroup/index.js";
+import Icon from "../Icon/index.js";
+import IconCheckmark from "../../icons/Checkmark.js";
+import s from "./Checkbox.module.css";
+const Checkbox = (props) => {
+    var _a;
+    const { children, value, onChange, onFocus, onBlur, indeterminate, className, attributes, inputAttributes, } = props;
+    const checkboxGroup = useCheckboxGroup();
+    const formControl = useFormControl();
+    const hasError = (formControl === null || formControl === void 0 ? void 0 : formControl.hasError) || props.hasError || (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.hasError);
+    const disabled = (formControl === null || formControl === void 0 ? void 0 : formControl.disabled) || props.disabled || (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.disabled);
+    const checked = checkboxGroup ? (_a = checkboxGroup.value) === null || _a === void 0 ? void 0 : _a.includes(value) : props.checked;
+    const defaultChecked = checkboxGroup ? undefined : props.defaultChecked;
+    const name = checkboxGroup ? checkboxGroup.name : props.name;
+    const inputRef = React.useRef(null);
+    const rootClassName = classNames(s.root, className, hasError && s["--error"], disabled && s["--disabled"]);
+    const handleChange = (event) => {
+        if (!name)
+            return;
+        const { checked } = event.target;
+        const changeArgs = { name, value, checked, event };
+        if (onChange)
+            onChange(changeArgs);
+        if (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.onChange)
+            checkboxGroup.onChange(changeArgs);
+    };
+    useIsomorphicLayoutEffect(() => {
+        inputRef.current.indeterminate = indeterminate || false;
+    }, [indeterminate, checked]);
+    return (_jsxs("label", Object.assign({}, attributes, { className: rootClassName, children: [_jsxs("span", { className: s.field, children: [_jsx(HiddenInput, { className: s.input, type: "checkbox", checked: checked, defaultChecked: defaultChecked, name: name, disabled: disabled, value: value, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, attributes: Object.assign(Object.assign({}, inputAttributes), { ref: inputRef }) }), _jsx("div", { className: s.decorator, children: _jsx(Icon, { svg: IconCheckmark, className: s.icon }) })] }), children && _jsx("span", { className: s.text, children: children })] })));
+};
+export default Checkbox;

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

@@ -0,0 +1,26 @@
+import type React from "react";
+import type * as G from "../../types/global";
+type BaseProps = {
+    children?: React.ReactNode;
+    name?: string;
+    disabled?: boolean;
+    hasError?: boolean;
+    value?: string;
+    indeterminate?: boolean;
+    onChange?: G.ChangeHandler<boolean>;
+    onFocus?: (e: React.FocusEvent) => void;
+    onBlur?: (e: React.FocusEvent) => void;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"label", Props>;
+    inputAttributes?: G.Attributes<"input", Props>;
+};
+export type ControlledProps = BaseProps & {
+    checked: boolean;
+    defaultChecked?: never;
+};
+export type UncontrolledProps = BaseProps & {
+    checked?: never;
+    defaultChecked?: boolean;
+};
+export type Props = ControlledProps | UncontrolledProps;
+export {};

package/dist/components/CheckboxGroup/CheckboxGroup.d.ts

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

package/dist/components/CheckboxGroup/CheckboxGroup.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import CheckboxGroupControlled from "./CheckboxGroupControlled.js";
+import CheckboxGroupUncontrolled from "./CheckboxGroupUncontrolled.js";
+const CheckboxGroup = (props) => {
+    const { value } = props;
+    if (value !== undefined)
+        return _jsx(CheckboxGroupControlled, Object.assign({}, props));
+    return _jsx(CheckboxGroupUncontrolled, Object.assign({}, props));
+};
+export default CheckboxGroup;

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

@@ -0,0 +1,28 @@
+import type React from "react";
+import type * as G from "../../types/global";
+import type { CheckboxProps } from "../Checkbox";
+type BaseProps = {
+    id?: string;
+    children?: React.ReactNode;
+    hasError?: boolean;
+    disabled?: boolean;
+    name: string;
+    onChange?: G.ChangeHandler<string[]>;
+};
+export type ControlledProps = BaseProps & {
+    value: string[];
+    defaultValue?: never;
+};
+export type UncontrolledProps = BaseProps & {
+    value?: never;
+    defaultValue?: string[];
+};
+export type Props = ControlledProps | UncontrolledProps;
+export type Context = {
+    onChange: CheckboxProps["onChange"];
+    hasError?: boolean;
+    disabled?: boolean;
+    name: string;
+    value?: string[];
+};
+export {};

package/dist/components/CheckboxGroup/CheckboxGroupControlled.d.ts

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

package/dist/components/CheckboxGroup/CheckboxGroupControlled.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import Context from "./CheckboxGroup.context.js";
+const CheckboxGroupControlled = (props) => {
+    const { onChange, name, disabled, value, children, hasError } = props;
+    const handleChange = (args) => {
+        const { event, value: fieldValue, checked } = args;
+        if (!fieldValue)
+            return;
+        let nextValue = [...value];
+        if (checked) {
+            nextValue.push(fieldValue);
+        }
+        else {
+            nextValue = nextValue.filter((v) => v !== fieldValue);
+        }
+        if (onChange)
+            onChange({ name, value: nextValue, event });
+    };
+    return (_jsx(Context.Provider, { value: { onChange: handleChange, disabled, value, name, hasError }, children: children }));
+};
+export default CheckboxGroupControlled;

package/dist/components/CheckboxGroup/CheckboxGroupUncontrolled.d.ts

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

package/dist/components/CheckboxGroup/CheckboxGroupUncontrolled.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import CheckboxGroupControlled from "./CheckboxGroupControlled.js";
+const CheckboxGroupUncontrolled = (props) => {
+    const { defaultValue, onChange } = props;
+    const [value, setValue] = React.useState(defaultValue || []);
+    const handleChange = (args) => {
+        if (!args.value)
+            return;
+        setValue(args.value);
+        if (onChange)
+            onChange(args);
+    };
+    return (_jsx(CheckboxGroupControlled, Object.assign({}, props, { value: value, defaultValue: undefined, onChange: handleChange })));
+};
+export default CheckboxGroupUncontrolled;

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

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

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>;
+};