@12-apps/ui 6.29.1 → 6.30.0

package/dist/navigation/AppHeader.js

@@ -1,4 +1,7 @@
 import "../chunk-5CUKSNWG.js";
+import {
+  AppHeaderDetails
+} from "../chunk-62NA6IF3.js";
 import {
   AppHeader,
   AppHeader_default
@@ -15,25 +18,22 @@ import {
   highlightOf,
   initialsOf
 } from "../chunk-IQU4HKND.js";
-import {
-  AppHeaderDetails
-} from "../chunk-P3NRT6GV.js";
-import "../chunk-PCYGUOWJ.js";
-import "../chunk-OLZTGVBT.js";
-import "../chunk-CRN4KKNI.js";
+import "../chunk-FLIMEQUA.js";
 import "../chunk-JBMBFYFA.js";
-import "../chunk-U437KFDI.js";
 import "../chunk-7MR2JCJW.js";
+import "../chunk-U437KFDI.js";
+import "../chunk-REMK55JI.js";
 import "../chunk-F52N6ACD.js";
-import "../chunk-D6HDJVQW.js";
-import "../chunk-GYXUCS37.js";
+import "../chunk-CRN4KKNI.js";
+import "../chunk-YANLN6HP.js";
 import "../chunk-5KEMPCW4.js";
 import "../chunk-VM3HRSAU.js";
-import "../chunk-GJUIZ5FN.js";
+import "../chunk-GYXUCS37.js";
+import "../chunk-73BEVJCS.js";
+import "../chunk-BKAB4KZK.js";
+import "../chunk-TAMIZE4Q.js";
 import "../chunk-TSEWUY4V.js";
 import "../chunk-5LQ7PKMW.js";
-import "../chunk-TAMIZE4Q.js";
-import "../chunk-73BEVJCS.js";
 import "../chunk-TYJR4GOF.js";
 import "../chunk-AKZWDZCZ.js";
 import "../chunk-HPK33ACY.js";

package/dist/navigation/NavigationMenu.js

@@ -1,12 +1,12 @@
 import "../chunk-I53WONUS.js";
 import {
   NavigationMenu
-} from "../chunk-HDNK7BAX.js";
-import "../chunk-BLT5ZBVL.js";
-import "../chunk-G5ZVD5IJ.js";
-import "../chunk-Q444G5X7.js";
+} from "../chunk-VNEEXUWA.js";
+import "../chunk-UEJQQVP2.js";
+import "../chunk-7AR2R7TV.js";
 import "../chunk-RXSGHPCR.js";
 import "../chunk-3L5OZCGA.js";
