@payloadcms/ui 3.0.0-beta.85 → 3.0.0-beta.86

package/dist/elements/Drawer/index.js

@@ -1,4 +1,6 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Modal, useModal } from '@faceless-ui/modal';
 import React, { useCallback, useEffect, useState } from 'react';
@@ -9,113 +11,225 @@ import { Gutter } from '../Gutter/index.js';
 import './index.scss';
 const baseClass = 'drawer';
 const zBase = 100;
-export const formatDrawerSlug = ({ slug, depth })=>`drawer_${depth}_${slug}`;
+export const formatDrawerSlug = ({
+  slug,
+  depth
+}) => `drawer_${depth}_${slug}`;
 export { useDrawerSlug } from './useDrawerSlug.js';
-export const DrawerToggler = ({ slug, children, className, disabled, onClick, ...rest })=>{
-    const { openModal } = useModal();
-    const handleClick = useCallback((e)=>{
-        openModal(slug);
-        if (typeof onClick === 'function') onClick(e);
-    }, [
-        openModal,
-        slug,
-        onClick
-    ]);
-    return /*#__PURE__*/ _jsx("button", {
-        className: className,
-        disabled: disabled,
-        onClick: handleClick,
-        type: "button",
-        ...rest,
-        children: children
+export const DrawerToggler = t0 => {
+  const $ = _c(17);
+  let slug;
+  let onClick;
+  let className;
+  let disabled;
+  let rest;
+  let children;
+  if ($[0] !== t0) {
+    ({
+      slug,
+      children,
+      className,
+      disabled,
+      onClick,
+      ...rest
+    } = t0);
+    $[0] = t0;
+    $[1] = slug;
+    $[2] = onClick;
+    $[3] = className;
+    $[4] = disabled;
+    $[5] = rest;
+    $[6] = children;
+  } else {
+    slug = $[1];
+    onClick = $[2];
+    className = $[3];
+    disabled = $[4];
+    rest = $[5];
+    children = $[6];
+  }
+  const {
+    openModal
+  } = useModal();
+  let t1;
+  if ($[7] !== openModal || $[8] !== slug || $[9] !== onClick) {
+    t1 = e => {
+      openModal(slug);
+      if (typeof onClick === "function") {
+        onClick(e);
+      }
+    };
+    $[7] = openModal;
+    $[8] = slug;
+    $[9] = onClick;
+    $[10] = t1;
+  } else {
+    t1 = $[10];
+  }
+  const handleClick = t1;
+  let t2;
+  if ($[11] !== className || $[12] !== disabled || $[13] !== handleClick || $[14] !== rest || $[15] !== children) {
+    t2 = _jsx("button", {
+      className,
+      disabled,
+      onClick: handleClick,
+      type: "button",
+      ...rest,
+      children
     });
+    $[11] = className;
+    $[12] = disabled;
+    $[13] = handleClick;
+    $[14] = rest;
+    $[15] = children;
+    $[16] = t2;
+  } else {
+    t2 = $[16];
+  }
+  return t2;
 };
-export const Drawer = ({ slug, Header, children, className, gutter = true, hoverTitle, title })=>{
-    const { t } = useTranslation();
-    const { closeModal, modalState } = useModal();
-    const drawerDepth = useEditDepth();
-    const [isOpen, setIsOpen] = useState(false);
-    const [animateIn, setAnimateIn] = useState(false);
-    useEffect(()=>{
-        setIsOpen(modalState[slug]?.isOpen);
-    }, [
+export const Drawer = t0 => {
+  const $ = _c(26);
+  const {
+    slug,
+    Header,
+    children,
+    className,
+    gutter: t1,
+    hoverTitle,
+    title
+  } = t0;
+  const gutter = t1 === undefined ? true : t1;
+  const {
+    t
+  } = useTranslation();
+  const {
+    closeModal,
+    modalState
+  } = useModal();
+  const drawerDepth = useEditDepth();
+  const [isOpen, setIsOpen] = useState(false);
+  const [animateIn, setAnimateIn] = useState(false);
+  let t2;
+  let t3;
+  if ($[0] !== modalState || $[1] !== slug) {
+    t2 = () => {
+      setIsOpen(modalState[slug]?.isOpen);
+    };
+    t3 = [slug, modalState];
+    $[0] = modalState;
+    $[1] = slug;
+    $[2] = t2;
+    $[3] = t3;
+  } else {
+    t2 = $[2];
+    t3 = $[3];
+  }
+  useEffect(t2, t3);
+  let t4;
+  let t5;
+  if ($[4] !== isOpen) {
+    t4 = () => {
+      setAnimateIn(isOpen);
+    };
+    t5 = [isOpen];
+    $[4] = isOpen;
+    $[5] = t4;
+    $[6] = t5;
+  } else {
+    t4 = $[5];
+    t5 = $[6];
+  }
+  useEffect(t4, t5);
+  if (isOpen) {
+    const t6 = animateIn && `${baseClass}--is-open`;
+    const t7 = drawerDepth > 1 && `${baseClass}--nested`;
+    let t8;
+    if ($[7] !== className || $[8] !== t6 || $[9] !== t7) {
+      t8 = [className, baseClass, t6, t7].filter(Boolean);
+      $[7] = className;
+      $[8] = t6;
+      $[9] = t7;
+      $[10] = t8;
+    } else {
+      t8 = $[10];
+    }
+    const t9 = t8.join(" ");
+    const t10 = zBase + drawerDepth;
+    let t11;
+    if ($[11] !== t10 || $[12] !== drawerDepth || $[13] !== t || $[14] !== slug || $[15] !== closeModal || $[16] !== Header || $[17] !== hoverTitle || $[18] !== title || $[19] !== children || $[20] !== gutter || $[21] !== t9) {
+      let t12;
+      if ($[23] !== closeModal || $[24] !== slug) {
+        t12 = () => closeModal(slug);
+        $[23] = closeModal;
+        $[24] = slug;
+        $[25] = t12;
+      } else {
+        t12 = $[25];
+      }
+      t11 = _jsxs(Modal, {
+        className: t9,
         slug,
-        modalState
-    ]);
-    useEffect(()=>{
-        setAnimateIn(isOpen);
-    }, [
-        isOpen
-    ]);
-    if (isOpen) {
-        // IMPORTANT: do not render the drawer until it is explicitly open, this is to avoid large html trees especially when nesting drawers
-        return /*#__PURE__*/ _jsxs(Modal, {
-            className: [
-                className,
-                baseClass,
-                animateIn && `${baseClass}--is-open`,
-                drawerDepth > 1 && `${baseClass}--nested`
-            ].filter(Boolean).join(' '),
-            slug: slug,
-            style: {
-                zIndex: zBase + drawerDepth
-            },
-            children: [
-                (!drawerDepth || drawerDepth === 1) && /*#__PURE__*/ _jsx("div", {
-                    className: `${baseClass}__blur-bg`
-                }),
-                /*#__PURE__*/ _jsx("button", {
-                    "aria-label": t('general:close'),
-                    className: `${baseClass}__close`,
-                    id: `close-drawer__${slug}`,
-                    onClick: ()=>closeModal(slug),
-                    type: "button"
-                }),
-                /*#__PURE__*/ _jsxs("div", {
-                    className: `${baseClass}__content`,
-                    style: {
-                        width: `calc(100% - (${drawerDepth} * var(--gutter-h))`
-                    },
-                    children: [
-                        /*#__PURE__*/ _jsx("div", {
-                            className: `${baseClass}__blur-bg-content`
-                        }),
-                        /*#__PURE__*/ _jsx(Gutter, {
-                            className: `${baseClass}__content-children`,
-                            left: gutter,
-                            right: gutter,
-                            children: /*#__PURE__*/ _jsxs(EditDepthContext.Provider, {
-                                value: drawerDepth + 1,
-                                children: [
-                                    Header,
-                                    Header === undefined && /*#__PURE__*/ _jsxs("div", {
-                                        className: `${baseClass}__header`,
-                                        children: [
-                                            /*#__PURE__*/ _jsx("h2", {
-                                                className: `${baseClass}__header__title`,
-                                                title: hoverTitle ? title : null,
-                                                children: title
-                                            }),
-                                            /*#__PURE__*/ _jsx("button", {
-                                                "aria-label": t('general:close'),
-                                                className: `${baseClass}__header__close`,
-                                                id: `close-drawer__${slug}`,
-                                                onClick: ()=>closeModal(slug),
-                                                type: "button",
-                                                children: /*#__PURE__*/ _jsx(XIcon, {})
-                                            })
-                                        ]
-                                    }),
-                                    children
-                                ]
-                            })
-                        })
-                    ]
-                })
-            ]
-        });
+        style: {
+          zIndex: t10
+        },
+        children: [(!drawerDepth || drawerDepth === 1) && _jsx("div", {
+          className: `${baseClass}__blur-bg`
+        }), _jsx("button", {
+          "aria-label": t("general:close"),
+          className: `${baseClass}__close`,
+          id: `close-drawer__${slug}`,
+          onClick: t12,
+          type: "button"
+        }), _jsxs("div", {
+          className: `${baseClass}__content`,
+          style: {
+            width: `calc(100% - (${drawerDepth} * var(--gutter-h))`
+          },
+          children: [_jsx("div", {
+            className: `${baseClass}__blur-bg-content`
+          }), _jsx(Gutter, {
+            className: `${baseClass}__content-children`,
+            left: gutter,
+            right: gutter,
+            children: _jsxs(EditDepthContext.Provider, {
+              value: drawerDepth + 1,
+              children: [Header, Header === undefined && _jsxs("div", {
+                className: `${baseClass}__header`,
+                children: [_jsx("h2", {
+                  className: `${baseClass}__header__title`,
+                  title: hoverTitle ? title : null,
+                  children: title
+                }), _jsx("button", {
+                  "aria-label": t("general:close"),
+                  className: `${baseClass}__header__close`,
+                  id: `close-drawer__${slug}`,
+                  onClick: () => closeModal(slug),
+                  type: "button",
+                  children: _jsx(XIcon, {})
+                })]
+              }), children]
+            })
+          })]
+        })]
+      });
+      $[11] = t10;
+      $[12] = drawerDepth;
+      $[13] = t;
+      $[14] = slug;
+      $[15] = closeModal;
+      $[16] = Header;
+      $[17] = hoverTitle;
+      $[18] = title;
+      $[19] = children;
+      $[20] = gutter;
+      $[21] = t9;
+      $[22] = t11;
+    } else {
+      t11 = $[22];
     }
-    return null;
+    return t11;
+  }
+  return null;
 };
-
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Drawer/index.tsx"],"sourcesContent":["'use client'\nimport { Modal, useModal } from '@faceless-ui/modal'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type { Props, TogglerProps } from './types.js'\n\nimport { XIcon } from '../../icons/X/index.js'\nimport { EditDepthContext, useEditDepth } from '../../providers/EditDepth/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Gutter } from '../Gutter/index.js'\nimport './index.scss'\n\nconst baseClass = 'drawer'\nconst zBase = 100\n\nexport const formatDrawerSlug = ({ slug, depth }: { depth: number; slug: string }): string =>\n  `drawer_${depth}_${slug}`\n\nexport { useDrawerSlug } from './useDrawerSlug.js'\n\nexport const DrawerToggler: React.FC<TogglerProps> = ({\n  slug,\n  children,\n  className,\n  disabled,\n  onClick,\n  ...rest\n}) => {\n  const { openModal } = useModal()\n\n  const handleClick = useCallback(\n    (e) => {\n      openModal(slug)\n      if (typeof onClick === 'function') onClick(e)\n    },\n    [openModal, slug, onClick],\n  )\n\n  return (\n    <button className={className} disabled={disabled} onClick={handleClick} type=\"button\" {...rest}>\n      {children}\n    </button>\n  )\n}\n\nexport const Drawer: React.FC<Props> = ({\n  slug,\n  Header,\n  children,\n  className,\n  gutter = true,\n  hoverTitle,\n  title,\n}) => {\n  const { t } = useTranslation()\n  const { closeModal, modalState } = useModal()\n  const drawerDepth = useEditDepth()\n\n  const [isOpen, setIsOpen] = useState(false)\n  const [animateIn, setAnimateIn] = useState(false)\n\n  useEffect(() => {\n    setIsOpen(modalState[slug]?.isOpen)\n  }, [slug, modalState])\n\n  useEffect(() => {\n    setAnimateIn(isOpen)\n  }, [isOpen])\n\n  if (isOpen) {\n    // IMPORTANT: do not render the drawer until it is explicitly open, this is to avoid large html trees especially when nesting drawers\n    return (\n      <Modal\n        className={[\n          className,\n          baseClass,\n          animateIn && `${baseClass}--is-open`,\n          drawerDepth > 1 && `${baseClass}--nested`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        slug={slug}\n        style={{\n          zIndex: zBase + drawerDepth,\n        }}\n      >\n        {(!drawerDepth || drawerDepth === 1) && <div className={`${baseClass}__blur-bg`} />}\n        <button\n          aria-label={t('general:close')}\n          className={`${baseClass}__close`}\n          id={`close-drawer__${slug}`}\n          onClick={() => closeModal(slug)}\n          type=\"button\"\n        />\n        <div\n          className={`${baseClass}__content`}\n          style={{\n            width: `calc(100% - (${drawerDepth} * var(--gutter-h))`,\n          }}\n        >\n          <div className={`${baseClass}__blur-bg-content`} />\n          <Gutter className={`${baseClass}__content-children`} left={gutter} right={gutter}>\n            <EditDepthContext.Provider value={drawerDepth + 1}>\n              {Header}\n              {Header === undefined && (\n                <div className={`${baseClass}__header`}>\n                  <h2 className={`${baseClass}__header__title`} title={hoverTitle ? title : null}>\n                    {title}\n                  </h2>\n                  {/* TODO: the `button` HTML element breaks CSS transitions on the drawer for some reason...\n                    i.e. changing to a `div` element will fix the animation issue but will break accessibility\n                  */}\n                  <button\n                    aria-label={t('general:close')}\n                    className={`${baseClass}__header__close`}\n                    id={`close-drawer__${slug}`}\n                    onClick={() => closeModal(slug)}\n                    type=\"button\"\n                  >\n                    <XIcon />\n                  </button>\n                </div>\n              )}\n              {children}\n            </EditDepthContext.Provider>\n          </Gutter>\n        </div>\n      </Modal>\n    )\n  }\n\n  return null\n}\n"],"names":["Modal","useModal","React","useCallback","useEffect","useState","XIcon","EditDepthContext","useEditDepth","useTranslation","Gutter","baseClass","zBase","formatDrawerSlug","slug","depth","useDrawerSlug","DrawerToggler","children","className","disabled","onClick","rest","openModal","handleClick","e","button","type","Drawer","Header","gutter","hoverTitle","title","t","closeModal","modalState","drawerDepth","isOpen","setIsOpen","animateIn","setAnimateIn","filter","Boolean","join","style","zIndex","div","aria-label","id","width","left","right","Provider","value","undefined","h2"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","Modal","useModal","React","useCallback","useEffect","useState","XIcon","EditDepthContext","useEditDepth","useTranslation","Gutter","baseClass","zBase","formatDrawerSlug","slug","depth","useDrawerSlug","DrawerToggler","t0","$","onClick","className","disabled","rest","children","openModal","t1","e","handleClick","t2","_jsx","type","Drawer","Header","gutter","hoverTitle","title","undefined","t","closeModal","modalState","drawerDepth","isOpen","setIsOpen","animateIn","setAnimateIn","t3","t4","t5","t6","t7","t8","filter","Boolean","t9","join","t10","t11","t12","_jsxs","style","zIndex","id","width","left","right","Provider","value"],"sources":["../../../src/elements/Drawer/index.tsx"],"sourcesContent":["'use client'\nimport { Modal, useModal } from '@faceless-ui/modal'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type { Props, TogglerProps } from './types.js'\n\nimport { XIcon } from '../../icons/X/index.js'\nimport { EditDepthContext, useEditDepth } from '../../providers/EditDepth/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Gutter } from '../Gutter/index.js'\nimport './index.scss'\n\nconst baseClass = 'drawer'\nconst zBase = 100\n\nexport const formatDrawerSlug = ({ slug, depth }: { depth: number; slug: string }): string =>\n  `drawer_${depth}_${slug}`\n\nexport { useDrawerSlug } from './useDrawerSlug.js'\n\nexport const DrawerToggler: React.FC<TogglerProps> = ({\n  slug,\n  children,\n  className,\n  disabled,\n  onClick,\n  ...rest\n}) => {\n  const { openModal } = useModal()\n\n  const handleClick = useCallback(\n    (e) => {\n      openModal(slug)\n      if (typeof onClick === 'function') onClick(e)\n    },\n    [openModal, slug, onClick],\n  )\n\n  return (\n    <button className={className} disabled={disabled} onClick={handleClick} type=\"button\" {...rest}>\n      {children}\n    </button>\n  )\n}\n\nexport const Drawer: React.FC<Props> = ({\n  slug,\n  Header,\n  children,\n  className,\n  gutter = true,\n  hoverTitle,\n  title,\n}) => {\n  const { t } = useTranslation()\n  const { closeModal, modalState } = useModal()\n  const drawerDepth = useEditDepth()\n\n  const [isOpen, setIsOpen] = useState(false)\n  const [animateIn, setAnimateIn] = useState(false)\n\n  useEffect(() => {\n    setIsOpen(modalState[slug]?.isOpen)\n  }, [slug, modalState])\n\n  useEffect(() => {\n    setAnimateIn(isOpen)\n  }, [isOpen])\n\n  if (isOpen) {\n    // IMPORTANT: do not render the drawer until it is explicitly open, this is to avoid large html trees especially when nesting drawers\n    return (\n      <Modal\n        className={[\n          className,\n          baseClass,\n          animateIn && `${baseClass}--is-open`,\n          drawerDepth > 1 && `${baseClass}--nested`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        slug={slug}\n        style={{\n          zIndex: zBase + drawerDepth,\n        }}\n      >\n        {(!drawerDepth || drawerDepth === 1) && <div className={`${baseClass}__blur-bg`} />}\n        <button\n          aria-label={t('general:close')}\n          className={`${baseClass}__close`}\n          id={`close-drawer__${slug}`}\n          onClick={() => closeModal(slug)}\n          type=\"button\"\n        />\n        <div\n          className={`${baseClass}__content`}\n          style={{\n            width: `calc(100% - (${drawerDepth} * var(--gutter-h))`,\n          }}\n        >\n          <div className={`${baseClass}__blur-bg-content`} />\n          <Gutter className={`${baseClass}__content-children`} left={gutter} right={gutter}>\n            <EditDepthContext.Provider value={drawerDepth + 1}>\n              {Header}\n              {Header === undefined && (\n                <div className={`${baseClass}__header`}>\n                  <h2 className={`${baseClass}__header__title`} title={hoverTitle ? title : null}>\n                    {title}\n                  </h2>\n                  {/* TODO: the `button` HTML element breaks CSS transitions on the drawer for some reason...\n                    i.e. changing to a `div` element will fix the animation issue but will break accessibility\n                  */}\n                  <button\n                    aria-label={t('general:close')}\n                    className={`${baseClass}__header__close`}\n                    id={`close-drawer__${slug}`}\n                    onClick={() => closeModal(slug)}\n                    type=\"button\"\n                  >\n                    <XIcon />\n                  </button>\n                </div>\n              )}\n              {children}\n            </EditDepthContext.Provider>\n          </Gutter>\n        </div>\n      </Modal>\n    )\n  }\n\n  return null\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,SAASC,KAAK,EAAEC,QAAQ,QAAQ;AAChC,OAAOC,KAAA,IAASC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ;AAIxD,SAASC,KAAK,QAAQ;AACtB,SAASC,gBAAgB,EAAEC,YAAY,QAAQ;AAC/C,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAClB,MAAMC,KAAA,GAAQ;AAEd,OAAO,MAAMC,gBAAA,GAAmBA,CAAC;EAAEC,IAAI;EAAEC;AAAK,CAAmC,KAC/E,UAAUA,KAAA,IAASD,IAAA,EAAM;AAE3B,SAASE,aAAa,QAAQ;AAE9B,OAAO,MAAMC,aAAA,GAAwCC,EAAA;EAAA,MAAAC,CAAA,GAAApB,EAAA;EAAA,IAAAe,IAAA;EAAA,IAAAM,OAAA;EAAA,IAAAC,SAAA;EAAA,IAAAC,QAAA;EAAA,IAAAC,IAAA;EAAA,IAAAC,QAAA;EAAA,IAAAL,CAAA,QAAAD,EAAA;IAAC;MAAAJ,IAAA;MAAAU,QAAA;MAAAH,SAAA;MAAAC,QAAA;MAAAF,OAAA;MAAA,GAAAG;IAAA,IAAAL,EAOrD;IAAAC,CAAA,MAAAD,EAAA;IAAAC,CAAA,MAAAL,IAAA;IAAAK,CAAA,MAAAC,OAAA;IAAAD,CAAA,MAAAE,SAAA;IAAAF,CAAA,MAAAG,QAAA;IAAAH,CAAA,MAAAI,IAAA;IAAAJ,CAAA,MAAAK,QAAA;EAAA;IAAAV,IAAA,GAAAK,CAAA;IAAAC,OAAA,GAAAD,CAAA;IAAAE,SAAA,GAAAF,CAAA;IAAAG,QAAA,GAAAH,CAAA;IAAAI,IAAA,GAAAJ,CAAA;IAAAK,QAAA,GAAAL,CAAA;EAAA;EACC;IAAAM;EAAA,IAAsBxB,QAAA;EAAA,IAAAyB,EAAA;EAAA,IAAAP,CAAA,QAAAM,SAAA,IAAAN,CAAA,QAAAL,IAAA,IAAAK,CAAA,QAAAC,OAAA;IAGpBM,EAAA,GAAAC,CAAA;MACEF,SAAA,CAAUX,IAAA;MAAA,IACN,OAAOM,OAAA,KAAY;QAAYA,OAAA,CAAQO,CAAA;MAAA;IAAA;IAC7CR,CAAA,MAAAM,SAAA;IAAAN,CAAA,MAAAL,IAAA;IAAAK,CAAA,MAAAC,OAAA;IAAAD,CAAA,OAAAO,EAAA;EAAA;IAAAA,EAAA,GAAAP,CAAA;EAAA;EAJF,MAAAS,WAAA,GAAoBF,EAKQ;EAAA,IAAAG,EAAA;EAAA,IAAAV,CAAA,SAAAE,SAAA,IAAAF,CAAA,SAAAG,QAAA,IAAAH,CAAA,SAAAS,WAAA,IAAAT,CAAA,SAAAI,IAAA,IAAAJ,CAAA,SAAAK,QAAA;IAI1BK,EAAA,GAAAC,IAAA,CAAC;MAAAT,SAAA;MAAAC,QAAA;MAAAF,OAAA,EAA0DQ,WAAA;MAAAG,IAAA,EAAkB;MAAA,GAAaR,IAAI;MAAAC;IAAA,C;;;;;;;;;;SAA9FK,E;CAIJ;AAEA,OAAO,MAAMG,MAAA,GAA0Bd,EAAA;EAAA,MAAAC,CAAA,GAAApB,EAAA;EAAC;IAAAe,IAAA;IAAAmB,MAAA;IAAAT,QAAA;IAAAH,SAAA;IAAAa,MAAA,EAAAR,EAAA;IAAAS,UAAA;IAAAC;EAAA,IAAAlB,EAQvC;EAHC,MAAAgB,MAAA,GAAAR,EAAa,KAAAW,SAAA,UAAbX,EAAa;EAIb;IAAAY;EAAA,IAAc7B,cAAA;EACd;IAAA8B,UAAA;IAAAC;EAAA,IAAmCvC,QAAA;EACnC,MAAAwC,WAAA,GAAoBjC,YAAA;EAEpB,OAAAkC,MAAA,EAAAC,SAAA,IAA4BtC,QAAA,MAAS;EACrC,OAAAuC,SAAA,EAAAC,YAAA,IAAkCxC,QAAA,MAAS;EAAA,IAAAwB,EAAA;EAAA,IAAAiB,EAAA;EAAA,IAAA3B,CAAA,QAAAqB,UAAA,IAAArB,CAAA,QAAAL,IAAA;IAEjCe,EAAA,GAAAA,CAAA;MACRc,SAAA,CAAUH,UAAU,CAAC1B,IAAA,GAAA4B,MAAO;IAAA;IAC3BI,EAAA,IAAChC,IAAA,EAAM0B,UAAA;IAAWrB,CAAA,MAAAqB,UAAA;IAAArB,CAAA,MAAAL,IAAA;IAAAK,CAAA,MAAAU,EAAA;IAAAV,CAAA,MAAA2B,EAAA;EAAA;IAAAjB,EAAA,GAAAV,CAAA;IAAA2B,EAAA,GAAA3B,CAAA;EAAA;EAFrBf,SAAA,CAAUyB,EAEV,EAAGiB,EAAkB;EAAA,IAAAC,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAA7B,CAAA,QAAAuB,MAAA;IAEXK,EAAA,GAAAA,CAAA;MACRF,YAAA,CAAaH,MAAA;IAAA;IACZM,EAAA,IAACN,MAAA;IAAOvB,CAAA,MAAAuB,MAAA;IAAAvB,CAAA,MAAA4B,EAAA;IAAA5B,CAAA,MAAA6B,EAAA;EAAA;IAAAD,EAAA,GAAA5B,CAAA;IAAA6B,EAAA,GAAA7B,CAAA;EAAA;EAFXf,SAAA,CAAU2C,EAEV,EAAGC,EAAQ;EAAA,IAEPN,MAAA;IAOI,MAAAO,EAAA,GAAAL,SAAA,IAAa,GAAAjC,SAAA,WAAuB;IACpC,MAAAuC,EAAA,GAAAT,WAAA,IAAc,IAAK,GAAA9B,SAAA,UAAsB;IAAA,IAAAwC,EAAA;IAAA,IAAAhC,CAAA,QAAAE,SAAA,IAAAF,CAAA,QAAA8B,EAAA,IAAA9B,CAAA,QAAA+B,EAAA;MAJhCC,EAAA,IACT9B,SAAA,EAAAV,SAAA,EAEAsC,EAAoC,EACpCC,EAAyC,EAAAE,MAAA,CAAAC,OAEjC;MAAAlC,CAAA,MAAAE,SAAA;MAAAF,CAAA,MAAA8B,EAAA;MAAA9B,CAAA,MAAA+B,EAAA;MAAA/B,CAAA,OAAAgC,EAAA;IAAA;MAAAA,EAAA,GAAAhC,CAAA;IAAA;IANC,MAAAmC,EAAA,GAAAH,EAMD,CAAAI,IAAA,CACF;IAGE,MAAAC,GAAA,GAAA5C,KAAA,GAAQ6B,WAAA;IAAA,IAAAgB,GAAA;IAAA,IAAAtC,CAAA,SAAAqC,GAAA,IAAArC,CAAA,SAAAsB,WAAA,IAAAtB,CAAA,SAAAmB,CAAA,IAAAnB,CAAA,SAAAL,IAAA,IAAAK,CAAA,SAAAoB,UAAA,IAAApB,CAAA,SAAAc,MAAA,IAAAd,CAAA,SAAAgB,UAAA,IAAAhB,CAAA,SAAAiB,KAAA,IAAAjB,CAAA,SAAAK,QAAA,IAAAL,CAAA,SAAAe,MAAA,IAAAf,CAAA,SAAAmC,EAAA;MAAA,IAAAI,GAAA;MAAA,IAAAvC,CAAA,SAAAoB,UAAA,IAAApB,CAAA,SAAAL,IAAA;QAQP4C,GAAA,GAAAA,CAAA,KAAMnB,UAAA,CAAWzB,IAAA;QAAAK,CAAA,OAAAoB,UAAA;QAAApB,CAAA,OAAAL,IAAA;QAAAK,CAAA,OAAAuC,GAAA;MAAA;QAAAA,GAAA,GAAAvC,CAAA;MAAA;MAnB9BsC,GAAA,GAAAE,KAAA,CAAA3D,KAAA;QAAAqB,SAAA,EACaiC,EAOH;QAAAxC,IAAA;QAAA8C,KAAA;UAAAC,MAAA,EAGEL;QAAQ;QAAAhC,QAAA,GAGhB,EAACiB,WAAA,IAAeA,WAAA,MAAgB,KAAMX,IAAA,CAAC;UAAAT,SAAA,EAAe,GAAAV,SAAA;QAAuB,C,GAC/EmB,IAAA,CAAC;UAAA,cACaQ,CAAA,CAAE;UAAAjB,SAAA,EACH,GAAAV,SAAA,SAAqB;UAAAmD,EAAA,EAC5B,iBAAiBhD,IAAA,EAAM;UAAAM,OAAA,EAClBsC,GAAiB;UAAA3B,IAAA,EACrB;QAAA,C,GAEP4B,KAAA,CAAC;UAAAtC,SAAA,EACY,GAAAV,SAAA,WAAuB;UAAAiD,KAAA;YAAAG,KAAA,EAEzB,gBAAgBtB,WAAA;UAAgC;UAAAjB,QAAA,GAGzDM,IAAA,CAAC;YAAAT,SAAA,EAAe,GAAAV,SAAA;UAA+B,C,GAC/CmB,IAAA,CAAApB,MAAA;YAAAW,SAAA,EAAmB,GAAAV,SAAA,oBAAgC;YAAAqD,IAAA,EAAQ9B,MAAA;YAAA+B,KAAA,EAAe/B,MAAA;YAAAV,QAAA,EACxEmC,KAAA,CAAApD,gBAAA,CAAA2D,QAAA;cAAAC,KAAA,EAAkC1B,WAAA,IAAc;cAAAjB,QAAA,GAC7CS,MAAA,EACAA,MAAA,KAAAI,SAAW,IACVsB,KAAA,CAAC;gBAAAtC,SAAA,EAAe,GAAAV,SAAA,UAAsB;gBAAAa,QAAA,GACpCM,IAAA,CAAC;kBAAAT,SAAA,EAAc,GAAAV,SAAA,iBAA6B;kBAAAyB,KAAA,EAASD,UAAA,GAAaC,KAAA,OAAQ;kBAAAZ,QAAA,EACvEY;gBAAA,C,GAKHN,IAAA,CAAC;kBAAA,cACaQ,CAAA,CAAE;kBAAAjB,SAAA,EACH,GAAAV,SAAA,iBAA6B;kBAAAmD,EAAA,EACpC,iBAAiBhD,IAAA,EAAM;kBAAAM,OAAA,EAAAA,CAAA,KACZmB,UAAA,CAAWzB,IAAA;kBAAAiB,IAAA,EACrB;kBAAAP,QAAA,EAELM,IAAA,CAAAxB,KAAA,IAAC;gBAAA,C;kBAINkB,QAAA;YAAA,C;;;;;;;;;;;;;;;;;;;WAnDTiC,G;;;CA4DN","ignoreList":[]}

package/dist/elements/Drawer/types.js

@@ -1,3 +1,2 @@
-export { };
-
+export {};
 //# sourceMappingURL=types.js.map

package/dist/elements/Drawer/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Drawer/types.ts"],"sourcesContent":["import type { HTMLAttributes } from 'react'\n\nexport type Props = {\n  readonly Header?: React.ReactNode\n  readonly children: React.ReactNode\n  readonly className?: string\n  readonly gutter?: boolean\n  readonly hoverTitle?: boolean\n  readonly slug: string\n  readonly title?: string\n}\n\nexport type TogglerProps = {\n  children: React.ReactNode\n  className?: string\n  disabled?: boolean\n  slug: string\n} & HTMLAttributes<HTMLButtonElement>\n"],"names":[],"mappings":"AAYA,WAKqC"}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/Drawer/types.ts"],"sourcesContent":["import type { HTMLAttributes } from 'react'\n\nexport type Props = {\n  readonly Header?: React.ReactNode\n  readonly children: React.ReactNode\n  readonly className?: string\n  readonly gutter?: boolean\n  readonly hoverTitle?: boolean\n  readonly slug: string\n  readonly title?: string\n}\n\nexport type TogglerProps = {\n  children: React.ReactNode\n  className?: string\n  disabled?: boolean\n  slug: string\n} & HTMLAttributes<HTMLButtonElement>\n"],"mappings":"AAYA","ignoreList":[]}

package/dist/elements/Drawer/useDrawerSlug.js

@@ -1,14 +1,26 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
 import { useId } from 'react';
 import { useEditDepth } from '../../providers/EditDepth/index.js';
 import { formatDrawerSlug } from './index.js';
-export const useDrawerSlug = (slug)=>{
-    const uuid = useId();
-    const editDepth = useEditDepth();
-    return formatDrawerSlug({
-        slug: `${slug}-${uuid}`,
-        depth: editDepth
+export const useDrawerSlug = slug => {
+  const $ = _c(3);
+  const uuid = useId();
+  const editDepth = useEditDepth();
+  const t0 = `${slug}-${uuid}`;
+  let t1;
+  if ($[0] !== t0 || $[1] !== editDepth) {
+    t1 = formatDrawerSlug({
+      slug: t0,
+      depth: editDepth
     });
+    $[0] = t0;
+    $[1] = editDepth;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
 };
-
 //# sourceMappingURL=useDrawerSlug.js.map

package/dist/elements/Drawer/useDrawerSlug.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Drawer/useDrawerSlug.tsx"],"sourcesContent":["'use client'\nimport { useId } from 'react'\n\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { formatDrawerSlug } from './index.js'\n\nexport const useDrawerSlug = (slug: string): string => {\n  const uuid = useId()\n  const editDepth = useEditDepth()\n  return formatDrawerSlug({\n    slug: `${slug}-${uuid}`,\n    depth: editDepth,\n  })\n}\n"],"names":["useId","useEditDepth","formatDrawerSlug","useDrawerSlug","slug","uuid","editDepth","depth"],"mappings":"AAAA;AACA,SAASA,KAAK,QAAQ,QAAO;AAE7B,SAASC,YAAY,QAAQ,qCAAoC;AACjE,SAASC,gBAAgB,QAAQ,aAAY;AAE7C,OAAO,MAAMC,gBAAgB,CAACC;IAC5B,MAAMC,OAAOL;IACb,MAAMM,YAAYL;IAClB,OAAOC,iBAAiB;QACtBE,MAAM,CAAC,EAAEA,KAAK,CAAC,EAAEC,KAAK,CAAC;QACvBE,OAAOD;IACT;AACF,EAAC"}
+{"version":3,"file":"useDrawerSlug.js","names":["c","_c","useId","useEditDepth","formatDrawerSlug","useDrawerSlug","slug","$","uuid","editDepth","t0","t1","depth"],"sources":["../../../src/elements/Drawer/useDrawerSlug.tsx"],"sourcesContent":["'use client'\nimport { useId } from 'react'\n\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { formatDrawerSlug } from './index.js'\n\nexport const useDrawerSlug = (slug: string): string => {\n  const uuid = useId()\n  const editDepth = useEditDepth()\n  return formatDrawerSlug({\n    slug: `${slug}-${uuid}`,\n    depth: editDepth,\n  })\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;AACA,SAASC,KAAK,QAAQ;AAEtB,SAASC,YAAY,QAAQ;AAC7B,SAASC,gBAAgB,QAAQ;AAEjC,OAAO,MAAMC,aAAA,GAAgBC,IAAA;EAAA,MAAAC,CAAA,GAAAN,EAAA;EAC3B,MAAAO,IAAA,GAAaN,KAAA;EACb,MAAAO,SAAA,GAAkBN,YAAA;EAEV,MAAAO,EAAA,MAAGJ,IAAA,IAAQE,IAAA,EAAM;EAAA,IAAAG,EAAA;EAAA,IAAAJ,CAAA,QAAAG,EAAA,IAAAH,CAAA,QAAAE,SAAA;IADlBE,EAAA,GAAAP,gBAAA;MAAAE,IAAA,EACCI,EAAiB;MAAAE,KAAA,EAChBH;IAAA,CACT;IAAAF,CAAA,MAAAG,EAAA;IAAAH,CAAA,MAAAE,SAAA;IAAAF,CAAA,MAAAI,EAAA;EAAA;IAAAA,EAAA,GAAAJ,CAAA;EAAA;EAAA,OAHOI,EAGP;AAAA,CACF","ignoreList":[]}