@12-apps/ui 5.0.1 → 5.2.0

package/src/components/layout/SettingsLayout/SettingsLayout.styles.ts

@@ -0,0 +1,64 @@
+import type { CSSObject, Theme } from '@mui/material';
+
+import type { SettingsNavStatus, SettingsRailBreakpoint } from './SettingsLayout.types';
+
+/** Fixed width of the left navigation rail once it has its own column. */
+export const RAIL_WIDTH = 300;
+
+/** Visually hidden, still read aloud — for text a marker's colour cannot carry. */
+export const SR_ONLY_SX: CSSObject = {
+  position: 'absolute',
+  width: '1px',
+  height: '1px',
+  padding: 0,
+  margin: '-1px',
+  overflow: 'hidden',
+  clip: 'rect(0, 0, 0, 0)',
+  whiteSpace: 'nowrap',
+  border: 0,
+};
+
+/**
+ * The media query for "the rail has its own column".
+ *
+ * `theme.breakpoints.up` takes a NUMBER as happily as a name, which is why
+ * `railBreakpoint` accepts one: a settings area whose structural switch is at
+ * 1024px has no MUI breakpoint to name (the default `lg` is 1200), and rounding
+ * the design to the nearest named breakpoint moves 176px of behaviour to keep a
+ * string tidy.
+ */
+export function atLeastRail(theme: Theme, breakpoint: SettingsRailBreakpoint): string {
+  return theme.breakpoints.up(breakpoint);
+}
+
+/**
+ * A `display` pair across that query: `narrow` below it, `wide` at and above.
+ *
+ * Everything that changes shape between the two navigation modes goes through
+ * this, so "which width am I?" is answered once, in CSS, for every part at
+ * once — rather than by each part asking a media query in JavaScript and
+ * answering slightly differently.
+ */
+export function displayAcrossRail(
+  theme: Theme,
+  breakpoint: SettingsRailBreakpoint,
+  narrow: string,
+  wide: string,
+): CSSObject {
+  return { display: narrow, [atLeastRail(theme, breakpoint)]: { display: wide } };
+}
+
+/** Minimum touch target, in px. Held down to 320px-wide phones, deliberately. */
+export const TOUCH_TARGET = 44;
+
+/**
+ * Palette role per situation.
+ *
+ * Returned as theme keys rather than hex so a marker follows the host's theme —
+ * and so light and dark do not need two copies of this table.
+ */
+export const STATUS_COLOR: Record<Exclude<SettingsNavStatus, 'locked'>, string> = {
+  ok: 'success.main',
+  off: 'text.disabled',
+  new: 'error.main',
+};

package/src/components/layout/SettingsLayout/SettingsLayout.tsx

@@ -1,46 +1,123 @@
 'use client';
 
-import { Box } from '@mui/material';
+import { Box, type Theme } from '@mui/material';
 import React, { useMemo, useState } from 'react';
 
-import { activeItemLabel, filterGroups, SettingsRail } from './SettingsLayout.parts';
+import { withDefaults } from '../../../utils/withDefaults';
+import { activeItemLabel, filterGroups } from './SettingsLayout.filters';
+import { SettingsRail } from './SettingsLayout.rail';
+import { atLeastRail } from './SettingsLayout.styles';
+import { SettingsPanel } from './SettingsPanel';
 import type { SettingsLayoutProps } from './SettingsLayout.types';
 
