@arbidocs/blocks 0.5.20 → 0.5.21

package/dist/{chunk-H32DV7XS.cjs → chunk-UAEYU2NN.cjs}

@@ -205,9 +205,143 @@ function KeyValueRow({
     }
   );
 }
+var DEFAULT_COLLAPSIBLE_SECTION_LABELS = {
+  collapseSection: "Collapse section",
+  expandSection: "Expand section"
+};
+function CollapsibleSection({
+  title,
+  icon,
+  isExpanded,
+  onToggle,
+  children,
+  count,
+  hasActiveFilters = false,
+  expandWhenEmpty = false,
+  childrenClassName,
+  headerClassName,
+  className,
+  rightContent,
+  collapsible = true,
+  onHeaderClick,
+  labels
+}) {
+  const l = { ...DEFAULT_COLLAPSIBLE_SECTION_LABELS, ...labels };
+  const hasCount = count !== void 0;
+  const shouldBeExpanded = !collapsible ? true : hasCount ? count > 0 ? isExpanded : expandWhenEmpty && isExpanded : isExpanded;
+  const hasContent = hasCount ? count > 0 || expandWhenEmpty : true;
+  const chevron = /* @__PURE__ */ jsxRuntime.jsx(
+    lucideReact.ChevronRight,
+    {
+      className: ui.cn("size-4 shrink-0 transition-transform", shouldBeExpanded && "rotate-90")
+    }
+  );
+  const titleBlock = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+    icon,
+    typeof title === "string" ? title && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap", children: title }) : title,
+    hasCount && /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: ui.cn(
+          "ml-1 text-xs tabular-nums",
+          hasActiveFilters ? "rounded-full bg-primary px-1.5 font-medium text-primary-foreground" : "font-normal text-muted-foreground"
+        ),
+        children: count
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cn("w-full", className), "data-slot": "collapsible-section", children: [
+    onHeaderClick ? /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        role: "button",
+        tabIndex: 0,
+        onClick: onHeaderClick,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onHeaderClick();
+          }
+        },
+        className: ui.cn(
+          "mb-4 flex cursor-pointer items-center justify-between gap-2 font-semibold pointer-coarse:min-h-11 transition-colors hover:bg-muted/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          headerClassName
+        ),
+        "data-slot": "collapsible-section-header",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-2 text-left", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                "aria-expanded": shouldBeExpanded,
+                "aria-label": shouldBeExpanded ? l.collapseSection : l.expandSection,
+                disabled: !hasContent,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  if (hasContent) onToggle();
+                },
+                className: "-ml-0.5 shrink-0 rounded-md p-0.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40 pointer-coarse:p-3.5",
+                children: chevron
+              }
+            ),
+            titleBlock
+          ] }),
+          rightContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center", children: rightContent })
+        ]
+      }
+    ) : !collapsible ? /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: ui.cn("mb-4 flex items-center justify-between", headerClassName),
+        "data-slot": "collapsible-section-header",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 items-center gap-2 text-left font-medium", children: titleBlock }),
+          rightContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center", children: rightContent })
+        ]
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: ui.cn("mb-4 flex items-center justify-between", headerClassName),
+        "data-slot": "collapsible-section-header",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              role: "button",
+              tabIndex: hasContent ? 0 : -1,
+              "aria-expanded": shouldBeExpanded,
+              "aria-disabled": !hasContent,
+              onClick: hasContent ? onToggle : void 0,
+              onKeyDown: hasContent ? (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  onToggle();
+                }
+              } : void 0,
+              className: ui.cn(
+                "touch-hit flex min-w-0 items-center gap-2 rounded-md text-left font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                hasContent ? "cursor-pointer hover:text-muted-foreground" : "cursor-default opacity-60"
+              ),
+              children: [
+                chevron,
+                titleBlock
+              ]
+            }
+          ),
+          rightContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center", children: rightContent })
+        ]
+      }
+    ),
+    shouldBeExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: childrenClassName ?? "mb-8 flex flex-wrap justify-start gap-6", children })
+  ] });
+}
 
+exports.CollapsibleSection = CollapsibleSection;
+exports.DEFAULT_COLLAPSIBLE_SECTION_LABELS = DEFAULT_COLLAPSIBLE_SECTION_LABELS;
 exports.DEFAULT_KEY_VALUE_ROW_LABELS = DEFAULT_KEY_VALUE_ROW_LABELS;
 exports.KeyValueContainer = KeyValueContainer;
 exports.KeyValueRow = KeyValueRow;
-//# sourceMappingURL=chunk-H32DV7XS.cjs.map
-//# sourceMappingURL=chunk-H32DV7XS.cjs.map
+//# sourceMappingURL=chunk-UAEYU2NN.cjs.map
+//# sourceMappingURL=chunk-UAEYU2NN.cjs.map

