@12-apps/ui 6.11.1 → 6.12.1

package/dist/chunk-IDHZHOZW.js

@@ -0,0 +1,285 @@
+// src/components/navigation/DropdownMenu/DropdownMenu.tsx
+import ChevronRight from "@mui/icons-material/ChevronRight";
+import MoreVert from "@mui/icons-material/MoreVert";
+import Box from "@mui/material/Box/index.js";
+import Divider from "@mui/material/Divider/index.js";
+import ListItemIcon from "@mui/material/ListItemIcon/index.js";
+import ListItemText from "@mui/material/ListItemText/index.js";
+import Menu from "@mui/material/Menu/index.js";
+import MenuItem from "@mui/material/MenuItem/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, styled } from "@mui/material/styles/index.js";
+import React, { cloneElement, isValidElement, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var glassTokens = (theme) => {
+  const isDark = theme.palette.mode === "dark";
+  return {
+    edge: isDark ? theme.palette.common.white : theme.palette.common.black,
+    dropShadowAlpha: isDark ? 0.4 : 0.12,
+    insetHighlightAlpha: isDark ? 0.2 : 0.8,
+    sheenAlpha: isDark ? 0.1 : 0.8
+  };
+};
+var glassMenuStyles = (theme) => {
+  const { edge, dropShadowAlpha, insetHighlightAlpha, sheenAlpha } = glassTokens(theme);
+  return {
+    backgroundColor: alpha(theme.palette.background.paper, 0.75),
+    backdropFilter: "blur(24px) saturate(1.8)",
+    WebkitBackdropFilter: "blur(24px) saturate(1.8)",
+    // Safari support
+    border: `1px solid ${alpha(edge, 0.12)}`,
+    boxShadow: [
+      `0 8px 32px ${alpha(theme.palette.common.black, dropShadowAlpha)}`,
+      `0 0 0 1px ${alpha(edge, 0.05)}`,
+      `inset 0 1px 0 ${alpha(theme.palette.common.white, insetHighlightAlpha)}`
+    ].join(", "),
+    // Enhanced glass morphism with subtle gradient overlay
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      background: `linear-gradient(135deg, ${alpha(theme.palette.common.white, sheenAlpha)} 0%, transparent 50%)`,
+      borderRadius: "inherit",
+      pointerEvents: "none",
+      zIndex: 1
+    },
+    // Ensure content appears above the overlay
+    "& .MuiList-root": {
+      position: "relative",
+      zIndex: 2
+    }
+  };
+};
+var StyledMenu = styled(Menu, {
+  shouldForwardProp: (prop) => prop !== "customVariant" && prop !== "size"
+})(({ theme, customVariant, size }) => ({
+  "& .MuiPaper-root": {
+    minWidth: 180,
+    borderRadius: theme.spacing(1),
+    ...customVariant === "glass" && glassMenuStyles(theme),
+    ...customVariant === "minimal" && {
+      boxShadow: `0 2px 8px ${alpha(theme.palette.common.black, 0.08)}`,
+      border: `1px solid ${theme.palette.divider}`
+    },
+    ...size === "sm" && {
+      "& .MuiMenuItem-root": {
+        fontSize: "0.875rem",
+        minHeight: 32,
+        padding: theme.spacing(0.75, 2)
+      }
+    },
+    ...size === "lg" && {
+      "& .MuiMenuItem-root": {
+        fontSize: "1.125rem",
+        minHeight: 48,
+        padding: theme.spacing(1.5, 3)
+      }
+    }
+  }
+}));
+var StyledMenuItem = styled(MenuItem, {
+  shouldForwardProp: (prop) => !["color", "showIconSpace"].includes(prop)
+})(({ theme, color, showIconSpace }) => ({
+  borderRadius: theme.spacing(0.5),
+  margin: theme.spacing(0.5, 1),
+  transition: "all 0.2s ease",
+  ...showIconSpace && {
+    paddingLeft: theme.spacing(5)
+  },
+  "&:hover": {
+    backgroundColor: alpha(theme.palette.primary.main, 0.08)
+  },
+  ...color && color !== "default" && {
+    color: theme.palette[color]?.main || theme.palette.text.primary,
+    "& .MuiListItemIcon-root": {
+      color: theme.palette[color]?.main || theme.palette.text.primary
+    },
+    "&:hover": {
+      backgroundColor: alpha(
+        theme.palette[color]?.main || theme.palette.primary.main,
+        0.08
+      )
+    }
+  }
+}));
+var MenuHeader = styled(Typography)(({ theme }) => ({
+  padding: theme.spacing(1, 2),
+  fontSize: "0.75rem",
+  fontWeight: 600,
+  textTransform: "uppercase",
+  color: theme.palette.text.secondary,
+  letterSpacing: 0.5
+}));
+var ShortcutText = styled(Typography)(({ theme }) => ({
+  fontSize: "0.75rem",
+  color: theme.palette.text.secondary,
+  marginLeft: "auto",
+  paddingLeft: theme.spacing(2)
+}));
+var renderMenuItem = (item, handleItemClick, showIconSpace, size) => {
+  if (item.type === "divider") {
+    return /* @__PURE__ */ jsx(Divider, { sx: { my: 0.5 } }, item.id);
+  }
+  if (item.type === "header") {
+    return /* @__PURE__ */ jsx(MenuHeader, { children: item.label }, item.id);
+  }
+  if (item.component) {
+    return /* @__PURE__ */ jsx(Box, { sx: { px: 2, py: 1 }, children: item.component }, item.id);
+  }
+  return renderLeafMenuItem(item, handleItemClick, showIconSpace, size);
+};
+var renderLeafMenuItem = (item, handleItemClick, showIconSpace, size) => {
+  const hasIcon = !!item.icon;
+  const hasChildren = item.children && item.children.length > 0;
+  return /* @__PURE__ */ jsxs(
+    StyledMenuItem,
+    {
+      disabled: item.disabled,
+      onClick: !item.disabled ? () => handleItemClick(item) : void 0,
+      color: item.color,
+      showIconSpace: showIconSpace && !hasIcon,
+      "data-testid": item.dataTestId,
+      children: [
+        hasIcon && /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: size === "sm" ? 32 : 40 }, children: item.icon }),
+        /* @__PURE__ */ jsx(ListItemText, { primary: item.label }),
+        item.shortcut && /* @__PURE__ */ jsx(ShortcutText, { variant: "caption", children: item.shortcut }),
+        hasChildren && item.showChevron !== false && /* @__PURE__ */ jsx(ChevronRight, { fontSize: "small", sx: { ml: 1, opacity: 0.5 } })
+      ]
+    },
+    item.id
+  );
+};
+var resolveMenuState = (controlledOpen, internalOpen, providedAnchorEl, anchorRef) => {
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? controlledOpen : internalOpen;
+  const anchorEl = providedAnchorEl || anchorRef.current;
+  return { isControlled, open, anchorEl, isOpen: Boolean(anchorEl) && open };
+};
+var useDropdownHandlers = ({
+  isControlled,
+  open,
+  setInternalOpen,
+  onOpen,
+  onClose,
+  closeOnItemClick,
+  anchorRef
+}) => {
+  const handleOpen = () => {
+    if (!isControlled) {
+      setInternalOpen(true);
+    }
+    onOpen?.();
+  };
+  const handleClose = () => {
+    if (!isControlled) {
+      setInternalOpen(false);
+    }
+    onClose?.();
+  };
+  const handleItemClick = (item) => {
+    item.onClick?.();
+    if (closeOnItemClick && !item.children?.length) {
+      handleClose();
+    }
+  };
+  const handleTriggerClick = (event) => {
+    if (isControlled) return;
+    if (open) {
+      handleClose();
+      return;
+    }
+    anchorRef.current = event.currentTarget;
+    handleOpen();
+  };
+  return { handleClose, handleItemClick, handleTriggerClick };
+};
+var DropdownTrigger = ({ trigger, anchorRef, onTriggerClick }) => {
+  if (isValidElement(trigger)) {
+    return cloneElement(
+      trigger,
+      { onClick: onTriggerClick, ref: anchorRef }
+    );
+  }
+  if (trigger) {
+    return /* @__PURE__ */ jsx(Box, { ref: anchorRef, onClick: onTriggerClick, children: trigger });
+  }
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref: anchorRef,
+      onClick: onTriggerClick,
+      sx: { cursor: "pointer", display: "inline-flex" },
+      children: /* @__PURE__ */ jsx(MoreVert, {})
+    }
+  );
+};
+var DropdownMenu = React.forwardRef(
+  ({
+    variant = "default",
+    items,
+    trigger,
+    open: controlledOpen,
+    onOpen,
+    onClose,
+    size = "md",
+    maxHeight = 400,
+    minWidth = 180,
+    closeOnItemClick = true,
+    showIconSpace = false,
+    anchorEl: providedAnchorEl,
+    ...menuProps
+  }, ref) => {
+    const [internalOpen, setInternalOpen] = useState(false);
+    const anchorRef = useRef(null);
+    const { isControlled, open, anchorEl, isOpen } = resolveMenuState(
+      controlledOpen,
+      internalOpen,
+      providedAnchorEl,
+      anchorRef
+    );
+    const { handleClose, handleItemClick, handleTriggerClick } = useDropdownHandlers({
+      isControlled,
+      open,
+      setInternalOpen,
+      onOpen,
+      onClose,
+      closeOnItemClick,
+      anchorRef
+    });
+    const triggerElement = /* @__PURE__ */ jsx(DropdownTrigger, { trigger, anchorRef, onTriggerClick: handleTriggerClick });
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      trigger !== void 0 && triggerElement,
+      /* @__PURE__ */ jsx(
+        StyledMenu,
+        {
+          ref,
+          anchorEl,
+          open: isOpen,
+          onClose: handleClose,
+          customVariant: variant,
+          size,
+          PaperProps: {
+            sx: {
+              maxHeight,
+              minWidth,
+              overflow: "auto"
+            }
+          },
+          transformOrigin: { horizontal: "left", vertical: "top" },
+          anchorOrigin: { horizontal: "left", vertical: "bottom" },
+          ...menuProps,
+          children: items.map((item) => renderMenuItem(item, handleItemClick, showIconSpace, size))
+        }
+      )
+    ] });
+  }
+);
+DropdownMenu.displayName = "DropdownMenu";
+
+export {
+  DropdownMenu
+};
+//# sourceMappingURL=chunk-IDHZHOZW.js.map