+/**
+ * The props with every default already applied.
+ *
+ * A table through `withDefaults` rather than a `= default` per destructured
+ * prop: each of those is a branch, and seven of them put the component over the
+ * complexity bar before it renders anything. The single cast is what buys the
+ * body non-optional values — without it every use site would restate the
+ * default as a `??`, which is the same default written twice and free to drift.
+ */
+type ResolvedProps = SettingsLayoutProps &
+  Required<
+    Pick<
+      SettingsLayoutProps,
+      | 'searchPlaceholder'
+      | 'defaultQuery'
+      | 'emptySearchLabel'
+      | 'testIdPrefix'
+      | 'railBreakpoint'
+      | 'navVariant'
+      | 'atIndex'
+      | 'backLabel'
+    >
+  >;
+
+const DEFAULTS = {
+  searchPlaceholder: 'Search settings',
+  defaultQuery: '',
+  emptySearchLabel: 'No settings match your search.',
+  testIdPrefix: 'settings',
+  railBreakpoint: 'md',
+  navVariant: 'switcher',
+  atIndex: false,
+  backLabel: 'Back',
+} satisfies Partial<SettingsLayoutProps>;
+
+/** Stacked below the rail's breakpoint, two columns at and above it. */
+function shellSx(breakpoint: SettingsLayoutProps['railBreakpoint']) {
+  return (theme: Theme) => ({
+    display: 'flex',
+    flexDirection: 'column' as const,
+    alignItems: 'stretch',
+    gap: 1.5,
+    width: '100%',
+    minWidth: 0,
+    [atLeastRail(theme, breakpoint ?? 'md')]: { flexDirection: 'row', gap: 3 },
+  });
+}
+
 /**
  * A reusable, agnostic Facebook-style settings shell: a searchable left rail of
  * grouped categories/subcategories and a central panel that renders the selected
  * configuration screen (`children`). Navigation is data-driven via `groups`; the
  * host owns routing (pass `linkComponent` + item `href`, or handle `onSelectItem`).
  *
- * Below `md` the rail collapses into a compact section-switcher (tap to reveal the
- * search + groups) so the panel content stays at the top on phones.
+ * ## Two narrow-width shapes
+ *
+ * `navVariant="switcher"` (the default) folds the rail into a disclosure above
+ * the panel. `navVariant="drilldown"` gives the phone shape instead: at the
+ * area's index the LIST is the page, and inside a section the panel is the page
+ * with a back link and a scrollable strip of sibling sections above it.
+ *
+ * ## Why the width decision is CSS and not JavaScript
+ *
+ * Every part that changes between the two shapes does it through a `display`
+ * pair keyed on `railBreakpoint`. Nothing here asks a media query in JS and
+ * renders one branch.
+ *
+ * That is not a performance preference. A layout that RENDERS one navigation and
+ * not the other can offer the narrow width less than the wide one, and no test
+ * or review catches it — the missing control simply is not in the tree to be
+ * asserted about. With both forms always mounted, "the narrow width reaches
+ * everything the wide one does" holds by construction, and an audit that counts
+ * controls per width gets the same answer at both.
  */
