@12-apps/ui 6.18.0 → 6.19.0

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

@@ -7,20 +7,42 @@ import IconButton from '@mui/material/IconButton/index.js';
 import { alpha, styled } from '@mui/material/styles/index.js';
 import React from 'react';
 
+import { defaultAriaLive, resolveAlertProps, testIdFor } from './Alert.helpers';
+import {
+  ACTIVE,
+  ALERT_EASING,
+  ALERT_RADIUS_UNITS,
+  ALERT_TRANSITION_MS,
+  CLOSE_BUTTON,
+  CLOSE_DELAY_MS,
+  COLLAPSE_MS,
+  DESCRIPTION,
+  FADE_IN,
+  FOCUS,
+  HOVER,
+  seconds,
+  TITLE,
+} from './Alert.metrics';
 import {
   alertEmphasisStyles,
   alertLayoutStyles,
   alertVariantStyles,
   fadeInScale,
   getColorFromTheme,
-  getVariantIcon } from './Alert.styles';
+  getVariantIcon,
+} from './Alert.styles';
 import type { AlertColor } from '@mui/material/Alert/index.js';
 import type { AlertProps } from './Alert.types';
+import { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';
+import { px } from '../../../tokens/theme';
+
+const transition = `all ${seconds(ALERT_TRANSITION_MS)} ${ALERT_EASING}`;
 
 // Define animations
 const StyledAlert = styled(MuiAlert, {
   shouldForwardProp: (prop) =>
-    !['customVariant', 'customColor', 'glow', 'pulse', 'animate'].includes(prop as string) })<{
+    !['customVariant', 'customColor', 'glow', 'pulse', 'animate'].includes(prop as string),
+})<{
   customVariant?: string;
   customColor?: string;
   glow?: boolean;
@@ -30,70 +52,56 @@ const StyledAlert = styled(MuiAlert, {
   const colorPalette = getColorFromTheme(theme, customColor || customVariant || 'info');
 
   return {
-    borderRadius: theme.spacing(1.5),
-    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+    borderRadius: theme.spacing(ALERT_RADIUS_UNITS),
+    transition,
     position: 'relative',
     overflow: 'hidden',
-    animation: animate ? `${fadeInScale} 0.3s ease-out` : 'none',
+    animation: animate ? `${fadeInScale} ${seconds(FADE_IN.ms)} ease-out` : 'none',
     willChange: 'transform, opacity',
 
     ...alertLayoutStyles(theme, colorPalette, animate),
 
     // Hover effects
     '&:hover': {
-      transform: 'translateY(-3px) scale(1.01)',
-      boxShadow: `0 8px 20px ${alpha(colorPalette.main, 0.2)}`,
-      transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+      transform: `translateY(-${HOVER.lift}px) scale(${HOVER.scale})`,
+      boxShadow: `0 ${HOVER.shadowY}px ${HOVER.shadowBlur}px ${alpha(colorPalette.main, HOVER.shadowAlpha)}`,
+      transition,
 
       '.MuiAlert-icon': {
-        transform: 'scale(1.15) rotate(10deg)' },
+        transform: `scale(${HOVER.iconScale}) rotate(${HOVER.iconRotateDeg}deg)`,
+      },
 
       '&::before': {
-        opacity: 1 } },
+        opacity: 1,
+      },
+    },
 
     // Active state
     '&:active': {
-      transform: 'translateY(-1px) scale(0.99)',
-      transition: 'transform 0.1s ease' },
+      transform: `translateY(-${ACTIVE.lift}px) scale(${ACTIVE.scale})`,
+      transition: `transform ${seconds(ACTIVE.ms)} ease`,
+    },
 
     // Focus styles for accessibility
     '&:focus-within': {
-      outline: `3px solid ${alpha(colorPalette.main, 0.5)}`,
-      outlineOffset: '3px',
-      boxShadow: `0 0 0 6px ${alpha(colorPalette.main, 0.1)}`,
-      transition: 'all 0.2s ease' },
+      outline: `${FOCUS.ringWidth}px solid ${alpha(colorPalette.main, FOCUS.ringAlpha)}`,
+      outlineOffset: `${FOCUS.offset}px`,
+      boxShadow: `0 0 0 ${FOCUS.haloSpread}px ${alpha(colorPalette.main, FOCUS.haloAlpha)}`,
+      transition: `all ${seconds(FOCUS.ms)} ease`,
+    },
 
     ...alertVariantStyles(theme, customVariant, colorPalette),
