@arc-ui/components 11.2.0 → 11.4.0

package/dist/index.js

@@ -1204,10 +1204,7 @@ var Button = React$a.forwardRef(function (_a, ref) {
 });
 var ButtonIcon = function (_a) {
     var icon = _a.icon, isChevron = _a.isChevron, isBeforeText = _a.isBeforeText;
-    return (React__default["default"].createElement("span", { className: classNames({
-            "arc-Button-icon": true,
-            "arc-Button-icon--chevron": isChevron
-        }) }, isChevron ? (React__default["default"].createElement(Icon, { icon: isBeforeText ? BtIconChevronLeftMid_2 : BtIconChevronRightMid_2 })) : (React__default["default"].createElement(Icon, { icon: icon }))));
+    return (React__default["default"].createElement("span", { className: "arc-Button-icon" }, isChevron ? (React__default["default"].createElement(Icon, { icon: isBeforeText ? BtIconChevronLeftMid_2 : BtIconChevronRightMid_2 })) : (React__default["default"].createElement(Icon, { icon: icon }))));
 };
 
 /**
@@ -1464,11 +1461,11 @@ var CardLink = function (_a) {
         }), href: href, rel: target === "_blank" ? "noopener noreferrer" : undefined, tabIndex: isButton ? -1 : undefined, target: target }, filterDataAttrs(linkData)),
         React__default["default"].createElement("span", { className: "arc-Card-linkText" }, children),
         isButton && (React__default["default"].createElement("span", { className: "arc-Card-linkIcon" },
-            React__default["default"].createElement(Icon, { testId: "cardIcon", icon: BtIconChevronRightMid_2, size: 16 })))));
+            React__default["default"].createElement(Icon, { testId: "cardIcon", icon: BtIconChevronRightMid_2, size: 24 })))));
 };
 
 const React$4 = React__default["default"];
-const BtIconTickVariant = props =>
+const BtIconTickAlt2Px = props =>
   /*#__PURE__*/ React$4.createElement(
     "svg",
     Object.assign(
@@ -1481,11 +1478,11 @@ const BtIconTickVariant = props =>
     /*#__PURE__*/ React$4.createElement("defs", null),
     /*#__PURE__*/ React$4.createElement("path", {
       d:
-        "M13.5,21.207,9.14648,16.85352a.5.5,0,0,1,.707-.707L13.5,19.793l8.64648-8.64649a.5.5,0,0,1,.707.707Z",
+        "M13.49963,21.91418l-4.707-4.707a1.0014,1.0014,0,0,1,0-1.41406,1.02353,1.02353,0,0,1,1.41406,0l3.293,3.293,8.293-8.293a.99989.99989,0,1,1,1.41406,1.41406Z",
       fill: "currentColor"
     })
   );
-var BtIconTickVariant_2 = BtIconTickVariant;
+var BtIconTickAlt2Px_2 = BtIconTickAlt2Px;
 
 const React$3 = React__default["default"];
 const BtIconAlert = props =>
@@ -1569,14 +1566,14 @@ var Provider$3 = Context$2.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$2(_a, ["children", "elementType", "errorMessage", "helper", "htmlFor", "id", "label", "labelSize", "requirementStatus", "isDisabled", "disclosureTitle", "disclosureText", "onClickDisclosure"]);
+    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, _e = _a.helperUnderLabel, helperUnderLabel = _e === void 0 ? false : _e, isDisabled = _a.isDisabled, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, props = __rest$2(_a, ["children", "elementType", "errorMessage", "helper", "htmlFor", "id", "label", "labelSize", "requirementStatus", "helperUnderLabel", "isDisabled", "disclosureTitle", "disclosureText", "onClickDisclosure"]);
     var surface = React$a.useContext(Context$3).surface;
-    var _e = useAriaDescribedby({
+    var _f = 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;
+    }), ariaDescribedby = _f.ariaDescribedby, idError = _f.idError, idHelper = _f.idHelper, idDisclosure = _f.idDisclosure;
     var LabelType = ElementType === "div" ? "label" : "legend";
     var elementProps = {};
     var labelProps = {};
@@ -1602,11 +1599,12 @@ var FormControl = function (_a) {
             React__default["default"].createElement(LabelType, __assign$2({ className: "arc-FormControl-label" }, labelProps),
                 label,
                 requirementStatus === "optional" && (React__default["default"].createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)"))),
+            helperUnderLabel && (React__default["default"].createElement(React__default["default"].Fragment, null, helper && (React__default["default"].createElement("div", { className: "arc-FormControl-helper arc-FormControl-helper--underLabel", id: idHelper }, helper)))),
             children,
-            errorMessage ? (React__default["default"].createElement("div", { className: "arc-FormControl-error", id: idError },
+            !helperUnderLabel && (React__default["default"].createElement(React__default["default"].Fragment, null, 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)) : disclosureTitle ? (React__default["default"].createElement(FormControlDisclosure, { onClick: onClickDisclosure, summary: disclosureTitle, size: labelSize, id: idDisclosure }, disclosureText)) : (helper && (React__default["default"].createElement("div", { className: "arc-FormControl-helper", id: idHelper }, helper))))));
+                errorMessage)) : disclosureTitle ? (React__default["default"].createElement(FormControlDisclosure, { onClick: onClickDisclosure, summary: disclosureTitle, size: labelSize, id: idDisclosure }, disclosureText)) : (helper && (React__default["default"].createElement("div", { className: "arc-FormControl-helper", id: idHelper }, helper))))))));
 };
 
 /**
@@ -1641,7 +1639,7 @@ var Checkbox = React$a.forwardRef(function (_a, ref) {
         React__default["default"].createElement("label", { id: idLabel, htmlFor: id, className: "arc-Checkbox-label" },
             React__default["default"].createElement("input", __assign$2({ "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", className: "arc-Checkbox-input" }, checkedProps, { disabled: isDisabled, id: id, name: name, onBlur: onBlur, onChange: onChange, ref: ref, required: isRequired, type: "checkbox", value: value }, filterDataAttrs(props))),
             React__default["default"].createElement("span", { className: "arc-Checkbox-box" },
-                React__default["default"].createElement(BtIconTickVariant_2, null)),
+                React__default["default"].createElement(BtIconTickAlt2Px_2, null)),
             React__default["default"].createElement("span", null,
                 label,
                 !isRequired && requirementStatus !== "optional" ? (React__default["default"].createElement("span", { className: "arc-Checkbox-labelOptional" }, "(optional)")) : null,
@@ -1957,7 +1955,7 @@ var RadioGroup = function (_a) {
             size: size
         } },
         React__default["default"].createElement("div", __assign$2({ className: "arc-RadioGroup" }, filterDataAttrs(props)),
-            React__default["default"].createElement(FormControl, { elementType: "fieldset", label: label, labelSize: labelSize, helper: helper, id: id, requirementStatus: "not-applicable" }, children))));
+            React__default["default"].createElement(FormControl, { elementType: "fieldset", label: label, labelSize: labelSize, helper: helper, id: id, requirementStatus: "not-applicable", helperUnderLabel: true }, children))));
 };
 RadioButton.displayName = "RadioGroup.RadioButton";
 RadioGroup.RadioButton = RadioButton;
@@ -35754,26 +35752,6 @@ const BtIconChevronUp2Px = props =>
   );
 var BtIconChevronUp2Px_2 = BtIconChevronUp2Px;
 
-const React = React__default["default"];
-const BtIconTickAlt2Px = 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:
-        "M13.49963,21.91418l-4.707-4.707a1.0014,1.0014,0,0,1,0-1.41406,1.02353,1.02353,0,0,1,1.41406,0l3.293,3.293,8.293-8.293a.99989.99989,0,1,1,1.41406,1.41406Z",
-      fill: "currentColor"
-    })
-  );
-var BtIconTickAlt2Px_2 = BtIconTickAlt2Px;
-
 /** Use `Select` to choose from a dropdown list of options. */
 var Select = function (_a) {
     var isRequired = _a.isRequired, isDisabled = _a.isDisabled, placeholder = _a.placeholder, label = _a.label, options = _a.options, onOpenChange = _a.onOpenChange, isDefaultOpen = _a.isDefaultOpen, defaultValue = _a.defaultValue, errorMessage = _a.errorMessage, labelSize = _a.labelSize, helper = _a.helper, name = _a.name, isFluid = _a.isFluid, onBlur = _a.onBlur, onChange = _a.onChange, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure;
@@ -36712,11 +36690,15 @@ const $6be4966fd9bbc698$export$6521433ed15a34db = $6be4966fd9bbc698$export$4d07b
  */
 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 = __rest$2(_a, ["isDebugVisible", "size"]);
+    var _c = _a.isDebugVisible, isDebugVisible = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? "24" : _d, sizeS = _a.sizeS, sizeM = _a.sizeM, sizeL = _a.sizeL, sizeXL = _a.sizeXL, props = __rest$2(_a, ["isDebugVisible", "size", "sizeS", "sizeM", "sizeL", "sizeXL"]);
     return (React__default["default"].createElement("div", __assign$2({ className: classNames((_b = {
                 "arc-VerticalSpace": true
             },
-            _b["arc-VerticalSpace--size".concat(size)] = size && size !== "24",
+            _b["arc-VerticalSpace--size".concat(size)] = size,
+            _b["arc-VerticalSpace--sizeS".concat(sizeS)] = sizeS && sizeS,
+            _b["arc-VerticalSpace--sizeM".concat(sizeM)] = sizeM && sizeM,
+            _b["arc-VerticalSpace--sizeL".concat(sizeL)] = sizeL && sizeL,
+            _b["arc-VerticalSpace--sizeXL".concat(sizeXL)] = sizeXL && sizeXL,
             _b["arc-VerticalSpace--debugVisible"] = isDebugVisible,
             _b)) }, filterDataAttrs(props))));
 };
