@dropins/storefront-product-discovery 1.0.0 → 1.0.2-alpha5

package/containers/SearchBarResults.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBarResults.js","sources":["/@dropins/storefront-product-discovery/src/components/SearchBarResults/SearchBarResults.tsx","/@dropins/storefront-product-discovery/src/components/ProductItem/ProductItem.tsx","/@dropins/storefront-product-discovery/src/containers/SearchBarResults/SearchBarResults.tsx"],"sourcesContent":["/********************************************************************\n *  Copyright 2025 Adobe\n *  All Rights Reserved.\n *\n * NOTICE:  Adobe permits you to use, modify, and distribute this\n * file in accordance with the terms of the Adobe license agreement\n * accompanying it.\n *******************************************************************/\n\nimport { FunctionComponent, VNode } from 'preact';\nimport { HTMLAttributes, useEffect, useRef, useCallback } from 'preact/compat';\nimport { VComponent } from '@adobe-commerce/elsie/lib';\n\nimport '@/plp/components/SearchBarResults/SearchBarResults.css';\n\nexport interface SearchBarResultsProps extends HTMLAttributes<HTMLDivElement> {\n  productList?: VNode[];\n  viewAllButton?: VNode;\n  onClose?: () => void;\n}\n\nexport const SearchBarResults: FunctionComponent<SearchBarResultsProps> = ({\n  productList,\n  viewAllButton,\n  onClose,\n  ...props\n}) => {\n  const hasData = productList && productList.length > 0;\n  const popoverRef = useRef<HTMLDivElement>(null);\n\n  const handleClickOutside = useCallback(\n    (event: MouseEvent) => {\n      if (popoverRef.current && !popoverRef.current.contains(event.target as Node)) {\n        onClose?.();\n      }\n    },\n    [onClose],\n  );\n\n  const handleEscapeKey = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        onClose?.();\n      }\n    },\n    [onClose],\n  );\n\n  useEffect(() => {\n    if (!hasData) return;\n\n    document.addEventListener('mousedown', handleClickOutside);\n    document.addEventListener('keydown', handleEscapeKey);\n\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n      document.removeEventListener('keydown', handleEscapeKey);\n    };\n  }, [hasData, handleClickOutside, handleEscapeKey]);\n\n  if (!hasData) return null;\n\n  return (\n    <div className=\"product-discovery--search-bar-results\" {...props}>\n      <div\n        className=\"product-discovery--search-bar-results__popover\"\n        ref={popoverRef}\n        role=\"region\"\n        aria-label=\"Search results\"\n        aria-live=\"polite\"\n      >\n        <div className=\"product-discovery--search-bar-results__outer-container\" {...props}>\n          <div\n            className=\"product-discovery--search-bar-results__grid\"\n            role=\"list\"\n            aria-label={`${productList?.length || 0} search results`}\n          >\n            {productList?.map((item, index) => (\n              <div key={index} role=\"listitem\">\n                {item}\n              </div>\n            ))}\n          </div>\n          {viewAllButton && (\n            <div className=\"product-discovery--search-bar-results__view-all-wrapper\">\n              <VComponent className=\"product-discovery--search-bar-results__view-all-button\" node={viewAllButton} />\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n","/********************************************************************\n *  Copyright 2025 Adobe\n *  All Rights Reserved.\n *\n * NOTICE:  Adobe permits you to use, modify, and distribute this\n * file in accordance with the terms of the Adobe license agreement\n * accompanying it.\n ***************************************************************************/\n\nimport { FunctionComponent, VNode } from 'preact';\nimport { AnchorHTMLAttributes, useMemo } from 'preact/compat';\nimport { VComponent } from '@adobe-commerce/elsie/lib';\nimport { Product } from '@/plp/data/models/product';\n\nimport '@/plp/components/ProductItem/ProductItem.css';\nimport { SEARCH_UNIT_ID, searchProductClick } from '@/plp/utils/acdlEvents';\n\nexport interface ProductItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  productRouteSearch?: (product: Product) => string;\n  productItem: Product;\n  productImage?: VNode;\n  productName?: VNode;\n  productPrice?: VNode;\n}\n\nexport const ProductItem: FunctionComponent<ProductItemProps> = ({\n  productRouteSearch = (product: Product) => product?.url || '',\n  productItem,\n  productImage,\n  productName,\n  productPrice,\n  ...props\n}) => {\n  const productData = useMemo(() => {\n    const { name = '', sku = '', url = '' } = productItem || {};\n\n    // create tooltip text depending on available data\n    const tooltipText = [name, sku && `SKU: ${sku}`].filter(Boolean).join('\\n');\n\n    return { tooltipText, url };\n  }, [productItem]);\n\n  const handleProductClick = (product: Product): void => {\n    searchProductClick(product.sku, SEARCH_UNIT_ID);\n  };\n\n  return (\n    <a\n      className=\"product-discovery--product-item\"\n      href={productRouteSearch(productItem)}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      title={productData.tooltipText}\n      onClick={() => handleProductClick(productItem)}\n      {...props}\n    >\n      <div className=\"product-discovery--product-item__image\">\n        <VComponent node={productImage} />\n      </div>\n      <div className=\"product-discovery--product-item__details\">\n        <VComponent node={productName} />\n        <VComponent node={productPrice} />\n      </div>\n    </a>\n  );\n};\n","/********************************************************************\n *  Copyright 2025 Adobe\n *  All Rights Reserved.\n *\n * NOTICE:  Adobe permits you to use, modify, and distribute this\n * file in accordance with the terms of the Adobe license agreement\n * accompanying it.\n *******************************************************************/\n\nimport { HTMLAttributes, useState, useEffect, useCallback, useMemo } from 'preact/compat';\nimport { Button, Image, ImageProps, Price } from '@adobe-commerce/elsie/components';\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport { Container, Slot, SlotProps } from '@adobe-commerce/elsie/lib';\nimport { events } from '@adobe-commerce/event-bus';\n\nimport { Product, SearchInputRequest, SearchInputResult } from '@/plp/data/models/product';\nimport { SearchVariables } from '@/plp/data/models/api';\nimport { SearchBarResults as SearchBarResultsComponent } from '@/plp/components/SearchBarResults';\nimport { ProductItem as ProductItemComponent } from '@/plp/components/ProductItem';\n\nexport interface SearchBarResultsProps extends HTMLAttributes<HTMLDivElement> {\n  products?: Product[];\n  productRouteSearch?: (product: Product) => string;\n  routeSearch?: (searchQuery: string) => void;\n  slots?: {\n    ProductImage?: SlotProps;\n    ProductName?: SlotProps;\n    ProductPrice?: SlotProps;\n  };\n}\n\nexport const SearchBarResults: Container<SearchBarResultsProps> = ({\n  products = [],\n  productRouteSearch = (product: Product) => product?.url || '',\n  routeSearch = () => {},\n  slots,\n}) => {\n  const [searchResults, setSearchResults] = useState<Product[]>(products);\n  const [searchQuery, setSearchQuery] = useState('');\n  const [showResults, setShowResults] = useState(products.length > 0);\n\n  const translations = useText({ viewAllButton: 'Search.SearchInput.viewAllButton' });\n\n  const handleSearchInputResult = useCallback(\n    ({ result = [], request = {} }: { result?: Product[]; request?: Pick<SearchVariables, 'phrase'> }) => {\n      const { phrase = '' } = request;\n      setSearchResults(result);\n      setSearchQuery(phrase);\n      setShowResults(result.length > 0 && phrase.length > 0);\n    },\n    [],\n  );\n\n  useEffect(() => {\n    const searchInputEvent = events.on('search-input/result', handleSearchInputResult);\n\n    return () => {\n      searchInputEvent?.off();\n    };\n  }, [handleSearchInputResult]);\n\n  const handleClose = useCallback(() => {\n    // emit \"search-input/result\" event with empty payloads to clear anything listening for that\n    events.emit('search-input/result', {\n      result: [],\n      request: { phrase: '' },\n    } as SearchInputResult);\n\n    setShowResults(false);\n  }, []);\n\n  const handleOnSearchAll = useCallback(() => {\n    // if a `routeSearch` cb function is provided, use it to handle any navigation needed\n    routeSearch && routeSearch(searchQuery);\n\n    // emit \"search/request\" event to trigger listeners of the search event\n    events.emit('search/request', { phrase: searchQuery } as SearchInputRequest);\n\n    handleClose();\n  }, [routeSearch, searchQuery, handleClose]);\n\n  const getProductImage = useCallback(\n    (productItem: Product) => {\n      const defaultImageProps: ImageProps = {\n        loading: 'lazy',\n        src: productItem.images?.[0]?.url || '',\n        alt: productItem.images?.[0]?.label || '',\n        width: '165',\n        height: '165',\n      };\n      return (\n        <Slot name=\"ProductImage\" slot={slots?.ProductImage} context={{ productItem, defaultImageProps }}>\n          <Image {...defaultImageProps} aria-label={productItem.sku} />\n        </Slot>\n      );\n    },\n    [slots?.ProductImage],\n  );\n\n  const getProductName = useCallback(\n    (productItem: Product) => (\n      <Slot name=\"ProductName\" slot={slots?.ProductName} context={{ productItem }}>\n        {productItem?.name || ''}\n      </Slot>\n    ),\n    [slots?.ProductName],\n  );\n\n  const getProductPrice = useCallback(\n    (productItem: Product) => {\n      const { value, currency } =\n        productItem?.price?.final?.amount || productItem?.priceRange?.minimum?.final?.amount || {};\n      return (\n        <Slot name=\"ProductPrice\" slot={slots?.ProductPrice} context={{ productItem }}>\n          <Price amount={typeof value === 'number' ? value : undefined} currency={currency} />\n        </Slot>\n      );\n    },\n    [slots?.ProductPrice],\n  );\n\n  const productContainer = useCallback(\n    (productItem: Product) => (\n      <ProductItemComponent\n        productRouteSearch={productRouteSearch}\n        productItem={productItem}\n        productImage={getProductImage(productItem)}\n        productName={getProductName(productItem)}\n        productPrice={getProductPrice(productItem)}\n      />\n    ),\n    [productRouteSearch, getProductImage, getProductName, getProductPrice],\n  );\n\n  const viewAllButton = useMemo(\n    () => (\n      <Button variant=\"tertiary\" onClick={handleOnSearchAll}>\n        {translations.viewAllButton}\n      </Button>\n    ),\n    [translations.viewAllButton, handleOnSearchAll],\n  );\n\n  const productList = useMemo(\n    () => searchResults?.map((product) => productContainer(product)),\n    [searchResults, productContainer],\n  );\n\n  if (!searchResults.length || !showResults) {\n    return null;\n  }\n\n  return <SearchBarResultsComponent productList={productList} viewAllButton={viewAllButton} onClose={handleClose} />;\n};\n"],"names":["SearchBarResults","productList","viewAllButton","onClose","props","hasData","popoverRef","useRef","handleClickOutside","useCallback","event","handleEscapeKey","useEffect","jsx","jsxs","item","index","VComponent","ProductItem","productRouteSearch","product","productItem","productImage","productName","productPrice","productData","useMemo","name","sku","url","handleProductClick","searchProductClick","SEARCH_UNIT_ID","products","routeSearch","slots","searchResults","setSearchResults","useState","searchQuery","setSearchQuery","showResults","setShowResults","translations","useText","handleSearchInputResult","result","request","phrase","searchInputEvent","events","handleClose","handleOnSearchAll","getProductImage","defaultImageProps","_b","_a","_d","_c","Slot","Image","getProductName","getProductPrice","value","currency","_e","Price","productContainer","ProductItemComponent","Button","SearchBarResultsComponent"],"mappings":"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"}
+{"version":3,"file":"SearchBarResults.js","sources":["/@dropins/storefront-product-discovery/src/components/SearchBarResults/SearchBarResults.tsx","/@dropins/storefront-product-discovery/src/components/ProductItem/ProductItem.tsx","/@dropins/storefront-product-discovery/src/containers/SearchBarResults/SearchBarResults.tsx"],"sourcesContent":["/********************************************************************\n *  Copyright 2025 Adobe\n *  All Rights Reserved.\n *\n * NOTICE:  Adobe permits you to use, modify, and distribute this\n * file in accordance with the terms of the Adobe license agreement\n * accompanying it.\n *******************************************************************/\n\nimport { FunctionComponent, VNode } from 'preact';\nimport { HTMLAttributes, useEffect, useRef, useCallback } from 'preact/compat';\nimport { VComponent } from '@adobe-commerce/elsie/lib';\n\nimport '@/plp/components/SearchBarResults/SearchBarResults.css';\n\nexport interface SearchBarResultsProps extends HTMLAttributes<HTMLDivElement> {\n  productList?: VNode[];\n  viewAllButton?: VNode;\n  onClose?: () => void;\n}\n\nexport const SearchBarResults: FunctionComponent<SearchBarResultsProps> = ({\n  productList,\n  viewAllButton,\n  onClose,\n  ...props\n}) => {\n  const hasData = productList && productList.length > 0;\n  const popoverRef = useRef<HTMLDivElement>(null);\n\n  const handleClickOutside = useCallback(\n    (event: MouseEvent) => {\n      if (popoverRef.current && !popoverRef.current.contains(event.target as Node)) {\n        onClose?.();\n      }\n    },\n    [onClose],\n  );\n\n  const handleEscapeKey = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        onClose?.();\n      }\n    },\n    [onClose],\n  );\n\n  useEffect(() => {\n    if (!hasData) return;\n\n    document.addEventListener('mousedown', handleClickOutside);\n    document.addEventListener('keydown', handleEscapeKey);\n\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n      document.removeEventListener('keydown', handleEscapeKey);\n    };\n  }, [hasData, handleClickOutside, handleEscapeKey]);\n\n  if (!hasData) return null;\n\n  return (\n    <div className=\"product-discovery--search-bar-results\" {...props}>\n      <div\n        className=\"product-discovery--search-bar-results__popover\"\n        ref={popoverRef}\n        role=\"region\"\n        aria-label=\"Search results\"\n        aria-live=\"polite\"\n      >\n        <div className=\"product-discovery--search-bar-results__outer-container\" {...props}>\n          <div\n            className=\"product-discovery--search-bar-results__grid\"\n            role=\"list\"\n            aria-label={`${productList?.length || 0} search results`}\n          >\n            {productList?.map((item, index) => (\n              <div key={index} role=\"listitem\">\n                {item}\n              </div>\n            ))}\n          </div>\n          {viewAllButton && (\n            <div className=\"product-discovery--search-bar-results__view-all-wrapper\">\n              <VComponent className=\"product-discovery--search-bar-results__view-all-button\" node={viewAllButton} />\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n","/********************************************************************\n *  Copyright 2025 Adobe\n *  All Rights Reserved.\n *\n * NOTICE:  Adobe permits you to use, modify, and distribute this\n * file in accordance with the terms of the Adobe license agreement\n * accompanying it.\n ***************************************************************************/\n\nimport { FunctionComponent, VNode } from 'preact';\nimport { AnchorHTMLAttributes, useMemo } from 'preact/compat';\nimport { VComponent } from '@adobe-commerce/elsie/lib';\nimport { Product } from '@/plp/data/models/product';\n\nimport '@/plp/components/ProductItem/ProductItem.css';\nimport { SEARCH_UNIT_ID, searchProductClick } from '@/plp/utils/acdlEvents';\n\nexport interface ProductItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  productRouteSearch?: (product: Product) => string;\n  productItem: Product;\n  productImage?: VNode;\n  productName?: VNode;\n  productPrice?: VNode;\n}\n\nexport const ProductItem: FunctionComponent<ProductItemProps> = ({\n  productRouteSearch = (product: Product) => product?.url || '',\n  productItem,\n  productImage,\n  productName,\n  productPrice,\n  ...props\n}) => {\n  const productData = useMemo(() => {\n    const { name = '', sku = '', url = '' } = productItem || {};\n\n    // create tooltip text depending on available data\n    const tooltipText = [name, sku && `SKU: ${sku}`].filter(Boolean).join('\\n');\n\n    return { tooltipText, url };\n  }, [productItem]);\n\n  const handleProductClick = (product: Product): void => {\n    searchProductClick(product.sku, SEARCH_UNIT_ID);\n  };\n\n  return (\n    <a\n      className=\"product-discovery--product-item\"\n      href={productRouteSearch(productItem)}\n      rel=\"noopener noreferrer\"\n      title={productData.tooltipText}\n      onClick={() => handleProductClick(productItem)}\n      {...props}\n    >\n      <div className=\"product-discovery--product-item__image\">\n        <VComponent node={productImage} />\n      </div>\n      <div className=\"product-discovery--product-item__details\">\n        <VComponent node={productName} />\n        <VComponent node={productPrice} />\n      </div>\n    </a>\n  );\n};\n","/********************************************************************\n *  Copyright 2025 Adobe\n *  All Rights Reserved.\n *\n * NOTICE:  Adobe permits you to use, modify, and distribute this\n * file in accordance with the terms of the Adobe license agreement\n * accompanying it.\n *******************************************************************/\n\nimport { HTMLAttributes, useState, useEffect, useCallback, useMemo } from 'preact/compat';\nimport { Button, Image, ImageProps, Price } from '@adobe-commerce/elsie/components';\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport { Container, Slot, SlotProps } from '@adobe-commerce/elsie/lib';\nimport { events } from '@adobe-commerce/event-bus';\n\nimport { Product, SearchInputRequest, SearchInputResult } from '@/plp/data/models/product';\nimport { SearchVariables } from '@/plp/data/models/api';\nimport { SearchBarResults as SearchBarResultsComponent } from '@/plp/components/SearchBarResults';\nimport { ProductItem as ProductItemComponent } from '@/plp/components/ProductItem';\n\nexport interface SearchBarResultsProps extends HTMLAttributes<HTMLDivElement> {\n  products?: Product[];\n  productRouteSearch?: (product: Product) => string;\n  routeSearch?: (searchQuery: string) => void;\n  slots?: {\n    ProductImage?: SlotProps;\n    ProductName?: SlotProps;\n    ProductPrice?: SlotProps;\n  };\n}\n\nexport const SearchBarResults: Container<SearchBarResultsProps> = ({\n  products = [],\n  productRouteSearch = (product: Product) => product?.url || '',\n  routeSearch = () => {},\n  slots,\n}) => {\n  const [searchResults, setSearchResults] = useState<Product[]>(products);\n  const [searchQuery, setSearchQuery] = useState('');\n  const [showResults, setShowResults] = useState(products.length > 0);\n\n  const translations = useText({ viewAllButton: 'Search.SearchInput.viewAllButton' });\n\n  const handleSearchInputResult = useCallback(\n    ({ result = [], request = {} }: { result?: Product[]; request?: Pick<SearchVariables, 'phrase'> }) => {\n      const { phrase = '' } = request;\n      setSearchResults(result);\n      setSearchQuery(phrase);\n      setShowResults(result.length > 0 && phrase.length > 0);\n    },\n    [],\n  );\n\n  useEffect(() => {\n    const searchInputEvent = events.on('search-input/result', handleSearchInputResult);\n\n    return () => {\n      searchInputEvent?.off();\n    };\n  }, [handleSearchInputResult]);\n\n  const handleClose = useCallback(() => {\n    // emit \"search-input/result\" event with empty payloads to clear anything listening for that\n    events.emit('search-input/result', {\n      result: [],\n      request: { phrase: '' },\n    } as SearchInputResult);\n\n    setShowResults(false);\n  }, []);\n\n  const handleOnSearchAll = useCallback(() => {\n    // if a `routeSearch` cb function is provided, use it to handle any navigation needed\n    routeSearch && routeSearch(searchQuery);\n\n    // emit \"search/request\" event to trigger listeners of the search event\n    events.emit('search/request', { phrase: searchQuery } as SearchInputRequest);\n\n    handleClose();\n  }, [routeSearch, searchQuery, handleClose]);\n\n  const getProductImage = useCallback(\n    (productItem: Product) => {\n      const defaultImageProps: ImageProps = {\n        loading: 'lazy',\n        src: productItem.images?.[0]?.url || '',\n        alt: productItem.images?.[0]?.label || '',\n        width: '165',\n        height: '165',\n      };\n      return (\n        <Slot name=\"ProductImage\" slot={slots?.ProductImage} context={{ productItem, defaultImageProps }}>\n          <Image {...defaultImageProps} aria-label={productItem.sku} />\n        </Slot>\n      );\n    },\n    [slots?.ProductImage],\n  );\n\n  const getProductName = useCallback(\n    (productItem: Product) => (\n      <Slot name=\"ProductName\" slot={slots?.ProductName} context={{ productItem }}>\n        {productItem?.name || ''}\n      </Slot>\n    ),\n    [slots?.ProductName],\n  );\n\n  const getProductPrice = useCallback(\n    (productItem: Product) => {\n      const { value, currency: returnedCurrency = 'USD' } =\n        productItem?.price?.final?.amount || productItem?.priceRange?.minimum?.final?.amount || {};\n\n      // validate and fallback to USD if returnedCurrency is not supported\n      const currency =\n        Intl.supportedValuesOf('currency').indexOf(returnedCurrency || '') === -1 ? 'USD' : returnedCurrency;\n\n      return (\n        <Slot name=\"ProductPrice\" slot={slots?.ProductPrice} context={{ productItem }}>\n          <Price amount={typeof value === 'number' ? value : undefined} currency={currency} />\n        </Slot>\n      );\n    },\n    [slots?.ProductPrice],\n  );\n\n  const productContainer = useCallback(\n    (productItem: Product) => (\n      <ProductItemComponent\n        productRouteSearch={productRouteSearch}\n        productItem={productItem}\n        productImage={getProductImage(productItem)}\n        productName={getProductName(productItem)}\n        productPrice={getProductPrice(productItem)}\n      />\n    ),\n    [productRouteSearch, getProductImage, getProductName, getProductPrice],\n  );\n\n  const viewAllButton = useMemo(\n    () => (\n      <Button variant=\"tertiary\" onClick={handleOnSearchAll}>\n        {translations.viewAllButton}\n      </Button>\n    ),\n    [translations.viewAllButton, handleOnSearchAll],\n  );\n\n  const productList = useMemo(\n    () => searchResults?.map((product) => productContainer(product)),\n    [searchResults, productContainer],\n  );\n\n  if (!searchResults.length || !showResults) {\n    return null;\n  }\n\n  return <SearchBarResultsComponent productList={productList} viewAllButton={viewAllButton} onClose={handleClose} />;\n};\n"],"names":["SearchBarResults","productList","viewAllButton","onClose","props","hasData","popoverRef","useRef","handleClickOutside","useCallback","event","handleEscapeKey","useEffect","jsx","jsxs","item","index","VComponent","ProductItem","productRouteSearch","product","productItem","productImage","productName","productPrice","productData","useMemo","name","sku","url","handleProductClick","searchProductClick","SEARCH_UNIT_ID","products","routeSearch","slots","searchResults","setSearchResults","useState","searchQuery","setSearchQuery","showResults","setShowResults","translations","useText","handleSearchInputResult","result","request","phrase","searchInputEvent","events","handleClose","handleOnSearchAll","getProductImage","defaultImageProps","_b","_a","_d","_c","Slot","Image","getProductName","getProductPrice","value","returnedCurrency","_e","currency","Price","productContainer","ProductItemComponent","Button","SearchBarResultsComponent"],"mappings":"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"}

