@pnx-mixtape/mxds 0.0.5 → 0.0.6

package/dist/build/navigation.entry.js

@@ -0,0 +1,123 @@
+import { m as makeAnchor } from "./chunks/utilities-B4YZb689.js";
+import { K as Keyboard } from "./chunks/keyboard-C73DHu0c.js";
+import { D as DisclosureWidget } from "./chunks/disclosure-widget-CQLPJ8Ta.js";
+class Navigation extends HTMLElement {
+  constructor() {
+    super();
+    this.handleDisclosure = ({ detail }) => {
+      const { isOpen, id } = detail;
+      const { item } = this.subNavs.get(id);
+      item.classList.toggle("nav--open");
+      if (isOpen) {
+        this.keyboard.attachPopup(id, this.handleCloseAny);
+      } else {
+        this.keyboard.detachPopup(id);
+      }
+    };
+    this.handleCloseAny = () => {
+      this.subNavs.forEach(({ widget }) => {
+        if (!widget) return;
+        if (widget.isOpen) widget.handleToggle();
+      });
+    };
+    this.handleFlyout = (event) => {
+      const target = event.target;
+      const parent = target.closest("li");
+      if (!parent) return;
+      const subnav = parent.querySelector(":scope > ul");
+      if (!subnav) return;
+      this.subNavs.forEach(({ widget, list }) => {
+        if (!widget) return;
+        if (widget.isOpen) widget.handleToggle();
+        if (list.id === subnav.id) widget.handleToggle();
+      });
+    };
+    this.handleBreakpoint = ({
+      matches
+    }) => {
+      if (matches) {
+        this.addEventListener("mouseover", this.handleFlyout);
+        this.addEventListener("mouseleave", this.handleCloseAny);
+        if (this.edgeCheck) this.handleEdgeCheck();
+      } else {
+        this.removeEventListener("mouseover", this.handleFlyout);
+        this.removeEventListener("mouseleave", this.handleCloseAny);
+      }
+    };
+    this.internals_ = this.attachInternals();
+    this.controller = new AbortController();
+    this.flyout = this.hasAttribute("flyout");
+  }
+  connectedCallback() {
+    const { signal } = this.controller;
+    this.keyboard = new Keyboard();
+    this.keyboard.attachEventListeners(signal);
+    this.addEventListener("focusin", () => {
+      this.keyboard.attachMenu(this, this.links);
+    });
+    this.addEventListener("focusout", () => {
+      this.keyboard.detachMenu();
+    });
+    if (!this.lists.length) return;
+    this.subNavs = /* @__PURE__ */ new Map();
+    this.lists.forEach((list, index) => {
+      const item = list.closest("li");
+      const link = item.querySelector(":scope > a");
+      const id = makeAnchor(`subnav-${index}-${link.textContent}`, 30);
+      const trigger = item.querySelector(
+        ":scope > button.nav__toggle"
+      );
+      if (item && link && trigger) {
+        const labelId = `list-label-${id}`;
+        link.setAttribute("id", labelId);
+        list.setAttribute("id", id);
+        list.setAttribute("aria-labelledby", labelId);
+        const widget = new DisclosureWidget(trigger, list);
+        widget.init();
+        this.subNavs.set(id, { item, trigger, list, link, widget });
+      }
+    });
+    this.addEventListener("disclosure-toggle", this.handleDisclosure);
+    if (!this.flyout) return;
+    this.edgeCheck = this.hasAttribute("edgeCheck");
+    this.mq = this.getAttribute("mq") || "(min-width: 720px)";
+    this.handleBreakpoint(this.breakpoint);
+    this.breakpoint.addEventListener("change", this.handleBreakpoint, {
+      signal
+    });
+  }
+  disconnectedCallback() {
+    this.controller.abort();
+    this.subNavs.forEach((subNav) => subNav.widget.detach());
+  }
+  handleEdgeCheck() {
+    const windowInnerWidth = window.innerWidth;
+    const edgeCheck = new IntersectionObserver(
+      ([{ boundingClientRect, target }], obs) => {
+        if (windowInnerWidth < boundingClientRect.right)
+          target.classList.add("nav--reverse");
+        obs.disconnect();
+      }
+    );
+    this.subNavs.forEach(({ list }) => {
+      edgeCheck.observe(list);
+      const nestedLists = list.querySelectorAll("ul");
+      nestedLists.forEach((nestedList) => edgeCheck.observe(nestedList));
+    });
+  }
+  get links() {
+    const links = this.querySelectorAll("a");
+    if (!links.length) {
+      throw new Error(`${this.localName} must links`);
+    }
+    return links;
+  }
+  get lists() {
+    return this.querySelectorAll("li > ul");
+  }
+  get breakpoint() {
+    return window.matchMedia(this.mq);
+  }
+}
+customElements.define("mx-nav", Navigation);
+//# sourceMappingURL=navigation.entry.js.map

