@12-apps/ui 6.18.0 → 6.19.0

package/dist/native/data-display/LoadingState.js

@@ -0,0 +1,205 @@
+import {
+  muiTypeStyle
+} from "../chunks/chunk-V4DQTC5L.js";
+import {
+  SIZE_VALUES
+} from "../chunks/chunk-5WLOVHKK.js";
+import {
+  resolveTestId,
+  withoutTestIdProps
+} from "../chunks/chunk-M4DTJDWU.js";
+import {
+  useUiTheme
+} from "../chunks/chunk-YTHR4Y5P.js";
+import {
+  alpha
+} from "../chunks/chunk-P3PL4WBO.js";
+
+// src/components/data-display/LoadingState/LoadingState.native.tsx
+import * as React from "react";
+import {
+  ActivityIndicator,
+  Platform,
+  StyleSheet,
+  Text as RNText,
+  View
+} from "react-native";
+
+// src/components/data-display/LoadingState/LoadingState.metrics.ts
+var SPINNER_SIZES = {
+  xs: 16,
+  sm: 24,
+  md: 40,
+  lg: 56,
+  xl: 64
+};
+var MESSAGE_TYPE = {
+  xs: "body2",
+  sm: "body2",
+  md: "body1",
+  lg: "h6",
+  xl: "h6"
+};
+var SKELETON_ROW_HEIGHT = {
+  xs: 14,
+  sm: 20,
+  md: 28,
+  lg: 36,
+  xl: 44
+};
+var SPINNER_PADDING_UNITS = 6;
+var SPINNER_MIN_HEIGHT = 200;
+var SPINNER_GAP_UNITS = 2;
+var SKELETON_PADDING_UNITS = 3;
+var SKELETON_ROW_GAP_UNITS = 2;
+var SKELETON_MESSAGE_MARGIN_TOP_UNITS = 2;
+var SKELETON_RADIUS = 4;
+var SKELETON_LAST_ROW_WIDTH = "60%";
+var SKELETON_FULL_ROW_WIDTH = "100%";
+var SKELETON_TINT_ALPHA = 0.13;
+var IOS_LARGE_SPINNER_FROM = 40;
+
+// src/components/data-display/LoadingState/LoadingState.helpers.ts
+var SIZE_MAP = Object.fromEntries(
+  SIZE_VALUES.map((size) => [size, { spinner: SPINNER_SIZES[size], text: MESSAGE_TYPE[size] }])
+);
+var LOADING_STATE_DEFAULTS = {
+  variant: "spinner",
+  size: "md",
+  skeletonRows: 3
+};
+var definedProps = (props) => Object.fromEntries(
+  Object.entries(props).filter(([, value]) => value !== void 0)
+);
+var resolveLoadingStateProps = (props) => ({ ...LOADING_STATE_DEFAULTS, ...definedProps(props) });
+var makeTestIds = (dataTestId) => ({
+  base: dataTestId || "loading-state",
+  optional: (suffix) => dataTestId ? `${dataTestId}-${suffix}` : void 0,
+  named: (suffix) => dataTestId ? `${dataTestId}-${suffix}` : `loading-state-${suffix}`
+});
+
+// src/components/data-display/LoadingState/LoadingState.native.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function messageStyle(theme, size) {
+  return { ...muiTypeStyle(theme, MESSAGE_TYPE[size]), color: theme.palette.text.secondary };
+}
+var skeletonTint = (theme) => alpha(theme.palette.text.primary, SKELETON_TINT_ALPHA);
+function spinnerSize(px) {
+  if (Platform.OS !== "ios") return px;
+  return px >= IOS_LARGE_SPINNER_FROM ? "large" : "small";
+}
+function LoadingMessage({
+  message,
+  size,
+  testIds,
+  style
+}) {
+  const theme = useUiTheme();
+  if (!message) return null;
+  return /* @__PURE__ */ jsx(RNText, { style: [messageStyle(theme, size), style], testID: testIds.named("message"), children: message });
+}
+function SkeletonRows({ size, skeletonRows, testIds }) {
+  const theme = useUiTheme();
+  const tint = skeletonTint(theme);
+  return /* @__PURE__ */ jsx(View, { style: { gap: theme.spacing(SKELETON_ROW_GAP_UNITS) }, children: Array.from({ length: skeletonRows }, (_, index) => /* @__PURE__ */ jsx(
+    View,
+    {
+      "aria-hidden": true,
+      testID: testIds.optional(`skeleton-${index}`),
+      style: {
+        height: SKELETON_ROW_HEIGHT[size],
+        // The last row is short, so the block reads as a paragraph of text.
+        width: index === skeletonRows - 1 ? SKELETON_LAST_ROW_WIDTH : SKELETON_FULL_ROW_WIDTH,
+        borderRadius: SKELETON_RADIUS,
+        backgroundColor: tint
+      }
+    },
+    `skeleton-row-${index}`
+  )) });
+}
+function SkeletonView({ message, size, skeletonRows, testIds, style, rest }) {
+  const theme = useUiTheme();
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      role: "status",
+      "aria-busy": true,
+      "aria-label": message || "Loading content",
+      testID: testIds.base,
+      style: [styles.skeleton, { padding: theme.spacing(SKELETON_PADDING_UNITS) }, style],
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(SkeletonRows, { size, skeletonRows, testIds }),
+        /* @__PURE__ */ jsx(
+          LoadingMessage,
+          {
+            message,
+            size,
+            testIds,
+            style: { marginTop: theme.spacing(SKELETON_MESSAGE_MARGIN_TOP_UNITS), textAlign: "center" }
+          }
+        )
+      ]
+    }
+  );
+}
+function SpinnerView({ message, size, testIds, style, rest }) {
+  const theme = useUiTheme();
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      role: "status",
+      "aria-busy": true,
+      "aria-label": message || "Loading",
+      testID: testIds.base,
+      style: [
+        styles.spinner,
+        {
+          padding: theme.spacing(SPINNER_PADDING_UNITS),
+          minHeight: SPINNER_MIN_HEIGHT,
+          gap: theme.spacing(SPINNER_GAP_UNITS)
+        },
+        style
+      ],
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          ActivityIndicator,
+          {
+            size: spinnerSize(SPINNER_SIZES[size]),
+            color: theme.palette.primary.main,
+            testID: testIds.named("spinner")
+          }
+        ),
+        /* @__PURE__ */ jsx(LoadingMessage, { message, size, testIds })
+      ]
+    }
+  );
+}
+var LoadingState = React.memo(function LoadingState2(rawProps) {
+  const resolved = resolveLoadingStateProps(rawProps);
+  const { variant, message, size, skeletonRows, style, ...others } = resolved;
+  const args = {
+    message,
+    size,
+    skeletonRows,
+    style,
+    testIds: makeTestIds(resolveTestId(others)),
+    rest: withoutTestIdProps(others)
+  };
+  return variant === "skeleton" ? /* @__PURE__ */ jsx(SkeletonView, { ...args }) : /* @__PURE__ */ jsx(SpinnerView, { ...args });
+});
+LoadingState.displayName = "LoadingState";
+var styles = StyleSheet.create({
+  skeleton: {
+    width: "100%"
+  },
+  spinner: {
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+export {
+  LoadingState
+};
+//# sourceMappingURL=LoadingState.js.map

package/dist/native/data-display/LoadingState.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/data-display/LoadingState/LoadingState.native.tsx","../../../src/components/data-display/LoadingState/LoadingState.metrics.ts","../../../src/components/data-display/LoadingState/LoadingState.helpers.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  ActivityIndicator,\n  Platform,\n  StyleSheet,\n  Text as RNText,\n  View,\n  type StyleProp,\n  type TextStyle,\n  type ViewStyle,\n} from 'react-native';\n\nimport { type LoadingStateTestIds, makeTestIds, resolveLoadingStateProps } from './LoadingState.helpers';\nimport {\n  IOS_LARGE_SPINNER_FROM,\n  MESSAGE_TYPE,\n  SKELETON_FULL_ROW_WIDTH,\n  SKELETON_LAST_ROW_WIDTH,\n  SKELETON_MESSAGE_MARGIN_TOP_UNITS,\n  SKELETON_PADDING_UNITS,\n  SKELETON_RADIUS,\n  SKELETON_ROW_GAP_UNITS,\n  SKELETON_ROW_HEIGHT,\n  SKELETON_TINT_ALPHA,\n  SPINNER_GAP_UNITS,\n  SPINNER_MIN_HEIGHT,\n  SPINNER_PADDING_UNITS,\n  SPINNER_SIZES,\n} from './LoadingState.metrics';\nimport type { LoadingStateProps, LoadingStateSize } from './LoadingState.types.native';\nimport { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\nimport { alpha } from '../../../tokens/color';\nimport { muiTypeStyle } from '../../../tokens/mui-type';\nimport type { UiTheme } from '../../../tokens/theme';\n\n/** The message's type: MUI's `body2`/`body1`/`h6` per size, in the muted ink, as the web's `Typography` sets it. */\nexport function messageStyle(theme: UiTheme, size: LoadingStateSize): TextStyle {\n  return { ...muiTypeStyle(theme, MESSAGE_TYPE[size]), color: theme.palette.text.secondary };\n}\n\n/** The skeleton rows' tint: the house `Skeleton`'s `medium` intensity. */\nexport const skeletonTint = (theme: UiTheme): string =>\n  alpha(theme.palette.text.primary, SKELETON_TINT_ALPHA);\n\n/** iOS has two spinner sizes; everything else takes the px. */\nfunction spinnerSize(px: number): number | 'small' | 'large' {\n  if (Platform.OS !== 'ios') return px;\n  return px >= IOS_LARGE_SPINNER_FROM ? 'large' : 'small';\n}\n\ninterface ViewArgs {\n  message?: string;\n  size: LoadingStateSize;\n  skeletonRows: number;\n  testIds: LoadingStateTestIds;\n  style?: StyleProp<ViewStyle>;\n  rest: Omit<LoadingStateProps, keyof ViewArgs | 'variant' | 'testID' | 'dataTestId'>;\n}\n\nfunction LoadingMessage({\n  message,\n  size,\n  testIds,\n  style,\n}: Pick<ViewArgs, 'message' | 'size' | 'testIds'> & { style?: TextStyle }): React.JSX.Element | null {\n  const theme = useUiTheme();\n  if (!message) return null;\n  return (\n    <RNText style={[messageStyle(theme, size), style]} testID={testIds.named('message')}>\n      {message}\n    </RNText>\n  );\n}\n\nfunction SkeletonRows({ size, skeletonRows, testIds }: Pick<ViewArgs, 'size' | 'skeletonRows' | 'testIds'>): React.JSX.Element {\n  const theme = useUiTheme();\n  const tint = skeletonTint(theme);\n  return (\n    <View style={{ gap: theme.spacing(SKELETON_ROW_GAP_UNITS) }}>\n      {Array.from({ length: skeletonRows }, (_, index) => (\n        <View\n          key={`skeleton-row-${index}`}\n          aria-hidden\n          testID={testIds.optional(`skeleton-${index}`)}\n          style={{\n            height: SKELETON_ROW_HEIGHT[size],\n            // The last row is short, so the block reads as a paragraph of text.\n            width: index === skeletonRows - 1 ? SKELETON_LAST_ROW_WIDTH : SKELETON_FULL_ROW_WIDTH,\n            borderRadius: SKELETON_RADIUS,\n            backgroundColor: tint,\n          }}\n        />\n      ))}\n    </View>\n  );\n}\n\nfunction SkeletonView({ message, size, skeletonRows, testIds, style, rest }: ViewArgs): React.JSX.Element {\n  const theme = useUiTheme();\n  return (\n    <View\n      role=\"status\"\n      aria-busy\n      aria-label={message || 'Loading content'}\n      testID={testIds.base}\n      style={[styles.skeleton, { padding: theme.spacing(SKELETON_PADDING_UNITS) }, style]}\n      {...rest}\n    >\n      <SkeletonRows size={size} skeletonRows={skeletonRows} testIds={testIds} />\n      <LoadingMessage\n        message={message}\n        size={size}\n        testIds={testIds}\n        style={{ marginTop: theme.spacing(SKELETON_MESSAGE_MARGIN_TOP_UNITS), textAlign: 'center' }}\n      />\n    </View>\n  );\n}\n\nfunction SpinnerView({ message, size, testIds, style, rest }: ViewArgs): React.JSX.Element {\n  const theme = useUiTheme();\n  return (\n    <View\n      role=\"status\"\n      aria-busy\n      aria-label={message || 'Loading'}\n      testID={testIds.base}\n      style={[\n        styles.spinner,\n        {\n          padding: theme.spacing(SPINNER_PADDING_UNITS),\n          minHeight: SPINNER_MIN_HEIGHT,\n          gap: theme.spacing(SPINNER_GAP_UNITS),\n        },\n        style,\n      ]}\n      {...rest}\n    >\n      <ActivityIndicator\n        size={spinnerSize(SPINNER_SIZES[size])}\n        color={theme.palette.primary.main}\n        testID={testIds.named('spinner')}\n      />\n      <LoadingMessage message={message} size={size} testIds={testIds} />\n    </View>\n  );\n}\n\nexport const LoadingState: React.FC<LoadingStateProps> = React.memo(function LoadingState(rawProps) {\n  const resolved = resolveLoadingStateProps(rawProps);\n  const { variant, message, size, skeletonRows, style, ...others } = resolved;\n  const args: ViewArgs = {\n    message,\n    size,\n    skeletonRows,\n    style,\n    testIds: makeTestIds(resolveTestId(others)),\n    rest: withoutTestIdProps(others),\n  };\n\n  return variant === 'skeleton' ? <SkeletonView {...args} /> : <SpinnerView {...args} />;\n});\n\nLoadingState.displayName = 'LoadingState';\n\nconst styles = StyleSheet.create({\n  skeleton: {\n    width: '100%',\n  },\n  spinner: {\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n});\n","import type { MuiTypeVariantName } from '../../../tokens/mui-type';\nimport type { SizeValue } from '../../../tokens/vocabulary';\n\n/**\n * THE NUMBERS BOTH `LoadingState` RENDERERS DRAW WITH.\n *\n * `LoadingState.tsx` (MUI) and `LoadingState.native.tsx` (React Native) read\n * this one table. Spacing is in SPACING UNITS where the web writes\n * `theme.spacing(n)`, so a host with a different unit moves both renderers;\n * everything else is px.\n */\n\n/** MUI's `CircularProgress` diameter per size. */\nexport const SPINNER_SIZES: Record<SizeValue, number> = {\n  xs: 16,\n  sm: 24,\n  md: 40,\n  lg: 56,\n  xl: 64,\n};\n\n/** The MUI `Typography` variant the message is set in, per size. */\nexport const MESSAGE_TYPE: Record<SizeValue, MuiTypeVariantName> = {\n  xs: 'body2',\n  sm: 'body2',\n  md: 'body1',\n  lg: 'h6',\n  xl: 'h6',\n};\n\nexport const SKELETON_ROW_HEIGHT: Record<SizeValue, number> = {\n  xs: 14,\n  sm: 20,\n  md: 28,\n  lg: 36,\n  xl: 44,\n};\n\n/** The spinner view: a centred column, `theme.spacing(6)` of padding, at least 200px tall. */\nexport const SPINNER_PADDING_UNITS = 6;\nexport const SPINNER_MIN_HEIGHT = 200;\n/** Between the spinner and its message. */\nexport const SPINNER_GAP_UNITS = 2;\n\n/** The skeleton view: full width, `theme.spacing(3)` of padding. */\nexport const SKELETON_PADDING_UNITS = 3;\n/** Between rows (MUI `Stack spacing={2}`), and above the message (`mt: 2`). */\nexport const SKELETON_ROW_GAP_UNITS = 2;\nexport const SKELETON_MESSAGE_MARGIN_TOP_UNITS = 2;\nexport const SKELETON_RADIUS = 4;\n/** The last row is short, so the block reads as a paragraph of text. */\nexport const SKELETON_LAST_ROW_WIDTH = '60%';\nexport const SKELETON_FULL_ROW_WIDTH = '100%';\n/**\n * The house `Skeleton`'s `medium` intensity, which this component never\n * overrides: `alpha(text.primary, 0.13)` in light mode, `alpha(#fff, 0.13)`\n * in dark — and dark mode's `text.primary` IS `#fff`, so one expression\n * covers both.\n */\nexport const SKELETON_TINT_ALPHA = 0.13;\n\n/**\n * iOS's `ActivityIndicator` has two sizes, `small` (20pt) and `large`\n * (36pt); a diameter from this threshold up draws `large`. Android and the\n * web take the exact px.\n */\nexport const IOS_LARGE_SPINNER_FROM = 40;\n","import type { LoadingStateBaseProps, LoadingStateSize } from './LoadingState.base';\nimport { MESSAGE_TYPE, SKELETON_ROW_HEIGHT, SPINNER_SIZES } from './LoadingState.metrics';\nimport type { MuiTypeVariantName } from '../../../tokens/mui-type';\nimport { SIZE_VALUES } from '../../../tokens/vocabulary';\n\nexport { SKELETON_ROW_HEIGHT };\n\n// Derived from the shared metrics, not restated: the native `LoadingState`\n// reads the same two tables, so the renderers cannot disagree on a size.\nexport const SIZE_MAP: Record<LoadingStateSize, { spinner: number; text: MuiTypeVariantName }> =\n  Object.fromEntries(\n    SIZE_VALUES.map((size) => [size, { spinner: SPINNER_SIZES[size], text: MESSAGE_TYPE[size] }]),\n  ) as Record<LoadingStateSize, { spinner: number; text: MuiTypeVariantName }>;\n\ntype LoadingStateDefaultedKeys = 'variant' | 'size' | 'skeletonRows';\n\n/**\n * Generic over the renderer's own props: the web and the native `LoadingState`\n * pass different extras through, and both come back out untouched.\n */\ntype ResolvedLoadingStateProps<P extends LoadingStateBaseProps> = P &\n  Required<Pick<LoadingStateBaseProps, LoadingStateDefaultedKeys>>;\n\nconst LOADING_STATE_DEFAULTS: Required<Pick<LoadingStateBaseProps, LoadingStateDefaultedKeys>> = {\n  variant: 'spinner',\n  size: 'md',\n  skeletonRows: 3,\n};\n\n// Strips explicitly-undefined props before the merge, so `size={undefined}` still\n// falls back to the default exactly as a destructuring default would.\nconst definedProps = <P extends LoadingStateBaseProps>(props: P): Partial<P> =>\n  Object.fromEntries(\n    Object.entries(props).filter(([, value]) => value !== undefined),\n  ) as Partial<P>;\n\nexport const resolveLoadingStateProps = <P extends LoadingStateBaseProps>(\n  props: P,\n): ResolvedLoadingStateProps<P> =>\n  ({ ...LOADING_STATE_DEFAULTS, ...definedProps(props) }) as ResolvedLoadingStateProps<P>;\n\n/**\n * Test ids come in three flavours here: the container falls back to a bare\n * `loading-state`, the labelled parts to `loading-state-<part>`, and the\n * skeleton rows to nothing at all when the caller supplied no base id.\n */\nexport const makeTestIds = (dataTestId?: string) => ({\n  base: dataTestId || 'loading-state',\n  optional: (suffix: string): string | undefined =>\n    dataTestId ? `${dataTestId}-${suffix}` : undefined,\n  named: (suffix: string): string =>\n    dataTestId ? `${dataTestId}-${suffix}` : `loading-state-${suffix}`,\n});\n\nexport type LoadingStateTestIds = ReturnType<typeof makeTestIds>;\n"],"mappings":"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","names":["LoadingState"]}

package/dist/native/form/Button.js

@@ -1,320 +1,10 @@
 import {
-  childTestId,
-  resolveTestId,
-  withoutTestIdProps
-} from "../chunks/chunk-M4DTJDWU.js";
-import {
-  useUiTheme
-} from "../chunks/chunk-VGBKUL6D.js";
-import {
-  alpha,
-  darken,
-  lighten
-} from "../chunks/chunk-L2UUNK2M.js";
-
-// src/components/form/Button/Button.native.tsx
-import * as React from "react";
-import {
-  ActivityIndicator,
-  Animated,
-  Easing,
-  Platform,
-  Pressable,
-  StyleSheet,
-  Text as RNText,
-  View
-} from "react-native";
-
-// src/components/form/Button/Button.helpers.ts
-var BUTTON_DEFAULTS = {
-  variant: "solid",
-  color: "primary",
-  size: "md",
-  loading: false,
-  iconPosition: "left",
-  glow: false,
-  pulse: false,
-  ripple: true,
-  active: false
-};
-var definedProps = (props) => Object.fromEntries(
-  Object.entries(props).filter(([, value]) => value !== void 0)
-);
-var resolveButtonProps = (props) => ({ ...BUTTON_DEFAULTS, ...definedProps(props) });
-
-// src/components/form/Button/Button.metrics.ts
-var BUTTON_SIZES = {
-  xs: { paddingVertical: 2, paddingHorizontal: 8, fontSize: 12 },
-  sm: { paddingVertical: 6, paddingHorizontal: 12, fontSize: 14 },
-  md: { paddingVertical: 8, paddingHorizontal: 16, fontSize: 16 },
-  lg: { paddingVertical: 10, paddingHorizontal: 20, fontSize: 18 },
-  xl: { paddingVertical: 12, paddingHorizontal: 24, fontSize: 20 }
-};
-var ICON_ONLY_PADDING = {
-  xs: 2,
-  sm: 5,
-  md: 7,
-  lg: 9,
-  xl: 11
-};
-var BUTTON_FONT_WEIGHT = 500;
-var BUTTON_RADIUS_UNITS = 1;
-var BUTTON_ICON_GAP_UNITS = 0.5;
-var BUTTON_SPINNER_SIZE = 16;
-var BUTTON_LINE_HEIGHT = 1.75;
-var BUTTON_WASH_ALPHA = 0.1;
-var GLASS_BACKGROUND_ALPHA = 0.1;
-var GLASS_BACKGROUND_ALPHA_PRESSED = 0.2;
-var GLASS_BORDER_ALPHA = 0.2;
-var GLOW_INNER_ALPHA = 0.6;
-var GLOW_RADIUS = 20;
-var PULSE_ALPHA = 0.3;
-var PULSE_DURATION_MS = 2e3;
-var PULSE_SPREAD = 15;
-function buttonPalette(theme, color) {
-  if (color === "neutral") {
-    return {
-      main: theme.palette.grey[700],
-      dark: theme.palette.grey[800],
-      light: theme.palette.grey[500],
-      contrastText: "#fff"
-    };
-  }
-  return theme.palette[color];
-}
-var quietInk = (theme, palette) => theme.mode === "dark" ? lighten(palette.main, 0.35) : darken(palette.main, 0.3);
-function gradientStops(theme, color, palette) {
-  switch (color) {
-    case "primary":
-      return [theme.palette.primary.main, theme.palette.secondary.main];
-    case "secondary":
-      return [theme.palette.secondary.main, theme.palette.primary.main];
-    case "success":
-    case "warning":
-      return [theme.palette[color].light, theme.palette[color].dark];
-    case "danger":
-      return [theme.palette.danger.light, theme.palette.danger.dark];
-    default:
-      return [palette.main, palette.dark];
-  }
-}
-
-// src/components/form/Button/Button.native.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var MIN_WIDTH = 64;
-function paintFor(theme, variant, color, palette, active) {
-  const wash = alpha(palette.main, BUTTON_WASH_ALPHA);
-  switch (variant) {
-    case "outline":
-      return {
-        container: { backgroundColor: "transparent", borderWidth: 1, borderColor: palette.main },
-        pressed: { backgroundColor: wash, borderColor: palette.dark },
-        label: { color: palette.main }
-      };
-    case "ghost":
-      return {
-        container: { backgroundColor: "transparent" },
-        pressed: { backgroundColor: wash },
-        label: { color: quietInk(theme, palette) }
-      };
-    case "text":
-      return {
-        container: { backgroundColor: active ? wash : "transparent" },
-        pressed: { backgroundColor: wash },
-        label: { color: quietInk(theme, palette) }
-      };
-    case "glass":
-      return {
-        container: {
-          backgroundColor: alpha(theme.palette.background.paper, GLASS_BACKGROUND_ALPHA),
-          borderWidth: 1,
-          borderColor: alpha(theme.palette.divider, GLASS_BORDER_ALPHA)
-        },
-        pressed: { backgroundColor: alpha(theme.palette.background.paper, GLASS_BACKGROUND_ALPHA_PRESSED) },
-        label: { color: palette.main }
-      };
-    case "gradient": {
-      const [from, to] = gradientStops(theme, color, palette);
-      return {
-        container: { backgroundColor: from },
-        pressed: { backgroundColor: to },
-        label: { color: "#fff" }
-      };
-    }
-    default:
-      return {
-        container: { backgroundColor: palette.main },
-        pressed: { backgroundColor: palette.dark },
-        label: { color: palette.contrastText || "#fff" }
-      };
-  }
-}
-function disabledPaint(theme, variant) {
-  const filled = variant === "solid" || variant === "gradient" || variant === "glass";
-  return {
-    container: filled ? { backgroundColor: theme.palette.action.disabledBackground, borderWidth: 0 } : variant === "outline" ? { backgroundColor: "transparent", borderWidth: 1, borderColor: theme.palette.action.disabledBackground } : { backgroundColor: "transparent" },
-    pressed: {},
-    label: { color: theme.palette.action.disabled }
-  };
-}
-function sizeStyle(theme, size, iconOnly, hasIcon) {
-  const metrics = BUTTON_SIZES[size];
-  if (iconOnly) {
-    return { padding: ICON_ONLY_PADDING[size], minWidth: 0 };
-  }
-  return {
-    paddingVertical: metrics.paddingVertical,
-    paddingHorizontal: metrics.paddingHorizontal,
-    minWidth: MIN_WIDTH,
-    gap: hasIcon ? theme.spacing(BUTTON_ICON_GAP_UNITS) : void 0
-  };
-}
-function glowStyle(palette) {
-  return Platform.select({
-    android: { elevation: 8 },
-    default: {
-      shadowColor: palette.main,
-      shadowOpacity: GLOW_INNER_ALPHA,
-      shadowRadius: GLOW_RADIUS,
-      shadowOffset: { width: 0, height: 0 }
-    }
-  });
-}
-function Pulse({ color, radius, testID }) {
-  const progress = React.useRef(new Animated.Value(0)).current;
-  React.useEffect(() => {
-    const loop = Animated.loop(
-      Animated.timing(progress, {
-        toValue: 1,
-        duration: PULSE_DURATION_MS,
-        easing: Easing.out(Easing.ease),
-        useNativeDriver: Platform.OS !== "web"
-      })
-    );
-    loop.start();
-    return () => loop.stop();
-  }, [progress]);
-  return /* @__PURE__ */ jsx(
-    Animated.View,
-    {
-      testID,
-      "aria-hidden": true,
-      style: [
-        StyleSheet.absoluteFill,
-        {
-          pointerEvents: "none",
-          borderRadius: radius,
-          backgroundColor: color,
-          opacity: progress.interpolate({ inputRange: [0, 0.7, 1], outputRange: [PULSE_ALPHA, 0, 0] }),
-          transform: [
-            { scale: progress.interpolate({ inputRange: [0, 0.7, 1], outputRange: [1, 1 + PULSE_SPREAD / 40, 1] }) }
-          ]
-        }
-      ]
-    }
-  );
-}
-function renderChildren(children, label) {
-  return React.Children.map(
-    children,
-    (child) => typeof child === "string" || typeof child === "number" ? /* @__PURE__ */ jsx(RNText, { style: label, numberOfLines: 1, children: child }) : child
-  );
-}
-function buttonLook(theme, props) {
-  const { variant, color, size, loading, icon, children, glow, pulse, active, disabled, style } = props;
-  const palette = buttonPalette(theme, color);
-  const iconOnly = !loading && icon != null && children == null;
-  const inactive = Boolean(disabled) || loading;
-  const paint = inactive ? disabledPaint(theme, variant) : paintFor(theme, variant, color, palette, active);
-  const radius = theme.spacing(BUTTON_RADIUS_UNITS);
-  const metrics = BUTTON_SIZES[size];
-  const overflow = pulse || glow ? "visible" : "hidden";
-  const sized = sizeStyle(theme, size, iconOnly, icon != null && !loading);
-  const glowing = glow && !inactive ? glowStyle(palette) : null;
-  return {
-    inactive,
-    palette,
-    radius,
-    label: {
-      fontFamily: theme.typography.fontFamily,
-      fontSize: metrics.fontSize,
-      lineHeight: metrics.fontSize * BUTTON_LINE_HEIGHT,
-      fontWeight: String(BUTTON_FONT_WEIGHT),
-      textAlign: "center",
-      ...paint.label
-    },
-    container: (state) => [
-      styles.base,
-      { borderRadius: radius, overflow },
-      sized,
-      paint.container,
-      state.pressed && !inactive ? paint.pressed : null,
-      glowing,
-      style
-    ]
-  };
-}
-function Spinner({ color, testID }) {
-  return /* @__PURE__ */ jsx(
-    ActivityIndicator,
-    {
-      size: Platform.OS === "ios" ? "small" : BUTTON_SPINNER_SIZE,
-      color,
-      testID,
-      accessibilityLabel: "loading"
-    }
-  );
-}
-var Button = React.forwardRef((rawProps, ref) => {
-  const resolved = resolveButtonProps(rawProps);
-  const { loading, icon, iconPosition, pulse, ripple, children, onClick, onPress, ...others } = resolved;
-  const theme = useUiTheme();
-  const look = buttonLook(theme, resolved);
-  const testId = resolveTestId(others, "button");
-  const idFor = (suffix) => childTestId(others, suffix, "button");
-  const rest = withoutTestIdProps(others);
-  const { variant: _v, color: _c, size: _s, glow: _g, active: _a, disabled: _d, style: _st, ...pressable } = rest;
-  const handlePress = (event) => {
-    onClick?.(event);
-    onPress?.(event);
-  };
-  const iconNode = !loading && icon ? /* @__PURE__ */ jsx(View, { style: styles.icon, testID: idFor("icon"), children: icon }) : null;
-  return /* @__PURE__ */ jsxs(
-    Pressable,
-    {
-      ref,
-      role: "button",
-      "aria-disabled": look.inactive,
-      "aria-busy": loading,
-      disabled: look.inactive,
-      onPress: handlePress,
-      android_ripple: ripple && !look.inactive ? { color: alpha(look.palette.main, 0.2), borderless: false } : void 0,
-      style: look.container,
-      testID: testId,
-      ...pressable,
-      children: [
-        pulse && !look.inactive ? /* @__PURE__ */ jsx(Pulse, { color: look.palette.main, radius: look.radius, testID: idFor("pulse") }) : null,
-        iconPosition === "left" ? iconNode : null,
-        loading ? /* @__PURE__ */ jsx(Spinner, { color: look.label.color, testID: idFor("loading") }) : renderChildren(children, look.label),
-        iconPosition === "right" ? iconNode : null
-      ]
-    }
-  );
-});
-Button.displayName = "Button";
-var styles = StyleSheet.create({
-  base: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    alignSelf: "flex-start",
-    position: "relative"
-  },
-  icon: {
-    alignItems: "center",
-    justifyContent: "center"
-  }
-});
+  Button
+} from "../chunks/chunk-UKCCYP52.js";
+import "../chunks/chunk-5GJ5OG5R.js";
+import "../chunks/chunk-M4DTJDWU.js";
+import "../chunks/chunk-YTHR4Y5P.js";
+import "../chunks/chunk-P3PL4WBO.js";
 export {
   Button
 };

package/dist/native/form/Button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/form/Button/Button.native.tsx","../../../src/components/form/Button/Button.helpers.ts","../../../src/components/form/Button/Button.metrics.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  ActivityIndicator,\n  Animated,\n  Easing,\n  Platform,\n  Pressable,\n  StyleSheet,\n  Text as RNText,\n  View,\n  type GestureResponderEvent,\n  type PressableStateCallbackType,\n  type StyleProp,\n  type TextStyle,\n  type ViewStyle,\n} from 'react-native';\n\nimport { resolveButtonProps } from './Button.helpers';\nimport {\n  BUTTON_FONT_WEIGHT,\n  BUTTON_ICON_GAP_UNITS,\n  BUTTON_LINE_HEIGHT,\n  BUTTON_RADIUS_UNITS,\n  BUTTON_SIZES,\n  BUTTON_SPINNER_SIZE,\n  BUTTON_WASH_ALPHA,\n  GLASS_BACKGROUND_ALPHA,\n  GLASS_BACKGROUND_ALPHA_PRESSED,\n  GLASS_BORDER_ALPHA,\n  GLOW_INNER_ALPHA,\n  GLOW_RADIUS,\n  ICON_ONLY_PADDING,\n  PULSE_ALPHA,\n  PULSE_DURATION_MS,\n  PULSE_SPREAD,\n  buttonPalette,\n  gradientStops,\n  quietInk,\n} from './Button.metrics';\nimport type { ButtonProps, ButtonVariant } from './Button.types.native';\nimport { childTestId, resolveTestId, withoutTestIdProps } from '../../../platform/test-id';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\nimport { alpha } from '../../../tokens/color';\nimport type { ColorValue, SizeValue } from '../../../tokens/vocabulary';\nimport type { UiPaletteColor, UiTheme } from '../../../tokens/theme';\n\n/** MUI's `min-width` for a button that carries a label. */\nconst MIN_WIDTH = 64;\n\ninterface Paint {\n  container: ViewStyle;\n  pressed: ViewStyle;\n  label: TextStyle;\n}\n\n/**\n * What the web's `VARIANT_STYLES` paint, as three React Native styles: at rest,\n * while pressed (the web's `:hover`, which touch has no equivalent of), and the\n * label. Same palette arithmetic, same alphas.\n *\n * `gradient` is the one honest gap: React Native core has no gradient fill, so\n * it paints the gradient's first stop. A host wanting the real thing adds a\n * gradient library; the parity ledger records this.\n */\nfunction paintFor(\n  theme: UiTheme,\n  variant: ButtonVariant,\n  color: ColorValue,\n  palette: UiPaletteColor,\n  active: boolean,\n): Paint {\n  const wash = alpha(palette.main, BUTTON_WASH_ALPHA);\n  switch (variant) {\n    case 'outline':\n      return {\n        container: { backgroundColor: 'transparent', borderWidth: 1, borderColor: palette.main },\n        pressed: { backgroundColor: wash, borderColor: palette.dark },\n        label: { color: palette.main },\n      };\n    case 'ghost':\n      return {\n        container: { backgroundColor: 'transparent' },\n        pressed: { backgroundColor: wash },\n        label: { color: quietInk(theme, palette) },\n      };\n    case 'text':\n      return {\n        container: { backgroundColor: active ? wash : 'transparent' },\n        pressed: { backgroundColor: wash },\n        label: { color: quietInk(theme, palette) },\n      };\n    case 'glass':\n      return {\n        container: {\n          backgroundColor: alpha(theme.palette.background.paper, GLASS_BACKGROUND_ALPHA),\n          borderWidth: 1,\n          borderColor: alpha(theme.palette.divider, GLASS_BORDER_ALPHA),\n        },\n        pressed: { backgroundColor: alpha(theme.palette.background.paper, GLASS_BACKGROUND_ALPHA_PRESSED) },\n        label: { color: palette.main },\n      };\n    case 'gradient': {\n      const [from, to] = gradientStops(theme, color, palette);\n      return {\n        container: { backgroundColor: from },\n        pressed: { backgroundColor: to },\n        label: { color: '#fff' },\n      };\n    }\n    default:\n      return {\n        container: { backgroundColor: palette.main },\n        pressed: { backgroundColor: palette.dark },\n        label: { color: palette.contrastText || '#fff' },\n      };\n  }\n}\n\n/** MUI's disabled treatment per variant family, so a disabled button reads as one on both sides. */\nfunction disabledPaint(theme: UiTheme, variant: ButtonVariant): Paint {\n  const filled = variant === 'solid' || variant === 'gradient' || variant === 'glass';\n  return {\n    container: filled\n      ? { backgroundColor: theme.palette.action.disabledBackground, borderWidth: 0 }\n      : variant === 'outline'\n        ? { backgroundColor: 'transparent', borderWidth: 1, borderColor: theme.palette.action.disabledBackground }\n        : { backgroundColor: 'transparent' },\n    pressed: {},\n    label: { color: theme.palette.action.disabled },\n  };\n}\n\nfunction sizeStyle(theme: UiTheme, size: SizeValue, iconOnly: boolean, hasIcon: boolean): ViewStyle {\n  const metrics = BUTTON_SIZES[size];\n  if (iconOnly) {\n    return { padding: ICON_ONLY_PADDING[size], minWidth: 0 };\n  }\n  return {\n    paddingVertical: metrics.paddingVertical,\n    paddingHorizontal: metrics.paddingHorizontal,\n    minWidth: MIN_WIDTH,\n    gap: hasIcon ? theme.spacing(BUTTON_ICON_GAP_UNITS) : undefined,\n  };\n}\n\nfunction glowStyle(palette: UiPaletteColor): ViewStyle {\n  return Platform.select<ViewStyle>({\n    android: { elevation: 8 },\n    default: {\n      shadowColor: palette.main,\n      shadowOpacity: GLOW_INNER_ALPHA,\n      shadowRadius: GLOW_RADIUS,\n      shadowOffset: { width: 0, height: 0 },\n    },\n  });\n}\n\n/** The web's `::after` pulse ring: a looped scale-and-fade behind the button. */\nfunction Pulse({ color, radius, testID }: { color: string; radius: number; testID: string }): React.JSX.Element {\n  const progress = React.useRef(new Animated.Value(0)).current;\n\n  React.useEffect(() => {\n    const loop = Animated.loop(\n      Animated.timing(progress, {\n        toValue: 1,\n        duration: PULSE_DURATION_MS,\n        easing: Easing.out(Easing.ease),\n        useNativeDriver: Platform.OS !== 'web',\n      }),\n    );\n    loop.start();\n    return () => loop.stop();\n  }, [progress]);\n\n  return (\n    <Animated.View\n      testID={testID}\n      aria-hidden\n      style={[\n        StyleSheet.absoluteFill,\n        {\n          pointerEvents: 'none',\n          borderRadius: radius,\n          backgroundColor: color,\n          opacity: progress.interpolate({ inputRange: [0, 0.7, 1], outputRange: [PULSE_ALPHA, 0, 0] }),\n          transform: [\n            { scale: progress.interpolate({ inputRange: [0, 0.7, 1], outputRange: [1, 1 + PULSE_SPREAD / 40, 1] }) },\n          ],\n        },\n      ]}\n    />\n  );\n}\n\n/**\n * A string or number child is the label and gets the label style; anything\n * else is rendered as given. No test id of its own: the web puts none on the\n * label, and a shared story that counts `/perf-button-/` must count buttons.\n */\nfunction renderChildren(children: React.ReactNode, label: TextStyle): React.ReactNode {\n  return React.Children.map(children, (child) =>\n    typeof child === 'string' || typeof child === 'number' ? (\n      <RNText style={label} numberOfLines={1}>\n        {child}\n      </RNText>\n    ) : (\n      child\n    ),\n  );\n}\n\ntype ResolvedProps = ReturnType<typeof resolveButtonProps<ButtonProps>>;\n\ninterface ButtonLook {\n  inactive: boolean;\n  palette: UiPaletteColor;\n  radius: number;\n  label: TextStyle;\n  container: (state: PressableStateCallbackType) => StyleProp<ViewStyle>;\n}\n\n/**\n * Everything the button paints, decided once per render from the resolved\n * props and the theme. Kept out of the component so the component reads as\n * structure — what renders where — and this reads as arithmetic.\n */\nfunction buttonLook(theme: UiTheme, props: ResolvedProps): ButtonLook {\n  const { variant, color, size, loading, icon, children, glow, pulse, active, disabled, style } = props;\n  const palette = buttonPalette(theme, color);\n  const iconOnly = !loading && icon != null && children == null;\n  const inactive = Boolean(disabled) || loading;\n  const paint = inactive ? disabledPaint(theme, variant) : paintFor(theme, variant, color, palette, active);\n  const radius = theme.spacing(BUTTON_RADIUS_UNITS);\n  const metrics = BUTTON_SIZES[size];\n  // The web button is `overflow: hidden` (its ripple needs it) unless the pulse\n  // ring turns it visible; on native the glow's shadow needs it visible too,\n  // because a view's own shadow is clipped by its own overflow there.\n  const overflow: ViewStyle['overflow'] = pulse || glow ? 'visible' : 'hidden';\n  const sized = sizeStyle(theme, size, iconOnly, icon != null && !loading);\n  const glowing = glow && !inactive ? glowStyle(palette) : null;\n\n  return {\n    inactive,\n    palette,\n    radius,\n    label: {\n      fontFamily: theme.typography.fontFamily,\n      fontSize: metrics.fontSize,\n      lineHeight: metrics.fontSize * BUTTON_LINE_HEIGHT,\n      fontWeight: String(BUTTON_FONT_WEIGHT) as TextStyle['fontWeight'],\n      textAlign: 'center',\n      ...paint.label,\n    },\n    container: (state) => [\n      styles.base,\n      { borderRadius: radius, overflow },\n      sized,\n      paint.container,\n      state.pressed && !inactive ? paint.pressed : null,\n      glowing,\n      style,\n    ],\n  };\n}\n\n/** The spinner that replaces the label while loading; `role` comes from react-native's ActivityIndicator. */\nfunction Spinner({ color, testID }: { color: string; testID: string }): React.JSX.Element {\n  return (\n    <ActivityIndicator\n      size={Platform.OS === 'ios' ? 'small' : BUTTON_SPINNER_SIZE}\n      color={color}\n      testID={testID}\n      accessibilityLabel=\"loading\"\n    />\n  );\n}\n\nexport const Button = React.forwardRef<View, ButtonProps>((rawProps, ref) => {\n  const resolved = resolveButtonProps(rawProps);\n  const { loading, icon, iconPosition, pulse, ripple, children, onClick, onPress, ...others } = resolved;\n  const theme = useUiTheme();\n  const look = buttonLook(theme, resolved);\n\n  // The shared stories pass `'data-testid'` as a plain prop; honour it here and\n  // keep all three spellings off the element (react-native-web would drop them).\n  const testId = resolveTestId(others, 'button');\n  const idFor = (suffix: string) => childTestId(others, suffix, 'button');\n  const rest = withoutTestIdProps(others);\n  // `buttonLook` consumed these; they are not Pressable props.\n  const { variant: _v, color: _c, size: _s, glow: _g, active: _a, disabled: _d, style: _st, ...pressable } = rest;\n\n  const handlePress = (event: GestureResponderEvent): void => {\n    onClick?.(event);\n    onPress?.(event);\n  };\n\n  const iconNode =\n    !loading && icon ? (\n      <View style={styles.icon} testID={idFor('icon')}>\n        {icon}\n      </View>\n    ) : null;\n\n  return (\n    <Pressable\n      ref={ref}\n      role=\"button\"\n      aria-disabled={look.inactive}\n      aria-busy={loading}\n      disabled={look.inactive}\n      onPress={handlePress}\n      android_ripple={ripple && !look.inactive ? { color: alpha(look.palette.main, 0.2), borderless: false } : undefined}\n      style={look.container}\n      testID={testId}\n      {...pressable}\n    >\n      {pulse && !look.inactive ? <Pulse color={look.palette.main} radius={look.radius} testID={idFor('pulse')} /> : null}\n      {iconPosition === 'left' ? iconNode : null}\n      {loading ? <Spinner color={look.label.color as string} testID={idFor('loading')} /> : renderChildren(children, look.label)}\n      {iconPosition === 'right' ? iconNode : null}\n    </Pressable>\n  );\n});\n\nButton.displayName = 'Button';\n\nconst styles = StyleSheet.create({\n  base: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n    alignSelf: 'flex-start',\n    position: 'relative',\n  },\n  icon: {\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n});\n","import type { ButtonBaseProps } from './Button.base';\n\ntype ButtonDefaultedKeys =\n  | 'variant'\n  | 'color'\n  | 'size'\n  | 'loading'\n  | 'iconPosition'\n  | 'glow'\n  | 'pulse'\n  | 'ripple'\n  | 'active';\n\n/**\n * Generic over the renderer's own props: the web and the native `Button` pass\n * different handler types through, and both come back out untouched.\n */\ntype ResolvedButtonProps<P extends ButtonBaseProps> = P &\n  Required<Pick<ButtonBaseProps, ButtonDefaultedKeys>>;\n\nconst BUTTON_DEFAULTS: Required<Pick<ButtonBaseProps, ButtonDefaultedKeys>> = {\n  variant: 'solid',\n  color: 'primary',\n  size: 'md',\n  loading: false,\n  iconPosition: 'left',\n  glow: false,\n  pulse: false,\n  ripple: true,\n  active: false,\n};\n\n// Strips explicitly-undefined props before the merge, so `size={undefined}` still\n// falls back to the default exactly as a destructuring default would.\nconst definedProps = <P extends ButtonBaseProps>(props: P): Partial<P> =>\n  Object.fromEntries(\n    Object.entries(props).filter(([, value]) => value !== undefined),\n  ) as Partial<P>;\n\nexport const resolveButtonProps = <P extends ButtonBaseProps>(props: P): ResolvedButtonProps<P> =>\n  ({ ...BUTTON_DEFAULTS, ...definedProps(props) }) as ResolvedButtonProps<P>;\n","import { darken, lighten } from '../../../tokens/color';\nimport type { ColorValue, SizeValue } from '../../../tokens/vocabulary';\nimport type { UiPaletteColor, UiTheme } from '../../../tokens/theme';\n\n/**\n * THE NUMBERS BOTH `Button` RENDERERS DRAW WITH.\n *\n * `Button.styles.ts` (web, emotion) and `Button.native.tsx` (React Native)\n * read this one table. The web turns the px into rem and the padding into a\n * shorthand string; native uses the numbers as they are. Neither restates a\n * value, which is what keeps a native `md` button 16px tall of padding and\n * 16px of type exactly like the web one.\n */\nexport interface ButtonSizeMetrics {\n  paddingVertical: number;\n  paddingHorizontal: number;\n  fontSize: number;\n}\n\nexport const BUTTON_SIZES: Record<SizeValue, ButtonSizeMetrics> = {\n  xs: { paddingVertical: 2, paddingHorizontal: 8, fontSize: 12 },\n  sm: { paddingVertical: 6, paddingHorizontal: 12, fontSize: 14 },\n  md: { paddingVertical: 8, paddingHorizontal: 16, fontSize: 16 },\n  lg: { paddingVertical: 10, paddingHorizontal: 20, fontSize: 18 },\n  xl: { paddingVertical: 12, paddingHorizontal: 24, fontSize: 20 },\n};\n\n/** A button that is only an icon is square: uniform padding, no min-width. */\nexport const ICON_ONLY_PADDING: Record<SizeValue, number> = {\n  xs: 2,\n  sm: 5,\n  md: 7,\n  lg: 9,\n  xl: 11,\n};\n\nexport const BUTTON_FONT_WEIGHT = 500;\n/** `theme.spacing(1)`. */\nexport const BUTTON_RADIUS_UNITS = 1;\n/** Between the icon and the label: `theme.spacing(0.5)`. */\nexport const BUTTON_ICON_GAP_UNITS = 0.5;\nexport const BUTTON_SPINNER_SIZE = 16;\n/** MUI's `line-height` for button text. */\nexport const BUTTON_LINE_HEIGHT = 1.75;\n\n/** The wash behind an outline, ghost or text button while it is hovered or pressed. */\nexport const BUTTON_WASH_ALPHA = 0.1;\nexport const GLASS_BACKGROUND_ALPHA = 0.1;\nexport const GLASS_BACKGROUND_ALPHA_PRESSED = 0.2;\nexport const GLASS_BORDER_ALPHA = 0.2;\nexport const GLOW_INNER_ALPHA = 0.6;\nexport const GLOW_OUTER_ALPHA = 0.3;\nexport const GLOW_RADIUS = 20;\nexport const PULSE_ALPHA = 0.3;\nexport const PULSE_DURATION_MS = 2000;\nexport const PULSE_SPREAD = 15;\n\n/**\n * `neutral` has no palette slot of its own in MUI, so `Button.styles.ts` has\n * always drawn it from three greys. Same three greys here.\n */\nexport function buttonPalette(theme: UiTheme, color: ColorValue): UiPaletteColor {\n  if (color === 'neutral') {\n    return {\n      main: theme.palette.grey[700],\n      dark: theme.palette.grey[800],\n      light: theme.palette.grey[500],\n      contrastText: '#fff',\n    };\n  }\n  return theme.palette[color];\n}\n\n/**\n * The label colour for `ghost` and `text`: one step darker than `main` in\n * light mode (lighter in dark), because `main` is chosen to sit UNDER white and\n * is not legible AS text on a tinted surface. See the web `quietInk`.\n */\nexport const quietInk = (theme: UiTheme, palette: UiPaletteColor): string =>\n  theme.mode === 'dark' ? lighten(palette.main, 0.35) : darken(palette.main, 0.3);\n\n/** Gradients run between two related hues; the named colours pick a specific pair. */\nexport function gradientStops(\n  theme: UiTheme,\n  color: ColorValue,\n  palette: UiPaletteColor,\n): [string, string] {\n  switch (color) {\n    case 'primary':\n      return [theme.palette.primary.main, theme.palette.secondary.main];\n    case 'secondary':\n      return [theme.palette.secondary.main, theme.palette.primary.main];\n    case 'success':\n    case 'warning':\n      return [theme.palette[color].light, theme.palette[color].dark];\n    case 'danger':\n      return [theme.palette.danger.light, theme.palette.danger.dark];\n    default:\n      return [palette.main, palette.dark];\n  }\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}