@12-apps/ui 6.35.0 → 6.37.0

package/dist/chunk-CQLPDY2J.js

@@ -0,0 +1,30 @@
+import {
+  GridShell
+} from "./chunk-QEG3P5D4.js";
+import {
+  useDataViewsState
+} from "./chunk-IKLOIONQ.js";
+
+// src/components/data-display/DataViews/DataViewsGrid.tsx
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+function useVisibleRowsNotifier(matched, onVisibleRowsChange) {
+  const visibleSignature = JSON.stringify(matched);
+  const lastSignature = useRef(null);
+  useEffect(() => {
+    if (lastSignature.current === visibleSignature) return;
+    lastSignature.current = visibleSignature;
+    onVisibleRowsChange?.(matched);
+  }, [visibleSignature, matched, onVisibleRowsChange]);
+}
+function DataViewsGrid(props) {
+  const { rangeFields = [], testIdPrefix = "table" } = props;
+  const controller = useDataViewsState({ ...props, rangeFields, testIdPrefix });
+  useVisibleRowsNotifier(controller.matched, props.onVisibleRowsChange);
+  return /* @__PURE__ */ jsx(GridShell, { ...props, c: controller, rangeFields, testIdPrefix });
+}
+
+export {
+  DataViewsGrid
+};
+//# sourceMappingURL=chunk-CQLPDY2J.js.map

package/dist/chunk-CQPFSEJB.js

@@ -0,0 +1,83 @@
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  Button
+} from "./chunk-2EAAWOZ2.js";
+import {
+  Text
+} from "./chunk-WTOYEWW6.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/DataViews/data-views-empty.tsx
+import FilterAltOffRoundedIcon from "@mui/icons-material/FilterAltOffRounded";
+import InboxRoundedIcon from "@mui/icons-material/InboxRounded";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function DataViewsEmpty({
+  filtered,
+  onClearFilters,
+  emptyState,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  const Icon = filtered ? FilterAltOffRoundedIcon : InboxRoundedIcon;
+  return /* @__PURE__ */ jsxs(
+    default2,
+    {
+      "data-testid": `${testIdPrefix}-empty${filtered ? "-filtered" : ""}`,
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        textAlign: "center",
+        py: 8,
+        px: 2
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          default2,
+          {
+            sx: {
+              display: "inline-flex",
+              p: 2,
+              mb: 1.5,
+              borderRadius: "50%",
+              bgcolor: "action.hover",
+              color: "text.disabled"
+            },
+            children: /* @__PURE__ */ jsx(Icon, {})
+          }
+        ),
+        filtered ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Text, { variant: "body", as: "p", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { fontWeight: 600 }, children: copy.grid.emptyFilteredTitle }) }),
+          /* @__PURE__ */ jsx(Text, { variant: "caption", as: "p", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { display: "block", mt: 0.5, mb: 2, color: "text.secondary", maxWidth: sxRem(380) }, children: copy.grid.emptyFilteredHint }) }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              color: "secondary",
+              onClick: onClearFilters,
+              dataTestId: `${testIdPrefix}-empty-clear`,
+              children: copy.grid.emptyFilteredAction
+            }
+          )
+        ] }) : (
+          // The page's own words for "nothing here yet" — it knows what the
+          // entity is and how one comes to exist; this component does not.
+          emptyState
+        )
+      ]
+    }
+  );
+}
+
+export {
+  DataViewsEmpty
+};
+//# sourceMappingURL=chunk-CQPFSEJB.js.map