package/dist/build/navigation.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation.entry.js","sources":["../../src/Component/Navigation/Elements/Navigation.ts"],"sourcesContent":["/**\n * Main Navigation\n * @file Drop down navigation handler.\n */\n\nimport {\n  Keyboard,\n  makeAnchor,\n  DisclosureWidget,\n  DisclosureWidgetEvent,\n} from \"../../../Utility/utilities\"\n\ntype SubNavType = {\n  list: HTMLElement\n  trigger: HTMLButtonElement\n  link: HTMLAnchorElement\n  item?: HTMLLIElement\n  widget?: DisclosureWidget\n  linkWidget?: DisclosureWidget\n}\n\nexport default class Navigation extends HTMLElement {\n  internals_: ElementInternals\n  controller: AbortController\n  keyboard: Keyboard\n  subNavs?: Map<string, SubNavType>\n  flyout?: boolean\n  edgeCheck!: boolean\n  mq!: string\n\n  constructor() {\n    super()\n    this.internals_ = this.attachInternals()\n    this.controller = new AbortController()\n    this.flyout = this.hasAttribute(\"flyout\")\n  }\n\n  connectedCallback(): void {\n    const { signal }: AbortController = this.controller\n\n    // Add keyboard navigation events.\n    this.keyboard = new Keyboard()\n    this.keyboard.attachEventListeners(signal)\n\n    // Add keyboard focus handler for menu links.\n    this.addEventListener(\"focusin\", () => {\n      this.keyboard.attachMenu(this, this.links)\n    })\n    this.addEventListener(\"focusout\", () => {\n      this.keyboard.detachMenu()\n    })\n\n    if (!this.lists.length) return\n    this.subNavs = new Map()\n    this.lists.forEach((list: HTMLUListElement, index: number): void => {\n      const item: HTMLLIElement = list.closest(\"li\")\n      const link: HTMLAnchorElement = item.querySelector(\":scope > a\")\n      const id: string = makeAnchor(`subnav-${index}-${link.textContent}`, 30)\n      const trigger: HTMLButtonElement = item.querySelector(\n        \":scope > button.nav__toggle\",\n      )\n      if (item && link && trigger) {\n        const labelId = `list-label-${id}`\n        link.setAttribute(\"id\", labelId)\n        list.setAttribute(\"id\", id)\n        list.setAttribute(\"aria-labelledby\", labelId)\n        const widget = new DisclosureWidget(trigger, list)\n        widget.init()\n        this.subNavs.set(id, { item, trigger, list, link, widget })\n      }\n    })\n\n    this.addEventListener(\"disclosure-toggle\", this.handleDisclosure)\n\n    if (!this.flyout) return\n    this.edgeCheck = this.hasAttribute(\"edgeCheck\")\n    this.mq = this.getAttribute(\"mq\") || \"(min-width: 720px)\"\n    this.handleBreakpoint(this.breakpoint)\n    this.breakpoint.addEventListener(\"change\", this.handleBreakpoint, {\n      signal,\n    })\n  }\n\n  disconnectedCallback(): void {\n    this.controller.abort()\n    this.subNavs.forEach((subNav: SubNavType): void => subNav.widget.detach())\n  }\n\n  handleDisclosure = ({ detail }: CustomEvent<DisclosureWidgetEvent>): void => {\n    const { isOpen, id } = detail\n    const { item } = this.subNavs.get(id)\n    item.classList.toggle(\"nav--open\")\n    if (isOpen) {\n      this.keyboard.attachPopup(id, this.handleCloseAny)\n    } else {\n      this.keyboard.detachPopup(id)\n    }\n  }\n\n  handleCloseAny = (): void => {\n    this.subNavs.forEach(({ widget }: SubNavType): void => {\n      if (!widget) return\n      if (widget.isOpen) widget.handleToggle()\n    })\n  }\n\n  handleFlyout = (event: MouseEvent): void => {\n    const target = event.target as HTMLElement\n    const parent: HTMLLIElement = target.closest(\"li\")\n    if (!parent) return\n    const subnav: HTMLUListElement = parent.querySelector(\":scope > ul\")\n    if (!subnav) return\n    this.subNavs.forEach(({ widget, list }: SubNavType): void => {\n      if (!widget) return\n      if (widget.isOpen) widget.handleToggle()\n      if (list.id === subnav.id) widget.handleToggle()\n    })\n  }\n\n  handleBreakpoint = ({\n    matches,\n  }: MediaQueryList | MediaQueryListEvent): void => {\n    if (matches) {\n      this.addEventListener(\"mouseover\", this.handleFlyout)\n      this.addEventListener(\"mouseleave\", this.handleCloseAny)\n      if (this.edgeCheck) this.handleEdgeCheck()\n    } else {\n      this.removeEventListener(\"mouseover\", this.handleFlyout)\n      this.removeEventListener(\"mouseleave\", this.handleCloseAny)\n    }\n  }\n\n  handleEdgeCheck() {\n    const windowInnerWidth: number = window.innerWidth\n    const edgeCheck: IntersectionObserver = new IntersectionObserver(\n      ([{ boundingClientRect, target }], obs) => {\n        if (windowInnerWidth < boundingClientRect.right)\n          target.classList.add(\"nav--reverse\")\n        obs.disconnect()\n      },\n    )\n    this.subNavs.forEach(({ list }: SubNavType): void => {\n      edgeCheck.observe(list)\n      const nestedLists: NodeListOf<HTMLUListElement> =\n        list.querySelectorAll(\"ul\")\n      nestedLists.forEach(nestedList => edgeCheck.observe(nestedList))\n    })\n  }\n\n  get links(): NodeListOf<HTMLAnchorElement> | null {\n    const links: NodeListOf<HTMLAnchorElement> | null =\n      this.querySelectorAll(\"a\")\n    if (!links.length) {\n      throw new Error(`${this.localName} must links`)\n    }\n    return links\n  }\n\n  get lists(): NodeListOf<HTMLUListElement> | null {\n    return this.querySelectorAll(\"li > ul\")\n  }\n\n  get breakpoint(): MediaQueryList {\n    return window.matchMedia(this.mq)\n  }\n}\n\ncustomElements.define(\"mx-nav\", Navigation)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-nav\": Navigation\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/build/page.css

