@arc-ui/components 10.8.1 → 11.1.0

package/dist/_shared/esm/FormControl-84c9ace6.js

@@ -0,0 +1,138 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-229fc864.js';
+import { c as classNames } from './index-2ae58626.js';
+import React__default, { useContext, useState, createContext } from 'react';
+import { C as Context$1 } from './Surface-bf201530.js';
+import { T as Text } from './Text-6b958ad8.js';
+import { B as BtIconChevronRightMid_2 } from './BtIconChevronRightMid-d9b11761.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, _d = _a.idDisclosure, idDisclosure = _d === void 0 ? "".concat(id, "-disclosure") : _d, errorMessage = _a.errorMessage, helper = _a.helper, disclosureText = _a.disclosureText;
+    if (!id) {
+        return {
+            ariaDescribedby: undefined,
+            idHelper: undefined,
+            idError: undefined,
+            idDisclosure: undefined
+        };
+    }
+    var ariaDescribedbyArr = [];
+    if (errorMessage) {
+        ariaDescribedbyArr.push(idError);
+    }
+    if (helper) {
+        ariaDescribedbyArr.push(idHelper);
+    }
+    if (disclosureText) {
+        ariaDescribedbyArr.push(idDisclosure);
+    }
+    var ariaDescribedby = ariaDescribedbyArr.length > 0 ? ariaDescribedbyArr.join(" ") : undefined;
+    return { ariaDescribedby: ariaDescribedby, idError: idError, idHelper: idHelper, idDisclosure: idDisclosure };
+};
+
+const React = React__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;
+
+/**
+ * Use `FormControlDisclosure` to display content that is only visible when toggled into
+ * an "open" state.
+ */
+var FormControlDisclosure = function (_a) {
+    var children = _a.children, summary = _a.summary, onClick = _a.onClick, _b = _a.size, size = _b === void 0 ? "l" : _b, id = _a.id, props = __rest(_a, ["children", "summary", "onClick", "size", "id"]);
+    var surface = useContext(Context$1).surface;
+    var _c = useState(false), disclousreState = _c[0], setDisclosureState = _c[1];
+    var handleOnClick = function () {
+        onClick && onClick();
+        setDisclosureState(function (prevState) { return !prevState; });
+    };
+    return (React__default.createElement("details", __assign({ className: classNames({
+            "arc-FormControlDisclosure": true,
+            "arc-FormControlDisclosure--onDarkSurface": surface === "dark"
+        }) }, filterDataAttrs(props), { "data-testid": "FormControlDisclosure" }),
+        React__default.createElement("summary", { className: "arc-FormControlDisclosure-summary", onClick: handleOnClick, "aria-expanded": disclousreState },
+            React__default.createElement("span", { className: "arc-FormControlDisclosure-summary-icon" },
+                React__default.createElement(BtIconChevronRightMid_2, null)),
+            React__default.createElement(Text, { size: size === "l" ? "m" : "s" }, summary)),
+        React__default.createElement("div", { className: "arc-FormControlDisclosure-details" },
+            React__default.createElement(Text, { size: size === "l" ? "m" : "s" },
+                React__default.createElement("span", { id: id }, children)))));
+};
+
+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, isDisabled = _a.isDisabled, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, props = __rest(_a, ["children", "elementType", "errorMessage", "helper", "htmlFor", "id", "label", "labelSize", "requirementStatus", "isDisabled", "disclosureTitle", "disclosureText", "onClickDisclosure"]);
+    var surface = useContext(Context$1).surface;
+    var _e = useAriaDescribedby({
+        disclosureText: disclosureText,
+        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, idDisclosure = _e.idDisclosure;
+    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.createElement(Provider, { value: { requirementStatus: requirementStatus } },
+        React__default.createElement(ElementType, __assign({ className: classNames({
+                "arc-FormControl": true,
+                "arc-FormControl--isDisabled": isDisabled,
+                "arc-FormControl--smallLabel": labelSize === "s",
+                "arc-FormControl--onDarkSurface": surface === "dark"
+            }), id: id }, elementProps, filterDataAttrs(props)),
+            React__default.createElement(LabelType, __assign({ className: "arc-FormControl-label" }, labelProps),
+                label,
+                requirementStatus === "optional" && (React__default.createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)"))),
+            children,
+            errorMessage ? (React__default.createElement("div", { className: "arc-FormControl-error", id: idError },
+                React__default.createElement("span", { className: "arc-FormControl-error--icon" },
+                    React__default.createElement(BtIconAlert_2, null)),
+                errorMessage)) : disclosureTitle ? (React__default.createElement(FormControlDisclosure, { onClick: onClickDisclosure, summary: disclosureTitle, size: labelSize, id: idDisclosure }, disclosureText)) : (helper && (React__default.createElement("div", { className: "arc-FormControl-helper", id: idHelper }, helper))))));
+};
+
+export { BtIconAlert_2 as B, Context as C, FormControl as F, useAriaDescribedby as u };

package/dist/_shared/esm/{Heading-183be76c.js → Heading-eb1e42db.js}

@@ -1,8 +1,8 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-229fc864.js';
 import { c as classNames } from './index-2ae58626.js';
-import React, { useContext } from 'react';
+import React__default, { useContext } from 'react';
 import { s as suffixModifier } from './suffix-modifier-f5e28822.js';
-import { C as Context } from './Surface-d515d212.js';
+import { C as Context } from './Surface-bf201530.js';
 
 /**
  * Use `Heading` to display heading text.
@@ -15,7 +15,7 @@ var Heading = function (_a) {
     if (level) {
         Element = "h".concat(level);
     }
-    return (React.createElement(Element, __assign({ className: classNames((_b = {
+    return (React__default.createElement(Element, __assign({ className: classNames((_b = {
                 "arc-Heading": true
             },
             _b[suffixModifier("arc-Heading--align", align)] = align && align !== "left",
@@ -27,7 +27,7 @@ var Heading = function (_a) {
 };
 var HeadingProposition = function (_a) {
     var children = _a.children;
-    return React.createElement("span", { className: "arc-Heading-proposition" }, children);
+    return React__default.createElement("span", { className: "arc-Heading-proposition" }, children);
 };
 HeadingProposition.displayName = "Heading.Proposition";
 Heading.Proposition = HeadingProposition;

package/dist/_shared/esm/{Icon-2fd92daa.d.ts → Icon-61f7237a.d.ts}

@@ -1,5 +1,5 @@
-import { icons } from "@arc-ui/tokens";
 import { FC } from "react";
+import { ArcIcon } from "./arc-icon-17594b2f";
 /**
  * Use `Icon` to display brand iconography.
  */
@@ -14,14 +14,10 @@ interface IconProps {
      * Should the Icon component be styled as an inline element?
      */
     isInline?: boolean;
-    /**
-     * Should a selected variant of the Icon be shown?
-     */
-    isSelected?: boolean;
     /**
      * Icon variant.
      */
-    icon?: typeof icons[number];
+    icon?: ArcIcon;
     /**
      * Alternative text label for the Icon.
      */
@@ -30,5 +26,9 @@ interface IconProps {
      * Size of the Icon, in pixels.
      */
     size?: number;
+    /**
+     * value for data-testid
+     */
+    testId?: string;
 }
 export { Icon, colors, IconProps };

package/dist/_shared/esm/Icon-61f7237a.js

@@ -0,0 +1,46 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-229fc864.js';
+import React__default, { useContext } from 'react';
+import { c as classNames } from './index-2ae58626.js';
+import { s as suffixModifier } from './suffix-modifier-f5e28822.js';
+import { C as Context } from './Surface-bf201530.js';
+
+const React = React__default;
+const ArcIconArc = props =>
+  /*#__PURE__*/ React.createElement(
+    "svg",
+    Object.assign(
+      {
+        viewBox: "0 0 16 16",
+        xmlns: "http://www.w3.org/2000/svg"
+      },
+      props
+    ),
+    /*#__PURE__*/ React.createElement("path", {
+      fill: "none",
+      d: "M3.472 11.69a6.5 6.5 0 012.321-6.839A6.5 6.5 0 0113 4.38",
+      stroke: "currentColor"
+    })
+  );
+var ArcIconArc_2 = ArcIconArc;
+
+/**
+ * Use `Icon` to display brand iconography.
+ */
+var Icon = function (_a) {
+    var _b;
+    var testId = _a.testId, _c = _a.color, color = _c === void 0 ? "auto" : _c, _d = _a.icon, icon = _d === void 0 ? ArcIconArc_2 : _d, _e = _a.isInline, isInline = _e === void 0 ? false : _e, label = _a.label, size = _a.size, props = __rest(_a, ["testId", "color", "icon", "isInline", "label", "size"]);
+    var surface = useContext(Context).surface;
+    var Icon = icon;
+    return (React__default.createElement("span", __assign({ "data-testid": testId, "aria-label": label, className: classNames((_b = {},
+            _b["arc-Icon"] = true,
+            _b[suffixModifier("arc-Icon--color", color)] = color !== "auto",
+            _b["arc-Icon--inline"] = isInline,
+            _b["arc-Icon--onDarkSurface"] = surface === "dark",
+            _b)), role: label ? "img" : undefined, style: {
+            height: size,
+            width: size
+        } }, filterDataAttrs(props)),
+        React__default.createElement(Icon, null)));
+};
+
+export { Icon as I };

package/dist/_shared/esm/{Image-7e4948f6.js → Image-c0f3d42f.js}

@@ -1,6 +1,6 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-229fc864.js';
 import { c as classNames } from './index-2ae58626.js';
-import React, { useEffect } from 'react';
+import React__default, { useEffect } from 'react';
 import { s as suffixModifier } from './suffix-modifier-f5e28822.js';
 
 /**
@@ -11,27 +11,27 @@ var Image = function (_a) {
     var _b;
     var alt = _a.alt, _c = _a.anchor, anchor = _c === void 0 ? "C" : _c, children = _a.children, fillColor = _a.fillColor, fit = _a.fit, height = _a.height, loading = _a.loading, overlay = _a.overlay, sizes = _a.sizes, src = _a.src, srcSet = _a.srcSet, width = _a.width, props = __rest(_a, ["alt", "anchor", "children", "fillColor", "fit", "height", "loading", "overlay", "sizes", "src", "srcSet", "width"]);
     useEffect(function () {
-        React.Children.map(children, function (item) {
+        React__default.Children.map(children, function (item) {
             if (item && item.type !== ImageSource) {
                 throw new Error("Illegal child passed to <Image />. Ensure to only use <Image.Source />.");
             }
         });
     }, [children]);
-    var img = (React.createElement("img", { className: "arc-Image-img", alt: alt, height: fit === "cover" ? undefined : height, loading: loading, sizes: children ? undefined : sizes, src: src, srcSet: children ? undefined : srcSet, width: fit === "cover" ? undefined : width }));
-    return (React.createElement("div", __assign({ className: classNames((_b = {
+    var img = (React__default.createElement("img", { className: "arc-Image-img", alt: alt, height: fit === "cover" ? undefined : height, loading: loading, sizes: children ? undefined : sizes, src: src, srcSet: children ? undefined : srcSet, width: fit === "cover" ? undefined : width }));
+    return (React__default.createElement("div", __assign({ className: classNames((_b = {
                 "arc-Image": true,
                 "arc-Image--cover": fit === "cover"
             },
             _b["arc-Image--anchor".concat(anchor)] = fit === "cover",
             _b[suffixModifier("arc-Image--overlay", overlay || "")] = overlay,
-            _b)), style: __assign(__assign(__assign({}, (fillColor && { backgroundColor: fillColor })), (fit === "cover" && height ? { height: "".concat(height, "px") } : null)), (fit === "cover" && width ? { width: "".concat(width, "px") } : null)) }, filterDataAttrs(props)), children ? (React.createElement("picture", null,
+            _b)), style: __assign(__assign(__assign({}, (fillColor && { backgroundColor: fillColor })), (fit === "cover" && height ? { height: "".concat(height, "px") } : null)), (fit === "cover" && width ? { width: "".concat(width, "px") } : null)) }, filterDataAttrs(props)), children ? (React__default.createElement("picture", null,
         children,
         " ",
-        img)) : (React.createElement(React.Fragment, null, img))));
+        img)) : (React__default.createElement(React__default.Fragment, null, img))));
 };
 var ImageSource = function (_a) {
     var height = _a.height, media = _a.media, srcSet = _a.srcSet, sizes = _a.sizes, type = _a.type; _a.width; var props = __rest(_a, ["height", "media", "srcSet", "sizes", "type", "width"]);
-    return (React.createElement("source", __assign({ height: height, media: media, sizes: sizes, srcSet: srcSet, type: type }, filterDataAttrs(props))));
+    return (React__default.createElement("source", __assign({ height: height, media: media, sizes: sizes, srcSet: srcSet, type: type }, filterDataAttrs(props))));
 };
 ImageSource.displayName = "Image.Source";
 Image.Source = ImageSource;

package/dist/_shared/esm/{Section-f1256c87.js → Section-7bc71e26.js}

@@ -1,13 +1,13 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-229fc864.js';
 import { c as classNames } from './index-2ae58626.js';
-import React from 'react';
+import React__default from 'react';
 
 /**
  * Use `Section` to compose content into vertical page layouts.
  */
 var Section = function (_a) {
     var children = _a.children, _b = _a.isFullWidth, isFullWidth = _b === void 0 ? false : _b, _c = _a.isDebugVisible, isDebugVisible = _c === void 0 ? false : _c, props = __rest(_a, ["children", "isFullWidth", "isDebugVisible"]);
-    return (React.createElement("div", __assign({ className: classNames({
+    return (React__default.createElement("div", __assign({ className: classNames({
             "arc-Section": true,
             "arc-Section--fullWidth": isFullWidth,
             "arc-Section--debugVisible": isDebugVisible

package/dist/_shared/esm/{Surface-d515d212.js → Surface-bf201530.js}

@@ -1,6 +1,6 @@
 import { b as __spreadArray, _ as __rest, a as __assign, c as camelCase, f as filterDataAttrs } from './index-229fc864.js';
 import { c as classNames } from './index-2ae58626.js';
-import React, { createContext } from 'react';
+import React__default, { createContext } from 'react';
 
 var defaultContext = { surface: "light" };
 var Context = createContext(defaultContext);
@@ -19,8 +19,8 @@ var Surface = function (_a) {
         background === "darker") {
         surface = "dark";
     }
-    return (React.createElement(Provider, { value: { surface: surface } },
-        React.createElement("div", __assign({ className: classNames((_b = {
+    return (React__default.createElement(Provider, { value: { surface: surface } },
+        React__default.createElement("div", __assign({ className: classNames((_b = {
                     "arc-Surface": true
                 },
                 _b["arc-Surface--".concat(background &&

package/dist/_shared/esm/{Text-d8988620.js → Text-6b958ad8.js}

@@ -1,8 +1,8 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-229fc864.js';
 import { c as classNames } from './index-2ae58626.js';
-import React, { useContext } from 'react';
+import React__default, { useContext } from 'react';
 import { s as suffixModifier } from './suffix-modifier-f5e28822.js';
-import { C as Context } from './Surface-d515d212.js';
+import { C as Context } from './Surface-bf201530.js';
 
 /**
  * Use `Text` to display text.
@@ -11,7 +11,7 @@ var Text = function (_a) {
     var _b;
     var _c = _a.align, align = _c === void 0 ? "left" : _c, children = _a.children, _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 = __rest(_a, ["align", "children", "isInline", "isMeasured", "size", "tone"]);
     var surface = useContext(Context).surface;
-    return (React.createElement("span", __assign({ className: classNames((_b = {
+    return (React__default.createElement("span", __assign({ className: classNames((_b = {
                 "arc-Text": true
             },
             _b[suffixModifier("arc-Text--align", align)] = align !== "left",

package/dist/_shared/esm/VisuallyHidden-b9eebf71.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, VisuallyHiddenProps };

package/dist/_shared/esm/VisuallyHidden-b9eebf71.js

@@ -0,0 +1,11 @@
+import React__default from 'react';
+
+/**
+ * Provides text for screen readers that is visually hidden.
+ */
+var VisuallyHidden = function (_a) {
+    var children = _a.children;
+    return (React__default.createElement("span", { "data-testid": "visually-hidden", className: "arc-VisuallyHidden" }, children));
+};
+
+export { VisuallyHidden as V };

package/dist/_shared/esm/arc-icon-17594b2f.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { SVGProps } from "react";
+type ArcIcon = React.FC<SVGProps<SVGSVGElement>>;
+export { ArcIcon };

package/dist/_shared/esm/index-c81c9401.d.ts

@@ -1,4 +1,4 @@
-export * from "./FormControl-33194106";
+export * from "./FormControl-84c9ace6";
 export * from "../../Card/Card.esm";
-export * from "./use-media-query-38faed7f";
+export * from "./index.es-00cb3bcb";
 export * from "../../TextInput/TextInput.esm";

package/dist/_shared/esm/{use-media-query-38faed7f.js → index.es-00cb3bcb.js}

@@ -36,4 +36,11 @@ var useMediaQuery = function (mediaQuery) {
     return matches;
 };
 
-export { useMediaQuery as u };
+/**
+ * Do not edit directly
+ * Generated file
+ */
+var ArcBreakpointM = 768;
+var ArcBreakpointL = 1024;
+
+export { ArcBreakpointM as A, ArcBreakpointL as a, useMediaQuery as u };