package/dist/chunk-IDHZHOZW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["import ChevronRight from '@mui/icons-material/ChevronRight';\nimport MoreVert from '@mui/icons-material/MoreVert';\nimport Box from '@mui/material/Box/index.js';\nimport Divider from '@mui/material/Divider/index.js';\nimport ListItemIcon from '@mui/material/ListItemIcon/index.js';\nimport ListItemText from '@mui/material/ListItemText/index.js';\nimport Menu from '@mui/material/Menu/index.js';\nimport MenuItem from '@mui/material/MenuItem/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, styled } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\nimport React, { cloneElement, isValidElement,useRef, useState } from 'react';\n\nimport type { DropdownMenuItem,DropdownMenuProps } from './DropdownMenu.types';\n\n// Resolves every light/dark decision once. The inline version repeated\n// `theme.palette.mode === 'dark' ? … : …` nine times, and two of those had the\n// SAME expression on both branches (background.paper, and common.white for the\n// inset highlight) — so they read as mode-dependent while never varying.\nconst glassTokens = (theme: Theme) => {\n  const isDark = theme.palette.mode === 'dark';\n\n  return {\n    edge: isDark ? theme.palette.common.white : theme.palette.common.black,\n    dropShadowAlpha: isDark ? 0.4 : 0.12,\n    insetHighlightAlpha: isDark ? 0.2 : 0.8,\n    sheenAlpha: isDark ? 0.1 : 0.8,\n  };\n};\n\nconst glassMenuStyles = (theme: Theme): CSSObject => {\n  const { edge, dropShadowAlpha, insetHighlightAlpha, sheenAlpha } = glassTokens(theme);\n\n  return {\n    backgroundColor: alpha(theme.palette.background.paper, 0.75),\n    backdropFilter: 'blur(24px) saturate(1.8)',\n    WebkitBackdropFilter: 'blur(24px) saturate(1.8)', // Safari support\n    border: `1px solid ${alpha(edge, 0.12)}`,\n    boxShadow: [\n      `0 8px 32px ${alpha(theme.palette.common.black, dropShadowAlpha)}`,\n      `0 0 0 1px ${alpha(edge, 0.05)}`,\n      `inset 0 1px 0 ${alpha(theme.palette.common.white, insetHighlightAlpha)}`,\n    ].join(', '),\n    // Enhanced glass morphism with subtle gradient overlay\n    '&::before': {\n      content: '\"\"',\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      right: 0,\n      bottom: 0,\n      background: `linear-gradient(135deg, ${alpha(theme.palette.common.white, sheenAlpha)} 0%, transparent 50%)`,\n      borderRadius: 'inherit',\n      pointerEvents: 'none',\n      zIndex: 1,\n    },\n    // Ensure content appears above the overlay\n    '& .MuiList-root': {\n      position: 'relative',\n      zIndex: 2,\n    },\n  };\n};\n\nconst StyledMenu = styled(Menu, {\n  shouldForwardProp: (prop) => prop !== 'customVariant' && prop !== 'size',\n})<{ customVariant?: string; size?: string }>(({ theme, customVariant, size }) => ({\n  '& .MuiPaper-root': {\n    minWidth: 180,\n    borderRadius: theme.spacing(1),\n\n    ...(customVariant === 'glass' && glassMenuStyles(theme)),\n\n    ...(customVariant === 'minimal' && {\n      boxShadow: `0 2px 8px ${alpha(theme.palette.common.black, 0.08)}`,\n      border: `1px solid ${theme.palette.divider}`,\n    }),\n\n    ...(size === 'sm' && {\n      '& .MuiMenuItem-root': {\n        fontSize: '0.875rem',\n        minHeight: 32,\n        padding: theme.spacing(0.75, 2),\n      },\n    }),\n\n    ...(size === 'lg' && {\n      '& .MuiMenuItem-root': {\n        fontSize: '1.125rem',\n        minHeight: 48,\n        padding: theme.spacing(1.5, 3),\n      },\n    }),\n  },\n}));\n\nconst StyledMenuItem = styled(MenuItem, {\n  shouldForwardProp: (prop) => !['color', 'showIconSpace'].includes(prop as string),\n})<{ color?: string; showIconSpace?: boolean }>(({ theme, color, showIconSpace }) => ({\n  borderRadius: theme.spacing(0.5),\n  margin: theme.spacing(0.5, 1),\n  transition: 'all 0.2s ease',\n\n  ...(showIconSpace && {\n    paddingLeft: theme.spacing(5),\n  }),\n\n  '&:hover': {\n    backgroundColor: alpha(theme.palette.primary.main, 0.08),\n  },\n\n  ...(color &&\n    color !== 'default' && {\n      color:\n        theme.palette[color as 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success']\n          ?.main || theme.palette.text.primary,\n      '& .MuiListItemIcon-root': {\n        color:\n          theme.palette[color as 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success']\n            ?.main || theme.palette.text.primary,\n      },\n      '&:hover': {\n        backgroundColor: alpha(\n          theme.palette[color as 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success']\n            ?.main || theme.palette.primary.main,\n          0.08,\n        ),\n      },\n    }),\n}));\n\nconst MenuHeader = styled(Typography)(({ theme }) => ({\n  padding: theme.spacing(1, 2),\n  fontSize: '0.75rem',\n  fontWeight: 600,\n  textTransform: 'uppercase',\n  color: theme.palette.text.secondary,\n  letterSpacing: 0.5,\n}));\n\nconst ShortcutText = styled(Typography)(({ theme }) => ({\n  fontSize: '0.75rem',\n  color: theme.palette.text.secondary,\n  marginLeft: 'auto',\n  paddingLeft: theme.spacing(2),\n}));\n\nconst renderMenuItem = (\n  item: DropdownMenuItem,\n  handleItemClick: (item: DropdownMenuItem) => void,\n  showIconSpace?: boolean,\n  size?: string,\n) => {\n  if (item.type === 'divider') {\n    return <Divider key={item.id} sx={{ my: 0.5 }} />;\n  }\n\n  if (item.type === 'header') {\n    return <MenuHeader key={item.id}>{item.label}</MenuHeader>;\n  }\n\n  if (item.component) {\n    return (\n      <Box key={item.id} sx={{ px: 2, py: 1 }}>\n        {item.component}\n      </Box>\n    );\n  }\n\n  return renderLeafMenuItem(item, handleItemClick, showIconSpace, size);\n};\n\nconst renderLeafMenuItem = (\n  item: DropdownMenuItem,\n  handleItemClick: (item: DropdownMenuItem) => void,\n  showIconSpace?: boolean,\n  size?: string,\n) => {\n  const hasIcon = !!item.icon;\n  const hasChildren = item.children && item.children.length > 0;\n\n  return (\n    <StyledMenuItem\n      key={item.id}\n      disabled={item.disabled}\n      onClick={!item.disabled ? () => handleItemClick(item) : undefined} // ← change\n      color={item.color}\n      showIconSpace={showIconSpace && !hasIcon}\n      data-testid={item.dataTestId}\n    >\n      {hasIcon && (\n        <ListItemIcon sx={{ minWidth: size === 'sm' ? 32 : 40 }}>{item.icon}</ListItemIcon>\n      )}\n      <ListItemText primary={item.label} />\n      {item.shortcut && <ShortcutText variant=\"caption\">{item.shortcut}</ShortcutText>}\n      {hasChildren && item.showChevron !== false && (\n        <ChevronRight fontSize=\"small\" sx={{ ml: 1, opacity: 0.5 }} />\n      )}\n    </StyledMenuItem>\n  );\n};\n\n// Open state and anchor are each either caller-supplied or ours. Resolving both\n// here keeps those four branches out of the render body.\nconst resolveMenuState = (\n  controlledOpen: boolean | undefined,\n  internalOpen: boolean,\n  providedAnchorEl: DropdownMenuProps['anchorEl'],\n  anchorRef: React.RefObject<HTMLElement | null>,\n) => {\n  const isControlled = controlledOpen !== undefined;\n  const open = isControlled ? controlledOpen : internalOpen;\n  const anchorEl = providedAnchorEl || anchorRef.current;\n\n  return { isControlled, open, anchorEl, isOpen: Boolean(anchorEl) && open };\n};\n\n// Open/close state is either ours or the caller's; every handler has to respect\n// that, so they are grouped here rather than repeating the isControlled check\n// inline four times in the render.\nconst useDropdownHandlers = ({\n  isControlled,\n  open,\n  setInternalOpen,\n  onOpen,\n  onClose,\n  closeOnItemClick,\n  anchorRef,\n}: {\n  isControlled: boolean;\n  open: boolean;\n  setInternalOpen: (value: boolean) => void;\n  onOpen?: () => void;\n  onClose?: () => void;\n  closeOnItemClick?: boolean;\n  anchorRef: React.RefObject<HTMLElement | null>;\n}) => {\n  const handleOpen = () => {\n    if (!isControlled) {\n      setInternalOpen(true);\n    }\n    onOpen?.();\n  };\n\n  const handleClose = () => {\n    if (!isControlled) {\n      setInternalOpen(false);\n    }\n    onClose?.();\n  };\n\n  const handleItemClick = (item: DropdownMenuItem) => {\n    item.onClick?.();\n    if (closeOnItemClick && !item.children?.length) {\n      handleClose();\n    }\n  };\n\n  const handleTriggerClick = (event: React.MouseEvent<HTMLElement>) => {\n    if (isControlled) return;\n\n    if (open) {\n      handleClose();\n      return;\n    }\n\n    (anchorRef as React.MutableRefObject<HTMLElement>).current = event.currentTarget;\n    handleOpen();\n  };\n\n  return { handleClose, handleItemClick, handleTriggerClick };\n};\n\n// The trigger is either a caller-supplied element we clone to attach our click\n// handler and ref, arbitrary children we wrap, or the default kebab icon.\nconst DropdownTrigger: React.FC<{\n  trigger: DropdownMenuProps['trigger'];\n  anchorRef: React.RefObject<HTMLElement | null>;\n  onTriggerClick: (event: React.MouseEvent<HTMLElement>) => void;\n}> = ({ trigger, anchorRef, onTriggerClick }) => {\n  if (isValidElement(trigger)) {\n    return cloneElement(\n      trigger as React.ReactElement<{\n        onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n        ref?: React.Ref<HTMLElement>;\n      }>,\n      { onClick: onTriggerClick, ref: anchorRef },\n    );\n  }\n\n  if (trigger) {\n    return (\n      <Box ref={anchorRef} onClick={onTriggerClick}>\n        {trigger}\n      </Box>\n    );\n  }\n\n  return (\n    <Box\n      ref={anchorRef}\n      onClick={onTriggerClick}\n      sx={{ cursor: 'pointer', display: 'inline-flex' }}\n    >\n      <MoreVert />\n    </Box>\n  );\n};\n\nexport const DropdownMenu = React.forwardRef<HTMLDivElement, DropdownMenuProps>(\n  (\n    {\n      variant = 'default',\n      items,\n      trigger,\n      open: controlledOpen,\n      onOpen,\n      onClose,\n      size = 'md',\n      maxHeight = 400,\n      minWidth = 180,\n      closeOnItemClick = true,\n      showIconSpace = false,\n      anchorEl: providedAnchorEl,\n      ...menuProps\n    },\n    ref,\n  ) => {\n    const [internalOpen, setInternalOpen] = useState(false);\n    const anchorRef = useRef<HTMLElement>(null);\n\n    const { isControlled, open, anchorEl, isOpen } = resolveMenuState(\n      controlledOpen,\n      internalOpen,\n      providedAnchorEl,\n      anchorRef,\n    );\n\n    const { handleClose, handleItemClick, handleTriggerClick } = useDropdownHandlers({\n      isControlled,\n      open,\n      setInternalOpen,\n      onOpen,\n      onClose,\n      closeOnItemClick,\n      anchorRef,\n    });\n\n    const triggerElement = (\n      <DropdownTrigger trigger={trigger} anchorRef={anchorRef} onTriggerClick={handleTriggerClick} />\n    );\n\n    return (\n      <>\n        {trigger !== undefined && triggerElement}\n        <StyledMenu\n          ref={ref}\n          anchorEl={anchorEl}\n          open={isOpen}\n          onClose={handleClose}\n          customVariant={variant}\n          size={size}\n          PaperProps={{\n            sx: {\n              maxHeight,\n              minWidth,\n              overflow: 'auto',\n            },\n          }}\n          transformOrigin={{ horizontal: 'left', vertical: 'top' }}\n          anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}\n          {...menuProps}\n        >\n          {items.map((item) => renderMenuItem(item, handleItemClick, showIconSpace, size))}\n        </StyledMenu>\n      </>\n    );\n  },\n);\n\nDropdownMenu.displayName = 'DropdownMenu';\n"],"mappings":"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","names":[]}

