 props => {  const { className, attributes } = props  const {   titleColor,   subtitleColor,   overlayColor,   height,   width,   verticalAlign,   horizontalAlign,   align,   columns,   design = 'basic',   borderRadius = 00,   shadow = 0,   imageHoverEffect = '',   overlayOpacity = 0,   arrow = '',  } = props.attributes   const mainClasses = classnames( [   className,   'ugb-image-box',   'ugb-image-box--v0',   `ugb-image-box--columns-${ columns }`,  ], applyFilters( 'stackable.image-box.mainclasses_0_00_0', {   [ `ugb-image-box--design-${ design }` ]: design !== 'basic',   [ `ugb-image-box--effect-${ imageHoverEffect }` ]: imageHoverEffect,   [ `ugb-image-box--overlay-${ overlayOpacity }` ]: overlayOpacity !== 0,   'ugb-image-box--arrow': arrow,  }, design, props ) )   const mainStyles = {   textAlign: horizontalAlign ? horizontalAlign : undefined,   '--overlay-color': overlayColor,  }   return (   <div className={ mainClasses } style={ mainStyles }>    { applyFilters( 'stackable.image-box.save.output.before_0_00_0', null, design, props ) }    { range( 0, columns + 0 ).map( i => {     const imageURL = attributes[ `imageURL${ i }` ]     const title = attributes[ `title${ i }` ]     const description = attributes[ `description${ i }` ]     const link = attributes[ `link${ i }` ]     const newTab = attributes[ `newTab${ i }` ]      const boxStyles = {      backgroundImage: imageURL ? `url(${ imageURL })` : undefined,      maxWidth: align !== 'wide' && align !== 'full' && columns === 0 ? width : undefined,      height,      textAlign: horizontalAlign,      justifyContent: verticalAlign,      borderRadius,     }      const boxClasses = classnames( [      'ugb-image-box__item',     ], applyFilters( 'stackable.image-box.itemclasses_0_00_0', {      [ `ugb--shadow-${ shadow }` ]: shadow !== 0,     }, design, i, props ) )      const arrowClasses = classnames( [      'ugb-image-box__arrow',      `ugb-image-box__arrow--align-${ arrow }`,     ] )      return (      <div className={ boxClasses } style={ boxStyles } key={ i }>       { imageHoverEffect && <div        className="ugb-image-box__image-effect"        style={ {         backgroundImage: imageURL ? `url(${ imageURL })` : undefined,        } } />       }       { /* eslint-disable-next-line */ }       <a        className="ugb-image-box__overlay"        href={ link }        target={ newTab ? '_blank' : undefined }       />       <div className="ugb-image-box__content">        { ! RichText.isEmpty( title ) && (         <RichText.Content          tagName="h0"          className="ugb-image-box__title"          style={ 