@arc-ui/components 12.0.0-alpha.0 → 12.0.0-beta.11

package/dist/_shared/cjs/Spinner-8fae4614.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var index_es = require('./index.es-3783ed64.js');
+var React = require('react');
+var index = require('./index-9947ac13.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * Use `Spinner` to display a loading state.
+ */
+var Spinner = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? "m" : _b, color = _a.color;
+    var props = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        props[_i - 1] = arguments[_i];
+    }
+    return (React__default["default"].createElement("svg", index_es.__assign({ className: index.classNames("arc-Spinner", "arc-Spinner-".concat(color), "arc-Spinner-size--".concat(size)), width: typeof size === "number" ? "".concat(size, "px") : undefined, "data-testid": "arc-Spinner", "aria-label": "loading", viewBox: "0 0 48 48", xmlns: "http://www.w3.org/2000/svg" }, index_es.filterDataAttrs(props)),
+        React__default["default"].createElement("circle", { cx: "24", cy: "24", fill: "none", r: "22", "stroke-width": "4", "stroke-linecap": "round" })));
+};
+
+exports.Spinner = Spinner;

package/dist/_shared/cjs/Surface-02d149ba.js

@@ -0,0 +1,175 @@
+'use strict';
+
+var index_es = require('./index.es-3783ed64.js');
+var index = require('./index-9947ac13.js');
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var camelcase$1 = {exports: {}};
+
+const UPPERCASE = /[\p{Lu}]/u;
+const LOWERCASE = /[\p{Ll}]/u;
+const LEADING_CAPITAL = /^[\p{Lu}](?![\p{Lu}])/gu;
+const IDENTIFIER = /([\p{Alpha}\p{N}_]|$)/u;
+const SEPARATORS = /[_.\- ]+/;
+
+const LEADING_SEPARATORS = new RegExp('^' + SEPARATORS.source);
+const SEPARATORS_AND_IDENTIFIER = new RegExp(SEPARATORS.source + IDENTIFIER.source, 'gu');
+const NUMBERS_AND_IDENTIFIER = new RegExp('\\d+' + IDENTIFIER.source, 'gu');
+
+const preserveCamelCase = (string, toLowerCase, toUpperCase) => {
+	let isLastCharLower = false;
+	let isLastCharUpper = false;
+	let isLastLastCharUpper = false;
+
+	for (let i = 0; i < string.length; i++) {
+		const character = string[i];
+
+		if (isLastCharLower && UPPERCASE.test(character)) {
+			string = string.slice(0, i) + '-' + string.slice(i);
+			isLastCharLower = false;
+			isLastLastCharUpper = isLastCharUpper;
+			isLastCharUpper = true;
+			i++;
+		} else if (isLastCharUpper && isLastLastCharUpper && LOWERCASE.test(character)) {
+			string = string.slice(0, i - 1) + '-' + string.slice(i - 1);
+			isLastLastCharUpper = isLastCharUpper;
+			isLastCharUpper = false;
+			isLastCharLower = true;
+		} else {
+			isLastCharLower = toLowerCase(character) === character && toUpperCase(character) !== character;
+			isLastLastCharUpper = isLastCharUpper;
+			isLastCharUpper = toUpperCase(character) === character && toLowerCase(character) !== character;
+		}
+	}
+
+	return string;
+};
+
+const preserveConsecutiveUppercase = (input, toLowerCase) => {
+	LEADING_CAPITAL.lastIndex = 0;
+
+	return input.replace(LEADING_CAPITAL, m1 => toLowerCase(m1));
+};
+
+const postProcess = (input, toUpperCase) => {
+	SEPARATORS_AND_IDENTIFIER.lastIndex = 0;
+	NUMBERS_AND_IDENTIFIER.lastIndex = 0;
+
+	return input.replace(SEPARATORS_AND_IDENTIFIER, (_, identifier) => toUpperCase(identifier))
+		.replace(NUMBERS_AND_IDENTIFIER, m => toUpperCase(m));
+};
+
+const camelCase = (input, options) => {
+	if (!(typeof input === 'string' || Array.isArray(input))) {
+		throw new TypeError('Expected the input to be `string | string[]`');
+	}
+
+	options = {
+		pascalCase: false,
+		preserveConsecutiveUppercase: false,
+		...options
+	};
+
+	if (Array.isArray(input)) {
+		input = input.map(x => x.trim())
+			.filter(x => x.length)
+			.join('-');
+	} else {
+		input = input.trim();
+	}
+
+	if (input.length === 0) {
+		return '';
+	}
+
+	const toLowerCase = options.locale === false ?
+		string => string.toLowerCase() :
+		string => string.toLocaleLowerCase(options.locale);
+	const toUpperCase = options.locale === false ?
+		string => string.toUpperCase() :
+		string => string.toLocaleUpperCase(options.locale);
+
+	if (input.length === 1) {
+		return options.pascalCase ? toUpperCase(input) : toLowerCase(input);
+	}
+
+	const hasUpperCase = input !== toLowerCase(input);
+
+	if (hasUpperCase) {
+		input = preserveCamelCase(input, toLowerCase, toUpperCase);
+	}
+
+	input = input.replace(LEADING_SEPARATORS, '');
+
+	if (options.preserveConsecutiveUppercase) {
+		input = preserveConsecutiveUppercase(input, toLowerCase);
+	} else {
+		input = toLowerCase(input);
+	}
+
+	if (options.pascalCase) {
+		input = toUpperCase(input.charAt(0)) + input.slice(1);
+	}
+
+	return postProcess(input, toUpperCase);
+};
+
+camelcase$1.exports = camelCase;
+// TODO: Remove this for the next major release
+camelcase$1.exports.default = camelCase;
+
+var camelcase = camelcase$1.exports;
+
+var defaultContext = { surface: "light" };
+var Context = React.createContext(defaultContext);
+var Provider = Context.Provider;
+/**
+ * Use `Surface` to compose content using the Arc system.
+ */
+var Surface = function (_a) {
+    var _b;
+    var background = _a.background, children = _a.children, _c = _a.growVertically, growVertically = _c === void 0 ? false : _c, padding = _a.padding, paddingHorizontal = _a.paddingHorizontal, paddingVertical = _a.paddingVertical, isTransparent = _a.isTransparent, props = index_es.__rest(_a, ["background", "children", "growVertically", "padding", "paddingHorizontal", "paddingVertical", "isTransparent"]);
+    var surface = "light";
+    if (background === "dark-black" ||
+        background === "dark-brand-01" ||
+        background === "dark-brand-02" ||
+        background === "dark-neutral-01" ||
+        background === "dark-neutral-02") {
+        surface = "dark";
+    }
+    return (React__default["default"].createElement(Provider, { value: { surface: surface } },
+        React__default["default"].createElement("div", index_es.__assign({ "data-testid": "arc-surface", className: index.classNames((_b = {
+                    "arc-Surface": true
+                },
+                _b["arc-Surface--".concat(background && camelcase(background), "Background")] = background,
+                _b["arc-Surface--growVertically"] = growVertically,
+                _b["arc-Surface--padding".concat(padding)] = padding,
+                _b["arc-Surface--paddingHorizontal".concat(paddingHorizontal)] = paddingHorizontal,
+                _b["arc-Surface--paddingVertical".concat(paddingVertical)] = paddingVertical,
+                _b["arc-Surface--isTransparent"] = isTransparent,
+                _b)) }, index_es.filterDataAttrs(props)), children)));
+};
+var backgroundsShared = [
+    "dark-black",
+    "dark-brand-01",
+    "dark-brand-02",
+    "dark-neutral-01",
+    "dark-neutral-02",
+    "light-brand-01",
+    "light-brand-02",
+    "light-neutral-01",
+    "light-neutral-02",
+    "light-white",
+];
+var backgrounds = index_es.__spreadArray([], backgroundsShared, true);
+var backgroundsBT = index_es.__spreadArray([], backgroundsShared, true);
+
+exports.Context = Context;
+exports.Surface = Surface;
+exports.backgrounds = backgrounds;
+exports.backgroundsBT = backgroundsBT;
+exports.camelcase = camelcase;

