@revolut/ui-kit-miniapp 0.2.1 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revolut/ui-kit-miniapp",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "license": "Apache-2.0",
   "main": "",
   "types": "types/index.d.ts",

package/types/index.d.ts

@@ -68,6 +68,7 @@ declare const DEFAULT_MESSAGES: {
     readonly 'action.open-menu': "Open menu";
     readonly 'action.open-filters': "Open filters";
     readonly 'label.apps': "Apps";
+    readonly 'label.all-apps': "All apps";
     readonly 'label.notifications': "Notifications";
     readonly 'label.accounts': "Accounts";
     readonly 'label.profile': "Profile";
@@ -263,10 +264,6 @@ declare const color: {
     readonly ultraLight: "var(--rui-color-ultra-light)";
     readonly ultraLightBlue: "var(--rui-color-ultra-light-blue)";
     readonly ultraMid: "var(--rui-color-ultra-mid)";
-    readonly reflectiveSmallUIOverlay: "var(--rui-color-reflective-small-ui-overlay)";
-    readonly groupedBackgroundReflective: "var(--rui-color-grouped-background-reflective, var(--rui-color-grouped-background))";
-    readonly popoverBackgroundReflective: "var(--rui-color-popover-background-reflective, var(--rui-color-popover-background))";
-    readonly widgetBackgroundReflective: "var(--rui-color-widget-background-reflective, var(--rui-color-widget-background))";
 };
 declare const Token$1: {
     readonly breakpoint: {
@@ -1674,7 +1671,7 @@ declare const sprinkles: ((props: {
         xxl?: "center" | "start" | "right" | "left" | "end" | undefined;
     } | undefined;
 }) => string) & {
-    properties: Set<"position" | "display" | "overflow" | "textAlign" | "alignItems" | "justifyContent" | "flexWrap" | "flexDirection" | "alignSelf">;
+    properties: Set<"display" | "overflow" | "textAlign" | "alignItems" | "justifyContent" | "flexWrap" | "flexDirection" | "alignSelf" | "position">;
 };
 type Sprinkles = Parameters<typeof sprinkles>[0];
 
@@ -2013,6 +2010,58 @@ interface ImageProps$1 extends Omit<BoxProps<'img'>, 'variant' | 'use'> {
     image?: ImageProp$1;
 }
 
+interface MapMarker$1<T = string> {
+    id?: string;
+    title: string;
+    lat: number;
+    lng: number;
+    image?: string;
+    description?: string;
+    data?: T;
+}
+interface MapCenter$1 {
+    lat: number;
+    lng: number;
+}
+/**
+ * Corner points rather than Google's `north`/`south`/`east`/`west` edges, so
+ * each corner is ready to send as a single `<Latitude>,<Longitude>` pair.
+ */
+interface MapBounds {
+    southWest: MapCenter$1;
+    northEast: MapCenter$1;
+}
+interface MapViewportEvent {
+    center: MapCenter$1;
+    zoom: number;
+    bounds: MapBounds;
+}
+interface MapErrorEvent {
+    message: string;
+}
+interface MapControls$1 {
+    zoomControl?: boolean;
+    mapTypeControl?: boolean;
+    scaleControl?: boolean;
+    streetViewControl?: boolean;
+    rotateControl?: boolean;
+    fullscreenControl?: boolean;
+    gestureHandling?: 'auto' | 'cooperative' | 'greedy' | 'none';
+}
+declare const MapLoadingState$1: {
+    readonly BUSY: "busy";
+    readonly FAILED: "failed";
+    readonly LOADING: "loading";
+    readonly READY: "ready";
+};
+type MapLoadingState$1 = ValueOf<typeof MapLoadingState$1>;
+
+declare const SliderVariant: {
+    readonly SLIDER: "slider";
+    readonly RANGE: "range";
+};
+type SliderVariant = ValueOf<typeof SliderVariant>;
+
 declare const ToastTimeout: {
     readonly SHORT: "short";
     readonly LONG: "long";
@@ -4074,6 +4123,176 @@ interface ListProps {
  */
 declare const List: ({ items }: ListProps) => react_jsx_runtime.JSX.Element;
 
+/**
+ * Marker to display on the map.
+ */
+type MapMarker = MapMarker$1;
+/**
+ * Map center coordinates.
+ */
+type MapCenter = MapCenter$1;
+/**
+ * Map loading state options.
+ * - 'loading': initial script load (skeleton shown)
+ * - 'busy': reloading results over an already-ready map
+ * - 'failed': map failed to load (error state shown)
+ * - 'ready': map is ready (default)
+ */
+type MapLoadingState = MapLoadingState$1;
+/**
+ * Map controls configuration.
+ */
+type MapControls = MapControls$1;
+/**
+ * Props for the Map component.
+ *
+ * @example
+ * ```tsx
+ * <Map apiKey="YOUR_API_KEY" center={{ lat: 51.5074, lng: -0.1278 }} />
+ * ```
+ */
+interface MapProps {
+    /**
+     * Google Maps API key (required).
+     */
+    apiKey: string;
+    /**
+     * Google Maps map ID.
+     */
+    mapId?: string;
+    /**
+     * Initial map center coordinates.
+     * @default { lat: 51.5074, lng: -0.1278 }
+     */
+    center?: MapCenter;
+    /**
+     * Initial zoom level.
+     * @default 11
+     */
+    zoom?: number;
+    /**
+     * Markers to display on the map.
+     */
+    markers?: MapMarker[];
+    /**
+     * Map UI controls configuration.
+     */
+    controls?: MapControls;
+    /**
+     * Loading state override.
+     */
+    loadingState?: MapLoadingState;
+    /**
+     * Label shown when the map fails to load.
+     */
+    labelFailedState?: React__default.ReactNode;
+    /**
+     * Label for the retry button shown on failure.
+     */
+    labelRetry?: React__default.ReactNode;
+    /**
+     * Callback fired when the user retries after a failure.
+     */
+    onRetry?: () => void;
+    /**
+     * Callback fired when the map errors.
+     */
+    onError?: (error: MapErrorEvent) => void;
+    /**
+     * Callback fired when the user finishes dragging the map.
+     */
+    onDragEnd?: (event: MapViewportEvent) => void;
+    /**
+     * Callback fired when the map zoom changes.
+     */
+    onZoom?: (event: MapViewportEvent) => void;
+    /**
+     * Custom marker renderer.
+     */
+    renderMarker?: (marker: MapMarker) => React__default.ReactNode;
+    /**
+     * Custom popup renderer shown when a marker is activated.
+     */
+    renderPopup?: (marker: MapMarker) => React__default.ReactNode;
+}
+/**
+ * Map component for embedding an interactive Google Map.
+ *
+ * Renders a Google Map with optional markers, custom controls, and
+ * custom marker/popup renderers. Requires a Google Maps API key.
+ *
+ * @example
+ * ```tsx
+ * import { Map } from '@revolut/ui-kit-miniapp'
+ *
+ * function BasicExample() {
+ *   return (
+ *     <Map
+ *       apiKey="YOUR_API_KEY"
+ *       center={{ lat: 51.5074, lng: -0.1278 }}
+ *     />
+ *   )
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * import { Map } from '@revolut/ui-kit-miniapp'
+ *
+ * // With markers
+ * function MarkersExample() {
+ *   return (
+ *     <Map
+ *       apiKey="YOUR_API_KEY"
+ *       center={{ lat: 51.5074, lng: -0.1278 }}
+ *       markers={[
+ *         { id: 'office', title: 'Revolut Office', lat: 51.5044, lng: -0.0204 },
+ *       ]}
+ *     />
+ *   )
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * import { Map } from '@revolut/ui-kit-miniapp'
+ *
+ * // With viewport events
+ * function ViewportExample() {
+ *   return (
+ *     <Map
+ *       apiKey="YOUR_API_KEY"
+ *       center={{ lat: 51.5074, lng: -0.1278 }}
+ *       onDragEnd={(event) => console.log('Center:', event.center)}
+ *       onZoom={(event) => console.log('Zoom:', event.zoom)}
+ *     />
+ *   )
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * import { Map } from '@revolut/ui-kit-miniapp'
+ *
+ * // With custom controls
+ * function ControlsExample() {
+ *   return (
+ *     <Map
+ *       apiKey="YOUR_API_KEY"
+ *       center={{ lat: 51.5074, lng: -0.1278 }}
+ *       controls={{
+ *         zoomControl: false,
+ *         fullscreenControl: false,
+ *         streetViewControl: false,
+ *         mapTypeControl: false,
+ *       }}
+ *     />
+ *   )
+ * }
+ * ```
+ */
+declare const Map: ({ apiKey, mapId, center, zoom, markers, controls, loadingState, labelFailedState, labelRetry, onRetry, onError, onDragEnd, onZoom, renderMarker, renderPopup, }: MapProps) => react_jsx_runtime.JSX.Element;
+
 /**
  * Props for the FilterButton component.
  *
@@ -4257,6 +4476,165 @@ interface SearchProps extends NativeInputProps$2 {
  */
 declare const Search: ({ value, defaultValue, onChange, placeholder, labelButtonClear, disabled, readOnly, invalid, ...rest }: SearchProps) => react_jsx_runtime.JSX.Element;
 
+interface SliderBaseProps extends Omit<NativeDivProps, 'onChange' | 'value' | 'defaultValue' | 'variant'> {
+    /**
+     * Minimum allowed value.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Maximum allowed value.
+     * @default 1
+     */
+    max?: number;
+    /**
+     * Step between allowed values.
+     * @default 0.01
+     */
+    step?: number;
+    /**
+     * Whether the slider is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Accessible label for the maximum handle.
+     */
+    labelMax?: string;
+    /**
+     * Accessible label for the minimum handle.
+     */
+    labelMin?: string;
+    /**
+     * Whether to show a tooltip with the current value while interacting.
+     * @default false
+     */
+    showTooltip?: boolean;
+}
+/**
+ * Props for the single-value Slider variant.
+ */
+interface SingleSliderProps extends SliderBaseProps {
+    variant: typeof SliderVariant.SLIDER;
+    /**
+     * Controlled value.
+     */
+    value?: number;
+    /**
+     * Default value for uncontrolled usage.
+     */
+    defaultValue?: number;
+    /**
+     * Callback fired continuously while the value changes.
+     */
+    onChange?: (value: number) => void;
+    /**
+     * Callback fired once when the user finishes changing the value.
+     */
+    onChangeEnd?: (value: number) => void;
+    /**
+     * Positions to mark and snap to on the track. Values at the `min` and `max`
+     * edges are ignored. Only supported on the single (non-range) variant.
+     */
+    checkpoints?: number[];
+}
+/**
+ * Props for the range Slider variant.
+ */
+interface RangeSliderProps extends SliderBaseProps {
+    variant: typeof SliderVariant.RANGE;
+    /**
+     * Controlled [min, max] values.
+     */
+    value?: [number, number];
+    /**
+     * Default [min, max] values for uncontrolled usage.
+     */
+    defaultValue?: [number, number];
+    /**
+     * Callback fired continuously while the values change.
+     */
+    onChange?: (value: [number, number]) => void;
+    /**
+     * Callback fired once when the user finishes changing the values.
+     */
+    onChangeEnd?: (value: [number, number]) => void;
+}
+/**
+ * Props for the Slider component.
+ */
+type SliderProps = SingleSliderProps | RangeSliderProps;
+/**
+ * Slider component for picking a single numeric value or a min–max range.
+ *
+ * Use sliders for approximate adjustments where dragging is faster than typing an exact number.
+ *
+ * @example
+ * ```tsx
+ * import { Slider } from '@revolut/ui-kit-miniapp'
+ *
+ * // Uncontrolled single value
+ * function SingleExample() {
+ *   return (
+ *     <Slider
+ *       defaultValue={0.5}
+ *       min={0}
+ *       max={1}
+ *       onChange={(value) => console.log('Value:', value)}
+ *     />
+ *   )
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * import { Slider } from '@revolut/ui-kit-miniapp'
+ * import { useState } from 'react'
+ *
+ * // Controlled range
+ * function RangeExample() {
+ *   const [value, setValue] = useState<[number, number]>([0.25, 0.75])
+ *
+ *   return (
+ *     <Slider
+ *       variant="range"
+ *       value={value}
+ *       onChange={setValue}
+ *       labelMin="Minimum"
+ *       labelMax="Maximum"
+ *     />
+ *   )
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * import { Slider } from '@revolut/ui-kit-miniapp'
+ *
+ * // With checkpoints and tooltip
+ * function CheckpointsExample() {
+ *   return (
+ *     <Slider
+ *       defaultValue={0.5}
+ *       checkpoints={[0.25, 0.5, 0.75]}
+ *       showTooltip
+ *     />
+ *   )
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * import { Slider } from '@revolut/ui-kit-miniapp'
+ *
+ * // Disabled state
+ * function DisabledExample() {
+ *   return <Slider disabled defaultValue={0.4} />
+ * }
+ * ```
+ */
+declare const Slider: (props: SliderProps) => react_jsx_runtime.JSX.Element;
+
 /**
  * Props for the HStack component.
  *
@@ -6162,7 +6540,7 @@ declare const Token: {
      * Token.color.danger      // Error state
      * ```
      */
-    readonly color: Record<"searchBackground" | "segmentedWidgetBackground" | "segmentedBackground" | "segmentedActive" | "actionPhotoHeaderText" | "actionPhotoHeaderTextNeutral" | "actionPhotoHeaderBackground" | "actionPhotoHeaderBackgroundNeutral" | "redActionBackground" | "nestedBackground" | "greyTone5" | "greyTone8" | "greyTone10" | "greyTone20" | "greyTone50" | "actionLabel" | "actionLabelNeutral" | "inputError" | "inputErrorFocus" | "disabledBackground" | "progressNeutral" | "up" | "down" | "neutral" | "shimmer" | "onShimmer" | "modalOverlay" | "metalDark" | "metalLight" | "plus" | "premiumDark" | "premiumLight" | "premiumMid" | "ultraDark" | "ultraLight" | "ultraLightBlue" | "ultraMid" | "reflectiveSmallUIOverlay" | "groupedBackgroundReflective" | "popoverBackgroundReflective" | "widgetBackgroundReflective" | ("accent" | "negative" | "accentNeutral" | "blue" | "coldBlue" | "pink" | "green" | "orange" | "red" | "deepPink" | "terracotta" | "yellow" | "lime" | "lightGreen" | "teal" | "cyan" | "lightBlue" | "indigo" | "deepPurple" | "purple" | "brown" | "deepGrey" | "black" | "grey50" | "grey20" | "grey10" | "grey5" | "grey8" | "grey2" | "white" | "actionBlue" | "actionBlueNeutral" | "onAccent" | "onAccentNeutral" | "actionBackground" | "actionBackgroundNeutral" | "widgetBackground" | "groupedBackground" | "popoverBackground" | "background" | "greyTone2" | "foreground" | "success" | "warning" | "danger" | "inactive" | "positive" | "static" | "layoutBackground" | "accent_5" | "accent_10" | "accent_20" | "accent_30" | "accent_40" | "accent_50" | "accent_60" | "accent_70" | "accent_80" | "accent_90" | "negative_5" | "negative_10" | "negative_20" | "negative_30" | "negative_40" | "negative_50" | "negative_60" | "negative_70" | "negative_80" | "negative_90" | "accentNeutral_5" | "accentNeutral_10" | "accentNeutral_20" | "accentNeutral_30" | "accentNeutral_40" | "accentNeutral_50" | "accentNeutral_60" | "accentNeutral_70" | "accentNeutral_80" | "accentNeutral_90" | "blue_5" | "blue_10" | "blue_20" | "blue_30" | "blue_40" | "blue_50" | "blue_60" | "blue_70" | "blue_80" | "blue_90" | "coldBlue_5" | "coldBlue_10" | "coldBlue_20" | "coldBlue_30" | "coldBlue_40" | "coldBlue_50" | "coldBlue_60" | "coldBlue_70" | "coldBlue_80" | "coldBlue_90" | "pink_5" | "pink_10" | "pink_20" | "pink_30" | "pink_40" | "pink_50" | "pink_60" | "pink_70" | "pink_80" | "pink_90" | "green_5" | "green_10" | "green_20" | "green_30" | "green_40" | "green_50" | "green_60" | "green_70" | "green_80" | "green_90" | "orange_5" | "orange_10" | "orange_20" | "orange_30" | "orange_40" | "orange_50" | "orange_60" | "orange_70" | "orange_80" | "orange_90" | "red_5" | "red_10" | "red_20" | "red_30" | "red_40" | "red_50" | "red_60" | "red_70" | "red_80" | "red_90" | "deepPink_5" | "deepPink_10" | "deepPink_20" | "deepPink_30" | "deepPink_40" | "deepPink_50" | "deepPink_60" | "deepPink_70" | "deepPink_80" | "deepPink_90" | "terracotta_5" | "terracotta_10" | "terracotta_20" | "terracotta_30" | "terracotta_40" | "terracotta_50" | "terracotta_60" | "terracotta_70" | "terracotta_80" | "terracotta_90" | "yellow_5" | "yellow_10" | "yellow_20" | "yellow_30" | "yellow_40" | "yellow_50" | "yellow_60" | "yellow_70" | "yellow_80" | "yellow_90" | "lime_5" | "lime_10" | "lime_20" | "lime_30" | "lime_40" | "lime_50" | "lime_60" | "lime_70" | "lime_80" | "lime_90" | "lightGreen_5" | "lightGreen_10" | "lightGreen_20" | "lightGreen_30" | "lightGreen_40" | "lightGreen_50" | "lightGreen_60" | "lightGreen_70" | "lightGreen_80" | "lightGreen_90" | "teal_5" | "teal_10" | "teal_20" | "teal_30" | "teal_40" | "teal_50" | "teal_60" | "teal_70" | "teal_80" | "teal_90" | "cyan_5" | "cyan_10" | "cyan_20" | "cyan_30" | "cyan_40" | "cyan_50" | "cyan_60" | "cyan_70" | "cyan_80" | "cyan_90" | "lightBlue_5" | "lightBlue_10" | "lightBlue_20" | "lightBlue_30" | "lightBlue_40" | "lightBlue_50" | "lightBlue_60" | "lightBlue_70" | "lightBlue_80" | "lightBlue_90" | "indigo_5" | "indigo_10" | "indigo_20" | "indigo_30" | "indigo_40" | "indigo_50" | "indigo_60" | "indigo_70" | "indigo_80" | "indigo_90" | "deepPurple_5" | "deepPurple_10" | "deepPurple_20" | "deepPurple_30" | "deepPurple_40" | "deepPurple_50" | "deepPurple_60" | "deepPurple_70" | "deepPurple_80" | "deepPurple_90" | "purple_5" | "purple_10" | "purple_20" | "purple_30" | "purple_40" | "purple_50" | "purple_60" | "purple_70" | "purple_80" | "purple_90" | "brown_5" | "brown_10" | "brown_20" | "brown_30" | "brown_40" | "brown_50" | "brown_60" | "brown_70" | "brown_80" | "brown_90" | "deepGrey_5" | "deepGrey_10" | "deepGrey_20" | "deepGrey_30" | "deepGrey_40" | "deepGrey_50" | "deepGrey_60" | "deepGrey_70" | "deepGrey_80" | "deepGrey_90" | "black_5" | "black_10" | "black_20" | "black_30" | "black_40" | "black_50" | "black_60" | "black_70" | "black_80" | "black_90" | "grey50_5" | "grey50_10" | "grey50_20" | "grey50_30" | "grey50_40" | "grey50_50" | "grey50_60" | "grey50_70" | "grey50_80" | "grey50_90" | "grey20_5" | "grey20_10" | "grey20_20" | "grey20_30" | "grey20_40" | "grey20_50" | "grey20_60" | "grey20_70" | "grey20_80" | "grey20_90" | "grey10_5" | "grey10_10" | "grey10_20" | "grey10_30" | "grey10_40" | "grey10_50" | "grey10_60" | "grey10_70" | "grey10_80" | "grey10_90" | "grey5_5" | "grey5_10" | "grey5_20" | "grey5_30" | "grey5_40" | "grey5_50" | "grey5_60" | "grey5_70" | "grey5_80" | "grey5_90" | "grey8_5" | "grey8_10" | "grey8_20" | "grey8_30" | "grey8_40" | "grey8_50" | "grey8_60" | "grey8_70" | "grey8_80" | "grey8_90" | "grey2_5" | "grey2_10" | "grey2_20" | "grey2_30" | "grey2_40" | "grey2_50" | "grey2_60" | "grey2_70" | "grey2_80" | "grey2_90" | "white_5" | "white_10" | "white_20" | "white_30" | "white_40" | "white_50" | "white_60" | "white_70" | "white_80" | "white_90" | "actionBlue_5" | "actionBlue_10" | "actionBlue_20" | "actionBlue_30" | "actionBlue_40" | "actionBlue_50" | "actionBlue_60" | "actionBlue_70" | "actionBlue_80" | "actionBlue_90" | "actionBlueNeutral_5" | "actionBlueNeutral_10" | "actionBlueNeutral_20" | "actionBlueNeutral_30" | "actionBlueNeutral_40" | "actionBlueNeutral_50" | "actionBlueNeutral_60" | "actionBlueNeutral_70" | "actionBlueNeutral_80" | "actionBlueNeutral_90" | "onAccent_5" | "onAccent_10" | "onAccent_20" | "onAccent_30" | "onAccent_40" | "onAccent_50" | "onAccent_60" | "onAccent_70" | "onAccent_80" | "onAccent_90" | "onAccentNeutral_5" | "onAccentNeutral_10" | "onAccentNeutral_20" | "onAccentNeutral_30" | "onAccentNeutral_40" | "onAccentNeutral_50" | "onAccentNeutral_60" | "onAccentNeutral_70" | "onAccentNeutral_80" | "onAccentNeutral_90" | "actionBackgroundNeutral_5" | "actionBackgroundNeutral_10" | "actionBackgroundNeutral_20" | "actionBackgroundNeutral_30" | "actionBackgroundNeutral_40" | "actionBackgroundNeutral_50" | "actionBackgroundNeutral_60" | "actionBackgroundNeutral_70" | "actionBackgroundNeutral_80" | "actionBackgroundNeutral_90" | "popoverBackground_5" | "popoverBackground_10" | "popoverBackground_20" | "popoverBackground_30" | "popoverBackground_40" | "popoverBackground_50" | "popoverBackground_60" | "popoverBackground_70" | "popoverBackground_80" | "popoverBackground_90" | "greyTone2_5" | "greyTone2_10" | "greyTone2_20" | "greyTone2_30" | "greyTone2_40" | "greyTone2_50" | "greyTone2_60" | "greyTone2_70" | "greyTone2_80" | "greyTone2_90" | "success_5" | "success_10" | "success_20" | "success_30" | "success_40" | "success_50" | "success_60" | "success_70" | "success_80" | "success_90" | "warning_5" | "warning_10" | "warning_20" | "warning_30" | "warning_40" | "warning_50" | "warning_60" | "warning_70" | "warning_80" | "warning_90" | "danger_5" | "danger_10" | "danger_20" | "danger_30" | "danger_40" | "danger_50" | "danger_60" | "danger_70" | "danger_80" | "danger_90" | "inactive_5" | "inactive_10" | "inactive_20" | "inactive_30" | "inactive_40" | "inactive_50" | "inactive_60" | "inactive_70" | "inactive_80" | "inactive_90" | "positive_5" | "positive_10" | "positive_20" | "positive_30" | "positive_40" | "positive_50" | "positive_60" | "positive_70" | "positive_80" | "positive_90" | "static_5" | "static_10" | "static_20" | "static_30" | "static_40" | "static_50" | "static_60" | "static_70" | "static_80" | "static_90"), string>;
+    readonly color: Record<"searchBackground" | "segmentedWidgetBackground" | "segmentedBackground" | "segmentedActive" | "actionPhotoHeaderText" | "actionPhotoHeaderTextNeutral" | "actionPhotoHeaderBackground" | "actionPhotoHeaderBackgroundNeutral" | "redActionBackground" | "nestedBackground" | "greyTone5" | "greyTone8" | "greyTone10" | "greyTone20" | "greyTone50" | "actionLabel" | "actionLabelNeutral" | "inputError" | "inputErrorFocus" | "disabledBackground" | "progressNeutral" | "up" | "down" | "neutral" | "shimmer" | "onShimmer" | "modalOverlay" | "metalDark" | "metalLight" | "plus" | "premiumDark" | "premiumLight" | "premiumMid" | "ultraDark" | "ultraLight" | "ultraLightBlue" | "ultraMid" | ("accent" | "accentNeutral" | "blue" | "coldBlue" | "pink" | "green" | "orange" | "red" | "deepPink" | "terracotta" | "yellow" | "lime" | "lightGreen" | "teal" | "cyan" | "lightBlue" | "indigo" | "deepPurple" | "purple" | "brown" | "deepGrey" | "black" | "grey50" | "grey20" | "grey10" | "grey5" | "grey8" | "grey2" | "white" | "actionBlue" | "actionBlueNeutral" | "onAccent" | "onAccentNeutral" | "actionBackground" | "actionBackgroundNeutral" | "widgetBackground" | "groupedBackground" | "popoverBackground" | "background" | "greyTone2" | "foreground" | "success" | "warning" | "danger" | "inactive" | "positive" | "negative" | "static" | "layoutBackground" | "accent_5" | "accent_10" | "accent_20" | "accent_30" | "accent_40" | "accent_50" | "accent_60" | "accent_70" | "accent_80" | "accent_90" | "accentNeutral_5" | "accentNeutral_10" | "accentNeutral_20" | "accentNeutral_30" | "accentNeutral_40" | "accentNeutral_50" | "accentNeutral_60" | "accentNeutral_70" | "accentNeutral_80" | "accentNeutral_90" | "blue_5" | "blue_10" | "blue_20" | "blue_30" | "blue_40" | "blue_50" | "blue_60" | "blue_70" | "blue_80" | "blue_90" | "coldBlue_5" | "coldBlue_10" | "coldBlue_20" | "coldBlue_30" | "coldBlue_40" | "coldBlue_50" | "coldBlue_60" | "coldBlue_70" | "coldBlue_80" | "coldBlue_90" | "pink_5" | "pink_10" | "pink_20" | "pink_30" | "pink_40" | "pink_50" | "pink_60" | "pink_70" | "pink_80" | "pink_90" | "green_5" | "green_10" | "green_20" | "green_30" | "green_40" | "green_50" | "green_60" | "green_70" | "green_80" | "green_90" | "orange_5" | "orange_10" | "orange_20" | "orange_30" | "orange_40" | "orange_50" | "orange_60" | "orange_70" | "orange_80" | "orange_90" | "red_5" | "red_10" | "red_20" | "red_30" | "red_40" | "red_50" | "red_60" | "red_70" | "red_80" | "red_90" | "deepPink_5" | "deepPink_10" | "deepPink_20" | "deepPink_30" | "deepPink_40" | "deepPink_50" | "deepPink_60" | "deepPink_70" | "deepPink_80" | "deepPink_90" | "terracotta_5" | "terracotta_10" | "terracotta_20" | "terracotta_30" | "terracotta_40" | "terracotta_50" | "terracotta_60" | "terracotta_70" | "terracotta_80" | "terracotta_90" | "yellow_5" | "yellow_10" | "yellow_20" | "yellow_30" | "yellow_40" | "yellow_50" | "yellow_60" | "yellow_70" | "yellow_80" | "yellow_90" | "lime_5" | "lime_10" | "lime_20" | "lime_30" | "lime_40" | "lime_50" | "lime_60" | "lime_70" | "lime_80" | "lime_90" | "lightGreen_5" | "lightGreen_10" | "lightGreen_20" | "lightGreen_30" | "lightGreen_40" | "lightGreen_50" | "lightGreen_60" | "lightGreen_70" | "lightGreen_80" | "lightGreen_90" | "teal_5" | "teal_10" | "teal_20" | "teal_30" | "teal_40" | "teal_50" | "teal_60" | "teal_70" | "teal_80" | "teal_90" | "cyan_5" | "cyan_10" | "cyan_20" | "cyan_30" | "cyan_40" | "cyan_50" | "cyan_60" | "cyan_70" | "cyan_80" | "cyan_90" | "lightBlue_5" | "lightBlue_10" | "lightBlue_20" | "lightBlue_30" | "lightBlue_40" | "lightBlue_50" | "lightBlue_60" | "lightBlue_70" | "lightBlue_80" | "lightBlue_90" | "indigo_5" | "indigo_10" | "indigo_20" | "indigo_30" | "indigo_40" | "indigo_50" | "indigo_60" | "indigo_70" | "indigo_80" | "indigo_90" | "deepPurple_5" | "deepPurple_10" | "deepPurple_20" | "deepPurple_30" | "deepPurple_40" | "deepPurple_50" | "deepPurple_60" | "deepPurple_70" | "deepPurple_80" | "deepPurple_90" | "purple_5" | "purple_10" | "purple_20" | "purple_30" | "purple_40" | "purple_50" | "purple_60" | "purple_70" | "purple_80" | "purple_90" | "brown_5" | "brown_10" | "brown_20" | "brown_30" | "brown_40" | "brown_50" | "brown_60" | "brown_70" | "brown_80" | "brown_90" | "deepGrey_5" | "deepGrey_10" | "deepGrey_20" | "deepGrey_30" | "deepGrey_40" | "deepGrey_50" | "deepGrey_60" | "deepGrey_70" | "deepGrey_80" | "deepGrey_90" | "black_5" | "black_10" | "black_20" | "black_30" | "black_40" | "black_50" | "black_60" | "black_70" | "black_80" | "black_90" | "grey50_5" | "grey50_10" | "grey50_20" | "grey50_30" | "grey50_40" | "grey50_50" | "grey50_60" | "grey50_70" | "grey50_80" | "grey50_90" | "grey20_5" | "grey20_10" | "grey20_20" | "grey20_30" | "grey20_40" | "grey20_50" | "grey20_60" | "grey20_70" | "grey20_80" | "grey20_90" | "grey10_5" | "grey10_10" | "grey10_20" | "grey10_30" | "grey10_40" | "grey10_50" | "grey10_60" | "grey10_70" | "grey10_80" | "grey10_90" | "grey5_5" | "grey5_10" | "grey5_20" | "grey5_30" | "grey5_40" | "grey5_50" | "grey5_60" | "grey5_70" | "grey5_80" | "grey5_90" | "grey8_5" | "grey8_10" | "grey8_20" | "grey8_30" | "grey8_40" | "grey8_50" | "grey8_60" | "grey8_70" | "grey8_80" | "grey8_90" | "grey2_5" | "grey2_10" | "grey2_20" | "grey2_30" | "grey2_40" | "grey2_50" | "grey2_60" | "grey2_70" | "grey2_80" | "grey2_90" | "white_5" | "white_10" | "white_20" | "white_30" | "white_40" | "white_50" | "white_60" | "white_70" | "white_80" | "white_90" | "actionBlue_5" | "actionBlue_10" | "actionBlue_20" | "actionBlue_30" | "actionBlue_40" | "actionBlue_50" | "actionBlue_60" | "actionBlue_70" | "actionBlue_80" | "actionBlue_90" | "actionBlueNeutral_5" | "actionBlueNeutral_10" | "actionBlueNeutral_20" | "actionBlueNeutral_30" | "actionBlueNeutral_40" | "actionBlueNeutral_50" | "actionBlueNeutral_60" | "actionBlueNeutral_70" | "actionBlueNeutral_80" | "actionBlueNeutral_90" | "onAccent_5" | "onAccent_10" | "onAccent_20" | "onAccent_30" | "onAccent_40" | "onAccent_50" | "onAccent_60" | "onAccent_70" | "onAccent_80" | "onAccent_90" | "onAccentNeutral_5" | "onAccentNeutral_10" | "onAccentNeutral_20" | "onAccentNeutral_30" | "onAccentNeutral_40" | "onAccentNeutral_50" | "onAccentNeutral_60" | "onAccentNeutral_70" | "onAccentNeutral_80" | "onAccentNeutral_90" | "actionBackgroundNeutral_5" | "actionBackgroundNeutral_10" | "actionBackgroundNeutral_20" | "actionBackgroundNeutral_30" | "actionBackgroundNeutral_40" | "actionBackgroundNeutral_50" | "actionBackgroundNeutral_60" | "actionBackgroundNeutral_70" | "actionBackgroundNeutral_80" | "actionBackgroundNeutral_90" | "popoverBackground_5" | "popoverBackground_10" | "popoverBackground_20" | "popoverBackground_30" | "popoverBackground_40" | "popoverBackground_50" | "popoverBackground_60" | "popoverBackground_70" | "popoverBackground_80" | "popoverBackground_90" | "greyTone2_5" | "greyTone2_10" | "greyTone2_20" | "greyTone2_30" | "greyTone2_40" | "greyTone2_50" | "greyTone2_60" | "greyTone2_70" | "greyTone2_80" | "greyTone2_90" | "success_5" | "success_10" | "success_20" | "success_30" | "success_40" | "success_50" | "success_60" | "success_70" | "success_80" | "success_90" | "warning_5" | "warning_10" | "warning_20" | "warning_30" | "warning_40" | "warning_50" | "warning_60" | "warning_70" | "warning_80" | "warning_90" | "danger_5" | "danger_10" | "danger_20" | "danger_30" | "danger_40" | "danger_50" | "danger_60" | "danger_70" | "danger_80" | "danger_90" | "inactive_5" | "inactive_10" | "inactive_20" | "inactive_30" | "inactive_40" | "inactive_50" | "inactive_60" | "inactive_70" | "inactive_80" | "inactive_90" | "positive_5" | "positive_10" | "positive_20" | "positive_30" | "positive_40" | "positive_50" | "positive_60" | "positive_70" | "positive_80" | "positive_90" | "negative_5" | "negative_10" | "negative_20" | "negative_30" | "negative_40" | "negative_50" | "negative_60" | "negative_70" | "negative_80" | "negative_90" | "static_5" | "static_10" | "static_20" | "static_30" | "static_40" | "static_50" | "static_60" | "static_70" | "static_80" | "static_90"), string>;
     /**
      * Border radius tokens.
      *
@@ -6276,5 +6654,5 @@ declare const Token: {
     };
 };
 
-export { Action, ActionButton, Avatar, Badge, BottomSheet, Button, Calendar, Cell, CellSkeleton, Checkbox, CompactInput, Copyable, DetailsCell, Dropdown, FilterButton, Footnote, Group, HStack, Icon, Image, Input, Link, List, MessageBubble, Page, Placeholder, Popup, ProgressSteps, Radio, RootProvider, Search, Spacer, StarRating, Subheader, Switch, TabBar, Text, TextArea, Toast, ToggleButton, Token, VStack, VisuallyHidden, copyToClipboard, nodeChain, useDateFormat, useDateRangeFormat, useDateTimeFormat, useDropdown, useIsRTL, useMoneyFormat, useStatusSheet, useTimeFormat, useToast };
-export type { ActionButtonProps, ActionButtonVariant, ActionProps, AvatarProps, AvatarSize, BadgeProps, BottomSheetActionsProps, BottomSheetContentProps, BottomSheetHeaderProps, BottomSheetProps, ButtonProps, ButtonVariant, CalendarDateProps, CalendarDisabledDays, CalendarProps, CalendarRangeProps, CalendarVariant, CellProps, CellVariant, CheckboxProps, CompactInputProps, CopyableProps, CurrencyDefinition, DateFormatOptions, DateRangeFormatOptions, DateTimeFormatOptions, DetailsCellProps, DropdownOptions, DropdownProps, DropdownState, FilterButtonProps, FootnoteProps, GroupProps, GroupVariant, HStackProps, IconName, IconProps, ImageFit, ImageProp, ImageProps, InputProps, InputType, IntlMessages, LinkProps, ListProps, MessageBubbleProps, PageHeaderProps, PageMainProps, PageProps, PageTabsProps, PlaceholderProps, PopupProps, ProgressStepsProps, RadioProps, RootProviderProps, SearchProps, Space, SpacerProps, StackAlignment, StarRatingProps, StatusSheetAction, StatusSheetInstance, StatusSheetOptions, StatusSheetVariant, SubheaderProps, SubheaderVariant, SwitchProps, TabBarItem, TabBarProps, TabBarVariant, TextAreaProps, TextProps, TextVariant, ThemeBackground, ThemeMode, TimeFormatOptions, ToastActions, ToastProps, ToggleButtonProps, UseMoneyFormatOptions, VStackProps, VisuallyHiddenProps };
+export { Action, ActionButton, Avatar, Badge, BottomSheet, Button, Calendar, Cell, CellSkeleton, Checkbox, CompactInput, Copyable, DetailsCell, Dropdown, FilterButton, Footnote, Group, HStack, Icon, Image, Input, Link, List, Map, MessageBubble, Page, Placeholder, Popup, ProgressSteps, Radio, RootProvider, Search, Slider, SliderVariant, Spacer, StarRating, Subheader, Switch, TabBar, Text, TextArea, Toast, ToggleButton, Token, VStack, VisuallyHidden, copyToClipboard, nodeChain, useDateFormat, useDateRangeFormat, useDateTimeFormat, useDropdown, useIsRTL, useMoneyFormat, useStatusSheet, useTimeFormat, useToast };
+export type { ActionButtonProps, ActionButtonVariant, ActionProps, AvatarProps, AvatarSize, BadgeProps, BottomSheetActionsProps, BottomSheetContentProps, BottomSheetHeaderProps, BottomSheetProps, ButtonProps, ButtonVariant, CalendarDateProps, CalendarDisabledDays, CalendarProps, CalendarRangeProps, CalendarVariant, CellProps, CellVariant, CheckboxProps, CompactInputProps, CopyableProps, CurrencyDefinition, DateFormatOptions, DateRangeFormatOptions, DateTimeFormatOptions, DetailsCellProps, DropdownOptions, DropdownProps, DropdownState, FilterButtonProps, FootnoteProps, GroupProps, GroupVariant, HStackProps, IconName, IconProps, ImageFit, ImageProp, ImageProps, InputProps, InputType, IntlMessages, LinkProps, ListProps, MapCenter, MapControls, MapLoadingState, MapMarker, MapProps, MessageBubbleProps, PageHeaderProps, PageMainProps, PageProps, PageTabsProps, PlaceholderProps, PopupProps, ProgressStepsProps, RadioProps, RangeSliderProps, RootProviderProps, SearchProps, SingleSliderProps, SliderProps, Space, SpacerProps, StackAlignment, StarRatingProps, StatusSheetAction, StatusSheetInstance, StatusSheetOptions, StatusSheetVariant, SubheaderProps, SubheaderVariant, SwitchProps, TabBarItem, TabBarProps, TabBarVariant, TextAreaProps, TextProps, TextVariant, ThemeBackground, ThemeMode, TimeFormatOptions, ToastActions, ToastProps, ToggleButtonProps, UseMoneyFormatOptions, VStackProps, VisuallyHiddenProps };