@arc-ui/components 10.0.3 → 10.2.0

package/dist/TextInput/index.d.ts

@@ -0,0 +1,71 @@
+/// <reference types="react" />
+import React from "react";
+import { FC } from "react";
+import { FormControlProps } from "../_shared/FormControl-9dc9ecc3";
+type EventType = React.ChangeEvent<HTMLInputElement>;
+/**
+ * Use `TextInput` to allow custom user text entry with a keyboard.
+ */
+declare const TextInput: FC<TextInputProps>;
+interface TextInputProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus"> {
+    /**
+     * Uncontrolled default value of the TextInput. If the TextInput is controlled
+     * via `value`/`onChange`, `defaultValue` will be ignored.
+     */
+    defaultValue?: string;
+    /**
+     * ID for the TextInput.
+     */
+    id: string;
+    /**
+     * Mode for the input. If not defined, inferred by type.
+     */
+    inputMode?: "email" | "numeric" | "tel" | "url";
+    /**
+     * Should the control be disabled?
+     */
+    isDisabled?: boolean;
+    /**
+     * Should the control be read-only?
+     */
+    isReadOnly?: boolean;
+    /**
+     * Should the control be required?
+     */
+    isRequired?: boolean;
+    /**
+     * Maximum number of characters.
+     */
+    maxLength?: number;
+    /**
+     * Minimum number of characters.
+     */
+    minLength?: number;
+    /**
+     * Name of the input.
+     */
+    name?: string;
+    /**
+     * Function to call when the TextInput loses focus.
+     */
+    onBlur?: (e: EventType) => void;
+    /**
+     * Callback function commonly used to update the TextInput's controlled
+     * `value`, for example `e => setValue(e.target.value)`.
+     */
+    onChange?: (e: EventType) => void;
+    /**
+     * Validation regex pattern.
+     */
+    pattern?: string;
+    /**
+     * Type for the input. `number` will be changed to `text` and set the `numeric` inputMode.
+     */
+    type?: "email" | "number" | "password" | "tel" | "text" | "url";
+    /**
+     * Current value of the TextInput. Must be controlled via an
+     * `onChange` callback function. Otherwise, use `defaultValue` (or `isReadOnly`).
+     */
+    value?: string;
+}
+export { TextInput };

package/dist/TextInput/index.js

@@ -0,0 +1,56 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/index-e3c83626.js';
+import { c as classNames } from '../_shared/index-56d9df62.js';
+import React, { forwardRef, useContext } from 'react';
+import { u as useAriaDescribedby, F as FormControl } from '../_shared/FormControl-9dc9ecc3.js';
+import { C as Context } from '../_shared/Surface-3fe44a2a.js';
+
+/**
+ * Infer the correct inputMode, pattern and type if specifying a `number` type.
+ */
+var useNumericInput = function (props) {
+    var type = props.type === "number" ? "text" : props.type;
+    var inputMode = props.inputMode;
+    if (!props.inputMode) {
+        if (props.type === "email") {
+            inputMode = "email";
+        }
+        else if (props.type === "number") {
+            inputMode = "numeric";
+        }
+        else if (props.type === "tel") {
+            inputMode = "tel";
+        }
+        else if (props.type === "url") {
+            inputMode = "url";
+        }
+    }
+    var pattern = props.pattern;
+    if (!props.pattern && props.type === "number") {
+        pattern = "[0-9]*";
+    }
+    return { inputMode: inputMode, pattern: pattern, type: type };
+};
+
+/**
+ * Use `TextInput` to allow custom user text entry with a keyboard.
+ */
+var TextInput = forwardRef(function (_a, ref) {
+    var _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, inputMode = _a.inputMode, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isReadOnly, isReadOnly = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, label = _a.label, _f = _a.labelSize, labelSize = _f === void 0 ? "l" : _f, maxLength = _a.maxLength, minLength = _a.minLength, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, pattern = _a.pattern, _g = _a.type, type = _g === void 0 ? "text" : _g, value = _a.value, props = __rest(_a, ["defaultValue", "errorMessage", "helper", "id", "inputMode", "isDisabled", "isReadOnly", "isRequired", "label", "labelSize", "maxLength", "minLength", "name", "onBlur", "onChange", "pattern", "type", "value"]);
+    var surface = useContext(Context).surface;
+    var inferredInputProps = useNumericInput({ inputMode: inputMode, pattern: pattern, type: type });
+    // Although this is used within FormControlWrapper, it's deterministic so we can call it here too
+    var ariaDescribedby = useAriaDescribedby({
+        errorMessage: errorMessage,
+        id: id,
+        helper: helper
+    }).ariaDescribedby;
+    return (React.createElement("div", __assign({ className: classNames({
+            "arc-TextInput": true,
+            "arc-TextInput--invalid": errorMessage,
+            "arc-TextInput--onDarkSurface": surface === "dark"
+        }) }, filterDataAttrs(props)),
+        React.createElement(FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, label: label, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional" },
+            React.createElement("input", __assign({ "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", className: "arc-TextInput-input", defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, id: id, maxLength: maxLength, minLength: minLength, name: name, onChange: onChange, onBlur: onBlur, readOnly: isReadOnly, ref: ref, required: isRequired, value: typeof value !== "undefined" ? value : undefined }, inferredInputProps)))));
+});
+
+export { TextInput };