package/dist/chunk-IE7ISTLQ.js

@@ -0,0 +1,167 @@
+import {
+  SettingsSectionHeader
+} from "./chunk-4M6CEQVK.js";
+import {
+  SettingsSectionChips
+} from "./chunk-SVSOUC5S.js";
+import {
+  TOUCH_TARGET,
+  atLeastRail,
+  displayAcrossRail
+} from "./chunk-LIG7TKIB.js";
+
+// src/components/layout/SettingsLayout/SettingsPanel.tsx
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import Box from "@mui/material/Box/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function BackLink({
+  href,
+  label,
+  breakpoint,
+  linkComponent,
+  testIdPrefix
+}) {
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      component: linkComponent,
+      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"
+      }),
+      children: [
+        /* @__PURE__ */ jsx(ChevronLeftIcon, { fontSize: "small" }),
+        label
+      ]
+    }
+  );
+}
+function PanelBack({
+  href,
+  backLabel,
+  sectionTitle,
+  sectionDescription,
+  breakpoint,
+  linkComponent,
+  testIdPrefix
+}) {
+  if (sectionTitle === void 0) {
+    return /* @__PURE__ */ jsx(
+      BackLink,
+      {
+        href,
+        label: backLabel,
+        breakpoint,
+        linkComponent,
+        testIdPrefix
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    SettingsSectionHeader,
+    {
+      href,
+      backLabel,
+      title: sectionTitle,
+      description: sectionDescription,
+      breakpoint,
+      linkComponent,
+      testIdPrefix
+    }
+  );
+}
+function panelSx(breakpoint, hideOnNarrow, fillHeight) {
+  return (theme) => ({
+    display: hideOnNarrow ? "none" : "block",
+    flex: "1 1 auto",
+    minWidth: 0,
+    width: "100%",
+    [atLeastRail(theme, breakpoint)]: {
+      ...hideOnNarrow ? { display: "block" } : {},
+      ...fillHeight ? {
+        height: "100%",
+        minHeight: 0,
+        overflowY: "auto",
+        overscrollBehavior: "contain"
+      } : {}
+    }
+  });
+}
+function SettingsPanel({
+  inSection,
+  hideOnNarrow,
+  breakpoint,
+  indexHref,
+  backLabel,
+  sectionTitle,
+  sectionDescription,
+  ariaLabel,
+  sectionChips,
+  activeItemId,
+  linkComponent,
+  onSelectItem,
+  testIdPrefix,
+  fillHeight = false,
+  children
+}) {
+  const showBack = inSection && indexHref !== void 0 && linkComponent !== void 0;
+  const showChips = inSection && sectionChips !== void 0 && sectionChips.length > 0;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      "data-testid": `${testIdPrefix}-panel`,
+      sx: panelSx(breakpoint, hideOnNarrow, fillHeight),
+      children: [
+        showBack ? /* @__PURE__ */ jsx(
+          PanelBack,
+          {
+            href: indexHref,
+            backLabel,
+            sectionTitle,
+            sectionDescription,
+            breakpoint,
+            linkComponent,
+            testIdPrefix
+          }
+        ) : null,
+        showChips ? /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: (theme) => ({
+              ...displayAcrossRail(theme, breakpoint, "block", "none"),
+              mb: 1,
+              minWidth: 0
+            }),
+            children: /* @__PURE__ */ jsx(
+              SettingsSectionChips,
+              {
+                items: sectionChips,
+                activeItemId,
+                ariaLabel,
+                linkComponent,
+                onSelectItem,
+                testIdPrefix
+              }
+            )
+          }
+        ) : null,
+        children
+      ]
+    }
+  );
+}
+
+export {
+  SettingsPanel
+};
+//# sourceMappingURL=chunk-IE7ISTLQ.js.map

