@duetds/components 6.10.2 → 6.10.4

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b91d0c7f.js');
+const index = require('./index-4eb7ce33.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const jsUtils = require('./js-utils-134e0318.js');
 const keyboardUtils = require('./keyboard-utils-bb32119b.js');
@@ -13,7 +13,8 @@ const languageUtils = require('./language-utils-44df1d37.js');
 const tokens_module = require('./tokens.module-5fe478ed.js');
 const tokenUtils = require('./token-utils-c1864408.js');
 const createId = require('./create-id-c3b984b1.js');
-const stringUtils = require('./string-utils-5cadd058.js');
+const errorcodes_utils = require('./errorcodes.utils-5deca818.js');
+require('./string-utils-5cadd058.js');
 
 //simple functional component that renders the data in the table
 const TableData = ({ data, groupId, alignment }, _children) => {
@@ -35,6 +36,7 @@ const DuetEditableTable = class {
     this.duetMenuClick = index.createEvent(this, "duetMenuClick", 7);
     this.hasHeadSlotFirst = false;
     this.hasHeadSlotLast = false;
+    this.hasFootSlot = false;
     this.sortableDefaultLabel = {
       fi: "Järjestä",
       en: "Click to sort",
@@ -87,6 +89,7 @@ const DuetEditableTable = class {
     themeableComponent.inheritGlobalTheme(this);
     this.hasHeadSlotFirst = !!this.element.querySelector("[slot='thead-first']");
     this.hasHeadSlotLast = !!this.element.querySelector("[slot='thead-last']");
+    this.hasFootSlot = !!this.element.querySelector("[slot='tfoot']");
   }
   connectedCallback() {
     languageUtils.connectLanguageChangeObserver(this);
@@ -184,7 +187,7 @@ const DuetEditableTable = class {
         "duet-editable-table-actions": !!this.actions,
         "duet-m-0": this.margin === "none",
         "duet-theme-turva": this.theme === "turva",
-      } }, index.h("duet-table", { class: "duet-editable-table-table", sticky: this.sticky, stickyDistance: this.stickyDistance, margin: this.margin, theme: this.theme, variation: this.variation, breakpoint: this.breakpoint, "hide-head-visually": this.hideHeadVisually }, index.h("table", { role: this.accessibleRole }, index.h("caption", null, index.h("slot", { name: "tcaption" })), index.h("thead", null, this.hasHeadSlotFirst && (index.h("tr", null, index.h("td", { class: "duet-editable-table-actions-menu", colSpan: 99 }, index.h("slot", { name: "thead-first" })))), this.renderTableHeader(), this.hasHeadSlotLast && (index.h("tr", null, index.h("td", { class: "duet-editable-table-actions-menu", colSpan: 99 }, index.h("slot", { name: "thead-last" }))))), index.h("tbody", null, this.renderTableBody()), index.h("tfoot", null, index.h("tr", null, index.h("th", { class: "duet-editable-table-footer-menu", colSpan: 99 }, index.h("slot", { name: "tfoot" }))))))));
+      } }, index.h("duet-table", { class: "duet-editable-table-table", sticky: this.sticky, stickyDistance: this.stickyDistance, margin: this.margin, theme: this.theme, variation: this.variation, breakpoint: this.breakpoint, "hide-head-visually": this.hideHeadVisually }, index.h("table", { role: this.accessibleRole }, index.h("caption", null, index.h("slot", { name: "tcaption" })), index.h("thead", null, this.hasHeadSlotFirst && (index.h("tr", null, index.h("td", { class: "duet-editable-table-actions-menu", colSpan: 99 }, index.h("slot", { name: "thead-first" })))), this.renderTableHeader(), this.hasHeadSlotLast && (index.h("tr", null, index.h("td", { class: "duet-editable-table-actions-menu", colSpan: 99 }, index.h("slot", { name: "thead-last" }))))), index.h("tbody", null, this.renderTableBody()), this.hasFootSlot && (index.h("tfoot", null, index.h("tr", null, index.h("td", { class: "duet-editable-table-footer-menu", colSpan: 99 }, index.h("slot", { name: "tfoot" })))))))));
   }
   get element() { return index.getElement(this); }
 };
@@ -429,118 +432,6 @@ const errorCodes = [
 	}
 ];
 