@@ -0,0 +1,184 @@
+/**
+ * Page
+ */
+
+@layer design-system.layouts {
+  :where(.page) {
+    --plus: 12rem;
+    --minus: 8rem;
+    --diff: calc(var(--plus) - var(--minus));
+    --gutter: max(var(--spacing-s), min(6vw, var(--spacing-l)));
+    --full: minmax(var(--gutter), 1fr);
+    --narrow: min(var(--container-max-width), 100% - (var(--gutter) * 2));
+    --feature: minmax(0, var(--minus));
+    --container: minmax(0, var(--diff));
+
+    display: grid;
+    grid-template-columns:
+      [full-start] var(--full)
+      [container-start] minmax(0, calc(12rem - 8rem))
+      [feature-start] minmax(0, 8rem)
+      [narrow-start] var(--narrow) [narrow-end]
+      minmax(0, 8rem) [feature-end]
+      minmax(0, calc(12rem - 8rem)) [container-end]
+      var(--full) [full-end];
+    grid-template-columns:
+      [full-start] var(--full)
+      [container-start] var(--container)
+      [feature-start] var(--feature)
+      [narrow-start] var(--narrow) [narrow-end]
+      var(--feature) [feature-end]
+      var(--container) [container-end]
+      var(--full) [full-end];
+  }
+
+    :where(.page)
+      > *:where(:not(.page):not(.section__full):not(.section__narrow):not(.section__feature):not(.section[class*="background--"])) {
+      grid-column: container;
+    }
+
+    /* Immediate nested can be subgrid. */
+    :where(.page) > :where(.page) {
+      grid-column: full;
+      display: grid;
+      grid-template-columns: subgrid;
+    }
+
+    /* Deeper nested cannot be subgrid, needs it's children to be full width by default. */
+    :where(.page)
+      > *
+      :where(.page:not(.page--narrow):not(.page--feature))
+      > *:where(:not(.section__narrow):not(.section__feature)) {
+      grid-column: full;
+    }
+
+    /** Adding a background triggers subgrid */
+    :where(.page) > :where(.section[class*="background--"]) {
+      grid-column: full;
+      display: grid;
+      grid-template-columns: subgrid;
+    }
+
+      :where(.page) > :where(.section[class*="background--"])
+        > *:where(:not(.page):not(.section__full):not(.section__narrow):not(.section__feature)) {
+        grid-column: container;
+      }
+
+  :where(:is(.page--feature > *, .section__feature)) {
+    grid-column: feature;
+  }
+
+  :where(:is(.page--narrow > *, .section__narrow)) {
+    grid-column: narrow;
+  }
+
+  :where(:is(.page--full > *, .section__full)) {
+    grid-column: full;
+  }
+}
+
+/**
+ * Page with Sidebar
+ */
+
+@layer design-system.layouts {
+    .grid--sidebar:where(:not(:has(> aside))) {
+      grid-column: narrow;
+    }
+      @media (min-width: 720px) {
+
+    .grid--sidebar:where(:has(> aside)) {
+        display: grid;
+        grid-template-columns: 76ch auto;
+        grid-template-columns: var(--container-max-width, 76ch) auto;
+        grid-gap: var(--sidebar-gap, var(--gap));
+        gap: var(--sidebar-gap, var(--gap));
+    }
+      }
+
+        @media (min-width: 720px) {
+
+        @media (min-width: 946px) {
+
+        @media (max-color:2147477350) and (max-color:2147477350) {
+
+    .grid--sidebar:where(:has(> aside)) {
+          --sidebar-gap: 18ch;
+    }
+        }
+        }
+
+        @media not all and (min-width: 946px) {
+
+        @media (max-color:2147477350) and (color:2147477350) {
+
+    .grid--sidebar:where(:has(> aside)) {
+          --sidebar-gap: 18ch;
+    }
+        }
+        }
+        }
+
+        @media not all and (min-width: 720px) {
+
+        @media (min-width: 946px) {
+
+        @media (color:2147477350) and (max-color:2147477350) {
+
+    .grid--sidebar:where(:has(> aside)) {
+          --sidebar-gap: 18ch;
+    }
+        }
+        }
+
+        @media not all and (min-width: 946px) {
+
+        @media (color:2147477350) and (color:2147477350) {
+
+    .grid--sidebar:where(:has(> aside)) {
+          --sidebar-gap: 18ch;
+    }
+        }
+        }
+        }
+          .grid--sidebar.grid--sidebar-rev:where(:has(> aside)) > :is(section, aside):first-child {
+            order: 2;
+          }
+
+          .grid--sidebar.grid--sidebar-rev:where(:has(> aside)) > :is(section, aside):last-child {
+            order: 1;
+          }
+        @media (min-width: 720px) {
+            .grid--sidebar.grid--sidebar-rev-lg:where(:has(> aside)) > :is(section, aside):first-child {
+              order: 2;
+            }
+
+            .grid--sidebar.grid--sidebar-rev-lg:where(:has(> aside)) > :is(section, aside):last-child {
+              order: 1;
+            }
+        }
+        @media (min-width: 946px) {
+
+      .grid--sidebar:where(:has(> aside)):is(.grid--sidebar-rev, .grid--sidebar-rev-lg) {
+          grid-template-columns: auto 76ch;
+          grid-template-columns: auto var(--container-max-width, 76ch);
+      }
+        }
+
+    .grid--sidebar:where(:has(> aside:first-child)) {
+      grid-template-columns: auto 76ch;
+      grid-template-columns: auto var(--container-max-width, 76ch);
+    }
+}
+
+/**
+ * Print stylesheet
+ */
+
+@media print {
+  .page__sidebar {
+    display: none;
+  }
+}
+
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBhZ2UuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztFQUVFOztBQUVGO0VBQ0U7SUFDRSxhQUFvQztJQUNwQyxhQUFzQztJQUN0Qyx3Q0FBd0M7SUFDeEMsMkRBQXdEO0lBQ3hELGtDQUFrQztJQUNsQyxxRUFBcUU7SUFDckUsa0NBQWtDO0lBQ2xDLG1DQUFtQzs7SUFFbkMsYUFBYTtJQUNiOzs7Ozs7OzRCQU93QjtJQVB4Qjs7Ozs7Ozs0QkFPd0I7RUEyQzFCOztJQXpDRTs7TUFVRSxzQkFBc0I7SUFDeEI7O0lBRUEscUNBQXFDO0lBQ3JDO01BQ0UsaUJBQWlCO01BQ2pCLGFBQWE7TUFDYiw4QkFBOEI7SUFDaEM7O0lBRUEsc0ZBQXNGO0lBQ3RGOzs7O01BSUUsaUJBQWlCO0lBQ25COztJQUVBLDBDQUEwQztJQUMxQztNQUNFLGlCQUFpQjtNQUNqQixhQUFhO01BQ2IsOEJBQThCO0lBUWhDOztNQU5FOztRQUlFLHNCQUFzQjtNQUN4Qjs7RUFJSjtJQUNFLG9CQUFvQjtFQUN0Qjs7RUFFQTtJQUNFLG1CQUFtQjtFQUNyQjs7RUFFQTtJQUNFLGlCQUFpQjtFQUNuQjtBQUNGOztBQUVBOztFQUVFOztBQUVGO0lBRUk7TUFDRSxtQkFBbUI7SUFDckI7TUFHRTs7SUFERjtRQUVJLGFBQWE7UUFDYixnQ0FBNEQ7UUFBNUQsNERBQTREO1FBQzVELHdDQUFtQztRQUFuQyxtQ0FBbUM7SUFzQ3ZDO01BakNFOztRQUhFOztRQUFBOztRQUFBOztJQU5KO1VBT00sbUJBQW1CO0lBbUN6QjtRQWxDSTtRQUFBOztRQUZBOztRQUFBOztJQU5KO1VBT00sbUJBQW1CO0lBbUN6QjtRQWxDSTtRQUFBO1FBQUE7O1FBRkE7O1FBQUE7O1FBQUE7O0lBTko7VUFPTSxtQkFBbUI7SUFtQ3pCO1FBbENJO1FBQUE7O1FBRkE7O1FBQUE7O0lBTko7VUFPTSxtQkFBbUI7SUFtQ3pCO1FBbENJO1FBQUE7UUFBQTtVQUtFO1lBQ0UsUUFBUTtVQUNWOztVQUVBO1lBQ0UsUUFBUTtVQUNWO1FBS0Y7WUFFSTtjQUNFLFFBQVE7WUFDVjs7WUFFQTtjQUNFLFFBQVE7WUFDVjtRQUVKO1FBSUE7O01BREY7VUFFSSxnQ0FBNEQ7VUFBNUQsNERBQTREO01BRWhFO1FBREU7O0lBSUo7TUFDRSxnQ0FBNEQ7TUFBNUQsNERBQTREO0lBQzlEO0FBRUo7O0FBRUE7O0VBRUU7O0FBRUY7RUFDRTtJQUNFLGFBQWE7RUFDZjtBQUNGIiwiZmlsZSI6InBhZ2UuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBQYWdlXG4gKi9cblxuQGxheWVyIGRlc2lnbi1zeXN0ZW0ubGF5b3V0cyB7XG4gIDp3aGVyZSgucGFnZSkge1xuICAgIC0tcGx1czogdG9rZW4oXCJzaXplLmNvbnRhaW5lci5wbHVzXCIpO1xuICAgIC0tbWludXM6IHRva2VuKFwic2l6ZS5jb250YWluZXIubWludXNcIik7XG4gICAgLS1kaWZmOiBjYWxjKHZhcigtLXBsdXMpIC0gdmFyKC0tbWludXMpKTtcbiAgICAtLWd1dHRlcjogY2xhbXAodmFyKC0tc3BhY2luZy1zKSwgNnZ3LCB2YXIoLS1zcGFjaW5nLWwpKTtcbiAgICAtLWZ1bGw6IG1pbm1heCh2YXIoLS1ndXR0ZXIpLCAxZnIpO1xuICAgIC0tbmFycm93OiBtaW4odmFyKC0tY29udGFpbmVyLW1heC13aWR0aCksIDEwMCUgLSAodmFyKC0tZ3V0dGVyKSAqIDIpKTtcbiAgICAtLWZlYXR1cmU6IG1pbm1heCgwLCB2YXIoLS1taW51cykpO1xuICAgIC0tY29udGFpbmVyOiBtaW5tYXgoMCwgdmFyKC0tZGlmZikpO1xuXG4gICAgZGlzcGxheTogZ3JpZDtcbiAgICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6XG4gICAgICBbZnVsbC1zdGFydF0gdmFyKC0tZnVsbClcbiAgICAgIFtjb250YWluZXItc3RhcnRdIHZhcigtLWNvbnRhaW5lcilcbiAgICAgIFtmZWF0dXJlLXN0YXJ0XSB2YXIoLS1mZWF0dXJlKVxuICAgICAgW25hcnJvdy1zdGFydF0gdmFyKC0tbmFycm93KSBbbmFycm93LWVuZF1cbiAgICAgIHZhcigtLWZlYXR1cmUpIFtmZWF0dXJlLWVuZF1cbiAgICAgIHZhcigtLWNvbnRhaW5lcikgW2NvbnRhaW5lci1lbmRdXG4gICAgICB2YXIoLS1mdWxsKSBbZnVsbC1lbmRdO1xuXG4gICAgJlxuICAgICAgPiAqOndoZXJlKFxuICAgICAgICA6bm90KFxuICAgICAgICAgICAgLnBhZ2UsXG4gICAgICAgICAgICAuc2VjdGlvbl9fZnVsbCxcbiAgICAgICAgICAgIC5zZWN0aW9uX19uYXJyb3csXG4gICAgICAgICAgICAuc2VjdGlvbl9fZmVhdHVyZSxcbiAgICAgICAgICAgIC5zZWN0aW9uW2NsYXNzKj1cImJhY2tncm91bmQtLVwiXVxuICAgICAgICAgIClcbiAgICAgICkge1xuICAgICAgZ3JpZC1jb2x1bW46IGNvbnRhaW5lcjtcbiAgICB9XG5cbiAgICAvKiBJbW1lZGlhdGUgbmVzdGVkIGNhbiBiZSBzdWJncmlkLiAqL1xuICAgICYgPiA6d2hlcmUoLnBhZ2UpIHtcbiAgICAgIGdyaWQtY29sdW1uOiBmdWxsO1xuICAgICAgZGlzcGxheTogZ3JpZDtcbiAgICAgIGdyaWQtdGVtcGxhdGUtY29sdW1uczogc3ViZ3JpZDtcbiAgICB9XG5cbiAgICAvKiBEZWVwZXIgbmVzdGVkIGNhbm5vdCBiZSBzdWJncmlkLCBuZWVkcyBpdCdzIGNoaWxkcmVuIHRvIGJlIGZ1bGwgd2lkdGggYnkgZGVmYXVsdC4gKi9cbiAgICAmXG4gICAgICA+ICpcbiAgICAgIDp3aGVyZSgucGFnZTpub3QoLnBhZ2UtLW5hcnJvdywgLnBhZ2UtLWZlYXR1cmUpKVxuICAgICAgPiAqOndoZXJlKDpub3QoLnNlY3Rpb25fX25hcnJvdywgLnNlY3Rpb25fX2ZlYXR1cmUpKSB7XG4gICAgICBncmlkLWNvbHVtbjogZnVsbDtcbiAgICB9XG5cbiAgICAvKiogQWRkaW5nIGEgYmFja2dyb3VuZCB0cmlnZ2VycyBzdWJncmlkICovXG4gICAgJiA+IDp3aGVyZSguc2VjdGlvbltjbGFzcyo9XCJiYWNrZ3JvdW5kLS1cIl0pIHtcbiAgICAgIGdyaWQtY29sdW1uOiBmdWxsO1xuICAgICAgZGlzcGxheTogZ3JpZDtcbiAgICAgIGdyaWQtdGVtcGxhdGUtY29sdW1uczogc3ViZ3JpZDtcblxuICAgICAgJlxuICAgICAgICA+ICo6d2hlcmUoXG4gICAgICAgICAgOm5vdCgucGFnZSwgLnNlY3Rpb25fX2Z1bGwsIC5zZWN0aW9uX19uYXJyb3csIC5zZWN0aW9uX19mZWF0dXJlKVxuICAgICAgICApIHtcbiAgICAgICAgZ3JpZC1jb2x1bW46IGNvbnRhaW5lcjtcbiAgICAgIH1cbiAgICB9XG4gIH1cblxuICA6d2hlcmUoOmlzKC5wYWdlLS1mZWF0dXJlID4gKiwgLnNlY3Rpb25fX2ZlYXR1cmUpKSB7XG4gICAgZ3JpZC1jb2x1bW46IGZlYXR1cmU7XG4gIH1cblxuICA6d2hlcmUoOmlzKC5wYWdlLS1uYXJyb3cgPiAqLCAuc2VjdGlvbl9fbmFycm93KSkge1xuICAgIGdyaWQtY29sdW1uOiBuYXJyb3c7XG4gIH1cblxuICA6d2hlcmUoOmlzKC5wYWdlLS1mdWxsID4gKiwgLnNlY3Rpb25fX2Z1bGwpKSB7XG4gICAgZ3JpZC1jb2x1bW46IGZ1bGw7XG4gIH1cbn1cblxuLyoqXG4gKiBQYWdlIHdpdGggU2lkZWJhclxuICovXG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmxheW91dHMge1xuICAuZ3JpZC0tc2lkZWJhciB7XG4gICAgJjp3aGVyZSg6bm90KDpoYXMoPiBhc2lkZSkpKSB7XG4gICAgICBncmlkLWNvbHVtbjogbmFycm93O1xuICAgIH1cblxuICAgICY6d2hlcmUoOmhhcyg+IGFzaWRlKSkge1xuICAgICAgQG1lZGlhICgtLW1lZGl1bS11cCkge1xuICAgICAgICBkaXNwbGF5OiBncmlkO1xuICAgICAgICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IHZhcigtLWNvbnRhaW5lci1tYXgtd2lkdGgsIDc2Y2gpIGF1dG87XG4gICAgICAgIGdhcDogdmFyKC0tc2lkZWJhci1nYXAsIHZhcigtLWdhcCkpO1xuXG4gICAgICAgIEBtZWRpYSAoLS1sYXJnZS11cCkge1xuICAgICAgICAgIC0tc2lkZWJhci1nYXA6IDE4Y2g7XG4gICAgICAgIH1cbiAgICAgIH1cblxuICAgICAgJi5ncmlkLS1zaWRlYmFyLXJldiB7XG4gICAgICAgICYgPiA6aXMoc2VjdGlvbiwgYXNpZGUpIHtcbiAgICAgICAgICAmOmZpcnN0LWNoaWxkIHtcbiAgICAgICAgICAgIG9yZGVyOiAyO1xuICAgICAgICAgIH1cblxuICAgICAgICAgICY6bGFzdC1jaGlsZCB7XG4gICAgICAgICAgICBvcmRlcjogMTtcbiAgICAgICAgICB9XG4gICAgICAgIH1cbiAgICAgIH1cblxuICAgICAgJi5ncmlkLS1zaWRlYmFyLXJldi1sZyB7XG4gICAgICAgIEBtZWRpYSAoLS1tZWRpdW0tdXApIHtcbiAgICAgICAgICAmID4gOmlzKHNlY3Rpb24sIGFzaWRlKSB7XG4gICAgICAgICAgICAmOmZpcnN0LWNoaWxkIHtcbiAgICAgICAgICAgICAgb3JkZXI6IDI7XG4gICAgICAgICAgICB9XG5cbiAgICAgICAgICAgICY6bGFzdC1jaGlsZCB7XG4gICAgICAgICAgICAgIG9yZGVyOiAxO1xuICAgICAgICAgICAgfVxuICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgICAgfVxuXG4gICAgICAmOmlzKC5ncmlkLS1zaWRlYmFyLXJldiwgLmdyaWQtLXNpZGViYXItcmV2LWxnKSB7XG4gICAgICAgIEBtZWRpYSAoLS1sYXJnZS11cCkge1xuICAgICAgICAgIGdyaWQtdGVtcGxhdGUtY29sdW1uczogYXV0byB2YXIoLS1jb250YWluZXItbWF4LXdpZHRoLCA3NmNoKTtcbiAgICAgICAgfVxuICAgICAgfVxuICAgIH1cblxuICAgICY6d2hlcmUoOmhhcyg+IGFzaWRlOmZpcnN0LWNoaWxkKSkge1xuICAgICAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiBhdXRvIHZhcigtLWNvbnRhaW5lci1tYXgtd2lkdGgsIDc2Y2gpO1xuICAgIH1cbiAgfVxufVxuXG4vKipcbiAqIFByaW50IHN0eWxlc2hlZXRcbiAqL1xuXG5AbWVkaWEgcHJpbnQge1xuICAucGFnZV9fc2lkZWJhciB7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgfVxufVxuIl19 */