package/dist/chunk-IE7ISTLQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/SettingsLayout/SettingsPanel.tsx"],"sourcesContent":["\"use client\";\n\nimport ChevronLeftIcon from \"@mui/icons-material/ChevronLeft\";\nimport type { CSSObject, Theme } from \"@mui/material/styles/index.js\";\nimport Box from \"@mui/material/Box/index.js\";\nimport React from \"react\";\n\nimport {\n  atLeastRail,\n  displayAcrossRail,\n  TOUCH_TARGET,\n} from \"./SettingsLayout.styles\";\nimport { SettingsSectionChips } from \"./SettingsSectionChips\";\nimport { SettingsSectionHeader } from \"./SettingsSectionHeader\";\nimport type {\n  SettingsLayoutProps,\n  SettingsNavItem,\n  SettingsRailBreakpoint,\n} from \"./SettingsLayout.types\";\n\nexport interface SettingsPanelProps {\n  /** True in `drilldown`, inside a section rather than at the index. */\n  inSection: boolean;\n  /** True in `drilldown`, at the area's index. */\n  hideOnNarrow: boolean;\n  breakpoint: SettingsRailBreakpoint;\n  indexHref?: string;\n  backLabel: string;\n  /** The open section's own name — turns the back link into a compact header. */\n  sectionTitle?: string;\n  /** One line under that name. */\n  sectionDescription?: string;\n  ariaLabel: string;\n  sectionChips?: SettingsNavItem[];\n  activeItemId?: string;\n  linkComponent?: SettingsLayoutProps[\"linkComponent\"];\n  onSelectItem?: (id: string) => void;\n  testIdPrefix: string;\n  children: React.ReactNode;\n  /** Scroll inside the panel rather than with the page. See `fillHeight`. */\n  fillHeight?: boolean;\n}\n\n/** The way back to the area's index — narrow widths only. */\nfunction BackLink({\n  href,\n  label,\n  breakpoint,\n  linkComponent,\n  testIdPrefix,\n}: {\n  href: string;\n  label: string;\n  breakpoint: SettingsRailBreakpoint;\n  linkComponent: NonNullable<SettingsLayoutProps[\"linkComponent\"]>;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  return (\n    <Box\n      component={linkComponent}\n      href={href}\n      aria-label={label}\n      data-testid={`${testIdPrefix}-back`}\n      sx={(theme) => ({\n        ...displayAcrossRail(theme, breakpoint, \"inline-flex\", \"none\"),\n        alignItems: \"center\",\n        gap: 0.5,\n        minHeight: TOUCH_TARGET,\n        pr: 1,\n        textDecoration: \"none\",\n        color: \"text.secondary\",\n        font: \"inherit\",\n        fontSize: \"0.875rem\",\n      })}\n    >\n      <ChevronLeftIcon fontSize=\"small\" />\n      {label}\n    </Box>\n  );\n}\n\n/**\n * Two shapes of the same control, chosen by whether the host named the section.\n *\n * With a `sectionTitle` the back folds into a compact header that also says\n * where you are; without one the original text link is kept, so no existing\n * consumer's header grows a title and pushes their first field down the page on\n * upgrade. Its own component so `SettingsPanel` keeps one branch rather than\n * three.\n */\nfunction PanelBack({\n  href,\n  backLabel,\n  sectionTitle,\n  sectionDescription,\n  breakpoint,\n  linkComponent,\n  testIdPrefix,\n}: {\n  href: string;\n  backLabel: string;\n  sectionTitle?: string;\n  sectionDescription?: string;\n  breakpoint: SettingsRailBreakpoint;\n  linkComponent: NonNullable<SettingsLayoutProps['linkComponent']>;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  if (sectionTitle === undefined) {\n    return (\n      <BackLink\n        href={href}\n        label={backLabel}\n        breakpoint={breakpoint}\n        linkComponent={linkComponent}\n        testIdPrefix={testIdPrefix}\n      />\n    );\n  }\n  return (\n    <SettingsSectionHeader\n      href={href}\n      backLabel={backLabel}\n      title={sectionTitle}\n      description={sectionDescription}\n      breakpoint={breakpoint}\n      linkComponent={linkComponent}\n      testIdPrefix={testIdPrefix}\n    />\n  );\n}\n\n/**\n * The panel's own box, as ONE object per media query rather than two.\n *\n * Both the `display` rule and `fillHeight`'s belong at the same wide-shape\n * query, and spreading them as separate `{ [query]: … }` objects makes the\n * second REPLACE the first — so turning `fillHeight` on silently dropped the\n * `display: block` that `hideOnNarrow` puts there and left the panel\n * `display: none` at every width. That only shows at a drilldown INDEX, where\n * `hideOnNarrow` is true, which is why a section route looked fine.\n *\n * `overflowY` here is also what lets a `position: sticky` toolbar inside\n * `children` pin to the TOP OF THE PANEL — under the host's header — instead\n * of to a document that is not the scroller.\n */\nfunction panelSx(\n  breakpoint: SettingsRailBreakpoint,\n  hideOnNarrow: boolean,\n  fillHeight: boolean,\n): (theme: Theme) => CSSObject {\n  return (theme) => ({\n    display: hideOnNarrow ? \"none\" : \"block\",\n    flex: \"1 1 auto\",\n    minWidth: 0,\n    width: \"100%\",\n    [atLeastRail(theme, breakpoint)]: {\n      ...(hideOnNarrow ? { display: \"block\" } : {}),\n      ...(fillHeight\n        ? {\n            height: \"100%\",\n            minHeight: 0,\n            overflowY: \"auto\",\n            overscrollBehavior: \"contain\",\n          }\n        : {}),\n    },\n  });\n}\n\n/**\n * The central column: the open screen, and — in `drilldown`, inside a section —\n * the back link and sibling-section strip above it.\n *\n * At the index in `drilldown` this whole column is `display: none` below the\n * breakpoint and the rail becomes the page. Mounted either way: the panel and\n * the list are one tree with `display` between them, not two branches of a\n * render.\n */\nexport function SettingsPanel({\n  inSection,\n  hideOnNarrow,\n  breakpoint,\n  indexHref,\n  backLabel,\n  sectionTitle,\n  sectionDescription,\n  ariaLabel,\n  sectionChips,\n  activeItemId,\n  linkComponent,\n  onSelectItem,\n  testIdPrefix,\n  fillHeight = false,\n  children,\n}: SettingsPanelProps): React.JSX.Element {\n  const showBack =\n    inSection && indexHref !== undefined && linkComponent !== undefined;\n  const showChips =\n    inSection && sectionChips !== undefined && sectionChips.length > 0;\n\n  return (\n    <Box\n      data-testid={`${testIdPrefix}-panel`}\n      sx={panelSx(breakpoint, hideOnNarrow, fillHeight)}\n    >\n      {showBack ? (\n        <PanelBack\n          href={indexHref}\n          backLabel={backLabel}\n          sectionTitle={sectionTitle}\n          sectionDescription={sectionDescription}\n          breakpoint={breakpoint}\n          linkComponent={linkComponent}\n          testIdPrefix={testIdPrefix}\n        />\n      ) : null}\n\n      {showChips ? (\n        <Box\n          sx={(theme) => ({\n            ...displayAcrossRail(theme, breakpoint, \"block\", \"none\"),\n            mb: 1,\n            minWidth: 0,\n          })}\n        >\n          <SettingsSectionChips\n            items={sectionChips}\n            activeItemId={activeItemId}\n            ariaLabel={ariaLabel}\n            linkComponent={linkComponent}\n            onSelectItem={onSelectItem}\n            testIdPrefix={testIdPrefix}\n          />\n        </Box>\n      ) : null}\n\n      {children}\n    </Box>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAEA,OAAO,qBAAqB;AAE5B,OAAO,SAAS;AAsDZ,SAiBE,KAjBF;AAdJ,SAAS,SAAS;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMsB;AACpB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX;AAAA,MACA,cAAY;AAAA,MACZ,eAAa,GAAG,YAAY;AAAA,MAC5B,IAAI,CAAC,WAAW;AAAA,QACd,GAAG,kBAAkB,OAAO,YAAY,eAAe,MAAM;AAAA,QAC7D,YAAY;AAAA,QACZ,KAAK;AAAA,QACL,WAAW;AAAA,QACX,IAAI;AAAA,QACJ,gBAAgB;AAAA,QAChB,OAAO;AAAA,QACP,MAAM;AAAA,QACN,UAAU;AAAA,MACZ;AAAA,MAEA;AAAA,4BAAC,mBAAgB,UAAS,SAAQ;AAAA,QACjC;AAAA;AAAA;AAAA,EACH;AAEJ;AAWA,SAAS,UAAU;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAQsB;AACpB,MAAI,iBAAiB,QAAW;AAC9B,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,EAEJ;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;AAgBA,SAAS,QACP,YACA,cACA,YAC6B;AAC7B,SAAO,CAAC,WAAW;AAAA,IACjB,SAAS,eAAe,SAAS;AAAA,IACjC,MAAM;AAAA,IACN,UAAU;AAAA,IACV,OAAO;AAAA,IACP,CAAC,YAAY,OAAO,UAAU,CAAC,GAAG;AAAA,MAChC,GAAI,eAAe,EAAE,SAAS,QAAQ,IAAI,CAAC;AAAA,MAC3C,GAAI,aACA;AAAA,QACE,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,WAAW;AAAA,QACX,oBAAoB;AAAA,MACtB,IACA,CAAC;AAAA,IACP;AAAA,EACF;AACF;AAWO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AACF,GAA0C;AACxC,QAAM,WACJ,aAAa,cAAc,UAAa,kBAAkB;AAC5D,QAAM,YACJ,aAAa,iBAAiB,UAAa,aAAa,SAAS;AAEnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,GAAG,YAAY;AAAA,MAC5B,IAAI,QAAQ,YAAY,cAAc,UAAU;AAAA,MAE/C;AAAA,mBACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF,IACE;AAAA,QAEH,YACC;AAAA,UAAC;AAAA;AAAA,YACC,IAAI,CAAC,WAAW;AAAA,cACd,GAAG,kBAAkB,OAAO,YAAY,SAAS,MAAM;AAAA,cACvD,IAAI;AAAA,cACJ,UAAU;AAAA,YACZ;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO;AAAA,gBACP;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA;AAAA,YACF;AAAA;AAAA,QACF,IACE;AAAA,QAEH;AAAA;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/chunk-IFPTVHYR.js