-    ...alertEmphasisStyles(colorPalette, Boolean(glow), Boolean(pulse)) };
+    ...alertEmphasisStyles(colorPalette, Boolean(glow), Boolean(pulse)),
+  };
 });
 
-const ALERT_DEFAULTS = {
-  variant: 'info',
-  glow: false,
-  pulse: false,
-  showIcon: true,
-  closable: false,
-  animate: true,
-  role: 'alert',
-  'aria-atomic': 'true',
-  'data-testid': 'alert' } satisfies Partial<AlertProps>;
-
-// Strips explicitly-undefined props before the merge so `prop={undefined}` still
-// falls back to the default, the way a destructuring default would.
-const definedProps = (props: AlertProps): Partial<AlertProps> =>
-  Object.fromEntries(
-    Object.entries(props).filter(([, value]) => value !== undefined),
-  ) as Partial<AlertProps>;
-
-const testIdFor = (base: string | undefined, suffix: string) =>
-  base ? `${base}-${suffix}` : `alert-${suffix}`;
-
 // glass and gradient are our own looks with no MUI severity of their own; both
 // borrow info's. danger is MUI's error.
 const MUI_SEVERITY: Record<string, AlertColor> = {
   danger: 'error',
   glass: 'info',
-  gradient: 'info' };
+  gradient: 'info',
+};
 
 const toMuiSeverity = (variant: string): AlertColor =>
   MUI_SEVERITY[variant] ?? (variant as AlertColor);
@@ -109,12 +117,13 @@ const AlertContent: React.FC<{
       <AlertTitle
         data-testid={testIdFor(dataTestId, 'title')}
         sx={{
-          fontWeight: 600,
-          fontSize: '1.05rem',
-          marginBottom: description ? 0.5 : 0,
+          fontWeight: TITLE.fontWeight,
+          fontSize: px(TITLE.fontSize),
+          marginBottom: description ? TITLE.marginBottomUnits : 0,
           wordWrap: 'break-word',
           overflowWrap: 'break-word',
-          wordBreak: 'break-word' }}
+          wordBreak: 'break-word',
+        }}
       >
         {title}
       </AlertTitle>
@@ -124,11 +133,12 @@ const AlertContent: React.FC<{
         component="div"
         data-testid={testIdFor(dataTestId, 'message')}
         sx={{
-          opacity: 0.9,
-          fontSize: '0.925rem',
+          opacity: DESCRIPTION.opacity,
+          fontSize: px(DESCRIPTION.fontSize),
           wordWrap: 'break-word',
           overflowWrap: 'break-word',
-          wordBreak: 'break-word' }}
+          wordBreak: 'break-word',
+        }}
       >
         {description}
       </Box>
@@ -140,7 +150,8 @@ const AlertContent: React.FC<{
 const AlertCloseButton: React.FC<{ dataTestId?: string; label: string; onClose: () => void }> = ({
   dataTestId,
   label,
-  onClose }) => (
+  onClose,
+}) => (
   <IconButton
     data-testid={testIdFor(dataTestId, 'close')}
     aria-label={label}
@@ -148,16 +159,19 @@ const AlertCloseButton: React.FC<{ dataTestId?: string; label: string; onClose:
     size="small"
     onClick={onClose}
     sx={(theme) => ({
-      transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-      opacity: 0.7,
+      transition,
+      opacity: CLOSE_BUTTON.opacity,
       '&:hover': {
-        transform: 'rotate(90deg) scale(1.1)',
+        transform: `rotate(${CLOSE_BUTTON.hoverRotateDeg}deg) scale(${CLOSE_BUTTON.hoverScale})`,
         opacity: 1,
-        backgroundColor: alpha(theme.palette.action.hover, 0.1) },
+        backgroundColor: alpha(theme.palette.action.hover, CLOSE_BUTTON.washAlpha),
+      },
       '&:focus': {
         opacity: 1,
         outline: 'none',
-        backgroundColor: alpha(theme.palette.action.focus, 0.1) } })}
+        backgroundColor: alpha(theme.palette.action.focus, CLOSE_BUTTON.washAlpha),
+      },
+    })}
   >
     <Close fontSize="inherit" />
   </IconButton>
