@arc-ui/components 6.1.0 → 6.4.0

package/dist/index.es.js

@@ -690,8 +690,8 @@ var Button = forwardRef(function (_a, ref) {
 var ButtonIcon = function (_a) {
     var icon = _a.icon, isChevron = _a.isChevron, isBeforeText = _a.isBeforeText;
     return (React.createElement("span", { className: classNames({
-            "arc-ButtonIcon": true,
-            "arc-ButtonIcon--chevron": isChevron
+            "arc-Button-icon": true,
+            "arc-Button-icon--chevron": isChevron
         }) }, isChevron ? (React.createElement(Icon, { icon: "btChevron".concat(isBeforeText ? "Left" : "Right", "2px") })) : (React.createElement(Icon, { icon: icon }))));
 };
 
@@ -735,7 +735,7 @@ var Heading = function (_a) {
 };
 var HeadingProposition = function (_a) {
     var children = _a.children;
-    return React.createElement("span", { className: "arc-HeadingProposition" }, children);
+    return React.createElement("span", { className: "arc-Heading-proposition" }, children);
 };
 HeadingProposition.displayName = "Heading.Proposition";
 Heading.Proposition = HeadingProposition;
@@ -780,12 +780,12 @@ var useInteractionMode = function () {
         };
         if (typeof window !== "undefined") {
             document.addEventListener("keydown", onKeyDown, true);
-            document.addEventListener("mousedown", onPointerDown, true);
+            document.addEventListener("click", onPointerDown, true);
         }
         return function () {
             if (typeof window !== "undefined") {
                 document.removeEventListener("keydown", onKeyDown);
-                document.removeEventListener("mousedown", onPointerDown);
+                document.removeEventListener("click", onPointerDown);
             }
         };
     }, []);
@@ -893,13 +893,13 @@ var Card = function (_a) {
 var CardBlock = function (_a) {
     var _b = _a.align, align = _b === void 0 ? "left" : _b, children = _a.children, _c = _a.isFullWidth, isFullWidth = _c === void 0 ? false : _c, _d = _a.grow, grow = _d === void 0 ? false : _d;
     return (React.createElement("div", { className: classNames({
-            "arc-CardBlock": true,
-            "arc-CardBlock--alignCenter": align === "center",
-            "arc-CardBlock--alignRight": align === "right",
-            "arc-CardBlock--fullWidth": isFullWidth,
-            "arc-CardBlock--grow": grow
+            "arc-Card-block": true,
+            "arc-Card-block--alignCenter": align === "center",
+            "arc-Card-block--alignRight": align === "right",
+            "arc-Card-block--fullWidth": isFullWidth,
+            "arc-Card-block--grow": grow
         }) },
-        React.createElement("div", { className: "arc-CardBlock-inner" }, children)));
+        React.createElement("div", { className: "arc-Card-blockInner" }, children)));
 };
 CardBlock.displayName = "Card.Block";
 Card.Block = CardBlock;
@@ -907,11 +907,11 @@ Card.Block = CardBlock;
  * Internal `Card.Image` component to show an image within a Card.
  */
 var CardImage = function (_a) {
-    var _b = _a.alt, alt = _b === void 0 ? "" : _b, _c = _a.height, height = _c === void 0 ? 176 : _c, src = _a.src, srcSet = _a.srcSet;
+    var _b = _a.alt, alt = _b === void 0 ? "" : _b, _c = _a.height, height = _c === void 0 ? 176 : _c, sizes = _a.sizes, src = _a.src, srcSet = _a.srcSet;
     return (React.createElement("div", { className: classNames({
-            "arc-CardImage": true
+            "arc-Card-image": true
         }) },
-        React.createElement(Image, { alt: alt, fit: "cover", src: src, srcSet: srcSet, height: height })));
+        React.createElement(Image, { alt: alt, fit: "cover", sizes: sizes, src: src, srcSet: srcSet, height: height })));
 };
 CardImage.displayName = "Card.Image";
 Card.Image = CardImage;
