@12-apps/ui 6.34.0 → 6.36.0

package/dist/chunk-SVSOUC5S.js

@@ -1,149 +0,0 @@
-import {
-  SettingsStatusMarker
-} from "./chunk-QXTO3G2T.js";
-import {
-  TOUCH_TARGET
-} from "./chunk-LIG7TKIB.js";
-
-// src/components/layout/SettingsLayout/SettingsSectionChips.tsx
-import Box from "@mui/material/Box/index.js";
-import { alpha, useTheme } from "@mui/material/styles/index.js";
-import { useEffect, useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var CHIP_HEIGHT = 34;
-function prefersReducedMotion() {
-  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
-  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-}
-function useCentreActiveChip(stripRef, activeItemId, itemsKey) {
-  useEffect(() => {
-    const strip = stripRef.current;
-    if (!strip || !activeItemId) return;
-    const chip = Array.from(strip.children).find(
-      (node) => node instanceof HTMLElement && node.dataset.chipId === activeItemId
-    );
-    if (!chip) return;
-    if (typeof strip.scrollTo !== "function") return;
-    const target = chip.offsetLeft + chip.offsetWidth / 2 - strip.clientWidth / 2;
-    const left = Math.max(0, Math.min(target, strip.scrollWidth - strip.clientWidth));
-    strip.scrollTo({ left, behavior: prefersReducedMotion() ? "auto" : "smooth" });
-  }, [stripRef, activeItemId, itemsKey]);
-}
-function SectionChip({
-  item,
-  active,
-  theme,
-  linkComponent,
-  onSelectItem,
-  testIdPrefix
-}) {
-  const asLink = item.href !== void 0 && linkComponent !== void 0;
-  const behaviour = asLink ? { component: linkComponent, href: item.href } : { component: "button", type: "button", onClick: () => onSelectItem?.(item.id) };
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      ...behaviour,
-      "data-chip-id": item.id,
-      "data-testid": `${testIdPrefix}-chip-${item.id}`,
-      "aria-current": active ? "page" : void 0,
-      sx: {
-        display: "inline-flex",
-        alignItems: "center",
-        gap: 0.75,
-        flex: "0 0 auto",
-        position: "relative",
-        // The chip LOOKS this tall; it is still tapped at `TOUCH_TARGET`.
-        //
-        // Shrinking `minHeight` alone would have bought a slimmer strip with a
-        // smaller hit area — on the one width where the strip IS the navigation
-        // and the input is a thumb. The `::after` below keeps the tappable
-        // region at the full target while the pill itself takes less room, so
-        // this is a visual change and not an accessibility trade.
-        minHeight: CHIP_HEIGHT,
-        px: 1.5,
-        borderRadius: 999,
-        cursor: "pointer",
-        font: "inherit",
-        fontSize: "0.8125rem",
-        fontWeight: active ? 700 : 500,
-        textDecoration: "none",
-        whiteSpace: "nowrap",
-        color: active ? "primary.main" : "text.secondary",
-        bgcolor: active ? alpha(theme.palette.primary.main, 0.12) : "transparent",
-        border: `1px solid ${active ? alpha(theme.palette.primary.main, 0.4) : theme.palette.divider}`,
-        // Spans the chip's width only, so neighbours never overlap: the strip
-        // is a row, and the extra reach is vertical.
-        "&::after": {
-          content: '""',
-          position: "absolute",
-          insetInlineStart: 0,
-          insetInlineEnd: 0,
-          top: "50%",
-          transform: "translateY(-50%)",
-          height: TOUCH_TARGET
-        }
-      },
-      children: [
-        item.status ? /* @__PURE__ */ jsx(
-          SettingsStatusMarker,
-          {
-            status: item.status,
-            label: item.statusLabel,
-            testId: `${testIdPrefix}-chip-status-${item.id}`
-          }
-        ) : null,
-        item.label
-      ]
-    }
-  );
-}
-function SettingsSectionChips({
-  items,
-  activeItemId,
-  ariaLabel,
-  linkComponent,
-  onSelectItem,
-  testIdPrefix
-}) {
-  const theme = useTheme();
-  const stripRef = useRef(null);
-  useCentreActiveChip(stripRef, activeItemId, items.map((item) => item.id).join("\0"));
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      ref: stripRef,
-      component: "nav",
-      "aria-label": ariaLabel,
-      "data-testid": `${testIdPrefix}-chips`,
-      sx: {
-        display: "flex",
-        alignItems: "center",
-        gap: 0.75,
-        px: 0.25,
-        py: 0.25,
-        overflowX: "auto",
-        overflowY: "hidden",
-        scrollbarWidth: "none",
-        "&::-webkit-scrollbar": { display: "none" }
-      },
-      children: items.map((item) => /* @__PURE__ */ jsx(
-        SectionChip,
-        {
-          item,
-          active: item.id === activeItemId,
-          theme,
-          linkComponent,
-          onSelectItem,
-          testIdPrefix
-        },
-        item.id
-      ))
-    }
-  );
-}
-SettingsSectionChips.displayName = "SettingsSectionChips";
-
-export {
-  SettingsSectionChips
-};
-//# sourceMappingURL=chunk-SVSOUC5S.js.map

