Formatting controls

<TypographyControls
  value={typography}
  icons={{ bold, italic, underline, strike }}
  labels={{
    fontFamily: 'Font',
    defaultFont: 'Default',
    fontSize: 'Size',
    typographySection: 'Text style',
    bold: 'Bold',
    italic: 'Italic',
    underline: 'Underline',
    strike: 'Strikethrough',
  }}
  onChange={(patch) =>
    setTypography((value) => ({ ...value, ...patch }))
  }
/>
<p
  style={{
    fontFamily: typography.fontFamily,
    fontSize: typography.fontSize
      ? `${typography.fontSize}px`
      : undefined,
    fontWeight: typography.bold ? '700' : '400',
    fontStyle: typography.italic ? 'italic' : 'normal',
    textDecoration: [
      typography.underline ? 'underline' : '',
      typography.strike ? 'line-through' : '',
    ].join(' '),
  }}
>
  The quick brown fox
</p>

<IconChoiceGroup
  value={alignment}
  ariaLabel="Text alignment"
  options={[
    { value: 'left', label: 'Align left', icon: left },
    { value: 'center', label: 'Align center', icon: center },
    { value: 'right', label: 'Align right', icon: right },
  ]}
  onChange={setAlignment}
/>
<p style={{ textAlign: alignment as 'left' | 'center' | 'right' }}>
  Aligned text
</p>

<InspectorSection
  title="Details"
  icon={sliders}
  expandLabel="Expand Details"
  collapseLabel="Collapse Details"
  open
>
  <label class="rv-field">
    <span class="rv-field__label">Display name</span>
    <Input placeholder="Display name" />
  </label>
</InspectorSection>

<ComparisonPreview
  originalValue="1234.5"
  formatted="$1,234.50"
  formattedStyle={{
    justifyContent: 'flex-end',
    display: 'flex',
    alignItems: 'center',
  }}
  labels={{
    title: 'Preview',
    original: 'Original',
    formatted: 'Formatted',
    hint: 'Presentation only. The stored value is unchanged.',
  }}
/>