@@ -181,80 +195,81 @@ function dismissButton(
   return <AlertCloseButton dataTestId={dataTestId} label={props.closeLabel} onClose={onClose} />;
 }
 
-export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
-  (
-    alertProps,
-    ref,
-  ) => {
-    const {
-      variant,
-      color,
-      glow,
-      pulse,
-      icon,
-      showIcon,
-      onClose,
-      title,
-      description,
-      children,
-      animate,
-      role,
-      'aria-atomic': ariaAtomic,
-      'data-testid': dataTestId,
-      ...props
-    } = { ...ALERT_DEFAULTS, ...definedProps(alertProps) };
+export const Alert = React.forwardRef<HTMLDivElement, AlertProps>((alertProps, ref) => {
+  const {
+    variant,
+    color,
+    glow,
+    pulse,
+    icon,
+    showIcon,
+    onClose,
+    title,
+    description,
+    children,
+    animate,
+    role,
+    'aria-atomic': ariaAtomic,
+    ...others
+  } = resolveAlertProps(alertProps);
 
-    // Depends on `variant`, so it cannot live in the static defaults above.
-    const ariaLive = alertProps['aria-live'] ?? (variant === 'danger' ? 'assertive' : 'polite');
-    const [open, setOpen] = React.useState(true);
-    const [isClosing, setIsClosing] = React.useState(false);
+  // Every spelling of the test id the shared contract allows, mapped to the
+  // one the DOM reads and defaulted to `alert`; the native Alert does the same.
+  const dataTestId = resolveTestId(others, 'alert');
+  const props = withoutTestIdProps(others);
 
-    const handleClose = () => {
-      setIsClosing(true);
-      window.setTimeout(() => {
-        setOpen(false);
-        onClose?.();
-      }, 200);
-    };
+  // Depends on `variant`, so it cannot live in the static defaults above.
+  const ariaLive = alertProps['aria-live'] ?? defaultAriaLive(variant);
+  const [open, setOpen] = React.useState(true);
+  const [isClosing, setIsClosing] = React.useState(false);
 
-    const severity = toMuiSeverity(variant);
+  const handleClose = () => {
+    setIsClosing(true);
+    window.setTimeout(() => {
+      setOpen(false);
+      onClose?.();
+    }, CLOSE_DELAY_MS);
+  };
 
-    const displayIcon = showIcon ? (
-      <Box component="span" data-testid={testIdFor(dataTestId, 'icon')}>
-        {icon || getVariantIcon(variant)}
-      </Box>
-    ) : false;
+  const severity = toMuiSeverity(variant);
 
-    const content = (
-      <AlertContent title={title} description={description} dataTestId={dataTestId}>
-        {children}
-      </AlertContent>
-    );
+  const displayIcon = showIcon ? (
+    <Box component="span" data-testid={testIdFor(dataTestId, 'icon')}>
+      {icon || getVariantIcon(variant)}
+    </Box>
+  ) : (
+    false
+  );
 
-    return (
-      <Collapse in={open && !isClosing} timeout={300}>
-        <StyledAlert
-          ref={ref}
-          data-testid={dataTestId || 'alert'}
-          severity={severity}
-          customVariant={variant}
-          customColor={color}
-          glow={glow}
-          pulse={pulse}
-          animate={animate}
-          icon={displayIcon}
-          role={role}
-          aria-live={ariaLive}
-          aria-atomic={ariaAtomic}
-          tabIndex={0}
-          action={dismissButton(alertProps, dataTestId, handleClose)}
-          {...props}
-        >
-          {content}
-        </StyledAlert>
-      </Collapse>
-    );
-  },
-);
+  const content = (
+    <AlertContent title={title} description={description} dataTestId={dataTestId}>
+      {children}
+    </AlertContent>
+  );
+
+  return (
+    <Collapse in={open && !isClosing} timeout={COLLAPSE_MS}>
+      <StyledAlert
+        ref={ref}
+        data-testid={dataTestId}
+        severity={severity}
+        customVariant={variant}
+        customColor={color}
+        glow={glow}
+        pulse={pulse}
+        animate={animate}
+        icon={displayIcon}
+        role={role}
+        aria-live={ariaLive}
+        aria-atomic={ariaAtomic}
+        tabIndex={0}
+        action={dismissButton(alertProps, dataTestId, handleClose)}
+        {...props}
+      >
+        {content}
+      </StyledAlert>
+    </Collapse>
+  );
+});
 
 Alert.displayName = 'Alert';

