@astryxdesign/core 0.4.2-canary.255e810 → 0.4.2-canary.44cde5e

package/dist/Banner/Banner.d.ts

@@ -1,6 +1,6 @@
 /**
  * @file Banner.tsx
- * @input Uses React useState, Button, Icon (with registry string names), StyleX
+ * @input Uses React useState/useRef/useId, Button, Icon (with registry string names), StyleX
  * @output Exports Banner component, BannerProps, BannerStatus, BannerContainer types
  * @position Core implementation; consumed by index.ts, tested by Banner.test.tsx
  *
@@ -15,6 +15,10 @@
  * - Each visual area owns its own border-radius (no overflow:clip on the container)
  * - When children are provided, a collapse/expand toggle button appears in the end area
  *
+ * A status added through `BannerStatusMap` augmentation has no entry in the
+ * status lookups, so it renders with no status fill, no default glyph and the
+ * polite `role="status"` rather than losing its ARIA role entirely.
+ *
  * Title and description render as <div> (not <p>): they accept arbitrary
  * ReactNode content, and <p> cannot legally contain block-level children
  * (the HTML parser reparents them, desyncing SSR markup from the hydrated
@@ -159,7 +163,7 @@ export interface BannerProps extends BaseProps<HTMLDivElement> {
  * </Banner>
  * ```
  */
-export declare function Banner({ status, title, description, icon, isDismissable, onDismiss, endContent, container, elevation, defaultIsExpanded, children, xstyle, className, style, ref, ...rest }: BannerProps): import("react").JSX.Element | null;
+export declare function Banner({ status, title, description, icon, isDismissable, onDismiss, endContent, container, elevation, defaultIsExpanded, children, xstyle, className, style, ref, onFocusCapture, onPointerDownCapture, ...rest }: BannerProps): import("react").JSX.Element | null;
 export declare namespace Banner {
     var displayName: string;
 }

package/dist/Banner/Banner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/Banner/Banner.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,OAAO,EAAkB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAEtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAgB5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAI9C,OAAO,KAAK,EAAC,eAAe,EAAE,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAMjE;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,eAAe,CAAC;AAEjD;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,MAAM,EAAE,YAAY,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAgLD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,KAAK,EACL,WAAW,EACX,IAAI,EACJ,aAAqB,EACrB,SAAS,EACT,UAAU,EACV,SAAkB,EAClB,SAAkB,EAClB,iBAAyB,EACzB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,WAAW,sCAqKb;yBAtLe,MAAM"}
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/Banner/Banner.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,OAAO,EAA0B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE9D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAgB5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAI9C,OAAO,KAAK,EAAC,eAAe,EAAE,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAMjE;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,eAAe,CAAC;AAEjD;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,MAAM,EAAE,YAAY,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAiMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,KAAK,EACL,WAAW,EACX,IAAI,EACJ,aAAqB,EACrB,SAAS,EACT,UAAU,EACV,SAAkB,EAClB,SAAkB,EAClB,iBAAyB,EACzB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,cAAc,EACd,oBAAoB,EACpB,GAAG,IAAI,EACR,EAAE,WAAW,sCA2Mb;yBA9Ne,MAAM"}

package/dist/Banner/Banner.js

@@ -4,7 +4,7 @@
 
 /**
  * @file Banner.tsx
- * @input Uses React useState, Button, Icon (with registry string names), StyleX
+ * @input Uses React useState/useRef/useId, Button, Icon (with registry string names), StyleX
  * @output Exports Banner component, BannerProps, BannerStatus, BannerContainer types
  * @position Core implementation; consumed by index.ts, tested by Banner.test.tsx
  *
@@ -19,6 +19,10 @@
  * - Each visual area owns its own border-radius (no overflow:clip on the container)
  * - When children are provided, a collapse/expand toggle button appears in the end area
  *
+ * A status added through `BannerStatusMap` augmentation has no entry in the
+ * status lookups, so it renders with no status fill, no default glyph and the
+ * polite `role="status"` rather than losing its ARIA role entirely.
+ *
  * Title and description render as <div> (not <p>): they accept arbitrary
  * ReactNode content, and <p> cannot legally contain block-level children
  * (the HTML parser reparents them, desyncing SSR markup from the hydrated
@@ -33,13 +37,13 @@
  * - /apps/storybook/stories/Banner.stories.tsx (storybook stories)
  * - /packages/cli/assets/templates/blocks/components/Banner/ (showcase blocks)
  */