package/dist/chunk-UAEYU2NN.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/home/KeyValueRow.tsx","../src/home/CollapsibleSection.tsx"],"names":["cn","Tooltip","jsx","TooltipTrigger","TooltipContent","jsxs","ArrowDownFromLine","ArrowUpFromLine","useSortable","GripVertical","CSS","ChevronRight"],"mappings":"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","file":"chunk-UAEYU2NN.cjs","sourcesContent":["import type { ReactNode } from 'react'\nimport { useSortable } from '@dnd-kit/sortable'\nimport { CSS } from '@dnd-kit/utilities'\nimport { ArrowDownFromLine, ArrowUpFromLine, GripVertical } from 'lucide-react'\nimport { Tooltip, TooltipContent, TooltipTrigger, cn } from '@arbidocs/react/ui'\n\n/** Fixed strings of the row controls. */\nexport interface KeyValueRowLabels {\n  hideField: string\n  showField: string\n  dragToReorder: string\n}\n\nexport const DEFAULT_KEY_VALUE_ROW_LABELS: KeyValueRowLabels = {\n  hideField: 'Hide this field',\n  showField: 'Show this field',\n  dragToReorder: 'Drag to reorder',\n}\n\nexport interface KeyValueRowProps {\n  /** Label text; also the accessible name when `labelSlot` replaces it visually. */\n  label: string\n  /** Glyph before the label. */\n  icon?: ReactNode\n  /** Id of the control in the value: renders the label as a real `<label for>`. */\n  htmlFor?: string\n  /** Replaces the icon + label (e.g. a tag pill that is itself the label). */\n  labelSlot?: ReactNode\n  /** The value, on the right (or below the label when the container is narrow). */\n  children: ReactNode\n  className?: string\n  'data-testid'?: string\n  /** Enables drag reordering; requires a parent `DndContext` + `SortableContext`. */\n  sortableId?: string\n  /** Shows a \"hide this field\" control on the label line. */\n  onHide?: () => void\n  /** Shows a \"show this field\" control (for hidden rows, rendered dimmed). */\n  onShow?: () => void\n  labels?: Partial<KeyValueRowLabels>\n}\n\n/**\n * Wrap rows in this to switch on container-query responsiveness: a row stacks\n * its label above its value in a narrow container and goes side by side when\n * wider, by the container's width and not the viewport's.\n */\nexport function KeyValueContainer({\n  children,\n  className,\n}: {\n  children: ReactNode\n  className?: string\n}) {\n  return <div className={cn('@container', className)}>{children}</div>\n}\n\n/** Small square control, sized to sit on the label line (44px on touch). */\nfunction RowControlButton({\n  onClick,\n  label,\n  icon,\n}: {\n  onClick: () => void\n  label: string\n  icon: ReactNode\n}) {\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <button\n          type=\"button\"\n          onClick={onClick}\n          aria-label={label}\n          className=\"flex size-5 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring pointer-coarse:size-11\"\n        >\n          {icon}\n        </button>\n      </TooltipTrigger>\n      <TooltipContent side=\"top\">\n        <p>{label}</p>\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n\ninterface RowBodyProps {\n  grip: ReactNode\n  icon?: ReactNode\n  htmlFor?: string\n  labelSlot?: ReactNode\n  label: string\n  children: ReactNode\n  onHide?: () => void\n  onShow?: () => void\n  labels: KeyValueRowLabels\n}\n\n/**\n * The shared row body: a label line (grip + hide/show + icon/label) beside the\n * value. Controls sit on the label's line so they align with the label even\n * when the value is a tall multi-line field.\n */\nfunction RowBody({\n  grip,\n  icon,\n  htmlFor,\n  labelSlot,\n  label,\n  children,\n  onHide,\n  onShow,\n  labels,\n}: RowBodyProps) {\n  const LabelText = htmlFor ? 'label' : 'span'\n  return (\n    <div className=\"flex min-w-0 flex-1 flex-col gap-1 py-1.5 @[400px]:flex-row @[400px]:items-start @[400px]:gap-4\">\n      <div\n        className=\"flex w-full shrink-0 items-center gap-1 @[400px]:w-44 @[400px]:pt-2\"\n        data-slot=\"key-value-label\"\n      >\n        {grip}\n        {onHide && (\n          <RowControlButton\n            onClick={onHide}\n            label={labels.hideField}\n            icon={<ArrowDownFromLine className=\"size-3.5\" />}\n          />\n        )}\n        {onShow && (\n          <RowControlButton\n            onClick={onShow}\n            label={labels.showField}\n            icon={<ArrowUpFromLine className=\"size-3.5 text-primary\" />}\n          />\n        )}\n        {labelSlot ?? (\n          <span className=\"inline-flex min-w-0 items-center gap-1.5\">\n            {icon && (\n              <span className=\"inline-flex shrink-0 items-center justify-center text-muted-foreground/60\">\n                {icon}\n              </span>\n            )}\n            <LabelText\n              {...(htmlFor ? { htmlFor } : null)}\n              className=\"truncate text-sm font-medium text-muted-foreground\"\n            >\n              {label}\n            </LabelText>\n          </span>\n        )}\n      </div>\n      <div className=\"min-w-0 flex-1\" data-slot=\"key-value-value\">\n        {children}\n      </div>\n    </div>\n  )\n}\n\nconst ROW_CLASS =\n  'group flex items-start rounded-md pl-1 pr-1.5 transition-colors hover:bg-muted/50'\n\ntype SortableRowProps = Omit<KeyValueRowProps, 'data-testid' | 'labels'> & {\n  labels: KeyValueRowLabels\n  sortableId: string\n  testId?: string\n}\n\nfunction SortableKeyValueRow({\n  sortableId,\n  label,\n  icon,\n  htmlFor,\n  labelSlot,\n  children,\n  className,\n  testId,\n  onHide,\n  onShow,\n  labels,\n}: SortableRowProps) {\n  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({\n    id: sortableId,\n  })\n\n  const grip = (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <button\n          type=\"button\"\n          aria-label={labels.dragToReorder}\n          className=\"flex size-5 shrink-0 cursor-grab touch-none items-center justify-center rounded-md text-muted-foreground/60 transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring active:cursor-grabbing pointer-coarse:size-11\"\n          {...attributes}\n          {...listeners}\n        >\n          <GripVertical className=\"size-3.5\" />\n        </button>\n      </TooltipTrigger>\n      <TooltipContent side=\"top\">\n        <p>{labels.dragToReorder}</p>\n      </TooltipContent>\n    </Tooltip>\n  )\n\n  return (\n    <div\n      ref={setNodeRef}\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition,\n        opacity: isDragging ? 0 : 1,\n      }}\n      className={cn(ROW_CLASS, className)}\n      data-slot=\"key-value-row\"\n      data-testid={testId}\n    >\n      <RowBody\n        grip={grip}\n        icon={icon}\n        htmlFor={htmlFor}\n        labelSlot={labelSlot}\n        label={label}\n        onHide={onHide}\n        onShow={onShow}\n        labels={labels}\n      >\n        {children}\n      </RowBody>\n    </div>\n  )\n}\n\n/**\n * A label/value row for forms, settings and detail views. Optionally sortable\n * (drag handle) and hideable (hide/show controls), all visible without hover.\n */\nexport function KeyValueRow({\n  label,\n  icon,\n  htmlFor,\n  labelSlot,\n  children,\n  className,\n  'data-testid': testId,\n  sortableId,\n  onHide,\n  onShow,\n  labels,\n}: KeyValueRowProps) {\n  const mergedLabels = { ...DEFAULT_KEY_VALUE_ROW_LABELS, ...labels }\n  if (sortableId) {\n    return (\n      <SortableKeyValueRow\n        sortableId={sortableId}\n        label={label}\n        icon={icon}\n        htmlFor={htmlFor}\n        labelSlot={labelSlot}\n        className={className}\n        testId={testId}\n        onHide={onHide}\n        onShow={onShow}\n        labels={mergedLabels}\n      >\n        {children}\n      </SortableKeyValueRow>\n    )\n  }\n\n  return (\n    <div\n      className={cn(ROW_CLASS, onShow && 'opacity-60', className)}\n      data-slot=\"key-value-row\"\n      data-testid={testId}\n    >\n      <RowBody\n        grip={null}\n        icon={icon}\n        htmlFor={htmlFor}\n        labelSlot={labelSlot}\n        label={label}\n        onShow={onShow}\n        labels={mergedLabels}\n      >\n        {children}\n      </RowBody>\n    </div>\n  )\n}\n","import type { ReactNode } from 'react'\nimport { ChevronRight } from 'lucide-react'\nimport { cn } from '@arbidocs/react/ui'\n\n/** Fixed strings of the section header. */\nexport interface CollapsibleSectionLabels {\n  /** The chevron button's name (only with `onHeaderClick`). */\n  collapseSection: string\n  expandSection: string\n}\n\nexport const DEFAULT_COLLAPSIBLE_SECTION_LABELS: CollapsibleSectionLabels = {\n  collapseSection: 'Collapse section',\n  expandSection: 'Expand section',\n}\n\nexport interface CollapsibleSectionProps {\n  /** The section's heading. A node, so callers can add badges or tooltips. */\n  title: ReactNode\n  /** Leading glyph before the title. */\n  icon?: ReactNode\n  isExpanded: boolean\n  onToggle: () => void\n  children: ReactNode\n  /** Count badge beside the title. When 0 the section cannot expand (unless `expandWhenEmpty`). */\n  count?: number\n  /** The count badge is filled (a filter is active). */\n  hasActiveFilters?: boolean\n  expandWhenEmpty?: boolean\n  /** Class for the body wrapper. */\n  childrenClassName?: string\n  headerClassName?: string\n  className?: string\n  /** Trailing header content. */\n  rightContent?: ReactNode\n  /** When false the section is always open: no chevron, a plain header. */\n  collapsible?: boolean\n  /**\n   * When set, the whole header is one click target firing this (e.g. open a\n   * detail panel) and the chevron becomes its own separate toggle.\n   */\n  onHeaderClick?: () => void\n  labels?: Partial<CollapsibleSectionLabels>\n}\n\n/**\n * A section with a chevron toggle, title, optional count and body. The header\n * is a `role=\"button\"` div (not a native button) because `title`/`rightContent`\n * may hold interactive nodes such as tooltip triggers; a button inside a button\n * is invalid HTML.\n */\nexport function CollapsibleSection({\n  title,\n  icon,\n  isExpanded,\n  onToggle,\n  children,\n  count,\n  hasActiveFilters = false,\n  expandWhenEmpty = false,\n  childrenClassName,\n  headerClassName,\n  className,\n  rightContent,\n  collapsible = true,\n  onHeaderClick,\n  labels,\n}: CollapsibleSectionProps) {\n  const l = { ...DEFAULT_COLLAPSIBLE_SECTION_LABELS, ...labels }\n  const hasCount = count !== undefined\n  const shouldBeExpanded = !collapsible\n    ? true\n    : hasCount\n      ? count > 0\n        ? isExpanded\n        : expandWhenEmpty && isExpanded\n      : isExpanded\n  const hasContent = hasCount ? count > 0 || expandWhenEmpty : true\n\n  const chevron = (\n    <ChevronRight\n      className={cn('size-4 shrink-0 transition-transform', shouldBeExpanded && 'rotate-90')}\n    />\n  )\n  const titleBlock = (\n    <div className=\"flex min-w-0 items-center gap-2\">\n      {icon}\n      {typeof title === 'string'\n        ? title && <span className=\"whitespace-nowrap\">{title}</span>\n        : title}\n      {hasCount && (\n        <span\n          className={cn(\n            'ml-1 text-xs tabular-nums',\n            hasActiveFilters\n              ? 'rounded-full bg-primary px-1.5 font-medium text-primary-foreground'\n              : 'font-normal text-muted-foreground'\n          )}\n        >\n          {count}\n        </span>\n      )}\n    </div>\n  )\n\n  return (\n    <div className={cn('w-full', className)} data-slot=\"collapsible-section\">\n      {onHeaderClick ? (\n        <div\n          role=\"button\"\n          tabIndex={0}\n          onClick={onHeaderClick}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              e.preventDefault()\n              onHeaderClick()\n            }\n          }}\n          className={cn(\n            'mb-4 flex cursor-pointer items-center justify-between gap-2 font-semibold pointer-coarse:min-h-11 transition-colors hover:bg-muted/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n            headerClassName\n          )}\n          data-slot=\"collapsible-section-header\"\n        >\n          <div className=\"flex min-w-0 items-center gap-2 text-left\">\n            <button\n              type=\"button\"\n              aria-expanded={shouldBeExpanded}\n              aria-label={shouldBeExpanded ? l.collapseSection : l.expandSection}\n              disabled={!hasContent}\n              onClick={(e) => {\n                e.stopPropagation()\n                if (hasContent) onToggle()\n              }}\n              className=\"-ml-0.5 shrink-0 rounded-md p-0.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40 pointer-coarse:p-3.5\"\n            >\n              {chevron}\n            </button>\n            {titleBlock}\n          </div>\n          {rightContent && <div className=\"flex shrink-0 items-center\">{rightContent}</div>}\n        </div>\n      ) : !collapsible ? (\n        <div\n          className={cn('mb-4 flex items-center justify-between', headerClassName)}\n          data-slot=\"collapsible-section-header\"\n        >\n          <div className=\"flex min-w-0 items-center gap-2 text-left font-medium\">{titleBlock}</div>\n          {rightContent && <div className=\"flex shrink-0 items-center\">{rightContent}</div>}\n        </div>\n      ) : (\n        <div\n          className={cn('mb-4 flex items-center justify-between', headerClassName)}\n          data-slot=\"collapsible-section-header\"\n        >\n          <div\n            role=\"button\"\n            tabIndex={hasContent ? 0 : -1}\n            aria-expanded={shouldBeExpanded}\n            aria-disabled={!hasContent}\n            onClick={hasContent ? onToggle : undefined}\n            onKeyDown={\n              hasContent\n                ? (e) => {\n                    if (e.key === 'Enter' || e.key === ' ') {\n                      e.preventDefault()\n                      onToggle()\n                    }\n                  }\n                : undefined\n            }\n            className={cn(\n              'touch-hit flex min-w-0 items-center gap-2 rounded-md text-left font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n              hasContent\n                ? 'cursor-pointer hover:text-muted-foreground'\n                : 'cursor-default opacity-60'\n            )}\n          >\n            {chevron}\n            {titleBlock}\n          </div>\n          {rightContent && <div className=\"flex shrink-0 items-center\">{rightContent}</div>}\n        </div>\n      )}\n      {shouldBeExpanded && (\n        <div className={childrenClassName ?? 'mb-8 flex flex-wrap justify-start gap-6'}>\n          {children}\n        </div>\n      )}\n    </div>\n  )\n}\n"]}

