@payloadcms/ui 3.70.0-canary.9 → 3.71.0-internal-debug.80dab4c

package/dist/elements/Collapsible/index.js

@@ -1,7 +1,5 @@
 'use client';
-
-import { c as _c } from "react/compiler-runtime";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import React, { useState } from 'react';
 import { ChevronIcon } from '../../icons/Chevron/index.js';
 import { DragHandleIcon } from '../../icons/DragHandle/index.js';
@@ -11,143 +9,155 @@ import { AnimateHeight } from '../AnimateHeight/index.js';
 import { CollapsibleProvider, useCollapsible } from './provider.js';
 const baseClass = 'collapsible';
 export { CollapsibleProvider, useCollapsible };
-export const Collapsible = t0 => {
-  const $ = _c(25);
-  const {
-    actions,
-    AfterCollapsible,
-    children,
-    className,
-    collapsibleStyle: t1,
-    disableHeaderToggle: t2,
-    disableToggleIndicator: t3,
-    dragHandleProps,
-    header,
-    initCollapsed,
-    isCollapsed: collapsedFromProps,
-    onToggle
-  } = t0;
-  const collapsibleStyle = t1 === undefined ? "default" : t1;
-  const disableHeaderToggle = t2 === undefined ? false : t2;
-  const disableToggleIndicator = t3 === undefined ? false : t3;
-  const [collapsedLocal, setCollapsedLocal] = useState(Boolean(initCollapsed));
-  const [hoveringToggle, setHoveringToggle] = useState(false);
-  const {
-    isWithinCollapsible
-  } = useCollapsible();
-  const {
-    t
-  } = useTranslation();
-  const isCollapsed = typeof collapsedFromProps === "boolean" ? collapsedFromProps : collapsedLocal;
-  let t4;
-  if ($[0] !== isCollapsed || $[1] !== onToggle) {
-    t4 = () => {
-      if (typeof onToggle === "function") {
-        onToggle(!isCollapsed);
-      }
-      setCollapsedLocal(!isCollapsed);
-    };
-    $[0] = isCollapsed;
-    $[1] = onToggle;
-    $[2] = t4;
-  } else {
-    t4 = $[2];
-  }
-  const toggleCollapsible = t4;
-  const t5 = dragHandleProps && `${baseClass}--has-drag-handle`;
-  const t6 = isCollapsed && `${baseClass}--collapsed`;
-  const t7 = isWithinCollapsible && `${baseClass}--nested`;
-  const t8 = hoveringToggle && !disableHeaderToggle && `${baseClass}--hovered`;
-  const t9 = `${baseClass}--style-${collapsibleStyle}`;
-  let t10;
-  if ($[3] !== className || $[4] !== t5 || $[5] !== t6 || $[6] !== t7 || $[7] !== t8 || $[8] !== t9) {
-    t10 = [baseClass, className, t5, t6, t7, t8, t9].filter(Boolean);
-    $[3] = className;
-    $[4] = t5;
-    $[5] = t6;
-    $[6] = t7;
-    $[7] = t8;
-    $[8] = t9;
-    $[9] = t10;
-  } else {
-    t10 = $[9];
-  }
-  const t11 = t10.join(" ");
-  const t12 = `${baseClass}__toggle-wrap${disableHeaderToggle ? " toggle-disabled" : ""}`;
-  let t13;
-  let t14;
-  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-    t13 = () => setHoveringToggle(true);
-    t14 = () => setHoveringToggle(false);
-    $[10] = t13;
-    $[11] = t14;
-  } else {
-    t13 = $[10];
-    t14 = $[11];
-  }
-  let t15;
-  if ($[12] !== AfterCollapsible || $[13] !== actions || $[14] !== children || $[15] !== disableHeaderToggle || $[16] !== disableToggleIndicator || $[17] !== dragHandleProps || $[18] !== header || $[19] !== isCollapsed || $[20] !== t || $[21] !== t11 || $[22] !== t12 || $[23] !== toggleCollapsible) {
-    t15 = _jsx("div", {
-      className: t11,
-      children: _jsxs(CollapsibleProvider, {
-        isCollapsed,
-        toggle: toggleCollapsible,
-        children: [_jsxs("div", {
-          className: t12,
-          onMouseEnter: t13,
-          onMouseLeave: t14,
-          children: [!disableHeaderToggle && _jsx("button", {
-            className: [`${baseClass}__toggle`, `${baseClass}__toggle--${isCollapsed ? "collapsed" : "open"}`].filter(Boolean).join(" "),
-            onClick: toggleCollapsible,
-            type: "button",
-            children: _jsx("span", {
-              children: t("fields:toggleBlock")
-            })
-          }), dragHandleProps && _jsx("div", {
-            className: `${baseClass}__drag`,
-            ...dragHandleProps.attributes,
-            ...dragHandleProps.listeners,
-            children: _jsx(DragHandleIcon, {})
-          }), header ? _jsx("div", {
-            className: [`${baseClass}__header-wrap`, dragHandleProps && `${baseClass}__header-wrap--has-drag-handle`].filter(Boolean).join(" "),
-            children: header
-          }) : null, _jsxs("div", {
-            className: `${baseClass}__actions-wrap`,
-            children: [actions ? _jsx("div", {
-              className: `${baseClass}__actions`,
-              children: actions
-            }) : null, !disableToggleIndicator && _jsx("div", {
-              className: `${baseClass}__indicator`,
-              children: _jsx(ChevronIcon, {
-                direction: !isCollapsed ? "up" : undefined
-              })
-            })]
-          })]
-        }), _jsx(AnimateHeight, {
-          height: isCollapsed ? 0 : "auto",
-          children: _jsx("div", {
-            className: `${baseClass}__content`,
-            children
-          })
-        }), AfterCollapsible]
-      })
-    });
-    $[12] = AfterCollapsible;
-    $[13] = actions;
-    $[14] = children;
-    $[15] = disableHeaderToggle;
-    $[16] = disableToggleIndicator;
-    $[17] = dragHandleProps;
-    $[18] = header;
-    $[19] = isCollapsed;
-    $[20] = t;
-    $[21] = t11;
-    $[22] = t12;
-    $[23] = toggleCollapsible;
-    $[24] = t15;
-  } else {
-    t15 = $[24];
-  }
-  return t15;
+/**
+   * Components that will be rendered within the collapsible provider but after the wrapper.
+   */ /**
+   * If set to true, clicking on the collapsible header will not toggle the collapsible state.
+   * This is useful if the collapsible state is controlled externally (e.g. from a parent component or custom button).
+   */ /**
+   * If set to true, the toggle indicator (chevron) on the right side of the header will be hidden.
+   */ export const Collapsible = ({ actions, AfterCollapsible, children, className, collapsibleStyle = 'default', disableHeaderToggle = false, disableToggleIndicator = false, dragHandleProps, header, initCollapsed, isCollapsed: collapsedFromProps, onToggle })=>{
+    const [collapsedLocal, setCollapsedLocal] = useState(Boolean(initCollapsed));
+    const [hoveringToggle, setHoveringToggle] = useState(false);
+    const { isWithinCollapsible } = useCollapsible();
+    const { t } = useTranslation();
+    const isCollapsed = typeof collapsedFromProps === 'boolean' ? collapsedFromProps : collapsedLocal;
+    const toggleCollapsible = React.useCallback(()=>{
+        if (typeof onToggle === 'function') {
+            void onToggle(!isCollapsed);
+        }
+        setCollapsedLocal(!isCollapsed);
+    }, [
+        onToggle,
+        isCollapsed
+    ]);
+    return /*#__PURE__*/ _jsxDEV("div", {
+        className: [
+            baseClass,
+            className,
+            dragHandleProps && `${baseClass}--has-drag-handle`,
+            isCollapsed && `${baseClass}--collapsed`,
+            isWithinCollapsible && `${baseClass}--nested`,
+            hoveringToggle && !disableHeaderToggle && `${baseClass}--hovered`,
+            `${baseClass}--style-${collapsibleStyle}`
+        ].filter(Boolean).join(' '),
+        children: /*#__PURE__*/ _jsxDEV(CollapsibleProvider, {
+            isCollapsed: isCollapsed,
+            toggle: toggleCollapsible,
+            children: [
+                /*#__PURE__*/ _jsxDEV("div", {
+                    className: `${baseClass}__toggle-wrap${disableHeaderToggle ? ' toggle-disabled' : ''}`,
+                    onMouseEnter: ()=>setHoveringToggle(true),
+                    onMouseLeave: ()=>setHoveringToggle(false),
+                    children: [
+                        !disableHeaderToggle && /*#__PURE__*/ _jsxDEV("button", {
+                            className: [
+                                `${baseClass}__toggle`,
+                                `${baseClass}__toggle--${isCollapsed ? 'collapsed' : 'open'}`
+                            ].filter(Boolean).join(' '),
+                            onClick: toggleCollapsible,
+                            type: "button",
+                            children: /*#__PURE__*/ _jsxDEV("span", {
+                                children: t('fields:toggleBlock')
+                            }, void 0, false, {
+                                fileName: "src/elements/Collapsible/index.tsx",
+                                lineNumber: 101,
+                                columnNumber: 15
+                            }, this)
+                        }, void 0, false, {
+                            fileName: "src/elements/Collapsible/index.tsx",
+                            lineNumber: 91,
+                            columnNumber: 13
+                        }, this),
+                        dragHandleProps && /*#__PURE__*/ _jsxDEV("div", {
+                            className: `${baseClass}__drag`,
+                            ...dragHandleProps.attributes,
+                            ...dragHandleProps.listeners,
+                            children: /*#__PURE__*/ _jsxDEV(DragHandleIcon, {}, void 0, false, {
+                                fileName: "src/elements/Collapsible/index.tsx",
+                                lineNumber: 111,
+                                columnNumber: 15
+                            }, this)
+                        }, void 0, false, {
+                            fileName: "src/elements/Collapsible/index.tsx",
+                            lineNumber: 106,
+                            columnNumber: 13
+                        }, this),
+                        header ? /*#__PURE__*/ _jsxDEV("div", {
+                            className: [
+                                `${baseClass}__header-wrap`,
+                                dragHandleProps && `${baseClass}__header-wrap--has-drag-handle`
+                            ].filter(Boolean).join(' '),
+                            children: header
+                        }, void 0, false, {
+                            fileName: "src/elements/Collapsible/index.tsx",
+                            lineNumber: 115,
+                            columnNumber: 13
+                        }, this) : null,
+                        /*#__PURE__*/ _jsxDEV("div", {
+                            className: `${baseClass}__actions-wrap`,
+                            children: [
+                                actions ? /*#__PURE__*/ _jsxDEV("div", {
+                                    className: `${baseClass}__actions`,
+                                    children: actions
+                                }, void 0, false, {
+                                    fileName: "src/elements/Collapsible/index.tsx",
+                                    lineNumber: 127,
+                                    columnNumber: 24
+                                }, this) : null,
+                                !disableToggleIndicator && /*#__PURE__*/ _jsxDEV("div", {
+                                    className: `${baseClass}__indicator`,
+                                    children: /*#__PURE__*/ _jsxDEV(ChevronIcon, {
+                                        direction: !isCollapsed ? 'up' : undefined
+                                    }, void 0, false, {
+                                        fileName: "src/elements/Collapsible/index.tsx",
+                                        lineNumber: 130,
+                                        columnNumber: 17
+                                    }, this)
+                                }, void 0, false, {
+                                    fileName: "src/elements/Collapsible/index.tsx",
+                                    lineNumber: 129,
+                                    columnNumber: 15
+                                }, this)
+                            ]
+                        }, void 0, true, {
+                            fileName: "src/elements/Collapsible/index.tsx",
+                            lineNumber: 126,
+                            columnNumber: 11
+                        }, this)
+                    ]
+                }, void 0, true, {
+                    fileName: "src/elements/Collapsible/index.tsx",
+                    lineNumber: 85,
+                    columnNumber: 9
+                }, this),
+                /*#__PURE__*/ _jsxDEV(AnimateHeight, {
+                    height: isCollapsed ? 0 : 'auto',
+                    children: /*#__PURE__*/ _jsxDEV("div", {
+                        className: `${baseClass}__content`,
+                        children: children
+                    }, void 0, false, {
+                        fileName: "src/elements/Collapsible/index.tsx",
+                        lineNumber: 136,
+                        columnNumber: 11
+                    }, this)
+                }, void 0, false, {
+                    fileName: "src/elements/Collapsible/index.tsx",
+                    lineNumber: 135,
+                    columnNumber: 9
+                }, this),
+                AfterCollapsible
+            ]
+        }, void 0, true, {
+            fileName: "src/elements/Collapsible/index.tsx",
+            lineNumber: 84,
+            columnNumber: 7
+        }, this)
+    }, void 0, false, {
+        fileName: "src/elements/Collapsible/index.tsx",
+        lineNumber: 71,
+        columnNumber: 5
+    }, this);
 };