@@ -0,0 +1,87 @@
+// src/components/layout/Separator/Separator.styles.ts
+var THICKNESS_PX = {
+  xs: 1,
+  sm: 2,
+  md: 3,
+  lg: 4,
+  xl: 6
+};
+var MARGIN_PX = {
+  xs: 4,
+  sm: 8,
+  md: 16,
+  lg: 24,
+  xl: 32
+};
+var separatorThickness = (size) => THICKNESS_PX[size] ?? THICKNESS_PX.md;
+var separatorMargin = (size, margin) => margin ?? MARGIN_PX[size] ?? MARGIN_PX.md;
+var borderStyleFor = (variant) => {
+  switch (variant) {
+    case "dashed":
+      return "dashed";
+    case "dotted":
+      return "dotted";
+    default:
+      return "solid";
+  }
+};
+var gradientBackground = (variant, orientation, color) => {
+  if (variant !== "gradient") return void 0;
+  const angle = orientation === "horizontal" ? "90deg" : "180deg";
+  return `linear-gradient(${angle}, transparent 0%, ${color} 50%, transparent 100%)`;
+};
+var borderEdges = (isHorizontal, thickness, style, color) => {
+  const leading = isHorizontal ? "Top" : "Left";
+  const blank = {
+    borderTopWidth: 0,
+    borderBottomWidth: 0,
+    borderLeftWidth: 0,
+    borderRightWidth: 0,
+    borderTopStyle: "none",
+    borderBottomStyle: "none",
+    borderLeftStyle: "none",
+    borderRightStyle: "none",
+    borderTopColor: "transparent",
+    borderBottomColor: "transparent",
+    borderLeftColor: "transparent",
+    borderRightColor: "transparent"
+  };
+  return {
+    ...blank,
+    [`border${leading}Width`]: thickness,
+    [`border${leading}Style`]: style,
+    [`border${leading}Color`]: color
+  };
+};
+var separatorStyles = (theme, { variant, orientation, size, color, margin, length }) => {
+  const isHorizontal = orientation === "horizontal";
+  const thickness = separatorThickness(size);
+  const resolvedColor = color || theme.palette.divider;
+  const marginValue = separatorMargin(size, margin);
+  const marginStr = typeof marginValue === "string" ? marginValue : `${marginValue}px`;
+  const baseStyles = {
+    display: "flex",
+    alignItems: "center",
+    margin: isHorizontal ? `${marginStr} 0` : `0 ${marginStr}`,
+    width: isHorizontal ? length || "100%" : `${thickness}px`,
+    height: isHorizontal ? `${thickness}px` : length || "100%",
+    boxSizing: "border-box"
+  };
+  if (variant === "gradient") {
+    return {
+      ...baseStyles,
+      background: gradientBackground(variant, orientation, resolvedColor)
+    };
+  }
+  return {
+    ...baseStyles,
+    backgroundColor: "transparent",
+    ...borderEdges(isHorizontal, thickness, borderStyleFor(variant), resolvedColor)
+  };
+};
+
+export {
+  separatorMargin,
+  separatorStyles
+};
+//# sourceMappingURL=chunk-IFPTVHYR.js.map

