@sps-woodland/product-bar 7.0.0

package/README.md

@@ -0,0 +1,3 @@
+## [@sps-woodland/product-bar](https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/product-bar#readme)
+
+SPS Woodland Design System product bar component

package/lib/index.cjs.js

@@ -0,0 +1,159 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("react"),y=require("@sps-woodland/core"),I=require("@spscommerce/utils"),Oe=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function Ke(e){if(e&&e.__esModule)return e;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const ee=Oe(b),p=Ke(b);function De(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function ce(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter(function(s){return Object.getOwnPropertyDescriptor(e,s).enumerable})),r.push.apply(r,a)}return r}function le(e){for(var t=1;t<arguments.length;t++){var r=arguments[t]!=null?arguments[t]:{};t%2?ce(Object(r),!0).forEach(function(a){De(e,a,r[a])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):ce(Object(r)).forEach(function(a){Object.defineProperty(e,a,Object.getOwnPropertyDescriptor(r,a))})}return e}var Fe=(e,t,r)=>{for(var a of Object.keys(e)){var s;if(e[a]!==((s=t[a])!==null&&s!==void 0?s:r[a]))return!1}return!0},$e=e=>t=>{var r=e.defaultClassName,a=le(le({},e.defaultVariants),t);for(var s in a){var l,u=(l=a[s])!==null&&l!==void 0?l:e.defaultVariants[s];if(u!=null){var f=u;typeof f=="boolean"&&(f=f===!0?"true":"false");var d=e.variantClassNames[s][f];d&&(r+=" "+d)}}for(var[$,m]of e.compoundVariants)Fe($,a,e.defaultVariants)&&(r+=" "+m);return r},Ne=$e({defaultClassName:"_1gzyg118",variantClassNames:{active:{true:"_1gzyg119",false:"_1gzyg11a"},disabled:{true:"_1gzyg11b",false:"_1gzyg11c"}},defaultVariants:{active:!1,disabled:!1},compoundVariants:[]}),Ae=$e({defaultClassName:"_1gzyg111",variantClassNames:{fullWidth:{true:"_1gzyg112",false:"_1gzyg113"}},defaultVariants:{fullWidth:!1},compoundVariants:[]}),Re="_1gzyg114",ze="_1gzyg115",Ie="_1gzyg116",_e="_1gzyg110",He="_1gzyg117",Ue="_1gzyg11e",je="_1gzyg11d";function Te(e){var t,r,a="";if(typeof e=="string"||typeof e=="number")a+=e;else if(typeof e=="object")if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(r=Te(e[t]))&&(a&&(a+=" "),a+=r);else for(t in e)e[t]&&(a&&(a+=" "),a+=t);return a}function Ge(){for(var e,t,r=0,a="";r<arguments.length;)(e=arguments[r++])&&(t=Te(e))&&(a&&(a+=" "),a+=t);return a}const he=typeof window<"u"?ee.default.useLayoutEffect:()=>{};let ue=new Map;function Ve(e,t){if(e===t)return e;let r=ue.get(e);if(r)return r(t),t;let a=ue.get(t);return a?(a(e),e):t}function We(...e){return(...t)=>{for(let r of e)typeof r=="function"&&r(...t)}}function K(...e){let t={...e[0]};for(let r=1;r<e.length;r++){let a=e[r];for(let s in a){let l=t[s],u=a[s];typeof l=="function"&&typeof u=="function"&&s[0]==="o"&&s[1]==="n"&&s.charCodeAt(2)>=65&&s.charCodeAt(2)<=90?t[s]=We(l,u):(s==="className"||s==="UNSAFE_className")&&typeof l=="string"&&typeof u=="string"?t[s]=Ge(l,u):s==="id"&&l&&u?t.id=Ve(l,u):t[s]=u!==void 0?u:l}}return t}const qe=new Set(["id"]),Ye=new Set(["aria-label","aria-labelledby","aria-describedby","aria-details"]),Xe=/^(data-.*)$/;function Je(e,t={}){let{labelable:r,propNames:a}=t,s={};for(const l in e)Object.prototype.hasOwnProperty.call(e,l)&&(qe.has(l)||r&&Ye.has(l)||(a==null?void 0:a.has(l))||Xe.test(l))&&(s[l]=e[l]);return s}function M(e){if(Qe())e.focus({preventScroll:!0});else{let t=Ze(e);e.focus(),et(t)}}let R=null;function Qe(){if(R==null){R=!1;try{var e=document.createElement("div");e.focus({get preventScroll(){return R=!0,!0}})}catch{}}return R}function Ze(e){for(var t=e.parentNode,r=[],a=document.scrollingElement||document.documentElement;t instanceof HTMLElement&&t!==a;)(t.offsetHeight<t.scrollHeight||t.offsetWidth<t.scrollWidth)&&r.push({element:t,scrollTop:t.scrollTop,scrollLeft:t.scrollLeft}),t=t.parentNode;return a instanceof HTMLElement&&r.push({element:a,scrollTop:a.scrollTop,scrollLeft:a.scrollLeft}),r}function et(e){for(let{element:t,scrollTop:r,scrollLeft:a}of e)t.scrollTop=r,t.scrollLeft=a}let x=new Map,Y=new Set;function fe(){if(typeof window>"u")return;let e=r=>{let a=x.get(r.target);a||(a=new Set,x.set(r.target,a),r.target.addEventListener("transitioncancel",t)),a.add(r.propertyName)},t=r=>{let a=x.get(r.target);if(!!a&&(a.delete(r.propertyName),a.size===0&&(r.target.removeEventListener("transitioncancel",t),x.delete(r.target)),x.size===0)){for(let s of Y)s();Y.clear()}};document.body.addEventListener("transitionrun",e),document.body.addEventListener("transitionend",t)}typeof document<"u"&&(document.readyState!=="loading"?fe():document.addEventListener("DOMContentLoaded",fe));function Ee(e){requestAnimationFrame(()=>{x.size===0?e():Y.add(e)})}function tt(){let e=b.useRef(new Map),t=b.useCallback((s,l,u,f)=>{let d=f!=null&&f.once?(...$)=>{e.current.delete(u),u(...$)}:u;e.current.set(u,{type:l,eventTarget:s,fn:d,options:f}),s.addEventListener(l,u,f)},[]),r=b.useCallback((s,l,u,f)=>{var d;let $=((d=e.current.get(u))===null||d===void 0?void 0:d.fn)||u;s.removeEventListener(l,$,f),e.current.delete(u)},[]),a=b.useCallback(()=>{e.current.forEach((s,l)=>{r(s.eventTarget,s.type,l,s.options)})},[r]);return b.useEffect(()=>a,[a]),{addGlobalListener:t,removeGlobalListener:r,removeAllGlobalListeners:a}}function Be(e,t){he(()=>{if(e&&e.ref&&t)return e.ref.current=t.current,()=>{e.ref.current=null}},[e,t])}function rt(e){var t;return typeof window>"u"||window.navigator==null?!1:((t=window.navigator.userAgentData)===null||t===void 0?void 0:t.brands.some(r=>e.test(r.brand)))||e.test(window.navigator.userAgent)}function te(e){var t;return typeof window<"u"&&window.navigator!=null?e.test(((t=window.navigator.userAgentData)===null||t===void 0?void 0:t.platform)||window.navigator.platform):!1}function we(){return te(/^Mac/i)}function nt(){return te(/^iPhone/i)}function at(){return te(/^iPad/i)||we()&&navigator.maxTouchPoints>1}function Se(){return nt()||at()}function ot(){return rt(/Android/i)}function X(e){return e.mozInputSource===0&&e.isTrusted?!0:ot()&&e.pointerType?e.type==="click"&&e.buttons===1:e.detail===0&&!e.pointerType}function st(e){return e.width===0&&e.height===0||e.width===1&&e.height===1&&e.pressure===0&&e.detail===0&&e.pointerType==="mouse"}let O="default",J="",_=new WeakMap;function de(e){Se()?(O==="default"&&(J=document.documentElement.style.webkitUserSelect,document.documentElement.style.webkitUserSelect="none"),O="disabled"):(e instanceof HTMLElement||e instanceof SVGElement)&&(_.set(e,e.style.userSelect),e.style.userSelect="none")}function z(e){if(Se()){if(O!=="disabled")return;O="restoring",setTimeout(()=>{Ee(()=>{O==="restoring"&&(document.documentElement.style.webkitUserSelect==="none"&&(document.documentElement.style.webkitUserSelect=J||""),J="",O="default")})},300)}else if((e instanceof HTMLElement||e instanceof SVGElement)&&e&&_.has(e)){let t=_.get(e);e.style.userSelect==="none"&&(e.style.userSelect=t),e.getAttribute("style")===""&&e.removeAttribute("style"),_.delete(e)}}const ke=ee.default.createContext(null);ke.displayName="PressResponderContext";function it(e){let t=b.useContext(ke);if(t){let{register:r,...a}=t;e=K(a,e),r()}return Be(t,e.ref),e}function ct(e){let{onPress:t,onPressChange:r,onPressStart:a,onPressEnd:s,onPressUp:l,isDisabled:u,isPressed:f,preventFocusOnPress:d,shouldCancelOnPointerExit:$,allowTextSelectionOnPress:m,ref:j,...G}=it(e),T=b.useRef(null);T.current={onPress:t,onPressChange:r,onPressStart:a,onPressEnd:s,onPressUp:l,isDisabled:u,shouldCancelOnPointerExit:$};let[V,D]=b.useState(!1),se=b.useRef({isPressed:!1,ignoreEmulatedMouseEvents:!1,ignoreClickAfterPress:!1,didFirePressStart:!1,activePointerId:null,target:null,isOverTarget:!1,pointerType:null}),{addGlobalListener:w,removeAllGlobalListeners:k}=tt(),Ce=b.useMemo(()=>{let n=se.current,E=(i,v)=>{let{onPressStart:o,onPressChange:c,isDisabled:A}=T.current;A||n.didFirePressStart||(o&&o({type:"pressstart",pointerType:v,target:i.currentTarget,shiftKey:i.shiftKey,metaKey:i.metaKey,ctrlKey:i.ctrlKey,altKey:i.altKey}),c&&c(!0),n.didFirePressStart=!0,D(!0))},P=(i,v,o=!0)=>{let{onPressEnd:c,onPressChange:A,onPress:ie,isDisabled:Me}=T.current;!n.didFirePressStart||(n.ignoreClickAfterPress=!0,n.didFirePressStart=!1,c&&c({type:"pressend",pointerType:v,target:i.currentTarget,shiftKey:i.shiftKey,metaKey:i.metaKey,ctrlKey:i.ctrlKey,altKey:i.altKey}),A&&A(!1),D(!1),ie&&o&&!Me&&ie({type:"press",pointerType:v,target:i.currentTarget,shiftKey:i.shiftKey,metaKey:i.metaKey,ctrlKey:i.ctrlKey,altKey:i.altKey}))},F=(i,v)=>{let{onPressUp:o,isDisabled:c}=T.current;c||o&&o({type:"pressup",pointerType:v,target:i.currentTarget,shiftKey:i.shiftKey,metaKey:i.metaKey,ctrlKey:i.ctrlKey,altKey:i.altKey})},B=i=>{n.isPressed&&(n.isOverTarget&&P(h(n.target,i),n.pointerType,!1),n.isPressed=!1,n.isOverTarget=!1,n.activePointerId=null,n.pointerType=null,k(),m||z(n.target))},g={onKeyDown(i){W(i.nativeEvent,i.currentTarget)&&i.currentTarget.contains(i.target)?(be(i.target,i.key)&&i.preventDefault(),i.stopPropagation(),!n.isPressed&&!i.repeat&&(n.target=i.currentTarget,n.isPressed=!0,E(i,"keyboard"),w(document,"keyup",xe,!1))):i.key==="Enter"&&Q(i.currentTarget)&&i.stopPropagation()},onKeyUp(i){W(i.nativeEvent,i.currentTarget)&&!i.repeat&&i.currentTarget.contains(i.target)&&F(h(n.target,i),"keyboard")},onClick(i){i&&!i.currentTarget.contains(i.target)||i&&i.button===0&&(i.stopPropagation(),u&&i.preventDefault(),!n.ignoreClickAfterPress&&!n.ignoreEmulatedMouseEvents&&(n.pointerType==="virtual"||X(i.nativeEvent))&&(!u&&!d&&M(i.currentTarget),E(i,"virtual"),F(i,"virtual"),P(i,"virtual")),n.ignoreEmulatedMouseEvents=!1,n.ignoreClickAfterPress=!1)}},xe=i=>{if(n.isPressed&&W(i,n.target)){be(i.target,i.key)&&i.preventDefault(),i.stopPropagation(),n.isPressed=!1;let v=i.target;P(h(n.target,i),"keyboard",n.target.contains(v)),k(),n.target instanceof HTMLElement&&n.target.contains(v)&&(Q(n.target)||n.target.getAttribute("role")==="link")&&n.target.click()}};if(typeof PointerEvent<"u"){g.onPointerDown=c=>{if(!(c.button!==0||!c.currentTarget.contains(c.target))){if(st(c.nativeEvent)){n.pointerType="virtual";return}q(c.currentTarget)&&c.preventDefault(),n.pointerType=c.pointerType,c.stopPropagation(),n.isPressed||(n.isPressed=!0,n.isOverTarget=!0,n.activePointerId=c.pointerId,n.target=c.currentTarget,!u&&!d&&M(c.currentTarget),m||de(n.target),E(c,n.pointerType),w(document,"pointermove",i,!1),w(document,"pointerup",v,!1),w(document,"pointercancel",o,!1))}},g.onMouseDown=c=>{!c.currentTarget.contains(c.target)||c.button===0&&(q(c.currentTarget)&&c.preventDefault(),c.stopPropagation())},g.onPointerUp=c=>{!c.currentTarget.contains(c.target)||n.pointerType==="virtual"||c.button===0&&L(c,c.currentTarget)&&F(c,n.pointerType||c.pointerType)};let i=c=>{c.pointerId===n.activePointerId&&(L(c,n.target)?n.isOverTarget||(n.isOverTarget=!0,E(h(n.target,c),n.pointerType)):n.isOverTarget&&(n.isOverTarget=!1,P(h(n.target,c),n.pointerType,!1),T.current.shouldCancelOnPointerExit&&B(c)))},v=c=>{c.pointerId===n.activePointerId&&n.isPressed&&c.button===0&&(L(c,n.target)?P(h(n.target,c),n.pointerType):n.isOverTarget&&P(h(n.target,c),n.pointerType,!1),n.isPressed=!1,n.isOverTarget=!1,n.activePointerId=null,n.pointerType=null,k(),m||z(n.target))},o=c=>{B(c)};g.onDragStart=c=>{!c.currentTarget.contains(c.target)||B(c)}}else{g.onMouseDown=o=>{o.button!==0||!o.currentTarget.contains(o.target)||(q(o.currentTarget)&&o.preventDefault(),o.stopPropagation(),!n.ignoreEmulatedMouseEvents&&(n.isPressed=!0,n.isOverTarget=!0,n.target=o.currentTarget,n.pointerType=X(o.nativeEvent)?"virtual":"mouse",!u&&!d&&M(o.currentTarget),E(o,n.pointerType),w(document,"mouseup",i,!1)))},g.onMouseEnter=o=>{!o.currentTarget.contains(o.target)||(o.stopPropagation(),n.isPressed&&!n.ignoreEmulatedMouseEvents&&(n.isOverTarget=!0,E(o,n.pointerType)))},g.onMouseLeave=o=>{!o.currentTarget.contains(o.target)||(o.stopPropagation(),n.isPressed&&!n.ignoreEmulatedMouseEvents&&(n.isOverTarget=!1,P(o,n.pointerType,!1),T.current.shouldCancelOnPointerExit&&B(o)))},g.onMouseUp=o=>{!o.currentTarget.contains(o.target)||!n.ignoreEmulatedMouseEvents&&o.button===0&&F(o,n.pointerType)};let i=o=>{if(o.button===0){if(n.isPressed=!1,k(),n.ignoreEmulatedMouseEvents){n.ignoreEmulatedMouseEvents=!1;return}L(o,n.target)?P(h(n.target,o),n.pointerType):n.isOverTarget&&P(h(n.target,o),n.pointerType,!1),n.isOverTarget=!1}};g.onTouchStart=o=>{if(!o.currentTarget.contains(o.target))return;o.stopPropagation();let c=lt(o.nativeEvent);!c||(n.activePointerId=c.identifier,n.ignoreEmulatedMouseEvents=!0,n.isOverTarget=!0,n.isPressed=!0,n.target=o.currentTarget,n.pointerType="touch",!u&&!d&&M(o.currentTarget),m||de(n.target),E(o,n.pointerType),w(window,"scroll",v,!0))},g.onTouchMove=o=>{if(!o.currentTarget.contains(o.target)||(o.stopPropagation(),!n.isPressed))return;let c=pe(o.nativeEvent,n.activePointerId);c&&L(c,o.currentTarget)?n.isOverTarget||(n.isOverTarget=!0,E(o,n.pointerType)):n.isOverTarget&&(n.isOverTarget=!1,P(o,n.pointerType,!1),T.current.shouldCancelOnPointerExit&&B(o))},g.onTouchEnd=o=>{if(!o.currentTarget.contains(o.target)||(o.stopPropagation(),!n.isPressed))return;let c=pe(o.nativeEvent,n.activePointerId);c&&L(c,o.currentTarget)?(F(o,n.pointerType),P(o,n.pointerType)):n.isOverTarget&&P(o,n.pointerType,!1),n.isPressed=!1,n.activePointerId=null,n.isOverTarget=!1,n.ignoreEmulatedMouseEvents=!0,m||z(n.target),k()},g.onTouchCancel=o=>{!o.currentTarget.contains(o.target)||(o.stopPropagation(),n.isPressed&&B(o))};let v=o=>{n.isPressed&&o.target.contains(n.target)&&B({currentTarget:n.target,shiftKey:!1,ctrlKey:!1,metaKey:!1,altKey:!1})};g.onDragStart=o=>{!o.currentTarget.contains(o.target)||B(o)}}return g},[w,u,d,k,m]);return b.useEffect(()=>()=>{m||z(se.current.target)},[m]),{isPressed:f||V,pressProps:K(G,Ce)}}function Q(e){return e.tagName==="A"&&e.hasAttribute("href")}function W(e,t){const{key:r,code:a}=e,s=t,l=s.getAttribute("role");return(r==="Enter"||r===" "||r==="Spacebar"||a==="Space")&&!(s instanceof HTMLInputElement&&!Le(s,r)||s instanceof HTMLTextAreaElement||s.isContentEditable)&&(!Q(s)||l==="button"&&r!=="Enter")&&!(l==="link"&&r!=="Enter")}function lt(e){const{targetTouches:t}=e;return t.length>0?t[0]:null}function pe(e,t){const r=e.changedTouches;for(let a=0;a<r.length;a++){const s=r[a];if(s.identifier===t)return s}return null}function h(e,t){return{currentTarget:e,shiftKey:t.shiftKey,ctrlKey:t.ctrlKey,metaKey:t.metaKey,altKey:t.altKey}}function ut(e){let t=e.width/2||e.radiusX||0,r=e.height/2||e.radiusY||0;return{top:e.clientY-r,right:e.clientX+t,bottom:e.clientY+r,left:e.clientX-t}}function ft(e,t){return!(e.left>t.right||t.left>e.right||e.top>t.bottom||t.top>e.bottom)}function L(e,t){let r=t.getBoundingClientRect(),a=ut(e);return ft(r,a)}function q(e){return!(e instanceof HTMLElement)||!e.draggable}function be(e,t){return e instanceof HTMLInputElement?!Le(e,t):e instanceof HTMLButtonElement?e.type!=="submit":!0}const dt=new Set(["checkbox","radio","range","color","file","image","button","submit","reset"]);function Le(e,t){return e.type==="checkbox"||e.type==="radio"?t===" ":dt.has(e.type)}class pt{isDefaultPrevented(){return this.nativeEvent.defaultPrevented}preventDefault(){this.defaultPrevented=!0,this.nativeEvent.preventDefault()}stopPropagation(){this.nativeEvent.stopPropagation(),this.isPropagationStopped=()=>!0}isPropagationStopped(){return!1}persist(){}constructor(t,r){this.nativeEvent=r,this.target=r.target,this.currentTarget=r.currentTarget,this.relatedTarget=r.relatedTarget,this.bubbles=r.bubbles,this.cancelable=r.cancelable,this.defaultPrevented=r.defaultPrevented,this.eventPhase=r.eventPhase,this.isTrusted=r.isTrusted,this.timeStamp=r.timeStamp,this.type=t}}function bt(e){let t=b.useRef({isFocused:!1,onBlur:e,observer:null});return t.current.onBlur=e,he(()=>{const r=t.current;return()=>{r.observer&&(r.observer.disconnect(),r.observer=null)}},[]),b.useCallback(r=>{if(r.target instanceof HTMLButtonElement||r.target instanceof HTMLInputElement||r.target instanceof HTMLTextAreaElement||r.target instanceof HTMLSelectElement){t.current.isFocused=!0;let a=r.target,s=l=>{var u,f;t.current.isFocused=!1,a.disabled&&((f=(u=t.current).onBlur)===null||f===void 0||f.call(u,new pt("blur",l))),t.current.observer&&(t.current.observer.disconnect(),t.current.observer=null)};a.addEventListener("focusout",s,{once:!0}),t.current.observer=new MutationObserver(()=>{t.current.isFocused&&a.disabled&&(t.current.observer.disconnect(),a.dispatchEvent(new FocusEvent("blur")),a.dispatchEvent(new FocusEvent("focusout",{bubbles:!0})))}),t.current.observer.observe(a,{attributes:!0,attributeFilter:["disabled"]})}},[])}function gt(e){let{isDisabled:t,onFocus:r,onBlur:a,onFocusChange:s}=e;const l=b.useCallback(d=>{if(d.target===d.currentTarget)return a&&a(d),s&&s(!1),!0},[a,s]),u=bt(l),f=b.useCallback(d=>{d.target===d.currentTarget&&(r&&r(d),s&&s(!0),u(d))},[s,r,u]);return{focusProps:{onFocus:!t&&(r||s||a)?f:void 0,onBlur:!t&&(a||s)?l:null}}}let N=null,vt=new Set,ge=!1,S=!1,Z=!1;function re(e,t){for(let r of vt)r(e,t)}function mt(e){return!(e.metaKey||!we()&&e.altKey||e.ctrlKey||e.key==="Control"||e.key==="Shift"||e.key==="Meta")}function ve(e){S=!0,mt(e)&&(N="keyboard",re("keyboard",e))}function C(e){N="pointer",(e.type==="mousedown"||e.type==="pointerdown")&&(S=!0,re("pointer",e))}function Pt(e){X(e)&&(S=!0,N="virtual")}function yt(e){e.target===window||e.target===document||(!S&&!Z&&(N="virtual",re("virtual",e)),S=!1,Z=!1)}function $t(){S=!1,Z=!0}function me(){if(typeof window>"u"||ge)return;let e=HTMLElement.prototype.focus;HTMLElement.prototype.focus=function(){S=!0,e.apply(this,arguments)},document.addEventListener("keydown",ve,!0),document.addEventListener("keyup",ve,!0),document.addEventListener("click",Pt,!0),window.addEventListener("focus",yt,!0),window.addEventListener("blur",$t,!1),typeof PointerEvent<"u"?(document.addEventListener("pointerdown",C,!0),document.addEventListener("pointermove",C,!0),document.addEventListener("pointerup",C,!0)):(document.addEventListener("mousedown",C,!0),document.addEventListener("mousemove",C,!0),document.addEventListener("mouseup",C,!0)),ge=!0}typeof document<"u"&&(document.readyState!=="loading"?me():document.addEventListener("DOMContentLoaded",me));function Tt(){return N}function Pe(e){if(!e)return;let t=!0;return r=>{let a={...r,preventDefault(){r.preventDefault()},isDefaultPrevented(){return r.isDefaultPrevented()},stopPropagation(){console.error("stopPropagation is now the default behavior for events in React Spectrum. You can use continuePropagation() to revert this behavior.")},continuePropagation(){t=!1}};e(a),t&&r.stopPropagation()}}function ht(e){return{keyboardProps:e.isDisabled?{}:{onKeyDown:Pe(e.onKeyDown),onKeyUp:Pe(e.onKeyUp)}}}function Et(e){if(Tt()==="virtual"){let t=document.activeElement;Ee(()=>{document.activeElement===t&&document.contains(e)&&M(e)})}else M(e)}function Bt(e,t){return t.some(r=>r.contains(e))}class ne{get size(){return this.fastMap.size}getTreeNode(t){return this.fastMap.get(t)}addTreeNode(t,r,a){let s=this.fastMap.get(r!=null?r:null),l=new ye({scopeRef:t});s.addChild(l),l.parent=s,this.fastMap.set(t,l),a&&(l.nodeToRestore=a)}removeTreeNode(t){if(t===null)return;let r=this.fastMap.get(t),a=r.parent;for(let l of this.traverse())l!==r&&r.nodeToRestore&&l.nodeToRestore&&r.scopeRef.current&&Bt(l.nodeToRestore,r.scopeRef.current)&&(l.nodeToRestore=r.nodeToRestore);let s=r.children;a.removeChild(r),s.length>0&&s.forEach(l=>a.addChild(l)),this.fastMap.delete(r.scopeRef)}*traverse(t=this.root){if(t.scopeRef!=null&&(yield t),t.children.length>0)for(let r of t.children)yield*this.traverse(r)}clone(){let t=new ne;for(let r of this.traverse())t.addTreeNode(r.scopeRef,r.parent.scopeRef,r.nodeToRestore);return t}constructor(){this.fastMap=new Map,this.root=new ye({scopeRef:null}),this.fastMap.set(null,this.root)}}class ye{addChild(t){this.children.push(t),t.parent=this}removeChild(t){this.children.splice(this.children.indexOf(t),1),t.parent=void 0}constructor(t){this.children=[],this.contain=!1,this.scopeRef=t.scopeRef}}new ne;let wt=ee.default.createContext(null);function St(e){let t=b.useContext(wt)||{};Be(t,e);let{ref:r,...a}=t;return a}function kt(e,t){let{focusProps:r}=gt(e),{keyboardProps:a}=ht(e),s=K(r,a),l=St(t),u=e.isDisabled?{}:l,f=b.useRef(e.autoFocus);return b.useEffect(()=>{f.current&&t.current&&Et(t.current),f.current=!1},[t]),{focusableProps:K({...s,tabIndex:e.excludeFromTabOrder&&!e.isDisabled?-1:void 0},u)}}function Lt(e,t){let{elementType:r="a",onPress:a,onPressStart:s,onPressEnd:l,onClick:u,isDisabled:f,...d}=e,$;r!=="a"&&($={role:"link",tabIndex:f?void 0:0});let{focusableProps:m}=kt(e,t),{pressProps:j,isPressed:G}=ct({onPress:a,onPressStart:s,onPressEnd:l,isDisabled:f,ref:t}),T=Je(d,{labelable:!0}),V=K(m,j);return{isPressed:G,linkProps:K(T,{...V,...$,"aria-disabled":f||void 0,onClick:D=>{j.onClick(D),u&&(u(D),console.warn("onClick is deprecated, please use onPress"))}})}}function H(e){let t=p.useRef(null),{linkProps:r}=Lt(e,t);const a={...r,ref:t,className:y.cl(Ne({active:e.active,disabled:!1}),e.className)};return p.createElement(p.Fragment,null,e.href?p.createElement("a",{...a,href:e.href},e.children):p.createElement("span",{...a},e.children))}y.Metadata.set(H,{name:"Product Bar Tab",props:{active:{type:"boolean",required:!0},href:{type:"string"}}});function U({children:e,className:t,name:r,logoSrc:a,...s}){return p.createElement(p.Fragment,null,p.createElement("a",{className:y.cl(Re,t),...s},a&&p.createElement("img",{className:ze,src:a,"aria-hidden":"true",alt:`${r} Logo`}),r&&p.createElement("span",{className:Ie},r)),p.createElement("span",{className:je}))}y.Metadata.set(U,{name:"Product Bar Name",props:{name:{type:"string"},logoSrc:{type:"string"}}});function ae({fullWidth:e,children:t,className:r,...a}){const s=p.useRef(null),[l,u,f]=y.selectChildren(t,[{type:U},{type:H}]);return p.createElement("div",{className:y.cl(_e,r),...a,ref:s},p.createElement("nav",{className:Ae({fullWidth:e})},l,p.createElement("div",{className:Ue},u),p.createElement("div",{className:He},p.createElement(y.PortalContext.Provider,{value:{parentElementRef:s,fixed:!0}},f))))}y.Metadata.set(ae,{name:"ProductBar",props:{fullWidth:{type:"boolean"}}});var Ct="r7f8id0",xt="r7f8id1";function oe({channelId:e,className:t,...r}){const{t:a}=p.useContext(y.I18nContext);return p.createElement("a",{className:y.cl(Ct,t),target:"_blank",rel:"noreferrer",href:`https://spscommerce.slack.com/archives/${e}`,...r},p.createElement(y.Icon,{className:xt,icon:"conversation","aria-hidden":"true"}),p.createElement("span",null,a("design-system:slackLink.label")))}y.Metadata.set(oe,{name:"Slack Link",props:{channelId:{type:"string",required:!0}}});const Mt={components:[ae,U,H],examples:{basic:{label:"Basic",description:"Product navigation bar",examples:{basic:{react:I.code`
+            import { ProductBar, ProductBarName, ProductBarTab } from "@sps-woodland/product-bar";
+            import { SpsButton } from "@spscommerce/ds-react";
+
+            function Component() {
+              const [activeTab, setActiveTab] = React.useState("Bar");
+
+              return (
+                <ProductBar
+                  fullWidth
+                  style={{ position: "relative", zIndex: "auto" }} // display this example in its place instead of at the top
+                >
+                  <ProductBarName
+                    name="My Product"
+                    logoSrc="https://cdn.prod.spsc.io/web/framework/assets/17.08.01/icons/cube/cube.svg"
+                  />
+                  <ProductBarTab
+                    active={activeTab === "Foo"}
+                    onPress={() => {
+                      setActiveTab("Foo");
+                      console.log("Foo!");
+                    }}
+                  >
+                    Foo
+                  </ProductBarTab>
+                  <ProductBarTab
+                    active={activeTab === "Bar"}
+                    onPress={() => {
+                      setActiveTab("Bar");
+                      console.log("Bar!");
+                    }}
+                  >
+                    Bar
+                  </ProductBarTab>
+                  <ProductBarTab
+                    active={activeTab === "Baz"}
+                    onPress={() => {
+                      setActiveTab("Baz");
+                      console.log("Baz!");
+                    }}
+                  >
+                    Baz
+                  </ProductBarTab>
+                  <SpsButton>do the thing</SpsButton>
+                </ProductBar>
+              )
+            }
+          `}}},action:{label:"Action",examples:{basic:{react:I.code`
+            import { ProductBar, ProductBarName, ProductBarTab } from "@sps-woodland/product-bar";
+            import { SpsButton } from "@spscommerce/ds-react";
+
+            function Component() {
+              const [activeTab, setActiveTab] = React.useState("Bar");
+
+              return (
+                <ProductBar
+                  fullWidth
+                  style={{ position: "relative", zIndex: "auto" }} // display this example in its place instead of at the top
+                >
+                  <ProductBarName
+                    name="My Product"
+                    logoSrc="https://cdn.prod.spsc.io/web/framework/assets/17.08.01/icons/cube/cube.svg"
+                    onClick={() => console.log("product name clicked")}
+                  />
+                  <ProductBarTab
+                    active={activeTab === "Foo"}
+                    onPress={() => {
+                      setActiveTab("Foo");
+                      console.log("Foo!");
+                    }}
+                  >
+                    Foo
+                  </ProductBarTab>
+                  <ProductBarTab
+                    active={activeTab === "Bar"}
+                    onPress={() => {
+                      setActiveTab("Bar");
+                      console.log("Bar!");
+                    }}
+                  >
+                    Bar
+                  </ProductBarTab>
+                  <ProductBarTab
+                    active={activeTab === "Baz"}
+                    onPress={() => {
+                      setActiveTab("Baz");
+                      console.log("Baz!");
+                    }}
+                  >
+                    Baz
+                  </ProductBarTab>
+                  <SpsButton>do the thing</SpsButton>
+                </ProductBar>
+              )
+            }
+          `}}},link:{label:"Link",examples:{basic:{react:I.code`
+            import { ProductBar, ProductBarName, ProductBarTab } from "@sps-woodland/product-bar";
+            import { SpsButton } from "@spscommerce/ds-react";
+
+            function Component() {
+              const [activeTab, setActiveTab] = React.useState("Bar");
+
+              return (
+                <ProductBar
+                  fullWidth
+                  style={{ position: "relative", zIndex: "auto" }} // display this example in its place instead of at the top
+                >
+                  <ProductBarName
+                    name="My Product"
+                    logoSrc="https://cdn.prod.spsc.io/web/framework/assets/17.08.01/icons/cube/cube.svg"
+                    href="https://www.google.com"
+                  />
+                  <ProductBarTab
+                    active={activeTab === "Foo"}
+                    onPress={() => {
+                      setActiveTab("Foo");
+                      console.log("Foo!");
+                    }}
+                  >
+                    Foo
+                  </ProductBarTab>
+                  <ProductBarTab
+                    active={activeTab === "Bar"}
+                    onPress={() => {
+                      setActiveTab("Bar");
+                      console.log("Bar!");
+                    }}
+                  >
+                    Bar
+                  </ProductBarTab>
+                  <ProductBarTab
+                    active={activeTab === "Baz"}
+                    onPress={() => {
+                      setActiveTab("Baz");
+                      console.log("Baz!");
+                    }}
+                  >
+                    Baz
+                  </ProductBarTab>
+                  <SpsButton>do the thing</SpsButton>
+                </ProductBar>
+              )
+            }
+          `}}}}},Ot={components:[oe],examples:{basic:{examples:{basic:{react:I.code`
+            import { SlackLink } from "@sps-woodland/slack-link";
+            import { ProductBar } from "@sps-woodland/product-bar";
+
+            function Component() {
+              return (
+                <ProductBar productName="My Product"
+                    productLogoSrc="https://cdn.prod.spsc.io/web/framework/assets/17.08.01/icons/cube/cube.svg"
+                    tabs={["Foo", "Bar", "Baz"]}
+                    activeTab="Bar"
+                    fullWidth
+                    style={{ position: "relative" }} // display this example in its place instead of at the top
+                ><SlackLink channelId="CELEGDK4Y" /></ProductBar>
+              );
+            }
+          `}}}}},Kt={"Product Bar":Mt,"Slack Link":Ot};exports.MANIFEST=Kt;exports.ProductBar=ae;exports.ProductBarName=U;exports.ProductBarTab=H;exports.SlackLink=oe;

package/lib/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./product-bar/ProductBar";
+export * from "./product-bar-tab/ProductBarTab";
+export * from "./product-bar-name/ProductBarName";
+export * from "./slack-link/SlackLink";
+export * from "./manifest";