package/src/components/data-display/Alert/Alert.types.native.ts

@@ -0,0 +1,12 @@
+import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
+
+import type { AlertBaseFields, AlertDismiss } from './Alert.base';
+
+export type { AlertBaseFields, AlertBaseProps, AlertDismiss, AlertVariant } from './Alert.base';
+
+/** The native `Alert`: the shared contract, plus a `View`'s own props where they do not overlap. */
+export type AlertProps = AlertBaseFields &
+  AlertDismiss &
+  Omit<ViewProps, keyof AlertBaseFields | 'style'> & {
+    style?: StyleProp<ViewStyle>;
+  };

package/src/components/data-display/Alert/Alert.types.ts

@@ -1,90 +1,12 @@
-import type { ColorValue } from '../../../tokens/scales';
 import type { AlertProps as MuiAlertProps } from '@mui/material/Alert/index.js';
-import type React from 'react';
 
-/**
- * The dismissible half, as a UNION rather than one more optional field.
- *
- * `closeLabel` is the dismiss button's only accessible name — it renders a
- * glyph and nothing else — so it must be REQUIRED wherever that button exists.
- * But most alerts are not closable, and making it required on all of them
- * would ask a dozen call sites across five packages to name a control they
- * never render. A word invented to satisfy a type is worse than no word: the
- * next reader cannot tell which button it belongs to.
- *
- * So the type says what is actually true — the label is required exactly when
- * the button is.
- */
-type AlertDismiss =
-  | { closable?: false; onClose?: () => void; closeLabel?: never }
-  | { closable: true; onClose?: () => void; closeLabel: string };
+import type { AlertBaseFields, AlertDismiss } from './Alert.base';
 
-export type AlertProps = AlertBase & AlertDismiss;
+export type { AlertBaseFields, AlertBaseProps, AlertDismiss, AlertVariant } from './Alert.base';
 
-export interface AlertBase extends Omit<MuiAlertProps, 'variant' | 'color' | 'role'> {
-  /**
-   * The variant of the alert
-   */
-  variant?: 'info' | 'success' | 'warning' | 'danger' | 'glass' | 'gradient';
-  
-  /**
-   * The color of the alert (when not using variant-specific colors)
-   */
-  color?: ColorValue;
-  
-  /**
-   * Whether the alert should have a glow effect
-   */
-  glow?: boolean;
-  
-  /**
-   * Whether the alert should have a pulse animation
-   */
-  pulse?: boolean;
-  
-  /**
-   * Custom icon to display
-   */
-  icon?: React.ReactNode;
-  
-  /**
-   * Whether to show the default severity icon
-   */
-  showIcon?: boolean;
-  
-  
-  /**
-   * Title for the alert
-   */
-  title?: string;
-  
-  /**
-   * Description text
-   */
-  description?: string;
-  
-  /**
-   * Whether to animate the alert on mount
-   */
-  animate?: boolean;
-  
-  /**
-   * ARIA role for the alert
-   */
-  role?: string;
-  
-  /**
-   * ARIA live region setting
-   */
-  'aria-live'?: 'polite' | 'assertive' | 'off';
-  
-  /**
-   * ARIA atomic setting
-   */
-  'aria-atomic'?: 'true' | 'false';
+/** The web `Alert`'s non-dismiss half: the shared fields, plus MUI's `Alert` props where they do not overlap. */
+export interface AlertBase
+  extends AlertBaseFields,
+    Omit<MuiAlertProps, 'variant' | 'color' | 'role' | keyof AlertBaseFields> {}
 
-  /**
-   * Optional data-testid for testing
-   */
-  'data-testid'?: string;
-}
+export type AlertProps = AlertBase & AlertDismiss;

package/src/components/data-display/Alert/NATIVE-NOTES.md

