@shopify/cli-hydrogen 4.0.0-alpha.8 → 4.0.0

package/dist/templates/demo-store/dist/client/build/_assets/custom-font-COCMVHUB.css

@@ -1,13 +0,0 @@
-@font-face {
-  font-family: 'IBMPlexSerif';
-  font-display: swap;
-  font-weight: 400;
-  src: url('../../fonts/IBMPlexSerif-Text.woff2') format('woff2');
-}
-@font-face {
-  font-family: 'IBMPlexSerif';
-  font-display: swap;
-  font-weight: 400;
-  font-style: italic;
-  src: url('../../fonts/IBMPlexSerif-TextItalic.woff2') format('woff2');
-}

package/dist/templates/demo-store/dist/client/build/_assets/favicon-5FIZBM2K.svg

@@ -1,28 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none">
-  <style>
-    .stroke {
-      stroke: #000;
-    }
-    .fill {
-      fill: #000;
-    }
-    @media (prefers-color-scheme: dark) {
-      .stroke {
-        stroke: #fff;
-      }
-      .fill {
-        fill: #fff;
-      }
-    }
-  </style>
-  <path
-    class="stroke"
-    fill-rule="evenodd"
-    d="M16.1 16.04 1 8.02 6.16 5.3l5.82 3.09 4.88-2.57-5.82-3.1L16.21 0l15.1 8.02-5.17 2.72-5.5-2.91-4.88 2.57 5.5 2.92-5.16 2.72Z"
-  />
-  <path
-    class="fill"
-    fill-rule="evenodd"
-    d="M16.1 32 1 23.98l5.16-2.72 5.82 3.08 4.88-2.57-5.82-3.08 5.17-2.73 15.1 8.02-5.17 2.72-5.5-2.92-4.88 2.58 5.5 2.92L16.1 32Z"
-  />
-</svg>

package/dist/templates/demo-store/dist/client/build/_shared/chunk-3HDCZC7Z.js

@@ -1,2 +0,0 @@
-import{F as m,G as p,H as f,K as y,R as a,Y as C,ba as h,ca as v}from"/build/_shared/chunk-GHUOM4KB.js";import{q as g}from"/build/_shared/chunk-ZNLABNO4.js";import{b as u}from"/build/_shared/chunk-KSKV5IK6.js";import{b as d}from"/build/_shared/chunk-X4LCECW4.js";var t=d(u());var E=()=>({title:"All Collections"});function w(){let{collections:e}=g();return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(f,{heading:"Collections"}),(0,t.jsx)(p,{children:(0,t.jsx)(v,{connection:e,children:({endCursor:n,hasNextPage:r,hasPreviousPage:l,nextPageUrl:$,nodes:o,prevPageUrl:I,startCursor:s,nextLinkRef:x,isLoading:i})=>(0,t.jsxs)(t.Fragment,{children:[l&&(0,t.jsx)("div",{className:"flex items-center justify-center mt-6",children:(0,t.jsx)(a,{to:I,variant:"secondary",width:"full",prefetch:"intent",disabled:!i,state:{pageInfo:{endCursor:n,hasNextPage:r,startCursor:s},nodes:o},children:i?"Loading...":"Previous products"})}),(0,t.jsx)(h,{items:o.length===3?3:2,"data-test":"collection-grid",children:o.map((c,L)=>(0,t.jsx)(N,{collection:c,loading:y(L,2)},c.id))}),r&&(0,t.jsx)("div",{className:"flex items-center justify-center mt-6",children:(0,t.jsx)(a,{ref:x,to:$,variant:"secondary",width:"full",prefetch:"intent",disabled:!i,state:{pageInfo:{endCursor:n,hasPreviousPage:l,startCursor:s},nodes:o},children:i?"Loading...":"Next products"})})]})})})]})}function N({collection:e,loading:n}){return(0,t.jsxs)(C,{to:`/collections/${e.handle}`,className:"grid gap-4",children:[(0,t.jsx)("div",{className:"card-image bg-primary/5 aspect-[3/2]",children:e?.image&&(0,t.jsx)("img",{alt:e.title,src:e.image.url,height:400,sizes:"(max-width: 32em) 100vw, 33vw",width:600,loading:n})}),(0,t.jsx)(m,{as:"h3",size:"copy",children:e.title})]})}export{E as a,w as b};
-//# sourceMappingURL=/build/_shared/chunk-3HDCZC7Z.js.map

package/dist/templates/demo-store/dist/client/build/_shared/chunk-3HDCZC7Z.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../app/routes/collections/index.tsx"],
-  "sourcesContent": ["import {json, type MetaFunction, type LoaderArgs} from '@shopify/remix-oxygen';\nimport {useLoaderData} from '@remix-run/react';\nimport type {\n  Collection,\n  CollectionConnection,\n} from '@shopify/hydrogen-react/storefront-api-types';\nimport {\n  Grid,\n  Heading,\n  PageHeader,\n  Section,\n  Link,\n  Pagination,\n  getPaginationVariables,\n  Button,\n} from '~/components';\nimport {getImageLoadingPriority} from '~/lib/const';\n\nconst PAGINATION_SIZE = 8;\n\nexport const loader = async ({request, context: {storefront}}: LoaderArgs) => {\n  const variables = getPaginationVariables(request, PAGINATION_SIZE);\n  const {collections} = await storefront.query<{\n    collections: CollectionConnection;\n  }>(COLLECTIONS_QUERY, {\n    variables: {\n      ...variables,\n      country: storefront.i18n.country,\n      language: storefront.i18n.language,\n    },\n  });\n\n  return json({collections});\n};\n\nexport const meta: MetaFunction = () => {\n  return {\n    title: 'All Collections',\n  };\n};\n\nexport default function Collections() {\n  const {collections} = useLoaderData<typeof loader>();\n\n  return (\n    <>\n      <PageHeader heading=\"Collections\" />\n      <Section>\n        <Pagination connection={collections}>\n          {({\n            endCursor,\n            hasNextPage,\n            hasPreviousPage,\n            nextPageUrl,\n            nodes,\n            prevPageUrl,\n            startCursor,\n            nextLinkRef,\n            isLoading,\n          }) => (\n            <>\n              {hasPreviousPage && (\n                <div className=\"flex items-center justify-center mt-6\">\n                  <Button\n                    to={prevPageUrl}\n                    variant=\"secondary\"\n                    width=\"full\"\n                    prefetch=\"intent\"\n                    disabled={!isLoading}\n                    state={{\n                      pageInfo: {\n                        endCursor,\n                        hasNextPage,\n                        startCursor,\n                      },\n                      nodes,\n                    }}\n                  >\n                    {isLoading ? 'Loading...' : 'Previous products'}\n                  </Button>\n                </div>\n              )}\n              <Grid\n                items={nodes.length === 3 ? 3 : 2}\n                data-test=\"collection-grid\"\n              >\n                {nodes.map((collection, i) => (\n                  <CollectionCard\n                    collection={collection as Collection}\n                    key={collection.id}\n                    loading={getImageLoadingPriority(i, 2)}\n                  />\n                ))}\n              </Grid>\n              {hasNextPage && (\n                <div className=\"flex items-center justify-center mt-6\">\n                  <Button\n                    ref={nextLinkRef}\n                    to={nextPageUrl}\n                    variant=\"secondary\"\n                    width=\"full\"\n                    prefetch=\"intent\"\n                    disabled={!isLoading}\n                    state={{\n                      pageInfo: {\n                        endCursor,\n                        hasPreviousPage,\n                        startCursor,\n                      },\n                      nodes,\n                    }}\n                  >\n                    {isLoading ? 'Loading...' : 'Next products'}\n                  </Button>\n                </div>\n              )}\n            </>\n          )}\n        </Pagination>\n      </Section>\n    </>\n  );\n}\n\nfunction CollectionCard({\n  collection,\n  loading,\n}: {\n  collection: Collection;\n  loading?: HTMLImageElement['loading'];\n}) {\n  return (\n    <Link to={`/collections/${collection.handle}`} className=\"grid gap-4\">\n      <div className=\"card-image bg-primary/5 aspect-[3/2]\">\n        {collection?.image && (\n          <img\n            alt={collection.title}\n            src={collection.image.url}\n            height={400}\n            sizes=\"(max-width: 32em) 100vw, 33vw\"\n            width={600}\n            loading={loading}\n          />\n        )}\n      </div>\n      <Heading as=\"h3\" size=\"copy\">\n        {collection.title}\n      </Heading>\n    </Link>\n  );\n}\n\nconst COLLECTIONS_QUERY = `#graphql\n  query Collections(\n    $country: CountryCode\n    $language: LanguageCode\n    $first: Int\n    $last: Int\n    $startCursor: String\n    $endCursor: String\n  ) @inContext(country: $country, language: $language) {\n    collections(first: $first, last: $last, before: $startCursor, after: $endCursor) {\n      nodes {\n        id\n        title\n        description\n        handle\n        seo {\n          description\n          title\n        }\n        image {\n          id\n          url\n          width\n          height\n          altText\n        }\n      }\n      pageInfo {\n        hasPreviousPage\n        hasNextPage\n        startCursor\n        endCursor\n      }\n    }\n  }\n`;\n"],
-  "mappings": "uQAAA,IAAAA,EAAA,OAmCO,IAAMC,EAAqB,KACzB,CACL,MAAO,iBACT,GAGa,SAARC,GAA+B,CACpC,GAAM,CAAC,YAAAC,CAAW,EAAIC,EAA6B,EAEnD,SACE,oBACE,oBAACC,EAAA,CAAW,QAAQ,cAAc,KAClC,OAACC,EAAA,CACC,mBAACC,EAAA,CAAW,WAAYJ,EACrB,UAAC,CACA,UAAAK,EACA,YAAAC,EACA,gBAAAC,EACA,YAAAC,EACA,MAAAC,EACA,YAAAC,EACA,YAAAC,EACA,YAAAC,EACA,UAAAC,CACF,OACE,oBACG,UAAAN,MACC,OAAC,OAAI,UAAU,wCACb,mBAACO,EAAA,CACC,GAAIJ,EACJ,QAAQ,YACR,MAAM,OACN,SAAS,SACT,SAAU,CAACG,EACX,MAAO,CACL,SAAU,CACR,UAAAR,EACA,YAAAC,EACA,YAAAK,CACF,EACA,MAAAF,CACF,EAEC,SAAAI,EAAY,aAAe,oBAC9B,EACF,KAEF,OAACE,EAAA,CACC,MAAON,EAAM,SAAW,EAAI,EAAI,EAChC,YAAU,kBAET,SAAAA,EAAM,IAAI,CAACO,EAAYC,OACtB,OAACC,EAAA,CACC,WAAYF,EAEZ,QAASG,EAAwBF,EAAG,CAAC,GADhCD,EAAW,EAElB,CACD,EACH,EACCV,MACC,OAAC,OAAI,UAAU,wCACb,mBAACQ,EAAA,CACC,IAAKF,EACL,GAAIJ,EACJ,QAAQ,YACR,MAAM,OACN,SAAS,SACT,SAAU,CAACK,EACX,MAAO,CACL,SAAU,CACR,UAAAR,EACA,gBAAAE,EACA,YAAAI,CACF,EACA,MAAAF,CACF,EAEC,SAAAI,EAAY,aAAe,gBAC9B,EACF,GAEJ,EAEJ,EACF,GACF,CAEJ,CAEA,SAASK,EAAe,CACtB,WAAAF,EACA,QAAAI,CACF,EAGG,CACD,SACE,QAACC,EAAA,CAAK,GAAI,gBAAgBL,EAAW,SAAU,UAAU,aACvD,oBAAC,OAAI,UAAU,uCACZ,SAAAA,GAAY,UACX,OAAC,OACC,IAAKA,EAAW,MAChB,IAAKA,EAAW,MAAM,IACtB,OAAQ,IACR,MAAM,gCACN,MAAO,IACP,QAASI,EACX,EAEJ,KACA,OAACE,EAAA,CAAQ,GAAG,KAAK,KAAK,OACnB,SAAAN,EAAW,MACd,GACF,CAEJ",
-  "names": ["import_jsx_runtime", "meta", "Collections", "collections", "useLoaderData", "PageHeader", "Section", "Pagination", "endCursor", "hasNextPage", "hasPreviousPage", "nextPageUrl", "nodes", "prevPageUrl", "startCursor", "nextLinkRef", "isLoading", "Button", "Grid", "collection", "i", "CollectionCard", "getImageLoadingPriority", "loading", "Link", "Heading"]
-}

package/dist/templates/demo-store/dist/client/build/_shared/chunk-6DT2GXU6.js

@@ -1,2 +0,0 @@
-import{G as i,H as s,K as g,Y as m,ba as c}from"/build/_shared/chunk-GHUOM4KB.js";import{b as d}from"/build/_shared/chunk-6IZ7NY57.js";import{q as r}from"/build/_shared/chunk-ZNLABNO4.js";import{b as l}from"/build/_shared/chunk-KSKV5IK6.js";import{b as n}from"/build/_shared/chunk-X4LCECW4.js";var e=n(l()),u="Journal",$={seo:{titleTemplate:"%s | Journal"}};var H=()=>({title:"All Journals"});function p(){let{articles:a}=r();return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(s,{heading:u}),(0,e.jsx)(i,{children:(0,e.jsx)(c,{as:"ol",layout:"blog",children:a.map((t,o)=>(0,e.jsx)(h,{blogHandle:u.toLowerCase(),article:t,loading:g(o,2)},t.id))})})]})}function h({blogHandle:a,article:t,loading:o}){return(0,e.jsx)("li",{children:(0,e.jsxs)(m,{to:`/${a}/${t.handle}`,children:[t.image&&(0,e.jsx)("div",{className:"card-image aspect-[3/2]",children:(0,e.jsx)(d,{alt:t.image.altText||t.title,className:"object-cover w-full",data:t.image,height:400,loading:o,sizes:"(min-width: 768px) 50vw, 100vw",width:600,loaderOptions:{scale:2,crop:"center"}})}),(0,e.jsx)("h2",{className:"mt-4 font-medium",children:t.title}),(0,e.jsx)("span",{className:"block mt-1",children:t.publishedAt})]})},t.id)}export{$ as a,H as b,p as c};
-//# sourceMappingURL=/build/_shared/chunk-6DT2GXU6.js.map

