@payloadcms/ui 4.0.0-canary.2 → 4.0.0-canary.4

package/dist/elements/Dropzone/index.css

@@ -3,7 +3,7 @@
     position: relative;
     display: flex;
     align-items: flex-start;
-    background: transparent;
+    background-color: var(--color-bg-secondary);
     border: var(--stroke-width-small) dashed var(--special-border-translucent);
     border-radius: var(--field-border-radius);
     overflow: clip;
@@ -18,7 +18,6 @@
     }
 
     &.dragging {
-      border-color: var(--color-border-selected);
       background: var(--color-bg-brand-tertiary);
 
       * {
@@ -26,22 +25,15 @@
       }
     }
 
-    &:focus-within,
-    &.focused {
-      border-color: var(--color-border-selected);
-      background: var(--color-bg-brand-tertiary);
-      outline: none;
-    }
-
-    &.dropzone--has-error {
-      border-color: var(--color-border-danger-strong);
-    }
-
     @media (max-width: 768px) {
       display: block;
       text-align: center;
     }
 
+    &.dropzone--style-default {
+      padding-block: var(--spacer-3);
+    }
+
     &.dropzone--style-none {
       all: unset;
     }

package/dist/elements/DuplicateDocument/SelectLocalesDrawer/index.js

@@ -7,9 +7,9 @@ import { setsAreEqual } from 'payload/shared';
 import React, { useCallback, useMemo, useState } from 'react';
 import { CheckboxInput } from '../../../fields/Checkbox/index.js';
 import { useTranslation } from '../../../providers/Translation/index.js';
-import { DrawerHeader } from '../../BulkUpload/Header/index.js';
 import { Button } from '../../Button/index.js';
 import { Drawer } from '../../Drawer/index.js';
