@spscommerce/ds-web-components 6.37.3 → 7.0.1

package/lib/index.es.js

@@ -1,7 +1,10 @@
-import { noI18nI18n, SpsIcon, SpsInsightCardKind, SpsInsightCardIcons } from "@spscommerce/ds-shared";
-import { parseFileSize, code } from "@spscommerce/utils";
-var incrementalDomCjs = {};
-Object.defineProperty(incrementalDomCjs, "__esModule", { value: true });
+var it = Object.defineProperty;
+var rt = (e, t, s) => t in e ? it(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s;
+var a = (e, t, s) => (rt(e, typeof t != "symbol" ? t + "" : t, s), s);
+import { noI18nI18n as at, SpsIcon as Se, SpsInsightCardKind as ot, SpsInsightCardIcons as lt } from "@spscommerce/ds-shared";
+import { code as c, parseFileSize as ct } from "@spscommerce/utils";
+var d = {};
+Object.defineProperty(d, "__esModule", { value: !0 });
 /**
  * @license
  * Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
@@ -18,7 +21,7 @@ Object.defineProperty(incrementalDomCjs, "__esModule", { value: true });
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-var symbols = {
+var fe = {
   default: "__default"
 };
 /**
@@ -37,20 +40,19 @@ var symbols = {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-var hasOwnProperty = Object.prototype.hasOwnProperty;
-function Blank() {
+var pt = Object.prototype.hasOwnProperty;
+function ke() {
 }
-Blank.prototype = Object.create(null);
-function has(map, property) {
-  return hasOwnProperty.call(map, property);
+ke.prototype = /* @__PURE__ */ Object.create(null);
+function dt(e, t) {
+  return pt.call(e, t);
 }
-function createMap() {
-  return new Blank();
+function Le() {
+  return new ke();
 }
-function truncateArray(arr, length) {
-  while (arr.length > length) {
-    arr.pop();
-  }
+function ge(e, t) {
+  for (; e.length > t; )
+    e.pop();
 }
 /**
  * @license
@@ -68,64 +70,46 @@ function truncateArray(arr, length) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-function getNamespace(name) {
-  if (name.lastIndexOf("xml:", 0) === 0) {
+function ht(e) {
+  if (e.lastIndexOf("xml:", 0) === 0)
     return "http://www.w3.org/XML/1998/namespace";
-  }
-  if (name.lastIndexOf("xlink:", 0) === 0) {
+  if (e.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 Fe(e, t, s) {
+  if (s == null)
+    e.removeAttribute(t);
+  else {
+    var n = ht(t);
+    n ? e.setAttributeNS(n, t, String(s)) : e.setAttribute(t, String(s));
   }
 }
-function applyProp(el, name, value) {
-  el[name] = value;
+function Re(e, t, s) {
+  e[t] = s;
 }
-function setStyleValue(style, prop, value) {
-  if (prop.indexOf("-") >= 0) {
-    style.setProperty(prop, value);
-  } else {
-    style[prop] = value;
-  }
+function ut(e, t, s) {
+  t.indexOf("-") >= 0 ? e.setProperty(t, s) : e[t] = s;
 }
-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 ft(e, t, s) {
+  if (typeof s == "string")
+    e.style.cssText = s;
+  else {
+    e.style.cssText = "";
+    var n = e.style;
+    for (var i in s)
+      dt(s, i) && ut(n, i, s[i]);
   }
 }
-function applyAttributeTyped(el, name, value) {
-  var type = typeof value;
-  if (type === "object" || type === "function") {
-    applyProp(el, name, value);
-  } else {
-    applyAttr(el, name, value);
-  }
+function gt(e, t, s) {
+  var n = typeof s;
+  n === "object" || n === "function" ? Re(e, t, s) : Fe(e, t, s);
 }
-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);
+var W = Le();
+W[fe.default] = gt;
+W.style = ft;
+function z(e, t, s) {
+  var n = W[t] || W[fe.default];
+  n(e, t, s);
 }
 /**
  * @license
@@ -143,46 +127,65 @@ function updateAttribute(el, name, value) {
  * 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"));
+var H = !1, oe = !1;
+function Be(e, t) {
+  if (!t)
+    throw new Error("Cannot call " + e + "() unless in patch.");
 }
-function assertPatchOuterHasParentNode(parent) {
-  if (!parent) {
-    console.warn("patchOuter requires the node have a parent if there is a key.");
+function mt(e, t) {
+  if (e !== t) {
+    for (var s = e, n = []; s && s !== t; )
+      n.push(s.nodeName.toLowerCase()), s = s.parentNode;
+    throw new Error(`One or more tags were not closed:
+` + n.join(`
+`));
   }
 }
-function assertVirtualAttributesClosed() {
-  if (inAttributes) {
+function vt(e) {
+  e || console.warn("patchOuter requires the node have a parent if there is a key.");
+}
+function B(e) {
+  if (H)
+    throw new Error(e + "() can not be called between elementOpenStart() and elementOpenEnd().");
+}
+function $e(e) {
+  if (oe)
+    throw new Error(e + "() may not be called inside an element that has called skip().");
+}
+function me(e) {
+  if (!H)
+    throw new Error(e + "() can only be called after calling elementOpenStart().");
+}
+function bt() {
+  if (H)
     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) {
+function Ct(e, t) {
+  if (e !== t)
+    throw new Error('Received a call to close "' + t + '" but "' + e + '" was open.');
+}
+function wt(e, t) {
+  if (t !== null)
+    throw new Error(e + "() must come before any child declarations inside the current element.");
+}
+function _t(e, t, s, n) {
+  se(e);
+  var i = e, r = t, l = r.nextSibling === s && r.previousSibling === n, h = r.nextSibling === i.nextSibling && r.previousSibling === n, C = r === i;
+  if (!l && !h && !C)
     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 M(e) {
+  var t = H;
+  return H = e, t;
+}
+function ee(e) {
+  var t = oe;
+  return oe = e, t;
 }
-function assert(val) {
-  return val;
+function se(e) {
+  if (process.env.NODE_ENV !== "production" && !e)
+    throw new Error("Expected value to be defined");
+  return e;
 }
 /**
  * @license
@@ -200,7 +203,7 @@ function assert(val) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-var notifications = {
+var U = {
   nodesCreated: null,
   nodesDeleted: null
 };
@@ -220,26 +223,17 @@ var notifications = {
  * 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;
+var Nt = function() {
+  function e() {
+    this.created = [], this.deleted = [];
+  }
+  return e.prototype.markCreated = function(t) {
+    this.created.push(t);
+  }, e.prototype.markDeleted = function(t) {
+    this.deleted.push(t);
+  }, e.prototype.notifyChanges = function() {
+    U.nodesCreated && this.created.length > 0 && U.nodesCreated(this.created), U.nodesDeleted && this.deleted.length > 0 && U.nodesDeleted(this.deleted);
+  }, e;
 }();
 /**
  * @license
@@ -257,52 +251,39 @@ var Context = function() {
  * 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;
+function xt(e) {
+  return e.nodeType === 11 || e.nodeType === 9;
+}
+function ae(e) {
+  return e.nodeType === 1;
+}
+function yt(e) {
+  return e.nodeType === 3;
+}
+function St(e, t) {
+  for (var s = [], n = e; n !== t; ) {
+    var i = n;
+    s.push(i), n = i.parentNode;
   }
-  return prev;
+  return s;
+}
+var Ot = Node.prototype.getRootNode || function() {
+  for (var e = this, t = e; e; )
+    t = e, e = e.parentNode;
+  return t;
 };
-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;
+function At(e) {
+  var t = Ot.call(e);
+  return xt(t) ? t.activeElement : null;
+}
+function Dt(e, t) {
+  var s = At(e);
+  return !s || !e.contains(s) ? [] : St(s, t);
+}
+function Pt(e, t, s) {
+  for (var n = t.nextSibling, i = s; i !== null && i !== t; ) {
+    var r = i.nextSibling;
+    e.insertBefore(i, n), i = r;
   }
 }
 /**
@@ -321,77 +302,53 @@ function moveBefore(parentNode, node, referenceNode) {
  * 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;
+var Et = function() {
+  function e(t, s, n) {
+    this._attrsArr = null, this.staticsApplied = !1, this.nameOrCtor = t, this.key = s, this.text = n;
+  }
+  return e.prototype.hasEmptyAttrsArr = function() {
+    var t = this._attrsArr;
+    return !t || !t.length;
+  }, e.prototype.getAttrsArr = function(t) {
+    return this._attrsArr || (this._attrsArr = new Array(t));
+  }, e;
 }();
-function initData(node, nameOrCtor, key2, text2) {
-  var data = new NodeData(nameOrCtor, key2, text2);
-  node["__incrementalDOMData"] = data;
-  return data;
+function ve(e, t, s, n) {
+  var i = new Et(t, s, n);
+  return e.__incrementalDOMData = i, i;
 }
-function getData(node, key2) {
-  return importSingleNode(node, key2);
+function $(e, t) {
+  return Te(e, t);
 }
-function isDataInitialized(node) {
-  return Boolean(node["__incrementalDOMData"]);
+function It(e) {
+  return Boolean(e.__incrementalDOMData);
 }
-function getKey(node) {
-  assert(node["__incrementalDOMData"]);
-  return getData(node).key;
+function kt(e) {
+  return se(e.__incrementalDOMData), $(e).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 Te(e, t) {
+  if (e.__incrementalDOMData)
+    return e.__incrementalDOMData;
+  var s = ae(e) ? e.localName : e.nodeName, n = ae(e) ? e.getAttribute("key") || t : null, i = yt(e) ? e.data : void 0, r = ve(e, s, n, i);
+  return ae(e) && Lt(e, r), r;
 }
-function importNode(node) {
-  importSingleNode(node);
-  for (var child = node.firstChild; child; child = child.nextSibling) {
-    importNode(child);
-  }
+function je(e) {
+  Te(e);
+  for (var t = e.firstChild; t; t = t.nextSibling)
+    je(t);
 }
-function clearCache(node) {
-  node["__incrementalDOMData"] = null;
-  for (var child = node.firstChild; child; child = child.nextSibling) {
-    clearCache(child);
-  }
+function Ue(e) {
+  e.__incrementalDOMData = null;
+  for (var t = e.firstChild; t; t = t.nextSibling)
+    Ue(t);
 }
-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;
-  }
+function Lt(e, t) {
+  var s = e.attributes, n = s.length;
+  if (!!n)
+    for (var i = t.getAttrsArr(n), r = 0, l = 0; r < n; r += 1, l += 2) {
+      var h = s[r], C = h.name, g = h.value;
+      i[l] = C, i[l + 1] = g;
+    }
 }
 /**
  * @license
@@ -409,40 +366,22 @@ function recordAttributes(node, data) {
  * 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);
-    }
+function Ft(e, t) {
+  return e === "svg" ? "http://www.w3.org/2000/svg" : e === "math" ? "http://www.w3.org/1998/Math/MathML" : t == null || $(t).nameOrCtor === "foreignObject" ? null : t.namespaceURI;
+}
+function Rt(e, t, s, n) {
+  var i;
+  if (typeof s == "function")
+    i = new s();
+  else {
+    var r = Ft(s, t);
+    r ? i = e.createElementNS(r, s) : i = e.createElement(s);
   }
-  initData(el, nameOrCtor, key2);
-  return el;
+  return ve(i, s, n), i;
 }
-function createText(doc2) {
-  var node = doc2.createTextNode("");
-  initData(node, "#text", null);
-  return node;
+function Bt(e) {
+  var t = e.createTextNode("");
+  return ve(t, "#text", null), t;
 }
 /**
  * @license
@@ -460,166 +399,88 @@ function createText(doc2) {
  * 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);
+var R = null, u = null, b = null, k = null, J = [], Y = [];
+function ne() {
+  return Y;
+}
+function ze(e) {
+  var t = function(s, n, i) {
+    var r = R, l = k, h = J, C = Y, g = u, w = b, S = !1, V = !1;
+    R = new Nt(), k = s.ownerDocument, Y = [], b = s.parentNode, J = Dt(s, b), process.env.NODE_ENV !== "production" && (S = M(!1), V = ee(!1));
     try {
-      var retVal = run(node, fn, data);
-      if (false)
-        ;
-      return retVal;
+      var nt = e(s, n, i);
+      return process.env.NODE_ENV !== "production" && bt(), nt;
     } finally {
-      doc = prevDoc;
-      argsBuilder = prevArgsBuilder;
-      currentNode = prevCurrentNode;
-      currentParent = prevCurrentParent;
-      focusPath = prevFocusPath;
-      context.notifyChanges();
-      setInAttributes(previousInAttributes);
-      context = prevContext;
+      k = l, Y = C, u = g, b = w, J = h, R.notifyChanges(), M(S), ee(V), R = r;
     }
   };
-  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;
+  return t;
+}
+var We = ze(function(e, t, s) {
+  return u = e, qe(), t(s), Ge(), process.env.NODE_ENV !== "production" && mt(u, e), e;
+}), $t = ze(function(e, t, s) {
+  var n = { nextSibling: e }, i = null, r = null;
+  return process.env.NODE_ENV !== "production" && (i = e.nextSibling, r = e.previousSibling), u = n, t(s), process.env.NODE_ENV !== "production" && (vt(b), _t(n, u, i, r)), b && Ve(b, ie(), e.nextSibling), n === u ? null : u;
 });
-function matches(matchNode, nameOrCtor, key2) {
-  var data = getData(matchNode, key2);
-  return nameOrCtor == data.nameOrCtor && key2 == data.key;
+function Oe(e, t, s) {
+  var n = $(e, s);
+  return t == n.nameOrCtor && s == n.key;
 }
-function getMatchingNode(matchNode, nameOrCtor, key2) {
-  if (!matchNode) {
+function Tt(e, t, s) {
+  if (!e)
     return null;
-  }
-  if (matches(matchNode, nameOrCtor, key2)) {
-    return matchNode;
-  }
-  if (key2) {
-    while (matchNode = matchNode.nextSibling) {
-      if (matches(matchNode, nameOrCtor, key2)) {
-        return matchNode;
-      }
-    }
+  if (Oe(e, t, s))
+    return e;
+  if (s) {
+    for (; e = e.nextSibling; )
+      if (Oe(e, t, s))
+        return e;
   }
   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 jt(e, t) {
+  var s;
+  return e === "#text" ? s = Bt(k) : s = Rt(k, b, e, t), R.markCreated(s), s;
 }
-function enterNode() {
-  currentParent = currentNode;
-  currentNode = null;
+function He(e, t) {
+  var s = Tt(u, e, t), n = s || jt(e, t);
+  n !== u && (J.indexOf(n) >= 0 ? Pt(b, n, u) : b.insertBefore(n, u), u = n);
 }
-function getNextNode() {
-  if (currentNode) {
-    return currentNode.nextSibling;
-  } else {
-    return currentParent.firstChild;
+function Ve(e, t, s) {
+  for (var n = e, i = t; i !== s; ) {
+    var r = i.nextSibling;
+    n.removeChild(i), R.markDeleted(i), i = r;
   }
 }
-function nextNode() {
-  currentNode = getNextNode();
+function qe() {
+  b = u, u = null;
+}
+function ie() {
+  return u ? u.nextSibling : b.firstChild;
 }
-function exitNode() {
-  clearUnvisitedDOM(currentParent, getNextNode(), null);
-  currentNode = currentParent;
-  currentParent = currentParent.parentNode;
+function be() {
+  u = ie();
 }
-function open(nameOrCtor, key2) {
-  nextNode();
-  alignWithDOM(nameOrCtor, key2);
-  enterNode();
-  return currentParent;
+function Ge() {
+  Ve(b, ie(), null), u = b, b = b.parentNode;
 }
-function close() {
-  exitNode();
-  return currentNode;
+function Xe(e, t) {
+  return be(), He(e, t), qe(), b;
 }
-function text() {
-  nextNode();
-  alignWithDOM("#text", null);
-  return currentNode;
+function Ke() {
+  return process.env.NODE_ENV !== "production" && ee(!1), Ge(), u;
 }
-function currentElement() {
-  return currentParent;
+function Ut() {
+  return be(), He("#text", null), u;
 }
-function currentPointer() {
-  return getNextNode();
+function zt() {
+  return process.env.NODE_ENV !== "production" && (Be("currentElement", k), B("currentElement")), b;
 }
-function skip() {
-  currentNode = currentParent.lastChild;
+function Wt() {
+  return process.env.NODE_ENV !== "production" && (Be("currentPointer", k), B("currentPointer")), ie();
+}
+function Ht() {
+  process.env.NODE_ENV !== "production" && (wt("skip", u), ee(!0)), u = b.lastChild;
 }
 /**
  * @license
@@ -637,148 +498,96 @@ function skip() {
  * 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];
+var Ae = 3, x = Le();
+function Vt(e, t, s) {
+  if (t.staticsApplied = !0, !(!s || !s.length)) {
+    if (t.hasEmptyAttrsArr()) {
+      for (var n = 0; n < s.length; n += 2)
+        z(e, s[n], s[n + 1]);
+      return;
+    }
+    for (var n = 0; n < s.length; n += 2)
+      x[s[n]] = n + 1;
+    for (var i = t.getAttrsArr(0), r = 0, n = 0; n < i.length; n += 2) {
+      var l = i[n], h = i[n + 1], C = x[l];
+      if (C) {
+        s[C] === h && delete x[l];
+        continue;
       }
-      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) {
+      i[r] = l, i[r + 1] = h, r += 2;
+    }
+    ge(i, r);
+    for (var l in x)
+      z(e, l, s[x[l]]), delete x[l];
+  }
+}
+function Ce(e, t, s) {
+  process.env.NODE_ENV !== "production" && (B("elementOpen"), $e("elementOpen"));
+  var n = Xe(e, t), i = $(n);
+  i.staticsApplied || Vt(n, i, s);
+  var r = Math.max(0, arguments.length - Ae), l = i.hasEmptyAttrsArr();
+  if (!r && l)
+    return n;
+  for (var h = i.getAttrsArr(r), C = Ae, g = 0; C < arguments.length; C += 2, g += 2) {
+    var w = arguments[C];
+    if (l)
+      h[g] = w;
+    else if (h[g] !== w)
       break;
-    }
-    var value = arguments[i + 1];
-    if (hadNoAttrs || attrsArr[j + 1] !== value) {
-      attrsArr[j + 1] = value;
-      updateAttribute(node, name, value);
-    }
+    var S = arguments[C + 1];
+    (l || h[g + 1] !== S) && (h[g + 1] = S, z(n, w, S));
   }
-  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];
+  if (C < arguments.length || g < h.length) {
+    for (var V = g; g < h.length; g += 2)
+      x[h[g]] = h[g + 1];
+    for (g = V; C < arguments.length; C += 2, g += 2) {
+      var w = arguments[C], S = arguments[C + 1];
+      x[w] !== S && z(n, w, S), h[g] = w, h[g + 1] = S, delete x[w];
     }
-    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];
+    ge(h, g);
+    for (var w in x)
+      z(n, w, void 0), delete x[w];
   }
-  elementOpen.apply(null, arguments);
-  return elementClose();
+  return n;
 }
-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);
+function qt(e, t, s) {
+  var n = ne();
+  process.env.NODE_ENV !== "production" && (B("elementOpenStart"), M(!0)), n[0] = e, n[1] = t, n[2] = s;
+}
+function Gt(e) {
+  var t = ne();
+  process.env.NODE_ENV !== "production" && (me("key"), se(t)), t[1] = e;
+}
+function Xt(e, t) {
+  var s = ne();
+  process.env.NODE_ENV !== "production" && me("attr"), s.push(e), s.push(t);
+}
+function Kt() {
+  var e = ne();
+  process.env.NODE_ENV !== "production" && (me("elementOpenEnd"), M(!1)), se(e);
+  var t = Ce.apply(null, e);
+  return ge(e, 0), t;
+}
+function Qe(e) {
+  process.env.NODE_ENV !== "production" && B("elementClose");
+  var t = Ke();
+  return process.env.NODE_ENV !== "production" && Ct($(t).nameOrCtor, e), t;
+}
+function Qt(e, t, s) {
+  return Ce.apply(null, arguments), Qe(e);
+}
+function Zt(e) {
+  process.env.NODE_ENV !== "production" && (B("text"), $e("text"));
+  var t = Ut(), s = $(t);
+  if (s.text !== e) {
+    s.text = e;
+    for (var n = e, i = 1; i < arguments.length; i += 1) {
+      var r = arguments[i];
+      n = r(n);
     }
-    node.data = formatted;
+    t.data = n;
   }
-  return node;
+  return t;
 }
 /**
  * @license
@@ -796,799 +605,807 @@ function text$1(value) {
  * 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));
+d.applyAttr = Fe;
+d.applyProp = Re;
+d.attributes = W;
+d.close = Ke;
+var we = d.currentElement = zt, le = d.currentPointer = Wt;
+d.open = Xe;
+var Jt = d.patch = We;
+d.patchInner = We;
+d.patchOuter = $t;
+d.skip = Ht;
+var ce = d.skipNode = be;
+d.getKey = kt;
+d.clearCache = Ue;
+d.importNode = je;
+d.isDataInitialized = It;
+d.notifications = U;
+d.symbols = fe;
+var De = d.attr = Xt, Yt = d.elementClose = Qe;
+d.elementOpen = Ce;
+var Mt = d.elementOpenEnd = Kt, es = d.elementOpenStart = qt;
+d.elementVoid = Qt;
+var ts = d.text = Zt;
+d.key = Gt;
+function Pe(e) {
+  let t = le();
+  return t instanceof Comment && t.data !== e ? t.data = e : (t = document.createComment(e), we().appendChild(t)), ce(), t;
+}
+let Ze = at;
+function Ns(e) {
+  Ze = e;
+}
+function ss() {
+  return Ze;
+}
+const I = Symbol("ComponentMetadata"), N = Object.freeze({
+  has(e, t) {
+    return Boolean(
+      e[I] && Object.prototype.hasOwnProperty.call(e[I], t)
+    );
   },
-  add(target, metadata) {
-    if (target[SYMBOL_COMPONENT_META]) {
-      Object.assign(target[SYMBOL_COMPONENT_META], metadata);
-    } else {
-      target[SYMBOL_COMPONENT_META] = metadata;
-    }
+  add(e, t) {
+    e[I] ? Object.assign(e[I], t) : e[I] = t;
   },
-  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();
-        }
+  get(e, t, s) {
+    return e[I] && e[I][t] || s;
+  }
+}), Ee = Symbol("ds-web-components:pragma:listeners-attached"), Je = "idom-pragma:content-begin", pe = "idom-pragma:content-end";
+function de(e) {
+  for (const t of e)
+    if (typeof t == "function")
+      t();
+    else if (typeof t == "string")
+      ts(t);
+    else if (t instanceof Set)
+      de(Array.from(t));
+    else if (Array.isArray(t) && t.length > 0) {
+      let s = le();
+      if (Pe(Je), s === null) {
+        const n = we();
+        for (let i = 0; i < t.length; i += 1)
+          n.contains(t[i]) || n.appendChild(t[i]), ce();
       }
-      while (ptr && ptr.data !== MARK_CONTENT_END) {
-        skipNode();
-        ptr = currentPointer_1();
-      }
-      comment(MARK_CONTENT_END);
+      for (; s && s.data !== pe; )
+        ce(), s = le();
+      Pe(pe);
     }
-  }
 }
-function h(tagName, attrs, ...children) {
-  if (attrs) {
-    for (const key2 of Object.keys(attrs)) {
-      if (key2.toUpperCase() === "DATA-FRAGMENT") {
-        return () => handleChildren(children);
-      }
-    }
+function o(e, t, ...s) {
+  if (t) {
+    for (const n of Object.keys(t))
+      if (n.toUpperCase() === "DATA-FRAGMENT")
+        return () => de(s);
   }
   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);
+    es(e);
+    const n = [];
+    if (t)
+      for (const r of Object.keys(t))
+        r.toUpperCase() === "CLASSNAME" ? De("class", t[r]) : /^on[A-Z]/.test(r) ? n.push(r) : De(r, t[r]);
+    Mt(e);
+    const i = we();
+    if (!i[Ee]) {
+      for (const r of n)
+        i.addEventListener(r.substr(2).toLowerCase(), t[r]);
+      i[Ee] = !0;
+    }
+    de(s), Yt(e);
   };
 }
-function ensureDefined(tag, Component2) {
-  if (!customElements.get(tag)) {
-    customElements.define(tag, Component2);
-  }
+function Ye(e, t) {
+  customElements.get(e) || customElements.define(e, t);
 }
-function register(...Components) {
-  for (const Component2 of Components) {
-    ensureDefined(Metadata.get(Component2, "tag"), Component2);
-  }
+function xs(...e) {
+  for (const t of e)
+    Ye(N.get(t, "tag"), t);
 }
-function namespaceOverrideRegistrar(overrideNamespace) {
-  return function register2(...Components) {
-    for (const Component2 of Components) {
-      const tag = `${overrideNamespace}${Metadata.get(Component2, "tag").substr(3)}`;
-      ensureDefined(tag, Component2);
+function ys(e) {
+  return function(...s) {
+    for (const n of s) {
+      const i = `${e}${N.get(n, "tag").substr(3)}`;
+      Ye(i, n);
     }
   };
 }
-const AttrBindings = Symbol("Component Attribute Bindings");
-const ClassBindings = Symbol("Component Class Bindings");
-const StyleBindings = Symbol("Component Style Bindings");
-const ext = {
-  __initialized: false,
+const Ie = Symbol("Component Attribute Bindings"), T = Symbol("Component Class Bindings"), he = Symbol("Component Style Bindings"), ns = {
+  __initialized: !1,
   __observer: null,
   __queuedUpdate: null,
-  __managedClasses: new Set(),
+  __managedClasses: /* @__PURE__ */ 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);
-    }
+    const e = this;
+    for (const t of Object.keys(e[Ie] || {}))
+      e.setAttribute(t, e[Ie][t]);
+    for (const t of Object.keys(e[he] || {}))
+      e.style[t] = e[he][t];
+    for (const t of e.__managedClasses)
+      e.classList.remove(t);
+    for (const t of (e[T] || []).filter(Boolean))
+      e.__managedClasses.add(t), e.classList.add(t);
+    for (const t of (e.getAttribute("classname") || "").split(/\w+/).filter(Boolean))
+      e.classList.add(t);
   },