package/dist/templates/demo-store/dist/client/build/_shared/chunk-6DT2GXU6.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../app/routes/journal/index.tsx"],
-  "sourcesContent": ["import {json, type MetaFunction, type LoaderArgs} from '@shopify/remix-oxygen';\nimport {useLoaderData} from '@remix-run/react';\nimport {flattenConnection, Image} from '@shopify/hydrogen-react';\nimport type {Article, Blog} from '@shopify/hydrogen-react/storefront-api-types';\nimport {Grid, PageHeader, Section, Link} from '~/components';\nimport {getImageLoadingPriority, PAGINATION_SIZE} from '~/lib/const';\n\nconst BLOG_HANDLE = 'Journal';\n\nexport const handle = {\n  seo: {\n    titleTemplate: '%s | Journal',\n  },\n};\n\nexport const loader = async ({context: {storefront}}: LoaderArgs) => {\n  const {language, country} = storefront.i18n;\n  const {blog} = await storefront.query<{\n    blog: Blog;\n  }>(BLOGS_QUERY, {\n    variables: {\n      blogHandle: BLOG_HANDLE,\n      pageBy: PAGINATION_SIZE,\n      language,\n    },\n  });\n\n  if (!blog?.articles) {\n    throw new Response('Not found', {status: 404});\n  }\n\n  const articles = flattenConnection(blog.articles).map((article) => {\n    const {publishedAt} = article;\n    return {\n      ...article,\n      publishedAt: new Intl.DateTimeFormat(`${language}-${country}`, {\n        year: 'numeric',\n        month: 'long',\n        day: 'numeric',\n      }).format(new Date(publishedAt!)),\n    };\n  });\n\n  return json(\n    {articles},\n    {\n      headers: {\n        // TODO cacheLong()\n      },\n    },\n  );\n};\n\nexport const meta: MetaFunction = () => {\n  return {\n    title: 'All Journals',\n  };\n};\n\nexport default function Journals() {\n  const {articles} = useLoaderData<typeof loader>();\n\n  return (\n    <>\n      <PageHeader heading={BLOG_HANDLE} />\n      <Section>\n        <Grid as=\"ol\" layout=\"blog\">\n          {articles.map((article, i) => (\n            <ArticleCard\n              blogHandle={BLOG_HANDLE.toLowerCase()}\n              article={article as Article}\n              key={article.id}\n              loading={getImageLoadingPriority(i, 2)}\n            />\n          ))}\n        </Grid>\n      </Section>\n    </>\n  );\n}\n\nfunction ArticleCard({\n  blogHandle,\n  article,\n  loading,\n}: {\n  blogHandle: string;\n  article: Article;\n  loading?: HTMLImageElement['loading'];\n}) {\n  return (\n    <li key={article.id}>\n      <Link to={`/${blogHandle}/${article.handle}`}>\n        {article.image && (\n          <div className=\"card-image aspect-[3/2]\">\n            <Image\n              alt={article.image.altText || article.title}\n              className=\"object-cover w-full\"\n              data={article.image}\n              height={400}\n              loading={loading}\n              sizes=\"(min-width: 768px) 50vw, 100vw\"\n              width={600}\n              loaderOptions={{\n                scale: 2,\n                crop: 'center',\n              }}\n            />\n          </div>\n        )}\n        <h2 className=\"mt-4 font-medium\">{article.title}</h2>\n        <span className=\"block mt-1\">{article.publishedAt}</span>\n      </Link>\n    </li>\n  );\n}\n\nconst BLOGS_QUERY = `#graphql\nquery Blog(\n  $language: LanguageCode\n  $blogHandle: String!\n  $pageBy: Int!\n  $cursor: String\n) @inContext(language: $language) {\n  blog(handle: $blogHandle) {\n    articles(first: $pageBy, after: $cursor) {\n      edges {\n        node {\n          author: authorV2 {\n            name\n          }\n          contentHtml\n          handle\n          id\n          image {\n            id\n            altText\n            url\n            width\n            height\n          }\n          publishedAt\n          title\n        }\n      }\n    }\n  }\n}\n`;\n"],
-  "mappings": "sSAAA,IAAAA,EAAA,OAOMC,EAAc,UAEPC,EAAS,CACpB,IAAK,CACH,cAAe,cACjB,CACF,EAwCO,IAAMC,EAAqB,KACzB,CACL,MAAO,cACT,GAGa,SAARC,GAA4B,CACjC,GAAM,CAAC,SAAAC,CAAQ,EAAIC,EAA6B,EAEhD,SACE,oBACE,oBAACC,EAAA,CAAW,QAASC,EAAa,KAClC,OAACC,EAAA,CACC,mBAACC,EAAA,CAAK,GAAG,KAAK,OAAO,OAClB,SAAAL,EAAS,IAAI,CAACM,EAASC,OACtB,OAACC,EAAA,CACC,WAAYL,EAAY,YAAY,EACpC,QAASG,EAET,QAASG,EAAwBF,EAAG,CAAC,GADhCD,EAAQ,EAEf,CACD,EACH,EACF,GACF,CAEJ,CAEA,SAASE,EAAY,CACnB,WAAAE,EACA,QAAAJ,EACA,QAAAK,CACF,EAIG,CACD,SACE,OAAC,MACC,oBAACC,EAAA,CAAK,GAAI,IAAIF,KAAcJ,EAAQ,SACjC,UAAAA,EAAQ,UACP,OAAC,OAAI,UAAU,0BACb,mBAACO,EAAA,CACC,IAAKP,EAAQ,MAAM,SAAWA,EAAQ,MACtC,UAAU,sBACV,KAAMA,EAAQ,MACd,OAAQ,IACR,QAASK,EACT,MAAM,iCACN,MAAO,IACP,cAAe,CACb,MAAO,EACP,KAAM,QACR,EACF,EACF,KAEF,OAAC,MAAG,UAAU,mBAAoB,SAAAL,EAAQ,MAAM,KAChD,OAAC,QAAK,UAAU,aAAc,SAAAA,EAAQ,YAAY,GACpD,GArBOA,EAAQ,EAsBjB,CAEJ",
-  "names": ["import_jsx_runtime", "BLOG_HANDLE", "handle", "meta", "Journals", "articles", "useLoaderData", "PageHeader", "BLOG_HANDLE", "Section", "Grid", "article", "i", "ArticleCard", "getImageLoadingPriority", "blogHandle", "loading", "Link", "Image"]
-}

package/dist/templates/demo-store/dist/client/build/_shared/chunk-6IZ7NY57.js

