@spscommerce/ds-web-components 0.0.0-20260319-8230915ce

package/dist/lib/index.js

@@ -0,0 +1,2227 @@
+import { SpsIcon as Ue, SpsInsightCardKind as $t, SpsInsightCardIcons as Bt } from "@spscommerce/ds-shared";
+import { parseFileSize as jt, code as u } from "@spscommerce/utils";
+import { i18nWoodland as P } from "@spscommerce/i18n";
+const is = {
+  /*
+   * 'Insight Cards': {
+   *     components: [SpsInsightCardComponent, SpsInsightsComponent],
+   *     examples: SpsInsightCardExamples,
+   * },
+   *
+   * "Tabbed Navigation": {
+   *   components: [SpsNavTabComponent, SpsNavTabSetComponent],
+   *   examples: SpsNavTabsExamples,
+   * },
+   *
+   * Photos: {
+   * components: [SpsPhotoComponent],
+   * examples: SpsPhotoExamples,
+   *},
+   */
+};
+var g = {}, ze;
+function Tt() {
+  if (ze) return g;
+  ze = 1, Object.defineProperty(g, "__esModule", { value: !0 });
+  /**
+   * @license
+   * Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
+   *
+   * Licensed under the Apache License, Version 2.0 (the "License");
+   * you may not use this file except in compliance with the License.
+   * You may obtain a copy of the License at
+   *
+   *      http://www.apache.org/licenses/LICENSE-2.0
+   *
+   * Unless required by applicable law or agreed to in writing, software
+   * distributed under the License is distributed on an "AS-IS" BASIS,
+   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   * See the License for the specific language governing permissions and
+   * limitations under the License.
+   */
+  var e = {
+    default: "__default"
+  };
+  /**
+   * @license
+   * Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
+   *
+   * Licensed under the Apache License, Version 2.0 (the "License");
+   * you may not use this file except in compliance with the License.
+   * You may obtain a copy of the License at
+   *
+   *      http://www.apache.org/licenses/LICENSE-2.0
+   *
+   * Unless required by applicable law or agreed to in writing, software
+   * distributed under the License is distributed on an "AS-IS" BASIS,
+   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   * See the License for the specific language governing permissions and
+   * limitations under the License.
+   */
+  var s = Object.prototype.hasOwnProperty;
+  function i() {
+  }
+  i.prototype = /* @__PURE__ */ Object.create(null);
+  function o(t, n) {
+    return s.call(t, n);
+  }
+  function r() {
+    return new i();
+  }
+  function p(t, n) {
+    for (; t.length > n; )
+      t.pop();
+  }
+  /**
+   * @license
+   * Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
+   *
+   * Licensed under the Apache License, Version 2.0 (the "License");
+   * you may not use this file except in compliance with the License.
+   * You may obtain a copy of the License at
+   *
+   *      http://www.apache.org/licenses/LICENSE-2.0
+   *
+   * Unless required by applicable law or agreed to in writing, software
+   * distributed under the License is distributed on an "AS-IS" BASIS,
+   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   * See the License for the specific language governing permissions and
+   * limitations under the License.
+   */
+  function f(t) {
+    if (t.lastIndexOf("xml:", 0) === 0)
+      return "http://www.w3.org/XML/1998/namespace";
+    if (t.lastIndexOf("xlink:", 0) === 0)
+      return "http://www.w3.org/1999/xlink";
+  }
+  function V(t, n, a) {
+    if (a == null)
+      t.removeAttribute(n);
+    else {
+      var l = f(n);
+      l ? t.setAttributeNS(l, n, String(a)) : t.setAttribute(n, String(a));
+    }
+  }
+  function xe(t, n, a) {
+    t[n] = a;
+  }
+  function Ye(t, n, a) {
+    n.indexOf("-") >= 0 ? t.setProperty(n, a) : t[n] = a;
+  }
+  function Je(t, n, a) {
+    if (typeof a == "string")
+      t.style.cssText = a;
+    else {
+      t.style.cssText = "";
+      var l = t.style;
+      for (var d in a)
+        o(a, d) && Ye(l, d, a[d]);
+    }
+  }
+  function Me(t, n, a) {
+    var l = typeof a;
+    l === "object" || l === "function" ? xe(t, n, a) : V(t, n, a);
+  }
+  var Z = r();
+  Z[e.default] = Me, Z.style = Je;
+  function Y(t, n, a) {
+    var l = Z[n] || Z[e.default];
+    l(t, n, a);
+  }
+  /**
+   * @license
+   * Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
+   *
+   * Licensed under the Apache License, Version 2.0 (the "License");
+   * you may not use this file except in compliance with the License.
+   * You may obtain a copy of the License at
+   *
+   *      http://www.apache.org/licenses/LICENSE-2.0
+   *
+   * Unless required by applicable law or agreed to in writing, software
+   * distributed under the License is distributed on an "AS-IS" BASIS,
+   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   * See the License for the specific language governing permissions and
+   * limitations under the License.
+   */
+  var J = !1, pe = !1;
+  function ye(t, n) {
+    if (!n)
+      throw new Error("Cannot call " + t + "() unless in patch.");
+  }
+  function et(t, n) {
+    if (t !== n) {
+      for (var a = t, l = []; a && a !== n; )
+        l.push(a.nodeName.toLowerCase()), a = a.parentNode;
+      throw new Error(`One or more tags were not closed:
+` + l.join(`
+`));
+    }
+  }
+  function tt(t) {
+    t || console.warn("patchOuter requires the node have a parent if there is a key.");
+  }
+  function W(t) {
+    if (J)
+      throw new Error(t + "() can not be called between elementOpenStart() and elementOpenEnd().");
+  }
+  function Se(t) {
+    if (pe)
+      throw new Error(t + "() may not be called inside an element that has called skip().");
+  }
+  function de(t) {
+    if (!J)
+      throw new Error(t + "() can only be called after calling elementOpenStart().");
+  }
+  function st() {
+    if (J)
+      throw new Error("elementOpenEnd() must be called after calling elementOpenStart().");
+  }
+  function nt(t, n) {
+    if (t !== n)
+      throw new Error('Received a call to close "' + n + '" but "' + t + '" was open.');
+  }
+  function it(t, n) {
+    if (n !== null)
+      throw new Error(t + "() must come before any child declarations inside the current element.");
+  }
+  function rt(t, n, a, l) {
+    ne(t);
+    var d = t, h = n, y = h.nextSibling === a && h.previousSibling === l, C = h.nextSibling === d.nextSibling && h.previousSibling === l, S = h === d;
+    if (!y && !C && !S)
+      throw new Error("There must be exactly one top level call corresponding to the patched element.");
+  }
+  function te(t) {
+    var n = J;
+    return J = t, n;
+  }
+  function se(t) {
+    var n = pe;
+    return pe = t, n;
+  }
+  function ne(t) {
+    if (process.env.NODE_ENV !== "production" && !t)
+      throw new Error("Expected value to be defined");
+    return t;
+  }
+  /**
+   * @license
+   * Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
+   *
+   * Licensed under the Apache License, Version 2.0 (the "License");
+   * you may not use this file except in compliance with the License.
+   * You may obtain a copy of the License at
+   *
+   *      http://www.apache.org/licenses/LICENSE-2.0
+   *
+   * Unless required by applicable law or agreed to in writing, software
+   * distributed under the License is distributed on an "AS-IS" BASIS,
+   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   * See the License for the specific language governing permissions and
+   * limitations under the License.
+   */
+  var M = {
+    nodesCreated: null,
+    nodesDeleted: null
+  };
+  /**
+   * @license
+   * Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
+   *
+   * Licensed under the Apache License, Version 2.0 (the "License");
+   * you may not use this file except in compliance with the License.
+   * You may obtain a copy of the License at
+   *
+   *      http://www.apache.org/licenses/LICENSE-2.0
+   *
+   * Unless required by applicable law or agreed to in writing, software
+   * distributed under the License is distributed on an "AS-IS" BASIS,
+   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   * See the License for the specific language governing permissions and
+   * limitations under the License.
+   */
+  var at = (
+    /** @class */
+    function() {
+      function t() {
+        this.created = [], this.deleted = [];
+      }
+      return t.prototype.markCreated = function(n) {
+        this.created.push(n);
+      }, t.prototype.markDeleted = function(n) {
+        this.deleted.push(n);
+      }, t.prototype.notifyChanges = function() {
+        M.nodesCreated && this.created.length > 0 && M.nodesCreated(this.created), M.nodesDeleted && this.deleted.length > 0 && M.nodesDeleted(this.deleted);
+      }, t;
+    }()
+  );
+  /**
+   * @license
+   * Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
+   *
+   * Licensed under the Apache License, Version 2.0 (the "License");
+   * you may not use this file except in compliance with the License.
+   * You may obtain a copy of the License at
+   *
+   *      http://www.apache.org/licenses/LICENSE-2.0
+   *
+   * Unless required by applicable law or agreed to in writing, software
+   * distributed under the License is distributed on an "AS-IS" BASIS,
+   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   * See the License for the specific language governing permissions and
+   * limitations under the License.
+   */
+  function ot(t) {
+    return t.nodeType === 11 || t.nodeType === 9;
+  }
+  function ue(t) {
+    return t.nodeType === 1;
+  }
+  function lt(t) {
+    return t.nodeType === 3;
+  }
+  function ct(t, n) {
+    for (var a = [], l = t; l !== n; ) {
+      var d = l;
+      a.push(d), l = d.parentNode;
+    }
+    return a;
+  }
+  var pt = (
+    // tslint:disable-next-line:no-any b/79476176
+    Node.prototype.getRootNode || function() {
+      for (var t = this, n = t; t; )
+        n = t, t = t.parentNode;
+      return n;
+    }
+  );
+  function dt(t) {
+    var n = pt.call(t);
+    return ot(n) ? n.activeElement : null;
+  }
+  function ut(t, n) {
+    var a = dt(t);
+    return !a || !t.contains(a) ? [] : ct(a, n);
+  }
+  function ht(t, n, a) {
+    for (var l = n.nextSibling, d = a; d !== null && d !== n; ) {
+      var h = d.nextSibling;
+      t.insertBefore(d, l), d = h;
+    }
+  }
+  /**
+   * @license
+   * Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
+   *
+   * Licensed under the Apache License, Version 2.0 (the "License");
+   * you may not use this file except in compliance with the License.
+   * You may obtain a copy of the License at
+   *
+   *      http://www.apache.org/licenses/LICENSE-2.0
+   *
+   * Unless required by applicable law or agreed to in writing, software
+   * distributed under the License is distributed on an "AS-IS" BASIS,
+   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   * See the License for the specific language governing permissions and
+   * limitations under the License.
+   */
+  var ft = (
+    /** @class */
+    function() {
+      function t(n, a, l) {
+        this._attrsArr = null, this.staticsApplied = !1, this.nameOrCtor = n, this.key = a, this.text = l;
+      }
+      return t.prototype.hasEmptyAttrsArr = function() {
+        var n = this._attrsArr;
+        return !n || !n.length;
+      }, t.prototype.getAttrsArr = function(n) {
+        return this._attrsArr || (this._attrsArr = new Array(n));
+      }, t;
+    }()
+  );
+  function he(t, n, a, l) {
+    var d = new ft(n, a, l);
+    return t.__incrementalDOMData = d, d;
+  }
+  function H(t, n) {
+    return Ae(t, n);
+  }
+  function gt(t) {
+    return !!t.__incrementalDOMData;
+  }
+  function mt(t) {
+    return ne(t.__incrementalDOMData), H(t).key;
+  }
+  function Ae(t, n) {
+    if (t.__incrementalDOMData)
+      return t.__incrementalDOMData;
+    var a = ue(t) ? t.localName : t.nodeName, l = ue(t) ? t.getAttribute("key") || n : null, d = lt(t) ? t.data : void 0, h = he(t, a, l, d);
+    return ue(t) && vt(t, h), h;
+  }
+  function Oe(t) {
+    Ae(t);
+    for (var n = t.firstChild; n; n = n.nextSibling)
+      Oe(n);
+  }
+  function De(t) {
+    t.__incrementalDOMData = null;
+    for (var n = t.firstChild; n; n = n.nextSibling)
+      De(n);
+  }
+  function vt(t, n) {
+    var a = t.attributes, l = a.length;
+    if (l)
+      for (var d = n.getAttrsArr(l), h = 0, y = 0; h < l; h += 1, y += 2) {
+        var C = a[h], S = C.name, w = C.value;
+        d[y] = S, d[y + 1] = w;
+      }
+  }
+  /**
+   * @license
+   * Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
+   *
+   * Licensed under the Apache License, Version 2.0 (the "License");
+   * you may not use this file except in compliance with the License.
+   * You may obtain a copy of the License at
+   *
+   *      http://www.apache.org/licenses/LICENSE-2.0
+   *
+   * Unless required by applicable law or agreed to in writing, software
+   * distributed under the License is distributed on an "AS-IS" BASIS,
+   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   * See the License for the specific language governing permissions and
+   * limitations under the License.
+   */
+  function bt(t, n) {
+    return t === "svg" ? "http://www.w3.org/2000/svg" : t === "math" ? "http://www.w3.org/1998/Math/MathML" : n == null || H(n).nameOrCtor === "foreignObject" ? null : n.namespaceURI;
+  }
+  function Ct(t, n, a, l) {
+    var d;
+    if (typeof a == "function")
+      d = new a();
+    else {
+      var h = bt(a, n);
+      h ? d = t.createElementNS(h, a) : d = t.createElement(a);
+    }
+    return he(d, a, l), d;
+  }
+  function wt(t) {
+    var n = t.createTextNode("");
+    return he(n, "#text", null), n;
+  }
+  /**
+   * @license
+   * Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
+   *
+   * Licensed under the Apache License, Version 2.0 (the "License");
+   * you may not use this file except in compliance with the License.
+   * You may obtain a copy of the License at
+   *
+   *      http://www.apache.org/licenses/LICENSE-2.0
+   *
+   * Unless required by applicable law or agreed to in writing, software
+   * distributed under the License is distributed on an "AS-IS" BASIS,
+   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   * See the License for the specific language governing permissions and
+   * limitations under the License.
+   */
+  var q = null, v = null, x = null, T = null, ie = [], re = [];
+  function ae() {
+    return re;
+  }
+  function Pe(t) {
+    var n = function(a, l, d) {
+      var h = q, y = T, C = ie, S = re, w = v, O = x, F = !1, le = !1;
+      q = new at(), T = a.ownerDocument, re = [], x = a.parentNode, ie = ut(a, x), process.env.NODE_ENV !== "production" && (F = te(!1), le = se(!1));
+      try {
+        var Rt = t(a, l, d);
+        return process.env.NODE_ENV !== "production" && st(), Rt;
+      } finally {
+        T = y, re = S, v = w, x = O, ie = C, q.notifyChanges(), te(F), se(le), q = h;
+      }
+    };
+    return n;
+  }
+  var Ee = Pe(function(t, n, a) {
+    return v = t, Fe(), n(a), Re(), process.env.NODE_ENV !== "production" && et(v, t), t;
+  }), _t = Pe(function(t, n, a) {
+    var l = { nextSibling: t }, d = null, h = null;
+    return process.env.NODE_ENV !== "production" && (d = t.nextSibling, h = t.previousSibling), v = l, n(a), process.env.NODE_ENV !== "production" && (tt(x), rt(l, v, d, h)), x && Le(x, oe(), t.nextSibling), l === v ? null : v;
+  });
+  function ke(t, n, a) {
+    var l = H(t, a);
+    return n == l.nameOrCtor && a == l.key;
+  }
+  function Nt(t, n, a) {
+    if (!t)
+      return null;
+    if (ke(t, n, a))
+      return t;
+    if (a) {
+      for (; t = t.nextSibling; )
+        if (ke(t, n, a))
+          return t;
+    }
+    return null;
+  }
+  function xt(t, n) {
+    var a;
+    return t === "#text" ? a = wt(T) : a = Ct(T, x, t, n), q.markCreated(a), a;
+  }
+  function Ie(t, n) {
+    var a = Nt(v, t, n), l = a || xt(t, n);
+    l !== v && (ie.indexOf(l) >= 0 ? ht(x, l, v) : x.insertBefore(l, v), v = l);
+  }
+  function Le(t, n, a) {
+    for (var l = t, d = n; d !== a; ) {
+      var h = d.nextSibling;
+      l.removeChild(d), q.markDeleted(d), d = h;
+    }
+  }
+  function Fe() {
+    x = v, v = null;
+  }
+  function oe() {
+    return v ? v.nextSibling : x.firstChild;
+  }
+  function fe() {
+    v = oe();
+  }
+  function Re() {
+    Le(x, oe(), null), v = x, x = x.parentNode;
+  }
+  function $e(t, n) {
+    return fe(), Ie(t, n), Fe(), x;
+  }
+  function Be() {
+    return process.env.NODE_ENV !== "production" && se(!1), Re(), v;
+  }
+  function yt() {
+    return fe(), Ie("#text", null), v;
+  }
+  function St() {
+    return process.env.NODE_ENV !== "production" && (ye("currentElement", T), W("currentElement")), x;
+  }
+  function At() {
+    return process.env.NODE_ENV !== "production" && (ye("currentPointer", T), W("currentPointer")), oe();
+  }
+  function Ot() {
+    process.env.NODE_ENV !== "production" && (it("skip", v), se(!0)), v = x.lastChild;
+  }
+  /**
+   * @license
+   * Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
+   *
+   * Licensed under the Apache License, Version 2.0 (the "License");
+   * you may not use this file except in compliance with the License.
+   * You may obtain a copy of the License at
+   *
+   *      http://www.apache.org/licenses/LICENSE-2.0
+   *
+   * Unless required by applicable law or agreed to in writing, software
+   * distributed under the License is distributed on an "AS-IS" BASIS,
+   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   * See the License for the specific language governing permissions and
+   * limitations under the License.
+   */
+  var je = 3, I = r();
+  function Dt(t, n, a) {
+    if (n.staticsApplied = !0, !(!a || !a.length)) {
+      if (n.hasEmptyAttrsArr()) {
+        for (var l = 0; l < a.length; l += 2)
+          Y(t, a[l], a[l + 1]);
+        return;
+      }
+      for (var l = 0; l < a.length; l += 2)
+        I[a[l]] = l + 1;
+      for (var d = n.getAttrsArr(0), h = 0, l = 0; l < d.length; l += 2) {
+        var y = d[l], C = d[l + 1], S = I[y];
+        if (S) {
+          a[S] === C && delete I[y];
+          continue;
+        }
+        d[h] = y, d[h + 1] = C, h += 2;
+      }
+      p(d, h);
+      for (var y in I)
+        Y(t, y, a[I[y]]), delete I[y];
+    }
+  }
+  function ge(t, n, a) {
+    process.env.NODE_ENV !== "production" && (W("elementOpen"), Se("elementOpen"));
+    var l = $e(t, n), d = H(l);
+    d.staticsApplied || Dt(l, d, a);
+    var h = Math.max(0, arguments.length - je), y = d.hasEmptyAttrsArr();
+    if (!h && y)
+      return l;
+    for (var C = d.getAttrsArr(h), S = je, w = 0; S < arguments.length; S += 2, w += 2) {
+      var O = arguments[S];
+      if (y)
+        C[w] = O;
+      else if (C[w] !== O)
+        break;
+      var F = arguments[S + 1];
+      (y || C[w + 1] !== F) && (C[w + 1] = F, Y(l, O, F));
+    }
+    if (S < arguments.length || w < C.length) {
+      for (var le = w; w < C.length; w += 2)
+        I[C[w]] = C[w + 1];
+      for (w = le; S < arguments.length; S += 2, w += 2) {
+        var O = arguments[S], F = arguments[S + 1];
+        I[O] !== F && Y(l, O, F), C[w] = O, C[w + 1] = F, delete I[O];
+      }
+      p(C, w);
+      for (var O in I)
+        Y(l, O, void 0), delete I[O];
+    }
+    return l;
+  }
+  function Pt(t, n, a) {
+    var l = ae();
+    process.env.NODE_ENV !== "production" && (W("elementOpenStart"), te(!0)), l[0] = t, l[1] = n, l[2] = a;
+  }
+  function Et(t) {
+    var n = ae();
+    process.env.NODE_ENV !== "production" && (de("key"), ne(n)), n[1] = t;
+  }
+  function kt(t, n) {
+    var a = ae();
+    process.env.NODE_ENV !== "production" && de("attr"), a.push(t), a.push(n);
+  }
+  function It() {
+    var t = ae();
+    process.env.NODE_ENV !== "production" && (de("elementOpenEnd"), te(!1)), ne(t);
+    var n = ge.apply(null, t);
+    return p(t, 0), n;
+  }
+  function Te(t) {
+    process.env.NODE_ENV !== "production" && W("elementClose");
+    var n = Be();
+    return process.env.NODE_ENV !== "production" && nt(H(n).nameOrCtor, t), n;
+  }
+  function Lt(t, n, a) {
+    return ge.apply(null, arguments), Te(t);
+  }
+  function Ft(t) {
+    process.env.NODE_ENV !== "production" && (W("text"), Se("text"));
+    var n = yt(), a = H(n);
+    if (a.text !== t) {
+      a.text = t;
+      for (var l = t, d = 1; d < arguments.length; d += 1) {
+        var h = arguments[d];
+        l = h(l);
+      }
+      n.data = l;
+    }
+    return n;
+  }
+  /**
+   * @license
+   * Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
+   *
+   * Licensed under the Apache License, Version 2.0 (the "License");
+   * you may not use this file except in compliance with the License.
+   * You may obtain a copy of the License at
+   *
+   *      http://www.apache.org/licenses/LICENSE-2.0
+   *
+   * Unless required by applicable law or agreed to in writing, software
+   * distributed under the License is distributed on an "AS-IS" BASIS,
+   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   * See the License for the specific language governing permissions and
+   * limitations under the License.
+   */
+  return g.applyAttr = V, g.applyProp = xe, g.attributes = Z, g.close = Be, g.currentElement = St, g.currentPointer = At, g.open = $e, g.patch = Ee, g.patchInner = Ee, g.patchOuter = _t, g.skip = Ot, g.skipNode = fe, g.getKey = mt, g.clearCache = De, g.importNode = Oe, g.isDataInitialized = gt, g.notifications = M, g.symbols = e, g.attr = kt, g.elementClose = Te, g.elementOpen = ge, g.elementOpenEnd = It, g.elementOpenStart = Pt, g.elementVoid = Lt, g.text = Ft, g.key = Et, g;
+}
+var A = Tt();
+function Ve(e) {
+  let s = A.currentPointer();
+  return s instanceof Comment && s.data !== e ? s.data = e : (s = document.createComment(e), A.currentElement().appendChild(s)), A.skipNode(), s;
+}
+const U = Symbol("ComponentMetadata"), E = Object.freeze({
+  has(e, s) {
+    return !!(e[U] && Object.prototype.hasOwnProperty.call(e[U], s));
+  },
+  add(e, s) {
+    e[U] ? Object.assign(e[U], s) : e[U] = s;
+  },
+  get(e, s, i) {
+    return e[U] && e[U][s] || i;
+  }
+}), We = Symbol("ds-web-components:pragma:listeners-attached"), qe = "idom-pragma:content-begin", me = "idom-pragma:content-end";
+function ve(e) {
+  for (const s of e)
+    if (typeof s == "function")
+      s();
+    else if (typeof s == "string")
+      A.text(s);
+    else if (s instanceof Set)
+      ve(Array.from(s));
+    else if (Array.isArray(s) && s.length > 0) {
+      let i = A.currentPointer();
+      if (Ve(qe), i === null) {
+        const o = A.currentElement();
+        for (let r = 0; r < s.length; r += 1)
+          o.contains(s[r]) || o.appendChild(s[r]), A.skipNode();
+      }
+      for (; i && i.data !== me; )
+        A.skipNode(), i = A.currentPointer();
+      Ve(me);
+    }
+}
+function c(e, s, ...i) {
+  if (s) {
+    for (const o of Object.keys(s))
+      if (o.toUpperCase() === "DATA-FRAGMENT")
+        return () => ve(i);
+  }
+  return () => {
+    A.elementOpenStart(e);
+    const o = [];
+    if (s)
+      for (const p of Object.keys(s))
+        p.toUpperCase() === "CLASSNAME" ? A.attr("class", s[p]) : /^on[A-Z]/.test(p) ? o.push(p) : A.attr(p, s[p]);
+    A.elementOpenEnd(e);
+    const r = A.currentElement();
+    if (!r[We]) {
+      for (const p of o)
+        r.addEventListener(p.substr(2).toLowerCase(), s[p]);
+      r[We] = !0;
+    }
+    ve(i), A.elementClose(e);
+  };
+}
+function Ge(e, s) {
+  customElements.get(e) || customElements.define(e, s);
+}
+function rs(...e) {
+  for (const s of e)
+    Ge(E.get(s, "tag"), s);
+}
+function as(e) {
+  return function(...i) {
+    for (const o of i) {
+      const r = `${e}${E.get(o, "tag").substr(3)}`;
+      Ge(r, o);
+    }
+  };
+}
+const He = Symbol("Component Attribute Bindings"), K = Symbol("Component Class Bindings"), be = Symbol("Component Style Bindings"), Ut = {
+  __initialized: !1,
+  __observer: null,
+  __queuedUpdate: null,
+  __managedClasses: /* @__PURE__ */ new Set(),
+  __updateHostBindings() {
+    const e = this;
+    for (const s of Object.keys(e[He] || {}))
+      e.setAttribute(s, e[He][s]);
+    for (const s of Object.keys(e[be] || {}))
+      e.style[s] = e[be][s];
+    for (const s of e.__managedClasses)
+      e.classList.remove(s);
+    for (const s of (e[K] || []).filter(Boolean))
+      e.__managedClasses.add(s), e.classList.add(s);
+    for (const s of (e.getAttribute("classname") || "").split(/\w+/).filter(Boolean))
+      e.classList.add(s);
+  },
+  __updateChildQueries(e) {
+    const s = this;
+    for (const i of E.get(s.constructor, "childQueries", []))
+      if (!e || e && i.refresh) {
+        const o = i.all ? s.querySelectorAll : s.querySelector;
+        s[i.key] = o.call(s, i.selector);
+      }
+  },
+  __gatherChildren() {
+    const e = this;
+    let s = Array.from(e.childNodes), i = null, o = s.length;
+    for (let r = 0; r < s.length; r += 1) {
+      const p = s[r];
+      p instanceof Comment && (p.data === qe ? i = r + 1 : p.data === me && (o = r - 1));
+    }
+    if (i === null)
+      for (const r of s)
+        r.parentNode.removeChild(r);
+    else
+      s = s.slice(i, o);
+    E.has(e.constructor, "contentProp") && (e[E.get(e.constructor, "contentProp")] = s);
+  },
+  __startMutObs() {
+    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 e = this;
+    e.__observer && e.__observer.disconnect();
+  },
+  __doRender() {
+    const e = this;
+    e.__stopMutObs(), A.patch(e, e.render()), e.__startMutObs();
+  },
+  update() {
+    const e = this;
+    e.__initialized && !e.__queuedUpdate && (e.__queuedUpdate = window.requestAnimationFrame(() => {
+      e.__doRender(), setTimeout(() => {
+        e.__updateChildQueries(!0), e.__updateHostBindings();
+      }, 0), e.__queuedUpdate = null;
+    }));
+  },
+  attributeChangedCallback(e, s, i) {
+    const o = this, r = i === "" ? !0 : i;
+    r !== s && (o.__cbAttributeChanged && o.__cbAttributeChanged(e, o[e], r), e !== "style" && (o[e] = r), o.__initialized && o.update());
+  },
+  connectedCallback() {
+    const e = this;
+    e.__cbConnected && e.__cbConnected();
+    const s = E.get(e.constructor, "eventListeners", []);
+    setTimeout(() => {
+      if (!e.__initialized) {
+        e.__gatherChildren();
+        for (const [, i] of s)
+          e[i] = e[i].bind(e);
+        e.__initialized = !0;
+      }
+      for (const [i, o] of s)
+        e.addEventListener(i, e[o]);
+      e.__doRender(), setTimeout(() => {
+        e.__updateChildQueries(), e.__updateHostBindings();
+      }, 0);
+    }, 0);
+  },
+  disconnectedCallback() {
+    const e = this;
+    e.__cbDisconnected && e.__cbDisconnected();
+    for (const [s, i] of E.get(e.constructor, "eventListeners", []))
+      e.removeEventListener(s, e[i]);
+    e.__stopMutObs();
+  }
+};
+function Q(e) {
+  return (s) => {
+    E.add(s, e), Object.assign(s.prototype, {
+      __cbAttributeChanged: s.prototype.attributeChangedCallback,
+      __cbConnected: s.prototype.connectedCallback,
+      __cbDisconnected: s.prototype.disconnectedCallback
+    }, Ut);
+  };
+}
+function Ce() {
+  return (e, s) => {
+    E.add(e.constructor, { contentProp: s });
+  };
+}
+function we(e) {
+  return (s, i) => {
+    Object.defineProperty(s, i, {
+      get() {
+        return Object.defineProperty(this, i, {
+          value: {
+            dispatch: (o) => {
+              const r = new CustomEvent(e || i, { detail: o });
+              return this.dispatchEvent(r), r;
+            }
+          }
+        }), this[i];
+      },
+      configurable: !0
+    });
+  };
+}
+function ce(e) {
+  return (s, i) => {
+    const o = E.get(s.constructor, "eventListeners", []);
+    o.push([e, i]), E.add(s.constructor, { eventListeners: o });
+  };
+}
+function m(e) {
+  return (s, i) => {
+    const o = s.constructor, r = i.toLowerCase();
+    if (o.observedAttributes = o.observedAttributes || [
+      "classname",
+      "className",
+      "style"
+    ], o.observedAttributes.push(i), o.observedAttributes.push(r), r !== i && Object.defineProperty(s, i, {
+      get() {
+        return this[r];
+      },
+      set(p) {
+        this[r] = p;
+      }
+    }), e) {
+      const p = Symbol.for(i);
+      Object.defineProperty(s, r, {
+        get() {
+          return this[p];
+        },
+        set(f) {
+          let V = f;
+          e === Boolean && typeof f == "string" && f.toLowerCase() === "false" ? V = !1 : V = e(f), this[p] = V;
+        }
+      });
+    }
+  };
+}
+function Xe(e, s, i) {
+  return (o, r) => {
+    const p = E.get(o.constructor, "childQueries", []);
+    p.push({
+      key: r,
+      selector: e,
+      all: i,
+      refresh: s.refresh
+    }), E.add(o.constructor, { childQueries: p });
+  };
+}
+function _e(e, s = {}) {
+  return Xe(e, s);
+}
+function zt(e, s = {}) {
+  return Xe(e, s, !0);
+}
+function Ke() {
+  return (e, s) => {
+    const i = Symbol(s);
+    Object.defineProperties(e, {
+      [i]: {
+        writable: !0,
+        enumerable: !1,
+        configurable: !1,
+        value: e[s]
+      },
+      [s]: {
+        get() {
+          return this[i];
+        },
+        set(o) {
+          this[i] !== o && (this[i] = o, this.update());
+        }
+      }
+    });
+  };
+}
+var Qe = /* @__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.CER = "application/pkix-cert", 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))(Qe || {}), Vt = Object.defineProperty, Wt = Object.getOwnPropertyDescriptor, N = (e, s, i, o) => {
+  for (var r = o > 1 ? void 0 : o ? Wt(s, i) : s, p = e.length - 1, f; p >= 0; p--)
+    (f = e[p]) && (r = (o ? f(s, i, r) : f(r)) || r);
+  return o && r && Vt(s, i, r), r;
+};
+const _ = "sps-file-upload";
+let b = class extends HTMLElement {
+  constructor() {
+    super(), this.shown = !0, this.files = [], this.acceptMIMETypes = /* @__PURE__ */ new Set(), this.active = !1, this.error = !1, 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 [K]() {
+    return [
+      _,
+      this.active && `${_}--active`,
+      this.error && `${_}--error`,
+      !this.shown && `${_}--hidden`,
+      this.mini && `${_}--mini`,
+      this.constrainContentWidth && `${_}--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(e, s, i) {
+    e === "acceptExtensions" && this.processAcceptExtensions(i), e === "maxSize" && this.parseAndValidateMaxSize(i);
+  }
+  /**
+   * If the `dismissable` prop has been set, this will programmatically
+   * dismiss the component and fire the "dismissal" event.
+   */
+  dismiss() {
+    this.dismissable && (this.shown = !1, this.update(), this.dismissal.dispatch());
+  }
+  /** If the `dismissable` prop has been set, this will programmatically show the component. */
+  show() {
+    this.dismissable && (this.shown = !0, this.update());
+  }
+  render() {
+    const e = this.error ? Ue.EXCLAMATION_CIRCLE : Ue.UPLOAD_CLOUD, s = (this.multiple ? P.t("fileUpload.instructions.other", { defaultValue: "Drag and drop your files here or |browse for files| on your desktop." }) : P.t("fileUpload.instructions.one", { defaultValue: "Drag and drop your file here or |browse for a file| on your desktop." })).split("|");
+    return /* @__PURE__ */ c("div", { "data-fragment": !0 }, /* @__PURE__ */ c("div", { className: `${_}__content` }, this.processing ? /* @__PURE__ */ c("div", { "data-fragment": !0 }, /* @__PURE__ */ c("i", { className: "sps-spinner sps-spinner--medium", "aria-hidden": "true" }), /* @__PURE__ */ c("div", { className: `${_}__instructions` }, P.t("fileUpload.processing", { defaultValue: "Processing Upload..." }))) : /* @__PURE__ */ c("div", { "data-fragment": !0 }, /* @__PURE__ */ c("i", { className: `sps-icon sps-icon-${e} ${_}__icon-primary`, "aria-hidden": "true" }), /* @__PURE__ */ c("div", { className: `${_}__title` }, this.error ? /* @__PURE__ */ c("div", { "data-fragment": !0 }, P.t(
+      this.namesOfUnsupportedFiles.length > 1 ? "fileUpload.cancelled_plural" : "fileUpload.cancelled",
+      { defaultValue: this.namesOfUnsupportedFiles.length > 1 ? "File Upload(s) Failed" : "File Upload Failed" }
+    )) : /* @__PURE__ */ c("div", { "data-fragment": !0 }, P.t("fileUpload.title", { description: this.description, defaultValue: `Upload Your ${this.description}` }))), this.error ? /* @__PURE__ */ c("div", { className: `${_}__errored-files` }, new Set(this.namesOfUnsupportedFiles.map((i, o) => {
+      const r = Math.floor(i.length / 2);
+      return /* @__PURE__ */ c("div", { className: `${_}__errored-filename`, key: i }, /* @__PURE__ */ c("span", { className: `${_}__errored-filename-segment` }, i.substr(0, r)), /* @__PURE__ */ c("div", { className: `${_}__errored-filename-segment` }, /* @__PURE__ */ c("span", null, i.substr(r))), o < this.namesOfUnsupportedFiles.length - 1 ? "," : "");
+    }))) : /* @__PURE__ */ c("span", null), /* @__PURE__ */ c("div", { className: `${_}__instructions` }, /* @__PURE__ */ c("div", { "data-fragment": !0 }, /* @__PURE__ */ c("span", null, s[0]), /* @__PURE__ */ c("a", { href: "", onClick: this.handleBrowseLinkClick }, s[1]), /* @__PURE__ */ c("span", null, s[2]))), /* @__PURE__ */ c("div", { className: `${_}__requirements` }, this.acceptExtensions ? /* @__PURE__ */ c("span", null, "(", " ", P.t("fileUpload.acceptedTypes", { fileTypes: this.acceptExtensionsDescription, defaultValue: `${this.acceptExtensionsDescription} format accepted` }), " ", ")") : "", this.maxSize ? /* @__PURE__ */ c("span", null, "(", " ", P.t("fileUpload.maximumSize", { size: this.maxSize, defaultValue: `${this.maxSize} maximum` }), " ", ")") : "", this.customRequirement ? /* @__PURE__ */ c("span", null, " ", this.customRequirement, " ") : ""), this.downloadLabel && /* @__PURE__ */ c(
+      "div",
+      {
+        className: `sps-button sps-button--link ${_}__download-button`,
+        onClick: this.handleDownloadButtonClick
+      },
+      /* @__PURE__ */ c("button", { type: "button" }, /* @__PURE__ */ c("i", { className: "sps-icon sps-icon-download-cloud", "aria-hidden": "true" }), " ", this.downloadLabel)
+    ))), this.dismissable && !this.processing && /* @__PURE__ */ c(
+      "div",
+      {
+        className: `sps-button sps-button--icon ${_}__close-button`,
+        onClick: this.dismiss
+      },
+      /* @__PURE__ */ c("button", { type: "button", title: P.t("fileUpload.close", { defaultValue: "Close" }) }, /* @__PURE__ */ c("i", { className: "sps-icon sps-icon-x", "aria-hidden": "true" }))
+    ), /* @__PURE__ */ c("form", null, /* @__PURE__ */ c(
+      "input",
+      {
+        type: "file",
+        accept: this.accept || "*/*",
+        multiple: this.multiple || null,
+        onChange: this.handleFileInputChange
+      }
+    )));
+  }
+  parseAndValidateMaxSize(e) {
+    try {
+      this.maxSizeBytes = jt(e);
+    } catch {
+      throw new Error(`Could not parse "${e}" as a file size.`);
+    }
+  }
+  processAcceptExtensions(e) {
+    const i = (Array.isArray(e) ? e : e.trim().split(/\s?,\s?/)).map((r) => r.replace(/^\./, "")), o = i.map((r) => `.${r}`.toLowerCase());
+    this.acceptExtensionsDescription = o.map((r, p) => p > 0 && p === o.length - 1 ? `or ${r}` : r).join(o.length > 2 ? ", " : " "), this.acceptMIMETypes.clear();
+    for (const r of i)
+      for (const p of Qe[r.toUpperCase()].split(","))
+        this.acceptMIMETypes.add(p);
+    this.accept = o.concat(Array.from(this.acceptMIMETypes)).join(",");
+  }
+  selectFiles(e) {
+    this.namesOfUnsupportedFiles = [];
+    const s = Array.from(e);
+    for (const i of s)
+      this.acceptExtensions && !this.acceptMIMETypes.has(i.type) && this.namesOfUnsupportedFiles.push(i.name), this.maxSize && i.size > this.maxSizeBytes && this.namesOfUnsupportedFiles.indexOf(i.name) === -1 && this.namesOfUnsupportedFiles.push(i.name);
+    this.namesOfUnsupportedFiles.length ? (this.error = !0, this.fileInput.value = null, this.update()) : (this.files = s, this.selection.dispatch(s));
+  }
+  handleDragOver(e) {
+    e.preventDefault(), e.stopPropagation();
+  }
+  handleDragEnter(e) {
+    e.preventDefault(), this.active = !0, this.error = !1, this.update();
+  }
+  handleDragLeave(e) {
+    e.preventDefault(), this.active = !1, this.update();
+  }
+  handleDrop(e) {
+    e.preventDefault(), e.stopPropagation(), this.active = !1, e.dataTransfer.items ? this.selectFiles(Array.from(e.dataTransfer.items).map(
+      (s) => s.getAsFile()
+    )) : this.selectFiles(e.dataTransfer.files), this.update();
+  }
+  /* eslint-enable @typescript-eslint/member-ordering */
+  handleBrowseLinkClick(e) {
+    e.preventDefault(), this.error = !1, this.update(), this.fileInput.click();
+  }
+  handleDownloadButtonClick() {
+    this.download.dispatch();
+  }
+  handleFileInputChange(e) {
+    e.stopPropagation(), this.selectFiles(e.target.files);
+  }
+};
+b.displayName = _;
+b.props = {
+  description: "string",
+  multiple: "boolean",
+  dismissable: "boolean",
+  processing: "boolean",
+  mini: "boolean",
+  downloadLabel: "string",
+  acceptExtensions: "Array<string> | string",
+  maxSize: "string",
+  customRequirement: "string",
+  selection: { event: !0, type: "CustomEvent<Array<File>>" },
+  dismissal: { event: !0, type: "CustomEvent<void>" },
+  download: { event: !0, type: "CustomEvent<void>" }
+};
+N([
+  m()
+], b.prototype, "description", 2);
+N([
+  m(Boolean)
+], b.prototype, "multiple", 2);
+N([
+  m(Boolean)
+], b.prototype, "shown", 2);
+N([
+  m(Boolean)
+], b.prototype, "dismissable", 2);
+N([
+  m(Boolean)
+], b.prototype, "processing", 2);
+N([
+  m(Boolean)
+], b.prototype, "mini", 2);
+N([
+  m(Boolean)
+], b.prototype, "constrainContentWidth", 2);
+N([
+  m()
+], b.prototype, "downloadLabel", 2);
+N([
+  m()
+], b.prototype, "acceptExtensions", 2);
+N([
+  m()
+], b.prototype, "maxSize", 2);
+N([
+  m()
+], b.prototype, "customRequirement", 2);
+N([
+  we()
+], b.prototype, "selection", 2);
+N([
+  we()
+], b.prototype, "dismissal", 2);
+N([
+  we()
+], b.prototype, "download", 2);
+N([
+  _e("input[type='file']")
+], b.prototype, "fileInput", 2);
+N([
+  ce("dragover")
+], b.prototype, "handleDragOver", 1);
+N([
+  ce("dragenter")
+], b.prototype, "handleDragEnter", 1);
+N([
+  ce("dragleave")
+], b.prototype, "handleDragLeave", 1);
+N([
+  ce("drop")
+], b.prototype, "handleDrop", 1);
+b = N([
+  Q({ tag: _ })
+], b);
+const os = {
+  basic: {
+    label: "Basic File Upload",
+    description: u`
+            <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: u`
+                    function Component() {
+                        const ref = React.useRef()
+
+                        function handleChange(event) {
+                            console.log(event.detail)
+                        }
+
+                        React.useEffect(() => {
+                            ref.current.addEventListener("selection", handleChange)
+                            return () => {
+                                ref.current.removeEventListener("selection", handleChange)
+                            }
+                        })
+
+                        return (
+                            <div className="sps-row">
+                                <div className="col-12">
+                                    <sps-file-upload ref={ref}/>
+                                </div>
+                            </div>
+                        )
+                    }
+                `
+      },
+      multiple: {
+        description: "<p>Multiple file upload</p>",
+        react: u`
+                    function Component() {
+                        const ref = React.useRef()
+
+                        function handleChange(event) {
+                            console.log(event.detail)
+                        }
+
+                        React.useEffect(() => {
+                            ref.current.addEventListener("selection", handleChange)
+                            return () => {
+                                ref.current.removeEventListener("selection", handleChange)
+                            }
+                        })
+
+                        return (
+                            <div className="sps-row">
+                                <div className="col-12">
+                                    <sps-file-upload ref={ref} multiple/>
+                                </div>
+                            </div>
+                        )
+                    }
+                `
+      }
+    }
+  },
+  restrictions: {
+    label: "Restrictions",
+    description: u`
+            <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: u`
+                    function Component() {
+                        const ref = React.useRef()
+
+                        function handleChange(event) {
+                            console.log(event.detail)
+                        }
+
+                        React.useEffect(() => {
+                            ref.current.addEventListener("selection", handleChange)
+                            return () => {
+                                ref.current.removeEventListener("selection", handleChange)
+                            }
+                        })
+
+                        return (
+                            <div className="sps-row">
+                                <div className="col-12">
+                                    <sps-file-upload ref={ref} maxSize="100KB"/>
+                                </div>
+                            </div>
+                        )
+                    }
+                `
+      },
+      type: {
+        description: "<p>File type whitelist</p>",
+        react: u`
+                    function Component() {
+                        const ref = React.useRef()
+
+                        function handleChange(event) {
+                            console.log(event.detail)
+                        }
+
+                        React.useEffect(() => {
+                            ref.current.addEventListener("selection", handleChange)
+                            return () => {
+                                ref.current.removeEventListener("selection", handleChange)
+                            }
+                        })
+
+                        return (
+                            <div className="sps-row">
+                                <div className="col-12">
+                                    <sps-file-upload
+                                        ref={ref}
+                                        description="Spreadsheets"
+                                        multiple
+                                        acceptExtensions="XLS, xlsx, .csv"
+                                    />
+                                </div>
+                            </div>
+                        )
+                    }
+                `
+      },
+      both: {
+        description: "<p>Both restrictions</p>",
+        react: u`
+                    function Component() {
+                        const ref = React.useRef()
+
+                        function handleChange(event) {
+                            console.log(event.detail)
+                        }
+
+                        React.useEffect(() => {
+                            ref.current.addEventListener("selection", handleChange)
+                            return () => {
+                                ref.current.removeEventListener("selection", handleChange)
+                            }
+                        })
+
+                        return (
+                            <div className="sps-row">
+                                <div className="col-12">
+                                    <sps-file-upload
+                                        ref={ref}
+                                        description="Spreadsheets"
+                                        multiple
+                                        acceptExtensions="XLS, xlsx, .csv"
+                                        maxSize="25MB"
+                                    />
+                                </div>
+                            </div>
+                        )
+                    }
+                `
+      }
+    }
+  },
+  dismissable: {
+    label: "Dismissable",
+    description: u`
+            <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: u`
+                    function Component() {
+                        const [showFileUpload, setShowFileUpload] = React.useState(true)
+                        const ref = React.useRef()
+
+                        function handleDismissal() {
+                            setShowFileUpload(false)
+                        }
+
+                        React.useEffect(() => {
+                            ref.current.addEventListener("dismissal", handleDismissal)
+                            return () => {
+                                ref.current.removeEventListener("dismissal", handleDismissal)
+                            }
+                        })
+
+                        return (
+                            <div className="sps-row">
+                                <div className="col-12">
+                                    <sps-file-upload
+                                        ref={ref}
+                                        dismissable
+                                        shown={showFileUpload}
+                                    />
+                                    {!showFileUpload && (
+                                    <SpsButton onClick={() => setShowFileUpload(true)}>
+                                        Reset
+                                    </SpsButton>
+                                    )}
+                                </div>
+                            </div>
+                        )
+                    }
+                `
+      }
+    }
+  },
+  downloadButton: {
+    label: "Download Button",
+    description: u`
+            <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: u`
+                    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: u`
+            <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: u`
+                    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: u`
+            <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: u`
+                    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 Ht = Object.defineProperty, qt = Object.getOwnPropertyDescriptor, $ = (e, s, i, o) => {
+  for (var r = o > 1 ? void 0 : o ? qt(s, i) : s, p = e.length - 1, f; p >= 0; p--)
+    (f = e[p]) && (r = (o ? f(s, i, r) : f(r)) || r);
+  return o && r && Ht(s, i, r), r;
+};
+const D = "sps-insight-card";
+let k = class extends HTMLElement {
+  constructor() {
+    super(...arguments), this.kind = $t.GENERAL;
+  }
+  get [K]() {
+    return [
+      D,
+      `${D}--${this.kind}`,
+      this.detail && this.detail.children.length ? `${D}--has-detail` : null
+    ];
+  }
+  render() {
+    const e = /* @__PURE__ */ c("div", { className: `${D}__metric-count` }, this.metric), s = /* @__PURE__ */ c("div", { className: `${D}__description` }, /* @__PURE__ */ c(
+      "div",
+      {
+        className: `${D}__title`,
+        style: { "-webkit-box-orient": "vertical" }
+      },
+      this.title
+    ), /* @__PURE__ */ c("div", { className: `${D}__detail` }, this.content)), i = this.partnercount, o = this.totalpartners, [
+      r,
+      p,
+      f
+    ] = (i ? P.t("insightCard.partnerCount", { count: i, total: o, defaultValue: `${i} |of| ${o}` }) : "").split("|");
+    return /* @__PURE__ */ c("div", { "data-fragment": !0 }, /* @__PURE__ */ c("div", { className: `${D}__body` }, this.icon ? /* @__PURE__ */ c("i", { className: `sps-icon sps-icon-${this.icon}` }) : /* @__PURE__ */ c("i", { className: `sps-icon sps-icon-${Bt[this.kind]}` }), e, s), i && /* @__PURE__ */ c("div", { className: `${D}__partner-count` }, i === o ? /* @__PURE__ */ c("div", null, P.t("insightCard.all", { defaultValue: "ALL" })) : /* @__PURE__ */ c("div", { "data-fragment": !0 }, /* @__PURE__ */ c("div", null, r), /* @__PURE__ */ c("div", null, p), /* @__PURE__ */ c("div", null, f)), /* @__PURE__ */ c("div", { className: `${D}__partners-text` }, P.t("insightCard.partners", { defaultValue: "PARTNERS" }))));
+  }
+};
+k.displayName = D;
+k.props = {
+  icon: "SpsIcon",
+  kind: "SpsInsightCardKind",
+  title: "string",
+  metric: "number",
+  partnerCount: "number",
+  totalPartners: "number",
+  secondary: "boolean"
+};
+$([
+  m()
+], k.prototype, "icon", 2);
+$([
+  m()
+], k.prototype, "kind", 2);
+$([
+  m()
+], k.prototype, "title", 2);
+$([
+  m()
+], k.prototype, "metric", 2);
+$([
+  m()
+], k.prototype, "partnerCount", 2);
+$([
+  m()
+], k.prototype, "totalPartners", 2);
+$([
+  m()
+], k.prototype, "secondary", 2);
+$([
+  Ce()
+], k.prototype, "content", 2);
+$([
+  _e(`.${D}__detail`)
+], k.prototype, "detail", 2);
+k = $([
+  Q({ tag: D })
+], k);
+var Gt = Object.defineProperty, Xt = Object.getOwnPropertyDescriptor, Ne = (e, s, i, o) => {
+  for (var r = o > 1 ? void 0 : o ? Xt(s, i) : s, p = e.length - 1, f; p >= 0; p--)
+    (f = e[p]) && (r = (o ? f(s, i, r) : f(r)) || r);
+  return o && r && Gt(s, i, r), r;
+};
+const B = "sps-insights";
+let X = class extends HTMLElement {
+  constructor() {
+    super(), this.content = [], this.showAdditionalInsights = !1, this.toggleAdditionalInsights = this.toggleAdditionalInsights.bind(this);
+  }
+  get [K]() {
+    return [
+      B,
+      this.showAdditionalInsights && `${B}--show-additional`,
+      this.details && Array.from(this.details).every((e) => !e.textContent) ? `${B}--no-details` : null,
+      this.content.length === 6 ? `${B}--break-4` : null,
+      this.content.length === 7 ? `${B}--break-5` : null,
+      this.content.length === 8 ? `${B}--break-5` : null
+    ];
+  }
+  /**
+   * Only the first ten Insight Cards are visible by default; the rest are behind
+   * the "Show Additional Insights"/"Hide Additional Insights" button. This method
+   * will toggle the additional insights.
+   */
+  toggleAdditionalInsights() {
+    this.showAdditionalInsights = !this.showAdditionalInsights, this.update();
+  }
+  render() {
+    return /* @__PURE__ */ c("div", { "data-fragment": !0 }, this.content, this.content.length > 10 && /* @__PURE__ */ c("div", { className: "sps-button sps-button--link", onClick: this.toggleAdditionalInsights }, /* @__PURE__ */ c("button", { type: "button" }, this.showAdditionalInsights ? P.t("insights.hideAdditionalInsights", { defaultValue: "Hide Additional Insights" }) : P.t("insights.showAdditionalInsights", { defaultValue: "Show Additional Insights" }))));
+  }
+};
+X.displayName = B;
+X.props = {};
+Ne([
+  Ce()
+], X.prototype, "content", 2);
+Ne([
+  zt(".sps-insight-card__detail")
+], X.prototype, "details", 2);
+X = Ne([
+  Q({ tag: B })
+], X);
+const ls = {
+  basic: {
+    label: "Basic Insight Cards",
+    examples: {
+      basic: {
+        jsx: u`
+            <sps-insights>
+                <sps-insight-card kind="general"
+                    metric="1234"
+                    title="Insight Card Title"
+                ></sps-insight-card>
+                <sps-insight-card kind="processing"
+                    metric="1234"
+                    title="Insight Card Title"
+                ></sps-insight-card>
+                <sps-insight-card kind="success"
+                    metric="1234"
+                    title="Insight Card Title"
+                ></sps-insight-card>
+                <sps-insight-card kind="warning"
+                    metric="1234"
+                    title="Insight Card Title"
+                ></sps-insight-card>
+                <sps-insight-card kind="error"
+                    metric="1234"
+                    title="Insight Card Title"
+                ></sps-insight-card>
+            </sps-insights>
+        `
+      }
+    }
+  },
+  details: {
+    label: "With Details",
+    examples: {
+      details: {
+        jsx: u`
+            <sps-insights>
+                <sps-insight-card kind="general"
+                    metric="1234"
+                    title="Insight Card Title"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="processing"
+                    metric="1234"
+                    title="Insight Card Title"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="success"
+                    metric="1234"
+                    title="Insight Card Title"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="warning"
+                    metric="1234"
+                    title="Insight Card Title"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="error"
+                    metric="1234"
+                    title="Insight Card Title"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="success"
+                    metric="1234"
+                    title="Insight Card Title"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="error"
+                    metric="1234"
+                    title="Insight Card Title"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+            </sps-insights>
+        `
+      }
+    }
+  },
+  partner_count: {
+    label: "Partner Count",
+    examples: {
+      partner_count: {
+        jsx: u`
+            <sps-insights>
+                <sps-insight-card kind="general"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="250"
+                    totalPartners="250"
+                ></sps-insight-card>
+                <sps-insight-card kind="processing"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="122"
+                    totalPartners="250"
+                ></sps-insight-card>
+                <sps-insight-card kind="success"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="207"
+                    totalPartners="250"
+                ></sps-insight-card>
+                <sps-insight-card kind="warning"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="12"
+                    totalPartners="250"
+                ></sps-insight-card>
+                <sps-insight-card kind="error"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="94"
+                    totalPartners="250"
+                ></sps-insight-card>
+            </sps-insights>
+        `
+      }
+    }
+  },
+  expansion: {
+    label: "10+ Insight Cards",
+    examples: {
+      expansion: {
+        jsx: u`
+            <sps-insights>
+                <sps-insight-card kind="general"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="processing"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                ></sps-insight-card>
+                <sps-insight-card kind="success"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="warning"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                ></sps-insight-card>
+                <sps-insight-card kind="error"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="general"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                ></sps-insight-card>
+                <sps-insight-card kind="processing"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="success"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                ></sps-insight-card>
+                <sps-insight-card kind="warning"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="error"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                ></sps-insight-card>
+                <sps-insight-card kind="general"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="processing"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                ></sps-insight-card>
+                <sps-insight-card kind="success"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="warning"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                ></sps-insight-card>
+                <sps-insight-card kind="error"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+            </sps-insights>
+        `
+      }
+    }
+  },
+  events: {
+    label: "Adding a click handler",
+    description: u`
+          <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: u`
+                  function Component() {
+                      function handleClick() {
+                          window.alert("Insight card clicked");
+                      }
+
+                      const ref = React.useRef();
+                      React.useEffect(() => {
+                          ref.current.addEventListener("click", handleClick);
+                          return () => {
+                              ref.current.removeEventListener("click", handleClick);
+                          };
+                      }, []);
+
+                        return (
+                            <sps-insights>
+                                <sps-insight-card ref={ref}
+                                    kind="general"
+                                    metric="1234"
+                                    title="Insight Card Title"
+                                ></sps-insight-card>
+                                <sps-insight-card kind="general"
+                                    metric="1234"
+                                    title="Insight Card Title"
+                                ></sps-insight-card>
+                                <sps-insight-card kind="general"
+                                    metric="1234"
+                                    title="Insight Card Title"
+                                ></sps-insight-card>
+                            </sps-insights>
+                        );
+                    }
+                `
+      }
+    }
+  },
+  alternateIcon: {
+    label: "Using alternate icons",
+    examples: {
+      basic: {
+        react: u`
+                    function DemoComponent() {
+                        return (
+                            <sps-insights>
+                                <sps-insight-card
+                                    kind="general"
+                                    metric="1234"
+                                    icon={SpsIcon.DOLLAR_SIGN}
+                                    title="Insight Card Title"
+                                ></sps-insight-card>
+                                <sps-insight-card
+                                    kind="processing"
+                                    metric="1234"
+                                    icon={SpsIcon.ASTERISK}
+                                    title="Insight Card Title"
+                                ></sps-insight-card>
+                                <sps-insight-card
+                                    kind="success"
+                                    metric="1234"
+                                    icon={SpsIcon.USER}
+                                    title="Insight Card Title"
+                                ></sps-insight-card>
+                                <sps-insight-card
+                                    kind="warning"
+                                    metric="1234"
+                                    icon={SpsIcon.FOLDER_OPEN}
+                                    title="Insight Card Title"
+                                ></sps-insight-card>
+                                <sps-insight-card
+                                    kind="error"
+                                    metric="1234"
+                                    icon={SpsIcon.BAN}
+                                    title="Insight Card Title"
+                                ></sps-insight-card>
+                            </sps-insights>
+                        )
+                    }
+                `
+      }
+    }
+  }
+};
+var Kt = Object.defineProperty, Qt = Object.getOwnPropertyDescriptor, z = (e, s, i, o) => {
+  for (var r = o > 1 ? void 0 : o ? Qt(s, i) : s, p = e.length - 1, f; p >= 0; p--)
+    (f = e[p]) && (r = (o ? f(s, i, r) : f(r)) || r);
+  return o && r && Kt(s, i, r), r;
+};
+let R = class extends HTMLElement {
+  constructor() {
+    super(...arguments), this.active = !1, this.label = "", this.tag = "";
+  }
+  get [K]() {
+    return [
+      "sps-tabbed-nav__nav-item",
+      this.active && "sps-tabbed-nav__nav-item--active"
+    ];
+  }
+  render() {
+    return /* @__PURE__ */ c("a", { href: this.href, target: this.target, className: "sps-tabbed-nav__nav-item-link", tabIndex: 0 }, this.icon && /* @__PURE__ */ c("i", { className: `sps-icon sps-icon-${this.icon}` }), this.label && /* @__PURE__ */ c("span", null, this.label), this.tag && /* @__PURE__ */ c("span", { className: "sps-tag sps-tag--default" }, this.tag));
+  }
+};
+R.displayName = "sps-nav-tab";
+R.props = {
+  active: "boolean",
+  label: "string",
+  icon: "SpsIcon",
+  tag: "string",
+  href: "string",
+  target: "string"
+};
+z([
+  m()
+], R.prototype, "active", 2);
+z([
+  m()
+], R.prototype, "label", 2);
+z([
+  m()
+], R.prototype, "icon", 2);
+z([
+  m()
+], R.prototype, "tag", 2);
+z([
+  m()
+], R.prototype, "href", 2);
+z([
+  m()
+], R.prototype, "target", 2);
+R = z([
+  Q({ tag: "sps-nav-tab" })
+], R);
+var Zt = Object.defineProperty, Yt = Object.getOwnPropertyDescriptor, Ze = (e, s, i, o) => {
+  for (var r = o > 1 ? void 0 : o ? Yt(s, i) : s, p = e.length - 1, f; p >= 0; p--)
+    (f = e[p]) && (r = (o ? f(s, i, r) : f(r)) || r);
+  return o && r && Zt(s, i, r), r;
+};
+let ee = class extends HTMLElement {
+  constructor() {
+    super(...arguments), this.content = [];
+  }
+  render() {
+    return /* @__PURE__ */ c("nav", { className: "sps-tabbed-nav" }, this.content);
+  }
+};
+ee.displayName = "sps-nav-tab-set";
+ee.props = {};
+Ze([
+  Ce()
+], ee.prototype, "content", 2);
+ee = Ze([
+  Q({ tag: "sps-nav-tab-set" })
+], ee);
+const cs = {
+  basic: {
+    label: "Basic Navigation Tabs",
+    description: u`
+          <p>Navigation tabs native web component</p>
+        `,
+    examples: {
+      basic: {
+        react: u`
+                    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 Jt = Object.defineProperty, Mt = Object.getOwnPropertyDescriptor, j = (e, s, i, o) => {
+  for (var r = o > 1 ? void 0 : o ? Mt(s, i) : s, p = e.length - 1, f; p >= 0; p--)
+    (f = e[p]) && (r = (o ? f(s, i, r) : f(r)) || r);
+  return o && r && Jt(s, i, r), r;
+}, es = /* @__PURE__ */ ((e) => (e.FIT = "fit", e.FILL = "fill", e))(es || {});
+const G = "sps-photo";
+let L = class extends HTMLElement {
+  constructor() {
+    super(...arguments), this.mode = "fill";
+  }
+  get image() {
+    return this.imageInternal;
+  }
+  set image(e) {
+    this.imageInternal = e, e && (this.waitForImgHeightInterval && window.clearInterval(this.waitForImgHeightInterval), this.waitForImgHeightInterval = window.setInterval(() => {
+      const s = e.getBoundingClientRect();
+      if (s.height) {
+        window.clearInterval(this.waitForImgHeightInterval), delete this.waitForImgHeightInterval;
+        let i = s.width / s.height > 1;
+        this.fitWidth = i === (this.mode === "fit");
+      }
+    }, 1e3 / 60));
+  }
+  get [K]() {
+    return [
+      G,
+      this.fitWidth ? `${G}--fit-width` : `${G}--fit-height`,
+      this.placeholderIcon && `${G}--placeholder`
+    ];
+  }
+  get [be]() {
+    return {
+      fontSize: `${this.width * 0.05}rem`,
+      width: `${this.width}rem`,
+      height: `${0.75 * this.width}rem`
+    };
+  }
+  connectedCallback() {
+    this.waitForWidthInterval = window.setInterval(() => {
+      const e = this.getBoundingClientRect();
+      e.width && (this.setWidth(e.width), window.clearInterval(this.waitForWidthInterval), delete this.waitForWidthInterval);
+    }, 1e3 / 60);
+  }
+  disconnectedCallback() {
+    this.waitForWidthInterval && window.clearInterval(this.waitForWidthInterval), this.waitForImgHeightInterval && window.clearInterval(this.waitForImgHeightInterval);
+  }
+  render() {
+    return this.src ? this.width ? /* @__PURE__ */ c("img", { src: this.src, alt: this.altText }) : /* @__PURE__ */ c("span", null) : /* @__PURE__ */ c("i", { className: `sps-icon sps-icon-${this.placeholderIcon}` });
+  }
+  setWidth(e) {
+    if (e && !this.width) {
+      const s = document.body.parentElement.style.fontSize || "16px", i = Number(s.substr(0, s.length - 2));
+      this.width = e / i;
+    }
+  }
+};
+L.displayName = G;
+L.props = {
+  src: "string",
+  altText: "string",
+  mode: "SpsPhotoDisplayMode",
+  placeholderIcon: "SpsIcon"
+};
+j([
+  m()
+], L.prototype, "src", 2);
+j([
+  m()
+], L.prototype, "altText", 2);
+j([
+  m()
+], L.prototype, "mode", 2);
+j([
+  m()
+], L.prototype, "placeholderIcon", 2);
+j([
+  Ke()
+], L.prototype, "width", 2);
+j([
+  Ke()
+], L.prototype, "fitWidth", 2);
+j([
+  _e("img", { refresh: !0 })
+], L.prototype, "image", 1);
+L = j([
+  Q({ tag: G })
+], L);
+const ps = {
+  sizing: {
+    label: "Sizing",
+    description: u`
+        <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: u`
+            <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: u`
+        <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: u`
+            <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: u`
+            <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: u`
+        <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: u`
+                <div className="sfg-row">
+                    <div className="sfg-col-3">
+                        <sps-photo placeholderIcon="photo"></sps-photo>
+                    </div>
+                </div>
+            `
+      },
+      photoAlt: {
+        description: "<p>Photo Alt</p>",
+        jsx: u`
+                <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: u`
+                <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: u`
+                <div className="sfg-row">
+                    <div className="sfg-col-3">
+                        <sps-photo placeholderIcon="group"></sps-photo>
+                    </div>
+                </div>
+            `
+      },
+      company: {
+        description: "<p>Company / Building</p>",
+        jsx: u`
+                <div className="sfg-row">
+                    <div className="sfg-col-3">
+                        <sps-photo placeholderIcon="building"></sps-photo>
+                    </div>
+                </div>
+            `
+      }
+    }
+  }
+};
+export {
+  He as AttrBindings,
+  K as ClassBindings,
+  Q as Component,
+  Ce as Content,
+  we as EventDispatcher,
+  ce as EventListener,
+  is as MANIFEST,
+  Qe as MIMEType,
+  m as Prop,
+  _e as QuerySelector,
+  zt as QuerySelectorAll,
+  b as SpsFileUploadComponent,
+  os as SpsFileUploadExamples,
+  k as SpsInsightCardComponent,
+  ls as SpsInsightCardExamples,
+  X as SpsInsightsComponent,
+  R as SpsNavTabComponent,
+  ee as SpsNavTabSetComponent,
+  cs as SpsNavTabsExamples,
+  L as SpsPhotoComponent,
+  es as SpsPhotoDisplayMode,
+  ps as SpsPhotoExamples,
+  be as StyleBindings,
+  Ke as Watch,
+  c as h,
+  as as namespaceOverrideRegistrar,
+  rs as register
+};