package/dist/chunk-IFPTVHYR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Separator/Separator.styles.ts"],"sourcesContent":["import type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport type {\n  SeparatorOrientation,\n  SeparatorProps,\n  SeparatorSize,\n  SeparatorVariant,\n} from './Separator.types';\n\nconst THICKNESS_PX: Record<SeparatorSize, number> = {\n  xs: 1,\n  sm: 2,\n  md: 3,\n  lg: 4,\n  xl: 6,\n};\n\nconst MARGIN_PX: Record<SeparatorSize, number> = {\n  xs: 4,\n  sm: 8,\n  md: 16,\n  lg: 24,\n  xl: 32,\n};\n\nconst separatorThickness = (size: SeparatorSize): number =>\n  THICKNESS_PX[size] ?? THICKNESS_PX.md;\n\n/** An explicit `margin` wins; otherwise the size picks one. */\nexport const separatorMargin = (\n  size: SeparatorSize,\n  margin?: number | string,\n): number | string => margin ?? MARGIN_PX[size] ?? MARGIN_PX.md;\n\n// `gradient` paints a background rather than a border, so it draws its line as a\n// solid border of zero visual consequence.\nconst borderStyleFor = (variant: SeparatorVariant): 'dashed' | 'dotted' | 'solid' => {\n  switch (variant) {\n    case 'dashed':\n      return 'dashed';\n    case 'dotted':\n      return 'dotted';\n    default:\n      return 'solid';\n  }\n};\n\nconst gradientBackground = (\n  variant: SeparatorVariant,\n  orientation: SeparatorOrientation,\n  color: string,\n): string | undefined => {\n  if (variant !== 'gradient') return undefined;\n  const angle = orientation === 'horizontal' ? '90deg' : '180deg';\n  return `linear-gradient(${angle}, transparent 0%, ${color} 50%, transparent 100%)`;\n};\n\n// Only the leading edge carries the rule; the other three are zeroed explicitly so\n// a parent's border shorthand cannot leak through.\nconst borderEdges = (\n  isHorizontal: boolean,\n  thickness: number,\n  style: 'dashed' | 'dotted' | 'solid',\n  color: string,\n): CSSObject => {\n  const leading = isHorizontal ? 'Top' : 'Left';\n  const blank: CSSObject = {\n    borderTopWidth: 0,\n    borderBottomWidth: 0,\n    borderLeftWidth: 0,\n    borderRightWidth: 0,\n    borderTopStyle: 'none',\n    borderBottomStyle: 'none',\n    borderLeftStyle: 'none',\n    borderRightStyle: 'none',\n    borderTopColor: 'transparent',\n    borderBottomColor: 'transparent',\n    borderLeftColor: 'transparent',\n    borderRightColor: 'transparent',\n  };\n\n  return {\n    ...blank,\n    [`border${leading}Width`]: thickness,\n    [`border${leading}Style`]: style,\n    [`border${leading}Color`]: color,\n  };\n};\n\ntype SeparatorStyleArgs = Required<\n  Pick<SeparatorProps, 'variant' | 'orientation' | 'size'>\n> &\n  Pick<SeparatorProps, 'color' | 'margin' | 'length'>;\n\nexport const separatorStyles = (\n  theme: Theme,\n  { variant, orientation, size, color, margin, length }: SeparatorStyleArgs,\n): CSSObject => {\n  const isHorizontal = orientation === 'horizontal';\n  const thickness = separatorThickness(size);\n  const resolvedColor = color || theme.palette.divider;\n\n  // A margin given as a string carries its own units; a number is pixels.\n  const marginValue = separatorMargin(size, margin);\n  const marginStr = typeof marginValue === 'string' ? marginValue : `${marginValue}px`;\n\n  const baseStyles: CSSObject = {\n    display: 'flex',\n    alignItems: 'center',\n    margin: isHorizontal ? `${marginStr} 0` : `0 ${marginStr}`,\n    width: isHorizontal ? length || '100%' : `${thickness}px`,\n    height: isHorizontal ? `${thickness}px` : length || '100%',\n    boxSizing: 'border-box',\n  };\n\n  if (variant === 'gradient') {\n    return {\n      ...baseStyles,\n      background: gradientBackground(variant, orientation, resolvedColor),\n    };\n  }\n\n  return {\n    ...baseStyles,\n    backgroundColor: 'transparent',\n    ...borderEdges(isHorizontal, thickness, borderStyleFor(variant), resolvedColor),\n  };\n};\n"],"mappings":";AASA,IAAM,eAA8C;AAAA,EAClD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAM,YAA2C;AAAA,EAC/C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAM,qBAAqB,CAAC,SAC1B,aAAa,IAAI,KAAK,aAAa;AAG9B,IAAM,kBAAkB,CAC7B,MACA,WACoB,UAAU,UAAU,IAAI,KAAK,UAAU;AAI7D,IAAM,iBAAiB,CAAC,YAA6D;AACnF,UAAQ,SAAS;AAAA,IACf,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAEA,IAAM,qBAAqB,CACzB,SACA,aACA,UACuB;AACvB,MAAI,YAAY,WAAY,QAAO;AACnC,QAAM,QAAQ,gBAAgB,eAAe,UAAU;AACvD,SAAO,mBAAmB,KAAK,qBAAqB,KAAK;AAC3D;AAIA,IAAM,cAAc,CAClB,cACA,WACA,OACA,UACc;AACd,QAAM,UAAU,eAAe,QAAQ;AACvC,QAAM,QAAmB;AAAA,IACvB,gBAAgB;AAAA,IAChB,mBAAmB;AAAA,IACnB,iBAAiB;AAAA,IACjB,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,IAChB,mBAAmB;AAAA,IACnB,iBAAiB;AAAA,IACjB,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,IAChB,mBAAmB;AAAA,IACnB,iBAAiB;AAAA,IACjB,kBAAkB;AAAA,EACpB;AAEA,SAAO;AAAA,IACL,GAAG;AAAA,IACH,CAAC,SAAS,OAAO,OAAO,GAAG;AAAA,IAC3B,CAAC,SAAS,OAAO,OAAO,GAAG;AAAA,IAC3B,CAAC,SAAS,OAAO,OAAO,GAAG;AAAA,EAC7B;AACF;AAOO,IAAM,kBAAkB,CAC7B,OACA,EAAE,SAAS,aAAa,MAAM,OAAO,QAAQ,OAAO,MACtC;AACd,QAAM,eAAe,gBAAgB;AACrC,QAAM,YAAY,mBAAmB,IAAI;AACzC,QAAM,gBAAgB,SAAS,MAAM,QAAQ;AAG7C,QAAM,cAAc,gBAAgB,MAAM,MAAM;AAChD,QAAM,YAAY,OAAO,gBAAgB,WAAW,cAAc,GAAG,WAAW;AAEhF,QAAM,aAAwB;AAAA,IAC5B,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,QAAQ,eAAe,GAAG,SAAS,OAAO,KAAK,SAAS;AAAA,IACxD,OAAO,eAAe,UAAU,SAAS,GAAG,SAAS;AAAA,IACrD,QAAQ,eAAe,GAAG,SAAS,OAAO,UAAU;AAAA,IACpD,WAAW;AAAA,EACb;AAEA,MAAI,YAAY,YAAY;AAC1B,WAAO;AAAA,MACL,GAAG;AAAA,MACH,YAAY,mBAAmB,SAAS,aAAa,aAAa;AAAA,IACpE;AAAA,EACF;AAEA,SAAO;AAAA,IACL,GAAG;AAAA,IACH,iBAAiB;AAAA,IACjB,GAAG,YAAY,cAAc,WAAW,eAAe,OAAO,GAAG,aAAa;AAAA,EAChF;AACF;","names":[]}

package/dist/chunk-IKBQ7CS2.js

@@ -0,0 +1,33 @@
+import {
+  ToggleField
+} from "./chunk-LIQHOLDQ.js";
+import {
+  TextField
+} from "./chunk-LFB4H7Y6.js";
+import {
+  SelectField
+} from "./chunk-MYOFULG4.js";
+import {
+  CepField
+} from "./chunk-CESQKLIR.js";
+import {
+  CategoryField
+} from "./chunk-SVXSBLVD.js";
+import {
+  __export
+} from "./chunk-PZ5AY32C.js";
+
+// src/components/form/total-form/Fields/index.ts
+var Fields_exports = {};
+__export(Fields_exports, {
+  CategoryField: () => CategoryField,
+  CepField: () => CepField,
+  SelectField: () => SelectField,
+  TextField: () => TextField,
+  ToggleField: () => ToggleField
+});
+
+export {
+  Fields_exports
+};
+//# sourceMappingURL=chunk-IKBQ7CS2.js.map