@12-apps/ui 6.19.1 → 6.21.0

package/src/components/layout/Skeleton/Skeleton.types.ts

@@ -1,19 +1,16 @@
-export type SkeletonVariant = 'text' | 'circular' | 'rectangular' | 'wave';
-export type SkeletonAnimation = 'pulse' | 'wave' | false;
-export type SkeletonIntensity = 'low' | 'medium' | 'high';
+import type React from 'react';
 
-export interface SkeletonProps {
-  variant?: SkeletonVariant;
-  animation?: SkeletonAnimation;
-  width?: number | string;
-  height?: number | string;
-  count?: number;
-  spacing?: number;
-  borderRadius?: number | string;
+import type { SkeletonBaseProps } from './Skeleton.base';
+
+export type {
+  SkeletonAnimation,
+  SkeletonBaseProps,
+  SkeletonIntensity,
+  SkeletonVariant,
+} from './Skeleton.base';
+
+/** The web `Skeleton`: the shared contract, plus the DOM's own two styling hooks. */
+export interface SkeletonProps extends SkeletonBaseProps {
   className?: string;
-  intensity?: SkeletonIntensity;
-  glassmorphism?: boolean;
-  shimmer?: boolean;
-  'data-testid'?: string;
   style?: React.CSSProperties;
-}
+}

package/src/components/layout/Skeleton/index.native.ts

@@ -0,0 +1,8 @@
+export { Skeleton } from './Skeleton.native';
+export type {
+  SkeletonAnimation,
+  SkeletonBaseProps,
+  SkeletonIntensity,
+  SkeletonProps,
+  SkeletonVariant,
+} from './Skeleton.types.native';

package/src/components/layout/Skeleton/index.ts

@@ -1,2 +1,8 @@
 export { Skeleton } from './Skeleton';
-export type { SkeletonProps } from './Skeleton.types';
+export type {
+  SkeletonAnimation,
+  SkeletonBaseProps,
+  SkeletonIntensity,
+  SkeletonProps,
+  SkeletonVariant,
+} from './Skeleton.types';

package/src/icons/glyphs.json

@@ -2,9 +2,14 @@
   "Add",
   "ArrowBack",
   "ArrowDownward",
+  "ArrowDropDown",
   "ArrowForward",
   "ArrowUpward",
+  "BrokenImage",
+  "Cancel",
   "Check",
+  "CheckBox",
+  "CheckBoxOutlineBlank",
   "CheckCircle",
   "ChevronLeft",
   "ChevronRight",
@@ -17,6 +22,7 @@
   "ExpandLess",
   "ExpandMore",
   "FilterList",
+  "IndeterminateCheckBox",
   "Info",
   "InfoOutlined",
   "KeyboardArrowDown",

package/src/icons/paths.generated.ts