+
 //# sourceMappingURL=index.js.map

package/dist/elements/Collapsible/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useState","ChevronIcon","DragHandleIcon","useTranslation","AnimateHeight","CollapsibleProvider","useCollapsible","baseClass","Collapsible","t0","$","actions","AfterCollapsible","children","className","collapsibleStyle","t1","disableHeaderToggle","t2","disableToggleIndicator","t3","dragHandleProps","header","initCollapsed","isCollapsed","collapsedFromProps","onToggle","undefined","collapsedLocal","setCollapsedLocal","Boolean","hoveringToggle","setHoveringToggle","isWithinCollapsible","t","t4","toggleCollapsible","t5","t6","t7","t8","t9","t10","filter","t11","join","t12","t13","t14","Symbol","for","t15","_jsx","_jsxs","toggle","onMouseEnter","onMouseLeave","onClick","type","attributes","listeners","direction","height"],"sources":["../../../src/elements/Collapsible/index.tsx"],"sourcesContent":["'use client'\nimport React, { useState } from 'react'\n\nimport type { DragHandleProps } from '../DraggableSortable/DraggableSortableItem/types.js'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { DragHandleIcon } from '../../icons/DragHandle/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\nimport { AnimateHeight } from '../AnimateHeight/index.js'\nimport { CollapsibleProvider, useCollapsible } from './provider.js'\n\nconst baseClass = 'collapsible'\n\nexport { CollapsibleProvider, useCollapsible }\n\nexport type CollapsibleProps = {\n  actions?: React.ReactNode\n  /**\n   * Components that will be rendered within the collapsible provider but after the wrapper.\n   */\n  AfterCollapsible?: React.ReactNode\n  children: React.ReactNode\n  className?: string\n  collapsibleStyle?: 'default' | 'error'\n  /**\n   * If set to true, clicking on the collapsible header will not toggle the collapsible state.\n   * This is useful if the collapsible state is controlled externally (e.g. from a parent component or custom button).\n   */\n  disableHeaderToggle?: boolean\n  /**\n   * If set to true, the toggle indicator (chevron) on the right side of the header will be hidden.\n   */\n  disableToggleIndicator?: boolean\n  dragHandleProps?: DragHandleProps\n  header?: React.ReactNode\n  initCollapsed?: boolean\n  isCollapsed?: boolean\n  onToggle?: (collapsed: boolean) => Promise<void> | void\n}\n\nexport const Collapsible: React.FC<CollapsibleProps> = ({\n  actions,\n  AfterCollapsible,\n  children,\n  className,\n  collapsibleStyle = 'default',\n  disableHeaderToggle = false,\n  disableToggleIndicator = false,\n  dragHandleProps,\n  header,\n  initCollapsed,\n  isCollapsed: collapsedFromProps,\n  onToggle,\n}) => {\n  const [collapsedLocal, setCollapsedLocal] = useState(Boolean(initCollapsed))\n  const [hoveringToggle, setHoveringToggle] = useState(false)\n  const { isWithinCollapsible } = useCollapsible()\n  const { t } = useTranslation()\n\n  const isCollapsed = typeof collapsedFromProps === 'boolean' ? collapsedFromProps : collapsedLocal\n\n  const toggleCollapsible = React.useCallback(() => {\n    if (typeof onToggle === 'function') {\n      void onToggle(!isCollapsed)\n    }\n    setCollapsedLocal(!isCollapsed)\n  }, [onToggle, isCollapsed])\n\n  return (\n    <div\n      className={[\n        baseClass,\n        className,\n        dragHandleProps && `${baseClass}--has-drag-handle`,\n        isCollapsed && `${baseClass}--collapsed`,\n        isWithinCollapsible && `${baseClass}--nested`,\n        hoveringToggle && !disableHeaderToggle && `${baseClass}--hovered`,\n        `${baseClass}--style-${collapsibleStyle}`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <CollapsibleProvider isCollapsed={isCollapsed} toggle={toggleCollapsible}>\n        <div\n          className={`${baseClass}__toggle-wrap${disableHeaderToggle ? ' toggle-disabled' : ''}`}\n          onMouseEnter={() => setHoveringToggle(true)}\n          onMouseLeave={() => setHoveringToggle(false)}\n        >\n          {!disableHeaderToggle && (\n            <button\n              className={[\n                `${baseClass}__toggle`,\n                `${baseClass}__toggle--${isCollapsed ? 'collapsed' : 'open'}`,\n              ]\n                .filter(Boolean)\n                .join(' ')}\n              onClick={toggleCollapsible}\n              type=\"button\"\n            >\n              <span>{t('fields:toggleBlock')}</span>\n            </button>\n          )}\n\n          {dragHandleProps && (\n            <div\n              className={`${baseClass}__drag`}\n              {...dragHandleProps.attributes}\n              {...dragHandleProps.listeners}\n            >\n              <DragHandleIcon />\n            </div>\n          )}\n          {header ? (\n            <div\n              className={[\n                `${baseClass}__header-wrap`,\n                dragHandleProps && `${baseClass}__header-wrap--has-drag-handle`,\n              ]\n                .filter(Boolean)\n                .join(' ')}\n            >\n              {header}\n            </div>\n          ) : null}\n          <div className={`${baseClass}__actions-wrap`}>\n            {actions ? <div className={`${baseClass}__actions`}>{actions}</div> : null}\n            {!disableToggleIndicator && (\n              <div className={`${baseClass}__indicator`}>\n                <ChevronIcon direction={!isCollapsed ? 'up' : undefined} />\n              </div>\n            )}\n          </div>\n        </div>\n        <AnimateHeight height={isCollapsed ? 0 : 'auto'}>\n          <div className={`${baseClass}__content`}>{children}</div>\n        </AnimateHeight>\n        {AfterCollapsible}\n      </CollapsibleProvider>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"sources":["../../../src/elements/Collapsible/index.tsx"],"sourcesContent":["'use client'\nimport React, { useState } from 'react'\n\nimport type { DragHandleProps } from '../DraggableSortable/DraggableSortableItem/types.js'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { DragHandleIcon } from '../../icons/DragHandle/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\nimport { AnimateHeight } from '../AnimateHeight/index.js'\nimport { CollapsibleProvider, useCollapsible } from './provider.js'\n\nconst baseClass = 'collapsible'\n\nexport { CollapsibleProvider, useCollapsible }\n\nexport type CollapsibleProps = {\n  actions?: React.ReactNode\n  /**\n   * Components that will be rendered within the collapsible provider but after the wrapper.\n   */\n  AfterCollapsible?: React.ReactNode\n  children: React.ReactNode\n  className?: string\n  collapsibleStyle?: 'default' | 'error'\n  /**\n   * If set to true, clicking on the collapsible header will not toggle the collapsible state.\n   * This is useful if the collapsible state is controlled externally (e.g. from a parent component or custom button).\n   */\n  disableHeaderToggle?: boolean\n  /**\n   * If set to true, the toggle indicator (chevron) on the right side of the header will be hidden.\n   */\n  disableToggleIndicator?: boolean\n  dragHandleProps?: DragHandleProps\n  header?: React.ReactNode\n  initCollapsed?: boolean\n  isCollapsed?: boolean\n  onToggle?: (collapsed: boolean) => Promise<void> | void\n}\n\nexport const Collapsible: React.FC<CollapsibleProps> = ({\n  actions,\n  AfterCollapsible,\n  children,\n  className,\n  collapsibleStyle = 'default',\n  disableHeaderToggle = false,\n  disableToggleIndicator = false,\n  dragHandleProps,\n  header,\n  initCollapsed,\n  isCollapsed: collapsedFromProps,\n  onToggle,\n}) => {\n  const [collapsedLocal, setCollapsedLocal] = useState(Boolean(initCollapsed))\n  const [hoveringToggle, setHoveringToggle] = useState(false)\n  const { isWithinCollapsible } = useCollapsible()\n  const { t } = useTranslation()\n\n  const isCollapsed = typeof collapsedFromProps === 'boolean' ? collapsedFromProps : collapsedLocal\n\n  const toggleCollapsible = React.useCallback(() => {\n    if (typeof onToggle === 'function') {\n      void onToggle(!isCollapsed)\n    }\n    setCollapsedLocal(!isCollapsed)\n  }, [onToggle, isCollapsed])\n\n  return (\n    <div\n      className={[\n        baseClass,\n        className,\n        dragHandleProps && `${baseClass}--has-drag-handle`,\n        isCollapsed && `${baseClass}--collapsed`,\n        isWithinCollapsible && `${baseClass}--nested`,\n        hoveringToggle && !disableHeaderToggle && `${baseClass}--hovered`,\n        `${baseClass}--style-${collapsibleStyle}`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <CollapsibleProvider isCollapsed={isCollapsed} toggle={toggleCollapsible}>\n        <div\n          className={`${baseClass}__toggle-wrap${disableHeaderToggle ? ' toggle-disabled' : ''}`}\n          onMouseEnter={() => setHoveringToggle(true)}\n          onMouseLeave={() => setHoveringToggle(false)}\n        >\n          {!disableHeaderToggle && (\n            <button\n              className={[\n                `${baseClass}__toggle`,\n                `${baseClass}__toggle--${isCollapsed ? 'collapsed' : 'open'}`,\n              ]\n                .filter(Boolean)\n                .join(' ')}\n              onClick={toggleCollapsible}\n              type=\"button\"\n            >\n              <span>{t('fields:toggleBlock')}</span>\n            </button>\n          )}\n\n          {dragHandleProps && (\n            <div\n              className={`${baseClass}__drag`}\n              {...dragHandleProps.attributes}\n              {...dragHandleProps.listeners}\n            >\n              <DragHandleIcon />\n            </div>\n          )}\n          {header ? (\n            <div\n              className={[\n                `${baseClass}__header-wrap`,\n                dragHandleProps && `${baseClass}__header-wrap--has-drag-handle`,\n              ]\n                .filter(Boolean)\n                .join(' ')}\n            >\n              {header}\n            </div>\n          ) : null}\n          <div className={`${baseClass}__actions-wrap`}>\n            {actions ? <div className={`${baseClass}__actions`}>{actions}</div> : null}\n            {!disableToggleIndicator && (\n              <div className={`${baseClass}__indicator`}>\n                <ChevronIcon direction={!isCollapsed ? 'up' : undefined} />\n              </div>\n            )}\n          </div>\n        </div>\n        <AnimateHeight height={isCollapsed ? 0 : 'auto'}>\n          <div className={`${baseClass}__content`}>{children}</div>\n        </AnimateHeight>\n        {AfterCollapsible}\n      </CollapsibleProvider>\n    </div>\n  )\n}\n"],"names":["React","useState","ChevronIcon","DragHandleIcon","useTranslation","AnimateHeight","CollapsibleProvider","useCollapsible","baseClass","Collapsible","actions","AfterCollapsible","children","className","collapsibleStyle","disableHeaderToggle","disableToggleIndicator","dragHandleProps","header","initCollapsed","isCollapsed","collapsedFromProps","onToggle","collapsedLocal","setCollapsedLocal","Boolean","hoveringToggle","setHoveringToggle","isWithinCollapsible","t","toggleCollapsible","useCallback","div","filter","join","toggle","onMouseEnter","onMouseLeave","button","onClick","type","span","attributes","listeners","direction","undefined","height"],"mappings":"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"}

package/dist/elements/Collapsible/provider.js

@@ -1,35 +1,37 @@
 'use client';
-
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import React, { createContext, use } from 'react';
-const Context = /*#__PURE__*/createContext({
-  isCollapsed: undefined,
-  isVisible: undefined,
-  isWithinCollapsible: undefined,
-  toggle: () => {}
+const Context = /*#__PURE__*/ createContext({
+    isCollapsed: undefined,
+    isVisible: undefined,
+    isWithinCollapsible: undefined,
+    toggle: ()=>{}
 });
-export const CollapsibleProvider = ({
-  children,
-  isCollapsed,
-  isWithinCollapsible = true,
-  toggle
-}) => {
-  const {
-    isCollapsed: parentIsCollapsed,
-    isVisible
-  } = useCollapsible();
-  const contextValue = React.useMemo(() => {
-    return {
-      isCollapsed,
-      isVisible: isVisible && !parentIsCollapsed,
-      isWithinCollapsible,
-      toggle
-    };
-  }, [isCollapsed, isWithinCollapsible, toggle, parentIsCollapsed, isVisible]);
-  return /*#__PURE__*/_jsx(Context, {
-    value: contextValue,
-    children: children
-  });
+export const CollapsibleProvider = ({ children, isCollapsed, isWithinCollapsible = true, toggle })=>{
+    const { isCollapsed: parentIsCollapsed, isVisible } = useCollapsible();
+    const contextValue = React.useMemo(()=>{
+        return {
+            isCollapsed,
+            isVisible: isVisible && !parentIsCollapsed,
+            isWithinCollapsible,
+            toggle
+        };
+    }, [
+        isCollapsed,
+        isWithinCollapsible,
+        toggle,
+        parentIsCollapsed,
+        isVisible
+    ]);
+    return /*#__PURE__*/ _jsxDEV(Context, {
+        value: contextValue,
+        children: children
+    }, void 0, false, {
+        fileName: "src/elements/Collapsible/provider.tsx",
+        lineNumber: 35,
+        columnNumber: 10
+    }, this);
 };
-export const useCollapsible = () => use(Context);
+export const useCollapsible = ()=>use(Context);
+
 //# sourceMappingURL=provider.js.map

package/dist/elements/Collapsible/provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"provider.js","names":["React","createContext","use","Context","isCollapsed","undefined","isVisible","isWithinCollapsible","toggle","CollapsibleProvider","children","parentIsCollapsed","useCollapsible","contextValue","useMemo","_jsx","value"],"sources":["../../../src/elements/Collapsible/provider.tsx"],"sourcesContent":["'use client'\nimport React, { createContext, use } from 'react'\n\ntype ContextType = {\n  isCollapsed: boolean\n  isVisible: boolean\n  isWithinCollapsible: boolean\n  toggle: () => void\n}\n\nconst Context = createContext({\n  isCollapsed: undefined,\n  isVisible: undefined,\n  isWithinCollapsible: undefined,\n  toggle: () => {},\n} as ContextType)\n\nexport const CollapsibleProvider: React.FC<{\n  children?: React.ReactNode\n  isCollapsed?: boolean\n  isWithinCollapsible?: boolean\n  toggle: () => void\n}> = ({ children, isCollapsed, isWithinCollapsible = true, toggle }) => {\n  const { isCollapsed: parentIsCollapsed, isVisible } = useCollapsible()\n\n  const contextValue = React.useMemo((): ContextType => {\n    return {\n      isCollapsed,\n      isVisible: isVisible && !parentIsCollapsed,\n      isWithinCollapsible,\n      toggle,\n    }\n  }, [isCollapsed, isWithinCollapsible, toggle, parentIsCollapsed, isVisible])\n\n  return <Context value={contextValue}>{children}</Context>\n}\n\nexport const useCollapsible = (): ContextType => use(Context)\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,IAASC,aAAa,EAAEC,GAAG,QAAQ;AAS1C,MAAMC,OAAA,gBAAUF,aAAA,CAAc;EAC5BG,WAAA,EAAaC,SAAA;EACbC,SAAA,EAAWD,SAAA;EACXE,mBAAA,EAAqBF,SAAA;EACrBG,MAAA,EAAQA,CAAA,MAAO;AACjB;AAEA,OAAO,MAAMC,mBAAA,GAKRA,CAAC;EAAEC,QAAQ;EAAEN,WAAW;EAAEG,mBAAA,GAAsB,IAAI;EAAEC;AAAM,CAAE;EACjE,MAAM;IAAEJ,WAAA,EAAaO,iBAAiB;IAAEL;EAAS,CAAE,GAAGM,cAAA;EAEtD,MAAMC,YAAA,GAAeb,KAAA,CAAMc,OAAO,CAAC;IACjC,OAAO;MACLV,WAAA;MACAE,SAAA,EAAWA,SAAA,IAAa,CAACK,iBAAA;MACzBJ,mBAAA;MACAC;IACF;EACF,GAAG,CAACJ,WAAA,EAAaG,mBAAA,EAAqBC,MAAA,EAAQG,iBAAA,EAAmBL,SAAA,CAAU;EAE3E,oBAAOS,IAAA,CAACZ,OAAA;IAAQa,KAAA,EAAOH,YAAA;cAAeH;;AACxC;AAEA,OAAO,MAAME,cAAA,GAAiBA,CAAA,KAAmBV,GAAA,CAAIC,OAAA","ignoreList":[]}
+{"version":3,"sources":["../../../src/elements/Collapsible/provider.tsx"],"sourcesContent":["'use client'\nimport React, { createContext, use } from 'react'\n\ntype ContextType = {\n  isCollapsed: boolean\n  isVisible: boolean\n  isWithinCollapsible: boolean\n  toggle: () => void\n}\n\nconst Context = createContext({\n  isCollapsed: undefined,\n  isVisible: undefined,\n  isWithinCollapsible: undefined,\n  toggle: () => {},\n} as ContextType)\n\nexport const CollapsibleProvider: React.FC<{\n  children?: React.ReactNode\n  isCollapsed?: boolean\n  isWithinCollapsible?: boolean\n  toggle: () => void\n}> = ({ children, isCollapsed, isWithinCollapsible = true, toggle }) => {\n  const { isCollapsed: parentIsCollapsed, isVisible } = useCollapsible()\n\n  const contextValue = React.useMemo((): ContextType => {\n    return {\n      isCollapsed,\n      isVisible: isVisible && !parentIsCollapsed,\n      isWithinCollapsible,\n      toggle,\n    }\n  }, [isCollapsed, isWithinCollapsible, toggle, parentIsCollapsed, isVisible])\n\n  return <Context value={contextValue}>{children}</Context>\n}\n\nexport const useCollapsible = (): ContextType => use(Context)\n"],"names":["React","createContext","use","Context","isCollapsed","undefined","isVisible","isWithinCollapsible","toggle","CollapsibleProvider","children","parentIsCollapsed","useCollapsible","contextValue","useMemo","value"],"mappings":"AAAA;;AACA,OAAOA,SAASC,aAAa,EAAEC,GAAG,QAAQ,QAAO;AASjD,MAAMC,wBAAUF,cAAc;IAC5BG,aAAaC;IACbC,WAAWD;IACXE,qBAAqBF;IACrBG,QAAQ,KAAO;AACjB;AAEA,OAAO,MAAMC,sBAKR,CAAC,EAAEC,QAAQ,EAAEN,WAAW,EAAEG,sBAAsB,IAAI,EAAEC,MAAM,EAAE;IACjE,MAAM,EAAEJ,aAAaO,iBAAiB,EAAEL,SAAS,EAAE,GAAGM;IAEtD,MAAMC,eAAeb,MAAMc,OAAO,CAAC;QACjC,OAAO;YACLV;YACAE,WAAWA,aAAa,CAACK;YACzBJ;YACAC;QACF;IACF,GAAG;QAACJ;QAAaG;QAAqBC;QAAQG;QAAmBL;KAAU;IAE3E,qBAAO,QAACH;QAAQY,OAAOF;kBAAeH;;;;;;AACxC,EAAC;AAED,OAAO,MAAME,iBAAiB,IAAmBV,IAAIC,SAAQ"}

package/dist/elements/ColumnSelector/index.js

@@ -1,63 +1,63 @@
 'use client';
-
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { fieldIsHiddenOrDisabled, fieldIsID } from 'payload/shared';
 import React, { useId, useMemo } from 'react';
 import { FieldLabel } from '../../fields/FieldLabel/index.js';
 import { useEditDepth } from '../../providers/EditDepth/index.js';
 import { useTableColumns } from '../../providers/TableColumns/index.js';
 import { PillSelector } from '../PillSelector/index.js';
-export const ColumnSelector = ({
-  collectionSlug
-}) => {
-  const {
-    columns,
-    moveColumn,
-    toggleColumn
-  } = useTableColumns();
-  const uuid = useId();
-  const editDepth = useEditDepth();
-  const filteredColumns = useMemo(() => columns?.filter(col => !(fieldIsHiddenOrDisabled(col.field) && !fieldIsID(col.field)) && !col?.field?.admin?.disableListColumn), [columns]);
-  const pills = useMemo(() => {
-    return filteredColumns ? filteredColumns.map((col_0, i) => {
-      const {
-        accessor,
-        active,
-        field
-      } = col_0;
-      const label = 'labelWithPrefix' in field && field.labelWithPrefix !== undefined ? field.labelWithPrefix : 'label' in field && field.label !== undefined ? field.label : 'name' in field && field.name !== undefined ? field.name : undefined;
-      return {
-        name: accessor,
-        key: `${collectionSlug}-${accessor}-${i}${editDepth ? `-${editDepth}-` : ''}${uuid}`,
-        Label: /*#__PURE__*/_jsx(FieldLabel, {
-          label: label,
-          unstyled: true
-        }),
-        selected: active
-      };
-    }) : null;
-  }, [collectionSlug, editDepth, filteredColumns, uuid]);
-  if (!pills) {
-    return null;
-  }
-  return /*#__PURE__*/_jsx(PillSelector, {
-    draggable: {
-      onDragEnd: ({
-        moveFromIndex,
-        moveToIndex
-      }) => {
-        void moveColumn({
-          fromIndex: moveFromIndex,
-          toIndex: moveToIndex
-        });
-      }
-    },
-    onClick: ({
-      pill
-    }) => {
-      void toggleColumn(pill.name);
-    },
-    pills: pills
-  });
+export const ColumnSelector = ({ collectionSlug })=>{
+    const { columns, moveColumn, toggleColumn } = useTableColumns();
+    const uuid = useId();
+    const editDepth = useEditDepth();
+    const filteredColumns = useMemo(()=>columns?.filter((col)=>!(fieldIsHiddenOrDisabled(col.field) && !fieldIsID(col.field)) && !col?.field?.admin?.disableListColumn), [
+        columns
+    ]);
+    const pills = useMemo(()=>{
+        return filteredColumns ? filteredColumns.map((col, i)=>{
+            const { accessor, active, field } = col;
+            const label = 'labelWithPrefix' in field && field.labelWithPrefix !== undefined ? field.labelWithPrefix : 'label' in field && field.label !== undefined ? field.label : 'name' in field && field.name !== undefined ? field.name : undefined;
+            return {
+                name: accessor,
+                key: `${collectionSlug}-${accessor}-${i}${editDepth ? `-${editDepth}-` : ''}${uuid}`,
+                Label: /*#__PURE__*/ _jsxDEV(FieldLabel, {
+                    label: label,
+                    unstyled: true
+                }, void 0, false, {
+                    fileName: "src/elements/ColumnSelector/index.tsx",
+                    lineNumber: 49,
+                    columnNumber: 20
+                }, this),
+                selected: active
+            };
+        }) : null;
+    }, [
+        collectionSlug,
+        editDepth,
+        filteredColumns,
+        uuid
+    ]);
+    if (!pills) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsxDEV(PillSelector, {
+        draggable: {
+            onDragEnd: ({ moveFromIndex, moveToIndex })=>{
+                void moveColumn({
+                    fromIndex: moveFromIndex,
+                    toIndex: moveToIndex
+                });
+            }
+        },
+        onClick: ({ pill })=>{
+            void toggleColumn(pill.name);
+        },
+        pills: pills
+    }, void 0, false, {
+        fileName: "src/elements/ColumnSelector/index.tsx",
+        lineNumber: 61,
+        columnNumber: 5
+    }, this);
 };
+
 //# sourceMappingURL=index.js.map

package/dist/elements/ColumnSelector/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["fieldIsHiddenOrDisabled","fieldIsID","React","useId","useMemo","FieldLabel","useEditDepth","useTableColumns","PillSelector","ColumnSelector","collectionSlug","columns","moveColumn","toggleColumn","uuid","editDepth","filteredColumns","filter","col","field","admin","disableListColumn","pills","map","i","accessor","active","label","labelWithPrefix","undefined","name","key","Label","_jsx","unstyled","selected","draggable","onDragEnd","moveFromIndex","moveToIndex","fromIndex","toIndex","onClick","pill"],"sources":["../../../src/elements/ColumnSelector/index.tsx"],"sourcesContent":["'use client'\nimport type { SanitizedCollectionConfig, StaticLabel } from 'payload'\n\nimport { fieldIsHiddenOrDisabled, fieldIsID } from 'payload/shared'\nimport React, { useId, useMemo } from 'react'\n\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { useTableColumns } from '../../providers/TableColumns/index.js'\nimport { PillSelector, type SelectablePill } from '../PillSelector/index.js'\n\nexport type Props = {\n  readonly collectionSlug: SanitizedCollectionConfig['slug']\n}\n\nexport const ColumnSelector: React.FC<Props> = ({ collectionSlug }) => {\n  const { columns, moveColumn, toggleColumn } = useTableColumns()\n\n  const uuid = useId()\n  const editDepth = useEditDepth()\n\n  const filteredColumns = useMemo(\n    () =>\n      columns?.filter(\n        (col) =>\n          !(fieldIsHiddenOrDisabled(col.field) && !fieldIsID(col.field)) &&\n          !col?.field?.admin?.disableListColumn,\n      ),\n    [columns],\n  )\n\n  const pills: SelectablePill[] = useMemo(() => {\n    return filteredColumns\n      ? filteredColumns.map((col, i) => {\n          const { accessor, active, field } = col\n\n          const label =\n            'labelWithPrefix' in field && field.labelWithPrefix !== undefined\n              ? field.labelWithPrefix\n              : 'label' in field && field.label !== undefined\n                ? field.label\n                : 'name' in field && field.name !== undefined\n                  ? field.name\n                  : undefined\n\n          return {\n            name: accessor,\n            key: `${collectionSlug}-${accessor}-${i}${editDepth ? `-${editDepth}-` : ''}${uuid}`,\n            Label: <FieldLabel label={label as StaticLabel} unstyled />,\n            selected: active,\n          } as SelectablePill\n        })\n      : null\n  }, [collectionSlug, editDepth, filteredColumns, uuid])\n\n  if (!pills) {\n    return null\n  }\n\n  return (\n    <PillSelector\n      draggable={{\n        onDragEnd: ({ moveFromIndex, moveToIndex }) => {\n          void moveColumn({\n            fromIndex: moveFromIndex,\n            toIndex: moveToIndex,\n          })\n        },\n      }}\n      onClick={({ pill }) => {\n        void toggleColumn(pill.name)\n      }}\n      pills={pills}\n    />\n  )\n}\n"],"mappings":"AAAA;;;AAGA,SAASA,uBAAuB,EAAEC,SAAS,QAAQ;AACnD,OAAOC,KAAA,IAASC,KAAK,EAAEC,OAAO,QAAQ;AAEtC,SAASC,UAAU,QAAQ;AAC3B,SAASC,YAAY,QAAQ;AAC7B,SAASC,eAAe,QAAQ;AAChC,SAASC,YAAY,QAA6B;AAMlD,OAAO,MAAMC,cAAA,GAAkCA,CAAC;EAAEC;AAAc,CAAE;EAChE,MAAM;IAAEC,OAAO;IAAEC,UAAU;IAAEC;EAAY,CAAE,GAAGN,eAAA;EAE9C,MAAMO,IAAA,GAAOX,KAAA;EACb,MAAMY,SAAA,GAAYT,YAAA;EAElB,MAAMU,eAAA,GAAkBZ,OAAA,CACtB,MACEO,OAAA,EAASM,MAAA,CACNC,GAAA,IACC,EAAElB,uBAAA,CAAwBkB,GAAA,CAAIC,KAAK,KAAK,CAAClB,SAAA,CAAUiB,GAAA,CAAIC,KAAK,MAC5D,CAACD,GAAA,EAAKC,KAAA,EAAOC,KAAA,EAAOC,iBAAA,GAE1B,CAACV,OAAA,CAAQ;EAGX,MAAMW,KAAA,GAA0BlB,OAAA,CAAQ;IACtC,OAAOY,eAAA,GACHA,eAAA,CAAgBO,GAAG,CAAC,CAACL,KAAA,EAAKM,CAAA;MACxB,MAAM;QAAEC,QAAQ;QAAEC,MAAM;QAAEP;MAAK,CAAE,GAAGD,KAAA;MAEpC,MAAMS,KAAA,GACJ,qBAAqBR,KAAA,IAASA,KAAA,CAAMS,eAAe,KAAKC,SAAA,GACpDV,KAAA,CAAMS,eAAe,GACrB,WAAWT,KAAA,IAASA,KAAA,CAAMQ,KAAK,KAAKE,SAAA,GAClCV,KAAA,CAAMQ,KAAK,GACX,UAAUR,KAAA,IAASA,KAAA,CAAMW,IAAI,KAAKD,SAAA,GAChCV,KAAA,CAAMW,IAAI,GACVD,SAAA;MAEV,OAAO;QACLC,IAAA,EAAML,QAAA;QACNM,GAAA,EAAK,GAAGrB,cAAA,IAAkBe,QAAA,IAAYD,CAAA,GAAIT,SAAA,GAAY,IAAIA,SAAA,GAAY,GAAG,KAAKD,IAAA,EAAM;QACpFkB,KAAA,eAAOC,IAAA,CAAC5B,UAAA;UAAWsB,KAAA,EAAOA,KAAA;UAAsBO,QAAQ;;QACxDC,QAAA,EAAUT;MACZ;IACF,KACA;EACN,GAAG,CAAChB,cAAA,EAAgBK,SAAA,EAAWC,eAAA,EAAiBF,IAAA,CAAK;EAErD,IAAI,CAACQ,KAAA,EAAO;IACV,OAAO;EACT;EAEA,oBACEW,IAAA,CAACzB,YAAA;IACC4B,SAAA,EAAW;MACTC,SAAA,EAAWA,CAAC;QAAEC,aAAa;QAAEC;MAAW,CAAE;QACxC,KAAK3B,UAAA,CAAW;UACd4B,SAAA,EAAWF,aAAA;UACXG,OAAA,EAASF;QACX;MACF;IACF;IACAG,OAAA,EAASA,CAAC;MAAEC;IAAI,CAAE;MAChB,KAAK9B,YAAA,CAAa8B,IAAA,CAAKb,IAAI;IAC7B;IACAR,KAAA,EAAOA;;AAGb","ignoreList":[]}
+{"version":3,"sources":["../../../src/elements/ColumnSelector/index.tsx"],"sourcesContent":["'use client'\nimport type { SanitizedCollectionConfig, StaticLabel } from 'payload'\n\nimport { fieldIsHiddenOrDisabled, fieldIsID } from 'payload/shared'\nimport React, { useId, useMemo } from 'react'\n\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { useTableColumns } from '../../providers/TableColumns/index.js'\nimport { PillSelector, type SelectablePill } from '../PillSelector/index.js'\n\nexport type Props = {\n  readonly collectionSlug: SanitizedCollectionConfig['slug']\n}\n\nexport const ColumnSelector: React.FC<Props> = ({ collectionSlug }) => {\n  const { columns, moveColumn, toggleColumn } = useTableColumns()\n\n  const uuid = useId()\n  const editDepth = useEditDepth()\n\n  const filteredColumns = useMemo(\n    () =>\n      columns?.filter(\n        (col) =>\n          !(fieldIsHiddenOrDisabled(col.field) && !fieldIsID(col.field)) &&\n          !col?.field?.admin?.disableListColumn,\n      ),\n    [columns],\n  )\n\n  const pills: SelectablePill[] = useMemo(() => {\n    return filteredColumns\n      ? filteredColumns.map((col, i) => {\n          const { accessor, active, field } = col\n\n          const label =\n            'labelWithPrefix' in field && field.labelWithPrefix !== undefined\n              ? field.labelWithPrefix\n              : 'label' in field && field.label !== undefined\n                ? field.label\n                : 'name' in field && field.name !== undefined\n                  ? field.name\n                  : undefined\n\n          return {\n            name: accessor,\n            key: `${collectionSlug}-${accessor}-${i}${editDepth ? `-${editDepth}-` : ''}${uuid}`,\n            Label: <FieldLabel label={label as StaticLabel} unstyled />,\n            selected: active,\n          } as SelectablePill\n        })\n      : null\n  }, [collectionSlug, editDepth, filteredColumns, uuid])\n\n  if (!pills) {\n    return null\n  }\n\n  return (\n    <PillSelector\n      draggable={{\n        onDragEnd: ({ moveFromIndex, moveToIndex }) => {\n          void moveColumn({\n            fromIndex: moveFromIndex,\n            toIndex: moveToIndex,\n          })\n        },\n      }}\n      onClick={({ pill }) => {\n        void toggleColumn(pill.name)\n      }}\n      pills={pills}\n    />\n  )\n}\n"],"names":["fieldIsHiddenOrDisabled","fieldIsID","React","useId","useMemo","FieldLabel","useEditDepth","useTableColumns","PillSelector","ColumnSelector","collectionSlug","columns","moveColumn","toggleColumn","uuid","editDepth","filteredColumns","filter","col","field","admin","disableListColumn","pills","map","i","accessor","active","label","labelWithPrefix","undefined","name","key","Label","unstyled","selected","draggable","onDragEnd","moveFromIndex","moveToIndex","fromIndex","toIndex","onClick","pill"],"mappings":"AAAA;;AAGA,SAASA,uBAAuB,EAAEC,SAAS,QAAQ,iBAAgB;AACnE,OAAOC,SAASC,KAAK,EAAEC,OAAO,QAAQ,QAAO;AAE7C,SAASC,UAAU,QAAQ,mCAAkC;AAC7D,SAASC,YAAY,QAAQ,qCAAoC;AACjE,SAASC,eAAe,QAAQ,wCAAuC;AACvE,SAASC,YAAY,QAA6B,2BAA0B;AAM5E,OAAO,MAAMC,iBAAkC,CAAC,EAAEC,cAAc,EAAE;IAChE,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAEC,YAAY,EAAE,GAAGN;IAE9C,MAAMO,OAAOX;IACb,MAAMY,YAAYT;IAElB,MAAMU,kBAAkBZ,QACtB,IACEO,SAASM,OACP,CAACC,MACC,CAAElB,CAAAA,wBAAwBkB,IAAIC,KAAK,KAAK,CAAClB,UAAUiB,IAAIC,KAAK,CAAA,KAC5D,CAACD,KAAKC,OAAOC,OAAOC,oBAE1B;QAACV;KAAQ;IAGX,MAAMW,QAA0BlB,QAAQ;QACtC,OAAOY,kBACHA,gBAAgBO,GAAG,CAAC,CAACL,KAAKM;YACxB,MAAM,EAAEC,QAAQ,EAAEC,MAAM,EAAEP,KAAK,EAAE,GAAGD;YAEpC,MAAMS,QACJ,qBAAqBR,SAASA,MAAMS,eAAe,KAAKC,YACpDV,MAAMS,eAAe,GACrB,WAAWT,SAASA,MAAMQ,KAAK,KAAKE,YAClCV,MAAMQ,KAAK,GACX,UAAUR,SAASA,MAAMW,IAAI,KAAKD,YAChCV,MAAMW,IAAI,GACVD;YAEV,OAAO;gBACLC,MAAML;gBACNM,KAAK,GAAGrB,eAAe,CAAC,EAAEe,SAAS,CAAC,EAAED,IAAIT,YAAY,CAAC,CAAC,EAAEA,UAAU,CAAC,CAAC,GAAG,KAAKD,MAAM;gBACpFkB,qBAAO,QAAC3B;oBAAWsB,OAAOA;oBAAsBM,QAAQ;;;;;;gBACxDC,UAAUR;YACZ;QACF,KACA;IACN,GAAG;QAAChB;QAAgBK;QAAWC;QAAiBF;KAAK;IAErD,IAAI,CAACQ,OAAO;QACV,OAAO;IACT;IAEA,qBACE,QAACd;QACC2B,WAAW;YACTC,WAAW,CAAC,EAAEC,aAAa,EAAEC,WAAW,EAAE;gBACxC,KAAK1B,WAAW;oBACd2B,WAAWF;oBACXG,SAASF;gBACX;YACF;QACF;QACAG,SAAS,CAAC,EAAEC,IAAI,EAAE;YAChB,KAAK7B,aAAa6B,KAAKZ,IAAI;QAC7B;QACAR,OAAOA;;;;;;AAGb,EAAC"}