@trafilea/afrodita-components 6.42.3 → 6.43.0

package/build/index.esm.js

@@ -3482,7 +3482,7 @@ var PriceLabelV2$1 = function (_a) {
     var isOriginalPrice = originalPrice && isDiffFinalAndOriginalPrice;
     var isDiscount = discount && isDiffFinalAndOriginalPrice;
     var isClubOffer = clubOffer && isDiffFinalAndOriginalPrice;
-    var supportedCurrencies = ['AU$', 'CA$', '£'];
+    var supportedCurrencies = ['AU$', 'CA$', '£', 'NZD$', 'SGD$'];
     var currencySymbol = '$';
     if (typeof productFinalPrice === 'string') {
         supportedCurrencies.forEach(function (availableCurrency) {
@@ -3554,7 +3554,7 @@ var PriceLabelV3 = function (_a) {
     var isOriginalPrice = originalPrice && isDiffFinalAndOriginalPrice;
     var isDiscount = discount && isDiffFinalAndOriginalPrice;
     var isClubOffer = clubOffer && isDiffFinalAndOriginalPrice;
-    var supportedCurrencies = ['AU$', 'CA$', '£'];
+    var supportedCurrencies = ['AU$', 'CA$', '£', 'NZD$', 'SGD$'];
     var currencySymbol = '$';
     if (typeof finalPrice === 'string') {
         supportedCurrencies.forEach(function (availableCurrency) {
@@ -3625,7 +3625,7 @@ var PriceLabel = function (_a) {
     var theme = useTheme();
     var isDiffFinalAndOriginalPrice = originalPrice !== finalPrice;
     var isOriginalPrice = originalPrice && isDiffFinalAndOriginalPrice;
-    var supportedCurrencies = ['AU$', 'CA$', '£'];
+    var supportedCurrencies = ['AU$', 'CA$', '£', 'NZD$', 'SGD$'];
     var currencySymbol = '$';
     if (typeof finalPrice === 'string') {
         supportedCurrencies.forEach(function (availableCurrency) {
@@ -3661,7 +3661,7 @@ var PriceLabelV2 = function (_a) {
     var theme = useTheme();
     var isDiffFinalAndOriginalPrice = originalPrice !== finalPrice;
     var isOriginalPrice = originalPrice && isDiffFinalAndOriginalPrice;
-    var supportedCurrencies = ['AU$', 'CA$', '£'];
+    var supportedCurrencies = ['AU$', 'CA$', '£', 'NZD$', 'SGD$'];
     var currencySymbol = '$';
     if (typeof finalPrice === 'string') {
         supportedCurrencies.forEach(function (availableCurrency) {
@@ -5006,7 +5006,7 @@ var templateObject_1$26, templateObject_2$1x, templateObject_3$1c;
 function k$1(){let e=[],t=[],r={enqueue(o){t.push(o);},requestAnimationFrame(...o){let n=requestAnimationFrame(...o);r.add(()=>cancelAnimationFrame(n));},nextFrame(...o){r.requestAnimationFrame(()=>{r.requestAnimationFrame(...o);});},setTimeout(...o){let n=setTimeout(...o);r.add(()=>clearTimeout(n));},add(o){e.push(o);},dispose(){for(let o of e.splice(0))o();},async workQueue(){for(let o of t.splice(0))await o();}};return r}function Q(){let[e]=useState(k$1);return useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?useLayoutEffect:useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=useState(yt.serverHandoffComplete);return useEffect(()=>{e!==!0&&t(!0);},[e]),useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),useCallback(r=>{for(let o of t.current)o!=null&&(typeof o=="function"?o(r):o.current=r);},[t])}function S(e,t,...r){if(e in t){let n=t[e];return typeof n=="function"?n(...r):n}let o=new Error(`Tried to handle "${e}" but there is no handler defined. Only defined handlers are: ${Object.keys(t).map(n=>`"${n}"`).join(", ")}.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,S),o}function E({props:e,slot:t,defaultTag:r,features:o,visible:n=!0,name:i}){if(n)return _e(e,t,r,i);let a=o!=null?o:0;if(a&2){let{static:l=!1,...s}=e;if(l)return _e(s,t,r,i)}if(a&1){let{unmount:l=!0,...s}=e;return S(l?0:1,{[0](){return null},[1](){return _e({...s,hidden:!0,style:{display:"none"}},t,r,i)}})}return _e(e,t,r,i)}function _e(e,t={},r,o){let{as:n=r,children:i,refName:a="ref",...l}=gt(e,["unmount","static"]),s=e.ref!==void 0?{[a]:e.ref}:{},u=typeof i=="function"?i(t):i;if(l.className&&typeof l.className=="function"&&(l.className=l.className(t)),n===Fragment$1&&Object.keys(l).length>0){if(!isValidElement(u)||Array.isArray(u)&&u.length>1)throw new Error(['Passing props on "Fragment"!',"",`The current component <${o} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(l).map(c=>`  - ${c}`).join(`
 `),"","You can apply a few solutions:",['Add an `as="..."` prop, to ensure that we render an actual element instead of a "Fragment".',"Render a single element as the child so that we can forward the props onto that element."].map(c=>`  - ${c}`).join(`
 `)].join(`
-`));return cloneElement(u,Object.assign({},fr(mr(gt(l,["ref"])),u.props,["onClick"]),s))}return createElement(n,Object.assign({},gt(l,["ref"]),n!==Fragment$1&&s),u)}function fr(e,t,r){let o=Object.assign({},e);for(let n of r)e[n]!==void 0&&t[n]!==void 0&&Object.assign(o,{[n](i){i.defaultPrevented||e[n](i),i.defaultPrevented||t[n](i);}});return o}function D(e){var t;return Object.assign(forwardRef(e),{displayName:(t=e.displayName)!=null?t:e.name})}function mr(e){let t=Object.assign({},e);for(let r in t)t[r]===void 0&&delete t[r];return t}function gt(e,t=[]){let r=Object.assign({},e);for(let o of t)o in r&&delete r[o];return r}function br(e){throw new Error("Unexpected object: "+e)}function ae(e,t){let r=t.resolveItems();if(r.length<=0)return null;let o=t.resolveActiveIndex(),n=o!=null?o:-1,i=(()=>{switch(e.focus){case 0:return r.findIndex(a=>!t.resolveDisabled(a));case 1:{let a=r.slice().reverse().findIndex((l,s,u)=>n!==-1&&u.length-s-1>=n?!1:!t.resolveDisabled(l));return a===-1?a:r.length-1-a}case 2:return r.findIndex((a,l)=>l<=n?!1:!t.resolveDisabled(a));case 3:{let a=r.slice().reverse().findIndex(l=>!t.resolveDisabled(l));return a===-1?a:r.length-1-a}case 4:return r.findIndex(a=>t.resolveId(a)===e.id);case 5:return null;default:br(e);}})();return i===-1?o:i}function G(e){let t=e.parentElement,r=null;for(;t&&!(t instanceof HTMLFieldSetElement);)t instanceof HTMLLegendElement&&(r=t),t=t.parentElement;let o=(t==null?void 0:t.getAttribute("disabled"))==="";return o&&Tr(r)?!1:o}function Tr(e){if(!e)return !1;let t=e.previousElementSibling;for(;t!==null;){if(t instanceof HTMLLegendElement)return !1;t=t.previousElementSibling;}return !0}function w$1(e,t,r){let o=useRef(t);o.current=t,useEffect(()=>{function n(i){o.current.call(window,i);}return window.addEventListener(e,n,r),()=>window.removeEventListener(e,n,r)},[e,r]);}var Pt=createContext(null);Pt.displayName="OpenClosedContext";function _(){return useContext(Pt)}function W({value:e,children:t}){return React__default.createElement(Pt.Provider,{value:e},t)}function ro(e){var r;if(e.type)return e.type;let t=(r=e.as)!=null?r:"button";if(typeof t=="string"&&t.toLowerCase()==="button")return "button"}function U(e,t){let[r,o]=useState(()=>ro(e));return x$1(()=>{o(ro(e));},[e.type,e.as]),x$1(()=>{r||!t.current||t.current instanceof HTMLButtonElement&&!t.current.hasAttribute("type")&&o("button");},[r,t]),r}function se({container:e,accept:t,walk:r,enabled:o=!0}){let n=useRef(t),i=useRef(r);useEffect(()=>{n.current=t,i.current=r;},[t,r]),x$1(()=>{if(!e||!o)return;let a=n.current,l=i.current,s=Object.assign(c=>a(c),{acceptNode:a}),u=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT,s,!1);for(;u.nextNode();)l(u.currentNode);},[e,o,n,i]);}var Ar={[1](e){return e.disabled||e.comboboxState===1?e:{...e,activeOptionIndex:null,comboboxState:1}},[0](e){return e.disabled||e.comboboxState===0?e:{...e,comboboxState:0}},[2](e,t){return e.disabled===t.disabled?e:{...e,disabled:t.disabled}},[3](e,t){if(e.disabled||e.optionsRef.current&&!e.optionsPropsRef.current.static&&e.comboboxState===1)return e;let r=ae(t,{resolveItems:()=>e.options,resolveActiveIndex:()=>e.activeOptionIndex,resolveId:o=>o.id,resolveDisabled:o=>o.dataRef.current.disabled});return e.activeOptionIndex===r?e:{...e,activeOptionIndex:r}},[4]:(e,t)=>{var i;let r=e.activeOptionIndex!==null?e.options[e.activeOptionIndex]:null,o=Array.from((i=e.optionsRef.current)==null?void 0:i.querySelectorAll('[id^="headlessui-combobox-option-"]')).reduce((a,l,s)=>Object.assign(a,{[l.id]:s}),{}),n=[...e.options,{id:t.id,dataRef:t.dataRef}].sort((a,l)=>o[a.id]-o[l.id]);return {...e,options:n,activeOptionIndex:(()=>r===null?null:n.indexOf(r))()}},[5]:(e,t)=>{let r=e.options.slice(),o=e.activeOptionIndex!==null?r[e.activeOptionIndex]:null,n=r.findIndex(i=>i.id===t.id);return n!==-1&&r.splice(n,1),{...e,options:r,activeOptionIndex:(()=>n===e.activeOptionIndex||o===null?null:r.indexOf(o))()}}},vt=createContext(null);vt.displayName="ComboboxContext";function pe(e){let t=useContext(vt);if(t===null){let r=new Error(`<${e} /> is missing a parent <Combobox /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(r,pe),r}return t}var Rt=createContext(null);Rt.displayName="ComboboxActions";function Ue(){let e=useContext(Rt);if(e===null){let t=new Error("ComboboxActions is missing a parent <Combobox /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(t,Ue),t}return e}function hr(e,t){return S(t.type,Ar,e,t)}var Or=Fragment$1,Ir=D(function(t,r){let{value:o,onChange:n,disabled:i=!1,...a}=t,l=useRef({value:o,onChange:n}),s=useRef({static:!1,hold:!1}),u=useRef({displayValue:void 0}),c=useReducer(hr,{comboboxState:1,comboboxPropsRef:l,optionsPropsRef:s,inputPropsRef:u,labelRef:createRef(),inputRef:createRef(),buttonRef:createRef(),optionsRef:createRef(),disabled:i,options:[],activeOptionIndex:null}),[{comboboxState:m,options:b,activeOptionIndex:T,optionsRef:y,inputRef:p,buttonRef:f},d]=c;x$1(()=>{l.current.value=o;},[o,l]),x$1(()=>{l.current.onChange=n;},[n,l]),x$1(()=>d({type:2,disabled:i}),[i]),w$1("mousedown",O=>{var N,K,V;let L=O.target;m===0&&(((N=f.current)==null?void 0:N.contains(L))||((K=p.current)==null?void 0:K.contains(L))||((V=y.current)==null?void 0:V.contains(L))||d({type:1}));});let P=T===null?null:b[T].dataRef.current.value,C=useMemo(()=>({open:m===0,disabled:i,activeIndex:T,activeOption:P}),[m,i,b,T]),R=useCallback(()=>{if(!p.current||o===void 0)return;let O=u.current.displayValue;typeof O=="function"?p.current.value=O(o):typeof o=="string"&&(p.current.value=o);},[o,p,u]),g=useCallback(O=>{let L=b.find(K=>K.id===O);if(!L)return;let{dataRef:N}=L;l.current.onChange(N.current.value),R();},[b,l,p]),v=useCallback(()=>{if(T!==null){let{dataRef:O}=b[T];l.current.onChange(O.current.value),R();}},[T,b,l,p]),h=useMemo(()=>({selectOption:g,selectActiveOption:v}),[g,v]);return x$1(()=>{m===1&&R();},[R,m]),x$1(R,[R]),React__default.createElement(Rt.Provider,{value:h},React__default.createElement(vt.Provider,{value:c},React__default.createElement(W,{value:S(m,{[0]:0,[1]:1})},E({props:r===null?a:{...a,ref:r},slot:C,defaultTag:Or,name:"Combobox"}))))}),Lr="input",Dr=D(function(t,r){var R,g;let{value:o,onChange:n,displayValue:i,...a}=t,[l,s]=pe("Combobox.Input"),u=Ue(),c=I(l.inputRef,r),m=l.inputPropsRef,b=`headlessui-combobox-input-${A$1()}`,T=Q(),y=ke(n);x$1(()=>{m.current.displayValue=i;},[i,m]);let p=useCallback(v=>{switch(v.key){case"Enter":v.preventDefault(),v.stopPropagation(),u.selectActiveOption(),s({type:1});break;case"ArrowDown":return v.preventDefault(),v.stopPropagation(),S(l.comboboxState,{[0]:()=>s({type:3,focus:2}),[1]:()=>{s({type:0}),T.nextFrame(()=>{l.comboboxPropsRef.current.value||s({type:3,focus:0});});}});case"ArrowUp":return v.preventDefault(),v.stopPropagation(),S(l.comboboxState,{[0]:()=>s({type:3,focus:1}),[1]:()=>{s({type:0}),T.nextFrame(()=>{l.comboboxPropsRef.current.value||s({type:3,focus:3});});}});case"Home":case"PageUp":return v.preventDefault(),v.stopPropagation(),s({type:3,focus:0});case"End":case"PageDown":return v.preventDefault(),v.stopPropagation(),s({type:3,focus:3});case"Escape":return v.preventDefault(),l.optionsRef.current&&!l.optionsPropsRef.current.static&&v.stopPropagation(),s({type:1});case"Tab":u.selectActiveOption(),s({type:1});break}},[T,s,l,u]),f=useCallback(v=>{var h;s({type:0}),(h=y.current)==null||h.call(y,v);},[s,y]),d=ee(()=>{if(!!l.labelRef.current)return [l.labelRef.current.id].join(" ")},[l.labelRef.current]),P=useMemo(()=>({open:l.comboboxState===0,disabled:l.disabled}),[l]),C={ref:c,id:b,role:"combobox",type:"text","aria-controls":(R=l.optionsRef.current)==null?void 0:R.id,"aria-expanded":l.disabled?void 0:l.comboboxState===0,"aria-activedescendant":l.activeOptionIndex===null||(g=l.options[l.activeOptionIndex])==null?void 0:g.id,"aria-labelledby":d,disabled:l.disabled,onKeyDown:p,onChange:f};return E({props:{...a,...C},slot:P,defaultTag:Lr,name:"Combobox.Input"})}),Mr="button",Fr=D(function(t,r){var p;let[o,n]=pe("Combobox.Button"),i=Ue(),a=I(o.buttonRef,r),l=`headlessui-combobox-button-${A$1()}`,s=Q(),u=useCallback(f=>{switch(f.key){case"ArrowDown":return f.preventDefault(),f.stopPropagation(),o.comboboxState===1&&(n({type:0}),s.nextFrame(()=>{o.comboboxPropsRef.current.value||n({type:3,focus:0});})),s.nextFrame(()=>{var d;return (d=o.inputRef.current)==null?void 0:d.focus({preventScroll:!0})});case"ArrowUp":return f.preventDefault(),f.stopPropagation(),o.comboboxState===1&&(n({type:0}),s.nextFrame(()=>{o.comboboxPropsRef.current.value||n({type:3,focus:3});})),s.nextFrame(()=>{var d;return (d=o.inputRef.current)==null?void 0:d.focus({preventScroll:!0})});case"Escape":return f.preventDefault(),o.optionsRef.current&&!o.optionsPropsRef.current.static&&f.stopPropagation(),n({type:1}),s.nextFrame(()=>{var d;return (d=o.inputRef.current)==null?void 0:d.focus({preventScroll:!0})})}},[s,n,o,i]),c=useCallback(f=>{if(G(f.currentTarget))return f.preventDefault();o.comboboxState===0?n({type:1}):(f.preventDefault(),n({type:0})),s.nextFrame(()=>{var d;return (d=o.inputRef.current)==null?void 0:d.focus({preventScroll:!0})});},[n,s,o]),m=ee(()=>{if(!!o.labelRef.current)return [o.labelRef.current.id,l].join(" ")},[o.labelRef.current,l]),b=useMemo(()=>({open:o.comboboxState===0,disabled:o.disabled}),[o]),T=t,y={ref:a,id:l,type:U(t,o.buttonRef),tabIndex:-1,"aria-haspopup":!0,"aria-controls":(p=o.optionsRef.current)==null?void 0:p.id,"aria-expanded":o.disabled?void 0:o.comboboxState===0,"aria-labelledby":m,disabled:o.disabled,onClick:c,onKeyDown:u};return E({props:{...T,...y},slot:b,defaultTag:Mr,name:"Combobox.Button"})}),wr="label";function kr(e){let[t]=pe("Combobox.Label"),r=`headlessui-combobox-label-${A$1()}`,o=useCallback(()=>{var a;return (a=t.inputRef.current)==null?void 0:a.focus({preventScroll:!0})},[t.inputRef]),n=useMemo(()=>({open:t.comboboxState===0,disabled:t.disabled}),[t]),i={ref:t.labelRef,id:r,onClick:o};return E({props:{...e,...i},slot:n,defaultTag:wr,name:"Combobox.Label"})}var _r="ul",Gr=1|2,Hr=D(function(t,r){var y;let{hold:o=!1,...n}=t,[i]=pe("Combobox.Options"),{optionsPropsRef:a}=i,l=I(i.optionsRef,r),s=`headlessui-combobox-options-${A$1()}`,u=_(),c=(()=>u!==null?u===0:i.comboboxState===0)();x$1(()=>{var p;a.current.static=(p=t.static)!=null?p:!1;},[a,t.static]),x$1(()=>{a.current.hold=o;},[o,a]),se({container:i.optionsRef.current,enabled:i.comboboxState===0,accept(p){return p.getAttribute("role")==="option"?NodeFilter.FILTER_REJECT:p.hasAttribute("role")?NodeFilter.FILTER_SKIP:NodeFilter.FILTER_ACCEPT},walk(p){p.setAttribute("role","none");}});let m=ee(()=>{var p,f,d;return (d=(p=i.labelRef.current)==null?void 0:p.id)!=null?d:(f=i.buttonRef.current)==null?void 0:f.id},[i.labelRef.current,i.buttonRef.current]),b=useMemo(()=>({open:i.comboboxState===0}),[i]),T={"aria-activedescendant":i.activeOptionIndex===null||(y=i.options[i.activeOptionIndex])==null?void 0:y.id,"aria-labelledby":m,role:"listbox",id:s,ref:l};return E({props:{...n,...T},slot:b,defaultTag:_r,features:Gr,visible:c,name:"Combobox.Options"})}),Ur="li";function Br(e){let{disabled:t=!1,value:r,...o}=e,[n,i]=pe("Combobox.Option"),a=Ue(),l=`headlessui-combobox-option-${A$1()}`,s=n.activeOptionIndex!==null?n.options[n.activeOptionIndex].id===l:!1,u=n.comboboxPropsRef.current.value===r,c=useRef({disabled:t,value:r});x$1(()=>{c.current.disabled=t;},[c,t]),x$1(()=>{c.current.value=r;},[c,r]),x$1(()=>{var P,C;c.current.textValue=(C=(P=document.getElementById(l))==null?void 0:P.textContent)==null?void 0:C.toLowerCase();},[c,l]);let m=useCallback(()=>a.selectOption(l),[a,l]);x$1(()=>(i({type:4,id:l,dataRef:c}),()=>i({type:5,id:l})),[c,l]),x$1(()=>{n.comboboxState===0&&(!u||i({type:3,focus:4,id:l}));},[n.comboboxState,u,l]),x$1(()=>{if(n.comboboxState!==0||!s)return;let P=k$1();return P.requestAnimationFrame(()=>{var C,R;(R=(C=document.getElementById(l))==null?void 0:C.scrollIntoView)==null||R.call(C,{block:"nearest"});}),P.dispose},[l,s,n.comboboxState,n.activeOptionIndex]);let b=useCallback(P=>{if(t)return P.preventDefault();m(),i({type:1}),k$1().nextFrame(()=>{var C;return (C=n.inputRef.current)==null?void 0:C.focus({preventScroll:!0})});},[i,n.inputRef,t,m]),T=useCallback(()=>{if(t)return i({type:3,focus:5});i({type:3,focus:4,id:l});},[t,l,i]),y=useCallback(()=>{t||s||i({type:3,focus:4,id:l});},[t,s,l,i]),p=useCallback(()=>{t||!s||n.optionsPropsRef.current.hold||i({type:3,focus:5});},[t,s,i,n.comboboxState,n.comboboxPropsRef]),f=useMemo(()=>({active:s,selected:u,disabled:t}),[s,u,t]);return E({props:{...o,...{id:l,role:"option",tabIndex:t===!0?void 0:-1,"aria-disabled":t===!0?!0:void 0,"aria-selected":u===!0?!0:void 0,disabled:void 0,onClick:b,onFocus:T,onPointerMove:y,onMouseMove:y,onPointerLeave:p,onMouseLeave:p}},slot:f,defaultTag:Ur,name:"Combobox.Option"})}Object.assign(Ir,{Input:Dr,Button:Fr,Label:kr,Options:Hr,Option:Br});var Et=["[contentEditable=true]","[tabindex]","a[href]","area[href]","button:not([disabled])","iframe","input:not([disabled])","select:not([disabled])","textarea:not([disabled])"].map(e=>`${e}:not([tabindex='-1'])`).join(",");function xe(e=document.body){return e==null?[]:Array.from(e.querySelectorAll(Et))}function de(e,t=0){return e===document.body?!1:S(t,{[0](){return e.matches(Et)},[1](){let r=e;for(;r!==null;){if(r.matches(Et))return !0;r=r.parentElement;}return !1}})}function ce(e){e==null||e.focus({preventScroll:!0});}function M(e,t){let r=Array.isArray(e)?e.slice().sort((c,m)=>{let b=c.compareDocumentPosition(m);return b&Node.DOCUMENT_POSITION_FOLLOWING?-1:b&Node.DOCUMENT_POSITION_PRECEDING?1:0}):xe(e),o=document.activeElement,n=(()=>{if(t&(1|4))return 1;if(t&(2|8))return -1;throw new Error("Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last")})(),i=(()=>{if(t&1)return 0;if(t&2)return Math.max(0,r.indexOf(o))-1;if(t&4)return Math.max(0,r.indexOf(o))+1;if(t&8)return r.length-1;throw new Error("Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last")})(),a=t&32?{preventScroll:!0}:{},l=0,s=r.length,u;do{if(l>=s||l+s<=0)return 0;let c=i+l;if(t&16)c=(c+s)%s;else {if(c<0)return 3;if(c>=s)return 1}u=r[c],u==null||u.focus(a),l+=n;}while(u!==document.activeElement);return u.hasAttribute("tabindex")||u.setAttribute("tabindex","0"),2}function Be(){let e=useRef(!1);return useEffect(()=>(e.current=!0,()=>{e.current=!1;}),[]),e}function Ne(e,t=30,{initialFocus:r,containers:o}={}){let n=useRef(typeof window!="undefined"?document.activeElement:null),i=useRef(null),a=Be(),l=Boolean(t&16),s=Boolean(t&2);useEffect(()=>{!l||(n.current=document.activeElement);},[l]),useEffect(()=>{if(!!l)return ()=>{ce(n.current),n.current=null;}},[l]),useEffect(()=>{if(!s||!e.current)return;let u=document.activeElement;if(r==null?void 0:r.current){if((r==null?void 0:r.current)===u){i.current=u;return}}else if(e.current.contains(u)){i.current=u;return}(r==null?void 0:r.current)?ce(r.current):M(e.current,1)===0&&console.warn("There are no focusable elements inside the <FocusTrap />"),i.current=document.activeElement;},[e,r,s]),w$1("keydown",u=>{!(t&4)||!e.current||u.key==="Tab"&&(u.preventDefault(),M(e.current,(u.shiftKey?2:4)|16)===2&&(i.current=document.activeElement));}),w$1("focus",u=>{if(!(t&8))return;let c=new Set(o==null?void 0:o.current);if(c.add(e),!c.size)return;let m=i.current;if(!m||!a.current)return;let b=u.target;b&&b instanceof HTMLElement?Kr(c,b)?(i.current=b,ce(b)):(u.preventDefault(),u.stopPropagation(),ce(m)):ce(i.current);},!0);}function Kr(e,t){var r;for(let o of e)if((r=o.current)==null?void 0:r.contains(t))return !0;return !1}var fe=new Set,J=new Map;function po(e){e.setAttribute("aria-hidden","true"),e.inert=!0;}function co(e){let t=J.get(e);!t||(t["aria-hidden"]===null?e.removeAttribute("aria-hidden"):e.setAttribute("aria-hidden",t["aria-hidden"]),e.inert=t.inert);}function fo(e,t=!0){x$1(()=>{if(!t||!e.current)return;let r=e.current;fe.add(r);for(let o of J.keys())o.contains(r)&&(co(o),J.delete(o));return document.querySelectorAll("body > *").forEach(o=>{if(o instanceof HTMLElement){for(let n of fe)if(o.contains(n))return;fe.size===1&&(J.set(o,{"aria-hidden":o.getAttribute("aria-hidden"),inert:o.inert}),po(o));}}),()=>{if(fe.delete(r),fe.size>0)document.querySelectorAll("body > *").forEach(o=>{if(o instanceof HTMLElement&&!J.has(o)){for(let n of fe)if(o.contains(n))return;J.set(o,{"aria-hidden":o.getAttribute("aria-hidden"),inert:o.inert}),po(o);}});else for(let o of J.keys())co(o),J.delete(o);}},[t]);}var mo=createContext(!1);function bo(){return useContext(mo)}function At(e){return React__default.createElement(mo.Provider,{value:e.force},e.children)}function Xr(){let e=bo(),t=useContext(Po),[r,o]=useState(()=>{if(!e&&t!==null||typeof window=="undefined")return null;let n=document.getElementById("headlessui-portal-root");if(n)return n;let i=document.createElement("div");return i.setAttribute("id","headlessui-portal-root"),document.body.appendChild(i)});return useEffect(()=>{r!==null&&(document.body.contains(r)||document.body.appendChild(r));},[r]),useEffect(()=>{e||t!==null&&o(t.current);},[t,o,e]),r}var Jr=Fragment$1;function We(e){let t=e,r=Xr(),[o]=useState(()=>typeof window=="undefined"?null:document.createElement("div")),n=q$1();return x$1(()=>{if(!!r&&!!o)return r.appendChild(o),()=>{var i;!r||!o||(r.removeChild(o),r.childNodes.length<=0&&((i=r.parentElement)==null||i.removeChild(r)));}},[r,o]),n?!r||!o?null:createPortal(E({props:t,defaultTag:Jr,name:"Portal"}),o):null}var Zr=Fragment$1,Po=createContext(null);function en(e){let{target:t,...r}=e;return React__default.createElement(Po.Provider,{value:t},E({props:r,defaultTag:Zr,name:"Popover.Group"}))}We.Group=en;var vo=createContext(null);function Ro(){let e=useContext(vo);if(e===null){let t=new Error("You used a <Description /> component, but it is not inside a relevant parent.");throw Error.captureStackTrace&&Error.captureStackTrace(t,Ro),t}return e}function re(){let[e,t]=useState([]);return [e.length>0?e.join(" "):void 0,useMemo(()=>function(o){let n=useCallback(a=>(t(l=>[...l,a]),()=>t(l=>{let s=l.slice(),u=s.indexOf(a);return u!==-1&&s.splice(u,1),s})),[]),i=useMemo(()=>({register:n,slot:o.slot,name:o.name,props:o.props}),[n,o.slot,o.name,o.props]);return React__default.createElement(vo.Provider,{value:i},o.children)},[t])]}var an="p";function me(e){let t=Ro(),r=`headlessui-description-${A$1()}`;x$1(()=>t.register(r),[r,t.register]);let o=e,n={...t.props,id:r};return E({props:{...o,...n},slot:t.slot||{},defaultTag:an,name:t.name||"Description"})}var ht=createContext(()=>{});ht.displayName="StackContext";function cn(){return useContext(ht)}function Eo({children:e,onUpdate:t,type:r,element:o}){let n=cn(),i=useCallback((...a)=>{t==null||t(...a),n(...a);},[n,t]);return x$1(()=>(i(0,r,o),()=>i(1,r,o)),[i,r,o]),React__default.createElement(ht.Provider,{value:i},e)}var yn={[0](e,t){return e.titleId===t.id?e:{...e,titleId:t.id}}},Ve=createContext(null);Ve.displayName="DialogContext";function It(e){let t=useContext(Ve);if(t===null){let r=new Error(`<${e} /> is missing a parent <${An.displayName} /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(r,It),r}return t}function gn(e,t){return S(t.type,yn,e,t)}var Pn="div",xn=1|2,vn=D(function(t,r){let{open:o,onClose:n,initialFocus:i,...a}=t,[l,s]=useState(0),u=_();o===void 0&&u!==null&&(o=S(u,{[0]:!0,[1]:!1}));let c=useRef(new Set),m=useRef(null),b=I(m,r),T=t.hasOwnProperty("open")||u!==null,y=t.hasOwnProperty("onClose");if(!T&&!y)throw new Error("You have to provide an `open` and an `onClose` prop to the `Dialog` component.");if(!T)throw new Error("You provided an `onClose` prop to the `Dialog`, but forgot an `open` prop.");if(!y)throw new Error("You provided an `open` prop to the `Dialog`, but forgot an `onClose` prop.");if(typeof o!="boolean")throw new Error(`You provided an \`open\` prop to the \`Dialog\`, but the value is not a boolean. Received: ${o}`);if(typeof n!="function")throw new Error(`You provided an \`onClose\` prop to the \`Dialog\`, but the value is not a function. Received: ${n}`);let p=o?0:1,f=(()=>u!==null?u===0:p===0)(),[d,P]=useReducer(gn,{titleId:null,descriptionId:null}),C=useCallback(()=>n(!1),[n]),R=useCallback(F=>P({type:0,id:F}),[P]),v=q$1()&&p===0,h=l>1,O=useContext(Ve)!==null;Ne(m,v?S(h?"parent":"leaf",{parent:16,leaf:30}):1,{initialFocus:i,containers:c}),fo(m,h?v:!1),w$1("mousedown",F=>{var H;let $=F.target;p===0&&(h||((H=m.current)==null?void 0:H.contains($))||C());}),w$1("keydown",F=>{F.key==="Escape"&&p===0&&(h||(F.preventDefault(),F.stopPropagation(),C()));}),useEffect(()=>{if(p!==0||O)return;let F=document.documentElement.style.overflow,$=document.documentElement.style.paddingRight,H=window.innerWidth-document.documentElement.clientWidth;return document.documentElement.style.overflow="hidden",document.documentElement.style.paddingRight=`${H}px`,()=>{document.documentElement.style.overflow=F,document.documentElement.style.paddingRight=$;}},[p,O]),useEffect(()=>{if(p!==0||!m.current)return;let F=new IntersectionObserver($=>{for(let H of $)H.boundingClientRect.x===0&&H.boundingClientRect.y===0&&H.boundingClientRect.width===0&&H.boundingClientRect.height===0&&C();});return F.observe(m.current),()=>F.disconnect()},[p,m,C]);let[N,K]=re(),V=`headlessui-dialog-${A$1()}`,Fe=useMemo(()=>[{dialogState:p,close:C,setTitleId:R},d],[p,d,C,R]),ge=useMemo(()=>({open:p===0}),[p]),we={ref:b,id:V,role:"dialog","aria-modal":p===0?!0:void 0,"aria-labelledby":d.titleId,"aria-describedby":N,onClick(F){F.stopPropagation();}},X=a;return React__default.createElement(Eo,{type:"Dialog",element:m,onUpdate:useCallback((F,$,H)=>{$==="Dialog"&&S(F,{[0](){c.current.add(H),s(Pe=>Pe+1);},[1](){c.current.add(H),s(Pe=>Pe-1);}});},[])},React__default.createElement(At,{force:!0},React__default.createElement(We,null,React__default.createElement(Ve.Provider,{value:Fe},React__default.createElement(We.Group,{target:m},React__default.createElement(At,{force:!1},React__default.createElement(K,{slot:ge,name:"Dialog.Description"},E({props:{...X,...we},slot:ge,defaultTag:Pn,features:xn,visible:f,name:"Dialog"}))))))))}),Rn="div",En=D(function(t,r){let[{dialogState:o,close:n}]=It("Dialog.Overlay"),i=I(r),a=`headlessui-dialog-overlay-${A$1()}`,l=useCallback(m=>{if(m.target===m.currentTarget){if(G(m.currentTarget))return m.preventDefault();m.preventDefault(),m.stopPropagation(),n();}},[n]),s=useMemo(()=>({open:o===0}),[o]);return E({props:{...t,...{ref:i,id:a,"aria-hidden":!0,onClick:l}},slot:s,defaultTag:Rn,name:"Dialog.Overlay"})}),Cn="h2";function Sn(e){let[{dialogState:t,setTitleId:r}]=It("Dialog.Title"),o=`headlessui-dialog-title-${A$1()}`;useEffect(()=>(r(o),()=>r(null)),[o,r]);let n=useMemo(()=>({open:t===0}),[t]);return E({props:{...e,...{id:o}},slot:n,defaultTag:Cn,name:"Dialog.Title"})}var An=Object.assign(vn,{Overlay:En,Title:Sn,Description:me});var Ln={[0]:e=>({...e,disclosureState:S(e.disclosureState,{[0]:1,[1]:0})}),[1]:e=>e.disclosureState===1?e:{...e,disclosureState:1},[4](e){return e.linkedPanel===!0?e:{...e,linkedPanel:!0}},[5](e){return e.linkedPanel===!1?e:{...e,linkedPanel:!1}},[2](e,t){return e.buttonId===t.buttonId?e:{...e,buttonId:t.buttonId}},[3](e,t){return e.panelId===t.panelId?e:{...e,panelId:t.panelId}}},Mt=createContext(null);Mt.displayName="DisclosureContext";function Ft(e){let t=useContext(Mt);if(t===null){let r=new Error(`<${e} /> is missing a parent <${Ye.name} /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(r,Ft),r}return t}var wt=createContext(null);wt.displayName="DisclosureAPIContext";function Ao(e){let t=useContext(wt);if(t===null){let r=new Error(`<${e} /> is missing a parent <${Ye.name} /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(r,Ao),r}return t}var kt=createContext(null);kt.displayName="DisclosurePanelContext";function Dn(){return useContext(kt)}function Mn(e,t){return S(t.type,Ln,e,t)}var Fn=Fragment$1;function Ye(e){let{defaultOpen:t=!1,...r}=e,o=`headlessui-disclosure-button-${A$1()}`,n=`headlessui-disclosure-panel-${A$1()}`,i=useReducer(Mn,{disclosureState:t?0:1,linkedPanel:!1,buttonId:o,panelId:n}),[{disclosureState:a},l]=i;useEffect(()=>l({type:2,buttonId:o}),[o,l]),useEffect(()=>l({type:3,panelId:n}),[n,l]);let s=useCallback(m=>{l({type:1});let b=(()=>m?m instanceof HTMLElement?m:m.current instanceof HTMLElement?m.current:document.getElementById(o):document.getElementById(o))();b==null||b.focus();},[l,o]),u=useMemo(()=>({close:s}),[s]),c=useMemo(()=>({open:a===0,close:s}),[a,s]);return React__default.createElement(Mt.Provider,{value:i},React__default.createElement(wt.Provider,{value:u},React__default.createElement(W,{value:S(a,{[0]:0,[1]:1})},E({props:r,slot:c,defaultTag:Fn,name:"Disclosure"}))))}var wn="button",kn=D(function(t,r){let[o,n]=Ft("Disclosure.Button"),i=useRef(null),a=I(i,r),l=Dn(),s=l===null?!1:l===o.panelId,u=useCallback(f=>{var d;if(s){if(o.disclosureState===1)return;switch(f.key){case" ":case"Enter":f.preventDefault(),f.stopPropagation(),n({type:0}),(d=document.getElementById(o.buttonId))==null||d.focus();break}}else switch(f.key){case" ":case"Enter":f.preventDefault(),f.stopPropagation(),n({type:0});break}},[n,s,o.disclosureState,o.buttonId]),c=useCallback(f=>{switch(f.key){case" ":f.preventDefault();break}},[]),m=useCallback(f=>{var d;G(f.currentTarget)||t.disabled||(s?(n({type:0}),(d=document.getElementById(o.buttonId))==null||d.focus()):n({type:0}));},[n,t.disabled,o.buttonId,s]),b=useMemo(()=>({open:o.disclosureState===0}),[o]),T=U(t,i),y=t,p=s?{ref:a,type:T,onKeyDown:u,onClick:m}:{ref:a,id:o.buttonId,type:T,"aria-expanded":t.disabled?void 0:o.disclosureState===0,"aria-controls":o.linkedPanel?o.panelId:void 0,onKeyDown:u,onKeyUp:c,onClick:m};return E({props:{...y,...p},slot:b,defaultTag:wn,name:"Disclosure.Button"})}),_n="div",Gn=1|2,Hn=D(function(t,r){let[o,n]=Ft("Disclosure.Panel"),{close:i}=Ao("Disclosure.Panel"),a=I(r,()=>{o.linkedPanel||n({type:4});}),l=_(),s=(()=>l!==null?l===0:o.disclosureState===0)();useEffect(()=>()=>n({type:5}),[n]),useEffect(()=>{var b;o.disclosureState===1&&((b=t.unmount)!=null?b:!0)&&n({type:5});},[o.disclosureState,t.unmount,n]);let u=useMemo(()=>({open:o.disclosureState===0,close:i}),[o,i]),c={ref:a,id:o.panelId},m=t;return React__default.createElement(kt.Provider,{value:o.panelId},E({props:{...m,...c},slot:u,defaultTag:_n,features:Gn,visible:s,name:"Disclosure.Panel"}))});Ye.Button=kn;Ye.Panel=Hn;var $n={[1](e){return e.disabled||e.listboxState===1?e:{...e,activeOptionIndex:null,listboxState:1}},[0](e){return e.disabled||e.listboxState===0?e:{...e,listboxState:0}},[2](e,t){return e.disabled===t.disabled?e:{...e,disabled:t.disabled}},[3](e,t){return e.orientation===t.orientation?e:{...e,orientation:t.orientation}},[4](e,t){if(e.disabled||e.listboxState===1)return e;let r=ae(t,{resolveItems:()=>e.options,resolveActiveIndex:()=>e.activeOptionIndex,resolveId:o=>o.id,resolveDisabled:o=>o.dataRef.current.disabled});return e.searchQuery===""&&e.activeOptionIndex===r?e:{...e,searchQuery:"",activeOptionIndex:r}},[5]:(e,t)=>{if(e.disabled||e.listboxState===1)return e;let o=e.searchQuery!==""?0:1,n=e.searchQuery+t.value.toLowerCase(),a=(e.activeOptionIndex!==null?e.options.slice(e.activeOptionIndex+o).concat(e.options.slice(0,e.activeOptionIndex+o)):e.options).find(s=>{var u;return !s.dataRef.current.disabled&&((u=s.dataRef.current.textValue)==null?void 0:u.startsWith(n))}),l=a?e.options.indexOf(a):-1;return l===-1||l===e.activeOptionIndex?{...e,searchQuery:n}:{...e,searchQuery:n,activeOptionIndex:l}},[6](e){return e.disabled||e.listboxState===1||e.searchQuery===""?e:{...e,searchQuery:""}},[7]:(e,t)=>{var n;let r=Array.from((n=e.optionsRef.current)==null?void 0:n.querySelectorAll('[id^="headlessui-listbox-option-"]')).reduce((i,a,l)=>Object.assign(i,{[a.id]:l}),{}),o=[...e.options,{id:t.id,dataRef:t.dataRef}].sort((i,a)=>r[i.id]-r[a.id]);return {...e,options:o}},[8]:(e,t)=>{let r=e.options.slice(),o=e.activeOptionIndex!==null?r[e.activeOptionIndex]:null,n=r.findIndex(i=>i.id===t.id);return n!==-1&&r.splice(n,1),{...e,options:r,activeOptionIndex:(()=>n===e.activeOptionIndex||o===null?null:r.indexOf(o))()}}},Gt=createContext(null);Gt.displayName="ListboxContext";function Re(e){let t=useContext(Gt);if(t===null){let r=new Error(`<${e} /> is missing a parent <${Ee.name} /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(r,Re),r}return t}function Qn(e,t){return S(t.type,$n,e,t)}var qn=Fragment$1;function Ee(e){let{value:t,onChange:r,disabled:o=!1,horizontal:n=!1,...i}=e,a=n?"horizontal":"vertical",l=useReducer(Qn,{listboxState:1,propsRef:{current:{value:t,onChange:r}},labelRef:createRef(),buttonRef:createRef(),optionsRef:createRef(),disabled:o,orientation:a,options:[],searchQuery:"",activeOptionIndex:null}),[{listboxState:s,propsRef:u,optionsRef:c,buttonRef:m},b]=l;x$1(()=>{u.current.value=t;},[t,u]),x$1(()=>{u.current.onChange=r;},[r,u]),x$1(()=>b({type:2,disabled:o}),[o]),x$1(()=>b({type:3,orientation:a}),[a]),w$1("mousedown",y=>{var f,d,P;let p=y.target;s===0&&(((f=m.current)==null?void 0:f.contains(p))||((d=c.current)==null?void 0:d.contains(p))||(b({type:1}),de(p,1)||(y.preventDefault(),(P=m.current)==null||P.focus())));});let T=useMemo(()=>({open:s===0,disabled:o}),[s,o]);return React__default.createElement(Gt.Provider,{value:l},React__default.createElement(W,{value:S(s,{[0]:0,[1]:1})},E({props:i,slot:T,defaultTag:qn,name:"Listbox"})))}var zn="button",Yn=D(function(t,r){var p;let[o,n]=Re("Listbox.Button"),i=I(o.buttonRef,r),a=`headlessui-listbox-button-${A$1()}`,l=Q(),s=useCallback(f=>{switch(f.key){case" ":case"Enter":case"ArrowDown":f.preventDefault(),n({type:0}),l.nextFrame(()=>{o.propsRef.current.value||n({type:4,focus:0});});break;case"ArrowUp":f.preventDefault(),n({type:0}),l.nextFrame(()=>{o.propsRef.current.value||n({type:4,focus:3});});break}},[n,o,l]),u=useCallback(f=>{switch(f.key){case" ":f.preventDefault();break}},[]),c=useCallback(f=>{if(G(f.currentTarget))return f.preventDefault();o.listboxState===0?(n({type:1}),l.nextFrame(()=>{var d;return (d=o.buttonRef.current)==null?void 0:d.focus({preventScroll:!0})})):(f.preventDefault(),n({type:0}));},[n,l,o]),m=ee(()=>{if(!!o.labelRef.current)return [o.labelRef.current.id,a].join(" ")},[o.labelRef.current,a]),b=useMemo(()=>({open:o.listboxState===0,disabled:o.disabled}),[o]),T=t,y={ref:i,id:a,type:U(t,o.buttonRef),"aria-haspopup":!0,"aria-controls":(p=o.optionsRef.current)==null?void 0:p.id,"aria-expanded":o.disabled?void 0:o.listboxState===0,"aria-labelledby":m,disabled:o.disabled,onKeyDown:s,onKeyUp:u,onClick:c};return E({props:{...T,...y},slot:b,defaultTag:zn,name:"Listbox.Button"})}),Xn="label";function Jn(e){let[t]=Re("Listbox.Label"),r=`headlessui-listbox-label-${A$1()}`,o=useCallback(()=>{var a;return (a=t.buttonRef.current)==null?void 0:a.focus({preventScroll:!0})},[t.buttonRef]),n=useMemo(()=>({open:t.listboxState===0,disabled:t.disabled}),[t]),i={ref:t.labelRef,id:r,onClick:o};return E({props:{...e,...i},slot:n,defaultTag:Xn,name:"Listbox.Label"})}var Zn="ul",ei=1|2,ti=D(function(t,r){var f;let[o,n]=Re("Listbox.Options"),i=I(o.optionsRef,r),a=`headlessui-listbox-options-${A$1()}`,l=Q(),s=Q(),u=_(),c=(()=>u!==null?u===0:o.listboxState===0)();x$1(()=>{let d=o.optionsRef.current;!d||o.listboxState===0&&d!==document.activeElement&&d.focus({preventScroll:!0});},[o.listboxState,o.optionsRef]);let m=useCallback(d=>{switch(s.dispose(),d.key){case" ":if(o.searchQuery!=="")return d.preventDefault(),d.stopPropagation(),n({type:5,value:d.key});case"Enter":if(d.preventDefault(),d.stopPropagation(),n({type:1}),o.activeOptionIndex!==null){let{dataRef:P}=o.options[o.activeOptionIndex];o.propsRef.current.onChange(P.current.value);}k$1().nextFrame(()=>{var P;return (P=o.buttonRef.current)==null?void 0:P.focus({preventScroll:!0})});break;case S(o.orientation,{vertical:"ArrowDown",horizontal:"ArrowRight"}):return d.preventDefault(),d.stopPropagation(),n({type:4,focus:2});case S(o.orientation,{vertical:"ArrowUp",horizontal:"ArrowLeft"}):return d.preventDefault(),d.stopPropagation(),n({type:4,focus:1});case"Home":case"PageUp":return d.preventDefault(),d.stopPropagation(),n({type:4,focus:0});case"End":case"PageDown":return d.preventDefault(),d.stopPropagation(),n({type:4,focus:3});case"Escape":return d.preventDefault(),d.stopPropagation(),n({type:1}),l.nextFrame(()=>{var P;return (P=o.buttonRef.current)==null?void 0:P.focus({preventScroll:!0})});case"Tab":d.preventDefault(),d.stopPropagation();break;default:d.key.length===1&&(n({type:5,value:d.key}),s.setTimeout(()=>n({type:6}),350));break}},[l,n,s,o]),b=ee(()=>{var d,P,C;return (C=(d=o.labelRef.current)==null?void 0:d.id)!=null?C:(P=o.buttonRef.current)==null?void 0:P.id},[o.labelRef.current,o.buttonRef.current]),T=useMemo(()=>({open:o.listboxState===0}),[o]),y={"aria-activedescendant":o.activeOptionIndex===null||(f=o.options[o.activeOptionIndex])==null?void 0:f.id,"aria-labelledby":b,"aria-orientation":o.orientation,id:a,onKeyDown:m,role:"listbox",tabIndex:0,ref:i};return E({props:{...t,...y},slot:T,defaultTag:Zn,features:ei,visible:c,name:"Listbox.Options"})}),oi="li";function ri(e){let{disabled:t=!1,value:r,...o}=e,[n,i]=Re("Listbox.Option"),a=`headlessui-listbox-option-${A$1()}`,l=n.activeOptionIndex!==null?n.options[n.activeOptionIndex].id===a:!1,s=n.propsRef.current.value===r,u=useRef({disabled:t,value:r});x$1(()=>{u.current.disabled=t;},[u,t]),x$1(()=>{u.current.value=r;},[u,r]),x$1(()=>{var d,P;u.current.textValue=(P=(d=document.getElementById(a))==null?void 0:d.textContent)==null?void 0:P.toLowerCase();},[u,a]);let c=useCallback(()=>n.propsRef.current.onChange(r),[n.propsRef,r]);x$1(()=>(i({type:7,id:a,dataRef:u}),()=>i({type:8,id:a})),[u,a]),x$1(()=>{var d,P;n.listboxState===0&&(!s||(i({type:4,focus:4,id:a}),(P=(d=document.getElementById(a))==null?void 0:d.focus)==null||P.call(d)));},[n.listboxState]),x$1(()=>{if(n.listboxState!==0||!l)return;let d=k$1();return d.requestAnimationFrame(()=>{var P,C;(C=(P=document.getElementById(a))==null?void 0:P.scrollIntoView)==null||C.call(P,{block:"nearest"});}),d.dispose},[a,l,n.listboxState,n.activeOptionIndex]);let m=useCallback(d=>{if(t)return d.preventDefault();c(),i({type:1}),k$1().nextFrame(()=>{var P;return (P=n.buttonRef.current)==null?void 0:P.focus({preventScroll:!0})});},[i,n.buttonRef,t,c]),b=useCallback(()=>{if(t)return i({type:4,focus:5});i({type:4,focus:4,id:a});},[t,a,i]),T=useCallback(()=>{t||l||i({type:4,focus:4,id:a});},[t,l,a,i]),y=useCallback(()=>{t||!l||i({type:4,focus:5});},[t,l,i]),p=useMemo(()=>({active:l,selected:s,disabled:t}),[l,s,t]);return E({props:{...o,...{id:a,role:"option",tabIndex:t===!0?void 0:-1,"aria-disabled":t===!0?!0:void 0,"aria-selected":s===!0?!0:void 0,disabled:void 0,onClick:m,onFocus:b,onPointerMove:T,onMouseMove:T,onPointerLeave:y,onMouseLeave:y}},slot:p,defaultTag:oi,name:"Listbox.Option"})}Ee.Button=Yn;Ee.Label=Jn;Ee.Options=ti;Ee.Option=ri;var ui={[1](e){return e.menuState===1?e:{...e,activeItemIndex:null,menuState:1}},[0](e){return e.menuState===0?e:{...e,menuState:0}},[2]:(e,t)=>{let r=ae(t,{resolveItems:()=>e.items,resolveActiveIndex:()=>e.activeItemIndex,resolveId:o=>o.id,resolveDisabled:o=>o.dataRef.current.disabled});return e.searchQuery===""&&e.activeItemIndex===r?e:{...e,searchQuery:"",activeItemIndex:r}},[3]:(e,t)=>{let o=e.searchQuery!==""?0:1,n=e.searchQuery+t.value.toLowerCase(),a=(e.activeItemIndex!==null?e.items.slice(e.activeItemIndex+o).concat(e.items.slice(0,e.activeItemIndex+o)):e.items).find(s=>{var u;return ((u=s.dataRef.current.textValue)==null?void 0:u.startsWith(n))&&!s.dataRef.current.disabled}),l=a?e.items.indexOf(a):-1;return l===-1||l===e.activeItemIndex?{...e,searchQuery:n}:{...e,searchQuery:n,activeItemIndex:l}},[4](e){return e.searchQuery===""?e:{...e,searchQuery:"",searchActiveItemIndex:null}},[5]:(e,t)=>{var n;let r=Array.from((n=e.itemsRef.current)==null?void 0:n.querySelectorAll('[id^="headlessui-menu-item-"]')).reduce((i,a,l)=>Object.assign(i,{[a.id]:l}),{}),o=[...e.items,{id:t.id,dataRef:t.dataRef}].sort((i,a)=>r[i.id]-r[a.id]);return {...e,items:o}},[6]:(e,t)=>{let r=e.items.slice(),o=e.activeItemIndex!==null?r[e.activeItemIndex]:null,n=r.findIndex(i=>i.id===t.id);return n!==-1&&r.splice(n,1),{...e,items:r,activeItemIndex:(()=>n===e.activeItemIndex||o===null?null:r.indexOf(o))()}}},Ht=createContext(null);Ht.displayName="MenuContext";function Je(e){let t=useContext(Ht);if(t===null){let r=new Error(`<${e} /> is missing a parent <${Ze.name} /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(r,Je),r}return t}function pi(e,t){return S(t.type,ui,e,t)}var di=Fragment$1;function Ze(e){let t=useReducer(pi,{menuState:1,buttonRef:createRef(),itemsRef:createRef(),items:[],searchQuery:"",activeItemIndex:null}),[{menuState:r,itemsRef:o,buttonRef:n},i]=t;w$1("mousedown",l=>{var u,c,m;let s=l.target;r===0&&(((u=n.current)==null?void 0:u.contains(s))||((c=o.current)==null?void 0:c.contains(s))||(i({type:1}),de(s,1)||(l.preventDefault(),(m=n.current)==null||m.focus())));});let a=useMemo(()=>({open:r===0}),[r]);return React__default.createElement(Ht.Provider,{value:t},React__default.createElement(W,{value:S(r,{[0]:0,[1]:1})},E({props:e,slot:a,defaultTag:di,name:"Menu"})))}var ci="button",fi=D(function(t,r){var y;let[o,n]=Je("Menu.Button"),i=I(o.buttonRef,r),a=`headlessui-menu-button-${A$1()}`,l=Q(),s=useCallback(p=>{switch(p.key){case" ":case"Enter":case"ArrowDown":p.preventDefault(),p.stopPropagation(),n({type:0}),l.nextFrame(()=>n({type:2,focus:0}));break;case"ArrowUp":p.preventDefault(),p.stopPropagation(),n({type:0}),l.nextFrame(()=>n({type:2,focus:3}));break}},[n,l]),u=useCallback(p=>{switch(p.key){case" ":p.preventDefault();break}},[]),c=useCallback(p=>{if(G(p.currentTarget))return p.preventDefault();t.disabled||(o.menuState===0?(n({type:1}),l.nextFrame(()=>{var f;return (f=o.buttonRef.current)==null?void 0:f.focus({preventScroll:!0})})):(p.preventDefault(),p.stopPropagation(),n({type:0})));},[n,l,o,t.disabled]),m=useMemo(()=>({open:o.menuState===0}),[o]),b=t,T={ref:i,id:a,type:U(t,o.buttonRef),"aria-haspopup":!0,"aria-controls":(y=o.itemsRef.current)==null?void 0:y.id,"aria-expanded":t.disabled?void 0:o.menuState===0,onKeyDown:s,onKeyUp:u,onClick:c};return E({props:{...b,...T},slot:m,defaultTag:ci,name:"Menu.Button"})}),mi="div",bi=1|2,Ti=D(function(t,r){var p,f;let[o,n]=Je("Menu.Items"),i=I(o.itemsRef,r),a=`headlessui-menu-items-${A$1()}`,l=Q(),s=_(),u=(()=>s!==null?s===0:o.menuState===0)();useEffect(()=>{let d=o.itemsRef.current;!d||o.menuState===0&&d!==document.activeElement&&d.focus({preventScroll:!0});},[o.menuState,o.itemsRef]),se({container:o.itemsRef.current,enabled:o.menuState===0,accept(d){return d.getAttribute("role")==="menuitem"?NodeFilter.FILTER_REJECT:d.hasAttribute("role")?NodeFilter.FILTER_SKIP:NodeFilter.FILTER_ACCEPT},walk(d){d.setAttribute("role","none");}});let c=useCallback(d=>{var P;switch(l.dispose(),d.key){case" ":if(o.searchQuery!=="")return d.preventDefault(),d.stopPropagation(),n({type:3,value:d.key});case"Enter":if(d.preventDefault(),d.stopPropagation(),n({type:1}),o.activeItemIndex!==null){let{id:C}=o.items[o.activeItemIndex];(P=document.getElementById(C))==null||P.click();}k$1().nextFrame(()=>{var C;return (C=o.buttonRef.current)==null?void 0:C.focus({preventScroll:!0})});break;case"ArrowDown":return d.preventDefault(),d.stopPropagation(),n({type:2,focus:2});case"ArrowUp":return d.preventDefault(),d.stopPropagation(),n({type:2,focus:1});case"Home":case"PageUp":return d.preventDefault(),d.stopPropagation(),n({type:2,focus:0});case"End":case"PageDown":return d.preventDefault(),d.stopPropagation(),n({type:2,focus:3});case"Escape":d.preventDefault(),d.stopPropagation(),n({type:1}),k$1().nextFrame(()=>{var C;return (C=o.buttonRef.current)==null?void 0:C.focus({preventScroll:!0})});break;case"Tab":d.preventDefault(),d.stopPropagation();break;default:d.key.length===1&&(n({type:3,value:d.key}),l.setTimeout(()=>n({type:4}),350));break}},[n,l,o]),m=useCallback(d=>{switch(d.key){case" ":d.preventDefault();break}},[]),b=useMemo(()=>({open:o.menuState===0}),[o]),T={"aria-activedescendant":o.activeItemIndex===null||(p=o.items[o.activeItemIndex])==null?void 0:p.id,"aria-labelledby":(f=o.buttonRef.current)==null?void 0:f.id,id:a,onKeyDown:c,onKeyUp:m,role:"menu",tabIndex:0,ref:i};return E({props:{...t,...T},slot:b,defaultTag:mi,features:bi,visible:u,name:"Menu.Items"})}),yi=Fragment$1;function gi(e){let{disabled:t=!1,onClick:r,...o}=e,[n,i]=Je("Menu.Item"),a=`headlessui-menu-item-${A$1()}`,l=n.activeItemIndex!==null?n.items[n.activeItemIndex].id===a:!1;x$1(()=>{if(n.menuState!==0||!l)return;let p=k$1();return p.requestAnimationFrame(()=>{var f,d;(d=(f=document.getElementById(a))==null?void 0:f.scrollIntoView)==null||d.call(f,{block:"nearest"});}),p.dispose},[a,l,n.menuState,n.activeItemIndex]);let s=useRef({disabled:t});x$1(()=>{s.current.disabled=t;},[s,t]),x$1(()=>{var p,f;s.current.textValue=(f=(p=document.getElementById(a))==null?void 0:p.textContent)==null?void 0:f.toLowerCase();},[s,a]),x$1(()=>(i({type:5,id:a,dataRef:s}),()=>i({type:6,id:a})),[s,a]);let u=useCallback(p=>{if(t)return p.preventDefault();if(i({type:1}),k$1().nextFrame(()=>{var f;return (f=n.buttonRef.current)==null?void 0:f.focus({preventScroll:!0})}),r)return r(p)},[i,n.buttonRef,t,r]),c=useCallback(()=>{if(t)return i({type:2,focus:5});i({type:2,focus:4,id:a});},[t,a,i]),m=useCallback(()=>{t||l||i({type:2,focus:4,id:a});},[t,l,a,i]),b=useCallback(()=>{t||!l||i({type:2,focus:5});},[t,l,i]),T=useMemo(()=>({active:l,disabled:t}),[l,t]);return E({props:{...o,...{id:a,role:"menuitem",tabIndex:t===!0?void 0:-1,"aria-disabled":t===!0?!0:void 0,disabled:void 0,onClick:u,onFocus:c,onPointerMove:m,onMouseMove:m,onPointerLeave:b,onMouseLeave:b}},slot:T,defaultTag:yi,name:"Menu.Item"})}Ze.Button=fi;Ze.Items=Ti;Ze.Item=gi;var vi={[0]:e=>({...e,popoverState:S(e.popoverState,{[0]:1,[1]:0})}),[1](e){return e.popoverState===1?e:{...e,popoverState:1}},[2](e,t){return e.button===t.button?e:{...e,button:t.button}},[3](e,t){return e.buttonId===t.buttonId?e:{...e,buttonId:t.buttonId}},[4](e,t){return e.panel===t.panel?e:{...e,panel:t.panel}},[5](e,t){return e.panelId===t.panelId?e:{...e,panelId:t.panelId}}},Ut=createContext(null);Ut.displayName="PopoverContext";function ot(e){let t=useContext(Ut);if(t===null){let r=new Error(`<${e} /> is missing a parent <${Te.name} /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(r,ot),r}return t}var Bt=createContext(null);Bt.displayName="PopoverAPIContext";function Mo(e){let t=useContext(Bt);if(t===null){let r=new Error(`<${e} /> is missing a parent <${Te.name} /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(r,Mo),r}return t}var Nt=createContext(null);Nt.displayName="PopoverGroupContext";function Fo(){return useContext(Nt)}var Wt=createContext(null);Wt.displayName="PopoverPanelContext";function Ri(){return useContext(Wt)}function Ei(e,t){return S(t.type,vi,e,t)}var Ci="div";function Te(e){let t=`headlessui-popover-button-${A$1()}`,r=`headlessui-popover-panel-${A$1()}`,o=useReducer(Ei,{popoverState:1,button:null,buttonId:t,panel:null,panelId:r}),[{popoverState:n,button:i,panel:a},l]=o;useEffect(()=>l({type:3,buttonId:t}),[t,l]),useEffect(()=>l({type:5,panelId:r}),[r,l]);let s=useMemo(()=>({buttonId:t,panelId:r,close:()=>l({type:1})}),[t,r,l]),u=Fo(),c=u==null?void 0:u.registerPopover,m=useCallback(()=>{var p;return (p=u==null?void 0:u.isFocusWithinPopoverGroup())!=null?p:(i==null?void 0:i.contains(document.activeElement))||(a==null?void 0:a.contains(document.activeElement))},[u,i,a]);useEffect(()=>c==null?void 0:c(s),[c,s]),w$1("focus",()=>{n===0&&(m()||!i||!a||l({type:1}));},!0),w$1("mousedown",p=>{let f=p.target;n===0&&((i==null?void 0:i.contains(f))||(a==null?void 0:a.contains(f))||(l({type:1}),de(f,1)||(p.preventDefault(),i==null||i.focus())));});let b=useCallback(p=>{l({type:1});let f=(()=>p?p instanceof HTMLElement?p:p.current instanceof HTMLElement?p.current:i:i)();f==null||f.focus();},[l,i]),T=useMemo(()=>({close:b}),[b]),y=useMemo(()=>({open:n===0,close:b}),[n,b]);return React__default.createElement(Ut.Provider,{value:o},React__default.createElement(Bt.Provider,{value:T},React__default.createElement(W,{value:S(n,{[0]:0,[1]:1})},E({props:e,slot:y,defaultTag:Ci,name:"Popover"}))))}var Si="button",Ai=D(function(t,r){let[o,n]=ot("Popover.Button"),i=useRef(null),a=Fo(),l=a==null?void 0:a.closeOthers,s=Ri(),u=s===null?!1:s===o.panelId,c=I(i,r,u?null:g=>n({type:2,button:g})),m=I(i,r),b=useRef(null),T=useRef(typeof window=="undefined"?null:document.activeElement);w$1("focus",()=>{T.current=b.current,b.current=document.activeElement;},!0);let y=useCallback(g=>{var v,h;if(u){if(o.popoverState===1)return;switch(g.key){case" ":case"Enter":g.preventDefault(),g.stopPropagation(),n({type:1}),(v=o.button)==null||v.focus();break}}else switch(g.key){case" ":case"Enter":g.preventDefault(),g.stopPropagation(),o.popoverState===1&&(l==null||l(o.buttonId)),n({type:0});break;case"Escape":if(o.popoverState!==0)return l==null?void 0:l(o.buttonId);if(!i.current||!i.current.contains(document.activeElement))return;g.preventDefault(),g.stopPropagation(),n({type:1});break;case"Tab":if(o.popoverState!==0||!o.panel||!o.button)return;if(g.shiftKey){if(!T.current||((h=o.button)==null?void 0:h.contains(T.current))||o.panel.contains(T.current))return;let O=xe(),L=O.indexOf(T.current);if(O.indexOf(o.button)>L)return;g.preventDefault(),g.stopPropagation(),M(o.panel,8);}else g.preventDefault(),g.stopPropagation(),M(o.panel,1);break}},[n,o.popoverState,o.buttonId,o.button,o.panel,i,l,u]),p=useCallback(g=>{var v;if(!u&&(g.key===" "&&g.preventDefault(),o.popoverState===0&&!!o.panel&&!!o.button))switch(g.key){case"Tab":if(!T.current||((v=o.button)==null?void 0:v.contains(T.current))||o.panel.contains(T.current))return;let h=xe(),O=h.indexOf(T.current);if(h.indexOf(o.button)>O)return;g.preventDefault(),g.stopPropagation(),M(o.panel,8);break}},[o.popoverState,o.panel,o.button,u]),f=useCallback(g=>{var v,h;G(g.currentTarget)||t.disabled||(u?(n({type:1}),(v=o.button)==null||v.focus()):(o.popoverState===1&&(l==null||l(o.buttonId)),(h=o.button)==null||h.focus(),n({type:0})));},[n,o.button,o.popoverState,o.buttonId,t.disabled,l,u]),d=useMemo(()=>({open:o.popoverState===0}),[o]),P=U(t,i),C=t,R=u?{ref:m,type:P,onKeyDown:y,onClick:f}:{ref:c,id:o.buttonId,type:P,"aria-expanded":t.disabled?void 0:o.popoverState===0,"aria-controls":o.panel?o.panelId:void 0,onKeyDown:y,onKeyUp:p,onClick:f};return E({props:{...C,...R},slot:d,defaultTag:Si,name:"Popover.Button"})}),hi="div",Oi=1|2,Ii=D(function(t,r){let[{popoverState:o},n]=ot("Popover.Overlay"),i=I(r),a=`headlessui-popover-overlay-${A$1()}`,l=_(),s=(()=>l!==null?l===0:o===0)(),u=useCallback(T=>{if(G(T.currentTarget))return T.preventDefault();n({type:1});},[n]),c=useMemo(()=>({open:o===0}),[o]);return E({props:{...t,...{ref:i,id:a,"aria-hidden":!0,onClick:u}},slot:c,defaultTag:hi,features:Oi,visible:s,name:"Popover.Overlay"})}),Li$1="div",Di=1|2,Mi=D(function(t,r){let{focus:o=!1,...n}=t,[i,a]=ot("Popover.Panel"),{close:l}=Mo("Popover.Panel"),s=useRef(null),u=I(s,r,p=>{a({type:4,panel:p});}),c=_(),m=(()=>c!==null?c===0:i.popoverState===0)(),b=useCallback(p=>{var f;switch(p.key){case"Escape":if(i.popoverState!==0||!s.current||!s.current.contains(document.activeElement))return;p.preventDefault(),p.stopPropagation(),a({type:1}),(f=i.button)==null||f.focus();break}},[i,s,a]);useEffect(()=>()=>a({type:4,panel:null}),[a]),useEffect(()=>{var p;t.static||i.popoverState===1&&((p=t.unmount)!=null?p:!0)&&a({type:4,panel:null});},[i.popoverState,t.unmount,t.static,a]),useEffect(()=>{if(!o||i.popoverState!==0||!s.current)return;let p=document.activeElement;s.current.contains(p)||M(s.current,1);},[o,s,i.popoverState]),w$1("keydown",p=>{var d;if(i.popoverState!==0||!s.current||p.key!=="Tab"||!document.activeElement||!s.current||!s.current.contains(document.activeElement))return;p.preventDefault();let f=M(s.current,p.shiftKey?2:4);if(f===3)return (d=i.button)==null?void 0:d.focus();if(f===1){if(!i.button)return;let P=xe(),C=P.indexOf(i.button),R=P.splice(C+1).filter(g=>{var v;return !((v=s.current)==null?void 0:v.contains(g))});M(R,1)===0&&M(document.body,1);}}),w$1("focus",()=>{var p;!o||i.popoverState===0&&(!s.current||((p=s.current)==null?void 0:p.contains(document.activeElement))||a({type:1}));},!0);let T=useMemo(()=>({open:i.popoverState===0,close:l}),[i,l]),y={ref:u,id:i.panelId,onKeyDown:b};return React__default.createElement(Wt.Provider,{value:i.panelId},E({props:{...n,...y},slot:T,defaultTag:Li$1,features:Di,visible:m,name:"Popover.Panel"}))}),Fi="div";function wi(e){let t=useRef(null),[r,o]=useState([]),n=useCallback(b=>{o(T=>{let y=T.indexOf(b);if(y!==-1){let p=T.slice();return p.splice(y,1),p}return T});},[o]),i=useCallback(b=>(o(T=>[...T,b]),()=>n(b)),[o,n]),a=useCallback(()=>{var T;let b=document.activeElement;return ((T=t.current)==null?void 0:T.contains(b))?!0:r.some(y=>{var p,f;return ((p=document.getElementById(y.buttonId))==null?void 0:p.contains(b))||((f=document.getElementById(y.panelId))==null?void 0:f.contains(b))})},[t,r]),l=useCallback(b=>{for(let T of r)T.buttonId!==b&&T.close();},[r]),s=useMemo(()=>({registerPopover:i,unregisterPopover:n,isFocusWithinPopoverGroup:a,closeOthers:l}),[i,n,a,l]),u=useMemo(()=>({}),[]),c={ref:t},m=e;return React__default.createElement(Nt.Provider,{value:s},E({props:{...m,...c},slot:u,defaultTag:Fi,name:"Popover.Group"}))}Te.Button=Ai;Te.Overlay=Ii;Te.Panel=Mi;Te.Group=wi;function wo(e=0){let[t,r]=useState(e),o=useCallback(l=>r(s=>s|l),[r]),n=useCallback(l=>Boolean(t&l),[t]),i=useCallback(l=>r(s=>s&~l),[r]),a=useCallback(l=>r(s=>s^l),[r]);return {addFlag:o,hasFlag:n,removeFlag:i,toggleFlag:a}}var _o=createContext(null);function Go(){let e=useContext(_o);if(e===null){let t=new Error("You used a <Label /> component, but it is not inside a relevant parent.");throw Error.captureStackTrace&&Error.captureStackTrace(t,Go),t}return e}function Ae(){let[e,t]=useState([]);return [e.length>0?e.join(" "):void 0,useMemo(()=>function(o){let n=useCallback(a=>(t(l=>[...l,a]),()=>t(l=>{let s=l.slice(),u=s.indexOf(a);return u!==-1&&s.splice(u,1),s})),[]),i=useMemo(()=>({register:n,slot:o.slot,name:o.name,props:o.props}),[n,o.slot,o.name,o.props]);return React__default.createElement(_o.Provider,{value:i},o.children)},[t])]}var Ni="label";function nt(e){let{passive:t=!1,...r}=e,o=Go(),n=`headlessui-label-${A$1()}`;x$1(()=>o.register(n),[n,o.register]);let i={...o.props,id:n},a={...r,...i};return t&&delete a.onClick,E({props:a,slot:o.slot||{},defaultTag:Ni,name:o.name||"Label"})}var Vi={[0](e,t){return {...e,options:[...e.options,{id:t.id,element:t.element,propsRef:t.propsRef}]}},[1](e,t){let r=e.options.slice(),o=e.options.findIndex(n=>n.id===t.id);return o===-1?e:(r.splice(o,1),{...e,options:r})}},jt=createContext(null);jt.displayName="RadioGroupContext";function Ho(e){let t=useContext(jt);if(t===null){let r=new Error(`<${e} /> is missing a parent <${lt.name} /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(r,Ho),r}return t}function $i(e,t){return S(t.type,Vi,e,t)}var Qi="div";function lt(e){let{value:t,onChange:r,disabled:o=!1,...n}=e,[{options:i},a]=useReducer($i,{options:[]}),[l,s]=Ae(),[u,c]=re(),m=`headlessui-radiogroup-${A$1()}`,b=useRef(null),T=useMemo(()=>i.find(R=>!R.propsRef.current.disabled),[i]),y=useMemo(()=>i.some(R=>R.propsRef.current.value===t),[i,t]),p=useCallback(R=>{var v;if(o||R===t)return !1;let g=(v=i.find(h=>h.propsRef.current.value===R))==null?void 0:v.propsRef.current;return (g==null?void 0:g.disabled)?!1:(r(R),!0)},[r,t,o,i]);se({container:b.current,accept(R){return R.getAttribute("role")==="radio"?NodeFilter.FILTER_REJECT:R.hasAttribute("role")?NodeFilter.FILTER_SKIP:NodeFilter.FILTER_ACCEPT},walk(R){R.setAttribute("role","none");}});let f=useCallback(R=>{if(!b.current)return;let v=i.filter(h=>h.propsRef.current.disabled===!1).map(h=>h.element.current);switch(R.key){case"ArrowLeft":case"ArrowUp":if(R.preventDefault(),R.stopPropagation(),M(v,2|16)===2){let O=i.find(L=>L.element.current===document.activeElement);O&&p(O.propsRef.current.value);}break;case"ArrowRight":case"ArrowDown":if(R.preventDefault(),R.stopPropagation(),M(v,4|16)===2){let O=i.find(L=>L.element.current===document.activeElement);O&&p(O.propsRef.current.value);}break;case" ":{R.preventDefault(),R.stopPropagation();let h=i.find(O=>O.element.current===document.activeElement);h&&p(h.propsRef.current.value);}break}},[b,i,p]),d=useCallback(R=>(a({type:0,...R}),()=>a({type:1,id:R.id})),[a]),P=useMemo(()=>({registerOption:d,firstOption:T,containsCheckedOption:y,change:p,disabled:o,value:t}),[d,T,y,p,o,t]),C={ref:b,id:m,role:"radiogroup","aria-labelledby":l,"aria-describedby":u,onKeyDown:f};return React__default.createElement(c,{name:"RadioGroup.Description"},React__default.createElement(s,{name:"RadioGroup.Label"},React__default.createElement(jt.Provider,{value:P},E({props:{...n,...C},defaultTag:Qi,name:"RadioGroup"}))))}var qi="div";function zi(e){let t=useRef(null),r=`headlessui-radiogroup-option-${A$1()}`,[o,n]=Ae(),[i,a]=re(),{addFlag:l,removeFlag:s,hasFlag:u}=wo(1),{value:c,disabled:m=!1,...b}=e,T=useRef({value:c,disabled:m});x$1(()=>{T.current.value=c;},[c,T]),x$1(()=>{T.current.disabled=m;},[m,T]);let{registerOption:y,disabled:p,change:f,firstOption:d,containsCheckedOption:P,value:C}=Ho("RadioGroup.Option");x$1(()=>y({id:r,element:t,propsRef:T}),[r,y,t,e]);let R=useCallback(()=>{var V;!f(c)||(l(2),(V=t.current)==null||V.focus());},[l,f,c]),g=useCallback(()=>l(2),[l]),v=useCallback(()=>s(2),[s]),h=(d==null?void 0:d.id)===r,O=p||m,L=C===c,N={ref:t,id:r,role:"radio","aria-checked":L?"true":"false","aria-labelledby":o,"aria-describedby":i,"aria-disabled":O?!0:void 0,tabIndex:(()=>O?-1:L||!P&&h?0:-1)(),onClick:O?void 0:R,onFocus:O?void 0:g,onBlur:O?void 0:v},K=useMemo(()=>({checked:L,disabled:O,active:u(2)}),[L,O,u]);return React__default.createElement(a,{name:"RadioGroup.Description"},React__default.createElement(n,{name:"RadioGroup.Label"},E({props:{...b,...N},slot:K,defaultTag:qi,name:"RadioGroup.Option"})))}lt.Option=zi;lt.Label=nt;lt.Description=me;var $t=createContext(null);$t.displayName="GroupContext";var zt=createContext(null);zt.displayName="TabsContext";var dt=createContext(null);dt.displayName="TransitionContext";var ct=createContext(null);ct.displayName="NestingContext";
+`));return cloneElement(u,Object.assign({},fr(mr(gt(l,["ref"])),u.props,["onClick"]),s))}return createElement(n,Object.assign({},gt(l,["ref"]),n!==Fragment$1&&s),u)}function fr(e,t,r){let o=Object.assign({},e);for(let n of r)e[n]!==void 0&&t[n]!==void 0&&Object.assign(o,{[n](i){i.defaultPrevented||e[n](i),i.defaultPrevented||t[n](i);}});return o}function D(e){var t;return Object.assign(forwardRef(e),{displayName:(t=e.displayName)!=null?t:e.name})}function mr(e){let t=Object.assign({},e);for(let r in t)t[r]===void 0&&delete t[r];return t}function gt(e,t=[]){let r=Object.assign({},e);for(let o of t)o in r&&delete r[o];return r}function br(e){throw new Error("Unexpected object: "+e)}function ae(e,t){let r=t.resolveItems();if(r.length<=0)return null;let o=t.resolveActiveIndex(),n=o!=null?o:-1,i=(()=>{switch(e.focus){case 0:return r.findIndex(a=>!t.resolveDisabled(a));case 1:{let a=r.slice().reverse().findIndex((l,s,u)=>n!==-1&&u.length-s-1>=n?!1:!t.resolveDisabled(l));return a===-1?a:r.length-1-a}case 2:return r.findIndex((a,l)=>l<=n?!1:!t.resolveDisabled(a));case 3:{let a=r.slice().reverse().findIndex(l=>!t.resolveDisabled(l));return a===-1?a:r.length-1-a}case 4:return r.findIndex(a=>t.resolveId(a)===e.id);case 5:return null;default:br(e);}})();return i===-1?o:i}function G(e){let t=e.parentElement,r=null;for(;t&&!(t instanceof HTMLFieldSetElement);)t instanceof HTMLLegendElement&&(r=t),t=t.parentElement;let o=(t==null?void 0:t.getAttribute("disabled"))==="";return o&&Tr(r)?!1:o}function Tr(e){if(!e)return !1;let t=e.previousElementSibling;for(;t!==null;){if(t instanceof HTMLLegendElement)return !1;t=t.previousElementSibling;}return !0}function w$1(e,t,r){let o=useRef(t);o.current=t,useEffect(()=>{function n(i){o.current.call(window,i);}return window.addEventListener(e,n,r),()=>window.removeEventListener(e,n,r)},[e,r]);}var Pt=createContext(null);Pt.displayName="OpenClosedContext";function _(){return useContext(Pt)}function W({value:e,children:t}){return React__default.createElement(Pt.Provider,{value:e},t)}function ro(e){var r;if(e.type)return e.type;let t=(r=e.as)!=null?r:"button";if(typeof t=="string"&&t.toLowerCase()==="button")return "button"}function U(e,t){let[r,o]=useState(()=>ro(e));return x$1(()=>{o(ro(e));},[e.type,e.as]),x$1(()=>{r||!t.current||t.current instanceof HTMLButtonElement&&!t.current.hasAttribute("type")&&o("button");},[r,t]),r}function se({container:e,accept:t,walk:r,enabled:o=!0}){let n=useRef(t),i=useRef(r);useEffect(()=>{n.current=t,i.current=r;},[t,r]),x$1(()=>{if(!e||!o)return;let a=n.current,l=i.current,s=Object.assign(c=>a(c),{acceptNode:a}),u=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT,s,!1);for(;u.nextNode();)l(u.currentNode);},[e,o,n,i]);}var Ar={[1](e){return e.disabled||e.comboboxState===1?e:{...e,activeOptionIndex:null,comboboxState:1}},[0](e){return e.disabled||e.comboboxState===0?e:{...e,comboboxState:0}},[2](e,t){return e.disabled===t.disabled?e:{...e,disabled:t.disabled}},[3](e,t){if(e.disabled||e.optionsRef.current&&!e.optionsPropsRef.current.static&&e.comboboxState===1)return e;let r=ae(t,{resolveItems:()=>e.options,resolveActiveIndex:()=>e.activeOptionIndex,resolveId:o=>o.id,resolveDisabled:o=>o.dataRef.current.disabled});return e.activeOptionIndex===r?e:{...e,activeOptionIndex:r}},[4]:(e,t)=>{var i;let r=e.activeOptionIndex!==null?e.options[e.activeOptionIndex]:null,o=Array.from((i=e.optionsRef.current)==null?void 0:i.querySelectorAll('[id^="headlessui-combobox-option-"]')).reduce((a,l,s)=>Object.assign(a,{[l.id]:s}),{}),n=[...e.options,{id:t.id,dataRef:t.dataRef}].sort((a,l)=>o[a.id]-o[l.id]);return {...e,options:n,activeOptionIndex:(()=>r===null?null:n.indexOf(r))()}},[5]:(e,t)=>{let r=e.options.slice(),o=e.activeOptionIndex!==null?r[e.activeOptionIndex]:null,n=r.findIndex(i=>i.id===t.id);return n!==-1&&r.splice(n,1),{...e,options:r,activeOptionIndex:(()=>n===e.activeOptionIndex||o===null?null:r.indexOf(o))()}}},vt=createContext(null);vt.displayName="ComboboxContext";function pe(e){let t=useContext(vt);if(t===null){let r=new Error(`<${e} /> is missing a parent <Combobox /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(r,pe),r}return t}var Rt=createContext(null);Rt.displayName="ComboboxActions";function Ue(){let e=useContext(Rt);if(e===null){let t=new Error("ComboboxActions is missing a parent <Combobox /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(t,Ue),t}return e}function hr(e,t){return S(t.type,Ar,e,t)}var Or=Fragment$1,Ir=D(function(t,r){let{value:o,onChange:n,disabled:i=!1,...a}=t,l=useRef({value:o,onChange:n}),s=useRef({static:!1,hold:!1}),u=useRef({displayValue:void 0}),c=useReducer(hr,{comboboxState:1,comboboxPropsRef:l,optionsPropsRef:s,inputPropsRef:u,labelRef:createRef(),inputRef:createRef(),buttonRef:createRef(),optionsRef:createRef(),disabled:i,options:[],activeOptionIndex:null}),[{comboboxState:m,options:b,activeOptionIndex:T,optionsRef:y,inputRef:p,buttonRef:f},d]=c;x$1(()=>{l.current.value=o;},[o,l]),x$1(()=>{l.current.onChange=n;},[n,l]),x$1(()=>d({type:2,disabled:i}),[i]),w$1("mousedown",O=>{var N,K,V;let L=O.target;m===0&&(((N=f.current)==null?void 0:N.contains(L))||((K=p.current)==null?void 0:K.contains(L))||((V=y.current)==null?void 0:V.contains(L))||d({type:1}));});let P=T===null?null:b[T].dataRef.current.value,C=useMemo(()=>({open:m===0,disabled:i,activeIndex:T,activeOption:P}),[m,i,b,T]),R=useCallback(()=>{if(!p.current||o===void 0)return;let O=u.current.displayValue;typeof O=="function"?p.current.value=O(o):typeof o=="string"&&(p.current.value=o);},[o,p,u]),g=useCallback(O=>{let L=b.find(K=>K.id===O);if(!L)return;let{dataRef:N}=L;l.current.onChange(N.current.value),R();},[b,l,p]),v=useCallback(()=>{if(T!==null){let{dataRef:O}=b[T];l.current.onChange(O.current.value),R();}},[T,b,l,p]),h=useMemo(()=>({selectOption:g,selectActiveOption:v}),[g,v]);return x$1(()=>{m===1&&R();},[R,m]),x$1(R,[R]),React__default.createElement(Rt.Provider,{value:h},React__default.createElement(vt.Provider,{value:c},React__default.createElement(W,{value:S(m,{[0]:0,[1]:1})},E({props:r===null?a:{...a,ref:r},slot:C,defaultTag:Or,name:"Combobox"}))))}),Lr="input",Dr=D(function(t,r){var R,g;let{value:o,onChange:n,displayValue:i,...a}=t,[l,s]=pe("Combobox.Input"),u=Ue(),c=I(l.inputRef,r),m=l.inputPropsRef,b=`headlessui-combobox-input-${A$1()}`,T=Q(),y=ke(n);x$1(()=>{m.current.displayValue=i;},[i,m]);let p=useCallback(v=>{switch(v.key){case"Enter":v.preventDefault(),v.stopPropagation(),u.selectActiveOption(),s({type:1});break;case"ArrowDown":return v.preventDefault(),v.stopPropagation(),S(l.comboboxState,{[0]:()=>s({type:3,focus:2}),[1]:()=>{s({type:0}),T.nextFrame(()=>{l.comboboxPropsRef.current.value||s({type:3,focus:0});});}});case"ArrowUp":return v.preventDefault(),v.stopPropagation(),S(l.comboboxState,{[0]:()=>s({type:3,focus:1}),[1]:()=>{s({type:0}),T.nextFrame(()=>{l.comboboxPropsRef.current.value||s({type:3,focus:3});});}});case"Home":case"PageUp":return v.preventDefault(),v.stopPropagation(),s({type:3,focus:0});case"End":case"PageDown":return v.preventDefault(),v.stopPropagation(),s({type:3,focus:3});case"Escape":return v.preventDefault(),l.optionsRef.current&&!l.optionsPropsRef.current.static&&v.stopPropagation(),s({type:1});case"Tab":u.selectActiveOption(),s({type:1});break}},[T,s,l,u]),f=useCallback(v=>{var h;s({type:0}),(h=y.current)==null||h.call(y,v);},[s,y]),d=ee(()=>{if(!!l.labelRef.current)return [l.labelRef.current.id].join(" ")},[l.labelRef.current]),P=useMemo(()=>({open:l.comboboxState===0,disabled:l.disabled}),[l]),C={ref:c,id:b,role:"combobox",type:"text","aria-controls":(R=l.optionsRef.current)==null?void 0:R.id,"aria-expanded":l.disabled?void 0:l.comboboxState===0,"aria-activedescendant":l.activeOptionIndex===null||(g=l.options[l.activeOptionIndex])==null?void 0:g.id,"aria-labelledby":d,disabled:l.disabled,onKeyDown:p,onChange:f};return E({props:{...a,...C},slot:P,defaultTag:Lr,name:"Combobox.Input"})}),Mr="button",Fr=D(function(t,r){var p;let[o,n]=pe("Combobox.Button"),i=Ue(),a=I(o.buttonRef,r),l=`headlessui-combobox-button-${A$1()}`,s=Q(),u=useCallback(f=>{switch(f.key){case"ArrowDown":return f.preventDefault(),f.stopPropagation(),o.comboboxState===1&&(n({type:0}),s.nextFrame(()=>{o.comboboxPropsRef.current.value||n({type:3,focus:0});})),s.nextFrame(()=>{var d;return (d=o.inputRef.current)==null?void 0:d.focus({preventScroll:!0})});case"ArrowUp":return f.preventDefault(),f.stopPropagation(),o.comboboxState===1&&(n({type:0}),s.nextFrame(()=>{o.comboboxPropsRef.current.value||n({type:3,focus:3});})),s.nextFrame(()=>{var d;return (d=o.inputRef.current)==null?void 0:d.focus({preventScroll:!0})});case"Escape":return f.preventDefault(),o.optionsRef.current&&!o.optionsPropsRef.current.static&&f.stopPropagation(),n({type:1}),s.nextFrame(()=>{var d;return (d=o.inputRef.current)==null?void 0:d.focus({preventScroll:!0})})}},[s,n,o,i]),c=useCallback(f=>{if(G(f.currentTarget))return f.preventDefault();o.comboboxState===0?n({type:1}):(f.preventDefault(),n({type:0})),s.nextFrame(()=>{var d;return (d=o.inputRef.current)==null?void 0:d.focus({preventScroll:!0})});},[n,s,o]),m=ee(()=>{if(!!o.labelRef.current)return [o.labelRef.current.id,l].join(" ")},[o.labelRef.current,l]),b=useMemo(()=>({open:o.comboboxState===0,disabled:o.disabled}),[o]),T=t,y={ref:a,id:l,type:U(t,o.buttonRef),tabIndex:-1,"aria-haspopup":!0,"aria-controls":(p=o.optionsRef.current)==null?void 0:p.id,"aria-expanded":o.disabled?void 0:o.comboboxState===0,"aria-labelledby":m,disabled:o.disabled,onClick:c,onKeyDown:u};return E({props:{...T,...y},slot:b,defaultTag:Mr,name:"Combobox.Button"})}),wr="label";function kr(e){let[t]=pe("Combobox.Label"),r=`headlessui-combobox-label-${A$1()}`,o=useCallback(()=>{var a;return (a=t.inputRef.current)==null?void 0:a.focus({preventScroll:!0})},[t.inputRef]),n=useMemo(()=>({open:t.comboboxState===0,disabled:t.disabled}),[t]),i={ref:t.labelRef,id:r,onClick:o};return E({props:{...e,...i},slot:n,defaultTag:wr,name:"Combobox.Label"})}var _r="ul",Gr=1|2,Hr=D(function(t,r){var y;let{hold:o=!1,...n}=t,[i]=pe("Combobox.Options"),{optionsPropsRef:a}=i,l=I(i.optionsRef,r),s=`headlessui-combobox-options-${A$1()}`,u=_(),c=(()=>u!==null?u===0:i.comboboxState===0)();x$1(()=>{var p;a.current.static=(p=t.static)!=null?p:!1;},[a,t.static]),x$1(()=>{a.current.hold=o;},[o,a]),se({container:i.optionsRef.current,enabled:i.comboboxState===0,accept(p){return p.getAttribute("role")==="option"?NodeFilter.FILTER_REJECT:p.hasAttribute("role")?NodeFilter.FILTER_SKIP:NodeFilter.FILTER_ACCEPT},walk(p){p.setAttribute("role","none");}});let m=ee(()=>{var p,f,d;return (d=(p=i.labelRef.current)==null?void 0:p.id)!=null?d:(f=i.buttonRef.current)==null?void 0:f.id},[i.labelRef.current,i.buttonRef.current]),b=useMemo(()=>({open:i.comboboxState===0}),[i]),T={"aria-activedescendant":i.activeOptionIndex===null||(y=i.options[i.activeOptionIndex])==null?void 0:y.id,"aria-labelledby":m,role:"listbox",id:s,ref:l};return E({props:{...n,...T},slot:b,defaultTag:_r,features:Gr,visible:c,name:"Combobox.Options"})}),Ur="li";function Br(e){let{disabled:t=!1,value:r,...o}=e,[n,i]=pe("Combobox.Option"),a=Ue(),l=`headlessui-combobox-option-${A$1()}`,s=n.activeOptionIndex!==null?n.options[n.activeOptionIndex].id===l:!1,u=n.comboboxPropsRef.current.value===r,c=useRef({disabled:t,value:r});x$1(()=>{c.current.disabled=t;},[c,t]),x$1(()=>{c.current.value=r;},[c,r]),x$1(()=>{var P,C;c.current.textValue=(C=(P=document.getElementById(l))==null?void 0:P.textContent)==null?void 0:C.toLowerCase();},[c,l]);let m=useCallback(()=>a.selectOption(l),[a,l]);x$1(()=>(i({type:4,id:l,dataRef:c}),()=>i({type:5,id:l})),[c,l]),x$1(()=>{n.comboboxState===0&&(!u||i({type:3,focus:4,id:l}));},[n.comboboxState,u,l]),x$1(()=>{if(n.comboboxState!==0||!s)return;let P=k$1();return P.requestAnimationFrame(()=>{var C,R;(R=(C=document.getElementById(l))==null?void 0:C.scrollIntoView)==null||R.call(C,{block:"nearest"});}),P.dispose},[l,s,n.comboboxState,n.activeOptionIndex]);let b=useCallback(P=>{if(t)return P.preventDefault();m(),i({type:1}),k$1().nextFrame(()=>{var C;return (C=n.inputRef.current)==null?void 0:C.focus({preventScroll:!0})});},[i,n.inputRef,t,m]),T=useCallback(()=>{if(t)return i({type:3,focus:5});i({type:3,focus:4,id:l});},[t,l,i]),y=useCallback(()=>{t||s||i({type:3,focus:4,id:l});},[t,s,l,i]),p=useCallback(()=>{t||!s||n.optionsPropsRef.current.hold||i({type:3,focus:5});},[t,s,i,n.comboboxState,n.comboboxPropsRef]),f=useMemo(()=>({active:s,selected:u,disabled:t}),[s,u,t]);return E({props:{...o,...{id:l,role:"option",tabIndex:t===!0?void 0:-1,"aria-disabled":t===!0?!0:void 0,"aria-selected":u===!0?!0:void 0,disabled:void 0,onClick:b,onFocus:T,onPointerMove:y,onMouseMove:y,onPointerLeave:p,onMouseLeave:p}},slot:f,defaultTag:Ur,name:"Combobox.Option"})}Object.assign(Ir,{Input:Dr,Button:Fr,Label:kr,Options:Hr,Option:Br});var Et=["[contentEditable=true]","[tabindex]","a[href]","area[href]","button:not([disabled])","iframe","input:not([disabled])","select:not([disabled])","textarea:not([disabled])"].map(e=>`${e}:not([tabindex='-1'])`).join(",");function xe(e=document.body){return e==null?[]:Array.from(e.querySelectorAll(Et))}function de(e,t=0){return e===document.body?!1:S(t,{[0](){return e.matches(Et)},[1](){let r=e;for(;r!==null;){if(r.matches(Et))return !0;r=r.parentElement;}return !1}})}function ce(e){e==null||e.focus({preventScroll:!0});}function M(e,t){let r=Array.isArray(e)?e.slice().sort((c,m)=>{let b=c.compareDocumentPosition(m);return b&Node.DOCUMENT_POSITION_FOLLOWING?-1:b&Node.DOCUMENT_POSITION_PRECEDING?1:0}):xe(e),o=document.activeElement,n=(()=>{if(t&(1|4))return 1;if(t&(2|8))return -1;throw new Error("Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last")})(),i=(()=>{if(t&1)return 0;if(t&2)return Math.max(0,r.indexOf(o))-1;if(t&4)return Math.max(0,r.indexOf(o))+1;if(t&8)return r.length-1;throw new Error("Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last")})(),a=t&32?{preventScroll:!0}:{},l=0,s=r.length,u;do{if(l>=s||l+s<=0)return 0;let c=i+l;if(t&16)c=(c+s)%s;else {if(c<0)return 3;if(c>=s)return 1}u=r[c],u==null||u.focus(a),l+=n;}while(u!==document.activeElement);return u.hasAttribute("tabindex")||u.setAttribute("tabindex","0"),2}function Be(){let e=useRef(!1);return useEffect(()=>(e.current=!0,()=>{e.current=!1;}),[]),e}function Ne(e,t=30,{initialFocus:r,containers:o}={}){let n=useRef(typeof window!="undefined"?document.activeElement:null),i=useRef(null),a=Be(),l=Boolean(t&16),s=Boolean(t&2);useEffect(()=>{!l||(n.current=document.activeElement);},[l]),useEffect(()=>{if(!!l)return ()=>{ce(n.current),n.current=null;}},[l]),useEffect(()=>{if(!s||!e.current)return;let u=document.activeElement;if(r==null?void 0:r.current){if((r==null?void 0:r.current)===u){i.current=u;return}}else if(e.current.contains(u)){i.current=u;return}(r==null?void 0:r.current)?ce(r.current):M(e.current,1)===0&&console.warn("There are no focusable elements inside the <FocusTrap />"),i.current=document.activeElement;},[e,r,s]),w$1("keydown",u=>{!(t&4)||!e.current||u.key==="Tab"&&(u.preventDefault(),M(e.current,(u.shiftKey?2:4)|16)===2&&(i.current=document.activeElement));}),w$1("focus",u=>{if(!(t&8))return;let c=new Set(o==null?void 0:o.current);if(c.add(e),!c.size)return;let m=i.current;if(!m||!a.current)return;let b=u.target;b&&b instanceof HTMLElement?Kr(c,b)?(i.current=b,ce(b)):(u.preventDefault(),u.stopPropagation(),ce(m)):ce(i.current);},!0);}function Kr(e,t){var r;for(let o of e)if((r=o.current)==null?void 0:r.contains(t))return !0;return !1}var fe=new Set,J=new Map;function po(e){e.setAttribute("aria-hidden","true"),e.inert=!0;}function co(e){let t=J.get(e);!t||(t["aria-hidden"]===null?e.removeAttribute("aria-hidden"):e.setAttribute("aria-hidden",t["aria-hidden"]),e.inert=t.inert);}function fo(e,t=!0){x$1(()=>{if(!t||!e.current)return;let r=e.current;fe.add(r);for(let o of J.keys())o.contains(r)&&(co(o),J.delete(o));return document.querySelectorAll("body > *").forEach(o=>{if(o instanceof HTMLElement){for(let n of fe)if(o.contains(n))return;fe.size===1&&(J.set(o,{"aria-hidden":o.getAttribute("aria-hidden"),inert:o.inert}),po(o));}}),()=>{if(fe.delete(r),fe.size>0)document.querySelectorAll("body > *").forEach(o=>{if(o instanceof HTMLElement&&!J.has(o)){for(let n of fe)if(o.contains(n))return;J.set(o,{"aria-hidden":o.getAttribute("aria-hidden"),inert:o.inert}),po(o);}});else for(let o of J.keys())co(o),J.delete(o);}},[t]);}var mo=createContext(!1);function bo(){return useContext(mo)}function At(e){return React__default.createElement(mo.Provider,{value:e.force},e.children)}function Xr(){let e=bo(),t=useContext(Po),[r,o]=useState(()=>{if(!e&&t!==null||typeof window=="undefined")return null;let n=document.getElementById("headlessui-portal-root");if(n)return n;let i=document.createElement("div");return i.setAttribute("id","headlessui-portal-root"),document.body.appendChild(i)});return useEffect(()=>{r!==null&&(document.body.contains(r)||document.body.appendChild(r));},[r]),useEffect(()=>{e||t!==null&&o(t.current);},[t,o,e]),r}var Jr=Fragment$1;function We(e){let t=e,r=Xr(),[o]=useState(()=>typeof window=="undefined"?null:document.createElement("div")),n=q$1();return x$1(()=>{if(!!r&&!!o)return r.appendChild(o),()=>{var i;!r||!o||(r.removeChild(o),r.childNodes.length<=0&&((i=r.parentElement)==null||i.removeChild(r)));}},[r,o]),n?!r||!o?null:createPortal(E({props:t,defaultTag:Jr,name:"Portal"}),o):null}var Zr=Fragment$1,Po=createContext(null);function en(e){let{target:t,...r}=e;return React__default.createElement(Po.Provider,{value:t},E({props:r,defaultTag:Zr,name:"Popover.Group"}))}We.Group=en;var vo=createContext(null);function Ro(){let e=useContext(vo);if(e===null){let t=new Error("You used a <Description /> component, but it is not inside a relevant parent.");throw Error.captureStackTrace&&Error.captureStackTrace(t,Ro),t}return e}function re(){let[e,t]=useState([]);return [e.length>0?e.join(" "):void 0,useMemo(()=>function(o){let n=useCallback(a=>(t(l=>[...l,a]),()=>t(l=>{let s=l.slice(),u=s.indexOf(a);return u!==-1&&s.splice(u,1),s})),[]),i=useMemo(()=>({register:n,slot:o.slot,name:o.name,props:o.props}),[n,o.slot,o.name,o.props]);return React__default.createElement(vo.Provider,{value:i},o.children)},[t])]}var an="p";function me(e){let t=Ro(),r=`headlessui-description-${A$1()}`;x$1(()=>t.register(r),[r,t.register]);let o=e,n={...t.props,id:r};return E({props:{...o,...n},slot:t.slot||{},defaultTag:an,name:t.name||"Description"})}var ht=createContext(()=>{});ht.displayName="StackContext";function cn(){return useContext(ht)}function Eo({children:e,onUpdate:t,type:r,element:o}){let n=cn(),i=useCallback((...a)=>{t==null||t(...a),n(...a);},[n,t]);return x$1(()=>(i(0,r,o),()=>i(1,r,o)),[i,r,o]),React__default.createElement(ht.Provider,{value:i},e)}var yn={[0](e,t){return e.titleId===t.id?e:{...e,titleId:t.id}}},Ve=createContext(null);Ve.displayName="DialogContext";function It(e){let t=useContext(Ve);if(t===null){let r=new Error(`<${e} /> is missing a parent <${An.displayName} /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(r,It),r}return t}function gn(e,t){return S(t.type,yn,e,t)}var Pn="div",xn=1|2,vn=D(function(t,r){let{open:o,onClose:n,initialFocus:i,...a}=t,[l,s]=useState(0),u=_();o===void 0&&u!==null&&(o=S(u,{[0]:!0,[1]:!1}));let c=useRef(new Set),m=useRef(null),b=I(m,r),T=t.hasOwnProperty("open")||u!==null,y=t.hasOwnProperty("onClose");if(!T&&!y)throw new Error("You have to provide an `open` and an `onClose` prop to the `Dialog` component.");if(!T)throw new Error("You provided an `onClose` prop to the `Dialog`, but forgot an `open` prop.");if(!y)throw new Error("You provided an `open` prop to the `Dialog`, but forgot an `onClose` prop.");if(typeof o!="boolean")throw new Error(`You provided an \`open\` prop to the \`Dialog\`, but the value is not a boolean. Received: ${o}`);if(typeof n!="function")throw new Error(`You provided an \`onClose\` prop to the \`Dialog\`, but the value is not a function. Received: ${n}`);let p=o?0:1,f=(()=>u!==null?u===0:p===0)(),[d,P]=useReducer(gn,{titleId:null,descriptionId:null}),C=useCallback(()=>n(!1),[n]),R=useCallback(F=>P({type:0,id:F}),[P]),v=q$1()&&p===0,h=l>1,O=useContext(Ve)!==null;Ne(m,v?S(h?"parent":"leaf",{parent:16,leaf:30}):1,{initialFocus:i,containers:c}),fo(m,h?v:!1),w$1("mousedown",F=>{var H;let $=F.target;p===0&&(h||((H=m.current)==null?void 0:H.contains($))||C());}),w$1("keydown",F=>{F.key==="Escape"&&p===0&&(h||(F.preventDefault(),F.stopPropagation(),C()));}),useEffect(()=>{if(p!==0||O)return;let F=document.documentElement.style.overflow,$=document.documentElement.style.paddingRight,H=window.innerWidth-document.documentElement.clientWidth;return document.documentElement.style.overflow="hidden",document.documentElement.style.paddingRight=`${H}px`,()=>{document.documentElement.style.overflow=F,document.documentElement.style.paddingRight=$;}},[p,O]),useEffect(()=>{if(p!==0||!m.current)return;let F=new IntersectionObserver($=>{for(let H of $)H.boundingClientRect.x===0&&H.boundingClientRect.y===0&&H.boundingClientRect.width===0&&H.boundingClientRect.height===0&&C();});return F.observe(m.current),()=>F.disconnect()},[p,m,C]);let[N,K]=re(),V=`headlessui-dialog-${A$1()}`,Fe=useMemo(()=>[{dialogState:p,close:C,setTitleId:R},d],[p,d,C,R]),ge=useMemo(()=>({open:p===0}),[p]),we={ref:b,id:V,role:"dialog","aria-modal":p===0?!0:void 0,"aria-labelledby":d.titleId,"aria-describedby":N,onClick(F){F.stopPropagation();}},X=a;return React__default.createElement(Eo,{type:"Dialog",element:m,onUpdate:useCallback((F,$,H)=>{$==="Dialog"&&S(F,{[0](){c.current.add(H),s(Pe=>Pe+1);},[1](){c.current.add(H),s(Pe=>Pe-1);}});},[])},React__default.createElement(At,{force:!0},React__default.createElement(We,null,React__default.createElement(Ve.Provider,{value:Fe},React__default.createElement(We.Group,{target:m},React__default.createElement(At,{force:!1},React__default.createElement(K,{slot:ge,name:"Dialog.Description"},E({props:{...X,...we},slot:ge,defaultTag:Pn,features:xn,visible:f,name:"Dialog"}))))))))}),Rn="div",En=D(function(t,r){let[{dialogState:o,close:n}]=It("Dialog.Overlay"),i=I(r),a=`headlessui-dialog-overlay-${A$1()}`,l=useCallback(m=>{if(m.target===m.currentTarget){if(G(m.currentTarget))return m.preventDefault();m.preventDefault(),m.stopPropagation(),n();}},[n]),s=useMemo(()=>({open:o===0}),[o]);return E({props:{...t,...{ref:i,id:a,"aria-hidden":!0,onClick:l}},slot:s,defaultTag:Rn,name:"Dialog.Overlay"})}),Cn="h2";function Sn(e){let[{dialogState:t,setTitleId:r}]=It("Dialog.Title"),o=`headlessui-dialog-title-${A$1()}`;useEffect(()=>(r(o),()=>r(null)),[o,r]);let n=useMemo(()=>({open:t===0}),[t]);return E({props:{...e,...{id:o}},slot:n,defaultTag:Cn,name:"Dialog.Title"})}var An=Object.assign(vn,{Overlay:En,Title:Sn,Description:me});var Ln={[0]:e=>({...e,disclosureState:S(e.disclosureState,{[0]:1,[1]:0})}),[1]:e=>e.disclosureState===1?e:{...e,disclosureState:1},[4](e){return e.linkedPanel===!0?e:{...e,linkedPanel:!0}},[5](e){return e.linkedPanel===!1?e:{...e,linkedPanel:!1}},[2](e,t){return e.buttonId===t.buttonId?e:{...e,buttonId:t.buttonId}},[3](e,t){return e.panelId===t.panelId?e:{...e,panelId:t.panelId}}},Mt=createContext(null);Mt.displayName="DisclosureContext";function Ft(e){let t=useContext(Mt);if(t===null){let r=new Error(`<${e} /> is missing a parent <${Ye.name} /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(r,Ft),r}return t}var wt=createContext(null);wt.displayName="DisclosureAPIContext";function Ao(e){let t=useContext(wt);if(t===null){let r=new Error(`<${e} /> is missing a parent <${Ye.name} /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(r,Ao),r}return t}var kt=createContext(null);kt.displayName="DisclosurePanelContext";function Dn(){return useContext(kt)}function Mn(e,t){return S(t.type,Ln,e,t)}var Fn=Fragment$1;function Ye(e){let{defaultOpen:t=!1,...r}=e,o=`headlessui-disclosure-button-${A$1()}`,n=`headlessui-disclosure-panel-${A$1()}`,i=useReducer(Mn,{disclosureState:t?0:1,linkedPanel:!1,buttonId:o,panelId:n}),[{disclosureState:a},l]=i;useEffect(()=>l({type:2,buttonId:o}),[o,l]),useEffect(()=>l({type:3,panelId:n}),[n,l]);let s=useCallback(m=>{l({type:1});let b=(()=>m?m instanceof HTMLElement?m:m.current instanceof HTMLElement?m.current:document.getElementById(o):document.getElementById(o))();b==null||b.focus();},[l,o]),u=useMemo(()=>({close:s}),[s]),c=useMemo(()=>({open:a===0,close:s}),[a,s]);return React__default.createElement(Mt.Provider,{value:i},React__default.createElement(wt.Provider,{value:u},React__default.createElement(W,{value:S(a,{[0]:0,[1]:1})},E({props:r,slot:c,defaultTag:Fn,name:"Disclosure"}))))}var wn="button",kn=D(function(t,r){let[o,n]=Ft("Disclosure.Button"),i=useRef(null),a=I(i,r),l=Dn(),s=l===null?!1:l===o.panelId,u=useCallback(f=>{var d;if(s){if(o.disclosureState===1)return;switch(f.key){case" ":case"Enter":f.preventDefault(),f.stopPropagation(),n({type:0}),(d=document.getElementById(o.buttonId))==null||d.focus();break}}else switch(f.key){case" ":case"Enter":f.preventDefault(),f.stopPropagation(),n({type:0});break}},[n,s,o.disclosureState,o.buttonId]),c=useCallback(f=>{switch(f.key){case" ":f.preventDefault();break}},[]),m=useCallback(f=>{var d;G(f.currentTarget)||t.disabled||(s?(n({type:0}),(d=document.getElementById(o.buttonId))==null||d.focus()):n({type:0}));},[n,t.disabled,o.buttonId,s]),b=useMemo(()=>({open:o.disclosureState===0}),[o]),T=U(t,i),y=t,p=s?{ref:a,type:T,onKeyDown:u,onClick:m}:{ref:a,id:o.buttonId,type:T,"aria-expanded":t.disabled?void 0:o.disclosureState===0,"aria-controls":o.linkedPanel?o.panelId:void 0,onKeyDown:u,onKeyUp:c,onClick:m};return E({props:{...y,...p},slot:b,defaultTag:wn,name:"Disclosure.Button"})}),_n="div",Gn=1|2,Hn=D(function(t,r){let[o,n]=Ft("Disclosure.Panel"),{close:i}=Ao("Disclosure.Panel"),a=I(r,()=>{o.linkedPanel||n({type:4});}),l=_(),s=(()=>l!==null?l===0:o.disclosureState===0)();useEffect(()=>()=>n({type:5}),[n]),useEffect(()=>{var b;o.disclosureState===1&&((b=t.unmount)!=null?b:!0)&&n({type:5});},[o.disclosureState,t.unmount,n]);let u=useMemo(()=>({open:o.disclosureState===0,close:i}),[o,i]),c={ref:a,id:o.panelId},m=t;return React__default.createElement(kt.Provider,{value:o.panelId},E({props:{...m,...c},slot:u,defaultTag:_n,features:Gn,visible:s,name:"Disclosure.Panel"}))});Ye.Button=kn;Ye.Panel=Hn;var $n={[1](e){return e.disabled||e.listboxState===1?e:{...e,activeOptionIndex:null,listboxState:1}},[0](e){return e.disabled||e.listboxState===0?e:{...e,listboxState:0}},[2](e,t){return e.disabled===t.disabled?e:{...e,disabled:t.disabled}},[3](e,t){return e.orientation===t.orientation?e:{...e,orientation:t.orientation}},[4](e,t){if(e.disabled||e.listboxState===1)return e;let r=ae(t,{resolveItems:()=>e.options,resolveActiveIndex:()=>e.activeOptionIndex,resolveId:o=>o.id,resolveDisabled:o=>o.dataRef.current.disabled});return e.searchQuery===""&&e.activeOptionIndex===r?e:{...e,searchQuery:"",activeOptionIndex:r}},[5]:(e,t)=>{if(e.disabled||e.listboxState===1)return e;let o=e.searchQuery!==""?0:1,n=e.searchQuery+t.value.toLowerCase(),a=(e.activeOptionIndex!==null?e.options.slice(e.activeOptionIndex+o).concat(e.options.slice(0,e.activeOptionIndex+o)):e.options).find(s=>{var u;return !s.dataRef.current.disabled&&((u=s.dataRef.current.textValue)==null?void 0:u.startsWith(n))}),l=a?e.options.indexOf(a):-1;return l===-1||l===e.activeOptionIndex?{...e,searchQuery:n}:{...e,searchQuery:n,activeOptionIndex:l}},[6](e){return e.disabled||e.listboxState===1||e.searchQuery===""?e:{...e,searchQuery:""}},[7]:(e,t)=>{var n;let r=Array.from((n=e.optionsRef.current)==null?void 0:n.querySelectorAll('[id^="headlessui-listbox-option-"]')).reduce((i,a,l)=>Object.assign(i,{[a.id]:l}),{}),o=[...e.options,{id:t.id,dataRef:t.dataRef}].sort((i,a)=>r[i.id]-r[a.id]);return {...e,options:o}},[8]:(e,t)=>{let r=e.options.slice(),o=e.activeOptionIndex!==null?r[e.activeOptionIndex]:null,n=r.findIndex(i=>i.id===t.id);return n!==-1&&r.splice(n,1),{...e,options:r,activeOptionIndex:(()=>n===e.activeOptionIndex||o===null?null:r.indexOf(o))()}}},Gt=createContext(null);Gt.displayName="ListboxContext";function Re(e){let t=useContext(Gt);if(t===null){let r=new Error(`<${e} /> is missing a parent <${Ee.name} /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(r,Re),r}return t}function Qn(e,t){return S(t.type,$n,e,t)}var qn=Fragment$1;function Ee(e){let{value:t,onChange:r,disabled:o=!1,horizontal:n=!1,...i}=e,a=n?"horizontal":"vertical",l=useReducer(Qn,{listboxState:1,propsRef:{current:{value:t,onChange:r}},labelRef:createRef(),buttonRef:createRef(),optionsRef:createRef(),disabled:o,orientation:a,options:[],searchQuery:"",activeOptionIndex:null}),[{listboxState:s,propsRef:u,optionsRef:c,buttonRef:m},b]=l;x$1(()=>{u.current.value=t;},[t,u]),x$1(()=>{u.current.onChange=r;},[r,u]),x$1(()=>b({type:2,disabled:o}),[o]),x$1(()=>b({type:3,orientation:a}),[a]),w$1("mousedown",y=>{var f,d,P;let p=y.target;s===0&&(((f=m.current)==null?void 0:f.contains(p))||((d=c.current)==null?void 0:d.contains(p))||(b({type:1}),de(p,1)||(y.preventDefault(),(P=m.current)==null||P.focus())));});let T=useMemo(()=>({open:s===0,disabled:o}),[s,o]);return React__default.createElement(Gt.Provider,{value:l},React__default.createElement(W,{value:S(s,{[0]:0,[1]:1})},E({props:i,slot:T,defaultTag:qn,name:"Listbox"})))}var zn="button",Yn=D(function(t,r){var p;let[o,n]=Re("Listbox.Button"),i=I(o.buttonRef,r),a=`headlessui-listbox-button-${A$1()}`,l=Q(),s=useCallback(f=>{switch(f.key){case" ":case"Enter":case"ArrowDown":f.preventDefault(),n({type:0}),l.nextFrame(()=>{o.propsRef.current.value||n({type:4,focus:0});});break;case"ArrowUp":f.preventDefault(),n({type:0}),l.nextFrame(()=>{o.propsRef.current.value||n({type:4,focus:3});});break}},[n,o,l]),u=useCallback(f=>{switch(f.key){case" ":f.preventDefault();break}},[]),c=useCallback(f=>{if(G(f.currentTarget))return f.preventDefault();o.listboxState===0?(n({type:1}),l.nextFrame(()=>{var d;return (d=o.buttonRef.current)==null?void 0:d.focus({preventScroll:!0})})):(f.preventDefault(),n({type:0}));},[n,l,o]),m=ee(()=>{if(!!o.labelRef.current)return [o.labelRef.current.id,a].join(" ")},[o.labelRef.current,a]),b=useMemo(()=>({open:o.listboxState===0,disabled:o.disabled}),[o]),T=t,y={ref:i,id:a,type:U(t,o.buttonRef),"aria-haspopup":!0,"aria-controls":(p=o.optionsRef.current)==null?void 0:p.id,"aria-expanded":o.disabled?void 0:o.listboxState===0,"aria-labelledby":m,disabled:o.disabled,onKeyDown:s,onKeyUp:u,onClick:c};return E({props:{...T,...y},slot:b,defaultTag:zn,name:"Listbox.Button"})}),Xn="label";function Jn(e){let[t]=Re("Listbox.Label"),r=`headlessui-listbox-label-${A$1()}`,o=useCallback(()=>{var a;return (a=t.buttonRef.current)==null?void 0:a.focus({preventScroll:!0})},[t.buttonRef]),n=useMemo(()=>({open:t.listboxState===0,disabled:t.disabled}),[t]),i={ref:t.labelRef,id:r,onClick:o};return E({props:{...e,...i},slot:n,defaultTag:Xn,name:"Listbox.Label"})}var Zn="ul",ei=1|2,ti=D(function(t,r){var f;let[o,n]=Re("Listbox.Options"),i=I(o.optionsRef,r),a=`headlessui-listbox-options-${A$1()}`,l=Q(),s=Q(),u=_(),c=(()=>u!==null?u===0:o.listboxState===0)();x$1(()=>{let d=o.optionsRef.current;!d||o.listboxState===0&&d!==document.activeElement&&d.focus({preventScroll:!0});},[o.listboxState,o.optionsRef]);let m=useCallback(d=>{switch(s.dispose(),d.key){case" ":if(o.searchQuery!=="")return d.preventDefault(),d.stopPropagation(),n({type:5,value:d.key});case"Enter":if(d.preventDefault(),d.stopPropagation(),n({type:1}),o.activeOptionIndex!==null){let{dataRef:P}=o.options[o.activeOptionIndex];o.propsRef.current.onChange(P.current.value);}k$1().nextFrame(()=>{var P;return (P=o.buttonRef.current)==null?void 0:P.focus({preventScroll:!0})});break;case S(o.orientation,{vertical:"ArrowDown",horizontal:"ArrowRight"}):return d.preventDefault(),d.stopPropagation(),n({type:4,focus:2});case S(o.orientation,{vertical:"ArrowUp",horizontal:"ArrowLeft"}):return d.preventDefault(),d.stopPropagation(),n({type:4,focus:1});case"Home":case"PageUp":return d.preventDefault(),d.stopPropagation(),n({type:4,focus:0});case"End":case"PageDown":return d.preventDefault(),d.stopPropagation(),n({type:4,focus:3});case"Escape":return d.preventDefault(),d.stopPropagation(),n({type:1}),l.nextFrame(()=>{var P;return (P=o.buttonRef.current)==null?void 0:P.focus({preventScroll:!0})});case"Tab":d.preventDefault(),d.stopPropagation();break;default:d.key.length===1&&(n({type:5,value:d.key}),s.setTimeout(()=>n({type:6}),350));break}},[l,n,s,o]),b=ee(()=>{var d,P,C;return (C=(d=o.labelRef.current)==null?void 0:d.id)!=null?C:(P=o.buttonRef.current)==null?void 0:P.id},[o.labelRef.current,o.buttonRef.current]),T=useMemo(()=>({open:o.listboxState===0}),[o]),y={"aria-activedescendant":o.activeOptionIndex===null||(f=o.options[o.activeOptionIndex])==null?void 0:f.id,"aria-labelledby":b,"aria-orientation":o.orientation,id:a,onKeyDown:m,role:"listbox",tabIndex:0,ref:i};return E({props:{...t,...y},slot:T,defaultTag:Zn,features:ei,visible:c,name:"Listbox.Options"})}),oi="li";function ri(e){let{disabled:t=!1,value:r,...o}=e,[n,i]=Re("Listbox.Option"),a=`headlessui-listbox-option-${A$1()}`,l=n.activeOptionIndex!==null?n.options[n.activeOptionIndex].id===a:!1,s=n.propsRef.current.value===r,u=useRef({disabled:t,value:r});x$1(()=>{u.current.disabled=t;},[u,t]),x$1(()=>{u.current.value=r;},[u,r]),x$1(()=>{var d,P;u.current.textValue=(P=(d=document.getElementById(a))==null?void 0:d.textContent)==null?void 0:P.toLowerCase();},[u,a]);let c=useCallback(()=>n.propsRef.current.onChange(r),[n.propsRef,r]);x$1(()=>(i({type:7,id:a,dataRef:u}),()=>i({type:8,id:a})),[u,a]),x$1(()=>{var d,P;n.listboxState===0&&(!s||(i({type:4,focus:4,id:a}),(P=(d=document.getElementById(a))==null?void 0:d.focus)==null||P.call(d)));},[n.listboxState]),x$1(()=>{if(n.listboxState!==0||!l)return;let d=k$1();return d.requestAnimationFrame(()=>{var P,C;(C=(P=document.getElementById(a))==null?void 0:P.scrollIntoView)==null||C.call(P,{block:"nearest"});}),d.dispose},[a,l,n.listboxState,n.activeOptionIndex]);let m=useCallback(d=>{if(t)return d.preventDefault();c(),i({type:1}),k$1().nextFrame(()=>{var P;return (P=n.buttonRef.current)==null?void 0:P.focus({preventScroll:!0})});},[i,n.buttonRef,t,c]),b=useCallback(()=>{if(t)return i({type:4,focus:5});i({type:4,focus:4,id:a});},[t,a,i]),T=useCallback(()=>{t||l||i({type:4,focus:4,id:a});},[t,l,a,i]),y=useCallback(()=>{t||!l||i({type:4,focus:5});},[t,l,i]),p=useMemo(()=>({active:l,selected:s,disabled:t}),[l,s,t]);return E({props:{...o,...{id:a,role:"option",tabIndex:t===!0?void 0:-1,"aria-disabled":t===!0?!0:void 0,"aria-selected":s===!0?!0:void 0,disabled:void 0,onClick:m,onFocus:b,onPointerMove:T,onMouseMove:T,onPointerLeave:y,onMouseLeave:y}},slot:p,defaultTag:oi,name:"Listbox.Option"})}Ee.Button=Yn;Ee.Label=Jn;Ee.Options=ti;Ee.Option=ri;var ui={[1](e){return e.menuState===1?e:{...e,activeItemIndex:null,menuState:1}},[0](e){return e.menuState===0?e:{...e,menuState:0}},[2]:(e,t)=>{let r=ae(t,{resolveItems:()=>e.items,resolveActiveIndex:()=>e.activeItemIndex,resolveId:o=>o.id,resolveDisabled:o=>o.dataRef.current.disabled});return e.searchQuery===""&&e.activeItemIndex===r?e:{...e,searchQuery:"",activeItemIndex:r}},[3]:(e,t)=>{let o=e.searchQuery!==""?0:1,n=e.searchQuery+t.value.toLowerCase(),a=(e.activeItemIndex!==null?e.items.slice(e.activeItemIndex+o).concat(e.items.slice(0,e.activeItemIndex+o)):e.items).find(s=>{var u;return ((u=s.dataRef.current.textValue)==null?void 0:u.startsWith(n))&&!s.dataRef.current.disabled}),l=a?e.items.indexOf(a):-1;return l===-1||l===e.activeItemIndex?{...e,searchQuery:n}:{...e,searchQuery:n,activeItemIndex:l}},[4](e){return e.searchQuery===""?e:{...e,searchQuery:"",searchActiveItemIndex:null}},[5]:(e,t)=>{var n;let r=Array.from((n=e.itemsRef.current)==null?void 0:n.querySelectorAll('[id^="headlessui-menu-item-"]')).reduce((i,a,l)=>Object.assign(i,{[a.id]:l}),{}),o=[...e.items,{id:t.id,dataRef:t.dataRef}].sort((i,a)=>r[i.id]-r[a.id]);return {...e,items:o}},[6]:(e,t)=>{let r=e.items.slice(),o=e.activeItemIndex!==null?r[e.activeItemIndex]:null,n=r.findIndex(i=>i.id===t.id);return n!==-1&&r.splice(n,1),{...e,items:r,activeItemIndex:(()=>n===e.activeItemIndex||o===null?null:r.indexOf(o))()}}},Ht=createContext(null);Ht.displayName="MenuContext";function Je(e){let t=useContext(Ht);if(t===null){let r=new Error(`<${e} /> is missing a parent <${Ze.name} /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(r,Je),r}return t}function pi(e,t){return S(t.type,ui,e,t)}var di=Fragment$1;function Ze(e){let t=useReducer(pi,{menuState:1,buttonRef:createRef(),itemsRef:createRef(),items:[],searchQuery:"",activeItemIndex:null}),[{menuState:r,itemsRef:o,buttonRef:n},i]=t;w$1("mousedown",l=>{var u,c,m;let s=l.target;r===0&&(((u=n.current)==null?void 0:u.contains(s))||((c=o.current)==null?void 0:c.contains(s))||(i({type:1}),de(s,1)||(l.preventDefault(),(m=n.current)==null||m.focus())));});let a=useMemo(()=>({open:r===0}),[r]);return React__default.createElement(Ht.Provider,{value:t},React__default.createElement(W,{value:S(r,{[0]:0,[1]:1})},E({props:e,slot:a,defaultTag:di,name:"Menu"})))}var ci="button",fi=D(function(t,r){var y;let[o,n]=Je("Menu.Button"),i=I(o.buttonRef,r),a=`headlessui-menu-button-${A$1()}`,l=Q(),s=useCallback(p=>{switch(p.key){case" ":case"Enter":case"ArrowDown":p.preventDefault(),p.stopPropagation(),n({type:0}),l.nextFrame(()=>n({type:2,focus:0}));break;case"ArrowUp":p.preventDefault(),p.stopPropagation(),n({type:0}),l.nextFrame(()=>n({type:2,focus:3}));break}},[n,l]),u=useCallback(p=>{switch(p.key){case" ":p.preventDefault();break}},[]),c=useCallback(p=>{if(G(p.currentTarget))return p.preventDefault();t.disabled||(o.menuState===0?(n({type:1}),l.nextFrame(()=>{var f;return (f=o.buttonRef.current)==null?void 0:f.focus({preventScroll:!0})})):(p.preventDefault(),p.stopPropagation(),n({type:0})));},[n,l,o,t.disabled]),m=useMemo(()=>({open:o.menuState===0}),[o]),b=t,T={ref:i,id:a,type:U(t,o.buttonRef),"aria-haspopup":!0,"aria-controls":(y=o.itemsRef.current)==null?void 0:y.id,"aria-expanded":t.disabled?void 0:o.menuState===0,onKeyDown:s,onKeyUp:u,onClick:c};return E({props:{...b,...T},slot:m,defaultTag:ci,name:"Menu.Button"})}),mi="div",bi=1|2,Ti=D(function(t,r){var p,f;let[o,n]=Je("Menu.Items"),i=I(o.itemsRef,r),a=`headlessui-menu-items-${A$1()}`,l=Q(),s=_(),u=(()=>s!==null?s===0:o.menuState===0)();useEffect(()=>{let d=o.itemsRef.current;!d||o.menuState===0&&d!==document.activeElement&&d.focus({preventScroll:!0});},[o.menuState,o.itemsRef]),se({container:o.itemsRef.current,enabled:o.menuState===0,accept(d){return d.getAttribute("role")==="menuitem"?NodeFilter.FILTER_REJECT:d.hasAttribute("role")?NodeFilter.FILTER_SKIP:NodeFilter.FILTER_ACCEPT},walk(d){d.setAttribute("role","none");}});let c=useCallback(d=>{var P;switch(l.dispose(),d.key){case" ":if(o.searchQuery!=="")return d.preventDefault(),d.stopPropagation(),n({type:3,value:d.key});case"Enter":if(d.preventDefault(),d.stopPropagation(),n({type:1}),o.activeItemIndex!==null){let{id:C}=o.items[o.activeItemIndex];(P=document.getElementById(C))==null||P.click();}k$1().nextFrame(()=>{var C;return (C=o.buttonRef.current)==null?void 0:C.focus({preventScroll:!0})});break;case"ArrowDown":return d.preventDefault(),d.stopPropagation(),n({type:2,focus:2});case"ArrowUp":return d.preventDefault(),d.stopPropagation(),n({type:2,focus:1});case"Home":case"PageUp":return d.preventDefault(),d.stopPropagation(),n({type:2,focus:0});case"End":case"PageDown":return d.preventDefault(),d.stopPropagation(),n({type:2,focus:3});case"Escape":d.preventDefault(),d.stopPropagation(),n({type:1}),k$1().nextFrame(()=>{var C;return (C=o.buttonRef.current)==null?void 0:C.focus({preventScroll:!0})});break;case"Tab":d.preventDefault(),d.stopPropagation();break;default:d.key.length===1&&(n({type:3,value:d.key}),l.setTimeout(()=>n({type:4}),350));break}},[n,l,o]),m=useCallback(d=>{switch(d.key){case" ":d.preventDefault();break}},[]),b=useMemo(()=>({open:o.menuState===0}),[o]),T={"aria-activedescendant":o.activeItemIndex===null||(p=o.items[o.activeItemIndex])==null?void 0:p.id,"aria-labelledby":(f=o.buttonRef.current)==null?void 0:f.id,id:a,onKeyDown:c,onKeyUp:m,role:"menu",tabIndex:0,ref:i};return E({props:{...t,...T},slot:b,defaultTag:mi,features:bi,visible:u,name:"Menu.Items"})}),yi=Fragment$1;function gi(e){let{disabled:t=!1,onClick:r,...o}=e,[n,i]=Je("Menu.Item"),a=`headlessui-menu-item-${A$1()}`,l=n.activeItemIndex!==null?n.items[n.activeItemIndex].id===a:!1;x$1(()=>{if(n.menuState!==0||!l)return;let p=k$1();return p.requestAnimationFrame(()=>{var f,d;(d=(f=document.getElementById(a))==null?void 0:f.scrollIntoView)==null||d.call(f,{block:"nearest"});}),p.dispose},[a,l,n.menuState,n.activeItemIndex]);let s=useRef({disabled:t});x$1(()=>{s.current.disabled=t;},[s,t]),x$1(()=>{var p,f;s.current.textValue=(f=(p=document.getElementById(a))==null?void 0:p.textContent)==null?void 0:f.toLowerCase();},[s,a]),x$1(()=>(i({type:5,id:a,dataRef:s}),()=>i({type:6,id:a})),[s,a]);let u=useCallback(p=>{if(t)return p.preventDefault();if(i({type:1}),k$1().nextFrame(()=>{var f;return (f=n.buttonRef.current)==null?void 0:f.focus({preventScroll:!0})}),r)return r(p)},[i,n.buttonRef,t,r]),c=useCallback(()=>{if(t)return i({type:2,focus:5});i({type:2,focus:4,id:a});},[t,a,i]),m=useCallback(()=>{t||l||i({type:2,focus:4,id:a});},[t,l,a,i]),b=useCallback(()=>{t||!l||i({type:2,focus:5});},[t,l,i]),T=useMemo(()=>({active:l,disabled:t}),[l,t]);return E({props:{...o,...{id:a,role:"menuitem",tabIndex:t===!0?void 0:-1,"aria-disabled":t===!0?!0:void 0,disabled:void 0,onClick:u,onFocus:c,onPointerMove:m,onMouseMove:m,onPointerLeave:b,onMouseLeave:b}},slot:T,defaultTag:yi,name:"Menu.Item"})}Ze.Button=fi;Ze.Items=Ti;Ze.Item=gi;var vi={[0]:e=>({...e,popoverState:S(e.popoverState,{[0]:1,[1]:0})}),[1](e){return e.popoverState===1?e:{...e,popoverState:1}},[2](e,t){return e.button===t.button?e:{...e,button:t.button}},[3](e,t){return e.buttonId===t.buttonId?e:{...e,buttonId:t.buttonId}},[4](e,t){return e.panel===t.panel?e:{...e,panel:t.panel}},[5](e,t){return e.panelId===t.panelId?e:{...e,panelId:t.panelId}}},Ut=createContext(null);Ut.displayName="PopoverContext";function ot(e){let t=useContext(Ut);if(t===null){let r=new Error(`<${e} /> is missing a parent <${Te.name} /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(r,ot),r}return t}var Bt=createContext(null);Bt.displayName="PopoverAPIContext";function Mo(e){let t=useContext(Bt);if(t===null){let r=new Error(`<${e} /> is missing a parent <${Te.name} /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(r,Mo),r}return t}var Nt=createContext(null);Nt.displayName="PopoverGroupContext";function Fo(){return useContext(Nt)}var Wt=createContext(null);Wt.displayName="PopoverPanelContext";function Ri(){return useContext(Wt)}function Ei(e,t){return S(t.type,vi,e,t)}var Ci="div";function Te(e){let t=`headlessui-popover-button-${A$1()}`,r=`headlessui-popover-panel-${A$1()}`,o=useReducer(Ei,{popoverState:1,button:null,buttonId:t,panel:null,panelId:r}),[{popoverState:n,button:i,panel:a},l]=o;useEffect(()=>l({type:3,buttonId:t}),[t,l]),useEffect(()=>l({type:5,panelId:r}),[r,l]);let s=useMemo(()=>({buttonId:t,panelId:r,close:()=>l({type:1})}),[t,r,l]),u=Fo(),c=u==null?void 0:u.registerPopover,m=useCallback(()=>{var p;return (p=u==null?void 0:u.isFocusWithinPopoverGroup())!=null?p:(i==null?void 0:i.contains(document.activeElement))||(a==null?void 0:a.contains(document.activeElement))},[u,i,a]);useEffect(()=>c==null?void 0:c(s),[c,s]),w$1("focus",()=>{n===0&&(m()||!i||!a||l({type:1}));},!0),w$1("mousedown",p=>{let f=p.target;n===0&&((i==null?void 0:i.contains(f))||(a==null?void 0:a.contains(f))||(l({type:1}),de(f,1)||(p.preventDefault(),i==null||i.focus())));});let b=useCallback(p=>{l({type:1});let f=(()=>p?p instanceof HTMLElement?p:p.current instanceof HTMLElement?p.current:i:i)();f==null||f.focus();},[l,i]),T=useMemo(()=>({close:b}),[b]),y=useMemo(()=>({open:n===0,close:b}),[n,b]);return React__default.createElement(Ut.Provider,{value:o},React__default.createElement(Bt.Provider,{value:T},React__default.createElement(W,{value:S(n,{[0]:0,[1]:1})},E({props:e,slot:y,defaultTag:Ci,name:"Popover"}))))}var Si="button",Ai=D(function(t,r){let[o,n]=ot("Popover.Button"),i=useRef(null),a=Fo(),l=a==null?void 0:a.closeOthers,s=Ri(),u=s===null?!1:s===o.panelId,c=I(i,r,u?null:g=>n({type:2,button:g})),m=I(i,r),b=useRef(null),T=useRef(typeof window=="undefined"?null:document.activeElement);w$1("focus",()=>{T.current=b.current,b.current=document.activeElement;},!0);let y=useCallback(g=>{var v,h;if(u){if(o.popoverState===1)return;switch(g.key){case" ":case"Enter":g.preventDefault(),g.stopPropagation(),n({type:1}),(v=o.button)==null||v.focus();break}}else switch(g.key){case" ":case"Enter":g.preventDefault(),g.stopPropagation(),o.popoverState===1&&(l==null||l(o.buttonId)),n({type:0});break;case"Escape":if(o.popoverState!==0)return l==null?void 0:l(o.buttonId);if(!i.current||!i.current.contains(document.activeElement))return;g.preventDefault(),g.stopPropagation(),n({type:1});break;case"Tab":if(o.popoverState!==0||!o.panel||!o.button)return;if(g.shiftKey){if(!T.current||((h=o.button)==null?void 0:h.contains(T.current))||o.panel.contains(T.current))return;let O=xe(),L=O.indexOf(T.current);if(O.indexOf(o.button)>L)return;g.preventDefault(),g.stopPropagation(),M(o.panel,8);}else g.preventDefault(),g.stopPropagation(),M(o.panel,1);break}},[n,o.popoverState,o.buttonId,o.button,o.panel,i,l,u]),p=useCallback(g=>{var v;if(!u&&(g.key===" "&&g.preventDefault(),o.popoverState===0&&!!o.panel&&!!o.button))switch(g.key){case"Tab":if(!T.current||((v=o.button)==null?void 0:v.contains(T.current))||o.panel.contains(T.current))return;let h=xe(),O=h.indexOf(T.current);if(h.indexOf(o.button)>O)return;g.preventDefault(),g.stopPropagation(),M(o.panel,8);break}},[o.popoverState,o.panel,o.button,u]),f=useCallback(g=>{var v,h;G(g.currentTarget)||t.disabled||(u?(n({type:1}),(v=o.button)==null||v.focus()):(o.popoverState===1&&(l==null||l(o.buttonId)),(h=o.button)==null||h.focus(),n({type:0})));},[n,o.button,o.popoverState,o.buttonId,t.disabled,l,u]),d=useMemo(()=>({open:o.popoverState===0}),[o]),P=U(t,i),C=t,R=u?{ref:m,type:P,onKeyDown:y,onClick:f}:{ref:c,id:o.buttonId,type:P,"aria-expanded":t.disabled?void 0:o.popoverState===0,"aria-controls":o.panel?o.panelId:void 0,onKeyDown:y,onKeyUp:p,onClick:f};return E({props:{...C,...R},slot:d,defaultTag:Si,name:"Popover.Button"})}),hi="div",Oi=1|2,Ii=D(function(t,r){let[{popoverState:o},n]=ot("Popover.Overlay"),i=I(r),a=`headlessui-popover-overlay-${A$1()}`,l=_(),s=(()=>l!==null?l===0:o===0)(),u=useCallback(T=>{if(G(T.currentTarget))return T.preventDefault();n({type:1});},[n]),c=useMemo(()=>({open:o===0}),[o]);return E({props:{...t,...{ref:i,id:a,"aria-hidden":!0,onClick:u}},slot:c,defaultTag:hi,features:Oi,visible:s,name:"Popover.Overlay"})}),Li="div",Di=1|2,Mi=D(function(t,r){let{focus:o=!1,...n}=t,[i,a]=ot("Popover.Panel"),{close:l}=Mo("Popover.Panel"),s=useRef(null),u=I(s,r,p=>{a({type:4,panel:p});}),c=_(),m=(()=>c!==null?c===0:i.popoverState===0)(),b=useCallback(p=>{var f;switch(p.key){case"Escape":if(i.popoverState!==0||!s.current||!s.current.contains(document.activeElement))return;p.preventDefault(),p.stopPropagation(),a({type:1}),(f=i.button)==null||f.focus();break}},[i,s,a]);useEffect(()=>()=>a({type:4,panel:null}),[a]),useEffect(()=>{var p;t.static||i.popoverState===1&&((p=t.unmount)!=null?p:!0)&&a({type:4,panel:null});},[i.popoverState,t.unmount,t.static,a]),useEffect(()=>{if(!o||i.popoverState!==0||!s.current)return;let p=document.activeElement;s.current.contains(p)||M(s.current,1);},[o,s,i.popoverState]),w$1("keydown",p=>{var d;if(i.popoverState!==0||!s.current||p.key!=="Tab"||!document.activeElement||!s.current||!s.current.contains(document.activeElement))return;p.preventDefault();let f=M(s.current,p.shiftKey?2:4);if(f===3)return (d=i.button)==null?void 0:d.focus();if(f===1){if(!i.button)return;let P=xe(),C=P.indexOf(i.button),R=P.splice(C+1).filter(g=>{var v;return !((v=s.current)==null?void 0:v.contains(g))});M(R,1)===0&&M(document.body,1);}}),w$1("focus",()=>{var p;!o||i.popoverState===0&&(!s.current||((p=s.current)==null?void 0:p.contains(document.activeElement))||a({type:1}));},!0);let T=useMemo(()=>({open:i.popoverState===0,close:l}),[i,l]),y={ref:u,id:i.panelId,onKeyDown:b};return React__default.createElement(Wt.Provider,{value:i.panelId},E({props:{...n,...y},slot:T,defaultTag:Li,features:Di,visible:m,name:"Popover.Panel"}))}),Fi="div";function wi(e){let t=useRef(null),[r,o]=useState([]),n=useCallback(b=>{o(T=>{let y=T.indexOf(b);if(y!==-1){let p=T.slice();return p.splice(y,1),p}return T});},[o]),i=useCallback(b=>(o(T=>[...T,b]),()=>n(b)),[o,n]),a=useCallback(()=>{var T;let b=document.activeElement;return ((T=t.current)==null?void 0:T.contains(b))?!0:r.some(y=>{var p,f;return ((p=document.getElementById(y.buttonId))==null?void 0:p.contains(b))||((f=document.getElementById(y.panelId))==null?void 0:f.contains(b))})},[t,r]),l=useCallback(b=>{for(let T of r)T.buttonId!==b&&T.close();},[r]),s=useMemo(()=>({registerPopover:i,unregisterPopover:n,isFocusWithinPopoverGroup:a,closeOthers:l}),[i,n,a,l]),u=useMemo(()=>({}),[]),c={ref:t},m=e;return React__default.createElement(Nt.Provider,{value:s},E({props:{...m,...c},slot:u,defaultTag:Fi,name:"Popover.Group"}))}Te.Button=Ai;Te.Overlay=Ii;Te.Panel=Mi;Te.Group=wi;function wo(e=0){let[t,r]=useState(e),o=useCallback(l=>r(s=>s|l),[r]),n=useCallback(l=>Boolean(t&l),[t]),i=useCallback(l=>r(s=>s&~l),[r]),a=useCallback(l=>r(s=>s^l),[r]);return {addFlag:o,hasFlag:n,removeFlag:i,toggleFlag:a}}var _o=createContext(null);function Go(){let e=useContext(_o);if(e===null){let t=new Error("You used a <Label /> component, but it is not inside a relevant parent.");throw Error.captureStackTrace&&Error.captureStackTrace(t,Go),t}return e}function Ae(){let[e,t]=useState([]);return [e.length>0?e.join(" "):void 0,useMemo(()=>function(o){let n=useCallback(a=>(t(l=>[...l,a]),()=>t(l=>{let s=l.slice(),u=s.indexOf(a);return u!==-1&&s.splice(u,1),s})),[]),i=useMemo(()=>({register:n,slot:o.slot,name:o.name,props:o.props}),[n,o.slot,o.name,o.props]);return React__default.createElement(_o.Provider,{value:i},o.children)},[t])]}var Ni="label";function nt(e){let{passive:t=!1,...r}=e,o=Go(),n=`headlessui-label-${A$1()}`;x$1(()=>o.register(n),[n,o.register]);let i={...o.props,id:n},a={...r,...i};return t&&delete a.onClick,E({props:a,slot:o.slot||{},defaultTag:Ni,name:o.name||"Label"})}var Vi={[0](e,t){return {...e,options:[...e.options,{id:t.id,element:t.element,propsRef:t.propsRef}]}},[1](e,t){let r=e.options.slice(),o=e.options.findIndex(n=>n.id===t.id);return o===-1?e:(r.splice(o,1),{...e,options:r})}},jt=createContext(null);jt.displayName="RadioGroupContext";function Ho(e){let t=useContext(jt);if(t===null){let r=new Error(`<${e} /> is missing a parent <${lt.name} /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(r,Ho),r}return t}function $i(e,t){return S(t.type,Vi,e,t)}var Qi="div";function lt(e){let{value:t,onChange:r,disabled:o=!1,...n}=e,[{options:i},a]=useReducer($i,{options:[]}),[l,s]=Ae(),[u,c]=re(),m=`headlessui-radiogroup-${A$1()}`,b=useRef(null),T=useMemo(()=>i.find(R=>!R.propsRef.current.disabled),[i]),y=useMemo(()=>i.some(R=>R.propsRef.current.value===t),[i,t]),p=useCallback(R=>{var v;if(o||R===t)return !1;let g=(v=i.find(h=>h.propsRef.current.value===R))==null?void 0:v.propsRef.current;return (g==null?void 0:g.disabled)?!1:(r(R),!0)},[r,t,o,i]);se({container:b.current,accept(R){return R.getAttribute("role")==="radio"?NodeFilter.FILTER_REJECT:R.hasAttribute("role")?NodeFilter.FILTER_SKIP:NodeFilter.FILTER_ACCEPT},walk(R){R.setAttribute("role","none");}});let f=useCallback(R=>{if(!b.current)return;let v=i.filter(h=>h.propsRef.current.disabled===!1).map(h=>h.element.current);switch(R.key){case"ArrowLeft":case"ArrowUp":if(R.preventDefault(),R.stopPropagation(),M(v,2|16)===2){let O=i.find(L=>L.element.current===document.activeElement);O&&p(O.propsRef.current.value);}break;case"ArrowRight":case"ArrowDown":if(R.preventDefault(),R.stopPropagation(),M(v,4|16)===2){let O=i.find(L=>L.element.current===document.activeElement);O&&p(O.propsRef.current.value);}break;case" ":{R.preventDefault(),R.stopPropagation();let h=i.find(O=>O.element.current===document.activeElement);h&&p(h.propsRef.current.value);}break}},[b,i,p]),d=useCallback(R=>(a({type:0,...R}),()=>a({type:1,id:R.id})),[a]),P=useMemo(()=>({registerOption:d,firstOption:T,containsCheckedOption:y,change:p,disabled:o,value:t}),[d,T,y,p,o,t]),C={ref:b,id:m,role:"radiogroup","aria-labelledby":l,"aria-describedby":u,onKeyDown:f};return React__default.createElement(c,{name:"RadioGroup.Description"},React__default.createElement(s,{name:"RadioGroup.Label"},React__default.createElement(jt.Provider,{value:P},E({props:{...n,...C},defaultTag:Qi,name:"RadioGroup"}))))}var qi="div";function zi(e){let t=useRef(null),r=`headlessui-radiogroup-option-${A$1()}`,[o,n]=Ae(),[i,a]=re(),{addFlag:l,removeFlag:s,hasFlag:u}=wo(1),{value:c,disabled:m=!1,...b}=e,T=useRef({value:c,disabled:m});x$1(()=>{T.current.value=c;},[c,T]),x$1(()=>{T.current.disabled=m;},[m,T]);let{registerOption:y,disabled:p,change:f,firstOption:d,containsCheckedOption:P,value:C}=Ho("RadioGroup.Option");x$1(()=>y({id:r,element:t,propsRef:T}),[r,y,t,e]);let R=useCallback(()=>{var V;!f(c)||(l(2),(V=t.current)==null||V.focus());},[l,f,c]),g=useCallback(()=>l(2),[l]),v=useCallback(()=>s(2),[s]),h=(d==null?void 0:d.id)===r,O=p||m,L=C===c,N={ref:t,id:r,role:"radio","aria-checked":L?"true":"false","aria-labelledby":o,"aria-describedby":i,"aria-disabled":O?!0:void 0,tabIndex:(()=>O?-1:L||!P&&h?0:-1)(),onClick:O?void 0:R,onFocus:O?void 0:g,onBlur:O?void 0:v},K=useMemo(()=>({checked:L,disabled:O,active:u(2)}),[L,O,u]);return React__default.createElement(a,{name:"RadioGroup.Description"},React__default.createElement(n,{name:"RadioGroup.Label"},E({props:{...b,...N},slot:K,defaultTag:qi,name:"RadioGroup.Option"})))}lt.Option=zi;lt.Label=nt;lt.Description=me;var $t=createContext(null);$t.displayName="GroupContext";var zt=createContext(null);zt.displayName="TabsContext";var dt=createContext(null);dt.displayName="TransitionContext";var ct=createContext(null);ct.displayName="NestingContext";
 
 /* base styles & variants */
 var AccordionStyles = {
@@ -6189,7 +6189,7 @@ var Autoship = function (_a) {
     var benefitsColor = benefitsColorMapper(theme);
     return (jsxs$1(Container$1e, __assign$1({ className: className }, { children: [jsxs$1(SinglePurchaseContainer$3, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds$2.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds$2.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds$2.oneTime.id, id: radioIds$2.oneTime.id, value: radioIds$2.oneTime.id, checked: radioIds$2.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds$2.oneTime, 'radio'); } }, void 0), jsx$1(StyledPrice$3, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedProdPrice))), selected: radioIds$2.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxs$1(SubscriptionContainer$3, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds$2.autoship.id === radioCheck.id }, { children: [jsxs$1(SubscriptionHeader$3, __assign$1({ onClick: function () { return handleChange(radioIds$2.autoship, 'radio'); } }, { children: [jsx$1(RadioInput, { label: subscriptionLabel, name: radioIds$2.autoship.id, id: radioIds$2.autoship.id, value: radioIds$2.autoship.id, checked: radioIds$2.autoship.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds$2.autoship, 'radio'); } }, void 0), jsx$1(StyledPrice$3, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(discountedAutoshipPrice))), selected: radioIds$2.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsx$1(BenefitsContainer$3, { children: autoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit$4, { children: [jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds$2.autoship.id === radioCheck.id
                                         ? benefitsColor.selected
-                                        : benefitsColor.base }, void 0), jsx$1(BenefitText$3, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds$2.autoship.id === radioCheck.id && (jsxs$1(Fragment$2, { children: [jsxs$1(FlexContainer$3, { children: [jsx$1(DeliveryFrequencyLabel$1, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsx$1(SubscriptionDetailsContainer, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxs$1(FlexContainer$3, { children: [jsx$1(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsx$1(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
+                                        : benefitsColor.base }, void 0), jsx$1(BenefitText$3, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds$2.autoship.id === radioCheck.id && (jsxs$1(Fragment$2, { children: [jsxs$1(FlexContainer$3, { children: [jsx$1(DeliveryFrequencyLabel$1, __assign$1({ variant: "body" }, { children: "Delivery every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsx$1(SubscriptionDetailsContainer, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxs$1(FlexContainer$3, { children: [jsx$1(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsx$1(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
 };
 
 var FlexContainer$2 = newStyled.div(templateObject_1$1V || (templateObject_1$1V = __makeTemplateObject(["\n  display: flex;\n\n  ", "\n"], ["\n  display: flex;\n\n  ", "\n"])), function (_a) {
@@ -6312,7 +6312,7 @@ var AutoshipV2 = function (_a) {
     var benefitsColor = benefitsColorMapper(theme);
     return (jsxs$1(Container$1d, __assign$1({ className: className }, { children: [jsxs$1(SubscriptionContainer$2, __assign$1({ onClick: function () { return handleChange(radioIds$1.autoship, 'radio'); }, "data-testid": "subscription-purchase-block", selected: radioIds$1.autoship.id === radioCheck.id }, { children: [jsx$1(DiscountTag$2, __assign$1({ isSelected: radioIds$1.autoship.id === radioCheck.id }, { children: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".concat(autoShipPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(autoShipSaving.toFixed(2)) }), void 0), jsxs$1(SubscriptionHeader$2, { children: [jsxs$1(FlexContainer$2, { children: [jsx$1(RadioInput, { label: subscriptionLabel, name: radioIds$1.autoship.id, id: radioIds$1.autoship.id, value: radioIds$1.autoship.id, checked: radioIds$1.autoship.id === radioCheck.id, size: ComponentSize.Medium, style: { marginRight: '10px' }, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds$1.autoship.id) }, void 0), jsx$1(TooltipWrapper$1, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "248px", showCloseIcon: closeIcon, closeBtnSize: 0.7 }, { children: jsx$1(Icon.Actions.CircleQuestion, { width: 1 }, void 0) }), void 0) }, void 0)] }, void 0), jsx$1(StyledPrice$2, { testId: "subscription", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(autoshipFinalPrice))), selected: radioIds$1.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }, void 0), jsx$1(BenefitsContainer$2, { children: updatedAutoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit$3, { children: [jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds$1.autoship.id === radioCheck.id
                                         ? benefitsColor.selected
-                                        : benefitsColor.base }, void 0), jsx$1(BenefitText$2, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0)] }, benefit)); }) }, void 0), jsx$1(Fragment$2, { children: dropdownOptions.length > 1 ? (jsxs$1(FlexContainer$2, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: [jsx$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frequency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }), void 0)) : (jsxs$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: ["Deliver every ", dropdownOptions[0].label.toLowerCase()] }), void 0)) }, void 0)] }), void 0), jsxs$1(SinglePurchaseContainer$2, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds$1.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds$1.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds$1.oneTime.id, id: radioIds$1.oneTime.id, value: radioIds$1.oneTime.id, checked: radioIds$1.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds$1.oneTime.id) }, void 0), jsx$1(StyledPrice$2, { testId: "single-purchase", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(discountedPrice))), selected: radioIds$1.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
+                                        : benefitsColor.base }, void 0), jsx$1(BenefitText$2, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0)] }, benefit)); }) }, void 0), jsx$1(Fragment$2, { children: dropdownOptions.length > 1 ? (jsxs$1(FlexContainer$2, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: [jsx$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Delivery every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frequency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }), void 0)) : (jsxs$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: ["Delivery every ", dropdownOptions[0].label.toLowerCase()] }), void 0)) }, void 0)] }), void 0), jsxs$1(SinglePurchaseContainer$2, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds$1.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds$1.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds$1.oneTime.id, id: radioIds$1.oneTime.id, value: radioIds$1.oneTime.id, checked: radioIds$1.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds$1.oneTime.id) }, void 0), jsx$1(StyledPrice$2, { testId: "single-purchase", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(discountedPrice))), selected: radioIds$1.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
 };
 
 var _a$2;
@@ -6639,179 +6639,6 @@ var StrengthBars = function (_a) {
 };
 var templateObject_1$1G, templateObject_2$1h, templateObject_3$$, templateObject_4$P;
 
-var RegularPriceTagSpan = newStyled.span(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n  background-color: #e5e5e5;\n  padding: 3px 4px;\n  border-radius: 4px;\n  gap: 10px;\n  align-items: center;\n  justify-content: center;\n  color: #5a5a5a;\n  font-weight: 600;\n  font-size: 0.6rem;\n  line-height: 1rem;\n  text-align: center;\n  margin-bottom: 0.5rem;\n"], ["\n  background-color: #e5e5e5;\n  padding: 3px 4px;\n  border-radius: 4px;\n  gap: 10px;\n  align-items: center;\n  justify-content: center;\n  color: #5a5a5a;\n  font-weight: 600;\n  font-size: 0.6rem;\n  line-height: 1rem;\n  text-align: center;\n  margin-bottom: 0.5rem;\n"])));
-var ClubPriceTagSpan = newStyled.span(templateObject_2$1g || (templateObject_2$1g = __makeTemplateObject(["\n  background-color: #c64844;\n  padding: 3px 4px;\n  border-radius: 4px;\n  gap: 10px;\n  align-items: center;\n  justify-content: center;\n  color: white;\n  font-weight: 600;\n  font-size: 0.6rem;\n  line-height: 1rem;\n  text-align: center;\n  margin-bottom: 0.5rem;\n"], ["\n  background-color: #c64844;\n  padding: 3px 4px;\n  border-radius: 4px;\n  gap: 10px;\n  align-items: center;\n  justify-content: center;\n  color: white;\n  font-weight: 600;\n  font-size: 0.6rem;\n  line-height: 1rem;\n  text-align: center;\n  margin-bottom: 0.5rem;\n"])));
-var PriceContainer$1 = newStyled.span(templateObject_3$_ || (templateObject_3$_ = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
-var PriceContainerV2 = newStyled.span(templateObject_4$O || (templateObject_4$O = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-var PriceWithTagContainer = newStyled.span(templateObject_5$E || (templateObject_5$E = __makeTemplateObject(["\n  display: flex;\n  gap: 8px;\n"], ["\n  display: flex;\n  gap: 8px;\n"])));
-var RegularPriceTag = function () {
-    return jsx$1(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
-};
-var ClubPriceTag = function (_a) {
-    var label = _a.label;
-    return jsx$1(ClubPriceTagSpan, { children: label || 'CLUB MEMBERS' }, void 0);
-};
-function getTestId() {
-    var args = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        args[_i] = arguments[_i];
-    }
-    return args.filter(Boolean).join('-');
-}
-var PriceLabelV4 = function (_a) {
-    var _b;
-    _a.finalPrice; var originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, testId = _a.testId, _c = _a.finalPriceStyled, finalPriceStyled = _c === void 0 ? false : _c, finalPriceStyle = _a.finalPriceStyle, _d = _a.originalPriceStyled, originalPriceStyled = _d === void 0 ? false : _d, _e = _a.originalPriceUnderlined, originalPriceUnderlined = _e === void 0 ? true : _e, _f = _a.size, size = _f === void 0 ? ComponentSize.Medium : _f, _g = _a.clubStyle, clubStyle = _g === void 0 ? false : _g, _h = _a.styledPrice, styledPrice = _h === void 0 ? false : _h, clubPrice = _a.clubPrice, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "color", "testId", "finalPriceStyled", "finalPriceStyle", "originalPriceStyled", "originalPriceUnderlined", "size", "clubStyle", "styledPrice", "clubPrice"]);
-    var theme = useTheme();
-    var isMobile = useWindowDimensions().isMobile;
-    var productFinalPrice = clubPrice;
-    var supportedCurrencies = ['AU$', 'CA$', '£'];
-    var currencySymbol = '$';
-    if (typeof productFinalPrice === 'string') {
-        supportedCurrencies.forEach(function (availableCurrency) {
-            if (productFinalPrice.includes(availableCurrency)) {
-                currencySymbol = availableCurrency;
-            }
-        });
-    }
-    var finalPriceArray = typeof productFinalPrice === 'string' &&
-        productFinalPrice.includes('.') &&
-        productFinalPrice.includes(currencySymbol)
-        ? productFinalPrice.split(currencySymbol)[1].split('.')
-        : ['', ''];
-    var priceCommonProps = {
-        size: finalPriceStyled ? ComponentSize.Small : size,
-        color: color || theme.colors.pallete.secondary.color,
-        weight: 700,
-    };
-    var OriginalPrice = function () {
-        var sizeProp = !clubStyle
-            ? originalPriceStyled
-                ? size
-                : ComponentSize.Small
-            : isMobile
-                ? ComponentSize.Small
-                : ComponentSize.XSmall;
-        return (jsx$1(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
-    };
-    return (jsxs$1(Container$1o, __assign$1({}, rest, { children: [clubStyle && !styledPrice ? (jsxs$1(PriceContainer$1, { children: [jsxs$1(PriceWithTagContainer, { children: [jsx$1(OriginalPrice, {}, void 0), jsx$1(RegularPriceTag, {}, void 0)] }, void 0), jsxs$1(PriceWithTagContainer, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: clubPrice }), void 0), jsx$1(ClubPriceTag, { label: theme.label.member }, void 0)] }, void 0)] }, void 0)) : (jsxs$1(PriceContainer$1, { children: [jsxs$1(PriceWithTagContainer, { children: [jsx$1(OriginalPrice, {}, void 0), jsx$1(RegularPriceTag, {}, void 0)] }, void 0), jsxs$1(PriceWithTagContainer, { children: [jsxs$1(PriceContainerV2, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { marginTop: '-5px', color: '#c64844' } }, priceCommonProps, { size: size, "data-testid": getTestId(testId, 'final-product-price') }, { children: currencySymbol }), void 0), jsxs$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, style: { color: '#c64844' } }, { children: [finalPriceArray[0]
-                                                ? finalPriceArray[0]
-                                                : (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsx$1(ClubPriceTag, { label: theme.label.member }, void 0)] }, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$3, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
-};
-var templateObject_1$1F, templateObject_2$1g, templateObject_3$_, templateObject_4$O, templateObject_5$E;
-
-var STARTS_NUMBER = 5;
-
-var Container$15 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
-var templateObject_1$1E;
-
-var StarContainer = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __makeTemplateObject(["\n  display: flex;\n  margin-right: ", ";\n"], ["\n  display: flex;\n  margin-right: ", ";\n"])), function (_a) {
-    var marginRight = _a.marginRight;
-    return marginRight;
-});
-var StarList = function (_a) {
-    var rating = _a.rating, starsNumber = _a.starsNumber, fill = _a.fill, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b;
-    var theme = useTheme();
-    var iconProps = {
-        fill: fill,
-        width: theme.component.stars.element[size].width,
-        height: theme.component.stars.element[size].height,
-    };
-    return (jsx$1(Container$15, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
-            return (jsx$1(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsx$1(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx$1(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsx$1(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
-        }) }, void 0));
-};
-var templateObject_1$1D;
-
-/* base styles & size variants */
-var LabelStyles = {
-    baseStyles: function (theme) {
-        return css({
-            margin: '0',
-            display: 'flex',
-            color: theme.colors.pallete.secondary.color,
-            fontWeight: theme.component.rating.fontWeight,
-        });
-    },
-    xxsmall: function (theme) {
-        return css({
-            fontSize: theme.component.rating.size.xxsmall.fontSize,
-            lineHeight: theme.component.rating.size.xxsmall.lineHeight,
-            marginLeft: '0.1rem',
-        });
-    },
-    xsmall: function (theme) {
-        return css({
-            fontSize: theme.component.rating.size.xsmall.fontSize,
-            lineHeight: theme.component.rating.size.xsmall.lineHeight,
-            marginLeft: '0.172rem',
-        });
-    },
-    small: function (theme) {
-        return css({
-            fontSize: theme.component.rating.size.small.fontSize,
-            lineHeight: theme.component.rating.size.small.lineHeight,
-            marginLeft: '0.313rem',
-        });
-    },
-    medium: function (theme) {
-        return css({
-            fontSize: theme.component.rating.size.medium.fontSize,
-            lineHeight: theme.component.rating.size.medium.lineHeight,
-            marginLeft: '0.438rem',
-        });
-    },
-    large: function (theme) {
-        return css({
-            fontSize: theme.component.rating.size.large.fontSize,
-            lineHeight: theme.component.rating.size.large.lineHeight,
-            marginLeft: '0.563rem',
-        });
-    },
-};
-var Container$14 = newStyled.a(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  text-decoration: none;\n"], ["\n  display: flex;\n  align-items: center;\n  text-decoration: none;\n"])));
-var CustomLabel = newStyled.div(function (_a) {
-    var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
-    return [
-        LabelStyles.baseStyles(theme),
-        LabelStyles[size](theme),
-        {
-            ':before': {
-                content: wrapWithParenthesis ? '"("' : '""',
-            },
-            ':after': {
-                content: wrapWithParenthesis ? '")"' : '""',
-            },
-        },
-        css({
-            textDecoration: underline ? 'underline' : 'none',
-        }),
-    ];
-});
-var RatingLabel = newStyled.span(templateObject_2$1f || (templateObject_2$1f = __makeTemplateObject(["\n  font-size: 16px;\n  font-weight: 600;\n  color: ", ";\n  padding-right: 6px;\n  text-decoration: none;\n"], ["\n  font-size: 16px;\n  font-weight: 600;\n  color: ", ";\n  padding-right: 6px;\n  text-decoration: none;\n"])), function (props) { return props.color; });
-var templateObject_1$1C, templateObject_2$1f;
-
-var Rating = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, reviews = _a.reviews, reviewsText = _a.reviewsText, rating = _a.rating, _c = _a.showRatingText, showRatingText = _c === void 0 ? false : _c, _d = _a.wrapWithParenthesis, wrapWithParenthesis = _d === void 0 ? false : _d, _e = _a.underline, underline = _e === void 0 ? false : _e, reviewsContainerId = _a.reviewsContainerId;
-    function handleAnchorClick(e) {
-        var _a;
-        if (e.cancelable) {
-            e.preventDefault();
-        }
-        if (reviewsContainerId) {
-            (_a = document.querySelector(reviewsContainerId)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
-                behavior: 'smooth',
-            });
-        }
-    }
-    var theme = useTheme();
-    var containerAttributes = reviewsContainerId
-        ? {
-            href: reviewsContainerId,
-        }
-        : {};
-    return (jsxs$1(Container$14, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsx$1(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), jsx$1(StarList, { rating: rating, size: size, starsNumber: STARTS_NUMBER, fill: theme.component.stars.element.color }, void 0), jsxs$1(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
-};
-
 var AutoshipFrequencyDropdown = function (_a) {
     var frequency = _a.frequency, onChange = _a.onChange;
     var options = getDropdownOptions(frequency);
@@ -6820,7 +6647,7 @@ var AutoshipFrequencyDropdown = function (_a) {
             onChange(value);
         }
     };
-    return (jsx$1(Fragment$2, { children: options.length > 1 ? (jsxs$1(FlexContainer$2, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: [jsx$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frequency", initialValue: options[0], options: options, onChange: handleChange, placeHolder: "" }, void 0)] }), void 0)) : (jsxs$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: ["Deliver every ", options[0].label.toLowerCase()] }), void 0)) }, void 0));
+    return (jsx$1(Fragment$2, { children: options.length > 1 ? (jsxs$1(FlexContainer$2, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: [jsx$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Delivery every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frequency", initialValue: options[0], options: options, onChange: handleChange, placeHolder: "" }, void 0)] }), void 0)) : (jsxs$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: ["Delivery every ", options[0].label.toLowerCase()] }), void 0)) }, void 0));
 };
 var getLabel = function (number, frequency) {
     return "".concat(number, " ").concat(number === 1 ? frequency.unit.slice(0, -1) : frequency.unit);
@@ -6841,32 +6668,32 @@ var getDropdownOptions = function (frequency) {
     }); });
 };
 
-var Benefit$2 = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __makeTemplateObject(["\n  display: flex;\n  padding: 8px 0;\n  svg {\n    overflow: visible;\n  }\n"], ["\n  display: flex;\n  padding: 8px 0;\n  svg {\n    overflow: visible;\n  }\n"])));
-var BenefitText$1 = newStyled(Text$7)(templateObject_2$1e || (templateObject_2$1e = __makeTemplateObject(["\n  line-height: 20px;\n  margin-left: 9px;\n"], ["\n  line-height: 20px;\n  margin-left: 9px;\n"])));
-var templateObject_1$1B, templateObject_2$1e;
+var Benefit$2 = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n  display: flex;\n  padding: 8px 0;\n  svg {\n    overflow: visible;\n  }\n"], ["\n  display: flex;\n  padding: 8px 0;\n  svg {\n    overflow: visible;\n  }\n"])));
+var BenefitText$1 = newStyled(Text$7)(templateObject_2$1g || (templateObject_2$1g = __makeTemplateObject(["\n  line-height: 20px;\n  margin-left: 9px;\n"], ["\n  line-height: 20px;\n  margin-left: 9px;\n"])));
+var templateObject_1$1F, templateObject_2$1g;
 
 var BenefitsList = function (_a) {
     var benefits = _a.benefits, isSelected = _a.isSelected, selectedColor = _a.selectedColor, baseColor = _a.baseColor;
     return (jsx$1(Fragment$2, { children: benefits.map(function (benefit) { return (jsxs$1(Benefit$2, { children: [jsx$1(Icon.Actions.Check, { "data-testid": "icon-check", width: 1.2, height: 1.2, fill: isSelected ? selectedColor : baseColor }, void 0), jsx$1(BenefitText$1, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0)] }, benefit)); }) }, void 0));
 };
 
-var TimerContainer$1 = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+var TimerContainer$1 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
     var timerColor = _a.timerColor;
     return timerColor || '';
 });
-var TimerContainerV2 = newStyled.div(templateObject_2$1d || (templateObject_2$1d = __makeTemplateObject(["\n  color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: space-around;\n  gap: 10px;\n"], ["\n  color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: space-around;\n  gap: 10px;\n"])), function (_a) {
+var TimerContainerV2 = newStyled.div(templateObject_2$1f || (templateObject_2$1f = __makeTemplateObject(["\n  color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: space-around;\n  gap: 10px;\n"], ["\n  color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: space-around;\n  gap: 10px;\n"])), function (_a) {
     var timerColor = _a.timerColor;
     return timerColor || '';
 });
-var UnitBlock = newStyled(Text$7)(templateObject_3$Z || (templateObject_3$Z = __makeTemplateObject(["\n  background-color: ", ";\n  width: 32px;\n  height: 32px;\n  border-radius: 2px;\n  padding: 0 6px;\n  line-height: 22px;\n  text-align: center;\n  position: relative;\n  & + & {\n    &:before {\n      position: absolute;\n      content: ':';\n      display: block;\n      left: -7px;\n      top: 5px;\n      color: ", ";\n    }\n  }\n"], ["\n  background-color: ", ";\n  width: 32px;\n  height: 32px;\n  border-radius: 2px;\n  padding: 0 6px;\n  line-height: 22px;\n  text-align: center;\n  position: relative;\n  & + & {\n    &:before {\n      position: absolute;\n      content: ':';\n      display: block;\n      left: -7px;\n      top: 5px;\n      color: ", ";\n    }\n  }\n"])), function (_a) {
+var UnitBlock = newStyled(Text$7)(templateObject_3$_ || (templateObject_3$_ = __makeTemplateObject(["\n  background-color: ", ";\n  width: 32px;\n  height: 32px;\n  border-radius: 2px;\n  padding: 0 6px;\n  line-height: 22px;\n  text-align: center;\n  position: relative;\n  & + & {\n    &:before {\n      position: absolute;\n      content: ':';\n      display: block;\n      left: -7px;\n      top: 5px;\n      color: ", ";\n    }\n  }\n"], ["\n  background-color: ", ";\n  width: 32px;\n  height: 32px;\n  border-radius: 2px;\n  padding: 0 6px;\n  line-height: 22px;\n  text-align: center;\n  position: relative;\n  & + & {\n    &:before {\n      position: absolute;\n      content: ':';\n      display: block;\n      left: -7px;\n      top: 5px;\n      color: ", ";\n    }\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.colors.shades.white.color;
 }, function (_a) {
     var theme = _a.theme;
     return theme.colors.shades.white.color;
 });
-var Unit = newStyled.p(templateObject_4$N || (templateObject_4$N = __makeTemplateObject(["\n  font-size: 8px;\n  font-weight: 400;\n  line-height: 8px;\n  margin: 0;\n"], ["\n  font-size: 8px;\n  font-weight: 400;\n  line-height: 8px;\n  margin: 0;\n"])));
-var templateObject_1$1A, templateObject_2$1d, templateObject_3$Z, templateObject_4$N;
+var Unit = newStyled.p(templateObject_4$O || (templateObject_4$O = __makeTemplateObject(["\n  font-size: 8px;\n  font-weight: 400;\n  line-height: 8px;\n  margin: 0;\n"], ["\n  font-size: 8px;\n  font-weight: 400;\n  line-height: 8px;\n  margin: 0;\n"])));
+var templateObject_1$1E, templateObject_2$1f, templateObject_3$_, templateObject_4$O;
 
 var HRS = 'HRS';
 var MIN = 'MIN';
@@ -6907,7 +6734,7 @@ var Timer = function (_a) {
     return (jsxs$1(TimerContainer$1, __assign$1({ "data-testid": "Time", timerColor: timerColor }, { children: [showHours && (hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), showSeconds && "".concat(seconds, "s")] }), void 0));
 };
 
-var TimerContainer = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  justify-content: ", ";\n  align-items: center;\n  background-color: ", ";\n  width: 100%;\n  padding: 5px 24px;\n  height: 40px;\n  line-height: 14px;\n  border-radius: ", ";\n\n  & [data-testid='HurryUpText'] {\n    font-size: 12px !important;\n    line-height: 12px !important;\n  }\n\n  & [data-testid='Time'] {\n    font-size: 14px !important;\n    line-height: 14px !important;\n  }\n\n  @media (min-width: 330px) {\n    & [data-testid='HurryUpText'] {\n      font-size: 14px !important;\n      line-height: 14px !important;\n    }\n\n    & [data-testid='Time'] {\n      font-size: 16px !important;\n      line-height: 16px !important;\n    }\n  }\n\n  @media (min-width: 767px) {\n    border-radius: ", ";\n    padding: 5px 2px;\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  justify-content: ", ";\n  align-items: center;\n  background-color: ", ";\n  width: 100%;\n  padding: 5px 24px;\n  height: 40px;\n  line-height: 14px;\n  border-radius: ", ";\n\n  & [data-testid='HurryUpText'] {\n    font-size: 12px !important;\n    line-height: 12px !important;\n  }\n\n  & [data-testid='Time'] {\n    font-size: 14px !important;\n    line-height: 14px !important;\n  }\n\n  @media (min-width: 330px) {\n    & [data-testid='HurryUpText'] {\n      font-size: 14px !important;\n      line-height: 14px !important;\n    }\n\n    & [data-testid='Time'] {\n      font-size: 16px !important;\n      line-height: 16px !important;\n    }\n  }\n\n  @media (min-width: 767px) {\n    border-radius: ", ";\n    padding: 5px 2px;\n  }\n"])), function (_a) {
+var TimerContainer = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  justify-content: ", ";\n  align-items: center;\n  background-color: ", ";\n  width: 100%;\n  padding: 5px 24px;\n  height: 40px;\n  line-height: 14px;\n  border-radius: ", ";\n\n  & [data-testid='HurryUpText'] {\n    font-size: 12px !important;\n    line-height: 12px !important;\n  }\n\n  & [data-testid='Time'] {\n    font-size: 14px !important;\n    line-height: 14px !important;\n  }\n\n  @media (min-width: 330px) {\n    & [data-testid='HurryUpText'] {\n      font-size: 14px !important;\n      line-height: 14px !important;\n    }\n\n    & [data-testid='Time'] {\n      font-size: 16px !important;\n      line-height: 16px !important;\n    }\n  }\n\n  @media (min-width: 767px) {\n    border-radius: ", ";\n    padding: 5px 2px;\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  justify-content: ", ";\n  align-items: center;\n  background-color: ", ";\n  width: 100%;\n  padding: 5px 24px;\n  height: 40px;\n  line-height: 14px;\n  border-radius: ", ";\n\n  & [data-testid='HurryUpText'] {\n    font-size: 12px !important;\n    line-height: 12px !important;\n  }\n\n  & [data-testid='Time'] {\n    font-size: 14px !important;\n    line-height: 14px !important;\n  }\n\n  @media (min-width: 330px) {\n    & [data-testid='HurryUpText'] {\n      font-size: 14px !important;\n      line-height: 14px !important;\n    }\n\n    & [data-testid='Time'] {\n      font-size: 16px !important;\n      line-height: 16px !important;\n    }\n  }\n\n  @media (min-width: 767px) {\n    border-radius: ", ";\n    padding: 5px 2px;\n  }\n"])), function (_a) {
     var textPosition = _a.textPosition;
     return textPosition;
 }, function (_a) {
@@ -6920,7 +6747,7 @@ var TimerContainer = newStyled.div(templateObject_1$1z || (templateObject_1$1z =
     var borderRadius = _a.borderRadius;
     return borderRadius || '8px';
 });
-var templateObject_1$1z;
+var templateObject_1$1D;
 
 var getDefaultCountdown = function () {
     var tomorrowDate = new Date();
@@ -6936,7 +6763,7 @@ var HurryUp = function (_a) {
     return (jsxs$1(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: (!isFullVersion && theme.component.hurryUp.borderRadius) || '0', "data-testid": "HurryUp" }, { children: [clockPosition === 'left' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), jsx$1(Text$7, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi", color: hurryUpTextColor }, { children: hurryUpText }), void 0), "\u00A0", clockPosition === 'right' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), showTimer && (jsx$1(Timer, __assign$1({ countdown: countdown, onTimeUp: function () { } }, timerProps, { isCardsVersion: isFullVersion }), void 0))] }), void 0));
 };
 
-var Container$13 = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  svg {\n    vertical-align: unset;\n  }\n"], ["\n  width: ", ";\n  height: ", ";\n  svg {\n    vertical-align: unset;\n  }\n"])), function (_a) {
+var Container$15 = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  svg {\n    vertical-align: unset;\n  }\n"], ["\n  width: ", ";\n  height: ", ";\n  svg {\n    vertical-align: unset;\n  }\n"])), function (_a) {
     var size = _a.size;
     return (size ? size : '100%');
 }, function (_a) {
@@ -6951,7 +6778,7 @@ var borderSize = {
     large: '3px',
 };
 var DEFAULT_COLOR = '#5EAD9B';
-var StyledSpinner = newStyled.div(templateObject_2$1c || (templateObject_2$1c = __makeTemplateObject(["\n  position: relative;\n  height: 100%;\n  width: 100%;\n  top: 50%;\n  left: 50%;\n  box-sizing: border-box;\n  border: ", " solid\n    ", ";\n  border-top-color: ", ";\n  border-radius: 100%;\n  animation: rotation ", "s infinite linear;\n\n  @keyframes rotation {\n    from {\n      transform: translateX(-50%) translateY(-50%) rotate(0deg);\n    }\n    to {\n      transform: translateX(-50%) translateY(-50%) rotate(359deg);\n    }\n  }\n"], ["\n  position: relative;\n  height: 100%;\n  width: 100%;\n  top: 50%;\n  left: 50%;\n  box-sizing: border-box;\n  border: ", " solid\n    ", ";\n  border-top-color: ", ";\n  border-radius: 100%;\n  animation: rotation ", "s infinite linear;\n\n  @keyframes rotation {\n    from {\n      transform: translateX(-50%) translateY(-50%) rotate(0deg);\n    }\n    to {\n      transform: translateX(-50%) translateY(-50%) rotate(359deg);\n    }\n  }\n"])), function (_a) {
+var StyledSpinner = newStyled.div(templateObject_2$1e || (templateObject_2$1e = __makeTemplateObject(["\n  position: relative;\n  height: 100%;\n  width: 100%;\n  top: 50%;\n  left: 50%;\n  box-sizing: border-box;\n  border: ", " solid\n    ", ";\n  border-top-color: ", ";\n  border-radius: 100%;\n  animation: rotation ", "s infinite linear;\n\n  @keyframes rotation {\n    from {\n      transform: translateX(-50%) translateY(-50%) rotate(0deg);\n    }\n    to {\n      transform: translateX(-50%) translateY(-50%) rotate(359deg);\n    }\n  }\n"], ["\n  position: relative;\n  height: 100%;\n  width: 100%;\n  top: 50%;\n  left: 50%;\n  box-sizing: border-box;\n  border: ", " solid\n    ", ";\n  border-top-color: ", ";\n  border-radius: 100%;\n  animation: rotation ", "s infinite linear;\n\n  @keyframes rotation {\n    from {\n      transform: translateX(-50%) translateY(-50%) rotate(0deg);\n    }\n    to {\n      transform: translateX(-50%) translateY(-50%) rotate(359deg);\n    }\n  }\n"])), function (_a) {
     var size = _a.size;
     return borderSize[size];
 }, function (_a) {
@@ -6964,29 +6791,29 @@ var StyledSpinner = newStyled.div(templateObject_2$1c || (templateObject_2$1c =
     var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
     return duration;
 });
-var templateObject_1$1y, templateObject_2$1c;
+var templateObject_1$1C, templateObject_2$1e;
 
 var Spinner = function (_a) {
     var fill = _a.fill, background = _a.background, _b = _a.animationDuration, animationDuration = _b === void 0 ? 1 : _b, borderSize = _a.borderSize, _c = _a.complete, complete = _c === void 0 ? false : _c, completeIconStroke = _a.completeIconStroke, size = _a.size;
-    return (jsx$1(Container$13, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsx$1(Icon.Actions.LightCheck, { fill: fill, svgProps: { strokeWidth: completeIconStroke } }, void 0)) : (jsx$1(StyledSpinner, { duration: animationDuration, "data-testid": "Loading", color: fill, background: background, size: borderSize !== null && borderSize !== void 0 ? borderSize : ComponentSize.Small }, void 0)) }), void 0));
+    return (jsx$1(Container$15, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsx$1(Icon.Actions.LightCheck, { fill: fill, svgProps: { strokeWidth: completeIconStroke } }, void 0)) : (jsx$1(StyledSpinner, { duration: animationDuration, "data-testid": "Loading", color: fill, background: background, size: borderSize !== null && borderSize !== void 0 ? borderSize : ComponentSize.Small }, void 0)) }), void 0));
 };
 
-var ProgressContainer = newStyled.div(templateObject_1$1x || (templateObject_1$1x = __makeTemplateObject(["\n  top: 20px;\n  left: 10px;\n  border-radius: 10px;\n  position: absolute;\n  height: 5px;\n  width: 95%;\n  background: rgba(0, 0, 0, 0.3);\n  transition: opacity 0.3s ease-in-out;\n  opacity: ", ";\n"], ["\n  top: 20px;\n  left: 10px;\n  border-radius: 10px;\n  position: absolute;\n  height: 5px;\n  width: 95%;\n  background: rgba(0, 0, 0, 0.3);\n  transition: opacity 0.3s ease-in-out;\n  opacity: ", ";\n"])), function (props) { return (props.hide ? 0 : 1); });
-var ProgressFiller = newStyled.div(templateObject_2$1b || (templateObject_2$1b = __makeTemplateObject(["\n  height: 100%;\n  width: ", "%;\n  background-color: white;\n  border-radius: 10px;\n  transition: width 0.3s ease-in-out;\n"], ["\n  height: 100%;\n  width: ", "%;\n  background-color: white;\n  border-radius: 10px;\n  transition: width 0.3s ease-in-out;\n"])), function (props) { return props.progress * 100; });
-var templateObject_1$1x, templateObject_2$1b;
+var ProgressContainer = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __makeTemplateObject(["\n  top: 20px;\n  left: 10px;\n  border-radius: 10px;\n  position: absolute;\n  height: 5px;\n  width: 95%;\n  background: rgba(0, 0, 0, 0.3);\n  transition: opacity 0.3s ease-in-out;\n  opacity: ", ";\n"], ["\n  top: 20px;\n  left: 10px;\n  border-radius: 10px;\n  position: absolute;\n  height: 5px;\n  width: 95%;\n  background: rgba(0, 0, 0, 0.3);\n  transition: opacity 0.3s ease-in-out;\n  opacity: ", ";\n"])), function (props) { return (props.hide ? 0 : 1); });
+var ProgressFiller = newStyled.div(templateObject_2$1d || (templateObject_2$1d = __makeTemplateObject(["\n  height: 100%;\n  width: ", "%;\n  background-color: white;\n  border-radius: 10px;\n  transition: width 0.3s ease-in-out;\n"], ["\n  height: 100%;\n  width: ", "%;\n  background-color: white;\n  border-radius: 10px;\n  transition: width 0.3s ease-in-out;\n"])), function (props) { return props.progress * 100; });
+var templateObject_1$1B, templateObject_2$1d;
 
 var ProgressBar$1 = function (_a) {
     var progress = _a.progress, hide = _a.hide;
     return (jsx$1(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsx$1(ProgressFiller, { progress: progress }, void 0) }), void 0));
 };
 
-var Container$12 = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __makeTemplateObject(["\n  max-width: 530px;\n  position: relative;\n"], ["\n  max-width: 530px;\n  position: relative;\n"])));
-var HTMLVideo = newStyled.video(templateObject_2$1a || (templateObject_2$1a = __makeTemplateObject(["\n  width: 100%;\n  max-width: 530px;\n  height: ", ";\n"], ["\n  width: 100%;\n  max-width: 530px;\n  height: ", ";\n"])), function (props) { return props.height; });
-var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$Y || (templateObject_3$Y = __makeTemplateObject(["\n  width: 120px;\n  height: 120px;\n\n  @media (max-width: 768px) {\n    width: 80px;\n    height: 80px;\n  }\n"], ["\n  width: 120px;\n  height: 120px;\n\n  @media (max-width: 768px) {\n    width: 80px;\n    height: 80px;\n  }\n"])));
-var PlayContainer = newStyled.div(templateObject_4$M || (templateObject_4$M = __makeTemplateObject(["\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  position: absolute;\n  align-items: center;\n  justify-content: center;\n"], ["\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  position: absolute;\n  align-items: center;\n  justify-content: center;\n"])));
-var PauseContainer = newStyled.div(templateObject_5$D || (templateObject_5$D = __makeTemplateObject(["\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n"], ["\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n"])));
+var Container$14 = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __makeTemplateObject(["\n  max-width: 530px;\n  position: relative;\n"], ["\n  max-width: 530px;\n  position: relative;\n"])));
+var HTMLVideo = newStyled.video(templateObject_2$1c || (templateObject_2$1c = __makeTemplateObject(["\n  width: 100%;\n  max-width: 530px;\n  height: ", ";\n"], ["\n  width: 100%;\n  max-width: 530px;\n  height: ", ";\n"])), function (props) { return props.height; });
+var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$Z || (templateObject_3$Z = __makeTemplateObject(["\n  width: 120px;\n  height: 120px;\n\n  @media (max-width: 768px) {\n    width: 80px;\n    height: 80px;\n  }\n"], ["\n  width: 120px;\n  height: 120px;\n\n  @media (max-width: 768px) {\n    width: 80px;\n    height: 80px;\n  }\n"])));
+var PlayContainer = newStyled.div(templateObject_4$N || (templateObject_4$N = __makeTemplateObject(["\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  position: absolute;\n  align-items: center;\n  justify-content: center;\n"], ["\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  position: absolute;\n  align-items: center;\n  justify-content: center;\n"])));
+var PauseContainer = newStyled.div(templateObject_5$E || (templateObject_5$E = __makeTemplateObject(["\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n"], ["\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n"])));
 var MuteButton = newStyled.button(templateObject_6$z || (templateObject_6$z = __makeTemplateObject(["\n  position: absolute;\n  background: transparent;\n  border: none;\n  bottom: 21px;\n  right: 23px;\n  z-index: 2;\n  cursor: pointer;\n"], ["\n  position: absolute;\n  background: transparent;\n  border: none;\n  bottom: 21px;\n  right: 23px;\n  z-index: 2;\n  cursor: pointer;\n"])));
-var templateObject_1$1w, templateObject_2$1a, templateObject_3$Y, templateObject_4$M, templateObject_5$D, templateObject_6$z;
+var templateObject_1$1A, templateObject_2$1c, templateObject_3$Z, templateObject_4$N, templateObject_5$E, templateObject_6$z;
 
 var Video$1 = function (_a) {
     var _b, _c, _d, _e;
@@ -7036,14 +6863,14 @@ var Video$1 = function (_a) {
             setVideoProgress(videoRef.current.currentTime);
         }
     };
-    return (jsxs$1(Container$12, __assign$1({ className: className }, { children: [!isLoading && withProgressBar && jsx$1(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsx$1(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsx$1(PlayIcon, {}, void 0) }), void 0)) : (jsx$1(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), hasAudioControl && (jsxs$1(MuteButton, __assign$1({ onClick: handleMuteToggle }, { children: [isMuted && jsx$1(Icon$1, { name: "custom/sound_off" }, void 0), !isMuted && jsx$1(Icon$1, { name: "custom/sound_on" }, void 0)] }), void 0)), jsxs$1(HTMLVideo, __assign$1({}, rest, { muted: isMuted, "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: function () { return setIsLoading(false); }, onPause: function () { return setIsPlaying(false); }, onPlaying: function () { return setIsPlaying(true); }, height: height || 'auto' }, { children: [jsx$1("track", { kind: "captions" }, void 0), jsx$1("source", { src: source }, void 0)] }), void 0)] }), void 0));
+    return (jsxs$1(Container$14, __assign$1({ className: className }, { children: [!isLoading && withProgressBar && jsx$1(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsx$1(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsx$1(PlayIcon, {}, void 0) }), void 0)) : (jsx$1(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), hasAudioControl && (jsxs$1(MuteButton, __assign$1({ onClick: handleMuteToggle }, { children: [isMuted && jsx$1(Icon$1, { name: "custom/sound_off" }, void 0), !isMuted && jsx$1(Icon$1, { name: "custom/sound_on" }, void 0)] }), void 0)), jsxs$1(HTMLVideo, __assign$1({}, rest, { muted: isMuted, "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: function () { return setIsLoading(false); }, onPause: function () { return setIsPlaying(false); }, onPlaying: function () { return setIsPlaying(true); }, height: height || 'auto' }, { children: [jsx$1("track", { kind: "captions" }, void 0), jsx$1("source", { src: source }, void 0)] }), void 0)] }), void 0));
 };
 
-var LikeCount = newStyled.span(templateObject_1$1v || (templateObject_1$1v = __makeTemplateObject(["\n  font-size: 14px;\n  line-height: 22px;\n  color: ", ";\n  font-weight: 600;\n\n  &.like-count {\n    transition: color 0.2s ease;\n  }\n"], ["\n  font-size: 14px;\n  line-height: 22px;\n  color: ", ";\n  font-weight: 600;\n\n  &.like-count {\n    transition: color 0.2s ease;\n  }\n"])), function (_a) {
+var LikeCount = newStyled.span(templateObject_1$1z || (templateObject_1$1z = __makeTemplateObject(["\n  font-size: 14px;\n  line-height: 22px;\n  color: ", ";\n  font-weight: 600;\n\n  &.like-count {\n    transition: color 0.2s ease;\n  }\n"], ["\n  font-size: 14px;\n  line-height: 22px;\n  color: ", ";\n  font-weight: 600;\n\n  &.like-count {\n    transition: color 0.2s ease;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.colors.shades.black.color;
 });
-var LikeBtnContainer = newStyled.button(templateObject_2$19 || (templateObject_2$19 = __makeTemplateObject(["\n  position: ", ";\n  top: ", ";\n  right: ", ";\n  z-index: ", ";\n  padding: ", ";\n  box-sizing: ", ";\n  background-color: transparent;\n  border: none;\n"], ["\n  position: ", ";\n  top: ", ";\n  right: ", ";\n  z-index: ", ";\n  padding: ", ";\n  box-sizing: ", ";\n  background-color: transparent;\n  border: none;\n"])), function (_a) {
+var LikeBtnContainer = newStyled.button(templateObject_2$1b || (templateObject_2$1b = __makeTemplateObject(["\n  position: ", ";\n  top: ", ";\n  right: ", ";\n  z-index: ", ";\n  padding: ", ";\n  box-sizing: ", ";\n  background-color: transparent;\n  border: none;\n"], ["\n  position: ", ";\n  top: ", ";\n  right: ", ";\n  z-index: ", ";\n  padding: ", ";\n  box-sizing: ", ";\n  background-color: transparent;\n  border: none;\n"])), function (_a) {
     var _b = _a.position, position = _b === void 0 ? 'absolute' : _b;
     return position;
 }, function (_a) {
@@ -7062,7 +6889,7 @@ var LikeBtnContainer = newStyled.button(templateObject_2$19 || (templateObject_2
     var _b = _a.boxSizing, boxSizing = _b === void 0 ? 'border-box' : _b;
     return boxSizing;
 });
-var templateObject_1$1v, templateObject_2$19;
+var templateObject_1$1z, templateObject_2$1b;
 
 var getStylesBySize$c = function (size) {
     switch (size) {
@@ -7083,7 +6910,7 @@ var getStylesBySize$c = function (size) {
             };
     }
 };
-var Container$11 = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __makeTemplateObject(["\n  background-color: ", ";\n  width: ", ";\n  height: ", ";\n  border: ", ";\n  border-radius: ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: background-color 0.1s ease;\n  box-shadow: ", ";\n\n  padding: ", ";\n  gap: ", ";\n\n  &:hover {\n    background-color: ", ";\n    cursor: pointer;\n  }\n\n  &.disabled {\n    background-color: ", ";\n    cursor: not-allowed;\n\n    svg path {\n      fill: ", ";\n    }\n  }\n"], ["\n  background-color: ", ";\n  width: ", ";\n  height: ", ";\n  border: ", ";\n  border-radius: ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: background-color 0.1s ease;\n  box-shadow: ", ";\n\n  padding: ", ";\n  gap: ", ";\n\n  &:hover {\n    background-color: ", ";\n    cursor: pointer;\n  }\n\n  &.disabled {\n    background-color: ", ";\n    cursor: not-allowed;\n\n    svg path {\n      fill: ", ";\n    }\n  }\n"])), function (_a) {
+var Container$13 = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __makeTemplateObject(["\n  background-color: ", ";\n  width: ", ";\n  height: ", ";\n  border: ", ";\n  border-radius: ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: background-color 0.1s ease;\n  box-shadow: ", ";\n\n  padding: ", ";\n  gap: ", ";\n\n  &:hover {\n    background-color: ", ";\n    cursor: pointer;\n  }\n\n  &.disabled {\n    background-color: ", ";\n    cursor: not-allowed;\n\n    svg path {\n      fill: ", ";\n    }\n  }\n"], ["\n  background-color: ", ";\n  width: ", ";\n  height: ", ";\n  border: ", ";\n  border-radius: ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: background-color 0.1s ease;\n  box-shadow: ", ";\n\n  padding: ", ";\n  gap: ", ";\n\n  &:hover {\n    background-color: ", ";\n    cursor: pointer;\n  }\n\n  &.disabled {\n    background-color: ", ";\n    cursor: not-allowed;\n\n    svg path {\n      fill: ", ";\n    }\n  }\n"])), function (_a) {
     var backgroundColor = _a.backgroundColor;
     return backgroundColor;
 }, function (_a) {
@@ -7124,9 +6951,9 @@ var IconButton = function (_a) {
     var _b, _c;
     var children = _a.children, disabled = _a.disabled, _d = _a.size, size = _d === void 0 ? ComponentSize.Medium : _d, onClick = _a.onClick, backgroundColor = _a.backgroundColor, _e = _a.dataTestId, dataTestId = _e === void 0 ? 'Container' : _e, _f = _a.hasText, hasText = _f === void 0 ? false : _f, boxShadow = _a.boxShadow, _g = _a.rounded, rounded = _g === void 0 ? true : _g, width = _a.width, border = _a.border;
     var theme = useTheme();
-    return (jsx$1(Container$11, __assign$1({ border: border, width: width, className: disabled ? 'disabled' : '', backgroundColor: (_b = backgroundColor === null || backgroundColor === void 0 ? void 0 : backgroundColor.active) !== null && _b !== void 0 ? _b : theme.component.button.primary.active.backgroundColor, hoverBackgroundColor: (_c = backgroundColor === null || backgroundColor === void 0 ? void 0 : backgroundColor.hover) !== null && _c !== void 0 ? _c : theme.component.button.secondary.active.backgroundColor, disabledColor: theme.colors.shades['50'].color, disabledIconColor: theme.colors.shades['200'].color, size: size, "data-testid": dataTestId, onClick: disabled ? function () { } : onClick, hasText: hasText, boxShadow: boxShadow, rounded: rounded }, { children: children }), void 0));
+    return (jsx$1(Container$13, __assign$1({ border: border, width: width, className: disabled ? 'disabled' : '', backgroundColor: (_b = backgroundColor === null || backgroundColor === void 0 ? void 0 : backgroundColor.active) !== null && _b !== void 0 ? _b : theme.component.button.primary.active.backgroundColor, hoverBackgroundColor: (_c = backgroundColor === null || backgroundColor === void 0 ? void 0 : backgroundColor.hover) !== null && _c !== void 0 ? _c : theme.component.button.secondary.active.backgroundColor, disabledColor: theme.colors.shades['50'].color, disabledIconColor: theme.colors.shades['200'].color, size: size, "data-testid": dataTestId, onClick: disabled ? function () { } : onClick, hasText: hasText, boxShadow: boxShadow, rounded: rounded }, { children: children }), void 0));
 };
-var templateObject_1$1u;
+var templateObject_1$1y;
 
 var LikeButton = function (_a) {
     var _b;
@@ -7139,6 +6966,179 @@ var LikeButton = function (_a) {
     return (jsx$1(LikeBtnContainer, __assign$1({ className: className }, containerProps, { children: jsxs$1(IconButton, __assign$1({ onClick: onClick, backgroundColor: background, hasText: !!likes, boxShadow: "0 6px 16px rgba(0, 0, 0, 0.12)" }, { children: [jsx$1(Icon$1, { name: isLiked ? 'actions/like_solid' : 'actions/like', fill: isLiked ? iconFill.solid : (_b = iconFill.regular) !== null && _b !== void 0 ? _b : iconFill.solid, width: "24px", height: "24px" }, void 0), !!likes && jsx$1(LikeCount, __assign$1({ className: "like-count" }, { children: likes }), void 0)] }), isLiked.toString()) }), void 0));
 };
 
+var RegularPriceTagSpan = newStyled.span(templateObject_1$1x || (templateObject_1$1x = __makeTemplateObject(["\n  background-color: #e5e5e5;\n  padding: 3px 4px;\n  border-radius: 4px;\n  gap: 10px;\n  align-items: center;\n  justify-content: center;\n  color: #5a5a5a;\n  font-weight: 600;\n  font-size: 0.6rem;\n  line-height: 1rem;\n  text-align: center;\n  margin-bottom: 0.5rem;\n"], ["\n  background-color: #e5e5e5;\n  padding: 3px 4px;\n  border-radius: 4px;\n  gap: 10px;\n  align-items: center;\n  justify-content: center;\n  color: #5a5a5a;\n  font-weight: 600;\n  font-size: 0.6rem;\n  line-height: 1rem;\n  text-align: center;\n  margin-bottom: 0.5rem;\n"])));
+var ClubPriceTagSpan = newStyled.span(templateObject_2$1a || (templateObject_2$1a = __makeTemplateObject(["\n  background-color: #c64844;\n  padding: 3px 4px;\n  border-radius: 4px;\n  gap: 10px;\n  align-items: center;\n  justify-content: center;\n  color: white;\n  font-weight: 600;\n  font-size: 0.6rem;\n  line-height: 1rem;\n  text-align: center;\n  margin-bottom: 0.5rem;\n"], ["\n  background-color: #c64844;\n  padding: 3px 4px;\n  border-radius: 4px;\n  gap: 10px;\n  align-items: center;\n  justify-content: center;\n  color: white;\n  font-weight: 600;\n  font-size: 0.6rem;\n  line-height: 1rem;\n  text-align: center;\n  margin-bottom: 0.5rem;\n"])));
+var PriceContainer$1 = newStyled.span(templateObject_3$Y || (templateObject_3$Y = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+var PriceContainerV2 = newStyled.span(templateObject_4$M || (templateObject_4$M = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var PriceWithTagContainer = newStyled.span(templateObject_5$D || (templateObject_5$D = __makeTemplateObject(["\n  display: flex;\n  gap: 8px;\n"], ["\n  display: flex;\n  gap: 8px;\n"])));
+var RegularPriceTag = function () {
+    return jsx$1(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
+};
+var ClubPriceTag = function (_a) {
+    var label = _a.label;
+    return jsx$1(ClubPriceTagSpan, { children: label || 'CLUB MEMBERS' }, void 0);
+};
+function getTestId() {
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+    }
+    return args.filter(Boolean).join('-');
+}
+var PriceLabelV4 = function (_a) {
+    var _b;
+    _a.finalPrice; var originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, testId = _a.testId, _c = _a.finalPriceStyled, finalPriceStyled = _c === void 0 ? false : _c, finalPriceStyle = _a.finalPriceStyle, _d = _a.originalPriceStyled, originalPriceStyled = _d === void 0 ? false : _d, _e = _a.originalPriceUnderlined, originalPriceUnderlined = _e === void 0 ? true : _e, _f = _a.size, size = _f === void 0 ? ComponentSize.Medium : _f, _g = _a.clubStyle, clubStyle = _g === void 0 ? false : _g, _h = _a.styledPrice, styledPrice = _h === void 0 ? false : _h, clubPrice = _a.clubPrice, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "color", "testId", "finalPriceStyled", "finalPriceStyle", "originalPriceStyled", "originalPriceUnderlined", "size", "clubStyle", "styledPrice", "clubPrice"]);
+    var theme = useTheme();
+    var isMobile = useWindowDimensions().isMobile;
+    var productFinalPrice = clubPrice;
+    var supportedCurrencies = ['AU$', 'CA$', '£', 'NZD$', 'SGD$'];
+    var currencySymbol = '$';
+    if (typeof productFinalPrice === 'string') {
+        supportedCurrencies.forEach(function (availableCurrency) {
+            if (productFinalPrice.includes(availableCurrency)) {
+                currencySymbol = availableCurrency;
+            }
+        });
+    }
+    var finalPriceArray = typeof productFinalPrice === 'string' &&
+        productFinalPrice.includes('.') &&
+        productFinalPrice.includes(currencySymbol)
+        ? productFinalPrice.split(currencySymbol)[1].split('.')
+        : ['', ''];
+    var priceCommonProps = {
+        size: finalPriceStyled ? ComponentSize.Small : size,
+        color: color || theme.colors.pallete.secondary.color,
+        weight: 700,
+    };
+    var OriginalPrice = function () {
+        var sizeProp = !clubStyle
+            ? originalPriceStyled
+                ? size
+                : ComponentSize.Small
+            : isMobile
+                ? ComponentSize.Small
+                : ComponentSize.XSmall;
+        return (jsx$1(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
+    };
+    return (jsxs$1(Container$1o, __assign$1({}, rest, { children: [clubStyle && !styledPrice ? (jsxs$1(PriceContainer$1, { children: [jsxs$1(PriceWithTagContainer, { children: [jsx$1(OriginalPrice, {}, void 0), jsx$1(RegularPriceTag, {}, void 0)] }, void 0), jsxs$1(PriceWithTagContainer, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: clubPrice }), void 0), jsx$1(ClubPriceTag, { label: theme.label.member }, void 0)] }, void 0)] }, void 0)) : (jsxs$1(PriceContainer$1, { children: [jsxs$1(PriceWithTagContainer, { children: [jsx$1(OriginalPrice, {}, void 0), jsx$1(RegularPriceTag, {}, void 0)] }, void 0), jsxs$1(PriceWithTagContainer, { children: [jsxs$1(PriceContainerV2, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { marginTop: '-5px', color: '#c64844' } }, priceCommonProps, { size: size, "data-testid": getTestId(testId, 'final-product-price') }, { children: currencySymbol }), void 0), jsxs$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, style: { color: '#c64844' } }, { children: [finalPriceArray[0]
+                                                ? finalPriceArray[0]
+                                                : (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsx$1(ClubPriceTag, { label: theme.label.member }, void 0)] }, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$3, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
+};
+var templateObject_1$1x, templateObject_2$1a, templateObject_3$Y, templateObject_4$M, templateObject_5$D;
+
+var STARTS_NUMBER = 5;
+
+var Container$12 = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
+var templateObject_1$1w;
+
+var StarContainer = newStyled.div(templateObject_1$1v || (templateObject_1$1v = __makeTemplateObject(["\n  display: flex;\n  margin-right: ", ";\n"], ["\n  display: flex;\n  margin-right: ", ";\n"])), function (_a) {
+    var marginRight = _a.marginRight;
+    return marginRight;
+});
+var StarList = function (_a) {
+    var rating = _a.rating, starsNumber = _a.starsNumber, fill = _a.fill, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b;
+    var theme = useTheme();
+    var iconProps = {
+        fill: fill,
+        width: theme.component.stars.element[size].width,
+        height: theme.component.stars.element[size].height,
+    };
+    return (jsx$1(Container$12, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
+            return (jsx$1(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsx$1(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx$1(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsx$1(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
+        }) }, void 0));
+};
+var templateObject_1$1v;
+
+/* base styles & size variants */
+var LabelStyles = {
+    baseStyles: function (theme) {
+        return css({
+            margin: '0',
+            display: 'flex',
+            color: theme.colors.pallete.secondary.color,
+            fontWeight: theme.component.rating.fontWeight,
+        });
+    },
+    xxsmall: function (theme) {
+        return css({
+            fontSize: theme.component.rating.size.xxsmall.fontSize,
+            lineHeight: theme.component.rating.size.xxsmall.lineHeight,
+            marginLeft: '0.1rem',
+        });
+    },
+    xsmall: function (theme) {
+        return css({
+            fontSize: theme.component.rating.size.xsmall.fontSize,
+            lineHeight: theme.component.rating.size.xsmall.lineHeight,
+            marginLeft: '0.172rem',
+        });
+    },
+    small: function (theme) {
+        return css({
+            fontSize: theme.component.rating.size.small.fontSize,
+            lineHeight: theme.component.rating.size.small.lineHeight,
+            marginLeft: '0.313rem',
+        });
+    },
+    medium: function (theme) {
+        return css({
+            fontSize: theme.component.rating.size.medium.fontSize,
+            lineHeight: theme.component.rating.size.medium.lineHeight,
+            marginLeft: '0.438rem',
+        });
+    },
+    large: function (theme) {
+        return css({
+            fontSize: theme.component.rating.size.large.fontSize,
+            lineHeight: theme.component.rating.size.large.lineHeight,
+            marginLeft: '0.563rem',
+        });
+    },
+};
+var Container$11 = newStyled.a(templateObject_1$1u || (templateObject_1$1u = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  text-decoration: none;\n"], ["\n  display: flex;\n  align-items: center;\n  text-decoration: none;\n"])));
+var CustomLabel = newStyled.div(function (_a) {
+    var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
+    return [
+        LabelStyles.baseStyles(theme),
+        LabelStyles[size](theme),
+        {
+            ':before': {
+                content: wrapWithParenthesis ? '"("' : '""',
+            },
+            ':after': {
+                content: wrapWithParenthesis ? '")"' : '""',
+            },
+        },
+        css({
+            textDecoration: underline ? 'underline' : 'none',
+        }),
+    ];
+});
+var RatingLabel = newStyled.span(templateObject_2$19 || (templateObject_2$19 = __makeTemplateObject(["\n  font-size: 16px;\n  font-weight: 600;\n  color: ", ";\n  padding-right: 6px;\n  text-decoration: none;\n"], ["\n  font-size: 16px;\n  font-weight: 600;\n  color: ", ";\n  padding-right: 6px;\n  text-decoration: none;\n"])), function (props) { return props.color; });
+var templateObject_1$1u, templateObject_2$19;
+
+var Rating = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, reviews = _a.reviews, reviewsText = _a.reviewsText, rating = _a.rating, _c = _a.showRatingText, showRatingText = _c === void 0 ? false : _c, _d = _a.wrapWithParenthesis, wrapWithParenthesis = _d === void 0 ? false : _d, _e = _a.underline, underline = _e === void 0 ? false : _e, reviewsContainerId = _a.reviewsContainerId;
+    function handleAnchorClick(e) {
+        var _a;
+        if (e.cancelable) {
+            e.preventDefault();
+        }
+        if (reviewsContainerId) {
+            (_a = document.querySelector(reviewsContainerId)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+                behavior: 'smooth',
+            });
+        }
+    }
+    var theme = useTheme();
+    var containerAttributes = reviewsContainerId
+        ? {
+            href: reviewsContainerId,
+        }
+        : {};
+    return (jsxs$1(Container$11, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsx$1(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), jsx$1(StarList, { rating: rating, size: size, starsNumber: STARTS_NUMBER, fill: theme.component.stars.element.color }, void 0), jsxs$1(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
+};
+
 var STYLES_BY_THEME = {
     TheSpaDr: {
         title: {
@@ -7307,21 +7307,37 @@ var ProductItemMobile = function (_a) {
             _a)[size];
     }, [size]);
     var PriceLabelDisplay = function (labelVersion) {
-        var _a, _b;
+        var _a, _b, _c, _d, _e, _f;
         if (labelVersion === void 0) { labelVersion = version; }
         switch (labelVersion) {
             case 4:
                 return priceDisplayType === 'styled' ? (jsx(PriceLabelV4, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Medium, testId: "volume-discount-v4", clubStyle: showClubPriceLabel, clubPrice: clubPrice, styledPrice: true, finalPriceStyle: showClubPriceLabel
                         ? !isMobile
-                            ? { fontSize: '16px', fontWeight: 700, color: '#C64844' }
-                            : { fontSize: '12px', fontWeight: 700, color: '#C64844' }
+                            ? {
+                                fontSize: '16px',
+                                fontWeight: 700,
+                                color: (_a = theme.colors.pallete.brickRed) === null || _a === void 0 ? void 0 : _a.color,
+                            }
+                            : {
+                                fontSize: '12px',
+                                fontWeight: 700,
+                                color: (_b = theme.colors.pallete.brickRed) === null || _b === void 0 ? void 0 : _b.color,
+                            }
                         : undefined }, void 0)) : (jsx(PriceLabelV4, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Medium, testId: "volume-discount-v4", clubStyle: showClubPriceLabel, clubPrice: clubPrice, finalPriceStyle: showClubPriceLabel
                         ? !isMobile
-                            ? { fontSize: '16px', fontWeight: 700, color: '#C64844' }
-                            : { fontSize: '12px', fontWeight: 700, color: '#C64844' }
+                            ? {
+                                fontSize: '16px',
+                                fontWeight: 700,
+                                color: (_c = theme.colors.pallete.brickRed) === null || _c === void 0 ? void 0 : _c.color,
+                            }
+                            : {
+                                fontSize: '12px',
+                                fontWeight: 700,
+                                color: (_d = theme.colors.pallete.brickRed) === null || _d === void 0 ? void 0 : _d.color,
+                            }
                         : undefined }, void 0));
             case 5:
-                return (jsx(ClubOfferPriceLabelWrapper, __assign$1({ style: clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.wrapperStyle }, { children: jsx(ClubPriceMemberLabel, { isClub: true, isPDP: true, finalPrice: (_a = clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.price) === null || _a === void 0 ? void 0 : _a.finalPrice, originalPrice: (_b = clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.price) === null || _b === void 0 ? void 0 : _b.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Medium, testId: "volume-discount-v4", clubStyle: showClubPriceLabel, icon: clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.clubOfferIcon, isCollections: clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isCollections }, void 0) }), void 0));
+                return (jsx(ClubOfferPriceLabelWrapper, __assign$1({ style: clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.wrapperStyle }, { children: jsx(ClubPriceMemberLabel, { isClub: true, isPDP: true, finalPrice: (_e = clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.price) === null || _e === void 0 ? void 0 : _e.finalPrice, originalPrice: (_f = clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.price) === null || _f === void 0 ? void 0 : _f.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Medium, testId: "volume-discount-v4", clubStyle: showClubPriceLabel, icon: clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.clubOfferIcon, isCollections: clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isCollections }, void 0) }), void 0));
             default:
                 return priceDisplayType === 'styled' ? (jsx(PriceLabelV2$1, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Large, testId: "volume-discount" }, void 0)) : (jsx(PriceLabel$1, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Medium, testId: "volume-discount", clubStyle: showClubPriceLabel, finalPriceStyle: showClubPriceLabel
                         ? !isMobile
@@ -19316,36 +19332,30 @@ var ScrollToTop = function (_a) {
 };
 var templateObject_1$L, templateObject_2$z;
 
-var Input = newStyled.input(function (props) { return ({
-    padding: props.theme.component.input.padding,
-    fontSize: props.theme.component.input.fontSize,
-    borderRadius: props.theme.component.input.borderRadius,
-    border: props.theme.component.input.border,
-    lineHeight: props.theme.component.input.lineHeight,
-    color: props.theme.component.input.color,
-    fontWeight: props.theme.component.input.fontWeight,
-    width: '100%',
-    height: '100%',
-    boxSizing: 'border-box',
-    placeholder: {
-        color: props.theme.component.input.placeholderColor,
-    },
-    '&:focus': {
-        outline: 'none',
-        borderColor: props.theme.colors.border.highlight,
-        boxShadow: props.theme.component.input.boxShadow,
-    },
-    '&:disabled': {
-        backgroundColor: props.theme.colors.background.disabled,
-        border: "0.063rem solid ".concat(props.theme.colors.border.disabled),
-        color: props.theme.colors.text.disabled,
-        placeholder: {
-            color: props.theme.colors.text.disabled,
-        },
-    },
-}); });
+var Button$5 = newStyled.button(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n  position: absolute;\n  right: 1rem;\n  background: white;\n  border: none;\n  align-self: center;\n  padding: 0;\n  ", "\n"], ["\n  position: absolute;\n  right: 1rem;\n  background: white;\n  border: none;\n  align-self: center;\n  padding: 0;\n  ", "\n"])), mediaQueries({
+    right: ['1rem', '7.75rem'],
+    top: ['0.75rem', '0.75rem'],
+}));
+var templateObject_1$K;
 
-var Container$x = newStyled.div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  width: auto;\n  padding: 0.688rem 0rem;\n  ", ",\n"], ["\n  display: flex;\n  flex-direction: row;\n  width: auto;\n  padding: 0.688rem 0rem;\n  ", ",\n"])), mediaQueries({
+var ClearButton = function (_a) {
+    var onClick = _a.onClick;
+    var theme = useTheme();
+    return (jsx$1(Button$5, __assign$1({ onClick: onClick, theme: theme }, { children: jsx$1(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
+};
+
+var Container$x = newStyled.div({
+    display: 'flex',
+    justifyContent: 'center',
+    padding: '1rem',
+});
+
+var Footer = function (_a) {
+    var text = _a.text, onClick = _a.onClick;
+    return (jsx$1(Container$x, { children: jsx$1(Text$7, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
+};
+
+var Container$w = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  width: auto;\n  padding: 0.688rem 0rem;\n  ", "\n"], ["\n  display: flex;\n  flex-direction: row;\n  width: auto;\n  padding: 0.688rem 0rem;\n  ", "\n"])), mediaQueries({
     borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
 }));
 var Description = newStyled.div({
@@ -19359,28 +19369,20 @@ var Description = newStyled.div({
         textAlign: 'start',
     },
 });
+var templateObject_1$J;
+
 var ProductItem = function (_a) {
+    var _b;
     var src = _a.src, title = _a.title, price = _a.price;
     var theme = useTheme();
-    return (jsxs$1(Container$x, __assign$1({ theme: theme }, { children: [jsx$1(Image$3, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxs$1(Description, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsx$1("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsx$1(PriceLabel$1, { finalPrice: price, color: "#C64844", size: ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
-};
-var templateObject_1$K;
-
-var Container$w = newStyled.div({
-    display: 'flex',
-    justifyContent: 'center',
-    padding: '1rem',
-});
-var Footer = function (_a) {
-    var text = _a.text, onClick = _a.onClick;
-    return (jsx$1(Container$w, { children: jsx$1(Text$7, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
+    return (jsxs$1(Container$w, __assign$1({ theme: theme }, { children: [jsx$1(Image$3, { src: src, alt: title, width: "4.063rem", height: "5.375rem" }, void 0), jsxs$1(Description, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "regular", testId: "search-product-title" }, { children: title }), void 0), jsx$1(PriceLabel$1, { finalPrice: price, color: (_b = theme.colors.pallete.brickRed) === null || _b === void 0 ? void 0 : _b.color, size: ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
 };
 
-var Ul = newStyled.ul({
+var OptionsList = newStyled.ul({
     margin: '0px',
     padding: '0px',
 });
-var Li = newStyled.li(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n  width: 100%;\n  cursor: pointer;\n  list-style-type: none;\n  box-sizing: border-box;\n  &:hover {\n    background-color: ", ";\n  }\n  ", ",\n"], ["\n  width: 100%;\n  cursor: pointer;\n  list-style-type: none;\n  box-sizing: border-box;\n  &:hover {\n    background-color: ", ";\n  }\n  ", ",\n"])), function (props) { return props.theme.colors.shades['100'].color; }, mediaQueries({
+var OptionItem = newStyled.li(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n  width: 100%;\n  cursor: pointer;\n  list-style-type: none;\n  box-sizing: border-box;\n  &:hover {\n    background-color: ", ";\n  }\n  ", "\n"], ["\n  width: 100%;\n  cursor: pointer;\n  list-style-type: none;\n  box-sizing: border-box;\n  &:hover {\n    background-color: ", ";\n  }\n  ", "\n"])), function (props) { return props.theme.colors.shades['100'].color; }, mediaQueries({
     padding: [0, '0rem 1rem'],
     borderRadius: [0, '0.5rem'],
 }));
@@ -19392,31 +19394,24 @@ var Anchor = newStyled.a({
     padding: 0,
     textDecoration: 'none',
 });
-var Container$v = newStyled.div(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  margin: 0rem;\n  padding: 0rem;\n  position: absolute;\n  width: 100%;\n  background-color: white;\n  box-sizing: border-box;\n  z-index: 2;\n  ", ",\n"], ["\n  display: flex;\n  flex-direction: column;\n  margin: 0rem;\n  padding: 0rem;\n  position: absolute;\n  width: 100%;\n  background-color: white;\n  box-sizing: border-box;\n  z-index: 2;\n  ", ",\n"])), mediaQueries({
+var Container$v = newStyled.div(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  margin: 0rem;\n  padding: 0rem;\n  position: absolute;\n  width: 100%;\n  background-color: white;\n  box-sizing: border-box;\n  z-index: 2;\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  margin: 0rem;\n  padding: 0rem;\n  position: absolute;\n  width: 100%;\n  background-color: white;\n  box-sizing: border-box;\n  z-index: 2;\n  ", "\n"])), mediaQueries({
     border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
     marginTop: ['1.25rem', '0.125rem'],
     borderRadius: ['0', '0.5rem'],
 }));
-var Header$2 = newStyled.div(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n  ", ",\n"], ["\n  ", ",\n"])), mediaQueries({
+var Header$2 = newStyled.div(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), mediaQueries({
     margin: ['0rem 0rem 1rem 0rem', '1rem'],
 }));
+var templateObject_1$I, templateObject_2$y, templateObject_3$w;
+
 var ResultsPanel = function (_a) {
     var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
     var theme = useTheme();
-    return (jsxs$1(Container$v, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header$2, __assign$1({ theme: theme }, { children: jsx$1(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsx$1(Ul, { children: options.map(function (item, index) { return (jsx$1(Li, __assign$1({ theme: theme }, { children: jsx$1(Anchor, __assign$1({ href: item.optionUrl }, { children: jsx$1(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsx$1(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
-};
-var templateObject_1$J, templateObject_2$y, templateObject_3$w;
-
-var Button$5 = newStyled.button(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n  position: absolute;\n  right: 1rem;\n  background: white;\n  border: none;\n  align-self: center;\n  padding: 0;\n  ", ",\n"], ["\n  position: absolute;\n  right: 1rem;\n  background: white;\n  border: none;\n  align-self: center;\n  padding: 0;\n  ", ",\n"])), mediaQueries({
-    right: ['1rem', '7.75rem'],
-    top: ['0.75rem', '0.75rem'],
-}));
-var ClearButton = function (_a) {
-    var onClick = _a.onClick;
-    var theme = useTheme();
-    return (jsx$1(Button$5, __assign$1({ onClick: onClick, theme: theme }, { children: jsx$1(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
-};
-var templateObject_1$I;
+    return (jsxs$1(Container$v, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header$2, __assign$1({ theme: theme }, { children: jsx$1(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsx$1(OptionsList, { children: options.map(function (_a) {
+                    var optionUrl = _a.optionUrl, price = _a.price, src = _a.src, title = _a.title;
+                    return (jsx$1(OptionItem, __assign$1({ theme: theme }, { children: jsx$1(Anchor, __assign$1({ href: optionUrl }, { children: jsx$1(ProductItem, { src: src, title: title, price: price }, void 0) }), void 0) }), title));
+                }) }, void 0), footer && jsx$1(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
+};
 
 var SearchIconContainer = newStyled.div({
     display: 'flex',
@@ -19427,6 +19422,8 @@ var SearchIconContainer = newStyled.div({
     alignSelf: 'center',
 });
 var StyledButton$1 = newStyled(ButtonSecondary)(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n  position: absolute;\n  right: 0;\n  height: 100%;\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n  padding: 0.875rem 1.5rem;\n"], ["\n  position: absolute;\n  right: 0;\n  height: 100%;\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n  padding: 0.875rem 1.5rem;\n"])));
+var templateObject_1$H;
+
 var SearchControl = function (_a) {
     var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
     var theme = useTheme();
@@ -19441,8 +19438,40 @@ var SearchControl = function (_a) {
         return (jsx$1(SearchIconContainer, { children: jsx$1(Icon.Navigation.Search, { title: "Search icon", height: 1.25, width: 1.25 }, void 0) }, void 0));
     }
     return (jsxs$1(Fragment$2, { children: [jsx$1(StyledButton$1, { text: "SEARCH", onClick: onSearch }, void 0), open && jsx$1(ClearButton, { onClick: onClose }, void 0)] }, void 0));
-};
-var templateObject_1$H;
+};
+
+var Input = newStyled.input(function (props) { return ({
+    padding: props.theme.component.input.padding,
+    fontSize: props.theme.component.input.fontSize,
+    borderRadius: props.theme.component.input.borderRadius,
+    border: props.theme.component.input.border,
+    lineHeight: props.theme.component.input.lineHeight,
+    color: props.theme.component.input.color,
+    fontWeight: props.theme.component.input.fontWeight,
+    width: '100%',
+    height: '100%',
+    boxSizing: 'border-box',
+    placeholder: {
+        color: props.theme.component.input.placeholderColor,
+    },
+    '&:focus': {
+        outline: 'none',
+        borderColor: props.theme.colors.border.highlight,
+        boxShadow: props.theme.component.input.boxShadow,
+    },
+    '&:disabled': {
+        backgroundColor: props.theme.colors.background.disabled,
+        border: "0.063rem solid ".concat(props.theme.colors.border.disabled),
+        color: props.theme.colors.text.disabled,
+        placeholder: {
+            color: props.theme.colors.text.disabled,
+        },
+    },
+}); });
+var Container$u = newStyled.div({
+    position: 'relative',
+    display: 'flex',
+});
 
 var initialState$1 = { selectedOption: undefined, open: false, term: '' };
 var reducer = function (state, action) {
@@ -19458,10 +19487,6 @@ var reducer = function (state, action) {
         }
     }
 };
-var Container$u = newStyled.div({
-    position: 'relative',
-    display: 'flex',
-});
 var SearchBar = function (_a) {
     var suggestions = _a.suggestions, resultOptions = _a.resultOptions, onChange = _a.onChange, onSearch = _a.onSearch, onClose = _a.onClose, resultsPanelDataTestId = _a.resultsPanelDataTestId, allResults = _a.allResults, initialTerm = _a.initialTerm, _b = _a.shouldClear, shouldClear = _b === void 0 ? false : _b, _c = _a.isBlogSearchBar, isBlogSearchBar = _c === void 0 ? false : _c, _d = _a.ariaLabel, ariaLabel = _d === void 0 ? 'Search for products' : _d, _e = _a.placeholder, placeholder = _e === void 0 ? 'Search for products' : _e, _f = _a.id, id = _f === void 0 ? 'search' : _f, _g = _a.autoComplete, autoComplete = _g === void 0 ? 'off' : _g;
     var theme = useTheme();
@@ -19514,13 +19539,14 @@ var BackArrow = newStyled.div(templateObject_2$x || (templateObject_2$x = __make
 var BoldSpan = newStyled.span(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  font-weight: 600;\n"], ["\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  font-weight: 600;\n"])));
 var NormalSpan = newStyled.span(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  white-space: pre;\n"], ["\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  white-space: pre;\n"])));
 var SearchNavigationParents = newStyled.div(templateObject_5$k || (templateObject_5$k = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  padding-left: 1.25rem;\n  padding-right: 1rem;\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  padding-left: 1.25rem;\n  padding-right: 1rem;\n"])));
+var templateObject_1$G, templateObject_2$x, templateObject_3$v, templateObject_4$p, templateObject_5$k;
+
 var SearchNavigation = function (_a) {
     var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
-    return (jsxs$1(Container$t, { children: [jsxs$1(Text$7, __assign$1({ variant: "link", style: { display: 'flex', justifyContent: 'center' }, href: returnUrl || '/', onClick: returnAction }, { children: [jsx$1(BackArrow, { children: jsx$1(Icon.Arrows.ChevronRightVariant, { width: 1.375, height: 1.375 }, void 0) }, void 0), returnText && jsx$1(BoldSpan, { children: returnText }, void 0)] }), void 0), jsx$1(SearchNavigationParents, { children: steps.map(function (step, index) {
-                    return index === steps.length - 1 ? (jsx$1(BoldSpan, { children: step }, step)) : (jsx$1(NormalSpan, { children: "".concat(step, " / ") }, step));
+    return (jsxs$1(Container$t, { children: [jsxs$1(Text$7, __assign$1({ variant: "link", style: { display: 'flex', justifyContent: 'center' }, href: returnUrl || '/', onClick: returnAction, testId: "breadcrumb-search-returnText" }, { children: [jsx$1(BackArrow, { children: jsx$1(Icon.Arrows.ChevronRightVariant, { width: 1.375, height: 1.375 }, void 0) }, void 0), returnText && jsx$1(BoldSpan, { children: returnText }, void 0)] }), void 0), jsx$1(SearchNavigationParents, { children: steps.map(function (step, index) {
+                    return index === steps.length - 1 ? (jsx$1(BoldSpan, __assign$1({ "data-testid": "breadcrumb-search-step-".concat(index) }, { children: step }), step)) : (jsx$1(NormalSpan, __assign$1({ "data-testid": "breadcrumb-search-step-".concat(index) }, { children: "".concat(step, " / ") }), step));
                 }) }, void 0)] }, void 0));
-};
-var templateObject_1$G, templateObject_2$x, templateObject_3$v, templateObject_4$p, templateObject_5$k;
+};
 
 var Container$s = newStyled.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n  ", "\n  display: flex;\n  flex-direction: column;\n  padding: 0px 0px 5px;\n  width: ", ";\n  background: ", ";\n  color: ", ";\n  border: ", ";\n"], ["\n  ", "\n  display: flex;\n  flex-direction: column;\n  padding: 0px 0px 5px;\n  width: ", ";\n  background: ", ";\n  color: ", ";\n  border: ", ";\n"])), function (_a) {
     var alignCenter = _a.alignCenter;
@@ -19815,9 +19841,11 @@ var getStylesBySize$4 = function (size, styledBorder, bottomRightBorderRounded,
     }
 };
 var SeasonOfferTag = function (_a) {
-    var text = _a.text, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#C64844' : _b, size = _a.size, className = _a.className, _c = _a.styledBorder, styledBorder = _c === void 0 ? false : _c, _d = _a.bottomRightBorderRounded, bottomRightBorderRounded = _d === void 0 ? '0.25rem' : _d, _e = _a.allBordersRounded, allBordersRounded = _e === void 0 ? { value: '20px' } : _e, _f = _a.color, color = _f === void 0 ? '#FFFFFF' : _f;
+    var _b;
+    var text = _a.text, backgroundColor = _a.backgroundColor, size = _a.size, className = _a.className, _c = _a.styledBorder, styledBorder = _c === void 0 ? false : _c, _d = _a.bottomRightBorderRounded, bottomRightBorderRounded = _d === void 0 ? '0.25rem' : _d, _e = _a.allBordersRounded, allBordersRounded = _e === void 0 ? { value: '20px' } : _e, _f = _a.color, color = _f === void 0 ? '#FFFFFF' : _f;
     var stylesBySize = getStylesBySize$4(size, styledBorder, bottomRightBorderRounded, allBordersRounded);
-    return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: color }, stylesBySize), text: text, className: className }, void 0));
+    var theme = useTheme();
+    return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor || ((_b = theme.colors.pallete.brickRed) === null || _b === void 0 ? void 0 : _b.color), fontWeight: 700, color: color }, stylesBySize), text: text, className: className }, void 0));
 };
 
 var getStylesBySize$3 = function (size) {
@@ -19906,8 +19934,8 @@ var mobileSlideInAnimation = function (distanceFromTop) {
     if (distanceFromTop === void 0) { distanceFromTop = '85px'; }
     return keyframes(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n    from {\n        top: 0;\n    }\n    to {\n        top: ", ";\n    }\n"], ["\n    from {\n        top: 0;\n    }\n    to {\n        top: ", ";\n    }\n"])), distanceFromTop);
 };
-var ToastContainer = newStyled.div(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    z-index: 1000;\n"], ["\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    z-index: 1000;\n"])));
-var ToastContent = newStyled.div(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n    position: fixed;\n    top: ", ";   \n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 12px;\n    border-radius: 8px;\n    background: #fff;\n    box-shadow: 0 6px 24px -6px rgba(0, 0, 0, 0.2);\n    width: 730px;\n    animation: ", " 0.5s ease;\n\n    @media (max-width: 768px) {\n        width: calc(100vw - 32px);\n        top: ", ";\n        min-width: auto;\n        animation: ", " 0.5s ease;\n    }\n"], ["\n    position: fixed;\n    top: ", ";   \n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 12px;\n    border-radius: 8px;\n    background: #fff;\n    box-shadow: 0 6px 24px -6px rgba(0, 0, 0, 0.2);\n    width: 730px;\n    animation: ", " 0.5s ease;\n\n    @media (max-width: 768px) {\n        width: calc(100vw - 32px);\n        top: ", ";\n        min-width: auto;\n        animation: ", " 0.5s ease;\n    }\n"])), function (_a) {
+var ToastContainer = newStyled.div(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 1000;\n"], ["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 1000;\n"])));
+var ToastContent = newStyled.div(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n  position: fixed;\n  top: ", ";\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 12px;\n  border-radius: 8px;\n  background: #fff;\n  box-shadow: 0 6px 24px -6px rgba(0, 0, 0, 0.2);\n  width: 730px;\n  animation: ", " 0.5s ease;\n\n  @media (max-width: 768px) {\n    width: calc(100vw - 32px);\n    top: ", ";\n    min-width: auto;\n    animation: ", " 0.5s ease;\n  }\n"], ["\n  position: fixed;\n  top: ", ";\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 12px;\n  border-radius: 8px;\n  background: #fff;\n  box-shadow: 0 6px 24px -6px rgba(0, 0, 0, 0.2);\n  width: 730px;\n  animation: ", " 0.5s ease;\n\n  @media (max-width: 768px) {\n    width: calc(100vw - 32px);\n    top: ", ";\n    min-width: auto;\n    animation: ", " 0.5s ease;\n  }\n"])), function (_a) {
     var distanceFromTop = _a.distanceFromTop;
     return distanceFromTop || '124px';
 }, function (_a) {
@@ -19920,16 +19948,18 @@ var ToastContent = newStyled.div(templateObject_4$k || (templateObject_4$k = __m
     var distanceFromTop = _a.distanceFromTop;
     return mobileSlideInAnimation(distanceFromTop);
 });
-var ToastText = newStyled.p(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 24px;\n    margin: 0;\n    color: ", ";\n\n  @media (max-width: 768px) {\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 500;\n  }\n"], ["\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 24px;\n    margin: 0;\n    color: ", ";\n\n  @media (max-width: 768px) {\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 500;\n  }\n"])), function (_a) {
+var ToastText = newStyled.p(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 24px;\n  margin: 0;\n  color: ", ";\n\n  @media (max-width: 768px) {\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 500;\n  }\n"], ["\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 24px;\n  margin: 0;\n  color: ", ";\n\n  @media (max-width: 768px) {\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 500;\n  }\n"])), function (_a) {
     var severity = _a.severity;
-    return severity === 'error' ? '#C64844' : '#292929';
+    return (severity === 'error' ? '#C64844' : '#292929');
 });
-var CloseIcon = newStyled.div(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n    margin-inline-start: auto;\n    cursor: pointer;\n"], ["\n    margin-inline-start: auto;\n    cursor: pointer;\n"])));
+var CloseIcon = newStyled.div(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n  margin-inline-start: auto;\n  cursor: pointer;\n"], ["\n  margin-inline-start: auto;\n  cursor: pointer;\n"])));
 var templateObject_1$u, templateObject_2$o, templateObject_3$n, templateObject_4$k, templateObject_5$i, templateObject_6$h;
 
 var Toast = React__default.forwardRef(function (_a, ref) {
-    var severity = _a.severity, summary = _a.summary, life = _a.life, _b = _a.withCloseIcon, withCloseIcon = _b === void 0 ? true : _b, distanceFromTop = _a.distanceFromTop;
-    var _c = useState(false), isVisible = _c[0], setIsVisible = _c[1];
+    var _b;
+    var severity = _a.severity, summary = _a.summary, life = _a.life, _c = _a.withCloseIcon, withCloseIcon = _c === void 0 ? true : _c, distanceFromTop = _a.distanceFromTop;
+    var _d = useState(false), isVisible = _d[0], setIsVisible = _d[1];
+    var theme = useTheme();
     useEffect(function () {
         if (isVisible) {
             var timeout_1 = setTimeout(function () {
@@ -19941,7 +19971,7 @@ var Toast = React__default.forwardRef(function (_a, ref) {
     useImperativeHandle(ref, function () { return ({
         show: function () { return setIsVisible(true); },
     }); });
-    return (jsx$1(ToastContainer, __assign$1({ "data-testid": "toast-container" }, { children: isVisible && (jsxs$1(ToastContent, __assign$1({ "data-testid": "toast-content", distanceFromTop: distanceFromTop }, { children: [severity === 'success' && (jsx$1(Icon.Actions.CircleSolidCheck, { height: "1.5rem", width: "1.5rem", fill: "#4CBEA4" }, void 0)), severity === 'error' && (jsx$1(Icon.Actions.CircleSolidWarning, { height: "1.5rem", width: "1.5rem", fill: "#C64844" }, void 0)), jsx$1(ToastText, __assign$1({ severity: severity }, { children: summary }), void 0), withCloseIcon && (jsx$1(CloseIcon, __assign$1({ role: "button", onClick: function () { return setIsVisible(false); }, "data-testid": "close-icon" }, { children: jsx$1(Icon.Actions.Close, { height: "1.1rem", width: "1.1rem", fill: "#5A5A5A" }, void 0) }), void 0))] }), void 0)) }), void 0));
+    return (jsx$1(ToastContainer, __assign$1({ "data-testid": "toast-container" }, { children: isVisible && (jsxs$1(ToastContent, __assign$1({ "data-testid": "toast-content", distanceFromTop: distanceFromTop }, { children: [severity === 'success' && (jsx$1(Icon.Actions.CircleSolidCheck, { height: "1.5rem", width: "1.5rem", fill: "#4CBEA4" }, void 0)), severity === 'error' && (jsx$1(Icon.Actions.CircleSolidWarning, { height: "1.5rem", width: "1.5rem", fill: (_b = theme.colors.pallete.brickRed) === null || _b === void 0 ? void 0 : _b.color }, void 0)), jsx$1(ToastText, __assign$1({ severity: severity }, { children: summary }), void 0), withCloseIcon && (jsx$1(CloseIcon, __assign$1({ role: "button", onClick: function () { return setIsVisible(false); }, "data-testid": "close-icon" }, { children: jsx$1(Icon.Actions.Close, { height: "1.1rem", width: "1.1rem", fill: "#5A5A5A" }, void 0) }), void 0))] }), void 0)) }), void 0));
 });
 Toast.displayName = 'Toast';