package/fragments.d.ts

@@ -0,0 +1 @@
+export * from './api/fragments'

package/fragments.js

@@ -0,0 +1,112 @@
+/*! Copyright 2025 Adobe
+All Rights Reserved. */
+const e=`
+  fragment Facet on Aggregation {
+    title
+    attribute
+    buckets {
+      title
+      __typename
+      ... on CategoryView {
+        name
+        count
+        path
+      }
+      ... on ScalarBucket {
+        count
+      }
+      ... on RangeBucket {
+        from
+        to
+        count
+      }
+      ... on StatsBucket {
+        min
+        max
+      }
+    }
+  }
+`,t=`
+  fragment ProductView on ProductSearchItem {
+    productView {
+      __typename
+      sku
+      name
+      inStock
+      url
+      urlKey
+      images {
+        label
+        url
+        roles
+      }
+      ... on ComplexProductView {
+        priceRange {
+          maximum {
+            final {
+              amount {
+                value
+                currency
+              }
+            }
+            regular {
+              amount {
+                value
+                currency
+              }
+            }
+          }
+          minimum {
+            final {
+              amount {
+                value
+                currency
+              }
+            }
+            regular {
+              amount {
+                value
+                currency
+              }
+            }
+          }
+        }
+        options {
+          id
+          title
+          values {
+            title
+            ... on ProductViewOptionValueSwatch {
+              id
+              inStock
+              type
+              value
+            }
+          }
+        }
+      }
+      ... on SimpleProductView {
+        price {
+          final {
+            amount {
+              value
+              currency
+            }
+          }
+          regular {
+            amount {
+              value
+              currency
+            }
+          }
+        }
+      }
+    }
+    highlights {
+      attribute
+      value
+      matched_words
+    }
+  }
+`;export{e as Facet,t as ProductView};
+//# sourceMappingURL=fragments.js.map