-  __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);
+  __updateChildQueries(e) {
+    const t = this;
+    for (const s of N.get(t.constructor, "childQueries", []))
+      if (!e || e && s.refresh) {
+        const n = s.all ? t.querySelectorAll : t.querySelector;
+        t[s.key] = n.call(t, s.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;
-    }
+    const e = this;
+    let t = Array.from(e.childNodes), s = null, n = t.length;
+    for (let i = 0; i < t.length; i += 1) {
+      const r = t[i];
+      r instanceof Comment && (r.data === Je ? s = i + 1 : r.data === pe && (n = i - 1));
+    }
+    if (s === null)
+      for (const i of t)
+        i.parentNode.removeChild(i);
+    else
+      t = t.slice(s, n);
+    N.has(e.constructor, "contentProp") && (e[N.get(e.constructor, "contentProp")] = t);
   },
   __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 });
+    const e = this;
+    e.__observer || (e.__observer = new MutationObserver(() => {
+      e.contentChangedCallback && e.contentChangedCallback(), e.__gatherChildren(), e.update();
+    })), e.__observer.observe(e, { childList: !0 });
   },
   __stopMutObs() {
-    const self = this;
-    if (self.__observer) {
-      self.__observer.disconnect();
-    }
+    const e = this;
+    e.__observer && e.__observer.disconnect();
   },
   __doRender() {
-    const self = this;
-    self.__stopMutObs();
-    patch(self, self.render(getI18n()));
-    self.__startMutObs();
+    const e = this;
+    e.__stopMutObs(), Jt(e, e.render(ss())), e.__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;
-      });
-    }
+    const e = this;
+    e.__initialized && !e.__queuedUpdate && (e.__queuedUpdate = window.requestAnimationFrame(() => {
+      e.__doRender(), setTimeout(() => {
+        e.__updateChildQueries(!0), e.__updateHostBindings();
+      }, 0), e.__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();
-      }
-    }
+  attributeChangedCallback(e, t, s) {
+    const n = this, i = s === "" ? !0 : s;
+    i !== t && (n.__cbAttributeChanged && n.__cbAttributeChanged(e, n[e], i), e !== "style" && (n[e] = i), n.__initialized && n.update());
   },
   connectedCallback() {
-    const self = this;
-    if (self.__cbConnected) {
-      self.__cbConnected();
-    }
-    const listeners = Metadata.get(self.constructor, "eventListeners", []);
+    const e = this;
+    e.__cbConnected && e.__cbConnected();
+    const t = N.get(e.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]);
+      if (!e.__initialized) {
+        e.__gatherChildren();
+        for (const [, s] of t)
+          e[s] = e[s].bind(e);
+        e.__initialized = !0;
       }
-      self.__doRender();
-      setTimeout(() => {
-        self.__updateChildQueries();
-        self.__updateHostBindings();
+      for (const [s, n] of t)
+        e.addEventListener(s, e[n]);
+      e.__doRender(), setTimeout(() => {
+        e.__updateChildQueries(), e.__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();
+    const e = this;
+    e.__cbDisconnected && e.__cbDisconnected();
+    for (const [t, s] of N.get(e.constructor, "eventListeners", []))
+      e.removeEventListener(t, e[s]);
+    e.__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 j(e) {
+  return (t) => {
+    N.add(t, e), Object.assign(t.prototype, {
+      __cbAttributeChanged: t.prototype.attributeChangedCallback,
+      __cbConnected: t.prototype.connectedCallback,
+      __cbDisconnected: t.prototype.disconnectedCallback
+    }, ns);
   };
 }
-function Content() {
-  return (target, key2) => {
-    Metadata.add(target.constructor, { contentProp: key2 });
+function _e() {
+  return (e, t) => {
+    N.add(e.constructor, { contentProp: t });
   };
 }
-function EventDispatcher(eventName) {
-  return (target, key2) => {
-    Object.defineProperty(target, key2, {
+function Ne(e) {
+  return (t, s) => {
+    Object.defineProperty(t, s, {
       get() {
-        Object.defineProperty(this, key2, {
+        return Object.defineProperty(this, s, {
           value: {
-            dispatch: (detail) => {
-              const event = new CustomEvent(eventName || key2, { detail });
-              this.dispatchEvent(event);
-              return event;
+            dispatch: (n) => {
+              const i = new CustomEvent(e || s, { detail: n });
+              return this.dispatchEvent(i), i;
             }
           }
-        });
-        return this[key2];
+        }), this[s];
       },
-      configurable: true
+      configurable: !0
     });
   };
 }
-function EventListener(eventName) {
-  return (target, key2) => {
-    const eventListeners = Metadata.get(target.constructor, "eventListeners", []);
-    eventListeners.push([eventName, key2]);
-    Metadata.add(target.constructor, { eventListeners });
+function re(e) {
+  return (t, s) => {
+    const n = N.get(t.constructor, "eventListeners", []);
+    n.push([e, s]), N.add(t.constructor, { eventListeners: n });
   };
 }
-function Prop(castToType) {
-  return (target, key2) => {
-    const c = target.constructor;
-    const keyLowercase = key2.toLowerCase();
-    c.observedAttributes = c.observedAttributes || [
+function p(e) {
+  return (t, s) => {
+    const n = t.constructor, i = s.toLowerCase();
+    if (n.observedAttributes = n.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, {
+    ], n.observedAttributes.push(s), n.observedAttributes.push(i), i !== s && Object.defineProperty(t, s, {
+      get() {
+        return this[i];
+      },
+      set(r) {
+        this[i] = r;
+      }
+    }), e) {
+      const r = Symbol.for(s);
+      Object.defineProperty(t, i, {
         get() {
-          return this[privateKey];
+          return this[r];
         },
-        set(newValue) {
-          let castValue = newValue;
-          if (castToType === Boolean && typeof newValue === "string" && newValue.toLowerCase() === "false") {
-            castValue = false;
-          } else {
-            castValue = castToType(newValue);
-          }
-          this[privateKey] = castValue;
+        set(l) {
+          let h = l;
+          e === Boolean && typeof l == "string" && l.toLowerCase() === "false" ? h = !1 : h = e(l), this[r] = h;
         }
       });
     }
   };
 }
-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 Me(e, t, s) {
+  return (n, i) => {
+    const r = N.get(n.constructor, "childQueries", []);
+    r.push({
+      key: i,
+      selector: e,
+      all: s,
+      refresh: t.refresh
+    }), N.add(n.constructor, { childQueries: r });
   };
 }
-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]
+function xe(e, t = {}) {
+  return Me(e, t);
+}
+function is(e, t = {}) {
+  return Me(e, t, !0);
+}
+function et() {
+  return (e, t) => {
+    const s = Symbol(t);
+    Object.defineProperties(e, {
+      [s]: {
+        writable: !0,
+        enumerable: !1,
+        configurable: !1,
+        value: e[t]
       },
-      [key2]: {
+      [t]: {
         get() {
-          return this[privateKey];
+          return this[s];
         },
-        set(newValue) {
-          if (this[privateKey] !== newValue) {
-            this[privateKey] = newValue;
-            this.update();
-          }
+        set(n) {
+          this[s] !== n && (this[s] = n, 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 {
+var rs = Object.defineProperty, as = Object.getOwnPropertyDescriptor, E = (e, t, s, n) => {
+  for (var i = n > 1 ? void 0 : n ? as(t, s) : t, r = e.length - 1, l; r >= 0; r--)
+    (l = e[r]) && (i = (n ? l(t, s, i) : l(i)) || i);
+  return n && i && rs(t, s, i), i;
+}, os = /* @__PURE__ */ ((e) => (e.FIT = "fit", e.FILL = "fill", e))(os || {});
+const F = "sps-photo";
+var q;
+let O = (q = 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);
+    super(...arguments);
+    a(this, "src");
+    a(this, "altText");
+    a(this, "mode", "fill");
+    a(this, "placeholderIcon");
+    a(this, "width");
+    a(this, "fitWidth");
+    a(this, "imageInternal");
+    a(this, "waitForWidthInterval");
+    a(this, "waitForImgHeightInterval");
   }
-  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`
-    ];
+  get image() {
+    return this.imageInternal;
   }
-  connectedCallback() {
-    this.description = this.description || (this.multiple ? "Files" : "File");
-    if (this.acceptExtensions) {
-      this.processAcceptExtensions(this.acceptExtensions);
-    }
-    if (this.maxSize) {
-      this.parseAndValidateMaxSize(this.maxSize);
-    }
+  set image(t) {
+    this.imageInternal = t, t && (this.waitForImgHeightInterval && window.clearInterval(this.waitForImgHeightInterval), this.waitForImgHeightInterval = window.setInterval(() => {
+      const s = t.getBoundingClientRect();
+      if (s.height) {
+        window.clearInterval(this.waitForImgHeightInterval), delete this.waitForImgHeightInterval;
+        let n = !0;
+        n = s.width / s.height > 1, this.fitWidth = n === (this.mode === "fit");
+      }
+    }, 1e3 / 60));
   }
-  attributeChangedCallback(attrName, oldValue, newValue) {
-    if (attrName === "acceptExtensions") {
-      this.processAcceptExtensions(newValue);
-    }
-    if (attrName === "maxSize") {
-      this.parseAndValidateMaxSize(newValue);
-    }
+  get [T]() {
+    return [
+      F,
+      this.fitWidth ? `${F}--fit-width` : `${F}--fit-height`,
+      this.placeholderIcon && `${F}--placeholder`
+    ];
   }
-  dismiss() {
-    if (this.dismissable) {
-      this.shown = false;
-      this.update();
-      this.dismissal.dispatch();
-    }
+  get [he]() {
+    return {
+      fontSize: `${this.width * 0.05}rem`,
+      width: `${this.width}rem`,
+      height: `${0.75 * this.width}rem`
+    };
   }
-  show() {
-    if (this.dismissable) {
-      this.shown = true;
-      this.update();
-    }
+  connectedCallback() {
+    this.waitForWidthInterval = window.setInterval(() => {
+      const t = this.getBoundingClientRect();
+      t.width && (this.setWidth(t.width), window.clearInterval(this.waitForWidthInterval), delete this.waitForWidthInterval);
+    }, 1e3 / 60);
   }
-  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
-    })));
+  disconnectedCallback() {
+    this.waitForWidthInterval && window.clearInterval(this.waitForWidthInterval), this.waitForImgHeightInterval && window.clearInterval(this.waitForImgHeightInterval);
   }
-  parseAndValidateMaxSize(maxSize) {
-    try {
-      this.maxSizeBytes = parseFileSize(maxSize);
-    } catch (error) {
-      throw new Error(`Could not parse "${maxSize}" as a file size.`);
-    }
+  render() {
+    return this.src ? this.width ? /* @__PURE__ */ o("img", {
+      src: this.src,
+      alt: this.altText
+    }) : /* @__PURE__ */ o("span", null) : /* @__PURE__ */ o("i", {
+      className: `sps-icon sps-icon-${this.placeholderIcon}`
+    });
   }
-  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);
-      }
+  setWidth(t) {
+    if (t && !this.width) {
+      const s = document.body.parentElement.style.fontSize || "16px", n = Number(s.substr(0, s.length - 2));
+      this.width = t / n;
     }
-    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);
+}, a(q, "displayName", F), a(q, "props", {
+  src: "string",
+  altText: "string",
+  mode: "SpsPhotoDisplayMode",
+  placeholderIcon: "SpsIcon"
+}), q);
+E([
+  p()
+], O.prototype, "src", 2);
+E([
+  p()
+], O.prototype, "altText", 2);
+E([
+  p()
+], O.prototype, "mode", 2);
+E([
+  p()
+], O.prototype, "placeholderIcon", 2);
+E([
+  et()
+], O.prototype, "width", 2);
+E([
+  et()
+], O.prototype, "fitWidth", 2);
+E([
+  xe("img", { refresh: !0 })
+], O.prototype, "image", 1);
+O = E([
+  j({ tag: F })
+], O);
+const ls = {
+  sizing: {
+    label: "Sizing",
+    description: c`
+        <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: c`
+            <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>
+        `
       }
     }
-    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",
+  },
+  displayMode: {
+    label: "Fill vs. Fit",
+    description: c`
+        <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: c`
+            <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: c`
+            <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: c`
+        <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: c`
+                <div className="sfg-row">
+                    <div className="sfg-col-3">
+                        <sps-photo placeholderIcon="photo"></sps-photo>
+                    </div>
+                </div>
+            `
+      },
+      photoAlt: {
+        description: "<p>Photo Alt</p>",
+        jsx: c`
+                <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: c`
+                <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: c`
+                <div className="sfg-row">
+                    <div className="sfg-col-3">
+                        <sps-photo placeholderIcon="group"></sps-photo>
+                    </div>
+                </div>
+            `
+      },
+      company: {
+        description: "<p>Company / Building</p>",
+        jsx: c`
+                <div className="sfg-row">
+                    <div className="sfg-col-3">
+                        <sps-photo placeholderIcon="building"></sps-photo>
+                    </div>
+                </div>
+            `
+      }
+    }
+  }
+}, Ss = {
+  Photos: {
+    components: [O],
+    examples: ls
+  }
+};
+var tt = /* @__PURE__ */ ((e) => (e["7Z"] = "application/x-7z-compressed", e.AAC = "audio/aac", e.ABW = "application/x-abiword", e.ARC = "application/octet-stream", e.AVI = "video/x-msvideo", e.AZW = "application/vnd.amazon.ebook", e.BIN = "application/octet-stream", e.BMP = "image/bmp", e.BZ = "application/x-bzip", e.BZ2 = "application/x-bzip2", e.CSH = "application/x-csh", e.CSS = "text/css", e.CSV = "text/csv,application/vnd.ms-excel", e.DOC = "application/msword", e.DOCX = "application/vnd.openxmlformats-officedocument.wordprocessingml.document", e.EOT = "application/vnd.ms-fontobject", e.EPUB = "application/epub+zip", e.ES = "application/ecmascript", e.FLV = "video/x-flv", e.GIF = "image/gif", e.GZ = "application/x-gzip", e.HTM = "text/html", e.HTML = "text/html", e.ICO = "image/x-icon", e.ICS = "text/calendar", e.JAR = "application/java-archive", e.JPEG = "image/jpeg", e.JPG = "image/jpeg", e.JS = "application/javascript", e.JSON = "application/json", e.M3U = "audio/x-mpequrl", e.MID = "audio/midi", e.MIDI = "audio/midi", e.MOV = "video/quicktime", e.MP3 = "audio/mpeg3", e.MP4 = "video/mp4", e.MPEG = "video/mpeg", e.MPKG = "application/vnd.apple.installer+xml", e.ODP = "application/vnd.oasis.opendocument.presentation", e.ODS = "application/vnd.oasis.opendocument.spreadsheet", e.ODT = "application/vnd.oasis.opendocument.text", e.OGA = "audio/ogg", e.OGV = "video/ogg", e.OGX = "application/ogg", e.OTF = "font/otf", e.PNG = "image/png", e.PDF = "application/pdf", e.PPT = "application/vnd.ms-powerpoint", e.PPTX = "application/vnd.openxmlformats-officedocument.presentationml.presentation", e.RAR = "application/x-rar-compressed", e.RTF = "application/rtf", e.SH = "application/x-sh", e.SVG = "image/svg+xml", e.SWF = "application/x-shockwave-flash", e.TAR = "application/x-tar", e.TIF = "image/tiff", e.TIFF = "image/tiff", e.TS = "application/typescript", e.TTF = "font/ttf", e.TXT = "text/plain", e.VSD = "application/vnd.visio", e.WAV = "audio/wav", e.WEBA = "audio/webm", e.WEBM = "video/webm", e.WEBP = "image/webp", e.WOFF = "font/woff", e.WOFF2 = "font/woff2", e.XHTML = "application/xhtml+xml", e.XLS = "application/vnd.ms-excel", e.XLSX = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", e.XML = "application/xml", e.XUL = "application/vnd.mozilla.xul+xml", e.ZIP = "application/zip", e))(tt || {}), cs = Object.defineProperty, ps = Object.getOwnPropertyDescriptor, v = (e, t, s, n) => {
+  for (var i = n > 1 ? void 0 : n ? ps(t, s) : t, r = e.length - 1, l; r >= 0; r--)
+    (l = e[r]) && (i = (n ? l(t, s, i) : l(i)) || i);
+  return n && i && cs(t, s, i), i;
+};
+const m = "sps-file-upload";
+var G;
+let f = (G = class extends HTMLElement {
+  constructor() {
+    super();
+    a(this, "description");
+    a(this, "multiple");
+    a(this, "shown", !0);
+    a(this, "dismissable");
+    a(this, "processing");
+    a(this, "mini");
+    a(this, "constrainContentWidth");
+    a(this, "downloadLabel");
+    a(this, "acceptExtensions");
+    a(this, "maxSize");
+    a(this, "customRequirement");
+    a(this, "selection");
+    a(this, "dismissal");
+    a(this, "download");
+    a(this, "fileInput");
+    a(this, "files", []);
+    a(this, "accept");
+    a(this, "acceptMIMETypes", /* @__PURE__ */ new Set());
+    a(this, "acceptExtensionsDescription");
+    a(this, "maxSizeBytes");
+    a(this, "active", !1);
+    a(this, "error", !1);
+    a(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 [T]() {
+    return [
+      m,
+      this.active && `${m}--active`,
+      this.error && `${m}--error`,
+      !this.shown && `${m}--hidden`,
+      this.mini && `${m}--mini`,
+      this.constrainContentWidth && `${m}--constrained-content-width`
+    ];
+  }
+  connectedCallback() {
+    this.description = this.description || (this.multiple ? "Files" : "File"), this.acceptExtensions && this.processAcceptExtensions(this.acceptExtensions), this.maxSize && this.parseAndValidateMaxSize(this.maxSize);
+  }
+  attributeChangedCallback(t, s, n) {
+    t === "acceptExtensions" && this.processAcceptExtensions(n), t === "maxSize" && this.parseAndValidateMaxSize(n);
+  }
+  dismiss() {
+    this.dismissable && (this.shown = !1, this.update(), this.dismissal.dispatch());
+  }
+  show() {
+    this.dismissable && (this.shown = !0, this.update());
+  }
+  render({ t }) {
+    const s = this.error ? Se.EXCLAMATION_CIRCLE : Se.UPLOAD_CLOUD, n = (this.multiple ? t("design-system:fileUpload.instructions_plural") : t("design-system:fileUpload.instructions")).split("|");
+    return /* @__PURE__ */ o("div", {
+      "data-fragment": !0
+    }, /* @__PURE__ */ o("div", {
+      className: `${m}__content`
+    }, this.processing ? /* @__PURE__ */ o("div", {
+      "data-fragment": !0
+    }, /* @__PURE__ */ o("i", {
+      className: "sps-spinner sps-spinner--medium",
+      "aria-hidden": "true"
+    }), /* @__PURE__ */ o("div", {
+      className: `${m}__instructions`
+    }, t("design-system:fileUpload.processing"))) : /* @__PURE__ */ o("div", {
+      "data-fragment": !0
+    }, /* @__PURE__ */ o("i", {
+      className: `sps-icon sps-icon-${s} ${m}__icon-primary`,
+      "aria-hidden": "true"
+    }), /* @__PURE__ */ o("div", {
+      className: `${m}__title`
+    }, this.error ? /* @__PURE__ */ o("div", {
+      "data-fragment": !0
+    }, t(
+      this.namesOfUnsupportedFiles.length > 1 ? "design-system:fileUpload.cancelled_plural" : "design-system:fileUpload.cancelled"
+    )) : /* @__PURE__ */ o("div", {
+      "data-fragment": !0
+    }, t("design-system:fileUpload.title", { description: this.description }))), this.error ? /* @__PURE__ */ o("div", {
+      className: `${m}__errored-files`
+    }, new Set(this.namesOfUnsupportedFiles.map((i, r) => {
+      const l = Math.floor(i.length / 2);
+      return /* @__PURE__ */ o("div", {
+        className: `${m}__errored-filename`,
+        key: i
+      }, /* @__PURE__ */ o("span", {
+        className: `${m}__errored-filename-segment`
+      }, i.substr(0, l)), /* @__PURE__ */ o("div", {
+        className: `${m}__errored-filename-segment`
+      }, /* @__PURE__ */ o("span", null, i.substr(l))), r < this.namesOfUnsupportedFiles.length - 1 ? "," : "");
+    }))) : /* @__PURE__ */ o("span", null), /* @__PURE__ */ o("div", {
+      className: `${m}__instructions`
+    }, /* @__PURE__ */ o("div", {
+      "data-fragment": !0
+    }, /* @__PURE__ */ o("span", null, n[0]), /* @__PURE__ */ o("a", {
+      href: "",
+      onClick: this.handleBrowseLinkClick
+    }, n[1]), /* @__PURE__ */ o("span", null, n[2]))), /* @__PURE__ */ o("div", {
+      className: `${m}__requirements`
+    }, this.acceptExtensions ? /* @__PURE__ */ o("span", null, "(", " ", t("design-system:fileUpload.acceptedTypes", { fileTypes: this.acceptExtensionsDescription }), " ", ")") : "", this.maxSize ? /* @__PURE__ */ o("span", null, "(", " ", t("design-system:fileUpload.maximumSize", { size: this.maxSize }), " ", ")") : "", this.customRequirement ? /* @__PURE__ */ o("span", null, " ", this.customRequirement, " ") : ""), this.downloadLabel && /* @__PURE__ */ o("div", {
+      className: `sps-button sps-button--link ${m}__download-button`,
+      onClick: this.handleDownloadButtonClick
+    }, /* @__PURE__ */ o("button", {
+      type: "button"
+    }, /* @__PURE__ */ o("i", {
+      className: "sps-icon sps-icon-download-cloud",
+      "aria-hidden": "true"
+    }), " ", this.downloadLabel)))), this.dismissable && !this.processing && /* @__PURE__ */ o("div", {
+      className: `sps-button sps-button--icon ${m}__close-button`,
+      onClick: this.dismiss
+    }, /* @__PURE__ */ o("button", {
+      type: "button",
+      title: t("design-system:fileUpload.close")
+    }, /* @__PURE__ */ o("i", {
+      className: "sps-icon sps-icon-x",
+      "aria-hidden": "true"
+    }))), /* @__PURE__ */ o("form", null, /* @__PURE__ */ o("input", {
+      type: "file",
+      accept: this.accept || "*/*",
+      multiple: this.multiple || null,
+      onChange: this.handleFileInputChange
+    })));
+  }
+  parseAndValidateMaxSize(t) {
+    try {
+      this.maxSizeBytes = ct(t);
+    } catch {
+      throw new Error(`Could not parse "${t}" as a file size.`);
+    }
+  }
+  processAcceptExtensions(t) {
+    const n = (Array.isArray(t) ? t : t.trim().split(/\s?,\s?/)).map((r) => r.replace(/^\./, "")), i = n.map((r) => `.${r}`.toLowerCase());
+    this.acceptExtensionsDescription = i.map((r, l) => l > 0 && l === i.length - 1 ? `or ${r}` : r).join(i.length > 2 ? ", " : " "), this.acceptMIMETypes.clear();
+    for (const r of n)
+      for (const l of tt[r.toUpperCase()].split(","))
+        this.acceptMIMETypes.add(l);
+    this.accept = i.concat(Array.from(this.acceptMIMETypes)).join(",");
+  }
+  selectFiles(t) {
+    this.namesOfUnsupportedFiles = [];
+    const s = Array.from(t);
+    for (const n of s)
+      this.acceptExtensions && !this.acceptMIMETypes.has(n.type) && this.namesOfUnsupportedFiles.push(n.name), this.maxSize && n.size > this.maxSizeBytes && this.namesOfUnsupportedFiles.indexOf(n.name) === -1 && this.namesOfUnsupportedFiles.push(n.name);
+    this.namesOfUnsupportedFiles.length ? (this.error = !0, this.fileInput.value = null, this.update()) : (this.files = s, this.selection.dispatch(s));
+  }
+  handleDragOver(t) {
+    t.preventDefault(), t.stopPropagation();
+  }
+  handleDragEnter(t) {
+    t.preventDefault(), this.active = !0, this.error = !1, this.update();
+  }
+  handleDragLeave(t) {
+    t.preventDefault(), this.active = !1, this.update();
+  }
+  handleDrop(t) {
+    t.preventDefault(), t.stopPropagation(), this.active = !1, t.dataTransfer.items ? this.selectFiles(Array.from(t.dataTransfer.items).map(
+      (s) => s.getAsFile()
+    )) : this.selectFiles(t.dataTransfer.files), this.update();
+  }
+  handleBrowseLinkClick(t) {
+    t.preventDefault(), this.error = !1, this.update(), this.fileInput.click();
+  }
+  handleDownloadButtonClick() {
+    this.download.dispatch();
+  }
+  handleFileInputChange(t) {
+    t.stopPropagation(), this.selectFiles(t.target.files);
+  }
+}, a(G, "displayName", m), a(G, "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 = {
+  selection: { event: !0, type: "CustomEvent<Array<File>>" },
+  dismissal: { event: !0, type: "CustomEvent<void>" },
+  download: { event: !0, type: "CustomEvent<void>" }
+}), G);
+v([
+  p()
+], f.prototype, "description", 2);
+v([
+  p(Boolean)
+], f.prototype, "multiple", 2);
+v([
+  p(Boolean)
+], f.prototype, "shown", 2);
+v([
+  p(Boolean)
+], f.prototype, "dismissable", 2);
+v([
+  p(Boolean)
+], f.prototype, "processing", 2);
+v([
+  p(Boolean)
+], f.prototype, "mini", 2);
+v([
+  p(Boolean)
+], f.prototype, "constrainContentWidth", 2);
+v([
+  p()
+], f.prototype, "downloadLabel", 2);
+v([
+  p()
+], f.prototype, "acceptExtensions", 2);
+v([
+  p()
+], f.prototype, "maxSize", 2);
+v([
+  p()
+], f.prototype, "customRequirement", 2);
+v([
+  Ne()
+], f.prototype, "selection", 2);
+v([
+  Ne()
+], f.prototype, "dismissal", 2);
+v([
+  Ne()
+], f.prototype, "download", 2);
+v([
+  xe("input[type='file']")
+], f.prototype, "fileInput", 2);
+v([
+  re("dragover")
+], f.prototype, "handleDragOver", 1);
+v([
+  re("dragenter")
+], f.prototype, "handleDragEnter", 1);
+v([
+  re("dragleave")
+], f.prototype, "handleDragLeave", 1);
+v([
+  re("drop")
+], f.prototype, "handleDrop", 1);
+f = v([
+  j({ tag: m })
+], f);
+const Os = {
   basic: {
     label: "Basic File Upload",
-    description: code`
+    description: c`
             <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`
+        react: c`
                     function Component() {
                         const ref = React.useRef()
 
@@ -1615,7 +1432,7 @@ const SpsFileUploadExamples = {
       },
       multiple: {
         description: "<p>Multiple file upload</p>",
-        react: code`
+        react: c`
                     function Component() {
                         const ref = React.useRef()
 
@@ -1644,13 +1461,13 @@ const SpsFileUploadExamples = {
   },
   restrictions: {
     label: "Restrictions",
-    description: code`
+    description: c`
             <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`
+        react: c`
                     function Component() {
                         const ref = React.useRef()
 
@@ -1677,7 +1494,7 @@ const SpsFileUploadExamples = {
       },
       type: {
         description: "<p>File type whitelist</p>",
-        react: code`
+        react: c`
                     function Component() {
                         const ref = React.useRef()
 
@@ -1709,7 +1526,7 @@ const SpsFileUploadExamples = {
       },
       both: {
         description: "<p>Both restrictions</p>",
-        react: code`
+        react: c`
                     function Component() {
                         const ref = React.useRef()
 
@@ -1744,13 +1561,13 @@ const SpsFileUploadExamples = {
   },
   dismissable: {
     label: "Dismissable",
-    description: code`
+    description: c`
             <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`
+        react: c`
                     function Component() {
                         const [showFileUpload, setShowFileUpload] = React.useState(true)
                         const ref = React.useRef()
@@ -1787,592 +1604,177 @@ const SpsFileUploadExamples = {
       }
     }
   },
-  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>
-    `,
+  downloadButton: {
+    label: "Download Button",
+    description: c`
+            <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: {
-      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>
-        `
+      downloadButton: {
+        react: c`
+                    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>
+                        )
+                    }
+                `
       }
     }
   },
-  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>
-    `,
+  mini: {
+    label: "Mini File Upload",
+    description: c`
+            <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: {
-      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>
-            `
+      single: {
+        react: c`
+                    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>
+                        )
+                    }
+                `
       }
     }
-  }
-};
-const MANIFEST = {
-  "File Upload": {
-    components: [SpsFileUploadComponent],
-    examples: SpsFileUploadExamples
   },
-  "Tabbed Navigation": {
-    components: [SpsNavTabComponent, SpsNavTabSetComponent],
-    examples: SpsNavTabsExamples
-  },
-  Photos: {
-    components: [SpsPhotoComponent],
-    examples: SpsPhotoExamples
+  constrainContentWidth: {
+    label: "Constrain Content Width",
+    description: c`
+            <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: c`
+                    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$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;
+var ds = Object.defineProperty, hs = Object.getOwnPropertyDescriptor, A = (e, t, s, n) => {
+  for (var i = n > 1 ? void 0 : n ? hs(t, s) : t, r = e.length - 1, l; r >= 0; r--)
+    (l = e[r]) && (i = (n ? l(t, s, i) : l(i)) || i);
+  return n && i && ds(t, s, i), i;
 };
-const CPT_NAME$1 = "sps-insight-card";
-let SpsInsightCardComponent = class extends HTMLElement {
+const _ = "sps-insight-card";
+var X;
+let y = (X = class extends HTMLElement {
   constructor() {
     super(...arguments);
-    this.kind = SpsInsightCardKind.GENERAL;
-  }
-  get [ClassBindings]() {
+    a(this, "icon");
+    a(this, "kind", ot.GENERAL);
+    a(this, "title");
+    a(this, "metric");
+    a(this, "partnerCount");
+    a(this, "totalPartners");
+    a(this, "secondary");
+    a(this, "content");
+    a(this, "detail");
+  }
+  get [T]() {
     return [
-      CPT_NAME$1,
-      `${CPT_NAME$1}--${this.kind}`,
-      this.detail && this.detail.children.length ? `${CPT_NAME$1}--has-detail` : null
+      _,
+      `${_}--${this.kind}`,
+      this.detail && this.detail.children.length ? `${_}--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`,
+    const s = /* @__PURE__ */ o("div", {
+      className: `${_}__metric-count`
+    }, this.metric), n = /* @__PURE__ */ o("div", {
+      className: `${_}__description`
+    }, /* @__PURE__ */ o("div", {
+      className: `${_}__title`,
       style: { "-webkit-box-orient": "vertical" }
-    }, this.title), /* @__PURE__ */ h("div", {
-      className: `${CPT_NAME$1}__detail`
-    }, this.content));
-    const [
-      count,
-      ofText,
-      total
+    }, this.title), /* @__PURE__ */ o("div", {
+      className: `${_}__detail`
+    }, this.content)), [
+      i,
+      r,
+      l
     ] = (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", {
+    return /* @__PURE__ */ o("div", {
+      "data-fragment": !0
+    }, /* @__PURE__ */ o("div", {
+      className: `${_}__body`
+    }, this.icon ? /* @__PURE__ */ o("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`
+    }) : /* @__PURE__ */ o("i", {
+      className: `sps-icon sps-icon-${lt[this.kind]}`
+    }), s, n), this.partnerCount && /* @__PURE__ */ o("div", {
+      className: `${_}__partner-count`
+    }, this.partnerCount === this.totalPartners ? /* @__PURE__ */ o("div", null, t("design-system:insightCard.all")) : /* @__PURE__ */ o("div", {
+      "data-fragment": !0
+    }, /* @__PURE__ */ o("div", null, i), /* @__PURE__ */ o("div", null, r), /* @__PURE__ */ o("div", null, l)), /* @__PURE__ */ o("div", {
+      className: `${_}__partners-text`
     }, t("design-system:insightCard.partners"))));
   }
-};
-SpsInsightCardComponent.displayName = CPT_NAME$1;
-SpsInsightCardComponent.props = {
+}, a(X, "displayName", _), a(X, "props", {
   icon: "SpsIcon",
   kind: "SpsInsightCardKind",
   title: "string",
@@ -2380,98 +1782,91 @@ SpsInsightCardComponent.props = {
   partnerCount: "number",
   totalPartners: "number",
   secondary: "boolean"
+}), X);
+A([
+  p()
+], y.prototype, "icon", 2);
+A([
+  p()
+], y.prototype, "kind", 2);
+A([
+  p()
+], y.prototype, "title", 2);
+A([
+  p()
+], y.prototype, "metric", 2);
+A([
+  p()
+], y.prototype, "partnerCount", 2);
+A([
+  p()
+], y.prototype, "totalPartners", 2);
+A([
+  p()
+], y.prototype, "secondary", 2);
+A([
+  _e()
+], y.prototype, "content", 2);
+A([
+  xe(`.${_}__detail`)
+], y.prototype, "detail", 2);
+y = A([
+  j({ tag: _ })
+], y);
+var us = Object.defineProperty, fs = Object.getOwnPropertyDescriptor, ye = (e, t, s, n) => {
+  for (var i = n > 1 ? void 0 : n ? fs(t, s) : t, r = e.length - 1, l; r >= 0; r--)
+    (l = e[r]) && (i = (n ? l(t, s, i) : l(i)) || i);
+  return n && i && us(t, s, i), i;
 };
-__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 {
+const D = "sps-insights";
+var K;
+let te = (K = class extends HTMLElement {
   constructor() {
     super();
-    this.content = [];
-    this.showAdditionalInsights = false;
+    a(this, "content", []);
+    a(this, "details");
+    a(this, "showAdditionalInsights", !1);
     this.toggleAdditionalInsights = this.toggleAdditionalInsights.bind(this);
   }
-  get [ClassBindings]() {
+  get [T]() {
     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
+      D,
+      this.showAdditionalInsights && `${D}--show-additional`,
+      this.details && Array.from(this.details).every((t) => !t.textContent) ? `${D}--no-details` : null,
+      this.content.length === 6 ? `${D}--break-4` : null,
+      this.content.length === 7 ? `${D}--break-5` : null,
+      this.content.length === 8 ? `${D}--break-5` : null
     ];
   }
   toggleAdditionalInsights() {
-    this.showAdditionalInsights = !this.showAdditionalInsights;
-    this.update();
+    this.showAdditionalInsights = !this.showAdditionalInsights, this.update();
   }
   render() {
-    return /* @__PURE__ */ h("div", {
-      "data-fragment": true
-    }, this.content, this.content.length > 10 && /* @__PURE__ */ h("div", {
+    return /* @__PURE__ */ o("div", {
+      "data-fragment": !0
+    }, this.content, this.content.length > 10 && /* @__PURE__ */ o("div", {
       className: "sps-button sps-button--link",
       onClick: this.toggleAdditionalInsights
-    }, /* @__PURE__ */ h("button", {
+    }, /* @__PURE__ */ o("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 = {
+}, a(K, "displayName", D), a(K, "props", {}), K);
+ye([
+  _e()
+], te.prototype, "content", 2);
+ye([
+  is(".sps-insight-card__detail")
+], te.prototype, "details", 2);
+te = ye([
+  j({ tag: D })
+], te);
+const As = {
   basic: {
     label: "Basic Insight Cards",
     examples: {
       basic: {
-        jsx: code`
+        jsx: c`
             <sps-insights>
                 <sps-insight-card kind="general"
                     metric="1234"
@@ -2502,7 +1897,7 @@ const SpsInsightCardExamples = {
     label: "With Details",
     examples: {
       details: {
-        jsx: code`
+        jsx: c`
             <sps-insights>
                 <sps-insight-card kind="general"
                     metric="1234"
@@ -2555,7 +1950,7 @@ const SpsInsightCardExamples = {
     label: "Partner Count",
     examples: {
       partner_count: {
-        jsx: code`
+        jsx: c`
             <sps-insights>
                 <sps-insight-card kind="general"
                     metric="1234"
@@ -2596,7 +1991,7 @@ const SpsInsightCardExamples = {
     label: "10+ Insight Cards",
     examples: {
       expansion: {
-        jsx: code`
+        jsx: c`
             <sps-insights>
                 <sps-insight-card kind="general"
                     metric="1234"
@@ -2711,13 +2106,13 @@ const SpsInsightCardExamples = {
   },
   events: {
     label: "Adding a click handler",
-    description: code`
+    description: c`
           <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`
+        react: c`
                   function Component() {
                       function handleClick() {
                           window.alert("Insight card clicked");
@@ -2757,7 +2152,7 @@ const SpsInsightCardExamples = {
     label: "Using alternate icons",
     examples: {
       basic: {
-        react: code`
+        react: c`
                     function DemoComponent() {
                         return (
                             <sps-insights>
@@ -2799,4 +2194,155 @@ const SpsInsightCardExamples = {
     }
   }
 };
-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 };
+var gs = Object.defineProperty, ms = Object.getOwnPropertyDescriptor, L = (e, t, s, n) => {
+  for (var i = n > 1 ? void 0 : n ? ms(t, s) : t, r = e.length - 1, l; r >= 0; r--)
+    (l = e[r]) && (i = (n ? l(t, s, i) : l(i)) || i);
+  return n && i && gs(t, s, i), i;
+}, Q;
+let P = (Q = class extends HTMLElement {
+  constructor() {
+    super(...arguments);
+    a(this, "active", !1);
+    a(this, "label", "");
+    a(this, "icon");
+    a(this, "tag", "");
+    a(this, "href");
+    a(this, "target");
+  }
+  get [T]() {
+    return [
+      "sps-tabbed-nav__nav-item",
+      this.active && "sps-tabbed-nav__nav-item--active"
+    ];
+  }
+  render() {
+    return /* @__PURE__ */ o("a", {
+      href: this.href,
+      target: this.target,
+      className: "sps-tabbed-nav__nav-item-link",
+      tabIndex: 0
+    }, this.icon && /* @__PURE__ */ o("i", {
+      className: `sps-icon sps-icon-${this.icon}`
+    }), this.label && /* @__PURE__ */ o("span", null, this.label), this.tag && /* @__PURE__ */ o("span", {
+      className: "sps-tag sps-tag--default"
+    }, this.tag));
+  }
+}, a(Q, "displayName", "sps-nav-tab"), a(Q, "props", {
+  active: "boolean",
+  label: "string",
+  icon: "SpsIcon",
+  tag: "string",
+  href: "string",
+  target: "string"
+}), Q);
+L([
+  p()
+], P.prototype, "active", 2);
+L([
+  p()
+], P.prototype, "label", 2);
+L([
+  p()
+], P.prototype, "icon", 2);
+L([
+  p()
+], P.prototype, "tag", 2);
+L([
+  p()
+], P.prototype, "href", 2);
+L([
+  p()
+], P.prototype, "target", 2);
+P = L([
+  j({ tag: "sps-nav-tab" })
+], P);
+var vs = Object.defineProperty, bs = Object.getOwnPropertyDescriptor, st = (e, t, s, n) => {
+  for (var i = n > 1 ? void 0 : n ? bs(t, s) : t, r = e.length - 1, l; r >= 0; r--)
+    (l = e[r]) && (i = (n ? l(t, s, i) : l(i)) || i);
+  return n && i && vs(t, s, i), i;
+}, Z;
+let ue = (Z = class extends HTMLElement {
+  constructor() {
+    super(...arguments);
+    a(this, "content", []);
+  }
+  render() {
+    return /* @__PURE__ */ o("nav", {
+      className: "sps-tabbed-nav"
+    }, this.content);
+  }
+}, a(Z, "displayName", "sps-nav-tab-set"), a(Z, "props", {}), Z);
+st([
+  _e()
+], ue.prototype, "content", 2);
+ue = st([
+  j({ tag: "sps-nav-tab-set" })
+], ue);
+const Ds = {
+  basic: {
+    label: "Basic Navigation Tabs",
+    description: c`
+          <p>Navigation tabs native web component</p>
+        `,
+    examples: {
+      basic: {
+        react: c`
+                    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>
+                        )
+                    }
+                `
+      }
+    }
+  }
+};
+export {
+  Ie as AttrBindings,
+  T as ClassBindings,
+  j as Component,
+  _e as Content,
+  Ne as EventDispatcher,
+  re as EventListener,
+  Ss as MANIFEST,
+  tt as MIMEType,
+  p as Prop,
+  xe as QuerySelector,
+  is as QuerySelectorAll,
+  f as SpsFileUploadComponent,
+  Os as SpsFileUploadExamples,
+  y as SpsInsightCardComponent,
+  As as SpsInsightCardExamples,
+  te as SpsInsightsComponent,
+  P as SpsNavTabComponent,
+  ue as SpsNavTabSetComponent,
+  Ds as SpsNavTabsExamples,
+  O as SpsPhotoComponent,
+  os as SpsPhotoDisplayMode,
+  ls as SpsPhotoExamples,
+  he as StyleBindings,
+  et as Watch,
+  o as h,
+  ys as namespaceOverrideRegistrar,
+  xs as register,
+  Ns as webComponentsUseI18n
+};