package/dist/{chunk-USZ32EKR.js → chunk-VFZLZSJ3.js}

@@ -1,6 +1,6 @@
 "use client";
-import { useConnectedNativeDocxAdapter } from './chunk-HNGGKANF.js';
-import { NativeDocxComparison } from './chunk-PAKPD3LB.js';
+import { useConnectedNativeDocxAdapter } from './chunk-F6LC2CRB.js';
+import { NativeDocxComparison } from './chunk-JKJI5SRF.js';
 import { jsx } from 'react/jsx-runtime';
 
 function ConnectedNativeDocxComparison({
@@ -12,5 +12,5 @@ function ConnectedNativeDocxComparison({
 }
 
 export { ConnectedNativeDocxComparison };
-//# sourceMappingURL=chunk-USZ32EKR.js.map
-//# sourceMappingURL=chunk-USZ32EKR.js.map
+//# sourceMappingURL=chunk-VFZLZSJ3.js.map
+//# sourceMappingURL=chunk-VFZLZSJ3.js.map

package/dist/{chunk-USZ32EKR.js.map → chunk-VFZLZSJ3.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/connection/docx/ConnectedNativeDocxComparison.tsx"],"names":[],"mappings":";;;;AAOO,SAAS,6BAAA,CAA8B;AAAA,EAC5C,WAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAyF;AACvF,EAAA,MAAM,OAAA,GAAU,8BAA8B,WAAW,CAAA;AACzD,EAAA,2BAAQ,oBAAA,EAAA,EAAsB,GAAG,OAAO,OAAA,EAAkB,UAAA,EAAY,QAAQ,cAAA,EAAgB,CAAA;AAChG","file":"chunk-USZ32EKR.js","sourcesContent":["import {\n  NativeDocxComparison,\n  type NativeDocxComparisonProps,\n} from '../../docx/NativeDocxComparison'\nimport { useConnectedNativeDocxAdapter } from './ConnectedNativeDocxEditor'\n\n/** The Word redline of two documents or versions, on the signed-in session. */\nexport function ConnectedNativeDocxComparison({\n  fontBaseUrl,\n  ...props\n}: Omit<NativeDocxComparisonProps, 'adapter' | 'onCompared'> & { fontBaseUrl?: string }) {\n  const adapter = useConnectedNativeDocxAdapter(fontBaseUrl)\n  return <NativeDocxComparison {...props} adapter={adapter} onCompared={adapter.onVersionSaved} />\n}\n"]}
+{"version":3,"sources":["../src/connection/docx/ConnectedNativeDocxComparison.tsx"],"names":[],"mappings":";;;;AAOO,SAAS,6BAAA,CAA8B;AAAA,EAC5C,WAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAyF;AACvF,EAAA,MAAM,OAAA,GAAU,8BAA8B,WAAW,CAAA;AACzD,EAAA,2BAAQ,oBAAA,EAAA,EAAsB,GAAG,OAAO,OAAA,EAAkB,UAAA,EAAY,QAAQ,cAAA,EAAgB,CAAA;AAChG","file":"chunk-VFZLZSJ3.js","sourcesContent":["import {\n  NativeDocxComparison,\n  type NativeDocxComparisonProps,\n} from '../../docx/NativeDocxComparison'\nimport { useConnectedNativeDocxAdapter } from './ConnectedNativeDocxEditor'\n\n/** The Word redline of two documents or versions, on the signed-in session. */\nexport function ConnectedNativeDocxComparison({\n  fontBaseUrl,\n  ...props\n}: Omit<NativeDocxComparisonProps, 'adapter' | 'onCompared'> & { fontBaseUrl?: string }) {\n  const adapter = useConnectedNativeDocxAdapter(fontBaseUrl)\n  return <NativeDocxComparison {...props} adapter={adapter} onCompared={adapter.onVersionSaved} />\n}\n"]}

package/dist/{chunk-XRL4R2TT.js → chunk-WZ63HE2C.js}

@@ -1,7 +1,7 @@
 "use client";
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { GripVertical, ArrowDownFromLine, ArrowUpFromLine } from 'lucide-react';
+import { ChevronRight, GripVertical, ArrowDownFromLine, ArrowUpFromLine } from 'lucide-react';
 import { cn, Tooltip, TooltipTrigger, TooltipContent } from '@arbidocs/react/ui';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
@@ -203,7 +203,139 @@ function KeyValueRow({
     }
   );
 }
+var DEFAULT_COLLAPSIBLE_SECTION_LABELS = {
+  collapseSection: "Collapse section",
+  expandSection: "Expand section"
+};
+function CollapsibleSection({
+  title,
+  icon,
+  isExpanded,
+  onToggle,
+  children,
+  count,
+  hasActiveFilters = false,
+  expandWhenEmpty = false,
+  childrenClassName,
+  headerClassName,
+  className,
+  rightContent,
+  collapsible = true,
+  onHeaderClick,
+  labels
+}) {
+  const l = { ...DEFAULT_COLLAPSIBLE_SECTION_LABELS, ...labels };
+  const hasCount = count !== void 0;
+  const shouldBeExpanded = !collapsible ? true : hasCount ? count > 0 ? isExpanded : expandWhenEmpty && isExpanded : isExpanded;
+  const hasContent = hasCount ? count > 0 || expandWhenEmpty : true;
+  const chevron = /* @__PURE__ */ jsx(
+    ChevronRight,
+    {
+      className: cn("size-4 shrink-0 transition-transform", shouldBeExpanded && "rotate-90")
+    }
+  );
+  const titleBlock = /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+    icon,
+    typeof title === "string" ? title && /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap", children: title }) : title,
+    hasCount && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "ml-1 text-xs tabular-nums",
+          hasActiveFilters ? "rounded-full bg-primary px-1.5 font-medium text-primary-foreground" : "font-normal text-muted-foreground"
+        ),
+        children: count
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), "data-slot": "collapsible-section", children: [
+    onHeaderClick ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "button",
+        tabIndex: 0,
+        onClick: onHeaderClick,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onHeaderClick();
+          }
+        },
+        className: cn(
+          "mb-4 flex cursor-pointer items-center justify-between gap-2 font-semibold pointer-coarse:min-h-11 transition-colors hover:bg-muted/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          headerClassName
+        ),
+        "data-slot": "collapsible-section-header",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2 text-left", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-expanded": shouldBeExpanded,
+                "aria-label": shouldBeExpanded ? l.collapseSection : l.expandSection,
+                disabled: !hasContent,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  if (hasContent) onToggle();
+                },
+                className: "-ml-0.5 shrink-0 rounded-md p-0.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40 pointer-coarse:p-3.5",
+                children: chevron
+              }
+            ),
+            titleBlock
+          ] }),
+          rightContent && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center", children: rightContent })
+        ]
+      }
+    ) : !collapsible ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("mb-4 flex items-center justify-between", headerClassName),
+        "data-slot": "collapsible-section-header",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center gap-2 text-left font-medium", children: titleBlock }),
+          rightContent && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center", children: rightContent })
+        ]
+      }
+    ) : /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("mb-4 flex items-center justify-between", headerClassName),
+        "data-slot": "collapsible-section-header",
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "button",
+              tabIndex: hasContent ? 0 : -1,
+              "aria-expanded": shouldBeExpanded,
+              "aria-disabled": !hasContent,
+              onClick: hasContent ? onToggle : void 0,
+              onKeyDown: hasContent ? (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  onToggle();
+                }
+              } : void 0,
+              className: cn(
+                "touch-hit flex min-w-0 items-center gap-2 rounded-md text-left font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                hasContent ? "cursor-pointer hover:text-muted-foreground" : "cursor-default opacity-60"
+              ),
+              children: [
+                chevron,
+                titleBlock
+              ]
+            }
+          ),
+          rightContent && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center", children: rightContent })
+        ]
+      }
+    ),
+    shouldBeExpanded && /* @__PURE__ */ jsx("div", { className: childrenClassName ?? "mb-8 flex flex-wrap justify-start gap-6", children })
+  ] });
+}
 