package/fragments.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fragments.js","sources":["/@dropins/storefront-product-discovery/src/api/graphql/fragments.graphql.ts"],"sourcesContent":["/********************************************************************\n *  Copyright 2025 Adobe\n *  All Rights Reserved.\n *\n * NOTICE:  Adobe permits you to use, modify, and distribute this\n * file in accordance with the terms of the Adobe license agreement\n * accompanying it.\n *******************************************************************/\n\nconst Facet = /* GraphQL */ `\n  fragment Facet on Aggregation {\n    title\n    attribute\n    buckets {\n      title\n      __typename\n      ... on CategoryView {\n        name\n        count\n        path\n      }\n      ... on ScalarBucket {\n        count\n      }\n      ... on RangeBucket {\n        from\n        to\n        count\n      }\n      ... on StatsBucket {\n        min\n        max\n      }\n    }\n  }\n`;\n\nconst ProductView = /* GraphQL */ `\n  fragment ProductView on ProductSearchItem {\n    productView {\n      __typename\n      sku\n      name\n      inStock\n      url\n      urlKey\n      images {\n        label\n        url\n        roles\n      }\n      ... on ComplexProductView {\n        priceRange {\n          maximum {\n            final {\n              amount {\n                value\n                currency\n              }\n            }\n            regular {\n              amount {\n                value\n                currency\n              }\n            }\n          }\n          minimum {\n            final {\n              amount {\n                value\n                currency\n              }\n            }\n            regular {\n              amount {\n                value\n                currency\n              }\n            }\n          }\n        }\n        options {\n          id\n          title\n          values {\n            title\n            ... on ProductViewOptionValueSwatch {\n              id\n              inStock\n              type\n              value\n            }\n          }\n        }\n      }\n      ... on SimpleProductView {\n        price {\n          final {\n            amount {\n              value\n              currency\n            }\n          }\n          regular {\n            amount {\n              value\n              currency\n            }\n          }\n        }\n      }\n    }\n    highlights {\n      attribute\n      value\n      matched_words\n    }\n  }\n`;\n\nexport { Facet, ProductView };\n"],"names":["Facet","ProductView"],"mappings":"AASA,MAAMA,EAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA4BtBC,EAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/package.json

