mtrl 0.7.0 → 0.8.0-next.10

package/dist/components/carousel/types.d.ts

@@ -1,276 +1,70 @@
+export type CarouselVariant = "multi-browse" | "uncontained" | "hero" | "hero-center" | "full-screen";
 /**
- * Material Design 3 Carousel Layout Types
- * @category Components
- */
-export type CarouselLayout = 
-/** Best for browsing many visual items at once (photos, event feeds) */
-'multi-browse'
-/** For highly customized or text-heavy carousels (traditional behavior) */
- | 'uncontained'
-/** For spotlighting very large visual items (featured content) */
- | 'hero'
-/** For immersive vertical-scrolling experiences */
- | 'full-screen';
-/**
- * Carousel Scrolling Behaviors
- * @category Components
- */
-export type CarouselScrollBehavior = 
-/** Standard scrolling without snapping, recommended for uncontained layouts */
-'default'
-/** Items snap to carousel layout, recommended for multi-browse, hero, and full-screen layouts */
- | 'snap';
-/**
- * Slide data interface
- * @category Components
+ * Content of one carousel item. Either an image with optional text and a
+ * call to action, or arbitrary content.
  */
 export interface CarouselSlide {
-    /** Image URL for the slide */
-    image: string;
-    /** Optional title text for the slide */
+    image?: string;
+    /** Alternative text for the image; empty when the image is decorative */
+    alt?: string;
     title?: string;
-    /** Optional accent color in hexadecimal or RGB format */
-    accent?: string;
-    /** Optional description text */
     description?: string;
-    /** Optional action button text */
     buttonText?: string;
-    /** Optional action button URL */
     buttonUrl?: string;
-    /** Optional size designation for the item, will be auto-calculated if not provided */
-    size?: 'large' | 'medium' | 'small';
+    /** Custom content, replaces the image and text */
+    content?: HTMLElement | string;
 }
-/**
- * Configuration interface for the Carousel component
- * @category Components
- */
 export interface CarouselConfig {
-    /**
-     * Initial slide index to display
-     * @default 0
-     */
-    initialSlide?: number;
-    /**
-     * Whether to loop the carousel
-     * @default true
-     */
-    loop?: boolean;
-    /**
-     * Transition effect for slide changes
-     * @default 'slide'
-     */
-    transition?: 'slide' | 'fade' | 'none';
-    /**
-     * Transition duration in milliseconds
-     * @default 300
-     */
-    transitionDuration?: number;
-    /**
-     * Slides configuration for the carousel
-     * @example [{ image: 'image1.jpg', title: 'Title', accent: '#E6E1E5' }]
-     */
+    /** Layout, "multi-browse" by default */
+    variant?: CarouselVariant;
     slides?: CarouselSlide[];
     /**
-     * Border radius for slides in pixels
-     * @default 16
-     */
-    borderRadius?: number;
-    /**
-     * Gap between slides in pixels
-     * @default 8
+     * Width of a large item in px. Multi-browse and uncontained layouts
+     * treat it as the preferred width, hero layouts as a maximum (the
+     * container width by default).
      */
+    itemWidth?: number;
+    /** Space between items, 8 by default (16 for full-screen) */
     gap?: number;
-    /**
-     * Additional CSS classes to add to the carousel
-     * @example 'hero-carousel featured-carousel'
-     */
-    class?: string;
-    /**
-     * Component prefix for class names
-     * @default 'carousel'
-     */
+    /** Space between the container edges and the items, 16 by default (0 for full-screen) */
+    padding?: number;
+    /** Corner radius of the items, 28 by default */
+    cornerRadius?: number;
+    /** Snap to items after scrolling; on by default except for uncontained layouts */
+    snap?: boolean;
+    initialSlide?: number;
+    minSmallItemWidth?: number;
+    maxSmallItemWidth?: number;
+    /** Accessible name of the carousel */
+    ariaLabel?: string;
     prefix?: string;
-    /**
-     * Component name used in class generation
-     * @default 'carousel'
-     */
     componentName?: string;
-    /**
-     * Callback for "Show all" action when present
-     */
-    onShowAll?: () => void;
-    /**
-     * Whether to show a "Show all" link at the end
-     * MD3 recommends adding this for accessibility on vertical scrolling pages
-     * @default true
-     */
-    showAllLink?: boolean;
-    /**
-     * MD3 carousel layout type
-     * @default 'multi-browse'
-     */
-    layout?: CarouselLayout;
-    /**
-     * Scrolling behavior for the carousel
-     * @default depends on layout (snap for multi-browse, hero, full-screen; default for uncontained)
-     */
-    scrollBehavior?: CarouselScrollBehavior;
-    /**
-     * Whether to center the carousel items (applies to hero layout)
-     * @default false
-     */
-    centered?: boolean;
-    /**
-     * Maximum width of large items (affects how many items fit on screen)
-     * Large items should remain big enough to be easily recognizable
-     */
-    largeItemMaxWidth?: number;
-    /**
-     * Width for small items in pixels
-     * @default 40-56dp range as per MD3 guidelines
-     */
-    smallItemWidth?: number;
-}
-/**
- * Slides API interface for carousel
- * @category Components
- */
-export interface SlidesAPI {
-    /**
-     * Adds a new slide to the carousel
-     * @param slide - CarouselSlide object with slide data
-     * @param index - Optional position to insert the slide
-     * @returns The slides API for chaining
-     */
-    addSlide: (slide: CarouselSlide, index?: number) => SlidesAPI;
-    /**
-     * Removes a slide at the specified index
-     * @param index - Index of the slide to remove
-     * @returns The slides API for chaining
-     */
-    removeSlide: (index: number) => SlidesAPI;
-    /**
-     * Updates an existing slide
-     * @param index - Index of the slide to update
-     * @param slide - Updated CarouselSlide object
-     * @returns The slides API for chaining
-     */
-    updateSlide: (index: number, slide: CarouselSlide) => SlidesAPI;
-    /**
-     * Gets a slide at the specified index
-     * @param index - Index of the slide
-     * @returns CarouselSlide object or null if not found
-     */
-    getSlide: (index: number) => CarouselSlide | null;
-    /**
-     * Gets the total number of slides
-     * @returns Number of slides
-     */
-    getCount: () => number;
-    /**
-     * Gets all slide elements
-     * @returns Array of slide elements
-     */
-    getElements: () => HTMLElement[];
+    class?: string;
 }
