@arc-ui/components 10.8.1 → 11.0.0

package/dist/_shared/cjs/Icon-719d13d4.js

@@ -0,0 +1,52 @@
+'use strict';
+
+var index = require('./index-78b35bc1.js');
+var React$1 = require('react');
+var index$1 = require('./index-45bfb67b.js');
+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$1);
+
+const React = React__default["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 = index.__rest(_a, ["testId", "color", "icon", "isInline", "label", "size"]);
+    var surface = React$1.useContext(Surface.Context).surface;
+    var Icon = icon;
+    return (React__default["default"].createElement("span", index.__assign({ "data-testid": testId, "aria-label": label, className: index$1.classNames((_b = {},
+            _b["arc-Icon"] = true,
+            _b[suffixModifier.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
+        } }, index.filterDataAttrs(props)),
+        React__default["default"].createElement(Icon, null)));
+};
+
+exports.Icon = Icon;

package/dist/_shared/cjs/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/cjs/index-c81c9401.d.ts

@@ -1,4 +1,4 @@
-export * from "./FormControl-7d8e10fa";
+export * from "./FormControl-a1b7421b";
 export * from "../../Card/Card.cjs";
-export * from "./use-media-query-75d1bbae";
+export * from "./index.es-77def0c9";
 export * from "../../TextInput/TextInput.cjs";

package/dist/_shared/cjs/{use-media-query-75d1bbae.js → index.es-77def0c9.js}

@@ -38,4 +38,13 @@ var useMediaQuery = function (mediaQuery) {
     return matches;
 };
 
+/**
+ * Do not edit directly
+ * Generated file
+ */
+var ArcBreakpointM = 768;
+var ArcBreakpointL = 1024;
+
+exports.ArcBreakpointL = ArcBreakpointL;
+exports.ArcBreakpointM = ArcBreakpointM;
 exports.useMediaQuery = useMediaQuery;

package/dist/_shared/esm/BtIconChevronDown2Px-4abd079b.js

@@ -0,0 +1,23 @@
+import React$1 from 'react';
+
+const React = React$1;
+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;
+
+export { BtIconChevronDown2Px_2 as B };

package/dist/_shared/esm/BtIconChevronRight2Px-a5cc1d05.js

@@ -0,0 +1,43 @@
+import React$2 from 'react';
+
+const React$1 = React$2;
+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$2;
+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;
+
+export { BtIconChevronLeft2Px_2 as B, BtIconChevronRight2Px_2 as a };

package/dist/_shared/esm/BtIconChevronRightMid-386cf272.js

@@ -0,0 +1,25 @@
+import React$1 from 'react';
+
+const React = React$1;
+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;
+
+export { BtIconChevronRightMid_2 as B };

package/dist/_shared/esm/{Button-d59c31a2.d.ts → Button-5ff56a7b.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/esm/Button-5ff56a7b.js

@@ -0,0 +1,74 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-229fc864.js';
+import React$1, { forwardRef, useContext } from 'react';
+import { B as BtIconChevronRightMid_2 } from './BtIconChevronRightMid-386cf272.js';
+import { c as classNames } from './index-2ae58626.js';
+import { s as suffixModifier } from './suffix-modifier-f5e28822.js';
+import { I as Icon } from './Icon-76d0d8c0.js';
+import { C as Context } from './Surface-d515d212.js';
+
+const React = React$1;
+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 = forwardRef(function (_a, ref) {
+    var _b;
+    var ariaLabel = _a.ariaLabel, _c = _a.fill, fill = _c === void 0 ? "solid" : _c, href = _a.href, icon = _a.icon, _d = _a.iconPosition, iconPosition = _d === void 0 ? "afterText" : _d, id = _a.id, _e = _a.isDisabled, isDisabled = _e === void 0 ? false : _e, _f = _a.isDisplayBlock, isDisplayBlock = _f === void 0 ? false : _f, _g = _a.isFullWidth, isFullWidth = _g === void 0 ? false : _g, label = _a.label, onClick = _a.onClick, rel = _a.rel, supportingText = _a.supportingText, target = _a.target, type = _a.type, props = __rest(_a, ["ariaLabel", "fill", "href", "icon", "iconPosition", "id", "isDisabled", "isDisplayBlock", "isFullWidth", "label", "onClick", "rel", "supportingText", "target", "type"]);
+    var surface = useContext(Context).surface;
+    var buttonClasses = classNames((_b = {
+            "arc-Button": true,
+            "arc-Button--displayBlock": isDisplayBlock
+        },
+        _b[suffixModifier("arc-Button--fill", fill)] = fill !== "solid",
+        _b["arc-Button--fullWidth"] = isFullWidth,
+        _b[suffixModifier("arc-Button--icon", iconPosition.replace("icon", ""))] = (icon || fill === "flat") &&
+            iconPosition &&
+            iconPosition !== "afterText",
+        _b["arc-Button--hasSupportingText"] = supportingText,
+        _b["arc-Button--onDarkSurface"] = surface === "dark",
+        _b));
+    var commonProps = __assign({ id: id, onClick: onClick, ref: ref }, filterDataAttrs(props));
+    var buttonText = supportingText ? (React$1.createElement("span", null,
+        React$1.createElement("span", { className: "arc-Button-text" }, label),
+        React$1.createElement("span", { className: "arc-Button-supportingText" }, supportingText))) : (React$1.createElement("span", { className: "arc-Button-text" }, label));
+    var buttonIcon = icon || fill === "flat" ? (React$1.createElement(ButtonIcon, { icon: icon, isChevron: !icon && fill === "flat", isBeforeText: iconPosition === "beforeText" })) : null;
+    if (href && !isDisabled) {
+        return (React$1.createElement("a", __assign({}, commonProps, { "aria-label": ariaLabel, className: buttonClasses, href: href, rel: rel, target: target }),
+            React$1.createElement("span", { className: "arc-Button-inner" },
+                buttonText,
+                buttonIcon)));
+    }
+    return (React$1.createElement("button", __assign({}, commonProps, { "aria-label": ariaLabel, className: buttonClasses, disabled: isDisabled, type: type }),
+        React$1.createElement("span", { className: "arc-Button-inner" },
+            buttonText,
+            buttonIcon)));
+});
+var ButtonIcon = function (_a) {
+    var icon = _a.icon, isChevron = _a.isChevron, isBeforeText = _a.isBeforeText;
+    return (React$1.createElement("span", { className: classNames({
+            "arc-Button-icon": true,
+            "arc-Button-icon--chevron": isChevron
+        }) }, isChevron ? (React$1.createElement(Icon, { icon: isBeforeText ? BtIconChevronLeftMid_2 : BtIconChevronRightMid_2 })) : (React$1.createElement(Icon, { icon: icon }))));
+};
+
+export { Button as B };

package/dist/_shared/esm/{FormControl-33194106.js → FormControl-feedc495.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, { createContext, useContext } from 'react';
+import React$1, { createContext, useContext } from 'react';
 import { C as Context$1 } from './Surface-d515d212.js';
 
 /**
@@ -26,6 +26,35 @@ var useAriaDescribedby = function (_a) {
     return { ariaDescribedby: ariaDescribedby, idError: idError, idHelper: idHelper };
 };
 
+const React = React$1;
+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
 };
@@ -57,18 +86,21 @@ var FormControl = function (_a) {
     else {
         elementProps["aria-describedby"] = ariaDescribedby;
     }
-    return (React.createElement(Provider, { value: { requirementStatus: requirementStatus } },
-        React.createElement(ElementType, __assign({ className: classNames({
+    return (React$1.createElement(Provider, { value: { requirementStatus: requirementStatus } },
+        React$1.createElement(ElementType, __assign({ className: classNames({
                 "arc-FormControl": true,
                 "arc-FormControl--smallLabel": labelSize === "s",
                 "arc-FormControl--onDarkSurface": surface === "dark"
             }), id: id }, elementProps, filterDataAttrs(props)),
-            React.createElement(LabelType, __assign({ className: "arc-FormControl-label" }, labelProps),
+            React$1.createElement(LabelType, __assign({ className: "arc-FormControl-label" }, labelProps),
                 label,
-                requirementStatus === "optional" && (React.createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)"))),
-            helper && (React.createElement("div", { className: "arc-FormControl-helper", id: idHelper }, helper)),
+                requirementStatus === "optional" && (React$1.createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)"))),
+            helper && (React$1.createElement("div", { className: "arc-FormControl-helper", id: idHelper }, helper)),
             children,
-            errorMessage && (React.createElement("div", { className: "arc-FormControl-error", id: idError }, errorMessage)))));
+            errorMessage && (React$1.createElement("div", { className: "arc-FormControl-error", id: idError },
+                React$1.createElement("span", { className: "arc-FormControl-error--icon" },
+                    React$1.createElement(BtIconAlert_2, null)),
+                errorMessage)))));
 };
 
-export { Context as C, FormControl as F, useAriaDescribedby as u };
+export { BtIconAlert_2 as B, Context as C, FormControl as F, useAriaDescribedby as u };

package/dist/_shared/esm/{Icon-2fd92daa.d.ts → Icon-76d0d8c0.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-76d0d8c0.js

@@ -0,0 +1,46 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-229fc864.js';
+import React$1, { 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-d515d212.js';
+
+const React = React$1;
+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$1.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$1.createElement(Icon, null)));
+};
+
+export { Icon as I };

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-feedc495";
 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 };