@ruya.sa/ui 3.71.3

package/dist/elements/HTMLDiff/index.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { HtmlDiff } from './diff/index.js';
+import './index.scss';
+const baseClass = 'html-diff';
+export const getHTMLDiffComponents = ({
+  fromHTML,
+  toHTML,
+  tokenizeByCharacter
+}) => {
+  const diffHTML = new HtmlDiff(fromHTML, toHTML, {
+    tokenizeByCharacter
+  });
+  const [oldHTML, newHTML] = diffHTML.getSideBySideContents();
+  const From = oldHTML ? /*#__PURE__*/_jsx("div", {
+    className: `${baseClass}__diff-old html-diff`,
+    dangerouslySetInnerHTML: {
+      __html: oldHTML
+    }
+  }) : null;
+  const To = newHTML ? /*#__PURE__*/_jsx("div", {
+    className: `${baseClass}__diff-new html-diff`,
+    dangerouslySetInnerHTML: {
+      __html: newHTML
+    }
+  }) : null;
+  return {
+    From,
+    To
+  };
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","HtmlDiff","baseClass","getHTMLDiffComponents","fromHTML","toHTML","tokenizeByCharacter","diffHTML","oldHTML","newHTML","getSideBySideContents","From","_jsx","className","dangerouslySetInnerHTML","__html","To"],"sources":["../../../src/elements/HTMLDiff/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport { HtmlDiff } from './diff/index.js'\nimport './index.scss'\n\nconst baseClass = 'html-diff'\n\nexport const getHTMLDiffComponents = ({\n  fromHTML,\n  toHTML,\n  tokenizeByCharacter,\n}: {\n  fromHTML: string\n  toHTML: string\n  tokenizeByCharacter?: boolean\n}): {\n  From: React.ReactNode\n  To: React.ReactNode\n} => {\n  const diffHTML = new HtmlDiff(fromHTML, toHTML, {\n    tokenizeByCharacter,\n  })\n\n  const [oldHTML, newHTML] = diffHTML.getSideBySideContents()\n\n  const From = oldHTML ? (\n    <div\n      className={`${baseClass}__diff-old html-diff`}\n      dangerouslySetInnerHTML={{ __html: oldHTML }}\n    />\n  ) : null\n\n  const To = newHTML ? (\n    <div\n      className={`${baseClass}__diff-new html-diff`}\n      dangerouslySetInnerHTML={{ __html: newHTML }}\n    />\n  ) : null\n\n  return { From, To }\n}\n"],"mappings":";AAAA,OAAOA,KAAA,MAAW;AAElB,SAASC,QAAQ,QAAQ;AACzB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,qBAAA,GAAwBA,CAAC;EACpCC,QAAQ;EACRC,MAAM;EACNC;AAAmB,CAKpB;EAIC,MAAMC,QAAA,GAAW,IAAIN,QAAA,CAASG,QAAA,EAAUC,MAAA,EAAQ;IAC9CC;EACF;EAEA,MAAM,CAACE,OAAA,EAASC,OAAA,CAAQ,GAAGF,QAAA,CAASG,qBAAqB;EAEzD,MAAMC,IAAA,GAAOH,OAAA,gBACXI,IAAA,CAAC;IACCC,SAAA,EAAW,GAAGX,SAAA,sBAA+B;IAC7CY,uBAAA,EAAyB;MAAEC,MAAA,EAAQP;IAAQ;OAE3C;EAEJ,MAAMQ,EAAA,GAAKP,OAAA,gBACTG,IAAA,CAAC;IACCC,SAAA,EAAW,GAAGX,SAAA,sBAA+B;IAC7CY,uBAAA,EAAyB;MAAEC,MAAA,EAAQN;IAAQ;OAE3C;EAEJ,OAAO;IAAEE,IAAA;IAAMK;EAAG;AACpB","ignoreList":[]}

package/dist/elements/HTMLDiff/index.scss

@@ -0,0 +1,170 @@
+@import '../../scss/styles.scss';
+@import './colors.scss';
+
+@layer payload-default {
+  .html-diff {
+    font-size: base(0.7);
+    letter-spacing: 0.02em;
+
+    &-no-value {
+      color: var(--theme-elevation-400);
+    }
+
+    pre {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+
+    // Apply background color to parents that have children with diffs
+    p,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    blockquote,
+    pre,
+    h6 {
+      &:not([data-enable-match='false']) {
+        &:has([data-match-type='create']) {
+          position: relative;
+          z-index: 1;
+          &::before {
+            content: '';
+            position: absolute;
+            top: -(base(0.5));
+            bottom: -(base(0.5));
+            left: -10px;
+            right: -(base(0.5));
+            display: block;
+            background-color: var(--diff-create-parent-bg);
+            color: var(--diff-create-parent-color);
+            z-index: -1; /* Place behind the text */
+          }
+        }
+
+        &:has([data-match-type='delete']) {
+          position: relative;
+          z-index: 1;
+          &::before {
+            content: '';
+            position: absolute;
+            top: -(base(0.5));
+            bottom: -(base(0.5));
+            left: -(base(0.5));
+            right: -10px;
+            display: block;
+            background-color: var(--diff-delete-parent-bg);
+            color: var(--diff-delete-parent-color);
+            z-index: -1; /* Place behind the text */
+          }
+        }
+      }
+    }
+
+    li {
+      &:not([data-enable-match='false']) {
+        &:has([data-match-type='create']) {
+          position: relative;
+          z-index: 1;
+          &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: -10px;
+            right: -(base(0.5));
+            display: block;
+            background-color: var(--diff-create-parent-bg);
+            color: var(--diff-create-parent-color);
+            z-index: -1; /* Place behind the text */
+          }
+        }
+
+        &:has([data-match-type='delete']) {
+          position: relative;
+          z-index: 1;
+          &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: -(base(0.5));
+            right: -10px;
+            display: block;
+            background-color: var(--diff-delete-parent-bg);
+            color: var(--diff-delete-parent-color);
+            z-index: -1; /* Place behind the text */
+          }
+        }
+      }
+    }
+
+    li::marker {
+      color: var(--theme-text);
+    }
+
+    [data-match-type='delete']:not([data-enable-match='false']):not(
+        :is([data-enable-match='false'] *)
+      ) {
+      color: var(--diff-delete-pill-color);
+      text-decoration-color: var(--diff-delete-pill-color);
+      text-decoration-line: line-through;
+      background-color: var(--diff-delete-pill-bg);
+      border-radius: 4px;
+      text-decoration-thickness: 1px;
+    }
+
+    a[data-match-type='delete']
+      :not([data-enable-match='false'])
+      :not(:is([data-enable-match='false'] *)) {
+      color: var(--diff-delete-link-color);
+    }
+
+    // :not(img) required to increase specificity
+    a[data-match-type='create']:not(img)
+      :not([data-enable-match='false'])
+      :not(:is([data-enable-match='false'] *)) {
+      color: var(--diff-create-link-color);
+    }
+
+    [data-match-type='create']:not(img):not([data-enable-match='false']):not(
+        :is([data-enable-match='false'] *)
+      ) {
+      background-color: var(--diff-create-pill-bg);
+      color: var(--diff-create-pill-color);
+      border-radius: 4px;
+    }
+
+    .html-diff {
+      &-create-inline-wrapper,
+      &-delete-inline-wrapper {
+        display: inline-flex;
+      }
+
+      &-create-block-wrapper,
+      &-delete-block-wrapper {
+        display: flex;
+      }
+
+      &-create-inline-wrapper,
+      &-delete-inline-wrapper,
+      &-create-block-wrapper,
+      &-delete-block-wrapper {
+        position: relative;
+        align-items: center;
+        flex-direction: row;
+
+        &::after {
+          position: absolute;
+          top: 0;
+          left: 0;
+          display: block;
+          width: 100%;
+          height: 100%;
+          content: '';
+        }
+      }
+    }
+  }
+}

