@arc-ui/community-components 3.10.0 → 3.12.0

package/lib/index.d.cts

@@ -59,6 +59,10 @@ interface HeaderBarNotificationProps {
         handleClick: () => void;
         text: string;
     };
+    /**
+     * Specify a size or mutliple sizes where the notification only appears.
+     */
+    showAtSize?: ("s" | "m" | "l" | "xl")[];
 }
 
 interface AccordionHeadingProps {
@@ -669,6 +673,10 @@ interface ActionTileProps {
      * Heading text (required)
      */
     heading: string;
+    /**
+     * Whether to use the compact tile variant
+     */
+    isCompact?: boolean;
     /**
      * Whether the tile is in active/selected state
      */
@@ -687,6 +695,8 @@ interface LinkTileProps extends React$1.HTMLAttributes<HTMLDivElement> {
     href?: string;
     /** Whether to show the arrow icon. Defaults to true */
     showIcon?: boolean;
+    /** Visual tone variant. Defaults to brand */
+    tone?: "brand" | "neutral";
 }
 
 declare const InlineLinkGroup: React$1.FC<InlineLinkGroupProps>;

package/lib/index.d.mts

@@ -59,6 +59,10 @@ interface HeaderBarNotificationProps {
         handleClick: () => void;
         text: string;
     };
+    /**
+     * Specify a size or mutliple sizes where the notification only appears.
+     */
+    showAtSize?: ("s" | "m" | "l" | "xl")[];
 }
 
 interface AccordionHeadingProps {
@@ -669,6 +673,10 @@ interface ActionTileProps {
      * Heading text (required)
      */
     heading: string;
+    /**
+     * Whether to use the compact tile variant
+     */
+    isCompact?: boolean;
     /**
      * Whether the tile is in active/selected state
      */
@@ -687,6 +695,8 @@ interface LinkTileProps extends React$1.HTMLAttributes<HTMLDivElement> {
     href?: string;
     /** Whether to show the arrow icon. Defaults to true */
     showIcon?: boolean;
+    /** Visual tone variant. Defaults to brand */
+    tone?: "brand" | "neutral";
 }
 
 declare const InlineLinkGroup: React$1.FC<InlineLinkGroupProps>;

package/lib/index.mjs

@@ -130,72 +130,6 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-/**
- * Filters out attributes from the given props object based on a pattern.
- *
- * This function extracts all properties that match either the `data-*` or `aria-*` attribute patterns
- * and returns a new object containing only those properties.
- *
- * @param props - The object containing properties to filter.
- * @returns A new object containing only the matched attributes (`data-*` and `aria-*`) from the input props.
- */
-var attributePrefixes = ["data-", "aria-"];
-var filterAttrs = function (props) {
-    var filteredProps = {};
-    var _loop_1 = function (prop) {
-        if (Object.prototype.hasOwnProperty.call(props, prop) &&
-            attributePrefixes.some(function (prefix) { return prop.startsWith(prefix); })) {
-            filteredProps[prop] = props[prop];
-        }
-    };
-    for (var prop in props) {
-        _loop_1(prop);
-    }
-    return filteredProps;
-};
-
-/**
- * Do not edit directly
- * Generated file
- */
-
-const BtIconCrossAlt =
-  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' d='m16.707 16.02 4.482-4.494a.5.5 0 1 0-.707-.706l-4.48 4.493-4.482-4.493a.5.5 0 1 0-.707.706l4.483 4.494-4.483 4.494a.5.5 0 1 0 .707.706l4.481-4.493 4.481 4.493a.5.5 0 1 0 .707-.706Z'/%3e%3c/svg%3e";
-
-var styles$v = {"container":"HeaderBarNotification-module_container__18nau","content":"HeaderBarNotification-module_content__SUo-l","image":"HeaderBarNotification-module_image__uV-nD","details":"HeaderBarNotification-module_details__S5Rrx","closeButtonContainer":"HeaderBarNotification-module_closeButtonContainer__b1UDI"};
-
-var HeaderBarNotification = function (_a) {
-    var headerActionProps = _a.headerActionProps, notificationId = _a.notificationId, _b = _a.isPersistant, isPersistant = _b === void 0 ? false : _b, icon = _a.icon, image = _a.image, heading = _a.heading, tagline = _a.tagline, children = _a.children, button = _a.button, props = __rest(_a, ["headerActionProps", "notificationId", "isPersistant", "icon", "image", "heading", "tagline", "children", "button"]);
-    var _c = useState(isPersistant), showNotification = _c[0], setShowNotification = _c[1];
-    var localStorageId = "hide".concat(notificationId.replace(/[^a-zA-Z0-9\-_]/g, ""));
-    // Check to see if the notication has been hidden or not and show it if so
-    useEffect(function () {
-        if (typeof window !== "undefined" && !isPersistant) {
-            setShowNotification(!localStorage.getItem(localStorageId));
-        }
-    }, []);
-    // Handle the closure of the notification, store it in the session so we don't keep showing it.
-    var handleClosePopup = function () {
-        if (!isPersistant)
-            localStorage.setItem(localStorageId, "true");
-        setShowNotification(false);
-    };
-    return (React.createElement(Popover, __assign({ open: showNotification, side: "bottom", sideOffset: 12, maxWidth: 900, arrow: true, content: React.createElement("div", { className: styles$v.container },
-            React.createElement("div", { className: styles$v.content },
-                (image || icon) && (React.createElement("div", { className: styles$v.image },
-                    image && (React.createElement(Image$2, { src: image, alt: heading, fit: "cover", width: 55 })),
-                    icon && React.createElement(Icon, { icon: icon, size: 35 }))),
-                React.createElement("div", { className: styles$v.details },
-                    tagline && (React.createElement(Text, { size: "m", tone: "muted" }, tagline)),
-                    React.createElement(Heading, { size: "s", level: "3" }, heading),
-                    children)),
-            button && (React.createElement(ButtonV2, { onClick: button.handleClick, label: button.text, buttonStyle: "secondary", isFullWidth: true })),
-            React.createElement("div", { className: styles$v.closeButtonContainer },
-                React.createElement(Tooltip, { side: "bottom", title: "Dismiss Notification", asChild: true },
-                    React.createElement(ButtonV2, { "data-testid": localStorageId, buttonStyle: "tertiary", "aria-label": "Close ".concat(notificationId, " popup"), onClick: handleClosePopup, icon: BtIconCrossAlt })))) }, filterAttrs(props)),
-        React.createElement(NavigationHeaderAction, __assign({ isAttention: true }, headerActionProps))));
-};
-
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 function getDefaultExportFromCjs (x) {
@@ -289,6 +223,73 @@ function requireClassnames () {
 var classnamesExports = requireClassnames();
 var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
 
+/**
+ * Filters out attributes from the given props object based on a pattern.
+ *
+ * This function extracts all properties that match either the `data-*` or `aria-*` attribute patterns
+ * and returns a new object containing only those properties.
+ *
+ * @param props - The object containing properties to filter.
+ * @returns A new object containing only the matched attributes (`data-*` and `aria-*`) from the input props.
+ */
+var attributePrefixes = ["data-", "aria-"];
+var filterAttrs = function (props) {
+    var filteredProps = {};
+    var _loop_1 = function (prop) {
+        if (Object.prototype.hasOwnProperty.call(props, prop) &&
+            attributePrefixes.some(function (prefix) { return prop.startsWith(prefix); })) {
+            filteredProps[prop] = props[prop];
+        }
+    };
+    for (var prop in props) {
+        _loop_1(prop);
+    }
+    return filteredProps;
+};
+
+/**
+ * Do not edit directly
+ * Generated file
+ */
+
+const BtIconCrossAlt =
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' d='m16.707 16.02 4.482-4.494a.5.5 0 1 0-.707-.706l-4.48 4.493-4.482-4.493a.5.5 0 1 0-.707.706l4.483 4.494-4.483 4.494a.5.5 0 1 0 .707.706l4.481-4.493 4.481 4.493a.5.5 0 1 0 .707-.706Z'/%3e%3c/svg%3e";
+
+var styles$v = {"popupNotification":"HeaderBarNotification-module_popupNotification__HAxod","hiddenByDefault":"HeaderBarNotification-module_hiddenByDefault__JHbUy","s":"HeaderBarNotification-module_s__HofMM","m":"HeaderBarNotification-module_m__ZUdjq","l":"HeaderBarNotification-module_l__wlZ1Z","xl":"HeaderBarNotification-module_xl__z7DBP","container":"HeaderBarNotification-module_container__18nau","content":"HeaderBarNotification-module_content__SUo-l","image":"HeaderBarNotification-module_image__uV-nD","details":"HeaderBarNotification-module_details__S5Rrx","closeButtonContainer":"HeaderBarNotification-module_closeButtonContainer__b1UDI"};
+
+var HeaderBarNotification = function (_a) {
+    var _b;
+    var headerActionProps = _a.headerActionProps, notificationId = _a.notificationId, _c = _a.isPersistant, isPersistant = _c === void 0 ? false : _c, icon = _a.icon, image = _a.image, heading = _a.heading, tagline = _a.tagline, children = _a.children, button = _a.button, showAtSize = _a.showAtSize, props = __rest(_a, ["headerActionProps", "notificationId", "isPersistant", "icon", "image", "heading", "tagline", "children", "button", "showAtSize"]);
+    var _d = useState(isPersistant), showNotification = _d[0], setShowNotification = _d[1];
+    var localStorageId = "hide".concat(notificationId.replace(/[^a-zA-Z0-9\-_]/g, ""));
+    // Check to see if the notication has been hidden or not and show it if so
+    useEffect(function () {
+        if (typeof window !== "undefined" && !isPersistant) {
+            setShowNotification(!localStorage.getItem(localStorageId));
+        }
+    }, []);
+    // Handle the closure of the notification, store it in the session so we don't keep showing it.
+    var handleClosePopup = function () {
+        if (!isPersistant)
+            localStorage.setItem(localStorageId, "true");
+        setShowNotification(false);
+    };
+    return (React.createElement(Popover, __assign({ open: showNotification, side: "bottom", sideOffset: 12, maxWidth: 900, arrow: true, asChild: true, className: classNames(styles$v.popupNotification, (_b = {}, _b[styles$v.hiddenByDefault] = showAtSize, _b), showAtSize === null || showAtSize === void 0 ? void 0 : showAtSize.map(function (s) { return styles$v[s]; })), content: React.createElement("div", { className: styles$v.container },
+            React.createElement("div", { className: styles$v.content },
+                (image || icon) && (React.createElement("div", { className: styles$v.image },
+                    image && (React.createElement(Image$2, { src: image, alt: heading, fit: "cover", width: 55 })),
+                    icon && React.createElement(Icon, { icon: icon, size: 35 }))),
+                React.createElement("div", { className: styles$v.details },
+                    tagline && (React.createElement(Text, { size: "m", tone: "muted" }, tagline)),
+                    React.createElement(Heading, { size: "s", level: "3" }, heading),
+                    children)),
+            button && (React.createElement(ButtonV2, { onClick: button.handleClick, label: button.text, buttonStyle: "secondary", isFullWidth: true })),
+            React.createElement("div", { className: styles$v.closeButtonContainer },
+                React.createElement(Tooltip, { side: "bottom", title: "Dismiss Notification", asChild: true },
+                    React.createElement(ButtonV2, { "data-testid": localStorageId, buttonStyle: "tertiary", "aria-label": "Close ".concat(notificationId, " popup"), onClick: handleClosePopup, icon: BtIconCrossAlt })))) }, filterAttrs(props)),
+        React.createElement(NavigationHeaderAction, __assign({ isAttention: true }, headerActionProps))));
+};
+
 var styles$u = {"accordion-header":"AccordionHeading-module_accordion-header__8s12f","accordion-header--hasImage":"AccordionHeading-module_accordion-header--hasImage__wbDjW","accordion-header--padded":"AccordionHeading-module_accordion-header--padded__me1JY","accordion-header--headingSizeM":"AccordionHeading-module_accordion-header--headingSizeM__amLfy"};
 
 var AccordionHeading = function (_a) {
@@ -4015,33 +4016,38 @@ var ContentInfoWidget = function (_a) {
             React.createElement(Text, { size: "xs", tone: "muted" }, text))));
 };
 
-var styles$b = {"action-tile":"ActionTile-module_action-tile__JPwGb","action-tile-content":"ActionTile-module_action-tile-content__ZkgHc","action-tile-content--without-icon":"ActionTile-module_action-tile-content--without-icon__7F5xj","action-tile-icon":"ActionTile-module_action-tile-icon__PY1EN","action-tile-heading":"ActionTile-module_action-tile-heading__Uxdu9","action-tile--active":"ActionTile-module_action-tile--active__-aWze","action-tile-tick":"ActionTile-module_action-tile-tick__vhsJE"};
+var styles$b = {"action-tile":"ActionTile-module_action-tile__JPwGb","action-tile-content":"ActionTile-module_action-tile-content__ZkgHc","action-tile-content--without-icon":"ActionTile-module_action-tile-content--without-icon__7F5xj","action-tile-icon":"ActionTile-module_action-tile-icon__PY1EN","action-tile-heading":"ActionTile-module_action-tile-heading__Uxdu9","action-tile--compact":"ActionTile-module_action-tile--compact__wq5Aa","action-tile--active":"ActionTile-module_action-tile--active__-aWze","action-tile-tick":"ActionTile-module_action-tile-tick__vhsJE"};
 
 var ActionTile = function (_a) {
     var _b, _c;
-    var icon = _a.icon, activeIcon = _a.activeIcon, heading = _a.heading, _d = _a.isActive, isActive = _d === void 0 ? false : _d, onClick = _a.onClick, props = __rest(_a, ["icon", "activeIcon", "heading", "isActive", "onClick"]);
+    var icon = _a.icon, activeIcon = _a.activeIcon, heading = _a.heading, _d = _a.isCompact, isCompact = _d === void 0 ? false : _d, _e = _a.isActive, isActive = _e === void 0 ? false : _e, onClick = _a.onClick, props = __rest(_a, ["icon", "activeIcon", "heading", "isCompact", "isActive", "onClick"]);
     var displayIcon = isActive && activeIcon ? activeIcon : icon;
+    var iconSize = isCompact ? 40 : 48;
     var content = (React.createElement(React.Fragment, null,
         React.createElement("div", { className: classNames(styles$b["action-tile-content"], (_b = {},
                 _b[styles$b["action-tile-content--without-icon"]] = !displayIcon,
                 _b)) },
             displayIcon && (React.createElement("div", { className: styles$b["action-tile-icon"] },
-                React.createElement(Icon, { icon: displayIcon, size: 48 }))),
+                React.createElement(Icon, { icon: displayIcon, size: iconSize }))),
             React.createElement("span", { className: styles$b["action-tile-heading"] }, heading)),
         isActive && (React.createElement("div", { className: styles$b["action-tile-tick"] },
             React.createElement(Icon, { icon: BtIconTickAlt2Px, size: 28 })))));
     return (React.createElement("button", __assign({ type: "button", className: classNames(styles$b["action-tile"], (_c = {},
             _c[styles$b["action-tile--active"]] = isActive,
+            _c[styles$b["action-tile--compact"]] = isCompact,
             _c)), onClick: onClick, "aria-pressed": isActive }, filterAttrs(props)), content));
 };
 
-var styles$a = {"link-tile":"LinkTile-module_link-tile__xVUP3","link-tile-content":"LinkTile-module_link-tile-content__H-QN8","link-tile-icon":"LinkTile-module_link-tile-icon__kTMfH","link-tile-text":"LinkTile-module_link-tile-text__0K6zf"};
+var styles$a = {"link-tile":"LinkTile-module_link-tile__xVUP3","link-tile-content":"LinkTile-module_link-tile-content__H-QN8","link-tile-icon":"LinkTile-module_link-tile-icon__kTMfH","link-tile-text":"LinkTile-module_link-tile-text__0K6zf","link-tile--neutral":"LinkTile-module_link-tile--neutral__T2z5x"};
 
 var LinkTile = function (_a) {
-    var text = _a.text, href = _a.href, _b = _a.showIcon, showIcon = _b === void 0 ? true : _b, className = _a.className, props = __rest(_a, ["text", "href", "showIcon", "className"]);
+    var _b;
+    var text = _a.text, href = _a.href, _c = _a.showIcon, showIcon = _c === void 0 ? true : _c, _d = _a.tone, tone = _d === void 0 ? "brand" : _d, className = _a.className, props = __rest(_a, ["text", "href", "showIcon", "tone", "className"]);
     var Component = href ? "a" : "div";
     var linkProps = href ? { href: href } : {};
-    return (React.createElement(Component, __assign({ className: classNames(styles$a["link-tile"], className) }, linkProps, props), text && (React.createElement("div", { className: styles$a["link-tile-content"] },
+    return (React.createElement(Component, __assign({ className: classNames(styles$a["link-tile"], (_b = {},
+            _b[styles$a["link-tile--neutral"]] = tone === "neutral",
+            _b), className) }, linkProps, props), text && (React.createElement("div", { className: styles$a["link-tile-content"] },
         React.createElement("span", { className: styles$a["link-tile-text"] }, text),
         showIcon && (React.createElement("span", { className: styles$a["link-tile-icon"] },
             React.createElement(Icon, { icon: BtIconArrowAltRight, size: 32 })))))));