-/**
- * Carousel component interface
- * @category Components
- */
 export interface CarouselComponent {
-    /** The carousel's root DOM element */
     element: HTMLElement;
-    /** API for managing carousel slides */
     slides: SlidesAPI;
-    /** API for managing component lifecycle */
     lifecycle: {
-        /** Destroys the component and cleans up resources */
         destroy: () => void;
     };
-    /**
-     * Gets a class name with the component's prefix
-     * @param name - Base class name
-     * @returns Prefixed class name
-     */
     getClass: (name: string) => string;
-    /**
-     * Goes to the next slide
-     * @returns The carousel component for chaining
-     */
     next: () => CarouselComponent;
-    /**
-     * Goes to the previous slide
-     * @returns The carousel component for chaining
-     */
     prev: () => CarouselComponent;
-    /**
-     * Goes to a specific slide
-     * @param index - Slide index
-     * @returns The carousel component for chaining
-     */
     goTo: (index: number) => CarouselComponent;
-    /**
-     * Gets the current slide index
-     * @returns Current slide index
-     */
     getCurrentSlide: () => number;
-    /**
-     * Adds a new slide
-     * @param slide - CarouselSlide object with slide data
-     * @param index - Optional position to insert the slide
-     * @returns The carousel component for chaining
-     */
+    getVariant: () => CarouselVariant;
     addSlide: (slide: CarouselSlide, index?: number) => CarouselComponent;
-    /**
-     * Removes a slide
-     * @param index - Index of the slide to remove
-     * @returns The carousel component for chaining
-     */
     removeSlide: (index: number) => CarouselComponent;
-    /**
-     * Enables the loop mode
-     * @returns The carousel component for chaining
-     */
-    enableLoop: () => CarouselComponent;
-    /**
-     * Disables the loop mode
-     * @returns The carousel component for chaining
-     */
-    disableLoop: () => CarouselComponent;
-    /**
-     * Sets the carousel border radius
-     * @param radius - Border radius in pixels
-     * @returns The carousel component for chaining
-     */
-    setBorderRadius: (radius: number) => CarouselComponent;
-    /**
-     * Sets the gap between slides
-     * @param gap - Gap size in pixels
-     * @returns The carousel component for chaining
-     */
-    setGap: (gap: number) => CarouselComponent;
-    /**
-     * Destroys the carousel component and cleans up resources
-     */
     destroy: () => void;
-    /**
-     * Adds an event listener to the carousel
-     * @param event - Event name
-     * @param handler - Event handler function
-     * @returns The carousel component for chaining
-     */
     on: (event: string, handler: Function) => CarouselComponent;
-    /**
-     * Removes an event listener from the carousel
-     * @param event - Event name
-     * @param handler - Event handler function
-     * @returns The carousel component for chaining
-     */
     off: (event: string, handler: Function) => CarouselComponent;
-    /**
-     * Adds CSS classes to the carousel element
-     * @param classes - One or more class names to add
-     * @returns The carousel component for chaining
-     */
     addClass: (...classes: string[]) => CarouselComponent;
 }