package/dist/chunk-SVSOUC5S.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/layout/SettingsLayout/SettingsSectionChips.tsx"],"sourcesContent":["'use client';\n\nimport Box from '@mui/material/Box/index.js';\nimport { alpha, useTheme, type Theme } from '@mui/material/styles/index.js';\nimport React, { useEffect, useRef, type RefObject } from 'react';\n\nimport { SettingsStatusMarker } from './SettingsStatusMarker';\nimport { TOUCH_TARGET } from './SettingsLayout.styles';\n\n/**\n * The chip's drawn height, against `TOUCH_TARGET`'s 44 for the tappable one.\n *\n * The strip sits between a section's header and its first field on the width\n * with the least room for either, so the pill is sized to its text rather than\n * to the thumb — and the thumb is served by the hit area instead.\n */\nconst CHIP_HEIGHT = 34;\nimport type { SettingsLayoutProps, SettingsNavItem } from './SettingsLayout.types';\n\nexport interface SettingsSectionChipsProps {\n  /** The sibling sections to offer — usually the open item's own group. */\n  items: SettingsNavItem[];\n  /** Which one is open. */\n  activeItemId?: string;\n  /** Accessible name of the strip, in the host's language. */\n  ariaLabel: string;\n  linkComponent?: SettingsLayoutProps['linkComponent'];\n  onSelectItem?: (id: string) => void;\n  testIdPrefix: string;\n}\n\n/** True when the visitor asked the OS for less movement. Re-read per scroll. */\nfunction prefersReducedMotion(): boolean {\n  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return false;\n  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n\n/**\n * Keep the open section's chip in view, however the visitor got here.\n *\n * Keyed on `activeItemId` in an effect rather than done in a click handler:\n * arriving by the desktop rail, by a card, by a pasted link and by the browser's\n * back button all have to land the same way, and only one of those is a click on\n * a chip. Every re-render otherwise starts the strip at scroll 0, which parks\n * the active chip off the right edge on any list longer than a screen — the\n * visitor is told where they are by an element they cannot see.\n *\n * `itemsKey` rather than `items`: a host almost always rebuilds that array per\n * render (`groups.flatMap(...)`), and depending on it would re-run this on every\n * render and yank the strip back mid-drag.\n *\n * The key joins on NUL — as the ESCAPE `'\\u0000'`, which it must stay. A\n * literal NUL byte works identically at runtime and makes git classify this file\n * as BINARY: `git diff` prints \"Binary file not shown\" and the GitHub review UI\n * shows nothing at all. This file shipped that way once, and the cost was not\n * the byte — it was a whole change nobody could read.\n */\nfunction useCentreActiveChip(\n  stripRef: RefObject<HTMLDivElement | null>,\n  activeItemId: string | undefined,\n  itemsKey: string,\n): void {\n  useEffect(() => {\n    const strip = stripRef.current;\n    if (!strip || !activeItemId) return;\n    // Walked rather than selected: an id is host data, and a section id carrying\n    // a quote would turn a selector string into a thrown SyntaxError — which\n    // here would take the whole strip down to centre one chip.\n    const chip = Array.from(strip.children).find(\n      (node): node is HTMLElement =>\n        node instanceof HTMLElement && node.dataset.chipId === activeItemId,\n    );\n    if (!chip) return;\n    // Feature-checked, not assumed. `Element.scrollTo` is absent in jsdom and in\n    // a few embedded webviews, and an unguarded call there THROWS out of an\n    // effect — which React escalates to the nearest error boundary. The whole\n    // settings area would go down to centre one chip, and the host's own tests\n    // could not render the shell at all. Same reasoning as walking the children\n    // instead of building a selector: nothing in here is worth a crash.\n    if (typeof strip.scrollTo !== 'function') return;\n    const target = chip.offsetLeft + chip.offsetWidth / 2 - strip.clientWidth / 2;\n    const left = Math.max(0, Math.min(target, strip.scrollWidth - strip.clientWidth));\n    strip.scrollTo({ left, behavior: prefersReducedMotion() ? 'auto' : 'smooth' });\n  }, [stripRef, activeItemId, itemsKey]);\n}\n\n/** One chip: a link when the host gave it a target, else a button. */\nfunction SectionChip({\n  item,\n  active,\n  theme,\n  linkComponent,\n  onSelectItem,\n  testIdPrefix,\n}: {\n  item: SettingsNavItem;\n  active: boolean;\n  theme: Theme;\n  linkComponent?: SettingsLayoutProps['linkComponent'];\n  onSelectItem?: (id: string) => void;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  const asLink = item.href !== undefined && linkComponent !== undefined;\n  const behaviour = asLink\n    ? { component: linkComponent, href: item.href }\n    : { component: 'button' as const, type: 'button' as const, onClick: () => onSelectItem?.(item.id) };\n\n  return (\n    <Box\n      {...behaviour}\n      data-chip-id={item.id}\n      data-testid={`${testIdPrefix}-chip-${item.id}`}\n      aria-current={active ? 'page' : undefined}\n      sx={{\n        display: 'inline-flex',\n        alignItems: 'center',\n        gap: 0.75,\n        flex: '0 0 auto',\n        position: 'relative',\n        // The chip LOOKS this tall; it is still tapped at `TOUCH_TARGET`.\n        //\n        // Shrinking `minHeight` alone would have bought a slimmer strip with a\n        // smaller hit area — on the one width where the strip IS the navigation\n        // and the input is a thumb. The `::after` below keeps the tappable\n        // region at the full target while the pill itself takes less room, so\n        // this is a visual change and not an accessibility trade.\n        minHeight: CHIP_HEIGHT,\n        px: 1.5,\n        borderRadius: 999,\n        cursor: 'pointer',\n        font: 'inherit',\n        fontSize: '0.8125rem',\n        fontWeight: active ? 700 : 500,\n        textDecoration: 'none',\n        whiteSpace: 'nowrap',\n        color: active ? 'primary.main' : 'text.secondary',\n        bgcolor: active ? alpha(theme.palette.primary.main, 0.12) : 'transparent',\n        border: `1px solid ${active ? alpha(theme.palette.primary.main, 0.4) : theme.palette.divider}`,\n        // Spans the chip's width only, so neighbours never overlap: the strip\n        // is a row, and the extra reach is vertical.\n        '&::after': {\n          content: '\"\"',\n          position: 'absolute',\n          insetInlineStart: 0,\n          insetInlineEnd: 0,\n          top: '50%',\n          transform: 'translateY(-50%)',\n          height: TOUCH_TARGET,\n        },\n      }}\n    >\n      {item.status ? (\n        <SettingsStatusMarker\n          status={item.status}\n          label={item.statusLabel}\n          testId={`${testIdPrefix}-chip-status-${item.id}`}\n        />\n      ) : null}\n      {item.label}\n    </Box>\n  );\n}\n\n/**\n * The narrow-width section strip: horizontally scrollable chips for the sections\n * beside the open one.\n *\n * It clips its own overflow — `overflow-x: auto` on the strip, never on an\n * ancestor. A strip that pushes the page wide makes every OTHER screen at that\n * width scroll sideways too, and the cause is nowhere near the symptom.\n */\nexport function SettingsSectionChips({\n  items,\n  activeItemId,\n  ariaLabel,\n  linkComponent,\n  onSelectItem,\n  testIdPrefix,\n}: SettingsSectionChipsProps): React.JSX.Element {\n  const theme = useTheme();\n  const stripRef = useRef<HTMLDivElement | null>(null);\n  useCentreActiveChip(stripRef, activeItemId, items.map((item) => item.id).join('\\u0000'));\n\n  return (\n    <Box\n      ref={stripRef}\n      component=\"nav\"\n      aria-label={ariaLabel}\n      data-testid={`${testIdPrefix}-chips`}\n      sx={{\n        display: 'flex',\n        alignItems: 'center',\n        gap: 0.75,\n        px: 0.25,\n        py: 0.25,\n        overflowX: 'auto',\n        overflowY: 'hidden',\n        scrollbarWidth: 'none',\n        '&::-webkit-scrollbar': { display: 'none' },\n      }}\n    >\n      {items.map((item) => (\n        <SectionChip\n          key={item.id}\n          item={item}\n          active={item.id === activeItemId}\n          theme={theme}\n          linkComponent={linkComponent}\n          onSelectItem={onSelectItem}\n          testIdPrefix={testIdPrefix}\n        />\n      ))}\n    </Box>\n  );\n}\n\nSettingsSectionChips.displayName = 'SettingsSectionChips';\n"],"mappings":"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","names":[]}

package/dist/chunk-SYNMQWT4.js

@@ -1,135 +0,0 @@
-import {
-  useDateTimeParts
-} from "./chunk-ULJ4C6JW.js";
-
-// src/components/data-display/DateTimeDisplay/DateTimeDisplay.tsx
-import Box from "@mui/material/Box/index.js";
-import Tooltip from "@mui/material/Tooltip/index.js";
-import Typography from "@mui/material/Typography/index.js";
-import { forwardRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-function getFontSizes(size) {
-  switch (size) {
-    case "xs":
-    case "sm":
-      return { date: "0.75rem", time: "0.65rem" };
-    case "lg":
-    case "xl":
-      return { date: "1rem", time: "0.875rem" };
-    case "md":
-    default:
-      return { date: "0.875rem", time: "0.75rem" };
-  }
-}
-var Stacked = forwardRef(
-  ({ formattedDate, formattedTime, fontSizes, showTooltip, sx, dataTestId }, ref) => /* @__PURE__ */ jsxs(
-    Box,
-    {
-      component: "span",
-      ref,
-      "data-testid": dataTestId,
-      sx: {
-        display: "inline-flex",
-        flexDirection: "column",
-        lineHeight: 1.3,
-        cursor: showTooltip ? "help" : "default",
-        ...sx
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          Typography,
-          {
-            component: "span",
-            sx: {
-              fontWeight: 500,
-              fontSize: fontSizes.date
-            },
-            "data-testid": dataTestId ? `${dataTestId}-date` : void 0,
-            children: formattedDate
-          }
-        ),
-        formattedTime && /* @__PURE__ */ jsx(
-          Typography,
-          {
-            component: "span",
-            sx: {
-              fontSize: fontSizes.time,
-              color: "text.secondary"
-            },
-            "data-testid": dataTestId ? `${dataTestId}-time` : void 0,
-            children: formattedTime
-          }
-        )
-      ]
-    }
-  )
-);
-Stacked.displayName = "DateTimeDisplayStacked";
-var DateTimeDisplay = forwardRef(
-  ({
-    date,
-    dateFormat = "short",
-    timeFormat = "12h",
-    showTimezone = false,
-    size = "md",
-    showTooltip = true,
-    tooltipContent,
-    sx,
-    dataTestId
-  }, ref) => {
-    const { dateObj, formattedDate, formattedTime, fullDateTime } = useDateTimeParts({
-      date,
-      dateFormat,
-      timeFormat,
-      showTimezone
-    });
-    const fontSizes = getFontSizes(size);
-    if (!dateObj) {
-      return /* @__PURE__ */ jsx(
-        Box,
-        {
-          component: "span",
-          ref,
-          "data-testid": dataTestId,
-          sx: { color: "text.disabled", ...sx },
-          children: /* @__PURE__ */ jsx(Typography, { variant: "caption", children: "-" })
-        }
-      );
-    }
-    const content = /* @__PURE__ */ jsx(
-      Stacked,
-      {
-        ref,
-        formattedDate,
-        formattedTime,
-        fontSizes,
-        showTooltip,
-        sx,
-        dataTestId
-      }
-    );
-    if (!showTooltip) {
-      return content;
-    }
-    return /* @__PURE__ */ jsx(
-      Tooltip,
-      {
-        title: tooltipContent || fullDateTime,
-        arrow: true,
-        placement: "top",
-        slotProps: {
-          tooltip: {
-            sx: { px: 2, py: 1 }
-          }
-        },
-        children: content
-      }
-    );
-  }
-);
-DateTimeDisplay.displayName = "DateTimeDisplay";
-
-export {
-  DateTimeDisplay
-};
-//# sourceMappingURL=chunk-SYNMQWT4.js.map

package/dist/chunk-SYNMQWT4.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/data-display/DateTimeDisplay/DateTimeDisplay.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport Tooltip from '@mui/material/Tooltip/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { forwardRef } from 'react';\n\nimport { useDateTimeParts } from './DateTimeDisplay.hooks';\nimport type { DateTimeDisplayProps } from './DateTimeDisplay.types';\nimport type { SizeValue } from '../../../tokens/scales';\n\n/**\n * Get font sizes based on size prop\n */\nfunction getFontSizes(size: SizeValue) {\n  switch (size) {\n    case 'xs':\n    case 'sm':\n      return { date: '0.75rem', time: '0.65rem' };\n    case 'lg':\n    case 'xl':\n      return { date: '1rem', time: '0.875rem' };\n    case 'md':\n    default:\n      return { date: '0.875rem', time: '0.75rem' };\n  }\n}\n\ninterface StackedProps {\n  formattedDate: string | null;\n  formattedTime: string | null;\n  fontSizes: ReturnType<typeof getFontSizes>;\n  showTooltip: boolean;\n  sx: DateTimeDisplayProps['sx'];\n  dataTestId?: string;\n}\n\nconst Stacked = forwardRef<HTMLSpanElement, StackedProps>(\n  ({ formattedDate, formattedTime, fontSizes, showTooltip, sx, dataTestId }, ref) => (\n    <Box\n      component=\"span\"\n      ref={ref}\n      data-testid={dataTestId}\n      sx={{\n        display: 'inline-flex',\n        flexDirection: 'column',\n        lineHeight: 1.3,\n        cursor: showTooltip ? 'help' : 'default',\n        ...sx,\n      }}\n    >\n      <Typography\n        component=\"span\"\n        sx={{\n          fontWeight: 500,\n          fontSize: fontSizes.date,\n        }}\n        data-testid={dataTestId ? `${dataTestId}-date` : undefined}\n      >\n        {formattedDate}\n      </Typography>\n      {formattedTime && (\n        <Typography\n          component=\"span\"\n          sx={{\n            fontSize: fontSizes.time,\n            color: 'text.secondary',\n          }}\n          data-testid={dataTestId ? `${dataTestId}-time` : undefined}\n        >\n          {formattedTime}\n        </Typography>\n      )}\n    </Box>\n  ),\n);\n\nStacked.displayName = 'DateTimeDisplayStacked';\n\n/**\n * DateTimeDisplay component - displays date and time in a stacked format\n * with date on one line and time on another.\n */\nexport const DateTimeDisplay = forwardRef<HTMLSpanElement, DateTimeDisplayProps>(\n  (\n    {\n      date,\n      dateFormat = 'short',\n      timeFormat = '12h',\n      showTimezone = false,\n      size = 'md',\n      showTooltip = true,\n      tooltipContent,\n      sx,\n      dataTestId,\n    },\n    ref,\n  ) => {\n    const { dateObj, formattedDate, formattedTime, fullDateTime } = useDateTimeParts({\n      date,\n      dateFormat,\n      timeFormat,\n      showTimezone,\n    });\n    const fontSizes = getFontSizes(size);\n\n    // Handle invalid or missing date\n    if (!dateObj) {\n      return (\n        <Box\n          component=\"span\"\n          ref={ref}\n          data-testid={dataTestId}\n          sx={{ color: 'text.disabled', ...sx }}\n        >\n          <Typography variant=\"caption\">-</Typography>\n        </Box>\n      );\n    }\n\n    const content = (\n      <Stacked\n        ref={ref}\n        formattedDate={formattedDate}\n        formattedTime={formattedTime}\n        fontSizes={fontSizes}\n        showTooltip={showTooltip}\n        sx={sx}\n        dataTestId={dataTestId}\n      />\n    );\n\n    if (!showTooltip) {\n      return content;\n    }\n\n    return (\n      <Tooltip\n        title={tooltipContent || fullDateTime}\n        arrow\n        placement=\"top\"\n        slotProps={{\n          tooltip: {\n            sx: { px: 2, py: 1 },\n          },\n        }}\n      >\n        {content}\n      </Tooltip>\n    );\n  },\n);\n\nDateTimeDisplay.displayName = 'DateTimeDisplay';\n"],"mappings":";;;;;AAAA,OAAO,SAAS;AAChB,OAAO,aAAa;AACpB,OAAO,gBAAgB;AACvB,SAAS,kBAAkB;AAkCvB,SAYE,KAZF;AAzBJ,SAAS,aAAa,MAAiB;AACrC,UAAQ,MAAM;AAAA,IACZ,KAAK;AAAA,IACL,KAAK;AACH,aAAO,EAAE,MAAM,WAAW,MAAM,UAAU;AAAA,IAC5C,KAAK;AAAA,IACL,KAAK;AACH,aAAO,EAAE,MAAM,QAAQ,MAAM,WAAW;AAAA,IAC1C,KAAK;AAAA,IACL;AACE,aAAO,EAAE,MAAM,YAAY,MAAM,UAAU;AAAA,EAC/C;AACF;AAWA,IAAM,UAAU;AAAA,EACd,CAAC,EAAE,eAAe,eAAe,WAAW,aAAa,IAAI,WAAW,GAAG,QACzE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV;AAAA,MACA,eAAa;AAAA,MACb,IAAI;AAAA,QACF,SAAS;AAAA,QACT,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,QAAQ,cAAc,SAAS;AAAA,QAC/B,GAAG;AAAA,MACL;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,IAAI;AAAA,cACF,YAAY;AAAA,cACZ,UAAU,UAAU;AAAA,YACtB;AAAA,YACA,eAAa,aAAa,GAAG,UAAU,UAAU;AAAA,YAEhD;AAAA;AAAA,QACH;AAAA,QACC,iBACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,IAAI;AAAA,cACF,UAAU,UAAU;AAAA,cACpB,OAAO;AAAA,YACT;AAAA,YACA,eAAa,aAAa,GAAG,UAAU,UAAU;AAAA,YAEhD;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,QAAQ,cAAc;AAMf,IAAM,kBAAkB;AAAA,EAC7B,CACE;AAAA,IACE;AAAA,IACA,aAAa;AAAA,IACb,aAAa;AAAA,IACb,eAAe;AAAA,IACf,OAAO;AAAA,IACP,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,EACF,GACA,QACG;AACH,UAAM,EAAE,SAAS,eAAe,eAAe,aAAa,IAAI,iBAAiB;AAAA,MAC/E;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AACD,UAAM,YAAY,aAAa,IAAI;AAGnC,QAAI,CAAC,SAAS;AACZ,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV;AAAA,UACA,eAAa;AAAA,UACb,IAAI,EAAE,OAAO,iBAAiB,GAAG,GAAG;AAAA,UAEpC,8BAAC,cAAW,SAAQ,WAAU,eAAC;AAAA;AAAA,MACjC;AAAA,IAEJ;AAEA,UAAM,UACJ;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAGF,QAAI,CAAC,aAAa;AAChB,aAAO;AAAA,IACT;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,kBAAkB;AAAA,QACzB,OAAK;AAAA,QACL,WAAU;AAAA,QACV,WAAW;AAAA,UACT,SAAS;AAAA,YACP,IAAI,EAAE,IAAI,GAAG,IAAI,EAAE;AAAA,UACrB;AAAA,QACF;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,gBAAgB,cAAc;","names":[]}

package/dist/chunk-SZB2Z6QN.js

@@ -1,273 +0,0 @@
-import {
-  fieldRadiusPx
-} from "./chunk-GDN2LUTZ.js";
-
-// src/components/layout/ContentToolbar/ContentToolbar.tsx
-import Box from "@mui/material/Box/index.js";
-import Button from "@mui/material/Button/index.js";
-import Checkbox from "@mui/material/Checkbox/index.js";
-import Divider from "@mui/material/Divider/index.js";
-import Typography from "@mui/material/Typography/index.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var selectionButtonSx = {
-  minWidth: 0,
-  height: "auto",
-  borderRadius: fieldRadiusPx,
-  fontWeight: 600,
-  py: 0.5,
-  px: 1.5,
-  fontSize: "0.75rem",
-  textTransform: "none",
-  color: "text.primary"
-};
-function SelectionCluster({
-  hasSelection,
-  selectedCount,
-  selectAll,
-  clearSelection,
-  actions,
-  selectionExtra,
-  selectAllTestId,
-  clearAllTestId,
-  edgeAlign = false,
-  selectAllLabel,
-  selectAllText,
-  clearAllText
-}) {
-  const actionsSlot = actions !== void 0 && /* @__PURE__ */ jsx(Box, { sx: { ml: 0.5, display: "flex", flexShrink: 0, alignItems: "center" }, children: actions });
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      sx: {
-        display: "flex",
-        minWidth: 0,
-        // Browsing (mobile): don't grow, so the controls sit on the SAME line as
-        // the checkbox (no orphaned selection row). Desktop: grow to push
-        // controls right.
-        //
-        // SELECTING (mobile) it must be able to shrink instead. Its children are
-        // all `flex-shrink: 0`, so a cluster pinned at content width cannot wrap
-        // and the row painted past the toolbar's own edge — on Produtos at 390px
-        // that took "Ações" off-screen behind a sideways scroll, which is the
-        // one control the selection exists to reach.
-        flex: { xs: hasSelection ? "1 1 auto" : "0 0 auto", md: 1 },
-        alignItems: "center",
-        // Wrapping is the phone's answer, and only the phone's: below `md` the
-        // cluster carries the count, the scope control and "Ações" at once, and
-        // no combination of those fits 320px on one line. From `md` up it stays
-        // a single line, where it always fitted.
-        flexWrap: { xs: "wrap", md: "nowrap" },
-        columnGap: 1.5,
-        rowGap: 1,
-        ml: edgeAlign ? -1.5 : 0
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "text",
-            size: "small",
-            color: "inherit",
-            onClick: selectAll,
-            "data-testid": selectAllTestId,
-            sx: { ...selectionButtonSx, display: { xs: "none", md: "inline-flex" } },
-            children: selectAllText
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Checkbox,
-          {
-            size: "small",
-            checked: hasSelection,
-            onChange: (event) => event.target.checked ? selectAll() : clearSelection(),
-            "data-testid": `${selectAllTestId}-checkbox`,
-            inputProps: { "aria-label": selectAllLabel },
-            sx: { p: 0.5, display: { xs: "inline-flex", md: "none" } }
-          }
-        ),
-        hasSelection ? /* @__PURE__ */ jsx(
-          SelectionState,
-          {
-            selectedCount,
-            clearSelection,
-            clearAllTestId,
-            clearAllText,
-            selectionExtra
-          }
-        ) : null,
-        actionsSlot
-      ]
-    }
-  );
-}
-function SelectionState({
-  selectedCount,
-  clearSelection,
-  clearAllTestId,
-  clearAllText,
-  selectionExtra
-}) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "text",
-        size: "small",
-        color: "inherit",
-        onClick: clearSelection,
-        "data-testid": clearAllTestId,
-        sx: selectionButtonSx,
-        children: clearAllText
-      }
-    ),
-    /* @__PURE__ */ jsx(Divider, { orientation: "vertical", flexItem: true, sx: { height: 16, alignSelf: "center" } }),
-    /* @__PURE__ */ jsxs(
-      Typography,
-      {
-        component: "span",
-        "data-testid": "selected-count-indicator",
-        sx: { fontSize: "0.875rem", color: "text.secondary", whiteSpace: "nowrap", flexShrink: 0 },
-        children: [
-          selectedCount,
-          " ",
-          selectedCount === 1 ? "item" : "items",
-          " selected"
-        ]
-      }
-    ),
-    selectionExtra !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        Box,
-        {
-          "aria-hidden": true,
-          sx: { flexBasis: "100%", height: 0, display: { xs: "block", md: "none" } }
-        }
-      ),
-      selectionExtra
-    ] })
-  ] });
-}
-function BrowsingClusters({
-  leadingControls,
-  rightControls,
-  hasSelection,
-  edgeAlign
-}) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    leadingControls !== void 0 && /* @__PURE__ */ jsx(
-      Box,
-      {
-        sx: {
-          display: "flex",
-          alignItems: "center",
-          flexGrow: 1,
-          minWidth: 0,
-          // The collapse ladder has a FLOOR — below roughly 400px even the
-          // fully-collapsed row does not fit, and its controls cannot shrink
-          // (they are flexShrink:0 so an over-packed row sheds instead of
-          // squeezing). Past that point this scrolls rather than letting them
-          // paint outside the toolbar, which is what a narrow phone did.
-          overflowX: "auto",
-          // No scrollbar gutter stealing height on the common case.
-          scrollbarWidth: "thin"
-        },
-        children: leadingControls
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Box,
-      {
-        sx: {
-          display: "flex",
-          alignItems: "center",
-          // Same single-line rule as the row itself: this cluster wrapping
-          // INTERNALLY buys a second line just as surely as the row wrapping
-          // does. It bit at exactly 900px, the `md` breakpoint where the "N de
-          // N" counter appears and pushes Exibir/Exportar over the edge.
-          flexWrap: leadingControls === void 0 ? "wrap" : "nowrap",
-          // Tight (5px) when browsing so the controls fit one line beside the
-          // checkbox; roomier (14px) in selection mode where they get their own row.
-          gap: hasSelection ? "14px" : "5px",
-          ml: "auto",
-          mr: edgeAlign ? -1.5 : 0,
-          "& > *": { flexShrink: 0 }
-        },
-        children: rightControls
-      }
-    )
-  ] });
-}
-function ContentToolbar({
-  hasSelection,
-  selectedCount,
-  selectAll,
-  clearSelection,
-  rightControls,
-  leadingControls,
-  actions,
-  selectionExtra,
-  selectAllTestId,
-  clearAllTestId,
-  edgeAlign = false,
-  exclusiveSelection = false,
-  selectAllLabel,
-  selectAllText,
-  clearAllText
-}) {
-  const showSelection = !exclusiveSelection || hasSelection;
-  const showControls = !exclusiveSelection || !hasSelection;
-  return (
-    // Two clusters on one line. They may wrap onto separate rows ONLY for a
-    // toolbar without `leadingControls` — one carrying search + filters is
-    // driven by a measured collapse ladder (see `useFilterOverflow`), and a
-    // wrap there is the ladder having failed: it would silently buy a second
-    // row instead of shedding a control into "Mais", which is the one outcome
-    // the ladder exists to prevent.
-    /* @__PURE__ */ jsxs(
-      Box,
-      {
-        sx: {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          gap: 2,
-          flexWrap: leadingControls === void 0 ? "wrap" : "nowrap",
-          rowGap: 1
-        },
-        children: [
-          showSelection && /* @__PURE__ */ jsx(
-            SelectionCluster,
-            {
-              selectAllText,
-              clearAllText,
-              hasSelection,
-              selectedCount,
-              selectAll,
-              clearSelection,
-              actions,
-              selectionExtra,
-              selectAllTestId,
-              clearAllTestId,
-              selectAllLabel,
-              edgeAlign
-            }
-          ),
-          showControls && /* @__PURE__ */ jsx(
-            BrowsingClusters,
-            {
-              leadingControls,
-              rightControls,
-              hasSelection,
-              edgeAlign
-            }
-          )
-        ]
-      }
-    )
-  );
-}
-
-export {
-  ContentToolbar
-};
-//# sourceMappingURL=chunk-SZB2Z6QN.js.map

