@12-apps/ui 6.93.1 → 6.93.2

package/dist/_internal/components/data-display/AsyncStateContainer/AsyncStateContainer.js

@@ -1,9 +1,9 @@
 import {
   AsyncStateContainer,
   AsyncStateContainer_default
-} from "../../../../chunk-7F6D73NL.js";
-import "../../../../chunk-HBH7V3IP.js";
-import "../../../../chunk-TLGGVE56.js";
+} from "../../../../chunk-RLTGD5WJ.js";
+import "../../../../chunk-I6IFUFLW.js";
+import "../../../../chunk-OTVOQHZB.js";
 import "../../../../chunk-3Z6JX7UN.js";
 import "../../../../chunk-7DFEKTT7.js";
 import "../../../../chunk-YSTHOE66.js";

package/dist/_internal/components/data-display/ErrorState/ErrorState.js

@@ -1,8 +1,8 @@
 import {
   ErrorState,
   ErrorState_default
-} from "../../../../chunk-HBH7V3IP.js";
-import "../../../../chunk-TLGGVE56.js";
+} from "../../../../chunk-I6IFUFLW.js";
+import "../../../../chunk-OTVOQHZB.js";
 import "../../../../chunk-XOXXG7Q5.js";
 import "../../../../chunk-TYJR4GOF.js";
 import "../../../../chunk-YKCAJ2TN.js";

package/dist/_internal/components/data-display/ErrorState/ErrorState.metrics.js

@@ -10,9 +10,10 @@ import {
   ERROR_TEXT_GAP_UNITS,
   RETRY_BUTTON,
   RETRY_MARGIN_TOP_UNITS,
+  RETRY_MIN_HEIGHT,
   RETRY_MIN_WIDTH,
   errorStatePalette
-} from "../../../../chunk-TLGGVE56.js";
+} from "../../../../chunk-OTVOQHZB.js";
 import "../../../../chunk-PZ5AY32C.js";
 export {
   ERROR_ICON_BOX,
@@ -26,6 +27,7 @@ export {
   ERROR_TEXT_GAP_UNITS,
   RETRY_BUTTON,
   RETRY_MARGIN_TOP_UNITS,
+  RETRY_MIN_HEIGHT,
   RETRY_MIN_WIDTH,
   errorStatePalette
 };

package/dist/_internal/components/data-display/index.js

@@ -16,12 +16,12 @@ import {
 import "../../../chunk-SX3E6UC2.js";
 import {
   AsyncStateContainer
-} from "../../../chunk-7F6D73NL.js";
+} from "../../../chunk-RLTGD5WJ.js";
 import "../../../chunk-UCYU56FO.js";
 import {
   ErrorState
-} from "../../../chunk-HBH7V3IP.js";
-import "../../../chunk-TLGGVE56.js";
+} from "../../../chunk-I6IFUFLW.js";
+import "../../../chunk-OTVOQHZB.js";
 import "../../../chunk-SJXSWVJG.js";
 import {
   LoadingState

package/dist/_internal/components/index.js

@@ -447,12 +447,12 @@ import {
 import "../../chunk-SX3E6UC2.js";
 import {
   AsyncStateContainer
-} from "../../chunk-7F6D73NL.js";
+} from "../../chunk-RLTGD5WJ.js";
 import "../../chunk-UCYU56FO.js";
 import {
   ErrorState
-} from "../../chunk-HBH7V3IP.js";
-import "../../chunk-TLGGVE56.js";
+} from "../../chunk-I6IFUFLW.js";
+import "../../chunk-OTVOQHZB.js";
 import "../../chunk-SJXSWVJG.js";
 import {
   LoadingState

package/dist/{chunk-HBH7V3IP.js → chunk-I6IFUFLW.js}

@@ -9,8 +9,9 @@ import {
   ERROR_STATE_PADDING_UNITS,
   ERROR_TEXT_GAP_UNITS,
   RETRY_MARGIN_TOP_UNITS,
+  RETRY_MIN_HEIGHT,
   RETRY_MIN_WIDTH
-} from "./chunk-TLGGVE56.js";
+} from "./chunk-OTVOQHZB.js";
 import {
   EN_US_UI_LABELS
 } from "./chunk-XOXXG7Q5.js";