@@ -1,2 +0,0 @@
-import{a as P,b as y}from"/build/_shared/chunk-KSKV5IK6.js";import{b as h}from"/build/_shared/chunk-X4LCECW4.js";function Y(r){if(!r){let o=`flattenConnection(): needs a 'connection' to flatten, but received '${r}' instead`;return console.error(o),[]}return r.nodes?r.nodes:r.edges?r.edges.map(o=>{if(!o?.node)throw new Error("Connection edges must contain nodes");return o.node}):[]}var K=["cdn.shopify.com","cdn.shopifycdn.net","shopify-assets.shopifycdn.com","shopify-assets.shopifycdn.net"],X=["spin.dev"],ee=[...K,...X],b=[352,832,1200,1920,2560];function D({src:r,width:o,height:t,crop:i,scale:a}){let u=new URL(r),s=a??1;if(o){let c;typeof o=="string"?c=(b[0]*s).toString():c=(Number(o)*s).toString(),u.searchParams.append("width",c)}return t&&typeof t=="number"&&u.searchParams.append("height",(t*s).toString()),i&&u.searchParams.append("crop",i),u.toString()}function k(r){let o=new URL(r.src);return!ee.some(i=>o.hostname.endsWith(i))||!r.width&&!r.height&&!r.crop&&!r.scale?r.src:D(r)}function j({data:r,loaderOptions:o,elementProps:t}){var i,a,u,s,c,m;let l=null;return r?.width&&r?.height&&(l=r?.width/r?.height),o?.width||o?.height?{width:(i=o?.width)!=null?i:l&&typeof o.height=="number"?Math.round(l*o.height):null,height:(a=o?.height)!=null?a:l&&typeof o.width=="number"?Math.round(l*o.width):null}:t?.width||t?.height?{width:(u=t?.width)!=null?u:l&&typeof t.height=="number"?Math.round(l*t.height):null,height:(s=t?.height)!=null?s:l&&typeof t.width=="number"?Math.round(l*t.width):null}:r?.width||r?.height?{width:(c=r?.width)!=null?c:null,height:(m=r?.height)!=null?m:null}:{width:null,height:null}}var B=h(y(),1);function F({data:r,width:o,height:t,loading:i,loader:a=k,loaderOptions:u,widths:s,decoding:c="async",...m}){var l,f,d,n,p,g;if(!r.url){let T=`<Image/>: the 'data' prop requires the 'url' property. Image: ${(l=r.id)!=null?l:"no ID provided"}`;return console.error(T),null}let{width:v,height:S}=j({data:r,loaderOptions:u,elementProps:{width:o,height:t}}),w=r.url;if(a&&(w=a({...u,src:r.url,width:v,height:S}),typeof w!="string"||!w))throw new Error(`<Image/>: 'loader' did not return a valid string. Image: ${(f=r.id)!=null?f:r.url}`);let e=o&&v&&o<v?o:v,U=(d=m.srcSet)!=null?d:re({...u,widths:s,src:r.url,width:e,height:S,loader:a});return(0,B.jsx)("img",{id:(n=r.id)!=null?n:"",alt:(g=(p=r.altText)!=null?p:m.alt)!=null?g:"",loading:i??"lazy",...m,src:w,width:v??void 0,height:S??void 0,srcSet:U,decoding:c})}function re({src:r,width:o,crop:t,scale:i,widths:a,loader:u,height:s}){let c=a&&Array.isArray(a);if(c&&a.some(d=>isNaN(d)))throw new Error(`<Image/>: the 'widths' must be an array of numbers. Image: ${r}`);let m=1;o&&s&&(m=Number(s)/Number(o));let l=c?a:b;!c&&o&&o<b[b.length-1]&&(l=b.filter(d=>d<=o));let f=u||D;return l.map(d=>`${f({src:r,width:d,height:t?Number(d)*m:void 0,crop:t,scale:i})} ${d}w`).join(", ")}var L=h(P(),1);var C=h(P(),1);var $="2022-10";var oe=h(y(),1),te=(0,C.createContext)({storeDomain:"test.myshopify.com",storefrontToken:"abc123",storefrontApiVersion:$,country:{isoCode:"US"},language:{isoCode:"EN"},locale:"EN-US",getStorefrontApiUrl(){return""},getPublicTokenHeaders(){return{}}});function V(){let r=(0,C.useContext)(te);if(!r)throw new Error("'useShop()' must be a descendent of <ShopifyProvider/>");return r}function N(r){let{locale:o}=V();if(!o)throw new Error("useMoney(): Unable to get 'locale' from 'useShop()', which means that 'locale' was not passed to '<ShopifyProvider/>'. 'locale' is required for 'useMoney()' to work");let t=parseFloat(r.amount),i=(0,L.useMemo)(()=>({style:"currency",currency:r.currencyCode}),[r.currencyCode]),a=E(o,i),u=E(o,{...i,currencyDisplay:"name"}),s=E(o,{...i,currencyDisplay:"narrowSymbol"}),c=E(o,{...i,minimumFractionDigits:0,maximumFractionDigits:0}),m=E(o),l=E(o,{minimumFractionDigits:0,maximumFractionDigits:0}),f=n=>n.type==="currency",d=(0,L.useMemo)(()=>({original:()=>r,currencyCode:()=>r.currencyCode,localizedString:()=>a().format(t),parts:()=>a().formatToParts(t),withoutTrailingZeros:()=>t%1===0?c().format(t):a().format(t),withoutTrailingZerosAndCurrency:()=>t%1===0?l().format(t):m().format(t),currencyName:()=>{var n,p;return(p=(n=u().formatToParts(t).find(f))==null?void 0:n.value)!=null?p:r.currencyCode},currencySymbol:()=>{var n,p;return(p=(n=a().formatToParts(t).find(f))==null?void 0:n.value)!=null?p:r.currencyCode},currencyNarrowSymbol:()=>{var n,p;return(p=(n=s().formatToParts(t).find(f))==null?void 0:n.value)!=null?p:""},amount:()=>a().formatToParts(t).filter(n=>["decimal","fraction","group","integer","literal"].includes(n.type)).map(n=>n.value).join("")}),[r,t,u,a,s,m,c,l]);return(0,L.useMemo)(()=>new Proxy(d,{get:(n,p)=>{var g;return(g=Reflect.get(n,p))==null?void 0:g.call(null)}}),[d])}function E(r,o){return(0,L.useMemo)(()=>{let t;return()=>t??(t=new Intl.NumberFormat(r,o))},[r,o])}var x=h(y(),1);function ne({data:r,as:o,withoutCurrency:t,withoutTrailingZeros:i,measurement:a,measurementSeparator:u="/",...s}){if(!ie(r))throw new Error("<Money/> needs a valid 'data' prop that has 'amount' and 'currencyCode'");let c=N(r),m=o??"div",l=c.localizedString;return(t||i)&&(t&&!i?l=c.amount:!t&&i?l=c.withoutTrailingZeros:l=c.withoutTrailingZerosAndCurrency),(0,x.jsxs)(m,{...s,children:[l,a&&a.referenceUnit&&(0,x.jsxs)(x.Fragment,{children:[u,a.referenceUnit]})]})}function ie(r){return typeof r.amount=="string"&&!!r.amount&&typeof r.currencyCode=="string"&&!!r.currencyCode}var A=h(P(),1),q={};function ae(r,o){let t=q[r];if(t)return t;let i=new Promise((a,u)=>{let s=document.createElement("script");o?.module?s.type="module":s.type="text/javascript",s.src=r,s.onload=()=>{a(!0)},s.onerror=()=>{u(!1)},o?.in==="head"?document.head.appendChild(s):document.body.appendChild(s)});return q[r]=i,i}function I(r,o){let[t,i]=(0,A.useState)("loading"),a=JSON.stringify(o);return(0,A.useEffect)(()=>{async function u(){try{i("loading"),await ae(r,o),i("done")}catch{i("error")}}u()},[r,a,o]),t}var R=h(y(),1),le="https://cdn.shopify.com/shopifycloud/shop-js/v1.0/client.js";function se({variantIds:r,className:o,variantIdsAndQuantities:t,width:i}){let{storeDomain:a}=V(),u=I(le),s;if(r&&t)throw new Error(de);if(r)s=r.reduce((m,l)=>{let f=H(l);return f&&m.push(f),m},[]);else if(t)s=t.reduce((m,l)=>{var f;let d=H(l?.id);return d&&m.push(`${d}:${(f=l?.quantity)!=null?f:1}`),m},[]);else throw new Error(ue);return(0,R.jsx)("div",{className:o,style:i?{"--shop-pay-button-width":i}:void 0,children:u==="done"&&(0,R.jsx)("shop-pay-button",{"store-url":`https://${a}`,variants:s.join(",")})})}function H(r){if(!!r)return r.split("/").pop()}var ue='You must pass in either "variantIds" or "variantIdsAndQuantities" to ShopPayButton',de="You must provide either a variantIds or variantIdsAndQuantities prop, but not both in the ShopPayButton component";var z=h(y(),1);function G(r){var o,t;let{data:i,options:a,id:u=i.id,frameBorder:s="0",allow:c="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:m=!0,loading:l="lazy",...f}=r;if(!i.embedUrl)throw new Error("<ExternalVideo/> requires the 'embedUrl' property");let d=i.embedUrl;if(a){let n=new URL(i.embedUrl);for(let p of Object.keys(a))n.searchParams.set(p,a[p]);d=n.toString()}return(0,z.jsx)("iframe",{...f,id:u??i.embedUrl,title:(t=(o=i.alt)!=null?o:i.id)!=null?t:"external video",frameBorder:s,allow:c,allowFullScreen:m,src:d,loading:l})}var W=h(P(),1),Z=h(y(),1);function Q(r){var o,t;let{data:i,previewImageOptions:a,id:u=i.id,playsInline:s=!0,controls:c=!0,sourceProps:m={},...l}=r,f=k({src:(t=(o=i.previewImage)==null?void 0:o.url)!=null?t:"",...a});if(!i.sources)throw new Error("<Video/> requires a 'data.sources' array");return(0,Z.jsx)("video",{...l,id:u,playsInline:s,controls:c,poster:f,children:i.sources.map(d=>{if(!(d?.url&&d?.mimeType))throw new Error("<Video/> needs 'source.url' and 'source.mimeType'");return(0,W.createElement)("source",{...m,key:d.url,src:d.url,type:d.mimeType})})})}var _=h(P(),1);var O=h(y(),1);function J(r){var o,t,i,a,u,s,c,m,l,f,d;let[n,p]=(0,_.useState)(void 0),g=(0,_.useCallback)(T=>{p(T)},[]),{data:v,children:S,className:w,...e}=r,U=I("https://unpkg.com/@google/model-viewer@v1.12.1/dist/model-viewer.min.js",{module:!0});return(0,_.useEffect)(()=>{if(!!n)return e.onError&&n.addEventListener("error",e.onError),e.onLoad&&n.addEventListener("load",e.onLoad),e.onPreload&&n.addEventListener("preload",e.onPreload),e.onModelVisibility&&n.addEventListener("model-visibility",e.onModelVisibility),e.onProgress&&n.addEventListener("progress",e.onProgress),e.onArStatus&&n.addEventListener("ar-status",e.onArStatus),e.onArTracking&&n.addEventListener("ar-tracking",e.onArTracking),e.onQuickLookButtonTapped&&n.addEventListener("quick-look-button-tapped",e.onQuickLookButtonTapped),e.onCameraChange&&n.addEventListener("camera-change",e.onCameraChange),e.onEnvironmentChange&&n.addEventListener("environment-change",e.onEnvironmentChange),e.onPlay&&n.addEventListener("play",e.onPlay),e.onPause&&n.addEventListener("ar-status",e.onPause),e.onSceneGraphReady&&n.addEventListener("scene-graph-ready",e.onSceneGraphReady),()=>{n!=null&&(e.onError&&n.removeEventListener("error",e.onError),e.onLoad&&n.removeEventListener("load",e.onLoad),e.onPreload&&n.removeEventListener("preload",e.onPreload),e.onModelVisibility&&n.removeEventListener("model-visibility",e.onModelVisibility),e.onProgress&&n.removeEventListener("progress",e.onProgress),e.onArStatus&&n.removeEventListener("ar-status",e.onArStatus),e.onArTracking&&n.removeEventListener("ar-tracking",e.onArTracking),e.onQuickLookButtonTapped&&n.removeEventListener("quick-look-button-tapped",e.onQuickLookButtonTapped),e.onCameraChange&&n.removeEventListener("camera-change",e.onCameraChange),e.onEnvironmentChange&&n.removeEventListener("environment-change",e.onEnvironmentChange),e.onPlay&&n.removeEventListener("play",e.onPlay),e.onPause&&n.removeEventListener("ar-status",e.onPause),e.onSceneGraphReady&&n.removeEventListener("scene-graph-ready",e.onSceneGraphReady))}},[n,e.onArStatus,e.onArTracking,e.onCameraChange,e.onEnvironmentChange,e.onError,e.onLoad,e.onModelVisibility,e.onPause,e.onPlay,e.onPreload,e.onProgress,e.onQuickLookButtonTapped,e.onSceneGraphReady]),U!=="done"?null:(t=(o=v.sources)==null?void 0:o[0])!=null&&t.url?(0,O.jsx)("model-viewer",{ref:g,...e,className:w,id:(i=e.id)!=null?i:v.id,src:v.sources[0].url,alt:(a=v.alt)!=null?a:null,"camera-controls":(u=e.cameraControls)!=null?u:!0,poster:(c=e.poster||((s=v.previewImage)==null?void 0:s.url))!=null?c:null,autoplay:(m=e.autoplay)!=null?m:!0,loading:e.loading,reveal:e.reveal,ar:e.ar,"ar-modes":e.arModes,"ar-scale":e.arScale,"ar-placement":e.arPlacement,"ios-src":e.iosSrc,"touch-action":e.touchAction,"disable-zoom":e.disableZoom,"orbit-sensitivity":e.orbitSensitivity,"auto-rotate":e.autoRotate,"auto-rotate-delay":e.autoRotateDelay,"rotation-per-second":e.rotationPerSecond,"interaction-policy":e.interactionPolicy,"interaction-prompt":e.interactionPrompt,"interaction-prompt-style":e.interactionPromptStyle,"interaction-prompt-threshold":e.interactionPromptThreshold,"camera-orbit":e.cameraOrbit,"camera-target":e.cameraTarget,"field-of-view":e.fieldOfView,"max-camera-orbit":e.maxCameraOrbit,"min-camera-orbit":e.minCameraOrbit,"max-field-of-view":e.maxFieldOfView,"min-field-of-view":e.minFieldOfView,bounds:e.bounds,"interpolation-decay":(l=e.interpolationDecay)!=null?l:100,"skybox-image":e.skyboxImage,"environment-image":e.environmentImage,exposure:e.exposure,"shadow-intensity":(f=e.shadowIntensity)!=null?f:0,"shadow-softness":(d=e.shadowSoftness)!=null?d:0,"animation-name":e.animationName,"animation-crossfade-duration":e.animationCrossfadeDuration,"variant-name":e.variantName,orientation:e.orientation,scale:e.scale,children:S}):(console.error("<ModelViewer/> requires 'data.sources' prop to be an array, with an object that has a property 'url' on it. Rendering 'null'"),null)}var M=h(y(),1);function ce({data:r,mediaOptions:o,...t}){switch(r.__typename){case"MediaImage":return r.image?(0,M.jsx)(F,{...t,...o?.image,data:r.image}):(console.warn("<MediaFile/>: 'data.image' does not exist for __typename of 'MediaImage'; rendering 'null' by default."),null);case"Video":return(0,M.jsx)(Q,{...t,...o?.video,data:r});case"ExternalVideo":return(0,M.jsx)(G,{...t,...o?.externalVideo,data:r});case"Model3d":return(0,M.jsx)(J,{...t,...o?.modelViewer,data:r});default:return console.error("<MediaFile /> requires the '__typename' property to exist on the 'data' prop in order to correctly render the correct component for this media. Rendering 'null' by default"),null}}export{Y as a,F as b,ce as c,N as d,ne as e,se as f};
-//# sourceMappingURL=/build/_shared/chunk-6IZ7NY57.js.map

package/dist/templates/demo-store/dist/client/build/_shared/chunk-6IZ7NY57.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../../node_modules/@shopify/hydrogen-react/src/flatten-connection.ts", "../../../../../../node_modules/@shopify/hydrogen-react/src/image-size.ts", "../../../../../../node_modules/@shopify/hydrogen-react/src/Image.tsx", "../../../../../../node_modules/@shopify/hydrogen-react/src/storefront-api-constants.ts", "../../../../../../node_modules/@shopify/hydrogen-react/src/ShopifyProvider.tsx", "../../../../../../node_modules/@shopify/hydrogen-react/src/useMoney.tsx", "../../../../../../node_modules/@shopify/hydrogen-react/src/Money.tsx", "../../../../../../node_modules/@shopify/hydrogen-react/src/load-script.tsx", "../../../../../../node_modules/@shopify/hydrogen-react/src/ShopPayButton.tsx", "../../../../../../node_modules/@shopify/hydrogen-react/src/ExternalVideo.tsx", "../../../../../../node_modules/@shopify/hydrogen-react/src/Video.tsx", "../../../../../../node_modules/@shopify/hydrogen-react/src/ModelViewer.tsx", "../../../../../../node_modules/@shopify/hydrogen-react/src/MediaFile.tsx"],
-  "sourcesContent": ["import type {PartialDeep} from 'type-fest';\n\n/**\n * The `flattenConnection` utility transforms a connection object from the Storefront API (for example, [Product-related connections](https://shopify.dev/api/storefront/reference/products/product)) into a flat array of nodes.\n * The utility works with either `nodes` or `edges.node`.\n *\n * If `connection` is null or undefined, will return an empty array instead in production. In development, an error will be thrown.\n */\nexport function flattenConnection<T>(\n  connection?: PartialDeep<GraphQLConnection<T>, {recurseIntoArrays: true}>\n): PartialDeep<T, {recurseIntoArrays: true}>[] {\n  if (!connection) {\n    const noConnectionErr = `flattenConnection(): needs a 'connection' to flatten, but received '${connection}' instead`;\n    if (__HYDROGEN_DEV__) {\n      throw new Error(noConnectionErr);\n    } else {\n      console.error(noConnectionErr);\n      return [];\n    }\n  }\n\n  if (connection.nodes) {\n    return connection.nodes as PartialDeep<T, {recurseIntoArrays: true}>[];\n  }\n\n  if (connection.edges) {\n    return connection.edges.map((edge) => {\n      if (!edge?.node) {\n        throw new Error('Connection edges must contain nodes');\n      }\n      return edge.node;\n    });\n  }\n\n  if (__HYDROGEN_DEV__) {\n    console.warn(\n      `The connection did not contain either \"nodes\" or \"edges.node\". A empty array will be returned in its place.`\n    );\n  }\n\n  return [];\n}\n\ninterface GraphQLConnection<T> {\n  edges?: {node: T}[];\n  nodes?: T[];\n}\n", "import type {Image as ImageType} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\nimport type {ShopifyLoaderOptions, ShopifyLoaderParams} from './Image.js';\n\n// TODO: Are there other CDNs missing from here?\nconst PRODUCTION_CDN_HOSTNAMES = [\n  'cdn.shopify.com',\n  'cdn.shopifycdn.net',\n  'shopify-assets.shopifycdn.com',\n  'shopify-assets.shopifycdn.net',\n];\nconst LOCAL_CDN_HOSTNAMES = ['spin.dev'];\nconst ALL_CDN_HOSTNAMES = [...PRODUCTION_CDN_HOSTNAMES, ...LOCAL_CDN_HOSTNAMES];\n\n// based on the default width sizes used by the Shopify liquid HTML tag img_tag plus a 2560 width to account for 2k resolutions\n// reference: https://shopify.dev/api/liquid/filters/html-filters#image_tag\nexport const IMG_SRC_SET_SIZES = [352, 832, 1200, 1920, 2560];\n\n/**\n * Adds image size parameters to an image URL hosted by Shopify's CDN\n */\nexport function addImageSizeParametersToUrl({\n  src,\n  width,\n  height,\n  crop,\n  scale,\n}: ShopifyLoaderParams) {\n  const newUrl = new URL(src);\n\n  const multipliedScale = scale ?? 1;\n\n  if (width) {\n    let finalWidth: string;\n\n    if (typeof width === 'string') {\n      finalWidth = (IMG_SRC_SET_SIZES[0] * multipliedScale).toString();\n    } else {\n      finalWidth = (Number(width) * multipliedScale).toString();\n    }\n\n    newUrl.searchParams.append('width', finalWidth);\n  }\n\n  if (height && typeof height === 'number') {\n    newUrl.searchParams.append('height', (height * multipliedScale).toString());\n  }\n\n  crop && newUrl.searchParams.append('crop', crop);\n\n  // for now we intentionally leave off the scale param, and instead multiple width & height by scale instead\n  // scale && newUrl.searchParams.append('scale', scale.toString());\n\n  return newUrl.toString();\n}\n\nexport function shopifyImageLoader(params: ShopifyLoaderParams) {\n  const newSrc = new URL(params.src);\n  const isShopifyServedImage = ALL_CDN_HOSTNAMES.some((allowedHostname) =>\n    newSrc.hostname.endsWith(allowedHostname)\n  );\n\n  if (\n    !isShopifyServedImage ||\n    (!params.width && !params.height && !params.crop && !params.scale)\n  ) {\n    return params.src;\n  }\n\n  return addImageSizeParametersToUrl(params);\n}\n\ntype HtmlImageProps = React.ImgHTMLAttributes<HTMLImageElement>;\n\nexport type GetShopifyImageDimensionsProps = {\n  data: Pick<\n    PartialDeep<ImageType, {recurseIntoArrays: true}>,\n    'altText' | 'url' | 'id' | 'width' | 'height'\n  >;\n  loaderOptions?: ShopifyLoaderOptions;\n  elementProps?: {\n    width?: HtmlImageProps['width'];\n    height?: HtmlImageProps['height'];\n  };\n};\n\ntype GetShopifyImageDimensionsPropsReturn = {\n  width: number | string | null;\n  height: number | string | null;\n};\n\n/**\n * Width and height are determined using the followiing priority list:\n * 1. `loaderOptions`'s width/height\n * 2. `elementProps`'s width/height\n * 3. `data`'s width/height\n *\n * If only one of `width` or `height` are defined, then the other will attempt to be calculated based on the Image's aspect ratio,\n * provided that both `data.width` and `data.height` are available. If not, then the aspect ratio cannot be determined and the missing\n * value will reamin as `null`\n */\nexport function getShopifyImageDimensions({\n  data: sfapiImage,\n  loaderOptions,\n  elementProps,\n}: GetShopifyImageDimensionsProps): GetShopifyImageDimensionsPropsReturn {\n  let aspectRatio: number | null = null;\n\n  if (sfapiImage?.width && sfapiImage?.height) {\n    aspectRatio = sfapiImage?.width / sfapiImage?.height;\n  }\n\n  //  * 1. `loaderOptions`'s width/height\n  if (loaderOptions?.width || loaderOptions?.height) {\n    return {\n      width:\n        loaderOptions?.width ??\n        (aspectRatio && typeof loaderOptions.height === 'number'\n          ? Math.round(aspectRatio * loaderOptions.height)\n          : null),\n      height:\n        loaderOptions?.height ??\n        (aspectRatio && typeof loaderOptions.width === 'number'\n          ? Math.round(aspectRatio * loaderOptions.width)\n          : null),\n    };\n  }\n\n  //  * 2. `elementProps`'s width/height\n  if (elementProps?.width || elementProps?.height) {\n    return {\n      width:\n        elementProps?.width ??\n        (aspectRatio && typeof elementProps.height === 'number'\n          ? Math.round(aspectRatio * elementProps.height)\n          : null),\n      height:\n        elementProps?.height ??\n        (aspectRatio && typeof elementProps.width === 'number'\n          ? Math.round(aspectRatio * elementProps.width)\n          : null),\n    };\n  }\n\n  //  * 3. `data`'s width/height\n  if (sfapiImage?.width || sfapiImage?.height) {\n    return {\n      // can't calculate the aspect ratio here\n      width: sfapiImage?.width ?? null,\n      height: sfapiImage?.height ?? null,\n    };\n  }\n\n  return {width: null, height: null};\n}\n", "import * as React from 'react';\nimport {\n  getShopifyImageDimensions,\n  shopifyImageLoader,\n  addImageSizeParametersToUrl,\n  IMG_SRC_SET_SIZES,\n} from './image-size.js';\nimport type {Image as ImageType} from './storefront-api-types.js';\nimport type {PartialDeep, Simplify} from 'type-fest';\n\ntype HtmlImageProps = React.ImgHTMLAttributes<HTMLImageElement>;\n\nexport type ShopifyLoaderOptions = {\n  crop?: 'top' | 'bottom' | 'left' | 'right' | 'center';\n  scale?: 2 | 3;\n  width?: HtmlImageProps['width'] | ImageType['width'];\n  height?: HtmlImageProps['height'] | ImageType['height'];\n};\nexport type ShopifyLoaderParams = Simplify<\n  ShopifyLoaderOptions & {\n    src: ImageType['url'];\n  }\n>;\nexport type ShopifyImageProps = Omit<HtmlImageProps, 'src'> & {\n  /** An object with fields that correspond to the Storefront API's\n   * [Image object](https://shopify.dev/api/storefront/reference/common-objects/image).\n   * The `data` prop is required.\n   */\n  data: PartialDeep<ImageType, {recurseIntoArrays: true}>;\n  /** A custom function that generates the image URL. Parameters passed in\n   * are `ShopifyLoaderParams`\n   */\n  loader?: (params: ShopifyLoaderParams) => string;\n  /** An object of `loader` function options. For example, if the `loader` function\n   * requires a `scale` option, then the value can be a property of the\n   * `loaderOptions` object (for example, `{scale: 2}`). The object shape is `ShopifyLoaderOptions`.\n   */\n  loaderOptions?: ShopifyLoaderOptions;\n  /**\n   * `src` isn't used, and should instead be passed as part of the `data` object\n   */\n  src?: never;\n  /**\n   * An array of pixel widths to overwrite the default generated srcset. For example, `[300, 600, 800]`.\n   */\n  widths?: (HtmlImageProps['width'] | ImageType['width'])[];\n};\n\n/**\n * The `Image` component renders an image for the Storefront API's\n * [Image object](https://shopify.dev/api/storefront/reference/common-objects/image) by using the `data` prop. You can [customize this component](https://shopify.dev/api/hydrogen/components#customizing-hydrogen-components) using passthrough props.\n *\n * An image's width and height are determined using the following priority list:\n * 1. The width and height values for the `loaderOptions` prop\n * 2. The width and height values for bare props\n * 3. The width and height values for the `data` prop\n *\n * If only one of `width` or `height` are defined, then the other will attempt to be calculated based on the image's aspect ratio,\n * provided that both `data.width` and `data.height` are available. If `data.width` and `data.height` aren't available, then the aspect ratio cannot be determined and the missing\n * value will remain as `null`\n */\nexport function Image({\n  data,\n  width,\n  height,\n  loading,\n  loader = shopifyImageLoader,\n  loaderOptions,\n  widths,\n  decoding = 'async',\n  ...rest\n}: ShopifyImageProps) {\n  if (!data.url) {\n    const missingUrlError = `<Image/>: the 'data' prop requires the 'url' property. Image: ${\n      data.id ?? 'no ID provided'\n    }`;\n\n    if (__HYDROGEN_DEV__) {\n      throw new Error(missingUrlError);\n    } else {\n      console.error(missingUrlError);\n    }\n\n    return null;\n  }\n\n  if (__HYDROGEN_DEV__ && !data.altText && !rest.alt) {\n    console.warn(\n      `<Image/>: the 'data' prop should have the 'altText' property, or the 'alt' prop, and one of them should not be empty. Image: ${\n        data.id ?? data.url\n      }`\n    );\n  }\n\n  const {width: imgElementWidth, height: imgElementHeight} =\n    getShopifyImageDimensions({\n      data,\n      loaderOptions,\n      elementProps: {\n        width,\n        height,\n      },\n    });\n\n  if (__HYDROGEN_DEV__ && (!imgElementWidth || !imgElementHeight)) {\n    console.warn(\n      `<Image/>: the 'data' prop requires either 'width' or 'data.width', and 'height' or 'data.height' properties. Image: ${\n        data.id ?? data.url\n      }`\n    );\n  }\n\n  let finalSrc = data.url;\n\n  if (loader) {\n    finalSrc = loader({\n      ...loaderOptions,\n      src: data.url,\n      width: imgElementWidth,\n      height: imgElementHeight,\n    });\n    if (typeof finalSrc !== 'string' || !finalSrc) {\n      throw new Error(\n        `<Image/>: 'loader' did not return a valid string. Image: ${\n          data.id ?? data.url\n        }`\n      );\n    }\n  }\n\n  // determining what the intended width of the image is. For example, if the width is specified and lower than the image width, then that is the maximum image width\n  // to prevent generating a srcset with widths bigger than needed or to generate images that would distort because of being larger than original\n  const maxWidth =\n    width && imgElementWidth && width < imgElementWidth\n      ? width\n      : imgElementWidth;\n  const finalSrcset =\n    rest.srcSet ??\n    internalImageSrcSet({\n      ...loaderOptions,\n      widths,\n      src: data.url,\n      width: maxWidth,\n      height: imgElementHeight,\n      loader,\n    });\n\n  /* eslint-disable hydrogen/prefer-image-component */\n  return (\n    <img\n      id={data.id ?? ''}\n      alt={data.altText ?? rest.alt ?? ''}\n      loading={loading ?? 'lazy'}\n      {...rest}\n      src={finalSrc}\n      width={imgElementWidth ?? undefined}\n      height={imgElementHeight ?? undefined}\n      srcSet={finalSrcset}\n      decoding={decoding}\n    />\n  );\n  /* eslint-enable hydrogen/prefer-image-component */\n}\n\ntype InternalShopifySrcSetGeneratorsParams = Simplify<\n  ShopifyLoaderOptions & {\n    src: ImageType['url'];\n    widths?: (HtmlImageProps['width'] | ImageType['width'])[];\n    loader?: (params: ShopifyLoaderParams) => string;\n  }\n>;\nfunction internalImageSrcSet({\n  src,\n  width,\n  crop,\n  scale,\n  widths,\n  loader,\n  height,\n}: InternalShopifySrcSetGeneratorsParams) {\n  const hasCustomWidths = widths && Array.isArray(widths);\n  if (hasCustomWidths && widths.some((size) => isNaN(size as number))) {\n    throw new Error(\n      `<Image/>: the 'widths' must be an array of numbers. Image: ${src}`\n    );\n  }\n\n  let aspectRatio = 1;\n  if (width && height) {\n    aspectRatio = Number(height) / Number(width);\n  }\n\n  let setSizes = hasCustomWidths ? widths : IMG_SRC_SET_SIZES;\n  if (\n    !hasCustomWidths &&\n    width &&\n    width < IMG_SRC_SET_SIZES[IMG_SRC_SET_SIZES.length - 1]\n  ) {\n    setSizes = IMG_SRC_SET_SIZES.filter((size) => size <= width);\n  }\n  const srcGenerator = loader ? loader : addImageSizeParametersToUrl;\n  return setSizes\n    .map(\n      (size) =>\n        `${srcGenerator({\n          src,\n          width: size,\n          // height is not applied if there is no crop\n          // if there is crop, then height is applied as a ratio of the original width + height aspect ratio * size\n          height: crop ? Number(size) * aspectRatio : undefined,\n          crop,\n          scale,\n        })} ${size}w`\n    )\n    .join(', ');\n}\n", "export const SFAPI_VERSION = '2022-10';\n", "import {createContext, useContext, useMemo, type ReactNode} from 'react';\nimport type {LanguageCode, CountryCode, Shop} from './storefront-api-types.js';\nimport {SFAPI_VERSION} from './storefront-api-constants.js';\nimport {getPublicTokenHeadersRaw} from './storefront-client.js';\n\nconst ShopifyContext = createContext<ShopifyContextValue>({\n  storeDomain: 'test.myshopify.com',\n  storefrontToken: 'abc123',\n  storefrontApiVersion: SFAPI_VERSION,\n  country: {\n    isoCode: 'US',\n  },\n  language: {\n    isoCode: 'EN',\n  },\n  locale: 'EN-US',\n  getStorefrontApiUrl() {\n    return '';\n  },\n  getPublicTokenHeaders() {\n    return {};\n  },\n});\n\n/**\n * The `<ShopifyProvider/>` component enables use of the `useShop()` hook. The component should wrap your app.\n */\nexport function ShopifyProvider({\n  children,\n  shopifyConfig,\n}: {\n  children: ReactNode;\n  shopifyConfig: ShopifyContextProps;\n}) {\n  if (!shopifyConfig) {\n    throw new Error(\n      `The 'shopifyConfig' prop must be passed to '<ShopifyProvider/>'`\n    );\n  }\n\n  if (shopifyConfig.storefrontApiVersion !== SFAPI_VERSION) {\n    console.warn(\n      `This version of Hydrogen-UI is built for Shopify's Storefront API version ${SFAPI_VERSION}, but it looks like you're using version ${shopifyConfig.storefrontApiVersion}. There may be issues or bugs if you use a mismatched version of Hydrogen-UI and the Storefront API.`\n    );\n  }\n\n  const finalConfig = useMemo<ShopifyContextValue>(() => {\n    const storeDomain = shopifyConfig.storeDomain.replace(/^https?:\\/\\//, '');\n    return {\n      ...shopifyConfig,\n      storeDomain,\n      getPublicTokenHeaders(overrideProps) {\n        return getPublicTokenHeadersRaw(\n          overrideProps.contentType,\n          shopifyConfig.storefrontApiVersion,\n          overrideProps.storefrontToken ?? shopifyConfig.storefrontToken\n        );\n      },\n      getStorefrontApiUrl(overrideProps) {\n        return `https://${overrideProps?.storeDomain ?? storeDomain}/api/${\n          overrideProps?.storefrontApiVersion ??\n          shopifyConfig.storefrontApiVersion\n        }/graphql.json`;\n      },\n    };\n  }, [shopifyConfig]);\n\n  return (\n    <ShopifyContext.Provider value={finalConfig}>\n      {children}\n    </ShopifyContext.Provider>\n  );\n}\n\n/**\n * Provides access to the `shopifyConfig` prop of `<ShopifyProvider/>`. Must be a descendent of `<ShopifyProvider/>`.\n */\nexport function useShop() {\n  const shopContext = useContext(ShopifyContext);\n  if (!shopContext) {\n    throw new Error(`'useShop()' must be a descendent of <ShopifyProvider/>`);\n  }\n  return shopContext;\n}\n\n/**\n * Shopify-specific values that are used in various Hydrogen-UI components and hooks.\n */\nexport type ShopifyContextProps = {\n  /** The globally-unique identifier for the Shop */\n  storefrontId?: string;\n  /** The host name of the domain (eg: `{shop}.myshopify.com`). If a URL with a scheme (for example `https://`) is passed in, then the scheme is removed. */\n  storeDomain: Shop['primaryDomain']['host'];\n  /** The Storefront API public access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) documentation for more details. */\n  storefrontToken: string;\n  /** The Storefront API version. This should almost always be the same as the version Hydrogen-UI was built for. Learn more about Shopify [API versioning](https://shopify.dev/api/usage/versioning) for more details.  */\n  storefrontApiVersion: string;\n  country?: {\n    /**\n     * The code designating a country, which generally follows ISO 3166-1 alpha-2 guidelines. If a territory doesn't have a country code value in the `CountryCode` enum, it might be considered a subdivision of another country. For example, the territories associated with Spain are represented by the country code `ES`, and the territories associated with the United States of America are represented by the country code `US`.\n     */\n    isoCode: CountryCode;\n  };\n  language?: {\n    /**\n     * `ISO 369` language codes supported by Shopify.\n     */\n    isoCode: LanguageCode;\n  };\n  /**\n   * The locale string based on `country` and `language`.\n   */\n  locale?: string;\n};\n\nexport type ShopifyContextValue = ShopifyContextProps & {\n  /**\n   * Creates the fully-qualified URL to your store's GraphQL endpoint.\n   *\n   * By default, it will use the config you passed in when creating `<ShopifyProvider/>`. However, you can override the following settings on each invocation of `getStorefrontApiUrl({...})`:\n   *\n   * - `storeDomain`\n   * - `storefrontApiVersion`\n   */\n  getStorefrontApiUrl: (props?: {\n    /** The host name of the domain (eg: `{shop}.myshopify.com`). */\n    storeDomain?: string;\n    /** The Storefront API version. This should almost always be the same as the version Hydrogen-UI was built for. Learn more about Shopify [API versioning](https://shopify.dev/api/usage/versioning) for more details. */\n    storefrontApiVersion?: string;\n  }) => string;\n  /**\n   * Returns an object that contains headers that are needed for each query to Storefront API GraphQL endpoint. This uses the public Storefront API token.\n   *\n   * By default, it will use the config you passed in when creating `<ShopifyProvider/>`. However, you can override the following settings on each invocation of `getPublicTokenHeaders({...})`:\n   *\n   * - `contentType`\n   * - `storefrontToken`\n   *\n   */\n  getPublicTokenHeaders: (props: {\n    /**\n     * Customizes which `\"content-type\"` header is added when using `getPrivateTokenHeaders()` and `getPublicTokenHeaders()`. When fetching with a `JSON.stringify()`-ed `body`, use `\"json\"`. When fetching with a `body` that is a plain string, use `\"graphql\"`. Defaults to `\"json\"`\n     */\n    contentType: 'json' | 'graphql';\n    /** The Storefront API access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) documentation for more details. */\n    storefrontToken?: string;\n  }) => Record<string, string>;\n};\n", "import {useMemo} from 'react';\nimport {useShop} from './ShopifyProvider.js';\nimport {CurrencyCode, MoneyV2} from './storefront-api-types.js';\n\nexport type UseMoneyValue = {\n  /**\n   * The currency code from the `MoneyV2` object.\n   */\n  currencyCode: CurrencyCode;\n  /**\n   * The name for the currency code, returned by `Intl.NumberFormat`.\n   */\n  currencyName?: string;\n  /**\n   * The currency symbol returned by `Intl.NumberFormat`.\n   */\n  currencySymbol?: string;\n  /**\n   * The currency narrow symbol returned by `Intl.NumberFormat`.\n   */\n  currencyNarrowSymbol?: string;\n  /**\n   * The localized amount, without any currency symbols or non-number types from the `Intl.NumberFormat.formatToParts` parts.\n   */\n  amount: string;\n  /**\n   * All parts returned by `Intl.NumberFormat.formatToParts`.\n   */\n  parts: Intl.NumberFormatPart[];\n  /**\n   * A string returned by `new Intl.NumberFormat` for the amount and currency code,\n   * using the `locale` value in the [`LocalizationProvider` component](https://shopify.dev/api/hydrogen/components/localization/localizationprovider).\n   */\n  localizedString: string;\n  /**\n   * The `MoneyV2` object provided as an argument to the hook.\n   */\n  original: MoneyV2;\n  /**\n   * A string with trailing zeros removed from the fractional part, if any exist. If there are no trailing zeros, then the fractional part remains.\n   * For example, `$640.00` turns into `$640`.\n   * `$640.42` remains `$640.42`.\n   */\n  withoutTrailingZeros: string;\n  /**\n   * A string without currency and without trailing zeros removed from the fractional part, if any exist. If there are no trailing zeros, then the fractional part remains.\n   * For example, `$640.00` turns into `640`.\n   * `$640.42` turns into `640.42`.\n   */\n  withoutTrailingZerosAndCurrency: string;\n};\n\n/**\n * The `useMoney` hook takes a [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) and returns a\n * default-formatted string of the amount with the correct currency indicator, along with some of the parts provided by\n * [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).\n * Uses `locale` from `ShopifyProvider`\n */\nexport function useMoney(money: MoneyV2): UseMoneyValue {\n  const {locale} = useShop();\n\n  if (!locale) {\n    throw new Error(\n      `useMoney(): Unable to get 'locale' from 'useShop()', which means that 'locale' was not passed to '<ShopifyProvider/>'. 'locale' is required for 'useMoney()' to work`\n    );\n  }\n\n  const amount = parseFloat(money.amount);\n\n  const options = useMemo(\n    () => ({\n      style: 'currency',\n      currency: money.currencyCode,\n    }),\n    [money.currencyCode]\n  );\n\n  const defaultFormatter = useLazyFormatter(locale, options);\n\n  const nameFormatter = useLazyFormatter(locale, {\n    ...options,\n    currencyDisplay: 'name',\n  });\n\n  const narrowSymbolFormatter = useLazyFormatter(locale, {\n    ...options,\n    currencyDisplay: 'narrowSymbol',\n  });\n\n  const withoutTrailingZerosFormatter = useLazyFormatter(locale, {\n    ...options,\n    minimumFractionDigits: 0,\n    maximumFractionDigits: 0,\n  });\n\n  const withoutCurrencyFormatter = useLazyFormatter(locale);\n\n  const withoutTrailingZerosOrCurrencyFormatter = useLazyFormatter(locale, {\n    minimumFractionDigits: 0,\n    maximumFractionDigits: 0,\n  });\n\n  const isPartCurrency = (part: Intl.NumberFormatPart) =>\n    part.type === 'currency';\n\n  // By wrapping these properties in functions, we only\n  // create formatters if they are going to be used.\n  const lazyFormatters = useMemo(\n    () => ({\n      original: () => money,\n      currencyCode: () => money.currencyCode,\n\n      localizedString: () => defaultFormatter().format(amount),\n\n      parts: () => defaultFormatter().formatToParts(amount),\n\n      withoutTrailingZeros: () =>\n        amount % 1 === 0\n          ? withoutTrailingZerosFormatter().format(amount)\n          : defaultFormatter().format(amount),\n\n      withoutTrailingZerosAndCurrency: () =>\n        amount % 1 === 0\n          ? withoutTrailingZerosOrCurrencyFormatter().format(amount)\n          : withoutCurrencyFormatter().format(amount),\n\n      currencyName: () =>\n        nameFormatter().formatToParts(amount).find(isPartCurrency)?.value ??\n        money.currencyCode, // e.g. \"US dollars\"\n\n      currencySymbol: () =>\n        defaultFormatter().formatToParts(amount).find(isPartCurrency)?.value ??\n        money.currencyCode, // e.g. \"USD\"\n\n      currencyNarrowSymbol: () =>\n        narrowSymbolFormatter().formatToParts(amount).find(isPartCurrency)\n          ?.value ?? '', // e.g. \"$\"\n\n      amount: () =>\n        defaultFormatter()\n          .formatToParts(amount)\n          .filter((part) =>\n            ['decimal', 'fraction', 'group', 'integer', 'literal'].includes(\n              part.type\n            )\n          )\n          .map((part) => part.value)\n          .join(''),\n    }),\n    [\n      money,\n      amount,\n      nameFormatter,\n      defaultFormatter,\n      narrowSymbolFormatter,\n      withoutCurrencyFormatter,\n      withoutTrailingZerosFormatter,\n      withoutTrailingZerosOrCurrencyFormatter,\n    ]\n  );\n\n  // Call functions automatically when the properties are accessed\n  // to keep these functions as an implementation detail.\n  return useMemo(\n    () =>\n      new Proxy(lazyFormatters as unknown as UseMoneyValue, {\n        get: (target, key) => Reflect.get(target, key)?.call(null),\n      }),\n    [lazyFormatters]\n  );\n}\n\nfunction useLazyFormatter(locale: string, options?: Intl.NumberFormatOptions) {\n  return useMemo(() => {\n    let memoized: Intl.NumberFormat;\n    return () => (memoized ??= new Intl.NumberFormat(locale, options));\n  }, [locale, options]);\n}\n", "import {type ReactNode} from 'react';\nimport {useMoney} from './useMoney.js';\nimport type {MoneyV2, UnitPriceMeasurement} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\n\ninterface CustomProps<ComponentGeneric extends React.ElementType> {\n  /** An HTML tag or React Component to be rendered as the base element wrapper. The default is `div`. */\n  as?: ComponentGeneric;\n  /** An object with fields that correspond to the Storefront API's [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2). */\n  data: PartialDeep<MoneyV2, {recurseIntoArrays: true}>;\n  /** Whether to remove the currency symbol from the output. */\n  withoutCurrency?: boolean;\n  /** Whether to remove trailing zeros (fractional money) from the output. */\n  withoutTrailingZeros?: boolean;\n  /** A [UnitPriceMeasurement object](https://shopify.dev/api/storefront/latest/objects/unitpricemeasurement). */\n  measurement?: PartialDeep<UnitPriceMeasurement, {recurseIntoArrays: true}>;\n  /** Customizes the separator between the money output and the measurement output. Used with the `measurement` prop. Defaults to `'/'`. */\n  measurementSeparator?: ReactNode;\n}\n\n// This article helps understand the typing here https://www.benmvp.com/blog/polymorphic-react-components-typescript/ Ben is the best :)\nexport type MoneyProps<ComponentGeneric extends React.ElementType> =\n  CustomProps<ComponentGeneric> &\n    Omit<\n      React.ComponentPropsWithoutRef<ComponentGeneric>,\n      keyof CustomProps<ComponentGeneric>\n    >;\n\n/**\n * The `Money` component renders a string of the Storefront API's\n * [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) according to the\n * `locale` in the `ShopifyProvider` component.\n */\nexport function Money<ComponentGeneric extends React.ElementType>({\n  data,\n  as,\n  withoutCurrency,\n  withoutTrailingZeros,\n  measurement,\n  measurementSeparator = '/',\n  ...passthroughProps\n}: MoneyProps<ComponentGeneric>) {\n  if (!isMoney(data)) {\n    throw new Error(\n      `<Money/> needs a valid 'data' prop that has 'amount' and 'currencyCode'`\n    );\n  }\n  const moneyObject = useMoney(data);\n  const Wrapper = as ?? 'div';\n\n  let output = moneyObject.localizedString;\n\n  if (withoutCurrency || withoutTrailingZeros) {\n    if (withoutCurrency && !withoutTrailingZeros) {\n      output = moneyObject.amount;\n    } else if (!withoutCurrency && withoutTrailingZeros) {\n      output = moneyObject.withoutTrailingZeros;\n    } else {\n      // both\n      output = moneyObject.withoutTrailingZerosAndCurrency;\n    }\n  }\n\n  return (\n    <Wrapper {...passthroughProps}>\n      {output}\n      {measurement && measurement.referenceUnit && (\n        <>\n          {measurementSeparator}\n          {measurement.referenceUnit}\n        </>\n      )}\n    </Wrapper>\n  );\n}\n\n// required in order to narrow the money object down and make TS happy\nfunction isMoney(\n  maybeMoney: PartialDeep<MoneyV2, {recurseIntoArrays: true}>\n): maybeMoney is MoneyV2 {\n  return (\n    typeof maybeMoney.amount === 'string' &&\n    !!maybeMoney.amount &&\n    typeof maybeMoney.currencyCode === 'string' &&\n    !!maybeMoney.currencyCode\n  );\n}\n", "import {useState, useEffect} from 'react';\n\nconst SCRIPTS_LOADED: Record<string, Promise<boolean>> = {};\n\nexport function loadScript(\n  src: string,\n  options?: {module?: boolean; in?: 'head' | 'body'}\n): Promise<boolean> {\n  const isScriptLoaded: Promise<boolean> = SCRIPTS_LOADED[src];\n\n  if (isScriptLoaded) {\n    return isScriptLoaded;\n  }\n\n  const promise = new Promise<boolean>((resolve, reject) => {\n    const script = document.createElement('script');\n    if (options?.module) {\n      script.type = 'module';\n    } else {\n      script.type = 'text/javascript';\n    }\n    script.src = src;\n    script.onload = () => {\n      resolve(true);\n    };\n    script.onerror = () => {\n      reject(false);\n    };\n    if (options?.in === 'head') {\n      document.head.appendChild(script);\n    } else {\n      document.body.appendChild(script);\n    }\n  });\n\n  SCRIPTS_LOADED[src] = promise;\n\n  return promise;\n}\n\ntype LoadScriptParams = Parameters<typeof loadScript>;\n\n/**\n * The `useLoadScript` hook loads an external script tag in the browser. It allows React components to lazy-load large third-party dependencies.\n */\nexport function useLoadScript(\n  url: LoadScriptParams[0],\n  options?: LoadScriptParams[1]\n): ScriptState {\n  const [status, setStatus] = useState<ScriptState>('loading');\n  const stringifiedOptions = JSON.stringify(options);\n\n  useEffect(() => {\n    async function loadScriptWrapper() {\n      try {\n        setStatus('loading');\n        await loadScript(url, options);\n        setStatus('done');\n      } catch (error) {\n        setStatus('error');\n      }\n    }\n\n    loadScriptWrapper();\n  }, [url, stringifiedOptions, options]);\n\n  return status;\n}\n\ntype ScriptState = 'loading' | 'done' | 'error';\n", "import {useShop} from './ShopifyProvider.js';\nimport {useLoadScript} from './load-script.js';\n\n// By using 'never' in the \"or\" cases below, it makes these props \"exclusive\" and means that you cannot pass both of them; you must pass either one OR the other.\ntype ShopPayButtonProps = {\n  /** A string of classes to apply to the `div` that wraps the Shop Pay button. */\n  className?: string;\n  /** A string that's applied to the [CSS custom property (variable)](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) `--shop-pay-button-width` for the [Buy with Shop Pay component](https://shopify.dev/custom-storefronts/tools/web-components#buy-with-shop-pay-component). */\n  width?: string;\n} & (\n  | {\n      /** An array of IDs of the variants to purchase with Shop Pay. This will only ever have a quantity of 1 for each variant. If you want to use other quantities, then use 'variantIdsAndQuantities'. */\n      variantIds: string[];\n      /** An array of variant IDs and quantities to purchase with Shop Pay. */\n      variantIdsAndQuantities?: never;\n    }\n  | {\n      /** An array of IDs of the variants to purchase with Shop Pay. This will only ever have a quantity of 1 for each variant. If you want to use other quantities, then use 'variantIdsAndQuantities'. */\n      variantIds?: never;\n      /** An array of variant IDs and quantities to purchase with Shop Pay. */\n      variantIdsAndQuantities: Array<{\n        id: string;\n        quantity: number;\n      }>;\n    }\n);\n\ndeclare global {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      'shop-pay-button': {\n        variants: string;\n        'store-url': string;\n      };\n    }\n  }\n}\n\nconst SHOPJS_URL =\n  'https://cdn.shopify.com/shopifycloud/shop-js/v1.0/client.js';\n\n/**\n * The `ShopPayButton` component renders a button that redirects to the Shop Pay checkout.\n * It renders a [`<shop-pay-button>`](https://shopify.dev/custom-storefronts/tools/web-components) custom element, for which it will lazy-load the source code automatically.\n * It relies on the `<ShopProvider>` context provider.\n */\nexport function ShopPayButton({\n  variantIds,\n  className,\n  variantIdsAndQuantities,\n  width,\n}: ShopPayButtonProps) {\n  const {storeDomain} = useShop();\n  const shopPayLoadedStatus = useLoadScript(SHOPJS_URL);\n\n  let ids: string[];\n\n  if (variantIds && variantIdsAndQuantities) {\n    throw new Error(DoublePropsErrorMessage);\n  }\n\n  if (variantIds) {\n    ids = variantIds.reduce<string[]>((prev, curr) => {\n      const bareId = getIdFromGid(curr);\n      if (bareId) {\n        prev.push(bareId);\n      }\n      return prev;\n    }, []);\n  } else if (variantIdsAndQuantities) {\n    ids = variantIdsAndQuantities.reduce<string[]>((prev, curr) => {\n      const bareId = getIdFromGid(curr?.id);\n      if (bareId) {\n        prev.push(`${bareId}:${curr?.quantity ?? 1}`);\n      }\n      return prev;\n    }, []);\n  } else {\n    throw new Error(MissingPropsErrorMessage);\n  }\n\n  const style = width\n    ? ({\n        '--shop-pay-button-width': width,\n      } as React.CSSProperties)\n    : undefined;\n\n  return (\n    <div className={className} style={style}>\n      {shopPayLoadedStatus === 'done' && (\n        <shop-pay-button\n          store-url={`https://${storeDomain}`}\n          variants={ids.join(',')}\n        />\n      )}\n    </div>\n  );\n}\n\n/**\n * Takes a string in the format of \"gid://shopify/ProductVariant/41007289630776\" and returns a string of the ID part at the end: \"41007289630776\"\n */\nexport function getIdFromGid(id?: string) {\n  if (!id) return;\n  return id.split('/').pop();\n}\n\nexport const MissingPropsErrorMessage = `You must pass in either \"variantIds\" or \"variantIdsAndQuantities\" to ShopPayButton`;\nexport const DoublePropsErrorMessage = `You must provide either a variantIds or variantIdsAndQuantities prop, but not both in the ShopPayButton component`;\n", "import type {ExternalVideo as ExternalVideoType} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\n\ninterface BaseProps {\n  /**\n   * An object with fields that correspond to the Storefront API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).\n   */\n  data: PartialDeep<ExternalVideoType, {recurseIntoArrays: true}>;\n  /** An object containing the options available for either\n   * [YouTube](https://developers.google.com/youtube/player_parameters#Parameters) or\n   * [Vimeo](https://vimeo.zendesk.com/hc/en-us/articles/360001494447-Using-Player-Parameters).\n   */\n  options?: YouTube | Vimeo;\n}\n\ntype PropsWeControl = 'src';\n\nexport type ExternalVideoProps = Omit<\n  JSX.IntrinsicElements['iframe'],\n  PropsWeControl\n> &\n  BaseProps;\n\n/**\n * The `ExternalVideo` component renders an embedded video for the Storefront\n * API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).\n */\nexport function ExternalVideo(props: ExternalVideoProps) {\n  const {\n    data,\n    options,\n    id = data.id,\n    frameBorder = '0',\n    allow = 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture',\n    allowFullScreen = true,\n    loading = 'lazy',\n    ...passthroughProps\n  } = props;\n\n  if (!data.embedUrl) {\n    throw new Error(`<ExternalVideo/> requires the 'embedUrl' property`);\n  }\n\n  let finalUrl: string = data.embedUrl;\n\n  if (options) {\n    const urlObject = new URL(data.embedUrl);\n    for (const key of Object.keys(options)) {\n      // @ts-expect-error https://github.com/microsoft/TypeScript/issues/32951\n      urlObject.searchParams.set(key, options[key]);\n    }\n    finalUrl = urlObject.toString();\n  }\n\n  return (\n    <iframe\n      {...passthroughProps}\n      id={id ?? data.embedUrl}\n      title={data.alt ?? data.id ?? 'external video'}\n      frameBorder={frameBorder}\n      allow={allow}\n      allowFullScreen={allowFullScreen}\n      src={finalUrl}\n      loading={loading}\n    ></iframe>\n  );\n}\n\ninterface YouTube {\n  autoplay?: 0 | 1;\n  cc_lang_pref?: string;\n  cc_load_policy?: 1;\n  color?: 'red' | 'white';\n  controls?: 0 | 1;\n  disablekb?: 0 | 1;\n  enablejsapi?: 0 | 1;\n  end?: number;\n  fs?: 0 | 1;\n  hl?: string;\n  iv_load_policy?: 1 | 3;\n  list?: string;\n  list_type?: 'playlist' | 'user_uploads';\n  loop?: 0 | 1;\n  modest_branding?: 1;\n  origin?: string;\n  playlist?: string;\n  plays_inline?: 0 | 1;\n  rel?: 0 | 1;\n  start?: number;\n  widget_referrer?: string;\n}\n\ntype VimeoBoolean = 0 | 1 | boolean;\n\ninterface Vimeo {\n  autopause?: VimeoBoolean;\n  autoplay?: VimeoBoolean;\n  background?: VimeoBoolean;\n  byline?: VimeoBoolean;\n  color?: string;\n  controls?: VimeoBoolean;\n  dnt?: VimeoBoolean;\n  loop?: VimeoBoolean;\n  muted?: VimeoBoolean;\n  pip?: VimeoBoolean;\n  playsinline?: VimeoBoolean;\n  portrait?: VimeoBoolean;\n  quality?: '240p' | '360p' | '540p' | '720p' | '1080p' | '2k' | '4k';\n  speed?: VimeoBoolean;\n  '#t'?: string;\n  texttrack?: string;\n  title?: VimeoBoolean;\n  transparent?: VimeoBoolean;\n}\n", "import {type HTMLAttributes} from 'react';\nimport {shopifyImageLoader} from './image-size.js';\nimport type {Video as VideoType} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\n\nexport interface VideoProps {\n  /** An object with fields that correspond to the Storefront API's [Video object](https://shopify.dev/api/storefront/latest/objects/video). */\n  data: PartialDeep<VideoType, {recurseIntoArrays: true}>;\n  /** An object of image size options for the video's `previewImage`. Uses `shopifyImageLoader` to generate the `poster` URL. */\n  previewImageOptions?: Parameters<typeof shopifyImageLoader>[0];\n  /** Props that will be passed to the `video` element's `source` children elements. */\n  sourceProps?: HTMLAttributes<HTMLSourceElement> & {\n    'data-testid'?: string;\n  };\n}\n\n/**\n * The `Video` component renders a `video` for the Storefront API's [Video object](https://shopify.dev/api/storefront/reference/products/video).\n */\nexport function Video(props: JSX.IntrinsicElements['video'] & VideoProps) {\n  const {\n    data,\n    previewImageOptions,\n    id = data.id,\n    playsInline = true,\n    controls = true,\n    sourceProps = {},\n    ...passthroughProps\n  } = props;\n\n  const posterUrl = shopifyImageLoader({\n    src: data.previewImage?.url ?? '',\n    ...previewImageOptions,\n  });\n\n  if (!data.sources) {\n    throw new Error(`<Video/> requires a 'data.sources' array`);\n  }\n\n  return (\n    // eslint-disable-next-line jsx-a11y/media-has-caption\n    <video\n      {...passthroughProps}\n      id={id}\n      playsInline={playsInline}\n      controls={controls}\n      poster={posterUrl}\n    >\n      {data.sources.map((source) => {\n        if (!(source?.url && source?.mimeType)) {\n          throw new Error(`<Video/> needs 'source.url' and 'source.mimeType'`);\n        }\n        return (\n          <source\n            {...sourceProps}\n            key={source.url}\n            src={source.url}\n            type={source.mimeType}\n          />\n        );\n      })}\n    </video>\n  );\n}\n", "import {useState, useEffect, useCallback} from 'react';\nimport {useLoadScript} from './load-script.js';\nimport type {Model3d} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\nimport type {ModelViewerElement} from '@google/model-viewer/lib/model-viewer.js';\n\ntype PropsWeControl = 'src';\n\ndeclare global {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      'model-viewer': PartialDeep<\n        ModelViewerElement,\n        {recurseIntoArrays: true}\n      >;\n    }\n  }\n}\n\ntype ModelViewerProps = Omit<\n  PartialDeep<JSX.IntrinsicElements['model-viewer'], {recurseIntoArrays: true}>,\n  PropsWeControl\n> & {\n  /** An object with fields that correspond to the Storefront API's [Model3D object](https://shopify.dev/api/storefront/latest/objects/model3d). */\n  data: PartialDeep<Model3d, {recurseIntoArrays: true}>;\n  /** The callback to invoke when the 'error' event is triggered. Refer to [error in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-error). */\n  onError?: (event: Event) => void;\n  /** The callback to invoke when the `load` event is triggered. Refer to [load in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-load). */\n  onLoad?: (event: Event) => void;\n  /** The callback to invoke when the 'preload' event is triggered. Refer to [preload in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-preload). */\n  onPreload?: (event: Event) => void;\n  /** The callback to invoke when the 'model-visibility' event is triggered. Refer to [model-visibility in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-modelVisibility). */\n  onModelVisibility?: (event: Event) => void;\n  /** The callback to invoke when the 'progress' event is triggered. Refer to [progress in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-progress). */\n  onProgress?: (event: Event) => void;\n  /** The callback to invoke when the 'ar-status' event is triggered. Refer to [ar-status in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-arStatus). */\n  onArStatus?: (event: Event) => void;\n  /** The callback to invoke when the 'ar-tracking' event is triggered. Refer to [ar-tracking in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-arTracking). */\n  onArTracking?: (event: Event) => void;\n  /** The callback to invoke when the 'quick-look-button-tapped' event is triggered. Refer to [quick-look-button-tapped in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-quickLookButtonTapped). */\n  onQuickLookButtonTapped?: (event: Event) => void;\n  /** The callback to invoke when the 'camera-change' event is triggered. Refer to [camera-change in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-events-cameraChange). */\n  onCameraChange?: (event: Event) => void;\n  /** The callback to invoke when the 'environment-change' event is triggered. Refer to [environment-change in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-lightingandenv-events-environmentChange).  */\n  onEnvironmentChange?: (event: Event) => void;\n  /**  The callback to invoke when the 'play' event is triggered. Refer to [play in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-animation-events-play). */\n  onPlay?: (event: Event) => void;\n  /**  The callback to invoke when the 'pause' event is triggered. Refer to [pause in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-animation-events-pause). */\n  onPause?: (event: Event) => void;\n  /** The callback to invoke when the 'scene-graph-ready' event is triggered. Refer to [scene-graph-ready in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-scenegraph-events-sceneGraphReady). */\n  onSceneGraphReady?: (event: Event) => void;\n};\n\n/**\n * The `ModelViewer` component renders a 3D model (with the `model-viewer` custom element) for\n * the Storefront API's [Model3d object](https://shopify.dev/api/storefront/reference/products/model3d).\n *\n * The `model-viewer` custom element is lazily downloaded through a dynamically-injected `<script type=\"module\">` tag when the `<ModelViewer />` component is rendered\n *\n * ModelViewer is using version `1.21.1` of the `@google/model-viewer` library.\n */\nexport function ModelViewer(props: ModelViewerProps) {\n  const [modelViewer, setModelViewer] = useState<undefined | HTMLElement>(\n    undefined\n  );\n  const callbackRef = useCallback((node: HTMLElement) => {\n    setModelViewer(node);\n  }, []);\n  const {data, children, className, ...passthroughProps} = props;\n\n  const modelViewerLoadedStatus = useLoadScript(\n    'https://unpkg.com/@google/model-viewer@v1.12.1/dist/model-viewer.min.js',\n    {\n      module: true,\n    }\n  );\n\n  useEffect(() => {\n    if (!modelViewer) {\n      return;\n    }\n    if (passthroughProps.onError)\n      modelViewer.addEventListener('error', passthroughProps.onError);\n    if (passthroughProps.onLoad)\n      modelViewer.addEventListener('load', passthroughProps.onLoad);\n    if (passthroughProps.onPreload)\n      modelViewer.addEventListener('preload', passthroughProps.onPreload);\n    if (passthroughProps.onModelVisibility)\n      modelViewer.addEventListener(\n        'model-visibility',\n        passthroughProps.onModelVisibility\n      );\n    if (passthroughProps.onProgress)\n      modelViewer.addEventListener('progress', passthroughProps.onProgress);\n    if (passthroughProps.onArStatus)\n      modelViewer.addEventListener('ar-status', passthroughProps.onArStatus);\n    if (passthroughProps.onArTracking)\n      modelViewer.addEventListener(\n        'ar-tracking',\n        passthroughProps.onArTracking\n      );\n    if (passthroughProps.onQuickLookButtonTapped)\n      modelViewer.addEventListener(\n        'quick-look-button-tapped',\n        passthroughProps.onQuickLookButtonTapped\n      );\n    if (passthroughProps.onCameraChange)\n      modelViewer.addEventListener(\n        'camera-change',\n        passthroughProps.onCameraChange\n      );\n    if (passthroughProps.onEnvironmentChange)\n      modelViewer.addEventListener(\n        'environment-change',\n        passthroughProps.onEnvironmentChange\n      );\n    if (passthroughProps.onPlay)\n      modelViewer.addEventListener('play', passthroughProps.onPlay);\n    if (passthroughProps.onPause)\n      modelViewer.addEventListener('ar-status', passthroughProps.onPause);\n    if (passthroughProps.onSceneGraphReady)\n      modelViewer.addEventListener(\n        'scene-graph-ready',\n        passthroughProps.onSceneGraphReady\n      );\n\n    return () => {\n      if (modelViewer == null) {\n        return;\n      }\n      if (passthroughProps.onError)\n        modelViewer.removeEventListener('error', passthroughProps.onError);\n      if (passthroughProps.onLoad)\n        modelViewer.removeEventListener('load', passthroughProps.onLoad);\n      if (passthroughProps.onPreload)\n        modelViewer.removeEventListener('preload', passthroughProps.onPreload);\n      if (passthroughProps.onModelVisibility)\n        modelViewer.removeEventListener(\n          'model-visibility',\n          passthroughProps.onModelVisibility\n        );\n      if (passthroughProps.onProgress)\n        modelViewer.removeEventListener(\n          'progress',\n          passthroughProps.onProgress\n        );\n      if (passthroughProps.onArStatus)\n        modelViewer.removeEventListener(\n          'ar-status',\n          passthroughProps.onArStatus\n        );\n      if (passthroughProps.onArTracking)\n        modelViewer.removeEventListener(\n          'ar-tracking',\n          passthroughProps.onArTracking\n        );\n      if (passthroughProps.onQuickLookButtonTapped)\n        modelViewer.removeEventListener(\n          'quick-look-button-tapped',\n          passthroughProps.onQuickLookButtonTapped\n        );\n      if (passthroughProps.onCameraChange)\n        modelViewer.removeEventListener(\n          'camera-change',\n          passthroughProps.onCameraChange\n        );\n      if (passthroughProps.onEnvironmentChange)\n        modelViewer.removeEventListener(\n          'environment-change',\n          passthroughProps.onEnvironmentChange\n        );\n      if (passthroughProps.onPlay)\n        modelViewer.removeEventListener('play', passthroughProps.onPlay);\n      if (passthroughProps.onPause)\n        modelViewer.removeEventListener('ar-status', passthroughProps.onPause);\n      if (passthroughProps.onSceneGraphReady)\n        modelViewer.removeEventListener(\n          'scene-graph-ready',\n          passthroughProps.onSceneGraphReady\n        );\n    };\n  }, [\n    modelViewer,\n    passthroughProps.onArStatus,\n    passthroughProps.onArTracking,\n    passthroughProps.onCameraChange,\n    passthroughProps.onEnvironmentChange,\n    passthroughProps.onError,\n    passthroughProps.onLoad,\n    passthroughProps.onModelVisibility,\n    passthroughProps.onPause,\n    passthroughProps.onPlay,\n    passthroughProps.onPreload,\n    passthroughProps.onProgress,\n    passthroughProps.onQuickLookButtonTapped,\n    passthroughProps.onSceneGraphReady,\n  ]);\n\n  if (modelViewerLoadedStatus !== 'done') {\n    // TODO: What do we want to display while the model-viewer library loads?\n    return null;\n  }\n\n  if (!data.sources?.[0]?.url) {\n    const sourcesUrlError = `<ModelViewer/> requires 'data.sources' prop to be an array, with an object that has a property 'url' on it. Rendering 'null'`;\n    if (__HYDROGEN_DEV__) {\n      throw new Error(sourcesUrlError);\n    } else {\n      console.error(sourcesUrlError);\n      return null;\n    }\n  }\n\n  if (__HYDROGEN_DEV__ && !data.alt) {\n    console.warn(\n      `<ModelViewer/> requires the 'data.alt' prop for accessibility`\n    );\n  }\n\n  return (\n    <model-viewer\n      // @ts-expect-error ref should exist\n      ref={callbackRef}\n      {...passthroughProps}\n      className={className}\n      id={passthroughProps.id ?? data.id}\n      src={data.sources[0].url}\n      alt={data.alt ?? null}\n      camera-controls={passthroughProps.cameraControls ?? true}\n      poster={(passthroughProps.poster || data.previewImage?.url) ?? null}\n      autoplay={passthroughProps.autoplay ?? true}\n      loading={passthroughProps.loading}\n      reveal={passthroughProps.reveal}\n      ar={passthroughProps.ar}\n      ar-modes={passthroughProps.arModes}\n      ar-scale={passthroughProps.arScale}\n      // @ts-expect-error arPlacement should exist as a type, not sure why it doesn't. https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-attributes-arPlacement\n      ar-placement={passthroughProps.arPlacement}\n      ios-src={passthroughProps.iosSrc}\n      touch-action={passthroughProps.touchAction}\n      disable-zoom={passthroughProps.disableZoom}\n      orbit-sensitivity={passthroughProps.orbitSensitivity}\n      auto-rotate={passthroughProps.autoRotate}\n      auto-rotate-delay={passthroughProps.autoRotateDelay}\n      // @ts-expect-error rotationPerSecond should exist as a type, not sure why it doesn't. https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-attributes-rotationPerSecond\n      rotation-per-second={passthroughProps.rotationPerSecond}\n      interaction-policy={passthroughProps.interactionPolicy}\n      interaction-prompt={passthroughProps.interactionPrompt}\n      interaction-prompt-style={passthroughProps.interactionPromptStyle}\n      interaction-prompt-threshold={passthroughProps.interactionPromptThreshold}\n      camera-orbit={passthroughProps.cameraOrbit}\n      camera-target={passthroughProps.cameraTarget}\n      field-of-view={passthroughProps.fieldOfView}\n      max-camera-orbit={passthroughProps.maxCameraOrbit}\n      min-camera-orbit={passthroughProps.minCameraOrbit}\n      max-field-of-view={passthroughProps.maxFieldOfView}\n      min-field-of-view={passthroughProps.minFieldOfView}\n      bounds={passthroughProps.bounds}\n      interpolation-decay={passthroughProps.interpolationDecay ?? 100}\n      skybox-image={passthroughProps.skyboxImage}\n      environment-image={passthroughProps.environmentImage}\n      exposure={passthroughProps.exposure}\n      shadow-intensity={passthroughProps.shadowIntensity ?? 0}\n      shadow-softness={passthroughProps.shadowSoftness ?? 0}\n      animation-name={passthroughProps.animationName}\n      animation-crossfade-duration={passthroughProps.animationCrossfadeDuration}\n      variant-name={passthroughProps.variantName}\n      orientation={passthroughProps.orientation}\n      scale={passthroughProps.scale}\n    >\n      {children}\n    </model-viewer>\n  );\n}\n", "import {Image, type ShopifyImageProps} from './Image.js';\nimport {Video} from './Video.js';\nimport {ExternalVideo} from './ExternalVideo.js';\nimport {ModelViewer} from './ModelViewer.js';\nimport type {MediaEdge as MediaEdgeType} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\nimport type {ModelViewerElement} from '@google/model-viewer/lib/model-viewer.js';\n\ntype BaseProps = React.HTMLAttributes<\n  HTMLImageElement | HTMLVideoElement | HTMLIFrameElement | ModelViewerElement\n>;\nexport interface MediaFileProps extends BaseProps {\n  /** An object with fields that correspond to the Storefront API's [Media object](https://shopify.dev/api/storefront/reference/products/media). */\n  data: PartialDeep<MediaEdgeType['node'], {recurseIntoArrays: true}>;\n  /** The options for the `Image`, `Video`, or `ExternalVideo` components. */\n  mediaOptions?: {\n    /** Props that will only apply when an `<Image />` is rendered */\n    image: Omit<ShopifyImageProps, 'data'>;\n    /** Props that will only apply when a `<Video />` is rendered */\n    video: Omit<React.ComponentProps<typeof Video>, 'data'>;\n    /** Props that will only apply when an `<ExternalVideo />` is rendered */\n    externalVideo: Omit<\n      React.ComponentProps<typeof ExternalVideo>['options'],\n      'data'\n    >;\n    /** Props that will only apply when a `<ModelViewer />` is rendered */\n    modelViewer: Omit<typeof ModelViewer, 'data'>;\n  };\n}\n\n/**\n * The `MediaFile` component renders the media for the Storefront API's\n * [Media object](https://shopify.dev/api/storefront/reference/products/media). It renders an `Image`, a\n * `Video`, an `ExternalVideo`, or a `ModelViewer` depending on the `__typename` of the `data` prop.\n */\nexport function MediaFile({\n  data,\n  mediaOptions,\n  ...passthroughProps\n}: MediaFileProps) {\n  switch (data.__typename) {\n    case 'MediaImage': {\n      if (!data.image) {\n        const noDataImage = `<MediaFile/>: 'data.image' does not exist for __typename of 'MediaImage'; rendering 'null' by default.`;\n        if (__HYDROGEN_DEV__) {\n          throw new Error(noDataImage);\n        } else {\n          console.warn(noDataImage);\n          return null;\n        }\n      }\n\n      return (\n        <Image\n          {...passthroughProps}\n          {...mediaOptions?.image}\n          data={data.image}\n        />\n      );\n    }\n    case 'Video': {\n      return (\n        <Video {...passthroughProps} {...mediaOptions?.video} data={data} />\n      );\n    }\n    case 'ExternalVideo': {\n      return (\n        <ExternalVideo\n          {...passthroughProps}\n          {...mediaOptions?.externalVideo}\n          data={data}\n        />\n      );\n    }\n    case 'Model3d': {\n      return (\n        // @ts-expect-error There are issues with the inferred HTML attribute types here for ModelViewer (and contentEditable), but I think that's a little bit beyond me at the moment\n        <ModelViewer\n          {...passthroughProps}\n          {...mediaOptions?.modelViewer}\n          data={data}\n        />\n      );\n    }\n    default: {\n      const typenameMissingMessage = `<MediaFile /> requires the '__typename' property to exist on the 'data' prop in order to correctly render the correct component for this media. Rendering 'null' by default`;\n      if (__HYDROGEN_DEV__) {\n        throw new Error(typenameMissingMessage);\n      } else {\n        console.error(typenameMissingMessage);\n        return null;\n      }\n    }\n  }\n}\n"],
-  "mappings": "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",
-  "names": ["flattenConnection", "connection", "noConnectionErr", "edge", "PRODUCTION_CDN_HOSTNAMES", "LOCAL_CDN_HOSTNAMES", "ALL_CDN_HOSTNAMES", "IMG_SRC_SET_SIZES", "addImageSizeParametersToUrl", "src", "width", "height", "crop", "scale", "newUrl", "multipliedScale", "finalWidth", "shopifyImageLoader", "params", "newSrc", "allowedHostname", "getShopifyImageDimensions", "sfapiImage", "loaderOptions", "elementProps", "_a", "_b", "_c", "_d", "_e", "_f", "aspectRatio", "Image", "data", "width", "height", "loading", "loader", "shopifyImageLoader", "loaderOptions", "widths", "decoding", "rest", "url", "missingUrlError", "id", "console", "error", "imgElementWidth", "imgElementHeight", "getShopifyImageDimensions", "elementProps", "finalSrc", "src", "Error", "maxWidth", "finalSrcset", "srcSet", "internalImageSrcSet", "altText", "alt", "undefined", "crop", "scale", "hasCustomWidths", "Array", "isArray", "some", "size", "isNaN", "aspectRatio", "Number", "setSizes", "IMG_SRC_SET_SIZES", "length", "filter", "srcGenerator", "addImageSizeParametersToUrl", "map", "join", "SFAPI_VERSION", "ShopifyContext", "createContext", "storeDomain", "storefrontToken", "storefrontApiVersion", "SFAPI_VERSION", "country", "isoCode", "language", "locale", "getStorefrontApiUrl", "getPublicTokenHeaders", "useShop", "shopContext", "useContext", "ShopifyContext", "Error", "useMoney", "money", "locale", "useShop", "Error", "amount", "parseFloat", "options", "useMemo", "style", "currency", "currencyCode", "defaultFormatter", "useLazyFormatter", "nameFormatter", "currencyDisplay", "narrowSymbolFormatter", "withoutTrailingZerosFormatter", "minimumFractionDigits", "maximumFractionDigits", "withoutCurrencyFormatter", "withoutTrailingZerosOrCurrencyFormatter", "isPartCurrency", "part", "type", "lazyFormatters", "original", "localizedString", "format", "parts", "formatToParts", "withoutTrailingZeros", "withoutTrailingZerosAndCurrency", "currencyName", "find", "value", "currencySymbol", "currencyNarrowSymbol", "filter", "includes", "map", "join", "Proxy", "get", "target", "key", "Reflect", "call", "memoized", "Intl", "NumberFormat", "Money", "data", "as", "withoutCurrency", "withoutTrailingZeros", "measurement", "measurementSeparator", "passthroughProps", "isMoney", "Error", "moneyObject", "useMoney", "Wrapper", "output", "localizedString", "amount", "withoutTrailingZerosAndCurrency", "referenceUnit", "_Fragment", "maybeMoney", "currencyCode", "SCRIPTS_LOADED", "loadScript", "src", "options", "isScriptLoaded", "promise", "Promise", "resolve", "reject", "script", "document", "createElement", "module", "type", "onload", "onerror", "in", "head", "appendChild", "body", "useLoadScript", "url", "status", "setStatus", "useState", "stringifiedOptions", "JSON", "stringify", "useEffect", "loadScriptWrapper", "SHOPJS_URL", "ShopPayButton", "variantIds", "className", "variantIdsAndQuantities", "width", "storeDomain", "useShop", "shopPayLoadedStatus", "useLoadScript", "ids", "Error", "DoublePropsErrorMessage", "reduce", "prev", "curr", "bareId", "getIdFromGid", "push", "id", "quantity", "MissingPropsErrorMessage", "undefined", "_jsx", "join", "split", "pop", "ExternalVideo", "props", "data", "options", "id", "frameBorder", "allow", "allowFullScreen", "loading", "passthroughProps", "embedUrl", "Error", "finalUrl", "urlObject", "URL", "key", "Object", "keys", "searchParams", "set", "toString", "alt", "Video", "props", "data", "previewImageOptions", "id", "playsInline", "controls", "sourceProps", "passthroughProps", "posterUrl", "shopifyImageLoader", "src", "previewImage", "url", "sources", "Error", "map", "source", "mimeType", "ModelViewer", "props", "modelViewer", "setModelViewer", "useState", "undefined", "callbackRef", "useCallback", "node", "data", "children", "className", "passthroughProps", "modelViewerLoadedStatus", "useLoadScript", "module", "useEffect", "onError", "addEventListener", "onLoad", "onPreload", "onModelVisibility", "onProgress", "onArStatus", "onArTracking", "onQuickLookButtonTapped", "onCameraChange", "onEnvironmentChange", "onPlay", "onPause", "onSceneGraphReady", "removeEventListener", "sources", "url", "id", "alt", "cameraControls", "poster", "previewImage", "autoplay", "loading", "reveal", "ar", "arModes", "arScale", "arPlacement", "iosSrc", "touchAction", "disableZoom", "orbitSensitivity", "autoRotate", "autoRotateDelay", "rotationPerSecond", "interactionPolicy", "interactionPrompt", "interactionPromptStyle", "interactionPromptThreshold", "cameraOrbit", "cameraTarget", "fieldOfView", "maxCameraOrbit", "minCameraOrbit", "maxFieldOfView", "minFieldOfView", "bounds", "interpolationDecay", "skyboxImage", "environmentImage", "exposure", "shadowIntensity", "shadowSoftness", "animationName", "animationCrossfadeDuration", "variantName", "orientation", "scale", "console", "error", "MediaFile", "data", "mediaOptions", "passthroughProps", "__typename", "image", "Image", "console", "warn", "Video", "video", "ExternalVideo", "externalVideo", "ModelViewer", "modelViewer", "error"]
-}

package/dist/templates/demo-store/dist/client/build/_shared/chunk-6KICVRFE.js

@@ -1,32 +0,0 @@
-import{b as $,d as l}from"/build/_shared/chunk-J43VR2R2.js";import{M as f,O as p,Z as h,_ as t}from"/build/_shared/chunk-GHUOM4KB.js";import{i as r,q as C}from"/build/_shared/chunk-ZNLABNO4.js";import{a as m,b as y}from"/build/_shared/chunk-KSKV5IK6.js";import{b as a}from"/build/_shared/chunk-X4LCECW4.js";var n=a(m());var e=a(y());function E(){let{primaryHero:i,secondaryHero:u,tertiaryHero:s,featuredCollections:c,featuredProducts:d}=C(),g=f([{},{},{}]);return(0,e.jsxs)(e.Fragment,{children:[i&&(0,e.jsx)(t,{...i,height:"full",top:!0,loading:"eager"}),d&&(0,e.jsx)(n.Suspense,{children:(0,e.jsx)(r,{resolve:d,children:({products:o})=>o?.nodes?(0,e.jsx)(p,{products:o.nodes,title:"Featured Products",count:4}):null})}),u&&(0,e.jsx)(n.Suspense,{fallback:(0,e.jsx)(t,{...g[1]}),children:(0,e.jsx)(r,{resolve:u,children:({hero:o})=>o?(0,e.jsx)(t,{...o}):null})}),c&&(0,e.jsx)(n.Suspense,{children:(0,e.jsx)(r,{resolve:c,children:({collections:o})=>o?.nodes?(0,e.jsx)(h,{collections:o.nodes,title:"Collections"}):null})}),s&&(0,e.jsx)(n.Suspense,{fallback:(0,e.jsx)(t,{...g[2]}),children:(0,e.jsx)(r,{resolve:s,children:({hero:o})=>o?(0,e.jsx)(t,{...o}):null})})]})}var S=`#graphql
-  ${l}
-  query collectionContent($handle: String, $country: CountryCode, $language: LanguageCode)
-  @inContext(country: $country, language: $language) {
-    hero: collection(handle: $handle) {
-      ...CollectionContent
-    }
-    shop {
-      name
-      description
-    }
-  }
-`,T=`#graphql
-  ${l}
-  query collectionContent($handle: String, $country: CountryCode, $language: LanguageCode)
-  @inContext(country: $country, language: $language) {
-    hero: collection(handle: $handle) {
-      ...CollectionContent
-    }
-  }
-`,_=`#graphql
-  ${$}
-  query homepageFeaturedProducts($country: CountryCode, $language: LanguageCode)
-  @inContext(country: $country, language: $language) {
-    products(first: 8) {
-      nodes {
-        ...ProductCard
-      }
-    }
-  }
-`;export{E as a};
-//# sourceMappingURL=/build/_shared/chunk-6KICVRFE.js.map

package/dist/templates/demo-store/dist/client/build/_shared/chunk-6KICVRFE.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../app/routes/index.tsx"],
-  "sourcesContent": ["import {defer, type LoaderArgs} from '@shopify/remix-oxygen';\nimport {Suspense} from 'react';\nimport {Await, useLoaderData} from '@remix-run/react';\nimport {ProductSwimlane, FeaturedCollections, Hero} from '~/components';\nimport {COLLECTION_CONTENT_FRAGMENT, PRODUCT_CARD_FRAGMENT} from '~/data';\nimport {getHeroPlaceholder} from '~/lib/placeholders';\nimport type {\n  CollectionConnection,\n  Metafield,\n  ProductConnection,\n} from '@shopify/hydrogen-react/storefront-api-types';\n\ninterface HomeSeoData {\n  shop: {\n    name: string;\n    description: string;\n  };\n}\n\nexport interface CollectionHero {\n  byline: Metafield;\n  cta: Metafield;\n  handle: string;\n  heading: Metafield;\n  height?: 'full';\n  loading?: 'eager' | 'lazy';\n  spread: Metafield;\n  spreadSecondary: Metafield;\n  top?: boolean;\n}\n\nexport async function loader({params, context}: LoaderArgs) {\n  const {language, country} = context.storefront.i18n;\n\n  if (\n    params.lang &&\n    params.lang.toLowerCase() !== `${language}-${country}`.toLowerCase()\n  ) {\n    // If the lang URL param is defined, yet we still are on `EN-US`\n    // the the lang param must be invalid, send to the 404 page\n    throw new Response(null, {status: 404});\n  }\n\n  const {shop, hero} = await context.storefront.query<{\n    hero: CollectionHero;\n    shop: HomeSeoData;\n  }>(HOMEPAGE_SEO_QUERY, {\n    variables: {handle: 'freestyle'},\n  });\n\n  return defer({\n    shop,\n    primaryHero: hero,\n    // These different queries are separated to illustrate how 3rd party content\n    // fetching can be optimized for both above and below the fold.\n    featuredProducts: context.storefront.query<{\n      products: ProductConnection;\n    }>(HOMEPAGE_FEATURED_PRODUCTS_QUERY, {\n      variables: {\n        /**\n         * Country and language properties are automatically injected\n         * into all queries. Passing them is unnecessary unless you\n         * want to override them from the following default:\n         */\n        country,\n        language,\n      },\n    }),\n    secondaryHero: context.storefront.query<{hero: CollectionHero}>(\n      COLLECTION_HERO_QUERY,\n      {\n        variables: {\n          handle: 'backcountry',\n          country,\n          language,\n        },\n      },\n    ),\n    featuredCollections: context.storefront.query<{\n      collections: CollectionConnection;\n    }>(FEATURED_COLLECTIONS_QUERY, {\n      variables: {\n        country,\n        language,\n      },\n    }),\n    tertiaryHero: context.storefront.query<{hero: CollectionHero}>(\n      COLLECTION_HERO_QUERY,\n      {\n        variables: {\n          handle: 'winter-2022',\n          country,\n          language,\n        },\n      },\n    ),\n  });\n}\n\nexport default function Homepage() {\n  const {\n    primaryHero,\n    secondaryHero,\n    tertiaryHero,\n    featuredCollections,\n    featuredProducts,\n  } = useLoaderData<typeof loader>();\n\n  // TODO: skeletons vs placeholders\n  const skeletons = getHeroPlaceholder([{}, {}, {}]);\n\n  // TODO: analytics\n  // useServerAnalytics({\n  //   shopify: {\n  //     pageType: ShopifyAnalyticsConstants.pageType.home,\n  //   },\n  // });\n\n  return (\n    <>\n      {primaryHero && (\n        <Hero {...primaryHero} height=\"full\" top loading=\"eager\" />\n      )}\n\n      {featuredProducts && (\n        <Suspense>\n          <Await resolve={featuredProducts}>\n            {({products}) => {\n              if (!products?.nodes) return null;\n              return (\n                <ProductSwimlane\n                  products={products.nodes}\n                  title=\"Featured Products\"\n                  count={4}\n                />\n              );\n            }}\n          </Await>\n        </Suspense>\n      )}\n\n      {secondaryHero && (\n        <Suspense fallback={<Hero {...skeletons[1]} />}>\n          <Await resolve={secondaryHero}>\n            {({hero}) => {\n              if (!hero) return null;\n              return <Hero {...hero} />;\n            }}\n          </Await>\n        </Suspense>\n      )}\n\n      {featuredCollections && (\n        <Suspense>\n          <Await resolve={featuredCollections}>\n            {({collections}) => {\n              if (!collections?.nodes) return null;\n              return (\n                <FeaturedCollections\n                  collections={collections.nodes}\n                  title=\"Collections\"\n                />\n              );\n            }}\n          </Await>\n        </Suspense>\n      )}\n\n      {tertiaryHero && (\n        <Suspense fallback={<Hero {...skeletons[2]} />}>\n          <Await resolve={tertiaryHero}>\n            {({hero}) => {\n              if (!hero) return null;\n              return <Hero {...hero} />;\n            }}\n          </Await>\n        </Suspense>\n      )}\n    </>\n  );\n}\n\nconst HOMEPAGE_SEO_QUERY = `#graphql\n  ${COLLECTION_CONTENT_FRAGMENT}\n  query collectionContent($handle: String, $country: CountryCode, $language: LanguageCode)\n  @inContext(country: $country, language: $language) {\n    hero: collection(handle: $handle) {\n      ...CollectionContent\n    }\n    shop {\n      name\n      description\n    }\n  }\n`;\n\nconst COLLECTION_HERO_QUERY = `#graphql\n  ${COLLECTION_CONTENT_FRAGMENT}\n  query collectionContent($handle: String, $country: CountryCode, $language: LanguageCode)\n  @inContext(country: $country, language: $language) {\n    hero: collection(handle: $handle) {\n      ...CollectionContent\n    }\n  }\n`;\n\n// @see: https://shopify.dev/api/storefront/latest/queries/products\nexport const HOMEPAGE_FEATURED_PRODUCTS_QUERY = `#graphql\n  ${PRODUCT_CARD_FRAGMENT}\n  query homepageFeaturedProducts($country: CountryCode, $language: LanguageCode)\n  @inContext(country: $country, language: $language) {\n    products(first: 8) {\n      nodes {\n        ...ProductCard\n      }\n    }\n  }\n`;\n\n// @see: https://shopify.dev/api/storefront/latest/queries/collections\nexport const FEATURED_COLLECTIONS_QUERY = `#graphql\n  query homepageFeaturedCollections($country: CountryCode, $language: LanguageCode)\n  @inContext(country: $country, language: $language) {\n    collections(\n      first: 4,\n      sortKey: UPDATED_AT\n    ) {\n      nodes {\n        id\n        title\n        handle\n        image {\n          altText\n          width\n          height\n          url\n        }\n      }\n    }\n  }\n`;\n"],
-  "mappings": "mTACA,IAAAA,EAAuB,OADvB,IAAAC,EAAA,OAmGe,SAARC,GAA4B,CACjC,GAAM,CACJ,YAAAC,EACA,cAAAC,EACA,aAAAC,EACA,oBAAAC,EACA,iBAAAC,CACF,EAAIC,EAA6B,EAG3BC,EAAYC,EAAmB,CAAC,CAAC,EAAG,CAAC,EAAG,CAAC,CAAC,CAAC,EASjD,SACE,oBACG,UAAAP,MACC,OAACQ,EAAA,CAAM,GAAGR,EAAa,OAAO,OAAO,IAAG,GAAC,QAAQ,QAAQ,EAG1DI,MACC,OAAC,YACC,mBAACK,EAAA,CAAM,QAASL,EACb,UAAC,CAAC,SAAAM,CAAQ,IACJA,GAAU,SAEb,OAACC,EAAA,CACC,SAAUD,EAAS,MACnB,MAAM,oBACN,MAAO,EACT,EAN2B,KASjC,EACF,EAGDT,MACC,OAAC,YAAS,YAAU,OAACO,EAAA,CAAM,GAAGF,EAAU,GAAI,EAC1C,mBAACG,EAAA,CAAM,QAASR,EACb,UAAC,CAAC,KAAAW,CAAI,IACAA,KACE,OAACJ,EAAA,CAAM,GAAGI,EAAM,EADL,KAGtB,EACF,EAGDT,MACC,OAAC,YACC,mBAACM,EAAA,CAAM,QAASN,EACb,UAAC,CAAC,YAAAU,CAAW,IACPA,GAAa,SAEhB,OAACC,EAAA,CACC,YAAaD,EAAY,MACzB,MAAM,cACR,EAL8B,KAQpC,EACF,EAGDX,MACC,OAAC,YAAS,YAAU,OAACM,EAAA,CAAM,GAAGF,EAAU,GAAI,EAC1C,mBAACG,EAAA,CAAM,QAASP,EACb,UAAC,CAAC,KAAAU,CAAI,IACAA,KACE,OAACJ,EAAA,CAAM,GAAGI,EAAM,EADL,KAGtB,EACF,GAEJ,CAEJ,CAEA,IAAMG,EAAqB;AAAA,IACvBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaEC,EAAwB;AAAA,IAC1BD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUSE,EAAmC;AAAA,IAC5CC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
-  "names": ["import_react", "import_jsx_runtime", "Homepage", "primaryHero", "secondaryHero", "tertiaryHero", "featuredCollections", "featuredProducts", "useLoaderData", "skeletons", "getHeroPlaceholder", "Hero", "Await", "products", "ProductSwimlane", "hero", "collections", "FeaturedCollections", "HOMEPAGE_SEO_QUERY", "COLLECTION_CONTENT_FRAGMENT", "COLLECTION_HERO_QUERY", "HOMEPAGE_FEATURED_PRODUCTS_QUERY", "PRODUCT_CARD_FRAGMENT"]
-}

