@spscommerce/ds-web-components 0.1.0

package/dist/lib/index.es.js

@@ -0,0 +1,2802 @@
+import { noI18nI18n, SpsIcon, SpsInsightCardKind, SpsInsightCardIcons } from "@spscommerce/ds-shared";
+import { parseFileSize, code } from "@spscommerce/utils";
+var incrementalDomCjs = {};
+Object.defineProperty(incrementalDomCjs, "__esModule", { value: true });
+/**
+ * @license
+ * Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var symbols = {
+  default: "__default"
+};
+/**
+ * @license
+ * Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var hasOwnProperty = Object.prototype.hasOwnProperty;
+function Blank() {
+}
+Blank.prototype = Object.create(null);
+function has(map, property) {
+  return hasOwnProperty.call(map, property);
+}
+function createMap() {
+  return new Blank();
+}
+function truncateArray(arr, length) {
+  while (arr.length > length) {
+    arr.pop();
+  }
+}
+/**
+ * @license
+ * Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+function getNamespace(name) {
+  if (name.lastIndexOf("xml:", 0) === 0) {
+    return "http://www.w3.org/XML/1998/namespace";
+  }
+  if (name.lastIndexOf("xlink:", 0) === 0) {
+    return "http://www.w3.org/1999/xlink";
+  }
+  return void 0;
+}
+function applyAttr(el, name, value) {
+  if (value == null) {
+    el.removeAttribute(name);
+  } else {
+    var attrNS = getNamespace(name);
+    if (attrNS) {
+      el.setAttributeNS(attrNS, name, String(value));
+    } else {
+      el.setAttribute(name, String(value));
+    }
+  }
+}
+function applyProp(el, name, value) {
+  el[name] = value;
+}
+function setStyleValue(style, prop, value) {
+  if (prop.indexOf("-") >= 0) {
+    style.setProperty(prop, value);
+  } else {
+    style[prop] = value;
+  }
+}
+function applyStyle(el, name, style) {
+  if (typeof style === "string") {
+    el.style.cssText = style;
+  } else {
+    el.style.cssText = "";
+    var elStyle = el.style;
+    for (var prop in style) {
+      if (has(style, prop)) {
+        setStyleValue(elStyle, prop, style[prop]);
+      }
+    }
+  }
+}
+function applyAttributeTyped(el, name, value) {
+  var type = typeof value;
+  if (type === "object" || type === "function") {
+    applyProp(el, name, value);
+  } else {
+    applyAttr(el, name, value);
+  }
+}
+var attributes = createMap();
+attributes[symbols.default] = applyAttributeTyped;
+attributes["style"] = applyStyle;
+function updateAttribute(el, name, value) {
+  var mutator = attributes[name] || attributes[symbols.default];
+  mutator(el, name, value);
+}
+/**
+ * @license
+ * Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var inAttributes = false;
+function assertNoUnclosedTags(openElement, root) {
+  if (openElement === root) {
+    return;
+  }
+  var currentElement2 = openElement;
+  var openTags = [];
+  while (currentElement2 && currentElement2 !== root) {
+    openTags.push(currentElement2.nodeName.toLowerCase());
+    currentElement2 = currentElement2.parentNode;
+  }
+  throw new Error("One or more tags were not closed:\n" + openTags.join("\n"));
+}
+function assertPatchOuterHasParentNode(parent) {
+  if (!parent) {
+    console.warn("patchOuter requires the node have a parent if there is a key.");
+  }
+}
+function assertVirtualAttributesClosed() {
+  if (inAttributes) {
+    throw new Error("elementOpenEnd() must be called after calling elementOpenStart().");
+  }
+}
+function assertPatchElementNoExtras(maybeStartNode, maybeCurrentNode, expectedNextNode, expectedPrevNode) {
+  var startNode = maybeStartNode;
+  var currentNode2 = maybeCurrentNode;
+  var wasUpdated = currentNode2.nextSibling === expectedNextNode && currentNode2.previousSibling === expectedPrevNode;
+  var wasChanged = currentNode2.nextSibling === startNode.nextSibling && currentNode2.previousSibling === expectedPrevNode;
+  var wasRemoved = currentNode2 === startNode;
+  if (!wasUpdated && !wasChanged && !wasRemoved) {
+    throw new Error("There must be exactly one top level call corresponding to the patched element.");
+  }
+}
+function setInAttributes(value) {
+  var previous = inAttributes;
+  inAttributes = value;
+  return previous;
+}
+function assert(val) {
+  return val;
+}
+/**
+ * @license
+ * Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var notifications = {
+  nodesCreated: null,
+  nodesDeleted: null
+};
+/**
+ * @license
+ * Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var Context = function() {
+  function Context2() {
+    this.created = [];
+    this.deleted = [];
+  }
+  Context2.prototype.markCreated = function(node) {
+    this.created.push(node);
+  };
+  Context2.prototype.markDeleted = function(node) {
+    this.deleted.push(node);
+  };
+  Context2.prototype.notifyChanges = function() {
+    if (notifications.nodesCreated && this.created.length > 0) {
+      notifications.nodesCreated(this.created);
+    }
+    if (notifications.nodesDeleted && this.deleted.length > 0) {
+      notifications.nodesDeleted(this.deleted);
+    }
+  };
+  return Context2;
+}();
+/**
+ * @license
+ * Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+function isDocumentRoot(node) {
+  return node.nodeType === 11 || node.nodeType === 9;
+}
+function isElement(node) {
+  return node.nodeType === 1;
+}
+function isText(node) {
+  return node.nodeType === 3;
+}
+function getAncestry(node, root) {
+  var ancestry = [];
+  var cur = node;
+  while (cur !== root) {
+    var n = cur;
+    ancestry.push(n);
+    cur = n.parentNode;
+  }
+  return ancestry;
+}
+var getRootNode = Node.prototype.getRootNode || function() {
+  var cur = this;
+  var prev = cur;
+  while (cur) {
+    prev = cur;
+    cur = cur.parentNode;
+  }
+  return prev;
+};
+function getActiveElement(node) {
+  var root = getRootNode.call(node);
+  return isDocumentRoot(root) ? root.activeElement : null;
+}
+function getFocusedPath(node, root) {
+  var activeElement = getActiveElement(node);
+  if (!activeElement || !node.contains(activeElement)) {
+    return [];
+  }
+  return getAncestry(activeElement, root);
+}
+function moveBefore(parentNode, node, referenceNode) {
+  var insertReferenceNode = node.nextSibling;
+  var cur = referenceNode;
+  while (cur !== null && cur !== node) {
+    var next = cur.nextSibling;
+    parentNode.insertBefore(cur, insertReferenceNode);
+    cur = next;
+  }
+}
+/**
+ * @license
+ * Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var NodeData = function() {
+  function NodeData2(nameOrCtor, key2, text2) {
+    this._attrsArr = null;
+    this.staticsApplied = false;
+    this.nameOrCtor = nameOrCtor;
+    this.key = key2;
+    this.text = text2;
+  }
+  NodeData2.prototype.hasEmptyAttrsArr = function() {
+    var attrs = this._attrsArr;
+    return !attrs || !attrs.length;
+  };
+  NodeData2.prototype.getAttrsArr = function(length) {
+    return this._attrsArr || (this._attrsArr = new Array(length));
+  };
+  return NodeData2;
+}();
+function initData(node, nameOrCtor, key2, text2) {
+  var data = new NodeData(nameOrCtor, key2, text2);
+  node["__incrementalDOMData"] = data;
+  return data;
+}
+function getData(node, key2) {
+  return importSingleNode(node, key2);
+}
+function isDataInitialized(node) {
+  return Boolean(node["__incrementalDOMData"]);
+}
+function getKey(node) {
+  assert(node["__incrementalDOMData"]);
+  return getData(node).key;
+}
+function importSingleNode(node, fallbackKey) {
+  if (node["__incrementalDOMData"]) {
+    return node["__incrementalDOMData"];
+  }
+  var nodeName = isElement(node) ? node.localName : node.nodeName;
+  var key2 = isElement(node) ? node.getAttribute("key") || fallbackKey : null;
+  var text2 = isText(node) ? node.data : void 0;
+  var data = initData(node, nodeName, key2, text2);
+  if (isElement(node)) {
+    recordAttributes(node, data);
+  }
+  return data;
+}
+function importNode(node) {
+  importSingleNode(node);
+  for (var child = node.firstChild; child; child = child.nextSibling) {
+    importNode(child);
+  }
+}
+function clearCache(node) {
+  node["__incrementalDOMData"] = null;
+  for (var child = node.firstChild; child; child = child.nextSibling) {
+    clearCache(child);
+  }
+}
+function recordAttributes(node, data) {
+  var attributes2 = node.attributes;
+  var length = attributes2.length;
+  if (!length) {
+    return;
+  }
+  var attrsArr = data.getAttrsArr(length);
+  for (var i = 0, j = 0; i < length; i += 1, j += 2) {
+    var attr2 = attributes2[i];
+    var name = attr2.name;
+    var value = attr2.value;
+    attrsArr[j] = name;
+    attrsArr[j + 1] = value;
+  }
+}
+/**
+ * @license
+ * Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+function getNamespaceForTag(tag, parent) {
+  if (tag === "svg") {
+    return "http://www.w3.org/2000/svg";
+  }
+  if (tag === "math") {
+    return "http://www.w3.org/1998/Math/MathML";
+  }
+  if (parent == null) {
+    return null;
+  }
+  if (getData(parent).nameOrCtor === "foreignObject") {
+    return null;
+  }
+  return parent.namespaceURI;
+}
+function createElement(doc2, parent, nameOrCtor, key2) {
+  var el;
+  if (typeof nameOrCtor === "function") {
+    el = new nameOrCtor();
+  } else {
+    var namespace = getNamespaceForTag(nameOrCtor, parent);
+    if (namespace) {
+      el = doc2.createElementNS(namespace, nameOrCtor);
+    } else {
+      el = doc2.createElement(nameOrCtor);
+    }
+  }
+  initData(el, nameOrCtor, key2);
+  return el;
+}
+function createText(doc2) {
+  var node = doc2.createTextNode("");
+  initData(node, "#text", null);
+  return node;
+}
+/**
+ * @license
+ * Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var context = null;
+var currentNode = null;
+var currentParent = null;
+var doc = null;
+var focusPath = [];
+var argsBuilder = [];
+function getArgsBuilder() {
+  return argsBuilder;
+}
+function patchFactory(run) {
+  var f = function(node, fn, data) {
+    var prevContext = context;
+    var prevDoc = doc;
+    var prevFocusPath = focusPath;
+    var prevArgsBuilder = argsBuilder;
+    var prevCurrentNode = currentNode;
+    var prevCurrentParent = currentParent;
+    var previousInAttributes = false;
+    context = new Context();
+    doc = node.ownerDocument;
+    argsBuilder = [];
+    currentParent = node.parentNode;
+    focusPath = getFocusedPath(node, currentParent);
+    try {
+      var retVal = run(node, fn, data);
+      if (false)
+        ;
+      return retVal;
+    } finally {
+      doc = prevDoc;
+      argsBuilder = prevArgsBuilder;
+      currentNode = prevCurrentNode;
+      currentParent = prevCurrentParent;
+      focusPath = prevFocusPath;
+      context.notifyChanges();
+      setInAttributes(previousInAttributes);
+      context = prevContext;
+    }
+  };
+  return f;
+}
+var patchInner = patchFactory(function(node, fn, data) {
+  currentNode = node;
+  enterNode();
+  fn(data);
+  exitNode();
+  if (false)
+    ;
+  return node;
+});
+var patchOuter = patchFactory(function(node, fn, data) {
+  var startNode = { nextSibling: node };
+  var expectedNextNode = null;
+  var expectedPrevNode = null;
+  if (false)
+    ;
+  currentNode = startNode;
+  fn(data);
+  if (false)
+    ;
+  if (currentParent) {
+    clearUnvisitedDOM(currentParent, getNextNode(), node.nextSibling);
+  }
+  return startNode === currentNode ? null : currentNode;
+});
+function matches(matchNode, nameOrCtor, key2) {
+  var data = getData(matchNode, key2);
+  return nameOrCtor == data.nameOrCtor && key2 == data.key;
+}
+function getMatchingNode(matchNode, nameOrCtor, key2) {
+  if (!matchNode) {
+    return null;
+  }
+  if (matches(matchNode, nameOrCtor, key2)) {
+    return matchNode;
+  }
+  if (key2) {
+    while (matchNode = matchNode.nextSibling) {
+      if (matches(matchNode, nameOrCtor, key2)) {
+        return matchNode;
+      }
+    }
+  }
+  return null;
+}
+function createNode(nameOrCtor, key2) {
+  var node;
+  if (nameOrCtor === "#text") {
+    node = createText(doc);
+  } else {
+    node = createElement(doc, currentParent, nameOrCtor, key2);
+  }
+  context.markCreated(node);
+  return node;
+}
+function alignWithDOM(nameOrCtor, key2) {
+  var existingNode = getMatchingNode(currentNode, nameOrCtor, key2);
+  var node = existingNode || createNode(nameOrCtor, key2);
+  if (node === currentNode) {
+    return;
+  }
+  if (focusPath.indexOf(node) >= 0) {
+    moveBefore(currentParent, node, currentNode);
+  } else {
+    currentParent.insertBefore(node, currentNode);
+  }
+  currentNode = node;
+}
+function clearUnvisitedDOM(maybeParentNode, startNode, endNode) {
+  var parentNode = maybeParentNode;
+  var child = startNode;
+  while (child !== endNode) {
+    var next = child.nextSibling;
+    parentNode.removeChild(child);
+    context.markDeleted(child);
+    child = next;
+  }
+}
+function enterNode() {
+  currentParent = currentNode;
+  currentNode = null;
+}
+function getNextNode() {
+  if (currentNode) {
+    return currentNode.nextSibling;
+  } else {
+    return currentParent.firstChild;
+  }
+}
+function nextNode() {
+  currentNode = getNextNode();
+}
+function exitNode() {
+  clearUnvisitedDOM(currentParent, getNextNode(), null);
+  currentNode = currentParent;
+  currentParent = currentParent.parentNode;
+}
+function open(nameOrCtor, key2) {
+  nextNode();
+  alignWithDOM(nameOrCtor, key2);
+  enterNode();
+  return currentParent;
+}
+function close() {
+  exitNode();
+  return currentNode;
+}
+function text() {
+  nextNode();
+  alignWithDOM("#text", null);
+  return currentNode;
+}
+function currentElement() {
+  return currentParent;
+}
+function currentPointer() {
+  return getNextNode();
+}
+function skip() {
+  currentNode = currentParent.lastChild;
+}
+/**
+ * @license
+ * Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var ATTRIBUTES_OFFSET = 3;
+var prevAttrsMap = createMap();
+function applyStatics(node, data, statics) {
+  data.staticsApplied = true;
+  if (!statics || !statics.length) {
+    return;
+  }
+  if (data.hasEmptyAttrsArr()) {
+    for (var i = 0; i < statics.length; i += 2) {
+      updateAttribute(node, statics[i], statics[i + 1]);
+    }
+    return;
+  }
+  for (var i = 0; i < statics.length; i += 2) {
+    prevAttrsMap[statics[i]] = i + 1;
+  }
+  var attrsArr = data.getAttrsArr(0);
+  var j = 0;
+  for (var i = 0; i < attrsArr.length; i += 2) {
+    var name = attrsArr[i];
+    var value = attrsArr[i + 1];
+    var staticsIndex = prevAttrsMap[name];
+    if (staticsIndex) {
+      if (statics[staticsIndex] === value) {
+        delete prevAttrsMap[name];
+      }
+      continue;
+    }
+    attrsArr[j] = name;
+    attrsArr[j + 1] = value;
+    j += 2;
+  }
+  truncateArray(attrsArr, j);
+  for (var name in prevAttrsMap) {
+    updateAttribute(node, name, statics[prevAttrsMap[name]]);
+    delete prevAttrsMap[name];
+  }
+}
+function elementOpen(nameOrCtor, key2, statics) {
+  var varArgs = [];
+  for (var _i = 3; _i < arguments.length; _i++) {
+    varArgs[_i - 3] = arguments[_i];
+  }
+  var node = open(nameOrCtor, key2);
+  var data = getData(node);
+  if (!data.staticsApplied) {
+    applyStatics(node, data, statics);
+  }
+  var attrsLength = Math.max(0, arguments.length - ATTRIBUTES_OFFSET);
+  var hadNoAttrs = data.hasEmptyAttrsArr();
+  if (!attrsLength && hadNoAttrs) {
+    return node;
+  }
+  var attrsArr = data.getAttrsArr(attrsLength);
+  var i = ATTRIBUTES_OFFSET;
+  var j = 0;
+  for (; i < arguments.length; i += 2, j += 2) {
+    var name = arguments[i];
+    if (hadNoAttrs) {
+      attrsArr[j] = name;
+    } else if (attrsArr[j] !== name) {
+      break;
+    }
+    var value = arguments[i + 1];
+    if (hadNoAttrs || attrsArr[j + 1] !== value) {
+      attrsArr[j + 1] = value;
+      updateAttribute(node, name, value);
+    }
+  }
+  if (i < arguments.length || j < attrsArr.length) {
+    var attrsStart = j;
+    for (; j < attrsArr.length; j += 2) {
+      prevAttrsMap[attrsArr[j]] = attrsArr[j + 1];
+    }
+    for (j = attrsStart; i < arguments.length; i += 2, j += 2) {
+      var name = arguments[i];
+      var value = arguments[i + 1];
+      if (prevAttrsMap[name] !== value) {
+        updateAttribute(node, name, value);
+      }
+      attrsArr[j] = name;
+      attrsArr[j + 1] = value;
+      delete prevAttrsMap[name];
+    }
+    truncateArray(attrsArr, j);
+    for (var name in prevAttrsMap) {
+      updateAttribute(node, name, void 0);
+      delete prevAttrsMap[name];
+    }
+  }
+  return node;
+}
+function elementOpenStart(nameOrCtor, key2, statics) {
+  var argsBuilder2 = getArgsBuilder();
+  argsBuilder2[0] = nameOrCtor;
+  argsBuilder2[1] = key2;
+  argsBuilder2[2] = statics;
+}
+function key(key2) {
+  var argsBuilder2 = getArgsBuilder();
+  argsBuilder2[1] = key2;
+}
+function attr(name, value) {
+  var argsBuilder2 = getArgsBuilder();
+  argsBuilder2.push(name);
+  argsBuilder2.push(value);
+}
+function elementOpenEnd() {
+  var argsBuilder2 = getArgsBuilder();
+  var node = elementOpen.apply(null, argsBuilder2);
+  truncateArray(argsBuilder2, 0);
+  return node;
+}
+function elementClose(nameOrCtor) {
+  var node = close();
+  return node;
+}
+function elementVoid(nameOrCtor, key2, statics) {
+  var varArgs = [];
+  for (var _i = 3; _i < arguments.length; _i++) {
+    varArgs[_i - 3] = arguments[_i];
+  }
+  elementOpen.apply(null, arguments);
+  return elementClose();
+}
+function text$1(value) {
+  var varArgs = [];
+  for (var _i = 1; _i < arguments.length; _i++) {
+    varArgs[_i - 1] = arguments[_i];
+  }
+  var node = text();
+  var data = getData(node);
+  if (data.text !== value) {
+    data.text = value;
+    var formatted = value;
+    for (var i = 1; i < arguments.length; i += 1) {
+      var fn = arguments[i];
+      formatted = fn(formatted);
+    }
+    node.data = formatted;
+  }
+  return node;
+}
+/**
+ * @license
+ * Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+incrementalDomCjs.applyAttr = applyAttr;
+incrementalDomCjs.applyProp = applyProp;
+incrementalDomCjs.attributes = attributes;
+incrementalDomCjs.close = close;
+var currentElement_1 = incrementalDomCjs.currentElement = currentElement;
+var currentPointer_1 = incrementalDomCjs.currentPointer = currentPointer;
+incrementalDomCjs.open = open;
+var patch = incrementalDomCjs.patch = patchInner;
+incrementalDomCjs.patchInner = patchInner;
+incrementalDomCjs.patchOuter = patchOuter;
+incrementalDomCjs.skip = skip;
+var skipNode = incrementalDomCjs.skipNode = nextNode;
+incrementalDomCjs.getKey = getKey;
+incrementalDomCjs.clearCache = clearCache;
+incrementalDomCjs.importNode = importNode;
+incrementalDomCjs.isDataInitialized = isDataInitialized;
+incrementalDomCjs.notifications = notifications;
+incrementalDomCjs.symbols = symbols;
+var attr_1 = incrementalDomCjs.attr = attr;
+var elementClose_1 = incrementalDomCjs.elementClose = elementClose;
+incrementalDomCjs.elementOpen = elementOpen;
+var elementOpenEnd_1 = incrementalDomCjs.elementOpenEnd = elementOpenEnd;
+var elementOpenStart_1 = incrementalDomCjs.elementOpenStart = elementOpenStart;
+incrementalDomCjs.elementVoid = elementVoid;
+var text_1 = incrementalDomCjs.text = text$1;
+incrementalDomCjs.key = key;
+function comment(content) {
+  let node = currentPointer_1();
+  if (node instanceof Comment && node.data !== content) {
+    node.data = content;
+  } else {
+    node = document.createComment(content);
+    currentElement_1().appendChild(node);
+  }
+  skipNode();
+  return node;
+}
+let theI18n = noI18nI18n;
+function webComponentsUseI18n(i18n) {
+  theI18n = i18n;
+}
+function getI18n() {
+  return theI18n;
+}
+const SYMBOL_COMPONENT_META = Symbol("ComponentMetadata");
+const Metadata = Object.freeze({
+  has(target, key2) {
+    return Boolean(target[SYMBOL_COMPONENT_META] && Object.prototype.hasOwnProperty.call(target[SYMBOL_COMPONENT_META], key2));
+  },
+  add(target, metadata) {
+    if (target[SYMBOL_COMPONENT_META]) {
+      Object.assign(target[SYMBOL_COMPONENT_META], metadata);
+    } else {
+      target[SYMBOL_COMPONENT_META] = metadata;
+    }
+  },
+  get(target, key2, defaultValue) {
+    return target[SYMBOL_COMPONENT_META] ? target[SYMBOL_COMPONENT_META][key2] || defaultValue : defaultValue;
+  }
+});
+const SYMBOL_LISTENERS_ATTACHED = Symbol("ds-web-components:pragma:listeners-attached");
+const MARK_CONTENT_START = "idom-pragma:content-begin";
+const MARK_CONTENT_END = "idom-pragma:content-end";
+function handleChildren(children) {
+  for (const child of children) {
+    if (typeof child === "function") {
+      child();
+    } else if (typeof child === "string") {
+      text_1(child);
+    } else if (child instanceof Set) {
+      handleChildren(Array.from(child));
+    } else if (Array.isArray(child) && child.length > 0) {
+      let ptr = currentPointer_1();
+      comment(MARK_CONTENT_START);
+      if (ptr === null) {
+        const ce = currentElement_1();
+        for (let i = 0; i < child.length; i += 1) {
+          if (!ce.contains(child[i])) {
+            ce.appendChild(child[i]);
+          }
+          skipNode();
+        }
+      }
+      while (ptr && ptr.data !== MARK_CONTENT_END) {
+        skipNode();
+        ptr = currentPointer_1();
+      }
+      comment(MARK_CONTENT_END);
+    }
+  }
+}
+function h(tagName, attrs, ...children) {
+  if (attrs) {
+    for (const key2 of Object.keys(attrs)) {
+      if (key2.toUpperCase() === "DATA-FRAGMENT") {
+        return () => handleChildren(children);
+      }
+    }
+  }
+  return () => {
+    elementOpenStart_1(tagName);
+    const eventListenerKeys = [];
+    if (attrs) {
+      for (const key2 of Object.keys(attrs)) {
+        if (key2.toUpperCase() === "CLASSNAME") {
+          attr_1("class", attrs[key2]);
+        } else if (/^on[A-Z]/.test(key2)) {
+          eventListenerKeys.push(key2);
+        } else {
+          attr_1(key2, attrs[key2]);
+        }
+      }
+    }
+    elementOpenEnd_1(tagName);
+    const ce = currentElement_1();
+    if (!ce[SYMBOL_LISTENERS_ATTACHED]) {
+      for (const key2 of eventListenerKeys) {
+        ce.addEventListener(key2.substr(2).toLowerCase(), attrs[key2]);
+      }
+      ce[SYMBOL_LISTENERS_ATTACHED] = true;
+    }
+    handleChildren(children);
+    elementClose_1(tagName);
+  };
+}
+function ensureDefined(tag, Component2) {
+  if (!customElements.get(tag)) {
+    customElements.define(tag, Component2);
+  }
+}
+function register(...Components) {
+  for (const Component2 of Components) {
+    ensureDefined(Metadata.get(Component2, "tag"), Component2);
+  }
+}
+function namespaceOverrideRegistrar(overrideNamespace) {
+  return function register2(...Components) {
+    for (const Component2 of Components) {
+      const tag = `${overrideNamespace}${Metadata.get(Component2, "tag").substr(3)}`;
+      ensureDefined(tag, Component2);
+    }
+  };
+}
+const AttrBindings = Symbol("Component Attribute Bindings");
+const ClassBindings = Symbol("Component Class Bindings");
+const StyleBindings = Symbol("Component Style Bindings");
+const ext = {
+  __initialized: false,
+  __observer: null,
+  __queuedUpdate: null,
+  __managedClasses: new Set(),
+  __updateHostBindings() {
+    const self = this;
+    for (const attrName of Object.keys(self[AttrBindings] || {})) {
+      self.setAttribute(attrName, self[AttrBindings][attrName]);
+    }
+    for (const styleKey of Object.keys(self[StyleBindings] || {})) {
+      self.style[styleKey] = self[StyleBindings][styleKey];
+    }
+    for (const className of self.__managedClasses) {
+      self.classList.remove(className);
+    }
+    for (const className of (self[ClassBindings] || []).filter(Boolean)) {
+      self.__managedClasses.add(className);
+      self.classList.add(className);
+    }
+    for (const className of (self.getAttribute("classname") || "").split(/\w+/).filter(Boolean)) {
+      self.classList.add(className);
+    }
+  },
+  __updateChildQueries(adhereToRefreshOption) {
+    const self = this;
+    for (const childQuery of Metadata.get(self.constructor, "childQueries", [])) {
+      if (!adhereToRefreshOption || adhereToRefreshOption && childQuery.refresh) {
+        const queryMethod = childQuery.all ? self.querySelectorAll : self.querySelector;
+        self[childQuery.key] = queryMethod.call(self, childQuery.selector);
+      }
+    }
+  },
+  __gatherChildren() {
+    const self = this;
+    let childNodes = Array.from(self.childNodes);
+    let contentStartIndex = null;
+    let contentEndIndex = childNodes.length;
+    for (let i = 0; i < childNodes.length; i += 1) {
+      const node = childNodes[i];
+      if (node instanceof Comment) {
+        if (node.data === MARK_CONTENT_START) {
+          contentStartIndex = i + 1;
+        } else if (node.data === MARK_CONTENT_END) {
+          contentEndIndex = i - 1;
+        }
+      }
+    }
+    if (contentStartIndex === null) {
+      for (const node of childNodes) {
+        node.parentNode.removeChild(node);
+      }
+    } else {
+      childNodes = childNodes.slice(contentStartIndex, contentEndIndex);
+    }
+    if (Metadata.has(self.constructor, "contentProp")) {
+      self[Metadata.get(self.constructor, "contentProp")] = childNodes;
+    }
+  },
+  __startMutObs() {
+    const self = this;
+    if (!self.__observer) {
+      self.__observer = new MutationObserver(() => {
+        if (self.contentChangedCallback) {
+          self.contentChangedCallback();
+        }
+        self.__gatherChildren();
+        self.update();
+      });
+    }
+    self.__observer.observe(self, { childList: true });
+  },
+  __stopMutObs() {
+    const self = this;
+    if (self.__observer) {
+      self.__observer.disconnect();
+    }
+  },
+  __doRender() {
+    const self = this;
+    self.__stopMutObs();
+    patch(self, self.render(getI18n()));
+    self.__startMutObs();
+  },
+  update() {
+    const self = this;
+    if (self.__initialized && !self.__queuedUpdate) {
+      self.__queuedUpdate = window.requestAnimationFrame(() => {
+        self.__doRender();
+        setTimeout(() => {
+          self.__updateChildQueries(true);
+          self.__updateHostBindings();
+        }, 0);
+        self.__queuedUpdate = null;
+      });
+    }
+  },
+  attributeChangedCallback(key2, oldValue, newValue) {
+    const self = this;
+    const value = newValue === "" ? true : newValue;
+    if (value !== oldValue) {
+      if (self.__cbAttributeChanged) {
+        self.__cbAttributeChanged(key2, self[key2], value);
+      }
+      if (key2 !== "style") {
+        self[key2] = value;
+      }
+      if (self.__initialized) {
+        self.update();
+      }
+    }
+  },
+  connectedCallback() {
+    const self = this;
+    if (self.__cbConnected) {
+      self.__cbConnected();
+    }
+    const listeners = Metadata.get(self.constructor, "eventListeners", []);
+    setTimeout(() => {
+      if (!self.__initialized) {
+        self.__gatherChildren();
+        for (const [, key2] of listeners) {
+          self[key2] = self[key2].bind(self);
+        }
+        self.__initialized = true;
+      }
+      for (const [eventName, key2] of listeners) {
+        self.addEventListener(eventName, self[key2]);
+      }
+      self.__doRender();
+      setTimeout(() => {
+        self.__updateChildQueries();
+        self.__updateHostBindings();
+      }, 0);
+    }, 0);
+  },
+  disconnectedCallback() {
+    const self = this;
+    if (self.__cbDisconnected) {
+      self.__cbDisconnected();
+    }
+    for (const [eventName, key2] of Metadata.get(self.constructor, "eventListeners", [])) {
+      self.removeEventListener(eventName, self[key2]);
+    }
+    self.__stopMutObs();
+  }
+};
+function Component(config) {
+  return (target) => {
+    Metadata.add(target, config);
+    Object.assign(target.prototype, {
+      __cbAttributeChanged: target.prototype.attributeChangedCallback,
+      __cbConnected: target.prototype.connectedCallback,
+      __cbDisconnected: target.prototype.disconnectedCallback
+    }, ext);
+  };
+}
+function Content() {
+  return (target, key2) => {
+    Metadata.add(target.constructor, { contentProp: key2 });
+  };
+}
+function EventDispatcher(eventName) {
+  return (target, key2) => {
+    Object.defineProperty(target, key2, {
+      get() {
+        Object.defineProperty(this, key2, {
+          value: {
+            dispatch: (detail) => {
+              const event = new CustomEvent(eventName || key2, { detail });
+              this.dispatchEvent(event);
+              return event;
+            }
+          }
+        });
+        return this[key2];
+      },
+      configurable: true
+    });
+  };
+}
+function EventListener(eventName) {
+  return (target, key2) => {
+    const eventListeners = Metadata.get(target.constructor, "eventListeners", []);
+    eventListeners.push([eventName, key2]);
+    Metadata.add(target.constructor, { eventListeners });
+  };
+}
+function Prop(castToType) {
+  return (target, key2) => {
+    const c = target.constructor;
+    const keyLowercase = key2.toLowerCase();
+    c.observedAttributes = c.observedAttributes || [
+      "classname",
+      "className",
+      "style"
+    ];
+    c.observedAttributes.push(key2);
+    c.observedAttributes.push(keyLowercase);
+    if (keyLowercase !== key2) {
+      Object.defineProperty(target, key2, {
+        get() {
+          return this[keyLowercase];
+        },
+        set(newValue) {
+          this[keyLowercase] = newValue;
+        }
+      });
+    }
+    if (castToType) {
+      const privateKey = Symbol.for(key2);
+      Object.defineProperty(target, keyLowercase, {
+        get() {
+          return this[privateKey];
+        },
+        set(newValue) {
+          let castValue = newValue;
+          if (castToType === Boolean && typeof newValue === "string" && newValue.toLowerCase() === "false") {
+            castValue = false;
+          } else {
+            castValue = castToType(newValue);
+          }
+          this[privateKey] = castValue;
+        }
+      });
+    }
+  };
+}
+function querySelectorDecorator(selector, options, all) {
+  return (target, key2) => {
+    const childQueries = Metadata.get(target.constructor, "childQueries", []);
+    childQueries.push({
+      key: key2,
+      selector,
+      all,
+      refresh: options.refresh
+    });
+    Metadata.add(target.constructor, { childQueries });
+  };
+}
+function QuerySelector(selector, options = {}) {
+  return querySelectorDecorator(selector, options);
+}
+function QuerySelectorAll(selector, options = {}) {
+  return querySelectorDecorator(selector, options, true);
+}
+function Watch() {
+  return (target, key2) => {
+    const privateKey = Symbol(key2);
+    Object.defineProperties(target, {
+      [privateKey]: {
+        writable: true,
+        enumerable: false,
+        configurable: false,
+        value: target[key2]
+      },
+      [key2]: {
+        get() {
+          return this[privateKey];
+        },
+        set(newValue) {
+          if (this[privateKey] !== newValue) {
+            this[privateKey] = newValue;
+            this.update();
+          }
+        }
+      }
+    });
+  };
+}
+var MIMEType;
+(function(MIMEType2) {
+  MIMEType2["7Z"] = "application/x-7z-compressed";
+  MIMEType2["AAC"] = "audio/aac";
+  MIMEType2["ABW"] = "application/x-abiword";
+  MIMEType2["ARC"] = "application/octet-stream";
+  MIMEType2["AVI"] = "video/x-msvideo";
+  MIMEType2["AZW"] = "application/vnd.amazon.ebook";
+  MIMEType2["BIN"] = "application/octet-stream";
+  MIMEType2["BMP"] = "image/bmp";
+  MIMEType2["BZ"] = "application/x-bzip";
+  MIMEType2["BZ2"] = "application/x-bzip2";
+  MIMEType2["CSH"] = "application/x-csh";
+  MIMEType2["CSS"] = "text/css";
+  MIMEType2["CSV"] = "text/csv,application/vnd.ms-excel";
+  MIMEType2["DOC"] = "application/msword";
+  MIMEType2["DOCX"] = "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
+  MIMEType2["EOT"] = "application/vnd.ms-fontobject";
+  MIMEType2["EPUB"] = "application/epub+zip";
+  MIMEType2["ES"] = "application/ecmascript";
+  MIMEType2["FLV"] = "video/x-flv";
+  MIMEType2["GIF"] = "image/gif";
+  MIMEType2["GZ"] = "application/x-gzip";
+  MIMEType2["HTM"] = "text/html";
+  MIMEType2["HTML"] = "text/html";
+  MIMEType2["ICO"] = "image/x-icon";
+  MIMEType2["ICS"] = "text/calendar";
+  MIMEType2["JAR"] = "application/java-archive";
+  MIMEType2["JPEG"] = "image/jpeg";
+  MIMEType2["JPG"] = "image/jpeg";
+  MIMEType2["JS"] = "application/javascript";
+  MIMEType2["JSON"] = "application/json";
+  MIMEType2["M3U"] = "audio/x-mpequrl";
+  MIMEType2["MID"] = "audio/midi";
+  MIMEType2["MIDI"] = "audio/midi";
+  MIMEType2["MOV"] = "video/quicktime";
+  MIMEType2["MP3"] = "audio/mpeg3";
+  MIMEType2["MP4"] = "video/mp4";
+  MIMEType2["MPEG"] = "video/mpeg";
+  MIMEType2["MPKG"] = "application/vnd.apple.installer+xml";
+  MIMEType2["ODP"] = "application/vnd.oasis.opendocument.presentation";
+  MIMEType2["ODS"] = "application/vnd.oasis.opendocument.spreadsheet";
+  MIMEType2["ODT"] = "application/vnd.oasis.opendocument.text";
+  MIMEType2["OGA"] = "audio/ogg";
+  MIMEType2["OGV"] = "video/ogg";
+  MIMEType2["OGX"] = "application/ogg";
+  MIMEType2["OTF"] = "font/otf";
+  MIMEType2["PNG"] = "image/png";
+  MIMEType2["PDF"] = "application/pdf";
+  MIMEType2["PPT"] = "application/vnd.ms-powerpoint";
+  MIMEType2["PPTX"] = "application/vnd.openxmlformats-officedocument.presentationml.presentation";
+  MIMEType2["RAR"] = "application/x-rar-compressed";
+  MIMEType2["RTF"] = "application/rtf";
+  MIMEType2["SH"] = "application/x-sh";
+  MIMEType2["SVG"] = "image/svg+xml";
+  MIMEType2["SWF"] = "application/x-shockwave-flash";
+  MIMEType2["TAR"] = "application/x-tar";
+  MIMEType2["TIF"] = "image/tiff";
+  MIMEType2["TIFF"] = "image/tiff";
+  MIMEType2["TS"] = "application/typescript";
+  MIMEType2["TTF"] = "font/ttf";
+  MIMEType2["TXT"] = "text/plain";
+  MIMEType2["VSD"] = "application/vnd.visio";
+  MIMEType2["WAV"] = "audio/wav";
+  MIMEType2["WEBA"] = "audio/webm";
+  MIMEType2["WEBM"] = "video/webm";
+  MIMEType2["WEBP"] = "image/webp";
+  MIMEType2["WOFF"] = "font/woff";
+  MIMEType2["WOFF2"] = "font/woff2";
+  MIMEType2["XHTML"] = "application/xhtml+xml";
+  MIMEType2["XLS"] = "application/vnd.ms-excel";
+  MIMEType2["XLSX"] = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
+  MIMEType2["XML"] = "application/xml";
+  MIMEType2["XUL"] = "application/vnd.mozilla.xul+xml";
+  MIMEType2["ZIP"] = "application/zip";
+})(MIMEType || (MIMEType = {}));
+var __defProp$5 = Object.defineProperty;
+var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
+var __decorateClass$5 = (decorators, target, key2, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(target, key2) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key2, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp$5(target, key2, result);
+  return result;
+};
+const CPT_NAME$3 = "sps-file-upload";
+let SpsFileUploadComponent = class extends HTMLElement {
+  constructor() {
+    super();
+    this.shown = true;
+    this.files = [];
+    this.acceptMIMETypes = new Set();
+    this.active = false;
+    this.error = false;
+    this.namesOfUnsupportedFiles = [];
+    this.handleBrowseLinkClick = this.handleBrowseLinkClick.bind(this);
+    this.handleDownloadButtonClick = this.handleDownloadButtonClick.bind(this);
+    this.handleFileInputChange = this.handleFileInputChange.bind(this);
+    this.dismiss = this.dismiss.bind(this);
+  }
+  get [ClassBindings]() {
+    return [
+      CPT_NAME$3,
+      this.active && `${CPT_NAME$3}--active`,
+      this.error && `${CPT_NAME$3}--error`,
+      !this.shown && `${CPT_NAME$3}--hidden`,
+      this.mini && `${CPT_NAME$3}--mini`,
+      this.constrainContentWidth && `${CPT_NAME$3}--constrained-content-width`
+    ];
+  }
+  connectedCallback() {
+    this.description = this.description || (this.multiple ? "Files" : "File");
+    if (this.acceptExtensions) {
+      this.processAcceptExtensions(this.acceptExtensions);
+    }
+    if (this.maxSize) {
+      this.parseAndValidateMaxSize(this.maxSize);
+    }
+  }
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    if (attrName === "acceptExtensions") {
+      this.processAcceptExtensions(newValue);
+    }
+    if (attrName === "maxSize") {
+      this.parseAndValidateMaxSize(newValue);
+    }
+  }
+  dismiss() {
+    if (this.dismissable) {
+      this.shown = false;
+      this.update();
+      this.dismissal.dispatch();
+    }
+  }
+  show() {
+    if (this.dismissable) {
+      this.shown = true;
+      this.update();
+    }
+  }
+  render({ t }) {
+    const icon = this.error ? SpsIcon.EXCLAMATION_CIRCLE : SpsIcon.UPLOAD_CLOUD;
+    const instructions = (this.multiple ? t("design-system:fileUpload.instructions_plural") : t("design-system:fileUpload.instructions")).split("|");
+    return /* @__PURE__ */ h("div", {
+      "data-fragment": true
+    }, /* @__PURE__ */ h("div", {
+      className: `${CPT_NAME$3}__content`
+    }, this.processing ? /* @__PURE__ */ h("div", {
+      "data-fragment": true
+    }, /* @__PURE__ */ h("i", {
+      className: "sps-spinner sps-spinner--medium",
+      "aria-hidden": "true"
+    }), /* @__PURE__ */ h("div", {
+      className: `${CPT_NAME$3}__instructions`
+    }, t("design-system:fileUpload.processing"))) : /* @__PURE__ */ h("div", {
+      "data-fragment": true
+    }, /* @__PURE__ */ h("i", {
+      className: `sps-icon sps-icon-${icon} ${CPT_NAME$3}__icon-primary`,
+      "aria-hidden": "true"
+    }), /* @__PURE__ */ h("div", {
+      className: `${CPT_NAME$3}__title`
+    }, this.error ? /* @__PURE__ */ h("div", {
+      "data-fragment": true
+    }, t(this.namesOfUnsupportedFiles.length > 1 ? "design-system:fileUpload.cancelled_plural" : "design-system:fileUpload.cancelled")) : /* @__PURE__ */ h("div", {
+      "data-fragment": true
+    }, t("design-system:fileUpload.title", { description: this.description }))), this.error ? /* @__PURE__ */ h("div", {
+      className: `${CPT_NAME$3}__errored-files`
+    }, new Set(this.namesOfUnsupportedFiles.map((name, i) => {
+      const breakpoint = Math.floor(name.length / 2);
+      return /* @__PURE__ */ h("div", {
+        className: `${CPT_NAME$3}__errored-filename`,
+        key: name
+      }, /* @__PURE__ */ h("span", {
+        className: `${CPT_NAME$3}__errored-filename-segment`
+      }, name.substr(0, breakpoint)), /* @__PURE__ */ h("div", {
+        className: `${CPT_NAME$3}__errored-filename-segment`
+      }, /* @__PURE__ */ h("span", null, name.substr(breakpoint))), i < this.namesOfUnsupportedFiles.length - 1 ? "," : "");
+    }))) : /* @__PURE__ */ h("span", null), /* @__PURE__ */ h("div", {
+      className: `${CPT_NAME$3}__instructions`
+    }, /* @__PURE__ */ h("div", {
+      "data-fragment": true
+    }, /* @__PURE__ */ h("span", null, instructions[0]), /* @__PURE__ */ h("a", {
+      href: "",
+      onClick: this.handleBrowseLinkClick
+    }, instructions[1]), /* @__PURE__ */ h("span", null, instructions[2]))), /* @__PURE__ */ h("div", {
+      className: `${CPT_NAME$3}__requirements`
+    }, this.acceptExtensions ? /* @__PURE__ */ h("span", null, "(", " ", t("design-system:fileUpload.acceptedTypes", { fileTypes: this.acceptExtensionsDescription }), " ", ")") : "", this.maxSize ? /* @__PURE__ */ h("span", null, "(", " ", t("design-system:fileUpload.maximumSize", { size: this.maxSize }), " ", ")") : "", this.customRequirement ? /* @__PURE__ */ h("span", null, " ", this.customRequirement, " ") : ""), this.downloadLabel && /* @__PURE__ */ h("div", {
+      className: `sps-button sps-button--link ${CPT_NAME$3}__download-button`,
+      onClick: this.handleDownloadButtonClick
+    }, /* @__PURE__ */ h("button", {
+      type: "button"
+    }, /* @__PURE__ */ h("i", {
+      className: "sps-icon sps-icon-download-cloud",
+      "aria-hidden": "true"
+    }), " ", this.downloadLabel)))), this.dismissable && !this.processing && /* @__PURE__ */ h("div", {
+      className: `sps-button sps-button--icon ${CPT_NAME$3}__close-button`,
+      onClick: this.dismiss
+    }, /* @__PURE__ */ h("button", {
+      type: "button",
+      title: t("design-system:fileUpload.close")
+    }, /* @__PURE__ */ h("i", {
+      className: "sps-icon sps-icon-x",
+      "aria-hidden": "true"
+    }))), /* @__PURE__ */ h("form", null, /* @__PURE__ */ h("input", {
+      type: "file",
+      accept: this.accept || "*/*",
+      multiple: this.multiple || null,
+      onChange: this.handleFileInputChange
+    })));
+  }
+  parseAndValidateMaxSize(maxSize) {
+    try {
+      this.maxSizeBytes = parseFileSize(maxSize);
+    } catch (error) {
+      throw new Error(`Could not parse "${maxSize}" as a file size.`);
+    }
+  }
+  processAcceptExtensions(acceptExtensions) {
+    const splitExtensions = Array.isArray(acceptExtensions) ? acceptExtensions : acceptExtensions.trim().split(/\s?,\s?/);
+    const trimmedExtensions = splitExtensions.map((ext2) => ext2.replace(/^\./, ""));
+    const extList = trimmedExtensions.map((ext2) => `.${ext2}`.toLowerCase());
+    this.acceptExtensionsDescription = extList.map((ext2, i) => i > 0 && i === extList.length - 1 ? `or ${ext2}` : ext2).join(extList.length > 2 ? ", " : " ");
+    this.acceptMIMETypes.clear();
+    for (const ext2 of trimmedExtensions) {
+      for (const type of MIMEType[ext2.toUpperCase()].split(",")) {
+        this.acceptMIMETypes.add(type);
+      }
+    }
+    this.accept = extList.concat(Array.from(this.acceptMIMETypes)).join(",");
+  }
+  selectFiles(files) {
+    this.namesOfUnsupportedFiles = [];
+    const fileArray = Array.from(files);
+    for (const file of fileArray) {
+      if (this.acceptExtensions && !this.acceptMIMETypes.has(file.type)) {
+        this.namesOfUnsupportedFiles.push(file.name);
+      }
+      if (this.maxSize && file.size > this.maxSizeBytes && this.namesOfUnsupportedFiles.indexOf(file.name) === -1) {
+        this.namesOfUnsupportedFiles.push(file.name);
+      }
+    }
+    if (this.namesOfUnsupportedFiles.length) {
+      this.error = true;
+      this.fileInput.value = null;
+      this.update();
+    } else {
+      this.files = fileArray;
+      this.selection.dispatch(fileArray);
+    }
+  }
+  handleDragOver(event) {
+    event.preventDefault();
+    event.stopPropagation();
+  }
+  handleDragEnter(event) {
+    event.preventDefault();
+    this.active = true;
+    this.error = false;
+    this.update();
+  }
+  handleDragLeave(event) {
+    event.preventDefault();
+    this.active = false;
+    this.update();
+  }
+  handleDrop(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.active = false;
+    if (event.dataTransfer.items) {
+      this.selectFiles(Array.from(event.dataTransfer.items).map((item) => item.getAsFile()));
+    } else {
+      this.selectFiles(event.dataTransfer.files);
+    }
+    this.update();
+  }
+  handleBrowseLinkClick(event) {
+    event.preventDefault();
+    this.error = false;
+    this.update();
+    this.fileInput.click();
+  }
+  handleDownloadButtonClick() {
+    this.download.dispatch();
+  }
+  handleFileInputChange(event) {
+    event.stopPropagation();
+    this.selectFiles(event.target.files);
+  }
+};
+SpsFileUploadComponent.displayName = CPT_NAME$3;
+SpsFileUploadComponent.props = {
+  description: "string",
+  multiple: "boolean",
+  dismissable: "boolean",
+  processing: "boolean",
+  mini: "boolean",
+  downloadLabel: "string",
+  acceptExtensions: "Array<string> | string",
+  maxSize: "string",
+  customRequirement: "string",
+  selection: { event: true, type: "CustomEvent<Array<File>>" },
+  dismissal: { event: true, type: "CustomEvent<void>" },
+  download: { event: true, type: "CustomEvent<void>" }
+};
+__decorateClass$5([
+  Prop()
+], SpsFileUploadComponent.prototype, "description", 2);
+__decorateClass$5([
+  Prop(Boolean)
+], SpsFileUploadComponent.prototype, "multiple", 2);
+__decorateClass$5([
+  Prop(Boolean)
+], SpsFileUploadComponent.prototype, "shown", 2);
+__decorateClass$5([
+  Prop(Boolean)
+], SpsFileUploadComponent.prototype, "dismissable", 2);
+__decorateClass$5([
+  Prop(Boolean)
+], SpsFileUploadComponent.prototype, "processing", 2);
+__decorateClass$5([
+  Prop(Boolean)
+], SpsFileUploadComponent.prototype, "mini", 2);
+__decorateClass$5([
+  Prop(Boolean)
+], SpsFileUploadComponent.prototype, "constrainContentWidth", 2);
+__decorateClass$5([
+  Prop()
+], SpsFileUploadComponent.prototype, "downloadLabel", 2);
+__decorateClass$5([
+  Prop()
+], SpsFileUploadComponent.prototype, "acceptExtensions", 2);
+__decorateClass$5([
+  Prop()
+], SpsFileUploadComponent.prototype, "maxSize", 2);
+__decorateClass$5([
+  Prop()
+], SpsFileUploadComponent.prototype, "customRequirement", 2);
+__decorateClass$5([
+  EventDispatcher()
+], SpsFileUploadComponent.prototype, "selection", 2);
+__decorateClass$5([
+  EventDispatcher()
+], SpsFileUploadComponent.prototype, "dismissal", 2);
+__decorateClass$5([
+  EventDispatcher()
+], SpsFileUploadComponent.prototype, "download", 2);
+__decorateClass$5([
+  QuerySelector("input[type='file']")
+], SpsFileUploadComponent.prototype, "fileInput", 2);
+__decorateClass$5([
+  EventListener("dragover")
+], SpsFileUploadComponent.prototype, "handleDragOver", 1);
+__decorateClass$5([
+  EventListener("dragenter")
+], SpsFileUploadComponent.prototype, "handleDragEnter", 1);
+__decorateClass$5([
+  EventListener("dragleave")
+], SpsFileUploadComponent.prototype, "handleDragLeave", 1);
+__decorateClass$5([
+  EventListener("drop")
+], SpsFileUploadComponent.prototype, "handleDrop", 1);
+SpsFileUploadComponent = __decorateClass$5([
+  Component({ tag: CPT_NAME$3 })
+], SpsFileUploadComponent);
+const SpsFileUploadExamples = {
+  basic: {
+    label: "Basic File Upload",
+    description: code`
+            <p>Simply allow the user to drag-and-drop or select either a single file or multiple files at once.</p>
+        `,
+    examples: {
+      single: {
+        description: "<p>Single file upload</p>",
+        react: code`
+                    function Component() {
+                        const ref = React.useRef()
+
+                        function handleChange(event) {
+                            console.log(event.detail)
+                        }
+
+                        React.useEffect(() => {
+                            ref.current.addEventListener("selection", handleChange)
+                            return () => {
+                                ref.current.removeEventListener("selection", handleChange)
+                            }
+                        })
+
+                        return (
+                            <div className="sps-row">
+                                <div className="col-12">
+                                    <sps-file-upload ref={ref}/>
+                                </div>
+                            </div>
+                        )
+                    }
+                `
+      },
+      multiple: {
+        description: "<p>Multiple file upload</p>",
+        react: code`
+                    function Component() {
+                        const ref = React.useRef()
+
+                        function handleChange(event) {
+                            console.log(event.detail)
+                        }
+
+                        React.useEffect(() => {
+                            ref.current.addEventListener("selection", handleChange)
+                            return () => {
+                                ref.current.removeEventListener("selection", handleChange)
+                            }
+                        })
+
+                        return (
+                            <div className="sps-row">
+                                <div className="col-12">
+                                    <sps-file-upload ref={ref} multiple/>
+                                </div>
+                            </div>
+                        )
+                    }
+                `
+      }
+    }
+  },
+  restrictions: {
+    label: "Restrictions",
+    description: code`
+            <p>You can place restrictions on what files will be accepted with an extension whitelist and/or a maximum size.</p>
+        `,
+    examples: {
+      size: {
+        description: "<p>Maximum size</p>",
+        react: code`
+                    function Component() {
+                        const ref = React.useRef()
+
+                        function handleChange(event) {
+                            console.log(event.detail)
+                        }
+
+                        React.useEffect(() => {
+                            ref.current.addEventListener("selection", handleChange)
+                            return () => {
+                                ref.current.removeEventListener("selection", handleChange)
+                            }
+                        })
+
+                        return (
+                            <div className="sps-row">
+                                <div className="col-12">
+                                    <sps-file-upload ref={ref} maxSize="100KB"/>
+                                </div>
+                            </div>
+                        )
+                    }
+                `
+      },
+      type: {
+        description: "<p>File type whitelist</p>",
+        react: code`
+                    function Component() {
+                        const ref = React.useRef()
+
+                        function handleChange(event) {
+                            console.log(event.detail)
+                        }
+
+                        React.useEffect(() => {
+                            ref.current.addEventListener("selection", handleChange)
+                            return () => {
+                                ref.current.removeEventListener("selection", handleChange)
+                            }
+                        })
+
+                        return (
+                            <div className="sps-row">
+                                <div className="col-12">
+                                    <sps-file-upload
+                                        ref={ref}
+                                        description="Spreadsheets"
+                                        multiple
+                                        acceptExtensions="XLS, xlsx, .csv"
+                                    />
+                                </div>
+                            </div>
+                        )
+                    }
+                `
+      },
+      both: {
+        description: "<p>Both restrictions</p>",
+        react: code`
+                    function Component() {
+                        const ref = React.useRef()
+
+                        function handleChange(event) {
+                            console.log(event.detail)
+                        }
+
+                        React.useEffect(() => {
+                            ref.current.addEventListener("selection", handleChange)
+                            return () => {
+                                ref.current.removeEventListener("selection", handleChange)
+                            }
+                        })
+
+                        return (
+                            <div className="sps-row">
+                                <div className="col-12">
+                                    <sps-file-upload
+                                        ref={ref}
+                                        description="Spreadsheets"
+                                        multiple
+                                        acceptExtensions="XLS, xlsx, .csv"
+                                        maxSize="25MB"
+                                    />
+                                </div>
+                            </div>
+                        )
+                    }
+                `
+      }
+    }
+  },
+  dismissable: {
+    label: "Dismissable",
+    description: code`
+            <p>With this option, the file upload component can be dismissed by the user. If the user does dismiss it, you can
+            show it again programmatically if you need to.</p>
+        `,
+    examples: {
+      dismissable: {
+        react: code`
+                    function Component() {
+                        const [showFileUpload, setShowFileUpload] = React.useState(true)
+                        const ref = React.useRef()
+
+                        function handleDismissal() {
+                            setShowFileUpload(false)
+                        }
+
+                        React.useEffect(() => {
+                            ref.current.addEventListener("dismissal", handleDismissal)
+                            return () => {
+                                ref.current.removeEventListener("dismissal", handleDismissal)
+                            }
+                        })
+
+                        return (
+                            <div className="sps-row">
+                                <div className="col-12">
+                                    <sps-file-upload
+                                        ref={ref}
+                                        dismissable
+                                        shown={showFileUpload}
+                                    />
+                                    {!showFileUpload && (
+                                    <SpsButton onClick={() => setShowFileUpload(true)}>
+                                        Reset
+                                    </SpsButton>
+                                    )}
+                                </div>
+                            </div>
+                        )
+                    }
+                `
+      }
+    }
+  },
+  downloadButton: {
+    label: "Download Button",
+    description: code`
+            <p>You can optionally provide a button to download a file. Typically this will be a template for
+            whatever the user is expected to upload. They can then fill out the template, save it, and upload it.</p>
+        `,
+    examples: {
+      downloadButton: {
+        react: code`
+                    function Component() {
+                        const ref = React.useRef()
+
+                        function handleDownload() {
+                            console.log("Download triggered.")
+                        }
+
+                        React.useEffect(() => {
+                            ref.current.addEventListener("download", handleDownload)
+                            return () => {
+                                ref.current.removeEventListener("download", handleDownload)
+                            }
+                        })
+
+                        return (
+                            <div className="sps-row">
+                                <div className="col-12">
+                                    <sps-file-upload
+                                        ref={ref}
+                                        description="Spreadsheet"
+                                        acceptExtensions="xlsx"
+                                        downloadLabel="Download Excel Template"
+                                    />
+                                </div>
+                            </div>
+                        )
+                    }
+                `
+      }
+    }
+  },
+  mini: {
+    label: "Mini File Upload",
+    description: code`
+            <p>When the file upload component is to be placed in a small container,
+            it should be marked as a mini file upload so that everything fits.</p>
+        `,
+    examples: {
+      single: {
+        react: code`
+                    function Component() {
+                        const ref = React.useRef()
+
+                        function handleChange(event) {
+                            console.log(event.detail)
+                        }
+
+                        React.useEffect(() => {
+                            ref.current.addEventListener("selection", handleChange)
+                            return () => {
+                                ref.current.removeEventListener("selection", handleChange)
+                            }
+                        })
+
+                        return (
+                            <div className="sps-row">
+                                <div className="col-4">
+                                    <sps-file-upload ref={ref} mini/>
+                                </div>
+                            </div>
+                        )
+                    }
+                `
+      }
+    }
+  },
+  constrainContentWidth: {
+    label: "Constrain Content Width",
+    description: code`
+            <p>If this prop is provided, the content will be restricted to 50% of
+            the overall width of the component. Consult your product designer if
+            you're not sure whether to use this variant.</p>
+        `,
+    examples: {
+      constrainContentWidth: {
+        react: code`
+                    function Component() {
+                        const ref = React.useRef()
+
+                        function handleChange(event: CustomEvent<Array<File>>) {
+                            console.log(event.detail)
+                        }
+
+                        React.useEffect(() => {
+                            ref.current.addEventListener("selection", handleChange)
+                            return () => {
+                                ref.current.removeEventListener("selection", handleChange)
+                            }
+                        })
+
+                        return (
+                            <div className="sps-row">
+                                <div className="col-4">
+                                    <sps-file-upload ref={ref} constrainContentWidth/>
+                                </div>
+                            </div>
+                        )
+                    }
+                `
+      }
+    }
+  }
+};
+var __defProp$4 = Object.defineProperty;
+var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
+var __decorateClass$4 = (decorators, target, key2, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key2) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key2, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp$4(target, key2, result);
+  return result;
+};
+let SpsNavTabComponent = class extends HTMLElement {
+  constructor() {
+    super(...arguments);
+    this.active = false;
+    this.label = "";
+    this.tag = "";
+  }
+  get [ClassBindings]() {
+    return [
+      "sps-tabbed-nav__nav-item",
+      this.active && "sps-tabbed-nav__nav-item--active"
+    ];
+  }
+  render() {
+    return /* @__PURE__ */ h("a", {
+      href: this.href,
+      target: this.target,
+      className: "sps-tabbed-nav__nav-item-link",
+      tabIndex: 0
+    }, this.icon && /* @__PURE__ */ h("i", {
+      className: `sps-icon sps-icon-${this.icon}`
+    }), this.label && /* @__PURE__ */ h("span", null, this.label), this.tag && /* @__PURE__ */ h("span", {
+      className: "sps-tag sps-tag--default"
+    }, this.tag));
+  }
+};
+SpsNavTabComponent.displayName = "sps-nav-tab";
+SpsNavTabComponent.props = {
+  active: "boolean",
+  label: "string",
+  icon: "SpsIcon",
+  tag: "string",
+  href: "string",
+  target: "string"
+};
+__decorateClass$4([
+  Prop()
+], SpsNavTabComponent.prototype, "active", 2);
+__decorateClass$4([
+  Prop()
+], SpsNavTabComponent.prototype, "label", 2);
+__decorateClass$4([
+  Prop()
+], SpsNavTabComponent.prototype, "icon", 2);
+__decorateClass$4([
+  Prop()
+], SpsNavTabComponent.prototype, "tag", 2);
+__decorateClass$4([
+  Prop()
+], SpsNavTabComponent.prototype, "href", 2);
+__decorateClass$4([
+  Prop()
+], SpsNavTabComponent.prototype, "target", 2);
+SpsNavTabComponent = __decorateClass$4([
+  Component({ tag: "sps-nav-tab" })
+], SpsNavTabComponent);
+var __defProp$3 = Object.defineProperty;
+var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
+var __decorateClass$3 = (decorators, target, key2, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(target, key2) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key2, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp$3(target, key2, result);
+  return result;
+};
+let SpsNavTabSetComponent = class extends HTMLElement {
+  constructor() {
+    super(...arguments);
+    this.content = [];
+  }
+  render() {
+    return /* @__PURE__ */ h("nav", {
+      className: "sps-tabbed-nav"
+    }, this.content);
+  }
+};
+SpsNavTabSetComponent.displayName = "sps-nav-tab-set";
+SpsNavTabSetComponent.props = {};
+__decorateClass$3([
+  Content()
+], SpsNavTabSetComponent.prototype, "content", 2);
+SpsNavTabSetComponent = __decorateClass$3([
+  Component({ tag: "sps-nav-tab-set" })
+], SpsNavTabSetComponent);
+const SpsNavTabsExamples = {
+  basic: {
+    label: "Basic Navigation Tabs",
+    description: code`
+          <p>Navigation tabs native web component</p>
+        `,
+    examples: {
+      basic: {
+        react: code`
+                    function DemoComponent() {
+                        const tabs = [
+                            { label: "Tab A", icon: "chart-line" },
+                            { label: "Tab B", icon: "chart-bar", tag: "12" },
+                            { label: "Tab C", icon: "chart-pie" }
+                        ]
+
+                        const [activeTab, setActiveTab] = React.useState(0)
+
+                        return (
+                        <sps-nav-tab-set>
+                            {tabs.map((tab, index) => (
+                                <sps-nav-tab
+                                    key={index}
+                                    icon={tab.icon}
+                                    label={tab.label}
+                                    tag={tab.tag}
+                                    active={index === activeTab || null}
+                                    onClick={() => setActiveTab(index)}
+                                />
+                            ))}
+                        </sps-nav-tab-set>
+                        )
+                    }
+                `
+      }
+    }
+  }
+};
+var __defProp$2 = Object.defineProperty;
+var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
+var __decorateClass$2 = (decorators, target, key2, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key2) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key2, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp$2(target, key2, result);
+  return result;
+};
+var SpsPhotoDisplayMode;
+(function(SpsPhotoDisplayMode2) {
+  SpsPhotoDisplayMode2["FIT"] = "fit";
+  SpsPhotoDisplayMode2["FILL"] = "fill";
+})(SpsPhotoDisplayMode || (SpsPhotoDisplayMode = {}));
+const CPT_NAME$2 = "sps-photo";
+let SpsPhotoComponent = class extends HTMLElement {
+  constructor() {
+    super(...arguments);
+    this.mode = SpsPhotoDisplayMode.FILL;
+  }
+  get image() {
+    return this.imageInternal;
+  }
+  set image(newValue) {
+    this.imageInternal = newValue;
+    if (newValue) {
+      if (this.waitForImgHeightInterval) {
+        window.clearInterval(this.waitForImgHeightInterval);
+      }
+      this.waitForImgHeightInterval = window.setInterval(() => {
+        const imgRect = newValue.getBoundingClientRect();
+        if (imgRect.height) {
+          window.clearInterval(this.waitForImgHeightInterval);
+          delete this.waitForImgHeightInterval;
+          let imageIsLandscape = true;
+          imageIsLandscape = imgRect.width / imgRect.height > 1;
+          this.fitWidth = imageIsLandscape === (this.mode === SpsPhotoDisplayMode.FIT);
+        }
+      }, 1e3 / 60);
+    }
+  }
+  get [ClassBindings]() {
+    return [
+      CPT_NAME$2,
+      this.fitWidth ? `${CPT_NAME$2}--fit-width` : `${CPT_NAME$2}--fit-height`,
+      this.placeholderIcon && `${CPT_NAME$2}--placeholder`
+    ];
+  }
+  get [StyleBindings]() {
+    return {
+      fontSize: `${this.width * 0.05}rem`,
+      width: `${this.width}rem`,
+      height: `${0.75 * this.width}rem`
+    };
+  }
+  connectedCallback() {
+    this.waitForWidthInterval = window.setInterval(() => {
+      const boundingClientRect = this.getBoundingClientRect();
+      if (boundingClientRect.width) {
+        this.setWidth(boundingClientRect.width);
+        window.clearInterval(this.waitForWidthInterval);
+        delete this.waitForWidthInterval;
+      }
+    }, 1e3 / 60);
+  }
+  disconnectedCallback() {
+    if (this.waitForWidthInterval) {
+      window.clearInterval(this.waitForWidthInterval);
+    }
+    if (this.waitForImgHeightInterval) {
+      window.clearInterval(this.waitForImgHeightInterval);
+    }
+  }
+  render() {
+    if (this.src) {
+      return this.width ? /* @__PURE__ */ h("img", {
+        src: this.src,
+        alt: this.altText
+      }) : /* @__PURE__ */ h("span", null);
+    }
+    return /* @__PURE__ */ h("i", {
+      className: `sps-icon sps-icon-${this.placeholderIcon}`
+    });
+  }
+  setWidth(hostWidth) {
+    if (hostWidth && !this.width) {
+      const baseFontSize = document.body.parentElement.style.fontSize || "16px";
+      const remPx = Number(baseFontSize.substr(0, baseFontSize.length - 2));
+      this.width = hostWidth / remPx;
+    }
+  }
+};
+SpsPhotoComponent.displayName = CPT_NAME$2;
+SpsPhotoComponent.props = {
+  src: "string",
+  altText: "string",
+  mode: "SpsPhotoDisplayMode",
+  placeholderIcon: "SpsIcon"
+};
+__decorateClass$2([
+  Prop()
+], SpsPhotoComponent.prototype, "src", 2);
+__decorateClass$2([
+  Prop()
+], SpsPhotoComponent.prototype, "altText", 2);
+__decorateClass$2([
+  Prop()
+], SpsPhotoComponent.prototype, "mode", 2);
+__decorateClass$2([
+  Prop()
+], SpsPhotoComponent.prototype, "placeholderIcon", 2);
+__decorateClass$2([
+  Watch()
+], SpsPhotoComponent.prototype, "width", 2);
+__decorateClass$2([
+  Watch()
+], SpsPhotoComponent.prototype, "fitWidth", 2);
+__decorateClass$2([
+  QuerySelector("img", { refresh: true })
+], SpsPhotoComponent.prototype, "image", 1);
+SpsPhotoComponent = __decorateClass$2([
+  Component({ tag: CPT_NAME$2 })
+], SpsPhotoComponent);
+const SpsPhotoExamples = {
+  sizing: {
+    label: "Sizing",
+    description: code`
+        <p>
+            Photos are block elements, so a photo fills its container's width unless
+            an explicit width is set. It is always a 4:3 aspect ratio. In this example,
+            photos have been placed in cards which have different widths in the 12
+            column grid.
+        </p>
+    `,
+    examples: {
+      basic: {
+        jsx: code`
+            <div className="sfg-row">
+                <div className="sfg-col-2">
+                    <sps-card>
+                        <sps-photo src="assets/images/photo-landscape.jpg"></sps-photo>
+                    </sps-card>
+                </div>
+                <div className="sfg-col-4">
+                    <sps-card>
+                        <sps-photo src="assets/images/photo-landscape.jpg"></sps-photo>
+                    </sps-card>
+                </div>
+                <div className="sfg-col-6">
+                    <sps-card>
+                        <sps-photo src="assets/images/photo-landscape.jpg"></sps-photo>
+                    </sps-card>
+                </div>
+            </div>
+        `
+      }
+    }
+  },
+  displayMode: {
+    label: "Fill vs. Fit",
+    description: code`
+        <p>
+            There are two display modes available:
+            <ul>
+                <li><b>"fill"</b> fills the entire 4:3 container, cropping off any excess portions of the image.
+                <li><b>"fit"</b> fits the entire image into the container, leaving any excess portions of the container blank.
+            </ul>
+        </p>
+    `,
+    examples: {
+      landscape: {
+        description: "<p>Landscape oriented photo (container outline added for illustrative purposes)</p>",
+        jsx: code`
+            <div className="sfg-row">
+                <div className="sfg-col-4">
+                    <sps-photo src="assets/images/photo-landscape.jpg" mode="fill"></sps-photo>
+                </div>
+                <div className="sfg-col-4">
+                    <sps-photo src="assets/images/photo-landscape.jpg" mode="fit"></sps-photo>
+                </div>
+            </div>
+        `
+      },
+      portrait: {
+        description: "<p>Portrait oriented photo (container outline added for illustrative purposes)</p>",
+        jsx: code`
+            <div className="sfg-row">
+                <div className="sfg-col-4">
+                    <sps-photo src="assets/images/photo-portrait.jpg" mode="fill"></sps-photo>
+                </div>
+                <div className="sfg-col-4">
+                    <sps-photo id="foo" src="assets/images/photo-portrait.jpg" mode="fit"></sps-photo>
+                </div>
+            </div>
+        `
+      }
+    }
+  },
+  placeholder: {
+    label: "Placeholders",
+    description: code`
+        <p>
+            When an image is not provided for a particular use case (such as a user avatar,
+            a company photo, item image, etc.), a placeholder should be shown in its place.
+
+            The placeholder's icon, selected from our SPS icon set, should represent the
+            type of image it is substituting for.
+        </p>
+    `,
+    examples: {
+      general: {
+        description: "<p>General Photo</p>",
+        jsx: code`
+                <div className="sfg-row">
+                    <div className="sfg-col-3">
+                        <sps-photo placeholderIcon="photo"></sps-photo>
+                    </div>
+                </div>
+            `
+      },
+      photoAlt: {
+        description: "<p>Photo Alt</p>",
+        jsx: code`
+                <div className="sfg-row">
+                    <div className="sfg-col-3">
+                        <sps-photo placeholderIcon="camera"></sps-photo>
+                    </div>
+                </div>
+            `
+      },
+      user: {
+        description: "<p>User / Single Person</p>",
+        jsx: code`
+                <div className="sfg-row">
+                    <div className="sfg-col-3">
+                        <sps-photo placeholderIcon="user"></sps-photo>
+                    </div>
+                </div>
+            `
+      },
+      group: {
+        description: "<p>Group / Multiple People</p>",
+        jsx: code`
+                <div className="sfg-row">
+                    <div className="sfg-col-3">
+                        <sps-photo placeholderIcon="group"></sps-photo>
+                    </div>
+                </div>
+            `
+      },
+      company: {
+        description: "<p>Company / Building</p>",
+        jsx: code`
+                <div className="sfg-row">
+                    <div className="sfg-col-3">
+                        <sps-photo placeholderIcon="building"></sps-photo>
+                    </div>
+                </div>
+            `
+      }
+    }
+  }
+};
+const MANIFEST = {
+  "File Upload": {
+    components: [SpsFileUploadComponent],
+    examples: SpsFileUploadExamples
+  },
+  "Tabbed Navigation": {
+    components: [SpsNavTabComponent, SpsNavTabSetComponent],
+    examples: SpsNavTabsExamples
+  },
+  Photos: {
+    components: [SpsPhotoComponent],
+    examples: SpsPhotoExamples
+  }
+};
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
+var __decorateClass$1 = (decorators, target, key2, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key2) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key2, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp$1(target, key2, result);
+  return result;
+};
+const CPT_NAME$1 = "sps-insight-card";
+let SpsInsightCardComponent = class extends HTMLElement {
+  constructor() {
+    super(...arguments);
+    this.kind = SpsInsightCardKind.GENERAL;
+  }
+  get [ClassBindings]() {
+    return [
+      CPT_NAME$1,
+      `${CPT_NAME$1}--${this.kind}`,
+      this.detail && this.detail.children.length ? `${CPT_NAME$1}--has-detail` : null
+    ];
+  }
+  render({ t }) {
+    const metric = /* @__PURE__ */ h("div", {
+      className: `${CPT_NAME$1}__metric-count`
+    }, this.metric);
+    const description = /* @__PURE__ */ h("div", {
+      className: `${CPT_NAME$1}__description`
+    }, /* @__PURE__ */ h("div", {
+      className: `${CPT_NAME$1}__title`,
+      style: { "-webkit-box-orient": "vertical" }
+    }, this.title), /* @__PURE__ */ h("div", {
+      className: `${CPT_NAME$1}__detail`
+    }, this.content));
+    const [
+      count,
+      ofText,
+      total
+    ] = (this.partnerCount ? t("design-system:insightCard.partnerCount", { count: this.partnerCount, total: this.totalPartners }) : "").split("|");
+    return /* @__PURE__ */ h("div", {
+      "data-fragment": true
+    }, /* @__PURE__ */ h("div", {
+      className: `${CPT_NAME$1}__body`
+    }, this.icon ? /* @__PURE__ */ h("i", {
+      className: `sps-icon sps-icon-${this.icon}`
+    }) : /* @__PURE__ */ h("i", {
+      className: `sps-icon sps-icon-${SpsInsightCardIcons[this.kind]}`
+    }), metric, description), this.partnerCount && /* @__PURE__ */ h("div", {
+      className: `${CPT_NAME$1}__partner-count`
+    }, this.partnerCount === this.totalPartners ? /* @__PURE__ */ h("div", null, t("design-system:insightCard.all")) : /* @__PURE__ */ h("div", {
+      "data-fragment": true
+    }, /* @__PURE__ */ h("div", null, count), /* @__PURE__ */ h("div", null, ofText), /* @__PURE__ */ h("div", null, total)), /* @__PURE__ */ h("div", {
+      className: `${CPT_NAME$1}__partners-text`
+    }, t("design-system:insightCard.partners"))));
+  }
+};
+SpsInsightCardComponent.displayName = CPT_NAME$1;
+SpsInsightCardComponent.props = {
+  icon: "SpsIcon",
+  kind: "SpsInsightCardKind",
+  title: "string",
+  metric: "number",
+  partnerCount: "number",
+  totalPartners: "number",
+  secondary: "boolean"
+};
+__decorateClass$1([
+  Prop()
+], SpsInsightCardComponent.prototype, "icon", 2);
+__decorateClass$1([
+  Prop()
+], SpsInsightCardComponent.prototype, "kind", 2);
+__decorateClass$1([
+  Prop()
+], SpsInsightCardComponent.prototype, "title", 2);
+__decorateClass$1([
+  Prop()
+], SpsInsightCardComponent.prototype, "metric", 2);
+__decorateClass$1([
+  Prop()
+], SpsInsightCardComponent.prototype, "partnerCount", 2);
+__decorateClass$1([
+  Prop()
+], SpsInsightCardComponent.prototype, "totalPartners", 2);
+__decorateClass$1([
+  Prop()
+], SpsInsightCardComponent.prototype, "secondary", 2);
+__decorateClass$1([
+  Content()
+], SpsInsightCardComponent.prototype, "content", 2);
+__decorateClass$1([
+  QuerySelector(`.${CPT_NAME$1}__detail`)
+], SpsInsightCardComponent.prototype, "detail", 2);
+SpsInsightCardComponent = __decorateClass$1([
+  Component({ tag: CPT_NAME$1 })
+], SpsInsightCardComponent);
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key2, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key2) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key2, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key2, result);
+  return result;
+};
+const CPT_NAME = "sps-insights";
+let SpsInsightsComponent = class extends HTMLElement {
+  constructor() {
+    super();
+    this.content = [];
+    this.showAdditionalInsights = false;
+    this.toggleAdditionalInsights = this.toggleAdditionalInsights.bind(this);
+  }
+  get [ClassBindings]() {
+    return [
+      CPT_NAME,
+      this.showAdditionalInsights && `${CPT_NAME}--show-additional`,
+      this.details && Array.from(this.details).every((d) => !d.textContent) ? `${CPT_NAME}--no-details` : null,
+      this.content.length === 6 ? `${CPT_NAME}--break-4` : null,
+      this.content.length === 7 ? `${CPT_NAME}--break-5` : null,
+      this.content.length === 8 ? `${CPT_NAME}--break-5` : null
+    ];
+  }
+  toggleAdditionalInsights() {
+    this.showAdditionalInsights = !this.showAdditionalInsights;
+    this.update();
+  }
+  render() {
+    return /* @__PURE__ */ h("div", {
+      "data-fragment": true
+    }, this.content, this.content.length > 10 && /* @__PURE__ */ h("div", {
+      className: "sps-button sps-button--link",
+      onClick: this.toggleAdditionalInsights
+    }, /* @__PURE__ */ h("button", {
+      type: "button"
+    }, this.showAdditionalInsights ? "Hide " : "Show ", "Additional Insights")));
+  }
+};
+SpsInsightsComponent.displayName = CPT_NAME;
+SpsInsightsComponent.props = {};
+__decorateClass([
+  Content()
+], SpsInsightsComponent.prototype, "content", 2);
+__decorateClass([
+  QuerySelectorAll(".sps-insight-card__detail")
+], SpsInsightsComponent.prototype, "details", 2);
+SpsInsightsComponent = __decorateClass([
+  Component({ tag: CPT_NAME })
+], SpsInsightsComponent);
+const SpsInsightCardExamples = {
+  basic: {
+    label: "Basic Insight Cards",
+    examples: {
+      basic: {
+        jsx: code`
+            <sps-insights>
+                <sps-insight-card kind="general"
+                    metric="1234"
+                    title="Insight Card Title"
+                ></sps-insight-card>
+                <sps-insight-card kind="processing"
+                    metric="1234"
+                    title="Insight Card Title"
+                ></sps-insight-card>
+                <sps-insight-card kind="success"
+                    metric="1234"
+                    title="Insight Card Title"
+                ></sps-insight-card>
+                <sps-insight-card kind="warning"
+                    metric="1234"
+                    title="Insight Card Title"
+                ></sps-insight-card>
+                <sps-insight-card kind="error"
+                    metric="1234"
+                    title="Insight Card Title"
+                ></sps-insight-card>
+            </sps-insights>
+        `
+      }
+    }
+  },
+  details: {
+    label: "With Details",
+    examples: {
+      details: {
+        jsx: code`
+            <sps-insights>
+                <sps-insight-card kind="general"
+                    metric="1234"
+                    title="Insight Card Title"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="processing"
+                    metric="1234"
+                    title="Insight Card Title"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="success"
+                    metric="1234"
+                    title="Insight Card Title"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="warning"
+                    metric="1234"
+                    title="Insight Card Title"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="error"
+                    metric="1234"
+                    title="Insight Card Title"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="success"
+                    metric="1234"
+                    title="Insight Card Title"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="error"
+                    metric="1234"
+                    title="Insight Card Title"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+            </sps-insights>
+        `
+      }
+    }
+  },
+  partner_count: {
+    label: "Partner Count",
+    examples: {
+      partner_count: {
+        jsx: code`
+            <sps-insights>
+                <sps-insight-card kind="general"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="250"
+                    totalPartners="250"
+                ></sps-insight-card>
+                <sps-insight-card kind="processing"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="122"
+                    totalPartners="250"
+                ></sps-insight-card>
+                <sps-insight-card kind="success"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="207"
+                    totalPartners="250"
+                ></sps-insight-card>
+                <sps-insight-card kind="warning"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="12"
+                    totalPartners="250"
+                ></sps-insight-card>
+                <sps-insight-card kind="error"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="94"
+                    totalPartners="250"
+                ></sps-insight-card>
+            </sps-insights>
+        `
+      }
+    }
+  },
+  expansion: {
+    label: "10+ Insight Cards",
+    examples: {
+      expansion: {
+        jsx: code`
+            <sps-insights>
+                <sps-insight-card kind="general"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="processing"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                ></sps-insight-card>
+                <sps-insight-card kind="success"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="warning"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                ></sps-insight-card>
+                <sps-insight-card kind="error"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="general"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                ></sps-insight-card>
+                <sps-insight-card kind="processing"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="success"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                ></sps-insight-card>
+                <sps-insight-card kind="warning"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="error"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                ></sps-insight-card>
+                <sps-insight-card kind="general"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="processing"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                ></sps-insight-card>
+                <sps-insight-card kind="success"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="warning"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                ></sps-insight-card>
+                <sps-insight-card kind="error"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+            </sps-insights>
+        `
+      }
+    }
+  },
+  events: {
+    label: "Adding a click handler",
+    description: code`
+          <p>Attaching event handlers to native web components in React cannot be done the usual way at this time.
+          Here is how to do it:</p>
+      `,
+    examples: {
+      events: {
+        react: code`
+                  function Component() {
+                      function handleClick() {
+                          window.alert("Insight card clicked");
+                      }
+
+                      const ref = React.useRef();
+                      React.useEffect(() => {
+                          ref.current.addEventListener("click", handleClick);
+                          return () => {
+                              ref.current.removeEventListener("click", handleClick);
+                          };
+                      }, []);
+
+                        return (
+                            <sps-insights>
+                                <sps-insight-card ref={ref}
+                                    kind="general"
+                                    metric="1234"
+                                    title="Insight Card Title"
+                                ></sps-insight-card>
+                                <sps-insight-card kind="general"
+                                    metric="1234"
+                                    title="Insight Card Title"
+                                ></sps-insight-card>
+                                <sps-insight-card kind="general"
+                                    metric="1234"
+                                    title="Insight Card Title"
+                                ></sps-insight-card>
+                            </sps-insights>
+                        );
+                    }
+                `
+      }
+    }
+  },
+  alternateIcon: {
+    label: "Using alternate icons",
+    examples: {
+      basic: {
+        react: code`
+                    function DemoComponent() {
+                        return (
+                            <sps-insights>
+                                <sps-insight-card
+                                    kind="general"
+                                    metric="1234"
+                                    icon={SpsIcon.DOLLAR_SIGN}
+                                    title="Insight Card Title"
+                                ></sps-insight-card>
+                                <sps-insight-card
+                                    kind="processing"
+                                    metric="1234"
+                                    icon={SpsIcon.ASTERISK}
+                                    title="Insight Card Title"
+                                ></sps-insight-card>
+                                <sps-insight-card
+                                    kind="success"
+                                    metric="1234"
+                                    icon={SpsIcon.USER}
+                                    title="Insight Card Title"
+                                ></sps-insight-card>
+                                <sps-insight-card
+                                    kind="warning"
+                                    metric="1234"
+                                    icon={SpsIcon.FOLDER_OPEN}
+                                    title="Insight Card Title"
+                                ></sps-insight-card>
+                                <sps-insight-card
+                                    kind="error"
+                                    metric="1234"
+                                    icon={SpsIcon.BAN}
+                                    title="Insight Card Title"
+                                ></sps-insight-card>
+                            </sps-insights>
+                        )
+                    }
+                `
+      }
+    }
+  }
+};
+export { AttrBindings, ClassBindings, Component, Content, EventDispatcher, EventListener, MANIFEST, MIMEType, Prop, QuerySelector, QuerySelectorAll, SpsFileUploadComponent, SpsFileUploadExamples, SpsInsightCardComponent, SpsInsightCardExamples, SpsInsightsComponent, SpsNavTabComponent, SpsNavTabSetComponent, SpsNavTabsExamples, SpsPhotoComponent, SpsPhotoDisplayMode, SpsPhotoExamples, StyleBindings, Watch, h, namespaceOverrideRegistrar, register, webComponentsUseI18n };