@@ -10,9 +10,14 @@ export const ICON_PATHS = {
   Add: ["M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z"],
   ArrowBack: ["M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20z"],
   ArrowDownward: ["m20 12-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8z"],
+  ArrowDropDown: ["m7 10 5 5 5-5z"],
   ArrowForward: ["m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"],
   ArrowUpward: ["m4 12 1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8z"],
+  BrokenImage: ["M21 5v6.59l-3-3.01-4 4.01-4-4-4 4-3-3.01V5c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2m-3 6.42 3 3.01V19c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2v-6.58l3 2.99 4-4 4 4z"],
+  Cancel: ["M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2m5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12z"],
   Check: ["M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"],
+  CheckBox: ["M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2m-9 14-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8z"],
+  CheckBoxOutlineBlank: ["M19 5v14H5V5zm0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2"],
   CheckCircle: ["M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8z"],
   ChevronLeft: ["M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"],
   ChevronRight: ["M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"],
@@ -25,6 +30,7 @@ export const ICON_PATHS = {
   ExpandLess: ["m12 8-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"],
   ExpandMore: ["M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"],
   FilterList: ["M10 18h4v-2h-4zM3 6v2h18V6zm3 7h12v-2H6z"],
+  IndeterminateCheckBox: ["M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m-2 10H7v-2h10z"],
   Info: ["M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-6h2zm0-8h-2V7h2z"],
   InfoOutlined: ["M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8"],
   KeyboardArrowDown: ["M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z"],

package/src/platform/animation.ts

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { Animated, Easing, Platform } from 'react-native';
+
+/**
+ * A CSS KEYFRAME LOOP, AS REACT NATIVE RUNS ONE.
+ *
+ * `animation: pulse 2s ease-in-out 0.5s infinite` is one declaration on the
+ * web and four decisions here: a driving value, a timing, a delay that runs
+ * ONCE (which is why the loop is sequenced behind an `Animated.delay` rather
+ * than given the timing's own `delay`, which would replay every lap), and a
+ * teardown. Several ported components paint a breathing surface, and each one
+ * writing that out again is how two of them end up on different cadences.
+ *
+ * The value runs 0 → 1 and repeats; the caller interpolates it into whatever
+ * the keyframes actually change.
+ */
+const DEFAULT_NATIVE_DRIVER = Platform.OS !== 'web';
+
+export interface LoopOptions {
+  durationMs: number;
+  /** The CSS animation's delay, run once before the first lap. */
+  delayMs?: number;
+  easing?: (value: number) => number;
+  /**
+   * Layout properties (`left`, `width`, `height`) cannot be driven natively;
+   * `opacity` and `transform` can. Defaults to native everywhere but the web.
+   */
+  useNativeDriver?: boolean;
+}
+
+export function useLoopedProgress(enabled: boolean, options: LoopOptions): Animated.Value {
+  const {
+    durationMs,
+    delayMs = 0,
+    easing = Easing.linear,
+    useNativeDriver = DEFAULT_NATIVE_DRIVER,
+  } = options;
+  const progress = React.useRef(new Animated.Value(0)).current;
+
+  React.useEffect(() => {
+    if (!enabled) return undefined;
+    const animation = Animated.sequence([
+      Animated.delay(delayMs),
+      Animated.loop(
+        Animated.timing(progress, { toValue: 1, duration: durationMs, easing, useNativeDriver }),
+      ),
+    ]);
+    animation.start();
+    return () => animation.stop();
+  }, [enabled, durationMs, delayMs, easing, useNativeDriver, progress]);
+
+  return progress;
+}

package/src/platform/aria.ts

@@ -1,5 +1,5 @@
 /**
- * ARIA ATTRIBUTES REACT NATIVE DOES NOT DECLARE.
+ * WEB ATTRIBUTES REACT NATIVE DOES NOT DECLARE.
  *
  * React Native's `ViewProps` (0.83) type a dozen `aria-*` props and stop:
  * `aria-level`, `aria-atomic` and `aria-describedby` are not among them.
@@ -13,6 +13,20 @@ export interface WebAria {
   'aria-level'?: 1 | 2 | 3 | 4 | 5 | 6;
   'aria-atomic'?: 'true' | 'false';
   'aria-describedby'?: string;
+  /**
+   * A field's validity and whether it must be filled. React Native's
+   * `accessibilityState` has neither — its five flags are disabled, selected,
+   * checked, busy and expanded — so these are web-only, and a device reads the
+   * error text instead. react-native-web forwards both.
+   */
+  'aria-invalid'?: boolean;
+  'aria-required'?: boolean;
+  /**
+   * What a control pops open. React Native has `aria-expanded` and no
+   * `aria-haspopup`, so a `combobox` needs this one from here to say the thing
+   * it expands is a listbox — which is what the web's own trigger carries.
+   */
+  'aria-haspopup'?: 'listbox' | 'menu' | 'dialog' | 'true';
 }
 
 /**
@@ -30,3 +44,60 @@ export function webAria(attrs: WebAria): object {
   const { 'aria-atomic': atomic, ...rest } = attrs;
   return atomic === undefined ? rest : { ...rest, accessibilityAtomic: atomic };
 }
+
+/**
+ * `disabled` for a react-native-web form control.
+ *
+ * React Native's `TextInput` has `editable` and no `disabled`, because a
+ * device has no disabled state to speak of — an uneditable field simply does
+ * not take the keyboard. The DOM does: only a real `disabled` attribute takes
+ * an `<input>` out of the tab order, and it is what `toBeDisabled()` reads. So
+ * a native field spreads this ALONGSIDE `editable={false}` and
+ * `aria-disabled`: react-native-web puts the attribute on the input, and a
+ * device ignores a prop it does not know.
+ */
+export function webDisabled(disabled: boolean): object {
+  return disabled ? { disabled: true } : {};
+}
+
+/**
+ * `onClick` for a react-native-web element whose React Native twin has no
+ * click of its own.
+ *
+ * react-native-web's `TextInput` forwards `onClick` to the DOM input and drops
+ * `onPressIn`; a device does the opposite. A field that must answer a press on
+ * both renderers spreads this ALONGSIDE `onPressIn`, and exactly one of the two
+ * fires on each side — never both.
+ */
+export function webClick<E>(handler: ((event: E) => void) | undefined): object {
+  return handler === undefined ? {} : { onClick: handler };
+}
+
+/**
+ * A `role` React Native's own union does not carry.
+ *
+ * `Role` (0.83) stops at `list` and `menu`: `listbox`, the role a dropdown's
+ * option list owes a screen reader, is not in it. react-native-web forwards
+ * whatever string it is given, and a device ignores a role it does not know —
+ * the same trade `webAria` makes for the attributes below it.
+ */
+export function webRole(role: string): object {
+  return { role };
+}
+
+/** The half of a DOM keyboard event a component needs, without the DOM lib. */
+export interface WebKeyEvent {
+  key: string;
+}
+
+/**
+ * `onKeyDown` for a react-native-web element.
+ *
+ * React Native has no key events on a `View` — a phone has no keyboard to
+ * press Escape on — so nothing here is typed by react-native and nothing here
+ * fires on a device. react-native-web forwards it to the DOM, which is what
+ * lets a native dropdown still answer Escape and the arrow keys in a browser.
+ */
+export function webKeyDown(handler: (event: WebKeyEvent) => void): object {
+  return { onKeyDown: handler };
+}

package/src/platform/test-id.ts

@@ -18,6 +18,19 @@ export function resolveTestId(props: TestIdProps, fallback?: string): string | u
   return props.testID ?? props.dataTestId ?? props['data-testid'] ?? fallback;
 }
 