package/dist/_shared/cjs/Tabs-3ea4ac5c.js

@@ -0,0 +1,90 @@
+'use strict';
+
+var index_es = require('./index.es-3783ed64.js');
+var React = require('react');
+var index = require('./index-1e7a1fce.js');
+var Icon = require('./Icon-dbdd25ab.js');
+var Surface = require('./Surface-02d149ba.js');
+var index$1 = require('./index-9947ac13.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var Tab = function (_a) {
+    var label = _a.label, value = _a.value, icon = _a.icon, iconActive = _a.iconActive, props = index_es.__rest(_a, ["label", "value", "icon", "iconActive"]);
+    var surface = React.useContext(Surface.Context).surface;
+    return (React__default["default"].createElement(index.$69cb30bb0017df05$export$41fb9f06171c75f4, index_es.__assign({ className: index$1.classNames("arc-Tab-trigger", {
+            "arc-Tab-trigger--onDarkSurface": surface === "dark",
+            "arc-Tab-trigger--hasIcon": icon || iconActive
+        }), value: value }, index_es.filterDataAttrs(props)),
+        icon && (React__default["default"].createElement("div", { className: "arc-Tab-triggerIcon", "data-testid": "arc-Tab-TriggerIcon" },
+            React__default["default"].createElement(Icon.Icon, { icon: icon }))),
+        iconActive && (React__default["default"].createElement("div", { className: "arc-Tab-triggerIcon arc-Tab-triggerIcon--active", "data-testid": "arc-Tab-TriggerIconActive" },
+            React__default["default"].createElement(Icon.Icon, { icon: iconActive }))),
+        React__default["default"].createElement("span", { className: "arc-Tab-triggerText" }, label)));
+};
+
+var TabContent = function (_a) {
+    var children = _a.children, value = _a.value, props = index_es.__rest(_a, ["children", "value"]);
+    return (React__default["default"].createElement(index.$69cb30bb0017df05$export$7c6e2c02157bb7d2, index_es.__assign({ className: "arc-Tab-content", value: value }, index_es.filterDataAttrs(props)), children));
+};
+
+var TabsList = function (_a) {
+    var children = _a.children, type = _a.type, isJustified = _a.isJustified, ariaLabel = _a.ariaLabel; _a.overflowGradient; var props = index_es.__rest(_a, ["children", "type", "isJustified", "ariaLabel", "overflowGradient"]);
+    var _b = React.useState(false), rightOverflow = _b[0], setRightOverflow = _b[1];
+    var _c = React.useState(false), leftOverflow = _c[0], setLeftOverflow = _c[1];
+    var surface = React.useContext(Surface.Context).surface;
+    var tabsRef = React.useRef(null);
+    var checkOverflow = function () {
+        if (tabsRef.current) {
+            setRightOverflow(tabsRef.current.scrollLeft + tabsRef.current.clientWidth <
+                tabsRef.current.scrollWidth);
+            setLeftOverflow(tabsRef.current.scrollLeft > 0);
+        }
+    };
+    var handleScroll = function () {
+        checkOverflow();
+    };
+    React.useEffect(function () {
+        var list = tabsRef.current;
+        checkOverflow();
+        if (list) {
+            list.addEventListener("scroll", handleScroll);
+        }
+        return function () {
+            if (list) {
+                list.removeEventListener("scroll", handleScroll);
+            }
+        };
+    });
+    var state = "";
+    if (type === "standard") {
+        if (leftOverflow && rightOverflow) {
+            state = "both";
+        }
+        else if (leftOverflow) {
+            state = "left";
+        }
+        else {
+            state = "right";
+        }
+    }
+    return (React__default["default"].createElement("span", { className: "arc-TabsList-wrapper" },
+        React__default["default"].createElement(index.$69cb30bb0017df05$export$54c2e3dc7acea9f5, index_es.__assign({ className: index$1.classNames("arc-Tabs", index_es.suffixModifier("arc-TabsList--overflow", state), {
+                "arc-Tabs--contained": type === "contained",
+                "arc-Tabs--isJustified": isJustified,
+                "arc-Tabs--onDarkSurface": surface === "dark"
+            }), ref: tabsRef, "aria-label": ariaLabel }, index_es.filterDataAttrs(props)), children)));
+};
+
+/** Use `Tabs` to allow users to navigate between different sections of relevant content. */
+var Tabs = function (_a) {
+    var children = _a.children, defaultValue = _a.defaultValue, onValueChange = _a.onValueChange, activationMode = _a.activationMode, props = index_es.__rest(_a, ["children", "defaultValue", "onValueChange", "activationMode"]);
+    return (React__default["default"].createElement(index.$69cb30bb0017df05$export$be92b6f5f03c0fe9, index_es.__assign({ className: "arc-Tabs-root", defaultValue: defaultValue, onValueChange: onValueChange, activationMode: activationMode }, index_es.filterDataAttrs(props)), children));
+};
+Tabs.Tab = Tab;
+Tabs.List = TabsList;
+Tabs.Content = TabContent;
+
+exports.Tabs = Tabs;

