@sps-woodland/photo 8.7.4 → 8.7.6

package/lib/index.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const M=require("react"),d=require("@sps-woodland/core"),v=require("@sps-woodland/tokens"),I=require("@spscommerce/ds-react"),g=require("@spscommerce/ds-shared"),h=require("@spscommerce/utils");function T(e){if(e&&e.__esModule)return e;const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const r=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(a,o,r.get?r:{enumerable:!0,get:()=>e[o]})}}return a.default=e,Object.freeze(a)}const t=T(M);function W(e,a,o){return a in e?Object.defineProperty(e,a,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[a]=o,e}function E(e,a){var o=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);a&&(r=r.filter(function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable})),o.push.apply(o,r)}return o}function y(e){for(var a=1;a<arguments.length;a++){var o=arguments[a]!=null?arguments[a]:{};a%2?E(Object(o),!0).forEach(function(r){W(e,r,o[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):E(Object(o)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(o,r))})}return e}var z=(e,a,o)=>{for(var r of Object.keys(e)){var n;if(e[r]!==((n=a[r])!==null&&n!==void 0?n:o[r]))return!1}return!0},C=e=>a=>{var o=e.defaultClassName,r=y(y({},e.defaultVariants),a);for(var n in r){var c,p=(c=r[n])!==null&&c!==void 0?c:e.defaultVariants[n];if(p!=null){var s=p;typeof s=="boolean"&&(s=s===!0?"true":"false");var i=e.variantClassNames[n][s];i&&(o+=" "+i)}}for(var[l,u]of e.compoundVariants)z(l,r,e.defaultVariants)&&(o+=" "+u);return o},L=C({defaultClassName:"dons243",variantClassNames:{mode:{fill:"dons244",fit:"dons245"}},defaultVariants:{mode:"fill"},compoundVariants:[]}),q="dons246",D=C({defaultClassName:"dons240",variantClassNames:{placeholder:{true:"dons241",false:"dons242"}},defaultVariants:{placeholder:!1},compoundVariants:[]});function P({className:e,src:a,altText:o,mode:r="fill",placeholderIcon:n="photo",...c}){const p=t.useRef(null),s=t.useRef(null),i=t.useRef(null),l=t.useRef(null),[u,R]=t.useState(),[x,_]=t.useState(!1);t.useEffect(()=>{s.current&&(i.current&&(window.clearInterval(i.current),i.current=null),i.current=window.setInterval(()=>{if(s.current){const m=s.current.getBoundingClientRect();if(m.height){i.current&&(window.clearInterval(i.current),i.current=null);let f=!0;f=m.width/m.height>1,_(f===(r==="fit"))}}},1e3/60))},[p.current,s.current,a]),t.useEffect(()=>{l.current&&(window.clearInterval(l.current),l.current=null),l.current=window.setInterval(()=>{if(p.current){const m=p.current.getBoundingClientRect();m.width&&(F(m.width),l.current&&(window.clearInterval(l.current),l.current=null))}},1e3/60)},[p.current]);function F(m){var f,w,b;if(m){const N=((b=(w=(f=document==null?void 0:document.body)==null?void 0:f.parentElement)==null?void 0:w.style)==null?void 0:b.fontSize)||"16px",B=Number(N.substring(0,N.length-2));R(m/B)}}function V(){if(typeof u<"u")return u*.05}function A(){if(typeof u<"u")return .75*u}return t.createElement("div",{ref:p,className:d.cl(D({placeholder:!a}),e),style:{width:`${u}`&&`${u}rem`,fontSize:`${V()}rem`,height:`${A()}rem`},...c},a?u?t.createElement("img",{className:L({mode:x?"fit":"fill"}),ref:s,src:a,alt:o}):t.createElement("span",null):t.createElement(d.Icon,{className:q,icon:n}))}d.Metadata.set(P,{name:"Photo",props:{src:"string",altText:"string",mode:{type:'"fill" | "fit"',default:'"fill"'},placeholderIcon:"IconName"}});var O="i6pp7s1",S="i6pp7s0",k="i6pp7s3",G="i6pp7s2",K=C({defaultClassName:"i6pp7s4",variantClassNames:{selected:{true:"i6pp7s5",false:"i6pp7s6"}},defaultVariants:{selected:!1},compoundVariants:[]});function j({children:e,className:a,...o}){const[r]=d.selectChildren(e,[{type:P}]),[n,c]=t.useState(0);function p(){n+1===r.length?c(0):c(n+1)}function s(){c(n===0?r.length-1:n-1)}return t.createElement("div",{className:v.grid.root,...o},t.createElement("div",{className:d.cl(S)},t.createElement("div",{className:d.cl(O)},t.createElement(I.SpsButton,{tabIndex:0,kind:g.ButtonKind.ICON,icon:g.SpsIcon.ARROW_LEFT_CIRCLE,onClick:s}))),t.createElement("div",{className:v.grid[10]},t.createElement("div",{className:d.cl(k,v.grid[12])},r[n]),t.createElement("div",{className:d.cl(G,v.grid[12])},r.map((i,l)=>t.createElement("button",{tabIndex:0,className:d.cl(K({selected:l===n})),onClick:()=>c(l)},i)))),t.createElement("div",{className:d.cl(S)},t.createElement("div",{className:d.cl(O)},t.createElement(I.SpsButton,{tabIndex:0,kind:g.ButtonKind.ICON,icon:g.SpsIcon.ARROW_RIGHT_CIRCLE,onClick:p}))))}const H={components:[P,j],examples:{sizing:{label:"Sizing",description:"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.",examples:{basic:{react:h.code`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const W=require("react"),d=require("@sps-woodland/core"),v=require("@sps-woodland/tokens"),I=require("@spscommerce/ds-react"),g=require("@spscommerce/ds-shared"),f=require("@spscommerce/utils");function z(e){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const r=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(a,o,r.get?r:{enumerable:!0,get:()=>e[o]})}}return a.default=e,Object.freeze(a)}const t=z(W);function D(e,a,o){return a in e?Object.defineProperty(e,a,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[a]=o,e}function E(e,a){var o=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);a&&(r=r.filter(function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable})),o.push.apply(o,r)}return o}function y(e){for(var a=1;a<arguments.length;a++){var o=arguments[a]!=null?arguments[a]:{};a%2?E(Object(o),!0).forEach(function(r){D(e,r,o[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):E(Object(o)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(o,r))})}return e}var L=(e,a,o)=>{for(var r of Object.keys(e)){var n;if(e[r]!==((n=a[r])!==null&&n!==void 0?n:o[r]))return!1}return!0},C=e=>a=>{var o=e.defaultClassName,r=y(y({},e.defaultVariants),a);for(var n in r){var c,p=(c=r[n])!==null&&c!==void 0?c:e.defaultVariants[n];if(p!=null){var i=p;typeof i=="boolean"&&(i=i===!0?"true":"false");var s=e.variantClassNames[n][i];s&&(o+=" "+s)}}for(var[l,u]of e.compoundVariants)L(l,r,e.defaultVariants)&&(o+=" "+u);return o},M=C({defaultClassName:"dons243",variantClassNames:{mode:{fill:"dons244",fit:"dons245"}},defaultVariants:{mode:"fill"},compoundVariants:[]}),q="dons246",_=C({defaultClassName:"dons240",variantClassNames:{placeholder:{true:"dons241",false:"dons242"}},defaultVariants:{placeholder:!1},compoundVariants:[]});function P({className:e,src:a,altText:o,mode:r="fill",placeholderIcon:n="photo",...c}){const p=t.useRef(null),i=t.useRef(null),s=t.useRef(null),l=t.useRef(null),[u,R]=t.useState(),[x,F]=t.useState(!1);t.useEffect(()=>{i.current&&(s.current&&(window.clearInterval(s.current),s.current=null),s.current=window.setInterval(()=>{if(i.current){const m=i.current.getBoundingClientRect();if(m.height){s.current&&(window.clearInterval(s.current),s.current=null);let h=!0;h=m.width/m.height>1,F(h===(r==="fit"))}}},1e3/60))},[p.current,i.current,a]),t.useEffect(()=>{l.current&&(window.clearInterval(l.current),l.current=null),l.current=window.setInterval(()=>{if(p.current){const m=p.current.getBoundingClientRect();m.width&&(V(m.width),l.current&&(window.clearInterval(l.current),l.current=null))}},1e3/60)},[p.current]);function V(m){var h,w,b;if(m){const N=((b=(w=(h=document==null?void 0:document.body)==null?void 0:h.parentElement)==null?void 0:w.style)==null?void 0:b.fontSize)||"16px",T=Number(N.substring(0,N.length-2));R(m/T)}}function A(){if(typeof u<"u")return u*.05}function B(){if(typeof u<"u")return .75*u}return t.createElement("div",{ref:p,className:d.cl(_({placeholder:!a}),e),style:{width:`${u}`&&`${u}rem`,fontSize:`${A()}rem`,height:`${B()}rem`},...c},a?u?t.createElement("img",{className:M({mode:x?"fit":"fill"}),ref:i,src:a,alt:o}):t.createElement("span",null):t.createElement(d.Icon,{className:q,icon:n}))}d.Metadata.set(P,{name:"Photo",props:{src:"string",altText:"string",mode:{type:'"fill" | "fit"',default:'"fill"'},placeholderIcon:"IconName"}});var O="i6pp7s1",S="i6pp7s0",k="i6pp7s3",G="i6pp7s2",K=C({defaultClassName:"i6pp7s4",variantClassNames:{selected:{true:"i6pp7s5",false:"i6pp7s6"}},defaultVariants:{selected:!1},compoundVariants:[]});function j({children:e,className:a,...o}){const[r]=d.selectChildren(e,[{type:P}]),[n,c]=t.useState(0);function p(){n+1===r.length?c(0):c(n+1)}function i(){c(n===0?r.length-1:n-1)}return t.createElement("div",{className:v.grid.root,...o},t.createElement("div",{className:d.cl(S)},t.createElement("div",{className:d.cl(O)},t.createElement(I.SpsButton,{tabIndex:0,kind:g.ButtonKind.ICON,icon:g.SpsIcon.ARROW_LEFT_CIRCLE,onClick:i}))),t.createElement("div",{className:v.grid[10]},t.createElement("div",{className:d.cl(k,v.grid[12])},r[n]),t.createElement("div",{className:d.cl(G,v.grid[12])},r.map((s,l)=>t.createElement("button",{tabIndex:0,className:d.cl(K({selected:l===n})),onClick:()=>c(l)},s)))),t.createElement("div",{className:d.cl(S)},t.createElement("div",{className:d.cl(O)},t.createElement(I.SpsButton,{tabIndex:0,kind:g.ButtonKind.ICON,icon:g.SpsIcon.ARROW_RIGHT_CIRCLE,onClick:p}))))}const H={components:[P,j],examples:{sizing:{label:"Sizing",description:"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.",examples:{basic:{react:f.code`
             import { Photo } from "@sps-woodland/photo";
             import { Card } from "@sps-woodland/cards";
 
@@ -23,7 +23,7 @@
                 </div>
               )
             }
-          `}}},displayMode:{label:"Fill vs. Fit",description:()=>t.createElement("p",null,"There are two display modes available:",t.createElement("ul",null,t.createElement("li",null,t.createElement("b",null,'"fill"')," fills the entire 4:3 container, cropping off any excess portions of the image."),t.createElement("li",null,t.createElement("b",null,'"fit"')," fits the entire image into the container, leaving any excess portions of the container blank."))),examples:{landscape:{description:"Landscape oriented photo",react:h.code`
+          `}}},displayMode:{label:"Fill vs. Fit",description:()=>t.createElement("p",null,"There are two display modes available:",t.createElement("ul",null,t.createElement("li",null,t.createElement("b",null,'"fill"')," fills the entire 4:3 container, cropping off any excess portions of the image."),t.createElement("li",null,t.createElement("b",null,'"fit"')," fits the entire image into the container, leaving any excess portions of the container blank."))),examples:{landscape:{description:"Landscape oriented photo",react:f.code`
             import { Photo } from "@sps-woodland/photo";
             import { Card } from "@sps-woodland/cards";
               
@@ -43,7 +43,7 @@
                 </div>
               )
             }
-          `},portrait:{description:"Portrait oriented photo ",react:h.code`
+          `},portrait:{description:"Portrait oriented photo ",react:f.code`
             import { Photo } from "@sps-woodland/photo";
             import { Card } from "@sps-woodland/cards";
               
@@ -63,7 +63,7 @@
                 </div>
               )
             }