@@ -0,0 +1,10 @@
+# Alert on React Native
+
+Known rendering gaps, one bullet each; `pnpm native:ledger` reads them.
+
+- `glass` paints its 0.85 paper wash and hairline without the 20px backdrop blur and saturation — React Native has no backdrop filter.
+- `gradient` paints its first stop (`alpha(light, 0.9)`) flat and has no shimmer sweep — React Native core has no gradient fill and no pseudo-elements.
+- Hover, active and focus-within (the lift, the hue shadow, the icon tilt, the focus ring) have no touch equivalent; the close button's pressed state stands in for its hover.
+- The hairline the web draws around a `Button` placed inside the message is a descendant selector; native children are rendered as given. Consecutive text children DO flow as one sentence (`src/platform/text-children.tsx`); an element child breaks the run, as a block would on the web.
+- After dismissal the web keeps a collapsed, hidden node in the DOM; native unmounts once the 300ms collapse has run.
+- Title, description and children are set in MUI's default `body1`/`body2` numbers; a host that re-themes MUI's typography variants moves the web only.

package/src/components/data-display/Alert/index.native.ts

@@ -0,0 +1,2 @@
+export { Alert } from './Alert.native';
+export type { AlertBaseProps, AlertProps, AlertVariant } from './Alert.types.native';

package/src/components/data-display/Alert/index.ts

@@ -1,2 +1,2 @@
 export { Alert } from './Alert';
-export type { AlertProps } from './Alert.types';
+export type { AlertBaseProps, AlertProps, AlertVariant } from './Alert.types';

package/src/components/data-display/EmptyState/EmptyState.base.ts

@@ -0,0 +1,54 @@
+import type * as React from 'react';
+
+/**
+ * THE CONTRACT BOTH RENDERERS HONOUR — and nothing else.
+ *
+ * Imports no MUI and no react-native, on purpose: it ships in both
+ * declaration outputs. The action handlers take no event on either side, so
+ * they live here; the web adds `className`, the native side a `View`'s own
+ * props.
+ */
+export type EmptyStateVariant = 'default' | 'illustrated' | 'minimal' | 'action';
+
+export interface EmptyStateAction {
+  label: string;
+  onClick: () => void;
+}
+
+export interface EmptyStateHelpLink {
+  label: string;
+  href: string;
+  external?: boolean;
+}
+
+export interface EmptyStateBaseProps {
+  variant?: EmptyStateVariant;
+  title: string;
+  description?: string;
+  illustration?: React.ReactNode; // SVG/Lottie/etc
+  primaryAction?: EmptyStateAction;
+  secondaryAction?: EmptyStateAction;
+  helpLink?: EmptyStateHelpLink;
+  /**
+   * Callback for the refresh button
+   * Displays a refresh button in the action area when provided
+   */
+  onRefresh?: () => void;
+  /**
+   * Custom label for the refresh button
+   * @default 'Refresh'
+   */
+  refreshLabel?: string;
+  /**
+   * Callback for the create/add new button
+   * Displays a create button in the action area when provided
+   */
+  onCreate?: () => void;
+  /**
+   * Custom label for the create button
+   * @default 'Create New'
+   */
+  createLabel?: string;
+  dataTestId?: string;
+  testID?: string;
+}

package/src/components/data-display/EmptyState/EmptyState.helpers.ts

