@pnx-mixtape/mxds 0.0.6 → 0.0.8

package/dist/build/chunks/drop-menu.entry-BC6x9vst.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drop-menu.entry-BC6x9vst.js","sources":["../../../src/Component/DropMenu/Elements/DropMenu.ts"],"sourcesContent":["/**\n * DropMenu\n * @file Create a DropMenu using the Popover and Anchor APIs\n */\n\nimport { Keyboard, makeAnchor } from \"../../../Utility/utilities\"\n\nexport type DropMenuEvent = CustomEvent<{\n  event: MouseEvent | KeyboardEvent\n  target: HTMLButtonElement | HTMLAnchorElement\n}>\n\nexport default class DropMenu extends HTMLElement {\n  internals_: ElementInternals\n  controller: AbortController\n  keyboard: Keyboard = new Keyboard()\n  closeOnClick: boolean\n\n  constructor() {\n    super()\n    this.internals_ = this.attachInternals()\n    this.controller = new AbortController()\n  }\n\n  async connectedCallback() {\n    if (!this.menu || !this.trigger) return\n\n    // Polyfill anchor (everywhere so far).\n    if (!(\"anchorName\" in document.documentElement.style)) {\n      const { default: Polyfills } = await import(\"../polyfills.js\")\n      new Polyfills(this.menu) // eslint-disable-line no-new\n    }\n    // Polyfill popover (FF only)\n    if (!Object.hasOwn(HTMLElement, \"popover\")) {\n      await import(\"@oddbird/popover-polyfill\")\n    }\n    this.closeOnClick = this.hasAttribute(\"closeonclick\")\n\n    const { signal }: AbortController = this.controller\n    document.addEventListener(\n      \"click\",\n      (event: MouseEvent): void => {\n        const { target } = event\n        if (\n          (target as HTMLElement) !== this.menu &&\n          ![...this.items].includes(\n            target as HTMLButtonElement | HTMLAnchorElement,\n          )\n        )\n          return\n        this.handleSelect(event)\n        event.preventDefault()\n      },\n      {\n        signal,\n      },\n    )\n\n    document.addEventListener(\n      \"keydown\",\n      (event: KeyboardEvent): void => {\n        const { target, key } = event\n        if (\n          (target as HTMLElement) !== this.menu &&\n          ![...this.items].includes(\n            target as HTMLButtonElement | HTMLAnchorElement,\n          )\n        )\n          return\n        if (key === \"Enter\") this.handleSelect(event)\n        event.preventDefault()\n      },\n      {\n        signal,\n      },\n    )\n\n    this.keyboard.attachEventListeners(signal)\n    this.menu.addEventListener(\"focusin\", this.attachKeyboardMenu, {\n      signal,\n    })\n    this.menu.addEventListener(\"focusout\", this.detachKeyboardMenu, {\n      signal,\n    })\n    this.menu.addEventListener(\"toggle\", this.handleToggle, {\n      signal,\n    })\n  }\n\n  disconnectedCallback(): void {\n    this.controller.abort()\n    this.keyboard.detachMenu()\n  }\n\n  handleSelect = (event: MouseEvent | KeyboardEvent): void => {\n    const target = event.target as HTMLButtonElement | HTMLAnchorElement\n    this.items.forEach(item => {\n      if (!(item instanceof HTMLButtonElement)) return\n      item.setAttribute(\"aria-checked\", String(item === target))\n    })\n    const newEvent: DropMenuEvent = new CustomEvent(\"drop-menu-select\", {\n      bubbles: true,\n      cancelable: true,\n      detail: {\n        event,\n        target,\n      },\n    })\n    this.menu.dispatchEvent(newEvent)\n    if (this.closeOnClick) this.menu.togglePopover()\n  }\n\n  handleToggle = ({ newState }: ToggleEvent): void => {\n    const handleClose = () => this.menu.togglePopover()\n    if (newState === \"open\") {\n      this.keyboard.attachPopup(this.menu.id, handleClose)\n    } else {\n      this.keyboard.detachPopup(this.menu.id)\n    }\n  }\n\n  attachKeyboardMenu = (): void => {\n    this.keyboard.attachMenu(this.menu, this.items)\n  }\n\n  detachKeyboardMenu = (): void => {\n    this.keyboard.detachMenu()\n  }\n\n  get menu(): HTMLDivElement | null {\n    const menu: HTMLDivElement | null = this.querySelector(\"[popover]\")\n    if (!menu) {\n      throw new Error(`${this.localName} must contain a <div popover> element.`)\n    }\n    menu.id = menu.id || this.generatedId()\n    return menu\n  }\n\n  get items(): NodeListOf<HTMLButtonElement | HTMLAnchorElement> {\n    const items: NodeListOf<HTMLButtonElement | HTMLAnchorElement> =\n      this.menu.querySelectorAll(\":scope > *\")\n    if (!items) {\n      throw new Error(`${this.localName} must contain some menu items.`)\n    }\n    return items\n  }\n\n  get trigger(): HTMLButtonElement | null {\n    const trigger: HTMLButtonElement | null = this.querySelector(\n      `[popovertarget=${this.menu?.id}]`,\n    )\n    if (!trigger) {\n      throw new Error(\n        `${this.localName} must contain a <button popovertarget=\"${this.menu.id}\">`,\n      )\n    }\n    return trigger\n  }\n\n  generatedId = (): string => {\n    const string: string | undefined = this.trigger?.textContent?.trim()\n    return !string ? \"\" : makeAnchor(string)\n  }\n}\n\ncustomElements.define(\"mx-dropmenu\", DropMenu)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-dropmenu\": DropMenu\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/build/content-block.css