package/dist/UniversalHeader/index.d.ts

@@ -0,0 +1,26 @@
+import { FC, ReactNode } from "react";
+/**
+ * Use `UniversalHeader` to display a group-level page header.
+ */
+declare const UniversalHeader: FC<UniversalHeaderProps> & {
+    Item: typeof UniversalHeaderItem;
+};
+declare const UniversalHeaderItem: FC<UniversalHeaderItemProps>;
+interface UniversalHeaderItemProps {
+    /**
+     * Contents of the UniversalHeaderItem.
+     */
+    children: ReactNode;
+    /**
+     * A URL to link to when the Item is clicked or touched.
+     */
+    href: string;
+}
+interface UniversalHeaderProps {
+    /**
+     * Contents of the UniversalHeader. Must be
+     * UniversalHeader.Item components.
+     */
+    children: ReactNode;
+}
+export { UniversalHeader };

package/dist/UniversalHeader/index.js

@@ -0,0 +1,30 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/index-e3c83626.js';
+import React, { useEffect } from 'react';
+import { S as Surface } from '../_shared/Surface-3fe44a2a.js';
+import '../_shared/index-56d9df62.js';
+
+/**
+ * Use `UniversalHeader` to display a group-level page header.
+ */
+var UniversalHeader = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    useEffect(function () {
+        React.Children.map(children, function (item) {
+            if (item && item.type !== UniversalHeaderItem) {
+                throw new Error("Illegal child passed to <UniversalHeader />. Ensure to only use <UniversalHeader.Item />.");
+            }
+        });
+    }, [children]);
+    return (React.createElement("nav", __assign({ className: "arc-UniversalHeader" }, filterDataAttrs(props)),
+        React.createElement(Surface, { background: "light" },
+            React.createElement("ul", { className: "arc-UniversalHeader-items" }, children))));
+};
+var UniversalHeaderItem = function (_a) {
+    var children = _a.children, href = _a.href, props = __rest(_a, ["children", "href"]);
+    return (React.createElement("li", __assign({}, filterDataAttrs(props)),
+        React.createElement("a", { className: "arc-UniversalHeader-link", href: href }, children)));
+};
+UniversalHeaderItem.displayName = "UniversalHeader.Item";
+UniversalHeader.Item = UniversalHeaderItem;
+
+export { UniversalHeader };

package/dist/VerticalSpace/index.d.ts

@@ -0,0 +1,18 @@
+import { FC } from "react";
+/**
+ * Use `VerticalSpace` to create vertical space between components.
+ */
+declare const VerticalSpace: FC<VerticalSpaceProps>;
+type VerticalSpaceSize = "4" | "8" | "12" | "16" | "24" | "32" | "48" | "64" | "96" | "128";
+interface VerticalSpaceProps {
+    /**
+     * Should the VerticalSpace be visible for debugging and documentation
+     * purposes?
+     */
+    isDebugVisible?: boolean;
+    /**
+     * Size of the VerticalSpace.
+     */
+    size?: VerticalSpaceSize;
+}
+export { VerticalSpace };

package/dist/VerticalSpace/index.js

@@ -0,0 +1,19 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/index-e3c83626.js';
+import { c as classNames } from '../_shared/index-56d9df62.js';
+import React from 'react';
+
+/**
+ * Use `VerticalSpace` to create vertical space between components.
+ */
+var VerticalSpace = function (_a) {
+    var _b;
+    var _c = _a.isDebugVisible, isDebugVisible = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? "24" : _d, props = __rest(_a, ["isDebugVisible", "size"]);
+    return (React.createElement("div", __assign({ className: classNames((_b = {
+                "arc-VerticalSpace": true
+            },
+            _b["arc-VerticalSpace--size".concat(size)] = size && size !== "24",
+            _b["arc-VerticalSpace--debugVisible"] = isDebugVisible,
+            _b)) }, filterDataAttrs(props))));
+};
+
+export { VerticalSpace };