package/dist/build/pagination.css

@@ -0,0 +1,123 @@
+/**
+ * Pagination
+ */
+
+@layer design-system.components {
+  .pagination {
+    margin-inline: 0;
+    padding: 0;
+  }
+
+    .pagination button {
+      all: unset;
+      cursor: pointer;
+      box-sizing: border-box;
+    }
+
+      .pagination button:focus {
+        outline: var(--outline-width, var(--outline-size))
+          solid currentcolor;
+        outline: var(--outline-width, var(--outline-size))
+          var(--outline-style, solid) var(--outline-color, currentcolor);
+        outline-offset: var(--outline-offset, var(--outline-size));
+      }
+
+    .pagination :is(a, button, [aria-current="page"], [aria-current="step"]) {
+      text-decoration-line: none;
+      color: var(
+        --pagination-foreground,
+        var(--foreground, var(--colour-foreground))
+      );
+      display: block;
+      block-size: var(--spacing-l);
+      line-height: var(--spacing-l);
+      padding-block: 0;
+      padding-inline: var(--spacing-xs);
+    }
+
+    .pagination :is([aria-current="page"], [aria-current="step"], .is-active) {
+      font-weight: var(--font-weight-bold);
+      text-decoration-line: underline;
+      text-decoration-line: var(--active-underline, underline);
+      text-decoration-thickness: 2px;
+      -webkit-text-decoration-skip: ink;
+              text-decoration-skip-ink: auto;
+      text-underline-offset: 0.15em;
+    }
+
+    .pagination .icon:not(.icon--only) {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-xxs);
+    }
+
+    .pagination .pagination__items {
+      display: flex;
+      align-content: center;
+      justify-content: center;
+      place-content: center;
+      padding-inline-start: 0;
+      list-style-type: none;
+      text-align: center;
+    }
+
+    .pagination .pagination__ellipsis {
+      padding-block: 0;
+      padding-inline: var(--spacing-xs);
+    }
+
+    .pagination :is(.pagination__previous, .pagination__next) .icon:not(.icon--only) {
+      font-weight: var(--font-weight-bold);
+      text-transform: capitalize;
+    }
+
+      @media (max-width: 539.98px) {
+
+    .pagination :is(.pagination__previous, .pagination__next) .icon:not(.icon--only) {
+        overflow: hidden;
+        inline-size: var(--spacing-s);
+        position: relative;
+        text-indent: 100%;
+    }
+
+        .pagination :is(.pagination__previous, .pagination__next) .icon:not(.icon--only)::before {
+          position: absolute;
+        }
+      }
+
+    .pagination .pagination__previous {
+      margin-inline-end: auto;
+    }
+
+      @media (min-width: 540px) {
+        .pagination .pagination__previous :is(button, a) {
+          padding-inline-start: 0;
+        }
+      }
+
+    .pagination .pagination__next {
+      margin-inline-start: auto;
+    }
+
+      @media (min-width: 540px) {
+        .pagination .pagination__next :is(button, a) {
+          padding-inline-end: 0;
+        }
+
+          .pagination .pagination__next :is(button, a)::before {
+            order: 2;
+          }
+      }
+}
+
+/**
+ * Print stylesheet
+ */
+
+@media print {
+  .pagination {
+    display: none;
+  }
+}
+
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBhZ2luYXRpb24uY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztFQUVFOztBQUVGO0VBQ0U7SUFDRSxnQkFBZ0I7SUFDaEIsVUFBVTtFQTZGWjs7SUEzRkU7TUFDRSxVQUFVO01BQ1YsZUFBZTtNQUNmLHNCQUFzQjtJQU94Qjs7TUFMRTtRQUNFOzRCQUNnRTtRQURoRTt3RUFDZ0U7UUFDaEUsMERBQTBEO01BQzVEOztJQUdGO01BQ0UsMEJBQTBCO01BQzFCOzs7T0FHQztNQUNELGNBQWM7TUFDZCw0QkFBNEI7TUFDNUIsNkJBQTZCO01BQzdCLGdCQUFnQjtNQUNoQixpQ0FBaUM7SUFDbkM7O0lBRUE7TUFDRSxvQ0FBb0M7TUFDcEMsK0JBQXdEO01BQXhELHdEQUF3RDtNQUN4RCw4QkFBOEI7TUFDOUIsaUNBQThCO2NBQTlCLDhCQUE4QjtNQUM5Qiw2QkFBNkI7SUFDL0I7O0lBRUE7TUFDRSxhQUFhO01BQ2IsbUJBQW1CO01BQ25CLHVCQUF1QjtJQUN6Qjs7SUFFQTtNQUNFLGFBQWE7TUFDYixxQkFBcUI7TUFBckIsdUJBQXFCO01BQXJCLHFCQUFxQjtNQUNyQix1QkFBdUI7TUFDdkIscUJBQXFCO01BQ3JCLGtCQUFrQjtJQUNwQjs7SUFFQTtNQUNFLGdCQUFnQjtNQUNoQixpQ0FBaUM7SUFDbkM7O0lBRUE7TUFDRSxvQ0FBb0M7TUFDcEMsMEJBQTBCO0lBWTVCOztNQVZFOztJQUpGO1FBS0ksZ0JBQWdCO1FBQ2hCLDZCQUE2QjtRQUM3QixrQkFBa0I7UUFDbEIsaUJBQWlCO0lBTXJCOztRQUpJO1VBQ0Usa0JBQWtCO1FBQ3BCO01BQ0Y7O0lBR0Y7TUFDRSx1QkFBdUI7SUFPekI7O01BTEU7UUFDRTtVQUNFLHVCQUF1QjtRQUN6QjtNQUNGOztJQUdGO01BQ0UseUJBQXlCO0lBVzNCOztNQVRFO1FBQ0U7VUFDRSxxQkFBcUI7UUFLdkI7O1VBSEU7WUFDRSxRQUFRO1VBQ1Y7TUFFSjtBQUdOOztBQUVBOztFQUVFOztBQUVGO0VBQ0U7SUFDRSxhQUFhO0VBQ2Y7QUFDRiIsImZpbGUiOiJwYWdpbmF0aW9uLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogUGFnaW5hdGlvblxuICovXG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmNvbXBvbmVudHMge1xuICAucGFnaW5hdGlvbiB7XG4gICAgbWFyZ2luLWlubGluZTogMDtcbiAgICBwYWRkaW5nOiAwO1xuXG4gICAgJiBidXR0b24ge1xuICAgICAgYWxsOiB1bnNldDtcbiAgICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cbiAgICAgICY6Zm9jdXMge1xuICAgICAgICBvdXRsaW5lOiB2YXIoLS1vdXRsaW5lLXdpZHRoLCB2YXIoLS1vdXRsaW5lLXNpemUpKVxuICAgICAgICAgIHZhcigtLW91dGxpbmUtc3R5bGUsIHNvbGlkKSB2YXIoLS1vdXRsaW5lLWNvbG9yLCBjdXJyZW50Y29sb3IpO1xuICAgICAgICBvdXRsaW5lLW9mZnNldDogdmFyKC0tb3V0bGluZS1vZmZzZXQsIHZhcigtLW91dGxpbmUtc2l6ZSkpO1xuICAgICAgfVxuICAgIH1cblxuICAgICYgOmlzKGEsIGJ1dHRvbiwgW2FyaWEtY3VycmVudD1cInBhZ2VcIl0sIFthcmlhLWN1cnJlbnQ9XCJzdGVwXCJdKSB7XG4gICAgICB0ZXh0LWRlY29yYXRpb24tbGluZTogbm9uZTtcbiAgICAgIGNvbG9yOiB2YXIoXG4gICAgICAgIC0tcGFnaW5hdGlvbi1mb3JlZ3JvdW5kLFxuICAgICAgICB2YXIoLS1mb3JlZ3JvdW5kLCB2YXIoLS1jb2xvdXItZm9yZWdyb3VuZCkpXG4gICAgICApO1xuICAgICAgZGlzcGxheTogYmxvY2s7XG4gICAgICBibG9jay1zaXplOiB2YXIoLS1zcGFjaW5nLWwpO1xuICAgICAgbGluZS1oZWlnaHQ6IHZhcigtLXNwYWNpbmctbCk7XG4gICAgICBwYWRkaW5nLWJsb2NrOiAwO1xuICAgICAgcGFkZGluZy1pbmxpbmU6IHZhcigtLXNwYWNpbmcteHMpO1xuICAgIH1cblxuICAgICYgOmlzKFthcmlhLWN1cnJlbnQ9XCJwYWdlXCJdLCBbYXJpYS1jdXJyZW50PVwic3RlcFwiXSwgLmlzLWFjdGl2ZSkge1xuICAgICAgZm9udC13ZWlnaHQ6IHZhcigtLWZvbnQtd2VpZ2h0LWJvbGQpO1xuICAgICAgdGV4dC1kZWNvcmF0aW9uLWxpbmU6IHZhcigtLWFjdGl2ZS11bmRlcmxpbmUsIHVuZGVybGluZSk7XG4gICAgICB0ZXh0LWRlY29yYXRpb24tdGhpY2tuZXNzOiAycHg7XG4gICAgICB0ZXh0LWRlY29yYXRpb24tc2tpcC1pbms6IGF1dG87XG4gICAgICB0ZXh0LXVuZGVybGluZS1vZmZzZXQ6IDAuMTVlbTtcbiAgICB9XG5cbiAgICAmIC5pY29uOm5vdCguaWNvbi0tb25seSkge1xuICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgICBnYXA6IHZhcigtLXNwYWNpbmcteHhzKTtcbiAgICB9XG5cbiAgICAmIC5wYWdpbmF0aW9uX19pdGVtcyB7XG4gICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgcGxhY2UtY29udGVudDogY2VudGVyO1xuICAgICAgcGFkZGluZy1pbmxpbmUtc3RhcnQ6IDA7XG4gICAgICBsaXN0LXN0eWxlLXR5cGU6IG5vbmU7XG4gICAgICB0ZXh0LWFsaWduOiBjZW50ZXI7XG4gICAgfVxuXG4gICAgJiAucGFnaW5hdGlvbl9fZWxsaXBzaXMge1xuICAgICAgcGFkZGluZy1ibG9jazogMDtcbiAgICAgIHBhZGRpbmctaW5saW5lOiB2YXIoLS1zcGFjaW5nLXhzKTtcbiAgICB9XG5cbiAgICAmIDppcygucGFnaW5hdGlvbl9fcHJldmlvdXMsIC5wYWdpbmF0aW9uX19uZXh0KSAuaWNvbjpub3QoLmljb24tLW9ubHkpIHtcbiAgICAgIGZvbnQtd2VpZ2h0OiB2YXIoLS1mb250LXdlaWdodC1ib2xkKTtcbiAgICAgIHRleHQtdHJhbnNmb3JtOiBjYXBpdGFsaXplO1xuXG4gICAgICBAbWVkaWEgKC0tc21hbGwtZG93bikge1xuICAgICAgICBvdmVyZmxvdzogaGlkZGVuO1xuICAgICAgICBpbmxpbmUtc2l6ZTogdmFyKC0tc3BhY2luZy1zKTtcbiAgICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgICAgICB0ZXh0LWluZGVudDogMTAwJTtcblxuICAgICAgICAmOjpiZWZvcmUge1xuICAgICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgICAgfVxuICAgICAgfVxuICAgIH1cblxuICAgICYgLnBhZ2luYXRpb25fX3ByZXZpb3VzIHtcbiAgICAgIG1hcmdpbi1pbmxpbmUtZW5kOiBhdXRvO1xuXG4gICAgICBAbWVkaWEgKC0tc21hbGwtdXApIHtcbiAgICAgICAgJiA6aXMoYnV0dG9uLCBhKSB7XG4gICAgICAgICAgcGFkZGluZy1pbmxpbmUtc3RhcnQ6IDA7XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9XG5cbiAgICAmIC5wYWdpbmF0aW9uX19uZXh0IHtcbiAgICAgIG1hcmdpbi1pbmxpbmUtc3RhcnQ6IGF1dG87XG5cbiAgICAgIEBtZWRpYSAoLS1zbWFsbC11cCkge1xuICAgICAgICAmIDppcyhidXR0b24sIGEpIHtcbiAgICAgICAgICBwYWRkaW5nLWlubGluZS1lbmQ6IDA7XG5cbiAgICAgICAgICAmOjpiZWZvcmUge1xuICAgICAgICAgICAgb3JkZXI6IDI7XG4gICAgICAgICAgfVxuICAgICAgICB9XG4gICAgICB9XG4gICAgfVxuICB9XG59XG5cbi8qKlxuICogUHJpbnQgc3R5bGVzaGVldFxuICovXG5cbkBtZWRpYSBwcmludCB7XG4gIC5wYWdpbmF0aW9uIHtcbiAgICBkaXNwbGF5OiBub25lO1xuICB9XG59XG4iXX0= */