@@ -3,21 +3,34 @@
  */
 
 @layer design-system.components {
-  .content-block {
-    inline-size: 100%;
-    margin-inline: auto;
-    text-align: center;
+  .mx-content-block {
+    display: grid;
+    grid-gap: var(--content-block-gap, var(--gap));
+    gap: var(--content-block-gap, var(--gap));
   }
 
-    .content-block .content-block__actions {
-      padding-block-start: var(--spacing-m);
+    .mx-content-block .mx-link-list {
+      inline-size: 100%;
     }
-}
 
-@layer design-system.utilities {
-  .vertical-flow-flex.content-block {
-    align-items: center;
+  .mx-content-block__media {
+    display: grid;
+    margin: auto;
+    position: relative;
+    inline-size: 100%;
   }
+
+    .mx-content-block__media img {
+      aspect-ratio: var(--ratio);
+      border-radius: var(--border-radius);
+      -o-object-fit: cover;
+         object-fit: cover;
+      display: block;
+    }
+
+    .mx-content-block__media .mx-skeleton--bg {
+      aspect-ratio: var(--ratio);
+    }
 }
 
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbnRlbnQtYmxvY2suY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztFQUVFOztBQUVGO0VBQ0U7SUFDRSxpQkFBaUI7SUFDakIsbUJBQW1CO0lBQ25CLGtCQUFrQjtFQUtwQjs7SUFIRTtNQUNFLHFDQUFxQztJQUN2QztBQUVKOztBQUVBO0VBQ0U7SUFDRSxtQkFBbUI7RUFDckI7QUFDRiIsImZpbGUiOiJjb250ZW50LWJsb2NrLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29udGVudCBibG9ja1xuICovXG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmNvbXBvbmVudHMge1xuICAuY29udGVudC1ibG9jayB7XG4gICAgaW5saW5lLXNpemU6IDEwMCU7XG4gICAgbWFyZ2luLWlubGluZTogYXV0bztcbiAgICB0ZXh0LWFsaWduOiBjZW50ZXI7XG5cbiAgICAmIC5jb250ZW50LWJsb2NrX19hY3Rpb25zIHtcbiAgICAgIHBhZGRpbmctYmxvY2stc3RhcnQ6IHZhcigtLXNwYWNpbmctbSk7XG4gICAgfVxuICB9XG59XG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLnV0aWxpdGllcyB7XG4gIC52ZXJ0aWNhbC1mbG93LWZsZXguY29udGVudC1ibG9jayB7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgfVxufVxuIl19 */
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbnRlbnQtYmxvY2suY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztFQUVFOztBQUVGO0VBQ0U7SUFDRSxhQUFhO0lBQ2IsOENBQXlDO0lBQXpDLHlDQUF5QztFQUszQzs7SUFIRTtNQUNFLGlCQUFpQjtJQUNuQjs7RUFHRjtJQUNFLGFBQWE7SUFDYixZQUFZO0lBQ1osa0JBQWtCO0lBQ2xCLGlCQUFpQjtFQVluQjs7SUFWRTtNQUNFLDBCQUEwQjtNQUMxQixtQ0FBbUM7TUFDbkMsb0JBQWlCO1NBQWpCLGlCQUFpQjtNQUNqQixjQUFjO0lBQ2hCOztJQUVBO01BQ0UsMEJBQTBCO0lBQzVCO0FBRUoiLCJmaWxlIjoiY29udGVudC1ibG9jay5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvbnRlbnQgYmxvY2tcbiAqL1xuXG5AbGF5ZXIgZGVzaWduLXN5c3RlbS5jb21wb25lbnRzIHtcbiAgLm14LWNvbnRlbnQtYmxvY2sge1xuICAgIGRpc3BsYXk6IGdyaWQ7XG4gICAgZ2FwOiB2YXIoLS1jb250ZW50LWJsb2NrLWdhcCwgdmFyKC0tZ2FwKSk7XG5cbiAgICAmIC5teC1saW5rLWxpc3Qge1xuICAgICAgaW5saW5lLXNpemU6IDEwMCU7XG4gICAgfVxuICB9XG5cbiAgLm14LWNvbnRlbnQtYmxvY2tfX21lZGlhIHtcbiAgICBkaXNwbGF5OiBncmlkO1xuICAgIG1hcmdpbjogYXV0bztcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgaW5saW5lLXNpemU6IDEwMCU7XG5cbiAgICAmIGltZyB7XG4gICAgICBhc3BlY3QtcmF0aW86IHZhcigtLXJhdGlvKTtcbiAgICAgIGJvcmRlci1yYWRpdXM6IHZhcigtLWJvcmRlci1yYWRpdXMpO1xuICAgICAgb2JqZWN0LWZpdDogY292ZXI7XG4gICAgICBkaXNwbGF5OiBibG9jaztcbiAgICB9XG5cbiAgICAmIC5teC1za2VsZXRvbi0tYmcge1xuICAgICAgYXNwZWN0LXJhdGlvOiB2YXIoLS1yYXRpbyk7XG4gICAgfVxuICB9XG59XG4iXX0= */

package/dist/build/drop-menu.css

@@ -7,15 +7,15 @@
  */
 
 @layer design-system.components {
-  .drop-menu__trigger {
+  .mx-drop-menu__trigger {
     anchor-name: --drop-menu;
   }
 
-    .drop-menu__trigger:has(~ :popover-open)::before {
+    .mx-drop-menu__trigger:has(~ :popover-open)::before {
       rotate: 180deg;
     }
 
-  .drop-menu {
+  .mx-drop-menu {
     position: absolute;
     background-color: var(
       --drop-menu-background,
@@ -34,7 +34,7 @@
 
     @supports (inline-size: anchor-size(width)) {
 
-  .drop-menu {
+  .mx-drop-menu {
       position-anchor: --drop-menu;
       inset-area: bottom;
       position-area: bottom;
@@ -44,12 +44,12 @@
   }
     }
 
-    .drop-menu:popover-open {
+    .mx-drop-menu:popover-open {
       display: flex;
       flex-direction: column;
     }
 
-    .drop-menu button {
+    .mx-drop-menu button {
       -webkit-appearance: none;
          -moz-appearance: none;
               appearance: none;
@@ -63,11 +63,11 @@
       text-align: start;
     }
 
-      .drop-menu button[aria-checked="true"] {
+      .mx-drop-menu button[aria-checked="true"] {
         text-decoration-line: underline;
       }
 
-    .drop-menu :is(a, button) {
+    .mx-drop-menu :is(a, button) {
       padding-block: var(--spacing-xxxs);
       padding-inline: var(--spacing-xs);
       cursor: pointer;
@@ -75,4 +75,4 @@
     }
 }
 
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRyb3AtbWVudS5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEseUhBQXlIOztBQUV6SDs7OztFQUlFOztBQUVGO0VBQ0U7SUFDRSx3QkFBd0I7RUFLMUI7O0lBSEU7TUFDRSxjQUFjO0lBQ2hCOztFQUdGO0lBQ0Usa0JBQWtCO0lBQ2xCOzs7S0FHQztJQUNEOzs7S0FHQztJQUNEOzhDQUMwQztJQUQxQzs4Q0FDMEM7SUFDMUMsU0FBUztFQXFDWDs7SUFuQ0U7O0VBZEY7TUFlSSw0QkFBNEI7TUFDNUIsa0JBQWtCO01BQ2xCLHFCQUFxQjtNQUNyQixnQ0FBZ0M7TUFDaEMsaUNBQWlDO01BQ2pDLG1DQUFtQztFQTZCdkM7SUE1QkU7O0lBRUE7TUFDRSxhQUFhO01BQ2Isc0JBQXNCO0lBQ3hCOztJQUVBO01BQ0Usd0JBQWdCO1NBQWhCLHFCQUFnQjtjQUFoQixnQkFBZ0I7TUFDaEIsb0JBQW9CO01BQ3BCLG9CQUFvQjtNQUNwQixrQkFBa0I7TUFDbEIsNkJBQTZCO01BQzdCLGNBQWM7TUFDZCxnQ0FBYTtNQUFiLGVBQWE7TUFDYixpQkFBaUI7SUFLbkI7O01BSEU7UUFDRSwrQkFBK0I7TUFDakM7O0lBR0Y7TUFDRSxrQ0FBa0M7TUFDbEMsaUNBQWlDO01BQ2pDLGVBQWU7TUFDZixxQkFBcUI7SUFDdkI7QUFFSiIsImZpbGUiOiJkcm9wLW1lbnUuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyogc3R5bGVsaW50LWRpc2FibGUgc2VsZWN0b3ItY2xhc3MtcGF0dGVybiwgZnVuY3Rpb24tbm8tdW5rbm93biwgcHJvcGVydHktbm8tdW5rbm93biwgc2VsZWN0b3ItcHNldWRvLWNsYXNzLW5vLXVua25vd24gKi9cblxuLyoqXG4gKiBEcm9wIG1lbnVcbiAqXG4gKiAqKkV4cGVyaW1lbnRhbCoqIFVzaW5nIG5ldyBDU1MgQW5jaG9yaW5nIGFuZCBQb3BvdmVyIEFQSSdzLCByZXF1aXJlcyBKUyBwb2x5ZmlsbC5cbiAqL1xuXG5AbGF5ZXIgZGVzaWduLXN5c3RlbS5jb21wb25lbnRzIHtcbiAgLmRyb3AtbWVudV9fdHJpZ2dlciB7XG4gICAgYW5jaG9yLW5hbWU6IC0tZHJvcC1tZW51O1xuXG4gICAgJjpoYXMofiA6cG9wb3Zlci1vcGVuKTo6YmVmb3JlIHtcbiAgICAgIHJvdGF0ZTogMTgwZGVnO1xuICAgIH1cbiAgfVxuXG4gIC5kcm9wLW1lbnUge1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoXG4gICAgICAtLWRyb3AtbWVudS1iYWNrZ3JvdW5kLFxuICAgICAgdmFyKC0tYmFja2dyb3VuZCwgdmFyKC0tY29sb3VyLWJhY2tncm91bmQpKVxuICAgICk7XG4gICAgY29sb3I6IHZhcihcbiAgICAgIC0tZHJvcC1tZW51LWZvcmVncm91bmQsXG4gICAgICB2YXIoLS1mb3JlZ3JvdW5kLCB2YXIoLS1jb2xvdXItZm9yZWdyb3VuZCkpXG4gICAgKTtcbiAgICBib3JkZXI6IHZhcigtLWxpbmUtd2lkdGgsIDJweCkgc29saWRcbiAgICAgIHZhcigtLWxpbmUtY29sb3VyLCB2YXIoLS1jb2xvdXItYm9yZGVyKSk7XG4gICAgbWFyZ2luOiAwO1xuXG4gICAgQHN1cHBvcnRzIChpbmxpbmUtc2l6ZTogYW5jaG9yLXNpemUod2lkdGgpKSB7XG4gICAgICBwb3NpdGlvbi1hbmNob3I6IC0tZHJvcC1tZW51O1xuICAgICAgaW5zZXQtYXJlYTogYm90dG9tO1xuICAgICAgcG9zaXRpb24tYXJlYTogYm90dG9tO1xuICAgICAgcG9zaXRpb24tdHJ5LW9wdGlvbnM6IGZsaXAtYmxvY2s7XG4gICAgICBwb3NpdGlvbi10cnktZmFsbGJhY2s6IGZsaXAtYmxvY2s7XG4gICAgICBtaW4taW5saW5lLXNpemU6IGFuY2hvci1zaXplKHdpZHRoKTtcbiAgICB9XG5cbiAgICAmOnBvcG92ZXItb3BlbiB7XG4gICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICB9XG5cbiAgICAmIGJ1dHRvbiB7XG4gICAgICBhcHBlYXJhbmNlOiBub25lO1xuICAgICAgbGluZS1oZWlnaHQ6IGluaGVyaXQ7XG4gICAgICBmb250LWZhbWlseTogaW5oZXJpdDtcbiAgICAgIGZvbnQtc2l6ZTogaW5oZXJpdDtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuICAgICAgY29sb3I6IGluaGVyaXQ7XG4gICAgICBib3JkZXI6IHVuc2V0O1xuICAgICAgdGV4dC1hbGlnbjogc3RhcnQ7XG5cbiAgICAgICZbYXJpYS1jaGVja2VkPVwidHJ1ZVwiXSB7XG4gICAgICAgIHRleHQtZGVjb3JhdGlvbi1saW5lOiB1bmRlcmxpbmU7XG4gICAgICB9XG4gICAgfVxuXG4gICAgJiA6aXMoYSwgYnV0dG9uKSB7XG4gICAgICBwYWRkaW5nLWJsb2NrOiB2YXIoLS1zcGFjaW5nLXh4eHMpO1xuICAgICAgcGFkZGluZy1pbmxpbmU6IHZhcigtLXNwYWNpbmcteHMpO1xuICAgICAgY3Vyc29yOiBwb2ludGVyO1xuICAgICAgbWluLWlubGluZS1zaXplOiAxNWNoO1xuICAgIH1cbiAgfVxufVxuIl19 */
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRyb3AtbWVudS5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEseUhBQXlIOztBQUV6SDs7OztFQUlFOztBQUVGO0VBQ0U7SUFDRSx3QkFBd0I7RUFLMUI7O0lBSEU7TUFDRSxjQUFjO0lBQ2hCOztFQUdGO0lBQ0Usa0JBQWtCO0lBQ2xCOzs7S0FHQztJQUNEOzs7S0FHQztJQUNEOzhDQUMwQztJQUQxQzs4Q0FDMEM7SUFDMUMsU0FBUztFQXFDWDs7SUFuQ0U7O0VBZEY7TUFlSSw0QkFBNEI7TUFDNUIsa0JBQWtCO01BQ2xCLHFCQUFxQjtNQUNyQixnQ0FBZ0M7TUFDaEMsaUNBQWlDO01BQ2pDLG1DQUFtQztFQTZCdkM7SUE1QkU7O0lBRUE7TUFDRSxhQUFhO01BQ2Isc0JBQXNCO0lBQ3hCOztJQUVBO01BQ0Usd0JBQWdCO1NBQWhCLHFCQUFnQjtjQUFoQixnQkFBZ0I7TUFDaEIsb0JBQW9CO01BQ3BCLG9CQUFvQjtNQUNwQixrQkFBa0I7TUFDbEIsNkJBQTZCO01BQzdCLGNBQWM7TUFDZCxnQ0FBYTtNQUFiLGVBQWE7TUFDYixpQkFBaUI7SUFLbkI7O01BSEU7UUFDRSwrQkFBK0I7TUFDakM7O0lBR0Y7TUFDRSxrQ0FBa0M7TUFDbEMsaUNBQWlDO01BQ2pDLGVBQWU7TUFDZixxQkFBcUI7SUFDdkI7QUFFSiIsImZpbGUiOiJkcm9wLW1lbnUuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyogc3R5bGVsaW50LWRpc2FibGUgc2VsZWN0b3ItY2xhc3MtcGF0dGVybiwgZnVuY3Rpb24tbm8tdW5rbm93biwgcHJvcGVydHktbm8tdW5rbm93biwgc2VsZWN0b3ItcHNldWRvLWNsYXNzLW5vLXVua25vd24gKi9cblxuLyoqXG4gKiBEcm9wIG1lbnVcbiAqXG4gKiAqKkV4cGVyaW1lbnRhbCoqIFVzaW5nIG5ldyBDU1MgQW5jaG9yaW5nIGFuZCBQb3BvdmVyIEFQSSdzLCByZXF1aXJlcyBKUyBwb2x5ZmlsbC5cbiAqL1xuXG5AbGF5ZXIgZGVzaWduLXN5c3RlbS5jb21wb25lbnRzIHtcbiAgLm14LWRyb3AtbWVudV9fdHJpZ2dlciB7XG4gICAgYW5jaG9yLW5hbWU6IC0tZHJvcC1tZW51O1xuXG4gICAgJjpoYXMofiA6cG9wb3Zlci1vcGVuKTo6YmVmb3JlIHtcbiAgICAgIHJvdGF0ZTogMTgwZGVnO1xuICAgIH1cbiAgfVxuXG4gIC5teC1kcm9wLW1lbnUge1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoXG4gICAgICAtLWRyb3AtbWVudS1iYWNrZ3JvdW5kLFxuICAgICAgdmFyKC0tYmFja2dyb3VuZCwgdmFyKC0tY29sb3VyLWJhY2tncm91bmQpKVxuICAgICk7XG4gICAgY29sb3I6IHZhcihcbiAgICAgIC0tZHJvcC1tZW51LWZvcmVncm91bmQsXG4gICAgICB2YXIoLS1mb3JlZ3JvdW5kLCB2YXIoLS1jb2xvdXItZm9yZWdyb3VuZCkpXG4gICAgKTtcbiAgICBib3JkZXI6IHZhcigtLWxpbmUtd2lkdGgsIDJweCkgc29saWRcbiAgICAgIHZhcigtLWxpbmUtY29sb3VyLCB2YXIoLS1jb2xvdXItYm9yZGVyKSk7XG4gICAgbWFyZ2luOiAwO1xuXG4gICAgQHN1cHBvcnRzIChpbmxpbmUtc2l6ZTogYW5jaG9yLXNpemUod2lkdGgpKSB7XG4gICAgICBwb3NpdGlvbi1hbmNob3I6IC0tZHJvcC1tZW51O1xuICAgICAgaW5zZXQtYXJlYTogYm90dG9tO1xuICAgICAgcG9zaXRpb24tYXJlYTogYm90dG9tO1xuICAgICAgcG9zaXRpb24tdHJ5LW9wdGlvbnM6IGZsaXAtYmxvY2s7XG4gICAgICBwb3NpdGlvbi10cnktZmFsbGJhY2s6IGZsaXAtYmxvY2s7XG4gICAgICBtaW4taW5saW5lLXNpemU6IGFuY2hvci1zaXplKHdpZHRoKTtcbiAgICB9XG5cbiAgICAmOnBvcG92ZXItb3BlbiB7XG4gICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICB9XG5cbiAgICAmIGJ1dHRvbiB7XG4gICAgICBhcHBlYXJhbmNlOiBub25lO1xuICAgICAgbGluZS1oZWlnaHQ6IGluaGVyaXQ7XG4gICAgICBmb250LWZhbWlseTogaW5oZXJpdDtcbiAgICAgIGZvbnQtc2l6ZTogaW5oZXJpdDtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuICAgICAgY29sb3I6IGluaGVyaXQ7XG4gICAgICBib3JkZXI6IHVuc2V0O1xuICAgICAgdGV4dC1hbGlnbjogc3RhcnQ7XG5cbiAgICAgICZbYXJpYS1jaGVja2VkPVwidHJ1ZVwiXSB7XG4gICAgICAgIHRleHQtZGVjb3JhdGlvbi1saW5lOiB1bmRlcmxpbmU7XG4gICAgICB9XG4gICAgfVxuXG4gICAgJiA6aXMoYSwgYnV0dG9uKSB7XG4gICAgICBwYWRkaW5nLWJsb2NrOiB2YXIoLS1zcGFjaW5nLXh4eHMpO1xuICAgICAgcGFkZGluZy1pbmxpbmU6IHZhcigtLXNwYWNpbmcteHMpO1xuICAgICAgY3Vyc29yOiBwb2ludGVyO1xuICAgICAgbWluLWlubGluZS1zaXplOiAxNWNoO1xuICAgIH1cbiAgfVxufVxuIl19 */

package/dist/build/drop-menu.entry.js

@@ -1,129 +1,2 @@
-import { m as makeAnchor } from "./chunks/utilities-B4YZb689.js";
-import { K as Keyboard } from "./chunks/keyboard-C73DHu0c.js";
-class DropMenu extends HTMLElement {
-  constructor() {
-    super();
-    this.keyboard = new Keyboard();
-    this.handleSelect = (event) => {
-      const target = event.target;
-      this.items.forEach((item) => {
-        if (!(item instanceof HTMLButtonElement)) return;
-        item.setAttribute("aria-checked", String(item === target));
-      });
-      const newEvent = new CustomEvent("drop-menu-select", {
-        bubbles: true,
-        cancelable: true,
-        detail: {
-          event,
-          target
-        }
-      });
-      this.menu.dispatchEvent(newEvent);
-      if (this.closeOnClick) this.menu.togglePopover();
-    };
-    this.handleToggle = ({ newState }) => {
-      const handleClose = () => this.menu.togglePopover();
-      if (newState === "open") {
-        this.keyboard.attachPopup(this.menu.id, handleClose);
-      } else {
-        this.keyboard.detachPopup(this.menu.id);
-      }
-    };
-    this.attachKeyboardMenu = () => {
-      this.keyboard.attachMenu(this.menu, this.items);
-    };
-    this.detachKeyboardMenu = () => {
-      this.keyboard.detachMenu();
-    };
-    this.generatedId = () => {
-      const string = this.trigger?.textContent?.trim();
-      return !string ? "" : makeAnchor(string);
-    };
-    this.internals_ = this.attachInternals();
-    this.controller = new AbortController();
-  }
-  async connectedCallback() {
-    if (!this.menu || !this.trigger) return;
-    if (!("anchorName" in document.documentElement.style)) {
-      const { default: Polyfills } = await import("./chunks/polyfills-CJ5uTmUJ.js");
-      new Polyfills(this.menu);
-    }
-    if (!Object.hasOwn(HTMLElement, "popover")) {
-      await import("./chunks/popover-wbPSyFRj.js");
-    }
-    this.closeOnClick = this.hasAttribute("closeonclick");
-    const { signal } = this.controller;
-    document.addEventListener(
-      "click",
-      (event) => {
-        const { target } = event;
-        if (target !== this.menu && ![...this.items].includes(
-          target
-        ))
-          return;
-        this.handleSelect(event);
-        event.preventDefault();
-      },
-      {
-        signal
-      }
-    );
-    document.addEventListener(
-      "keydown",
-      (event) => {
-        const { target, key } = event;
-        if (target !== this.menu && ![...this.items].includes(
-          target
-        ))
-          return;
-        if (key === "Enter") this.handleSelect(event);
-        event.preventDefault();
-      },
-      {
-        signal
-      }
-    );
-    this.keyboard.attachEventListeners(signal);
-    this.menu.addEventListener("focusin", this.attachKeyboardMenu, {
-      signal
-    });
-    this.menu.addEventListener("focusout", this.detachKeyboardMenu, {
-      signal
-    });
-    this.menu.addEventListener("toggle", this.handleToggle, {
-      signal
-    });
-  }
-  disconnectedCallback() {
-    this.controller.abort();
-    this.keyboard.detachMenu();
-  }
-  get menu() {
-    const menu = this.querySelector("[popover]");
-    if (!menu) {
-      throw new Error(`${this.localName} must contain a <div popover> element.`);
-    }
-    menu.id = menu.id || this.generatedId();
-    return menu;
-  }
-  get items() {
-    const items = this.menu.querySelectorAll(":scope > *");
-    if (!items) {
-      throw new Error(`${this.localName} must contain some menu items.`);
-    }
-    return items;
-  }
-  get trigger() {
-    const trigger = this.querySelector(
-      `[popovertarget=${this.menu?.id}]`
-    );
-    if (!trigger) {
-      throw new Error(
-        `${this.localName} must contain a <button popovertarget="${this.menu.id}">`
-      );
-    }
-    return trigger;
-  }
-}
-customElements.define("mx-dropmenu", DropMenu);
+import "./chunks/drop-menu.entry-BC6x9vst.js";
 //# sourceMappingURL=drop-menu.entry.js.map

package/dist/build/drop-menu.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"drop-menu.entry.js","sources":["../../src/Component/DropMenu/Elements/DropMenu.ts"],"sourcesContent":["/**\n * DropMenu\n * @file Create a DropMenu using the Popover and Anchor APIs\n */\n\nimport { Keyboard, makeAnchor } from \"../../../Utility/utilities\"\n\nexport type DropMenuEvent = CustomEvent<{\n  event: MouseEvent | KeyboardEvent\n  target: HTMLButtonElement | HTMLAnchorElement\n}>\n\nexport default class DropMenu extends HTMLElement {\n  internals_: ElementInternals\n  controller: AbortController\n  keyboard: Keyboard = new Keyboard()\n  closeOnClick: boolean\n\n  constructor() {\n    super()\n    this.internals_ = this.attachInternals()\n    this.controller = new AbortController()\n  }\n\n  async connectedCallback() {\n    if (!this.menu || !this.trigger) return\n\n    // Polyfill anchor (everywhere so far).\n    if (!(\"anchorName\" in document.documentElement.style)) {\n      const { default: Polyfills } = await import(\"../polyfills.js\")\n      new Polyfills(this.menu) // eslint-disable-line no-new\n    }\n    // Polyfill popover (FF only)\n    if (!Object.hasOwn(HTMLElement, \"popover\")) {\n      await import(\"@oddbird/popover-polyfill\")\n    }\n    this.closeOnClick = this.hasAttribute(\"closeonclick\")\n\n    const { signal }: AbortController = this.controller\n    document.addEventListener(\n      \"click\",\n      (event: MouseEvent): void => {\n        const { target } = event\n        if (\n          (target as HTMLElement) !== this.menu &&\n          ![...this.items].includes(\n            target as HTMLButtonElement | HTMLAnchorElement,\n          )\n        )\n          return\n        this.handleSelect(event)\n        event.preventDefault()\n      },\n      {\n        signal,\n      },\n    )\n\n    document.addEventListener(\n      \"keydown\",\n      (event: KeyboardEvent): void => {\n        const { target, key } = event\n        if (\n          (target as HTMLElement) !== this.menu &&\n          ![...this.items].includes(\n            target as HTMLButtonElement | HTMLAnchorElement,\n          )\n        )\n          return\n        if (key === \"Enter\") this.handleSelect(event)\n        event.preventDefault()\n      },\n      {\n        signal,\n      },\n    )\n\n    this.keyboard.attachEventListeners(signal)\n    this.menu.addEventListener(\"focusin\", this.attachKeyboardMenu, {\n      signal,\n    })\n    this.menu.addEventListener(\"focusout\", this.detachKeyboardMenu, {\n      signal,\n    })\n    this.menu.addEventListener(\"toggle\", this.handleToggle, {\n      signal,\n    })\n  }\n\n  disconnectedCallback(): void {\n    this.controller.abort()\n    this.keyboard.detachMenu()\n  }\n\n  handleSelect = (event: MouseEvent | KeyboardEvent): void => {\n    const target = event.target as HTMLButtonElement | HTMLAnchorElement\n    this.items.forEach(item => {\n      if (!(item instanceof HTMLButtonElement)) return\n      item.setAttribute(\"aria-checked\", String(item === target))\n    })\n    const newEvent: DropMenuEvent = new CustomEvent(\"drop-menu-select\", {\n      bubbles: true,\n      cancelable: true,\n      detail: {\n        event,\n        target,\n      },\n    })\n    this.menu.dispatchEvent(newEvent)\n    if (this.closeOnClick) this.menu.togglePopover()\n  }\n\n  handleToggle = ({ newState }: ToggleEvent): void => {\n    const handleClose = () => this.menu.togglePopover()\n    if (newState === \"open\") {\n      this.keyboard.attachPopup(this.menu.id, handleClose)\n    } else {\n      this.keyboard.detachPopup(this.menu.id)\n    }\n  }\n\n  attachKeyboardMenu = (): void => {\n    this.keyboard.attachMenu(this.menu, this.items)\n  }\n\n  detachKeyboardMenu = (): void => {\n    this.keyboard.detachMenu()\n  }\n\n  get menu(): HTMLDivElement | null {\n    const menu: HTMLDivElement | null = this.querySelector(\"[popover]\")\n    if (!menu) {\n      throw new Error(`${this.localName} must contain a <div popover> element.`)\n    }\n    menu.id = menu.id || this.generatedId()\n    return menu\n  }\n\n  get items(): NodeListOf<HTMLButtonElement | HTMLAnchorElement> {\n    const items: NodeListOf<HTMLButtonElement | HTMLAnchorElement> =\n      this.menu.querySelectorAll(\":scope > *\")\n    if (!items) {\n      throw new Error(`${this.localName} must contain some menu items.`)\n    }\n    return items\n  }\n\n  get trigger(): HTMLButtonElement | null {\n    const trigger: HTMLButtonElement | null = this.querySelector(\n      `[popovertarget=${this.menu?.id}]`,\n    )\n    if (!trigger) {\n      throw new Error(\n        `${this.localName} must contain a <button popovertarget=\"${this.menu.id}\">`,\n      )\n    }\n    return trigger\n  }\n\n  generatedId = (): string => {\n    const string: string | undefined = this.trigger?.textContent?.trim()\n    return !string ? \"\" : makeAnchor(string)\n  }\n}\n\ncustomElements.define(\"mx-dropmenu\", DropMenu)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-dropmenu\": DropMenu\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"drop-menu.entry.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/build/footer.css

@@ -3,59 +3,149 @@
  */
 
 @layer design-system.layouts {
-  .footer {
+  .mx-footer {
     position: sticky;
     inset-block-start: 100vh;
   }
 
-    .footer .nav__toggle {
-      display: none;
+  .mx-footer__inner {
+    display: grid;
+    grid-template-areas: "brand" "social" "navigation" "copyright" "links";
+  }
+
+    @media (min-width: 720px) {
+
+  .mx-footer__inner {
+      grid-template-areas: "brand navigation" "social navigation" "copyright links";
+      gap: 0;
+  }
     }
 
-    .footer .grid {
-      row-gap: var(--footer-row-gap, var(--spacing-xxxl));
+    .mx-footer__inner:has(.mx-footer__aoc) {
+      grid-template-areas: "aoc" "brand" "social" "navigation" "copyright" "links";
     }
-    @media (max-width: 719.98px) {
 
-  .footer__logo {
-      text-align: center;
-  }
+      @media (min-width: 720px) {
+
+    .mx-footer__inner:has(.mx-footer__aoc) {
+        grid-template-areas: "aoc aoc" "brand navigation" "social navigation" "copyright links";
+    }
+      }
+
+    .mx-footer__inner .mx-logo {
+      grid-area: brand;
+      margin-block-end: var(--gap);
+    }
+
+    .mx-footer__inner .mx-social-links {
+      grid-area: social;
+      align-self: end;
+    }
+
+    .mx-footer__inner .mx-footer__copyright {
+      grid-area: copyright;
+      align-self: end;
+    }
+
+      .mx-footer__inner .mx-footer__copyright:not(:first-child) {
+        padding-block-start: var(--spacing-s);
+        border-block-start: 1px solid
+          var(--line-colour, var(--colour-border));
+        border-block-start: var(--line-width, 1px) solid
+          var(--line-colour, var(--colour-border));
+        margin-block-start: var(--gap);
+      }
+          @media (min-width: 720px) {
+
+        .mx-footer__inner .mx-footer__copyright:not(:first-child) + .mx-footer__links {
+            padding-block-start: var(--spacing-s);
+            border-block-start: 1px solid
+              var(--line-colour, var(--colour-border));
+            border-block-start: var(--line-width, 1px) solid
+              var(--line-colour, var(--colour-border));
+        }
+          }
+
+    .mx-footer__inner .mx-footer__links {
+      grid-area: links;
+      align-self: end;
     }
 
-  .footer__meta {
-    padding-block-start: var(--spacing-s);
-    border-block-start: 1px solid
+      @media (min-width: 720px) {
+
+    .mx-footer__inner .mx-footer__links {
+        justify-content: end;
+    }
+      }
+
+      .mx-footer__inner .mx-footer__links:not(:first-child) {
+        margin-block-start: var(--gap);
+      }
+
+  .mx-footer__aoc {
+    grid-area: aoc;
+    padding-block-end: var(--footer-row-gap, var(--spacing-xxl));
+    border-block-end: 1px solid
       var(--line-colour, var(--colour-border));
-    border-block-start: var(--line-width, 1px) solid
+    border-block-end: var(--line-width, 1px) solid
       var(--line-colour, var(--colour-border));
+    margin-block-end: var(--gap);
     text-align: center;
-    line-height: 2;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: var(--gap);
   }
 
-    @media (max-width: 419.98px) {
+  .mx-nav--footer {
+    grid-area: navigation;
+    margin-block: var(--spacing-xxxl) var(--spacing-l);
+  }
+
+    @media (min-width: 720px) {
 
-  .footer__meta {
-      flex-direction: column;
+  .mx-nav--footer {
+      justify-self: end;
+      margin-block: 0;
   }
     }
-      @media (max-width: 419.98px) {
 
-    .footer__meta .nav--inline > ul {
-        flex-direction: column;
-        gap: var(--gap-s);
+    .mx-nav--footer:not(:has(.mx-nav__level-2)) ul {
+      flex-flow: row wrap;
+      align-items: center;
+      gap: var(--spacing-l) var(--spacing-xxxl);
     }
+      .mx-nav--footer:has(.mx-nav__level-2) ul {
+        display: grid;
+      }
+
+      .mx-nav--footer:has(.mx-nav__level-2) .mx-nav__level-1 {
+        gap: var(--spacing-l) var(--spacing-xxxl);
+        grid-template-columns: 1fr 1fr;
       }
+
+        @media (min-width: 720px) {
+
+      .mx-nav--footer:has(.mx-nav__level-2) .mx-nav__level-1 {
+          grid-template-columns: 1fr 1fr 1fr;
+      }
+        }
+
+        .mx-nav--footer:has(.mx-nav__level-2) .mx-nav__level-1 > li > a {
+          display: inline-block;
+          margin-block-end: var(--spacing-l);
+          font-weight: var(--font-weight-bold);
+        }
+
+      .mx-nav--footer:has(.mx-nav__level-2) .mx-nav__level-2 {
+        gap: var(--spacing-xs);
+      }
+
+    .mx-nav--footer .mx-nav__toggle {
+      display: none;
+    }
 }
 
 @media print {
-  .footer {
+  .mx-footer {
     display: none;
   }
 }
 
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZvb3Rlci5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0VBRUU7O0FBRUY7RUFDRTtJQUNFLGdCQUFnQjtJQUNoQix3QkFBd0I7RUFTMUI7O0lBUEU7TUFDRSxhQUFhO0lBQ2Y7O0lBRUE7TUFDRSxtREFBbUQ7SUFDckQ7SUFJQTs7RUFERjtNQUVJLGtCQUFrQjtFQUV0QjtJQURFOztFQUdGO0lBQ0UscUNBQXFDO0lBQ3JDOzhDQUMwQztJQUQxQzs4Q0FDMEM7SUFDMUMsa0JBQWtCO0lBQ2xCLGNBQWM7SUFDZCxhQUFhO0lBQ2IsOEJBQThCO0lBQzlCLG1CQUFtQjtJQUNuQixlQUFlO0lBQ2YsZUFBZTtFQVlqQjs7SUFWRTs7RUFaRjtNQWFJLHNCQUFzQjtFQVMxQjtJQVJFO01BR0U7O0lBREY7UUFFSSxzQkFBc0I7UUFDdEIsaUJBQWlCO0lBRXJCO01BREU7QUFHTjs7QUFFQTtFQUNFO0lBQ0UsYUFBYTtFQUNmO0FBQ0YiLCJmaWxlIjoiZm9vdGVyLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2xvYmFsIEZvb3RlclxuICovXG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmxheW91dHMge1xuICAuZm9vdGVyIHtcbiAgICBwb3NpdGlvbjogc3RpY2t5O1xuICAgIGluc2V0LWJsb2NrLXN0YXJ0OiAxMDB2aDtcblxuICAgICYgLm5hdl9fdG9nZ2xlIHtcbiAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgfVxuXG4gICAgJiAuZ3JpZCB7XG4gICAgICByb3ctZ2FwOiB2YXIoLS1mb290ZXItcm93LWdhcCwgdmFyKC0tc3BhY2luZy14eHhsKSk7XG4gICAgfVxuICB9XG5cbiAgLmZvb3Rlcl9fbG9nbyB7XG4gICAgQG1lZGlhICgtLW1lZGl1bS1kb3duKSB7XG4gICAgICB0ZXh0LWFsaWduOiBjZW50ZXI7XG4gICAgfVxuICB9XG5cbiAgLmZvb3Rlcl9fbWV0YSB7XG4gICAgcGFkZGluZy1ibG9jay1zdGFydDogdmFyKC0tc3BhY2luZy1zKTtcbiAgICBib3JkZXItYmxvY2stc3RhcnQ6IHZhcigtLWxpbmUtd2lkdGgsIDFweCkgc29saWRcbiAgICAgIHZhcigtLWxpbmUtY29sb3VyLCB2YXIoLS1jb2xvdXItYm9yZGVyKSk7XG4gICAgdGV4dC1hbGlnbjogY2VudGVyO1xuICAgIGxpbmUtaGVpZ2h0OiAyO1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgZmxleC13cmFwOiB3cmFwO1xuICAgIGdhcDogdmFyKC0tZ2FwKTtcblxuICAgIEBtZWRpYSAoLS14LXNtYWxsLWRvd24pIHtcbiAgICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gICAgfVxuXG4gICAgJiAubmF2LS1pbmxpbmUgPiB1bCB7XG4gICAgICBAbWVkaWEgKC0teC1zbWFsbC1kb3duKSB7XG4gICAgICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gICAgICAgIGdhcDogdmFyKC0tZ2FwLXMpO1xuICAgICAgfVxuICAgIH1cbiAgfVxufVxuXG5AbWVkaWEgcHJpbnQge1xuICAuZm9vdGVyIHtcbiAgICBkaXNwbGF5OiBub25lO1xuICB9XG59XG4iXX0= */
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZvb3Rlci5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0VBRUU7O0FBRUY7RUFDRTtJQUNFLGdCQUFnQjtJQUNoQix3QkFBd0I7RUFDMUI7O0VBRUE7SUFDRSxhQUFhO0lBQ2Isc0VBQXNFO0VBeUR4RTs7SUF2REU7O0VBSkY7TUFLSSw2RUFBNkU7TUFDN0UsTUFBTTtFQXFEVjtJQXBERTs7SUFFQTtNQUNFLDRFQUE0RTtJQUs5RTs7TUFIRTs7SUFIRjtRQUlJLHVGQUF1RjtJQUUzRjtNQURFOztJQUdGO01BQ0UsZ0JBQWdCO01BQ2hCLDRCQUE0QjtJQUM5Qjs7SUFFQTtNQUNFLGlCQUFpQjtNQUNqQixlQUFlO0lBQ2pCOztJQUVBO01BQ0Usb0JBQW9CO01BQ3BCLGVBQWU7SUFnQmpCOztNQWRFO1FBQ0UscUNBQXFDO1FBQ3JDO2tEQUMwQztRQUQxQztrREFDMEM7UUFDMUMsOEJBQThCO01BU2hDO1VBTkk7O1FBREY7WUFFSSxxQ0FBcUM7WUFDckM7c0RBQzBDO1lBRDFDO3NEQUMwQztRQUU5QztVQURFOztJQUtOO01BQ0UsZ0JBQWdCO01BQ2hCLGVBQWU7SUFTakI7O01BUEU7O0lBSkY7UUFLSSxvQkFBb0I7SUFNeEI7TUFMRTs7TUFFQTtRQUNFLDhCQUE4QjtNQUNoQzs7RUFJSjtJQUNFLGNBQWM7SUFDZCw0REFBNEQ7SUFDNUQ7OENBQzBDO0lBRDFDOzhDQUMwQztJQUMxQyw0QkFBNEI7SUFDNUIsa0JBQWtCO0VBQ3BCOztFQUVBO0lBQ0UscUJBQXFCO0lBQ3JCLGtEQUFrRDtFQXlDcEQ7O0lBdkNFOztFQUpGO01BS0ksaUJBQWlCO01BQ2pCLGVBQWU7RUFxQ25CO0lBcENFOztJQUVBO01BQ0UsbUJBQW1CO01BQ25CLG1CQUFtQjtNQUNuQix5Q0FBeUM7SUFDM0M7TUFHRTtRQUNFLGFBQWE7TUFDZjs7TUFFQTtRQUNFLHlDQUF5QztRQUN6Qyw4QkFBOEI7TUFXaEM7O1FBVEU7O01BSkY7VUFLSSxrQ0FBa0M7TUFRdEM7UUFQRTs7UUFFQTtVQUNFLHFCQUFxQjtVQUNyQixrQ0FBa0M7VUFDbEMsb0NBQW9DO1FBQ3RDOztNQUdGO1FBQ0Usc0JBQXNCO01BQ3hCOztJQUdGO01BQ0UsYUFBYTtJQUNmO0FBRUo7O0FBRUE7RUFDRTtJQUNFLGFBQWE7RUFDZjtBQUNGIiwiZmlsZSI6ImZvb3Rlci5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEdsb2JhbCBGb290ZXJcbiAqL1xuXG5AbGF5ZXIgZGVzaWduLXN5c3RlbS5sYXlvdXRzIHtcbiAgLm14LWZvb3RlciB7XG4gICAgcG9zaXRpb246IHN0aWNreTtcbiAgICBpbnNldC1ibG9jay1zdGFydDogMTAwdmg7XG4gIH1cblxuICAubXgtZm9vdGVyX19pbm5lciB7XG4gICAgZGlzcGxheTogZ3JpZDtcbiAgICBncmlkLXRlbXBsYXRlLWFyZWFzOiBcImJyYW5kXCIgXCJzb2NpYWxcIiBcIm5hdmlnYXRpb25cIiBcImNvcHlyaWdodFwiIFwibGlua3NcIjtcblxuICAgIEBtZWRpYSAoLS1tZWRpdW0tdXApIHtcbiAgICAgIGdyaWQtdGVtcGxhdGUtYXJlYXM6IFwiYnJhbmQgbmF2aWdhdGlvblwiIFwic29jaWFsIG5hdmlnYXRpb25cIiBcImNvcHlyaWdodCBsaW5rc1wiO1xuICAgICAgZ2FwOiAwO1xuICAgIH1cblxuICAgICY6aGFzKC5teC1mb290ZXJfX2FvYykge1xuICAgICAgZ3JpZC10ZW1wbGF0ZS1hcmVhczogXCJhb2NcIiBcImJyYW5kXCIgXCJzb2NpYWxcIiBcIm5hdmlnYXRpb25cIiBcImNvcHlyaWdodFwiIFwibGlua3NcIjtcblxuICAgICAgQG1lZGlhICgtLW1lZGl1bS11cCkge1xuICAgICAgICBncmlkLXRlbXBsYXRlLWFyZWFzOiBcImFvYyBhb2NcIiBcImJyYW5kIG5hdmlnYXRpb25cIiBcInNvY2lhbCBuYXZpZ2F0aW9uXCIgXCJjb3B5cmlnaHQgbGlua3NcIjtcbiAgICAgIH1cbiAgICB9XG5cbiAgICAmIC5teC1sb2dvIHtcbiAgICAgIGdyaWQtYXJlYTogYnJhbmQ7XG4gICAgICBtYXJnaW4tYmxvY2stZW5kOiB2YXIoLS1nYXApO1xuICAgIH1cblxuICAgICYgLm14LXNvY2lhbC1saW5rcyB7XG4gICAgICBncmlkLWFyZWE6IHNvY2lhbDtcbiAgICAgIGFsaWduLXNlbGY6IGVuZDtcbiAgICB9XG5cbiAgICAmIC5teC1mb290ZXJfX2NvcHlyaWdodCB7XG4gICAgICBncmlkLWFyZWE6IGNvcHlyaWdodDtcbiAgICAgIGFsaWduLXNlbGY6IGVuZDtcblxuICAgICAgJjpub3QoOmZpcnN0LWNoaWxkKSB7XG4gICAgICAgIHBhZGRpbmctYmxvY2stc3RhcnQ6IHZhcigtLXNwYWNpbmctcyk7XG4gICAgICAgIGJvcmRlci1ibG9jay1zdGFydDogdmFyKC0tbGluZS13aWR0aCwgMXB4KSBzb2xpZFxuICAgICAgICAgIHZhcigtLWxpbmUtY29sb3VyLCB2YXIoLS1jb2xvdXItYm9yZGVyKSk7XG4gICAgICAgIG1hcmdpbi1ibG9jay1zdGFydDogdmFyKC0tZ2FwKTtcblxuICAgICAgICAmICsgLm14LWZvb3Rlcl9fbGlua3Mge1xuICAgICAgICAgIEBtZWRpYSAoLS1tZWRpdW0tdXApIHtcbiAgICAgICAgICAgIHBhZGRpbmctYmxvY2stc3RhcnQ6IHZhcigtLXNwYWNpbmctcyk7XG4gICAgICAgICAgICBib3JkZXItYmxvY2stc3RhcnQ6IHZhcigtLWxpbmUtd2lkdGgsIDFweCkgc29saWRcbiAgICAgICAgICAgICAgdmFyKC0tbGluZS1jb2xvdXIsIHZhcigtLWNvbG91ci1ib3JkZXIpKTtcbiAgICAgICAgICB9XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9XG5cbiAgICAmIC5teC1mb290ZXJfX2xpbmtzIHtcbiAgICAgIGdyaWQtYXJlYTogbGlua3M7XG4gICAgICBhbGlnbi1zZWxmOiBlbmQ7XG5cbiAgICAgIEBtZWRpYSAoLS1tZWRpdW0tdXApIHtcbiAgICAgICAganVzdGlmeS1jb250ZW50OiBlbmQ7XG4gICAgICB9XG5cbiAgICAgICY6bm90KDpmaXJzdC1jaGlsZCkge1xuICAgICAgICBtYXJnaW4tYmxvY2stc3RhcnQ6IHZhcigtLWdhcCk7XG4gICAgICB9XG4gICAgfVxuICB9XG5cbiAgLm14LWZvb3Rlcl9fYW9jIHtcbiAgICBncmlkLWFyZWE6IGFvYztcbiAgICBwYWRkaW5nLWJsb2NrLWVuZDogdmFyKC0tZm9vdGVyLXJvdy1nYXAsIHZhcigtLXNwYWNpbmcteHhsKSk7XG4gICAgYm9yZGVyLWJsb2NrLWVuZDogdmFyKC0tbGluZS13aWR0aCwgMXB4KSBzb2xpZFxuICAgICAgdmFyKC0tbGluZS1jb2xvdXIsIHZhcigtLWNvbG91ci1ib3JkZXIpKTtcbiAgICBtYXJnaW4tYmxvY2stZW5kOiB2YXIoLS1nYXApO1xuICAgIHRleHQtYWxpZ246IGNlbnRlcjtcbiAgfVxuXG4gIC5teC1uYXYtLWZvb3RlciB7XG4gICAgZ3JpZC1hcmVhOiBuYXZpZ2F0aW9uO1xuICAgIG1hcmdpbi1ibG9jazogdmFyKC0tc3BhY2luZy14eHhsKSB2YXIoLS1zcGFjaW5nLWwpO1xuXG4gICAgQG1lZGlhICgtLW1lZGl1bS11cCkge1xuICAgICAganVzdGlmeS1zZWxmOiBlbmQ7XG4gICAgICBtYXJnaW4tYmxvY2s6IDA7XG4gICAgfVxuXG4gICAgJjpub3QoOmhhcygubXgtbmF2X19sZXZlbC0yKSkgdWwge1xuICAgICAgZmxleC1mbG93OiByb3cgd3JhcDtcbiAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgICBnYXA6IHZhcigtLXNwYWNpbmctbCkgdmFyKC0tc3BhY2luZy14eHhsKTtcbiAgICB9XG5cbiAgICAmOmhhcygubXgtbmF2X19sZXZlbC0yKSB7XG4gICAgICAmIHVsIHtcbiAgICAgICAgZGlzcGxheTogZ3JpZDtcbiAgICAgIH1cblxuICAgICAgJiAubXgtbmF2X19sZXZlbC0xIHtcbiAgICAgICAgZ2FwOiB2YXIoLS1zcGFjaW5nLWwpIHZhcigtLXNwYWNpbmcteHh4bCk7XG4gICAgICAgIGdyaWQtdGVtcGxhdGUtY29sdW1uczogMWZyIDFmcjtcblxuICAgICAgICBAbWVkaWEgKC0tbWVkaXVtLXVwKSB7XG4gICAgICAgICAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiAxZnIgMWZyIDFmcjtcbiAgICAgICAgfVxuXG4gICAgICAgICYgPiBsaSA+IGEge1xuICAgICAgICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgICAgICAgICBtYXJnaW4tYmxvY2stZW5kOiB2YXIoLS1zcGFjaW5nLWwpO1xuICAgICAgICAgIGZvbnQtd2VpZ2h0OiB2YXIoLS1mb250LXdlaWdodC1ib2xkKTtcbiAgICAgICAgfVxuICAgICAgfVxuXG4gICAgICAmIC5teC1uYXZfX2xldmVsLTIge1xuICAgICAgICBnYXA6IHZhcigtLXNwYWNpbmcteHMpO1xuICAgICAgfVxuICAgIH1cblxuICAgICYgLm14LW5hdl9fdG9nZ2xlIHtcbiAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgfVxuICB9XG59XG5cbkBtZWRpYSBwcmludCB7XG4gIC5teC1mb290ZXIge1xuICAgIGRpc3BsYXk6IG5vbmU7XG4gIH1cbn1cbiJdfQ== */