@12-apps/ui 6.33.1 → 6.35.0

package/dist/chunk-SKX4NA6E.js

@@ -0,0 +1,241 @@
+import {
+  GridMain
+} from "./chunk-HJWOB62A.js";
+import {
+  FilterDialog,
+  GridFilterPanel
+} from "./chunk-I2CRLUS7.js";
+import {
+  DataViewsEmpty
+} from "./chunk-5ZQUJ7LT.js";
+import {
+  InlineFilterControls
+} from "./chunk-F7HQVKIR.js";
+import {
+  GridHeaderRow
+} from "./chunk-KK57AHWS.js";
+import {
+  DataViewsPagination
+} from "./chunk-CRZXSZ5O.js";
+import {
+  toOverflowFields,
+  useFilterOverflow
+} from "./chunk-TQ6FPOPD.js";
+import {
+  resolveSelectionExtra
+} from "./chunk-KX75HM5U.js";
+import {
+  ScopeTabsSlot
+} from "./chunk-ZHEZISMI.js";
+import {
+  ShellToolbar
+} from "./chunk-CS3RKXT5.js";
+import {
+  togglePillValues
+} from "./chunk-LOJK733T.js";
+import {
+  DataViewsLayoutProvider,
+  useDataViewsLayout
+} from "./chunk-4LQZH4PU.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  TableFilter
+} from "./chunk-HXEBKOSM.js";
+import {
+  default as default2
+} from "./chunk-WEBEOBN5.js";
+
+// src/components/data-display/DataViews/data-views-grid-parts.tsx
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function LayoutStateSync({
+  c
+}) {
+  const { layout } = useDataViewsLayout();
+  const stored = c.state.layout;
+  useEffect(() => {
+    if (stored !== layout) c.patch({ layout });
+  }, [layout, stored]);
+  return null;
+}
+function useGridShellFilters({
+  c,
+  inlineFilters,
+  fields,
+  rangeFields,
+  testIdPrefix,
+  alwaysShowSearch,
+  hasExport
+}) {
+  const { state } = c;
+  const [openControls, setOpenControls] = useState(0);
+  const split = useFilterOverflow(
+    toOverflowFields(fields, rangeFields),
+    state.pills,
+    c.ranges,
+    openControls > 0,
+    hasExport
+  );
+  const showInline = inlineFilters;
+  const useModal = false;
+  const inlineVisible = showInline && (alwaysShowSearch || fields.length > 0 || rangeFields.length > 0 || state.search !== "");
+  const filterProps = {
+    testIdPrefix,
+    search: state.search,
+    fields,
+    rangeFields,
+    pills: state.pills,
+    ranges: c.ranges,
+    onSearchChange: (value) => c.patch({ search: value }),
+    // Updater, never the render's `state` — see {@link DataViewStatePatch}.
+    onTogglePill: (fieldId, value, checked) => c.patch(({ pills }) => ({ pills: { ...pills, [fieldId]: togglePillValues(pills[fieldId], value, checked) } })),
+    onChangeRange: (fieldId, range) => c.patch({ ranges: { ...c.ranges, [fieldId]: range } }),
+    onClearField: (fieldId) => c.patch({ pills: { ...state.pills, [fieldId]: [] } }),
+    onClearAll: () => c.patch({ search: "", pills: {}, ranges: {} })
+  };
+  return {
+    showInline,
+    useModal,
+    inlineVisible,
+    filterProps,
+    split,
+    onControlOpenChange: (open) => setOpenControls((count) => Math.max(0, count + (open ? 1 : -1)))
+  };
+}
+function ShellStack({
+  props,
+  filters
+}) {
+  const copy = useDataViewsCopy();
+  const { c, testIdPrefix, dataTestId, scopes = [], emptyState, inlineFilters = false } = props;
+  const { showInline, useModal, inlineVisible, filterProps, split, onControlOpenChange } = filters;
+  const body = /* @__PURE__ */ jsx(
+    DataViewsEmpty,
+    {
+      filtered: c.activeFilterCount > 0 || c.state.search !== "",
+      onClearFilters: () => c.patch({ search: "", pills: {}, ranges: {} }),
+      emptyState,
+      testIdPrefix
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    TableFilter,
+    {
+      copy: copy.tableFilter,
+      open: c.filterOpen,
+      onOpenChange: c.setFilterOpen,
+      hasActiveFilters: c.activeFilterCount > 0,
+      children: /* @__PURE__ */ jsxs(default2, { spacing: 0, "data-testid": dataTestId ? `${dataTestId}-container` : void 0, children: [
+        /* @__PURE__ */ jsx(GridHeaderRow, { title: props.title, headerActions: props.headerActions, testIdPrefix }),
+        /* @__PURE__ */ jsx(
+          ShellToolbar,
+          {
+            c,
+            rows: props.rows,
+            sortKinds: props.sortKinds,
+            displayView: props.displayView,
+            exportConfig: props.exportConfig,
+            filterControls: inlineVisible ? /* @__PURE__ */ jsx(
+              InlineFilterControls,
+              {
+                ...filterProps,
+                split,
+                activeFilterCount: c.activeFilterCount,
+                onControlOpenChange
+              }
+            ) : void 0,
+            barRef: split.barRef,
+            testIdPrefix,
+            rowActions: props.rowActions,
+            bulkActions: props.bulkActions,
+            selectionExtra: resolveSelectionExtra(props),
+            toolbarRightSlot: props.toolbarRightSlot,
+            compactControls: showInline && split.compactControls,
+            counterHidden: showInline && split.counterHidden,
+            showInline
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ScopeTabsSlot,
+          {
+            scopes,
+            scopeFieldId: props.scopeFieldId,
+            board: props.board,
+            value: c.scope,
+            onChange: c.setScope,
+            counts: c.scopeCounts,
+            testIdPrefix
+          }
+        ),
+        /* @__PURE__ */ jsxs(TableFilter.Layout, { children: [
+          /* @__PURE__ */ jsxs(TableFilter.Main, { children: [
+            /* @__PURE__ */ jsx(
+              GridMain,
+              {
+                c,
+                getRowId: props.getRowId,
+                renderCard: props.renderCard,
+                renderListRow: props.renderListRow,
+                listGroup: props.listGroup,
+                board: props.board,
+                rowDetail: props.rowDetail,
+                dataTestId,
+                testIdPrefix,
+                emptyState: body
+              }
+            ),
+            /* @__PURE__ */ jsx(DataViewsPagination, { c, testIdPrefix })
+          ] }),
+          inlineFilters ? null : /* @__PURE__ */ jsx(GridFilterPanel, { ...filterProps })
+        ] }),
+        useModal && /* @__PURE__ */ jsx(FilterDialog, { open: c.filterOpen, onClose: () => c.setFilterOpen(false), ...filterProps })
+      ] })
+    }
+  );
+}
+function GridShell(props) {
+  const {
+    c,
+    fields,
+    rangeFields,
+    testIdPrefix,
+    renderCard,
+    renderListRow,
+    board,
+    defaultLayout,
+    ignoreStoredLayout,
+    inlineFilters = false,
+    alwaysShowSearch = false
+  } = props;
+  const filters = useGridShellFilters({
+    c,
+    inlineFilters,
+    fields,
+    rangeFields,
+    testIdPrefix,
+    alwaysShowSearch,
+    hasExport: props.exportConfig !== void 0
+  });
+  return /* @__PURE__ */ jsxs(
+    DataViewsLayoutProvider,
+    {
+      canUseCards: Boolean(renderCard),
+      canUseList: Boolean(renderListRow),
+      canUseBoard: Boolean(board && renderCard),
+      defaultLayout,
+      ignoreStoredLayout,
+      viewLayout: c.state.layout,
+      children: [
+        /* @__PURE__ */ jsx(LayoutStateSync, { c }),
+        /* @__PURE__ */ jsx(ShellStack, { props, filters })
+      ]
+    }
+  );
+}
+
+export {
+  GridShell
+};
+//# sourceMappingURL=chunk-SKX4NA6E.js.map

package/dist/chunk-SN2YMCTL.js

@@ -0,0 +1,82 @@
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  MultiSelectDropdown
+} from "./chunk-NPP44TQG.js";
+import {
+  CategorySelect
+} from "./chunk-ZW5K4XCQ.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-SN2YMCTL.js.map

package/dist/chunk-SX3MEC3Q.js

@@ -0,0 +1,127 @@
+import {
+  SwitchControl,
+  SwitchHelper,
+  SwitchRow
+} from "./chunk-J4NXTSJY.js";
+import {
+  switchIds
+} from "./chunk-SZS7VZJN.js";
+import {
+  splitTestId
+} from "./chunk-TYJR4GOF.js";
+import {
+  withDefaults
+} from "./chunk-HPK33ACY.js";
+
+// src/components/form/Switch/Switch.tsx
+import Box from "@mui/material/Box/index.js";
+import { forwardRef, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULTS = {
+  variant: "default",
+  color: "primary",
+  size: "md",
+  glow: false,
+  glass: false,
+  gradient: false,
+  labelPosition: "end",
+  error: false,
+  animated: true,
+  loading: false,
+  ripple: false,
+  pulse: false
+};
+var Switch = forwardRef((props, ref) => {
+  const {
+    variant,
+    color,
+    size,
+    label,
+    description,
+    glow,
+    glass,
+    gradient,
+    labelPosition,
+    onIcon,
+    offIcon,
+    onText,
+    offText,
+    error,
+    helperText,
+    trackWidth,
+    trackHeight,
+    checked,
+    onChange,
+    animated,
+    loading,
+    ripple,
+    pulse,
+    id,
+    inputProps,
+    ...others
+  } = withDefaults(props, DEFAULTS);
+  const { testId: dataTestId, rest } = splitTestId(others);
+  const containerTestId = dataTestId ? `${dataTestId}-container` : "switch-container";
+  const { inputId, descriptionId, helperId, describedBy } = switchIds({
+    generated: useId(),
+    id,
+    inputProps,
+    description,
+    helperText,
+    callerDescribedBy: rest["aria-describedby"]
+  });
+  const control = /* @__PURE__ */ jsx(
+    SwitchControl,
+    {
+      customVariant: variant,
+      customColor: color,
+      customSize: size,
+      glow,
+      glass,
+      gradient,
+      trackWidth,
+      trackHeight,
+      onText,
+      offText,
+      loading,
+      ripple,
+      pulse,
+      checked,
+      onChange,
+      onIcon,
+      offIcon,
+      animated,
+      size,
+      dataTestId,
+      switchRef: ref,
+      inputId,
+      inputProps,
+      describedBy,
+      rest
+    }
+  );
+  const helper = /* @__PURE__ */ jsx(SwitchHelper, { helperText, error, dataTestId, id: helperId });
+  return /* @__PURE__ */ jsxs(Box, { "data-testid": containerTestId, children: [
+    /* @__PURE__ */ jsx(
+      SwitchRow,
+      {
+        label,
+        description,
+        labelPosition,
+        error,
+        dataTestId,
+        htmlFor: inputId,
+        descriptionId,
+        disabled: Boolean(rest.disabled) || loading,
+        control
+      }
+    ),
+    helper
+  ] });
+});
+Switch.displayName = "Switch";
+
+export {
+  Switch
+};
+//# sourceMappingURL=chunk-SX3MEC3Q.js.map

package/dist/chunk-T3WHW7ZC.js

@@ -0,0 +1,74 @@
+import {
+  getOverflowStyle,
+  getVariantStyles
+} from "./chunk-L7SFH3ED.js";
+
+// src/components/layout/ScrollArea/ScrollViewport.tsx
+import Box from "@mui/material/Box/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { jsx } from "react/jsx-runtime";
+var ScrollViewport = ({
+  regionLabel,
+  children,
+  height,
+  maxHeight,
+  orientation,
+  scrollbarSize,
+  scrollbarColor,
+  scrollbarTrackColor,
+  contentPadding,
+  variant,
+  disabled,
+  loading,
+  smoothScroll,
+  shouldShowScrollbar,
+  setScrollRef,
+  onScroll
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref: setScrollRef,
+      onScroll,
+      role: "region",
+      "aria-label": regionLabel,
+      "aria-busy": loading,
+      tabIndex: disabled ? -1 : 0,
+      sx: {
+        width: "100%",
+        height: "100%",
+        // Use an explicit maxHeight when height is 'auto', else inherit.
+        maxHeight: height === "auto" && maxHeight ? maxHeight : "100%",
+        padding: contentPadding,
+        opacity: loading ? 0.5 : 1,
+        pointerEvents: disabled || loading ? "none" : "auto",
+        transition: "opacity 0.3s ease",
+        "&:focus": {
+          outline: "none",
+          "&:focus-visible": {
+            outline: `2px solid ${theme.palette.primary.main}`,
+            outlineOffset: -2
+          }
+        },
+        ...getOverflowStyle({ disabled, orientation }),
+        ...getVariantStyles({
+          theme,
+          variant,
+          orientation,
+          scrollbarSize,
+          scrollbarColor,
+          scrollbarTrackColor,
+          shouldShowScrollbar
+        })
+      },
+      style: { scrollBehavior: smoothScroll ? "smooth" : "auto" },
+      children
+    }
+  );
+};
+
+export {
+  ScrollViewport
+};
+//# sourceMappingURL=chunk-T3WHW7ZC.js.map

package/dist/chunk-TBF2CPJW.js

@@ -0,0 +1,157 @@
+import {
+  shadowInk
+} from "./chunk-FQ6UW7IY.js";
+
+// src/components/layout/Drawer/Drawer.tsx
+import Close from "@mui/icons-material/Close";
+import Box from "@mui/material/Box/index.js";
+import MuiDrawer from "@mui/material/Drawer/index.js";
+import IconButton from "@mui/material/IconButton/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, useTheme } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var resolveAnchor = (anchor, variant) => {
+  if (anchor) return anchor;
+  switch (variant) {
+    case "right":
+      return "right";
+    case "top":
+      return "top";
+    case "bottom":
+      return "bottom";
+    case "glass":
+      return "right";
+    case "left":
+    default:
+      return "left";
+  }
+};
+var buildDrawerStyles = (theme, anchor, variant, width, height, paperSx) => {
+  const baseStyles = {
+    width: ["left", "right"].includes(anchor) ? width : "100%",
+    height: ["top", "bottom"].includes(anchor) ? height : "100%",
+    flexShrink: 0
+  };
+  if (variant === "glass") {
+    return {
+      ...baseStyles,
+      "& .MuiDrawer-paper": {
+        width,
+        height: "100%",
+        backgroundColor: alpha(theme.palette.background.paper, 0.1),
+        backdropFilter: "blur(20px)",
+        border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,
+        boxShadow: `0 8px 32px ${shadowInk(theme, 0.1)}`,
+        ...paperSx
+      }
+    };
+  }
+  return {
+    ...baseStyles,
+    "& .MuiDrawer-paper": {
+      width: ["left", "right"].includes(anchor) ? width : "100%",
+      height: ["top", "bottom"].includes(anchor) ? height : "100%",
+      boxSizing: "border-box",
+      ...paperSx
+    }
+  };
+};
+var Drawer = ({
+  children,
+  open,
+  onClose,
+  variant = "left",
+  anchor,
+  width = 280,
+  height = "100%",
+  persistent = false,
+  backdrop = true,
+  hideBackdrop = false,
+  keepMounted = false,
+  paperSx,
+  className,
+  dataTestId,
+  ...rest
+}) => {
+  const theme = useTheme();
+  const drawerAnchor = resolveAnchor(anchor, variant);
+  return /* @__PURE__ */ jsx(
+    MuiDrawer,
+    {
+      anchor: drawerAnchor,
+      open,
+      onClose,
+      variant: persistent ? "persistent" : "temporary",
+      ModalProps: {
+        keepMounted,
+        hideBackdrop,
+        BackdropProps: {
+          invisible: !backdrop
+        }
+      },
+      sx: buildDrawerStyles(theme, drawerAnchor, variant, width, height, paperSx),
+      className,
+      "data-testid": dataTestId || "drawer",
+      ...rest,
+      children
+    }
+  );
+};
+var DrawerHeader = ({
+  children,
+  onClose,
+  showCloseButton = true,
+  closeLabel,
+  dataTestId
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      "data-testid": dataTestId || "drawer-header",
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        padding: theme.spacing(2),
+        borderBottom: `1px solid ${theme.palette.divider}`,
+        minHeight: 64,
+        justifyContent: "space-between"
+      },
+      children: [
+        /* @__PURE__ */ jsx(Box, { sx: { flex: 1 }, "data-testid": dataTestId ? `${dataTestId}-title` : "drawer-title", children: typeof children === "string" ? /* @__PURE__ */ jsx(Typography, { variant: "h6", children }) : children }),
+        showCloseButton && onClose && /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            onClick: onClose,
+            edge: "end",
+            "aria-label": closeLabel ?? "Close drawer",
+            "data-testid": dataTestId ? `${dataTestId}-close` : "drawer-close",
+            children: /* @__PURE__ */ jsx(Close, {})
+          }
+        )
+      ]
+    }
+  );
+};
+var DrawerContent = ({ children, padding = true, dataTestId }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      "data-testid": dataTestId || "drawer-content",
+      sx: {
+        flex: 1,
+        overflow: "auto",
+        padding: padding ? theme.spacing(2) : 0
+      },
+      children
+    }
+  );
+};
+
+export {
+  Drawer,
+  DrawerHeader,
+  DrawerContent
+};
+//# sourceMappingURL=chunk-TBF2CPJW.js.map