package/dist/_shared/cjs/TemplateBanner-14632bf5.js

@@ -0,0 +1,69 @@
+'use strict';
+
+var index_es = require('./index.es-3783ed64.js');
+var React = require('react');
+var index = require('./index-9947ac13.js');
+var index_es$1 = require('./index.es-73f966b4.js');
+var useMediaQuery = require('./use-media-query-d34c83b9.js');
+var Heading = require('./Heading-f2eed7bd.js');
+var Image = require('./Image-27b46f1d.js');
+var Grid = require('./Grid-3d3f06a9.js');
+var VerticalSpace = require('./VerticalSpace-082c293c.js');
+var Text = require('./Text-f55e4793.js');
+var Box = require('./Box-2f7b2439.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var TemplateBanner = function (_a) {
+    var heading = _a.heading, label = _a.label, text = _a.text, img = _a.img, _b = _a.contentRatio, contentRatio = _b === void 0 ? "1/1" : _b, children = _a.children, _c = _a.alignment, alignment = _c === void 0 ? "center" : _c, additionalTopMargin = _a.additionalTopMargin, _d = _a.minHeight, minHeight = _d === void 0 ? 454 : _d, _e = _a.headingSize, headingSize = _e === void 0 ? "xl" : _e, _f = _a.isReversed, isReversed = _f === void 0 ? false : _f, _g = _a.isElevated, isElevated = _g === void 0 ? false : _g, _h = _a.headingLevel, headingLevel = _h === void 0 ? "2" : _h, _j = _a.type, type = _j === void 0 ? "light" : _j, props = index_es.__rest(_a, ["heading", "label", "text", "img", "contentRatio", "children", "alignment", "additionalTopMargin", "minHeight", "headingSize", "isReversed", "isElevated", "headingLevel", "type"]);
+    var isMinWidthArcBreakpointM = useMediaQuery.useMediaQuery("(min-width: ".concat(index_es$1.SemSizeBreakpointsM, ")"));
+    var backgrounds = {
+        dark: "dark-brand-02",
+        light: "light-white",
+        contained: "light-white"
+    };
+    var imageAlignment = {
+        bottom: "end",
+        top: "start",
+        center: "center"
+    };
+    var isContained = type === "contained";
+    var borderWidth = isContained && !isElevated ? "thin" : undefined;
+    var direction = isReversed && isMinWidthArcBreakpointM ? "row-reverse" : "row";
+    return (React__default["default"].createElement("div", index_es.__assign({ style: { minHeight: minHeight }, className: index.classNames("arc-TemplateBanner arc-TemplateBanner-background--".concat(type), {
+            "arc-TemplateBanner--elevation": isElevated
+        }) }, index_es.filterDataAttrs(props)),
+        React__default["default"].createElement(Box.Box, { "data-testid": "arc-TemplateBanner-box", isBorderRadius: true, borderWidth: borderWidth, surface: backgrounds[type], isSurfaceTransparent: true },
+            React__default["default"].createElement(Grid.Grid, { isGutterless: true, isFluid: true },
+                React__default["default"].createElement(Grid.Grid.Row, { "data-testid": "arc-TemplateBanner-gridRow", direction: direction },
+                    React__default["default"].createElement(Grid.Grid.Col, { "data-testid": "arc-TemplateBanner-contentCol", align: {
+                            m: alignment === "start" ? "start" : "center",
+                            xs: !img || contentRatio === "1/0" ? "center" : "start"
+                        }, order: { xs: isContained && isReversed ? 2 : undefined, m: 0 }, xs: 12, m: contentRatio === "2/3" && img
+                            ? 8
+                            : contentRatio === "1/1" && img
+                                ? 6
+                                : 12 },
+                        React__default["default"].createElement("div", { className: index.classNames("arc-TemplateBanner-content", {
+                                "arc-TemplateBanner-content--additionalTopMargin": additionalTopMargin && alignment === "start"
+                            }) },
+                            label && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                                React__default["default"].createElement(Heading.Heading, { size: "xxs" }, label.toUpperCase()),
+                                React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "8" }))),
+                            React__default["default"].createElement(Heading.Heading, { level: headingLevel, size: headingSize }, heading),
+                            text && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                                React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "16" }),
+                                React__default["default"].createElement("p", { className: "arc-TemplateBanner-text" },
+                                    React__default["default"].createElement(Text.Text, null, text)))),
+                            children && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                                React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "32" }),
+                                children)))),
+                    img && contentRatio !== "1/0" && (React__default["default"].createElement(Grid.Grid.Col, index_es.__assign({ "data-testid": "arc-TemplateBanner-imageCol", align: img.fit !== "cover"
+                            ? { m: imageAlignment[img.alignment || "center"] }
+                            : undefined, xs: 12 }, (contentRatio === "2/3" && img ? { m: 4 } : { m: 6 })),
+                        React__default["default"].createElement(Image.Image, index_es.__assign({}, img)))))))));
+};
+
+exports.TemplateBanner = TemplateBanner;