package/dist/_shared/BrandLogo-6cc8202e.d.ts

@@ -0,0 +1,26 @@
+import { FC } from "react";
+/**
+ * Use `BrandLogo` to display the brand logo.
+ */
+declare const BrandLogo: FC<BrandLogoProps>;
+declare const colors: readonly ["auto", "brand"];
+declare const subBrands: readonly ["redcare", "wholesale"];
+interface BrandLogoProps {
+    /**
+     * Color of the BrandLogo. The `brand` color only shows on light surfaces.
+     */
+    color?: typeof colors[number];
+    /**
+     * Accessible text for the BrandLogo.
+     */
+    label?: string;
+    /**
+     * Size of the BrandLogo, in pixels.
+     */
+    size?: number;
+    /**
+     * Optional sub-brand variant. Only applies to BT.
+     */
+    subBrand?: typeof subBrands[number];
+}
+export { BrandLogo, colors, subBrands, BrandLogoProps };

package/dist/_shared/BrandLogo-6cc8202e.js

@@ -0,0 +1,25 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-e3c83626.js';
+import { c as classNames } from './index-56d9df62.js';
+import React, { useContext } from 'react';
+import { s as suffixModifier } from './suffix-modifier-2a93822c.js';
+import { C as Context } from './Surface-3fe44a2a.js';
+
+/**
+ * Use `BrandLogo` to display the brand logo.
+ */
+var BrandLogo = function (_a) {
+    var _b;
+    var _c = _a.color, color = _c === void 0 ? "auto" : _c, label = _a.label, _d = _a.size, size = _d === void 0 ? 34 : _d, subBrand = _a.subBrand, props = __rest(_a, ["color", "label", "size", "subBrand"]);
+    var surface = useContext(Context).surface;
+    return (React.createElement("div", __assign({ className: classNames((_b = {
+                "arc-BrandLogo": true,
+                "arc-BrandLogo--colorBrand": color === "brand",
+                "arc-BrandLogo--onDarkSurface": surface === "dark"
+            },
+            _b[suffixModifier("arc-BrandLogo--subBrand", subBrand || "")] = subBrand,
+            _b)), style: {
+            width: size !== 34 ? size : undefined
+        } }, filterDataAttrs(props)), label ? React.createElement("span", { className: "arc-BrandLogo-text" }, label) : null));
+};
+
+export { BrandLogo as B };

package/dist/_shared/Button-abfb12d4.d.ts

@@ -0,0 +1,98 @@
+/// <reference types="react" />
+import { icons } from "@arc-ui/tokens";
+import React from "react";
+import { FC } from "react";
+type ElementUnion = HTMLButtonElement | HTMLAnchorElement;
+type Ref = React.Ref<ElementUnion> | null;
+/**
+ * Use `Button` to allow users to take actions with clicks and taps.
+ */
+declare const Button: FC<ButtonProps>;
+interface ButtonIconProps {
+    /**
+     * Icon variant.
+     */
+    icon?: typeof icons[number];
+    /**
+     * Should the icon be a default chevron?
+     */
+    isChevron?: boolean;
+    /**
+     * Should the icon be positioned before button text?
+     */
+    isBeforeText?: boolean;
+}
+interface ButtonElementProps {
+    /**
+     * Default behavior of the Button element. If not provided, 'submit' will
+     * be inferred. Type 'reset' deliberately excluded.
+     */
+    type?: "button" | "submit";
+}
+interface LinkElementProps {
+    /**
+     * URL to link to if Button elementType is 'a'.
+     */
+    href?: string;
+    /**
+     * Target window for the Button href URL.
+     */
+    target?: string;
+    /**
+     * Relationship between the Button href URL and the current page. See
+     * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).
+     */
+    rel?: string;
+}
+interface ButtonProps extends ButtonElementProps, LinkElementProps {
+    /**
+     * Text to override `label` with additional, more precise information
+     * specifically for screen reader users.
+     */
+    ariaLabel?: string;
+    /**
+     * Button fill.
+     */
+    fill?: "solid" | "outlined" | "flat";
+    /**
+     * Button icon variant.
+     */
+    icon?: typeof icons[number];
+    /**
+     * How should a Button icon be displayed?
+     */
+    iconPosition?: "afterText" | "beforeText" | "iconOnly";
+    /**
+     * HTML ID for the Button
+     */
+    id?: string;
+    /**
+     * Should the Button be disabled?
+     */
+    isDisabled?: boolean;
+    /**
+     * Should the Button’s CSS display property be set to block?
+     */
+    isDisplayBlock?: boolean;
+    /**
+     * Should the Button take up the full width of its container?
+     */
+    isFullWidth?: boolean;
+    /**
+     * Button text.
+     */
+    label: string;
+    /**
+     * Optional click handler for the Button.
+     */
+    onClick?: () => void;
+    /**
+     * Optional property to provide component Ref
+     */
+    ref?: Ref;
+    /**
+     * Optional supporting text for the Button.
+     */
+    supportingText?: string;
+}
+export { ElementUnion, Ref, Button, ButtonIconProps, ButtonProps };

