@duetds/components 5.0.3 → 5.1.0

package/lib/esm/duet-combobox.entry.js

@@ -0,0 +1,386 @@
+/*!
+ * Built with Duet Design System
+ */
+import { h, F as Fragment, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-0b088451.js';
+import { d as debounce } from './js-utils-52e0944c.js';
+import { n as isEnterKey, f as isEscapeKey, o as isTabKey, b as isArrowUpKey, c as isArrowDownKey } from './keyboard-utils-88ea1007.js';
+import { g as getLocaleString, a as getLanguage } from './language-utils-344d894c.js';
+import { p as parsePossibleJSON } from './string-utils-2f1793b8.js';
+import { i as inheritGlobalTheme } from './themeable-component-e8fc98bf.js';
+
+const SelectSingle = ({ item, search = "", selected }) => {
+  const regEx = search !== "" ? new RegExp("(" + search.split(" ").join("|") + ")", "gi") : undefined;
+  return (h(Fragment, null,
+    selected && h("duet-icon", { class: "option-icon", name: "messaging-checked", size: "xx-small", margin: "none" }),
+    regEx ? (h("span", { class: "option-container", "aria-hidden": "true" },
+      h("span", { innerHTML: item.name.replace(regEx, '<span class="highlight">$&</span>') }))) : (item.name),
+    item.tags && h("span", { class: "option-tags" }, item.tags.join(", "))));
+};
+
+const DuetComboBoxSelect = ({ item, active, total, selected, label = undefined, clickHandler = e => {
+  e.preventDefault();
+}, keyHandler = e => {
+  e.preventDefault();
+}, search, }) => {
+  return (h("li", { class: {
+      "list-item": true,
+      option: true,
+      active: active,
+      selected: selected,
+    }, id: active ? "active_item" : "", "data-index": item.id, "aria-selected": active ? "true" : undefined, "aria-current": selected ? "true" : undefined, role: "option", "aria-label": label || `${item.name}, (${item.id + 1} of ${total})` },
+    h("a", { tabindex: "-1", onClick: e => clickHandler(e), onKeyUp: e => keyHandler(e), class: "option-link", "aria-label": label || `${item.name}, (${item.id + 1} of ${total})`, "aria-hidden": "true" },
+      h(SelectSingle, { item: item, search: search, selected: selected }))));
+};
+
+const duetComboboxCss = ".sc-duet-combobox-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;width:auto;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#00294d}.duet-combobox-list.sc-duet-combobox{position:absolute;top:calc(100% - 12px);display:none;overflow:hidden;background:white;border-radius:0 4px;box-shadow:0 2px 10px 0 rgba(0, 41, 77, 0.1)}.duet-combobox-list.open.sc-duet-combobox{z-index:700;display:block}.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox{max-height:200px;padding:0.75rem 0;margin:0;overflow-y:scroll;font-weight:600;list-style:none;cursor:pointer;scroll-behavior:smooth}.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.sc-duet-combobox{padding:4px 0}.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.sc-duet-combobox:not(.selected){padding-left:16px}.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.sc-duet-combobox:not(.selected) .highlight.sc-duet-combobox{text-decoration:underline}.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.option.sc-duet-combobox .option-link.sc-duet-combobox{display:block;width:100%}.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.option.sc-duet-combobox .option-tags.sc-duet-combobox{float:right;padding-right:0.875rem;font-weight:400;color:#909599}.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.option-link.sc-duet-combobox{display:block;width:100%}.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.selected.sc-duet-combobox{padding-left:0;background:#cde5f1}.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.selected.option.sc-duet-combobox .option-icon.sc-duet-combobox{padding:0 8px 0 8px}.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.selected.option.sc-duet-combobox .option-tags.sc-duet-combobox{color:#909599}.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.active.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus,.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover{color:white;background:#0077b3}.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.active.sc-duet-combobox .option-tags.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus .option-tags.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover .option-tags.sc-duet-combobox{color:#e1e3e6}";
+
+const DuetCombobox = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.duetChange = createEvent(this, "duetChange", 3);
+    // Safari doesnt properly support aria-activedecendatn, the code associated with this bool is a workaround for that,
+    // this should be removed when Safari fixes the issue
+    // see: https://a11ysupport.io/tests/apg__aria-1-2-combobox-with-list-autocomplete-example#assertion-aria-aria-activedescendant_attribute-convey_value-aria-combobox_role-vo_macos-safari
+    this.isSafari = false;
+    this.resizeObserver = new ResizeObserver(debounce(entries => {
+      var _a, _b;
+      // otherwise, something is wrong, expecting 1 element only
+      if ((entries === null || entries === void 0 ? void 0 : entries.length) === 1) {
+        const currentWidth = (_b = (_a = entries[0]) === null || _a === void 0 ? void 0 : _a.target) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width;
+        this.listContainer.style.width = `${currentWidth + 1}px`;
+        // this.listElement.style.width = `${currentWidth + 1}px`
+      }
+    }, 100));
+    this.processedItems = null;
+    this.inputWidth = 0;
+    this.inputValue = "";
+    this.selectionMsg = "";
+    this.listOpen = false;
+    // the selected item is based upon the DuetComboboxItem.id value
+    this.selectedItems = new Set();
+    // the activeItem number is based upon the array.index of the array stored in processedItems
+    this.activeItem = undefined;
+    /**
+     * Placeholder defaults
+     * @default { fi: "pp.kk.vvvv", en: "dd.mm.yyyy", sv: "dd.mm.åååå" }
+     */
+    this.accessibleLabelDefaults = {
+      en: {
+        heading: "Select:",
+        item: "{name}, ({current} of {total})",
+        itemFiltered: "{name}, ({current} of {total}, {hiddenItems} filtered)",
+      },
+      fi: {
+        heading: "Valitse:",
+        item: "{name}, ({current}/{total})",
+        itemFiltered: "{name}, ({current}/{total}, {hiddenItems} suodatettu)",
+      },
+      sv: {
+        heading: "Välj:",
+        item: "{name}, ({current} av {total})",
+        itemFiltered: "{name}, ({current} av {total}, {hiddenItems} filtrerade)",
+      },
+    };
+    /**
+     * Hint text to display before the user types into the date picker input.
+     * @default   {
+     * heading: "Valitse:",
+     * item: "{0}, ({1}/{2})",
+     * itemFiltered: "{0}, ({1}/{2} - {3} suodatettu"
+     * }
+     */
+    this.accessibleLabels = getLocaleString(parsePossibleJSON(this.accessibleLabelDefaults), getLanguage());
+    /**
+     * Theme of the combobox.
+     */
+    this.theme = "";
+    /**
+     * Force the user to make a selection (typing things in the input field will only be used for list search)
+     */
+    this.force = false;
+    /**
+     * A hook to overwrite how the values are displayed in the input field after a User select an item
+     * @example (item) => `${item.name} (${item.value})`
+     * @default undefined
+     */
+    this.formatter = (item) => item && item.name ? item.name : "";
+  }
+  activeItemHandler(state) {
+    this.input.accessibleActiveDescendant = this.listOpen && (state || state === 0) ? `active_item` : "";
+  }
+  handleDocumentClick(e) {
+    //we want to remove all user text if they have NOT selected from the dropdown
+    const path = e.composedPath();
+    const isClickOutside = path.every(el => el !== this.element);
+    if (isClickOutside) {
+      this.updateInputText(true);
+      this.listOpen = false;
+    }
+  }
+  /**
+   * Exposes a formatter function to format the item value displayed after a user selects an item
+   * @param item: DuetComboboxItem
+   */
+  async formatItem(item) {
+    return this.formatter(item);
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  connectedCallback() {
+    if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
+      this.isSafari = true;
+    }
+    this.items = this.processedItems = parsePossibleJSON(this.items);
+    this.input = this.element.querySelector("duet-input");
+    this.input.addEventListener("duetChange", this.updateInputValue.bind(this));
+    this.input.addEventListener("click", () => {
+      this.inputValue.length ? (this.listOpen = true) : (this.listOpen = false);
+    });
+    this.element.addEventListener("keydown", this.handleInputKeyDownEvent.bind(this));
+    //add correct aria attributes to the input element
+    this.input.accessibleAutocomplete = "list";
+    this.input.accessibleControls = "duet-combobox-list-element";
+  }
+  disconnectedCallback() {
+    this.input.removeEventListener("duetChange", this.updateInputValue.bind(this));
+    this.input.removeEventListener("click", () => this.inputValue.length ? (this.listOpen = true) : (this.listOpen = false));
+    this.element.removeEventListener("keydown", this.handleInputKeyDownEvent.bind(this));
+    this.listElement.removeEventListener("click", e => {
+      e.stopPropagation();
+    });
+    this.resizeObserver.disconnect();
+  }
+  componentDidLoad() {
+    // observe resize events to dynamically adjust size of dropdown area
+    this.resizeObserver.observe(this.input);
+    this.listElement.addEventListener("click", e => {
+      e.stopPropagation();
+    });
+  }
+  /**
+   * Updates the input text based on the selected/clicked items.
+   * @param event - event
+   *'param item: DuetComboboxItem - the item that was selected
+   */
+  onListClick(e, item) {
+    e.preventDefault();
+    // update selected item with id
+    this.updateSelectedItems(item.id);
+    this.listOpen = false;
+    return this.listOpen;
+  }
+  /**
+   * Helper function that checks inputs in the field, compares it with the item list and returns true when inputvalue matches selectedItem id
+   * TODO: this should be disabled in multiple mode
+   */
+  shouldListBeFiltered() {
+    if (this.selectedItems.size && this.input.value === this.inputValue) {
+      const item = this.items.filter(item => this.selectedItems.has(item.id));
+      return !(this.formatter(item).toLowerCase() === this.input.value.toLowerCase());
+    }
+    return true;
+  }
+  /**
+   * Helper function that return correct collection depending on filter status returend by shouldListBeFiltered
+   */
+  returnFilteredOrNonFiltered() {
+    return this.processedItems
+      ? this.shouldListBeFiltered()
+        ? this.getFilteredItems()
+        : this.sortFilteredItems(this.processedItems)
+      : [];
+  }
+  /**
+   * Updates the selected items based on the item id.
+   * @param id
+   * @private
+   */
+  async updateSelectedItems(id) {
+    // for a multiple scenario wrap this in an if/else and just don't clear here
+    this.selectedItems.clear();
+    if (this.selectedItems) {
+      if (this.selectedItems.has(id)) {
+        this.selectedItems.delete(id);
+      }
+      else {
+        this.selectedItems.add(id);
+      }
+    }
+    await this.updateInputText();
+  }
+  /**
+   * Updates the input text based on the selected/clicked items.
+   * @param bool -override to clear if invoked by "click outside"
+   */
+  async updateInputText(isBlurred = false) {
+    const item = this.selectedItems.size === 0 ? [] : this.items.filter(item => this.selectedItems.has(item.id));
+    if (this.selectedItems.size === 1) {
+      this.input.value = ""; // set value to empty so that cursor position follows accordingly
+      this.input.value = await this.formatItem(item[0]);
+      this.input.scrollLeft = this.input.scrollWidth;
+      this.activeItem = undefined;
+      this.value = await this.formatItem(item[0]);
+      this.duetChange.emit({
+        value: item[0].value,
+        item: item[0],
+        component: "duet-combobox",
+      });
+    }
+    else if (isBlurred && this.selectedItems.size === 0) {
+      //if nothing is selected and a user clicks outside, we want the input field to clearly illustrate that nothing was selected
+      if (this.force) {
+        this.inputValue = "";
+        this.input.value = "";
+      }
+      this.activeItem = undefined;
+    }
+    this.listOpen = false;
+  }
+  updateInputValue(e) {
+    var _a;
+    this.inputValue = e.detail.value;
+    this.listOpen = String(this.inputValue).length > 0 && ((_a = this.getFilteredItems()) === null || _a === void 0 ? void 0 : _a.length) > 0;
+  }
+  handleInputKeyDownEvent(e) {
+    //if selection is made, close the list and update internal and external values
+    // this should be set to undefined on everything BUT up/down arrow according to the aria 1.1 specs
+    // https://www.w3.org/TR/wai-aria-practices-1.1/#combobox
+    this.input.accessibleActiveDescendant = undefined;
+    if (isEnterKey(e)) {
+      e.preventDefault();
+      this.selectActiveItem();
+      this.listOpen = false;
+      return;
+    }
+    //tabbing out or escaping, restore initial state
+    if (isEscapeKey(e) || isTabKey(e)) {
+      this.updateInputText(true);
+      this.listOpen = false;
+      return;
+    }
+    //handle arrow up/down navigation
+    let nextActiveItem = this.activeItem;
+    if (isArrowUpKey(e)) {
+      e.preventDefault();
+      nextActiveItem = this.activeItem - 1;
+    }
+    else if (isArrowDownKey(e)) {
+      e.preventDefault();
+      nextActiveItem = this.listOpen ? this.activeItem + 1 : this.activeItem;
+      this.listOpen = true;
+    }
+    if (isArrowDownKey(e) || isArrowUpKey(e)) {
+      const listItems = this.shouldListBeFiltered() ? this.getFilteredItems() : this.processedItems;
+      if (nextActiveItem < 0 || !nextActiveItem) {
+        nextActiveItem = 0;
+      }
+      if (nextActiveItem >= listItems.length) {
+        nextActiveItem = listItems.length - 1;
+      }
+      // this should be set to undefined on everything BUT up/down arrow according to the aria 1.1 specs
+      // https://www.w3.org/TR/wai-aria-practices-1.1/#combobox
+      this.input.accessibleActiveDescendant = "active_item";
+      this.activeItem = nextActiveItem;
+      this.scrollToActive();
+    }
+    this.announceActive();
+    return;
+  }
+  selectActiveItem() {
+    if (this.activeItem === undefined) {
+      return;
+    }
+    const filteredItem = this.returnFilteredOrNonFiltered();
+    const item = filteredItem[this.activeItem];
+    this.updateSelectedItems(item.id);
+  }
+  announceActive(items) {
+    if (!items) {
+      items = this.returnFilteredOrNonFiltered();
+    }
+    if (this.activeItem === undefined || this.activeItem === -1) {
+      return;
+    }
+    const item = items[this.activeItem];
+    this.selectionMsg = this.formatLabel(item, items.length, this.items.length);
+  }
+  //function that scrolls to the li element with the class "active"
+  scrollToActive() {
+    const activeElement = this.listElement.querySelector(".active");
+    if (activeElement) {
+      activeElement.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+      });
+    }
+  }
+  formatLabel(item, length, itemsLength) {
+    if (!item || itemsLength === undefined) {
+      return "";
+    }
+    const labelString = length === itemsLength ? this.accessibleLabels.item : this.accessibleLabels.itemFiltered;
+    return labelString
+      .replace("{name}", String(item.name))
+      .replace("{current}", String(this.activeItem + 1))
+      .replace("{total}", String(length))
+      .replace("{hiddenItems}", String(itemsLength - length));
+  }
+  /**
+   * Filter the items based on the input value
+   */
+  getFilteredItems() {
+    // filter items based on user inputs
+    const filteredItems = this.processedItems.filter(item => 
+    // filter by name and value
+    // if value contains inputvalue
+    String(item.value).toLowerCase().includes(this.inputValue.toLowerCase()) ||
+      // if name contains input value
+      String(item.name).toLowerCase().includes(this.inputValue.toLowerCase()) ||
+      // if the item is selected
+      this.selectedItems.has(item.id));
+    return this.sortFilteredItems(filteredItems);
+  }
+  /**
+   * Sort the return from getFilteredItems so that any item with and item.id that matches this.selectedItems is placed first
+   */
+  sortFilteredItems(items) {
+    if (items.length > 0) {
+      items
+        .filter(item => this.selectedItems.has(item.id))
+        .forEach(item => {
+        const index = items.indexOf(item);
+        items.splice(index, 1);
+        items.unshift(item);
+      });
+    }
+    return items;
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    const selectElements = this.returnFilteredOrNonFiltered();
+    return (h(Host, { role: "combobox", "aria-expanded": this.listOpen ? "true" : "false", "aria-owns": this.listOpen ? "duet-combobox-list-element" : undefined, "aria-haspopup": "listbox", class: {
+        "duet-combobox": true,
+        [`duet-theme-${this.theme}`]: true,
+      } }, h("slot", null), this.isSafari && (h("duet-visually-hidden", { "aria-live": "assertive", "aria-atomic": "true", "aria-relevant": "all" }, this.selectionMsg)), h("div", { role: "list", class: {
+        "duet-combobox-list": true,
+        open: this.listOpen,
+      }, ref: el => (this.listContainer = el) }, h("ul", { role: "listbox", ref: el => (this.listElement = el), id: "duet-combobox-list-element", class: "listbox" }, this.processedItems &&
+      selectElements.map((item, index) => {
+        return (h(DuetComboBoxSelect, { item: item, active: index === this.activeItem, selected: this.selectedItems.has(item.id), search: this.inputValue, total: selectElements.length, clickHandler: e => this.onListClick(e, item), label: this.formatLabel(item, this.returnFilteredOrNonFiltered().length, this.items.length) }));
+      })))));
+  }
+  get element() { return getElement(this); }
+  static get watchers() { return {
+    "activeItem": ["activeItemHandler"]
+  }; }
+};
+DuetCombobox.style = duetComboboxCss;
+
+export { DuetCombobox as duet_combobox };

