@spscommerce/ds-web-components 7.10.8 → 7.11.0

package/dist/lib/index.es.js

@@ -2,7 +2,8 @@ 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";
+import { parseFileSize as ct, code as c } from "@spscommerce/utils";
+const _s = {};
 var h = {};
 Object.defineProperty(h, "__esModule", { value: !0 });
 /**
@@ -904,259 +905,14 @@ function et() {
     });
   };
 }
-var rs = Object.defineProperty, as = Object.getOwnPropertyDescriptor, E = (e, t, s, n) => {
+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 || {}), rs = Object.defineProperty, as = Object.getOwnPropertyDescriptor, b = (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(...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 image() {
-    return this.imageInternal;
-  }
-  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));
-  }
-  get [T]() {
-    return [
-      F,
-      this.fitWidth ? `${F}--fit-width` : `${F}--fit-height`,
-      this.placeholderIcon && `${F}--placeholder`
-    ];
-  }
-  get [he]() {
-    return {
-      fontSize: `${this.width * 0.05}rem`,
-      width: `${this.width}rem`,
-      height: `${0.75 * this.width}rem`
-    };
-  }
-  connectedCallback() {
-    this.waitForWidthInterval = window.setInterval(() => {
-      const t = this.getBoundingClientRect();
-      t.width && (this.setWidth(t.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__ */ o("img", {
-      src: this.src,
-      alt: this.altText
-    }) : /* @__PURE__ */ o("span", null) : /* @__PURE__ */ o("i", {
-      className: `sps-icon sps-icon-${this.placeholderIcon}`
-    });
-  }
-  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;
-    }
-  }
-}, 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>
-        `
-      }
-    }
-  },
-  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, b = (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 v = "sps-file-upload";
-var G;
-let f = (G = class extends HTMLElement {
+var q;
+let f = (q = class extends HTMLElement {
   constructor() {
     super();
     a(this, "description");
@@ -1322,7 +1078,7 @@ let f = (G = class extends HTMLElement {
   handleFileInputChange(t) {
     t.stopPropagation(), this.selectFiles(t.target.files);
   }
-}, a(G, "displayName", v), a(G, "props", {
+}, a(q, "displayName", v), a(q, "props", {
   description: "string",
   multiple: "boolean",
   dismissable: "boolean",
@@ -1335,7 +1091,7 @@ let f = (G = class extends HTMLElement {
   selection: { event: !0, type: "CustomEvent<Array<File>>" },
   dismissal: { event: !0, type: "CustomEvent<void>" },
   download: { event: !0, type: "CustomEvent<void>" }
-}), G);
+}), q);
 b([
   p()
 ], f.prototype, "description", 2);
@@ -1396,7 +1152,7 @@ b([
 f = b([
   j({ tag: v })
 ], f);
-const Os = {
+const Ss = {
   basic: {
     label: "Basic File Upload",
     description: c`
@@ -1716,14 +1472,14 @@ const Os = {
     }
   }
 };
