@arc-ui/components 10.8.0 → 11.0.0

package/dist/SiteHeader/SiteHeader.esm.d.ts

@@ -0,0 +1,252 @@
+/// <reference types="react" />
+import { FC, ReactNode, ReactElement } from "react";
+import { subBrands } from "../_shared/esm/BrandLogo-ea3dd0e6";
+declare const Column: FC<ColumnProps>;
+interface ColumnProps {
+    /**
+     * Contents of the Column. Must be SiteHeader.ItemGroup components.
+     */
+    children: ReactNode;
+}
+declare const Item: FC<ItemProps>;
+interface ItemProps {
+    /**
+     * Contents of the Item. Usually text to be displayed in the Item link.
+     */
+    children: ReactNode;
+    /**
+     * A URL to link to when the Item is clicked or touched.
+     */
+    href: string;
+    /**
+     * Should the Item be emphasised?
+     */
+    isEmphasised?: boolean;
+    /**
+     * On click handler.
+     */
+    onClick?: () => void;
+}
+declare const ItemGroup: FC<ItemGroupProps>;
+interface ItemGroupProps {
+    /**
+     * Contents of the ItemGroup. Must be Item components.
+     */
+    children: ReactNode;
+    /**
+     * A top-level URL for the ItemGroup to link to.
+     */
+    href?: string;
+    /**
+     * Title text to be displayed in the ItemGroup summary.
+     */
+    title?: string;
+    /**
+     * Text to display in top-level link inside the ItemGroup in narrow viewports.
+     * Only applies if `href` is present. If not provided, top-level link text
+     * will be automatically generated from `title`.
+     */
+    viewAllTitle?: string;
+    /**
+     * On click handler.
+     */
+    onClick?: () => void;
+}
+declare const NavItem: FC<NavItemProps>;
+interface NavItemProps {
+    /**
+     * Contents of the NavItem. Must be SiteHeader.ItemGroup or
+     * SiteHeader.Column components.
+     */
+    children?: ReactNode;
+    /**
+     * A top-level URL for the NavItem to link to.
+     *
+     * When `children` are not present, the URL to link to when the NavItem is
+     * clicked or touched.
+     *
+     * When `children` are present, the URL to link to when a top-level link
+     * inside the NavItem panel is clicked or touched.
+     */
+    href?: string;
+    /**
+     * Should the NavItem be highlighted as the current item/page? Only applies if
+     * `children` are not present (and `href` is present).
+     */
+    isCurrent?: boolean;
+    /**
+     * Content to display in the NavItem panel promo area.
+     */
+    promo?: ReactNode;
+    /**
+     * Top-level text to display in the NavItem.
+     */
+    title: string;
+    /**
+     * Text to display in top-level link inside the NavItem panel. Only
+     * applies if both `children` are present and `href` is true. If not
+     * provided, top-level link text will be automatically generated from `title`.
+     */
+    viewAllTitle?: string;
+    /**
+     * On click handler.
+     */
+    onClick?: () => void;
+}
+declare const NavItemWithSubNav: FC<NavItemWithSubNavProps>;
+interface NavItemWithSubNavProps {
+    /**
+     * The URL to link to when a top-level link inside the NavItemWithSubNav panel
+     * is clicked or touched.
+     */
+    href?: string;
+    /**
+     * Content to be displayed in the first slot of the NavItemWithSubNav. Must be
+     * a single SiteHeader.SubNavItem component.
+     */
+    slot1: ReactElement;
+    /**
+     * Content to be displayed in the second slot of the NavItemWithSubNav. Must
+     * be a single SiteHeader.SubNavItem component.
+     */
+    slot2: ReactNode;
+    /**
+     * Content to be displayed in the third slot of the NavItemWithSubNav. Must be
+     * a single SiteHeader.SubNavItem component.
+     */
+    slot3?: ReactNode;
+    /**
+     * Title text to display inside the NavItemWithSubNav panel.
+     */
+    subTitle?: string;
+    /**
+     * Top-level text to display in the NavItemWithSubNav.
+     */
+    title: string;
+    /**
+     * Text to display in top-level link inside the NavItemWithSubNav panel. Only
+     * applies if `href` is true. If not provided, text will be automatically
+     * generated from `title`.
+     */
+    viewAllTitle?: string;
+    /**
+     * view all click handler.
+     */
+    onViewAllClick?: () => void;
+}
+declare const SubNavItem: FC<SubNavItemProps>;
+interface SubNavItemProps {
+    /**
+     * Contents of the SubNavItem. Must be SiteHeader.ItemGroup or
+     * SiteHeader.Column components.
+     */
+    children?: ReactNode;
+    /**
+     * Should the SubNavItem be the default open item in a
+     * SiteHeader.NavItemWithSubNav? If not specified, the default open item will
+     * be set automatically.
+     */
+    isDefaultItem?: boolean;
+    /**
+     * Optionally shift the SubNavItem-link upwards (in "desktop" viewports only)
+     * to close off any empty space between items due to content size.
+     */
+    offsetXL?: "24" | "48";
+    /**
+     * Content to display in the SubNavItem panel promo area.
+     */
+    promo?: ReactNode;
+    /**
+     * A URL to link to when the SubNavItem is clicked or touched. Only applies if
+     * `children` are not present.
+     */
+    href?: string;
+    /**
+     * Optional subtitle text for the SubNavItem.
+     */
+    subTitle?: string;
+    /**
+     * Title text for the SubNavItem.
+     */
+    title: string;
+    /**
+     * Text to display in top-level link inside the SubNavItem panel. Only
+     * applies if both `children` are present and `href` is true. If not
+     * provided, top-level link text will be automatically generated from `title`.
+     */
+    viewAllTitle?: string;
+    /**
+     * On click handler.
+     */
+    onClick?: () => void;
+}
+/**
+ * Use `SiteHeader` to display brand logo and navigation at the top of a page.
+ */
+declare const SiteHeader: FC<SiteHeaderProps> & {
+    Column: typeof Column;
+    Item: typeof Item;
+    ItemGroup: typeof ItemGroup;
+    NavItem: typeof NavItem;
+    NavItemWithSubNav: typeof NavItemWithSubNav;
+    SubNavItem: typeof SubNavItem;
+};
+interface SiteHeaderProps {
+    /**
+     * Contents of the SiteHeader. Must be SiteHeader.NavItem or
+     * SiteHeader.NavItemWithSubNav components.
+     */
+    children?: ReactNode;
+    /**
+     * Basket component for the SiteHeader.
+     */
+    basket?: ReactNode;
+    /**
+     * Should account login links be included in the SiteHeader?
+     */
+    hasLogin?: boolean;
+    /**
+     * Should the SiteHeader have a transparent background?
+     */
+    isTransparent?: boolean;
+    /**
+     * A URL to link to when SiteHeader logo is clicked or touched.
+     */
+    loginHref?: string;
+    /**
+     * A Function to run to when SiteHeader logo is clicked or touched.
+     */
+    logoOnClick?: () => void;
+    /**
+     * A Function to run to when SiteHeader login links are clicked or touched.
+     */
+    loginOnClick?: () => void;
+    /**
+     * Text to display in SiteHeader login links.
+     */
+    loginTitle?: string;
+    /**
+     * A URL to link to when the SiteHeader brand logo link is clicked or touched.
+     */
+    logoHref?: string;
+    /**
+     * Accessible text for the SiteHeader brand logo link.
+     */
+    logoLabel?: string;
+    /**
+     * Search component for the SiteHeader.
+     */
+    search?: ReactNode;
+    /**
+     * Optional sub-brand variant. Only applies to BT.
+     */
+    subBrand?: typeof subBrands[number];
+}
+declare const SiteHeaderRehydrator: {
+    (el: HTMLDivElement, hydrate: any): Promise<JSX.Element>;
+    ItemGroupRehydrator: (el: HTMLLIElement, hydrate: any) => Promise<JSX.Element>;
+    NavItemRehydrator: (el: HTMLLIElement, hydrate: any) => Promise<JSX.Element>;
+    NavItemWithSubNavRehydrator: (el: HTMLLIElement, hydrate: any) => Promise<JSX.Element>;
+    SubNavItemRehydrator: (el: HTMLDivElement, hydrate: any) => Promise<JSX.Element>;
+};
+export { SiteHeader, SiteHeaderRehydrator };