@@ -36769,6 +36751,63 @@ var Badge = function (_a) {
             React__default["default"].createElement(Text, { size: size === "default" ? "xs" : "m" }, children))));
 };
 
+const React = React__default["default"];
+const BtIconCross = 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", {
+      d:
+        "M20.85352,11.14648a.49983.49983,0,0,0-.707,0L16,15.293l-4.14648-4.14649a.5.5,0,0,0-.707.707L15.293,16l-4.14649,4.14648a.5.5,0,1,0,.707.707L16,16.707l4.14648,4.14649a.5.5,0,0,0,.707-.707L16.707,16l4.14649-4.14648A.49983.49983,0,0,0,20.85352,11.14648Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconCross_2 = BtIconCross;
+
+/**
+ * use `Tag` to promote features and manage filtering.
+ */
+var Tag = function (_a) {
+    var children = _a.children, isRemovable = _a.isRemovable, link = _a.link, icon = _a.icon, onClick = _a.onClick, onRemove = _a.onRemove, props = __rest$2(_a, ["children", "isRemovable", "link", "icon", "onClick", "onRemove"]);
+    var surface = React$a.useContext(Context$3).surface;
+    var _b = React$a.useState(false), isRemoved = _b[0], setIsRemoved = _b[1];
+    var onRemoveHandler = function () {
+        setIsRemoved(function (p) { return !p; });
+        onRemove && onRemove();
+    };
+    return (React__default["default"].createElement("div", __assign$2({ className: classNames("arc-Tag", {
+            "arc-Tag--onDarkSurface": surface === "dark",
+            "arc-Tag--isRemovable": isRemovable,
+            "arc-Tag--hasIcon": icon,
+            "arc-Tag--hasLink": link || onClick,
+            "arc-Tag--removed": isRemoved
+        }) }, (isRemoved && { "aria-hidden": true }), filterDataAttrs(props)),
+        link ? (React__default["default"].createElement("a", { className: "arc-Tag-content", href: link, tabIndex: 0 },
+            icon && (React__default["default"].createElement("span", { className: "arc-Tag-icon" },
+                React__default["default"].createElement(Icon, { "data-testid": "arc-Tag-icon", icon: icon, size: 16 }))),
+            React__default["default"].createElement("div", { className: "arc-Tag-label" }, children))) : (React__default["default"].createElement(React__default["default"].Fragment, null, onClick ? (React__default["default"].createElement("button", { className: "arc-Tag-content", onClick: onClick, "data-testid": "arc-Tag-content" },
+            icon && (React__default["default"].createElement("span", { className: "arc-Tag-icon" },
+                React__default["default"].createElement(Icon, { "data-testid": "arc-Tag-icon", icon: icon, size: 16 }))),
+            React__default["default"].createElement("div", { className: "arc-Tag-label" }, children))) : (React__default["default"].createElement("div", { className: "arc-Tag-content", "data-testid": "arc-Tag-content" },
+            icon && (React__default["default"].createElement("span", { className: "arc-Tag-icon" },
+                React__default["default"].createElement(Icon, { "data-testid": "arc-Tag-icon", icon: icon, size: 16 }))),
+            React__default["default"].createElement("div", { className: "arc-Tag-label" }, children))))),
+        isRemovable && (React__default["default"].createElement("button", { className: "arc-Tag-icon arc-Tag-icon--removable", onClick: onRemoveHandler, "data-testid": "arc-Tag-icon-removable", "aria-live": "polite", "aria-roledescription": "remove tag" },
+            React__default["default"].createElement(Icon, { icon: BtIconCross_2, color: "brand", size: 20 })))));
+};
+
 /**
  * Provides text for screen readers that is visually hidden.
  */
@@ -36852,6 +36891,7 @@ exports.SiteHeaderRehydrator = SiteHeaderRehydrator;
 exports.Surface = Surface;
 exports.SurfaceContext = Context$3;
 exports.Switch = Switch;
+exports.Tag = Tag;
 exports.Text = Text;
 exports.TextInput = TextInput;
 exports.Truncate = Truncate;