-export { DEFAULT_KEY_VALUE_ROW_LABELS, KeyValueContainer, KeyValueRow };
-//# sourceMappingURL=chunk-XRL4R2TT.js.map
-//# sourceMappingURL=chunk-XRL4R2TT.js.map
+export { CollapsibleSection, DEFAULT_COLLAPSIBLE_SECTION_LABELS, DEFAULT_KEY_VALUE_ROW_LABELS, KeyValueContainer, KeyValueRow };
+//# sourceMappingURL=chunk-WZ63HE2C.js.map
+//# sourceMappingURL=chunk-WZ63HE2C.js.map

package/dist/chunk-WZ63HE2C.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/home/KeyValueRow.tsx","../src/home/CollapsibleSection.tsx"],"names":["jsx","cn","jsxs"],"mappings":"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","file":"chunk-WZ63HE2C.js","sourcesContent":["import type { ReactNode } from 'react'\nimport { useSortable } from '@dnd-kit/sortable'\nimport { CSS } from '@dnd-kit/utilities'\nimport { ArrowDownFromLine, ArrowUpFromLine, GripVertical } from 'lucide-react'\nimport { Tooltip, TooltipContent, TooltipTrigger, cn } from '@arbidocs/react/ui'\n\n/** Fixed strings of the row controls. */\nexport interface KeyValueRowLabels {\n  hideField: string\n  showField: string\n  dragToReorder: string\n}\n\nexport const DEFAULT_KEY_VALUE_ROW_LABELS: KeyValueRowLabels = {\n  hideField: 'Hide this field',\n  showField: 'Show this field',\n  dragToReorder: 'Drag to reorder',\n}\n\nexport interface KeyValueRowProps {\n  /** Label text; also the accessible name when `labelSlot` replaces it visually. */\n  label: string\n  /** Glyph before the label. */\n  icon?: ReactNode\n  /** Id of the control in the value: renders the label as a real `<label for>`. */\n  htmlFor?: string\n  /** Replaces the icon + label (e.g. a tag pill that is itself the label). */\n  labelSlot?: ReactNode\n  /** The value, on the right (or below the label when the container is narrow). */\n  children: ReactNode\n  className?: string\n  'data-testid'?: string\n  /** Enables drag reordering; requires a parent `DndContext` + `SortableContext`. */\n  sortableId?: string\n  /** Shows a \"hide this field\" control on the label line. */\n  onHide?: () => void\n  /** Shows a \"show this field\" control (for hidden rows, rendered dimmed). */\n  onShow?: () => void\n  labels?: Partial<KeyValueRowLabels>\n}\n\n/**\n * Wrap rows in this to switch on container-query responsiveness: a row stacks\n * its label above its value in a narrow container and goes side by side when\n * wider, by the container's width and not the viewport's.\n */\nexport function KeyValueContainer({\n  children,\n  className,\n}: {\n  children: ReactNode\n  className?: string\n}) {\n  return <div className={cn('@container', className)}>{children}</div>\n}\n\n/** Small square control, sized to sit on the label line (44px on touch). */\nfunction RowControlButton({\n  onClick,\n  label,\n  icon,\n}: {\n  onClick: () => void\n  label: string\n  icon: ReactNode\n}) {\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <button\n          type=\"button\"\n          onClick={onClick}\n          aria-label={label}\n          className=\"flex size-5 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring pointer-coarse:size-11\"\n        >\n          {icon}\n        </button>\n      </TooltipTrigger>\n      <TooltipContent side=\"top\">\n        <p>{label}</p>\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n\ninterface RowBodyProps {\n  grip: ReactNode\n  icon?: ReactNode\n  htmlFor?: string\n  labelSlot?: ReactNode\n  label: string\n  children: ReactNode\n  onHide?: () => void\n  onShow?: () => void\n  labels: KeyValueRowLabels\n}\n\n/**\n * The shared row body: a label line (grip + hide/show + icon/label) beside the\n * value. Controls sit on the label's line so they align with the label even\n * when the value is a tall multi-line field.\n */\nfunction RowBody({\n  grip,\n  icon,\n  htmlFor,\n  labelSlot,\n  label,\n  children,\n  onHide,\n  onShow,\n  labels,\n}: RowBodyProps) {\n  const LabelText = htmlFor ? 'label' : 'span'\n  return (\n    <div className=\"flex min-w-0 flex-1 flex-col gap-1 py-1.5 @[400px]:flex-row @[400px]:items-start @[400px]:gap-4\">\n      <div\n        className=\"flex w-full shrink-0 items-center gap-1 @[400px]:w-44 @[400px]:pt-2\"\n        data-slot=\"key-value-label\"\n      >\n        {grip}\n        {onHide && (\n          <RowControlButton\n            onClick={onHide}\n            label={labels.hideField}\n            icon={<ArrowDownFromLine className=\"size-3.5\" />}\n          />\n        )}\n        {onShow && (\n          <RowControlButton\n            onClick={onShow}\n            label={labels.showField}\n            icon={<ArrowUpFromLine className=\"size-3.5 text-primary\" />}\n          />\n        )}\n        {labelSlot ?? (\n          <span className=\"inline-flex min-w-0 items-center gap-1.5\">\n            {icon && (\n              <span className=\"inline-flex shrink-0 items-center justify-center text-muted-foreground/60\">\n                {icon}\n              </span>\n            )}\n            <LabelText\n              {...(htmlFor ? { htmlFor } : null)}\n              className=\"truncate text-sm font-medium text-muted-foreground\"\n            >\n              {label}\n            </LabelText>\n          </span>\n        )}\n      </div>\n      <div className=\"min-w-0 flex-1\" data-slot=\"key-value-value\">\n        {children}\n      </div>\n    </div>\n  )\n}\n\nconst ROW_CLASS =\n  'group flex items-start rounded-md pl-1 pr-1.5 transition-colors hover:bg-muted/50'\n\ntype SortableRowProps = Omit<KeyValueRowProps, 'data-testid' | 'labels'> & {\n  labels: KeyValueRowLabels\n  sortableId: string\n  testId?: string\n}\n\nfunction SortableKeyValueRow({\n  sortableId,\n  label,\n  icon,\n  htmlFor,\n  labelSlot,\n  children,\n  className,\n  testId,\n  onHide,\n  onShow,\n  labels,\n}: SortableRowProps) {\n  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({\n    id: sortableId,\n  })\n\n  const grip = (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <button\n          type=\"button\"\n          aria-label={labels.dragToReorder}\n          className=\"flex size-5 shrink-0 cursor-grab touch-none items-center justify-center rounded-md text-muted-foreground/60 transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring active:cursor-grabbing pointer-coarse:size-11\"\n          {...attributes}\n          {...listeners}\n        >\n          <GripVertical className=\"size-3.5\" />\n        </button>\n      </TooltipTrigger>\n      <TooltipContent side=\"top\">\n        <p>{labels.dragToReorder}</p>\n      </TooltipContent>\n    </Tooltip>\n  )\n\n  return (\n    <div\n      ref={setNodeRef}\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition,\n        opacity: isDragging ? 0 : 1,\n      }}\n      className={cn(ROW_CLASS, className)}\n      data-slot=\"key-value-row\"\n      data-testid={testId}\n    >\n      <RowBody\n        grip={grip}\n        icon={icon}\n        htmlFor={htmlFor}\n        labelSlot={labelSlot}\n        label={label}\n        onHide={onHide}\n        onShow={onShow}\n        labels={labels}\n      >\n        {children}\n      </RowBody>\n    </div>\n  )\n}\n\n/**\n * A label/value row for forms, settings and detail views. Optionally sortable\n * (drag handle) and hideable (hide/show controls), all visible without hover.\n */\nexport function KeyValueRow({\n  label,\n  icon,\n  htmlFor,\n  labelSlot,\n  children,\n  className,\n  'data-testid': testId,\n  sortableId,\n  onHide,\n  onShow,\n  labels,\n}: KeyValueRowProps) {\n  const mergedLabels = { ...DEFAULT_KEY_VALUE_ROW_LABELS, ...labels }\n  if (sortableId) {\n    return (\n      <SortableKeyValueRow\n        sortableId={sortableId}\n        label={label}\n        icon={icon}\n        htmlFor={htmlFor}\n        labelSlot={labelSlot}\n        className={className}\n        testId={testId}\n        onHide={onHide}\n        onShow={onShow}\n        labels={mergedLabels}\n      >\n        {children}\n      </SortableKeyValueRow>\n    )\n  }\n\n  return (\n    <div\n      className={cn(ROW_CLASS, onShow && 'opacity-60', className)}\n      data-slot=\"key-value-row\"\n      data-testid={testId}\n    >\n      <RowBody\n        grip={null}\n        icon={icon}\n        htmlFor={htmlFor}\n        labelSlot={labelSlot}\n        label={label}\n        onShow={onShow}\n        labels={mergedLabels}\n      >\n        {children}\n      </RowBody>\n    </div>\n  )\n}\n","import type { ReactNode } from 'react'\nimport { ChevronRight } from 'lucide-react'\nimport { cn } from '@arbidocs/react/ui'\n\n/** Fixed strings of the section header. */\nexport interface CollapsibleSectionLabels {\n  /** The chevron button's name (only with `onHeaderClick`). */\n  collapseSection: string\n  expandSection: string\n}\n\nexport const DEFAULT_COLLAPSIBLE_SECTION_LABELS: CollapsibleSectionLabels = {\n  collapseSection: 'Collapse section',\n  expandSection: 'Expand section',\n}\n\nexport interface CollapsibleSectionProps {\n  /** The section's heading. A node, so callers can add badges or tooltips. */\n  title: ReactNode\n  /** Leading glyph before the title. */\n  icon?: ReactNode\n  isExpanded: boolean\n  onToggle: () => void\n  children: ReactNode\n  /** Count badge beside the title. When 0 the section cannot expand (unless `expandWhenEmpty`). */\n  count?: number\n  /** The count badge is filled (a filter is active). */\n  hasActiveFilters?: boolean\n  expandWhenEmpty?: boolean\n  /** Class for the body wrapper. */\n  childrenClassName?: string\n  headerClassName?: string\n  className?: string\n  /** Trailing header content. */\n  rightContent?: ReactNode\n  /** When false the section is always open: no chevron, a plain header. */\n  collapsible?: boolean\n  /**\n   * When set, the whole header is one click target firing this (e.g. open a\n   * detail panel) and the chevron becomes its own separate toggle.\n   */\n  onHeaderClick?: () => void\n  labels?: Partial<CollapsibleSectionLabels>\n}\n\n/**\n * A section with a chevron toggle, title, optional count and body. The header\n * is a `role=\"button\"` div (not a native button) because `title`/`rightContent`\n * may hold interactive nodes such as tooltip triggers; a button inside a button\n * is invalid HTML.\n */\nexport function CollapsibleSection({\n  title,\n  icon,\n  isExpanded,\n  onToggle,\n  children,\n  count,\n  hasActiveFilters = false,\n  expandWhenEmpty = false,\n  childrenClassName,\n  headerClassName,\n  className,\n  rightContent,\n  collapsible = true,\n  onHeaderClick,\n  labels,\n}: CollapsibleSectionProps) {\n  const l = { ...DEFAULT_COLLAPSIBLE_SECTION_LABELS, ...labels }\n  const hasCount = count !== undefined\n  const shouldBeExpanded = !collapsible\n    ? true\n    : hasCount\n      ? count > 0\n        ? isExpanded\n        : expandWhenEmpty && isExpanded\n      : isExpanded\n  const hasContent = hasCount ? count > 0 || expandWhenEmpty : true\n\n  const chevron = (\n    <ChevronRight\n      className={cn('size-4 shrink-0 transition-transform', shouldBeExpanded && 'rotate-90')}\n    />\n  )\n  const titleBlock = (\n    <div className=\"flex min-w-0 items-center gap-2\">\n      {icon}\n      {typeof title === 'string'\n        ? title && <span className=\"whitespace-nowrap\">{title}</span>\n        : title}\n      {hasCount && (\n        <span\n          className={cn(\n            'ml-1 text-xs tabular-nums',\n            hasActiveFilters\n              ? 'rounded-full bg-primary px-1.5 font-medium text-primary-foreground'\n              : 'font-normal text-muted-foreground'\n          )}\n        >\n          {count}\n        </span>\n      )}\n    </div>\n  )\n\n  return (\n    <div className={cn('w-full', className)} data-slot=\"collapsible-section\">\n      {onHeaderClick ? (\n        <div\n          role=\"button\"\n          tabIndex={0}\n          onClick={onHeaderClick}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              e.preventDefault()\n              onHeaderClick()\n            }\n          }}\n          className={cn(\n            'mb-4 flex cursor-pointer items-center justify-between gap-2 font-semibold pointer-coarse:min-h-11 transition-colors hover:bg-muted/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n            headerClassName\n          )}\n          data-slot=\"collapsible-section-header\"\n        >\n          <div className=\"flex min-w-0 items-center gap-2 text-left\">\n            <button\n              type=\"button\"\n              aria-expanded={shouldBeExpanded}\n              aria-label={shouldBeExpanded ? l.collapseSection : l.expandSection}\n              disabled={!hasContent}\n              onClick={(e) => {\n                e.stopPropagation()\n                if (hasContent) onToggle()\n              }}\n              className=\"-ml-0.5 shrink-0 rounded-md p-0.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40 pointer-coarse:p-3.5\"\n            >\n              {chevron}\n            </button>\n            {titleBlock}\n          </div>\n          {rightContent && <div className=\"flex shrink-0 items-center\">{rightContent}</div>}\n        </div>\n      ) : !collapsible ? (\n        <div\n          className={cn('mb-4 flex items-center justify-between', headerClassName)}\n          data-slot=\"collapsible-section-header\"\n        >\n          <div className=\"flex min-w-0 items-center gap-2 text-left font-medium\">{titleBlock}</div>\n          {rightContent && <div className=\"flex shrink-0 items-center\">{rightContent}</div>}\n        </div>\n      ) : (\n        <div\n          className={cn('mb-4 flex items-center justify-between', headerClassName)}\n          data-slot=\"collapsible-section-header\"\n        >\n          <div\n            role=\"button\"\n            tabIndex={hasContent ? 0 : -1}\n            aria-expanded={shouldBeExpanded}\n            aria-disabled={!hasContent}\n            onClick={hasContent ? onToggle : undefined}\n            onKeyDown={\n              hasContent\n                ? (e) => {\n                    if (e.key === 'Enter' || e.key === ' ') {\n                      e.preventDefault()\n                      onToggle()\n                    }\n                  }\n                : undefined\n            }\n            className={cn(\n              'touch-hit flex min-w-0 items-center gap-2 rounded-md text-left font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n              hasContent\n                ? 'cursor-pointer hover:text-muted-foreground'\n                : 'cursor-default opacity-60'\n            )}\n          >\n            {chevron}\n            {titleBlock}\n          </div>\n          {rightContent && <div className=\"flex shrink-0 items-center\">{rightContent}</div>}\n        </div>\n      )}\n      {shouldBeExpanded && (\n        <div className={childrenClassName ?? 'mb-8 flex flex-wrap justify-start gap-6'}>\n          {children}\n        </div>\n      )}\n    </div>\n  )\n}\n"]}