-import { useId, useState } from 'react';
+import { useId, useRef, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import { Button } from "../Button/index.js";
 import { Icon } from "../Icon/index.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, fontWeightVars, typeScaleVars, borderVars, durationVars, easeVars, shadowVars } from "../theme/tokens.stylex.js";
-import { mergeProps } from "../utils/index.js";
+import { composeEventHandlers, isRenderable, mergeProps } from "../utils/index.js";
 import { edgeCompSlot } from "../Layout/edgeCompensation.stylex.js";
 import { themeProps } from "../utils/themeProps.js";
 import { useTranslator } from "../i18n/index.js";
@@ -62,20 +66,21 @@ import { useTranslator } from "../i18n/index.js";
  */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // =============================================================================
-// Status → Icon mapping
+// Status lookups
 // =============================================================================
 
+// `BannerStatus` is `keyof BannerStatusMap`, and index.ts documents augmenting
+// that interface to add a status. Every lookup below is therefore partial: an
+// augmented status the library has never heard of falls through to the base
+// treatment (no status fill, no glyph, the polite role) instead of resolving to
+// `undefined` and dropping the ARIA role along with it.
+
 const defaultIconNames = {
   info: 'info',
   warning: 'warning',
   error: 'error',
   success: 'success'
 };
-
-// =============================================================================
-// Status → ARIA role mapping
-// =============================================================================
-
 const statusRole = {
   info: 'status',
   warning: 'alert',
@@ -83,10 +88,8 @@ const statusRole = {
   success: 'status'
 };
 
-// =============================================================================
-// Status → Icon color mapping
-// =============================================================================
-
+/** An unknown status is not urgent by definition, so it announces politely. */
+const FALLBACK_ROLE = 'status';
 const statusIconColor = {
   info: 'accent',
   warning: 'warning',
@@ -106,7 +109,7 @@ const styles = {
     $$css: true
   },
   rootElevatedCard: {
-    kaIpWk: "x1hviunn",
+    kaIpWk: "x1vf2byn",
     $$css: true
   },
   header: {
@@ -118,12 +121,12 @@ const styles = {
     $$css: true
   },
   headerCardStandalone: {
-    kaIpWk: "x1hviunn",
+    kaIpWk: "x1vf2byn",
     $$css: true
   },
   headerCardWithContent: {
-    krdFHd: "x81l70g",
-    kfmiAY: "x7hs6f1",
+    krdFHd: "xwxb7qi",
+    kfmiAY: "x13nour3",
     kVL7Gh: "xbiv7yw",
     kT0f0o: "x16uus16",
     $$css: true
@@ -171,6 +174,15 @@ const statusStyles = {
   }
 };
 
+/**
+ * Narrows an augmented `BannerStatus` to one the style map actually carries,
+ * so an unknown status renders with no status fill rather than crashing the
+ * lookup. StyleX style maps cannot be declared `Partial`, hence the guard.
+ */
+function hasStatusStyle(status) {
+  return Object.prototype.hasOwnProperty.call(statusStyles, status);
+}
+
 // Resting elevation for the banner. Applied to the root so the shadow wraps
 // the whole banner (header + optional content). 'none' is the default and
 // leaves the layout-only root untouched. For the `card` container the root is
@@ -260,51 +272,80 @@ export function Banner({
   className,
   style,
   ref,
+  onFocusCapture,
+  onPointerDownCapture,
   ...rest
 }) {
   const t = useTranslator();
   const [isDismissed, setIsDismissed] = useState(false);
   const [isExpanded, setIsExpanded] = useState(defaultIsExpanded);
+  // The element focus came from before it entered the banner. Dismissing
+  // unmounts the whole banner, dismiss button included, so without a handoff
+  // the browser drops focus to <body> and a keyboard user loses their place.
+  // ToastViewport makes the same handoff when a focused toast is dismissed.
+  const focusOriginRef = useRef(null);
   // Links the expand/collapse toggle to the content region it shows/hides so
   // assistive tech can move from the button to its controlled content
   // (disclosure pattern). The region is conditionally rendered, so aria-controls
   // below is set only while it's mounted to avoid a dangling reference.
   const contentId = useId();
   const defaultIconName = defaultIconNames[status];
-  const role = statusRole[status];
+  const role = statusRole[status] ?? FALLBACK_ROLE;
   const iconColor = statusIconColor[status];
-  const hasChildren = children != null;
+  const hasChildren = isRenderable(children);
   if (isDismissed) {
     return null;
   }
+
+  // `focusin` reports the element focus came *from* as relatedTarget; on
+  // pointerdown focus has not moved yet, so document.activeElement is it.
+  const rememberFocusOrigin = (candidate, root) => {
+    if (candidate instanceof HTMLElement && candidate !== document.body && !root.contains(candidate)) {
+      focusOriginRef.current = candidate;
+    }
+  };
+  const handleFocusCapture = event => {
+    rememberFocusOrigin(event.relatedTarget, event.currentTarget);
+  };
+  const handlePointerDownCapture = event => {
+    rememberFocusOrigin(document.activeElement, event.currentTarget);
+  };
   const handleDismiss = () => {
+    const origin = focusOriginRef.current;
     setIsDismissed(true);
     onDismiss?.();
+    // Move focus before React removes the subtree, so the browser never has a
+    // frame where the focused node is gone.
+    if (origin?.isConnected) {
+      origin.focus();
+    }
   };
   const handleToggleExpand = () => {
     setIsExpanded(prev => !prev);
   };
 
   // Show the end area if there are actions, dismiss, or a collapsible toggle
-  const showEndArea = endContent != null || isDismissable || hasChildren;
+  const showEndArea = isRenderable(endContent) || isDismissable || hasChildren;
   // Center items vertically when there's only a title (no description)
   // and the banner has action buttons
-  const hasActions = endContent != null || isDismissable;
-  const isSingleLine = description == null && hasActions;
+  const hasActions = isRenderable(endContent) || isDismissable;
+  const isSingleLine = !isRenderable(description) && hasActions;
   const showContent = hasChildren && isExpanded;
   const isCard = container === 'card';
   return /*#__PURE__*/_jsxs("div", {
     ref: ref,
     role: role,
+    onFocusCapture: composeEventHandlers(onFocusCapture, handleFocusCapture),
+    onPointerDownCapture: composeEventHandlers(onPointerDownCapture, handlePointerDownCapture),
     ...mergeProps(stylex.props(styles.root, elevationStyles[elevation], isCard && elevation !== 'none' && styles.rootElevatedCard, xstyle), className, style),
     ...rest,
     children: [/*#__PURE__*/_jsxs("div", {
       ...mergeProps(themeProps('banner', {
         container,
         status
-      }), stylex.props(styles.header, isSingleLine && styles.headerCentered, statusStyles[status], isCard && (showContent ? styles.headerCardWithContent : styles.headerCardStandalone))),
+      }), stylex.props(styles.header, isSingleLine && styles.headerCentered, hasStatusStyle(status) && statusStyles[status], isCard && (showContent ? styles.headerCardWithContent : styles.headerCardStandalone))),
       children: [/*#__PURE__*/_jsx("div", {
-        ...(icon != null ? mergeProps(themeProps('banner-icon', {
+        ...(isRenderable(icon) ? mergeProps(themeProps('banner-icon', {
           status
         }), {
           className: "x78zum5 x6s0dn4 x2lah0s"
@@ -312,7 +353,7 @@ export function Banner({
           className: "x78zum5 x6s0dn4 x2lah0s"
         }),
         "aria-hidden": "true",
-        children: icon != null ? icon :
+        children: isRenderable(icon) ? icon : defaultIconName != null ?
         /*#__PURE__*/
         // Applied to the status <Icon> itself rather than the wrapper, so
         // the element that paints the glyph is the element a theme
@@ -325,19 +366,19 @@ export function Banner({
           ...themeProps('banner-icon', {
             status
           })
-        })
+        }) : null
       }), /*#__PURE__*/_jsxs("div", {
         ...{
           className: "x78zum5 xdt5ytf xxhr3t x98rzlu xeuugli"
         },
         children: [/*#__PURE__*/_jsx("div", {
           ...{
-            className: "x1ghz6dp xjb2p0i xcr08ib x2mo6ok x1kq96og x1tgivj0"
+            className: "x1ghz6dp xjb2p0i xcr08ib x2mo6ok x1kq96og x1tgivj0 xj0a0fe"
           },
           children: title
-        }), description != null && /*#__PURE__*/_jsx("div", {
+        }), isRenderable(description) && /*#__PURE__*/_jsx("div", {
           ...{
-            className: "x1ghz6dp xjb2p0i x141an7d x1sodnla x1ltkj2j xv1l7n4"
+            className: "x1ghz6dp xjb2p0i x141an7d x1sodnla x1ltkj2j xv1l7n4 xj0a0fe"
           },
           children: description
         })]
@@ -382,7 +423,7 @@ export function Banner({
           className: "x1de1mus x8o8v82 x1pzlopt xgbv0en xw8tdv1 x92x3c3 x1t7ytsu x18b5jzi x1q0q8m5 x1j92z86 x1gejf6u xw8gpjh"
         },
         1: {
-          className: "x1de1mus x8o8v82 x1pzlopt xgbv0en xw8tdv1 x92x3c3 x1t7ytsu x18b5jzi x1q0q8m5 x1j92z86 x1gejf6u xw8gpjh x14k8p9y xiaxfje"
+          className: "x1de1mus x8o8v82 x1pzlopt xgbv0en xw8tdv1 x92x3c3 x1t7ytsu x18b5jzi x1q0q8m5 x1j92z86 x1gejf6u xw8gpjh x1k5g1gk x1eprgri"
         }
       }[!!isCard << 0]),
       children: children

package/dist/Banner/index.d.ts

@@ -7,35 +7,37 @@
  * SYNC: When modified, update this header and /packages/core/src/Banner/Banner.doc.mjs
  */
 /**
- * Extensible status map for Banner.
+ * Extensible container map for Banner.
  *
- * Theme packages can add custom statuses via TypeScript module augmentation:
+ * Theme packages can add custom container types via TypeScript module augmentation:
  * @example
  * ```
  * declare module '@astryxdesign/core/Banner' {
- *   interface BannerStatusMap {
- *     'neutral': true;
+ *   interface BannerContainerMap {
+ *     'floating': true;
  *   }
  * }
  * ```
  */
+export interface BannerContainerMap {
+    card: true;
+    section: true;
+}
 /**
- * Extensible container map for Banner.
+ * Extensible status map for Banner.
  *
- * Theme packages can add custom container types via TypeScript module augmentation:
+ * Theme packages can add custom statuses via TypeScript module augmentation.
+ * A status the library does not know falls through to the base treatment: no
+ * status fill, no default glyph, and `role="status"`.
  * @example
  * ```
  * declare module '@astryxdesign/core/Banner' {
- *   interface BannerContainerMap {
- *     'floating': true;
+ *   interface BannerStatusMap {
+ *     'neutral': true;
  *   }
  * }
  * ```
  */
-export interface BannerContainerMap {
-    card: true;
-    section: true;
-}
 export interface BannerStatusMap {
     info: true;
     warning: true;

package/dist/Banner/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Banner/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH;;;;;;;;;;;;GAYG;AACH;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,IAAI,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,IAAI,CAAC;IACd,KAAK,EAAE,IAAI,CAAC;IACZ,OAAO,EAAE,IAAI,CAAC;CACf;AAED,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAChC,YAAY,EAAC,WAAW,EAAE,YAAY,EAAE,eAAe,EAAC,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Banner/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,IAAI,CAAC;CACf;AAED;;;;;;;;;;;;;;GAcG;AACH,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,IAAI,CAAC;IACd,KAAK,EAAE,IAAI,CAAC;IACZ,OAAO,EAAE,IAAI,CAAC;CACf;AAED,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAChC,YAAY,EAAC,WAAW,EAAE,YAAY,EAAE,eAAe,EAAC,MAAM,UAAU,CAAC"}

package/dist/Banner/index.js

@@ -12,27 +12,29 @@
  */
 
 /**
- * Extensible status map for Banner.
+ * Extensible container map for Banner.
  *
- * Theme packages can add custom statuses via TypeScript module augmentation:
+ * Theme packages can add custom container types via TypeScript module augmentation:
  * @example
  * ```
  * declare module '@astryxdesign/core/Banner' {
- *   interface BannerStatusMap {
- *     'neutral': true;
+ *   interface BannerContainerMap {
+ *     'floating': true;
  *   }
  * }
  * ```
  */
 /**
- * Extensible container map for Banner.
+ * Extensible status map for Banner.
  *
- * Theme packages can add custom container types via TypeScript module augmentation:
+ * Theme packages can add custom statuses via TypeScript module augmentation.
+ * A status the library does not know falls through to the base treatment: no
+ * status fill, no default glyph, and `role="status"`.
  * @example
  * ```
  * declare module '@astryxdesign/core/Banner' {
- *   interface BannerContainerMap {
- *     'floating': true;
+ *   interface BannerStatusMap {
+ *     'neutral': true;
  *   }
  * }
  * ```

package/dist/astryx.css

@@ -378,6 +378,7 @@
   .x1pjcqnp:not(#\#):not(#\#){border-radius:inherit}
   .x1ws5lxm:not(#\#):not(#\#){border-radius:max(0px,calc(var(--_dropdown-menu-radius,var(--spacing-2)) - var(--_dropdown-menu-padding,var(--spacing-1))))}
   .xc910v0:not(#\#):not(#\#){border-radius:max(0px,calc(var(--_segmented-control-radius) - var(--_segmented-control-padding)))}
+  .x1vf2byn:not(#\#):not(#\#){border-radius:var(--_banner-radius,var(--radius-container))}
   .x1jxw6zd:not(#\#):not(#\#){border-radius:var(--_button-radius,var(--radius-element))}
   .xy0xnkn:not(#\#):not(#\#){border-radius:var(--_button-radius,var(--radius-full))}
   .x153u1i6:not(#\#):not(#\#){border-radius:var(--_card-radius)}
@@ -639,14 +640,14 @@
   .x18o3ruo:not(#\#):not(#\#):not(#\#){background-image:none}
   .x1mwwwfo:not(#\#):not(#\#):not(#\#){border-collapse:collapse}
   .x16uus16:not(#\#):not(#\#):not(#\#){border-end-end-radius:0}
+  .x1eprgri:not(#\#):not(#\#):not(#\#){border-end-end-radius:var(--_banner-radius,var(--radius-container))}
   .x6k0y1c:not(#\#):not(#\#):not(#\#){border-end-end-radius:var(--_chat-composer-radius)}
-  .xiaxfje:not(#\#):not(#\#):not(#\#){border-end-end-radius:var(--radius-container)}
   .x14i3lts:not(#\#):not(#\#):not(#\#){border-end-end-radius:var(--radius-element)}
   .x1dgc8on:not(#\#):not(#\#):not(#\#){border-end-end-radius:var(--radius-full)}
   .x1whkvtz:not(#\#):not(#\#):not(#\#){border-end-end-radius:var(--radius-inner)}
   .xbiv7yw:not(#\#):not(#\#):not(#\#){border-end-start-radius:0}
+  .x1k5g1gk:not(#\#):not(#\#):not(#\#){border-end-start-radius:var(--_banner-radius,var(--radius-container))}
   .xkvxy4d:not(#\#):not(#\#):not(#\#){border-end-start-radius:var(--_chat-composer-radius)}
-  .x14k8p9y:not(#\#):not(#\#):not(#\#){border-end-start-radius:var(--radius-container)}
   .xquck67:not(#\#):not(#\#):not(#\#){border-end-start-radius:var(--radius-element)}
   .x1wc3881:not(#\#):not(#\#):not(#\#){border-end-start-radius:var(--radius-full)}
   .xrfs2vl:not(#\#):not(#\#):not(#\#){border-end-start-radius:var(--radius-inner)}
@@ -664,16 +665,16 @@
   .xtpqe59:not(#\#):not(#\#):not(#\#){border-inline-start-width:var(--spacing-0-5)}
   .x1gukg7c:not(#\#):not(#\#):not(#\#){border-spacing:0}
   .x1ga7v0g:not(#\#):not(#\#):not(#\#){border-start-end-radius:0}
+  .x13nour3:not(#\#):not(#\#):not(#\#){border-start-end-radius:var(--_banner-radius,var(--radius-container))}
   .xzc3kxz:not(#\#):not(#\#):not(#\#){border-start-end-radius:var(--_chat-composer-radius)}
   .xg0tfu:not(#\#):not(#\#):not(#\#){border-start-end-radius:var(--radius-chat)}
-  .x7hs6f1:not(#\#):not(#\#):not(#\#){border-start-end-radius:var(--radius-container)}
   .xxbepff:not(#\#):not(#\#):not(#\#){border-start-end-radius:var(--radius-element)}
   .x8agd5o:not(#\#):not(#\#):not(#\#){border-start-end-radius:var(--radius-full)}
   .x126per9:not(#\#):not(#\#):not(#\#){border-start-end-radius:var(--radius-inner)}
   .x15mokao:not(#\#):not(#\#):not(#\#){border-start-start-radius:0}
+  .xwxb7qi:not(#\#):not(#\#):not(#\#){border-start-start-radius:var(--_banner-radius,var(--radius-container))}
   .xy7p8pm:not(#\#):not(#\#):not(#\#){border-start-start-radius:var(--_chat-composer-radius)}
   .x1n70msy:not(#\#):not(#\#):not(#\#){border-start-start-radius:var(--radius-chat)}
-  .x81l70g:not(#\#):not(#\#):not(#\#){border-start-start-radius:var(--radius-container)}
   .x19415el:not(#\#):not(#\#):not(#\#){border-start-start-radius:var(--radius-full)}
   .x3qb8m:not(#\#):not(#\#):not(#\#){border-start-start-radius:var(--radius-inner)}
   .x183tx6i:not(#\#):not(#\#):not(#\#){border-start-start-radius:var(--radius-page)}
@@ -972,6 +973,7 @@
   .x1t137rt:not(#\#):not(#\#):not(#\#){outline-style:none}
   .x1k57tk5:not(#\#):not(#\#):not(#\#){outline-width:0}
   .x9y5y3v:not(#\#):not(#\#):not(#\#){overflow-clip-margin:1px}
+  .xj0a0fe:not(#\#):not(#\#):not(#\#){overflow-wrap:anywhere}
   .x1mzt3pk:not(#\#):not(#\#):not(#\#){overflow-wrap:break-word}
   .x1h4wwuj:not(#\#):not(#\#):not(#\#){overflow-wrap:normal}
   .xyri2b:not(#\#):not(#\#):not(#\#){padding-inline-end:0}