package/dist/_shared/Button-abfb12d4.js

@@ -0,0 +1,51 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-e3c83626.js';
+import { c as classNames } from './index-56d9df62.js';
+import React, { forwardRef, useContext } from 'react';
+import { s as suffixModifier } from './suffix-modifier-2a93822c.js';
+import { I as Icon } from './Icon-4d523b46.js';
+import { C as Context } from './Surface-3fe44a2a.js';
+
+/**
+ * Use `Button` to allow users to take actions with clicks and taps.
+ */
+var Button = forwardRef(function (_a, ref) {
+    var _b;
+    var ariaLabel = _a.ariaLabel, _c = _a.fill, fill = _c === void 0 ? "solid" : _c, href = _a.href, icon = _a.icon, _d = _a.iconPosition, iconPosition = _d === void 0 ? "afterText" : _d, id = _a.id, _e = _a.isDisabled, isDisabled = _e === void 0 ? false : _e, _f = _a.isDisplayBlock, isDisplayBlock = _f === void 0 ? false : _f, _g = _a.isFullWidth, isFullWidth = _g === void 0 ? false : _g, label = _a.label, onClick = _a.onClick, rel = _a.rel, supportingText = _a.supportingText, target = _a.target, type = _a.type, props = __rest(_a, ["ariaLabel", "fill", "href", "icon", "iconPosition", "id", "isDisabled", "isDisplayBlock", "isFullWidth", "label", "onClick", "rel", "supportingText", "target", "type"]);
+    var surface = useContext(Context).surface;
+    var buttonClasses = classNames((_b = {
+            "arc-Button": true,
+            "arc-Button--displayBlock": isDisplayBlock
+        },
+        _b[suffixModifier("arc-Button--fill", fill)] = fill !== "solid",
+        _b["arc-Button--fullWidth"] = isFullWidth,
+        _b[suffixModifier("arc-Button--icon", iconPosition.replace("icon", ""))] = (icon || fill === "flat") &&
+            iconPosition &&
+            iconPosition !== "afterText",
+        _b["arc-Button--hasSupportingText"] = supportingText,
+        _b["arc-Button--onDarkSurface"] = surface === "dark",
+        _b));
+    var commonProps = __assign({ id: id, onClick: onClick, ref: ref }, filterDataAttrs(props));
+    var buttonText = supportingText ? (React.createElement("span", null,
+        React.createElement("span", { className: "arc-Button-text" }, label),
+        React.createElement("span", { className: "arc-Button-supportingText" }, supportingText))) : (React.createElement("span", { className: "arc-Button-text" }, label));
+    var buttonIcon = icon || fill === "flat" ? (React.createElement(ButtonIcon, { icon: icon, isChevron: !icon && fill === "flat", isBeforeText: iconPosition === "beforeText" })) : null;
+    if (href && !isDisabled) {
+        return (React.createElement("a", __assign({}, commonProps, { "aria-label": ariaLabel, className: buttonClasses, href: href, rel: rel, target: target }),
+            React.createElement("span", { className: "arc-Button-inner" },
+                buttonText,
+                buttonIcon)));
+    }
+    return (React.createElement("button", __assign({}, commonProps, { "aria-label": ariaLabel, className: buttonClasses, disabled: isDisabled, type: type }),
+        React.createElement("span", { className: "arc-Button-inner" },
+            buttonText,
+            buttonIcon)));
+});
+var ButtonIcon = function (_a) {
+    var icon = _a.icon, isChevron = _a.isChevron, isBeforeText = _a.isBeforeText;
+    return (React.createElement("span", { className: classNames({
+            "arc-Button-icon": true,
+            "arc-Button-icon--chevron": isChevron
+        }) }, isChevron ? (React.createElement(Icon, { icon: "btChevron".concat(isBeforeText ? "Left" : "Right", "2px") })) : (React.createElement(Icon, { icon: icon }))));
+};
+
+export { Button as B };