package/lib/esm/duet-cookie-consent.entry.js

@@ -1,8 +1,8 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-fe6fd837.js';
-import { i as inheritGlobalTheme } from './themeable-component-572685dd.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-0b088451.js';
+import { i as inheritGlobalTheme } from './themeable-component-e8fc98bf.js';
 
 const duetCookieConsentCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:fixed;right:0;bottom:0;left:0;z-index:950;display:block;width:100%;box-shadow:0 2px 20px 0 rgba(0, 0, 0, 0.2)}@media (min-width: 48em){:host{right:28px;bottom:28px;left:auto;width:25rem}}:host(:focus){outline:0}:host(.user-is-tabbing:focus){border-radius:4px;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing.duet-theme-turva:focus){box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-cookie-consent{padding:20px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:0.875rem;color:white !important;background-color:rgba(0, 21, 39, 0.9)}@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none){.duet-cookie-consent{background:rgba(0, 21, 39, 0.8);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}}.duet-cookie-consent.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";background-color:rgba(12, 14, 29, 0.9)}@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none){.duet-cookie-consent.duet-theme-turva{background:rgba(12, 14, 29, 0.8)}}@media (min-width: 48em){.duet-cookie-consent{padding:20px;border-radius:4px}}.duet-cookie-consent-content{display:flex;align-items:center;max-width:1110px;margin:0 auto}.duet-cookie-consent-content .expand{flex:1}::slotted(a){font-weight:600;color:white !important;text-decoration:underline;white-space:nowrap}::slotted(a[target=_blank]){padding-right:16px;background:url(\"data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEwLjUgMmExLjUgMS41IDAgMDEuMTQgM0gzLjc1Yy0uMzggMC0uNy4yOC0uNzQuNjVsLS4wMS4xdjE0LjVjMCAuMzguMjguNy42NS43NGwuMS4wMWgxNC41Yy4zOCAwIC43LS4yOC43NC0uNjVsLjAxLS4xdi02Ljg5YTEuNSAxLjUgMCAwMTMgMHY2Ljg5QTMuNzUgMy43NSAwIDAxMTguMjUgMjRIMy43NUEzLjc1IDMuNzUgMCAwMTAgMjAuMjVWNS43NUEzLjc1IDMuNzUgMCAwMTMuNzUgMnptMTItMmMuNzggMCAxLjQyLjYgMS41IDEuMzZWNy41YTEuNSAxLjUgMCAwMS0zIC4xNFY1LjEybC01LjQ0IDUuNDRhMS41IDEuNSAwIDAxLTIuMjItMmwuMS0uMTJMMTguODggM0gxNi41QTEuNSAxLjUgMCAwMTE1IDEuNjRWMS41YzAtLjc4LjYtMS40MiAxLjM2LTEuNWguMTR6Ii8+PC9zdmc+\") no-repeat right 50%;background-size:12px 10px}::slotted(a:focus){outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva ::slotted(a:focus){outline:0;box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}";
 