package/dist/SiteHeader/{index.js → SiteHeader.esm.js}

@@ -1,15 +1,17 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs, d as __awaiter, e as __generator } from '../_shared/index-e3c83626.js';
-import { a as ArcBreakpointL } from '../_shared/index.es-ff960629.js';
-import { c as classNames } from '../_shared/index-56d9df62.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs, d as __awaiter, e as __generator } from '../_shared/esm/index-229fc864.js';
+import { u as useMediaQuery, a as ArcBreakpointL } from '../_shared/esm/index.es-00cb3bcb.js';
+import { c as classNames } from '../_shared/esm/index-2ae58626.js';
 import React, { useState, useEffect, Fragment, useContext, useRef, createContext } from 'react';
-import { B as BrandLogo } from '../_shared/BrandLogo-6cc8202e.js';
-import { B as Button } from '../_shared/Button-2fcbd4ed.js';
-import { u as useMediaQuery } from '../_shared/use-media-query-f11805d4.js';
-import { S as Surface } from '../_shared/Surface-3fe44a2a.js';
-import { h as handleLinkClick } from '../_shared/handle-link-click-35e09d0c.js';
-import { s as suffixModifier } from '../_shared/suffix-modifier-2a93822c.js';
-import { T as Text } from '../_shared/Text-1c43d82b.js';
-import '../_shared/Icon-b053f03d.js';
+import { B as BrandLogo } from '../_shared/esm/BrandLogo-ea3dd0e6.js';
+import { B as Button } from '../_shared/esm/Button-5ff56a7b.js';
+import { S as Surface } from '../_shared/esm/Surface-d515d212.js';
+import { B as BtIconChevronDown2Px_2 } from '../_shared/esm/BtIconChevronDown2Px-4abd079b.js';
+import { h as handleLinkClick } from '../_shared/esm/handle-link-click-f64f55a2.js';
+import { a as BtIconChevronRight2Px_2, B as BtIconChevronLeft2Px_2 } from '../_shared/esm/BtIconChevronRight2Px-a5cc1d05.js';
+import { s as suffixModifier } from '../_shared/esm/suffix-modifier-f5e28822.js';
+import { T as Text } from '../_shared/esm/Text-d8988620.js';
+import '../_shared/esm/BtIconChevronRightMid-386cf272.js';
+import '../_shared/esm/Icon-76d0d8c0.js';
 
 var Item = function (_a) {
     var _b;
@@ -18,7 +20,10 @@ var Item = function (_a) {
             _b["arc-SiteHeaderItem"] = true,
             _b["arc-SiteHeaderItem--emphasised"] = isEmphasised,
             _b)) }, filterDataAttrs(props)),