+import { DrawerHeader } from '../../DrawerHeader/index.js';
 import './index.css';
 const getLocaleOptions = ({
   i18n,

package/dist/elements/DuplicateDocument/SelectLocalesDrawer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useModal","getTranslation","setsAreEqual","React","useCallback","useMemo","useState","CheckboxInput","useTranslation","DrawerHeader","Button","Drawer","getLocaleOptions","i18n","localization","locales","map","locale","label","value","code","baseClass","SelectLocalesDrawer","slug","onConfirm","t","toggleModal","selectedLocales","setSelectedLocales","localeOptions","allLocales","allLocalesSelected","Set","handleSelectAll","handleToggleLocale","localeValue","prev","includes","filter","l","handleConfirm","_jsxs","className","Header","_jsx","onClose","title","buttonStyle","disabled","length","iconPosition","id","onClick","size","checked","count","onToggle"],"sources":["../../../../src/elements/DuplicateDocument/SelectLocalesDrawer/index.tsx"],"sourcesContent":["'use client'\n\nimport type { I18nClient } from '@payloadcms/translations'\nimport type { ClientConfig } from 'payload'\n\nimport { useModal } from '@faceless-ui/modal'\nimport { getTranslation } from '@payloadcms/translations'\nimport { setsAreEqual } from 'payload/shared'\nimport React, { useCallback, useMemo, useState } from 'react'\n\nimport { CheckboxInput } from '../../../fields/Checkbox/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { DrawerHeader } from '../../BulkUpload/Header/index.js'\nimport { Button } from '../../Button/index.js'\nimport { Drawer } from '../../Drawer/index.js'\nimport './index.css'\n\nexport type LocaleOption = {\n  label: string\n  value: string\n}\n\nexport type SelectLocalesDrawerProps = {\n  readonly localization: Exclude<ClientConfig['localization'], false>\n  readonly onConfirm: (args: { selectedLocales: string[] }) => Promise<void> | void\n  readonly slug: string\n}\n\nconst getLocaleOptions = ({\n  i18n,\n  localization,\n}: {\n  i18n: I18nClient\n  localization: SelectLocalesDrawerProps['localization']\n}): LocaleOption[] => {\n  return localization.locales.map((locale) => ({\n    label: getTranslation(locale.label, i18n),\n    value: locale.code,\n  }))\n}\n\nconst baseClass = 'select-locales-drawer'\n\nexport const SelectLocalesDrawer: React.FC<SelectLocalesDrawerProps> = ({\n  slug,\n  localization,\n  onConfirm,\n}) => {\n  const { i18n, t } = useTranslation()\n  const { toggleModal } = useModal()\n  const [selectedLocales, setSelectedLocales] = useState<string[]>([])\n\n  const localeOptions = useMemo(\n    () => getLocaleOptions({ i18n, localization }),\n    [localization, i18n],\n  )\n  const allLocales = useMemo(() => localeOptions.map((locale) => locale.value), [localeOptions])\n  const allLocalesSelected = useMemo(\n    () => setsAreEqual(new Set(selectedLocales), new Set(allLocales)),\n    [selectedLocales, allLocales],\n  )\n\n  const handleSelectAll = useCallback(() => {\n    setSelectedLocales(allLocalesSelected ? [] : [...allLocales])\n  }, [allLocalesSelected, allLocales])\n\n  const handleToggleLocale = useCallback((localeValue: string) => {\n    setSelectedLocales((prev) =>\n      prev.includes(localeValue) ? prev.filter((l) => l !== localeValue) : [...prev, localeValue],\n    )\n  }, [])\n\n  const handleConfirm = useCallback(async () => {\n    await onConfirm({ selectedLocales })\n    toggleModal(slug)\n  }, [onConfirm, selectedLocales, slug, toggleModal])\n\n  return (\n    <Drawer\n      className={baseClass}\n      Header={\n        <DrawerHeader\n          onClose={() => {\n            toggleModal(slug)\n          }}\n          title={`${t('general:duplicate')} ${t('localization:selectedLocales')}`}\n        />\n      }\n      slug={slug}\n    >\n      <div className={`${baseClass}__sub-header`}>\n        <span>{t('localization:selectLocaleToDuplicate')}</span>\n        <Button\n          buttonStyle=\"primary\"\n          disabled={selectedLocales.length === 0}\n          iconPosition=\"left\"\n          id=\"#action-duplicate-confirm\"\n          onClick={handleConfirm}\n          size=\"medium\"\n        >\n          {t('general:duplicate')}\n        </Button>\n      </div>\n      <div className={`${baseClass}__content`}>\n        <div className={`${baseClass}__item`}>\n          <CheckboxInput\n            checked={allLocalesSelected}\n            id=\"select-locale-all\"\n            label={t('general:selectAll', {\n              count: allLocales.length,\n              label: t('general:locales'),\n            })}\n            onToggle={handleSelectAll}\n          />\n        </div>\n        {localeOptions.map((locale) => (\n          <div className={`${baseClass}__item`} key={locale.value}>\n            <CheckboxInput\n              checked={selectedLocales.includes(locale.value)}\n              id={`select-locale-${locale.value}`}\n              label={locale.label}\n              onToggle={() => handleToggleLocale(locale.value)}\n            />\n          </div>\n        ))}\n      </div>\n    </Drawer>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["useModal","getTranslation","setsAreEqual","React","useCallback","useMemo","useState","CheckboxInput","useTranslation","Button","Drawer","DrawerHeader","getLocaleOptions","i18n","localization","locales","map","locale","label","value","code","baseClass","SelectLocalesDrawer","slug","onConfirm","t","toggleModal","selectedLocales","setSelectedLocales","localeOptions","allLocales","allLocalesSelected","Set","handleSelectAll","handleToggleLocale","localeValue","prev","includes","filter","l","handleConfirm","_jsxs","className","Header","_jsx","onClose","title","buttonStyle","disabled","length","iconPosition","id","onClick","size","checked","count","onToggle"],"sources":["../../../../src/elements/DuplicateDocument/SelectLocalesDrawer/index.tsx"],"sourcesContent":["'use client'\n\nimport type { I18nClient } from '@payloadcms/translations'\nimport type { ClientConfig } from 'payload'\n\nimport { useModal } from '@faceless-ui/modal'\nimport { getTranslation } from '@payloadcms/translations'\nimport { setsAreEqual } from 'payload/shared'\nimport React, { useCallback, useMemo, useState } from 'react'\n\nimport { CheckboxInput } from '../../../fields/Checkbox/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\nimport { Drawer } from '../../Drawer/index.js'\nimport { DrawerHeader } from '../../DrawerHeader/index.js'\nimport './index.css'\n\nexport type LocaleOption = {\n  label: string\n  value: string\n}\n\nexport type SelectLocalesDrawerProps = {\n  readonly localization: Exclude<ClientConfig['localization'], false>\n  readonly onConfirm: (args: { selectedLocales: string[] }) => Promise<void> | void\n  readonly slug: string\n}\n\nconst getLocaleOptions = ({\n  i18n,\n  localization,\n}: {\n  i18n: I18nClient\n  localization: SelectLocalesDrawerProps['localization']\n}): LocaleOption[] => {\n  return localization.locales.map((locale) => ({\n    label: getTranslation(locale.label, i18n),\n    value: locale.code,\n  }))\n}\n\nconst baseClass = 'select-locales-drawer'\n\nexport const SelectLocalesDrawer: React.FC<SelectLocalesDrawerProps> = ({\n  slug,\n  localization,\n  onConfirm,\n}) => {\n  const { i18n, t } = useTranslation()\n  const { toggleModal } = useModal()\n  const [selectedLocales, setSelectedLocales] = useState<string[]>([])\n\n  const localeOptions = useMemo(\n    () => getLocaleOptions({ i18n, localization }),\n    [localization, i18n],\n  )\n  const allLocales = useMemo(() => localeOptions.map((locale) => locale.value), [localeOptions])\n  const allLocalesSelected = useMemo(\n    () => setsAreEqual(new Set(selectedLocales), new Set(allLocales)),\n    [selectedLocales, allLocales],\n  )\n\n  const handleSelectAll = useCallback(() => {\n    setSelectedLocales(allLocalesSelected ? [] : [...allLocales])\n  }, [allLocalesSelected, allLocales])\n\n  const handleToggleLocale = useCallback((localeValue: string) => {\n    setSelectedLocales((prev) =>\n      prev.includes(localeValue) ? prev.filter((l) => l !== localeValue) : [...prev, localeValue],\n    )\n  }, [])\n\n  const handleConfirm = useCallback(async () => {\n    await onConfirm({ selectedLocales })\n    toggleModal(slug)\n  }, [onConfirm, selectedLocales, slug, toggleModal])\n\n  return (\n    <Drawer\n      className={baseClass}\n      Header={\n        <DrawerHeader\n          onClose={() => {\n            toggleModal(slug)\n          }}\n          title={`${t('general:duplicate')} ${t('localization:selectedLocales')}`}\n        />\n      }\n      slug={slug}\n    >\n      <div className={`${baseClass}__sub-header`}>\n        <span>{t('localization:selectLocaleToDuplicate')}</span>\n        <Button\n          buttonStyle=\"primary\"\n          disabled={selectedLocales.length === 0}\n          iconPosition=\"left\"\n          id=\"#action-duplicate-confirm\"\n          onClick={handleConfirm}\n          size=\"medium\"\n        >\n          {t('general:duplicate')}\n        </Button>\n      </div>\n      <div className={`${baseClass}__content`}>\n        <div className={`${baseClass}__item`}>\n          <CheckboxInput\n            checked={allLocalesSelected}\n            id=\"select-locale-all\"\n            label={t('general:selectAll', {\n              count: allLocales.length,\n              label: t('general:locales'),\n            })}\n            onToggle={handleSelectAll}\n          />\n        </div>\n        {localeOptions.map((locale) => (\n          <div className={`${baseClass}__item`} key={locale.value}>\n            <CheckboxInput\n              checked={selectedLocales.includes(locale.value)}\n              id={`select-locale-${locale.value}`}\n              label={locale.label}\n              onToggle={() => handleToggleLocale(locale.value)}\n            />\n          </div>\n        ))}\n      </div>\n    </Drawer>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/EditUpload/index.css

@@ -1,47 +1,37 @@
 @layer payload-default {
-  .edit-upload {
-    --edit-upload-cell-spacing: var(--spacer-4);
-    --edit-upload-sidebar-width: calc(350px + var(--gutter-h));
-    height: 100%;
-    display: flex;
-    flex-direction: column;
+  /* Allow the ReactCrop 9999px box-shadow overlay to escape the dialog bounds. */
+  .edit-upload__dialog {
+    overflow: visible;
   }
 
-  .edit-upload__header {
-    border-bottom: 1px solid var(--color-border);
-    padding: var(--spacer-2-5);
+  .edit-upload__body {
+    flex: 1 1 auto;
+    min-height: 0;
     display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .edit-upload__header h2 {
-    margin: 0;
-    text-wrap: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    flex-direction: column;
+    overflow: visible;
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
   }
 
-  [dir='rtl'] .edit-upload__actions {
-    margin-right: auto;
-    margin-left: unset;
-  }
+  .edit-upload__content {
+    --edit-upload-content-min-height: 480px;
+    --edit-upload-sidebar-width: 240px;
 
-  .edit-upload__actions {
-    min-width: 350px;
-    margin-left: auto;
-    padding: var(--spacer-2) 0 var(--spacer-2) var(--spacer-4);
-    justify-content: flex-end;
     display: flex;
-    gap: var(--spacer-3);
-    text-wrap: nowrap;
+    flex-direction: row;
+    flex: 1 1 auto;
+    min-height: var(--edit-upload-content-min-height);
   }
 
-  .edit-upload__toolWrap {
+  /* Canvas area */
+  .edit-upload__crop {
+    flex: 1 1 0;
+    min-width: 0;
     display: flex;
-    justify-content: flex-end;
-    flex: 1;
-    min-height: 0;
+    align-items: center;
+    justify-content: center;
+    padding: var(--spacer-4);
+    background: var(--color-bg-secondary);
   }
 
   .edit-upload .ReactCrop__selection-addon,
@@ -54,173 +44,122 @@
     position: relative;
     display: inline-flex;
     max-height: 100%;
+    max-width: 100%;
   }
 
-  .edit-upload__draggable-container {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    top: 0;
-    pointer-events: none;
+  /* Sidebar */
+  .edit-upload__sidebar {
+    flex-shrink: 0;
+    width: var(--edit-upload-sidebar-width);
+    border-inline-start: var(--stroke-width-small) solid var(--color-border);
+    display: flex;
+    flex-direction: column;
   }
 
-  .edit-upload__draggable-container--dragging {
-    pointer-events: all;
+  .edit-upload__section {
+    display: flex;
+    flex-direction: column;
+    padding-block-end: var(--spacer-2);
   }
 
-  .edit-upload__draggable-container--dragging .edit-upload__focalPoint {
-    cursor: grabbing;
+  .edit-upload__section + .edit-upload__section {
+    border-top: var(--stroke-width-small) solid var(--color-border);
   }
 
-  .edit-upload__draggable {
-    position: absolute;
+  .edit-upload__section:last-child {
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
   }
 
-  .edit-upload__focalPoint {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    border-radius: 50%;
+  .edit-upload__section-header {
     display: flex;
     align-items: center;
-    justify-content: center;
-    cursor: grab;
-    width: 50px;
-    height: 50px;
-    transform: translate3d(-50%, -50%, 0);
-    pointer-events: all;
-  }
-
-  .edit-upload__focalPoint svg {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.5);
-    border-radius: 100%;
-    width: var(--spacer-6);
+    justify-content: space-between;
     height: var(--spacer-6);
-    color: white;
+    padding-inline-start: var(--spacer-3);
+    padding-inline-end: var(--spacer-2);
   }
 
-  .edit-upload__crop,
-  .edit-upload__focalOnly {
-    padding: var(--spacer-4) var(--spacer-4) var(--spacer-4) 0;
-    width: 100%;
-    display: flex;
-    justify-content: center;
+  .edit-upload__section-title {
+    font-family: var(--text-body-medium-strong-font-family);
+    font-size: var(--text-body-medium-strong-font-size);
+    font-weight: var(--text-body-medium-strong-font-weight);
+    line-height: var(--text-body-medium-strong-line-height);
+    color: var(--color-text);
   }
 
-  .edit-upload__crop {
-    padding: var(--edit-upload-cell-spacing);
-    padding-left: var(--gutter-h);
+  .edit-upload__reset {
     display: flex;
-    align-items: flex-start;
-    height: 100%;
-  }
-
-  .edit-upload__imageWrap {
-    position: relative;
-  }
-
-  .edit-upload__point {
-    cursor: move;
-    position: absolute;
-    background: rgba(0, 0, 0, 0.5);
-    border-radius: 100%;
-  }
-
-  .edit-upload__point svg {
-    width: var(--spacer-6);
-    height: var(--spacer-6);
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: 0;
+    border-radius: var(--radius-medium);
+    background: transparent;
+    color: var(--color-icon);
+    cursor: pointer;
   }
 
-  .edit-upload__sidebar {
-    border-left: 1px solid var(--color-border);
-    padding-top: var(--edit-upload-cell-spacing);
-    min-width: var(--edit-upload-sidebar-width);
+  .edit-upload__reset:hover {
+    background: var(--color-bg-secondary);
   }
 
-  .edit-upload__sidebar > div:first-child {
-    margin-bottom: var(--spacer-3);
+  .edit-upload__reset:focus-visible {
+    outline: var(--accessibility-outline);
   }
 
-  .edit-upload__groupWrap {
-    display: flex;
-    flex-direction: column;
+  .edit-upload__fieldset {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: var(--spacer-2);
-    padding-right: var(--gutter-h);
-    padding-left: var(--edit-upload-cell-spacing);
-    width: 100%;
+    padding-inline-start: var(--spacer-3);
+    padding-inline-end: var(--spacer-2);
+    padding-block: var(--spacer-1);
   }
 
-  .edit-upload__groupWrap + .edit-upload__groupWrap {
-    padding-top: var(--edit-upload-cell-spacing);
-    margin-top: var(--edit-upload-cell-spacing);
-    border-top: 1px solid var(--color-border);
+  /* Draggable focal point */
+  .edit-upload__draggable-container {
+    position: absolute;
+    inset: 0;
+    pointer-events: none; /* let clicks pass through to the image/crop layer */
   }
 
-  .edit-upload__inputsWrap,
-  .edit-upload__titleWrap {
-    display: flex;
-    gap: var(--spacer-3);
+  .edit-upload__draggable {
+    position: absolute;
+    pointer-events: all; /* only the handle itself is interactive */
   }
 
-  .edit-upload__titleWrap {
-    justify-content: space-between;
+  .edit-upload__focalPoint {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    display: flex;
     align-items: center;
-  }
-
-  .edit-upload__titleWrap h3 {
-    margin: 0;
-  }
-
-  .edit-upload__reset {
-    height: fit-content;
-    border-radius: var(--radius-small);
-    background-color: var(--color-bg-secondary);
-    padding: 0 var(--spacer-2);
-  }
-
-  .edit-upload__input {
-    flex: 1;
-  }
-
-  @media (max-width: 1024px) {
-    .edit-upload {
-      --edit-upload-cell-spacing: var(--gutter-h);
-    }
+    justify-content: center;
+    width: var(--spacer-5);
+    height: var(--spacer-5);
+    border-radius: 50%;
+    background: var(--color-focal-point-backdrop);
+    color: white;
+    cursor: grab;
+    transform: translate3d(-50%, -50%, 0);
+    pointer-events: all;
 
-    .edit-upload__sidebar {
-      padding-left: 0;
-      border-left: 0;
+    svg {
       width: 100%;
-    }
-
-    .edit-upload__toolWrap {
-      flex-direction: column-reverse;
+      height: 100%;
     }
   }
 
   @media (max-width: 768px) {
-    .edit-upload {
+    .edit-upload__content {
       flex-direction: column;
-    }
-
-    .edit-upload__focalPoint {
-      border-right: none;
-      padding: var(--spacer-3) 0;
-    }
-
-    .edit-upload__inputsWrap {
-      flex-direction: column;
-      gap: var(--spacer-3);
+      min-height: unset;
     }
 
     .edit-upload__sidebar {
-      min-width: 0;
+      width: 100%;
+      border-inline-start: none;
+      border-top: var(--stroke-width-small) solid var(--color-border);
     }
   }
 }

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

@@ -1,6 +1,7 @@
 import type { UploadEdits } from 'payload';
 import React from 'react';
 import './index.css';
+import './library.css';
 type FocalPosition = {
     x: number;
     y: number;
@@ -8,7 +9,7 @@ type FocalPosition = {
 export type EditUploadProps = {
     fileName: string;
     fileSrc: string;
-    imageCacheTag?: string;
+    imageCacheTag?: false | string;
     initialCrop?: UploadEdits['crop'];
     initialFocalPoint?: FocalPosition;
     onSave?: (uploadEdits: UploadEdits) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/EditUpload/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAG1C,OAAO,KAA2B,MAAM,OAAO,CAAA;AAQ/C,OAAO,aAAa,CAAA;AA8BpB,KAAK,aAAa,GAAG;IACnB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,EAAE,MAAM,CAAA;IAChB,OAAO,EAAE,MAAM,CAAA;IACf,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,WAAW,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IACjC,iBAAiB,CAAC,EAAE,aAAa,CAAA;IACjC,MAAM,CAAC,EAAE,CAAC,WAAW,EAAE,WAAW,KAAK,IAAI,CAAA;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,CAAA;AAUD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAyQhD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/EditUpload/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAG1C,OAAO,KAA2B,MAAM,OAAO,CAAA;AAW/C,OAAO,aAAa,CAAA;AACpB,OAAO,eAAe,CAAA;AAItB,KAAK,aAAa,GAAG;IACnB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,EAAE,MAAM,CAAA;IAChB,OAAO,EAAE,MAAM,CAAA;IACf,aAAa,CAAC,EAAE,KAAK,GAAG,MAAM,CAAA;IAC9B,WAAW,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IACjC,iBAAiB,CAAC,EAAE,aAAa,CAAA;IACjC,MAAM,CAAC,EAAE,CAAC,WAAW,EAAE,WAAW,KAAK,IAAI,CAAA;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,CAAA;AAUD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA4PhD,CAAA"}