@webority/mobile-ui 0.0.0-stage → 0.0.33

package/lib/module/components/Stepper/Stepper.js

@@ -0,0 +1,775 @@
+"use strict";
+
+import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, Easing, Pressable, StyleSheet, Text, View } from 'react-native';
+import { createAnimatedValue, useTheme } from "../../theme/index.js";
+import { smoothCorners } from "../../utils/corners.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/hapticUtils.js";
+import { Skeleton } from "../Skeleton/index.js";
+
+/**
+ * `horizontal`: numbered circles in a row, joined by a line. `vertical`: the
+ * same circles in a column, with a description beside each. `segmented`: a
+ * "Step 1 of 3 · Label" caption over one bar per step, filled up to and
+ * including the active step.
+ */
+
+/**
+ * What a tap on a step does. Steps always run in order: every step before
+ * the active one is done, so a tap never leaves a gap. `none`: nothing, the
+ * stepper only shows progress. `back`: a done step becomes the active one.
+ * `select`: any step becomes the active one, and tapping the active step
+ * again leaves none active.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CIRCLE_SIZE = 24;
+const SEGMENT_HEIGHT = 4;
+const SEGMENT_GAP = 6;
+const PULSE_SIZE = 32;
+const PULSE_DURATION = 1100;
+const toneColorFor = (theme, tone) => {
+  switch (tone) {
+    case 'success':
+      return theme.colors.success;
+    case 'primary':
+    default:
+      return theme.colors.primary;
+  }
+};
+const StepCircle = ({
+  index,
+  step,
+  status,
+  toneColor,
+  upcomingColor,
+  upcomingFillColor,
+  textOnColor,
+  upcomingTextColor,
+  interactive,
+  canPress,
+  totalSteps,
+  onPress,
+  circleSize,
+  pulseSize,
+  pulseEnabled,
+  pulseDuration,
+  circleSlotStyle
+}) => {
+  const isActive = status === 'active';
+  const pulseScale = useRef(createAnimatedValue(1)).current;
+  const pulseOpacity = useRef(createAnimatedValue(0.5)).current;
+  useEffect(() => {
+    if (!isActive || !pulseEnabled) {
+      pulseScale.setValue(1);
+      pulseOpacity.setValue(0);
+      return;
+    }
+    // Native driver: this is a LOOP on `opacity` + `transform.scale`, and the
+    // view's other props are static, so there is no driver mixing. A looping
+    // animation is the one case where the JS thread cost is not negligible —
+    // it runs for as long as the step is active.
+    const loop = Animated.loop(Animated.parallel([Animated.sequence([Animated.timing(pulseScale, {
+      toValue: 1.4,
+      duration: pulseDuration,
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: true
+    }), Animated.timing(pulseScale, {
+      toValue: 1,
+      duration: 0,
+      useNativeDriver: true
+    })]), Animated.sequence([Animated.timing(pulseOpacity, {
+      toValue: 0,
+      duration: pulseDuration,
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: true
+    }), Animated.timing(pulseOpacity, {
+      toValue: 0.5,
+      duration: 0,
+      useNativeDriver: true
+    })])]));
+    loop.start();
+    return () => loop.stop();
+  }, [isActive, pulseScale, pulseOpacity, pulseEnabled, pulseDuration]);
+  const bgColor = status === 'upcoming' ? upcomingFillColor : toneColor;
+  const borderColor = status === 'upcoming' ? upcomingColor : toneColor;
+  const textColor = status === 'upcoming' ? upcomingTextColor : textOnColor;
+  const isComplete = status === 'complete';
+  const labelText = `Step ${index + 1} of ${totalSteps}, ${step.label}, ${status}`;
+  const inner = /*#__PURE__*/_jsxs(View, {
+    style: circleStyles.relative,
+    children: [isActive && pulseEnabled ? /*#__PURE__*/_jsx(Animated.View, {
+      pointerEvents: "none",
+      style: [circleStyles.pulse, {
+        width: pulseSize,
+        height: pulseSize,
+        borderRadius: pulseSize / 2,
+        ...smoothCorners,
+        backgroundColor: toneColor,
+        opacity: pulseOpacity,
+        transform: [{
+          scale: pulseScale
+        }]
+      }]
+    }) : null, /*#__PURE__*/_jsx(View, {
+      style: [circleStyles.circle, {
+        width: circleSize,
+        height: circleSize,
+        borderRadius: circleSize / 2,
+        ...smoothCorners,
+        backgroundColor: bgColor,
+        borderColor
+      }, circleSlotStyle],
+      children: step.icon ? step.icon : isComplete ? /*#__PURE__*/_jsx(Text, {
+        style: [circleStyles.glyph, {
+          color: textColor
+        }],
+        children: '✓'
+      }) : /*#__PURE__*/_jsx(Text, {
+        style: [circleStyles.glyph, {
+          color: textColor
+        }],
+        children: index + 1
+      })
+    })]
+  });
+  if (interactive) {
+    return /*#__PURE__*/_jsx(Pressable, {
+      onPress: () => onPress(index),
+      disabled: !canPress,
+      accessibilityRole: "button",
+      accessibilityLabel: labelText,
+      accessibilityState: {
+        selected: isActive,
+        disabled: !canPress
+      },
+      hitSlop: 8,
+      children: inner
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    accessibilityRole: "text",
+    accessibilityLabel: labelText,
+    accessibilityState: {
+      selected: isActive
+    },
+    children: inner
+  });
+};
+const circleStyles = StyleSheet.create({
+  relative: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  pulse: {
+    position: 'absolute'
+  },
+  circle: {
+    borderWidth: 2,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  glyph: {
+    fontSize: 12,
+    fontWeight: '600',
+    includeFontPadding: false
+  }
+});
+const Stepper = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    steps,
+    activeStep: activeStepProp,
+    defaultActiveStep = 0,
+    pressMode = 'none',
+    onStepPress,
+    onActiveStepChange,
+    variant = 'horizontal',
+    tone = 'primary',
+    formatCaption,
+    loading = false,
+    accessibilityLabel,
+    style,
+    containerStyle,
+    circleStyle,
+    labelStyle,
+    connectorStyle,
+    haptic,
+    testID
+  } = props;
+  const theme = useTheme();
+  const stepperTheme = theme.components.stepper;
+  const circleSize = stepperTheme?.circleSize ?? CIRCLE_SIZE;
+  const pulseSize = stepperTheme?.pulseSize ?? PULSE_SIZE;
+  const pulseEnabled = stepperTheme?.pulseAnimation ?? false;
+  const pulseDuration = stepperTheme?.pulseDuration ?? PULSE_DURATION;
+  const pressHaptic = resolveHaptic(haptic, 'selection');
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const toneColor = toneColorFor(theme, tone);
+  const upcomingColor = theme.colors.border.primary;
+  const upcomingFillColor = theme.colors.background.primary;
+  const upcomingTextColor = theme.colors.text.secondary;
+  const textOnColor = theme.colors.text.inverse;
+  const total = steps.length;
+  const interactive = pressMode !== 'none';
+
+  // Controlled when the prop is passed (even as null) and kept here
+  // otherwise, the Accordion / Carousel convention.
+  const activeControlled = activeStepProp !== undefined;
+  const [innerActive, setInnerActive] = useState(defaultActiveStep);
+  const rawActive = activeControlled ? activeStepProp : innerActive;
+  const active = rawActive === null || rawActive === undefined || rawActive < 0 ? null : rawActive;
+
+  // The one status rule every variant draws from: steps run in order, so
+  // everything before the active step is done and nothing after it is.
+  const statusOf = i => {
+    if (active === null) {
+      return 'upcoming';
+    }
+    return i < active ? 'complete' : i === active ? 'active' : 'upcoming';
+  };
+  const statuses = steps.map((_, i) => statusOf(i));
+  const reachedCount = statuses.filter(st => st !== 'upcoming').length;
+  const doneCount = statuses.filter(st => st === 'complete').length;
+  const canPressStatus = status => pressMode === 'back' ? status === 'complete' : interactive;
+  const handleStepPress = i => {
+    if (!canPressStatus(statuses[i])) {
+      return;
+    }
+    if (pressHaptic) {
+      triggerHaptic(pressHaptic);
+    }
+    onStepPress?.(i);
+    const next = pressMode === 'select' && i === active ? null : i;
+    if (!activeControlled) {
+      setInnerActive(next);
+    }
+    onActiveStepChange?.(next);
+  };
+
+  // One animated value drives every line and bar: how many steps are
+  // reached, from 0 to the step count. Each segment reads only its own
+  // one-step slice of it, so a jump from step 1 to step 4 fills the
+  // segments in between one after another, like a single line drawing,
+  // rather than all at once. The run takes one motion step per step
+  // crossed, so every segment moves at the same pace however far the jump.
+  const reached = useRef(createAnimatedValue(reachedCount)).current;
+  const lastReachedRef = useRef(reachedCount);
+  useEffect(() => {
+    const from = lastReachedRef.current;
+    if (from === reachedCount) {
+      return;
+    }
+    lastReachedRef.current = reachedCount;
+    const animation = Animated.timing(reached, {
+      toValue: reachedCount,
+      duration: theme.motion.duration.normal * Math.abs(reachedCount - from),
+      easing: Easing.linear,
+      useNativeDriver: false
+    });
+    animation.start();
+    return () => animation.stop();
+  }, [reachedCount, reached, theme.motion]);
+
+  // The share of a segment that is filled while `reached` passes [from, to].
+  const sliceOf = from => reached.interpolate({
+    inputRange: [from, from + 1],
+    outputRange: ['0%', '100%'],
+    extrapolate: 'clamp'
+  });
+  // Horizontal: one track from the first circle's centre to the last's. It
+  // is full when the last step is reached, so it spans reached counts 1 to
+  // the step count.
+  const widthInterp = total <= 1 ? '0%' : reached.interpolate({
+    inputRange: [1, total],
+    outputRange: ['0%', '100%'],
+    extrapolate: 'clamp'
+  });
+  const activeInRange = active !== null && active < total ? active : null;
+  const a11yLabel = accessibilityLabel ?? (activeInRange !== null ? `Progress: step ${activeInRange + 1} of ${total}` : `Progress: ${doneCount} of ${total} steps done`);
+
+  // Measure row width and inset the connector in pixels so it lines up
+  // with the flex-computed circle centres. Percentage insets (50/total%)
+  // round independently from flex layout on fractional-density screens
+  // and can leave the line poking past the first/last node by a pixel.
+  const [hRowWidth, setHRowWidth] = useState(0);
+  const connectorInset = total > 0 && hRowWidth > 0 ? hRowWidth / (2 * total) : 0;
+  const renderHorizontal = () => /*#__PURE__*/_jsxs(View, {
+    style: styles.hRow,
+    onLayout: e => setHRowWidth(e.nativeEvent.layout.width),
+    children: [/*#__PURE__*/_jsxs(View, {
+      pointerEvents: "none",
+      style: [styles.hConnectorContainer, {
+        left: connectorInset,
+        right: connectorInset
+      }, connectorStyle],
+      children: [/*#__PURE__*/_jsx(View, {
+        style: [styles.hConnectorTrack, {
+          backgroundColor: upcomingColor
+        }]
+      }), /*#__PURE__*/_jsx(Animated.View, {
+        style: [styles.hConnectorFill, {
+          backgroundColor: toneColor,
+          width: widthInterp
+        }]
+      })]
+    }), steps.map((step, i) => {
+      const status = statuses[i];
+      return /*#__PURE__*/_jsxs(View, {
+        style: styles.hStepItem,
+        children: [/*#__PURE__*/_jsx(StepCircle, {
+          index: i,
+          step: step,
+          status: status,
+          toneColor: toneColor,
+          upcomingColor: upcomingColor,
+          upcomingFillColor: upcomingFillColor,
+          onPressColor: toneColor,
+          textOnColor: textOnColor,
+          upcomingTextColor: upcomingTextColor,
+          interactive: interactive,
+          canPress: canPressStatus(status),
+          totalSteps: total,
+          onPress: handleStepPress,
+          circleSize: circleSize,
+          pulseSize: pulseSize,
+          pulseEnabled: pulseEnabled,
+          pulseDuration: pulseDuration,
+          circleSlotStyle: circleStyle
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.hLabel, {
+            color: status === 'upcoming' ? theme.colors.text.tertiary : theme.colors.text.primary,
+            fontSize: theme.typography.fontSize.xs
+          }, labelStyle],
+          numberOfLines: 1,
+          children: step?.label ?? ' '
+        })]
+      }, step.key);
+    })]
+  });
+  const renderVertical = () => /*#__PURE__*/_jsx(View, {
+    style: styles.vCol,
+    children: steps.map((step, i) => {
+      const status = statuses[i];
+      const isLast = i === total - 1;
+      return /*#__PURE__*/_jsxs(View, {
+        style: styles.vRow,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.vLeft,
+          children: [/*#__PURE__*/_jsx(StepCircle, {
+            index: i,
+            step: step,
+            status: status,
+            toneColor: toneColor,
+            upcomingColor: upcomingColor,
+            upcomingFillColor: upcomingFillColor,
+            onPressColor: toneColor,
+            textOnColor: textOnColor,
+            upcomingTextColor: upcomingTextColor,
+            interactive: interactive,
+            canPress: canPressStatus(status),
+            totalSteps: total,
+            onPress: handleStepPress,
+            circleSize: circleSize,
+            pulseSize: pulseSize,
+            pulseEnabled: pulseEnabled,
+            pulseDuration: pulseDuration,
+            circleSlotStyle: circleStyle
+          }), !isLast ? /*#__PURE__*/_jsxs(View, {
+            style: [styles.vConnectorContainer, connectorStyle],
+            children: [/*#__PURE__*/_jsx(View, {
+              style: [styles.vConnectorTrack, {
+                backgroundColor: upcomingColor
+              }]
+            }), /*#__PURE__*/_jsx(Animated.View, {
+              style: [styles.vConnectorFill, {
+                backgroundColor: toneColor,
+                // Full once the step below is reached, empty otherwise, and
+                // swept in its turn as the reached count passes it.
+                // Step i + 1 is reached once the count passes i + 2.
+                height: sliceOf(i + 1)
+              }]
+            })]
+          }) : null]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.vBody,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: [styles.vLabel, {
+              color: status === 'upcoming' ? theme.colors.text.tertiary : theme.colors.text.primary,
+              fontSize: theme.typography.fontSize.base,
+              fontWeight: theme.typography.fontWeight.semibold
+            }, labelStyle],
+            numberOfLines: 1,
+            children: step?.label ?? ' '
+          }), step.description ? /*#__PURE__*/_jsx(Text, {
+            style: [styles.vDescription, {
+              color: theme.colors.text.secondary,
+              fontSize: theme.typography.fontSize.sm
+            }],
+            numberOfLines: 3,
+            children: step.description
+          }) : null]
+        })]
+      }, step.key);
+    })
+  });
+  const renderSegmented = () => {
+    const shownStep = activeInRange !== null ? steps[activeInRange] : undefined;
+    const caption = formatCaption ? formatCaption(activeInRange, total, shownStep) : activeInRange !== null ? `Step ${activeInRange + 1} of ${total}${shownStep?.label ? ` · ${shownStep.label}` : ''}` : `${doneCount} of ${total} done`;
+    return /*#__PURE__*/_jsxs(View, {
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [styles.sCaption, {
+          color: theme.colors.text.secondary,
+          fontSize: theme.typography.fontSize.sm,
+          marginBottom: theme.spacing.sm
+        }, labelStyle],
+        numberOfLines: 1,
+        children: caption
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.sRow,
+        children: steps.map((step, i) => {
+          const status = statuses[i];
+          const labelText = `Step ${i + 1} of ${total}, ${step.label}, ${status}`;
+          const bar = /*#__PURE__*/_jsx(View, {
+            testID: testID ? `${testID}-segment-${i}` : undefined,
+            style: [styles.sTrack, {
+              backgroundColor: upcomingColor
+            }, connectorStyle],
+            children: /*#__PURE__*/_jsx(Animated.View, {
+              style: [styles.sFill, {
+                backgroundColor: toneColor,
+                width: sliceOf(i)
+              }]
+            })
+          });
+          if (interactive) {
+            const canPress = canPressStatus(status);
+            return /*#__PURE__*/_jsx(Pressable, {
+              style: styles.sItem,
+              onPress: () => handleStepPress(i),
+              disabled: !canPress,
+              accessibilityRole: "button",
+              accessibilityLabel: labelText,
+              accessibilityState: {
+                selected: status === 'active',
+                disabled: !canPress
+              }
+              // A 4 pt bar is too thin to hit; the slop makes a 28 pt target.
+              ,
+              hitSlop: {
+                top: 12,
+                bottom: 12
+              },
+              children: bar
+            }, step.key);
+          }
+          return /*#__PURE__*/_jsx(View, {
+            style: styles.sItem,
+            accessibilityRole: "text",
+            accessibilityLabel: labelText,
+            accessibilityState: {
+              selected: status === 'active'
+            },
+            children: bar
+          }, step.key);
+        })
+      })]
+    });
+  };
+  const rendered = /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    style: [styles.container, containerStyle, style],
+    testID: testID,
+    accessibilityRole: "progressbar",
+    accessibilityLabel: a11yLabel,
+    accessibilityValue: {
+      min: 0,
+      max: total,
+      now: reachedCount
+    },
+    children: variant === 'segmented' ? renderSegmented() : variant === 'vertical' ? renderVertical() : renderHorizontal()
+  });
+  if (loading) {
+    return /*#__PURE__*/_jsx(StepperSkeleton, {
+      ...props
+    });
+  }
+  return rendered;
+});
+Stepper.displayName = 'Stepper';
+
+/**
+ * Authored placeholder shape for `<Stepper>`. Mirrors the real horizontal
+ * layout — a row of circles spaced evenly with a flat connector bar passing
+ * through their centers — so the on-screen footprint doesn't reflow when
+ * data loads. Vertical variant gets a stacked column with the same circle +
+ * label + description pattern.
+ *
+ * Attached as the `Skeleton` static so `<SkeletonContent>` and any consumer
+ * of the auto-walker substitutes this shape automatically. Also rendered
+ * directly when `loading` is true on the live `<Stepper>`.
+ */
+const StepperSkeleton = ({
+  steps,
+  variant = 'horizontal',
+  containerStyle,
+  style,
+  testID
+}) => {
+  const theme = useTheme();
+  const stepperTheme = theme.components.stepper;
+  const circleSize = stepperTheme?.circleSize ?? CIRCLE_SIZE;
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const total = steps.length || 3;
+  if (variant === 'segmented') {
+    return /*#__PURE__*/_jsxs(View, {
+      style: [styles.container, containerStyle, style],
+      testID: testID,
+      accessibilityRole: "progressbar",
+      accessibilityState: {
+        busy: true
+      },
+      children: [/*#__PURE__*/_jsx(Skeleton, {
+        shape: "text",
+        width: "45%",
+        height: 14,
+        style: {
+          marginBottom: theme.spacing.sm
+        }
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.sRow,
+        children: Array.from({
+          length: total
+        }).map((_, i) => /*#__PURE__*/_jsx(View, {
+          style: styles.sItem,
+          children: /*#__PURE__*/_jsx(Skeleton, {
+            width: "100%",
+            height: SEGMENT_HEIGHT,
+            radius: SEGMENT_HEIGHT / 2
+          })
+        }, `sk-step-${i}`))
+      })]
+    });
+  }
+  if (variant === 'vertical') {
+    return /*#__PURE__*/_jsx(View, {
+      style: [styles.container, containerStyle, style],
+      testID: testID,
+      accessibilityRole: "progressbar",
+      accessibilityState: {
+        busy: true
+      },
+      children: /*#__PURE__*/_jsx(View, {
+        style: skeletonStyles.vCol,
+        children: Array.from({
+          length: total
+        }).map((_, i) => {
+          const isLast = i === total - 1;
+          return /*#__PURE__*/_jsxs(View, {
+            style: skeletonStyles.vRow,
+            children: [/*#__PURE__*/_jsxs(View, {
+              style: [skeletonStyles.vLeft, {
+                width: circleSize + 8
+              }],
+              children: [/*#__PURE__*/_jsx(Skeleton, {
+                shape: "circle",
+                width: circleSize,
+                height: circleSize
+              }), !isLast ? /*#__PURE__*/_jsx(Skeleton, {
+                width: 2,
+                height: 36
+              }) : null]
+            }), /*#__PURE__*/_jsxs(View, {
+              style: skeletonStyles.vBody,
+              children: [/*#__PURE__*/_jsx(Skeleton, {
+                shape: "text",
+                width: "55%",
+                height: 16,
+                style: {
+                  marginBottom: 4
+                }
+              }), /*#__PURE__*/_jsx(Skeleton, {
+                shape: "text",
+                width: "80%",
+                height: 12
+              })]
+            })]
+          }, `sk-step-${i}`);
+        })
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.container, containerStyle, style],
+    testID: testID,
+    accessibilityRole: "progressbar",
+    accessibilityState: {
+      busy: true
+    },
+    children: /*#__PURE__*/_jsxs(View, {
+      style: styles.hRow,
+      children: [/*#__PURE__*/_jsx(View, {
+        pointerEvents: "none",
+        style: [styles.hConnectorContainer, {
+          left: `${50 / total}%`,
+          right: `${50 / total}%`
+        }],
+        children: /*#__PURE__*/_jsx(Skeleton, {
+          width: "100%",
+          height: 2,
+          radius: 1
+        })
+      }), Array.from({
+        length: total
+      }).map((_, i) => /*#__PURE__*/_jsxs(View, {
+        style: styles.hStepItem,
+        children: [/*#__PURE__*/_jsx(Skeleton, {
+          shape: "circle",
+          width: circleSize,
+          height: circleSize
+        }), /*#__PURE__*/_jsx(Skeleton, {
+          shape: "text",
+          width: "80%",
+          height: 12,
+          style: {
+            marginTop: theme.spacing.xs
+          }
+        })]
+      }, `sk-step-${i}`))]
+    })
+  });
+};
+StepperSkeleton.displayName = 'StepperSkeleton';
+Stepper.Skeleton = StepperSkeleton;
+const skeletonStyles = StyleSheet.create({
+  vCol: {
+    flexDirection: 'column'
+  },
+  vRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-start'
+  },
+  vLeft: {
+    alignItems: 'center'
+  },
+  vBody: {
+    flex: 1,
+    paddingLeft: 12,
+    paddingBottom: 16
+  }
+});
+const buildStyles = theme => StyleSheet.create({
+  container: {
+    width: '100%'
+  },
+  // Horizontal
+  hRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+    position: 'relative'
+  },
+  hConnectorContainer: {
+    position: 'absolute',
+    top: CIRCLE_SIZE / 2 - 1,
+    height: 2,
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  hConnectorTrack: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    height: 2,
+    borderRadius: 1,
+    ...smoothCorners
+  },
+  hConnectorFill: {
+    position: 'absolute',
+    left: 0,
+    height: 2,
+    borderRadius: 1,
+    ...smoothCorners
+  },
+  hStepItem: {
+    alignItems: 'center',
+    flex: 1
+  },
+  hLabel: {
+    marginTop: theme.spacing.xs,
+    textAlign: 'center'
+  },
+  // Vertical
+  vCol: {
+    flexDirection: 'column'
+  },
+  vRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-start'
+  },
+  // Stretches to the row's height so the connector below the circle,
+  // which takes the rest of the column, reaches the next circle however
+  // many lines the description runs to.
+  vLeft: {
+    alignItems: 'center',
+    alignSelf: 'stretch',
+    width: CIRCLE_SIZE + 8
+  },
+  // Runs from one circle's edge to the next with no gap, as the horizontal
+  // line does. The minimum is the old 24 plus the two 4 pt gaps it used to
+  // leave, so the spacing between steps is unchanged.
+  vConnectorContainer: {
+    flex: 1,
+    width: 2,
+    minHeight: 32,
+    position: 'relative',
+    alignSelf: 'center'
+  },
+  vConnectorTrack: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    width: 2,
+    borderRadius: 1,
+    ...smoothCorners
+  },
+  vConnectorFill: {
+    position: 'absolute',
+    top: 0,
+    width: 2,
+    borderRadius: 1,
+    ...smoothCorners
+  },
+  vBody: {
+    flex: 1,
+    paddingLeft: theme.spacing.sm,
+    paddingBottom: theme.spacing.md
+  },
+  vLabel: {
+    marginBottom: 2
+  },
+  vDescription: {},
+  // Segmented
+  sCaption: {
+    includeFontPadding: false
+  },
+  sRow: {
+    flexDirection: 'row',
+    columnGap: SEGMENT_GAP
+  },
+  sItem: {
+    flex: 1
+  },
+  // No smooth corners on a 4 pt bar, and the fill rounds itself rather
+  // than relying on the track's clip.
+  sTrack: {
+    height: SEGMENT_HEIGHT,
+    borderRadius: SEGMENT_HEIGHT / 2,
+    overflow: 'hidden'
+  },
+  sFill: {
+    height: SEGMENT_HEIGHT,
+    borderRadius: SEGMENT_HEIGHT / 2
+  }
+});
+export { Stepper };
+export default Stepper;
+//# sourceMappingURL=Stepper.js.map