-        React.createElement("a", { onClick: handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderItem-link", href: href }, children)));
+        React.createElement("a", { onClick: handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderItem-link", href: href },
+            isEmphasised && (React.createElement("span", { className: "arc-SiteHeaderItem-linkIcon" },
+                React.createElement(BtIconChevronRight2Px_2, null))),
+            children)));
 };
 
 var ItemGroup = function (_a) {
@@ -44,7 +49,10 @@ var ItemGroup = function (_a) {
         React.createElement(ElementType, __assign({ className: "arc-SiteHeaderItemGroup-details", open: Boolean(title && isMinWidthArcBreakpointL) }, filterDataAttrs(props)),
             title ? (React.createElement("summary", { className: "arc-SiteHeaderItemGroup-summary", tabIndex: isMinWidthArcBreakpointL ? -1 : 0 }, href ? (React.createElement("a", { onClick: handleLinkClick({
                     handler: onClick
-                }), className: "arc-SiteHeaderItemGroup-title", href: href, tabIndex: !hasClientSideJavaScript || isMinWidthArcBreakpointL ? 0 : -1 }, title)) : (React.createElement("div", { className: "arc-SiteHeaderItemGroup-title" }, title)))) : null,
+                }), className: "arc-SiteHeaderItemGroup-title", href: href, tabIndex: !hasClientSideJavaScript || isMinWidthArcBreakpointL ? 0 : -1 },
+                title,
+                React.createElement("span", { className: "arc-SiteHeaderItemGroup-titleIcon" },
+                    React.createElement(BtIconChevronDown2Px_2, null)))) : (React.createElement("div", { className: "arc-SiteHeaderItemGroup-title" }, title)))) : null,
             React.createElement("ul", { className: "arc-SiteHeaderItemGroup-items" },
                 children,
                 href && title ? (React.createElement("li", { className: "arc-SiteHeaderItem arc-SiteHeaderItem--viewAll" },
@@ -101,6 +109,8 @@ var BackButton = function (_a) {
     return (React.createElement("button", { className: "arc-SiteHeaderBackButton", onClick: function () {
             setOpen(false);
         } },
+        React.createElement("span", { className: "arc-SiteHeaderBackButton-icon" },
+            React.createElement(BtIconChevronLeft2Px_2, null)),
         React.createElement("span", { className: "arc-SiteHeaderBackButton-text" }, "Back")));
 };
 
@@ -181,7 +191,10 @@ var Panel = function (_a) {
 };
 var ViewAll = function (_a) {
     var href = _a.href, title = _a.title, onClick = _a.onClick;
-    return (React.createElement("a", { onClick: handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderPanel-viewAll", href: href }, title));
+    return (React.createElement("a", { onClick: handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderPanel-viewAll", href: href },
+        title,
+        React.createElement("span", { className: "arc-SiteHeaderPanel-viewAllIcon" },
+            React.createElement(BtIconChevronRight2Px_2, null))));
 };
 ViewAll.displayName = "Panel.ViewAll";
 Panel.ViewAll = ViewAll;
@@ -191,6 +204,7 @@ var NavItem = function (_a) {
     var children = _a.children, href = _a.href, isCurrent = _a.isCurrent, onClick = _a.onClick, promo = _a.promo, title = _a.title, viewAllTitle = _a.viewAllTitle, props = __rest(_a, ["children", "href", "isCurrent", "onClick", "promo", "title", "viewAllTitle"]);
     var navItem = useRef();
     var _d = useState(false), panelOpen = _d[0], setPanelOpen = _d[1];
+    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
     useEffect(function () {
         React.Children.map(children, function (item) {
             if (item &&
@@ -213,7 +227,9 @@ var NavItem = function (_a) {
                 _c)), onClick: function (e) {
                 e.preventDefault();
                 setPanelOpen(!panelOpen);
-            } }, title),
+            } },
+            React.createElement("span", null, title),
+            React.createElement("span", { className: "arc-SiteHeaderNavItem-linkIcon" }, isMinWidthArcBreakpointL ? (React.createElement(BtIconChevronDown2Px_2, null)) : (React.createElement(BtIconChevronRight2Px_2, null)))),
         React.createElement(Panel, { navItemRef: navItem, open: panelOpen, promo: promo, setOpen: setPanelOpen, viewAll: href ? (React.createElement(Panel.ViewAll, { href: href, onClick: onClick, title: viewAllTitle || "View all ".concat(title.toLowerCase()) })) : (undefined) }, children)))));
 };
 
@@ -297,7 +313,10 @@ var SubNavItem = function (_a) {
                 _c["arc-SiteHeaderSubNavItem-link--itemHasChildren"] = children,
                 _c)), onClick: function () {
                 setPanelOpen(true);
-            } }, linkTitle),
+            } },
+            linkTitle,
+            children && (React.createElement("span", { className: "arc-SiteHeaderSubNavItem-linkIcon" },
+                React.createElement(BtIconChevronRight2Px_2, null)))),
         React.createElement(Panel, { navItemRef: navItem, open: panelOpen, setOpen: setPanelOpen, subNavItemRef: subNavItem, subNavLink: "arc-SiteHeaderSubNavItem-link", promo: promo, title: React.createElement("span", null,
                 title,
                 subTitle && (React.createElement(Text, { size: "xs", tone: "supporting" }, subTitle))), viewAll: href ? (React.createElement(Panel.ViewAll, { href: href, onClick: onClick, title: viewAllTitle || "View all ".concat(title.toLowerCase()) })) : (undefined) }, children)))));