@@ -1 +1 @@
-{"name": "@dropins/storefront-product-discovery", "version": "1.0.0", "@dropins/tools": "^1.3.0-beta6", "license": "SEE LICENSE IN LICENSE.md"}
+{"name": "@dropins/storefront-product-discovery", "version": "1.0.2-alpha5", "@dropins/tools": "^1.4.0-beta2", "license": "SEE LICENSE IN LICENSE.md"}

package/render.js

@@ -1,9 +1,9 @@
 /*! Copyright 2025 Adobe
 All Rights Reserved. */
-(function(o,t){try{if(typeof document<"u"){const r=document.createElement("style"),d=t.styleId;for(const e in t.attributes)r.setAttribute(e,t.attributes[e]);r.setAttribute("data-dropin",d),r.appendChild(document.createTextNode(o));const i=document.querySelector('style[data-dropin="sdk"]');if(i)i.after(r);else{const e=document.querySelector('link[rel="stylesheet"], style');e?e.before(r):document.head.append(r)}}}catch(r){console.error("dropin-styles (injectCodeFunction)",r)}})(`.dropin-product-item-card__skeleton{gap:var(--spacing-small)}.dropin-product-item-card__skeleton__image{height:375px}.dropin-product-item-card__skeleton__content{grid-column:1/-1}.dropin-product-item-card{display:grid;position:relative;grid-auto-flow:row;background:var(--color-neutral-50);border:1px solid var(--color-neutral-400);color:var(--color-neutral-800);font:var(--type-body-1-default-font);letter-spacing:var(--type-body-1-default-letter-spacing);margin:var(--spacing-small);width:300px}.dropin-product-item-card__image-container{overflow:hidden;width:100%;height:auto}.dropin-product-item-card__image img{width:100%;max-height:375px}.dropin-product-item-card__content{display:grid;grid-template-columns:1fr 1fr;padding:var(--spacing-small);gap:var(--spacing-xxsmall);align-items:center;color:var(--color-neutral-800)}.dropin-product-item-card__title,.dropin-product-item-card__sku,.dropin-product-item-card__price,.dropin-product-item-card__swatches,.dropin-product-item-card__action{grid-column:1/3}.dropin-product-item-card__title{font:var(--type-body-1-strong-font);letter-spacing:var(--type-body-1-strong-letter-spacing)}.dropin-product-item-card__sku,.dropin-product-item-card__price{font:var(--type-body-1-default-font);letter-spacing:var(--type-body-1-default-letter-spacing)}.dropin-product-item-card__swatches{margin-top:var(--spacing-xsmall)}.dropin-product-item-card__action{margin-top:var(--spacing-xsmall);width:100%}
-.product-discovery-product-list,.product-discovery-product-list__container{display:flex;flex-direction:column;width:100%}.product-discovery-product-list__grid{display:grid;grid-template-columns:1fr 1fr;margin-top:var(--spacing-small)}.product-discovery-product-list__grid .dropin-product-item-card{text-align:left;border:1px solid transparent;width:200px}.product-discovery-product-list__grid .dropin-product-item-card:hover{border:1px solid var(--color-neutral-400);box-shadow:0 0 var(--spacing-xsmall) 0 #a9a9a9;padding:none}.product-discovery-product-list__grid .dropin-product-item-card a:hover{text-decoration:none;color:var(--color-neutral-800)}.product-discovery-product-list__header{display:flex;flex-direction:row-reverse;width:100%}.product-discovery-product-list__picker{width:15.625rem;display:inline-block}.product-discovery-product-item__image{min-height:250px}@media only screen and (min-width: 768px){.product-discovery-product-list__grid{grid-template-columns:repeat(3,1fr)}}@media only screen and (min-width: 1366px){.product-discovery-product-list__grid{grid-template-columns:repeat(4,1fr)}}.product-discovery-search-alert-message__wrapper{display:flex;flex-direction:column;justify-content:center;width:100%;min-height:300px}.product-discovery-search-alert-message__content{display:flex;justify-content:center}.product-discovery-facet__bucket .dropin-price-range .dropin-price--small.dropin-price--bold{font:var(--type-body-2-default-font)}.product-discovery-facet__bucket .dropin-radio-button__label:before{margin-right:var(--spacing-xsmall)}.product-discovery-facet-list{display:flex;flex-direction:column;width:100%}.product-discovery-facet-list__selected-filters{display:flex;flex-direction:row;flex-wrap:wrap;row-gap:var(--spacing-xxsmall);padding:0 0 var(--spacing-xxsmall) 0}.product-discovery-facet-list__selected-filters button{padding:0 var(--spacing-xxsmall);margin:0 var(--spacing-xxsmall);border-radius:var(--shape-border-radius-2)}.product-discovery-facet-list__selected-filters .dropin-price-range .dropin-price--small.dropin-price--bold{font:var(--type-button-2-font)}.product-discovery-facet-list__facet-options{text-align:left}.product-discovery-facet-list__facet-options button{padding:0}.product-discovery-facet-list__facet-options .dropin-radio-button{padding:var(--spacing-xxsmall) 0}.product-discovery-facet-list__facet-options--hidden{display:none}.product-discovery-facet-list__show-filters-button{display:flex;margin:0 0 var(--spacing-xsmall) 0}.product-discovery-facet-list .dropin-divider{margin:var(--spacing-xsmall) 0 var(--spacing-xsmall) 0}@media only screen and (min-width: 768px){.product-discovery-facet-list{min-width:13.12rem}.product-discovery-facet-list__facet-options{display:flex;flex-direction:column}.product-discovery-facet-list__show-filters-button{display:none}}
+(function(o,t){try{if(typeof document<"u"){const r=document.createElement("style"),d=t.styleId;for(const e in t.attributes)r.setAttribute(e,t.attributes[e]);r.setAttribute("data-dropin",d),r.appendChild(document.createTextNode(o));const i=document.querySelector('style[data-dropin="sdk"]');if(i)i.after(r);else{const e=document.querySelector('link[rel="stylesheet"], style');e?e.before(r):document.head.append(r)}}}catch(r){console.error("dropin-styles (injectCodeFunction)",r)}})(`.product-discovery--search-bar-input__container{display:flex;align-items:center;width:100%}.product-discovery--search-bar-input__form{display:flex;align-items:center}
+.product-discovery-results-info{display:none}.product-discovery-results-info__search-phrase--upercase{text-transform:capitalize}@media only screen and (min-width: 768px){.product-discovery-results-info{display:flex;flex-direction:row;gap:var(--spacing-xsmall);width:100%;padding:var(--spacing-xsmall);text-align:center}}
 .product-discovery--search-bar-results{position:absolute;top:100%;left:0;right:0;z-index:1000;display:flex;align-items:flex-start;justify-content:flex-end;pointer-events:none}.product-discovery--search-bar-results__popover{position:relative;background:var(--color-neutral-50, #fff);box-shadow:0 10px 25px -3px #0000001a,0 4px 6px -2px #0000000d,0 0 0 1px #0000000d;width:100%;overflow:hidden;z-index:1001;animation:popoverSlideIn .2s ease-out;pointer-events:auto;display:flex;flex-direction:column;height:100%;min-height:0}.product-discovery--search-bar-results__outer-container{display:flex;flex-direction:column;padding:var(--spacing-small, 1rem)}@keyframes popoverSlideIn{0%{opacity:0;transform:translateY(-10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.product-discovery--search-bar-results__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-small, 1rem);overflow-y:auto;flex:1;min-height:0}.product-discovery--search-bar-results__grid>*{min-width:0;overflow:hidden}.product-discovery--search-bar-results__view-all-wrapper{flex-shrink:0;border-top:1px solid var(--color-neutral-200, #e5e5e5);background:var(--color-neutral-300)}.product-discovery--search-bar-results__view-all-button{display:flex;justify-content:center;width:100%}.product-discovery--search-bar-results__grid::-webkit-scrollbar{width:.5rem}.product-discovery--search-bar-results__grid::-webkit-scrollbar-track{background:var(--color-neutral-100, #f5f5f5);border-radius:.25rem}.product-discovery--search-bar-results__grid::-webkit-scrollbar-thumb{background:var(--color-neutral-400, #d4d4d4);border-radius:.25rem}.product-discovery--search-bar-results__grid::-webkit-scrollbar-thumb:hover{background:var(--color-neutral-500, #a3a3a3)}@media only screen and (min-width: 48rem){.product-discovery--search-bar-results{padding-top:.25rem}.product-discovery--search-bar-results__grid{gap:var(--spacing-medium, 1.5rem);padding:var(--spacing-medium, 1.5rem)}}.product-discovery--product-item{display:flex;flex-flow:column nowrap;gap:var(--spacing-small);width:auto;align-items:center;cursor:pointer;text-decoration:none;color:inherit;font-weight:var(--font-weight-regular, 600)}.product-discovery--product-item:hover,.product-discovery--product-item:focus{box-shadow:0 2px 8px #0000001a;text-decoration:none}.product-discovery--product-item__image .dropin-image{width:10rem;height:10rem;max-width:10rem;max-height:10rem;object-fit:cover;border-radius:var(--shape-border-radius-2, 4px)}.product-discovery--product-item__details{display:flex;flex-flow:column nowrap;justify-content:space-between;width:100%}.product-discovery--product-item__details [data-slot=ProductPrice]{text-align:start}
-.product-discovery--search-bar-input__container{display:flex;align-items:center;width:100%}.product-discovery--search-bar-input__form{display:flex;align-items:center}
-.product-discovery-results-info{display:none}.product-discovery-results-info__search-phrase--upercase{text-transform:capitalize}@media only screen and (min-width: 768px){.product-discovery-results-info{display:flex;flex-direction:row;gap:var(--spacing-xsmall);width:100%;padding:var(--spacing-xsmall);text-align:center}}`,{styleId:"storefront-product-discovery"});
+.product-discovery-product-list,.product-discovery-product-list__container{display:flex;flex-direction:column;width:100%}.product-discovery-product-list__grid{display:grid;grid-template-columns:1fr 1fr;margin-top:var(--spacing-small)}.product-discovery-product-list__grid .dropin-product-item-card{text-align:left;border:1px solid transparent;width:200px}.product-discovery-product-list__grid .dropin-product-item-card:hover{border:1px solid var(--color-neutral-400);box-shadow:0 0 var(--spacing-xsmall) 0 #a9a9a9;padding:none}.product-discovery-product-list__grid .dropin-product-item-card a:hover{text-decoration:none;color:var(--color-neutral-800)}.product-discovery-product-list__header{display:flex;flex-direction:row-reverse;width:100%}.product-discovery-product-list__picker{width:15.625rem;display:inline-block}.product-discovery-product-item__image{min-height:250px}@media only screen and (min-width: 768px){.product-discovery-product-list__grid{grid-template-columns:repeat(3,1fr)}}@media only screen and (min-width: 1366px){.product-discovery-product-list__grid{grid-template-columns:repeat(4,1fr)}}.product-discovery-search-alert-message__wrapper{display:flex;flex-direction:column;justify-content:center;width:100%;min-height:300px}.product-discovery-search-alert-message__content{display:flex;justify-content:center}.product-discovery-facet__bucket .dropin-price-range .dropin-price--small.dropin-price--bold{font:var(--type-body-2-default-font)}.product-discovery-facet__bucket .dropin-radio-button__label:before{margin-right:var(--spacing-xsmall)}.product-discovery-facet-list{display:flex;flex-direction:column;width:100%}.product-discovery-facet-list__selected-filters{display:flex;flex-direction:row;flex-wrap:wrap;row-gap:var(--spacing-xxsmall);padding:0 0 var(--spacing-xxsmall) 0}.product-discovery-facet-list__selected-filters button{padding:0 var(--spacing-xxsmall);margin:0 var(--spacing-xxsmall);border-radius:var(--shape-border-radius-2)}.product-discovery-facet-list__selected-filters .dropin-price-range .dropin-price--small.dropin-price--bold{font:var(--type-button-2-font)}.product-discovery-facet-list__facet-options{text-align:left}.product-discovery-facet-list__facet-options button{padding:0}.product-discovery-facet-list__facet-options .dropin-radio-button{padding:var(--spacing-xxsmall) 0}.product-discovery-facet-list__facet-options--hidden{display:none}.product-discovery-facet-list__show-filters-button{display:flex;margin:0 0 var(--spacing-xsmall) 0}.product-discovery-facet-list .dropin-divider{margin:var(--spacing-xsmall) 0 var(--spacing-xsmall) 0}@media only screen and (min-width: 768px){.product-discovery-facet-list{min-width:13.12rem}.product-discovery-facet-list__facet-options{display:flex;flex-direction:column}.product-discovery-facet-list__show-filters-button{display:none}}
+.dropin-product-item-card__skeleton{gap:var(--spacing-small)}.dropin-product-item-card__skeleton__image{height:375px}.dropin-product-item-card__skeleton__content{grid-column:1/-1}.dropin-product-item-card{display:grid;position:relative;grid-auto-flow:row;background:var(--color-neutral-50);border:1px solid var(--color-neutral-400);color:var(--color-neutral-800);font:var(--type-body-1-default-font);letter-spacing:var(--type-body-1-default-letter-spacing);margin:var(--spacing-small);width:300px}.dropin-product-item-card__image-container{overflow:hidden;width:100%;height:auto}.dropin-product-item-card__image img{width:100%;max-height:375px}.dropin-product-item-card__content{display:grid;grid-template-columns:1fr 1fr;padding:var(--spacing-small);gap:var(--spacing-xxsmall);align-items:center;color:var(--color-neutral-800)}.dropin-product-item-card__title,.dropin-product-item-card__sku,.dropin-product-item-card__price,.dropin-product-item-card__swatches,.dropin-product-item-card__action{grid-column:1/3}.dropin-product-item-card__title{font:var(--type-body-1-strong-font);letter-spacing:var(--type-body-1-strong-letter-spacing)}.dropin-product-item-card__sku,.dropin-product-item-card__price{font:var(--type-body-1-default-font);letter-spacing:var(--type-body-1-default-letter-spacing)}.dropin-product-item-card__swatches{margin-top:var(--spacing-xsmall)}.dropin-product-item-card__action{margin-top:var(--spacing-xsmall);width:100%}`,{styleId:"storefront-product-discovery"});
 import{jsx as o}from"@dropins/tools/preact-jsx-runtime.js";import{Render as c}from"@dropins/tools/lib.js";import{useState as i,useEffect as a}from"@dropins/tools/preact-hooks.js";import{UIProvider as l}from"@dropins/tools/components.js";import{events as u}from"@dropins/tools/event-bus.js";const h={PLP:{Warning:{minQueryLength:"Your search term {SEARCH_PHRASE} has not reached the minimum of {{minQueryLength}} characters.",noResults:"Your search returned no results.",searchError:"An error occurred while searching."},SortDropdown:{title:"Sort by",option:"Sort by: {{selectedOption}}",relevanceLabel:"Most Relevant",positionLabel:"Position",sortAttributeASC:"{{label}}: Low to High",sortAttributeDESC:"{{label}}: High to Low",sortASC:"Price: Low to High",sortDESC:"Price: High to Low",productName:"Product Name",productInStock:"In Stock",productLowStock:"Low Stock"}},Facet:{showMore:"Show more",showLess:"Show less",clearAll:"Clear all"},ResultsInfo:{resultsFor:"Results for",products:"products"},SearchInput:{placeholder:"Search",viewAllButton:"View All"}},S={Search:h},m={default:S},d=({children:r})=>{const[t,n]=i("en_US");return a(()=>{const e=u.on("locale",s=>{n(s)},{eager:!0});return()=>{e==null||e.off()}},[]),o(l,{lang:t,langDefinitions:m,children:r})},A=new c(o(d,{}));export{A as render};
 //# sourceMappingURL=render.js.map

package/render.js.map

@@ -1 +1 @@
-{"version":3,"file":"render.js","sources":["/@dropins/storefront-product-discovery/src/render/Provider.tsx","/@dropins/storefront-product-discovery/src/render/render.tsx"],"sourcesContent":["/********************************************************************\n *  Copyright 2025 Adobe\n *  All Rights Reserved.\n *\n * NOTICE:  Adobe permits you to use, modify, and distribute this\n * file in accordance with the terms of the Adobe license agreement\n * accompanying it.\n *******************************************************************/\n\nimport { FunctionComponent } from 'preact';\nimport { useState, useEffect } from 'preact/hooks';\nimport { UIProvider } from '@adobe-commerce/elsie/components';\nimport { Lang } from '@adobe-commerce/elsie/i18n';\nimport { events } from '@adobe-commerce/event-bus';\n\nimport en_US from '../i18n/en_US.json';\n\n// Langs\nconst langDefinitions = {\n  default: en_US,\n};\n\ninterface CartProviderProps {\n  children?: any;\n}\n\nexport const Provider: FunctionComponent<CartProviderProps> = ({ children }) => {\n  const [lang, setLang] = useState<Lang>('en_US');\n\n  //   Events\n  useEffect(() => {\n    const localeEvent = events.on(\n      'locale',\n      (locale: string) => {\n        setLang(locale as Lang);\n      },\n      { eager: true },\n    );\n    return () => {\n      localeEvent?.off();\n    };\n  }, []);\n\n  return (\n    <UIProvider lang={lang} langDefinitions={langDefinitions}>\n      {children}\n    </UIProvider>\n  );\n};\n","/********************************************************************\n *  Copyright 2025 Adobe\n *  All Rights Reserved.\n *\n * NOTICE:  Adobe permits you to use, modify, and distribute this\n * file in accordance with the terms of the Adobe license agreement\n * accompanying it.\n *******************************************************************/\n\nimport { Render } from '@adobe-commerce/elsie/lib';\nimport { Provider } from './Provider';\n\nexport const render = new Render(<Provider />);\n"],"names":["langDefinitions","en_US","Provider","children","lang","setLang","useState","useEffect","localeEvent","events","locale","jsx","UIProvider","render","Render"],"mappings":"kjCAkBMA,EAAkB,CACtB,QAASC,CACX,EAMaC,EAAiD,CAAC,CAAE,SAAAC,KAAe,CAC9E,KAAM,CAACC,EAAMC,CAAO,EAAIC,EAAe,OAAO,EAG9C,OAAAC,EAAU,IAAM,CACd,MAAMC,EAAcC,EAAO,GACzB,SACCC,GAAmB,CAClBL,EAAQK,CAAc,CAAA,EAExB,CAAE,MAAO,EAAA,CAAK,EAEhB,MAAO,IAAM,CACXF,GAAA,MAAAA,EAAa,KAAI,CACnB,EACC,EAAE,EAGHG,EAACC,EAAA,CAAW,KAAAR,EAAY,gBAAAJ,EACrB,SAAAG,CAAA,CACH,CAEJ,ECpCaU,EAAS,IAAIC,EAAOH,EAACT,IAAS,CAAE"}
+{"version":3,"file":"render.js","sources":["/@dropins/storefront-product-discovery/src/render/Provider.tsx","/@dropins/storefront-product-discovery/src/render/render.tsx"],"sourcesContent":["/********************************************************************\n *  Copyright 2025 Adobe\n *  All Rights Reserved.\n *\n * NOTICE:  Adobe permits you to use, modify, and distribute this\n * file in accordance with the terms of the Adobe license agreement\n * accompanying it.\n *******************************************************************/\n\nimport { FunctionComponent } from 'preact';\nimport { useState, useEffect } from 'preact/hooks';\nimport { UIProvider } from '@adobe-commerce/elsie/components';\nimport { Lang } from '@adobe-commerce/elsie/i18n';\nimport { events } from '@adobe-commerce/event-bus';\n\nimport en_US from '../i18n/en_US.json';\n\n// Langs\nconst langDefinitions = {\n  default: en_US,\n};\n\ninterface CartProviderProps {\n  children?: any;\n}\n\nexport const Provider: FunctionComponent<CartProviderProps> = ({ children }) => {\n  const [lang, setLang] = useState<Lang>('en_US');\n\n  //   Events\n  useEffect(() => {\n    const localeEvent = events.on(\n      'locale',\n      (locale: string) => {\n        setLang(locale as Lang);\n      },\n      { eager: true },\n    );\n    return () => {\n      localeEvent?.off();\n    };\n  }, []);\n\n  return (\n    <UIProvider lang={lang} langDefinitions={langDefinitions}>\n      {children}\n    </UIProvider>\n  );\n};\n","/********************************************************************\n *  Copyright 2025 Adobe\n *  All Rights Reserved.\n *\n * NOTICE:  Adobe permits you to use, modify, and distribute this\n * file in accordance with the terms of the Adobe license agreement\n * accompanying it.\n *******************************************************************/\n\nimport { Render } from '@adobe-commerce/elsie/lib';\nimport { Provider } from './Provider';\n\nexport const render = new Render(<Provider />);\n"],"names":["langDefinitions","en_US","Provider","children","lang","setLang","useState","useEffect","localeEvent","events","locale","jsx","UIProvider","render","Render"],"mappings":"kjCAkBMA,EAAkB,CACtB,QAASC,CACX,EAMaC,EAAiD,CAAC,CAAE,SAAAC,KAAe,CAC9E,KAAM,CAACC,EAAMC,CAAO,EAAIC,EAAe,OAAO,EAG9C,OAAAC,EAAU,IAAM,CACd,MAAMC,EAAcC,EAAO,GACzB,SACCC,GAAmB,CAClBL,EAAQK,CAAc,CACxB,EACA,CAAE,MAAO,EAAA,CAAK,EAEhB,MAAO,IAAM,CACXF,GAAA,MAAAA,EAAa,KACf,CACF,EAAG,CAAA,CAAE,EAGHG,EAACC,EAAA,CAAW,KAAAR,EAAY,gBAAAJ,EACrB,SAAAG,CAAA,CACH,CAEJ,ECpCaU,EAAS,IAAIC,EAAOH,EAACT,IAAS,CAAE"}