package/dist/elements/Hamburger/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import './index.scss';
+export declare const Hamburger: React.FC<{
+    readonly closeIcon?: 'collapse' | 'x';
+    readonly isActive?: boolean;
+}>;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/Hamburger/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Hamburger/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,QAAQ,CAAC,SAAS,CAAC,EAAE,UAAU,GAAG,GAAG,CAAA;IACrC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAC5B,CA2BA,CAAA"}

package/dist/elements/Hamburger/index.js

@@ -0,0 +1,50 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { ChevronIcon } from '../../icons/Chevron/index.js';
+import { CloseMenuIcon } from '../../icons/CloseMenu/index.js';
+import { MenuIcon } from '../../icons/Menu/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import './index.scss';
+const baseClass = 'hamburger';
+export const Hamburger = props => {
+  const $ = _c(4);
+  const {
+    t
+  } = useTranslation();
+  const {
+    closeIcon: t0,
+    isActive: t1
+  } = props;
+  const closeIcon = t0 === undefined ? "x" : t0;
+  const isActive = t1 === undefined ? false : t1;
+  let t2;
+  if ($[0] !== closeIcon || $[1] !== isActive || $[2] !== t) {
+    t2 = _jsxs("div", {
+      className: baseClass,
+      children: [!isActive && _jsx("div", {
+        "aria-label": t("general:open"),
+        className: `${baseClass}__open-icon`,
+        title: t("general:open"),
+        children: _jsx(MenuIcon, {})
+      }), isActive && _jsxs("div", {
+        "aria-label": closeIcon === "collapse" ? t("general:collapse") : t("general:close"),
+        className: `${baseClass}__close-icon`,
+        title: closeIcon === "collapse" ? t("general:collapse") : t("general:close"),
+        children: [closeIcon === "x" && _jsx(CloseMenuIcon, {}), closeIcon === "collapse" && _jsx(ChevronIcon, {
+          direction: "left"
+        })]
+      })]
+    });
+    $[0] = closeIcon;
+    $[1] = isActive;
+    $[2] = t;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  return t2;
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","ChevronIcon","CloseMenuIcon","MenuIcon","useTranslation","baseClass","Hamburger","props","$","t","closeIcon","t0","isActive","t1","undefined","t2","_jsxs","className","children","_jsx","title","direction"],"sources":["../../../src/elements/Hamburger/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { CloseMenuIcon } from '../../icons/CloseMenu/index.js'\nimport { MenuIcon } from '../../icons/Menu/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'hamburger'\n\nexport const Hamburger: React.FC<{\n  readonly closeIcon?: 'collapse' | 'x'\n  readonly isActive?: boolean\n}> = (props) => {\n  const { t } = useTranslation()\n  const { closeIcon = 'x', isActive = false } = props\n\n  return (\n    <div className={baseClass}>\n      {!isActive && (\n        <div\n          aria-label={t('general:open')}\n          className={`${baseClass}__open-icon`}\n          title={t('general:open')}\n        >\n          <MenuIcon />\n        </div>\n      )}\n      {isActive && (\n        <div\n          aria-label={closeIcon === 'collapse' ? t('general:collapse') : t('general:close')}\n          className={`${baseClass}__close-icon`}\n          title={closeIcon === 'collapse' ? t('general:collapse') : t('general:close')}\n        >\n          {closeIcon === 'x' && <CloseMenuIcon />}\n          {closeIcon === 'collapse' && <ChevronIcon direction=\"left\" />}\n        </div>\n      )}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,WAAW,QAAQ;AAC5B,SAASC,aAAa,QAAQ;AAC9B,SAASC,QAAQ,QAAQ;AACzB,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,SAAA,GAGRC,KAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EACH;IAAAU;EAAA,IAAcL,cAAA;EACd;IAAAM,SAAA,EAAAC,EAAA;IAAAC,QAAA,EAAAC;EAAA,IAA8CN,KAAA;EAAtC,MAAAG,SAAA,GAAAC,EAAe,KAAAG,SAAA,GAAH,GAAG,GAAfH,EAAe;EAAE,MAAAC,QAAA,GAAAC,EAAgB,KAAAC,SAAA,WAAhBD,EAAgB;EAAA,IAAAE,EAAA;EAAA,IAAAP,CAAA,QAAAE,SAAA,IAAAF,CAAA,QAAAI,QAAA,IAAAJ,CAAA,QAAAC,CAAA;IAGvCM,EAAA,GAAAC,KAAA,CAAC;MAAAC,SAAA,EAAAZ,SAAA;MAAAa,QAAA,GACE,CAACN,QAAA,IACAO,IAAA,CAAC;QAAA,cACaV,CAAA,CAAE;QAAAQ,SAAA,EACH,GAAAZ,SAAA,aAAyB;QAAAe,KAAA,EAC7BX,CAAA,CAAE;QAAAS,QAAA,EAETC,IAAA,CAAAhB,QAAA,IAAC;MAAA,C,GAGJS,QAAA,IACCI,KAAA,CAAC;QAAA,cACaN,SAAA,KAAc,aAAaD,CAAA,CAAE,sBAAsBA,CAAA,CAAE;QAAAQ,SAAA,EACtD,GAAAZ,SAAA,cAA0B;QAAAe,KAAA,EAC9BV,SAAA,KAAc,aAAaD,CAAA,CAAE,sBAAsBA,CAAA,CAAE;QAAAS,QAAA,GAE3DR,SAAA,KAAc,OAAOS,IAAA,CAAAjB,aAAA,IAAC,GACtBQ,SAAA,KAAc,cAAcS,IAAA,CAAAlB,WAAA;UAAAoB,SAAA,EAAuB;QAAA,C;;;;;;;;;;SAjB1DN,E;CAsBJ","ignoreList":[]}

package/dist/elements/Hamburger/index.scss

@@ -0,0 +1,46 @@
+@import '../../scss/styles';
+
+@layer payload-default {
+  .hamburger {
+    padding: 0;
+    border: 0;
+    cursor: pointer;
+    background-color: var(--theme-bg);
+    outline: none;
+    position: relative;
+    color: var(--theme-text);
+    box-shadow: 0px 0px 0px 1px var(--theme-elevation-150);
+    padding: base(0.1);
+    border-radius: 3px;
+    position: relative;
+    z-index: 1;
+    height: 100%;
+    width: 100%;
+    transition-property: box-shadow, background-color;
+    transition-duration: 100ms;
+    transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
+    --hamburger-size: var(--base);
+
+    &:hover {
+      background-color: var(--theme-elevation-100);
+      box-shadow: 0px 0px 0px 1px var(--theme-elevation-500);
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &::after {
+      z-index: -1;
+    }
+
+    &__open-icon,
+    &__close-icon {
+      width: var(--hamburger-size);
+      height: var(--hamburger-size);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}

package/dist/elements/HydrateAuthProvider/index.d.ts

@@ -0,0 +1,13 @@
+import type { SanitizedPermissions } from '@ruya.sa/payload';
+/**
+ * The Auth Provider wraps the entire app
+ * but each page has specific permissions
+ *
+ * i.e. access control on documents/fields on a document
+ */
+type Props = {
+    permissions: SanitizedPermissions;
+};
+export declare function HydrateAuthProvider({ permissions }: Props): any;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/HydrateAuthProvider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/HydrateAuthProvider/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAA;AAM5D;;;;;GAKG;AAEH,KAAK,KAAK,GAAG;IACX,WAAW,EAAE,oBAAoB,CAAA;CAClC,CAAA;AAED,wBAAgB,mBAAmB,CAAC,EAAE,WAAW,EAAE,EAAE,KAAK,OAQzD"}

package/dist/elements/HydrateAuthProvider/index.js

@@ -0,0 +1,32 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { useEffect } from 'react';
+import { useAuth } from '../../providers/Auth/index.js';
+export function HydrateAuthProvider(t0) {
+  const $ = _c(4);
+  const {
+    permissions
+  } = t0;
+  const {
+    setPermissions
+  } = useAuth();
+  let t1;
+  let t2;
+  if ($[0] !== permissions || $[1] !== setPermissions) {
+    t1 = () => {
+      setPermissions(permissions);
+    };
+    t2 = [permissions, setPermissions];
+    $[0] = permissions;
+    $[1] = setPermissions;
+    $[2] = t1;
+    $[3] = t2;
+  } else {
+    t1 = $[2];
+    t2 = $[3];
+  }
+  useEffect(t1, t2);
+  return null;
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","useEffect","useAuth","HydrateAuthProvider","t0","$","permissions","setPermissions","t1","t2"],"sources":["../../../src/elements/HydrateAuthProvider/index.tsx"],"sourcesContent":["'use client'\n\nimport type { SanitizedPermissions } from '@ruya.sa/payload'\n\nimport { useEffect } from 'react'\n\nimport { useAuth } from '../../providers/Auth/index.js'\n\n/**\n * The Auth Provider wraps the entire app\n * but each page has specific permissions\n *\n * i.e. access control on documents/fields on a document\n */\n\ntype Props = {\n  permissions: SanitizedPermissions\n}\n\nexport function HydrateAuthProvider({ permissions }: Props) {\n  const { setPermissions } = useAuth()\n\n  useEffect(() => {\n    setPermissions(permissions)\n  }, [permissions, setPermissions])\n\n  return null\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;AAIA,SAASC,SAAS,QAAQ;AAE1B,SAASC,OAAO,QAAQ;AAaxB,OAAO,SAAAC,oBAAAC,EAAA;EAAA,MAAAC,CAAA,GAAAL,EAAA;EAA6B;IAAAM;EAAA,IAAAF,EAAsB;EACxD;IAAAG;EAAA,IAA2BL,OAAA;EAAA,IAAAM,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAJ,CAAA,QAAAC,WAAA,IAAAD,CAAA,QAAAE,cAAA;IAEjBC,EAAA,GAAAA,CAAA;MACRD,cAAA,CAAeD,WAAA;IAAA;IACdG,EAAA,IAACH,WAAA,EAAaC,cAAA;IAAeF,CAAA,MAAAC,WAAA;IAAAD,CAAA,MAAAE,cAAA;IAAAF,CAAA,MAAAG,EAAA;IAAAH,CAAA,MAAAI,EAAA;EAAA;IAAAD,EAAA,GAAAH,CAAA;IAAAI,EAAA,GAAAJ,CAAA;EAAA;EAFhCJ,SAAA,CAAUO,EAEV,EAAGC,EAA6B;EAAA;AAAA","ignoreList":[]}

package/dist/elements/IDLabel/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import './index.scss';
+export declare const IDLabel: React.FC<{
+    className?: string;
+    id: string;
+    prefix?: string;
+}>;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/IDLabel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/IDLabel/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAUrB,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CA0BjF,CAAA"}

package/dist/elements/IDLabel/index.js

@@ -0,0 +1,71 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import './index.scss';
+import { Link } from '../../elements/Link/index.js';
+import { useConfig } from '../../providers/Config/index.js';
+import { useDocumentInfo } from '../../providers/DocumentInfo/index.js';
+import { formatAdminURL } from '../../utilities/formatAdminURL.js';
+import { sanitizeID } from '../../utilities/sanitizeID.js';
+import { useDrawerDepth } from '../Drawer/index.js';
+const baseClass = 'id-label';
+export const IDLabel = t0 => {
+  const $ = _c(9);
+  const {
+    id,
+    className,
+    prefix: t1
+  } = t0;
+  const prefix = t1 === undefined ? "ID:" : t1;
+  const {
+    config: t2
+  } = useConfig();
+  const {
+    routes: t3
+  } = t2;
+  const {
+    admin: adminRoute
+  } = t3;
+  const {
+    collectionSlug,
+    globalSlug
+  } = useDocumentInfo();
+  const drawerDepth = useDrawerDepth();
+  const t4 = `/${collectionSlug ? `collections/${collectionSlug}` : `globals/${globalSlug}`}/${id}`;
+  let t5;
+  if ($[0] !== adminRoute || $[1] !== className || $[2] !== drawerDepth || $[3] !== id || $[4] !== prefix || $[5] !== t4) {
+    const docPath = formatAdminURL({
+      adminRoute,
+      path: t4
+    });
+    let t6;
+    if ($[7] !== className) {
+      t6 = [baseClass, className].filter(Boolean);
+      $[7] = className;
+      $[8] = t6;
+    } else {
+      t6 = $[8];
+    }
+    t5 = _jsxs("div", {
+      className: t6.join(" "),
+      title: id,
+      children: [prefix, "\xA0", drawerDepth > 1 ? _jsx(Link, {
+        href: docPath,
+        children: sanitizeID(id)
+      }) : sanitizeID(id)]
+    });
+    $[0] = adminRoute;
+    $[1] = className;
+    $[2] = drawerDepth;
+    $[3] = id;
+    $[4] = prefix;
+    $[5] = t4;
+    $[6] = t5;
+  } else {
+    t5 = $[6];
+  }
+  return t5;
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","Link","useConfig","useDocumentInfo","formatAdminURL","sanitizeID","useDrawerDepth","baseClass","IDLabel","t0","$","id","className","prefix","t1","undefined","config","t2","routes","t3","admin","adminRoute","collectionSlug","globalSlug","drawerDepth","t4","t5","docPath","path","t6","filter","Boolean","_jsxs","join","title","children","_jsx","href"],"sources":["../../../src/elements/IDLabel/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.scss'\nimport { Link } from '../../elements/Link/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { formatAdminURL } from '../../utilities/formatAdminURL.js'\nimport { sanitizeID } from '../../utilities/sanitizeID.js'\nimport { useDrawerDepth } from '../Drawer/index.js'\n\nconst baseClass = 'id-label'\n\nexport const IDLabel: React.FC<{ className?: string; id: string; prefix?: string }> = ({\n  id,\n  className,\n  prefix = 'ID:',\n}) => {\n  const {\n    config: {\n      routes: { admin: adminRoute },\n    },\n  } = useConfig()\n\n  const { collectionSlug, globalSlug } = useDocumentInfo()\n  const drawerDepth = useDrawerDepth()\n\n  const docPath = formatAdminURL({\n    adminRoute,\n    path: `/${collectionSlug ? `collections/${collectionSlug}` : `globals/${globalSlug}`}/${id}`,\n  })\n\n  return (\n    <div className={[baseClass, className].filter(Boolean).join(' ')} title={id}>\n      {prefix}\n      &nbsp;\n      {drawerDepth > 1 ? <Link href={docPath}>{sanitizeID(id)}</Link> : sanitizeID(id)}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,OAAO;AACP,SAASC,IAAI,QAAQ;AACrB,SAASC,SAAS,QAAQ;AAC1B,SAASC,eAAe,QAAQ;AAChC,SAASC,cAAc,QAAQ;AAC/B,SAASC,UAAU,QAAQ;AAC3B,SAASC,cAAc,QAAQ;AAE/B,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,OAAA,GAAyEC,EAAA;EAAA,MAAAC,CAAA,GAAAX,EAAA;EAAC;IAAAY,EAAA;IAAAC,SAAA;IAAAC,MAAA,EAAAC;EAAA,IAAAL,EAItF;EADC,MAAAI,MAAA,GAAAC,EAAc,KAAAC,SAAA,GAAL,KAAK,GAAdD,EAAc;EAEd;IAAAE,MAAA,EAAAC;EAAA,IAIIf,SAAA;EAHM;IAAAgB,MAAA,EAAAC;EAAA,IAAAF,EAEP;EADS;IAAAG,KAAA,EAAAC;EAAA,IAAAF,EAAqB;EAIjC;IAAAG,cAAA;IAAAC;EAAA,IAAuCpB,eAAA;EACvC,MAAAqB,WAAA,GAAoBlB,cAAA;EAIZ,MAAAmB,EAAA,OAAIH,cAAA,GAAiB,eAAeA,cAAA,EAAgB,GAAG,WAAWC,UAAA,EAAY,IAAIZ,EAAA,EAAI;EAAA,IAAAe,EAAA;EAAA,IAAAhB,CAAA,QAAAW,UAAA,IAAAX,CAAA,QAAAE,SAAA,IAAAF,CAAA,QAAAc,WAAA,IAAAd,CAAA,QAAAC,EAAA,IAAAD,CAAA,QAAAG,MAAA,IAAAH,CAAA,QAAAe,EAAA;IAF9F,MAAAE,OAAA,GAAgBvB,cAAA;MAAAiB,UAAA;MAAAO,IAAA,EAERH;IAAsF,CAC9F;IAAA,IAAAI,EAAA;IAAA,IAAAnB,CAAA,QAAAE,SAAA;MAGkBiB,EAAA,IAAAtB,SAAA,EAAYK,SAAA,EAAAkB,MAAA,CAAAC,OAAkB;MAAArB,CAAA,MAAAE,SAAA;MAAAF,CAAA,MAAAmB,EAAA;IAAA;MAAAA,EAAA,GAAAnB,CAAA;IAAA;IAA9CgB,EAAA,GAAAM,KAAA,CAAC;MAAApB,SAAA,EAAeiB,EAA8B,CAAAI,IAAA,CAAc;MAAAC,KAAA,EAAavB,EAAA;MAAAwB,QAAA,GACtEtB,MAAA,EAAO,QAEPW,WAAA,IAAc,GAAIY,IAAA,CAAAnC,IAAA;QAAAoC,IAAA,EAAYV,OAAA;QAAAQ,QAAA,EAAU9B,UAAA,CAAWM,EAAA;MAAA,C,IAAcN,UAAA,CAAWM,EAAA;IAAA,C;;;;;;;;;;;SAH/Ee,E;CAMJ","ignoreList":[]}

package/dist/elements/IDLabel/index.scss

@@ -0,0 +1,15 @@
+@import '../../scss/styles';
+
+@layer payload-default {
+  .id-label {
+    font-size: base(0.8);
+    line-height: base(1.2);
+    font-weight: normal;
+    color: var(--theme-elevation-600);
+    background: var(--theme-elevation-100);
+    padding: base(0.2) base(0.4);
+    border-radius: $style-radius-m;
+    display: inline-flex;
+    width: fit-content;
+  }
+}

package/dist/elements/ItemsDrawer/ItemSearch/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import './index.scss';
+export type Props = {
+    readonly placeholder?: string;
+    readonly setSearchTerm: (term: string) => void;
+};
+export declare const ItemSearch: React.FC<Props>;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/ItemsDrawer/ItemSearch/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/ItemsDrawer/ItemSearch/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAgB,MAAM,OAAO,CAAA;AAGpC,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAA;IAC7B,QAAQ,CAAC,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;CAC/C,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAwBtC,CAAA"}

package/dist/elements/ItemsDrawer/ItemSearch/index.js

@@ -0,0 +1,56 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useId } from 'react';
+import { SearchIcon } from '../../../icons/Search/index.js';
+import './index.scss';
+const baseClass = 'item-search';
+export const ItemSearch = t0 => {
+  const $ = _c(7);
+  const {
+    placeholder,
+    setSearchTerm
+  } = t0;
+  const inputId = useId();
+  const labelId = `${inputId}-label`;
+  let t1;
+  if ($[0] !== setSearchTerm) {
+    t1 = e => {
+      setSearchTerm(e.target.value);
+    };
+    $[0] = setSearchTerm;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const handleChange = t1;
+  let t2;
+  if ($[2] !== handleChange || $[3] !== inputId || $[4] !== labelId || $[5] !== placeholder) {
+    t2 = _jsxs("div", {
+      className: baseClass,
+      children: [_jsx("label", {
+        className: "sr-only",
+        htmlFor: inputId,
+        id: labelId,
+        children: placeholder
+      }), _jsx("input", {
+        "aria-labelledby": labelId,
+        className: `${baseClass}__input`,
+        id: inputId,
+        onChange: handleChange,
+        placeholder,
+        type: "text"
+      }), _jsx(SearchIcon, {})]
+    });
+    $[2] = handleChange;
+    $[3] = inputId;
+    $[4] = labelId;
+    $[5] = placeholder;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/ItemsDrawer/ItemSearch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","useId","SearchIcon","baseClass","ItemSearch","t0","$","placeholder","setSearchTerm","inputId","labelId","t1","e","target","value","handleChange","t2","_jsxs","className","children","_jsx","htmlFor","id","onChange","type"],"sources":["../../../../src/elements/ItemsDrawer/ItemSearch/index.tsx"],"sourcesContent":["'use client'\nimport React, { useId } from 'react'\n\nimport { SearchIcon } from '../../../icons/Search/index.js'\nimport './index.scss'\n\nconst baseClass = 'item-search'\n\nexport type Props = {\n  readonly placeholder?: string\n  readonly setSearchTerm: (term: string) => void\n}\n\nexport const ItemSearch: React.FC<Props> = ({ placeholder, setSearchTerm }) => {\n  const inputId = useId()\n  const labelId = `${inputId}-label`\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    setSearchTerm(e.target.value)\n  }\n\n  return (\n    <div className={baseClass}>\n      <label className=\"sr-only\" htmlFor={inputId} id={labelId}>\n        {placeholder}\n      </label>\n      <input\n        aria-labelledby={labelId}\n        className={`${baseClass}__input`}\n        id={inputId}\n        onChange={handleChange}\n        placeholder={placeholder}\n        type=\"text\"\n      />\n      <SearchIcon />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,KAAK,QAAQ;AAE7B,SAASC,UAAU,QAAQ;AAC3B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAOlB,OAAO,MAAMC,UAAA,GAA8BC,EAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EAAC;IAAAQ,WAAA;IAAAC;EAAA,IAAAH,EAA8B;EACxE,MAAAI,OAAA,GAAgBR,KAAA;EAChB,MAAAS,OAAA,GAAgB,GAAGD,OAAA,QAAe;EAAA,IAAAE,EAAA;EAAA,IAAAL,CAAA,QAAAE,aAAA;IAEbG,EAAA,GAAAC,CAAA;MACnBJ,aAAA,CAAcI,CAAA,CAAAC,MAAA,CAAAC,KAAc;IAAA;IAC9BR,CAAA,MAAAE,aAAA;IAAAF,CAAA,MAAAK,EAAA;EAAA;IAAAA,EAAA,GAAAL,CAAA;EAAA;EAFA,MAAAS,YAAA,GAAqBJ,EAErB;EAAA,IAAAK,EAAA;EAAA,IAAAV,CAAA,QAAAS,YAAA,IAAAT,CAAA,QAAAG,OAAA,IAAAH,CAAA,QAAAI,OAAA,IAAAJ,CAAA,QAAAC,WAAA;IAGES,EAAA,GAAAC,KAAA,CAAC;MAAAC,SAAA,EAAAf,SAAA;MAAAgB,QAAA,GACCC,IAAA,CAAC;QAAAF,SAAA,EAAgB;QAAAG,OAAA,EAAmBZ,OAAA;QAAAa,EAAA,EAAaZ,OAAA;QAAAS,QAAA,EAC9CZ;MAAA,C,GAEHa,IAAA,CAAC;QAAA,mBACkBV,OAAA;QAAAQ,SAAA,EACN,GAAAf,SAAA,SAAqB;QAAAmB,EAAA,EAC5Bb,OAAA;QAAAc,QAAA,EACMR,YAAA;QAAAR,WAAA;QAAAiB,IAAA,EAEL;MAAA,C,GAEPJ,IAAA,CAAAlB,UAAA,IAAC;IAAA,C;;;;;;;;;SAZHc,E;CAeJ","ignoreList":[]}

package/dist/elements/ItemsDrawer/ItemSearch/index.scss

@@ -0,0 +1,38 @@
+@import '../../../scss/styles.scss';
+
+$icon-width: base(2);
+$icon-margin: base(0.25);
+
+@layer payload-default {
+  .item-search {
+    position: sticky;
+    top: 0;
+    display: flex;
+    width: 100%;
+    align-items: center;
+    z-index: 1;
+
+    &__input {
+      @include formInput;
+    }
+
+    .icon--search {
+      position: absolute;
+      top: 50%;
+      transform: translate3d(0, -50%, 0);
+      right: 0;
+      width: $icon-width;
+      margin: 0 $icon-margin;
+
+      .stroke {
+        stroke: var(--theme-elevation-300);
+      }
+    }
+
+    @include mid-break {
+      &__input {
+        margin-bottom: 0;
+      }
+    }
+  }
+}

package/dist/elements/ItemsDrawer/index.d.ts

@@ -0,0 +1,15 @@
+import type { ClientBlock, ClientWidget, Labels } from '@ruya.sa/payload';
+import React from 'react';
+import './index.scss';
+export type DrawerItem = ClientBlock | ClientWidget;
+export type ItemsDrawerProps = {
+    readonly addRowIndex?: number;
+    readonly drawerSlug: string;
+    readonly items: (DrawerItem | string)[];
+    readonly labels?: Labels;
+    readonly onItemClick: (item: DrawerItem, index?: number) => Promise<void> | void;
+    readonly searchPlaceholder?: string;
+    readonly title?: string;
+};
+export declare const ItemsDrawer: React.FC<ItemsDrawerProps>;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/ItemsDrawer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ItemsDrawer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAKzE,OAAO,KAAuC,MAAM,OAAO,CAAA;AAO3D,OAAO,cAAc,CAAA;AAGrB,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,YAAY,CAAA;AAEnD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAA;IAC7B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,KAAK,EAAE,CAAC,UAAU,GAAG,MAAM,CAAC,EAAE,CAAA;IACvC,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IAChF,QAAQ,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAA;IACnC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAmED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAmIlD,CAAA"}