@@ -368,6 +387,7 @@ var NavItemWithSubNav = function (_a) {
     var navItem = useRef();
     var _e = useState(true), defaultItem = _e[0], setDefaultItem = _e[1];
     var _f = useState(false), panelOpen = _f[0], setPanelOpen = _f[1];
+    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
     useEffect(function () {
         React.Children.map(slot1, function (item) {
             if (item && item.type !== SubNavItem && item.type !== Fragment) {
@@ -405,7 +425,9 @@ var NavItemWithSubNav = function (_a) {
                     _c)), onClick: function (e) {
                     e.preventDefault();
                     setPanelOpen(!panelOpen);
-                } }, title),
+                } },
+                title,
+                React.createElement("span", { className: "arc-SiteHeaderNavItem-linkIcon" }, isMinWidthArcBreakpointL ? (React.createElement(BtIconChevronDown2Px_2, null)) : (React.createElement(BtIconChevronRight2Px_2, null)))),
             React.createElement(Panel, { navItemRef: navItem, open: panelOpen, setOpen: setPanelOpen, title: subTitle, viewAll: href ? (React.createElement(Panel.ViewAll, { href: href, onClick: onViewAllClick, title: viewAllTitle || "View all ".concat(title.toLowerCase()) })) : (undefined), withSubNav: true },
                 defaultItem
                     ? React.cloneElement(slot1, { isDefaultItem: defaultItem })

package/dist/SiteHeader/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@arc-ui/siteheader",
+  "types": "./SiteHeader.esm.d.ts",
+  "main": "./SiteHeader.cjs.js",
+  "module": "./SiteHeader.esm.js",
+  "private": true
+}