-const getError = (code, errorCodes) => {
-  let error = {
-    type: undefined,
-    system_message: undefined,
-    message: undefined,
-  };
-  errorCodes = stringUtils.parsePossibleJSON(errorCodes);
-  error = errorCodes.filter(errorItem => {
-    // the == is intentional we may be comparing numbers to strings - and that is ok here
-    return errorItem.type == code;
-  })[0];
-  if (!error) {
-    error = errorCodes.filter(errorItem => {
-      return errorItem.type === "default";
-    })[0];
-  }
-  return error;
-};
-const getI18nError = (errorCode, errorCodes) => {
-  const errorFromJson = getError(errorCode, errorCodes);
-  const i18String = languageUtils.getLocaleString(errorFromJson.message);
-  if (i18String === "" || !i18String) {
-    return errorFromJson.system_message;
-  }
-  else {
-    return i18String;
-  }
-};
-
-const formatBytes = (bytes, decimals = 2) => {
-  if (bytes === 0) {
-    return "0 Bytes";
-  }
-  const k = 1024;
-  const dm = decimals < 0 ? 0 : decimals;
-  const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
-};
-
-//tiedosto latautuu
-const fileUploadingInfo = {
-  fi: "Tiedosto latautuu",
-  sv: "Filen laddas upp",
-  en: "File is uploading",
-};
-const UploadItem = ({ data, showLinks, type, actions, errorCodes, theme, label, categoryLabel, showCategory, onLinkClick, }) => {
-  const { uid, item, size, uploaded, url, meta, progress, error } = data;
-  const { name } = item;
-  const linkClickHandler = (event) => {
-    if (onLinkClick) {
-      event.preventDefault();
-      onLinkClick(name, url || "", meta);
-    }
-  };
-  const getFileNameLine = () => {
-    switch (type) {
-      case "inprogress":
-        return (index.h("span", { class: "duet-upload-item-name", role: "status" },
-          index.h("duet-paragraph", { class: "duet-upload-item-name", color: "gray-darker", margin: "none", weight: "semi-bold" },
-            index.h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }),
-            index.h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
-            name),
-          index.h("duet-visually-hidden", null,
-            index.h("duet-paragraph", null, languageUtils.getLocaleString(fileUploadingInfo))),
-          index.h("duet-progress", { progress: Math.ceil(progress), "aria-hidden": true })));
-      case "pending":
-        return (index.h("span", { class: "duet-upload-item-name" },
-          index.h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }),
-          index.h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
-          name));
-      case "failure":
-        return (index.h("span", { class: "duet-upload-item-error", role: "status" },
-          index.h("duet-paragraph", { class: "duet-upload-item-name", color: "danger", margin: "none", weight: "semi-bold" },
-            index.h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }),
-            index.h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
-            name),
-          index.h("duet-paragraph", { class: "duet-upload-item-error-label", size: "small", margin: "none", color: "danger" }, getI18nError(error.type, errorCodes))));
-      default:
-        return uploaded && url && showLinks ? (index.h("duet-paragraph", { color: "secondary", margin: "none", weight: "semi-bold" },
-          index.h("duet-link", { onClick: linkClickHandler, url: url, external: true }, ContentName),
-          index.h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
-          SizeText)) : (index.h("duet-paragraph", { color: "secondary", margin: "none", weight: "semi-bold" },
-          ContentName,
-          index.h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
-          SizeText));
-    }
-  };
-  const ContentName = (index.h("span", { class: "duet-upload-item-name" },
-    index.h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }),
-    index.h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
-    name));
-  const SizeText = (index.h("span", { class: "duet-upload-item-size", style: { fontSize: "14px", fontWeight: "400" } },
-    "(",
-    formatBytes(size),
-    ")"));
-  const Badges = meta && meta.badges ? (index.h("span", null, meta.badges.map(badgeText => (index.h("duet-badge", { color: "primary" }, badgeText))))) : undefined;
-  const actionDescription = `${meta && meta.badges ? meta.badges.join(",") : ""} ${name}`;
-  return (index.h("div", { class: {
-      "upload-item-row": true,
-    } },
-    showCategory && (index.h("div", { class: "item-categories" },
-      index.h("duet-heading", { class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, languageUtils.getLocaleString(categoryLabel)),
-      Badges)),
-    index.h("div", { class: { "item-name": true, "no-category": !showCategory } },
-      !!label && (index.h("duet-heading", { class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, languageUtils.getLocaleString(label))),
-      getFileNameLine()),
-    index.h("div", { class: "item-actions" }, actions.map(actionItem => {
-      return (index.h("duet-action-button", { actionMeta: Object.assign({}, meta || {}), actionId: uid || null, actionName: actionItem.name, theme: theme, iconName: actionItem.icon, iconColor: actionItem.color, iconSize: actionItem.size, background: actionItem.background, "accessible-label": `${actionDescription} ${languageUtils.getLocaleString(actionItem.label)} `, accessibleTitle: false }));
-    }))));
-};
-
 const UploadItemHeader = ({ label, categoryLabel }) => {
   return (index.h("div", { class: "items-header" },
     categoryLabel && (index.h("duet-heading", { class: "category-header", border: "solid", color: "gray-darker", level: "h3", "visual-level": "h6", weight: "semibold", margin: "none" }, languageUtils.getLocaleString(categoryLabel))),
@@ -580,7 +471,7 @@ const validateFileSize = (size, maxBytes) => {
 const validateFile = (item, validators, errorCodes) => {
   const { allowedMimetypes, allowedExtensions, maxBytes } = validators;
   let valid = false;
-  let errorMessage = getError("default", errorCodes);
+  let errorMessage = errorcodes_utils.getError("default", errorCodes);
   if (item) {
     const { name, type, size } = item;
     const mime = validateFileMime(type, allowedMimetypes);
@@ -592,13 +483,13 @@ const validateFile = (item, validators, errorCodes) => {
       : validateFileExtension(name.toLowerCase(), allowedExtensions);
     const bytes = validateFileSize(size, maxBytes);
     if (!mime) {
-      errorMessage = getError("duet-upload-101", errorCodes);
+      errorMessage = errorcodes_utils.getError("duet-upload-101", errorCodes);
     }
     if (!ext) {
-      errorMessage = getError("duet-upload-100", errorCodes);
+      errorMessage = errorcodes_utils.getError("duet-upload-100", errorCodes);
     }
     if (!bytes) {
-      errorMessage = getError("duet-upload-201", errorCodes);
+      errorMessage = errorcodes_utils.getError("duet-upload-201", errorCodes);
     }
     valid = mime && ext && bytes;
   }
@@ -703,6 +594,7 @@ const DuetUpload = class {
     this.bytesMaxReached = false;
     this.filesToUploadExceedsLimit = false;
     this.internalStatusMessageLabel = undefined;
+    this.itemRefs = new Map();
     /**
      * Properties
      */
@@ -774,16 +666,24 @@ const DuetUpload = class {
     };
     this.mapFilesToUploadItems = (data, group, showCategory) => {
       if (group === this.DefaultGroups.success) {
-        return (index.h(UploadItem, { theme: this.theme, actions: this.getActions(group), type: "success", data: data, showLinks: this.showLinks, onLinkClick: this.emitEvent ? this.onLinkClick : undefined, categoryLabel: this.categoryLabel, label: this.uploadedItemsHeaderLabel, showCategory: showCategory }));
+        return (index.h("duet-upload-item", { theme: this.theme, actions: this.getActions(group), type: "success", data: data, showLinks: this.showLinks, linkClickEvent: this.emitEvent ? this.linkClick : undefined, categoryLabel: this.categoryLabel, label: this.uploadedItemsHeaderLabel, showCategory: showCategory, ref: item => {
+            this.itemRefs.set(data.uid, item);
+          } }));
       }
       else if (group === this.DefaultGroups.inprogress) {
-        return (index.h(UploadItem, { theme: this.theme, actions: this.getActions(group), type: "inprogress", data: data, showLinks: this.showLinks, categoryLabel: this.categoryLabel, label: this.uploadedItemsHeaderLabel, showCategory: showCategory }));
+        return (index.h("duet-upload-item", { theme: this.theme, actions: this.getActions(group), type: "inprogress", data: data, showLinks: this.showLinks, categoryLabel: this.categoryLabel, label: this.uploadedItemsHeaderLabel, showCategory: showCategory, ref: item => {
+            this.itemRefs.set(data.uid, item);
+          } }));
       }
       else if (group === this.DefaultGroups.pending) {
-        return (index.h(UploadItem, { theme: this.theme, actions: this.getActions(group), type: "pending", data: data, showLinks: this.showLinks, categoryLabel: this.categoryLabel, label: this.uploadedItemsHeaderLabel, showCategory: showCategory }));
+        return (index.h("duet-upload-item", { theme: this.theme, actions: this.getActions(group), type: "pending", data: data, showLinks: this.showLinks, categoryLabel: this.categoryLabel, label: this.uploadedItemsHeaderLabel, showCategory: showCategory, ref: item => {
+            this.itemRefs.set(data.uid, item);
+          } }));
       }
       else if (group === this.DefaultGroups.failure) {
-        return (index.h(UploadItem, { theme: this.theme, actions: this.getActions(group), type: "failure", data: data, showLinks: this.showLinks, errorCodes: this.errorCodes, categoryLabel: this.categoryLabel, label: this.uploadedItemsHeaderLabel, showCategory: showCategory }));
+        return (index.h("duet-upload-item", { theme: this.theme, actions: this.getActions(group), type: "failure", data: data, showLinks: this.showLinks, errorCodes: this.errorCodes, categoryLabel: this.categoryLabel, label: this.uploadedItemsHeaderLabel, showCategory: showCategory, ref: item => {
+            this.itemRefs.set(data.uid, item);
+          } }));
       }
       else if (data.group) {
         return data.html;
@@ -907,7 +807,7 @@ const DuetUpload = class {
       this.updateValueInMap(name, "valid", false, true);
     };
     this.transferFailed = name => {
-      this.updateValueInMap(name, "error", getI18nError("duet-upload-001", this.errorCodes));
+      this.updateValueInMap(name, "error", errorcodes_utils.getI18nError("duet-upload-001", this.errorCodes));
     };
     this.transferCanceled = name => {
       this.files.delete(name);
@@ -918,10 +818,10 @@ const DuetUpload = class {
       const isTotalSizeOverMaxSize = validateTotalSizeIsAboveMax(this.files, this.maxBytesTotal);
       const isTotalFileAmountAboveMax = validateTotalAmountIsAboveMax(this.files, this.maxFiles);
       if (isTotalSizeOverMaxSize && name) {
-        this.updateValueInMap(name, "error", getI18nError("duet-upload-202", this.errorCodes), false);
+        this.updateValueInMap(name, "error", errorcodes_utils.getI18nError("duet-upload-202", this.errorCodes), false);
       }
       if (isTotalFileAmountAboveMax && name) {
-        this.updateValueInMap(name, "error", getI18nError("duet-upload-301", this.errorCodes), false);
+        this.updateValueInMap(name, "error", errorcodes_utils.getI18nError("duet-upload-301", this.errorCodes), false);
       }
       this.bytesMaxReached = isTotalSizeOverMaxSize;
       this.fileMaxReached = isTotalFileAmountAboveMax;
@@ -1067,14 +967,6 @@ const DuetUpload = class {
         data: { files: this.files },
       });
     };
-    this.onLinkClick = (name, url, meta) => {
-      if (this.emitEvent) {
-        this.linkClick.emit({
-          component: "duet-upload",
-          data: { name, url, meta },
-        });
-      }
-    };
     /**
      * @description This functions return sorted map items byg condition which are:
      */
@@ -1136,6 +1028,7 @@ const DuetUpload = class {
       return this.actions.filter(item => item.map.includes(id));
     };
     this.renderUploadedItems = () => {
+      this.itemRefs.clear();
       const filteredItems = this.filterMap();
       const hasCategory = filteredItems.hasCategory;
       const ItemRows = this.groups.map(group => {
@@ -1383,6 +1276,10 @@ const DuetUpload = class {
   async updateValue(item, key, value) {
     this.updateValueInMap(item, key, value);
   }
+  async focusActionButton(uid) {
+    var _a;
+    await ((_a = this.itemRefs.get(uid)) === null || _a === void 0 ? void 0 : _a.focusActionButton());
+  }
   /**
    * render() function
    * Always the last one in the class.
@@ -1399,7 +1296,7 @@ const DuetUpload = class {
       this.externalUploadButton.ariaLabel = caption;
     }
     // @ts-ignore
-    return (index.h(index.Host, { class: { "duet-m-0": this.margin === "none" } }, index.h("duet-fieldset", { "label-hidden": this.hideHeader, label: this.label, caption: !this.captionOnBottom ? caption : undefined }, index.h("slot", { name: "header" }), !this.files.size && (index.h("duet-empty-state", { id: this.labelId, part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", icon: "messaging-attachment" }, index.h("duet-paragraph", { margin: "none" }, this.fileListEmpty))), !!this.files.size && index.h("slot", { name: "fileheader" }), !!this.files.size && (index.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.renderUploadedItems(), !!this.files.size && index.h("slot", { name: "filefooter" }), index.h("slot", { name: "uploadfooter" }), this.captionOnBottom && (index.h("duet-caption", { margin: "none", size: "small" }, index.h("div", { class: "upload-bottom-caption" }, caption))), index.h("slot", { name: "afterfooter" }), !this.hideButton && (index.h(index.Fragment, null, index.h("duet-spacer", { size: "large" }), index.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))), (this.fileMaxReached || this.bytesMaxReached || this.filesToUploadExceedsLimit) && (index.h(index.Fragment, null, index.h("duet-spacer", { size: "medium" }), index.h("duet-alert", { part: this.identifier ? `${this.identifier}-error-notification` : "duet-upload-error-notification" }, this.fileMaxReached && getI18nError("duet-upload-301", this.errorCodes), this.bytesMaxReached && getI18nError("duet-upload-202", this.errorCodes), this.filesToUploadExceedsLimit && getI18nError("duet-upload-302", this.errorCodes)))), index.h("duet-visually-hidden", { "aria-hidden": "true" }, index.h("input", { ref: input => {
+    return (index.h(index.Host, { class: { "duet-m-0": this.margin === "none" } }, index.h("duet-fieldset", { "label-hidden": this.hideHeader, label: this.label, caption: !this.captionOnBottom ? caption : undefined }, index.h("slot", { name: "header" }), !this.files.size && (index.h("duet-empty-state", { id: this.labelId, part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", icon: "messaging-attachment" }, index.h("duet-paragraph", { margin: "none" }, this.fileListEmpty))), !!this.files.size && index.h("slot", { name: "fileheader" }), !!this.files.size && (index.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.renderUploadedItems(), !!this.files.size && index.h("slot", { name: "filefooter" }), index.h("slot", { name: "uploadfooter" }), this.captionOnBottom && (index.h("duet-caption", { margin: "none", size: "small" }, index.h("div", { class: "upload-bottom-caption" }, caption))), index.h("slot", { name: "afterfooter" }), !this.hideButton && (index.h(index.Fragment, null, index.h("duet-spacer", { size: "large" }), index.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))), (this.fileMaxReached || this.bytesMaxReached || this.filesToUploadExceedsLimit) && (index.h(index.Fragment, null, index.h("duet-spacer", { size: "medium" }), index.h("duet-alert", { part: this.identifier ? `${this.identifier}-error-notification` : "duet-upload-error-notification" }, this.fileMaxReached && errorcodes_utils.getI18nError("duet-upload-301", this.errorCodes), this.bytesMaxReached && errorcodes_utils.getI18nError("duet-upload-202", this.errorCodes), this.filesToUploadExceedsLimit && errorcodes_utils.getI18nError("duet-upload-302", this.errorCodes)))), index.h("duet-visually-hidden", { "aria-hidden": "true" }, index.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/cjs/duet-empty-state.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b91d0c7f.js');
+const index = require('./index-4eb7ce33.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.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:rgb(0, 41, 77);text-align:center;background:rgb(245, 248, 250);border-radius:4px}.duet-empty-state.duet-theme-turva{color:rgb(23, 28, 58);background:rgb(245, 245, 247)}";

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b91d0c7f.js');
+const index = require('./index-4eb7ce33.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
 

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b91d0c7f.js');
+const index = require('./index-4eb7ce33.js');
 const actionArrowRight = require('./action-arrow-right-24fe06be.js');
 const actionNewWindowSmall = require('./action-new-window-small-fa51dfb9.js');
 const commonStrings = require('./common-strings-de17f887.js');

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

@@ -5,12 +5,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b91d0c7f.js');
+const index = require('./index-4eb7ce33.js');
 const tokens = require('./tokens-30e7656b.js');
 const watchOptions = require('./watch-options-d88afac0.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.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}.duet-grid-breakpoint-x-small.sc-duet-grid-h{flex-direction:row !important}.duet-grid-breakpoint-x-small.duet-grid-row-reverse.sc-duet-grid-h{flex-direction:row-reverse !important}@media (max-width: 22.5em){.duet-grid-breakpoint-x-small.sc-duet-grid-h{flex-direction:column !important}}@media (min-width: 36em){.duet-grid-breakpoint-small.sc-duet-grid-h{flex-direction:row !important}.duet-grid-breakpoint-small.duet-grid-row-reverse.sc-duet-grid-h{flex-direction:row-reverse !important}}@media (min-width: 48em){.duet-grid-breakpoint-medium.sc-duet-grid-h{flex-direction:row !important}.duet-grid-breakpoint-medium.duet-grid-row-reverse.sc-duet-grid-h{flex-direction:row-reverse !important}}@media (min-width: 62em){.duet-grid-breakpoint-large.sc-duet-grid-h{flex-direction:row !important}.duet-grid-breakpoint-large.duet-grid-row-reverse.sc-duet-grid-h{flex-direction:row-reverse !important}}@media (min-width: 64.0625em){.duet-grid-breakpoint-x-large.sc-duet-grid-h{flex-direction:row !important}.duet-grid-breakpoint-x-large.duet-grid-row-reverse.sc-duet-grid-h{flex-direction:row-reverse !important}}.duet-grid-wrap.sc-duet-grid-h{flex-wrap:wrap !important}.duet-no-stacking.sc-duet-grid-h{flex-direction:row !important}.duet-no-stacking.duet-grid-row-reverse.sc-duet-grid-h{flex-direction:row-reverse !important}.duet-grid-direction-vertical.duet-grid-breakpoint-x-small.sc-duet-grid-h{flex-direction:column !important}@media (max-width: 35.9375em){.duet-grid-direction-vertical.duet-grid-breakpoint-x-small.sc-duet-grid-h{flex-direction:column !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-large.sc-duet-grid-h{flex-direction:column !important}@media (min-width: 62em){.duet-grid-direction-vertical.duet-grid-breakpoint-large.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}.duet-grid-align-top.duet-grid-breakpoint-x-small.sc-duet-grid-h{align-items:flex-start !important}.duet-grid-align-bottom.duet-grid-breakpoint-x-small.sc-duet-grid-h{align-items:flex-end !important}.duet-grid-align-center.duet-grid-breakpoint-x-small.sc-duet-grid-h{align-items:center !important}.duet-grid-align-stretch.duet-grid-breakpoint-x-small.sc-duet-grid-h{align-items:stretch !important}.duet-grid-align-baseline.duet-grid-breakpoint-x-small.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: 62em){.duet-grid-align-top.duet-grid-breakpoint-large.sc-duet-grid-h{align-items:flex-start !important}}@media (min-width: 62em){.duet-grid-align-bottom.duet-grid-breakpoint-large.sc-duet-grid-h{align-items:flex-end !important}}@media (min-width: 62em){.duet-grid-align-center.duet-grid-breakpoint-large.sc-duet-grid-h{align-items:center !important}}@media (min-width: 62em){.duet-grid-align-stretch.duet-grid-breakpoint-large.sc-duet-grid-h{align-items:stretch !important}}@media (min-width: 62em){.duet-grid-align-baseline.duet-grid-breakpoint-large.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}}";
+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}.duet-grid-variation-flex.sc-duet-grid-h{display:flex !important;flex-direction:column !important;align-items:flex-start !important;justify-content:flex-start !important;width:100%;max-width:100%;height:auto}.duet-grid-variation-flex.duet-grid-breakpoint-x-small.sc-duet-grid-h{flex-direction:row !important}.duet-grid-variation-flex.duet-grid-breakpoint-x-small.duet-grid-row-reverse.sc-duet-grid-h{flex-direction:row-reverse !important}@media (max-width: 22.5em){.duet-grid-variation-flex.duet-grid-breakpoint-x-small.sc-duet-grid-h{flex-direction:column !important}}@media (min-width: 36em){.duet-grid-variation-flex.duet-grid-breakpoint-small.sc-duet-grid-h{flex-direction:row !important}.duet-grid-variation-flex.duet-grid-breakpoint-small.duet-grid-row-reverse.sc-duet-grid-h{flex-direction:row-reverse !important}}@media (min-width: 48em){.duet-grid-variation-flex.duet-grid-breakpoint-medium.sc-duet-grid-h{flex-direction:row !important}.duet-grid-variation-flex.duet-grid-breakpoint-medium.duet-grid-row-reverse.sc-duet-grid-h{flex-direction:row-reverse !important}}@media (min-width: 62em){.duet-grid-variation-flex.duet-grid-breakpoint-large.sc-duet-grid-h{flex-direction:row !important}.duet-grid-variation-flex.duet-grid-breakpoint-large.duet-grid-row-reverse.sc-duet-grid-h{flex-direction:row-reverse !important}}@media (min-width: 64.0625em){.duet-grid-variation-flex.duet-grid-breakpoint-x-large.sc-duet-grid-h{flex-direction:row !important}.duet-grid-variation-flex.duet-grid-breakpoint-x-large.duet-grid-row-reverse.sc-duet-grid-h{flex-direction:row-reverse !important}}.duet-grid-variation-flex.duet-grid-wrap.sc-duet-grid-h{flex-wrap:wrap !important}.duet-grid-variation-flex.duet-no-stacking.sc-duet-grid-h{flex-direction:row !important}.duet-grid-variation-flex.duet-no-stacking.duet-grid-row-reverse.sc-duet-grid-h{flex-direction:row-reverse !important}.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-x-small.sc-duet-grid-h{flex-direction:column !important}@media (max-width: 35.9375em){.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-x-small.sc-duet-grid-h{flex-direction:column !important}}.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-small.sc-duet-grid-h{flex-direction:column !important}@media (min-width: 36em){.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-small.sc-duet-grid-h{flex-direction:column !important}}.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-medium.sc-duet-grid-h{flex-direction:column !important}@media (min-width: 48em){.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-medium.sc-duet-grid-h{flex-direction:column !important}}.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-large.sc-duet-grid-h{flex-direction:column !important}@media (min-width: 62em){.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-large.sc-duet-grid-h{flex-direction:column !important}}.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-x-large.sc-duet-grid-h{flex-direction:column !important}@media (min-width: 64.0625em){.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-x-large.sc-duet-grid-h{flex-direction:column !important}}.duet-grid-variation-flex.duet-grid-align-top.duet-no-stacking.sc-duet-grid-h{align-items:flex-start !important}.duet-grid-variation-flex.duet-grid-align-bottom.duet-no-stacking.sc-duet-grid-h{align-items:flex-end !important}.duet-grid-variation-flex.duet-grid-align-center.duet-no-stacking.sc-duet-grid-h{align-items:center !important}.duet-grid-variation-flex.duet-grid-align-stretch.duet-no-stacking.sc-duet-grid-h{align-items:stretch !important}.duet-grid-variation-flex.duet-grid-align-baseline.duet-no-stacking.sc-duet-grid-h{align-items:baseline !important}.duet-grid-variation-flex.duet-grid-align-top.duet-grid-breakpoint-x-small.sc-duet-grid-h{align-items:flex-start !important}.duet-grid-variation-flex.duet-grid-align-bottom.duet-grid-breakpoint-x-small.sc-duet-grid-h{align-items:flex-end !important}.duet-grid-variation-flex.duet-grid-align-center.duet-grid-breakpoint-x-small.sc-duet-grid-h{align-items:center !important}.duet-grid-variation-flex.duet-grid-align-stretch.duet-grid-breakpoint-x-small.sc-duet-grid-h{align-items:stretch !important}.duet-grid-variation-flex.duet-grid-align-baseline.duet-grid-breakpoint-x-small.sc-duet-grid-h{align-items:baseline !important}@media (min-width: 36em){.duet-grid-variation-flex.duet-grid-align-top.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:flex-start !important}}@media (min-width: 36em){.duet-grid-variation-flex.duet-grid-align-bottom.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:flex-end !important}}@media (min-width: 36em){.duet-grid-variation-flex.duet-grid-align-center.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:center !important}}@media (min-width: 36em){.duet-grid-variation-flex.duet-grid-align-stretch.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:stretch !important}}@media (min-width: 36em){.duet-grid-variation-flex.duet-grid-align-baseline.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:baseline !important}}@media (min-width: 48em){.duet-grid-variation-flex.duet-grid-align-top.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:flex-start !important}}@media (min-width: 48em){.duet-grid-variation-flex.duet-grid-align-bottom.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:flex-end !important}}@media (min-width: 48em){.duet-grid-variation-flex.duet-grid-align-center.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:center !important}}@media (min-width: 48em){.duet-grid-variation-flex.duet-grid-align-stretch.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:stretch !important}}@media (min-width: 48em){.duet-grid-variation-flex.duet-grid-align-baseline.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:baseline !important}}@media (min-width: 62em){.duet-grid-variation-flex.duet-grid-align-top.duet-grid-breakpoint-large.sc-duet-grid-h{align-items:flex-start !important}}@media (min-width: 62em){.duet-grid-variation-flex.duet-grid-align-bottom.duet-grid-breakpoint-large.sc-duet-grid-h{align-items:flex-end !important}}@media (min-width: 62em){.duet-grid-variation-flex.duet-grid-align-center.duet-grid-breakpoint-large.sc-duet-grid-h{align-items:center !important}}@media (min-width: 62em){.duet-grid-variation-flex.duet-grid-align-stretch.duet-grid-breakpoint-large.sc-duet-grid-h{align-items:stretch !important}}@media (min-width: 62em){.duet-grid-variation-flex.duet-grid-align-baseline.duet-grid-breakpoint-large.sc-duet-grid-h{align-items:baseline !important}}@media (min-width: 64.0625em){.duet-grid-variation-flex.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-variation-flex.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-variation-flex.duet-grid-align-center.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:center !important}}@media (min-width: 64.0625em){.duet-grid-variation-flex.duet-grid-align-stretch.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:stretch !important}}@media (min-width: 64.0625em){.duet-grid-variation-flex.duet-grid-align-baseline.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:baseline !important}}.duet-grid-variation-flex.duet-grid-distribution-left.sc-duet-grid-h{justify-content:flex-start !important}.duet-grid-variation-flex.duet-grid-distribution-right.sc-duet-grid-h{justify-content:flex-end !important}.duet-grid-variation-flex.duet-grid-distribution-center.sc-duet-grid-h{justify-content:center !important}.duet-grid-variation-flex.duet-grid-distribution-between.sc-duet-grid-h{justify-content:space-between !important}.duet-grid-variation-flex.duet-grid-distribution-around.sc-duet-grid-h{justify-content:space-around !important}.duet-grid-variation-flex.duet-grid-distribution-evenly.sc-duet-grid-h{justify-content:space-evenly !important}@media (max-width: 35.9375em){.duet-grid-variation-flex.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-variation-flex.duet-grid-mobile-center.sc-duet-grid-h{align-items:center !important;justify-content:center !important;text-align:center !important}.duet-grid-variation-flex.duet-grid-mobile-center.sc-duet-grid-h *.sc-duet-grid{text-align:center !important}}@media (max-width: 35.9375em){.duet-grid-variation-flex.duet-grid-mobile-right.sc-duet-grid-h{align-items:flex-end !important;justify-content:flex-end !important;text-align:right !important}.duet-grid-variation-flex.duet-grid-mobile-right.sc-duet-grid-h *.sc-duet-grid{text-align:right !important}}.duet-grid-variation-grid.sc-duet-grid-h{display:grid;grid-template-rows:repeat(1, 1fr);grid-template-columns:repeat(4, minmax(0, 1fr));gap:16px;align-items:flex-start;justify-content:center;margin:0 20px}@media (min-width: 36em){.duet-grid-variation-grid.sc-duet-grid-h{gap:24px;margin:0 40px}}@media (min-width: 48em){.duet-grid-variation-grid.sc-duet-grid-h{grid-template-columns:repeat(8, 55px);gap:24px 32px;margin:0 auto}}@media (min-width: 62em){.duet-grid-variation-grid.sc-duet-grid-h{grid-template-columns:repeat(12, minmax(0, 1fr));margin:0 64px}}@media (min-width: 76.25em){.duet-grid-variation-grid.sc-duet-grid-h{grid-template-columns:repeat(12, 55px);gap:40px;margin:0 auto}}.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-small.sc-duet-grid-s>*{grid-column:1/span 4}@media (min-width: 48em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-small.sc-duet-grid-s>*{grid-column:1/span 8}}@media (min-width: 62em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-small.sc-duet-grid-s>*{grid-column:3/span 8}}.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-medium.sc-duet-grid-s>*{grid-column:1/span 4}@media (min-width: 48em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-medium.sc-duet-grid-s>*{grid-column:1/span 8}}@media (min-width: 62em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-medium.sc-duet-grid-s>*{grid-column:2/span 10}}.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-large.sc-duet-grid-s>*{grid-column:1/span 4}@media (min-width: 48em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-large.sc-duet-grid-s>*{grid-column:1/span 8}}@media (min-width: 62em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-large.sc-duet-grid-s>*{grid-column:1/span 12}}.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-sidebar-right.sc-duet-grid-s>:nth-child(1){grid-column:1/span 4}@media (min-width: 48em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-sidebar-right.sc-duet-grid-s>:nth-child(1){grid-column:1/span 8}}@media (min-width: 62em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-sidebar-right.sc-duet-grid-s>:nth-child(1){grid-column:1/span 8}}.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-sidebar-right.sc-duet-grid-s>:nth-child(2){grid-column:1/span 4}@media (min-width: 48em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-sidebar-right.sc-duet-grid-s>:nth-child(2){grid-column:1/span 8}}@media (min-width: 62em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-sidebar-right.sc-duet-grid-s>:nth-child(2){grid-column:9/span 4}}.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-sidebar-left.sc-duet-grid-s>:nth-child(1){grid-column:1/span 4}@media (min-width: 48em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-sidebar-left.sc-duet-grid-s>:nth-child(1){grid-column:1/span 8}}@media (min-width: 62em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-sidebar-left.sc-duet-grid-s>:nth-child(1){grid-column:1/span 4}}.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-sidebar-left.sc-duet-grid-s>:nth-child(2){grid-column:1/span 4}@media (min-width: 48em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-sidebar-left.sc-duet-grid-s>:nth-child(2){grid-column:1/span 8}}@media (min-width: 62em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-sidebar-left.sc-duet-grid-s>:nth-child(2){grid-column:5/span 8}}.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-two-columns.sc-duet-grid-s>:nth-child(1){grid-column:1/span 4}@media (min-width: 48em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-two-columns.sc-duet-grid-s>:nth-child(1){grid-column:1/span 4}}@media (min-width: 62em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-two-columns.sc-duet-grid-s>:nth-child(1){grid-column:1/span 6}}.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-two-columns.sc-duet-grid-s>:nth-child(2){grid-column:1/span 4}@media (min-width: 48em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-two-columns.sc-duet-grid-s>:nth-child(2){grid-column:5/span 4}}@media (min-width: 62em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-two-columns.sc-duet-grid-s>:nth-child(2){grid-column:7/span 6}}.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-three-columns.sc-duet-grid-s>:nth-child(1){grid-column:1/span 4}@media (min-width: 48em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-three-columns.sc-duet-grid-s>:nth-child(1){grid-column:1/span 8}}@media (min-width: 62em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-three-columns.sc-duet-grid-s>:nth-child(1){grid-column:1/span 4}}.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-three-columns.sc-duet-grid-s>:nth-child(2){grid-column:1/span 4}@media (min-width: 48em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-three-columns.sc-duet-grid-s>:nth-child(2){grid-column:1/span 8}}@media (min-width: 62em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-three-columns.sc-duet-grid-s>:nth-child(2){grid-column:5/span 4}}.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-three-columns.sc-duet-grid-s>:nth-child(3){grid-column:1/span 4}@media (min-width: 48em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-three-columns.sc-duet-grid-s>:nth-child(3){grid-column:1/span 8}}@media (min-width: 62em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-three-columns.sc-duet-grid-s>:nth-child(3){grid-column:9/span 4}}";
 
 function isGridItem(element) {
   return element.tagName.toLowerCase() === "duet-grid-item";
@@ -31,6 +31,7 @@ const DuetGrid = class {
     this.alignment = "top";
     this.distribution = "default";
     this.mobile = "";
+    this.gridTemplate = null;
   }
   /**
    * Private functions
@@ -151,7 +152,9 @@ const DuetGrid = class {
         "duet-grid-breakpoint-large": this.breakpoint === "large",
         "duet-grid-breakpoint-x-large": this.breakpoint === "x-large",
         "duet-grid-row-reverse": this.rowReverse,
-      } }));
+        [`duet-grid-variation-${this.gridTemplate ? "grid" : "flex"}`]: true,
+        [`duet-grid-template-${this.gridTemplate}`]: true,
+      } }, index.h("slot", null)));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {

package/lib/cjs/duet-header_2.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b91d0c7f.js');
+const index = require('./index-4eb7ce33.js');
 const formSearch = require('./form-search-d61b2843.js');
 const tokens = require('./tokens-30e7656b.js');
 const bodyScrollLock_es6 = require('./bodyScrollLock.es6-6ef1142a.js');

package/lib/cjs/duet-hero.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b91d0c7f.js');
+const index = require('./index-4eb7ce33.js');
 const actionNewWindowSmall = require('./action-new-window-small-fa51dfb9.js');
 const commonStrings = require('./common-strings-de17f887.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');

package/lib/cjs/duet-icon.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b91d0c7f.js');
+const index = require('./index-4eb7ce33.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const tokenUtils = require('./token-utils-c1864408.js');
 require('./tokens.module-5fe478ed.js');

package/lib/cjs/duet-input_2.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b91d0c7f.js');
+const index = require('./index-4eb7ce33.js');
 const formSearch = require('./form-search-d61b2843.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');

package/lib/cjs/duet-layout.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b91d0c7f.js');
+const index = require('./index-4eb7ce33.js');
 const isInternetExplorer = require('./is-internet-explorer-91361c56.js');
 
 const duetLayoutCss = "*,*::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;flex:1 0 auto;width:100%}:host(.duet-middle){display:flex}:host(.duet-middle) .duet-layout{padding:36px 28px !important}@media (min-width: 36em){:host(.duet-middle) .duet-layout{padding:48px 36px !important}}@media (min-width: 62em){:host(.duet-middle) .duet-layout{padding:56px !important}}:host(.duet-ie){height:100%}:host(.duet-middle.duet-ie){height:auto}.duet-layout{position:relative;padding:0 16px;margin:48px auto 36px}@media (max-width: 20.5em){.duet-layout.padding-xxx-small{padding:0}}@media (max-width: 22.5em){.duet-layout.padding-xx-small{padding:0}}@media (max-width: 35.9375em){.duet-layout.padding-x-small{padding:0}}@media (min-width: 36em){.duet-layout.padding-small{padding:0}}@media (min-width: 48em){.duet-layout.padding-medium{padding:0}}@media (min-width: 62em){.duet-layout.padding-large{padding:0}}@media (min-width: 64.0625em){.duet-layout.padding-x-large{padding:0}}@media (min-width: 76.25em){.duet-layout.padding-xx-large{padding:0}}@media (min-width: 106.25em){.duet-layout.padding-xxx-large{padding:0}}@media (min-width: 36em){.duet-layout{margin-top:72px}}.duet-layout.duet-layout-has-top{margin-top:0}.duet-layout.duet-m-0{margin-top:0 !important;margin-bottom:0 !important}.duet-layout.duet-center{display:flex;align-items:center;justify-content:center;width:100%;max-width:888px}@media (min-width: 36em){.duet-layout.duet-center{padding:0 48px}}@media (min-width: 48em){.duet-layout.duet-center{padding:0 72px}}@media (min-width: 62em){.duet-layout.duet-center{width:100%}}@media (min-width: 36em){.duet-layout{padding:0 28px}}@media (min-width: 62em){.duet-layout{display:flex;flex-direction:row;padding:0 56px;margin-bottom:48px}}@media (min-width: 76.25em){.duet-layout{max-width:1110px;padding:0}}.duet-main,.duet-sidebar,.duet-layout-top,.duet-layout-bottom{display:block;width:100%}.duet-layout-top{position:relative;display:block;width:100%;margin:72px auto 0}.duet-layout-top.duet-m-0{margin-top:0 !important;margin-bottom:0 !important}.duet-layout-top .duet-layout-top-wrapper{padding:0 20px;margin:0 auto}@media (min-width: 36em){.duet-layout-top .duet-layout-top-wrapper{padding:0 28px}}@media (min-width: 62em){.duet-layout-top .duet-layout-top-wrapper{padding:0 56px}}@media (min-width: 76.25em){.duet-layout-top .duet-layout-top-wrapper{max-width:1110px;padding:0}}.duet-center .duet-layout-top-wrapper{max-width:888px}@media (min-width: 36em){.duet-center .duet-layout-top-wrapper{padding:0 48px}}@media (min-width: 48em){.duet-center .duet-layout-top-wrapper{padding:0 72px}}@media (min-width: 62em){.duet-main{min-width:600px;margin:0 auto}.has-sidebar .duet-main{max-width:734px;margin-right:20px}}@media (min-width: 62em){.duet-sidebar{min-width:256px;max-width:356px}}@media (min-width: 62em){.duet-sidebar-container{width:auto;max-width:356px}}@media (min-width: 62em){.duet-sidebar-container.has-tabs{margin-top:89px}}@media (min-width: 62em){.duet-sidebar-container.sticky{position:sticky}.duet-sidebar-container.sticky.with-links{top:calc(3rem + 20px)}.duet-sidebar-container.sticky.without-links{top:calc(4rem + 20px)}}";

package/lib/cjs/duet-list_2.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b91d0c7f.js');
+const index = require('./index-4eb7ce33.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const watchOptions = require('./watch-options-d88afac0.js');
 

package/lib/cjs/duet-menu-bar-button.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b91d0c7f.js');
+const index = require('./index-4eb7ce33.js');
 const tokens = require('./tokens-30e7656b.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 

package/lib/cjs/duet-menu-bar-dropdown-link.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b91d0c7f.js');
+const index = require('./index-4eb7ce33.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const keyboardUtils = require('./keyboard-utils-bb32119b.js');
 

package/lib/cjs/duet-menu-bar-dropdown.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b91d0c7f.js');
+const index = require('./index-4eb7ce33.js');
 const tokens = require('./tokens-30e7656b.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const keyboardUtils = require('./keyboard-utils-bb32119b.js');

package/lib/cjs/duet-menu-bar-link.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b91d0c7f.js');
+const index = require('./index-4eb7ce33.js');
 const tokens = require('./tokens-30e7656b.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 

package/lib/cjs/duet-menu-bar.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b91d0c7f.js');
+const index = require('./index-4eb7ce33.js');
 const tokens = require('./tokens-30e7656b.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 

package/lib/cjs/duet-modal.cjs.entry.js

@@ -5,11 +5,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b91d0c7f.js');
+const index = require('./index-4eb7ce33.js');
 const bodyScrollLock_es6 = require('./bodyScrollLock.es6-6ef1142a.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
-const focusUtils = require('./focus-utils-a7ec8d4d.js');
+const focusUtils = require('./focus-utils-a66763f4.js');
 const keyboardUtils = require('./keyboard-utils-bb32119b.js');
 const languageUtils = require('./language-utils-44df1d37.js');
 require('./string-utils-5cadd058.js');

package/lib/cjs/duet-multiselect.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b91d0c7f.js');
+const index = require('./index-4eb7ce33.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
 const keyboardUtils = require('./keyboard-utils-bb32119b.js');

package/lib/cjs/duet-nav.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b91d0c7f.js');
+const index = require('./index-4eb7ce33.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 
 const duetNavCss = "*,*::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;width:100%}slot[name=mobile]{display:inherit}slot[name=desktop]{display:none}@media (min-width: 62em){slot[name=mobile]{display:none}slot[name=desktop]{display:inherit}}";

package/lib/cjs/duet-notification_2.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b91d0c7f.js');
+const index = require('./index-4eb7ce33.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const languageUtils = require('./language-utils-44df1d37.js');
 const actionArrowDownSmall = require('./action-arrow-down-small-ef77a2d1.js');

package/lib/cjs/duet-number-input.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b91d0c7f.js');
+const index = require('./index-4eb7ce33.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
 const keyboardUtils = require('./keyboard-utils-bb32119b.js');
@@ -329,6 +329,13 @@ const DuetNumberInput = class {
   async setFocus(options) {
     this.duetInputElement.setFocus(options);
   }
+  /**
+   * Returns a promise which resolves to the current input numeric value.
+   */
+  async getValueAsNumber() {
+    const currentValue = SafeParseFloat(this.value, this.locale);
+    return this.value === undefined || this.value === null || isNaN(currentValue) ? null : currentValue;
+  }
   clearValue() {
     this.value = null;
     this.duetInputElement.value = "";