@@ -135,7 +136,8 @@ var ErrorState = React.memo((props) => {
             "data-testid": testId("retry-button"),
             sx: {
               mt: theme.spacing(RETRY_MARGIN_TOP_UNITS),
-              minWidth: rem(theme, RETRY_MIN_WIDTH)
+              minWidth: rem(theme, RETRY_MIN_WIDTH),
+              minHeight: rem(theme, RETRY_MIN_HEIGHT)
             },
             children: retryLabel
           }
@@ -151,4 +153,4 @@ export {
   ErrorState,
   ErrorState_default
 };
-//# sourceMappingURL=chunk-HBH7V3IP.js.map
+//# sourceMappingURL=chunk-I6IFUFLW.js.map

package/dist/chunk-I6IFUFLW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/ErrorState/ErrorState.tsx"],"sourcesContent":["import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';\nimport RefreshIcon from '@mui/icons-material/Refresh';\nimport WarningAmberIcon from '@mui/icons-material/WarningAmber';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport Stack from '@mui/material/Stack/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport {\n  ERROR_ICON_BOX,\n  ERROR_ICON_BOX_OPACITY,\n  ERROR_ICON_SIZE,\n  ERROR_MESSAGE_LINE_HEIGHT,\n  ERROR_MESSAGE_MAX_WIDTH,\n  ERROR_STATE_GAP_UNITS,\n  ERROR_STATE_MIN_HEIGHT,\n  ERROR_STATE_PADDING_UNITS,\n  ERROR_TEXT_GAP_UNITS,\n  RETRY_MARGIN_TOP_UNITS,\n  RETRY_MIN_HEIGHT,\n  RETRY_MIN_WIDTH,\n} from './ErrorState.metrics';\nimport type { ErrorStateProps, ErrorStateSeverity } from './ErrorState.types';\nimport { resolveTestId } from '../../../platform/test-id';\nimport { rem, sxRem } from '../../../tokens/relative';\nimport { EN_US_UI_LABELS } from '../../../en-US.labels';\n\nconst makeTestId =\n  (dataTestId?: string) =>\n  (suffix: string): string =>\n    dataTestId ? `${dataTestId}-${suffix}` : `error-state-${suffix}`;\n\nconst paletteFor = (theme: Theme, severity: ErrorStateSeverity) =>\n  severity === 'error' ? theme.palette.error : theme.palette.warning;\n\nconst ErrorIcon: React.FC<{\n  severity: ErrorStateSeverity;\n  icon?: React.ReactNode;\n  testId: string;\n}> = ({ severity, icon, testId }) => {\n  const theme = useTheme();\n  const color = paletteFor(theme, severity);\n  const Fallback = severity === 'error' ? ErrorOutlineIcon : WarningAmberIcon;\n\n  return (\n    <Box\n      data-testid={testId}\n      sx={{\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        width: rem(theme, ERROR_ICON_BOX),\n        height: rem(theme, ERROR_ICON_BOX),\n        borderRadius: '50%',\n        backgroundColor: color.light,\n        opacity: ERROR_ICON_BOX_OPACITY,\n      }}\n    >\n      {icon || <Fallback sx={{ fontSize: sxRem(ERROR_ICON_SIZE), color: color.main }} />}\n    </Box>\n  );\n};\n\nconst ErrorText: React.FC<{\n  title?: string;\n  message: string;\n  titleId: string;\n  testId: (suffix: string) => string;\n}> = ({ title, message, titleId, testId }) => {\n  const theme = useTheme();\n\n  return (\n    <Stack spacing={ERROR_TEXT_GAP_UNITS} alignItems=\"center\">\n      {title && (\n        <Typography\n          id={titleId}\n          variant=\"h6\"\n          component=\"h3\"\n          data-testid={testId('title')}\n          sx={{\n            fontWeight: theme.typography.fontWeightMedium,\n            color: theme.palette.text.primary,\n          }}\n        >\n          {title}\n        </Typography>\n      )}\n\n      <Typography\n        id={`${titleId}-message`}\n        variant=\"body2\"\n        color=\"text.secondary\"\n        data-testid={testId('message')}\n        sx={{\n          maxWidth: rem(theme, ERROR_MESSAGE_MAX_WIDTH),\n          lineHeight: ERROR_MESSAGE_LINE_HEIGHT,\n        }}\n      >\n        {message}\n      </Typography>\n    </Stack>\n  );\n};\n\nexport const ErrorState: React.FC<ErrorStateProps> = React.memo((props) => {\n  const {\n    message,\n    title,\n    onRetry,\n    retryLabel = EN_US_UI_LABELS.errorState.retry,\n    severity = 'error',\n    icon,\n    className,\n  } = props;\n  const theme = useTheme();\n  const titleId = React.useId();\n  // `dataTestId` is the documented spelling; `testID`, the shared contract's\n  // other one, resolves to the same id.\n  const dataTestId = resolveTestId(props);\n  const testId = makeTestId(dataTestId);\n\n  return (\n    <Box\n      role=\"alert\"\n      aria-labelledby={title ? titleId : undefined}\n      aria-describedby={`${titleId}-message`}\n      className={className}\n      data-testid={dataTestId || 'error-state'}\n      sx={{\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'center',\n        justifyContent: 'center',\n        textAlign: 'center',\n        padding: theme.spacing(ERROR_STATE_PADDING_UNITS),\n        minHeight: rem(theme, ERROR_STATE_MIN_HEIGHT),\n        gap: theme.spacing(ERROR_STATE_GAP_UNITS),\n      }}\n    >\n      <ErrorIcon severity={severity} icon={icon} testId={testId('icon')} />\n\n      <ErrorText title={title} message={message} titleId={titleId} testId={testId} />\n\n      {onRetry && (\n        <Button\n          variant=\"outlined\"\n          color={severity}\n          onClick={onRetry}\n          startIcon={<RefreshIcon />}\n          data-testid={testId('retry-button')}\n          sx={{\n            mt: theme.spacing(RETRY_MARGIN_TOP_UNITS),\n            minWidth: rem(theme, RETRY_MIN_WIDTH),\n            minHeight: rem(theme, RETRY_MIN_HEIGHT),\n          }}\n        >\n          {retryLabel}\n        </Button>\n      )}\n    </Box>\n  );\n});\n\nErrorState.displayName = 'ErrorState';\n\nexport default ErrorState;\n"],"mappings":"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","names":[]}

package/dist/{chunk-TLGGVE56.js → chunk-OTVOQHZB.js}

@@ -10,6 +10,7 @@ var ERROR_MESSAGE_MAX_WIDTH = 400;
 var ERROR_MESSAGE_LINE_HEIGHT = 1.6;
 var RETRY_MARGIN_TOP_UNITS = 1;
 var RETRY_MIN_WIDTH = 120;
+var RETRY_MIN_HEIGHT = 40;
 var RETRY_BUTTON = {
   paddingVertical: 5,
   paddingHorizontal: 15,
@@ -31,7 +32,8 @@ export {
   ERROR_MESSAGE_LINE_HEIGHT,
   RETRY_MARGIN_TOP_UNITS,
   RETRY_MIN_WIDTH,
+  RETRY_MIN_HEIGHT,
   RETRY_BUTTON,
   errorStatePalette
 };
-//# sourceMappingURL=chunk-TLGGVE56.js.map
+//# sourceMappingURL=chunk-OTVOQHZB.js.map

package/dist/{chunk-TLGGVE56.js.map → chunk-OTVOQHZB.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/data-display/ErrorState/ErrorState.metrics.ts"],"sourcesContent":["import type { ErrorStateSeverity } from './ErrorState.base';\nimport type { UiPaletteColor, UiTheme } from '../../../tokens/theme';\n\n/**\n * THE NUMBERS BOTH `ErrorState` RENDERERS DRAW WITH.\n *\n * `ErrorState.tsx` (MUI) and `ErrorState.native.tsx` (React Native) read this\n * one table. Spacing is in SPACING UNITS where the web writes\n * `theme.spacing(n)`; everything else is px or a ratio.\n */\n\n/** The region: a centred column, `theme.spacing(6)` of padding, at least 200px tall, its parts 16px apart. */\nexport const ERROR_STATE_PADDING_UNITS = 6;\nexport const ERROR_STATE_MIN_HEIGHT = 200;\nexport const ERROR_STATE_GAP_UNITS = 2;\n\n/** The glyph sits in an 80px disc of the severity's `light` shade at 0.9 opacity. */\nexport const ERROR_ICON_BOX = 80;\nexport const ERROR_ICON_BOX_OPACITY = 0.9;\nexport const ERROR_ICON_SIZE = 48;\n\n/** Title and message are 8px apart; the message wraps at 400px on a 1.6 line height. */\nexport const ERROR_TEXT_GAP_UNITS = 1;\nexport const ERROR_MESSAGE_MAX_WIDTH = 400;\nexport const ERROR_MESSAGE_LINE_HEIGHT = 1.6;\n\n/** The retry button: 8px below the text, no narrower than 120px. */\nexport const RETRY_MARGIN_TOP_UNITS = 1;\nexport const RETRY_MIN_WIDTH = 120;\n/**\n * The web retry IS MUI's medium outlined `Button`: 5px 15px inside its 1px\n * border, 14px type, the theme's radius, a 20px start icon. The native side\n * sizes the house `Button` to these.\n */\nexport const RETRY_BUTTON = {\n  paddingVertical: 5,\n  paddingHorizontal: 15,\n  iconSize: 20,\n} as const;\n\n/** `error` is MUI's name for the `danger` slot; `warning` is its own. */\nexport function errorStatePalette(theme: UiTheme, severity: ErrorStateSeverity): UiPaletteColor {\n  return severity === 'error' ? theme.palette.danger : theme.palette.warning;\n}\n"],"mappings":";AAYO,IAAM,4BAA4B;AAClC,IAAM,yBAAyB;AAC/B,IAAM,wBAAwB;AAG9B,IAAM,iBAAiB;AACvB,IAAM,yBAAyB;AAC/B,IAAM,kBAAkB;AAGxB,IAAM,uBAAuB;AAC7B,IAAM,0BAA0B;AAChC,IAAM,4BAA4B;AAGlC,IAAM,yBAAyB;AAC/B,IAAM,kBAAkB;AAMxB,IAAM,eAAe;AAAA,EAC1B,iBAAiB;AAAA,EACjB,mBAAmB;AAAA,EACnB,UAAU;AACZ;AAGO,SAAS,kBAAkB,OAAgB,UAA8C;AAC9F,SAAO,aAAa,UAAU,MAAM,QAAQ,SAAS,MAAM,QAAQ;AACrE;","names":[]}
+{"version":3,"sources":["../src/components/data-display/ErrorState/ErrorState.metrics.ts"],"sourcesContent":["import type { ErrorStateSeverity } from './ErrorState.base';\nimport type { UiPaletteColor, UiTheme } from '../../../tokens/theme';\n\n/**\n * THE NUMBERS BOTH `ErrorState` RENDERERS DRAW WITH.\n *\n * `ErrorState.tsx` (MUI) and `ErrorState.native.tsx` (React Native) read this\n * one table. Spacing is in SPACING UNITS where the web writes\n * `theme.spacing(n)`; everything else is px or a ratio.\n */\n\n/** The region: a centred column, `theme.spacing(6)` of padding, at least 200px tall, its parts 16px apart. */\nexport const ERROR_STATE_PADDING_UNITS = 6;\nexport const ERROR_STATE_MIN_HEIGHT = 200;\nexport const ERROR_STATE_GAP_UNITS = 2;\n\n/** The glyph sits in an 80px disc of the severity's `light` shade at 0.9 opacity. */\nexport const ERROR_ICON_BOX = 80;\nexport const ERROR_ICON_BOX_OPACITY = 0.9;\nexport const ERROR_ICON_SIZE = 48;\n\n/** Title and message are 8px apart; the message wraps at 400px on a 1.6 line height. */\nexport const ERROR_TEXT_GAP_UNITS = 1;\nexport const ERROR_MESSAGE_MAX_WIDTH = 400;\nexport const ERROR_MESSAGE_LINE_HEIGHT = 1.6;\n\n/** The retry button: 8px below the text, no narrower than 120px. */\nexport const RETRY_MARGIN_TOP_UNITS = 1;\nexport const RETRY_MIN_WIDTH = 120;\n/**\n * The web retry is never shorter than the 40px tap floor. MUI's medium outlined\n * button is 37px tall on its own (FUT-1310), so the floor is stated, not inherited.\n */\nexport const RETRY_MIN_HEIGHT = 40;\n/**\n * The web retry IS MUI's medium outlined `Button`: 5px 15px inside its 1px\n * border, 14px type, the theme's radius, a 20px start icon. The native side\n * sizes the house `Button` to these.\n */\nexport const RETRY_BUTTON = {\n  paddingVertical: 5,\n  paddingHorizontal: 15,\n  iconSize: 20,\n} as const;\n\n/** `error` is MUI's name for the `danger` slot; `warning` is its own. */\nexport function errorStatePalette(theme: UiTheme, severity: ErrorStateSeverity): UiPaletteColor {\n  return severity === 'error' ? theme.palette.danger : theme.palette.warning;\n}\n"],"mappings":";AAYO,IAAM,4BAA4B;AAClC,IAAM,yBAAyB;AAC/B,IAAM,wBAAwB;AAG9B,IAAM,iBAAiB;AACvB,IAAM,yBAAyB;AAC/B,IAAM,kBAAkB;AAGxB,IAAM,uBAAuB;AAC7B,IAAM,0BAA0B;AAChC,IAAM,4BAA4B;AAGlC,IAAM,yBAAyB;AAC/B,IAAM,kBAAkB;AAKxB,IAAM,mBAAmB;AAMzB,IAAM,eAAe;AAAA,EAC1B,iBAAiB;AAAA,EACjB,mBAAmB;AAAA,EACnB,UAAU;AACZ;AAGO,SAAS,kBAAkB,OAAgB,UAA8C;AAC9F,SAAO,aAAa,UAAU,MAAM,QAAQ,SAAS,MAAM,QAAQ;AACrE;","names":[]}

package/dist/{chunk-7F6D73NL.js → chunk-RLTGD5WJ.js}

@@ -1,6 +1,6 @@
 import {
   ErrorState
-} from "./chunk-HBH7V3IP.js";
+} from "./chunk-I6IFUFLW.js";
 import {
   LoadingState
 } from "./chunk-3Z6JX7UN.js";
@@ -65,4 +65,4 @@ export {
   AsyncStateContainer,
   AsyncStateContainer_default
 };
-//# sourceMappingURL=chunk-7F6D73NL.js.map
+//# sourceMappingURL=chunk-RLTGD5WJ.js.map

package/dist/data-display/AsyncStateContainer.js

@@ -1,9 +1,9 @@
 import "../chunk-SX3E6UC2.js";
 import {
   AsyncStateContainer
-} from "../chunk-7F6D73NL.js";
-import "../chunk-HBH7V3IP.js";
-import "../chunk-TLGGVE56.js";
+} from "../chunk-RLTGD5WJ.js";
+import "../chunk-I6IFUFLW.js";
+import "../chunk-OTVOQHZB.js";
 import "../chunk-3Z6JX7UN.js";
 import "../chunk-7DFEKTT7.js";
 import "../chunk-YSTHOE66.js";

package/dist/data-display/ErrorState.js

@@ -1,8 +1,8 @@
 import "../chunk-UCYU56FO.js";
 import {
   ErrorState
-} from "../chunk-HBH7V3IP.js";
-import "../chunk-TLGGVE56.js";
+} from "../chunk-I6IFUFLW.js";
+import "../chunk-OTVOQHZB.js";
 import "../chunk-XOXXG7Q5.js";
 import "../chunk-TYJR4GOF.js";
 import "../chunk-YKCAJ2TN.js";

