@12-apps/ui 6.20.0 → 6.22.0

package/src/components/form/Switch/Switch.metrics.ts

@@ -0,0 +1,191 @@
+import type { SwitchVariant } from './Switch.base';
+import { alpha } from '../../../tokens/color';
+import type { SizeValue } from '../../../tokens/vocabulary';
+
+/**
+ * THE NUMBERS BOTH `Switch` RENDERERS DRAW WITH.
+ *
+ * `Switch.styles.ts` (web, emotion over MUI's `Switch`) and
+ * `Switch.native.tsx` (React Native, drawing the track and thumb itself) read
+ * this one table: the geometry per size, the four looks' radii and shadows,
+ * the resting track colours, and the type the label, the description and the
+ * helper are set in.
+ *
+ * Spacing is in SPACING UNITS where the web writes `theme.spacing(n)`;
+ * everything else is px, a ratio or an alpha.
+ */
+
+/** MUI's `palette.common.black`, which `UiTheme` does not carry. */
+export const SWITCH_BLACK = '#000';
+
+export interface SwitchGeometry {
+  width: number;
+  height: number;
+  padding: number;
+  thumbSize: number;
+}
+
+export const SWITCH_SIZES: Record<SizeValue, SwitchGeometry> = {
+  xs: { width: 34, height: 18, padding: 1, thumbSize: 14 },
+  sm: { width: 42, height: 22, padding: 1, thumbSize: 18 },
+  md: { width: 50, height: 26, padding: 1, thumbSize: 22 },
+  lg: { width: 58, height: 30, padding: 2, thumbSize: 24 },
+  xl: { width: 66, height: 34, padding: 2, thumbSize: 28 },
+};
+
+/** The four platform looks. `label` prints its wording on a `default` track. */
+export type SwitchLook = 'ios' | 'android' | 'material' | 'default';
+
+export const lookOf = (variant?: string): SwitchLook => {
+  if (variant === 'ios') return 'ios';
+  if (variant === 'android') return 'android';
+  if (variant === 'material') return 'material';
+  return 'default';
+};
+
+/** Track geometry once the caller's overrides and the size preset are combined. */
+export const geometryOf = (size: SizeValue | undefined, width?: number, height?: number): SwitchGeometry => {
+  const preset = SWITCH_SIZES[size as SizeValue] ?? SWITCH_SIZES.md;
+  return { ...preset, width: width || preset.width, height: height || preset.height };
+};
+
+/**
+ * The thumb's corner. `'50%'` is what the web emits; a renderer with no
+ * percentage radius asks {@link thumbRadius} for the px instead.
+ */
+export const THUMB_RADIUS: Record<SwitchLook, (thumbSize: number) => number | string> = {
+  ios: () => '50%',
+  android: () => 4,
+  material: (thumbSize) => thumbSize / 3,
+  default: () => '50%',
+};
+
+export const TRACK_RADIUS: Record<SwitchLook, (height: number) => number> = {
+  ios: (height) => height / 2,
+  android: (height) => height / 3,
+  material: (height) => height / 2.5,
+  default: (height) => height / 2,
+};
+
+/** The web's `'50%'` as the px a circle of this size needs. */
+export const thumbRadius = (look: SwitchLook, thumbSize: number): number => {
+  const radius = THUMB_RADIUS[look](thumbSize);
+  return typeof radius === 'number' ? radius : thumbSize / 2;
+};
+
+/**
+ * The elevation the thumb rests at per look — an INDEX into `theme.shadows`,
+ * not the shadow itself, so a host that re-themes MUI's elevations keeps
+ * moving the web. {@link MUI_SHADOWS} carries MUI's own values for the native
+ * side, which has no `theme.shadows` to read.
+ */
+export const THUMB_ELEVATION: Record<SwitchLook, number> = { ios: 0, android: 3, material: 2, default: 2 };
+
+export const MUI_SHADOWS: Record<number, string> = {
+  2: '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)',
+  3: '0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)',
+};
+
+/** The iOS thumb's own three-layer shadow, which the web writes out literally. */
+export const IOS_THUMB_SHADOW = `0 3px 1px 0 ${alpha(SWITCH_BLACK, 0.04)}, 0 3px 8px 0 ${alpha(SWITCH_BLACK, 0.12)}, 0 1px 0 0 ${alpha(SWITCH_BLACK, 0.08)}`;
+
+/** The iOS track's inset hairline. */
+export const iosTrackShadow = (): string =>
+  `inset 0 0 0 0.5px ${alpha(SWITCH_BLACK, 0.1)}, inset 0 2px 3px ${alpha(SWITCH_BLACK, 0.12)}`;
+
+/** The resting track: a black wash on iOS, the disabled ink elsewhere. */
+export const TRACK_ALPHA = { ios: 0.1, android: 0.2, other: 0.3 } as const;
+
+/**
+ * `black` is MUI's `palette.common.black` on the web and {@link SWITCH_BLACK}
+ * on native, whose theme has no `common` — the same `#000` either way, passed
+ * in rather than assumed so a host that themes it still moves the web.
+ */
+export const trackColor = (ink: { black: string; disabled: string }, look: SwitchLook): string => {
+  if (look === 'ios') return alpha(ink.black, TRACK_ALPHA.ios);
+  const strength = look === 'android' ? TRACK_ALPHA.android : TRACK_ALPHA.other;
+  return alpha(ink.disabled, strength);
+};
+
+/** How far the thumb travels, and where it starts. iOS insets differently. */
+export const thumbTravel = (look: SwitchLook, geometry: SwitchGeometry): { rest: number; travel: number } => {
+  const { width, thumbSize, padding } = geometry;
+  if (look === 'ios') {
+    // The web nudges the whole switch base 2px right and shortens the trip.
+    return { rest: padding + IOS_BASE_OFFSET, travel: width - thumbSize - IOS_TRAVEL_INSET };
+  }
+  return { rest: padding, travel: width - thumbSize - padding * 2 };
+};
+
+export const IOS_BASE_OFFSET = 2;
+export const IOS_TRAVEL_INSET = 4;
+
+/** MUI's 300ms `cubic-bezier(0.4, 0, 0.2, 1)`, on everything the switch moves. */
+export const SWITCH_TRANSITION = { ms: 300, easing: 'cubic-bezier(0.4, 0, 0.2, 1)' } as const;
+
+/** The disabled treatment: the thumb greys and the track fades. */
+export const DISABLED = { trackOpacity: 0.3, checkedTrackOpacity: 0.5, thumbGrey: 100 } as const;
+
+/** `glass`: a paper wash under a blur, inside a faint divider hairline. */
+export const SWITCH_GLASS = {
+  trackAlpha: 0.1,
+  thumbAlpha: 0.9,
+  borderAlpha: 0.2,
+  trackBlur: 20,
+  thumbBlur: 10,
+} as const;
+
+/** `gradient`: the checked track runs light → main → dark; the resting one is fainter. */
+export const SWITCH_GRADIENT = {
+  checked: { angleDeg: 90, stops: [0, 50, 100] },
+  resting: { angleDeg: 135, lightAlpha: 0.3, mainAlpha: 0.2 },
+  shimmerMs: 3000,
+} as const;
+
+/** `glow`: a halo of the hue around the checked track, breathing every two seconds. */
+export const SWITCH_GLOW = { blur: 10, alpha: 0.6, insetBlur: 10, insetAlpha: 0.2, ms: 2000 } as const;
+
+/** `pulse`: the thumb breathes; `ripple`: a wash of the hue expands under the pointer. */
+export const SWITCH_PULSE = { ms: 2000, minOpacity: 0.7, minScale: 0.95 } as const;
+export const SWITCH_RIPPLE = { alpha: 0.2, ms: 600, scale: 2 } as const;
+
+/** `loading`: a 2px ring inside the thumb, turning once a second. */
+export const SWITCH_SPINNER = { sizeRatio: 0.6, borderWidth: 2, ms: 1000 } as const;
+
+/** The two icons overlaid on the track, at their own size per step of the scale. */
+export const SWITCH_ICON_SIZES: Record<SizeValue, number> = { xs: 12, sm: 14, md: 16, lg: 18, xl: 20 };
+/** Where a shown icon sits, and how small a hidden one is drawn. */
+export const SWITCH_ICON = { inset: 4, hiddenScale: 0.8 } as const;
+
+/** The wording the `label` variant prints inside the track: 0.75rem at 500, 8px in. */
+export const TRACK_LABEL = { fontSize: 12, fontWeight: 500, insetUnits: 1 } as const;
+
+/** MUI's `body2` for the label, `caption` for the description and the helper text. */
+export const SWITCH_LABEL = { fontSize: 14, lineHeight: 1.43, fontWeight: 500 } as const;
+export const SWITCH_DESCRIPTION = { fontSize: 12, lineHeight: 1.66, marginTopUnits: 0.5 } as const;
+export const SWITCH_HELPER = { fontSize: 12, lineHeight: 1.66, marginTopUnits: 1 } as const;
+
+/** The label row: 16px from the control beside it, 8px above or below it. */
+export const LABEL_GAP_UNITS = { beside: 2, stacked: 1 } as const;
+
+/**
+ * `neutral`'s three greys, and the literals the web falls back to for a theme
+ * whose grey ramp omits a step. Same three steps `Button` draws its neutral
+ * from.
+ */
+export const NEUTRAL_GREY = { main: 700, dark: 800, light: 500 } as const;
+export const NEUTRAL_FALLBACK = { main: '#616161', dark: '#424242', light: '#9e9e9e' } as const;
+export const NEUTRAL_CONTRAST = '#fff';
+
+/** Hover: the thumb lifts a shade and takes a halo of the hue. */
+export const SWITCH_HOVER = { thumbScale: 1.05, elevation: 4, blur: 12, alpha: 0.2 } as const;
+
+/** Focus: MUI rings the thumb rather than moving it. */
+export const SWITCH_FOCUS_RING = { width: 6, alpha: 0.2 } as const;
+
+/** A duration as the CSS the web has always emitted: `2000` → `2s`. */
+export const seconds = (ms: number): string => `${ms / 1000}s`;
+
+/** Whether this variant prints its wording inside the track. */
+export const showsTrackLabels = (variant: SwitchVariant | undefined, onText?: string, offText?: string): boolean =>
+  variant === 'label' && Boolean(onText ?? offText);