+/**
+ * The id under whichever of the three spellings the caller used, together with
+ * the props stripped of all three — so a web component can put `data-testid`
+ * where the DOM wants it without React seeing `testID` or `dataTestId` and
+ * warning that it does not recognise them.
+ */
+export function splitTestId<T extends TestIdProps>(
+  props: T,
+  fallback?: string,
+): { testId: string | undefined; rest: Omit<T, keyof TestIdProps> } {
+  return { testId: resolveTestId(props, fallback), rest: withoutTestIdProps(props) };
+}
+
 /** `${id}-${suffix}` for a sub-element, or `${fallback}-${suffix}` when unnamed. */
 export function childTestId(
   props: TestIdProps,

package/src/platform/web-keys.ts

@@ -0,0 +1,28 @@
+/**
+ * KEY EVENTS REACT NATIVE DOES NOT DECLARE.
+ *
+ * There is no `onKeyDown` on React Native's `ViewProps` or `PressableProps`,
+ * because there is no keyboard behind a `View` on a device. react-native-web
+ * DOES forward one to the DOM, and a component that stands in for a native
+ * control — a chip that removes on Delete, a listbox option that activates on
+ * Space — carries those conventions as part of its contract on the web.
+ *
+ * `webKeyDown` spreads the handler onto a react-native element without that
+ * element's props type having to know it, the way `./aria.ts` does for the
+ * `aria-*` attributes React Native leaves out. On a device it is simply never
+ * called, which is the honest outcome: the gesture is the input there.
+ *
+ * The event is typed structurally rather than as a DOM `KeyboardEvent`, because
+ * the native type program is checked WITHOUT the DOM lib.
+ */
+export interface WebKeyEvent {
+  key: string;
+  preventDefault: () => void;
+}
+
+export type WebKeyHandler = (event: WebKeyEvent) => void;
+
+/** `{ onKeyDown }` as something JSX can spread onto a react-native element. */
+export function webKeyDown(handler: WebKeyHandler | undefined): object {
+  return handler === undefined ? {} : { onKeyDown: handler };
+}

package/src/tokens/field-edge.core.ts

@@ -0,0 +1,87 @@
+import {
+  darken,
+  decomposeColor,
+  getContrastRatio,
+  getLuminance,
+  hslToRgb,
+  lighten,
+  recomposeColor,
+} from './color';
+
+/**
+ * THE FIELD EDGE, WITH NO RENDERER BEHIND IT.
+ *
+ * The argument for why an outlined control cannot draw its resting boundary
+ * from `alpha(theme.palette.divider, 0.23)` is in `./field-edge.ts`, next to
+ * the MUI-typed `fieldEdge` the web components call. This file is the WALK
+ * itself, over two colour strings, so the native renderer can run it too:
+ * `Input.native.tsx` and `Select.native.tsx` have no MUI `Theme` to pass and no
+ * `@mui/material/styles` to import, and a second copy of the walk beside them
+ * is a second answer to "where is this field's border" waiting to drift.
+ *
+ * `./color` is a faithful port of MUI's colour manipulator (asserted equal to
+ * it in `./__tests__/color.test.ts`), so the string this returns is the string
+ * the web has always emitted.
+ */
+
+/**
+ * WCAG 2.1 SC 1.4.11 — the contrast a control's own boundary owes the surface
+ * behind it. See `./field-edge.ts` for why 3:1 and why it is a floor.
+ */
+export const MIN_UI_CONTRAST = 3;
+
+/** How far one step of the walk moves, and how many steps before it gives up. */
+const STEP = 0.05;
+const MAX_STEPS = 20;
+
+/** A colour's red, green, blue and alpha, with `hsl()` converted on the way. */
+function channels(colour: string): [number, number, number, number] {
+  const decomposed = decomposeColor(colour);
+  const rgb = decomposed.type.startsWith('hsl') ? decomposeColor(hslToRgb(colour)) : decomposed;
+  const [r, g, b, a] = rgb.values;
+  return [r ?? 0, g ?? 0, b ?? 0, a ?? 1];
+}
+
+/**
+ * A colour as an opaque `rgb()`, with any translucency resolved against
+ * `surface`.
+ *
+ * Needed because `getContrastRatio` reads the channels it is given and ignores
+ * the alpha, so handing it an `rgba()` measures a colour nobody sees.
+ */
+function flatten(colour: string, surface: string): string {
+  const [r, g, b, alpha] = channels(colour);
+  if (alpha >= 1) return recomposeColor({ type: 'rgb', values: [r, g, b] });
+
+  const [baseR, baseG, baseB] = channels(surface);
+  const blend = (fg: number, bg: number): number => Math.round(alpha * fg + (1 - alpha) * bg);
+  return recomposeColor({
+    type: 'rgb',
+    values: [blend(r, baseR), blend(g, baseG), blend(b, baseB)],
+  });
+}
+
+/**
+ * The resting boundary a control draws on `surface`, from the theme's own
+ * `divider` as the seed: the seed itself when it already clears
+ * {@link MIN_UI_CONTRAST}, otherwise the nearest tone of it that does.
+ */
+export function resolveFieldEdge(divider: string, surface: string): string {
+  const ground = flatten(surface, '#FFFFFF');
+  const seed = flatten(divider, ground);
+  if (getContrastRatio(seed, ground) >= MIN_UI_CONTRAST) return seed;
+
+  // Away from the surface, whichever way that is — so one rule serves both
+  // modes, and a dark card in a light theme is still handled by the pair rather
+  // than by `palette.mode`.
+  const away = getLuminance(ground) > 0.5 ? darken : lighten;
+  for (let step = 1; step <= MAX_STEPS; step += 1) {
+    // From the SEED each time rather than compounding the previous result, so
+    // the walk lands on the nearest passing tone instead of overshooting past it.
+    const candidate = away(seed, step * STEP);
+    if (getContrastRatio(candidate, ground) >= MIN_UI_CONTRAST) return candidate;
+  }
+  // Unreachable for any real surface — black clears 21:1 on white and white
+  // clears it on black — but a caller must never be handed `undefined`.
+  return getLuminance(ground) > 0.5 ? '#000000' : '#FFFFFF';
+}

package/src/tokens/field-edge.ts

@@ -1,14 +1,7 @@
-import {
-  darken,
-  decomposeColor,
-  getContrastRatio,
-  getLuminance,
-  hslToRgb,
-  lighten,
-  recomposeColor,
-} from '@mui/material/styles/index.js';
 import type { Theme } from '@mui/material/styles/index.js';
 
+import { resolveFieldEdge } from './field-edge.core';
+
 /**
  * THE EDGE THAT TELLS YOU WHERE A FIELD IS.
  *
@@ -66,50 +59,17 @@ import type { Theme } from '@mui/material/styles/index.js';
  * corrected brand colour that clears the floor by construction. The resting
  * state was the only one you could not see, and it is the one that matters,
  * because it is the state a field is in before anyone has found it.
- */
-
-/**
- * WCAG 2.1 SC 1.4.11 — the contrast a control's own boundary owes the surface
- * behind it.
  *
- * 3:1 rather than the 4.5:1 the same spec asks of body text: a border is a
- * shape, not a glyph, so it stays findable at a lower ratio. It is a FLOOR and
- * not a target — {@link fieldEdge} stops at the first tone that clears it, so a
- * theme with a stronger hairline keeps the stronger one.
- */
-export const MIN_UI_CONTRAST = 3;
-
-/** How far one step of the walk moves, and how many steps before it gives up. */
-const STEP = 0.05;
-const MAX_STEPS = 20;
-
-/**
- * A colour as an opaque `rgb()`, with any translucency resolved against
- * `surface`.
+ * ## Where the walk itself lives
  *
- * Needed because `getContrastRatio` reads the channels it is given and ignores
- * the alpha, so handing it an `rgba()` measures a colour nobody sees. Every
- * failing border above was translucent, so skipping this would compute the ratio
- * of the hairline itself — 1.26:1, still a failure, but the wrong number for the
- * wrong reason.
+ * `./field-edge.core.ts`, over two colour strings and this package's own
+ * colour arithmetic. The native `Input` and `Select` draw the same border and
+ * have neither a MUI `Theme` to pass nor `@mui/material/styles` to import, so
+ * the algorithm sits one file below this one and both renderers call it. This
+ * file is the MUI-typed door onto it, and the argument above.
  */
-function flatten(colour: string, surface: string): string {
-  const decomposed = decomposeColor(colour);
-  const rgb = decomposed.type.startsWith('hsl')
-    ? decomposeColor(hslToRgb(colour))
-    : decomposed;
-  const [r, g, b] = rgb.values;
-  const alpha = rgb.values[3] ?? 1;
-  if (alpha >= 1) return recomposeColor({ type: 'rgb', values: [r, g, b] });
 
-  const behind = decomposeColor(surface);
-  const base = behind.type.startsWith('hsl') ? decomposeColor(hslToRgb(surface)) : behind;
-  const blend = (fg: number, bg: number): number => Math.round(alpha * fg + (1 - alpha) * bg);
-  return recomposeColor({
-    type: 'rgb',
-    values: [blend(r, base.values[0]), blend(g, base.values[1]), blend(b, base.values[2])],
-  });
-}
+export { MIN_UI_CONTRAST } from './field-edge.core';
 
 /**
  * The resting boundary for a form control on `surface`.
@@ -121,21 +81,5 @@ function flatten(colour: string, surface: string): string {
  * as the pair it is given.
  */
 export function fieldEdge(theme: Theme, surface?: string): string {
-  const ground = flatten(surface ?? theme.palette.background.paper, '#FFFFFF');
-  const seed = flatten(theme.palette.divider, ground);
-  if (getContrastRatio(seed, ground) >= MIN_UI_CONTRAST) return seed;
-
-  // Away from the surface, whichever way that is — so one rule serves both
-  // modes, and a dark card in a light theme is still handled by the pair rather
-  // than by `palette.mode`.
-  const away = getLuminance(ground) > 0.5 ? darken : lighten;
-  for (let step = 1; step <= MAX_STEPS; step += 1) {
-    // From the SEED each time rather than compounding the previous result, so
-    // the walk lands on the nearest passing tone instead of overshooting past it.
-    const candidate = away(seed, step * STEP);
-    if (getContrastRatio(candidate, ground) >= MIN_UI_CONTRAST) return candidate;
-  }
-  // Unreachable for any real surface — black clears 21:1 on white and white
-  // clears it on black — but a caller must never be handed `undefined`.
-  return getLuminance(ground) > 0.5 ? '#000000' : '#FFFFFF';
+  return resolveFieldEdge(theme.palette.divider, surface ?? theme.palette.background.paper);
 }

package/src/tokens/mui-type.ts

@@ -15,7 +15,7 @@ import type { UiTheme } from './theme';
  * halves and not these; each component that reads this records that as a
  * known gap in its `NATIVE-NOTES.md`.
  */
-export type MuiTypeVariantName = 'h6' | 'body1' | 'body2';
+export type MuiTypeVariantName = 'h6' | 'body1' | 'body2' | 'caption';
 
 export interface MuiTypeVariant {
   fontSize: number;
@@ -28,6 +28,7 @@ export const MUI_TYPE: Record<MuiTypeVariantName, MuiTypeVariant> = {
   h6: { fontSize: 20, lineHeight: 1.6, fontWeight: 500, letterSpacingEm: 0.0075 },
   body1: { fontSize: 16, lineHeight: 1.5, fontWeight: 400, letterSpacingEm: 0.00938 },
   body2: { fontSize: 14, lineHeight: 1.43, fontWeight: 400, letterSpacingEm: 0.01071 },
+  caption: { fontSize: 12, lineHeight: 1.66, fontWeight: 400, letterSpacingEm: 0.03333 },
 };
 
 /** MUI's `theme.typography.fontWeightMedium`, which several web styles name outright. */

package/dist/chunk-2PCOC3PT.js

@@ -1,146 +0,0 @@
-import {
-  CAPTION_FONT_SIZE,
-  CAPTION_LETTER_SPACING_EM,
-  CAPTION_OPACITY,
-  CODE_BACKGROUND_ALPHA,
-  CODE_BORDER_ALPHA,
-  CODE_FONT_SIZE,
-  CODE_PADDING,
-  CODE_RADIUS_FACTOR,
-  HEADING_DEFAULT_WEIGHT,
-  HEADING_LETTER_SPACING_EM,
-  TEXT_SIZES,
-  TEXT_WEIGHTS
-} from "./chunk-V3PLFYKO.js";
-import {
-  resolveTestId,
-  withoutTestIdProps
-} from "./chunk-QLWBQQW7.js";
-import {
-  px
-} from "./chunk-NQN5Z36J.js";
-
-// src/components/typography/Text/Text.tsx
-import Typography from "@mui/material/Typography/index.js";
-import { alpha, styled } from "@mui/material/styles/index.js";
-import React from "react";
-import { jsx } from "react/jsx-runtime";
-var getColorFromTheme = (theme, color) => {
-  if (color === "neutral") {
-    return theme.palette.text.primary;
-  }
-  if (color === "secondary") {
-    return theme.palette.text.secondary;
-  }
-  const colorMap = {
-    primary: theme.palette.primary.main,
-    success: theme.palette.success.main,
-    warning: theme.palette.warning.main,
-    info: theme.palette.info.main,
-    danger: theme.palette.error.main
-  };
-  return colorMap[color];
-};
-var SIZE_MAP = Object.fromEntries(
-  Object.entries(TEXT_SIZES).map(([size, step]) => [
-    size,
-    { fontSize: px(step.fontSize), lineHeight: step.lineHeight }
-  ])
-);
-var WEIGHT_MAP = TEXT_WEIGHTS;
-var decorationFor = (underline, strikethrough) => [underline && "underline", strikethrough && "line-through"].filter(Boolean).join(" ") || "none";
-var baseTextStyles = (theme, a) => ({
-  color: getColorFromTheme(theme, a.customColor ?? "neutral"),
-  fontSize: SIZE_MAP[a.customSize ?? "md"]?.fontSize,
-  lineHeight: SIZE_MAP[a.customSize ?? "md"]?.lineHeight,
-  fontWeight: WEIGHT_MAP[a.customWeight ?? "normal"],
-  fontStyle: a.italic ? "italic" : "normal",
-  textDecoration: decorationFor(a.underline, a.strikethrough),
-  transition: "all 0.2s ease"
-});
-var sizeOverride = (customSize, atDefault) => (customSize ?? "md") === "md" ? atDefault : SIZE_MAP[customSize ?? "md"]?.fontSize;
-var textVariantStyles = (theme, a, base) => {
-  const weight = a.customWeight ?? "normal";
-  switch (a.customVariant) {
-    case "heading":
-      return {
-        ...base,
-        fontFamily: theme.typography.h4.fontFamily,
-        fontWeight: weight === "normal" ? HEADING_DEFAULT_WEIGHT : WEIGHT_MAP[weight],
-        letterSpacing: `${HEADING_LETTER_SPACING_EM}em`
-      };
-    case "caption":
-      return {
-        ...base,
-        fontSize: sizeOverride(a.customSize, px(CAPTION_FONT_SIZE)),
-        opacity: CAPTION_OPACITY,
-        letterSpacing: `${CAPTION_LETTER_SPACING_EM}em`
-      };
-    case "code":
-      return {
-        ...base,
-        fontFamily: 'Monaco, Menlo, "Ubuntu Mono", "Courier New", monospace',
-        fontSize: sizeOverride(a.customSize, px(CODE_FONT_SIZE)),
-        backgroundColor: alpha(theme.palette.primary.main, CODE_BACKGROUND_ALPHA),
-        padding: `${CODE_PADDING.vertical}px ${CODE_PADDING.horizontal}px`,
-        borderRadius: theme.shape.borderRadius * CODE_RADIUS_FACTOR,
-        border: `1px solid ${alpha(theme.palette.primary.main, CODE_BORDER_ALPHA)}`
-      };
-    default:
-      return { ...base, fontFamily: theme.typography.body1.fontFamily };
-  }
-};
-var StyledText = styled(Typography, {
-  shouldForwardProp: (prop) => ![
-    "customVariant",
-    "customColor",
-    "customSize",
-    "customWeight",
-    "italic",
-    "underline",
-    "strikethrough"
-  ].includes(prop)
-})((args) => {
-  const { theme } = args;
-  return textVariantStyles(theme, args, baseTextStyles(theme, args));
-});
-var Text = React.forwardRef(
-  ({
-    variant = "body",
-    color = "neutral",
-    size = "md",
-    weight = "normal",
-    as = "span",
-    italic = false,
-    underline = false,
-    strikethrough = false,
-    children,
-    ...others
-  }, ref) => {
-    const testId = resolveTestId(others);
-    const props = withoutTestIdProps(others);
-    return /* @__PURE__ */ jsx(
-      StyledText,
-      {
-        ref,
-        "data-testid": testId,
-        customVariant: variant,
-        customColor: color,
-        customSize: size,
-        customWeight: weight,
-        italic,
-        underline,
-        strikethrough,
-        ...as && { as },
-        ...props,
-        children
-      }
-    );
-  }
-);
-Text.displayName = "Text";
-
-export {
-  Text
-};
-//# sourceMappingURL=chunk-2PCOC3PT.js.map