package/dist/Surface/{index.d.ts → Surface.cjs.d.ts}

@@ -1 +1 @@
-export { Surface, SurfaceContext, backgrounds, backgroundsBT } from "../_shared/Surface-3fe44a2a";
+export { Surface, SurfaceContext, backgrounds, backgroundsBT } from "../_shared/cjs/Surface-d6b8010e";

package/dist/Surface/Surface.cjs.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Surface = require('../_shared/cjs/Surface-d6b8010e.js');
+require('../_shared/cjs/index-78b35bc1.js');
+require('../_shared/cjs/index-45bfb67b.js');
+require('react');
+
+
+
+exports.Surface = Surface.Surface;
+exports.SurfaceContext = Surface.Context;
+exports.backgrounds = Surface.backgrounds;
+exports.backgroundsBT = Surface.backgroundsBT;

package/dist/Surface/Surface.esm.d.ts

@@ -0,0 +1 @@
+export { Surface, SurfaceContext, backgrounds, backgroundsBT } from "../_shared/esm/Surface-d515d212";

package/dist/Surface/Surface.esm.js

@@ -0,0 +1,4 @@
+export { S as Surface, C as SurfaceContext, b as backgrounds, a as backgroundsBT } from '../_shared/esm/Surface-d515d212.js';
+import '../_shared/esm/index-229fc864.js';
+import '../_shared/esm/index-2ae58626.js';
+import 'react';

package/dist/Surface/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@arc-ui/surface",
+  "types": "./Surface.esm.d.ts",
+  "main": "./Surface.cjs.js",
+  "module": "./Surface.esm.js",
+  "private": true
+}

package/dist/Text/Text.cjs.d.ts

@@ -0,0 +1 @@
+export { Text } from "../_shared/cjs/Text-1d3844be";