package/dist/templates/demo-store/dist/client/build/_shared/chunk-6KPVFOMZ.js

@@ -1,2 +0,0 @@
-import{D as w,E as a,R as n}from"/build/_shared/chunk-GHUOM4KB.js";import{f as t}from"/build/_shared/chunk-WYHUKY3H.js";import{c as m,o as d,r as c,s as u}from"/build/_shared/chunk-ZNLABNO4.js";import{b as p}from"/build/_shared/chunk-KSKV5IK6.js";import{b as l}from"/build/_shared/chunk-X4LCECW4.js";var e=l(p());var v={renderInModal:!0};function f(){let r=c(),{customer:s}=m(),o=u();return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(a,{className:"mt-4 mb-6",as:"h3",size:"lead",children:"Update your profile"}),(0,e.jsxs)(d,{method:"post",children:[r?.formError&&(0,e.jsx)("div",{className:"flex items-center justify-center mb-6 bg-red-100 rounded",children:(0,e.jsx)("p",{className:"m-4 text-sm text-red-900",children:r.formError})}),(0,e.jsx)("div",{className:"mt-3",children:(0,e.jsx)("input",{className:t(),id:"firstName",name:"firstName",type:"text",autoComplete:"given-name",placeholder:"First name","aria-label":"First name",defaultValue:s.firstName??""})}),(0,e.jsx)("div",{className:"mt-3",children:(0,e.jsx)("input",{className:t(),id:"lastName",name:"lastName",type:"text",autoComplete:"family-name",placeholder:"Last name","aria-label":"Last name",defaultValue:s.lastName??""})}),(0,e.jsx)("div",{className:"mt-3",children:(0,e.jsx)("input",{className:t(),id:"phone",name:"phone",type:"tel",autoComplete:"tel",placeholder:"Mobile","aria-label":"Mobile",defaultValue:s.phone??""})}),(0,e.jsxs)("div",{className:"mt-3",children:[(0,e.jsx)("input",{className:t(r?.fieldErrors?.email),id:"email",name:"email",type:"email",autoComplete:"email",required:!0,placeholder:"Email address","aria-label":"Email address",defaultValue:s.email??""}),r?.fieldErrors?.email&&(0,e.jsxs)("p",{className:"text-red-500 text-xs",children:[r.fieldErrors.email," \xA0"]})]}),(0,e.jsx)(a,{className:"mb-6 mt-6",as:"h3",size:"lead",children:"Change your password"}),(0,e.jsx)(i,{name:"currentPassword",label:"Current password",passwordError:r?.fieldErrors?.currentPassword}),r?.fieldErrors?.currentPassword&&(0,e.jsxs)(a,{size:"fine",className:"mt-1 text-red-500",children:[r.fieldErrors.currentPassword," \xA0"]}),(0,e.jsx)(i,{name:"newPassword",label:"New password",passwordError:r?.fieldErrors?.newPassword}),(0,e.jsx)(i,{name:"newPassword2",label:"Re-enter new password",passwordError:r?.fieldErrors?.newPassword2}),(0,e.jsx)(a,{size:"fine",color:"subtle",className:w("mt-1",r?.fieldErrors?.newPassword&&"text-red-500"),children:"Passwords must be at least 8 characters."}),r?.fieldErrors?.newPassword2?(0,e.jsx)("br",{}):null,r?.fieldErrors?.newPassword2&&(0,e.jsxs)(a,{size:"fine",className:"mt-1 text-red-500",children:[r.fieldErrors.newPassword2," \xA0"]}),(0,e.jsx)("div",{className:"mt-6",children:(0,e.jsx)(n,{className:"text-sm mb-2",variant:"primary",width:"full",type:"submit",disabled:o.state!=="idle",children:o.state!=="idle"?"Saving":"Save"})}),(0,e.jsx)("div",{className:"mb-4",children:(0,e.jsx)(n,{to:"..",className:"text-sm",variant:"secondary",width:"full",children:"Cancel"})})]})]})}function i({name:r,passwordError:s,label:o}){return(0,e.jsx)("div",{className:"mt-3",children:(0,e.jsx)("input",{className:t(s),id:r,name:r,type:"password",autoComplete:r==="currentPassword"?"current-password":void 0,placeholder:o,"aria-label":o,minLength:8})})}export{v as a,f as b};
-//# sourceMappingURL=/build/_shared/chunk-6KPVFOMZ.js.map

