@12-apps/ui 5.0.0 → 5.1.0

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

@@ -1,46 +1,120 @@
 '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'
+      | 'emptySearchLabel'
+      | 'testIdPrefix'
+      | 'railBreakpoint'
+      | 'navVariant'
+      | 'atIndex'
+      | 'backLabel'
+    >
+  >;
+
+const DEFAULTS = {
+  searchPlaceholder: 'Search settings',
+  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',
-}) => {
+export const SettingsLayout: React.FC<SettingsLayoutProps> = (props) => {
+  const {
+    title,
+    groups,
+    activeItemId,
+    onSelectItem,
+    searchPlaceholder,
+    emptySearchLabel,
+    emptySearchAction,
+    linkComponent,
+    children,
+    testIdPrefix,
+    railBreakpoint,
+    navVariant,
+    atIndex,
+    indexHref,
+    backLabel,
+    sectionChips,
+  } = withDefaults(props, DEFAULTS) as ResolvedProps;
   const [query, setQuery] = useState('');
   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 +125,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
@@ -48,6 +118,13 @@ export interface SettingsLayoutProps {
   searchPlaceholder?: 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 +135,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/src/components/navigation/AppHeader/AppHeader.brand.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Box, useTheme } from '@mui/material';
-import type { Theme } from '@mui/material/styles';
+import type { Theme } from '@mui/material';
 import React from 'react';
 
 import type { SizeValue } from '../../../tokens/scales';

package/src/components/navigation/AppHeader/AppHeader.colors.ts

@@ -1,4 +1,4 @@
-import { decomposeColor } from '@mui/material/styles';
+import { decomposeColor } from '@mui/material';
 
 /**
  * Turning ONE brand colour into the mark's fill.

package/src/components/navigation/AppHeader/AppHeader.types.ts

@@ -1,4 +1,4 @@
-import type { Breakpoint } from '@mui/material/styles';
+import type { Breakpoint } from '@mui/material';
 import type { ReactNode } from 'react';
 
 import type { ColorValue, SizeValue } from '../../../tokens/scales';

package/src/components/navigation/Breadcrumbs/BreadcrumbEntry.tsx

@@ -1,7 +1,7 @@
 import Home from '@mui/icons-material/Home';
 import MoreHoriz from '@mui/icons-material/MoreHoriz';
 import { alpha, Box, Fade, Link, Tooltip, Typography } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/material';
 import React from 'react';
 
 import { breadcrumbLinkStyles } from './Breadcrumbs.styles';

package/src/components/navigation/Breadcrumbs/Breadcrumbs.styles.tsx

@@ -1,5 +1,5 @@
 import { alpha, keyframes } from '@mui/material';
-import type { CSSObject, Theme } from '@mui/material/styles';
+import type { CSSObject, Theme } from '@mui/material';
 
 export const slideIn = keyframes`
   from {

package/src/components/navigation/Breadcrumbs/Breadcrumbs.tsx

@@ -6,7 +6,7 @@ import {
   Breadcrumbs as MuiBreadcrumbs,
   useMediaQuery,
   useTheme } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/material';
 import React from 'react';
 
 import {

package/src/components/navigation/CommandPalette/CommandPaletteResults.tsx

@@ -1,6 +1,6 @@
 import RecentIcon from '@mui/icons-material/History';
 import { Box, Divider, List, ListItem, ListItemIcon, ListItemText, Typography } from '@mui/material';
-import { alpha, styled } from '@mui/material/styles';
+import { alpha, styled } from '@mui/material';
 import React from 'react';
 
 import { ShortcutChip } from './ShortcutChip';

package/src/components/navigation/ContextMenu/ContextMenu.tsx

@@ -8,7 +8,7 @@ import {
   Typography,
 } from '@mui/material';
 import type { CSSObject, Theme } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/material';
 import React, { cloneElement, isValidElement,useState } from 'react';
 
 import type { ContextMenuItem,ContextMenuProps } from './ContextMenu.types';

package/src/components/navigation/DropdownMenu/DropdownMenu.tsx

@@ -10,8 +10,8 @@ import {
   MenuItem,
   Typography,
 } from '@mui/material';
-import { styled } from '@mui/material/styles';
-import type { CSSObject, Theme } from '@mui/material/styles';
+import { styled } from '@mui/material';
+import type { CSSObject, Theme } from '@mui/material';
 import React, { cloneElement, isValidElement,useRef, useState } from 'react';
 
 import type { DropdownMenuItem,DropdownMenuProps } from './DropdownMenu.types';

package/src/components/navigation/NavigationMenu/NavigationMenu.shell.tsx

@@ -1,5 +1,5 @@
 import { Box, List, ListItemButton } from '@mui/material';
-import { alpha, keyframes, styled } from '@mui/material/styles';
+import { alpha, keyframes, styled } from '@mui/material';
 import type { CSSProperties, PropsWithChildren, ReactNode } from 'react';
 import React from 'react';
 

package/src/components/navigation/NavigationMenu/NavigationMenu.styles.ts

@@ -1,5 +1,5 @@
 import { alpha, keyframes } from '@mui/material';
-import type { CSSObject, Theme } from '@mui/material/styles';
+import type { CSSObject, Theme } from '@mui/material';
 
 export const slideIn = keyframes`
   from {

package/src/components/navigation/NavigationMenu/NavigationMenuItem.tsx

@@ -11,7 +11,7 @@ import {
   Grow,
   ListItemText,
   Popover } from '@mui/material';
-import { alpha, styled } from '@mui/material/styles';
+import { alpha, styled } from '@mui/material';
 import React, {  } from 'react';
 
 import { useMenuItemState } from './NavigationMenuItem.hooks';

package/src/components/navigation/Pagination/Pagination.styles.ts

@@ -1,5 +1,5 @@
 import { alpha } from '@mui/material';
-import type { CSSObject, Theme } from '@mui/material/styles';
+import type { CSSObject, Theme } from '@mui/material';
 
 const ITEM_SIZE_STYLES: Record<string, (theme: Theme) => CSSObject> = {
   sm: (theme) => ({

package/src/components/navigation/Pagination/Pagination.tsx

@@ -7,7 +7,7 @@ import {
   Box,
   Pagination as MuiPagination,
   PaginationItem } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/material';
 import React from 'react';
 
 import type { ResolvedPaginationProps } from './Pagination.helpers';