package/dist/{chunk-F72ZD5Q2.cjs → chunk-YD3RN2FY.cjs}

@@ -6,8 +6,8 @@ var chunkVPPX5XUF_cjs = require('./chunk-VPPX5XUF.cjs');
 var chunkRC25WMVB_cjs = require('./chunk-RC25WMVB.cjs');
 var chunkV4ISCZJ7_cjs = require('./chunk-V4ISCZJ7.cjs');
 var chunk2EI7NCUA_cjs = require('./chunk-2EI7NCUA.cjs');
-var chunkMEMWZ72Y_cjs = require('./chunk-MEMWZ72Y.cjs');
 var chunkQUMUAJ2P_cjs = require('./chunk-QUMUAJ2P.cjs');
+var chunkMEMWZ72Y_cjs = require('./chunk-MEMWZ72Y.cjs');
 var chunkPPCATBOY_cjs = require('./chunk-PPCATBOY.cjs');
 var chunkMHVNT4J3_cjs = require('./chunk-MHVNT4J3.cjs');
 var lucideReact = require('lucide-react');
@@ -2033,5 +2033,5 @@ exports.withChunk = withChunk;
 exports.withDoc = withDoc;
 exports.withoutChunk = withoutChunk;
 exports.withoutDoc = withoutDoc;
-//# sourceMappingURL=chunk-F72ZD5Q2.cjs.map
-//# sourceMappingURL=chunk-F72ZD5Q2.cjs.map
+//# sourceMappingURL=chunk-YD3RN2FY.cjs.map
+//# sourceMappingURL=chunk-YD3RN2FY.cjs.map