@@ -922,13 +922,13 @@ var CardLink = function (_a) {
     var actionId = _a.actionId, isButton = _a.isButton, children = _a.children, fill = _a.fill, href = _a.href, stretch = _a.stretch, target = _a.target;
     var surface = useContext(Context$3).surface;
     return (React.createElement("a", { "aria-describedby": actionId, className: classNames({
-            "arc-CardLink": true,
-            "arc-CardLink--button": isButton,
-            "arc-CardLink--onDarkSurface": surface === "dark" && fill !== "neutral",
-            "arc-CardLink--stretch": stretch
+            "arc-Card-link": true,
+            "arc-Card-link--button": isButton,
+            "arc-Card-link--onDarkSurface": surface === "dark" && fill !== "neutral",
+            "arc-Card-link--stretch": stretch
         }), href: href, rel: target === "_blank" ? "noopener noreferrer" : undefined, tabIndex: isButton ? -1 : undefined, target: target },
-        React.createElement("span", { className: "arc-CardLink-text" }, children),
-        isButton && (React.createElement("span", { className: "arc-CardLink-icon" },
+        React.createElement("span", { className: "arc-Card-linkText" }, children),
+        isButton && (React.createElement("span", { className: "arc-Card-linkIcon" },
             React.createElement(Icon, { icon: "btChevronRight2px", size: 8 })))));
 };
 
@@ -1068,24 +1068,24 @@ var Col = function (_a) {
     var _b;
     var align = _a.align, children = _a.children, _c = _a.isDebugVisible, isDebugVisible = _c === void 0 ? false : _c, offset = _a.offset, offsetS = _a.offsetS, offsetM = _a.offsetM, offsetL = _a.offsetL, offsetXL = _a.offsetXL, span = _a.span, spanS = _a.spanS, spanM = _a.spanM, spanL = _a.spanL, spanXL = _a.spanXL, props = __rest(_a, ["align", "children", "isDebugVisible", "offset", "offsetS", "offsetM", "offsetL", "offsetXL", "span", "spanS", "spanM", "spanL", "spanXL"]);
     return (React.createElement("div", __assign({ className: classNames((_b = {},
-            _b["arc-Col"] = true,
-            _b[suffixModifier("arc-Col--align", align || "")] = align,
-            _b["arc-Col--".concat(span)] = typeof span !== "undefined",
-            _b["arc-Col--S".concat(spanS)] = typeof spanS !== "undefined",
-            _b["arc-Col--M".concat(spanM)] = typeof spanM !== "undefined",
-            _b["arc-Col--L".concat(spanL)] = typeof spanL !== "undefined",
-            _b["arc-Col--XL".concat(spanXL)] = typeof spanXL !== "undefined",
-            _b["arc-Col--offset"] = typeof offset !== "undefined" ||
+            _b["arc-Columns-col"] = true,
+            _b[suffixModifier("arc-Columns-col--align", align || "")] = align,
+            _b["arc-Columns-col--".concat(span)] = typeof span !== "undefined",
+            _b["arc-Columns-col--s".concat(spanS)] = typeof spanS !== "undefined",
+            _b["arc-Columns-col--m".concat(spanM)] = typeof spanM !== "undefined",
+            _b["arc-Columns-col--l".concat(spanL)] = typeof spanL !== "undefined",
+            _b["arc-Columns-col--xL".concat(spanXL)] = typeof spanXL !== "undefined",
+            _b["arc-Columns-col--offset"] = typeof offset !== "undefined" ||
                 typeof offsetS !== "undefined" ||
                 typeof offsetM !== "undefined" ||
                 typeof offsetL !== "undefined" ||
                 typeof offsetXL !== "undefined",
-            _b["arc-Col--offset".concat(offset)] = typeof offset !== "undefined",
-            _b["arc-Col--offsetS".concat(offsetS)] = typeof offsetS !== "undefined",
-            _b["arc-Col--offsetM".concat(offsetM)] = typeof offsetM !== "undefined",
-            _b["arc-Col--offsetL".concat(offsetL)] = typeof offsetL !== "undefined",
-            _b["arc-Col--offsetXL".concat(offsetXL)] = typeof offsetXL !== "undefined",
-            _b["arc-Col--debugVisible"] = isDebugVisible,
+            _b["arc-Columns-col--offset".concat(offset)] = typeof offset !== "undefined",
+            _b["arc-Columns-col--offsetS".concat(offsetS)] = typeof offsetS !== "undefined",
+            _b["arc-Columns-col--offsetM".concat(offsetM)] = typeof offsetM !== "undefined",
+            _b["arc-Columns-col--offsetL".concat(offsetL)] = typeof offsetL !== "undefined",
+            _b["arc-Columns-col--offsetXL".concat(offsetXL)] = typeof offsetXL !== "undefined",
+            _b["arc-Columns-col--debugVisible"] = isDebugVisible,
             _b)) }, filterDataAttrs(props)), children));
 };
 Col.displayName = "Columns.Col";
@@ -1166,9 +1166,9 @@ var GroupItem = function (_a) {
     var _b;
     var children = _a.children, _c = _a.grow, grow = _c === void 0 ? false : _c, _d = _a.isDebugVisible, isDebugVisible = _d === void 0 ? false : _d, props = __rest(_a, ["children", "grow", "isDebugVisible"]);
     return (React.createElement("div", __assign({ className: classNames((_b = {},
-            _b["arc-GroupItem"] = true,
-            _b["arc-GroupItem--grow"] = grow,
-            _b["arc-GroupItem--debugVisible"] = isDebugVisible,
+            _b["arc-Group-item"] = true,
+            _b["arc-Group-item--grow"] = grow,
+            _b["arc-Group-item--debugVisible"] = isDebugVisible,
             _b)) }, filterDataAttrs(props)), children));
 };
 GroupItem.displayName = "Group.Item";
@@ -1427,12 +1427,16 @@ var ItemGroup = function (_a) {
         // useEffect does not run in ReactDomServer renders
         setHasClientSideJavaScript(true);
     }, [setHasClientSideJavaScript]);
+    var ElementType = "div";
+    if (title) {
+        ElementType = "details";
+    }
     return (React.createElement("li", { className: "arc-SiteHeaderItemGroup" },
-        React.createElement("details", __assign({ className: "arc-SiteHeaderItemGroup-details", open: isMinWidthArcBreakpointL }, filterDataAttrs(props)),
-            React.createElement("summary", { className: "arc-SiteHeaderItemGroup-summary", tabIndex: isMinWidthArcBreakpointL ? -1 : 0 }, href ? (React.createElement("a", { className: "arc-SiteHeaderItemGroup-title", href: href, tabIndex: !hasClientSideJavaScript || isMinWidthArcBreakpointL ? 0 : -1 }, title)) : (React.createElement("div", { className: "arc-SiteHeaderItemGroup-title" }, title))),
+        React.createElement(ElementType, __assign({ className: "arc-SiteHeaderItemGroup-details", open: Boolean(title && isMinWidthArcBreakpointL) }, filterDataAttrs(props)),
+            title ? (React.createElement("summary", { className: "arc-SiteHeaderItemGroup-summary", tabIndex: isMinWidthArcBreakpointL ? -1 : 0 }, href ? (React.createElement("a", { className: "arc-SiteHeaderItemGroup-title", href: href, tabIndex: !hasClientSideJavaScript || isMinWidthArcBreakpointL ? 0 : -1 }, title)) : (React.createElement("div", { className: "arc-SiteHeaderItemGroup-title" }, title)))) : null,
             React.createElement("ul", { className: "arc-SiteHeaderItemGroup-items" },
                 children,
-                href ? (React.createElement("li", { className: "arc-SiteHeaderItem arc-SiteHeaderItem--viewAll" },
+                href && title ? (React.createElement("li", { className: "arc-SiteHeaderItem arc-SiteHeaderItem--viewAll" },
                     React.createElement("a", { className: "arc-SiteHeaderItem-link", href: href }, viewAllTitle || "View all ".concat(title.toLowerCase())))) : null))));
 };