-          `}}},placeholder:{label:"Placeholders",description:"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.",examples:{general:{description:"General Photo",react:h.code`
+          `}}},placeholder:{label:"Placeholders",description:"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.",examples:{general:{description:"General Photo",react:f.code`
             import { Photo } from "@sps-woodland/photo";
               
             function Component () {
@@ -75,7 +75,7 @@
                 </div>
               )
             }
-          `},photoAlt:{description:"Photo Alt",react:h.code`
+          `},photoAlt:{description:"Photo Alt",react:f.code`
             import { Photo } from "@sps-woodland/photo";
               
             function Component () {
@@ -87,7 +87,7 @@
                 </div>
               )
             }
-          `},user:{description:"User / Single Person",react:h.code`
+          `},user:{description:"User / Single Person",react:f.code`
             import { Photo } from "@sps-woodland/photo";
               
             function Component () {
@@ -99,7 +99,7 @@
                 </div>
               )
             }
-          `},group:{description:"Group / Multiple People",react:h.code`
+          `},group:{description:"Group / Multiple People",react:f.code`
             import { Photo } from "@sps-woodland/photo";
             
             function Component () {
@@ -111,7 +111,7 @@
                 </div>
               )
             }
-          `},company:{description:"Company / Building",react:h.code`
+          `},company:{description:"Company / Building",react:f.code`
             import { Photo } from "@sps-woodland/photo";
 
             function Component () {
@@ -123,7 +123,7 @@
                 </div>
               )
             }