package/dist/_shared/Curve-5f476d0b.d.ts

@@ -0,0 +1,32 @@
+import { FC } from "react";
+import { backgroundsBT } from "../Surface/index";
+/**
+ * Use `Curve` sparingly to soften edges and create a more natural, less rigid
+ * look and feel.
+ */
+declare const Curve: FC<CurveProps>;
+declare const sizes: readonly ["s", "m", "l"];
+declare const positions: readonly ["bottom", "bottomLeft", "bottomRight", "top", "topLeft", "topRight"];
+interface CurveProps {
+    /**
+     * Bottom color of the Curve. Shares values with Surface.
+     */
+    bottomColor?: typeof backgroundsBT[number];
+    /**
+     * Positional variants of the Curve.
+     */
+    from?: typeof positions[number];
+    /**
+     * Should the Curve colors be flipped? Normally used at the top of Poster.
+     */
+    isInverted?: boolean;
+    /**
+     * Size of the Curve.
+     */
+    size?: typeof sizes[number];
+    /**
+     * Top color of the Curve. Shares values with Surface.
+     */
+    topColor?: typeof backgroundsBT[number];
+}
+export { Curve, sizes, positions, CurveProps };

package/dist/_shared/Curve-5f476d0b.js

@@ -0,0 +1,24 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-e3c83626.js';
+import { c as classNames } from './index-56d9df62.js';
+import React from 'react';
+import { s as suffixModifier } from './suffix-modifier-2a93822c.js';
+
+/**
+ * Use `Curve` sparingly to soften edges and create a more natural, less rigid
+ * look and feel.
+ */
+var Curve = function (_a) {
+    var _b;
+    var bottomColor = _a.bottomColor, _c = _a.from, from = _c === void 0 ? "top" : _c, _d = _a.isInverted, isInverted = _d === void 0 ? false : _d, _e = _a.size, size = _e === void 0 ? "m" : _e, topColor = _a.topColor, props = __rest(_a, ["bottomColor", "from", "isInverted", "size", "topColor"]);
+    return (React.createElement("div", __assign({ className: classNames((_b = {
+                "arc-Curve": true
+            },
+            _b[suffixModifier("arc-Curve--from", from)] = from && from !== "top",
+            _b["arc-Curve--size".concat(size && size.toUpperCase())] = size && size !== "m",
+            _b[suffixModifier("arc-Curve--bottomColor", bottomColor || "")] = bottomColor,
+            _b[suffixModifier("arc-Curve--topColor", topColor || "")] = topColor,
+            _b["arc-Curve--inverted"] = isInverted,
+            _b)) }, filterDataAttrs(props))));
+};
+
+export { Curve as C };

package/dist/_shared/FormControl-9dc9ecc3.d.ts

@@ -0,0 +1,70 @@
+/// <reference types="react" />
+import React from "react";
+import { FC } from "react";
+/**
+ * Optionally define ariaDescribedBy if errorMessage or helper exist.
+ */
+declare const useAriaDescribedby: ({ id, idError, idHelper, errorMessage, helper }: {
+    id?: string | undefined;
+    idError?: string | undefined;
+    idHelper?: string | undefined;
+    errorMessage?: any;
+    helper?: any;
+}) => {
+    ariaDescribedby: undefined;
+    idHelper: undefined;
+    idError: undefined;
+} | {
+    ariaDescribedby: string | undefined;
+    idError: string;
+    idHelper: string;
+};
+type RequirementStatus = "required" | "optional" | "not-applicable";
+declare const Context: React.Context<{
+    requirementStatus: RequirementStatus | null;
+}>;
+/**
+ * Use `FormControl` to provide inputs with labels, helper text and error messages
+ */
+declare const FormControl: FC<FormControlProps>;
+interface FormControlProps {
+    /**
+     * Render the input or series of inputs
+     */
+    children: React.ReactNode;
+    /**
+     * HTML Element type for the FormControl.
+     * @default 'div'
+     */
+    elementType?: "div" | "fieldset";
+    /**
+     * Error message for the FormControl.
+     */
+    errorMessage?: string;
+    /**
+     * Helper text for the FormControl, shown below the label.
+     */
+    helper?: React.ReactNode;
+    /**
+     * ID for the input that the FormControl points towards.
+     */
+    htmlFor?: string;
+    /**
+     * ID for the FormControl. Used for helper and errorMessage if `htmlFor` is undefined.
+     */
+    id?: string;
+    /**
+     * Are all of the inputs in the FormControl required, optional, or is a
+     * uniform requirement status for all inputs not applicable?
+     */
+    requirementStatus?: RequirementStatus;
+    /**
+     * Label for the FormControl.
+     */
+    label: string;
+    /**
+     * Label size.
+     */
+    labelSize?: "s" | "l";
+}
+export { useAriaDescribedby, FormControl, FormControlProps, Context as FormControlContext };

