\n};\n\n/*SizedImage.propTypes = {\n type: PropTypes.oneOf( [ 'image', 'sku' ] ).isRequired,\n style: PropTypes.object,\n alt: PropTypes.string,\n src: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ])\n };*/\n\nSizedImage.defaultProps = {\n alt: '',\n type: 'image',\n size: 360\n};\n\nexport default SizedImage;\n","\nimport {localizeURL} from '@util/URLUtils';\n\nconst cls = 'flex justify-between items-center p-4 border-b border-solid border-grey-lighter';\nconst ListItemLink = ( {as, className = '', children, href, ...props} ) => {\n const Element = as || 'div';\n const attrs = {};\n\n if ( href && as === 'a' ) {\n attrs.href = localizeURL( href );\n }\n\n return (\n \n
\n \n \n
\n \n
\n {isEcommerceSite ?\n {longName}
\n{indicator} #{skuDisplay}
\n\n \n
\n : null\n }\n Howdy
\"});\n * modal.open({content: $(\"Howdy
\"), width: \"500px\", height: \"200px\"});\n * // Ajax\n * $.get('ajax.html', function(data){\n * modal.open({content: data});\n * });\n */\n\nvar $overlay,\n $modal,\n $content,\n $close,\n isOpen = false,\n preserve = false,\n is_animating = false,\n anim_end_event_name = 'animationend',\n anim_control_class = {\n fold: {\n inClass: 'fadeUp',\n outClass: 'fadeOut'\n },\n fade: {\n inClass: 'fadeUp',\n outClass: 'fadeOut'\n },\n slideTop: {\n inClass: 'slideDown',\n outClass: 'slideUp'\n }\n };\n\n/* transition helpers */\nfunction transition_el ( el, classList, fn ) {\n if ( is_animating ) {\n return false;\n }\n\n is_animating = true;\n\n el.addClass( classList ).on( anim_end_event_name, function () {\n fn && fn();\n el.off( anim_end_event_name );\n is_animating = false;\n reset_animation_state( el );\n } );\n}\n\nfunction reset_animation_state ( el ) {\n el.attr( 'class', el.data( 'origClassList' ) );\n}\n\nfunction pullDown ( el ) {\n var orgY = el.offset().top;\n\n el.css( {\n top: -el.height(),\n opacity: 0\n } ).animate( {\n top: orgY,\n opacity: 1\n }, 300 );\n\n}\n\nvar center = function ( position ) {\n var top,\n left,\n position = position || 'center',\n contentOffset = {\n height: $content[0].offsetHeight,\n width: $content[0].offsetWidth\n },\n $window = $( window );\n\n if ( 'top' === position ) {\n top = 0;\n }\n else {\n top = Math.max( $window.height() - contentOffset.height, 0 ) / 2;\n }\n left = Math.max( $window.width() - 20 - contentOffset.width, 0 ) / 2;\n\n $content.css( {\n top: contentOffset.height < $window.height()\n ? top\n : 0,\n left: left\n } );\n};\n\nvar setSize = function ( settings ) {\n var target = settings.target,\n width = settings.width,\n height = settings.height;\n\n $content.css( {\n width: '100%',\n 'max-width': target && parseInt( target.attr( 'data-modal-width' ), 10 ) || width || 'auto',\n height: target && target.attr( 'data-modal-height' ) || height || 'auto'\n } );\n};\n\nlet freezeScrollPose = null;\nvar toggleOverlay = function ( doApply ) {\n $( 'html' ).toggleClass( 'blur-body', doApply );\n // $( 'body' ).toggleClass( 'no-scroll', doApply );\n freezeScrollPose = doApply ? document.documentElement.scrollTop : null;\n};\n\nfunction preventScrolling ( e ) {\n if ( freezeScrollPose ) {\n document.documentElement.scrollTop = freezeScrollPose;\n }\n}\n\nvar createFrame = function ( src ) {\n var ifrm = document.createElement( 'iframe' );\n ifrm.setAttribute( 'src', src || '/' );\n ifrm.style.width = '100%';\n ifrm.style.height = 'auto';\n\n return ifrm;\n};\n\n/**\n * Open modal window specifying either the html content to display or a node selector who's content\n * will be displayed within page\n *\n * @param {Object} settings [, target, content, className ,width, height ]\n */\nvar open = function ( settings ) {\n settings = settings || {};\n\n $modal.trigger( 'modal:beforeopen' );\n\n $content.off().empty();\n\n var target;\n // if provided a target id then pluck from DOM and set preserve flag\n if ( settings.target ) {\n preserve = true;\n target = settings.target = $( settings.target ).clone( true ).removeClass( 'visually-hidden hidden-lightbox' );\n target.data( 'preserve', true );\n }\n\n setContent( target || settings.content );\n setSize( settings );\n\n settings.className && $content.addClass( settings.className );\n $modal.show();\n center( settings.position );\n toggleOverlay( true );\n\n // don't reposition modal for small devices OR \"FIXED\" modal option\n if ( window.matchMedia( 'screen and (min-width: 30em)' ).matches ) {\n var _resizeHandler = center.bind( this, settings.position );\n $( window ).on( 'resize.modal', _resizeHandler );\n $modal.on( 'modal:closecomplete', function () {\n $( window ).off( 'resize.modal', _resizeHandler );\n } )\n }\n\n // only trigger transitions if modal is not already open\n if ( !isOpen ) {\n transition_el( $content, anim_control_class.fade.inClass );\n }\n $overlay.show();\n $modal.trigger( 'modal:opencomplete' );\n isOpen = true;\n return this;\n};\n\nvar openTarget = function ( e ) {\n console.log( 'OPEN TARGET' );\n e.preventDefault();\n var targetDialog = $( e.currentTarget.getAttribute( 'data-modal' ) ).clone( true );\n\n if ( targetDialog[0] ) {\n open( {target: targetDialog} );\n }\n};\n\nvar setContent = function ( content ) {\n $content.empty().append( content );\n};\n\nvar close = function () {\n $modal.trigger( 'modal:beforeclose' );\n setTimeout( () => {\n // preserve modal content for reuse, this will preserve modals state upon previous open\n if ( preserve ) {\n // not already in DOM\n if ( !$( 'body' ).find( $content.children( 0 ).attr( 'id' ).length ) ) {\n $( $content.html() ).addClass( 'visually-hidden' ).appendTo( 'body' );\n }\n }\n\n toggleOverlay( false );\n clear_content();\n $( window ).unbind( 'resize.modal' );\n\n $modal.trigger( 'modal:closecomplete' );\n preserve = false;\n isOpen = false;\n }, 200 );\n};\n\nfunction handleClose ( e ) {\n if ( [$modal[0], $overlay[0], $close[0]].indexOf( e.target ) > -1 ) {\n e.preventDefault();\n close();\n }\n}\n\nfunction clear_content () {\n $modal.hide();\n // patch: set iframe src to current location to clear out iframes flash video for IE,\n // otherwise video continues playing in background - simply removing the content from page doesn't work\n $content.css( {top: 'auto', left: 'auto'} ).find( 'iframe' ).attr( 'src', window.location.href );\n\n $content.empty();\n $overlay.fadeOut( 300 );\n}\n\nconst Modal = {\n getInstance: function ( config ) {\n const modal = namespace( 'Modal' );\n\n if ( modal.instance ) {\n return modal.instance;\n }\n\n console.warn( '[upi.Modal Initialized]' );\n modal.instance = this._init( config );\n return modal.instance;\n },\n\n _init: function ( config ) {\n $overlay = $( '' );\n $modal = $( '' );\n $content = $( '' );\n $close = $( '' );\n\n this.el = $modal;\n this.selector = '#modal';\n\n // set metadata\n $modal.data( 'origClassList', $modal.attr( 'class' ) );\n $modal.hide();\n $overlay.hide();\n $modal.append( $content, $close );\n\n this._init_events( config );\n\n $( document ).ready( function () {\n $( 'body' ).append( $overlay, $modal );\n $( document ).on( 'click', '[data-modal]', openTarget );\n } );\n\n return this;\n },\n\n _init_events: function () {\n $( document ).on( 'click', handleClose );\n $( window ).on( 'close.modal modal:close', this.close );\n $( window ).on( 'scroll wheel', preventScrolling );\n this.el.on( 'click', '*[data-modal-close]', this.close );\n },\n\n center: center,\n open: open,\n close: close,\n setContent: content => {\n setContent( content );\n center();\n }\n};\n\nexport default Modal;\n","\nimport Provider from 'preact-context-provider';\nimport {client} from '@core/GraphQLProvider';\nimport User from '@modules/User';\n\nconst UpiContextProvider = ( props ) =>\n