@arc-ui/components 10.8.0 → 11.0.0

package/dist/UniversalHeader/UniversalHeader.cjs.js

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var index = require('../_shared/cjs/index-78b35bc1.js');
+var React = require('react');
+var Surface = require('../_shared/cjs/Surface-d6b8010e.js');
+require('../_shared/cjs/index-45bfb67b.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * Use `UniversalHeader` to display a group-level page header.
+ */
+var UniversalHeader = function (_a) {
+    var children = _a.children, props = index.__rest(_a, ["children"]);
+    React.useEffect(function () {
+        React__default["default"].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__default["default"].createElement("nav", index.__assign({ className: "arc-UniversalHeader" }, index.filterDataAttrs(props)),
+        React__default["default"].createElement(Surface.Surface, { background: "light" },
+            React__default["default"].createElement("ul", { className: "arc-UniversalHeader-items" }, children))));
+};
+var UniversalHeaderItem = function (_a) {
+    var children = _a.children, href = _a.href, props = index.__rest(_a, ["children", "href"]);
+    return (React__default["default"].createElement("li", index.__assign({}, index.filterDataAttrs(props)),
+        React__default["default"].createElement("a", { className: "arc-UniversalHeader-link", href: href }, children)));
+};
+UniversalHeaderItem.displayName = "UniversalHeader.Item";
+UniversalHeader.Item = UniversalHeaderItem;
+
+exports.UniversalHeader = UniversalHeader;

package/dist/UniversalHeader/UniversalHeader.esm.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 → UniversalHeader.esm.js}

@@ -1,7 +1,7 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/index-e3c83626.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/index-229fc864.js';
 import React, { useEffect } from 'react';
-import { S as Surface } from '../_shared/Surface-3fe44a2a.js';
-import '../_shared/index-56d9df62.js';
+import { S as Surface } from '../_shared/esm/Surface-d515d212.js';
+import '../_shared/esm/index-2ae58626.js';
 
 /**
  * Use `UniversalHeader` to display a group-level page header.

package/dist/UniversalHeader/package.json

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

package/dist/VerticalSpace/VerticalSpace.cjs.js

@@ -0,0 +1,27 @@
+'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');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(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 = index.__rest(_a, ["isDebugVisible", "size"]);
+    return (React__default["default"].createElement("div", index.__assign({ className: index$1.classNames((_b = {
+                "arc-VerticalSpace": true
+            },
+            _b["arc-VerticalSpace--size".concat(size)] = size && size !== "24",
+            _b["arc-VerticalSpace--debugVisible"] = isDebugVisible,
+            _b)) }, index.filterDataAttrs(props))));
+};
+
+exports.VerticalSpace = VerticalSpace;

package/dist/VerticalSpace/VerticalSpace.esm.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 → VerticalSpace.esm.js}

@@ -1,5 +1,5 @@
-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 from 'react';
 
 /**

package/dist/VerticalSpace/package.json

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

package/dist/VisuallyHidden/VisuallyHidden.cjs.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * Provides text for screen readers that is visually hidden.
+ */
+var VisuallyHidden = function (_a) {
+    var children = _a.children;
+    return (React__default["default"].createElement("div", { "data-testid": "visually-hidden", className: "arc-VisuallyHidden" }, children));
+};
+
+exports.VisuallyHidden = VisuallyHidden;

package/dist/VisuallyHidden/VisuallyHidden.esm.d.ts

@@ -0,0 +1,12 @@
+import { FC, ReactNode } from "react";
+/**
+ * Provides text for screen readers that is visually hidden.
+ */
+declare const VisuallyHidden: FC<VisuallyHiddenProps>;
+interface VisuallyHiddenProps {
+    /**
+     * Content to be Visually Hidden.
+     */
+    children?: ReactNode;
+}
+export { VisuallyHidden };

package/dist/VisuallyHidden/package.json

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

package/dist/_shared/cjs/BrandLogo-3c6102ef.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var index = require('./index-78b35bc1.js');
+var index$1 = require('./index-45bfb67b.js');
+var React = require('react');
+var suffixModifier = require('./suffix-modifier-edf7851e.js');
+var Surface = require('./Surface-d6b8010e.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * 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 = index.__rest(_a, ["color", "label", "size", "subBrand"]);
+    var surface = React.useContext(Surface.Context).surface;
+    return (React__default["default"].createElement("div", index.__assign({ className: index$1.classNames((_b = {
+                "arc-BrandLogo": true,
+                "arc-BrandLogo--colorBrand": color === "brand",
+                "arc-BrandLogo--onDarkSurface": surface === "dark"
+            },
+            _b[suffixModifier.suffixModifier("arc-BrandLogo--subBrand", subBrand || "")] = subBrand,
+            _b)), style: {
+            width: size !== 34 ? size : undefined
+        } }, index.filterDataAttrs(props)), label ? React__default["default"].createElement("span", { className: "arc-BrandLogo-text" }, label) : null));
+};
+
+exports.BrandLogo = BrandLogo;

package/dist/_shared/cjs/BtIconChevronDown2Px-8fb4e2eb.js

@@ -0,0 +1,29 @@
+'use strict';
+
+var React$1 = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React$1);
+
+const React = React__default["default"];
+const BtIconChevronDown2Px = props =>
+  /*#__PURE__*/ React.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32"
+      },
+      props
+    ),
+    /*#__PURE__*/ React.createElement("defs", null),
+    /*#__PURE__*/ React.createElement("path", {
+      d:
+        "M15.99316,23.91406,2.294,10.207A.99989.99989,0,1,1,3.708,8.793l12.28515,12.293L28.292,8.793A.99989.99989,0,1,1,29.70605,10.207Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconChevronDown2Px_2 = BtIconChevronDown2Px;
+
+exports.BtIconChevronDown2Px_2 = BtIconChevronDown2Px_2;

package/dist/_shared/cjs/BtIconChevronRight2Px-a8e40136.js

@@ -0,0 +1,50 @@
+'use strict';
+
+var React$2 = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React$2);
+
+const React$1 = React__default["default"];
+const BtIconChevronLeft2Px = props =>
+  /*#__PURE__*/ React$1.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32"
+      },
+      props
+    ),
+    /*#__PURE__*/ React$1.createElement("defs", null),
+    /*#__PURE__*/ React$1.createElement("path", {
+      d:
+        "M22.5,29.99854a.99676.99676,0,0,1-.707-.293L8.08594,15.99268,21.793,2.294A1.00023,1.00023,0,0,1,23.207,3.709l-12.293,12.28467L23.207,28.2915a1,1,0,0,1-.707,1.707Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconChevronLeft2Px_2 = BtIconChevronLeft2Px;
+
+const React = React__default["default"];
+const BtIconChevronRight2Px = props =>
+  /*#__PURE__*/ React.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32"
+      },
+      props
+    ),
+    /*#__PURE__*/ React.createElement("defs", null),
+    /*#__PURE__*/ React.createElement("path", {
+      d:
+        "M9.5,29.99854A1.00025,1.00025,0,0,1,8.793,28.291l12.293-12.28467L8.793,3.7085A.99989.99989,0,0,1,10.207,2.29443l13.707,13.71289L10.207,29.70605A.99827.99827,0,0,1,9.5,29.99854Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconChevronRight2Px_2 = BtIconChevronRight2Px;
+
+exports.BtIconChevronLeft2Px_2 = BtIconChevronLeft2Px_2;
+exports.BtIconChevronRight2Px_2 = BtIconChevronRight2Px_2;

package/dist/_shared/cjs/BtIconChevronRightMid-5a38d855.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var React$1 = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React$1);
+
+const React = React__default["default"];
+const BtIconChevronRightMid = props =>
+  /*#__PURE__*/ React.createElement(
+    "svg",
+    Object.assign(
+      {
+        viewBox: "0 0 16 16",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg"
+      },
+      props
+    ),
+    /*#__PURE__*/ React.createElement("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d:
+        "M9.04543 8.0002L6.19676 5.1482C6.07077 5.02196 6 4.85089 6 4.67253C6 4.49418 6.07077 4.32311 6.19676 4.19687C6.25906 4.13446 6.33304 4.08495 6.41449 4.05117C6.49594 4.01739 6.58325 4 6.67143 4C6.75961 4 6.84692 4.01739 6.92837 4.05117C7.00982 4.08495 7.0838 4.13446 7.1461 4.19687L10.4701 7.52487C10.5959 7.65108 10.6665 7.82201 10.6665 8.0002C10.6665 8.1784 10.5959 8.34932 10.4701 8.47553L7.1461 11.8035C7.0838 11.8659 7.00982 11.9155 6.92837 11.9492C6.84692 11.983 6.75961 12.0004 6.67143 12.0004C6.58325 12.0004 6.49594 11.983 6.41449 11.9492C6.33304 11.9155 6.25906 11.8659 6.19676 11.8035C6.07077 11.6773 6 11.5062 6 11.3279C6 11.1495 6.07077 10.9784 6.19676 10.8522L9.04543 8.0002Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconChevronRightMid_2 = BtIconChevronRightMid;
+
+exports.BtIconChevronRightMid_2 = BtIconChevronRightMid_2;

package/dist/_shared/{Button-2fcbd4ed.d.ts → cjs/Button-b3a69953.d.ts}

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { icons } from "@arc-ui/tokens";
 import React from "react";
 import { FC } from "react";
+import { ArcIcon } from "./arc-icon-17594b2f";
 type ElementUnion = HTMLButtonElement | HTMLAnchorElement;
 type Ref = React.Ref<ElementUnion> | null;
 /**
@@ -12,7 +12,7 @@ interface ButtonIconProps {
     /**
      * Icon variant.
      */
-    icon?: typeof icons[number];
+    icon?: ArcIcon;
     /**
      * Should the icon be a default chevron?
      */
@@ -57,7 +57,7 @@ interface ButtonProps extends ButtonElementProps, LinkElementProps {
     /**
      * Button icon variant.
      */
-    icon?: typeof icons[number];
+    icon?: ArcIcon;
     /**
      * How should a Button icon be displayed?
      */

package/dist/_shared/cjs/Button-b3a69953.js

@@ -0,0 +1,80 @@
+'use strict';
+
+var index = require('./index-78b35bc1.js');
+var React$1 = require('react');
+var BtIconChevronRightMid = require('./BtIconChevronRightMid-5a38d855.js');
+var index$1 = require('./index-45bfb67b.js');
+var suffixModifier = require('./suffix-modifier-edf7851e.js');
+var Icon = require('./Icon-719d13d4.js');
+var Surface = require('./Surface-d6b8010e.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React$1);
+
+const React = React__default["default"];
+const BtIconChevronLeftMid = props =>
+  /*#__PURE__*/ React.createElement(
+    "svg",
+    Object.assign(
+      {
+        viewBox: "0 0 16 16",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg"
+      },
+      props
+    ),
+    /*#__PURE__*/ React.createElement("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d:
+        "M7.62107 8.00023L10.4697 10.8522C10.5957 10.9785 10.6665 11.1495 10.6665 11.3279C10.6665 11.5063 10.5957 11.6773 10.4697 11.8036C10.4074 11.866 10.3335 11.9155 10.252 11.9493C10.1706 11.983 10.0833 12.0004 9.99507 12.0004C9.9069 12.0004 9.81959 11.983 9.73814 11.9493C9.65669 11.9155 9.5827 11.866 9.52041 11.8036L6.19641 8.47556C6.07061 8.34935 5.99998 8.17842 5.99998 8.00023C5.99998 7.82203 6.07061 7.6511 6.19641 7.52489L9.52041 4.19689C9.5827 4.13449 9.65669 4.08498 9.73814 4.0512C9.81959 4.01741 9.9069 4.00003 9.99507 4.00003C10.0832 4.00003 10.1706 4.01741 10.252 4.0512C10.3335 4.08498 10.4074 4.13449 10.4697 4.19689C10.5957 4.32313 10.6665 4.4942 10.6665 4.67256C10.6665 4.85092 10.5957 5.02199 10.4697 5.14823L7.62107 8.00023Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconChevronLeftMid_2 = BtIconChevronLeftMid;
+
+/**
+ * Use `Button` to allow users to take actions with clicks and taps.
+ */
+var Button = React$1.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 = index.__rest(_a, ["ariaLabel", "fill", "href", "icon", "iconPosition", "id", "isDisabled", "isDisplayBlock", "isFullWidth", "label", "onClick", "rel", "supportingText", "target", "type"]);
+    var surface = React$1.useContext(Surface.Context).surface;
+    var buttonClasses = index$1.classNames((_b = {
+            "arc-Button": true,
+            "arc-Button--displayBlock": isDisplayBlock
+        },
+        _b[suffixModifier.suffixModifier("arc-Button--fill", fill)] = fill !== "solid",
+        _b["arc-Button--fullWidth"] = isFullWidth,
+        _b[suffixModifier.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 = index.__assign({ id: id, onClick: onClick, ref: ref }, index.filterDataAttrs(props));
+    var buttonText = supportingText ? (React__default["default"].createElement("span", null,
+        React__default["default"].createElement("span", { className: "arc-Button-text" }, label),
+        React__default["default"].createElement("span", { className: "arc-Button-supportingText" }, supportingText))) : (React__default["default"].createElement("span", { className: "arc-Button-text" }, label));
+    var buttonIcon = icon || fill === "flat" ? (React__default["default"].createElement(ButtonIcon, { icon: icon, isChevron: !icon && fill === "flat", isBeforeText: iconPosition === "beforeText" })) : null;
+    if (href && !isDisabled) {
+        return (React__default["default"].createElement("a", index.__assign({}, commonProps, { "aria-label": ariaLabel, className: buttonClasses, href: href, rel: rel, target: target }),
+            React__default["default"].createElement("span", { className: "arc-Button-inner" },
+                buttonText,
+                buttonIcon)));
+    }
+    return (React__default["default"].createElement("button", index.__assign({}, commonProps, { "aria-label": ariaLabel, className: buttonClasses, disabled: isDisabled, type: type }),
+        React__default["default"].createElement("span", { className: "arc-Button-inner" },
+            buttonText,
+            buttonIcon)));
+});
+var ButtonIcon = function (_a) {
+    var icon = _a.icon, isChevron = _a.isChevron, isBeforeText = _a.isBeforeText;
+    return (React__default["default"].createElement("span", { className: index$1.classNames({
+            "arc-Button-icon": true,
+            "arc-Button-icon--chevron": isChevron
+        }) }, isChevron ? (React__default["default"].createElement(Icon.Icon, { icon: isBeforeText ? BtIconChevronLeftMid_2 : BtIconChevronRightMid.BtIconChevronRightMid_2 })) : (React__default["default"].createElement(Icon.Icon, { icon: icon }))));
+};
+
+exports.Button = Button;

package/dist/_shared/{Curve-5f476d0b.d.ts → cjs/Curve-e72ce25b.d.ts}

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import { backgroundsBT } from "../Surface/index";
+import { backgroundsBT } from "../../Surface/Surface.cjs";
 /**
  * Use `Curve` sparingly to soften edges and create a more natural, less rigid
  * look and feel.

package/dist/_shared/cjs/Curve-e72ce25b.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var index = require('./index-78b35bc1.js');
+var index$1 = require('./index-45bfb67b.js');
+var React = require('react');
+var suffixModifier = require('./suffix-modifier-edf7851e.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * 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 = index.__rest(_a, ["bottomColor", "from", "isInverted", "size", "topColor"]);
+    return (React__default["default"].createElement("div", index.__assign({ className: index$1.classNames((_b = {
+                "arc-Curve": true
+            },
+            _b[suffixModifier.suffixModifier("arc-Curve--from", from)] = from && from !== "top",
+            _b["arc-Curve--size".concat(size && size.toUpperCase())] = size && size !== "m",
+            _b[suffixModifier.suffixModifier("arc-Curve--bottomColor", bottomColor || "")] = bottomColor,
+            _b[suffixModifier.suffixModifier("arc-Curve--topColor", topColor || "")] = topColor,
+            _b["arc-Curve--inverted"] = isInverted,
+            _b)) }, index.filterDataAttrs(props))));
+};
+
+exports.Curve = Curve;

package/dist/_shared/cjs/FormControl-a1b7421b.js

@@ -0,0 +1,115 @@
+'use strict';
+
+var index = require('./index-78b35bc1.js');
+var index$1 = require('./index-45bfb67b.js');
+var React$1 = require('react');
+var Surface = require('./Surface-d6b8010e.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React$1);
+
+/**
+ * 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 };
+};
+
+const React = React__default["default"];
+const BtIconAlert = props =>
+  /*#__PURE__*/ React.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32"
+      },
+      props
+    ),
+    /*#__PURE__*/ React.createElement("defs", null),
+    /*#__PURE__*/ React.createElement("path", {
+      d:
+        "M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,27A13,13,0,1,1,29,16,13.01474,13.01474,0,0,1,16,29Z",
+      fill: "currentColor"
+    }),
+    /*#__PURE__*/ React.createElement("path", {
+      fill: "currentColor",
+      d: "M16 20.99335A1 1 0 1 0 16 22.99335 1 1 0 1 0 16 20.99335z"
+    }),
+    /*#__PURE__*/ React.createElement("path", {
+      d:
+        "M16.00488,19.00977a.49972.49972,0,0,0,.5-.5L16.50684,9.5a.5.5,0,0,0-1,0l-.002,9.00977A.5.5,0,0,0,16.00488,19.00977Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconAlert_2 = BtIconAlert;
+
+var defaultContext = {
+    requirementStatus: null
+};
+var Context = React$1.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 = index.__rest(_a, ["children", "elementType", "errorMessage", "helper", "htmlFor", "id", "label", "labelSize", "requirementStatus"]);
+    var surface = React$1.useContext(Surface.Context).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__default["default"].createElement(Provider, { value: { requirementStatus: requirementStatus } },
+        React__default["default"].createElement(ElementType, index.__assign({ className: index$1.classNames({
+                "arc-FormControl": true,
+                "arc-FormControl--smallLabel": labelSize === "s",
+                "arc-FormControl--onDarkSurface": surface === "dark"
+            }), id: id }, elementProps, index.filterDataAttrs(props)),
+            React__default["default"].createElement(LabelType, index.__assign({ className: "arc-FormControl-label" }, labelProps),
+                label,
+                requirementStatus === "optional" && (React__default["default"].createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)"))),
+            helper && (React__default["default"].createElement("div", { className: "arc-FormControl-helper", id: idHelper }, helper)),
+            children,
+            errorMessage && (React__default["default"].createElement("div", { className: "arc-FormControl-error", id: idError },
+                React__default["default"].createElement("span", { className: "arc-FormControl-error--icon" },
+                    React__default["default"].createElement(BtIconAlert_2, null)),
+                errorMessage)))));
+};
+
+exports.BtIconAlert_2 = BtIconAlert_2;
+exports.Context = Context;
+exports.FormControl = FormControl;
+exports.useAriaDescribedby = useAriaDescribedby;