package/dist/chunk-CQPFSEJB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-empty.tsx"],"sourcesContent":["\"use client\";\n\nimport FilterAltOffRoundedIcon from \"@mui/icons-material/FilterAltOffRounded\";\nimport InboxRoundedIcon from \"@mui/icons-material/InboxRounded\";\n\nimport { Button } from \"../../form/Button\";\nimport { Box } from \"../../../mui/Box\";\nimport { sxRem } from \"../../../tokens/relative\";\nimport { Text } from \"../../typography/Text\";\n\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\n\n/**\n * TWO EMPTY STATES, NOT ONE.\n *\n * \"Nenhum pagamento registrado\" under an active filter is a lie, and it is the\n * expensive kind: the operator reads it as \"this store has no payments\" and\n * goes looking for the bug somewhere else. The page's own empty copy answers\n * \"there is nothing here yet\"; it cannot answer \"nothing matches what you\n * typed\", because it does not know what was typed.\n *\n * So the grid renders the FILTERED variant itself — it is the only party that\n * knows a filter is applied — and defers to the host's `emptyState` only when\n * the list is genuinely empty. The filtered one carries the way out, which is\n * the whole point: the fix is one click, and it is right there.\n */\nexport function DataViewsEmpty({\n  filtered,\n  onClearFilters,\n  emptyState,\n  testIdPrefix,\n}: {\n  /** Is anything narrowing the list right now (search, pills or ranges)? */\n  filtered: boolean;\n  onClearFilters: () => void;\n  /** The page's own copy for a genuinely empty list. */\n  emptyState?: React.ReactNode;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  const Icon = filtered ? FilterAltOffRoundedIcon : InboxRoundedIcon;\n  return (\n    <Box\n      data-testid={`${testIdPrefix}-empty${filtered ? \"-filtered\" : \"\"}`}\n      sx={{\n        display: \"flex\",\n        flexDirection: \"column\",\n        alignItems: \"center\",\n        textAlign: \"center\",\n        py: 8,\n        px: 2,\n      }}\n    >\n      <Box\n        sx={{\n          display: \"inline-flex\",\n          p: 2,\n          mb: 1.5,\n          borderRadius: \"50%\",\n          bgcolor: \"action.hover\",\n          color: \"text.disabled\",\n        }}\n      >\n        <Icon />\n      </Box>\n      {filtered ? (\n        <>\n          <Text variant=\"body\" as=\"p\">\n            <Box component=\"span\" sx={{ fontWeight: 600 }}>\n              {copy.grid.emptyFilteredTitle}\n            </Box>\n          </Text>\n          <Text variant=\"caption\" as=\"p\">\n            <Box component=\"span\" sx={{ display: \"block\", mt: 0.5, mb: 2, color: \"text.secondary\", maxWidth: sxRem(380) }}>\n              {copy.grid.emptyFilteredHint}\n            </Box>\n          </Text>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            color=\"secondary\"\n            onClick={onClearFilters}\n            dataTestId={`${testIdPrefix}-empty-clear`}\n          >\n            {copy.grid.emptyFilteredAction}\n          </Button>\n        </>\n      ) : (\n        // The page's own words for \"nothing here yet\" — it knows what the\n        // entity is and how one comes to exist; this component does not.\n        emptyState\n      )}\n    </Box>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAEA,OAAO,6BAA6B;AACpC,OAAO,sBAAsB;AA4DrB,SAGA,UAHA,KAGA,YAHA;AArCD,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAOsB;AACpB,QAAM,OAAO,iBAAiB;AAC9B,QAAM,OAAO,WAAW,0BAA0B;AAClD,SACE;AAAA,IAACA;AAAA,IAAA;AAAA,MACC,eAAa,GAAG,YAAY,SAAS,WAAW,cAAc,EAAE;AAAA,MAChE,IAAI;AAAA,QACF,SAAS;AAAA,QACT,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,WAAW;AAAA,QACX,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MAEA;AAAA;AAAA,UAACA;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,cACF,SAAS;AAAA,cACT,GAAG;AAAA,cACH,IAAI;AAAA,cACJ,cAAc;AAAA,cACd,SAAS;AAAA,cACT,OAAO;AAAA,YACT;AAAA,YAEA,8BAAC,QAAK;AAAA;AAAA,QACR;AAAA,QACC,WACC,iCACE;AAAA,8BAAC,QAAK,SAAQ,QAAO,IAAG,KACtB,8BAACA,UAAA,EAAI,WAAU,QAAO,IAAI,EAAE,YAAY,IAAI,GACzC,eAAK,KAAK,oBACb,GACF;AAAA,UACA,oBAAC,QAAK,SAAQ,WAAU,IAAG,KACzB,8BAACA,UAAA,EAAI,WAAU,QAAO,IAAI,EAAE,SAAS,SAAS,IAAI,KAAK,IAAI,GAAG,OAAO,kBAAkB,UAAU,MAAM,GAAG,EAAE,GACzG,eAAK,KAAK,mBACb,GACF;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,OAAM;AAAA,cACN,SAAS;AAAA,cACT,YAAY,GAAG,YAAY;AAAA,cAE1B,eAAK,KAAK;AAAA;AAAA,UACb;AAAA,WACF;AAAA;AAAA;AAAA,UAIA;AAAA;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":["default"]}

package/dist/chunk-CS3KOKL3.js