@@ -0,0 +1,66 @@
+import type { EmptyStateBaseProps } from './EmptyState.base';
+
+export const makeTestId =
+  (dataTestId?: string) =>
+  (suffix: string): string =>
+    dataTestId ? `${dataTestId}-${suffix}` : `empty-state-${suffix}`;
+
+/** The glyph an action carries, by the shared icon set's name; each renderer draws it its own way. */
+export type ActionIconName = 'Add' | 'Refresh';
+
+export interface ActionSpec {
+  key: 'primary-action' | 'create-button' | 'secondary-action' | 'refresh-button';
+  variant: 'contained' | 'outlined';
+  onClick: () => void;
+  label: string;
+  icon?: ActionIconName;
+}
+
+// The four buttons are one button with different props. Listing them keeps their
+// order — primary, create, secondary, refresh — visible in one place, and both
+// renderers read this one list.
+export const actionsOf = (
+  props: EmptyStateBaseProps,
+  refreshLabel: string,
+  createLabel: string,
+): ActionSpec[] => {
+  const { primaryAction, secondaryAction, onCreate, onRefresh } = props;
+  const specs: ActionSpec[] = [];
+
+  if (primaryAction) {
+    specs.push({
+      key: 'primary-action',
+      variant: 'contained',
+      onClick: primaryAction.onClick,
+      label: primaryAction.label,
+    });
+  }
+  if (onCreate) {
+    specs.push({
+      key: 'create-button',
+      variant: 'contained',
+      onClick: onCreate,
+      label: createLabel,
+      icon: 'Add',
+    });
+  }
+  if (secondaryAction) {
+    specs.push({
+      key: 'secondary-action',
+      variant: 'outlined',
+      onClick: secondaryAction.onClick,
+      label: secondaryAction.label,
+    });
+  }
+  if (onRefresh) {
+    specs.push({
+      key: 'refresh-button',
+      variant: 'outlined',
+      onClick: onRefresh,
+      label: refreshLabel,
+      icon: 'Refresh',
+    });
+  }
+
+  return specs;
+};

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

@@ -0,0 +1,54 @@
+import type { EmptyStateVariant } from './EmptyState.base';
+
+/**
+ * THE NUMBERS BOTH `EmptyState` RENDERERS DRAW WITH.
+ *
+ * `EmptyState.tsx` (MUI) and `EmptyState.native.tsx` (React Native) read
+ * this one table. Spacing is in SPACING UNITS where the web writes
+ * `theme.spacing(n)`; everything else is px or a ratio.
+ */
+
+/** The region: a centred column, `theme.spacing(6)` of padding, at least 200px tall, its parts 24px apart. */
+export const EMPTY_STATE_PADDING_UNITS = 6;
+export const EMPTY_STATE_MIN_HEIGHT = 200;
+export const EMPTY_STATE_GAP_UNITS = 3;
+
+/** The illustration: wider when it is the point, faded a little always, hidden in `minimal`. */
+export const ILLUSTRATION_MAX_WIDTH = { illustrated: 240, other: 120 } as const;
+export const ILLUSTRATION_OPACITY = { minimal: 0.6, other: 0.8 } as const;
+
+export const illustrationMaxWidth = (variant: EmptyStateVariant): number =>
+  variant === 'illustrated' ? ILLUSTRATION_MAX_WIDTH.illustrated : ILLUSTRATION_MAX_WIDTH.other;
+export const illustrationOpacity = (variant: EmptyStateVariant): number =>
+  variant === 'minimal' ? ILLUSTRATION_OPACITY.minimal : ILLUSTRATION_OPACITY.other;
+
+/** Title, description, actions and link are 16px apart; the title wraps at 400px, the description at 480px on a 1.6 line height. */
+export const CONTENT_GAP_UNITS = 2;
+export const TITLE_MAX_WIDTH = 400;
+export const DESCRIPTION_MAX_WIDTH = 480;
+export const DESCRIPTION_LINE_HEIGHT = 1.6;
+
+/** The action row: 16px below the text, buttons 16px apart, stacked below MUI's `sm` breakpoint. */
+export const ACTIONS_MARGIN_TOP_UNITS = 2;
+export const ACTIONS_GAP_UNITS = 2;
+export const ACTIONS_ROW_FROM = 600;
+export const ACTION_MIN_WIDTH = 120;
+/**
+ * The web actions ARE MUI's medium `contained` and `outlined` buttons: 6px
+ * 16px, or 5px 15px inside a 1px border at half alpha, 14px type, the
+ * theme's radius, a 20px start icon. The native side sizes the house
+ * `Button` to these.
+ */
+export const ACTION_BUTTON = {
+  contained: { paddingVertical: 6, paddingHorizontal: 16 },
+  outlined: { paddingVertical: 5, paddingHorizontal: 15 },
+  iconSize: 20,
+  outlinedBorderAlpha: 0.5,
+} as const;
+/** MUI's `theme.shadows[2]`, the elevation a contained button rests at. */
+export const MUI_CONTAINED_SHADOW =
+  '0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12)';
+
+/** The help link: 8px below whatever precedes it, marked when it leaves the app. */
+export const HELP_LINK_MARGIN_TOP_UNITS = 1;
+export const EXTERNAL_LINK_MARK = ' ↗';