-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--)
+var os = Object.defineProperty, ls = Object.getOwnPropertyDescriptor, O = (e, t, s, n) => {
+  for (var i = n > 1 ? void 0 : n ? ls(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;
+  return n && i && os(t, s, i), i;
 };
 const _ = "sps-insight-card";
-var X;
-let y = (X = class extends HTMLElement {
+var G;
+let y = (G = class extends HTMLElement {
   constructor() {
     super(...arguments);
     a(this, "icon");
@@ -1774,7 +1530,7 @@ let y = (X = class extends HTMLElement {
       className: `${_}__partners-text`
     }, t("design-system:insightCard.partners"))));
   }
-}, a(X, "displayName", _), a(X, "props", {
+}, a(G, "displayName", _), a(G, "props", {
   icon: "SpsIcon",
   kind: "SpsInsightCardKind",
   title: "string",
@@ -1782,45 +1538,45 @@ let y = (X = class extends HTMLElement {
   partnerCount: "number",
   totalPartners: "number",
   secondary: "boolean"
-}), X);
-A([
+}), G);
+O([
   p()
 ], y.prototype, "icon", 2);
-A([
+O([
   p()
 ], y.prototype, "kind", 2);
-A([
+O([
   p()
 ], y.prototype, "title", 2);
-A([
+O([
   p()
 ], y.prototype, "metric", 2);
-A([
+O([
   p()
 ], y.prototype, "partnerCount", 2);
-A([
+O([
   p()
 ], y.prototype, "totalPartners", 2);
-A([
+O([
   p()
 ], y.prototype, "secondary", 2);
-A([
+O([
   _e()
 ], y.prototype, "content", 2);
-A([
+O([
   xe(`.${_}__detail`)
 ], y.prototype, "detail", 2);
-y = A([
+y = O([
   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--)
+var cs = Object.defineProperty, ps = Object.getOwnPropertyDescriptor, ye = (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 && us(t, s, i), i;
+  return n && i && cs(t, s, i), i;
 };
 const D = "sps-insights";
-var K;
-let te = (K = class extends HTMLElement {
+var X;
+let te = (X = class extends HTMLElement {
   constructor() {
     super();
     a(this, "content", []);
@@ -1851,7 +1607,7 @@ let te = (K = class extends HTMLElement {
       type: "button"
     }, this.showAdditionalInsights ? "Hide " : "Show ", "Additional Insights")));
   }
-}, a(K, "displayName", D), a(K, "props", {}), K);
+}, a(X, "displayName", D), a(X, "props", {}), X);
 ye([
   _e()
 ], te.prototype, "content", 2);
@@ -1861,7 +1617,7 @@ ye([
 te = ye([
   j({ tag: D })
 ], te);
-const As = {
+const Os = {
   basic: {
     label: "Basic Insight Cards",
     examples: {
@@ -2194,12 +1950,12 @@ const As = {
     }
   }
 };
-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--)
+var ds = Object.defineProperty, hs = Object.getOwnPropertyDescriptor, L = (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 && gs(t, s, i), i;
-}, Q;
-let P = (Q = class extends HTMLElement {
+  return n && i && ds(t, s, i), i;
+}, K;
+let P = (K = class extends HTMLElement {
   constructor() {
     super(...arguments);
     a(this, "active", !1);
@@ -2227,14 +1983,14 @@ let P = (Q = class extends HTMLElement {
       className: "sps-tag sps-tag--default"
     }, this.tag));
   }
-}, a(Q, "displayName", "sps-nav-tab"), a(Q, "props", {
+}, a(K, "displayName", "sps-nav-tab"), a(K, "props", {
   active: "boolean",
   label: "string",
   icon: "SpsIcon",
   tag: "string",
   href: "string",
   target: "string"
-}), Q);
+}), K);
 L([
   p()
 ], P.prototype, "active", 2);
@@ -2256,12 +2012,12 @@ L([
 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--)
+var us = Object.defineProperty, fs = Object.getOwnPropertyDescriptor, st = (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 && vs(t, s, i), i;
-}, Z;
-let ue = (Z = class extends HTMLElement {
+  return n && i && us(t, s, i), i;
+}, Q;
+let ue = (Q = class extends HTMLElement {
   constructor() {
     super(...arguments);
     a(this, "content", []);
@@ -2271,14 +2027,14 @@ let ue = (Z = class extends HTMLElement {
       className: "sps-tabbed-nav"
     }, this.content);
   }
-}, a(Z, "displayName", "sps-nav-tab-set"), a(Z, "props", {}), Z);
+}, a(Q, "displayName", "sps-nav-tab-set"), a(Q, "props", {}), Q);
 st([
   _e()
 ], ue.prototype, "content", 2);
 ue = st([
   j({ tag: "sps-nav-tab-set" })
 ], ue);
-const Ds = {
+const As = {
   basic: {
     label: "Basic Navigation Tabs",
     description: c`
@@ -2316,6 +2072,246 @@ const Ds = {
     }
   }
 };
+var gs = Object.defineProperty, ms = Object.getOwnPropertyDescriptor, E = (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;
+}, vs = /* @__PURE__ */ ((e) => (e.FIT = "fit", e.FILL = "fill", e))(vs || {});
+const F = "sps-photo";
+var Z;
+let A = (Z = class extends HTMLElement {
+  constructor() {
+    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 image() {
+    return this.imageInternal;
+  }
+  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));
+  }
+  get [T]() {
+    return [
+      F,
+      this.fitWidth ? `${F}--fit-width` : `${F}--fit-height`,
+      this.placeholderIcon && `${F}--placeholder`
+    ];
+  }
+  get [he]() {
+    return {
+      fontSize: `${this.width * 0.05}rem`,
+      width: `${this.width}rem`,
+      height: `${0.75 * this.width}rem`
+    };
+  }
+  connectedCallback() {
+    this.waitForWidthInterval = window.setInterval(() => {
+      const t = this.getBoundingClientRect();
+      t.width && (this.setWidth(t.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__ */ o("img", {
+      src: this.src,
+      alt: this.altText
+    }) : /* @__PURE__ */ o("span", null) : /* @__PURE__ */ o("i", {
+      className: `sps-icon sps-icon-${this.placeholderIcon}`
+    });
+  }
+  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;
+    }
+  }
+}, a(Z, "displayName", F), a(Z, "props", {
+  src: "string",
+  altText: "string",
+  mode: "SpsPhotoDisplayMode",
+  placeholderIcon: "SpsIcon"
+}), Z);
+E([
+  p()
+], A.prototype, "src", 2);
+E([
+  p()
+], A.prototype, "altText", 2);
+E([
+  p()
+], A.prototype, "mode", 2);
+E([
+  p()
+], A.prototype, "placeholderIcon", 2);
+E([
+  et()
+], A.prototype, "width", 2);
+E([
+  et()
+], A.prototype, "fitWidth", 2);
+E([
+  xe("img", { refresh: !0 })
+], A.prototype, "image", 1);
+A = E([
+  j({ tag: F })
+], A);
+const Ds = {
+  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>
+        `
+      }
+    }
+  },
+  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>
+            `
+      }
+    }
+  }
+};
 export {
   Ie as AttrBindings,
   T as ClassBindings,
@@ -2323,22 +2319,22 @@ export {
   _e as Content,
   Ne as EventDispatcher,
   re as EventListener,
-  Ss as MANIFEST,
+  _s as MANIFEST,
   tt as MIMEType,
   p as Prop,
   xe as QuerySelector,
   is as QuerySelectorAll,
   f as SpsFileUploadComponent,
-  Os as SpsFileUploadExamples,
+  Ss as SpsFileUploadExamples,
   y as SpsInsightCardComponent,
-  As as SpsInsightCardExamples,
+  Os as SpsInsightCardExamples,
   te as SpsInsightsComponent,
   P as SpsNavTabComponent,
   ue as SpsNavTabSetComponent,
-  Ds as SpsNavTabsExamples,
-  O as SpsPhotoComponent,
-  os as SpsPhotoDisplayMode,
-  ls as SpsPhotoExamples,
+  As as SpsNavTabsExamples,
+  A as SpsPhotoComponent,
+  vs as SpsPhotoDisplayMode,
+  Ds as SpsPhotoExamples,
   he as StyleBindings,
   et as Watch,
   o as h,