package/dist/native/data-display/ErrorState.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/data-display/ErrorState/ErrorState.native.tsx","../../../src/components/data-display/ErrorState/ErrorState.metrics.ts"],"sourcesContent":["import * as React from 'react';\nimport { StyleSheet, Text as RNText, View, type TextStyle, type ViewStyle } from 'react-native';\n\nimport {\n  ERROR_ICON_BOX,\n  ERROR_ICON_BOX_OPACITY,\n  ERROR_ICON_SIZE,\n  ERROR_MESSAGE_LINE_HEIGHT,\n  ERROR_MESSAGE_MAX_WIDTH,\n  ERROR_STATE_GAP_UNITS,\n  ERROR_STATE_MIN_HEIGHT,\n  ERROR_STATE_PADDING_UNITS,\n  ERROR_TEXT_GAP_UNITS,\n  RETRY_BUTTON,\n  RETRY_MARGIN_TOP_UNITS,\n  RETRY_MIN_WIDTH,\n  errorStatePalette,\n} from './ErrorState.metrics';\nimport type { ErrorStateProps, ErrorStateSeverity } from './ErrorState.types.native';\nimport { Icon } from '../../../icons/Icon.native';\nimport { webAria } from '../../../platform/aria';\nimport { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\nimport { MUI_FONT_WEIGHT_MEDIUM, MUI_TYPE, muiTypeStyle } from '../../../tokens/mui-type';\nimport type { UiTheme } from '../../../tokens/theme';\nimport { Button } from '../../form/Button/Button.native';\nimport { EN_US_UI_LABELS } from '../../../en-US.labels';\n\nconst makeTestId =\n  (dataTestId?: string) =>\n  (suffix: string): string =>\n    dataTestId ? `${dataTestId}-${suffix}` : `error-state-${suffix}`;\n\n/** MUI's `h6` as an `h3`, medium weight, in the body ink — what the web `Typography` renders. */\nexport function titleStyle(theme: UiTheme): TextStyle {\n  return {\n    ...muiTypeStyle(theme, 'h6'),\n    fontWeight: `${MUI_FONT_WEIGHT_MEDIUM}`,\n    color: theme.palette.text.primary,\n    textAlign: 'center',\n  };\n}\n\n/** MUI's `body2` on a 1.6 line height, muted, wrapping at 400px. */\nexport function messageStyle(theme: UiTheme): TextStyle {\n  return {\n    ...muiTypeStyle(theme, 'body2'),\n    lineHeight: MUI_TYPE.body2.fontSize * ERROR_MESSAGE_LINE_HEIGHT,\n    color: theme.palette.text.secondary,\n    maxWidth: ERROR_MESSAGE_MAX_WIDTH,\n    textAlign: 'center',\n  };\n}\n\n/** The 80px disc behind the glyph, in the severity's `light` shade. */\nexport function iconBoxStyle(theme: UiTheme, severity: ErrorStateSeverity): ViewStyle {\n  return {\n    width: ERROR_ICON_BOX,\n    height: ERROR_ICON_BOX,\n    borderRadius: ERROR_ICON_BOX / 2,\n    backgroundColor: errorStatePalette(theme, severity).light,\n    opacity: ERROR_ICON_BOX_OPACITY,\n    alignItems: 'center',\n    justifyContent: 'center',\n  };\n}\n\n/** The web retry is MUI's medium outlined button; the house `Button` is sized to it here. */\nexport function retryStyle(theme: UiTheme): ViewStyle {\n  return {\n    marginTop: theme.spacing(RETRY_MARGIN_TOP_UNITS),\n    minWidth: RETRY_MIN_WIDTH,\n    paddingVertical: RETRY_BUTTON.paddingVertical,\n    paddingHorizontal: RETRY_BUTTON.paddingHorizontal,\n    borderRadius: theme.radius.md,\n  };\n}\n\nfunction ErrorIcon({\n  severity,\n  icon,\n  testId,\n}: {\n  severity: ErrorStateSeverity;\n  icon?: React.ReactNode;\n  testId: string;\n}): React.JSX.Element {\n  const theme = useUiTheme();\n  const glyph = severity === 'error' ? 'ErrorOutline' : 'WarningAmber';\n  return (\n    <View testID={testId} style={iconBoxStyle(theme, severity)}>\n      {icon || <Icon name={glyph} size={ERROR_ICON_SIZE} color={errorStatePalette(theme, severity).main} />}\n    </View>\n  );\n}\n\nfunction ErrorText({\n  title,\n  message,\n  titleId,\n  testId,\n}: {\n  title?: string;\n  message: string;\n  titleId: string;\n  testId: (suffix: string) => string;\n}): React.JSX.Element {\n  const theme = useUiTheme();\n  return (\n    <View style={[styles.text, { gap: theme.spacing(ERROR_TEXT_GAP_UNITS) }]}>\n      {title ? (\n        <RNText\n          id={titleId}\n          role=\"heading\"\n          {...webAria({ 'aria-level': 3 })}\n          testID={testId('title')}\n          style={titleStyle(theme)}\n        >\n          {title}\n        </RNText>\n      ) : null}\n      <RNText id={`${titleId}-message`} testID={testId('message')} style={messageStyle(theme)}>\n        {message}\n      </RNText>\n    </View>\n  );\n}\n\nexport const ErrorState: React.FC<ErrorStateProps> = React.memo(function ErrorState(props) {\n  const {\n    message,\n    title,\n    onRetry,\n    retryLabel = EN_US_UI_LABELS.errorState.retry,\n    severity = 'error',\n    icon,\n    style,\n    ...others\n  } = props;\n  const theme = useUiTheme();\n  const titleId = React.useId();\n  const dataTestId = resolveTestId(others);\n  const testId = makeTestId(dataTestId);\n  const rest = withoutTestIdProps(others);\n\n  return (\n    <View\n      role=\"alert\"\n      aria-labelledby={title ? titleId : undefined}\n      {...webAria({ 'aria-describedby': `${titleId}-message` })}\n      testID={dataTestId || 'error-state'}\n      style={[\n        styles.root,\n        {\n          padding: theme.spacing(ERROR_STATE_PADDING_UNITS),\n          minHeight: ERROR_STATE_MIN_HEIGHT,\n          gap: theme.spacing(ERROR_STATE_GAP_UNITS),\n        },\n        style,\n      ]}\n      {...rest}\n    >\n      <ErrorIcon severity={severity} icon={icon} testId={testId('icon')} />\n\n      <ErrorText title={title} message={message} titleId={titleId} testId={testId} />\n\n      {onRetry ? (\n        <Button\n          variant=\"outline\"\n          color={severity === 'error' ? 'danger' : 'warning'}\n          size=\"sm\"\n          icon={<Icon name=\"Refresh\" size={RETRY_BUTTON.iconSize} color={severity === 'error' ? 'danger' : 'warning'} />}\n          onClick={onRetry}\n          testID={testId('retry-button')}\n          style={retryStyle(theme)}\n        >\n          {retryLabel}\n        </Button>\n      ) : null}\n    </View>\n  );\n});\n\nErrorState.displayName = 'ErrorState';\n\nconst styles = StyleSheet.create({\n  root: {\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  text: {\n    alignItems: 'center',\n  },\n});\n","import type { ErrorStateSeverity } from './ErrorState.base';\nimport type { UiPaletteColor, UiTheme } from '../../../tokens/theme';\n\n/**\n * THE NUMBERS BOTH `ErrorState` RENDERERS DRAW WITH.\n *\n * `ErrorState.tsx` (MUI) and `ErrorState.native.tsx` (React Native) read this\n * one table. Spacing is in SPACING UNITS where the web writes\n * `theme.spacing(n)`; everything else is px or a ratio.\n */\n\n/** The region: a centred column, `theme.spacing(6)` of padding, at least 200px tall, its parts 16px apart. */\nexport const ERROR_STATE_PADDING_UNITS = 6;\nexport const ERROR_STATE_MIN_HEIGHT = 200;\nexport const ERROR_STATE_GAP_UNITS = 2;\n\n/** The glyph sits in an 80px disc of the severity's `light` shade at 0.9 opacity. */\nexport const ERROR_ICON_BOX = 80;\nexport const ERROR_ICON_BOX_OPACITY = 0.9;\nexport const ERROR_ICON_SIZE = 48;\n\n/** Title and message are 8px apart; the message wraps at 400px on a 1.6 line height. */\nexport const ERROR_TEXT_GAP_UNITS = 1;\nexport const ERROR_MESSAGE_MAX_WIDTH = 400;\nexport const ERROR_MESSAGE_LINE_HEIGHT = 1.6;\n\n/** The retry button: 8px below the text, no narrower than 120px. */\nexport const RETRY_MARGIN_TOP_UNITS = 1;\nexport const RETRY_MIN_WIDTH = 120;\n/**\n * The web retry IS MUI's medium outlined `Button`: 5px 15px inside its 1px\n * border, 14px type, the theme's radius, a 20px start icon. The native side\n * sizes the house `Button` to these.\n */\nexport const RETRY_BUTTON = {\n  paddingVertical: 5,\n  paddingHorizontal: 15,\n  iconSize: 20,\n} as const;\n\n/** `error` is MUI's name for the `danger` slot; `warning` is its own. */\nexport function errorStatePalette(theme: UiTheme, severity: ErrorStateSeverity): UiPaletteColor {\n  return severity === 'error' ? theme.palette.danger : theme.palette.warning;\n}\n"],"mappings":"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","names":["ErrorState"]}
+{"version":3,"sources":["../../../src/components/data-display/ErrorState/ErrorState.native.tsx","../../../src/components/data-display/ErrorState/ErrorState.metrics.ts"],"sourcesContent":["import * as React from 'react';\nimport { StyleSheet, Text as RNText, View, type TextStyle, type ViewStyle } from 'react-native';\n\nimport {\n  ERROR_ICON_BOX,\n  ERROR_ICON_BOX_OPACITY,\n  ERROR_ICON_SIZE,\n  ERROR_MESSAGE_LINE_HEIGHT,\n  ERROR_MESSAGE_MAX_WIDTH,\n  ERROR_STATE_GAP_UNITS,\n  ERROR_STATE_MIN_HEIGHT,\n  ERROR_STATE_PADDING_UNITS,\n  ERROR_TEXT_GAP_UNITS,\n  RETRY_BUTTON,\n  RETRY_MARGIN_TOP_UNITS,\n  RETRY_MIN_WIDTH,\n  errorStatePalette,\n} from './ErrorState.metrics';\nimport type { ErrorStateProps, ErrorStateSeverity } from './ErrorState.types.native';\nimport { Icon } from '../../../icons/Icon.native';\nimport { webAria } from '../../../platform/aria';\nimport { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\nimport { MUI_FONT_WEIGHT_MEDIUM, MUI_TYPE, muiTypeStyle } from '../../../tokens/mui-type';\nimport type { UiTheme } from '../../../tokens/theme';\nimport { Button } from '../../form/Button/Button.native';\nimport { EN_US_UI_LABELS } from '../../../en-US.labels';\n\nconst makeTestId =\n  (dataTestId?: string) =>\n  (suffix: string): string =>\n    dataTestId ? `${dataTestId}-${suffix}` : `error-state-${suffix}`;\n\n/** MUI's `h6` as an `h3`, medium weight, in the body ink — what the web `Typography` renders. */\nexport function titleStyle(theme: UiTheme): TextStyle {\n  return {\n    ...muiTypeStyle(theme, 'h6'),\n    fontWeight: `${MUI_FONT_WEIGHT_MEDIUM}`,\n    color: theme.palette.text.primary,\n    textAlign: 'center',\n  };\n}\n\n/** MUI's `body2` on a 1.6 line height, muted, wrapping at 400px. */\nexport function messageStyle(theme: UiTheme): TextStyle {\n  return {\n    ...muiTypeStyle(theme, 'body2'),\n    lineHeight: MUI_TYPE.body2.fontSize * ERROR_MESSAGE_LINE_HEIGHT,\n    color: theme.palette.text.secondary,\n    maxWidth: ERROR_MESSAGE_MAX_WIDTH,\n    textAlign: 'center',\n  };\n}\n\n/** The 80px disc behind the glyph, in the severity's `light` shade. */\nexport function iconBoxStyle(theme: UiTheme, severity: ErrorStateSeverity): ViewStyle {\n  return {\n    width: ERROR_ICON_BOX,\n    height: ERROR_ICON_BOX,\n    borderRadius: ERROR_ICON_BOX / 2,\n    backgroundColor: errorStatePalette(theme, severity).light,\n    opacity: ERROR_ICON_BOX_OPACITY,\n    alignItems: 'center',\n    justifyContent: 'center',\n  };\n}\n\n/** The web retry is MUI's medium outlined button; the house `Button` is sized to it here. */\nexport function retryStyle(theme: UiTheme): ViewStyle {\n  return {\n    marginTop: theme.spacing(RETRY_MARGIN_TOP_UNITS),\n    minWidth: RETRY_MIN_WIDTH,\n    paddingVertical: RETRY_BUTTON.paddingVertical,\n    paddingHorizontal: RETRY_BUTTON.paddingHorizontal,\n    borderRadius: theme.radius.md,\n  };\n}\n\nfunction ErrorIcon({\n  severity,\n  icon,\n  testId,\n}: {\n  severity: ErrorStateSeverity;\n  icon?: React.ReactNode;\n  testId: string;\n}): React.JSX.Element {\n  const theme = useUiTheme();\n  const glyph = severity === 'error' ? 'ErrorOutline' : 'WarningAmber';\n  return (\n    <View testID={testId} style={iconBoxStyle(theme, severity)}>\n      {icon || <Icon name={glyph} size={ERROR_ICON_SIZE} color={errorStatePalette(theme, severity).main} />}\n    </View>\n  );\n}\n\nfunction ErrorText({\n  title,\n  message,\n  titleId,\n  testId,\n}: {\n  title?: string;\n  message: string;\n  titleId: string;\n  testId: (suffix: string) => string;\n}): React.JSX.Element {\n  const theme = useUiTheme();\n  return (\n    <View style={[styles.text, { gap: theme.spacing(ERROR_TEXT_GAP_UNITS) }]}>\n      {title ? (\n        <RNText\n          id={titleId}\n          role=\"heading\"\n          {...webAria({ 'aria-level': 3 })}\n          testID={testId('title')}\n          style={titleStyle(theme)}\n        >\n          {title}\n        </RNText>\n      ) : null}\n      <RNText id={`${titleId}-message`} testID={testId('message')} style={messageStyle(theme)}>\n        {message}\n      </RNText>\n    </View>\n  );\n}\n\nexport const ErrorState: React.FC<ErrorStateProps> = React.memo(function ErrorState(props) {\n  const {\n    message,\n    title,\n    onRetry,\n    retryLabel = EN_US_UI_LABELS.errorState.retry,\n    severity = 'error',\n    icon,\n    style,\n    ...others\n  } = props;\n  const theme = useUiTheme();\n  const titleId = React.useId();\n  const dataTestId = resolveTestId(others);\n  const testId = makeTestId(dataTestId);\n  const rest = withoutTestIdProps(others);\n\n  return (\n    <View\n      role=\"alert\"\n      aria-labelledby={title ? titleId : undefined}\n      {...webAria({ 'aria-describedby': `${titleId}-message` })}\n      testID={dataTestId || 'error-state'}\n      style={[\n        styles.root,\n        {\n          padding: theme.spacing(ERROR_STATE_PADDING_UNITS),\n          minHeight: ERROR_STATE_MIN_HEIGHT,\n          gap: theme.spacing(ERROR_STATE_GAP_UNITS),\n        },\n        style,\n      ]}\n      {...rest}\n    >\n      <ErrorIcon severity={severity} icon={icon} testId={testId('icon')} />\n\n      <ErrorText title={title} message={message} titleId={titleId} testId={testId} />\n\n      {onRetry ? (\n        <Button\n          variant=\"outline\"\n          color={severity === 'error' ? 'danger' : 'warning'}\n          size=\"sm\"\n          icon={<Icon name=\"Refresh\" size={RETRY_BUTTON.iconSize} color={severity === 'error' ? 'danger' : 'warning'} />}\n          onClick={onRetry}\n          testID={testId('retry-button')}\n          style={retryStyle(theme)}\n        >\n          {retryLabel}\n        </Button>\n      ) : null}\n    </View>\n  );\n});\n\nErrorState.displayName = 'ErrorState';\n\nconst styles = StyleSheet.create({\n  root: {\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  text: {\n    alignItems: 'center',\n  },\n});\n","import type { ErrorStateSeverity } from './ErrorState.base';\nimport type { UiPaletteColor, UiTheme } from '../../../tokens/theme';\n\n/**\n * THE NUMBERS BOTH `ErrorState` RENDERERS DRAW WITH.\n *\n * `ErrorState.tsx` (MUI) and `ErrorState.native.tsx` (React Native) read this\n * one table. Spacing is in SPACING UNITS where the web writes\n * `theme.spacing(n)`; everything else is px or a ratio.\n */\n\n/** The region: a centred column, `theme.spacing(6)` of padding, at least 200px tall, its parts 16px apart. */\nexport const ERROR_STATE_PADDING_UNITS = 6;\nexport const ERROR_STATE_MIN_HEIGHT = 200;\nexport const ERROR_STATE_GAP_UNITS = 2;\n\n/** The glyph sits in an 80px disc of the severity's `light` shade at 0.9 opacity. */\nexport const ERROR_ICON_BOX = 80;\nexport const ERROR_ICON_BOX_OPACITY = 0.9;\nexport const ERROR_ICON_SIZE = 48;\n\n/** Title and message are 8px apart; the message wraps at 400px on a 1.6 line height. */\nexport const ERROR_TEXT_GAP_UNITS = 1;\nexport const ERROR_MESSAGE_MAX_WIDTH = 400;\nexport const ERROR_MESSAGE_LINE_HEIGHT = 1.6;\n\n/** The retry button: 8px below the text, no narrower than 120px. */\nexport const RETRY_MARGIN_TOP_UNITS = 1;\nexport const RETRY_MIN_WIDTH = 120;\n/**\n * The web retry is never shorter than the 40px tap floor. MUI's medium outlined\n * button is 37px tall on its own (FUT-1310), so the floor is stated, not inherited.\n */\nexport const RETRY_MIN_HEIGHT = 40;\n/**\n * The web retry IS MUI's medium outlined `Button`: 5px 15px inside its 1px\n * border, 14px type, the theme's radius, a 20px start icon. The native side\n * sizes the house `Button` to these.\n */\nexport const RETRY_BUTTON = {\n  paddingVertical: 5,\n  paddingHorizontal: 15,\n  iconSize: 20,\n} as const;\n\n/** `error` is MUI's name for the `danger` slot; `warning` is its own. */\nexport function errorStatePalette(theme: UiTheme, severity: ErrorStateSeverity): UiPaletteColor {\n  return severity === 'error' ? theme.palette.danger : theme.palette.warning;\n}\n"],"mappings":"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","names":["ErrorState"]}

package/dist/types/components/data-display/ErrorState/ErrorState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorState.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/ErrorState/ErrorState.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,MAAM,OAAO,CAAC;AAe1B,OAAO,KAAK,EAAE,eAAe,EAAsB,MAAM,oBAAoB,CAAC;AAkF9E,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAwD/C,CAAC;AAIH,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ErrorState.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/ErrorState/ErrorState.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B,OAAO,KAAK,EAAE,eAAe,EAAsB,MAAM,oBAAoB,CAAC;AAkF9E,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAyD/C,CAAC;AAIH,eAAe,UAAU,CAAC"}

package/dist/types/components/data-display/ErrorState/ErrorState.metrics.d.ts

@@ -22,6 +22,11 @@ export declare const ERROR_MESSAGE_LINE_HEIGHT = 1.6;
 /** The retry button: 8px below the text, no narrower than 120px. */
 export declare const RETRY_MARGIN_TOP_UNITS = 1;
 export declare const RETRY_MIN_WIDTH = 120;
+/**
+ * The web retry is never shorter than the 40px tap floor. MUI's medium outlined
+ * button is 37px tall on its own (FUT-1310), so the floor is stated, not inherited.
+ */
+export declare const RETRY_MIN_HEIGHT = 40;
 /**
  * The web retry IS MUI's medium outlined `Button`: 5px 15px inside its 1px
  * border, 14px type, the theme's radius, a 20px start icon. The native side

package/dist/types/components/data-display/ErrorState/ErrorState.metrics.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorState.metrics.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/ErrorState/ErrorState.metrics.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,KAAK,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAErE;;;;;;GAMG;AAEH,8GAA8G;AAC9G,eAAO,MAAM,yBAAyB,IAAI,CAAC;AAC3C,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAC1C,eAAO,MAAM,qBAAqB,IAAI,CAAC;AAEvC,qFAAqF;AACrF,eAAO,MAAM,cAAc,KAAK,CAAC;AACjC,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAC1C,eAAO,MAAM,eAAe,KAAK,CAAC;AAElC,wFAAwF;AACxF,eAAO,MAAM,oBAAoB,IAAI,CAAC;AACtC,eAAO,MAAM,uBAAuB,MAAM,CAAC;AAC3C,eAAO,MAAM,yBAAyB,MAAM,CAAC;AAE7C,oEAAoE;AACpE,eAAO,MAAM,sBAAsB,IAAI,CAAC;AACxC,eAAO,MAAM,eAAe,MAAM,CAAC;AACnC;;;;GAIG;AACH,eAAO,MAAM,YAAY;;;;CAIf,CAAC;AAEX,yEAAyE;AACzE,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,kBAAkB,GAAG,cAAc,CAE9F"}
+{"version":3,"file":"ErrorState.metrics.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/ErrorState/ErrorState.metrics.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,KAAK,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAErE;;;;;;GAMG;AAEH,8GAA8G;AAC9G,eAAO,MAAM,yBAAyB,IAAI,CAAC;AAC3C,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAC1C,eAAO,MAAM,qBAAqB,IAAI,CAAC;AAEvC,qFAAqF;AACrF,eAAO,MAAM,cAAc,KAAK,CAAC;AACjC,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAC1C,eAAO,MAAM,eAAe,KAAK,CAAC;AAElC,wFAAwF;AACxF,eAAO,MAAM,oBAAoB,IAAI,CAAC;AACtC,eAAO,MAAM,uBAAuB,MAAM,CAAC;AAC3C,eAAO,MAAM,yBAAyB,MAAM,CAAC;AAE7C,oEAAoE;AACpE,eAAO,MAAM,sBAAsB,IAAI,CAAC;AACxC,eAAO,MAAM,eAAe,MAAM,CAAC;AACnC;;;GAGG;AACH,eAAO,MAAM,gBAAgB,KAAK,CAAC;AACnC;;;;GAIG;AACH,eAAO,MAAM,YAAY;;;;CAIf,CAAC;AAEX,yEAAyE;AACzE,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,kBAAkB,GAAG,cAAc,CAE9F"}

package/dist/types-native/components/data-display/ErrorState/ErrorState.metrics.d.ts

@@ -22,6 +22,11 @@ export declare const ERROR_MESSAGE_LINE_HEIGHT = 1.6;
 /** The retry button: 8px below the text, no narrower than 120px. */
 export declare const RETRY_MARGIN_TOP_UNITS = 1;
 export declare const RETRY_MIN_WIDTH = 120;
+/**
+ * The web retry is never shorter than the 40px tap floor. MUI's medium outlined
+ * button is 37px tall on its own (FUT-1310), so the floor is stated, not inherited.
+ */
+export declare const RETRY_MIN_HEIGHT = 40;
 /**
  * The web retry IS MUI's medium outlined `Button`: 5px 15px inside its 1px
  * border, 14px type, the theme's radius, a 20px start icon. The native side

package/dist/types-native/components/data-display/ErrorState/ErrorState.metrics.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorState.metrics.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/ErrorState/ErrorState.metrics.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,KAAK,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAErE;;;;;;GAMG;AAEH,8GAA8G;AAC9G,eAAO,MAAM,yBAAyB,IAAI,CAAC;AAC3C,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAC1C,eAAO,MAAM,qBAAqB,IAAI,CAAC;AAEvC,qFAAqF;AACrF,eAAO,MAAM,cAAc,KAAK,CAAC;AACjC,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAC1C,eAAO,MAAM,eAAe,KAAK,CAAC;AAElC,wFAAwF;AACxF,eAAO,MAAM,oBAAoB,IAAI,CAAC;AACtC,eAAO,MAAM,uBAAuB,MAAM,CAAC;AAC3C,eAAO,MAAM,yBAAyB,MAAM,CAAC;AAE7C,oEAAoE;AACpE,eAAO,MAAM,sBAAsB,IAAI,CAAC;AACxC,eAAO,MAAM,eAAe,MAAM,CAAC;AACnC;;;;GAIG;AACH,eAAO,MAAM,YAAY;;;;CAIf,CAAC;AAEX,yEAAyE;AACzE,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,kBAAkB,GAAG,cAAc,CAE9F"}
+{"version":3,"file":"ErrorState.metrics.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/ErrorState/ErrorState.metrics.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,KAAK,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAErE;;;;;;GAMG;AAEH,8GAA8G;AAC9G,eAAO,MAAM,yBAAyB,IAAI,CAAC;AAC3C,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAC1C,eAAO,MAAM,qBAAqB,IAAI,CAAC;AAEvC,qFAAqF;AACrF,eAAO,MAAM,cAAc,KAAK,CAAC;AACjC,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAC1C,eAAO,MAAM,eAAe,KAAK,CAAC;AAElC,wFAAwF;AACxF,eAAO,MAAM,oBAAoB,IAAI,CAAC;AACtC,eAAO,MAAM,uBAAuB,MAAM,CAAC;AAC3C,eAAO,MAAM,yBAAyB,MAAM,CAAC;AAE7C,oEAAoE;AACpE,eAAO,MAAM,sBAAsB,IAAI,CAAC;AACxC,eAAO,MAAM,eAAe,MAAM,CAAC;AACnC;;;GAGG;AACH,eAAO,MAAM,gBAAgB,KAAK,CAAC;AACnC;;;;GAIG;AACH,eAAO,MAAM,YAAY;;;;CAIf,CAAC;AAEX,yEAAyE;AACzE,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,kBAAkB,GAAG,cAAc,CAE9F"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "6.93.1",
+  "version": "6.93.2",
   "license": "MIT",
   "packageManager": "pnpm@10.34.5",
   "type": "module",

package/src/components/data-display/ErrorState/ErrorState.metrics.ts

@@ -27,6 +27,11 @@ export const ERROR_MESSAGE_LINE_HEIGHT = 1.6;
 /** The retry button: 8px below the text, no narrower than 120px. */
 export const RETRY_MARGIN_TOP_UNITS = 1;
 export const RETRY_MIN_WIDTH = 120;
+/**
+ * The web retry is never shorter than the 40px tap floor. MUI's medium outlined
+ * button is 37px tall on its own (FUT-1310), so the floor is stated, not inherited.
+ */
+export const RETRY_MIN_HEIGHT = 40;
 /**
  * The web retry IS MUI's medium outlined `Button`: 5px 15px inside its 1px
  * border, 14px type, the theme's radius, a 20px start icon. The native side

package/src/components/data-display/ErrorState/ErrorState.tsx

@@ -20,6 +20,7 @@ import {
   ERROR_STATE_PADDING_UNITS,
   ERROR_TEXT_GAP_UNITS,
   RETRY_MARGIN_TOP_UNITS,
+  RETRY_MIN_HEIGHT,
   RETRY_MIN_WIDTH,
 } from './ErrorState.metrics';
 import type { ErrorStateProps, ErrorStateSeverity } from './ErrorState.types';
@@ -153,6 +154,7 @@ export const ErrorState: React.FC<ErrorStateProps> = React.memo((props) => {
           sx={{
             mt: theme.spacing(RETRY_MARGIN_TOP_UNITS),
             minWidth: rem(theme, RETRY_MIN_WIDTH),
+            minHeight: rem(theme, RETRY_MIN_HEIGHT),
           }}
         >
           {retryLabel}

package/dist/chunk-HBH7V3IP.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/data-display/ErrorState/ErrorState.tsx"],"sourcesContent":["import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';\nimport RefreshIcon from '@mui/icons-material/Refresh';\nimport WarningAmberIcon from '@mui/icons-material/WarningAmber';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport Stack from '@mui/material/Stack/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport {\n  ERROR_ICON_BOX,\n  ERROR_ICON_BOX_OPACITY,\n  ERROR_ICON_SIZE,\n  ERROR_MESSAGE_LINE_HEIGHT,\n  ERROR_MESSAGE_MAX_WIDTH,\n  ERROR_STATE_GAP_UNITS,\n  ERROR_STATE_MIN_HEIGHT,\n  ERROR_STATE_PADDING_UNITS,\n  ERROR_TEXT_GAP_UNITS,\n  RETRY_MARGIN_TOP_UNITS,\n  RETRY_MIN_WIDTH,\n} from './ErrorState.metrics';\nimport type { ErrorStateProps, ErrorStateSeverity } from './ErrorState.types';\nimport { resolveTestId } from '../../../platform/test-id';\nimport { rem, sxRem } from '../../../tokens/relative';\nimport { EN_US_UI_LABELS } from '../../../en-US.labels';\n\nconst makeTestId =\n  (dataTestId?: string) =>\n  (suffix: string): string =>\n    dataTestId ? `${dataTestId}-${suffix}` : `error-state-${suffix}`;\n\nconst paletteFor = (theme: Theme, severity: ErrorStateSeverity) =>\n  severity === 'error' ? theme.palette.error : theme.palette.warning;\n\nconst ErrorIcon: React.FC<{\n  severity: ErrorStateSeverity;\n  icon?: React.ReactNode;\n  testId: string;\n}> = ({ severity, icon, testId }) => {\n  const theme = useTheme();\n  const color = paletteFor(theme, severity);\n  const Fallback = severity === 'error' ? ErrorOutlineIcon : WarningAmberIcon;\n\n  return (\n    <Box\n      data-testid={testId}\n      sx={{\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        width: rem(theme, ERROR_ICON_BOX),\n        height: rem(theme, ERROR_ICON_BOX),\n        borderRadius: '50%',\n        backgroundColor: color.light,\n        opacity: ERROR_ICON_BOX_OPACITY,\n      }}\n    >\n      {icon || <Fallback sx={{ fontSize: sxRem(ERROR_ICON_SIZE), color: color.main }} />}\n    </Box>\n  );\n};\n\nconst ErrorText: React.FC<{\n  title?: string;\n  message: string;\n  titleId: string;\n  testId: (suffix: string) => string;\n}> = ({ title, message, titleId, testId }) => {\n  const theme = useTheme();\n\n  return (\n    <Stack spacing={ERROR_TEXT_GAP_UNITS} alignItems=\"center\">\n      {title && (\n        <Typography\n          id={titleId}\n          variant=\"h6\"\n          component=\"h3\"\n          data-testid={testId('title')}\n          sx={{\n            fontWeight: theme.typography.fontWeightMedium,\n            color: theme.palette.text.primary,\n          }}\n        >\n          {title}\n        </Typography>\n      )}\n\n      <Typography\n        id={`${titleId}-message`}\n        variant=\"body2\"\n        color=\"text.secondary\"\n        data-testid={testId('message')}\n        sx={{\n          maxWidth: rem(theme, ERROR_MESSAGE_MAX_WIDTH),\n          lineHeight: ERROR_MESSAGE_LINE_HEIGHT,\n        }}\n      >\n        {message}\n      </Typography>\n    </Stack>\n  );\n};\n\nexport const ErrorState: React.FC<ErrorStateProps> = React.memo((props) => {\n  const {\n    message,\n    title,\n    onRetry,\n    retryLabel = EN_US_UI_LABELS.errorState.retry,\n    severity = 'error',\n    icon,\n    className,\n  } = props;\n  const theme = useTheme();\n  const titleId = React.useId();\n  // `dataTestId` is the documented spelling; `testID`, the shared contract's\n  // other one, resolves to the same id.\n  const dataTestId = resolveTestId(props);\n  const testId = makeTestId(dataTestId);\n\n  return (\n    <Box\n      role=\"alert\"\n      aria-labelledby={title ? titleId : undefined}\n      aria-describedby={`${titleId}-message`}\n      className={className}\n      data-testid={dataTestId || 'error-state'}\n      sx={{\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'center',\n        justifyContent: 'center',\n        textAlign: 'center',\n        padding: theme.spacing(ERROR_STATE_PADDING_UNITS),\n        minHeight: rem(theme, ERROR_STATE_MIN_HEIGHT),\n        gap: theme.spacing(ERROR_STATE_GAP_UNITS),\n      }}\n    >\n      <ErrorIcon severity={severity} icon={icon} testId={testId('icon')} />\n\n      <ErrorText title={title} message={message} titleId={titleId} testId={testId} />\n\n      {onRetry && (\n        <Button\n          variant=\"outlined\"\n          color={severity}\n          onClick={onRetry}\n          startIcon={<RefreshIcon />}\n          data-testid={testId('retry-button')}\n          sx={{\n            mt: theme.spacing(RETRY_MARGIN_TOP_UNITS),\n            minWidth: rem(theme, RETRY_MIN_WIDTH),\n          }}\n        >\n          {retryLabel}\n        </Button>\n      )}\n    </Box>\n  );\n});\n\nErrorState.displayName = 'ErrorState';\n\nexport default ErrorState;\n"],"mappings":"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","names":[]}