@mx-cartographer/experiences 9.7.97 → 9.7.98
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +5 -0
- package/dist/insights-v2/blocks/ComponentBlocks/AccountBlock/AccountBlock.es.js +1 -1
- package/dist/insights-v2/blocks/ComponentBlocks/AccountBlock/AccountBlock.es.js.map +1 -1
- package/dist/insights-v2/blocks/ComponentBlocks/AccountBlock/layout.es.js +1 -1
- package/dist/insights-v2/blocks/ComponentBlocks/AccountBlock/layout.es.js.map +1 -1
- package/dist/insights-v2/components/Header.es.js +5 -2
- package/dist/insights-v2/components/Header.es.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,8 @@
|
|
|
1
|
+
## [9.7.98] - 11-04-2026
|
|
2
|
+
|
|
3
|
+
- **FIXED** - Celebrate Credit Card Payoff card spacing matches Figma (WEC-2170)
|
|
4
|
+
- **FIXED** - Insight card titles stay on one line and end with an ellipsis when too long (WEC-2170)
|
|
5
|
+
|
|
1
6
|
## [9.7.97] - 11-03-2026
|
|
2
7
|
|
|
3
8
|
- **ADDED** - HSA Deposit beat on Insights 2.0: the `with_header_footer` transaction card whose CTA opens Transaction Details for one deposit and the Transaction List for several (WEC-2214)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccountBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/AccountBlock/AccountBlock.tsx"],"sourcesContent":["import Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { useRef } from 'react'\nimport { useTheme } from '@mui/material/styles'\n\nimport { Text } from '@mxenabled/mxui'\nimport { Icon } from '@mxenabled/mx-icons'\n\nimport { slot, type InsightsPayload, type LogoRef } from '../../../../core'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\nimport LogoFromGuid from '../../../components/LogoFromGuid'\nimport { Confetti } from '../../../components/shared/Confetti'\nimport { ReactComponent as PaidOffCardGraphic } from '../../../components/shared/images/PaidOffCard.svg'\nimport { ReactComponent as SavingsGraphic } from '../../../components/shared/images/SavingsAccountDeposit.svg'\nimport { statusIconName } from '../../../components/statusIcon'\nimport { useContainerDimensions } from '../../../hooks/useContainerDimensions'\n\nimport { resolveVariantConfig } from '../../resolveVariantConfig'\nimport { DetailedAccountBlock, isDetailedAccountVariant } from '../DetailedAccountBlock'\n\nimport { HeaderComponent } from './HeaderComponent'\nimport { IconComponent } from './IconComponent'\nimport { getLayoutConfig } from './layout'\n\nconst AccountBlock = ({ payload }: { payload: InsightsPayload; beatGuid?: string }) => {\n const theme = useTheme()\n const containerRef = useRef<HTMLDivElement>(null)\n const { height, width } = useContainerDimensions(containerRef)\n const { instance_slot } = payload\n const { variant, institution_guid, institution_name, icon_name, merchant_name } = instance_slot\n\n if (isDetailedAccountVariant(variant)) return <DetailedAccountBlock payload={payload} />\n\n // V2 variants fill `instance_slot.data` (ditto's account_block slots) and it is then the whole\n // truth: a slot it leaves empty, or sends with the wrong kind, draws nothing rather than falling\n // back to the stale flat field it supersedes. Beats not yet migrated send no `data` and keep the\n // flat fields.\n const { data } = instance_slot\n const v2 = data !== undefined\n const dataAmount = slot<unknown>(data, 'amount')\n const amount = v2\n ? typeof dataAmount === 'number' && Number.isFinite(dataAmount)\n ? dataAmount\n : undefined\n : instance_slot.amount\n // One V2 slot feeds the line under the amount on both tiles. V1 called it `sub_text` on the\n // standard tile and `label` on the confetti tile, so each keeps its own flat field.\n const dataSubText = slot<unknown>(data, 'sub_text')\n const v2SubText = typeof dataSubText === 'string' ? dataSubText : undefined\n const sub_text = v2 ? v2SubText : instance_slot.sub_text\n const label = v2 ? v2SubText : instance_slot.label\n const dataHeaderText = slot<unknown>(data, 'header_text')\n const header_text = v2\n ? typeof dataHeaderText === 'string'\n ? dataHeaderText\n : undefined\n : instance_slot.header_text\n const logo = slot<LogoRef>(data, 'logo')\n const layoutConfig = resolveVariantConfig(\n getLayoutConfig(theme),\n variant,\n 'default',\n 'AccountBlock',\n )\n\n // Confetti-backed celebration variants (deposits, payoff, savings) — a success-tinted card\n // on a gradient + confetti wash. Everything variant-specific is flat on `layoutConfig`.\n if (layoutConfig?.isConfetti) {\n const confettiIcon = statusIconName(logo?.guid)\n const graphics: Record<string, React.ReactNode> = {\n paidOffCard: (\n // SVG is 58x46 but the card sits at (0,14) with the check badge overflowing top-right.\n // Box it to the card's real 44x32 footprint and shift the SVG up so it aligns with the text.\n <Box sx={{ flexShrink: 0, height: 32, position: 'relative', width: 44 }}>\n <PaidOffCardGraphic\n aria-hidden={true}\n role=\"presentation\"\n style={{ left: 0, position: 'absolute', top: -14 }}\n />\n </Box>\n ),\n savings: <SavingsGraphic aria-hidden={true} height={55} role=\"presentation\" width={55} />,\n logo: (\n <Box\n sx={{\n borderRadius: '4px',\n flexShrink: 0,\n height: 48,\n overflow: 'hidden',\n width: 48,\n }}\n >\n {/* An ICO- icon keeps the tile's look: an outlined glyph in success.contrastText on\n the success.main square. It is drawn with Icon, as IconComponent does, because\n LogoFromGuid fills every ICO- glyph. Any other guid renders via LogoFromGuid. */}\n {confettiIcon ? (\n <Stack\n data-icon={confettiIcon}\n sx={{\n alignItems: 'center',\n bgcolor: 'success.main',\n height: '100%',\n justifyContent: 'center',\n width: '100%',\n }}\n >\n <Icon\n aria-hidden={true}\n name={confettiIcon}\n size={layoutConfig.logo_icon_size ?? 24}\n sx={{ color: 'success.contrastText' }}\n />\n </Stack>\n ) : logo?.guid ? (\n <LogoFromGuid logo={logo} size={48} />\n ) : null}\n </Box>\n ),\n }\n const graphic = graphics[layoutConfig.graphic ?? 'logo']\n\n // Deposit cards show the payer name — a merchant when we have one, otherwise the institution.\n // V2 sends it resolved as `data.secondary_text`; the flat fields remain the fallback.\n const dataSecondaryText = slot<unknown>(data, 'secondary_text')\n const payer =\n (typeof dataSecondaryText === 'string' && dataSecondaryText) ||\n (merchant_name ?? institution_name)\n const secondaryText = layoutConfig.secondarySource === 'merchant' ? payer : label\n const secondary = secondaryText ? (\n <Text color={layoutConfig.secondaryColor} variant={layoutConfig.secondaryVariant}>\n {secondaryText}\n </Text>\n ) : null\n // No figure for a missing amount: `formatCurrency` would print a confident `$0.00`.\n const amountText =\n amount != null ? (\n <Text bold={true} color=\"success.dark\" variant={layoutConfig.amountVariant}>\n {`${layoutConfig.amountPrefix ?? ''}${formatCurrency(amount, '0,0.00')}`}\n </Text>\n ) : null\n\n return (\n <Box\n ref={containerRef}\n sx={{\n backgroundImage: layoutConfig.gradient,\n bgcolor: 'background.paper',\n overflow: 'hidden',\n position: 'relative',\n p: 16,\n width: '100%',\n }}\n >\n <Box\n sx={{\n inset: 0,\n pointerEvents: 'none',\n position: 'absolute',\n zIndex: 1,\n }}\n >\n <Confetti height={height} shouldRun={height > 0 && width > 0} width={width} />\n </Box>\n\n <Stack\n sx={{\n borderRadius: '8px',\n ...(layoutConfig.cardShadow && { boxShadow: theme.shadows[1] }),\n overflow: 'hidden',\n position: 'relative',\n width: '100%',\n zIndex: 2,\n }}\n >\n {layoutConfig.categoryStrip && header_text && (\n <Box sx={{ bgcolor: 'success.main', px: 12, py: 4 }}>\n <Text color=\"success.contrastText\" variant=\"caption\">\n {header_text}\n </Text>\n </Box>\n )}\n\n <Stack\n sx={{\n alignItems: 'center',\n bgcolor: 'success.lighter',\n border: '1px solid',\n borderColor: 'success.main',\n borderRadius: '8px',\n // With a strip above, the body's top corners tuck under it (no double border line).\n ...(layoutConfig.categoryStrip && {\n borderTopLeftRadius: 0,\n borderTopRightRadius: 0,\n borderTop: 0,\n }),\n flexDirection: 'row',\n ...layoutConfig.rowSx,\n }}\n >\n <Box sx={{ display: 'flex', flexShrink: 0 }}>{graphic}</Box>\n\n <Stack sx={{ flex: '1 0 0', minWidth: 0 }}>\n {layoutConfig.secondaryPosition === 'above' && secondary}\n {amountText}\n {layoutConfig.secondaryPosition === 'below' && secondary}\n </Stack>\n </Stack>\n </Stack>\n </Box>\n )\n }\n\n return (\n <Stack\n sx={{\n background: layoutConfig.background,\n p: 16,\n }}\n >\n <Stack\n sx={{\n borderRadius: '8px',\n boxShadow: theme.shadows[1],\n width: '100%',\n }}\n >\n {header_text && <HeaderComponent headerText={header_text} />}\n <Stack\n sx={{\n alignItems: 'center',\n bgcolor: 'background.paper',\n borderRadius: '8px',\n gap: 16,\n // Figma's standard tile: 16px on every side, 80px tall in the 112px slot.\n p: 16,\n width: '100%',\n ...(header_text && {\n borderTopLeftRadius: '0',\n borderTopRightRadius: '0',\n }),\n ...((institution_guid || icon_name || logo?.guid) && {\n flexDirection: 'row',\n }),\n }}\n >\n <IconComponent logo={logo} slot={instance_slot} variant={variant} />\n\n <Stack>\n {amount != null && <Text variant=\"h2\">{formatCurrency(amount, '0,0.00')}</Text>}\n <Stack sx={{ gap: 8, flexDirection: 'row', alignItems: 'center' }}>\n {layoutConfig.sub_logo && (\n <Icon color=\"warning\" fill={true} name={layoutConfig.sub_logo} size={20} />\n )}\n {sub_text && (\n <Text color=\"text.secondary\" variant=\"caption\">\n {sub_text}\n </Text>\n )}\n </Stack>\n </Stack>\n </Stack>\n </Stack>\n </Stack>\n )\n}\n\nexport default AccountBlock\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"AccountBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/AccountBlock/AccountBlock.tsx"],"sourcesContent":["import Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { useRef } from 'react'\nimport { useTheme } from '@mui/material/styles'\n\nimport { Text } from '@mxenabled/mxui'\nimport { Icon } from '@mxenabled/mx-icons'\n\nimport { slot, type InsightsPayload, type LogoRef } from '../../../../core'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\nimport LogoFromGuid from '../../../components/LogoFromGuid'\nimport { Confetti } from '../../../components/shared/Confetti'\nimport { ReactComponent as PaidOffCardGraphic } from '../../../components/shared/images/PaidOffCard.svg'\nimport { ReactComponent as SavingsGraphic } from '../../../components/shared/images/SavingsAccountDeposit.svg'\nimport { statusIconName } from '../../../components/statusIcon'\nimport { useContainerDimensions } from '../../../hooks/useContainerDimensions'\n\nimport { resolveVariantConfig } from '../../resolveVariantConfig'\nimport { DetailedAccountBlock, isDetailedAccountVariant } from '../DetailedAccountBlock'\n\nimport { HeaderComponent } from './HeaderComponent'\nimport { IconComponent } from './IconComponent'\nimport { getLayoutConfig } from './layout'\n\nconst AccountBlock = ({ payload }: { payload: InsightsPayload; beatGuid?: string }) => {\n const theme = useTheme()\n const containerRef = useRef<HTMLDivElement>(null)\n const { height, width } = useContainerDimensions(containerRef)\n const { instance_slot } = payload\n const { variant, institution_guid, institution_name, icon_name, merchant_name } = instance_slot\n\n if (isDetailedAccountVariant(variant)) return <DetailedAccountBlock payload={payload} />\n\n // V2 variants fill `instance_slot.data` (ditto's account_block slots) and it is then the whole\n // truth: a slot it leaves empty, or sends with the wrong kind, draws nothing rather than falling\n // back to the stale flat field it supersedes. Beats not yet migrated send no `data` and keep the\n // flat fields.\n const { data } = instance_slot\n const v2 = data !== undefined\n const dataAmount = slot<unknown>(data, 'amount')\n const amount = v2\n ? typeof dataAmount === 'number' && Number.isFinite(dataAmount)\n ? dataAmount\n : undefined\n : instance_slot.amount\n // One V2 slot feeds the line under the amount on both tiles. V1 called it `sub_text` on the\n // standard tile and `label` on the confetti tile, so each keeps its own flat field.\n const dataSubText = slot<unknown>(data, 'sub_text')\n const v2SubText = typeof dataSubText === 'string' ? dataSubText : undefined\n const sub_text = v2 ? v2SubText : instance_slot.sub_text\n const label = v2 ? v2SubText : instance_slot.label\n const dataHeaderText = slot<unknown>(data, 'header_text')\n const header_text = v2\n ? typeof dataHeaderText === 'string'\n ? dataHeaderText\n : undefined\n : instance_slot.header_text\n const logo = slot<LogoRef>(data, 'logo')\n const layoutConfig = resolveVariantConfig(\n getLayoutConfig(theme),\n variant,\n 'default',\n 'AccountBlock',\n )\n\n // Confetti-backed celebration variants (deposits, payoff, savings) — a success-tinted card\n // on a gradient + confetti wash. Everything variant-specific is flat on `layoutConfig`.\n if (layoutConfig?.isConfetti) {\n const confettiIcon = statusIconName(logo?.guid)\n const graphics: Record<string, React.ReactNode> = {\n paidOffCard: (\n // SVG is 58x46 but the card sits at (0,14) with the check badge overflowing top-right.\n // Box it to Figma's 48px graphic frame (the card is 44x32) and shift the SVG up so it aligns\n // with the text.\n <Box sx={{ flexShrink: 0, height: 32, position: 'relative', width: 48 }}>\n <PaidOffCardGraphic\n aria-hidden={true}\n role=\"presentation\"\n style={{ left: 0, position: 'absolute', top: -14 }}\n />\n </Box>\n ),\n savings: <SavingsGraphic aria-hidden={true} height={55} role=\"presentation\" width={55} />,\n logo: (\n <Box\n sx={{\n borderRadius: '4px',\n flexShrink: 0,\n height: 48,\n overflow: 'hidden',\n width: 48,\n }}\n >\n {/* An ICO- icon keeps the tile's look: an outlined glyph in success.contrastText on\n the success.main square. It is drawn with Icon, as IconComponent does, because\n LogoFromGuid fills every ICO- glyph. Any other guid renders via LogoFromGuid. */}\n {confettiIcon ? (\n <Stack\n data-icon={confettiIcon}\n sx={{\n alignItems: 'center',\n bgcolor: 'success.main',\n height: '100%',\n justifyContent: 'center',\n width: '100%',\n }}\n >\n <Icon\n aria-hidden={true}\n name={confettiIcon}\n size={layoutConfig.logo_icon_size ?? 24}\n sx={{ color: 'success.contrastText' }}\n />\n </Stack>\n ) : logo?.guid ? (\n <LogoFromGuid logo={logo} size={48} />\n ) : null}\n </Box>\n ),\n }\n const graphic = graphics[layoutConfig.graphic ?? 'logo']\n\n // Deposit cards show the payer name — a merchant when we have one, otherwise the institution.\n // V2 sends it resolved as `data.secondary_text`; the flat fields remain the fallback.\n const dataSecondaryText = slot<unknown>(data, 'secondary_text')\n const payer =\n (typeof dataSecondaryText === 'string' && dataSecondaryText) ||\n (merchant_name ?? institution_name)\n const secondaryText = layoutConfig.secondarySource === 'merchant' ? payer : label\n const secondary = secondaryText ? (\n <Text color={layoutConfig.secondaryColor} variant={layoutConfig.secondaryVariant}>\n {secondaryText}\n </Text>\n ) : null\n // No figure for a missing amount: `formatCurrency` would print a confident `$0.00`.\n const amountText =\n amount != null ? (\n <Text bold={true} color=\"success.dark\" variant={layoutConfig.amountVariant}>\n {`${layoutConfig.amountPrefix ?? ''}${formatCurrency(amount, '0,0.00')}`}\n </Text>\n ) : null\n\n return (\n <Box\n ref={containerRef}\n sx={{\n backgroundImage: layoutConfig.gradient,\n bgcolor: 'background.paper',\n overflow: 'hidden',\n position: 'relative',\n p: 16,\n width: '100%',\n }}\n >\n <Box\n sx={{\n inset: 0,\n pointerEvents: 'none',\n position: 'absolute',\n zIndex: 1,\n }}\n >\n <Confetti height={height} shouldRun={height > 0 && width > 0} width={width} />\n </Box>\n\n <Stack\n sx={{\n borderRadius: '8px',\n ...(layoutConfig.cardShadow && { boxShadow: theme.shadows[1] }),\n overflow: 'hidden',\n position: 'relative',\n width: '100%',\n zIndex: 2,\n }}\n >\n {layoutConfig.categoryStrip && header_text && (\n <Box sx={{ bgcolor: 'success.main', px: 12, py: 4 }}>\n <Text color=\"success.contrastText\" variant=\"caption\">\n {header_text}\n </Text>\n </Box>\n )}\n\n <Stack\n sx={{\n alignItems: 'center',\n bgcolor: 'success.lighter',\n border: '1px solid',\n borderColor: 'success.main',\n borderRadius: '8px',\n // With a strip above, the body's top corners tuck under it (no double border line).\n ...(layoutConfig.categoryStrip && {\n borderTopLeftRadius: 0,\n borderTopRightRadius: 0,\n borderTop: 0,\n }),\n flexDirection: 'row',\n ...layoutConfig.rowSx,\n }}\n >\n <Box sx={{ display: 'flex', flexShrink: 0 }}>{graphic}</Box>\n\n <Stack sx={{ flex: '1 0 0', minWidth: 0 }}>\n {layoutConfig.secondaryPosition === 'above' && secondary}\n {amountText}\n {layoutConfig.secondaryPosition === 'below' && secondary}\n </Stack>\n </Stack>\n </Stack>\n </Box>\n )\n }\n\n return (\n <Stack\n sx={{\n background: layoutConfig.background,\n p: 16,\n }}\n >\n <Stack\n sx={{\n borderRadius: '8px',\n boxShadow: theme.shadows[1],\n width: '100%',\n }}\n >\n {header_text && <HeaderComponent headerText={header_text} />}\n <Stack\n sx={{\n alignItems: 'center',\n bgcolor: 'background.paper',\n borderRadius: '8px',\n gap: 16,\n // Figma's standard tile: 16px on every side, 80px tall in the 112px slot.\n p: 16,\n width: '100%',\n ...(header_text && {\n borderTopLeftRadius: '0',\n borderTopRightRadius: '0',\n }),\n ...((institution_guid || icon_name || logo?.guid) && {\n flexDirection: 'row',\n }),\n }}\n >\n <IconComponent logo={logo} slot={instance_slot} variant={variant} />\n\n <Stack>\n {amount != null && <Text variant=\"h2\">{formatCurrency(amount, '0,0.00')}</Text>}\n <Stack sx={{ gap: 8, flexDirection: 'row', alignItems: 'center' }}>\n {layoutConfig.sub_logo && (\n <Icon color=\"warning\" fill={true} name={layoutConfig.sub_logo} size={20} />\n )}\n {sub_text && (\n <Text color=\"text.secondary\" variant=\"caption\">\n {sub_text}\n </Text>\n )}\n </Stack>\n </Stack>\n </Stack>\n </Stack>\n </Stack>\n )\n}\n\nexport default AccountBlock\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAwBA,IAAM,KAAA,CAAgB,EAAE,SAAA,EAAA,MAA+D;AACrF,QAAM,IAAQ,EAAS,GACjB,IAAe,EAAuB,IAAI,GAC1C,EAAE,QAAA,GAAQ,OAAA,EAAA,IAAU,EAAuB,CAAY,GACvD,EAAE,eAAA,EAAA,IAAkB,GACpB,EAAE,SAAA,GAAS,kBAAA,GAAkB,kBAAA,GAAkB,WAAA,GAAW,eAAA,EAAA,IAAkB;AAElF,MAAI,EAAyB,CAAO,EAAG,QAAO,gBAAA,EAAC,GAAD,EAA+B,SAAA,EAAU,CAAA;AAMvF,QAAM,EAAE,MAAA,EAAA,IAAS,GACX,IAAK,MAAS,QACd,IAAa,EAAc,GAAM,QAAQ,GACzC,IAAS,IACX,OAAO,KAAe,YAAY,OAAO,SAAS,CAAU,IAC1D,IACA,SACF,EAAc,QAGZ,IAAc,EAAc,GAAM,UAAU,GAC5C,IAAY,OAAO,KAAgB,WAAW,IAAc,QAC5D,IAAW,IAAK,IAAY,EAAc,UAC1C,IAAQ,IAAK,IAAY,EAAc,OACvC,IAAiB,EAAc,GAAM,aAAa,GAClD,IAAc,IAChB,OAAO,KAAmB,WACxB,IACA,SACF,EAAc,aACZ,IAAO,EAAc,GAAM,MAAM,GACjC,IAAe,EACnB,EAAgB,CAAK,GACrB,GACA,WACA,cACF;AAIA,MAAI,GAAc,YAAY;AAC5B,UAAM,IAAe,EAAe,GAAM,IAAI,GAoDxC,IAAU;AAAA,MAlDd,aAIE,gBAAA,EAAC,GAAD;AAAA,QAAK,IAAI;AAAA,UAAE,YAAY;AAAA,UAAG,QAAQ;AAAA,UAAI,UAAU;AAAA,UAAY,OAAO;AAAA,QAAG;AAAA,QACpE,UAAA,gBAAA,EAAC,GAAD;AAAA,UACE,eAAa;AAAA,UACb,MAAK;AAAA,UACL,OAAO;AAAA,YAAE,MAAM;AAAA,YAAG,UAAU;AAAA,YAAY,KAAK;AAAA,UAAI;AAAA,QAClD,CAAA;AAAA,MACE,CAAA;AAAA,MAEP,SAAS,gBAAA,EAAC,GAAD;AAAA,QAAgB,eAAa;AAAA,QAAM,QAAQ;AAAA,QAAI,MAAK;AAAA,QAAe,OAAO;AAAA,MAAK,CAAA;AAAA,MACxF,MACE,gBAAA,EAAC,GAAD;AAAA,QACE,IAAI;AAAA,UACF,cAAc;AAAA,UACd,YAAY;AAAA,UACZ,QAAQ;AAAA,UACR,UAAU;AAAA,UACV,OAAO;AAAA,QACT;AAAA,QAKC,UAAA,IACC,gBAAA,EAAC,GAAD;AAAA,UACE,aAAW;AAAA,UACX,IAAI;AAAA,YACF,YAAY;AAAA,YACZ,SAAS;AAAA,YACT,QAAQ;AAAA,YACR,gBAAgB;AAAA,YAChB,OAAO;AAAA,UACT;AAAA,UAEA,UAAA,gBAAA,EAAC,GAAD;AAAA,YACE,eAAa;AAAA,YACb,MAAM;AAAA,YACN,MAAM,EAAa,kBAAkB;AAAA,YACrC,IAAI,EAAE,OAAO,uBAAuB;AAAA,UACrC,CAAA;AAAA,QACI,CAAA,IACL,GAAM,OACR,gBAAA,EAAC,GAAD;AAAA,UAAoB,MAAA;AAAA,UAAM,MAAM;AAAA,QAAK,CAAA,IACnC;AAAA,MACD,CAAA;AAAA,IAGO,EAAS,EAAa,WAAW,MAAA,GAI3C,IAAoB,EAAc,GAAM,gBAAgB,GACxD,IACH,OAAO,KAAsB,YAAY,MACzC,KAAiB,IACd,IAAgB,EAAa,oBAAoB,aAAa,IAAQ,GACtE,IAAY,IAChB,gBAAA,EAAC,GAAD;AAAA,MAAM,OAAO,EAAa;AAAA,MAAgB,SAAS,EAAa;AAAA,MAC7D,UAAA;AAAA,IACG,CAAA,IACJ,MAEE,IACJ,KAAU,OACR,gBAAA,EAAC,GAAD;AAAA,MAAM,MAAM;AAAA,MAAM,OAAM;AAAA,MAAe,SAAS,EAAa;AAAA,MAC1D,UAAA,GAAG,EAAa,gBAAgB,EAAA,GAAK,EAAe,GAAQ,QAAQ,CAAA;AAAA,IACjE,CAAA,IACJ;AAEN,WACE,gBAAA,EAAC,GAAD;AAAA,MACE,KAAK;AAAA,MACL,IAAI;AAAA,QACF,iBAAiB,EAAa;AAAA,QAC9B,SAAS;AAAA,QACT,UAAU;AAAA,QACV,UAAU;AAAA,QACV,GAAG;AAAA,QACH,OAAO;AAAA,MACT;AAAA,MATF,UAAA,CAWE,gBAAA,EAAC,GAAD;AAAA,QACE,IAAI;AAAA,UACF,OAAO;AAAA,UACP,eAAe;AAAA,UACf,UAAU;AAAA,UACV,QAAQ;AAAA,QACV;AAAA,QAEA,UAAA,gBAAA,EAAC,GAAD;AAAA,UAAkB,QAAA;AAAA,UAAQ,WAAW,IAAS,KAAK,IAAQ;AAAA,UAAU,OAAA;AAAA,QAAQ,CAAA;AAAA,MAC1E,CAAA,GAEL,gBAAA,EAAC,GAAD;AAAA,QACE,IAAI;AAAA,UACF,cAAc;AAAA,UACd,GAAI,EAAa,cAAc,EAAE,WAAW,EAAM,QAAQ,CAAA,EAAG;AAAA,UAC7D,UAAU;AAAA,UACV,UAAU;AAAA,UACV,OAAO;AAAA,UACP,QAAQ;AAAA,QACV;AAAA,QARF,UAAA,CAUG,EAAa,iBAAiB,KAC7B,gBAAA,EAAC,GAAD;AAAA,UAAK,IAAI;AAAA,YAAE,SAAS;AAAA,YAAgB,IAAI;AAAA,YAAI,IAAI;AAAA,UAAE;AAAA,UAChD,UAAA,gBAAA,EAAC,GAAD;AAAA,YAAM,OAAM;AAAA,YAAuB,SAAQ;AAAA,YACxC,UAAA;AAAA,UACG,CAAA;AAAA,QACH,CAAA,GAGP,gBAAA,EAAC,GAAD;AAAA,UACE,IAAI;AAAA,YACF,YAAY;AAAA,YACZ,SAAS;AAAA,YACT,QAAQ;AAAA,YACR,aAAa;AAAA,YACb,cAAc;AAAA,YAEd,GAAI,EAAa,iBAAiB;AAAA,cAChC,qBAAqB;AAAA,cACrB,sBAAsB;AAAA,cACtB,WAAW;AAAA,YACb;AAAA,YACA,eAAe;AAAA,YACf,GAAG,EAAa;AAAA,UAClB;AAAA,UAfF,UAAA,CAiBE,gBAAA,EAAC,GAAD;AAAA,YAAK,IAAI;AAAA,cAAE,SAAS;AAAA,cAAQ,YAAY;AAAA,YAAE;AAAA,YAAI,UAAA;AAAA,UAAa,CAAA,GAE3D,gBAAA,EAAC,GAAD;AAAA,YAAO,IAAI;AAAA,cAAE,MAAM;AAAA,cAAS,UAAU;AAAA,YAAE;AAAA,YAAxC,UAAA;AAAA,cACG,EAAa,sBAAsB,WAAW;AAAA,cAC9C;AAAA,cACA,EAAa,sBAAsB,WAAW;AAAA,YAC1C;AAAA,UACF,CAAA,CAAA;AAAA,QACF,CAAA,CAAA;AAAA,MACJ,CAAA,CAAA;AAAA;EAET;AAEA,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,YAAY,EAAa;AAAA,MACzB,GAAG;AAAA,IACL;AAAA,IAEA,UAAA,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QACF,cAAc;AAAA,QACd,WAAW,EAAM,QAAQ,CAAA;AAAA,QACzB,OAAO;AAAA,MACT;AAAA,MALF,UAAA,CAOG,KAAe,gBAAA,EAAC,GAAD,EAAiB,YAAY,EAAc,CAAA,GAC3D,gBAAA,EAAC,GAAD;AAAA,QACE,IAAI;AAAA,UACF,YAAY;AAAA,UACZ,SAAS;AAAA,UACT,cAAc;AAAA,UACd,KAAK;AAAA,UAEL,GAAG;AAAA,UACH,OAAO;AAAA,UACP,GAAI,KAAe;AAAA,YACjB,qBAAqB;AAAA,YACrB,sBAAsB;AAAA,UACxB;AAAA,UACA,IAAK,KAAoB,KAAa,GAAM,SAAS,EACnD,eAAe,MACjB;AAAA,QACF;AAAA,QAhBF,UAAA,CAkBE,gBAAA,EAAC,GAAD;AAAA,UAAqB,MAAA;AAAA,UAAM,MAAM;AAAA,UAAwB,SAAA;AAAA,QAAU,CAAA,GAEnE,gBAAA,EAAC,GAAD,EAAA,UAAA,CACG,KAAU,QAAQ,gBAAA,EAAC,GAAD;AAAA,UAAM,SAAQ;AAAA,UAAM,UAAA,EAAe,GAAQ,QAAQ;AAAA,QAAQ,CAAA,GAC9E,gBAAA,EAAC,GAAD;AAAA,UAAO,IAAI;AAAA,YAAE,KAAK;AAAA,YAAG,eAAe;AAAA,YAAO,YAAY;AAAA,UAAS;AAAA,UAAhE,UAAA,CACG,EAAa,YACZ,gBAAA,EAAC,GAAD;AAAA,YAAM,OAAM;AAAA,YAAU,MAAM;AAAA,YAAM,MAAM,EAAa;AAAA,YAAU,MAAM;AAAA,UAAK,CAAA,GAE3E,KACC,gBAAA,EAAC,GAAD;AAAA,YAAM,OAAM;AAAA,YAAiB,SAAQ;AAAA,YAClC,UAAA;AAAA,UACG,CAAA,CAEH;AAAA,QACF,CAAA,CAAA,EAAA,CAAA,CACF;AAAA,MACF,CAAA,CAAA;AAAA;EACF,CAAA;AAEX"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layout.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/AccountBlock/layout.ts"],"sourcesContent":["import { alpha, type SxProps, type Theme } from '@mui/material/styles'\n\nimport {\n CELEBRATION_GRADIENT,\n ERROR_WASH_GRADIENT,\n WARM_LIME_ACCENT_GRADIENT,\n} from '../../../components/celebrationGradients'\n\nexport interface BlockLayoutConfig {\n background?: string\n logo_color?: string\n logo_bGcolor?: string\n logo_border_color?: string\n /** Corner radius of the icon tile (`icon_name` or an `ICO-` logo). Defaults to 6px. */\n logo_border_radius?: string\n /** Glyph size in px for an `ICO-` logo: on the confetti tile (default 24) and on the standard\n * icon tile (default `TILE_ICON_SIZE`). */\n logo_icon_size?: number\n /** mx-icons glyph shown before `sub_text` (e.g. a warning icon on overdraft_warning). */\n sub_logo?: string\n /** mx-icons glyph badged on the logo's corner (e.g. `error` on Low Account Balance's V2 tile). */\n badge?: string\n /** When true, AccountBlock renders the confetti-backed celebration card using the fields below. */\n isConfetti?: boolean\n /** Gradient wash layered over `background.paper` for the confetti card. */\n gradient?: string\n /** Which illustration sits left of the text. `logo` is the data-driven merchant/institution logo. */\n graphic?: 'paidOffCard' | 'savings' | 'logo'\n /** Amount typography variant — `h2` for milestones, `h3` for deposits. */\n amountVariant?: 'h2' | 'h3'\n /** Prefix prepended to the formatted amount, e.g. `+` for deposits. */\n amountPrefix?: string\n /** Render the colored category strip (`header_text`) at the top of the card. */\n categoryStrip?: boolean\n /** Raise the strip and body together with elevation/1. */\n cardShadow?: boolean\n /** Layout overrides for the graphic+text row (padding, gap). */\n rowSx?: SxProps\n /** Which payload field feeds the secondary line beside the amount. */\n secondarySource?: 'merchant' | 'label'\n /** Whether the secondary line sits above or below the amount. */\n secondaryPosition?: 'above' | 'below'\n /** Typography variant for the secondary line. */\n secondaryVariant?: 'body2' | 'caption'\n /** Theme color path for the secondary line. */\n secondaryColor?: string\n}\n\n/** Glyph size in px on the standard icon tile (IconComponent). */\nexport const TILE_ICON_SIZE = 30\n\n// Low Account Balance's red tile, shared by its legacy (`low_balance_alert`) and V2 (`low_balance`)\n// variant names.\nconst LOW_BALANCE_TILE: BlockLayoutConfig = {\n background: ERROR_WASH_GRADIENT,\n}\n\nexport const getLayoutConfig = (theme: Theme): Record<string, BlockLayoutConfig> => {\n return {\n overdraft_warning: {\n background: theme.palette.warning.light,\n sub_logo: 'error',\n },\n low_balance_alert: LOW_BALANCE_TILE,\n // V2 name for the same tile: content from `instance_slot.data`, the logo badged with `badge`.\n low_balance: { ...LOW_BALANCE_TILE, badge: 'error' },\n // Shared on/off-track status pair — used by Monthly Obligations Status and\n // Payday Cash Left Over Status (identical designs, different copy).\n status_off_track: {\n logo_color: 'background.paper',\n logo_bGcolor: 'error.main',\n // Figma 9936:39145: the money icon's tile has 4px corners.\n logo_border_radius: '4px',\n // Figma draws the money glyph at 24px in both status tiles (9936:39156).\n logo_icon_size: 24,\n background: ERROR_WASH_GRADIENT,\n },\n interest_charges_summary: {\n logo_color: 'text.primary',\n logo_bGcolor: alpha(theme.palette.categories?.feesCharges || '', 0.25),\n logo_border_color: 'categories.feesCharges',\n background:\n 'linear-gradient(256.82deg, rgba(227, 39, 39, 0.2) 1.86%, rgba(255, 123, 0, 0.2) 101.54%)',\n },\n // Shared deposit-celebration card — used by both the standard deposit and the emergency-fund\n // deposit beats (identical design, different copy), so one design-named variant serves both.\n deposit_received: {\n isConfetti: true,\n gradient: WARM_LIME_ACCENT_GRADIENT,\n graphic: 'logo',\n amountVariant: 'h3',\n amountPrefix: '+',\n categoryStrip: true,\n cardShadow: true,\n rowSx: { gap: 12, p: 12 },\n secondarySource: 'merchant',\n secondaryPosition: 'below',\n secondaryVariant: 'body2',\n secondaryColor: 'text.primary',\n },\n status_on_track: {\n isConfetti: true,\n gradient: WARM_LIME_ACCENT_GRADIENT,\n graphic: 'logo',\n amountVariant: 'h2',\n rowSx: { gap: 16, p: 16 },\n secondarySource: 'label',\n secondaryPosition: 'below',\n secondaryVariant: 'caption',\n secondaryColor: 'text.secondary',\n },\n payoff_celebration: {\n isConfetti: true,\n gradient: CELEBRATION_GRADIENT,\n graphic: 'paidOffCard',\n amountVariant: 'h2',\n rowSx: { gap:
|
|
1
|
+
{"version":3,"file":"layout.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/AccountBlock/layout.ts"],"sourcesContent":["import { alpha, type SxProps, type Theme } from '@mui/material/styles'\n\nimport {\n CELEBRATION_GRADIENT,\n ERROR_WASH_GRADIENT,\n WARM_LIME_ACCENT_GRADIENT,\n} from '../../../components/celebrationGradients'\n\nexport interface BlockLayoutConfig {\n background?: string\n logo_color?: string\n logo_bGcolor?: string\n logo_border_color?: string\n /** Corner radius of the icon tile (`icon_name` or an `ICO-` logo). Defaults to 6px. */\n logo_border_radius?: string\n /** Glyph size in px for an `ICO-` logo: on the confetti tile (default 24) and on the standard\n * icon tile (default `TILE_ICON_SIZE`). */\n logo_icon_size?: number\n /** mx-icons glyph shown before `sub_text` (e.g. a warning icon on overdraft_warning). */\n sub_logo?: string\n /** mx-icons glyph badged on the logo's corner (e.g. `error` on Low Account Balance's V2 tile). */\n badge?: string\n /** When true, AccountBlock renders the confetti-backed celebration card using the fields below. */\n isConfetti?: boolean\n /** Gradient wash layered over `background.paper` for the confetti card. */\n gradient?: string\n /** Which illustration sits left of the text. `logo` is the data-driven merchant/institution logo. */\n graphic?: 'paidOffCard' | 'savings' | 'logo'\n /** Amount typography variant — `h2` for milestones, `h3` for deposits. */\n amountVariant?: 'h2' | 'h3'\n /** Prefix prepended to the formatted amount, e.g. `+` for deposits. */\n amountPrefix?: string\n /** Render the colored category strip (`header_text`) at the top of the card. */\n categoryStrip?: boolean\n /** Raise the strip and body together with elevation/1. */\n cardShadow?: boolean\n /** Layout overrides for the graphic+text row (padding, gap). */\n rowSx?: SxProps\n /** Which payload field feeds the secondary line beside the amount. */\n secondarySource?: 'merchant' | 'label'\n /** Whether the secondary line sits above or below the amount. */\n secondaryPosition?: 'above' | 'below'\n /** Typography variant for the secondary line. */\n secondaryVariant?: 'body2' | 'caption'\n /** Theme color path for the secondary line. */\n secondaryColor?: string\n}\n\n/** Glyph size in px on the standard icon tile (IconComponent). */\nexport const TILE_ICON_SIZE = 30\n\n// Low Account Balance's red tile, shared by its legacy (`low_balance_alert`) and V2 (`low_balance`)\n// variant names.\nconst LOW_BALANCE_TILE: BlockLayoutConfig = {\n background: ERROR_WASH_GRADIENT,\n}\n\nexport const getLayoutConfig = (theme: Theme): Record<string, BlockLayoutConfig> => {\n return {\n overdraft_warning: {\n background: theme.palette.warning.light,\n sub_logo: 'error',\n },\n low_balance_alert: LOW_BALANCE_TILE,\n // V2 name for the same tile: content from `instance_slot.data`, the logo badged with `badge`.\n low_balance: { ...LOW_BALANCE_TILE, badge: 'error' },\n // Shared on/off-track status pair — used by Monthly Obligations Status and\n // Payday Cash Left Over Status (identical designs, different copy).\n status_off_track: {\n logo_color: 'background.paper',\n logo_bGcolor: 'error.main',\n // Figma 9936:39145: the money icon's tile has 4px corners.\n logo_border_radius: '4px',\n // Figma draws the money glyph at 24px in both status tiles (9936:39156).\n logo_icon_size: 24,\n background: ERROR_WASH_GRADIENT,\n },\n interest_charges_summary: {\n logo_color: 'text.primary',\n logo_bGcolor: alpha(theme.palette.categories?.feesCharges || '', 0.25),\n logo_border_color: 'categories.feesCharges',\n background:\n 'linear-gradient(256.82deg, rgba(227, 39, 39, 0.2) 1.86%, rgba(255, 123, 0, 0.2) 101.54%)',\n },\n // Shared deposit-celebration card — used by both the standard deposit and the emergency-fund\n // deposit beats (identical design, different copy), so one design-named variant serves both.\n deposit_received: {\n isConfetti: true,\n gradient: WARM_LIME_ACCENT_GRADIENT,\n graphic: 'logo',\n amountVariant: 'h3',\n amountPrefix: '+',\n categoryStrip: true,\n cardShadow: true,\n rowSx: { gap: 12, p: 12 },\n secondarySource: 'merchant',\n secondaryPosition: 'below',\n secondaryVariant: 'body2',\n secondaryColor: 'text.primary',\n },\n status_on_track: {\n isConfetti: true,\n gradient: WARM_LIME_ACCENT_GRADIENT,\n graphic: 'logo',\n amountVariant: 'h2',\n rowSx: { gap: 16, p: 16 },\n secondarySource: 'label',\n secondaryPosition: 'below',\n secondaryVariant: 'caption',\n secondaryColor: 'text.secondary',\n },\n payoff_celebration: {\n isConfetti: true,\n gradient: CELEBRATION_GRADIENT,\n graphic: 'paidOffCard',\n amountVariant: 'h2',\n rowSx: { gap: 16, px: 24, py: 16 },\n secondarySource: 'label',\n secondaryPosition: 'below',\n secondaryVariant: 'caption',\n secondaryColor: 'text.secondary',\n },\n savings_deposit: {\n isConfetti: true,\n gradient: CELEBRATION_GRADIENT,\n graphic: 'savings',\n amountVariant: 'h2',\n rowSx: { gap: 16, p: 16 },\n secondarySource: 'label',\n secondaryPosition: 'above',\n secondaryVariant: 'body2',\n secondaryColor: 'text.primary',\n },\n // Neutral fallback for an unknown/unmatched variant: renders the plain standard card (no\n // confetti, no special background). `resolveVariantConfig` warns before falling back here.\n default: {},\n }\n}\n"],"mappings":";;AAqDA,IAAM,IAAsC,EAC1C,YAAY,EACd,GAEa,IAAA,CAAmB,OACvB;AAAA,EACL,mBAAmB;AAAA,IACjB,YAAY,EAAM,QAAQ,QAAQ;AAAA,IAClC,UAAU;AAAA,EACZ;AAAA,EACA,mBAAmB;AAAA,EAEnB,aAAa;AAAA,IAAE,GAAG;AAAA,IAAkB,OAAO;AAAA,EAAQ;AAAA,EAGnD,kBAAkB;AAAA,IAChB,YAAY;AAAA,IACZ,cAAc;AAAA,IAEd,oBAAoB;AAAA,IAEpB,gBAAgB;AAAA,IAChB,YAAY;AAAA,EACd;AAAA,EACA,0BAA0B;AAAA,IACxB,YAAY;AAAA,IACZ,cAAc,EAAM,EAAM,QAAQ,YAAY,eAAe,IAAI,IAAI;AAAA,IACrE,mBAAmB;AAAA,IACnB,YACE;AAAA,EACJ;AAAA,EAGA,kBAAkB;AAAA,IAChB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,SAAS;AAAA,IACT,eAAe;AAAA,IACf,cAAc;AAAA,IACd,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,OAAO;AAAA,MAAE,KAAK;AAAA,MAAI,GAAG;AAAA,IAAG;AAAA,IACxB,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,IACnB,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,EAClB;AAAA,EACA,iBAAiB;AAAA,IACf,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,SAAS;AAAA,IACT,eAAe;AAAA,IACf,OAAO;AAAA,MAAE,KAAK;AAAA,MAAI,GAAG;AAAA,IAAG;AAAA,IACxB,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,IACnB,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,EAClB;AAAA,EACA,oBAAoB;AAAA,IAClB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,SAAS;AAAA,IACT,eAAe;AAAA,IACf,OAAO;AAAA,MAAE,KAAK;AAAA,MAAI,IAAI;AAAA,MAAI,IAAI;AAAA,IAAG;AAAA,IACjC,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,IACnB,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,EAClB;AAAA,EACA,iBAAiB;AAAA,IACf,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,SAAS;AAAA,IACT,eAAe;AAAA,IACf,OAAO;AAAA,MAAE,KAAK;AAAA,MAAI,GAAG;AAAA,IAAG;AAAA,IACxB,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,IACnB,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,EAClB;AAAA,EAGA,SAAS,CAAC;AACZ"}
|
|
@@ -2,7 +2,7 @@ import { useBeatActions as s } from "../beatActions.es.js";
|
|
|
2
2
|
import { InsightOptionsMenu as m } from "./InsightOptionsMenu.es.js";
|
|
3
3
|
import a from "./SubHeader.es.js";
|
|
4
4
|
import e from "@mui/material/Stack";
|
|
5
|
-
import { H3 as
|
|
5
|
+
import { H3 as c } from "@mxenabled/mxui";
|
|
6
6
|
import { jsx as r, jsxs as o } from "react/jsx-runtime";
|
|
7
7
|
var g = ({ isMini: n, subtitle: t, title: i }) => {
|
|
8
8
|
const { onMenuAction: p } = s();
|
|
@@ -20,7 +20,10 @@ var g = ({ isMini: n, subtitle: t, title: i }) => {
|
|
|
20
20
|
flexDirection: "row",
|
|
21
21
|
justifyContent: "space-between"
|
|
22
22
|
},
|
|
23
|
-
children: [/* @__PURE__ */ r(
|
|
23
|
+
children: [/* @__PURE__ */ r(c, {
|
|
24
|
+
truncate: !0,
|
|
25
|
+
children: i
|
|
26
|
+
}), !n && p && /* @__PURE__ */ r(m, {})]
|
|
24
27
|
}), t && /* @__PURE__ */ r(a, { subtitle: t })]
|
|
25
28
|
});
|
|
26
29
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.es.js","names":[],"sources":["../../../src/insights-v2/components/Header.tsx"],"sourcesContent":["import Stack from '@mui/material/Stack'\n\nimport { H3 } from '@mxenabled/mxui'\n\nimport SubHeader from './SubHeader'\nimport InsightOptionsMenu from './InsightOptionsMenu'\nimport { useBeatActions } from '../beatActions'\nimport type { Subtitle } from '../../core'\n\ninterface HeaderProps {\n isMini: boolean\n subtitle?: Subtitle\n title: string\n}\n\nconst Header = ({ isMini, subtitle, title }: HeaderProps) => {\n // The overflow menu appears only when the host wired a menu handler and this\n // isn't the compact/mini layout. Handlers are delivered via context.\n const { onMenuAction } = useBeatActions()\n\n return (\n <Stack sx={{ gap: 4, pb: 12, pl: 16, pr: 16, pt: 16 }}>\n <Stack\n sx={{ alignItems: 'flex-start', flexDirection: 'row', justifyContent: 'space-between' }}\n >\n <H3>{title}</H3>\n {!isMini && onMenuAction && <InsightOptionsMenu />}\n </Stack>\n\n {/* Sub Header */}\n {subtitle && <SubHeader subtitle={subtitle} />}\n </Stack>\n )\n}\n\nexport default Header\n"],"mappings":";;;;;;AAeA,IAAM,IAAA,CAAU,EAAE,QAAA,GAAQ,UAAA,GAAU,OAAA,EAAA,MAAyB;AAG3D,QAAM,EAAE,cAAA,EAAA,IAAiB,EAAe;AAExC,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI;AAAA,MAAE,KAAK;AAAA,MAAG,IAAI;AAAA,MAAI,IAAI;AAAA,MAAI,IAAI;AAAA,MAAI,IAAI;AAAA,IAAG;AAAA,IAApD,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QAAE,YAAY;AAAA,QAAc,eAAe;AAAA,QAAO,gBAAgB;AAAA,MAAgB;AAAA,MADxF,UAAA,CAGE,gBAAA,EAAC,GAAD,
|
|
1
|
+
{"version":3,"file":"Header.es.js","names":[],"sources":["../../../src/insights-v2/components/Header.tsx"],"sourcesContent":["import Stack from '@mui/material/Stack'\n\nimport { H3 } from '@mxenabled/mxui'\n\nimport SubHeader from './SubHeader'\nimport InsightOptionsMenu from './InsightOptionsMenu'\nimport { useBeatActions } from '../beatActions'\nimport type { Subtitle } from '../../core'\n\ninterface HeaderProps {\n isMini: boolean\n subtitle?: Subtitle\n title: string\n}\n\nconst Header = ({ isMini, subtitle, title }: HeaderProps) => {\n // The overflow menu appears only when the host wired a menu handler and this\n // isn't the compact/mini layout. Handlers are delivered via context.\n const { onMenuAction } = useBeatActions()\n\n return (\n <Stack sx={{ gap: 4, pb: 12, pl: 16, pr: 16, pt: 16 }}>\n <Stack\n sx={{ alignItems: 'flex-start', flexDirection: 'row', justifyContent: 'space-between' }}\n >\n <H3 truncate={true}>{title}</H3>\n {!isMini && onMenuAction && <InsightOptionsMenu />}\n </Stack>\n\n {/* Sub Header */}\n {subtitle && <SubHeader subtitle={subtitle} />}\n </Stack>\n )\n}\n\nexport default Header\n"],"mappings":";;;;;;AAeA,IAAM,IAAA,CAAU,EAAE,QAAA,GAAQ,UAAA,GAAU,OAAA,EAAA,MAAyB;AAG3D,QAAM,EAAE,cAAA,EAAA,IAAiB,EAAe;AAExC,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI;AAAA,MAAE,KAAK;AAAA,MAAG,IAAI;AAAA,MAAI,IAAI;AAAA,MAAI,IAAI;AAAA,MAAI,IAAI;AAAA,IAAG;AAAA,IAApD,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QAAE,YAAY;AAAA,QAAc,eAAe;AAAA,QAAO,gBAAgB;AAAA,MAAgB;AAAA,MADxF,UAAA,CAGE,gBAAA,EAAC,GAAD;AAAA,QAAI,UAAU;AAAA,QAAO,UAAA;AAAA,MAAU,CAAA,GAC9B,CAAC,KAAU,KAAgB,gBAAA,EAAC,GAAD,CAAqB,CAAA,CAC5C;AAAA,IAGN,CAAA,GAAA,KAAY,gBAAA,EAAC,GAAD,EAAqB,UAAA,EAAW,CAAA,CACxC;AAAA;AAEX"}
|