package/lib/esm/duet-date-picker.entry.js

@@ -1,11 +1,11 @@
 /*!
  * Built with Duet Design System
  */
-import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-fe6fd837.js';
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-0b088451.js';
 import { c as createID } from './create-id-981107da.js';
-import { F as FocusGuard } from './focus-utils-e649bb9d.js';
+import { F as FocusGuard } from './focus-utils-b6b1e60d.js';
 import { a as getLanguage, g as getLocaleString } from './language-utils-344d894c.js';
-import { i as inheritGlobalTheme } from './themeable-component-572685dd.js';
+import { i as inheritGlobalTheme } from './themeable-component-e8fc98bf.js';
 import './string-utils-2f1793b8.js';
 
 const formatOptionsShort = { day: "numeric", month: "long" };
@@ -320,6 +320,7 @@ const DatePickerDay = ({ focusedDay, today, day, language, onDaySelect, onKeyboa
  * @param to
  */
 function range(from, to) {
+  console.log({ from, to });
   var result = [];
   for (var i = from; i <= to; i++) {
     result.push(i);
@@ -514,6 +515,10 @@ const DuetDatePicker = class {
      * This setting can be used alone or together with the min property.
      */
     this.max = "";
+    /**
+     * Increment to add to years, defaults to 10 for simplicity, if you need a larger selectionspace you can set it to 100
+     */
+    this.incrementYears = 10;
     this.enableActiveFocus = () => {
       this.focusTarget = "day-button";
     };
@@ -779,8 +784,8 @@ const DuetDatePicker = class {
     const maxDate = parseISODate(this.max);
     const prevMonthDisabled = minDate != null && minDate.getMonth() === focusedMonth && minDate.getFullYear() === focusedYear;
     const nextMonthDisabled = maxDate != null && maxDate.getMonth() === focusedMonth && maxDate.getFullYear() === focusedYear;
-    let minYear = selectedYear - 10;
-    let maxYear = selectedYear + 10;
+    let minYear = selectedYear - this.incrementYears;
+    let maxYear = selectedYear + this.incrementYears;
     if (minDate) {
       minYear = Math.max(minYear, minDate.getFullYear());
     }

package/lib/esm/duet-divider_2.entry.js

@@ -1,8 +1,8 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, g as getElement, H as Host } from './index-fe6fd837.js';
-import { i as inheritGlobalTheme } from './themeable-component-572685dd.js';
+import { r as registerInstance, h, g as getElement, H as Host } from './index-0b088451.js';
+import { i as inheritGlobalTheme } from './themeable-component-e8fc98bf.js';
 
 const duetDividerCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%}.duet-divider{-webkit-user-select:none;user-select:none;display:block;width:100%;height:1px;margin-top:36px !important;margin-bottom:28px;background:#e1e3e6}.duet-divider.duet-p-0{padding:0 !important}.duet-divider.duet-m-0{margin:0 !important}.duet-divider.duet-m-s{margin-bottom:16px !important;margin-top:0 !important}.duet-divider.duet-theme-turva{background:#e4e4e6}";
 

package/lib/esm/duet-editable-table_3.entry.js

@@ -1,12 +1,12 @@
 /*!
  * Built with Duet Design System
  */
-import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-fe6fd837.js';
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-0b088451.js';
 import { f as fieldSorter, d as debounce } from './js-utils-52e0944c.js';
-import { i as isKeyboardClick } from './keyboard-utils-6eb55cd5.js';
+import { i as isKeyboardClick } from './keyboard-utils-88ea1007.js';
 import { g as getLocaleString, s as sanitizeString } from './language-utils-344d894c.js';
-import { i as inheritGlobalTheme } from './themeable-component-572685dd.js';
-import { m as mediaQueryMedium, h as mediaQueryLarge, i as mediaQueryXLarge, j as mediaQueryXxLarge, k as mediaQueryXxxLarge, l as mediaQuerySmall, n as sizeNavigation, s as sizeHeader } from './tokens.module-a13e9683.js';
+import { i as inheritGlobalTheme } from './themeable-component-e8fc98bf.js';
+import { m as mediaQueryMedium, h as mediaQueryLarge, i as mediaQueryXLarge, j as mediaQueryXxLarge, k as mediaQueryXxxLarge, l as mediaQuerySmall, n as sizeNavigation, s as sizeHeader } from './tokens.module-49cbf963.js';
 import { c as createID } from './create-id-981107da.js';
 import './string-utils-2f1793b8.js';
 
@@ -534,7 +534,7 @@ const SuccessItem = ({ data, showLinks }) => {
   const { item, size, uploaded, url, meta } = data;
   const { name } = item;
   const ContentName = (h("span", { class: "duet-upload-item-name" },
-    h("duet-icon", { margin: "none", size: "xx-small", name: "messaging-attachment" }),
+    h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }),
     h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
     name));
   const SizeText = (h("span", { class: "duet-upload-item-size", style: { fontSize: "14px", fontWeight: "400" } },
@@ -673,7 +673,7 @@ const makeXhrRequest = ({ payload, options, onFailure, onSuccess, onProgress })
   return xhr;
 };
 
-const duetUploadCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}::slotted([slot=header]){margin-bottom:16px}::slotted([slot=fileheader]){margin:16px 0 0 0}::slotted([slot=filefooter]){margin-top:16px}.duet-upload{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.duet-upload-item-size{font-size:0.75rem;font-weight:400}.duet-upload-filelist{margin-bottom:25px}.duet-upload-filelist-empty{display:flex;align-items:center;justify-content:center;width:100%;height:75px;margin:0 auto;font-size:1rem;font-weight:400;background-color:#f5f8fa}.duet-upload-editable-table-header-hidden{display:none}.duet-upload-editable-table tbody .duet-upload-editable-table-data{padding:0 !important;border:0}.duet-upload-editable-table duet-editable-table tfoot,.duet-upload-editable-table duet-editable-table thead{display:none}.duet-upload-editable-table duet-editable-table .duet-editable-table-content{padding-right:0 !important;padding-left:0 !important}.duet-upload-editable-table duet-editable-table duet-table .duet-table-action-row td{padding:0.75rem 0 !important}.duet-upload-editable-table duet-editable-table duet-table .duet-table-action-row td:last-child{padding-right:0 !important}.duet-upload-editable-table duet-editable-table .duet-editable-table-row-inprogress duet-action-button::part(button){border:0}";
+const duetUploadCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}::slotted([slot=header]){margin-bottom:16px}::slotted([slot=fileheader]){margin:16px 0 0 0}::slotted([slot=filefooter]){margin-top:16px}.duet-upload{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.duet-upload-item-size{font-size:0.75rem;font-weight:400}.duet-upload-filelist{margin-bottom:25px}.duet-upload-filelist-empty{display:flex;align-items:center;justify-content:center;width:100%;height:75px;margin:0 auto;font-size:1rem;font-weight:400;background-color:#f5f8fa}.duet-upload-filelist-empty-label{font-size:1rem;font-weight:400}.duet-upload-editable-table-header-hidden{display:none}.duet-upload-editable-table tbody .duet-upload-editable-table-data{padding:0 !important;border:0}.duet-upload-editable-table duet-editable-table tfoot,.duet-upload-editable-table duet-editable-table thead{display:none}.duet-upload-editable-table duet-editable-table .duet-editable-table-content{padding-right:0 !important;padding-left:0 !important}.duet-upload-editable-table duet-editable-table duet-table .duet-table-action-row td{padding:0.75rem 0 !important}.duet-upload-editable-table duet-editable-table duet-table .duet-table-action-row td:last-child{padding-right:0 !important}.duet-upload-editable-table duet-editable-table .duet-editable-table-row-inprogress duet-action-button::part(button){border:0}.duet-upload-editable-table .duet-upload-item-name duet-icon{position:relative;top:2px}duet-paragraph::part(duet-paragraph){word-break:break-word}";
 
 const DuetUpload = class {
   constructor(hostRef) {
@@ -1422,7 +1422,9 @@ const DuetUpload = class {
         "duet-upload-filelist-empty": !this.files.size,
         "duet-upload-filelist": true,
         "duet-upload-filelist-filled": this.files.size,
-      }, id: this.labelId, for: identifier }, this.fileListEmpty)), !!this.files.size && h("slot", { name: "fileheader" }), !!this.files.size && (h("duet-upload-aria-status", { invalid: this.getFilesAsArray().invalid.length, valid: this.getFilesAsArray().valid.length, inprogress: this.filesInProgress.size, total: this.files.size, statusMessageLabel: this.internalStatusMessageLabel })), !!this.files.size && this.renderEditableTableGroups(), !!this.files.size && h("slot", { name: "filefooter" }), h("duet-spacer", { size: "large" }), !this.hideButton && (h("duet-button", { id: this.buttonId, onClick: this.startUpload, "accessible-controls": identifier, disabled: this.fileMaxReached, "accessible-label": this.accessibleButtonLabel, "accessible-owns": identifier, size: "small", variation: "secondary", fixed: true, icon: "action-add-circle", part: this.identifier ? `${this.identifier}-button-upload` : "duet-upload-button-upload" }, this.buttonLabel)), h("duet-spacer", { size: "medium" }), (this.fileMaxReached || this.bytesMaxReached) && (h("duet-alert", { part: this.identifier ? `${this.identifier}-error-notification` : "duet-upload-error-notification" }, this.fileMaxReached && getI18nError("duet-upload-301"), this.bytesMaxReached && getI18nError("duet-upload-202"))), h("duet-spacer", { size: "medium" }), h("duet-visually-hidden", null, h("input", { ref: input => {
+      }, id: this.labelId, for: identifier }, h("span", { class: {
+        "duet-upload-filelist-empty-label": !this.files.size,
+      } }, this.fileListEmpty))), !!this.files.size && h("slot", { name: "fileheader" }), !!this.files.size && (h("duet-upload-aria-status", { invalid: this.getFilesAsArray().invalid.length, valid: this.getFilesAsArray().valid.length, inprogress: this.filesInProgress.size, total: this.files.size, statusMessageLabel: this.internalStatusMessageLabel })), !!this.files.size && this.renderEditableTableGroups(), !!this.files.size && h("slot", { name: "filefooter" }), h("duet-spacer", { size: "large" }), !this.hideButton && (h("duet-button", { id: this.buttonId, onClick: this.startUpload, "accessible-controls": identifier, disabled: this.fileMaxReached, "accessible-label": this.accessibleButtonLabel, "accessible-owns": identifier, size: "small", variation: "secondary", fixed: true, icon: "action-add-circle", part: this.identifier ? `${this.identifier}-button-upload` : "duet-upload-button-upload" }, this.buttonLabel)), h("duet-spacer", { size: "medium" }), (this.fileMaxReached || this.bytesMaxReached) && (h("duet-alert", { part: this.identifier ? `${this.identifier}-error-notification` : "duet-upload-error-notification" }, this.fileMaxReached && getI18nError("duet-upload-301"), this.bytesMaxReached && getI18nError("duet-upload-202"))), h("duet-spacer", { size: "medium" }), h("duet-visually-hidden", null, h("input", { ref: input => {
         this.nativeInput = input;
       }, accept: !this.limitSelection ? undefined : `${this.allowedMimetypes},${this.allowedExtensions}`, onBlur: this.onBlur, onFocus: this.onFocus, onChange: e => this.onChange(e), type: "file", class: {
         "duet-upload": true,

package/lib/esm/duet-empty-state.entry.js

@@ -1,8 +1,8 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host } from './index-fe6fd837.js';
-import { i as inheritGlobalTheme } from './themeable-component-572685dd.js';
+import { r as registerInstance, h, H as Host } from './index-0b088451.js';
+import { i as inheritGlobalTheme } from './themeable-component-e8fc98bf.js';
 
 const duetEmptyStateCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%;height:100%}.duet-empty-state{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%;height:100%;padding:48px;color:#00294d;text-align:center;background:#f5f8fa;border-radius:4px}.duet-empty-state.duet-theme-turva{color:#171c3a;background:#f5f5f7}";
 

package/lib/esm/duet-fieldset.entry.js

@@ -1,9 +1,9 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-fe6fd837.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-0b088451.js';
 import { c as createID } from './create-id-981107da.js';
-import { i as inheritGlobalTheme } from './themeable-component-572685dd.js';
+import { i as inheritGlobalTheme } from './themeable-component-e8fc98bf.js';
 
 const duetFieldsetCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:12px !important;display:block;width:100%}:host(.duet-m-0){margin:0 !important}fieldset{border:0}legend{position:absolute !important;top:0;width:1px !important;height:1px !important;padding:0 !important;overflow:hidden !important;clip:rect(1px, 1px, 1px, 1px) !important;border:0 !important}.duet-legend-wrapper{position:relative;display:block;width:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:600;line-height:1.5;color:#00294d;text-align:left;background:transparent}.duet-theme-turva .duet-legend-wrapper{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a}.duet-fieldset-label{margin-bottom:12px !important;margin-top:8px}.duet-legend-has-caption .duet-fieldset-label{margin-bottom:6px !important}.duet-legend-has-tooltip .duet-fieldset-label{padding-right:36px}@media (min-width: 48em){.duet-legend-has-tooltip .duet-fieldset-label{margin-bottom:3px !important;padding-right:0}}@media (min-width: 48em){.duet-legend-has-tooltip.duet-legend-has-caption .duet-fieldset-label{margin-bottom:-3px !important}}.duet-fieldset-caption{margin-bottom:12px !important}.duet-fieldset-help{display:block;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:0.875rem;font-weight:400;line-height:1.25;color:#de2362;border-radius:4px}.duet-fieldset-help span{display:block;margin-top:12px}.duet-theme-turva .duet-fieldset-help{color:#e02a0d}::slotted(duet-tooltip){position:absolute;top:4px;right:0}@media (min-width: 48em){::slotted(duet-tooltip){position:relative;right:auto}}.duet-legend-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}";
 

package/lib/esm/duet-footer.entry.js

@@ -1,12 +1,12 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent$1, h, F as Fragment, g as getElement } from './index-fe6fd837.js';
+import { r as registerInstance, c as createEvent$1, h, F as Fragment, g as getElement } from './index-0b088451.js';
 import { a as actionNewWindowSmall } from './action-new-window-small-1945be91.js';
 import { D as DuetStringsExternalDefaults } from './common-strings-97e04e4b.js';
 import { a as getLanguage, g as getLocaleString } from './language-utils-344d894c.js';
 import { p as parsePossibleJSON } from './string-utils-2f1793b8.js';
-import { i as inheritGlobalTheme } from './themeable-component-572685dd.js';
+import { i as inheritGlobalTheme } from './themeable-component-e8fc98bf.js';
 
 var actionArrowRight={"title":"action-arrow-right","tags":"action arrow right caret","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M5.499 24a.752.752 0 0 1-.53-1.281L15.689 12 4.969 1.28c-.142-.141-.22-.33-.22-.53s.078-.389.22-.53c.141-.142.33-.22.53-.22s.389.078.53.22l10.72 10.72a1.5 1.5 0 0 1 .001 2.119L6.029 23.78a.743.743 0 0 1-.53.22z\"/></svg>"};
 
@@ -126,9 +126,9 @@ const DuetFooter = class {
         "duet-m-0": this.margin === "none",
         "duet-theme-turva": this.theme === "turva",
         "duet-footer-simple": this.variation === "simple",
-      } }, h("div", { class: "duet-footer-wrapper" }, h("div", { class: "duet-footer-top" }, this.variation !== "simple" && (h("duet-logo", { href: this.logoHref, onClick: this.handleLogoClick, size: "large", inverse: true, language: this.language, theme: this.theme })), this.processedItems &&
+      } }, h("div", { class: "duet-footer-wrapper" }, h("div", { class: "duet-footer-top", part: "top" }, this.variation !== "simple" && (h("duet-logo", { href: this.logoHref, onClick: this.handleLogoClick, size: "large", inverse: true, language: this.language, theme: this.theme })), this.processedItems &&
       this.variation !== "simple" &&
-      this.processedItems.map(item => (h("a", { class: "duet-footer-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleItemClick(event, item) }, h("div", { class: "duet-footer-icon" }, h("duet-icon", { size: "medium", margin: "none", name: item.icon, color: "currentColor" })), h("span", null, item.label), item.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), h("div", { class: "duet-footer-arrow" }, item.external ? (h("duet-icon", { icon: actionNewWindow.svg, size: "xx-small", margin: "none", color: "currentColor" })) : (h("duet-icon", { icon: actionArrowRight.svg, size: "auto", margin: "none", color: "currentColor" }))))))), h("p", { class: "duet-footer-menu" }, h("span", { class: "duet-footer-copyright" }, `${copyrightLabel} ${new Date().getFullYear()}`), this.processedMenu && (h(Fragment, null, h("span", { class: "duet-footer-divider", role: "presentation", "aria-hidden": "true" }, "/"), this.processedMenu.map(item => (h("a", { href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleMenuClick(event, item) }, item.label, item.external && (h(Fragment, null, h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), h("div", { class: "duet-footer-external" }, h("duet-icon", { icon: actionNewWindowSmall.svg, size: "xx-small", margin: "none", color: "currentColor" })))), h("span", { class: "duet-footer-divider", role: "presentation", "aria-hidden": "true" }, "/"))))))))));
+      this.processedItems.map(item => (h("a", { class: "duet-footer-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleItemClick(event, item) }, h("div", { class: "duet-footer-icon" }, h("duet-icon", { size: "medium", margin: "none", name: item.icon, color: "currentColor" })), h("span", null, item.label), item.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), h("div", { class: "duet-footer-arrow" }, item.external ? (h("duet-icon", { icon: actionNewWindow.svg, size: "xx-small", margin: "none", color: "currentColor" })) : (h("duet-icon", { icon: actionArrowRight.svg, size: "auto", margin: "none", color: "currentColor" }))))))), h("p", { class: "duet-footer-menu", part: "menu" }, h("span", { class: "duet-footer-copyright" }, `${copyrightLabel} ${new Date().getFullYear()}`), this.processedMenu && (h(Fragment, null, h("span", { class: "duet-footer-divider", role: "presentation", "aria-hidden": "true" }, "/"), this.processedMenu.map(item => (h("a", { href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleMenuClick(event, item) }, item.label, item.external && (h(Fragment, null, h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), h("div", { class: "duet-footer-external" }, h("duet-icon", { icon: actionNewWindowSmall.svg, size: "xx-small", margin: "none", color: "currentColor" })))), h("span", { class: "duet-footer-divider", role: "presentation", "aria-hidden": "true" }, "/"))))))))));
   }
   get element() { return getElement(this); }
   static get watchers() { return {

package/lib/esm/duet-grid_2.entry.js

@@ -1,10 +1,10 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, g as getElement, H as Host } from './index-fe6fd837.js';
-import { m as media_query_large, a as media_query_medium, b as media_query_small } from './tokens-57d98824.js';
+import { r as registerInstance, h, g as getElement, H as Host } from './index-0b088451.js';
+import { m as media_query_large, a as media_query_medium, b as media_query_small } from './tokens-e110dc89.js';
 import { w as watchForOptions, a as watchForElement } from './watch-options-dd55bce8.js';
-import { i as inheritGlobalTheme } from './themeable-component-572685dd.js';
+import { i as inheritGlobalTheme } from './themeable-component-e8fc98bf.js';
 
 const duetGridCss = ".sc-duet-grid-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:flex !important;flex-direction:column !important;align-items:flex-start !important;justify-content:flex-start !important;width:100%;max-width:100%;height:auto}@media (min-width: 36em){.duet-grid-breakpoint-small.sc-duet-grid-h{flex-direction:row !important}}@media (min-width: 48em){.duet-grid-breakpoint-medium.sc-duet-grid-h{flex-direction:row !important}}@media (min-width: 64.0625em){.duet-grid-breakpoint-x-large.sc-duet-grid-h{flex-direction:row !important}}.duet-grid-wrap.sc-duet-grid-h{flex-wrap:wrap !important}.duet-no-stacking.sc-duet-grid-h{flex-direction:row !important}.duet-grid-direction-vertical.duet-grid-breakpoint-small.sc-duet-grid-h{flex-direction:column !important}@media (min-width: 36em){.duet-grid-direction-vertical.duet-grid-breakpoint-small.sc-duet-grid-h{flex-direction:column !important}}.duet-grid-direction-vertical.duet-grid-breakpoint-medium.sc-duet-grid-h{flex-direction:column !important}@media (min-width: 48em){.duet-grid-direction-vertical.duet-grid-breakpoint-medium.sc-duet-grid-h{flex-direction:column !important}}.duet-grid-direction-vertical.duet-grid-breakpoint-x-large.sc-duet-grid-h{flex-direction:column !important}@media (min-width: 64.0625em){.duet-grid-direction-vertical.duet-grid-breakpoint-x-large.sc-duet-grid-h{flex-direction:column !important}}.duet-grid-align-top.duet-no-stacking.sc-duet-grid-h{align-items:flex-start !important}.duet-grid-align-bottom.duet-no-stacking.sc-duet-grid-h{align-items:flex-end !important}.duet-grid-align-center.duet-no-stacking.sc-duet-grid-h{align-items:center !important}.duet-grid-align-stretch.duet-no-stacking.sc-duet-grid-h{align-items:stretch !important}.duet-grid-align-baseline.duet-no-stacking.sc-duet-grid-h{align-items:baseline !important}@media (min-width: 36em){.duet-grid-align-top.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:flex-start !important}}@media (min-width: 36em){.duet-grid-align-bottom.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:flex-end !important}}@media (min-width: 36em){.duet-grid-align-center.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:center !important}}@media (min-width: 36em){.duet-grid-align-stretch.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:stretch !important}}@media (min-width: 36em){.duet-grid-align-baseline.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:baseline !important}}@media (min-width: 48em){.duet-grid-align-top.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:flex-start !important}}@media (min-width: 48em){.duet-grid-align-bottom.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:flex-end !important}}@media (min-width: 48em){.duet-grid-align-center.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:center !important}}@media (min-width: 48em){.duet-grid-align-stretch.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:stretch !important}}@media (min-width: 48em){.duet-grid-align-baseline.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:baseline !important}}@media (min-width: 64.0625em){.duet-grid-align-top.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:flex-start !important}}@media (min-width: 64.0625em){.duet-grid-align-bottom.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:flex-end !important}}@media (min-width: 64.0625em){.duet-grid-align-center.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:center !important}}@media (min-width: 64.0625em){.duet-grid-align-stretch.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:stretch !important}}@media (min-width: 64.0625em){.duet-grid-align-baseline.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:baseline !important}}.duet-grid-distribution-left.sc-duet-grid-h{justify-content:flex-start !important}.duet-grid-distribution-right.sc-duet-grid-h{justify-content:flex-end !important}.duet-grid-distribution-center.sc-duet-grid-h{justify-content:center !important}.duet-grid-distribution-between.sc-duet-grid-h{justify-content:space-between !important}.duet-grid-distribution-around.sc-duet-grid-h{justify-content:space-around !important}.duet-grid-distribution-evenly.sc-duet-grid-h{justify-content:space-evenly !important}@media (max-width: 35.9375em){.duet-grid-mobile-left.sc-duet-grid-h{align-items:flex-start !important;justify-content:flex-start !important;text-align:left !important}}@media (max-width: 35.9375em){.duet-grid-mobile-center.sc-duet-grid-h{align-items:center !important;justify-content:center !important;text-align:center !important}.duet-grid-mobile-center.sc-duet-grid-h *.sc-duet-grid{text-align:center !important}}@media (max-width: 35.9375em){.duet-grid-mobile-right.sc-duet-grid-h{align-items:flex-end !important;justify-content:flex-end !important;text-align:right !important}.duet-grid-mobile-right.sc-duet-grid-h *.sc-duet-grid{text-align:right !important}}";