@mx-cartographer/experiences 9.4.58 → 9.4.60

package/dist/insights-v2/actionBlocks/ContactSupportActionBlock.es.js

@@ -0,0 +1,22 @@
+import { useGlobalCopyStore as n, useInsightsV2Store as s } from "../../common/context/hooks.es.js";
+import { useBeatActions as i } from "../beatActions.es.js";
+import { useEffect as m } from "react";
+import { observer as a } from "mobx-react-lite";
+import u from "@mui/material/Stack";
+import { Text as f } from "@mxenabled/mxui";
+import { jsx as p } from "react/jsx-runtime";
+var A = a(function(r) {
+  const { onContactSupport: o } = i(), { closeActionDrawer: e } = s(), { common: c } = n();
+  return m(() => {
+    o && (e(), o());
+  }, [e, o]), o ? null : /* @__PURE__ */ p(u, {
+    sx: { p: 24 },
+    children: /* @__PURE__ */ p(f, { children: c?.error_message ?? "" })
+  });
+}), d = (t, r, o) => t === "contact_support_block" && (!r.enable_support_requests || !o);
+export {
+  A as ContactSupportActionBlock,
+  d as isContactSupportCtaDisabled
+};
+
+//# sourceMappingURL=ContactSupportActionBlock.es.js.map

package/dist/insights-v2/actionBlocks/ContactSupportActionBlock.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContactSupportActionBlock.es.js","names":[],"sources":["../../../src/insights-v2/actionBlocks/ContactSupportActionBlock.tsx"],"sourcesContent":["import { useEffect } from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Stack from '@mui/material/Stack'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { useGlobalCopyStore, useInsightsV2Store } from '../../common'\nimport { useBeatActions } from '../beatActions'\nimport type { ActionBlockProps } from '../mappings/blocks'\n\n/**\n * `contact_support_block` (`insights_v2.2.md` §7.3) is the help module's contact-support flow,\n * but insights-v2 must **not** import it: hosts that don't ship the Help widget (pulse's webpack\n * config `IgnorePlugin`s every `help` resource inside `@mx-cartographer/experiences/dist`) would\n * get a `webpackMissingModule` stub and crash at import time. So the flow is injected instead:\n *\n * - Feed / mini cards: the host passes `beatActions.onContactSupport` (pulse already threads\n *   `beatActions` into `BaseLayout`). `BaseLayout` calls it directly instead of opening a drawer.\n * - Transaction details drawer: the host passes `onContactSupport` to `TransactionDetails`.\n * - The experiences Help widget is itself a host and wires `RequestSupport` through the same hook.\n *\n * The CTA renders disabled (label shown, `aria-disabled`, nothing opens or posts) whenever the\n * client's `enable_support_requests` is off **or** the host supplied no handler — see\n * `isContactSupportCtaDisabled`.\n *\n * This registry entry is only a safety net for a drawer opened by a path that bypassed that gate\n * (e.g. a stale `actionDrawer` state): it hands off to the host handler if one exists, otherwise\n * closes the drawer and shows the generic error.\n */\nexport const ContactSupportActionBlock = observer(function ContactSupportActionBlock(\n  _props: ActionBlockProps,\n) {\n  const { onContactSupport } = useBeatActions()\n  const { closeActionDrawer } = useInsightsV2Store()\n  const { common } = useGlobalCopyStore()\n\n  useEffect(() => {\n    if (onContactSupport) {\n      closeActionDrawer()\n      onContactSupport()\n    }\n  }, [closeActionDrawer, onContactSupport])\n\n  if (onContactSupport) return null\n\n  return (\n    <Stack sx={{ p: 24 }}>\n      <Text>{common?.error_message ?? ''}</Text>\n    </Stack>\n  )\n})\n\n/**\n * Whether a host must render a CTA disabled. Only `contact_support_block` is gated: by the client's\n * `enable_support_requests` config (default false) and by whether the host actually wired a handler.\n * Every other block is always enabled. No fallback to a host post message when it is off.\n */\nexport const isContactSupportCtaDisabled = (\n  block: string | null | undefined,\n  config: { enable_support_requests?: boolean },\n  onContactSupport?: (() => void) | null,\n): boolean =>\n  block === 'contact_support_block' && (!config.enable_support_requests || !onContactSupport)\n"],"mappings":";;;;;;;AA8BA,IAAa,IAA4B,EAAS,SAChD,GACA;AACA,QAAM,EAAE,kBAAA,EAAA,IAAqB,EAAe,GACtC,EAAE,mBAAA,EAAA,IAAsB,EAAmB,GAC3C,EAAE,QAAA,EAAA,IAAW,EAAmB;AAStC,SAPA,EAAA,MAAgB;AACd,IAAI,MACF,EAAkB,GAClB,EAAiB;AAAA,EAErB,GAAG,CAAC,GAAmB,CAAgB,CAAC,GAEpC,IAAyB,OAG3B,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI,EAAE,GAAG,GAAG;AAAA,IACjB,UAAA,gBAAA,EAAC,GAAD,EAAA,UAAO,GAAQ,iBAAiB,GAAS,CAAA;AAAA,EACpC,CAAA;AAEX,CAAC,GAOY,IAAA,CACX,GACA,GACA,MAEA,MAAU,4BAA4B,CAAC,EAAO,2BAA2B,CAAC"}

package/dist/insights-v2/actionBlocks/TransactionDetailsBlock/useTransactionDetailsBlock.d.ts