package/dist/chunk-TBF2CPJW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Drawer/Drawer.tsx"],"sourcesContent":["import Close from '@mui/icons-material/Close';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport Box from '@mui/material/Box/index.js';\nimport MuiDrawer from '@mui/material/Drawer/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport type { DrawerContentProps,DrawerHeaderProps, DrawerProps } from './Drawer.types';\nimport { shadowInk } from '../../../tokens/ink';\n\ntype DrawerAnchor = 'left' | 'right' | 'top' | 'bottom';\n\n// `variant` doubles as a position preset, but an explicit `anchor` always wins.\nconst resolveAnchor = (\n  anchor: DrawerProps['anchor'],\n  variant: DrawerProps['variant'],\n): DrawerAnchor => {\n  if (anchor) return anchor;\n\n  // Map variant to anchor position\n  switch (variant) {\n    case 'right':\n      return 'right';\n    case 'top':\n      return 'top';\n    case 'bottom':\n      return 'bottom';\n    case 'glass':\n      return 'right';\n    case 'left':\n    default:\n      return 'left';\n  }\n};\n\nconst buildDrawerStyles = (\n  theme: Theme,\n  anchor: DrawerAnchor,\n  variant: DrawerProps['variant'],\n  width: DrawerProps['width'],\n  height: DrawerProps['height'],\n  // Merged LAST into the surface's own rules, so a caller can shape the sliding\n  // surface itself (rounded corners on a bottom sheet, a docked panel's offset)\n  // without reaching for the MUI paper class from outside. Undefined by default:\n  // omit it and the drawer styles exactly as it always has.\n  paperSx?: DrawerProps['paperSx'],\n) => {\n  const baseStyles = {\n    width: ['left', 'right'].includes(anchor) ? width : '100%',\n    height: ['top', 'bottom'].includes(anchor) ? height : '100%',\n    flexShrink: 0,\n  };\n\n  if (variant === 'glass') {\n    return {\n      ...baseStyles,\n      '& .MuiDrawer-paper': {\n        width,\n        height: '100%',\n        backgroundColor: alpha(theme.palette.background.paper, 0.1),\n        backdropFilter: 'blur(20px)',\n        border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,\n        boxShadow: `0 8px 32px ${shadowInk(theme, 0.1)}`,\n        ...paperSx,\n      },\n    };\n  }\n\n  return {\n    ...baseStyles,\n    '& .MuiDrawer-paper': {\n      width: ['left', 'right'].includes(anchor) ? width : '100%',\n      height: ['top', 'bottom'].includes(anchor) ? height : '100%',\n      boxSizing: 'border-box',\n      ...paperSx,\n    },\n  };\n};\n\nexport const Drawer: React.FC<DrawerProps> = ({\n  children,\n  open,\n  onClose,\n  variant = 'left',\n  anchor,\n  width = 280,\n  height = '100%',\n  persistent = false,\n  backdrop = true,\n  hideBackdrop = false,\n  keepMounted = false,\n  paperSx,\n  className,\n  dataTestId,\n  ...rest\n}) => {\n  const theme = useTheme();\n  const drawerAnchor = resolveAnchor(anchor, variant);\n\n  return (\n    <MuiDrawer\n      anchor={drawerAnchor}\n      open={open}\n      onClose={onClose}\n      variant={persistent ? 'persistent' : 'temporary'}\n      ModalProps={{\n        keepMounted,\n        hideBackdrop,\n        BackdropProps: {\n          invisible: !backdrop,\n        },\n      }}\n      sx={buildDrawerStyles(theme, drawerAnchor, variant, width, height, paperSx)}\n      className={className}\n      data-testid={dataTestId || 'drawer'}\n      {...rest}\n    >\n      {children}\n    </MuiDrawer>\n  );\n};\n\nexport const DrawerHeader: React.FC<DrawerHeaderProps> = ({\n  children,\n  onClose,\n  showCloseButton = true,\n  closeLabel,\n  dataTestId,\n}) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      data-testid={dataTestId || 'drawer-header'}\n      sx={{\n        display: 'flex',\n        alignItems: 'center',\n        padding: theme.spacing(2),\n        borderBottom: `1px solid ${theme.palette.divider}`,\n        minHeight: 64,\n        justifyContent: 'space-between',\n      }}\n    >\n      <Box sx={{ flex: 1 }} data-testid={dataTestId ? `${dataTestId}-title` : 'drawer-title'}>\n        {typeof children === 'string' ? <Typography variant=\"h6\">{children}</Typography> : children}\n      </Box>\n      {showCloseButton && onClose && (\n        <IconButton\n          onClick={onClose}\n          edge=\"end\"\n          aria-label={closeLabel ?? 'Close drawer'}\n          data-testid={dataTestId ? `${dataTestId}-close` : 'drawer-close'}\n        >\n          <Close />\n        </IconButton>\n      )}\n    </Box>\n  );\n};\n\nexport const DrawerContent: React.FC<DrawerContentProps> = ({ children, padding = true, dataTestId }) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      data-testid={dataTestId || 'drawer-content'}\n      sx={{\n        flex: 1,\n        overflow: 'auto',\n        padding: padding ? theme.spacing(2) : 0,\n      }}\n    >\n      {children}\n    </Box>\n  );\n};\n"],"mappings":"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","names":[]}