package/src/components/form/Switch/Switch.native.tsx

@@ -0,0 +1,360 @@
+import * as React from 'react';
+import {
+  ActivityIndicator,
+  Animated,
+  Easing,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text as RNText,
+  View,
+  type GestureResponderEvent,
+  type ViewStyle,
+} from 'react-native';
+
+import { resolveSwitchProps, withoutSwitchProps, type ResolvedSwitchProps } from './Switch.helpers';
+import {
+  descriptionTextStyle,
+  helperTextStyle,
+  labelTextStyle,
+  switchPalette,
+  thumbStyle,
+  trackStyle,
+  type SwitchPaint,
+  type SwitchState,
+} from './Switch.look.native';
+import {
+  LABEL_GAP_UNITS,
+  SWITCH_ICON,
+  SWITCH_ICON_SIZES,
+  SWITCH_PULSE,
+  SWITCH_SPINNER,
+  SWITCH_TRANSITION,
+  TRACK_LABEL,
+  geometryOf,
+  lookOf,
+  showsTrackLabels,
+  thumbTravel,
+  type SwitchGeometry,
+} from './Switch.metrics';
+import type { SwitchProps } from './Switch.types.native';
+import { webKeyDown } from '../../../platform/aria';
+import { childTestId, resolveTestId } from '../../../platform/test-id';
+import { useUiTheme } from '../../../provider/use-ui-theme.native';
+import type { UiTheme } from '../../../tokens/theme';
+
+const nativeDriver = Platform.OS !== 'web';
+
+/** The web writes the `on` wording in white, whatever the hue behind it. */
+const TRACK_LABEL_ON_INK = '#fff';
+
+/** A 0→1 value that follows `on`, over MUI's 300ms curve unless animation is off. */
+function useProgress(on: boolean, animated: boolean): Animated.Value {
+  const progress = React.useRef(new Animated.Value(on ? 1 : 0)).current;
+  React.useEffect(() => {
+    const timing = Animated.timing(progress, {
+      toValue: on ? 1 : 0,
+      duration: animated ? SWITCH_TRANSITION.ms : 0,
+      easing: Easing.bezier(0.4, 0, 0.2, 1),
+      useNativeDriver: nativeDriver,
+    });
+    timing.start();
+    return () => timing.stop();
+  }, [on, animated, progress]);
+  return progress;
+}
+
+/** The web's `pulseAnimation` on the thumb: it breathes to 0.7 and 0.95 and back. */
+function usePulse(enabled: boolean): { opacity?: Animated.AnimatedInterpolation<number>; scale?: Animated.AnimatedInterpolation<number> } {
+  const progress = React.useRef(new Animated.Value(0)).current;
+  React.useEffect(() => {
+    if (!enabled) return undefined;
+    const loop = Animated.loop(
+      Animated.timing(progress, {
+        toValue: 1,
+        duration: SWITCH_PULSE.ms,
+        easing: Easing.inOut(Easing.ease),
+        useNativeDriver: nativeDriver,
+      }),
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [enabled, progress]);
+  if (!enabled) return {};
+  return {
+    opacity: progress.interpolate({ inputRange: [0, 0.5, 1], outputRange: [1, SWITCH_PULSE.minOpacity, 1] }),
+    scale: progress.interpolate({ inputRange: [0, 0.5, 1], outputRange: [1, SWITCH_PULSE.minScale, 1] }),
+  };
+}
+
+/** The wording the `label` variant prints inside the track, both halves at once. */
+function TrackLabels({
+  theme,
+  onText,
+  offText,
+  contrastText,
+}: {
+  theme: UiTheme;
+  onText?: string;
+  offText?: string;
+  contrastText: string;
+}): React.JSX.Element {
+  const inset = theme.spacing(TRACK_LABEL.insetUnits);
+  const base = {
+    fontFamily: theme.typography.fontFamily,
+    fontSize: TRACK_LABEL.fontSize,
+    fontWeight: String(TRACK_LABEL.fontWeight) as 'normal',
+  };
+  return (
+    <View style={styles.trackLabels}>
+      <RNText style={[base, { color: contrastText, marginLeft: inset }]}>{onText ?? ''}</RNText>
+      <RNText style={[base, { color: theme.palette.text.secondary, marginRight: inset }]}>
+        {offText ?? ''}
+      </RNText>
+    </View>
+  );
+}
+
+/**
+ * One of the two icons overlaid on the track.
+ *
+ * The web centres a hidden icon on the track and pins a shown one to `left: 4`
+ * (or `right: 4`) with a `translate(∓50%)` — which puts half of it outside the
+ * track. Same arithmetic here, in px.
+ */
+function SwitchIcon({
+  icon,
+  shown,
+  animated,
+  size,
+  side,
+  width,
+}: {
+  icon: React.ReactNode;
+  shown: boolean;
+  animated: boolean;
+  size: number;
+  side: 'on' | 'off';
+  width: number;
+}): React.JSX.Element {
+  const half = size / 2;
+  const offset = shown ? SWITCH_ICON.inset - half : width / 2 - half;
+  return (
+    <View
+      style={[
+        styles.icon,
+        side === 'on' ? { left: offset } : { right: offset },
+        {
+          width: size,
+          height: size,
+          opacity: shown ? 1 : 0,
+          transform: [{ translateY: -half }, { scale: shown && animated ? 1 : SWITCH_ICON.hiddenScale }],
+        },
+      ]}
+    >
+      {icon}
+    </View>
+  );
+}
+
+interface ControlProps {
+  props: ResolvedSwitchProps;
+  theme: UiTheme;
+  checked: boolean;
+  inactive: boolean;
+  onToggle: (event?: GestureResponderEvent) => void;
+  rest: Record<string, unknown>;
+  testID: string;
+}
+
+/** The track, the thumb, and everything overlaid on them. */
+function SwitchControl({ props, theme, checked, inactive, onToggle, rest, testID }: ControlProps): React.JSX.Element {
+  const { variant, color, size, animated, loading, onIcon, offIcon, onText, offText } = props;
+  const geometry: SwitchGeometry = geometryOf(size, props.trackWidth, props.trackHeight);
+  const look = lookOf(variant);
+  const palette = switchPalette(theme, color);
+  const state: SwitchState = { checked, disabled: inactive };
+  const paint: SwitchPaint = props;
+  const { rest: restX, travel } = thumbTravel(look, geometry);
+  const progress = useProgress(checked, animated);
+  const pulse = usePulse(props.pulse && !loading);
+  const iconSize = SWITCH_ICON_SIZES[size];
+
+  return (
+    <Pressable
+      testID={testID}
+      role="checkbox"
+      aria-checked={checked}
+      aria-disabled={inactive}
+      disabled={inactive}
+      onPress={onToggle}
+      {...webKeyDown((event) => {
+        if (event.key === ' ' || event.key === 'Spacebar') onToggle();
+      })}
+      style={{ width: geometry.width, height: geometry.height }}
+      {...rest}
+    >
+      <View style={trackStyle(theme, paint, palette, geometry, look, state)} />
+      {showsTrackLabels(variant, onText, offText) ? (
+        <TrackLabels theme={theme} onText={onText} offText={offText} contrastText={TRACK_LABEL_ON_INK} />
+      ) : null}
+      {onIcon == null ? null : (
+        <SwitchIcon icon={onIcon} shown={checked} animated={animated} size={iconSize} side="on" width={geometry.width} />
+      )}
+      {offIcon == null ? null : (
+        <SwitchIcon icon={offIcon} shown={!checked} animated={animated} size={iconSize} side="off" width={geometry.width} />
+      )}
+      <Animated.View
+        style={[
+          thumbStyle(theme, paint, geometry, look, state),
+          { top: geometry.padding, left: restX, opacity: pulse.opacity },
+          {
+            transform: [
+              { translateX: progress.interpolate({ inputRange: [0, 1], outputRange: [0, travel] }) },
+              ...(pulse.scale === undefined ? [] : [{ scale: pulse.scale }]),
+            ],
+          },
+        ]}
+      >
+        {loading ? (
+          <ActivityIndicator
+            size={geometry.thumbSize * SWITCH_SPINNER.sizeRatio}
+            color={palette.main}
+            accessibilityLabel="loading"
+          />
+        ) : null}
+      </Animated.View>
+    </Pressable>
+  );
+}
+
+/** The label and its description, in the column beside (or above) the control. */
+function LabelBlock({
+  theme,
+  label,
+  description,
+  error,
+  testID,
+}: {
+  theme: UiTheme;
+  label: string;
+  description?: string;
+  error: boolean;
+  testID: string;
+}): React.JSX.Element {
+  return (
+    <View style={styles.labelBlock}>
+      <RNText testID={testID} style={labelTextStyle(theme, error)}>
+        {label}
+      </RNText>
+      {description === undefined ? null : (
+        <RNText style={descriptionTextStyle(theme, error)}>{description}</RNText>
+      )}
+    </View>
+  );
+}
+
+/** The row (or column) the label and the control share, per `labelPosition`. */
+function labelRowStyle(theme: UiTheme, position: string): ViewStyle {
+  const stacked = position === 'top' || position === 'bottom';
+  return {
+    flexDirection: position === 'top' ? 'column' : position === 'bottom' ? 'column-reverse' : 'row',
+    alignItems: stacked ? 'flex-start' : 'center',
+    gap: theme.spacing(stacked ? LABEL_GAP_UNITS.stacked : LABEL_GAP_UNITS.beside),
+    width: '100%',
+  };
+}
+
+/**
+ * The native `Switch`.
+ *
+ * React Native's own `Switch` is the platform control at the platform's size,
+ * with no track geometry, no thumb radius and no room for an icon — so this
+ * draws the track and the thumb itself, off the same table the web styles MUI
+ * with, and takes `role="checkbox"` with `aria-checked` for the state a hidden
+ * `<input type="checkbox">` carries on the web. See `NATIVE-NOTES.md`.
+ */
+export const Switch = React.forwardRef<View, SwitchProps>((rawProps, ref) => {
+  const props = resolveSwitchProps(rawProps);
+  const {
+    label, description, labelPosition, error, helperText, loading, disabled,
+    checked, defaultChecked, onChange, onClick, onPress, style, ...others
+  } = props;
+
+  const theme = useUiTheme();
+  const [own, setOwn] = React.useState(defaultChecked ?? false);
+  const current = checked ?? own;
+  const inactive = loading || disabled;
+  const rest = withoutSwitchProps(others);
+
+  // A keyboard toggle has no gesture behind it, so `onClick`/`onPress` — which
+  // are press handlers — only fire when there is a press to report.
+  const toggle = (event?: GestureResponderEvent): void => {
+    const next = !current;
+    setOwn(next);
+    onChange?.({ target: { checked: next } }, next);
+    if (event === undefined) return;
+    onClick?.(event);
+    onPress?.(event);
+  };
+
+  const control = (
+    <SwitchControl
+      props={props}
+      theme={theme}
+      checked={current}
+      inactive={inactive}
+      onToggle={toggle}
+      rest={rest}
+      testID={resolveTestId(others, 'switch') ?? 'switch'}
+    />
+  );
+
+  return (
+    <View ref={ref} testID={childTestId(others, 'container', 'switch')} style={style}>
+      {label === undefined ? (
+        control
+      ) : (
+        <View style={labelRowStyle(theme, labelPosition)}>
+          {labelPosition === 'start' ? control : null}
+          <LabelBlock
+            theme={theme}
+            label={label}
+            description={description}
+            error={error}
+            testID={childTestId(others, 'label', 'switch')}
+          />
+          {labelPosition === 'start' ? null : control}
+        </View>
+      )}
+      {helperText === undefined ? null : (
+        <RNText testID={childTestId(others, 'helper', 'switch')} style={helperTextStyle(theme, error)}>
+          {helperText}
+        </RNText>
+      )}
+    </View>
+  );
+});
+
+Switch.displayName = 'Switch';
+
+const styles = StyleSheet.create({
+  labelBlock: {
+    flex: 1,
+  },
+  trackLabels: {
+    ...StyleSheet.absoluteFillObject,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    pointerEvents: 'none',
+  },
+  icon: {
+    position: 'absolute',
+    top: '50%',
+    zIndex: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+    pointerEvents: 'none',
+  },
+});

package/src/components/form/Switch/Switch.parts.tsx

@@ -5,9 +5,11 @@ import Typography from '@mui/material/Typography/index.js';
 import { styled } from '@mui/material/styles/index.js';
 import React from 'react';
 
+import { LABEL_GAP_UNITS, SWITCH_ICON_SIZES } from './Switch.metrics';
 import { switchSx } from './Switch.styles';
 import type { SwitchFlags } from './Switch.styles';
 import type { SwitchProps } from './Switch.types';
+import type { SizeValue } from '../../../tokens/vocabulary';
 
 const StyledSwitch = styled(MuiSwitch, {
   shouldForwardProp: (prop) =>
@@ -42,7 +44,7 @@ const StyledLabelContainer = styled(Box, {
     alignItems: stacked ? 'flex-start' : 'center',
     flexDirection:
       labelPosition === 'top' ? 'column' : labelPosition === 'bottom' ? 'column-reverse' : 'row',
-    gap: theme.spacing(stacked ? 1 : 2),
+    gap: theme.spacing(stacked ? LABEL_GAP_UNITS.stacked : LABEL_GAP_UNITS.beside),
     width: '100%',
     ...(error && { '& .MuiTypography-root': { color: theme.palette.error.main } }),
   };
@@ -62,8 +64,6 @@ export const LabelContainer: React.FC<{
   </StyledLabelContainer>
 );
 
-const ICON_SIZES: Record<string, number> = { xs: 12, sm: 14, md: 16, lg: 18, xl: 20 };
-
 export interface SwitchIconProps {
   icon: React.ReactNode;
   /** True when this icon is the one the current state should show. */
@@ -94,7 +94,7 @@ export const SwitchIcon: React.FC<SwitchIconProps> = ({ icon, shown, animated, s
         pointerEvents: 'none',
         zIndex: 2,
         color: isOn ? '#fff' : 'text.secondary',
-        fontSize: ICON_SIZES[size] ?? ICON_SIZES.md,
+        fontSize: SWITCH_ICON_SIZES[size as SizeValue] ?? SWITCH_ICON_SIZES.md,
       }}
     >
       {icon}