package/dist/Text/Text.cjs.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Text = require('../_shared/cjs/Text-1d3844be.js');
+require('../_shared/cjs/index-78b35bc1.js');
+require('../_shared/cjs/index-45bfb67b.js');
+require('react');
+require('../_shared/cjs/suffix-modifier-edf7851e.js');
+require('../_shared/cjs/Surface-d6b8010e.js');
+
+
+
+exports.Text = Text.Text;

package/dist/Text/Text.esm.d.ts

@@ -0,0 +1 @@
+export { Text } from "../_shared/esm/Text-d8988620";

package/dist/Text/Text.esm.js

@@ -0,0 +1,6 @@
+export { T as Text } from '../_shared/esm/Text-d8988620.js';
+import '../_shared/esm/index-229fc864.js';
+import '../_shared/esm/index-2ae58626.js';
+import 'react';
+import '../_shared/esm/suffix-modifier-f5e28822.js';
+import '../_shared/esm/Surface-d515d212.js';

package/dist/Text/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@arc-ui/text",
+  "types": "./Text.esm.d.ts",
+  "main": "./Text.cjs.js",
+  "module": "./Text.esm.js",
+  "private": true
+}

package/dist/TextInput/{index.d.ts → TextInput.cjs.d.ts}

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import React from "react";
 import { FC } from "react";
-import { FormControlProps } from "../_shared/FormControl-9dc9ecc3";
+import { FormControlProps } from "../_shared/cjs/FormControl-a1b7421b";
 type EventType = React.ChangeEvent<HTMLInputElement>;
 /**
  * Use `TextInput` to allow custom user text entry with a keyboard.

package/dist/TextInput/TextInput.cjs.js

@@ -0,0 +1,64 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var index = require('../_shared/cjs/index-78b35bc1.js');
+var index$1 = require('../_shared/cjs/index-45bfb67b.js');
+var React = require('react');
+var FormControl = require('../_shared/cjs/FormControl-a1b7421b.js');
+var Surface = require('../_shared/cjs/Surface-d6b8010e.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * 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 = React.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 = index.__rest(_a, ["defaultValue", "errorMessage", "helper", "id", "inputMode", "isDisabled", "isReadOnly", "isRequired", "label", "labelSize", "maxLength", "minLength", "name", "onBlur", "onChange", "pattern", "type", "value"]);
+    var surface = React.useContext(Surface.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 = FormControl.useAriaDescribedby({
+        errorMessage: errorMessage,
+        id: id,
+        helper: helper
+    }).ariaDescribedby;
+    return (React__default["default"].createElement("div", index.__assign({ className: index$1.classNames({
+            "arc-TextInput": true,
+            "arc-TextInput--invalid": errorMessage,
+            "arc-TextInput--onDarkSurface": surface === "dark"
+        }) }, index.filterDataAttrs(props)),
+        React__default["default"].createElement(FormControl.FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, label: label, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional" },
+            React__default["default"].createElement("input", index.__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)))));
+});
+
+exports.TextInput = TextInput;

package/dist/TextInput/TextInput.esm.d.ts

@@ -0,0 +1,71 @@
+/// <reference types="react" />
+import React from "react";
+import { FC } from "react";
+import { FormControlProps } from "../_shared/esm/FormControl-feedc495";
+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 → TextInput.esm.js}

@@ -1,8 +1,8 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/index-e3c83626.js';
-import { c as classNames } from '../_shared/index-56d9df62.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/index-229fc864.js';
+import { c as classNames } from '../_shared/esm/index-2ae58626.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';
+import { u as useAriaDescribedby, F as FormControl } from '../_shared/esm/FormControl-feedc495.js';
+import { C as Context } from '../_shared/esm/Surface-d515d212.js';
 
 /**
  * Infer the correct inputMode, pattern and type if specifying a `number` type.

package/dist/TextInput/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@arc-ui/textinput",
+  "types": "./TextInput.esm.d.ts",
+  "main": "./TextInput.cjs.js",
+  "module": "./TextInput.esm.js",
+  "private": true
+}