package/dist/templates/demo-store/dist/client/build/_shared/chunk-6KPVFOMZ.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../app/routes/account/__private/edit.tsx"],
-  "sourcesContent": ["import {json, redirect, type ActionFunction} from '@shopify/remix-oxygen';\nimport {\n  useActionData,\n  Form,\n  useOutletContext,\n  useTransition,\n} from '@remix-run/react';\nimport type {\n  Customer,\n  CustomerUpdateInput,\n} from '@shopify/hydrogen-react/storefront-api-types';\nimport clsx from 'clsx';\nimport invariant from 'tiny-invariant';\nimport {Button, Text} from '~/components';\nimport {getCustomer, updateCustomer} from '~/data';\nimport {getInputStyleClasses} from '~/lib/utils';\n\nexport interface AccountOutletContext {\n  customer: Customer;\n}\n\nexport interface ActionData {\n  success?: boolean;\n  formError?: string;\n  fieldErrors?: {\n    firstName?: string;\n    lastName?: string;\n    email?: string;\n    phone?: string;\n    currentPassword?: string;\n    newPassword?: string;\n    newPassword2?: string;\n  };\n}\n\nconst badRequest = (data: ActionData) => json(data, {status: 400});\n\nconst formDataHas = (formData: FormData, key: string) => {\n  if (!formData.has(key)) return false;\n\n  const value = formData.get(key);\n  return typeof value === 'string' && value.length > 0;\n};\n\nexport const handle = {\n  renderInModal: true,\n};\n\nexport const action: ActionFunction = async ({request, context, params}) => {\n  const formData = await request.formData();\n\n  const customerAccessToken = await context.session.get('customerAccessToken');\n\n  invariant(\n    customerAccessToken,\n    'You must be logged in to update your account details.',\n  );\n\n  // Double-check current user is logged in.\n  // Will throw a logout redirect if not.\n  await getCustomer(context, customerAccessToken);\n\n  if (\n    formDataHas(formData, 'newPassword') &&\n    !formDataHas(formData, 'currentPassword')\n  ) {\n    return badRequest({\n      fieldErrors: {\n        currentPassword:\n          'Please enter your current password before entering a new password.',\n      },\n    });\n  }\n\n  if (\n    formData.has('newPassword') &&\n    formData.get('newPassword') !== formData.get('newPassword2')\n  ) {\n    return badRequest({\n      fieldErrors: {\n        newPassword2: 'New passwords must match.',\n      },\n    });\n  }\n\n  try {\n    const customer: CustomerUpdateInput = {};\n\n    formDataHas(formData, 'firstName') &&\n      (customer.firstName = formData.get('firstName') as string);\n    formDataHas(formData, 'lastName') &&\n      (customer.lastName = formData.get('lastName') as string);\n    formDataHas(formData, 'email') &&\n      (customer.email = formData.get('email') as string);\n    formDataHas(formData, 'phone') &&\n      (customer.phone = formData.get('phone') as string);\n    formDataHas(formData, 'newPassword') &&\n      (customer.password = formData.get('newPassword') as string);\n\n    await updateCustomer(context, {customerAccessToken, customer});\n\n    return redirect(params?.lang ? `${params.lang}/account` : '/account');\n  } catch (error: any) {\n    return badRequest({formError: error.message});\n  }\n};\n\n/**\n * Since this component is nested in `accounts/`, it is rendered in a modal via `<Outlet>` in `account.tsx`.\n *\n * This allows us to:\n * - preserve URL state (`/accounts/edit` when the modal is open)\n * - co-locate the edit action with the edit form (rather than grouped in account.tsx)\n * - use the `useOutletContext` hook to access the customer data from the parent route (no additional data loading)\n * - return a simple `redirect()` from this action to close the modal :mindblown: (no useState/useEffect)\n * - use the presence of outlet data (in `account.tsx`) to open/close the modal (no useState)\n */\nexport default function AccountDetailsEdit() {\n  const actionData = useActionData<ActionData>();\n  const {customer} = useOutletContext<AccountOutletContext>();\n  const transition = useTransition();\n\n  return (\n    <>\n      <Text className=\"mt-4 mb-6\" as=\"h3\" size=\"lead\">\n        Update your profile\n      </Text>\n      <Form method=\"post\">\n        {actionData?.formError && (\n          <div className=\"flex items-center justify-center mb-6 bg-red-100 rounded\">\n            <p className=\"m-4 text-sm text-red-900\">{actionData.formError}</p>\n          </div>\n        )}\n        <div className=\"mt-3\">\n          <input\n            className={getInputStyleClasses()}\n            id=\"firstName\"\n            name=\"firstName\"\n            type=\"text\"\n            autoComplete=\"given-name\"\n            placeholder=\"First name\"\n            aria-label=\"First name\"\n            defaultValue={customer.firstName ?? ''}\n          />\n        </div>\n        <div className=\"mt-3\">\n          <input\n            className={getInputStyleClasses()}\n            id=\"lastName\"\n            name=\"lastName\"\n            type=\"text\"\n            autoComplete=\"family-name\"\n            placeholder=\"Last name\"\n            aria-label=\"Last name\"\n            defaultValue={customer.lastName ?? ''}\n          />\n        </div>\n        <div className=\"mt-3\">\n          <input\n            className={getInputStyleClasses()}\n            id=\"phone\"\n            name=\"phone\"\n            type=\"tel\"\n            autoComplete=\"tel\"\n            placeholder=\"Mobile\"\n            aria-label=\"Mobile\"\n            defaultValue={customer.phone ?? ''}\n          />\n        </div>\n        <div className=\"mt-3\">\n          <input\n            className={getInputStyleClasses(actionData?.fieldErrors?.email)}\n            id=\"email\"\n            name=\"email\"\n            type=\"email\"\n            autoComplete=\"email\"\n            required\n            placeholder=\"Email address\"\n            aria-label=\"Email address\"\n            defaultValue={customer.email ?? ''}\n          />\n          {actionData?.fieldErrors?.email && (\n            <p className=\"text-red-500 text-xs\">\n              {actionData.fieldErrors.email} &nbsp;\n            </p>\n          )}\n        </div>\n        <Text className=\"mb-6 mt-6\" as=\"h3\" size=\"lead\">\n          Change your password\n        </Text>\n        <Password\n          name=\"currentPassword\"\n          label=\"Current password\"\n          passwordError={actionData?.fieldErrors?.currentPassword}\n        />\n        {actionData?.fieldErrors?.currentPassword && (\n          <Text size=\"fine\" className=\"mt-1 text-red-500\">\n            {actionData.fieldErrors.currentPassword} &nbsp;\n          </Text>\n        )}\n        <Password\n          name=\"newPassword\"\n          label=\"New password\"\n          passwordError={actionData?.fieldErrors?.newPassword}\n        />\n        <Password\n          name=\"newPassword2\"\n          label=\"Re-enter new password\"\n          passwordError={actionData?.fieldErrors?.newPassword2}\n        />\n        <Text\n          size=\"fine\"\n          color=\"subtle\"\n          className={clsx(\n            'mt-1',\n            actionData?.fieldErrors?.newPassword && 'text-red-500',\n          )}\n        >\n          Passwords must be at least 8 characters.\n        </Text>\n        {actionData?.fieldErrors?.newPassword2 ? <br /> : null}\n        {actionData?.fieldErrors?.newPassword2 && (\n          <Text size=\"fine\" className=\"mt-1 text-red-500\">\n            {actionData.fieldErrors.newPassword2} &nbsp;\n          </Text>\n        )}\n        <div className=\"mt-6\">\n          <Button\n            className=\"text-sm mb-2\"\n            variant=\"primary\"\n            width=\"full\"\n            type=\"submit\"\n            disabled={transition.state !== 'idle'}\n          >\n            {transition.state !== 'idle' ? 'Saving' : 'Save'}\n          </Button>\n        </div>\n        <div className=\"mb-4\">\n          <Button to=\"..\" className=\"text-sm\" variant=\"secondary\" width=\"full\">\n            Cancel\n          </Button>\n        </div>\n      </Form>\n    </>\n  );\n}\n\nfunction Password({\n  name,\n  passwordError,\n  label,\n}: {\n  name: string;\n  passwordError?: string;\n  label: string;\n}) {\n  return (\n    <div className=\"mt-3\">\n      <input\n        className={getInputStyleClasses(passwordError)}\n        id={name}\n        name={name}\n        type=\"password\"\n        autoComplete={\n          name === 'currentPassword' ? 'current-password' : undefined\n        }\n        placeholder={label}\n        aria-label={label}\n        minLength={8}\n      />\n    </div>\n  );\n}\n"],
-  "mappings": "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",
-  "names": ["import_jsx_runtime", "handle", "AccountDetailsEdit", "actionData", "useActionData", "customer", "useOutletContext", "transition", "useTransition", "Text", "Form", "getInputStyleClasses", "Password", "clsx_m_default", "Button", "name", "passwordError", "label"]
-}