@@ -11,21 +11,22 @@ interface TransactionDetailsBlockState {
 /**
  * Resolves which transaction this drawer is about, and which inline actions it offers.
  *
- * Resolution order is deliberate:
- *  1. `instance_slot_data.transaction_guid` — the beat explicitly naming its subject.
- *  2. `beat.primary_transaction_guid` — the standard beat-level pointer.
- *  3. `beat.transaction_guids[0]` — last resort for beats that only carry the list.
+ * The subject comes from one of two places:
+ *  1. `actionContext.transaction_guid` — set by a parent drawer (e.g. a row tapped in
+ *     `TransactionHistoryBlock`) when this drawer is opened nested.
+ *  2. `insights_payload.primary_transaction_guid` — the ditto contract for every beat whose
+ *     `primary_cta_block` is `transaction_details_block`.
  *
  * The guid is then looked up in `transactionStore.detailedTransactions` rather than used directly,
  * because `TransactionDetails` needs the *detailed* shape (account + category + taggings joined in)
  * and edits must write through to the same store object the rest of the app renders. `buildDetailed
  * Transactions` inside the store is this repo's equivalent of pulse's `buildTransactionDetails`.
+ * A guid the store does not have resolves to `undefined` (the block's error state) rather than to
+ * any beat-level snapshot, so inline edits can never be made against a stale copy.
  *
- * `beat.primary_transaction` is the fallback of last resort: it is a payload snapshot, not a store
- * object, so inline edits against it would not propagate. Preferring it over a store hit would make
- * editing silently no-op, which is why it is only used when the store genuinely has nothing — and
- * only when it is a snapshot of the *same* transaction the guid resolved to (or when no guid
- * resolved at all). A snapshot of some other transaction is not an answer to this question.
+ * Actions are not beat-configurable on the v2 contract: `instance_slot_data` is not part of it (the
+ * LargeTransactionV2 payload omits the key entirely), so top actions are always the defaults and
+ * bottom actions are derived from the triggering CTA's variant.
  */
 export declare const useTransactionDetailsBlock: (beat: Beat) => TransactionDetailsBlockState;
 export {};

package/dist/insights-v2/actionBlocks/TransactionDetailsBlock/useTransactionDetailsBlock.es.js

@@ -1,13 +1,13 @@
-import { useActionContext as _, useInsightsV2Store as g, useTransactionStore as m } from "../../../common/context/hooks.es.js";
+import { useActionContext as d, useInsightsV2Store as m, useTransactionStore as p } from "../../../common/context/hooks.es.js";
 import { getBottomActionsByVariant as u } from "./util.es.js";
-import { resolveTopActions as l } from "./transactionDetailsActions.es.js";
-var A = (t) => {
-  const { detailedTransactions: a, isTransactionDataLoaded: i } = m(), { actionDrawer: r } = g(), { transaction_guid: c } = _() ?? {}, s = t.insights_payload?.instance_slot_data ?? {}, o = c ?? s.transaction_guid ?? t.primary_transaction_guid ?? t.transaction_guids?.[0], d = o ? a.find((p) => p.guid === o) : void 0, n = t.primary_transaction, e = !o || n?.guid === o;
+import { resolveTopActions as g } from "./transactionDetailsActions.es.js";
+var A = (a) => {
+  const { detailedTransactions: n, isTransactionDataLoaded: i } = p(), { actionDrawer: s } = m(), { transaction_guid: r } = d() ?? {}, t = a.insights_payload, o = r ?? t?.primary_transaction_guid, c = o ? n.find((e) => e.guid === o) : void 0;
   return {
-    bottomActions: u(r, t.insights_payload?.primary_cta, t.insights_payload?.secondary_cta),
+    bottomActions: u(s, t?.primary_cta, t?.secondary_cta),
     isLoading: !i,
-    topActions: l(s.top_actions),
-    transaction: d ?? (e ? n : void 0)
+    topActions: g(),
+    transaction: c
   };
 };
 export {

package/dist/insights-v2/actionBlocks/TransactionDetailsBlock/useTransactionDetailsBlock.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTransactionDetailsBlock.es.js","names":[],"sources":["../../../../src/insights-v2/actionBlocks/TransactionDetailsBlock/useTransactionDetailsBlock.ts"],"sourcesContent":["import { useActionContext, useInsightsV2Store, useTransactionStore } from '../../../common'\nimport type { Beat, Transaction, DrilldownPayload } from '../../../core'\nimport type { TransactionDetailsBlockData } from '../../../core/types/InsightsInstanceSlotData'\nimport type { BottomActions, TopActions } from '../../../transactions/constants/Actions'\nimport { getBottomActionsByVariant } from './util'\nimport { resolveTopActions } from './transactionDetailsActions'\n\ninterface TransactionDetailsBlockState {\n  bottomActions: BottomActions[]\n  /** True while the store is still loading; the block shows a loader instead of an empty state. */\n  isLoading: boolean\n  topActions: TopActions[]\n  /** `undefined` once loading finishes means the transaction could not be resolved. */\n  transaction?: Transaction\n}\n\n/**\n * Resolves which transaction this drawer is about, and which inline actions it offers.\n *\n * Resolution order is deliberate:\n *  1. `instance_slot_data.transaction_guid` — the beat explicitly naming its subject.\n *  2. `beat.primary_transaction_guid` — the standard beat-level pointer.\n *  3. `beat.transaction_guids[0]` — last resort for beats that only carry the list.\n *\n * The guid is then looked up in `transactionStore.detailedTransactions` rather than used directly,\n * because `TransactionDetails` needs the *detailed* shape (account + category + taggings joined in)\n * and edits must write through to the same store object the rest of the app renders. `buildDetailed\n * Transactions` inside the store is this repo's equivalent of pulse's `buildTransactionDetails`.\n *\n * `beat.primary_transaction` is the fallback of last resort: it is a payload snapshot, not a store\n * object, so inline edits against it would not propagate. Preferring it over a store hit would make\n * editing silently no-op, which is why it is only used when the store genuinely has nothing — and\n * only when it is a snapshot of the *same* transaction the guid resolved to (or when no guid\n * resolved at all). A snapshot of some other transaction is not an answer to this question.\n */\nexport const useTransactionDetailsBlock = (beat: Beat): TransactionDetailsBlockState => {\n  const { detailedTransactions, isTransactionDataLoaded } = useTransactionStore()\n\n  const {actionDrawer} = useInsightsV2Store()\n\n  const { transaction_guid } = useActionContext<DrilldownPayload>() ?? {}\n  const slotData = (beat.insights_payload?.instance_slot_data ?? {}) as TransactionDetailsBlockData\n\n  const guid = transaction_guid ??\n    slotData.transaction_guid ?? beat.primary_transaction_guid ?? beat.transaction_guids?.[0]\n\n  const fromStore = guid\n    ? detailedTransactions.find((transaction) => transaction.guid === guid)\n    : undefined\n\n  // The snapshot is only a valid answer for the guid we actually resolved. When a beat names its\n  // subject via instance_slot_data (or transaction_guids[0]) and that guid misses in the store,\n  // falling back unconditionally would render a *different* transaction's details — and inline\n  // edits would then be made against the wrong subject. Match on guid, or accept the snapshot only\n  // when no guid resolved at all.\n  const snapshot = beat.primary_transaction\n  const snapshotMatches = !guid || snapshot?.guid === guid\n\n  const bottomActions = getBottomActionsByVariant(actionDrawer, beat.insights_payload?.primary_cta, beat.insights_payload?.secondary_cta)\n  return {\n    bottomActions,\n    isLoading: !isTransactionDataLoaded,\n    topActions: resolveTopActions(slotData.top_actions),\n    transaction: fromStore ?? (snapshotMatches ? snapshot : undefined),\n  }\n}\n"],"mappings":";;;AAmCA,IAAa,IAAA,CAA8B,MAA6C;AACtF,QAAM,EAAE,sBAAA,GAAsB,yBAAA,EAAA,IAA4B,EAAoB,GAExE,EAAC,cAAA,EAAA,IAAgB,EAAmB,GAEpC,EAAE,kBAAA,EAAA,IAAqB,EAAmC,KAAK,CAAC,GAChE,IAAY,EAAK,kBAAkB,sBAAsB,CAAC,GAE1D,IAAO,KACX,EAAS,oBAAoB,EAAK,4BAA4B,EAAK,oBAAoB,CAAA,GAEnF,IAAY,IACd,EAAqB,KAAA,CAAM,MAAgB,EAAY,SAAS,CAAI,IACpE,QAOE,IAAW,EAAK,qBAChB,IAAkB,CAAC,KAAQ,GAAU,SAAS;AAGpD,SAAO;AAAA,IACL,eAFoB,EAA0B,GAAc,EAAK,kBAAkB,aAAa,EAAK,kBAAkB,aAEvH;AAAA,IACA,WAAW,CAAC;AAAA,IACZ,YAAY,EAAkB,EAAS,WAAW;AAAA,IAClD,aAAa,MAAc,IAAkB,IAAW;AAAA,EAC1D;AACF"}
+{"version":3,"file":"useTransactionDetailsBlock.es.js","names":[],"sources":["../../../../src/insights-v2/actionBlocks/TransactionDetailsBlock/useTransactionDetailsBlock.ts"],"sourcesContent":["import { useActionContext, useInsightsV2Store, useTransactionStore } from '../../../common'\nimport type { Beat, Transaction, DrilldownPayload } from '../../../core'\nimport type { BottomActions, TopActions } from '../../../transactions/constants/Actions'\nimport { getBottomActionsByVariant } from './util'\nimport { resolveTopActions } from './transactionDetailsActions'\n\ninterface TransactionDetailsBlockState {\n  bottomActions: BottomActions[]\n  /** True while the store is still loading; the block shows a loader instead of an empty state. */\n  isLoading: boolean\n  topActions: TopActions[]\n  /** `undefined` once loading finishes means the transaction could not be resolved. */\n  transaction?: Transaction\n}\n\n/**\n * Resolves which transaction this drawer is about, and which inline actions it offers.\n *\n * The subject comes from one of two places:\n *  1. `actionContext.transaction_guid` — set by a parent drawer (e.g. a row tapped in\n *     `TransactionHistoryBlock`) when this drawer is opened nested.\n *  2. `insights_payload.primary_transaction_guid` — the ditto contract for every beat whose\n *     `primary_cta_block` is `transaction_details_block`.\n *\n * The guid is then looked up in `transactionStore.detailedTransactions` rather than used directly,\n * because `TransactionDetails` needs the *detailed* shape (account + category + taggings joined in)\n * and edits must write through to the same store object the rest of the app renders. `buildDetailed\n * Transactions` inside the store is this repo's equivalent of pulse's `buildTransactionDetails`.\n * A guid the store does not have resolves to `undefined` (the block's error state) rather than to\n * any beat-level snapshot, so inline edits can never be made against a stale copy.\n *\n * Actions are not beat-configurable on the v2 contract: `instance_slot_data` is not part of it (the\n * LargeTransactionV2 payload omits the key entirely), so top actions are always the defaults and\n * bottom actions are derived from the triggering CTA's variant.\n */\nexport const useTransactionDetailsBlock = (beat: Beat): TransactionDetailsBlockState => {\n  const { detailedTransactions, isTransactionDataLoaded } = useTransactionStore()\n\n  const { actionDrawer } = useInsightsV2Store()\n\n  const { transaction_guid } = useActionContext<DrilldownPayload>() ?? {}\n  const payload = beat.insights_payload\n\n  const guid = transaction_guid ?? payload?.primary_transaction_guid\n\n  const transaction = guid\n    ? detailedTransactions.find((transaction) => transaction.guid === guid)\n    : undefined\n\n  const bottomActions = getBottomActionsByVariant(\n    actionDrawer,\n    payload?.primary_cta,\n    payload?.secondary_cta,\n  )\n  return {\n    bottomActions,\n    isLoading: !isTransactionDataLoaded,\n    topActions: resolveTopActions(),\n    transaction,\n  }\n}\n"],"mappings":";;;AAmCA,IAAa,IAAA,CAA8B,MAA6C;AACtF,QAAM,EAAE,sBAAA,GAAsB,yBAAA,EAAA,IAA4B,EAAoB,GAExE,EAAE,cAAA,EAAA,IAAiB,EAAmB,GAEtC,EAAE,kBAAA,EAAA,IAAqB,EAAmC,KAAK,CAAC,GAChE,IAAU,EAAK,kBAEf,IAAO,KAAoB,GAAS,0BAEpC,IAAc,IAChB,EAAqB,KAAA,CAAM,MAAgB,EAAY,SAAS,CAAI,IACpE;AAOJ,SAAO;AAAA,IACL,eANoB,EACpB,GACA,GAAS,aACT,GAAS,aAGT;AAAA,IACA,WAAW,CAAC;AAAA,IACZ,YAAY,EAAkB;AAAA,IAC9B,aAAA;AAAA,EACF;AACF"}

package/dist/insights-v2/beatActions.d.ts

@@ -33,6 +33,13 @@ export interface BeatActions {
     onFeedbackDialogClose?: (reason: FeedbackDialogCloseReason) => void;
     onFeedbackDialogBack?: () => void;
     onFeedbackTextFocus?: () => void;
+    /**
+     * Opens the host's contact-support flow for a `contact_support_block` CTA. insights-v2 cannot
+     * import the help module (hosts that don't ship it stub the import), so the host supplies it:
+     * the experiences Help widget wires `RequestSupport`; pulse wires its own. When absent, the CTA
+     * renders disabled (see `isContactSupportCtaDisabled`).
+     */
+    onContactSupport?: () => void;
 }
 export declare const BeatActionsProvider: ({ value, children, }: {
     value: BeatActions;

package/dist/insights-v2/beatActions.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"beatActions.es.js","names":[],"sources":["../../src/insights-v2/beatActions.tsx"],"sourcesContent":["import { createContext, useContext, type ReactNode } from 'react'\n\nimport type { DismissType } from './components/DismissInsightDialog'\nimport type { FeedbackDialogCloseReason } from './components/FeedbackDialog'\n\nexport type InsightMenuAction = 'helpful' | 'not_helpful' | 'hide'\nexport type InsightRating = 'helpful' | 'not_helpful'\n\nexport interface MenuActionHandlers {\n  onAction: (action: InsightMenuAction) => void\n  onOpen?: () => void\n  disabled?: boolean\n}\n\nexport interface UpdateParams {\n  beatGuid: string\n}\n\nexport interface FeedbackParams {\n  beatGuid: string\n  source: InsightRating | 'hide'\n  option: string\n  detail?: string\n}\n\nexport interface DismissParams {\n  beatGuid: string\n  type: DismissType\n}\n\n/** Host callbacks for a beat card. */\nexport interface BeatActions {\n  onMenuAction?: MenuActionHandlers\n  onUpdate?: (params: UpdateParams) => void\n  onSubmitFeedback?: (params: FeedbackParams) => void\n  onDismissInsight?: (params: DismissParams) => void\n  onUndoDismiss?: (params: { beatGuid: string }) => void\n  onFeedbackDialogClose?: (reason: FeedbackDialogCloseReason) => void\n  onFeedbackDialogBack?: () => void\n  onFeedbackTextFocus?: () => void\n}\n\nconst BeatActionsContext = createContext<BeatActions>({})\n\nexport const BeatActionsProvider = ({\n  value,\n  children,\n}: {\n  value: BeatActions\n  children: ReactNode\n}) => <BeatActionsContext.Provider value={value}>{children}</BeatActionsContext.Provider>\n\nexport const useBeatActions = () => useContext(BeatActionsContext)\n"],"mappings":";;AA0CA,IAAM,IAAqB,EAA2B,CAAC,CAAC,GAE3C,IAAA,CAAuB,EAClC,OAAA,GACA,UAAA,EAAA,MAII,gBAAA,EAAC,EAAmB,UAApB;AAAA,EAAoC,OAAA;AAAA,EAAQ,UAAA;AAAsC,CAAA,GAE3E,IAAA,MAAuB,EAAW,CAAkB"}
+{"version":3,"file":"beatActions.es.js","names":[],"sources":["../../src/insights-v2/beatActions.tsx"],"sourcesContent":["import { createContext, useContext, type ReactNode } from 'react'\n\nimport type { DismissType } from './components/DismissInsightDialog'\nimport type { FeedbackDialogCloseReason } from './components/FeedbackDialog'\n\nexport type InsightMenuAction = 'helpful' | 'not_helpful' | 'hide'\nexport type InsightRating = 'helpful' | 'not_helpful'\n\nexport interface MenuActionHandlers {\n  onAction: (action: InsightMenuAction) => void\n  onOpen?: () => void\n  disabled?: boolean\n}\n\nexport interface UpdateParams {\n  beatGuid: string\n}\n\nexport interface FeedbackParams {\n  beatGuid: string\n  source: InsightRating | 'hide'\n  option: string\n  detail?: string\n}\n\nexport interface DismissParams {\n  beatGuid: string\n  type: DismissType\n}\n\n/** Host callbacks for a beat card. */\nexport interface BeatActions {\n  onMenuAction?: MenuActionHandlers\n  onUpdate?: (params: UpdateParams) => void\n  onSubmitFeedback?: (params: FeedbackParams) => void\n  onDismissInsight?: (params: DismissParams) => void\n  onUndoDismiss?: (params: { beatGuid: string }) => void\n  onFeedbackDialogClose?: (reason: FeedbackDialogCloseReason) => void\n  onFeedbackDialogBack?: () => void\n  onFeedbackTextFocus?: () => void\n  /**\n   * Opens the host's contact-support flow for a `contact_support_block` CTA. insights-v2 cannot\n   * import the help module (hosts that don't ship it stub the import), so the host supplies it:\n   * the experiences Help widget wires `RequestSupport`; pulse wires its own. When absent, the CTA\n   * renders disabled (see `isContactSupportCtaDisabled`).\n   */\n  onContactSupport?: () => void\n}\n\nconst BeatActionsContext = createContext<BeatActions>({})\n\nexport const BeatActionsProvider = ({\n  value,\n  children,\n}: {\n  value: BeatActions\n  children: ReactNode\n}) => <BeatActionsContext.Provider value={value}>{children}</BeatActionsContext.Provider>\n\nexport const useBeatActions = () => useContext(BeatActionsContext)\n"],"mappings":";;AAiDA,IAAM,IAAqB,EAA2B,CAAC,CAAC,GAE3C,IAAA,CAAuB,EAClC,OAAA,GACA,UAAA,EAAA,MAII,gBAAA,EAAC,EAAmB,UAApB;AAAA,EAAoC,OAAA;AAAA,EAAQ,UAAA;AAAsC,CAAA,GAE3E,IAAA,MAAuB,EAAW,CAAkB"}

package/dist/insights-v2/blocks/ChartBlocks/BarchartBlock/BarchartBlock.es.js

@@ -1,19 +1,19 @@
 import { useGlobalCopyStore as B, useGlobalUiStore as A, useInsightsV2Store as L } from "../../../../common/context/hooks.es.js";
 import { formatCurrency as S } from "../../../../core/utils/NumberFormatting.es.js";
 import I from "../../../../common/components/Loader.es.js";
-import { BarChartV2 as T } from "../../../components/chartblocks/BarchartV2.es.js";
-import { EmptyBarChart as k } from "../../../components/chartblocks/EmptyBarChart.es.js";
-import { barChartVariant as v, buildChartData as x, buildDataSeries as D } from "./utils.es.js";
-import { actionBlocksKey as O } from "../../../mappings/actionBlocksKey.es.js";
+import { actionBlocksKey as T } from "../../../mappings/actionBlocksKey.es.js";
+import { BarChartV2 as k } from "../../../components/chartblocks/BarchartV2.es.js";
+import { EmptyBarChart as v } from "../../../components/chartblocks/EmptyBarChart.es.js";
+import { barChartVariant as x, buildChartData as D, buildDataSeries as O } from "./utils.es.js";
 import N from "react";
 import { observer as R } from "mobx-react-lite";
 import { jsx as e } from "react/jsx-runtime";
 import { useTheme as V } from "@mui/material/styles";
 var J = R(({ payload: m, beatGuid: i = "" }) => {
-  const l = V(), { openActionDrawer: c } = L(), { insights_feed: o } = B(), { isCopyLoaded: f } = A(), { instance_slot: p, instance_slot_data: a, widget_type: d } = m, { data_series: h, ariaLabel: g = "", average_amount: n = 0, legends: s = [] } = a, t = x(D(h), g), [u] = N.useState(t.length - 1), { color: b } = v(p, a, l);
+  const l = V(), { openActionDrawer: c } = L(), { insights_feed: o } = B(), { isCopyLoaded: f } = A(), { instance_slot: p, instance_slot_data: a, widget_type: d } = m, { data_series: h, ariaLabel: g = "", average_amount: n = 0, legends: s = [] } = a, t = D(O(h), g), [u] = N.useState(t.length - 1), { color: b } = x(p, a, l);
   if (!f) return /* @__PURE__ */ e(I, {});
   const C = [o.general.monthly_amount, o.general.trend], [_, y] = s.length ? s.map((r) => r.label) : C;
-  return t.length ? /* @__PURE__ */ e(T, {
+  return t.length ? /* @__PURE__ */ e(k, {
     amounts: {
       average: n,
       formattedAverage: S(n, "0,0")
@@ -34,13 +34,13 @@ var J = R(({ payload: m, beatGuid: i = "" }) => {
         trigger: "chartBar",
         context: {
           chartBarIndex: r,
-          block: O.TRANSCATION_HISTORY_ACTION_BLOCK
+          block: T.TRANSCATION_HISTORY_ACTION_BLOCK
         }
       });
     },
     selectedTabIndex: u,
     trendAmountLabel: y
-  }) : /* @__PURE__ */ e(k, {});
+  }) : /* @__PURE__ */ e(v, {});
 });
 export {
   J as BarchartBlock

package/dist/insights-v2/blocks/ComponentBlocks/TransactionBlock/TransactionBlock.d.ts

@@ -1,3 +1,30 @@
-import { CategoryTransactionsBlockData } from '../../../../core/types/InsightsInstanceSlotData';
-import { BlockProps } from '../../types';
-export declare const CategoryTransactionsBlock: ({ payload, }: BlockProps<CategoryTransactionsBlockData>) => import("react/jsx-runtime").JSX.Element | null;
+import { InsightsPayload } from '../../../../core';
+interface TransactionBlockProps {
+    payload: InsightsPayload;
+    beatGuid?: string;
+}
+/**
+ * Variants from ditto `lib/ditto/beats/large_transaction_v2.yml`:
+ * - `with_header` — transaction row under a date header (the `with_merchant` card).
+ * - `no_header`   — the row alone (the `no_merchant` card).
+ */
+export declare const TransactionBlockVariant: {
+    readonly WithHeader: "with_header";
+    readonly NoHeader: "no_header";
+};
+/**
+ * The `transaction_block` (ditto `blocks.name` for LargeTransactionV2).
+ *
+ * Renders rows the backend already localized and carried inline on `instance_slot.data_series`
+ * (`logo`, `primary_text`, `secondary_text`, `amount`). Only the amount is formatted here,
+ * because the contract sends it as a number.
+ *
+ * Under `with_header` the card header comes from `instance_slot.header_text`, which tupac sends
+ * as the transaction date. It deliberately does *not* come from the first row: on a `with_merchant`
+ * card a row's `secondary_text` is the category, so reading it here rendered the category twice
+ * and dropped the date entirely.
+ */
+export declare const TransactionBlock: (({ payload }: TransactionBlockProps) => import("react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+export {};

package/dist/insights-v2/blocks/ComponentBlocks/TransactionBlock/TransactionBlock.es.js

@@ -1,29 +1,72 @@
-import { DATE_FORMATS_INTL as a, formatDate as i } from "../../../../core/constants/DateFormats.es.js";
-import { formatCurrency as e } from "../../../../core/utils/NumberFormatting.es.js";
-import { fromUnixUTC as n } from "../../../../core/utils/DateUtil.es.js";
-import m from "../../../components/TransactionListCard.es.js";
-import { MerchantLogo as s } from "@mxenabled/mxui";
+import { useCategoryStore as u } from "../../../../common/context/hooks.es.js";
+import { formatCurrency as c } from "../../../../core/utils/NumberFormatting.es.js";
+import { logoFromRef as g } from "../../../components/shared/EntityLogo.es.js";
+import l from "../../../components/TransactionListCard.es.js";
+import { observer as _ } from "mobx-react-lite";
+import { CategoryIcon as f, InstitutionLogo as h, MerchantLogo as p } from "@mxenabled/mxui";
+import { Icon as y } from "@mxenabled/mx-icons";
 import { jsx as o } from "react/jsx-runtime";
-var u = (t) => {
-  if (typeof t != "number" || Number.isNaN(t)) return "";
-  const r = n(t);
-  return Number.isNaN(r.getTime()) ? "" : i(r, a.FULL_MONTH_DAY);
-}, T = ({ payload: t }) => {
-  const r = t.instance_slot_data.primary_transaction;
-  return r ? /* @__PURE__ */ o(m, { rows: [{
-    amount: e(r.amount, "0,0.00"),
-    leading: r.merchant_guid ? /* @__PURE__ */ o(s, {
-      alt: r.merchant_name || r.description || "",
-      categoryGuid: r.category_guid ?? "",
-      merchantGuid: r.merchant_guid,
-      size: 32
-    }) : void 0,
-    subtitle: u(r.date),
-    title: r.description ?? ""
-  }] }) : null;
-};
+import m from "@mui/material/Box";
+var x = {
+  WithHeader: "with_header",
+  NoHeader: "no_header"
+}, r = 32, v = Math.round(r * 0.625), I = (i, n) => {
+  const t = g(i.logo, i.primary_text);
+  if (t) {
+    if (t.logo_name) return /* @__PURE__ */ o(m, {
+      sx: {
+        alignItems: "center",
+        display: "flex",
+        height: r,
+        justifyContent: "center",
+        width: r
+      },
+      children: /* @__PURE__ */ o(y, {
+        name: t.logo_name,
+        size: v,
+        sx: { color: t.logo_color }
+      })
+    });
+    if (t.merchant_guid) return /* @__PURE__ */ o(p, {
+      alt: t.merchant_name ?? "",
+      categoryGuid: t.category_guid ? n(t.category_guid) : "",
+      merchantGuid: t.merchant_guid,
+      size: r
+    });
+    if (t.institution_guid) return /* @__PURE__ */ o(h, {
+      alt: t.institution_name ?? "",
+      institutionGuid: t.institution_guid,
+      size: r
+    });
+    if (t.category_guid) {
+      const a = n(t.category_guid);
+      return /* @__PURE__ */ o(m, {
+        "data-testid": `category-icon-${a}`,
+        sx: { display: "flex" },
+        children: /* @__PURE__ */ o(f, {
+          categoryGuid: a,
+          size: r
+        })
+      });
+    }
+  }
+}, H = _(({ payload: i }) => {
+  const { getTopLevelCategoryGuid: n } = u(), { data_series: t, header_text: a, variant: s } = i.instance_slot;
+  if (!t?.length) return null;
+  const d = s === x.WithHeader ? a : void 0;
+  return /* @__PURE__ */ o(l, {
+    header: d,
+    rows: t.map((e) => ({
+      amount: typeof e.amount == "number" ? c(e.amount, "0,0.00") : "",
+      leading: I(e, n),
+      subtitle: e.secondary_text ?? "",
+      title: e.primary_text ?? ""
+    }))
+  });
+});
 export {
-  T as CategoryTransactionsBlock
+  H as TransactionBlock,
+  x as TransactionBlockVariant
 };
 
 //# sourceMappingURL=TransactionBlock.es.js.map

package/dist/insights-v2/blocks/ComponentBlocks/TransactionBlock/TransactionBlock.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TransactionBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/TransactionBlock/TransactionBlock.tsx"],"sourcesContent":["import { MerchantLogo } from '@mxenabled/mxui'\n\nimport { DATE_FORMATS_INTL, formatDate } from '../../../../core/constants'\nimport type { CategoryTransactionsBlockData } from '../../../../core/types/InsightsInstanceSlotData'\nimport { fromUnixUTC } from '../../../../core/utils/DateUtil'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\n\nimport TransactionListCard from '../../../components/TransactionListCard'\nimport type { BlockProps } from '../../types'\n\nconst formatTxnDate = (date?: number) => {\n  if (typeof date !== 'number' || Number.isNaN(date)) return ''\n  const parsed = fromUnixUTC(date)\n  if (Number.isNaN(parsed.getTime())) return ''\n  return formatDate(parsed, DATE_FORMATS_INTL.FULL_MONTH_DAY)\n}\n\nexport const CategoryTransactionsBlock = ({\n  payload,\n}: BlockProps<CategoryTransactionsBlockData>) => {\n  const tx = payload.instance_slot_data.primary_transaction\n  if (!tx) return null\n\n  return (\n    <TransactionListCard\n      rows={[\n        {\n          amount: formatCurrency(tx.amount, '0,0.00'),\n          leading: tx.merchant_guid ? (\n            <MerchantLogo\n              alt={tx.merchant_name || tx.description || ''}\n              categoryGuid={tx.category_guid ?? ''}\n              merchantGuid={tx.merchant_guid}\n              size={32}\n            />\n          ) : undefined,\n          subtitle: formatTxnDate(tx.date),\n          title: tx.description ?? '',\n        },\n      ]}\n    />\n  )\n}\n"],"mappings":";;;;;;AAUA,IAAM,IAAA,CAAiB,MAAkB;AACvC,MAAI,OAAO,KAAS,YAAY,OAAO,MAAM,CAAI,EAAG,QAAO;AAC3D,QAAM,IAAS,EAAY,CAAI;AAC/B,SAAI,OAAO,MAAM,EAAO,QAAQ,CAAC,IAAU,KACpC,EAAW,GAAQ,EAAkB,cAAc;AAC5D,GAEa,IAAA,CAA6B,EACxC,SAAA,EAAA,MAC+C;AAC/C,QAAM,IAAK,EAAQ,mBAAmB;AACtC,SAAK,IAGH,gBAAA,EAAC,GAAD,EACE,MAAM,CACJ;AAAA,IACE,QAAQ,EAAe,EAAG,QAAQ,QAAQ;AAAA,IAC1C,SAAS,EAAG,gBACV,gBAAA,EAAC,GAAD;AAAA,MACE,KAAK,EAAG,iBAAiB,EAAG,eAAe;AAAA,MAC3C,cAAc,EAAG,iBAAiB;AAAA,MAClC,cAAc,EAAG;AAAA,MACjB,MAAM;AAAA,IACP,CAAA,IACC;AAAA,IACJ,UAAU,EAAc,EAAG,IAAI;AAAA,IAC/B,OAAO,EAAG,eAAe;AAAA,EAC3B,CACF,EACD,CAAA,IAnBa;AAqBlB"}
+{"version":3,"file":"TransactionBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/TransactionBlock/TransactionBlock.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\n\nimport { CategoryIcon, InstitutionLogo, MerchantLogo } from '@mxenabled/mxui'\nimport { Icon } from '@mxenabled/mx-icons'\n\nimport { useCategoryStore } from '../../../../common'\nimport type { InsightsPayload, InstanceSlotRow } from '../../../../core'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\n\nimport TransactionListCard from '../../../components/TransactionListCard'\nimport { logoFromRef } from '../../../components/shared/EntityLogo'\n\ninterface TransactionBlockProps {\n  payload: InsightsPayload\n  beatGuid?: string\n}\n\n/**\n * Variants from ditto `lib/ditto/beats/large_transaction_v2.yml`:\n * - `with_header` — transaction row under a date header (the `with_merchant` card).\n * - `no_header`   — the row alone (the `no_merchant` card).\n */\nexport const TransactionBlockVariant = {\n  WithHeader: 'with_header',\n  NoHeader: 'no_header',\n} as const\n\nconst ROW_LOGO_SIZE = 32\n// Same glyph-to-tile ratio mxui's `CategoryIcon` uses, so a status icon sits like the other logos.\nconst ROW_ICON_SIZE = Math.round(ROW_LOGO_SIZE * 0.625)\n\n/**\n * Renders the row's leading logo from its `LogoRef`: a status icon, or an entity guid whose prefix\n * names the entity. An unrecognized prefix renders no logo rather than guessing.\n *\n * `resolveTopLevelCategory`: mxui's `CategoryIcon` only knows the top-level category guids and\n * silently falls back to the Uncategorized icon for a sub-category. The details drawer avoids\n * this by passing `transaction.top_level_category_guid`; the row only has the raw guid, so it is\n * walked up to its parent here (identity until categories load). That applies both to a `CAT-`\n * row logo and to a merchant's `fallback_guid`, which `MerchantLogo` draws through the same\n * `CategoryIcon` when the merchant image fails to load.\n */\nconst renderRowLogo = (row: InstanceSlotRow, resolveTopLevelCategory: (guid: string) => string) => {\n  const logo = logoFromRef(row.logo, row.primary_text)\n\n  if (!logo) return undefined\n\n  if (logo.logo_name) {\n    // A fixed box the size of the other logos keeps the row's text column aligned.\n    return (\n      <Box\n        sx={{\n          alignItems: 'center',\n          display: 'flex',\n          height: ROW_LOGO_SIZE,\n          justifyContent: 'center',\n          width: ROW_LOGO_SIZE,\n        }}\n      >\n        <Icon name={logo.logo_name} size={ROW_ICON_SIZE} sx={{ color: logo.logo_color }} />\n      </Box>\n    )\n  }\n\n  if (logo.merchant_guid) {\n    return (\n      <MerchantLogo\n        alt={logo.merchant_name ?? ''}\n        categoryGuid={logo.category_guid ? resolveTopLevelCategory(logo.category_guid) : ''}\n        merchantGuid={logo.merchant_guid}\n        size={ROW_LOGO_SIZE}\n      />\n    )\n  }\n\n  if (logo.institution_guid) {\n    return (\n      <InstitutionLogo\n        alt={logo.institution_name ?? ''}\n        institutionGuid={logo.institution_guid}\n        size={ROW_LOGO_SIZE}\n      />\n    )\n  }\n\n  if (logo.category_guid) {\n    const topLevelGuid = resolveTopLevelCategory(logo.category_guid)\n    return (\n      <Box data-testid={`category-icon-${topLevelGuid}`} sx={{ display: 'flex' }}>\n        <CategoryIcon categoryGuid={topLevelGuid} size={ROW_LOGO_SIZE} />\n      </Box>\n    )\n  }\n\n  return undefined\n}\n\n/**\n * The `transaction_block` (ditto `blocks.name` for LargeTransactionV2).\n *\n * Renders rows the backend already localized and carried inline on `instance_slot.data_series`\n * (`logo`, `primary_text`, `secondary_text`, `amount`). Only the amount is formatted here,\n * because the contract sends it as a number.\n *\n * Under `with_header` the card header comes from `instance_slot.header_text`, which tupac sends\n * as the transaction date. It deliberately does *not* come from the first row: on a `with_merchant`\n * card a row's `secondary_text` is the category, so reading it here rendered the category twice\n * and dropped the date entirely.\n */\nexport const TransactionBlock = observer(({ payload }: TransactionBlockProps) => {\n  const { getTopLevelCategoryGuid } = useCategoryStore()\n  const { data_series: rows, header_text, variant } = payload.instance_slot\n\n  if (!rows?.length) return null\n\n  const header = variant === TransactionBlockVariant.WithHeader ? header_text : undefined\n\n  return (\n    <TransactionListCard\n      header={header}\n      rows={rows.map((row) => ({\n        amount: typeof row.amount === 'number' ? formatCurrency(row.amount, '0,0.00') : '',\n        leading: renderRowLogo(row, getTopLevelCategoryGuid),\n        subtitle: row.secondary_text ?? '',\n        title: row.primary_text ?? '',\n      }))}\n    />\n  )\n})\n"],"mappings":";;;;;;;;;AAwBA,IAAa,IAA0B;AAAA,EACrC,YAAY;AAAA,EACZ,UAAU;AACZ,GAEM,IAAgB,IAEhB,IAAgB,KAAK,MAAM,IAAgB,KAAK,GAahD,IAAA,CAAiB,GAAsB,MAAsD;AACjG,QAAM,IAAO,EAAY,EAAI,MAAM,EAAI,YAAY;AAEnD,MAAK,GAEL;AAAA,QAAI,EAAK,UAEP,QACE,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QACF,YAAY;AAAA,QACZ,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,gBAAgB;AAAA,QAChB,OAAO;AAAA,MACT;AAAA,MAEA,UAAA,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAM,EAAK;AAAA,QAAW,MAAM;AAAA,QAAe,IAAI,EAAE,OAAO,EAAK,WAAW;AAAA,MAAI,CAAA;AAAA,IAC/E,CAAA;AAIT,QAAI,EAAK,cACP,QACE,gBAAA,EAAC,GAAD;AAAA,MACE,KAAK,EAAK,iBAAiB;AAAA,MAC3B,cAAc,EAAK,gBAAgB,EAAwB,EAAK,aAAa,IAAI;AAAA,MACjF,cAAc,EAAK;AAAA,MACnB,MAAM;AAAA,IACP,CAAA;AAIL,QAAI,EAAK,iBACP,QACE,gBAAA,EAAC,GAAD;AAAA,MACE,KAAK,EAAK,oBAAoB;AAAA,MAC9B,iBAAiB,EAAK;AAAA,MACtB,MAAM;AAAA,IACP,CAAA;AAIL,QAAI,EAAK,eAAe;AACtB,YAAM,IAAe,EAAwB,EAAK,aAAa;AAC/D,aACE,gBAAA,EAAC,GAAD;AAAA,QAAK,eAAa,iBAAiB,CAAA;AAAA,QAAgB,IAAI,EAAE,SAAS,OAAO;AAAA,QACvE,UAAA,gBAAA,EAAC,GAAD;AAAA,UAAc,cAAc;AAAA,UAAc,MAAM;AAAA,QAAgB,CAAA;AAAA,MAC7D,CAAA;AAAA,IAET;AAAA;AAGF,GAca,IAAmB,EAAA,CAAU,EAAE,SAAA,EAAA,MAAqC;AAC/E,QAAM,EAAE,yBAAA,EAAA,IAA4B,EAAiB,GAC/C,EAAE,aAAa,GAAM,aAAA,GAAa,SAAA,EAAA,IAAY,EAAQ;AAE5D,MAAI,CAAC,GAAM,OAAQ,QAAO;AAE1B,QAAM,IAAS,MAAY,EAAwB,aAAa,IAAc;AAE9E,SACE,gBAAA,EAAC,GAAD;AAAA,IACU,QAAA;AAAA,IACR,MAAM,EAAK,IAAA,CAAK,OAAS;AAAA,MACvB,QAAQ,OAAO,EAAI,UAAW,WAAW,EAAe,EAAI,QAAQ,QAAQ,IAAI;AAAA,MAChF,SAAS,EAAc,GAAK,CAAuB;AAAA,MACnD,UAAU,EAAI,kBAAkB;AAAA,MAChC,OAAO,EAAI,gBAAgB;AAAA,IAC7B,EAAE;AAAA,EACH,CAAA;AAEL,CAAC"}

package/dist/insights-v2/blocks/ComponentBlocks/TransactionBlock/index.d.ts

@@ -1 +1 @@
-export { CategoryTransactionsBlock } from './TransactionBlock';
+export { TransactionBlock, TransactionBlockVariant } from './TransactionBlock';

package/dist/insights-v2/components/BadgedTile.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { SxProps } from '@mui/material/styles';
+interface BadgedTileProps {
+    /** The tile's subject: a logo, an icon, any square visual. */
+    center: ReactNode;
+    /** Badge overhanging the top-right corner (e.g. a `<StatusBadge>`). */
+    topRight?: ReactNode;
+    /** Badge overhanging the bottom-left corner (Duplicate Payment's second logo). */
+    bottomLeft?: ReactNode;
+    /** Tile size in px. Default 44. */
+    size?: number;
+    sx?: SxProps;
+}
+/**
+ * A square tile with up to two badges overhanging its corners.
+ *
+ * Figma 1941:111897 (Embedded | Large Transaction): the row logo with a status badge on its
+ * top-right. The padding is the room the badges need to overhang without being clipped by the
+ * card, so it stays even when a slot is empty and the tile keeps one size across insights.
+ */
+declare const BadgedTile: ({ bottomLeft, center, size, sx, topRight }: BadgedTileProps) => import("react/jsx-runtime").JSX.Element;
+export default BadgedTile;

package/dist/insights-v2/components/BadgedTile.es.js

@@ -0,0 +1,46 @@
+import { jsx as i, jsxs as d } from "react/jsx-runtime";
+import e from "@mui/material/Box";
+var p = 44, x = ({ bottomLeft: r, center: s, size: o = p, sx: t, topRight: l }) => /* @__PURE__ */ d(e, {
+  sx: {
+    alignItems: "center",
+    display: "flex",
+    pb: 12,
+    pl: 12,
+    pr: 10,
+    pt: 10,
+    position: "relative",
+    ...t
+  },
+  children: [
+    /* @__PURE__ */ i(e, {
+      sx: {
+        borderRadius: "6px",
+        height: o,
+        overflow: "hidden",
+        width: o
+      },
+      children: s
+    }),
+    l && /* @__PURE__ */ i(e, {
+      sx: {
+        position: "absolute",
+        right: 0,
+        top: 0
+      },
+      children: l
+    }),
+    r && /* @__PURE__ */ i(e, {
+      sx: {
+        bottom: 0,
+        left: 0,
+        position: "absolute"
+      },
+      children: r
+    })
+  ]
+});
+export {
+  x as default
+};
+
+//# sourceMappingURL=BadgedTile.es.js.map

package/dist/insights-v2/components/BadgedTile.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgedTile.es.js","names":[],"sources":["../../../src/insights-v2/components/BadgedTile.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nimport Box from '@mui/material/Box'\nimport type { SxProps } from '@mui/material/styles'\n\n/** Figma 1941:111897: the embedded card's tile is 44px (the compact card's own logo rows are 40). */\nconst TILE_SIZE = 44\n\ninterface BadgedTileProps {\n  /** The tile's subject: a logo, an icon, any square visual. */\n  center: ReactNode\n  /** Badge overhanging the top-right corner (e.g. a `<StatusBadge>`). */\n  topRight?: ReactNode\n  /** Badge overhanging the bottom-left corner (Duplicate Payment's second logo). */\n  bottomLeft?: ReactNode\n  /** Tile size in px. Default 44. */\n  size?: number\n  sx?: SxProps\n}\n\n/**\n * A square tile with up to two badges overhanging its corners.\n *\n * Figma 1941:111897 (Embedded | Large Transaction): the row logo with a status badge on its\n * top-right. The padding is the room the badges need to overhang without being clipped by the\n * card, so it stays even when a slot is empty and the tile keeps one size across insights.\n */\nconst BadgedTile = ({ bottomLeft, center, size = TILE_SIZE, sx, topRight }: BadgedTileProps) => (\n  <Box\n    sx={{\n      alignItems: 'center',\n      display: 'flex',\n      // Figma's asymmetric padding: the badges sit proud of the tile's corners.\n      pb: 12,\n      pl: 12,\n      pr: 10,\n      pt: 10,\n      position: 'relative',\n      ...sx,\n    }}\n  >\n    <Box sx={{ borderRadius: '6px', height: size, overflow: 'hidden', width: size }}>{center}</Box>\n    {topRight && <Box sx={{ position: 'absolute', right: 0, top: 0 }}>{topRight}</Box>}\n    {bottomLeft && <Box sx={{ bottom: 0, left: 0, position: 'absolute' }}>{bottomLeft}</Box>}\n  </Box>\n)\n\nexport default BadgedTile\n"],"mappings":";;AAMA,IAAM,IAAY,IAqBZ,IAAA,CAAc,EAAE,YAAA,GAAY,QAAA,GAAQ,MAAA,IAAO,GAAW,IAAA,GAAI,UAAA,EAAA,MAC9D,gBAAA,EAAC,GAAD;AAAA,EACE,IAAI;AAAA,IACF,YAAY;AAAA,IACZ,SAAS;AAAA,IAET,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,UAAU;AAAA,IACV,GAAG;AAAA,EACL;AAAA,EAXF,UAAA;AAAA,IAaE,gBAAA,EAAC,GAAD;AAAA,MAAK,IAAI;AAAA,QAAE,cAAc;AAAA,QAAO,QAAQ;AAAA,QAAM,UAAU;AAAA,QAAU,OAAO;AAAA,MAAK;AAAA,MAAI,UAAA;AAAA,IAAY,CAAA;AAAA,IAC7F,KAAY,gBAAA,EAAC,GAAD;AAAA,MAAK,IAAI;AAAA,QAAE,UAAU;AAAA,QAAY,OAAO;AAAA,QAAG,KAAK;AAAA,MAAE;AAAA,MAAI,UAAA;AAAA,IAAc,CAAA;AAAA,IAChF,KAAc,gBAAA,EAAC,GAAD;AAAA,MAAK,IAAI;AAAA,QAAE,QAAQ;AAAA,QAAG,MAAM;AAAA,QAAG,UAAU;AAAA,MAAW;AAAA,MAAI,UAAA;AAAA,IAAgB,CAAA;AAAA,EACpF"}