package/dist/build/section.css

@@ -0,0 +1,163 @@
+/**
+ * Section
+ */
+
+@layer design-system.layouts {
+  .mx-container {
+    --container-name: container;
+
+    container-name: container;
+
+    container-name: var(--container-name);
+    container-type: inline-size;
+  }
+
+  .mx-section--divider {
+    border-block-start: 1px solid var(--colour-border);
+  }
+
+  .mx-section--s {
+    padding-block: var(--section-s, var(--spacing-s));
+  }
+
+  .mx-section--m {
+    padding-block: var(--section-m, var(--spacing-m));
+  }
+
+  .mx-section--l {
+    padding-block: var(--section-l, var(--spacing-xl));
+  }
+
+  .mx-section--xl {
+    padding-block: var(--section-xl, var(--spacing-uul));
+  }
+
+  .mx-section--top-s {
+    padding-block-start: var(--section-s, var(--spacing-s));
+  }
+
+  .mx-section--top-m {
+    padding-block-start: var(--section-m, var(--spacing-m));
+  }
+
+  .mx-section--top-l {
+    padding-block-start: var(--section-l, var(--spacing-xl));
+  }
+
+  .mx-section--top-xl {
+    padding-block-start: var(--section-xl, var(--spacing-uul));
+  }
+
+  .mx-section--bottom-s {
+    padding-block-end: var(--section-s, var(--spacing-s));
+  }
+
+  .mx-section--bottom-m {
+    padding-block-end: var(--section-m, var(--spacing-m));
+  }
+
+  .mx-section--bottom-l {
+    padding-block-end: var(--section-l, var(--spacing-xl));
+  }
+
+  .mx-section--bottom-xl {
+    padding-block-end: var(--section-xl, var(--spacing-uul));
+  }
+}
+
+/**
+ * Sections breakouts
+ *
+ * Uses `subgrid` so no supported in older browsers.
+ */
+
+/**
+ * Sections flows & groups
+ *
+ * Uses `:has` so is not supported in older browsers.
+ * see https://www.bram.us/2022/12/13/quantity-queries-for-islands-of-elements-with-the-same-class-thanks-to-css-has/
+ */
+
+@layer design-system.layouts {
+  .mx-section--flow {
+    --flow-spacing: var(--section-l, var(--spacing-xl));
+
+    padding-block-end: var(--flow-spacing);
+  }
+
+    .mx-section--flow:is(
+        [class*="mx-background"],
+        [class*="mx-background"] + .mx-section--flow,
+        :not(.mx-section--flow:not(.mx-section--group) + .mx-section--flow)
+      ) {
+      padding-block-start: var(--flow-spacing);
+    }
+
+  .mx-section--group {
+    --group-spacing: var(--section-xl, var(--spacing-uul));
+
+    padding-block: 0;
+
+    /* :first-in-island-of-class */
+  }
+
+    .mx-section--group:is(
+        :not([class*="mx-background"])
+          + .mx-section--group[class*="mx-background"],
+        :not(.mx-section--group + .mx-section--group)
+      ) {
+      padding-block-start: var(--group-spacing);
+    }
+
+    /* :last-in-island-of-class */
+
+    .mx-section--group:is(
+        :not([class*="mx-background"]):has(
+            + .mx-section--group[class*="mx-background"]
+          ),
+        :not(:has(+ .mx-section--group))
+      ) {
+      padding-block-end: var(--group-spacing);
+    }
+
+    /* :single-in-island-of-class */
+
+    .mx-section--group:not(.mx-section--group + .mx-section--group):not(:has(+ .mx-section--group)) {
+      padding-block: var(--group-spacing);
+    }
+}
+
+/**
+ * Section header
+ */
+
+@layer design-system.layouts {
+  .mx-section__header {
+    margin-block-end: var(--spacing-m);
+    display: flex;
+    flex-flow: row wrap;
+    gap: var(--spacing-s);
+    align-items: center;
+  }
+
+    .mx-section__header :is(a, button) {
+      margin-inline-start: auto;
+    }
+}
+
+/**
+ * Section Background image
+ */
+
+@layer design-system.layouts {
+  :is(.mx-section--has-background, .mx-section:has(.mx-background--image)) {
+    overflow: hidden;
+    position: relative;
+  }
+
+    :is(.mx-section--has-background, .mx-section:has(.mx-background--image)) > div {
+      position: relative;
+    }
+}
+
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNlY3Rpb24uY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztFQUVFOztBQUVGO0VBQ0U7SUFDRSwyQkFBMkI7O0lBRTNCLHlCQUFxQzs7SUFBckMscUNBQXFDO0lBQ3JDLDJCQUEyQjtFQUM3Qjs7RUFFQTtJQUNFLGtEQUFrRDtFQUNwRDs7RUFFQTtJQUNFLGlEQUFpRDtFQUNuRDs7RUFFQTtJQUNFLGlEQUFpRDtFQUNuRDs7RUFFQTtJQUNFLGtEQUFrRDtFQUNwRDs7RUFFQTtJQUNFLG9EQUFvRDtFQUN0RDs7RUFFQTtJQUNFLHVEQUF1RDtFQUN6RDs7RUFFQTtJQUNFLHVEQUF1RDtFQUN6RDs7RUFFQTtJQUNFLHdEQUF3RDtFQUMxRDs7RUFFQTtJQUNFLDBEQUEwRDtFQUM1RDs7RUFFQTtJQUNFLHFEQUFxRDtFQUN2RDs7RUFFQTtJQUNFLHFEQUFxRDtFQUN2RDs7RUFFQTtJQUNFLHNEQUFzRDtFQUN4RDs7RUFFQTtJQUNFLHdEQUF3RDtFQUMxRDtBQUNGOztBQUVBOzs7O0VBSUU7O0FBRUY7Ozs7O0VBS0U7O0FBRUY7RUFDRTtJQUNFLG1EQUFtRDs7SUFFbkQsc0NBQXNDO0VBU3hDOztJQVBFOzs7OztNQUtFLHdDQUF3QztJQUMxQzs7RUFHRjtJQUNFLHNEQUFzRDs7SUFFdEQsZ0JBQWdCOztJQUVoQiw4QkFBOEI7RUEwQmhDOztJQXhCRTs7Ozs7TUFLRSx5Q0FBeUM7SUFDM0M7O0lBRUEsNkJBQTZCOztJQUU3Qjs7Ozs7O01BTUUsdUNBQXVDO0lBQ3pDOztJQUVBLCtCQUErQjs7SUFFL0I7TUFDRSxtQ0FBbUM7SUFDckM7QUFFSjs7QUFFQTs7RUFFRTs7QUFFRjtFQUNFO0lBQ0Usa0NBQWtDO0lBQ2xDLGFBQWE7SUFDYixtQkFBbUI7SUFDbkIscUJBQXFCO0lBQ3JCLG1CQUFtQjtFQUtyQjs7SUFIRTtNQUNFLHlCQUF5QjtJQUMzQjtBQUVKOztBQUVBOztFQUVFOztBQUVGO0VBQ0U7SUFDRSxnQkFBZ0I7SUFDaEIsa0JBQWtCO0VBS3BCOztJQUhFO01BQ0Usa0JBQWtCO0lBQ3BCO0FBRUoiLCJmaWxlIjoic2VjdGlvbi5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIFNlY3Rpb25cbiAqL1xuXG5AbGF5ZXIgZGVzaWduLXN5c3RlbS5sYXlvdXRzIHtcbiAgLm14LWNvbnRhaW5lciB7XG4gICAgLS1jb250YWluZXItbmFtZTogY29udGFpbmVyO1xuXG4gICAgY29udGFpbmVyLW5hbWU6IHZhcigtLWNvbnRhaW5lci1uYW1lKTtcbiAgICBjb250YWluZXItdHlwZTogaW5saW5lLXNpemU7XG4gIH1cblxuICAubXgtc2VjdGlvbi0tZGl2aWRlciB7XG4gICAgYm9yZGVyLWJsb2NrLXN0YXJ0OiAxcHggc29saWQgdmFyKC0tY29sb3VyLWJvcmRlcik7XG4gIH1cblxuICAubXgtc2VjdGlvbi0tcyB7XG4gICAgcGFkZGluZy1ibG9jazogdmFyKC0tc2VjdGlvbi1zLCB2YXIoLS1zcGFjaW5nLXMpKTtcbiAgfVxuXG4gIC5teC1zZWN0aW9uLS1tIHtcbiAgICBwYWRkaW5nLWJsb2NrOiB2YXIoLS1zZWN0aW9uLW0sIHZhcigtLXNwYWNpbmctbSkpO1xuICB9XG5cbiAgLm14LXNlY3Rpb24tLWwge1xuICAgIHBhZGRpbmctYmxvY2s6IHZhcigtLXNlY3Rpb24tbCwgdmFyKC0tc3BhY2luZy14bCkpO1xuICB9XG5cbiAgLm14LXNlY3Rpb24tLXhsIHtcbiAgICBwYWRkaW5nLWJsb2NrOiB2YXIoLS1zZWN0aW9uLXhsLCB2YXIoLS1zcGFjaW5nLXV1bCkpO1xuICB9XG5cbiAgLm14LXNlY3Rpb24tLXRvcC1zIHtcbiAgICBwYWRkaW5nLWJsb2NrLXN0YXJ0OiB2YXIoLS1zZWN0aW9uLXMsIHZhcigtLXNwYWNpbmctcykpO1xuICB9XG5cbiAgLm14LXNlY3Rpb24tLXRvcC1tIHtcbiAgICBwYWRkaW5nLWJsb2NrLXN0YXJ0OiB2YXIoLS1zZWN0aW9uLW0sIHZhcigtLXNwYWNpbmctbSkpO1xuICB9XG5cbiAgLm14LXNlY3Rpb24tLXRvcC1sIHtcbiAgICBwYWRkaW5nLWJsb2NrLXN0YXJ0OiB2YXIoLS1zZWN0aW9uLWwsIHZhcigtLXNwYWNpbmcteGwpKTtcbiAgfVxuXG4gIC5teC1zZWN0aW9uLS10b3AteGwge1xuICAgIHBhZGRpbmctYmxvY2stc3RhcnQ6IHZhcigtLXNlY3Rpb24teGwsIHZhcigtLXNwYWNpbmctdXVsKSk7XG4gIH1cblxuICAubXgtc2VjdGlvbi0tYm90dG9tLXMge1xuICAgIHBhZGRpbmctYmxvY2stZW5kOiB2YXIoLS1zZWN0aW9uLXMsIHZhcigtLXNwYWNpbmctcykpO1xuICB9XG5cbiAgLm14LXNlY3Rpb24tLWJvdHRvbS1tIHtcbiAgICBwYWRkaW5nLWJsb2NrLWVuZDogdmFyKC0tc2VjdGlvbi1tLCB2YXIoLS1zcGFjaW5nLW0pKTtcbiAgfVxuXG4gIC5teC1zZWN0aW9uLS1ib3R0b20tbCB7XG4gICAgcGFkZGluZy1ibG9jay1lbmQ6IHZhcigtLXNlY3Rpb24tbCwgdmFyKC0tc3BhY2luZy14bCkpO1xuICB9XG5cbiAgLm14LXNlY3Rpb24tLWJvdHRvbS14bCB7XG4gICAgcGFkZGluZy1ibG9jay1lbmQ6IHZhcigtLXNlY3Rpb24teGwsIHZhcigtLXNwYWNpbmctdXVsKSk7XG4gIH1cbn1cblxuLyoqXG4gKiBTZWN0aW9ucyBicmVha291dHNcbiAqXG4gKiBVc2VzIGBzdWJncmlkYCBzbyBubyBzdXBwb3J0ZWQgaW4gb2xkZXIgYnJvd3NlcnMuXG4gKi9cblxuLyoqXG4gKiBTZWN0aW9ucyBmbG93cyAmIGdyb3Vwc1xuICpcbiAqIFVzZXMgYDpoYXNgIHNvIGlzIG5vdCBzdXBwb3J0ZWQgaW4gb2xkZXIgYnJvd3NlcnMuXG4gKiBzZWUgaHR0cHM6Ly93d3cuYnJhbS51cy8yMDIyLzEyLzEzL3F1YW50aXR5LXF1ZXJpZXMtZm9yLWlzbGFuZHMtb2YtZWxlbWVudHMtd2l0aC10aGUtc2FtZS1jbGFzcy10aGFua3MtdG8tY3NzLWhhcy9cbiAqL1xuXG5AbGF5ZXIgZGVzaWduLXN5c3RlbS5sYXlvdXRzIHtcbiAgLm14LXNlY3Rpb24tLWZsb3cge1xuICAgIC0tZmxvdy1zcGFjaW5nOiB2YXIoLS1zZWN0aW9uLWwsIHZhcigtLXNwYWNpbmcteGwpKTtcblxuICAgIHBhZGRpbmctYmxvY2stZW5kOiB2YXIoLS1mbG93LXNwYWNpbmcpO1xuXG4gICAgJjppcyhcbiAgICAgICAgW2NsYXNzKj1cIm14LWJhY2tncm91bmRcIl0sXG4gICAgICAgIFtjbGFzcyo9XCJteC1iYWNrZ3JvdW5kXCJdICsgLm14LXNlY3Rpb24tLWZsb3csXG4gICAgICAgIDpub3QoLm14LXNlY3Rpb24tLWZsb3c6bm90KC5teC1zZWN0aW9uLS1ncm91cCkgKyAubXgtc2VjdGlvbi0tZmxvdylcbiAgICAgICkge1xuICAgICAgcGFkZGluZy1ibG9jay1zdGFydDogdmFyKC0tZmxvdy1zcGFjaW5nKTtcbiAgICB9XG4gIH1cblxuICAubXgtc2VjdGlvbi0tZ3JvdXAge1xuICAgIC0tZ3JvdXAtc3BhY2luZzogdmFyKC0tc2VjdGlvbi14bCwgdmFyKC0tc3BhY2luZy11dWwpKTtcblxuICAgIHBhZGRpbmctYmxvY2s6IDA7XG5cbiAgICAvKiA6Zmlyc3QtaW4taXNsYW5kLW9mLWNsYXNzICovXG5cbiAgICAmOmlzKFxuICAgICAgICA6bm90KFtjbGFzcyo9XCJteC1iYWNrZ3JvdW5kXCJdKVxuICAgICAgICAgICsgLm14LXNlY3Rpb24tLWdyb3VwW2NsYXNzKj1cIm14LWJhY2tncm91bmRcIl0sXG4gICAgICAgIDpub3QoLm14LXNlY3Rpb24tLWdyb3VwICsgLm14LXNlY3Rpb24tLWdyb3VwKVxuICAgICAgKSB7XG4gICAgICBwYWRkaW5nLWJsb2NrLXN0YXJ0OiB2YXIoLS1ncm91cC1zcGFjaW5nKTtcbiAgICB9XG5cbiAgICAvKiA6bGFzdC1pbi1pc2xhbmQtb2YtY2xhc3MgKi9cblxuICAgICY6aXMoXG4gICAgICAgIDpub3QoW2NsYXNzKj1cIm14LWJhY2tncm91bmRcIl0pOmhhcyhcbiAgICAgICAgICAgICsgLm14LXNlY3Rpb24tLWdyb3VwW2NsYXNzKj1cIm14LWJhY2tncm91bmRcIl1cbiAgICAgICAgICApLFxuICAgICAgICA6bm90KDpoYXMoKyAubXgtc2VjdGlvbi0tZ3JvdXApKVxuICAgICAgKSB7XG4gICAgICBwYWRkaW5nLWJsb2NrLWVuZDogdmFyKC0tZ3JvdXAtc3BhY2luZyk7XG4gICAgfVxuXG4gICAgLyogOnNpbmdsZS1pbi1pc2xhbmQtb2YtY2xhc3MgKi9cblxuICAgICY6bm90KC5teC1zZWN0aW9uLS1ncm91cCArIC5teC1zZWN0aW9uLS1ncm91cCwgOmhhcygrIC5teC1zZWN0aW9uLS1ncm91cCkpIHtcbiAgICAgIHBhZGRpbmctYmxvY2s6IHZhcigtLWdyb3VwLXNwYWNpbmcpO1xuICAgIH1cbiAgfVxufVxuXG4vKipcbiAqIFNlY3Rpb24gaGVhZGVyXG4gKi9cblxuQGxheWVyIGRlc2lnbi1zeXN0ZW0ubGF5b3V0cyB7XG4gIC5teC1zZWN0aW9uX19oZWFkZXIge1xuICAgIG1hcmdpbi1ibG9jay1lbmQ6IHZhcigtLXNwYWNpbmctbSk7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBmbGV4LWZsb3c6IHJvdyB3cmFwO1xuICAgIGdhcDogdmFyKC0tc3BhY2luZy1zKTtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuXG4gICAgJiA6aXMoYSwgYnV0dG9uKSB7XG4gICAgICBtYXJnaW4taW5saW5lLXN0YXJ0OiBhdXRvO1xuICAgIH1cbiAgfVxufVxuXG4vKipcbiAqIFNlY3Rpb24gQmFja2dyb3VuZCBpbWFnZVxuICovXG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmxheW91dHMge1xuICA6aXMoLm14LXNlY3Rpb24tLWhhcy1iYWNrZ3JvdW5kLCAubXgtc2VjdGlvbjpoYXMoLm14LWJhY2tncm91bmQtLWltYWdlKSkge1xuICAgIG92ZXJmbG93OiBoaWRkZW47XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuXG4gICAgJiA+IGRpdiB7XG4gICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgfVxuICB9XG59XG4iXX0= */