-export const SettingsLayout: React.FC<SettingsLayoutProps> = ({
-  title,
-  groups,
-  activeItemId,
-  onSelectItem,
-  searchPlaceholder = 'Search settings',
-  emptySearchLabel = 'No settings match your search.',
-  linkComponent,
-  children,
-  testIdPrefix = 'settings',
-}) => {
-  const [query, setQuery] = useState('');
+export const SettingsLayout: React.FC<SettingsLayoutProps> = (props) => {
+  const {
+    title,
+    groups,
+    activeItemId,
+    onSelectItem,
+    searchPlaceholder,
+    defaultQuery,
+    emptySearchLabel,
+    emptySearchAction,
+    linkComponent,
+    children,
+    testIdPrefix,
+    railBreakpoint,
+    navVariant,
+    atIndex,
+    indexHref,
+    backLabel,
+    sectionChips,
+  } = withDefaults(props, DEFAULTS) as ResolvedProps;
+  const [query, setQuery] = useState(defaultQuery);
   const [navOpen, setNavOpen] = useState(false);
   const filteredGroups = useMemo(() => filterGroups(groups, query), [groups, query]);
   const activeLabel = useMemo(() => activeItemLabel(groups, activeItemId), [groups, activeItemId]);
 
+  const drilldown = navVariant === 'drilldown';
+  const ariaLabel = typeof title === 'string' ? title : 'Settings';
+
   return (
     <Box
       data-testid={testIdPrefix}
-      sx={{
-        display: 'flex',
-        flexDirection: { xs: 'column', md: 'row' },
-        alignItems: 'stretch',
-        gap: { xs: 1.5, md: 3 },
-        width: '100%',
-      }}
+      data-nav-variant={navVariant}
+      data-at-index={atIndex ? 'true' : 'false'}
+      sx={shellSx(railBreakpoint)}
     >
       <SettingsRail
         title={title}
@@ -51,17 +128,33 @@ export const SettingsLayout: React.FC<SettingsLayoutProps> = ({
         onQueryChange={setQuery}
         searchPlaceholder={searchPlaceholder}
         emptySearchLabel={emptySearchLabel}
+        emptySearchAction={emptySearchAction}
         filteredGroups={filteredGroups}
         activeItemId={activeItemId}
         linkComponent={linkComponent}
         onSelectItem={onSelectItem}
         onNavigate={() => setNavOpen(false)}
         testIdPrefix={testIdPrefix}
+        variant={navVariant}
+        breakpoint={railBreakpoint}
+        atIndex={atIndex}
       />
 
-      <Box data-testid={`${testIdPrefix}-panel`} sx={{ flex: '1 1 auto', minWidth: 0, width: '100%' }}>
+      <SettingsPanel
+        inSection={drilldown && !atIndex}
+        hideOnNarrow={drilldown && atIndex}
+        breakpoint={railBreakpoint}
+        indexHref={indexHref}
+        backLabel={backLabel}
+        ariaLabel={ariaLabel}
+        sectionChips={sectionChips}
+        activeItemId={activeItemId}
+        linkComponent={linkComponent}
+        onSelectItem={onSelectItem}
+        testIdPrefix={testIdPrefix}
+      >
         {children}
-      </Box>
+      </SettingsPanel>
     </Box>
   );
 };

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

@@ -1,5 +1,21 @@
 import type { ElementType, ReactNode } from 'react';
 
+/**
+ * How an entry is doing, as a marker beside its label.
+ *
+ * The host RESOLVES this — the rail never derives it from the screen behind the
+ * row. A settings shell cannot know whether "Endereço" counts as configured, and
+ * a rail that guesses disagrees with the screen the moment the rule moves.
+ *
+ * - `ok` — set up and working.
+ * - `off` — exists, switched off.
+ * - `new` — never opened.
+ * - `locked` — the plan does not include it, so it has no configuration state at
+ *   all. Rendered as a padlock rather than a coloured dot for exactly that
+ *   reason: a locked row is not "off", and colouring it grey would say it is.
+ */
+export type SettingsNavStatus = 'ok' | 'off' | 'new' | 'locked';
+
 /**
  * A single navigable configuration entry inside a {@link SettingsNavGroup}. The
  * `id` drives the active highlight and `data-testid`; `label` (plus optional
@@ -16,6 +32,23 @@ export interface SettingsNavItem {
   href?: string;
   /** Extra search terms so an item is findable beyond its visible label. */
   keywords?: string[];
+  /** Host-resolved situation marker. Omit to render no marker at all. */
+  status?: SettingsNavStatus;
+  /**
+   * What the marker MEANS, in the host's language — "Ligado", "Não visitado",
+   * "Incluído no plano Pro". Rendered as text only a screen reader reaches, so
+   * colour is never the sole carrier of the meaning. Required alongside
+   * `status`: a marker nobody can name is decoration.
+   */
+  statusLabel?: string;
+  /**
+   * Render the entry as inert text rather than a control.
+   *
+   * For a row that is listed but not reachable from here. It is deliberately not
+   * a disabled button: disabled says "you cannot", and the honest statement is
+   * "not from this screen".
+   */
+  inert?: boolean;
 }
 
 /** A labelled category grouping related items in the left rail. */
@@ -30,6 +63,43 @@ export interface SettingsNavGroup {
   items: SettingsNavItem[];
 }
 
+/**
+ * Which width the rail appears at — and, in `drilldown`, where the whole shell
+ * changes shape. Below it the list is the page and a chip strip carries the
+ * sibling sections; at and above it the rail takes the left column.
+ *
+ * A raw pixel number is as valid as a breakpoint name, because a settings area's
+ * structural switch is a design decision and not always one of five named
+ * widths — 1024px, the tablet-landscape switch, is nowhere in MUI's defaults
+ * (`lg` is 1200), and rounding to the nearest name would move 176px of
+ * behaviour to keep a string tidy.
+ */
+export type SettingsRailBreakpoint = 'sm' | 'md' | 'lg' | 'xl' | number;
+
+/**
+ * How navigation behaves BELOW {@link SettingsLayoutProps.railBreakpoint}.
+ *
+ * - `switcher` (default) — the rail folds into a collapsed disclosure stacked
+ *   above the panel. Backwards-compatible, and right for a shell whose panel is
+ *   always the point.
+ * - `drilldown` — list first, then screen, with a way back. At the area's index
+ *   the LIST is the page; inside a section the panel is the page and a scrollable
+ *   chip strip carries its siblings. This is what every mobile settings app
+ *   does, and what fits at 375px, where a 300px rail would leave 75px of content.
+ */
+export type SettingsNavVariant = 'switcher' | 'drilldown';
+
+/** The exit offered inside the empty-search state, so the dead end has a door. */
+export interface SettingsEmptySearchAction {
+  /** Button label, e.g. `"Limpar a busca"`. */
+  label: ReactNode;
+  /**
+   * Extra work to do on top of clearing the field. The layout always clears its
+   * own query; a host that mirrors the term elsewhere clears that here.
+   */
+  onClear?: () => void;
+}
+
 /**
  * Props for {@link SettingsLayout} — an agnostic, data-driven two-pane settings
  * shell (search + grouped left rail, central panel). It renders navigation from
@@ -46,8 +116,25 @@ export interface SettingsLayoutProps {
   onSelectItem?: (id: string) => void;
   /** Placeholder for the search field. Defaults to `"Search settings"`. */
   searchPlaceholder?: string;
+  /**
+   * The term the search field opens with. Uncontrolled — the layout owns the
+   * field from there, and typing (or the empty state's exit) changes it.
+   *
+   * For a host that deep-links into its own settings search (`?q=…`), and for a
+   * story or a test that needs to OPEN in a filtered — or empty — state rather
+   * than type its way there. A screen named for a state it cannot be opened in
+   * is a screen nobody looks at in that state.
+   */
+  defaultQuery?: string;
   /** Shown when the search matches no items. Defaults to a generic string. */
   emptySearchLabel?: ReactNode;
+  /**
+   * A way OUT of the empty-search state, rendered inside it.
+   *
+   * Without one the search that matches nothing is a screen with no next step —
+   * the operator's only move is to guess which characters to delete.
+   */
+  emptySearchAction?: SettingsEmptySearchAction;
   /**
    * Element type used to render an item that has an `href` (e.g. a Next.js
    * `Link`). Rendered as the `ListItemButton` `component`, so navigation stays a
@@ -58,4 +145,30 @@ export interface SettingsLayoutProps {
   children: ReactNode;
   /** Prefix for `data-testid` attributes. Defaults to `"settings"`. */
   testIdPrefix?: string;
+  /** Width at which the rail takes its own column. Defaults to `"md"`. */
+  railBreakpoint?: SettingsRailBreakpoint;
+  /** Narrow-width navigation shape. Defaults to `"switcher"`. */
+  navVariant?: SettingsNavVariant;
+  /**
+   * True when the router is at the area's index rather than inside a section.
+   *
+   * `drilldown` only. It decides which of the two — the list or the panel — is
+   * the page below the breakpoint. Both are always in the DOM; only `display`
+   * moves, so the two widths cannot drift apart in what they offer.
+   */
+  atIndex?: boolean;
+  /** Where "back" goes in `drilldown`: the area's index. */
+  indexHref?: string;
+  /** Label on the back control. Defaults to `"Back"`. */
+  backLabel?: string;
+  /**
+   * The sibling sections carried by the narrow-width chip strip — usually the
+   * open item's own group.
+   *
+   * The strip lives in the DOM at EVERY width and is hidden by CSS above the
+   * breakpoint, alongside the rail that replaces it. That is the whole point:
+   * navigation chosen by a JS media query is navigation that can exist at one
+   * width and not the other, and nothing catches it.
+   */
+  sectionChips?: SettingsNavItem[];
 }

package/src/components/layout/SettingsLayout/SettingsPanel.tsx

@@ -0,0 +1,140 @@
+'use client';
+
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import { Box } from '@mui/material';
+import React from 'react';
+
+import { displayAcrossRail, TOUCH_TARGET } from './SettingsLayout.styles';
+import { SettingsSectionChips } from './SettingsSectionChips';
+import type {
+  SettingsLayoutProps,
+  SettingsNavItem,
+  SettingsRailBreakpoint,
+} from './SettingsLayout.types';
+
+export interface SettingsPanelProps {
+  /** True in `drilldown`, inside a section rather than at the index. */
+  inSection: boolean;
+  /** True in `drilldown`, at the area's index. */
+  hideOnNarrow: boolean;
+  breakpoint: SettingsRailBreakpoint;
+  indexHref?: string;
+  backLabel: string;
+  ariaLabel: string;
+  sectionChips?: SettingsNavItem[];
+  activeItemId?: string;
+  linkComponent?: SettingsLayoutProps['linkComponent'];
+  onSelectItem?: (id: string) => void;
+  testIdPrefix: string;
+  children: React.ReactNode;
+}
+
+/** The way back to the area's index — narrow widths only. */
+function BackLink({
+  href,
+  label,
+  breakpoint,
+  linkComponent,
+  testIdPrefix,
+}: {
+  href: string;
+  label: string;
+  breakpoint: SettingsRailBreakpoint;
+  linkComponent: NonNullable<SettingsLayoutProps['linkComponent']>;
+  testIdPrefix: string;
+}): React.JSX.Element {
+  return (
+    <Box
+      component={linkComponent}
+      href={href}
+      aria-label={label}
+      data-testid={`${testIdPrefix}-back`}
+      sx={(theme) => ({
+        ...displayAcrossRail(theme, breakpoint, 'inline-flex', 'none'),
+        alignItems: 'center',
+        gap: 0.5,
+        minHeight: TOUCH_TARGET,
+        pr: 1,
+        textDecoration: 'none',
+        color: 'text.secondary',
+        font: 'inherit',
+        fontSize: '0.875rem',
+      })}
+    >
+      <ChevronLeftIcon fontSize="small" />
+      {label}
+    </Box>
+  );
+}
+
+/**
+ * The central column: the open screen, and — in `drilldown`, inside a section —
+ * the back link and sibling-section strip above it.
+ *
+ * At the index in `drilldown` this whole column is `display: none` below the
+ * breakpoint and the rail becomes the page. Mounted either way: the panel and
+ * the list are one tree with `display` between them, not two branches of a
+ * render.
+ */
+export function SettingsPanel({
+  inSection,
+  hideOnNarrow,
+  breakpoint,
+  indexHref,
+  backLabel,
+  ariaLabel,
+  sectionChips,
+  activeItemId,
+  linkComponent,
+  onSelectItem,
+  testIdPrefix,
+  children,
+}: SettingsPanelProps): React.JSX.Element {
+  const showBack = inSection && indexHref !== undefined && linkComponent !== undefined;
+  const showChips = inSection && sectionChips !== undefined && sectionChips.length > 0;
+
+  return (
+    <Box
+      data-testid={`${testIdPrefix}-panel`}
+      sx={(theme) => ({
+        ...(hideOnNarrow
+          ? displayAcrossRail(theme, breakpoint, 'none', 'block')
+          : { display: 'block' }),
+        flex: '1 1 auto',
+        minWidth: 0,
+        width: '100%',
+      })}
+    >
+      {showBack ? (
+        <BackLink
+          href={indexHref}
+          label={backLabel}
+          breakpoint={breakpoint}
+          linkComponent={linkComponent}
+          testIdPrefix={testIdPrefix}
+        />
+      ) : null}
+
+      {showChips ? (
+        <Box
+          sx={(theme) => ({
+            ...displayAcrossRail(theme, breakpoint, 'block', 'none'),
+            mb: 1,
+            minWidth: 0,
+          })}
+        >
+          <SettingsSectionChips
+            items={sectionChips}
+            activeItemId={activeItemId}
+            ariaLabel={ariaLabel}
+            linkComponent={linkComponent}
+            onSelectItem={onSelectItem}
+            testIdPrefix={testIdPrefix}
+          />
+        </Box>
+      ) : null}
+
+      {children}
+    </Box>
+  );
+}

package/src/components/layout/SettingsLayout/SettingsStatusMarker.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
+import { Box } from '@mui/material';
+import React from 'react';
+
+import { SR_ONLY_SX, STATUS_COLOR } from './SettingsLayout.styles';
+import type { SettingsNavStatus } from './SettingsLayout.types';
+
+export interface SettingsStatusMarkerProps {
+  /** Which situation to draw. */
+  status: SettingsNavStatus;
+  /** What it means, in the host's language — the only carrier a screen reader gets. */
+  label?: string;
+  /** `data-testid` for the marker element. */
+  testId?: string;
+}
+
+/**
+ * The situation marker beside a settings entry: a coloured dot, or a padlock
+ * when the plan does not include the section.
+ *
+ * The label is rendered as visually-hidden text INSIDE the marker rather than as
+ * an `aria-label` on it, so it lands in the accessible name of the row that
+ * contains it. A row reading "Endereço, ligado" is one utterance; a decorative
+ * dot with a title attribute beside it is two, and the second one is skipped.
+ *
+ * Colour alone never says which of the three states this is — that is the whole
+ * reason `label` exists, and why a marker without one is a marker with no
+ * meaning attached.
+ */
+export function SettingsStatusMarker({
+  status,
+  label,
+  testId,
+}: SettingsStatusMarkerProps): React.JSX.Element {
+  const hidden = label ? <Box component="span" sx={SR_ONLY_SX}>{label}</Box> : null;
+
+  if (status === 'locked') {
+    return (
+      <Box
+        component="span"
+        data-testid={testId}
+        data-status={status}
+        sx={{ display: 'inline-flex', alignItems: 'center', color: 'text.disabled' }}
+      >
+        <LockOutlinedIcon sx={{ fontSize: 16 }} />
+        {hidden}
+      </Box>
+    );
+  }
+
+  return (
+    <Box
+      component="span"
+      data-testid={testId}
+      data-status={status}
+      sx={{ display: 'inline-flex', alignItems: 'center' }}
+    >
+      <Box
+        component="span"
+        sx={{
+          width: 8,
+          height: 8,
+          borderRadius: '50%',
+          flex: '0 0 auto',
+          bgcolor: STATUS_COLOR[status],
+        }}
+      />
+      {hidden}
+    </Box>
+  );
+}
+
+SettingsStatusMarker.displayName = 'SettingsStatusMarker';

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

@@ -1,6 +1,14 @@
 export { SettingsLayout } from './SettingsLayout';
+export { SettingsSectionChips } from './SettingsSectionChips';
+export type { SettingsSectionChipsProps } from './SettingsSectionChips';
+export { SettingsStatusMarker } from './SettingsStatusMarker';
+export type { SettingsStatusMarkerProps } from './SettingsStatusMarker';
 export type {
+  SettingsEmptySearchAction,
   SettingsLayoutProps,
   SettingsNavGroup,
   SettingsNavItem,
+  SettingsNavStatus,
+  SettingsNavVariant,
+  SettingsRailBreakpoint,
 } from './SettingsLayout.types';

package/dist/types/components/layout/SettingsLayout/SettingsLayout.parts.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SettingsLayout.parts.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/SettingsLayout/SettingsLayout.parts.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,gBAAgB,EAAmB,MAAM,wBAAwB,CAAC;AAKrG,gFAAgF;AAChF,wBAAgB,YAAY,CAAC,MAAM,EAAE,gBAAgB,EAAE,EAAE,KAAK,EAAE,MAAM,GAAG,gBAAgB,EAAE,CAS1F;AAED,6EAA6E;AAC7E,wBAAgB,eAAe,CAC7B,MAAM,EAAE,gBAAgB,EAAE,EAC1B,YAAY,CAAC,EAAE,MAAM,GACpB,MAAM,GAAG,SAAS,CAEpB;AAgMD,UAAU,aAAa;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,gBAAgB,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,cAAc,EAAE,gBAAgB,EAAE,CAAC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;IACrD,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;CACtB;AAgED,qFAAqF;AACrF,MAAM,MAAM,iBAAiB,GAAG,aAAa,GAAG;IAC9C,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,gFAAgF;AAChF,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,WAAW,EACX,OAAO,EACP,WAAW,EACX,YAAY,EACZ,GAAG,SAAS,EACb,EAAE,iBAAiB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAiCvC"}