@payloadcms/ui 4.0.0-internal.d28e9fb → 4.0.0-internal.d7d662c

package/dist/elements/DocumentCard/index.js

@@ -0,0 +1,184 @@
+'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 { useRouter } from '../../providers/RouterAdapter/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { Link } from '../Link/index.js';
+import './index.css';
+const baseClass = 'document-card';
+/** Shared document-card presentation. Navigation and selection state remain controlled by callers. */
+export const DocumentCard = t0 => {
+  const $ = _c(32);
+  const {
+    children,
+    href,
+    isSelected: t1,
+    onSelect,
+    placeholder,
+    thumbnail,
+    title
+  } = t0;
+  const isSelected = t1 === undefined ? false : t1;
+  const router = useRouter();
+  const {
+    t
+  } = useTranslation();
+  const selectionStatusID = React.useId();
+  let t2;
+  if ($[0] !== onSelect) {
+    t2 = event => {
+      if (!onSelect || event.detail === 0) {
+        return;
+      }
+      event.preventDefault();
+      onSelect();
+    };
+    $[0] = onSelect;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const handleClick = t2;
+  let t3;
+  if ($[2] !== href || $[3] !== onSelect || $[4] !== router) {
+    t3 = event_0 => {
+      if (!onSelect || !href) {
+        return;
+      }
+      event_0.preventDefault();
+      router.push(href);
+    };
+    $[2] = href;
+    $[3] = onSelect;
+    $[4] = router;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  const handleDoubleClick = t3;
+  let t4;
+  if ($[6] !== onSelect) {
+    t4 = event_1 => {
+      if (event_1.target.closest("a")) {
+        return;
+      }
+      onSelect?.();
+    };
+    $[6] = onSelect;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  const handleCardClick = t4;
+  let t5;
+  if ($[8] !== href || $[9] !== onSelect || $[10] !== router) {
+    t5 = event_2 => {
+      if (!onSelect || !href || event_2.target.closest("a")) {
+        return;
+      }
+      event_2.preventDefault();
+      router.push(href);
+    };
+    $[8] = href;
+    $[9] = onSelect;
+    $[10] = router;
+    $[11] = t5;
+  } else {
+    t5 = $[11];
+  }
+  const handleCardDoubleClick = t5;
+  let t6;
+  if ($[12] !== onSelect) {
+    t6 = event_3 => {
+      if (!onSelect || event_3.target.closest("a") || event_3.key !== "Enter" && event_3.key !== " ") {
+        return;
+      }
+      event_3.preventDefault();
+      onSelect();
+    };
+    $[12] = onSelect;
+    $[13] = t6;
+  } else {
+    t6 = $[13];
+  }
+  const handleCardKeyDown = t6;
+  let t7;
+  if ($[14] !== children || $[15] !== handleCardClick || $[16] !== handleCardDoubleClick || $[17] !== handleCardKeyDown || $[18] !== handleClick || $[19] !== handleDoubleClick || $[20] !== href || $[21] !== isSelected || $[22] !== onSelect || $[23] !== placeholder || $[24] !== selectionStatusID || $[25] !== t || $[26] !== thumbnail || $[27] !== title) {
+    const cardInteractionProps = onSelect ? {
+      "aria-describedby": selectionStatusID,
+      "aria-label": title,
+      "aria-pressed": isSelected,
+      onClick: handleCardClick,
+      onDoubleClick: handleCardDoubleClick,
+      onKeyDown: handleCardKeyDown,
+      role: "button",
+      tabIndex: 0
+    } : {};
+    const t8 = !onSelect && href && `${baseClass}--link`;
+    const t9 = isSelected && `${baseClass}--selected`;
+    let t10;
+    if ($[29] !== t8 || $[30] !== t9) {
+      t10 = [baseClass, t8, t9].filter(Boolean);
+      $[29] = t8;
+      $[30] = t9;
+      $[31] = t10;
+    } else {
+      t10 = $[31];
+    }
+    t7 = _jsxs("div", {
+      ...cardInteractionProps,
+      className: t10.join(" "),
+      children: [thumbnail ? _jsx("img", {
+        alt: thumbnail.alt || "",
+        className: `${baseClass}__thumbnail`,
+        decoding: "async",
+        loading: thumbnail.loading,
+        src: thumbnail.src
+      }) : _jsx("div", {
+        "aria-hidden": "true",
+        className: `${baseClass}__thumbnail ${baseClass}__thumbnail--empty`,
+        children: placeholder
+      }), _jsxs("div", {
+        className: `${baseClass}__content`,
+        children: [href ? _jsx(Link, {
+          className: `${baseClass}__title`,
+          href,
+          onClick: onSelect ? handleClick : undefined,
+          onDoubleClick: onSelect ? handleDoubleClick : undefined,
+          children: title
+        }) : _jsx("span", {
+          className: `${baseClass}__title`,
+          children: title
+        }), children ? _jsx("div", {
+          className: `${baseClass}__metadata`,
+          children
+        }) : null]
+      }), onSelect ? _jsx("span", {
+        className: "document-card__selection-status sr-only",
+        id: selectionStatusID,
+        children: t(isSelected ? "general:selectedDocument" : "general:notSelectedDocument")
+      }) : null]
+    });
+    $[14] = children;
+    $[15] = handleCardClick;
+    $[16] = handleCardDoubleClick;
+    $[17] = handleCardKeyDown;
+    $[18] = handleClick;
+    $[19] = handleDoubleClick;
+    $[20] = href;
+    $[21] = isSelected;
+    $[22] = onSelect;
+    $[23] = placeholder;
+    $[24] = selectionStatusID;
+    $[25] = t;
+    $[26] = thumbnail;
+    $[27] = title;
+    $[28] = t7;
+  } else {
+    t7 = $[28];
+  }
+  return t7;
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","useRouter","useTranslation","Link","baseClass","DocumentCard","t0","$","children","href","isSelected","t1","onSelect","placeholder","thumbnail","title","undefined","router","t","selectionStatusID","useId","t2","event","detail","preventDefault","handleClick","t3","event_0","push","handleDoubleClick","t4","event_1","target","closest","handleCardClick","t5","event_2","handleCardDoubleClick","t6","event_3","key","handleCardKeyDown","t7","cardInteractionProps","onClick","onDoubleClick","onKeyDown","role","tabIndex","t8","t9","t10","filter","Boolean","_jsxs","className","join","_jsx","alt","decoding","loading","src","id"],"sources":["../../../src/elements/DocumentCard/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { useRouter } from '../../providers/RouterAdapter/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Link } from '../Link/index.js'\nimport './index.css'\n\nconst baseClass = 'document-card'\n\nexport type DocumentCardThumbnail = {\n  alt?: string\n  /** Use `lazy` for cards that may be hidden on load, so their image is only downloaded once shown. */\n  loading?: 'eager' | 'lazy'\n  src: string\n}\nexport type DocumentCardProps = {\n  readonly children?: React.ReactNode\n  readonly href?: null | string\n  readonly isSelected?: boolean\n  readonly onSelect?: () => void\n  readonly placeholder?: React.ReactNode\n  readonly thumbnail?: DocumentCardThumbnail\n  readonly title: string\n}\n\n/** Shared document-card presentation. Navigation and selection state remain controlled by callers. */\nexport const DocumentCard: React.FC<DocumentCardProps> = ({\n  children,\n  href,\n  isSelected = false,\n  onSelect,\n  placeholder,\n  thumbnail,\n  title,\n}) => {\n  const router = useRouter()\n  const { t } = useTranslation()\n  const selectionStatusID = React.useId()\n\n  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {\n    if (!onSelect || event.detail === 0) {\n      return\n    }\n\n    event.preventDefault()\n    onSelect()\n  }\n\n  const handleDoubleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {\n    if (!onSelect || !href) {\n      return\n    }\n\n    event.preventDefault()\n    void router.push(href)\n  }\n\n  const handleCardClick = (event: React.MouseEvent<HTMLElement>) => {\n    if ((event.target as HTMLElement).closest('a')) {\n      return\n    }\n\n    onSelect?.()\n  }\n\n  const handleCardDoubleClick = (event: React.MouseEvent<HTMLElement>) => {\n    if (!onSelect || !href || (event.target as HTMLElement).closest('a')) {\n      return\n    }\n\n    event.preventDefault()\n    void router.push(href)\n  }\n\n  const handleCardKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n    if (\n      !onSelect ||\n      (event.target as HTMLElement).closest('a') ||\n      (event.key !== 'Enter' && event.key !== ' ')\n    ) {\n      return\n    }\n\n    event.preventDefault()\n    onSelect()\n  }\n\n  const cardInteractionProps: React.HTMLAttributes<HTMLDivElement> = onSelect\n    ? {\n        'aria-describedby': selectionStatusID,\n        'aria-label': title,\n        'aria-pressed': isSelected,\n        onClick: handleCardClick,\n        onDoubleClick: handleCardDoubleClick,\n        onKeyDown: handleCardKeyDown,\n        role: 'button',\n        tabIndex: 0,\n      }\n    : {}\n\n  return (\n    <div\n      {...cardInteractionProps}\n      className={[\n        baseClass,\n        !onSelect && href && `${baseClass}--link`,\n        isSelected && `${baseClass}--selected`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {thumbnail ? (\n        <img\n          alt={thumbnail.alt || ''}\n          className={`${baseClass}__thumbnail`}\n          decoding=\"async\"\n          loading={thumbnail.loading}\n          src={thumbnail.src}\n        />\n      ) : (\n        <div\n          aria-hidden=\"true\"\n          className={`${baseClass}__thumbnail ${baseClass}__thumbnail--empty`}\n        >\n          {placeholder}\n        </div>\n      )}\n      <div className={`${baseClass}__content`}>\n        {href ? (\n          <Link\n            className={`${baseClass}__title`}\n            href={href}\n            onClick={onSelect ? handleClick : undefined}\n            onDoubleClick={onSelect ? handleDoubleClick : undefined}\n          >\n            {title}\n          </Link>\n        ) : (\n          <span className={`${baseClass}__title`}>{title}</span>\n        )}\n        {children ? <div className={`${baseClass}__metadata`}>{children}</div> : null}\n      </div>\n      {onSelect ? (\n        <span className=\"document-card__selection-status sr-only\" id={selectionStatusID}>\n          {t(isSelected ? 'general:selectedDocument' : 'general:notSelectedDocument')}\n        </span>\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/DocumentControls/index.css

@@ -0,0 +1,202 @@
+@layer payload-default {
+  .doc-controls {
+    position: sticky;
+    width: 100%;
+    top: 0;
+    display: flex;
+    justify-content: space-between;
+    z-index: var(--z-nav);
+    gap: var(--spacer-2);
+    padding: var(--spacer-2-5) var(--gutter-h);
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
+    background-color: var(--color-bg);
+  }
+
+  .doc-controls__content {
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+    gap: var(--spacer-2);
+  }
+
+  .doc-controls__before-meta {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-2);
+    flex-shrink: 0;
+  }
+
+  .doc-controls__locked-controls.locked {
+    &:active {
+      background: var(--color-bg-secondary);
+    }
+  }
+
+  .doc-controls__meta {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    list-style: none;
+    padding: 0;
+    color: var(--color-text);
+    gap: 0;
+    margin: 0;
+    width: auto;
+    overflow: visible;
+
+    button {
+      margin: 0;
+    }
+  }
+
+  .doc-controls__list-item {
+    display: flex;
+    align-items: center;
+    margin: 0;
+    white-space: nowrap;
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  .doc-controls__value-wrap {
+    overflow: hidden;
+  }
+
+  .doc-controls__value,
+  .doc-controls__creating-new {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin: 0;
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    letter-spacing: var(--text-body-medium-letter-spacing);
+  }
+
+  .doc-controls__value {
+    color: var(--color-text-secondary);
+  }
+
+  .doc-controls__creating-new {
+    color: var(--color-text);
+    font-weight: var(--text-body-medium-bold-font-weight);
+  }
+
+  .doc-controls__controls-wrapper {
+    display: flex;
+    align-items: center;
+    margin: 0;
+    gap: var(--spacer-2);
+    position: relative;
+  }
+
+  .doc-controls__controls {
+    display: flex;
+    align-items: center;
+    margin: 0;
+    gap: var(--spacer-2);
+
+    button {
+      margin: 0;
+      white-space: nowrap;
+    }
+  }
+
+  .doc-controls__icon-buttons {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-1);
+  }
+
+  .doc-controls__popup {
+    position: relative;
+  }
+
+  .doc-controls__popup-button {
+    padding-inline: 0;
+  }
+
+  .doc-controls__popup-button.popup-button--active,
+  .doc-controls__popup-button.popup-button--active:hover,
+  .doc-controls__popup-button.popup-button--active:active {
+    background: var(--color-bg-selected);
+    color: var(--color-icon-selected);
+  }
+
+  .doc-controls .popup__trigger-wrap {
+    display: flex;
+  }
+
+  .doc-controls__meta:has(.autosave) .doc-controls__value-wrap {
+    display: none;
+  }
+
+  /* Action buttons rendered inside the document drawer header */
+  .doc-controls--drawerHeaderActions {
+    position: static;
+    width: auto;
+    padding: 0;
+    gap: 0;
+    border-bottom: 0;
+    background: transparent;
+  }
+
+  @media (width > 768px) {
+    .doc-controls__meta {
+      flex-direction: row;
+      width: 100%;
+      gap: var(--spacer-2);
+      overflow: hidden;
+    }
+  }
+
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
+  @media (max-width: 1024px) {
+    .doc-controls__controls-wrapper {
+      margin-left: auto;
+    }
+
+    .doc-controls {
+      gap: var(--spacer-2);
+      flex-wrap: wrap;
+    }
+
+    .doc-controls--drawerHeaderActions {
+      padding: 0;
+      gap: 0;
+      flex-wrap: nowrap;
+    }
+
+    .doc-controls__content {
+      min-width: 0;
+    }
+
+    .doc-controls__before-meta {
+      display: none;
+    }
+
+    .doc-controls__meta:has(.doc-controls__status) .doc-controls__value {
+      font-size: var(--text-body-small-font-size);
+      font-weight: var(--text-body-small-font-weight);
+      line-height: var(--text-body-small-line-height);
+      letter-spacing: var(--text-body-small-letter-spacing);
+    }
+
+    .doc-controls .autosave {
+      font-size: var(--text-body-small-font-size);
+      font-weight: var(--text-body-small-font-weight);
+      line-height: var(--text-body-small-line-height);
+      letter-spacing: var(--text-body-small-letter-spacing);
+    }
+
+    .doc-controls__controls {
+      overflow: auto;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+  }
+}

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

@@ -1,8 +1,8 @@
-import type { ClientUser, Data, SanitizedCollectionConfig, SanitizedCollectionPermission, SanitizedGlobalPermission } from 'payload';
+import type { Data, SanitizedCollectionConfig, SanitizedCollectionPermission, SanitizedGlobalPermission, User } from 'payload';
 import React from 'react';
 import type { DocumentDrawerContextType } from '../DocumentDrawer/Provider.js';
-import './index.scss';
-export declare const DocumentControls: React.FC<{
+import './index.css';
+type DocumentControlsProps = {
     readonly apiURL: string;
     readonly BeforeDocumentControls?: React.ReactNode;
     readonly BeforeDocumentMeta?: React.ReactNode;
@@ -37,6 +37,14 @@ export declare const DocumentControls: React.FC<{
     readonly redirectAfterDuplicate?: boolean;
     readonly redirectAfterRestore?: boolean;
     readonly slug: SanitizedCollectionConfig['slug'];
-    readonly user?: ClientUser;
-}>;
+    readonly user?: User;
+    /**
+     * Controls how the document controls render.
+     * - `default`: full controls bar (meta + actions), used on the edit page.
+     * - `drawerHeaderActions`: only the action buttons, rendered in the document drawer header.
+     */
+    readonly variant?: 'default' | 'drawerHeaderActions';
+};
+export declare const DocumentControls: React.FC<DocumentControlsProps>;
+export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/DocumentControls/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,UAAU,EACV,IAAI,EACJ,yBAAyB,EACzB,6BAA6B,EAC7B,yBAAyB,EAC1B,MAAM,SAAS,CAAA;AAIhB,OAAO,KAA8B,MAAM,OAAO,CAAA;AAElD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,+BAA+B,CAAA;AA2B9E,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC;IACtC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,sBAAsB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACjD,QAAQ,CAAC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7C,QAAQ,CAAC,gBAAgB,CAAC,EAAE;QAC1B,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;QACxC,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;QACxC,QAAQ,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;QACrC,QAAQ,CAAC,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;QAC1C,QAAQ,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;QACjC,QAAQ,CAAC,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;KAC3C,CAAA;IACD,QAAQ,CAAC,IAAI,CAAC,EAAE,IAAI,CAAA;IACpB,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAA;IACjC,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAA;IAChC,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxC,QAAQ,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAA;IACvC,QAAQ,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAA;IACpC,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC7B,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAA;IAChC,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,QAAQ,CAAC,EAAE,yBAAyB,CAAC,UAAU,CAAC,CAAA;IACzD,QAAQ,CAAC,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAA;IAEvC,QAAQ,CAAC,WAAW,CAAC,EAAE,yBAAyB,CAAC,aAAa,CAAC,CAAA;IAC/D,QAAQ,CAAC,SAAS,CAAC,EAAE,yBAAyB,CAAC,WAAW,CAAC,CAAA;IAC3D,QAAQ,CAAC,MAAM,CAAC,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;IACrD,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IAChC,QAAQ,CAAC,WAAW,EAAE,IAAI,GAAG,6BAA6B,GAAG,yBAAyB,CAAA;IACtF,QAAQ,CAAC,uBAAuB,CAAC,EAAE,OAAO,CAAA;IAC1C,QAAQ,CAAC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IACtC,QAAQ,CAAC,sBAAsB,CAAC,EAAE,OAAO,CAAA;IACzC,QAAQ,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAA;IACvC,QAAQ,CAAC,IAAI,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAA;IAChD,QAAQ,CAAC,IAAI,CAAC,EAAE,UAAU,CAAA;CAC3B,CAiVA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/DocumentControls/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,IAAI,EACJ,yBAAyB,EACzB,6BAA6B,EAC7B,yBAAyB,EACzB,IAAI,EACL,MAAM,SAAS,CAAA;AAShB,OAAO,KAA6D,MAAM,OAAO,CAAA;AAEjF,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,+BAA+B,CAAA;AA6B9E,OAAO,aAAa,CAAA;AAIpB,KAAK,qBAAqB,GAAG;IAC3B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,sBAAsB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACjD,QAAQ,CAAC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7C,QAAQ,CAAC,gBAAgB,CAAC,EAAE;QAC1B,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;QACxC,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;QACxC,QAAQ,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;QACrC,QAAQ,CAAC,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;QAC1C,QAAQ,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;QACjC,QAAQ,CAAC,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;KAC3C,CAAA;IACD,QAAQ,CAAC,IAAI,CAAC,EAAE,IAAI,CAAA;IACpB,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAA;IACjC,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAA;IAChC,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxC,QAAQ,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAA;IACvC,QAAQ,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAA;IACpC,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC7B,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAA;IAChC,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,QAAQ,CAAC,EAAE,yBAAyB,CAAC,UAAU,CAAC,CAAA;IACzD,QAAQ,CAAC,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAA;IAEvC,QAAQ,CAAC,WAAW,CAAC,EAAE,yBAAyB,CAAC,aAAa,CAAC,CAAA;IAC/D,QAAQ,CAAC,SAAS,CAAC,EAAE,yBAAyB,CAAC,WAAW,CAAC,CAAA;IAC3D,QAAQ,CAAC,MAAM,CAAC,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;IACrD,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IAChC,QAAQ,CAAC,WAAW,EAAE,IAAI,GAAG,6BAA6B,GAAG,yBAAyB,CAAA;IACtF,QAAQ,CAAC,uBAAuB,CAAC,EAAE,OAAO,CAAA;IAC1C,QAAQ,CAAC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IACtC,QAAQ,CAAC,sBAAsB,CAAC,EAAE,OAAO,CAAA;IACzC,QAAQ,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAA;IACvC,QAAQ,CAAC,IAAI,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAA;IAChD,QAAQ,CAAC,IAAI,CAAC,EAAE,IAAI,CAAA;IACpB;;;;OAIG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,GAAG,qBAAqB,CAAA;CACrD,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA+W5D,CAAA"}