package/dist/chunk-SZB2Z6QN.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/layout/ContentToolbar/ContentToolbar.tsx"],"sourcesContent":["'use client';\n\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport Checkbox from '@mui/material/Checkbox/index.js';\nimport Divider from '@mui/material/Divider/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport React from 'react';\n\nimport type { ContentToolbarProps } from './ContentToolbar.types';\nimport { fieldRadiusPx } from '../../../tokens/field-radius';\n\nconst selectionButtonSx = {\n  minWidth: 0,\n  height: 'auto',\n  borderRadius: fieldRadiusPx,\n  fontWeight: 600,\n  py: 0.5,\n  px: 1.5,\n  fontSize: '0.75rem',\n  textTransform: 'none',\n  color: 'text.primary',\n} as const;\n\ntype SelectionClusterProps = Pick<\n  ContentToolbarProps,\n  | 'hasSelection'\n  | 'selectedCount'\n  | 'selectAll'\n  | 'clearSelection'\n  | 'actions'\n  | 'selectionExtra'\n  | 'selectAllTestId'\n  | 'clearAllTestId'\n  | 'edgeAlign'\n  | 'selectAllLabel'\n  | 'selectAllText'\n  | 'clearAllText'\n>;\n\n/** The left cluster: Select All + (when selecting) Clear All / count / actions. */\nfunction SelectionCluster({\n  hasSelection,\n  selectedCount,\n  selectAll,\n  clearSelection,\n  actions,\n  selectionExtra,\n  selectAllTestId,\n  clearAllTestId,\n  edgeAlign = false,\n  selectAllLabel,\n  selectAllText,\n  clearAllText,\n}: SelectionClusterProps): React.JSX.Element {\n  const actionsSlot = actions !== undefined && (\n    <Box sx={{ ml: 0.5, display: 'flex', flexShrink: 0, alignItems: 'center' }}>{actions}</Box>\n  );\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        minWidth: 0,\n        // Browsing (mobile): don't grow, so the controls sit on the SAME line as\n        // the checkbox (no orphaned selection row). Desktop: grow to push\n        // controls right.\n        //\n        // SELECTING (mobile) it must be able to shrink instead. Its children are\n        // all `flex-shrink: 0`, so a cluster pinned at content width cannot wrap\n        // and the row painted past the toolbar's own edge — on Produtos at 390px\n        // that took \"Ações\" off-screen behind a sideways scroll, which is the\n        // one control the selection exists to reach.\n        flex: { xs: hasSelection ? '1 1 auto' : '0 0 auto', md: 1 },\n        alignItems: 'center',\n        // Wrapping is the phone's answer, and only the phone's: below `md` the\n        // cluster carries the count, the scope control and \"Ações\" at once, and\n        // no combination of those fits 320px on one line. From `md` up it stays\n        // a single line, where it always fitted.\n        flexWrap: { xs: 'wrap', md: 'nowrap' },\n        columnGap: 1.5,\n        rowGap: 1,\n        ml: edgeAlign ? -1.5 : 0,\n      }}\n    >\n      {/* Desktop: a \"Select All\" text button (md+). Mobile: a compact checkbox\n          that toggles select-all/clear — the text would eat the tight row. */}\n      <Button\n        variant=\"text\"\n        size=\"small\"\n        color=\"inherit\"\n        onClick={selectAll}\n        data-testid={selectAllTestId}\n        sx={{ ...selectionButtonSx, display: { xs: 'none', md: 'inline-flex' } }}\n      >\n        {selectAllText}\n      </Button>\n      <Checkbox\n        size=\"small\"\n        checked={hasSelection}\n        onChange={(event) => (event.target.checked ? selectAll() : clearSelection())}\n        data-testid={`${selectAllTestId}-checkbox`}\n        inputProps={{ 'aria-label': selectAllLabel }}\n        sx={{ p: 0.5, display: { xs: 'inline-flex', md: 'none' } }}\n      />\n      {hasSelection ? (\n        <SelectionState\n          selectedCount={selectedCount}\n          clearSelection={clearSelection}\n          clearAllTestId={clearAllTestId}\n          clearAllText={clearAllText}\n          selectionExtra={selectionExtra}\n        />\n      ) : null}\n      {actionsSlot}\n    </Box>\n  );\n}\n\n/**\n * What the cluster shows once something IS ticked: Clear All, the count, and\n * the host's own `selectionExtra`.\n *\n * Its own component only because the cluster around it is at the complexity\n * gate's line ceiling — but the split falls where the meaning does. Everything\n * here exists only while a selection does, and the `actions` slot deliberately\n * stays OUTSIDE it: a toolbar may carry actions while browsing too.\n */\nfunction SelectionState({\n  selectedCount,\n  clearSelection,\n  clearAllTestId,\n  clearAllText,\n  selectionExtra,\n}: Pick<\n  ContentToolbarProps,\n  'selectedCount' | 'clearSelection' | 'clearAllTestId' | 'clearAllText' | 'selectionExtra'\n>): React.JSX.Element {\n  return (\n    <>\n      <Button\n        variant=\"text\"\n        size=\"small\"\n        color=\"inherit\"\n        onClick={clearSelection}\n        data-testid={clearAllTestId}\n        sx={selectionButtonSx}\n      >\n        {clearAllText}\n      </Button>\n      <Divider orientation=\"vertical\" flexItem sx={{ height: 16, alignSelf: 'center' }} />\n      <Typography\n        component=\"span\"\n        data-testid=\"selected-count-indicator\"\n        sx={{ fontSize: '0.875rem', color: 'text.secondary', whiteSpace: 'nowrap', flexShrink: 0 }}\n      >\n        {selectedCount} {selectedCount === 1 ? 'item' : 'items'} selected\n      </Typography>\n      {selectionExtra !== undefined && (\n        <>\n          {/* A DELIBERATE break, not a wrap that happened to land here. What\n              follows — \"Seleção: 48 produtos — todas as páginas\", its \"Limpar\n              seleção\", and \"Ações\" — is a sentence about the selection plus the\n              control that acts on it, and letting the phone break it wherever it\n              ran out of room split that sentence mid-phrase. Zero height so it\n              costs nothing but the row gap, and `display:none` from `md` up,\n              where the line still fits. */}\n          <Box\n            aria-hidden\n            sx={{ flexBasis: '100%', height: 0, display: { xs: 'block', md: 'none' } }}\n          />\n          {selectionExtra}\n        </>\n      )}\n    </>\n  );\n}\n\n/**\n * The BROWSING half of the toolbar: search + filters on the left, the page's\n * own controls on the right. Split out of {@link ContentToolbar} so that\n * function stays inside the complexity gate — it is layout only, and the\n * decision of whether to show it at all is made by the caller.\n */\nfunction BrowsingClusters({\n  leadingControls,\n  rightControls,\n  hasSelection,\n  edgeAlign,\n}: {\n  leadingControls?: React.ReactNode;\n  rightControls: React.ReactNode;\n  hasSelection: boolean;\n  edgeAlign: boolean;\n}): React.JSX.Element {\n  return (\n    <>\n      {/* minWidth:0 lets this cluster be the one that gives up width as the row\n       * tightens, which is what the filter overflow measures against. */}\n      {leadingControls !== undefined && (\n        <Box\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            flexGrow: 1,\n            minWidth: 0,\n            // The collapse ladder has a FLOOR — below roughly 400px even the\n            // fully-collapsed row does not fit, and its controls cannot shrink\n            // (they are flexShrink:0 so an over-packed row sheds instead of\n            // squeezing). Past that point this scrolls rather than letting them\n            // paint outside the toolbar, which is what a narrow phone did.\n            overflowX: 'auto',\n            // No scrollbar gutter stealing height on the common case.\n            scrollbarWidth: 'thin',\n          }}\n        >\n          {leadingControls}\n        </Box>\n      )}\n      {/* ml:auto keeps the controls right-aligned even when the cluster wraps to\n       * its own row (where justify-content:space-between would otherwise snap a\n       * lone item to the left); it's a no-op on a shared row. */}\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          // Same single-line rule as the row itself: this cluster wrapping\n          // INTERNALLY buys a second line just as surely as the row wrapping\n          // does. It bit at exactly 900px, the `md` breakpoint where the \"N de\n          // N\" counter appears and pushes Exibir/Exportar over the edge.\n          flexWrap: leadingControls === undefined ? 'wrap' : 'nowrap',\n          // Tight (5px) when browsing so the controls fit one line beside the\n          // checkbox; roomier (14px) in selection mode where they get their own row.\n          gap: hasSelection ? '14px' : '5px',\n          ml: 'auto',\n          mr: edgeAlign ? -1.5 : 0,\n          '& > *': { flexShrink: 0 },\n        }}\n      >\n        {rightControls}\n      </Box>\n    </>\n  );\n}\n\n/**\n * Shared toolbar for content pages (Favorites, Personal Space, Recents, …). The\n * left cluster owns selection chrome — **Select All**, and once items are\n * selected, **Clear All** + an \"N items selected\" count + an optional `actions`\n * slot. The right cluster is a free `rightControls` slot for page-specific\n * controls (ViewSelector, SortByDropdown, MultiSelectDropdown, FilterTrigger).\n *\n * Faithful, generic MUI port of the reference `ContentPageToolbar` — the\n * domain-specific default actions are intentionally left to the consumer via\n * the `actions` slot so this stays agnostic and reusable across projects.\n *\n * @example\n * ```tsx\n * <ContentToolbar\n *   hasSelection={selected.size > 0}\n *   selectedCount={selected.size}\n *   selectAll={selectAll}\n *   clearSelection={clear}\n *   rightControls={\n *     <>\n *       <ViewSelector viewMode={view} onViewModeChange={setView} zoom={zoom} onZoomChange={setZoom} />\n *       <SortByDropdown fields={FIELDS} activeField={field} onFieldChange={setField} />\n *       <MultiSelectDropdown label=\"Content Type\" options={types} selected={typeSet} onToggle={toggle} onClear={clear} />\n *       <FilterTrigger open={panelOpen} onOpenChange={setPanelOpen} hasActiveFilters={hasFilters} />\n *     </>\n *   }\n * />\n * ```\n */\nexport function ContentToolbar({\n  hasSelection,\n  selectedCount,\n  selectAll,\n  clearSelection,\n  rightControls,\n  leadingControls,\n  actions,\n  selectionExtra,\n  selectAllTestId,\n  clearAllTestId,\n  edgeAlign = false,\n  exclusiveSelection = false,\n  selectAllLabel,\n  selectAllText,\n  clearAllText,\n}: ContentToolbarProps): React.JSX.Element {\n  // Under `exclusiveSelection` the two states are alternatives, not neighbours:\n  // browsing shows the controls and no checkbox, selecting shows the checkbox\n  // and no controls. Anything else double-books the row.\n  const showSelection = !exclusiveSelection || hasSelection;\n  const showControls = !exclusiveSelection || !hasSelection;\n  return (\n    // Two clusters on one line. They may wrap onto separate rows ONLY for a\n    // toolbar without `leadingControls` — one carrying search + filters is\n    // driven by a measured collapse ladder (see `useFilterOverflow`), and a\n    // wrap there is the ladder having failed: it would silently buy a second\n    // row instead of shedding a control into \"Mais\", which is the one outcome\n    // the ladder exists to prevent.\n    <Box\n      sx={{\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'space-between',\n        gap: 2,\n        flexWrap: leadingControls === undefined ? 'wrap' : 'nowrap',\n        rowGap: 1,\n      }}\n    >\n      {showSelection && (\n        <SelectionCluster\n          selectAllText={selectAllText}\n          clearAllText={clearAllText}\n          hasSelection={hasSelection}\n          selectedCount={selectedCount}\n          selectAll={selectAll}\n          clearSelection={clearSelection}\n          actions={actions}\n          selectionExtra={selectionExtra}\n          selectAllTestId={selectAllTestId}\n          clearAllTestId={clearAllTestId}\n          selectAllLabel={selectAllLabel}\n          edgeAlign={edgeAlign}\n        />\n      )}\n\n      {showControls && (\n        <BrowsingClusters\n          leadingControls={leadingControls}\n          rightControls={rightControls}\n          hasSelection={hasSelection}\n          edgeAlign={edgeAlign}\n        />\n      )}\n    </Box>\n  );\n}\n"],"mappings":"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","names":[]}