package/dist/_shared/FormControl-9dc9ecc3.js

@@ -0,0 +1,74 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-e3c83626.js';
+import { c as classNames } from './index-56d9df62.js';
+import React, { createContext, useContext } from 'react';
+import { C as Context$1 } from './Surface-3fe44a2a.js';
+
+/**
+ * Optionally define ariaDescribedBy if errorMessage or helper exist.
+ */
+var useAriaDescribedby = function (_a) {
+    var id = _a.id, _b = _a.idError, idError = _b === void 0 ? "".concat(id, "-error") : _b, _c = _a.idHelper, idHelper = _c === void 0 ? "".concat(id, "-helper") : _c, errorMessage = _a.errorMessage, helper = _a.helper;
+    if (!id) {
+        return {
+            ariaDescribedby: undefined,
+            idHelper: undefined,
+            idError: undefined
+        };
+    }
+    var ariaDescribedbyArr = [];
+    if (errorMessage) {
+        ariaDescribedbyArr.push(idError);
+    }
+    if (helper) {
+        ariaDescribedbyArr.push(idHelper);
+    }
+    var ariaDescribedby = ariaDescribedbyArr.length > 0 ? ariaDescribedbyArr.join(" ") : undefined;
+    return { ariaDescribedby: ariaDescribedby, idError: idError, idHelper: idHelper };
+};
+
+var defaultContext = {
+    requirementStatus: null
+};
+var Context = createContext(defaultContext);
+var Provider = Context.Provider;
+/**
+ * Use `FormControl` to provide inputs with labels, helper text and error messages
+ */
+var FormControl = function (_a) {
+    var children = _a.children, _b = _a.elementType, ElementType = _b === void 0 ? "div" : _b, errorMessage = _a.errorMessage, helper = _a.helper, htmlFor = _a.htmlFor, id = _a.id, label = _a.label, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, _d = _a.requirementStatus, requirementStatus = _d === void 0 ? "optional" : _d, props = __rest(_a, ["children", "elementType", "errorMessage", "helper", "htmlFor", "id", "label", "labelSize", "requirementStatus"]);
+    var surface = useContext(Context$1).surface;
+    var _e = useAriaDescribedby({
+        errorMessage: errorMessage,
+        helper: helper,
+        id: htmlFor || id // `htmlFor` is preference to keep this deterministic with TextInput
+    }), ariaDescribedby = _e.ariaDescribedby, idError = _e.idError, idHelper = _e.idHelper;
+    var LabelType = ElementType === "div" ? "label" : "legend";
+    var elementProps = {};
+    var labelProps = {};
+    if (LabelType === "label") {
+        labelProps["htmlFor"] = htmlFor;
+        if (htmlFor) {
+            labelProps["id"] = "".concat(htmlFor, "-label");
+        }
+        else if (id) {
+            labelProps["id"] = "".concat(id, "-label");
+        }
+    }
+    else {
+        elementProps["aria-describedby"] = ariaDescribedby;
+    }
+    return (React.createElement(Provider, { value: { requirementStatus: requirementStatus } },
+        React.createElement(ElementType, __assign({ className: classNames({
+                "arc-FormControl": true,
+                "arc-FormControl--smallLabel": labelSize === "s",
+                "arc-FormControl--onDarkSurface": surface === "dark"
+            }), id: id }, elementProps, filterDataAttrs(props)),
+            React.createElement(LabelType, __assign({ className: "arc-FormControl-label" }, labelProps),
+                label,
+                requirementStatus === "optional" && (React.createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)"))),
+            helper && (React.createElement("div", { className: "arc-FormControl-helper", id: idHelper }, helper)),
+            children,
+            errorMessage && (React.createElement("div", { className: "arc-FormControl-error", id: idError }, errorMessage)))));
+};
+
+export { Context as C, FormControl as F, useAriaDescribedby as u };