@telefonica/mistica 17.2.0 → 17.4.0

package/src/sidenav-bar-first-level-item.tsx

@@ -0,0 +1,203 @@
+'use client';
+import * as React from 'react';
+import {CSSTransition} from 'react-transition-group';
+import * as styles from './sidenav-bar.css';
+import {CONTENT_DURATION_MS} from './sidenav-bar.css';
+import {useSidenavBarContext} from './sidenav-bar-context';
+import {SidenavDialogPanel} from './sidenav-bar-panel';
+import {SidenavRow, useSidenavNavigation} from './sidenav-bar-row';
+import {renderSidenavSecondLevelItem} from './sidenav-bar-second-level-item';
+
+import type {DataAttributes} from './utils/types';
+import type {SidenavAsset, SidenavSecondLevelItem as SidenavSecondLevelItemData} from './sidenav-bar-types';
+
+type SidenavFirstLevelItemProps = {
+    /** Unique identifier for selection tracking. */
+    id: string;
+    /** Display text. A text longer than the row wraps over several lines, and it never truncates. */
+    label: string;
+    /** Icon component or element. The collapsed rail shows nothing else of a first-level item. */
+    asset: SidenavAsset;
+    /** Show asset when expanded (not collapsed). @default true */
+    showAssetWhenExpanded?: boolean;
+    /** Custom content on the right side (e.g., Badge). */
+    rightSlot?: React.ReactNode;
+    /**
+     * True when the item sits directly in the body list, which already gave it a list item. A stand-alone
+     * entry carries that list item on a wrapper of its own, so this item renders none.
+     */
+    standalone?: boolean;
+    /**
+     * Second-level items. An item with second-level items cannot navigate: it lists them in place, in a dialog
+     * panel over the collapsed rail, or in the second column, which the bar renders.
+     */
+    secondLevelItems?: ReadonlyArray<SidenavSecondLevelItemData>;
+    /** Initial open state of the children. @default false */
+    defaultOpen?: boolean;
+    onPress?: () => void;
+    href?: string;
+    to?: string;
+    /** Open link in new tab. @default false */
+    newTab?: boolean;
+    /** Called after navigation. */
+    onNavigate?: () => void | Promise<void>;
+    dataAttributes?: DataAttributes;
+};
+
+/**
+ * A first-level item. It either navigates, or it owns the second-level items and only opens and closes
+ * them. It opens them in place when the rail is expanded, in a floating panel when the rail is collapsed,
+ * and in the second column in double panel mode.
+ */
+const SidenavFirstLevelItem = ({
+    id,
+    label,
+    asset,
+    showAssetWhenExpanded = true,
+    rightSlot,
+    standalone = false,
+    secondLevelItems,
+    defaultOpen,
+    dataAttributes,
+    ...navigationProps
+}: SidenavFirstLevelItemProps): JSX.Element => {
+    const {
+        collapsed,
+        collapseState,
+        isMotionOff,
+        doublePanel,
+        panelOpenForItemId,
+        setPanelOpenForItemId,
+        containerRef,
+        selectedItemId,
+    } = useSidenavBarContext();
+    const navigation = useSidenavNavigation(id, navigationProps);
+
+    const hasChildren = !!secondLevelItems?.length;
+    const isItemSelected = selectedItemId === id;
+    const hasDescendantSelected =
+        !!selectedItemId && !!secondLevelItems?.some((item) => item.id === selectedItemId);
+
+    const [open, setOpen] = React.useState(Boolean(defaultOpen));
+    // The dialog panel renders in a portal, so the trigger points at it with `aria-controls`.
+    const dialogPanelId = React.useId();
+    const labelId = React.useId();
+    const accordionRef = React.useRef<HTMLDivElement>(null);
+
+    const isPanelOpen = hasChildren && panelOpenForItemId === id;
+    const isPanelMode = hasChildren && (collapsed || doublePanel);
+    const isOpen = hasChildren && !collapsed && !isPanelMode && open;
+    // In double panel mode the bar renders the panel as its second column; the dialog panel renders here.
+    const isDialogMode = isPanelMode && !doublePanel;
+    const isPanelOpenForAnotherItem = panelOpenForItemId && panelOpenForItemId !== id;
+
+    // Never two highlighted rows: a closed parent flags a hidden selected descendant, an open parent
+    // leaves the background to the selected child, and an open panel takes it from every other parent.
+    const showBackground =
+        isItemSelected || isPanelOpen || (hasDescendantSelected && !isOpen && !isPanelOpenForAnotherItem);
+
+    // Keyed on the descendant id, not on a boolean, so that a selection change between two siblings
+    // reopens a parent the user closed. It only opens, never closes.
+    const selectedDescendantId = hasDescendantSelected ? selectedItemId : null;
+    React.useEffect(() => {
+        if (selectedDescendantId !== null) {
+            setOpen(true);
+        }
+    }, [selectedDescendantId]);
+
+    React.useEffect(() => {
+        if (process.env.NODE_ENV !== 'production' && !asset) {
+            console.error(
+                `SidenavBar item "${label}" is a first-level item without an asset, so the collapsed sidenav shows nothing of it. ` +
+                    `Pass an asset, and hide it with showAssetWhenExpanded if you do not want it next to the label.`
+            );
+        }
+    }, [asset, label]);
+
+    // The rail drops every tooltip while the dialog panel floats over it. Beside a second column only the
+    // owner item drops its own, because the column shows its label as a title. The tooltip arrives once the
+    // rail rests collapsed and leaves once it rests expanded: its wrapper replaces the row node, and a
+    // replaced row drops its transition.
+    const isRestingCollapsed = collapseState === 'collapsed' || collapseState === 'expanding';
+    const showTooltip = isRestingCollapsed && (doublePanel ? !isPanelOpen : !panelOpenForItemId);
+
+    const handlePress = () => {
+        if (isPanelMode) {
+            setPanelOpenForItemId(isPanelOpen ? null : id);
+        } else {
+            setOpen((prev) => !prev);
+        }
+    };
+
+    const row = (
+        <SidenavRow
+            id={id}
+            label={label}
+            asset={asset}
+            // The collapsed rail shows the asset alone, so it keeps it whatever the prop says.
+            showAsset={collapsed || showAssetWhenExpanded}
+            rightSlot={rightSlot}
+            labelId={labelId}
+            showBackground={showBackground}
+            // The accent belongs to the selected item only, never to a parent of it.
+            showAccent={isItemSelected}
+            current={isItemSelected || hasDescendantSelected}
+            chevron={hasChildren ? {rotated: isOpen, direction: doublePanel ? 'right' : 'down'} : undefined}
+            placement="rail"
+            tooltip={showTooltip}
+            navigation={hasChildren ? undefined : navigation}
+            toggle={
+                hasChildren
+                    ? {
+                          onPress: handlePress,
+                          expanded: isPanelMode ? isPanelOpen : isOpen,
+                          controls: isPanelOpen && isDialogMode ? dialogPanelId : undefined,
+                      }
+                    : undefined
+            }
+            dataAttributes={dataAttributes}
+        />
+    );
+
+    // The row and its accordion share one list item. A stand-alone first-level entry already sits in
+    // a list item of the body list, so this one steps aside there.
+    return (
+        <div role={standalone ? undefined : 'listitem'}>
+            {row}
+            {hasChildren && (
+                <CSSTransition
+                    in={isOpen}
+                    timeout={isMotionOff ? 0 : CONTENT_DURATION_MS}
+                    nodeRef={accordionRef}
+                    classNames={styles.accordionTransitionClasses}
+                    mountOnEnter
+                    unmountOnExit
+                >
+                    <div
+                        className={styles.accordionContainer}
+                        ref={accordionRef}
+                        // ArrowLeft on a child reads it to move the focus back to the trigger.
+                        data-sidenav-accordion-for={id}
+                    >
+                        <div className={styles.accordion}>
+                            <div className={styles.accordionRows} role="list" aria-labelledby={labelId}>
+                                {secondLevelItems?.map((item) =>
+                                    renderSidenavSecondLevelItem(item, {placement: 'accordion'})
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                </CSSTransition>
+            )}
+            {isPanelOpen && isDialogMode && (
+                <SidenavDialogPanel id={dialogPanelId} itemId={id} label={label} containerRef={containerRef}>
+                    {secondLevelItems?.map((item) =>
+                        renderSidenavSecondLevelItem(item, {placement: 'panel'})
+                    )}
+                </SidenavDialogPanel>
+            )}
+        </div>
+    );
+};
+
+export {SidenavFirstLevelItem};

package/src/sidenav-bar-keyboard.tsx

@@ -0,0 +1,393 @@
+'use client';
+import * as React from 'react';
+
+/**
+ * Key map of the spec:
+ *   ArrowUp / ArrowDown   move between items
+ *   Home / End            first / last item
+ *   ArrowRight            expand a closed parent, or step into its open group
+ *   ArrowLeft             collapse an open parent, or move from a child to its parent
+ *   Tab                   an item, then the children it opened, then the next item
+ *   Escape                close the dialog panel (handled in sidenav-bar-panel.tsx)
+ *
+ * Arrows stay on one level. Tab follows the reading order of the spec, which the document does not
+ * carry: the dialog panel lives in a portal and the second column comes after the whole rail.
+ */
+
+const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+const escapeAttributeValue = (value: string): string =>
+    typeof CSS !== 'undefined' && CSS.escape ? CSS.escape(value) : value.replace(/"/g, '\\"');
+
+const toFocusables = (rows: Array<HTMLElement>): Array<HTMLElement> =>
+    rows
+        .map((row) => row.querySelector<HTMLElement>(FOCUSABLE_SELECTOR))
+        .filter((element): element is HTMLElement => element !== null);
+
+const getItemFocusables = (root: HTMLElement | null): Array<HTMLElement> =>
+    root ? toFocusables(Array.from(root.querySelectorAll<HTMLElement>('[data-sidenav-item-id]'))) : [];
+
+// The second column rows share the landmark. Without this filter they would end the rail sequence.
+const getRailFocusables = (root: HTMLElement | null): Array<HTMLElement> => {
+    if (!root) {
+        return [];
+    }
+    const rows = Array.from(root.querySelectorAll<HTMLElement>('[data-sidenav-item-id]')).filter(
+        (row) => !row.closest('[data-sidenav-double-panel]')
+    );
+    return toFocusables(rows);
+};
+
+const getRailFocusable = (itemId: string, container: HTMLElement): HTMLElement | null => {
+    const row = container.querySelector<HTMLElement>(
+        `[data-sidenav-item-id="${escapeAttributeValue(itemId)}"]`
+    );
+    return row?.querySelector<HTMLElement>(FOCUSABLE_SELECTOR) ?? null;
+};
+
+const getRailFocusableAfter = (triggerItemId: string, container: HTMLElement): HTMLElement | null => {
+    const trigger = getRailFocusable(triggerItemId, container);
+    if (!trigger) {
+        return null;
+    }
+    const rail = getRailFocusables(container);
+    return rail[rail.indexOf(trigger) + 1] ?? null;
+};
+
+const getOpenDialogPanel = (trigger: HTMLElement): HTMLElement | null => {
+    if (trigger.getAttribute('aria-expanded') !== 'true') {
+        return null;
+    }
+    const row = trigger.closest('[data-sidenav-item-id]');
+    const itemId = row?.getAttribute('data-sidenav-item-id');
+    if (!itemId) {
+        return null;
+    }
+    return document.querySelector<HTMLElement>(
+        `[data-sidenav-dialog-panel="${escapeAttributeValue(itemId)}"]`
+    );
+};
+
+const getOpenDoublePanel = (trigger: HTMLElement, container: HTMLElement): HTMLElement | null => {
+    const itemId = trigger.closest('[data-sidenav-item-id]')?.getAttribute('data-sidenav-item-id');
+    if (!itemId) {
+        return null;
+    }
+    return container.querySelector<HTMLElement>(
+        `[data-sidenav-double-panel="${escapeAttributeValue(itemId)}"]`
+    );
+};
+
+const getOpenAccordion = (trigger: HTMLElement, container: HTMLElement): HTMLElement | null => {
+    const itemId = trigger.closest('[data-sidenav-item-id]')?.getAttribute('data-sidenav-item-id');
+    if (!itemId) {
+        return null;
+    }
+    return container.querySelector<HTMLElement>(
+        `[data-sidenav-accordion-for="${escapeAttributeValue(itemId)}"]`
+    );
+};
+
+const getParentTrigger = (child: HTMLElement, container: HTMLElement): HTMLElement | null => {
+    const accordion = child.closest('[data-sidenav-accordion-for]');
+    const parentId = accordion?.getAttribute('data-sidenav-accordion-for');
+    if (!parentId) {
+        return null;
+    }
+    const parentRow = container.querySelector<HTMLElement>(
+        `[data-sidenav-item-id="${escapeAttributeValue(parentId)}"]`
+    );
+    return parentRow?.querySelector<HTMLElement>(FOCUSABLE_SELECTOR) ?? null;
+};
+
+const useSidenavRailKeyboard = (
+    containerRef: React.RefObject<HTMLElement | null>
+): ((event: React.KeyboardEvent) => void) =>
+    React.useCallback(
+        (event: React.KeyboardEvent) => {
+            const container = containerRef.current;
+            if (!container) {
+                return;
+            }
+            const active = document.activeElement as HTMLElement | null;
+            if (!active) {
+                return;
+            }
+
+            const column = active.closest<HTMLElement>('[data-sidenav-double-panel]');
+            if (column) {
+                const columnItemId = column.getAttribute('data-sidenav-double-panel') ?? '';
+                const trigger = getRailFocusable(columnItemId, container);
+                const columnItems = getItemFocusables(column);
+                const columnIndex = columnItems.indexOf(active);
+
+                switch (event.key) {
+                    case 'ArrowDown':
+                        event.preventDefault();
+                        columnItems[Math.min(columnIndex + 1, columnItems.length - 1)]?.focus();
+                        return;
+                    // The column is not a floating panel, so it stays open when the focus leaves it.
+                    case 'ArrowUp':
+                    case 'ArrowLeft':
+                        event.preventDefault();
+                        if (event.key === 'ArrowUp' && columnIndex > 0) {
+                            columnItems[columnIndex - 1].focus();
+                            return;
+                        }
+                        trigger?.focus();
+                        return;
+                    case 'ArrowRight':
+                        event.preventDefault();
+                        return;
+                    case 'Home':
+                        event.preventDefault();
+                        columnItems[0]?.focus();
+                        return;
+                    case 'End':
+                        event.preventDefault();
+                        columnItems[columnItems.length - 1]?.focus();
+                        return;
+                    case 'Tab': {
+                        event.preventDefault();
+                        if (event.shiftKey) {
+                            (columnIndex > 0 ? columnItems[columnIndex - 1] : trigger)?.focus();
+                            return;
+                        }
+                        const next =
+                            columnIndex < columnItems.length - 1
+                                ? columnItems[columnIndex + 1]
+                                : getRailFocusableAfter(columnItemId, container);
+                        next?.focus();
+                        return;
+                    }
+                    default:
+                        return;
+                }
+            }
+
+            // The collapse action in the header also has `aria-expanded`. ArrowLeft must not toggle it.
+            if (!active.closest('[data-sidenav-item-id]')) {
+                return;
+            }
+
+            const items = getRailFocusables(container);
+            const index = items.indexOf(active);
+
+            switch (event.key) {
+                case 'ArrowDown': {
+                    event.preventDefault();
+                    if (index >= 0 && index < items.length - 1) {
+                        items[index + 1].focus();
+                    }
+                    return;
+                }
+                case 'ArrowUp': {
+                    event.preventDefault();
+                    if (index > 0) {
+                        items[index - 1].focus();
+                    }
+                    return;
+                }
+                case 'Home': {
+                    event.preventDefault();
+                    items[0]?.focus();
+                    return;
+                }
+                case 'End': {
+                    event.preventDefault();
+                    items[items.length - 1]?.focus();
+                    return;
+                }
+                case 'ArrowRight': {
+                    if (active.getAttribute('aria-expanded') === 'false') {
+                        event.preventDefault();
+                        // The effect that watches the open state focuses the first child.
+                        active.click();
+                        return;
+                    }
+                    const dialogPanel = getOpenDialogPanel(active);
+                    if (dialogPanel) {
+                        event.preventDefault();
+                        getItemFocusables(dialogPanel)[0]?.focus();
+                        return;
+                    }
+                    const column = getOpenDoublePanel(active, container);
+                    if (column) {
+                        event.preventDefault();
+                        getItemFocusables(column)[0]?.focus();
+                        return;
+                    }
+                    const accordion = getOpenAccordion(active, container);
+                    if (accordion) {
+                        event.preventDefault();
+                        getItemFocusables(accordion)[0]?.focus();
+                    }
+                    return;
+                }
+                case 'ArrowLeft': {
+                    if (active.getAttribute('aria-expanded') === 'true') {
+                        event.preventDefault();
+                        active.click();
+                        return;
+                    }
+                    const parent = getParentTrigger(active, container);
+                    if (parent) {
+                        event.preventDefault();
+                        parent.focus();
+                    }
+                    return;
+                }
+                case 'Tab': {
+                    if (!event.shiftKey) {
+                        const panel = getOpenDialogPanel(active) ?? getOpenDoublePanel(active, container);
+                        if (panel) {
+                            event.preventDefault();
+                            getItemFocusables(panel)[0]?.focus();
+                        }
+                        return;
+                    }
+                    const previous = index > 0 ? items[index - 1] : null;
+                    if (!previous) {
+                        return;
+                    }
+                    const previousPanel =
+                        getOpenDialogPanel(previous) ?? getOpenDoublePanel(previous, container);
+                    const lastChild = getItemFocusables(previousPanel).pop();
+                    if (lastChild) {
+                        event.preventDefault();
+                        lastChild.focus();
+                    }
+                    return;
+                }
+                default:
+                    return;
+            }
+        },
+        [containerRef]
+    );
+
+type DialogPanelKeyboardArgs = {
+    panelElement: HTMLElement | null;
+    containerRef: React.RefObject<HTMLElement | null>;
+    itemId: string;
+    /** A hidden element takes no focus, so the panel must be positioned first. */
+    isPositioned: boolean;
+    onClose: () => void;
+};
+
+const useDialogPanelKeyboard = ({
+    panelElement,
+    containerRef,
+    itemId,
+    isPositioned,
+    onClose,
+}: DialogPanelKeyboardArgs): void => {
+    const triggerRef = React.useRef<HTMLElement | null>(null);
+    // Read through a ref, so a new callback does not re-attach the listener.
+    const onCloseRef = React.useRef(onClose);
+    onCloseRef.current = onClose;
+
+    React.useEffect(() => {
+        const row = containerRef.current?.querySelector(
+            `[data-sidenav-item-id="${escapeAttributeValue(itemId)}"]`
+        );
+        triggerRef.current = row?.querySelector<HTMLElement>(FOCUSABLE_SELECTOR) ?? null;
+    }, [containerRef, itemId, panelElement]);
+
+    // Open and close both replace the trigger row: the collapsed rail drops and re-adds its tooltips.
+    // The focus falls to the body, so this re-reads the trigger one frame later and focuses it again.
+    const restoreFocusToTrigger = React.useCallback(() => {
+        const container = containerRef.current;
+        if (!container) {
+            return;
+        }
+        const restoreFocus = () => {
+            const active = document.activeElement;
+            if (active && active !== document.body) {
+                return;
+            }
+            const row = container.querySelector(`[data-sidenav-item-id="${escapeAttributeValue(itemId)}"]`);
+            row?.querySelector<HTMLElement>(FOCUSABLE_SELECTOR)?.focus();
+        };
+        if (typeof requestAnimationFrame === 'function') {
+            requestAnimationFrame(restoreFocus);
+        } else {
+            restoreFocus();
+        }
+    }, [containerRef, itemId]);
+
+    // The panel lives in a portal, so a screen reader would not reach it from the trigger.
+    React.useEffect(() => {
+        if (!panelElement || !isPositioned) {
+            return;
+        }
+        getItemFocusables(panelElement)[0]?.focus();
+    }, [panelElement, isPositioned]);
+
+    React.useEffect(() => () => restoreFocusToTrigger(), [restoreFocusToTrigger]);
+
+    React.useEffect(() => {
+        if (!panelElement) {
+            return;
+        }
+        const handleKeyDown = (event: KeyboardEvent) => {
+            const focusables = getItemFocusables(panelElement);
+            if (focusables.length === 0) {
+                return;
+            }
+            const active = document.activeElement as HTMLElement | null;
+            const index = active ? focusables.indexOf(active) : -1;
+
+            switch (event.key) {
+                case 'ArrowDown':
+                    event.preventDefault();
+                    focusables[Math.min(index + 1, focusables.length - 1)]?.focus();
+                    return;
+                // Closing the panel unmounts it, and the restore effect returns the focus to the trigger.
+                case 'ArrowLeft':
+                    event.preventDefault();
+                    onCloseRef.current();
+                    return;
+                case 'ArrowUp':
+                    event.preventDefault();
+                    if (index <= 0) {
+                        onCloseRef.current();
+                        return;
+                    }
+                    focusables[index - 1].focus();
+                    return;
+                case 'Home':
+                    event.preventDefault();
+                    focusables[0].focus();
+                    return;
+                case 'End':
+                    event.preventDefault();
+                    focusables[focusables.length - 1].focus();
+                    return;
+                case 'Tab': {
+                    event.preventDefault();
+                    if (event.shiftKey) {
+                        (index > 0 ? focusables[index - 1] : triggerRef.current)?.focus();
+                        return;
+                    }
+                    if (index < focusables.length - 1) {
+                        focusables[index + 1].focus();
+                        return;
+                    }
+                    const container = containerRef.current;
+                    if (container) {
+                        getRailFocusableAfter(itemId, container)?.focus();
+                    }
+                    return;
+                }
+                default:
+                    return;
+            }
+        };
+
+        panelElement.addEventListener('keydown', handleKeyDown);
+        return () => panelElement.removeEventListener('keydown', handleKeyDown);
+    }, [panelElement, containerRef, itemId]);
+};
+
+export {useSidenavRailKeyboard, useDialogPanelKeyboard, getItemFocusables};

package/src/sidenav-bar-layout.css.ts

@@ -0,0 +1,89 @@
+import {createVar, fallbackVar, style} from '@vanilla-extract/css';
+import {sprinkles} from './sprinkles.css';
+import * as mq from './media-queries.css';
+
+// The height of a persistent band above the layout (a fixed or sticky top header). The rail sticks
+// below that band and subtracts it from its viewport height, so the sidenav does not slide under the
+// header and does not overflow the bottom of the viewport. A header that scrolls away with the document
+// needs no offset: the rail sticks at the top of the viewport once the header has left it.
+export const topOffsetVar = createVar();
+
+const topOffset = fallbackVar(topOffsetVar, '0px');
+
+// A mobile or tablet sidenav is a top bar, and not a column, so the two regions stack there. The spec
+// gives "N/A" for the width of the sidenav on both breakpoints.
+// The layout does not own a scroll region: the document scrolls, and the rail sticks to the top of the
+// viewport (see `sidenav`). A single, isolated `overflow: auto` content region has no keyboard access when
+// its content holds no focusable element, so axe reports `scrollable-region-focusable`. Every other page
+// layout of the repo scrolls the document as well.
+export const container = style([
+    sprinkles({
+        display: 'flex',
+    }),
+    {
+        width: '100%',
+        minWidth: 0,
+        gap: 0,
+        boxSizing: 'border-box',
+
+        '@media': {
+            [mq.tabletOrSmaller]: {
+                flexDirection: 'column',
+            },
+        },
+    },
+]);
+
+// The rail sticks to the top of the viewport and keeps the height of the viewport, so it stays in place
+// while the document scrolls the content beside it. `alignSelf: flex-start` stops the flex row from
+// stretching the rail to the height of a tall content column, which would leave the sticky rail with no
+// room to travel. On tablet or smaller the rail is a top bar that stacks above the content, so it flows
+// with the document instead.
+export const sidenav = style([
+    sprinkles({
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'stretch',
+    }),
+    {
+        flexShrink: 0,
+        width: 'auto',
+        position: 'sticky',
+        top: topOffset,
+        alignSelf: 'flex-start',
+        height: `calc(100vh - ${topOffset})`,
+        margin: 0,
+        padding: 0,
+        // Firefox keeps a cached layer for a sticky column and does not always invalidate its right edge
+        // when a child changes: toggling the boxed border leaves the 1px edge half painted until the next
+        // repaint. A dedicated compositor layer makes Firefox repaint the column as one unit and removes the
+        // artifact. The only fixed descendant (the collapsed panel) renders through a Portal, so this
+        // layer does not change its containing block.
+        willChange: 'transform',
+
+        '@media': {
+            [mq.tabletOrSmaller]: {
+                position: 'static',
+                width: '100%',
+                height: 'auto',
+                alignSelf: 'auto',
+            },
+        },
+    },
+]);
+
+export const content = style([
+    sprinkles({
+        flex: 1,
+        minWidth: 0,
+    }),
+    {
+        margin: 0,
+        padding: 0,
+    },
+]);
+
+export const centeredResponsiveLayout = style({
+    display: 'flex',
+    flexDirection: 'column',
+});