-          `}}},carousel:{label:"Photo Carousel",description:"",examples:{general:{description:"",react:h.code`
+          `}}},carousel:{label:"Photo Carousel",description:"",examples:{general:{description:"",react:f.code`
             import { PhotoCarousel, Photo } from "@sps-woodland/photo";
 
             function Component () {

package/lib/index.es.js

@@ -1,10 +1,10 @@
 import * as e from "react";
-import { Metadata as B, cl as h, Icon as L, selectChildren as z } from "@sps-woodland/core";
+import { Metadata as L, cl as f, Icon as z, selectChildren as T } from "@sps-woodland/core";
 import { grid as v } from "@sps-woodland/tokens";
 import { SpsButton as b } from "@spscommerce/ds-react";
 import { ButtonKind as I, SpsIcon as E } from "@spscommerce/ds-shared";
 import { code as u } from "@spscommerce/utils";
-function T(t, a, r) {
+function D(t, a, r) {
   return a in t ? Object.defineProperty(t, a, {
     value: r,
     enumerable: !0,
@@ -26,14 +26,14 @@ function O(t) {
   for (var a = 1; a < arguments.length; a++) {
     var r = arguments[a] != null ? arguments[a] : {};
     a % 2 ? y(Object(r), !0).forEach(function(o) {
-      T(t, o, r[o]);
+      D(t, o, r[o]);
     }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(r)) : y(Object(r)).forEach(function(o) {
       Object.defineProperty(t, o, Object.getOwnPropertyDescriptor(r, o));
     });
   }
   return t;
 }
-var D = (t, a, r) => {
+var M = (t, a, r) => {
   for (var o of Object.keys(t)) {
     var n;
     if (t[o] !== ((n = a[o]) !== null && n !== void 0 ? n : r[o]))
@@ -45,16 +45,19 @@ var D = (t, a, r) => {
   for (var n in o) {
     var d, c = (d = o[n]) !== null && d !== void 0 ? d : t.defaultVariants[n];
     if (c != null) {
-      var s = c;
-      typeof s == "boolean" && (s = s === !0 ? "true" : "false");
-      var i = t.variantClassNames[n][s];
-      i && (r += " " + i);
+      var i = c;
+      typeof i == "boolean" && (i = i === !0 ? "true" : "false");
+      var s = (
+        // @ts-expect-error
+        t.variantClassNames[n][i]
+      );
+      s && (r += " " + s);
     }
   }
   for (var [l, p] of t.compoundVariants)
-    D(l, o, t.defaultVariants) && (r += " " + p);
+    M(l, o, t.defaultVariants) && (r += " " + p);
   return r;
-}, M = g({ defaultClassName: "dons243", variantClassNames: { mode: { fill: "dons244", fit: "dons245" } }, defaultVariants: { mode: "fill" }, compoundVariants: [] }), G = "dons246", H = g({ defaultClassName: "dons240", variantClassNames: { placeholder: { true: "dons241", false: "dons242" } }, defaultVariants: { placeholder: !1 }, compoundVariants: [] });
+}, G = g({ defaultClassName: "dons243", variantClassNames: { mode: { fill: "dons244", fit: "dons245" } }, defaultVariants: { mode: "fill" }, compoundVariants: [] }), H = "dons246", K = g({ defaultClassName: "dons240", variantClassNames: { placeholder: { true: "dons241", false: "dons242" } }, defaultVariants: { placeholder: !1 }, compoundVariants: [] });
 function P({
   className: t,
   src: a,
@@ -63,19 +66,19 @@ function P({
   placeholderIcon: n = "photo",
   ...d
 }) {
-  const c = e.useRef(null), s = e.useRef(null), i = e.useRef(null), l = e.useRef(null), [p, j] = e.useState(), [S, V] = e.useState(!1);
+  const c = e.useRef(null), i = e.useRef(null), s = e.useRef(null), l = e.useRef(null), [p, j] = e.useState(), [S, V] = e.useState(!1);
   e.useEffect(() => {
-    s.current && (i.current && (window.clearInterval(i.current), i.current = null), i.current = window.setInterval(() => {
-      if (s.current) {
-        const m = s.current.getBoundingClientRect();
+    i.current && (s.current && (window.clearInterval(s.current), s.current = null), s.current = window.setInterval(() => {
+      if (i.current) {
+        const m = i.current.getBoundingClientRect();
         if (m.height) {
-          i.current && (window.clearInterval(i.current), i.current = null);
-          let f = !0;
-          f = m.width / m.height > 1, V(f === (o === "fit"));
+          s.current && (window.clearInterval(s.current), s.current = null);
+          let h = !0;
+          h = m.width / m.height > 1, V(h === (o === "fit"));
         }
       }
     }, 1e3 / 60));
-  }, [c.current, s.current, a]), e.useEffect(() => {
+  }, [c.current, i.current, a]), e.useEffect(() => {
     l.current && (window.clearInterval(l.current), l.current = null), l.current = window.setInterval(() => {
       if (c.current) {
         const m = c.current.getBoundingClientRect();
@@ -84,10 +87,10 @@ function P({
     }, 1e3 / 60);
   }, [c.current]);
   function F(m) {
-    var f, C, w;
+    var h, C, w;
     if (m) {
-      const N = ((w = (C = (f = document == null ? void 0 : document.body) == null ? void 0 : f.parentElement) == null ? void 0 : C.style) == null ? void 0 : w.fontSize) || "16px", _ = Number(N.substring(0, N.length - 2));
-      j(m / _);
+      const N = ((w = (C = (h = document == null ? void 0 : document.body) == null ? void 0 : h.parentElement) == null ? void 0 : C.style) == null ? void 0 : w.fontSize) || "16px", B = Number(N.substring(0, N.length - 2));
+      j(m / B);
     }
   }
   function W() {
@@ -102,7 +105,7 @@ function P({
     "div",
     {
       ref: c,
-      className: h(H({ placeholder: !a }), t),
+      className: f(K({ placeholder: !a }), t),
       style: {
         width: `${p}` && `${p}rem`,
         fontSize: `${W()}rem`,
@@ -113,15 +116,15 @@ function P({
     a ? p ? /* @__PURE__ */ e.createElement(
       "img",
       {
-        className: M({ mode: S ? "fit" : "fill" }),
-        ref: s,
+        className: G({ mode: S ? "fit" : "fill" }),
+        ref: i,
         src: a,
         alt: r
       }
-    ) : /* @__PURE__ */ e.createElement("span", null) : /* @__PURE__ */ e.createElement(L, { className: G, icon: n })
+    ) : /* @__PURE__ */ e.createElement("span", null) : /* @__PURE__ */ e.createElement(z, { className: H, icon: n })
   );
 }
-B.set(P, {
+L.set(P, {
   name: "Photo",
   props: {
     src: "string",
@@ -133,36 +136,36 @@ B.set(P, {
     placeholderIcon: "IconName"
   }
 });
-var x = "i6pp7s1", R = "i6pp7s0", K = "i6pp7s3", k = "i6pp7s2", U = g({ defaultClassName: "i6pp7s4", variantClassNames: { selected: { true: "i6pp7s5", false: "i6pp7s6" } }, defaultVariants: { selected: !1 }, compoundVariants: [] });
+var x = "i6pp7s1", R = "i6pp7s0", _ = "i6pp7s3", k = "i6pp7s2", U = g({ defaultClassName: "i6pp7s4", variantClassNames: { selected: { true: "i6pp7s5", false: "i6pp7s6" } }, defaultVariants: { selected: !1 }, compoundVariants: [] });
 function q({
   children: t,
   className: a,
   ...r
 }) {
-  const [o] = z(t, [{ type: P }]), [n, d] = e.useState(0);
+  const [o] = T(t, [{ type: P }]), [n, d] = e.useState(0);
   function c() {
     n + 1 === o.length ? d(0) : d(n + 1);
   }
-  function s() {
+  function i() {
     d(n === 0 ? o.length - 1 : n - 1);
   }
-  return /* @__PURE__ */ e.createElement("div", { className: v.root, ...r }, /* @__PURE__ */ e.createElement("div", { className: h(R) }, /* @__PURE__ */ e.createElement("div", { className: h(x) }, /* @__PURE__ */ e.createElement(
+  return /* @__PURE__ */ e.createElement("div", { className: v.root, ...r }, /* @__PURE__ */ e.createElement("div", { className: f(R) }, /* @__PURE__ */ e.createElement("div", { className: f(x) }, /* @__PURE__ */ e.createElement(
     b,
     {
       tabIndex: 0,
       kind: I.ICON,
       icon: E.ARROW_LEFT_CIRCLE,
-      onClick: s
+      onClick: i
     }
-  ))), /* @__PURE__ */ e.createElement("div", { className: v[10] }, /* @__PURE__ */ e.createElement("div", { className: h(K, v[12]) }, o[n]), /* @__PURE__ */ e.createElement("div", { className: h(k, v[12]) }, o.map((i, l) => /* @__PURE__ */ e.createElement(
+  ))), /* @__PURE__ */ e.createElement("div", { className: v[10] }, /* @__PURE__ */ e.createElement("div", { className: f(_, v[12]) }, o[n]), /* @__PURE__ */ e.createElement("div", { className: f(k, v[12]) }, o.map((s, l) => /* @__PURE__ */ e.createElement(
     "button",
     {
       tabIndex: 0,
-      className: h(U({ selected: l === n })),
+      className: f(U({ selected: l === n })),
       onClick: () => d(l)
     },
-    i
-  )))), /* @__PURE__ */ e.createElement("div", { className: h(R) }, /* @__PURE__ */ e.createElement("div", { className: h(x) }, /* @__PURE__ */ e.createElement(
+    s
+  )))), /* @__PURE__ */ e.createElement("div", { className: f(R) }, /* @__PURE__ */ e.createElement("div", { className: f(x) }, /* @__PURE__ */ e.createElement(
     b,
     {
       tabIndex: 0,

package/lib/style.css

@@ -1 +1 @@
-.dons240{align-items:center;display:flex;justify-content:center;overflow:hidden;padding:0!important;vertical-align:middle}.dons241{background:oklch(96.64% .001 197.14);box-shadow:inset .0625rem 0 0 oklch(86.84% .002 197.12),inset -.0625rem 0 0 oklch(86.84% .002 197.12),inset 0 .0625rem 0 oklch(86.84% .002 197.12),inset 0 -.0625rem 0 oklch(86.84% .002 197.12),inset 1em 0 0 oklch(100% 0 0),inset -1em 0 0 oklch(100% 0 0),inset 0 1em 0 oklch(100% 0 0),inset 0 -1em 0 oklch(100% 0 0)}.dons243{visibility:hidden}.dons244{height:100%;visibility:visible;width:auto}.dons245{height:auto;visibility:visible;width:100%}.dons246{flex:1;font-size:6em;text-align:center;color:oklch(56.48% .008 219.62)}.i6pp7s0{display:table;float:right}.i6pp7s1{display:table-cell;vertical-align:middle}.i6pp7s2{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}.i6pp7s3{display:block;margin-bottom:.5rem;width:100%}.i6pp7s4{display:block;background:transparent;border:0;cursor:pointer;padding:0}.i6pp7s6{opacity:.4}
+.dons240{align-items:center;display:flex;justify-content:center;overflow:hidden;padding:0!important;vertical-align:middle}.dons241{background:#f3f4f4;box-shadow:inset .0625rem 0 #d2d4d4,inset -.0625rem 0 #d2d4d4,inset 0 .0625rem #d2d4d4,inset 0 -.0625rem #d2d4d4,inset 1em 0 #fff,inset -1em 0 #fff,inset 0 1em #fff,inset 0 -1em #fff}.dons243{visibility:hidden}.dons244{height:100%;visibility:visible;width:auto}.dons245{height:auto;visibility:visible;width:100%}.dons246{flex:1;font-size:6em;text-align:center;color:#717779}.i6pp7s0{display:table;float:right}.i6pp7s1{display:table-cell;vertical-align:middle}.i6pp7s2{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}.i6pp7s3{display:block;margin-bottom:.5rem;width:100%}.i6pp7s4{display:block;background:transparent;border:0;cursor:pointer;padding:0}.i6pp7s6{opacity:.4}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sps-woodland/photo",
   "description": "SPS Woodland Design System photo component",
-  "version": "8.7.4",
+  "version": "8.7.6",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/photo",
@@ -29,10 +29,10 @@
     "@spscommerce/utils": "^6.12.1",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "@sps-woodland/core": "8.7.4",
-    "@sps-woodland/tokens": "8.7.4",
-    "@spscommerce/ds-react": "8.7.4",
-    "@spscommerce/ds-shared": "8.7.4"
+    "@sps-woodland/core": "8.7.6",
+    "@sps-woodland/tokens": "8.7.6",
+    "@spscommerce/ds-react": "8.7.6",
+    "@spscommerce/ds-shared": "8.7.6"
   },
   "devDependencies": {
     "@spscommerce/utils": "^6.12.1",
@@ -40,10 +40,10 @@
     "@vanilla-extract/recipes": "^0.2.5",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "@sps-woodland/core": "8.7.4",
-    "@sps-woodland/tokens": "8.7.4",
-    "@spscommerce/ds-react": "8.7.4",
-    "@spscommerce/ds-shared": "8.7.4"
+    "@sps-woodland/core": "8.7.6",
+    "@sps-woodland/tokens": "8.7.6",
+    "@spscommerce/ds-react": "8.7.6",
+    "@spscommerce/ds-shared": "8.7.6"
   },
   "scripts": {
     "build": "pnpm run build:js && pnpm run build:types",