@@ -0,0 +1,82 @@
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  MultiSelectDropdown
+} from "./chunk-NPP44TQG.js";
+import {
+  CategorySelect
+} from "./chunk-34BZXJGT.js";
+
+// src/components/data-display/DataViews/data-views-category-pill.tsx
+import { jsx } from "react/jsx-runtime";
+function emitPillDiff(fieldId, before, after, onTogglePill) {
+  const had = new Set(before);
+  const wants = new Set(after);
+  after.forEach((value) => {
+    if (!had.has(value)) onTogglePill(fieldId, value, true);
+  });
+  before.forEach((value) => {
+    if (!wants.has(value)) onTogglePill(fieldId, value, false);
+  });
+}
+var toCategoryOption = (option) => ({
+  id: option.value,
+  name: option.label,
+  parentId: option.parentId ?? null
+});
+function PillControl({
+  fieldId,
+  pill,
+  selected,
+  onTogglePill,
+  onClearField,
+  onOpenChange,
+  testIdPrefix,
+  layout = "pill"
+}) {
+  const copy = useDataViewsCopy();
+  const testId = `${testIdPrefix}-filter-${fieldId}`;
+  if (pill.control === "category") {
+    return /* @__PURE__ */ jsx(
+      CategorySelect,
+      {
+        copy: copy.categorySelect,
+        placeholder: pill.label,
+        label: layout === "stacked" ? pill.label : void 0,
+        fullWidth: layout === "stacked",
+        options: pill.options.map(toCategoryOption),
+        allowParentSelection: pill.allowParentSelection ?? false,
+        value: selected,
+        onChange: (next) => emitPillDiff(fieldId, selected, next, onTogglePill),
+        dataTestId: testId
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    MultiSelectDropdown,
+    {
+      extraOptionsHeading: copy.filters.optionsHeading,
+      clearText: copy.filters.clear,
+      clearLabel: copy.filters.clearRange(pill.label),
+      label: pill.label,
+      options: pill.options,
+      selected: new Set(selected),
+      onToggle: (value, checked) => onTogglePill(fieldId, value, checked),
+      onClear: () => onClearField(fieldId),
+      allLabel: copy.filters.allOption,
+      searchable: pill.searchEnabled ? true : void 0,
+      searchPlaceholder: copy.filters.optionSearchPlaceholder,
+      noResultsLabel: copy.filters.optionsEmpty,
+      layout,
+      onOpenChange,
+      "data-testid": testId
+    }
+  );
+}
+
+export {
+  emitPillDiff,
+  PillControl
+};
+//# sourceMappingURL=chunk-CS3KOKL3.js.map

package/dist/chunk-CSN3F36H.js

@@ -0,0 +1,166 @@
+import {
+  HoverCardContent
+} from "./chunk-NRIV2CQ2.js";
+import {
+  arrowSx,
+  cardSx,
+  getAnchorOrigin,
+  getTransformOrigin,
+  sideOf
+} from "./chunk-BSYPPO2I.js";
+import {
+  useHoverCard
+} from "./chunk-SXYIXCUB.js";
+import {
+  withDefaults
+} from "./chunk-HPK33ACY.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/HoverCard/HoverCard.tsx
+import Box from "@mui/material/Box/index.js";
+import Card from "@mui/material/Card/index.js";
+import CardContent from "@mui/material/CardContent/index.js";
+import Popover from "@mui/material/Popover/index.js";
+import { styled } from "@mui/material/styles/index.js";
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ArrowContainer = styled("div")(
+  ({ theme, placement }) => ({ ...arrowSx(theme, placement) })
+);
+var StyledCard = styled(Card, {
+  shouldForwardProp: (prop) => !["customVariant", "glow", "pulse", "animation"].includes(prop)
+})(({ theme, ...flags }) => ({ ...cardSx(theme, flags) }));
+var StyledPopover = styled(Popover, {
+  shouldForwardProp: (prop) => prop !== "customAnimation"
+})(({ customAnimation }) => ({
+  // The popover only positions; StyledCard draws the surface.
+  "& .MuiPopover-paper": {
+    backgroundColor: "transparent",
+    boxShadow: "none",
+    overflow: "visible",
+    ...customAnimation === "scale" && { transformOrigin: "center" }
+  }
+}));
+var DEFAULTS = {
+  variant: "default",
+  glow: false,
+  pulse: false,
+  placement: "bottom",
+  showArrow: false,
+  animation: "fade",
+  enterDelay: 700,
+  exitDelay: 0,
+  loading: false,
+  touchEnabled: true,
+  disabled: false
+};
+var CONTENT_PADDING = { detailed: 3, minimal: 1.5 };
+var offsetMargin = (theme, placement, offset) => {
+  const side = sideOf(placement);
+  const key = { top: "mt", bottom: "mb", left: "ml", right: "mr" }[side];
+  return { [key]: rem(theme, offset ?? 8) };
+};
+var capOf = (theme, maxWidth) => {
+  const cap = maxWidth ?? 400;
+  return cap <= 1 && cap !== 0 ? `${cap * 100}%` : rem(theme, cap);
+};
+var HoverCard = React.forwardRef((props, ref) => {
+  const {
+    variant,
+    glow,
+    pulse,
+    title,
+    description,
+    avatar,
+    trigger,
+    placement,
+    showArrow,
+    animation,
+    enterDelay,
+    exitDelay,
+    maxWidth,
+    loading,
+    loadingComponent,
+    loadingText,
+    touchEnabled,
+    offset,
+    disabled,
+    onOpen,
+    onClose,
+    children,
+    dataTestId,
+    ...rest
+  } = withDefaults(props, DEFAULTS);
+  const { anchorEl, isOpen, handleClose, triggerHandlers, cardHandlers } = useHoverCard({
+    disabled,
+    touchEnabled,
+    enterDelay,
+    exitDelay,
+    onOpen,
+    onClose
+  });
+  const triggerProps = {
+    ...triggerHandlers,
+    style: { cursor: disabled ? "default" : "pointer" },
+    "data-testid": dataTestId ? `${dataTestId}-trigger` : "hover-card-trigger"
+  };
+  const triggerElement = trigger ? React.cloneElement(trigger, triggerProps) : /* @__PURE__ */ jsx("span", { ...triggerProps, style: { display: "inline-block", ...triggerProps.style }, children });
+  const padding = CONTENT_PADDING[variant] ?? 2;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    triggerElement,
+    /* @__PURE__ */ jsx(
+      StyledPopover,
+      {
+        ref,
+        open: isOpen && !disabled,
+        anchorEl,
+        onClose: handleClose,
+        anchorOrigin: getAnchorOrigin(placement),
+        transformOrigin: getTransformOrigin(placement),
+        ...cardHandlers,
+        disableAutoFocus: true,
+        disableEnforceFocus: true,
+        disableRestoreFocus: true,
+        customAnimation: animation,
+        slotProps: { paper: { style: { pointerEvents: "auto" } } },
+        ...rest,
+        children: /* @__PURE__ */ jsxs(Box, { sx: { position: "relative" }, children: [
+          showArrow && /* @__PURE__ */ jsx(ArrowContainer, { placement, offset }),
+          /* @__PURE__ */ jsx(
+            StyledCard,
+            {
+              customVariant: variant,
+              glow,
+              pulse,
+              animation,
+              "data-testid": dataTestId || "hover-card-content",
+              sx: (theme) => ({ maxWidth: capOf(theme, maxWidth), ...offsetMargin(theme, placement, offset) }),
+              children: /* @__PURE__ */ jsx(CardContent, { sx: { p: padding, "&:last-child": { pb: padding } }, children: /* @__PURE__ */ jsx(
+                HoverCardContent,
+                {
+                  loadingText,
+                  variant,
+                  title,
+                  description,
+                  avatar,
+                  loading,
+                  loadingComponent,
+                  dataTestId,
+                  children
+                }
+              ) })
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+});
+HoverCard.displayName = "HoverCard";
+
+export {
+  HoverCard
+};
+//# sourceMappingURL=chunk-CSN3F36H.js.map

package/dist/chunk-CSN3F36H.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/HoverCard/HoverCard.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport Card from '@mui/material/Card/index.js';\nimport CardContent from '@mui/material/CardContent/index.js';\nimport Popover from '@mui/material/Popover/index.js';\nimport { styled, type Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { rem } from '../../../tokens/relative';\nimport { withDefaults } from '../../../utils/withDefaults';\n\nimport { HoverCardContent } from './HoverCard.content';\nimport { useHoverCard } from './HoverCard.hooks';\nimport { arrowSx, cardSx, getAnchorOrigin, getTransformOrigin, sideOf } from './HoverCard.styles';\nimport type { CardStyleFlags } from './HoverCard.styles';\nimport type { HoverCardAnimation, HoverCardPlacement, HoverCardProps } from './HoverCard.types';\n\nconst ArrowContainer = styled('div')<{ placement: HoverCardPlacement; offset?: number }>(\n  ({ theme, placement }) => ({ ...arrowSx(theme, placement) }),\n);\n\nconst StyledCard = styled(Card, {\n  shouldForwardProp: (prop) =>\n    !['customVariant', 'glow', 'pulse', 'animation'].includes(prop as string),\n})<CardStyleFlags>(({ theme, ...flags }) => ({ ...cardSx(theme, flags) }));\n\nconst StyledPopover = styled(Popover, {\n  shouldForwardProp: (prop) => prop !== 'customAnimation',\n})<{ customAnimation?: HoverCardAnimation }>(({ customAnimation }) => ({\n  // The popover only positions; StyledCard draws the surface.\n  '& .MuiPopover-paper': {\n    backgroundColor: 'transparent',\n    boxShadow: 'none',\n    overflow: 'visible',\n    ...(customAnimation === 'scale' && { transformOrigin: 'center' }),\n  },\n}));\n\nconst DEFAULTS = {\n  variant: 'default',\n  glow: false,\n  pulse: false,\n  placement: 'bottom',\n  showArrow: false,\n  animation: 'fade',\n  enterDelay: 700,\n  exitDelay: 0,\n  loading: false,\n  touchEnabled: true,\n  disabled: false,\n} satisfies Partial<HoverCardProps>;\n\ntype ResolvedProps = HoverCardProps & Required<Pick<HoverCardProps, keyof typeof DEFAULTS>>;\n\n/** Padding is the variant's own: detailed roomier, minimal tighter. */\nconst CONTENT_PADDING: Record<string, number> = { detailed: 3, minimal: 1.5 };\n\n/**\n * The card is nudged off the anchor on whichever side it sits — `offset` design\n * px (8 unless the caller says otherwise), through the theme's type scale.\n */\nconst offsetMargin = (theme: Theme, placement: HoverCardPlacement, offset: number | undefined) => {\n  const side = sideOf(placement);\n  const key = ({ top: 'mt', bottom: 'mb', left: 'ml', right: 'mr' } as const)[side];\n  return { [key]: rem(theme, offset ?? 8) };\n};\n\n/**\n * The card's cap: 400 design px unless the caller says otherwise. `sx` has always\n * read a number of 1 or less as a fraction of the parent, and that stays so.\n */\nconst capOf = (theme: Theme, maxWidth: number | undefined): string => {\n  const cap = maxWidth ?? 400;\n  return cap <= 1 && cap !== 0 ? `${cap * 100}%` : rem(theme, cap);\n};\n\nexport const HoverCard = React.forwardRef<HTMLDivElement, HoverCardProps>((props, ref) => {\n  const {\n    variant, glow, pulse, title, description, avatar, trigger, placement, showArrow,\n    animation, enterDelay, exitDelay, maxWidth, loading, loadingComponent, loadingText, touchEnabled,\n    offset, disabled, onOpen, onClose, children, dataTestId,\n    ...rest\n  } = withDefaults(props, DEFAULTS) as ResolvedProps;\n\n  const { anchorEl, isOpen, handleClose, triggerHandlers, cardHandlers } = useHoverCard({\n    disabled,\n    touchEnabled,\n    enterDelay,\n    exitDelay,\n    onOpen,\n    onClose,\n  });\n\n  const triggerProps = {\n    ...triggerHandlers,\n    style: { cursor: disabled ? 'default' : 'pointer' },\n    'data-testid': dataTestId ? `${dataTestId}-trigger` : 'hover-card-trigger',\n  };\n\n  const triggerElement = trigger ? (\n    React.cloneElement(trigger, triggerProps)\n  ) : (\n    <span {...triggerProps} style={{ display: 'inline-block', ...triggerProps.style }}>\n      {children}\n    </span>\n  );\n\n  const padding = CONTENT_PADDING[variant] ?? 2;\n\n  return (\n    <>\n      {triggerElement}\n      <StyledPopover\n        ref={ref}\n        open={isOpen && !disabled}\n        anchorEl={anchorEl}\n        onClose={handleClose}\n        anchorOrigin={getAnchorOrigin(placement)}\n        transformOrigin={getTransformOrigin(placement)}\n        {...cardHandlers}\n        disableAutoFocus\n        disableEnforceFocus\n        disableRestoreFocus\n        customAnimation={animation}\n        slotProps={{ paper: { style: { pointerEvents: 'auto' } } }}\n        {...rest}\n      >\n        <Box sx={{ position: 'relative' }}>\n          {showArrow && <ArrowContainer placement={placement} offset={offset} />}\n          <StyledCard\n            customVariant={variant}\n            glow={glow}\n            pulse={pulse}\n            animation={animation}\n            data-testid={dataTestId || 'hover-card-content'}\n            sx={(theme) => ({ maxWidth: capOf(theme, maxWidth), ...offsetMargin(theme, placement, offset) })}\n          >\n            <CardContent sx={{ p: padding, '&:last-child': { pb: padding } }}>\n              <HoverCardContent\n                loadingText={loadingText} variant={variant} title={title}\n                description={description}\n                avatar={avatar}\n                loading={loading}\n                loadingComponent={loadingComponent}\n                dataTestId={dataTestId}\n              >\n                {children}\n              </HoverCardContent>\n            </CardContent>\n          </StyledCard>\n        </Box>\n      </StyledPopover>\n    </>\n  );\n});\n\nHoverCard.displayName = 'HoverCard';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,SAAS;AAChB,OAAO,UAAU;AACjB,OAAO,iBAAiB;AACxB,OAAO,aAAa;AACpB,SAAS,cAA0B;AACnC,OAAO,WAAW;AAgGd,SAQA,UARA,KAyBI,YAzBJ;AArFJ,IAAM,iBAAiB,OAAO,KAAK;AAAA,EACjC,CAAC,EAAE,OAAO,UAAU,OAAO,EAAE,GAAG,QAAQ,OAAO,SAAS,EAAE;AAC5D;AAEA,IAAM,aAAa,OAAO,MAAM;AAAA,EAC9B,mBAAmB,CAAC,SAClB,CAAC,CAAC,iBAAiB,QAAQ,SAAS,WAAW,EAAE,SAAS,IAAc;AAC5E,CAAC,EAAkB,CAAC,EAAE,OAAO,GAAG,MAAM,OAAO,EAAE,GAAG,OAAO,OAAO,KAAK,EAAE,EAAE;AAEzE,IAAM,gBAAgB,OAAO,SAAS;AAAA,EACpC,mBAAmB,CAAC,SAAS,SAAS;AACxC,CAAC,EAA4C,CAAC,EAAE,gBAAgB,OAAO;AAAA;AAAA,EAErE,uBAAuB;AAAA,IACrB,iBAAiB;AAAA,IACjB,WAAW;AAAA,IACX,UAAU;AAAA,IACV,GAAI,oBAAoB,WAAW,EAAE,iBAAiB,SAAS;AAAA,EACjE;AACF,EAAE;AAEF,IAAM,WAAW;AAAA,EACf,SAAS;AAAA,EACT,MAAM;AAAA,EACN,OAAO;AAAA,EACP,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,SAAS;AAAA,EACT,cAAc;AAAA,EACd,UAAU;AACZ;AAKA,IAAM,kBAA0C,EAAE,UAAU,GAAG,SAAS,IAAI;AAM5E,IAAM,eAAe,CAAC,OAAc,WAA+B,WAA+B;AAChG,QAAM,OAAO,OAAO,SAAS;AAC7B,QAAM,MAAO,EAAE,KAAK,MAAM,QAAQ,MAAM,MAAM,MAAM,OAAO,KAAK,EAAY,IAAI;AAChF,SAAO,EAAE,CAAC,GAAG,GAAG,IAAI,OAAO,UAAU,CAAC,EAAE;AAC1C;AAMA,IAAM,QAAQ,CAAC,OAAc,aAAyC;AACpE,QAAM,MAAM,YAAY;AACxB,SAAO,OAAO,KAAK,QAAQ,IAAI,GAAG,MAAM,GAAG,MAAM,IAAI,OAAO,GAAG;AACjE;AAEO,IAAM,YAAY,MAAM,WAA2C,CAAC,OAAO,QAAQ;AACxF,QAAM;AAAA,IACJ;AAAA,IAAS;AAAA,IAAM;AAAA,IAAO;AAAA,IAAO;AAAA,IAAa;AAAA,IAAQ;AAAA,IAAS;AAAA,IAAW;AAAA,IACtE;AAAA,IAAW;AAAA,IAAY;AAAA,IAAW;AAAA,IAAU;AAAA,IAAS;AAAA,IAAkB;AAAA,IAAa;AAAA,IACpF;AAAA,IAAQ;AAAA,IAAU;AAAA,IAAQ;AAAA,IAAS;AAAA,IAAU;AAAA,IAC7C,GAAG;AAAA,EACL,IAAI,aAAa,OAAO,QAAQ;AAEhC,QAAM,EAAE,UAAU,QAAQ,aAAa,iBAAiB,aAAa,IAAI,aAAa;AAAA,IACpF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,eAAe;AAAA,IACnB,GAAG;AAAA,IACH,OAAO,EAAE,QAAQ,WAAW,YAAY,UAAU;AAAA,IAClD,eAAe,aAAa,GAAG,UAAU,aAAa;AAAA,EACxD;AAEA,QAAM,iBAAiB,UACrB,MAAM,aAAa,SAAS,YAAY,IAExC,oBAAC,UAAM,GAAG,cAAc,OAAO,EAAE,SAAS,gBAAgB,GAAG,aAAa,MAAM,GAC7E,UACH;AAGF,QAAM,UAAU,gBAAgB,OAAO,KAAK;AAE5C,SACE,iCACG;AAAA;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAM,UAAU,CAAC;AAAA,QACjB;AAAA,QACA,SAAS;AAAA,QACT,cAAc,gBAAgB,SAAS;AAAA,QACvC,iBAAiB,mBAAmB,SAAS;AAAA,QAC5C,GAAG;AAAA,QACJ,kBAAgB;AAAA,QAChB,qBAAmB;AAAA,QACnB,qBAAmB;AAAA,QACnB,iBAAiB;AAAA,QACjB,WAAW,EAAE,OAAO,EAAE,OAAO,EAAE,eAAe,OAAO,EAAE,EAAE;AAAA,QACxD,GAAG;AAAA,QAEJ,+BAAC,OAAI,IAAI,EAAE,UAAU,WAAW,GAC7B;AAAA,uBAAa,oBAAC,kBAAe,WAAsB,QAAgB;AAAA,UACpE;AAAA,YAAC;AAAA;AAAA,cACC,eAAe;AAAA,cACf;AAAA,cACA;AAAA,cACA;AAAA,cACA,eAAa,cAAc;AAAA,cAC3B,IAAI,CAAC,WAAW,EAAE,UAAU,MAAM,OAAO,QAAQ,GAAG,GAAG,aAAa,OAAO,WAAW,MAAM,EAAE;AAAA,cAE9F,8BAAC,eAAY,IAAI,EAAE,GAAG,SAAS,gBAAgB,EAAE,IAAI,QAAQ,EAAE,GAC7D;AAAA,gBAAC;AAAA;AAAA,kBACC;AAAA,kBAA0B;AAAA,kBAAkB;AAAA,kBAC5C;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBAEC;AAAA;AAAA,cACH,GACF;AAAA;AAAA,UACF;AAAA,WACF;AAAA;AAAA,IACF;AAAA,KACF;AAEJ,CAAC;AAED,UAAU,cAAc;","names":[]}

package/dist/chunk-CX66M55F.js

@@ -0,0 +1,288 @@
+import {
+  neutralTones
+} from "./chunk-FQ6UW7IY.js";
+import {
+  rem,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/Stepper/Stepper.tsx
+import CheckCircle from "@mui/icons-material/CheckCircle";
+import Box from "@mui/material/Box/index.js";
+import Button from "@mui/material/Button/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { styled } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var STEP_MIN_WIDTH = { xs: 44, sm: 56, md: 80, lg: 96, xl: 112 };
+var STEP_ICON_SIZE = { xs: 14, sm: 18, md: 24, lg: 30, xl: 36 };
+var StepperRoot = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "orientation"
+})(({ orientation }) => ({
+  display: "flex",
+  flexDirection: orientation === "horizontal" ? "row" : "column",
+  // Use flex-start to align all step circles at the same vertical position
+  alignItems: "flex-start"
+}));
+var StepItem = styled(Box, {
+  shouldForwardProp: (prop) => !["orientation", "isLast"].includes(prop)
+})(({ orientation, isLast }) => ({
+  display: "flex",
+  // For horizontal: row layout so connector appears beside step content
+  // For vertical: column layout so connector appears below step content
+  flexDirection: orientation === "horizontal" ? "row" : "column",
+  // For horizontal: flex-start to keep circles aligned at top
+  // For vertical: center to align connector with centered circle
+  alignItems: orientation === "horizontal" ? "flex-start" : "center",
+  flex: orientation === "horizontal" && !isLast ? 1 : "none",
+  position: "relative",
+  // For vertical: ensure consistent width for proper centering
+  ...orientation === "vertical" && {
+    width: "100%"
+  }
+}));
+var CIRCLE_SIZE = { xs: 24, sm: 32, md: 48, lg: 60, xl: 72 };
+var StepButton = styled(Button, {
+  shouldForwardProp: (prop) => !["isActive", "isCompleted", "clickable", "stepSize"].includes(prop)
+})(
+  ({ theme, isActive, isCompleted, clickable, stepSize }) => ({
+    minWidth: rem(theme, CIRCLE_SIZE[stepSize]),
+    width: rem(theme, CIRCLE_SIZE[stepSize]),
+    height: rem(theme, CIRCLE_SIZE[stepSize]),
+    borderRadius: "50%",
+    padding: 0,
+    backgroundColor: isCompleted ? theme.palette.primary.main : isActive ? theme.palette.primary.main : neutralTones(theme).track,
+    color: isCompleted || isActive ? theme.palette.primary.contrastText : theme.palette.text.primary,
+    cursor: clickable ? "pointer" : "default",
+    pointerEvents: clickable ? "auto" : "none",
+    transition: theme.transitions.create(["background-color", "transform"], {
+      duration: theme.transitions.duration.short
+    }),
+    "&:hover": clickable ? {
+      backgroundColor: isCompleted ? theme.palette.primary.dark : isActive ? theme.palette.primary.dark : neutralTones(theme).subtle,
+      transform: "scale(1.05)"
+    } : {},
+    "&:disabled": {
+      backgroundColor: neutralTones(theme).track,
+      color: theme.palette.text.disabled
+    }
+  })
+);
+var StepConnector = styled(Box, {
+  shouldForwardProp: (prop) => !["orientation", "isCompleted", "size"].includes(prop)
+})(
+  ({ theme, orientation, isCompleted, size }) => ({
+    backgroundColor: isCompleted ? theme.palette.primary.main : neutralTones(theme).track,
+    transition: theme.transitions.create("background-color", {
+      duration: theme.transitions.duration.short
+    }),
+    ...orientation === "horizontal" ? {
+      flex: 1,
+      height: rem(theme, 2),
+      // Vertically centered on the circle (circle/2 - 1 for the 2px line).
+      marginTop: rem(theme, CIRCLE_SIZE[size] / 2 - 1),
+      marginLeft: rem(theme, 8),
+      marginRight: rem(theme, 8),
+      minWidth: rem(theme, 24)
+    } : {
+      width: rem(theme, 2),
+      height: rem(theme, 32),
+      marginTop: rem(theme, 8),
+      marginBottom: rem(theme, 8),
+      // Use margin auto to center horizontally
+      marginLeft: "auto",
+      marginRight: "auto"
+    }
+  })
+);
+var StepLabel = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "orientation"
+})(({ theme, orientation }) => ({
+  textAlign: "center",
+  marginTop: orientation === "horizontal" ? rem(theme, 8) : 0
+}));
+function stepClasses(isActive, isCompleted, optional) {
+  return [
+    isActive && "stepper-step-active",
+    isCompleted && "stepper-step-completed",
+    optional && "stepper-step-optional"
+  ].filter(Boolean).join(" ");
+}
+function contentSx(orientation, size) {
+  return orientation === "horizontal" ? { minWidth: sxRem(STEP_MIN_WIDTH[size]), maxWidth: sxRem(150), flex: "0 1 auto" } : { flexShrink: 0 };
+}
+var StepCircle = ({ step, index, isActive, isCompleted, isClickable, size, labelVariant, onClick }) => {
+  const state = isCompleted ? " (completed)" : isActive ? " (current)" : "";
+  return /* @__PURE__ */ jsx(
+    StepButton,
+    {
+      isActive,
+      isCompleted,
+      clickable: isClickable,
+      stepSize: size,
+      onClick,
+      disabled: step.disabled,
+      "aria-current": isActive ? "step" : void 0,
+      "aria-label": `Step ${index + 1}: ${step.label}${step.optional ? " (optional)" : ""}${state}`,
+      "data-testid": `stepper-step-icon-${index}`,
+      children: isCompleted ? /* @__PURE__ */ jsx(CheckCircle, { sx: { fontSize: sxRem(STEP_ICON_SIZE[size]) } }) : /* @__PURE__ */ jsx(Typography, { variant: labelVariant, fontWeight: "bold", children: index + 1 })
+    }
+  );
+};
+var StepLabelBlock = ({
+  step,
+  index,
+  isActive,
+  orientation,
+  size,
+  labelVariant
+}) => /* @__PURE__ */ jsxs(
+  StepLabel,
+  {
+    orientation,
+    "data-testid": `stepper-step-label-${index}`,
+    sx: size === "sm" && orientation === "horizontal" ? { mt: sxRem(2) } : void 0,
+    children: [
+      /* @__PURE__ */ jsxs(
+        Typography,
+        {
+          variant: labelVariant,
+          fontWeight: isActive ? "bold" : "normal",
+          color: isActive ? "primary" : "textPrimary",
+          children: [
+            step.label,
+            step.optional && /* @__PURE__ */ jsx(Typography, { component: "span", variant: "caption", color: "textSecondary", sx: { ml: 1 }, children: "(optional)" })
+          ]
+        }
+      ),
+      step.description && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", display: "block", children: step.description })
+    ]
+  }
+);
+var StepperItem = ({
+  step,
+  index,
+  isActive,
+  isCompleted,
+  isLast,
+  orientation,
+  size,
+  variant,
+  clickable,
+  onStepClick,
+  renderConnector,
+  nextStep
+}) => {
+  const labelVariant = size === "sm" ? "caption" : "body2";
+  const isClickable = Boolean(clickable) && !step.disabled && (variant === "non-linear" || !isActive);
+  const handleStepClick = () => {
+    if (isClickable && onStepClick) onStepClick(step.id);
+  };
+  const connector = renderConnector && nextStep ? renderConnector(step, nextStep, { completed: isCompleted, active: isActive }) : /* @__PURE__ */ jsx(StepConnector, { orientation, isCompleted, size, "data-testid": `stepper-connector-${index}` });
+  return /* @__PURE__ */ jsxs(
+    StepItem,
+    {
+      orientation,
+      isLast,
+      role: "listitem",
+      "data-testid": `stepper-step-${index}`,
+      className: stepClasses(isActive, isCompleted, step.optional),
+      children: [
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            "data-testid": `stepper-step-content-${index}`,
+            sx: contentSx(orientation, size),
+            children: [
+              /* @__PURE__ */ jsx(
+                StepCircle,
+                {
+                  step,
+                  index,
+                  isActive,
+                  isCompleted,
+                  isClickable,
+                  size,
+                  labelVariant,
+                  onClick: handleStepClick
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                StepLabelBlock,
+                {
+                  step,
+                  index,
+                  isActive,
+                  orientation,
+                  size,
+                  labelVariant
+                }
+              )
+            ]
+          }
+        ),
+        !isLast && connector
+      ]
+    }
+  );
+};
+var Stepper = ({
+  steps,
+  activeId,
+  completed = /* @__PURE__ */ new Set(),
+  orientation = "horizontal",
+  size = "md",
+  variant = "linear",
+  onStepChange,
+  clickable,
+  renderConnector,
+  className,
+  "data-testid": dataTestId
+}) => {
+  const isClickable = clickable ?? variant === "non-linear";
+  return /* @__PURE__ */ jsx(
+    StepperRoot,
+    {
+      component: "ol",
+      orientation,
+      className,
+      "data-testid": dataTestId || "stepper-container",
+      sx: {
+        listStyle: "none",
+        padding: 0,
+        margin: 0
+      },
+      children: steps.map((step, index) => {
+        const isActive = step.id === activeId;
+        const isCompleted = completed.has(step.id);
+        const isLast = index === steps.length - 1;
+        const nextStep = !isLast ? steps[index + 1] : void 0;
+        return /* @__PURE__ */ jsx(
+          StepperItem,
+          {
+            step,
+            index,
+            isActive,
+            isCompleted,
+            isLast,
+            orientation,
+            size,
+            variant,
+            clickable: isClickable,
+            onStepClick: onStepChange,
+            renderConnector,
+            nextStep
+          },
+          step.id
+        );
+      })
+    }
+  );
+};
+
+export {
+  Stepper
+};
+//# sourceMappingURL=chunk-CX66M55F.js.map