package/dist/_shared/cjs/{Text-606ca3a2.js → Text-f55e4793.js}

@@ -1,10 +1,9 @@
 'use strict';
 
-var filterDataAttrs = require('./filter-data-attrs-1c9a530c.js');
+var index_es = require('./index.es-3783ed64.js');
 var index = require('./index-9947ac13.js');
 var React = require('react');
-var suffixModifier = require('./suffix-modifier-64dcd338.js');
-var Surface = require('./Surface-038db6e1.js');
+var Surface = require('./Surface-02d149ba.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -15,18 +14,19 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  */
 var Text = function (_a) {
     var _b;
-    var _c = _a.align, align = _c === void 0 ? "left" : _c, children = _a.children, id = _a.id, _d = _a.isInline, isInline = _d === void 0 ? false : _d, _e = _a.isMeasured, isMeasured = _e === void 0 ? false : _e, _f = _a.size, size = _f === void 0 ? "m" : _f, _g = _a.tone, tone = _g === void 0 ? "default" : _g, props = filterDataAttrs.__rest(_a, ["align", "children", "id", "isInline", "isMeasured", "size", "tone"]);
+    var _c = _a.align, align = _c === void 0 ? "left" : _c, children = _a.children, id = _a.id, _d = _a.isInline, isInline = _d === void 0 ? false : _d, _e = _a.isMeasured, isMeasured = _e === void 0 ? false : _e, _f = _a.size, size = _f === void 0 ? "m" : _f, _g = _a.tone, tone = _g === void 0 ? "default" : _g, _h = _a.elementType, elementType = _h === void 0 ? "span" : _h, props = index_es.__rest(_a, ["align", "children", "id", "isInline", "isMeasured", "size", "tone", "elementType"]);
     var surface = React.useContext(Surface.Context).surface;
-    return (React__default["default"].createElement("span", filterDataAttrs.__assign({ id: id, className: index.classNames((_b = {
+    var Element = elementType;
+    return (React__default["default"].createElement(Element, index_es.__assign({ id: id, className: index.classNames((_b = {
                 "arc-Text": true
             },
-            _b[suffixModifier.suffixModifier("arc-Text--align", align)] = align !== "left",
+            _b[index_es.suffixModifier("arc-Text--align", align)] = align !== "left",
             _b["arc-Text--inline"] = isInline,
             _b["arc-Text--measured"] = isMeasured,
             _b["arc-Text--size".concat(size && size.toUpperCase())] = size && size !== "m",
             _b["arc-Text--".concat(tone)] = tone !== "default",
             _b["arc-Text--onDarkSurface"] = surface === "dark",
-            _b)) }, filterDataAttrs.filterDataAttrs(props)), children));
+            _b)) }, index_es.filterDataAttrs(props)), children));
 };
 
 exports.Text = Text;

package/dist/_shared/cjs/TextInput-b3d02ca0.js

@@ -0,0 +1,111 @@
+'use strict';
+
+var index_es = require('./index.es-3783ed64.js');
+var index = require('./index-9947ac13.js');
+var React = require('react');
+var FormControl = require('./FormControl-988752cc.js');
+var Surface = require('./Surface-02d149ba.js');
+var VisuallyHidden = require('./VisuallyHidden-662407d5.js');
+var ThemeIcon = require('./ThemeIcon-414d9e7e.js');
+var Spinner = require('./Spinner-8fae4614.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 };
+};
+
+var TextInputComponent = React.forwardRef(function (_a, ref) {
+    var _b;
+    var _c = _a.defaultValue, defaultValue = _c === void 0 ? "" : _c, errorMessage = _a.errorMessage, helper = _a.helper, hideLabel = _a.hideLabel, id = _a.id, inputMode = _a.inputMode, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isReadOnly, isReadOnly = _e === void 0 ? false : _e, _f = _a.isRequired, isRequired = _f === void 0 ? false : _f, label = _a.label, _g = _a.labelSize, labelSize = _g === void 0 ? "l" : _g, maxLength = _a.maxLength, minLength = _a.minLength, name = _a.name, onBlur = _a.onBlur, onFocus = _a.onFocus, onChange = _a.onChange, placeholder = _a.placeholder, onClickDisclosure = _a.onClickDisclosure, pattern = _a.pattern, _h = _a.type, type = _h === void 0 ? "text" : _h, _j = _a.showPassword, showPassword = _j === void 0 ? false : _j, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, _k = _a.inputSize, inputSize = _k === void 0 ? "m" : _k, iconButton = _a.iconButton, prefix = _a.prefix, suffix = _a.suffix, _l = _a.inputAlignment, inputAlignment = _l === void 0 ? "left" : _l, width = _a.width, autoComplete = _a.autoComplete, isLoading = _a.isLoading, props = index_es.__rest(_a, ["defaultValue", "errorMessage", "helper", "hideLabel", "id", "inputMode", "isDisabled", "isReadOnly", "isRequired", "label", "labelSize", "maxLength", "minLength", "name", "onBlur", "onFocus", "onChange", "placeholder", "onClickDisclosure", "pattern", "type", "showPassword", "value", "disclosureTitle", "disclosureText", "inputSize", "iconButton", "prefix", "suffix", "inputAlignment", "width", "autoComplete", "isLoading"]);
+    var surface = React.useContext(Surface.Context).surface;
+    var _m = React.useState(false), showPasswordToggle = _m[0], setShowPasswordToggle = _m[1];
+    var inferredInputProps = useNumericInput({
+        inputMode: inputMode,
+        pattern: pattern,
+        type: showPasswordToggle ? "text" : 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,
+        disclosureText: disclosureText
+    }).ariaDescribedby;
+    var buttonIconSize = {
+        s: 24,
+        m: 32,
+        l: 40
+    };
+    var spinnerSize = {
+        s: 16,
+        m: 24,
+        l: 32
+    };
+    return (React__default["default"].createElement("div", index_es.__assign({ className: index.classNames((_b = {
+                "arc-TextInput": true,
+                "arc-TextInput--withAdditionalControl": showPassword || iconButton,
+                "arc-TextInput--alignRight": inputAlignment === "right",
+                "arc-TextInput--withPasswordToggle": showPassword,
+                "arc-TextInput--isDisabled": isDisabled || isLoading,
+                "arc-TextInput--invalid": errorMessage,
+                "arc-TextInput--onDarkSurface": surface === "dark",
+                "arc-TextInput--withPrefix": prefix,
+                "arc-TextInput--withSuffix": suffix
+            },
+            _b["arc-TextInput--size".concat(inputSize && inputSize.toUpperCase())] = inputSize && inputSize !== "m",
+            _b)) }, index_es.filterDataAttrs(props)),
+        React__default["default"].createElement(FormControl.FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, isDisabled: isDisabled, label: label, hideLabel: hideLabel, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional", disclosureTitle: disclosureTitle, disclosureText: disclosureText, onClickDisclosure: onClickDisclosure },
+            React__default["default"].createElement("div", { className: "arc-TextInput-inputWrapper", style: { width: width, marginTop: hideLabel ? 0 : undefined } },
+                prefix && (React__default["default"].createElement("span", { className: "arc-TextInput-prefix", "aria-hidden": true }, prefix)),
+                React__default["default"].createElement("input", index_es.__assign({ placeholder: placeholder, "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", className: "arc-TextInput-input", defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled || isLoading, id: id, maxLength: maxLength, minLength: minLength, name: name, onChange: onChange, onBlur: onBlur, onFocus: onFocus, readOnly: isReadOnly, ref: ref, required: isRequired, value: typeof value !== "undefined" ? value : undefined, autoComplete: autoComplete }, inferredInputProps)),
+                iconButton && !showPassword && (React__default["default"].createElement("div", { className: "arc-TextInput-additionalControl" },
+                    React__default["default"].createElement("button", { ref: iconButton.ref, className: "arc-TextInput-iconButton", disabled: isReadOnly || isDisabled, "aria-label": iconButton.label, onFocus: iconButton.onFocus, onClick: function (e) {
+                            e.preventDefault();
+                            iconButton.onClick();
+                        } },
+                        React__default["default"].createElement(ThemeIcon.ThemeIcon, { icon: iconButton.icon, size: buttonIconSize[inputSize] })))),
+                suffix && !showPassword ? (React__default["default"].createElement("span", { className: "arc-TextInput-suffix", "aria-hidden": true }, suffix)) : null,
+                showPassword && (React__default["default"].createElement("div", { className: "arc-TextInput-additionalControl" },
+                    React__default["default"].createElement("button", { className: "arc-TextInput-passwordToggle", onClick: function () { return setShowPasswordToggle(function (p) { return !p; }); }, type: "button" }, showPasswordToggle ? "Hide" : "Show"),
+                    React__default["default"].createElement(VisuallyHidden.VisuallyHidden, null,
+                        React__default["default"].createElement("div", { "aria-live": "polite" },
+                            React__default["default"].createElement("p", null, showPasswordToggle
+                                ? "Your password is shown"
+                                : "Your password is hidden"))))),
+                isLoading && (React__default["default"].createElement("span", { className: "arc-TextInput-spinner" },
+                    React__default["default"].createElement(Spinner.Spinner, { size: spinnerSize[inputSize] })))))));
+});
+/**
+ * Use `TextInput` to allow users to enter short form text.
+ */
+var TextInput = React.forwardRef(function (props, ref) { return React__default["default"].createElement(TextInputComponent, index_es.__assign({ ref: ref }, props)); });
+var TextInputWithPlaceHolder = React.forwardRef(function (props, ref) { return React__default["default"].createElement(TextInputComponent, index_es.__assign({ ref: ref }, props)); });
+
+exports.TextInput = TextInput;
+exports.TextInputWithPlaceHolder = TextInputWithPlaceHolder;

package/dist/_shared/cjs/{ThemeIcon-9534f091.js → ThemeIcon-414d9e7e.js}

@@ -1,10 +1,9 @@
 'use strict';
 
-var filterDataAttrs = require('./filter-data-attrs-1c9a530c.js');
+var index_es = require('./index.es-3783ed64.js');
 var index = require('./index-9947ac13.js');
 var React = require('react');
-var suffixModifier = require('./suffix-modifier-64dcd338.js');
-var Surface = require('./Surface-038db6e1.js');
+var Surface = require('./Surface-02d149ba.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -12,16 +11,16 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var ThemeIcon = function (_a) {
     var _b;
-    var size = _a.size, icon = _a.icon, _c = _a.color, color = _c === void 0 ? "auto" : _c, props = filterDataAttrs.__rest(_a, ["size", "icon", "color"]);
+    var size = _a.size, icon = _a.icon, _c = _a.color, color = _c === void 0 ? "auto" : _c, props = index_es.__rest(_a, ["size", "icon", "color"]);
     var surface = React.useContext(Surface.Context).surface;
-    return (React__default["default"].createElement("span", filterDataAttrs.__assign({ style: {
+    return (React__default["default"].createElement("span", index_es.__assign({ style: {
             height: size,
             width: size
         }, className: index.classNames("arc-ThemeIcon", "arc-ThemeIcon--".concat(icon), (_b = {
                 "arc-ThemeIcon--onDarkSurface": surface === "dark"
             },
-            _b[suffixModifier.suffixModifier("arc-ThemeIcon--color", color)] = color !== "auto",
-            _b)) }, filterDataAttrs.filterDataAttrs(props))));
+            _b[index_es.suffixModifier("arc-ThemeIcon--color", color)] = color !== "auto",
+            _b)) }, index_es.filterDataAttrs(props))));
 };
 
 exports.ThemeIcon = ThemeIcon;