+export interface SlidesAPI {
+    addSlide: (slide: CarouselSlide, index?: number) => SlidesAPI;
+    removeSlide: (index: number) => SlidesAPI;
+    updateSlide: (index: number, slide: CarouselSlide) => SlidesAPI;
+    getSlide: (index: number) => CarouselSlide | null;
+    getCount: () => number;
+    getElements: () => HTMLElement[];
+}

package/dist/components/dialog/api.d.ts

@@ -1,4 +1,4 @@
-import { DialogComponent, DialogButton, DialogConfirmOptions, DialogFooterAlignment, DialogSize } from './types';
+import { DialogComponent, DialogButton, DialogConfirmOptions, DialogFooterAlignment, DialogSize } from "./types";
 interface ApiOptions {
     visibility: {
         open: () => void;

package/dist/components/index.d.ts

@@ -24,6 +24,8 @@ export { default as createExtendedFab } from "./extended-fab";
 export { default as createIconButton } from "./icon-button";
 export { default as createList } from "./list";
 export { default as createMenu } from "./menu";
+export { default as createNavigation } from "./navigation";
+export { default as createNavigationSystem } from "./navigation/system";
 export { default as createProgress } from "./progress";
 export { default as createRadios } from "./radios";
 export { default as createSearch } from "./search";
@@ -33,6 +35,7 @@ export { createSegment } from "./segmented-button/segment";
 export { default as createSheet } from "./sheet";
 export { default as createSlider } from "./slider";
 export { default as createSnackbar } from "./snackbar";
+export { clearSnackbars } from "./snackbar";
 export { default as createSwitch } from "./switch";
 export { default as createTabs } from "./tabs";
 export { createTab } from "./tabs/tab";

package/dist/components/slider/constants.d.ts

@@ -26,7 +26,7 @@ export declare const SLIDER_SIZES: {
     /** Large size - 56px track height */
     readonly L: 56;
     /** Extra large size - 96px track height */
-    readonly XL: 80;
+    readonly XL: 96;
 };
 /**
  * Slider component size type
@@ -40,12 +40,12 @@ export type SliderSize = keyof typeof SLIDER_SIZES | number;
 export declare const SLIDER_MEASUREMENTS: {
     /** Handle size in pixels */
     readonly HANDLE_SIZE: 16;
-    /** Handle height for XS and S sizes in pixels */
-    readonly SMALL_HANDLE_HEIGHT: 48;
-    /** Handle height offset for M, L, XL sizes (added to track height) */
-    readonly HANDLE_HEIGHT_OFFSET: 16;
-    /** Minimum container height in pixels */
-    readonly MIN_HEIGHT: 40;
+    /** Handle height for XS and S sizes in pixels (M3: 44dp) */
+    readonly SMALL_HANDLE_HEIGHT: 44;
+    /** Handle height offset for M, L, XL sizes (added to track height: 52, 68, 108dp) */
+    readonly HANDLE_HEIGHT_OFFSET: 12;
+    /** Minimum container height in pixels (M3 minimum touch target) */
+    readonly MIN_HEIGHT: 48;
     /** Track border radius in pixels */
     readonly TRACK_RADIUS: 3;
     /** External track radius for XS and S sizes in pixels */
@@ -57,7 +57,7 @@ export declare const SLIDER_MEASUREMENTS: {
     /** Dot size in pixels */
     readonly DOT_SIZE: 4;
     /** Handle gap pixels */
-    readonly HANDLE_GAP: 8;
+    readonly HANDLE_GAP: 6;
     /** Handle gap reduction when pressed in pixels */
     readonly HANDLE_GAP_PRESSED_REDUCTION: 2;
     /** Center gap pixels for centered sliders */

package/dist/components/slider/types.d.ts

@@ -26,7 +26,10 @@ export interface SliderConfig extends BaseComponentConfig {
     step?: number;
     /** Whether the slider is disabled */
     disabled?: boolean;
-    /** Color variant of the slider */
+    /** Color variant of the slider *
+     * A stylesheet can override the drawn colours per slider with the custom
+     * properties --mtrl-slider-color and --mtrl-slider-on-color.
+     */
     color?: SliderColor;
     /** Size variant of the slider */
     size?: SliderSize;

package/dist/components/snackbar/api.d.ts

@@ -1,7 +1,7 @@
-import { BaseComponent, SnackbarComponent, ApiOptions } from "./types";
+import { BaseComponent, SnackbarComponent, ApiOptions } from './types';
 /**
  * Enhances snackbar component with API methods
  * @param {ApiOptions} options - API configuration
  * @returns {Function} Higher-order function that adds API methods to component
  */
-export declare const withAPI: ({ lifecycle, queue }: ApiOptions) => (component: BaseComponent) => SnackbarComponent;
+export declare const withAPI: ({ lifecycle, queue, config }: ApiOptions) => (component: BaseComponent) => SnackbarComponent;

package/dist/components/snackbar/config.d.ts

@@ -1,4 +1,4 @@
-import { SnackbarConfig, BaseComponent, ApiOptions } from "./types";
+import { SnackbarConfig, SnackbarDuration, BaseComponent, ApiOptions, SnackbarQueue } from './types';
 /**
  * Default configuration for the Snackbar component
  */
@@ -10,7 +10,20 @@ export declare const defaultConfig: Partial<SnackbarConfig>;
  */
 export declare const createBaseConfig: (config: SnackbarConfig) => SnackbarConfig;
 /**
- * Generates element configuration for the Snackbar component
+ * Resolves a duration to milliseconds; 0 means the snackbar stays.
+ *
+ * Without a value, a snackbar with an action stays until acted on and one
+ * without goes after 4 s (Compose `SnackbarHostState.showSnackbar`, and the
+ * M3 accessibility guidance that actionable snackbars should not
+ * auto-dismiss).
+ */
+export declare const durationToMs: (duration: SnackbarDuration | undefined, hasAction: boolean) => number;
+/**
+ * Generates element configuration for the Snackbar component.
+ *
+ * `role="status"` is a polite, atomic live region: the message is announced
+ * when it appears, after whatever the user is doing, and focus stays put
+ * (M3 snackbar accessibility; Compose sets `LiveRegionMode.Polite`).
  * @param {SnackbarConfig} config - Snackbar configuration
  * @returns {Object} Element configuration object for withElement
  */
@@ -43,11 +56,13 @@ export declare const getElementConfig: (config: SnackbarConfig) => {
  */
 export declare const getTextConfig: (config: SnackbarConfig) => {
     text: string;
-    variant?: import("./types").SnackbarVariant;
-    position?: import("./types").SnackbarPosition;
     message: string;
     action?: string;
-    duration?: number;
+    dismissible?: boolean;
+    closeLabel?: string;
+    duration?: SnackbarDuration;
+    position?: import("./types").SnackbarPosition;
+    queueBehavior?: import("./types").SnackbarQueueBehavior;
     onAction?: (event: import("./types").SnackbarEvent) => void;
     onOpen?: (event: import("./types").SnackbarEvent) => void;
     onClose?: (event: import("./types").SnackbarEvent) => void;
@@ -60,7 +75,8 @@ export declare const getTextConfig: (config: SnackbarConfig) => {
  * Creates API configuration for the Snackbar component
  * @param {BaseComponent} comp - Component with lifecycle feature
  * @param {SnackbarQueue} queue - Snackbar queue manager
+ * @param {SnackbarConfig} config - The resolved configuration
  * @returns {ApiOptions} API configuration object
  */
-export declare const getApiConfig: (comp: BaseComponent, queue: any) => ApiOptions;
+export declare const getApiConfig: (comp: BaseComponent, queue: SnackbarQueue, config: SnackbarConfig) => ApiOptions;
 export default defaultConfig;

package/dist/components/snackbar/constants.d.ts

@@ -1,88 +1,132 @@
 /**
- * Snackbar visual variants
- * @category Components
- */
-export declare const SNACKBAR_VARIANTS: {
-    /** Basic snackbar with just text */
-    readonly BASIC: "basic";
-    /** Snackbar with an action button */
-    readonly ACTION: "action";
-};
-/**
- * Snackbar display positions
+ * Where the snackbar sits along the bottom edge
  * @category Components
  */
 export declare const SNACKBAR_POSITIONS: {
-    /** Centered position (default) */
+    /** Centred (default) */
     readonly CENTER: "center";
-    /** Start-aligned position */
+    /** Against the leading edge */
     readonly START: "start";
-    /** End-aligned position */
+    /** Against the trailing edge */
     readonly END: "end";
 };
+/**
+ * Duration presets (Compose Material 3 `SnackbarDuration`)
+ * @category Components
+ */
+export declare const SNACKBAR_DURATIONS: {
+    /** 4 seconds, the default without an action */
+    readonly SHORT: "short";
+    /** 10 seconds */
+    readonly LONG: "long";
+    /** Stays until acted on or dismissed, the default with an action */
+    readonly INDEFINITE: "indefinite";
+};
+/**
+ * Milliseconds behind the presets; 0 means no auto-dismiss
+ * @category Components
+ */
+export declare const SNACKBAR_DURATION_MS: {
+    readonly short: 4000;
+    readonly long: 10000;
+    readonly indefinite: 0;
+};
 /**
  * Snackbar visibility states
  * @category Components
  */
 export declare const SNACKBAR_STATES: {
-    /** Snackbar is visible */
     readonly VISIBLE: "visible";
-    /** Snackbar is hidden */
     readonly HIDDEN: "hidden";
 };
+/**
+ * Snackbar queue behaviors
+ *
+ * Controls how a newly shown snackbar interacts with the one currently on
+ * screen and any still waiting in the queue.
+ * @category Components
+ */
+export declare const SNACKBAR_QUEUE_BEHAVIORS: {
+    /** Wait in line: shown one at a time, in order (default) */
+    readonly QUEUE: "queue";
+    /** Replace: dismiss the current snackbar, drop any pending ones, and show
+     *  this snackbar right away (last wins) */
+    readonly REPLACE: "replace";
+};
 /**
  * Snackbar event types
  * @category Components
  */
 export declare const SNACKBAR_EVENTS: {
-    /** Fired when snackbar opens */
+    /** The snackbar is on screen */
     readonly OPEN: "open";
-    /** Fired when snackbar closes */
+    /** The snackbar is leaving; the event carries the reason */
     readonly CLOSE: "close";
-    /** Fired when action button is clicked */
+    /** The action button was clicked */
     readonly ACTION: "action";
-    /** Fired when auto-dismiss timer completes */
+    /** Fired with `close`; the queue listens to it */
     readonly DISMISS: "dismiss";
 };
+/**
+ * Why a snackbar closed
+ * @category Components
+ */
+export declare const SNACKBAR_CLOSE_REASONS: {
+    /** The duration ran out */
+    readonly TIMEOUT: "timeout";
+    /** The action was clicked */
+    readonly ACTION: "action";
+    /** The close icon was clicked */
+    readonly CLOSE_BUTTON: "close-button";
+    /** Escape was pressed while focus was inside */
+    readonly ESCAPE: "escape";
+    /** `hide()` was called */
+    readonly API: "api";
+    /** The queue replaced or cleared it */
+    readonly QUEUE: "queue";
+};
 /**
  * Default configuration values for snackbar
  * @category Components
  */
 export declare const SNACKBAR_DEFAULTS: {
-    /** Default visual variant */
-    readonly VARIANT: "basic";
     /** Default display position */
     readonly POSITION: "center";
-    /** Default display duration in milliseconds (4 seconds) */
-    readonly DURATION: 4000;
-    /** Default z-index for snackbars */
-    readonly Z_INDEX: 1000;
-    /** Default animation duration in milliseconds */
-    readonly ANIMATION_DURATION: 300;
+    /** Default queue behavior */
+    readonly QUEUE_BEHAVIOR: "queue";
+    /** Delay in milliseconds between a dismissed snackbar and the next one */
+    readonly QUEUE_GAP: 200;
+    /** Accessible name of the close icon */
+    readonly CLOSE_LABEL: "Dismiss";
+    /** The longest of the exit transitions, after which the element is
+     *  removed whether or not `transitionend` came */
+    readonly ANIMATION_DURATION: 425;
+    /** An action wider than this moves below the text
+     *  (`design_snackbar_action_inline_max_width`) */
+    readonly ACTION_INLINE_MAX_WIDTH: 128;
 };
 /**
- * CSS class names used by the snackbar component
+ * CSS class names used by the snackbar component, without the prefix
  * @category Components
  */
 export declare const SNACKBAR_CLASSES: {
-    /** Root element class */
     readonly ROOT: "snackbar";
-    /** Basic variant class */
-    readonly BASIC: "snackbar--basic";
-    /** Action variant class */
-    readonly ACTION: "snackbar--action";
-    /** Center position class */
     readonly CENTER: "snackbar--center";
-    /** Start position class */
     readonly START: "snackbar--start";
-    /** End position class */
     readonly END: "snackbar--end";
-    /** Visible state class */
     readonly VISIBLE: "snackbar--visible";
-    /** Hidden state class */
-    readonly HIDDEN: "snackbar--hidden";
-    /** Message text class */
-    readonly MESSAGE: "snackbar__message";
-    /** Action button class */
-    readonly ACTION_BUTTON: "snackbar__action";
+    /** An action is present */
+    readonly WITH_ACTION: "snackbar--with-action";
+    /** A close icon is present */
+    readonly DISMISSIBLE: "snackbar--dismissible";
+    /** The action is too wide to sit beside the text */
+    readonly ACTION_BELOW: "snackbar--action-below";
+    readonly TEXT: "snackbar-text";
+    readonly ACTION: "snackbar-action";
+    readonly CLOSE: "snackbar-close";
 };
+/**
+ * The close icon (Material Symbols "close")
+ * @category Components
+ */
+export declare const SNACKBAR_CLOSE_ICON: string;

package/dist/components/snackbar/features.d.ts

@@ -1,12 +1,25 @@
 import { BaseComponent, SnackbarConfig } from './types';
 /**
- * Adds action button to snackbar
+ * Adds the action: a text button, the one M3 allows, coloured inverse-primary
+ * by the stylesheet. Reusing the button gives it the state layers, the focus
+ * ring and the touch target.
  * @param {SnackbarConfig} config - Component configuration
- * @returns {Function} Higher-order function that adds action button
+ * @returns {Function} Higher-order function that adds the action button
  */
 export declare const withActionButton: (config: SnackbarConfig) => (component: BaseComponent) => BaseComponent;
 /**
- * Adds auto-dismiss timer functionality
+ * Adds the optional close affordance: a standard icon button (40dp, 24dp
+ * icon; `SnackbarTokens.IconSize`), coloured inverse-on-surface by the
+ * stylesheet.
+ * @param {SnackbarConfig} config - Component configuration
+ * @returns {Function} Higher-order function that adds the close button
+ */
+export declare const withCloseButton: (config: SnackbarConfig) => (component: BaseComponent) => BaseComponent;
+/**
+ * Adds the auto-dismiss timer. It emits `timeout` when the duration runs out
+ * and holds while the pointer is over the snackbar or focus is inside it:
+ * Compose extends the timeout through the accessibility manager, and pausing
+ * is the web's equivalent for someone who needs more time (WCAG 2.2.1).
  * @param {SnackbarConfig} config - Component configuration
  * @returns {Function} Higher-order function that adds timer features
  */

package/dist/components/snackbar/index.d.ts

@@ -1,2 +1,4 @@
-export { default } from "./snackbar";
-export { SnackbarConfig, SnackbarComponent } from "./types";
+export { default } from './snackbar';
+export { clearSnackbars } from './snackbar';
+export type { SnackbarConfig, SnackbarComponent, SnackbarEvent, SnackbarPosition, SnackbarDuration, SnackbarCloseReason, SnackbarQueueBehavior, } from './types';
+export { SNACKBAR_POSITIONS, SNACKBAR_DURATIONS, SNACKBAR_CLOSE_REASONS, SNACKBAR_QUEUE_BEHAVIORS, } from './constants';