$0 USD
\"};};const createLayoutDependency=(props,variants)=>variants.join(\"-\")+props.layoutDependency;const Component=/*#__PURE__*/ React.forwardRef(function(props,ref){const{activeLocale}=useLocaleInfo();const{style,className,layoutId,variant,U2bckk9Ci,...restProps}=getProps(props);const{baseVariant,classNames,gestureVariant,setGestureState,setVariant,transition,variants}=useVariantState({cycleOrder,defaultVariant:\"q765oO3yC\",transitions,variant,variantClassNames});const layoutDependency=createLayoutDependency(props,variants);const defaultLayoutId=React.useId();return /*#__PURE__*/ _jsx(LayoutGroup,{id:layoutId!==null&&layoutId!==void 0?layoutId:defaultLayoutId,children:/*#__PURE__*/ _jsx(motion.div,{initial:variant,animate:variants,onHoverStart:()=>setGestureState({isHovered:true}),onHoverEnd:()=>setGestureState({isHovered:false}),onTapStart:()=>setGestureState({isPressed:true}),onTap:()=>setGestureState({isPressed:false}),onTapCancel:()=>setGestureState({isPressed:false}),className:cx(\"framer-PixXK\",sharedStyle.className,classNames),style:{display:\"contents\"},children:/*#__PURE__*/ _jsx(Transition,{value:transition,children:/*#__PURE__*/ _jsx(motion.div,{...restProps,className:cx(\"framer-kixgj4\",className),\"data-framer-name\":\"Variant 1\",layoutDependency:layoutDependency,layoutId:\"q765oO3yC\",ref:ref,style:{...style},children:/*#__PURE__*/ _jsx(RichText,{__fromCanvasComponent:true,children:U2bckk9Ci,className:\"framer-1iq4zis\",layoutDependency:layoutDependency,layoutId:\"ZBWxU4W6n\",style:{\"--framer-link-text-color\":\"rgb(0, 153, 255)\",\"--framer-link-text-decoration\":\"underline\",\"--framer-paragraph-spacing\":\"0px\"},stylesPresetsClassNames:{p:\"framer-styles-preset-j385k6\"},verticalAlignment:\"top\",withExternalLayout:true})})})})});});const css=['.framer-PixXK [data-border=\"true\"]::after { content: \"\"; border-width: var(--border-top-width, 0) var(--border-right-width, 0) var(--border-bottom-width, 0) var(--border-left-width, 0); border-color: var(--border-color, none); border-style: var(--border-style, none); width: 100%; height: 100%; position: absolute; box-sizing: border-box; left: 0; top: 0; border-radius: inherit; pointer-events: none; }',\"@supports (aspect-ratio: 1) { body { --framer-aspect-ratio-supported: auto; } }\",\".framer-PixXK .framer-1n4dbv2 { display: block; }\",\".framer-PixXK .framer-kixgj4 { align-content: center; align-items: center; display: flex; flex-direction: row; flex-wrap: nowrap; gap: 0px; height: min-content; justify-content: center; overflow: visible; padding: 0px 0px 0px 0px; position: relative; width: min-content; }\",\".framer-PixXK .framer-1iq4zis { flex: none; height: auto; position: relative; white-space: pre; width: auto; }\",\"@supports (background: -webkit-named-image(i)) and (not (font-palette:dark)) { .framer-PixXK .framer-kixgj4 { gap: 0px; } .framer-PixXK .framer-kixgj4 > * { margin: 0px; margin-left: calc(0px / 2); margin-right: calc(0px / 2); } .framer-PixXK .framer-kixgj4 > :first-child { margin-left: 0px; } .framer-PixXK .framer-kixgj4 > :last-child { margin-right: 0px; } }\",...sharedStyle.css];/**\n * This is a generated Framer component.\n * @framerIntrinsicHeight 16\n * @framerIntrinsicWidth 55.5\n * @framerCanvasComponentVariantDetails {\"propertyName\":\"variant\",\"data\":{\"default\":{\"layout\":[\"auto\",\"auto\"]}}}\n * @framerVariables {\"U2bckk9Ci\":\"text\"}\n */ const FrameratkMxVAKb=withCSS(Component,css,\"framer-PixXK\");export default FrameratkMxVAKb;FrameratkMxVAKb.displayName=\"shopX / cartSubtotal\";FrameratkMxVAKb.defaultProps={height:16,width:55.5};addPropertyControls(FrameratkMxVAKb,{U2bckk9Ci:{defaultValue:\"$0 USD
\",title:\"text\",type:ControlType.RichText}});addFonts(FrameratkMxVAKb,[...sharedStyle.fonts]);\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"FrameratkMxVAKb\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerCanvasComponentVariantDetails\":\"{\\\"propertyName\\\":\\\"variant\\\",\\\"data\\\":{\\\"default\\\":{\\\"layout\\\":[\\\"auto\\\",\\\"auto\\\"]}}}\",\"framerVariables\":\"{\\\"U2bckk9Ci\\\":\\\"text\\\"}\",\"framerIntrinsicHeight\":\"16\",\"framerIntrinsicWidth\":\"55.5\"}},\"Props\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./atkMxVAKb.map","/*\n * Framer Commerce\n * Confidential and Proprietary - All Rights Reserved\n * Unauthorized use, reproduction, distribution, or disclosure of this\n * source code or any related information is strictly prohibited.\n *\n * This software is the exclusive property of Framer Commerce (\"Company\").\n * It is considered highly confidential and proprietary information.\n *\n * Any use, copying, modification, distribution, or sharing of this software,\n * in whole or in part, without the express written permission of the Company\n * is strictly prohibited and may result in legal action.\n *\n * DISCLAIMER: This software does not provide any express or\n * implied warranties, including, but not limited to, the implied warranties\n * of merchantability and fitness for a particular purpose. In no event shall\n * Framer Commerce be liable for any direct, indirect, incidental, special,\n * exemplary, or consequential damages (including, but not limited to, procurement\n * of substitute goods or services; loss of use, data, or profits; or business\n * interruption) however caused and on any theory of liability, whether in\n * contract, strict liability, or tort (including negligence or otherwise)\n * arising in any way out of the use of this software, even if advised of\n * the possibility of such damage.\n *\n * Any unauthorized possession, use, copying, distribution, or dissemination\n * of this software will be considered a breach of confidentiality and may\n * result in legal action.\n *\n * For inquiries, contact:\n * Framer Commerce\n * Email: hello@framercommerce.com\n *\n * © 2025 Butter Supply Inc. All Rights Reserved.\n */import{jsx as _jsx}from\"react/jsx-runtime\";import{useEffect,useMemo,useState}from\"react\";import ShopXCartSubtotal from\"https://framer.com/m/shopX-cartSubtotal-pv7y.js\";import{addPropertyControls,ControlType}from\"framer\";import{get}from\"lodash-es\";import{knownCurrenciesWithCodeAsSymbol}from\"https://framerusercontent.com/modules/k9s4cejdkBGDjmzudhzM/18cq93eooqM4YmdbL7E2/currencyMaps.js\";import{getLocaleFromCountry}from\"https://framerusercontent.com/modules/vC6fzbfO83MgBPIhn5zl/N2GIWD1ik8HES3ASBGeD/locales.js\";import{RenderTarget}from\"framer\";// Helper function to check if a currency's symbol is the same as its code\nconst isCurrencySymbolSameAsCode=currencyCode=>{// For some currencies like CHF, the browser might use the code as the symbol\nif(!currencyCode)return false;if(knownCurrenciesWithCodeAsSymbol.includes(currencyCode)){return true;}try{const formatted=new Intl.NumberFormat(undefined,{style:\"currency\",currency:currencyCode,currencyDisplay:\"narrowSymbol\"}).format(0);// Remove digits, decimal points, and common formatting characters\nconst cleanFormatted=formatted.replace(/[0-9.,\\s]/g,\"\");// Check if what remains is the currency code\nreturn cleanFormatted===currencyCode;}catch(e){return false;}};/**\n * @framerDisableUnlink\n */export default function FC_CartSubtotal(props){const{format:{showCurrency,showSymbol,showDecimals,currencyCode:previewCurrencyCode}={}}=props;const[subtotal,setSubtotal]=useState(0);const[cart,setCart]=useState(null);const[selectedCurrency,setSelectedCurrency]=useState(\"\");const[selectedCountryCode,setSelectedCountryCode]=useState(\"\");const[selectedCountry,setSelectedCountry]=useState(\"\");const[currencyConfig,setCurrencyConfig]=useState(()=>{// Initialize with window values if available\nif(typeof window!==\"undefined\"){const position=window?.__FcCurrencyConfigs?.currencyPosition||\"Before\";const initialConfig={position:position,showCode:position!==\"Hide\",symbol:window?.__FcCurrencyConfigs?.currencySymbol||\"$\"};//console.log('Initial currency config state:', initialConfig, window?.__FcCurrencyConfigs);\nreturn initialConfig;}return{position:\"Before\",showCode:false,symbol:\"$\"};});const isBrowser=typeof window!==\"undefined\";// Initialize currency from localStorage on page load\nuseEffect(()=>{if(!isBrowser)return;const storedCurrency=localStorage.getItem(\"selectedCurrency\");const storedCountryCode=localStorage.getItem(\"selectedCountryCode\");const storedCountry=localStorage.getItem(\"selectedCountry\");setSelectedCurrency(storedCurrency||\"USD\");setSelectedCountryCode(storedCountryCode||\"US\");setSelectedCountry(storedCountry||\"United States\");// console.log(\"[FC_CartSubtotal] Initial Currency State:\", {\n// currency: storedCurrency\n// })\n},[isBrowser]);// Debug current currency config\n// useEffect(() => {\n// console.log('Currency config changed:', currencyConfig);\n// }, [currencyConfig]);\n// Add currency settings listener\nuseEffect(()=>{if(!isBrowser)return;function updateCurrencyConfig(position,symbol){//console.log('Updating currency config with:', { position, symbol });\nconst newConfig={position:position||\"Before\",showCode:position!==\"Hide\",symbol:symbol||\"$\"};//console.log('New currency config:', newConfig);\nsetCurrencyConfig(newConfig);}// Handle currency settings updates\nconst handleCurrencySettingsUpdate=e=>{//console.log('Currency update event received:', e.detail);\nif(!e.detail?.current){//console.log('Invalid currency update event:', e);\nreturn;}updateCurrencyConfig(e.detail.current.currencyPosition,e.detail.current.currencySymbol);};// Initial setup\nconst currentPosition=window.__FcCurrencyConfigs?.currencyPosition;const currentSymbol=window.__FcCurrencyConfigs?.currencySymbol;//console.log('Initial currency values:', { currentPosition, currentSymbol });\nupdateCurrencyConfig(currentPosition,currentSymbol);// Add event listener\ndocument.addEventListener(\"currency__settings-updated\",handleCurrencySettingsUpdate);//console.log('Currency event listener added');\n// Listen for currency changes\nconst handleCurrencyChange=event=>{//console.log(\"[FC_CartSubtotal] Currency Change Event:\", event.detail);\nconst{currency,countryCode,country}=event.detail;setSelectedCurrency(currency);setSelectedCountryCode(countryCode);setSelectedCountry(country);};window.addEventListener(\"currency_changed\",handleCurrencyChange);return()=>{document.removeEventListener(\"currency__settings-updated\",handleCurrencySettingsUpdate);window.removeEventListener(\"currency_changed\",handleCurrencyChange);//console.log('Currency event listeners removed');\n};},[isBrowser]);// // Cart calculation effect\nuseEffect(()=>{if(!isBrowser)return;const logCartDetails=()=>{const cart=get(window,\"shopXtools.cart\");// Log the entire cart object\n//console.log('Cart Data:', cart);\nif(cart){setCart(cart);// Log each line item in the cart\nconst cartItems=get(cart,\"lines.edges\",[]);// console.log(\n// 'Cart Items:',\n// cartItems.map((edge) => {\n// const item = edge.node;\n// return {\n// title: get(item, 'merchandise.product.title', 'Unknown'),\n// variantId: get(item, 'merchandise.id', ''),\n// price: get(item, 'cost.totalAmount.amount') ||\n// get(item, 'cost.subtotalAmount.amount') ||\n// get(item, 'merchandise.price.amount', '0'),\n// quantity: get(item, 'quantity', 0),\n// currencyCode: get(item, 'cost.totalAmount.currencyCode') ||\n// get(item, 'merchandise.price.currencyCode', 'USD'),\n// };\n// })\n// );\n// Log the subtotal\nconst subtotal=parseFloat(get(cart,\"cost.subtotalAmount.amount\",\"0\"));//console.log('Parsed Subtotal (to be set in state):', subtotal);\nsetSubtotal(subtotal);}else{console.log(\"No cart data available.\");}};// Log cart details on load\nlogCartDetails();// Re-log cart details on cart update events\nwindow.addEventListener(\"shopXtools-cart-update\",logCartDetails);return()=>window.removeEventListener(\"shopXtools-cart-update\",logCartDetails);},[isBrowser]);const _currencyCode=useMemo(()=>{if(!isBrowser)return\"USD\";// Try different paths to get currency code\nconst cartCurrencyCode=get(window,\"shopXtools.cart.cost.subtotalAmount.currencyCode\",\"USD\");//console.log('Currency Code in _currencyCode:', cartCurrencyCode);\nreturn selectedCurrency||cartCurrencyCode;},[isBrowser,cart,selectedCurrency]);const showMockValues=useMemo(()=>subtotal===0&&isBrowser&&window.location.origin.endsWith(\"framercanvas.com\"),[subtotal,isBrowser]);// Common function to format price based on options\nconst formatPriceWithOptions=(numericPrice,currCode)=>{const symbolSameAsCode=isCurrencySymbolSameAsCode(currCode);// Get locale from selected country code\nconst locale=getLocaleFromCountry(selectedCountryCode);// Log browser user agent for debugging iOS-specific issues\n// if (isBrowser) {\n// console.log(\"[FC_CartSubtotal] Format debug:\", {\n// userAgent: navigator.userAgent,\n// isCurrencySymbolSameAsCode: symbolSameAsCode,\n// currencyCode: currCode,\n// selectedCountryCode,\n// locale,\n// showSymbol,\n// showCurrency,\n// showDecimals,\n// })\n// }\n// Determine if we should show decimals based on the setting\nconst shouldShowDecimals=()=>{if(showDecimals===\"Always show\")return true;if(showDecimals===\"Never show\")return false;if(showDecimals===\"Hide when .00\"){// Check if the decimal part is zero\nreturn numericPrice%1!==0;}return true// Default fallback for boolean value\n;};const decimalDigits=shouldShowDecimals()?2:0;// If showing neither symbol nor code, just format the number\nif(!showSymbol&&!showCurrency){const formattedNumber=new Intl.NumberFormat(locale,{style:\"decimal\",minimumFractionDigits:decimalDigits,maximumFractionDigits:decimalDigits}).format(numericPrice);//console.log('Formatted Number (No Symbol or Currency):', formattedNumber);\nreturn formattedNumber;}// Special case for USD to prevent \"US$\" display in Safari iOS\nif(currCode===\"USD\"&&showSymbol){// Check if running on iOS device\nconst isIOS=isBrowser&&/iPad|iPhone|iPod/.test(navigator.userAgent)&&!window.MSStream;// Format USD manually to avoid the iOS \"US$\" prefix\nif(isIOS){const number=new Intl.NumberFormat(locale,{style:\"decimal\",minimumFractionDigits:decimalDigits,maximumFractionDigits:decimalDigits}).format(numericPrice);if(!showCurrency){return`$${number}`// Just \"$50\" format\n;}else{return`$${number} USD`// \"$50 USD\" format\n;}}else{// For non-iOS devices, continue with normal formatting but use\n// a more controlled approach to ensure consistency\nif(!showCurrency){return new Intl.NumberFormat(locale,{style:\"currency\",currency:\"USD\",minimumFractionDigits:decimalDigits,maximumFractionDigits:decimalDigits,currencyDisplay:\"narrowSymbol\"}).format(numericPrice);}else{const withSymbol=new Intl.NumberFormat(locale,{style:\"currency\",currency:\"USD\",minimumFractionDigits:decimalDigits,maximumFractionDigits:decimalDigits,currencyDisplay:\"narrowSymbol\"}).format(numericPrice);return`${withSymbol} USD`;}}}// For currencies where symbol is same as code (like CHF)\nif(symbolSameAsCode){// If showing currency code, always use code-first format and ignore symbol\nif(showCurrency&&!showSymbol){const number=new Intl.NumberFormat(locale,{style:\"decimal\",minimumFractionDigits:decimalDigits,maximumFractionDigits:decimalDigits}).format(numericPrice);const output=`${currCode} ${number}`;return output;}if(showSymbol&&!showCurrency){const number=new Intl.NumberFormat(locale,{style:\"decimal\",minimumFractionDigits:decimalDigits,maximumFractionDigits:decimalDigits}).format(numericPrice);const output=`${currCode} ${number}`;return output;}if(showCurrency&&showSymbol){const number=new Intl.NumberFormat(locale,{style:\"decimal\",minimumFractionDigits:decimalDigits,maximumFractionDigits:decimalDigits}).format(numericPrice);return`${currCode} ${number}`;}}// For currencies with distinct symbols (like USD with $)\n// If showing only the code (no symbol)\nif(!showSymbol&&showCurrency){const number=new Intl.NumberFormat(locale,{style:\"decimal\",minimumFractionDigits:decimalDigits,maximumFractionDigits:decimalDigits}).format(numericPrice);// For normal currencies, show code after the number\nreturn`${number} ${currCode}`;}// If showing only the symbol (no code)\nif(showSymbol&&!showCurrency){return new Intl.NumberFormat(locale,{style:\"currency\",currency:currCode,minimumFractionDigits:decimalDigits,maximumFractionDigits:decimalDigits,currencyDisplay:\"narrowSymbol\"}).format(numericPrice);}// If showing both symbol and code\nconst withSymbol=new Intl.NumberFormat(locale,{style:\"currency\",currency:currCode,minimumFractionDigits:decimalDigits,maximumFractionDigits:decimalDigits,currencyDisplay:\"narrowSymbol\"}).format(numericPrice);return`${withSymbol} ${currCode}`;};const text=useMemo(()=>{if(!isBrowser)return\"\";// For canvas view, handle the display options directly\nif(RenderTarget.current()===RenderTarget.canvas||showMockValues){const mockAmount=150;const currentCurrencyCode=previewCurrencyCode||\"USD\";return formatPriceWithOptions(mockAmount,currentCurrencyCode);}// For live view, use the actual subtotal\nreturn formatPriceWithOptions(subtotal,_currencyCode);},[isBrowser,showMockValues,subtotal,_currencyCode,showCurrency,showSymbol,showDecimals,previewCurrencyCode,props.format]);if(!isBrowser){return /*#__PURE__*/_jsx(\"div\",{style:{display:\"inline-flex\"}});}// For debugging\n// console.log('Rendering FC_CartSubtotal with:', {\n// subtotal,\n// text,\n// currencyConfig,\n// props\n// })\n// Render a basic div if ShopXCartSubtotal is not available\nif(typeof ShopXCartSubtotal===\"undefined\"){return /*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",textAlign:\"right\"},children:/*#__PURE__*/_jsx(\"p\",{style:{...props.font,color:props.color,margin:0},children:text})});}return /*#__PURE__*/_jsx(ShopXCartSubtotal,{...props,text:/*#__PURE__*/_jsx(\"p\",{style:{...props.font,color:props.color,margin:0},children:text}),style:{width:\"100%\"}});}FC_CartSubtotal.defaultProps={format:{showCurrency:false,showSymbol:true,currencyCode:\"USD\",showDecimals:\"Always show\"}};addPropertyControls(FC_CartSubtotal,{format:{type:ControlType.Object,title:\"Format\",controls:{showSymbol:{type:ControlType.Boolean,title:\"Symbol\",defaultValue:true,enabledTitle:\"Show\",disabledTitle:\"Hide\",description:\"$, \\xa3, €, etc.\"},showCurrency:{type:ControlType.Boolean,title:\"Code\",defaultValue:false,enabledTitle:\"Show\",disabledTitle:\"Hide\",description:\"USD, EUR, CHF, etc.\"},showDecimals:{type:ControlType.Enum,title:\"Decimals\",defaultValue:\"Always show\",options:[\"Always show\",\"Never show\",\"Hide when .00\"],optionTitles:[\"Always show\",\"Never show\",\"Hide when .00\"],displaySegmentedControl:true,segmentedControlDirection:\"vertical\"},currencyCode:{type:ControlType.Enum,title:\"Preview\",defaultValue:\"USD\",options:[\"USD\",\"EUR\",\"GBP\",\"CHF\",\"JPY\",\"CAD\",\"AUD\",\"CNY\",\"HKD\",\"NZD\",\"SEK\",\"KRW\",\"SGD\",\"NOK\",\"MXN\",\"INR\",\"RUB\",\"ZAR\",\"TRY\",\"BRL\",\"TWD\",\"DKK\",\"PLN\",\"THB\",\"IDR\",\"HUF\",\"CZK\",\"ILS\",\"CLP\",\"PHP\",\"AED\",\"COP\",\"SAR\",\"MYR\",\"RON\"],description:\"Currency on your site is automatic, this is only shown in canvas preview.\"}}},font:{type:ControlType.Font,controls:\"extended\",title:\"Font\"},color:{type:ControlType.Color,defaultValue:\"#000\",title:\"Color\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"FC_CartSubtotal\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerDisableUnlink\":\"\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./FC_CartSubtotal.map","/*\n * Framer Commerce\n * Confidential and Proprietary - All Rights Reserved\n * Unauthorized use, reproduction, distribution, or disclosure of this\n * source code or any related information is strictly prohibited.\n *\n * This software is the exclusive property of Framer Commerce (\"Company\").\n * It is considered highly confidential and proprietary information.\n *\n * Any use, copying, modification, distribution, or sharing of this software,\n * in whole or in part, without the express written permission of the Company\n * is strictly prohibited and may result in legal action.\n *\n * DISCLAIMER: This software does not provide any express or\n * implied warranties, including, but not limited to, the implied warranties\n * of merchantability and fitness for a particular purpose. In no event shall\n * Framer Commerce be liable for any direct, indirect, incidental, special,\n * exemplary, or consequential damages (including, but not limited to, procurement\n * of substitute goods or services; loss of use, data, or profits; or business\n * interruption) however caused and on any theory of liability, whether in\n * contract, strict liability, or tort (including negligence or otherwise)\n * arising in any way out of the use of this software, even if advised of\n * the possibility of such damage.\n *\n * Any unauthorized possession, use, copying, distribution, or dissemination\n * of this software will be considered a breach of confidentiality and may\n * result in legal action.\n *\n * For inquiries, contact:\n * Framer Commerce\n * Email: hello@framercommerce.com\n *\n * © 2024 Framer Commerce. All Rights Reserved.\n */import{jsx as _jsx}from\"react/jsx-runtime\";import{useCallback,useRef,useEffect,useState,cloneElement}from\"react\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";/**\n * @framerDisableUnlink\n *//**\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight any\n * @framerIntrinsicHeight Auto\n */function FC_CartStateController(props){var _content_props;const{Populated,Empty}=props;const[isBrowser,setIsBrowser]=useState(false);const[cartItems,setCartItems]=useState([]);const isFetching=useRef(false);// Set isBrowser to true once component mounts\nuseEffect(()=>{setIsBrowser(true);},[]);const fetchCartFromShopify=useCallback(async cartId=>{if(isFetching.current||!isBrowser)return;isFetching.current=true;try{var _window_shopXtools_fetchCart,_window_shopXtools,_window;const cartData=await ((_window=window)===null||_window===void 0?void 0:(_window_shopXtools=_window.shopXtools)===null||_window_shopXtools===void 0?void 0:(_window_shopXtools_fetchCart=_window_shopXtools.fetchCart)===null||_window_shopXtools_fetchCart===void 0?void 0:_window_shopXtools_fetchCart.call(_window_shopXtools,cartId));if(cartData){var _cartData_lines;setCartItems(((_cartData_lines=cartData.lines)===null||_cartData_lines===void 0?void 0:_cartData_lines.edges)||[]);}else{setCartItems([]);}}catch(error){console.error(\"Error fetching cart:\",error);setCartItems([]);}finally{isFetching.current=false;}},[isBrowser]);const handleCartUpdate=useCallback(async()=>{if(!isBrowser)return;let cartId;try{var _window_shopXtools_cart,_window_shopXtools,_window;cartId=(_window=window)===null||_window===void 0?void 0:(_window_shopXtools=_window.shopXtools)===null||_window_shopXtools===void 0?void 0:(_window_shopXtools_cart=_window_shopXtools.cart)===null||_window_shopXtools_cart===void 0?void 0:_window_shopXtools_cart.id;if(!cartId){cartId=localStorage.getItem(\"shopX_cart_id\");}}catch(error){console.error(\"Error accessing localStorage:\",error);return;}if(cartId){await fetchCartFromShopify(cartId);}else{setCartItems([]);}},[fetchCartFromShopify,isBrowser]);useEffect(()=>{if(!isBrowser)return;handleCartUpdate();window.addEventListener(\"shopXtools-cart-update\",handleCartUpdate);return()=>window.removeEventListener(\"shopXtools-cart-update\",handleCartUpdate);},[handleCartUpdate,isBrowser]);let content=null;if(RenderTarget.current()===RenderTarget.canvas){content=(Empty===null||Empty===void 0?void 0:Empty[0])||null;}else{// On server-side (or when isBrowser is false), always show Empty state\n// On client-side, show based on cart items\ncontent=!isBrowser||cartItems.length===0?Empty===null||Empty===void 0?void 0:Empty[0]:Populated===null||Populated===void 0?void 0:Populated[0];}if(!content){return /*#__PURE__*/_jsx(\"div\",{style:{height:\"100%\"}});}const clonedElement=/*#__PURE__*/cloneElement(content,{style:{...((_content_props=content.props)===null||_content_props===void 0?void 0:_content_props.style)||{},width:\"100%\",height:\"100%\"}});return /*#__PURE__*/_jsx(\"div\",{style:{height:\"100%\"},children:clonedElement});}FC_CartStateController.defaultProps={Populated:null,Empty:null};addPropertyControls(FC_CartStateController,{Populated:{type:ControlType.ComponentInstance,title:\"Populated State\"},Empty:{type:ControlType.ComponentInstance,title:\"Empty State\"}});export default FC_CartStateController;\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"FC_CartStateController\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"fixed\",\"framerSupportedLayoutHeight\":\"any\",\"framerContractVersion\":\"1\",\"framerIntrinsicHeight\":\"Auto\",\"framerDisableUnlink\":\"\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./FC_CartStateController.map","/*\n * Framer Commerce\n * Confidential and Proprietary - All Rights Reserved\n * Unauthorized use, reproduction, distribution, or disclosure of this\n * source code or any related information is strictly prohibited.\n *\n * This software is the exclusive property of Framer Commerce (\"Company\").\n * It is considered highly confidential and proprietary information.\n *\n * Any use, copying, modification, distribution, or sharing of this software,\n * in whole or in part, without the express written permission of the Company\n * is strictly prohibited and may result in legal action.\n *\n * DISCLAIMER: This software does not provide any express or\n * implied warranties, including, but not limited to, the implied warranties\n * of merchantability and fitness for a particular purpose. In no event shall\n * Framer Commerce be liable for any direct, indirect, incidental, special,\n * exemplary, or consequential damages (including, but not limited to, procurement\n * of substitute goods or services; loss of use, data, or profits; or business\n * interruption) however caused and on any theory of liability, whether in\n * contract, strict liability, or tort (including negligence or otherwise)\n * arising in any way out of the use of this software, even if advised of\n * the possibility of such damage.\n *\n * Any unauthorized possession, use, copying, distribution, or dissemination\n * of this software will be considered a breach of confidentiality and may\n * result in legal action.\n *\n * For inquiries, contact:\n * Framer Commerce\n * Email: hello@framercommerce.com\n *\n * © 2025 Butter Supply Inc. All Rights Reserved.\n */import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import React,{useCallback,useRef,useEffect,useState}from\"react\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";import{get,throttle}from\"lodash-es\";import{removeLineMutation,updatelineMutation,removeLineMutationNoPlans,getProductMetafields}from\"https://framerusercontent.com/modules/yiRfl1JCGhIBUL31WVDk/wupS2XmBAHu1kBQNv9pi/mutations_v2.js\";import{knownCurrenciesWithCodeAsSymbol}from\"https://framerusercontent.com/modules/k9s4cejdkBGDjmzudhzM/18cq93eooqM4YmdbL7E2/currencyMaps.js\";import{useIsBrowser}from\"https://framerusercontent.com/modules/ncBs5KPMI9I5GEta13fn/zGXDjuZapa1SGy6D8P5e/IsBrowser.js\";import{getLocaleFromCountry}from\"https://framerusercontent.com/modules/vC6fzbfO83MgBPIhn5zl/N2GIWD1ik8HES3ASBGeD/locales.js\";// Helper function to check if a currency's symbol is the same as its code\nconst isCurrencySymbolSameAsCode=currencyCode=>{// For some currencies like CHF, the browser might use the code as the symbol\nif(!currencyCode)return false;if(knownCurrenciesWithCodeAsSymbol.includes(currencyCode)){return true;}try{const formatted=new Intl.NumberFormat(undefined,{style:\"currency\",currency:currencyCode,currencyDisplay:\"narrowSymbol\"}).format(0);// Remove digits, decimal points, and common formatting characters\nconst cleanFormatted=formatted.replace(/[0-9.,\\s]/g,\"\");// Check if what remains is the currency code\nreturn cleanFormatted===currencyCode;}catch(e){return false;}};/**\n * @framerDisableUnlink\n */export default function FC_CartProductCard(props){const[cart,setCart]=useState({});const[cartItems,setCartItems]=useState([]);const[errorMessage,setErrorMessage]=useState();const isFetching=useRef(false);const[selectedCurrency,setSelectedCurrency]=useState(\"\");const[selectedCountryCode,setSelectedCountryCode]=useState(\"\");const[selectedCountry,setSelectedCountry]=useState(\"\");// const [subscriptionPrice, setSubscriptionPrice] = useState(null)\n// const [subscriptionPlan, setSubscriptionPlan] = useState(null)\nconst isBrowser=useIsBrowser();// Initialize currency from localStorage on page load\nuseEffect(()=>{if(!isBrowser)return;const storedCurrency=localStorage.getItem(\"selectedCurrency\");const storedCountryCode=localStorage.getItem(\"selectedCountryCode\");const storedCountry=localStorage.getItem(\"selectedCountry\");setSelectedCurrency(storedCurrency||\"USD\");setSelectedCountryCode(storedCountryCode||\"US\");setSelectedCountry(storedCountry||\"United States\");//console.log(\"[FC_CartProductCard] setting selectedCountryCode and currency\", storedCountryCode, storedCurrency)\n},[isBrowser]);// Listen for currency changes\nuseEffect(()=>{if(!isBrowser)return;const handleCurrencyChange=event=>{const{currency,countryCode,country}=event.detail;setSelectedCurrency(currency);setSelectedCountryCode(countryCode);setSelectedCountry(country);//console.log(\"[FC_CartProductCard] currency changed to\", selectedCountryCode, selectedCurrency)\n};window.addEventListener(\"currency_changed\",handleCurrencyChange);return()=>{window.removeEventListener(\"currency_changed\",handleCurrencyChange);};},[isBrowser,selectedCurrency,selectedCountryCode]);// Add currency config state\nconst[currencyConfig,setCurrencyConfig]=useState(()=>{// Initialize with window values if available\nif(typeof window!==\"undefined\"){const position=window?.__FcCurrencyConfigs?.currencyPosition||\"Before\";const initialConfig={position:position,showCode:position!==\"Hide\",symbol:window?.__FcCurrencyConfigs?.currencySymbol||\"$\"};// console.log(\n// \"Initial currency config state:\",\n// initialConfig,\n// window?.__FcCurrencyConfigs\n// )\nreturn initialConfig;}return{position:\"Before\",showCode:false,symbol:\"$\"};});// Add currency settings listener\nuseEffect(()=>{if(typeof window===\"undefined\")return;function updateCurrencyConfig(position,symbol){//(\"Updating currency config with:\", { position, symbol })\nconst newConfig={position:position||\"Before\",showCode:position!==\"Hide\",symbol:symbol||\"$\"};//console.log(\"New currency config:\", newConfig)\nsetCurrencyConfig(newConfig);}// Handle currency settings updates\nconst handleCurrencySettingsUpdate=e=>{//console.log(\"Currency update event received:\", e.detail)\nif(!e.detail?.current){//console.log(\"Invalid currency update event:\", e)\nreturn;}updateCurrencyConfig(e.detail.current.currencyPosition,e.detail.current.currencySymbol);};// Initial setup\nconst currentPosition=window.__FcCurrencyConfigs?.currencyPosition;const currentSymbol=window.__FcCurrencyConfigs?.currencySymbol;// console.log(\"Initial currency values:\", {\n// currentPosition,\n// currentSymbol,\n// })\nupdateCurrencyConfig(currentPosition,currentSymbol);// Add event listener\ndocument.addEventListener(\"currency__settings-updated\",handleCurrencySettingsUpdate);return()=>{document.removeEventListener(\"currency__settings-updated\",handleCurrencySettingsUpdate);};},[]);const _showCurrencyCode=props.priceConfigs?.showCurrencyCode;const _showCurrencySymbol=props.priceConfigs?.showSymbol;// // Add subscription price listener\n// useEffect(() => {\n// if (!isBrowser) return\n// const handleSubscriptionPriceUpdate = (e) => {\n// if (e.detail?.price) {\n// setSubscriptionPrice(e.detail.price)\n// setSubscriptionPlan(e.detail.plan.id)\n// } else {\n// setSubscriptionPrice(null)\n// setSubscriptionPlan(null)\n// }\n// }\n// document.addEventListener(\n// \"subscription__price-update\",\n// handleSubscriptionPriceUpdate\n// )\n// return () => {\n// document.removeEventListener(\n// \"subscription__price-update\",\n// handleSubscriptionPriceUpdate\n// )\n// }\n// }, [isBrowser])\nconst[locale,setLocale]=useState(undefined);useEffect(()=>{//console.log(\"[FC_CartProductCard] selectedCountryCode\", selectedCountryCode)\nconst updatedLocale=getLocaleFromCountry(selectedCountryCode);//console.log(\"[FC_CartProductCard] Locale updated:\", updatedLocale);\nsetLocale(updatedLocale);},[selectedCountryCode]);const formatCartPrice=useCallback((amount,currencyCode)=>{// Clean and format amount\nif(typeof amount===\"string\"){amount=amount.replace(/[^0-9.]/g,\"\");const parts=amount.split(\".\");if(parts.length>2){amount=parts[0]+\".\"+parts.slice(1).join(\"\");}}if(typeof amount!==\"number\"){amount=parseFloat(amount);}if(isNaN(amount)){amount=0;}// For canvas view, use canvasPrice with USD\nif(RenderTarget.current()===RenderTarget.canvas){const format=props.priceConfigs?.format||{};return formatPriceWithOptions(amount,format.currencyCode||\"USD\");}// For browser view, use the current currency\nconst format=props.priceConfigs?.format||{};return formatPriceWithOptions(amount,currencyCode||\"USD\");},[props.priceConfigs,locale]);// Common function to format price based on options\nconst formatPriceWithOptions=useCallback((numericPrice,currCode)=>{if(!currCode)currCode=\"USD\";//console.log(\"[FC_CartProductCard] currCode\", currCode)\nconst format=props.priceConfigs?.format||{};// For backward compatibility\nconst showSymbol=format.showSymbol!==undefined?format.showSymbol:props.priceConfigs?.showSymbol!==undefined?props.priceConfigs.showSymbol:true;const showCurrency=format.showCurrency!==undefined?format.showCurrency:props.priceConfigs?.showCurrencyCode!==undefined?props.priceConfigs.showCurrencyCode:false;const showDecimals=format.showDecimals||\"Always show\";const symbolSameAsCode=isCurrencySymbolSameAsCode(currCode);//console.log(\"[FC_CartProductCard] receving locale from getLocaleFromCountry\", locale)\n// console.log(\"[FC_CartProductCard] Format debug:\", {\n// userAgent: navigator.userAgent,\n// isCurrencySymbolSameAsCode: symbolSameAsCode,\n// currencyCode: currCode,\n// selectedCountryCode,\n// locale,\n// })\n// Determine if we should show decimals based on the setting\nconst shouldShowDecimals=()=>{if(showDecimals===\"Always show\")return true;if(showDecimals===\"Never show\")return false;if(showDecimals===\"Hide when .00\"){// Check if the decimal part is zero\nreturn numericPrice%1!==0;}return true// Default fallback\n;};const decimalDigits=shouldShowDecimals()?2:0;// If showing neither symbol nor code, just format the number\nif(!showSymbol&&!showCurrency){const formattedNumber=new Intl.NumberFormat(locale,{style:\"decimal\",minimumFractionDigits:decimalDigits,maximumFractionDigits:decimalDigits}).format(numericPrice);return formattedNumber;}// Special case for USD to prevent \"US$\" display in Safari iOS\nif(currCode===\"USD\"&&showSymbol){// Check if running on iOS device\nconst isIOS=isBrowser&&/iPad|iPhone|iPod/.test(navigator.userAgent)&&!window.MSStream;// Format USD manually to avoid the iOS \"US$\" prefix\nif(isIOS){const number=new Intl.NumberFormat(locale,{style:\"decimal\",minimumFractionDigits:decimalDigits,maximumFractionDigits:decimalDigits}).format(numericPrice);if(!showCurrency){return`$${number}`// Just \"$50\" format\n;}else{return`$${number} USD`// \"$50 USD\" format\n;}}else{// For non-iOS devices, continue with normal formatting but use\n// a more controlled approach to ensure consistency\nif(!showCurrency){return new Intl.NumberFormat(locale,{style:\"currency\",currency:\"USD\",minimumFractionDigits:decimalDigits,maximumFractionDigits:decimalDigits,currencyDisplay:\"narrowSymbol\"}).format(numericPrice);}else{const withSymbol=new Intl.NumberFormat(locale,{style:\"currency\",currency:\"USD\",minimumFractionDigits:decimalDigits,maximumFractionDigits:decimalDigits,currencyDisplay:\"narrowSymbol\"}).format(numericPrice);return`${withSymbol} USD`;}}}// For currencies where symbol is same as code (like CHF)\nif(symbolSameAsCode){// If showing currency code, always use code-first format and ignore symbol\nif(showCurrency&&!showSymbol){const number=new Intl.NumberFormat(locale,{style:\"decimal\",minimumFractionDigits:decimalDigits,maximumFractionDigits:decimalDigits}).format(numericPrice);const output=`${currCode} ${number}`;return output;}if(showSymbol&&!showCurrency){const number=new Intl.NumberFormat(locale,{style:\"decimal\",minimumFractionDigits:decimalDigits,maximumFractionDigits:decimalDigits}).format(numericPrice);const output=`${currCode} ${number}`;return output;}if(showCurrency&&showSymbol){const number=new Intl.NumberFormat(locale,{style:\"decimal\",minimumFractionDigits:decimalDigits,maximumFractionDigits:decimalDigits}).format(numericPrice);return`${currCode} ${number}`;}}// For currencies with distinct symbols (like USD with $)\n// If showing only the code (no symbol)\nif(!showSymbol&&showCurrency){const number=new Intl.NumberFormat(locale,{style:\"decimal\",minimumFractionDigits:decimalDigits,maximumFractionDigits:decimalDigits}).format(numericPrice);// For normal currencies, show code after the number\nreturn`${number} ${currCode}`;}// If showing only the symbol (no code)\nif(showSymbol&&!showCurrency){return new Intl.NumberFormat(locale,{style:\"currency\",currency:currCode,minimumFractionDigits:decimalDigits,maximumFractionDigits:decimalDigits,currencyDisplay:\"narrowSymbol\"}).format(numericPrice);}// If showing both symbol and code\nconst withSymbol=new Intl.NumberFormat(locale,{style:\"currency\",currency:currCode,minimumFractionDigits:decimalDigits,maximumFractionDigits:decimalDigits,currencyDisplay:\"narrowSymbol\"}).format(numericPrice);return`${withSymbol} ${currCode}`;},[props.priceConfigs,locale]);const fetchCartFromShopify=useCallback(async cartId=>{if(isFetching.current){return;}isFetching.current=true;try{// Wait until window.shopXtools.fetchCart is available\nawait waitForCondition(()=>window.shopXtools&&window.shopXtools.fetchCart);const cartData=await window.shopXtools.fetchCart(cartId);//console.log(\"[FETCH] Cart data received from Shopify:\", cartData);\nif(cartData){setCart(cartData);//console.log(\"[FETCH] Cart Data after setting state: :\", cartData)\nsetCartItems(cartData.lines?.edges||[]);//console.log(\"[FETCH] Cart items after setting state:\", cartData.lines?.edges);\n// Update the global cart data\nwindow.shopXtools.cart=cartData;// Dispatch cart update event\nwindow.dispatchEvent(new Event(\"shopXtools-cart-update\"));}else{setCart({});setCartItems([]);}}catch(error){setCart({});setCartItems([]);}finally{isFetching.current=false;}},[]);// useEffect(() => {\n// console.log(\"[STATE] Updated cart:\", cart);\n// }, [cart]);\n// useEffect(() => {\n// console.log(\"[STATE] Updated cartItems:\", cartItems);\n// }, [cartItems]);\n// Helper function to wait until a condition is true\nconst waitForCondition=useCallback((conditionFn,checkInterval=100,timeout=1e4)=>{return new Promise((resolve,reject)=>{const startTime=Date.now();const checkCondition=()=>{if(conditionFn()){resolve();}else if(Date.now()-startTime>=timeout){reject(new Error(\"Condition not met within timeout\"));}else{setTimeout(checkCondition,checkInterval);}};checkCondition();});},[]);const handleCartUpdate=useCallback(throttle(async()=>{let cartId=window[\"shopXtools\"]?.cart?.id;// console.log(\"[UPDATE] Checking for cartId:\", cartId);\n// console.log(\"[UPDATE] Checking for cart:\", window[\"shopXtools\"]?.cart);\nif(!cartId){try{cartId=localStorage.getItem(\"shopX_cart_id\");}catch(error){console.error(\"Error loading cart ID from local storage:\",error);}}if(cartId){await fetchCartFromShopify(cartId);//console.log(\"[UPDATE] Fetching cart from Shopify with cartId:\", cartId);\n}else{//console.log(\"[UPDATE] No cartId found, resetting cart state.\");\nsetCart({});setCartItems([]);}},500),[fetchCartFromShopify]);//console.log(\"Cart Data in CartProductCard:\", cart)\nuseEffect(()=>{//console.log(\"[EVENT] shopXtools-cart-update event triggered\");\n// Fetch cart data on component mount\nhandleCartUpdate();window.addEventListener(\"shopXtools-cart-update\",handleCartUpdate);return()=>{window.removeEventListener(\"shopXtools-cart-update\",handleCartUpdate);};},[handleCartUpdate]);//console.log(\"Cart Data in CartProductCard:\", cart)\nconst handleRemoveLine=useCallback(async(cartId,lineId)=>{if(!cartId||!lineId){console.error(\"Missing cartId or lineId for remove operation\");return;}try{const data=await window.shopXtools?.handleCartMutation(removeLineMutation,{cartId,lineIds:[lineId]});//console.log(\"[REMOVE] Mutation response:\", data);\nif(data?.cartLinesRemove?.cart){//console.log(\"[REMOVE] Cart updated, refetching...\");\nawait fetchCartFromShopify(cartId);return;}// Try backup mutation if primary fails\nconst backupData=await window.shopXtools?.handleCartMutation(removeLineMutationNoPlans,{cartId,lineIds:[lineId]});if(backupData?.cartLinesRemove?.cart){await fetchCartFromShopify(cartId);}else{console.error(\"Both primary and backup remove line mutations failed\");}}catch(error){console.error(\"Error removing line item:\",error);}},[fetchCartFromShopify]);const handleUpdateLine=useCallback(async(cartId,lineId,quantity,lineItem)=>{if(!cartId||!lineId||typeof quantity!==\"number\"){console.error(\"Missing required parameters for update operation\");return;}//console.log(\"[UPDATE] Updating line:\", { cartId, lineId, quantity, lineItem });\ntry{// Check quantity limits if product has them\nconst productHandle=lineItem?.merchandise?.product?.handle;if(productHandle){const metafields=await window.shopXtools?.handleCartMutation(getProductMetafields,{handle:productHandle});const maxQuantity=parseInt(metafields?.product?.metafield_order_max?.value,10);if(!isNaN(maxQuantity)&&maxQuantity>0&&quantity>maxQuantity){setErrorMessage(`Maximum quantity allowed is ${maxQuantity}`);return;}}// Update cart line\nconst data=await window.shopXtools?.handleCartMutation(updatelineMutation,{cartId,lines:[{id:lineId,quantity}]});//console.log(\"[UPDATE] Mutation response:\", data);\nif(data?.cartLinesUpdate?.cart){await fetchCartFromShopify(cartId);setErrorMessage(undefined);}else{console.error(\"Failed to update cart line\");}}catch(error){console.error(\"Error updating line item:\",error);}},[fetchCartFromShopify]);//console.log(\"Cart Data in CartProductCard:\", cart)\nconst errorVisible=errorMessage!==null;// Adjust mock data for compare price\nconst mockData=[{price:\"100.00\",comparePrice:null},{price:\"200.00\",comparePrice:\"250.00\"},{price:\"300.00\",comparePrice:null},{price:\"400.00\",comparePrice:null}];// console.log(\"[RENDER] Cart before rendering:\", cart);\n// console.log(\"[RENDER] Cart items before rendering:\", cartItems);\nreturn /*#__PURE__*/_jsx(_Fragment,{children:RenderTarget.current()===RenderTarget.canvas?/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",flexDirection:\"column\",gap:props.spacingConfigs?.gap??24,width:\"100%\"},children:[/*#__PURE__*/_jsx(ShopXCartProductCard,{imageVisibility:props.imageConfigs?.visible,image:props.imageConfigs?.visible?\"https://framerusercontent.com/images/3E7u1YOHRQaZuBdfYRsm3XCzxk.jpg\":null,imageConfigs:props.imageConfigs,quantityConfigs:props.quantityConfigs,removeIconConfigs:props.removeIconConfigs,containerConfigs:props.containerConfigs,linkConfigs:props.linkConfigs,titleConfigs:props.titleConfigs,_lineItem:{merchandise:{product:{handle:\"example-product\"}}},quantityControlColor:props.quantityConfigs?.buttons?.icons,quantityNumberColor:props.quantityConfigs?.container?.number,quantityContainerBgColor:props.quantityConfigs?.container?.containerBg,quantityControlBgColor:props.quantityConfigs?.buttons?.iconBg,quantityControlHoverColor:props.quantityConfigs?.buttons?.iconBgHover,quantityContainerBorder:\"1px solid #E2E2E2\",quantityContainerRadius:\"8px\",xColor:props.removeIconConfigs?.icon,xBgColor:props.removeIconConfigs?.bg,xBgHoverColor:props.removeIconConfigs?.bgHover,style:{width:\"100%\",border:props.containerConfigs?.border?`${props.containerConfigs.border.borderWidth}px ${props.containerConfigs.border.borderStyle} ${props.containerConfigs.border.borderColor}`:undefined,borderRadius:props.containerConfigs?.radius||\"0px\",background:props.containerConfigs?.background||\"#FFF\",padding:props.containerConfigs?.padding||\"0px\"},shopifyProductTitle:/*#__PURE__*/_jsx(\"p\",{style:{...get(props,\"titleConfigs.font\"),color:get(props,\"titleConfigs.color\"),margin:0},children:\"Product Title 1\"}),shopifyProductPriceAmount:/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",flexDirection:\"column\",alignItems:\"flex-end\",gap:props.priceConfigs?.gap||4},children:[/*#__PURE__*/_jsx(\"p\",{style:{margin:0,...get(props,\"priceConfigs.price.font\"),color:get(props,\"priceConfigs.price.color\"),whiteSpace:\"nowrap\",minWidth:0},children:formatCartPrice(mockData[0].price,\"USD\")}),mockData[0].comparePrice&&/*#__PURE__*/_jsx(\"p\",{style:{margin:0,...get(props,\"priceConfigs.comparePrice.font\"),color:get(props,\"priceConfigs.comparePrice.color\"),textDecoration:props.priceConfigs?.comparePrice?.strikethrough?\"line-through\":\"none\",textDecorationColor:props.priceConfigs?.comparePrice?.strikethroughColor,whiteSpace:\"nowrap\",minWidth:0},children:formatCartPrice(mockData[0].comparePrice,\"USD\")})]}),shopifyQuantity:\"1\",variants:null,onRemove:()=>{},onAddQuantity:()=>{},onSubtractQuantity:()=>{}}),props.spacingConfigs?.dividerVisible&&/*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",borderTop:`${props.spacingConfigs?.divider?.borderWidth||1}px ${props.spacingConfigs?.divider?.borderStyle||\"solid\"} ${props.spacingConfigs?.divider?.borderColor||\"rgba(0,0,0,0.08)\"}`}}),/*#__PURE__*/_jsx(ShopXCartProductCard,{imageVisibility:props.imageConfigs?.visible,image:props.imageConfigs?.visible?\"https://framerusercontent.com/images/3E7u1YOHRQaZuBdfYRsm3XCzxk.jpg\":null,imageConfigs:props.imageConfigs,quantityConfigs:props.quantityConfigs,removeIconConfigs:props.removeIconConfigs,containerConfigs:props.containerConfigs,linkConfigs:props.linkConfigs,titleConfigs:props.titleConfigs,_lineItem:{merchandise:{product:{handle:\"example-product\"}}},quantityControlColor:props.quantityConfigs?.buttons?.icons,quantityNumberColor:props.quantityConfigs?.container?.number,quantityContainerBgColor:props.quantityConfigs?.container?.containerBg,quantityControlBgColor:props.quantityConfigs?.buttons?.iconBg,quantityControlHoverColor:props.quantityConfigs?.buttons?.iconBgHover,quantityContainerBorder:\"1px solid #E2E2E2\",quantityContainerRadius:\"8px\",xColor:props.removeIconConfigs?.icon,xBgColor:props.removeIconConfigs?.bg,xBgHoverColor:props.removeIconConfigs?.bgHover,style:{width:\"100%\",border:props.containerConfigs?.border?`${props.containerConfigs.border.borderWidth}px ${props.containerConfigs.border.borderStyle} ${props.containerConfigs.border.borderColor}`:undefined,borderRadius:props.containerConfigs?.radius||\"0px\",background:props.containerConfigs?.background||\"#FFF\",padding:props.containerConfigs?.padding||\"0px\"},shopifyProductTitle:/*#__PURE__*/_jsx(\"p\",{style:{...get(props,\"titleConfigs.font\"),color:get(props,\"titleConfigs.color\"),margin:0},children:\"Product Title 2\"}),shopifyProductPriceAmount:/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",flexDirection:\"column\",alignItems:\"flex-end\",gap:props.priceConfigs?.gap||4},children:[/*#__PURE__*/_jsx(\"p\",{style:{margin:0,...get(props,\"priceConfigs.price.font\"),color:get(props,\"priceConfigs.price.color\"),whiteSpace:\"nowrap\",minWidth:0},children:formatCartPrice(mockData[1].price,\"USD\")}),mockData[1].comparePrice&&/*#__PURE__*/_jsx(\"p\",{style:{margin:0,...get(props,\"priceConfigs.comparePrice.font\"),color:get(props,\"priceConfigs.comparePrice.color\"),textDecoration:props.priceConfigs?.comparePrice?.strikethrough?\"line-through\":\"none\",textDecorationColor:props.priceConfigs?.comparePrice?.strikethroughColor,whiteSpace:\"nowrap\",minWidth:0},children:formatCartPrice(mockData[1].comparePrice,\"USD\")})]}),shopifyQuantity:\"2\",variants:/*#__PURE__*/_jsx(\"div\",{style:{display:\"flex\",flexDirection:\"column\",gap:props.variantConfigs?.gap||\"4px\"},children:/*#__PURE__*/_jsxs(\"p\",{style:{margin:0},children:[/*#__PURE__*/_jsx(\"span\",{style:{...get(props,\"variantConfigs.titleFont\"),color:get(props,\"variantConfigs.titleColor\"),marginRight:\"5px\"},children:\"Color:\"}),/*#__PURE__*/_jsx(\"span\",{style:{...get(props,\"variantConfigs.valueFont\"),color:get(props,\"variantConfigs.valueColor\")},children:\"Blue\"})]})}),onRemove:()=>{},onAddQuantity:()=>{},onSubtractQuantity:()=>{}}),props.spacingConfigs?.dividerVisible&&/*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",borderTop:`${props.spacingConfigs?.divider?.borderWidth||1}px ${props.spacingConfigs?.divider?.borderStyle||\"solid\"} ${props.spacingConfigs?.divider?.borderColor||\"rgba(0,0,0,0.08)\"}`}}),/*#__PURE__*/_jsx(ShopXCartProductCard,{imageVisibility:props.imageConfigs?.visible,image:props.imageConfigs?.visible?\"https://framerusercontent.com/images/3E7u1YOHRQaZuBdfYRsm3XCzxk.jpg\":null,imageConfigs:props.imageConfigs,quantityConfigs:props.quantityConfigs,removeIconConfigs:props.removeIconConfigs,containerConfigs:props.containerConfigs,linkConfigs:props.linkConfigs,titleConfigs:props.titleConfigs,_lineItem:{merchandise:{product:{handle:\"example-product\"}}},quantityControlColor:props.quantityConfigs?.buttons?.icons,quantityNumberColor:props.quantityConfigs?.container?.number,quantityContainerBgColor:props.quantityConfigs?.container?.containerBg,quantityControlBgColor:props.quantityConfigs?.buttons?.iconBg,quantityControlHoverColor:props.quantityConfigs?.buttons?.iconBgHover,quantityContainerBorder:\"1px solid #E2E2E2\",quantityContainerRadius:\"8px\",xColor:props.removeIconConfigs?.icon,xBgColor:props.removeIconConfigs?.bg,xBgHoverColor:props.removeIconConfigs?.bgHover,style:{width:\"100%\",border:props.containerConfigs?.border?`${props.containerConfigs.border.borderWidth}px ${props.containerConfigs.border.borderStyle} ${props.containerConfigs.border.borderColor}`:undefined,borderRadius:props.containerConfigs?.radius||\"0px\",background:props.containerConfigs?.background||\"#FFF\",padding:props.containerConfigs?.padding||\"0px\"},shopifyProductTitle:/*#__PURE__*/_jsx(\"p\",{style:{...get(props,\"titleConfigs.font\"),color:get(props,\"titleConfigs.color\"),margin:0},children:\"Product Title 3\"}),shopifyProductPriceAmount:/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",flexDirection:\"column\",alignItems:\"flex-end\",gap:props.priceConfigs?.gap||4},children:[/*#__PURE__*/_jsx(\"p\",{style:{margin:0,...get(props,\"priceConfigs.price.saleFont\"),color:get(props,\"priceConfigs.price.saleColor\"),whiteSpace:\"nowrap\",minWidth:0},children:formatCartPrice(300,\"USD\")}),/*#__PURE__*/_jsx(\"p\",{style:{margin:0,...get(props,\"priceConfigs.comparePrice.font\"),color:get(props,\"priceConfigs.comparePrice.color\"),textDecoration:props.priceConfigs?.comparePrice?.strikethrough?\"line-through\":\"none\",textDecorationColor:props.priceConfigs?.comparePrice?.strikethroughColor,whiteSpace:\"nowrap\",minWidth:0},children:formatCartPrice(400,\"USD\")})]}),shopifyQuantity:\"3\",variants:/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",flexDirection:\"column\",gap:props.variantConfigs?.gap||\"4px\"},children:[/*#__PURE__*/_jsxs(\"p\",{style:{margin:0},children:[/*#__PURE__*/_jsx(\"span\",{style:{...get(props,\"variantConfigs.titleFont\"),color:get(props,\"variantConfigs.titleColor\"),marginRight:\"5px\"},children:\"Color:\"}),/*#__PURE__*/_jsx(\"span\",{style:{...get(props,\"variantConfigs.valueFont\"),color:get(props,\"variantConfigs.valueColor\")},children:\"Black\"})]}),/*#__PURE__*/_jsxs(\"p\",{style:{margin:0},children:[/*#__PURE__*/_jsx(\"span\",{style:{...get(props,\"variantConfigs.titleFont\"),color:get(props,\"variantConfigs.titleColor\"),marginRight:\"5px\"},children:\"Size:\"}),/*#__PURE__*/_jsx(\"span\",{style:{...get(props,\"variantConfigs.valueFont\"),color:get(props,\"variantConfigs.valueColor\")},children:\"Medium\"})]})]}),onRemove:()=>{},onAddQuantity:()=>{},onSubtractQuantity:()=>{}}),props.spacingConfigs?.dividerVisible&&/*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",borderTop:`${props.spacingConfigs?.divider?.borderWidth||1}px ${props.spacingConfigs?.divider?.borderStyle||\"solid\"} ${props.spacingConfigs?.divider?.borderColor||\"rgba(0,0,0,0.08)\"}`}}),/*#__PURE__*/_jsx(ShopXCartProductCard,{imageVisibility:props.imageConfigs?.visible,image:props.imageConfigs?.visible?\"https://framerusercontent.com/images/3E7u1YOHRQaZuBdfYRsm3XCzxk.jpg\":null,imageConfigs:props.imageConfigs,quantityConfigs:props.quantityConfigs,removeIconConfigs:props.removeIconConfigs,containerConfigs:props.containerConfigs,linkConfigs:props.linkConfigs,titleConfigs:props.titleConfigs,_lineItem:{merchandise:{product:{handle:\"example-product\"}}},quantityControlColor:props.quantityConfigs?.buttons?.icons,quantityNumberColor:props.quantityConfigs?.container?.number,quantityContainerBgColor:props.quantityConfigs?.container?.containerBg,quantityControlBgColor:props.quantityConfigs?.buttons?.iconBg,quantityControlHoverColor:props.quantityConfigs?.buttons?.iconBgHover,quantityContainerBorder:\"1px solid #E2E2E2\",quantityContainerRadius:\"8px\",xColor:props.removeIconConfigs?.icon,xBgColor:props.removeIconConfigs?.bg,xBgHoverColor:props.removeIconConfigs?.bgHover,style:{width:\"100%\",border:props.containerConfigs?.border?`${props.containerConfigs.border.borderWidth}px ${props.containerConfigs.border.borderStyle} ${props.containerConfigs.border.borderColor}`:undefined,borderRadius:props.containerConfigs?.radius||\"0px\",background:props.containerConfigs?.background||\"#FFF\",padding:props.containerConfigs?.padding||\"0px\"},shopifyProductTitle:/*#__PURE__*/_jsx(\"p\",{style:{...get(props,\"titleConfigs.font\"),color:get(props,\"titleConfigs.color\"),margin:0},children:\"Product Title 4\"}),shopifyProductPriceAmount:/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",flexDirection:\"column\",alignItems:\"flex-end\",gap:props.priceConfigs?.gap||4},children:[/*#__PURE__*/_jsx(\"p\",{style:{margin:0,...get(props,\"priceConfigs.price.font\"),color:get(props,\"priceConfigs.price.color\"),whiteSpace:\"nowrap\",minWidth:0},children:formatCartPrice(400,\"USD\")}),/*#__PURE__*/_jsx(\"p\",{style:{margin:0,...get(props,\"priceConfigs.comparePrice.font\"),color:get(props,\"priceConfigs.comparePrice.color\"),textDecoration:props.priceConfigs?.comparePrice?.strikethrough?\"line-through\":\"none\",textDecorationColor:props.priceConfigs?.comparePrice?.strikethroughColor,whiteSpace:\"nowrap\",minWidth:0}})]}),shopifyQuantity:\"4\",variants:/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",flexDirection:\"column\",gap:props.variantConfigs?.gap||\"4px\"},children:[/*#__PURE__*/_jsxs(\"p\",{style:{margin:0},children:[/*#__PURE__*/_jsx(\"span\",{style:{...get(props,\"variantConfigs.titleFont\"),color:get(props,\"variantConfigs.titleColor\"),marginRight:\"5px\"},children:\"Size:\"}),/*#__PURE__*/_jsx(\"span\",{style:{...get(props,\"variantConfigs.valueFont\"),color:get(props,\"variantConfigs.valueColor\")},children:\"Medium\"})]}),/*#__PURE__*/_jsx(\"p\",{style:{margin:0,...get(props,\"subscriptionConfigs.font\"),color:get(props,\"subscriptionConfigs.color\")},children:\"Delivers every week\"})]}),onRemove:()=>{},onAddQuantity:()=>{},onSubtractQuantity:()=>{}})]}):cartItems.length===0?/*#__PURE__*/_jsx(\"div\",{style:{position:\"relative\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",minHeight:\"100%\"},children:props.emptyStateComponent}):/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",flexDirection:\"column\",gap:0,width:\"100%\",boxSizing:\"border-box\"},children:[errorVisible&&/*#__PURE__*/_jsx(\"p\",{style:{...get(props,\"errorConfigs.errorFont\"),color:get(props,\"errorConfigs.errorColor\"),textTransform:get(props,\"errorConfigs.textTransform\",\"none\")},children:errorMessage}),cartItems.map(({node:_lineItem},index)=>/*#__PURE__*/_jsxs(_Fragment,{children:[index>0&&props.spacingConfigs?.dividerVisible?/*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",marginTop:props.spacingConfigs?.gap||24,marginBottom:props.spacingConfigs?.gap||24,borderTop:`${props.spacingConfigs?.divider?.borderWidth||1}px ${props.spacingConfigs?.divider?.borderStyle||\"solid\"} ${props.spacingConfigs?.divider?.borderColor||\"rgba(0,0,0,0.08)\"}`}}):index>0&&!props.spacingConfigs?.dividerVisible?/*#__PURE__*/_jsx(\"div\",{style:{marginTop:props.spacingConfigs?.gap||24}}):null,/*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",overflow:\"hidden\",borderRadius:typeof props.containerConfigs?.radius===\"object\"?`${props.containerConfigs.radius.topLeft}px ${props.containerConfigs.radius.topRight}px ${props.containerConfigs.radius.bottomRight}px ${props.containerConfigs.radius.bottomLeft}px`:typeof props.containerConfigs?.radius===\"string\"?props.containerConfigs.radius:`${props.containerConfigs?.radius||0}px`,background:props.containerConfigs?.background||\"#FFF\",border:props.containerConfigs?.border?`${props.containerConfigs.border.borderWidth}px ${props.containerConfigs.border.borderStyle} ${props.containerConfigs.border.borderColor}`:undefined,padding:typeof props.containerConfigs?.padding===\"object\"?`${props.containerConfigs.padding.top}px ${props.containerConfigs.padding.right}px ${props.containerConfigs.padding.bottom}px ${props.containerConfigs.padding.left}px`:props.containerConfigs?.padding||\"0px\",display:\"flex\"},children:/*#__PURE__*/_jsx(ShopXCartProductCard,{imageVisibility:props.imageConfigs?.visible,image:get(_lineItem,\"merchandise.image.url\",null),imageConfigs:props.imageConfigs,quantityConfigs:props.quantityConfigs,removeIconConfigs:props.removeIconConfigs,containerConfigs:{...props.containerConfigs,background:\"transparent\"},linkConfigs:props.linkConfigs,titleConfigs:props.titleConfigs,_lineItem:_lineItem,quantityControlColor:props.quantityConfigs?.buttons?.icons,quantityNumberColor:props.quantityConfigs?.container?.number,quantityContainerBgColor:props.quantityConfigs?.container?.containerBg,quantityControlBgColor:props.quantityConfigs?.buttons?.iconBg,quantityControlHoverColor:props.quantityConfigs?.buttons?.iconBgHover,quantityContainerBorder:\"1px solid #E2E2E2\",quantityContainerRadius:\"8px\",xColor:props.removeIconConfigs?.icon,xBgColor:props.removeIconConfigs?.bg,xBgHoverColor:props.removeIconConfigs?.bgHover,Radius:\"0px\",style:{width:\"100%\",background:\"transparent\",...RenderTarget.current()===RenderTarget.canvas?{padding:typeof props.containerConfigs?.padding===\"object\"?`${props.containerConfigs.padding.top}px ${props.containerConfigs.padding.right}px ${props.containerConfigs.padding.bottom}px ${props.containerConfigs.padding.left}px`:props.containerConfigs?.padding||\"0px\"}:{padding:0}},shopifyProductTitle:/*#__PURE__*/_jsx(\"p\",{style:{...get(props,\"titleConfigs.font\"),color:get(props,\"titleConfigs.color\"),margin:0,textTransform:props.titleConfigs?.textTransform||\"none\"},children:_lineItem.merchandise.product.title}),shopifyProductPriceAmount:/*#__PURE__*/_jsx(\"div\",{style:{display:\"flex\",flexDirection:\"column\",alignItems:\"flex-end\",gap:props.priceConfigs?.gap||4},children:(()=>{if(!_lineItem)return null;// Use cart data for primary information\n const price=_lineItem.cost.subtotalAmount.amount//_lineItem.merchandise.price.amount;\n ;const subscriptionPrice=_lineItem.sellingPlanAllocation?.checkoutChargeAmount?.amount;const currencyCode=_lineItem.cost.subtotalAmount.currencyCode//_lineItem.merchandise.price.currencyCode;\n ;const comparePrice=_lineItem.merchandise.compareAtPrice?.amount;// Supplement with external data\n const variantId=_lineItem.merchandise.id;const variantGid=variantId.split(\"/\").pop();const matchingProduct=window.shopXtools.products.find(({node})=>node.variants.edges.some(edge=>edge.node.id.includes(variantGid)))?.node;const matchingVariant=matchingProduct?.variants?.edges.find(edge=>edge.node.id.includes(variantGid))?.node;// Preserve the log\n // console.log(\n // \"Cart Product Card - Price Data:\",\n // {\n // variantId,\n // variantGid,\n // matchingProduct,\n // matchingVariant,\n // price,\n // currencyCode,\n // comparePrice,\n // variantComparePrice:\n // get(\n // matchingVariant,\n // \"compareAtPrice.amount\"\n // ),\n // productComparePrice:\n // get(\n // matchingProduct,\n // \"compareAtPriceRange.minVariantPrice.amount\"\n // ),\n // lineItem: _lineItem,\n // showCurrencyCode:\n // props.showCurrencyCode,\n // currencyPosition:\n // props.currencyPosition,\n // showCurrencySymbol:\n // props.showCurrencySymbol,\n // }\n // )\n const hasComparePrice=comparePrice&&parseFloat(comparePrice)>parseFloat(price);const finalPrice=_lineItem.sellingPlanAllocation?subscriptionPrice:price||\"0\";return /*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(\"p\",{style:{margin:0,...get(props,hasComparePrice?\"priceConfigs.price.saleFont\":\"priceConfigs.price.font\"),color:hasComparePrice?props.priceConfigs?.price?.saleColor:props.priceConfigs?.price?.color,whiteSpace:\"nowrap\",minWidth:0},children:formatCartPrice(finalPrice,currencyCode)}),hasComparePrice&&/*#__PURE__*/_jsx(\"p\",{style:{margin:0,...get(props,\"priceConfigs.comparePrice.font\"),color:get(props,\"priceConfigs.comparePrice.color\"),textDecoration:\"line-through\",textDecorationColor:props.priceConfigs?.comparePrice?.strikethroughColor,whiteSpace:\"nowrap\",minWidth:0},children:formatCartPrice(comparePrice,currencyCode)})]});})()}),shopifyQuantity:`${_lineItem.quantity||1}`,variants:/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",flexDirection:\"column\",gap:props.variantConfigs?.gap||\"4px\"},children:[_lineItem.merchandise.selectedOptions.filter(option=>option.name!==\"Title\").map((option,index)=>/*#__PURE__*/_jsxs(\"p\",{style:{margin:0},children:[/*#__PURE__*/_jsxs(\"span\",{style:{...get(props,\"variantConfigs.titleFont\"),color:get(props,\"variantConfigs.titleColor\"),marginRight:\"5px\",textTransform:get(props,\"variantConfigs.titleTransform\",\"none\")},children:[option.name,\":\"]}),/*#__PURE__*/_jsx(\"span\",{style:{...get(props,\"variantConfigs.valueFont\"),color:get(props,\"variantConfigs.valueColor\"),textTransform:get(props,\"variantConfigs.valueTransform\",\"none\")},children:option.value})]},`variant-${option.name}-${index}`)),_lineItem.attributes?.map((attr,index)=>/*#__PURE__*/_jsxs(\"p\",{style:{margin:0},children:[/*#__PURE__*/_jsxs(\"span\",{style:{...props.attributeConfigs?.uniqueFormatting?get(props,\"attributeConfigs.titleFont\"):get(props,\"variantConfigs.titleFont\"),color:props.attributeConfigs?.uniqueFormatting?get(props,\"attributeConfigs.titleColor\"):get(props,\"variantConfigs.titleColor\"),marginRight:\"5px\",textTransform:props.attributeConfigs?.uniqueFormatting?get(props,\"attributeConfigs.titleTransform\",\"none\"):get(props,\"variantConfigs.titleTransform\",\"none\")},children:[attr.key,\":\"]}),/*#__PURE__*/_jsx(\"span\",{style:{...props.attributeConfigs?.uniqueFormatting?get(props,\"attributeConfigs.valueFont\"):get(props,\"variantConfigs.valueFont\"),color:props.attributeConfigs?.uniqueFormatting?get(props,\"attributeConfigs.valueColor\"):get(props,\"variantConfigs.valueColor\"),textTransform:props.attributeConfigs?.uniqueFormatting?get(props,\"attributeConfigs.valueTransform\",\"none\"):get(props,\"variantConfigs.valueTransform\",\"none\")},children:attr.value})]},`attr-${attr.key}-${index}`)),_lineItem.sellingPlanAllocation?.sellingPlan?.name&&/*#__PURE__*/_jsx(\"p\",{style:{margin:0,...get(props,\"subscriptionConfigs.font\"),color:get(props,\"subscriptionConfigs.color\"),textTransform:get(props,\"subscriptionConfigs.textTransform\",\"none\")},children:_lineItem.sellingPlanAllocation.sellingPlan.name})]}),onRemove:()=>handleRemoveLine(cart.id,_lineItem.id),onAddQuantity:()=>handleUpdateLine(cart.id,_lineItem.id,_lineItem.quantity+1,_lineItem),onSubtractQuantity:()=>handleUpdateLine(cart.id,_lineItem.id,_lineItem.quantity-1,_lineItem)})},_lineItem.id)]}))]})});}FC_CartProductCard.defaultProps={containerConfigs:{background:\"transparent\",radius:0,padding:0,insidePadding:0,gap:8,border:{borderWidth:0,borderStyle:\"solid\",borderColor:\"transparent\"}},linkConfigs:{enabled:false,slugPath:\"\"},imageConfigs:{visible:true,type:\"Fill\",width:104,radius:8,background:\"#F5F5F5\",border:{borderWidth:0,borderStyle:\"solid\",borderColor:\"transparent\"},ratio:\"1:1\",hover:\"None\",zoomScale:1.05,opacity:.75},titleConfigs:{font:{family:\"Inter\",size:14,weight:500},color:\"#000000\",hoverColor:\"#000000\"},variantConfigs:{gap:4,titleFont:{family:\"Inter\",size:14,weight:500},titleColor:\"#000000\",valueFont:{family:\"Inter\",size:14,weight:400},valueColor:\"#666666\"},subscriptionConfigs:{font:{family:\"Inter\",size:14,weight:400},color:\"#4A5B89\"},quantityConfigs:{type:ControlType.Object,title:\"Quantity\",controls:{container:{type:ControlType.Object,title:\"Container\",controls:{number:{type:ControlType.Color,defaultValue:\"#000\",title:\"Number\"},containerBg:{type:ControlType.Color,defaultValue:\"transparent\",title:\"BG\"},padding:{type:ControlType.Padding,title:\"Padding\",defaultValue:\"4px\"},containerRadius:{type:ControlType.BorderRadius,title:\"Radius\",defaultValue:\"4px\"},containerBorder:{type:ControlType.Border,title:\"Border\",defaultValue:{borderWidth:1,borderStyle:\"solid\",borderColor:\"#E2E2E2\"}}}},buttons:{type:ControlType.Object,title:\"Buttons\",controls:{iconType:{type:ControlType.SegmentedEnum,title:\"Icon\",options:[\"Default\",\"Custom\"],optionTitles:[\"Default\",\"Custom\"],defaultValue:\"Default\"},iconWeight:{type:ControlType.Number,title:\"Weight\",defaultValue:2,min:.5,max:5,step:.1,displayStepper:true,hidden:({iconType})=>iconType!==\"Default\"},customPlusIcon:{type:ControlType.Image,title:\"Plus\",hidden:({iconType})=>iconType!==\"Custom\"},customMinusIcon:{type:ControlType.Image,title:\"Minus\",hidden:({iconType})=>iconType!==\"Custom\"},icons:{type:ControlType.Color,defaultValue:\"#000\",title:\"Icons\"},iconSize:{type:ControlType.Number,title:\"Icon Size\",defaultValue:8,min:4,max:32,unit:\"px\",step:1,displayStepper:true},padding:{type:ControlType.Padding,title:\"Padding\",defaultValue:\"4px\"},iconBg:{type:ControlType.Color,defaultValue:\"#FFFFFF\",title:\"BG\"},iconBgHover:{type:ControlType.Color,defaultValue:\"#F5F5F5\",title:\"BG Hover\"},radius:{type:ControlType.BorderRadius,title:\"Radius\",defaultValue:\"4px\"},border:{type:ControlType.Border,title:\"Border\",defaultValue:{borderWidth:0,borderStyle:\"solid\",borderColor:\"transparent\"}}}}}},priceConfigs:{gap:4,price:{font:{family:\"Inter\",size:14,weight:500},color:\"#000000\",saleFont:{family:\"Inter\",size:14,weight:500},saleColor:\"#000000\"},comparePrice:{font:{family:\"Inter\",size:14,weight:400},color:\"#8B0000\",strikethrough:true,strikethroughColor:\"#8B0000\"},format:{showSymbol:true,showCurrency:false,showDecimals:\"Always show\",currencyCode:\"USD\"},// Keep for backward compatibility\nshowCurrencyCode:false,showSymbol:true},removeIconConfigs:{type:ControlType.Object,title:\"Remove Icon\",controls:{position:{type:ControlType.Enum,title:\"Position\",options:[\"Top\",\"Bottom\"],defaultValue:\"Bottom\"},iconType:{type:ControlType.SegmentedEnum,title:\"Icon\",options:[\"Default\",\"Custom\"],optionTitles:[\"Default\",\"Custom\"],defaultValue:\"Default\"},iconWeight:{type:ControlType.Number,title:\"Weight\",defaultValue:2,min:.5,max:5,step:.1,displayStepper:true,hidden:({iconType})=>iconType!==\"Default\"},customImage:{type:ControlType.Image,title:\"Image\",hidden:({iconType})=>iconType!==\"Custom\"},icon:{type:ControlType.Color,defaultValue:\"#000000\",title:\"Icon\",hidden:({iconType})=>iconType===\"Custom\"},iconSize:{type:ControlType.Number,title:\"Icon Size\",defaultValue:8,min:4,max:32,unit:\"px\",step:1,displayStepper:true},bg:{type:ControlType.Color,defaultValue:\"#F5F5F5\",title:\"BG\"},bgHover:{type:ControlType.Color,defaultValue:\"#EBEBEB\",title:\"BG Hover\"},radius:{type:ControlType.BorderRadius,title:\"Radius\",defaultValue:\"80px\"},border:{type:ControlType.Border,title:\"Border\",defaultValue:{borderWidth:0,borderStyle:\"solid\",borderColor:\"transparent\"}}}}};addPropertyControls(FC_CartProductCard,{linkConfigs:{type:ControlType.Object,title:\"Link\",controls:{enabled:{type:ControlType.Boolean,title:\"Link\",defaultValue:false,enabledTitle:\"Yes\",disabledTitle:\"No\"},slugPath:{type:ControlType.String,title:\"Path\",defaultValue:\"\",placeholder:\"shop/\",description:\"The path between your domain and slug. [Learn more](https://framercommerce.com/resources/docs/components/cart#cart-product-card)\",hidden:({enabled})=>!enabled}}},imageConfigs:{type:ControlType.Object,title:\"Image\",controls:{visible:{type:ControlType.Boolean,title:\"Image\",defaultValue:true,enabledTitle:\"Show\",disabledTitle:\"Hide\"},type:{type:ControlType.SegmentedEnum,title:\"Type\",options:[\"Fill\",\"Fit\"],defaultValue:\"Fill\",optionTitles:[\"Fill\",\"Fit\"],hidden:({visible})=>!visible},width:{type:ControlType.Number,title:\"Width\",defaultValue:112,min:0,max:500,unit:\"px\",step:8,displayStepper:true,hidden:({visible})=>!visible},radius:{type:ControlType.BorderRadius,title:\"Radius\",defaultValue:\"4px\",hidden:({visible})=>!visible},background:{type:ControlType.Color,title:\"BG\",defaultValue:\"#F2F2F2\",hidden:({visible})=>!visible},border:{type:ControlType.Border,title:\"Border\",defaultValue:{borderWidth:0,borderStyle:\"solid\",borderColor:\"rgba(0,0,0,0)\"},hidden:({visible})=>!visible},ratio:{type:ControlType.Enum,title:\"Ratio\",options:[\"1:1\",\"3:2\",\"4:5\"],defaultValue:\"1:1\",hidden:({visible})=>!visible},hover:{type:ControlType.Enum,title:\"Hover Type\",options:[\"None\",\"Zoom\",\"Opacity\"],defaultValue:\"None\",hidden:({visible})=>!visible},zoomScale:{type:ControlType.Number,title:\"Zoom Scale\",defaultValue:1.05,min:1,max:3,step:.05,displayStepper:true,hidden:({hover})=>hover!==\"Zoom\"},opacity:{type:ControlType.Number,title:\"Opacity\",defaultValue:.75,min:0,max:1,step:.05,hidden:({hover})=>hover!==\"Opacity\"}}},titleConfigs:{type:ControlType.Object,title:\"Title\",controls:{font:{type:ControlType.Font,controls:\"extended\",title:\"Font\"},color:{type:ControlType.Color,defaultValue:\"#000\",title:\"Color\"},hoverColor:{type:ControlType.Color,defaultValue:\"#000\",title:\"Hover\"},textTransform:{type:ControlType.Enum,title:\"Transform\",options:[\"None\",\"Uppercase\",\"Lowercase\",\"Capitalize\"],defaultValue:\"none\"}}},variantConfigs:{type:ControlType.Object,title:\"Variants\",controls:{titleFont:{type:ControlType.Font,controls:\"extended\",title:\"Title Font\"},titleColor:{type:ControlType.Color,defaultValue:\"#000\",title:\"Title Color\"},titleTransform:{type:ControlType.Enum,title:\"Transform\",options:[\"None\",\"Uppercase\",\"Lowercase\",\"Capitalize\"],defaultValue:\"none\"},valueFont:{type:ControlType.Font,controls:\"extended\",title:\"Value Font\"},valueColor:{type:ControlType.Color,defaultValue:\"#000\",title:\"Value Color\"},valueTransform:{type:ControlType.Enum,title:\"Transform\",options:[\"None\",\"Uppercase\",\"Lowercase\",\"Capitalize\"],defaultValue:\"none\"},gap:{type:ControlType.Number,title:\"Gap\",defaultValue:4,min:0,max:100,unit:\"px\",step:1}}},attributeConfigs:{type:ControlType.Object,title:\"Attributes\",controls:{uniqueFormatting:{type:ControlType.Boolean,title:\"Customize\",defaultValue:false,enabledTitle:\"Yes\",disabledTitle:\"No\",description:\"By default, attributes use same styling as Variants.\"},titleFont:{type:ControlType.Font,controls:\"extended\",title:\"Title Font\",hidden:({uniqueFormatting})=>!uniqueFormatting},titleColor:{type:ControlType.Color,defaultValue:\"#000\",title:\"Title Color\",hidden:({uniqueFormatting})=>!uniqueFormatting},titleTransform:{type:ControlType.Enum,title:\"Transform\",options:[\"None\",\"Uppercase\",\"Lowercase\",\"Capitalize\"],defaultValue:\"none\",hidden:({uniqueFormatting})=>!uniqueFormatting},valueFont:{type:ControlType.Font,controls:\"extended\",title:\"Value Font\",hidden:({uniqueFormatting})=>!uniqueFormatting},valueColor:{type:ControlType.Color,defaultValue:\"#000\",title:\"Value Color\",hidden:({uniqueFormatting})=>!uniqueFormatting},valueTransform:{type:ControlType.Enum,title:\"Transform\",options:[\"None\",\"Uppercase\",\"Lowercase\",\"Capitalize\"],defaultValue:\"none\",hidden:({uniqueFormatting})=>!uniqueFormatting},gap:{type:ControlType.Number,title:\"Gap\",defaultValue:4,min:0,max:100,unit:\"px\",step:1,hidden:props=>!props.attributeConfigs?.uniqueFormatting}}},subscriptionConfigs:{type:ControlType.Object,title:\"Subscription\",controls:{font:{type:ControlType.Font,controls:\"extended\",title:\"Font\"},color:{type:ControlType.Color,defaultValue:\"#000\",title:\"Color\"},textTransform:{type:ControlType.Enum,title:\"Transform\",options:[\"None\",\"Uppercase\",\"Lowercase\",\"Capitalize\"],defaultValue:\"none\"}}},quantityConfigs:{type:ControlType.Object,title:\"Quantity\",controls:{container:{type:ControlType.Object,title:\"Container\",controls:{number:{type:ControlType.Color,defaultValue:\"#000\",title:\"Number\"},containerBg:{type:ControlType.Color,defaultValue:\"transparent\",title:\"BG\"},padding:{type:ControlType.Padding,title:\"Padding\",defaultValue:\"4px\"},containerRadius:{type:ControlType.BorderRadius,title:\"Radius\",defaultValue:\"4px\"},containerBorder:{type:ControlType.Border,title:\"Border\",defaultValue:{borderWidth:1,borderStyle:\"solid\",borderColor:\"#E2E2E2\"}}}},buttons:{type:ControlType.Object,title:\"Buttons\",controls:{iconType:{type:ControlType.SegmentedEnum,title:\"Icon\",options:[\"Default\",\"Custom\"],optionTitles:[\"Default\",\"Custom\"],defaultValue:\"Default\"},iconWeight:{type:ControlType.Number,title:\"Weight\",defaultValue:2,min:.5,max:5,step:.1,displayStepper:true,hidden:({iconType})=>iconType!==\"Default\"},customPlusIcon:{type:ControlType.Image,title:\"Plus\",hidden:({iconType})=>iconType!==\"Custom\"},customMinusIcon:{type:ControlType.Image,title:\"Minus\",hidden:({iconType})=>iconType!==\"Custom\"},icons:{type:ControlType.Color,defaultValue:\"#000\",title:\"Icons\"},iconSize:{type:ControlType.Number,title:\"Icon Size\",defaultValue:8,min:4,max:32,unit:\"px\",step:1,displayStepper:true},padding:{type:ControlType.Padding,title:\"Padding\",defaultValue:\"4px\"},iconBg:{type:ControlType.Color,defaultValue:\"#FFFFFF\",title:\"BG\"},iconBgHover:{type:ControlType.Color,defaultValue:\"#F5F5F5\",title:\"BG Hover\"},radius:{type:ControlType.BorderRadius,title:\"Radius\",defaultValue:\"4px\"},border:{type:ControlType.Border,title:\"Border\",defaultValue:{borderWidth:0,borderStyle:\"solid\",borderColor:\"transparent\"}}}}}},priceConfigs:{type:ControlType.Object,title:\"Price\",controls:{gap:{type:ControlType.Number,title:\"Gap\",defaultValue:4,min:0,max:40,unit:\"px\",step:1},price:{type:ControlType.Object,title:\"Price\",controls:{font:{type:ControlType.Font,controls:\"extended\",title:\"Regular Font\"},color:{type:ControlType.Color,defaultValue:\"#000\",title:\"Regular Color\"},saleFont:{type:ControlType.Font,controls:\"extended\",title:\"Sale Font\"},saleColor:{type:ControlType.Color,defaultValue:\"#FF0000\",title:\"Sale Color\"}}},comparePrice:{type:ControlType.Object,title:\"Compare Price\",controls:{font:{type:ControlType.Font,controls:\"extended\",title:\"Font\"},color:{type:ControlType.Color,defaultValue:\"#000\",title:\"Color\"},strikethrough:{type:ControlType.Boolean,title:\"Strike\",defaultValue:true,enabledTitle:\"Yes\",disabledTitle:\"No\"},strikethroughColor:{type:ControlType.Color,title:\"Strike Color\",defaultValue:\"#000000\",hidden:({strikethrough})=>!strikethrough}}},format:{type:ControlType.Object,title:\"Format\",controls:{showSymbol:{type:ControlType.Boolean,title:\"Symbol\",defaultValue:true,enabledTitle:\"Show\",disabledTitle:\"Hide\",description:\"$, \\xa3, €, etc.\"},showCurrency:{type:ControlType.Boolean,title:\"Code\",defaultValue:false,enabledTitle:\"Show\",disabledTitle:\"Hide\",description:\"USD, EUR, CHF, etc.\"},showDecimals:{type:ControlType.Enum,title:\"Decimals\",defaultValue:\"Always show\",options:[\"Always show\",\"Never show\",\"Hide when .00\"],optionTitles:[\"Always show\",\"Never show\",\"Hide when .00\"],displaySegmentedControl:true,segmentedControlDirection:\"vertical\"},currencyCode:{type:ControlType.Enum,title:\"Preview\",defaultValue:\"USD\",options:[\"USD\",\"EUR\",\"GBP\",\"CHF\",\"JPY\",\"CAD\",\"AUD\",\"CNY\",\"HKD\",\"NZD\",\"SEK\",\"KRW\",\"SGD\",\"NOK\",\"MXN\",\"INR\",\"RUB\",\"ZAR\",\"TRY\",\"BRL\",\"TWD\",\"DKK\",\"PLN\",\"THB\",\"IDR\",\"HUF\",\"CZK\",\"ILS\",\"CLP\",\"PHP\",\"AED\",\"COP\",\"SAR\",\"MYR\",\"RON\"],description:\"Currency is for canvas preview only.\"}}}}},errorConfigs:{type:ControlType.Object,title:\"Errors\",controls:{errorFont:{type:ControlType.Font,controls:\"extended\",title:\"Error Font\"},errorColor:{type:ControlType.Color,defaultValue:\"#000\",title:\"Error Color\"},textTransform:{type:ControlType.Enum,title:\"Transform\",options:[\"None\",\"Uppercase\",\"Lowercase\",\"Capitalize\"],defaultValue:\"none\"}}},removeIconConfigs:{type:ControlType.Object,title:\"Remove Icon\",controls:{position:{type:ControlType.Enum,title:\"Position\",options:[\"Top\",\"Bottom\"],defaultValue:\"Bottom\"},iconType:{type:ControlType.SegmentedEnum,title:\"Icon\",options:[\"Default\",\"Custom\"],optionTitles:[\"Default\",\"Custom\"],defaultValue:\"Default\"},iconWeight:{type:ControlType.Number,title:\"Weight\",defaultValue:2,min:.5,max:5,step:.1,displayStepper:true,hidden:({iconType})=>iconType!==\"Default\"},customImage:{type:ControlType.Image,title:\"Image\",hidden:({iconType})=>iconType!==\"Custom\"},icon:{type:ControlType.Color,defaultValue:\"#000000\",title:\"Icon\",hidden:({iconType})=>iconType===\"Custom\"},iconSize:{type:ControlType.Number,title:\"Icon Size\",defaultValue:8,min:4,max:32,unit:\"px\",step:1,displayStepper:true},bg:{type:ControlType.Color,defaultValue:\"#F5F5F5\",title:\"BG\"},bgHover:{type:ControlType.Color,defaultValue:\"#EBEBEB\",title:\"BG Hover\"},radius:{type:ControlType.BorderRadius,title:\"Radius\",defaultValue:\"80px\"},border:{type:ControlType.Border,title:\"Border\",defaultValue:{borderWidth:0,borderStyle:\"solid\",borderColor:\"transparent\"}}}},containerConfigs:{type:ControlType.Object,title:\"Container\",controls:{background:{type:ControlType.Color,title:\"BG\",defaultValue:\"transparent\"},radius:{type:ControlType.BorderRadius,title:\"Radius\",defaultValue:\"0px\"},padding:{type:ControlType.Padding,title:\"Outside Padding\",defaultValue:\"0px\"},insidePadding:{type:ControlType.Padding,title:\"Inside Padding\",defaultValue:\"0px\"},gap:{type:ControlType.Number,title:\"Content Gap\",defaultValue:4,min:0,max:100,unit:\"px\",step:1},imageGap:{type:ControlType.Number,title:\"Image Gap\",defaultValue:16,min:0,max:100,unit:\"px\",step:1},border:{type:ControlType.Border,title:\"Border\"}}},spacingConfigs:{type:ControlType.Object,title:\"Spacing\",controls:{dividerVisible:{type:ControlType.Boolean,title:\"Divider\",defaultValue:true,enabledTitle:\"Yes\",disabledTitle:\"No\"},divider:{type:ControlType.Border,title:\"Style\",defaultValue:{borderWidth:1,borderStyle:\"solid\",borderColor:\"rgba(0,0,0,0.08)\"},hidden:({dividerVisible})=>!dividerVisible},gap:{type:ControlType.Number,title:\"Gap\",defaultValue:24,min:0,max:100,unit:\"px\",step:1}}}});function ShopXCartProductCard({imageVisibility,image,quantityControlColor,quantityNumberColor,quantityContainerBgColor,quantityControlBgColor,quantityControlHoverColor,xColor,xBgColor,xBgHoverColor,shopifyProductTitle,shopifyProductPriceAmount,shopifyQuantity,variants,style={},onRemove,onAddQuantity,onSubtractQuantity,imageConfigs,quantityConfigs,removeIconConfigs,containerConfigs,linkConfigs,titleConfigs,_lineItem,quantityContainerBorder=\"1px solid #E2E2E2\",quantityContainerRadius=\"8px\",Radius}){const[isHovered,setIsHovered]=useState(false);const handleMouseEnter=e=>{// Only set hover if not clicking quantity or remove buttons\nif(!e.target.closest(\"button\")){setIsHovered(true);}};const handleMouseLeave=()=>{setIsHovered(false);};// Construct product URL if linking is enabled\nconst productUrl=linkConfigs?.enabled&&_lineItem?.merchandise?.product?.handle?`${window.location.origin}/${linkConfigs.slugPath||\"\"}${_lineItem.merchandise.product.handle}`:null;const imageHeight=imageConfigs?.ratio===\"4:5\"?(imageConfigs?.width||112)*1.25:imageConfigs?.ratio===\"3:2\"?(imageConfigs?.width||112)*(2/3):imageConfigs?.width||112;const imageBorderStyle=imageConfigs?.border?.borderStyle||\"solid\";const imageBorderWidth=imageConfigs?.border?.borderWidth||0;const imageBorderColor=imageConfigs?.border?.borderColor||\"transparent\";const imageRadius=typeof imageConfigs?.radius===\"object\"?`${imageConfigs.radius.topLeft}px ${imageConfigs.radius.topRight}px ${imageConfigs.radius.bottomRight}px ${imageConfigs.radius.bottomLeft}px`:`${imageConfigs?.radius||4}px`;const XIcon=({size=8,weight})=>/*#__PURE__*/_jsxs(\"svg\",{width:size,height:size,viewBox:\"0 0 16 16\",fill:\"none\",xmlns:\"http://www.w3.org/2000/svg\",style:{display:\"block\"},children:[/*#__PURE__*/_jsx(\"line\",{x1:\"2\",y1:\"2\",x2:\"14\",y2:\"14\",stroke:\"currentColor\",strokeWidth:weight,strokeLinecap:\"round\"}),/*#__PURE__*/_jsx(\"line\",{x1:\"2\",y1:\"14\",x2:\"14\",y2:\"2\",stroke:\"currentColor\",strokeWidth:weight,strokeLinecap:\"round\"})]});const removeButton=/*#__PURE__*/_jsx(\"button\",{onClick:onRemove,style:{border:removeIconConfigs?.border?`${removeIconConfigs.border.borderWidth}px ${removeIconConfigs.border.borderStyle} ${removeIconConfigs.border.borderColor}`:\"none\",background:removeIconConfigs?.bg||\"#F5F5F5\",color:removeIconConfigs?.icon||\"#000000\",cursor:\"pointer\",padding:\"4px\",borderRadius:typeof removeIconConfigs?.radius===\"object\"?`${removeIconConfigs.radius.topLeft}px ${removeIconConfigs.radius.topRight}px ${removeIconConfigs.radius.bottomRight}px ${removeIconConfigs.radius.bottomLeft}px`:typeof removeIconConfigs?.radius===\"string\"?removeIconConfigs.radius:\"80px\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",flexShrink:0,width:\"24px\",height:\"24px\"},onMouseEnter:e=>e.currentTarget.style.background=removeIconConfigs?.bgHover||\"#EBEBEB\",onMouseLeave:e=>e.currentTarget.style.background=removeIconConfigs?.bg||\"#F5F5F5\",children:removeIconConfigs?.iconType===\"Custom\"?/*#__PURE__*/_jsx(\"img\",{src:removeIconConfigs?.customImage,alt:\"Remove\",style:{width:removeIconConfigs?.iconSize,height:removeIconConfigs?.iconSize}}):/*#__PURE__*/_jsx(XIcon,{size:removeIconConfigs?.iconSize||8,weight:removeIconConfigs?.iconWeight||2})});const containerStyle={display:\"flex\",alignItems:\"stretch\",width:\"100%\",boxSizing:\"border-box\",overflow:\"hidden\",cursor:productUrl?\"pointer\":\"default\",borderRadius:typeof containerConfigs?.radius===\"object\"?`${containerConfigs.radius.topLeft}px ${containerConfigs.radius.topRight}px ${containerConfigs.radius.bottomRight}px ${containerConfigs.radius.bottomLeft}px`:`${containerConfigs?.radius||0}px`,border:containerConfigs?.border?`${containerConfigs.border.borderWidth}px ${containerConfigs.border.borderStyle} ${containerConfigs.border.borderColor}`:undefined,padding:typeof containerConfigs?.padding===\"object\"?`${containerConfigs.padding.top}px ${containerConfigs.padding.right}px ${containerConfigs.padding.bottom}px ${containerConfigs.padding.left}px`:containerConfigs?.padding||\"0px\",background:\"transparent\",...style};const contentStyle={display:\"flex\",gap:containerConfigs?.imageGap??0,flex:1,minWidth:0,padding:containerConfigs?.insidePadding||\"0px\"};const imageStyle={position:\"relative\",width:imageConfigs?.width||112,height:imageHeight,flexShrink:0,background:imageConfigs?.background||\"#F2F2F2\",borderRadius:imageConfigs?.radius||\"4px\",border:`${imageBorderWidth}px ${imageBorderStyle} ${imageBorderColor}`,overflow:\"hidden\"};const imageInnerStyle={width:\"100%\",height:\"100%\",objectFit:imageConfigs?.type===\"Fit\"?\"contain\":\"cover\",transition:\"transform 0.3s ease, opacity 0.3s ease\",...isHovered&&imageConfigs?.hover===\"Zoom\"&&{transform:`scale(${imageConfigs.zoomScale})`},...isHovered&&imageConfigs?.hover===\"Opacity\"&&{opacity:imageConfigs.opacity}};const titleStyle={...titleConfigs?.font||{},color:isHovered?titleConfigs?.hoverColor:titleConfigs?.color,margin:0,transition:\"color 0.3s ease\",textTransform:titleConfigs?.textTransform||\"none\"};const handleClick=e=>{// Only navigate if not clicking quantity or remove buttons\nif(productUrl&&!e.target.closest(\"button\")){window.location.href=productUrl;}};return /*#__PURE__*/_jsx(\"div\",{style:containerStyle,onMouseEnter:handleMouseEnter,onMouseLeave:handleMouseLeave,onClick:handleClick,children:/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",gap:containerConfigs?.imageGap??0,flex:1,minWidth:0},children:[imageVisibility&&image&&/*#__PURE__*/_jsx(\"div\",{style:imageStyle,children:/*#__PURE__*/_jsx(\"img\",{src:image,style:imageInnerStyle,onError:e=>{e.currentTarget.style.display=\"none\";}})}),/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",flexDirection:\"column\",flex:1,minWidth:0,gap:containerConfigs?.gap??0,padding:containerConfigs?.insidePadding||\"0px\"},children:[/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",justifyContent:\"space-between\",alignItems:\"flex-start\",width:\"100%\",gap:\"16px\"},children:[/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",flexDirection:\"column\",gap:containerConfigs?.gap??0,flex:1,minWidth:0},children:[/*#__PURE__*/_jsx(\"div\",{style:titleStyle,children:typeof shopifyProductTitle===\"string\"?shopifyProductTitle:/*#__PURE__*/React.cloneElement(shopifyProductTitle,{style:titleStyle})}),variants]}),removeIconConfigs?.position===\"Top\"?removeButton:shopifyProductPriceAmount]}),/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",alignItems:\"center\",justifyContent:\"space-between\",gap:\"16px\",marginTop:\"auto\"},children:[/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",alignItems:\"center\",backgroundColor:quantityConfigs?.container?.containerBg||\"transparent\",borderRadius:typeof quantityConfigs?.container?.containerRadius===\"object\"?`${quantityConfigs.container.containerRadius.topLeft}px ${quantityConfigs.container.containerRadius.topRight}px ${quantityConfigs.container.containerRadius.bottomRight}px ${quantityConfigs.container.containerRadius.bottomLeft}px`:typeof quantityConfigs?.container?.containerRadius===\"string\"?quantityConfigs.container.containerRadius:\"8px\",padding:quantityConfigs?.container?.padding||\"4px\",border:quantityConfigs?.container?.containerBorder?`${quantityConfigs.container.containerBorder.borderWidth}px ${quantityConfigs.container.containerBorder.borderStyle} ${quantityConfigs.container.containerBorder.borderColor}`:\"1px solid #E2E2E2\",flexShrink:0},children:[/*#__PURE__*/_jsx(\"button\",{onClick:onSubtractQuantity,style:{border:quantityConfigs?.buttons?.border?`${quantityConfigs.buttons.border.borderWidth}px ${quantityConfigs.buttons.border.borderStyle} ${quantityConfigs.buttons.border.borderColor}`:\"none\",background:quantityConfigs?.buttons?.iconBg||\"#F5F5F5\",color:quantityConfigs?.buttons?.icons||\"#000000\",cursor:\"pointer\",padding:quantityConfigs?.buttons?.padding||\"4px 8px\",borderRadius:typeof quantityConfigs?.buttons?.radius===\"object\"?`${quantityConfigs.buttons.radius.topLeft}px ${quantityConfigs.buttons.radius.topRight}px ${quantityConfigs.buttons.radius.bottomRight}px ${quantityConfigs.buttons.radius.bottomLeft}px`:typeof quantityConfigs?.buttons?.radius===\"string\"?quantityConfigs.buttons.radius:\"4px\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\"},onMouseEnter:e=>{e.currentTarget.style.background=quantityConfigs?.buttons?.iconBgHover||\"#EBEBEB\";},onMouseLeave:e=>{e.currentTarget.style.background=quantityConfigs?.buttons?.iconBg||\"#F5F5F5\";},children:quantityConfigs?.buttons?.iconType===\"Custom\"?/*#__PURE__*/_jsx(\"img\",{src:quantityConfigs.buttons.customMinusIcon,alt:\"Minus\",style:{width:quantityConfigs.buttons.iconSize||8,height:quantityConfigs.buttons.iconSize||8}}):/*#__PURE__*/_jsx(MinusIcon,{size:quantityConfigs?.buttons?.iconSize||8,weight:quantityConfigs?.buttons?.iconWeight||2})}),/*#__PURE__*/_jsx(\"span\",{style:{margin:\"0 8px\",color:quantityConfigs?.container?.number||\"#000000\"},children:shopifyQuantity}),/*#__PURE__*/_jsx(\"button\",{onClick:onAddQuantity,style:{border:quantityConfigs?.buttons?.border?`${quantityConfigs.buttons.border.borderWidth}px ${quantityConfigs.buttons.border.borderStyle} ${quantityConfigs.buttons.border.borderColor}`:\"none\",background:quantityConfigs?.buttons?.iconBg||\"#F5F5F5\",color:quantityConfigs?.buttons?.icons||\"#000000\",cursor:\"pointer\",padding:quantityConfigs?.buttons?.padding||\"4px 8px\",borderRadius:typeof quantityConfigs?.buttons?.radius===\"object\"?`${quantityConfigs.buttons.radius.topLeft}px ${quantityConfigs.buttons.radius.topRight}px ${quantityConfigs.buttons.radius.bottomRight}px ${quantityConfigs.buttons.radius.bottomLeft}px`:typeof quantityConfigs?.buttons?.radius===\"string\"?quantityConfigs.buttons.radius:\"4px\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\"},onMouseEnter:e=>{e.currentTarget.style.background=quantityConfigs?.buttons?.iconBgHover||\"#EBEBEB\";},onMouseLeave:e=>{e.currentTarget.style.background=quantityConfigs?.buttons?.iconBg||\"#F5F5F5\";},children:quantityConfigs?.buttons?.iconType===\"Custom\"?/*#__PURE__*/_jsx(\"img\",{src:quantityConfigs.buttons.customPlusIcon,alt:\"Plus\",style:{width:quantityConfigs.buttons.iconSize||8,height:quantityConfigs.buttons.iconSize||8}}):/*#__PURE__*/_jsx(PlusIcon,{size:quantityConfigs?.buttons?.iconSize||8,weight:quantityConfigs?.buttons?.iconWeight||2})})]}),removeIconConfigs?.position===\"Bottom\"?removeButton:shopifyProductPriceAmount]})]})]})});}const MinusIcon=({size=8,weight})=>/*#__PURE__*/_jsx(\"svg\",{width:size,height:size,viewBox:\"0 0 16 16\",fill:\"none\",xmlns:\"http://www.w3.org/2000/svg\",style:{display:\"block\"},children:/*#__PURE__*/_jsx(\"line\",{x1:\"2\",y1:\"8\",x2:\"14\",y2:\"8\",stroke:\"currentColor\",strokeWidth:weight,strokeLinecap:\"round\"})});const PlusIcon=({size=8,weight})=>/*#__PURE__*/_jsxs(\"svg\",{width:size,height:size,viewBox:\"0 0 16 16\",fill:\"none\",xmlns:\"http://www.w3.org/2000/svg\",style:{display:\"block\"},children:[/*#__PURE__*/_jsx(\"line\",{x1:\"8\",y1:\"2\",x2:\"8\",y2:\"14\",stroke:\"currentColor\",strokeWidth:weight,strokeLinecap:\"round\"}),/*#__PURE__*/_jsx(\"line\",{x1:\"2\",y1:\"8\",x2:\"14\",y2:\"8\",stroke:\"currentColor\",strokeWidth:weight,strokeLinecap:\"round\"})]});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"FC_CartProductCard\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerDisableUnlink\":\"\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./FC_CartProductCard.map","import{useState,useEffect}from\"react\";export const isBrowser=()=>typeof document===\"object\";export function usePageVisibility(){if(!isBrowser())return;const[isVisible,setIsVisible]=useState(!document.hidden);useEffect(()=>{const onVisibilityChange=()=>setIsVisible(!document.hidden);document.addEventListener(\"visibilitychange\",onVisibilityChange,false);return()=>{document.removeEventListener(\"visibilitychange\",onVisibilityChange);};},[]);return isVisible;}\nexport const __FramerMetadata__ = {\"exports\":{\"isBrowser\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"usePageVisibility\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./UsePageVisibility.map","import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{resize}from\"@motionone/dom\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";import{animate,LayoutGroup,mix,motion,frame,useInView,useMotionValue,useTransform,wrap}from\"framer-motion\";import{Children,cloneElement,forwardRef,memo,startTransition,useCallback,useEffect,useLayoutEffect,useMemo,useRef,useState}from\"react\";import{usePageVisibility}from\"https://framerusercontent.com/modules/V9ryrjN5Am9WM1dJeyyJ/GzHgU466IQmt8g4qOKj8/UsePageVisibility.js\";function awaitRefCallback(element,controller){let refCallbackResolve;// we need to listen to the ref setter, so let's override `current` - we can do that, because we don't use React's `useRef` hook for those refs.\nlet current=element.current;Object.defineProperty(element,\"current\",{get(){return current;},set(node){current=node;if(node===null){// React calls with null when the element is unmounted\n// we abort here so that the promise isn't left around in case the ref is never set\ncontroller.abort();return;}refCallbackResolve?.(node);},configurable:true});// no need to create a promise if current already exists\nif(current)return current;const refCallbackPromise=new Promise((resolve,reject)=>{refCallbackResolve=resolve;controller.signal.addEventListener(\"abort\",reject);}).catch(()=>{});return refCallbackPromise;}// Using opacity: 0.001 instead of 0 as an LCP hack. (opacity: 0.001 is still 0\n// to a human eye but makes Google think the elements are visible)\nconst OPACITY_0=.001;/**\n *\n * SLIDESHOW\n * V2 with Drag\n * By Benjamin and Matt\n *\n * @framerIntrinsicWidth 400\n * @framerIntrinsicHeight 200\n *\n * @framerDisableUnlink\n *\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */export default function Slideshow(props){/**\n * Properties\n */const{slots=[],startFrom,direction,effectsOptions,autoPlayControl,dragControl,alignment,gap,padding,paddingPerSide,paddingTop,paddingRight,paddingBottom,paddingLeft,itemAmount,fadeOptions,intervalControl,transitionControl,arrowOptions,borderRadius,progressOptions,style}=props;const{effectsOpacity,effectsScale,effectsRotate,effectsPerspective,effectsHover,playOffscreen}=effectsOptions;const{fadeContent,overflow,fadeWidth,fadeInset,fadeAlpha}=fadeOptions;const{showMouseControls,arrowSize,arrowRadius,arrowFill,leftArrow,rightArrow,arrowShouldSpace=true,arrowShouldFadeIn=false,arrowPosition,arrowPadding,arrowGap,arrowPaddingTop,arrowPaddingRight,arrowPaddingBottom,arrowPaddingLeft}=arrowOptions;const{showProgressDots,dotSize,dotsInset,dotsRadius,dotsPadding,dotsGap,dotsFill,dotsBackground,dotsActiveOpacity,dotsOpacity,dotsBlur}=progressOptions;const paddingValue=paddingPerSide?`${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`:`${padding}px`;/**\n * Checks\n */const isCanvas=RenderTarget.current()===RenderTarget.canvas;// Remove empty slots (such as hidden layers)\nconst filteredSlots=slots.filter(Boolean);const amountChildren=Children.count(filteredSlots);const hasChildren=amountChildren>0;const isHorizontal=direction===\"left\"||direction===\"right\";const isInverted=direction===\"right\"||direction===\"bottom\";/**\n * Empty state for Canvas\n */if(!hasChildren){return /*#__PURE__*/_jsxs(\"section\",{style:placeholderStyles,children:[/*#__PURE__*/_jsx(\"div\",{style:emojiStyles,children:\"⭐️\"}),/*#__PURE__*/_jsx(\"p\",{style:titleStyles,children:\"Connect to Content\"}),/*#__PURE__*/_jsx(\"p\",{style:subtitleStyles,children:\"Add layers or components to make infinite auto-playing slideshows.\"})]});}/**\n * Refs, State\n */const parentRef=useRef(null);const childrenRef=useMemo(()=>{return[{current:null},{current:null}];// when the slots change, generate new array\n},[filteredSlots]);const timeoutRef=useRef(undefined);const[size,setSize]=useState({parent:null,children:null,item:null,itemWidth:null,itemHeight:null,viewportLength:null});/* For pausing on hover */const[isHovering,setIsHovering]=useState(false);const[shouldPlayOnHover,setShouldPlayOnHover]=useState(autoPlayControl);/* For cursor updates */const[isMouseDown,setIsMouseDown]=useState(false);/* Check if resizing */const[isResizing,setIsResizing]=useState(false);/**\n * Array for children\n */let dupedChildren=[];let duplicateBy=4;if(isCanvas){duplicateBy=1;}/**\n * Measure parent, child, items\n */const measure=useCallback(()=>{if(!parentRef.current)return;const firstChild=childrenRef[0].current;const lastChild=childrenRef[1].current;const parentLength=isHorizontal?parentRef.current.offsetWidth:parentRef.current.offsetHeight;const start=firstChild?isHorizontal?firstChild.offsetLeft:firstChild.offsetTop:0;const end=lastChild?isHorizontal?lastChild.offsetLeft+lastChild.offsetWidth:lastChild.offsetTop+lastChild.offsetHeight:0;const childrenLength=end-start+gap;const itemSize=firstChild?isHorizontal?firstChild.offsetWidth:firstChild.offsetHeight:0;const itemWidth=firstChild?firstChild.offsetWidth:0;const itemHeight=firstChild?firstChild.offsetHeight:0;const viewportLength=isHorizontal?Math.max(document.documentElement.clientWidth||0,window.innerWidth||0,parentRef.current.offsetWidth):Math.max(document.documentElement.clientHeight||0,window.innerHeight||0,parentRef.current.offsetHeight);setSize({parent:parentLength,children:childrenLength,item:itemSize,itemWidth,itemHeight,viewportLength});},[]);const scheduleMeasure=useCallback(async()=>{const controller=new AbortController;/**\n * The elements in the set are refs of children. If they're wrapped in Suspense, they could mount later than the parent.\n * Thus, we wait for each ref to be set step by step if required.\n */const[firstChild,lastChild]=childrenRef;if(!isCanvas&&(!firstChild.current||!lastChild.current))try{await Promise.all([awaitRefCallback(firstChild,controller),amountChildren>1?awaitRefCallback(lastChild,controller):true]);}catch{controller.abort();}frame.read(measure,false,true);},[measure]);/**\n * Add refs to all children\n * Added itemAmount for resizing\n */useLayoutEffect(()=>{scheduleMeasure();},[itemAmount]);/**\n * Track whether this is the initial resize event. By default this will fire on mount,\n * which we do in the useEffect. We should only fire it on subsequent resizes.\n */const initialResize=useRef(true);useEffect(()=>{return resize(parentRef.current,({contentSize})=>{if(!initialResize.current&&(contentSize.width||contentSize.height)){scheduleMeasure();startTransition(()=>setIsResizing(true));}initialResize.current=false;});},[]);useEffect(()=>{if(isResizing){const timer=setTimeout(()=>startTransition(()=>setIsResizing(false)),500);return()=>clearTimeout(timer);}},[isResizing]);/**\n * Animation, pagination\n */const totalItems=filteredSlots?.length;const childrenSize=isCanvas?0:size?.children;const itemWithGap=size?.item+gap;const itemOffset=startFrom*itemWithGap;const[currentItem,setCurrentItem]=useState(startFrom+totalItems);const[isDragging,setIsDragging]=useState(false);if(isCanvas){if(currentItem!==startFrom){setCurrentItem(startFrom);}}/* Check for browser window visibility *//* Otherwise, it will re-play all the item increments */const visibilityRef=useRef(null);const isInView=useInView(visibilityRef);const isVisible=usePageVisibility()&&isInView;const factor=isInverted?1:-1;/* The x and y values to start from */const xOrY=useMotionValue(childrenSize);/* For canvas only. Using xOrY is slower upon page switching */const canvasPosition=isHorizontal?-startFrom*(size?.itemWidth+gap):-startFrom*(size?.itemHeight+gap);/* Calculate the new value to animate to */const newPosition=()=>factor*currentItem*itemWithGap;/* Wrapped values for infinite looping *//* Instead of 0 to a negative full duplicated row, we start with an offset */const wrappedValue=!isCanvas?useTransform(xOrY,value=>{const wrapped=wrap(-childrenSize,-childrenSize*2,value);return isNaN(wrapped)?0:wrapped;}):0;/* Convert the current item to a wrapping index for dots */const wrappedIndex=wrap(0,totalItems,currentItem);const wrappedIndexInverted=wrap(0,-totalItems,currentItem);/* Update x or y with the provided starting point *//* The subtraction of a full row of children is for overflow */useLayoutEffect(()=>{if(size?.children===null)return;/* Initial measure */// if (initialResize.current) {\n// xOrY.set((childrenSize + itemOffset) * factor)\n// }\n/* Subsequent resizes */if(!initialResize.current&&isResizing){xOrY.set(newPosition());}},[size,childrenSize,factor,itemOffset,currentItem,itemWithGap,isResizing]);/**\n * Page item methods\n * Switching, deltas, autoplaying\n *//* Next and previous function, animates the X */const switchPages=()=>{if(isCanvas||!hasChildren||!size.parent||isDragging)return;if(xOrY.get()!==newPosition()){animate(xOrY,newPosition(),transitionControl);}if(autoPlayControl&&shouldPlayOnHover&&(playOffscreen||isVisible)){timeoutRef.current=setTimeout(()=>{startTransition(()=>setCurrentItem(item=>item+1));switchPages();},intervalControl*1e3);}};/* Page navigation functions */const setDelta=(delta,transition=false)=>{if(!isInverted){if(transition)startTransition(()=>setCurrentItem(item=>item+delta));else setCurrentItem(item=>item+delta);}else{if(transition)startTransition(()=>setCurrentItem(item=>item-delta));else setCurrentItem(item=>item-delta);}};const setPage=index=>{const currentItemWrapped=wrap(0,totalItems,currentItem);const currentItemWrappedInvert=wrap(0,-totalItems,currentItem);const goto=index-currentItemWrapped;const gotoInverted=index-Math.abs(currentItemWrappedInvert);if(!isInverted){startTransition(()=>setCurrentItem(item=>item+goto));}else{startTransition(()=>setCurrentItem(item=>item-gotoInverted));}};/**\n * Drag\n */const handleDragStart=()=>{startTransition(()=>setIsDragging(true));};const handleDragEnd=(event,{offset,velocity})=>{startTransition(()=>setIsDragging(false));const offsetXorY=isHorizontal?offset.x:offset.y;const velocityThreshold=200// Based on testing, can be tweaked or could be 0\n;const velocityXorY=isHorizontal?velocity.x:velocity.y;const isHalfOfNext=offsetXorY<-size.item/2;const isHalfOfPrev=offsetXorY>size.item/2;/* In case you drag more than 1 item left or right */const normalizedOffset=Math.abs(offsetXorY);const itemDelta=Math.round(normalizedOffset/size.item);/* Minimum delta is 1 to initiate a page switch *//* For velocity use only */const itemDeltaFromOne=itemDelta===0?1:itemDelta;/* For quick flicks, even with low offsets */if(velocityXorY>velocityThreshold){setDelta(-itemDeltaFromOne,true);}else if(velocityXorY<-velocityThreshold){setDelta(itemDeltaFromOne,true);}else{/* For dragging over half of the current item with 0 velocity */if(isHalfOfNext){setDelta(itemDelta,true);}if(isHalfOfPrev){setDelta(-itemDelta,true);}}};/* Kickstart the auto-playing once we have all the children */useEffect(()=>{if(!isVisible||isResizing||amountChildren<=1)return;switchPages();return()=>timeoutRef.current&&clearTimeout(timeoutRef.current);},[dupedChildren,isVisible,isResizing]);/* Create copies of our children to create a perfect loop */let childCounter=0;/**\n * Sizing\n * */const columnOrRowValue=`calc(${100/itemAmount}% - ${gap}px + ${gap/itemAmount}px)`;/**\n * Nested array to create duplicates of the children for infinite looping\n * These are wrapped around, and start at a full \"page\" worth of offset\n * as defined above.\n */for(let index=0;index