+import "../chunk-Q444G5X7.js";
 import "../chunk-FYLCSCMR.js";
 import "../chunk-PZ5AY32C.js";
 export {

package/dist/pt-BR.js

@@ -1,4 +1,8 @@
 import "./chunk-BWZKLKDT.js";
+import {
+  PT_BR_BREADCRUMB_COPY,
+  PT_BR_COMMAND_PALETTE_COPY
+} from "./chunk-62OGPVCL.js";
 import {
   PT_BR_ADDRESS_AUTOCOMPLETE_COPY,
   PT_BR_AUTOCOMPLETE_COPY,
@@ -11,8 +15,9 @@ import {
 } from "./chunk-YLSDFW5O.js";
 import {
   PT_BR_CHROME_COPY,
+  PT_BR_NOTIFICATION_UNBLOCK_COPY,
   PT_BR_TUTORIAL_COPY
-} from "./chunk-IFLZNCAI.js";
+} from "./chunk-3MEIGSDK.js";
 import {
   PT_BR_CAROUSEL_COPY,
   PT_BR_DATA_STATE_COPY,
@@ -35,10 +40,6 @@ import {
   PT_BR_SAVED_VIEWS_LABELS,
   PT_BR_SECTION_ONBOARDING_COPY
 } from "./chunk-WUE5EK42.js";
-import {
-  PT_BR_BREADCRUMB_COPY,
-  PT_BR_COMMAND_PALETTE_COPY
-} from "./chunk-62OGPVCL.js";
 import "./chunk-PZ5AY32C.js";
 export {
   PT_BR_ADDRESS_AUTOCOMPLETE_COPY,
@@ -56,6 +57,7 @@ export {
   PT_BR_INSTALL_PROMPT_COPY,
   PT_BR_LIGHTBOX_COPY,
   PT_BR_MAP_PREVIEW_COPY,
+  PT_BR_NOTIFICATION_UNBLOCK_COPY,
   PT_BR_PASSWORD_STRENGTH_COPY,
   PT_BR_PHONE_INPUT_COPY,
   PT_BR_RICH_EDITOR_TOOLBAR_COPY,

package/dist/social-login-button.js

@@ -4,7 +4,7 @@ import {
   GoogleIcon,
   SocialLoginButton,
   SocialLoginContainer
-} from "./chunk-T7WU7JGC.js";
+} from "./chunk-SUTNQG7E.js";
 import "./chunk-INGPH3YQ.js";
 import "./chunk-6GP2DOOO.js";
 import "./chunk-SLMA4UQS.js";
@@ -20,11 +20,11 @@ import "./chunk-FKUYRQSP.js";
 import "./chunk-BEBLRL5D.js";
 import "./chunk-6Q6T3FW5.js";
 import "./chunk-BA4RHQ3B.js";
-import "./chunk-GJUIZ5FN.js";
+import "./chunk-73BEVJCS.js";
+import "./chunk-BKAB4KZK.js";
+import "./chunk-TAMIZE4Q.js";
 import "./chunk-TSEWUY4V.js";
 import "./chunk-5LQ7PKMW.js";
-import "./chunk-TAMIZE4Q.js";
-import "./chunk-73BEVJCS.js";
 import "./chunk-YTYROOLY.js";
 import "./chunk-EPRA5QLB.js";
 import "./chunk-TYJR4GOF.js";

package/dist/types/components/feedback/NotificationStatusNotice/NotificationStatusNotice.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { NotificationStatusNoticeProps } from './NotificationStatusNotice.types';
+/**
+ * Tells a reader whether this browser will notify them, and gives them the one
+ * thing they can do about it: a tap that asks (`disabled`), the steps that
+ * undo a refusal (`blocked`), or nothing when nothing can change (`enabled`,
+ * `unavailable`).
+ *
+ * Every word is the host's. The component decides only the shape and how loud
+ * each status is — see `NOTICE_VARIANT`.
+ */
+export declare const NotificationStatusNotice: React.ForwardRefExoticComponent<NotificationStatusNoticeProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=NotificationStatusNotice.d.ts.map

package/dist/types/components/feedback/NotificationStatusNotice/NotificationStatusNotice.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationStatusNotice.d.ts","sourceRoot":"","sources":["../../../../../src/components/feedback/NotificationStatusNotice/NotificationStatusNotice.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,OAAO,KAAK,EAGV,6BAA6B,EAC9B,MAAM,kCAAkC,CAAC;AAkF1C;;;;;;;;GAQG;AACH,eAAO,MAAM,wBAAwB,sGAwBnC,CAAC"}

package/dist/types/components/feedback/NotificationStatusNotice/NotificationStatusNotice.helpers.d.ts

@@ -0,0 +1,28 @@
+import type { NotificationUnblockCopy } from '../../../copy';
+import type { AlertVariant } from '../../data-display/Alert/Alert.types';
+import type { NotificationBrowser, NotificationStatus } from './NotificationStatusNotice.types';
+/**
+ * How loud each status is.
+ *
+ * `disabled` and `blocked` are warnings because the reader can do something
+ * about them and will miss something if they do not. `unavailable` is only
+ * information: there is nothing to act on, and painting it amber would ask the
+ * reader to fix what they cannot.
+ */
+export declare const NOTICE_VARIANT: Record<NotificationStatus, AlertVariant>;
+/**
+ * Which browser, on which platform, the reader is using — enough to pick the
+ * steps that lift a notification block there. Pure: pass
+ * `navigator.userAgent` and `navigator.maxTouchPoints`.
+ */
+export declare const detectNotificationBrowser: (userAgent: string, maxTouchPoints?: number) => NotificationBrowser;
+/**
+ * The steps that lift a notification block in `browser`, from a
+ * `NotificationUnblockCopy` pack (`PT_BR_NOTIFICATION_UNBLOCK_COPY`, …).
+ *
+ * Every iOS browser shares one list — the switch is in the device's Settings,
+ * whichever browser installed the app — and a family or platform the pack does
+ * not name falls back to its general `other` steps.
+ */
+export declare const notificationUnblockSteps: (copy: NotificationUnblockCopy, browser: NotificationBrowser) => readonly string[];
+//# sourceMappingURL=NotificationStatusNotice.helpers.d.ts.map

package/dist/types/components/feedback/NotificationStatusNotice/NotificationStatusNotice.helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationStatusNotice.helpers.d.ts","sourceRoot":"","sources":["../../../../../src/components/feedback/NotificationStatusNotice/NotificationStatusNotice.helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AAEzE,OAAO,KAAK,EACV,mBAAmB,EAGnB,kBAAkB,EACnB,MAAM,kCAAkC,CAAC;AAE1C;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,kBAAkB,EAAE,YAAY,CAKnE,CAAC;AA2BF;;;;GAIG;AACH,eAAO,MAAM,yBAAyB,GACpC,WAAW,MAAM,EACjB,uBAAkB,KACjB,mBAGD,CAAC;AAEH;;;;;;;GAOG;AACH,eAAO,MAAM,wBAAwB,GACnC,MAAM,uBAAuB,EAC7B,SAAS,mBAAmB,KAC3B,SAAS,MAAM,EAKjB,CAAC"}

package/dist/types/components/feedback/NotificationStatusNotice/NotificationStatusNotice.metrics.d.ts

@@ -0,0 +1,7 @@
+/** Theme spacing units between the message and its action. */
+export declare const NOTICE_ACTION_GAP_UNITS = 1;
+/** Theme spacing units the numbered steps are indented by. */
+export declare const NOTICE_STEPS_INDENT_UNITS = 2.5;
+/** Theme spacing units between two steps. */
+export declare const NOTICE_STEP_GAP_UNITS = 0.5;
+//# sourceMappingURL=NotificationStatusNotice.metrics.d.ts.map

package/dist/types/components/feedback/NotificationStatusNotice/NotificationStatusNotice.metrics.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationStatusNotice.metrics.d.ts","sourceRoot":"","sources":["../../../../../src/components/feedback/NotificationStatusNotice/NotificationStatusNotice.metrics.ts"],"names":[],"mappings":"AAAA,8DAA8D;AAC9D,eAAO,MAAM,uBAAuB,IAAI,CAAC;AAEzC,8DAA8D;AAC9D,eAAO,MAAM,yBAAyB,MAAM,CAAC;AAE7C,6CAA6C;AAC7C,eAAO,MAAM,qBAAqB,MAAM,CAAC"}

package/dist/types/components/feedback/NotificationStatusNotice/NotificationStatusNotice.types.d.ts

@@ -0,0 +1,64 @@
+import type { SxProps, Theme } from '@mui/material/styles/index.js';
+/**
+ * Where a reader stands with this browser's notifications.
+ *
+ * - `enabled` — they will be notified here.
+ * - `disabled` — they are not, and this page CAN ask: one tap raises the
+ *   browser's own permission prompt.
+ * - `blocked` — they are not, and this page can NOT ask: the browser refused
+ *   once and only the reader can undo that, in the browser's own settings.
+ * - `unavailable` — they are not, and nothing will change it here: the browser
+ *   has no web push, or the host cannot send it.
+ */
+export type NotificationStatus = 'enabled' | 'disabled' | 'blocked' | 'unavailable';
+interface NotificationStatusNoticeCommon {
+    /** The one sentence that states the reader's situation. */
+    title: string;
+    /** What that situation means for them — e.g. what they will miss. */
+    description?: string;
+    /** Test id of the root; parts derive from it (`-enable`, `-steps`, …). */
+    dataTestId?: string;
+    className?: string;
+    sx?: SxProps<Theme>;
+}
+export interface EnabledNoticeProps extends NotificationStatusNoticeCommon {
+    status: 'enabled';
+}
+export interface DisabledNoticeProps extends NotificationStatusNoticeCommon {
+    status: 'disabled';
+    /** The action's label, e.g. "Turn on notifications". */
+    enableLabel: string;
+    /**
+     * Ask for the permission. Call the browser's `requestPermission` from HERE:
+     * a browser only shows its prompt inside a user gesture.
+     */
+    onEnable: () => void;
+    /** The request is in flight — the action shows a spinner and cannot be pressed twice. */
+    pending?: boolean;
+}
+export interface BlockedNoticeProps extends NotificationStatusNoticeCommon {
+    status: 'blocked';
+    /** The disclosure's label, e.g. "Turn them back on". */
+    stepsToggleLabel: string;
+    /**
+     * How to lift the block in THIS reader's browser, one step per entry, in
+     * order. The host picks them — `detectNotificationBrowser` says which
+     * browser it is looking at — because the words are the host's.
+     */
+    steps: readonly string[];
+    /** Start with the steps showing. Defaults to collapsed. */
+    defaultStepsOpen?: boolean;
+}
+export interface UnavailableNoticeProps extends NotificationStatusNoticeCommon {
+    status: 'unavailable';
+}
+export type NotificationStatusNoticeProps = EnabledNoticeProps | DisabledNoticeProps | BlockedNoticeProps | UnavailableNoticeProps;
+/** The browser families whose permission settings differ enough to need their own steps. */
+export type NotificationBrowserFamily = 'chrome' | 'edge' | 'firefox' | 'safari' | 'samsung' | 'opera' | 'other';
+export type NotificationPlatform = 'ios' | 'android' | 'desktop';
+export interface NotificationBrowser {
+    family: NotificationBrowserFamily;
+    platform: NotificationPlatform;
+}
+export {};
+//# sourceMappingURL=NotificationStatusNotice.types.d.ts.map

package/dist/types/components/feedback/NotificationStatusNotice/NotificationStatusNotice.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationStatusNotice.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/feedback/NotificationStatusNotice/NotificationStatusNotice.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAEpE;;;;;;;;;;GAUG;AACH,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,aAAa,CAAC;AAEpF,UAAU,8BAA8B;IACtC,2DAA2D;IAC3D,KAAK,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0EAA0E;IAC1E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;CACrB;AAED,MAAM,WAAW,kBAAmB,SAAQ,8BAA8B;IACxE,MAAM,EAAE,SAAS,CAAC;CACnB;AAED,MAAM,WAAW,mBAAoB,SAAQ,8BAA8B;IACzE,MAAM,EAAE,UAAU,CAAC;IACnB,wDAAwD;IACxD,WAAW,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,yFAAyF;IACzF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,kBAAmB,SAAQ,8BAA8B;IACxE,MAAM,EAAE,SAAS,CAAC;IAClB,wDAAwD;IACxD,gBAAgB,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IACzB,2DAA2D;IAC3D,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,WAAW,sBAAuB,SAAQ,8BAA8B;IAC5E,MAAM,EAAE,aAAa,CAAC;CACvB;AAED,MAAM,MAAM,6BAA6B,GACrC,kBAAkB,GAClB,mBAAmB,GACnB,kBAAkB,GAClB,sBAAsB,CAAC;AAE3B,4FAA4F;AAC5F,MAAM,MAAM,yBAAyB,GACjC,QAAQ,GACR,MAAM,GACN,SAAS,GACT,QAAQ,GACR,SAAS,GACT,OAAO,GACP,OAAO,CAAC;AAEZ,MAAM,MAAM,oBAAoB,GAAG,KAAK,GAAG,SAAS,GAAG,SAAS,CAAC;AAEjE,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,yBAAyB,CAAC;IAClC,QAAQ,EAAE,oBAAoB,CAAC;CAChC"}

package/dist/types/components/feedback/NotificationStatusNotice/index.d.ts

@@ -0,0 +1,4 @@
+export { NotificationStatusNotice } from './NotificationStatusNotice';
+export { detectNotificationBrowser, notificationUnblockSteps, } from './NotificationStatusNotice.helpers';
+export type { BlockedNoticeProps, DisabledNoticeProps, EnabledNoticeProps, NotificationBrowser, NotificationBrowserFamily, NotificationPlatform, NotificationStatus, NotificationStatusNoticeProps, UnavailableNoticeProps, } from './NotificationStatusNotice.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/feedback/NotificationStatusNotice/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/feedback/NotificationStatusNotice/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EACL,yBAAyB,EACzB,wBAAwB,GACzB,MAAM,oCAAoC,CAAC;AAC5C,YAAY,EACV,kBAAkB,EAClB,mBAAmB,EACnB,kBAAkB,EAClB,mBAAmB,EACnB,yBAAyB,EACzB,oBAAoB,EACpB,kBAAkB,EAClB,6BAA6B,EAC7B,sBAAsB,GACvB,MAAM,kCAAkC,CAAC"}

package/dist/types/components/feedback/index.d.ts

@@ -1,6 +1,7 @@
 export * from './ConfirmAction';
 export * from './Dialog';
 export * from './Modal';
+export * from './NotificationStatusNotice';
 export * from './Sonner';
 export * from './StackedModal';
 export * from './Toast';

package/dist/types/components/feedback/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,4BAA4B,CAAC;AAC3C,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC"}

package/dist/types/copy/feedback.d.ts

@@ -35,4 +35,47 @@ export interface ChromeCopy {
     /** The share affordance in the install prompt. */
     share: string;
 }
+/** One ordered list of steps a reader follows in their browser. */
+type Steps = readonly string[];
+/**
+ * How to lift a notification block, per browser — the steps
+ * `NotificationStatusNotice` shows in its `blocked` state.
+ *
+ * Keyed the way `detectNotificationBrowser` answers, and read through
+ * `notificationUnblockSteps`, which falls back to `other` for anything a pack
+ * does not name. Menu labels move between browser versions; these follow the
+ * current ones and say where to look rather than promising an exact word.
+ */
+export interface NotificationUnblockCopy {
+    /**
+     * Every browser on iOS. Web push there belongs to a Home Screen app, so the
+     * switch lives in the device's Settings rather than in any browser.
+     */
+    ios: Steps;
+    chrome: {
+        desktop: Steps;
+        android: Steps;
+    };
+    edge: {
+        desktop: Steps;
+        android: Steps;
+    };
+    firefox: {
+        desktop: Steps;
+        android: Steps;
+    };
+    opera: {
+        desktop: Steps;
+        android: Steps;
+    };
+    safari: {
+        desktop: Steps;
+    };
+    samsung: {
+        android: Steps;
+    };
+    /** Anything unrecognised — general enough to be true everywhere. */
+    other: Steps;
+}
+export {};
 //# sourceMappingURL=feedback.d.ts.map

package/dist/types/copy/feedback.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feedback.d.ts","sourceRoot":"","sources":["../../../src/copy/feedback.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH;;;;;;;GAOG;AACH,6EAA6E;AAC7E,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,8EAA8E;AAC9E,MAAM,WAAW,UAAU;IACzB,oEAAoE;IACpE,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,wEAAwE;IACxE,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;CACf"}
+{"version":3,"file":"feedback.d.ts","sourceRoot":"","sources":["../../../src/copy/feedback.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH;;;;;;;GAOG;AACH,6EAA6E;AAC7E,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,8EAA8E;AAC9E,MAAM,WAAW,UAAU;IACzB,oEAAoE;IACpE,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,wEAAwE;IACxE,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,mEAAmE;AACnE,KAAK,KAAK,GAAG,SAAS,MAAM,EAAE,CAAC;AAE/B;;;;;;;;GAQG;AACH,MAAM,WAAW,uBAAuB;IACtC;;;OAGG;IACH,GAAG,EAAE,KAAK,CAAC;IACX,MAAM,EAAE;QAAE,OAAO,EAAE,KAAK,CAAC;QAAC,OAAO,EAAE,KAAK,CAAA;KAAE,CAAC;IAC3C,IAAI,EAAE;QAAE,OAAO,EAAE,KAAK,CAAC;QAAC,OAAO,EAAE,KAAK,CAAA;KAAE,CAAC;IACzC,OAAO,EAAE;QAAE,OAAO,EAAE,KAAK,CAAC;QAAC,OAAO,EAAE,KAAK,CAAA;KAAE,CAAC;IAC5C,KAAK,EAAE;QAAE,OAAO,EAAE,KAAK,CAAC;QAAC,OAAO,EAAE,KAAK,CAAA;KAAE,CAAC;IAC1C,MAAM,EAAE;QAAE,OAAO,EAAE,KAAK,CAAA;KAAE,CAAC;IAC3B,OAAO,EAAE;QAAE,OAAO,EAAE,KAAK,CAAA;KAAE,CAAC;IAC5B,oEAAoE;IACpE,KAAK,EAAE,KAAK,CAAC;CACd"}

package/dist/types/en-US.feedback.d.ts

@@ -2,7 +2,8 @@
  * The en-US pack for the feedback family. Split the same way
  * `pt-BR.feedback.ts` is — see `en-US.ts` for why.
  */
-import type { ChromeCopy, TutorialCopy } from './copy';
+import type { ChromeCopy, NotificationUnblockCopy, TutorialCopy } from './copy';
 export declare const EN_US_TUTORIAL_COPY: TutorialCopy;
 export declare const EN_US_CHROME_COPY: ChromeCopy;
+export declare const EN_US_NOTIFICATION_UNBLOCK_COPY: NotificationUnblockCopy;
 //# sourceMappingURL=en-US.feedback.d.ts.map

package/dist/types/en-US.feedback.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"en-US.feedback.d.ts","sourceRoot":"","sources":["../../src/en-US.feedback.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EACV,UAAU,EACV,YAAY,EACb,MAAM,QAAQ,CAAC;AAEhB,eAAO,MAAM,mBAAmB,EAAE,YAKjC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,UAQ/B,CAAC"}
+{"version":3,"file":"en-US.feedback.d.ts","sourceRoot":"","sources":["../../src/en-US.feedback.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EACV,UAAU,EACV,uBAAuB,EACvB,YAAY,EACb,MAAM,QAAQ,CAAC;AAEhB,eAAO,MAAM,mBAAmB,EAAE,YAKjC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,UAQ/B,CAAC;AAgBF,eAAO,MAAM,+BAA+B,EAAE,uBAoD7C,CAAC"}

package/dist/types/pt-BR.feedback.d.ts

@@ -2,7 +2,8 @@
  * The pt-BR pack for the feedback family. Split out of `pt-BR.ts`, which is a
  * barrel over this folder — see that file for why.
  */
-import type { ChromeCopy, TutorialCopy } from './copy';
+import type { ChromeCopy, NotificationUnblockCopy, TutorialCopy } from './copy';
 export declare const PT_BR_TUTORIAL_COPY: TutorialCopy;
 export declare const PT_BR_CHROME_COPY: ChromeCopy;
+export declare const PT_BR_NOTIFICATION_UNBLOCK_COPY: NotificationUnblockCopy;
 //# sourceMappingURL=pt-BR.feedback.d.ts.map

package/dist/types/pt-BR.feedback.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pt-BR.feedback.d.ts","sourceRoot":"","sources":["../../src/pt-BR.feedback.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EACV,UAAU,EACV,YAAY,EACb,MAAM,QAAQ,CAAC;AAEhB,eAAO,MAAM,mBAAmB,EAAE,YAKjC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,UAQ/B,CAAC"}
+{"version":3,"file":"pt-BR.feedback.d.ts","sourceRoot":"","sources":["../../src/pt-BR.feedback.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EACV,UAAU,EACV,uBAAuB,EACvB,YAAY,EACb,MAAM,QAAQ,CAAC;AAEhB,eAAO,MAAM,mBAAmB,EAAE,YAKjC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,UAQ/B,CAAC;AAgBF,eAAO,MAAM,+BAA+B,EAAE,uBAoD7C,CAAC"}

package/dist/user-avatar.js

@@ -1,13 +1,13 @@
 import {
   UserAvatar,
   UserMenu
-} from "./chunk-ALAJBLBE.js";
+} from "./chunk-554SVTCN.js";
 import "./chunk-UDQSIRAP.js";
-import "./chunk-THOPGHTY.js";
-import "./chunk-3ZVUNSFF.js";
-import "./chunk-HS2OJI6L.js";
-import "./chunk-FAITHWIO.js";
+import "./chunk-HGJHZ5PE.js";
+import "./chunk-35UG2QDB.js";
 import "./chunk-XRMZMBE3.js";
+import "./chunk-FAITHWIO.js";
+import "./chunk-3ZVUNSFF.js";
 import "./chunk-VUHLNYAE.js";
 import "./chunk-2GSIEDGN.js";
 import "./chunk-AVI3XHRQ.js";
@@ -15,11 +15,11 @@ import "./chunk-FKUYRQSP.js";
 import "./chunk-BEBLRL5D.js";
 import "./chunk-6Q6T3FW5.js";
 import "./chunk-BA4RHQ3B.js";
-import "./chunk-GJUIZ5FN.js";
+import "./chunk-73BEVJCS.js";
+import "./chunk-BKAB4KZK.js";
+import "./chunk-TAMIZE4Q.js";
 import "./chunk-TSEWUY4V.js";
 import "./chunk-5LQ7PKMW.js";
-import "./chunk-TAMIZE4Q.js";
-import "./chunk-73BEVJCS.js";
 import "./chunk-YTYROOLY.js";
 import "./chunk-EPRA5QLB.js";
 import "./chunk-TYJR4GOF.js";

package/dist/utility/InstallPrompt.js

@@ -1,12 +1,10 @@
 import "../chunk-3QQVEYOR.js";
 import {
   InstallPrompt
-} from "../chunk-JE6RZ5L6.js";
+} from "../chunk-IABE56TG.js";
 import {
   usePwaInstall
-} from "../chunk-5GMHJ7Y5.js";
-import "../chunk-GY62N32G.js";
-import "../chunk-WXYLH3QZ.js";
+} from "../chunk-S2GDYA6R.js";
 import {
   PWA_INSTALL_AVAILABLE_EVENT,
   PWA_INSTALL_STASH_KEY,
@@ -14,6 +12,8 @@ import {
   readPwaInstallStash,
   resetPwaInstallStash
 } from "../chunk-UUL44SUX.js";
+import "../chunk-GY62N32G.js";
+import "../chunk-WXYLH3QZ.js";
 import "../chunk-PZ5AY32C.js";
 export {
   InstallPrompt,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "6.29.1",
+  "version": "6.30.0",
   "license": "MIT",
   "packageManager": "pnpm@10.34.5",
   "type": "module",
@@ -312,6 +312,10 @@
       "types": "./dist/types/components/feedback/Modal/index.d.ts",
       "default": "./dist/feedback/Modal.js"
     },
+    "./feedback/NotificationStatusNotice": {
+      "types": "./dist/types/components/feedback/NotificationStatusNotice/index.d.ts",
+      "default": "./dist/feedback/NotificationStatusNotice.js"
+    },
     "./feedback/Sonner": {
       "types": "./dist/types/components/feedback/Sonner/index.d.ts",
       "default": "./dist/feedback/Sonner.js"

package/src/components/feedback/NotificationStatusNotice/NotificationStatusNotice.helpers.ts

@@ -0,0 +1,80 @@
+import type { NotificationUnblockCopy } from '../../../copy';
+import type { AlertVariant } from '../../data-display/Alert/Alert.types';
+
+import type {
+  NotificationBrowser,
+  NotificationBrowserFamily,
+  NotificationPlatform,
+  NotificationStatus,
+} from './NotificationStatusNotice.types';
+
+/**
+ * How loud each status is.
+ *
+ * `disabled` and `blocked` are warnings because the reader can do something
+ * about them and will miss something if they do not. `unavailable` is only
+ * information: there is nothing to act on, and painting it amber would ask the
+ * reader to fix what they cannot.
+ */
+export const NOTICE_VARIANT: Record<NotificationStatus, AlertVariant> = {
+  enabled: 'success',
+  disabled: 'warning',
+  blocked: 'warning',
+  unavailable: 'info',
+};
+
+const platformOf = (userAgent: string, maxTouchPoints: number): NotificationPlatform => {
+  if (/iphone|ipad|ipod/i.test(userAgent)) return 'ios';
+  // iPadOS asks for the desktop site and reports itself as a Mac; the touch
+  // points are what give it away.
+  if (/macintosh/i.test(userAgent) && maxTouchPoints > 1) return 'ios';
+  if (/android/i.test(userAgent)) return 'android';
+  return 'desktop';
+};
+
+/**
+ * Ordered most-specific first: every Chromium browser also says `Chrome`, and
+ * every browser on iOS also says `Safari`.
+ */
+const FAMILY_PATTERNS: ReadonlyArray<readonly [NotificationBrowserFamily, RegExp]> = [
+  ['samsung', /samsungbrowser/i],
+  ['edge', /edg(e|a|ios)?\//i],
+  ['opera', /opr\/|opera|opt\//i],
+  ['firefox', /firefox\/|fxios\//i],
+  ['chrome', /chrome\/|crios\//i],
+  ['safari', /safari\//i],
+];
+
+const familyOf = (userAgent: string): NotificationBrowserFamily =>
+  FAMILY_PATTERNS.find(([, pattern]) => pattern.test(userAgent))?.[0] ?? 'other';
+
+/**
+ * Which browser, on which platform, the reader is using — enough to pick the
+ * steps that lift a notification block there. Pure: pass
+ * `navigator.userAgent` and `navigator.maxTouchPoints`.
+ */
+export const detectNotificationBrowser = (
+  userAgent: string,
+  maxTouchPoints = 0,
+): NotificationBrowser => ({
+  family: familyOf(userAgent),
+  platform: platformOf(userAgent, maxTouchPoints),
+});
+
+/**
+ * The steps that lift a notification block in `browser`, from a
+ * `NotificationUnblockCopy` pack (`PT_BR_NOTIFICATION_UNBLOCK_COPY`, …).
+ *
+ * Every iOS browser shares one list — the switch is in the device's Settings,
+ * whichever browser installed the app — and a family or platform the pack does
+ * not name falls back to its general `other` steps.
+ */
+export const notificationUnblockSteps = (
+  copy: NotificationUnblockCopy,
+  browser: NotificationBrowser,
+): readonly string[] => {
+  if (browser.platform === 'ios') return copy.ios;
+  if (browser.family === 'other') return copy.other;
+  const byPlatform: Partial<Record<NotificationPlatform, readonly string[]>> = copy[browser.family];
+  return byPlatform[browser.platform] ?? copy.other;
+};

package/src/components/feedback/NotificationStatusNotice/NotificationStatusNotice.md

@@ -0,0 +1,106 @@
+# NotificationStatusNotice
+
+Tells a reader whether **this browser** will notify them, and offers the one
+thing they can do about it.
+
+| `status` | what it means | what it offers |
+|---|---|---|
+| `enabled` | they will be notified here | nothing |
+| `disabled` | they will not, and this page can ask | an action that calls `onEnable` |
+| `blocked` | they will not, and the browser refused once | a "turn back on" disclosure over the steps for **their** browser |
+| `unavailable` | they will not, and nothing here can change it | nothing |
+
+Use it wherever a promise depends on web push — "we will call you when your
+table is ready" — so a reader is never left believing a notification is coming
+that cannot arrive.
+
+## Import
+
+```ts
+import {
+  NotificationStatusNotice,
+  detectNotificationBrowser,
+  notificationUnblockSteps,
+} from '@12-apps/ui/feedback/NotificationStatusNotice';
+import { PT_BR_NOTIFICATION_UNBLOCK_COPY } from '@12-apps/ui/pt-BR';
+```
+
+## Usage
+
+The component owns no words. Map your own permission state onto `status`, and
+pass the sentences:
+
+```tsx
+const browser = detectNotificationBrowser(navigator.userAgent, navigator.maxTouchPoints);
+
+switch (pushState) {
+  case 'offer':
+    return (
+      <NotificationStatusNotice
+        status="disabled"
+        title="Suas notificações estão desligadas."
+        description="Sem elas, a gente não consegue te avisar no celular."
+        enableLabel="Ligar notificações"
+        onEnable={requestPermission} // raise the browser prompt HERE — it needs a gesture
+        pending={asking}
+      />
+    );
+  case 'blocked':
+    return (
+      <NotificationStatusNotice
+        status="blocked"
+        title="As notificações estão bloqueadas neste navegador."
+        stepsToggleLabel="Habilitar novamente"
+        steps={notificationUnblockSteps(PT_BR_NOTIFICATION_UNBLOCK_COPY, browser)}
+      />
+    );
+  // …
+}
+```
+
+## Props
+
+Common to every status:
+
+| prop | type | |
+|---|---|---|
+| `status` | `'enabled' \| 'disabled' \| 'blocked' \| 'unavailable'` | required; picks the shape below |
+| `title` | `string` | required; the reader's situation in one sentence |
+| `description` | `string` | what that means for them |
+| `dataTestId` | `string` | root test id (default `notification-status-notice`); parts append `-enable`, `-steps-toggle`, `-steps` |
+| `className`, `sx` | | forwarded to the root `Alert` |
+
+`disabled` adds `enableLabel`, `onEnable` and `pending` (spinner, and the action
+cannot be pressed twice). `blocked` adds `stepsToggleLabel`, `steps` (ordered)
+and `defaultStepsOpen`.
+
+## The unblock steps
+
+A web page cannot re-ask after a refusal — `Notification.requestPermission()`
+resolves `denied` at once — so the only way back is the browser's own settings,
+and those differ per browser. `NotificationUnblockCopy` holds one ordered list
+per family and platform, shipped in pt-BR and en-US:
+
+- `detectNotificationBrowser(userAgent, maxTouchPoints)` answers
+  `{ family, platform }` — Chrome, Edge, Firefox, Safari, Samsung Internet,
+  Opera, or `other`; on `ios`, `android` or `desktop`. Most specific first:
+  every Chromium browser also says `Chrome`, every iOS browser also says
+  `Safari`, and an iPad asking for the desktop site says `Macintosh`.
+- `notificationUnblockSteps(copy, browser)` picks the list. Every iOS browser
+  shares one list (web push there belongs to a Home Screen app, switched in the
+  device's Settings); a family/platform the pack does not name falls back to
+  `other`.
+
+Menu labels move between browser versions. The packs follow the current ones
+and say where to look; a host that needs different words passes its own
+`NotificationUnblockCopy`.
+
+## Accessibility
+
+- The root is a **polite** live region (`role="status"`): a change of status is
+  announced without interrupting what the screen reader was saying.
+- The steps sit behind a real `button` with `aria-expanded` and `aria-controls`;
+  the list is an `<ol>`, so the order is announced. Enter and Space toggle it.
+- `disabled` and `blocked` are `warning`s — the reader can act, and will miss
+  something if they do not. `unavailable` is only `info`: painting amber what
+  cannot be fixed asks the reader to fix it.

package/src/components/feedback/NotificationStatusNotice/NotificationStatusNotice.metrics.ts

@@ -0,0 +1,8 @@
+/** Theme spacing units between the message and its action. */
+export const NOTICE_ACTION_GAP_UNITS = 1;
+
+/** Theme spacing units the numbered steps are indented by. */
+export const NOTICE_STEPS_INDENT_UNITS = 2.5;
+
+/** Theme spacing units between two steps. */
+export const NOTICE_STEP_GAP_UNITS = 0.5;